From f132183c1d683cb08d5a83bf3e7beca69ab3fc53 Mon Sep 17 00:00:00 2001
From: Dym Sohin <re@dym.sh>
Date: Fri, 6 Oct 2023 23:12:53 +0200
Subject: [PATCH] init

---
 017-erosion/README.markdown                   |     5 +
 017-erosion/dist/index.html                   |    17 +
 017-erosion/dist/script.js                    |   364 +
 017-erosion/license.txt                       |     8 +
 017-erosion/src/index.html                    |     0
 017-erosion/src/script.babel                  |   366 +
 1-codevember-2017galaxy/README.markdown       |     4 +
 1-codevember-2017galaxy/dist/index.html       |    18 +
 1-codevember-2017galaxy/dist/script.js        |   139 +
 1-codevember-2017galaxy/dist/style.css        |     4 +
 1-codevember-2017galaxy/license.txt           |     8 +
 1-codevember-2017galaxy/src/index.html        |     1 +
 1-codevember-2017galaxy/src/script.js         |   139 +
 1-codevember-2017galaxy/src/style.scss        |     4 +
 1-element-css-spinners/README.markdown        |     4 +
 1-element-css-spinners/dist/index.html        |    55 +
 1-element-css-spinners/dist/style.css         |   310 +
 1-element-css-spinners/license.txt            |    13 +
 1-element-css-spinners/src/index.pug          |     5 +
 1-element-css-spinners/src/style.scss         |   217 +
 10-000-codepen-followers/README.markdown      |     5 +
 10-000-codepen-followers/dist/index.html      |    73 +
 10-000-codepen-followers/dist/script.js       |   244 +
 10-000-codepen-followers/dist/style.css       |    23 +
 10-000-codepen-followers/license.txt          |     8 +
 10-000-codepen-followers/src/index.html       |    55 +
 10-000-codepen-followers/src/script.js        |   244 +
 10-000-codepen-followers/src/style.css        |    23 +
 10print-svg/README.markdown                   |     5 +
 10print-svg/dist/index.html                   |    17 +
 10print-svg/dist/script.js                    |    42 +
 10print-svg/dist/style.css                    |    26 +
 10print-svg/license.txt                       |     8 +
 10print-svg/src/index.html                    |     0
 10print-svg/src/script.babel                  |    42 +
 10print-svg/src/style.scss                    |    25 +
 141-in-2021-javascript-canvas/README.markdown |     5 +
 141-in-2021-javascript-canvas/dist/index.html |    16 +
 141-in-2021-javascript-canvas/dist/script.js  |    82 +
 141-in-2021-javascript-canvas/dist/style.css  |     5 +
 141-in-2021-javascript-canvas/license.txt     |     8 +
 141-in-2021-javascript-canvas/src/index.html  |     0
 141-in-2021-javascript-canvas/src/script.js   |    82 +
 141-in-2021-javascript-canvas/src/style.css   |     5 +
 20/README.markdown                            |     8 +
 20/dist/index.html                            |    17 +
 20/dist/script.js                             |   156 +
 20/dist/style.css                             |     3 +
 20/license.txt                                |     8 +
 20/src/index.html                             |     0
 20/src/script.js                              |   156 +
 20/src/style.css                              |     3 +
 2021-to-2022/README.markdown                  |     5 +
 2021-to-2022/dist/index.html                  |    49 +
 2021-to-2022/dist/style.css                   |   145 +
 2021-to-2022/license.txt                      |     8 +
 2021-to-2022/src/index.html                   |    34 +
 2021-to-2022/src/style.css                    |   145 +
 31-taint/README.markdown                      |     7 +
 31-taint/dist/index.html                      |    17 +
 31-taint/dist/script.js                       |   134 +
 31-taint/dist/style.css                       |     3 +
 31-taint/license.txt                          |     8 +
 31-taint/src/index.html                       |     0
 31-taint/src/script.js                        |   134 +
 31-taint/src/style.css                        |     3 +
 3d-css-kinetic-type-poster/README.markdown    |     6 +
 3d-css-kinetic-type-poster/dist/index.html    |    34 +
 3d-css-kinetic-type-poster/dist/script.js     |   167 +
 3d-css-kinetic-type-poster/dist/style.css     |   187 +
 3d-css-kinetic-type-poster/license.txt        |     8 +
 3d-css-kinetic-type-poster/src/index.html     |    18 +
 3d-css-kinetic-type-poster/src/script.js      |   167 +
 3d-css-kinetic-type-poster/src/style.scss     |   168 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |   291 +
 .../dist/script.js                            |    16 +
 .../dist/style.css                            |   777 +
 .../license.txt                               |     8 +
 .../src/index.pug                             |    73 +
 .../src/script.babel                          |    17 +
 .../src/style.styl                            |   668 +
 3d-css-sphere/README.markdown                 |     5 +
 3d-css-sphere/dist/index.html                 |    45 +
 3d-css-sphere/dist/style.css                  |   162 +
 3d-css-sphere/license.txt                     |     8 +
 3d-css-sphere/src/index.html                  |    29 +
 3d-css-sphere/src/style.css                   |   162 +
 3d-d20-die-with-pure-css/README.markdown      |     6 +
 3d-d20-die-with-pure-css/dist/index.html      |    66 +
 3d-d20-die-with-pure-css/dist/script.js       |    46 +
 3d-d20-die-with-pure-css/dist/style.css       |   302 +
 3d-d20-die-with-pure-css/license.txt          |    13 +
 3d-d20-die-with-pure-css/src/index.html       |    50 +
 3d-d20-die-with-pure-css/src/script.js        |    46 +
 3d-d20-die-with-pure-css/src/style.scss       |   188 +
 3d-dashboardspline/README.markdown            |     5 +
 3d-dashboardspline/dist/index.html            |    16 +
 3d-dashboardspline/dist/style.css             |     5 +
 3d-dashboardspline/license.txt                |     8 +
 3d-dashboardspline/src/index.html             |     1 +
 3d-dashboardspline/src/style.scss             |     5 +
 3d-drag-out-menu-with-guitar/README.markdown  |     4 +
 3d-drag-out-menu-with-guitar/dist/index.html  |   153 +
 3d-drag-out-menu-with-guitar/dist/script.js   |   327 +
 3d-drag-out-menu-with-guitar/dist/style.css   |   746 +
 3d-drag-out-menu-with-guitar/license.txt      |    13 +
 3d-drag-out-menu-with-guitar/src/index.haml   |    30 +
 3d-drag-out-menu-with-guitar/src/script.babel |   327 +
 3d-drag-out-menu-with-guitar/src/style.scss   |   330 +
 3d-ish-hamburger-menu/README.markdown         |     6 +
 3d-ish-hamburger-menu/dist/index.html         |    25 +
 3d-ish-hamburger-menu/dist/style.css          |   251 +
 3d-ish-hamburger-menu/license.txt             |    13 +
 3d-ish-hamburger-menu/src/index.html          |    11 +
 3d-ish-hamburger-menu/src/style.scss          |   328 +
 3d-polaroid-world/README.markdown             |    20 +
 3d-polaroid-world/dist/index.html             |   170 +
 3d-polaroid-world/dist/script.js              |   342 +
 3d-polaroid-world/dist/style.css              |    94 +
 3d-polaroid-world/license.txt                 |     8 +
 3d-polaroid-world/src/index.html              |   154 +
 3d-polaroid-world/src/script.babel            |   342 +
 3d-polaroid-world/src/style.scss              |   103 +
 3d-spaceshipgsap/README.markdown              |     5 +
 3d-spaceshipgsap/dist/index.html              |   363 +
 3d-spaceshipgsap/dist/script.js               |   124 +
 3d-spaceshipgsap/dist/style.css               |  1619 +
 3d-spaceshipgsap/license.txt                  |     8 +
 3d-spaceshipgsap/src/index.pug                |   169 +
 3d-spaceshipgsap/src/script.js                |   124 +
 3d-spaceshipgsap/src/style.scss               |   943 +
 3d-xylophone/README.markdown                  |     5 +
 3d-xylophone/dist/index.html                  |    20 +
 3d-xylophone/dist/script.js                   |    68 +
 3d-xylophone/dist/style.css                   |    12 +
 3d-xylophone/license.txt                      |     8 +
 3d-xylophone/src/index.html                   |     4 +
 3d-xylophone/src/script.js                    |    68 +
 3d-xylophone/src/style.css                    |    12 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    94 +
 .../dist/style.css                            |    54 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    80 +
 .../src/style.scss                            |    36 +
 60-gradient-morphing-blob/README.markdown     |     5 +
 60-gradient-morphing-blob/dist/index.html     |    25 +
 60-gradient-morphing-blob/dist/script.js      |    89 +
 60-gradient-morphing-blob/dist/style.css      |    37 +
 60-gradient-morphing-blob/license.txt         |     8 +
 60-gradient-morphing-blob/src/index.html      |    10 +
 60-gradient-morphing-blob/src/script.js       |    89 +
 60-gradient-morphing-blob/src/style.css       |    37 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |   369 +
 .../dist/style.css                            |  2212 +
 .../license.txt                               |    13 +
 .../src/index.haml                            |    29 +
 .../src/style.scss                            |   553 +
 CodePen_Export_WKdodx/README.markdown         |     5 +
 CodePen_Export_WKdodx/dist/index.html         |   156 +
 CodePen_Export_WKdodx/dist/style.css          |    43 +
 CodePen_Export_WKdodx/license.txt             |     8 +
 CodePen_Export_WKdodx/src/index.html          |   142 +
 CodePen_Export_WKdodx/src/style.css           |    43 +
 a-css-only-carousel-slider/README.markdown    |    17 +
 a-css-only-carousel-slider/dist/index.html    |    79 +
 a-css-only-carousel-slider/dist/style.css     |   228 +
 a-css-only-carousel-slider/license.txt        |     8 +
 a-css-only-carousel-slider/src/index.html     |    65 +
 a-css-only-carousel-slider/src/style.css      |   228 +
 a-fake-dream/README.markdown                  |     5 +
 a-fake-dream/dist/index.html                  |    22 +
 a-fake-dream/dist/script.js                   |   117 +
 a-fake-dream/dist/style.css                   |   108 +
 a-fake-dream/license.txt                      |     8 +
 a-fake-dream/src/index.html                   |     6 +
 a-fake-dream/src/script.babel                 |   117 +
 a-fake-dream/src/style.scss                   |   104 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    19 +
 .../dist/script.js                            |   197 +
 .../dist/style.css                            |    10 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     4 +
 .../src/script.js                             |   197 +
 .../src/style.css                             |    10 +
 .../README.markdown                           |    17 +
 .../dist/index.html                           |   214 +
 .../dist/script.js                            |     5 +
 .../dist/style.css                            | 49364 ++++++++++++++++
 .../license.txt                               |     8 +
 .../src/index.html                            |   199 +
 .../src/script.js                             |     5 +
 .../src/style.scss                            |  7160 +++
 .../README.markdown                           |    16 +
 .../dist/index.html                           |    16 +
 .../dist/script.js                            |    86 +
 .../dist/style.css                            |     8 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     1 +
 .../src/script.js                             |    86 +
 .../src/style.css                             |     8 +
 academy/README.markdown                       |     5 +
 academy/dist/index.html                       |    23 +
 academy/dist/script.js                        |   168 +
 academy/dist/style.css                        |    45 +
 academy/license.txt                           |     8 +
 academy/src/index.html                        |     7 +
 academy/src/script.js                         |   169 +
 academy/src/style.scss                        |    52 +
 accessibility-to-a11y/README.markdown         |     6 +
 accessibility-to-a11y/dist/index.html         |    16 +
 accessibility-to-a11y/dist/style.css          |   201 +
 accessibility-to-a11y/license.txt             |    13 +
 accessibility-to-a11y/src/index.html          |     3 +
 accessibility-to-a11y/src/style.scss          |    95 +
 acrobatic-preloader/README.markdown           |     5 +
 acrobatic-preloader/dist/index.html           |    32 +
 acrobatic-preloader/dist/style.css            |    98 +
 acrobatic-preloader/license.txt               |     8 +
 acrobatic-preloader/src/index.html            |    18 +
 acrobatic-preloader/src/style.css             |    98 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    27 +
 .../dist/script.js                            |    51 +
 .../dist/style.css                            |    64 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    12 +
 .../src/script.js                             |    51 +
 .../src/style.css                             |    60 +
 animated-atom-svg/README.markdown             |     4 +
 animated-atom-svg/dist/index.html             |    48 +
 animated-atom-svg/dist/script.js              |     5 +
 animated-atom-svg/dist/style.css              |   236 +
 animated-atom-svg/license.txt                 |     8 +
 animated-atom-svg/src/index.html              |    33 +
 animated-atom-svg/src/script.js               |     5 +
 animated-atom-svg/src/style.scss              |   109 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    24 +
 .../dist/script.js                            |     5 +
 .../dist/style.css                            |   230 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     9 +
 .../src/script.js                             |     5 +
 .../src/style.css                             |   230 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    17 +
 .../dist/script.js                            |   305 +
 .../dist/style.css                            |    19 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     2 +
 .../src/script.babel                          |   305 +
 .../src/style.css                             |    19 +
 animated-striped-gradient-button/LICENSE.txt  |    21 +
 animated-striped-gradient-button/README.md    |     5 +
 .../dist/index.html                           |    15 +
 .../dist/style.css                            |    89 +
 .../src/index.html                            |     1 +
 .../src/style.scss                            |   116 +
 animated-verbs-ii/README.markdown             |     6 +
 animated-verbs-ii/dist/index.html             |    27 +
 animated-verbs-ii/dist/mwgbqon.css            |   227 +
 animated-verbs-ii/dist/script.js              |     1 +
 animated-verbs-ii/dist/style.css              |   441 +
 animated-verbs-ii/license.txt                 |    17 +
 animated-verbs-ii/src/index.html              |     8 +
 animated-verbs-ii/src/mwgbqon.css             |   227 +
 animated-verbs-ii/src/script.js               |     1 +
 animated-verbs-ii/src/style.scss              |   222 +
 .../LICENSE.txt                               |    21 +
 .../README.md                                 |     5 +
 .../dist/index.html                           |   129 +
 .../dist/script.js                            |   317 +
 .../dist/style.css                            |   137 +
 .../src/index.html                            |   110 +
 .../src/script.js                             |   319 +
 .../src/style.css                             |   137 +
 .../README.markdown                           |    15 +
 .../dist/index.html                           |    21 +
 another-branching-strategy-svg/dist/script.js |   175 +
 another-branching-strategy-svg/dist/style.css |    13 +
 another-branching-strategy-svg/license.txt    |     8 +
 another-branching-strategy-svg/src/index.html |     6 +
 another-branching-strategy-svg/src/script.js  |   175 +
 another-branching-strategy-svg/src/style.css  |    13 +
 apart/README.markdown                         |     5 +
 apart/dist/index.html                         |    16 +
 apart/dist/script.js                          |   166 +
 apart/dist/style.css                          |     4 +
 apart/license.txt                             |     8 +
 apart/src/index.html                          |     0
 apart/src/script.js                           |   166 +
 apart/src/style.css                           |     4 +
 apple-inspired-pride-clock/LICENSE.txt        |    21 +
 apple-inspired-pride-clock/README.md          |     4 +
 apple-inspired-pride-clock/dist/index.html    |    24 +
 apple-inspired-pride-clock/dist/script.js     |     7 +
 apple-inspired-pride-clock/dist/style.css     |    73 +
 apple-inspired-pride-clock/src/index.html     |     9 +
 apple-inspired-pride-clock/src/script.js      |     7 +
 apple-inspired-pride-clock/src/style.scss     |    94 +
 apple-keynote-animation/README.markdown       |     5 +
 apple-keynote-animation/dist/index.html       |    20 +
 apple-keynote-animation/dist/script.js        |   145 +
 apple-keynote-animation/dist/style.css        |    25 +
 apple-keynote-animation/license.txt           |     8 +
 apple-keynote-animation/src/index.html        |     5 +
 apple-keynote-animation/src/script.js         |   145 +
 apple-keynote-animation/src/style.scss        |    23 +
 art-gallery/README.markdown                   |     6 +
 art-gallery/dist/index.html                   |    28 +
 art-gallery/dist/script.js                    |   516 +
 art-gallery/dist/style.css                    |   139 +
 art-gallery/license.txt                       |     8 +
 art-gallery/src/index.html                    |    12 +
 art-gallery/src/script.js                     |   516 +
 art-gallery/src/style.css                     |   139 +
 art-of-noise-29/README.markdown               |     5 +
 art-of-noise-29/dist/index.html               |    24 +
 art-of-noise-29/dist/script.js                |   149 +
 art-of-noise-29/dist/style.css                |    97 +
 art-of-noise-29/license.txt                   |     8 +
 art-of-noise-29/src/index.html                |     6 +
 art-of-noise-29/src/script.js                 |   149 +
 art-of-noise-29/src/style.scss                |   114 +
 ascii-corridor/README.markdown                |     5 +
 ascii-corridor/dist/index.html                |    17 +
 ascii-corridor/dist/script.js                 |   136 +
 ascii-corridor/dist/style.css                 |    22 +
 ascii-corridor/license.txt                    |     8 +
 ascii-corridor/src/index.html                 |     1 +
 ascii-corridor/src/script.js                  |   136 +
 ascii-corridor/src/style.sass                 |    21 +
 background-patterns/README.markdown           |     5 +
 background-patterns/dist/index.html           |   365 +
 background-patterns/dist/script.js            |     6 +
 background-patterns/dist/style.css            |    82 +
 background-patterns/license.txt               |     8 +
 background-patterns/src/index.html            |   350 +
 background-patterns/src/script.js             |     6 +
 background-patterns/src/style.css             |    82 +
 balanced-truncation/LICENSE.txt               |    21 +
 balanced-truncation/README.md                 |     4 +
 balanced-truncation/dist/index.html           |    16 +
 balanced-truncation/dist/style.css            |    41 +
 balanced-truncation/src/index.html            |     2 +
 balanced-truncation/src/style.css             |    41 +
 banksyvalentine-s-day/README.markdown         |     4 +
 banksyvalentine-s-day/dist/index.html         |    16 +
 banksyvalentine-s-day/dist/script.js          |   231 +
 banksyvalentine-s-day/dist/style.css          |    19 +
 banksyvalentine-s-day/license.txt             |     8 +
 banksyvalentine-s-day/src/index.html          |     0
 banksyvalentine-s-day/src/script.js           |   231 +
 banksyvalentine-s-day/src/style.css           |    19 +
 .../README.markdown                           |     6 +
 .../dist/index.html                           |    17 +
 .../dist/script.js                            |   123 +
 .../dist/style.css                            |    21 +
 .../license.txt                               |     8 +
 .../src/index.pug                             |     1 +
 .../src/script.js                             |   123 +
 .../src/style.styl                            |    19 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    16 +
 .../dist/script.js                            |   237 +
 .../dist/style.css                            |    48 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     1 +
 .../src/script.js                             |   237 +
 .../src/style.css                             |    48 +
 bbc13-minutes-to-the-moon/README.markdown     |     7 +
 bbc13-minutes-to-the-moon/dist/index.html     |    67 +
 bbc13-minutes-to-the-moon/dist/script.js      |    99 +
 bbc13-minutes-to-the-moon/dist/style.css      |    83 +
 bbc13-minutes-to-the-moon/license.txt         |     8 +
 bbc13-minutes-to-the-moon/src/index.html      |    51 +
 bbc13-minutes-to-the-moon/src/script.js       |    99 +
 bbc13-minutes-to-the-moon/src/style.scss      |    80 +
 beating-heart/README.markdown                 |     5 +
 beating-heart/dist/index.html                 |    21 +
 beating-heart/dist/script.js                  |   130 +
 beating-heart/dist/style.css                  |     5 +
 beating-heart/license.txt                     |     8 +
 beating-heart/src/index.html                  |     0
 beating-heart/src/script.js                   |   130 +
 beating-heart/src/style.scss                  |     5 +
 best-css-3d-cuboid-ever/README.markdown       |    15 +
 best-css-3d-cuboid-ever/dist/index.html       |    24 +
 best-css-3d-cuboid-ever/dist/script.js        |    11 +
 best-css-3d-cuboid-ever/dist/style.css        |   228 +
 best-css-3d-cuboid-ever/dist/vyegypg.css      |   146 +
 best-css-3d-cuboid-ever/license.txt           |     8 +
 best-css-3d-cuboid-ever/src/index.pug         |     7 +
 best-css-3d-cuboid-ever/src/script.js         |    11 +
 best-css-3d-cuboid-ever/src/style.scss        |   131 +
 best-css-3d-cuboid-ever/src/vyegypg.css       |   146 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    91 +
 .../dist/script.js                            |    23 +
 .../dist/style.css                            |  1132 +
 .../license.txt                               |     8 +
 .../src/index.pug                             |     8 +
 .../src/script.babel                          |    23 +
 .../src/style.scss                            |  1537 +
 .../LICENSE.txt                               |    22 +
 .../README.md                                 |     4 +
 .../dist/index.html                           |    27 +
 .../dist/script.js                            |     3 +
 .../dist/style.css                            |    92 +
 .../src/index.html                            |    12 +
 .../src/script.js                             |     3 +
 .../src/style.css                             |    92 +
 blob-study/README.markdown                    |     5 +
 blob-study/dist/apxlmx.js                     |   726 +
 blob-study/dist/index.html                    |   219 +
 blob-study/dist/script.js                     |   916 +
 blob-study/dist/style.css                     |     7 +
 blob-study/license.txt                        |     8 +
 blob-study/src/apxlmx.js                      |   726 +
 blob-study/src/index.html                     |   204 +
 blob-study/src/script.babel                   |   191 +
 blob-study/src/style.css                      |     7 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |  1442 +
 .../dist/script.js                            |    54 +
 .../dist/style.css                            |    19 +
 .../license.txt                               |     8 +
 .../src/index.html                            |  1427 +
 .../src/script.js                             |    54 +
 .../src/style.scss                            |    18 +
 blobhow-to/README.markdown                    |     5 +
 blobhow-to/dist/index.html                    |    29 +
 blobhow-to/dist/script.js                     |   249 +
 blobhow-to/dist/style.css                     |   113 +
 blobhow-to/license.txt                        |     8 +
 blobhow-to/src/index.html                     |    10 +
 blobhow-to/src/script.js                      |   249 +
 blobhow-to/src/style.scss                     |    81 +
 blobs/README.markdown                         |     4 +
 blobs/dist/index.html                         |   222 +
 blobs/dist/script.js                          |   179 +
 blobs/dist/style.css                          |     9 +
 blobs/license.txt                             |     8 +
 blobs/src/index.html                          |   204 +
 blobs/src/script.js                           |   179 +
 blobs/src/style.css                           |     9 +
 bloom/README.markdown                         |     6 +
 bloom/dist/index.html                         |    24 +
 bloom/dist/script.js                          |    99 +
 bloom/dist/style.css                          |    17 +
 bloom/license.txt                             |     8 +
 bloom/src/index.html                          |     8 +
 bloom/src/script.js                           |    99 +
 bloom/src/style.scss                          |    16 +
 bongo-cat-codes-2jamming/README.markdown      |     7 +
 bongo-cat-codes-2jamming/dist/index.html      |   214 +
 bongo-cat-codes-2jamming/dist/script.js       |   114 +
 bongo-cat-codes-2jamming/dist/style.css       |    69 +
 bongo-cat-codes-2jamming/license.txt          |     8 +
 bongo-cat-codes-2jamming/src/index.pug        |   157 +
 bongo-cat-codes-2jamming/src/script.babel     |   114 +
 bongo-cat-codes-2jamming/src/style.scss       |    76 +
 bongo-cat-codes/README.markdown               |     9 +
 bongo-cat-codes/dist/index.html               |   144 +
 bongo-cat-codes/dist/script.js                |     6 +
 bongo-cat-codes/dist/style.css                |   364 +
 bongo-cat-codes/license.txt                   |     8 +
 bongo-cat-codes/src/index.pug                 |    96 +
 bongo-cat-codes/src/script.babel              |     6 +
 bongo-cat-codes/src/style.scss                |   115 +
 book-store-ui/LICENSE.txt                     |    21 +
 book-store-ui/README.markdown                 |     7 +
 book-store-ui/README.md                       |     6 +
 book-store-ui/dist/index.html                 |   540 +
 book-store-ui/dist/style.css                  |   762 +
 book-store-ui/license.txt                     |     8 +
 book-store-ui/src/index.html                  |   525 +
 book-store-ui/src/style.scss                  |   787 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    45 +
 .../dist/script.js                            |    44 +
 .../dist/style.css                            |   104 +
 .../license.txt                               |     8 +
 .../src/index.pug                             |    50 +
 .../src/script.babel                          |    44 +
 .../src/style.styl                            |    77 +
 box-model/README.markdown                     |     5 +
 box-model/dist/index.html                     |    31 +
 box-model/dist/script.js                      |     7 +
 box-model/dist/style.css                      |   127 +
 box-model/license.txt                         |     8 +
 box-model/src/index.html                      |    15 +
 box-model/src/script.babel                    |     7 +
 box-model/src/style.css                       |   130 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    89 +
 .../dist/style.css                            |   282 +
 .../license.txt                               |    13 +
 .../src/index.html                            |    75 +
 .../src/style.scss                            |   190 +
 breathe/README.markdown                       |     5 +
 breathe/dist/index.html                       |    27 +
 breathe/dist/script.js                        |   144 +
 breathe/dist/style.css                        |    42 +
 breathe/license.txt                           |     8 +
 breathe/src/index.html                        |    11 +
 breathe/src/script.babel                      |   144 +
 breathe/src/style.scss                        |    42 +
 bricks-darkcss-doodle/README.markdown         |     4 +
 bricks-darkcss-doodle/dist/index.html         |    90 +
 bricks-darkcss-doodle/dist/script.js          |     6 +
 bricks-darkcss-doodle/dist/style.css          |    16 +
 bricks-darkcss-doodle/license.txt             |    13 +
 bricks-darkcss-doodle/src/index.html          |    74 +
 bricks-darkcss-doodle/src/script.babel        |     6 +
 bricks-darkcss-doodle/src/style.scss          |    16 +
 brutalism/README.markdown                     |     5 +
 brutalism/dist/index.html                     |    55 +
 brutalism/dist/style.css                      |   118 +
 brutalism/license.txt                         |     8 +
 brutalism/src/index.html                      |    41 +
 brutalism/src/style.scss                      |   140 +
 bubble-sort-colors/README.markdown            |     4 +
 bubble-sort-colors/dist/index.html            |    20 +
 bubble-sort-colors/dist/script.js             |    96 +
 bubble-sort-colors/dist/style.css             |    67 +
 bubble-sort-colors/license.txt                |    13 +
 bubble-sort-colors/src/index.html             |     6 +
 bubble-sort-colors/src/script.js              |    96 +
 bubble-sort-colors/src/style.css              |    67 +
 bubblegum-on-hover/README.markdown            |     5 +
 bubblegum-on-hover/dist/index.html            |    26 +
 bubblegum-on-hover/dist/script.js             |   159 +
 bubblegum-on-hover/dist/style.css             |    25 +
 bubblegum-on-hover/license.txt                |     8 +
 bubblegum-on-hover/src/index.html             |    10 +
 bubblegum-on-hover/src/script.js              |   159 +
 bubblegum-on-hover/src/style.scss             |    26 +
 bug-report-d20/README.markdown                |     4 +
 bug-report-d20/dist/index.html                |    45 +
 bug-report-d20/dist/script.js                 |    42 +
 bug-report-d20/dist/style.css                 |   273 +
 bug-report-d20/license.txt                    |    17 +
 bug-report-d20/src/index.html                 |    30 +
 bug-report-d20/src/script.babel               |    44 +
 bug-report-d20/src/style.scss                 |   157 +
 building-a-realtime-photoshop/README.markdown |     5 +
 building-a-realtime-photoshop/dist/index.html |    56 +
 building-a-realtime-photoshop/dist/script.js  |     9 +
 building-a-realtime-photoshop/dist/style.css  |    41 +
 building-a-realtime-photoshop/license.txt     |     8 +
 building-a-realtime-photoshop/src/index.html  |    41 +
 building-a-realtime-photoshop/src/script.js   |     9 +
 building-a-realtime-photoshop/src/style.css   |    41 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    40 +
 .../dist/style.css                            |    13 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    25 +
 .../src/style.css                             |    13 +
 c3-color-contrast-checker/README.markdown     |     4 +
 c3-color-contrast-checker/dist/index.html     |   133 +
 c3-color-contrast-checker/dist/script.js      |   136 +
 c3-color-contrast-checker/dist/style.css      |   183 +
 c3-color-contrast-checker/license.txt         |    13 +
 c3-color-contrast-checker/src/index.html      |   119 +
 c3-color-contrast-checker/src/script.js       |   136 +
 c3-color-contrast-checker/src/style.css       |   183 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    30 +
 .../dist/script.js                            |     5 +
 .../dist/style.css                            |   174 +
 cacheable-3-colour-svgs-via-use/license.txt   |     8 +
 .../src/index.slim                            |    47 +
 cacheable-3-colour-svgs-via-use/src/script.js |     5 +
 .../src/style.scss                            |   237 +
 .../README.markdown                           |    19 +
 .../dist/index.html                           |   350 +
 .../dist/style.css                            |    56 +
 .../license.txt                               |     8 +
 .../src/index.html                            |   325 +
 .../src/style.css                             |    56 +
 calm-in-the-iridescence/README.markdown       |     5 +
 calm-in-the-iridescence/dist/index.html       |    32 +
 calm-in-the-iridescence/dist/script.js        |   251 +
 calm-in-the-iridescence/dist/style.css        |     9 +
 calm-in-the-iridescence/license.txt           |     8 +
 calm-in-the-iridescence/src/index.html        |    16 +
 calm-in-the-iridescence/src/script.babel      |   251 +
 calm-in-the-iridescence/src/style.scss        |     2 +
 candy-cane/README.markdown                    |     4 +
 candy-cane/dist/index.html                    |    59 +
 candy-cane/dist/script.js                     |    50 +
 candy-cane/dist/style.css                     |    44 +
 candy-cane/license.txt                        |     8 +
 candy-cane/src/index.html                     |    44 +
 candy-cane/src/script.js                      |    50 +
 candy-cane/src/style.css                      |    44 +
 candy-stacker/README.markdown                 |     5 +
 candy-stacker/dist/index.html                 |   331 +
 candy-stacker/dist/script.js                  |   153 +
 candy-stacker/dist/style.css                  |    30 +
 candy-stacker/license.txt                     |     8 +
 candy-stacker/src/index.html                  |   316 +
 candy-stacker/src/script.babel                |   150 +
 candy-stacker/src/style.less                  |    80 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    55 +
 canvas-image-hover-interaction/dist/script.js |   628 +
 canvas-image-hover-interaction/dist/style.css |   125 +
 canvas-image-hover-interaction/license.txt    |     8 +
 canvas-image-hover-interaction/src/index.html |    40 +
 canvas-image-hover-interaction/src/script.js  |   628 +
 canvas-image-hover-interaction/src/style.scss |   127 +
 card-hover-interactions/README.markdown       |     4 +
 card-hover-interactions/dist/index.html       |    45 +
 card-hover-interactions/dist/style.css        |   215 +
 card-hover-interactions/license.txt           |     8 +
 card-hover-interactions/src/index.pug         |    13 +
 card-hover-interactions/src/style.scss        |   214 +
 card-interactions-with-gsap/README.markdown   |     9 +
 card-interactions-with-gsap/dist/index.html   |   306 +
 card-interactions-with-gsap/dist/script.js    |   279 +
 card-interactions-with-gsap/dist/style.css    |   107 +
 card-interactions-with-gsap/license.txt       |     8 +
 card-interactions-with-gsap/src/index.html    |   290 +
 card-interactions-with-gsap/src/script.js     |   279 +
 card-interactions-with-gsap/src/style.css     |   107 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    43 +
 .../dist/style.css                            |   188 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    28 +
 .../src/style.scss                            |   204 +
 carousel-lock-interface/README.markdown       |     9 +
 carousel-lock-interface/dist/index.html       |   163 +
 carousel-lock-interface/dist/script.js        |   158 +
 carousel-lock-interface/dist/style.css        |   363 +
 carousel-lock-interface/license.txt           |    13 +
 carousel-lock-interface/src/index.html        |   143 +
 carousel-lock-interface/src/script.babel      |   158 +
 carousel-lock-interface/src/style.scss        |   405 +
 casio-pt-1-with-html-css-js/README.markdown   |     5 +
 casio-pt-1-with-html-css-js/dist/index.html   |   230 +
 casio-pt-1-with-html-css-js/dist/script.js    |   172 +
 casio-pt-1-with-html-css-js/dist/style.css    |   632 +
 casio-pt-1-with-html-css-js/license.txt       |     8 +
 casio-pt-1-with-html-css-js/src/index.html    |   215 +
 casio-pt-1-with-html-css-js/src/script.babel  |   172 +
 casio-pt-1-with-html-css-js/src/style.css     |   612 +
 casiopt-1-css/README.markdown                 |    16 +
 casiopt-1-css/dist/index.html                 |   104 +
 casiopt-1-css/dist/style.css                  |   881 +
 casiopt-1-css/license.txt                     |     8 +
 casiopt-1-css/src/index.html                  |    90 +
 casiopt-1-css/src/style.css                   |   881 +
 ceramic-looped/README.markdown                |     5 +
 ceramic-looped/dist/index.html                |    25 +
 ceramic-looped/dist/script.js                 |   230 +
 ceramic-looped/dist/style.css                 |    20 +
 ceramic-looped/license.txt                    |     8 +
 ceramic-looped/src/index.html                 |     9 +
 ceramic-looped/src/script.babel               |   230 +
 ceramic-looped/src/style.scss                 |    17 +
 .../README.markdown                           |     7 +
 .../dist/index.html                           |   160 +
 checkbox-group-styled-as-tiles/dist/script.js |     1 +
 checkbox-group-styled-as-tiles/dist/style.css |   128 +
 checkbox-group-styled-as-tiles/license.txt    |     8 +
 checkbox-group-styled-as-tiles/src/index.html |   143 +
 checkbox-group-styled-as-tiles/src/script.js  |     1 +
 checkbox-group-styled-as-tiles/src/style.scss |   136 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    14 +
 .../dist/style.css                            |    19 +
 .../license.txt                               |    13 +
 .../src/index.html                            |     1 +
 .../src/style.css                             |    19 +
 checklist-animation/README.markdown           |     4 +
 checklist-animation/dist/index.html           |    30 +
 checklist-animation/dist/style.css            |   316 +
 checklist-animation/license.txt               |     8 +
 checklist-animation/src/index.html            |    15 +
 checklist-animation/src/style.scss            |   206 +
 christmas-cannon/LICENSE.txt                  |    21 +
 christmas-cannon/README.md                    |    12 +
 christmas-cannon/dist/index.html              |    34 +
 christmas-cannon/dist/script.js               |  1855 +
 christmas-cannon/dist/style.css               |   129 +
 christmas-cannon/src/index.html               |    19 +
 christmas-cannon/src/script.babel             |  1857 +
 christmas-cannon/src/style.scss               |   166 +
 city/README.markdown                          |     5 +
 city/dist/index.html                          |    16 +
 city/dist/script.js                           |   183 +
 city/dist/style.css                           |     1 +
 city/license.txt                              |     8 +
 city/src/index.html                           |     1 +
 city/src/script.js                            |   183 +
 city/src/style.css                            |     1 +
 claymorphism/README.markdown                  |     5 +
 claymorphism/dist/index.html                  |    18 +
 claymorphism/dist/style.css                   |    34 +
 claymorphism/license.txt                      |     8 +
 claymorphism/src/index.html                   |     4 +
 claymorphism/src/style.css                    |    34 +
 .../LICENSE.txt                               |    21 +
 .../README.md                                 |     4 +
 .../dist/index.html                           |    17 +
 .../dist/script.js                            |   327 +
 .../dist/style.css                            |    32 +
 .../src/index.html                            |     1 +
 .../src/script.js                             |   327 +
 .../src/style.css                             |    32 +
 clipped-image-reveal-on-hover/README.markdown |     5 +
 clipped-image-reveal-on-hover/dist/index.html |    26 +
 clipped-image-reveal-on-hover/dist/script.js  |    12 +
 clipped-image-reveal-on-hover/dist/style.css  |   109 +
 clipped-image-reveal-on-hover/license.txt     |     8 +
 clipped-image-reveal-on-hover/src/index.html  |    11 +
 clipped-image-reveal-on-hover/src/script.js   |    12 +
 clipped-image-reveal-on-hover/src/style.scss  |   104 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    94 +
 .../dist/script.js                            |     2 +
 .../dist/style.css                            |   294 +
 codepen-challenge-knockout-text/license.txt   |     8 +
 .../src/index.html                            |    79 +
 codepen-challenge-knockout-text/src/script.js |     2 +
 codepen-challenge-knockout-text/src/style.css |   294 +
 codevember-12/README.markdown                 |     7 +
 codevember-12/dist/index.html                 |    20 +
 codevember-12/dist/script.js                  |   525 +
 codevember-12/dist/style.css                  |    52 +
 codevember-12/license.txt                     |    13 +
 codevember-12/src/index.html                  |     3 +
 codevember-12/src/script.babel                |   525 +
 codevember-12/src/style.scss                  |    59 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    47 +
 .../dist/script.js                            |    36 +
 .../dist/style.css                            |     9 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    32 +
 .../src/script.js                             |    36 +
 .../src/style.css                             |     9 +
 .../README.markdown                           |    43 +
 .../dist/index.html                           |  1075 +
 .../dist/style.css                            |    30 +
 .../license.txt                               |     8 +
 .../src/index.pug                             |    18 +
 .../src/style.scss                            |    24 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    87 +
 .../dist/script.js                            |   184 +
 .../dist/style.css                            |    29 +
 .../license.txt                               |    13 +
 .../src/index.html                            |    70 +
 .../src/script.js                             |   184 +
 .../src/style.css                             |    28 +
 codevember-9/README.markdown                  |     4 +
 codevember-9/dist/index.html                  |   295 +
 codevember-9/dist/script.js                   |    71 +
 codevember-9/dist/style.css                   |    20 +
 codevember-9/license.txt                      |    17 +
 codevember-9/src/index.html                   |   279 +
 codevember-9/src/script.js                    |    71 +
 codevember-9/src/style.css                    |    20 +
 codevember11ladder-illusion/README.markdown   |     6 +
 codevember11ladder-illusion/dist/index.html   |    48 +
 codevember11ladder-illusion/dist/style.css    |    74 +
 codevember11ladder-illusion/license.txt       |     8 +
 codevember11ladder-illusion/src/index.pug     |    15 +
 codevember11ladder-illusion/src/style.scss    |    89 +
 cogs-with-variables/README.markdown           |     4 +
 cogs-with-variables/dist/index.html           |    28 +
 cogs-with-variables/dist/style.css            |    53 +
 cogs-with-variables/license.txt               |    13 +
 cogs-with-variables/src/index.html            |    15 +
 cogs-with-variables/src/style.css             |    53 +
 color-palettes/README.markdown                |     5 +
 color-palettes/dist/index.html                |   614 +
 color-palettes/dist/style.css                 |   441 +
 color-palettes/license.txt                    |     8 +
 color-palettes/src/index.pug                  |    57 +
 color-palettes/src/style.scss                 |   289 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    19 +
 .../dist/script.js                            |   291 +
 .../dist/style.css                            |   473 +
 color-search-engine-w-react-gsap/license.txt  |     8 +
 .../src/index.pug                             |     1 +
 .../src/script.babel                          |   291 +
 .../src/style.styl                            |   302 +
 .../LICENSE.txt                               |    21 +
 .../README.md                                 |     4 +
 .../dist/index.html                           |    52 +
 .../dist/script.js                            |   100 +
 .../dist/style.css                            |   212 +
 .../src/index.html                            |    36 +
 .../src/script.js                             |   100 +
 .../src/style.scss                            |   237 +
 color-wave/README.markdown                    |     5 +
 color-wave/dist/index.html                    |    88 +
 color-wave/dist/script.js                     |    33 +
 color-wave/dist/style.css                     |    16 +
 color-wave/license.txt                        |     8 +
 color-wave/src/index.html                     |    73 +
 color-wave/src/script.js                      |    33 +
 color-wave/src/style.scss                     |    14 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |   137 +
 .../dist/script.js                            |   152 +
 .../dist/style.css                            |    15 +
 .../license.txt                               |     8 +
 .../src/index.html                            |   122 +
 .../src/script.js                             |   152 +
 .../src/style.css                             |    15 +
 colorpencilscss-doodle/README.markdown        |     4 +
 colorpencilscss-doodle/dist/index.html        |   266 +
 colorpencilscss-doodle/dist/script.js         |     6 +
 colorpencilscss-doodle/dist/style.css         |    33 +
 colorpencilscss-doodle/license.txt            |    13 +
 colorpencilscss-doodle/src/index.html         |   249 +
 colorpencilscss-doodle/src/script.babel       |     6 +
 colorpencilscss-doodle/src/style.scss         |    28 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    63 +
 .../dist/style.css                            |   834 +
 .../license.txt                               |    13 +
 .../src/index.html                            |    49 +
 .../src/style.scss                            |   335 +
 confetti-button/README.markdown               |     5 +
 confetti-button/dist/index.html               |    18 +
 confetti-button/dist/script.js                |    23 +
 confetti-button/dist/style.css                |    44 +
 confetti-button/license.txt                   |     8 +
 confetti-button/src/index.html                |     1 +
 confetti-button/src/script.babel              |    23 +
 confetti-button/src/style.css                 |    44 +
 confluent-flow/README.markdown                |     5 +
 confluent-flow/dist/index.html                |    16 +
 confluent-flow/dist/script.js                 |  1361 +
 confluent-flow/dist/style.css                 |    30 +
 confluent-flow/license.txt                    |     8 +
 confluent-flow/src/index.pug                  |     1 +
 confluent-flow/src/script.js                  |  1361 +
 confluent-flow/src/style.scss                 |    27 +
 conic-gradient-in-svg/LICENSE.txt             |    21 +
 conic-gradient-in-svg/README.md               |     4 +
 conic-gradient-in-svg/dist/index.html         |    22 +
 conic-gradient-in-svg/dist/style.css          |     5 +
 conic-gradient-in-svg/src/index.html          |     8 +
 conic-gradient-in-svg/src/style.css           |     5 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    23 +
 .../dist/style.css                            |    97 +
 conic-gradients-css-masks-no-ff/license.txt   |     8 +
 .../src/index.html                            |     8 +
 .../src/style.scss                            |    88 +
 container-query-bookstore/README.markdown     |     5 +
 container-query-bookstore/dist/index.html     |   218 +
 container-query-bookstore/dist/script.js      |    51 +
 container-query-bookstore/dist/style.css      |   119 +
 container-query-bookstore/license.txt         |     8 +
 container-query-bookstore/src/index.html      |   201 +
 container-query-bookstore/src/script.js       |    51 +
 container-query-bookstore/src/style.css       |   119 +
 .../README.markdown                           |     7 +
 .../dist/index.html                           |    43 +
 .../dist/script.js                            |     1 +
 .../dist/style.css                            |   142 +
 context-menu-with-feather-icons/license.txt   |     8 +
 .../src/index.html                            |    27 +
 context-menu-with-feather-icons/src/script.js |     1 +
 .../src/style.scss                            |   157 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    72 +
 .../dist/script.js                            |   142 +
 .../dist/style.css                            |    12 +
 copy-table-as-csv-web-component/license.txt   |     8 +
 .../src/index.html                            |    56 +
 copy-table-as-csv-web-component/src/script.js |   142 +
 .../src/style.scss                            |    13 +
 countdown-to-new-year/README.markdown         |     5 +
 countdown-to-new-year/dist/index.html         |    47 +
 countdown-to-new-year/dist/script.js          |    56 +
 countdown-to-new-year/dist/style.css          |   363 +
 countdown-to-new-year/license.txt             |     8 +
 countdown-to-new-year/src/index.pug           |    40 +
 countdown-to-new-year/src/script.js           |    56 +
 countdown-to-new-year/src/style.css           |   350 +
 cpc-dropdown-slots/README.markdown            |     5 +
 cpc-dropdown-slots/dist/index.html            |    30 +
 cpc-dropdown-slots/dist/script.js             |    64 +
 cpc-dropdown-slots/dist/style.css             |   164 +
 cpc-dropdown-slots/license.txt                |     8 +
 cpc-dropdown-slots/src/index.pug              |     9 +
 cpc-dropdown-slots/src/script.ts              |    86 +
 cpc-dropdown-slots/src/style.scss             |   163 +
 cqw-font-sizes/LICENSE.txt                    |    21 +
 cqw-font-sizes/README.md                      |     4 +
 cqw-font-sizes/dist/index.html                |    17 +
 cqw-font-sizes/dist/style.css                 |    19 +
 cqw-font-sizes/src/index.html                 |     3 +
 cqw-font-sizes/src/style.css                  |    19 +
 crazy-4/README.markdown                       |     4 +
 crazy-4/dist/index.html                       |    16 +
 crazy-4/dist/script.js                        |   125 +
 crazy-4/dist/style.css                        |    11 +
 crazy-4/license.txt                           |     8 +
 crazy-4/src/index.html                        |     1 +
 crazy-4/src/script.js                         |   125 +
 crazy-4/src/style.css                         |    11 +
 crossing-walls/README.markdown                |     7 +
 crossing-walls/dist/index.html                |    16 +
 crossing-walls/dist/script.js                 |   519 +
 crossing-walls/dist/style.css                 |     8 +
 crossing-walls/license.txt                    |     8 +
 crossing-walls/src/index.html                 |     1 +
 crossing-walls/src/script.js                  |   519 +
 crossing-walls/src/style.css                  |     8 +
 crystal-mountains/README.markdown             |     5 +
 crystal-mountains/dist/index.html             |    17 +
 crystal-mountains/dist/script.js              |    97 +
 crystal-mountains/dist/style.css              |    42 +
 crystal-mountains/license.txt                 |     8 +
 crystal-mountains/src/index.pug               |     2 +
 crystal-mountains/src/script.js               |    97 +
 crystal-mountains/src/style.styl              |    38 +
 css-artsphere/README.markdown                 |     5 +
 css-artsphere/dist/index.html                 |    24 +
 css-artsphere/dist/style.css                  |   171 +
 css-artsphere/license.txt                     |     8 +
 css-artsphere/src/index.html                  |    10 +
 css-artsphere/src/style.scss                  |   215 +
 css-clip-path-editor/README.markdown          |     5 +
 css-clip-path-editor/dist/index.html          |    20 +
 css-clip-path-editor/dist/script.js           |   418 +
 css-clip-path-editor/dist/style.css           |     3 +
 css-clip-path-editor/license.txt              |     8 +
 css-clip-path-editor/src/index.html           |     5 +
 css-clip-path-editor/src/script.js            |   418 +
 css-clip-path-editor/src/style.css            |     3 +
 css-color-rings/README.markdown               |     5 +
 css-color-rings/dist/index.html               |   127 +
 css-color-rings/dist/style.css                |    54 +
 css-color-rings/license.txt                   |     8 +
 css-color-rings/src/index.pug                 |    10 +
 css-color-rings/src/style.styl                |    46 +
 css-dna/README.markdown                       |    11 +
 css-dna/dist/index.html                       |    43 +
 css-dna/dist/script.js                        |     1 +
 css-dna/dist/style.css                        |   125 +
 css-dna/license.txt                           |     8 +
 css-dna/src/index.pug                         |     6 +
 css-dna/src/script.js                         |     1 +
 css-dna/src/style.css                         |   125 +
 css-dominoes/README.markdown                  |     5 +
 css-dominoes/dist/index.html                  |    68 +
 css-dominoes/dist/style.css                   |   458 +
 css-dominoes/license.txt                      |     8 +
 css-dominoes/src/index.html                   |    54 +
 css-dominoes/src/style.scss                   |   174 +
 css-filter-cards/README.markdown              |     5 +
 css-filter-cards/dist/index.html              |    48 +
 css-filter-cards/dist/style.css               |   117 +
 css-filter-cards/license.txt                  |     8 +
 css-filter-cards/src/index.html               |    34 +
 css-filter-cards/src/style.css                |   117 +
 css-filter-glitch/README.markdown             |     5 +
 css-filter-glitch/dist/index.html             |    18 +
 css-filter-glitch/dist/style.css              |    80 +
 css-filter-glitch/license.txt                 |     8 +
 css-filter-glitch/src/index.html              |     3 +
 css-filter-glitch/src/style.scss              |    24 +
 css-filter-text-animation/README.markdown     |     5 +
 css-filter-text-animation/dist/index.html     |    18 +
 css-filter-text-animation/dist/style.css      |    80 +
 css-filter-text-animation/license.txt         |     8 +
 css-filter-text-animation/src/index.html      |     3 +
 css-filter-text-animation/src/style.scss      |    59 +
 css-grid-card-variations/README.markdown      |     6 +
 css-grid-card-variations/dist/index.html      |   187 +
 css-grid-card-variations/dist/style.css       |   865 +
 css-grid-card-variations/license.txt          |    13 +
 css-grid-card-variations/src/index.pug        |    53 +
 css-grid-card-variations/src/style.scss       |   930 +
 css-grid-newspaper-layout/README.markdown     |     7 +
 css-grid-newspaper-layout/dist/index.html     |    80 +
 css-grid-newspaper-layout/dist/script.js      |     1 +
 css-grid-newspaper-layout/dist/style.css      |   599 +
 css-grid-newspaper-layout/license.txt         |     8 +
 css-grid-newspaper-layout/src/index.pug       |   134 +
 css-grid-newspaper-layout/src/script.js       |     1 +
 css-grid-newspaper-layout/src/style.scss      |   581 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |   180 +
 .../dist/script.js                            |     1 +
 .../dist/style.css                            |    66 +
 .../license.txt                               |     8 +
 .../src/index.html                            |   164 +
 .../src/script.js                             |     1 +
 .../src/style.scss                            |    65 +
 css-grid-template-builder/README.markdown     |     7 +
 css-grid-template-builder/dist/index.html     |    21 +
 css-grid-template-builder/dist/script.js      |   813 +
 css-grid-template-builder/dist/style.css      |    23 +
 css-grid-template-builder/license.txt         |     8 +
 css-grid-template-builder/src/index.html      |     1 +
 css-grid-template-builder/src/script.babel    |   814 +
 css-grid-template-builder/src/style.css       |    23 +
 css-hexagon-grid/README.markdown              |     4 +
 css-hexagon-grid/dist/index.html              |    70 +
 css-hexagon-grid/dist/style.css               |   287 +
 css-hexagon-grid/license.txt                  |    13 +
 css-hexagon-grid/src/index.html               |    57 +
 css-hexagon-grid/src/style.css                |   287 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    44 +
 .../dist/script.js                            |    15 +
 .../dist/style.css                            |   146 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    29 +
 .../src/script.js                             |    15 +
 .../src/style.css                             |   146 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    43 +
 css-is-awesome-css-motion-path/dist/style.css |   182 +
 css-is-awesome-css-motion-path/license.txt    |     8 +
 css-is-awesome-css-motion-path/src/index.html |    28 +
 css-is-awesome-css-motion-path/src/style.scss |   159 +
 .../README.markdown                           |     4 +
 .../dist/BarlowGX.ttf                         |   Bin 0 -> 338376 bytes
 .../dist/index.html                           |    17 +
 .../dist/style.css                            |    25 +
 .../license.txt                               |    17 +
 .../src/BarlowGX.ttf                          |   Bin 0 -> 338376 bytes
 .../src/index.html                            |     3 +
 .../src/style.scss                            |    28 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    93 +
 .../dist/script.js                            |    87 +
 .../dist/style.css                            |   132 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    78 +
 .../src/script.babel                          |    87 +
 .../src/style.css                             |   128 +
 css-only-direction-aware-box/README.markdown  |     5 +
 css-only-direction-aware-box/dist/index.html  |    34 +
 css-only-direction-aware-box/dist/script.js   |     1 +
 css-only-direction-aware-box/dist/style.css   |   227 +
 css-only-direction-aware-box/license.txt      |     8 +
 css-only-direction-aware-box/src/index.html   |    19 +
 css-only-direction-aware-box/src/script.js    |     1 +
 css-only-direction-aware-box/src/style.css    |   227 +
 .../README.markdown                           |    11 +
 .../dist/index.html                           |  1252 +
 .../dist/script.js                            |     1 +
 .../dist/style.css                            |  4572 ++
 .../license.txt                               |     8 +
 .../src/index.pug                             |   173 +
 .../src/script.js                             |     1 +
 .../src/style.scss                            |  1041 +
 css-only-interactive-3d-dice/README.markdown  |   141 +
 css-only-interactive-3d-dice/dist/index.html  |   202 +
 css-only-interactive-3d-dice/dist/style.css   |  1075 +
 css-only-interactive-3d-dice/license.txt      |     8 +
 css-only-interactive-3d-dice/src/index.pug    |    70 +
 css-only-interactive-3d-dice/src/style.scss   |   305 +
 css-only-switch-checkboxes/README.markdown    |     5 +
 css-only-switch-checkboxes/dist/index.html    |    42 +
 css-only-switch-checkboxes/dist/style.css     |    80 +
 css-only-switch-checkboxes/license.txt        |     8 +
 css-only-switch-checkboxes/src/index.html     |    28 +
 css-only-switch-checkboxes/src/style.css      |    80 +
 css-panning-perspective-plane/README.markdown |     4 +
 css-panning-perspective-plane/dist/index.html |    17 +
 css-panning-perspective-plane/dist/style.css  |    38 +
 css-panning-perspective-plane/license.txt     |    13 +
 css-panning-perspective-plane/src/index.haml  |     3 +
 css-panning-perspective-plane/src/style.scss  |    44 +
 .../README.markdown                           |     7 +
 .../dist/index.html                           |    87 +
 .../dist/style.css                            |   126 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    73 +
 .../src/style.scss                            |    72 +
 css-preloader/README.markdown                 |     5 +
 css-preloader/dist/index.html                 |   132 +
 css-preloader/dist/script.js                  |     5 +
 css-preloader/dist/style.css                  |   495 +
 css-preloader/license.txt                     |     8 +
 css-preloader/src/index.html                  |   117 +
 css-preloader/src/script.js                   |     5 +
 css-preloader/src/style.css                   |   495 +
 .../README.markdown                           |    13 +
 .../dist/index.html                           |   377 +
 .../dist/script.js                            |    97 +
 .../dist/style.css                            |  2824 +
 .../license.txt                               |     8 +
 .../src/index.html                            |   362 +
 .../src/script.js                             |    97 +
 .../src/style.css                             |  2824 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    81 +
 .../dist/style.css                            |   188 +
 css-shapes-columns-and-clipping/license.txt   |    13 +
 .../src/index.html                            |    66 +
 .../src/style.scss                            |   183 +
 css-squircle/README.markdown                  |     4 +
 css-squircle/dist/index.html                  |    16 +
 css-squircle/dist/style.css                   |    81 +
 css-squircle/license.txt                      |    13 +
 css-squircle/src/index.html                   |     3 +
 css-squircle/src/style.less                   |    88 +
 css-user-avatars/README.markdown              |     5 +
 css-user-avatars/dist/index.html              |   271 +
 css-user-avatars/dist/script.js               |    11 +
 css-user-avatars/dist/style.css               |  1915 +
 css-user-avatars/license.txt                  |     8 +
 css-user-avatars/src/index.html               |   256 +
 css-user-avatars/src/script.js                |    11 +
 css-user-avatars/src/style.less               |  1795 +
 css3-loader-spinners/README.markdown          |     5 +
 css3-loader-spinners/dist/index.html          |   142 +
 css3-loader-spinners/dist/style.css           |  5130 ++
 css3-loader-spinners/license.txt              |     8 +
 css3-loader-spinners/src/index.pug            |    36 +
 css3-loader-spinners/src/style.scss           |  3566 ++
 cssfrosted-glass/README.markdown              |     4 +
 cssfrosted-glass/dist/index.html              |    17 +
 cssfrosted-glass/dist/style.css               |    81 +
 cssfrosted-glass/license.txt                  |    13 +
 cssfrosted-glass/src/index.html               |     4 +
 cssfrosted-glass/src/style.scss               |    97 +
 csspotlight/README.markdown                   |     5 +
 csspotlight/dist/index.html                   |    22 +
 csspotlight/dist/script.js                    |    23 +
 csspotlight/dist/style.css                    |    80 +
 csspotlight/license.txt                       |     8 +
 csspotlight/src/index.html                    |     6 +
 csspotlight/src/script.js                     |    23 +
 csspotlight/src/style.scss                    |   115 +
 cups-pattern/README.markdown                  |     7 +
 cups-pattern/dist/index.html                  |    67 +
 cups-pattern/dist/script.js                   |    11 +
 cups-pattern/dist/style.css                   |   123 +
 cups-pattern/license.txt                      |     8 +
 cups-pattern/src/index.pug                    |     4 +
 cups-pattern/src/script.js                    |    11 +
 cups-pattern/src/style.scss                   |   124 +
 curiouslyminded-with-flopine/README.markdown  |    17 +
 curiouslyminded-with-flopine/dist/index.html  |   119 +
 curiouslyminded-with-flopine/dist/script.js   |    70 +
 curiouslyminded-with-flopine/dist/style.css   |    15 +
 curiouslyminded-with-flopine/license.txt      |     8 +
 curiouslyminded-with-flopine/src/index.html   |   104 +
 curiouslyminded-with-flopine/src/script.js    |    70 +
 curiouslyminded-with-flopine/src/style.scss   |    14 +
 curl-noise/README.markdown                    |     8 +
 curl-noise/dist/index.html                    |   452 +
 curl-noise/dist/script.js                     |   279 +
 curl-noise/dist/style.css                     |     5 +
 curl-noise/license.txt                        |     8 +
 curl-noise/src/index.html                     |   435 +
 curl-noise/src/script.babel                   |   280 +
 curl-noise/src/style.css                      |     5 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    24 +
 .../dist/script.js                            |   173 +
 .../dist/style.css                            |   190 +
 custom-right-click-context-menu/license.txt   |     8 +
 .../src/index.html                            |     8 +
 .../src/script.babel                          |   173 +
 .../src/style.scss                            |   180 +
 customer-management-ui/README.markdown        |     6 +
 customer-management-ui/dist/index.html        |   499 +
 customer-management-ui/dist/script.js         |    10 +
 customer-management-ui/dist/style.css         |  1057 +
 customer-management-ui/license.txt            |     8 +
 customer-management-ui/src/index.html         |   483 +
 customer-management-ui/src/script.js          |    10 +
 customer-management-ui/src/style.scss         |  1018 +
 d3-map-projections/README.markdown            |     4 +
 d3-map-projections/dist/index.html            |   145 +
 d3-map-projections/dist/script.js             |   171 +
 d3-map-projections/dist/style.css             |    36 +
 d3-map-projections/license.txt                |    17 +
 d3-map-projections/src/index.html             |   130 +
 d3-map-projections/src/script.js              |   171 +
 d3-map-projections/src/style.css              |    36 +
 daily-pen-3disco/README.markdown              |     4 +
 daily-pen-3disco/dist/index.html              |    22 +
 daily-pen-3disco/dist/script.js               |   132 +
 daily-pen-3disco/dist/style.css               |    26 +
 daily-pen-3disco/license.txt                  |    13 +
 daily-pen-3disco/src/index.pug                |     1 +
 daily-pen-3disco/src/script.babel             |   132 +
 daily-pen-3disco/src/style.less               |    30 +
 daily-ui-006-user-profile/README.markdown     |     4 +
 daily-ui-006-user-profile/dist/index.html     |    28 +
 daily-ui-006-user-profile/dist/script.js      |    10 +
 daily-ui-006-user-profile/dist/style.css      |   220 +
 daily-ui-006-user-profile/license.txt         |    13 +
 daily-ui-006-user-profile/src/index.pug       |    18 +
 daily-ui-006-user-profile/src/script.coffee   |     3 +
 daily-ui-006-user-profile/src/style.sass      |   161 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |   406 +
 .../dist/script.js                            |   143 +
 .../dist/style.css                            |   178 +
 .../license.txt                               |     8 +
 .../src/index.haml                            |     9 +
 .../src/script.js                             |   143 +
 .../src/style.scss                            |   224 +
 day-and-night-toggle/README.markdown          |     4 +
 day-and-night-toggle/dist/index.html          |    85 +
 day-and-night-toggle/dist/script.js           |   118 +
 day-and-night-toggle/dist/style.css           |    26 +
 day-and-night-toggle/license.txt              |    13 +
 day-and-night-toggle/src/index.html           |    70 +
 day-and-night-toggle/src/script.js            |   118 +
 day-and-night-toggle/src/style.css            |    26 +
 daylight-cycles-of-earth/README.markdown      |     5 +
 daylight-cycles-of-earth/dist/index.html      |    72 +
 daylight-cycles-of-earth/dist/script.js       |    51 +
 daylight-cycles-of-earth/dist/style.css       |   263 +
 daylight-cycles-of-earth/license.txt          |     8 +
 daylight-cycles-of-earth/src/index.html       |    58 +
 daylight-cycles-of-earth/src/script.js        |    51 +
 daylight-cycles-of-earth/src/style.scss       |   312 +
 dendritic-rabbit/README.markdown              |     4 +
 dendritic-rabbit/dist/index.html              |    17 +
 dendritic-rabbit/dist/script.js               |    61 +
 dendritic-rabbit/license.txt                  |    17 +
 dendritic-rabbit/src/index.html               |     0
 dendritic-rabbit/src/script.js                |    61 +
 design-your-week/README.markdown              |     4 +
 design-your-week/dist/index.html              |    88 +
 design-your-week/dist/script.js               |   333 +
 design-your-week/dist/style.css               |   401 +
 design-your-week/license.txt                  |    13 +
 design-your-week/src/index.html               |    71 +
 design-your-week/src/script.babel             |   333 +
 design-your-week/src/style.scss               |   400 +
 details-element-for-help-text/README.markdown |     5 +
 details-element-for-help-text/dist/index.html |    38 +
 details-element-for-help-text/dist/style.css  |   119 +
 details-element-for-help-text/license.txt     |     8 +
 details-element-for-help-text/src/index.html  |    23 +
 details-element-for-help-text/src/style.scss  |   133 +
 diagonal-page-transitions/README.markdown     |     5 +
 diagonal-page-transitions/dist/index.html     |    22 +
 diagonal-page-transitions/dist/script.js      |    64 +
 diagonal-page-transitions/dist/style.css      |    57 +
 diagonal-page-transitions/license.txt         |     8 +
 diagonal-page-transitions/src/index.html      |     7 +
 diagonal-page-transitions/src/script.js       |    64 +
 diagonal-page-transitions/src/style.scss      |    69 +
 digital-walls/README.markdown                 |     5 +
 digital-walls/dist/index.html                 |   250 +
 digital-walls/dist/script.js                  |    50 +
 digital-walls/dist/style.css                  |   401 +
 digital-walls/license.txt                     |     8 +
 digital-walls/src/index.html                  |   233 +
 digital-walls/src/script.babel                |    50 +
 digital-walls/src/style.scss                  |   454 +
 draggable-blend-generator/README.markdown     |     9 +
 draggable-blend-generator/dist/index.html     |    66 +
 draggable-blend-generator/dist/script.js      |    73 +
 draggable-blend-generator/dist/style.css      |   174 +
 draggable-blend-generator/license.txt         |     8 +
 draggable-blend-generator/src/index.html      |    50 +
 draggable-blend-generator/src/script.js       |    73 +
 draggable-blend-generator/src/style.scss      |   181 +
 draggable-plugin-hello-kitty/README.markdown  |     5 +
 draggable-plugin-hello-kitty/dist/index.html  |   137 +
 draggable-plugin-hello-kitty/dist/script.js   |    15 +
 draggable-plugin-hello-kitty/dist/style.css   |    13 +
 draggable-plugin-hello-kitty/license.txt      |    13 +
 draggable-plugin-hello-kitty/src/index.html   |   121 +
 draggable-plugin-hello-kitty/src/script.babel |    15 +
 draggable-plugin-hello-kitty/src/style.scss   |    13 +
 dragon/README.markdown                        |    10 +
 dragon/dist/index.html                        |    43 +
 dragon/dist/script.js                         |    80 +
 dragon/dist/style.css                         |    19 +
 dragon/license.txt                            |     8 +
 dragon/src/index.html                         |    28 +
 dragon/src/script.js                          |    80 +
 dragon/src/style.css                          |    19 +
 dreaming-of-jupiterthree-js/README.markdown   |     5 +
 dreaming-of-jupiterthree-js/dist/index.html   |    17 +
 dreaming-of-jupiterthree-js/dist/script.js    |   245 +
 dreaming-of-jupiterthree-js/dist/style.css    |    40 +
 dreaming-of-jupiterthree-js/license.txt       |     8 +
 dreaming-of-jupiterthree-js/src/index.html    |     2 +
 dreaming-of-jupiterthree-js/src/script.js     |   245 +
 dreaming-of-jupiterthree-js/src/style.css     |    40 +
 drum-sequencer-w-sample-pad/README.markdown   |     5 +
 drum-sequencer-w-sample-pad/dist/index.html   |   166 +
 drum-sequencer-w-sample-pad/dist/script.js    |   151 +
 drum-sequencer-w-sample-pad/dist/style.css    |   334 +
 drum-sequencer-w-sample-pad/license.txt       |     8 +
 drum-sequencer-w-sample-pad/src/index.html    |   151 +
 drum-sequencer-w-sample-pad/src/script.js     |   151 +
 drum-sequencer-w-sample-pad/src/style.css     |   334 +
 dualitypure-css/README.markdown               |     5 +
 dualitypure-css/dist/index.html               |    26 +
 dualitypure-css/dist/style.css                |    52 +
 dualitypure-css/license.txt                   |     8 +
 dualitypure-css/src/index.pug                 |     6 +
 dualitypure-css/src/style.styl                |    49 +
 duo/README.markdown                           |     7 +
 duo/dist/index.html                           |    17 +
 duo/dist/script.js                            |   120 +
 duo/dist/style.css                            |    18 +
 duo/license.txt                               |     8 +
 duo/src/index.html                            |     1 +
 duo/src/script.js                             |   120 +
 duo/src/style.css                             |    18 +
 easings-are-rad/README.markdown               |     5 +
 easings-are-rad/dist/index.html               |    15 +
 easings-are-rad/dist/style.css                |    54 +
 easings-are-rad/license.txt                   |     8 +
 easings-are-rad/src/index.html                |     1 +
 easings-are-rad/src/style.css                 |    45 +
 .../README.markdown                           |     6 +
 .../dist/index.html                           |    67 +
 .../dist/style.css                            |   153 +
 .../license.txt                               |    17 +
 .../src/index.html                            |    52 +
 .../src/style.css                             |   153 +
 elk/README.markdown                           |     4 +
 elk/dist/index.html                           |    16 +
 elk/dist/script.js                            |    62 +
 elk/dist/style.css                            |     1 +
 elk/license.txt                               |    13 +
 elk/src/index.html                            |     1 +
 elk/src/script.js                             |    62 +
 elk/src/style.css                             |     1 +
 emoji_cover/README.markdown                   |     5 +
 emoji_cover/dist/index.html                   |    20 +
 emoji_cover/dist/script.js                    |    26 +
 emoji_cover/dist/style.css                    |    28 +
 emoji_cover/license.txt                       |     8 +
 emoji_cover/src/index.html                    |     5 +
 emoji_cover/src/script.js                     |    26 +
 emoji_cover/src/style.css                     |    28 +
 emojis-as-mask-images/README.markdown         |     5 +
 emojis-as-mask-images/dist/index.html         |    88 +
 emojis-as-mask-images/dist/style.css          |    32 +
 emojis-as-mask-images/license.txt             |     8 +
 emojis-as-mask-images/src/index.html          |    74 +
 emojis-as-mask-images/src/style.css           |    29 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    17 +
 euclidean-algorithm-visualizer/dist/script.js |   102 +
 euclidean-algorithm-visualizer/license.txt    |     8 +
 euclidean-algorithm-visualizer/src/index.html |     2 +
 euclidean-algorithm-visualizer/src/script.js  |   103 +
 expanding-flex-cards-2019/README.markdown     |     4 +
 .../dist/a8e37caf2a04602ea5815e5ac.css        |   243 +
 .../dist/a8e37caf2a04602ea5815e5ac.js         |     7 +
 expanding-flex-cards-2019/dist/index.html     |    84 +
 expanding-flex-cards-2019/dist/script.js      |     4 +
 expanding-flex-cards-2019/dist/style.css      |   171 +
 expanding-flex-cards-2019/license.txt         |    13 +
 .../src/a8e37caf2a04602ea5815e5ac.css         |   243 +
 .../src/a8e37caf2a04602ea5815e5ac.js          |     7 +
 expanding-flex-cards-2019/src/index.html      |    64 +
 expanding-flex-cards-2019/src/script.js       |     4 +
 expanding-flex-cards-2019/src/style.scss      |   160 +
 expanding-flex-cards-2021/README.markdown     |     7 +
 .../dist/a8e37caf2a04602ea5815e5ac.css        |   243 +
 expanding-flex-cards-2021/dist/index.html     |    83 +
 expanding-flex-cards-2021/dist/script.js      |     5 +
 expanding-flex-cards-2021/dist/style.css      |   390 +
 expanding-flex-cards-2021/license.txt         |     8 +
 .../src/a8e37caf2a04602ea5815e5ac.css         |   243 +
 expanding-flex-cards-2021/src/index.html      |    64 +
 expanding-flex-cards-2021/src/script.js       |     5 +
 expanding-flex-cards-2021/src/style.scss      |   164 +
 explode-a-node-3d-box-model/README.markdown   |     5 +
 explode-a-node-3d-box-model/dist/index.html   |    25 +
 explode-a-node-3d-box-model/dist/style.css    |   312 +
 explode-a-node-3d-box-model/license.txt       |     8 +
 explode-a-node-3d-box-model/src/index.html    |    10 +
 explode-a-node-3d-box-model/src/style.css     |   272 +
 .../README.markdown                           |     7 +
 .../dist/index.html                           |    46 +
 .../dist/style.css                            |   309 +
 faction-toggle-star-wars-ep-iv-vi/license.txt |     8 +
 .../src/index.html                            |    32 +
 .../src/style.css                             |   309 +
 fiesta/README.markdown                        |     5 +
 fiesta/dist/index.html                        |   225 +
 fiesta/dist/script.js                         |   179 +
 fiesta/dist/style.css                         |    60 +
 fiesta/license.txt                            |     8 +
 fiesta/src/index.html                         |   210 +
 fiesta/src/script.babel                       |   179 +
 fiesta/src/style.css                          |    60 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |   134 +
 .../dist/script.js                            |    23 +
 .../dist/style.css                            |   297 +
 .../license.txt                               |     8 +
 .../src/index.pug                             |    60 +
 .../src/script.babel                          |    23 +
 .../src/style.scss                            |   358 +
 firefly-flow/README.markdown                  |     5 +
 firefly-flow/dist/index.html                  |   370 +
 firefly-flow/dist/script.js                   |  1171 +
 firefly-flow/dist/style.css                   |    60 +
 firefly-flow/license.txt                      |     8 +
 firefly-flow/src/index.html                   |   355 +
 firefly-flow/src/script.babel                 |  1171 +
 firefly-flow/src/style.css                    |    60 +
 fishes/README.markdown                        |     5 +
 fishes/dist/index.html                        |    71 +
 fishes/dist/style.css                         |   628 +
 fishes/license.txt                            |     8 +
 fishes/src/index.html                         |    57 +
 fishes/src/style.css                          |   628 +
 fishing-game/README.markdown                  |     9 +
 fishing-game/dist/index.html                  |    70 +
 fishing-game/dist/script.js                   |   435 +
 fishing-game/dist/style.css                   |   236 +
 fishing-game/license.txt                      |     8 +
 fishing-game/src/index.html                   |    55 +
 fishing-game/src/script.babel                 |   435 +
 fishing-game/src/style.css                    |   236 +
 flame-animation/README.markdown               |     4 +
 flame-animation/dist/index.html               |    39 +
 flame-animation/dist/style.css                |    38 +
 flame-animation/license.txt                   |     8 +
 flame-animation/src/index.html                |    25 +
 flame-animation/src/style.css                 |    38 +
 .../LICENSE.txt                               |    21 +
 .../README.md                                 |     5 +
 .../dist/index.html                           |    68 +
 .../dist/style.css                            |    28 +
 .../src/index.html                            |    54 +
 .../src/style.sass                            |    25 +
 flexbox-playground/README.markdown            |     5 +
 flexbox-playground/dist/index.html            |   241 +
 flexbox-playground/dist/script.js             |    74 +
 flexbox-playground/dist/style.css             |   267 +
 flexbox-playground/license.txt                |     9 +
 flexbox-playground/src/index.html             |   226 +
 flexbox-playground/src/script.js              |    74 +
 flexbox-playground/src/style.css              |   267 +
 flipboxes/README.markdown                     |     5 +
 flipboxes/dist/index.html                     |    72 +
 flipboxes/dist/style.css                      |   301 +
 flipboxes/license.txt                         |     8 +
 flipboxes/src/index.html                      |    58 +
 flipboxes/src/style.scss                      |   227 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    21 +
 floating-island-w-threejs-gsap/dist/script.js |   542 +
 floating-island-w-threejs-gsap/dist/style.css |    26 +
 floating-island-w-threejs-gsap/license.txt    |     8 +
 floating-island-w-threejs-gsap/src/index.html |     3 +
 .../src/script.babel                          |   542 +
 floating-island-w-threejs-gsap/src/style.scss |    20 +
 flow/README.markdown                          |     7 +
 flow/dist/index.html                          |    16 +
 flow/dist/script.js                           |   102 +
 flow/dist/style.css                           |     5 +
 flow/license.txt                              |     8 +
 flow/src/index.html                           |     0
 flow/src/script.js                            |   102 +
 flow/src/style.css                            |     5 +
 flowing-imagehow-to/README.markdown           |     4 +
 flowing-imagehow-to/dist/index.html           |    24 +
 flowing-imagehow-to/dist/script.js            |   257 +
 flowing-imagehow-to/dist/style.css            |   105 +
 flowing-imagehow-to/license.txt               |     8 +
 flowing-imagehow-to/src/index.html            |     9 +
 flowing-imagehow-to/src/script.js             |   257 +
 flowing-imagehow-to/src/style.scss            |    73 +
 flutter-challengelayout/README.markdown       |     5 +
 flutter-challengelayout/dist/index.html       |    16 +
 flutter-challengelayout/dist/script.js        |   129 +
 flutter-challengelayout/license.txt           |     8 +
 flutter-challengelayout/src/index.html        |     0
 flutter-challengelayout/src/script.js         |   241 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    19 +
 .../dist/script.js                            |   251 +
 .../dist/style.css                            |     4 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     4 +
 .../src/script.js                             |   251 +
 .../src/style.css                             |     4 +
 focusss-v2/README.markdown                    |     5 +
 focusss-v2/dist/index.html                    |    50 +
 focusss-v2/dist/script.js                     |   198 +
 focusss-v2/dist/style.css                     |    95 +
 focusss-v2/license.txt                        |     8 +
 focusss-v2/src/index.html                     |    31 +
 focusss-v2/src/script.js                      |   198 +
 focusss-v2/src/style.css                      |    95 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    21 +
 .../dist/script.js                            |     1 +
 .../dist/style.css                            |    74 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     6 +
 .../src/script.js                             |     1 +
 .../src/style.scss                            |    78 +
 folding-ticket-detail/README.markdown         |     5 +
 folding-ticket-detail/dist/index.html         |    17 +
 folding-ticket-detail/dist/script.js          |   454 +
 folding-ticket-detail/dist/style.css          |   396 +
 folding-ticket-detail/license.txt             |     8 +
 folding-ticket-detail/src/index.html          |     1 +
 folding-ticket-detail/src/script.babel        |   454 +
 folding-ticket-detail/src/style.css           |   396 +
 fracture/README.markdown                      |     5 +
 fracture/dist/index.html                      |    16 +
 fracture/dist/script.js                       |   590 +
 fracture/dist/style.css                       |    30 +
 fracture/license.txt                          |     8 +
 fracture/src/index.pug                        |     1 +
 fracture/src/script.js                        |   591 +
 fracture/src/style.scss                       |    28 +
 fragment-shaders-ex-7/README.markdown         |     4 +
 fragment-shaders-ex-7/dist/index.html         |    74 +
 fragment-shaders-ex-7/dist/script.js          |   142 +
 fragment-shaders-ex-7/dist/style.css          |    33 +
 fragment-shaders-ex-7/license.txt             |    13 +
 fragment-shaders-ex-7/src/index.html          |    59 +
 fragment-shaders-ex-7/src/script.babel        |   142 +
 fragment-shaders-ex-7/src/style.less          |    37 +
 fredrikaflowfield-heart/README.markdown       |    20 +
 fredrikaflowfield-heart/dist/blgjlm.js        |   416 +
 fredrikaflowfield-heart/dist/index.html       |    16 +
 fredrikaflowfield-heart/dist/script.js        |   110 +
 fredrikaflowfield-heart/dist/style.css        |     7 +
 fredrikaflowfield-heart/license.txt           |    13 +
 fredrikaflowfield-heart/src/blgjlm.js         |   416 +
 fredrikaflowfield-heart/src/index.html        |     1 +
 fredrikaflowfield-heart/src/script.babel      |   110 +
 fredrikaflowfield-heart/src/style.css         |     7 +
 futuristic-card-effect/LICENSE.txt            |    22 +
 futuristic-card-effect/README.md              |     4 +
 futuristic-card-effect/dist/index.html        |    69 +
 futuristic-card-effect/dist/script.js         |    46 +
 futuristic-card-effect/dist/style.css         |   352 +
 futuristic-card-effect/src/index.html         |    52 +
 futuristic-card-effect/src/script.js          |    46 +
 futuristic-card-effect/src/style.css          |   352 +
 fyodor-v2-angled-pointillism/README.markdown  |     5 +
 fyodor-v2-angled-pointillism/dist/index.html  |    31 +
 fyodor-v2-angled-pointillism/dist/script.js   |   240 +
 fyodor-v2-angled-pointillism/dist/style.css   |    14 +
 fyodor-v2-angled-pointillism/license.txt      |     8 +
 fyodor-v2-angled-pointillism/src/index.html   |    12 +
 fyodor-v2-angled-pointillism/src/script.js    |   240 +
 fyodor-v2-angled-pointillism/src/style.scss   |    18 +
 gate-of-time-svg-css/README.markdown          |     4 +
 gate-of-time-svg-css/dist/index.html          |  1078 +
 gate-of-time-svg-css/dist/style.css           |   247 +
 gate-of-time-svg-css/license.txt              |     8 +
 gate-of-time-svg-css/src/index.html           |  1064 +
 gate-of-time-svg-css/src/style.css            |   247 +
 generative-canyons/README.markdown            |     5 +
 generative-canyons/dist/index.html            |   275 +
 generative-canyons/dist/script.js             |    47 +
 generative-canyons/dist/style.css             |   293 +
 generative-canyons/license.txt                |     8 +
 generative-canyons/src/index.haml             |    16 +
 generative-canyons/src/script.js              |    47 +
 generative-canyons/src/style.scss             |   157 +
 .../README.markdown                           |     9 +
 .../dist/index.html                           |    92 +
 .../dist/script.js                            |   239 +
 .../dist/style.css                            |   130 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    77 +
 .../src/script.js                             |   239 +
 .../src/style.css                             |   130 +
 generative-poster-v-css/README.markdown       |     4 +
 generative-poster-v-css/dist/index.html       |    46 +
 generative-poster-v-css/dist/script.js        |   113 +
 generative-poster-v-css/dist/style.css        |    81 +
 generative-poster-v-css/license.txt           |    17 +
 generative-poster-v-css/src/index.html        |    27 +
 generative-poster-v-css/src/script.babel      |   116 +
 generative-poster-v-css/src/style.scss        |    95 +
 .../README.markdown                           |     7 +
 .../dist/index.html                           |    16 +
 .../dist/script.js                            |    98 +
 .../dist/style.css                            |    17 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     0
 .../src/script.js                             |    98 +
 .../src/style.css                             |    17 +
 .../README.markdown                           |     7 +
 .../dist/index.html                           |    22 +
 .../dist/script.js                            |   195 +
 .../dist/style.css                            |    77 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     4 +
 .../src/script.js                             |   195 +
 .../src/style.css                             |    77 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    18 +
 .../dist/script.js                            |     9 +
 .../dist/style.css                            |  3463 ++
 .../license.txt                               |     8 +
 .../src/index.haml                            |     4 +
 .../src/script.babel                          |     9 +
 .../src/style.sass                            |    57 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    17 +
 .../dist/script.js                            |   455 +
 .../dist/style.css                            |    17 +
 generative-voronoi-splodges-pixi/license.txt  |     8 +
 .../src/index.html                            |     0
 .../src/script.babel                          |   455 +
 .../src/style.css                             |    17 +
 genuary-2022-day-8/README.markdown            |     6 +
 genuary-2022-day-8/dist/index.html            |   193 +
 genuary-2022-day-8/dist/script.js             |    42 +
 genuary-2022-day-8/dist/style.css             |    31 +
 genuary-2022-day-8/license.txt                |     8 +
 genuary-2022-day-8/src/index.html             |   178 +
 genuary-2022-day-8/src/script.babel           |    42 +
 genuary-2022-day-8/src/style.less             |    36 +
 .../README.markdown                           |    18 +
 .../dist/index.html                           |    16 +
 .../dist/script.js                            |    90 +
 .../dist/style.css                            |     9 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     1 +
 .../src/script.babel                          |    90 +
 .../src/style.css                             |     9 +
 .../README.markdown                           |    17 +
 .../dist/index.html                           |    16 +
 genuary-6-triangle-subdivision/dist/script.js |   100 +
 genuary-6-triangle-subdivision/dist/style.css |     9 +
 genuary-6-triangle-subdivision/license.txt    |     8 +
 genuary-6-triangle-subdivision/src/index.html |     1 +
 .../src/script.babel                          |   100 +
 genuary-6-triangle-subdivision/src/style.css  |     9 +
 .../README.markdown                           |     6 +
 .../dist/index.html                           |   356 +
 .../dist/script.js                            |    73 +
 .../dist/style.css                            |   868 +
 .../license.txt                               |     8 +
 .../src/index.html                            |   340 +
 .../src/script.js                             |    73 +
 .../src/style.scss                            |   841 +
 glassmorphism/README.markdown                 |     5 +
 glassmorphism/dist/index.html                 |    26 +
 glassmorphism/dist/style.css                  |    91 +
 glassmorphism/license.txt                     |     8 +
 glassmorphism/src/index.html                  |    12 +
 glassmorphism/src/style.css                   |    91 +
 glsl-gpgpu-particles/README.markdown          |     4 +
 glsl-gpgpu-particles/dist/index.html          |   171 +
 glsl-gpgpu-particles/dist/script.js           |    99 +
 glsl-gpgpu-particles/dist/style.css           |     8 +
 glsl-gpgpu-particles/license.txt              |    17 +
 glsl-gpgpu-particles/src/index.html           |   157 +
 glsl-gpgpu-particles/src/script.babel         |    99 +
 glsl-gpgpu-particles/src/style.scss           |     8 +
 .../README.markdown                           |     7 +
 .../dist/index.html                           |   160 +
 glsl-in-which-alice-feels-sick/dist/script.js |    84 +
 glsl-in-which-alice-feels-sick/dist/style.css |     8 +
 glsl-in-which-alice-feels-sick/license.txt    |    13 +
 glsl-in-which-alice-feels-sick/src/index.html |   146 +
 .../src/script.babel                          |    84 +
 glsl-in-which-alice-feels-sick/src/style.scss |     8 +
 glsl-sample027/README.markdown                |     5 +
 glsl-sample027/dist/index.html                |    53 +
 glsl-sample027/dist/script.js                 |   211 +
 glsl-sample027/dist/style.css                 |     4 +
 glsl-sample027/license.txt                    |     8 +
 glsl-sample027/src/index.html                 |    36 +
 glsl-sample027/src/script.js                  |   211 +
 glsl-sample027/src/style.css                  |     4 +
 gold-tiles/README.markdown                    |     4 +
 gold-tiles/dist/index.html                    |    22 +
 gold-tiles/dist/style.css                     |   231 +
 gold-tiles/license.txt                        |    13 +
 gold-tiles/src/index.pug                      |     5 +
 gold-tiles/src/style.scss                     |   265 +
 good-fast-cheap/README.markdown               |     4 +
 .../dist/https___codepen_io_kunukn.css        |    63 +
 good-fast-cheap/dist/index.html               |    62 +
 good-fast-cheap/dist/script.js                |   130 +
 good-fast-cheap/license.txt                   |    13 +
 .../src/https___codepen_io_kunukn.css         |    63 +
 good-fast-cheap/src/index.html                |    46 +
 good-fast-cheap/src/script.babel              |   130 +
 gradient-ball-sketch/README.markdown          |     5 +
 gradient-ball-sketch/dist/index.html          |    24 +
 gradient-ball-sketch/dist/script.js           |    35 +
 gradient-ball-sketch/dist/style.css           |    47 +
 gradient-ball-sketch/license.txt              |     8 +
 gradient-ball-sketch/src/index.html           |     8 +
 gradient-ball-sketch/src/script.js            |    35 +
 gradient-ball-sketch/src/style.styl           |    46 +
 gradient-borders/LICENSE.txt                  |    21 +
 gradient-borders/README.md                    |     4 +
 gradient-borders/dist/index.html              |    16 +
 gradient-borders/dist/style.css               |    38 +
 gradient-borders/src/index.html               |     1 +
 gradient-borders/src/style.less               |    45 +
 gradient-shadows-oc-argyleink/README.markdown |     5 +
 gradient-shadows-oc-argyleink/dist/index.html |    20 +
 gradient-shadows-oc-argyleink/dist/style.css  |   141 +
 gradient-shadows-oc-argyleink/license.txt     |     9 +
 gradient-shadows-oc-argyleink/src/index.html  |     6 +
 gradient-shadows-oc-argyleink/src/style.css   |   141 +
 grainy-gradient-two-colors/README.markdown    |     5 +
 grainy-gradient-two-colors/dist/index.html    |    20 +
 grainy-gradient-two-colors/dist/style.css     |    42 +
 grainy-gradient-two-colors/license.txt        |     9 +
 grainy-gradient-two-colors/src/index.html     |     6 +
 grainy-gradient-two-colors/src/style.css      |    42 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    18 +
 .../dist/script.js                            |   278 +
 .../dist/style.css                            |    73 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     1 +
 .../src/script.js                             |   279 +
 .../src/style.css                             |    73 +
 .../README.markdown                           |    11 +
 .../dist/index.html                           |    16 +
 .../dist/script.js                            |    10 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     0
 .../src/script.js                             |    10 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |   175 +
 .../dist/style.css                            |   220 +
 grid-based-blog-index-page-layout/license.txt |     8 +
 .../src/index.pug                             |   155 +
 .../src/style.scss                            |   221 +
 grid-collage-layout/LICENSE.txt               |    21 +
 grid-collage-layout/README.md                 |     4 +
 grid-collage-layout/dist/index.html           |    43 +
 grid-collage-layout/dist/style.css            |    66 +
 grid-collage-layout/src/index.html            |    28 +
 grid-collage-layout/src/style.css             |    65 +
 grid-icosahedron-refraction/README.markdown   |     5 +
 grid-icosahedron-refraction/dist/index.html   |    18 +
 grid-icosahedron-refraction/dist/script.js    |   834 +
 grid-icosahedron-refraction/dist/style.css    |     8 +
 grid-icosahedron-refraction/license.txt       |     8 +
 grid-icosahedron-refraction/src/index.html    |     3 +
 grid-icosahedron-refraction/src/script.ts     |   922 +
 grid-icosahedron-refraction/src/style.scss    |     8 +
 grid-items-share-background/README.markdown   |     5 +
 grid-items-share-background/dist/index.html   |    67 +
 grid-items-share-background/dist/script.js    |     5 +
 grid-items-share-background/dist/style.css    |   144 +
 grid-items-share-background/license.txt       |     8 +
 grid-items-share-background/src/index.html    |    52 +
 grid-items-share-background/src/script.js     |     6 +
 grid-items-share-background/src/style.scss    |   167 +
 growing-lines-hex/README.markdown             |     5 +
 growing-lines-hex/dist/index.html             |    16 +
 growing-lines-hex/dist/script.js              |   496 +
 growing-lines-hex/dist/style.css              |     8 +
 growing-lines-hex/license.txt                 |     8 +
 growing-lines-hex/src/index.html              |     0
 growing-lines-hex/src/script.js               |   496 +
 growing-lines-hex/src/style.css               |     8 +
 gsap-believecollage-animation/README.markdown |     6 +
 gsap-believecollage-animation/dist/index.html |    72 +
 gsap-believecollage-animation/dist/script.js  |   143 +
 gsap-believecollage-animation/dist/style.css  |   276 +
 gsap-believecollage-animation/license.txt     |     8 +
 gsap-believecollage-animation/src/index.html  |    55 +
 gsap-believecollage-animation/src/script.js   |   143 +
 gsap-believecollage-animation/src/style.scss  |   290 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    28 +
 .../dist/script.js                            |   318 +
 .../dist/style.css                            |    22 +
 .../license.txt                               |    13 +
 .../src/index.html                            |    14 +
 .../src/script.js                             |   318 +
 .../src/style.css                             |    22 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    19 +
 .../dist/script.js                            |   159 +
 .../dist/style.css                            |    29 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     2 +
 .../src/script.js                             |   159 +
 .../src/style.css                             |    29 +
 halftone-video-effect/README.markdown         |     4 +
 halftone-video-effect/dist/index.html         |    16 +
 halftone-video-effect/dist/script.js          |   125 +
 halftone-video-effect/dist/style.css          |    22 +
 halftone-video-effect/license.txt             |    13 +
 halftone-video-effect/src/index.html          |     2 +
 halftone-video-effect/src/script.js           |   125 +
 halftone-video-effect/src/style.scss          |    22 +
 hambuuuuuuuurger/README.markdown              |     5 +
 hambuuuuuuuurger/dist/index.html              |   109 +
 hambuuuuuuuurger/dist/style.css               |   118 +
 hambuuuuuuuurger/license.txt                  |     8 +
 hambuuuuuuuurger/src/index.haml               |    82 +
 hambuuuuuuuurger/src/style.css                |   118 +
 happy-new-year/README.markdown                |     5 +
 happy-new-year/dist/index.html                |    81 +
 happy-new-year/dist/script.js                 |   372 +
 happy-new-year/dist/style.css                 |   221 +
 happy-new-year/license.txt                    |     8 +
 happy-new-year/src/index.html                 |    63 +
 happy-new-year/src/script.js                  |   372 +
 happy-new-year/src/style.scss                 |   232 +
 headful-of-fire/README.markdown               |     5 +
 headful-of-fire/dist/index.html               |    38 +
 headful-of-fire/dist/script.js                |   224 +
 headful-of-fire/dist/style.css                |    21 +
 headful-of-fire/license.txt                   |     8 +
 headful-of-fire/src/index.html                |    23 +
 headful-of-fire/src/script.js                 |   224 +
 headful-of-fire/src/style.css                 |    22 +
 heart-button/README.markdown                  |     5 +
 heart-button/dist/index.html                  |    76 +
 heart-button/dist/script.js                   |    15 +
 heart-button/dist/style.css                   |   183 +
 heart-button/license.txt                      |     8 +
 heart-button/src/index.html                   |    60 +
 heart-button/src/script.js                    |    15 +
 heart-button/src/style.scss                   |   199 +
 hearthstone-style-card-hover/README.markdown  |     8 +
 hearthstone-style-card-hover/dist/index.html  |    66 +
 hearthstone-style-card-hover/dist/style.css   |   345 +
 hearthstone-style-card-hover/license.txt      |    13 +
 hearthstone-style-card-hover/src/index.haml   |     5 +
 hearthstone-style-card-hover/src/style.scss   |   122 +
 hex-arcs-in-relief/README.markdown            |     7 +
 hex-arcs-in-relief/dist/index.html            |    16 +
 hex-arcs-in-relief/dist/script.js             |   702 +
 hex-arcs-in-relief/dist/style.css             |     9 +
 hex-arcs-in-relief/license.txt                |     8 +
 hex-arcs-in-relief/src/index.html             |     0
 hex-arcs-in-relief/src/script.js              |   702 +
 hex-arcs-in-relief/src/style.css              |     9 +
 .../README.markdown                           |    12 +
 .../dist/index.html                           |    56 +
 .../dist/script.js                            |   171 +
 .../dist/style.css                            |   237 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    41 +
 .../src/script.js                             |   171 +
 .../src/style.scss                            |   286 +
 hexagon-tiling-7-ways/README.markdown         |    16 +
 hexagon-tiling-7-ways/dist/index.html         |    45 +
 hexagon-tiling-7-ways/dist/script.js          |   440 +
 hexagon-tiling-7-ways/dist/style.css          |     5 +
 hexagon-tiling-7-ways/license.txt             |     8 +
 hexagon-tiling-7-ways/src/index.pug           |    29 +
 hexagon-tiling-7-ways/src/script.js           |   440 +
 hexagon-tiling-7-ways/src/style.scss          |     5 +
 holiday-cssweater-generator/README.markdown   |     4 +
 holiday-cssweater-generator/dist/index.html   |    91 +
 holiday-cssweater-generator/dist/script.js    |    53 +
 holiday-cssweater-generator/dist/style.css    |  1673 +
 holiday-cssweater-generator/license.txt       |     8 +
 holiday-cssweater-generator/src/index.haml    |     7 +
 holiday-cssweater-generator/src/script.js     |    55 +
 holiday-cssweater-generator/src/style.scss    |   602 +
 hover-animated-portfolio/README.markdown      |     5 +
 hover-animated-portfolio/dist/index.html      |   218 +
 hover-animated-portfolio/dist/script.js       |    53 +
 hover-animated-portfolio/dist/style.css       |   142 +
 hover-animated-portfolio/license.txt          |     8 +
 hover-animated-portfolio/src/index.html       |   204 +
 hover-animated-portfolio/src/script.js        |    53 +
 hover-animated-portfolio/src/style.css        |   142 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    33 +
 .../dist/style.css                            |   176 +
 .../license.txt                               |    13 +
 .../src/index.html                            |    20 +
 .../src/style.scss                            |   225 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    40 +
 .../dist/script.js                            |    54 +
 .../dist/style.css                            |   275 +
 .../license.txt                               |     8 +
 .../src/index.pug                             |    16 +
 .../src/script.babel                          |    54 +
 .../src/style.styl                            |   323 +
 hsl-slider-w-react-css-vars/README.markdown   |    12 +
 hsl-slider-w-react-css-vars/dist/index.html   |    21 +
 hsl-slider-w-react-css-vars/dist/script.js    |   207 +
 hsl-slider-w-react-css-vars/dist/style.css    |    97 +
 hsl-slider-w-react-css-vars/license.txt       |    13 +
 hsl-slider-w-react-css-vars/src/index.pug     |     1 +
 hsl-slider-w-react-css-vars/src/script.babel  |   207 +
 hsl-slider-w-react-css-vars/src/style.styl    |    87 +
 hue-rotated-emoji/README.markdown             |     5 +
 hue-rotated-emoji/dist/index.html             |    21 +
 hue-rotated-emoji/dist/style.css              |    37 +
 hue-rotated-emoji/license.txt                 |     8 +
 hue-rotated-emoji/src/index.html              |     7 +
 hue-rotated-emoji/src/style.css               |    37 +
 humans-since-1982/README.markdown             |     5 +
 humans-since-1982/dist/index.html             |    16 +
 humans-since-1982/dist/script.js              |    60 +
 humans-since-1982/dist/style.css              |    14 +
 humans-since-1982/license.txt                 |     8 +
 humans-since-1982/src/index.html              |     0
 humans-since-1982/src/script.js               |    60 +
 humans-since-1982/src/style.css               |    14 +
 iceberg-charts/README.markdown                |     4 +
 iceberg-charts/dist/index.html                |    29 +
 iceberg-charts/dist/script.js                 |   371 +
 iceberg-charts/dist/style.css                 |    12 +
 iceberg-charts/dist/zbvakw.js                 |    13 +
 iceberg-charts/license.txt                    |    13 +
 iceberg-charts/src/index.html                 |    10 +
 iceberg-charts/src/script.js                  |   371 +
 iceberg-charts/src/style.less                 |    17 +
 iceberg-charts/src/zbvakw.js                  |    13 +
 icosahedron-pure-css/README.markdown          |     5 +
 icosahedron-pure-css/dist/index.html          |    40 +
 icosahedron-pure-css/dist/script.js           |    11 +
 icosahedron-pure-css/dist/style.css           |   249 +
 icosahedron-pure-css/license.txt              |     8 +
 icosahedron-pure-css/src/index.html           |    25 +
 icosahedron-pure-css/src/script.js            |    11 +
 icosahedron-pure-css/src/style.scss           |    86 +
 illustration-online-store/README.markdown     |     5 +
 illustration-online-store/dist/index.html     |   141 +
 illustration-online-store/dist/style.css      |   245 +
 illustration-online-store/license.txt         |     8 +
 illustration-online-store/src/index.html      |   126 +
 illustration-online-store/src/style.scss      |   223 +
 image-captions-color-hints/README.markdown    |     5 +
 image-captions-color-hints/dist/index.html    |    60 +
 image-captions-color-hints/dist/script.js     |     9 +
 image-captions-color-hints/dist/style.css     |   121 +
 image-captions-color-hints/license.txt        |     8 +
 image-captions-color-hints/src/index.html     |    44 +
 image-captions-color-hints/src/script.babel   |     9 +
 image-captions-color-hints/src/style.css      |   115 +
 image-to-lcd/README.markdown                  |     5 +
 image-to-lcd/dist/index.html                  |    32 +
 image-to-lcd/dist/script.js                   |   205 +
 image-to-lcd/dist/style.css                   |   150 +
 image-to-lcd/license.txt                      |     8 +
 image-to-lcd/src/index.html                   |    15 +
 image-to-lcd/src/script.js                    |   205 +
 image-to-lcd/src/style.css                    |   150 +
 impossible-checkbox-v2/README.markdown        |     5 +
 impossible-checkbox-v2/dist/index.html        |    19 +
 impossible-checkbox-v2/dist/script.js         |   302 +
 impossible-checkbox-v2/dist/style.css         |   152 +
 impossible-checkbox-v2/license.txt            |     8 +
 impossible-checkbox-v2/src/index.pug          |     1 +
 impossible-checkbox-v2/src/script.babel       |   302 +
 impossible-checkbox-v2/src/style.styl         |   137 +
 impressionists-blobs/LICENSE.txt              |    21 +
 impressionists-blobs/README.md                |     4 +
 impressionists-blobs/dist/index.html          |   505 +
 impressionists-blobs/dist/script.js           |   378 +
 impressionists-blobs/dist/style.css           |    52 +
 impressionists-blobs/src/index.html           |   488 +
 impressionists-blobs/src/script.js            |   378 +
 impressionists-blobs/src/style.css            |    52 +
 infinite-primordial-creatures/README.markdown |     5 +
 infinite-primordial-creatures/dist/index.html |   117 +
 infinite-primordial-creatures/dist/script.js  |    84 +
 infinite-primordial-creatures/dist/style.css  |    12 +
 infinite-primordial-creatures/license.txt     |     8 +
 infinite-primordial-creatures/src/index.html  |   102 +
 .../src/script.babel                          |    84 +
 infinite-primordial-creatures/src/style.css   |    12 +
 inktober-01grid/README.markdown               |     4 +
 inktober-01grid/dist/index.html               |    54 +
 inktober-01grid/dist/style.css                |    78 +
 inktober-01grid/license.txt                   |    13 +
 inktober-01grid/src/index.html                |    38 +
 inktober-01grid/src/style.css                 |    78 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    15 +
 .../dist/style.css                            |    27 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     1 +
 .../src/style.css                             |    27 +
 inner-listener/README.markdown                |     5 +
 inner-listener/dist/index.html                |    20 +
 inner-listener/dist/style.css                 |    51 +
 inner-listener/license.txt                    |     8 +
 inner-listener/src/index.html                 |     6 +
 inner-listener/src/style.css                  |    51 +
 input-not-placeholder-shown/README.markdown   |     4 +
 input-not-placeholder-shown/dist/index.html   |    19 +
 input-not-placeholder-shown/dist/style.css    |    73 +
 input-not-placeholder-shown/license.txt       |    13 +
 input-not-placeholder-shown/src/index.html    |     5 +
 input-not-placeholder-shown/src/style.styl    |    65 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    21 +
 .../dist/script.js                            |   203 +
 .../dist/style.css                            |    29 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     6 +
 .../src/script.js                             |   203 +
 .../src/style.css                             |    29 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    33 +
 .../dist/style.css                            |   126 +
 .../license.txt                               |    13 +
 .../src/index.html                            |    19 +
 .../src/style.scss                            |   124 +
 interactive-kitten/README.markdown            |     5 +
 interactive-kitten/dist/index.html            |    85 +
 interactive-kitten/dist/script.js             |    89 +
 interactive-kitten/dist/style.css             |   297 +
 interactive-kitten/license.txt                |     8 +
 interactive-kitten/src/index.html             |    70 +
 interactive-kitten/src/script.js              |    89 +
 interactive-kitten/src/style.css              |   298 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    54 +
 .../dist/script.js                            |   383 +
 .../dist/style.css                            |    67 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    39 +
 .../src/script.js                             |   383 +
 .../src/style.css                             |    67 +
 interactive-skate-loading/README.markdown     |     5 +
 interactive-skate-loading/dist/index.html     |    61 +
 interactive-skate-loading/dist/script.js      |   353 +
 interactive-skate-loading/dist/style.css      |   252 +
 interactive-skate-loading/license.txt         |     8 +
 interactive-skate-loading/src/index.html      |    45 +
 interactive-skate-loading/src/script.js       |   353 +
 interactive-skate-loading/src/style.scss      |   251 +
 interior-design-builder/README.markdown       |    10 +
 interior-design-builder/dist/index.html       |   101 +
 interior-design-builder/dist/script.js        |   134 +
 interior-design-builder/dist/style.css        |   175 +
 interior-design-builder/license.txt           |     8 +
 interior-design-builder/src/index.pug         |    34 +
 interior-design-builder/src/script.js         |   134 +
 interior-design-builder/src/style.scss        |   215 +
 interruptions/README.markdown                 |     4 +
 interruptions/dist/index.html                 |    48 +
 interruptions/dist/script.js                  |    69 +
 interruptions/dist/style.css                  |    48 +
 interruptions/license.txt                     |    13 +
 interruptions/src/index.html                  |    33 +
 interruptions/src/script.js                   |    69 +
 interruptions/src/style.css                   |    48 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    46 +
 .../dist/script.js                            |     3 +
 .../dist/style.css                            |     1 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    15 +
 .../src/script.js                             |     3 +
 .../src/style.css                             |     1 +
 isometric-color-picker/README.markdown        |     5 +
 isometric-color-picker/dist/index.html        |    64 +
 isometric-color-picker/dist/style.css         |   248 +
 isometric-color-picker/license.txt            |     8 +
 isometric-color-picker/src/index.pug          |     7 +
 isometric-color-picker/src/style.sass         |    87 +
 joker-leaderboard/README.markdown             |     5 +
 joker-leaderboard/dist/index.html             |    65 +
 joker-leaderboard/dist/script.js              |    53 +
 joker-leaderboard/dist/style.css              |   180 +
 joker-leaderboard/license.txt                 |     8 +
 joker-leaderboard/src/index.html              |    49 +
 joker-leaderboard/src/script.js               |    55 +
 joker-leaderboard/src/style.css               |   180 +
 jumping-gooey-navigation/README.markdown      |     5 +
 jumping-gooey-navigation/dist/index.html      |    70 +
 jumping-gooey-navigation/dist/script.js       |    63 +
 jumping-gooey-navigation/dist/style.css       |   102 +
 jumping-gooey-navigation/license.txt          |     8 +
 jumping-gooey-navigation/src/index.html       |    54 +
 jumping-gooey-navigation/src/script.js        |    63 +
 jumping-gooey-navigation/src/style.css        |   103 +
 keep-on-stackin-3d-css/README.markdown        |     5 +
 keep-on-stackin-3d-css/dist/index.html        |   114 +
 keep-on-stackin-3d-css/dist/script.js         |    11 +
 keep-on-stackin-3d-css/dist/style.css         |   286 +
 keep-on-stackin-3d-css/license.txt            |     8 +
 keep-on-stackin-3d-css/src/index.pug          |    28 +
 keep-on-stackin-3d-css/src/script.babel       |    11 +
 keep-on-stackin-3d-css/src/style.styl         |   235 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    23 +
 .../dist/script.js                            |     1 +
 .../dist/style.css                            |   116 +
 .../license.txt                               |    13 +
 .../src/index.html                            |     8 +
 .../src/script.js                             |     1 +
 .../src/style.scss                            |    80 +
 knob-input-component/README.markdown          |    12 +
 knob-input-component/dist/index.html          |   207 +
 knob-input-component/dist/script.js           |   406 +
 knob-input-component/dist/style.css           |   146 +
 knob-input-component/license.txt              |    13 +
 knob-input-component/src/index.pug            |    60 +
 knob-input-component/src/script.js            |   406 +
 knob-input-component/src/style.scss           |   148 +
 .../README.markdown                           |     6 +
 .../dist/index.html                           |    21 +
 kurzgesagt-style-earth-3d-zdog/dist/script.js |   331 +
 kurzgesagt-style-earth-3d-zdog/dist/style.css |    57 +
 kurzgesagt-style-earth-3d-zdog/license.txt    |    13 +
 kurzgesagt-style-earth-3d-zdog/src/index.html |     6 +
 kurzgesagt-style-earth-3d-zdog/src/script.js  |   331 +
 kurzgesagt-style-earth-3d-zdog/src/style.scss |    97 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    43 +
 .../dist/script.js                            |     3 +
 .../dist/style.css                            |     1 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    12 +
 .../src/script.js                             |     3 +
 .../src/style.css                             |     1 +
 latent-cycles/README.markdown                 |     9 +
 latent-cycles/dist/index.html                 |    98 +
 latent-cycles/dist/script.js                  |   612 +
 latent-cycles/dist/style.css                  |   109 +
 latent-cycles/license.txt                     |    13 +
 latent-cycles/src/index.html                  |    78 +
 latent-cycles/src/script.babel                |   612 +
 latent-cycles/src/style.css                   |   109 +
 .../README.markdown                           |    11 +
 .../dist/index.html                           |    49 +
 layout-templates-with-css-grid/dist/style.css |    55 +
 layout-templates-with-css-grid/license.txt    |     8 +
 layout-templates-with-css-grid/src/index.html |    34 +
 layout-templates-with-css-grid/src/style.scss |    80 +
 leaving-out-particularities/README.markdown   |     4 +
 leaving-out-particularities/dist/index.html   |    15 +
 leaving-out-particularities/dist/script.js    |   169 +
 leaving-out-particularities/dist/style.css    |    15 +
 leaving-out-particularities/license.txt       |    13 +
 leaving-out-particularities/src/index.html    |     0
 leaving-out-particularities/src/script.js     |   169 +
 leaving-out-particularities/src/style.css     |    15 +
 letter-hop/LICENSE.txt                        |    21 +
 letter-hop/README.md                          |     4 +
 letter-hop/dist/index.html                    |    25 +
 letter-hop/dist/script.js                     |   106 +
 letter-hop/dist/style.css                     |   305 +
 letter-hop/src/index.html                     |    10 +
 letter-hop/src/script.js                      |   108 +
 letter-hop/src/style.scss                     |   348 +
 .../README.markdown                           |     6 +
 .../dist/index.html                           |    19 +
 .../dist/script.js                            |   246 +
 .../dist/style.css                            |    18 +
 lines-doing-a-little-group-dance/license.txt  |     8 +
 .../src/index.html                            |     4 +
 .../src/script.js                             |   246 +
 .../src/style.css                             |    18 +
 link-hover-animation/README.markdown          |     5 +
 link-hover-animation/dist/index.html          |    29 +
 link-hover-animation/dist/style.css           |    88 +
 link-hover-animation/license.txt              |     8 +
 link-hover-animation/src/index.html           |    14 +
 link-hover-animation/src/style.scss           |    84 +
 liquid-grid/README.markdown                   |     4 +
 liquid-grid/dist/index.html                   |    18 +
 liquid-grid/dist/script.js                    |   371 +
 liquid-grid/dist/style.css                    |     7 +
 liquid-grid/license.txt                       |     8 +
 liquid-grid/src/index.html                    |     1 +
 liquid-grid/src/script.js                     |   371 +
 liquid-grid/src/style.css                     |     7 +
 liquid-maskingscroll/README.markdown          |     5 +
 liquid-maskingscroll/dist/index.html          |    54 +
 liquid-maskingscroll/dist/script.js           |    13 +
 liquid-maskingscroll/dist/style.css           |    43 +
 liquid-maskingscroll/license.txt              |     8 +
 liquid-maskingscroll/src/index.html           |    38 +
 liquid-maskingscroll/src/script.js            |    13 +
 liquid-maskingscroll/src/style.css            |    43 +
 literally-lit-elements/README.markdown        |     7 +
 literally-lit-elements/dist/index.html        |    39 +
 literally-lit-elements/dist/script.js         |    43 +
 literally-lit-elements/dist/style.css         |   103 +
 literally-lit-elements/license.txt            |     8 +
 literally-lit-elements/src/index.pug          |    31 +
 literally-lit-elements/src/script.js          |    43 +
 literally-lit-elements/src/style.styl         |    73 +
 .../README.markdown                           |    16 +
 .../dist/index.html                           |    27 +
 .../dist/script.js                            |   144 +
 .../dist/style.css                            |    90 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    11 +
 .../src/script.babel                          |   144 +
 .../src/style.scss                            |   106 +
 loader-concept/README.markdown                |     4 +
 loader-concept/dist/index.html                |    75 +
 loader-concept/dist/script.js                 |   151 +
 loader-concept/dist/style.css                 |     9 +
 loader-concept/license.txt                    |    13 +
 loader-concept/src/index.html                 |    58 +
 loader-concept/src/script.js                  |   151 +
 loader-concept/src/style.css                  |     9 +
 lonely-little-box/README.markdown             |     4 +
 lonely-little-box/dist/index.html             |    48 +
 lonely-little-box/dist/script.js              |    89 +
 lonely-little-box/dist/style.css              |   115 +
 lonely-little-box/license.txt                 |    17 +
 lonely-little-box/src/index.html              |    32 +
 lonely-little-box/src/script.js               |    89 +
 lonely-little-box/src/style.scss              |   119 +
 look-at-concept/README.markdown               |     4 +
 look-at-concept/dist/index.html               |    22 +
 look-at-concept/dist/script.js                |   144 +
 look-at-concept/dist/style.css                |   167 +
 look-at-concept/license.txt                   |    17 +
 look-at-concept/src/index.html                |     7 +
 look-at-concept/src/script.babel              |   144 +
 look-at-concept/src/style.sass                |   159 +
 loosey-goosey-1-0-0/README.markdown           |     5 +
 loosey-goosey-1-0-0/dist/index.html           |    23 +
 loosey-goosey-1-0-0/dist/script.js            |   103 +
 loosey-goosey-1-0-0/dist/style.css            |    10 +
 loosey-goosey-1-0-0/license.txt               |     8 +
 loosey-goosey-1-0-0/src/index.html            |     8 +
 loosey-goosey-1-0-0/src/script.babel          |   104 +
 loosey-goosey-1-0-0/src/style.scss            |    10 +
 lotsa-notifications/LICENSE.txt               |    21 +
 lotsa-notifications/README.md                 |     5 +
 lotsa-notifications/dist/index.html           |    44 +
 lotsa-notifications/dist/script.js            |   289 +
 lotsa-notifications/dist/style.css            |   191 +
 lotsa-notifications/src/index.html            |    29 +
 lotsa-notifications/src/script.js             |   289 +
 lotsa-notifications/src/style.css             |   191 +
 love-hypnosis/README.markdown                 |     5 +
 love-hypnosis/dist/index.html                 |    28 +
 love-hypnosis/dist/script.js                  |   117 +
 love-hypnosis/dist/style.css                  |    17 +
 love-hypnosis/license.txt                     |     8 +
 love-hypnosis/src/index.html                  |     2 +
 love-hypnosis/src/script.js                   |   117 +
 love-hypnosis/src/style.css                   |    17 +
 magic-card/README.markdown                    |     5 +
 magic-card/dist/index.html                    |    19 +
 magic-card/dist/style.css                     |   102 +
 magic-card/license.txt                        |     8 +
 magic-card/src/index.html                     |     5 +
 magic-card/src/style.css                      |   102 +
 make-the-web-less-boring/README.markdown      |     5 +
 make-the-web-less-boring/dist/index.html      |    23 +
 make-the-web-less-boring/dist/script.js       |     1 +
 make-the-web-less-boring/dist/style.css       |    78 +
 make-the-web-less-boring/license.txt          |     8 +
 make-the-web-less-boring/src/index.html       |     4 +
 make-the-web-less-boring/src/script.js        |     1 +
 make-the-web-less-boring/src/style.scss       |    82 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |   278 +
 .../dist/script.js                            |   280 +
 .../dist/style.css                            |   200 +
 mars-explorer-scrolltrigger-demo/license.txt  |     8 +
 .../src/index.html                            |   257 +
 .../src/script.babel                          |   280 +
 .../src/style.less                            |   235 +
 material-dashboard-lite-master/.gitignore     |    11 +
 material-dashboard-lite-master/.jscsrc        |     4 +
 material-dashboard-lite-master/LICENSE        |    21 +
 material-dashboard-lite-master/README.md      |    86 +
 material-dashboard-lite-master/bower.json     |    25 +
 .../dist/css/application.css                  | 11410 ++++
 .../dist/css/lib/getmdl-select.min.css        |     3 +
 .../dist/css/lib/nv.d3.css                    |   647 +
 .../dist/forms.html                           |   515 +
 .../dist/images/DB_16х16_20200928204120.png  |   Bin 0 -> 17739 bytes
 ...rk_background_1920x1080_20200928204120.png |   Bin 0 -> 28016 bytes
 .../dist/images/Icon_20191114113633.png       |   Bin 0 -> 36988 bytes
 .../images/Icon_header_20191114113633.png     |   Bin 0 -> 35130 bytes
 .../images/cotoneaster_20191114113633.jpg     |   Bin 0 -> 87201 bytes
 .../dist/images/robot_20201001164800.png      |   Bin 0 -> 54298 bytes
 .../dist/images/skype_20191114113633.svg      |    17 +
 .../images/weather_bck_20201001164800.png     |   Bin 0 -> 85378 bytes
 .../dist/index.html                           |   530 +
 material-dashboard-lite-master/dist/js/d3.js  |  9554 +++
 .../dist/js/getmdl-select.min.js              |     2 +
 .../dist/js/material.js                       |  3946 ++
 .../dist/js/nv.d3.js                          | 13789 +++++
 .../js/widgets/employer-form/employer-form.js |    13 +
 .../js/widgets/line-chart/line-chart-nvd3.js  |   242 +
 .../js/widgets/pie-chart/pie-chart-nvd3.js    |    93 +
 .../dist/js/widgets/table/table.js            |    24 +
 .../dist/js/widgets/todo/todo.js              |   248 +
 material-dashboard-lite-master/gulpfile.js    |   132 +
 material-dashboard-lite-master/package.json   |    52 +
 .../src/application.scss                      |    63 +
 .../src/button/button.scss                    |    22 +
 .../src/card/card.scss                        |    20 +
 .../src/checkbox/checkbox.scss                |     3 +
 .../src/data-table/data-table.scss            |    20 +
 material-dashboard-lite-master/src/forms.html |   503 +
 .../src/helper.scss                           |    91 +
 .../src/images/card_20191114113633.jpg        |   Bin 0 -> 1446 bytes
 .../images/cloudy_and_snow_20191114113633.svg |    26 +
 .../src/images/imgo_20191114113633.jpg        |   Bin 0 -> 901 bytes
 .../src/images/skype_20191114113633.svg       |    17 +
 .../src/images/tick-mask_20191114113633.svg   |    30 +
 .../src/images/tick_20191114113633.svg        |    15 +
 .../src/images/tick_dark_20191114113633.svg   |    15 +
 .../src/images/watch_white_20191114113633.svg |     5 +
 material-dashboard-lite-master/src/index.html |   518 +
 .../src/label/label.scss                      |    20 +
 .../src/layout/layout.scss                    |   146 +
 .../src/list/list.scss                        |    11 +
 .../src/menu/menu.scss                        |    10 +
 .../src/mixins.scss                           |   165 +
 .../src/progress/progress.scss                |    13 +
 .../src/textfield/textfield.scss              |     6 +
 .../src/tooltip/tooltip.scss                  |     4 +
 .../src/variables.scss                        |   270 +
 .../account-dropdown/account-dropdown.scss    |    31 +
 .../widgets/chart-legend/chart-legend.scss    |    15 +
 .../src/widgets/cotoneaster/cotoneaster.scss  |    20 +
 .../widgets/employer-form/employer-form.js    |     9 +
 .../widgets/employer-form/employer-form.scss  |   123 +
 .../src/widgets/form/form.scss                |    94 +
 .../src/widgets/input-group/input-group.scss  |    26 +
 .../src/widgets/line-chart/line-chart-nvd3.js |   265 +
 .../src/widgets/line-chart/line-chart.scss    |    40 +
 .../src/widgets/link/link.scss                |     5 +
 .../messages-dropdown.scss                    |    36 +
 .../notifications-dropdown.scss               |    19 +
 .../src/widgets/pie-chart/pie-chart-nvd3.js   |   144 +
 .../src/widgets/pie-chart/pie-chart.scss      |    25 +
 .../src/widgets/robot/robot.scss              |    14 +
 .../setting-dropdown/settings-dropdown.scss   |     6 +
 .../src/widgets/table/table.js                |    20 +
 .../src/widgets/table/table.scss              |    43 +
 .../src/widgets/todo/todo.js                  |   229 +
 .../src/widgets/todo/todo.scss                |    43 +
 .../src/widgets/trending/trending.scss        |    28 +
 .../src/widgets/weather/weather.scss          |    42 +
 .../README.markdown                           |     6 +
 .../dist/index.html                           |    15 +
 .../dist/style.css                            |    33 +
 matrix-of-cube-with-one-element/license.txt   |     8 +
 .../src/index.html                            |     1 +
 matrix-of-cube-with-one-element/src/style.css |    33 +
 .../README.markdown                           |     9 +
 .../dist/index.html                           |  1995 +
 .../dist/script.js                            |     9 +
 .../dist/style.css                            |   713 +
 .../license.txt                               |     8 +
 .../src/index.pug                             |    18 +
 .../src/script.js                             |     9 +
 .../src/style.scss                            |   569 +
 meow-meow-keyboard/README.markdown            |     5 +
 meow-meow-keyboard/dist/index.html            |    82 +
 meow-meow-keyboard/dist/script.js             |    96 +
 meow-meow-keyboard/dist/style.css             |   116 +
 meow-meow-keyboard/license.txt                |     8 +
 meow-meow-keyboard/src/index.html             |    66 +
 meow-meow-keyboard/src/script.js              |    96 +
 meow-meow-keyboard/src/style.scss             |   158 +
 metal-buttons/README.markdown                 |     5 +
 metal-buttons/dist/index.html                 |    40 +
 metal-buttons/dist/style.css                  |   218 +
 metal-buttons/license.txt                     |     8 +
 metal-buttons/src/index.html                  |    26 +
 metal-buttons/src/style.css                   |   218 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |   224 +
 .../dist/script.js                            |    12 +
 .../dist/style.css                            |   179 +
 minimal-pure-css-textile-patterns/license.txt |     8 +
 .../src/index.pug                             |  2737 +
 .../src/script.babel                          |    12 +
 .../src/style.scss                            |   173 +
 mobile-menu/README.markdown                   |     5 +
 mobile-menu/dist/index.html                   |    40 +
 mobile-menu/dist/script.js                    |    21 +
 mobile-menu/dist/style.css                    |   118 +
 mobile-menu/license.txt                       |     8 +
 mobile-menu/src/index.pug                     |    38 +
 mobile-menu/src/script.js                     |    21 +
 mobile-menu/src/style.scss                    |   116 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    26 +
 .../dist/script.js                            |   242 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     0
 .../src/script.vue                            |   368 +
 .../README.markdown                           |     6 +
 .../dist/index.html                           |   175 +
 .../dist/style.css                            |   439 +
 modern-blog-layout-with-css-grid/license.txt  |     8 +
 .../src/index.html                            |   160 +
 .../src/style.scss                            |   459 +
 monokai/README.markdown                       |     4 +
 monokai/dist/index.html                       |   153 +
 monokai/dist/style.css                        |   108 +
 monokai/license.txt                           |     8 +
 monokai/src/index.html                        |   138 +
 monokai/src/style.css                         |    91 +
 moonriverpure-javascript/README.markdown      |     5 +
 moonriverpure-javascript/dist/index.html      |    16 +
 moonriverpure-javascript/dist/script.js       |   220 +
 moonriverpure-javascript/dist/style.css       |    11 +
 moonriverpure-javascript/license.txt          |     8 +
 moonriverpure-javascript/src/index.html       |     1 +
 moonriverpure-javascript/src/script.js        |   220 +
 moonriverpure-javascript/src/style.css        |    11 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |  1017 +
 more-cursed-accent-color-vibes/dist/style.css |    24 +
 more-cursed-accent-color-vibes/license.txt    |     8 +
 more-cursed-accent-color-vibes/src/index.pug  |    14 +
 more-cursed-accent-color-vibes/src/style.css  |    24 +
 morning/README.markdown                       |     5 +
 morning/dist/index.html                       |    23 +
 morning/dist/script.js                        |   134 +
 morning/dist/style.css                        |    54 +
 morning/license.txt                           |     8 +
 morning/src/index.html                        |     7 +
 morning/src/script.babel                      |   134 +
 morning/src/style.scss                        |    57 +
 .../README.markdown                           |     6 +
 .../dist/index.html                           |    22 +
 .../dist/script.js                            |     1 +
 .../dist/style.css                            |   187 +
 .../license.txt                               |     8 +
 .../src/index.pug                             |     5 +
 .../src/script.babel                          |     1 +
 .../src/style.styl                            |   132 +
 .../LICENSE.txt                               |    21 +
 .../README.md                                 |     4 +
 .../dist/index.html                           |    16 +
 .../dist/script.js                            |    19 +
 .../dist/style.css                            |    28 +
 .../src/index.html                            |     1 +
 .../src/script.js                             |    19 +
 .../src/style.css                             |    28 +
 .../README.markdown                           |     7 +
 .../dist/index.html                           |   770 +
 .../dist/script.js                            |  1009 +
 .../dist/style.css                            |   162 +
 .../license.txt                               |     8 +
 .../src/index.html                            |   753 +
 .../src/script.js                             |  1009 +
 .../src/style.css                             |   162 +
 multi-colored-text-with-css/README.markdown   |     5 +
 multi-colored-text-with-css/dist/index.html   |    22 +
 multi-colored-text-with-css/dist/script.js    |     1 +
 multi-colored-text-with-css/dist/style.css    |    67 +
 multi-colored-text-with-css/license.txt       |     8 +
 multi-colored-text-with-css/src/index.html    |     5 +
 multi-colored-text-with-css/src/script.js     |     1 +
 multi-colored-text-with-css/src/style.css     |    67 +
 music-app/README.markdown                     |     7 +
 music-app/dist/index.html                     |   137 +
 music-app/dist/script.js                      |     1 +
 music-app/dist/style.css                      |   589 +
 music-app/license.txt                         |     8 +
 music-app/src/index.html                      |   120 +
 music-app/src/script.js                       |     1 +
 music-app/src/style.scss                      |   612 +
 muson-css/README.markdown                     |    11 +
 muson-css/dist/index.html                     |   164 +
 muson-css/dist/style.css                      |  1387 +
 muson-css/license.txt                         |     8 +
 muson-css/src/index.html                      |   150 +
 muson-css/src/style.css                       |  1387 +
 mutationobserver-example/README.markdown      |     5 +
 mutationobserver-example/dist/index.html      |    23 +
 mutationobserver-example/dist/script.js       |    22 +
 mutationobserver-example/dist/style.css       |     3 +
 mutationobserver-example/license.txt          |     8 +
 mutationobserver-example/src/index.html       |     8 +
 mutationobserver-example/src/script.js        |    22 +
 mutationobserver-example/src/style.css        |     3 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    69 +
 .../dist/style.css                            |    38 +
 .../license.txt                               |     9 +
 .../src/index.html                            |    54 +
 .../src/style.css                             |    38 +
 neptune/README.markdown                       |     5 +
 neptune/dist/index.html                       |    58 +
 neptune/dist/style.css                        |   198 +
 neptune/license.txt                           |     8 +
 neptune/src/index.html                        |    44 +
 neptune/src/style.scss                        |   198 +
 neumorphic-playground/README.markdown         |    10 +
 neumorphic-playground/dist/index.html         |    20 +
 neumorphic-playground/dist/script.js          |   445 +
 neumorphic-playground/dist/style.css          |   678 +
 neumorphic-playground/license.txt             |     8 +
 neumorphic-playground/src/index.pug           |     1 +
 neumorphic-playground/src/script.babel        |   445 +
 neumorphic-playground/src/style.styl          |   658 +
 neuomorphic-checkboxes/README.markdown        |     4 +
 neuomorphic-checkboxes/dist/index.html        |    73 +
 neuomorphic-checkboxes/dist/style.css         |    60 +
 neuomorphic-checkboxes/license.txt            |     8 +
 neuomorphic-checkboxes/src/index.html         |    59 +
 neuomorphic-checkboxes/src/style.scss         |    73 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    83 +
 .../dist/style.css                            |   408 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    70 +
 .../src/style.scss                            |   379 +
 news-section-w-tailwind-css/README.markdown   |     5 +
 news-section-w-tailwind-css/dist/index.html   |   105 +
 news-section-w-tailwind-css/license.txt       |     8 +
 news-section-w-tailwind-css/src/index.html    |    91 +
 night-day/README.markdown                     |     4 +
 night-day/dist/index.html                     |   105 +
 night-day/dist/script.js                      |    69 +
 night-day/dist/style.css                      |    76 +
 night-day/license.txt                         |     8 +
 night-day/src/index.html                      |    88 +
 night-day/src/script.js                       |    69 +
 night-day/src/style.css                       |    71 +
 noisy-svg-lines/README.markdown               |    13 +
 noisy-svg-lines/dist/blgjlm.js                |   418 +
 noisy-svg-lines/dist/index.html               |    17 +
 noisy-svg-lines/dist/script.js                |    96 +
 noisy-svg-lines/dist/style.css                |    10 +
 noisy-svg-lines/license.txt                   |    13 +
 noisy-svg-lines/src/blgjlm.js                 |   418 +
 noisy-svg-lines/src/index.html                |     2 +
 noisy-svg-lines/src/script.js                 |    96 +
 noisy-svg-lines/src/style.css                 |    10 +
 noisy-vertical-svg-lines/README.markdown      |    13 +
 noisy-vertical-svg-lines/dist/index.html      |    17 +
 noisy-vertical-svg-lines/dist/script.js       |    96 +
 noisy-vertical-svg-lines/dist/style.css       |    10 +
 noisy-vertical-svg-lines/license.txt          |     8 +
 noisy-vertical-svg-lines/src/index.html       |     2 +
 noisy-vertical-svg-lines/src/script.js        |    96 +
 noisy-vertical-svg-lines/src/style.css        |    10 +
 onboarding-sequence/README.markdown           |     7 +
 onboarding-sequence/dist/index.html           |    19 +
 onboarding-sequence/dist/script.js            |  1545 +
 onboarding-sequence/dist/style.css            |   622 +
 onboarding-sequence/license.txt               |     8 +
 onboarding-sequence/src/index.html            |     1 +
 onboarding-sequence/src/script.babel          |  1546 +
 onboarding-sequence/src/style.css             |   622 +
 one-hundred-rules/README.markdown             |     9 +
 one-hundred-rules/dist/index.html             |   116 +
 one-hundred-rules/dist/style.css              |   137 +
 one-hundred-rules/license.txt                 |     8 +
 one-hundred-rules/src/index.pug               |     3 +
 one-hundred-rules/src/style.scss              |   151 +
 only-css-infinite-plug-in/README.markdown     |     5 +
 only-css-infinite-plug-in/dist/index.html     |   587 +
 only-css-infinite-plug-in/dist/style.css      |  4091 ++
 only-css-infinite-plug-in/license.txt         |     8 +
 only-css-infinite-plug-in/src/index.pug       |    21 +
 only-css-infinite-plug-in/src/style.scss      |   245 +
 only-css-infinite-wave/README.markdown        |     4 +
 only-css-infinite-wave/dist/index.html        |   201 +
 only-css-infinite-wave/dist/style.css         |  1401 +
 only-css-infinite-wave/license.txt            |    17 +
 only-css-infinite-wave/src/index.pug          |     7 +
 only-css-infinite-wave/src/style.scss         |    92 +
 only-css-moon-clip/README.markdown            |     5 +
 only-css-moon-clip/dist/index.html            |   583 +
 only-css-moon-clip/dist/style.css             |  1694 +
 only-css-moon-clip/license.txt                |     8 +
 only-css-moon-clip/src/index.pug              |     8 +
 only-css-moon-clip/src/style.scss             |   126 +
 only-css-mt-fuji/README.markdown              |     4 +
 only-css-mt-fuji/dist/index.html              |   200 +
 only-css-mt-fuji/dist/style.css               |  5779 ++
 only-css-mt-fuji/license.txt                  |    13 +
 only-css-mt-fuji/src/index.pug                |    11 +
 only-css-mt-fuji/src/style.scss               |   142 +
 only-css-satellite/README.markdown            |     5 +
 only-css-satellite/dist/index.html            |   777 +
 only-css-satellite/dist/style.css             |  4690 ++
 only-css-satellite/license.txt                |     8 +
 only-css-satellite/src/index.pug              |    20 +
 only-css-satellite/src/style.scss             |   184 +
 only-css-wave-dots/README.markdown            |     5 +
 only-css-wave-dots/dist/index.html            |   923 +
 only-css-wave-dots/dist/style.css             |   533 +
 only-css-wave-dots/license.txt                |     8 +
 only-css-wave-dots/src/index.pug              |    10 +
 only-css-wave-dots/src/style.scss             |   124 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    16 +
 .../dist/script.js                            |   151 +
 .../dist/style.css                            |     9 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     1 +
 .../src/script.js                             |   151 +
 .../src/style.css                             |     9 +
 p5js-svg-flow-field/README.markdown           |     5 +
 p5js-svg-flow-field/dist/index.html           |    38 +
 p5js-svg-flow-field/dist/script.js            |    96 +
 p5js-svg-flow-field/dist/style.css            |   160 +
 p5js-svg-flow-field/license.txt               |     8 +
 p5js-svg-flow-field/src/index.html            |    21 +
 p5js-svg-flow-field/src/script.js             |    97 +
 p5js-svg-flow-field/src/style.scss            |   167 +
 pagination-buttons/README.markdown            |     4 +
 pagination-buttons/dist/index.html            |    21 +
 pagination-buttons/dist/script.js             |    19 +
 pagination-buttons/dist/style.css             |    45 +
 pagination-buttons/license.txt                |    13 +
 pagination-buttons/src/index.html             |     6 +
 pagination-buttons/src/script.js              |    19 +
 pagination-buttons/src/style.css              |    45 +
 panda-button/README.markdown                  |     5 +
 panda-button/dist/index.html                  |    46 +
 panda-button/dist/script.js                   |   262 +
 panda-button/dist/style.css                   |   206 +
 panda-button/license.txt                      |     8 +
 panda-button/src/index.html                   |    31 +
 panda-button/src/script.js                    |   265 +
 panda-button/src/style.css                    |   207 +
 pantone-color-chips/README.markdown           |    12 +
 pantone-color-chips/dist/index.html           |    29 +
 pantone-color-chips/dist/script.js            |    67 +
 pantone-color-chips/dist/style.css            |   125 +
 pantone-color-chips/license.txt               |     8 +
 pantone-color-chips/src/index.html            |    11 +
 pantone-color-chips/src/script.js             |    67 +
 pantone-color-chips/src/style.css             |   125 +
 paper-chase/README.markdown                   |     4 +
 paper-chase/dist/index.html                   |   176 +
 paper-chase/dist/style.css                    |   800 +
 paper-chase/license.txt                       |     8 +
 paper-chase/src/index.haml                    |    15 +
 paper-chase/src/style.scss                    |   309 +
 paper-cut-text-effect/README.markdown         |     7 +
 paper-cut-text-effect/dist/index.html         |    17 +
 paper-cut-text-effect/dist/script.js          |    25 +
 paper-cut-text-effect/dist/style.css          |    83 +
 paper-cut-text-effect/license.txt             |     8 +
 paper-cut-text-effect/src/index.html          |     0
 paper-cut-text-effect/src/script.babel        |    26 +
 paper-cut-text-effect/src/style.scss          |    85 +
 .../README.markdown                           |    22 +
 .../dist/index.html                           |    90 +
 .../dist/style.css                            |   268 +
 .../license.txt                               |    13 +
 .../src/index.html                            |    76 +
 .../src/style.scss                            |   205 +
 particle-photos/README.markdown               |     7 +
 particle-photos/dist/index.html               |   273 +
 particle-photos/dist/script.js                |   335 +
 particle-photos/dist/style.css                |    75 +
 particle-photos/license.txt                   |     8 +
 particle-photos/src/index.html                |   258 +
 particle-photos/src/script.js                 |   335 +
 particle-photos/src/style.css                 |    75 +
 pdf-flyer-generator/README.markdown           |     4 +
 pdf-flyer-generator/dist/index.html           |   102 +
 pdf-flyer-generator/dist/script.js            |   385 +
 pdf-flyer-generator/dist/style.css            |    26 +
 pdf-flyer-generator/license.txt               |    13 +
 pdf-flyer-generator/src/index.html            |    84 +
 pdf-flyer-generator/src/script.js             |   385 +
 pdf-flyer-generator/src/style.less            |    32 +
 pen-export-MbpPja/LICENSE.txt                 |    21 +
 pen-export-MbpPja/README.md                   |     4 +
 pen-export-MbpPja/index.html                  |    32 +
 pen-export-MbpPja/style.css                   |    29 +
 pen-export-tqdmv/LICENSE.txt                  |    21 +
 pen-export-tqdmv/README.md                    |     4 +
 pen-export-tqdmv/dist/index.html              |   305 +
 pen-export-tqdmv/dist/script.js               |   802 +
 pen-export-tqdmv/dist/style.css               |    15 +
 pen-export-tqdmv/src/index.html               |   290 +
 pen-export-tqdmv/src/script.js                |   802 +
 pen-export-tqdmv/src/style.css                |    15 +
 phone-reflection/README.markdown              |     6 +
 phone-reflection/dist/index.html              |   151 +
 phone-reflection/dist/script.js               |   847 +
 phone-reflection/dist/style.css               |   127 +
 phone-reflection/license.txt                  |     8 +
 phone-reflection/src/index.html               |   136 +
 phone-reflection/src/script.js                |   847 +
 phone-reflection/src/style.css                |   127 +
 pie-chart-with-pure-css/README.markdown       |     5 +
 pie-chart-with-pure-css/dist/index.html       |    15 +
 pie-chart-with-pure-css/dist/style.css        |    13 +
 pie-chart-with-pure-css/license.txt           |     8 +
 pie-chart-with-pure-css/src/index.html        |     1 +
 pie-chart-with-pure-css/src/style.css         |    13 +
 piet-mondrian-s-css-grid/README.markdown      |     5 +
 piet-mondrian-s-css-grid/dist/index.html      |    35 +
 piet-mondrian-s-css-grid/dist/style.css       |    86 +
 piet-mondrian-s-css-grid/license.txt          |     8 +
 piet-mondrian-s-css-grid/src/index.html       |    21 +
 piet-mondrian-s-css-grid/src/style.css        |    86 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    32 +
 .../dist/style.css                            |    81 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    16 +
 .../src/style.scss                            |    75 +
 pixi-sprite-bubbles/README.markdown           |     4 +
 .../dist/742d19fae30395a25522f43c1.js         |    60 +
 pixi-sprite-bubbles/dist/index.html           |    17 +
 pixi-sprite-bubbles/dist/script.js            |   127 +
 pixi-sprite-bubbles/dist/style.css            |    15 +
 pixi-sprite-bubbles/license.txt               |    13 +
 .../src/742d19fae30395a25522f43c1.js          |    60 +
 pixi-sprite-bubbles/src/index.html            |     1 +
 pixi-sprite-bubbles/src/script.js             |   127 +
 pixi-sprite-bubbles/src/style.css             |    15 +
 planetary-vignettes/README.markdown           |     8 +
 planetary-vignettes/dist/index.html           |    20 +
 planetary-vignettes/dist/script.js            |   634 +
 planetary-vignettes/dist/style.css            |    21 +
 planetary-vignettes/license.txt               |     8 +
 planetary-vignettes/src/index.html            |     4 +
 planetary-vignettes/src/script.js             |   634 +
 planetary-vignettes/src/style.css             |    23 +
 platonics/README.markdown                     |     5 +
 platonics/dist/index.html                     |   338 +
 platonics/dist/script.js                      |  1306 +
 platonics/dist/style.css                      |    60 +
 platonics/license.txt                         |     8 +
 platonics/src/index.html                      |   323 +
 platonics/src/script.babel                    |  1306 +
 platonics/src/style.css                       |    60 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    42 +
 .../dist/script.js                            |     7 +
 .../dist/style.css                            |   276 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    26 +
 .../src/script.babel                          |     8 +
 .../src/style.scss                            |   241 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    99 +
 .../dist/script.js                            |   103 +
 .../dist/style.css                            |     3 +
 playlist-artwork-for-cover-lover/license.txt  |     8 +
 .../src/index.html                            |    82 +
 .../src/script.js                             |   103 +
 .../src/style.scss                            |     1 +
 plot-direction/README.markdown                |     5 +
 plot-direction/dist/index.html                |    97 +
 plot-direction/dist/style.css                 |    51 +
 plot-direction/license.txt                    |     8 +
 plot-direction/src/index.html                 |    83 +
 plot-direction/src/style.css                  |    51 +
 .../README.markdown                           |     7 +
 .../dist/index.html                           |    48 +
 pop-the-bubbles-three-js-scene/dist/script.js |   369 +
 pop-the-bubbles-three-js-scene/dist/style.css |    34 +
 pop-the-bubbles-three-js-scene/license.txt    |     8 +
 pop-the-bubbles-three-js-scene/src/index.html |    30 +
 pop-the-bubbles-three-js-scene/src/script.js  |   369 +
 pop-the-bubbles-three-js-scene/src/style.css  |    34 +
 popcssicles/README.markdown                   |     5 +
 popcssicles/dist/index.html                   |   143 +
 popcssicles/dist/script.js                    |    19 +
 popcssicles/dist/style.css                    |   294 +
 popcssicles/license.txt                       |     8 +
 popcssicles/src/index.haml                    |    12 +
 popcssicles/src/script.js                     |    21 +
 popcssicles/src/style.scss                    |   196 +
 potion-container/README.markdown              |     5 +
 potion-container/dist/index.html              |    33 +
 potion-container/dist/script.js               |     1 +
 potion-container/dist/style.css               |   183 +
 potion-container/license.txt                  |     8 +
 potion-container/src/index.html               |     9 +
 potion-container/src/script.js                |     1 +
 potion-container/src/style.scss               |   186 +
 practice-canvas2d/README.markdown             |     5 +
 practice-canvas2d/dist/index.html             |    16 +
 practice-canvas2d/dist/script.js              |   345 +
 practice-canvas2d/dist/style.css              |    22 +
 practice-canvas2d/license.txt                 |     8 +
 practice-canvas2d/src/index.pug               |     0
 practice-canvas2d/src/script.js               |   345 +
 practice-canvas2d/src/style.styl              |    20 +
 procedural-pathways/README.markdown           |     5 +
 procedural-pathways/dist/index.html           |   138 +
 procedural-pathways/dist/script.js            |    25 +
 procedural-pathways/dist/style.css            |   407 +
 procedural-pathways/license.txt               |     8 +
 procedural-pathways/src/index.haml            |     8 +
 procedural-pathways/src/script.js             |    25 +
 procedural-pathways/src/style.scss            |   455 +
 product-showcase-ui/README.markdown           |     7 +
 product-showcase-ui/dist/index.html           |   176 +
 product-showcase-ui/dist/script.js            |    16 +
 product-showcase-ui/dist/style.css            |   394 +
 product-showcase-ui/license.txt               |     8 +
 product-showcase-ui/src/index.html            |   160 +
 product-showcase-ui/src/script.babel          |    16 +
 product-showcase-ui/src/style.scss            |   409 +
 products-dashboard-ui/README.markdown         |     5 +
 products-dashboard-ui/dist/index.html         |   361 +
 products-dashboard-ui/dist/script.js          |    24 +
 products-dashboard-ui/dist/style.css          |   605 +
 products-dashboard-ui/license.txt             |     8 +
 products-dashboard-ui/src/index.html          |   345 +
 products-dashboard-ui/src/script.js           |    24 +
 products-dashboard-ui/src/style.scss          |   636 +
 profusion-2/README.markdown                   |    16 +
 profusion-2/dist/index.html                   |   167 +
 profusion-2/dist/script.js                    |   314 +
 profusion-2/dist/style.css                    |   258 +
 profusion-2/license.txt                       |     8 +
 profusion-2/src/index.pug                     |    93 +
 profusion-2/src/script.js                     |   315 +
 profusion-2/src/style.scss                    |   249 +
 project-management-dashboard-ui/LICENSE.txt   |    21 +
 project-management-dashboard-ui/README.md     |     5 +
 .../dist/index.html                           |   466 +
 .../dist/script.js                            |    33 +
 .../dist/style.css                            |   862 +
 .../src/index.html                            |   450 +
 project-management-dashboard-ui/src/script.js |    33 +
 .../src/style.scss                            |   910 +
 psychedelic-jellyfish-shader/README.markdown  |     5 +
 psychedelic-jellyfish-shader/dist/index.html  |   249 +
 psychedelic-jellyfish-shader/dist/script.js   |    58 +
 psychedelic-jellyfish-shader/dist/style.css   |    10 +
 psychedelic-jellyfish-shader/license.txt      |     8 +
 psychedelic-jellyfish-shader/src/index.html   |   234 +
 psychedelic-jellyfish-shader/src/script.babel |    58 +
 psychedelic-jellyfish-shader/src/style.scss   |    10 +
 psychedelic-waves/README.markdown             |     5 +
 psychedelic-waves/dist/index.html             |   215 +
 psychedelic-waves/dist/script.js              |   155 +
 psychedelic-waves/dist/style.css              |    58 +
 psychedelic-waves/license.txt                 |     8 +
 psychedelic-waves/src/index.html              |   198 +
 psychedelic-waves/src/script.babel            |   155 +
 psychedelic-waves/src/style.scss              |    59 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    25 +
 pulse-animation-in-svg-or-css3/dist/style.css |    70 +
 pulse-animation-in-svg-or-css3/license.txt    |     9 +
 pulse-animation-in-svg-or-css3/src/index.html |    11 +
 pulse-animation-in-svg-or-css3/src/style.scss |    74 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    86 +
 .../dist/script.js                            |    39 +
 .../dist/style.css                            |   219 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    71 +
 .../src/script.js                             |    39 +
 .../src/style.css                             |   219 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    26 +
 .../dist/script.js                            |     1 +
 .../dist/style.css                            |   290 +
 pure-css-cyberpunk-2077-buttons/license.txt   |     8 +
 .../src/index.html                            |    10 +
 .../src/script.babel                          |     1 +
 pure-css-cyberpunk-2077-buttons/src/style.css |   195 +
 pure-css-eye/README.markdown                  |     5 +
 pure-css-eye/dist/index.html                  |    55 +
 pure-css-eye/dist/script.js                   |     1 +
 pure-css-eye/dist/style.css                   |   681 +
 pure-css-eye/license.txt                      |     8 +
 pure-css-eye/src/index.html                   |    40 +
 pure-css-eye/src/script.js                    |     1 +
 pure-css-eye/src/style.css                    |   681 +
 .../README.markdown                           |     9 +
 .../dist/index.html                           |    34 +
 .../dist/style.css                            |    74 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    19 +
 .../src/style.scss                            |    73 +
 pure-css-halloween-zipper/README.markdown     |    33 +
 .../dist/https___codepen_io_thebab.css        |    40 +
 pure-css-halloween-zipper/dist/index.html     |    81 +
 pure-css-halloween-zipper/dist/style.css      |    81 +
 pure-css-halloween-zipper/license.txt         |     8 +
 .../src/https___codepen_io_thebab.css         |    40 +
 pure-css-halloween-zipper/src/index.pug       |     6 +
 pure-css-halloween-zipper/src/style.scss      |    39 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |   458 +
 .../dist/style.css                            |  7355 +++
 .../license.txt                               |     8 +
 .../src/index.html                            |   444 +
 .../src/style.css                             |  7421 +++
 pw-dashboard/README.markdown                  |     5 +
 pw-dashboard/dist/index.html                  |    99 +
 pw-dashboard/dist/style.css                   |   204 +
 pw-dashboard/license.txt                      |     8 +
 pw-dashboard/src/index.pug                    |   118 +
 pw-dashboard/src/style.styl                   |   220 +
 quarto/README.markdown                        |     7 +
 quarto/dist/index.html                        |    19 +
 quarto/dist/script.js                         |   197 +
 quarto/dist/style.css                         |   131 +
 quarto/license.txt                            |     8 +
 quarto/src/index.html                         |     3 +
 quarto/src/script.js                          |   197 +
 quarto/src/style.css                          |   131 +
 .../LICENSE.txt                               |    21 +
 .../README.md                                 |     7 +
 .../dist/index.html                           |    65 +
 .../dist/style.css                            |   266 +
 .../src/index.pug                             |    48 +
 .../src/style.scss                            |   270 +
 .../README.markdown                           |    16 +
 .../dist/https___codepen_io_thebab.css        |    40 +
 .../dist/index.html                           |    32 +
 .../dist/style.css                            |    73 +
 .../license.txt                               |    13 +
 .../src/https___codepen_io_thebab.css         |    40 +
 .../src/index.pug                             |     8 +
 .../src/style.scss                            |    77 +
 rainbow-hypercube/README.markdown             |     5 +
 rainbow-hypercube/dist/index.html             |    17 +
 rainbow-hypercube/dist/script.js              |    92 +
 rainbow-hypercube/dist/style.css              |     4 +
 rainbow-hypercube/license.txt                 |     8 +
 rainbow-hypercube/src/index.html              |     1 +
 rainbow-hypercube/src/script.js               |    92 +
 rainbow-hypercube/src/style.scss              |     4 +
 rainbow-shader/README.markdown                |     5 +
 rainbow-shader/dist/index.html                |    73 +
 rainbow-shader/dist/script.js                 |    67 +
 rainbow-shader/dist/style.css                 |     3 +
 rainbow-shader/license.txt                    |     8 +
 rainbow-shader/src/index.html                 |    58 +
 rainbow-shader/src/script.js                  |    67 +
 rainbow-shader/src/style.css                  |     3 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    33 +
 .../dist/script.js                            |   101 +
 .../dist/style.css                            |    99 +
 random-rainbow-generator-skypack/license.txt  |     8 +
 .../src/index.html                            |    18 +
 .../src/script.js                             |   101 +
 .../src/style.css                             |    99 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    62 +
 .../dist/script.js                            |   285 +
 .../dist/style.css                            |   204 +
 random-svg-pattern-creator-tool/license.txt   |     8 +
 .../src/index.html                            |    47 +
 random-svg-pattern-creator-tool/src/script.js |   285 +
 random-svg-pattern-creator-tool/src/style.css |   204 +
 random-z-rich/README.markdown                 |     5 +
 random-z-rich/dist/index.html                 |    19 +
 random-z-rich/dist/script.js                  |    90 +
 random-z-rich/dist/style.css                  |    48 +
 random-z-rich/license.txt                     |     8 +
 random-z-rich/src/index.html                  |     3 +
 random-z-rich/src/script.babel                |    90 +
 random-z-rich/src/style.scss                  |    49 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    33 +
 .../dist/script.js                            |     4 +
 .../dist/style.css                            |    17 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    18 +
 .../src/script.ts                             |     5 +
 .../src/style.scss                            |    23 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    24 +
 .../dist/script.js                            |   214 +
 .../dist/style.css                            |   774 +
 .../license.txt                               |    13 +
 .../src/index.haml                            |     7 +
 .../src/script.js                             |   214 +
 .../src/style.scss                            |   190 +
 range-pills/README.markdown                   |     5 +
 range-pills/dist/index.html                   |    65 +
 range-pills/dist/script.js                    |    73 +
 range-pills/dist/style.css                    |   165 +
 range-pills/license.txt                       |     8 +
 range-pills/src/index.html                    |    50 +
 range-pills/src/script.js                     |    73 +
 range-pills/src/style.sass                    |   130 +
 react-color-gradients/README.markdown         |     7 +
 react-color-gradients/dist/index.html         |    19 +
 react-color-gradients/dist/script.js          |   141 +
 react-color-gradients/dist/style.css          |    58 +
 react-color-gradients/license.txt             |     8 +
 react-color-gradients/src/index.html          |     1 +
 react-color-gradients/src/script.babel        |   141 +
 react-color-gradients/src/style.css           |    58 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    17 +
 .../dist/script.js                            |   198 +
 .../dist/style.css                            |   129 +
 .../license.txt                               |     8 +
 .../src/index.pug                             |     1 +
 .../src/script.babel                          |   198 +
 .../src/style.styl                            |   121 +
 reactive-synth/README.markdown                |     5 +
 reactive-synth/dist/index.html                |    25 +
 reactive-synth/dist/script.js                 |   622 +
 reactive-synth/dist/style.css                 |    63 +
 reactive-synth/license.txt                    |     8 +
 reactive-synth/src/index.html                 |     7 +
 reactive-synth/src/script.babel               |   622 +
 reactive-synth/src/style.sass                 |    88 +
 .../README.markdown                           |     8 +
 .../dist/index.html                           |    17 +
 .../dist/script.js                            |   110 +
 .../dist/style.css                            |   114 +
 .../license.txt                               |    13 +
 .../src/index.pug                             |     1 +
 .../src/script.babel                          |   110 +
 .../src/style.styl                            |   113 +
 responsive-castle/README.markdown             |     5 +
 responsive-castle/dist/index.html             |   757 +
 responsive-castle/dist/script.js              |   682 +
 responsive-castle/dist/style.css              |   101 +
 responsive-castle/license.txt                 |     8 +
 responsive-castle/src/index.html              |   741 +
 responsive-castle/src/script.babel            |   682 +
 responsive-castle/src/style.scss              |    94 +
 responsive-comic-book-layout/README.markdown  |     4 +
 responsive-comic-book-layout/dist/index.html  |    35 +
 responsive-comic-book-layout/dist/style.css   |   126 +
 responsive-comic-book-layout/license.txt      |    13 +
 responsive-comic-book-layout/src/index.html   |    21 +
 responsive-comic-book-layout/src/style.css    |   126 +
 responsive-grid-timeline/README.markdown      |     5 +
 responsive-grid-timeline/dist/index.html      |    97 +
 responsive-grid-timeline/dist/style.css       |   116 +
 responsive-grid-timeline/license.txt          |     8 +
 responsive-grid-timeline/src/index.html       |    84 +
 responsive-grid-timeline/src/style.scss       |   124 +
 responsive-social-platform-ui/README.markdown |     6 +
 responsive-social-platform-ui/dist/index.html |   520 +
 responsive-social-platform-ui/dist/style.css  |   918 +
 responsive-social-platform-ui/license.txt     |     8 +
 responsive-social-platform-ui/src/index.html  |   505 +
 responsive-social-platform-ui/src/style.scss  |   931 +
 rgbconfettimyk-generative-art/README.markdown |     5 +
 rgbconfettimyk-generative-art/dist/index.html |    16 +
 rgbconfettimyk-generative-art/dist/script.js  |    73 +
 rgbconfettimyk-generative-art/dist/style.css  |    17 +
 rgbconfettimyk-generative-art/license.txt     |     8 +
 rgbconfettimyk-generative-art/src/index.html  |     1 +
 rgbconfettimyk-generative-art/src/script.js   |    73 +
 rgbconfettimyk-generative-art/src/style.css   |    17 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    32 +
 .../dist/script.js                            |     1 +
 .../dist/style.css                            |    62 +
 .../license.txt                               |     8 +
 .../src/index.svg                             |    16 +
 .../src/script.js                             |     1 +
 .../src/style.scss                            |    69 +
 rotating-thing/README.markdown                |     5 +
 rotating-thing/dist/index.html                |    16 +
 rotating-thing/dist/script.js                 |    32 +
 rotating-thing/dist/style.css                 |     3 +
 rotating-thing/license.txt                    |     8 +
 rotating-thing/src/index.html                 |     0
 rotating-thing/src/script.js                  |    32 +
 rotating-thing/src/style.css                  |     3 +
 rounded-dashes/README.markdown                |     6 +
 rounded-dashes/dist/index.html                |    16 +
 rounded-dashes/dist/style.css                 |    33 +
 rounded-dashes/license.txt                    |     8 +
 rounded-dashes/src/index.html                 |     2 +
 rounded-dashes/src/style.css                  |    33 +
 running-waves-with-d3/README.markdown         |     5 +
 running-waves-with-d3/dist/index.html         |    16 +
 running-waves-with-d3/dist/script.js          |   104 +
 running-waves-with-d3/dist/style.css          |    22 +
 running-waves-with-d3/license.txt             |     8 +
 running-waves-with-d3/src/index.html          |     1 +
 running-waves-with-d3/src/script.js           |   104 +
 running-waves-with-d3/src/style.css           |    22 +
 saul-bass-ified/README.markdown               |     5 +
 saul-bass-ified/dist/index.html               |    30 +
 saul-bass-ified/dist/script.js                |   288 +
 saul-bass-ified/dist/style.css                |    24 +
 saul-bass-ified/license.txt                   |     8 +
 saul-bass-ified/src/index.html                |    15 +
 saul-bass-ified/src/script.js                 |   288 +
 saul-bass-ified/src/style.css                 |    24 +
 scroll-timeline-example/LICENSE.txt           |    22 +
 scroll-timeline-example/README.md             |     5 +
 scroll-timeline-example/dist/index.html       |    18 +
 scroll-timeline-example/dist/style.css        |    97 +
 scroll-timeline-example/src/index.html        |     4 +
 scroll-timeline-example/src/style.css         |    97 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    26 +
 .../dist/style.css                            |    38 +
 scrolling-box-w-scroll-behavior/license.txt   |     8 +
 .../src/index.html                            |    11 +
 scrolling-box-w-scroll-behavior/src/style.css |    38 +
 scrolling-grid/README.markdown                |     4 +
 scrolling-grid/dist/index.html                |   285 +
 scrolling-grid/dist/style.css                 |    51 +
 scrolling-grid/license.txt                    |    13 +
 scrolling-grid/src/index.html                 |   271 +
 scrolling-grid/src/style.scss                 |    54 +
 scrolly-carousel-example-7/README.markdown    |     5 +
 scrolly-carousel-example-7/dist/index.html    |    53 +
 scrolly-carousel-example-7/dist/style.css     |    95 +
 scrolly-carousel-example-7/license.txt        |     8 +
 scrolly-carousel-example-7/src/index.html     |    39 +
 scrolly-carousel-example-7/src/style.scss     |    83 +
 search-algorithm-puppy/README.markdown        |     5 +
 search-algorithm-puppy/dist/index.html        |   738 +
 search-algorithm-puppy/dist/script.js         |   387 +
 search-algorithm-puppy/dist/style.css         |   128 +
 search-algorithm-puppy/license.txt            |     8 +
 search-algorithm-puppy/src/index.html         |   723 +
 search-algorithm-puppy/src/script.js          |   387 +
 search-algorithm-puppy/src/style.css          |   128 +
 selected-demos-2019-2020/README.markdown      |     5 +
 selected-demos-2019-2020/dist/index.html      |   160 +
 selected-demos-2019-2020/dist/script.js       |   155 +
 selected-demos-2019-2020/dist/style.css       |  1263 +
 selected-demos-2019-2020/license.txt          |     8 +
 selected-demos-2019-2020/src/index.haml       |   104 +
 selected-demos-2019-2020/src/script.js        |   155 +
 selected-demos-2019-2020/src/style.scss       |  1094 +
 shadow-set/README.markdown                    |     5 +
 shadow-set/dist/index.html                    |    22 +
 shadow-set/dist/style.css                     |    44 +
 shadow-set/license.txt                        |     8 +
 shadow-set/src/index.html                     |     7 +
 shadow-set/src/style.scss                     |    46 +
 shape-outsideface/README.markdown             |     4 +
 shape-outsideface/dist/index.html             |    17 +
 shape-outsideface/dist/script.js              |    39 +
 shape-outsideface/dist/style.css              |    55 +
 shape-outsideface/license.txt                 |    13 +
 shape-outsideface/src/index.html              |     3 +
 shape-outsideface/src/script.js               |    39 +
 shape-outsideface/src/style.css               |    52 +
 simple-css-loaders/README.markdown            |     5 +
 simple-css-loaders/dist/index.html            |    54 +
 simple-css-loaders/dist/style.css             |   570 +
 simple-css-loaders/license.txt                |     8 +
 simple-css-loaders/src/index.html             |    38 +
 simple-css-loaders/src/style.css              |   395 +
 simple-music-app-ui-design/README.markdown    |     6 +
 simple-music-app-ui-design/dist/index.html    |   374 +
 simple-music-app-ui-design/dist/script.js     |    12 +
 simple-music-app-ui-design/dist/style.css     |   897 +
 simple-music-app-ui-design/license.txt        |     8 +
 simple-music-app-ui-design/src/index.html     |   359 +
 simple-music-app-ui-design/src/script.js      |    12 +
 simple-music-app-ui-design/src/style.scss     |   903 +
 simplex-life-v8/README.markdown               |     4 +
 simplex-life-v8/dist/index.html               |    18 +
 simplex-life-v8/dist/script.js                |    78 +
 simplex-life-v8/dist/style.css                |    21 +
 simplex-life-v8/license.txt                   |    17 +
 simplex-life-v8/src/index.html                |     0
 simplex-life-v8/src/script.babel              |    78 +
 simplex-life-v8/src/style.scss                |    18 +
 .../LICENSE.txt                               |    21 +
 single-div-css-folded-origami-shop/README.md  |     5 +
 .../dist/index.html                           |    17 +
 .../dist/script.js                            |     2 +
 .../dist/style.css                            |    50 +
 .../src/index.html                            |     1 +
 .../src/script.js                             |     2 +
 .../src/style.stylus                          |   125 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    16 +
 .../dist/script.js                            |     1 +
 .../dist/style.css                            |    57 +
 single-div-flickering-neon-text/license.txt   |     9 +
 .../src/index.html                            |     1 +
 single-div-flickering-neon-text/src/script.js |     1 +
 .../src/style.scss                            |   132 +
 skateboard-video-platform/README.markdown     |     6 +
 skateboard-video-platform/dist/index.html     |   367 +
 skateboard-video-platform/dist/script.js      |    55 +
 skateboard-video-platform/dist/style.css      |  1115 +
 skateboard-video-platform/license.txt         |     8 +
 skateboard-video-platform/src/index.html      |   350 +
 skateboard-video-platform/src/script.js       |    55 +
 skateboard-video-platform/src/style.scss      |  1097 +
 .../README.markdown                           |     9 +
 .../dist/index.html                           |    18 +
 .../dist/script.js                            |   394 +
 .../dist/style.css                            |   582 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     1 +
 .../src/script.babel                          |   394 +
 .../src/style.css                             |   571 +
 slide-out-toggle-menu/README.markdown         |     4 +
 slide-out-toggle-menu/dist/index.html         |    35 +
 slide-out-toggle-menu/dist/script.js          |     3 +
 slide-out-toggle-menu/dist/style.css          |   111 +
 slide-out-toggle-menu/license.txt             |    13 +
 slide-out-toggle-menu/src/index.html          |    19 +
 slide-out-toggle-menu/src/script.js           |     3 +
 slide-out-toggle-menu/src/style.scss          |   104 +
 sliding-image-track/LICENSE.txt               |    22 +
 sliding-image-track/README.md                 |     4 +
 sliding-image-track/dist/index.html           |    37 +
 sliding-image-track/dist/script.js            |    45 +
 sliding-image-track/dist/style.css            |    77 +
 sliding-image-track/src/index.html            |    20 +
 sliding-image-track/src/script.js             |    45 +
 sliding-image-track/src/style.css             |    77 +
 smart-home-temperature-slider/README.markdown |     4 +
 smart-home-temperature-slider/dist/index.html |    87 +
 smart-home-temperature-slider/dist/script.js  |   107 +
 smart-home-temperature-slider/dist/style.css  |    42 +
 smart-home-temperature-slider/license.txt     |    13 +
 smart-home-temperature-slider/src/index.html  |    65 +
 smart-home-temperature-slider/src/script.js   |   108 +
 smart-home-temperature-slider/src/style.css   |    42 +
 smoothie-app/README.markdown                  |     4 +
 smoothie-app/dist/index.html                  |   517 +
 smoothie-app/dist/script.js                   |   316 +
 smoothie-app/dist/style.css                   |   187 +
 smoothie-app/license.txt                      |    13 +
 smoothie-app/src/index.html                   |   502 +
 smoothie-app/src/script.js                    |   316 +
 smoothie-app/src/style.css                    |   187 +
 snowflake/README.markdown                     |     5 +
 snowflake/dist/index.html                     |    20 +
 snowflake/dist/script.js                      |    38 +
 snowflake/dist/style.css                      |     7 +
 snowflake/license.txt                         |     8 +
 snowflake/src/index.html                      |     5 +
 snowflake/src/script.js                       |    40 +
 snowflake/src/style.css                       |     7 +
 sorted-css-colors/README.markdown             |    21 +
 sorted-css-colors/dist/index.html             |  1117 +
 sorted-css-colors/dist/script.js              |   376 +
 sorted-css-colors/dist/style.css              |   456 +
 sorted-css-colors/license.txt                 |     8 +
 sorted-css-colors/src/index.html              |  1099 +
 sorted-css-colors/src/script.babel            |   376 +
 sorted-css-colors/src/style.scss              |   490 +
 space-travel/README.markdown                  |     5 +
 space-travel/dist/index.html                  |   180 +
 space-travel/dist/script.js                   |   690 +
 space-travel/dist/style.css                   |    42 +
 space-travel/license.txt                      |     8 +
 space-travel/src/index.html                   |   162 +
 space-travel/src/script.js                    |   690 +
 space-travel/src/style.scss                   |    43 +
 speech-bubbles/README.markdown                |     5 +
 speech-bubbles/dist/index.html                |    78 +
 speech-bubbles/dist/style.css                 |   201 +
 speech-bubbles/license.txt                    |     8 +
 speech-bubbles/src/index.html                 |    64 +
 speech-bubbles/src/style.css                  |   201 +
 sphere-of-boxes-three-js/README.markdown      |     4 +
 sphere-of-boxes-three-js/dist/blgjlm.js       |   416 +
 sphere-of-boxes-three-js/dist/index.html      |    18 +
 sphere-of-boxes-three-js/dist/script.js       |   140 +
 sphere-of-boxes-three-js/dist/style.css       |     7 +
 sphere-of-boxes-three-js/dist/zvdzgv.js       |  1042 +
 sphere-of-boxes-three-js/license.txt          |    13 +
 sphere-of-boxes-three-js/src/blgjlm.js        |   416 +
 sphere-of-boxes-three-js/src/index.html       |     0
 sphere-of-boxes-three-js/src/script.babel     |   140 +
 sphere-of-boxes-three-js/src/style.css        |     7 +
 sphere-of-boxes-three-js/src/zvdzgv.js        |  1042 +
 spider-verse-dots/README.markdown             |     5 +
 spider-verse-dots/dist/index.html             |    16 +
 spider-verse-dots/dist/script.js              |   128 +
 spider-verse-dots/dist/style.css              |     7 +
 spider-verse-dots/license.txt                 |     8 +
 spider-verse-dots/src/index.html              |     1 +
 spider-verse-dots/src/script.babel            |   128 +
 spider-verse-dots/src/style.scss              |     6 +
 spiral-fractal-experiment-v2/README.markdown  |     5 +
 spiral-fractal-experiment-v2/dist/index.html  |    18 +
 spiral-fractal-experiment-v2/dist/script.js   |   162 +
 spiral-fractal-experiment-v2/dist/style.css   |    70 +
 spiral-fractal-experiment-v2/license.txt      |     8 +
 spiral-fractal-experiment-v2/src/index.html   |     3 +
 spiral-fractal-experiment-v2/src/script.js    |   162 +
 spiral-fractal-experiment-v2/src/style.css    |    70 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |   376 +
 .../dist/style.css                            |  3117 +
 .../license.txt                               |     8 +
 .../src/index.haml                            |    69 +
 .../src/style.scss                            |  1935 +
 splitting-laser-write/README.markdown         |     8 +
 .../dist/5eb6d4e9bfd78e3911ed9d0d0.js         |    20 +
 splitting-laser-write/dist/index.html         |    30 +
 splitting-laser-write/dist/script.js          |     3 +
 splitting-laser-write/dist/style.css          |    94 +
 splitting-laser-write/license.txt             |    13 +
 .../src/5eb6d4e9bfd78e3911ed9d0d0.js          |    20 +
 splitting-laser-write/src/index.html          |    12 +
 splitting-laser-write/src/script.js           |     3 +
 splitting-laser-write/src/style.css           |    73 +
 squircles/README.markdown                     |     5 +
 squircles/dist/index.html                     |   202 +
 squircles/dist/script.js                      |    16 +
 squircles/dist/style.css                      |   298 +
 squircles/license.txt                         |     8 +
 squircles/src/index.html                      |   187 +
 squircles/src/script.js                       |    16 +
 squircles/src/style.scss                      |   324 +
 squishy-toggle-buttons/README.markdown        |     5 +
 squishy-toggle-buttons/dist/index.html        |    29 +
 squishy-toggle-buttons/dist/script.js         |     7 +
 squishy-toggle-buttons/dist/style.css         |    98 +
 squishy-toggle-buttons/license.txt            |     8 +
 squishy-toggle-buttons/src/index.html         |    12 +
 squishy-toggle-buttons/src/script.coffee      |     0
 squishy-toggle-buttons/src/style.sass         |   124 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    69 +
 stacked-flexible-slides-layout/dist/style.css |   113 +
 stacked-flexible-slides-layout/license.txt    |    13 +
 stacked-flexible-slides-layout/src/index.html |    56 +
 stacked-flexible-slides-layout/src/style.css  |   113 +
 stacking-cards/README.markdown                |     5 +
 stacking-cards/dist/index.html                |   234 +
 stacking-cards/dist/script.js                 |    11 +
 stacking-cards/dist/style.css                 |   235 +
 stacking-cards/license.txt                    |     8 +
 stacking-cards/src/index.html                 |   219 +
 stacking-cards/src/script.js                  |    11 +
 stacking-cards/src/style.css                  |   235 +
 staggered-cubes/README.markdown               |     8 +
 staggered-cubes/dist/index.html               |    19 +
 staggered-cubes/dist/script.js                |   177 +
 staggered-cubes/dist/style.css                |    37 +
 staggered-cubes/license.txt                   |     8 +
 staggered-cubes/src/index.pug                 |     1 +
 staggered-cubes/src/script.babel              |   177 +
 staggered-cubes/src/style.styl                |    35 +
 stay-true/README.markdown                     |     4 +
 stay-true/dist/index.html                     |    34 +
 stay-true/dist/script.js                      |     1 +
 stay-true/dist/style.css                      |   239 +
 stay-true/license.txt                         |    13 +
 stay-true/src/index.haml                      |     4 +
 stay-true/src/script.js                       |     1 +
 stay-true/src/style.scss                      |   215 +
 sticky-cards/LICENSE.txt                      |    21 +
 sticky-cards/README.md                        |     4 +
 sticky-cards/dist/index.html                  |    90 +
 sticky-cards/dist/style.css                   |   113 +
 sticky-cards/src/index.pug                    |     4 +
 sticky-cards/src/style.scss                   |    20 +
 sticky-photostack/README.markdown             |     5 +
 sticky-photostack/dist/index.html             |    24 +
 sticky-photostack/dist/style.css              |    51 +
 sticky-photostack/license.txt                 |     8 +
 sticky-photostack/src/index.pug               |     5 +
 sticky-photostack/src/style.scss              |    32 +
 sticky-portals/README.markdown                |     5 +
 sticky-portals/dist/index.html                |   169 +
 sticky-portals/dist/script.js                 |    60 +
 sticky-portals/dist/style.css                 |   417 +
 sticky-portals/license.txt                    |     8 +
 sticky-portals/src/index.haml                 |    16 +
 sticky-portals/src/script.js                  |    60 +
 sticky-portals/src/style.scss                 |   241 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    18 +
 .../dist/script.js                            |    13 +
 .../dist/style.css                            |    92 +
 .../license.txt                               |     8 +
 .../src/index.haml                            |     4 +
 .../src/script.js                             |    13 +
 .../src/style.sass                            |    68 +
 styled-color-input/README.markdown            |     5 +
 styled-color-input/dist/index.html            |    22 +
 styled-color-input/dist/style.css             |    71 +
 styled-color-input/license.txt                |     8 +
 styled-color-input/src/index.html             |     7 +
 styled-color-input/src/style.css              |    71 +
 stylized-buttons/README.markdown              |     4 +
 stylized-buttons/dist/index.html              |    19 +
 stylized-buttons/dist/style.css               |   197 +
 stylized-buttons/license.txt                  |    13 +
 stylized-buttons/src/index.html               |     5 +
 stylized-buttons/src/style.css                |   194 +
 sun-rise-moon-rise/README.markdown            |     4 +
 sun-rise-moon-rise/dist/index.html            |    55 +
 sun-rise-moon-rise/dist/script.js             |   112 +
 sun-rise-moon-rise/dist/style.css             |   266 +
 sun-rise-moon-rise/license.txt                |    13 +
 sun-rise-moon-rise/src/index.html             |    41 +
 sun-rise-moon-rise/src/script.js              |   112 +
 sun-rise-moon-rise/src/style.css              |   266 +
 super-smash-bros-credits/LICENSE.txt          |    21 +
 super-smash-bros-credits/README.md            |     7 +
 super-smash-bros-credits/dist/index.html      |  1701 +
 super-smash-bros-credits/dist/script.js       |    27 +
 super-smash-bros-credits/dist/style.css       |   646 +
 super-smash-bros-credits/src/index.html       |  1685 +
 super-smash-bros-credits/src/script.js        |    27 +
 super-smash-bros-credits/src/style.scss       |   408 +
 svg-blob-u-lator/README.markdown              |     5 +
 svg-blob-u-lator/dist/index.html              |   109 +
 svg-blob-u-lator/dist/script.js               |    55 +
 svg-blob-u-lator/dist/style.css               |   242 +
 svg-blob-u-lator/license.txt                  |     8 +
 svg-blob-u-lator/src/index.haml               |    18 +
 svg-blob-u-lator/src/script.js                |    55 +
 svg-blob-u-lator/src/style.scss               |   207 +
 svg-flower-generator/README.markdown          |     7 +
 svg-flower-generator/dist/index.html          |    25 +
 svg-flower-generator/dist/script.js           |   206 +
 svg-flower-generator/dist/style.css           |   210 +
 svg-flower-generator/license.txt              |    13 +
 svg-flower-generator/src/index.html           |     9 +
 svg-flower-generator/src/script.babel         |   206 +
 svg-flower-generator/src/style.css            |   210 +
 svg-gradient-wave-generator/LICENSE.txt       |    21 +
 svg-gradient-wave-generator/README.md         |     5 +
 svg-gradient-wave-generator/dist/index.html   |    31 +
 svg-gradient-wave-generator/dist/script.js    |   282 +
 svg-gradient-wave-generator/dist/style.css    |    40 +
 svg-gradient-wave-generator/src/index.html    |    14 +
 svg-gradient-wave-generator/src/script.js     |   282 +
 svg-gradient-wave-generator/src/style.scss    |    51 +
 .../README.markdown                           |    13 +
 .../dist/index.html                           |    42 +
 .../dist/script.js                            |    46 +
 .../dist/style.css                            |   155 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    26 +
 .../src/script.js                             |    46 +
 .../src/style.sass                            |    93 +
 svg-loader/README.markdown                    |     5 +
 svg-loader/dist/index.html                    |    23 +
 svg-loader/dist/script.js                     |    42 +
 svg-loader/dist/style.css                     |    25 +
 svg-loader/license.txt                        |     8 +
 svg-loader/src/index.html                     |     4 +
 svg-loader/src/script.js                      |    43 +
 svg-loader/src/style.scss                     |    26 +
 svg-scribblemation/README.markdown            |     5 +
 svg-scribblemation/dist/index.html            |   103 +
 svg-scribblemation/dist/script.js             |    27 +
 svg-scribblemation/dist/style.css             |   443 +
 svg-scribblemation/license.txt                |     8 +
 svg-scribblemation/src/index.haml             |    21 +
 svg-scribblemation/src/script.js              |    27 +
 svg-scribblemation/src/style.scss             |   280 +
 .../LICENSE.txt                               |    21 +
 svg-sphere-animation-with-anime-js/README.md  |     5 +
 .../dist/index.html                           |    50 +
 .../dist/script.js                            |    85 +
 .../dist/style.css                            |    36 +
 .../src/index.html                            |    34 +
 .../src/script.js                             |    85 +
 .../src/style.css                             |    35 +
 sweater-swag-cpc/README.markdown              |     5 +
 sweater-swag-cpc/dist/index.html              |    55 +
 sweater-swag-cpc/dist/script.js               |    22 +
 sweater-swag-cpc/dist/style.css               |   204 +
 sweater-swag-cpc/license.txt                  |     8 +
 sweater-swag-cpc/src/index.html               |    39 +
 sweater-swag-cpc/src/script.js                |    22 +
 sweater-swag-cpc/src/style.scss               |   241 +
 swipey-gridclearleft/README.markdown          |     5 +
 swipey-gridclearleft/dist/index.html          |    49 +
 swipey-gridclearleft/dist/script.js           |    58 +
 swipey-gridclearleft/dist/style.css           |    11 +
 swipey-gridclearleft/license.txt              |     8 +
 swipey-gridclearleft/src/index.html           |    34 +
 swipey-gridclearleft/src/script.js            |    58 +
 swipey-gridclearleft/src/style.css            |    11 +
 tab-bar-interaction-1/README.markdown         |     5 +
 tab-bar-interaction-1/dist/index.html         |    93 +
 tab-bar-interaction-1/dist/script.js          |    33 +
 tab-bar-interaction-1/dist/style.css          |   102 +
 tab-bar-interaction-1/license.txt             |     8 +
 tab-bar-interaction-1/src/index.html          |    79 +
 tab-bar-interaction-1/src/script.js           |    33 +
 tab-bar-interaction-1/src/style.scss          |   108 +
 tabbar-animationonly-css/README.markdown      |     4 +
 tabbar-animationonly-css/dist/index.html      |    95 +
 tabbar-animationonly-css/dist/style.css       |   257 +
 tabbar-animationonly-css/license.txt          |     8 +
 tabbar-animationonly-css/src/index.html       |    80 +
 tabbar-animationonly-css/src/style.scss       |   179 +
 task-management-dashboard-ui/LICENSE.txt      |    21 +
 task-management-dashboard-ui/README.md        |     5 +
 task-management-dashboard-ui/dist/index.html  |   360 +
 task-management-dashboard-ui/dist/style.css   |   383 +
 task-management-dashboard-ui/src/index.html   |   346 +
 task-management-dashboard-ui/src/style.scss   |   380 +
 task-management-ui/LICENSE.txt                |    21 +
 task-management-ui/README.md                  |     7 +
 task-management-ui/dist/index.html            |   240 +
 task-management-ui/dist/script.js             |    65 +
 task-management-ui/dist/style.css             |   319 +
 task-management-ui/src/index.html             |   224 +
 task-management-ui/src/script.js              |    65 +
 task-management-ui/src/style.scss             |   364 +
 test-snowflake/README.markdown                |     5 +
 test-snowflake/dist/index.html                |    47 +
 test-snowflake/dist/style.css                 |     7 +
 test-snowflake/license.txt                    |     8 +
 test-snowflake/src/index.html                 |    33 +
 test-snowflake/src/style.css                  |     7 +
 tetradic-truchet/README.markdown              |     5 +
 tetradic-truchet/dist/apxlmx.js               |   726 +
 tetradic-truchet/dist/index.html              |    59 +
 tetradic-truchet/dist/script.js               |  1258 +
 tetradic-truchet/dist/style.css               |   221 +
 tetradic-truchet/license.txt                  |     8 +
 tetradic-truchet/src/apxlmx.js                |   726 +
 tetradic-truchet/src/index.pug                |    33 +
 tetradic-truchet/src/script.babel             |   532 +
 tetradic-truchet/src/style.scss               |   243 +
 tetris/README.markdown                        |     5 +
 tetris/dist/index.html                        |    35 +
 tetris/dist/script.js                         |   231 +
 tetris/dist/style.css                         |    13 +
 tetris/license.txt                            |     8 +
 tetris/src/index.html                         |     7 +
 tetris/src/script.js                          |   231 +
 tetris/src/style.css                          |    13 +
 .../README.markdown                           |    16 +
 .../dist/index.html                           |    39 +
 .../dist/script.js                            |    55 +
 .../dist/style.css                            |    49 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    23 +
 .../src/script.js                             |    55 +
 .../src/style.scss                            |    53 +
 text-hover/README.markdown                    |     5 +
 text-hover/dist/index.html                    |    15 +
 text-hover/dist/style.css                     |    40 +
 text-hover/license.txt                        |     8 +
 text-hover/src/index.html                     |     1 +
 text-hover/src/style.css                      |    40 +
 text-mask-over-colorful-cubes/README.markdown |    12 +
 text-mask-over-colorful-cubes/dist/index.html |    17 +
 text-mask-over-colorful-cubes/dist/script.js  |   235 +
 text-mask-over-colorful-cubes/dist/style.css  |    13 +
 text-mask-over-colorful-cubes/license.txt     |     8 +
 text-mask-over-colorful-cubes/src/index.html  |     2 +
 .../src/script.babel                          |   235 +
 text-mask-over-colorful-cubes/src/style.css   |    13 +
 textarea-with-syntax-highlighting/LICENSE.txt |    21 +
 textarea-with-syntax-highlighting/README.md   |     4 +
 .../dist/index.html                           |    29 +
 .../dist/script.js                            |    61 +
 .../dist/style.css                            |    52 +
 .../src/index.html                            |    13 +
 .../src/script.js                             |    61 +
 .../src/style.css                             |    52 +
 texture-challengepen-92020/README.markdown    |    11 +
 texture-challengepen-92020/dist/index.html    |    58 +
 texture-challengepen-92020/dist/style.css     |   150 +
 texture-challengepen-92020/license.txt        |     8 +
 texture-challengepen-92020/src/index.pug      |    37 +
 texture-challengepen-92020/src/style.sass     |   138 +
 the-cat-god/README.markdown                   |     4 +
 the-cat-god/dist/index.html                   |   343 +
 the-cat-god/dist/script.js                    |   215 +
 the-cat-god/dist/style.css                    |    38 +
 the-cat-god/license.txt                       |    13 +
 the-cat-god/src/index.html                    |   325 +
 the-cat-god/src/script.babel                  |   215 +
 the-cat-god/src/style.css                     |    38 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    17 +
 .../dist/script.js                            |   337 +
 .../dist/style.css                            |   323 +
 the-clips-of-css-v2-react-prism/license.txt   |     8 +
 the-clips-of-css-v2-react-prism/src/index.pug |     1 +
 .../src/script.babel                          |   337 +
 .../src/style.styl                            |   373 +
 the-cube-of-cubes-css-only/LICENSE.txt        |    21 +
 the-cube-of-cubes-css-only/README.md          |     4 +
 the-cube-of-cubes-css-only/dist/index.html    |   117 +
 the-cube-of-cubes-css-only/dist/style.css     |  3537 ++
 the-cube-of-cubes-css-only/src/index.html     |   103 +
 the-cube-of-cubes-css-only/src/style.scss     |   213 +
 the-cube/README.markdown                      |     4 +
 the-cube/dist/index.html                      |   100 +
 the-cube/dist/script.js                       |  4083 ++
 the-cube/dist/style.css                       |   345 +
 the-cube/license.txt                          |    13 +
 the-cube/src/index.html                       |    85 +
 the-cube/src/script.js                        |  4083 ++
 the-cube/src/style.sass                       |   359 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    15 +
 .../dist/script.js                            |     4 +
 .../dist/style.css                            |    18 +
 .../license.txt                               |    13 +
 .../src/index.html                            |     1 +
 .../src/script.js                             |     4 +
 .../src/style.css                             |    18 +
 the-dots-vs-the-bars/README.markdown          |     5 +
 the-dots-vs-the-bars/dist/index.html          |    24 +
 the-dots-vs-the-bars/dist/style.css           |   440 +
 the-dots-vs-the-bars/license.txt              |     8 +
 the-dots-vs-the-bars/src/index.html           |    10 +
 the-dots-vs-the-bars/src/style.css            |   440 +
 the-flame-keeps-burning/README.markdown       |     7 +
 the-flame-keeps-burning/dist/index.html       |   167 +
 the-flame-keeps-burning/dist/script.js        |    56 +
 the-flame-keeps-burning/dist/style.css        |    23 +
 the-flame-keeps-burning/license.txt           |     8 +
 the-flame-keeps-burning/src/index.html        |   151 +
 the-flame-keeps-burning/src/script.js         |    56 +
 the-flame-keeps-burning/src/style.css         |    23 +
 the-goo-filter-illustrated/README.markdown    |    11 +
 the-goo-filter-illustrated/dist/index.html    |    52 +
 the-goo-filter-illustrated/dist/script.js     |   114 +
 the-goo-filter-illustrated/dist/style.css     |    47 +
 the-goo-filter-illustrated/license.txt        |    17 +
 the-goo-filter-illustrated/src/index.html     |    35 +
 the-goo-filter-illustrated/src/script.js      |   114 +
 the-goo-filter-illustrated/src/style.css      |    47 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    16 +
 .../dist/script.js                            |    36 +
 .../dist/style.css                            |    69 +
 .../license.txt                               |     8 +
 .../src/index.haml                            |     0
 .../src/script.js                             |    36 +
 .../src/style.css                             |    69 +
 the-power-of-inherit/README.markdown          |     5 +
 the-power-of-inherit/dist/index.html          |    54 +
 the-power-of-inherit/dist/script.js           |     1 +
 the-power-of-inherit/dist/style.css           |    47 +
 the-power-of-inherit/license.txt              |     8 +
 the-power-of-inherit/src/index.html           |    39 +
 the-power-of-inherit/src/script.js            |     1 +
 the-power-of-inherit/src/style.scss           |    52 +
 the-web-artisan-society-2/README.markdown     |     5 +
 the-web-artisan-society-2/dist/index.html     |    20 +
 the-web-artisan-society-2/dist/style.css      |   150 +
 the-web-artisan-society-2/license.txt         |     8 +
 the-web-artisan-society-2/src/index.html      |     5 +
 the-web-artisan-society-2/src/style.css       |   151 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |   207 +
 three-js-dancing-tree-for-xmas/dist/script.js |   346 +
 three-js-dancing-tree-for-xmas/dist/style.css |    62 +
 three-js-dancing-tree-for-xmas/license.txt    |     8 +
 three-js-dancing-tree-for-xmas/src/index.html |   191 +
 .../src/script.babel                          |   346 +
 three-js-dancing-tree-for-xmas/src/style.css  |    62 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    20 +
 .../dist/script.js                            |   294 +
 .../dist/style.css                            |    22 +
 tiles-with-a-mediterranean-vibe/license.txt   |     8 +
 .../src/index.html                            |     4 +
 .../src/script.babel                          |   295 +
 .../src/style.scss                            |    23 +
 tilt-to-make-room-for-menu/README.markdown    |     8 +
 tilt-to-make-room-for-menu/dist/index.html    |    81 +
 tilt-to-make-room-for-menu/dist/script.js     |     1 +
 tilt-to-make-room-for-menu/dist/style.css     |   154 +
 tilt-to-make-room-for-menu/license.txt        |     8 +
 tilt-to-make-room-for-menu/src/index.html     |    66 +
 tilt-to-make-room-for-menu/src/script.js      |     1 +
 tilt-to-make-room-for-menu/src/style.css      |   154 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    15 +
 .../dist/style.css                            |    34 +
 tiny-but-accessible-5-star-rating/license.txt |     8 +
 .../src/index.html                            |     1 +
 .../src/style.scss                            |    37 +
 to-stick-and-stand/README.markdown            |     5 +
 to-stick-and-stand/dist/index.html            |    16 +
 to-stick-and-stand/dist/script.js             |   241 +
 to-stick-and-stand/dist/style.css             |    25 +
 to-stick-and-stand/license.txt                |     8 +
 to-stick-and-stand/src/index.html             |     0
 to-stick-and-stand/src/script.js              |   241 +
 to-stick-and-stand/src/style.css              |    25 +
 .../README.markdown                           |    26 +
 .../dist/index.html                           |    38 +
 .../dist/script.js                            |    96 +
 .../dist/style.css                            |   182 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    22 +
 .../src/script.js                             |    96 +
 .../src/style.scss                            |   178 +
 toggle-checkbox-without-label/README.markdown |     4 +
 toggle-checkbox-without-label/dist/index.html |    16 +
 toggle-checkbox-without-label/dist/style.css  |    48 +
 toggle-checkbox-without-label/license.txt     |     8 +
 toggle-checkbox-without-label/src/index.html  |     1 +
 toggle-checkbox-without-label/src/style.sass  |    42 +
 toggle/README.markdown                        |     5 +
 toggle/dist/index.html                        |    89 +
 toggle/dist/script.js                         |     9 +
 toggle/dist/style.css                         |   162 +
 toggle/license.txt                            |     8 +
 toggle/src/index.html                         |    73 +
 toggle/src/script.js                          |     9 +
 toggle/src/style.css                          |   162 +
 toggles/README.markdown                       |     5 +
 toggles/dist/index.html                       |   103 +
 toggles/dist/style.css                        |   646 +
 toggles/license.txt                           |     8 +
 toggles/src/index.pug                         |    85 +
 toggles/src/style.scss                        |   620 +
 tooltip-appear/README.markdown                |     7 +
 tooltip-appear/dist/index.html                |    79 +
 tooltip-appear/dist/script.js                 |     1 +
 tooltip-appear/dist/style.css                 |   127 +
 tooltip-appear/license.txt                    |     8 +
 tooltip-appear/src/index.html                 |    64 +
 tooltip-appear/src/script.js                  |     1 +
 tooltip-appear/src/style.css                  |   127 +
 toon-fire-shader/README.markdown              |     5 +
 toon-fire-shader/dist/index.html              |    17 +
 toon-fire-shader/dist/script.js               |   214 +
 toon-fire-shader/dist/style.css               |    11 +
 toon-fire-shader/license.txt                  |     8 +
 toon-fire-shader/src/index.html               |     1 +
 toon-fire-shader/src/script.js                |   214 +
 toon-fire-shader/src/style.css                |    11 +
 toon-fireball/README.markdown                 |     5 +
 toon-fireball/dist/index.html                 |    17 +
 toon-fireball/dist/script.js                  |   487 +
 toon-fireball/dist/style.css                  |     5 +
 toon-fireball/license.txt                     |     8 +
 toon-fireball/src/index.html                  |     1 +
 toon-fireball/src/script.babel                |   487 +
 toon-fireball/src/style.css                   |     5 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |   191 +
 .../dist/style.css                            |   163 +
 .../license.txt                               |    13 +
 .../src/index.html                            |   177 +
 .../src/style.css                             |   161 +
 travel/README.markdown                        |     4 +
 travel/dist/https___raw_githubusercon.css     |   143 +
 travel/dist/index.html                        |   160 +
 travel/dist/script.js                         |    52 +
 travel/license.txt                            |    13 +
 travel/src/https___raw_githubusercon.css      |   143 +
 travel/src/index.html                         |   142 +
 travel/src/script.js                          |    52 +
 troisjs-starfield/README.markdown             |     5 +
 troisjs-starfield/dist/index.html             |    16 +
 troisjs-starfield/dist/script.js              |   121 +
 troisjs-starfield/dist/style.css              |    23 +
 troisjs-starfield/license.txt                 |     8 +
 troisjs-starfield/src/index.html              |     1 +
 troisjs-starfield/src/script.js               |   121 +
 troisjs-starfield/src/style.css               |    23 +
 turbulence/README.markdown                    |     4 +
 turbulence/dist/index.html                    |    68 +
 turbulence/dist/script.js                     |   161 +
 turbulence/dist/style.css                     |   124 +
 turbulence/license.txt                        |     8 +
 turbulence/src/index.html                     |    54 +
 turbulence/src/script.babel                   |   161 +
 turbulence/src/style.scss                     |   125 +
 turkey/README.markdown                        |     5 +
 turkey/dist/index.html                        |    28 +
 turkey/dist/style.css                         |   272 +
 turkey/license.txt                            |     8 +
 turkey/src/index.html                         |    14 +
 turkey/src/style.css                          |   272 +
 turnsolepure-javascript/README.markdown       |     5 +
 turnsolepure-javascript/dist/index.html       |    19 +
 turnsolepure-javascript/dist/script.js        |   205 +
 turnsolepure-javascript/dist/style.css        |    35 +
 turnsolepure-javascript/license.txt           |     8 +
 turnsolepure-javascript/src/index.html        |     4 +
 turnsolepure-javascript/src/script.js         |   205 +
 turnsolepure-javascript/src/style.css         |    35 +
 types-of-coffee-pure-css/README.markdown      |     4 +
 types-of-coffee-pure-css/dist/index.html      |    81 +
 types-of-coffee-pure-css/dist/style.css       |   269 +
 types-of-coffee-pure-css/license.txt          |    13 +
 types-of-coffee-pure-css/src/index.html       |    68 +
 types-of-coffee-pure-css/src/style.scss       |   283 +
 .../README.markdown                           |     7 +
 .../dist/index.html                           |    90 +
 .../dist/script.js                            |    37 +
 .../dist/style.css                            |   326 +
 typesetting-hover-over-the-text/license.txt   |    13 +
 .../src/index.html                            |    75 +
 typesetting-hover-over-the-text/src/script.js |    37 +
 .../src/style.less                            |   363 +
 ui-design-stats-dashboard/README.markdown     |     5 +
 ui-design-stats-dashboard/dist/index.html     |    59 +
 ui-design-stats-dashboard/dist/script.js      |    11 +
 ui-design-stats-dashboard/dist/style.css      |   337 +
 ui-design-stats-dashboard/license.txt         |     8 +
 ui-design-stats-dashboard/src/index.pug       |    48 +
 ui-design-stats-dashboard/src/script.js       |    11 +
 ui-design-stats-dashboard/src/style.scss      |   320 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |   612 +
 ui-design-wedding-planning-app/dist/script.js |     1 +
 ui-design-wedding-planning-app/dist/style.css |   566 +
 ui-design-wedding-planning-app/license.txt    |     8 +
 ui-design-wedding-planning-app/src/index.pug  |   472 +
 ui-design-wedding-planning-app/src/script.js  |     1 +
 ui-design-wedding-planning-app/src/style.scss |   563 +
 vacation-todo-list/README.markdown            |     4 +
 vacation-todo-list/dist/index.html            |    70 +
 vacation-todo-list/dist/script.js             |    39 +
 vacation-todo-list/dist/style.css             |   192 +
 vacation-todo-list/license.txt                |     8 +
 vacation-todo-list/src/index.html             |    55 +
 vacation-todo-list/src/script.js              |    39 +
 vacation-todo-list/src/style.scss             |   227 +
 vhs-stuck/README.markdown                     |     5 +
 vhs-stuck/dist/index.html                     |    16 +
 vhs-stuck/dist/script.js                      |    44 +
 vhs-stuck/dist/style.css                      |    10 +
 vhs-stuck/license.txt                         |     8 +
 vhs-stuck/src/index.html                      |     0
 vhs-stuck/src/script.js                       |    44 +
 vhs-stuck/src/style.css                       |    10 +
 video-blend-modes-cool-modal/README.markdown  |     4 +
 video-blend-modes-cool-modal/dist/index.html  |    35 +
 video-blend-modes-cool-modal/dist/script.js   |    18 +
 video-blend-modes-cool-modal/dist/style.css   |   151 +
 video-blend-modes-cool-modal/license.txt      |    13 +
 video-blend-modes-cool-modal/src/index.haml   |    14 +
 video-blend-modes-cool-modal/src/script.js    |    18 +
 video-blend-modes-cool-modal/src/style.scss   |   163 +
 .../LICENSE.txt                               |    21 +
 .../README.md                                 |     5 +
 .../dist/index.html                           |    84 +
 .../dist/script.js                            |   588 +
 .../dist/style.css                            |   204 +
 .../src/index.pug                             |    69 +
 .../src/script.js                             |   589 +
 .../src/style.scss                            |   178 +
 .../README.markdown                           |     6 +
 .../dist/index.html                           |    31 +
 .../dist/script.js                            |   265 +
 .../dist/style.css                            |    89 +
 .../license.txt                               |    13 +
 .../src/index.html                            |    15 +
 .../src/script.babel                          |   265 +
 .../src/style.scss                            |    93 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |   500 +
 .../dist/script.js                            |  1105 +
 .../dist/style.css                            |  7321 +++
 .../license.txt                               |     8 +
 .../src/index.haml                            |   323 +
 .../src/script.js                             |  1105 +
 .../src/style.scss                            |  2047 +
 volumes/README.markdown                       |     4 +
 volumes/dist/index.html                       |    18 +
 volumes/dist/script.js                        |    40 +
 volumes/dist/style.css                        |    21 +
 volumes/license.txt                           |    17 +
 volumes/src/index.html                        |     0
 volumes/src/script.js                         |    40 +
 volumes/src/style.css                         |    21 +
 vortex-lines/README.markdown                  |     5 +
 vortex-lines/dist/index.html                  |    20 +
 vortex-lines/dist/script.js                   |   162 +
 vortex-lines/dist/style.css                   |    13 +
 vortex-lines/license.txt                      |     8 +
 vortex-lines/src/index.html                   |     1 +
 vortex-lines/src/script.ts                    |   218 +
 vortex-lines/src/style.scss                   |    14 +
 voyage-slider-gsap/README.markdown            |     5 +
 voyage-slider-gsap/dist/index.html            |   126 +
 voyage-slider-gsap/dist/script.js             |   255 +
 voyage-slider-gsap/dist/style.css             |   319 +
 voyage-slider-gsap/license.txt                |     8 +
 voyage-slider-gsap/src/index.html             |   110 +
 voyage-slider-gsap/src/script.js              |   255 +
 voyage-slider-gsap/src/style.scss             |   351 +
 vue-slider-ui-interaction/README.markdown     |     4 +
 vue-slider-ui-interaction/dist/index.html     |   109 +
 vue-slider-ui-interaction/dist/script.js      |    79 +
 vue-slider-ui-interaction/dist/style.css      |   384 +
 vue-slider-ui-interaction/license.txt         |     8 +
 vue-slider-ui-interaction/src/index.html      |    92 +
 vue-slider-ui-interaction/src/script.js       |    79 +
 vue-slider-ui-interaction/src/style.scss      |   354 +
 wacky-buttons-3/README.markdown               |     5 +
 wacky-buttons-3/dist/index.html               |    31 +
 wacky-buttons-3/dist/script.js                |     1 +
 wacky-buttons-3/dist/style.css                |   215 +
 wacky-buttons-3/license.txt                   |     8 +
 wacky-buttons-3/src/index.html                |    12 +
 wacky-buttons-3/src/script.js                 |     1 +
 wacky-buttons-3/src/style.scss                |   247 +
 walkershow-to/README.markdown                 |     4 +
 walkershow-to/dist/index.html                 |    26 +
 walkershow-to/dist/script.js                  |   207 +
 walkershow-to/dist/style.css                  |   104 +
 walkershow-to/license.txt                     |     8 +
 walkershow-to/src/index.html                  |    10 +
 walkershow-to/src/script.js                   |   207 +
 walkershow-to/src/style.scss                  |    72 +
 .../README.markdown                           |     5 +
 .../dist/index.html                           |    16 +
 .../dist/script.js                            |   157 +
 .../dist/style.css                            |     9 +
 .../license.txt                               |     8 +
 .../src/index.html                            |     1 +
 .../src/script.js                             |   157 +
 .../src/style.css                             |     9 +
 water-bending/README.markdown                 |     5 +
 water-bending/dist/index.html                 |    18 +
 water-bending/dist/script.js                  |    89 +
 water-bending/license.txt                     |     8 +
 water-bending/src/index.html                  |     0
 water-bending/src/script.js                   |    89 +
 .../README.markdown                           |     4 +
 .../dist/index.html                           |    61 +
 waves096-of-100days100projects/dist/script.js |    55 +
 waves096-of-100days100projects/dist/style.css |   207 +
 waves096-of-100days100projects/license.txt    |     8 +
 waves096-of-100days100projects/src/index.html |    46 +
 waves096-of-100days100projects/src/script.js  |    55 +
 waves096-of-100days100projects/src/style.css  |   207 +
 webgl-markers/README.markdown                 |     5 +
 webgl-markers/dist/index.html                 |    17 +
 webgl-markers/dist/script.js                  |   232 +
 webgl-markers/license.txt                     |     8 +
 webgl-markers/src/index.html                  |     2 +
 webgl-markers/src/script.js                   |   232 +
 webpack-zdog/README.markdown                  |     4 +
 webpack-zdog/dist/index.html                  |    16 +
 webpack-zdog/dist/script.js                   |    51 +
 webpack-zdog/dist/style.css                   |     3 +
 webpack-zdog/license.txt                      |    13 +
 webpack-zdog/src/index.html                   |     1 +
 webpack-zdog/src/script.js                    |    51 +
 webpack-zdog/src/style.css                    |     3 +
 what-s-behind/README.markdown                 |     4 +
 what-s-behind/dist/index.html                 |    21 +
 what-s-behind/dist/script.js                  |   290 +
 what-s-behind/dist/style.css                  |    25 +
 what-s-behind/license.txt                     |     8 +
 what-s-behind/src/index.html                  |     4 +
 what-s-behind/src/script.babel                |   290 +
 what-s-behind/src/style.css                   |    25 +
 when-you-can-t-decide/README.markdown         |     5 +
 when-you-can-t-decide/dist/index.html         |    57 +
 when-you-can-t-decide/dist/script.js          |    99 +
 when-you-can-t-decide/dist/style.css          |   220 +
 when-you-can-t-decide/license.txt             |     8 +
 when-you-can-t-decide/src/index.html          |    41 +
 when-you-can-t-decide/src/script.babel        |    99 +
 when-you-can-t-decide/src/style.scss          |   202 +
 wip-motion-blur-transition/README.markdown    |     4 +
 wip-motion-blur-transition/dist/index.html    |    75 +
 wip-motion-blur-transition/dist/script.js     |   108 +
 wip-motion-blur-transition/dist/style.css     |    14 +
 wip-motion-blur-transition/license.txt        |    13 +
 wip-motion-blur-transition/src/index.html     |    58 +
 wip-motion-blur-transition/src/script.js      |   108 +
 wip-motion-blur-transition/src/style.css      |    14 +
 wobble/README.markdown                        |     4 +
 wobble/dist/index.html                        |    16 +
 wobble/dist/script.js                         |   272 +
 wobble/dist/style.css                         |    21 +
 wobble/license.txt                            |     8 +
 wobble/src/index.html                         |     1 +
 wobble/src/script.js                          |   272 +
 wobble/src/style.css                          |    21 +
 wonderland/README.markdown                    |     4 +
 wonderland/dist/index.html                    |    17 +
 wonderland/dist/script.js                     |   168 +
 wonderland/dist/style.css                     |     8 +
 wonderland/license.txt                        |    13 +
 wonderland/src/index.html                     |     1 +
 wonderland/src/script.js                      |   168 +
 wonderland/src/style.scss                     |     2 +
 zdog-and-goo/README.markdown                  |     4 +
 zdog-and-goo/dist/index.html                  |    28 +
 zdog-and-goo/dist/script.js                   |   103 +
 zdog-and-goo/dist/style.css                   |    36 +
 zdog-and-goo/license.txt                      |    13 +
 zdog-and-goo/src/index.html                   |    10 +
 zdog-and-goo/src/script.js                    |   103 +
 zdog-and-goo/src/style.css                    |    36 +
 zdog-space-scene/README.markdown              |     6 +
 .../dist/f7248f1855b6b3ac41fc1799b.js         |   186 +
 zdog-space-scene/dist/index.html              |    18 +
 zdog-space-scene/dist/script.js               |    80 +
 zdog-space-scene/dist/style.css               |    25 +
 zdog-space-scene/license.txt                  |    13 +
 .../src/f7248f1855b6b3ac41fc1799b.js          |   186 +
 zdog-space-scene/src/index.html               |     1 +
 zdog-space-scene/src/script.babel             |    80 +
 zdog-space-scene/src/style.css                |    23 +
 zdog-trefoil/README.markdown                  |     5 +
 zdog-trefoil/dist/index.html                  |    16 +
 zdog-trefoil/dist/script.js                   |    65 +
 zdog-trefoil/dist/style.css                   |    15 +
 zdog-trefoil/license.txt                      |     8 +
 zdog-trefoil/src/index.html                   |     1 +
 zdog-trefoil/src/script.js                    |    65 +
 zdog-trefoil/src/style.css                    |    15 +
 zdogcone-mace/README.markdown                 |     8 +
 zdogcone-mace/dist/index.html                 |    16 +
 zdogcone-mace/dist/script.js                  |   155 +
 zdogcone-mace/dist/style.css                  |    17 +
 zdogcone-mace/license.txt                     |    13 +
 zdogcone-mace/src/index.html                  |     1 +
 zdogcone-mace/src/script.js                   |   155 +
 zdogcone-mace/src/style.css                   |    17 +
 zdoglittle-forest/README.markdown             |    10 +
 zdoglittle-forest/dist/index.html             |    20 +
 zdoglittle-forest/dist/script.js              |   776 +
 zdoglittle-forest/dist/style.css              |    38 +
 zdoglittle-forest/license.txt                 |    13 +
 zdoglittle-forest/src/index.html              |     5 +
 zdoglittle-forest/src/script.js               |   776 +
 zdoglittle-forest/src/style.css               |    38 +
 zdogrgb-birdie/README.markdown                |     4 +
 zdogrgb-birdie/dist/index.html                |    16 +
 zdogrgb-birdie/dist/script.js                 |   150 +
 zdogrgb-birdie/dist/style.css                 |    12 +
 zdogrgb-birdie/license.txt                    |    17 +
 zdogrgb-birdie/src/index.html                 |     1 +
 zdogrgb-birdie/src/script.js                  |   151 +
 zdogrgb-birdie/src/style.css                  |    12 +
 zdogsolids/README.markdown                    |     8 +
 zdogsolids/dist/index.html                    |    16 +
 zdogsolids/dist/script.js                     |   443 +
 zdogsolids/dist/style.css                     |    14 +
 zdogsolids/license.txt                        |    13 +
 zdogsolids/src/index.html                     |     1 +
 zdogsolids/src/script.js                      |   443 +
 zdogsolids/src/style.css                      |    14 +
 zig-zag-gradient-lab/README.markdown          |     5 +
 zig-zag-gradient-lab/dist/index.html          |    46 +
 zig-zag-gradient-lab/dist/script.js           |   166 +
 zig-zag-gradient-lab/dist/style.css           |    86 +
 zig-zag-gradient-lab/license.txt              |     8 +
 zig-zag-gradient-lab/src/index.html           |    31 +
 zig-zag-gradient-lab/src/script.js            |   166 +
 zig-zag-gradient-lab/src/style.scss           |    87 +
 .../README.markdown                           |     7 +
 .../dist/index.html                           |    62 +
 .../dist/script.js                            |    10 +
 .../dist/style.css                            |    12 +
 .../license.txt                               |     8 +
 .../src/index.html                            |    47 +
 .../src/script.js                             |    10 +
 .../src/style.css                             |    12 +
 4074 files changed, 598712 insertions(+)
 create mode 100644 017-erosion/README.markdown
 create mode 100644 017-erosion/dist/index.html
 create mode 100644 017-erosion/dist/script.js
 create mode 100644 017-erosion/license.txt
 create mode 100644 017-erosion/src/index.html
 create mode 100644 017-erosion/src/script.babel
 create mode 100644 1-codevember-2017galaxy/README.markdown
 create mode 100644 1-codevember-2017galaxy/dist/index.html
 create mode 100644 1-codevember-2017galaxy/dist/script.js
 create mode 100644 1-codevember-2017galaxy/dist/style.css
 create mode 100644 1-codevember-2017galaxy/license.txt
 create mode 100644 1-codevember-2017galaxy/src/index.html
 create mode 100644 1-codevember-2017galaxy/src/script.js
 create mode 100644 1-codevember-2017galaxy/src/style.scss
 create mode 100644 1-element-css-spinners/README.markdown
 create mode 100644 1-element-css-spinners/dist/index.html
 create mode 100644 1-element-css-spinners/dist/style.css
 create mode 100644 1-element-css-spinners/license.txt
 create mode 100644 1-element-css-spinners/src/index.pug
 create mode 100644 1-element-css-spinners/src/style.scss
 create mode 100644 10-000-codepen-followers/README.markdown
 create mode 100644 10-000-codepen-followers/dist/index.html
 create mode 100644 10-000-codepen-followers/dist/script.js
 create mode 100644 10-000-codepen-followers/dist/style.css
 create mode 100644 10-000-codepen-followers/license.txt
 create mode 100644 10-000-codepen-followers/src/index.html
 create mode 100644 10-000-codepen-followers/src/script.js
 create mode 100644 10-000-codepen-followers/src/style.css
 create mode 100644 10print-svg/README.markdown
 create mode 100644 10print-svg/dist/index.html
 create mode 100644 10print-svg/dist/script.js
 create mode 100644 10print-svg/dist/style.css
 create mode 100644 10print-svg/license.txt
 create mode 100644 10print-svg/src/index.html
 create mode 100644 10print-svg/src/script.babel
 create mode 100644 10print-svg/src/style.scss
 create mode 100644 141-in-2021-javascript-canvas/README.markdown
 create mode 100644 141-in-2021-javascript-canvas/dist/index.html
 create mode 100644 141-in-2021-javascript-canvas/dist/script.js
 create mode 100644 141-in-2021-javascript-canvas/dist/style.css
 create mode 100644 141-in-2021-javascript-canvas/license.txt
 create mode 100644 141-in-2021-javascript-canvas/src/index.html
 create mode 100644 141-in-2021-javascript-canvas/src/script.js
 create mode 100644 141-in-2021-javascript-canvas/src/style.css
 create mode 100644 20/README.markdown
 create mode 100644 20/dist/index.html
 create mode 100644 20/dist/script.js
 create mode 100644 20/dist/style.css
 create mode 100644 20/license.txt
 create mode 100644 20/src/index.html
 create mode 100644 20/src/script.js
 create mode 100644 20/src/style.css
 create mode 100644 2021-to-2022/README.markdown
 create mode 100644 2021-to-2022/dist/index.html
 create mode 100644 2021-to-2022/dist/style.css
 create mode 100644 2021-to-2022/license.txt
 create mode 100644 2021-to-2022/src/index.html
 create mode 100644 2021-to-2022/src/style.css
 create mode 100644 31-taint/README.markdown
 create mode 100644 31-taint/dist/index.html
 create mode 100644 31-taint/dist/script.js
 create mode 100644 31-taint/dist/style.css
 create mode 100644 31-taint/license.txt
 create mode 100644 31-taint/src/index.html
 create mode 100644 31-taint/src/script.js
 create mode 100644 31-taint/src/style.css
 create mode 100644 3d-css-kinetic-type-poster/README.markdown
 create mode 100644 3d-css-kinetic-type-poster/dist/index.html
 create mode 100644 3d-css-kinetic-type-poster/dist/script.js
 create mode 100644 3d-css-kinetic-type-poster/dist/style.css
 create mode 100644 3d-css-kinetic-type-poster/license.txt
 create mode 100644 3d-css-kinetic-type-poster/src/index.html
 create mode 100644 3d-css-kinetic-type-poster/src/script.js
 create mode 100644 3d-css-kinetic-type-poster/src/style.scss
 create mode 100644 3d-css-plane-tap-to-toggle-mouse-move-parallax/README.markdown
 create mode 100644 3d-css-plane-tap-to-toggle-mouse-move-parallax/dist/index.html
 create mode 100644 3d-css-plane-tap-to-toggle-mouse-move-parallax/dist/script.js
 create mode 100644 3d-css-plane-tap-to-toggle-mouse-move-parallax/dist/style.css
 create mode 100644 3d-css-plane-tap-to-toggle-mouse-move-parallax/license.txt
 create mode 100644 3d-css-plane-tap-to-toggle-mouse-move-parallax/src/index.pug
 create mode 100644 3d-css-plane-tap-to-toggle-mouse-move-parallax/src/script.babel
 create mode 100644 3d-css-plane-tap-to-toggle-mouse-move-parallax/src/style.styl
 create mode 100644 3d-css-sphere/README.markdown
 create mode 100644 3d-css-sphere/dist/index.html
 create mode 100644 3d-css-sphere/dist/style.css
 create mode 100644 3d-css-sphere/license.txt
 create mode 100644 3d-css-sphere/src/index.html
 create mode 100644 3d-css-sphere/src/style.css
 create mode 100644 3d-d20-die-with-pure-css/README.markdown
 create mode 100644 3d-d20-die-with-pure-css/dist/index.html
 create mode 100644 3d-d20-die-with-pure-css/dist/script.js
 create mode 100644 3d-d20-die-with-pure-css/dist/style.css
 create mode 100644 3d-d20-die-with-pure-css/license.txt
 create mode 100644 3d-d20-die-with-pure-css/src/index.html
 create mode 100644 3d-d20-die-with-pure-css/src/script.js
 create mode 100644 3d-d20-die-with-pure-css/src/style.scss
 create mode 100644 3d-dashboardspline/README.markdown
 create mode 100644 3d-dashboardspline/dist/index.html
 create mode 100644 3d-dashboardspline/dist/style.css
 create mode 100644 3d-dashboardspline/license.txt
 create mode 100644 3d-dashboardspline/src/index.html
 create mode 100644 3d-dashboardspline/src/style.scss
 create mode 100644 3d-drag-out-menu-with-guitar/README.markdown
 create mode 100644 3d-drag-out-menu-with-guitar/dist/index.html
 create mode 100644 3d-drag-out-menu-with-guitar/dist/script.js
 create mode 100644 3d-drag-out-menu-with-guitar/dist/style.css
 create mode 100644 3d-drag-out-menu-with-guitar/license.txt
 create mode 100644 3d-drag-out-menu-with-guitar/src/index.haml
 create mode 100644 3d-drag-out-menu-with-guitar/src/script.babel
 create mode 100644 3d-drag-out-menu-with-guitar/src/style.scss
 create mode 100644 3d-ish-hamburger-menu/README.markdown
 create mode 100644 3d-ish-hamburger-menu/dist/index.html
 create mode 100644 3d-ish-hamburger-menu/dist/style.css
 create mode 100644 3d-ish-hamburger-menu/license.txt
 create mode 100644 3d-ish-hamburger-menu/src/index.html
 create mode 100644 3d-ish-hamburger-menu/src/style.scss
 create mode 100644 3d-polaroid-world/README.markdown
 create mode 100644 3d-polaroid-world/dist/index.html
 create mode 100644 3d-polaroid-world/dist/script.js
 create mode 100644 3d-polaroid-world/dist/style.css
 create mode 100644 3d-polaroid-world/license.txt
 create mode 100644 3d-polaroid-world/src/index.html
 create mode 100644 3d-polaroid-world/src/script.babel
 create mode 100644 3d-polaroid-world/src/style.scss
 create mode 100644 3d-spaceshipgsap/README.markdown
 create mode 100644 3d-spaceshipgsap/dist/index.html
 create mode 100644 3d-spaceshipgsap/dist/script.js
 create mode 100644 3d-spaceshipgsap/dist/style.css
 create mode 100644 3d-spaceshipgsap/license.txt
 create mode 100644 3d-spaceshipgsap/src/index.pug
 create mode 100644 3d-spaceshipgsap/src/script.js
 create mode 100644 3d-spaceshipgsap/src/style.scss
 create mode 100644 3d-xylophone/README.markdown
 create mode 100644 3d-xylophone/dist/index.html
 create mode 100644 3d-xylophone/dist/script.js
 create mode 100644 3d-xylophone/dist/style.css
 create mode 100644 3d-xylophone/license.txt
 create mode 100644 3d-xylophone/src/index.html
 create mode 100644 3d-xylophone/src/script.js
 create mode 100644 3d-xylophone/src/style.css
 create mode 100644 4-big-cubes-animation-with-svg-use-and-css-variables/README.markdown
 create mode 100644 4-big-cubes-animation-with-svg-use-and-css-variables/dist/index.html
 create mode 100644 4-big-cubes-animation-with-svg-use-and-css-variables/dist/style.css
 create mode 100644 4-big-cubes-animation-with-svg-use-and-css-variables/license.txt
 create mode 100644 4-big-cubes-animation-with-svg-use-and-css-variables/src/index.html
 create mode 100644 4-big-cubes-animation-with-svg-use-and-css-variables/src/style.scss
 create mode 100644 60-gradient-morphing-blob/README.markdown
 create mode 100644 60-gradient-morphing-blob/dist/index.html
 create mode 100644 60-gradient-morphing-blob/dist/script.js
 create mode 100644 60-gradient-morphing-blob/dist/style.css
 create mode 100644 60-gradient-morphing-blob/license.txt
 create mode 100644 60-gradient-morphing-blob/src/index.html
 create mode 100644 60-gradient-morphing-blob/src/script.js
 create mode 100644 60-gradient-morphing-blob/src/style.css
 create mode 100644 80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/README.markdown
 create mode 100644 80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/dist/index.html
 create mode 100644 80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/dist/style.css
 create mode 100644 80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/license.txt
 create mode 100644 80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/src/index.haml
 create mode 100644 80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/src/style.scss
 create mode 100644 CodePen_Export_WKdodx/README.markdown
 create mode 100644 CodePen_Export_WKdodx/dist/index.html
 create mode 100644 CodePen_Export_WKdodx/dist/style.css
 create mode 100644 CodePen_Export_WKdodx/license.txt
 create mode 100644 CodePen_Export_WKdodx/src/index.html
 create mode 100644 CodePen_Export_WKdodx/src/style.css
 create mode 100644 a-css-only-carousel-slider/README.markdown
 create mode 100644 a-css-only-carousel-slider/dist/index.html
 create mode 100644 a-css-only-carousel-slider/dist/style.css
 create mode 100644 a-css-only-carousel-slider/license.txt
 create mode 100644 a-css-only-carousel-slider/src/index.html
 create mode 100644 a-css-only-carousel-slider/src/style.css
 create mode 100644 a-fake-dream/README.markdown
 create mode 100644 a-fake-dream/dist/index.html
 create mode 100644 a-fake-dream/dist/script.js
 create mode 100644 a-fake-dream/dist/style.css
 create mode 100644 a-fake-dream/license.txt
 create mode 100644 a-fake-dream/src/index.html
 create mode 100644 a-fake-dream/src/script.babel
 create mode 100644 a-fake-dream/src/style.scss
 create mode 100644 a-generative-svg-using-a-tetradic-color-pallette/README.markdown
 create mode 100644 a-generative-svg-using-a-tetradic-color-pallette/dist/index.html
 create mode 100644 a-generative-svg-using-a-tetradic-color-pallette/dist/script.js
 create mode 100644 a-generative-svg-using-a-tetradic-color-pallette/dist/style.css
 create mode 100644 a-generative-svg-using-a-tetradic-color-pallette/license.txt
 create mode 100644 a-generative-svg-using-a-tetradic-color-pallette/src/index.html
 create mode 100644 a-generative-svg-using-a-tetradic-color-pallette/src/script.js
 create mode 100644 a-generative-svg-using-a-tetradic-color-pallette/src/style.css
 create mode 100644 a-pure-css-gameyou-must-build-a-lighthouse/README.markdown
 create mode 100644 a-pure-css-gameyou-must-build-a-lighthouse/dist/index.html
 create mode 100644 a-pure-css-gameyou-must-build-a-lighthouse/dist/script.js
 create mode 100644 a-pure-css-gameyou-must-build-a-lighthouse/dist/style.css
 create mode 100644 a-pure-css-gameyou-must-build-a-lighthouse/license.txt
 create mode 100644 a-pure-css-gameyou-must-build-a-lighthouse/src/index.html
 create mode 100644 a-pure-css-gameyou-must-build-a-lighthouse/src/script.js
 create mode 100644 a-pure-css-gameyou-must-build-a-lighthouse/src/style.scss
 create mode 100644 a-tribute-to-manfred-mohrsimplex-noise/README.markdown
 create mode 100644 a-tribute-to-manfred-mohrsimplex-noise/dist/index.html
 create mode 100644 a-tribute-to-manfred-mohrsimplex-noise/dist/script.js
 create mode 100644 a-tribute-to-manfred-mohrsimplex-noise/dist/style.css
 create mode 100644 a-tribute-to-manfred-mohrsimplex-noise/license.txt
 create mode 100644 a-tribute-to-manfred-mohrsimplex-noise/src/index.html
 create mode 100644 a-tribute-to-manfred-mohrsimplex-noise/src/script.js
 create mode 100644 a-tribute-to-manfred-mohrsimplex-noise/src/style.css
 create mode 100644 academy/README.markdown
 create mode 100644 academy/dist/index.html
 create mode 100644 academy/dist/script.js
 create mode 100644 academy/dist/style.css
 create mode 100644 academy/license.txt
 create mode 100644 academy/src/index.html
 create mode 100644 academy/src/script.js
 create mode 100644 academy/src/style.scss
 create mode 100644 accessibility-to-a11y/README.markdown
 create mode 100644 accessibility-to-a11y/dist/index.html
 create mode 100644 accessibility-to-a11y/dist/style.css
 create mode 100644 accessibility-to-a11y/license.txt
 create mode 100644 accessibility-to-a11y/src/index.html
 create mode 100644 accessibility-to-a11y/src/style.scss
 create mode 100644 acrobatic-preloader/README.markdown
 create mode 100644 acrobatic-preloader/dist/index.html
 create mode 100644 acrobatic-preloader/dist/style.css
 create mode 100644 acrobatic-preloader/license.txt
 create mode 100644 acrobatic-preloader/src/index.html
 create mode 100644 acrobatic-preloader/src/style.css
 create mode 100644 ambient-blur-using-backdrop-filter/README.markdown
 create mode 100644 ambient-blur-using-backdrop-filter/dist/index.html
 create mode 100644 ambient-blur-using-backdrop-filter/dist/script.js
 create mode 100644 ambient-blur-using-backdrop-filter/dist/style.css
 create mode 100644 ambient-blur-using-backdrop-filter/license.txt
 create mode 100644 ambient-blur-using-backdrop-filter/src/index.html
 create mode 100644 ambient-blur-using-backdrop-filter/src/script.js
 create mode 100644 ambient-blur-using-backdrop-filter/src/style.css
 create mode 100644 animated-atom-svg/README.markdown
 create mode 100644 animated-atom-svg/dist/index.html
 create mode 100644 animated-atom-svg/dist/script.js
 create mode 100644 animated-atom-svg/dist/style.css
 create mode 100644 animated-atom-svg/license.txt
 create mode 100644 animated-atom-svg/src/index.html
 create mode 100644 animated-atom-svg/src/script.js
 create mode 100644 animated-atom-svg/src/style.scss
 create mode 100644 animated-fill-and-strikethrough-checkboxes/README.markdown
 create mode 100644 animated-fill-and-strikethrough-checkboxes/dist/index.html
 create mode 100644 animated-fill-and-strikethrough-checkboxes/dist/script.js
 create mode 100644 animated-fill-and-strikethrough-checkboxes/dist/style.css
 create mode 100644 animated-fill-and-strikethrough-checkboxes/license.txt
 create mode 100644 animated-fill-and-strikethrough-checkboxes/src/index.html
 create mode 100644 animated-fill-and-strikethrough-checkboxes/src/script.js
 create mode 100644 animated-fill-and-strikethrough-checkboxes/src/style.css
 create mode 100644 animated-pill-radiosreact-responsive/README.markdown
 create mode 100644 animated-pill-radiosreact-responsive/dist/index.html
 create mode 100644 animated-pill-radiosreact-responsive/dist/script.js
 create mode 100644 animated-pill-radiosreact-responsive/dist/style.css
 create mode 100644 animated-pill-radiosreact-responsive/license.txt
 create mode 100644 animated-pill-radiosreact-responsive/src/index.html
 create mode 100644 animated-pill-radiosreact-responsive/src/script.babel
 create mode 100644 animated-pill-radiosreact-responsive/src/style.css
 create mode 100644 animated-striped-gradient-button/LICENSE.txt
 create mode 100644 animated-striped-gradient-button/README.md
 create mode 100644 animated-striped-gradient-button/dist/index.html
 create mode 100644 animated-striped-gradient-button/dist/style.css
 create mode 100644 animated-striped-gradient-button/src/index.html
 create mode 100644 animated-striped-gradient-button/src/style.scss
 create mode 100644 animated-verbs-ii/README.markdown
 create mode 100644 animated-verbs-ii/dist/index.html
 create mode 100644 animated-verbs-ii/dist/mwgbqon.css
 create mode 100644 animated-verbs-ii/dist/script.js
 create mode 100644 animated-verbs-ii/dist/style.css
 create mode 100644 animated-verbs-ii/license.txt
 create mode 100644 animated-verbs-ii/src/index.html
 create mode 100644 animated-verbs-ii/src/mwgbqon.css
 create mode 100644 animated-verbs-ii/src/script.js
 create mode 100644 animated-verbs-ii/src/style.scss
 create mode 100644 anime-js-scrollmagic-scroll-based-animations/LICENSE.txt
 create mode 100644 anime-js-scrollmagic-scroll-based-animations/README.md
 create mode 100644 anime-js-scrollmagic-scroll-based-animations/dist/index.html
 create mode 100644 anime-js-scrollmagic-scroll-based-animations/dist/script.js
 create mode 100644 anime-js-scrollmagic-scroll-based-animations/dist/style.css
 create mode 100644 anime-js-scrollmagic-scroll-based-animations/src/index.html
 create mode 100644 anime-js-scrollmagic-scroll-based-animations/src/script.js
 create mode 100644 anime-js-scrollmagic-scroll-based-animations/src/style.css
 create mode 100644 another-branching-strategy-svg/README.markdown
 create mode 100644 another-branching-strategy-svg/dist/index.html
 create mode 100644 another-branching-strategy-svg/dist/script.js
 create mode 100644 another-branching-strategy-svg/dist/style.css
 create mode 100644 another-branching-strategy-svg/license.txt
 create mode 100644 another-branching-strategy-svg/src/index.html
 create mode 100644 another-branching-strategy-svg/src/script.js
 create mode 100644 another-branching-strategy-svg/src/style.css
 create mode 100644 apart/README.markdown
 create mode 100644 apart/dist/index.html
 create mode 100644 apart/dist/script.js
 create mode 100644 apart/dist/style.css
 create mode 100644 apart/license.txt
 create mode 100644 apart/src/index.html
 create mode 100644 apart/src/script.js
 create mode 100644 apart/src/style.css
 create mode 100644 apple-inspired-pride-clock/LICENSE.txt
 create mode 100644 apple-inspired-pride-clock/README.md
 create mode 100644 apple-inspired-pride-clock/dist/index.html
 create mode 100644 apple-inspired-pride-clock/dist/script.js
 create mode 100644 apple-inspired-pride-clock/dist/style.css
 create mode 100644 apple-inspired-pride-clock/src/index.html
 create mode 100644 apple-inspired-pride-clock/src/script.js
 create mode 100644 apple-inspired-pride-clock/src/style.scss
 create mode 100644 apple-keynote-animation/README.markdown
 create mode 100644 apple-keynote-animation/dist/index.html
 create mode 100644 apple-keynote-animation/dist/script.js
 create mode 100644 apple-keynote-animation/dist/style.css
 create mode 100644 apple-keynote-animation/license.txt
 create mode 100644 apple-keynote-animation/src/index.html
 create mode 100644 apple-keynote-animation/src/script.js
 create mode 100644 apple-keynote-animation/src/style.scss
 create mode 100644 art-gallery/README.markdown
 create mode 100644 art-gallery/dist/index.html
 create mode 100644 art-gallery/dist/script.js
 create mode 100644 art-gallery/dist/style.css
 create mode 100644 art-gallery/license.txt
 create mode 100644 art-gallery/src/index.html
 create mode 100644 art-gallery/src/script.js
 create mode 100644 art-gallery/src/style.css
 create mode 100644 art-of-noise-29/README.markdown
 create mode 100644 art-of-noise-29/dist/index.html
 create mode 100644 art-of-noise-29/dist/script.js
 create mode 100644 art-of-noise-29/dist/style.css
 create mode 100644 art-of-noise-29/license.txt
 create mode 100644 art-of-noise-29/src/index.html
 create mode 100644 art-of-noise-29/src/script.js
 create mode 100644 art-of-noise-29/src/style.scss
 create mode 100644 ascii-corridor/README.markdown
 create mode 100644 ascii-corridor/dist/index.html
 create mode 100644 ascii-corridor/dist/script.js
 create mode 100644 ascii-corridor/dist/style.css
 create mode 100644 ascii-corridor/license.txt
 create mode 100644 ascii-corridor/src/index.html
 create mode 100644 ascii-corridor/src/script.js
 create mode 100644 ascii-corridor/src/style.sass
 create mode 100644 background-patterns/README.markdown
 create mode 100644 background-patterns/dist/index.html
 create mode 100644 background-patterns/dist/script.js
 create mode 100644 background-patterns/dist/style.css
 create mode 100644 background-patterns/license.txt
 create mode 100644 background-patterns/src/index.html
 create mode 100644 background-patterns/src/script.js
 create mode 100644 background-patterns/src/style.css
 create mode 100644 balanced-truncation/LICENSE.txt
 create mode 100644 balanced-truncation/README.md
 create mode 100644 balanced-truncation/dist/index.html
 create mode 100644 balanced-truncation/dist/style.css
 create mode 100644 balanced-truncation/src/index.html
 create mode 100644 balanced-truncation/src/style.css
 create mode 100644 banksyvalentine-s-day/README.markdown
 create mode 100644 banksyvalentine-s-day/dist/index.html
 create mode 100644 banksyvalentine-s-day/dist/script.js
 create mode 100644 banksyvalentine-s-day/dist/style.css
 create mode 100644 banksyvalentine-s-day/license.txt
 create mode 100644 banksyvalentine-s-day/src/index.html
 create mode 100644 banksyvalentine-s-day/src/script.js
 create mode 100644 banksyvalentine-s-day/src/style.css
 create mode 100644 based-on-moir-motion-by-takahiro-kurashima-san/README.markdown
 create mode 100644 based-on-moir-motion-by-takahiro-kurashima-san/dist/index.html
 create mode 100644 based-on-moir-motion-by-takahiro-kurashima-san/dist/script.js
 create mode 100644 based-on-moir-motion-by-takahiro-kurashima-san/dist/style.css
 create mode 100644 based-on-moir-motion-by-takahiro-kurashima-san/license.txt
 create mode 100644 based-on-moir-motion-by-takahiro-kurashima-san/src/index.pug
 create mode 100644 based-on-moir-motion-by-takahiro-kurashima-san/src/script.js
 create mode 100644 based-on-moir-motion-by-takahiro-kurashima-san/src/style.styl
 create mode 100644 baubudsgenerative-bauhaus-inspired-characters/README.markdown
 create mode 100644 baubudsgenerative-bauhaus-inspired-characters/dist/index.html
 create mode 100644 baubudsgenerative-bauhaus-inspired-characters/dist/script.js
 create mode 100644 baubudsgenerative-bauhaus-inspired-characters/dist/style.css
 create mode 100644 baubudsgenerative-bauhaus-inspired-characters/license.txt
 create mode 100644 baubudsgenerative-bauhaus-inspired-characters/src/index.html
 create mode 100644 baubudsgenerative-bauhaus-inspired-characters/src/script.js
 create mode 100644 baubudsgenerative-bauhaus-inspired-characters/src/style.css
 create mode 100644 bbc13-minutes-to-the-moon/README.markdown
 create mode 100644 bbc13-minutes-to-the-moon/dist/index.html
 create mode 100644 bbc13-minutes-to-the-moon/dist/script.js
 create mode 100644 bbc13-minutes-to-the-moon/dist/style.css
 create mode 100644 bbc13-minutes-to-the-moon/license.txt
 create mode 100644 bbc13-minutes-to-the-moon/src/index.html
 create mode 100644 bbc13-minutes-to-the-moon/src/script.js
 create mode 100644 bbc13-minutes-to-the-moon/src/style.scss
 create mode 100644 beating-heart/README.markdown
 create mode 100644 beating-heart/dist/index.html
 create mode 100644 beating-heart/dist/script.js
 create mode 100644 beating-heart/dist/style.css
 create mode 100644 beating-heart/license.txt
 create mode 100644 beating-heart/src/index.html
 create mode 100644 beating-heart/src/script.js
 create mode 100644 beating-heart/src/style.scss
 create mode 100644 best-css-3d-cuboid-ever/README.markdown
 create mode 100644 best-css-3d-cuboid-ever/dist/index.html
 create mode 100644 best-css-3d-cuboid-ever/dist/script.js
 create mode 100644 best-css-3d-cuboid-ever/dist/style.css
 create mode 100644 best-css-3d-cuboid-ever/dist/vyegypg.css
 create mode 100644 best-css-3d-cuboid-ever/license.txt
 create mode 100644 best-css-3d-cuboid-ever/src/index.pug
 create mode 100644 best-css-3d-cuboid-ever/src/script.js
 create mode 100644 best-css-3d-cuboid-ever/src/style.scss
 create mode 100644 best-css-3d-cuboid-ever/src/vyegypg.css
 create mode 100644 big-collection-houdini-animated-1-element-spinners/README.markdown
 create mode 100644 big-collection-houdini-animated-1-element-spinners/dist/index.html
 create mode 100644 big-collection-houdini-animated-1-element-spinners/dist/script.js
 create mode 100644 big-collection-houdini-animated-1-element-spinners/dist/style.css
 create mode 100644 big-collection-houdini-animated-1-element-spinners/license.txt
 create mode 100644 big-collection-houdini-animated-1-element-spinners/src/index.pug
 create mode 100644 big-collection-houdini-animated-1-element-spinners/src/script.babel
 create mode 100644 big-collection-houdini-animated-1-element-spinners/src/style.scss
 create mode 100644 bind-css-keyframe-animation-to-scroll/LICENSE.txt
 create mode 100644 bind-css-keyframe-animation-to-scroll/README.md
 create mode 100644 bind-css-keyframe-animation-to-scroll/dist/index.html
 create mode 100644 bind-css-keyframe-animation-to-scroll/dist/script.js
 create mode 100644 bind-css-keyframe-animation-to-scroll/dist/style.css
 create mode 100644 bind-css-keyframe-animation-to-scroll/src/index.html
 create mode 100644 bind-css-keyframe-animation-to-scroll/src/script.js
 create mode 100644 bind-css-keyframe-animation-to-scroll/src/style.css
 create mode 100644 blob-study/README.markdown
 create mode 100644 blob-study/dist/apxlmx.js
 create mode 100644 blob-study/dist/index.html
 create mode 100644 blob-study/dist/script.js
 create mode 100644 blob-study/dist/style.css
 create mode 100644 blob-study/license.txt
 create mode 100644 blob-study/src/apxlmx.js
 create mode 100644 blob-study/src/index.html
 create mode 100644 blob-study/src/script.babel
 create mode 100644 blob-study/src/style.css
 create mode 100644 blobby-deerthreejs-to-svg-render-gsap/README.markdown
 create mode 100644 blobby-deerthreejs-to-svg-render-gsap/dist/index.html
 create mode 100644 blobby-deerthreejs-to-svg-render-gsap/dist/script.js
 create mode 100644 blobby-deerthreejs-to-svg-render-gsap/dist/style.css
 create mode 100644 blobby-deerthreejs-to-svg-render-gsap/license.txt
 create mode 100644 blobby-deerthreejs-to-svg-render-gsap/src/index.html
 create mode 100644 blobby-deerthreejs-to-svg-render-gsap/src/script.js
 create mode 100644 blobby-deerthreejs-to-svg-render-gsap/src/style.scss
 create mode 100644 blobhow-to/README.markdown
 create mode 100644 blobhow-to/dist/index.html
 create mode 100644 blobhow-to/dist/script.js
 create mode 100644 blobhow-to/dist/style.css
 create mode 100644 blobhow-to/license.txt
 create mode 100644 blobhow-to/src/index.html
 create mode 100644 blobhow-to/src/script.js
 create mode 100644 blobhow-to/src/style.scss
 create mode 100644 blobs/README.markdown
 create mode 100644 blobs/dist/index.html
 create mode 100644 blobs/dist/script.js
 create mode 100644 blobs/dist/style.css
 create mode 100644 blobs/license.txt
 create mode 100644 blobs/src/index.html
 create mode 100644 blobs/src/script.js
 create mode 100644 blobs/src/style.css
 create mode 100644 bloom/README.markdown
 create mode 100644 bloom/dist/index.html
 create mode 100644 bloom/dist/script.js
 create mode 100644 bloom/dist/style.css
 create mode 100644 bloom/license.txt
 create mode 100644 bloom/src/index.html
 create mode 100644 bloom/src/script.js
 create mode 100644 bloom/src/style.scss
 create mode 100644 bongo-cat-codes-2jamming/README.markdown
 create mode 100644 bongo-cat-codes-2jamming/dist/index.html
 create mode 100644 bongo-cat-codes-2jamming/dist/script.js
 create mode 100644 bongo-cat-codes-2jamming/dist/style.css
 create mode 100644 bongo-cat-codes-2jamming/license.txt
 create mode 100644 bongo-cat-codes-2jamming/src/index.pug
 create mode 100644 bongo-cat-codes-2jamming/src/script.babel
 create mode 100644 bongo-cat-codes-2jamming/src/style.scss
 create mode 100644 bongo-cat-codes/README.markdown
 create mode 100644 bongo-cat-codes/dist/index.html
 create mode 100644 bongo-cat-codes/dist/script.js
 create mode 100644 bongo-cat-codes/dist/style.css
 create mode 100644 bongo-cat-codes/license.txt
 create mode 100644 bongo-cat-codes/src/index.pug
 create mode 100644 bongo-cat-codes/src/script.babel
 create mode 100644 bongo-cat-codes/src/style.scss
 create mode 100644 book-store-ui/LICENSE.txt
 create mode 100644 book-store-ui/README.markdown
 create mode 100644 book-store-ui/README.md
 create mode 100644 book-store-ui/dist/index.html
 create mode 100644 book-store-ui/dist/style.css
 create mode 100644 book-store-ui/license.txt
 create mode 100644 book-store-ui/src/index.html
 create mode 100644 book-store-ui/src/style.scss
 create mode 100644 bouncing-bunnies-animation-delay-lesson/README.markdown
 create mode 100644 bouncing-bunnies-animation-delay-lesson/dist/index.html
 create mode 100644 bouncing-bunnies-animation-delay-lesson/dist/script.js
 create mode 100644 bouncing-bunnies-animation-delay-lesson/dist/style.css
 create mode 100644 bouncing-bunnies-animation-delay-lesson/license.txt
 create mode 100644 bouncing-bunnies-animation-delay-lesson/src/index.pug
 create mode 100644 bouncing-bunnies-animation-delay-lesson/src/script.babel
 create mode 100644 bouncing-bunnies-animation-delay-lesson/src/style.styl
 create mode 100644 box-model/README.markdown
 create mode 100644 box-model/dist/index.html
 create mode 100644 box-model/dist/script.js
 create mode 100644 box-model/dist/style.css
 create mode 100644 box-model/license.txt
 create mode 100644 box-model/src/index.html
 create mode 100644 box-model/src/script.babel
 create mode 100644 box-model/src/style.css
 create mode 100644 break-out-of-parent-element-indented/README.markdown
 create mode 100644 break-out-of-parent-element-indented/dist/index.html
 create mode 100644 break-out-of-parent-element-indented/dist/style.css
 create mode 100644 break-out-of-parent-element-indented/license.txt
 create mode 100644 break-out-of-parent-element-indented/src/index.html
 create mode 100644 break-out-of-parent-element-indented/src/style.scss
 create mode 100644 breathe/README.markdown
 create mode 100644 breathe/dist/index.html
 create mode 100644 breathe/dist/script.js
 create mode 100644 breathe/dist/style.css
 create mode 100644 breathe/license.txt
 create mode 100644 breathe/src/index.html
 create mode 100644 breathe/src/script.babel
 create mode 100644 breathe/src/style.scss
 create mode 100644 bricks-darkcss-doodle/README.markdown
 create mode 100644 bricks-darkcss-doodle/dist/index.html
 create mode 100644 bricks-darkcss-doodle/dist/script.js
 create mode 100644 bricks-darkcss-doodle/dist/style.css
 create mode 100644 bricks-darkcss-doodle/license.txt
 create mode 100644 bricks-darkcss-doodle/src/index.html
 create mode 100644 bricks-darkcss-doodle/src/script.babel
 create mode 100644 bricks-darkcss-doodle/src/style.scss
 create mode 100644 brutalism/README.markdown
 create mode 100644 brutalism/dist/index.html
 create mode 100644 brutalism/dist/style.css
 create mode 100644 brutalism/license.txt
 create mode 100644 brutalism/src/index.html
 create mode 100644 brutalism/src/style.scss
 create mode 100644 bubble-sort-colors/README.markdown
 create mode 100644 bubble-sort-colors/dist/index.html
 create mode 100644 bubble-sort-colors/dist/script.js
 create mode 100644 bubble-sort-colors/dist/style.css
 create mode 100644 bubble-sort-colors/license.txt
 create mode 100644 bubble-sort-colors/src/index.html
 create mode 100644 bubble-sort-colors/src/script.js
 create mode 100644 bubble-sort-colors/src/style.css
 create mode 100644 bubblegum-on-hover/README.markdown
 create mode 100644 bubblegum-on-hover/dist/index.html
 create mode 100644 bubblegum-on-hover/dist/script.js
 create mode 100644 bubblegum-on-hover/dist/style.css
 create mode 100644 bubblegum-on-hover/license.txt
 create mode 100644 bubblegum-on-hover/src/index.html
 create mode 100644 bubblegum-on-hover/src/script.js
 create mode 100644 bubblegum-on-hover/src/style.scss
 create mode 100644 bug-report-d20/README.markdown
 create mode 100644 bug-report-d20/dist/index.html
 create mode 100644 bug-report-d20/dist/script.js
 create mode 100644 bug-report-d20/dist/style.css
 create mode 100644 bug-report-d20/license.txt
 create mode 100644 bug-report-d20/src/index.html
 create mode 100644 bug-report-d20/src/script.babel
 create mode 100644 bug-report-d20/src/style.scss
 create mode 100644 building-a-realtime-photoshop/README.markdown
 create mode 100644 building-a-realtime-photoshop/dist/index.html
 create mode 100644 building-a-realtime-photoshop/dist/script.js
 create mode 100644 building-a-realtime-photoshop/dist/style.css
 create mode 100644 building-a-realtime-photoshop/license.txt
 create mode 100644 building-a-realtime-photoshop/src/index.html
 create mode 100644 building-a-realtime-photoshop/src/script.js
 create mode 100644 building-a-realtime-photoshop/src/style.css
 create mode 100644 button-and-link-with-no-labelling-linthtmlwithcss/README.markdown
 create mode 100644 button-and-link-with-no-labelling-linthtmlwithcss/dist/index.html
 create mode 100644 button-and-link-with-no-labelling-linthtmlwithcss/dist/style.css
 create mode 100644 button-and-link-with-no-labelling-linthtmlwithcss/license.txt
 create mode 100644 button-and-link-with-no-labelling-linthtmlwithcss/src/index.html
 create mode 100644 button-and-link-with-no-labelling-linthtmlwithcss/src/style.css
 create mode 100644 c3-color-contrast-checker/README.markdown
 create mode 100644 c3-color-contrast-checker/dist/index.html
 create mode 100644 c3-color-contrast-checker/dist/script.js
 create mode 100644 c3-color-contrast-checker/dist/style.css
 create mode 100644 c3-color-contrast-checker/license.txt
 create mode 100644 c3-color-contrast-checker/src/index.html
 create mode 100644 c3-color-contrast-checker/src/script.js
 create mode 100644 c3-color-contrast-checker/src/style.css
 create mode 100644 cacheable-3-colour-svgs-via-use/README.markdown
 create mode 100644 cacheable-3-colour-svgs-via-use/dist/index.html
 create mode 100644 cacheable-3-colour-svgs-via-use/dist/script.js
 create mode 100644 cacheable-3-colour-svgs-via-use/dist/style.css
 create mode 100644 cacheable-3-colour-svgs-via-use/license.txt
 create mode 100644 cacheable-3-colour-svgs-via-use/src/index.slim
 create mode 100644 cacheable-3-colour-svgs-via-use/src/script.js
 create mode 100644 cacheable-3-colour-svgs-via-use/src/style.scss
 create mode 100644 cafe-menu-interactive-codepen-challenge/README.markdown
 create mode 100644 cafe-menu-interactive-codepen-challenge/dist/index.html
 create mode 100644 cafe-menu-interactive-codepen-challenge/dist/style.css
 create mode 100644 cafe-menu-interactive-codepen-challenge/license.txt
 create mode 100644 cafe-menu-interactive-codepen-challenge/src/index.html
 create mode 100644 cafe-menu-interactive-codepen-challenge/src/style.css
 create mode 100644 calm-in-the-iridescence/README.markdown
 create mode 100644 calm-in-the-iridescence/dist/index.html
 create mode 100644 calm-in-the-iridescence/dist/script.js
 create mode 100644 calm-in-the-iridescence/dist/style.css
 create mode 100644 calm-in-the-iridescence/license.txt
 create mode 100644 calm-in-the-iridescence/src/index.html
 create mode 100644 calm-in-the-iridescence/src/script.babel
 create mode 100644 calm-in-the-iridescence/src/style.scss
 create mode 100644 candy-cane/README.markdown
 create mode 100644 candy-cane/dist/index.html
 create mode 100644 candy-cane/dist/script.js
 create mode 100644 candy-cane/dist/style.css
 create mode 100644 candy-cane/license.txt
 create mode 100644 candy-cane/src/index.html
 create mode 100644 candy-cane/src/script.js
 create mode 100644 candy-cane/src/style.css
 create mode 100644 candy-stacker/README.markdown
 create mode 100644 candy-stacker/dist/index.html
 create mode 100644 candy-stacker/dist/script.js
 create mode 100644 candy-stacker/dist/style.css
 create mode 100644 candy-stacker/license.txt
 create mode 100644 candy-stacker/src/index.html
 create mode 100644 candy-stacker/src/script.babel
 create mode 100644 candy-stacker/src/style.less
 create mode 100644 canvas-image-hover-interaction/README.markdown
 create mode 100644 canvas-image-hover-interaction/dist/index.html
 create mode 100644 canvas-image-hover-interaction/dist/script.js
 create mode 100644 canvas-image-hover-interaction/dist/style.css
 create mode 100644 canvas-image-hover-interaction/license.txt
 create mode 100644 canvas-image-hover-interaction/src/index.html
 create mode 100644 canvas-image-hover-interaction/src/script.js
 create mode 100644 canvas-image-hover-interaction/src/style.scss
 create mode 100644 card-hover-interactions/README.markdown
 create mode 100644 card-hover-interactions/dist/index.html
 create mode 100644 card-hover-interactions/dist/style.css
 create mode 100644 card-hover-interactions/license.txt
 create mode 100644 card-hover-interactions/src/index.pug
 create mode 100644 card-hover-interactions/src/style.scss
 create mode 100644 card-interactions-with-gsap/README.markdown
 create mode 100644 card-interactions-with-gsap/dist/index.html
 create mode 100644 card-interactions-with-gsap/dist/script.js
 create mode 100644 card-interactions-with-gsap/dist/style.css
 create mode 100644 card-interactions-with-gsap/license.txt
 create mode 100644 card-interactions-with-gsap/src/index.html
 create mode 100644 card-interactions-with-gsap/src/script.js
 create mode 100644 card-interactions-with-gsap/src/style.css
 create mode 100644 cards-with-simple-stripe-backgrounds/README.markdown
 create mode 100644 cards-with-simple-stripe-backgrounds/dist/index.html
 create mode 100644 cards-with-simple-stripe-backgrounds/dist/style.css
 create mode 100644 cards-with-simple-stripe-backgrounds/license.txt
 create mode 100644 cards-with-simple-stripe-backgrounds/src/index.html
 create mode 100644 cards-with-simple-stripe-backgrounds/src/style.scss
 create mode 100644 carousel-lock-interface/README.markdown
 create mode 100644 carousel-lock-interface/dist/index.html
 create mode 100644 carousel-lock-interface/dist/script.js
 create mode 100644 carousel-lock-interface/dist/style.css
 create mode 100644 carousel-lock-interface/license.txt
 create mode 100644 carousel-lock-interface/src/index.html
 create mode 100644 carousel-lock-interface/src/script.babel
 create mode 100644 carousel-lock-interface/src/style.scss
 create mode 100644 casio-pt-1-with-html-css-js/README.markdown
 create mode 100644 casio-pt-1-with-html-css-js/dist/index.html
 create mode 100644 casio-pt-1-with-html-css-js/dist/script.js
 create mode 100644 casio-pt-1-with-html-css-js/dist/style.css
 create mode 100644 casio-pt-1-with-html-css-js/license.txt
 create mode 100644 casio-pt-1-with-html-css-js/src/index.html
 create mode 100644 casio-pt-1-with-html-css-js/src/script.babel
 create mode 100644 casio-pt-1-with-html-css-js/src/style.css
 create mode 100644 casiopt-1-css/README.markdown
 create mode 100644 casiopt-1-css/dist/index.html
 create mode 100644 casiopt-1-css/dist/style.css
 create mode 100644 casiopt-1-css/license.txt
 create mode 100644 casiopt-1-css/src/index.html
 create mode 100644 casiopt-1-css/src/style.css
 create mode 100644 ceramic-looped/README.markdown
 create mode 100644 ceramic-looped/dist/index.html
 create mode 100644 ceramic-looped/dist/script.js
 create mode 100644 ceramic-looped/dist/style.css
 create mode 100644 ceramic-looped/license.txt
 create mode 100644 ceramic-looped/src/index.html
 create mode 100644 ceramic-looped/src/script.babel
 create mode 100644 ceramic-looped/src/style.scss
 create mode 100644 checkbox-group-styled-as-tiles/README.markdown
 create mode 100644 checkbox-group-styled-as-tiles/dist/index.html
 create mode 100644 checkbox-group-styled-as-tiles/dist/script.js
 create mode 100644 checkbox-group-styled-as-tiles/dist/style.css
 create mode 100644 checkbox-group-styled-as-tiles/license.txt
 create mode 100644 checkbox-group-styled-as-tiles/src/index.html
 create mode 100644 checkbox-group-styled-as-tiles/src/script.js
 create mode 100644 checkbox-group-styled-as-tiles/src/style.scss
 create mode 100644 checkbox-switch-input-element-only-css-crossbrowser/README.markdown
 create mode 100644 checkbox-switch-input-element-only-css-crossbrowser/dist/index.html
 create mode 100644 checkbox-switch-input-element-only-css-crossbrowser/dist/style.css
 create mode 100644 checkbox-switch-input-element-only-css-crossbrowser/license.txt
 create mode 100644 checkbox-switch-input-element-only-css-crossbrowser/src/index.html
 create mode 100644 checkbox-switch-input-element-only-css-crossbrowser/src/style.css
 create mode 100644 checklist-animation/README.markdown
 create mode 100644 checklist-animation/dist/index.html
 create mode 100644 checklist-animation/dist/style.css
 create mode 100644 checklist-animation/license.txt
 create mode 100644 checklist-animation/src/index.html
 create mode 100644 checklist-animation/src/style.scss
 create mode 100644 christmas-cannon/LICENSE.txt
 create mode 100644 christmas-cannon/README.md
 create mode 100644 christmas-cannon/dist/index.html
 create mode 100644 christmas-cannon/dist/script.js
 create mode 100644 christmas-cannon/dist/style.css
 create mode 100644 christmas-cannon/src/index.html
 create mode 100644 christmas-cannon/src/script.babel
 create mode 100644 christmas-cannon/src/style.scss
 create mode 100644 city/README.markdown
 create mode 100644 city/dist/index.html
 create mode 100644 city/dist/script.js
 create mode 100644 city/dist/style.css
 create mode 100644 city/license.txt
 create mode 100644 city/src/index.html
 create mode 100644 city/src/script.js
 create mode 100644 city/src/style.css
 create mode 100644 claymorphism/README.markdown
 create mode 100644 claymorphism/dist/index.html
 create mode 100644 claymorphism/dist/style.css
 create mode 100644 claymorphism/license.txt
 create mode 100644 claymorphism/src/index.html
 create mode 100644 claymorphism/src/style.css
 create mode 100644 clip-path-theme-switch-backdrop-filter-version/LICENSE.txt
 create mode 100644 clip-path-theme-switch-backdrop-filter-version/README.md
 create mode 100644 clip-path-theme-switch-backdrop-filter-version/dist/index.html
 create mode 100644 clip-path-theme-switch-backdrop-filter-version/dist/script.js
 create mode 100644 clip-path-theme-switch-backdrop-filter-version/dist/style.css
 create mode 100644 clip-path-theme-switch-backdrop-filter-version/src/index.html
 create mode 100644 clip-path-theme-switch-backdrop-filter-version/src/script.js
 create mode 100644 clip-path-theme-switch-backdrop-filter-version/src/style.css
 create mode 100644 clipped-image-reveal-on-hover/README.markdown
 create mode 100644 clipped-image-reveal-on-hover/dist/index.html
 create mode 100644 clipped-image-reveal-on-hover/dist/script.js
 create mode 100644 clipped-image-reveal-on-hover/dist/style.css
 create mode 100644 clipped-image-reveal-on-hover/license.txt
 create mode 100644 clipped-image-reveal-on-hover/src/index.html
 create mode 100644 clipped-image-reveal-on-hover/src/script.js
 create mode 100644 clipped-image-reveal-on-hover/src/style.scss
 create mode 100644 codepen-challenge-knockout-text/README.markdown
 create mode 100644 codepen-challenge-knockout-text/dist/index.html
 create mode 100644 codepen-challenge-knockout-text/dist/script.js
 create mode 100644 codepen-challenge-knockout-text/dist/style.css
 create mode 100644 codepen-challenge-knockout-text/license.txt
 create mode 100644 codepen-challenge-knockout-text/src/index.html
 create mode 100644 codepen-challenge-knockout-text/src/script.js
 create mode 100644 codepen-challenge-knockout-text/src/style.css
 create mode 100644 codevember-12/README.markdown
 create mode 100644 codevember-12/dist/index.html
 create mode 100644 codevember-12/dist/script.js
 create mode 100644 codevember-12/dist/style.css
 create mode 100644 codevember-12/license.txt
 create mode 100644 codevember-12/src/index.html
 create mode 100644 codevember-12/src/script.babel
 create mode 100644 codevember-12/src/style.scss
 create mode 100644 codevember-29-hypnotic-neon-lights/README.markdown
 create mode 100644 codevember-29-hypnotic-neon-lights/dist/index.html
 create mode 100644 codevember-29-hypnotic-neon-lights/dist/script.js
 create mode 100644 codevember-29-hypnotic-neon-lights/dist/style.css
 create mode 100644 codevember-29-hypnotic-neon-lights/license.txt
 create mode 100644 codevember-29-hypnotic-neon-lights/src/index.html
 create mode 100644 codevember-29-hypnotic-neon-lights/src/script.js
 create mode 100644 codevember-29-hypnotic-neon-lights/src/style.css
 create mode 100644 codevember-30-2021-pure-css-order-vs-chaos/README.markdown
 create mode 100644 codevember-30-2021-pure-css-order-vs-chaos/dist/index.html
 create mode 100644 codevember-30-2021-pure-css-order-vs-chaos/dist/style.css
 create mode 100644 codevember-30-2021-pure-css-order-vs-chaos/license.txt
 create mode 100644 codevember-30-2021-pure-css-order-vs-chaos/src/index.pug
 create mode 100644 codevember-30-2021-pure-css-order-vs-chaos/src/style.scss
 create mode 100644 codevember-9-electric-hover-effect/README.markdown
 create mode 100644 codevember-9-electric-hover-effect/dist/index.html
 create mode 100644 codevember-9-electric-hover-effect/dist/script.js
 create mode 100644 codevember-9-electric-hover-effect/dist/style.css
 create mode 100644 codevember-9-electric-hover-effect/license.txt
 create mode 100644 codevember-9-electric-hover-effect/src/index.html
 create mode 100644 codevember-9-electric-hover-effect/src/script.js
 create mode 100644 codevember-9-electric-hover-effect/src/style.css
 create mode 100644 codevember-9/README.markdown
 create mode 100644 codevember-9/dist/index.html
 create mode 100644 codevember-9/dist/script.js
 create mode 100644 codevember-9/dist/style.css
 create mode 100644 codevember-9/license.txt
 create mode 100644 codevember-9/src/index.html
 create mode 100644 codevember-9/src/script.js
 create mode 100644 codevember-9/src/style.css
 create mode 100644 codevember11ladder-illusion/README.markdown
 create mode 100644 codevember11ladder-illusion/dist/index.html
 create mode 100644 codevember11ladder-illusion/dist/style.css
 create mode 100644 codevember11ladder-illusion/license.txt
 create mode 100644 codevember11ladder-illusion/src/index.pug
 create mode 100644 codevember11ladder-illusion/src/style.scss
 create mode 100644 cogs-with-variables/README.markdown
 create mode 100644 cogs-with-variables/dist/index.html
 create mode 100644 cogs-with-variables/dist/style.css
 create mode 100644 cogs-with-variables/license.txt
 create mode 100644 cogs-with-variables/src/index.html
 create mode 100644 cogs-with-variables/src/style.css
 create mode 100644 color-palettes/README.markdown
 create mode 100644 color-palettes/dist/index.html
 create mode 100644 color-palettes/dist/style.css
 create mode 100644 color-palettes/license.txt
 create mode 100644 color-palettes/src/index.pug
 create mode 100644 color-palettes/src/style.scss
 create mode 100644 color-search-engine-w-react-gsap/README.markdown
 create mode 100644 color-search-engine-w-react-gsap/dist/index.html
 create mode 100644 color-search-engine-w-react-gsap/dist/script.js
 create mode 100644 color-search-engine-w-react-gsap/dist/style.css
 create mode 100644 color-search-engine-w-react-gsap/license.txt
 create mode 100644 color-search-engine-w-react-gsap/src/index.pug
 create mode 100644 color-search-engine-w-react-gsap/src/script.babel
 create mode 100644 color-search-engine-w-react-gsap/src/style.styl
 create mode 100644 color-standards-and-color-nomenclature/LICENSE.txt
 create mode 100644 color-standards-and-color-nomenclature/README.md
 create mode 100644 color-standards-and-color-nomenclature/dist/index.html
 create mode 100644 color-standards-and-color-nomenclature/dist/script.js
 create mode 100644 color-standards-and-color-nomenclature/dist/style.css
 create mode 100644 color-standards-and-color-nomenclature/src/index.html
 create mode 100644 color-standards-and-color-nomenclature/src/script.js
 create mode 100644 color-standards-and-color-nomenclature/src/style.scss
 create mode 100644 color-wave/README.markdown
 create mode 100644 color-wave/dist/index.html
 create mode 100644 color-wave/dist/script.js
 create mode 100644 color-wave/dist/style.css
 create mode 100644 color-wave/license.txt
 create mode 100644 color-wave/src/index.html
 create mode 100644 color-wave/src/script.js
 create mode 100644 color-wave/src/style.scss
 create mode 100644 colorful-distance-field-shaderanydayshaders-13/README.markdown
 create mode 100644 colorful-distance-field-shaderanydayshaders-13/dist/index.html
 create mode 100644 colorful-distance-field-shaderanydayshaders-13/dist/script.js
 create mode 100644 colorful-distance-field-shaderanydayshaders-13/dist/style.css
 create mode 100644 colorful-distance-field-shaderanydayshaders-13/license.txt
 create mode 100644 colorful-distance-field-shaderanydayshaders-13/src/index.html
 create mode 100644 colorful-distance-field-shaderanydayshaders-13/src/script.js
 create mode 100644 colorful-distance-field-shaderanydayshaders-13/src/style.css
 create mode 100644 colorpencilscss-doodle/README.markdown
 create mode 100644 colorpencilscss-doodle/dist/index.html
 create mode 100644 colorpencilscss-doodle/dist/script.js
 create mode 100644 colorpencilscss-doodle/dist/style.css
 create mode 100644 colorpencilscss-doodle/license.txt
 create mode 100644 colorpencilscss-doodle/src/index.html
 create mode 100644 colorpencilscss-doodle/src/script.babel
 create mode 100644 colorpencilscss-doodle/src/style.scss
 create mode 100644 commodore-logo-original-design-sketch-reproduction/README.markdown
 create mode 100644 commodore-logo-original-design-sketch-reproduction/dist/index.html
 create mode 100644 commodore-logo-original-design-sketch-reproduction/dist/style.css
 create mode 100644 commodore-logo-original-design-sketch-reproduction/license.txt
 create mode 100644 commodore-logo-original-design-sketch-reproduction/src/index.html
 create mode 100644 commodore-logo-original-design-sketch-reproduction/src/style.scss
 create mode 100644 confetti-button/README.markdown
 create mode 100644 confetti-button/dist/index.html
 create mode 100644 confetti-button/dist/script.js
 create mode 100644 confetti-button/dist/style.css
 create mode 100644 confetti-button/license.txt
 create mode 100644 confetti-button/src/index.html
 create mode 100644 confetti-button/src/script.babel
 create mode 100644 confetti-button/src/style.css
 create mode 100644 confluent-flow/README.markdown
 create mode 100644 confluent-flow/dist/index.html
 create mode 100644 confluent-flow/dist/script.js
 create mode 100644 confluent-flow/dist/style.css
 create mode 100644 confluent-flow/license.txt
 create mode 100644 confluent-flow/src/index.pug
 create mode 100644 confluent-flow/src/script.js
 create mode 100644 confluent-flow/src/style.scss
 create mode 100644 conic-gradient-in-svg/LICENSE.txt
 create mode 100644 conic-gradient-in-svg/README.md
 create mode 100644 conic-gradient-in-svg/dist/index.html
 create mode 100644 conic-gradient-in-svg/dist/style.css
 create mode 100644 conic-gradient-in-svg/src/index.html
 create mode 100644 conic-gradient-in-svg/src/style.css
 create mode 100644 conic-gradients-css-masks-no-ff/README.markdown
 create mode 100644 conic-gradients-css-masks-no-ff/dist/index.html
 create mode 100644 conic-gradients-css-masks-no-ff/dist/style.css
 create mode 100644 conic-gradients-css-masks-no-ff/license.txt
 create mode 100644 conic-gradients-css-masks-no-ff/src/index.html
 create mode 100644 conic-gradients-css-masks-no-ff/src/style.scss
 create mode 100644 container-query-bookstore/README.markdown
 create mode 100644 container-query-bookstore/dist/index.html
 create mode 100644 container-query-bookstore/dist/script.js
 create mode 100644 container-query-bookstore/dist/style.css
 create mode 100644 container-query-bookstore/license.txt
 create mode 100644 container-query-bookstore/src/index.html
 create mode 100644 container-query-bookstore/src/script.js
 create mode 100644 container-query-bookstore/src/style.css
 create mode 100644 context-menu-with-feather-icons/README.markdown
 create mode 100644 context-menu-with-feather-icons/dist/index.html
 create mode 100644 context-menu-with-feather-icons/dist/script.js
 create mode 100644 context-menu-with-feather-icons/dist/style.css
 create mode 100644 context-menu-with-feather-icons/license.txt
 create mode 100644 context-menu-with-feather-icons/src/index.html
 create mode 100644 context-menu-with-feather-icons/src/script.js
 create mode 100644 context-menu-with-feather-icons/src/style.scss
 create mode 100644 copy-table-as-csv-web-component/README.markdown
 create mode 100644 copy-table-as-csv-web-component/dist/index.html
 create mode 100644 copy-table-as-csv-web-component/dist/script.js
 create mode 100644 copy-table-as-csv-web-component/dist/style.css
 create mode 100644 copy-table-as-csv-web-component/license.txt
 create mode 100644 copy-table-as-csv-web-component/src/index.html
 create mode 100644 copy-table-as-csv-web-component/src/script.js
 create mode 100644 copy-table-as-csv-web-component/src/style.scss
 create mode 100644 countdown-to-new-year/README.markdown
 create mode 100644 countdown-to-new-year/dist/index.html
 create mode 100644 countdown-to-new-year/dist/script.js
 create mode 100644 countdown-to-new-year/dist/style.css
 create mode 100644 countdown-to-new-year/license.txt
 create mode 100644 countdown-to-new-year/src/index.pug
 create mode 100644 countdown-to-new-year/src/script.js
 create mode 100644 countdown-to-new-year/src/style.css
 create mode 100644 cpc-dropdown-slots/README.markdown
 create mode 100644 cpc-dropdown-slots/dist/index.html
 create mode 100644 cpc-dropdown-slots/dist/script.js
 create mode 100644 cpc-dropdown-slots/dist/style.css
 create mode 100644 cpc-dropdown-slots/license.txt
 create mode 100644 cpc-dropdown-slots/src/index.pug
 create mode 100644 cpc-dropdown-slots/src/script.ts
 create mode 100644 cpc-dropdown-slots/src/style.scss
 create mode 100644 cqw-font-sizes/LICENSE.txt
 create mode 100644 cqw-font-sizes/README.md
 create mode 100644 cqw-font-sizes/dist/index.html
 create mode 100644 cqw-font-sizes/dist/style.css
 create mode 100644 cqw-font-sizes/src/index.html
 create mode 100644 cqw-font-sizes/src/style.css
 create mode 100644 crazy-4/README.markdown
 create mode 100644 crazy-4/dist/index.html
 create mode 100644 crazy-4/dist/script.js
 create mode 100644 crazy-4/dist/style.css
 create mode 100644 crazy-4/license.txt
 create mode 100644 crazy-4/src/index.html
 create mode 100644 crazy-4/src/script.js
 create mode 100644 crazy-4/src/style.css
 create mode 100644 crossing-walls/README.markdown
 create mode 100644 crossing-walls/dist/index.html
 create mode 100644 crossing-walls/dist/script.js
 create mode 100644 crossing-walls/dist/style.css
 create mode 100644 crossing-walls/license.txt
 create mode 100644 crossing-walls/src/index.html
 create mode 100644 crossing-walls/src/script.js
 create mode 100644 crossing-walls/src/style.css
 create mode 100644 crystal-mountains/README.markdown
 create mode 100644 crystal-mountains/dist/index.html
 create mode 100644 crystal-mountains/dist/script.js
 create mode 100644 crystal-mountains/dist/style.css
 create mode 100644 crystal-mountains/license.txt
 create mode 100644 crystal-mountains/src/index.pug
 create mode 100644 crystal-mountains/src/script.js
 create mode 100644 crystal-mountains/src/style.styl
 create mode 100644 css-artsphere/README.markdown
 create mode 100644 css-artsphere/dist/index.html
 create mode 100644 css-artsphere/dist/style.css
 create mode 100644 css-artsphere/license.txt
 create mode 100644 css-artsphere/src/index.html
 create mode 100644 css-artsphere/src/style.scss
 create mode 100644 css-clip-path-editor/README.markdown
 create mode 100644 css-clip-path-editor/dist/index.html
 create mode 100644 css-clip-path-editor/dist/script.js
 create mode 100644 css-clip-path-editor/dist/style.css
 create mode 100644 css-clip-path-editor/license.txt
 create mode 100644 css-clip-path-editor/src/index.html
 create mode 100644 css-clip-path-editor/src/script.js
 create mode 100644 css-clip-path-editor/src/style.css
 create mode 100644 css-color-rings/README.markdown
 create mode 100644 css-color-rings/dist/index.html
 create mode 100644 css-color-rings/dist/style.css
 create mode 100644 css-color-rings/license.txt
 create mode 100644 css-color-rings/src/index.pug
 create mode 100644 css-color-rings/src/style.styl
 create mode 100644 css-dna/README.markdown
 create mode 100644 css-dna/dist/index.html
 create mode 100644 css-dna/dist/script.js
 create mode 100644 css-dna/dist/style.css
 create mode 100644 css-dna/license.txt
 create mode 100644 css-dna/src/index.pug
 create mode 100644 css-dna/src/script.js
 create mode 100644 css-dna/src/style.css
 create mode 100644 css-dominoes/README.markdown
 create mode 100644 css-dominoes/dist/index.html
 create mode 100644 css-dominoes/dist/style.css
 create mode 100644 css-dominoes/license.txt
 create mode 100644 css-dominoes/src/index.html
 create mode 100644 css-dominoes/src/style.scss
 create mode 100644 css-filter-cards/README.markdown
 create mode 100644 css-filter-cards/dist/index.html
 create mode 100644 css-filter-cards/dist/style.css
 create mode 100644 css-filter-cards/license.txt
 create mode 100644 css-filter-cards/src/index.html
 create mode 100644 css-filter-cards/src/style.css
 create mode 100644 css-filter-glitch/README.markdown
 create mode 100644 css-filter-glitch/dist/index.html
 create mode 100644 css-filter-glitch/dist/style.css
 create mode 100644 css-filter-glitch/license.txt
 create mode 100644 css-filter-glitch/src/index.html
 create mode 100644 css-filter-glitch/src/style.scss
 create mode 100644 css-filter-text-animation/README.markdown
 create mode 100644 css-filter-text-animation/dist/index.html
 create mode 100644 css-filter-text-animation/dist/style.css
 create mode 100644 css-filter-text-animation/license.txt
 create mode 100644 css-filter-text-animation/src/index.html
 create mode 100644 css-filter-text-animation/src/style.scss
 create mode 100644 css-grid-card-variations/README.markdown
 create mode 100644 css-grid-card-variations/dist/index.html
 create mode 100644 css-grid-card-variations/dist/style.css
 create mode 100644 css-grid-card-variations/license.txt
 create mode 100644 css-grid-card-variations/src/index.pug
 create mode 100644 css-grid-card-variations/src/style.scss
 create mode 100644 css-grid-newspaper-layout/README.markdown
 create mode 100644 css-grid-newspaper-layout/dist/index.html
 create mode 100644 css-grid-newspaper-layout/dist/script.js
 create mode 100644 css-grid-newspaper-layout/dist/style.css
 create mode 100644 css-grid-newspaper-layout/license.txt
 create mode 100644 css-grid-newspaper-layout/src/index.pug
 create mode 100644 css-grid-newspaper-layout/src/script.js
 create mode 100644 css-grid-newspaper-layout/src/style.scss
 create mode 100644 css-grid-swiss-style-typography-poster-07/README.markdown
 create mode 100644 css-grid-swiss-style-typography-poster-07/dist/index.html
 create mode 100644 css-grid-swiss-style-typography-poster-07/dist/script.js
 create mode 100644 css-grid-swiss-style-typography-poster-07/dist/style.css
 create mode 100644 css-grid-swiss-style-typography-poster-07/license.txt
 create mode 100644 css-grid-swiss-style-typography-poster-07/src/index.html
 create mode 100644 css-grid-swiss-style-typography-poster-07/src/script.js
 create mode 100644 css-grid-swiss-style-typography-poster-07/src/style.scss
 create mode 100644 css-grid-template-builder/README.markdown
 create mode 100644 css-grid-template-builder/dist/index.html
 create mode 100644 css-grid-template-builder/dist/script.js
 create mode 100644 css-grid-template-builder/dist/style.css
 create mode 100644 css-grid-template-builder/license.txt
 create mode 100644 css-grid-template-builder/src/index.html
 create mode 100644 css-grid-template-builder/src/script.babel
 create mode 100644 css-grid-template-builder/src/style.css
 create mode 100644 css-hexagon-grid/README.markdown
 create mode 100644 css-hexagon-grid/dist/index.html
 create mode 100644 css-hexagon-grid/dist/style.css
 create mode 100644 css-hexagon-grid/license.txt
 create mode 100644 css-hexagon-grid/src/index.html
 create mode 100644 css-hexagon-grid/src/style.css
 create mode 100644 css-houdinipaint-api-generative-fleck-patterns/README.markdown
 create mode 100644 css-houdinipaint-api-generative-fleck-patterns/dist/index.html
 create mode 100644 css-houdinipaint-api-generative-fleck-patterns/dist/script.js
 create mode 100644 css-houdinipaint-api-generative-fleck-patterns/dist/style.css
 create mode 100644 css-houdinipaint-api-generative-fleck-patterns/license.txt
 create mode 100644 css-houdinipaint-api-generative-fleck-patterns/src/index.html
 create mode 100644 css-houdinipaint-api-generative-fleck-patterns/src/script.js
 create mode 100644 css-houdinipaint-api-generative-fleck-patterns/src/style.css
 create mode 100644 css-is-awesome-css-motion-path/README.markdown
 create mode 100644 css-is-awesome-css-motion-path/dist/index.html
 create mode 100644 css-is-awesome-css-motion-path/dist/style.css
 create mode 100644 css-is-awesome-css-motion-path/license.txt
 create mode 100644 css-is-awesome-css-motion-path/src/index.html
 create mode 100644 css-is-awesome-css-motion-path/src/style.scss
 create mode 100644 css-is-awesomevariable-fonts-edition/README.markdown
 create mode 100644 css-is-awesomevariable-fonts-edition/dist/BarlowGX.ttf
 create mode 100644 css-is-awesomevariable-fonts-edition/dist/index.html
 create mode 100644 css-is-awesomevariable-fonts-edition/dist/style.css
 create mode 100644 css-is-awesomevariable-fonts-edition/license.txt
 create mode 100644 css-is-awesomevariable-fonts-edition/src/BarlowGX.ttf
 create mode 100644 css-is-awesomevariable-fonts-edition/src/index.html
 create mode 100644 css-is-awesomevariable-fonts-edition/src/style.scss
 create mode 100644 css-neon-button-makerwith-css-variables/README.markdown
 create mode 100644 css-neon-button-makerwith-css-variables/dist/index.html
 create mode 100644 css-neon-button-makerwith-css-variables/dist/script.js
 create mode 100644 css-neon-button-makerwith-css-variables/dist/style.css
 create mode 100644 css-neon-button-makerwith-css-variables/license.txt
 create mode 100644 css-neon-button-makerwith-css-variables/src/index.html
 create mode 100644 css-neon-button-makerwith-css-variables/src/script.babel
 create mode 100644 css-neon-button-makerwith-css-variables/src/style.css
 create mode 100644 css-only-direction-aware-box/README.markdown
 create mode 100644 css-only-direction-aware-box/dist/index.html
 create mode 100644 css-only-direction-aware-box/dist/script.js
 create mode 100644 css-only-direction-aware-box/dist/style.css
 create mode 100644 css-only-direction-aware-box/license.txt
 create mode 100644 css-only-direction-aware-box/src/index.html
 create mode 100644 css-only-direction-aware-box/src/script.js
 create mode 100644 css-only-direction-aware-box/src/style.css
 create mode 100644 css-only-harry-potter-game-basilisks-and-brooms/README.markdown
 create mode 100644 css-only-harry-potter-game-basilisks-and-brooms/dist/index.html
 create mode 100644 css-only-harry-potter-game-basilisks-and-brooms/dist/script.js
 create mode 100644 css-only-harry-potter-game-basilisks-and-brooms/dist/style.css
 create mode 100644 css-only-harry-potter-game-basilisks-and-brooms/license.txt
 create mode 100644 css-only-harry-potter-game-basilisks-and-brooms/src/index.pug
 create mode 100644 css-only-harry-potter-game-basilisks-and-brooms/src/script.js
 create mode 100644 css-only-harry-potter-game-basilisks-and-brooms/src/style.scss
 create mode 100644 css-only-interactive-3d-dice/README.markdown
 create mode 100644 css-only-interactive-3d-dice/dist/index.html
 create mode 100644 css-only-interactive-3d-dice/dist/style.css
 create mode 100644 css-only-interactive-3d-dice/license.txt
 create mode 100644 css-only-interactive-3d-dice/src/index.pug
 create mode 100644 css-only-interactive-3d-dice/src/style.scss
 create mode 100644 css-only-switch-checkboxes/README.markdown
 create mode 100644 css-only-switch-checkboxes/dist/index.html
 create mode 100644 css-only-switch-checkboxes/dist/style.css
 create mode 100644 css-only-switch-checkboxes/license.txt
 create mode 100644 css-only-switch-checkboxes/src/index.html
 create mode 100644 css-only-switch-checkboxes/src/style.css
 create mode 100644 css-panning-perspective-plane/README.markdown
 create mode 100644 css-panning-perspective-plane/dist/index.html
 create mode 100644 css-panning-perspective-plane/dist/style.css
 create mode 100644 css-panning-perspective-plane/license.txt
 create mode 100644 css-panning-perspective-plane/src/index.haml
 create mode 100644 css-panning-perspective-plane/src/style.scss
 create mode 100644 css-position-sticky-with-top-0-and-bottom-0/README.markdown
 create mode 100644 css-position-sticky-with-top-0-and-bottom-0/dist/index.html
 create mode 100644 css-position-sticky-with-top-0-and-bottom-0/dist/style.css
 create mode 100644 css-position-sticky-with-top-0-and-bottom-0/license.txt
 create mode 100644 css-position-sticky-with-top-0-and-bottom-0/src/index.html
 create mode 100644 css-position-sticky-with-top-0-and-bottom-0/src/style.scss
 create mode 100644 css-preloader/README.markdown
 create mode 100644 css-preloader/dist/index.html
 create mode 100644 css-preloader/dist/script.js
 create mode 100644 css-preloader/dist/style.css
 create mode 100644 css-preloader/license.txt
 create mode 100644 css-preloader/src/index.html
 create mode 100644 css-preloader/src/script.js
 create mode 100644 css-preloader/src/style.css
 create mode 100644 css-sceneindustrialization-and-climate-change/README.markdown
 create mode 100644 css-sceneindustrialization-and-climate-change/dist/index.html
 create mode 100644 css-sceneindustrialization-and-climate-change/dist/script.js
 create mode 100644 css-sceneindustrialization-and-climate-change/dist/style.css
 create mode 100644 css-sceneindustrialization-and-climate-change/license.txt
 create mode 100644 css-sceneindustrialization-and-climate-change/src/index.html
 create mode 100644 css-sceneindustrialization-and-climate-change/src/script.js
 create mode 100644 css-sceneindustrialization-and-climate-change/src/style.css
 create mode 100644 css-shapes-columns-and-clipping/README.markdown
 create mode 100644 css-shapes-columns-and-clipping/dist/index.html
 create mode 100644 css-shapes-columns-and-clipping/dist/style.css
 create mode 100644 css-shapes-columns-and-clipping/license.txt
 create mode 100644 css-shapes-columns-and-clipping/src/index.html
 create mode 100644 css-shapes-columns-and-clipping/src/style.scss
 create mode 100644 css-squircle/README.markdown
 create mode 100644 css-squircle/dist/index.html
 create mode 100644 css-squircle/dist/style.css
 create mode 100644 css-squircle/license.txt
 create mode 100644 css-squircle/src/index.html
 create mode 100644 css-squircle/src/style.less
 create mode 100644 css-user-avatars/README.markdown
 create mode 100644 css-user-avatars/dist/index.html
 create mode 100644 css-user-avatars/dist/script.js
 create mode 100644 css-user-avatars/dist/style.css
 create mode 100644 css-user-avatars/license.txt
 create mode 100644 css-user-avatars/src/index.html
 create mode 100644 css-user-avatars/src/script.js
 create mode 100644 css-user-avatars/src/style.less
 create mode 100644 css3-loader-spinners/README.markdown
 create mode 100644 css3-loader-spinners/dist/index.html
 create mode 100644 css3-loader-spinners/dist/style.css
 create mode 100644 css3-loader-spinners/license.txt
 create mode 100644 css3-loader-spinners/src/index.pug
 create mode 100644 css3-loader-spinners/src/style.scss
 create mode 100644 cssfrosted-glass/README.markdown
 create mode 100644 cssfrosted-glass/dist/index.html
 create mode 100644 cssfrosted-glass/dist/style.css
 create mode 100644 cssfrosted-glass/license.txt
 create mode 100644 cssfrosted-glass/src/index.html
 create mode 100644 cssfrosted-glass/src/style.scss
 create mode 100644 csspotlight/README.markdown
 create mode 100644 csspotlight/dist/index.html
 create mode 100644 csspotlight/dist/script.js
 create mode 100644 csspotlight/dist/style.css
 create mode 100644 csspotlight/license.txt
 create mode 100644 csspotlight/src/index.html
 create mode 100644 csspotlight/src/script.js
 create mode 100644 csspotlight/src/style.scss
 create mode 100644 cups-pattern/README.markdown
 create mode 100644 cups-pattern/dist/index.html
 create mode 100644 cups-pattern/dist/script.js
 create mode 100644 cups-pattern/dist/style.css
 create mode 100644 cups-pattern/license.txt
 create mode 100644 cups-pattern/src/index.pug
 create mode 100644 cups-pattern/src/script.js
 create mode 100644 cups-pattern/src/style.scss
 create mode 100644 curiouslyminded-with-flopine/README.markdown
 create mode 100644 curiouslyminded-with-flopine/dist/index.html
 create mode 100644 curiouslyminded-with-flopine/dist/script.js
 create mode 100644 curiouslyminded-with-flopine/dist/style.css
 create mode 100644 curiouslyminded-with-flopine/license.txt
 create mode 100644 curiouslyminded-with-flopine/src/index.html
 create mode 100644 curiouslyminded-with-flopine/src/script.js
 create mode 100644 curiouslyminded-with-flopine/src/style.scss
 create mode 100644 curl-noise/README.markdown
 create mode 100644 curl-noise/dist/index.html
 create mode 100644 curl-noise/dist/script.js
 create mode 100644 curl-noise/dist/style.css
 create mode 100644 curl-noise/license.txt
 create mode 100644 curl-noise/src/index.html
 create mode 100644 curl-noise/src/script.babel
 create mode 100644 curl-noise/src/style.css
 create mode 100644 custom-right-click-context-menu/README.markdown
 create mode 100644 custom-right-click-context-menu/dist/index.html
 create mode 100644 custom-right-click-context-menu/dist/script.js
 create mode 100644 custom-right-click-context-menu/dist/style.css
 create mode 100644 custom-right-click-context-menu/license.txt
 create mode 100644 custom-right-click-context-menu/src/index.html
 create mode 100644 custom-right-click-context-menu/src/script.babel
 create mode 100644 custom-right-click-context-menu/src/style.scss
 create mode 100644 customer-management-ui/README.markdown
 create mode 100644 customer-management-ui/dist/index.html
 create mode 100644 customer-management-ui/dist/script.js
 create mode 100644 customer-management-ui/dist/style.css
 create mode 100644 customer-management-ui/license.txt
 create mode 100644 customer-management-ui/src/index.html
 create mode 100644 customer-management-ui/src/script.js
 create mode 100644 customer-management-ui/src/style.scss
 create mode 100644 d3-map-projections/README.markdown
 create mode 100644 d3-map-projections/dist/index.html
 create mode 100644 d3-map-projections/dist/script.js
 create mode 100644 d3-map-projections/dist/style.css
 create mode 100644 d3-map-projections/license.txt
 create mode 100644 d3-map-projections/src/index.html
 create mode 100644 d3-map-projections/src/script.js
 create mode 100644 d3-map-projections/src/style.css
 create mode 100644 daily-pen-3disco/README.markdown
 create mode 100644 daily-pen-3disco/dist/index.html
 create mode 100644 daily-pen-3disco/dist/script.js
 create mode 100644 daily-pen-3disco/dist/style.css
 create mode 100644 daily-pen-3disco/license.txt
 create mode 100644 daily-pen-3disco/src/index.pug
 create mode 100644 daily-pen-3disco/src/script.babel
 create mode 100644 daily-pen-3disco/src/style.less
 create mode 100644 daily-ui-006-user-profile/README.markdown
 create mode 100644 daily-ui-006-user-profile/dist/index.html
 create mode 100644 daily-ui-006-user-profile/dist/script.js
 create mode 100644 daily-ui-006-user-profile/dist/style.css
 create mode 100644 daily-ui-006-user-profile/license.txt
 create mode 100644 daily-ui-006-user-profile/src/index.pug
 create mode 100644 daily-ui-006-user-profile/src/script.coffee
 create mode 100644 daily-ui-006-user-profile/src/style.sass
 create mode 100644 dan-flashes-complicated-shirt-generator/README.markdown
 create mode 100644 dan-flashes-complicated-shirt-generator/dist/index.html
 create mode 100644 dan-flashes-complicated-shirt-generator/dist/script.js
 create mode 100644 dan-flashes-complicated-shirt-generator/dist/style.css
 create mode 100644 dan-flashes-complicated-shirt-generator/license.txt
 create mode 100644 dan-flashes-complicated-shirt-generator/src/index.haml
 create mode 100644 dan-flashes-complicated-shirt-generator/src/script.js
 create mode 100644 dan-flashes-complicated-shirt-generator/src/style.scss
 create mode 100644 day-and-night-toggle/README.markdown
 create mode 100644 day-and-night-toggle/dist/index.html
 create mode 100644 day-and-night-toggle/dist/script.js
 create mode 100644 day-and-night-toggle/dist/style.css
 create mode 100644 day-and-night-toggle/license.txt
 create mode 100644 day-and-night-toggle/src/index.html
 create mode 100644 day-and-night-toggle/src/script.js
 create mode 100644 day-and-night-toggle/src/style.css
 create mode 100644 daylight-cycles-of-earth/README.markdown
 create mode 100644 daylight-cycles-of-earth/dist/index.html
 create mode 100644 daylight-cycles-of-earth/dist/script.js
 create mode 100644 daylight-cycles-of-earth/dist/style.css
 create mode 100644 daylight-cycles-of-earth/license.txt
 create mode 100644 daylight-cycles-of-earth/src/index.html
 create mode 100644 daylight-cycles-of-earth/src/script.js
 create mode 100644 daylight-cycles-of-earth/src/style.scss
 create mode 100644 dendritic-rabbit/README.markdown
 create mode 100644 dendritic-rabbit/dist/index.html
 create mode 100644 dendritic-rabbit/dist/script.js
 create mode 100644 dendritic-rabbit/license.txt
 create mode 100644 dendritic-rabbit/src/index.html
 create mode 100644 dendritic-rabbit/src/script.js
 create mode 100644 design-your-week/README.markdown
 create mode 100644 design-your-week/dist/index.html
 create mode 100644 design-your-week/dist/script.js
 create mode 100644 design-your-week/dist/style.css
 create mode 100644 design-your-week/license.txt
 create mode 100644 design-your-week/src/index.html
 create mode 100644 design-your-week/src/script.babel
 create mode 100644 design-your-week/src/style.scss
 create mode 100644 details-element-for-help-text/README.markdown
 create mode 100644 details-element-for-help-text/dist/index.html
 create mode 100644 details-element-for-help-text/dist/style.css
 create mode 100644 details-element-for-help-text/license.txt
 create mode 100644 details-element-for-help-text/src/index.html
 create mode 100644 details-element-for-help-text/src/style.scss
 create mode 100644 diagonal-page-transitions/README.markdown
 create mode 100644 diagonal-page-transitions/dist/index.html
 create mode 100644 diagonal-page-transitions/dist/script.js
 create mode 100644 diagonal-page-transitions/dist/style.css
 create mode 100644 diagonal-page-transitions/license.txt
 create mode 100644 diagonal-page-transitions/src/index.html
 create mode 100644 diagonal-page-transitions/src/script.js
 create mode 100644 diagonal-page-transitions/src/style.scss
 create mode 100644 digital-walls/README.markdown
 create mode 100644 digital-walls/dist/index.html
 create mode 100644 digital-walls/dist/script.js
 create mode 100644 digital-walls/dist/style.css
 create mode 100644 digital-walls/license.txt
 create mode 100644 digital-walls/src/index.html
 create mode 100644 digital-walls/src/script.babel
 create mode 100644 digital-walls/src/style.scss
 create mode 100644 draggable-blend-generator/README.markdown
 create mode 100644 draggable-blend-generator/dist/index.html
 create mode 100644 draggable-blend-generator/dist/script.js
 create mode 100644 draggable-blend-generator/dist/style.css
 create mode 100644 draggable-blend-generator/license.txt
 create mode 100644 draggable-blend-generator/src/index.html
 create mode 100644 draggable-blend-generator/src/script.js
 create mode 100644 draggable-blend-generator/src/style.scss
 create mode 100644 draggable-plugin-hello-kitty/README.markdown
 create mode 100644 draggable-plugin-hello-kitty/dist/index.html
 create mode 100644 draggable-plugin-hello-kitty/dist/script.js
 create mode 100644 draggable-plugin-hello-kitty/dist/style.css
 create mode 100644 draggable-plugin-hello-kitty/license.txt
 create mode 100644 draggable-plugin-hello-kitty/src/index.html
 create mode 100644 draggable-plugin-hello-kitty/src/script.babel
 create mode 100644 draggable-plugin-hello-kitty/src/style.scss
 create mode 100644 dragon/README.markdown
 create mode 100644 dragon/dist/index.html
 create mode 100644 dragon/dist/script.js
 create mode 100644 dragon/dist/style.css
 create mode 100644 dragon/license.txt
 create mode 100644 dragon/src/index.html
 create mode 100644 dragon/src/script.js
 create mode 100644 dragon/src/style.css
 create mode 100644 dreaming-of-jupiterthree-js/README.markdown
 create mode 100644 dreaming-of-jupiterthree-js/dist/index.html
 create mode 100644 dreaming-of-jupiterthree-js/dist/script.js
 create mode 100644 dreaming-of-jupiterthree-js/dist/style.css
 create mode 100644 dreaming-of-jupiterthree-js/license.txt
 create mode 100644 dreaming-of-jupiterthree-js/src/index.html
 create mode 100644 dreaming-of-jupiterthree-js/src/script.js
 create mode 100644 dreaming-of-jupiterthree-js/src/style.css
 create mode 100644 drum-sequencer-w-sample-pad/README.markdown
 create mode 100644 drum-sequencer-w-sample-pad/dist/index.html
 create mode 100644 drum-sequencer-w-sample-pad/dist/script.js
 create mode 100644 drum-sequencer-w-sample-pad/dist/style.css
 create mode 100644 drum-sequencer-w-sample-pad/license.txt
 create mode 100644 drum-sequencer-w-sample-pad/src/index.html
 create mode 100644 drum-sequencer-w-sample-pad/src/script.js
 create mode 100644 drum-sequencer-w-sample-pad/src/style.css
 create mode 100644 dualitypure-css/README.markdown
 create mode 100644 dualitypure-css/dist/index.html
 create mode 100644 dualitypure-css/dist/style.css
 create mode 100644 dualitypure-css/license.txt
 create mode 100644 dualitypure-css/src/index.pug
 create mode 100644 dualitypure-css/src/style.styl
 create mode 100644 duo/README.markdown
 create mode 100644 duo/dist/index.html
 create mode 100644 duo/dist/script.js
 create mode 100644 duo/dist/style.css
 create mode 100644 duo/license.txt
 create mode 100644 duo/src/index.html
 create mode 100644 duo/src/script.js
 create mode 100644 duo/src/style.css
 create mode 100644 easings-are-rad/README.markdown
 create mode 100644 easings-are-rad/dist/index.html
 create mode 100644 easings-are-rad/dist/style.css
 create mode 100644 easings-are-rad/license.txt
 create mode 100644 easings-are-rad/src/index.html
 create mode 100644 easings-are-rad/src/style.css
 create mode 100644 editorial-design-to-css-grid-summary/README.markdown
 create mode 100644 editorial-design-to-css-grid-summary/dist/index.html
 create mode 100644 editorial-design-to-css-grid-summary/dist/style.css
 create mode 100644 editorial-design-to-css-grid-summary/license.txt
 create mode 100644 editorial-design-to-css-grid-summary/src/index.html
 create mode 100644 editorial-design-to-css-grid-summary/src/style.css
 create mode 100644 elk/README.markdown
 create mode 100644 elk/dist/index.html
 create mode 100644 elk/dist/script.js
 create mode 100644 elk/dist/style.css
 create mode 100644 elk/license.txt
 create mode 100644 elk/src/index.html
 create mode 100644 elk/src/script.js
 create mode 100644 elk/src/style.css
 create mode 100644 emoji_cover/README.markdown
 create mode 100644 emoji_cover/dist/index.html
 create mode 100644 emoji_cover/dist/script.js
 create mode 100644 emoji_cover/dist/style.css
 create mode 100644 emoji_cover/license.txt
 create mode 100644 emoji_cover/src/index.html
 create mode 100644 emoji_cover/src/script.js
 create mode 100644 emoji_cover/src/style.css
 create mode 100644 emojis-as-mask-images/README.markdown
 create mode 100644 emojis-as-mask-images/dist/index.html
 create mode 100644 emojis-as-mask-images/dist/style.css
 create mode 100644 emojis-as-mask-images/license.txt
 create mode 100644 emojis-as-mask-images/src/index.html
 create mode 100644 emojis-as-mask-images/src/style.css
 create mode 100644 euclidean-algorithm-visualizer/README.markdown
 create mode 100644 euclidean-algorithm-visualizer/dist/index.html
 create mode 100644 euclidean-algorithm-visualizer/dist/script.js
 create mode 100644 euclidean-algorithm-visualizer/license.txt
 create mode 100644 euclidean-algorithm-visualizer/src/index.html
 create mode 100644 euclidean-algorithm-visualizer/src/script.js
 create mode 100644 expanding-flex-cards-2019/README.markdown
 create mode 100644 expanding-flex-cards-2019/dist/a8e37caf2a04602ea5815e5ac.css
 create mode 100644 expanding-flex-cards-2019/dist/a8e37caf2a04602ea5815e5ac.js
 create mode 100644 expanding-flex-cards-2019/dist/index.html
 create mode 100644 expanding-flex-cards-2019/dist/script.js
 create mode 100644 expanding-flex-cards-2019/dist/style.css
 create mode 100644 expanding-flex-cards-2019/license.txt
 create mode 100644 expanding-flex-cards-2019/src/a8e37caf2a04602ea5815e5ac.css
 create mode 100644 expanding-flex-cards-2019/src/a8e37caf2a04602ea5815e5ac.js
 create mode 100644 expanding-flex-cards-2019/src/index.html
 create mode 100644 expanding-flex-cards-2019/src/script.js
 create mode 100644 expanding-flex-cards-2019/src/style.scss
 create mode 100644 expanding-flex-cards-2021/README.markdown
 create mode 100644 expanding-flex-cards-2021/dist/a8e37caf2a04602ea5815e5ac.css
 create mode 100644 expanding-flex-cards-2021/dist/index.html
 create mode 100644 expanding-flex-cards-2021/dist/script.js
 create mode 100644 expanding-flex-cards-2021/dist/style.css
 create mode 100644 expanding-flex-cards-2021/license.txt
 create mode 100644 expanding-flex-cards-2021/src/a8e37caf2a04602ea5815e5ac.css
 create mode 100644 expanding-flex-cards-2021/src/index.html
 create mode 100644 expanding-flex-cards-2021/src/script.js
 create mode 100644 expanding-flex-cards-2021/src/style.scss
 create mode 100644 explode-a-node-3d-box-model/README.markdown
 create mode 100644 explode-a-node-3d-box-model/dist/index.html
 create mode 100644 explode-a-node-3d-box-model/dist/style.css
 create mode 100644 explode-a-node-3d-box-model/license.txt
 create mode 100644 explode-a-node-3d-box-model/src/index.html
 create mode 100644 explode-a-node-3d-box-model/src/style.css
 create mode 100644 faction-toggle-star-wars-ep-iv-vi/README.markdown
 create mode 100644 faction-toggle-star-wars-ep-iv-vi/dist/index.html
 create mode 100644 faction-toggle-star-wars-ep-iv-vi/dist/style.css
 create mode 100644 faction-toggle-star-wars-ep-iv-vi/license.txt
 create mode 100644 faction-toggle-star-wars-ep-iv-vi/src/index.html
 create mode 100644 faction-toggle-star-wars-ep-iv-vi/src/style.css
 create mode 100644 fiesta/README.markdown
 create mode 100644 fiesta/dist/index.html
 create mode 100644 fiesta/dist/script.js
 create mode 100644 fiesta/dist/style.css
 create mode 100644 fiesta/license.txt
 create mode 100644 fiesta/src/index.html
 create mode 100644 fiesta/src/script.babel
 create mode 100644 fiesta/src/style.css
 create mode 100644 file-manager-app-with-accessible-dark-light-mode-switch/README.markdown
 create mode 100644 file-manager-app-with-accessible-dark-light-mode-switch/dist/index.html
 create mode 100644 file-manager-app-with-accessible-dark-light-mode-switch/dist/script.js
 create mode 100644 file-manager-app-with-accessible-dark-light-mode-switch/dist/style.css
 create mode 100644 file-manager-app-with-accessible-dark-light-mode-switch/license.txt
 create mode 100644 file-manager-app-with-accessible-dark-light-mode-switch/src/index.pug
 create mode 100644 file-manager-app-with-accessible-dark-light-mode-switch/src/script.babel
 create mode 100644 file-manager-app-with-accessible-dark-light-mode-switch/src/style.scss
 create mode 100644 firefly-flow/README.markdown
 create mode 100644 firefly-flow/dist/index.html
 create mode 100644 firefly-flow/dist/script.js
 create mode 100644 firefly-flow/dist/style.css
 create mode 100644 firefly-flow/license.txt
 create mode 100644 firefly-flow/src/index.html
 create mode 100644 firefly-flow/src/script.babel
 create mode 100644 firefly-flow/src/style.css
 create mode 100644 fishes/README.markdown
 create mode 100644 fishes/dist/index.html
 create mode 100644 fishes/dist/style.css
 create mode 100644 fishes/license.txt
 create mode 100644 fishes/src/index.html
 create mode 100644 fishes/src/style.css
 create mode 100644 fishing-game/README.markdown
 create mode 100644 fishing-game/dist/index.html
 create mode 100644 fishing-game/dist/script.js
 create mode 100644 fishing-game/dist/style.css
 create mode 100644 fishing-game/license.txt
 create mode 100644 fishing-game/src/index.html
 create mode 100644 fishing-game/src/script.babel
 create mode 100644 fishing-game/src/style.css
 create mode 100644 flame-animation/README.markdown
 create mode 100644 flame-animation/dist/index.html
 create mode 100644 flame-animation/dist/style.css
 create mode 100644 flame-animation/license.txt
 create mode 100644 flame-animation/src/index.html
 create mode 100644 flame-animation/src/style.css
 create mode 100644 flexbox-and-white-space-nowrap-issue/LICENSE.txt
 create mode 100644 flexbox-and-white-space-nowrap-issue/README.md
 create mode 100644 flexbox-and-white-space-nowrap-issue/dist/index.html
 create mode 100644 flexbox-and-white-space-nowrap-issue/dist/style.css
 create mode 100644 flexbox-and-white-space-nowrap-issue/src/index.html
 create mode 100644 flexbox-and-white-space-nowrap-issue/src/style.sass
 create mode 100644 flexbox-playground/README.markdown
 create mode 100644 flexbox-playground/dist/index.html
 create mode 100644 flexbox-playground/dist/script.js
 create mode 100644 flexbox-playground/dist/style.css
 create mode 100644 flexbox-playground/license.txt
 create mode 100644 flexbox-playground/src/index.html
 create mode 100644 flexbox-playground/src/script.js
 create mode 100644 flexbox-playground/src/style.css
 create mode 100644 flipboxes/README.markdown
 create mode 100644 flipboxes/dist/index.html
 create mode 100644 flipboxes/dist/style.css
 create mode 100644 flipboxes/license.txt
 create mode 100644 flipboxes/src/index.html
 create mode 100644 flipboxes/src/style.scss
 create mode 100644 floating-island-w-threejs-gsap/README.markdown
 create mode 100644 floating-island-w-threejs-gsap/dist/index.html
 create mode 100644 floating-island-w-threejs-gsap/dist/script.js
 create mode 100644 floating-island-w-threejs-gsap/dist/style.css
 create mode 100644 floating-island-w-threejs-gsap/license.txt
 create mode 100644 floating-island-w-threejs-gsap/src/index.html
 create mode 100644 floating-island-w-threejs-gsap/src/script.babel
 create mode 100644 floating-island-w-threejs-gsap/src/style.scss
 create mode 100644 flow/README.markdown
 create mode 100644 flow/dist/index.html
 create mode 100644 flow/dist/script.js
 create mode 100644 flow/dist/style.css
 create mode 100644 flow/license.txt
 create mode 100644 flow/src/index.html
 create mode 100644 flow/src/script.js
 create mode 100644 flow/src/style.css
 create mode 100644 flowing-imagehow-to/README.markdown
 create mode 100644 flowing-imagehow-to/dist/index.html
 create mode 100644 flowing-imagehow-to/dist/script.js
 create mode 100644 flowing-imagehow-to/dist/style.css
 create mode 100644 flowing-imagehow-to/license.txt
 create mode 100644 flowing-imagehow-to/src/index.html
 create mode 100644 flowing-imagehow-to/src/script.js
 create mode 100644 flowing-imagehow-to/src/style.scss
 create mode 100644 flutter-challengelayout/README.markdown
 create mode 100644 flutter-challengelayout/dist/index.html
 create mode 100644 flutter-challengelayout/dist/script.js
 create mode 100644 flutter-challengelayout/license.txt
 create mode 100644 flutter-challengelayout/src/index.html
 create mode 100644 flutter-challengelayout/src/script.js
 create mode 100644 flying-lanterns-and-a-koi-fish-instancing-datatexture/README.markdown
 create mode 100644 flying-lanterns-and-a-koi-fish-instancing-datatexture/dist/index.html
 create mode 100644 flying-lanterns-and-a-koi-fish-instancing-datatexture/dist/script.js
 create mode 100644 flying-lanterns-and-a-koi-fish-instancing-datatexture/dist/style.css
 create mode 100644 flying-lanterns-and-a-koi-fish-instancing-datatexture/license.txt
 create mode 100644 flying-lanterns-and-a-koi-fish-instancing-datatexture/src/index.html
 create mode 100644 flying-lanterns-and-a-koi-fish-instancing-datatexture/src/script.js
 create mode 100644 flying-lanterns-and-a-koi-fish-instancing-datatexture/src/style.css
 create mode 100644 focusss-v2/README.markdown
 create mode 100644 focusss-v2/dist/index.html
 create mode 100644 focusss-v2/dist/script.js
 create mode 100644 focusss-v2/dist/style.css
 create mode 100644 focusss-v2/license.txt
 create mode 100644 focusss-v2/src/index.html
 create mode 100644 focusss-v2/src/script.js
 create mode 100644 focusss-v2/src/style.css
 create mode 100644 folder-animation-using-scss-iteration/README.markdown
 create mode 100644 folder-animation-using-scss-iteration/dist/index.html
 create mode 100644 folder-animation-using-scss-iteration/dist/script.js
 create mode 100644 folder-animation-using-scss-iteration/dist/style.css
 create mode 100644 folder-animation-using-scss-iteration/license.txt
 create mode 100644 folder-animation-using-scss-iteration/src/index.html
 create mode 100644 folder-animation-using-scss-iteration/src/script.js
 create mode 100644 folder-animation-using-scss-iteration/src/style.scss
 create mode 100644 folding-ticket-detail/README.markdown
 create mode 100644 folding-ticket-detail/dist/index.html
 create mode 100644 folding-ticket-detail/dist/script.js
 create mode 100644 folding-ticket-detail/dist/style.css
 create mode 100644 folding-ticket-detail/license.txt
 create mode 100644 folding-ticket-detail/src/index.html
 create mode 100644 folding-ticket-detail/src/script.babel
 create mode 100644 folding-ticket-detail/src/style.css
 create mode 100644 fracture/README.markdown
 create mode 100644 fracture/dist/index.html
 create mode 100644 fracture/dist/script.js
 create mode 100644 fracture/dist/style.css
 create mode 100644 fracture/license.txt
 create mode 100644 fracture/src/index.pug
 create mode 100644 fracture/src/script.js
 create mode 100644 fracture/src/style.scss
 create mode 100644 fragment-shaders-ex-7/README.markdown
 create mode 100644 fragment-shaders-ex-7/dist/index.html
 create mode 100644 fragment-shaders-ex-7/dist/script.js
 create mode 100644 fragment-shaders-ex-7/dist/style.css
 create mode 100644 fragment-shaders-ex-7/license.txt
 create mode 100644 fragment-shaders-ex-7/src/index.html
 create mode 100644 fragment-shaders-ex-7/src/script.babel
 create mode 100644 fragment-shaders-ex-7/src/style.less
 create mode 100644 fredrikaflowfield-heart/README.markdown
 create mode 100644 fredrikaflowfield-heart/dist/blgjlm.js
 create mode 100644 fredrikaflowfield-heart/dist/index.html
 create mode 100644 fredrikaflowfield-heart/dist/script.js
 create mode 100644 fredrikaflowfield-heart/dist/style.css
 create mode 100644 fredrikaflowfield-heart/license.txt
 create mode 100644 fredrikaflowfield-heart/src/blgjlm.js
 create mode 100644 fredrikaflowfield-heart/src/index.html
 create mode 100644 fredrikaflowfield-heart/src/script.babel
 create mode 100644 fredrikaflowfield-heart/src/style.css
 create mode 100644 futuristic-card-effect/LICENSE.txt
 create mode 100644 futuristic-card-effect/README.md
 create mode 100644 futuristic-card-effect/dist/index.html
 create mode 100644 futuristic-card-effect/dist/script.js
 create mode 100644 futuristic-card-effect/dist/style.css
 create mode 100644 futuristic-card-effect/src/index.html
 create mode 100644 futuristic-card-effect/src/script.js
 create mode 100644 futuristic-card-effect/src/style.css
 create mode 100644 fyodor-v2-angled-pointillism/README.markdown
 create mode 100644 fyodor-v2-angled-pointillism/dist/index.html
 create mode 100644 fyodor-v2-angled-pointillism/dist/script.js
 create mode 100644 fyodor-v2-angled-pointillism/dist/style.css
 create mode 100644 fyodor-v2-angled-pointillism/license.txt
 create mode 100644 fyodor-v2-angled-pointillism/src/index.html
 create mode 100644 fyodor-v2-angled-pointillism/src/script.js
 create mode 100644 fyodor-v2-angled-pointillism/src/style.scss
 create mode 100644 gate-of-time-svg-css/README.markdown
 create mode 100644 gate-of-time-svg-css/dist/index.html
 create mode 100644 gate-of-time-svg-css/dist/style.css
 create mode 100644 gate-of-time-svg-css/license.txt
 create mode 100644 gate-of-time-svg-css/src/index.html
 create mode 100644 gate-of-time-svg-css/src/style.css
 create mode 100644 generative-canyons/README.markdown
 create mode 100644 generative-canyons/dist/index.html
 create mode 100644 generative-canyons/dist/script.js
 create mode 100644 generative-canyons/dist/style.css
 create mode 100644 generative-canyons/license.txt
 create mode 100644 generative-canyons/src/index.haml
 create mode 100644 generative-canyons/src/script.js
 create mode 100644 generative-canyons/src/style.scss
 create mode 100644 generative-customisable-svg-social-images/README.markdown
 create mode 100644 generative-customisable-svg-social-images/dist/index.html
 create mode 100644 generative-customisable-svg-social-images/dist/script.js
 create mode 100644 generative-customisable-svg-social-images/dist/style.css
 create mode 100644 generative-customisable-svg-social-images/license.txt
 create mode 100644 generative-customisable-svg-social-images/src/index.html
 create mode 100644 generative-customisable-svg-social-images/src/script.js
 create mode 100644 generative-customisable-svg-social-images/src/style.css
 create mode 100644 generative-poster-v-css/README.markdown
 create mode 100644 generative-poster-v-css/dist/index.html
 create mode 100644 generative-poster-v-css/dist/script.js
 create mode 100644 generative-poster-v-css/dist/style.css
 create mode 100644 generative-poster-v-css/license.txt
 create mode 100644 generative-poster-v-css/src/index.html
 create mode 100644 generative-poster-v-css/src/script.babel
 create mode 100644 generative-poster-v-css/src/style.scss
 create mode 100644 generative-quadtree-based-grid-layouts/README.markdown
 create mode 100644 generative-quadtree-based-grid-layouts/dist/index.html
 create mode 100644 generative-quadtree-based-grid-layouts/dist/script.js
 create mode 100644 generative-quadtree-based-grid-layouts/dist/style.css
 create mode 100644 generative-quadtree-based-grid-layouts/license.txt
 create mode 100644 generative-quadtree-based-grid-layouts/src/index.html
 create mode 100644 generative-quadtree-based-grid-layouts/src/script.js
 create mode 100644 generative-quadtree-based-grid-layouts/src/style.css
 create mode 100644 generative-re-arranging-grids-with-gsap-flip/README.markdown
 create mode 100644 generative-re-arranging-grids-with-gsap-flip/dist/index.html
 create mode 100644 generative-re-arranging-grids-with-gsap-flip/dist/script.js
 create mode 100644 generative-re-arranging-grids-with-gsap-flip/dist/style.css
 create mode 100644 generative-re-arranging-grids-with-gsap-flip/license.txt
 create mode 100644 generative-re-arranging-grids-with-gsap-flip/src/index.html
 create mode 100644 generative-re-arranging-grids-with-gsap-flip/src/script.js
 create mode 100644 generative-re-arranging-grids-with-gsap-flip/src/style.css
 create mode 100644 generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/README.markdown
 create mode 100644 generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/dist/index.html
 create mode 100644 generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/dist/script.js
 create mode 100644 generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/dist/style.css
 create mode 100644 generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/license.txt
 create mode 100644 generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/src/index.haml
 create mode 100644 generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/src/script.babel
 create mode 100644 generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/src/style.sass
 create mode 100644 generative-voronoi-splodges-pixi/README.markdown
 create mode 100644 generative-voronoi-splodges-pixi/dist/index.html
 create mode 100644 generative-voronoi-splodges-pixi/dist/script.js
 create mode 100644 generative-voronoi-splodges-pixi/dist/style.css
 create mode 100644 generative-voronoi-splodges-pixi/license.txt
 create mode 100644 generative-voronoi-splodges-pixi/src/index.html
 create mode 100644 generative-voronoi-splodges-pixi/src/script.babel
 create mode 100644 generative-voronoi-splodges-pixi/src/style.css
 create mode 100644 genuary-2022-day-8/README.markdown
 create mode 100644 genuary-2022-day-8/dist/index.html
 create mode 100644 genuary-2022-day-8/dist/script.js
 create mode 100644 genuary-2022-day-8/dist/style.css
 create mode 100644 genuary-2022-day-8/license.txt
 create mode 100644 genuary-2022-day-8/src/index.html
 create mode 100644 genuary-2022-day-8/src/script.babel
 create mode 100644 genuary-2022-day-8/src/style.less
 create mode 100644 genuary-25make-a-grid-of-permutations/README.markdown
 create mode 100644 genuary-25make-a-grid-of-permutations/dist/index.html
 create mode 100644 genuary-25make-a-grid-of-permutations/dist/script.js
 create mode 100644 genuary-25make-a-grid-of-permutations/dist/style.css
 create mode 100644 genuary-25make-a-grid-of-permutations/license.txt
 create mode 100644 genuary-25make-a-grid-of-permutations/src/index.html
 create mode 100644 genuary-25make-a-grid-of-permutations/src/script.babel
 create mode 100644 genuary-25make-a-grid-of-permutations/src/style.css
 create mode 100644 genuary-6-triangle-subdivision/README.markdown
 create mode 100644 genuary-6-triangle-subdivision/dist/index.html
 create mode 100644 genuary-6-triangle-subdivision/dist/script.js
 create mode 100644 genuary-6-triangle-subdivision/dist/style.css
 create mode 100644 genuary-6-triangle-subdivision/license.txt
 create mode 100644 genuary-6-triangle-subdivision/src/index.html
 create mode 100644 genuary-6-triangle-subdivision/src/script.babel
 create mode 100644 genuary-6-triangle-subdivision/src/style.css
 create mode 100644 glassmorphism-creative-cloud-app-redesign/README.markdown
 create mode 100644 glassmorphism-creative-cloud-app-redesign/dist/index.html
 create mode 100644 glassmorphism-creative-cloud-app-redesign/dist/script.js
 create mode 100644 glassmorphism-creative-cloud-app-redesign/dist/style.css
 create mode 100644 glassmorphism-creative-cloud-app-redesign/license.txt
 create mode 100644 glassmorphism-creative-cloud-app-redesign/src/index.html
 create mode 100644 glassmorphism-creative-cloud-app-redesign/src/script.js
 create mode 100644 glassmorphism-creative-cloud-app-redesign/src/style.scss
 create mode 100644 glassmorphism/README.markdown
 create mode 100644 glassmorphism/dist/index.html
 create mode 100644 glassmorphism/dist/style.css
 create mode 100644 glassmorphism/license.txt
 create mode 100644 glassmorphism/src/index.html
 create mode 100644 glassmorphism/src/style.css
 create mode 100644 glsl-gpgpu-particles/README.markdown
 create mode 100644 glsl-gpgpu-particles/dist/index.html
 create mode 100644 glsl-gpgpu-particles/dist/script.js
 create mode 100644 glsl-gpgpu-particles/dist/style.css
 create mode 100644 glsl-gpgpu-particles/license.txt
 create mode 100644 glsl-gpgpu-particles/src/index.html
 create mode 100644 glsl-gpgpu-particles/src/script.babel
 create mode 100644 glsl-gpgpu-particles/src/style.scss
 create mode 100644 glsl-in-which-alice-feels-sick/README.markdown
 create mode 100644 glsl-in-which-alice-feels-sick/dist/index.html
 create mode 100644 glsl-in-which-alice-feels-sick/dist/script.js
 create mode 100644 glsl-in-which-alice-feels-sick/dist/style.css
 create mode 100644 glsl-in-which-alice-feels-sick/license.txt
 create mode 100644 glsl-in-which-alice-feels-sick/src/index.html
 create mode 100644 glsl-in-which-alice-feels-sick/src/script.babel
 create mode 100644 glsl-in-which-alice-feels-sick/src/style.scss
 create mode 100644 glsl-sample027/README.markdown
 create mode 100644 glsl-sample027/dist/index.html
 create mode 100644 glsl-sample027/dist/script.js
 create mode 100644 glsl-sample027/dist/style.css
 create mode 100644 glsl-sample027/license.txt
 create mode 100644 glsl-sample027/src/index.html
 create mode 100644 glsl-sample027/src/script.js
 create mode 100644 glsl-sample027/src/style.css
 create mode 100644 gold-tiles/README.markdown
 create mode 100644 gold-tiles/dist/index.html
 create mode 100644 gold-tiles/dist/style.css
 create mode 100644 gold-tiles/license.txt
 create mode 100644 gold-tiles/src/index.pug
 create mode 100644 gold-tiles/src/style.scss
 create mode 100644 good-fast-cheap/README.markdown
 create mode 100644 good-fast-cheap/dist/https___codepen_io_kunukn.css
 create mode 100644 good-fast-cheap/dist/index.html
 create mode 100644 good-fast-cheap/dist/script.js
 create mode 100644 good-fast-cheap/license.txt
 create mode 100644 good-fast-cheap/src/https___codepen_io_kunukn.css
 create mode 100644 good-fast-cheap/src/index.html
 create mode 100644 good-fast-cheap/src/script.babel
 create mode 100644 gradient-ball-sketch/README.markdown
 create mode 100644 gradient-ball-sketch/dist/index.html
 create mode 100644 gradient-ball-sketch/dist/script.js
 create mode 100644 gradient-ball-sketch/dist/style.css
 create mode 100644 gradient-ball-sketch/license.txt
 create mode 100644 gradient-ball-sketch/src/index.html
 create mode 100644 gradient-ball-sketch/src/script.js
 create mode 100644 gradient-ball-sketch/src/style.styl
 create mode 100644 gradient-borders/LICENSE.txt
 create mode 100644 gradient-borders/README.md
 create mode 100644 gradient-borders/dist/index.html
 create mode 100644 gradient-borders/dist/style.css
 create mode 100644 gradient-borders/src/index.html
 create mode 100644 gradient-borders/src/style.less
 create mode 100644 gradient-shadows-oc-argyleink/README.markdown
 create mode 100644 gradient-shadows-oc-argyleink/dist/index.html
 create mode 100644 gradient-shadows-oc-argyleink/dist/style.css
 create mode 100644 gradient-shadows-oc-argyleink/license.txt
 create mode 100644 gradient-shadows-oc-argyleink/src/index.html
 create mode 100644 gradient-shadows-oc-argyleink/src/style.css
 create mode 100644 grainy-gradient-two-colors/README.markdown
 create mode 100644 grainy-gradient-two-colors/dist/index.html
 create mode 100644 grainy-gradient-two-colors/dist/style.css
 create mode 100644 grainy-gradient-two-colors/license.txt
 create mode 100644 grainy-gradient-two-colors/src/index.html
 create mode 100644 grainy-gradient-two-colors/src/style.css
 create mode 100644 granny-square-wallpapers-click-to-regenerate/README.markdown
 create mode 100644 granny-square-wallpapers-click-to-regenerate/dist/index.html
 create mode 100644 granny-square-wallpapers-click-to-regenerate/dist/script.js
 create mode 100644 granny-square-wallpapers-click-to-regenerate/dist/style.css
 create mode 100644 granny-square-wallpapers-click-to-regenerate/license.txt
 create mode 100644 granny-square-wallpapers-click-to-regenerate/src/index.html
 create mode 100644 granny-square-wallpapers-click-to-regenerate/src/script.js
 create mode 100644 granny-square-wallpapers-click-to-regenerate/src/style.css
 create mode 100644 grayscale-bytestiny-code-monochrome-composition-study/README.markdown
 create mode 100644 grayscale-bytestiny-code-monochrome-composition-study/dist/index.html
 create mode 100644 grayscale-bytestiny-code-monochrome-composition-study/dist/script.js
 create mode 100644 grayscale-bytestiny-code-monochrome-composition-study/license.txt
 create mode 100644 grayscale-bytestiny-code-monochrome-composition-study/src/index.html
 create mode 100644 grayscale-bytestiny-code-monochrome-composition-study/src/script.js
 create mode 100644 grid-based-blog-index-page-layout/README.markdown
 create mode 100644 grid-based-blog-index-page-layout/dist/index.html
 create mode 100644 grid-based-blog-index-page-layout/dist/style.css
 create mode 100644 grid-based-blog-index-page-layout/license.txt
 create mode 100644 grid-based-blog-index-page-layout/src/index.pug
 create mode 100644 grid-based-blog-index-page-layout/src/style.scss
 create mode 100644 grid-collage-layout/LICENSE.txt
 create mode 100644 grid-collage-layout/README.md
 create mode 100644 grid-collage-layout/dist/index.html
 create mode 100644 grid-collage-layout/dist/style.css
 create mode 100644 grid-collage-layout/src/index.html
 create mode 100644 grid-collage-layout/src/style.css
 create mode 100644 grid-icosahedron-refraction/README.markdown
 create mode 100644 grid-icosahedron-refraction/dist/index.html
 create mode 100644 grid-icosahedron-refraction/dist/script.js
 create mode 100644 grid-icosahedron-refraction/dist/style.css
 create mode 100644 grid-icosahedron-refraction/license.txt
 create mode 100644 grid-icosahedron-refraction/src/index.html
 create mode 100644 grid-icosahedron-refraction/src/script.ts
 create mode 100644 grid-icosahedron-refraction/src/style.scss
 create mode 100644 grid-items-share-background/README.markdown
 create mode 100644 grid-items-share-background/dist/index.html
 create mode 100644 grid-items-share-background/dist/script.js
 create mode 100644 grid-items-share-background/dist/style.css
 create mode 100644 grid-items-share-background/license.txt
 create mode 100644 grid-items-share-background/src/index.html
 create mode 100644 grid-items-share-background/src/script.js
 create mode 100644 grid-items-share-background/src/style.scss
 create mode 100644 growing-lines-hex/README.markdown
 create mode 100644 growing-lines-hex/dist/index.html
 create mode 100644 growing-lines-hex/dist/script.js
 create mode 100644 growing-lines-hex/dist/style.css
 create mode 100644 growing-lines-hex/license.txt
 create mode 100644 growing-lines-hex/src/index.html
 create mode 100644 growing-lines-hex/src/script.js
 create mode 100644 growing-lines-hex/src/style.css
 create mode 100644 gsap-believecollage-animation/README.markdown
 create mode 100644 gsap-believecollage-animation/dist/index.html
 create mode 100644 gsap-believecollage-animation/dist/script.js
 create mode 100644 gsap-believecollage-animation/dist/style.css
 create mode 100644 gsap-believecollage-animation/license.txt
 create mode 100644 gsap-believecollage-animation/src/index.html
 create mode 100644 gsap-believecollage-animation/src/script.js
 create mode 100644 gsap-believecollage-animation/src/style.scss
 create mode 100644 habitable-planet-generator-with-zdog/README.markdown
 create mode 100644 habitable-planet-generator-with-zdog/dist/index.html
 create mode 100644 habitable-planet-generator-with-zdog/dist/script.js
 create mode 100644 habitable-planet-generator-with-zdog/dist/style.css
 create mode 100644 habitable-planet-generator-with-zdog/license.txt
 create mode 100644 habitable-planet-generator-with-zdog/src/index.html
 create mode 100644 habitable-planet-generator-with-zdog/src/script.js
 create mode 100644 habitable-planet-generator-with-zdog/src/style.css
 create mode 100644 halftone-circles-try-scrollinganydayshaders-05/README.markdown
 create mode 100644 halftone-circles-try-scrollinganydayshaders-05/dist/index.html
 create mode 100644 halftone-circles-try-scrollinganydayshaders-05/dist/script.js
 create mode 100644 halftone-circles-try-scrollinganydayshaders-05/dist/style.css
 create mode 100644 halftone-circles-try-scrollinganydayshaders-05/license.txt
 create mode 100644 halftone-circles-try-scrollinganydayshaders-05/src/index.html
 create mode 100644 halftone-circles-try-scrollinganydayshaders-05/src/script.js
 create mode 100644 halftone-circles-try-scrollinganydayshaders-05/src/style.css
 create mode 100644 halftone-video-effect/README.markdown
 create mode 100644 halftone-video-effect/dist/index.html
 create mode 100644 halftone-video-effect/dist/script.js
 create mode 100644 halftone-video-effect/dist/style.css
 create mode 100644 halftone-video-effect/license.txt
 create mode 100644 halftone-video-effect/src/index.html
 create mode 100644 halftone-video-effect/src/script.js
 create mode 100644 halftone-video-effect/src/style.scss
 create mode 100644 hambuuuuuuuurger/README.markdown
 create mode 100644 hambuuuuuuuurger/dist/index.html
 create mode 100644 hambuuuuuuuurger/dist/style.css
 create mode 100644 hambuuuuuuuurger/license.txt
 create mode 100644 hambuuuuuuuurger/src/index.haml
 create mode 100644 hambuuuuuuuurger/src/style.css
 create mode 100644 happy-new-year/README.markdown
 create mode 100644 happy-new-year/dist/index.html
 create mode 100644 happy-new-year/dist/script.js
 create mode 100644 happy-new-year/dist/style.css
 create mode 100644 happy-new-year/license.txt
 create mode 100644 happy-new-year/src/index.html
 create mode 100644 happy-new-year/src/script.js
 create mode 100644 happy-new-year/src/style.scss
 create mode 100644 headful-of-fire/README.markdown
 create mode 100644 headful-of-fire/dist/index.html
 create mode 100644 headful-of-fire/dist/script.js
 create mode 100644 headful-of-fire/dist/style.css
 create mode 100644 headful-of-fire/license.txt
 create mode 100644 headful-of-fire/src/index.html
 create mode 100644 headful-of-fire/src/script.js
 create mode 100644 headful-of-fire/src/style.css
 create mode 100644 heart-button/README.markdown
 create mode 100644 heart-button/dist/index.html
 create mode 100644 heart-button/dist/script.js
 create mode 100644 heart-button/dist/style.css
 create mode 100644 heart-button/license.txt
 create mode 100644 heart-button/src/index.html
 create mode 100644 heart-button/src/script.js
 create mode 100644 heart-button/src/style.scss
 create mode 100644 hearthstone-style-card-hover/README.markdown
 create mode 100644 hearthstone-style-card-hover/dist/index.html
 create mode 100644 hearthstone-style-card-hover/dist/style.css
 create mode 100644 hearthstone-style-card-hover/license.txt
 create mode 100644 hearthstone-style-card-hover/src/index.haml
 create mode 100644 hearthstone-style-card-hover/src/style.scss
 create mode 100644 hex-arcs-in-relief/README.markdown
 create mode 100644 hex-arcs-in-relief/dist/index.html
 create mode 100644 hex-arcs-in-relief/dist/script.js
 create mode 100644 hex-arcs-in-relief/dist/style.css
 create mode 100644 hex-arcs-in-relief/license.txt
 create mode 100644 hex-arcs-in-relief/src/index.html
 create mode 100644 hex-arcs-in-relief/src/script.js
 create mode 100644 hex-arcs-in-relief/src/style.css
 create mode 100644 hex-rgb-auto-color-converter-in-vue/README.markdown
 create mode 100644 hex-rgb-auto-color-converter-in-vue/dist/index.html
 create mode 100644 hex-rgb-auto-color-converter-in-vue/dist/script.js
 create mode 100644 hex-rgb-auto-color-converter-in-vue/dist/style.css
 create mode 100644 hex-rgb-auto-color-converter-in-vue/license.txt
 create mode 100644 hex-rgb-auto-color-converter-in-vue/src/index.html
 create mode 100644 hex-rgb-auto-color-converter-in-vue/src/script.js
 create mode 100644 hex-rgb-auto-color-converter-in-vue/src/style.scss
 create mode 100644 hexagon-tiling-7-ways/README.markdown
 create mode 100644 hexagon-tiling-7-ways/dist/index.html
 create mode 100644 hexagon-tiling-7-ways/dist/script.js
 create mode 100644 hexagon-tiling-7-ways/dist/style.css
 create mode 100644 hexagon-tiling-7-ways/license.txt
 create mode 100644 hexagon-tiling-7-ways/src/index.pug
 create mode 100644 hexagon-tiling-7-ways/src/script.js
 create mode 100644 hexagon-tiling-7-ways/src/style.scss
 create mode 100644 holiday-cssweater-generator/README.markdown
 create mode 100644 holiday-cssweater-generator/dist/index.html
 create mode 100644 holiday-cssweater-generator/dist/script.js
 create mode 100644 holiday-cssweater-generator/dist/style.css
 create mode 100644 holiday-cssweater-generator/license.txt
 create mode 100644 holiday-cssweater-generator/src/index.haml
 create mode 100644 holiday-cssweater-generator/src/script.js
 create mode 100644 holiday-cssweater-generator/src/style.scss
 create mode 100644 hover-animated-portfolio/README.markdown
 create mode 100644 hover-animated-portfolio/dist/index.html
 create mode 100644 hover-animated-portfolio/dist/script.js
 create mode 100644 hover-animated-portfolio/dist/style.css
 create mode 100644 hover-animated-portfolio/license.txt
 create mode 100644 hover-animated-portfolio/src/index.html
 create mode 100644 hover-animated-portfolio/src/script.js
 create mode 100644 hover-animated-portfolio/src/style.css
 create mode 100644 hover-effect-borders-to-underlines/README.markdown
 create mode 100644 hover-effect-borders-to-underlines/dist/index.html
 create mode 100644 hover-effect-borders-to-underlines/dist/style.css
 create mode 100644 hover-effect-borders-to-underlines/license.txt
 create mode 100644 hover-effect-borders-to-underlines/src/index.html
 create mode 100644 hover-effect-borders-to-underlines/src/style.scss
 create mode 100644 hsl-monochromatic-palette-generator/README.markdown
 create mode 100644 hsl-monochromatic-palette-generator/dist/index.html
 create mode 100644 hsl-monochromatic-palette-generator/dist/script.js
 create mode 100644 hsl-monochromatic-palette-generator/dist/style.css
 create mode 100644 hsl-monochromatic-palette-generator/license.txt
 create mode 100644 hsl-monochromatic-palette-generator/src/index.pug
 create mode 100644 hsl-monochromatic-palette-generator/src/script.babel
 create mode 100644 hsl-monochromatic-palette-generator/src/style.styl
 create mode 100644 hsl-slider-w-react-css-vars/README.markdown
 create mode 100644 hsl-slider-w-react-css-vars/dist/index.html
 create mode 100644 hsl-slider-w-react-css-vars/dist/script.js
 create mode 100644 hsl-slider-w-react-css-vars/dist/style.css
 create mode 100644 hsl-slider-w-react-css-vars/license.txt
 create mode 100644 hsl-slider-w-react-css-vars/src/index.pug
 create mode 100644 hsl-slider-w-react-css-vars/src/script.babel
 create mode 100644 hsl-slider-w-react-css-vars/src/style.styl
 create mode 100644 hue-rotated-emoji/README.markdown
 create mode 100644 hue-rotated-emoji/dist/index.html
 create mode 100644 hue-rotated-emoji/dist/style.css
 create mode 100644 hue-rotated-emoji/license.txt
 create mode 100644 hue-rotated-emoji/src/index.html
 create mode 100644 hue-rotated-emoji/src/style.css
 create mode 100644 humans-since-1982/README.markdown
 create mode 100644 humans-since-1982/dist/index.html
 create mode 100644 humans-since-1982/dist/script.js
 create mode 100644 humans-since-1982/dist/style.css
 create mode 100644 humans-since-1982/license.txt
 create mode 100644 humans-since-1982/src/index.html
 create mode 100644 humans-since-1982/src/script.js
 create mode 100644 humans-since-1982/src/style.css
 create mode 100644 iceberg-charts/README.markdown
 create mode 100644 iceberg-charts/dist/index.html
 create mode 100644 iceberg-charts/dist/script.js
 create mode 100644 iceberg-charts/dist/style.css
 create mode 100644 iceberg-charts/dist/zbvakw.js
 create mode 100644 iceberg-charts/license.txt
 create mode 100644 iceberg-charts/src/index.html
 create mode 100644 iceberg-charts/src/script.js
 create mode 100644 iceberg-charts/src/style.less
 create mode 100644 iceberg-charts/src/zbvakw.js
 create mode 100644 icosahedron-pure-css/README.markdown
 create mode 100644 icosahedron-pure-css/dist/index.html
 create mode 100644 icosahedron-pure-css/dist/script.js
 create mode 100644 icosahedron-pure-css/dist/style.css
 create mode 100644 icosahedron-pure-css/license.txt
 create mode 100644 icosahedron-pure-css/src/index.html
 create mode 100644 icosahedron-pure-css/src/script.js
 create mode 100644 icosahedron-pure-css/src/style.scss
 create mode 100644 illustration-online-store/README.markdown
 create mode 100644 illustration-online-store/dist/index.html
 create mode 100644 illustration-online-store/dist/style.css
 create mode 100644 illustration-online-store/license.txt
 create mode 100644 illustration-online-store/src/index.html
 create mode 100644 illustration-online-store/src/style.scss
 create mode 100644 image-captions-color-hints/README.markdown
 create mode 100644 image-captions-color-hints/dist/index.html
 create mode 100644 image-captions-color-hints/dist/script.js
 create mode 100644 image-captions-color-hints/dist/style.css
 create mode 100644 image-captions-color-hints/license.txt
 create mode 100644 image-captions-color-hints/src/index.html
 create mode 100644 image-captions-color-hints/src/script.babel
 create mode 100644 image-captions-color-hints/src/style.css
 create mode 100644 image-to-lcd/README.markdown
 create mode 100644 image-to-lcd/dist/index.html
 create mode 100644 image-to-lcd/dist/script.js
 create mode 100644 image-to-lcd/dist/style.css
 create mode 100644 image-to-lcd/license.txt
 create mode 100644 image-to-lcd/src/index.html
 create mode 100644 image-to-lcd/src/script.js
 create mode 100644 image-to-lcd/src/style.css
 create mode 100644 impossible-checkbox-v2/README.markdown
 create mode 100644 impossible-checkbox-v2/dist/index.html
 create mode 100644 impossible-checkbox-v2/dist/script.js
 create mode 100644 impossible-checkbox-v2/dist/style.css
 create mode 100644 impossible-checkbox-v2/license.txt
 create mode 100644 impossible-checkbox-v2/src/index.pug
 create mode 100644 impossible-checkbox-v2/src/script.babel
 create mode 100644 impossible-checkbox-v2/src/style.styl
 create mode 100644 impressionists-blobs/LICENSE.txt
 create mode 100644 impressionists-blobs/README.md
 create mode 100644 impressionists-blobs/dist/index.html
 create mode 100644 impressionists-blobs/dist/script.js
 create mode 100644 impressionists-blobs/dist/style.css
 create mode 100644 impressionists-blobs/src/index.html
 create mode 100644 impressionists-blobs/src/script.js
 create mode 100644 impressionists-blobs/src/style.css
 create mode 100644 infinite-primordial-creatures/README.markdown
 create mode 100644 infinite-primordial-creatures/dist/index.html
 create mode 100644 infinite-primordial-creatures/dist/script.js
 create mode 100644 infinite-primordial-creatures/dist/style.css
 create mode 100644 infinite-primordial-creatures/license.txt
 create mode 100644 infinite-primordial-creatures/src/index.html
 create mode 100644 infinite-primordial-creatures/src/script.babel
 create mode 100644 infinite-primordial-creatures/src/style.css
 create mode 100644 inktober-01grid/README.markdown
 create mode 100644 inktober-01grid/dist/index.html
 create mode 100644 inktober-01grid/dist/style.css
 create mode 100644 inktober-01grid/license.txt
 create mode 100644 inktober-01grid/src/index.html
 create mode 100644 inktober-01grid/src/style.css
 create mode 100644 inline-property-switching-with-custom-props/README.markdown
 create mode 100644 inline-property-switching-with-custom-props/dist/index.html
 create mode 100644 inline-property-switching-with-custom-props/dist/style.css
 create mode 100644 inline-property-switching-with-custom-props/license.txt
 create mode 100644 inline-property-switching-with-custom-props/src/index.html
 create mode 100644 inline-property-switching-with-custom-props/src/style.css
 create mode 100644 inner-listener/README.markdown
 create mode 100644 inner-listener/dist/index.html
 create mode 100644 inner-listener/dist/style.css
 create mode 100644 inner-listener/license.txt
 create mode 100644 inner-listener/src/index.html
 create mode 100644 inner-listener/src/style.css
 create mode 100644 input-not-placeholder-shown/README.markdown
 create mode 100644 input-not-placeholder-shown/dist/index.html
 create mode 100644 input-not-placeholder-shown/dist/style.css
 create mode 100644 input-not-placeholder-shown/license.txt
 create mode 100644 input-not-placeholder-shown/src/index.html
 create mode 100644 input-not-placeholder-shown/src/style.styl
 create mode 100644 instancedmesh-hierarchy-matrixworld/README.markdown
 create mode 100644 instancedmesh-hierarchy-matrixworld/dist/index.html
 create mode 100644 instancedmesh-hierarchy-matrixworld/dist/script.js
 create mode 100644 instancedmesh-hierarchy-matrixworld/dist/style.css
 create mode 100644 instancedmesh-hierarchy-matrixworld/license.txt
 create mode 100644 instancedmesh-hierarchy-matrixworld/src/index.html
 create mode 100644 instancedmesh-hierarchy-matrixworld/src/script.js
 create mode 100644 instancedmesh-hierarchy-matrixworld/src/style.css
 create mode 100644 interaction-of-color-plate-xxiv-1-the-goethe-triangle/README.markdown
 create mode 100644 interaction-of-color-plate-xxiv-1-the-goethe-triangle/dist/index.html
 create mode 100644 interaction-of-color-plate-xxiv-1-the-goethe-triangle/dist/style.css
 create mode 100644 interaction-of-color-plate-xxiv-1-the-goethe-triangle/license.txt
 create mode 100644 interaction-of-color-plate-xxiv-1-the-goethe-triangle/src/index.html
 create mode 100644 interaction-of-color-plate-xxiv-1-the-goethe-triangle/src/style.scss
 create mode 100644 interactive-kitten/README.markdown
 create mode 100644 interactive-kitten/dist/index.html
 create mode 100644 interactive-kitten/dist/script.js
 create mode 100644 interactive-kitten/dist/style.css
 create mode 100644 interactive-kitten/license.txt
 create mode 100644 interactive-kitten/src/index.html
 create mode 100644 interactive-kitten/src/script.js
 create mode 100644 interactive-kitten/src/style.css
 create mode 100644 interactive-particles-text-create-with-three-js/README.markdown
 create mode 100644 interactive-particles-text-create-with-three-js/dist/index.html
 create mode 100644 interactive-particles-text-create-with-three-js/dist/script.js
 create mode 100644 interactive-particles-text-create-with-three-js/dist/style.css
 create mode 100644 interactive-particles-text-create-with-three-js/license.txt
 create mode 100644 interactive-particles-text-create-with-three-js/src/index.html
 create mode 100644 interactive-particles-text-create-with-three-js/src/script.js
 create mode 100644 interactive-particles-text-create-with-three-js/src/style.css
 create mode 100644 interactive-skate-loading/README.markdown
 create mode 100644 interactive-skate-loading/dist/index.html
 create mode 100644 interactive-skate-loading/dist/script.js
 create mode 100644 interactive-skate-loading/dist/style.css
 create mode 100644 interactive-skate-loading/license.txt
 create mode 100644 interactive-skate-loading/src/index.html
 create mode 100644 interactive-skate-loading/src/script.js
 create mode 100644 interactive-skate-loading/src/style.scss
 create mode 100644 interior-design-builder/README.markdown
 create mode 100644 interior-design-builder/dist/index.html
 create mode 100644 interior-design-builder/dist/script.js
 create mode 100644 interior-design-builder/dist/style.css
 create mode 100644 interior-design-builder/license.txt
 create mode 100644 interior-design-builder/src/index.pug
 create mode 100644 interior-design-builder/src/script.js
 create mode 100644 interior-design-builder/src/style.scss
 create mode 100644 interruptions/README.markdown
 create mode 100644 interruptions/dist/index.html
 create mode 100644 interruptions/dist/script.js
 create mode 100644 interruptions/dist/style.css
 create mode 100644 interruptions/license.txt
 create mode 100644 interruptions/src/index.html
 create mode 100644 interruptions/src/script.js
 create mode 100644 interruptions/src/style.css
 create mode 100644 island-group-541-bytes-petitepatterns/README.markdown
 create mode 100644 island-group-541-bytes-petitepatterns/dist/index.html
 create mode 100644 island-group-541-bytes-petitepatterns/dist/script.js
 create mode 100644 island-group-541-bytes-petitepatterns/dist/style.css
 create mode 100644 island-group-541-bytes-petitepatterns/license.txt
 create mode 100644 island-group-541-bytes-petitepatterns/src/index.html
 create mode 100644 island-group-541-bytes-petitepatterns/src/script.js
 create mode 100644 island-group-541-bytes-petitepatterns/src/style.css
 create mode 100644 isometric-color-picker/README.markdown
 create mode 100644 isometric-color-picker/dist/index.html
 create mode 100644 isometric-color-picker/dist/style.css
 create mode 100644 isometric-color-picker/license.txt
 create mode 100644 isometric-color-picker/src/index.pug
 create mode 100644 isometric-color-picker/src/style.sass
 create mode 100644 joker-leaderboard/README.markdown
 create mode 100644 joker-leaderboard/dist/index.html
 create mode 100644 joker-leaderboard/dist/script.js
 create mode 100644 joker-leaderboard/dist/style.css
 create mode 100644 joker-leaderboard/license.txt
 create mode 100644 joker-leaderboard/src/index.html
 create mode 100644 joker-leaderboard/src/script.js
 create mode 100644 joker-leaderboard/src/style.css
 create mode 100644 jumping-gooey-navigation/README.markdown
 create mode 100644 jumping-gooey-navigation/dist/index.html
 create mode 100644 jumping-gooey-navigation/dist/script.js
 create mode 100644 jumping-gooey-navigation/dist/style.css
 create mode 100644 jumping-gooey-navigation/license.txt
 create mode 100644 jumping-gooey-navigation/src/index.html
 create mode 100644 jumping-gooey-navigation/src/script.js
 create mode 100644 jumping-gooey-navigation/src/style.css
 create mode 100644 keep-on-stackin-3d-css/README.markdown
 create mode 100644 keep-on-stackin-3d-css/dist/index.html
 create mode 100644 keep-on-stackin-3d-css/dist/script.js
 create mode 100644 keep-on-stackin-3d-css/dist/style.css
 create mode 100644 keep-on-stackin-3d-css/license.txt
 create mode 100644 keep-on-stackin-3d-css/src/index.pug
 create mode 100644 keep-on-stackin-3d-css/src/script.babel
 create mode 100644 keep-on-stackin-3d-css/src/style.styl
 create mode 100644 keyframes-1-9-3-solar-eclipse-loader/README.markdown
 create mode 100644 keyframes-1-9-3-solar-eclipse-loader/dist/index.html
 create mode 100644 keyframes-1-9-3-solar-eclipse-loader/dist/script.js
 create mode 100644 keyframes-1-9-3-solar-eclipse-loader/dist/style.css
 create mode 100644 keyframes-1-9-3-solar-eclipse-loader/license.txt
 create mode 100644 keyframes-1-9-3-solar-eclipse-loader/src/index.html
 create mode 100644 keyframes-1-9-3-solar-eclipse-loader/src/script.js
 create mode 100644 keyframes-1-9-3-solar-eclipse-loader/src/style.scss
 create mode 100644 knob-input-component/README.markdown
 create mode 100644 knob-input-component/dist/index.html
 create mode 100644 knob-input-component/dist/script.js
 create mode 100644 knob-input-component/dist/style.css
 create mode 100644 knob-input-component/license.txt
 create mode 100644 knob-input-component/src/index.pug
 create mode 100644 knob-input-component/src/script.js
 create mode 100644 knob-input-component/src/style.scss
 create mode 100644 kurzgesagt-style-earth-3d-zdog/README.markdown
 create mode 100644 kurzgesagt-style-earth-3d-zdog/dist/index.html
 create mode 100644 kurzgesagt-style-earth-3d-zdog/dist/script.js
 create mode 100644 kurzgesagt-style-earth-3d-zdog/dist/style.css
 create mode 100644 kurzgesagt-style-earth-3d-zdog/license.txt
 create mode 100644 kurzgesagt-style-earth-3d-zdog/src/index.html
 create mode 100644 kurzgesagt-style-earth-3d-zdog/src/script.js
 create mode 100644 kurzgesagt-style-earth-3d-zdog/src/style.scss
 create mode 100644 lake-reflection-444-bytes-petitepatterns/README.markdown
 create mode 100644 lake-reflection-444-bytes-petitepatterns/dist/index.html
 create mode 100644 lake-reflection-444-bytes-petitepatterns/dist/script.js
 create mode 100644 lake-reflection-444-bytes-petitepatterns/dist/style.css
 create mode 100644 lake-reflection-444-bytes-petitepatterns/license.txt
 create mode 100644 lake-reflection-444-bytes-petitepatterns/src/index.html
 create mode 100644 lake-reflection-444-bytes-petitepatterns/src/script.js
 create mode 100644 lake-reflection-444-bytes-petitepatterns/src/style.css
 create mode 100644 latent-cycles/README.markdown
 create mode 100644 latent-cycles/dist/index.html
 create mode 100644 latent-cycles/dist/script.js
 create mode 100644 latent-cycles/dist/style.css
 create mode 100644 latent-cycles/license.txt
 create mode 100644 latent-cycles/src/index.html
 create mode 100644 latent-cycles/src/script.babel
 create mode 100644 latent-cycles/src/style.css
 create mode 100644 layout-templates-with-css-grid/README.markdown
 create mode 100644 layout-templates-with-css-grid/dist/index.html
 create mode 100644 layout-templates-with-css-grid/dist/style.css
 create mode 100644 layout-templates-with-css-grid/license.txt
 create mode 100644 layout-templates-with-css-grid/src/index.html
 create mode 100644 layout-templates-with-css-grid/src/style.scss
 create mode 100644 leaving-out-particularities/README.markdown
 create mode 100644 leaving-out-particularities/dist/index.html
 create mode 100644 leaving-out-particularities/dist/script.js
 create mode 100644 leaving-out-particularities/dist/style.css
 create mode 100644 leaving-out-particularities/license.txt
 create mode 100644 leaving-out-particularities/src/index.html
 create mode 100644 leaving-out-particularities/src/script.js
 create mode 100644 leaving-out-particularities/src/style.css
 create mode 100644 letter-hop/LICENSE.txt
 create mode 100644 letter-hop/README.md
 create mode 100644 letter-hop/dist/index.html
 create mode 100644 letter-hop/dist/script.js
 create mode 100644 letter-hop/dist/style.css
 create mode 100644 letter-hop/src/index.html
 create mode 100644 letter-hop/src/script.js
 create mode 100644 letter-hop/src/style.scss
 create mode 100644 lines-doing-a-little-group-dance/README.markdown
 create mode 100644 lines-doing-a-little-group-dance/dist/index.html
 create mode 100644 lines-doing-a-little-group-dance/dist/script.js
 create mode 100644 lines-doing-a-little-group-dance/dist/style.css
 create mode 100644 lines-doing-a-little-group-dance/license.txt
 create mode 100644 lines-doing-a-little-group-dance/src/index.html
 create mode 100644 lines-doing-a-little-group-dance/src/script.js
 create mode 100644 lines-doing-a-little-group-dance/src/style.css
 create mode 100644 link-hover-animation/README.markdown
 create mode 100644 link-hover-animation/dist/index.html
 create mode 100644 link-hover-animation/dist/style.css
 create mode 100644 link-hover-animation/license.txt
 create mode 100644 link-hover-animation/src/index.html
 create mode 100644 link-hover-animation/src/style.scss
 create mode 100644 liquid-grid/README.markdown
 create mode 100644 liquid-grid/dist/index.html
 create mode 100644 liquid-grid/dist/script.js
 create mode 100644 liquid-grid/dist/style.css
 create mode 100644 liquid-grid/license.txt
 create mode 100644 liquid-grid/src/index.html
 create mode 100644 liquid-grid/src/script.js
 create mode 100644 liquid-grid/src/style.css
 create mode 100644 liquid-maskingscroll/README.markdown
 create mode 100644 liquid-maskingscroll/dist/index.html
 create mode 100644 liquid-maskingscroll/dist/script.js
 create mode 100644 liquid-maskingscroll/dist/style.css
 create mode 100644 liquid-maskingscroll/license.txt
 create mode 100644 liquid-maskingscroll/src/index.html
 create mode 100644 liquid-maskingscroll/src/script.js
 create mode 100644 liquid-maskingscroll/src/style.css
 create mode 100644 literally-lit-elements/README.markdown
 create mode 100644 literally-lit-elements/dist/index.html
 create mode 100644 literally-lit-elements/dist/script.js
 create mode 100644 literally-lit-elements/dist/style.css
 create mode 100644 literally-lit-elements/license.txt
 create mode 100644 literally-lit-elements/src/index.pug
 create mode 100644 literally-lit-elements/src/script.js
 create mode 100644 literally-lit-elements/src/style.styl
 create mode 100644 live-react-gallery-with-keyboard-control-keyframers-3-24/README.markdown
 create mode 100644 live-react-gallery-with-keyboard-control-keyframers-3-24/dist/index.html
 create mode 100644 live-react-gallery-with-keyboard-control-keyframers-3-24/dist/script.js
 create mode 100644 live-react-gallery-with-keyboard-control-keyframers-3-24/dist/style.css
 create mode 100644 live-react-gallery-with-keyboard-control-keyframers-3-24/license.txt
 create mode 100644 live-react-gallery-with-keyboard-control-keyframers-3-24/src/index.html
 create mode 100644 live-react-gallery-with-keyboard-control-keyframers-3-24/src/script.babel
 create mode 100644 live-react-gallery-with-keyboard-control-keyframers-3-24/src/style.scss
 create mode 100644 loader-concept/README.markdown
 create mode 100644 loader-concept/dist/index.html
 create mode 100644 loader-concept/dist/script.js
 create mode 100644 loader-concept/dist/style.css
 create mode 100644 loader-concept/license.txt
 create mode 100644 loader-concept/src/index.html
 create mode 100644 loader-concept/src/script.js
 create mode 100644 loader-concept/src/style.css
 create mode 100644 lonely-little-box/README.markdown
 create mode 100644 lonely-little-box/dist/index.html
 create mode 100644 lonely-little-box/dist/script.js
 create mode 100644 lonely-little-box/dist/style.css
 create mode 100644 lonely-little-box/license.txt
 create mode 100644 lonely-little-box/src/index.html
 create mode 100644 lonely-little-box/src/script.js
 create mode 100644 lonely-little-box/src/style.scss
 create mode 100644 look-at-concept/README.markdown
 create mode 100644 look-at-concept/dist/index.html
 create mode 100644 look-at-concept/dist/script.js
 create mode 100644 look-at-concept/dist/style.css
 create mode 100644 look-at-concept/license.txt
 create mode 100644 look-at-concept/src/index.html
 create mode 100644 look-at-concept/src/script.babel
 create mode 100644 look-at-concept/src/style.sass
 create mode 100644 loosey-goosey-1-0-0/README.markdown
 create mode 100644 loosey-goosey-1-0-0/dist/index.html
 create mode 100644 loosey-goosey-1-0-0/dist/script.js
 create mode 100644 loosey-goosey-1-0-0/dist/style.css
 create mode 100644 loosey-goosey-1-0-0/license.txt
 create mode 100644 loosey-goosey-1-0-0/src/index.html
 create mode 100644 loosey-goosey-1-0-0/src/script.babel
 create mode 100644 loosey-goosey-1-0-0/src/style.scss
 create mode 100644 lotsa-notifications/LICENSE.txt
 create mode 100644 lotsa-notifications/README.md
 create mode 100644 lotsa-notifications/dist/index.html
 create mode 100644 lotsa-notifications/dist/script.js
 create mode 100644 lotsa-notifications/dist/style.css
 create mode 100644 lotsa-notifications/src/index.html
 create mode 100644 lotsa-notifications/src/script.js
 create mode 100644 lotsa-notifications/src/style.css
 create mode 100644 love-hypnosis/README.markdown
 create mode 100644 love-hypnosis/dist/index.html
 create mode 100644 love-hypnosis/dist/script.js
 create mode 100644 love-hypnosis/dist/style.css
 create mode 100644 love-hypnosis/license.txt
 create mode 100644 love-hypnosis/src/index.html
 create mode 100644 love-hypnosis/src/script.js
 create mode 100644 love-hypnosis/src/style.css
 create mode 100644 magic-card/README.markdown
 create mode 100644 magic-card/dist/index.html
 create mode 100644 magic-card/dist/style.css
 create mode 100644 magic-card/license.txt
 create mode 100644 magic-card/src/index.html
 create mode 100644 magic-card/src/style.css
 create mode 100644 make-the-web-less-boring/README.markdown
 create mode 100644 make-the-web-less-boring/dist/index.html
 create mode 100644 make-the-web-less-boring/dist/script.js
 create mode 100644 make-the-web-less-boring/dist/style.css
 create mode 100644 make-the-web-less-boring/license.txt
 create mode 100644 make-the-web-less-boring/src/index.html
 create mode 100644 make-the-web-less-boring/src/script.js
 create mode 100644 make-the-web-less-boring/src/style.scss
 create mode 100644 mars-explorer-scrolltrigger-demo/README.markdown
 create mode 100644 mars-explorer-scrolltrigger-demo/dist/index.html
 create mode 100644 mars-explorer-scrolltrigger-demo/dist/script.js
 create mode 100644 mars-explorer-scrolltrigger-demo/dist/style.css
 create mode 100644 mars-explorer-scrolltrigger-demo/license.txt
 create mode 100644 mars-explorer-scrolltrigger-demo/src/index.html
 create mode 100644 mars-explorer-scrolltrigger-demo/src/script.babel
 create mode 100644 mars-explorer-scrolltrigger-demo/src/style.less
 create mode 100644 material-dashboard-lite-master/.gitignore
 create mode 100644 material-dashboard-lite-master/.jscsrc
 create mode 100644 material-dashboard-lite-master/LICENSE
 create mode 100644 material-dashboard-lite-master/README.md
 create mode 100644 material-dashboard-lite-master/bower.json
 create mode 100644 material-dashboard-lite-master/dist/css/application.css
 create mode 100644 material-dashboard-lite-master/dist/css/lib/getmdl-select.min.css
 create mode 100644 material-dashboard-lite-master/dist/css/lib/nv.d3.css
 create mode 100644 material-dashboard-lite-master/dist/forms.html
 create mode 100644 material-dashboard-lite-master/dist/images/DB_16х16_20200928204120.png
 create mode 100644 material-dashboard-lite-master/dist/images/Dark_background_1920x1080_20200928204120.png
 create mode 100644 material-dashboard-lite-master/dist/images/Icon_20191114113633.png
 create mode 100644 material-dashboard-lite-master/dist/images/Icon_header_20191114113633.png
 create mode 100644 material-dashboard-lite-master/dist/images/cotoneaster_20191114113633.jpg
 create mode 100644 material-dashboard-lite-master/dist/images/robot_20201001164800.png
 create mode 100644 material-dashboard-lite-master/dist/images/skype_20191114113633.svg
 create mode 100644 material-dashboard-lite-master/dist/images/weather_bck_20201001164800.png
 create mode 100644 material-dashboard-lite-master/dist/index.html
 create mode 100644 material-dashboard-lite-master/dist/js/d3.js
 create mode 100644 material-dashboard-lite-master/dist/js/getmdl-select.min.js
 create mode 100644 material-dashboard-lite-master/dist/js/material.js
 create mode 100644 material-dashboard-lite-master/dist/js/nv.d3.js
 create mode 100644 material-dashboard-lite-master/dist/js/widgets/employer-form/employer-form.js
 create mode 100644 material-dashboard-lite-master/dist/js/widgets/line-chart/line-chart-nvd3.js
 create mode 100644 material-dashboard-lite-master/dist/js/widgets/pie-chart/pie-chart-nvd3.js
 create mode 100644 material-dashboard-lite-master/dist/js/widgets/table/table.js
 create mode 100644 material-dashboard-lite-master/dist/js/widgets/todo/todo.js
 create mode 100644 material-dashboard-lite-master/gulpfile.js
 create mode 100644 material-dashboard-lite-master/package.json
 create mode 100644 material-dashboard-lite-master/src/application.scss
 create mode 100644 material-dashboard-lite-master/src/button/button.scss
 create mode 100644 material-dashboard-lite-master/src/card/card.scss
 create mode 100644 material-dashboard-lite-master/src/checkbox/checkbox.scss
 create mode 100644 material-dashboard-lite-master/src/data-table/data-table.scss
 create mode 100644 material-dashboard-lite-master/src/forms.html
 create mode 100644 material-dashboard-lite-master/src/helper.scss
 create mode 100644 material-dashboard-lite-master/src/images/card_20191114113633.jpg
 create mode 100644 material-dashboard-lite-master/src/images/cloudy_and_snow_20191114113633.svg
 create mode 100644 material-dashboard-lite-master/src/images/imgo_20191114113633.jpg
 create mode 100644 material-dashboard-lite-master/src/images/skype_20191114113633.svg
 create mode 100644 material-dashboard-lite-master/src/images/tick-mask_20191114113633.svg
 create mode 100644 material-dashboard-lite-master/src/images/tick_20191114113633.svg
 create mode 100644 material-dashboard-lite-master/src/images/tick_dark_20191114113633.svg
 create mode 100644 material-dashboard-lite-master/src/images/watch_white_20191114113633.svg
 create mode 100644 material-dashboard-lite-master/src/index.html
 create mode 100644 material-dashboard-lite-master/src/label/label.scss
 create mode 100644 material-dashboard-lite-master/src/layout/layout.scss
 create mode 100644 material-dashboard-lite-master/src/list/list.scss
 create mode 100644 material-dashboard-lite-master/src/menu/menu.scss
 create mode 100644 material-dashboard-lite-master/src/mixins.scss
 create mode 100644 material-dashboard-lite-master/src/progress/progress.scss
 create mode 100644 material-dashboard-lite-master/src/textfield/textfield.scss
 create mode 100644 material-dashboard-lite-master/src/tooltip/tooltip.scss
 create mode 100644 material-dashboard-lite-master/src/variables.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/account-dropdown/account-dropdown.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/chart-legend/chart-legend.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/cotoneaster/cotoneaster.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/employer-form/employer-form.js
 create mode 100644 material-dashboard-lite-master/src/widgets/employer-form/employer-form.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/form/form.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/input-group/input-group.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/line-chart/line-chart-nvd3.js
 create mode 100644 material-dashboard-lite-master/src/widgets/line-chart/line-chart.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/link/link.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/message-notifications/messages-dropdown.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/notifications-dropdown/notifications-dropdown.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/pie-chart/pie-chart-nvd3.js
 create mode 100644 material-dashboard-lite-master/src/widgets/pie-chart/pie-chart.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/robot/robot.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/setting-dropdown/settings-dropdown.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/table/table.js
 create mode 100644 material-dashboard-lite-master/src/widgets/table/table.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/todo/todo.js
 create mode 100644 material-dashboard-lite-master/src/widgets/todo/todo.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/trending/trending.scss
 create mode 100644 material-dashboard-lite-master/src/widgets/weather/weather.scss
 create mode 100644 matrix-of-cube-with-one-element/README.markdown
 create mode 100644 matrix-of-cube-with-one-element/dist/index.html
 create mode 100644 matrix-of-cube-with-one-element/dist/style.css
 create mode 100644 matrix-of-cube-with-one-element/license.txt
 create mode 100644 matrix-of-cube-with-one-element/src/index.html
 create mode 100644 matrix-of-cube-with-one-element/src/style.css
 create mode 100644 mc-escher-cube-23150-with-css-only/README.markdown
 create mode 100644 mc-escher-cube-23150-with-css-only/dist/index.html
 create mode 100644 mc-escher-cube-23150-with-css-only/dist/script.js
 create mode 100644 mc-escher-cube-23150-with-css-only/dist/style.css
 create mode 100644 mc-escher-cube-23150-with-css-only/license.txt
 create mode 100644 mc-escher-cube-23150-with-css-only/src/index.pug
 create mode 100644 mc-escher-cube-23150-with-css-only/src/script.js
 create mode 100644 mc-escher-cube-23150-with-css-only/src/style.scss
 create mode 100644 meow-meow-keyboard/README.markdown
 create mode 100644 meow-meow-keyboard/dist/index.html
 create mode 100644 meow-meow-keyboard/dist/script.js
 create mode 100644 meow-meow-keyboard/dist/style.css
 create mode 100644 meow-meow-keyboard/license.txt
 create mode 100644 meow-meow-keyboard/src/index.html
 create mode 100644 meow-meow-keyboard/src/script.js
 create mode 100644 meow-meow-keyboard/src/style.scss
 create mode 100644 metal-buttons/README.markdown
 create mode 100644 metal-buttons/dist/index.html
 create mode 100644 metal-buttons/dist/style.css
 create mode 100644 metal-buttons/license.txt
 create mode 100644 metal-buttons/src/index.html
 create mode 100644 metal-buttons/src/style.css
 create mode 100644 minimal-pure-css-textile-patterns/README.markdown
 create mode 100644 minimal-pure-css-textile-patterns/dist/index.html
 create mode 100644 minimal-pure-css-textile-patterns/dist/script.js
 create mode 100644 minimal-pure-css-textile-patterns/dist/style.css
 create mode 100644 minimal-pure-css-textile-patterns/license.txt
 create mode 100644 minimal-pure-css-textile-patterns/src/index.pug
 create mode 100644 minimal-pure-css-textile-patterns/src/script.babel
 create mode 100644 minimal-pure-css-textile-patterns/src/style.scss
 create mode 100644 mobile-menu/README.markdown
 create mode 100644 mobile-menu/dist/index.html
 create mode 100644 mobile-menu/dist/script.js
 create mode 100644 mobile-menu/dist/style.css
 create mode 100644 mobile-menu/license.txt
 create mode 100644 mobile-menu/src/index.pug
 create mode 100644 mobile-menu/src/script.js
 create mode 100644 mobile-menu/src/style.scss
 create mode 100644 mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/README.markdown
 create mode 100644 mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/dist/index.html
 create mode 100644 mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/dist/script.js
 create mode 100644 mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/license.txt
 create mode 100644 mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/src/index.html
 create mode 100644 mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/src/script.vue
 create mode 100644 modern-blog-layout-with-css-grid/README.markdown
 create mode 100644 modern-blog-layout-with-css-grid/dist/index.html
 create mode 100644 modern-blog-layout-with-css-grid/dist/style.css
 create mode 100644 modern-blog-layout-with-css-grid/license.txt
 create mode 100644 modern-blog-layout-with-css-grid/src/index.html
 create mode 100644 modern-blog-layout-with-css-grid/src/style.scss
 create mode 100644 monokai/README.markdown
 create mode 100644 monokai/dist/index.html
 create mode 100644 monokai/dist/style.css
 create mode 100644 monokai/license.txt
 create mode 100644 monokai/src/index.html
 create mode 100644 monokai/src/style.css
 create mode 100644 moonriverpure-javascript/README.markdown
 create mode 100644 moonriverpure-javascript/dist/index.html
 create mode 100644 moonriverpure-javascript/dist/script.js
 create mode 100644 moonriverpure-javascript/dist/style.css
 create mode 100644 moonriverpure-javascript/license.txt
 create mode 100644 moonriverpure-javascript/src/index.html
 create mode 100644 moonriverpure-javascript/src/script.js
 create mode 100644 moonriverpure-javascript/src/style.css
 create mode 100644 more-cursed-accent-color-vibes/README.markdown
 create mode 100644 more-cursed-accent-color-vibes/dist/index.html
 create mode 100644 more-cursed-accent-color-vibes/dist/style.css
 create mode 100644 more-cursed-accent-color-vibes/license.txt
 create mode 100644 more-cursed-accent-color-vibes/src/index.pug
 create mode 100644 more-cursed-accent-color-vibes/src/style.css
 create mode 100644 morning/README.markdown
 create mode 100644 morning/dist/index.html
 create mode 100644 morning/dist/script.js
 create mode 100644 morning/dist/style.css
 create mode 100644 morning/license.txt
 create mode 100644 morning/src/index.html
 create mode 100644 morning/src/script.babel
 create mode 100644 morning/src/style.scss
 create mode 100644 morphing-circles-animationclick-to-show-mechanics/README.markdown
 create mode 100644 morphing-circles-animationclick-to-show-mechanics/dist/index.html
 create mode 100644 morphing-circles-animationclick-to-show-mechanics/dist/script.js
 create mode 100644 morphing-circles-animationclick-to-show-mechanics/dist/style.css
 create mode 100644 morphing-circles-animationclick-to-show-mechanics/license.txt
 create mode 100644 morphing-circles-animationclick-to-show-mechanics/src/index.pug
 create mode 100644 morphing-circles-animationclick-to-show-mechanics/src/script.babel
 create mode 100644 morphing-circles-animationclick-to-show-mechanics/src/style.styl
 create mode 100644 morphing-multi-state-button-with-view-transitions/LICENSE.txt
 create mode 100644 morphing-multi-state-button-with-view-transitions/README.md
 create mode 100644 morphing-multi-state-button-with-view-transitions/dist/index.html
 create mode 100644 morphing-multi-state-button-with-view-transitions/dist/script.js
 create mode 100644 morphing-multi-state-button-with-view-transitions/dist/style.css
 create mode 100644 morphing-multi-state-button-with-view-transitions/src/index.html
 create mode 100644 morphing-multi-state-button-with-view-transitions/src/script.js
 create mode 100644 morphing-multi-state-button-with-view-transitions/src/style.css
 create mode 100644 moving-mirror-web-audio-api-and-three-js/README.markdown
 create mode 100644 moving-mirror-web-audio-api-and-three-js/dist/index.html
 create mode 100644 moving-mirror-web-audio-api-and-three-js/dist/script.js
 create mode 100644 moving-mirror-web-audio-api-and-three-js/dist/style.css
 create mode 100644 moving-mirror-web-audio-api-and-three-js/license.txt
 create mode 100644 moving-mirror-web-audio-api-and-three-js/src/index.html
 create mode 100644 moving-mirror-web-audio-api-and-three-js/src/script.js
 create mode 100644 moving-mirror-web-audio-api-and-three-js/src/style.css
 create mode 100644 multi-colored-text-with-css/README.markdown
 create mode 100644 multi-colored-text-with-css/dist/index.html
 create mode 100644 multi-colored-text-with-css/dist/script.js
 create mode 100644 multi-colored-text-with-css/dist/style.css
 create mode 100644 multi-colored-text-with-css/license.txt
 create mode 100644 multi-colored-text-with-css/src/index.html
 create mode 100644 multi-colored-text-with-css/src/script.js
 create mode 100644 multi-colored-text-with-css/src/style.css
 create mode 100644 music-app/README.markdown
 create mode 100644 music-app/dist/index.html
 create mode 100644 music-app/dist/script.js
 create mode 100644 music-app/dist/style.css
 create mode 100644 music-app/license.txt
 create mode 100644 music-app/src/index.html
 create mode 100644 music-app/src/script.js
 create mode 100644 music-app/src/style.scss
 create mode 100644 muson-css/README.markdown
 create mode 100644 muson-css/dist/index.html
 create mode 100644 muson-css/dist/style.css
 create mode 100644 muson-css/license.txt
 create mode 100644 muson-css/src/index.html
 create mode 100644 muson-css/src/style.css
 create mode 100644 mutationobserver-example/README.markdown
 create mode 100644 mutationobserver-example/dist/index.html
 create mode 100644 mutationobserver-example/dist/script.js
 create mode 100644 mutationobserver-example/dist/style.css
 create mode 100644 mutationobserver-example/license.txt
 create mode 100644 mutationobserver-example/src/index.html
 create mode 100644 mutationobserver-example/src/script.js
 create mode 100644 mutationobserver-example/src/style.css
 create mode 100644 native-masonry-layout-with-css-grid/README.markdown
 create mode 100644 native-masonry-layout-with-css-grid/dist/index.html
 create mode 100644 native-masonry-layout-with-css-grid/dist/style.css
 create mode 100644 native-masonry-layout-with-css-grid/license.txt
 create mode 100644 native-masonry-layout-with-css-grid/src/index.html
 create mode 100644 native-masonry-layout-with-css-grid/src/style.css
 create mode 100644 neptune/README.markdown
 create mode 100644 neptune/dist/index.html
 create mode 100644 neptune/dist/style.css
 create mode 100644 neptune/license.txt
 create mode 100644 neptune/src/index.html
 create mode 100644 neptune/src/style.scss
 create mode 100644 neumorphic-playground/README.markdown
 create mode 100644 neumorphic-playground/dist/index.html
 create mode 100644 neumorphic-playground/dist/script.js
 create mode 100644 neumorphic-playground/dist/style.css
 create mode 100644 neumorphic-playground/license.txt
 create mode 100644 neumorphic-playground/src/index.pug
 create mode 100644 neumorphic-playground/src/script.babel
 create mode 100644 neumorphic-playground/src/style.styl
 create mode 100644 neuomorphic-checkboxes/README.markdown
 create mode 100644 neuomorphic-checkboxes/dist/index.html
 create mode 100644 neuomorphic-checkboxes/dist/style.css
 create mode 100644 neuomorphic-checkboxes/license.txt
 create mode 100644 neuomorphic-checkboxes/src/index.html
 create mode 100644 neuomorphic-checkboxes/src/style.scss
 create mode 100644 neuomorphism-trapped-animated-blob-v1-0/README.markdown
 create mode 100644 neuomorphism-trapped-animated-blob-v1-0/dist/index.html
 create mode 100644 neuomorphism-trapped-animated-blob-v1-0/dist/style.css
 create mode 100644 neuomorphism-trapped-animated-blob-v1-0/license.txt
 create mode 100644 neuomorphism-trapped-animated-blob-v1-0/src/index.html
 create mode 100644 neuomorphism-trapped-animated-blob-v1-0/src/style.scss
 create mode 100644 news-section-w-tailwind-css/README.markdown
 create mode 100644 news-section-w-tailwind-css/dist/index.html
 create mode 100644 news-section-w-tailwind-css/license.txt
 create mode 100644 news-section-w-tailwind-css/src/index.html
 create mode 100644 night-day/README.markdown
 create mode 100644 night-day/dist/index.html
 create mode 100644 night-day/dist/script.js
 create mode 100644 night-day/dist/style.css
 create mode 100644 night-day/license.txt
 create mode 100644 night-day/src/index.html
 create mode 100644 night-day/src/script.js
 create mode 100644 night-day/src/style.css
 create mode 100644 noisy-svg-lines/README.markdown
 create mode 100644 noisy-svg-lines/dist/blgjlm.js
 create mode 100644 noisy-svg-lines/dist/index.html
 create mode 100644 noisy-svg-lines/dist/script.js
 create mode 100644 noisy-svg-lines/dist/style.css
 create mode 100644 noisy-svg-lines/license.txt
 create mode 100644 noisy-svg-lines/src/blgjlm.js
 create mode 100644 noisy-svg-lines/src/index.html
 create mode 100644 noisy-svg-lines/src/script.js
 create mode 100644 noisy-svg-lines/src/style.css
 create mode 100644 noisy-vertical-svg-lines/README.markdown
 create mode 100644 noisy-vertical-svg-lines/dist/index.html
 create mode 100644 noisy-vertical-svg-lines/dist/script.js
 create mode 100644 noisy-vertical-svg-lines/dist/style.css
 create mode 100644 noisy-vertical-svg-lines/license.txt
 create mode 100644 noisy-vertical-svg-lines/src/index.html
 create mode 100644 noisy-vertical-svg-lines/src/script.js
 create mode 100644 noisy-vertical-svg-lines/src/style.css
 create mode 100644 onboarding-sequence/README.markdown
 create mode 100644 onboarding-sequence/dist/index.html
 create mode 100644 onboarding-sequence/dist/script.js
 create mode 100644 onboarding-sequence/dist/style.css
 create mode 100644 onboarding-sequence/license.txt
 create mode 100644 onboarding-sequence/src/index.html
 create mode 100644 onboarding-sequence/src/script.babel
 create mode 100644 onboarding-sequence/src/style.css
 create mode 100644 one-hundred-rules/README.markdown
 create mode 100644 one-hundred-rules/dist/index.html
 create mode 100644 one-hundred-rules/dist/style.css
 create mode 100644 one-hundred-rules/license.txt
 create mode 100644 one-hundred-rules/src/index.pug
 create mode 100644 one-hundred-rules/src/style.scss
 create mode 100644 only-css-infinite-plug-in/README.markdown
 create mode 100644 only-css-infinite-plug-in/dist/index.html
 create mode 100644 only-css-infinite-plug-in/dist/style.css
 create mode 100644 only-css-infinite-plug-in/license.txt
 create mode 100644 only-css-infinite-plug-in/src/index.pug
 create mode 100644 only-css-infinite-plug-in/src/style.scss
 create mode 100644 only-css-infinite-wave/README.markdown
 create mode 100644 only-css-infinite-wave/dist/index.html
 create mode 100644 only-css-infinite-wave/dist/style.css
 create mode 100644 only-css-infinite-wave/license.txt
 create mode 100644 only-css-infinite-wave/src/index.pug
 create mode 100644 only-css-infinite-wave/src/style.scss
 create mode 100644 only-css-moon-clip/README.markdown
 create mode 100644 only-css-moon-clip/dist/index.html
 create mode 100644 only-css-moon-clip/dist/style.css
 create mode 100644 only-css-moon-clip/license.txt
 create mode 100644 only-css-moon-clip/src/index.pug
 create mode 100644 only-css-moon-clip/src/style.scss
 create mode 100644 only-css-mt-fuji/README.markdown
 create mode 100644 only-css-mt-fuji/dist/index.html
 create mode 100644 only-css-mt-fuji/dist/style.css
 create mode 100644 only-css-mt-fuji/license.txt
 create mode 100644 only-css-mt-fuji/src/index.pug
 create mode 100644 only-css-mt-fuji/src/style.scss
 create mode 100644 only-css-satellite/README.markdown
 create mode 100644 only-css-satellite/dist/index.html
 create mode 100644 only-css-satellite/dist/style.css
 create mode 100644 only-css-satellite/license.txt
 create mode 100644 only-css-satellite/src/index.pug
 create mode 100644 only-css-satellite/src/style.scss
 create mode 100644 only-css-wave-dots/README.markdown
 create mode 100644 only-css-wave-dots/dist/index.html
 create mode 100644 only-css-wave-dots/dist/style.css
 create mode 100644 only-css-wave-dots/license.txt
 create mode 100644 only-css-wave-dots/src/index.pug
 create mode 100644 only-css-wave-dots/src/style.scss
 create mode 100644 orange-and-blue-distance-field-spiral/README.markdown
 create mode 100644 orange-and-blue-distance-field-spiral/dist/index.html
 create mode 100644 orange-and-blue-distance-field-spiral/dist/script.js
 create mode 100644 orange-and-blue-distance-field-spiral/dist/style.css
 create mode 100644 orange-and-blue-distance-field-spiral/license.txt
 create mode 100644 orange-and-blue-distance-field-spiral/src/index.html
 create mode 100644 orange-and-blue-distance-field-spiral/src/script.js
 create mode 100644 orange-and-blue-distance-field-spiral/src/style.css
 create mode 100644 p5js-svg-flow-field/README.markdown
 create mode 100644 p5js-svg-flow-field/dist/index.html
 create mode 100644 p5js-svg-flow-field/dist/script.js
 create mode 100644 p5js-svg-flow-field/dist/style.css
 create mode 100644 p5js-svg-flow-field/license.txt
 create mode 100644 p5js-svg-flow-field/src/index.html
 create mode 100644 p5js-svg-flow-field/src/script.js
 create mode 100644 p5js-svg-flow-field/src/style.scss
 create mode 100644 pagination-buttons/README.markdown
 create mode 100644 pagination-buttons/dist/index.html
 create mode 100644 pagination-buttons/dist/script.js
 create mode 100644 pagination-buttons/dist/style.css
 create mode 100644 pagination-buttons/license.txt
 create mode 100644 pagination-buttons/src/index.html
 create mode 100644 pagination-buttons/src/script.js
 create mode 100644 pagination-buttons/src/style.css
 create mode 100644 panda-button/README.markdown
 create mode 100644 panda-button/dist/index.html
 create mode 100644 panda-button/dist/script.js
 create mode 100644 panda-button/dist/style.css
 create mode 100644 panda-button/license.txt
 create mode 100644 panda-button/src/index.html
 create mode 100644 panda-button/src/script.js
 create mode 100644 panda-button/src/style.css
 create mode 100644 pantone-color-chips/README.markdown
 create mode 100644 pantone-color-chips/dist/index.html
 create mode 100644 pantone-color-chips/dist/script.js
 create mode 100644 pantone-color-chips/dist/style.css
 create mode 100644 pantone-color-chips/license.txt
 create mode 100644 pantone-color-chips/src/index.html
 create mode 100644 pantone-color-chips/src/script.js
 create mode 100644 pantone-color-chips/src/style.css
 create mode 100644 paper-chase/README.markdown
 create mode 100644 paper-chase/dist/index.html
 create mode 100644 paper-chase/dist/style.css
 create mode 100644 paper-chase/license.txt
 create mode 100644 paper-chase/src/index.haml
 create mode 100644 paper-chase/src/style.scss
 create mode 100644 paper-cut-text-effect/README.markdown
 create mode 100644 paper-cut-text-effect/dist/index.html
 create mode 100644 paper-cut-text-effect/dist/script.js
 create mode 100644 paper-cut-text-effect/dist/style.css
 create mode 100644 paper-cut-text-effect/license.txt
 create mode 100644 paper-cut-text-effect/src/index.html
 create mode 100644 paper-cut-text-effect/src/script.babel
 create mode 100644 paper-cut-text-effect/src/style.scss
 create mode 100644 paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/README.markdown
 create mode 100644 paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/dist/index.html
 create mode 100644 paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/dist/style.css
 create mode 100644 paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/license.txt
 create mode 100644 paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/src/index.html
 create mode 100644 paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/src/style.scss
 create mode 100644 particle-photos/README.markdown
 create mode 100644 particle-photos/dist/index.html
 create mode 100644 particle-photos/dist/script.js
 create mode 100644 particle-photos/dist/style.css
 create mode 100644 particle-photos/license.txt
 create mode 100644 particle-photos/src/index.html
 create mode 100644 particle-photos/src/script.js
 create mode 100644 particle-photos/src/style.css
 create mode 100644 pdf-flyer-generator/README.markdown
 create mode 100644 pdf-flyer-generator/dist/index.html
 create mode 100644 pdf-flyer-generator/dist/script.js
 create mode 100644 pdf-flyer-generator/dist/style.css
 create mode 100644 pdf-flyer-generator/license.txt
 create mode 100644 pdf-flyer-generator/src/index.html
 create mode 100644 pdf-flyer-generator/src/script.js
 create mode 100644 pdf-flyer-generator/src/style.less
 create mode 100644 pen-export-MbpPja/LICENSE.txt
 create mode 100644 pen-export-MbpPja/README.md
 create mode 100644 pen-export-MbpPja/index.html
 create mode 100644 pen-export-MbpPja/style.css
 create mode 100644 pen-export-tqdmv/LICENSE.txt
 create mode 100644 pen-export-tqdmv/README.md
 create mode 100644 pen-export-tqdmv/dist/index.html
 create mode 100644 pen-export-tqdmv/dist/script.js
 create mode 100644 pen-export-tqdmv/dist/style.css
 create mode 100644 pen-export-tqdmv/src/index.html
 create mode 100644 pen-export-tqdmv/src/script.js
 create mode 100644 pen-export-tqdmv/src/style.css
 create mode 100644 phone-reflection/README.markdown
 create mode 100644 phone-reflection/dist/index.html
 create mode 100644 phone-reflection/dist/script.js
 create mode 100644 phone-reflection/dist/style.css
 create mode 100644 phone-reflection/license.txt
 create mode 100644 phone-reflection/src/index.html
 create mode 100644 phone-reflection/src/script.js
 create mode 100644 phone-reflection/src/style.css
 create mode 100644 pie-chart-with-pure-css/README.markdown
 create mode 100644 pie-chart-with-pure-css/dist/index.html
 create mode 100644 pie-chart-with-pure-css/dist/style.css
 create mode 100644 pie-chart-with-pure-css/license.txt
 create mode 100644 pie-chart-with-pure-css/src/index.html
 create mode 100644 pie-chart-with-pure-css/src/style.css
 create mode 100644 piet-mondrian-s-css-grid/README.markdown
 create mode 100644 piet-mondrian-s-css-grid/dist/index.html
 create mode 100644 piet-mondrian-s-css-grid/dist/style.css
 create mode 100644 piet-mondrian-s-css-grid/license.txt
 create mode 100644 piet-mondrian-s-css-grid/src/index.html
 create mode 100644 piet-mondrian-s-css-grid/src/style.css
 create mode 100644 pill-styled-radio-buttons-fully-scaleable/README.markdown
 create mode 100644 pill-styled-radio-buttons-fully-scaleable/dist/index.html
 create mode 100644 pill-styled-radio-buttons-fully-scaleable/dist/style.css
 create mode 100644 pill-styled-radio-buttons-fully-scaleable/license.txt
 create mode 100644 pill-styled-radio-buttons-fully-scaleable/src/index.html
 create mode 100644 pill-styled-radio-buttons-fully-scaleable/src/style.scss
 create mode 100644 pixi-sprite-bubbles/README.markdown
 create mode 100644 pixi-sprite-bubbles/dist/742d19fae30395a25522f43c1.js
 create mode 100644 pixi-sprite-bubbles/dist/index.html
 create mode 100644 pixi-sprite-bubbles/dist/script.js
 create mode 100644 pixi-sprite-bubbles/dist/style.css
 create mode 100644 pixi-sprite-bubbles/license.txt
 create mode 100644 pixi-sprite-bubbles/src/742d19fae30395a25522f43c1.js
 create mode 100644 pixi-sprite-bubbles/src/index.html
 create mode 100644 pixi-sprite-bubbles/src/script.js
 create mode 100644 pixi-sprite-bubbles/src/style.css
 create mode 100644 planetary-vignettes/README.markdown
 create mode 100644 planetary-vignettes/dist/index.html
 create mode 100644 planetary-vignettes/dist/script.js
 create mode 100644 planetary-vignettes/dist/style.css
 create mode 100644 planetary-vignettes/license.txt
 create mode 100644 planetary-vignettes/src/index.html
 create mode 100644 planetary-vignettes/src/script.js
 create mode 100644 planetary-vignettes/src/style.css
 create mode 100644 platonics/README.markdown
 create mode 100644 platonics/dist/index.html
 create mode 100644 platonics/dist/script.js
 create mode 100644 platonics/dist/style.css
 create mode 100644 platonics/license.txt
 create mode 100644 platonics/src/index.html
 create mode 100644 platonics/src/script.babel
 create mode 100644 platonics/src/style.css
 create mode 100644 play-with-header-on-page-transitions/README.markdown
 create mode 100644 play-with-header-on-page-transitions/dist/index.html
 create mode 100644 play-with-header-on-page-transitions/dist/script.js
 create mode 100644 play-with-header-on-page-transitions/dist/style.css
 create mode 100644 play-with-header-on-page-transitions/license.txt
 create mode 100644 play-with-header-on-page-transitions/src/index.html
 create mode 100644 play-with-header-on-page-transitions/src/script.babel
 create mode 100644 play-with-header-on-page-transitions/src/style.scss
 create mode 100644 playlist-artwork-for-cover-lover/README.markdown
 create mode 100644 playlist-artwork-for-cover-lover/dist/index.html
 create mode 100644 playlist-artwork-for-cover-lover/dist/script.js
 create mode 100644 playlist-artwork-for-cover-lover/dist/style.css
 create mode 100644 playlist-artwork-for-cover-lover/license.txt
 create mode 100644 playlist-artwork-for-cover-lover/src/index.html
 create mode 100644 playlist-artwork-for-cover-lover/src/script.js
 create mode 100644 playlist-artwork-for-cover-lover/src/style.scss
 create mode 100644 plot-direction/README.markdown
 create mode 100644 plot-direction/dist/index.html
 create mode 100644 plot-direction/dist/style.css
 create mode 100644 plot-direction/license.txt
 create mode 100644 plot-direction/src/index.html
 create mode 100644 plot-direction/src/style.css
 create mode 100644 pop-the-bubbles-three-js-scene/README.markdown
 create mode 100644 pop-the-bubbles-three-js-scene/dist/index.html
 create mode 100644 pop-the-bubbles-three-js-scene/dist/script.js
 create mode 100644 pop-the-bubbles-three-js-scene/dist/style.css
 create mode 100644 pop-the-bubbles-three-js-scene/license.txt
 create mode 100644 pop-the-bubbles-three-js-scene/src/index.html
 create mode 100644 pop-the-bubbles-three-js-scene/src/script.js
 create mode 100644 pop-the-bubbles-three-js-scene/src/style.css
 create mode 100644 popcssicles/README.markdown
 create mode 100644 popcssicles/dist/index.html
 create mode 100644 popcssicles/dist/script.js
 create mode 100644 popcssicles/dist/style.css
 create mode 100644 popcssicles/license.txt
 create mode 100644 popcssicles/src/index.haml
 create mode 100644 popcssicles/src/script.js
 create mode 100644 popcssicles/src/style.scss
 create mode 100644 potion-container/README.markdown
 create mode 100644 potion-container/dist/index.html
 create mode 100644 potion-container/dist/script.js
 create mode 100644 potion-container/dist/style.css
 create mode 100644 potion-container/license.txt
 create mode 100644 potion-container/src/index.html
 create mode 100644 potion-container/src/script.js
 create mode 100644 potion-container/src/style.scss
 create mode 100644 practice-canvas2d/README.markdown
 create mode 100644 practice-canvas2d/dist/index.html
 create mode 100644 practice-canvas2d/dist/script.js
 create mode 100644 practice-canvas2d/dist/style.css
 create mode 100644 practice-canvas2d/license.txt
 create mode 100644 practice-canvas2d/src/index.pug
 create mode 100644 practice-canvas2d/src/script.js
 create mode 100644 practice-canvas2d/src/style.styl
 create mode 100644 procedural-pathways/README.markdown
 create mode 100644 procedural-pathways/dist/index.html
 create mode 100644 procedural-pathways/dist/script.js
 create mode 100644 procedural-pathways/dist/style.css
 create mode 100644 procedural-pathways/license.txt
 create mode 100644 procedural-pathways/src/index.haml
 create mode 100644 procedural-pathways/src/script.js
 create mode 100644 procedural-pathways/src/style.scss
 create mode 100644 product-showcase-ui/README.markdown
 create mode 100644 product-showcase-ui/dist/index.html
 create mode 100644 product-showcase-ui/dist/script.js
 create mode 100644 product-showcase-ui/dist/style.css
 create mode 100644 product-showcase-ui/license.txt
 create mode 100644 product-showcase-ui/src/index.html
 create mode 100644 product-showcase-ui/src/script.babel
 create mode 100644 product-showcase-ui/src/style.scss
 create mode 100644 products-dashboard-ui/README.markdown
 create mode 100644 products-dashboard-ui/dist/index.html
 create mode 100644 products-dashboard-ui/dist/script.js
 create mode 100644 products-dashboard-ui/dist/style.css
 create mode 100644 products-dashboard-ui/license.txt
 create mode 100644 products-dashboard-ui/src/index.html
 create mode 100644 products-dashboard-ui/src/script.js
 create mode 100644 products-dashboard-ui/src/style.scss
 create mode 100644 profusion-2/README.markdown
 create mode 100644 profusion-2/dist/index.html
 create mode 100644 profusion-2/dist/script.js
 create mode 100644 profusion-2/dist/style.css
 create mode 100644 profusion-2/license.txt
 create mode 100644 profusion-2/src/index.pug
 create mode 100644 profusion-2/src/script.js
 create mode 100644 profusion-2/src/style.scss
 create mode 100644 project-management-dashboard-ui/LICENSE.txt
 create mode 100644 project-management-dashboard-ui/README.md
 create mode 100644 project-management-dashboard-ui/dist/index.html
 create mode 100644 project-management-dashboard-ui/dist/script.js
 create mode 100644 project-management-dashboard-ui/dist/style.css
 create mode 100644 project-management-dashboard-ui/src/index.html
 create mode 100644 project-management-dashboard-ui/src/script.js
 create mode 100644 project-management-dashboard-ui/src/style.scss
 create mode 100644 psychedelic-jellyfish-shader/README.markdown
 create mode 100644 psychedelic-jellyfish-shader/dist/index.html
 create mode 100644 psychedelic-jellyfish-shader/dist/script.js
 create mode 100644 psychedelic-jellyfish-shader/dist/style.css
 create mode 100644 psychedelic-jellyfish-shader/license.txt
 create mode 100644 psychedelic-jellyfish-shader/src/index.html
 create mode 100644 psychedelic-jellyfish-shader/src/script.babel
 create mode 100644 psychedelic-jellyfish-shader/src/style.scss
 create mode 100644 psychedelic-waves/README.markdown
 create mode 100644 psychedelic-waves/dist/index.html
 create mode 100644 psychedelic-waves/dist/script.js
 create mode 100644 psychedelic-waves/dist/style.css
 create mode 100644 psychedelic-waves/license.txt
 create mode 100644 psychedelic-waves/src/index.html
 create mode 100644 psychedelic-waves/src/script.babel
 create mode 100644 psychedelic-waves/src/style.scss
 create mode 100644 pulse-animation-in-svg-or-css3/README.markdown
 create mode 100644 pulse-animation-in-svg-or-css3/dist/index.html
 create mode 100644 pulse-animation-in-svg-or-css3/dist/style.css
 create mode 100644 pulse-animation-in-svg-or-css3/license.txt
 create mode 100644 pulse-animation-in-svg-or-css3/src/index.html
 create mode 100644 pulse-animation-in-svg-or-css3/src/style.scss
 create mode 100644 pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/README.markdown
 create mode 100644 pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/dist/index.html
 create mode 100644 pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/dist/script.js
 create mode 100644 pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/dist/style.css
 create mode 100644 pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/license.txt
 create mode 100644 pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/src/index.html
 create mode 100644 pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/src/script.js
 create mode 100644 pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/src/style.css
 create mode 100644 pure-css-cyberpunk-2077-buttons/README.markdown
 create mode 100644 pure-css-cyberpunk-2077-buttons/dist/index.html
 create mode 100644 pure-css-cyberpunk-2077-buttons/dist/script.js
 create mode 100644 pure-css-cyberpunk-2077-buttons/dist/style.css
 create mode 100644 pure-css-cyberpunk-2077-buttons/license.txt
 create mode 100644 pure-css-cyberpunk-2077-buttons/src/index.html
 create mode 100644 pure-css-cyberpunk-2077-buttons/src/script.babel
 create mode 100644 pure-css-cyberpunk-2077-buttons/src/style.css
 create mode 100644 pure-css-eye/README.markdown
 create mode 100644 pure-css-eye/dist/index.html
 create mode 100644 pure-css-eye/dist/script.js
 create mode 100644 pure-css-eye/dist/style.css
 create mode 100644 pure-css-eye/license.txt
 create mode 100644 pure-css-eye/src/index.html
 create mode 100644 pure-css-eye/src/script.js
 create mode 100644 pure-css-eye/src/style.css
 create mode 100644 pure-css-halftone-portrait-from-jpg-source/README.markdown
 create mode 100644 pure-css-halftone-portrait-from-jpg-source/dist/index.html
 create mode 100644 pure-css-halftone-portrait-from-jpg-source/dist/style.css
 create mode 100644 pure-css-halftone-portrait-from-jpg-source/license.txt
 create mode 100644 pure-css-halftone-portrait-from-jpg-source/src/index.html
 create mode 100644 pure-css-halftone-portrait-from-jpg-source/src/style.scss
 create mode 100644 pure-css-halloween-zipper/README.markdown
 create mode 100644 pure-css-halloween-zipper/dist/https___codepen_io_thebab.css
 create mode 100644 pure-css-halloween-zipper/dist/index.html
 create mode 100644 pure-css-halloween-zipper/dist/style.css
 create mode 100644 pure-css-halloween-zipper/license.txt
 create mode 100644 pure-css-halloween-zipper/src/https___codepen_io_thebab.css
 create mode 100644 pure-css-halloween-zipper/src/index.pug
 create mode 100644 pure-css-halloween-zipper/src/style.scss
 create mode 100644 pure-css-monument-valley-ii-not-for-safari/README.markdown
 create mode 100644 pure-css-monument-valley-ii-not-for-safari/dist/index.html
 create mode 100644 pure-css-monument-valley-ii-not-for-safari/dist/style.css
 create mode 100644 pure-css-monument-valley-ii-not-for-safari/license.txt
 create mode 100644 pure-css-monument-valley-ii-not-for-safari/src/index.html
 create mode 100644 pure-css-monument-valley-ii-not-for-safari/src/style.css
 create mode 100644 pw-dashboard/README.markdown
 create mode 100644 pw-dashboard/dist/index.html
 create mode 100644 pw-dashboard/dist/style.css
 create mode 100644 pw-dashboard/license.txt
 create mode 100644 pw-dashboard/src/index.pug
 create mode 100644 pw-dashboard/src/style.styl
 create mode 100644 quarto/README.markdown
 create mode 100644 quarto/dist/index.html
 create mode 100644 quarto/dist/script.js
 create mode 100644 quarto/dist/style.css
 create mode 100644 quarto/license.txt
 create mode 100644 quarto/src/index.html
 create mode 100644 quarto/src/script.js
 create mode 100644 quarto/src/style.css
 create mode 100644 quick-mathematical-features-support-test/LICENSE.txt
 create mode 100644 quick-mathematical-features-support-test/README.md
 create mode 100644 quick-mathematical-features-support-test/dist/index.html
 create mode 100644 quick-mathematical-features-support-test/dist/style.css
 create mode 100644 quick-mathematical-features-support-test/src/index.pug
 create mode 100644 quick-mathematical-features-support-test/src/style.scss
 create mode 100644 radio-button-group-with-gradient-cross-browser-responsive-no-framework/README.markdown
 create mode 100644 radio-button-group-with-gradient-cross-browser-responsive-no-framework/dist/https___codepen_io_thebab.css
 create mode 100644 radio-button-group-with-gradient-cross-browser-responsive-no-framework/dist/index.html
 create mode 100644 radio-button-group-with-gradient-cross-browser-responsive-no-framework/dist/style.css
 create mode 100644 radio-button-group-with-gradient-cross-browser-responsive-no-framework/license.txt
 create mode 100644 radio-button-group-with-gradient-cross-browser-responsive-no-framework/src/https___codepen_io_thebab.css
 create mode 100644 radio-button-group-with-gradient-cross-browser-responsive-no-framework/src/index.pug
 create mode 100644 radio-button-group-with-gradient-cross-browser-responsive-no-framework/src/style.scss
 create mode 100644 rainbow-hypercube/README.markdown
 create mode 100644 rainbow-hypercube/dist/index.html
 create mode 100644 rainbow-hypercube/dist/script.js
 create mode 100644 rainbow-hypercube/dist/style.css
 create mode 100644 rainbow-hypercube/license.txt
 create mode 100644 rainbow-hypercube/src/index.html
 create mode 100644 rainbow-hypercube/src/script.js
 create mode 100644 rainbow-hypercube/src/style.scss
 create mode 100644 rainbow-shader/README.markdown
 create mode 100644 rainbow-shader/dist/index.html
 create mode 100644 rainbow-shader/dist/script.js
 create mode 100644 rainbow-shader/dist/style.css
 create mode 100644 rainbow-shader/license.txt
 create mode 100644 rainbow-shader/src/index.html
 create mode 100644 rainbow-shader/src/script.js
 create mode 100644 rainbow-shader/src/style.css
 create mode 100644 random-rainbow-generator-skypack/README.markdown
 create mode 100644 random-rainbow-generator-skypack/dist/index.html
 create mode 100644 random-rainbow-generator-skypack/dist/script.js
 create mode 100644 random-rainbow-generator-skypack/dist/style.css
 create mode 100644 random-rainbow-generator-skypack/license.txt
 create mode 100644 random-rainbow-generator-skypack/src/index.html
 create mode 100644 random-rainbow-generator-skypack/src/script.js
 create mode 100644 random-rainbow-generator-skypack/src/style.css
 create mode 100644 random-svg-pattern-creator-tool/README.markdown
 create mode 100644 random-svg-pattern-creator-tool/dist/index.html
 create mode 100644 random-svg-pattern-creator-tool/dist/script.js
 create mode 100644 random-svg-pattern-creator-tool/dist/style.css
 create mode 100644 random-svg-pattern-creator-tool/license.txt
 create mode 100644 random-svg-pattern-creator-tool/src/index.html
 create mode 100644 random-svg-pattern-creator-tool/src/script.js
 create mode 100644 random-svg-pattern-creator-tool/src/style.css
 create mode 100644 random-z-rich/README.markdown
 create mode 100644 random-z-rich/dist/index.html
 create mode 100644 random-z-rich/dist/script.js
 create mode 100644 random-z-rich/dist/style.css
 create mode 100644 random-z-rich/license.txt
 create mode 100644 random-z-rich/src/index.html
 create mode 100644 random-z-rich/src/script.babel
 create mode 100644 random-z-rich/src/style.scss
 create mode 100644 randomly-generated-diamond-art-codepenchallenge/README.markdown
 create mode 100644 randomly-generated-diamond-art-codepenchallenge/dist/index.html
 create mode 100644 randomly-generated-diamond-art-codepenchallenge/dist/script.js
 create mode 100644 randomly-generated-diamond-art-codepenchallenge/dist/style.css
 create mode 100644 randomly-generated-diamond-art-codepenchallenge/license.txt
 create mode 100644 randomly-generated-diamond-art-codepenchallenge/src/index.html
 create mode 100644 randomly-generated-diamond-art-codepenchallenge/src/script.ts
 create mode 100644 randomly-generated-diamond-art-codepenchallenge/src/style.scss
 create mode 100644 randomly-generated-pure-css-menu-icons-w-markup-and-scss/README.markdown
 create mode 100644 randomly-generated-pure-css-menu-icons-w-markup-and-scss/dist/index.html
 create mode 100644 randomly-generated-pure-css-menu-icons-w-markup-and-scss/dist/script.js
 create mode 100644 randomly-generated-pure-css-menu-icons-w-markup-and-scss/dist/style.css
 create mode 100644 randomly-generated-pure-css-menu-icons-w-markup-and-scss/license.txt
 create mode 100644 randomly-generated-pure-css-menu-icons-w-markup-and-scss/src/index.haml
 create mode 100644 randomly-generated-pure-css-menu-icons-w-markup-and-scss/src/script.js
 create mode 100644 randomly-generated-pure-css-menu-icons-w-markup-and-scss/src/style.scss
 create mode 100644 range-pills/README.markdown
 create mode 100644 range-pills/dist/index.html
 create mode 100644 range-pills/dist/script.js
 create mode 100644 range-pills/dist/style.css
 create mode 100644 range-pills/license.txt
 create mode 100644 range-pills/src/index.html
 create mode 100644 range-pills/src/script.js
 create mode 100644 range-pills/src/style.sass
 create mode 100644 react-color-gradients/README.markdown
 create mode 100644 react-color-gradients/dist/index.html
 create mode 100644 react-color-gradients/dist/script.js
 create mode 100644 react-color-gradients/dist/style.css
 create mode 100644 react-color-gradients/license.txt
 create mode 100644 react-color-gradients/src/index.html
 create mode 100644 react-color-gradients/src/script.babel
 create mode 100644 react-color-gradients/src/style.css
 create mode 100644 react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/README.markdown
 create mode 100644 react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/dist/index.html
 create mode 100644 react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/dist/script.js
 create mode 100644 react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/dist/style.css
 create mode 100644 react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/license.txt
 create mode 100644 react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/src/index.pug
 create mode 100644 react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/src/script.babel
 create mode 100644 react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/src/style.styl
 create mode 100644 reactive-synth/README.markdown
 create mode 100644 reactive-synth/dist/index.html
 create mode 100644 reactive-synth/dist/script.js
 create mode 100644 reactive-synth/dist/style.css
 create mode 100644 reactive-synth/license.txt
 create mode 100644 reactive-synth/src/index.html
 create mode 100644 reactive-synth/src/script.babel
 create mode 100644 reactive-synth/src/style.sass
 create mode 100644 resizable-elements-w-scoped-css-variables-touch-support/README.markdown
 create mode 100644 resizable-elements-w-scoped-css-variables-touch-support/dist/index.html
 create mode 100644 resizable-elements-w-scoped-css-variables-touch-support/dist/script.js
 create mode 100644 resizable-elements-w-scoped-css-variables-touch-support/dist/style.css
 create mode 100644 resizable-elements-w-scoped-css-variables-touch-support/license.txt
 create mode 100644 resizable-elements-w-scoped-css-variables-touch-support/src/index.pug
 create mode 100644 resizable-elements-w-scoped-css-variables-touch-support/src/script.babel
 create mode 100644 resizable-elements-w-scoped-css-variables-touch-support/src/style.styl
 create mode 100644 responsive-castle/README.markdown
 create mode 100644 responsive-castle/dist/index.html
 create mode 100644 responsive-castle/dist/script.js
 create mode 100644 responsive-castle/dist/style.css
 create mode 100644 responsive-castle/license.txt
 create mode 100644 responsive-castle/src/index.html
 create mode 100644 responsive-castle/src/script.babel
 create mode 100644 responsive-castle/src/style.scss
 create mode 100644 responsive-comic-book-layout/README.markdown
 create mode 100644 responsive-comic-book-layout/dist/index.html
 create mode 100644 responsive-comic-book-layout/dist/style.css
 create mode 100644 responsive-comic-book-layout/license.txt
 create mode 100644 responsive-comic-book-layout/src/index.html
 create mode 100644 responsive-comic-book-layout/src/style.css
 create mode 100644 responsive-grid-timeline/README.markdown
 create mode 100644 responsive-grid-timeline/dist/index.html
 create mode 100644 responsive-grid-timeline/dist/style.css
 create mode 100644 responsive-grid-timeline/license.txt
 create mode 100644 responsive-grid-timeline/src/index.html
 create mode 100644 responsive-grid-timeline/src/style.scss
 create mode 100644 responsive-social-platform-ui/README.markdown
 create mode 100644 responsive-social-platform-ui/dist/index.html
 create mode 100644 responsive-social-platform-ui/dist/style.css
 create mode 100644 responsive-social-platform-ui/license.txt
 create mode 100644 responsive-social-platform-ui/src/index.html
 create mode 100644 responsive-social-platform-ui/src/style.scss
 create mode 100644 rgbconfettimyk-generative-art/README.markdown
 create mode 100644 rgbconfettimyk-generative-art/dist/index.html
 create mode 100644 rgbconfettimyk-generative-art/dist/script.js
 create mode 100644 rgbconfettimyk-generative-art/dist/style.css
 create mode 100644 rgbconfettimyk-generative-art/license.txt
 create mode 100644 rgbconfettimyk-generative-art/src/index.html
 create mode 100644 rgbconfettimyk-generative-art/src/script.js
 create mode 100644 rgbconfettimyk-generative-art/src/style.css
 create mode 100644 risograph-gradient-effect-with-svg/README.markdown
 create mode 100644 risograph-gradient-effect-with-svg/dist/index.html
 create mode 100644 risograph-gradient-effect-with-svg/dist/script.js
 create mode 100644 risograph-gradient-effect-with-svg/dist/style.css
 create mode 100644 risograph-gradient-effect-with-svg/license.txt
 create mode 100644 risograph-gradient-effect-with-svg/src/index.svg
 create mode 100644 risograph-gradient-effect-with-svg/src/script.js
 create mode 100644 risograph-gradient-effect-with-svg/src/style.scss
 create mode 100644 rotating-thing/README.markdown
 create mode 100644 rotating-thing/dist/index.html
 create mode 100644 rotating-thing/dist/script.js
 create mode 100644 rotating-thing/dist/style.css
 create mode 100644 rotating-thing/license.txt
 create mode 100644 rotating-thing/src/index.html
 create mode 100644 rotating-thing/src/script.js
 create mode 100644 rotating-thing/src/style.css
 create mode 100644 rounded-dashes/README.markdown
 create mode 100644 rounded-dashes/dist/index.html
 create mode 100644 rounded-dashes/dist/style.css
 create mode 100644 rounded-dashes/license.txt
 create mode 100644 rounded-dashes/src/index.html
 create mode 100644 rounded-dashes/src/style.css
 create mode 100644 running-waves-with-d3/README.markdown
 create mode 100644 running-waves-with-d3/dist/index.html
 create mode 100644 running-waves-with-d3/dist/script.js
 create mode 100644 running-waves-with-d3/dist/style.css
 create mode 100644 running-waves-with-d3/license.txt
 create mode 100644 running-waves-with-d3/src/index.html
 create mode 100644 running-waves-with-d3/src/script.js
 create mode 100644 running-waves-with-d3/src/style.css
 create mode 100644 saul-bass-ified/README.markdown
 create mode 100644 saul-bass-ified/dist/index.html
 create mode 100644 saul-bass-ified/dist/script.js
 create mode 100644 saul-bass-ified/dist/style.css
 create mode 100644 saul-bass-ified/license.txt
 create mode 100644 saul-bass-ified/src/index.html
 create mode 100644 saul-bass-ified/src/script.js
 create mode 100644 saul-bass-ified/src/style.css
 create mode 100644 scroll-timeline-example/LICENSE.txt
 create mode 100644 scroll-timeline-example/README.md
 create mode 100644 scroll-timeline-example/dist/index.html
 create mode 100644 scroll-timeline-example/dist/style.css
 create mode 100644 scroll-timeline-example/src/index.html
 create mode 100644 scroll-timeline-example/src/style.css
 create mode 100644 scrolling-box-w-scroll-behavior/README.markdown
 create mode 100644 scrolling-box-w-scroll-behavior/dist/index.html
 create mode 100644 scrolling-box-w-scroll-behavior/dist/style.css
 create mode 100644 scrolling-box-w-scroll-behavior/license.txt
 create mode 100644 scrolling-box-w-scroll-behavior/src/index.html
 create mode 100644 scrolling-box-w-scroll-behavior/src/style.css
 create mode 100644 scrolling-grid/README.markdown
 create mode 100644 scrolling-grid/dist/index.html
 create mode 100644 scrolling-grid/dist/style.css
 create mode 100644 scrolling-grid/license.txt
 create mode 100644 scrolling-grid/src/index.html
 create mode 100644 scrolling-grid/src/style.scss
 create mode 100644 scrolly-carousel-example-7/README.markdown
 create mode 100644 scrolly-carousel-example-7/dist/index.html
 create mode 100644 scrolly-carousel-example-7/dist/style.css
 create mode 100644 scrolly-carousel-example-7/license.txt
 create mode 100644 scrolly-carousel-example-7/src/index.html
 create mode 100644 scrolly-carousel-example-7/src/style.scss
 create mode 100644 search-algorithm-puppy/README.markdown
 create mode 100644 search-algorithm-puppy/dist/index.html
 create mode 100644 search-algorithm-puppy/dist/script.js
 create mode 100644 search-algorithm-puppy/dist/style.css
 create mode 100644 search-algorithm-puppy/license.txt
 create mode 100644 search-algorithm-puppy/src/index.html
 create mode 100644 search-algorithm-puppy/src/script.js
 create mode 100644 search-algorithm-puppy/src/style.css
 create mode 100644 selected-demos-2019-2020/README.markdown
 create mode 100644 selected-demos-2019-2020/dist/index.html
 create mode 100644 selected-demos-2019-2020/dist/script.js
 create mode 100644 selected-demos-2019-2020/dist/style.css
 create mode 100644 selected-demos-2019-2020/license.txt
 create mode 100644 selected-demos-2019-2020/src/index.haml
 create mode 100644 selected-demos-2019-2020/src/script.js
 create mode 100644 selected-demos-2019-2020/src/style.scss
 create mode 100644 shadow-set/README.markdown
 create mode 100644 shadow-set/dist/index.html
 create mode 100644 shadow-set/dist/style.css
 create mode 100644 shadow-set/license.txt
 create mode 100644 shadow-set/src/index.html
 create mode 100644 shadow-set/src/style.scss
 create mode 100644 shape-outsideface/README.markdown
 create mode 100644 shape-outsideface/dist/index.html
 create mode 100644 shape-outsideface/dist/script.js
 create mode 100644 shape-outsideface/dist/style.css
 create mode 100644 shape-outsideface/license.txt
 create mode 100644 shape-outsideface/src/index.html
 create mode 100644 shape-outsideface/src/script.js
 create mode 100644 shape-outsideface/src/style.css
 create mode 100644 simple-css-loaders/README.markdown
 create mode 100644 simple-css-loaders/dist/index.html
 create mode 100644 simple-css-loaders/dist/style.css
 create mode 100644 simple-css-loaders/license.txt
 create mode 100644 simple-css-loaders/src/index.html
 create mode 100644 simple-css-loaders/src/style.css
 create mode 100644 simple-music-app-ui-design/README.markdown
 create mode 100644 simple-music-app-ui-design/dist/index.html
 create mode 100644 simple-music-app-ui-design/dist/script.js
 create mode 100644 simple-music-app-ui-design/dist/style.css
 create mode 100644 simple-music-app-ui-design/license.txt
 create mode 100644 simple-music-app-ui-design/src/index.html
 create mode 100644 simple-music-app-ui-design/src/script.js
 create mode 100644 simple-music-app-ui-design/src/style.scss
 create mode 100644 simplex-life-v8/README.markdown
 create mode 100644 simplex-life-v8/dist/index.html
 create mode 100644 simplex-life-v8/dist/script.js
 create mode 100644 simplex-life-v8/dist/style.css
 create mode 100644 simplex-life-v8/license.txt
 create mode 100644 simplex-life-v8/src/index.html
 create mode 100644 simplex-life-v8/src/script.babel
 create mode 100644 simplex-life-v8/src/style.scss
 create mode 100644 single-div-css-folded-origami-shop/LICENSE.txt
 create mode 100644 single-div-css-folded-origami-shop/README.md
 create mode 100644 single-div-css-folded-origami-shop/dist/index.html
 create mode 100644 single-div-css-folded-origami-shop/dist/script.js
 create mode 100644 single-div-css-folded-origami-shop/dist/style.css
 create mode 100644 single-div-css-folded-origami-shop/src/index.html
 create mode 100644 single-div-css-folded-origami-shop/src/script.js
 create mode 100644 single-div-css-folded-origami-shop/src/style.stylus
 create mode 100644 single-div-flickering-neon-text/README.markdown
 create mode 100644 single-div-flickering-neon-text/dist/index.html
 create mode 100644 single-div-flickering-neon-text/dist/script.js
 create mode 100644 single-div-flickering-neon-text/dist/style.css
 create mode 100644 single-div-flickering-neon-text/license.txt
 create mode 100644 single-div-flickering-neon-text/src/index.html
 create mode 100644 single-div-flickering-neon-text/src/script.js
 create mode 100644 single-div-flickering-neon-text/src/style.scss
 create mode 100644 skateboard-video-platform/README.markdown
 create mode 100644 skateboard-video-platform/dist/index.html
 create mode 100644 skateboard-video-platform/dist/script.js
 create mode 100644 skateboard-video-platform/dist/style.css
 create mode 100644 skateboard-video-platform/license.txt
 create mode 100644 skateboard-video-platform/src/index.html
 create mode 100644 skateboard-video-platform/src/script.js
 create mode 100644 skateboard-video-platform/src/style.scss
 create mode 100644 slack-discord-cyberpunk-2077-redesign-w-preact/README.markdown
 create mode 100644 slack-discord-cyberpunk-2077-redesign-w-preact/dist/index.html
 create mode 100644 slack-discord-cyberpunk-2077-redesign-w-preact/dist/script.js
 create mode 100644 slack-discord-cyberpunk-2077-redesign-w-preact/dist/style.css
 create mode 100644 slack-discord-cyberpunk-2077-redesign-w-preact/license.txt
 create mode 100644 slack-discord-cyberpunk-2077-redesign-w-preact/src/index.html
 create mode 100644 slack-discord-cyberpunk-2077-redesign-w-preact/src/script.babel
 create mode 100644 slack-discord-cyberpunk-2077-redesign-w-preact/src/style.css
 create mode 100644 slide-out-toggle-menu/README.markdown
 create mode 100644 slide-out-toggle-menu/dist/index.html
 create mode 100644 slide-out-toggle-menu/dist/script.js
 create mode 100644 slide-out-toggle-menu/dist/style.css
 create mode 100644 slide-out-toggle-menu/license.txt
 create mode 100644 slide-out-toggle-menu/src/index.html
 create mode 100644 slide-out-toggle-menu/src/script.js
 create mode 100644 slide-out-toggle-menu/src/style.scss
 create mode 100644 sliding-image-track/LICENSE.txt
 create mode 100644 sliding-image-track/README.md
 create mode 100644 sliding-image-track/dist/index.html
 create mode 100644 sliding-image-track/dist/script.js
 create mode 100644 sliding-image-track/dist/style.css
 create mode 100644 sliding-image-track/src/index.html
 create mode 100644 sliding-image-track/src/script.js
 create mode 100644 sliding-image-track/src/style.css
 create mode 100644 smart-home-temperature-slider/README.markdown
 create mode 100644 smart-home-temperature-slider/dist/index.html
 create mode 100644 smart-home-temperature-slider/dist/script.js
 create mode 100644 smart-home-temperature-slider/dist/style.css
 create mode 100644 smart-home-temperature-slider/license.txt
 create mode 100644 smart-home-temperature-slider/src/index.html
 create mode 100644 smart-home-temperature-slider/src/script.js
 create mode 100644 smart-home-temperature-slider/src/style.css
 create mode 100644 smoothie-app/README.markdown
 create mode 100644 smoothie-app/dist/index.html
 create mode 100644 smoothie-app/dist/script.js
 create mode 100644 smoothie-app/dist/style.css
 create mode 100644 smoothie-app/license.txt
 create mode 100644 smoothie-app/src/index.html
 create mode 100644 smoothie-app/src/script.js
 create mode 100644 smoothie-app/src/style.css
 create mode 100644 snowflake/README.markdown
 create mode 100644 snowflake/dist/index.html
 create mode 100644 snowflake/dist/script.js
 create mode 100644 snowflake/dist/style.css
 create mode 100644 snowflake/license.txt
 create mode 100644 snowflake/src/index.html
 create mode 100644 snowflake/src/script.js
 create mode 100644 snowflake/src/style.css
 create mode 100644 sorted-css-colors/README.markdown
 create mode 100644 sorted-css-colors/dist/index.html
 create mode 100644 sorted-css-colors/dist/script.js
 create mode 100644 sorted-css-colors/dist/style.css
 create mode 100644 sorted-css-colors/license.txt
 create mode 100644 sorted-css-colors/src/index.html
 create mode 100644 sorted-css-colors/src/script.babel
 create mode 100644 sorted-css-colors/src/style.scss
 create mode 100644 space-travel/README.markdown
 create mode 100644 space-travel/dist/index.html
 create mode 100644 space-travel/dist/script.js
 create mode 100644 space-travel/dist/style.css
 create mode 100644 space-travel/license.txt
 create mode 100644 space-travel/src/index.html
 create mode 100644 space-travel/src/script.js
 create mode 100644 space-travel/src/style.scss
 create mode 100644 speech-bubbles/README.markdown
 create mode 100644 speech-bubbles/dist/index.html
 create mode 100644 speech-bubbles/dist/style.css
 create mode 100644 speech-bubbles/license.txt
 create mode 100644 speech-bubbles/src/index.html
 create mode 100644 speech-bubbles/src/style.css
 create mode 100644 sphere-of-boxes-three-js/README.markdown
 create mode 100644 sphere-of-boxes-three-js/dist/blgjlm.js
 create mode 100644 sphere-of-boxes-three-js/dist/index.html
 create mode 100644 sphere-of-boxes-three-js/dist/script.js
 create mode 100644 sphere-of-boxes-three-js/dist/style.css
 create mode 100644 sphere-of-boxes-three-js/dist/zvdzgv.js
 create mode 100644 sphere-of-boxes-three-js/license.txt
 create mode 100644 sphere-of-boxes-three-js/src/blgjlm.js
 create mode 100644 sphere-of-boxes-three-js/src/index.html
 create mode 100644 sphere-of-boxes-three-js/src/script.babel
 create mode 100644 sphere-of-boxes-three-js/src/style.css
 create mode 100644 sphere-of-boxes-three-js/src/zvdzgv.js
 create mode 100644 spider-verse-dots/README.markdown
 create mode 100644 spider-verse-dots/dist/index.html
 create mode 100644 spider-verse-dots/dist/script.js
 create mode 100644 spider-verse-dots/dist/style.css
 create mode 100644 spider-verse-dots/license.txt
 create mode 100644 spider-verse-dots/src/index.html
 create mode 100644 spider-verse-dots/src/script.babel
 create mode 100644 spider-verse-dots/src/style.scss
 create mode 100644 spiral-fractal-experiment-v2/README.markdown
 create mode 100644 spiral-fractal-experiment-v2/dist/index.html
 create mode 100644 spiral-fractal-experiment-v2/dist/script.js
 create mode 100644 spiral-fractal-experiment-v2/dist/style.css
 create mode 100644 spiral-fractal-experiment-v2/license.txt
 create mode 100644 spiral-fractal-experiment-v2/src/index.html
 create mode 100644 spiral-fractal-experiment-v2/src/script.js
 create mode 100644 spiral-fractal-experiment-v2/src/style.css
 create mode 100644 spirited-away-bathhouse-aburaya3d-css/README.markdown
 create mode 100644 spirited-away-bathhouse-aburaya3d-css/dist/index.html
 create mode 100644 spirited-away-bathhouse-aburaya3d-css/dist/style.css
 create mode 100644 spirited-away-bathhouse-aburaya3d-css/license.txt
 create mode 100644 spirited-away-bathhouse-aburaya3d-css/src/index.haml
 create mode 100644 spirited-away-bathhouse-aburaya3d-css/src/style.scss
 create mode 100644 splitting-laser-write/README.markdown
 create mode 100644 splitting-laser-write/dist/5eb6d4e9bfd78e3911ed9d0d0.js
 create mode 100644 splitting-laser-write/dist/index.html
 create mode 100644 splitting-laser-write/dist/script.js
 create mode 100644 splitting-laser-write/dist/style.css
 create mode 100644 splitting-laser-write/license.txt
 create mode 100644 splitting-laser-write/src/5eb6d4e9bfd78e3911ed9d0d0.js
 create mode 100644 splitting-laser-write/src/index.html
 create mode 100644 splitting-laser-write/src/script.js
 create mode 100644 splitting-laser-write/src/style.css
 create mode 100644 squircles/README.markdown
 create mode 100644 squircles/dist/index.html
 create mode 100644 squircles/dist/script.js
 create mode 100644 squircles/dist/style.css
 create mode 100644 squircles/license.txt
 create mode 100644 squircles/src/index.html
 create mode 100644 squircles/src/script.js
 create mode 100644 squircles/src/style.scss
 create mode 100644 squishy-toggle-buttons/README.markdown
 create mode 100644 squishy-toggle-buttons/dist/index.html
 create mode 100644 squishy-toggle-buttons/dist/script.js
 create mode 100644 squishy-toggle-buttons/dist/style.css
 create mode 100644 squishy-toggle-buttons/license.txt
 create mode 100644 squishy-toggle-buttons/src/index.html
 create mode 100644 squishy-toggle-buttons/src/script.coffee
 create mode 100644 squishy-toggle-buttons/src/style.sass
 create mode 100644 stacked-flexible-slides-layout/README.markdown
 create mode 100644 stacked-flexible-slides-layout/dist/index.html
 create mode 100644 stacked-flexible-slides-layout/dist/style.css
 create mode 100644 stacked-flexible-slides-layout/license.txt
 create mode 100644 stacked-flexible-slides-layout/src/index.html
 create mode 100644 stacked-flexible-slides-layout/src/style.css
 create mode 100644 stacking-cards/README.markdown
 create mode 100644 stacking-cards/dist/index.html
 create mode 100644 stacking-cards/dist/script.js
 create mode 100644 stacking-cards/dist/style.css
 create mode 100644 stacking-cards/license.txt
 create mode 100644 stacking-cards/src/index.html
 create mode 100644 stacking-cards/src/script.js
 create mode 100644 stacking-cards/src/style.css
 create mode 100644 staggered-cubes/README.markdown
 create mode 100644 staggered-cubes/dist/index.html
 create mode 100644 staggered-cubes/dist/script.js
 create mode 100644 staggered-cubes/dist/style.css
 create mode 100644 staggered-cubes/license.txt
 create mode 100644 staggered-cubes/src/index.pug
 create mode 100644 staggered-cubes/src/script.babel
 create mode 100644 staggered-cubes/src/style.styl
 create mode 100644 stay-true/README.markdown
 create mode 100644 stay-true/dist/index.html
 create mode 100644 stay-true/dist/script.js
 create mode 100644 stay-true/dist/style.css
 create mode 100644 stay-true/license.txt
 create mode 100644 stay-true/src/index.haml
 create mode 100644 stay-true/src/script.js
 create mode 100644 stay-true/src/style.scss
 create mode 100644 sticky-cards/LICENSE.txt
 create mode 100644 sticky-cards/README.md
 create mode 100644 sticky-cards/dist/index.html
 create mode 100644 sticky-cards/dist/style.css
 create mode 100644 sticky-cards/src/index.pug
 create mode 100644 sticky-cards/src/style.scss
 create mode 100644 sticky-photostack/README.markdown
 create mode 100644 sticky-photostack/dist/index.html
 create mode 100644 sticky-photostack/dist/style.css
 create mode 100644 sticky-photostack/license.txt
 create mode 100644 sticky-photostack/src/index.pug
 create mode 100644 sticky-photostack/src/style.scss
 create mode 100644 sticky-portals/README.markdown
 create mode 100644 sticky-portals/dist/index.html
 create mode 100644 sticky-portals/dist/script.js
 create mode 100644 sticky-portals/dist/style.css
 create mode 100644 sticky-portals/license.txt
 create mode 100644 sticky-portals/src/index.haml
 create mode 100644 sticky-portals/src/script.js
 create mode 100644 sticky-portals/src/style.scss
 create mode 100644 striped-art-for-cpc-lines-and-codepenchallenge/README.markdown
 create mode 100644 striped-art-for-cpc-lines-and-codepenchallenge/dist/index.html
 create mode 100644 striped-art-for-cpc-lines-and-codepenchallenge/dist/script.js
 create mode 100644 striped-art-for-cpc-lines-and-codepenchallenge/dist/style.css
 create mode 100644 striped-art-for-cpc-lines-and-codepenchallenge/license.txt
 create mode 100644 striped-art-for-cpc-lines-and-codepenchallenge/src/index.haml
 create mode 100644 striped-art-for-cpc-lines-and-codepenchallenge/src/script.js
 create mode 100644 striped-art-for-cpc-lines-and-codepenchallenge/src/style.sass
 create mode 100644 styled-color-input/README.markdown
 create mode 100644 styled-color-input/dist/index.html
 create mode 100644 styled-color-input/dist/style.css
 create mode 100644 styled-color-input/license.txt
 create mode 100644 styled-color-input/src/index.html
 create mode 100644 styled-color-input/src/style.css
 create mode 100644 stylized-buttons/README.markdown
 create mode 100644 stylized-buttons/dist/index.html
 create mode 100644 stylized-buttons/dist/style.css
 create mode 100644 stylized-buttons/license.txt
 create mode 100644 stylized-buttons/src/index.html
 create mode 100644 stylized-buttons/src/style.css
 create mode 100644 sun-rise-moon-rise/README.markdown
 create mode 100644 sun-rise-moon-rise/dist/index.html
 create mode 100644 sun-rise-moon-rise/dist/script.js
 create mode 100644 sun-rise-moon-rise/dist/style.css
 create mode 100644 sun-rise-moon-rise/license.txt
 create mode 100644 sun-rise-moon-rise/src/index.html
 create mode 100644 sun-rise-moon-rise/src/script.js
 create mode 100644 sun-rise-moon-rise/src/style.css
 create mode 100644 super-smash-bros-credits/LICENSE.txt
 create mode 100644 super-smash-bros-credits/README.md
 create mode 100644 super-smash-bros-credits/dist/index.html
 create mode 100644 super-smash-bros-credits/dist/script.js
 create mode 100644 super-smash-bros-credits/dist/style.css
 create mode 100644 super-smash-bros-credits/src/index.html
 create mode 100644 super-smash-bros-credits/src/script.js
 create mode 100644 super-smash-bros-credits/src/style.scss
 create mode 100644 svg-blob-u-lator/README.markdown
 create mode 100644 svg-blob-u-lator/dist/index.html
 create mode 100644 svg-blob-u-lator/dist/script.js
 create mode 100644 svg-blob-u-lator/dist/style.css
 create mode 100644 svg-blob-u-lator/license.txt
 create mode 100644 svg-blob-u-lator/src/index.haml
 create mode 100644 svg-blob-u-lator/src/script.js
 create mode 100644 svg-blob-u-lator/src/style.scss
 create mode 100644 svg-flower-generator/README.markdown
 create mode 100644 svg-flower-generator/dist/index.html
 create mode 100644 svg-flower-generator/dist/script.js
 create mode 100644 svg-flower-generator/dist/style.css
 create mode 100644 svg-flower-generator/license.txt
 create mode 100644 svg-flower-generator/src/index.html
 create mode 100644 svg-flower-generator/src/script.babel
 create mode 100644 svg-flower-generator/src/style.css
 create mode 100644 svg-gradient-wave-generator/LICENSE.txt
 create mode 100644 svg-gradient-wave-generator/README.md
 create mode 100644 svg-gradient-wave-generator/dist/index.html
 create mode 100644 svg-gradient-wave-generator/dist/script.js
 create mode 100644 svg-gradient-wave-generator/dist/style.css
 create mode 100644 svg-gradient-wave-generator/src/index.html
 create mode 100644 svg-gradient-wave-generator/src/script.js
 create mode 100644 svg-gradient-wave-generator/src/style.scss
 create mode 100644 svg-jigsaw-solver-drag-n-drop-version/README.markdown
 create mode 100644 svg-jigsaw-solver-drag-n-drop-version/dist/index.html
 create mode 100644 svg-jigsaw-solver-drag-n-drop-version/dist/script.js
 create mode 100644 svg-jigsaw-solver-drag-n-drop-version/dist/style.css
 create mode 100644 svg-jigsaw-solver-drag-n-drop-version/license.txt
 create mode 100644 svg-jigsaw-solver-drag-n-drop-version/src/index.html
 create mode 100644 svg-jigsaw-solver-drag-n-drop-version/src/script.js
 create mode 100644 svg-jigsaw-solver-drag-n-drop-version/src/style.sass
 create mode 100644 svg-loader/README.markdown
 create mode 100644 svg-loader/dist/index.html
 create mode 100644 svg-loader/dist/script.js
 create mode 100644 svg-loader/dist/style.css
 create mode 100644 svg-loader/license.txt
 create mode 100644 svg-loader/src/index.html
 create mode 100644 svg-loader/src/script.js
 create mode 100644 svg-loader/src/style.scss
 create mode 100644 svg-scribblemation/README.markdown
 create mode 100644 svg-scribblemation/dist/index.html
 create mode 100644 svg-scribblemation/dist/script.js
 create mode 100644 svg-scribblemation/dist/style.css
 create mode 100644 svg-scribblemation/license.txt
 create mode 100644 svg-scribblemation/src/index.haml
 create mode 100644 svg-scribblemation/src/script.js
 create mode 100644 svg-scribblemation/src/style.scss
 create mode 100644 svg-sphere-animation-with-anime-js/LICENSE.txt
 create mode 100644 svg-sphere-animation-with-anime-js/README.md
 create mode 100644 svg-sphere-animation-with-anime-js/dist/index.html
 create mode 100644 svg-sphere-animation-with-anime-js/dist/script.js
 create mode 100644 svg-sphere-animation-with-anime-js/dist/style.css
 create mode 100644 svg-sphere-animation-with-anime-js/src/index.html
 create mode 100644 svg-sphere-animation-with-anime-js/src/script.js
 create mode 100644 svg-sphere-animation-with-anime-js/src/style.css
 create mode 100644 sweater-swag-cpc/README.markdown
 create mode 100644 sweater-swag-cpc/dist/index.html
 create mode 100644 sweater-swag-cpc/dist/script.js
 create mode 100644 sweater-swag-cpc/dist/style.css
 create mode 100644 sweater-swag-cpc/license.txt
 create mode 100644 sweater-swag-cpc/src/index.html
 create mode 100644 sweater-swag-cpc/src/script.js
 create mode 100644 sweater-swag-cpc/src/style.scss
 create mode 100644 swipey-gridclearleft/README.markdown
 create mode 100644 swipey-gridclearleft/dist/index.html
 create mode 100644 swipey-gridclearleft/dist/script.js
 create mode 100644 swipey-gridclearleft/dist/style.css
 create mode 100644 swipey-gridclearleft/license.txt
 create mode 100644 swipey-gridclearleft/src/index.html
 create mode 100644 swipey-gridclearleft/src/script.js
 create mode 100644 swipey-gridclearleft/src/style.css
 create mode 100644 tab-bar-interaction-1/README.markdown
 create mode 100644 tab-bar-interaction-1/dist/index.html
 create mode 100644 tab-bar-interaction-1/dist/script.js
 create mode 100644 tab-bar-interaction-1/dist/style.css
 create mode 100644 tab-bar-interaction-1/license.txt
 create mode 100644 tab-bar-interaction-1/src/index.html
 create mode 100644 tab-bar-interaction-1/src/script.js
 create mode 100644 tab-bar-interaction-1/src/style.scss
 create mode 100644 tabbar-animationonly-css/README.markdown
 create mode 100644 tabbar-animationonly-css/dist/index.html
 create mode 100644 tabbar-animationonly-css/dist/style.css
 create mode 100644 tabbar-animationonly-css/license.txt
 create mode 100644 tabbar-animationonly-css/src/index.html
 create mode 100644 tabbar-animationonly-css/src/style.scss
 create mode 100644 task-management-dashboard-ui/LICENSE.txt
 create mode 100644 task-management-dashboard-ui/README.md
 create mode 100644 task-management-dashboard-ui/dist/index.html
 create mode 100644 task-management-dashboard-ui/dist/style.css
 create mode 100644 task-management-dashboard-ui/src/index.html
 create mode 100644 task-management-dashboard-ui/src/style.scss
 create mode 100644 task-management-ui/LICENSE.txt
 create mode 100644 task-management-ui/README.md
 create mode 100644 task-management-ui/dist/index.html
 create mode 100644 task-management-ui/dist/script.js
 create mode 100644 task-management-ui/dist/style.css
 create mode 100644 task-management-ui/src/index.html
 create mode 100644 task-management-ui/src/script.js
 create mode 100644 task-management-ui/src/style.scss
 create mode 100644 test-snowflake/README.markdown
 create mode 100644 test-snowflake/dist/index.html
 create mode 100644 test-snowflake/dist/style.css
 create mode 100644 test-snowflake/license.txt
 create mode 100644 test-snowflake/src/index.html
 create mode 100644 test-snowflake/src/style.css
 create mode 100644 tetradic-truchet/README.markdown
 create mode 100644 tetradic-truchet/dist/apxlmx.js
 create mode 100644 tetradic-truchet/dist/index.html
 create mode 100644 tetradic-truchet/dist/script.js
 create mode 100644 tetradic-truchet/dist/style.css
 create mode 100644 tetradic-truchet/license.txt
 create mode 100644 tetradic-truchet/src/apxlmx.js
 create mode 100644 tetradic-truchet/src/index.pug
 create mode 100644 tetradic-truchet/src/script.babel
 create mode 100644 tetradic-truchet/src/style.scss
 create mode 100644 tetris/README.markdown
 create mode 100644 tetris/dist/index.html
 create mode 100644 tetris/dist/script.js
 create mode 100644 tetris/dist/style.css
 create mode 100644 tetris/license.txt
 create mode 100644 tetris/src/index.html
 create mode 100644 tetris/src/script.js
 create mode 100644 tetris/src/style.css
 create mode 100644 text-grid-with-mouse-interaction-keyframers-3-20/README.markdown
 create mode 100644 text-grid-with-mouse-interaction-keyframers-3-20/dist/index.html
 create mode 100644 text-grid-with-mouse-interaction-keyframers-3-20/dist/script.js
 create mode 100644 text-grid-with-mouse-interaction-keyframers-3-20/dist/style.css
 create mode 100644 text-grid-with-mouse-interaction-keyframers-3-20/license.txt
 create mode 100644 text-grid-with-mouse-interaction-keyframers-3-20/src/index.html
 create mode 100644 text-grid-with-mouse-interaction-keyframers-3-20/src/script.js
 create mode 100644 text-grid-with-mouse-interaction-keyframers-3-20/src/style.scss
 create mode 100644 text-hover/README.markdown
 create mode 100644 text-hover/dist/index.html
 create mode 100644 text-hover/dist/style.css
 create mode 100644 text-hover/license.txt
 create mode 100644 text-hover/src/index.html
 create mode 100644 text-hover/src/style.css
 create mode 100644 text-mask-over-colorful-cubes/README.markdown
 create mode 100644 text-mask-over-colorful-cubes/dist/index.html
 create mode 100644 text-mask-over-colorful-cubes/dist/script.js
 create mode 100644 text-mask-over-colorful-cubes/dist/style.css
 create mode 100644 text-mask-over-colorful-cubes/license.txt
 create mode 100644 text-mask-over-colorful-cubes/src/index.html
 create mode 100644 text-mask-over-colorful-cubes/src/script.babel
 create mode 100644 text-mask-over-colorful-cubes/src/style.css
 create mode 100644 textarea-with-syntax-highlighting/LICENSE.txt
 create mode 100644 textarea-with-syntax-highlighting/README.md
 create mode 100644 textarea-with-syntax-highlighting/dist/index.html
 create mode 100644 textarea-with-syntax-highlighting/dist/script.js
 create mode 100644 textarea-with-syntax-highlighting/dist/style.css
 create mode 100644 textarea-with-syntax-highlighting/src/index.html
 create mode 100644 textarea-with-syntax-highlighting/src/script.js
 create mode 100644 textarea-with-syntax-highlighting/src/style.css
 create mode 100644 texture-challengepen-92020/README.markdown
 create mode 100644 texture-challengepen-92020/dist/index.html
 create mode 100644 texture-challengepen-92020/dist/style.css
 create mode 100644 texture-challengepen-92020/license.txt
 create mode 100644 texture-challengepen-92020/src/index.pug
 create mode 100644 texture-challengepen-92020/src/style.sass
 create mode 100644 the-cat-god/README.markdown
 create mode 100644 the-cat-god/dist/index.html
 create mode 100644 the-cat-god/dist/script.js
 create mode 100644 the-cat-god/dist/style.css
 create mode 100644 the-cat-god/license.txt
 create mode 100644 the-cat-god/src/index.html
 create mode 100644 the-cat-god/src/script.babel
 create mode 100644 the-cat-god/src/style.css
 create mode 100644 the-clips-of-css-v2-react-prism/README.markdown
 create mode 100644 the-clips-of-css-v2-react-prism/dist/index.html
 create mode 100644 the-clips-of-css-v2-react-prism/dist/script.js
 create mode 100644 the-clips-of-css-v2-react-prism/dist/style.css
 create mode 100644 the-clips-of-css-v2-react-prism/license.txt
 create mode 100644 the-clips-of-css-v2-react-prism/src/index.pug
 create mode 100644 the-clips-of-css-v2-react-prism/src/script.babel
 create mode 100644 the-clips-of-css-v2-react-prism/src/style.styl
 create mode 100644 the-cube-of-cubes-css-only/LICENSE.txt
 create mode 100644 the-cube-of-cubes-css-only/README.md
 create mode 100644 the-cube-of-cubes-css-only/dist/index.html
 create mode 100644 the-cube-of-cubes-css-only/dist/style.css
 create mode 100644 the-cube-of-cubes-css-only/src/index.html
 create mode 100644 the-cube-of-cubes-css-only/src/style.scss
 create mode 100644 the-cube/README.markdown
 create mode 100644 the-cube/dist/index.html
 create mode 100644 the-cube/dist/script.js
 create mode 100644 the-cube/dist/style.css
 create mode 100644 the-cube/license.txt
 create mode 100644 the-cube/src/index.html
 create mode 100644 the-cube/src/script.js
 create mode 100644 the-cube/src/style.sass
 create mode 100644 the-div-that-look-different-in-every-browser/README.markdown
 create mode 100644 the-div-that-look-different-in-every-browser/dist/index.html
 create mode 100644 the-div-that-look-different-in-every-browser/dist/script.js
 create mode 100644 the-div-that-look-different-in-every-browser/dist/style.css
 create mode 100644 the-div-that-look-different-in-every-browser/license.txt
 create mode 100644 the-div-that-look-different-in-every-browser/src/index.html
 create mode 100644 the-div-that-look-different-in-every-browser/src/script.js
 create mode 100644 the-div-that-look-different-in-every-browser/src/style.css
 create mode 100644 the-dots-vs-the-bars/README.markdown
 create mode 100644 the-dots-vs-the-bars/dist/index.html
 create mode 100644 the-dots-vs-the-bars/dist/style.css
 create mode 100644 the-dots-vs-the-bars/license.txt
 create mode 100644 the-dots-vs-the-bars/src/index.html
 create mode 100644 the-dots-vs-the-bars/src/style.css
 create mode 100644 the-flame-keeps-burning/README.markdown
 create mode 100644 the-flame-keeps-burning/dist/index.html
 create mode 100644 the-flame-keeps-burning/dist/script.js
 create mode 100644 the-flame-keeps-burning/dist/style.css
 create mode 100644 the-flame-keeps-burning/license.txt
 create mode 100644 the-flame-keeps-burning/src/index.html
 create mode 100644 the-flame-keeps-burning/src/script.js
 create mode 100644 the-flame-keeps-burning/src/style.css
 create mode 100644 the-goo-filter-illustrated/README.markdown
 create mode 100644 the-goo-filter-illustrated/dist/index.html
 create mode 100644 the-goo-filter-illustrated/dist/script.js
 create mode 100644 the-goo-filter-illustrated/dist/style.css
 create mode 100644 the-goo-filter-illustrated/license.txt
 create mode 100644 the-goo-filter-illustrated/src/index.html
 create mode 100644 the-goo-filter-illustrated/src/script.js
 create mode 100644 the-goo-filter-illustrated/src/style.css
 create mode 100644 the-matrix-resurrections-sparklingman-digital-poster-026/README.markdown
 create mode 100644 the-matrix-resurrections-sparklingman-digital-poster-026/dist/index.html
 create mode 100644 the-matrix-resurrections-sparklingman-digital-poster-026/dist/script.js
 create mode 100644 the-matrix-resurrections-sparklingman-digital-poster-026/dist/style.css
 create mode 100644 the-matrix-resurrections-sparklingman-digital-poster-026/license.txt
 create mode 100644 the-matrix-resurrections-sparklingman-digital-poster-026/src/index.haml
 create mode 100644 the-matrix-resurrections-sparklingman-digital-poster-026/src/script.js
 create mode 100644 the-matrix-resurrections-sparklingman-digital-poster-026/src/style.css
 create mode 100644 the-power-of-inherit/README.markdown
 create mode 100644 the-power-of-inherit/dist/index.html
 create mode 100644 the-power-of-inherit/dist/script.js
 create mode 100644 the-power-of-inherit/dist/style.css
 create mode 100644 the-power-of-inherit/license.txt
 create mode 100644 the-power-of-inherit/src/index.html
 create mode 100644 the-power-of-inherit/src/script.js
 create mode 100644 the-power-of-inherit/src/style.scss
 create mode 100644 the-web-artisan-society-2/README.markdown
 create mode 100644 the-web-artisan-society-2/dist/index.html
 create mode 100644 the-web-artisan-society-2/dist/style.css
 create mode 100644 the-web-artisan-society-2/license.txt
 create mode 100644 the-web-artisan-society-2/src/index.html
 create mode 100644 the-web-artisan-society-2/src/style.css
 create mode 100644 three-js-dancing-tree-for-xmas/README.markdown
 create mode 100644 three-js-dancing-tree-for-xmas/dist/index.html
 create mode 100644 three-js-dancing-tree-for-xmas/dist/script.js
 create mode 100644 three-js-dancing-tree-for-xmas/dist/style.css
 create mode 100644 three-js-dancing-tree-for-xmas/license.txt
 create mode 100644 three-js-dancing-tree-for-xmas/src/index.html
 create mode 100644 three-js-dancing-tree-for-xmas/src/script.babel
 create mode 100644 three-js-dancing-tree-for-xmas/src/style.css
 create mode 100644 tiles-with-a-mediterranean-vibe/README.markdown
 create mode 100644 tiles-with-a-mediterranean-vibe/dist/index.html
 create mode 100644 tiles-with-a-mediterranean-vibe/dist/script.js
 create mode 100644 tiles-with-a-mediterranean-vibe/dist/style.css
 create mode 100644 tiles-with-a-mediterranean-vibe/license.txt
 create mode 100644 tiles-with-a-mediterranean-vibe/src/index.html
 create mode 100644 tiles-with-a-mediterranean-vibe/src/script.babel
 create mode 100644 tiles-with-a-mediterranean-vibe/src/style.scss
 create mode 100644 tilt-to-make-room-for-menu/README.markdown
 create mode 100644 tilt-to-make-room-for-menu/dist/index.html
 create mode 100644 tilt-to-make-room-for-menu/dist/script.js
 create mode 100644 tilt-to-make-room-for-menu/dist/style.css
 create mode 100644 tilt-to-make-room-for-menu/license.txt
 create mode 100644 tilt-to-make-room-for-menu/src/index.html
 create mode 100644 tilt-to-make-room-for-menu/src/script.js
 create mode 100644 tilt-to-make-room-for-menu/src/style.css
 create mode 100644 tiny-but-accessible-5-star-rating/README.markdown
 create mode 100644 tiny-but-accessible-5-star-rating/dist/index.html
 create mode 100644 tiny-but-accessible-5-star-rating/dist/style.css
 create mode 100644 tiny-but-accessible-5-star-rating/license.txt
 create mode 100644 tiny-but-accessible-5-star-rating/src/index.html
 create mode 100644 tiny-but-accessible-5-star-rating/src/style.scss
 create mode 100644 to-stick-and-stand/README.markdown
 create mode 100644 to-stick-and-stand/dist/index.html
 create mode 100644 to-stick-and-stand/dist/script.js
 create mode 100644 to-stick-and-stand/dist/style.css
 create mode 100644 to-stick-and-stand/license.txt
 create mode 100644 to-stick-and-stand/src/index.html
 create mode 100644 to-stick-and-stand/src/script.js
 create mode 100644 to-stick-and-stand/src/style.css
 create mode 100644 toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/README.markdown
 create mode 100644 toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/dist/index.html
 create mode 100644 toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/dist/script.js
 create mode 100644 toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/dist/style.css
 create mode 100644 toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/license.txt
 create mode 100644 toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/src/index.html
 create mode 100644 toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/src/script.js
 create mode 100644 toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/src/style.scss
 create mode 100644 toggle-checkbox-without-label/README.markdown
 create mode 100644 toggle-checkbox-without-label/dist/index.html
 create mode 100644 toggle-checkbox-without-label/dist/style.css
 create mode 100644 toggle-checkbox-without-label/license.txt
 create mode 100644 toggle-checkbox-without-label/src/index.html
 create mode 100644 toggle-checkbox-without-label/src/style.sass
 create mode 100644 toggle/README.markdown
 create mode 100644 toggle/dist/index.html
 create mode 100644 toggle/dist/script.js
 create mode 100644 toggle/dist/style.css
 create mode 100644 toggle/license.txt
 create mode 100644 toggle/src/index.html
 create mode 100644 toggle/src/script.js
 create mode 100644 toggle/src/style.css
 create mode 100644 toggles/README.markdown
 create mode 100644 toggles/dist/index.html
 create mode 100644 toggles/dist/style.css
 create mode 100644 toggles/license.txt
 create mode 100644 toggles/src/index.pug
 create mode 100644 toggles/src/style.scss
 create mode 100644 tooltip-appear/README.markdown
 create mode 100644 tooltip-appear/dist/index.html
 create mode 100644 tooltip-appear/dist/script.js
 create mode 100644 tooltip-appear/dist/style.css
 create mode 100644 tooltip-appear/license.txt
 create mode 100644 tooltip-appear/src/index.html
 create mode 100644 tooltip-appear/src/script.js
 create mode 100644 tooltip-appear/src/style.css
 create mode 100644 toon-fire-shader/README.markdown
 create mode 100644 toon-fire-shader/dist/index.html
 create mode 100644 toon-fire-shader/dist/script.js
 create mode 100644 toon-fire-shader/dist/style.css
 create mode 100644 toon-fire-shader/license.txt
 create mode 100644 toon-fire-shader/src/index.html
 create mode 100644 toon-fire-shader/src/script.js
 create mode 100644 toon-fire-shader/src/style.css
 create mode 100644 toon-fireball/README.markdown
 create mode 100644 toon-fireball/dist/index.html
 create mode 100644 toon-fireball/dist/script.js
 create mode 100644 toon-fireball/dist/style.css
 create mode 100644 toon-fireball/license.txt
 create mode 100644 toon-fireball/src/index.html
 create mode 100644 toon-fireball/src/script.babel
 create mode 100644 toon-fireball/src/style.css
 create mode 100644 tracked-session-schedule-with-css-grid-v1/README.markdown
 create mode 100644 tracked-session-schedule-with-css-grid-v1/dist/index.html
 create mode 100644 tracked-session-schedule-with-css-grid-v1/dist/style.css
 create mode 100644 tracked-session-schedule-with-css-grid-v1/license.txt
 create mode 100644 tracked-session-schedule-with-css-grid-v1/src/index.html
 create mode 100644 tracked-session-schedule-with-css-grid-v1/src/style.css
 create mode 100644 travel/README.markdown
 create mode 100644 travel/dist/https___raw_githubusercon.css
 create mode 100644 travel/dist/index.html
 create mode 100644 travel/dist/script.js
 create mode 100644 travel/license.txt
 create mode 100644 travel/src/https___raw_githubusercon.css
 create mode 100644 travel/src/index.html
 create mode 100644 travel/src/script.js
 create mode 100644 troisjs-starfield/README.markdown
 create mode 100644 troisjs-starfield/dist/index.html
 create mode 100644 troisjs-starfield/dist/script.js
 create mode 100644 troisjs-starfield/dist/style.css
 create mode 100644 troisjs-starfield/license.txt
 create mode 100644 troisjs-starfield/src/index.html
 create mode 100644 troisjs-starfield/src/script.js
 create mode 100644 troisjs-starfield/src/style.css
 create mode 100644 turbulence/README.markdown
 create mode 100644 turbulence/dist/index.html
 create mode 100644 turbulence/dist/script.js
 create mode 100644 turbulence/dist/style.css
 create mode 100644 turbulence/license.txt
 create mode 100644 turbulence/src/index.html
 create mode 100644 turbulence/src/script.babel
 create mode 100644 turbulence/src/style.scss
 create mode 100644 turkey/README.markdown
 create mode 100644 turkey/dist/index.html
 create mode 100644 turkey/dist/style.css
 create mode 100644 turkey/license.txt
 create mode 100644 turkey/src/index.html
 create mode 100644 turkey/src/style.css
 create mode 100644 turnsolepure-javascript/README.markdown
 create mode 100644 turnsolepure-javascript/dist/index.html
 create mode 100644 turnsolepure-javascript/dist/script.js
 create mode 100644 turnsolepure-javascript/dist/style.css
 create mode 100644 turnsolepure-javascript/license.txt
 create mode 100644 turnsolepure-javascript/src/index.html
 create mode 100644 turnsolepure-javascript/src/script.js
 create mode 100644 turnsolepure-javascript/src/style.css
 create mode 100644 types-of-coffee-pure-css/README.markdown
 create mode 100644 types-of-coffee-pure-css/dist/index.html
 create mode 100644 types-of-coffee-pure-css/dist/style.css
 create mode 100644 types-of-coffee-pure-css/license.txt
 create mode 100644 types-of-coffee-pure-css/src/index.html
 create mode 100644 types-of-coffee-pure-css/src/style.scss
 create mode 100644 typesetting-hover-over-the-text/README.markdown
 create mode 100644 typesetting-hover-over-the-text/dist/index.html
 create mode 100644 typesetting-hover-over-the-text/dist/script.js
 create mode 100644 typesetting-hover-over-the-text/dist/style.css
 create mode 100644 typesetting-hover-over-the-text/license.txt
 create mode 100644 typesetting-hover-over-the-text/src/index.html
 create mode 100644 typesetting-hover-over-the-text/src/script.js
 create mode 100644 typesetting-hover-over-the-text/src/style.less
 create mode 100644 ui-design-stats-dashboard/README.markdown
 create mode 100644 ui-design-stats-dashboard/dist/index.html
 create mode 100644 ui-design-stats-dashboard/dist/script.js
 create mode 100644 ui-design-stats-dashboard/dist/style.css
 create mode 100644 ui-design-stats-dashboard/license.txt
 create mode 100644 ui-design-stats-dashboard/src/index.pug
 create mode 100644 ui-design-stats-dashboard/src/script.js
 create mode 100644 ui-design-stats-dashboard/src/style.scss
 create mode 100644 ui-design-wedding-planning-app/README.markdown
 create mode 100644 ui-design-wedding-planning-app/dist/index.html
 create mode 100644 ui-design-wedding-planning-app/dist/script.js
 create mode 100644 ui-design-wedding-planning-app/dist/style.css
 create mode 100644 ui-design-wedding-planning-app/license.txt
 create mode 100644 ui-design-wedding-planning-app/src/index.pug
 create mode 100644 ui-design-wedding-planning-app/src/script.js
 create mode 100644 ui-design-wedding-planning-app/src/style.scss
 create mode 100644 vacation-todo-list/README.markdown
 create mode 100644 vacation-todo-list/dist/index.html
 create mode 100644 vacation-todo-list/dist/script.js
 create mode 100644 vacation-todo-list/dist/style.css
 create mode 100644 vacation-todo-list/license.txt
 create mode 100644 vacation-todo-list/src/index.html
 create mode 100644 vacation-todo-list/src/script.js
 create mode 100644 vacation-todo-list/src/style.scss
 create mode 100644 vhs-stuck/README.markdown
 create mode 100644 vhs-stuck/dist/index.html
 create mode 100644 vhs-stuck/dist/script.js
 create mode 100644 vhs-stuck/dist/style.css
 create mode 100644 vhs-stuck/license.txt
 create mode 100644 vhs-stuck/src/index.html
 create mode 100644 vhs-stuck/src/script.js
 create mode 100644 vhs-stuck/src/style.css
 create mode 100644 video-blend-modes-cool-modal/README.markdown
 create mode 100644 video-blend-modes-cool-modal/dist/index.html
 create mode 100644 video-blend-modes-cool-modal/dist/script.js
 create mode 100644 video-blend-modes-cool-modal/dist/style.css
 create mode 100644 video-blend-modes-cool-modal/license.txt
 create mode 100644 video-blend-modes-cool-modal/src/index.haml
 create mode 100644 video-blend-modes-cool-modal/src/script.js
 create mode 100644 video-blend-modes-cool-modal/src/style.scss
 create mode 100644 visual-representation-of-color-names-in-different-color-models/LICENSE.txt
 create mode 100644 visual-representation-of-color-names-in-different-color-models/README.md
 create mode 100644 visual-representation-of-color-names-in-different-color-models/dist/index.html
 create mode 100644 visual-representation-of-color-names-in-different-color-models/dist/script.js
 create mode 100644 visual-representation-of-color-names-in-different-color-models/dist/style.css
 create mode 100644 visual-representation-of-color-names-in-different-color-models/src/index.pug
 create mode 100644 visual-representation-of-color-names-in-different-color-models/src/script.js
 create mode 100644 visual-representation-of-color-names-in-different-color-models/src/style.scss
 create mode 100644 visualizing-the-sun-s-path-in-the-sky/README.markdown
 create mode 100644 visualizing-the-sun-s-path-in-the-sky/dist/index.html
 create mode 100644 visualizing-the-sun-s-path-in-the-sky/dist/script.js
 create mode 100644 visualizing-the-sun-s-path-in-the-sky/dist/style.css
 create mode 100644 visualizing-the-sun-s-path-in-the-sky/license.txt
 create mode 100644 visualizing-the-sun-s-path-in-the-sky/src/index.html
 create mode 100644 visualizing-the-sun-s-path-in-the-sky/src/script.babel
 create mode 100644 visualizing-the-sun-s-path-in-the-sky/src/style.scss
 create mode 100644 vocsselseasily-create-3d-css-html-voxel-models/README.markdown
 create mode 100644 vocsselseasily-create-3d-css-html-voxel-models/dist/index.html
 create mode 100644 vocsselseasily-create-3d-css-html-voxel-models/dist/script.js
 create mode 100644 vocsselseasily-create-3d-css-html-voxel-models/dist/style.css
 create mode 100644 vocsselseasily-create-3d-css-html-voxel-models/license.txt
 create mode 100644 vocsselseasily-create-3d-css-html-voxel-models/src/index.haml
 create mode 100644 vocsselseasily-create-3d-css-html-voxel-models/src/script.js
 create mode 100644 vocsselseasily-create-3d-css-html-voxel-models/src/style.scss
 create mode 100644 volumes/README.markdown
 create mode 100644 volumes/dist/index.html
 create mode 100644 volumes/dist/script.js
 create mode 100644 volumes/dist/style.css
 create mode 100644 volumes/license.txt
 create mode 100644 volumes/src/index.html
 create mode 100644 volumes/src/script.js
 create mode 100644 volumes/src/style.css
 create mode 100644 vortex-lines/README.markdown
 create mode 100644 vortex-lines/dist/index.html
 create mode 100644 vortex-lines/dist/script.js
 create mode 100644 vortex-lines/dist/style.css
 create mode 100644 vortex-lines/license.txt
 create mode 100644 vortex-lines/src/index.html
 create mode 100644 vortex-lines/src/script.ts
 create mode 100644 vortex-lines/src/style.scss
 create mode 100644 voyage-slider-gsap/README.markdown
 create mode 100644 voyage-slider-gsap/dist/index.html
 create mode 100644 voyage-slider-gsap/dist/script.js
 create mode 100644 voyage-slider-gsap/dist/style.css
 create mode 100644 voyage-slider-gsap/license.txt
 create mode 100644 voyage-slider-gsap/src/index.html
 create mode 100644 voyage-slider-gsap/src/script.js
 create mode 100644 voyage-slider-gsap/src/style.scss
 create mode 100644 vue-slider-ui-interaction/README.markdown
 create mode 100644 vue-slider-ui-interaction/dist/index.html
 create mode 100644 vue-slider-ui-interaction/dist/script.js
 create mode 100644 vue-slider-ui-interaction/dist/style.css
 create mode 100644 vue-slider-ui-interaction/license.txt
 create mode 100644 vue-slider-ui-interaction/src/index.html
 create mode 100644 vue-slider-ui-interaction/src/script.js
 create mode 100644 vue-slider-ui-interaction/src/style.scss
 create mode 100644 wacky-buttons-3/README.markdown
 create mode 100644 wacky-buttons-3/dist/index.html
 create mode 100644 wacky-buttons-3/dist/script.js
 create mode 100644 wacky-buttons-3/dist/style.css
 create mode 100644 wacky-buttons-3/license.txt
 create mode 100644 wacky-buttons-3/src/index.html
 create mode 100644 wacky-buttons-3/src/script.js
 create mode 100644 wacky-buttons-3/src/style.scss
 create mode 100644 walkershow-to/README.markdown
 create mode 100644 walkershow-to/dist/index.html
 create mode 100644 walkershow-to/dist/script.js
 create mode 100644 walkershow-to/dist/style.css
 create mode 100644 walkershow-to/license.txt
 create mode 100644 walkershow-to/src/index.html
 create mode 100644 walkershow-to/src/script.js
 create mode 100644 walkershow-to/src/style.scss
 create mode 100644 wandering-through-a-generative-twilight-landscape/README.markdown
 create mode 100644 wandering-through-a-generative-twilight-landscape/dist/index.html
 create mode 100644 wandering-through-a-generative-twilight-landscape/dist/script.js
 create mode 100644 wandering-through-a-generative-twilight-landscape/dist/style.css
 create mode 100644 wandering-through-a-generative-twilight-landscape/license.txt
 create mode 100644 wandering-through-a-generative-twilight-landscape/src/index.html
 create mode 100644 wandering-through-a-generative-twilight-landscape/src/script.js
 create mode 100644 wandering-through-a-generative-twilight-landscape/src/style.css
 create mode 100644 water-bending/README.markdown
 create mode 100644 water-bending/dist/index.html
 create mode 100644 water-bending/dist/script.js
 create mode 100644 water-bending/license.txt
 create mode 100644 water-bending/src/index.html
 create mode 100644 water-bending/src/script.js
 create mode 100644 waves096-of-100days100projects/README.markdown
 create mode 100644 waves096-of-100days100projects/dist/index.html
 create mode 100644 waves096-of-100days100projects/dist/script.js
 create mode 100644 waves096-of-100days100projects/dist/style.css
 create mode 100644 waves096-of-100days100projects/license.txt
 create mode 100644 waves096-of-100days100projects/src/index.html
 create mode 100644 waves096-of-100days100projects/src/script.js
 create mode 100644 waves096-of-100days100projects/src/style.css
 create mode 100644 webgl-markers/README.markdown
 create mode 100644 webgl-markers/dist/index.html
 create mode 100644 webgl-markers/dist/script.js
 create mode 100644 webgl-markers/license.txt
 create mode 100644 webgl-markers/src/index.html
 create mode 100644 webgl-markers/src/script.js
 create mode 100644 webpack-zdog/README.markdown
 create mode 100644 webpack-zdog/dist/index.html
 create mode 100644 webpack-zdog/dist/script.js
 create mode 100644 webpack-zdog/dist/style.css
 create mode 100644 webpack-zdog/license.txt
 create mode 100644 webpack-zdog/src/index.html
 create mode 100644 webpack-zdog/src/script.js
 create mode 100644 webpack-zdog/src/style.css
 create mode 100644 what-s-behind/README.markdown
 create mode 100644 what-s-behind/dist/index.html
 create mode 100644 what-s-behind/dist/script.js
 create mode 100644 what-s-behind/dist/style.css
 create mode 100644 what-s-behind/license.txt
 create mode 100644 what-s-behind/src/index.html
 create mode 100644 what-s-behind/src/script.babel
 create mode 100644 what-s-behind/src/style.css
 create mode 100644 when-you-can-t-decide/README.markdown
 create mode 100644 when-you-can-t-decide/dist/index.html
 create mode 100644 when-you-can-t-decide/dist/script.js
 create mode 100644 when-you-can-t-decide/dist/style.css
 create mode 100644 when-you-can-t-decide/license.txt
 create mode 100644 when-you-can-t-decide/src/index.html
 create mode 100644 when-you-can-t-decide/src/script.babel
 create mode 100644 when-you-can-t-decide/src/style.scss
 create mode 100644 wip-motion-blur-transition/README.markdown
 create mode 100644 wip-motion-blur-transition/dist/index.html
 create mode 100644 wip-motion-blur-transition/dist/script.js
 create mode 100644 wip-motion-blur-transition/dist/style.css
 create mode 100644 wip-motion-blur-transition/license.txt
 create mode 100644 wip-motion-blur-transition/src/index.html
 create mode 100644 wip-motion-blur-transition/src/script.js
 create mode 100644 wip-motion-blur-transition/src/style.css
 create mode 100644 wobble/README.markdown
 create mode 100644 wobble/dist/index.html
 create mode 100644 wobble/dist/script.js
 create mode 100644 wobble/dist/style.css
 create mode 100644 wobble/license.txt
 create mode 100644 wobble/src/index.html
 create mode 100644 wobble/src/script.js
 create mode 100644 wobble/src/style.css
 create mode 100644 wonderland/README.markdown
 create mode 100644 wonderland/dist/index.html
 create mode 100644 wonderland/dist/script.js
 create mode 100644 wonderland/dist/style.css
 create mode 100644 wonderland/license.txt
 create mode 100644 wonderland/src/index.html
 create mode 100644 wonderland/src/script.js
 create mode 100644 wonderland/src/style.scss
 create mode 100644 zdog-and-goo/README.markdown
 create mode 100644 zdog-and-goo/dist/index.html
 create mode 100644 zdog-and-goo/dist/script.js
 create mode 100644 zdog-and-goo/dist/style.css
 create mode 100644 zdog-and-goo/license.txt
 create mode 100644 zdog-and-goo/src/index.html
 create mode 100644 zdog-and-goo/src/script.js
 create mode 100644 zdog-and-goo/src/style.css
 create mode 100644 zdog-space-scene/README.markdown
 create mode 100644 zdog-space-scene/dist/f7248f1855b6b3ac41fc1799b.js
 create mode 100644 zdog-space-scene/dist/index.html
 create mode 100644 zdog-space-scene/dist/script.js
 create mode 100644 zdog-space-scene/dist/style.css
 create mode 100644 zdog-space-scene/license.txt
 create mode 100644 zdog-space-scene/src/f7248f1855b6b3ac41fc1799b.js
 create mode 100644 zdog-space-scene/src/index.html
 create mode 100644 zdog-space-scene/src/script.babel
 create mode 100644 zdog-space-scene/src/style.css
 create mode 100644 zdog-trefoil/README.markdown
 create mode 100644 zdog-trefoil/dist/index.html
 create mode 100644 zdog-trefoil/dist/script.js
 create mode 100644 zdog-trefoil/dist/style.css
 create mode 100644 zdog-trefoil/license.txt
 create mode 100644 zdog-trefoil/src/index.html
 create mode 100644 zdog-trefoil/src/script.js
 create mode 100644 zdog-trefoil/src/style.css
 create mode 100644 zdogcone-mace/README.markdown
 create mode 100644 zdogcone-mace/dist/index.html
 create mode 100644 zdogcone-mace/dist/script.js
 create mode 100644 zdogcone-mace/dist/style.css
 create mode 100644 zdogcone-mace/license.txt
 create mode 100644 zdogcone-mace/src/index.html
 create mode 100644 zdogcone-mace/src/script.js
 create mode 100644 zdogcone-mace/src/style.css
 create mode 100644 zdoglittle-forest/README.markdown
 create mode 100644 zdoglittle-forest/dist/index.html
 create mode 100644 zdoglittle-forest/dist/script.js
 create mode 100644 zdoglittle-forest/dist/style.css
 create mode 100644 zdoglittle-forest/license.txt
 create mode 100644 zdoglittle-forest/src/index.html
 create mode 100644 zdoglittle-forest/src/script.js
 create mode 100644 zdoglittle-forest/src/style.css
 create mode 100644 zdogrgb-birdie/README.markdown
 create mode 100644 zdogrgb-birdie/dist/index.html
 create mode 100644 zdogrgb-birdie/dist/script.js
 create mode 100644 zdogrgb-birdie/dist/style.css
 create mode 100644 zdogrgb-birdie/license.txt
 create mode 100644 zdogrgb-birdie/src/index.html
 create mode 100644 zdogrgb-birdie/src/script.js
 create mode 100644 zdogrgb-birdie/src/style.css
 create mode 100644 zdogsolids/README.markdown
 create mode 100644 zdogsolids/dist/index.html
 create mode 100644 zdogsolids/dist/script.js
 create mode 100644 zdogsolids/dist/style.css
 create mode 100644 zdogsolids/license.txt
 create mode 100644 zdogsolids/src/index.html
 create mode 100644 zdogsolids/src/script.js
 create mode 100644 zdogsolids/src/style.css
 create mode 100644 zig-zag-gradient-lab/README.markdown
 create mode 100644 zig-zag-gradient-lab/dist/index.html
 create mode 100644 zig-zag-gradient-lab/dist/script.js
 create mode 100644 zig-zag-gradient-lab/dist/style.css
 create mode 100644 zig-zag-gradient-lab/license.txt
 create mode 100644 zig-zag-gradient-lab/src/index.html
 create mode 100644 zig-zag-gradient-lab/src/script.js
 create mode 100644 zig-zag-gradient-lab/src/style.scss
 create mode 100644 zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/README.markdown
 create mode 100644 zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/dist/index.html
 create mode 100644 zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/dist/script.js
 create mode 100644 zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/dist/style.css
 create mode 100644 zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/license.txt
 create mode 100644 zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/src/index.html
 create mode 100644 zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/src/script.js
 create mode 100644 zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/src/style.css

diff --git a/017-erosion/README.markdown b/017-erosion/README.markdown
new file mode 100644
index 0000000..52598a2
--- /dev/null
+++ b/017-erosion/README.markdown
@@ -0,0 +1,5 @@
+# #017 | Erosion
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/toshiya-marukubo/pen/KKyVOpw](https://codepen.io/toshiya-marukubo/pen/KKyVOpw).
+
+
diff --git a/017-erosion/dist/index.html b/017-erosion/dist/index.html
new file mode 100644
index 0000000..06bdcc3
--- /dev/null
+++ b/017-erosion/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - #017 | Erosion</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/017-erosion/dist/script.js b/017-erosion/dist/script.js
new file mode 100644
index 0000000..0ca4faa
--- /dev/null
+++ b/017-erosion/dist/script.js
@@ -0,0 +1,364 @@
+// sphere vertex shader source
+const vertexSphereShader = `
+uniform float uTime;
+uniform float mouse;
+varying vec2 vUv;
+float PI = 3.14159265359;
+
+void main(){
+  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+  
+  vUv = uv;
+  
+  gl_Position = projectionMatrix * mvPosition;
+}
+
+`;
+
+// sphere fragment shader source
+const fragmentSphereShader = `
+uniform float uTime;
+uniform sampler2D uTexture;
+varying vec2 vUv;
+
+void main () {
+  vec4 color = texture2D(uTexture, vUv);
+
+  gl_FragColor = vec4(color);
+}
+`;
+
+/**
+ * Mouse class
+ */
+class Mouse {
+  constructor(sketch) {
+    this.sketch = sketch;
+    this.initialize();
+  }
+
+  initialize() {
+    this.delta = 0;
+    this.mouse = new THREE.Vector3();
+    this.setupEvents();
+
+    this.lastX = 0;
+    this.lastY = 0;
+    this.speed = 0;
+  }
+
+  setupEvents() {
+    window.addEventListener('scroll', this.onScroll.bind(this), false);
+    window.addEventListener('mousemove', this.onMousemove.bind(this), false);
+    window.addEventListener('touchmove', this.onTouchmove.bind(this), false);
+  }
+
+  onScroll(e) {
+    const docScrollTop = window.pageYOffset;
+    const docHeight = document.body.scrollHeight - window.innerHeight;
+    const scrollPercent = docScrollTop / docHeight;
+
+    this.delta = scrollPercent;
+  }
+
+  onMousemove(e) {
+    this.mouse.x = e.clientX / window.innerWidth * 2 - 1;
+    this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
+    this.mouse.z = 0;
+
+    this.speed =
+    Math.sqrt((e.pageX - this.lastX) ** 2 +
+    (e.pageY - this.lastY) ** 2) * 0.1;
+    this.lastX = e.pageX;
+    this.lastY = e.pageY;
+  }
+
+  onTouchmove(e) {
+    const touch = e.targetTouches[0];
+
+    this.mouse.x = touch.pageX / window.innerWidth * 2 - 1;
+    this.mouse.y = -(touch.pageY / window.innerHeight) * 2 + 1;
+    this.mouse.z = 0;
+
+    this.speed =
+    Math.sqrt((touch.pageX - this.lastX) ** 2 +
+    (touch.pageY - this.lastY) ** 2) * 0.5;
+    this.lastX = touch.pageX;
+    this.lastY = touch.pageY;
+  }}
+
+
+/**
+ * class Sketch
+ */
+class Sketch {
+  constructor() {
+    this.createCanvas();
+    this.setupEvents();
+    this.time = new THREE.Clock(true);
+    this.mouse = new Mouse(this);
+    this.initialize();
+  }
+
+  createCanvas() {
+    this.renderer =
+    new THREE.WebGLRenderer({
+      antialias: true,
+      alpha: true });
+
+
+    document.body.appendChild(this.renderer.domElement);
+  }
+
+  setupEvents() {
+    window.addEventListener('resize', this.onResize.bind(this), false);
+  }
+
+  onResize() {
+    if (this.preWidth === window.innerWidth && window.innerWidth < 480) {
+      return;
+    }
+
+    this.initialize();
+  }
+
+  initialize() {
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+    }
+
+    this.preWidth = this.width = Math.ceil(window.innerWidth);
+    this.height = Math.ceil(window.innerHeight);
+
+    this.scene = new THREE.Scene();
+
+    this.setupCanvas();
+    this.setupCamera();
+    //this.setupLight();
+    this.setupShape();
+
+    this.draw();
+  }
+
+  setupCanvas() {
+    this.renderer.setSize(this.width, this.height);
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.setClearColor('#FFF0A6', 1.0);
+
+    this.renderer.domElement.style.position = 'fixed';
+    this.renderer.domElement.style.top = '0';
+    this.renderer.domElement.style.left = '0';
+    this.renderer.domElement.style.width = '100%';
+    this.renderer.domElement.style.height = '100%';
+    this.renderer.domElement.style.zIndex = '-1';
+    this.renderer.domElement.style.outline = 'none';
+  }
+
+  setupCamera() {
+    const fov = 120;
+    const fovRadian = fov / 2 * (Math.PI / 180);
+
+    this.dist = this.height / 2 / Math.tan(fovRadian);
+    this.camera =
+    new THREE.PerspectiveCamera(
+    fov,
+    this.width / this.height,
+    0.01,
+    this.dist * 10);
+
+
+    this.cameraV = new THREE.Vector3();
+    this.cameraP = new THREE.Vector3(0, this.dist, this.dist);
+
+    this.camera.position.set(this.cameraP.x, this.cameraP.y, this.cameraP.z);
+    this.camera.lookAt(new THREE.Vector3());
+
+    this.scene.add(this.camera);
+  }
+
+  updateCamera(time) {
+    this.cameraV.subVectors(this.mouse.mouse, this.cameraP).multiplyScalar(0.05);
+    this.cameraP.add(this.cameraV);
+
+    this.camera.position.set(
+    this.cameraP.x * this.dist * 0.0,
+    this.cameraP.y * this.dist * 0.1,
+    this.dist * 0);
+
+
+    this.camera.lookAt(new THREE.Vector3());
+  }
+
+  setupLight() {
+    // directinal light
+    this.directionalLight = new THREE.DirectionalLight(0xffffff);
+    this.scene.add(this.directionalLight);
+
+    // point light
+    this.spotLight = new THREE.SpotLight(0xffffff);
+
+    this.spotLightV = new THREE.Vector3();
+    this.spotLightP = new THREE.Vector3(0, 0, this.dist * 0.1);
+
+    this.spotLight.position.set(this.spotLightP.x, this.spotLightP.y, this.spotLightP.z);
+    this.spotLight.lookAt(new THREE.Vector3());
+
+    this.scene.add(this.spotLight);
+  }
+
+  updateLight() {
+    this.spotLightV.subVectors(this.mouse.mouse, this.spotLightP).multiplyScalar(0.05);
+    this.spotLightP.add(this.spotLightV);
+
+    this.spotLight.position.set(
+    this.spotLightP.x * this.dist,
+    this.spotLightP.y * this.dist,
+    this.dist);
+
+
+    this.spotLight.lookAt(new THREE.Vector3());
+  }
+
+  setupShape() {
+    this.shape = new Shape(this, 0, 0, 0);
+  }
+
+  draw() {
+    const time = this.time.getElapsedTime();
+
+    this.shape.render(time);
+
+    this.updateCamera(time);
+    //this.updateLight(time);
+
+    this.renderer.render(this.scene, this.camera);
+
+    this.animationId = requestAnimationFrame(this.draw.bind(this));
+  }}
+
+
+/**
+ * shape class
+ */
+class Shape {
+  constructor(sketch, x, y, z) {
+    this.sketch = sketch;
+    this.beta = 0;
+    this.position = new THREE.Vector3(x, y, z);
+
+    this.setupSizes();
+    this.initialize();
+  }
+
+  setupSizes() {
+    this.sphereSize = null;
+
+    if (this.sketch.width < 768) {
+      this.sphereSize = 120;
+    }
+
+    if (this.sketch.width >= 768) {
+      this.sphereSize = 192;
+    }
+  }
+
+  initialize() {
+    this.createTexture();
+
+    // sphere 
+    this.sphereGeometry = new THREE.BoxGeometry(this.sphereSize, this.sphereSize, this.sphereSize, 128, 128, 128);
+    this.sphereMaterial = new THREE.ShaderMaterial({
+      side: THREE.DoubleSide,
+      uniforms: {
+        uTime: { type: 'f', value: 0 },
+        mouse: { type: 'f', value: 0 },
+        uTexture: { type: 't', value: this.returnTexture() } },
+
+      vertexShader: vertexSphereShader,
+      fragmentShader: fragmentSphereShader });
+
+
+    this.sphereMeshV = new THREE.Vector3();
+    this.sphereMeshP = new THREE.Vector3(0, 0, 0);
+
+    this.sphereMesh = new THREE.Mesh(this.sphereGeometry, this.sphereMaterial);
+    this.sphereMesh.position.set(this.sphereMeshP.x, this.sphereMeshP.y, this.sphereMeshP.z);
+    this.sphereMesh.rotation.y = -Math.PI / 4;
+
+    this.sketch.scene.add(this.sphereMesh);
+  }
+
+  createTexture() {
+    this.canvas = document.createElement('canvas');
+    this.ctx = this.canvas.getContext('2d');
+
+    this.length = 256;
+
+    this.canvas.width = this.length;
+    this.canvas.height = this.length;
+
+    this.bitOperation = new BitOperation(this.ctx, this.length, this.length);
+
+    this.texture = new THREE.CanvasTexture(this.canvas);
+  }
+
+  returnTexture() {
+    return this.texture;
+  }
+
+  updateTexture(time) {
+    this.bitOperation.render(time);
+  }
+
+  render(time) {
+    this.texture.needsUpdate = true; // important
+    this.updateTexture(time);
+
+    this.sphereMesh.rotation.y = time * 0.3;
+
+    this.sphereMesh.material.uniforms.uTime.value = time;
+    this.sphereMesh.material.uniforms.mouse.value = this.beta;
+  }}
+
+
+// References
+// https://twitter.com/aemkei/status/1378106731386040322
+// Thank you so much.
+class BitOperation {
+  constructor(ctx, width, height) {
+    this.ctx = ctx;
+    this.width = width;
+    this.height = height;
+
+    this.d = this.ctx.createImageData(this.width, this.height);
+  }
+
+  drawData() {
+    this.ctx.putImageData(this.d, 0, 0);
+  }
+
+  updateData(t) {
+    for (let y = 0; y < this.height; y++) {
+      for (let x = 0; x < this.width; x++) {
+        const i = (y * this.width + x) * 4;
+        this.d.data[i + 0] = ((y | x) + t) % 256 + Math.random() * 100;
+        this.d.data[i + 1] = ((y ^ x) + t) % 256 + Math.random() * 100;
+        this.d.data[i + 2] = ((y & x) + t) % 256 + Math.random() * 100;
+        this.d.data[i + 3] = 0xff;
+      }
+    }
+  }
+
+
+  render(t) {
+    this.ctx.clearRect(0, 0, this.width, this.height);
+    this.updateData(t * 100);
+    this.drawData();
+  }}
+
+
+(() => {
+  window.addEventListener('load', () => {
+    new Sketch();
+  });
+})();
\ No newline at end of file
diff --git a/017-erosion/license.txt b/017-erosion/license.txt
new file mode 100644
index 0000000..5430e17
--- /dev/null
+++ b/017-erosion/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Toshiya Marukubo (https://codepen.io/toshiya-marukubo/pen/KKyVOpw)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/017-erosion/src/index.html b/017-erosion/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/017-erosion/src/script.babel b/017-erosion/src/script.babel
new file mode 100644
index 0000000..3f53bc9
--- /dev/null
+++ b/017-erosion/src/script.babel
@@ -0,0 +1,366 @@
+
+
+// sphere vertex shader source
+const vertexSphereShader = `
+uniform float uTime;
+uniform float mouse;
+varying vec2 vUv;
+float PI = 3.14159265359;
+
+void main(){
+  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+  
+  vUv = uv;
+  
+  gl_Position = projectionMatrix * mvPosition;
+}
+
+`;
+
+// sphere fragment shader source
+const fragmentSphereShader = `
+uniform float uTime;
+uniform sampler2D uTexture;
+varying vec2 vUv;
+
+void main () {
+  vec4 color = texture2D(uTexture, vUv);
+
+  gl_FragColor = vec4(color);
+}
+`;
+
+/**
+ * Mouse class
+ */
+class Mouse {
+  constructor(sketch) {
+    this.sketch = sketch;
+    this.initialize();
+  }
+  
+  initialize() {
+    this.delta = 0;
+    this.mouse = new THREE.Vector3();
+    this.setupEvents();
+    
+    this.lastX = 0;
+    this.lastY = 0;
+    this.speed = 0;
+  }
+  
+  setupEvents() {
+    window.addEventListener('scroll', this.onScroll.bind(this), false);
+    window.addEventListener('mousemove', this.onMousemove.bind(this), false);
+    window.addEventListener('touchmove', this.onTouchmove.bind(this), false);
+  }
+
+  onScroll(e) {
+    const docScrollTop = window.pageYOffset;
+    const docHeight = document.body.scrollHeight - window.innerHeight;
+    const scrollPercent = docScrollTop / docHeight;
+
+    this.delta = scrollPercent;
+  }
+
+  onMousemove(e) {
+    this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
+    this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
+    this.mouse.z = 0;
+    
+    this.speed =
+        Math.sqrt((e.pageX - this.lastX) **2 +
+                  (e.pageY - this.lastY) **2) * 0.1;
+      this.lastX = e.pageX;
+      this.lastY = e.pageY;
+  }
+
+  onTouchmove(e) {
+    const touch = e.targetTouches[0];
+
+    this.mouse.x = (touch.pageX / window.innerWidth) * 2 - 1;
+    this.mouse.y =  -(touch.pageY / window.innerHeight) * 2 + 1;
+    this.mouse.z = 0;
+
+    this.speed =
+      Math.sqrt((touch.pageX - this.lastX) **2 +
+                (touch.pageY - this.lastY) **2) * 0.5;
+    this.lastX = touch.pageX;
+    this.lastY = touch.pageY;
+  }
+}
+
+/**
+ * class Sketch
+ */
+class Sketch {
+  constructor() {
+    this.createCanvas();
+    this.setupEvents();
+    this.time = new THREE.Clock(true);
+    this.mouse = new Mouse(this);
+    this.initialize();
+  }
+  
+  createCanvas() {
+    this.renderer =
+      new THREE.WebGLRenderer({
+        antialias: true,
+        alpha: true
+      });
+
+    document.body.appendChild(this.renderer.domElement); 
+  }
+  
+  setupEvents() {
+    window.addEventListener('resize', this.onResize.bind(this), false);
+  }
+  
+  onResize() {
+    if (this.preWidth === window.innerWidth && window.innerWidth < 480) {
+      return;
+    }
+
+    this.initialize();
+  }
+  
+  initialize() {
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+    }
+    
+    this.preWidth = this.width = Math.ceil(window.innerWidth);
+    this.height = Math.ceil(window.innerHeight);
+
+    this.scene = new THREE.Scene();
+    
+    this.setupCanvas();
+    this.setupCamera();
+    //this.setupLight();
+    this.setupShape();
+    
+    this.draw();
+  }
+  
+  setupCanvas() {
+    this.renderer.setSize(this.width, this.height);
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.setClearColor('#FFF0A6', 1.0);
+    
+    this.renderer.domElement.style.position = 'fixed';
+    this.renderer.domElement.style.top = '0';
+    this.renderer.domElement.style.left = '0';
+    this.renderer.domElement.style.width = '100%';
+    this.renderer.domElement.style.height = '100%';
+    this.renderer.domElement.style.zIndex =  '-1';
+    this.renderer.domElement.style.outline = 'none';
+  }
+  
+  setupCamera() {
+    const fov = 120;
+    const fovRadian = (fov / 2) * (Math.PI / 180);
+    
+    this.dist = this.height / 2 / Math.tan(fovRadian);
+    this.camera =
+      new THREE.PerspectiveCamera(
+        fov,
+        this.width / this.height,
+        0.01,
+        this.dist * 10
+      );
+    
+    this.cameraV = new THREE.Vector3();
+    this.cameraP = new THREE.Vector3(0, this.dist, this.dist);
+
+    this.camera.position.set(this.cameraP.x, this.cameraP.y, this.cameraP.z);
+    this.camera.lookAt(new THREE.Vector3());
+    
+    this.scene.add(this.camera);
+  }
+  
+  updateCamera(time) {
+    this.cameraV.subVectors(this.mouse.mouse, this.cameraP).multiplyScalar(0.05);
+    this.cameraP.add(this.cameraV);
+
+    this.camera.position.set(
+      this.cameraP.x * this.dist * 0.0,
+      this.cameraP.y * this.dist * 0.1,
+      this.dist * 0
+    );
+
+    this.camera.lookAt(new THREE.Vector3());
+  }
+  
+  setupLight() {
+    // directinal light
+    this.directionalLight = new THREE.DirectionalLight(0xffffff);
+    this.scene.add(this.directionalLight);
+
+    // point light
+    this.spotLight = new THREE.SpotLight(0xffffff);
+
+    this.spotLightV = new THREE.Vector3();
+    this.spotLightP = new THREE.Vector3(0, 0, this.dist * 0.1);
+
+    this.spotLight.position.set(this.spotLightP.x, this.spotLightP.y, this.spotLightP.z);
+    this.spotLight.lookAt(new THREE.Vector3());
+
+    this.scene.add(this.spotLight);
+  }
+
+  updateLight() {
+    this.spotLightV.subVectors(this.mouse.mouse, this.spotLightP).multiplyScalar(0.05);
+    this.spotLightP.add(this.spotLightV);
+
+    this.spotLight.position.set(
+      this.spotLightP.x * this.dist,
+      this.spotLightP.y * this.dist,
+      this.dist
+    );
+
+    this.spotLight.lookAt(new THREE.Vector3());
+  }
+  
+  setupShape() {
+    this.shape = new Shape(this, 0, 0, 0);
+  }
+
+  draw() {
+    const time = this.time.getElapsedTime();
+    
+    this.shape.render(time);
+
+    this.updateCamera(time);
+    //this.updateLight(time);
+    
+    this.renderer.render(this.scene, this.camera);
+    
+    this.animationId = requestAnimationFrame(this.draw.bind(this));
+  }
+}
+
+/**
+ * shape class
+ */
+class Shape {
+  constructor(sketch, x, y, z) {
+    this.sketch = sketch;
+    this.beta = 0;
+    this.position = new THREE.Vector3(x, y, z);
+    
+    this.setupSizes();
+    this.initialize();
+  }
+
+  setupSizes() {
+    this.sphereSize = null;
+
+    if (this.sketch.width < 768) {
+      this.sphereSize = 120;
+    }
+
+    if (this.sketch.width >= 768) {
+      this.sphereSize = 192;
+    }
+  }
+  
+  initialize() {
+    this.createTexture();
+    
+    // sphere 
+    this.sphereGeometry = new THREE.BoxGeometry(this.sphereSize, this.sphereSize, this.sphereSize, 128, 128, 128);
+    this.sphereMaterial = new THREE.ShaderMaterial({
+      side: THREE.DoubleSide,
+      uniforms: {
+        uTime: {type: 'f', value: 0},
+        mouse: {type: 'f', value: 0},
+        uTexture: {type: 't', value: this.returnTexture()}
+      },
+      vertexShader: vertexSphereShader,
+      fragmentShader: fragmentSphereShader
+    });
+    
+    this.sphereMeshV = new THREE.Vector3();
+    this.sphereMeshP = new THREE.Vector3(0, 0, 0);
+
+    this.sphereMesh = new THREE.Mesh(this.sphereGeometry, this.sphereMaterial);
+    this.sphereMesh.position.set(this.sphereMeshP.x, this.sphereMeshP.y, this.sphereMeshP.z);
+    this.sphereMesh.rotation.y = -Math.PI / 4; 
+    
+    this.sketch.scene.add(this.sphereMesh);
+  }
+  
+  createTexture() {
+    this.canvas = document.createElement('canvas');
+    this.ctx = this.canvas.getContext('2d');
+    
+    this.length = 256;
+    
+    this.canvas.width = this.length;
+    this.canvas.height = this.length;
+    
+    this.bitOperation = new BitOperation(this.ctx, this.length, this.length);
+    
+    this.texture = new THREE.CanvasTexture(this.canvas);
+  }
+  
+  returnTexture() {
+    return this.texture;
+  }
+  
+  updateTexture(time) {
+    this.bitOperation.render(time);
+  }
+  
+  render(time) {
+    this.texture.needsUpdate = true; // important
+    this.updateTexture(time);
+
+    this.sphereMesh.rotation.y = time * 0.3;
+    
+    this.sphereMesh.material.uniforms.uTime.value = time;
+    this.sphereMesh.material.uniforms.mouse.value = this.beta;
+  }
+}
+
+// References
+// https://twitter.com/aemkei/status/1378106731386040322
+// Thank you so much.
+class BitOperation {
+  constructor(ctx, width, height) {
+    this.ctx = ctx;
+    this.width = width;
+    this.height = height;
+    
+    this.d = this.ctx.createImageData(this.width, this.height);
+  }
+  
+  drawData() {
+    this.ctx.putImageData(this.d, 0, 0);
+  }
+  
+  updateData(t) {
+    for (let y = 0; y < this.height; y++) {
+      for (let x = 0; x < this.width; x++) {
+        const i = (y * this.width + x) * 4;
+        this.d.data[i + 0] = ((y | x) + t) % 256 + Math.random() * 100;
+        this.d.data[i + 1] = ((y ^ x) + t) % 256 + Math.random() * 100;
+        this.d.data[i + 2] = ((y & x) + t) % 256 + Math.random() * 100;
+        this.d.data[i + 3] = 0xff;
+      }
+    }
+  }
+  
+  
+  render(t) {
+    this.ctx.clearRect(0, 0, this.width, this.height);
+    this.updateData(t * 100);
+    this.drawData();
+  }
+}
+
+(() => {
+  window.addEventListener('load', () => {
+    new Sketch();
+  });
+})();
diff --git a/1-codevember-2017galaxy/README.markdown b/1-codevember-2017galaxy/README.markdown
new file mode 100644
index 0000000..a447daf
--- /dev/null
+++ b/1-codevember-2017galaxy/README.markdown
@@ -0,0 +1,4 @@
+# [1] Codevember 2017 - Galaxy
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/Mamboleoo/pen/MOwqOp](https://codepen.io/Mamboleoo/pen/MOwqOp).
+
+ 
\ No newline at end of file
diff --git a/1-codevember-2017galaxy/dist/index.html b/1-codevember-2017galaxy/dist/index.html
new file mode 100644
index 0000000..9e18e3b
--- /dev/null
+++ b/1-codevember-2017galaxy/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - [1] Codevember 2017 - Galaxy</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas></canvas>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/OrbitControls.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/perlin.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/1-codevember-2017galaxy/dist/script.js b/1-codevember-2017galaxy/dist/script.js
new file mode 100644
index 0000000..95443c4
--- /dev/null
+++ b/1-codevember-2017galaxy/dist/script.js
@@ -0,0 +1,139 @@
+console.clear();
+
+var ww = window.innerWidth,
+    wh = window.innerHeight;
+
+var renderer = new THREE.WebGLRenderer({
+  antialias: true,
+  canvas: document.querySelector('canvas')
+});
+renderer.setSize(ww, wh);
+renderer.setClearColor(0x001a2d);
+
+var scene = new THREE.Scene();
+scene.fog = new THREE.Fog(0x001a2d, 80, 140);
+
+var camera = new THREE.PerspectiveCamera(45, ww/wh, 0.1, 200);
+camera.position.x = 70;
+camera.position.y = 30;
+camera.position.z = 5;
+camera.lookAt(new THREE.Vector3());
+
+// var controls = new THREE.OrbitControls(camera, renderer.domElement);
+
+/* LIGHTS */
+var moonLight = new THREE.PointLight(0xffffff, 2, 150);
+scene.add( moonLight );
+
+var moon;
+function createMoon() {
+  var geometry = new THREE.SphereGeometry(8, 32, 32);
+  var material = new THREE.MeshPhongMaterial({
+    color: 0x26fdd9,
+    shininess:15,
+    emissive: 0x2bb2e6,
+    emissiveIntensity:0.8
+  });
+  moon = new THREE.Mesh(geometry, material);
+  moon.position.x = -9;
+  moon.position.z = -6.5;
+  moon.position.y = 1;
+  moon.rotation.y = -1;
+  scene.add(moon);
+  moonLight.position.copy(moon.position);
+  moonLight.position.y += 4;
+  var moonLight2 = new THREE.PointLight(0xffffff, 0.6, 150);
+  scene.add(moonLight2);
+  moonLight2.position.x += 20;
+  moonLight2.position.y -= 20;
+  moonLight2.position.z -= 25;
+}
+
+function createTerrain () {
+  var geometry = new THREE.PlaneGeometry(150,150,120,120);
+  var m = new THREE.Matrix4();
+  m.makeRotationX(Math.PI * -0.5);
+  geometry.applyMatrix(m);
+  for(var i=0;i<geometry.vertices.length;i++) {
+    var vector = geometry.vertices[i];
+    var ratio = noise.simplex3(vector.x*0.03, vector.z*0.03, 0);
+    vector.y = ratio * 10;
+  }
+  var material = new THREE.MeshPhongMaterial({  
+    color: 0x198257,
+    emissive: 0x032f50
+  });
+  var plane = new THREE.Mesh(geometry, material);
+  scene.add( plane );
+}
+
+var stars = new THREE.Group();
+scene.add(stars);
+var starsLights = new THREE.Group();
+scene.add(starsLights);
+var starsAmount = 20;
+function createStars() {
+  var geometry = new THREE.SphereGeometry(0.3, 16, 16);
+  var material = new THREE.MeshBasicMaterial({color: 0xffffff});
+  for(var i=0;i<starsAmount;i++) {
+    var star = new THREE.Mesh(geometry, material);
+    star.position.x = (Math.random() - 0.5) * 150;
+    star.position.z = (Math.random() - 0.5) * 150;
+    var ratio = noise.simplex3(star.position.x*0.03, star.position.z*0.03, 0);
+    star.position.y = ratio * 10 + 0.3;
+    stars.add(star);
+    var velX = (Math.random() + 0.1) * 0.1 * (Math.random()<0.5?-1:1);
+    var velY = (Math.random() + 0.1) * 0.1 * (Math.random()<0.5?-1:1);
+    star.vel = new THREE.Vector2(velX, velY);
+    var starLight = new THREE.PointLight(0xffffff, 0.8, 3);
+    starLight.position.copy(star.position);
+    starLight.position.y += 0.5;
+    starsLights.add(starLight);
+  }
+}
+
+function updateStar(star, index) {
+  if (star.position.x < -75) {
+    star.position.x = 75;
+  }
+  if (star.position.x > 75) {
+    star.position.x = -75;
+  }
+  if (star.position.z < -75) {
+    star.position.z = 75;
+  }
+  if (star.position.z > 75) {
+    star.position.z = -75;
+  }
+  
+  star.position.x += star.vel.x;
+  star.position.z += star.vel.y;
+  var ratio = noise.simplex3(star.position.x*0.03, star.position.z*0.03, 0);
+  star.position.y = ratio * 10 + 0.3;
+  
+  
+  starsLights.children[index].position.copy(star.position);
+  starsLights.children[index].position.y += 0.5;
+}
+
+function render(a) {
+  requestAnimationFrame(render);
+  for(var i=0;i<starsAmount;i++) {
+    updateStar(stars.children[i], i);
+  }
+  renderer.render(scene, camera);
+}
+
+function onResize() {
+  ww = window.innerWidth;
+  wh = window.innerHeight;
+  camera.aspect = ww / wh;
+  camera.updateProjectionMatrix();
+  renderer.setSize(ww, wh);
+}
+
+createMoon();
+createTerrain();
+createStars();
+requestAnimationFrame(render);
+window.addEventListener('resize', onResize);
\ No newline at end of file
diff --git a/1-codevember-2017galaxy/dist/style.css b/1-codevember-2017galaxy/dist/style.css
new file mode 100644
index 0000000..22f82b6
--- /dev/null
+++ b/1-codevember-2017galaxy/dist/style.css
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/1-codevember-2017galaxy/license.txt b/1-codevember-2017galaxy/license.txt
new file mode 100644
index 0000000..a6bdecb
--- /dev/null
+++ b/1-codevember-2017galaxy/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Louis Hoebregts (https://codepen.io/Mamboleoo/pen/MOwqOp)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/1-codevember-2017galaxy/src/index.html b/1-codevember-2017galaxy/src/index.html
new file mode 100644
index 0000000..c733673
--- /dev/null
+++ b/1-codevember-2017galaxy/src/index.html
@@ -0,0 +1 @@
+<canvas></canvas>
\ No newline at end of file
diff --git a/1-codevember-2017galaxy/src/script.js b/1-codevember-2017galaxy/src/script.js
new file mode 100644
index 0000000..95443c4
--- /dev/null
+++ b/1-codevember-2017galaxy/src/script.js
@@ -0,0 +1,139 @@
+console.clear();
+
+var ww = window.innerWidth,
+    wh = window.innerHeight;
+
+var renderer = new THREE.WebGLRenderer({
+  antialias: true,
+  canvas: document.querySelector('canvas')
+});
+renderer.setSize(ww, wh);
+renderer.setClearColor(0x001a2d);
+
+var scene = new THREE.Scene();
+scene.fog = new THREE.Fog(0x001a2d, 80, 140);
+
+var camera = new THREE.PerspectiveCamera(45, ww/wh, 0.1, 200);
+camera.position.x = 70;
+camera.position.y = 30;
+camera.position.z = 5;
+camera.lookAt(new THREE.Vector3());
+
+// var controls = new THREE.OrbitControls(camera, renderer.domElement);
+
+/* LIGHTS */
+var moonLight = new THREE.PointLight(0xffffff, 2, 150);
+scene.add( moonLight );
+
+var moon;
+function createMoon() {
+  var geometry = new THREE.SphereGeometry(8, 32, 32);
+  var material = new THREE.MeshPhongMaterial({
+    color: 0x26fdd9,
+    shininess:15,
+    emissive: 0x2bb2e6,
+    emissiveIntensity:0.8
+  });
+  moon = new THREE.Mesh(geometry, material);
+  moon.position.x = -9;
+  moon.position.z = -6.5;
+  moon.position.y = 1;
+  moon.rotation.y = -1;
+  scene.add(moon);
+  moonLight.position.copy(moon.position);
+  moonLight.position.y += 4;
+  var moonLight2 = new THREE.PointLight(0xffffff, 0.6, 150);
+  scene.add(moonLight2);
+  moonLight2.position.x += 20;
+  moonLight2.position.y -= 20;
+  moonLight2.position.z -= 25;
+}
+
+function createTerrain () {
+  var geometry = new THREE.PlaneGeometry(150,150,120,120);
+  var m = new THREE.Matrix4();
+  m.makeRotationX(Math.PI * -0.5);
+  geometry.applyMatrix(m);
+  for(var i=0;i<geometry.vertices.length;i++) {
+    var vector = geometry.vertices[i];
+    var ratio = noise.simplex3(vector.x*0.03, vector.z*0.03, 0);
+    vector.y = ratio * 10;
+  }
+  var material = new THREE.MeshPhongMaterial({  
+    color: 0x198257,
+    emissive: 0x032f50
+  });
+  var plane = new THREE.Mesh(geometry, material);
+  scene.add( plane );
+}
+
+var stars = new THREE.Group();
+scene.add(stars);
+var starsLights = new THREE.Group();
+scene.add(starsLights);
+var starsAmount = 20;
+function createStars() {
+  var geometry = new THREE.SphereGeometry(0.3, 16, 16);
+  var material = new THREE.MeshBasicMaterial({color: 0xffffff});
+  for(var i=0;i<starsAmount;i++) {
+    var star = new THREE.Mesh(geometry, material);
+    star.position.x = (Math.random() - 0.5) * 150;
+    star.position.z = (Math.random() - 0.5) * 150;
+    var ratio = noise.simplex3(star.position.x*0.03, star.position.z*0.03, 0);
+    star.position.y = ratio * 10 + 0.3;
+    stars.add(star);
+    var velX = (Math.random() + 0.1) * 0.1 * (Math.random()<0.5?-1:1);
+    var velY = (Math.random() + 0.1) * 0.1 * (Math.random()<0.5?-1:1);
+    star.vel = new THREE.Vector2(velX, velY);
+    var starLight = new THREE.PointLight(0xffffff, 0.8, 3);
+    starLight.position.copy(star.position);
+    starLight.position.y += 0.5;
+    starsLights.add(starLight);
+  }
+}
+
+function updateStar(star, index) {
+  if (star.position.x < -75) {
+    star.position.x = 75;
+  }
+  if (star.position.x > 75) {
+    star.position.x = -75;
+  }
+  if (star.position.z < -75) {
+    star.position.z = 75;
+  }
+  if (star.position.z > 75) {
+    star.position.z = -75;
+  }
+  
+  star.position.x += star.vel.x;
+  star.position.z += star.vel.y;
+  var ratio = noise.simplex3(star.position.x*0.03, star.position.z*0.03, 0);
+  star.position.y = ratio * 10 + 0.3;
+  
+  
+  starsLights.children[index].position.copy(star.position);
+  starsLights.children[index].position.y += 0.5;
+}
+
+function render(a) {
+  requestAnimationFrame(render);
+  for(var i=0;i<starsAmount;i++) {
+    updateStar(stars.children[i], i);
+  }
+  renderer.render(scene, camera);
+}
+
+function onResize() {
+  ww = window.innerWidth;
+  wh = window.innerHeight;
+  camera.aspect = ww / wh;
+  camera.updateProjectionMatrix();
+  renderer.setSize(ww, wh);
+}
+
+createMoon();
+createTerrain();
+createStars();
+requestAnimationFrame(render);
+window.addEventListener('resize', onResize);
\ No newline at end of file
diff --git a/1-codevember-2017galaxy/src/style.scss b/1-codevember-2017galaxy/src/style.scss
new file mode 100644
index 0000000..22f82b6
--- /dev/null
+++ b/1-codevember-2017galaxy/src/style.scss
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/1-element-css-spinners/README.markdown b/1-element-css-spinners/README.markdown
new file mode 100644
index 0000000..e4f590f
--- /dev/null
+++ b/1-element-css-spinners/README.markdown
@@ -0,0 +1,4 @@
+# 1 Element CSS Spinners
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/Paolo-Duzioni/pen/ZoRabJ](https://codepen.io/Paolo-Duzioni/pen/ZoRabJ).
+
+ 
\ No newline at end of file
diff --git a/1-element-css-spinners/dist/index.html b/1-element-css-spinners/dist/index.html
new file mode 100644
index 0000000..0a71af2
--- /dev/null
+++ b/1-element-css-spinners/dist/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>1 Element CSS Spinners</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<div class="cell">
+  <div class="wrapper">
+    <div class="spinner spinner1"></div>
+  </div>
+</div>
+<div class="cell">
+  <div class="wrapper">
+    <div class="spinner spinner2"></div>
+  </div>
+</div>
+<div class="cell">
+  <div class="wrapper">
+    <div class="spinner spinner3"></div>
+  </div>
+</div>
+<div class="cell">
+  <div class="wrapper">
+    <div class="spinner spinner4"></div>
+  </div>
+</div>
+<div class="cell">
+  <div class="wrapper">
+    <div class="spinner spinner5"></div>
+  </div>
+</div>
+<div class="cell">
+  <div class="wrapper">
+    <div class="spinner spinner6"></div>
+  </div>
+</div>
+<div class="cell">
+  <div class="wrapper">
+    <div class="spinner spinner7"></div>
+  </div>
+</div>
+<div class="cell">
+  <div class="wrapper">
+    <div class="spinner spinner8"></div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/1-element-css-spinners/dist/style.css b/1-element-css-spinners/dist/style.css
new file mode 100644
index 0000000..0fa5e78
--- /dev/null
+++ b/1-element-css-spinners/dist/style.css
@@ -0,0 +1,310 @@
+@import url("https://fonts.googleapis.com/css?family=Source+Serif+Pro");
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  flex-wrap: wrap;
+  font-family: "Source Serif Pro", serif;
+  font-size: 16px;
+  background: dodgerblue;
+  counter-reset: spinnerCount;
+}
+
+.cell {
+  width: 25%;
+}
+.cell .wrapper {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  height: 10rem;
+  margin: 1rem 1rem 0;
+  padding-top: 2.2rem;
+  background: rgba(255, 255, 255, 0.2);
+}
+.cell .wrapper::after {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: 0.2rem;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.25);
+  /* Increment the section counter */
+  counter-increment: spinnerCount;
+  /* Display the counter on pseudo-elements */
+  content: counter(spinnerCount);
+}
+
+.spinner {
+  width: 4rem;
+  height: 4rem;
+}
+.spinner.spinner1 {
+  border: 3px solid rgba(255, 255, 255, 0.25);
+  border-top-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  -webkit-animation: rotation .8s ease infinite;
+          animation: rotation .8s ease infinite;
+}
+.spinner.spinner2 {
+  border: 3px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.5);
+  border-bottom-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  -webkit-animation: rotation .8s ease infinite;
+          animation: rotation .8s ease infinite;
+}
+.spinner.spinner3 {
+  border-top: 3px solid rgba(0, 0, 0, 0.5);
+  border-right: 3px solid transparent;
+  border-radius: 50%;
+  -webkit-animation: rotation .8s linear infinite;
+          animation: rotation .8s linear infinite;
+}
+.spinner.spinner4 {
+  background: rgba(0, 0, 0, 0.5);
+  -webkit-animation: flip 1.2s ease infinite;
+          animation: flip 1.2s ease infinite;
+}
+.spinner.spinner5 {
+  margin-top: 2rem;
+  overflow: hidden;
+  position: relative;
+  height: .5rem;
+  background: rgba(255, 255, 255, 0.25);
+}
+.spinner.spinner5::before {
+  content: '';
+  position: absolute;
+  left: -130%;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  -webkit-animation: progress 4s linear infinite;
+          animation: progress 4s linear infinite;
+}
+.spinner.spinner6 {
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  background: #fff;
+  border-radius: 50%;
+  -webkit-animation: pulse 1s ease-in-out infinite;
+          animation: pulse 1s ease-in-out infinite;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+          transform: translate(-50%, -50%) scale(0);
+}
+.spinner.spinner7 {
+  position: relative;
+}
+.spinner.spinner7::before, .spinner.spinner7::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+          transform: translate(-50%, -50%) scale(0);
+}
+.spinner.spinner7::before {
+  background: #fff;
+  -webkit-animation: pulse2 2s ease-in-out infinite;
+          animation: pulse2 2s ease-in-out infinite;
+}
+.spinner.spinner7::after {
+  background: #fff;
+  -webkit-animation: pulse2 2s 1s ease-in-out infinite;
+          animation: pulse2 2s 1s ease-in-out infinite;
+}
+.spinner.spinner8 {
+  position: relative;
+  -webkit-perspective: 200px;
+          perspective: 200px;
+}
+.spinner.spinner8::before {
+  display: block;
+  content: '';
+  width: 50%;
+  height: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  -webkit-animation: 2s flipWalker ease infinite;
+          animation: 2s flipWalker ease infinite;
+}
+
+@-webkit-keyframes rotation {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+@keyframes rotation {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes flip {
+  0% {
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+  }
+  50% {
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
+            transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
+  }
+  100% {
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
+            transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
+  }
+}
+@keyframes flip {
+  0% {
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+  }
+  50% {
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
+            transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
+  }
+  100% {
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
+            transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
+  }
+}
+@-webkit-keyframes progress {
+  0% {
+    left: -130%;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  50% {
+    left: 130%;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  51% {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    background: rgba(255, 255, 255, 0.5);
+  }
+}
+@keyframes progress {
+  0% {
+    left: -130%;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  50% {
+    left: 130%;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  51% {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    background: rgba(255, 255, 255, 0.5);
+  }
+}
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-transform: translate(-50%, -50%) scale(0);
+            transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translate(-50%, -50%) scale(1);
+            transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    -webkit-transform: translate(-50%, -50%) scale(0);
+            transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translate(-50%, -50%) scale(1);
+            transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes pulse2 {
+  0%, 100% {
+    -webkit-transform: translate(-50%, -50%) scale(0);
+            transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+  }
+  50% {
+    -webkit-transform: translate(-50%, -50%) scale(1);
+            transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+  }
+}
+@keyframes pulse2 {
+  0%, 100% {
+    -webkit-transform: translate(-50%, -50%) scale(0);
+            transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+  }
+  50% {
+    -webkit-transform: translate(-50%, -50%) scale(1);
+            transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes flipWalker {
+  0% {
+    -webkit-transform: translate(0, 0) rotateX(0) rotateY(0);
+            transform: translate(0, 0) rotateX(0) rotateY(0);
+  }
+  25% {
+    -webkit-transform: translate(100%, 0) rotateX(0) rotateY(180deg);
+            transform: translate(100%, 0) rotateX(0) rotateY(180deg);
+  }
+  50% {
+    -webkit-transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
+            transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
+  }
+  75% {
+    -webkit-transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
+            transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
+  }
+  100% {
+    -webkit-transform: translate(0, 0) rotateX(0) rotateY(360deg);
+            transform: translate(0, 0) rotateX(0) rotateY(360deg);
+  }
+}
+@keyframes flipWalker {
+  0% {
+    -webkit-transform: translate(0, 0) rotateX(0) rotateY(0);
+            transform: translate(0, 0) rotateX(0) rotateY(0);
+  }
+  25% {
+    -webkit-transform: translate(100%, 0) rotateX(0) rotateY(180deg);
+            transform: translate(100%, 0) rotateX(0) rotateY(180deg);
+  }
+  50% {
+    -webkit-transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
+            transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
+  }
+  75% {
+    -webkit-transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
+            transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
+  }
+  100% {
+    -webkit-transform: translate(0, 0) rotateX(0) rotateY(360deg);
+            transform: translate(0, 0) rotateX(0) rotateY(360deg);
+  }
+}
diff --git a/1-element-css-spinners/license.txt b/1-element-css-spinners/license.txt
new file mode 100644
index 0000000..d0996bc
--- /dev/null
+++ b/1-element-css-spinners/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Paolo Duzioni (https://codepen.io/Paolo-Duzioni/pen/ZoRabJ)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/1-element-css-spinners/src/index.pug b/1-element-css-spinners/src/index.pug
new file mode 100644
index 0000000..88aae1c
--- /dev/null
+++ b/1-element-css-spinners/src/index.pug
@@ -0,0 +1,5 @@
+- var totSpinners = 8
+- for (var i = 1; i <= totSpinners; i++)
+  .cell
+    .wrapper
+      div( class="spinner spinner" + i)
\ No newline at end of file
diff --git a/1-element-css-spinners/src/style.scss b/1-element-css-spinners/src/style.scss
new file mode 100644
index 0000000..782892a
--- /dev/null
+++ b/1-element-css-spinners/src/style.scss
@@ -0,0 +1,217 @@
+// TYPOGRAPHY
+@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro');
+$font-family: 'Source Serif Pro', serif;
+
+// COLORS
+$white: #fff;
+$black: #000;
+$back: dodgerblue; // Change the color if you want
+
+// GENERAL
+*, *::before, *::after{
+  box-sizing: border-box;
+}
+body{
+  display: flex;
+  flex-wrap: wrap;
+  font-family: $font-family;
+  font-size: 16px;
+  background: $back;
+  // Spinner count reference
+  counter-reset: spinnerCount; 
+}
+.cell{
+  width: 25%;
+  .wrapper{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    height: 10rem;
+    margin: 1rem 1rem 0;
+    padding-top: 2.2rem;
+    background: rgba($white, .2);  
+    &::after{
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      padding: 0.2rem;
+      text-align: center;
+      background: rgba($white, .25);
+      /* Increment the section counter */
+      counter-increment: spinnerCount;
+      /* Display the counter on pseudo-elements */
+      content: counter(spinnerCount);
+    }
+  }
+}
+
+
+// SPINNERS STYLES
+.spinner{
+  // Common styles
+  width: 4rem;
+  height: 4rem;
+  // Individual styles
+  &.spinner1{
+    border: 3px solid rgba($white, .25);
+    border-top-color: rgba($black, .5);
+    border-radius: 50%;
+    animation: rotation .8s ease infinite;
+  }
+  &.spinner2{
+    border: 3px solid transparent;
+    border-top-color: rgba($black, .5);
+    border-bottom-color: rgba($black, .5);
+    border-radius: 50%;
+    animation: rotation .8s ease infinite;
+  }
+  &.spinner3{
+    border-top: 3px solid rgba($black, .5);
+    border-right: 3px solid transparent;
+    border-radius: 50%;
+    animation: rotation .8s linear infinite;
+  }
+  &.spinner4{
+    background: rgba($black, .5);
+    animation: flip 1.2s ease infinite;
+  }
+  &.spinner5{
+    margin-top: 2rem; // just for centering the demo
+    overflow: hidden;
+    position: relative;
+    height: .5rem;
+    background: rgba($white, .25);
+    &::before{
+      content: '';
+      position: absolute;
+      left: -130%;
+      width: 100%;
+      height: 100%;
+      background: rgba($black, .5);
+      animation: progress 4s linear infinite;
+    }
+    
+  }
+  &.spinner6{
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    background: $white;
+    border-radius: 50%;
+    animation: pulse 1s ease-in-out infinite;
+    transform: translate(-50%, -50%) scale(0);
+  }
+  &.spinner7{
+    position: relative;
+    &::before, &::after{
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      transform: translate(-50%, -50%) scale(0);
+    }
+    &::before{
+      background: $white;
+      animation: pulse2 2s ease-in-out infinite;
+    }
+    &::after{
+      background: $white;
+      animation: pulse2 2s 1s ease-in-out infinite;
+    }
+  }
+  &.spinner8{
+    position: relative;
+    perspective: 200px;
+    &::before{
+      display: block;
+      content: '';
+      width: 50%;
+      height: 50%;
+      background: rgba($black, .5);
+      animation: 2s flipWalker ease infinite;
+    }
+  }
+}
+
+
+// ANIMATIONS
+@keyframes rotation{
+  from{
+    transform: rotate(0deg);
+  }
+  to{
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes flip{
+  0%{
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+  }
+  50%{
+    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
+  }
+  100%{
+    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
+  }
+}
+
+@keyframes progress{
+  0%{
+    left: -130%;
+    background: rgba($black, .5);
+  }
+  50%{
+    left: 130%;
+    background: rgba($black, .5);
+  }
+  51%{
+    background: rgba($white, .5);
+  }
+  100%{
+    background: rgba($white, .5);
+  }
+}
+
+@keyframes pulse{
+  0%{
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+  }
+  100%{
+    transform: translate(-50%, -50%) scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse2{
+  0%, 100%{
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+  }
+  50%{
+    transform: translate(-50%, -50%) scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes flipWalker{
+  0%{
+    transform: translate(0, 0) rotateX(0) rotateY(0);
+  }
+  25%{
+    transform: translate(100%, 0) rotateX(0) rotateY(180deg);
+  }
+  50%{
+    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
+  }
+  75%{
+    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
+  }
+  100%{
+    transform:  translate(0, 0) rotateX(0) rotateY(360deg);
+  }
+}
\ No newline at end of file
diff --git a/10-000-codepen-followers/README.markdown b/10-000-codepen-followers/README.markdown
new file mode 100644
index 0000000..fc88861
--- /dev/null
+++ b/10-000-codepen-followers/README.markdown
@@ -0,0 +1,5 @@
+# 10,000 Codepen followers!
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/chrisgannon/pen/qBPGEQy](https://codepen.io/chrisgannon/pen/qBPGEQy).
+
+Heartfelt thanks to each and every person supporting my journey and hopefully learning with me along the way. Cheers!
diff --git a/10-000-codepen-followers/dist/index.html b/10-000-codepen-followers/dist/index.html
new file mode 100644
index 0000000..85226f2
--- /dev/null
+++ b/10-000-codepen-followers/dist/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 10,000 Codepen followers!</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
+	<defs>
+  <linearGradient id="codepenGrad" x1="0" y1="383.12" x2="556" y2="383.12" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#42c2f1"/>
+      <stop offset="0.2" stop-color="#fbda4f"/>
+      <stop offset="0.6" stop-color="#ab63df"/>
+      <stop offset="0.8" stop-color="#5fc581"/>
+      <stop offset="1" stop-color="#42c2f1"/>
+    </linearGradient>		
+    <pattern id="gradPattern" width="556" height="62.4" x="0" y="0" patternUnits="userSpaceOnUse">
+        <rect x="0" y="0" fill="url(#codepenGrad)" width="556" height="62.4" />
+      </pattern>		
+		<clipPath id="numberMask">
+			<rect class="numberMask" x="122.36" y="204.62" width="547.24" height="176.58" fill="red" />
+		</clipPath>
+	<clipPath id="thankYouMask">
+			<rect class="thankYouMask" x="-500" y="204.62" width="615" height="176.58" fill="#29abe2"/>	
+		</clipPath>
+		<path id="one_mid" d="M219.16,266.34h0v-62.6l15.24-.12V389.93H219.16Z" />
+		<path id="one_end" d="M219.16,266.34h0v-12.9l15.24-.12-1.14,62.58h-13Z"  />
+   <g class="confetti">
+    <rect class="paper" width="13" height="8" />
+   </g>
+	</defs>
+	
+<rect id="gradBar" x="120" y="376.31" width="556" height="10" fill="url(#gradPattern)"/>	
+	<path id="one_end" d="M219.16,266.34h-16.8V253.5l32-.12v89.4H219.16Z" fill="#fff" opacity="0"/>
+	<g id="oneContainer">
+	<path id="one" d="M219.16,266.34h-16.8V253.5l32-.12v89.4H219.16Z" fill="#fff" />
+		</g>
+	<g clip-path="url(#numberMask)">
+		<g id="numberGroup">
+			<path id="_0_1" data-name="0_1" d="M253.12,298c0-27.72,14.4-46.08,35.76-46.08,21.6,0,35.88,18.48,35.88,46.08s-14.16,46.2-35.76,46.2C267.64,344.22,253.12,325.74,253.12,298Zm56.64,0c0-19.92-7.92-32.16-20.88-32.16-12.72,0-20.64,12.24-20.64,32.16s8,32.28,20.76,32.28S309.76,318.06,309.76,298Z" fill="#fff" />
+			<path id="comma" d="M340.6,326.58h14l-8.88,30.24h-10Z" fill="#fff" />
+			<path id="_0_2" data-name="0_2" d="M366.88,298c0-27.72,14.4-46.08,35.76-46.08,21.6,0,35.88,18.48,35.88,46.08s-14.16,46.2-35.76,46.2C381.4,344.22,366.88,325.74,366.88,298Zm56.64,0c0-19.92-7.92-32.16-20.88-32.16C389.92,265.86,382,278.1,382,298s8,32.28,20.76,32.28S423.52,318.06,423.52,298Z" fill="#fff" />
+			<path id="_0_3" data-name="0_3" d="M446.56,298c0-27.72,14.4-46.08,35.76-46.08,21.6,0,35.88,18.48,35.88,46.08s-14.16,46.2-35.76,46.2C461.08,344.22,446.56,325.74,446.56,298Zm56.64,0c0-19.92-7.92-32.16-20.88-32.16-12.72,0-20.64,12.24-20.64,32.16s8,32.28,20.76,32.28S503.2,318.06,503.2,298Z" fill="#fff" />
+			<path id="_0_4" data-name="0_4" d="M526.24,298c0-27.72,14.4-46.08,35.76-46.08,21.6,0,35.88,18.48,35.88,46.08s-14.16,46.2-35.76,46.2C540.76,344.22,526.24,325.74,526.24,298Zm56.64,0c0-19.92-7.92-32.16-20.88-32.16-12.72,0-20.64,12.24-20.64,32.16s8,32.28,20.76,32.28S582.88,318.06,582.88,298Z" fill="#fff" />
+		</g>
+	</g>
+      <g clip-path="url(#thankYouMask)">
+      <g id="thankYouGroup">
+        <path d="M139.48,266.7h-23.4V253.38H178V266.7H154.72v76.08H139.48Z" fill="#fff"/>
+        <path d="M241.12,300.78v42h-14.4v-38.4c0-8.76-5.52-14.4-13.68-14.4s-13.8,5.64-13.8,14.4v38.4h-14.4v-89.4h14.4v31.08c3.72-5,10.08-7.8,17.52-7.8C231.16,276.66,241.12,286.5,241.12,300.78Z" fill="#fff"/>
+        <path d="M303.76,299.58v43.2H290.2v-7.2c-4.8,5.76-11.4,8.64-19.2,8.64-14.4,0-23.52-8.16-23.52-19.2,0-9.6,7.56-16,20.64-18.84l21.24-4.56v-2c0-6-4.92-10-12.12-10a15.45,15.45,0,0,0-14.88,10l-12.48-6.24c3.72-9.84,14.52-16.68,27.36-16.68C293,276.66,303.76,286.14,303.76,299.58Zm-14.4,17.16v-4.2L271,316.62c-5.4,1.2-8.52,4.32-8.52,8.28,0,4.92,4,7.92,10.2,7.92C282.28,332.82,289.36,325.86,289.36,316.74Z" fill="#fff"/>
+        <path d="M368.8,300.78v42H354.4v-38.4c0-8.76-5.52-14.4-13.68-14.4s-13.8,5.64-13.8,14.4v38.4h-14.4V278.1h13.56v7.8c3.6-6,10.32-9.24,18.36-9.24C358.84,276.66,368.8,286.62,368.8,300.78Z" fill="#fff"/>
+        <path d="M412.6,304.14l23.64,38.64h-16l-17-28.32-10.08,10.92v17.4h-14.4v-89.4h14.4v52.56l26.16-27.84h16.92Z" fill="#fff"/>
+        <path d="M518.8,278.1,490,350.34c-2.88,7.08-7.92,18.84-24.24,18.84a23.46,23.46,0,0,1-9.48-1.68V355.38a33,33,0,0,0,7.44,1c8.28,0,10.44-4.8,12.12-8.76l2.16-5L452.56,278.1h15.72l17.4,45.72,17.4-45.72Z" fill="#fff"/>
+        <path d="M519.16,310.38c0-19.56,14.88-33.72,34-33.72s34,14.16,34,33.72-15.12,33.84-34,33.84S519.16,329.94,519.16,310.38Zm52.92.12c0-11.88-8-20.52-19-20.52s-19,8.64-19,20.52,7.92,20.4,19,20.4S572.08,322.38,572.08,310.5Z" fill="#fff"/>
+        <path d="M649.59,278.1v64.68H635.92v-7.44c-3.6,5.64-10.2,8.88-18.12,8.88-14.4,0-24.48-11-24.48-25.92V278.1h14.4v38.4c0,8.76,5.52,14.4,13.8,14.4s13.68-5.64,13.68-14.4V278.1Z" fill="#fff"/>
+      </g>
+  
+      </g>
+        <rect id="dot" x="662.8" y="326.58" width="14.88" height="16.2" fill="#fff"/>
+ <g class="container"/>
+</svg>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/10-000-codepen-followers/dist/script.js b/10-000-codepen-followers/dist/script.js
new file mode 100644
index 0000000..af6b591
--- /dev/null
+++ b/10-000-codepen-followers/dist/script.js
@@ -0,0 +1,244 @@
+let select = s => document.querySelector(s),
+  selectAll = s =>  document.querySelectorAll(s),
+		mainSVG = select('#mainSVG'),
+		allNumbers = gsap.utils.toArray('#numberGroup path'),
+		allThankYou = gsap.utils.toArray('#thankYouGroup path'),
+		//colorArray = ["#EF5350", "#EC407A","#AB47BC","#7E57C2","#5C6BC0","#42A5F5","#29B6F6","#26C6DA","#26A69A","#66BB6A","#9CCC65","#D4E157","#FFEE58","#FFCA28","#FFA726","#FF7043","#8D6E63","#BDBDBD","#78909C"],
+		colorArray = ["#42c2f1", "#fbda4f","#ab63df","#5fc581"],
+		confetti = select('.confetti'),
+		container = select('.container')
+
+gsap.set('svg', {
+	visibility: 'visible'
+})
+let confettiTl = gsap.timeline({paused: true});
+
+function playConfetti () {
+	
+	confettiTl.play(0);
+}
+
+function createConfetti () {
+ var i = 160, clone, tl, rot, duration, paperDuration;
+ while(--i > -1) {
+  tl = gsap.timeline();
+  clone = confetti.cloneNode(true);
+  container.appendChild(clone);
+  rot = gsap.utils.random(0, 360);
+  duration = gsap.utils.random(3, 9);
+  paperDuration = (duration)/20;
+  gsap.set(clone, {
+   fill: gsap.utils.random(colorArray),
+   rotation: rot,
+   transformOrigin: '50% 50%'
+  })
+  
+  tl.fromTo(clone, {
+   x: gsap.utils.random(0, 800),
+   y: -50,
+   rotation: rot
+  }, {
+   duration: duration,
+   x: '+=' + gsap.utils.random(-200, 200),
+   y: 650,
+   rotation: '+=180',
+   ease: 'linear'
+  })
+  .to(clone.querySelector('.paper'), {
+   duration: duration/23,
+   scaleY: 0.1,   
+   repeat: 23,
+   yoyo: true
+  }, 0)
+  //console.log(paperDuration)
+  confettiTl.add(tl, i/200).timeScale(2.3);
+ }
+
+	gsap.set('.paper', {
+		transformOrigin: '50% 50%'
+	}) 
+}
+
+let tl = gsap.timeline({repeat: -1});
+tl.add('step0', '+=2')
+.to('#one', {
+	x: -105,
+	ease: 'expo.inOut'
+}, 'step0')
+.to('#one', {
+	rotation: 10,
+	transformOrigin: '50% 150%',
+	ease: 'sine.inOut'
+}, 'step0+=0')
+.to('#one', {
+	rotation: 0,
+
+	ease: 'elastic(0.8, 0.28)'
+}, 'step0+=0.3')
+.to('#one', {
+	morphSVG: {
+		shape: '#one_mid'
+	},
+	ease: 'expo.inOut'
+}, 'step0')
+.add('step1')
+.to('#one, .numberMask', {
+	x: '+=548',
+	ease: 'expo.inOut'
+}, 'step1')
+.to('.thankYouMask', {
+	x: '+=548',
+	ease: 'expo.inOut'
+}, 'step1')
+.from(allThankYou, {
+	x: 50,
+	immediateRender: false,
+	stagger: {
+		each: 0.05
+	},
+	ease: 'expo'
+}, 'step1')
+.from('#gradBar', {
+	width: 0,
+	ease: 'expo.inOut'
+}, 'step1')
+
+.to('#one', {
+	rotation: -10,
+	transformOrigin: '50% 100%',
+	ease: 'sine.inOut'
+}, 'step1+=0')
+.to('#one', {
+	rotation: 0,
+	duration: 1,
+	ease: 'elastic(0.8, 0.28)'
+}, 'step1+=0.3')
+
+.add('step2', '-=0')
+.to('#one', {
+	morphSVG: {
+		shape: '#one_end'
+	},
+	y: '-=80',
+	ease: 'expo.inOut'
+}, 'step2')
+.to('#oneContainer', {
+	scaleX: 1.4,
+	scaleY: 0.6,
+	duration: 0.8,
+	transformOrigin: '50% 0%',
+	ease: 'sine'
+}, 'step2')
+
+
+.add('step3')
+.to('#one', {
+	morphSVG: {
+		shape: '#one_end'
+	},
+	y: '+=80',
+	ease: 'expo.in'
+}, 'step3')
+.to('#oneContainer', {
+	scale: 1,
+	duration: 0.38,
+	ease: 'expo.in'
+}, 'step3')
+
+.to('#one', {
+	rotation: 3,
+	duration: 1,
+	transformOrigin: '50% 120%',
+	ease: "wiggle({type:easeOut, wiggles:8})"
+}, 'step3+=0.5')
+.from('#dot', {
+	scale: 0,
+	transformOrigin: '50% 50%',
+	ease: 'elastic(0.4, 0.5)'
+}, 'step3+=0.46')
+.add(playConfetti, 'step3+=0.46')
+.add('step4', '+=2')
+.to('#one', {
+	morphSVG: {
+		shape: "#one_mid"
+	},
+	duration: 0.2
+}, 'step4')
+.to('#one, .thankYouMask', {
+	x: '-=548',
+	ease: 'expo.inOut'
+}, 'step4')
+.to('#dot', {
+	opacity: 0,
+	duration: 0.2,
+	ease: 'expo'
+}, 'step4')
+.to('.numberMask', {
+	x: '-=548',
+	ease: 'expo.inOut'
+}, 'step4')
+.from(allNumbers, {
+	x: 50,
+	immediateRender: false,
+	stagger: {
+		each: 0.05
+	}
+}, 'step4')
+.from(allNumbers, {
+	rotation: 50,
+	transformOrigin: '50% 50%',
+	immediateRender: false,
+	stagger: {
+		each: 0.05
+	},
+	ease: 'expo'
+}, 'step4')
+.to('#gradBar', {
+	width: 0,
+	ease: 'expo.inOut'
+}, 'step4')
+
+.add('step5')
+.to('#one', {
+	morphSVG: {
+		shape: "M219.16,266.34h-16.8V253.5l32-.12v89.4H219.16Z"
+	},
+	ease: 'expo.inOut',
+	x: 0
+}, 'step5-=0.3')
+
+.to('#one', {
+	rotation: -10,
+	transformOrigin: '50% 100%',
+	ease: 'sine.inOut'
+}, 'step5-=0.3')
+.to('#one', {
+	rotation: 0,
+	duration: 1,
+	ease: 'elastic(0.8, 0.28)'
+}, 'step5')
+
+
+createConfetti();
+
+//start anim - plays once
+gsap.from('#one, #numberGroup path', {
+	stagger: {
+		each: 0.05
+	},
+	scaleY:0,
+	delay: 0.6,
+	duration: 0.8,
+	transformOrigin: '50% 100%',
+	ease: 'elastic(0.73, 0.6)'
+})
+
+//loop the gradient bar
+gsap.to('#gradPattern',  {
+  attr:{
+    x:556
+  },
+	duration: 2,
+	repeat: -1,
+  ease:'linear'
+})
\ No newline at end of file
diff --git a/10-000-codepen-followers/dist/style.css b/10-000-codepen-followers/dist/style.css
new file mode 100644
index 0000000..b3134ee
--- /dev/null
+++ b/10-000-codepen-followers/dist/style.css
@@ -0,0 +1,23 @@
+body {
+ background-color: #131417;
+ overflow: hidden;
+ text-align:center;
+  display: flex;
+  align-items: center;
+  justify-content: center; 
+}
+
+body,
+html {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+svg {
+ width: 100%;
+ height: 100%;
+ visibility: hidden;
+ 
+}
\ No newline at end of file
diff --git a/10-000-codepen-followers/license.txt b/10-000-codepen-followers/license.txt
new file mode 100644
index 0000000..097be04
--- /dev/null
+++ b/10-000-codepen-followers/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Chris Gannon (https://codepen.io/chrisgannon/pen/qBPGEQy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/10-000-codepen-followers/src/index.html b/10-000-codepen-followers/src/index.html
new file mode 100644
index 0000000..2bc69f8
--- /dev/null
+++ b/10-000-codepen-followers/src/index.html
@@ -0,0 +1,55 @@
+<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
+	<defs>
+  <linearGradient id="codepenGrad" x1="0" y1="383.12" x2="556" y2="383.12" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#42c2f1"/>
+      <stop offset="0.2" stop-color="#fbda4f"/>
+      <stop offset="0.6" stop-color="#ab63df"/>
+      <stop offset="0.8" stop-color="#5fc581"/>
+      <stop offset="1" stop-color="#42c2f1"/>
+    </linearGradient>		
+    <pattern id="gradPattern" width="556" height="62.4" x="0" y="0" patternUnits="userSpaceOnUse">
+        <rect x="0" y="0" fill="url(#codepenGrad)" width="556" height="62.4" />
+      </pattern>		
+		<clipPath id="numberMask">
+			<rect class="numberMask" x="122.36" y="204.62" width="547.24" height="176.58" fill="red" />
+		</clipPath>
+	<clipPath id="thankYouMask">
+			<rect class="thankYouMask" x="-500" y="204.62" width="615" height="176.58" fill="#29abe2"/>	
+		</clipPath>
+		<path id="one_mid" d="M219.16,266.34h0v-62.6l15.24-.12V389.93H219.16Z" />
+		<path id="one_end" d="M219.16,266.34h0v-12.9l15.24-.12-1.14,62.58h-13Z"  />
+   <g class="confetti">
+    <rect class="paper" width="13" height="8" />
+   </g>
+	</defs>
+	
+<rect id="gradBar" x="120" y="376.31" width="556" height="10" fill="url(#gradPattern)"/>	
+	<path id="one_end" d="M219.16,266.34h-16.8V253.5l32-.12v89.4H219.16Z" fill="#fff" opacity="0"/>
+	<g id="oneContainer">
+	<path id="one" d="M219.16,266.34h-16.8V253.5l32-.12v89.4H219.16Z" fill="#fff" />
+		</g>
+	<g clip-path="url(#numberMask)">
+		<g id="numberGroup">
+			<path id="_0_1" data-name="0_1" d="M253.12,298c0-27.72,14.4-46.08,35.76-46.08,21.6,0,35.88,18.48,35.88,46.08s-14.16,46.2-35.76,46.2C267.64,344.22,253.12,325.74,253.12,298Zm56.64,0c0-19.92-7.92-32.16-20.88-32.16-12.72,0-20.64,12.24-20.64,32.16s8,32.28,20.76,32.28S309.76,318.06,309.76,298Z" fill="#fff" />
+			<path id="comma" d="M340.6,326.58h14l-8.88,30.24h-10Z" fill="#fff" />
+			<path id="_0_2" data-name="0_2" d="M366.88,298c0-27.72,14.4-46.08,35.76-46.08,21.6,0,35.88,18.48,35.88,46.08s-14.16,46.2-35.76,46.2C381.4,344.22,366.88,325.74,366.88,298Zm56.64,0c0-19.92-7.92-32.16-20.88-32.16C389.92,265.86,382,278.1,382,298s8,32.28,20.76,32.28S423.52,318.06,423.52,298Z" fill="#fff" />
+			<path id="_0_3" data-name="0_3" d="M446.56,298c0-27.72,14.4-46.08,35.76-46.08,21.6,0,35.88,18.48,35.88,46.08s-14.16,46.2-35.76,46.2C461.08,344.22,446.56,325.74,446.56,298Zm56.64,0c0-19.92-7.92-32.16-20.88-32.16-12.72,0-20.64,12.24-20.64,32.16s8,32.28,20.76,32.28S503.2,318.06,503.2,298Z" fill="#fff" />
+			<path id="_0_4" data-name="0_4" d="M526.24,298c0-27.72,14.4-46.08,35.76-46.08,21.6,0,35.88,18.48,35.88,46.08s-14.16,46.2-35.76,46.2C540.76,344.22,526.24,325.74,526.24,298Zm56.64,0c0-19.92-7.92-32.16-20.88-32.16-12.72,0-20.64,12.24-20.64,32.16s8,32.28,20.76,32.28S582.88,318.06,582.88,298Z" fill="#fff" />
+		</g>
+	</g>
+      <g clip-path="url(#thankYouMask)">
+      <g id="thankYouGroup">
+        <path d="M139.48,266.7h-23.4V253.38H178V266.7H154.72v76.08H139.48Z" fill="#fff"/>
+        <path d="M241.12,300.78v42h-14.4v-38.4c0-8.76-5.52-14.4-13.68-14.4s-13.8,5.64-13.8,14.4v38.4h-14.4v-89.4h14.4v31.08c3.72-5,10.08-7.8,17.52-7.8C231.16,276.66,241.12,286.5,241.12,300.78Z" fill="#fff"/>
+        <path d="M303.76,299.58v43.2H290.2v-7.2c-4.8,5.76-11.4,8.64-19.2,8.64-14.4,0-23.52-8.16-23.52-19.2,0-9.6,7.56-16,20.64-18.84l21.24-4.56v-2c0-6-4.92-10-12.12-10a15.45,15.45,0,0,0-14.88,10l-12.48-6.24c3.72-9.84,14.52-16.68,27.36-16.68C293,276.66,303.76,286.14,303.76,299.58Zm-14.4,17.16v-4.2L271,316.62c-5.4,1.2-8.52,4.32-8.52,8.28,0,4.92,4,7.92,10.2,7.92C282.28,332.82,289.36,325.86,289.36,316.74Z" fill="#fff"/>
+        <path d="M368.8,300.78v42H354.4v-38.4c0-8.76-5.52-14.4-13.68-14.4s-13.8,5.64-13.8,14.4v38.4h-14.4V278.1h13.56v7.8c3.6-6,10.32-9.24,18.36-9.24C358.84,276.66,368.8,286.62,368.8,300.78Z" fill="#fff"/>
+        <path d="M412.6,304.14l23.64,38.64h-16l-17-28.32-10.08,10.92v17.4h-14.4v-89.4h14.4v52.56l26.16-27.84h16.92Z" fill="#fff"/>
+        <path d="M518.8,278.1,490,350.34c-2.88,7.08-7.92,18.84-24.24,18.84a23.46,23.46,0,0,1-9.48-1.68V355.38a33,33,0,0,0,7.44,1c8.28,0,10.44-4.8,12.12-8.76l2.16-5L452.56,278.1h15.72l17.4,45.72,17.4-45.72Z" fill="#fff"/>
+        <path d="M519.16,310.38c0-19.56,14.88-33.72,34-33.72s34,14.16,34,33.72-15.12,33.84-34,33.84S519.16,329.94,519.16,310.38Zm52.92.12c0-11.88-8-20.52-19-20.52s-19,8.64-19,20.52,7.92,20.4,19,20.4S572.08,322.38,572.08,310.5Z" fill="#fff"/>
+        <path d="M649.59,278.1v64.68H635.92v-7.44c-3.6,5.64-10.2,8.88-18.12,8.88-14.4,0-24.48-11-24.48-25.92V278.1h14.4v38.4c0,8.76,5.52,14.4,13.8,14.4s13.68-5.64,13.68-14.4V278.1Z" fill="#fff"/>
+      </g>
+  
+      </g>
+        <rect id="dot" x="662.8" y="326.58" width="14.88" height="16.2" fill="#fff"/>
+ <g class="container"/>
+</svg>
\ No newline at end of file
diff --git a/10-000-codepen-followers/src/script.js b/10-000-codepen-followers/src/script.js
new file mode 100644
index 0000000..2620663
--- /dev/null
+++ b/10-000-codepen-followers/src/script.js
@@ -0,0 +1,244 @@
+let select = s => document.querySelector(s),
+  selectAll = s =>  document.querySelectorAll(s),
+		mainSVG = select('#mainSVG'),
+		allNumbers = gsap.utils.toArray('#numberGroup path'),
+		allThankYou = gsap.utils.toArray('#thankYouGroup path'),
+		//colorArray = ["#EF5350", "#EC407A","#AB47BC","#7E57C2","#5C6BC0","#42A5F5","#29B6F6","#26C6DA","#26A69A","#66BB6A","#9CCC65","#D4E157","#FFEE58","#FFCA28","#FFA726","#FF7043","#8D6E63","#BDBDBD","#78909C"],
+		colorArray = ["#42c2f1", "#fbda4f","#ab63df","#5fc581"],
+		confetti = select('.confetti'),
+		container = select('.container')
+
+gsap.set('svg', {
+	visibility: 'visible'
+})
+let confettiTl = gsap.timeline({paused: true});
+
+function playConfetti () {
+	
+	confettiTl.play(0);
+}
+
+function createConfetti () {
+ var i = 160, clone, tl, rot, duration, paperDuration;
+ while(--i > -1) {
+  tl = gsap.timeline();
+  clone = confetti.cloneNode(true);
+  container.appendChild(clone);
+  rot = gsap.utils.random(0, 360);
+  duration = gsap.utils.random(3, 9);
+  paperDuration = (duration)/20;
+  gsap.set(clone, {
+   fill: gsap.utils.random(colorArray),
+   rotation: rot,
+   transformOrigin: '50% 50%'
+  })
+  
+  tl.fromTo(clone, {
+   x: gsap.utils.random(0, 800),
+   y: -50,
+   rotation: rot
+  }, {
+   duration: duration,
+   x: '+=' + gsap.utils.random(-200, 200),
+   y: 650,
+   rotation: '+=180',
+   ease: 'linear'
+  })
+  .to(clone.querySelector('.paper'), {
+   duration: duration/23,
+   scaleY: 0.1,   
+   repeat: 23,
+   yoyo: true
+  }, 0)
+  //console.log(paperDuration)
+  confettiTl.add(tl, i/200).timeScale(2.3);
+ }
+
+	gsap.set('.paper', {
+		transformOrigin: '50% 50%'
+	}) 
+}
+
+let tl = gsap.timeline({repeat: -1});
+tl.add('step0', '+=2')
+.to('#one', {
+	x: -105,
+	ease: 'expo.inOut'
+}, 'step0')
+.to('#one', {
+	rotation: 10,
+	transformOrigin: '50% 150%',
+	ease: 'sine.inOut'
+}, 'step0+=0')
+.to('#one', {
+	rotation: 0,
+
+	ease: 'elastic(0.8, 0.28)'
+}, 'step0+=0.3')
+.to('#one', {
+	morphSVG: {
+		shape: '#one_mid'
+	},
+	ease: 'expo.inOut'
+}, 'step0')
+.add('step1')
+.to('#one, .numberMask', {
+	x: '+=548',
+	ease: 'expo.inOut'
+}, 'step1')
+.to('.thankYouMask', {
+	x: '+=548',
+	ease: 'expo.inOut'
+}, 'step1')
+.from(allThankYou, {
+	x: 50,
+	immediateRender: false,
+	stagger: {
+		each: 0.05
+	},
+	ease: 'expo'
+}, 'step1')
+.from('#gradBar', {
+	width: 0,
+	ease: 'expo.inOut'
+}, 'step1')
+
+.to('#one', {
+	rotation: -10,
+	transformOrigin: '50% 100%',
+	ease: 'sine.inOut'
+}, 'step1+=0')
+.to('#one', {
+	rotation: 0,
+	duration: 1,
+	ease: 'elastic(0.8, 0.28)'
+}, 'step1+=0.3')
+
+.add('step2', '-=0')
+.to('#one', {
+	morphSVG: {
+		shape: '#one_end'
+	},
+	y: '-=80',
+	ease: 'expo.inOut'
+}, 'step2')
+.to('#oneContainer', {
+	scaleX: 1.4,
+	scaleY: 0.6,
+	duration: 0.8,
+	transformOrigin: '50% 0%',
+	ease: 'sine'
+}, 'step2')
+
+
+.add('step3')
+.to('#one', {
+	morphSVG: {
+		shape: '#one_end'
+	},
+	y: '+=80',
+	ease: 'expo.in'
+}, 'step3')
+.to('#oneContainer', {
+	scale: 1,
+	duration: 0.38,
+	ease: 'expo.in'
+}, 'step3')
+
+.to('#one', {
+	rotation: 3,
+	duration: 1,
+	transformOrigin: '50% 120%',
+	ease: "wiggle({type:easeOut, wiggles:8})"
+}, 'step3+=0.5')
+.from('#dot', {
+	scale: 0,
+	transformOrigin: '50% 50%',
+	ease: 'elastic(0.4, 0.5)'
+}, 'step3+=0.46')
+.add(playConfetti, 'step3+=0.46')
+.add('step4', '+=2')
+.to('#one', {
+	morphSVG: {
+		shape: "#one_mid"
+	},
+	duration: 0.2
+}, 'step4')
+.to('#one, .thankYouMask', {
+	x: '-=548',
+	ease: 'expo.inOut'
+}, 'step4')
+.to('#dot', {
+	opacity: 0,
+	duration: 0.2,
+	ease: 'expo'
+}, 'step4')
+.to('.numberMask', {
+	x: '-=548',
+	ease: 'expo.inOut'
+}, 'step4')
+.from(allNumbers, {
+	x: 50,
+	immediateRender: false,
+	stagger: {
+		each: 0.05
+	}
+}, 'step4')
+.from(allNumbers, {
+	rotation: 50,
+	transformOrigin: '50% 50%',
+	immediateRender: false,
+	stagger: {
+		each: 0.05
+	},
+	ease: 'expo'
+}, 'step4')
+.to('#gradBar', {
+	width: 0,
+	ease: 'expo.inOut'
+}, 'step4')
+
+.add('step5')
+.to('#one', {
+	morphSVG: {
+		shape: "M219.16,266.34h-16.8V253.5l32-.12v89.4H219.16Z"
+	},
+	ease: 'expo.inOut',
+	x: 0
+}, 'step5-=0.3')
+
+.to('#one', {
+	rotation: -10,
+	transformOrigin: '50% 100%',
+	ease: 'sine.inOut'
+}, 'step5-=0.3')
+.to('#one', {
+	rotation: 0,
+	duration: 1,
+	ease: 'elastic(0.8, 0.28)'
+}, 'step5')
+
+
+createConfetti();
+
+//start anim - plays once
+gsap.from('#one, #numberGroup path', {
+	stagger: {
+		each: 0.05
+	},
+	scaleY:0,
+	delay: 0.6,
+	duration: 0.8,
+	transformOrigin: '50% 100%',
+	ease: 'elastic(0.73, 0.6)'
+})
+
+//loop the gradient bar
+gsap.to('#gradPattern',  {
+  attr:{
+    x:556
+  },
+	duration: 2,
+	repeat: -1,
+  ease:'linear'
+})
diff --git a/10-000-codepen-followers/src/style.css b/10-000-codepen-followers/src/style.css
new file mode 100644
index 0000000..b3134ee
--- /dev/null
+++ b/10-000-codepen-followers/src/style.css
@@ -0,0 +1,23 @@
+body {
+ background-color: #131417;
+ overflow: hidden;
+ text-align:center;
+  display: flex;
+  align-items: center;
+  justify-content: center; 
+}
+
+body,
+html {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+svg {
+ width: 100%;
+ height: 100%;
+ visibility: hidden;
+ 
+}
\ No newline at end of file
diff --git a/10print-svg/README.markdown b/10print-svg/README.markdown
new file mode 100644
index 0000000..5f23ec7
--- /dev/null
+++ b/10print-svg/README.markdown
@@ -0,0 +1,5 @@
+# 10PRINT SVG
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/GeorgeDoesCode/pen/vYKyJLo](https://codepen.io/GeorgeDoesCode/pen/vYKyJLo).
+
+
diff --git a/10print-svg/dist/index.html b/10print-svg/dist/index.html
new file mode 100644
index 0000000..a347023
--- /dev/null
+++ b/10print-svg/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 10PRINT SVG</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/10print-svg/dist/script.js b/10print-svg/dist/script.js
new file mode 100644
index 0000000..4289c2b
--- /dev/null
+++ b/10print-svg/dist/script.js
@@ -0,0 +1,42 @@
+// Based on https://www.youtube.com/watch?v=bEyTZ5ZZxZs thanks @shiffman!
+
+const canvasWidth = 400;
+const canvasHeight = 400;
+
+const canvas = SVG().addTo('body').viewbox(`0 0 ${canvasWidth} ${canvasHeight}`);
+
+const space = 15;
+let x = 0;
+let y = 0;
+
+const lineStyle = {
+  width: 2,
+  color: '#FFE3EC' };
+
+
+(function drawLoop() {
+  // play with this value to get more forward or back slashes!
+  if (random(0, 1) < 0.25) {
+    // backslash
+    canvas.line(x, y, x + space, y + space).stroke(lineStyle);
+  } else {
+    // forward slash
+    canvas.line(x, y + space, x + space, y).stroke(lineStyle);
+  }
+
+  x += space;
+
+  if (x > canvasWidth) {
+    x = 0;
+    y += space;
+  }
+
+  if (y < canvasHeight) {
+    requestAnimationFrame(drawLoop);
+  }
+})();
+
+// random utility fn
+function random(min, max) {
+  return Math.random() * (max - min) + min;
+}
\ No newline at end of file
diff --git a/10print-svg/dist/style.css b/10print-svg/dist/style.css
new file mode 100644
index 0000000..68340c5
--- /dev/null
+++ b/10print-svg/dist/style.css
@@ -0,0 +1,26 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  display: -webkit-box;
+  display: flex;
+  min-width: 240px;
+  height: 100vh;
+  background: #FFE3EC;
+  padding: 2rem;
+  overflow: hidden;
+}
+
+svg {
+  width: 75vmin;
+  flex-shrink: 1;
+  margin: auto;
+  background: #FF8CBA;
+  border: 6px solid #FF8CBA;
+  border-radius: 24px;
+}
+
+line {
+  stroke-linecap: round;
+}
\ No newline at end of file
diff --git a/10print-svg/license.txt b/10print-svg/license.txt
new file mode 100644
index 0000000..85de425
--- /dev/null
+++ b/10print-svg/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by George (https://codepen.io/GeorgeDoesCode/pen/vYKyJLo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/10print-svg/src/index.html b/10print-svg/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/10print-svg/src/script.babel b/10print-svg/src/script.babel
new file mode 100644
index 0000000..b2e3a8d
--- /dev/null
+++ b/10print-svg/src/script.babel
@@ -0,0 +1,42 @@
+// Based on https://www.youtube.com/watch?v=bEyTZ5ZZxZs thanks @shiffman!
+
+const canvasWidth = 400;
+const canvasHeight = 400;
+
+const canvas = SVG().addTo('body').viewbox(`0 0 ${canvasWidth} ${canvasHeight}`);
+
+const space = 15;
+let x = 0;
+let y = 0;
+
+const lineStyle = {
+     width: 2,
+     color: '#FFE3EC'
+};
+
+(function drawLoop() {
+   // play with this value to get more forward or back slashes!
+   if(random(0, 1) < 0.25) {
+     // backslash
+     canvas.line(x, y, x + space, y + space).stroke(lineStyle);
+   } else {
+    // forward slash
+    canvas.line(x, y + space, x + space, y).stroke(lineStyle);
+   }
+  
+  x += space;
+  
+  if(x > canvasWidth) {
+    x = 0;
+    y += space;
+  }
+  
+  if(y < canvasHeight) {
+    requestAnimationFrame(drawLoop);
+  }
+})();
+
+// random utility fn
+function random(min, max) {
+    return Math.random() * (max - min) + min;
+}
diff --git a/10print-svg/src/style.scss b/10print-svg/src/style.scss
new file mode 100644
index 0000000..9da9b9a
--- /dev/null
+++ b/10print-svg/src/style.scss
@@ -0,0 +1,25 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  min-width: 240px;
+  height: 100vh;
+  background: #FFE3EC;
+  padding: 2rem;
+  overflow: hidden;
+}
+
+svg {
+  width: 75vmin;
+  flex-shrink: 1;
+  margin: auto;
+  background: #FF8CBA;
+  border: 6px solid #FF8CBA;
+  border-radius: 24px;
+}
+
+line {
+  stroke-linecap: round;
+}
\ No newline at end of file
diff --git a/141-in-2021-javascript-canvas/README.markdown b/141-in-2021-javascript-canvas/README.markdown
new file mode 100644
index 0000000..2e85aad
--- /dev/null
+++ b/141-in-2021-javascript-canvas/README.markdown
@@ -0,0 +1,5 @@
+# #141 in 2021 / JavaScript Canvas
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/toshiya-marukubo/pen/VwpLWxR](https://codepen.io/toshiya-marukubo/pen/VwpLWxR).
+
+
diff --git a/141-in-2021-javascript-canvas/dist/index.html b/141-in-2021-javascript-canvas/dist/index.html
new file mode 100644
index 0000000..cd7ddeb
--- /dev/null
+++ b/141-in-2021-javascript-canvas/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - #141 in 2021 / JavaScript Canvas</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/141-in-2021-javascript-canvas/dist/script.js b/141-in-2021-javascript-canvas/dist/script.js
new file mode 100644
index 0000000..1da9473
--- /dev/null
+++ b/141-in-2021-javascript-canvas/dist/script.js
@@ -0,0 +1,82 @@
+var W, M, c, C, WW, WH,
+    xNum, yNum, rad, num, angle, pos,
+    animationId;
+
+var getRandomNumber = function (min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+var makeCanvas = function () {
+  document
+    .getElementsByTagName("body")[0]
+    .appendChild(document.createElement("canvas"));
+};
+
+var initialize = function () {
+  W = window;
+  M = Math;
+  c = document.getElementsByTagName("canvas")[0];
+  C = c.getContext("2d");
+  WW = c.width = M.floor(W.innerWidth);
+  WH = c.height = M.floor(W.innerHeight);
+  rad = M.PI / 2;
+  pos = [];
+  angle = 0;
+  length = 20;
+  for (var y = 0; y < WH; y+=length) {
+    for (var x = 0; x < WW; x+=length) {
+      pos.push([x, y, getRandomNumber(0, 1)]);
+    }
+  }
+};
+
+var f = function (t) {
+  t /= 200;
+  C.save();
+  C.clearRect(0, 0, WW, WH);
+  C.lineWidth = 5;
+  for (var i = 0; i < pos.length; i++) {
+    C.save();
+    var cy = pos[i][1] - WH / 2;
+    var cx = pos[i][0] - WW / 2;
+    var dist = M.sqrt(cx * cx + cy * cy) * 0.01;
+    var theta = M.atan2(cy, cx);
+    var s = M.sin(M.sin(theta * M.PI / 180) + dist - t) + theta * 3 + 1;
+    if (M.sin(t + s) > 0) {
+      C.translate(pos[i][0] + length / 2, pos[i][1] + length / 2);
+      C.strokeStyle = 'hsl(' + M.sin(t + s) * 360 + ', 80%, 60%)';
+      C.rotate(t + s);
+      C.translate(-pos[i][0] - length / 2, -pos[i][1] - length / 2);
+    }
+    if (pos[i][2] === 0) {
+      C.beginPath();
+      C.moveTo(pos[i][0], pos[i][1]);
+      C.lineTo(pos[i][0] + length, pos[i][1] + length);
+      C.stroke();
+    } else {
+      C.beginPath();
+      C.moveTo(pos[i][0] + length, pos[i][1]);
+      C.lineTo(pos[i][0], pos[i][1] + length);
+      C.stroke();
+    }
+    C.restore();
+  }
+  C.restore();
+  angle += 5;
+  if (angle > 360) {
+    angle = 0;
+  }
+  animationId = requestAnimationFrame(f);
+};
+
+window.onload = function () {
+  makeCanvas();
+  initialize();
+  f();
+  W.onresize = function () {
+    cancelAnimationFrame(animationId);
+    length = 250;
+    initialize();
+    f();
+  };
+};
\ No newline at end of file
diff --git a/141-in-2021-javascript-canvas/dist/style.css b/141-in-2021-javascript-canvas/dist/style.css
new file mode 100644
index 0000000..5b094e7
--- /dev/null
+++ b/141-in-2021-javascript-canvas/dist/style.css
@@ -0,0 +1,5 @@
+* {
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/141-in-2021-javascript-canvas/license.txt b/141-in-2021-javascript-canvas/license.txt
new file mode 100644
index 0000000..02c7c44
--- /dev/null
+++ b/141-in-2021-javascript-canvas/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Toshiya Marukubo (https://codepen.io/toshiya-marukubo/pen/VwpLWxR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/141-in-2021-javascript-canvas/src/index.html b/141-in-2021-javascript-canvas/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/141-in-2021-javascript-canvas/src/script.js b/141-in-2021-javascript-canvas/src/script.js
new file mode 100644
index 0000000..1da9473
--- /dev/null
+++ b/141-in-2021-javascript-canvas/src/script.js
@@ -0,0 +1,82 @@
+var W, M, c, C, WW, WH,
+    xNum, yNum, rad, num, angle, pos,
+    animationId;
+
+var getRandomNumber = function (min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+var makeCanvas = function () {
+  document
+    .getElementsByTagName("body")[0]
+    .appendChild(document.createElement("canvas"));
+};
+
+var initialize = function () {
+  W = window;
+  M = Math;
+  c = document.getElementsByTagName("canvas")[0];
+  C = c.getContext("2d");
+  WW = c.width = M.floor(W.innerWidth);
+  WH = c.height = M.floor(W.innerHeight);
+  rad = M.PI / 2;
+  pos = [];
+  angle = 0;
+  length = 20;
+  for (var y = 0; y < WH; y+=length) {
+    for (var x = 0; x < WW; x+=length) {
+      pos.push([x, y, getRandomNumber(0, 1)]);
+    }
+  }
+};
+
+var f = function (t) {
+  t /= 200;
+  C.save();
+  C.clearRect(0, 0, WW, WH);
+  C.lineWidth = 5;
+  for (var i = 0; i < pos.length; i++) {
+    C.save();
+    var cy = pos[i][1] - WH / 2;
+    var cx = pos[i][0] - WW / 2;
+    var dist = M.sqrt(cx * cx + cy * cy) * 0.01;
+    var theta = M.atan2(cy, cx);
+    var s = M.sin(M.sin(theta * M.PI / 180) + dist - t) + theta * 3 + 1;
+    if (M.sin(t + s) > 0) {
+      C.translate(pos[i][0] + length / 2, pos[i][1] + length / 2);
+      C.strokeStyle = 'hsl(' + M.sin(t + s) * 360 + ', 80%, 60%)';
+      C.rotate(t + s);
+      C.translate(-pos[i][0] - length / 2, -pos[i][1] - length / 2);
+    }
+    if (pos[i][2] === 0) {
+      C.beginPath();
+      C.moveTo(pos[i][0], pos[i][1]);
+      C.lineTo(pos[i][0] + length, pos[i][1] + length);
+      C.stroke();
+    } else {
+      C.beginPath();
+      C.moveTo(pos[i][0] + length, pos[i][1]);
+      C.lineTo(pos[i][0], pos[i][1] + length);
+      C.stroke();
+    }
+    C.restore();
+  }
+  C.restore();
+  angle += 5;
+  if (angle > 360) {
+    angle = 0;
+  }
+  animationId = requestAnimationFrame(f);
+};
+
+window.onload = function () {
+  makeCanvas();
+  initialize();
+  f();
+  W.onresize = function () {
+    cancelAnimationFrame(animationId);
+    length = 250;
+    initialize();
+    f();
+  };
+};
\ No newline at end of file
diff --git a/141-in-2021-javascript-canvas/src/style.css b/141-in-2021-javascript-canvas/src/style.css
new file mode 100644
index 0000000..5b094e7
--- /dev/null
+++ b/141-in-2021-javascript-canvas/src/style.css
@@ -0,0 +1,5 @@
+* {
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/20/README.markdown b/20/README.markdown
new file mode 100644
index 0000000..309a18c
--- /dev/null
+++ b/20/README.markdown
@@ -0,0 +1,8 @@
+# 20.
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ycw/pen/OJRwedY](https://codepen.io/ycw/pen/OJRwedY).
+
+- [camera movement](https://codepen.io/ycw/details/dypKrKq)
+- [sidewall uv](https://codepen.io/ycw/details/yLaqEWd)
+- photo by [Nik](https://unsplash.com/photos/Geu-i5VvI1A)
+
diff --git a/20/dist/index.html b/20/dist/index.html
new file mode 100644
index 0000000..9f4de92
--- /dev/null
+++ b/20/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 20.</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/20/dist/script.js b/20/dist/script.js
new file mode 100644
index 0000000..0036053
--- /dev/null
+++ b/20/dist/script.js
@@ -0,0 +1,156 @@
+import * as $ from '//unpkg.com/three@0.124.0/build/three.module.js'
+import { OrbitControls } from '//unpkg.com/three@0.124.0/examples/jsm/controls/OrbitControls.js'
+import { EffectComposer } from '//unpkg.com/three@0.124.0/examples/jsm/postprocessing/EffectComposer'
+import { RenderPass } from '//unpkg.com/three@0.124.0/examples/jsm/postprocessing/RenderPass'
+import { UnrealBloomPass } from '//unpkg.com/three@0.124.0/examples/jsm/postprocessing/UnrealBloomPass'
+import { Curves } from '//unpkg.com/three@0.124.0/examples/jsm/curves/CurveExtras'
+// ---- boot
+
+const renderer = new $.WebGLRenderer({});
+const scene = new $.Scene();
+const camera = new $.PerspectiveCamera(75, 2, .01, 5000);
+window.addEventListener('resize', () => {
+    const { clientWidth, clientHeight } = renderer.domElement;
+    renderer.setSize(clientWidth, clientHeight, false);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    camera.aspect = clientWidth / clientHeight;
+    camera.updateProjectionMatrix();
+});
+document.body.prepend(renderer.domElement);
+window.dispatchEvent(new Event('resize'));
+
+// ---- setup
+
+scene.fog = new $.FogExp2('black', 0.05);
+scene.add(new $.HemisphereLight('cyan', 'orange', 2));
+
+// ---- const
+
+const mpms = (20) / 1e3;
+const steps = 2000;
+
+// ---- mesh
+
+const shape = new $.Shape();
+// cw
+shape.moveTo(-5, -1);
+shape.quadraticCurveTo(0, -4, 5, -1);
+shape.lineTo(6, -1);
+shape.quadraticCurveTo(0, -5, -6, -1);
+const extrudePath = new Curves.TorusKnot();
+const UVGenerator = (() => {
+    let i = 0; // face id
+    return {
+        generateTopUV(...xs) { // for 2 "cap" faces
+            return [new $.Vector2(), new $.Vector2(), new $.Vector2()];
+        },
+        generateSideWallUV(_geom, _vs, _a, _b, _c, _d) { // all side faces
+            const segments = 5; // (shape-related; NOT eq `curveSegments`)
+            if (i < segments * steps) { // ignore bottom road faces
+                ++i;
+                return [new $.Vector2(), new $.Vector2(), new $.Vector2(), new $.Vector2()];
+            }
+            const n = i - segments * steps; // offseted face idx
+            const total_col_segments = 7; // (shape-related) 
+            const col = n / steps | 0;
+            const left = col / total_col_segments; // normalize
+            const right = (col + 1) / total_col_segments; // normalize
+            const row = n % steps;
+            const bottom = row / steps; // normalize 
+            const top = (row + 1) / steps; // normalize
+            ++i;
+            return [
+                new $.Vector2(left, bottom), // bottom left 
+                new $.Vector2(right, bottom), // bottom right
+                new $.Vector2(right, top), // top right
+                new $.Vector2(left, top)  // top left
+            ];
+        }
+    };
+})();
+const extrudeGeom = new $.ExtrudeBufferGeometry(shape, {
+    bevelEnabled: false, steps, extrudePath,
+    curveSegments: 5, UVGenerator
+});
+const matSideWall = f();
+const matTop = new $.MeshLambertMaterial({ color: 'black' });
+const mesh = new $.Mesh(extrudeGeom, [matTop, matSideWall]);
+scene.add(mesh);
+
+// ---- composer
+
+const composer = new EffectComposer(renderer);
+composer.addPass(new RenderPass(scene, camera));
+composer.addPass(new UnrealBloomPass(new $.Vector2(), 2, 0.5, 0.7));
+
+// ---- anim
+
+const totalLen = extrudePath.getLength();
+const { binormals } = extrudePath.computeFrenetFrames(steps);
+const $m = new $.Matrix4(); // rotation matrix
+
+renderer.setAnimationLoop((t /*ms*/) => {
+    const $u = ((mpms * t) % totalLen) / totalLen;
+    // update cam position
+    extrudePath.getPointAt($u, camera.position);
+    // update cam rotation
+    camera.setRotationFromMatrix($m.lookAt(
+        /* eye */ camera.position,
+        /* target */ extrudePath.getPointAt(Math.min(1.0, $u + 0.01)),
+        /* up */ binormals[$u * steps | 0]
+    ));
+    renderer.getDrawingBufferSize(composer.passes[1].resolution);
+    composer.render();
+    mesh.material[1].uniforms.t.value = t;
+});
+
+// ---- sidewall material
+
+function f() {
+    const url = 'https://images.unsplash.com/photo-1550747528-cdb45925b3f7?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8dW5pY29ybnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60';
+    const tex = new $.TextureLoader().load(url);
+    tex.wrapS = $.MirroredRepeatWrapping;
+    tex.wrapT = $.RepeatWrapping;
+
+    const shader = $.ShaderLib.lambert;
+    const uniforms = $.UniformsUtils.merge([shader.uniforms, { 
+        t: { value: 0 },
+        stretch: { value: new $.Vector2(1, 10) },
+        div: { value: new $.Vector2(32, 8) },
+    }]);
+    const vertexShader = `
+    uniform sampler2D map;
+    uniform vec2 stretch;
+    ` + shader.vertexShader.replace('#include <uv_vertex>', `
+    #ifdef USE_UV
+        vUv = ( uvTransform * vec3( uv, 1 ) ).xy * stretch;
+    #endif
+    `);
+    const fragmentShader = `
+    uniform vec2 div;
+    uniform vec2 stretch;
+    uniform float t;
+    ` + shader.fragmentShader.replace('#include <map_fragment>', `
+    #ifdef USE_MAP
+        {
+            vec2 i = vec2(ivec2( vUv * div ));
+            vec4 tA = texture2D( map, ( i ) / div );
+            vec4 tB = texture2D( map, ( i + 1.0 ) / div );
+            vec4 texel = 0.5 * (mix( tA, tB, vUv.x ) + mix( tA, tB, vUv.y )); 
+            texel.b = step( 0.5, texel.b ) + ( sin( t * 0.001 ) * 0.5 + 0.5 );
+            texel.r *= 2.0;
+            texel.g *= 0.5;
+            vec2 uv = fract( vUv * stretch * div );
+            texel *= step( 0.2, uv.x ) * step ( 0.2, uv.y );
+            diffuseColor *= texel;
+        }
+	#endif
+    `);
+    const mat = new $.ShaderMaterial({
+        uniforms, vertexShader, fragmentShader,
+        lights: true, fog: true
+    });
+    mat.map = mat.uniforms.map.value = tex;
+
+    return mat;
+}
\ No newline at end of file
diff --git a/20/dist/style.css b/20/dist/style.css
new file mode 100644
index 0000000..39af83a
--- /dev/null
+++ b/20/dist/style.css
@@ -0,0 +1,3 @@
+canvas {
+    display:block; width:100%; height:100vh;
+}
\ No newline at end of file
diff --git a/20/license.txt b/20/license.txt
new file mode 100644
index 0000000..f4973b1
--- /dev/null
+++ b/20/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by ycw (https://codepen.io/ycw/pen/OJRwedY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/20/src/index.html b/20/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/20/src/script.js b/20/src/script.js
new file mode 100644
index 0000000..b80286f
--- /dev/null
+++ b/20/src/script.js
@@ -0,0 +1,156 @@
+import * as $ from '//unpkg.com/three@0.124.0/build/three.module.js'
+import { OrbitControls } from '//unpkg.com/three@0.124.0/examples/jsm/controls/OrbitControls.js'
+import { EffectComposer } from '//unpkg.com/three@0.124.0/examples/jsm/postprocessing/EffectComposer'
+import { RenderPass } from '//unpkg.com/three@0.124.0/examples/jsm/postprocessing/RenderPass'
+import { UnrealBloomPass } from '//unpkg.com/three@0.124.0/examples/jsm/postprocessing/UnrealBloomPass'
+import { Curves } from '//unpkg.com/three@0.124.0/examples/jsm/curves/CurveExtras'
+// ---- boot
+
+const renderer = new $.WebGLRenderer({});
+const scene = new $.Scene();
+const camera = new $.PerspectiveCamera(75, 2, .01, 5000);
+window.addEventListener('resize', () => {
+    const { clientWidth, clientHeight } = renderer.domElement;
+    renderer.setSize(clientWidth, clientHeight, false);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    camera.aspect = clientWidth / clientHeight;
+    camera.updateProjectionMatrix();
+});
+document.body.prepend(renderer.domElement);
+window.dispatchEvent(new Event('resize'));
+
+// ---- setup
+
+scene.fog = new $.FogExp2('black', 0.05);
+scene.add(new $.HemisphereLight('cyan', 'orange', 2));
+
+// ---- const
+
+const mpms = (20) / 1e3;
+const steps = 2000;
+
+// ---- mesh
+
+const shape = new $.Shape();
+// cw
+shape.moveTo(-5, -1);
+shape.quadraticCurveTo(0, -4, 5, -1);
+shape.lineTo(6, -1);
+shape.quadraticCurveTo(0, -5, -6, -1);
+const extrudePath = new Curves.TorusKnot();
+const UVGenerator = (() => {
+    let i = 0; // face id
+    return {
+        generateTopUV(...xs) { // for 2 "cap" faces
+            return [new $.Vector2(), new $.Vector2(), new $.Vector2()];
+        },
+        generateSideWallUV(_geom, _vs, _a, _b, _c, _d) { // all side faces
+            const segments = 5; // (shape-related; NOT eq `curveSegments`)
+            if (i < segments * steps) { // ignore bottom road faces
+                ++i;
+                return [new $.Vector2(), new $.Vector2(), new $.Vector2(), new $.Vector2()];
+            }
+            const n = i - segments * steps; // offseted face idx
+            const total_col_segments = 7; // (shape-related) 
+            const col = n / steps | 0;
+            const left = col / total_col_segments; // normalize
+            const right = (col + 1) / total_col_segments; // normalize
+            const row = n % steps;
+            const bottom = row / steps; // normalize 
+            const top = (row + 1) / steps; // normalize
+            ++i;
+            return [
+                new $.Vector2(left, bottom), // bottom left 
+                new $.Vector2(right, bottom), // bottom right
+                new $.Vector2(right, top), // top right
+                new $.Vector2(left, top)  // top left
+            ];
+        }
+    };
+})();
+const extrudeGeom = new $.ExtrudeBufferGeometry(shape, {
+    bevelEnabled: false, steps, extrudePath,
+    curveSegments: 5, UVGenerator
+});
+const matSideWall = f();
+const matTop = new $.MeshLambertMaterial({ color: 'black' });
+const mesh = new $.Mesh(extrudeGeom, [matTop, matSideWall]);
+scene.add(mesh);
+
+// ---- composer
+
+const composer = new EffectComposer(renderer);
+composer.addPass(new RenderPass(scene, camera));
+composer.addPass(new UnrealBloomPass(new $.Vector2(), 2, 0.5, 0.7));
+
+// ---- anim
+
+const totalLen = extrudePath.getLength();
+const { binormals } = extrudePath.computeFrenetFrames(steps);
+const $m = new $.Matrix4(); // rotation matrix
+
+renderer.setAnimationLoop((t /*ms*/) => {
+    const $u = ((mpms * t) % totalLen) / totalLen;
+    // update cam position
+    extrudePath.getPointAt($u, camera.position);
+    // update cam rotation
+    camera.setRotationFromMatrix($m.lookAt(
+        /* eye */ camera.position,
+        /* target */ extrudePath.getPointAt(Math.min(1.0, $u + 0.01)),
+        /* up */ binormals[$u * steps | 0]
+    ));
+    renderer.getDrawingBufferSize(composer.passes[1].resolution);
+    composer.render();
+    mesh.material[1].uniforms.t.value = t;
+});
+
+// ---- sidewall material
+
+function f() {
+    const url = 'https://images.unsplash.com/photo-1550747528-cdb45925b3f7?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8dW5pY29ybnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60';
+    const tex = new $.TextureLoader().load(url);
+    tex.wrapS = $.MirroredRepeatWrapping;
+    tex.wrapT = $.RepeatWrapping;
+
+    const shader = $.ShaderLib.lambert;
+    const uniforms = $.UniformsUtils.merge([shader.uniforms, { 
+        t: { value: 0 },
+        stretch: { value: new $.Vector2(1, 10) },
+        div: { value: new $.Vector2(32, 8) },
+    }]);
+    const vertexShader = `
+    uniform sampler2D map;
+    uniform vec2 stretch;
+    ` + shader.vertexShader.replace('#include <uv_vertex>', `
+    #ifdef USE_UV
+        vUv = ( uvTransform * vec3( uv, 1 ) ).xy * stretch;
+    #endif
+    `);
+    const fragmentShader = `
+    uniform vec2 div;
+    uniform vec2 stretch;
+    uniform float t;
+    ` + shader.fragmentShader.replace('#include <map_fragment>', `
+    #ifdef USE_MAP
+        {
+            vec2 i = vec2(ivec2( vUv * div ));
+            vec4 tA = texture2D( map, ( i ) / div );
+            vec4 tB = texture2D( map, ( i + 1.0 ) / div );
+            vec4 texel = 0.5 * (mix( tA, tB, vUv.x ) + mix( tA, tB, vUv.y )); 
+            texel.b = step( 0.5, texel.b ) + ( sin( t * 0.001 ) * 0.5 + 0.5 );
+            texel.r *= 2.0;
+            texel.g *= 0.5;
+            vec2 uv = fract( vUv * stretch * div );
+            texel *= step( 0.2, uv.x ) * step ( 0.2, uv.y );
+            diffuseColor *= texel;
+        }
+	#endif
+    `);
+    const mat = new $.ShaderMaterial({
+        uniforms, vertexShader, fragmentShader,
+        lights: true, fog: true
+    });
+    mat.map = mat.uniforms.map.value = tex;
+
+    return mat;
+}
diff --git a/20/src/style.css b/20/src/style.css
new file mode 100644
index 0000000..39af83a
--- /dev/null
+++ b/20/src/style.css
@@ -0,0 +1,3 @@
+canvas {
+    display:block; width:100%; height:100vh;
+}
\ No newline at end of file
diff --git a/2021-to-2022/README.markdown b/2021-to-2022/README.markdown
new file mode 100644
index 0000000..d8431cb
--- /dev/null
+++ b/2021-to-2022/README.markdown
@@ -0,0 +1,5 @@
+# 2021 to 2022
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/alvaromontoro/pen/QWqmybN](https://codepen.io/alvaromontoro/pen/QWqmybN).
+
+
diff --git a/2021-to-2022/dist/index.html b/2021-to-2022/dist/index.html
new file mode 100644
index 0000000..8725243
--- /dev/null
+++ b/2021-to-2022/dist/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 2021 to 2022</title>
+  <meta name="monetization" content="$ilp.uphold.com/2f28xFUMdj9Z" />
+<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="year">
+  <div class="letter letter-2">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <span></span>
+  </div>
+  <div class="letter letter-0">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <span></span>
+  </div>
+  <div class="letter letter-2">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <span></span>
+  </div>
+  <div class="letter letter-1">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <span></span>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/2021-to-2022/dist/style.css b/2021-to-2022/dist/style.css
new file mode 100644
index 0000000..78d4f9c
--- /dev/null
+++ b/2021-to-2022/dist/style.css
@@ -0,0 +1,145 @@
+@import url('https://fonts.googleapis.com/css2?family=Chango&display=swap');
+
+body {
+  margin: 0;
+  height: 100vh;
+  overflow: hidden;
+  perspective: 1000px;  
+  background: #3693;
+}
+
+.year {
+  --duration: 1.5s;
+  --color: #147;
+  --shade: #57b;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: Chango, Arial, sans-serif;
+  font-size: 150px;
+  transform-style: preserve-3d;
+}
+
+@keyframes rotate {
+  0% { 
+    transform: rotate3d(0, 1, 0, 0deg); 
+  }
+  100% { 
+    transform: rotate3d(0, 1, 0, -360deg); 
+  }
+}
+
+@keyframes jump {
+  0%, 75%, 100% {
+    margin-top: 0;
+  }
+  50% {
+    margin-top: -20px;
+  }
+}
+
+.letter {
+  position: relative;
+  animation: rotate var(--duration) linear, jump var(--duration) linear;
+  atransform: rotate3d(0, 1, 0, 90deg);
+  width: 120px;
+  height: 110px;
+  transform-style: preserve-3d;
+}
+
+.letter div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  line-height: 110px;
+  color: var(--color);
+  
+}
+
+.letter span {
+  position: absolute;
+  left: 50%;
+  
+  transform: translate(-50%, -50%) rotateY(90deg);
+  display: block;
+ 
+  width: 12px;
+  background: var(--color);
+}
+
+.letter-2 span,
+.letter-1 span{
+  top: 53%;
+  height: 95%;
+}
+
+.letter-0 span {
+  top: 54.25%;
+  left: 40%;
+  height: 98%;
+}
+
+
+
+
+
+.letter div:nth-child(2) {
+  transform: translate3d(0, 0, 3px);
+}
+
+.letter div:nth-child(3) {
+  color: var(--shade);
+  transform: translate3d(0, 0, 6px);
+}
+
+.letter div:nth-child(4) {
+  transform: translate3d(0, 0, -3px);
+}
+
+.letter div:nth-child(5) {
+  color: var(--shade);
+  transform: translate3d(0, 0, -6px);
+}
+
+.letter-2 div::before {
+  content: "2";
+}
+
+.letter-0 div::before {
+  content: "0";
+}
+
+@keyframes changeYear {
+  0%, 25% { content: "1" }
+  25.5%, 100% { content: "2" } 
+}
+
+
+@keyframes updateFilling {
+  0%, 25% { 
+    top: 55%;
+    height: 95%;
+  }
+  25.5%, 100% { 
+    top: 53%;
+    height: 95%;
+  } 
+}
+
+.letter-1 div::before {
+  content: "1";
+  animation: changeYear var(--duration) calc(var(--duration) * 2.4) forwards;
+}
+
+.letter-1 span {
+  top: 55%;
+  height: 95%;
+  animation: updateFilling var(--duration) calc(var(--duration) * 2.4) forwards;
+}
+
+.letter:nth-child(1) { animation-delay: calc(var(--duration) * 0.6); }
+.letter:nth-child(2) { animation-delay: calc(var(--duration) * 1.2); }
+.letter:nth-child(3) { animation-delay: calc(var(--duration) * 1.8); }
+.letter:nth-child(4) { animation-delay: calc(var(--duration) * 2.4); }
\ No newline at end of file
diff --git a/2021-to-2022/license.txt b/2021-to-2022/license.txt
new file mode 100644
index 0000000..9e69b8a
--- /dev/null
+++ b/2021-to-2022/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Alvaro Montoro (https://codepen.io/alvaromontoro/pen/QWqmybN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/2021-to-2022/src/index.html b/2021-to-2022/src/index.html
new file mode 100644
index 0000000..5034a39
--- /dev/null
+++ b/2021-to-2022/src/index.html
@@ -0,0 +1,34 @@
+<div class="year">
+  <div class="letter letter-2">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <span></span>
+  </div>
+  <div class="letter letter-0">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <span></span>
+  </div>
+  <div class="letter letter-2">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <span></span>
+  </div>
+  <div class="letter letter-1">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <span></span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/2021-to-2022/src/style.css b/2021-to-2022/src/style.css
new file mode 100644
index 0000000..78d4f9c
--- /dev/null
+++ b/2021-to-2022/src/style.css
@@ -0,0 +1,145 @@
+@import url('https://fonts.googleapis.com/css2?family=Chango&display=swap');
+
+body {
+  margin: 0;
+  height: 100vh;
+  overflow: hidden;
+  perspective: 1000px;  
+  background: #3693;
+}
+
+.year {
+  --duration: 1.5s;
+  --color: #147;
+  --shade: #57b;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: Chango, Arial, sans-serif;
+  font-size: 150px;
+  transform-style: preserve-3d;
+}
+
+@keyframes rotate {
+  0% { 
+    transform: rotate3d(0, 1, 0, 0deg); 
+  }
+  100% { 
+    transform: rotate3d(0, 1, 0, -360deg); 
+  }
+}
+
+@keyframes jump {
+  0%, 75%, 100% {
+    margin-top: 0;
+  }
+  50% {
+    margin-top: -20px;
+  }
+}
+
+.letter {
+  position: relative;
+  animation: rotate var(--duration) linear, jump var(--duration) linear;
+  atransform: rotate3d(0, 1, 0, 90deg);
+  width: 120px;
+  height: 110px;
+  transform-style: preserve-3d;
+}
+
+.letter div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  line-height: 110px;
+  color: var(--color);
+  
+}
+
+.letter span {
+  position: absolute;
+  left: 50%;
+  
+  transform: translate(-50%, -50%) rotateY(90deg);
+  display: block;
+ 
+  width: 12px;
+  background: var(--color);
+}
+
+.letter-2 span,
+.letter-1 span{
+  top: 53%;
+  height: 95%;
+}
+
+.letter-0 span {
+  top: 54.25%;
+  left: 40%;
+  height: 98%;
+}
+
+
+
+
+
+.letter div:nth-child(2) {
+  transform: translate3d(0, 0, 3px);
+}
+
+.letter div:nth-child(3) {
+  color: var(--shade);
+  transform: translate3d(0, 0, 6px);
+}
+
+.letter div:nth-child(4) {
+  transform: translate3d(0, 0, -3px);
+}
+
+.letter div:nth-child(5) {
+  color: var(--shade);
+  transform: translate3d(0, 0, -6px);
+}
+
+.letter-2 div::before {
+  content: "2";
+}
+
+.letter-0 div::before {
+  content: "0";
+}
+
+@keyframes changeYear {
+  0%, 25% { content: "1" }
+  25.5%, 100% { content: "2" } 
+}
+
+
+@keyframes updateFilling {
+  0%, 25% { 
+    top: 55%;
+    height: 95%;
+  }
+  25.5%, 100% { 
+    top: 53%;
+    height: 95%;
+  } 
+}
+
+.letter-1 div::before {
+  content: "1";
+  animation: changeYear var(--duration) calc(var(--duration) * 2.4) forwards;
+}
+
+.letter-1 span {
+  top: 55%;
+  height: 95%;
+  animation: updateFilling var(--duration) calc(var(--duration) * 2.4) forwards;
+}
+
+.letter:nth-child(1) { animation-delay: calc(var(--duration) * 0.6); }
+.letter:nth-child(2) { animation-delay: calc(var(--duration) * 1.2); }
+.letter:nth-child(3) { animation-delay: calc(var(--duration) * 1.8); }
+.letter:nth-child(4) { animation-delay: calc(var(--duration) * 2.4); }
\ No newline at end of file
diff --git a/31-taint/README.markdown b/31-taint/README.markdown
new file mode 100644
index 0000000..1994745
--- /dev/null
+++ b/31-taint/README.markdown
@@ -0,0 +1,7 @@
+# 31. taint
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ycw/pen/BaQdJRd](https://codepen.io/ycw/pen/BaQdJRd).
+
+taint the wire gird.
+
+photo by [liu yi](https://unsplash.com/photos/zTJ0e2mbrrM)
diff --git a/31-taint/dist/index.html b/31-taint/dist/index.html
new file mode 100644
index 0000000..c04625c
--- /dev/null
+++ b/31-taint/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 31. taint</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/31-taint/dist/script.js b/31-taint/dist/script.js
new file mode 100644
index 0000000..4c6de36
--- /dev/null
+++ b/31-taint/dist/script.js
@@ -0,0 +1,134 @@
+import * as $ from '//cdn.skypack.dev/three@0.125.0/build/three.module.js?min'
+import { OrbitControls } from '//cdn.skypack.dev/three@0.125.0/examples/jsm/controls/OrbitControls.js?min'
+import { EffectComposer } from '//cdn.skypack.dev/three@0.125.0/examples/jsm/postprocessing/EffectComposer.js?min'
+import { RenderPass } from '//cdn.skypack.dev/three@0.125.0/examples/jsm/postprocessing/RenderPass.js?min'
+import { UnrealBloomPass } from '//cdn.skypack.dev/three@0.125.0/examples/jsm/postprocessing/UnrealBloomPass.js?min'
+
+//// Boot
+
+const renderer = new $.WebGLRenderer({});
+const scene = new $.Scene();
+const camera = new $.PerspectiveCamera(75, 2, 20, 12000);
+const controls = new OrbitControls(camera, renderer.domElement);
+window.addEventListener('resize', () => {
+    const { clientWidth, clientHeight } = renderer.domElement;
+    renderer.setSize(clientWidth, clientHeight, false);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    camera.aspect = clientWidth / clientHeight;
+    camera.updateProjectionMatrix();
+});
+document.body.prepend(renderer.domElement);
+window.dispatchEvent(new Event('resize'));
+
+//// Inputs
+
+const size = 5000;
+const segs = 500;
+const disp = 500;
+
+//// Setup
+
+camera.position.set(1000, 1200, 1200);
+controls.autoRotate = true;
+controls.enableDamping = true;
+controls.maxPolarAngle = Math.PI / 2.9;
+
+const light0 = new $.DirectionalLight('white', 1);
+light0.position.set(0, 1, 0);
+scene.add(light0);
+
+const tex0 = new $.TextureLoader().load('https://images.unsplash.com/photo-1613799122437-c48c0e4cd5c0?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3OXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60');
+
+const mesh0 = new $.Mesh(
+    new $.PlaneBufferGeometry(size, size, segs, segs).rotateX(-0.5 * Math.PI),
+    f()
+);
+scene.add(mesh0);
+const mesh1 = new $.Mesh(
+    new $.PlaneBufferGeometry(size, size, segs >> 1, segs >> 1).rotateX(-0.5 * Math.PI),
+    f({ wireframe: true, color: new $.Color('#333') })
+);
+scene.add(mesh1);
+
+//// Make Material
+
+function f({ wireframe, color } = {}) {
+    const mat = new $.ShaderMaterial({
+        extensions: {
+            derivatives: true, // wgl 1
+        },
+        lights: true,
+        wireframe: Boolean(wireframe),
+        uniforms: $.UniformsUtils.merge([
+            $.ShaderLib.standard.uniforms, {
+                time: { value: 0 },
+                displacementScale: { value: disp },
+                wireframe: { value: wireframe || false },
+                color: { value: color || new $.Color() },
+                roughness: { value: 1 },
+                metalness: { value: 0 }
+            }
+        ]),
+        vertexShader: `
+        varying vec3 vWorldPos;
+        ` + $.ShaderLib.standard.vertexShader.replace("#include <worldpos_vertex>", `
+        // #if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP )
+            vec4 worldPosition = vec4( transformed, 1.0 );
+            #ifdef USE_INSTANCING
+                worldPosition = instanceMatrix * worldPosition;
+            #endif
+            worldPosition = modelMatrix * worldPosition;
+            vWorldPos = worldPosition.xyz;
+        // #endif
+        `).replace("#include <displacementmap_vertex>", `
+        #ifdef USE_DISPLACEMENTMAP
+            transformed += normalize( objectNormal ) * ( texture2D( displacementMap, vUv ).x * displacementScale + displacementBias );
+            // form a bowl
+            float yOffset = length( position.xz ) / ${size.toFixed(1)};
+            yOffset = pow(sin(yOffset * 2.0), 2.0);
+            transformed.y += yOffset * ${size.toFixed(1)} / 3.0;
+        #endif
+        `),
+        fragmentShader: `
+        varying vec3 vWorldPos;
+        uniform float time;
+        uniform bool wireframe;
+        uniform vec3 color;
+        ` + $.ShaderLib.standard.fragmentShader.replace(
+            "gl_FragColor = vec4( outgoingLight, diffuseColor.a );", `
+            gl_FragColor = vec4( outgoingLight, diffuseColor.a );
+            float ths = ${size.toFixed(1)} * pow(sin(time * 0.00015), 2.0);
+            if ( !wireframe ) {
+                if ( length( vWorldPos ) > ths ) {
+                    discard;
+                } 
+            } else {
+                gl_FragColor = vec4( color, 1.0 );
+                if ( length( vWorldPos ) < ths ) {
+                    discard;
+                }
+            }
+        `)
+    });
+    mat.map = mat.uniforms.map.value = tex0;
+    mat.displacementMap = mat.uniforms.displacementMap.value = tex0;
+    return mat;
+}
+
+//// Render
+
+const res = new $.Vector2();
+window.addEventListener('resize', () => {
+    renderer.getDrawingBufferSize(res);
+    fx.setSize(res.width, res.height);
+});
+const fx = new EffectComposer(renderer);
+fx.addPass(new RenderPass(scene, camera));
+fx.addPass(new UnrealBloomPass(res, 0.5, 0.5, 0.3));
+
+renderer.setAnimationLoop((t) => {
+    fx.render();
+    mesh0.material.uniforms.time.value = t;
+    mesh1.material.uniforms.time.value = t;
+    controls.update();
+});
\ No newline at end of file
diff --git a/31-taint/dist/style.css b/31-taint/dist/style.css
new file mode 100644
index 0000000..363bc74
--- /dev/null
+++ b/31-taint/dist/style.css
@@ -0,0 +1,3 @@
+canvas {
+    display:block; width:100%; height:100vh; cursor: -webkit-grab; cursor: grab;
+}
\ No newline at end of file
diff --git a/31-taint/license.txt b/31-taint/license.txt
new file mode 100644
index 0000000..b043ca4
--- /dev/null
+++ b/31-taint/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by ycw (https://codepen.io/ycw/pen/BaQdJRd)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/31-taint/src/index.html b/31-taint/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/31-taint/src/script.js b/31-taint/src/script.js
new file mode 100644
index 0000000..f3f8465
--- /dev/null
+++ b/31-taint/src/script.js
@@ -0,0 +1,134 @@
+import * as $ from '//cdn.skypack.dev/three@0.125.0/build/three.module.js?min'
+import { OrbitControls } from '//cdn.skypack.dev/three@0.125.0/examples/jsm/controls/OrbitControls.js?min'
+import { EffectComposer } from '//cdn.skypack.dev/three@0.125.0/examples/jsm/postprocessing/EffectComposer.js?min'
+import { RenderPass } from '//cdn.skypack.dev/three@0.125.0/examples/jsm/postprocessing/RenderPass.js?min'
+import { UnrealBloomPass } from '//cdn.skypack.dev/three@0.125.0/examples/jsm/postprocessing/UnrealBloomPass.js?min'
+
+//// Boot
+
+const renderer = new $.WebGLRenderer({});
+const scene = new $.Scene();
+const camera = new $.PerspectiveCamera(75, 2, 20, 12000);
+const controls = new OrbitControls(camera, renderer.domElement);
+window.addEventListener('resize', () => {
+    const { clientWidth, clientHeight } = renderer.domElement;
+    renderer.setSize(clientWidth, clientHeight, false);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    camera.aspect = clientWidth / clientHeight;
+    camera.updateProjectionMatrix();
+});
+document.body.prepend(renderer.domElement);
+window.dispatchEvent(new Event('resize'));
+
+//// Inputs
+
+const size = 5000;
+const segs = 500;
+const disp = 500;
+
+//// Setup
+
+camera.position.set(1000, 1200, 1200);
+controls.autoRotate = true;
+controls.enableDamping = true;
+controls.maxPolarAngle = Math.PI / 2.9;
+
+const light0 = new $.DirectionalLight('white', 1);
+light0.position.set(0, 1, 0);
+scene.add(light0);
+
+const tex0 = new $.TextureLoader().load('https://images.unsplash.com/photo-1613799122437-c48c0e4cd5c0?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3OXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60');
+
+const mesh0 = new $.Mesh(
+    new $.PlaneBufferGeometry(size, size, segs, segs).rotateX(-0.5 * Math.PI),
+    f()
+);
+scene.add(mesh0);
+const mesh1 = new $.Mesh(
+    new $.PlaneBufferGeometry(size, size, segs >> 1, segs >> 1).rotateX(-0.5 * Math.PI),
+    f({ wireframe: true, color: new $.Color('#333') })
+);
+scene.add(mesh1);
+
+//// Make Material
+
+function f({ wireframe, color } = {}) {
+    const mat = new $.ShaderMaterial({
+        extensions: {
+            derivatives: true, // wgl 1
+        },
+        lights: true,
+        wireframe: Boolean(wireframe),
+        uniforms: $.UniformsUtils.merge([
+            $.ShaderLib.standard.uniforms, {
+                time: { value: 0 },
+                displacementScale: { value: disp },
+                wireframe: { value: wireframe || false },
+                color: { value: color || new $.Color() },
+                roughness: { value: 1 },
+                metalness: { value: 0 }
+            }
+        ]),
+        vertexShader: `
+        varying vec3 vWorldPos;
+        ` + $.ShaderLib.standard.vertexShader.replace("#include <worldpos_vertex>", `
+        // #if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP )
+            vec4 worldPosition = vec4( transformed, 1.0 );
+            #ifdef USE_INSTANCING
+                worldPosition = instanceMatrix * worldPosition;
+            #endif
+            worldPosition = modelMatrix * worldPosition;
+            vWorldPos = worldPosition.xyz;
+        // #endif
+        `).replace("#include <displacementmap_vertex>", `
+        #ifdef USE_DISPLACEMENTMAP
+            transformed += normalize( objectNormal ) * ( texture2D( displacementMap, vUv ).x * displacementScale + displacementBias );
+            // form a bowl
+            float yOffset = length( position.xz ) / ${size.toFixed(1)};
+            yOffset = pow(sin(yOffset * 2.0), 2.0);
+            transformed.y += yOffset * ${size.toFixed(1)} / 3.0;
+        #endif
+        `),
+        fragmentShader: `
+        varying vec3 vWorldPos;
+        uniform float time;
+        uniform bool wireframe;
+        uniform vec3 color;
+        ` + $.ShaderLib.standard.fragmentShader.replace(
+            "gl_FragColor = vec4( outgoingLight, diffuseColor.a );", `
+            gl_FragColor = vec4( outgoingLight, diffuseColor.a );
+            float ths = ${size.toFixed(1)} * pow(sin(time * 0.00015), 2.0);
+            if ( !wireframe ) {
+                if ( length( vWorldPos ) > ths ) {
+                    discard;
+                } 
+            } else {
+                gl_FragColor = vec4( color, 1.0 );
+                if ( length( vWorldPos ) < ths ) {
+                    discard;
+                }
+            }
+        `)
+    });
+    mat.map = mat.uniforms.map.value = tex0;
+    mat.displacementMap = mat.uniforms.displacementMap.value = tex0;
+    return mat;
+}
+
+//// Render
+
+const res = new $.Vector2();
+window.addEventListener('resize', () => {
+    renderer.getDrawingBufferSize(res);
+    fx.setSize(res.width, res.height);
+});
+const fx = new EffectComposer(renderer);
+fx.addPass(new RenderPass(scene, camera));
+fx.addPass(new UnrealBloomPass(res, 0.5, 0.5, 0.3));
+
+renderer.setAnimationLoop((t) => {
+    fx.render();
+    mesh0.material.uniforms.time.value = t;
+    mesh1.material.uniforms.time.value = t;
+    controls.update();
+});
diff --git a/31-taint/src/style.css b/31-taint/src/style.css
new file mode 100644
index 0000000..5be0ef5
--- /dev/null
+++ b/31-taint/src/style.css
@@ -0,0 +1,3 @@
+canvas {
+    display:block; width:100%; height:100vh; cursor: grab;
+}
\ No newline at end of file
diff --git a/3d-css-kinetic-type-poster/README.markdown b/3d-css-kinetic-type-poster/README.markdown
new file mode 100644
index 0000000..de4b052
--- /dev/null
+++ b/3d-css-kinetic-type-poster/README.markdown
@@ -0,0 +1,6 @@
+# 3D CSS  Kinetic Type Poster
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/petebarr/pen/OJPBEwy](https://codepen.io/petebarr/pen/OJPBEwy).
+
+ Kinetic typography poster. 3D CSS with GSAP 3.
+
+Firefox doesn't seem to like -webkit-text-fill-color: transparent; in this example. Perhaps related to the transform rotation animation.
\ No newline at end of file
diff --git a/3d-css-kinetic-type-poster/dist/index.html b/3d-css-kinetic-type-poster/dist/index.html
new file mode 100644
index 0000000..c82cc2d
--- /dev/null
+++ b/3d-css-kinetic-type-poster/dist/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 3D CSS  Kinetic Type Poster</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="wrapper">
+	<div class="stage">
+		<div class="poster">
+			<div class="wheel">
+				<h1 class="txt">Linear</h1>
+			</div>
+			<div class="content">
+				<h2 class="title"> Progress</h2>
+				<p class="desc">The Path Is Not Linear but Circular and Continuous</p>
+			</div>
+			<div class="poster__base2">
+			</div>
+			<div class="poster__base1">
+			</div>
+		</div>
+	</div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.0/gsap.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/3d-css-kinetic-type-poster/dist/script.js b/3d-css-kinetic-type-poster/dist/script.js
new file mode 100644
index 0000000..3de18c9
--- /dev/null
+++ b/3d-css-kinetic-type-poster/dist/script.js
@@ -0,0 +1,167 @@
+console.clear();
+
+gsap.registerPlugin(SplitText);
+
+select = e => document.querySelector(e);
+
+let fontSize = gsap.getProperty(':root', '--fontSize');
+let txt = select('.txt');
+let wheel = select('.wheel');
+let poster = select('.poster');
+let numLines = 20;
+let radius = (fontSize/(numLines/2))/Math.sin((180/numLines)*(Math.PI/180)); 
+let angle = 360/numLines;
+let origin = `0% 50% -${radius*2}px`;
+let master = gsap.timeline();
+
+
+function cloneTxt() {
+	for (i=0; i<numLines-1; i++) {
+		var clone = txt.cloneNode(true);
+		wheel.appendChild(clone);
+	}
+}
+
+function positionTxt() {
+	gsap.set(wheel, {
+		rotation: -90,
+		rotationX: 0,
+		rotationY: 0
+	});
+	gsap.set('.txt', {
+		rotationX: function(index) {
+			return angle*index;
+		},
+		z: radius*2,
+		transformOrigin: origin
+	});
+	gsap.set('.char', {
+		rotateX: -90,
+		transformOrigin: "50% 50%"
+	});
+}
+
+function animateIn() {
+	let tl = gsap.timeline({delay: 0});
+		tl.from('.char', {
+			scale: 0.01,
+			y: 440,
+			duration: 8,
+			rotation: 90,
+			ease: 'power4.inOut'
+		}, 0)
+		.from('.txt', {
+			rotationX: -180,
+			duration: 12,
+			ease: 'power4'
+		}, 0)
+		.from('.txt', {
+			x: 100,
+			duration: 8,
+			ease: 'power4',
+			stagger: 0.2
+		}, 0)
+		.from(wheel, {
+			rotationY: 180,
+			z: -2000,
+			ease: 'expo',
+			duration: 12
+		}, 0)
+		.from('.titleChar', {
+			y: 'random(-20 20)',
+			opacity: 0,
+			duration: 4,
+			stagger: {
+				each: 0.05,
+				from: "center"
+			},
+			ease: "expo",
+		}, 1)
+		.from('.desc', {
+			y: 30,
+			opacity: 0,
+			duration: 4,
+			ease: "power4"
+		}, 1.5)
+	
+	return tl;
+}
+
+function rotate() {
+	let tl = gsap.timeline();
+	tl.to(wheel, {
+		rotationX: 360,
+		transformOrigin: "50% 50%",
+		repeat: -1,
+		ease: 'none',
+		duration: 12
+	});
+	
+	return tl;
+}
+
+function resize() {
+	let vh = window.innerHeight;
+	let sh = poster.offsetHeight;
+	let scaleFactor = vh/sh;
+	if(scaleFactor<1) {
+		gsap.set(poster, { scale: scaleFactor });
+	}
+    else {
+        gsap.set(poster, { scale: 1 });
+    }
+}
+
+function init() {
+	let linearText = new SplitText(txt, {type:"chars", charsClass:"char", position: "relative" }); 
+	let titleText = new SplitText('.title', {type:"chars", charsClass:"titleChar", position: "relative" }); 
+	gsap.set(poster, { autoAlpha: 1 });
+	cloneTxt();
+	positionTxt();
+	master.add(animateIn())
+		  .add(rotate(), 0);
+	poster.onclick = () => {
+		master.restart();
+    }
+	resize();
+}
+
+function calcOffset(xPos, yPos) {
+	let winW = window.innerWidth;
+	let winH = window.innerHeight;
+	let dX = 2*(xPos - winW/2)/winW;
+	let dY = -2*(yPos - winH/2)/winH;
+	return [dX,dY];
+}
+
+function rotateTxt(xPos, yPos) {
+	let nPos = calcOffset(xPos, yPos); // get cursor position from center 1-0-1
+	let nX = nPos[0];
+	let nY = nPos[1];
+	let invertedRangeX = 1-Math.sqrt(nX*nX); // 0-1-0
+	let invertedRangeY = 1-Math.sqrt(nY*nY); // 0-1-0
+	gsap.to('.stage', {
+		rotationX: nPos[1]*5,
+		rotationY: nX*5,
+		// rotation: nX*40,
+		duration: 1,
+		ease: 'sine'
+	});
+}
+
+var pointer = { 
+	x: window.innerWidth  / 2, 
+	y: window.innerHeight / 2 
+};
+
+window.addEventListener("mousemove", function(event) {
+	pointer.x = event.clientX;
+	pointer.y = event.clientY;
+	rotateTxt(pointer.x, pointer.y);
+});
+
+window.onresize = resize;
+
+window.onload = () => {
+	init();
+};
\ No newline at end of file
diff --git a/3d-css-kinetic-type-poster/dist/style.css b/3d-css-kinetic-type-poster/dist/style.css
new file mode 100644
index 0000000..7c8904b
--- /dev/null
+++ b/3d-css-kinetic-type-poster/dist/style.css
@@ -0,0 +1,187 @@
+@import url("https://rsms.me/inter/inter.css");
+html {
+  font-family: 'Inter', sans-serif;
+}
+
+@supports (font-variation-settings: normal) {
+  html {
+    font-family: 'Inter var', sans-serif;
+    font-style: normal;
+    font-weight: 100 900;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+:root {
+  --fontSize: 120px;
+  --borderW: 20px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body,
+html {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #C4CACE;
+  color: white;
+  overflow: hidden;
+}
+body ::-moz-selection {
+  background: transparent;
+}
+body ::selection {
+  background: transparent;
+}
+
+.wrapper {
+  height: 100%;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-perspective: 1400px;
+          perspective: 1400px;
+}
+
+.stage {
+  padding: 20px;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+}
+
+.poster {
+  position: relative;
+  height: calc(var(--fontSize)*8);
+  width: calc(var(--fontSize)*6);
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  visibility: hidden;
+  opacity: 0;
+  background: white;
+  overflow: hidden;
+  -webkit-perspective: 700px;
+          perspective: 700px;
+  cursor: pointer;
+  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3), 0 40px 50px -20px rgba(0, 0, 0, 0.3), 0 70px 60px -30px rgba(0, 0, 0, 0.1), 0 40px 70px -5px rgba(0, 0, 0, 0.1);
+}
+
+.poster__base1 {
+  position: absolute;
+  z-index: 2;
+  top: var(--borderW);
+  left: var(--borderW);
+  width: calc(100% - calc(2*var(--borderW)));
+  height: calc(100% - calc(2*var(--borderW)));
+  background: black;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+}
+
+.poster__base2 {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: white;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+}
+
+.wheel {
+  position: relative;
+  z-index: 3;
+  top: calc(-1 * var(--fontSize)/2.5);
+  width: 100%;
+  height: 100%;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+}
+
+.txt {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  margin: 0;
+  font-size: var(--fontSize);
+  font-weight: 900;
+  font-stretch: 50%;
+  text-transform: uppercase;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  line-height: 1;
+  white-space: nowrap;
+  letter-spacing: -5px;
+}
+
+.char {
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  /* standard gradient background */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, white), color-stop(80%, black));
+  background: linear-gradient(white 20%, black 80%);
+  /* clip hackery */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.content {
+  position: absolute;
+  z-index: 3;
+  bottom: 0;
+  width: 100%;
+  height: 150px;
+  padding: var(--borderW);
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+}
+
+.title {
+  margin: 0;
+  text-transform: uppercase;
+  text-align: center;
+  font-weight: 900;
+  font-size: 24px;
+  letter-spacing: 20px;
+  padding-left: 10px;
+}
+
+.desc {
+  text-transform: uppercase;
+  text-align: center;
+  font-weight: 600;
+  font-size: 11px;
+  letter-spacing: 1px;
+  color: #0090FF;
+  margin-top: 24px;
+  padding-right: 10px;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+}
\ No newline at end of file
diff --git a/3d-css-kinetic-type-poster/license.txt b/3d-css-kinetic-type-poster/license.txt
new file mode 100644
index 0000000..ad6cff4
--- /dev/null
+++ b/3d-css-kinetic-type-poster/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Pete Barr (https://codepen.io/petebarr/pen/OJPBEwy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/3d-css-kinetic-type-poster/src/index.html b/3d-css-kinetic-type-poster/src/index.html
new file mode 100644
index 0000000..a7ac214
--- /dev/null
+++ b/3d-css-kinetic-type-poster/src/index.html
@@ -0,0 +1,18 @@
+<div class="wrapper">
+	<div class="stage">
+		<div class="poster">
+			<div class="wheel">
+				<h1 class="txt">Linear</h1>
+			</div>
+			<div class="content">
+				<h2 class="title"> Progress</h2>
+				<p class="desc">The Path Is Not Linear but Circular and Continuous</p>
+			</div>
+			<div class="poster__base2">
+			</div>
+			<div class="poster__base1">
+			</div>
+		</div>
+	</div>
+</div>
+
diff --git a/3d-css-kinetic-type-poster/src/script.js b/3d-css-kinetic-type-poster/src/script.js
new file mode 100644
index 0000000..1eff8b1
--- /dev/null
+++ b/3d-css-kinetic-type-poster/src/script.js
@@ -0,0 +1,167 @@
+console.clear();
+
+gsap.registerPlugin(SplitText);
+
+select = e => document.querySelector(e);
+
+let fontSize = gsap.getProperty(':root', '--fontSize');
+let txt = select('.txt');
+let wheel = select('.wheel');
+let poster = select('.poster');
+let numLines = 20;
+let radius = (fontSize/(numLines/2))/Math.sin((180/numLines)*(Math.PI/180)); 
+let angle = 360/numLines;
+let origin = `0% 50% -${radius*2}px`;
+let master = gsap.timeline();
+
+
+function cloneTxt() {
+	for (i=0; i<numLines-1; i++) {
+		var clone = txt.cloneNode(true);
+		wheel.appendChild(clone);
+	}
+}
+
+function positionTxt() {
+	gsap.set(wheel, {
+		rotation: -90,
+		rotationX: 0,
+		rotationY: 0
+	});
+	gsap.set('.txt', {
+		rotationX: function(index) {
+			return angle*index;
+		},
+		z: radius*2,
+		transformOrigin: origin
+	});
+	gsap.set('.char', {
+		rotateX: -90,
+		transformOrigin: "50% 50%"
+	});
+}
+
+function animateIn() {
+	let tl = gsap.timeline({delay: 0});
+		tl.from('.char', {
+			scale: 0.01,
+			y: 440,
+			duration: 8,
+			rotation: 90,
+			ease: 'power4.inOut'
+		}, 0)
+		.from('.txt', {
+			rotationX: -180,
+			duration: 12,
+			ease: 'power4'
+		}, 0)
+		.from('.txt', {
+			x: 100,
+			duration: 8,
+			ease: 'power4',
+			stagger: 0.2
+		}, 0)
+		.from(wheel, {
+			rotationY: 180,
+			z: -2000,
+			ease: 'expo',
+			duration: 12
+		}, 0)
+		.from('.titleChar', {
+			y: 'random(-20 20)',
+			opacity: 0,
+			duration: 4,
+			stagger: {
+				each: 0.05,
+				from: "center"
+			},
+			ease: "expo",
+		}, 1)
+		.from('.desc', {
+			y: 30,
+			opacity: 0,
+			duration: 4,
+			ease: "power4"
+		}, 1.5)
+	
+	return tl;
+}
+
+function rotate() {
+	let tl = gsap.timeline();
+	tl.to(wheel, {
+		rotationX: 360,
+		transformOrigin: "50% 50%",
+		repeat: -1,
+		ease: 'none',
+		duration: 12
+	});
+	
+	return tl;
+}
+
+function resize() {
+	let vh = window.innerHeight;
+	let sh = poster.offsetHeight;
+	let scaleFactor = vh/sh;
+	if(scaleFactor<1) {
+		gsap.set(poster, { scale: scaleFactor });
+	}
+    else {
+        gsap.set(poster, { scale: 1 });
+    }
+}
+
+function init() {
+	let linearText = new SplitText(txt, {type:"chars", charsClass:"char", position: "relative" }); 
+	let titleText = new SplitText('.title', {type:"chars", charsClass:"titleChar", position: "relative" }); 
+	gsap.set(poster, { autoAlpha: 1 });
+	cloneTxt();
+	positionTxt();
+	master.add(animateIn())
+		  .add(rotate(), 0);
+	poster.onclick = () => {
+		master.restart();
+    }
+	resize();
+}
+
+function calcOffset(xPos, yPos) {
+	let winW = window.innerWidth;
+	let winH = window.innerHeight;
+	let dX = 2*(xPos - winW/2)/winW;
+	let dY = -2*(yPos - winH/2)/winH;
+	return [dX,dY];
+}
+
+function rotateTxt(xPos, yPos) {
+	let nPos = calcOffset(xPos, yPos); // get cursor position from center 1-0-1
+	let nX = nPos[0];
+	let nY = nPos[1];
+	let invertedRangeX = 1-Math.sqrt(nX*nX); // 0-1-0
+	let invertedRangeY = 1-Math.sqrt(nY*nY); // 0-1-0
+	gsap.to('.stage', {
+		rotationX: nPos[1]*5,
+		rotationY: nX*5,
+		// rotation: nX*40,
+		duration: 1,
+		ease: 'sine'
+	});
+}
+
+var pointer = { 
+	x: window.innerWidth  / 2, 
+	y: window.innerHeight / 2 
+};
+
+window.addEventListener("mousemove", function(event) {
+	pointer.x = event.clientX;
+	pointer.y = event.clientY;
+	rotateTxt(pointer.x, pointer.y);
+});
+
+window.onresize = resize;
+
+window.onload = () => {
+	init();
+};
diff --git a/3d-css-kinetic-type-poster/src/style.scss b/3d-css-kinetic-type-poster/src/style.scss
new file mode 100644
index 0000000..4b8d0a9
--- /dev/null
+++ b/3d-css-kinetic-type-poster/src/style.scss
@@ -0,0 +1,168 @@
+@import url('https://rsms.me/inter/inter.css');
+
+html { 
+	font-family: 'Inter', sans-serif;
+}
+@supports (font-variation-settings: normal) {
+	html { 
+		font-family: 'Inter var', sans-serif; 
+		font-style: normal;
+		font-weight: 100 900;
+		-webkit-font-smoothing: antialiased;
+    	-moz-osx-font-smoothing: grayscale;
+	}
+}
+
+:root {
+	--fontSize: 120px;
+	--borderW: 20px;
+}
+
+html {
+	box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+body,
+html {
+	height: 100%;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	background: #C4CACE;
+	color: white;
+	overflow: hidden;
+	::selection {
+		background: transparent;
+	}
+}
+
+.wrapper {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	perspective: 1400px;
+}
+
+.stage {
+	padding: 20px;
+	transform-style: preserve-3d;
+}
+
+.poster {
+	position: relative;
+	height: calc(var(--fontSize)*8);
+	width: calc(var(--fontSize)*6);
+	transform-style: preserve-3d;
+	visibility: hidden;
+	opacity: 0;
+	background: white;
+	overflow: hidden;
+	perspective: 700px;
+	cursor: pointer;
+	box-shadow: 
+		0 20px 40px -15px rgba(0,0,0,0.3),
+		0 40px 50px -20px rgba(0,0,0,0.3),
+		0 70px 60px -30px rgba(0,0,0,0.1),
+		0 40px 70px -5px rgba(0,0,0,0.1);
+}
+
+.poster__base1 {
+	position: absolute;
+	z-index: 2;
+	top: var(--borderW);
+	left: var(--borderW);
+	width: calc(100% - calc(2*var(--borderW)));
+	height: calc(100% - calc(2*var(--borderW)));
+	background: black;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.poster__base2 {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.wheel {
+	position: relative;
+	z-index: 3;
+	top: calc(-1 * var(--fontSize)/2.5);
+	width: 100%;
+	height: 100%;
+	transform-style: preserve-3d;
+}
+
+.txt {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	margin: 0;
+	font-size: var(--fontSize);
+	font-weight: 900;
+	font-stretch: 50%;
+	text-transform: uppercase;
+	transform-style: preserve-3d;
+	line-height: 1;
+	white-space: nowrap;
+	letter-spacing: -5px;
+}
+
+.char {
+	transform-style: preserve-3d;
+	/* standard gradient background */
+	background: linear-gradient(white 20%, black 80%);
+	/* clip hackery */
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+
+.content {
+	position: absolute;
+	z-index: 3;
+	bottom: 0;
+	width: 100%;
+	height: 150px;
+	padding: var(--borderW);
+	transform-style: preserve-3d;
+}
+
+.title {
+	margin: 0;
+	text-transform: uppercase;
+	text-align: center;
+	font-weight: 900;
+	font-size: 24px;
+	letter-spacing: 20px;
+	padding-left: 10px;
+}
+
+.desc {
+	text-transform: uppercase;
+	text-align: center;
+	font-weight: 600;
+	font-size: 11px;
+	letter-spacing: 1px;
+	color: #0090FF;
+	margin-top: 24px;
+	padding-right: 10px;
+	transform-style: preserve-3d;
+}
\ No newline at end of file
diff --git a/3d-css-plane-tap-to-toggle-mouse-move-parallax/README.markdown b/3d-css-plane-tap-to-toggle-mouse-move-parallax/README.markdown
new file mode 100644
index 0000000..c06bbfd
--- /dev/null
+++ b/3d-css-plane-tap-to-toggle-mouse-move-parallax/README.markdown
@@ -0,0 +1,5 @@
+# 3D CSS Plane 😎 (Tap to Toggle + Mouse Move Parallax)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jh3y/pen/NWdNMBJ](https://codepen.io/jh3y/pen/NWdNMBJ).
+
+
diff --git a/3d-css-plane-tap-to-toggle-mouse-move-parallax/dist/index.html b/3d-css-plane-tap-to-toggle-mouse-move-parallax/dist/index.html
new file mode 100644
index 0000000..1cde9f9
--- /dev/null
+++ b/3d-css-plane-tap-to-toggle-mouse-move-parallax/dist/index.html
@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 3D CSS Plane 😎 (Tap to Toggle + Mouse Move Parallax)</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input id="dark" type="checkbox"/>
+<div class="scene">
+  <div class="cloud cloud--one">
+    <div class="cloud__shift">
+      <div class="cloud__body">
+        <div>
+          <div class="cuboid cuboid--cloud">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+        <div>
+          <div class="cuboid cuboid--cloud">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+        <div>
+          <div class="cuboid cuboid--cloud">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="cloud cloud--two">
+    <div class="cloud__shift">
+      <div class="cloud__body">
+        <div>
+          <div class="cuboid cuboid--cloud">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+        <div>
+          <div class="cuboid cuboid--cloud">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+        <div>
+          <div class="cuboid cuboid--cloud">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="cloud cloud--three">
+    <div class="cloud__shift">
+      <div class="cloud__body">
+        <div>
+          <div class="cuboid cuboid--cloud">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+        <div>
+          <div class="cuboid cuboid--cloud">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+        <div>
+          <div class="cuboid cuboid--cloud">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="plane__floater">
+    <div class="plane__looper">
+      <div class="plane">
+        <div class="plane__wheels">
+          <div class="plane__axle">
+            <div class="cuboid cuboid--axle">
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+            </div>
+          </div>
+          <div class="plane__wheel plane__wheel--left">
+            <div class="cuboid cuboid--wheel-left">
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+            </div>
+          </div>
+          <div class="plane__wheel plane__wheel--right">
+            <div class="cuboid cuboid--wheel-right">
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+            </div>
+          </div>
+        </div>
+        <div class="plane__body">
+          <div class="cuboid cuboid--body">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+        <div class="plane__nose">
+          <div class="cuboid cuboid--nose">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+        <div class="plane__propellor">
+          <div class="propellor"></div>
+        </div>
+        <div class="plane__screen">
+          <div class="cuboid cuboid--screen">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+        <div class="plane__wings wings">
+          <div class="wings__top">
+            <div class="cuboid cuboid--wings-top">
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+            </div>
+          </div>
+          <div class="wings__ghost">
+            <div class="cuboid cuboid--wings-ghost">
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+            </div>
+          </div>
+          <div class="wings__bottom">
+            <div class="cuboid cuboid--wings-bottom">
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+            </div>
+          </div>
+          <div class="wings__strobe wings__strobe--left">
+            <div class="cuboid cuboid--strobe">
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+            </div>
+          </div>
+          <div class="wings__strobe wings__strobe--right">
+            <div class="cuboid cuboid--strobe">
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+              <div class="cuboid__side"></div>
+            </div>
+          </div>
+        </div>
+        <div class="plane__tail">
+          <div class="cuboid cuboid--tail">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+        <div class="plane__stabilizer plane__stabilizer--horizontal">
+          <div class="cuboid cuboid--horizontal-stabilizer">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+        <div class="plane__stabilizer plane__stabilizer--vertical">
+          <div class="cuboid cuboid--vertical-stabilizer">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+        <div class="plane__beacon">
+          <div class="cuboid cuboid--beacon">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<label for="dark"></label>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/3d-css-plane-tap-to-toggle-mouse-move-parallax/dist/script.js b/3d-css-plane-tap-to-toggle-mouse-move-parallax/dist/script.js
new file mode 100644
index 0000000..6f02343
--- /dev/null
+++ b/3d-css-plane-tap-to-toggle-mouse-move-parallax/dist/script.js
@@ -0,0 +1,16 @@
+import gsap from 'https://cdn.skypack.dev/gsap';
+
+const BOUNDS = 50;
+document.addEventListener('pointermove', ({ x, y }) => {
+  const newX = gsap.utils.mapRange(0, window.innerWidth, -BOUNDS, BOUNDS, x);
+  const newY = gsap.utils.mapRange(0, window.innerHeight, BOUNDS, -BOUNDS, y);
+  gsap.set(document.documentElement, {
+    '--rotate-x': newY,
+    '--rotate-y': newX });
+
+});
+
+const CHECKER = document.querySelector('[type="checkbox"]');
+
+CHECKER.addEventListener('input', (e) =>
+document.documentElement.style.setProperty('--dark', CHECKER.checked ? 1 : 0));
\ No newline at end of file
diff --git a/3d-css-plane-tap-to-toggle-mouse-move-parallax/dist/style.css b/3d-css-plane-tap-to-toggle-mouse-move-parallax/dist/style.css
new file mode 100644
index 0000000..5423152
--- /dev/null
+++ b/3d-css-plane-tap-to-toggle-mouse-move-parallax/dist/style.css
@@ -0,0 +1,777 @@
+.cuboid {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.cuboid__side:nth-of-type(1) {
+  height: calc(var(--thickness) * 1vmin);
+  width: 100%;
+  position: absolute;
+  top: 0;
+  transform: translate(0, -50%) rotateX(90deg);
+}
+.cuboid__side:nth-of-type(2) {
+  height: 100%;
+  width: calc(var(--thickness) * 1vmin);
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(50%, -50%) rotateY(90deg);
+}
+.cuboid__side:nth-of-type(3) {
+  width: 100%;
+  height: calc(var(--thickness) * 1vmin);
+  position: absolute;
+  bottom: 0;
+  transform: translate(0%, 50%) rotateX(90deg);
+}
+.cuboid__side:nth-of-type(4) {
+  height: 100%;
+  width: calc(var(--thickness) * 1vmin);
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translate(-50%, -50%) rotateY(90deg);
+}
+.cuboid__side:nth-of-type(5) {
+  height: 100%;
+  width: 100%;
+  transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.cuboid__side:nth-of-type(6) {
+  height: 100%;
+  width: 100%;
+  transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+  transform-style: preserve-3d;
+  transition: background 0.25s;
+}
+body {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  background: var(--bg);
+  overflow: hidden;
+}
+:root {
+  --dark: 0;
+  --base-size: 20;
+  --plane-height: calc(var(--base-size) * 1vmin);
+  --plane-width: calc(var(--plane-height) * 1.6);
+  --white-one: hsl(0, 0%, calc((90 - (var(--dark) * 30)) * 1%));
+  --white-two: hsl(0, 0%, calc((85 - (var(--dark) * 30)) * 1%));
+  --white-three: hsl(0, 0%, calc((80 - (var(--dark) * 30)) * 1%));
+  --white-four: hsl(0, 0%, calc((75 - (var(--dark) * 30)) * 1%));
+  --white-five: hsl(0, 0%, calc((70 - (var(--dark) * 30)) * 1%));
+  --accent-hue: 10;
+  --accent-one: hsl(var(--accent-hue), 80%, calc((60 - (var(--dark) * 20)) * 1%));
+  --accent-two: hsl(var(--accent-hue), 80%, calc((55 - (var(--dark) * 20)) * 1%));
+  --accent-three: hsl(var(--accent-hue), 80%, calc((50 - (var(--dark) * 20)) * 1%));
+  --accent-four: hsl(var(--accent-hue), 80%, calc((45 - (var(--dark) * 20)) * 1%));
+  --accent-five: hsl(var(--accent-hue), 80%, calc((40 - (var(--dark) * 20)) * 1%));
+  --screen: hsla(210, 80%, calc((70 - (var(--dark) * 20)) * 1%), 0.25);
+  --metal-one: hsl(0, 0%, calc((60 - (var(--dark) * 20)) * 1%));
+  --metal-two: hsl(0, 0%, calc((50 - (var(--dark) * 20)) * 1%));
+  --metal-three: hsl(0, 0%, calc((40 - (var(--dark) * 20)) * 1%));
+  --wheel-one: #1a1a1a;
+  --wheel-two: #0d0d0d;
+  --wheel-three: #000;
+  --wheel-hub: hsl(0, 0%, calc((98 - (var(--dark) * 20)) * 1%));
+  --bg: hsl(210, 80%, calc((90 - (var(--dark) * 76)) * 1%));
+  --night: #082949;
+  --cloud-one: hsl(0, 0%, calc((98 - (var(--dark) * 35)) * 1%));
+  --cloud-two: hsl(0, 0%, calc((94 - (var(--dark) * 35)) * 1%));
+  --cloud-three: hsl(0, 0%, calc((90 - (var(--dark) * 35)) * 1%));
+  --cloud-four: hsl(0, 0%, calc((86 - (var(--dark) * 35)) * 1%));
+  --cloud-five: hsl(0, 0%, calc((82 - (var(--dark) * 35)) * 1%));
+  --cloud-six: hsl(0, 0%, calc((78 - (var(--dark) * 35)) * 1%));
+}
+.scene {
+  transform: translate(-50%, -50%);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(44deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg));
+}
+[type="checkbox"] {
+  position: fixed;
+  left: 100%;
+  opacity: 0;
+  visibility: hidden;
+}
+label {
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform: translate3d(0, 0, 1000vmin);
+}
+.plane {
+  height: var(--plane-height);
+  width: var(--plane-width);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-animation: roll 10s infinite ease-out alternate;
+          animation: roll 10s infinite ease-out alternate;
+}
+.plane__floater {
+  position: absolute;
+  width: var(--plane-width);
+  height: var(--plane-width);
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  -webkit-animation: float 2s infinite ease-in-out;
+          animation: float 2s infinite ease-in-out;
+}
+.plane__looper {
+  position: absolute;
+  width: var(--plane-width);
+  height: var(--plane-width);
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  transform-origin: 50% 0;
+  -webkit-animation: loop 10s infinite ease-in-out;
+          animation: loop 10s infinite ease-in-out;
+}
+.plane * {
+  position: absolute;
+}
+.plane__body {
+  height: 40%;
+  width: 36%;
+  bottom: 20%;
+  left: 10%;
+}
+.plane__wheels {
+  bottom: 0;
+  width: calc(var(--plane-height) * 0.2);
+  left: 32%;
+  transform: translate(-50%, 0);
+  height: 20%;
+}
+.plane__axle {
+  height: 50%;
+  width: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.plane__wheel {
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+.plane__wings {
+  height: 70%;
+  width: 40%;
+  bottom: 19%;
+  left: 12%;
+}
+.plane__tail {
+  height: 40%;
+  width: 54%;
+  bottom: 20%;
+  left: 46%;
+}
+.plane__nose {
+  height: 30%;
+  width: 10%;
+  bottom: 25%;
+}
+.plane__stabilizer--horizontal {
+  height: 9%;
+  width: 16%;
+  right: 1%;
+  bottom: 50%;
+}
+.plane__screen {
+  bottom: 60%;
+  left: 30%;
+  width: 6%;
+  height: 14%;
+}
+.plane__propellor {
+  height: calc(var(--base-size) * 0.75vmin);
+  width: calc(var(--base-size) * 0.75vmin);
+  left: -1%;
+  bottom: 40%;
+  transform: translate(-50%, 50%) rotateY(-90deg);
+}
+.plane__propellor:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 2px);
+  height: 16%;
+  width: 16%;
+  border-radius: 50%;
+  background: var(--white-one);
+}
+.plane__stabilizer--vertical {
+  height: 20%;
+  width: 20%;
+  right: 0;
+  bottom: 60%;
+}
+.plane__beacon {
+  right: 1%;
+  bottom: 80%;
+  height: 2%;
+  width: 2%;
+}
+.plane__wheel--left {
+  transform: translate3d(0, 0, calc(var(--base-size) * 0.3vmin));
+}
+.plane__wheel--right {
+  transform: translate3d(0, 0, calc(var(--base-size) * -0.3vmin));
+}
+.propellor {
+  height: 100%;
+  width: 100%;
+  -webkit-animation: spin 0.35s infinite linear;
+          animation: spin 0.35s infinite linear;
+}
+.propellor:after,
+.propellor:before {
+  content: '';
+  height: 100%;
+  width: 10%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: linear-gradient(transparent 0 5%, var(--accent-two) 5% 15%, transparent 15% 85%, var(--accent-two) 85% 95%, transparent 95%), #000;
+  transform: translate(-50%, -50%) rotate(calc(var(--r, 45) * 1deg));
+}
+.propellor:after {
+  --r: -45;
+}
+.wings__ghost {
+  height: 80%;
+  width: 80%;
+  left: 50%;
+  bottom: 10%;
+  transform: translate(-50%, 0);
+}
+.wings__top {
+  top: 0;
+  height: 10%;
+  width: 100%;
+  left: 0;
+}
+.wings__bottom {
+  bottom: 0;
+  height: 10%;
+  width: 100%;
+  left: 0;
+}
+.wings__strobe {
+  bottom: 10%;
+  height: 4%;
+  width: 4%;
+  left: 50%;
+}
+.wings__strobe--left {
+  transform: translate3d(-50%, 0, calc(var(--base-size) * 1vmin));
+}
+.wings__strobe--right {
+  transform: translate3d(-50%, 0, calc(var(--base-size) * -1vmin));
+}
+.cloud {
+  height: 10vmin;
+  width: 15vmin;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.cloud__shift {
+  height: 100%;
+  width: 100%;
+  -webkit-animation: pan calc(var(--speed, 5) * 1s) calc(var(--delay, 5) * -1s) infinite ease-in-out both;
+          animation: pan calc(var(--speed, 5) * 1s) calc(var(--delay, 5) * -1s) infinite ease-in-out both;
+}
+.cloud__body {
+  height: 100%;
+  width: 100%;
+  -webkit-animation: scale calc(var(--speed, 5) * 1s) calc(var(--delay, 5) * -1s) infinite linear;
+          animation: scale calc(var(--speed, 5) * 1s) calc(var(--delay, 5) * -1s) infinite linear;
+}
+.cloud__body > div {
+  position: absolute;
+}
+.cloud__body > div:nth-of-type(1) {
+  bottom: 0;
+  left: 25%;
+  width: 60%;
+  height: 90%;
+  --thickness: calc(var(--base-size) * 0.2);
+}
+.cloud__body > div:nth-of-type(2) {
+  bottom: 0;
+  left: 0;
+  width: 50%;
+  height: 60%;
+  --thickness: calc(var(--base-size) * 0.3);
+}
+.cloud__body > div:nth-of-type(3) {
+  bottom: 0;
+  right: 0%;
+  width: 60%;
+  height: 40%;
+  --thickness: calc(var(--base-size) * 0.4);
+}
+.cloud--one {
+  --speed: 2;
+  --delay: 3;
+  transform: translate(-50%, -50%) translate3d(-40vmin, 20vmin, 26vmin);
+}
+.cloud--two {
+  --speed: 4;
+  --delay: 1;
+  transform: translate(-50%, -50%) translate3d(30vmin, -15vmin, -34vmin);
+}
+.cloud--three {
+  --speed: 6;
+  --delay: 2;
+  transform: translate(-50%, -50%) translate3d(50vmin, 35vmin, -14vmin);
+}
+.cuboid--body {
+  --thickness: calc(var(--base-size) * 0.4);
+}
+.cuboid--body div {
+  background: var(--white-two);
+}
+.cuboid--body div:nth-of-type(1) {
+  background: var(--white-one);
+}
+.cuboid--body div:nth-of-type(2) {
+  background: var(--white-two);
+}
+.cuboid--body div:nth-of-type(3) {
+  background: var(--white-three);
+}
+.cuboid--body div:nth-of-type(4) {
+  background: var(--white-four);
+}
+.cuboid--body div:nth-of-type(5):after,
+.cuboid--body div:nth-of-type(6):after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: calc(var(--base-size) * 0.25vmin);
+  width: calc(var(--base-size) * 0.25vmin);
+  background-image: url("https://assets.codepen.io/605876/avatar.png");
+  background-size: cover;
+  filter: saturate(0.65);
+  transform: translate3d(-50%, -50%, 1px);
+}
+.cuboid--screen {
+  --thickness: calc(var(--base-size) * 0.26);
+}
+.cuboid--screen div {
+  background: var(--screen);
+}
+.cuboid--tail {
+  --thickness: calc(var(--base-size) * 0.3);
+}
+.cuboid--tail div {
+  background: var(--white-two);
+}
+.cuboid--tail div:nth-of-type(1) {
+  background: var(--white-one);
+}
+.cuboid--tail div:nth-of-type(1):after {
+  content: '';
+  position: absolute;
+  height: 74%;
+  width: 50%;
+  background: var(--metal-three);
+  top: 50%;
+  right: 50%;
+  transform: translate3d(-50%, -50%, 1px);
+}
+.cuboid--tail div:nth-of-type(2) {
+  background: linear-gradient(var(--white-two) 0 30%, transparent 30%);
+}
+.cuboid--tail div:nth-of-type(3) {
+  background: linear-gradient(90deg, var(--white-two) 0 20%, transparent 20%);
+}
+.cuboid--tail div:nth-of-type(3):after {
+  content: '';
+  position: absolute;
+  background: var(--white-four);
+  top: 0%;
+  left: 20%;
+  height: 100%;
+  width: 87%;
+  transform-origin: 0 50%;
+  transform: rotateY(-22deg);
+}
+.cuboid--tail div:nth-of-type(5) {
+  background: transparent;
+  overflow: hidden;
+}
+.cuboid--tail div:nth-of-type(5):after {
+  content: '';
+  position: absolute;
+  bottom: 70%;
+  height: 100%;
+  width: 100%;
+  background: var(--white-two);
+  transform-origin: 100% 100%;
+  transform: rotate(-22deg) scale(2) translate(10%, 0);
+}
+.cuboid--tail div:nth-of-type(6) {
+  background: transparent;
+  overflow: hidden;
+}
+.cuboid--tail div:nth-of-type(6):after {
+  content: '';
+  position: absolute;
+  bottom: 70%;
+  height: 100%;
+  width: 100%;
+  background: var(--white-two);
+  transform-origin: 0% 100%;
+  transform: rotate(22deg) scale(2) translate(-10%, 0);
+}
+.cuboid--nose {
+  --thickness: calc(var(--base-size) * 0.3);
+}
+.cuboid--nose div {
+  background: var(--metal-three);
+}
+.cuboid--nose div:nth-of-type(1) {
+  background: var(--metal-one);
+}
+.cuboid--nose div:nth-of-type(2) {
+  background: var(--metal-two);
+}
+.cuboid--nose div:nth-of-type(3) {
+  background: var(--metal-one);
+}
+.cuboid--wings-ghost,
+.cuboid--wings-top,
+.cuboid--wings-bottom {
+  --thickness: calc(var(--base-size) * 2.2);
+}
+.cuboid--wings-ghost div,
+.cuboid--wings-top div,
+.cuboid--wings-bottom div {
+  background: var(--accent-one);
+}
+.cuboid--wings-ghost div:nth-of-type(1),
+.cuboid--wings-top div:nth-of-type(1),
+.cuboid--wings-bottom div:nth-of-type(1) {
+  background: var(--accent-two);
+}
+.cuboid--wings-ghost div:nth-of-type(2),
+.cuboid--wings-top div:nth-of-type(2),
+.cuboid--wings-bottom div:nth-of-type(2),
+.cuboid--wings-ghost div:nth-of-type(5),
+.cuboid--wings-top div:nth-of-type(5),
+.cuboid--wings-bottom div:nth-of-type(5) {
+  background: var(--accent-three);
+}
+.cuboid--wings-ghost div:nth-of-type(4),
+.cuboid--wings-top div:nth-of-type(4),
+.cuboid--wings-bottom div:nth-of-type(4) {
+  background: var(--accent-four);
+}
+.cuboid--wings-ghost div:nth-of-type(3),
+.cuboid--wings-top div:nth-of-type(3),
+.cuboid--wings-bottom div:nth-of-type(3) {
+  background: var(--accent-five);
+}
+.cuboid--wings-ghost div:nth-of-type(3),
+.cuboid--wings-ghost div:nth-of-type(5),
+.cuboid--wings-ghost div:nth-of-type(6),
+.cuboid--wings-ghost div:nth-of-type(1) {
+  background: transparent;
+}
+.cuboid--wings-ghost div:nth-of-type(2),
+.cuboid--wings-ghost div:nth-of-type(4) {
+  background: linear-gradient(90deg, transparent 0 5%, var(--metal-one) 5% 7%, transparent 7% 33%, var(--metal-one) 33% 35%, transparent 35% 65%, var(--metal-one) 65% 67%, transparent 67% 93%, var(--metal-one) 93% 95%, transparent 95%);
+}
+.cuboid--axle {
+  --thickness: calc(var(--base-size) * 0.5);
+}
+.cuboid--axle div {
+  background: var(--metal-two);
+}
+.cuboid--axle div:nth-of-type(3) {
+  background: var(--metal-three);
+}
+.cuboid--axle div:nth-of-type(2),
+.cuboid--axle div:nth-of-type(1) {
+  background: var(--metal-one);
+}
+.cuboid--axle div:nth-of-type(6) {
+  background: var(--metal-one);
+}
+.cuboid--horizontal-stabilizer {
+  --thickness: calc(var(--base-size) * 0.65);
+}
+.cuboid--horizontal-stabilizer div {
+  background: var(--accent-one);
+}
+.cuboid--horizontal-stabilizer div:nth-of-type(1) {
+  background: var(--accent-two);
+}
+.cuboid--horizontal-stabilizer div:nth-of-type(2),
+.cuboid--horizontal-stabilizer div:nth-of-type(5) {
+  background: var(--accent-three);
+}
+.cuboid--horizontal-stabilizer div:nth-of-type(3),
+.cuboid--horizontal-stabilizer div:nth-of-type(4) {
+  background: var(--accent-four);
+}
+.cuboid--vertical-stabilizer {
+  --thickness: calc(var(--base-size) * 0.2);
+}
+.cuboid--vertical-stabilizer div {
+  background: var(--accent-one);
+}
+.cuboid--vertical-stabilizer div:nth-of-type(1) {
+  background: linear-gradient(270deg, var(--accent-two) 0 30%, transparent 30%);
+}
+.cuboid--vertical-stabilizer div:nth-of-type(4) {
+  background: transparent;
+}
+.cuboid--vertical-stabilizer div:nth-of-type(4):after {
+  content: '';
+  background: var(--accent-four);
+  height: 150%;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  transform-origin: 50% 100%;
+  transform: rotateX(-48deg);
+}
+.cuboid--vertical-stabilizer div:nth-of-type(5) {
+  background: transparent;
+  overflow: hidden;
+}
+.cuboid--vertical-stabilizer div:nth-of-type(5):after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  transform-origin: 0 0;
+  transform: rotate(-42deg);
+  background: var(--accent-three);
+  height: 150%;
+  width: 160%;
+}
+.cuboid--vertical-stabilizer div:nth-of-type(6) {
+  background: transparent;
+  overflow: hidden;
+}
+.cuboid--vertical-stabilizer div:nth-of-type(6):after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  right: 0;
+  transform-origin: 100% 0;
+  transform: rotate(42deg);
+  background: var(--accent-three);
+  height: 150%;
+  width: 160%;
+}
+.cuboid--wheel-left,
+.cuboid--wheel-right {
+  --thickness: calc(var(--base-size) * 0.1);
+}
+.cuboid--wheel-left div,
+.cuboid--wheel-right div {
+  background: var(--wheel-one);
+}
+.cuboid--wheel-left div:nth-of-type(1),
+.cuboid--wheel-right div:nth-of-type(1),
+.cuboid--wheel-left div:nth-of-type(2),
+.cuboid--wheel-right div:nth-of-type(2),
+.cuboid--wheel-left div:nth-of-type(4),
+.cuboid--wheel-right div:nth-of-type(4) {
+  background: var(--wheel-two);
+}
+.cuboid--wheel-left div:nth-of-type(3),
+.cuboid--wheel-right div:nth-of-type(3) {
+  background: var(--wheel-three);
+}
+.cuboid--wheel-left div:nth-of-type(5):after,
+.cuboid--wheel-right div:nth-of-type(5):after,
+.cuboid--wheel-left div:nth-of-type(6):after,
+.cuboid--wheel-right div:nth-of-type(6):after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 40%;
+  width: 40%;
+  background: var(--wheel-hub);
+}
+.cuboid--cloud div:nth-of-type(1) {
+  background: var(--cloud-one);
+}
+.cuboid--cloud div:nth-of-type(2) {
+  background: var(--cloud-two);
+}
+.cuboid--cloud div:nth-of-type(3) {
+  background: var(--cloud-three);
+}
+.cuboid--cloud div:nth-of-type(4) {
+  background: var(--cloud-four);
+}
+.cuboid--cloud div:nth-of-type(5) {
+  background: var(--cloud-five);
+}
+.cuboid--cloud div:nth-of-type(6) {
+  background: var(--cloud-six);
+}
+.cuboid--beacon {
+  --thickness: calc(var(--base-size) * 0.02);
+  -webkit-animation: flash calc(var(--dark) * 1s) infinite;
+          animation: flash calc(var(--dark) * 1s) infinite;
+}
+.cuboid--beacon div {
+  background: hsla(0, 90%, 50%, var(--alpha));
+}
+.cuboid--strobe {
+  --thickness: calc(var(--base-size) * 0.02);
+  -webkit-animation: flash calc(var(--dark) * 0.5s) infinite;
+          animation: flash calc(var(--dark) * 0.5s) infinite;
+}
+.cuboid--strobe div {
+  background: hsla(0, 90%, 98%, var(--alpha));
+}
+@-webkit-keyframes flash {
+  50% {
+    --alpha: 1;
+  }
+}
+@keyframes flash {
+  50% {
+    --alpha: 1;
+  }
+}
+@-webkit-keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes float {
+  50% {
+    transform: translate(-50%, -40%);
+  }
+}
+@keyframes float {
+  50% {
+    transform: translate(-50%, -40%);
+  }
+}
+@-webkit-keyframes loop {
+  0%, 40% {
+    transform: translate(-50%, -50%);
+  }
+  50%, 100% {
+    transform: translate(-50%, -50%) rotateZ(360deg);
+  }
+}
+@keyframes loop {
+  0%, 40% {
+    transform: translate(-50%, -50%);
+  }
+  50%, 100% {
+    transform: translate(-50%, -50%) rotateZ(360deg);
+  }
+}
+@-webkit-keyframes roll {
+  0%, 85% {
+    transform: translate(-50%, -50%);
+  }
+  90%, 100% {
+    transform: translate(-50%, -50%) rotateX(-360deg);
+  }
+}
+@keyframes roll {
+  0%, 85% {
+    transform: translate(-50%, -50%);
+  }
+  90%, 100% {
+    transform: translate(-50%, -50%) rotateX(-360deg);
+  }
+}
+@-webkit-keyframes nightshift {
+  0%, 50% {
+    background: var(--bg);
+  }
+  75%, 100% {
+    background: var(--night);
+  }
+}
+@keyframes nightshift {
+  0%, 50% {
+    background: var(--bg);
+  }
+  75%, 100% {
+    background: var(--night);
+  }
+}
+@-webkit-keyframes scale {
+  0%, 5%, 95%, 100% {
+    transform: scale(0);
+  }
+  10%, 90% {
+    transform: scale(1);
+  }
+}
+@keyframes scale {
+  0%, 5%, 95%, 100% {
+    transform: scale(0);
+  }
+  10%, 90% {
+    transform: scale(1);
+  }
+}
+@-webkit-keyframes pan {
+  0% {
+    transform: translate(-1000%, 0);
+  }
+  100% {
+    transform: translate(1000%, 0);
+  }
+}
+@keyframes pan {
+  0% {
+    transform: translate(-1000%, 0);
+  }
+  100% {
+    transform: translate(1000%, 0);
+  }
+}
\ No newline at end of file
diff --git a/3d-css-plane-tap-to-toggle-mouse-move-parallax/license.txt b/3d-css-plane-tap-to-toggle-mouse-move-parallax/license.txt
new file mode 100644
index 0000000..52cf6dc
--- /dev/null
+++ b/3d-css-plane-tap-to-toggle-mouse-move-parallax/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Jhey (https://codepen.io/jh3y/pen/NWdNMBJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/3d-css-plane-tap-to-toggle-mouse-move-parallax/src/index.pug b/3d-css-plane-tap-to-toggle-mouse-move-parallax/src/index.pug
new file mode 100644
index 0000000..5796e67
--- /dev/null
+++ b/3d-css-plane-tap-to-toggle-mouse-move-parallax/src/index.pug
@@ -0,0 +1,73 @@
+mixin cuboid()
+  .cuboid(class!=attributes.class)
+    - let s = 0
+    while s < 6
+      .cuboid__side
+      - s++
+input#dark(type="checkbox")
+.scene
+  .cloud.cloud--one
+    .cloud__shift
+      .cloud__body
+        div
+          +cuboid()(class="cuboid--cloud")
+        div
+          +cuboid()(class="cuboid--cloud")
+        div
+          +cuboid()(class="cuboid--cloud")
+  .cloud.cloud--two
+    .cloud__shift
+      .cloud__body
+        div
+          +cuboid()(class="cuboid--cloud")
+        div
+          +cuboid()(class="cuboid--cloud")
+        div
+          +cuboid()(class="cuboid--cloud")
+  .cloud.cloud--three
+    .cloud__shift
+      .cloud__body
+        div
+          +cuboid()(class="cuboid--cloud")
+        div
+          +cuboid()(class="cuboid--cloud")
+        div
+          +cuboid()(class="cuboid--cloud")
+  .plane__floater
+    .plane__looper
+      .plane
+        .plane__wheels
+          .plane__axle
+            +cuboid()(class="cuboid--axle")
+          .plane__wheel.plane__wheel--left
+            +cuboid()(class="cuboid--wheel-left")
+          .plane__wheel.plane__wheel--right
+            +cuboid()(class="cuboid--wheel-right")
+        .plane__body
+          +cuboid()(class="cuboid--body")
+        .plane__nose
+          +cuboid()(class="cuboid--nose")
+        .plane__propellor
+          .propellor
+        .plane__screen
+          +cuboid()(class="cuboid--screen")
+        .plane__wings.wings
+          .wings__top
+            +cuboid()(class="cuboid--wings-top")
+          .wings__ghost
+            +cuboid()(class="cuboid--wings-ghost")
+          .wings__bottom
+            +cuboid()(class="cuboid--wings-bottom")
+          .wings__strobe.wings__strobe--left
+            +cuboid()(class="cuboid--strobe")
+          .wings__strobe.wings__strobe--right
+            +cuboid()(class="cuboid--strobe")
+        .plane__tail
+          +cuboid()(class="cuboid--tail")
+        .plane__stabilizer.plane__stabilizer--horizontal
+          +cuboid()(class="cuboid--horizontal-stabilizer")
+        .plane__stabilizer.plane__stabilizer--vertical
+          +cuboid()(class="cuboid--vertical-stabilizer")
+        .plane__beacon
+          +cuboid()(class="cuboid--beacon")
+label(for="dark")
\ No newline at end of file
diff --git a/3d-css-plane-tap-to-toggle-mouse-move-parallax/src/script.babel b/3d-css-plane-tap-to-toggle-mouse-move-parallax/src/script.babel
new file mode 100644
index 0000000..b8ab032
--- /dev/null
+++ b/3d-css-plane-tap-to-toggle-mouse-move-parallax/src/script.babel
@@ -0,0 +1,17 @@
+import gsap from 'https://cdn.skypack.dev/gsap'
+
+const BOUNDS = 50
+document.addEventListener('pointermove', ({ x, y }) => {
+  const newX = gsap.utils.mapRange(0, window.innerWidth, -BOUNDS, BOUNDS, x)
+  const newY = gsap.utils.mapRange(0, window.innerHeight, BOUNDS, -BOUNDS, y)
+  gsap.set(document.documentElement, {
+    '--rotate-x': newY,
+    '--rotate-y': newX,
+  })
+})
+
+const CHECKER = document.querySelector('[type="checkbox"]')
+
+CHECKER.addEventListener('input', e =>
+  document.documentElement.style.setProperty('--dark', CHECKER.checked ? 1 : 0)
+)
diff --git a/3d-css-plane-tap-to-toggle-mouse-move-parallax/src/style.styl b/3d-css-plane-tap-to-toggle-mouse-move-parallax/src/style.styl
new file mode 100644
index 0000000..48c9b5e
--- /dev/null
+++ b/3d-css-plane-tap-to-toggle-mouse-move-parallax/src/style.styl
@@ -0,0 +1,668 @@
+.cuboid
+  width 100%
+  height 100%
+  position relative
+  // 1 is the top and go t, r, b, l, f, b
+
+  &__side:nth-of-type(1)
+    height calc(var(--thickness) * 1vmin)
+    width 100%
+    position absolute
+    top 0
+    transform translate(0, -50%) rotateX(90deg)
+
+  &__side:nth-of-type(2)
+    height 100%
+    width calc(var(--thickness) * 1vmin)
+    position absolute
+    top 50%
+    right 0
+    transform translate(50%, -50%) rotateY(90deg)
+
+  &__side:nth-of-type(3)
+    width 100%
+    height calc(var(--thickness) * 1vmin)
+    position absolute
+    bottom 0
+    transform translate(0%, 50%) rotateX(90deg)
+
+  &__side:nth-of-type(4)
+    height 100%
+    width calc(var(--thickness) * 1vmin)
+    position absolute
+    left 0
+    top 50%
+    transform translate(-50%, -50%) rotateY(90deg)
+
+  &__side:nth-of-type(5)
+    height 100%
+    width 100%
+    transform translate3d(0, 0, calc(var(--thickness) * 0.5vmin))
+    position absolute
+    top 0
+    left 0
+
+  &__side:nth-of-type(6)
+    height 100%
+    width 100%
+    transform translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg)
+    position absolute
+    top 0
+    left 0
+
+*
+*:after
+*:before
+  box-sizing border-box
+  transform-style preserve-3d
+  transition background 0.25s
+
+body
+  min-height 100vh
+  display grid
+  place-items center
+  background var(--bg)
+  overflow hidden
+
+:root
+  --dark 0
+  --base-size 20
+  --plane-height calc(var(--base-size) * 1vmin)
+  --plane-width calc(var(--plane-height) * 1.6)
+  --white-one 'hsl(0, 0%, %s)' % calc((90 - (var(--dark) * 30)) * 1%)
+  --white-two 'hsl(0, 0%, %s)' % calc((85 - (var(--dark) * 30)) * 1%)
+  --white-three 'hsl(0, 0%, %s)' % calc((80 - (var(--dark) * 30)) * 1%)
+  --white-four 'hsl(0, 0%, %s)' % calc((75 - (var(--dark) * 30)) * 1%)
+  --white-five 'hsl(0, 0%, %s)' % calc((70 - (var(--dark) * 30)) * 1%)
+  --accent-hue 10
+  --accent-one 'hsl(%s, 80%, %s)' % (var(--accent-hue) calc((60 - (var(--dark) * 20)) * 1%))
+  --accent-two 'hsl(%s, 80%, %s)' % (var(--accent-hue) calc((55 - (var(--dark) * 20)) * 1%))
+  --accent-three 'hsl(%s, 80%, %s)' % (var(--accent-hue) calc((50 - (var(--dark) * 20)) * 1%))
+  --accent-four 'hsl(%s, 80%, %s)' % (var(--accent-hue) calc((45 - (var(--dark) * 20)) * 1%))
+  --accent-five 'hsl(%s, 80%, %s)' % (var(--accent-hue) calc((40 - (var(--dark) * 20)) * 1%))
+  --screen 'hsla(210, 80%, %s, 0.25)' % calc((70 - (var(--dark) * 20)) * 1%)
+  --metal-one 'hsl(0, 0%, %s)' % calc((60 - (var(--dark) * 20)) * 1%)
+  --metal-two 'hsl(0, 0%, %s)' % calc((50 - (var(--dark) * 20)) * 1%)
+  --metal-three 'hsl(0, 0%, %s)' % calc((40 - (var(--dark) * 20)) * 1%)
+  --wheel-one hsl(0, 0%, 10%)
+  --wheel-two hsl(0, 0%, 5%)
+  --wheel-three hsl(0, 0%, 0%)
+  --wheel-hub 'hsl(0, 0%, %s)' % calc((98 - (var(--dark) * 20)) * 1%)
+  --bg 'hsl(210, 80%, %s)' % calc((90 - (var(--dark) * 76)) * 1%)
+  --night hsl(210, 80%, 16%)
+  --cloud-one 'hsl(0, 0%, %s)' % calc((98 - (var(--dark) * 35)) * 1%)
+  --cloud-two 'hsl(0, 0%, %s)' % calc((94 - (var(--dark) * 35)) * 1%)
+  --cloud-three 'hsl(0, 0%, %s)' % calc((90 - (var(--dark) * 35)) * 1%)
+  --cloud-four 'hsl(0, 0%, %s)' % calc((86 - (var(--dark) * 35)) * 1%)
+  --cloud-five 'hsl(0, 0%, %s)' % calc((82 - (var(--dark) * 35)) * 1%)
+  --cloud-six 'hsl(0, 0%, %s)' % calc((78 - (var(--dark) * 35)) * 1%)
+
+
+.scene
+  transform translate(-50%, -50%)
+  position fixed
+  top 50%
+  left 50%
+  transform translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(44deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg))
+
+[type="checkbox"]
+  position fixed
+  left 100%
+  opacity 0
+  visibility hidden
+
+label
+  height 100vh
+  width 100vw
+  position fixed
+  top 0
+  left 0
+  right 0
+  bottom 0
+  transform translate3d(0, 0, 1000vmin)
+
+.plane
+  height var(--plane-height)
+  width var(--plane-width)
+  // background hsla(210, 80%, 80%, 0.5)
+  position absolute
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+  animation roll 10s infinite ease-out alternate
+
+  &__floater
+    position absolute
+    width var(--plane-width)
+    height var(--plane-width)
+    transform translate(-50%, -50%)
+    top 50%
+    left 50%
+    animation float 2s infinite ease-in-out
+
+  &__looper
+    position absolute
+    width var(--plane-width)
+    height var(--plane-width)
+    transform translate(-50%, -50%)
+    top 50%
+    left 50%
+    transform-origin 50% 0
+    animation loop 10s infinite ease-in-out
+
+  *
+    position absolute
+
+  &__body
+    height 40%
+    width 36%
+    bottom 20%
+    left 10%
+
+  &__wheels
+    bottom 0
+    width calc(var(--plane-height) * 0.2)
+    left 32%
+    transform translate(-50%, 0)
+    height 20%
+
+  &__axle
+    height 50%
+    width 50%
+    top 50%
+    left 50%
+    transform translate(-50%, -50%)
+
+  &__wheel
+    height 100%
+    width 100%
+    top 0
+    left 0
+
+  &__wings
+    height 70%
+    width 40%
+    bottom 19%
+    left 12%
+
+  &__tail
+    height 40%
+    width 54%
+    bottom 20%
+    left 46%
+
+  &__nose
+    height 30%
+    width 10%
+    bottom 25%
+
+  &__stabilizer--horizontal
+    height 9%
+    width 16%
+    right 1%
+    bottom 50%
+
+  &__screen
+    bottom 60%
+    left 30%
+    width 6%
+    height 14%
+
+  &__propellor
+    height calc(var(--base-size) * 0.75vmin)
+    width calc(var(--base-size) * 0.75vmin)
+    left -1%
+    bottom 40%
+    transform translate(-50%, 50%) rotateY(-90deg)
+
+    &:after
+      content ''
+      position absolute
+      top 50%
+      left 50%
+      transform translate3d(-50%, -50%, 2px)
+      height 16%
+      width 16%
+      border-radius 50%
+      background var(--white-one)
+
+  &__stabilizer--vertical
+    height 20%
+    width 20%
+    right 0
+    bottom 60%
+
+  &__beacon
+    right 1%
+    bottom 80%
+    height 2%
+    width 2%
+
+  &__wheel--left
+    transform translate3d(0, 0, calc(var(--base-size) * 0.3vmin))
+  &__wheel--right
+    transform translate3d(0, 0, calc(var(--base-size) * -0.3vmin))
+
+.propellor
+  height 100%
+  width 100%
+  animation spin 0.35s infinite linear
+
+  &:after
+  &:before
+    content ''
+    height 100%
+    width 10%
+    position absolute
+    top 50%
+    left 50%
+    background linear-gradient(transparent 0 5%, var(--accent-two) 5% 15%, transparent 15% 85%, var(--accent-two) 85% 95%, transparent 95%), hsl(0, 0%, 0%)
+    transform translate(-50%, -50%) rotate(calc(var(--r, 45) * 1deg))
+
+  &:after
+    --r -45
+
+.wings
+  &__ghost
+    height 80%
+    width 80%
+    left 50%
+    bottom 10%
+    transform translate(-50%, 0)
+
+  &__top
+    top 0
+    height 10%
+    width 100%
+    left 0
+
+  &__bottom
+    bottom 0
+    height 10%
+    width 100%
+    left 0
+
+  &__strobe
+    bottom 10%
+    height 4%
+    width 4%
+    left 50%
+
+    &--left
+      transform translate3d(-50%, 0, calc(var(--base-size) * 1vmin))
+    &--right
+      transform translate3d(-50%, 0, calc(var(--base-size) * -1vmin))
+
+.cloud
+  height 10vmin
+  width 15vmin
+  position absolute
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+
+  &__shift
+    height 100%
+    width 100%
+    animation pan calc(var(--speed, 5) * 1s) calc(var(--delay, 5) * -1s) infinite ease-in-out both
+
+  &__body
+    height 100%
+    width 100%
+    animation scale calc(var(--speed, 5) * 1s) calc(var(--delay, 5) * -1s) infinite linear
+
+  &__body > div
+    position absolute
+
+    &:nth-of-type(1)
+      bottom 0
+      left 25%
+      width 60%
+      height 90%
+      --thickness calc(var(--base-size) * 0.2)
+
+    &:nth-of-type(2)
+      bottom 0
+      left 0
+      width 50%
+      height 60%
+      --thickness calc(var(--base-size) * 0.3)
+
+    &:nth-of-type(3)
+      bottom 0
+      right 0%
+      width 60%
+      height 40%
+      --thickness calc(var(--base-size) * 0.4)
+
+  &--one
+    --speed 2
+    --delay 3
+    transform translate(-50%, -50%) translate3d(-40vmin, 20vmin, 26vmin)
+
+  &--two
+    --speed 4
+    --delay 1
+    transform translate(-50%, -50%) translate3d(30vmin, -15vmin, -34vmin)
+
+  &--three
+    --speed 6
+    --delay 2
+    transform translate(-50%, -50%) translate3d(50vmin, 35vmin, -14vmin)
+
+.cuboid
+  &--body
+    --thickness calc(var(--base-size) * 0.4)
+    div
+      background var(--white-two)
+
+      &:nth-of-type(1)
+        background var(--white-one)
+      &:nth-of-type(2)
+        background var(--white-two)
+      &:nth-of-type(3)
+        background var(--white-three)
+      &:nth-of-type(4)
+        background var(--white-four)
+
+      &:nth-of-type(5):after
+      &:nth-of-type(6):after
+        content ''
+        position absolute
+        top 50%
+        left 50%
+        height calc(var(--base-size) * 0.25vmin)
+        width calc(var(--base-size) * 0.25vmin)
+        background-image url("https://assets.codepen.io/605876/avatar.png")
+        background-size cover
+        filter saturate(0.65)
+        transform translate3d(-50%, -50%, 1px)
+
+  &--screen
+    --thickness calc(var(--base-size) * 0.26)
+
+    div
+      background var(--screen)
+
+  &--tail
+    --thickness calc(var(--base-size) * 0.3)
+
+    div
+      background var(--white-two)
+
+      &:nth-of-type(1)
+        background var(--white-one)
+
+        &:after
+          content ''
+          position absolute
+          height 74%
+          width 50%
+          background var(--metal-three)
+          top 50%
+          right 50%
+          transform translate3d(-50%, -50%, 1px)
+
+      &:nth-of-type(2)
+        background linear-gradient(var(--white-two) 0 30%, transparent 30%)
+
+      &:nth-of-type(3)
+        background linear-gradient(90deg, var(--white-two) 0 20%, transparent 20%)
+
+        &:after
+          content ''
+          position absolute
+          background var(--white-four)
+          top 0%
+          left 20%
+          height 100%
+          width 87%
+          transform-origin 0 50%
+          transform rotateY(-22deg)
+
+      &:nth-of-type(5)
+        background transparent
+        overflow hidden
+
+        &:after
+          content ''
+          position absolute
+          bottom 70%
+          height 100%
+          width 100%
+          background var(--white-two)
+          transform-origin 100% 100%
+          transform rotate(-22deg) scale(2) translate(10%, 0)
+
+      &:nth-of-type(6)
+        background transparent
+        overflow hidden
+
+        &:after
+          content ''
+          position absolute
+          bottom 70%
+          height 100%
+          width 100%
+          background var(--white-two)
+          transform-origin 0% 100%
+          transform rotate(22deg) scale(2) translate(-10%, 0)
+
+  &--nose
+    --thickness calc(var(--base-size) * 0.3)
+
+    div
+      background var(--metal-three)
+
+      &:nth-of-type(1)
+        background var(--metal-one)
+      &:nth-of-type(2)
+        background var(--metal-two)
+      &:nth-of-type(3)
+        background var(--metal-one)
+
+  &--wings-ghost
+  &--wings-top
+  &--wings-bottom
+    --thickness calc(var(--base-size) * 2.2)
+
+    div
+      background var(--accent-one)
+
+      &:nth-of-type(1)
+        background var(--accent-two)
+      &:nth-of-type(2)
+      &:nth-of-type(5)
+        background var(--accent-three)
+      &:nth-of-type(4)
+        background var(--accent-four)
+      &:nth-of-type(3)
+        background var(--accent-five)
+
+  &--wings-ghost
+    div
+      &:nth-of-type(3)
+      &:nth-of-type(5)
+      &:nth-of-type(6)
+      &:nth-of-type(1)
+        background transparent
+      &:nth-of-type(2)
+      &:nth-of-type(4)
+        background linear-gradient(90deg, transparent 0 5%, var(--metal-one) 5% 7%, transparent 7% 33%, var(--metal-one) 33% 35%, transparent 35% 65%, var(--metal-one) 65% 67%, transparent 67% 93%, var(--metal-one) 93% 95%, transparent 95%)
+
+  &--axle
+    --thickness calc(var(--base-size) * 0.5)
+
+    div
+      background var(--metal-two)
+
+      &:nth-of-type(3)
+        background var(--metal-three)
+      &:nth-of-type(2)
+      &:nth-of-type(1)
+        background var(--metal-one)
+      &:nth-of-type(6)
+        background var(--metal-one)
+
+  &--horizontal-stabilizer
+    --thickness calc(var(--base-size) * 0.65)
+
+    div
+      background var(--accent-one)
+
+      &:nth-of-type(1)
+        background var(--accent-two)
+      &:nth-of-type(2)
+      &:nth-of-type(5)
+        background var(--accent-three)
+      &:nth-of-type(3)
+      &:nth-of-type(4)
+        background var(--accent-four)
+
+  &--vertical-stabilizer
+    --thickness calc(var(--base-size) * 0.2)
+
+    div
+      background var(--accent-one)
+
+      &:nth-of-type(1)
+        background linear-gradient(270deg, var(--accent-two) 0 30%, transparent 30%)
+
+      &:nth-of-type(4)
+        background transparent
+
+        &:after
+          content ''
+          background var(--accent-four)
+          height 150%
+          bottom 0
+          left 0
+          position absolute
+          width 100%
+          transform-origin 50% 100%
+          transform rotateX(-48deg)
+
+      &:nth-of-type(5)
+        background transparent
+        overflow hidden
+
+        &:after
+          content ''
+          position absolute
+          top 100%
+          transform-origin 0 0
+          transform rotate(-42deg)
+          background var(--accent-three)
+          height 150%
+          width 160%
+
+      &:nth-of-type(6)
+        background transparent
+        overflow hidden
+
+        &:after
+          content ''
+          position absolute
+          top 100%
+          right 0
+          transform-origin 100% 0
+          transform rotate(42deg)
+          background var(--accent-three)
+          height 150%
+          width 160%
+
+  &--wheel-left
+  &--wheel-right
+    --thickness calc(var(--base-size) * 0.1)
+
+    div
+      background var(--wheel-one)
+
+      &:nth-of-type(1)
+      &:nth-of-type(2)
+      &:nth-of-type(4)
+        background var(--wheel-two)
+      &:nth-of-type(3)
+        background var(--wheel-three)
+
+      &:nth-of-type(5)
+      &:nth-of-type(6)
+        &:after
+          content ''
+          position absolute
+          top 50%
+          left 50%
+          transform translate(-50%, -50%)
+          height 40%
+          width 40%
+          background var(--wheel-hub)
+  &--cloud
+    div
+      &:nth-of-type(1)
+        background var(--cloud-one)
+      &:nth-of-type(2)
+        background var(--cloud-two)
+      &:nth-of-type(3)
+        background var(--cloud-three)
+      &:nth-of-type(4)
+        background var(--cloud-four)
+      &:nth-of-type(5)
+        background var(--cloud-five)
+      &:nth-of-type(6)
+        background var(--cloud-six)
+
+  &--beacon
+    --thickness calc(var(--base-size) * 0.02)
+    animation flash calc(var(--dark) * 1s) infinite
+
+    div
+      background 'hsla(0, 90%, 50%, %s)' % var(--alpha)
+
+  &--strobe
+    --thickness calc(var(--base-size) * 0.02)
+    animation flash calc(var(--dark) * 0.5s) infinite
+
+    div
+      background 'hsla(0, 90%, 98%, %s)' % var(--alpha)
+
+@keyframes flash
+  50%
+    --alpha 1
+
+@keyframes spin
+  to
+    transform rotate(360deg)
+
+@keyframes float
+  50%
+    transform translate(-50%, -40%)
+
+@keyframes loop
+  0%, 40%
+    transform translate(-50%, -50%)
+  50%, 100%
+    transform translate(-50%, -50%) rotateZ(360deg)
+
+@keyframes roll
+  0%, 85%
+    transform translate(-50%, -50%)
+  90%, 100%
+    transform translate(-50%, -50%) rotateX(-360deg)
+
+@keyframes nightshift
+  0%, 50%
+    background var(--bg)
+  75%, 100%
+    background var(--night)
+
+@keyframes scale
+  0%, 5%, 95%, 100%
+    transform scale(0)
+  10%, 90%
+    transform scale(1)
+
+@keyframes pan
+  0%
+    transform translate(-1000%, 0)
+  100%
+    transform translate(1000%, 0)
\ No newline at end of file
diff --git a/3d-css-sphere/README.markdown b/3d-css-sphere/README.markdown
new file mode 100644
index 0000000..a7ae410
--- /dev/null
+++ b/3d-css-sphere/README.markdown
@@ -0,0 +1,5 @@
+# 3D CSS Sphere
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/peterwestendorp/pen/wGECk](https://codepen.io/peterwestendorp/pen/wGECk).
+
+3D ball made with just some CSS 3D transforms, border-radius and border-style. Not really useful, it just looks nice...
diff --git a/3d-css-sphere/dist/index.html b/3d-css-sphere/dist/index.html
new file mode 100644
index 0000000..aeb3e58
--- /dev/null
+++ b/3d-css-sphere/dist/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 3D CSS Sphere</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="scene">
+  <div class="wrapper">
+    <ul class="ball">
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+    </ul>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/3d-css-sphere/dist/style.css b/3d-css-sphere/dist/style.css
new file mode 100644
index 0000000..3d756fe
--- /dev/null
+++ b/3d-css-sphere/dist/style.css
@@ -0,0 +1,162 @@
+@keyframes roundandround {
+  to {
+    transform: rotateX(360deg) rotateY(360deg);
+  }
+}
+
+@keyframes show {
+  to {
+    opacity: 1;
+  }
+}
+
+body {
+  background-color: #000000;
+}
+.scene {
+  width:600px;
+  height:600px;
+  margin:2% auto;
+  perspective: 1000px;
+}
+.wrapper {
+  width:100%;
+  height:100%;
+  transform: rotateX(45deg) rotateY(45deg);
+  transform-style: preserve-3d;
+}
+.ball {
+  position: relative;
+  width: 70%;
+  height: 70%;
+  margin:0 auto;
+  transform-style:  preserve-3d;
+  animation: roundandround 7.5s 1.3s infinite linear;
+}
+.ball .ring {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border:6px;
+  border-style: dashed;
+  border-radius: 50%;
+  opacity: 0;
+  animation: show 0.75s forwards ease-in-out;
+}
+.ring:nth-child(1) {
+  color:#8df435;
+  transform: rotateY(4deg);
+  animation-delay: 0s;
+}
+.ring:nth-child(2) {
+  color:#a8e526;
+  transform: rotateY(8deg);
+  animation-delay: 0.1s;
+}
+.ring:nth-child(3) {
+  color:#c2d11c;
+  transform: rotateY(12deg);
+  animation-delay: 0.2s;
+}
+.ring:nth-child(4) {
+  color:#c8cb1b;
+  transform: rotateY(16deg);
+  animation-delay: 0.3s;
+}
+.ring:nth-child(5) {
+  color:#deb21a;
+  transform: rotateY(20deg);
+  animation-delay: 0.4s;
+}
+.ring:nth-child(6) {
+  color:#ef9621;
+  transform: rotateY(24deg);
+  animation-delay: 0.5s;
+}
+.ring:nth-child(7) {
+  color:#f29122;
+  transform: rotateY(28deg);
+  animation-delay: 0.6s;
+}
+.ring:nth-child(8) {
+  color:#fb7430;
+  transform: rotateY(32deg);
+  animation-delay: 0.7s;
+}
+.ring:nth-child(9) {
+  color:#fe5944;
+  transform: rotateY(36deg);
+  animation-delay: 0.8s;
+}
+.ring:nth-child(10) {
+  color:#fe5548;
+  transform: rotateY(40deg);
+  animation-delay: 0.9s;
+}
+.ring:nth-child(11) {
+  color:#f83d61;
+  transform: rotateY(44deg);
+  animation-delay: 1s;
+}
+.ring:nth-child(12) {
+  color:#ec2b7d;
+  transform: rotateY(48deg);
+  animation-delay: 1.1s;
+}
+.ring:nth-child(13) {
+  color:#e82983;
+  transform: rotateY(52deg);
+  animation-delay: 1s;
+}
+.ring:nth-child(14) {
+  color:#d41e9f;
+  transform: rotateY(56deg);
+  animation-delay: 0.9s;
+}
+.ring:nth-child(15) {
+  color:#bd1aba;
+  transform: rotateY(60deg);
+  animation-delay: 0.8s;
+}
+.ring:nth-child(16) {
+  color:#b81ac0;
+  transform: rotateY(64deg);
+  animation-delay: 0.7s;
+}
+.ring:nth-child(17) {
+  color:#9c1fd7;
+  transform: rotateY(68deg);
+  animation-delay: 0.6s;
+}
+.ring:nth-child(18) {
+  color:#802aea;
+  transform: rotateY(72deg);
+  animation-delay: 0.5s;
+}
+.ring:nth-child(19) {
+  color:#7a2dee;
+  transform: rotateY(76deg);
+  animation-delay: 0.4s;
+}
+.ring:nth-child(20) {
+  color:#5f40f9;
+  transform: rotateY(80deg);
+  animation-delay: 0.3s;
+}
+.ring:nth-child(21) {
+  color:#4657fe;
+  transform: rotateY(84deg);
+  animation-delay: 0.2s;
+}
+.ring:nth-child(22) {
+  color:#425cfe;
+  transform: rotateY(88deg);
+  animation-delay: 0.1s;
+}
+.ring:nth-child(23) {
+  color:#2f77fb;
+  transform: rotateY(92deg);
+  animation-delay: 0s;
+}
\ No newline at end of file
diff --git a/3d-css-sphere/license.txt b/3d-css-sphere/license.txt
new file mode 100644
index 0000000..c59e70c
--- /dev/null
+++ b/3d-css-sphere/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Peter Westendorp (https://codepen.io/peterwestendorp/pen/wGECk)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/3d-css-sphere/src/index.html b/3d-css-sphere/src/index.html
new file mode 100644
index 0000000..fac22c6
--- /dev/null
+++ b/3d-css-sphere/src/index.html
@@ -0,0 +1,29 @@
+<div class="scene">
+  <div class="wrapper">
+    <ul class="ball">
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+      <li class="ring"></li>
+    </ul>
+  </div>
+</div>
diff --git a/3d-css-sphere/src/style.css b/3d-css-sphere/src/style.css
new file mode 100644
index 0000000..3d756fe
--- /dev/null
+++ b/3d-css-sphere/src/style.css
@@ -0,0 +1,162 @@
+@keyframes roundandround {
+  to {
+    transform: rotateX(360deg) rotateY(360deg);
+  }
+}
+
+@keyframes show {
+  to {
+    opacity: 1;
+  }
+}
+
+body {
+  background-color: #000000;
+}
+.scene {
+  width:600px;
+  height:600px;
+  margin:2% auto;
+  perspective: 1000px;
+}
+.wrapper {
+  width:100%;
+  height:100%;
+  transform: rotateX(45deg) rotateY(45deg);
+  transform-style: preserve-3d;
+}
+.ball {
+  position: relative;
+  width: 70%;
+  height: 70%;
+  margin:0 auto;
+  transform-style:  preserve-3d;
+  animation: roundandround 7.5s 1.3s infinite linear;
+}
+.ball .ring {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border:6px;
+  border-style: dashed;
+  border-radius: 50%;
+  opacity: 0;
+  animation: show 0.75s forwards ease-in-out;
+}
+.ring:nth-child(1) {
+  color:#8df435;
+  transform: rotateY(4deg);
+  animation-delay: 0s;
+}
+.ring:nth-child(2) {
+  color:#a8e526;
+  transform: rotateY(8deg);
+  animation-delay: 0.1s;
+}
+.ring:nth-child(3) {
+  color:#c2d11c;
+  transform: rotateY(12deg);
+  animation-delay: 0.2s;
+}
+.ring:nth-child(4) {
+  color:#c8cb1b;
+  transform: rotateY(16deg);
+  animation-delay: 0.3s;
+}
+.ring:nth-child(5) {
+  color:#deb21a;
+  transform: rotateY(20deg);
+  animation-delay: 0.4s;
+}
+.ring:nth-child(6) {
+  color:#ef9621;
+  transform: rotateY(24deg);
+  animation-delay: 0.5s;
+}
+.ring:nth-child(7) {
+  color:#f29122;
+  transform: rotateY(28deg);
+  animation-delay: 0.6s;
+}
+.ring:nth-child(8) {
+  color:#fb7430;
+  transform: rotateY(32deg);
+  animation-delay: 0.7s;
+}
+.ring:nth-child(9) {
+  color:#fe5944;
+  transform: rotateY(36deg);
+  animation-delay: 0.8s;
+}
+.ring:nth-child(10) {
+  color:#fe5548;
+  transform: rotateY(40deg);
+  animation-delay: 0.9s;
+}
+.ring:nth-child(11) {
+  color:#f83d61;
+  transform: rotateY(44deg);
+  animation-delay: 1s;
+}
+.ring:nth-child(12) {
+  color:#ec2b7d;
+  transform: rotateY(48deg);
+  animation-delay: 1.1s;
+}
+.ring:nth-child(13) {
+  color:#e82983;
+  transform: rotateY(52deg);
+  animation-delay: 1s;
+}
+.ring:nth-child(14) {
+  color:#d41e9f;
+  transform: rotateY(56deg);
+  animation-delay: 0.9s;
+}
+.ring:nth-child(15) {
+  color:#bd1aba;
+  transform: rotateY(60deg);
+  animation-delay: 0.8s;
+}
+.ring:nth-child(16) {
+  color:#b81ac0;
+  transform: rotateY(64deg);
+  animation-delay: 0.7s;
+}
+.ring:nth-child(17) {
+  color:#9c1fd7;
+  transform: rotateY(68deg);
+  animation-delay: 0.6s;
+}
+.ring:nth-child(18) {
+  color:#802aea;
+  transform: rotateY(72deg);
+  animation-delay: 0.5s;
+}
+.ring:nth-child(19) {
+  color:#7a2dee;
+  transform: rotateY(76deg);
+  animation-delay: 0.4s;
+}
+.ring:nth-child(20) {
+  color:#5f40f9;
+  transform: rotateY(80deg);
+  animation-delay: 0.3s;
+}
+.ring:nth-child(21) {
+  color:#4657fe;
+  transform: rotateY(84deg);
+  animation-delay: 0.2s;
+}
+.ring:nth-child(22) {
+  color:#425cfe;
+  transform: rotateY(88deg);
+  animation-delay: 0.1s;
+}
+.ring:nth-child(23) {
+  color:#2f77fb;
+  transform: rotateY(92deg);
+  animation-delay: 0s;
+}
\ No newline at end of file
diff --git a/3d-d20-die-with-pure-css/README.markdown b/3d-d20-die-with-pure-css/README.markdown
new file mode 100644
index 0000000..b80e995
--- /dev/null
+++ b/3d-d20-die-with-pure-css/README.markdown
@@ -0,0 +1,6 @@
+# 3d d20 die with pure CSS
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/vicentemundim/pen/cenIh](https://codepen.io/vicentemundim/pen/cenIh).
+
+ This is a 3d 20-sided die made with pure CSS. Each face is an equilateral triangle, that can be resized. You can also change de color of the die, as well as its opacity.
+
+The sum of the values on opposite faces is always 21.
\ No newline at end of file
diff --git a/3d-d20-die-with-pure-css/dist/index.html b/3d-d20-die-with-pure-css/dist/index.html
new file mode 100644
index 0000000..031574b
--- /dev/null
+++ b/3d-d20-die-with-pure-css/dist/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>3d d20 die with pure CSS</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="content">
+  <div class="die">
+    <figure class="face face-1"></figure>
+    <figure class="face face-2"></figure>
+    <figure class="face face-3"></figure>
+    <figure class="face face-4"></figure>
+    <figure class="face face-5"></figure>
+    <figure class="face face-6"></figure>
+    <figure class="face face-7"></figure>
+    <figure class="face face-8"></figure>
+    <figure class="face face-9"></figure>
+    <figure class="face face-10"></figure>
+    <figure class="face face-11"></figure>
+    <figure class="face face-12"></figure>
+    <figure class="face face-13"></figure>
+    <figure class="face face-14"></figure>
+    <figure class="face face-15"></figure>
+    <figure class="face face-16"></figure>
+    <figure class="face face-17"></figure>
+    <figure class="face face-18"></figure>
+    <figure class="face face-19"></figure>
+    <figure class="face face-20"></figure>
+  </div>
+</div>
+
+<h2>Click to show face:</h2>
+<ul>
+  <li><a href="1">1</a></li>
+  <li><a href="2">2</a></li>
+  <li><a href="3">3</a></li>
+  <li><a href="4">4</a></li>
+  <li><a href="5">5</a></li>
+  <li><a href="6">6</a></li>
+  <li><a href="7">7</a></li>
+  <li><a href="8">8</a></li>
+  <li><a href="9">9</a></li>
+  <li><a href="10">10</a></li>
+  <li><a href="11">11</a></li>
+  <li><a href="12">12</a></li>
+  <li><a href="13">13</a></li>
+  <li><a href="14">14</a></li>
+  <li><a href="15">15</a></li>
+  <li><a href="16">16</a></li>
+  <li><a href="17">17</a></li>
+  <li><a href="18">18</a></li>
+  <li><a href="19">19</a></li>
+  <li><a href="20">20</a></li>
+</ul>
+
+<a href="" class="randomize">Roll!</a>
+<!-- partial -->
+  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/3d-d20-die-with-pure-css/dist/script.js b/3d-d20-die-with-pure-css/dist/script.js
new file mode 100644
index 0000000..0335831
--- /dev/null
+++ b/3d-d20-die-with-pure-css/dist/script.js
@@ -0,0 +1,46 @@
+var $die = $('.die'),
+    sides = 20,
+    initialSide = 1,
+    lastFace,
+    timeoutId,
+    transitionDuration = 500, 
+    animationDuration  = 3000
+
+$('ul > li > a').click(function () {
+  reset()
+  rollTo($(this).attr('href'))
+  
+  return false
+})
+
+function randomFace() {
+  var face = Math.floor((Math.random() * sides)) + initialSide
+  lastFace = face == lastFace ? randomFace() : face
+  return face;
+}
+
+function rollTo(face) {
+  clearTimeout(timeoutId)
+  
+  $('ul > li > a').removeClass('active')
+  $('[href=' + face + ']').addClass('active')
+  
+  $die.attr('data-face', face)
+}
+
+function reset() {
+  $die.attr('data-face', null).removeClass('rolling')
+}
+
+$('.randomize, .die').click(function () {
+  $die.addClass('rolling')
+  clearTimeout(timeoutId)
+  
+  timeoutId = setTimeout(function () {
+    $die.removeClass('rolling')
+    
+    rollTo(randomFace())
+  }, animationDuration)
+  
+  return false
+})
\ No newline at end of file
diff --git a/3d-d20-die-with-pure-css/dist/style.css b/3d-d20-die-with-pure-css/dist/style.css
new file mode 100644
index 0000000..198a0b7
--- /dev/null
+++ b/3d-d20-die-with-pure-css/dist/style.css
@@ -0,0 +1,302 @@
+@-webkit-keyframes roll {
+  10% {
+    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+  }
+  30% {
+    -webkit-transform: rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px);
+            transform: rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px);
+  }
+  50% {
+    -webkit-transform: rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px);
+            transform: rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px);
+  }
+  70% {
+    -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(0deg);
+            transform: rotateX(360deg) rotateY(720deg) rotateZ(0deg);
+  }
+  90% {
+    -webkit-transform: rotateX(480deg) rotateY(960deg) rotateZ(0deg);
+            transform: rotateX(480deg) rotateY(960deg) rotateZ(0deg);
+  }
+}
+@keyframes roll {
+  10% {
+    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+  }
+  30% {
+    -webkit-transform: rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px);
+            transform: rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px);
+  }
+  50% {
+    -webkit-transform: rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px);
+            transform: rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px);
+  }
+  70% {
+    -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(0deg);
+            transform: rotateX(360deg) rotateY(720deg) rotateZ(0deg);
+  }
+  90% {
+    -webkit-transform: rotateX(480deg) rotateY(960deg) rotateZ(0deg);
+            transform: rotateX(480deg) rotateY(960deg) rotateZ(0deg);
+  }
+}
+body {
+  background: #333;
+  padding: 20px;
+}
+
+.content {
+  margin: auto auto;
+  position: relative;
+  width: 200px;
+  height: 200px;
+  -webkit-perspective: 1500px;
+          perspective: 1500px;
+}
+
+.die {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  transition: -webkit-transform 0.5s ease-out;
+  transition: transform 0.5s ease-out;
+  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
+  cursor: pointer;
+  -webkit-transform: rotateX(-53deg);
+          transform: rotateX(-53deg);
+}
+.die.rolling {
+  -webkit-animation: roll 3s linear;
+          animation: roll 3s linear;
+}
+.die[data-face="1"] {
+  -webkit-transform: rotateX(-53deg) rotateY(0deg);
+          transform: rotateX(-53deg) rotateY(0deg);
+}
+.die[data-face="2"] {
+  -webkit-transform: rotateX(-53deg) rotateY(72deg);
+          transform: rotateX(-53deg) rotateY(72deg);
+}
+.die[data-face="3"] {
+  -webkit-transform: rotateX(-53deg) rotateY(144deg);
+          transform: rotateX(-53deg) rotateY(144deg);
+}
+.die[data-face="4"] {
+  -webkit-transform: rotateX(-53deg) rotateY(216deg);
+          transform: rotateX(-53deg) rotateY(216deg);
+}
+.die[data-face="5"] {
+  -webkit-transform: rotateX(-53deg) rotateY(288deg);
+          transform: rotateX(-53deg) rotateY(288deg);
+}
+.die[data-face="16"] {
+  -webkit-transform: rotateX(127deg) rotateY(-72deg);
+          transform: rotateX(127deg) rotateY(-72deg);
+}
+.die[data-face="17"] {
+  -webkit-transform: rotateX(127deg) rotateY(-144deg);
+          transform: rotateX(127deg) rotateY(-144deg);
+}
+.die[data-face="18"] {
+  -webkit-transform: rotateX(127deg) rotateY(-216deg);
+          transform: rotateX(127deg) rotateY(-216deg);
+}
+.die[data-face="19"] {
+  -webkit-transform: rotateX(127deg) rotateY(-288deg);
+          transform: rotateX(127deg) rotateY(-288deg);
+}
+.die[data-face="20"] {
+  -webkit-transform: rotateX(127deg) rotateY(-360deg);
+          transform: rotateX(127deg) rotateY(-360deg);
+}
+.die[data-face="6"] {
+  -webkit-transform: rotateX(11deg) rotateZ(180deg) rotateY(0deg);
+          transform: rotateX(11deg) rotateZ(180deg) rotateY(0deg);
+}
+.die[data-face="7"] {
+  -webkit-transform: rotateX(11deg) rotateZ(180deg) rotateY(72deg);
+          transform: rotateX(11deg) rotateZ(180deg) rotateY(72deg);
+}
+.die[data-face="8"] {
+  -webkit-transform: rotateX(11deg) rotateZ(180deg) rotateY(144deg);
+          transform: rotateX(11deg) rotateZ(180deg) rotateY(144deg);
+}
+.die[data-face="9"] {
+  -webkit-transform: rotateX(11deg) rotateZ(180deg) rotateY(216deg);
+          transform: rotateX(11deg) rotateZ(180deg) rotateY(216deg);
+}
+.die[data-face="10"] {
+  -webkit-transform: rotateX(11deg) rotateZ(180deg) rotateY(288deg);
+          transform: rotateX(11deg) rotateZ(180deg) rotateY(288deg);
+}
+.die[data-face="11"] {
+  -webkit-transform: rotateX(11deg) rotateY(-252deg);
+          transform: rotateX(11deg) rotateY(-252deg);
+}
+.die[data-face="12"] {
+  -webkit-transform: rotateX(11deg) rotateY(-324deg);
+          transform: rotateX(11deg) rotateY(-324deg);
+}
+.die[data-face="13"] {
+  -webkit-transform: rotateX(11deg) rotateY(-396deg);
+          transform: rotateX(11deg) rotateY(-396deg);
+}
+.die[data-face="14"] {
+  -webkit-transform: rotateX(11deg) rotateY(-468deg);
+          transform: rotateX(11deg) rotateY(-468deg);
+}
+.die[data-face="15"] {
+  -webkit-transform: rotateX(11deg) rotateY(-540deg);
+          transform: rotateX(11deg) rotateY(-540deg);
+}
+.die .face {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  margin: 0 -50px;
+  border-left: 50px solid transparent;
+  border-right: 50px solid transparent;
+  border-bottom: 86px solid rgba(30, 180, 20, 0.75);
+  width: 0px;
+  height: 0px;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  counter-increment: steps 1;
+}
+.die .face:before {
+  content: counter(steps);
+  position: absolute;
+  top: 21.5px;
+  left: -100px;
+  color: #fff;
+  text-shadow: 1px 1px 3px #000;
+  font-size: 43px;
+  text-align: center;
+  line-height: 77.4px;
+  width: 200px;
+  height: 86px;
+}
+.die .face:nth-child(1) {
+  -webkit-transform: rotateY(0deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
+          transform: rotateY(0deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
+}
+.die .face:nth-child(2) {
+  -webkit-transform: rotateY(-72deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
+          transform: rotateY(-72deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
+}
+.die .face:nth-child(3) {
+  -webkit-transform: rotateY(-144deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
+          transform: rotateY(-144deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
+}
+.die .face:nth-child(4) {
+  -webkit-transform: rotateY(-216deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
+          transform: rotateY(-216deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
+}
+.die .face:nth-child(5) {
+  -webkit-transform: rotateY(-288deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
+          transform: rotateY(-288deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
+}
+.die .face:nth-child(16) {
+  -webkit-transform: rotateY(-108deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
+          transform: rotateY(-108deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
+}
+.die .face:nth-child(17) {
+  -webkit-transform: rotateY(-36deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
+          transform: rotateY(-36deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
+}
+.die .face:nth-child(18) {
+  -webkit-transform: rotateY(36deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
+          transform: rotateY(36deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
+}
+.die .face:nth-child(19) {
+  -webkit-transform: rotateY(108deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
+          transform: rotateY(108deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
+}
+.die .face:nth-child(20) {
+  -webkit-transform: rotateY(180deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
+          transform: rotateY(180deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
+}
+.die .face:nth-child(6) {
+  -webkit-transform: rotateY(360deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
+          transform: rotateY(360deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
+}
+.die .face:nth-child(7) {
+  -webkit-transform: rotateY(288deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
+          transform: rotateY(288deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
+}
+.die .face:nth-child(8) {
+  -webkit-transform: rotateY(216deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
+          transform: rotateY(216deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
+}
+.die .face:nth-child(9) {
+  -webkit-transform: rotateY(144deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
+          transform: rotateY(144deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
+}
+.die .face:nth-child(10) {
+  -webkit-transform: rotateY(72deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
+          transform: rotateY(72deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
+}
+.die .face:nth-child(11) {
+  -webkit-transform: rotateY(252deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
+          transform: rotateY(252deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
+}
+.die .face:nth-child(12) {
+  -webkit-transform: rotateY(324deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
+          transform: rotateY(324deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
+}
+.die .face:nth-child(13) {
+  -webkit-transform: rotateY(396deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
+          transform: rotateY(396deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
+}
+.die .face:nth-child(14) {
+  -webkit-transform: rotateY(468deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
+          transform: rotateY(468deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
+}
+.die .face:nth-child(15) {
+  -webkit-transform: rotateY(540deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
+          transform: rotateY(540deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
+}
+
+h2 {
+  color: #fafafa;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+ul > li {
+  display: inline-block;
+  margin: 10px 10px;
+}
+
+a {
+  text-align: center;
+  color: #fff;
+  text-decoration: none;
+  font-size: 25px;
+  font-weight: bold;
+  padding: 5px 15px;
+  width: 40px;
+  display: inline-block;
+  border: 1px solid #dcdcdc;
+  border-radius: 4px;
+  background-color: #999;
+}
+a.active {
+  background-color: #333;
+}
+a:hover {
+  background-color: #666;
+}
+a.randomize {
+  width: auto;
+  margin: 20px 10px;
+}
diff --git a/3d-d20-die-with-pure-css/license.txt b/3d-d20-die-with-pure-css/license.txt
new file mode 100644
index 0000000..9804b17
--- /dev/null
+++ b/3d-d20-die-with-pure-css/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Vicente Mundim (https://codepen.io/vicentemundim/pen/cenIh)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/3d-d20-die-with-pure-css/src/index.html b/3d-d20-die-with-pure-css/src/index.html
new file mode 100644
index 0000000..a82e65d
--- /dev/null
+++ b/3d-d20-die-with-pure-css/src/index.html
@@ -0,0 +1,50 @@
+<div class="content">
+  <div class="die">
+    <figure class="face face-1"></figure>
+    <figure class="face face-2"></figure>
+    <figure class="face face-3"></figure>
+    <figure class="face face-4"></figure>
+    <figure class="face face-5"></figure>
+    <figure class="face face-6"></figure>
+    <figure class="face face-7"></figure>
+    <figure class="face face-8"></figure>
+    <figure class="face face-9"></figure>
+    <figure class="face face-10"></figure>
+    <figure class="face face-11"></figure>
+    <figure class="face face-12"></figure>
+    <figure class="face face-13"></figure>
+    <figure class="face face-14"></figure>
+    <figure class="face face-15"></figure>
+    <figure class="face face-16"></figure>
+    <figure class="face face-17"></figure>
+    <figure class="face face-18"></figure>
+    <figure class="face face-19"></figure>
+    <figure class="face face-20"></figure>
+  </div>
+</div>
+
+<h2>Click to show face:</h2>
+<ul>
+  <li><a href="1">1</a></li>
+  <li><a href="2">2</a></li>
+  <li><a href="3">3</a></li>
+  <li><a href="4">4</a></li>
+  <li><a href="5">5</a></li>
+  <li><a href="6">6</a></li>
+  <li><a href="7">7</a></li>
+  <li><a href="8">8</a></li>
+  <li><a href="9">9</a></li>
+  <li><a href="10">10</a></li>
+  <li><a href="11">11</a></li>
+  <li><a href="12">12</a></li>
+  <li><a href="13">13</a></li>
+  <li><a href="14">14</a></li>
+  <li><a href="15">15</a></li>
+  <li><a href="16">16</a></li>
+  <li><a href="17">17</a></li>
+  <li><a href="18">18</a></li>
+  <li><a href="19">19</a></li>
+  <li><a href="20">20</a></li>
+</ul>
+
+<a href="" class="randomize">Roll!</a>
\ No newline at end of file
diff --git a/3d-d20-die-with-pure-css/src/script.js b/3d-d20-die-with-pure-css/src/script.js
new file mode 100644
index 0000000..1458f3e
--- /dev/null
+++ b/3d-d20-die-with-pure-css/src/script.js
@@ -0,0 +1,46 @@
+var $die = $('.die'),
+    sides = 20,
+    initialSide = 1,
+    lastFace,
+    timeoutId,
+    transitionDuration = 500, 
+    animationDuration  = 3000
+
+$('ul > li > a').click(function () {
+  reset()
+  rollTo($(this).attr('href'))
+  
+  return false
+})
+
+function randomFace() {
+  var face = Math.floor((Math.random() * sides)) + initialSide
+  lastFace = face == lastFace ? randomFace() : face
+  return face;
+}
+
+function rollTo(face) {
+  clearTimeout(timeoutId)
+  
+  $('ul > li > a').removeClass('active')
+  $('[href=' + face + ']').addClass('active')
+  
+  $die.attr('data-face', face)
+}
+
+function reset() {
+  $die.attr('data-face', null).removeClass('rolling')
+}
+
+$('.randomize, .die').click(function () {
+  $die.addClass('rolling')
+  clearTimeout(timeoutId)
+  
+  timeoutId = setTimeout(function () {
+    $die.removeClass('rolling')
+    
+    rollTo(randomFace())
+  }, animationDuration)
+  
+  return false
+})
diff --git a/3d-d20-die-with-pure-css/src/style.scss b/3d-d20-die-with-pure-css/src/style.scss
new file mode 100644
index 0000000..ec31d1c
--- /dev/null
+++ b/3d-d20-die-with-pure-css/src/style.scss
@@ -0,0 +1,188 @@
+$containerWidth: 200px;
+$containerHeight: $containerWidth;
+
+$faceWidth:  $containerWidth*0.5;
+$faceHeight: $faceWidth*0.86;
+
+$transitionDuration: 0.5s;
+$animationDuration:  3s;
+
+$angle: 53deg;
+$ringAngle: -11deg;
+$sideAngle: 360deg/5;
+$opacity: 0.75;
+$color: rgba(30, 180, 20, $opacity);
+
+$rotateX: -$angle;
+$translateZ: $faceWidth*0.335;
+$translateY: -$faceHeight*0.15;
+$translateRingZ: $faceWidth*0.75;
+$translateRingY: $faceHeight*0.78 + $translateY;
+$translateLowerZ: $translateZ;
+$translateLowerY: $faceHeight*0.78 + $translateRingY;
+
+@keyframes roll {
+  10% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) }
+  30% { transform: rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px) }
+  50% { transform: rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px) }
+  70% { transform: rotateX(360deg) rotateY(720deg) rotateZ(0deg) }
+  90% { transform: rotateX(480deg) rotateY(960deg) rotateZ(0deg) }
+}
+
+body {
+  background: #333;
+  padding: 20px;
+}
+
+.content {
+  margin: auto auto;
+  position: relative;
+  width: $containerWidth;
+  height: $containerHeight;
+  perspective: 1500px;
+}
+
+.die {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform $transitionDuration ease-out;
+  cursor: pointer;
+  
+  transform: rotateX($rotateX);
+  
+  &.rolling {
+    animation: roll $animationDuration linear;
+  }
+  
+  @for $i from 1 through 5 {
+    &[data-face="#{$i}"] {
+      $angleMultiplier: $i - 1;
+      transform: rotateX(-$angle) rotateY($sideAngle * $angleMultiplier);
+    }
+  }
+  
+  @for $i from 16 through 20 {
+    &[data-face="#{$i}"] {
+      $angleMultiplier: $i - 15;
+      transform: rotateX(-$angle + 180deg) rotateY(-$sideAngle * $angleMultiplier);
+    }
+  }
+  
+  @for $i from 6 through 10 {
+    &[data-face="#{$i}"] {
+      $angleMultiplier: $i - 6;
+      transform: rotateX(-$ringAngle) rotateZ(180deg) rotateY($sideAngle * $angleMultiplier);
+    }
+  }
+  
+  @for $i from 11 through 15 {
+    &[data-face="#{$i}"] {
+      $angleMultiplier: $i - 8;
+      transform: rotateX(-$ringAngle) rotateY(-$sideAngle * $angleMultiplier - $sideAngle/2);
+    }
+  }
+  
+  .face {
+    $horizontalMargin: -$faceWidth*0.5;
+    
+    position: absolute;
+    left: 50%;
+    top: 0;
+    margin: 0 $horizontalMargin;
+    border-left: $faceWidth*0.5 solid transparent;
+    border-right: $faceWidth*0.5 solid transparent;
+    border-bottom: $faceHeight solid $color;
+    width: 0px;
+    height: 0px;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    
+    counter-increment: steps 1;
+  
+    &:before {
+      content: counter(steps);
+      position: absolute;
+      top: $faceHeight*0.25;
+      left: -$faceWidth;
+      color: #fff;
+      text-shadow: 1px 1px 3px #000;
+      font-size: $faceHeight*0.5;
+      text-align: center;
+      line-height: $faceHeight*0.9;
+      width: $faceWidth*2;
+      height: $faceHeight;
+    }
+    
+    @for $i from 1 through 5 {
+      &:nth-child(#{$i}) {
+        $angleMultiplier: $i - 1;
+        transform: rotateY(-$sideAngle * $angleMultiplier) translateZ($translateZ) translateY($translateY) rotateX($angle);
+      }
+    }
+      
+    @for $i from 16 through 20 {
+      &:nth-child(#{$i}) {
+        $angleMultiplier: $i - 18;
+        transform: rotateY($sideAngle * $angleMultiplier + $sideAngle/2) translateZ($translateLowerZ) translateY($translateLowerY) rotateZ(180deg) rotateX($angle);
+      }
+    }
+      
+    @for $i from 6 through 10 {
+      &:nth-child(#{$i}) {
+        $angleMultiplier: $i - 11;
+        transform: rotateY(-$sideAngle * $angleMultiplier) translateZ($translateRingZ) translateY($translateRingY) rotateZ(180deg) rotateX($ringAngle);
+      }
+    }
+      
+    @for $i from 11 through 15 {
+      &:nth-child(#{$i}) {
+        $angleMultiplier: $i - 8;
+        transform: rotateY($sideAngle * $angleMultiplier + $sideAngle/2) translateZ($translateRingZ) translateY($translateRingY) rotateX($ringAngle);
+      }
+    }
+  }
+}
+
+h2 {
+  color: #fafafa;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  
+  > li {
+    display: inline-block;
+    margin: 10px 10px;
+  }
+}
+
+a {
+  text-align: center;
+  color: #fff;
+  text-decoration: none;
+  font-size: 25px;
+  font-weight: bold;
+  padding: 5px 15px;
+  width: 40px;
+  display: inline-block;
+  border: 1px solid #dcdcdc;
+  border-radius: 4px;
+  background-color: #999;
+      
+  &.active {
+    background-color: #333;
+  }
+      
+  &:hover {
+    background-color: #666;
+  }
+    
+  &.randomize {
+    width: auto;
+    margin: 20px 10px;
+  }
+}
diff --git a/3d-dashboardspline/README.markdown b/3d-dashboardspline/README.markdown
new file mode 100644
index 0000000..c5f7a88
--- /dev/null
+++ b/3d-dashboardspline/README.markdown
@@ -0,0 +1,5 @@
+# 3D Dashboard - Spline
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ricardoolivaalonso/pen/abmqrxY](https://codepen.io/ricardoolivaalonso/pen/abmqrxY).
+
+
diff --git a/3d-dashboardspline/dist/index.html b/3d-dashboardspline/dist/index.html
new file mode 100644
index 0000000..4ddb40c
--- /dev/null
+++ b/3d-dashboardspline/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 3D Dashboard - Spline</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<iframe src='https://my.spline.design/dashboard-c2284376c0356ff330e8e6ae686e1ba0/' frameborder='0'></iframe>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/3d-dashboardspline/dist/style.css b/3d-dashboardspline/dist/style.css
new file mode 100644
index 0000000..c95e084
--- /dev/null
+++ b/3d-dashboardspline/dist/style.css
@@ -0,0 +1,5 @@
+body,
+iframe {
+  width: 100%;
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/3d-dashboardspline/license.txt b/3d-dashboardspline/license.txt
new file mode 100644
index 0000000..25548e4
--- /dev/null
+++ b/3d-dashboardspline/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Ricardo Oliva Alonso (https://codepen.io/ricardoolivaalonso/pen/abmqrxY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/3d-dashboardspline/src/index.html b/3d-dashboardspline/src/index.html
new file mode 100644
index 0000000..79af700
--- /dev/null
+++ b/3d-dashboardspline/src/index.html
@@ -0,0 +1 @@
+<iframe src='https://my.spline.design/dashboard-c2284376c0356ff330e8e6ae686e1ba0/' frameborder='0'></iframe>
\ No newline at end of file
diff --git a/3d-dashboardspline/src/style.scss b/3d-dashboardspline/src/style.scss
new file mode 100644
index 0000000..5885cf7
--- /dev/null
+++ b/3d-dashboardspline/src/style.scss
@@ -0,0 +1,5 @@
+body,
+iframe{
+	width: 100%;
+	height: 100vh;
+}
\ No newline at end of file
diff --git a/3d-drag-out-menu-with-guitar/README.markdown b/3d-drag-out-menu-with-guitar/README.markdown
new file mode 100644
index 0000000..fdd9d39
--- /dev/null
+++ b/3d-drag-out-menu-with-guitar/README.markdown
@@ -0,0 +1,4 @@
+# 3D Drag out menu with guitar
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jcoulterdesign/pen/wLPZPM](https://codepen.io/jcoulterdesign/pen/wLPZPM).
+
+ A recreation of this pen  https://dribbble.com/shots/4773637-3D-flip-menu by Minh Pham
\ No newline at end of file
diff --git a/3d-drag-out-menu-with-guitar/dist/index.html b/3d-drag-out-menu-with-guitar/dist/index.html
new file mode 100644
index 0000000..833e7bc
--- /dev/null
+++ b/3d-drag-out-menu-with-guitar/dist/index.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>3D Drag out menu with guitar</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h4>Drag the phone right and left</h4>
+<div class='phone'>
+  <div class='phone_frame'></div>
+  <canvas class='grain'></canvas>
+  <div class='guitar'></div>
+  <div class='phone_inner'>
+    <div class='phone_inner__nav'>
+      <div class='menu'></div>
+      <h3>Product details</h3>
+    </div>
+    <div class='phone_inner__cube'>
+      <div class='face--front'>
+        <div class='shadow'>
+          <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/gshadow.png'>
+        </div>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h1>Fender</h1>
+        <h2>Fender American Elite Strat</h2>
+      </div>
+      <div class='face--left'>
+        <div class='logo'>
+          <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/logoStrings.png'>
+        </div>
+        <ul class='big'>
+          <li class='active'>Guitars</li>
+          <li>Basses</li>
+          <li>Amps</li>
+          <li>Pedals</li>
+          <li>Other</li>
+        </ul>
+        <ul class='small'>
+          <li>About</li>
+          <li>Support</li>
+          <li>Terms</li>
+          <li>FAQ</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/3d-drag-out-menu-with-guitar/dist/script.js b/3d-drag-out-menu-with-guitar/dist/script.js
new file mode 100644
index 0000000..5296f3c
--- /dev/null
+++ b/3d-drag-out-menu-with-guitar/dist/script.js
@@ -0,0 +1,327 @@
+dragging = false;
+
+'use strict';
+
+///console.clear();
+
+class Grain {
+  constructor(el) {
+    /**
+                   * Options
+                   * Increase the pattern size if visible pattern
+                   */
+    this.patternSize = 150;
+    this.patternScaleX = 1;
+    this.patternScaleY = 1;
+    this.patternRefreshInterval = 3; // 8
+    this.patternAlpha = 28; // int between 0 and 255,
+
+    /**
+    * Create canvas
+    */
+    this.canvas = el;
+    this.ctx = this.canvas.getContext('2d');
+    this.ctx.scale(this.patternScaleX, this.patternScaleY);
+
+    /**
+                                                            * Create a canvas that will be used to generate grain and used as a
+                                                            * pattern on the main canvas.
+                                                            */
+    this.patternCanvas = document.createElement('canvas');
+    this.patternCanvas.width = this.patternSize;
+    this.patternCanvas.height = this.patternSize;
+    this.patternCtx = this.patternCanvas.getContext('2d');
+    this.patternData = this.patternCtx.createImageData(this.patternSize, this.patternSize);
+    this.patternPixelDataLength = this.patternSize * this.patternSize * 4; // rgba = 4
+
+    /**
+    * Prebind prototype function, so later its easier to user
+    */
+    this.resize = this.resize.bind(this);
+    this.loop = this.loop.bind(this);
+
+    this.frame = 0;
+
+    window.addEventListener('resize', this.resize);
+    this.resize();
+
+    window.requestAnimationFrame(this.loop);
+  }
+
+  resize() {
+    this.canvas.width = window.innerWidth * devicePixelRatio;
+    this.canvas.height = window.innerHeight * devicePixelRatio;
+  }
+
+  update() {
+    const { patternPixelDataLength, patternData, patternAlpha, patternCtx } = this;
+
+    // put a random shade of gray into every pixel of the pattern
+    for (let i = 0; i < patternPixelDataLength; i += 4) {
+      // const value = (Math.random() * 255) | 0;
+      const value = Math.random() * 255;
+
+      patternData.data[i] = value;
+      patternData.data[i + 1] = value;
+      patternData.data[i + 2] = value;
+      patternData.data[i + 3] = patternAlpha;
+    }
+
+    patternCtx.putImageData(patternData, 0, 0);
+  }
+
+  draw() {
+    const { ctx, patternCanvas, canvas, viewHeight } = this;
+    const { width, height } = canvas;
+
+    // clear canvas
+    ctx.clearRect(0, 0, width, height);
+
+    // fill the canvas using the pattern
+    ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat');
+    ctx.fillRect(0, 0, width, height);
+  }
+
+  loop() {
+    // only update grain every n frames
+    const shouldDraw = ++this.frame % this.patternRefreshInterval === 0;
+    if (shouldDraw) {
+      this.update();
+      this.draw();
+    }
+
+    window.requestAnimationFrame(this.loop);
+  }}
+
+
+
+/**
+      * Initiate Grain
+      */
+const el = document.querySelector('.grain');
+const grain = new Grain(el);
+
+
+
+$('.phone').mousedown(function (e) {
+  initX = e.clientX;
+  dragging = true;
+});
+
+$('html').mouseup(function () {
+  dragging = false;
+  $('.dynamicCursor').css('width', '18px');
+});
+$('.phone').mousemove(function (e) {
+  if (dragging) {
+    let mouseX = e.clientX;
+    difference = mouseX - initX;
+
+    console.log(difference);
+
+    $('.dynamicCursor').css('width', Math.abs(difference) + 'px');
+
+    if (difference > 60) {
+      $('.phone').addClass('open');
+    }
+
+    if (difference < -60) {
+      $('.phone').removeClass('open');
+    }
+
+  }
+});
+
+function drawMouseSpeedDemo() {
+  var mrefreshinterval = 30; // update display every 500ms
+  var lastmousex = -1;
+  var lastmousey = -1;
+  var lastmousetime;
+  var mousetravel = 0;
+  var mpoints = [];
+  var mpoints_max = 30;
+  var direction;
+
+  $('html').mousemove(function (e) {
+    var mousex = e.pageX;
+    var mousey = e.pageY;
+    if (lastmousex > -1) {
+      mousetravel += Math.max(Math.abs(mousex - lastmousex), Math.abs(mousey - lastmousey));
+    }
+    // console.log(mousex-lastmousex)
+
+    if (mousex - lastmousex > 0) {
+      direction = '+';
+    } else {
+      direction = '-';
+    }
+
+    //console.log(direction);
+
+    lastmousex = mousex;
+    lastmousey = mousey;
+  });
+  var mdraw = function () {
+    var md = new Date();
+    var timenow = md.getTime();
+    if (lastmousetime && lastmousetime != timenow) {
+      var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
+      mpoints.push(pps);
+      if (mpoints.length > mpoints_max)
+      mpoints.splice(0, 1);
+      mousetravel = 0;
+      //console.log(pps)
+      if (dragging) {
+
+      }
+
+    }
+    lastmousetime = timenow;
+    setTimeout(mdraw, mrefreshinterval);
+  };
+  // We could use setInterval instead, but I prefer to do it this way
+  setTimeout(mdraw, mrefreshinterval);
+};
+
+drawMouseSpeedDemo();
+
+
+/* -------------------------------------------------
+                      
+                      Dynamic cursor
+                      
+                      --------------------------------------------------- */
+
+const cursorSettings = {
+  'class': 'dynamicCursor',
+  'size': '18',
+  'expandedSize': '40',
+  'expandSpeed': 0.4,
+  'background': 'rgba(161, 142, 218, 0.25)',
+  'opacity': '1',
+  'transitionTime': '1.4s',
+  'transitionEase': 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
+  'borderWidth': '0',
+  'borderColor': 'black',
+  'iconSize': '11px',
+  'iconColor': 'white',
+  'triggerElements': {
+    'trigger': {
+      'className': 'trigger',
+      'icon': '<i class="fa fa-plus"></i>' },
+
+    'trigger2': {
+      'className': 'slider_inner',
+      'icon': '<i class="fa fa-arrows-h"></i>' } } };
+
+
+
+
+
+function dynamicCursor(options) {
+
+  document.write('<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">');
+
+  var hold;
+  cursor = document.createElement('div');
+  let cursorIcon = document.createElement('div');
+
+  cursorIcon.classList.add('cursorIcon');
+  cursorIcon.style.position = 'absolute';
+  cursorIcon.style.fontFamily = 'Raleway';
+  cursorIcon.style.textTransform = 'uppercase';
+  cursorIcon.style.fontWeight = '800';
+  cursorIcon.style.textAlign = 'center';
+  cursorIcon.style.top = '50%';
+  cursorIcon.style.width = '100%';
+  cursorIcon.style.transform = 'translateY(-50%)';
+  cursorIcon.style.color = options.iconColor;
+  cursorIcon.style.fontSize = options.iconSize;
+  cursorIcon.style.opacity = 0;
+  cursorIcon.style.transition = `opacity ${options.expandSpeed}s`;
+
+  cursor.classList.add(options.class);
+  cursor.style.boxSizing = 'border-box';
+  cursor.style.width = `${options.size}px`;
+  cursor.style.height = `${options.size}px`;
+  cursor.style.borderRadius = `${options.expandedSize}px`;
+  cursor.style.opacity = 0;
+
+  cursor.style.pointerEvents = 'none';
+  cursor.style.zIndex = 999;
+  cursor.style.transition = `transform ${options.transitionTime} ${options.transitionEase}, width 0s, height ${options.expandSpeed}s .2s, opacity 1s .2s`;
+  cursor.style.border = `${options.borderWidth}px solid ${options.borderColor}`;
+  cursor.style.position = 'fixed';
+  cursor.style.background = options.background;
+
+  cursor.appendChild(cursorIcon);
+  document.body.appendChild(cursor);
+
+  setTimeout(function () {
+    cursor.style.opacity = options.opacity;
+  }, 500);
+
+  var idle;
+
+  document.onmousemove = e => {
+    console.log('test');
+    x = e.pageX;
+    y = e.pageY;
+
+    cursor.style.opacity = options.opacity;
+    clearInterval(idle);
+
+    idle = setTimeout(function () {
+      cursor.style.opacity = 0;
+    }, 4000);
+
+    cursor.style.top = '0';
+    cursor.style.left = '0';
+    cursor.style.transform = `translateX(calc(${x}px - 50%)) translateY(calc(${y}px - 50%))`;
+  };
+
+  for (i in options.triggerElements) {
+
+    let trigger = $(`.${options.triggerElements[i].className}`);
+
+    console.log(trigger);
+
+
+    let icon = options.triggerElements[i].icon;
+
+    if (!trigger) {
+      console.warn('You dont have any triggers');
+    } else {
+      trigger.each(function (el) {
+
+        console.log();
+        trigger[el].style.cursor = 'default';
+        trigger[el].addEventListener('mouseover', () => {
+          console.log('over');
+          cursor.style.width = `${options.expandedSize}px`;
+          cursor.style.height = `${options.expandedSize}px`;
+          cursorIcon.innerHTML = icon;
+          cursorIcon.style.opacity = 1;
+
+
+          console.log($(this));
+
+
+        });
+
+        trigger[el].addEventListener('mouseout', () => {
+          cursor.style.width = `${options.size}px`;
+          cursor.style.height = `${options.size}px`;
+          cursorIcon.style.opacity = 0;
+        });
+      });
+
+    }
+  }
+}
+
+dynamicCursor(cursorSettings);
+
+$('.back').click(function () {
+  $(this).parent().parent().removeClass('expand');
+});
\ No newline at end of file
diff --git a/3d-drag-out-menu-with-guitar/dist/style.css b/3d-drag-out-menu-with-guitar/dist/style.css
new file mode 100644
index 0000000..8223cd4
--- /dev/null
+++ b/3d-drag-out-menu-with-guitar/dist/style.css
@@ -0,0 +1,746 @@
+@import url("https://fonts.googleapis.com/css?family=Heebo:400,500,800,900&display=swap");
+:root {
+  --bg: #efdece;
+}
+
+h4 {
+  color: white;
+  margin: 0;
+  padding-top: 20px;
+  text-align: center;
+}
+
+canvas {
+  position: absolute;
+  z-index: 1;
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.dynamicCursor {
+  max-width: 50px;
+  min-width: 18px;
+  transition: width 0s;
+  background: transparent !important;
+  border: 2px solid white !important;
+}
+
+@-webkit-keyframes in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+body {
+  padding: 0;
+  background: #a92913;
+  padding: 0;
+  margin: 0;
+  box-shadow: 50vw 0 #381313 inset;
+  height: 100vh;
+  font-family: 'Heebo', sans-serif;
+  -webkit-user-select: none;
+  /* Chrome all / Safari all */
+  -moz-user-select: none;
+  /* Firefox all */
+  -ms-user-select: none;
+  /* IE 10+ */
+  user-select: none;
+  /* Likely future */
+}
+body .phone {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+body .guitar {
+  width: 85px;
+  height: 175px;
+  z-index: 10;
+  position: absolute;
+  transition: all 0.7s 0.3s cubic-bezier(0.5, 0.005, 0.075, 0.985), transform 0.1s 0.7s, -webkit-transform 0.1s;
+  left: 92px;
+  -webkit-transform: scale(1.8);
+          transform: scale(1.8);
+  top: 130px;
+  background-size: 1920px !important;
+  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/gt.png);
+  -webkit-animation: guitar2 0.5s 0s steps(23, end) forwards;
+          animation: guitar2 0.5s 0s steps(23, end) forwards;
+}
+@-webkit-keyframes guitar {
+  0% {
+    background-position: 0 0;
+    -webkit-transform: scale(1.8);
+            transform: scale(1.8);
+  }
+  10% {
+    -webkit-transform: scale(1.8);
+            transform: scale(1.8);
+  }
+  100% {
+    background-position: -1840px 0;
+    -webkit-transform: scale(1.8);
+            transform: scale(1.8);
+  }
+}
+@keyframes guitar {
+  0% {
+    background-position: 0 0;
+    -webkit-transform: scale(1.8);
+            transform: scale(1.8);
+  }
+  10% {
+    -webkit-transform: scale(1.8);
+            transform: scale(1.8);
+  }
+  100% {
+    background-position: -1840px 0;
+    -webkit-transform: scale(1.8);
+            transform: scale(1.8);
+  }
+}
+@-webkit-keyframes guitar2 {
+  0% {
+    background-position: -1840px 0;
+    -webkit-transform: scale(1.8);
+            transform: scale(1.8);
+  }
+  10% {
+    -webkit-transform: scale(1.8);
+            transform: scale(1.8);
+  }
+  100% {
+    background-position: 0 0;
+    -webkit-transform: scale(1.8);
+            transform: scale(1.8);
+  }
+}
+@keyframes guitar2 {
+  0% {
+    background-position: -1840px 0;
+    -webkit-transform: scale(1.8);
+            transform: scale(1.8);
+  }
+  10% {
+    -webkit-transform: scale(1.8);
+            transform: scale(1.8);
+  }
+  100% {
+    background-position: 0 0;
+    -webkit-transform: scale(1.8);
+            transform: scale(1.8);
+  }
+}
+body .phone {
+  opacity: 0;
+  -webkit-animation: in 1s .5s forwards;
+          animation: in 1s .5s forwards;
+  width: 245px;
+  height: 489px;
+  -webkit-perspective: 900;
+          perspective: 900;
+  border-radius: 24px;
+  overflow: hidden;
+  border-radius: 40px;
+  box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.3);
+  -webkit-box-reflect: below 4px linear-gradient(to top, white -120%, rgba(255, 255, 255, 0) 25%);
+}
+body .phone.open .guitar {
+  -webkit-animation: guitar 0.5s 0s steps(23, end) forwards;
+          animation: guitar 0.5s 0s steps(23, end) forwards;
+}
+body .phone.open .phone_inner__nav {
+  left: 170px;
+}
+body .phone.open .phone_inner__nav h3 {
+  opacity: 0;
+}
+body .phone.open .phone_inner__cube {
+  -webkit-transform: rotateY(90deg);
+          transform: rotateY(90deg);
+  left: 50px;
+}
+body .phone.open .phone_inner__cube h2 {
+  opacity: 0;
+  -webkit-transform: translateZ(50px);
+          transform: translateZ(50px);
+}
+body .phone_frame {
+  width: 245px;
+  height: 489px;
+  position: absolute;
+  z-index: 2;
+  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/frameIphone.png");
+  pointer-events: none;
+}
+body .phone_inner {
+  width: 225px;
+  height: 475px;
+  position: relative;
+  left: 10px;
+  top: 6px;
+  overflow: hidden;
+  -webkit-transform-style: preserve-3D;
+          transform-style: preserve-3D;
+  background: #ada59c;
+}
+body .phone_inner__nav {
+  position: absolute;
+  z-index: 2;
+  text-transform: uppercase;
+  text-align: center;
+  width: 100%;
+  font-weight: 400;
+  transition: all 0.5s cubic-bezier(0.615, 0, 0.28, 1.005);
+  top: 39px;
+  left: 0;
+}
+body .phone_inner__nav h3 {
+  margin: 0;
+  font-size: 9px;
+  opacity: 1;
+  transition: all 0.5s cubic-bezier(0.615, 0, 0.28, 1.005);
+}
+body .phone_inner__nav .menu {
+  width: 18px;
+  height: 2px;
+  background: #111114;
+  position: absolute;
+  left: 16px;
+}
+body .phone_inner__nav .menu:after {
+  content: '';
+  display: block;
+  position: relative;
+  top: 2px;
+  width: 18px;
+  height: 2px;
+  background: #111114;
+}
+body .phone_inner__nav .menu:before {
+  content: '';
+  display: block;
+  position: relative;
+  top: 9px;
+  width: 10px;
+  height: 2px;
+  background: #111114;
+}
+body .phone_inner__cube {
+  -webkit-transform-style: preserve-3D;
+          transform-style: preserve-3D;
+  height: 100%;
+  position: relative;
+  left: 0;
+  transition: all 0.509s cubic-bezier(0.615, 0, 0.28, 1.005);
+}
+body .phone_inner__cube .shadow img {
+  position: absolute;
+  width: 210px;
+  top: 90px;
+  left: 20px;
+}
+body .phone_inner__cube h1 {
+  text-transform: uppercase;
+  margin: 0;
+  -webkit-transform-origin: 0 50%;
+          transform-origin: 0 50%;
+  position: absolute;
+  line-height: 0;
+  left: 47px;
+  letter-spacing: 3px;
+  top: 92px;
+  color: #c6bdad;
+  font-size: 55px;
+  text-shadow: 0 0 1px #bdb5ad;
+  -webkit-transform-style: preserve-3D;
+          transform-style: preserve-3D;
+}
+body .phone_inner__cube h1:nth-of-type(1) {
+  -webkit-transform: rotate(90deg) translateZ(-0.9583333333px);
+          transform: rotate(90deg) translateZ(-0.9583333333px);
+}
+body .phone_inner__cube h1:nth-of-type(2) {
+  -webkit-transform: rotate(90deg) translateZ(-0.9166666667px);
+          transform: rotate(90deg) translateZ(-0.9166666667px);
+}
+body .phone_inner__cube h1:nth-of-type(3) {
+  -webkit-transform: rotate(90deg) translateZ(-0.875px);
+          transform: rotate(90deg) translateZ(-0.875px);
+}
+body .phone_inner__cube h1:nth-of-type(4) {
+  -webkit-transform: rotate(90deg) translateZ(-0.8333333333px);
+          transform: rotate(90deg) translateZ(-0.8333333333px);
+}
+body .phone_inner__cube h1:nth-of-type(5) {
+  -webkit-transform: rotate(90deg) translateZ(-0.7916666667px);
+          transform: rotate(90deg) translateZ(-0.7916666667px);
+}
+body .phone_inner__cube h1:nth-of-type(6) {
+  -webkit-transform: rotate(90deg) translateZ(-0.75px);
+          transform: rotate(90deg) translateZ(-0.75px);
+}
+body .phone_inner__cube h1:nth-of-type(7) {
+  -webkit-transform: rotate(90deg) translateZ(-0.7083333333px);
+          transform: rotate(90deg) translateZ(-0.7083333333px);
+}
+body .phone_inner__cube h1:nth-of-type(8) {
+  -webkit-transform: rotate(90deg) translateZ(-0.6666666667px);
+          transform: rotate(90deg) translateZ(-0.6666666667px);
+}
+body .phone_inner__cube h1:nth-of-type(9) {
+  -webkit-transform: rotate(90deg) translateZ(-0.625px);
+          transform: rotate(90deg) translateZ(-0.625px);
+}
+body .phone_inner__cube h1:nth-of-type(10) {
+  -webkit-transform: rotate(90deg) translateZ(-0.5833333333px);
+          transform: rotate(90deg) translateZ(-0.5833333333px);
+}
+body .phone_inner__cube h1:nth-of-type(11) {
+  -webkit-transform: rotate(90deg) translateZ(-0.5416666667px);
+          transform: rotate(90deg) translateZ(-0.5416666667px);
+}
+body .phone_inner__cube h1:nth-of-type(12) {
+  -webkit-transform: rotate(90deg) translateZ(-0.5px);
+          transform: rotate(90deg) translateZ(-0.5px);
+}
+body .phone_inner__cube h1:nth-of-type(13) {
+  -webkit-transform: rotate(90deg) translateZ(-0.4583333333px);
+          transform: rotate(90deg) translateZ(-0.4583333333px);
+}
+body .phone_inner__cube h1:nth-of-type(14) {
+  -webkit-transform: rotate(90deg) translateZ(-0.4166666667px);
+          transform: rotate(90deg) translateZ(-0.4166666667px);
+}
+body .phone_inner__cube h1:nth-of-type(15) {
+  -webkit-transform: rotate(90deg) translateZ(-0.375px);
+          transform: rotate(90deg) translateZ(-0.375px);
+}
+body .phone_inner__cube h1:nth-of-type(16) {
+  -webkit-transform: rotate(90deg) translateZ(-0.3333333333px);
+          transform: rotate(90deg) translateZ(-0.3333333333px);
+}
+body .phone_inner__cube h1:nth-of-type(17) {
+  -webkit-transform: rotate(90deg) translateZ(-0.2916666667px);
+          transform: rotate(90deg) translateZ(-0.2916666667px);
+}
+body .phone_inner__cube h1:nth-of-type(18) {
+  -webkit-transform: rotate(90deg) translateZ(-0.25px);
+          transform: rotate(90deg) translateZ(-0.25px);
+}
+body .phone_inner__cube h1:nth-of-type(19) {
+  -webkit-transform: rotate(90deg) translateZ(-0.2083333333px);
+          transform: rotate(90deg) translateZ(-0.2083333333px);
+}
+body .phone_inner__cube h1:nth-of-type(20) {
+  -webkit-transform: rotate(90deg) translateZ(-0.1666666667px);
+          transform: rotate(90deg) translateZ(-0.1666666667px);
+}
+body .phone_inner__cube h1:nth-of-type(21) {
+  -webkit-transform: rotate(90deg) translateZ(-0.125px);
+          transform: rotate(90deg) translateZ(-0.125px);
+}
+body .phone_inner__cube h1:nth-of-type(22) {
+  -webkit-transform: rotate(90deg) translateZ(-0.0833333333px);
+          transform: rotate(90deg) translateZ(-0.0833333333px);
+}
+body .phone_inner__cube h1:nth-of-type(23) {
+  -webkit-transform: rotate(90deg) translateZ(-0.0416666667px);
+          transform: rotate(90deg) translateZ(-0.0416666667px);
+}
+body .phone_inner__cube h1:nth-of-type(24) {
+  -webkit-transform: rotate(90deg) translateZ(0px);
+          transform: rotate(90deg) translateZ(0px);
+}
+body .phone_inner__cube h1:nth-of-type(25) {
+  -webkit-transform: rotate(90deg) translateZ(0.0416666667px);
+          transform: rotate(90deg) translateZ(0.0416666667px);
+}
+body .phone_inner__cube h1:nth-of-type(26) {
+  -webkit-transform: rotate(90deg) translateZ(0.0833333333px);
+          transform: rotate(90deg) translateZ(0.0833333333px);
+}
+body .phone_inner__cube h1:nth-of-type(27) {
+  -webkit-transform: rotate(90deg) translateZ(0.125px);
+          transform: rotate(90deg) translateZ(0.125px);
+}
+body .phone_inner__cube h1:nth-of-type(28) {
+  -webkit-transform: rotate(90deg) translateZ(0.1666666667px);
+          transform: rotate(90deg) translateZ(0.1666666667px);
+}
+body .phone_inner__cube h1:nth-of-type(29) {
+  -webkit-transform: rotate(90deg) translateZ(0.2083333333px);
+          transform: rotate(90deg) translateZ(0.2083333333px);
+}
+body .phone_inner__cube h1:nth-of-type(30) {
+  -webkit-transform: rotate(90deg) translateZ(0.25px);
+          transform: rotate(90deg) translateZ(0.25px);
+}
+body .phone_inner__cube h1:nth-of-type(31) {
+  -webkit-transform: rotate(90deg) translateZ(0.2916666667px);
+          transform: rotate(90deg) translateZ(0.2916666667px);
+}
+body .phone_inner__cube h1:nth-of-type(32) {
+  -webkit-transform: rotate(90deg) translateZ(0.3333333333px);
+          transform: rotate(90deg) translateZ(0.3333333333px);
+}
+body .phone_inner__cube h1:nth-of-type(33) {
+  -webkit-transform: rotate(90deg) translateZ(0.375px);
+          transform: rotate(90deg) translateZ(0.375px);
+}
+body .phone_inner__cube h1:nth-of-type(34) {
+  -webkit-transform: rotate(90deg) translateZ(0.4166666667px);
+          transform: rotate(90deg) translateZ(0.4166666667px);
+}
+body .phone_inner__cube h1:nth-of-type(35) {
+  -webkit-transform: rotate(90deg) translateZ(0.4583333333px);
+          transform: rotate(90deg) translateZ(0.4583333333px);
+}
+body .phone_inner__cube h1:nth-of-type(36) {
+  -webkit-transform: rotate(90deg) translateZ(0.5px);
+          transform: rotate(90deg) translateZ(0.5px);
+}
+body .phone_inner__cube h1:nth-of-type(37) {
+  -webkit-transform: rotate(90deg) translateZ(0.5416666667px);
+          transform: rotate(90deg) translateZ(0.5416666667px);
+}
+body .phone_inner__cube h1:nth-of-type(38) {
+  -webkit-transform: rotate(90deg) translateZ(0.5833333333px);
+          transform: rotate(90deg) translateZ(0.5833333333px);
+}
+body .phone_inner__cube h1:nth-of-type(39) {
+  -webkit-transform: rotate(90deg) translateZ(0.625px);
+          transform: rotate(90deg) translateZ(0.625px);
+}
+body .phone_inner__cube h1:nth-of-type(40) {
+  -webkit-transform: rotate(90deg) translateZ(0.6666666667px);
+          transform: rotate(90deg) translateZ(0.6666666667px);
+}
+body .phone_inner__cube h1:nth-of-type(41) {
+  -webkit-transform: rotate(90deg) translateZ(0.7083333333px);
+          transform: rotate(90deg) translateZ(0.7083333333px);
+}
+body .phone_inner__cube h1:nth-of-type(42) {
+  -webkit-transform: rotate(90deg) translateZ(0.75px);
+          transform: rotate(90deg) translateZ(0.75px);
+}
+body .phone_inner__cube h1:nth-of-type(43) {
+  -webkit-transform: rotate(90deg) translateZ(0.7916666667px);
+          transform: rotate(90deg) translateZ(0.7916666667px);
+}
+body .phone_inner__cube h1:nth-of-type(44) {
+  -webkit-transform: rotate(90deg) translateZ(0.8333333333px);
+          transform: rotate(90deg) translateZ(0.8333333333px);
+}
+body .phone_inner__cube h1:nth-of-type(45) {
+  -webkit-transform: rotate(90deg) translateZ(0.875px);
+          transform: rotate(90deg) translateZ(0.875px);
+}
+body .phone_inner__cube h1:nth-of-type(46) {
+  -webkit-transform: rotate(90deg) translateZ(0.9166666667px);
+          transform: rotate(90deg) translateZ(0.9166666667px);
+}
+body .phone_inner__cube h1:nth-of-type(47) {
+  -webkit-transform: rotate(90deg) translateZ(0.9583333333px);
+          transform: rotate(90deg) translateZ(0.9583333333px);
+}
+body .phone_inner__cube h1:nth-of-type(48) {
+  -webkit-transform: rotate(90deg) translateZ(1px);
+          transform: rotate(90deg) translateZ(1px);
+}
+body .phone_inner__cube h1:nth-of-type(49) {
+  -webkit-transform: rotate(90deg) translateZ(1.0416666667px);
+          transform: rotate(90deg) translateZ(1.0416666667px);
+}
+body .phone_inner__cube h1:nth-of-type(50) {
+  -webkit-transform: rotate(90deg) translateZ(1.0833333333px);
+          transform: rotate(90deg) translateZ(1.0833333333px);
+}
+body .phone_inner__cube h1:nth-of-type(51) {
+  -webkit-transform: rotate(90deg) translateZ(1.125px);
+          transform: rotate(90deg) translateZ(1.125px);
+}
+body .phone_inner__cube h1:nth-of-type(52) {
+  -webkit-transform: rotate(90deg) translateZ(1.1666666667px);
+          transform: rotate(90deg) translateZ(1.1666666667px);
+}
+body .phone_inner__cube h1:nth-of-type(53) {
+  -webkit-transform: rotate(90deg) translateZ(1.2083333333px);
+          transform: rotate(90deg) translateZ(1.2083333333px);
+}
+body .phone_inner__cube h1:nth-of-type(54) {
+  -webkit-transform: rotate(90deg) translateZ(1.25px);
+          transform: rotate(90deg) translateZ(1.25px);
+}
+body .phone_inner__cube h1:nth-of-type(55) {
+  -webkit-transform: rotate(90deg) translateZ(1.2916666667px);
+          transform: rotate(90deg) translateZ(1.2916666667px);
+}
+body .phone_inner__cube h1:nth-of-type(56) {
+  -webkit-transform: rotate(90deg) translateZ(1.3333333333px);
+          transform: rotate(90deg) translateZ(1.3333333333px);
+}
+body .phone_inner__cube h1:nth-of-type(57) {
+  -webkit-transform: rotate(90deg) translateZ(1.375px);
+          transform: rotate(90deg) translateZ(1.375px);
+}
+body .phone_inner__cube h1:nth-of-type(58) {
+  -webkit-transform: rotate(90deg) translateZ(1.4166666667px);
+          transform: rotate(90deg) translateZ(1.4166666667px);
+}
+body .phone_inner__cube h1:nth-of-type(59) {
+  -webkit-transform: rotate(90deg) translateZ(1.4583333333px);
+          transform: rotate(90deg) translateZ(1.4583333333px);
+}
+body .phone_inner__cube h1:nth-of-type(60) {
+  -webkit-transform: rotate(90deg) translateZ(1.5px);
+          transform: rotate(90deg) translateZ(1.5px);
+}
+body .phone_inner__cube h1:nth-of-type(61) {
+  -webkit-transform: rotate(90deg) translateZ(1.5416666667px);
+          transform: rotate(90deg) translateZ(1.5416666667px);
+}
+body .phone_inner__cube h1:nth-of-type(62) {
+  -webkit-transform: rotate(90deg) translateZ(1.5833333333px);
+          transform: rotate(90deg) translateZ(1.5833333333px);
+}
+body .phone_inner__cube h1:nth-of-type(63) {
+  -webkit-transform: rotate(90deg) translateZ(1.625px);
+          transform: rotate(90deg) translateZ(1.625px);
+}
+body .phone_inner__cube h1:nth-of-type(64) {
+  -webkit-transform: rotate(90deg) translateZ(1.6666666667px);
+          transform: rotate(90deg) translateZ(1.6666666667px);
+}
+body .phone_inner__cube h1:nth-of-type(65) {
+  -webkit-transform: rotate(90deg) translateZ(1.7083333333px);
+          transform: rotate(90deg) translateZ(1.7083333333px);
+}
+body .phone_inner__cube h1:nth-of-type(66) {
+  -webkit-transform: rotate(90deg) translateZ(1.75px);
+          transform: rotate(90deg) translateZ(1.75px);
+}
+body .phone_inner__cube h1:nth-of-type(67) {
+  -webkit-transform: rotate(90deg) translateZ(1.7916666667px);
+          transform: rotate(90deg) translateZ(1.7916666667px);
+}
+body .phone_inner__cube h1:nth-of-type(68) {
+  -webkit-transform: rotate(90deg) translateZ(1.8333333333px);
+          transform: rotate(90deg) translateZ(1.8333333333px);
+}
+body .phone_inner__cube h1:nth-of-type(69) {
+  -webkit-transform: rotate(90deg) translateZ(1.875px);
+          transform: rotate(90deg) translateZ(1.875px);
+}
+body .phone_inner__cube h1:nth-of-type(70) {
+  -webkit-transform: rotate(90deg) translateZ(1.9166666667px);
+          transform: rotate(90deg) translateZ(1.9166666667px);
+}
+body .phone_inner__cube h1:nth-of-type(71) {
+  -webkit-transform: rotate(90deg) translateZ(1.9583333333px);
+          transform: rotate(90deg) translateZ(1.9583333333px);
+}
+body .phone_inner__cube h1:nth-of-type(72) {
+  -webkit-transform: rotate(90deg) translateZ(2px);
+          transform: rotate(90deg) translateZ(2px);
+}
+body .phone_inner__cube h1:nth-of-type(73) {
+  -webkit-transform: rotate(90deg) translateZ(2.0416666667px);
+          transform: rotate(90deg) translateZ(2.0416666667px);
+}
+body .phone_inner__cube h1:nth-of-type(74) {
+  -webkit-transform: rotate(90deg) translateZ(2.0833333333px);
+          transform: rotate(90deg) translateZ(2.0833333333px);
+}
+body .phone_inner__cube h1:nth-of-type(75) {
+  -webkit-transform: rotate(90deg) translateZ(2.125px);
+          transform: rotate(90deg) translateZ(2.125px);
+}
+body .phone_inner__cube h1:nth-of-type(76) {
+  -webkit-transform: rotate(90deg) translateZ(2.1666666667px);
+          transform: rotate(90deg) translateZ(2.1666666667px);
+}
+body .phone_inner__cube h1:nth-of-type(77) {
+  -webkit-transform: rotate(90deg) translateZ(2.2083333333px);
+          transform: rotate(90deg) translateZ(2.2083333333px);
+}
+body .phone_inner__cube h1:nth-of-type(78) {
+  -webkit-transform: rotate(90deg) translateZ(2.25px);
+          transform: rotate(90deg) translateZ(2.25px);
+}
+body .phone_inner__cube h1:nth-of-type(79) {
+  -webkit-transform: rotate(90deg) translateZ(2.2916666667px);
+          transform: rotate(90deg) translateZ(2.2916666667px);
+}
+body .phone_inner__cube h1:nth-of-type(80) {
+  -webkit-transform: rotate(90deg) translateZ(2.3333333333px);
+          transform: rotate(90deg) translateZ(2.3333333333px);
+}
+body .phone_inner__cube h1:nth-of-type(81) {
+  -webkit-transform: rotate(90deg) translateZ(2.375px);
+          transform: rotate(90deg) translateZ(2.375px);
+}
+body .phone_inner__cube h1:nth-of-type(82) {
+  -webkit-transform: rotate(90deg) translateZ(2.4166666667px);
+          transform: rotate(90deg) translateZ(2.4166666667px);
+}
+body .phone_inner__cube h1:nth-of-type(83) {
+  -webkit-transform: rotate(90deg) translateZ(2.4583333333px);
+          transform: rotate(90deg) translateZ(2.4583333333px);
+}
+body .phone_inner__cube h1:nth-of-type(84) {
+  -webkit-transform: rotate(90deg) translateZ(2.5px);
+          transform: rotate(90deg) translateZ(2.5px);
+}
+body .phone_inner__cube h1:nth-of-type(85) {
+  -webkit-transform: rotate(90deg) translateZ(2.5416666667px);
+          transform: rotate(90deg) translateZ(2.5416666667px);
+}
+body .phone_inner__cube h1:nth-of-type(86) {
+  -webkit-transform: rotate(90deg) translateZ(2.5833333333px);
+          transform: rotate(90deg) translateZ(2.5833333333px);
+}
+body .phone_inner__cube h1:nth-of-type(87) {
+  -webkit-transform: rotate(90deg) translateZ(2.625px);
+          transform: rotate(90deg) translateZ(2.625px);
+}
+body .phone_inner__cube h1:nth-of-type(88) {
+  -webkit-transform: rotate(90deg) translateZ(2.6666666667px);
+          transform: rotate(90deg) translateZ(2.6666666667px);
+}
+body .phone_inner__cube h1:nth-of-type(89) {
+  -webkit-transform: rotate(90deg) translateZ(2.7083333333px);
+          transform: rotate(90deg) translateZ(2.7083333333px);
+}
+body .phone_inner__cube h1:nth-of-type(90) {
+  -webkit-transform: rotate(90deg) translateZ(2.75px);
+          transform: rotate(90deg) translateZ(2.75px);
+}
+body .phone_inner__cube h1:nth-of-type(91) {
+  -webkit-transform: rotate(90deg) translateZ(2.7916666667px);
+          transform: rotate(90deg) translateZ(2.7916666667px);
+}
+body .phone_inner__cube h1:nth-of-type(92) {
+  -webkit-transform: rotate(90deg) translateZ(2.8333333333px);
+          transform: rotate(90deg) translateZ(2.8333333333px);
+}
+body .phone_inner__cube h1:nth-of-type(93) {
+  -webkit-transform: rotate(90deg) translateZ(2.875px);
+          transform: rotate(90deg) translateZ(2.875px);
+}
+body .phone_inner__cube h1:nth-of-type(94) {
+  -webkit-transform: rotate(90deg) translateZ(2.9166666667px);
+          transform: rotate(90deg) translateZ(2.9166666667px);
+}
+body .phone_inner__cube h1:nth-of-type(95) {
+  -webkit-transform: rotate(90deg) translateZ(2.9583333333px);
+          transform: rotate(90deg) translateZ(2.9583333333px);
+}
+body .phone_inner__cube h1:nth-of-type(96) {
+  -webkit-transform: rotate(90deg) translateZ(3px);
+          transform: rotate(90deg) translateZ(3px);
+}
+body .phone_inner__cube h1:nth-of-type(97) {
+  -webkit-transform: rotate(90deg) translateZ(3.0416666667px);
+          transform: rotate(90deg) translateZ(3.0416666667px);
+}
+body .phone_inner__cube h1:nth-of-type(98) {
+  -webkit-transform: rotate(90deg) translateZ(3.0833333333px);
+          transform: rotate(90deg) translateZ(3.0833333333px);
+}
+body .phone_inner__cube h1:nth-of-type(99) {
+  -webkit-transform: rotate(90deg) translateZ(3.125px);
+          transform: rotate(90deg) translateZ(3.125px);
+}
+body .phone_inner__cube h1:nth-of-type(100) {
+  -webkit-transform: rotate(90deg) translateZ(3.1666666667px);
+          transform: rotate(90deg) translateZ(3.1666666667px);
+}
+body .phone_inner__cube h2 {
+  font-size: 20px;
+  font-weight: 500;
+  position: absolute;
+  bottom: 14px;
+  line-height: 20px;
+  left: 24px;
+  width: 100px;
+  opacity: 1;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+  transition: all 0.5s cubic-bezier(0.615, 0, 0.28, 1.005);
+}
+body .phone_inner__cube .logo {
+  position: absolute;
+  z-index: auto;
+  top: 64px;
+  left: 20px;
+}
+body .phone_inner__cube .logo img {
+  width: 50px;
+  -ms-interpolation-mode: nearest-neighbor;
+      image-rendering: -moz-crisp-edges;
+      image-rendering: pixelated;
+  mix-blend-mode: darken;
+}
+body .phone_inner__cube ul {
+  padding: 0;
+  margin: 0 0 0 30px;
+}
+body .phone_inner__cube ul li {
+  list-style-type: none;
+  text-transform: uppercase;
+  font-weight: 900;
+  margin: 0 0 4px 0;
+  color: #111008;
+  cursor: pointer;
+  transition: all .2s;
+}
+body .phone_inner__cube ul li:hover {
+  color: #a23426;
+}
+body .phone_inner__cube ul li.active {
+  color: #a23426;
+}
+body .phone_inner__cube ul.small {
+  font-size: 7px;
+  margin-top: 80px;
+}
+body .phone_inner__cube ul.small li {
+  margin: 0 0 6px 0;
+}
+body .phone_inner__cube ul.big {
+  margin-top: 157px;
+}
+body .phone_inner__cube .face--left, body .phone_inner__cube .face--front {
+  width: 100%;
+  height: 100%;
+  -webkit-transform-style: preserve-3D;
+          transform-style: preserve-3D;
+  background: linear-gradient(to right, #f0ece5, var(--bg) 6%, var(--bg)), var(--bg);
+  position: absolute;
+  transform-style: preserve-3D;
+}
+body .phone_inner__cube .face--left {
+  -webkit-transform: rotateY(-90deg) translateX(-150px);
+          transform: rotateY(-90deg) translateX(-150px);
+  width: 150px;
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+  z-index: -1;
+}
diff --git a/3d-drag-out-menu-with-guitar/license.txt b/3d-drag-out-menu-with-guitar/license.txt
new file mode 100644
index 0000000..4974bd2
--- /dev/null
+++ b/3d-drag-out-menu-with-guitar/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Jamie Coulter (https://codepen.io/jcoulterdesign/pen/wLPZPM)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/3d-drag-out-menu-with-guitar/src/index.haml b/3d-drag-out-menu-with-guitar/src/index.haml
new file mode 100644
index 0000000..b025fd1
--- /dev/null
+++ b/3d-drag-out-menu-with-guitar/src/index.haml
@@ -0,0 +1,30 @@
+%h4 Drag the phone right and left
+.phone
+    .phone_frame
+    %canvas.grain
+    .guitar
+    .phone_inner
+        .phone_inner__nav
+            .menu
+            %h3 Product details
+        .phone_inner__cube
+            .face--front
+                .shadow
+                    %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/gshadow.png'}
+                -(1..100).each do
+                    %h1 Fender
+                %h2 Fender American Elite Strat
+            .face--left
+                .logo
+                    %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/logoStrings.png'}
+                %ul.big
+                    %li.active Guitars
+                    %li Basses
+                    %li Amps
+                    %li Pedals
+                    %li Other
+                %ul.small
+                    %li About
+                    %li Support
+                    %li Terms
+                    %li FAQ
\ No newline at end of file
diff --git a/3d-drag-out-menu-with-guitar/src/script.babel b/3d-drag-out-menu-with-guitar/src/script.babel
new file mode 100644
index 0000000..943455e
--- /dev/null
+++ b/3d-drag-out-menu-with-guitar/src/script.babel
@@ -0,0 +1,327 @@
+dragging = false;
+
+'use strict';
+
+///console.clear();
+
+class Grain {
+    constructor (el) {
+        /**
+     * Options
+     * Increase the pattern size if visible pattern
+     */
+        this.patternSize = 150;
+        this.patternScaleX = 1;
+        this.patternScaleY = 1;
+        this.patternRefreshInterval = 3; // 8
+        this.patternAlpha = 28; // int between 0 and 255,
+
+        /**
+     * Create canvas
+     */
+        this.canvas = el;
+        this.ctx = this.canvas.getContext('2d');
+        this.ctx.scale(this.patternScaleX, this.patternScaleY);
+
+        /**
+     * Create a canvas that will be used to generate grain and used as a
+     * pattern on the main canvas.
+     */
+        this.patternCanvas = document.createElement('canvas');
+        this.patternCanvas.width = this.patternSize;
+        this.patternCanvas.height = this.patternSize;
+        this.patternCtx = this.patternCanvas.getContext('2d');
+        this.patternData = this.patternCtx.createImageData(this.patternSize, this.patternSize);
+        this.patternPixelDataLength = this.patternSize * this.patternSize * 4; // rgba = 4
+
+        /**
+     * Prebind prototype function, so later its easier to user
+     */
+        this.resize = this.resize.bind(this);
+        this.loop = this.loop.bind(this);
+
+        this.frame = 0;
+
+        window.addEventListener('resize', this.resize);
+        this.resize();
+
+        window.requestAnimationFrame(this.loop);
+    }
+
+    resize () {
+        this.canvas.width = window.innerWidth * devicePixelRatio;
+        this.canvas.height = window.innerHeight * devicePixelRatio;
+    }
+
+    update () {
+        const {patternPixelDataLength, patternData, patternAlpha, patternCtx} = this;
+
+        // put a random shade of gray into every pixel of the pattern
+        for (let i = 0; i < patternPixelDataLength; i += 4) {
+            // const value = (Math.random() * 255) | 0;
+            const value = Math.random() * 255;
+
+            patternData.data[i] = value;
+            patternData.data[i + 1] = value;
+            patternData.data[i + 2] = value;
+            patternData.data[i + 3] = patternAlpha;
+        }
+
+        patternCtx.putImageData(patternData, 0, 0);
+    }
+
+    draw () {
+        const {ctx, patternCanvas, canvas, viewHeight} = this;
+        const {width, height} = canvas;
+
+        // clear canvas
+        ctx.clearRect(0, 0, width, height);
+
+        // fill the canvas using the pattern
+        ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat');
+        ctx.fillRect(0, 0, width, height);
+    }
+
+    loop () {
+        // only update grain every n frames
+        const shouldDraw = ++this.frame % this.patternRefreshInterval === 0;
+        if (shouldDraw) {
+            this.update();
+            this.draw();
+        }
+
+        window.requestAnimationFrame(this.loop);
+    }
+}
+
+
+/**
+ * Initiate Grain
+ */
+const el = document.querySelector('.grain');
+const grain = new Grain(el);
+
+
+
+$('.phone').mousedown(function(e) {
+    initX = e.clientX;
+    dragging = true;
+})
+
+$('html').mouseup(function(){
+    dragging = false
+    $('.dynamicCursor').css('width', '18px')
+})
+$('.phone').mousemove(function(e) {
+    if(dragging) {
+        let mouseX = e.clientX;
+        difference = mouseX - initX;
+
+        console.log(difference)
+
+        $('.dynamicCursor').css('width', Math.abs(difference) + 'px')
+
+        if(difference > 60) {
+            $('.phone').addClass('open')
+        }
+
+        if(difference < -60) {
+            $('.phone').removeClass('open')
+        }
+
+    }
+});
+
+function drawMouseSpeedDemo() {
+    var mrefreshinterval = 30; // update display every 500ms
+    var lastmousex=-1; 
+    var lastmousey=-1;
+    var lastmousetime;
+    var mousetravel = 0;
+    var mpoints = [];
+    var mpoints_max = 30;
+    var direction;
+
+    $('html').mousemove(function(e) {
+        var mousex = e.pageX;
+        var mousey = e.pageY;
+        if (lastmousex > -1) {
+            mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
+        }
+        // console.log(mousex-lastmousex)
+
+        if(mousex-lastmousex > 0) {
+            direction = '+'
+        } else {
+            direction = '-'
+        }
+
+        //console.log(direction);
+
+        lastmousex = mousex;
+        lastmousey = mousey;
+    });
+    var mdraw = function() {
+        var md = new Date();
+        var timenow = md.getTime();
+        if (lastmousetime && lastmousetime!=timenow) {
+            var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
+            mpoints.push(pps);
+            if (mpoints.length > mpoints_max)
+                mpoints.splice(0,1);
+            mousetravel = 0;
+            //console.log(pps)
+            if(dragging) {
+
+            }
+
+        }
+        lastmousetime = timenow;
+        setTimeout(mdraw, mrefreshinterval);
+    }
+    // We could use setInterval instead, but I prefer to do it this way
+    setTimeout(mdraw, mrefreshinterval); 
+};
+
+drawMouseSpeedDemo()
+
+
+/* -------------------------------------------------
+
+Dynamic cursor
+
+--------------------------------------------------- */
+
+const cursorSettings = {
+    'class' : 'dynamicCursor',
+    'size' : '18',
+    'expandedSize' : '40',
+    'expandSpeed' : 0.4,
+    'background' : 'rgba(161, 142, 218, 0.25)',
+    'opacity' : '1',
+    'transitionTime' : '1.4s',
+    'transitionEase' : 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
+    'borderWidth' : '0',
+    'borderColor' : 'black',
+    'iconSize': '11px',
+    'iconColor': 'white',
+    'triggerElements': {
+        'trigger' : {
+            'className' : 'trigger',
+            'icon' : '<i class="fa fa-plus"></i>'
+        },
+        'trigger2' : {
+            'className' : 'slider_inner',
+            'icon' : '<i class="fa fa-arrows-h"></i>'
+        }
+    }
+}
+
+
+function dynamicCursor(options) {
+
+    document.write('<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">');
+
+    var hold;
+    cursor = document.createElement('div');
+    let cursorIcon = document.createElement('div');
+
+    cursorIcon.classList.add('cursorIcon');
+    cursorIcon.style.position = 'absolute';
+    cursorIcon.style.fontFamily = 'Raleway';
+    cursorIcon.style.textTransform = 'uppercase';
+    cursorIcon.style.fontWeight = '800';
+    cursorIcon.style.textAlign = 'center'
+    cursorIcon.style.top = '50%';
+    cursorIcon.style.width = '100%';
+    cursorIcon.style.transform = 'translateY(-50%)';
+    cursorIcon.style.color = options.iconColor;
+    cursorIcon.style.fontSize = options.iconSize;
+    cursorIcon.style.opacity = 0;
+    cursorIcon.style.transition = `opacity ${options.expandSpeed}s`;
+
+    cursor.classList.add(options.class);
+    cursor.style.boxSizing = 'border-box';
+    cursor.style.width = `${options.size}px`;
+    cursor.style.height = `${options.size}px`;
+    cursor.style.borderRadius = `${options.expandedSize}px`;
+    cursor.style.opacity = 0;
+
+    cursor.style.pointerEvents = 'none';
+    cursor.style.zIndex = 999;
+    cursor.style.transition = `transform ${options.transitionTime} ${options.transitionEase}, width 0s, height ${options.expandSpeed}s .2s, opacity 1s .2s`;
+    cursor.style.border = `${options.borderWidth}px solid ${options.borderColor}`;
+    cursor.style.position = 'fixed';
+    cursor.style.background = options.background;
+
+    cursor.appendChild(cursorIcon);
+    document.body.appendChild(cursor);
+
+    setTimeout(function() {
+        cursor.style.opacity = options.opacity;
+    }, 500)
+
+    var idle;
+
+    document.onmousemove = e => {
+        console.log('test')
+        x = e.pageX;
+        y = e.pageY;
+
+        cursor.style.opacity = options.opacity;
+        clearInterval(idle)
+
+        idle = setTimeout(function() {
+            cursor.style.opacity = 0;
+        }, 4000)
+
+        cursor.style.top = '0';
+        cursor.style.left = '0';
+        cursor.style.transform = `translateX(calc(${x}px - 50%)) translateY(calc(${y}px - 50%))`;
+    }
+
+    for(i in options.triggerElements) {
+
+        let trigger = $(`.${options.triggerElements[i].className}`);
+
+        console.log(trigger);
+
+
+        let icon = options.triggerElements[i].icon;
+
+        if(!trigger) {
+            console.warn('You dont have any triggers');
+        } else {
+            trigger.each(function(el){
+
+                console.log()
+                trigger[el].style.cursor = 'default';
+                trigger[el].addEventListener('mouseover', () => {
+                    console.log('over')
+                    cursor.style.width = `${options.expandedSize}px`;
+                    cursor.style.height = `${options.expandedSize}px`;
+                    cursorIcon.innerHTML = icon;
+                    cursorIcon.style.opacity = 1;
+
+
+                    console.log($(this))
+
+
+                })
+
+                trigger[el].addEventListener('mouseout', () => {
+                    cursor.style.width = `${options.size}px`;
+                    cursor.style.height = `${options.size}px`;
+                    cursorIcon.style.opacity = 0;
+                })
+            })
+
+        }
+    }
+}
+
+dynamicCursor(cursorSettings);
+
+$('.back').click(function(){
+    $(this).parent().parent().removeClass('expand')
+})
\ No newline at end of file
diff --git a/3d-drag-out-menu-with-guitar/src/style.scss b/3d-drag-out-menu-with-guitar/src/style.scss
new file mode 100644
index 0000000..3c2b6e7
--- /dev/null
+++ b/3d-drag-out-menu-with-guitar/src/style.scss
@@ -0,0 +1,330 @@
+$height: 489px;
+$width: 245px;
+$perspective: 900;
+
+$globalTransitionmTime: .5s;
+$globalTransitionEasing: cubic-bezier(0.615, 0.000, 0.280, 1.005);
+
+@import url('https://fonts.googleapis.com/css?family=Heebo:400,500,800,900&display=swap');
+
+:root {
+    --bg: #efdece;
+}
+
+h4 {
+    color: white;
+    margin: 0;
+    padding-top: 20px;
+    text-align: center;
+}
+
+canvas {
+    position: absolute;
+    z-index: 1;
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.dynamicCursor {
+    max-width: 50px;
+    min-width: 18px;
+    transition: width 0s;
+    background: transparent !important;
+    border: 2px solid white !important;
+
+}
+
+@keyframes in {
+    from{opacity: 0;}
+    to{opacity: 1;}
+}
+
+body {
+    padding: 0;
+    background: #a92913;
+    padding: 0;
+    margin: 0;
+    box-shadow: 50vw 0 #381313 inset;
+    height: 100vh;
+    font-family: 'Heebo', sans-serif;
+
+    -webkit-user-select: none;  /* Chrome all / Safari all */
+    -moz-user-select: none;     /* Firefox all */
+    -ms-user-select: none;      /* IE 10+ */
+    user-select: none;          /* Likely future */ 
+
+    %center {
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin: auto;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    .guitar {
+
+        width: 85px;
+        height: 175px;
+        z-index: 10;
+        position: absolute;
+        transition: all 0.7s 0.3s cubic-bezier(0.5, 0.005, 0.075, 0.985), transform 0.1s 0.7s, -webkit-transform 0.1s;
+        left: 92px;
+        transform: scale(1.8);
+        top: 130px;
+        background-size: 1920px !important;
+        background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/gt.png);
+        animation: guitar2 $globalTransitionmTime 0s steps(23, end) forwards;
+
+
+        @keyframes guitar {
+            0% {background-position: 0 0;transform: scale(1.8)}
+            10% { transform: scale(1.8);}
+            100% {background-position: -1840px 0; transform: scale(1.8)}
+        }
+
+        @keyframes guitar2 {
+            0% {background-position: -1840px 0;transform: scale(1.8)}
+            10% { transform: scale(1.8);}
+            100% {background-position: 0 0; transform: scale(1.8)}
+        }
+    }
+
+    .phone {
+        @extend %center;
+        opacity: 0;
+        animation: in 1s .5s forwards;
+
+        width: $width;
+        height: $height;
+        perspective: $perspective;
+        border-radius: 24px;
+        overflow: hidden;
+        border-radius: 40px;
+
+        box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.3);
+
+        -webkit-box-reflect: below 4px linear-gradient(to top, rgba(255, 255, 255, 1) -120%, rgba(255,255,255,0) 25%);
+
+        &.open {
+            .guitar {
+                animation: guitar $globalTransitionmTime 0s steps(23, end) forwards;
+            }
+
+            & .phone_inner__nav {
+                left: 170px;
+
+                h3 {
+                    opacity: 0;
+                }
+            }
+
+            & .phone_inner__cube {
+                transform: rotateY(90deg);
+                left: 50px;
+
+                h2 {
+                    opacity: 0;
+                    transform: translateZ(50px);
+                }
+            }
+        }
+
+        &_frame {
+            width: $width;
+            height: $height;
+
+            position: absolute;
+            z-index: 2;
+            background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/frameIphone.png');
+
+            pointer-events: none;
+        }
+
+        &_inner {
+            width: $width - 20px;
+            height: $height - 14px;
+
+            position: relative;
+            left: 10px;
+            top: 6px;
+            overflow: hidden;
+            transform-style: preserve-3D;
+            background: #ada59c;
+
+            &__nav {
+                position: absolute;
+                z-index: 2;
+                text-transform: uppercase;
+                text-align: center;
+                width: 100%;
+                font-weight: 400;
+                transition: all $globalTransitionmTime $globalTransitionEasing;
+                top: 39px;
+                left: 0;
+
+                h3 {
+                    margin: 0;
+                    font-size: 9px;
+                    opacity: 1;
+                    transition: all $globalTransitionmTime $globalTransitionEasing;
+                }
+
+                & .menu {
+                    width: 18px;
+                    height: 2px;
+                    background: #111114;
+                    position: absolute;
+                    left: 16px;
+
+                    &:after {
+                        content: '';
+                        display: block;
+                        position: relative;
+                        top: 2px;
+                        width: 18px;
+                        height: 2px;
+                        background: #111114;
+                    }
+
+                    &:before {
+                        content: '';
+                        display: block;
+                        position: relative;
+                        top: 9px;
+                        width: 10px;
+                        height: 2px;
+                        background: #111114;
+                    }
+                }
+            }
+
+            &__cube {
+                transform-style: preserve-3D;
+                height: 100%;
+                position: relative;
+                left: 0;
+                transition: all $globalTransitionmTime + .009s $globalTransitionEasing;
+
+                .shadow {
+                    img {
+                        position: absolute;
+                        width: 210px;
+                        top: 90px;
+                        left: 20px;
+                    }
+                }
+
+                h1 {
+                    text-transform: uppercase;
+                    margin: 0;
+                    transform-origin: 0 50%;
+                    position: absolute;
+                    line-height: 0;
+                    left: 47px;
+                    letter-spacing: 3px;
+                    top: 92px;
+                    color: #c6bdad;
+                    font-size: 55px;
+                    text-shadow: 0 0 1px #bdb5ad;
+                    transform-style: preserve-3D;
+
+                    @for $i from 1 through 100 {
+                        &:nth-of-type(#{$i}) {
+                            transform: rotate(90deg) translateZ(($i / 24) - 1 + px);
+                        }
+                    }
+                }
+
+                h2 {
+                    font-size: 20px;
+                    font-weight: 500;
+                    position: absolute;
+                    bottom: 14px;
+                    line-height: 20px;
+                    left: 24px;
+                    width: 100px;
+                    opacity: 1;
+                    transform: translateZ(0);
+                    transition: all $globalTransitionmTime $globalTransitionEasing;
+                }
+
+                .logo {
+                    position: absolute;
+                    z-index: auto;
+                    top: 64px;
+                    left: 20px;
+
+                    img {
+                        width: 50px;
+                        image-rendering: pixelated;
+                        mix-blend-mode: darken;
+                    }
+                }
+
+                ul {
+                    padding: 0;
+                    margin: 0 0 0 30px;
+
+                    li {
+                        list-style-type: none;
+                        text-transform: uppercase;
+                        font-weight: 900;
+                        margin: 0 0 4px 0;
+                        color: #111008;
+                        cursor: pointer;
+                        transition: all .2s;
+
+                        &:hover {
+                            color: #a23426;
+                        }
+
+                        &.active {
+                            color: #a23426;
+                        }
+                    }
+
+                    &.small {
+                        font-size: 7px;
+                        margin-top: 80px;
+
+                        li {
+                            margin: 0 0 6px 0
+                        }
+                    }
+
+                    &.big {
+                        margin-top: 157px; 
+                    }
+                }
+
+                %face {
+                    width: 100%;
+                    height: 100%;
+                    transform-style: preserve-3D;
+                    background: linear-gradient(
+                        to right, 
+                        #f0ece5,
+                        var(--bg) 6%,
+                        var(--bg)
+                    ), var(--bg);
+                    position: absolute;
+                    transform-style: preserve-3D;
+                }
+
+                & .face {
+                    &--left,
+                    &--front {
+                        @extend %face;
+                    }
+
+                    &--left {
+                        transform: rotateY(-90deg) translateX(-150px);
+                        width: 150px;
+                        transform-origin: 0 0;
+                        z-index: -1;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/3d-ish-hamburger-menu/README.markdown b/3d-ish-hamburger-menu/README.markdown
new file mode 100644
index 0000000..2a86eb5
--- /dev/null
+++ b/3d-ish-hamburger-menu/README.markdown
@@ -0,0 +1,6 @@
+# 3D-ish Hamburger Menu
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jkantner/pen/oVbgNV](https://codepen.io/jkantner/pen/oVbgNV).
+
+ A hamburger menu that reveals its contents in a 3D-like way. Also designed to look like a real hamburger!
+
+Update 6/4/19: Sass refactored
\ No newline at end of file
diff --git a/3d-ish-hamburger-menu/dist/index.html b/3d-ish-hamburger-menu/dist/index.html
new file mode 100644
index 0000000..ac3fdaf
--- /dev/null
+++ b/3d-ish-hamburger-menu/dist/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>3D-ish Hamburger Menu</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel='stylesheet' href='https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<nav>
+	<input id="open" type="checkbox">
+	<ul>
+		<li><span><label for="open" aria-label="Close"><span class="sr">&times;</span></label></span></li>
+		<li><span><a href="#">Our Menu</a></span></li>
+		<li><span><a href="#">Locate</a></span></li>
+		<li><span><a href="#">Deals</a></span></li>
+		<li><span><a href="#">App</a></span></li>
+		<li><span><a href="#">Trending</a></span></li>
+	</ul>
+</nav>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/3d-ish-hamburger-menu/dist/style.css b/3d-ish-hamburger-menu/dist/style.css
new file mode 100644
index 0000000..e4e31a1
--- /dev/null
+++ b/3d-ish-hamburger-menu/dist/style.css
@@ -0,0 +1,251 @@
+*, *:before, *:after {
+  border: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #ffffcc;
+  color: #171717;
+  font-size: 20px;
+  line-height: 1.5;
+}
+
+nav {
+  font: 1em "ZCOOL QingKe HuangYou", sans-serif;
+  margin: 1.5em auto;
+  width: 5em;
+  height: 4.5em;
+  text-transform: uppercase;
+}
+nav input {
+  border-radius: 50%;
+  cursor: pointer;
+  display: block;
+  position: absolute;
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 100%;
+  z-index: 9;
+}
+nav input:focus {
+  outline: transparent;
+}
+nav, nav ul {
+  position: relative;
+}
+nav li, nav span, nav a, nav label {
+  display: block;
+}
+nav li {
+  left: 50%;
+  text-align: center;
+  transform: translateX(-50%);
+  width: 5em;
+}
+nav li, nav li span {
+  position: absolute;
+  transition: all 0.7s ease-out;
+  transform-origin: 50% 0;
+}
+nav li:first-child, nav li:last-child {
+  width: 4.4em;
+}
+nav li:first-child span, nav li:last-child span {
+  line-height: 4.5;
+}
+nav li:first-child {
+  background: #ffd580;
+  border-radius: 0 0 0.45em 0.45em / 0 0 100% 100%;
+  box-shadow: 0.2em 0 0 #e69900 inset, -0.2em 0 0 #e69900 inset, 0 0 0 #e69900 inset, 0 -1.4em 0 #e69900 inset;
+  top: 3.6em;
+  height: 0.9em;
+  z-index: 0;
+}
+nav li:first-child label:before, nav li:first-child label:after {
+  background: #cc0000;
+  border-radius: 0.2em;
+  box-shadow: 0 -0.1em 0 maroon inset;
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 3em;
+  height: 0.4em;
+}
+nav li:first-child label:before {
+  background-image: radial-gradient(0.2em 0.3em at 0.2em 0.2em, #ff9999 49%, rgba(255, 153, 153, 0) 50%);
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+nav li:first-child label:after {
+  background-image: radial-gradient(0.2em 0.3em at 2.8em 0.2em, #ff9999 49%, rgba(255, 153, 153, 0) 50%);
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+nav li:nth-child(2) {
+  background: #6b2e2e;
+  background-image: repeating-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 4%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 20%);
+  background-position: 0 -0.35em;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border-radius: 0.35em;
+  box-shadow: 0.3em 0 0 #6b2e2e inset, -0.3em 0 0 #6b2e2e inset, 0 0 0 #6b2e2e inset, 0 -0.6em 0 #6b2e2e inset;
+  top: 2.9em;
+  width: 4.8em;
+  height: 0.7em;
+  z-index: 1;
+}
+nav li:nth-child(2) span {
+  line-height: 5;
+}
+nav li:nth-child(2) a {
+  color: white;
+}
+nav li:nth-child(3) {
+  background: #ffd500;
+  background-image: radial-gradient(10% 10% at 15% 15%, #ffea80 49%, rgba(255, 234, 128, 0) 50%);
+  border-radius: 0.1em;
+  top: 2.7em;
+  width: 4em;
+  height: 0.2em;
+  z-index: 2;
+}
+nav li:nth-child(3) span {
+  line-height: 4;
+}
+nav li:nth-child(3):before {
+  background: inherit;
+  border-radius: 0 0 100% 50% / 0 0 100% 0;
+  content: "";
+  display: block;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 0.8em;
+  height: 0.8em;
+  transform: rotate(-45deg);
+  transform-origin: 0 0;
+  transition: transform 0.7s ease-out;
+}
+nav li:nth-child(4) {
+  background: #40bf40;
+  background-image: linear-gradient(45deg, rgba(102, 204, 102, 0) 24%, #66cc66 25%, #66cc66 27%, rgba(102, 204, 102, 0) 28%), linear-gradient(45deg, rgba(102, 204, 102, 0) 46%, #66cc66 47%, #66cc66 49%, rgba(102, 204, 102, 0) 50%), linear-gradient(45deg, rgba(102, 204, 102, 0) 74%, #66cc66 75%, #66cc66 77%, rgba(102, 204, 102, 0) 78%), linear-gradient(-45deg, rgba(102, 204, 102, 0) 46%, #66cc66 47%, #66cc66 52%, rgba(102, 204, 102, 0) 53%);
+  background-position: 0 0;
+  border-radius: 0.15em;
+  box-shadow: 0 0.4em 0 #40bf40 inset, -0.4em 0 0 #40bf40 inset;
+  top: 2.4em;
+  width: 4.5em;
+  height: 0.3em;
+  z-index: 3;
+}
+nav li:nth-child(4) span {
+  line-height: 4.5;
+}
+nav li:nth-child(5) {
+  background: #ed765e;
+  background-image: radial-gradient(20% 25% at 50% 30%, #e84f30 49%, rgba(232, 79, 48, 0) 50%), radial-gradient(20% 25% at 50% 70%, #e84f30 49%, rgba(232, 79, 48, 0) 50%), radial-gradient(25% 20% at 30% 50%, #e84f30 49%, rgba(232, 79, 48, 0) 50%), radial-gradient(25% 20% at 70% 50%, #e84f30 49%, rgba(232, 79, 48, 0) 50%);
+  background-position: 0 -0.4em;
+  border-radius: 0.2em;
+  box-shadow: 0.4em 0 0 #e84f30 inset, -0.4em 0 0 #e84f30 inset, 0 0 0 #e84f30 inset, 0 -0.8em 0 #e84f30 inset;
+  top: 2em;
+  width: 5em;
+  height: 0.4em;
+  z-index: 4;
+}
+nav li:nth-child(5) span {
+  line-height: 5;
+}
+nav li:last-child {
+  background: #e69900;
+  background-image: radial-gradient(0.5em 0.3em at 0.5em 0.2em, #ffdf80 0.15em, rgba(255, 223, 128, 0) 0.2em), radial-gradient(0.5em 0.3em at 0 0.7em, #ffdf80 0.15em, rgba(255, 223, 128, 0) 0.2em), radial-gradient(0.5em 0.3em at 1em 0.7em, #ffdf80 0.15em, rgba(255, 223, 128, 0) 0.2em);
+  background-position: 0 0;
+  background-size: 1em 1em;
+  border-radius: 2em 2em 0 0 / 100% 100% 0 0;
+  box-shadow: 0.4em 0 0 0 #e69900 inset, -0.4em 0 0 0 #e69900 inset;
+  height: 2em;
+  z-index: 5;
+}
+nav li span, nav li label, nav li a {
+  border-radius: inherit;
+  height: 100%;
+}
+nav li span {
+  margin: auto;
+  top: 0;
+  width: 100%;
+  transform: scaleY(0);
+  transform-origin: 50% 0;
+}
+nav li a {
+  color: currentColor;
+  text-decoration: none;
+}
+nav li a:before {
+  background: #cc0000;
+  background-image: radial-gradient(0.4em 0.2em at 3.3em 0.1em, #ff9999 49%, rgba(255, 153, 153, 0) 50%);
+  border-radius: 0.2em;
+  box-shadow: 0 -0.1em 0 maroon inset;
+  content: "";
+  display: block;
+  position: absolute;
+  top: 62%;
+  left: 50%;
+  width: 3.5em;
+  height: 0.4em;
+  transform: translateX(-50%) scaleX(0);
+  transform-origin: 0 50%;
+  transition: transform 0.2s linear;
+}
+nav li a:hover:before {
+  transform: translateX(-50%) scaleX(1);
+}
+nav li .sr {
+  overflow: hidden;
+  width: 0;
+  height: 0;
+}
+nav input:checked + ul li:nth-child(1) {
+  border-radius: 50%;
+  box-shadow: 0.1em 0 0 #e69900 inset, -0.1em 0 0 #e69900 inset, 0 0.1em 0 #e69900 inset, 0 -0.1em 0 #e69900 inset;
+  height: 4.4em;
+  transform: translate(-50%, -3.5em);
+}
+nav input:checked + ul li:nth-child(2) {
+  background-position: 0 0;
+  border-radius: 50%;
+  box-shadow: 0.3em 0 0 #6b2e2e inset, -0.3em 0 0 #6b2e2e inset, 0 0.3em 0 #6b2e2e inset, 0 -0.3em 0 #6b2e2e inset;
+  height: 4.8em;
+  transform: translate(-50%, 1.6em);
+}
+nav input:checked + ul li:nth-child(3) {
+  border-radius: 0.2em;
+  height: 4em;
+  transform: translate(-50%, 6.6em);
+}
+nav input:checked + ul li:nth-child(3):before {
+  transform: rotate(-90deg);
+}
+nav input:checked + ul li:nth-child(4) {
+  border-radius: 1.5em 1em 1.2em 0.8em;
+  height: 4.5em;
+  transform: translate(-50%, 10.9em);
+}
+nav input:checked + ul li:nth-child(5) {
+  border-radius: 50%;
+  background-position: 0 0;
+  box-shadow: 0.4em 0 0 #e84f30 inset, -0.4em 0 0 #e84f30 inset, 0 0.4em 0 #e84f30 inset, 0 -0.4em 0 #e84f30 inset;
+  height: 5em;
+  transform: translate(-50%, 15.8em);
+}
+nav input:checked + ul li:nth-child(6) {
+  border-radius: 50%;
+  box-shadow: 0.1em 0 0 #e69900 inset, -0.1em 0 0 #e69900 inset, 0 0.1em 0 #e69900 inset, 0 -0.1em 0 #e69900 inset;
+  height: 4.4em;
+  background-position: 0 2.2em;
+  transform: translate(-50%, 22.8em);
+}
+nav input:checked + ul li span {
+  transform: scaleY(1);
+}
diff --git a/3d-ish-hamburger-menu/license.txt b/3d-ish-hamburger-menu/license.txt
new file mode 100644
index 0000000..544b9ec
--- /dev/null
+++ b/3d-ish-hamburger-menu/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Jon Kantner (https://codepen.io/jkantner/pen/oVbgNV)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/3d-ish-hamburger-menu/src/index.html b/3d-ish-hamburger-menu/src/index.html
new file mode 100644
index 0000000..51d4aa3
--- /dev/null
+++ b/3d-ish-hamburger-menu/src/index.html
@@ -0,0 +1,11 @@
+<nav>
+	<input id="open" type="checkbox">
+	<ul>
+		<li><span><label for="open" aria-label="Close"><span class="sr">&times;</span></label></span></li>
+		<li><span><a href="#">Our Menu</a></span></li>
+		<li><span><a href="#">Locate</a></span></li>
+		<li><span><a href="#">Deals</a></span></li>
+		<li><span><a href="#">App</a></span></li>
+		<li><span><a href="#">Trending</a></span></li>
+	</ul>
+</nav>
\ No newline at end of file
diff --git a/3d-ish-hamburger-menu/src/style.scss b/3d-ish-hamburger-menu/src/style.scss
new file mode 100644
index 0000000..fd01ddd
--- /dev/null
+++ b/3d-ish-hamburger-menu/src/style.scss
@@ -0,0 +1,328 @@
+*, *:before, *:after {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+body {
+	background: hsl(60,100%,90%);
+	color: hsl(0,0%,9%);
+	font-size: 20px;
+	line-height: 1.5;
+}
+nav {
+	$bun: hsl(40,100%,45%);
+	$bunInner: hsl(40,100%,75%);
+	$ketchup: hsl(0,100%,40%);
+	$ketchupT: hsla(0,100%,40%,0);
+	$ketchupLt: hsl(0,100%,80%);
+	$ketchupLtT: hsla(0,100%,80%,0);
+	$ketchupSh: hsl(0,100%,25%);
+	$burger: hsl(0,40%,30%);
+	$cheese: hsl(50,100%,50%);
+	$cheeseLt: hsl(50,100%,75%);
+	$cheeseLtT: hsla(50,100%,75%,0);
+	$lettuce: hsl(120,50%,50%);
+	$lettuceVein: hsl(120,50%,60%);
+	$lettuceVeinT: hsla(120,50%,60%,0);
+	$tomato: hsl(10,80%,55%);
+	$tomatoT: hsla(10,80%,55%,0);
+	$tomatoVein: hsl(10,80%,65%);
+	$tomatoVeinT: hsla(10,80%,65%,0);
+	$seed: hsl(45,100%,75%);
+	$seedT: hsla(45,100%,75%,0);
+
+	$transDur: 0.7s;
+	$trans: $transDur ease-out;
+		
+	font: 1em "ZCOOL QingKe HuangYou", sans-serif;
+	margin: 1.5em auto;
+	width: 5em;
+	height: 4.5em;
+	text-transform: uppercase;
+	input {
+		border-radius: 50%;
+		cursor: pointer;
+		display: block;
+		position: absolute;
+		-webkit-appearance: none;
+		appearance: none;
+		width: 100%;
+		height: 100%;
+		z-index: 9;
+		&:focus {
+			outline: transparent;
+		}
+	}
+	&, ul {
+		position: relative;
+	}
+	li, span, a, label {
+		display: block;
+	}
+	li {
+		left: 50%;
+		text-align: center;
+		transform: translateX(-50%);
+		width: 5em;
+		&, span {
+			position: absolute;
+			transition: all $trans;
+			transform-origin: 50% 0;
+		}
+		&:first-child, &:last-child {
+			width: 4.4em;
+			span {
+				line-height: 4.5;
+			}
+		}
+		&:first-child {
+			background: $bunInner;
+			border-radius: 0 0 0.45em 0.45em / 0 0 100% 100%;
+			box-shadow:
+				0.2em 0 0 $bun inset,
+				-0.2em 0 0 $bun inset,
+				0 0 0 $bun inset,
+				0 -1.4em 0 $bun inset;
+			top: 3.6em;
+			height: 0.9em;
+			z-index: 0;
+			label {
+				&:before, &:after {
+					background: $ketchup;
+					border-radius: 0.2em;
+					box-shadow: 0 -0.1em 0 $ketchupSh inset;
+					content: "";
+					display: block;
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					width: 3em;
+					height: 0.4em;
+				}
+				&:before {
+					background-image:
+						radial-gradient(0.2em 0.3em at 0.2em 0.2em,$ketchupLt 49%,$ketchupLtT 50%);
+					transform: translate(-50%,-50%) rotate(45deg);
+				}
+				&:after {
+					background-image:
+						radial-gradient(0.2em 0.3em at 2.8em 0.2em,$ketchupLt 49%,$ketchupLtT 50%);
+					transform: translate(-50%,-50%) rotate(-45deg);
+				}
+			}
+		}
+		&:nth-child(2) {
+			background: $burger;
+			background-image:
+				repeating-linear-gradient(
+					hsla(0,0%,0%,0.3),
+					hsla(0,0%,0%,0.3) 4%,
+					hsla(0,0,0%,0) 5%,
+					hsla(0,0,0%,0) 20%
+				);
+			background-position: 0 -0.35em;
+			background-repeat: no-repeat;
+			background-size: 100% 100%;
+			border-radius: 0.35em;
+			box-shadow:
+				0.3em 0 0 $burger inset,
+				-0.3em 0 0 $burger inset,
+				0 0 0 $burger inset,
+				0 -0.6em 0 $burger inset;
+			top: 2.9em;
+			width: 4.8em;
+			height: 0.7em;
+			z-index: 1;
+			span {
+				line-height: 5;
+			}
+			a {
+				color: hsl(0,0%,100%);
+			}
+		}
+		&:nth-child(3) {
+			background: $cheese;
+			background-image: radial-gradient(10% 10% at 15% 15%,$cheeseLt 49%,$cheeseLtT 50%);
+			border-radius: 0.1em;
+			top: 2.7em;
+			width: 4em;
+			height: 0.2em;
+			z-index: 2;
+			span {
+				line-height: 4;
+			}
+			&:before {
+				background: inherit;
+				border-radius: 0 0 100% 50% / 0 0 100% 0;
+				content: "";
+				display: block;
+				position: absolute;
+				top: 100%;
+				right: 0;
+				width: 0.8em;
+				height: 0.8em;
+				transform: rotate(-45deg);
+				transform-origin: 0 0;
+				transition: transform $trans;
+			}
+		}
+		&:nth-child(4) {
+			background: $lettuce;
+			background-image:
+				linear-gradient(45deg,$lettuceVeinT 24%,$lettuceVein 25%,$lettuceVein 27%,$lettuceVeinT 28%),
+				linear-gradient(45deg,$lettuceVeinT 46%,$lettuceVein 47%,$lettuceVein 49%,$lettuceVeinT 50%),
+				linear-gradient(45deg,$lettuceVeinT 74%,$lettuceVein 75%,$lettuceVein 77%,$lettuceVeinT 78%),
+				linear-gradient(-45deg,$lettuceVeinT 46%,$lettuceVein 47%,$lettuceVein 52%,$lettuceVeinT 53%);
+			background-position: 0 0;
+			border-radius: 0.15em;
+			box-shadow:
+				0 0.4em 0 $lettuce inset,
+				-0.4em 0 0 $lettuce inset;
+			top: 2.4em;
+			width: 4.5em;
+			height: 0.3em;
+			z-index: 3;
+			span {
+				line-height: 4.5;
+			}
+		}
+		&:nth-child(5) {
+			background: $tomatoVein;
+			background-image:
+				radial-gradient(20% 25% at 50% 30%,$tomato 49%,$tomatoT 50%),
+				radial-gradient(20% 25% at 50% 70%,$tomato 49%,$tomatoT 50%),
+				radial-gradient(25% 20% at 30% 50%,$tomato 49%,$tomatoT 50%),
+				radial-gradient(25% 20% at 70% 50%,$tomato 49%,$tomatoT 50%);
+			background-position: 0 -0.4em;
+			border-radius: 0.2em;
+			box-shadow:
+				0.4em 0 0 $tomato inset,
+				-0.4em 0 0 $tomato inset,
+				0 0 0 $tomato inset,
+				0 -0.8em 0 $tomato inset;
+			top: 2em;
+			width: 5em;
+			height: 0.4em;
+			z-index: 4;
+			span {
+				line-height: 5;
+			}
+		}
+		&:last-child {
+			background: $bun;
+			background-image:
+				radial-gradient(0.5em 0.3em at 0.5em 0.2em,$seed 0.15em,$seedT 0.2em),
+				radial-gradient(0.5em 0.3em at 0 0.7em,$seed 0.15em,$seedT 0.2em),
+				radial-gradient(0.5em 0.3em at 1em 0.7em,$seed 0.15em,$seedT 0.2em);
+			background-position: 0 0;
+			background-size: 1em 1em;
+			border-radius: 2em 2em 0 0 / 100% 100% 0 0;
+			box-shadow: 0.4em 0 0 0 $bun inset, -0.4em 0 0 0 $bun inset;
+			height: 2em;
+			z-index: 5;
+		}
+		span, label, a {
+			border-radius: inherit;
+			height: 100%;
+		}
+		span {
+			margin: auto;
+			top: 0;
+			width: 100%;
+			transform: scaleY(0);
+			transform-origin: 50% 0;
+		}
+		a {
+			color: currentColor;
+			text-decoration: none;
+			&:before {
+				background: $ketchup;
+				background-image:
+						radial-gradient(0.4em 0.2em at 3.3em 0.1em,$ketchupLt 49%,$ketchupLtT 50%);
+				border-radius: 0.2em;
+				box-shadow: 0 -0.1em 0 $ketchupSh inset;
+				content: "";
+				display: block;
+				position: absolute;
+				top: 62%;
+				left: 50%;
+				width: 3.5em;
+				height: 0.4em;
+				transform: translateX(-50%) scaleX(0);
+				transform-origin: 0 50%;
+				transition: transform 0.2s linear;
+			}
+			&:hover:before {
+				transform: translateX(-50%) scaleX(1);
+			}
+		}
+		.sr {
+			overflow: hidden;
+			width: 0;
+			height: 0;
+		}
+	}
+	input:checked + ul li {
+		$items: 6;
+		$hoverTransX: -60%;
+		@for $i from 1 through $items {
+			&:nth-child(#{$i}) {
+				@if $i == 1 or $i == 6 {
+					border-radius: 50%;
+					box-shadow:
+						0.1em 0 0 $bun inset,
+						-0.1em 0 0 $bun inset,
+						0 0.1em 0 $bun inset,
+						0 -0.1em 0 $bun inset;
+					height: 4.4em;
+					@if $i == 1 {
+						transform: translate(-50%,-3.5em);
+					}
+					@else {
+						background-position: 0 2.2em;
+						transform: translate(-50%,22.8em);
+					}
+				}
+				@elseif $i == 2 {
+					background-position: 0 0;
+					border-radius: 50%;
+					box-shadow:
+						0.3em 0 0 $burger inset,
+						-0.3em 0 0 $burger inset,
+						0 0.3em 0 $burger inset,
+						0 -0.3em 0 $burger inset;
+					height: 4.8em;
+					transform: translate(-50%,1.6em);
+				}
+				@elseif $i == 3 {
+					border-radius: 0.2em;
+					height: 4em;
+					transform: translate(-50%,6.6em);
+					&:before {
+						transform: rotate(-90deg);
+					}
+				}
+				@elseif $i == 4 {
+					border-radius: 1.5em 1em 1.2em 0.8em;
+					height: 4.5em;
+					transform: translate(-50%,10.9em);
+				}
+				@else {
+					border-radius: 50%;
+					background-position: 0 0;
+					box-shadow:
+						0.4em 0 0 $tomato inset,
+						-0.4em 0 0 $tomato inset,
+						0 0.4em 0 $tomato inset,
+						0 -0.4em 0 $tomato inset;
+					height: 5em;
+					transform: translate(-50%,15.8em);
+				}
+			}
+		}
+		span {
+			transform: scaleY(1);
+		}
+	}
+}
\ No newline at end of file
diff --git a/3d-polaroid-world/README.markdown b/3d-polaroid-world/README.markdown
new file mode 100644
index 0000000..37dbbde
--- /dev/null
+++ b/3d-polaroid-world/README.markdown
@@ -0,0 +1,20 @@
+# 3D Polaroid World
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ilithya/pen/PoZmOzy](https://codepen.io/ilithya/pen/PoZmOzy).
+
+I created a small interactive virtual gallery with ThreeJS for my #anydayshaders on-going experiments.
+
+I was inspired by a real 3D polaroid exhibition I saw in my city, and by the virtual gallery from CODAME where some of my shaders are being displayed: https://newart.city/show/frag
+
+- Move around the space in all directions by dragging your cursor or dragging with a finger on touch devices.
+- Zoom in/out with mouse wheel or a two fingers gesture in trackpad and touch devices.
+- Press the play/stop button to toggle all animations.
+- Press buttons to change the world's mood: multicolored vs. monochrome black and white <3. 
+
+For now you can enjoy some music by Deftones while you browse the gallery via the SoundCloud Widget API — it was recently 20 years of their White Pony album on June 20, 2020: https://www.deftones.com/
+
+Maybe one day I'll get to showcase my code art in a real gallery with an installation of this form 🥳
+
+Follow my shader experiments here: https://github.com/ilithya/anydayshaders
+
+Enjoy! :)
diff --git a/3d-polaroid-world/dist/index.html b/3d-polaroid-world/dist/index.html
new file mode 100644
index 0000000..7ff401e
--- /dev/null
+++ b/3d-polaroid-world/dist/index.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 3D Polaroid World</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- Comment the IFRAME if you wan't to get rid of the SOUNDCLOUD WIDGET API -->
+<iframe width="100%" height="58" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/214692735&color=%23ff69b4&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false"></iframe>
+
+<div id="canvas-wrapper" aria-label="3D Polaroid World"></div>
+
+<div class="toggle toggle--anim p-flex-hzt-center" id="toggle-anim">
+  <button class="toggle__btn toggle__btn--anim p-text" type="button" data-action="pause" title="pause">||</button>
+</div>
+
+<div class="toggle p-flex-hzt-center" id="toggle-color">
+	<button class="toggle__btn p-text" type="button" data-mode="multicolored" data-active="true">multicolored</button>
+	<button class="toggle__btn p-text" type="button" data-mode="monochrome">monochrome</button>
+</div>
+
+<p class="credit p-text"><a href="https://www.ilithya.rocks/" target="blank" rel="external noopener" class="credit__link">by ilithya.rocks</a></p>
+
+<script id="vertex" type="x-shader/x-vertex">
+	varying vec3 vUv; 
+
+    void main() {
+		vUv = position; 
+		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+</script>
+
+<script id="frag-pixel" type="x-shader/x-vertex">
+// Shader code remix after: Author @patriciogv - 2015
+precision highp float;
+		
+varying vec3 vUv; 
+
+uniform vec2 u_gb;
+uniform vec2 u_resolution;
+uniform float u_time;
+
+float random (vec2 st) {
+    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
+}
+	
+void main() {	
+    vec2 st = vUv.xy/u_resolution.xy;	
+	float fr = 12.;
+
+    st *= u_resolution.xy/fr;
+    vec2 ipos = floor(st);
+	float c1 = abs(sin(u_time*2.4*random(ipos)));
+	float mono = c1;
+	vec2 cmono = u_gb == vec2(1.0, 1.0) ? vec2(mono) : u_gb;
+
+	vec3 color = vec3(c1, cmono);
+    gl_FragColor = vec4(color, 1.0);
+}
+</script>
+
+<script id="frag-lines" type="x-shader/x-vertex">
+// Shader code remix after: Author @patriciogv - 2015
+precision highp float;
+		
+varying vec3 vUv; 
+
+uniform vec2 u_gb;
+uniform vec2 u_resolution;
+uniform float u_time;
+
+float random (vec2 st) {
+    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
+}
+
+void main() {
+    vec2 st = vUv.y/u_resolution.xy;
+	float fr = 4.;
+	
+    st *= u_resolution.xy/fr;
+    vec2 ipos = floor(st);
+	float c1 = abs(sin(u_time*2.6*random(ipos)));
+	float mono = c1;
+	vec2 cmono = u_gb == vec2(1.0, 1.0) ? vec2(mono) : u_gb;
+
+	vec3 color = vec3(c1, cmono);
+    gl_FragColor = vec4(color, 1.0);
+}
+</script>
+
+<script id="frag-halftone" type="x-shader/x-vertex">
+precision highp float;
+		
+varying vec3 vUv; 
+
+uniform vec2 u_gb;
+uniform vec2 u_resolution;
+uniform float u_time;
+
+// Only random and circle functions by @patriciogv - 2015 - patricio.io
+float random (vec2 st) {
+    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
+}
+	
+float circle(vec2 _st, float _radius){	
+    vec2 pos = vec2(.5)-_st;
+    return smoothstep(1.0-_radius, 1.0-_radius+_radius*0.2, 1.-dot(pos,pos)*3.14*6.);
+}
+	
+void main() {	
+    vec2 st = vUv.xy/u_resolution.xy;
+	st *= u_resolution.xy; // Fixes glitch shader bug
+	
+	float i = 5.5;
+    vec2 str = st;
+	str /= i;
+    vec2 ipos = ceil(str);	
+	float c1 = 1.0-circle(fract(st/i), abs(sin(u_time*3.*random(ipos))));
+	float mono = c1;
+	vec2 cmono = u_gb == vec2(1.0, 1.0) ? vec2(mono) : u_gb;
+
+	vec3 color = vec3(c1, cmono);
+    gl_FragColor = vec4(color, 1.0);
+}
+</script>
+
+<script id="frag-mixshaped" type="x-shader/x-vertex">
+precision highp float;
+		
+varying vec3 vUv; 
+
+uniform vec2 u_gb;
+uniform vec2 u_resolution;
+uniform float u_time;
+
+// Only random and circle functions by @patriciogv - 2015 - patricio.io
+float random (vec2 st) {
+    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
+}
+	
+float circle(vec2 _st, float _radius){	
+    vec2 pos = vec2(.5)-_st;
+    return smoothstep(1.0-_radius, 1.0-_radius+_radius*0.2, 1.-dot(pos,pos)*3.14*5.);
+}
+	
+void main() {
+    vec2 st = vUv.xy/u_resolution.xy;
+	st *= u_resolution.xy;
+	
+	float i = 12.;
+    vec2 str = st;
+	str /= i;
+    vec2 ipos = ceil(str);	
+	float c1 = 1.0-circle(fract(st/(i*2.)), abs(sin(u_time*3.*random(ipos))));
+	float mono = c1;
+	vec2 cmono = u_gb == vec2(1.0, 1.0) ? vec2(mono) : u_gb;
+
+	vec3 color = vec3(c1, cmono);
+    gl_FragColor = vec4(color, 1.0);
+}
+</script>
+<!-- partial -->
+  <script src='https://unpkg.com/three@0.117.1/build/three.min.js'></script>
+<script src='https://unpkg.com/three@0.117.1/examples/js/controls/OrbitControls.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/3d-polaroid-world/dist/script.js b/3d-polaroid-world/dist/script.js
new file mode 100644
index 0000000..19d68c4
--- /dev/null
+++ b/3d-polaroid-world/dist/script.js
@@ -0,0 +1,342 @@
+/*
+ * 3D POLAROID WORLD
+ * Small virtual gallery for my GLSL #anydayshaders on-going experiments.
+ *
+ * - Move around the space in all directions by dragging your cursor or dragging with a finger on touch devices.
+ * - Zoom in/out with mouse wheel or a two fingers gesture in trackpad and touch devices.
+ * - Press the play/stop button to toggle all animations.
+ * - Press buttons to change the world's mood: multicolored vs. monochrome black and white <3.
+ *
+ * Follow my shader experiments here:
+ * https://github.com/ilithya/anydayshaders
+ * https://twitter.com/hashtag/anydayshaders
+ * https://www.instagram.com/explore/tags/anydayshaders/
+ *
+ * For now you can enjoy some music by Deftones while you browse the gallery via the SoundCloud Widget API at the top of your screen — it was recently 20 years of their White Pony album on June 20, 2020: 
+ * https://www.youtube.com/watch?v=XLOKz155aXg
+ * https://www.deftones.com/
+ *
+ * Maybe one day I'll get to showcase my code art in a real gallery with an installation of this form. :D
+ *
+ * #055 - #100DaysOfCode
+ * By ilithya | 2020
+ * https://www.ilithya.rocks/
+ * https://twitter.com/ilithya_net
+ */
+
+// GLOBAL POLAROID FILM
+const nearDist = 1;
+const farDist = 1400;
+const camera = new THREE.PerspectiveCamera(
+45,
+window.innerWidth / window.innerHeight,
+nearDist,
+farDist);
+
+const scene = new THREE.Scene();
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+const canvasWrapper = document.querySelector("#canvas-wrapper");
+const clock = new THREE.Clock();
+const tau = 2 * Math.PI;
+let controls;
+
+const init = () => {
+  camera.position.set(0, 0, 150);
+
+  renderer.setClearColor("hotpink");
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(window.innerWidth, window.innerHeight);
+
+  canvasWrapper.appendChild(renderer.domElement);
+};
+init();
+
+const updateObjMatrix = object => {
+  object.updateMatrix();
+  object.matrixAutoUpdate = false;
+};
+
+// INSTANT FILM
+const iWidth = 170;
+const iHeight = iWidth * 1.2;
+const iDepth = iWidth / 5;
+const filmGeometry = new THREE.BoxBufferGeometry(
+iWidth,
+iHeight,
+iDepth);
+
+const emissiveLight = "#f9e6de"; // creamy
+const materialOptions = {
+  emissive: emissiveLight,
+  shininess: 80 };
+
+const filmMaterial = new THREE.MeshPhongMaterial(materialOptions);
+
+// Add light for MeshPhongMaterial to be visible in scene
+const spotLight = new THREE.SpotLight('#fffffd', 0.3);
+spotLight.position.set(100, 400, 100);
+scene.add(spotLight);
+
+// INSTANT FILM PRINTS
+const pWidth = iWidth / 1.2;
+const printGeometry = new THREE.PlaneBufferGeometry(
+pWidth,
+pWidth,
+1);
+
+const printMaterial = new THREE.MeshBasicMaterial({ color: "#000" });
+
+const Film = function (group) {
+  this.group = group;
+};
+
+let printMesh;
+Film.prototype.create = function () {
+  const iFilm = new THREE.Mesh(filmGeometry, filmMaterial);
+  printMesh = new THREE.Mesh(printGeometry, printMaterial);
+
+  printMesh.position.y = pWidth / 10;
+  printMesh.position.z = iDepth - 15;
+
+  updateObjMatrix(printMesh);
+
+  this.group.add(iFilm);
+  this.group.add(printMesh);
+};
+
+const addPrintMeshMaterial = (gp, newMat) => gp.children[1].material = newMat;
+
+const vertexShader = document.querySelector("#vertex").textContent;
+const fragPixelShader = document.querySelector("#frag-pixel").textContent;
+const fragLinesShader = document.querySelector("#frag-lines").textContent;
+const fragHalftoneShader = document.querySelector("#frag-halftone").textContent;
+const fragMixshapedShader = document.querySelector("#frag-mixshaped").textContent;
+
+const instantGroup = new THREE.Group();
+
+const uniformMulti = { type: "v2", value: new THREE.Vector2(0.52, 0.75) };
+const uniformMono = { type: "v2", value: new THREE.Vector2(1.0, 1.0) };
+const uniforms = {
+  u_gb: uniformMulti,
+  u_resolution: { type: "v2", value: new THREE.Vector2(1.0, 1.0) },
+  u_time: { type: "f", value: 1.0 } };
+
+const setShaderMaterial = fragShader => new THREE.ShaderMaterial({
+  uniforms,
+  fragmentShader: fragShader,
+  vertexShader });
+
+
+const pixelPolaroid = setShaderMaterial(fragPixelShader);
+const linesPolaroid = setShaderMaterial(fragLinesShader);
+const halftonePolaroid = setShaderMaterial(fragHalftoneShader);
+const mixshapedPolaroid = setShaderMaterial(fragMixshapedShader);
+
+const filmGroup_01 = new THREE.Group();
+const film_01 = new Film(filmGroup_01);
+film_01.create();
+addPrintMeshMaterial(filmGroup_01, pixelPolaroid);
+instantGroup.add(filmGroup_01);
+
+const filmGroup_02 = new THREE.Group();
+const film_02 = new Film(filmGroup_02);
+filmGroup_02.position.z = iWidth * 1.5;
+filmGroup_02.position.x = iWidth * 1.5;
+filmGroup_02.rotation.y = tau / -4;
+updateObjMatrix(filmGroup_02);
+film_02.create();
+addPrintMeshMaterial(filmGroup_02, linesPolaroid);
+instantGroup.add(filmGroup_02);
+
+const filmGroup_03 = new THREE.Group();
+const film_03 = new Film(filmGroup_03);
+filmGroup_03.position.z = iWidth * 1.5;
+filmGroup_03.position.x = iWidth * -1.5;
+filmGroup_03.rotation.y = tau / 4;
+updateObjMatrix(filmGroup_03);
+film_03.create();
+addPrintMeshMaterial(filmGroup_03, halftonePolaroid);
+instantGroup.add(filmGroup_03);
+
+const filmGroup_04 = new THREE.Group();
+const film_04 = new Film(filmGroup_04);
+filmGroup_04.position.z = iWidth * 3;
+filmGroup_04.rotation.y = tau / 2;
+updateObjMatrix(filmGroup_04);
+film_04.create();
+addPrintMeshMaterial(filmGroup_04, mixshapedPolaroid);
+instantGroup.add(filmGroup_04);
+
+instantGroup.position.z = iWidth * -1.5;
+scene.add(instantGroup);
+
+// 3D CONFETTI
+const confettinstantGroup = new THREE.Group();
+const radius = 3.5;
+const triangleGeom = new THREE.TetrahedronBufferGeometry(radius);
+const triangleMat = new THREE.MeshNormalMaterial();
+
+function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+const randomizeMatrix = matrix => {
+  const position = new THREE.Vector3();
+  const rotation = new THREE.Euler();
+  const quaternion = new THREE.Quaternion();
+  const scale = new THREE.Vector3();
+
+  const d = nearDist * 340;
+  const d2 = d * 2;
+
+  position.x = Math.random() * d2 - d;
+  position.y = Math.random() * d2 - d;
+  position.z = Math.random() * d2 - d;
+
+  rotation.x = Math.random() * tau;
+  rotation.y = Math.random() * tau;
+  rotation.z = Math.random() * tau;
+
+  quaternion.setFromEuler(rotation);
+
+  scale.x = scale.y = scale.z = getRandomArbitrary(0.7, 1);
+
+  matrix.compose(position, quaternion, scale);
+};
+
+const matrix = new THREE.Matrix4();
+const count = Math.round(Math.max(window.innerWidth, window.innerHeight) / 8);
+const deco = new THREE.InstancedMesh(triangleGeom, triangleMat, count);
+
+for (let i = 0; i < count; i++) {
+  randomizeMatrix(matrix);
+  deco.setMatrixAt(i, matrix);
+}
+
+confettinstantGroup.add(deco);
+scene.add(confettinstantGroup);
+
+// WORLD COLOR & ANIMATION TOGGLE
+let IS_ANIMATED = true;
+const toggle = {
+  btnAnim: document.querySelector("#toggle-anim button"),
+  btnColor: document.querySelectorAll("#toggle-color button"),
+  updateMaterial(mode) {
+    const toggleMaterial =
+    mode === "monochrome" ? uniformMono : uniformMulti;
+
+    printMesh.material.uniforms.u_gb = toggleMaterial;
+    printMesh.material.uniformsNeedUpdate = true;
+  },
+  checkActiveBtnColor() {
+    this.btnColor.forEach(el => {
+      el.addEventListener("click", e => {
+        e.preventDefault();
+
+        const target = e.currentTarget;
+
+        this.btnColor.forEach(l => delete l.dataset.active);
+        target.dataset.active = true;
+
+        this.updateMaterial(target.dataset.mode);
+      });
+    });
+  },
+  checkActiveBtnAnim() {
+    this.btnAnim.addEventListener("click", e => {
+      e.preventDefault();
+
+      const target = e.currentTarget;
+      const txtPlay = `play`;
+      const txtPause = `pause`;
+      const iconPlay = `►`;
+      const iconPause = `||`;
+
+      function setBtnData(btn, icon) {
+        target.dataset.action = btn;
+        target.title = btn;
+        target.textContent = icon;
+      }
+
+      if (target.dataset.action === 'pause') {
+        setBtnData(txtPlay, iconPlay);
+        IS_ANIMATED = false;
+      } else {
+        setBtnData(txtPause, iconPause);
+        IS_ANIMATED = true;
+      }
+    });
+  } };
+
+toggle.checkActiveBtnColor();
+toggle.checkActiveBtnAnim();
+
+// SCREEN RESIZE
+const onWindowResize = () => {
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+
+  camera.aspect = w / h;
+  camera.updateProjectionMatrix();
+
+  renderer.setSize(w, h);
+
+  uniforms.u_resolution.value.x = renderer.domElement.width;
+  uniforms.u_resolution.value.y = renderer.domElement.height;
+};
+window.addEventListener("resize", onWindowResize);
+
+// CONSTROLS INTERACTION
+const createControls = () => {
+  // Make sure to run controls outside render function 
+  controls = new THREE.OrbitControls(camera, renderer.domElement);
+
+  // If controls autoRotate true update controls
+  controls.autoRotateSpeed = 3.0;
+  controls.enableDamping = true;
+  controls.dampingFactor = 0.15;
+  controls.enableZoom = true;
+  controls.minDistance = 0;
+  controls.maxDistance = 750;
+  controls.keyPanSpeed = 30;
+  controls.update();
+};
+createControls();
+
+// CREATE ANIMATIONS
+const createAnimShaders = () => {
+  if (IS_ANIMATED) {
+    uniforms.u_time.value = clock.getElapsedTime();
+  }
+};
+
+const pos = 550;
+confettinstantGroup.position.y = pos;
+
+const createAnimConfetti = () => {
+  if (IS_ANIMATED) {
+    const time = 0.5;
+    let speed = time + Math.random() * time;
+    confettinstantGroup.position.y -= speed;
+
+    if (confettinstantGroup.position.y < -pos) {
+      confettinstantGroup.rotation.x = tau;
+      confettinstantGroup.position.y = pos;
+      speed = 0;
+    }
+  }
+};
+
+// RENDER 3D WORLD
+const render = () => {
+  createAnimShaders();
+  createAnimConfetti();
+
+  controls.autoRotate = IS_ANIMATED ? true : false;
+  controls.update();
+
+  renderer.render(scene, camera);
+
+  requestAnimationFrame(render);
+};
+render();
\ No newline at end of file
diff --git a/3d-polaroid-world/dist/style.css b/3d-polaroid-world/dist/style.css
new file mode 100644
index 0000000..d1bd654
--- /dev/null
+++ b/3d-polaroid-world/dist/style.css
@@ -0,0 +1,94 @@
+* {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.p-text {
+  color: #fffffd;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 0.55rem;
+  letter-spacing: 2px;
+  line-height: 1.5;
+  text-align: center;
+  text-transform: lowercase;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.p-flex-hzt-center {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+}
+
+body {
+  height: 100vh;
+  background-color: hotpink;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+canvas {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+
+iframe {
+  width: calc(100% + 112px);
+  height: 58px;
+  position: absolute;
+  top: -6px;
+  left: -110px;
+}
+
+.toggle {
+  width: 100%;
+  position: absolute;
+  bottom: 36px;
+  left: 0;
+  z-index: 90;
+}
+.toggle--anim {
+  bottom: 70px;
+}
+.toggle__btn {
+  background-color: hotpink;
+  border: 1px solid #fffffd;
+  cursor: pointer;
+  outline: none;
+  padding: 5px 11px 5px 13px;
+  -webkit-transition: background-color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out;
+}
+.toggle__btn--anim {
+  border-color: hotpink;
+  font-size: 0.8rem;
+  padding: 2px 6px 2px 12px;
+}
+.toggle__btn--anim[data-action="pause"] {
+  padding-right: 9px;
+}
+.toggle__btn:not(.toggle__btn--anim):last-child {
+  border-left: 0;
+}
+.toggle__btn[data-active], .toggle__btn[data-action] {
+  background-color: #fffffd;
+  color: hotpink;
+  font-weight: bold;
+}
+
+.credit {
+  width: 100%;
+  position: absolute;
+  bottom: 5px;
+  left: 0;
+}
+.credit__link {
+  color: rgba(255, 255, 253, 0.6);
+  padding: 6px 15px 8px;
+  text-decoration: none;
+}
\ No newline at end of file
diff --git a/3d-polaroid-world/license.txt b/3d-polaroid-world/license.txt
new file mode 100644
index 0000000..e298d60
--- /dev/null
+++ b/3d-polaroid-world/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by ilithya (https://codepen.io/ilithya/pen/PoZmOzy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/3d-polaroid-world/src/index.html b/3d-polaroid-world/src/index.html
new file mode 100644
index 0000000..587e696
--- /dev/null
+++ b/3d-polaroid-world/src/index.html
@@ -0,0 +1,154 @@
+<!-- Comment the IFRAME if you wan't to get rid of the SOUNDCLOUD WIDGET API -->
+<iframe width="100%" height="58" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/214692735&color=%23ff69b4&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false"></iframe>
+
+<div id="canvas-wrapper" aria-label="3D Polaroid World"></div>
+
+<div class="toggle toggle--anim p-flex-hzt-center" id="toggle-anim">
+  <button class="toggle__btn toggle__btn--anim p-text" type="button" data-action="pause" title="pause">||</button>
+</div>
+
+<div class="toggle p-flex-hzt-center" id="toggle-color">
+	<button class="toggle__btn p-text" type="button" data-mode="multicolored" data-active="true">multicolored</button>
+	<button class="toggle__btn p-text" type="button" data-mode="monochrome">monochrome</button>
+</div>
+
+<p class="credit p-text"><a href="https://www.ilithya.rocks/" target="blank" rel="external noopener" class="credit__link">by ilithya.rocks</a></p>
+
+<script id="vertex" type="x-shader/x-vertex">
+	varying vec3 vUv; 
+
+    void main() {
+		vUv = position; 
+		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+</script>
+
+<script id="frag-pixel" type="x-shader/x-vertex">
+// Shader code remix after: Author @patriciogv - 2015
+precision highp float;
+		
+varying vec3 vUv; 
+
+uniform vec2 u_gb;
+uniform vec2 u_resolution;
+uniform float u_time;
+
+float random (vec2 st) {
+    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
+}
+	
+void main() {	
+    vec2 st = vUv.xy/u_resolution.xy;	
+	float fr = 12.;
+
+    st *= u_resolution.xy/fr;
+    vec2 ipos = floor(st);
+	float c1 = abs(sin(u_time*2.4*random(ipos)));
+	float mono = c1;
+	vec2 cmono = u_gb == vec2(1.0, 1.0) ? vec2(mono) : u_gb;
+
+	vec3 color = vec3(c1, cmono);
+    gl_FragColor = vec4(color, 1.0);
+}
+</script>
+
+<script id="frag-lines" type="x-shader/x-vertex">
+// Shader code remix after: Author @patriciogv - 2015
+precision highp float;
+		
+varying vec3 vUv; 
+
+uniform vec2 u_gb;
+uniform vec2 u_resolution;
+uniform float u_time;
+
+float random (vec2 st) {
+    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
+}
+
+void main() {
+    vec2 st = vUv.y/u_resolution.xy;
+	float fr = 4.;
+	
+    st *= u_resolution.xy/fr;
+    vec2 ipos = floor(st);
+	float c1 = abs(sin(u_time*2.6*random(ipos)));
+	float mono = c1;
+	vec2 cmono = u_gb == vec2(1.0, 1.0) ? vec2(mono) : u_gb;
+
+	vec3 color = vec3(c1, cmono);
+    gl_FragColor = vec4(color, 1.0);
+}
+</script>
+
+<script id="frag-halftone" type="x-shader/x-vertex">
+precision highp float;
+		
+varying vec3 vUv; 
+
+uniform vec2 u_gb;
+uniform vec2 u_resolution;
+uniform float u_time;
+
+// Only random and circle functions by @patriciogv - 2015 - patricio.io
+float random (vec2 st) {
+    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
+}
+	
+float circle(vec2 _st, float _radius){	
+    vec2 pos = vec2(.5)-_st;
+    return smoothstep(1.0-_radius, 1.0-_radius+_radius*0.2, 1.-dot(pos,pos)*3.14*6.);
+}
+	
+void main() {	
+    vec2 st = vUv.xy/u_resolution.xy;
+	st *= u_resolution.xy; // Fixes glitch shader bug
+	
+	float i = 5.5;
+    vec2 str = st;
+	str /= i;
+    vec2 ipos = ceil(str);	
+	float c1 = 1.0-circle(fract(st/i), abs(sin(u_time*3.*random(ipos))));
+	float mono = c1;
+	vec2 cmono = u_gb == vec2(1.0, 1.0) ? vec2(mono) : u_gb;
+
+	vec3 color = vec3(c1, cmono);
+    gl_FragColor = vec4(color, 1.0);
+}
+</script>
+
+<script id="frag-mixshaped" type="x-shader/x-vertex">
+precision highp float;
+		
+varying vec3 vUv; 
+
+uniform vec2 u_gb;
+uniform vec2 u_resolution;
+uniform float u_time;
+
+// Only random and circle functions by @patriciogv - 2015 - patricio.io
+float random (vec2 st) {
+    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
+}
+	
+float circle(vec2 _st, float _radius){	
+    vec2 pos = vec2(.5)-_st;
+    return smoothstep(1.0-_radius, 1.0-_radius+_radius*0.2, 1.-dot(pos,pos)*3.14*5.);
+}
+	
+void main() {
+    vec2 st = vUv.xy/u_resolution.xy;
+	st *= u_resolution.xy;
+	
+	float i = 12.;
+    vec2 str = st;
+	str /= i;
+    vec2 ipos = ceil(str);	
+	float c1 = 1.0-circle(fract(st/(i*2.)), abs(sin(u_time*3.*random(ipos))));
+	float mono = c1;
+	vec2 cmono = u_gb == vec2(1.0, 1.0) ? vec2(mono) : u_gb;
+
+	vec3 color = vec3(c1, cmono);
+    gl_FragColor = vec4(color, 1.0);
+}
+</script>
\ No newline at end of file
diff --git a/3d-polaroid-world/src/script.babel b/3d-polaroid-world/src/script.babel
new file mode 100644
index 0000000..1aae2a7
--- /dev/null
+++ b/3d-polaroid-world/src/script.babel
@@ -0,0 +1,342 @@
+/*
+ * 3D POLAROID WORLD
+ * Small virtual gallery for my GLSL #anydayshaders on-going experiments.
+ *
+ * - Move around the space in all directions by dragging your cursor or dragging with a finger on touch devices.
+ * - Zoom in/out with mouse wheel or a two fingers gesture in trackpad and touch devices.
+ * - Press the play/stop button to toggle all animations.
+ * - Press buttons to change the world's mood: multicolored vs. monochrome black and white <3.
+ *
+ * Follow my shader experiments here:
+ * https://github.com/ilithya/anydayshaders
+ * https://twitter.com/hashtag/anydayshaders
+ * https://www.instagram.com/explore/tags/anydayshaders/
+ *
+ * For now you can enjoy some music by Deftones while you browse the gallery via the SoundCloud Widget API at the top of your screen — it was recently 20 years of their White Pony album on June 20, 2020: 
+ * https://www.youtube.com/watch?v=XLOKz155aXg
+ * https://www.deftones.com/
+ *
+ * Maybe one day I'll get to showcase my code art in a real gallery with an installation of this form. :D
+ *
+ * #055 - #100DaysOfCode
+ * By ilithya | 2020
+ * https://www.ilithya.rocks/
+ * https://twitter.com/ilithya_net
+ */
+
+// GLOBAL POLAROID FILM
+const nearDist = 1;
+const farDist = 1400;
+const camera = new THREE.PerspectiveCamera(
+	45,
+	window.innerWidth / window.innerHeight,
+	nearDist,
+	farDist
+);
+const scene = new THREE.Scene();
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+const canvasWrapper = document.querySelector("#canvas-wrapper");
+const clock = new THREE.Clock();
+const tau = 2*Math.PI;
+let controls;
+
+const init = () => {
+	camera.position.set(0, 0, 150);
+
+	renderer.setClearColor("hotpink");
+	renderer.setPixelRatio(window.devicePixelRatio);
+	renderer.setSize(window.innerWidth, window.innerHeight);
+
+	canvasWrapper.appendChild(renderer.domElement);
+};
+init();
+
+const updateObjMatrix = (object) => {
+	object.updateMatrix();
+	object.matrixAutoUpdate = false;
+};
+
+// INSTANT FILM
+const iWidth = 170;
+const iHeight = iWidth * 1.2;
+const iDepth = iWidth / 5;
+const filmGeometry = new THREE.BoxBufferGeometry(
+	iWidth,
+	iHeight,
+	iDepth
+);
+const emissiveLight = "#f9e6de"; // creamy
+const materialOptions = {
+	emissive: emissiveLight,
+	shininess: 80
+};
+const filmMaterial = new THREE.MeshPhongMaterial(materialOptions);
+
+// Add light for MeshPhongMaterial to be visible in scene
+const spotLight = new THREE.SpotLight('#fffffd', 0.3);
+spotLight.position.set(100, 400, 100);
+scene.add(spotLight);
+
+// INSTANT FILM PRINTS
+const pWidth = iWidth/1.2;
+const printGeometry = new THREE.PlaneBufferGeometry(
+	pWidth,
+	pWidth,
+	1
+);
+const printMaterial = new THREE.MeshBasicMaterial({ color: "#000" });
+
+const Film = function (group) {
+	this.group = group;
+};
+
+let printMesh;
+Film.prototype.create = function () {
+	const iFilm = new THREE.Mesh(filmGeometry, filmMaterial);
+	printMesh = new THREE.Mesh(printGeometry, printMaterial);
+
+	printMesh.position.y = pWidth/10;
+	printMesh.position.z = iDepth - 15;
+
+	updateObjMatrix(printMesh);
+	
+	this.group.add(iFilm);
+	this.group.add(printMesh);
+};
+
+const addPrintMeshMaterial = (gp, newMat) => gp.children[1].material = newMat;
+
+const vertexShader = document.querySelector("#vertex").textContent;
+const fragPixelShader = document.querySelector("#frag-pixel").textContent;
+const fragLinesShader = document.querySelector("#frag-lines").textContent;
+const fragHalftoneShader = document.querySelector("#frag-halftone").textContent;
+const fragMixshapedShader = document.querySelector("#frag-mixshaped").textContent;
+
+const instantGroup = new THREE.Group();
+
+const uniformMulti = { type: "v2", value: new THREE.Vector2(0.52, 0.75) };
+const uniformMono = { type: "v2", value: new THREE.Vector2(1.0, 1.0) };
+const uniforms = {
+	u_gb: uniformMulti,
+	u_resolution: { type: "v2", value: new THREE.Vector2(1.0, 1.0) },
+	u_time: { type: "f", value: 1.0 },
+};
+const setShaderMaterial = (fragShader) => new THREE.ShaderMaterial({
+	uniforms,
+	fragmentShader: fragShader,
+	vertexShader,
+});
+
+const pixelPolaroid = setShaderMaterial(fragPixelShader);
+const linesPolaroid = setShaderMaterial(fragLinesShader);
+const halftonePolaroid = setShaderMaterial(fragHalftoneShader);
+const mixshapedPolaroid = setShaderMaterial(fragMixshapedShader);
+
+const filmGroup_01 = new THREE.Group();
+const film_01 = new Film(filmGroup_01);
+film_01.create();
+addPrintMeshMaterial(filmGroup_01, pixelPolaroid);
+instantGroup.add(filmGroup_01);
+
+const filmGroup_02 = new THREE.Group();
+const film_02 = new Film(filmGroup_02);
+filmGroup_02.position.z = iWidth*1.5;
+filmGroup_02.position.x = iWidth*1.5;
+filmGroup_02.rotation.y = tau/-4;
+updateObjMatrix(filmGroup_02);
+film_02.create();
+addPrintMeshMaterial(filmGroup_02, linesPolaroid);
+instantGroup.add(filmGroup_02);
+
+const filmGroup_03 = new THREE.Group();
+const film_03 = new Film(filmGroup_03);
+filmGroup_03.position.z = iWidth*1.5;
+filmGroup_03.position.x = iWidth*-1.5;
+filmGroup_03.rotation.y = tau/4;
+updateObjMatrix(filmGroup_03);
+film_03.create();
+addPrintMeshMaterial(filmGroup_03, halftonePolaroid);
+instantGroup.add(filmGroup_03);
+
+const filmGroup_04 = new THREE.Group();
+const film_04 = new Film(filmGroup_04);
+filmGroup_04.position.z = iWidth*3;
+filmGroup_04.rotation.y = tau/2;
+updateObjMatrix(filmGroup_04);
+film_04.create();
+addPrintMeshMaterial(filmGroup_04, mixshapedPolaroid);
+instantGroup.add(filmGroup_04);
+
+instantGroup.position.z = iWidth*-1.5;
+scene.add(instantGroup);
+
+// 3D CONFETTI
+const confettinstantGroup = new THREE.Group();
+const radius = 3.5;
+const triangleGeom = new THREE.TetrahedronBufferGeometry(radius);
+const triangleMat = new THREE.MeshNormalMaterial();
+
+function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+const randomizeMatrix = (matrix) => {
+	const position = new THREE.Vector3();
+	const rotation = new THREE.Euler();
+	const quaternion = new THREE.Quaternion();
+	const scale = new THREE.Vector3();	
+
+	const d = nearDist * 340;
+	const d2 = d * 2;
+
+	position.x = Math.random() * d2 - d;
+	position.y = Math.random() * d2 - d;
+	position.z = Math.random() * d2 - d;
+
+	rotation.x = Math.random() * tau;
+	rotation.y = Math.random() * tau;
+	rotation.z = Math.random() * tau;
+
+	quaternion.setFromEuler(rotation);
+
+	scale.x = scale.y = scale.z = getRandomArbitrary(0.7, 1);
+
+	matrix.compose(position, quaternion, scale);
+};
+
+const matrix = new THREE.Matrix4();
+const count = Math.round(Math.max(window.innerWidth, window.innerHeight) / 8);
+const deco = new THREE.InstancedMesh(triangleGeom, triangleMat, count);
+
+for (let i = 0; i < count; i++) {
+	randomizeMatrix(matrix);
+	deco.setMatrixAt(i, matrix);
+}
+
+confettinstantGroup.add(deco);
+scene.add(confettinstantGroup);
+
+// WORLD COLOR & ANIMATION TOGGLE
+let IS_ANIMATED = true;
+const toggle = {
+	btnAnim: document.querySelector("#toggle-anim button"),
+	btnColor: document.querySelectorAll("#toggle-color button"),
+	updateMaterial(mode) {
+		const toggleMaterial =
+			mode === "monochrome" ? uniformMono : uniformMulti;
+
+		printMesh.material.uniforms.u_gb = toggleMaterial;
+		printMesh.material.uniformsNeedUpdate = true;
+	},
+	checkActiveBtnColor() {
+		this.btnColor.forEach((el) => {
+			el.addEventListener("click", (e) => {
+				e.preventDefault();
+
+				const target = e.currentTarget;
+
+				this.btnColor.forEach((l) => delete l.dataset.active);
+				target.dataset.active = true;
+
+				this.updateMaterial(target.dataset.mode);
+			});
+		});
+	},
+	checkActiveBtnAnim() {
+		this.btnAnim.addEventListener("click", (e) => {
+			e.preventDefault();
+
+			const target = e.currentTarget;
+			const txtPlay = `play`;
+			const txtPause = `pause`;
+			const iconPlay = `►`;
+			const iconPause = `||`;
+			
+			function setBtnData(btn, icon) {
+				target.dataset.action = btn;
+				target.title = btn;
+				target.textContent = icon;
+			}
+		
+			if (target.dataset.action === 'pause') {
+				setBtnData(txtPlay, iconPlay);
+				IS_ANIMATED = false;
+			} else {
+				setBtnData(txtPause, iconPause);
+				IS_ANIMATED = true;
+			}
+		});
+	}
+};
+toggle.checkActiveBtnColor();
+toggle.checkActiveBtnAnim();
+
+// SCREEN RESIZE
+const onWindowResize = () => {
+	const w = window.innerWidth;
+	const h = window.innerHeight;
+	
+	camera.aspect = w / h;
+	camera.updateProjectionMatrix();
+
+	renderer.setSize(w, h);
+	
+	uniforms.u_resolution.value.x = renderer.domElement.width;
+	uniforms.u_resolution.value.y = renderer.domElement.height;
+};
+window.addEventListener("resize", onWindowResize);
+
+// CONSTROLS INTERACTION
+const createControls = () => {
+	// Make sure to run controls outside render function 
+	controls = new THREE.OrbitControls(camera, renderer.domElement);
+	
+	// If controls autoRotate true update controls
+	controls.autoRotateSpeed = 3.0;
+	controls.enableDamping = true;
+	controls.dampingFactor = 0.15;
+	controls.enableZoom = true;
+	controls.minDistance = 0;
+	controls.maxDistance = 750;
+	controls.keyPanSpeed = 30;
+	controls.update();
+};
+createControls();
+
+// CREATE ANIMATIONS
+const createAnimShaders = () => {
+	if (IS_ANIMATED) {
+		uniforms.u_time.value = clock.getElapsedTime();
+	}
+};
+
+const pos = 550;
+confettinstantGroup.position.y = pos;
+
+const createAnimConfetti = () => {	
+	if (IS_ANIMATED) {
+		const time = 0.5;
+		let speed = time + Math.random() * time;
+		confettinstantGroup.position.y -= speed;
+
+		if (confettinstantGroup.position.y < -pos) {
+			confettinstantGroup.rotation.x = tau;
+			confettinstantGroup.position.y = pos;
+			speed = 0;
+		}
+	}
+};
+
+// RENDER 3D WORLD
+const render = () => {	
+	createAnimShaders();
+	createAnimConfetti();
+
+	controls.autoRotate = IS_ANIMATED ? true : false;
+	controls.update();
+	
+	renderer.render(scene, camera);
+
+	requestAnimationFrame(render);
+};
+render();
\ No newline at end of file
diff --git a/3d-polaroid-world/src/style.scss b/3d-polaroid-world/src/style.scss
new file mode 100644
index 0000000..b5202de
--- /dev/null
+++ b/3d-polaroid-world/src/style.scss
@@ -0,0 +1,103 @@
+$c1: hotpink;
+$c2: #fffffd; // white
+
+* {
+	user-select: none;
+}
+
+.p-text {
+	color: $c2;
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 0.55rem;
+	letter-spacing: 2px;
+	line-height: 1.5;
+	text-align: center;
+	text-transform: lowercase;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+.p-flex-hzt-center {
+	display: flex;
+	justify-content: center;
+}
+
+body {
+	height: 100vh;
+	background-color: $c1;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	position: relative;
+}
+
+canvas {
+	cursor: grab;
+}
+
+iframe {
+	width: calc(100% + 112px);
+	height: 58px;
+	position: absolute;
+	top: -6px;
+	left: -110px;
+}
+
+.toggle {
+	width: 100%;
+	position: absolute;
+	bottom: 36px;
+	left: 0;
+	z-index: 90;
+	
+	&--anim {
+		bottom: 70px;
+	}
+	
+	&__btn {
+		$gap: 5px;
+		$gap_anim: 2px;
+		
+		background-color: $c1;
+		border: 1px solid $c2;
+		cursor: pointer;
+		outline: none;
+		padding: $gap round($gap * 2.2) $gap round($gap * 2.5);
+		transition: background-color 0.2s ease-in-out;
+
+		&--anim {
+			border-color: $c1;
+			font-size: 0.8rem;
+			padding: $gap_anim round($gap_anim * 3) $gap_anim round($gap_anim * 5.8);
+			
+			&[data-action="pause"] {
+				padding-right: round($gap_anim * 4.3);
+			}
+		}
+		
+		&:not(.toggle__btn--anim) {
+			&:last-child {
+				border-left: 0;
+			}
+		}
+		
+		&[data-active],
+		&[data-action] {
+			background-color: $c2;	
+			color: $c1;
+			font-weight: bold;
+		}
+	}
+}
+
+.credit {	
+	width: 100%;
+	position: absolute;
+	bottom: 5px;
+	left: 0;
+	
+	&__link {
+		color: rgba($c2, 0.6);
+		padding: 6px 15px 8px;
+		text-decoration: none;
+	}
+}
\ No newline at end of file
diff --git a/3d-spaceshipgsap/README.markdown b/3d-spaceshipgsap/README.markdown
new file mode 100644
index 0000000..35a05f8
--- /dev/null
+++ b/3d-spaceshipgsap/README.markdown
@@ -0,0 +1,5 @@
+# 3D SpaceShip - GSAP 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ricardoolivaalonso/pen/poWbBdK](https://codepen.io/ricardoolivaalonso/pen/poWbBdK).
+
+
diff --git a/3d-spaceshipgsap/dist/index.html b/3d-spaceshipgsap/dist/index.html
new file mode 100644
index 0000000..4bc9741
--- /dev/null
+++ b/3d-spaceshipgsap/dist/index.html
@@ -0,0 +1,363 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 3D SpaceShip - GSAP </title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<audio id="audio">
+  <source id="audio" src="https://rawcdn.githack.com/ricardoolivaalonso/Codepen/cc4996b50006214d2f3a1e8059bee90a7455d298/Space/audio.mp3" type="audio/mpeg"/>
+</audio>
+<svg class="svg-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 65.79" style="enable-background:new 0 0 122.88 65.79" xml:space="preserve">
+  <g>
+    <path class="st0" d="M13.37,31.32c-22.23,12.2,37.65,19.61,51.14,19.49v-7.44l11.21,11.2L64.51,65.79v-6.97 C37.4,59.85-26.41,42.4,11.97,27.92c0.36,1.13,0.8,2.2,1.3,3.2L13.37,31.32L13.37,31.32z M108.36,8.31c0-2.61,0.47-4.44,1.41-5.48 c0.94-1.04,2.37-1.56,4.3-1.56c0.92,0,1.69,0.12,2.28,0.34c0.59,0.23,1.08,0.52,1.45,0.89c0.38,0.36,0.67,0.75,0.89,1.15 c0.22,0.4,0.39,0.87,0.52,1.41c0.26,1.02,0.38,2.09,0.38,3.21c0,2.49-0.42,4.32-1.27,5.47c-0.84,1.15-2.29,1.73-4.36,1.73 c-1.15,0-2.09-0.19-2.8-0.55c-0.71-0.37-1.3-0.91-1.75-1.62c-0.33-0.51-0.59-1.2-0.77-2.07C108.45,10.34,108.36,9.38,108.36,8.31 L108.36,8.31z M26.47,10.49l-9-1.6c0.75-2.86,2.18-5.06,4.31-6.59C23.9,0.77,26.91,0,30.8,0c4.47,0,7.69,0.83,9.69,2.5 c1.99,1.67,2.98,3.77,2.98,6.29c0,1.48-0.41,2.82-1.21,4.01c-0.81,1.2-2.02,2.25-3.65,3.15c1.32,0.33,2.34,0.71,3.03,1.15 c1.14,0.7,2.02,1.63,2.65,2.77c0.63,1.15,0.95,2.51,0.95,4.1c0,2-0.52,3.91-1.56,5.75c-1.05,1.83-2.55,3.24-4.51,4.23 c-1.96,0.99-4.54,1.48-7.74,1.48c-3.11,0-5.57-0.37-7.36-1.1c-1.8-0.73-3.28-1.8-4.44-3.22c-1.16-1.41-2.05-3.19-2.67-5.33 l9.53-1.27c0.38,1.92,0.95,3.26,1.74,4.01c0.78,0.74,1.78,1.12,3,1.12c1.27,0,2.33-0.47,3.18-1.4c0.85-0.93,1.27-2.18,1.27-3.74 c0-1.59-0.41-2.82-1.22-3.69c-0.81-0.87-1.92-1.31-3.32-1.31c-0.74,0-1.77,0.18-3.07,0.56l0.49-6.81c0.52,0.08,0.93,0.12,1.22,0.12 c1.23,0,2.26-0.4,3.08-1.19c0.82-0.79,1.24-1.72,1.24-2.81c0-1.05-0.31-1.88-0.93-2.49c-0.62-0.62-1.48-0.93-2.55-0.93 c-1.12,0-2.02,0.34-2.72,1.01C27.19,7.62,26.72,8.8,26.47,10.49L26.47,10.49z M75.15,8.27l-9.48,1.16 c-0.25-1.32-0.66-2.24-1.24-2.78c-0.59-0.54-1.31-0.81-2.16-0.81c-1.54,0-2.74,0.77-3.59,2.33c-0.62,1.13-1.09,3.52-1.38,7.19 c1.14-1.16,2.31-2.01,3.5-2.56c1.2-0.55,2.59-0.83,4.16-0.83c3.06,0,5.64,1.09,7.75,3.27c2.11,2.19,3.17,4.96,3.17,8.31 c0,2.26-0.53,4.32-1.6,6.2c-1.07,1.87-2.55,3.29-4.44,4.25c-1.9,0.96-4.27,1.44-7.13,1.44c-3.43,0-6.18-0.58-8.25-1.76 c-2.07-1.17-3.73-3.03-4.97-5.59c-1.24-2.56-1.86-5.95-1.86-10.18c0-6.18,1.3-10.71,3.91-13.59C54.13,1.44,57.74,0,62.36,0 c2.73,0,4.88,0.31,6.46,0.94c1.58,0.63,2.9,1.56,3.94,2.76C73.81,4.92,74.61,6.44,75.15,8.27L75.15,8.27z M57.62,23.55 c0,1.86,0.47,3.31,1.4,4.36c0.94,1.05,2.08,1.58,3.44,1.58c1.25,0,2.3-0.48,3.14-1.43c0.84-0.95,1.26-2.37,1.26-4.26 c0-1.93-0.44-3.41-1.31-4.42c-0.88-1.01-1.96-1.52-3.26-1.52c-1.32,0-2.44,0.49-3.34,1.48C58.06,20.32,57.62,21.72,57.62,23.55 L57.62,23.55z M77.91,17.57c0-6.51,1.17-11.07,3.52-13.67C83.77,1.3,87.35,0,92.14,0c2.31,0,4.2,0.29,5.68,0.85 c1.48,0.57,2.69,1.31,3.62,2.22c0.94,0.91,1.68,1.87,2.21,2.87c0.54,1.01,0.97,2.18,1.3,3.52c0.64,2.55,0.96,5.22,0.96,8 c0,6.22-1.05,10.76-3.16,13.64c-2.1,2.88-5.72,4.32-10.87,4.32c-2.88,0-5.21-0.46-6.99-1.38c-1.78-0.92-3.23-2.27-4.37-4.05 c-0.82-1.26-1.47-2.98-1.93-5.17C78.14,22.64,77.91,20.22,77.91,17.57L77.91,17.57z M87.34,17.59c0,4.36,0.38,7.34,1.16,8.94 c0.77,1.6,1.89,2.39,3.36,2.39c0.97,0,1.8-0.34,2.51-1.01c0.71-0.68,1.23-1.76,1.56-3.22c0.34-1.47,0.5-3.75,0.5-6.85 c0-4.55-0.38-7.6-1.16-9.18c-0.77-1.56-1.93-2.35-3.47-2.35c-1.58,0-2.71,0.8-3.42,2.39C87.69,10.31,87.34,13.27,87.34,17.59 L87.34,17.59z M112.14,8.32c0,1.75,0.15,2.94,0.46,3.58c0.31,0.64,0.76,0.96,1.35,0.96c0.39,0,0.72-0.13,1.01-0.41 c0.28-0.27,0.49-0.7,0.63-1.29c0.13-0.59,0.2-1.5,0.2-2.74c0-1.82-0.15-3.05-0.46-3.68c-0.31-0.63-0.77-0.94-1.39-0.94 c-0.63,0-1.09,0.32-1.37,0.96C112.28,5.4,112.14,6.59,112.14,8.32L112.14,8.32z M109.3,30.23c10.56,5.37,8.04,12.99-10.66,17.62 c-5.3,1.31-11.29,2.5-17.86,2.99v6.05c7.31-0.51,14.11-2.19,20.06-3.63c28.12-6.81,27.14-18.97,9.36-25.83 C109.95,28.42,109.65,29.35,109.3,30.23L109.3,30.23z"></path>
+  </g>
+</svg>
+<div class="main" id="h">
+  <div class="main-rotate">
+    <div class="shadows">
+      <div class="shadow-5 shadow"></div>
+      <div class="shadow-4 shadow"></div>
+      <div class="shadow-1 shadow"></div>
+      <div class="shadow-2 shadow"></div>
+      <div class="shadow-3 shadow"></div>
+      <div class="light-1 shadow"></div>
+      <div class="light-2 shadow"></div>
+      <div class="light-3 shadow"></div>
+      <div class="light-4 shadow"></div>
+    </div>
+    <div class="wrapper-c1">
+      <div class="wrapper-c2">
+        <div class="wrapper-a">
+          <div class="a">
+            <div class="a__front face flex"> 
+              <div class="turbo">
+                <div class="circle flex">
+                  <div class="circle-a"> 
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__bottom"></div>
+                    <div class="circle-a__top"></div>
+                  </div>
+                </div>
+                <div class="circle flex">
+                  <div class="circle-b"> 
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__bottom"></div>
+                    <div class="circle-b__top"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="a__back face flex w1"> 
+              <div class="turbo-back">
+                <div class="turbo-back__item"></div>
+                <div class="turbo-back__item"></div>
+                <div class="turbo-back__item"></div>
+                <div class="turbo-back__item"></div>
+              </div>
+              <div class="wave-1 wave"></div>
+              <div class="wave-2 wave"></div>
+              <div class="wave-3 wave"></div>
+              <div class="wave-4 wave"></div>
+              <div class="wave-5 wave"></div>
+            </div>
+            <div class="a__right face"> </div>
+            <div class="a__left face"> </div>
+            <div class="a__top face"> 
+              <div class="a__top-shadow face"></div>
+              <div class="a__top-neon face"></div>
+            </div>
+            <div class="a__bottom face"> </div>
+          </div>
+          <div class="a">
+            <div class="a__front face flex"> 
+              <div class="turbo">
+                <div class="circle flex">
+                  <div class="circle-a"> 
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__side"></div>
+                    <div class="circle-a__bottom"></div>
+                    <div class="circle-a__top"></div>
+                  </div>
+                </div>
+                <div class="circle flex">
+                  <div class="circle-b"> 
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__side"></div>
+                    <div class="circle-b__bottom"></div>
+                    <div class="circle-b__top"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="a__back face flex w2">
+              <div class="turbo-back">
+                <div class="turbo-back__item"></div>
+                <div class="turbo-back__item"></div>
+                <div class="turbo-back__item"></div>
+                <div class="turbo-back__item"></div>
+              </div>
+              <div class="wave-1 wave"></div>
+              <div class="wave-2 wave"></div>
+              <div class="wave-3 wave"></div>
+              <div class="wave-4 wave"></div>
+              <div class="wave-5 wave"></div>
+            </div>
+            <div class="a__right face"> </div>
+            <div class="a__left face"> </div>
+            <div class="a__top face"> 
+              <div class="a__top-shadow face"></div>
+              <div class="a__top-neon face"></div>
+            </div>
+            <div class="a__bottom face"> </div>
+          </div>
+          <div class="wings">
+            <div class="wing">
+              <div class="wing__front face"> </div>
+              <div class="wing__back face"> </div>
+              <div class="wing__right face"> </div>
+              <div class="wing__left face"> </div>
+              <div class="wing__top face"> </div>
+              <div class="wing__bottom face"> </div>
+            </div>
+            <div class="wing">
+              <div class="wing__front face"> </div>
+              <div class="wing__back face"> </div>
+              <div class="wing__right face"> </div>
+              <div class="wing__left face"> </div>
+              <div class="wing__top face"> </div>
+              <div class="wing__bottom face"> </div>
+            </div>
+          </div>
+        </div>
+        <div class="wrapper-b">
+          <div class="b">
+            <div class="b__front face"> </div>
+            <div class="b__back face"> </div>
+            <div class="b__right face"> </div>
+            <div class="b__left face"> </div>
+            <div class="b__top face"> </div>
+            <div class="b__bottom face"> </div>
+          </div>
+          <div class="c">
+            <div class="c__front face"> 
+              <div class="c__front-l face"> </div>
+            </div>
+            <div class="c__back face"> </div>
+            <div class="c__right face"> </div>
+            <div class="c__left face"> </div>
+            <div class="c__top face"> </div>
+            <div class="c__bottom face"> </div>
+          </div>
+          <div class="d">
+            <div class="d__right face"> </div>
+            <div class="d__left face"> </div>
+            <div class="d__top face"> 
+              <div class="d__top-l face"> </div>
+            </div>
+            <div class="d__bottom face"> </div>
+          </div>
+          <div class="e">
+            <div class="e__front face"> 
+              <div class="e__front-i flex"> 
+                <div class="e__front-t flex">◠‿◠</div>
+              </div>
+            </div>
+            <div class="e__back face"> </div>
+            <div class="e__right face"> </div>
+            <div class="e__left face"> </div>
+            <div class="e__bottom face"> </div>
+          </div>
+          <div class="f">
+            <div class="f__front face"> 
+              <div class="f__front-i face"> </div>
+            </div>
+            <div class="f__right face"> </div>
+            <div class="f__left face"> </div>
+            <div class="f__top face"> </div>
+            <div class="f__bottom face"> </div>
+          </div>
+          <div class="g">
+            <div class="g__front face"> </div>
+            <div class="g__right face"> </div>
+            <div class="g__left face"> </div>
+            <div class="g__top face"> </div>
+            <div class="g__bottom face"> </div>
+          </div>
+          <div class="h">
+            <div class="h__front face"> </div>
+            <div class="h__back face"> </div>
+            <div class="h__right face"> </div>
+            <div class="h__left face"> </div>
+            <div class="h__top face"> </div>
+            <div class="h__bottom face"> </div>
+          </div>
+          <div class="i">
+            <div class="i__right face"> </div>
+            <div class="i__left face"> </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/EasePack3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/3d-spaceshipgsap/dist/script.js b/3d-spaceshipgsap/dist/script.js
new file mode 100644
index 0000000..5f1d5bd
--- /dev/null
+++ b/3d-spaceshipgsap/dist/script.js
@@ -0,0 +1,124 @@
+/*
+		Designed by: Adam Witton
+		Original image: https://dribbble.com/shots/3958361-Mini-Spaceship
+*/
+
+gsap.registerPlugin()
+
+const vw = (size) => window.innerWidth * ( size/100 )
+const svg = document.querySelector('.svg-icon')
+const a = document.querySelector("#audio");
+const rotate = new TimelineMax({ paused: true })
+const wings = new TimelineMax({ reversed: true })
+
+const rotateSpaceFunc = () => {
+    rotate.paused(!rotate.paused())
+    wings.reversed(!wings.reversed())
+
+    a.loop = true
+    if(a.paused) { a.play() }
+    else {
+        a.pause()
+        a.currentTime = 0
+    }
+}
+
+svg.addEventListener('click',  rotateSpaceFunc)
+
+// ===========================
+wings.staggerTo(".wrapper-a",.3, {
+    z: vw(2.125),
+    ease: "power1.inOut"
+})
+
+rotate.staggerTo(".main-rotate", 8, {
+    rotation: 360,
+    repeat: -1,
+    ease: 'none'
+})
+
+gsap.to(".wrapper-c1", {
+    z: vw(1.85),
+    duration: .75,
+    repeat: -1,
+    yoyo: true,
+    ease: "power1.inOut"
+})
+
+gsap.to(".wrapper-c2", { keyframes:[
+    {
+        rotationX: 0,
+        rotationY: 0,
+        repeat: -1,
+        yoyo: true,
+    },
+    {
+        rotationX: -3,
+        rotationY: 2,
+        repeat: -1,
+        yoyo: true,
+    },
+    {
+        rotationX: 3,
+        rotationY: 0,
+        repeat: -1,
+        yoyo: true,
+    },
+    {
+        rotationX: -1,
+        rotationY: 0,
+        repeat: -1,
+        yoyo: true,
+    }
+
+], ease: "sine" })
+
+gsap.to(".shadows", {
+    transform: "scale(.935)",
+    opacity: .75,
+    duration: .75,
+    webkitFilter: `blur(${vw(1)})`,
+    repeat: -1,
+    yoyo: true,
+    ease: "power1.inOut"
+})
+
+gsap.to(".light-3, .light-4", {
+    height: vw(15),
+    y: vw(1),
+    duration: .1,
+    repeat: -1,
+    yoyo: true,
+    ease: "linear",
+})
+
+gsap.to(".w1 .wave", {
+    height: vw(10),
+    width: vw(10),
+    z: vw(16),
+    duration: .5,
+    repeat: -1,
+    stagger: 0.1,
+    delay: .5,
+    border: `${vw(.025)}vw solid rgba(255,255,255,0)`,
+    ease: "power1",
+})
+
+gsap.to(".w2 .wave", {
+    height: vw(10),
+    width: vw(10),
+    z: vw(16),
+    duration: .5,
+    repeat: -1,
+    stagger: 0.1,
+    delay: .5,
+    border: `${vw(.025)}vw solid rgba(255,255,255,0)`,
+    ease: "power1",
+})
+
+gsap.to(".e__front-t", {
+    opacity: 0,
+    repeat: -1,
+    duration: 2,
+    ease: CustomEase.create("custom", "M0,0,C0.037,0,0.014,0.938,0.05,0.948,0.353,1.03,0.737,-0.058,0.944,-0.004,0.944,-0.004,0.944,-0.004,0.944,-0.004,0.998,0.01,0.959,0.942,1,1"),
+})
\ No newline at end of file
diff --git a/3d-spaceshipgsap/dist/style.css b/3d-spaceshipgsap/dist/style.css
new file mode 100644
index 0000000..03c45ee
--- /dev/null
+++ b/3d-spaceshipgsap/dist/style.css
@@ -0,0 +1,1619 @@
+/***********************/
+/***********************/
+/***********************/
+*, *::after, *::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  transform-style: preserve-3d;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  appearance: none;
+  font-family: "Press Start 2P", cursive;
+}
+
+/***********************/
+/***********************/
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+  color: #1d88fe;
+  font-weight: bolder;
+  overflow: hidden;
+  background-image: linear-gradient(to bottom, #1672da, #078dfd, #07b1ff, #00a2ed);
+}
+
+.face {
+  position: absolute;
+}
+
+.flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.svg-icon {
+  position: absolute;
+  left: 50%;
+  bottom: 50px;
+  width: 50px;
+  height: 50px;
+  z-index: 1;
+  opacity: 0.65;
+  transform: translateX(-50%);
+  cursor: pointer;
+}
+.svg-icon:hover {
+  opacity: 0.9;
+}
+@media (max-height: 400px) {
+  .svg-icon {
+    left: 50px;
+  }
+}
+
+.svg-icon path,
+.svg-icon polygon,
+.svg-icon rect {
+  fill: white;
+}
+
+.svg-icon circle {
+  stroke: white;
+  stroke-width: 1;
+}
+
+/***********************/
+/***********************/
+.main {
+  position: absolute;
+  width: 24vw;
+  height: 25vw;
+  transform: perspective(300vw) rotateX(60deg) rotateZ(30deg) translateZ(-8vw);
+  transition: transform 550ms ease-out;
+}
+.main-rotate {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.wrapper-c1,
+.wrapper-c2 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.wrapper-a {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform: translateZ(1vw);
+}
+
+.wrapper-b {
+  position: absolute;
+  left: 50%;
+  width: 9.5vw;
+  height: 100%;
+  transform: translateX(-50%) translateZ(2vw);
+}
+
+.shadows {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  filter: blur(0.85vw);
+}
+
+.shadow {
+  position: absolute;
+  top: 0;
+  border-radius: 2vw;
+  box-shadow: 0 0 2vw #296ff0;
+  background-image: radial-gradient(rgba(4, 42, 112, 0.8) 40%, rgba(14, 79, 201, 0.8) 70%);
+}
+
+.shadow-1,
+.shadow-2 {
+  width: 8vw;
+  height: 17vw;
+}
+
+.shadow-1 {
+  left: -0.5vw;
+}
+
+.shadow-2 {
+  right: -0.5vw;
+}
+
+.shadow-3 {
+  top: 4vw;
+  left: 50%;
+  width: 11vw;
+  height: 20vw;
+  transform: translateX(-50%);
+}
+
+.shadow-4 {
+  top: 4vw;
+  width: 100%;
+  height: 12vw;
+}
+
+.shadow-5 {
+  top: 5vw;
+  left: -15%;
+  width: 130%;
+  height: 4vw;
+}
+
+.light-1,
+.light-2,
+.light-3,
+.light-4 {
+  top: 14vw;
+  width: 5vw;
+  height: 24vw;
+  border-radius: 50%;
+  box-shadow: 0 0 0.5vw #9effff;
+  background-image: linear-gradient(to bottom, rgba(107, 255, 255, 0.185), rgba(107, 255, 255, 0.4) 20%, rgba(107, 255, 255, 0.25) 60%, rgba(107, 255, 255, 0.05));
+}
+
+.light-1 {
+  left: 0;
+}
+
+.light-2 {
+  right: 0;
+}
+
+.light-3,
+.light-4 {
+  top: -10vw;
+  width: 7vw;
+  height: 16vw;
+}
+
+.light-3 {
+  left: 0;
+}
+
+.light-4 {
+  right: 0;
+}
+
+.wave {
+  position: absolute;
+  border-radius: 50%;
+}
+
+.a {
+  width: 7vw;
+  height: 16vw;
+  position: absolute;
+}
+.a__front {
+  width: 7vw;
+  height: 7vw;
+  transform-origin: bottom left;
+  transform: rotateX(-90deg) translateZ(9vw);
+}
+.a__back {
+  width: 7vw;
+  height: 7vw;
+  transform-origin: top left;
+  transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-7vw);
+}
+.a__right {
+  width: 16vw;
+  height: 7vw;
+  transform-origin: top left;
+  transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-16vw) translateY(-7vw);
+}
+.a__left {
+  width: 16vw;
+  height: 7vw;
+  transform-origin: top left;
+  transform: rotateY(-90deg) rotateZ(90deg) translateY(-7vw);
+}
+.a__top {
+  width: 7vw;
+  height: 16vw;
+  transform-origin: top left;
+  transform: translateZ(7vw);
+}
+.a__bottom {
+  width: 7vw;
+  height: 16vw;
+  transform-origin: top left;
+  transform: rotateY(180deg) translateX(-7vw);
+}
+.a__front, .a__back {
+  background-position: 0 0, 0 100%, 100% 0, 100% 100%, 49% 0;
+  background-size: 10% 50%, 10% 50%, 10% 50%, 10% 50%, 82% 100%;
+  background-repeat: no-repeat;
+}
+.a__back {
+  box-shadow: inset 0 0 0 0.25vw #6bffff;
+  border-radius: 1.15vw;
+}
+.a__top::before, .a__top::after, .a__bottom::before, .a__bottom::after {
+  content: "";
+  position: absolute;
+  width: 1.1vw;
+  height: 100%;
+}
+.a__top::before, .a__bottom::before {
+  left: 89%;
+  transform-origin: left;
+  transform: rotateY(45deg);
+}
+.a__top::after, .a__bottom::after {
+  right: 89%;
+  transform-origin: right;
+  transform: rotateY(-45deg);
+}
+.a__bottom {
+  background-image: linear-gradient(to right, transparent 10%, #0f55d7 10%, #0e4dc4 90%, transparent 90%);
+}
+.a:nth-of-type(1) {
+  left: 0;
+}
+.a:nth-of-type(1) .a__front {
+  background-image: linear-gradient(-45deg, #27a2fe 2.4125vw, transparent 2.4125vw), linear-gradient(45deg, transparent 0.525vw, #016ee7 0.525vw, #27a2fe), linear-gradient(45deg, #27a2fe 2.4125vw, transparent 2.4125vw), linear-gradient(-45deg, transparent 0.525vw, #016ee7 0.525vw, #27a2fe), linear-gradient(to bottom, #27a2fe 50%, #016ee7);
+}
+.a:nth-of-type(1) .a__back {
+  background-image: linear-gradient(-45deg, #1d88fe 2.4125vw, transparent 2.4125vw), linear-gradient(45deg, transparent 0.525vw, #047bfe 0.525vw, #1d88fe), linear-gradient(45deg, #1d88fe 2.4125vw, transparent 2.4125vw), linear-gradient(-45deg, transparent 0.525vw, #047bfe 0.525vw, #1d88fe), linear-gradient(to bottom, #1d88fe 50%, #047bfe);
+}
+.a:nth-of-type(1) .a__top {
+  background-image: linear-gradient(to right, transparent 10%, #46cdfe 10%, #1ec3fe 90%, transparent 90%);
+}
+.a:nth-of-type(1) .a__top::before {
+  background-color: #2ca4fe;
+}
+.a:nth-of-type(1) .a__top::after {
+  background-color: #4bcffe;
+}
+.a:nth-of-type(1) .a__top-shadow {
+  top: 2.75vw;
+  right: 1vw;
+  width: 3vw;
+  height: 9vw;
+  transform-origin: bottom right;
+  transform: skewY(-40deg) translateZ(1px);
+  background-image: linear-gradient(to left, rgba(50, 200, 254, 0.6), rgba(107, 255, 255, 0.4), rgba(107, 255, 255, 0.2));
+  filter: blur(0.45vw);
+}
+.a:nth-of-type(1) .a__top-neon {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0.5vw;
+  height: 100%;
+  background-color: #85ffff;
+  box-shadow: inset 0 0 0.15vw #042f7f;
+}
+.a:nth-of-type(1) .a__right {
+  background-image: linear-gradient(to bottom, transparent 10%, #016ee7 10%, #0160c9 90%, transparent 90%);
+}
+.a:nth-of-type(1) .a__left {
+  background-image: linear-gradient(to bottom, transparent 10%, #41ccfe 10%, #14c0fe 90%, transparent 90%);
+}
+.a:nth-of-type(1) .a__left::before {
+  content: "";
+  position: absolute;
+  bottom: 10%;
+  right: 7vw;
+  width: 4vw;
+  height: 2.5vw;
+  transform-origin: top left;
+  transform: skewX(20deg);
+  background-image: linear-gradient(to bottom, #1d9efe, rgba(39, 162, 254, 0.2));
+  filter: blur(0.15vw);
+}
+.a:nth-of-type(1) .a__bottom::before {
+  background-color: #1d88fe;
+}
+.a:nth-of-type(1) .a__bottom::after {
+  background-color: #0f55d7;
+}
+.a:nth-of-type(2) {
+  right: 0;
+}
+.a:nth-of-type(2) .a__front {
+  background-image: linear-gradient(-45deg, #0995fe 2.4125vw, transparent 2.4125vw), linear-gradient(45deg, transparent 0.525vw, #0165d3 0.525vw, #27a2fe), linear-gradient(45deg, #0995fe 2.4125vw, transparent 2.4125vw), linear-gradient(-45deg, transparent 0.525vw, #0165d3 0.525vw, #0995fe), linear-gradient(to bottom, #0995fe 50%, #0165d3);
+}
+.a:nth-of-type(2) .a__back {
+  background-image: linear-gradient(-45deg, #0e80fe 2.4125vw, transparent 2.4125vw), linear-gradient(45deg, transparent 0.525vw, #0178fb 0.525vw, #1d88fe), linear-gradient(45deg, #0e80fe 2.4125vw, transparent 2.4125vw), linear-gradient(-45deg, transparent 0.525vw, #0178fb 0.525vw, #1d88fe), linear-gradient(to bottom, #0e80fe 50%, #0178fb);
+}
+.a:nth-of-type(2) .a__top {
+  background-image: linear-gradient(60deg, rgba(39, 162, 254, 0.8), rgba(39, 162, 254, 0.45) 48%, transparent 50%), linear-gradient(to right, transparent 10%, #32c8fe 10%, #1ec3fe 90%, transparent 90%);
+  background-size: 80% 100%, 100% 100%;
+  background-position: 52% 0, 0 0;
+  background-repeat: no-repeat;
+}
+.a:nth-of-type(2) .a__top::before {
+  background-image: linear-gradient(to right, #27a2fe, #1d88fe);
+}
+.a:nth-of-type(2) .a__top::after {
+  background-image: linear-gradient(to left, #19c1fe, #1d88fe);
+}
+.a:nth-of-type(2) .a__top-shadow {
+  top: 2.75vw;
+  left: 1.5vw;
+  width: 3vw;
+  height: 9vw;
+  transform-origin: bottom left;
+  transform: skewY(40deg) translateZ(1px);
+  background-image: linear-gradient(to right, rgba(107, 255, 255, 0.1), rgba(107, 255, 255, 0.315), rgba(107, 255, 255, 0.215));
+  filter: blur(0.5vw);
+}
+.a:nth-of-type(2) .a__top-neon {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0.5vw;
+  height: 100%;
+  background-color: #6bffff;
+  box-shadow: inset 0 0 0.15vw #042f7f;
+}
+.a:nth-of-type(2) .a__right {
+  background-image: linear-gradient(to bottom, transparent 10%, #0e80fe 10%, #0167d8 90%, transparent 90%);
+}
+.a:nth-of-type(2) .a__right::before {
+  content: "";
+  position: absolute;
+  bottom: 10%;
+  left: 7vw;
+  width: 4vw;
+  height: 2.5vw;
+  transform-origin: top left;
+  transform: skewX(-20deg);
+  background-image: linear-gradient(to bottom, rgba(15, 85, 215, 0.9), rgba(15, 85, 215, 0.2));
+  filter: blur(0.15vw);
+}
+.a:nth-of-type(2) .a__left {
+  background-image: linear-gradient(to bottom, transparent 10%, #1383fe 10%, #0162ce 90%, transparent 90%);
+}
+.a:nth-of-type(2) .a__bottom::before {
+  background-color: #0f55d7;
+}
+.a:nth-of-type(2) .a__bottom::after {
+  background-color: #0f55d7;
+}
+
+.b {
+  width: 9.5vw;
+  height: 10vw;
+  position: absolute;
+  top: 2.1vw;
+}
+.b__front {
+  width: 9.5vw;
+  height: 10vw;
+  transform-origin: bottom left;
+  transform: rotateX(-90deg) translateZ(0vw);
+}
+.b__back {
+  width: 9.5vw;
+  height: 10vw;
+  transform-origin: top left;
+  transform: rotateX(-90deg) rotateY(180deg) translateX(-9.5vw) translateY(-10vw);
+}
+.b__right {
+  width: 10vw;
+  height: 10vw;
+  transform-origin: top left;
+  transform: rotateY(90deg) rotateZ(-90deg) translateZ(9.5vw) translateX(-10vw) translateY(-10vw);
+}
+.b__left {
+  width: 10vw;
+  height: 10vw;
+  transform-origin: top left;
+  transform: rotateY(-90deg) rotateZ(90deg) translateY(-10vw);
+}
+.b__top {
+  width: 9.5vw;
+  height: 10vw;
+  transform-origin: top left;
+  transform: translateZ(10vw);
+}
+.b__bottom {
+  width: 9.5vw;
+  height: 10vw;
+  transform-origin: top left;
+  transform: rotateY(180deg) translateX(-9.5vw);
+}
+.b__front {
+  background-color: #042f7f;
+}
+.b__back {
+  background-image: linear-gradient(to bottom, #3193fe, #1d88fe 20%, #016add);
+}
+.b__back::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0.75vw;
+  background-image: radial-gradient(rgba(107, 255, 255, 0.2) 20%, transparent 21%), radial-gradient(rgba(107, 255, 255, 0.2) 20%, transparent 21%);
+  background-size: 0.75vw 0.75vw;
+  background-repeat: repeat;
+  background-clip: content-box;
+}
+.b__left, .b__right {
+  padding: 0.6vw;
+}
+.b__left::before, .b__right::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 2vw;
+}
+.b__left {
+  background-image: linear-gradient(to bottom, #46cdfe, #32c8fe 30%, #0f55d7);
+}
+.b__left::before {
+  background-image: linear-gradient(to bottom, #85ffff, #6bffff);
+  box-shadow: 0 0 0.95vw #85ffff, inset 0 0 0.5vw #85ffff;
+}
+.b__right {
+  background-image: linear-gradient(to bottom, #1d88fe, #047bfe 30%, #0156b4);
+}
+.b__right::before {
+  background-image: linear-gradient(to top, #52ffff, #6bffff);
+  box-shadow: 0 0 0.95vw #52ffff, inset 0 0 0.5vw #38ffff;
+}
+.b__top {
+  background-image: linear-gradient(to right, #2dc7fe, #01b9fc);
+}
+.b__bottom {
+  background-color: #0f55d7;
+}
+
+.c {
+  width: 9.5vw;
+  height: 5vw;
+  position: absolute;
+  top: 12.25vw;
+}
+.c__front {
+  width: 9.5vw;
+  height: 10vw;
+  transform-origin: bottom left;
+  transform: rotateX(-90deg) translateZ(-5vw);
+}
+.c__back {
+  width: 9.5vw;
+  height: 10vw;
+  transform-origin: top left;
+  transform: rotateX(-90deg) rotateY(180deg) translateX(-9.5vw) translateY(-10vw);
+}
+.c__right {
+  width: 5vw;
+  height: 10vw;
+  transform-origin: top left;
+  transform: rotateY(90deg) rotateZ(-90deg) translateZ(9.5vw) translateX(-5vw) translateY(-10vw);
+}
+.c__left {
+  width: 5vw;
+  height: 10vw;
+  transform-origin: top left;
+  transform: rotateY(-90deg) rotateZ(90deg) translateY(-10vw);
+}
+.c__top {
+  width: 9.5vw;
+  height: 5vw;
+  transform-origin: top left;
+  transform: translateZ(10vw);
+}
+.c__bottom {
+  width: 9.5vw;
+  height: 5vw;
+  transform-origin: top left;
+  transform: rotateY(180deg) translateX(-9.5vw);
+}
+.c__front {
+  background-color: #27a2fe;
+}
+.c__front-l {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(to bottom, transparent 15%, rgba(107, 255, 255, 0.3) 15%, rgba(107, 255, 255, 0.4));
+}
+.c__back {
+  background-color: #042f7f;
+}
+.c__left {
+  background-image: linear-gradient(to bottom, #46cdfe, #32c8fe 30%, #0f55d7);
+}
+.c__right {
+  background-image: linear-gradient(to bottom, #1d88fe, #047bfe 30%, #0156b4);
+}
+.c__top {
+  background-image: linear-gradient(to right, #2dc7fe, #01b9fc);
+}
+.c__bottom {
+  background-color: #0f55d7;
+}
+
+.d {
+  width: 9.5vw;
+  height: 5.75vw;
+  position: absolute;
+  bottom: 2vw;
+}
+.d__front {
+  width: 9.5vw;
+  height: 0.6vw;
+  transform-origin: bottom left;
+  transform: rotateX(-90deg) translateZ(5.15vw);
+}
+.d__back {
+  width: 9.5vw;
+  height: 0.6vw;
+  transform-origin: top left;
+  transform: rotateX(-90deg) rotateY(180deg) translateX(-9.5vw) translateY(-0.6vw);
+}
+.d__right {
+  width: 5.75vw;
+  height: 0.6vw;
+  transform-origin: top left;
+  transform: rotateY(90deg) rotateZ(-90deg) translateZ(9.5vw) translateX(-5.75vw) translateY(-0.6vw);
+}
+.d__left {
+  width: 5.75vw;
+  height: 0.6vw;
+  transform-origin: top left;
+  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.6vw);
+}
+.d__top {
+  width: 9.5vw;
+  height: 5.75vw;
+  transform-origin: top left;
+  transform: translateZ(0.6vw);
+}
+.d__bottom {
+  width: 9.5vw;
+  height: 5.75vw;
+  transform-origin: top left;
+  transform: rotateY(180deg) translateX(-9.5vw);
+}
+.d__left {
+  background-image: linear-gradient(to right, #047bfe, #32c8fe);
+}
+.d__right {
+  background-image: linear-gradient(to left, #016ee7, #1d88fe);
+}
+.d__top {
+  background-image: linear-gradient(to bottom, #0165d3, #0173f1 40%, #0e80fe);
+}
+.d__top-l {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(to right, rgba(107, 255, 255, 0.3), rgba(107, 255, 255, 0.4));
+}
+.d__bottom {
+  background-color: #0f55d7;
+}
+
+.e {
+  width: 9.5vw;
+  height: 0.6vw;
+  position: absolute;
+  bottom: 1.4vw;
+}
+.e__front {
+  width: 9.5vw;
+  height: 8.5vw;
+  transform-origin: bottom left;
+  transform: rotateX(-90deg) translateZ(-7.9vw);
+}
+.e__back {
+  width: 9.5vw;
+  height: 8.5vw;
+  transform-origin: top left;
+  transform: rotateX(-90deg) rotateY(180deg) translateX(-9.5vw) translateY(-8.5vw);
+}
+.e__right {
+  width: 0.6vw;
+  height: 8.5vw;
+  transform-origin: top left;
+  transform: rotateY(90deg) rotateZ(-90deg) translateZ(9.5vw) translateX(-0.6vw) translateY(-8.5vw);
+}
+.e__left {
+  width: 0.6vw;
+  height: 8.5vw;
+  transform-origin: top left;
+  transform: rotateY(-90deg) rotateZ(90deg) translateY(-8.5vw);
+}
+.e__top {
+  width: 9.5vw;
+  height: 0.6vw;
+  transform-origin: top left;
+  transform: translateZ(8.5vw);
+}
+.e__bottom {
+  width: 9.5vw;
+  height: 0.6vw;
+  transform-origin: top left;
+  transform: rotateY(180deg) translateX(-9.5vw);
+}
+.e__front {
+  background-color: #27a2fe;
+  padding: 0.6vw;
+}
+.e__front-i {
+  width: 100%;
+  height: 2vw;
+  background-image: linear-gradient(to bottom, #6bffff, #61ffff);
+  box-shadow: 0 0 0.95vw #52ffff, inset 0 0 0.25vw #38ffff;
+  overflow: hidden;
+}
+.e__front-i::before {
+  content: "";
+  position: absolute;
+  width: 3vw;
+  height: 100%;
+  left: 0;
+  transform-origin: top left;
+  transform: skewX(20deg);
+  background-image: linear-gradient(to right, rgba(107, 255, 255, 0.075), transparent);
+  filter: blur(0.2vw);
+}
+.e__front-t {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  font-size: 1vw;
+}
+.e__back {
+  background-color: #32c8fe;
+}
+.e__left {
+  background-image: linear-gradient(to bottom, #46cdfe, #32c8fe);
+}
+.e__right {
+  background-color: #1d88fe;
+}
+.e__bottom {
+  background-color: #0f55d7;
+}
+
+.f {
+  width: 9.5vw;
+  height: 6.3vw;
+  position: absolute;
+  bottom: 1.5vw;
+  transform: translateZ(8.5vw);
+}
+.f__front {
+  width: 9.5vw;
+  height: 0.6vw;
+  transform-origin: bottom left;
+  transform: rotateX(-90deg) translateZ(5.7vw);
+}
+.f__back {
+  width: 9.5vw;
+  height: 0.6vw;
+  transform-origin: top left;
+  transform: rotateX(-90deg) rotateY(180deg) translateX(-9.5vw) translateY(-0.6vw);
+}
+.f__right {
+  width: 6.3vw;
+  height: 0.6vw;
+  transform-origin: top left;
+  transform: rotateY(90deg) rotateZ(-90deg) translateZ(9.5vw) translateX(-6.3vw) translateY(-0.6vw);
+}
+.f__left {
+  width: 6.3vw;
+  height: 0.6vw;
+  transform-origin: top left;
+  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.6vw);
+}
+.f__top {
+  width: 9.5vw;
+  height: 6.3vw;
+  transform-origin: top left;
+  transform: translateZ(0.6vw);
+}
+.f__bottom {
+  width: 9.5vw;
+  height: 6.3vw;
+  transform-origin: top left;
+  transform: rotateY(180deg) translateX(-9.5vw);
+}
+.f__front-i {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 2.8vw;
+  transform-origin: bottom;
+  transform: rotateX(78deg);
+  background-image: linear-gradient(to right, #2dc7fe, #01b9fc);
+}
+.f__left {
+  background-image: linear-gradient(12deg, #46cdfe 70%, transparent 70%);
+}
+.f__left::before {
+  content: "";
+  position: absolute;
+  top: 100%;
+  right: 0.5vw;
+  width: 40%;
+  height: 200%;
+  background-image: linear-gradient(12deg, transparent 70%, #4bcffe 70%);
+}
+.f__right {
+  background-image: linear-gradient(-12deg, #1d88fe 70%, transparent 70%);
+}
+.f__right::before {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 0.5vw;
+  width: 40%;
+  height: 200%;
+  background-image: linear-gradient(-12deg, transparent 70%, #1d88fe 70%);
+}
+.f__top {
+  background-image: linear-gradient(to bottom, #32c8fe 60%, transparent 60%);
+}
+.f__top::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 60%;
+  background-image: linear-gradient(to right, #2dc7fe, #01b9fc);
+}
+.f__bottom {
+  background-color: #32c8fe;
+}
+
+.g {
+  width: 9.5vw;
+  height: 1vw;
+  position: absolute;
+  bottom: 0.5vw;
+}
+.g__front {
+  width: 9.5vw;
+  height: 5vw;
+  transform-origin: bottom left;
+  transform: rotateX(-90deg) translateZ(-4vw);
+}
+.g__back {
+  width: 9.5vw;
+  height: 5vw;
+  transform-origin: top left;
+  transform: rotateX(-90deg) rotateY(180deg) translateX(-9.5vw) translateY(-5vw);
+}
+.g__right {
+  width: 1vw;
+  height: 5vw;
+  transform-origin: top left;
+  transform: rotateY(90deg) rotateZ(-90deg) translateZ(9.5vw) translateX(-1vw) translateY(-5vw);
+}
+.g__left {
+  width: 1vw;
+  height: 5vw;
+  transform-origin: top left;
+  transform: rotateY(-90deg) rotateZ(90deg) translateY(-5vw);
+}
+.g__top {
+  width: 9.5vw;
+  height: 1vw;
+  transform-origin: top left;
+  transform: translateZ(5vw);
+}
+.g__bottom {
+  width: 9.5vw;
+  height: 1vw;
+  transform-origin: top left;
+  transform: rotateY(180deg) translateX(-9.5vw);
+}
+.g__front {
+  background-image: linear-gradient(to top, #0e97fe 3.9vw, transparent 3.9vw);
+}
+.g__front::before {
+  content: "";
+  position: absolute;
+  bottom: 1.75vw;
+  height: 0.5vw;
+  width: 100%;
+  background-color: #6bffff;
+  box-shadow: inset 0 0 0.15vw #042f7f, 0 0 0.15vw #6bffff;
+}
+.g__left {
+  background-image: linear-gradient(45deg, #32c8fe 3.55vw, transparent 3.55vw);
+}
+.g__right {
+  background-image: linear-gradient(-45deg, #1d88fe 3.55vw, transparent 3.55vw);
+}
+.g__top::before {
+  content: "";
+  display: block;
+  height: 1.5vw;
+  transform-origin: top left;
+  transform: rotateX(-46deg);
+  background-image: linear-gradient(to right, #32c8fe, #23c4fe);
+}
+.g__bottom {
+  background-color: #0f55d7;
+}
+
+.h {
+  width: 0.425vw;
+  height: 12.7vw;
+  position: absolute;
+  transform: translateX(-50%) translateZ(10.1vw);
+  left: 50%;
+  bottom: 9vw;
+}
+.h__front {
+  width: 0.425vw;
+  height: 1vw;
+  transform-origin: bottom left;
+  transform: rotateX(-90deg) translateZ(11.7vw);
+}
+.h__back {
+  width: 0.425vw;
+  height: 1vw;
+  transform-origin: top left;
+  transform: rotateX(-90deg) rotateY(180deg) translateX(-0.425vw) translateY(-1vw);
+}
+.h__right {
+  width: 12.7vw;
+  height: 1vw;
+  transform-origin: top left;
+  transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.425vw) translateX(-12.7vw) translateY(-1vw);
+}
+.h__left {
+  width: 12.7vw;
+  height: 1vw;
+  transform-origin: top left;
+  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
+}
+.h__top {
+  width: 0.425vw;
+  height: 12.7vw;
+  transform-origin: top left;
+  transform: translateZ(1vw);
+}
+.h__bottom {
+  width: 0.425vw;
+  height: 12.7vw;
+  transform-origin: top left;
+  transform: rotateY(180deg) translateX(-0.425vw);
+}
+.h__front {
+  background-color: #27a2fe;
+}
+.h__back {
+  background-image: linear-gradient(to bottom, #1d88fe, #047bfe 80%);
+}
+.h__left {
+  background-image: linear-gradient(to bottom, #4bcffe, #3ccbfe);
+}
+.h__right {
+  background-image: linear-gradient(to bottom, #1d88fe, #097dfe);
+}
+.h__top {
+  background-color: #6bffff;
+  box-shadow: 0 0 0.5vw #85ffff;
+}
+.h__bottom {
+  background-color: #1d88fe;
+}
+.h__bottom::before {
+  content: "";
+  position: absolute;
+  right: 0%;
+  width: 2.25vw;
+  height: 100%;
+  background-image: linear-gradient(to right, rgba(39, 162, 254, 0.5) 10%, #018af1);
+  transform-origin: right bottom;
+  transform: skewY(-20deg);
+  filter: blur(0.2vw);
+}
+
+.i {
+  width: 9vw;
+  height: 5.7vw;
+  position: absolute;
+  bottom: 2vw;
+  left: 0.25vw;
+  transform: translateZ(0.6vw);
+}
+.i__front {
+  width: 9vw;
+  height: 8vw;
+  transform-origin: bottom left;
+  transform: rotateX(-90deg) translateZ(-2.3vw);
+}
+.i__back {
+  width: 9vw;
+  height: 8vw;
+  transform-origin: top left;
+  transform: rotateX(-90deg) rotateY(180deg) translateX(-9vw) translateY(-8vw);
+}
+.i__right {
+  width: 5.7vw;
+  height: 8vw;
+  transform-origin: top left;
+  transform: rotateY(90deg) rotateZ(-90deg) translateZ(9vw) translateX(-5.7vw) translateY(-8vw);
+}
+.i__left {
+  width: 5.7vw;
+  height: 8vw;
+  transform-origin: top left;
+  transform: rotateY(-90deg) rotateZ(90deg) translateY(-8vw);
+}
+.i__top {
+  width: 9vw;
+  height: 5.7vw;
+  transform-origin: top left;
+  transform: translateZ(8vw);
+}
+.i__bottom {
+  width: 9vw;
+  height: 5.7vw;
+  transform-origin: top left;
+  transform: rotateY(180deg) translateX(-9vw);
+}
+.i__left {
+  background-image: linear-gradient(to bottom, #85ffff, #6bffff);
+  box-shadow: inset 0 0 0.5vw #85ffff;
+}
+.i__right {
+  background-image: linear-gradient(to top, #38ffff, #6bffff);
+  box-shadow: inset 0 0 0.5vw #38ffff;
+}
+
+.wing {
+  width: 4vw;
+  height: 4vw;
+  position: absolute;
+  top: 5vw;
+  transform: translateZ(3vw);
+}
+.wing__front {
+  width: 4vw;
+  height: 0.5vw;
+  transform-origin: bottom left;
+  transform: rotateX(-90deg) translateZ(3.5vw);
+}
+.wing__back {
+  width: 4vw;
+  height: 0.5vw;
+  transform-origin: top left;
+  transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-0.5vw);
+}
+.wing__right {
+  width: 4vw;
+  height: 0.5vw;
+  transform-origin: top left;
+  transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-4vw) translateY(-0.5vw);
+}
+.wing__left {
+  width: 4vw;
+  height: 0.5vw;
+  transform-origin: top left;
+  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
+}
+.wing__top {
+  width: 4vw;
+  height: 4vw;
+  transform-origin: top left;
+  transform: translateZ(0.5vw);
+}
+.wing__bottom {
+  width: 4vw;
+  height: 4vw;
+  transform-origin: top left;
+  transform: rotateY(180deg) translateX(-4vw);
+}
+.wing:nth-of-type(1) {
+  left: 100%;
+}
+.wing:nth-of-type(1) .wing__front::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 145%;
+  height: 100%;
+  transform-origin: bottom left;
+  transform: rotateY(45deg);
+  background-image: linear-gradient(to right, #1d88fe, #27a2fe);
+}
+.wing:nth-of-type(1) .wing__back {
+  background-image: linear-gradient(to bottom, #1383fe 50%, #016ee7);
+}
+.wing:nth-of-type(1) .wing__left {
+  background-image: linear-gradient(to bottom, #46cdfe, #32c8fe);
+}
+.wing:nth-of-type(1) .wing__top {
+  background-image: linear-gradient(-45deg, transparent 50%, #32c8fe 50%, #22a0fe);
+}
+.wing:nth-of-type(1) .wing__bottom {
+  background-image: linear-gradient(45deg, transparent 50%, #0f55d7 50%);
+}
+.wing:nth-of-type(2) {
+  right: 100%;
+}
+.wing:nth-of-type(2) .wing__front::before {
+  content: "";
+  position: absolute;
+  right: 0;
+  width: 145%;
+  height: 100%;
+  transform-origin: bottom right;
+  transform: rotateY(-45deg);
+  background-image: linear-gradient(to right, #27a2fe, #0e97fe);
+}
+.wing:nth-of-type(2) .wing__back {
+  background-image: linear-gradient(to bottom, #1383fe 50%, #016ee7);
+}
+.wing:nth-of-type(2) .wing__right {
+  background-image: linear-gradient(to bottom, #1d88fe, #097dfe);
+}
+.wing:nth-of-type(2) .wing__top {
+  background-image: linear-gradient(45deg, transparent 50%, #41ccfe 50%, #32c8fe);
+}
+.wing:nth-of-type(2) .wing__bottom {
+  background-image: linear-gradient(-45deg, transparent 50%, #0f55d7 50%);
+}
+
+/*---------------------*/
+.turbo {
+  position: absolute;
+  width: 5.5vw;
+  height: 5.5vw;
+}
+
+.circle {
+  width: 5.5vw;
+  height: 5.5vw;
+  position: absolute;
+}
+.circle-a {
+  position: absolute;
+  width: 1vw;
+  height: 5.5vw;
+  transform: rotateY(90deg) translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+}
+.circle-a__side {
+  position: absolute;
+  height: 0.5347222222vw;
+  width: 1vw;
+  background-color: black;
+}
+.circle-a__side:nth-of-type(1) {
+  transform: rotateX(10deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(2) {
+  transform: rotateX(20deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(3) {
+  transform: rotateX(30deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(4) {
+  transform: rotateX(40deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(5) {
+  transform: rotateX(50deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(6) {
+  transform: rotateX(60deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(7) {
+  transform: rotateX(70deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(8) {
+  transform: rotateX(80deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(9) {
+  transform: rotateX(90deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(10) {
+  transform: rotateX(100deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(11) {
+  transform: rotateX(110deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(12) {
+  transform: rotateX(120deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(13) {
+  transform: rotateX(130deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(14) {
+  transform: rotateX(140deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(15) {
+  transform: rotateX(150deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(16) {
+  transform: rotateX(160deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(17) {
+  transform: rotateX(170deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(18) {
+  transform: rotateX(180deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(19) {
+  transform: rotateX(190deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(20) {
+  transform: rotateX(200deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(21) {
+  transform: rotateX(210deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(22) {
+  transform: rotateX(220deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(23) {
+  transform: rotateX(230deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(24) {
+  transform: rotateX(240deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(25) {
+  transform: rotateX(250deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(26) {
+  transform: rotateX(260deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(27) {
+  transform: rotateX(270deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(28) {
+  transform: rotateX(280deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(29) {
+  transform: rotateX(290deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(30) {
+  transform: rotateX(300deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(31) {
+  transform: rotateX(310deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(32) {
+  transform: rotateX(320deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(33) {
+  transform: rotateX(330deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(34) {
+  transform: rotateX(340deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(35) {
+  transform: rotateX(350deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(36) {
+  transform: rotateX(360deg) translateZ(2.75vw);
+}
+.circle-a__side:nth-of-type(1) {
+  background-color: #232222;
+}
+.circle-a__side:nth-of-type(2) {
+  background-color: #222121;
+}
+.circle-a__side:nth-of-type(3) {
+  background-color: #211f1f;
+}
+.circle-a__side:nth-of-type(4) {
+  background-color: #1f1e1e;
+}
+.circle-a__side:nth-of-type(5) {
+  background-color: #1e1d1d;
+}
+.circle-a__side:nth-of-type(6) {
+  background-color: #1d1c1c;
+}
+.circle-a__side:nth-of-type(7) {
+  background-color: #1b1a1a;
+}
+.circle-a__side:nth-of-type(8) {
+  background-color: #1a1919;
+}
+.circle-a__side:nth-of-type(9) {
+  background-color: #191818;
+}
+.circle-a__side:nth-of-type(10) {
+  background-color: #171717;
+}
+.circle-a__side:nth-of-type(11) {
+  background-color: #161515;
+}
+.circle-a__side:nth-of-type(12) {
+  background-color: #151414;
+}
+.circle-a__side:nth-of-type(13) {
+  background-color: #141313;
+}
+.circle-a__side:nth-of-type(14) {
+  background-color: #121212;
+}
+.circle-a__side:nth-of-type(15) {
+  background-color: #111010;
+}
+.circle-a__side:nth-of-type(16) {
+  background-color: #100f0f;
+}
+.circle-a__side:nth-of-type(17) {
+  background-color: #0e0e0e;
+}
+.circle-a__side:nth-of-type(18) {
+  background-color: #0d0d0d;
+}
+.circle-a__side:nth-of-type(19) {
+  background-color: #0c0b0b;
+}
+.circle-a__side:nth-last-of-type(1) {
+  background-color: #232222;
+}
+.circle-a__side:nth-last-of-type(2) {
+  background-color: #222121;
+}
+.circle-a__side:nth-last-of-type(3) {
+  background-color: #211f1f;
+}
+.circle-a__side:nth-last-of-type(4) {
+  background-color: #1f1e1e;
+}
+.circle-a__side:nth-last-of-type(5) {
+  background-color: #1e1d1d;
+}
+.circle-a__side:nth-last-of-type(6) {
+  background-color: #1d1c1c;
+}
+.circle-a__side:nth-last-of-type(7) {
+  background-color: #1b1a1a;
+}
+.circle-a__side:nth-last-of-type(8) {
+  background-color: #1a1919;
+}
+.circle-a__side:nth-last-of-type(9) {
+  background-color: #191818;
+}
+.circle-a__side:nth-last-of-type(10) {
+  background-color: #171717;
+}
+.circle-a__side:nth-last-of-type(11) {
+  background-color: #161515;
+}
+.circle-a__side:nth-last-of-type(12) {
+  background-color: #151414;
+}
+.circle-a__side:nth-last-of-type(13) {
+  background-color: #141313;
+}
+.circle-a__side:nth-last-of-type(14) {
+  background-color: #121212;
+}
+.circle-a__side:nth-last-of-type(15) {
+  background-color: #111010;
+}
+.circle-a__side:nth-last-of-type(16) {
+  background-color: #100f0f;
+}
+.circle-a__side:nth-last-of-type(17) {
+  background-color: #0e0e0e;
+}
+.circle-a__side:nth-last-of-type(18) {
+  background-color: #0d0d0d;
+}
+.circle-a__side:nth-last-of-type(19) {
+  background-color: #0c0b0b;
+}
+.circle-a__top, .circle-a__bottom {
+  position: absolute;
+  width: 5.5vw;
+  height: 5.5vw;
+  border-radius: 50%;
+  transform: rotateY(90deg) translateZ(0.5vw);
+}
+.circle-a__bottom {
+  transform: rotateY(90deg) translateZ(-0.5vw);
+}
+.circle-a__bottom {
+  border: 0.115vw solid #6bffff;
+  background-image: radial-gradient(circle, transparent 50%, #0a0a0a 50%);
+}
+.circle-a__top {
+  outline: 0.2vw solid rgba(29, 136, 254, 0.9);
+  box-shadow: 0 0 1vw #38ffff;
+}
+.circle-b {
+  position: absolute;
+  width: 1vw;
+  height: 4vw;
+  transform: rotateY(90deg) translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+}
+.circle-b__side {
+  position: absolute;
+  height: 0.3888888889vw;
+  width: 1vw;
+  background-color: #005252;
+}
+.circle-b__side:nth-of-type(1) {
+  transform: rotateX(10deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(2) {
+  transform: rotateX(20deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(3) {
+  transform: rotateX(30deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(4) {
+  transform: rotateX(40deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(5) {
+  transform: rotateX(50deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(6) {
+  transform: rotateX(60deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(7) {
+  transform: rotateX(70deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(8) {
+  transform: rotateX(80deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(9) {
+  transform: rotateX(90deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(10) {
+  transform: rotateX(100deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(11) {
+  transform: rotateX(110deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(12) {
+  transform: rotateX(120deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(13) {
+  transform: rotateX(130deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(14) {
+  transform: rotateX(140deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(15) {
+  transform: rotateX(150deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(16) {
+  transform: rotateX(160deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(17) {
+  transform: rotateX(170deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(18) {
+  transform: rotateX(180deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(19) {
+  transform: rotateX(190deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(20) {
+  transform: rotateX(200deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(21) {
+  transform: rotateX(210deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(22) {
+  transform: rotateX(220deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(23) {
+  transform: rotateX(230deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(24) {
+  transform: rotateX(240deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(25) {
+  transform: rotateX(250deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(26) {
+  transform: rotateX(260deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(27) {
+  transform: rotateX(270deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(28) {
+  transform: rotateX(280deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(29) {
+  transform: rotateX(290deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(30) {
+  transform: rotateX(300deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(31) {
+  transform: rotateX(310deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(32) {
+  transform: rotateX(320deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(33) {
+  transform: rotateX(330deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(34) {
+  transform: rotateX(340deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(35) {
+  transform: rotateX(350deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(36) {
+  transform: rotateX(360deg) translateZ(2vw);
+}
+.circle-b__side:nth-of-type(1) {
+  background-color: #009b9b;
+}
+.circle-b__side:nth-of-type(2) {
+  background-color: #009999;
+}
+.circle-b__side:nth-of-type(3) {
+  background-color: #009696;
+}
+.circle-b__side:nth-of-type(4) {
+  background-color: #009494;
+}
+.circle-b__side:nth-of-type(5) {
+  background-color: #009191;
+}
+.circle-b__side:nth-of-type(6) {
+  background-color: #008f8f;
+}
+.circle-b__side:nth-of-type(7) {
+  background-color: #008c8c;
+}
+.circle-b__side:nth-of-type(8) {
+  background-color: #008a8a;
+}
+.circle-b__side:nth-of-type(9) {
+  background-color: #008787;
+}
+.circle-b__side:nth-of-type(10) {
+  background-color: #008585;
+}
+.circle-b__side:nth-of-type(11) {
+  background-color: #008282;
+}
+.circle-b__side:nth-of-type(12) {
+  background-color: #007f7f;
+}
+.circle-b__side:nth-of-type(13) {
+  background-color: #007d7d;
+}
+.circle-b__side:nth-of-type(14) {
+  background-color: #007a7a;
+}
+.circle-b__side:nth-of-type(15) {
+  background-color: #007878;
+}
+.circle-b__side:nth-of-type(16) {
+  background-color: #007575;
+}
+.circle-b__side:nth-of-type(17) {
+  background-color: #007373;
+}
+.circle-b__side:nth-of-type(18) {
+  background-color: #007070;
+}
+.circle-b__side:nth-of-type(19) {
+  background-color: #006e6e;
+}
+.circle-b__side:nth-last-of-type(1) {
+  background-color: #009b9b;
+}
+.circle-b__side:nth-last-of-type(2) {
+  background-color: #009999;
+}
+.circle-b__side:nth-last-of-type(3) {
+  background-color: #009696;
+}
+.circle-b__side:nth-last-of-type(4) {
+  background-color: #009494;
+}
+.circle-b__side:nth-last-of-type(5) {
+  background-color: #009191;
+}
+.circle-b__side:nth-last-of-type(6) {
+  background-color: #008f8f;
+}
+.circle-b__side:nth-last-of-type(7) {
+  background-color: #008c8c;
+}
+.circle-b__side:nth-last-of-type(8) {
+  background-color: #008a8a;
+}
+.circle-b__side:nth-last-of-type(9) {
+  background-color: #008787;
+}
+.circle-b__side:nth-last-of-type(10) {
+  background-color: #008585;
+}
+.circle-b__side:nth-last-of-type(11) {
+  background-color: #008282;
+}
+.circle-b__side:nth-last-of-type(12) {
+  background-color: #007f7f;
+}
+.circle-b__side:nth-last-of-type(13) {
+  background-color: #007d7d;
+}
+.circle-b__side:nth-last-of-type(14) {
+  background-color: #007a7a;
+}
+.circle-b__side:nth-last-of-type(15) {
+  background-color: #007878;
+}
+.circle-b__side:nth-last-of-type(16) {
+  background-color: #007575;
+}
+.circle-b__side:nth-last-of-type(17) {
+  background-color: #007373;
+}
+.circle-b__side:nth-last-of-type(18) {
+  background-color: #007070;
+}
+.circle-b__side:nth-last-of-type(19) {
+  background-color: #006e6e;
+}
+.circle-b__top, .circle-b__bottom {
+  position: absolute;
+  width: 4vw;
+  height: 4vw;
+  border-radius: 50%;
+  transform: rotateY(90deg) translateZ(0.5vw);
+}
+.circle-b__bottom {
+  transform: rotateY(90deg) translateZ(-0.5vw);
+}
+.circle-b__bottom {
+  background-image: radial-gradient(circle, #6bffff 30%, #05ffff);
+  box-shadow: inset 0 0 1vw 0.25vw #b8ffff, 0 0 1vw 0.5vw #042f7f;
+  transform: rotateY(90deg) translateZ(0.45vw);
+}
+
+.turbo-back {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  grid-gap: 0.25vw;
+  justify-items: center;
+  align-items: center;
+  width: 85%;
+  height: 85%;
+}
+.turbo-back__item {
+  width: 2.5vw;
+  height: 2.5vw;
+  background-color: #6bffff;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0.5vw 0.125vw rgba(54, 54, 54, 0.25), 0 0 0.5vw 0.25vw rgba(15, 85, 215, 0.125), 0 0 0.5vw #38ffff;
+}
\ No newline at end of file
diff --git a/3d-spaceshipgsap/license.txt b/3d-spaceshipgsap/license.txt
new file mode 100644
index 0000000..9846e0f
--- /dev/null
+++ b/3d-spaceshipgsap/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Ricardo Oliva Alonso (https://codepen.io/ricardoolivaalonso/pen/poWbBdK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/3d-spaceshipgsap/src/index.pug b/3d-spaceshipgsap/src/index.pug
new file mode 100644
index 0000000..ceb902f
--- /dev/null
+++ b/3d-spaceshipgsap/src/index.pug
@@ -0,0 +1,169 @@
+audio#audio
+    source#audio(src="https://rawcdn.githack.com/ricardoolivaalonso/Codepen/cc4996b50006214d2f3a1e8059bee90a7455d298/Space/audio.mp3",type="audio/mpeg")
+        
+svg.svg-icon(version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 122.88 65.79' style='enable-background:new 0 0 122.88 65.79' xml:space='preserve')
+    g
+        path.st0(d='M13.37,31.32c-22.23,12.2,37.65,19.61,51.14,19.49v-7.44l11.21,11.2L64.51,65.79v-6.97 C37.4,59.85-26.41,42.4,11.97,27.92c0.36,1.13,0.8,2.2,1.3,3.2L13.37,31.32L13.37,31.32z M108.36,8.31c0-2.61,0.47-4.44,1.41-5.48 c0.94-1.04,2.37-1.56,4.3-1.56c0.92,0,1.69,0.12,2.28,0.34c0.59,0.23,1.08,0.52,1.45,0.89c0.38,0.36,0.67,0.75,0.89,1.15 c0.22,0.4,0.39,0.87,0.52,1.41c0.26,1.02,0.38,2.09,0.38,3.21c0,2.49-0.42,4.32-1.27,5.47c-0.84,1.15-2.29,1.73-4.36,1.73 c-1.15,0-2.09-0.19-2.8-0.55c-0.71-0.37-1.3-0.91-1.75-1.62c-0.33-0.51-0.59-1.2-0.77-2.07C108.45,10.34,108.36,9.38,108.36,8.31 L108.36,8.31z M26.47,10.49l-9-1.6c0.75-2.86,2.18-5.06,4.31-6.59C23.9,0.77,26.91,0,30.8,0c4.47,0,7.69,0.83,9.69,2.5 c1.99,1.67,2.98,3.77,2.98,6.29c0,1.48-0.41,2.82-1.21,4.01c-0.81,1.2-2.02,2.25-3.65,3.15c1.32,0.33,2.34,0.71,3.03,1.15 c1.14,0.7,2.02,1.63,2.65,2.77c0.63,1.15,0.95,2.51,0.95,4.1c0,2-0.52,3.91-1.56,5.75c-1.05,1.83-2.55,3.24-4.51,4.23 c-1.96,0.99-4.54,1.48-7.74,1.48c-3.11,0-5.57-0.37-7.36-1.1c-1.8-0.73-3.28-1.8-4.44-3.22c-1.16-1.41-2.05-3.19-2.67-5.33 l9.53-1.27c0.38,1.92,0.95,3.26,1.74,4.01c0.78,0.74,1.78,1.12,3,1.12c1.27,0,2.33-0.47,3.18-1.4c0.85-0.93,1.27-2.18,1.27-3.74 c0-1.59-0.41-2.82-1.22-3.69c-0.81-0.87-1.92-1.31-3.32-1.31c-0.74,0-1.77,0.18-3.07,0.56l0.49-6.81c0.52,0.08,0.93,0.12,1.22,0.12 c1.23,0,2.26-0.4,3.08-1.19c0.82-0.79,1.24-1.72,1.24-2.81c0-1.05-0.31-1.88-0.93-2.49c-0.62-0.62-1.48-0.93-2.55-0.93 c-1.12,0-2.02,0.34-2.72,1.01C27.19,7.62,26.72,8.8,26.47,10.49L26.47,10.49z M75.15,8.27l-9.48,1.16 c-0.25-1.32-0.66-2.24-1.24-2.78c-0.59-0.54-1.31-0.81-2.16-0.81c-1.54,0-2.74,0.77-3.59,2.33c-0.62,1.13-1.09,3.52-1.38,7.19 c1.14-1.16,2.31-2.01,3.5-2.56c1.2-0.55,2.59-0.83,4.16-0.83c3.06,0,5.64,1.09,7.75,3.27c2.11,2.19,3.17,4.96,3.17,8.31 c0,2.26-0.53,4.32-1.6,6.2c-1.07,1.87-2.55,3.29-4.44,4.25c-1.9,0.96-4.27,1.44-7.13,1.44c-3.43,0-6.18-0.58-8.25-1.76 c-2.07-1.17-3.73-3.03-4.97-5.59c-1.24-2.56-1.86-5.95-1.86-10.18c0-6.18,1.3-10.71,3.91-13.59C54.13,1.44,57.74,0,62.36,0 c2.73,0,4.88,0.31,6.46,0.94c1.58,0.63,2.9,1.56,3.94,2.76C73.81,4.92,74.61,6.44,75.15,8.27L75.15,8.27z M57.62,23.55 c0,1.86,0.47,3.31,1.4,4.36c0.94,1.05,2.08,1.58,3.44,1.58c1.25,0,2.3-0.48,3.14-1.43c0.84-0.95,1.26-2.37,1.26-4.26 c0-1.93-0.44-3.41-1.31-4.42c-0.88-1.01-1.96-1.52-3.26-1.52c-1.32,0-2.44,0.49-3.34,1.48C58.06,20.32,57.62,21.72,57.62,23.55 L57.62,23.55z M77.91,17.57c0-6.51,1.17-11.07,3.52-13.67C83.77,1.3,87.35,0,92.14,0c2.31,0,4.2,0.29,5.68,0.85 c1.48,0.57,2.69,1.31,3.62,2.22c0.94,0.91,1.68,1.87,2.21,2.87c0.54,1.01,0.97,2.18,1.3,3.52c0.64,2.55,0.96,5.22,0.96,8 c0,6.22-1.05,10.76-3.16,13.64c-2.1,2.88-5.72,4.32-10.87,4.32c-2.88,0-5.21-0.46-6.99-1.38c-1.78-0.92-3.23-2.27-4.37-4.05 c-0.82-1.26-1.47-2.98-1.93-5.17C78.14,22.64,77.91,20.22,77.91,17.57L77.91,17.57z M87.34,17.59c0,4.36,0.38,7.34,1.16,8.94 c0.77,1.6,1.89,2.39,3.36,2.39c0.97,0,1.8-0.34,2.51-1.01c0.71-0.68,1.23-1.76,1.56-3.22c0.34-1.47,0.5-3.75,0.5-6.85 c0-4.55-0.38-7.6-1.16-9.18c-0.77-1.56-1.93-2.35-3.47-2.35c-1.58,0-2.71,0.8-3.42,2.39C87.69,10.31,87.34,13.27,87.34,17.59 L87.34,17.59z M112.14,8.32c0,1.75,0.15,2.94,0.46,3.58c0.31,0.64,0.76,0.96,1.35,0.96c0.39,0,0.72-0.13,1.01-0.41 c0.28-0.27,0.49-0.7,0.63-1.29c0.13-0.59,0.2-1.5,0.2-2.74c0-1.82-0.15-3.05-0.46-3.68c-0.31-0.63-0.77-0.94-1.39-0.94 c-0.63,0-1.09,0.32-1.37,0.96C112.28,5.4,112.14,6.59,112.14,8.32L112.14,8.32z M109.3,30.23c10.56,5.37,8.04,12.99-10.66,17.62 c-5.3,1.31-11.29,2.5-17.86,2.99v6.05c7.31-0.51,14.11-2.19,20.06-3.63c28.12-6.81,27.14-18.97,9.36-25.83 C109.95,28.42,109.65,29.35,109.3,30.23L109.3,30.23z')
+
+div.main#h
+    div.main-rotate
+        div.shadows
+            div.shadow-5.shadow
+            div.shadow-4.shadow
+            div.shadow-1.shadow
+            div.shadow-2.shadow
+            div.shadow-3.shadow
+            div.light-1.shadow
+            div.light-2.shadow
+            div.light-3.shadow
+            div.light-4.shadow
+        
+        div.wrapper-c1
+            div.wrapper-c2
+                div.wrapper-a
+                    div.a
+                        div.a__front.face.flex 
+                            div.turbo
+                                div.circle.flex
+                                    div.circle-a  
+                                        - var n = 0
+                                        while n < 36
+                                            div.circle-a__side
+                                            - n++
+                                        div.circle-a__bottom
+                                        div.circle-a__top
+                                div.circle.flex
+                                    div.circle-b  
+                                        - var n = 0
+                                        while n < 36
+                                            div.circle-b__side
+                                            - n++
+                                        div.circle-b__bottom
+                                        div.circle-b__top
+                    
+                        div.a__back.face.flex.w1 
+                            div.turbo-back
+                                div.turbo-back__item
+                                div.turbo-back__item
+                                div.turbo-back__item
+                                div.turbo-back__item
+
+                            div.wave-1.wave
+                            div.wave-2.wave
+                            div.wave-3.wave
+                            div.wave-4.wave
+                            div.wave-5.wave
+                                
+                        div.a__right.face 
+                        div.a__left.face 
+                        div.a__top.face 
+                            div.a__top-shadow.face
+                            div.a__top-neon.face
+                        div.a__bottom.face 
+                    div.a
+                        div.a__front.face.flex 
+                            div.turbo
+                                div.circle.flex
+                                    div.circle-a  
+                                        - var n = 0
+                                        while n < 36
+                                            div.circle-a__side
+                                            - n++
+                                        div.circle-a__bottom
+                                        div.circle-a__top
+                                div.circle.flex
+                                    div.circle-b  
+                                        - var n = 0
+                                        while n < 36
+                                            div.circle-b__side
+                                            - n++
+                                        div.circle-b__bottom
+                                        div.circle-b__top
+                                            
+                        div.a__back.face.flex.w2
+                            div.turbo-back
+                                div.turbo-back__item
+                                div.turbo-back__item
+                                div.turbo-back__item
+                                div.turbo-back__item
+                            
+                            div.wave-1.wave
+                            div.wave-2.wave
+                            div.wave-3.wave
+                            div.wave-4.wave
+                            div.wave-5.wave
+                        div.a__right.face 
+                        div.a__left.face 
+                        div.a__top.face 
+                            div.a__top-shadow.face
+                            div.a__top-neon.face
+                        div.a__bottom.face 
+                    div.wings
+                        div.wing
+                            div.wing__front.face 
+                            div.wing__back.face 
+                            div.wing__right.face 
+                            div.wing__left.face 
+                            div.wing__top.face 
+                            div.wing__bottom.face 
+                        div.wing
+                            div.wing__front.face 
+                            div.wing__back.face 
+                            div.wing__right.face 
+                            div.wing__left.face 
+                            div.wing__top.face 
+                            div.wing__bottom.face 
+
+                div.wrapper-b
+                    div.b
+                        div.b__front.face 
+                        div.b__back.face 
+                        div.b__right.face 
+                        div.b__left.face 
+                        div.b__top.face 
+                        div.b__bottom.face 
+                    div.c
+                        div.c__front.face 
+                            div.c__front-l.face 
+                        div.c__back.face 
+                        div.c__right.face 
+                        div.c__left.face 
+                        div.c__top.face 
+                        div.c__bottom.face 
+                    div.d
+                        div.d__right.face 
+                        div.d__left.face 
+                        div.d__top.face 
+                            div.d__top-l.face 
+                        div.d__bottom.face 
+                    div.e
+                        div.e__front.face 
+                            div.e__front-i.flex 
+                                div.e__front-t.flex ◠‿◠
+                        div.e__back.face 
+                        div.e__right.face 
+                        div.e__left.face 
+                        div.e__bottom.face 
+                    div.f
+                        div.f__front.face 
+                            div.f__front-i.face 
+                        div.f__right.face 
+                        div.f__left.face 
+                        div.f__top.face 
+                        div.f__bottom.face 
+                    div.g
+                        div.g__front.face 
+                        div.g__right.face 
+                        div.g__left.face 
+                        div.g__top.face 
+                        div.g__bottom.face 
+                    div.h
+                        div.h__front.face 
+                        div.h__back.face 
+                        div.h__right.face 
+                        div.h__left.face 
+                        div.h__top.face 
+                        div.h__bottom.face 
+                    div.i
+                        div.i__right.face 
+                        div.i__left.face 
\ No newline at end of file
diff --git a/3d-spaceshipgsap/src/script.js b/3d-spaceshipgsap/src/script.js
new file mode 100644
index 0000000..81dc1b1
--- /dev/null
+++ b/3d-spaceshipgsap/src/script.js
@@ -0,0 +1,124 @@
+/*
+		Designed by: Adam Witton
+		Original image: https://dribbble.com/shots/3958361-Mini-Spaceship
+*/
+
+gsap.registerPlugin()
+
+const vw = (size) => window.innerWidth * ( size/100 )
+const svg = document.querySelector('.svg-icon')
+const a = document.querySelector("#audio");
+const rotate = new TimelineMax({ paused: true })
+const wings = new TimelineMax({ reversed: true })
+
+const rotateSpaceFunc = () => {
+    rotate.paused(!rotate.paused())
+    wings.reversed(!wings.reversed())
+
+    a.loop = true
+    if(a.paused) { a.play() }
+    else {
+        a.pause()
+        a.currentTime = 0
+    }
+}
+
+svg.addEventListener('click',  rotateSpaceFunc)
+
+// ===========================
+wings.staggerTo(".wrapper-a",.3, {
+    z: vw(2.125),
+    ease: "power1.inOut"
+})
+
+rotate.staggerTo(".main-rotate", 8, {
+    rotation: 360,
+    repeat: -1,
+    ease: 'none'
+})
+
+gsap.to(".wrapper-c1", {
+    z: vw(1.85),
+    duration: .75,
+    repeat: -1,
+    yoyo: true,
+    ease: "power1.inOut"
+})
+
+gsap.to(".wrapper-c2", { keyframes:[
+    {
+        rotationX: 0,
+        rotationY: 0,
+        repeat: -1,
+        yoyo: true,
+    },
+    {
+        rotationX: -3,
+        rotationY: 2,
+        repeat: -1,
+        yoyo: true,
+    },
+    {
+        rotationX: 3,
+        rotationY: 0,
+        repeat: -1,
+        yoyo: true,
+    },
+    {
+        rotationX: -1,
+        rotationY: 0,
+        repeat: -1,
+        yoyo: true,
+    }
+
+], ease: "sine" })
+
+gsap.to(".shadows", {
+    transform: "scale(.935)",
+    opacity: .75,
+    duration: .75,
+    webkitFilter: `blur(${vw(1)})`,
+    repeat: -1,
+    yoyo: true,
+    ease: "power1.inOut"
+})
+
+gsap.to(".light-3, .light-4", {
+    height: vw(15),
+    y: vw(1),
+    duration: .1,
+    repeat: -1,
+    yoyo: true,
+    ease: "linear",
+})
+
+gsap.to(".w1 .wave", {
+    height: vw(10),
+    width: vw(10),
+    z: vw(16),
+    duration: .5,
+    repeat: -1,
+    stagger: 0.1,
+    delay: .5,
+    border: `${vw(.025)}vw solid rgba(255,255,255,0)`,
+    ease: "power1",
+})
+
+gsap.to(".w2 .wave", {
+    height: vw(10),
+    width: vw(10),
+    z: vw(16),
+    duration: .5,
+    repeat: -1,
+    stagger: 0.1,
+    delay: .5,
+    border: `${vw(.025)}vw solid rgba(255,255,255,0)`,
+    ease: "power1",
+})
+
+gsap.to(".e__front-t", {
+    opacity: 0,
+    repeat: -1,
+    duration: 2,
+    ease: CustomEase.create("custom", "M0,0,C0.037,0,0.014,0.938,0.05,0.948,0.353,1.03,0.737,-0.058,0.944,-0.004,0.944,-0.004,0.944,-0.004,0.944,-0.004,0.998,0.01,0.959,0.942,1,1"),
+})
diff --git a/3d-spaceshipgsap/src/style.scss b/3d-spaceshipgsap/src/style.scss
new file mode 100644
index 0000000..ee0f7f3
--- /dev/null
+++ b/3d-spaceshipgsap/src/style.scss
@@ -0,0 +1,943 @@
+$unit: 1vw;
+//
+$bg-1: darken(#30beff, 8);
+$bg-2: darken(#259bfd, 6);
+$bg-3: darken(#1d7ce8, 4);
+$blue-1: #32c8fe;
+$blue-2: #27a2fe;
+$blue-3: #1d88fe;
+$blue-4: #0f55d7;
+$blue-5: #042f7f;
+$black-1: #363636;
+$black-2: #1a1919;
+$black-3: #0a0a0a;
+$neon: #6bffff;
+/***********************/
+@mixin cylinder($base, $sides, $degree, $pi, $width, $color) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+	position: absolute;
+
+    &__side{
+        position: absolute;
+        height: ( 2 * $pi * ($base / 2) ) / $sides ;
+        width: $width;
+        background-color: darken($color, 15);
+
+        @for $var from 1 to ($sides + 1) {
+            &:nth-of-type(#{$var}){ transform: rotateX( $var * $degree / $sides ) translateZ($base / 2); }
+        }
+        @for $var from 1 to 20 {
+            &:nth-of-type(#{$var}){ background-color: darken($color, $var * .5); }
+        }
+        @for $var from 1 to 20 {
+            &:nth-last-of-type(#{$var}){ background-color: darken($color, $var * .5); }
+        }
+    }
+    &__top,
+    &__bottom{
+        position: absolute;
+        width: $base;
+        height: $base;
+        border-radius: 50%;
+        transform: rotateY(90deg) translateZ( $width / 2 );
+    }
+    &__bottom{ transform: rotateY(90deg) translateZ( $width / -2 );}
+}
+@mixin cube($width, $height, $depth) {
+    &__front{ @include cube-front($width, $height, $depth); }
+    &__back{ @include cube-back($width, $height, $depth); }
+    &__right{ @include cube-right($width, $height, $depth); }
+    &__left{ @include cube-left($width, $height, $depth); }
+    &__top{ @include cube-top($width, $height, $depth);}
+    &__bottom{ @include cube-bottom($width, $height, $depth); }
+}
+//----------------------
+@mixin cube-front($width, $height, $depth) {
+    width: $width;
+    height: $height;
+    transform-origin: bottom left;
+    transform: rotateX(-90deg) translateZ( -($height - ($depth * 2) ) );
+}
+@mixin cube-back($width, $height, $depth) {
+    width: $width;
+    height: $height;
+    transform-origin: top left;
+    transform: rotateX(-90deg) rotateY(180deg) translateX(-$width) translateY(-$height) ;
+}
+@mixin cube-right($width, $height, $depth) {
+    width: $depth * 2;
+    height: $height;
+    transform-origin: top left;
+    transform: rotateY(90deg) rotateZ(-90deg) translateZ($width) translateX(-$depth * 2) translateY(-$height);
+}
+@mixin cube-left($width, $height, $depth) {
+    width: $depth * 2;
+    height: $height;
+    transform-origin: top left;
+    transform: rotateY(-90deg) rotateZ(90deg) translateY(-$height);
+}
+@mixin cube-top($width, $height, $depth) {
+    width: $width;
+    height: $depth * 2;
+    transform-origin: top left;
+    transform: translateZ($height) ;
+}
+@mixin cube-bottom($width, $height, $depth) {
+    width: $width;
+    height: $depth * 2;
+    transform-origin: top left;
+    transform: rotateY(180deg) translateX(-$width);
+}
+/***********************/
+/***********************/
+*, *::after, *::before {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+    transform-style: preserve-3d;
+
+	user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    appearance: none;
+    font-family: 'Press Start 2P', cursive;
+}
+/***********************/
+/***********************/
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100%;
+
+    color: $blue-3;
+    font-weight: bolder;
+    overflow: hidden;
+    background-image: linear-gradient(to bottom, $bg-3, $bg-2, $bg-1, darken($bg-1, 5));
+}
+.face{ position: absolute; }
+.flex{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.svg-icon{
+    position: absolute;
+    left: 50%;
+    bottom: 50px;
+    width: 50px;
+    height: 50px;
+
+    z-index: 1;
+    opacity: .65;
+    transform: translateX(-50%);
+    cursor: pointer;
+
+    &:hover{ opacity: .9; }
+    @media (max-height: 400px) { left: 50px; }
+
+}
+.svg-icon path,
+.svg-icon polygon,
+.svg-icon rect {
+	fill: white;
+}
+.svg-icon circle {
+	stroke: white;
+	stroke-width: 1;
+}
+/***********************/
+/***********************/
+.main{
+    position: absolute;
+    width: 24 * $unit;
+    height: 25 * $unit;
+    transform:
+        perspective(300 * $unit)
+        rotateX(60deg)
+        rotateZ(30deg)
+        translateZ(-8 * $unit)
+    ;
+    transition: transform 550ms ease-out;
+
+    &-rotate{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+}
+.wrapper-c1,
+.wrapper-c2{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+.wrapper-a{
+    position:absolute;
+    width: 100%;
+    height: 100%;
+    transform: translateZ(1 * $unit);
+
+}
+.wrapper-b{
+    position:absolute;
+    left: 50%;
+    width: 9.5 * $unit;
+    height: 100%;
+    transform: translateX(-50%) translateZ(2 * $unit);
+}
+.shadows{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    filter: blur(.85 * $unit);
+}
+.shadow{
+    position: absolute;
+    top: 0;
+    border-radius: 2 * $unit;
+    box-shadow: 0 0 2 * $unit lighten($blue-4, 10);
+    background-image: radial-gradient(rgba(darken($blue-5, 3), .8) 40%, rgba(darken($blue-4, 3), .8) 70%);
+}
+.shadow-1,
+.shadow-2{
+    width: 8 * $unit;
+    height: 17 * $unit;
+}
+.shadow-1{ left: -.5 * $unit; }
+.shadow-2{ right: -.5 * $unit; }
+.shadow-3{
+    top: 4 * $unit;
+    left: 50%;
+    width: 11 * $unit;
+    height: 20 * $unit;
+    transform: translateX(-50%);
+}
+.shadow-4{
+    top: 4 * $unit;
+    width: 100%;
+    height: 12 * $unit;
+}
+.shadow-5{
+    top: 5 * $unit;
+    left: -15%;
+    width: 130%;
+    height: 4 * $unit;
+}
+.light-1,
+.light-2,
+.light-3,
+.light-4,{
+    top: 14 * $unit;
+    width: 5 * $unit;
+    height: 24 * $unit;
+    border-radius: 50%;
+    box-shadow: 0 0 .5 * $unit lighten($neon, 10);
+    background-image: linear-gradient(to bottom, rgba($neon, .185), rgba($neon, .4) 20%, rgba($neon, .25) 60%, rgba($neon, .05) );
+}
+.light-1{ left: 0; }
+.light-2{ right: 0; }
+
+.light-3,
+.light-4{
+    top: -10 * $unit;
+    width: 7 * $unit;
+    height: 16 * $unit;
+}
+.light-3{ left: 0; }
+.light-4{ right: 0; }
+
+.wave{
+    position: absolute;
+    border-radius: 50%;
+}
+// ==========================
+.a{
+    $width-el: 7 * $unit;
+    $height-el: 7 * $unit;
+    $depth-el: 8 * $unit;
+
+    @include cube($width-el, $height-el, $depth-el);
+    width: $width-el;
+    height: $depth-el * 2;
+    position: absolute;
+
+    &__front,
+    &__back{
+        background-position:
+            0 0,
+            0 100%,
+            100% 0,
+            100% 100%,
+            49% 0
+        ;
+        background-size:
+            10% 50%,
+            10% 50%,
+            10% 50%,
+            10% 50%,
+            82% 100%
+        ;
+        background-repeat: no-repeat;
+    }
+    &__back{
+        box-shadow:  inset 0 0 0 .25 * $unit $neon;
+        border-radius: 1.15 * $unit;
+    }
+    &__top,
+    &__bottom{
+        &::before,
+        &::after{
+            content: '';
+            position: absolute;
+            width: 1.1 * $unit;
+            height: 100%;
+        }
+        &::before{
+            left: 89%;
+            transform-origin: left;
+            transform: rotateY(45deg);
+        }
+        &::after{
+            right: 89%;
+            transform-origin: right;
+            transform: rotateY(-45deg);
+        }
+    }
+    &__bottom{ background-image: linear-gradient(to right, transparent 10%, $blue-4 10%, darken($blue-4, 4) 90%, transparent 90% ); }
+
+    &:nth-of-type(1){
+        left: 0;
+        .a__front{
+            background-image:
+                linear-gradient(-45deg, $blue-2 2.4125 * $unit, transparent 2.4125 * $unit),
+                linear-gradient(45deg, transparent .525 * $unit, darken($blue-3, 10) .525 * $unit, $blue-2),
+                linear-gradient(45deg, $blue-2 2.4125 * $unit, transparent 2.4125 * $unit),
+                linear-gradient(-45deg, transparent .525 * $unit, darken($blue-3, 10) .525 * $unit, $blue-2),
+                linear-gradient(to bottom, $blue-2 50%, darken($blue-3, 10))
+            ;
+        }
+        .a__back{
+            background-image:
+                linear-gradient(-45deg, $blue-3  2.4125 * $unit, transparent 2.4125 * $unit),
+                linear-gradient(45deg, transparent .525 * $unit, darken($blue-3, 5) .525 * $unit, $blue-3),
+                linear-gradient(45deg, $blue-3 2.4125 * $unit, transparent 2.4125 * $unit),
+                linear-gradient(-45deg, transparent .525 * $unit, darken($blue-3, 5) .525 * $unit, $blue-3),
+                linear-gradient(to bottom, $blue-3 50%, darken($blue-3, 5))
+            ;
+        }
+        .a__top{
+            background-image: linear-gradient(to right,  transparent 10%, lighten($blue-1, 4) 10%, darken($blue-1, 4) 90%, transparent 90% );
+            &::before{ background-color: lighten($blue-2, 1); }
+            &::after{ background-color: lighten($blue-1, 5); }
+
+            &-shadow{
+                top: 2.75 * $unit;
+                right: 1 * $unit;
+                width: 3 * $unit;
+                height: 9 * $unit;
+
+                transform-origin: bottom right;
+                transform: skewY(-40deg) translateZ(1px);
+                background-image: linear-gradient(to left, rgba($blue-1, .6), rgba($neon, .4), rgba($neon, .2) );
+                filter: blur(.45 * $unit);
+            }
+
+            &-neon{
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                width: .5 * $unit;
+                height: 100%;
+
+                background-color: lighten($neon, 5);
+                box-shadow: inset 0 0 .15 * $unit $blue-5;
+            }
+        }
+        .a__right{ background-image: linear-gradient(to bottom, transparent 10%, darken($blue-3, 10) 10%, darken($blue-3, 16) 90%, transparent 90%); }
+        .a__left{
+            background-image: linear-gradient(to bottom, transparent 10%, lighten($blue-1, 3) 10%, darken($blue-1, 6) 90%, transparent 90%);
+
+            &::before{
+                content: '';
+                position: absolute;
+                bottom: 10%;
+                right: 7 * $unit;
+                width: 4 * $unit;
+                height: 2.5 * $unit;
+
+                transform-origin: top left;
+                transform: skewX(20deg);
+                background-image: linear-gradient(to bottom, darken($blue-2, 2), rgba($blue-2,.2));
+                filter: blur(.15 * $unit);
+            }
+        }
+        .a__bottom{
+            &::before{ background-color: $blue-3; }
+            &::after{ background-color: $blue-4; }
+        }
+    }
+    &:nth-of-type(2){
+        right: 0;
+        .a__front{
+            background-image:
+                linear-gradient(-45deg, darken($blue-2, 6) 2.4125 * $unit, transparent 2.4125 * $unit),
+                linear-gradient(45deg, transparent .525 * $unit, darken($blue-3, 14) .525 * $unit, $blue-2),
+                linear-gradient(45deg, darken($blue-2, 6) 2.4125 * $unit, transparent 2.4125 * $unit),
+                linear-gradient(-45deg, transparent .525 * $unit, darken($blue-3, 14) .525 * $unit, darken($blue-2, 6)),
+                linear-gradient(to bottom, darken($blue-2, 6) 50%, darken($blue-3, 14))
+            ;
+        }
+        .a__back{
+            background-image:
+                linear-gradient(-45deg, darken($blue-3, 3)  2.4125 * $unit, transparent 2.4125 * $unit),
+                linear-gradient(45deg, transparent .525 * $unit, darken($blue-3, 6) .525 * $unit, $blue-3),
+                linear-gradient(45deg, darken($blue-3, 3) 2.4125 * $unit, transparent 2.4125 * $unit),
+                linear-gradient(-45deg, transparent .525 * $unit, darken($blue-3, 6) .525 * $unit, $blue-3),
+                linear-gradient(to bottom, darken($blue-3, 3) 50%, darken($blue-3, 6))
+            ;
+        }
+        .a__top{
+            background-image:
+                linear-gradient(60deg, rgba($blue-2, .8), rgba($blue-2, .45) 48%, transparent 50% ),
+                linear-gradient(to right, transparent 10%, $blue-1 10%, darken($blue-1, 4) 90%, transparent 90% )
+            ;
+            background-size:
+                80% 100%,
+                100% 100%
+            ;
+            background-position:
+                52% 0,
+                0 0
+            ;
+            background-repeat: no-repeat;
+
+            &::before{ background-image: linear-gradient(to right, $blue-2, $blue-3); }
+            &::after{ background-image: linear-gradient(to left, darken($blue-1, 5), $blue-3); }
+
+            &-shadow{
+                top: 2.75 * $unit;
+                left: 1.5 * $unit;
+                width: 3 * $unit;
+                height: 9 * $unit;
+
+                transform-origin: bottom left;
+                transform: skewY(40deg) translateZ(1px);
+                background-image: linear-gradient(to right, rgba($neon, .1), rgba($neon, .315), rgba($neon, .215) );
+                filter: blur(.5 * $unit);
+            }
+            &-neon{
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                width: .5 * $unit;
+                height: 100%;
+
+                background-color: $neon;
+                box-shadow: inset 0 0 .15 * $unit $blue-5;
+            }
+        }
+        .a__right{
+            background-image: linear-gradient(to bottom, transparent 10%, darken($blue-3, 3) 10%, darken($blue-3, 13) 90%, transparent 90%);
+            &::before{
+                content: '';
+                position: absolute;
+                bottom: 10%;
+                left: 7 * $unit;
+
+                width: 4 * $unit;
+                height: 2.5 * $unit;
+                transform-origin: top left;
+                transform: skewX(-20deg);
+                background-image: linear-gradient(to bottom, rgba($blue-4,.9), rgba($blue-4,.2));
+                filter: blur(.15 * $unit);
+            }
+        }
+        .a__left{ background-image: linear-gradient(to bottom, transparent 10%, darken($blue-3, 2) 10%, darken($blue-3, 15) 90%, transparent 90%); }
+        .a__bottom{
+            &::before{ background-color: $blue-4; }
+            &::after{ background-color: $blue-4; }
+        }
+    }
+}
+
+.b{
+    $width-el: 9.5 * $unit;
+    $height-el: 10 * $unit;
+    $depth-el: 5 * $unit;
+
+    @include cube($width-el, $height-el, $depth-el);
+    width: $width-el;
+    height: $depth-el * 2;
+    position: absolute;
+    top: 2.1 * $unit;
+
+    &__front{ background-color: $blue-5; }
+    &__back{
+        background-image: linear-gradient(to bottom, lighten($blue-3, 4), $blue-3 20% ,darken($blue-3, 12));
+
+        &::before{
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            padding: .75 * $unit;
+
+            background-image:
+                radial-gradient(rgba($neon, .2) 20%, transparent 21%),
+                radial-gradient(rgba($neon, .2) 20%, transparent 21%)
+            ;
+            background-size: .75 * $unit .75 * $unit;
+            background-repeat: repeat;
+            background-clip: content-box;
+        }
+    }
+    &__left,
+    &__right{
+        padding: .6 * $unit;
+        &::before{
+            content: '';
+            display: block;
+            width: 100%;
+            height: 2 * $unit;
+        }
+    }
+    &__left{
+        background-image: linear-gradient(to bottom, lighten($blue-1, 4), $blue-1 30%, $blue-4 );
+
+        &::before{
+            background-image: linear-gradient(to bottom, lighten($neon, 5), $neon);
+            box-shadow:
+                0 0 .95 * $unit lighten($neon, 5),
+                inset 0 0 .5 * $unit lighten($neon, 5);
+        }
+    }
+    &__right{
+        background-image: linear-gradient(to bottom, $blue-3, darken($blue-3, 5) 30%, darken($blue-3, 20) );
+
+        &::before{
+            background-image: linear-gradient(to top, darken($neon, 5), $neon);
+            box-shadow:
+                0 0 .95 * $unit darken($neon, 5),
+                inset 0 0 .5 * $unit darken($neon, 10);
+        }
+    }
+    &__top{ background-image: linear-gradient(to right, darken($blue-1, 1) , darken($blue-1, 10) ); }
+    &__bottom{ background-color: $blue-4; }
+}
+.c{
+    $width-el: 9.5 * $unit;
+    $height-el: 10 * $unit;
+    $depth-el: 2.5 * $unit;
+
+    @include cube($width-el, $height-el, $depth-el);
+    width: $width-el;
+    height: $depth-el * 2;
+    position: absolute;
+    top: 12.25 * $unit;
+
+    &__front{
+        background-color: $blue-2;
+
+        &-l{
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-image: linear-gradient(to bottom, transparent 15%, rgba($neon, .3) 15%, rgba($neon, .4));
+        }
+    }
+    &__back{ background-color: $blue-5; }
+    &__left{ background-image: linear-gradient(to bottom, lighten($blue-1, 4), $blue-1 30%, $blue-4 );}
+    &__right{ background-image: linear-gradient(to bottom, $blue-3, darken($blue-3, 5) 30%, darken($blue-3, 20) ); }
+    &__top{ background-image: linear-gradient(to right, darken($blue-1, 1) , darken($blue-1, 10) ); }
+    &__bottom{ background-color: $blue-4; }
+}
+
+.d{
+    $width-el: 9.5 * $unit;
+    $height-el: .6 * $unit;
+    $depth-el: 2.875 * $unit;
+
+    @include cube($width-el, $height-el, $depth-el);
+    width: $width-el;
+    height: $depth-el * 2;
+    position: absolute;
+
+    &__left{ background-image: linear-gradient(to right, darken($blue-3, 5), $blue-1); }
+    &__right{ background-image: linear-gradient(to left, darken($blue-3, 10), $blue-3 ); }
+    &__top{
+        background-image: linear-gradient(to bottom, darken($blue-3, 14), darken($blue-3, 8) 40%, darken($blue-3, 3));
+
+        &-l{
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-image: linear-gradient(to right, rgba($neon, .3), rgba($neon, .4));
+        }
+    }
+    &__bottom{ background-color: $blue-4; }
+
+    bottom: 2 * $unit;
+}
+.e{
+    $width-el: 9.5 * $unit;
+    $height-el: 8.5 * $unit;
+    $depth-el: .3 * $unit;
+
+    @include cube($width-el, $height-el, $depth-el);
+    width: $width-el;
+    height: $depth-el * 2;
+    position: absolute;
+    bottom: 1.4 * $unit;
+
+    &__front{
+        background-color: $blue-2;
+        padding: .6 * $unit;
+
+        &-i{
+            width: 100%;
+            height: 2 * $unit;
+
+            background-image: linear-gradient(to bottom, $neon, darken($neon, 2));
+            box-shadow:
+                0 0 .95 * $unit darken($neon, 5),
+                inset 0 0 .25 * $unit darken($neon, 10);
+            overflow: hidden;
+
+            &::before{
+                content: '';
+                position: absolute;
+                width: 3 * $unit;
+                height: 100%;
+                left: 0;
+
+                transform-origin: top left;
+                transform: skewX(20deg);
+                background-image: linear-gradient(to right, rgba($neon, .075), transparent) ;
+                filter: blur(.2 * $unit);
+            }
+        }
+        &-t{
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            font-size: 1 * $unit;
+        }
+    }
+    &__back{ background-color: $blue-1; }
+    &__left{ background-image: linear-gradient(to bottom, lighten($blue-1, 4), $blue-1 ); }
+    &__right{ background-color:  $blue-3; }
+    &__bottom{ background-color: $blue-4; }
+}
+.f{
+    $width-el: 9.5 * $unit;
+    $height-el: .6 * $unit;
+    $depth-el: 3.15 * $unit;
+
+    @include cube($width-el, $height-el, $depth-el);
+    width: $width-el;
+    height: $depth-el * 2;
+    position: absolute;
+
+    bottom: 1.5 * $unit;
+    transform: translateZ(8.5 * $unit);
+
+    &__front{
+        &-i{
+            position: absolute;
+            bottom: 0;
+
+            width: 100%;
+            height: 2.8 * $unit;
+            transform-origin: bottom;
+            transform: rotateX(78deg);
+            background-image: linear-gradient(to right, darken($blue-1, 1) , darken($blue-1, 10) );
+
+        }
+    }
+    &__left{
+        background-image: linear-gradient(12deg, lighten($blue-1, 4) 70%, transparent 70%);
+        &::before{
+            content: '';
+            position: absolute;
+            top: 100%;
+            right: .5 * $unit;
+            width: 40%;
+            height: 200%;
+            background-image: linear-gradient(12deg, transparent 70%, lighten($blue-1, 5) 70%);
+        }
+    }
+    &__right{
+        background-image: linear-gradient(-12deg, $blue-3 70%, transparent 70%);
+        &::before{
+            content: '';
+            position: absolute;
+            top: 100%;
+            left: .5 * $unit;
+            width: 40%;
+            height: 200%;
+            background-image: linear-gradient(-12deg, transparent 70%, $blue-3 70%);
+        }
+    }
+    &__top{
+        background-image: linear-gradient(to bottom, $blue-1 60%, transparent 60%);
+
+        &::after{
+            content: '';
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 60%;
+            background-image: linear-gradient(to right, darken($blue-1, 1) , darken($blue-1, 10) );
+        }
+    }
+    &__bottom{ background-color: $blue-1;  }
+}
+
+.g{
+    $width-el: 9.5 * $unit;
+    $height-el: 5 * $unit;
+    $depth-el: .5 * $unit;
+
+    @include cube($width-el, $height-el, $depth-el);
+    width: $width-el;
+    height: $depth-el * 2;
+    position: absolute;
+    bottom: .5 * $unit;
+
+    &__front{
+        background-image: linear-gradient(to top, darken($blue-2, 5) 3.9 * $unit, transparent 3.9 * $unit);
+
+        &::before{
+            content: '';
+            position: absolute;
+            bottom: 1.75 * $unit;
+            height: .5 * $unit;
+            width: 100%;
+            background-color: $neon;
+            box-shadow:
+                inset 0 0 .15 * $unit $blue-5,
+                0 0 .15 * $unit $neon
+            ;
+        }
+
+    }
+    &__left{ background-image: linear-gradient(45deg, $blue-1 3.55 * $unit, transparent 3.55 * $unit); }
+    &__right{ background-image: linear-gradient(-45deg, $blue-3 3.55 * $unit, transparent 3.55 * $unit); }
+    &__top{
+        &::before{
+            content: '';
+            display: block;
+            height: 1.5 * $unit;
+            transform-origin: top left;
+            transform: rotateX(-46deg);
+            background-image: linear-gradient(to right, $blue-1, darken($blue-1, 3));
+        }
+
+    }
+    &__bottom{ background-color: $blue-4; }
+}
+.h{
+    $width-el: .425 * $unit;
+    $height-el: 1 * $unit;
+    $depth-el: 6.35 * $unit;
+
+    @include cube($width-el, $height-el, $depth-el);
+    width: $width-el;
+    height: $depth-el * 2;
+
+    position: absolute;
+    transform: translateX(-50%) translateZ(10.1 * $unit);
+    left: 50%;
+    bottom: 9 * $unit;
+
+    &__front{ background-color: $blue-2; }
+    &__back{ background-image: linear-gradient(to bottom, $blue-3, darken($blue-3, 5) 80%); }
+    &__left{ background-image: linear-gradient(to bottom, lighten($blue-1, 5), lighten($blue-1, 2) ); }
+    &__right{ background-image: linear-gradient(to bottom, $blue-3, darken($blue-3, 4)); }
+    &__top{
+        background-color: $neon;
+        box-shadow: 0 0 .5 * $unit lighten($neon, 5);
+    }
+    &__bottom{
+        background-color: $blue-3;
+
+        &::before{
+            content: '';
+            position: absolute;
+            right: 0%;
+            width: 2.25 * $unit;
+            height: 100%;
+
+            background-image: linear-gradient(to right, rgba($blue-2, .5) 10%, darken($blue-2, 10));
+            transform-origin: right bottom;
+            transform: skewY(-20deg);
+            filter: blur(.2 * $unit);
+        }
+    }
+}
+.i{
+    $width-el: 9 * $unit;
+    $height-el: 8  * $unit;
+    $depth-el: 2.85 * $unit;
+
+    @include cube($width-el, $height-el, $depth-el);
+    width: $width-el;
+    height: $depth-el * 2;
+    position: absolute;
+    bottom: 2 * $unit;
+    left: .25 * $unit;
+    transform:  translateZ(.6 * $unit);
+
+
+    &__left{
+        background-image: linear-gradient(to bottom, lighten($neon, 5), $neon);
+        box-shadow:inset 0 0 .5 * $unit lighten($neon, 5);
+    }
+    &__right{
+        background-image: linear-gradient(to top, darken($neon, 10), $neon);
+        box-shadow: inset 0 0 .5 * $unit darken($neon, 10);
+    }
+}
+.wing{
+    $width-el: 4 * $unit;
+    $height-el: .5 * $unit;
+    $depth-el: 2 * $unit;
+
+    @include cube($width-el, $height-el, $depth-el);
+    width: $width-el;
+    height: $depth-el * 2;
+
+    position: absolute;
+    top: 5 * $unit;
+
+    transform: translateZ(3 * $unit);
+
+    &:nth-of-type(1){
+        left: 100%;
+        .wing__front{
+            &::before{
+                content: '';
+                position: absolute;
+                left: 0;
+                width: 145%;
+                height: 100%;
+                transform-origin: bottom left;
+                transform: rotateY(45deg);
+                background-image: linear-gradient(to right, $blue-3, $blue-2);
+            }
+        }
+        .wing__back{ background-image: linear-gradient(to bottom, darken($blue-3, 2) 50%,darken($blue-3, 10)); }
+        .wing__left{ background-image: linear-gradient(to bottom, lighten($blue-1, 4), $blue-1 ); }
+        .wing__top{ background-image: linear-gradient(-45deg, transparent 50%, $blue-1 50%, darken($blue-2, 1) ); }
+        .wing__bottom{ background-image: linear-gradient(45deg, transparent 50%, $blue-4 50%); }
+
+    }
+    &:nth-of-type(2){
+        right: 100%;
+        .wing__front{
+
+            &::before{
+                content: '';
+                position: absolute;
+                right: 0;
+                width: 145%;
+                height: 100%;
+                transform-origin:  bottom right;
+                transform: rotateY(-45deg);
+                background-image: linear-gradient(to right, $blue-2, darken($blue-2, 5));
+            }
+        }
+        .wing__back{ background-image: linear-gradient(to bottom, darken($blue-3, 2) 50%,darken($blue-3, 10));}
+        // .wing__left{ background-image: linear-gradient(to bottom, lighten($blue-1, 4), $blue-1 ); }
+        .wing__right{ background-image: linear-gradient(to bottom, $blue-3, darken($blue-3, 4)); }
+        .wing__top{ background-image: linear-gradient(45deg, transparent 50%, lighten($blue-1, 3) 50%, $blue-1 ); }
+        .wing__bottom{ background-image: linear-gradient(-45deg, transparent 50%, $blue-4 50%); }
+    }
+}
+/*---------------------*/
+.turbo{
+    position: absolute;
+    width: 5.5 * $unit;
+    height: 5.5 * $unit;
+}
+.circle{
+    $sides: 36;
+    $degree: 360deg;
+    $width: 1 * $unit;
+
+    width: 5.5 * $unit;
+    height: 5.5 * $unit;
+    position: absolute;
+
+    &-a{
+        $base: 5.5 * $unit;
+        $pi: 3.5;
+
+        position: absolute;
+        width: $width;
+        height: $base;
+        transform: rotateY(90deg) translateX(-50%);
+
+        @include cylinder($base, $sides, $degree, $pi, $width, lighten($black-2, 4));
+        &__bottom{
+            border: .115 * $unit solid $neon;
+            background-image: radial-gradient(circle, transparent 50%, $black-3 50%);
+
+        }
+        &__top{
+            outline: .2 * $unit solid rgba($blue-3, .9);
+            box-shadow:  0 0 1 * $unit darken($neon, 10);
+        }
+    }
+    &-b{
+        $base: 4 * $unit;
+        $pi: 3.5;
+
+        position: absolute;
+        width: $width;
+        height: $base;
+        transform: rotateY(90deg) translateX(-50%);
+
+        @include cylinder($base, $sides, $degree, $pi, $width, darken($neon, 40));
+        &__bottom{
+            background-image: radial-gradient(circle, $neon 30%, darken($neon, 20));
+            box-shadow:
+                inset 0 0 1 * $unit .25 * $unit lighten($neon, 15),
+                0 0 1 * $unit .5 * $unit $blue-5
+            ;
+            transform: rotateY(90deg) translateZ( .45 * $unit );
+        }
+    }
+}
+.turbo-back{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-gap: .25 * $unit;
+    justify-items: center;
+    align-items: center;
+
+    width: 85%;
+    height: 85%;
+
+    &__item{
+        width: 2.5 * $unit;
+        height: 2.5 * $unit;
+
+        background-color: $neon;
+        border-radius: 50%;
+        box-shadow:
+            inset 0 0 .5 * $unit .125 * $unit rgba($black-1, .25),
+            0 0 .5 * $unit .25 * $unit rgba($blue-4, .125),
+            0 0 .5 * $unit darken($neon, 10)
+
+        ;
+    }
+}
diff --git a/3d-xylophone/README.markdown b/3d-xylophone/README.markdown
new file mode 100644
index 0000000..e8afb6b
--- /dev/null
+++ b/3d-xylophone/README.markdown
@@ -0,0 +1,5 @@
+# 3D Xylophone
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/creativeocean/pen/gOPZLoN](https://codepen.io/creativeocean/pen/gOPZLoN).
+
+
diff --git a/3d-xylophone/dist/index.html b/3d-xylophone/dist/index.html
new file mode 100644
index 0000000..7419b5a
--- /dev/null
+++ b/3d-xylophone/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 3D Xylophone</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="container"></div>
+<div id="soundBtn">
+  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAxBAMAAACIWfxVAAAAJFBMVEVHcEz///////////////////////////////////////////8Uel1nAAAAC3RSTlMA6g6/2IYjN1FroPA1XvYAAAFqSURBVHgBnZQ1WwNBEIYnnlwFLe5SoRVuFd7h3uE1XuMV7pRp4jZ/jtmTJbvP7SHx3HvzzewY2D1qr0H56IyrGeKbks1hUr5UZ/3QEE9EFCys4A4xJivprJFMXChGs4ZRxtzFWYCAKBosZsy6PIcFgqJpN4IpJprNVzQZVGKUVOiDKyJnfsRJgBG85oomC0wDPDLRM2zmiibboNs9GGcOU5aixc4wzUSXwWelLcxZDYshTA4DzPizra0dOdMD2WCHK8YKevMHMRKNkcM0M96FEZF5yE+I3hTttcz8GDV87eObzKCTtIopoA06oMzm8Jr4Mrhs2BlO6nF4sU9mzI/OPDZsg9icgjnZqf05xzmCy6rzBTAh5EWVT7s6eK06iPULCPUT674i1F3ul5TUL7D2bXfC+0zuT/8t78++vEmR+/rEdh4S4jwIc5QW58h5/qBaPbeO8w6BIVDuCXCr94u4l/6zz5z2oM/YA18bg3c4+hgWFQAAAABJRU5ErkJggg==" width="32">
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/3d-xylophone/dist/script.js b/3d-xylophone/dist/script.js
new file mode 100644
index 0000000..a4434ab
--- /dev/null
+++ b/3d-xylophone/dist/script.js
@@ -0,0 +1,68 @@
+let muted = true,
+    n = 8;
+
+gsap.timeline()
+    .set('#container', {perspective:800})
+    .set('#soundBtn', {width:16, height:32, left:'50%', top:'100%', x:-8, y:-40, cursor:'pointer', opacity:0.5});
+
+
+for (let i=0; i<n; i++){ 
+  
+  let b = document.createElement('div'),
+      a = new Audio('https://assets.codepen.io/721952/chime'+(n-i)+'.mp3');
+  
+  b.classList.add('box');
+  document.getElementById('container').appendChild(b);
+  b.appendChild(a);
+
+  gsap.set(b, {
+    left:'50%',
+  	top:'50%',
+    x:-100,
+    y:-300,
+    z:600,
+  	width:200,
+	  height:600,
+    borderRadius:20,
+    background:()=>'hsl('+(i/n*200)+',100%,50%)'
+  });
+  
+  gsap.fromTo(b, {
+    scaleY:0,
+    opacity:0,
+    zIndex:-i,
+    rotationY:90+i/n*205,
+    transformOrigin:String("50% 50% -900%")
+  },{
+    scaleY:1,
+    opacity:0.7,
+    duration:1,
+    delay:1-0.5*(i/n),
+    ease:'elastic'
+  })
+  
+  b.onmouseenter = (e)=>{
+    if (!muted){
+      a.currentTime=0;
+      a.volume=0.15;
+      a.play();
+    }
+    gsap.to(b, {duration:0.3, opacity:1, scaleY:1.2, ease:'back.out(5)'});
+  }
+  
+  b.onmouseleave = (e)=>{
+    gsap.to(b, {duration:0.4, opacity:0.7, scaleY:1});
+  }
+}
+
+window.onmousemove = (e)=>{
+  gsap.to('.box', {duration:0.6, rotationY:(i)=>45+i/n*205+90*(e.clientX/window.innerWidth) });
+}
+
+
+document.getElementById('soundBtn').onclick = (e)=>{
+  gsap.timeline()
+      .to('#soundBtn', {width:()=>(muted)?16:32, duration:0.15, ease:'power3.in'}, 0)
+      .to('#soundBtn', {x:()=>(muted)?-8:-16, duration:0.3, ease:'back.out(2)'}, 0)
+  muted=!muted;
+}
\ No newline at end of file
diff --git a/3d-xylophone/dist/style.css b/3d-xylophone/dist/style.css
new file mode 100644
index 0000000..e6b2948
--- /dev/null
+++ b/3d-xylophone/dist/style.css
@@ -0,0 +1,12 @@
+body, html, #container {
+  width: 100%;
+  height: 100%;
+  overflow:hidden;
+  background:#000;
+}
+
+div, img {
+  position:absolute;
+  user-select: none;
+  overflow:hidden;  
+}
\ No newline at end of file
diff --git a/3d-xylophone/license.txt b/3d-xylophone/license.txt
new file mode 100644
index 0000000..bd8be23
--- /dev/null
+++ b/3d-xylophone/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Tom Miller (https://codepen.io/creativeocean/pen/gOPZLoN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/3d-xylophone/src/index.html b/3d-xylophone/src/index.html
new file mode 100644
index 0000000..2255ec8
--- /dev/null
+++ b/3d-xylophone/src/index.html
@@ -0,0 +1,4 @@
+<div id="container"></div>
+<div id="soundBtn">
+  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAxBAMAAACIWfxVAAAAJFBMVEVHcEz///////////////////////////////////////////8Uel1nAAAAC3RSTlMA6g6/2IYjN1FroPA1XvYAAAFqSURBVHgBnZQ1WwNBEIYnnlwFLe5SoRVuFd7h3uE1XuMV7pRp4jZ/jtmTJbvP7SHx3HvzzewY2D1qr0H56IyrGeKbks1hUr5UZ/3QEE9EFCys4A4xJivprJFMXChGs4ZRxtzFWYCAKBosZsy6PIcFgqJpN4IpJprNVzQZVGKUVOiDKyJnfsRJgBG85oomC0wDPDLRM2zmiibboNs9GGcOU5aixc4wzUSXwWelLcxZDYshTA4DzPizra0dOdMD2WCHK8YKevMHMRKNkcM0M96FEZF5yE+I3hTttcz8GDV87eObzKCTtIopoA06oMzm8Jr4Mrhs2BlO6nF4sU9mzI/OPDZsg9icgjnZqf05xzmCy6rzBTAh5EWVT7s6eK06iPULCPUT674i1F3ul5TUL7D2bXfC+0zuT/8t78++vEmR+/rEdh4S4jwIc5QW58h5/qBaPbeO8w6BIVDuCXCr94u4l/6zz5z2oM/YA18bg3c4+hgWFQAAAABJRU5ErkJggg==" width="32">
+</div>
\ No newline at end of file
diff --git a/3d-xylophone/src/script.js b/3d-xylophone/src/script.js
new file mode 100644
index 0000000..a4434ab
--- /dev/null
+++ b/3d-xylophone/src/script.js
@@ -0,0 +1,68 @@
+let muted = true,
+    n = 8;
+
+gsap.timeline()
+    .set('#container', {perspective:800})
+    .set('#soundBtn', {width:16, height:32, left:'50%', top:'100%', x:-8, y:-40, cursor:'pointer', opacity:0.5});
+
+
+for (let i=0; i<n; i++){ 
+  
+  let b = document.createElement('div'),
+      a = new Audio('https://assets.codepen.io/721952/chime'+(n-i)+'.mp3');
+  
+  b.classList.add('box');
+  document.getElementById('container').appendChild(b);
+  b.appendChild(a);
+
+  gsap.set(b, {
+    left:'50%',
+  	top:'50%',
+    x:-100,
+    y:-300,
+    z:600,
+  	width:200,
+	  height:600,
+    borderRadius:20,
+    background:()=>'hsl('+(i/n*200)+',100%,50%)'
+  });
+  
+  gsap.fromTo(b, {
+    scaleY:0,
+    opacity:0,
+    zIndex:-i,
+    rotationY:90+i/n*205,
+    transformOrigin:String("50% 50% -900%")
+  },{
+    scaleY:1,
+    opacity:0.7,
+    duration:1,
+    delay:1-0.5*(i/n),
+    ease:'elastic'
+  })
+  
+  b.onmouseenter = (e)=>{
+    if (!muted){
+      a.currentTime=0;
+      a.volume=0.15;
+      a.play();
+    }
+    gsap.to(b, {duration:0.3, opacity:1, scaleY:1.2, ease:'back.out(5)'});
+  }
+  
+  b.onmouseleave = (e)=>{
+    gsap.to(b, {duration:0.4, opacity:0.7, scaleY:1});
+  }
+}
+
+window.onmousemove = (e)=>{
+  gsap.to('.box', {duration:0.6, rotationY:(i)=>45+i/n*205+90*(e.clientX/window.innerWidth) });
+}
+
+
+document.getElementById('soundBtn').onclick = (e)=>{
+  gsap.timeline()
+      .to('#soundBtn', {width:()=>(muted)?16:32, duration:0.15, ease:'power3.in'}, 0)
+      .to('#soundBtn', {x:()=>(muted)?-8:-16, duration:0.3, ease:'back.out(2)'}, 0)
+  muted=!muted;
+}
\ No newline at end of file
diff --git a/3d-xylophone/src/style.css b/3d-xylophone/src/style.css
new file mode 100644
index 0000000..e6b2948
--- /dev/null
+++ b/3d-xylophone/src/style.css
@@ -0,0 +1,12 @@
+body, html, #container {
+  width: 100%;
+  height: 100%;
+  overflow:hidden;
+  background:#000;
+}
+
+div, img {
+  position:absolute;
+  user-select: none;
+  overflow:hidden;  
+}
\ No newline at end of file
diff --git a/4-big-cubes-animation-with-svg-use-and-css-variables/README.markdown b/4-big-cubes-animation-with-svg-use-and-css-variables/README.markdown
new file mode 100644
index 0000000..0bec8d9
--- /dev/null
+++ b/4-big-cubes-animation-with-svg-use-and-css-variables/README.markdown
@@ -0,0 +1,5 @@
+# 4. Big cubes animation with SVG <use> and CSS variables
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/marianab/pen/KKKYdxE](https://codepen.io/marianab/pen/KKKYdxE).
+
+SVG cube reusing content with SVG <use>, animation and CSS variables
diff --git a/4-big-cubes-animation-with-svg-use-and-css-variables/dist/index.html b/4-big-cubes-animation-with-svg-use-and-css-variables/dist/index.html
new file mode 100644
index 0000000..8988ead
--- /dev/null
+++ b/4-big-cubes-animation-with-svg-use-and-css-variables/dist/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 4. Big cubes animation with SVG &lt;use&gt; and CSS variables</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg class="pink-cube" viewBox="0 0 300 230" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+  <g id="cube" class="cube-unit">
+    <rect width="21" height="24" fill="var(--lightColor)" stroke="var(--strokeColor)" transform="skewY(30)"/>
+    <rect width="21" height="24" fill="var(--darkColor)" stroke="var(--strokeColor)" transform="skewY(-30) translate(21 24.3)"/>
+    <rect width="21" height="21" fill="var(--mainColor)" stroke="var(--strokeColor)" transform="scale(1.41,.81) rotate(45) translate(0 -21)"/>
+  </g>
+  </defs>
+  <line opacity=".5" x1="80" x2="100" y1="150" y2="150" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
+   <line opacity=".5" x1="186" x2="204" y1="90" y2="90" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
+   <line opacity=".5" x1="115" x2="115" y1="75" y2="85" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
+    <use xlink:href="#cube" x="121" y="112"/>
+    <use xlink:href="#cube" x="100" y="124"/>
+    <use xlink:href="#cube" x="142" y="124"/>
+    <use xlink:href="#cube" x="121" y="136"/>
+    <use class="m-left" xlink:href="#cube" x="79" y="136"/>
+    <use xlink:href="#cube" x="163" y="136"/>
+    <use xlink:href="#cube" x="142" y="148"/>
+    <use xlink:href="#cube" x="100" y="148"/>
+    <use xlink:href="#cube" x="121" y="160"/>
+    <use xlink:href="#cube" x="121" y="88"/>
+    <use xlink:href="#cube" x="100" y="100"/>
+    <use xlink:href="#cube" x="142" y="100"/>
+    <use xlink:href="#cube" x="121" y="112"/>
+    <use xlink:href="#cube" x="79" y="112"/>
+    <use xlink:href="#cube" x="163" y="112"/>
+    <line opacity=".5" x1="165" x2="185" y1="155" y2="155" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
+    <use class="m-right" xlink:href="#cube" x="142" y="124"/>
+    <use xlink:href="#cube" x="100" y="124"/>
+    <use xlink:href="#cube" x="121" y="136"/>
+    <use xlink:href="#cube" x="121" y="64"/>
+    <use class="m-up" xlink:href="#cube" x="100" y="76"/>
+    <use xlink:href="#cube" x="142" y="76"/>
+    <use xlink:href="#cube" x="121" y="88"/>
+    <use xlink:href="#cube" x="79" y="88"/>
+    <use class="m-right" xlink:href="#cube" x="163" y="88"/>
+    <use xlink:href="#cube" x="142" y="100"/>
+    <use xlink:href="#cube" x="100" y="100"/>
+    <use xlink:href="#cube" x="121" y="112"/>
+  </svg>
+  <p>hover over me</p>
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="blue-cube" viewBox="0 -40 300 200">
+    <line opacity=".5" x1="96" x2="110" y1="45" y2="45" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
+    <line opacity=".5" x1="190" x2="205" y1="45" y2="45" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
+    <use xlink:href="#cube" x="121" y="48"/>
+    <use xlink:href="#cube" x="121" y="24"/>
+    <use xlink:href="#cube" x="121" y="0"/>
+    <use xlink:href="#cube" x="100" y="60"/>
+    <use class="m-left" xlink:href="#cube" x="100" y="36"/>
+    <use class="m-left" xlink:href="#cube" x="100" y="12"/>
+    <use xlink:href="#cube" x="142" y="60"/>
+    <use xlink:href="#cube" x="142" y="36"/>
+    <use xlink:href="#cube" x="142" y="12"/>
+    <g class="m-right">
+      <use xlink:href="#cube" x="163" y="72"/>
+      <use xlink:href="#cube" x="163" y="48"/>
+      <use xlink:href="#cube" x="163" y="24"/>
+    </g>
+    <g class="m-left">
+      <use xlink:href="#cube" x="79" y="72"/>
+      <use xlink:href="#cube" x="79" y="48"/>
+      <use xlink:href="#cube" x="79" y="24"/>
+    </g>
+    <use xlink:href="#cube" x="121" y="72"/>
+    <use xlink:href="#cube" x="121" y="48"/>
+    <use xlink:href="#cube" x="121" y="24"/>
+    <use xlink:href="#cube" x="100" y="84"/>
+    <g class="m-left">
+      <use xlink:href="#cube" x="100" y="60"/>
+      <use xlink:href="#cube" x="100" y="36"/>
+    </g>
+    <use xlink:href="#cube" x="142" y="84"/>
+    <use xlink:href="#cube" x="142" y="60"/>
+    <use xlink:href="#cube" x="142" y="36"/>
+    <use xlink:href="#cube" x="121" y="96"/>
+    <use xlink:href="#cube" x="121" y="72"/>
+    <use xlink:href="#cube" x="121" y="48"/>
+  </svg>
+  <p>hover over me</p>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/4-big-cubes-animation-with-svg-use-and-css-variables/dist/style.css b/4-big-cubes-animation-with-svg-use-and-css-variables/dist/style.css
new file mode 100644
index 0000000..0c59c4d
--- /dev/null
+++ b/4-big-cubes-animation-with-svg-use-and-css-variables/dist/style.css
@@ -0,0 +1,54 @@
+body {
+  font-family: "Roboto", sans-serif;
+  margin: 0 auto;
+  max-width: 500px;
+}
+
+.cube-unit {
+  fill-opacity: 0.9;
+  stroke-miterlimit: 0;
+}
+
+.blue-cube {
+  --mainColor: #009CDE;
+  --strokeColor: #0079ad;
+  --lightColor: #00affa;
+  --darkColor: #008bc7;
+}
+
+.pink-cube {
+  --mainColor: #de0063;
+  --strokeColor: #ad004e;
+  --lightColor: #fa0070;
+  --darkColor: #c7005a;
+}
+
+@keyframes moveX {
+  to {
+    transform: translateX(var(--translate, 35px));
+  }
+}
+@keyframes moveY {
+  to {
+    transform: translateY(var(--translate, -35px));
+  }
+}
+.m-left, .m-right {
+  animation: 2s moveX alternate infinite paused;
+}
+
+.m-up, .m-down {
+  animation: 2s moveY alternate infinite paused;
+}
+
+.m-left {
+  --translate: -50px;
+}
+
+.m-right {
+  --translate: 50px;
+}
+
+svg:hover * {
+  animation-play-state: running;
+}
\ No newline at end of file
diff --git a/4-big-cubes-animation-with-svg-use-and-css-variables/license.txt b/4-big-cubes-animation-with-svg-use-and-css-variables/license.txt
new file mode 100644
index 0000000..646a056
--- /dev/null
+++ b/4-big-cubes-animation-with-svg-use-and-css-variables/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Mariana (https://codepen.io/marianab/pen/KKKYdxE)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/4-big-cubes-animation-with-svg-use-and-css-variables/src/index.html b/4-big-cubes-animation-with-svg-use-and-css-variables/src/index.html
new file mode 100644
index 0000000..659df0c
--- /dev/null
+++ b/4-big-cubes-animation-with-svg-use-and-css-variables/src/index.html
@@ -0,0 +1,80 @@
+<svg class="pink-cube" viewBox="0 0 300 230" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+  <g id="cube" class="cube-unit">
+    <rect width="21" height="24" fill="var(--lightColor)" stroke="var(--strokeColor)" transform="skewY(30)"/>
+    <rect width="21" height="24" fill="var(--darkColor)" stroke="var(--strokeColor)" transform="skewY(-30) translate(21 24.3)"/>
+    <rect width="21" height="21" fill="var(--mainColor)" stroke="var(--strokeColor)" transform="scale(1.41,.81) rotate(45) translate(0 -21)"/>
+  </g>
+  </defs>
+  <line opacity=".5" x1="80" x2="100" y1="150" y2="150" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
+   <line opacity=".5" x1="186" x2="204" y1="90" y2="90" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
+   <line opacity=".5" x1="115" x2="115" y1="75" y2="85" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
+    <use xlink:href="#cube" x="121" y="112"/>
+    <use xlink:href="#cube" x="100" y="124"/>
+    <use xlink:href="#cube" x="142" y="124"/>
+    <use xlink:href="#cube" x="121" y="136"/>
+    <use class="m-left" xlink:href="#cube" x="79" y="136"/>
+    <use xlink:href="#cube" x="163" y="136"/>
+    <use xlink:href="#cube" x="142" y="148"/>
+    <use xlink:href="#cube" x="100" y="148"/>
+    <use xlink:href="#cube" x="121" y="160"/>
+    <use xlink:href="#cube" x="121" y="88"/>
+    <use xlink:href="#cube" x="100" y="100"/>
+    <use xlink:href="#cube" x="142" y="100"/>
+    <use xlink:href="#cube" x="121" y="112"/>
+    <use xlink:href="#cube" x="79" y="112"/>
+    <use xlink:href="#cube" x="163" y="112"/>
+    <line opacity=".5" x1="165" x2="185" y1="155" y2="155" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
+    <use class="m-right" xlink:href="#cube" x="142" y="124"/>
+    <use xlink:href="#cube" x="100" y="124"/>
+    <use xlink:href="#cube" x="121" y="136"/>
+    <use xlink:href="#cube" x="121" y="64"/>
+    <use class="m-up" xlink:href="#cube" x="100" y="76"/>
+    <use xlink:href="#cube" x="142" y="76"/>
+    <use xlink:href="#cube" x="121" y="88"/>
+    <use xlink:href="#cube" x="79" y="88"/>
+    <use class="m-right" xlink:href="#cube" x="163" y="88"/>
+    <use xlink:href="#cube" x="142" y="100"/>
+    <use xlink:href="#cube" x="100" y="100"/>
+    <use xlink:href="#cube" x="121" y="112"/>
+  </svg>
+  <p>hover over me</p>
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="blue-cube" viewBox="0 -40 300 200">
+    <line opacity=".5" x1="96" x2="110" y1="45" y2="45" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
+    <line opacity=".5" x1="190" x2="205" y1="45" y2="45" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
+    <use xlink:href="#cube" x="121" y="48"/>
+    <use xlink:href="#cube" x="121" y="24"/>
+    <use xlink:href="#cube" x="121" y="0"/>
+    <use xlink:href="#cube" x="100" y="60"/>
+    <use class="m-left" xlink:href="#cube" x="100" y="36"/>
+    <use class="m-left" xlink:href="#cube" x="100" y="12"/>
+    <use xlink:href="#cube" x="142" y="60"/>
+    <use xlink:href="#cube" x="142" y="36"/>
+    <use xlink:href="#cube" x="142" y="12"/>
+    <g class="m-right">
+      <use xlink:href="#cube" x="163" y="72"/>
+      <use xlink:href="#cube" x="163" y="48"/>
+      <use xlink:href="#cube" x="163" y="24"/>
+    </g>
+    <g class="m-left">
+      <use xlink:href="#cube" x="79" y="72"/>
+      <use xlink:href="#cube" x="79" y="48"/>
+      <use xlink:href="#cube" x="79" y="24"/>
+    </g>
+    <use xlink:href="#cube" x="121" y="72"/>
+    <use xlink:href="#cube" x="121" y="48"/>
+    <use xlink:href="#cube" x="121" y="24"/>
+    <use xlink:href="#cube" x="100" y="84"/>
+    <g class="m-left">
+      <use xlink:href="#cube" x="100" y="60"/>
+      <use xlink:href="#cube" x="100" y="36"/>
+    </g>
+    <use xlink:href="#cube" x="142" y="84"/>
+    <use xlink:href="#cube" x="142" y="60"/>
+    <use xlink:href="#cube" x="142" y="36"/>
+    <use xlink:href="#cube" x="121" y="96"/>
+    <use xlink:href="#cube" x="121" y="72"/>
+    <use xlink:href="#cube" x="121" y="48"/>
+  </svg>
+  <p>hover over me</p>
\ No newline at end of file
diff --git a/4-big-cubes-animation-with-svg-use-and-css-variables/src/style.scss b/4-big-cubes-animation-with-svg-use-and-css-variables/src/style.scss
new file mode 100644
index 0000000..b0fa748
--- /dev/null
+++ b/4-big-cubes-animation-with-svg-use-and-css-variables/src/style.scss
@@ -0,0 +1,36 @@
+body { font-family: 'Roboto', sans-serif; margin: 0 auto; max-width: 500px; }
+
+.cube-unit {
+  fill-opacity: .9;
+  stroke-miterlimit:0;
+}
+.blue-cube {
+  --mainColor: #009CDE;
+  --strokeColor: #0079ad;
+  --lightColor: #00affa;
+  --darkColor: #008bc7;
+}
+.pink-cube {
+  --mainColor: #de0063;
+  --strokeColor: #ad004e;
+  --lightColor: #fa0070;
+  --darkColor: #c7005a;
+}
+
+@keyframes moveX {
+  to { transform: translateX(var(--translate, 35px)); }
+}
+@keyframes moveY {
+  to { transform: translateY(var(--translate, -35px)); }
+}
+
+.m-left, .m-right { 
+  animation: 2s moveX alternate infinite paused; 
+}
+.m-up, .m-down { 
+  animation: 2s moveY alternate infinite paused; 
+}
+.m-left { --translate: -50px; }
+.m-right { --translate: 50px; }
+
+svg:hover * { animation-play-state: running; }
\ No newline at end of file
diff --git a/60-gradient-morphing-blob/README.markdown b/60-gradient-morphing-blob/README.markdown
new file mode 100644
index 0000000..823356a
--- /dev/null
+++ b/60-gradient-morphing-blob/README.markdown
@@ -0,0 +1,5 @@
+# 60° Gradient Morphing Blob
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/georgedoescode/pen/oNzamjV](https://codepen.io/georgedoescode/pen/oNzamjV).
+
+I made this colorful blob after being inspired by Adam Argyle's https://twitter.com/argyleink/status/1199043350008958976 60 degree gradient trick. The shape is made using Catmull-Rom splines, the movement and color modulation is all based on Simplex noise ✨
diff --git a/60-gradient-morphing-blob/dist/index.html b/60-gradient-morphing-blob/dist/index.html
new file mode 100644
index 0000000..739d2fa
--- /dev/null
+++ b/60-gradient-morphing-blob/dist/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 60° Gradient Morphing Blob</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg viewBox="0 0 200 200">
+  <defs>
+    <linearGradient id="gradient" gradientTransform="rotate(90)">
+      <stop id="gradientStop1" offset="0%" stop-color="var(--startColor)" />
+      <stop id="gradientStop2 " offset="100%" stop-color="var(--stopColor)" />
+    </linearGradient>
+  </defs>
+  <path d="" fill="url('#gradient')"></path>
+</svg>
+<p>Hover!</p>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/60-gradient-morphing-blob/dist/script.js b/60-gradient-morphing-blob/dist/script.js
new file mode 100644
index 0000000..95e87a1
--- /dev/null
+++ b/60-gradient-morphing-blob/dist/script.js
@@ -0,0 +1,89 @@
+import gsap from "https://cdn.skypack.dev/gsap@3.6.0";
+import { spline } from "https://cdn.skypack.dev/@georgedoescode/spline@1.0.1";
+import SimplexNoise from "https://cdn.skypack.dev/simplex-noise@2.4.0";
+
+const simplex = new SimplexNoise();
+
+const path = document.querySelector("path");
+const root = document.documentElement;
+
+let hueNoiseOffset = 0;
+
+let noiseStep = 0.005;
+
+const points = createPoints();
+
+(function animate() {
+  path.setAttribute("d", spline(points, 1, true));
+
+  for (let i = 0; i < points.length; i++) {
+    const point = points[i];
+
+    const nX = noise(point.noiseOffsetX, point.noiseOffsetX);
+    const nY = noise(point.noiseOffsetY, point.noiseOffsetX);
+    const x = map(nX, -1, 1, point.originX - 20, point.originX + 20);
+    const y = map(nY, -1, 1, point.originY - 20, point.originY + 20);
+
+    point.x = x;
+    point.y = y;
+
+    point.noiseOffsetX += noiseStep;
+    point.noiseOffsetY += noiseStep;
+  }
+
+  const hueNoise = noise(hueNoiseOffset, hueNoiseOffset);
+  const hue = map(hueNoise, -1, 1, 0, 360);
+
+  root.style.setProperty("--startColor", `hsl(${hue}, 100%, 75%)`);
+  root.style.setProperty("--startColor", `hsl(${hue + 60}, 100%, 75%)`);
+  document.body.style.background = `hsl(${hue + 60}, 75%, 5%)`;
+
+  hueNoiseOffset += noiseStep / 6;
+
+  requestAnimationFrame(animate);
+})();
+
+function random(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+function map(n, start1, end1, start2, end2) {
+  return ((n - start1) / (end1 - start1)) * (end2 - start2) + start2;
+}
+
+function noise(x, y) {
+  return simplex.noise2D(x, y);
+}
+
+function createPoints() {
+  const points = [];
+  const numPoints = 6;
+  const angleStep = (Math.PI * 2) / numPoints;
+  const rad = 75;
+
+  for (let i = 1; i <= numPoints; i++) {
+    const theta = i * angleStep;
+
+    const x = 100 + Math.cos(theta) * rad;
+    const y = 100 + Math.sin(theta) * rad;
+
+    points.push({
+      x: x,
+      y: y,
+      originX: x,
+      originY: y,
+      noiseOffsetX: random(0, 1000),
+      noiseOffsetY: random(0, 1000)
+    });
+  }
+
+  return points;
+}
+
+document.querySelector("path").addEventListener("mouseover", () => {
+  noiseStep = 0.01;
+});
+
+document.querySelector("path").addEventListener("mouseleave", () => {
+  noiseStep = 0.005;
+});
\ No newline at end of file
diff --git a/60-gradient-morphing-blob/dist/style.css b/60-gradient-morphing-blob/dist/style.css
new file mode 100644
index 0000000..b7c2565
--- /dev/null
+++ b/60-gradient-morphing-blob/dist/style.css
@@ -0,0 +1,37 @@
+:root {
+  --startColor: hsl(0, 100%, 75%);
+  --stopColor: hsl(0, 100%, 75%);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  display: grid;
+  place-items: center;
+}
+
+svg {
+  width: 90vmin;
+  height: 90vmin;
+}
+
+path {
+  cursor: pointer;
+}
+
+p {
+  position: absolute;
+  font-size: 1.125rem;
+  font-weight: 500;
+  bottom: 1rem;
+  right: 1rem;
+  color: #fff;
+  font-family: system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
\ No newline at end of file
diff --git a/60-gradient-morphing-blob/license.txt b/60-gradient-morphing-blob/license.txt
new file mode 100644
index 0000000..d8d9984
--- /dev/null
+++ b/60-gradient-morphing-blob/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by George Francis (https://codepen.io/georgedoescode/pen/oNzamjV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/60-gradient-morphing-blob/src/index.html b/60-gradient-morphing-blob/src/index.html
new file mode 100644
index 0000000..eb1da29
--- /dev/null
+++ b/60-gradient-morphing-blob/src/index.html
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 200 200">
+  <defs>
+    <linearGradient id="gradient" gradientTransform="rotate(90)">
+      <stop id="gradientStop1" offset="0%" stop-color="var(--startColor)" />
+      <stop id="gradientStop2 " offset="100%" stop-color="var(--stopColor)" />
+    </linearGradient>
+  </defs>
+  <path d="" fill="url('#gradient')"></path>
+</svg>
+<p>Hover!</p>
\ No newline at end of file
diff --git a/60-gradient-morphing-blob/src/script.js b/60-gradient-morphing-blob/src/script.js
new file mode 100644
index 0000000..85d2a10
--- /dev/null
+++ b/60-gradient-morphing-blob/src/script.js
@@ -0,0 +1,89 @@
+import gsap from "https://cdn.skypack.dev/gsap@3.6.0";
+import { spline } from "https://cdn.skypack.dev/@georgedoescode/spline@1.0.1";
+import SimplexNoise from "https://cdn.skypack.dev/simplex-noise@2.4.0";
+
+const simplex = new SimplexNoise();
+
+const path = document.querySelector("path");
+const root = document.documentElement;
+
+let hueNoiseOffset = 0;
+
+let noiseStep = 0.005;
+
+const points = createPoints();
+
+(function animate() {
+  path.setAttribute("d", spline(points, 1, true));
+
+  for (let i = 0; i < points.length; i++) {
+    const point = points[i];
+
+    const nX = noise(point.noiseOffsetX, point.noiseOffsetX);
+    const nY = noise(point.noiseOffsetY, point.noiseOffsetX);
+    const x = map(nX, -1, 1, point.originX - 20, point.originX + 20);
+    const y = map(nY, -1, 1, point.originY - 20, point.originY + 20);
+
+    point.x = x;
+    point.y = y;
+
+    point.noiseOffsetX += noiseStep;
+    point.noiseOffsetY += noiseStep;
+  }
+
+  const hueNoise = noise(hueNoiseOffset, hueNoiseOffset);
+  const hue = map(hueNoise, -1, 1, 0, 360);
+
+  root.style.setProperty("--startColor", `hsl(${hue}, 100%, 75%)`);
+  root.style.setProperty("--startColor", `hsl(${hue + 60}, 100%, 75%)`);
+  document.body.style.background = `hsl(${hue + 60}, 75%, 5%)`;
+
+  hueNoiseOffset += noiseStep / 6;
+
+  requestAnimationFrame(animate);
+})();
+
+function random(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+function map(n, start1, end1, start2, end2) {
+  return ((n - start1) / (end1 - start1)) * (end2 - start2) + start2;
+}
+
+function noise(x, y) {
+  return simplex.noise2D(x, y);
+}
+
+function createPoints() {
+  const points = [];
+  const numPoints = 6;
+  const angleStep = (Math.PI * 2) / numPoints;
+  const rad = 75;
+
+  for (let i = 1; i <= numPoints; i++) {
+    const theta = i * angleStep;
+
+    const x = 100 + Math.cos(theta) * rad;
+    const y = 100 + Math.sin(theta) * rad;
+
+    points.push({
+      x: x,
+      y: y,
+      originX: x,
+      originY: y,
+      noiseOffsetX: random(0, 1000),
+      noiseOffsetY: random(0, 1000)
+    });
+  }
+
+  return points;
+}
+
+document.querySelector("path").addEventListener("mouseover", () => {
+  noiseStep = 0.01;
+});
+
+document.querySelector("path").addEventListener("mouseleave", () => {
+  noiseStep = 0.005;
+});
diff --git a/60-gradient-morphing-blob/src/style.css b/60-gradient-morphing-blob/src/style.css
new file mode 100644
index 0000000..0dff82f
--- /dev/null
+++ b/60-gradient-morphing-blob/src/style.css
@@ -0,0 +1,37 @@
+:root {
+  --startColor: hsl(0, 100%, 75%);
+  --stopColor: hsl(0, 100%, 75%);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  display: grid;
+  place-items: center;
+}
+
+svg {
+  width: 90vmin;
+  height: 90vmin;
+}
+
+path {
+  cursor: pointer;
+}
+
+p {
+  position: absolute;
+  font-size: 1.125rem;
+  font-weight: 500;
+  bottom: 1rem;
+  right: 1rem;
+  color: #fff;
+  font-family: system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/README.markdown b/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/README.markdown
new file mode 100644
index 0000000..4bcda12
--- /dev/null
+++ b/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/README.markdown
@@ -0,0 +1,4 @@
+# 80's / 90's Movie UI's recreated in CSS #1 - Demolition Man 1993
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jcoulterdesign/pen/qYJWyq](https://codepen.io/jcoulterdesign/pen/qYJWyq).
+
+ Today 80's / 90's movie recreated UI piece in CSS is taken from Demolition Man 1993. During the scene where they use a computer to find Simon around the 20 minute mark.
\ No newline at end of file
diff --git a/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/dist/index.html b/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/dist/index.html
new file mode 100644
index 0000000..d84e166
--- /dev/null
+++ b/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/dist/index.html
@@ -0,0 +1,369 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>80's / 90's Movie UI's recreated in CSS #1 - Demolition Man 1993</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class='scanlines'></div>
+<div class='ui'>
+  <input id='item-1' name='item' type='checkbox'>
+  <input id='item-2' name='item' type='checkbox'>
+  <input id='item-3' name='item' type='checkbox'>
+  <input id='item-4' name='item' type='checkbox'>
+  <input id='item-5' name='item' type='checkbox'>
+  <input id='item-6' name='item' type='checkbox'>
+  <div class='intro_wrap'>
+    <div class='intro'>
+      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/demolition-man.png'>
+      <h1>80's / 90's Inspired UI's in CSS</h1>
+      <h2>Demolition Man 1993</h2>
+      <img class='gif' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/demogif.gif'>
+      <p>A recreation of the Demolition Man 3D Hexagon Foldout menu in CSS only. Nice and cheesy. Not an exact replica for sure, perspectives are off slightly, but still looks good!</p>
+    </div>
+  </div>
+  <div class='ui_inner'>
+    <div class='ui_inner__item'>
+      <label for='item-1'>
+        <span>back</span>
+      </label>
+      <h2>publicinform</h2>
+      <div class='item_top'></div>
+      <div class='item_bottom'></div>
+      <div class='item-1 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>publicinform</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-2 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>traffic control</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-3 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>cryoprison</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-4 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>administration</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-5 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>morality div</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-6 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>metro patrol</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class='ui_inner__item'>
+      <label for='item-2'>
+        <span>back</span>
+      </label>
+      <h2>traffic control</h2>
+      <div class='item_top'></div>
+      <div class='item_bottom'></div>
+      <div class='item-1 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>publicinform</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-2 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>traffic control</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-3 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>cryoprison</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-4 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>administration</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-5 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>morality div</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-6 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>metro patrol</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class='ui_inner__item'>
+      <label for='item-3'>
+        <span>back</span>
+      </label>
+      <h2>cryoprison</h2>
+      <div class='item_top'></div>
+      <div class='item_bottom'></div>
+      <div class='item-1 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>publicinform</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-2 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>traffic control</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-3 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>cryoprison</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-4 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>administration</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-5 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>morality div</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-6 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>metro patrol</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class='ui_inner__item'>
+      <label for='item-4'>
+        <span>back</span>
+      </label>
+      <h2>administration</h2>
+      <div class='item_top'></div>
+      <div class='item_bottom'></div>
+      <div class='item-1 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>publicinform</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-2 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>traffic control</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-3 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>cryoprison</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-4 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>administration</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-5 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>morality div</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-6 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>metro patrol</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class='ui_inner__item'>
+      <label for='item-5'>
+        <span>back</span>
+      </label>
+      <h2>morality div</h2>
+      <div class='item_top'></div>
+      <div class='item_bottom'></div>
+      <div class='item-1 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>publicinform</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-2 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>traffic control</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-3 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>cryoprison</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-4 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>administration</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-5 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>morality div</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-6 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>metro patrol</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class='ui_inner__item'>
+      <label for='item-6'>
+        <span>back</span>
+      </label>
+      <h2>metro patrol</h2>
+      <div class='item_top'></div>
+      <div class='item_bottom'></div>
+      <div class='item-1 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>publicinform</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-2 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>traffic control</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-3 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>cryoprison</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-4 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>administration</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-5 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>morality div</h3>
+          </div>
+        </div>
+      </div>
+      <div class='item-6 item_wrap'>
+        <div class='item_active'>
+          <div class='item_active__part'>
+            <div class='nodes'></div>
+            <h3>metro patrol</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/dist/style.css b/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/dist/style.css
new file mode 100644
index 0000000..be7fee7
--- /dev/null
+++ b/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/dist/style.css
@@ -0,0 +1,2212 @@
+@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
+@font-face {
+  font-family: 'Superguns';
+  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/Superguns.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/Superguns.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+body .ui_inner, body .ui_inner__item, body .ui_inner__item h2 {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  margin: auto;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+body .scanlines, body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui_inner__item h2, body .ui_inner__item .item_active__part, body .ui_inner__item .item_active__part h3 {
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+body .ui_inner__item::after, body .ui_inner__item::before {
+  width: 400px;
+  height: 40px;
+  background: #032035;
+  position: absolute;
+  top: 0;
+  display: block;
+  content: '';
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+  transition: all 0.6s;
+}
+
+body .ui_inner__item .item_active__part, body .ui_inner__item .item_top, body .ui_inner__item .item_bottom {
+  border-left: 200px solid transparent;
+  border-right: 200px solid transparent;
+  border-bottom: 346.410161514px solid #032035;
+  -webkit-transform: translateY(-346.410161514px) rotateX(90deg);
+          transform: translateY(-346.410161514px) rotateX(90deg);
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+  position: absolute;
+  -webkit-transform-origin: 100% 100%;
+          transform-origin: 100% 100%;
+  transition: all 0.0s;
+}
+
+body .ui_inner__item .item_active__part {
+  border-left: 200px solid transparent;
+  border-right: 200px solid transparent;
+  border-top: 346.410161514px solid #032035;
+  border-bottom: 0;
+}
+
+body {
+  background: #021013;
+  overflow: hidden;
+  font-family: 'Superguns';
+  letter-spacing: 1px;
+  margin: 0;
+}
+body .scanlines {
+  background-image: repeating-linear-gradient(180deg, transparent, transparent 3px, rgba(224, 167, 167, 0.03) 9px, rgba(255, 255, 255, 0.1) 9px);
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  z-index: 1;
+}
+body .intro_wrap {
+  height: 100vh;
+  transition: opacity 0.2s 1.7s, left 0.4s 1.7s;
+  position: relative;
+  left: 0;
+}
+body .intro {
+  position: absolute;
+  width: 370px;
+  left: -530px;
+  font-family: 'Nunito', sans-serif;
+  right: 0;
+  margin: auto;
+  text-align: center;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+body .intro img {
+  width: 150px;
+  margin-top: 17px;
+}
+body .intro .gif {
+  margin-top: 14px;
+  border: 2px solid white;
+  border-radius: 4px;
+  width: 250px;
+}
+body .intro h1 {
+  color: #bf9a7c;
+  font-size: 16px;
+  margin: 10px 0 0;
+}
+body .intro h2 {
+  margin: 0;
+  font-size: 14px;
+  color: #51b8d8;
+}
+body .intro p {
+  color: #c8cdc4;
+  font-size: 12px;
+}
+body .ui {
+  -webkit-perspective: 1300px;
+          perspective: 1300px;
+  height: 100%;
+  opacity: 0;
+  -webkit-animation: fadeIn 2.5s 0.3s forwards;
+          animation: fadeIn 2.5s 0.3s forwards;
+}
+body .ui #item-6:checked + div {
+  opacity: 0;
+  left: -100px;
+  transition: opacity 0.2s, left 0.4s;
+}
+body .ui #item-6:checked + div + div {
+  -webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
+          transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
+  top: -350px;
+  left: 0;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item {
+  -webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
+          transform: translateY(calc(50vh - 2100px)) translateX(-200px);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item label {
+  transition: background 0.6s 5s;
+  -webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
+          transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
+  background: #000000b3;
+  width: 160px;
+  padding: 20px;
+  border-radius: 6px;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item label span {
+  opacity: 1;
+  transition: all 0.6s 5s;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item:hover {
+  background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item:hover .item_top, body .ui #item-6:checked + div + div > .ui_inner__item:hover .item_bottom {
+  border-bottom: 346.410161514px solid #033520;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item:hover::after, body .ui #item-6:checked + div + div > .ui_inner__item:hover::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap .item_active:after {
+  transition: all 1s 5s;
+  opacity: 1;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
+  -webkit-transform: translateX(-246px);
+          transform: translateX(-246px);
+  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
+          animation: fadeIn 0.5s 1.7s forwards !important;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
+          animation: fadeIn 0.5s 1.7s forwards !important;
+}
+@-webkit-keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 2.5s forwards;
+          animation: fadeIn 0.5s 2.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 3s forwards;
+          animation: fadeIn 0.5s 3s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 3.5s forwards;
+          animation: fadeIn 0.5s 3.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 4s forwards;
+          animation: fadeIn 0.5s 4s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 4.5s forwards;
+          animation: fadeIn 0.5s 4.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 5s forwards;
+          animation: fadeIn 0.5s 5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 5.5s forwards;
+          animation: fadeIn 0.5s 5.5s forwards;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
+  -webkit-transform: rotateY(0deg);
+          transform: rotateY(0deg);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 2.5s forwards;
+          animation: flip 0.5s 2.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
+  -webkit-transform: rotateY(-60deg);
+          transform: rotateY(-60deg);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 3s forwards;
+          animation: flip 0.5s 3s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
+  -webkit-transform: rotateY(-120deg);
+          transform: rotateY(-120deg);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 3.5s forwards;
+          animation: flip 0.5s 3.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
+  -webkit-transform: rotateY(-180deg);
+          transform: rotateY(-180deg);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 4s forwards;
+          animation: flip 0.5s 4s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
+  -webkit-transform: rotateY(-240deg);
+          transform: rotateY(-240deg);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 4.5s forwards;
+          animation: flip 0.5s 4.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(6) {
+  -webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
+          transform: translateY(calc(50vh + 100px)) translateX(-200px);
+  -webkit-animation: flash-6 0.3s linear;
+          animation: flash-6 0.3s linear;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(6) h2 {
+  transition: opacity 0.2s 1.4s;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(6) .item_top, body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(6) .item_bottom {
+  -webkit-animation: flashTop-6 0.3s linear;
+          animation: flashTop-6 0.3s linear;
+}
+body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(7) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(8) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(9) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(10) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(11) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-6:checked + div + div > .ui_inner__item h2 {
+  opacity: 0;
+}
+body .ui #item-5:checked + input + div {
+  opacity: 0;
+  left: -100px;
+  transition: opacity 0.2s, left 0.4s;
+}
+body .ui #item-5:checked + input + div + div {
+  -webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
+          transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
+  top: -300px;
+  left: 0;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item {
+  -webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
+          transform: translateY(calc(50vh - 2100px)) translateX(-200px);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item label {
+  transition: background 0.6s 5s;
+  -webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
+          transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
+  background: #000000b3;
+  width: 160px;
+  padding: 20px;
+  border-radius: 6px;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item label span {
+  opacity: 1;
+  transition: all 0.6s 5s;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item:hover {
+  background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-5:checked + input + div + div > .ui_inner__item:hover .item_bottom {
+  border-bottom: 346.410161514px solid #033529;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item:hover::after, body .ui #item-5:checked + input + div + div > .ui_inner__item:hover::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap .item_active:after {
+  transition: all 1s 5s;
+  opacity: 1;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
+  -webkit-transform: translateX(-246px);
+          transform: translateX(-246px);
+  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
+          animation: fadeIn 0.5s 1.7s forwards !important;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
+          animation: fadeIn 0.5s 1.7s forwards !important;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 2.5s forwards;
+          animation: fadeIn 0.5s 2.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 3s forwards;
+          animation: fadeIn 0.5s 3s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 3.5s forwards;
+          animation: fadeIn 0.5s 3.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 4s forwards;
+          animation: fadeIn 0.5s 4s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 4.5s forwards;
+          animation: fadeIn 0.5s 4.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 5s forwards;
+          animation: fadeIn 0.5s 5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 5.5s forwards;
+          animation: fadeIn 0.5s 5.5s forwards;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
+  -webkit-transform: rotateY(0deg);
+          transform: rotateY(0deg);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 2.5s forwards;
+          animation: flip 0.5s 2.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
+  -webkit-transform: rotateY(-60deg);
+          transform: rotateY(-60deg);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 3s forwards;
+          animation: flip 0.5s 3s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
+  -webkit-transform: rotateY(-120deg);
+          transform: rotateY(-120deg);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 3.5s forwards;
+          animation: flip 0.5s 3.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
+  -webkit-transform: rotateY(-180deg);
+          transform: rotateY(-180deg);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 4s forwards;
+          animation: flip 0.5s 4s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
+  -webkit-transform: rotateY(-240deg);
+          transform: rotateY(-240deg);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 4.5s forwards;
+          animation: flip 0.5s 4.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(5) {
+  -webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
+          transform: translateY(calc(50vh + 100px)) translateX(-200px);
+  -webkit-animation: flash-5 0.3s linear;
+          animation: flash-5 0.3s linear;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(5) h2 {
+  transition: opacity 0.2s 1.4s;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(5) .item_top, body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(5) .item_bottom {
+  -webkit-animation: flashTop-5 0.3s linear;
+          animation: flashTop-5 0.3s linear;
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(6) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(7) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(8) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(9) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(10) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-5:checked + input + div + div > .ui_inner__item h2 {
+  opacity: 0;
+}
+body .ui #item-4:checked + input + input + div {
+  opacity: 0;
+  left: -100px;
+  transition: opacity 0.2s, left 0.4s;
+}
+body .ui #item-4:checked + input + input + div + div {
+  -webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
+          transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
+  top: -250px;
+  left: 0;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item {
+  -webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
+          transform: translateY(calc(50vh - 2100px)) translateX(-200px);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item label {
+  transition: background 0.6s 5s;
+  -webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
+          transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
+  background: #000000b3;
+  width: 160px;
+  padding: 20px;
+  border-radius: 6px;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item label span {
+  opacity: 1;
+  transition: all 0.6s 5s;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover {
+  background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover .item_bottom {
+  border-bottom: 346.410161514px solid #033531;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover::after, body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap .item_active:after {
+  transition: all 1s 5s;
+  opacity: 1;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
+  -webkit-transform: translateX(-246px);
+          transform: translateX(-246px);
+  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
+          animation: fadeIn 0.5s 1.7s forwards !important;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
+          animation: fadeIn 0.5s 1.7s forwards !important;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 2.5s forwards;
+          animation: fadeIn 0.5s 2.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 3s forwards;
+          animation: fadeIn 0.5s 3s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 3.5s forwards;
+          animation: fadeIn 0.5s 3.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 4s forwards;
+          animation: fadeIn 0.5s 4s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 4.5s forwards;
+          animation: fadeIn 0.5s 4.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 5s forwards;
+          animation: fadeIn 0.5s 5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 5.5s forwards;
+          animation: fadeIn 0.5s 5.5s forwards;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
+  -webkit-transform: rotateY(0deg);
+          transform: rotateY(0deg);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 2.5s forwards;
+          animation: flip 0.5s 2.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
+  -webkit-transform: rotateY(-60deg);
+          transform: rotateY(-60deg);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 3s forwards;
+          animation: flip 0.5s 3s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
+  -webkit-transform: rotateY(-120deg);
+          transform: rotateY(-120deg);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 3.5s forwards;
+          animation: flip 0.5s 3.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
+  -webkit-transform: rotateY(-180deg);
+          transform: rotateY(-180deg);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 4s forwards;
+          animation: flip 0.5s 4s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
+  -webkit-transform: rotateY(-240deg);
+          transform: rotateY(-240deg);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 4.5s forwards;
+          animation: flip 0.5s 4.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(4) {
+  -webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
+          transform: translateY(calc(50vh + 100px)) translateX(-200px);
+  -webkit-animation: flash-4 0.3s linear;
+          animation: flash-4 0.3s linear;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(4) h2 {
+  transition: opacity 0.2s 1.4s;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(4) .item_top, body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(4) .item_bottom {
+  -webkit-animation: flashTop-4 0.3s linear;
+          animation: flashTop-4 0.3s linear;
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(5) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(6) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(7) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(8) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(9) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-4:checked + input + input + div + div > .ui_inner__item h2 {
+  opacity: 0;
+}
+body .ui #item-3:checked + input + input + input + div {
+  opacity: 0;
+  left: -100px;
+  transition: opacity 0.2s, left 0.4s;
+}
+body .ui #item-3:checked + input + input + input + div + div {
+  -webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
+          transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
+  top: -200px;
+  left: 0;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item {
+  -webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
+          transform: translateY(calc(50vh - 2100px)) translateX(-200px);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item label {
+  transition: background 0.6s 5s;
+  -webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
+          transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
+  background: #000000b3;
+  width: 160px;
+  padding: 20px;
+  border-radius: 6px;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item label span {
+  opacity: 1;
+  transition: all 0.6s 5s;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover {
+  background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover .item_bottom {
+  border-bottom: 346.410161514px solid #033135;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover::after, body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap .item_active:after {
+  transition: all 1s 5s;
+  opacity: 1;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
+  -webkit-transform: translateX(-246px);
+          transform: translateX(-246px);
+  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
+          animation: fadeIn 0.5s 1.7s forwards !important;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
+          animation: fadeIn 0.5s 1.7s forwards !important;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 2.5s forwards;
+          animation: fadeIn 0.5s 2.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 3s forwards;
+          animation: fadeIn 0.5s 3s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 3.5s forwards;
+          animation: fadeIn 0.5s 3.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 4s forwards;
+          animation: fadeIn 0.5s 4s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 4.5s forwards;
+          animation: fadeIn 0.5s 4.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 5s forwards;
+          animation: fadeIn 0.5s 5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 5.5s forwards;
+          animation: fadeIn 0.5s 5.5s forwards;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
+  -webkit-transform: rotateY(0deg);
+          transform: rotateY(0deg);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 2.5s forwards;
+          animation: flip 0.5s 2.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
+  -webkit-transform: rotateY(-60deg);
+          transform: rotateY(-60deg);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 3s forwards;
+          animation: flip 0.5s 3s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
+  -webkit-transform: rotateY(-120deg);
+          transform: rotateY(-120deg);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 3.5s forwards;
+          animation: flip 0.5s 3.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
+  -webkit-transform: rotateY(-180deg);
+          transform: rotateY(-180deg);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 4s forwards;
+          animation: flip 0.5s 4s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
+  -webkit-transform: rotateY(-240deg);
+          transform: rotateY(-240deg);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 4.5s forwards;
+          animation: flip 0.5s 4.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(3) {
+  -webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
+          transform: translateY(calc(50vh + 100px)) translateX(-200px);
+  -webkit-animation: flash-3 0.3s linear;
+          animation: flash-3 0.3s linear;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(3) h2 {
+  transition: opacity 0.2s 1.4s;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(3) .item_top, body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(3) .item_bottom {
+  -webkit-animation: flashTop-3 0.3s linear;
+          animation: flashTop-3 0.3s linear;
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(4) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(5) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(6) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(7) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(8) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item h2 {
+  opacity: 0;
+}
+body .ui #item-2:checked + input + input + input + input + div {
+  opacity: 0;
+  left: -100px;
+  transition: opacity 0.2s, left 0.4s;
+}
+body .ui #item-2:checked + input + input + input + input + div + div {
+  -webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
+          transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
+  top: -150px;
+  left: 0;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item {
+  -webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
+          transform: translateY(calc(50vh - 2100px)) translateX(-200px);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item label {
+  transition: background 0.6s 5s;
+  -webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
+          transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
+  background: #000000b3;
+  width: 160px;
+  padding: 20px;
+  border-radius: 6px;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item label span {
+  opacity: 1;
+  transition: all 0.6s 5s;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover {
+  background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover .item_bottom {
+  border-bottom: 346.410161514px solid #032835;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover::after, body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap .item_active:after {
+  transition: all 1s 5s;
+  opacity: 1;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
+  -webkit-transform: translateX(-246px);
+          transform: translateX(-246px);
+  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
+          animation: fadeIn 0.5s 1.7s forwards !important;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
+          animation: fadeIn 0.5s 1.7s forwards !important;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 2.5s forwards;
+          animation: fadeIn 0.5s 2.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 3s forwards;
+          animation: fadeIn 0.5s 3s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 3.5s forwards;
+          animation: fadeIn 0.5s 3.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 4s forwards;
+          animation: fadeIn 0.5s 4s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 4.5s forwards;
+          animation: fadeIn 0.5s 4.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 5s forwards;
+          animation: fadeIn 0.5s 5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 5.5s forwards;
+          animation: fadeIn 0.5s 5.5s forwards;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
+  -webkit-transform: rotateY(0deg);
+          transform: rotateY(0deg);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 2.5s forwards;
+          animation: flip 0.5s 2.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
+  -webkit-transform: rotateY(-60deg);
+          transform: rotateY(-60deg);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 3s forwards;
+          animation: flip 0.5s 3s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
+  -webkit-transform: rotateY(-120deg);
+          transform: rotateY(-120deg);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 3.5s forwards;
+          animation: flip 0.5s 3.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
+  -webkit-transform: rotateY(-180deg);
+          transform: rotateY(-180deg);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 4s forwards;
+          animation: flip 0.5s 4s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
+  -webkit-transform: rotateY(-240deg);
+          transform: rotateY(-240deg);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 4.5s forwards;
+          animation: flip 0.5s 4.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) {
+  -webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
+          transform: translateY(calc(50vh + 100px)) translateX(-200px);
+  -webkit-animation: flash-2 0.3s linear;
+          animation: flash-2 0.3s linear;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) h2 {
+  transition: opacity 0.2s 1.4s;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) .item_top, body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) .item_bottom {
+  -webkit-animation: flashTop-2 0.3s linear;
+          animation: flashTop-2 0.3s linear;
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(3) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(4) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(5) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(6) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(7) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item h2 {
+  opacity: 0;
+}
+body .ui #item-1:checked + input + input + input + input + input + div {
+  opacity: 0;
+  left: -100px;
+  transition: opacity 0.2s, left 0.4s;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div {
+  -webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
+          transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
+  top: -100px;
+  left: 0;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item {
+  -webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
+          transform: translateY(calc(50vh - 2100px)) translateX(-200px);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item label {
+  transition: background 0.6s 5s;
+  -webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
+          transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
+  background: #000000b3;
+  width: 160px;
+  padding: 20px;
+  border-radius: 6px;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item label span {
+  opacity: 1;
+  transition: all 0.6s 5s;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:hover {
+  background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:hover .item_bottom {
+  border-bottom: 346.410161514px solid #032035;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:hover::after, body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:hover::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap .item_active:after {
+  transition: all 1s 5s;
+  opacity: 1;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
+  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
+  -webkit-transform: translateX(-246px);
+          transform: translateX(-246px);
+  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
+          animation: fadeIn 0.5s 1.7s forwards !important;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
+          animation: fadeIn 0.5s 1.7s forwards !important;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 2.5s forwards;
+          animation: fadeIn 0.5s 2.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 3s forwards;
+          animation: fadeIn 0.5s 3s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 3.5s forwards;
+          animation: fadeIn 0.5s 3.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 4s forwards;
+          animation: fadeIn 0.5s 4s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 4.5s forwards;
+          animation: fadeIn 0.5s 4.5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 5s forwards;
+          animation: fadeIn 0.5s 5s forwards;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
+  -webkit-animation: fadeIn 0.5s 5.5s forwards;
+          animation: fadeIn 0.5s 5.5s forwards;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
+  -webkit-transform: rotateY(0deg);
+          transform: rotateY(0deg);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 2.5s forwards;
+          animation: flip 0.5s 2.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
+  -webkit-transform: rotateY(-60deg);
+          transform: rotateY(-60deg);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 3s forwards;
+          animation: flip 0.5s 3s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
+  -webkit-transform: rotateY(-120deg);
+          transform: rotateY(-120deg);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 3.5s forwards;
+          animation: flip 0.5s 3.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
+  -webkit-transform: rotateY(-180deg);
+          transform: rotateY(-180deg);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 4s forwards;
+          animation: flip 0.5s 4s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
+  -webkit-transform: rotateY(-240deg);
+          transform: rotateY(-240deg);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part {
+  opacity: 0;
+  -webkit-animation: flip 0.5s 4.5s forwards;
+          animation: flip 0.5s 4.5s forwards;
+  -webkit-backface-visibility: none;
+          backface-visibility: none;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(1) {
+  -webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
+          transform: translateY(calc(50vh + 100px)) translateX(-200px);
+  -webkit-animation: flash-1 0.3s linear;
+          animation: flash-1 0.3s linear;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(1) h2 {
+  transition: opacity 0.2s 1.4s;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(1) .item_top, body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(1) .item_bottom {
+  -webkit-animation: flashTop-1 0.3s linear;
+          animation: flashTop-1 0.3s linear;
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(3) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(4) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(5) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(6) {
+  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
+}
+body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item h2 {
+  opacity: 0;
+}
+body .ui input {
+  display: none;
+}
+body .ui_inner {
+  top: calc(50vh - 130px);
+  left: 200px;
+  -webkit-transform: rotateY(-10deg);
+          transform: rotateY(-10deg);
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  transition: all 2s 0.4s;
+  height: 0;
+  width: 100%;
+}
+body .ui_inner__item {
+  width: 400px;
+  height: 40px;
+  transition: all 0.6s, -webkit-transform 2s 0.4s;
+  transition: all 0.6s, transform 2s 0.4s;
+  transition: all 0.6s, transform 2s 0.4s, -webkit-transform 2s 0.4s;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-transform-origin: 0% 0%;
+          transform-origin: 0% 0%;
+}
+body .ui_inner__item label {
+  position: absolute;
+  height: 131%;
+  width: 100%;
+  display: block;
+  background: none;
+  z-index: 1;
+  cursor: pointer;
+  transition: background 0.6s 0s;
+  text-align: center;
+  color: white;
+  text-transform: uppercase;
+}
+body .ui_inner__item label span {
+  opacity: 0;
+  top: 9px;
+  position: relative;
+  transition: all 0s 0s;
+}
+body .ui_inner__item h2 {
+  right: 20px;
+  color: #c39d7e;
+  -webkit-transform: translateY(-50%) translatez(10px);
+          transform: translateY(-50%) translatez(10px);
+  transition: opacity 0.2s 0.3s;
+  font-weight: normal;
+  font-size: 14px;
+  left: auto;
+  text-transform: uppercase;
+}
+body .ui_inner__item::after {
+  -webkit-transform: rotateY(60deg);
+          transform: rotateY(60deg);
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+}
+body .ui_inner__item::before {
+  -webkit-transform: rotateY(-60deg);
+          transform: rotateY(-60deg);
+  -webkit-transform-origin: 100% 0;
+          transform-origin: 100% 0;
+}
+body .ui_inner__item .item_bottom {
+  -webkit-transform: translateY(-306.410161514px) rotateX(90deg);
+          transform: translateY(-306.410161514px) rotateX(90deg);
+}
+body .ui_inner__item .item_wrap {
+  -webkit-transform: rotatey(0deg);
+          transform: rotatey(0deg);
+  -webkit-transform-origin: 400px 100%;
+          transform-origin: 400px 100%;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+}
+body .ui_inner__item .item_active {
+  -webkit-transform: rotateY(30deg) translateX(-55px) translateZ(-200px);
+          transform: rotateY(30deg) translateX(-55px) translateZ(-200px);
+  -webkit-transform-origin: 100% 100%;
+          transform-origin: 100% 100%;
+  position: absolute;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+}
+body .ui_inner__item .item_active::after {
+  display: block;
+  content: '';
+  width: 400px;
+  height: 30px;
+  transition: all 0s 0s;
+  opacity: 0;
+  position: absolute;
+  top: 0px;
+  -webkit-transform: rotatex(0deg) rotatez(180deg) translateY(29px) rotateY(30deg) translateX(-748px) translateZ(-200px);
+          transform: rotatex(0deg) rotatez(180deg) translateY(29px) rotateY(30deg) translateX(-748px) translateZ(-200px);
+  -webkit-transform-origin: 0% 100%;
+          transform-origin: 0% 100%;
+}
+body .ui_inner__item .item_active:nth-of-type(1)::after {
+  background: #032035;
+}
+body .ui_inner__item .item_active:nth-of-type(2)::after {
+  background: #032835;
+}
+body .ui_inner__item .item_active:nth-of-type(3)::after {
+  background: #033135;
+}
+body .ui_inner__item .item_active:nth-of-type(4)::after {
+  background: #033531;
+}
+body .ui_inner__item .item_active:nth-of-type(5)::after {
+  background: #033529;
+}
+body .ui_inner__item .item_active:nth-of-type(6)::after {
+  background: #033520;
+}
+body .ui_inner__item .item_active__part {
+  -webkit-transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px);
+          transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px);
+  -webkit-transform-origin: 100% 0;
+          transform-origin: 100% 0;
+  -webkit-transform-style: preserve-3D;
+          transform-style: preserve-3D;
+}
+body .ui_inner__item .item_active__part .nodes {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  border: 3px solid white;
+  opacity: 0;
+  border-radius: 100px;
+  top: -315px;
+  left: -132px;
+  -webkit-transform: translateZ(1px);
+          transform: translateZ(1px);
+}
+body .ui_inner__item .item_active__part h3 {
+  position: absolute;
+  top: -406.410161514px;
+  width: 500px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  text-transform: uppercase;
+  -webkit-transform-style: preserve-3D;
+          transform-style: preserve-3D;
+  -webkit-transform: rotateX(-20deg) rotatey(180deg) translateX(50%);
+          transform: rotateX(-20deg) rotatey(180deg) translateX(50%);
+  color: #c39d7e;
+  font-weight: normal;
+  text-align: center;
+  font-size: 28px;
+  opacity: 0;
+}
+@-webkit-keyframes flip {
+  from {
+    opacity: 1;
+    -webkit-transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px);
+            transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: rotatex(90deg) rotatey(180deg) rotateZ(-30deg) translateX(0px) translateY(0px);
+            transform: rotatex(90deg) rotatey(180deg) rotateZ(-30deg) translateX(0px) translateY(0px);
+  }
+}
+@keyframes flip {
+  from {
+    opacity: 1;
+    -webkit-transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px);
+            transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: rotatex(90deg) rotatey(180deg) rotateZ(-30deg) translateX(0px) translateY(0px);
+            transform: rotatex(90deg) rotatey(180deg) rotateZ(-30deg) translateX(0px) translateY(0px);
+  }
+}
+body .ui_inner__item:nth-of-type(1) {
+  top: calc(50% + (0 * 16px) + (40px * 0));
+  background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(1) .nodes {
+  box-shadow: 40px 0px 0 -3px #032035, 40px 0px 0px 0px white, 80px 0px 0 -3px #032035, 80px 0px 0px 0px white, 120px 0px 0 -3px #032035, 120px 0px 0px 0px white, 160px 0px 0 -3px #032035, 160px 0px 0px 0px white, 200px 0px 0 -3px #032035, 200px 0px 0px 0px white, 240px 0px 0 -3px #032035, 240px 0px 0px 0px white, 20px 40px 0 -3px #032035, 20px 40px 0px 0px white, 60px 40px 0 -3px #032035, 60px 40px 0px 0px white, 100px 40px 0 -3px #032035, 100px 40px 0px 0px white, 140px 40px 0 -3px #032035, 140px 40px 0px 0px white, 180px 40px 0 -3px #032035, 180px 40px 0px 0px white, 220px 40px 0 -3px #032035, 220px 40px 0px 0px white, 40px 80px 0 -3px #032035, 40px 80px 0px 0px white, 80px 80px 0 -3px #032035, 80px 80px 0px 0px white, 120px 80px 0 -3px #032035, 120px 80px 0px 0px white, 160px 80px 0 -3px #032035, 160px 80px 0px 0px white, 200px 80px 0 -3px #032035, 200px 80px 0px 0px white, 60px 120px 0 -3px #032035, 60px 120px 0px 0px white, 100px 120px 0 -3px #032035, 100px 120px 0px 0px white, 140px 120px 0 -3px #032035, 140px 120px 0px 0px white, 180px 120px 0 -3px #032035, 180px 120px 0px 0px white, 80px 160px 0 -3px #032035, 80px 160px 0px 0px white, 120px 160px 0 -3px #032035, 120px 160px 0px 0px white, 160px 160px 0 -3px #032035, 160px 160px 0px 0px white, 100px 200px 0 -3px #032035, 100px 200px 0px 0px white, 140px 200px 0 -3px #032035, 140px 200px 0px 0px white, 120px 240px 0 -3px #032035, 120px 240px 0px 0px white;
+}
+@-webkit-keyframes flash-1 {
+  0% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  25% {
+    background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
+  }
+  50% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  75% {
+    background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
+  }
+  100% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+}
+@keyframes flash-1 {
+  0% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  25% {
+    background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
+  }
+  50% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  75% {
+    background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
+  }
+  100% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+}
+@-webkit-keyframes flashTop-1 {
+  0% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  25% {
+    border-bottom: 346.410161514px solid #032035;
+  }
+  50% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  75% {
+    border-bottom: 346.410161514px solid #032035;
+  }
+  100% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+}
+@keyframes flashTop-1 {
+  0% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  25% {
+    border-bottom: 346.410161514px solid #032035;
+  }
+  50% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  75% {
+    border-bottom: 346.410161514px solid #032035;
+  }
+  100% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+}
+body .ui_inner__item:nth-of-type(1)::after, body .ui_inner__item:nth-of-type(1)::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(1) .item_top, body .ui_inner__item:nth-of-type(1) .item_bottom {
+  border-bottom: 346.410161514px solid #032035;
+}
+body .ui_inner__item:nth-of-type(1) .item_active__part {
+  border-top: 346.410161514px solid #032035;
+}
+body .ui_inner__item:nth-of-type(1):hover {
+  background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(1):hover::after, body .ui_inner__item:nth-of-type(1):hover::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(1):hover .item_top, body .ui_inner__item:nth-of-type(1):hover .item_bottom {
+  border-bottom: 346.410161514px solid #ad988e;
+}
+body .ui_inner__item:nth-of-type(2) {
+  top: calc(50% + (1 * 16px) + (40px * 1));
+  background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(2) .nodes {
+  box-shadow: 40px 0px 0 -3px #032835, 40px 0px 0px 0px white, 80px 0px 0 -3px #032835, 80px 0px 0px 0px white, 120px 0px 0 -3px #032835, 120px 0px 0px 0px white, 160px 0px 0 -3px #032835, 160px 0px 0px 0px white, 200px 0px 0 -3px #032835, 200px 0px 0px 0px white, 240px 0px 0 -3px #032835, 240px 0px 0px 0px white, 20px 40px 0 -3px #032835, 20px 40px 0px 0px white, 60px 40px 0 -3px #032835, 60px 40px 0px 0px white, 100px 40px 0 -3px #032835, 100px 40px 0px 0px white, 140px 40px 0 -3px #032835, 140px 40px 0px 0px white, 180px 40px 0 -3px #032835, 180px 40px 0px 0px white, 220px 40px 0 -3px #032835, 220px 40px 0px 0px white, 40px 80px 0 -3px #032835, 40px 80px 0px 0px white, 80px 80px 0 -3px #032835, 80px 80px 0px 0px white, 120px 80px 0 -3px #032835, 120px 80px 0px 0px white, 160px 80px 0 -3px #032835, 160px 80px 0px 0px white, 200px 80px 0 -3px #032835, 200px 80px 0px 0px white, 60px 120px 0 -3px #032835, 60px 120px 0px 0px white, 100px 120px 0 -3px #032835, 100px 120px 0px 0px white, 140px 120px 0 -3px #032835, 140px 120px 0px 0px white, 180px 120px 0 -3px #032835, 180px 120px 0px 0px white, 80px 160px 0 -3px #032835, 80px 160px 0px 0px white, 120px 160px 0 -3px #032835, 120px 160px 0px 0px white, 160px 160px 0 -3px #032835, 160px 160px 0px 0px white, 100px 200px 0 -3px #032835, 100px 200px 0px 0px white, 140px 200px 0 -3px #032835, 140px 200px 0px 0px white, 120px 240px 0 -3px #032835, 120px 240px 0px 0px white;
+}
+@-webkit-keyframes flash-2 {
+  0% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  25% {
+    background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
+  }
+  50% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  75% {
+    background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
+  }
+  100% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+}
+@keyframes flash-2 {
+  0% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  25% {
+    background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
+  }
+  50% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  75% {
+    background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
+  }
+  100% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+}
+@-webkit-keyframes flashTop-2 {
+  0% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  25% {
+    border-bottom: 346.410161514px solid #032835;
+  }
+  50% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  75% {
+    border-bottom: 346.410161514px solid #032835;
+  }
+  100% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+}
+@keyframes flashTop-2 {
+  0% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  25% {
+    border-bottom: 346.410161514px solid #032835;
+  }
+  50% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  75% {
+    border-bottom: 346.410161514px solid #032835;
+  }
+  100% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+}
+body .ui_inner__item:nth-of-type(2)::after, body .ui_inner__item:nth-of-type(2)::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(2) .item_top, body .ui_inner__item:nth-of-type(2) .item_bottom {
+  border-bottom: 346.410161514px solid #032835;
+}
+body .ui_inner__item:nth-of-type(2) .item_active__part {
+  border-top: 346.410161514px solid #032835;
+}
+body .ui_inner__item:nth-of-type(2):hover {
+  background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(2):hover::after, body .ui_inner__item:nth-of-type(2):hover::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(2):hover .item_top, body .ui_inner__item:nth-of-type(2):hover .item_bottom {
+  border-bottom: 346.410161514px solid #ad988e;
+}
+body .ui_inner__item:nth-of-type(3) {
+  top: calc(50% + (2 * 16px) + (40px * 2));
+  background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(3) .nodes {
+  box-shadow: 40px 0px 0 -3px #033135, 40px 0px 0px 0px white, 80px 0px 0 -3px #033135, 80px 0px 0px 0px white, 120px 0px 0 -3px #033135, 120px 0px 0px 0px white, 160px 0px 0 -3px #033135, 160px 0px 0px 0px white, 200px 0px 0 -3px #033135, 200px 0px 0px 0px white, 240px 0px 0 -3px #033135, 240px 0px 0px 0px white, 20px 40px 0 -3px #033135, 20px 40px 0px 0px white, 60px 40px 0 -3px #033135, 60px 40px 0px 0px white, 100px 40px 0 -3px #033135, 100px 40px 0px 0px white, 140px 40px 0 -3px #033135, 140px 40px 0px 0px white, 180px 40px 0 -3px #033135, 180px 40px 0px 0px white, 220px 40px 0 -3px #033135, 220px 40px 0px 0px white, 40px 80px 0 -3px #033135, 40px 80px 0px 0px white, 80px 80px 0 -3px #033135, 80px 80px 0px 0px white, 120px 80px 0 -3px #033135, 120px 80px 0px 0px white, 160px 80px 0 -3px #033135, 160px 80px 0px 0px white, 200px 80px 0 -3px #033135, 200px 80px 0px 0px white, 60px 120px 0 -3px #033135, 60px 120px 0px 0px white, 100px 120px 0 -3px #033135, 100px 120px 0px 0px white, 140px 120px 0 -3px #033135, 140px 120px 0px 0px white, 180px 120px 0 -3px #033135, 180px 120px 0px 0px white, 80px 160px 0 -3px #033135, 80px 160px 0px 0px white, 120px 160px 0 -3px #033135, 120px 160px 0px 0px white, 160px 160px 0 -3px #033135, 160px 160px 0px 0px white, 100px 200px 0 -3px #033135, 100px 200px 0px 0px white, 140px 200px 0 -3px #033135, 140px 200px 0px 0px white, 120px 240px 0 -3px #033135, 120px 240px 0px 0px white;
+}
+@-webkit-keyframes flash-3 {
+  0% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  25% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
+  }
+  50% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  75% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
+  }
+  100% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+}
+@keyframes flash-3 {
+  0% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  25% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
+  }
+  50% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  75% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
+  }
+  100% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+}
+@-webkit-keyframes flashTop-3 {
+  0% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  25% {
+    border-bottom: 346.410161514px solid #033135;
+  }
+  50% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  75% {
+    border-bottom: 346.410161514px solid #033135;
+  }
+  100% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+}
+@keyframes flashTop-3 {
+  0% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  25% {
+    border-bottom: 346.410161514px solid #033135;
+  }
+  50% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  75% {
+    border-bottom: 346.410161514px solid #033135;
+  }
+  100% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+}
+body .ui_inner__item:nth-of-type(3)::after, body .ui_inner__item:nth-of-type(3)::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(3) .item_top, body .ui_inner__item:nth-of-type(3) .item_bottom {
+  border-bottom: 346.410161514px solid #033135;
+}
+body .ui_inner__item:nth-of-type(3) .item_active__part {
+  border-top: 346.410161514px solid #033135;
+}
+body .ui_inner__item:nth-of-type(3):hover {
+  background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(3):hover::after, body .ui_inner__item:nth-of-type(3):hover::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(3):hover .item_top, body .ui_inner__item:nth-of-type(3):hover .item_bottom {
+  border-bottom: 346.410161514px solid #ad988e;
+}
+body .ui_inner__item:nth-of-type(4) {
+  top: calc(50% + (3 * 16px) + (40px * 3));
+  background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(4) .nodes {
+  box-shadow: 40px 0px 0 -3px #033531, 40px 0px 0px 0px white, 80px 0px 0 -3px #033531, 80px 0px 0px 0px white, 120px 0px 0 -3px #033531, 120px 0px 0px 0px white, 160px 0px 0 -3px #033531, 160px 0px 0px 0px white, 200px 0px 0 -3px #033531, 200px 0px 0px 0px white, 240px 0px 0 -3px #033531, 240px 0px 0px 0px white, 20px 40px 0 -3px #033531, 20px 40px 0px 0px white, 60px 40px 0 -3px #033531, 60px 40px 0px 0px white, 100px 40px 0 -3px #033531, 100px 40px 0px 0px white, 140px 40px 0 -3px #033531, 140px 40px 0px 0px white, 180px 40px 0 -3px #033531, 180px 40px 0px 0px white, 220px 40px 0 -3px #033531, 220px 40px 0px 0px white, 40px 80px 0 -3px #033531, 40px 80px 0px 0px white, 80px 80px 0 -3px #033531, 80px 80px 0px 0px white, 120px 80px 0 -3px #033531, 120px 80px 0px 0px white, 160px 80px 0 -3px #033531, 160px 80px 0px 0px white, 200px 80px 0 -3px #033531, 200px 80px 0px 0px white, 60px 120px 0 -3px #033531, 60px 120px 0px 0px white, 100px 120px 0 -3px #033531, 100px 120px 0px 0px white, 140px 120px 0 -3px #033531, 140px 120px 0px 0px white, 180px 120px 0 -3px #033531, 180px 120px 0px 0px white, 80px 160px 0 -3px #033531, 80px 160px 0px 0px white, 120px 160px 0 -3px #033531, 120px 160px 0px 0px white, 160px 160px 0 -3px #033531, 160px 160px 0px 0px white, 100px 200px 0 -3px #033531, 100px 200px 0px 0px white, 140px 200px 0 -3px #033531, 140px 200px 0px 0px white, 120px 240px 0 -3px #033531, 120px 240px 0px 0px white;
+}
+@-webkit-keyframes flash-4 {
+  0% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  25% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
+  }
+  50% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  75% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
+  }
+  100% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+}
+@keyframes flash-4 {
+  0% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  25% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
+  }
+  50% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  75% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
+  }
+  100% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+}
+@-webkit-keyframes flashTop-4 {
+  0% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  25% {
+    border-bottom: 346.410161514px solid #033531;
+  }
+  50% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  75% {
+    border-bottom: 346.410161514px solid #033531;
+  }
+  100% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+}
+@keyframes flashTop-4 {
+  0% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  25% {
+    border-bottom: 346.410161514px solid #033531;
+  }
+  50% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  75% {
+    border-bottom: 346.410161514px solid #033531;
+  }
+  100% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+}
+body .ui_inner__item:nth-of-type(4)::after, body .ui_inner__item:nth-of-type(4)::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(4) .item_top, body .ui_inner__item:nth-of-type(4) .item_bottom {
+  border-bottom: 346.410161514px solid #033531;
+}
+body .ui_inner__item:nth-of-type(4) .item_active__part {
+  border-top: 346.410161514px solid #033531;
+}
+body .ui_inner__item:nth-of-type(4):hover {
+  background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(4):hover::after, body .ui_inner__item:nth-of-type(4):hover::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(4):hover .item_top, body .ui_inner__item:nth-of-type(4):hover .item_bottom {
+  border-bottom: 346.410161514px solid #ad988e;
+}
+body .ui_inner__item:nth-of-type(5) {
+  top: calc(50% + (4 * 16px) + (40px * 4));
+  background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(5) .nodes {
+  box-shadow: 40px 0px 0 -3px #033529, 40px 0px 0px 0px white, 80px 0px 0 -3px #033529, 80px 0px 0px 0px white, 120px 0px 0 -3px #033529, 120px 0px 0px 0px white, 160px 0px 0 -3px #033529, 160px 0px 0px 0px white, 200px 0px 0 -3px #033529, 200px 0px 0px 0px white, 240px 0px 0 -3px #033529, 240px 0px 0px 0px white, 20px 40px 0 -3px #033529, 20px 40px 0px 0px white, 60px 40px 0 -3px #033529, 60px 40px 0px 0px white, 100px 40px 0 -3px #033529, 100px 40px 0px 0px white, 140px 40px 0 -3px #033529, 140px 40px 0px 0px white, 180px 40px 0 -3px #033529, 180px 40px 0px 0px white, 220px 40px 0 -3px #033529, 220px 40px 0px 0px white, 40px 80px 0 -3px #033529, 40px 80px 0px 0px white, 80px 80px 0 -3px #033529, 80px 80px 0px 0px white, 120px 80px 0 -3px #033529, 120px 80px 0px 0px white, 160px 80px 0 -3px #033529, 160px 80px 0px 0px white, 200px 80px 0 -3px #033529, 200px 80px 0px 0px white, 60px 120px 0 -3px #033529, 60px 120px 0px 0px white, 100px 120px 0 -3px #033529, 100px 120px 0px 0px white, 140px 120px 0 -3px #033529, 140px 120px 0px 0px white, 180px 120px 0 -3px #033529, 180px 120px 0px 0px white, 80px 160px 0 -3px #033529, 80px 160px 0px 0px white, 120px 160px 0 -3px #033529, 120px 160px 0px 0px white, 160px 160px 0 -3px #033529, 160px 160px 0px 0px white, 100px 200px 0 -3px #033529, 100px 200px 0px 0px white, 140px 200px 0 -3px #033529, 140px 200px 0px 0px white, 120px 240px 0 -3px #033529, 120px 240px 0px 0px white;
+}
+@-webkit-keyframes flash-5 {
+  0% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  25% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
+  }
+  50% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  75% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
+  }
+  100% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+}
+@keyframes flash-5 {
+  0% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  25% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
+  }
+  50% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  75% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
+  }
+  100% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+}
+@-webkit-keyframes flashTop-5 {
+  0% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  25% {
+    border-bottom: 346.410161514px solid #033529;
+  }
+  50% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  75% {
+    border-bottom: 346.410161514px solid #033529;
+  }
+  100% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+}
+@keyframes flashTop-5 {
+  0% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  25% {
+    border-bottom: 346.410161514px solid #033529;
+  }
+  50% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  75% {
+    border-bottom: 346.410161514px solid #033529;
+  }
+  100% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+}
+body .ui_inner__item:nth-of-type(5)::after, body .ui_inner__item:nth-of-type(5)::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(5) .item_top, body .ui_inner__item:nth-of-type(5) .item_bottom {
+  border-bottom: 346.410161514px solid #033529;
+}
+body .ui_inner__item:nth-of-type(5) .item_active__part {
+  border-top: 346.410161514px solid #033529;
+}
+body .ui_inner__item:nth-of-type(5):hover {
+  background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(5):hover::after, body .ui_inner__item:nth-of-type(5):hover::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(5):hover .item_top, body .ui_inner__item:nth-of-type(5):hover .item_bottom {
+  border-bottom: 346.410161514px solid #ad988e;
+}
+body .ui_inner__item:nth-of-type(6) {
+  top: calc(50% + (5 * 16px) + (40px * 5));
+  background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(6) .nodes {
+  box-shadow: 40px 0px 0 -3px #033520, 40px 0px 0px 0px white, 80px 0px 0 -3px #033520, 80px 0px 0px 0px white, 120px 0px 0 -3px #033520, 120px 0px 0px 0px white, 160px 0px 0 -3px #033520, 160px 0px 0px 0px white, 200px 0px 0 -3px #033520, 200px 0px 0px 0px white, 240px 0px 0 -3px #033520, 240px 0px 0px 0px white, 20px 40px 0 -3px #033520, 20px 40px 0px 0px white, 60px 40px 0 -3px #033520, 60px 40px 0px 0px white, 100px 40px 0 -3px #033520, 100px 40px 0px 0px white, 140px 40px 0 -3px #033520, 140px 40px 0px 0px white, 180px 40px 0 -3px #033520, 180px 40px 0px 0px white, 220px 40px 0 -3px #033520, 220px 40px 0px 0px white, 40px 80px 0 -3px #033520, 40px 80px 0px 0px white, 80px 80px 0 -3px #033520, 80px 80px 0px 0px white, 120px 80px 0 -3px #033520, 120px 80px 0px 0px white, 160px 80px 0 -3px #033520, 160px 80px 0px 0px white, 200px 80px 0 -3px #033520, 200px 80px 0px 0px white, 60px 120px 0 -3px #033520, 60px 120px 0px 0px white, 100px 120px 0 -3px #033520, 100px 120px 0px 0px white, 140px 120px 0 -3px #033520, 140px 120px 0px 0px white, 180px 120px 0 -3px #033520, 180px 120px 0px 0px white, 80px 160px 0 -3px #033520, 80px 160px 0px 0px white, 120px 160px 0 -3px #033520, 120px 160px 0px 0px white, 160px 160px 0 -3px #033520, 160px 160px 0px 0px white, 100px 200px 0 -3px #033520, 100px 200px 0px 0px white, 140px 200px 0 -3px #033520, 140px 200px 0px 0px white, 120px 240px 0 -3px #033520, 120px 240px 0px 0px white;
+}
+@-webkit-keyframes flash-6 {
+  0% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  25% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
+  }
+  50% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  75% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
+  }
+  100% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+}
+@keyframes flash-6 {
+  0% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  25% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
+  }
+  50% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+  75% {
+    background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
+  }
+  100% {
+    background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+  }
+}
+@-webkit-keyframes flashTop-6 {
+  0% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  25% {
+    border-bottom: 346.410161514px solid #033520;
+  }
+  50% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  75% {
+    border-bottom: 346.410161514px solid #033520;
+  }
+  100% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+}
+@keyframes flashTop-6 {
+  0% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  25% {
+    border-bottom: 346.410161514px solid #033520;
+  }
+  50% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+  75% {
+    border-bottom: 346.410161514px solid #033520;
+  }
+  100% {
+    border-bottom: 346.410161514px solid #ad988e;
+  }
+}
+body .ui_inner__item:nth-of-type(6)::after, body .ui_inner__item:nth-of-type(6)::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(6) .item_top, body .ui_inner__item:nth-of-type(6) .item_bottom {
+  border-bottom: 346.410161514px solid #033520;
+}
+body .ui_inner__item:nth-of-type(6) .item_active__part {
+  border-top: 346.410161514px solid #033520;
+}
+body .ui_inner__item:nth-of-type(6):hover {
+  background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(6):hover::after, body .ui_inner__item:nth-of-type(6):hover::before {
+  background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
+}
+body .ui_inner__item:nth-of-type(6):hover .item_top, body .ui_inner__item:nth-of-type(6):hover .item_bottom {
+  border-bottom: 346.410161514px solid #ad988e;
+}
diff --git a/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/license.txt b/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/license.txt
new file mode 100644
index 0000000..37183b8
--- /dev/null
+++ b/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Jamie Coulter (https://codepen.io/jcoulterdesign/pen/qYJWyq)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/src/index.haml b/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/src/index.haml
new file mode 100644
index 0000000..95a9aeb
--- /dev/null
+++ b/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/src/index.haml
@@ -0,0 +1,29 @@
+-@menuItems = ['publicinform', 'traffic control', 'cryoprison', 'administration', 'morality div', 'metro patrol']
+
+-@subItems = ['publicinform', 'traffic control', 'cryoprison', 'administration', 'morality div', 'metro patrol']
+.scanlines
+
+.ui
+    -@menuItems.each_with_index do |item, index|
+        %input{:type => 'checkbox', :name => 'item', :id => "item-#{index + 1}"}
+    .intro_wrap
+        .intro
+            %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/demolition-man.png'}
+            %h1 80's / 90's Inspired UI's in CSS 
+            %h2 Demolition Man 1993
+            %img.gif{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/demogif.gif'}
+            %p A recreation of the Demolition Man 3D Hexagon Foldout menu in CSS only. Nice and cheesy. Not an exact replica for sure, perspectives are off slightly, but still looks good!
+    .ui_inner
+        -@menuItems.each_with_index do |item, index|
+            .ui_inner__item
+                %label{:for => "item-#{index + 1}"}
+                    %span back
+                %h2 #{item}
+                .item_top
+                .item_bottom
+                -@subItems.each_with_index do |item, index|
+                    .item_wrap{:class => "item-#{index + 1}"}
+                        .item_active
+                            .item_active__part
+                                .nodes
+                                %h3 #{item}
diff --git a/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/src/style.scss b/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/src/style.scss
new file mode 100644
index 0000000..915f18d
--- /dev/null
+++ b/80-s-90-s-movie-ui-s-recreated-in-css-1demolition-man-1993/src/style.scss
@@ -0,0 +1,553 @@
+// Demolition man fontage
+
+@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
+
+@font-face {
+    font-family: 'Superguns';
+    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/Superguns.woff2') format('woff2'),
+        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/Superguns.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+// Colors
+$bg: #021013;
+$text: #c39d7e;
+$triangleBg: #032035;
+
+// Dims
+$triangleWidth: 400px;
+$triangleHeight: 40px;
+$triangleAltitude: 0.5 * 1.73205080757 * $triangleWidth + 0px;
+$triangleGap: 16px;
+$itemCount: 6;
+
+// Transition
+$hueRotation: 10;
+$verticalOffset: calc(50vh - 130px);
+$horizontalOffset: 200px;
+$rotationOffset: -10deg;
+$moveAmount: 2100px;
+
+// Perspective
+$globalPerspective: 1300px;
+
+%absPosition {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    margin: auto;
+    transform: translateY(-50%);
+}
+
+%killInteraction {
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none; 
+    -ms-user-select: none;
+}
+
+%triangleSides {
+    width: $triangleWidth;
+    height: $triangleHeight;
+    background: $triangleBg;
+    position: absolute;
+    top: 0;
+    display: block;
+    content: '';  
+    backface-visibility: none;
+    transition: all 0.6s;
+}
+
+%triangleTop {
+    border-left: $triangleWidth / 2 solid transparent;
+    border-right: $triangleWidth / 2 solid transparent;
+    border-bottom: $triangleAltitude solid $triangleBg;
+    transform: translateY(-$triangleAltitude) rotateX(90deg);
+    backface-visibility: none;
+    position: absolute;
+    transform-origin: 100% 100%;
+    transition: all 0.0s;
+}
+
+%trianglePart {
+    @extend %triangleTop;
+    
+    border-left: $triangleWidth / 2 solid transparent;
+    border-right: $triangleWidth / 2 solid transparent;
+    border-top: $triangleAltitude solid $triangleBg;
+    border-bottom: 0;
+}
+
+// Traverse DOM for easy interactions
+@mixin traverse($n) {
+    $item: '';
+    $tab: '';
+
+    @for $i from 1 through $n {
+        $int: #{($n + 1) - $i};
+        
+        & #item-#{$int}:checked #{$item} + div {
+            opacity: 0;
+            left: -100px;
+            transition: opacity 0.2s, left 0.4s;
+        }
+        
+        & #item-#{$int}:checked #{$item} + div + div {
+            transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
+            top: -100px - ((($n + 1) - $i - 1) * 50);
+            left: 0;
+
+            & > .ui_inner__item {
+                transform: translateY(calc(50vh - #{$moveAmount})) translateX(-$triangleWidth / 2);
+                
+                // Why does syntax highlighting mess up here?
+                label {
+                    transition: background 0.6s 5s;
+                    transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
+                    background: #000000b3;
+                    width: 160px;
+                    padding: 20px;
+                    border-radius: 6px;
+                        
+                    span {
+                        opacity: 1;
+                        transition: all 0.6s 5s;
+                    }
+                }
+                
+                &:hover {
+                    background: -webkit-linear-gradient(left, $bg 30%, adjust-hue($triangleBg, -(($n) - $i) * $hueRotation) 70%, $bg 100%);
+                    
+                    & .item_top,
+                    & .item_bottom {
+                        border-bottom: $triangleAltitude solid adjust-hue($triangleBg, -(($n) - $i) * $hueRotation); 
+                    }
+                    
+                    &::after,
+                    &::before {
+                        background: -webkit-linear-gradient(left, $bg 30%, adjust-hue($triangleBg, -(($n) - $i) * $hueRotation) 70%, $bg 100%);
+                    }
+                }
+                    
+                & .item_wrap {
+                    
+                    & .item_active {
+                        &:after {
+                            transition: all 1s 5s;
+                            opacity: 1;
+                        }
+                    }
+                        &:nth-of-type(6) {
+                            & .item_active__part {
+                                h3 {
+                                    transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+                                }
+                            }
+                        }
+                        
+                        &:nth-of-type(5) {
+                            & .item_active__part {
+                                h3 {
+                                    transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+                                }
+                            }
+                        }
+                        
+                        &:nth-of-type(4) {
+                            & .item_active__part {
+                                h3 {
+                                    transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
+                                }
+                            }
+                        }
+                    
+                        &:nth-of-type(8) {
+                            & .item_active__part {
+                                h3 {
+                                    transform: translateX(-246px);
+                                    animation: fadeIn 0.5s (0 * 0.5s) + 1.7s forwards !important;
+                                }
+                                    
+                                .nodes {
+                                    animation: fadeIn 0.5s (0 * 0.5s) + 1.7s forwards !important;
+                                }
+                            }
+                        }
+                        
+                        @for $v from 2 through $itemCount + 2 {
+                            &:nth-of-type(#{$v}) {
+                                & .item_active__part {
+                                    @keyframes fadeIn {
+                                        to {opacity: 1;}
+                                    }
+                                    
+                                    h3,
+                                    .nodes {
+                                        animation: fadeIn 0.5s ($v * 0.5s) + 1.5s forwards;
+                                    }
+                                }
+                            }
+                        }
+
+                        @for $v from 1 through $itemCount - 1 {
+                            &:nth-of-type(#{$v + 2}) {
+                                @extend %killInteraction;
+                                
+                                transform: rotateY(-60deg * ($v - 1));
+                                
+                                & .item_active__part {
+                                        opacity: 0;
+                                        animation: flip 0.5s ($v * 0.5s) + 2s forwards;
+                                        backface-visibility: none;
+                                }
+                            }
+                        }
+                    }
+                    
+                    &:nth-of-type(#{$int}) {
+                        transform: translateY(calc(50vh + 100px)) translateX(-$triangleWidth / 2);
+                        animation: flash-#{$int} 0.3s linear;
+
+                        h2 {
+                            transition: opacity 0.2s 1.4s;
+                        }
+
+                        & .item_top, 
+                        & .item_bottom {
+                            animation: flashTop-#{$int} 0.3s linear;
+                        }
+                    }
+                    
+                    @for $p from 1 through 5 {
+                        &:nth-of-type(#{($n + 1) - $i + $p}) {
+                            transform: translateY(calc(-50% + #{$moveAmount})) translateX(-$triangleWidth / 2);
+                        }
+                    }
+
+                    h2 {
+                        opacity: 0;
+                    }
+                }
+            }
+
+        $item: $item + '+ input';
+        $tab: $tab + '+ div';
+    }
+}
+
+body {
+    background: $bg;
+    overflow: hidden;
+    font-family: 'Superguns';
+    letter-spacing: 1px;
+    margin: 0;
+
+    & .scanlines {
+        @extend %killInteraction;
+        
+        background-image: repeating-linear-gradient(180deg, transparent, transparent 3px, rgba(224, 167, 167, 0.03) 9px, rgba(255, 255, 255, 0.1) 9px);
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        top: 0;
+        z-index: 1;
+    }
+    
+
+    & .intro_wrap {
+        height: 100vh;
+        transition: opacity 0.2s 1.7s, left 0.4s 1.7s;
+        position: relative;
+        left: 0;
+    }
+    
+    & .intro {
+        position: absolute;
+        width: 370px;
+        left: -530px;
+        font-family: 'Nunito', sans-serif;
+        right: 0;
+        margin: auto;
+        text-align: center;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        
+        img {
+            width: 150px;    
+            margin-top: 17px;
+        }
+        
+        & .gif {
+            margin-top: 14px;
+            border: 2px solid white;
+            border-radius: 4px;
+            width: 250px;
+        }
+        
+        h1 {
+            color: #bf9a7c;
+            font-size: 16px;
+            margin: 10px 0 0;
+        }
+
+        h2 {
+            margin: 0;
+            font-size: 14px;
+            color: #51b8d8
+        }
+        
+        p {
+            color: #c8cdc4;
+            font-size: 12px;
+        }
+    }
+
+    & .ui {
+        @include traverse($itemCount);
+        
+        perspective: $globalPerspective;
+        height: 100%;
+        opacity: 0;
+        animation: fadeIn 2.5s 0.3s forwards;
+        
+        & input {
+            display: none;
+        }
+
+        &_inner {
+            @extend %absPosition;
+            
+            top: $verticalOffset;
+            left: $horizontalOffset;
+            transform: rotateY($rotationOffset);
+            transform-style: preserve-3d;
+            transition: all 2s 0.4s;
+            height: 0;
+            width: 100%;
+
+            &__item {
+                @extend %absPosition;
+
+                width: $triangleWidth;
+                height: $triangleHeight;
+                transition: all 0.6s, transform 2s 0.4s;
+                transform-style: preserve-3d;
+                transform-origin: 0% 0%;
+
+                label {
+                    position: absolute;
+                    height: 131%;
+                    width: 100%;
+                    display: block;
+                    background: none;
+                    z-index: 1;
+                    cursor: pointer;
+                    transition: background 0.6s 0s;
+                    text-align: center;
+                    color: white;
+                    text-transform: uppercase;
+
+                    span {
+                        opacity: 0;
+                        top: 9px;
+                        position: relative;
+                        transition: all 0s 0s;
+                    }
+                }
+
+                h2 {
+                    @extend %absPosition;
+                    @extend %killInteraction;
+                    
+                    right: $triangleHeight / 2;
+                    color: $text;
+                    transform: translateY(-50%) translatez(10px);
+                    transition: opacity 0.2s 0.3s;
+                    font-weight: normal;
+                    font-size: 14px;
+                    left: auto;
+                    text-transform: uppercase;
+                }
+
+                &::after {
+                    @extend %triangleSides;
+
+                    transform: rotateY(60deg);
+                    transform-origin: 0 0;
+                }
+
+                &::before {
+                    @extend %triangleSides;
+
+                    transform: rotateY(-60deg);
+                    transform-origin: 100% 0;
+                }
+
+                & .item_top {
+                    @extend %triangleTop;
+                }
+
+                & .item_bottom {
+                    @extend %triangleTop;
+
+                    transform: translateY(-$triangleAltitude + $triangleHeight) rotateX(90deg);
+                }
+                
+                
+                & .item_wrap {
+                    transform: rotatey(0deg);
+                    transform-origin: $triangleWidth 100%;
+                    transform-style: preserve-3d;
+                }
+
+                & .item_active {      
+                    transform: rotateY(30deg) translateX(-55px) translateZ(-$triangleWidth / 2);
+                    transform-origin: 100% 100%;
+                    position: absolute;
+                    transform-style: preserve-3d;
+                        
+                    &::after {
+                        display: block;
+                        content: '';
+                        width: 400px;
+                        height: 30px;
+                        transition: all 0s 0s;
+                        opacity: 0;
+                        position: absolute;
+                        top: 0px;
+                        transform: rotatex(0deg) rotatez(180deg) translateY(29px) rotateY(30deg) translateX(-748px) translateZ(-200px);
+                        transform-origin: 0% 100%;
+                    }
+                    
+                    @for $i from 1 through $itemCount {
+                        &:nth-of-type(#{$i}) {
+                            &::after {
+                                background: adjust-hue($triangleBg, -($i - 1) * $hueRotation)
+                            }
+                        }
+                    }
+                
+                    &__part {
+                        @extend %trianglePart;
+                        @extend %killInteraction;
+                        
+                        transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px);
+                        transform-origin: 100% 0;
+                        transform-style: preserve-3D;
+
+                        & .nodes {
+                            width: 20px;
+                            height: 20px;
+                            position: absolute;
+                            border: 3px solid white;
+                            opacity: 0;
+                            border-radius: 100px;
+                            top: -315px;
+                            left: -132px;
+                            transform: translateZ(1px);
+                        }
+                        
+                        h3 {
+                            @extend %killInteraction;
+                            position: absolute;
+                            top:- $triangleAltitude - 60;
+                            width: 500px;
+                            left: 0;
+                            right: 0;
+                            margin: auto;
+                            text-transform: uppercase;
+                            transform-style: preserve-3D;
+                            transform: rotateX(-20deg) rotatey(180deg) translateX(50%);
+                            color: #c39d7e;
+                            font-weight: normal;
+                            text-align: center;
+                            font-size: 28px;
+                            opacity: 0;
+                        }
+                        
+                        @keyframes flip {
+                            from {opacity: 1;transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px)}
+                            to {opacity: 1;transform: rotatex(90deg) rotatey(180deg) rotateZ(-30deg) translateX(0px) translateY(0px)}
+                        }
+                    }
+                }
+
+                @for $i from 1 through $itemCount {
+                    &:nth-of-type(#{$i}) {
+                        top: calc(50% + (#{$i - 1} * #{$triangleGap}) + (#{$triangleHeight} * #{$i - 1}));
+                        background: -webkit-linear-gradient(left, $bg 30%, adjust-hue($triangleBg, -($i - 1) * $hueRotation) 70%, $bg 100%);
+                        $c: adjust-hue($triangleBg, -($i - 1) * $hueRotation); 
+                        
+                        & .nodes {
+                            box-shadow: 40px 0px 0 -3px $c, 40px 0px 0px 0px white, 80px 0px 0 -3px $c, 
+                                80px 0px 0px 0px white, 120px 0px 0 -3px $c, 120px 0px 0px 0px white, 
+                                160px 0px 0 -3px $c, 160px 0px 0px 0px white, 200px 0px 0 -3px $c, 
+                                200px 0px 0px 0px white, 240px 0px 0 -3px $c, 240px 0px 0px 0px white, 
+                                20px 40px 0 -3px $c, 20px 40px 0px 0px white, 60px 40px 0 -3px $c, 
+                                60px 40px 0px 0px white, 100px 40px 0 -3px $c, 100px 40px 0px 0px white, 
+                                140px 40px 0 -3px $c, 140px 40px 0px 0px white, 180px 40px 0 -3px $c, 
+                                180px 40px 0px 0px white, 220px 40px 0 -3px $c, 220px 40px 0px 0px white, 
+                                40px 80px 0 -3px $c, 40px 80px 0px 0px white, 80px 80px 0 -3px $c, 80px 80px 0px 0px white, 
+                                120px 80px 0 -3px $c, 120px 80px 0px 0px white, 160px 80px 0 -3px $c, 
+                                160px 80px 0px 0px white, 200px 80px 0 -3px $c, 200px 80px 0px 0px white, 
+                                60px 120px 0 -3px $c, 60px 120px 0px 0px white, 100px 120px 0 -3px $c, 
+                                100px 120px 0px 0px white, 140px 120px 0 -3px $c, 140px 120px 0px 0px white, 
+                                180px 120px 0 -3px $c, 180px 120px 0px 0px white, 80px 160px 0 -3px $c, 
+                                80px 160px 0px 0px white, 120px 160px 0 -3px $c, 120px 160px 0px 0px white, 
+                                160px 160px 0 -3px $c, 160px 160px 0px 0px white, 100px 200px 0 -3px $c, 
+                                100px 200px 0px 0px white, 140px 200px 0 -3px $c, 140px 200px 0px 0px white, 
+                                120px 240px 0 -3px $c, 120px 240px 0px 0px white
+                        }
+
+                        @keyframes flash-#{$i} {
+                            0% {background: -webkit-linear-gradient(left, $bg 30%, #ad988e 70%, $bg 100%);}
+                            25% {background: -webkit-linear-gradient(left, $bg 30%, adjust-hue($triangleBg, -($i - 1) * $hueRotation) 70%, $bg 100%);}
+                            50% {background: -webkit-linear-gradient(left, $bg 30%, #ad988e 70%, $bg 100%);}
+                            75% {background: -webkit-linear-gradient(left, $bg 30%, adjust-hue($triangleBg, -($i - 1) * $hueRotation) 70%, $bg 100%);}
+                            100% {background: -webkit-linear-gradient(left, $bg 30%, #ad988e 70%, $bg 100%);}
+                        }
+                        
+                        @keyframes flashTop-#{$i} {
+                            0% {border-bottom: $triangleAltitude solid #ad988e; }
+                            25% {border-bottom: $triangleAltitude solid adjust-hue($triangleBg, -($i - 1) * $hueRotation); }
+                            50% {border-bottom: $triangleAltitude solid #ad988e; }
+                            75% {border-bottom: $triangleAltitude solid adjust-hue($triangleBg, -($i - 1) * $hueRotation); }
+                            100% {border-bottom: $triangleAltitude solid #ad988e; }
+                        }
+
+                        &::after,
+                        &::before {
+                            background: -webkit-linear-gradient(left, $bg 30%, adjust-hue($triangleBg, -($i - 1) * $hueRotation) 70%, $bg 100%);
+                        }
+
+                        & .item_top,
+                        & .item_bottom {
+                            border-bottom: $triangleAltitude solid adjust-hue($triangleBg, -($i - 1) * $hueRotation); 
+                        }
+                        
+                        & .item_active__part {
+                            border-top: $triangleAltitude solid adjust-hue($triangleBg, -($i - 1) * $hueRotation); 
+                        }
+
+                        &:hover {
+                            background: -webkit-linear-gradient(left, $bg 30%, #ad988e 70%, $bg 100%);
+
+                            &::after,
+                            &::before {
+                                background: -webkit-linear-gradient(left, $bg 30%, #ad988e 70%, $bg 100%);
+                            }
+
+                            & .item_top,
+                            & .item_bottom {
+                                border-bottom: $triangleAltitude solid #ad988e; 
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/CodePen_Export_WKdodx/README.markdown b/CodePen_Export_WKdodx/README.markdown
new file mode 100644
index 0000000..4ddb26a
--- /dev/null
+++ b/CodePen_Export_WKdodx/README.markdown
@@ -0,0 +1,5 @@
+# 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/rauno/pen/WKdodx](https://codepen.io/rauno/pen/WKdodx).
+
+
diff --git a/CodePen_Export_WKdodx/dist/index.html b/CodePen_Export_WKdodx/dist/index.html
new file mode 100644
index 0000000..3e2cf4d
--- /dev/null
+++ b/CodePen_Export_WKdodx/dist/index.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - A Pen by Rauno</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<header>
+  <h1>Scroll Indicator</h1>
+</header>
+
+<main>
+  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
+</main>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/CodePen_Export_WKdodx/dist/style.css b/CodePen_Export_WKdodx/dist/style.css
new file mode 100644
index 0000000..754f07a
--- /dev/null
+++ b/CodePen_Export_WKdodx/dist/style.css
@@ -0,0 +1,43 @@
+header {
+  position: fixed;
+  top: 0;
+  height: 125px;
+  width: 100%;
+  background: white;
+}
+
+header {
+  padding: 10px 10%;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  margin-top: 128px;
+}
+
+main {
+  padding: 10px 10%;
+  box-sizing: border-box;
+}
+
+@supports (height: 100vh) {
+  body {
+    background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
+    background-size: 100% calc(100% - 100vh + 129px);
+    background-repeat: no-repeat;
+  }
+
+  body:before {
+    content: '';
+    position: fixed;
+    top: 128px;
+    bottom: 0;
+    width: 100%;
+    z-index: -1;
+    background: white;
+  }
+}
\ No newline at end of file
diff --git a/CodePen_Export_WKdodx/license.txt b/CodePen_Export_WKdodx/license.txt
new file mode 100644
index 0000000..8b52d84
--- /dev/null
+++ b/CodePen_Export_WKdodx/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Rauno (https://codepen.io/rauno/pen/WKdodx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/CodePen_Export_WKdodx/src/index.html b/CodePen_Export_WKdodx/src/index.html
new file mode 100644
index 0000000..eb06fc7
--- /dev/null
+++ b/CodePen_Export_WKdodx/src/index.html
@@ -0,0 +1,142 @@
+<header>
+  <h1>Scroll Indicator</h1>
+</header>
+
+<main>
+  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Why do we use it?
+It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+
+
+Where does it come from?
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
+</main>
diff --git a/CodePen_Export_WKdodx/src/style.css b/CodePen_Export_WKdodx/src/style.css
new file mode 100644
index 0000000..754f07a
--- /dev/null
+++ b/CodePen_Export_WKdodx/src/style.css
@@ -0,0 +1,43 @@
+header {
+  position: fixed;
+  top: 0;
+  height: 125px;
+  width: 100%;
+  background: white;
+}
+
+header {
+  padding: 10px 10%;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  margin-top: 128px;
+}
+
+main {
+  padding: 10px 10%;
+  box-sizing: border-box;
+}
+
+@supports (height: 100vh) {
+  body {
+    background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
+    background-size: 100% calc(100% - 100vh + 129px);
+    background-repeat: no-repeat;
+  }
+
+  body:before {
+    content: '';
+    position: fixed;
+    top: 128px;
+    bottom: 0;
+    width: 100%;
+    z-index: -1;
+    background: white;
+  }
+}
\ No newline at end of file
diff --git a/a-css-only-carousel-slider/README.markdown b/a-css-only-carousel-slider/README.markdown
new file mode 100644
index 0000000..4e87b58
--- /dev/null
+++ b/a-css-only-carousel-slider/README.markdown
@@ -0,0 +1,17 @@
+# A CSS-only Carousel Slider
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/Schepp/pen/WNbQByE](https://codepen.io/Schepp/pen/WNbQByE).
+
+ I've recently read about and discussed CSS Scroll Snapping so often that I felt like I should build a CSS-only carousel based on it.
+
+Here are a few things to note:
+
+Accessibility is in line with all other CSS-only experiments: it can only be considered mediocre in term of semantics and visual indicators. Don't do this in production.
+
+The going forward and back is done via a combination of [CSS Scroll Snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap) together with [`scroll-behavior: smooth`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) and moving the focus through the slides via anchor links. 
+
+The nicest trick I pull off is the one for the auto-forward: 
+
+1. first I slowly offset the scroll snap points to the right, making the scroll area follow along due to being snapped to them.
+2. after having scrolled the width of a whole slide, I deactivate the snapping. The scroll area is now untied from the scroll snap points.
+3. Now I let the scroll snap points jump back to their initial positions without them "snap-dragging" the scroll area back with them
+4. Then I re-engage the snapping which now lets the scroll area snap to a different snap point 🤯 Whatever... look at the code 🙃
diff --git a/a-css-only-carousel-slider/dist/index.html b/a-css-only-carousel-slider/dist/index.html
new file mode 100644
index 0000000..3af3f92
--- /dev/null
+++ b/a-css-only-carousel-slider/dist/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>A CSS-only Carousel Slider</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>CSS-only Carousel</h1>
+
+<p>This carousel is created with HTML and CSS only. On desktop Canary it even auto-forwards, as long as it is not hovered or until it gets focus (=has been interacted with). <a href="#void">Click here</a> to move focus back out and to resume the auto-forward.</p>
+
+<section class="carousel" aria-label="Gallery">
+  <ol class="carousel__viewport">
+    <li id="carousel__slide1"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper">
+        <a href="#carousel__slide4"
+           class="carousel__prev">Go to last slide</a>
+        <a href="#carousel__slide2"
+           class="carousel__next">Go to next slide</a>
+      </div>
+    </li>
+    <li id="carousel__slide2"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide1"
+         class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide3"
+         class="carousel__next">Go to next slide</a>
+    </li>
+    <li id="carousel__slide3"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide2"
+         class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide4"
+         class="carousel__next">Go to next slide</a>
+    </li>
+    <li id="carousel__slide4"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide3"
+         class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide1"
+         class="carousel__next">Go to first slide</a>
+    </li>
+  </ol>
+  <aside class="carousel__navigation">
+    <ol class="carousel__navigation-list">
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide1"
+           class="carousel__navigation-button">Go to slide 1</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide2"
+           class="carousel__navigation-button">Go to slide 2</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide3"
+           class="carousel__navigation-button">Go to slide 3</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide4"
+           class="carousel__navigation-button">Go to slide 4</a>
+      </li>
+    </ol>
+  </aside>
+</section>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/a-css-only-carousel-slider/dist/style.css b/a-css-only-carousel-slider/dist/style.css
new file mode 100644
index 0000000..7654e63
--- /dev/null
+++ b/a-css-only-carousel-slider/dist/style.css
@@ -0,0 +1,228 @@
+@keyframes tonext {
+  75% {
+    left: 0;
+  }
+  95% {
+    left: 100%;
+  }
+  98% {
+    left: 100%;
+  }
+  99% {
+    left: 0;
+  }
+}
+
+@keyframes tostart {
+  75% {
+    left: 0;
+  }
+  95% {
+    left: -300%;
+  }
+  98% {
+    left: -300%;
+  }
+  99% {
+    left: 0;
+  }
+}
+
+@keyframes snap {
+  96% {
+    scroll-snap-align: center;
+  }
+  97% {
+    scroll-snap-align: none;
+  }
+  99% {
+    scroll-snap-align: none;
+  }
+  100% {
+    scroll-snap-align: center;
+  }
+}
+
+body {
+  max-width: 37.5rem;
+  margin: 0 auto;
+  padding: 0 1.25rem;
+  font-family: 'Lato', sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  scrollbar-color: transparent transparent; /* thumb and track color */
+  scrollbar-width: 0px;
+}
+
+*::-webkit-scrollbar {
+  width: 0;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: transparent;
+  border: none;
+}
+
+* {
+  -ms-overflow-style: none;
+}
+
+ol, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.carousel {
+  position: relative;
+  padding-top: 75%;
+  filter: drop-shadow(0 0 10px #0003);
+  perspective: 100px;
+}
+
+.carousel__viewport {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  overflow-x: scroll;
+  counter-reset: item;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+}
+
+.carousel__slide {
+  position: relative;
+  flex: 0 0 100%;
+  width: 100%;
+  background-color: #f99;
+  counter-increment: item;
+}
+
+.carousel__slide:nth-child(even) {
+  background-color: #99f;
+}
+
+.carousel__slide:before {
+  content: counter(item);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-40%,70px);
+  color: #fff;
+  font-size: 2em;
+}
+
+.carousel__snapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  scroll-snap-align: center;
+}
+
+@media (hover: hover) {
+  .carousel__snapper {
+    animation-name: tonext, snap;
+    animation-timing-function: ease;
+    animation-duration: 4s;
+    animation-iteration-count: infinite;
+  }
+
+  .carousel__slide:last-child .carousel__snapper {
+    animation-name: tostart, snap;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel__snapper {
+    animation-name: none;
+  }
+}
+
+.carousel:hover .carousel__snapper,
+.carousel:focus-within .carousel__snapper {
+  animation-name: none;
+}
+
+.carousel__navigation {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+}
+
+.carousel__navigation-list,
+.carousel__navigation-item {
+  display: inline-block;
+}
+
+.carousel__navigation-button {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: #333;
+  background-clip: content-box;
+  border: 0.25rem solid transparent;
+  border-radius: 50%;
+  font-size: 0;
+  transition: transform 0.1s;
+}
+
+.carousel::before,
+.carousel::after,
+.carousel__prev,
+.carousel__next {
+  position: absolute;
+  top: 0;
+  margin-top: 37.5%;
+  width: 4rem;
+  height: 4rem;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  font-size: 0;
+  outline: 0;
+}
+
+.carousel::before,
+.carousel__prev {
+  left: -1rem;
+}
+
+.carousel::after,
+.carousel__next {
+  right: -1rem;
+}
+
+.carousel::before,
+.carousel::after {
+  content: '';
+  z-index: 1;
+  background-color: #333;
+  background-size: 1.5rem 1.5rem;
+  background-repeat: no-repeat;
+  background-position: center center;
+  color: #fff;
+  font-size: 2.5rem;
+  line-height: 4rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+.carousel::before {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
+}
+
+.carousel::after {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
+}
\ No newline at end of file
diff --git a/a-css-only-carousel-slider/license.txt b/a-css-only-carousel-slider/license.txt
new file mode 100644
index 0000000..611eaf0
--- /dev/null
+++ b/a-css-only-carousel-slider/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2019 by Christian Schaefer (https://codepen.io/Schepp/pen/WNbQByE)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/a-css-only-carousel-slider/src/index.html b/a-css-only-carousel-slider/src/index.html
new file mode 100644
index 0000000..1061023
--- /dev/null
+++ b/a-css-only-carousel-slider/src/index.html
@@ -0,0 +1,65 @@
+<h1>CSS-only Carousel</h1>
+
+<p>This carousel is created with HTML and CSS only. On desktop Canary it even auto-forwards, as long as it is not hovered or until it gets focus (=has been interacted with). <a href="#void">Click here</a> to move focus back out and to resume the auto-forward.</p>
+
+<section class="carousel" aria-label="Gallery">
+  <ol class="carousel__viewport">
+    <li id="carousel__slide1"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper">
+        <a href="#carousel__slide4"
+           class="carousel__prev">Go to last slide</a>
+        <a href="#carousel__slide2"
+           class="carousel__next">Go to next slide</a>
+      </div>
+    </li>
+    <li id="carousel__slide2"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide1"
+         class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide3"
+         class="carousel__next">Go to next slide</a>
+    </li>
+    <li id="carousel__slide3"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide2"
+         class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide4"
+         class="carousel__next">Go to next slide</a>
+    </li>
+    <li id="carousel__slide4"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide3"
+         class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide1"
+         class="carousel__next">Go to first slide</a>
+    </li>
+  </ol>
+  <aside class="carousel__navigation">
+    <ol class="carousel__navigation-list">
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide1"
+           class="carousel__navigation-button">Go to slide 1</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide2"
+           class="carousel__navigation-button">Go to slide 2</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide3"
+           class="carousel__navigation-button">Go to slide 3</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide4"
+           class="carousel__navigation-button">Go to slide 4</a>
+      </li>
+    </ol>
+  </aside>
+</section>
\ No newline at end of file
diff --git a/a-css-only-carousel-slider/src/style.css b/a-css-only-carousel-slider/src/style.css
new file mode 100644
index 0000000..e443799
--- /dev/null
+++ b/a-css-only-carousel-slider/src/style.css
@@ -0,0 +1,228 @@
+@keyframes tonext {
+  75% {
+    left: 0;
+  }
+  95% {
+    left: 100%;
+  }
+  98% {
+    left: 100%;
+  }
+  99% {
+    left: 0;
+  }
+}
+
+@keyframes tostart {
+  75% {
+    left: 0;
+  }
+  95% {
+    left: -300%;
+  }
+  98% {
+    left: -300%;
+  }
+  99% {
+    left: 0;
+  }
+}
+
+@keyframes snap {
+  96% {
+    scroll-snap-align: center;
+  }
+  97% {
+    scroll-snap-align: none;
+  }
+  99% {
+    scroll-snap-align: none;
+  }
+  100% {
+    scroll-snap-align: center;
+  }
+}
+
+body {
+  max-width: 37.5rem;
+  margin: 0 auto;
+  padding: 0 1.25rem;
+  font-family: 'Lato', sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  scrollbar-color: transparent transparent; /* thumb and track color */
+  scrollbar-width: 0px;
+}
+
+*::-webkit-scrollbar {
+  width: 0;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: transparent;
+  border: none;
+}
+
+* {
+  -ms-overflow-style: none;
+}
+
+ol, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.carousel {
+  position: relative;
+  padding-top: 75%;
+  filter: drop-shadow(0 0 10px #0003);
+  perspective: 100px;
+}
+
+.carousel__viewport {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  overflow-x: scroll;
+  counter-reset: item;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+}
+
+.carousel__slide {
+  position: relative;
+  flex: 0 0 100%;
+  width: 100%;
+  background-color: #f99;
+  counter-increment: item;
+}
+
+.carousel__slide:nth-child(even) {
+  background-color: #99f;
+}
+
+.carousel__slide:before {
+  content: counter(item);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-40%,70px);
+  color: #fff;
+  font-size: 2em;
+}
+
+.carousel__snapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  scroll-snap-align: center;
+}
+
+@media (hover: hover) {
+  .carousel__snapper {
+    animation-name: tonext, snap;
+    animation-timing-function: ease;
+    animation-duration: 4s;
+    animation-iteration-count: infinite;
+  }
+
+  .carousel__slide:last-child .carousel__snapper {
+    animation-name: tostart, snap;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel__snapper {
+    animation-name: none;
+  }
+}
+
+.carousel:hover .carousel__snapper,
+.carousel:focus-within .carousel__snapper {
+  animation-name: none;
+}
+
+.carousel__navigation {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+}
+
+.carousel__navigation-list,
+.carousel__navigation-item {
+  display: inline-block;
+}
+
+.carousel__navigation-button {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: #333;
+  background-clip: content-box;
+  border: 0.25rem solid transparent;
+  border-radius: 50%;
+  font-size: 0;
+  transition: transform 0.1s;
+}
+
+.carousel::before,
+.carousel::after,
+.carousel__prev,
+.carousel__next {
+  position: absolute;
+  top: 0;
+  margin-top: 37.5%;
+  width: 4rem;
+  height: 4rem;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  font-size: 0;
+  outline: 0;
+}
+
+.carousel::before,
+.carousel__prev {
+  left: -1rem;
+}
+
+.carousel::after,
+.carousel__next {
+  right: -1rem;
+}
+
+.carousel::before,
+.carousel::after {
+  content: '';
+  z-index: 1;
+  background-color: #333;
+  background-size: 1.5rem 1.5rem;
+  background-repeat: no-repeat;
+  background-position: center center;
+  color: #fff;
+  font-size: 2.5rem;
+  line-height: 4rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+.carousel::before {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
+}
+
+.carousel::after {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
+}
diff --git a/a-fake-dream/README.markdown b/a-fake-dream/README.markdown
new file mode 100644
index 0000000..f0bd8f0
--- /dev/null
+++ b/a-fake-dream/README.markdown
@@ -0,0 +1,5 @@
+# A Fake Dream
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pavlovsk/pen/RwpMVOz](https://codepen.io/pavlovsk/pen/RwpMVOz).
+
+Play with frequency, wavelength, thickness and colors to get interesting results.
diff --git a/a-fake-dream/dist/index.html b/a-fake-dream/dist/index.html
new file mode 100644
index 0000000..b276d03
--- /dev/null
+++ b/a-fake-dream/dist/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - A Fake Dream</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Vollkorn:900i'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="scene">
+  <div class="canvas-container" id="canvasContainer">
+    <div class="blend center"></div>
+  </div>
+  <div class="foreground-container"></div>
+</div>
+<!-- partial -->
+  <script src='https://cdn.rawgit.com/josephg/noisejs/master/perlin.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/a-fake-dream/dist/script.js b/a-fake-dream/dist/script.js
new file mode 100644
index 0000000..3418dcb
--- /dev/null
+++ b/a-fake-dream/dist/script.js
@@ -0,0 +1,117 @@
+function getRandomWave(x, y) {
+  return noise.simplex2(x, y);
+}
+
+function adjustCanvas(canvasElement) {
+  canvasElement.width = window.innerWidth * 90 / 100;
+  canvasElement.height = window.innerWidth * 55 / 100;
+  return canvasElement;
+}
+
+window.addEventListener('resize', () => {
+  adjustCanvas(canvas);
+  reset();
+});
+
+var canvasContainer = document.getElementById('canvasContainer');
+var canvas = adjustCanvas(document.createElement('canvas'));
+var ctx = canvas.getContext('2d');
+canvasContainer.appendChild(canvas);
+canvas.addEventListener('click', reset);
+
+var noiseX, noiseY, difference, x, y, thickness, frequency, gap, wavelength, baseY;
+
+var colors = [
+'blue',
+'blue',
+'hotpink',
+'hotpink',
+'hotpink',
+'hotpink',
+'hotpink'];
+
+
+var texts = [
+'Reality',
+'Existence',
+'Universe',
+'Life',
+'Eternity'];
+
+
+function randomFrom(arr) {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+function maybeNegative(number) {
+  return Math.random() >= .5 ? number : -number;
+}
+
+function createText(content) {
+  const container = document.createElement('div');
+  container.classList.add('text-container');
+  container.id = 'text-element';
+  const child = document.createElement('p');
+  child.classList.add('text');
+  child.innerHTML = content;
+  const y = maybeNegative(Math.random() * 25);
+  child.style.setProperty('--y', `${y}deg`);
+  const z = maybeNegative(Math.random() * 25);
+  child.style.setProperty('--z', `${z}deg`);
+  container.appendChild(child);
+  return container;
+}
+
+reset();
+
+function reset() {
+  noiseX = noiseY = 0;
+  x = y = 0;
+  difference = .025;
+  thickness = 2 + Math.round(Math.random() * 1);
+  frequency = 2;
+  gap = thickness + 1 + Math.round(Math.random() * 1);
+  wavelength = 10;
+  baseY = -wavelength;
+  noise.seed(Math.random());
+  draw(null, true);
+  var textElement = document.querySelector('#text-element');
+  if (textElement) {
+    textElement.remove();
+  }
+  canvasContainer.appendChild(createText(randomFrom(texts)));
+}
+
+function draw(ts, isFirst) {
+  if (baseY < window.innerHeight + wavelength) {
+    requestAnimationFrame(draw);
+  }
+
+  if (isFirst) {
+    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+  }
+
+  x = 0;
+  baseY += gap;
+  noiseX = 0;
+  noiseY += difference;
+
+  while (x < window.innerWidth) {
+    ctx.beginPath();
+    ctx.moveTo(x, y + baseY);
+
+    x += frequency;
+
+    y = getRandomWave(
+    noiseX += .004,
+    noiseY) *
+    wavelength;
+
+    ctx.lineTo(x, y + baseY);
+    ctx.lineWidth = thickness;
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = randomFrom(colors);
+    ctx.stroke();
+  }
+
+}
\ No newline at end of file
diff --git a/a-fake-dream/dist/style.css b/a-fake-dream/dist/style.css
new file mode 100644
index 0000000..0fc4e84
--- /dev/null
+++ b/a-fake-dream/dist/style.css
@@ -0,0 +1,108 @@
+body {
+  height: 100vh;
+  background: black;
+  display: grid;
+  place-items: center;
+}
+
+.scene {
+  position: relative;
+  width: 90vw;
+  height: 55vw;
+  max-width: 1140px;
+  max-height: 704px;
+  overflow: hidden;
+}
+
+.canvas-container {
+  position: relative;
+  height: inherit;
+  max-height: inherit;
+  background: repeating-linear-gradient(hotpink 0.5%, hotpink 0.8%, blue 0.9%, blue 1.3%);
+  -webkit-animation: move 1s infinite linear;
+          animation: move 1s infinite linear;
+}
+
+canvas {
+  cursor: pointer;
+}
+
+@-webkit-keyframes move {
+  to {
+    background-position: 0% 1.66vh;
+  }
+}
+
+@keyframes move {
+  to {
+    background-position: 0% 1.66vh;
+  }
+}
+.text-container {
+  position: absolute;
+  top: 13%;
+  right: 0;
+  width: 66%;
+  height: 50%;
+  perspective: 40vmin;
+  pointer-events: none;
+}
+
+.text {
+  font-size: 15vmin;
+  color: rgba(255, 255, 255, 0.66);
+  opacity: 0;
+  transform-style: preserve-3d;
+  transform: rotateY(var(--y)) rotateZ(var(--z));
+  -webkit-animation: appear 2s 1s forwards, translate 10s infinite linear;
+          animation: appear 2s 1s forwards, translate 10s infinite linear;
+}
+
+@-webkit-keyframes appear {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes appear {
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes translate {
+  50% {
+    transform: rotateY(calc(var(--z))) rotateZ(calc(var(--y))) translateZ(3vmin);
+  }
+}
+@keyframes translate {
+  50% {
+    transform: rotateY(calc(var(--z))) rotateZ(calc(var(--y))) translateZ(3vmin);
+  }
+}
+.center {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.blend {
+  background: yellow;
+  opacity: 0.5;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}
+
+.foreground-container {
+  position: absolute;
+  bottom: 0;
+  width: inherit;
+  height: inherit;
+  max-width: inherit;
+  max-height: inherit;
+  background: url(https://assets.codepen.io/25387/reality-foreground.png) no-repeat center bottom;
+  background-size: contain;
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/a-fake-dream/license.txt b/a-fake-dream/license.txt
new file mode 100644
index 0000000..b3d5d96
--- /dev/null
+++ b/a-fake-dream/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Mustafa Enes (https://codepen.io/pavlovsk/pen/RwpMVOz)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/a-fake-dream/src/index.html b/a-fake-dream/src/index.html
new file mode 100644
index 0000000..87a4e89
--- /dev/null
+++ b/a-fake-dream/src/index.html
@@ -0,0 +1,6 @@
+<div class="scene">
+  <div class="canvas-container" id="canvasContainer">
+    <div class="blend center"></div>
+  </div>
+  <div class="foreground-container"></div>
+</div>
diff --git a/a-fake-dream/src/script.babel b/a-fake-dream/src/script.babel
new file mode 100644
index 0000000..e93bef6
--- /dev/null
+++ b/a-fake-dream/src/script.babel
@@ -0,0 +1,117 @@
+function getRandomWave(x, y) {
+  return noise.simplex2(x, y)
+}
+
+function adjustCanvas(canvasElement) {
+  canvasElement.width = window.innerWidth * 90/100
+  canvasElement.height = window.innerWidth * 55/100
+  return canvasElement
+}
+
+window.addEventListener('resize', () => {
+  adjustCanvas(canvas)
+  reset()
+})
+
+var canvasContainer = document.getElementById('canvasContainer')
+var canvas = adjustCanvas(document.createElement('canvas'))
+var ctx = canvas.getContext('2d')
+canvasContainer.appendChild(canvas)
+canvas.addEventListener('click', reset)
+
+var noiseX, noiseY, difference, x, y, thickness, frequency, gap, wavelength, baseY
+
+var colors = [
+  'blue',
+  'blue',
+  'hotpink',
+  'hotpink',
+  'hotpink',
+  'hotpink',
+  'hotpink'
+]
+
+var texts = [
+  'Reality',
+  'Existence',
+  'Universe',
+  'Life',
+  'Eternity'
+]
+
+function randomFrom(arr) {
+  return arr[Math.floor(Math.random() * arr.length)]
+}
+
+function maybeNegative(number) {
+  return Math.random() >= .5 ? number : -number
+}
+
+function createText(content) {
+  const container = document.createElement('div')
+  container.classList.add('text-container')
+  container.id = 'text-element'
+  const child = document.createElement('p')
+  child.classList.add('text')
+  child.innerHTML = content
+  const y = maybeNegative(Math.random() * 25)
+  child.style.setProperty('--y', `${y}deg`)
+  const z = maybeNegative(Math.random() * 25)
+  child.style.setProperty('--z', `${z}deg`)
+  container.appendChild(child)
+  return container
+}
+
+reset()
+
+function reset() {
+  noiseX = noiseY = 0
+  x = y = 0
+  difference = .025
+  thickness = 2 + Math.round(Math.random() * 1)
+  frequency = 2
+  gap = thickness + 1 + Math.round(Math.random() * 1)
+  wavelength = 10
+  baseY = -wavelength
+  noise.seed(Math.random())
+  draw(null, true)
+  var textElement =  document.querySelector('#text-element')
+  if (textElement) {
+    textElement.remove()
+  }
+  canvasContainer.appendChild(createText(randomFrom(texts)))
+}
+
+function draw(ts, isFirst) {
+  if (baseY < window.innerHeight + wavelength) {
+    requestAnimationFrame(draw)
+  }
+
+  if (isFirst) {
+    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
+  }
+
+  x = 0
+  baseY += gap
+  noiseX = 0
+  noiseY += difference
+
+  while (x < window.innerWidth) {
+    ctx.beginPath()
+    ctx.moveTo(x, y + baseY)
+
+    x += frequency
+
+    y = getRandomWave(
+      noiseX += .004,
+      noiseY
+    ) * wavelength
+
+    ctx.lineTo(x, y + baseY)
+    ctx.lineWidth = thickness
+    ctx.lineCap = 'round'
+    ctx.strokeStyle = randomFrom(colors)
+    ctx.stroke()
+  }
+
+}
\ No newline at end of file
diff --git a/a-fake-dream/src/style.scss b/a-fake-dream/src/style.scss
new file mode 100644
index 0000000..7de7628
--- /dev/null
+++ b/a-fake-dream/src/style.scss
@@ -0,0 +1,104 @@
+body {
+  height: 100vh;
+  background: black;
+  display: grid;
+  place-items: center;
+}
+
+.scene {
+  position: relative;
+  width: 90vw;
+  height: 55vw;
+  max-width: 1140px;
+  max-height: 704px;
+  overflow: hidden;
+}
+
+.canvas-container {
+  position: relative;
+  height: inherit;
+  max-height: inherit;
+  background: repeating-linear-gradient(
+    hotpink .5%,
+    hotpink .8%,
+    blue .9%,
+    blue 1.3%,
+  );
+  animation: move 1s infinite linear;
+}
+
+canvas {
+  cursor: pointer;
+}
+
+@keyframes move {
+  to {
+    background-position: 0% 1.66vh;
+  }
+}
+
+.text-container {
+  position: absolute;
+  top: 13%;
+  right: 0;
+  width: 66%;
+  height: 50%;
+  perspective: 40vmin;
+  pointer-events: none;
+}
+
+.text {
+  font-size: 15vmin;
+  color: rgba(white, 0.66);
+  opacity: 0;
+  transform-style: preserve-3d;
+  transform:
+    rotateY(var(--y))
+    rotateZ(var(--z));
+  animation:
+    appear 2s 1s forwards,
+    translate 10s infinite linear;
+}
+
+@keyframes appear {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes translate {
+  50% {
+    transform:
+      rotateY(calc(var(--z)))
+      rotateZ(calc(var(--y)))
+      translateZ(3vmin);
+  }
+}
+
+.center {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.blend {
+  background: yellow;
+  opacity: 0.5;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}
+
+.foreground-container {
+  position: absolute;
+  bottom: 0;
+  width: inherit;
+  height: inherit;
+  max-width: inherit;
+  max-height: inherit;
+  background: url(https://assets.codepen.io/25387/reality-foreground.png) no-repeat center bottom;
+  background-size: contain;
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/a-generative-svg-using-a-tetradic-color-pallette/README.markdown b/a-generative-svg-using-a-tetradic-color-pallette/README.markdown
new file mode 100644
index 0000000..b25ffbf
--- /dev/null
+++ b/a-generative-svg-using-a-tetradic-color-pallette/README.markdown
@@ -0,0 +1,5 @@
+# A generative SVG using a tetradic color pallette
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/nszafraniec/pen/mdOZMbO](https://codepen.io/nszafraniec/pen/mdOZMbO).
+
+A generative illustration using plain SVG and plain JS. It weirdly reminds me of TV test cards.
diff --git a/a-generative-svg-using-a-tetradic-color-pallette/dist/index.html b/a-generative-svg-using-a-tetradic-color-pallette/dist/index.html
new file mode 100644
index 0000000..15f7ff5
--- /dev/null
+++ b/a-generative-svg-using-a-tetradic-color-pallette/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - A generative SVG using a tetradic color pallette</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg class="scene" id="illustration" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" aria-labelledby="svgTitle svgDesc" role="img">
+  <title id="svgTitle">A generative illustration</title>
+  <desc id="svgDesc">Click on the image to redraw it!</desc>
+</svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/a-generative-svg-using-a-tetradic-color-pallette/dist/script.js b/a-generative-svg-using-a-tetradic-color-pallette/dist/script.js
new file mode 100644
index 0000000..4458bea
--- /dev/null
+++ b/a-generative-svg-using-a-tetradic-color-pallette/dist/script.js
@@ -0,0 +1,197 @@
+const settings = {
+  colors: {
+    decor: ["#432ee6", "#e62e74", "#d0e62e", "#2ee69f"],
+    main: ["#dddddd", "#222222"]
+  },
+  decor: {
+    count: 25,
+    minWidth: 1,
+    maxWidth: 2,
+    minHeight: 3,
+    maxHeight: 12
+  },
+  sizes: {
+    columns: 35,
+    rows: 50,
+    maxColumnPart: 4
+  }
+};
+
+const utils = {
+  getRandFromRange: function (min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  },
+  count: function (array) {
+    return array.length
+      ? array.reduce(function (previous, current) {
+          return previous + current;
+        })
+      : 0;
+  }
+};
+
+class Illustration {
+  baseHeight;
+  baseWidth;
+  columns;
+  columnCount;
+  rowCount;
+  maxColumnPart;
+  decor;
+  colors;
+  screen = { width: 0, height: 0 };
+  svg;
+
+  constructor(selector, colors, decor, sizes) {
+    this.screen = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+
+    this.setSVG(selector);
+
+    this.columns = [];
+
+    this.decor = decor;
+    this.colors = colors;
+
+    this.columnCount = sizes.columns;
+    this.rowCount = sizes.rows;
+    this.maxColumnPart = sizes.maxColumnPart;
+
+    this.baseHeight = this.screen.height / this.rowCount;
+    this.baseWidth = this.screen.width / this.columnCount;
+
+    this.draw();
+  }
+
+  setSVG(selector) {
+    this.svg = document.querySelector(selector);
+    this.svg.addEventListener("click", this.draw.bind(this));
+    this.svg.setAttribute(
+      "viewBox",
+      `0 0 ${this.screen.width} ${this.screen.height}`
+    );
+  }
+
+  reset() {
+    this.columns = [];
+    this.svg.innerHTML = "";
+  }
+
+  setColumns() {
+    for (let i = 0; i < this.columnCount; ) {
+      const maxSize = this.columnCount - i;
+      const size = utils.getRandFromRange(
+        1,
+        maxSize < this.maxColumnPart ? maxSize : this.maxColumnPart
+      );
+      this.columns.push(size);
+      i += size;
+    }
+  }
+
+  draw() {
+    this.reset();
+    this.setColumns();
+    this.drawBase();
+    this.drawDecor();
+  }
+
+  drawBase() {
+    for (let i = 0; i < this.rowCount; i++) {
+      let x = 0;
+
+      for (let j = 0; j < this.columns.length; j++) {
+        const width = this.baseWidth * this.columns[j];
+        const rect = new Rect(
+          x,
+          i * this.baseHeight,
+          width,
+          this.baseHeight,
+          this.colors.main[(i + j) % 2]
+        );
+        x += width;
+
+        this.svg.appendChild(rect.getDOMElement());
+      }
+    }
+  }
+
+  drawDecor() {
+    for (let i = 0; i < this.decor.count; i++) {
+      const x = utils.getRandFromRange(0, this.columns.length - 1);
+      const y = utils.getRandFromRange(0, this.rowCount - 1);
+
+      const height = utils.getRandFromRange(
+        this.decor.minHeight,
+        this.rowCount - y > this.decor.maxHeight
+          ? this.decor.maxHeight
+          : this.rowCount - y
+      );
+      const width = utils.getRandFromRange(
+        this.decor.minWidth,
+        height > this.decor.maxWidth + 1
+          ? this.decor.minWidth
+          : this.decor.maxWidth
+      );
+
+      const columnOffset = utils.count(this.columns.slice(0, x));
+      const columnSpan = utils.count(this.columns.slice(x, x + width));
+
+      const rect = new Rect(
+        columnOffset * this.baseWidth,
+        y * this.baseHeight,
+        this.baseWidth * columnSpan,
+        this.baseHeight * height,
+        this.colors.decor[
+          utils.getRandFromRange(0, this.colors.decor.length - 1)
+        ]
+      );
+
+      this.svg.appendChild(rect.getDOMElement());
+    }
+  }
+}
+
+class Rect {
+  x;
+  y;
+  width;
+  height;
+  fill;
+  element;
+
+  constructor(x, y, width, height, fill) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.fill = fill;
+
+    this.setDOMElement();
+  }
+
+  getDOMElement() {
+    return this.element;
+  }
+
+  setDOMElement(x, y, width, height, fill) {
+    this.element = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect"
+    );
+    this.element.setAttribute("x", x ? x : this.x);
+    this.element.setAttribute("y", y ? y : this.y);
+    this.element.setAttribute("width", width ? width : this.width);
+    this.element.setAttribute("height", height ? height : this.height);
+    this.element.style.fill = fill ? fill : this.fill;
+  }
+}
+
+const illustration = new Illustration(
+  "#illustration",
+  settings.colors,
+  settings.decor,
+  settings.sizes
+);
\ No newline at end of file
diff --git a/a-generative-svg-using-a-tetradic-color-pallette/dist/style.css b/a-generative-svg-using-a-tetradic-color-pallette/dist/style.css
new file mode 100644
index 0000000..5b2e970
--- /dev/null
+++ b/a-generative-svg-using-a-tetradic-color-pallette/dist/style.css
@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.scene {
+  width: 100vw;
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/a-generative-svg-using-a-tetradic-color-pallette/license.txt b/a-generative-svg-using-a-tetradic-color-pallette/license.txt
new file mode 100644
index 0000000..35745bb
--- /dev/null
+++ b/a-generative-svg-using-a-tetradic-color-pallette/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Natalia 🤟 (https://codepen.io/nszafraniec/pen/mdOZMbO)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/a-generative-svg-using-a-tetradic-color-pallette/src/index.html b/a-generative-svg-using-a-tetradic-color-pallette/src/index.html
new file mode 100644
index 0000000..3545d85
--- /dev/null
+++ b/a-generative-svg-using-a-tetradic-color-pallette/src/index.html
@@ -0,0 +1,4 @@
+<svg class="scene" id="illustration" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" aria-labelledby="svgTitle svgDesc" role="img">
+  <title id="svgTitle">A generative illustration</title>
+  <desc id="svgDesc">Click on the image to redraw it!</desc>
+</svg>
\ No newline at end of file
diff --git a/a-generative-svg-using-a-tetradic-color-pallette/src/script.js b/a-generative-svg-using-a-tetradic-color-pallette/src/script.js
new file mode 100644
index 0000000..9911ec9
--- /dev/null
+++ b/a-generative-svg-using-a-tetradic-color-pallette/src/script.js
@@ -0,0 +1,197 @@
+const settings = {
+  colors: {
+    decor: ["#432ee6", "#e62e74", "#d0e62e", "#2ee69f"],
+    main: ["#dddddd", "#222222"]
+  },
+  decor: {
+    count: 25,
+    minWidth: 1,
+    maxWidth: 2,
+    minHeight: 3,
+    maxHeight: 12
+  },
+  sizes: {
+    columns: 35,
+    rows: 50,
+    maxColumnPart: 4
+  }
+};
+
+const utils = {
+  getRandFromRange: function (min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  },
+  count: function (array) {
+    return array.length
+      ? array.reduce(function (previous, current) {
+          return previous + current;
+        })
+      : 0;
+  }
+};
+
+class Illustration {
+  baseHeight;
+  baseWidth;
+  columns;
+  columnCount;
+  rowCount;
+  maxColumnPart;
+  decor;
+  colors;
+  screen = { width: 0, height: 0 };
+  svg;
+
+  constructor(selector, colors, decor, sizes) {
+    this.screen = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+
+    this.setSVG(selector);
+
+    this.columns = [];
+
+    this.decor = decor;
+    this.colors = colors;
+
+    this.columnCount = sizes.columns;
+    this.rowCount = sizes.rows;
+    this.maxColumnPart = sizes.maxColumnPart;
+
+    this.baseHeight = this.screen.height / this.rowCount;
+    this.baseWidth = this.screen.width / this.columnCount;
+
+    this.draw();
+  }
+
+  setSVG(selector) {
+    this.svg = document.querySelector(selector);
+    this.svg.addEventListener("click", this.draw.bind(this));
+    this.svg.setAttribute(
+      "viewBox",
+      `0 0 ${this.screen.width} ${this.screen.height}`
+    );
+  }
+
+  reset() {
+    this.columns = [];
+    this.svg.innerHTML = "";
+  }
+
+  setColumns() {
+    for (let i = 0; i < this.columnCount; ) {
+      const maxSize = this.columnCount - i;
+      const size = utils.getRandFromRange(
+        1,
+        maxSize < this.maxColumnPart ? maxSize : this.maxColumnPart
+      );
+      this.columns.push(size);
+      i += size;
+    }
+  }
+
+  draw() {
+    this.reset();
+    this.setColumns();
+    this.drawBase();
+    this.drawDecor();
+  }
+
+  drawBase() {
+    for (let i = 0; i < this.rowCount; i++) {
+      let x = 0;
+
+      for (let j = 0; j < this.columns.length; j++) {
+        const width = this.baseWidth * this.columns[j];
+        const rect = new Rect(
+          x,
+          i * this.baseHeight,
+          width,
+          this.baseHeight,
+          this.colors.main[(i + j) % 2]
+        );
+        x += width;
+
+        this.svg.appendChild(rect.getDOMElement());
+      }
+    }
+  }
+
+  drawDecor() {
+    for (let i = 0; i < this.decor.count; i++) {
+      const x = utils.getRandFromRange(0, this.columns.length - 1);
+      const y = utils.getRandFromRange(0, this.rowCount - 1);
+
+      const height = utils.getRandFromRange(
+        this.decor.minHeight,
+        this.rowCount - y > this.decor.maxHeight
+          ? this.decor.maxHeight
+          : this.rowCount - y
+      );
+      const width = utils.getRandFromRange(
+        this.decor.minWidth,
+        height > this.decor.maxWidth + 1
+          ? this.decor.minWidth
+          : this.decor.maxWidth
+      );
+
+      const columnOffset = utils.count(this.columns.slice(0, x));
+      const columnSpan = utils.count(this.columns.slice(x, x + width));
+
+      const rect = new Rect(
+        columnOffset * this.baseWidth,
+        y * this.baseHeight,
+        this.baseWidth * columnSpan,
+        this.baseHeight * height,
+        this.colors.decor[
+          utils.getRandFromRange(0, this.colors.decor.length - 1)
+        ]
+      );
+
+      this.svg.appendChild(rect.getDOMElement());
+    }
+  }
+}
+
+class Rect {
+  x;
+  y;
+  width;
+  height;
+  fill;
+  element;
+
+  constructor(x, y, width, height, fill) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.fill = fill;
+
+    this.setDOMElement();
+  }
+
+  getDOMElement() {
+    return this.element;
+  }
+
+  setDOMElement(x, y, width, height, fill) {
+    this.element = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect"
+    );
+    this.element.setAttribute("x", x ? x : this.x);
+    this.element.setAttribute("y", y ? y : this.y);
+    this.element.setAttribute("width", width ? width : this.width);
+    this.element.setAttribute("height", height ? height : this.height);
+    this.element.style.fill = fill ? fill : this.fill;
+  }
+}
+
+const illustration = new Illustration(
+  "#illustration",
+  settings.colors,
+  settings.decor,
+  settings.sizes
+);
diff --git a/a-generative-svg-using-a-tetradic-color-pallette/src/style.css b/a-generative-svg-using-a-tetradic-color-pallette/src/style.css
new file mode 100644
index 0000000..e532da1
--- /dev/null
+++ b/a-generative-svg-using-a-tetradic-color-pallette/src/style.css
@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.scene {
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/a-pure-css-gameyou-must-build-a-lighthouse/README.markdown b/a-pure-css-gameyou-must-build-a-lighthouse/README.markdown
new file mode 100644
index 0000000..b98718a
--- /dev/null
+++ b/a-pure-css-gameyou-must-build-a-lighthouse/README.markdown
@@ -0,0 +1,17 @@
+# A Pure CSS Game - You Must Build a Lighthouse.
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ivorjetski/pen/OJXbvdL](https://codepen.io/ivorjetski/pen/OJXbvdL).
+
+100% CSS. No artificial colours or ingredients.
+
+First person to screenshot a lighthouse wins! 
+
+Find me @ 
+https://twitter.com/ivorjetski
+https://www.instagram.com/benevansdesign
+https://www.youtube.com/c/BenEvanski
+https://www.tinydesign.co.uk
+
+This version is slightly cut down to fit in CodePen which still struggles a little. So there are a few bugs... I guess I need to refactor the code a little :) 
+Here's the full version: https://www.tinydesign.co.uk/css-town/
+
diff --git a/a-pure-css-gameyou-must-build-a-lighthouse/dist/index.html b/a-pure-css-gameyou-must-build-a-lighthouse/dist/index.html
new file mode 100644
index 0000000..033b7fc
--- /dev/null
+++ b/a-pure-css-gameyou-must-build-a-lighthouse/dist/index.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - A Pure CSS Game - You Must Build a Lighthouse.</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input type="checkbox" id="gfxmenu" />
+    <input type="radio" name="gfx" id="good" checked />
+    <input type="radio" name="gfx" id="poor" />
+    <x id="graphics">
+      <label class="gfx" for="gfxmenu">Graphics Quality</label>
+      <label class="gfx" for="good">Very Pretty</label>
+      <label class="gfx" for="poor">Quite Pretty</label>
+    </x>
+
+    <sky><time>
+        <sun></sun>
+      </time></sky>
+    <stars><i></i></stars>
+
+    <sunset></sunset>
+    <colour>
+
+      <input type="radio" name="r23" id="cb23" class="hs house row4 col1" />
+      <input type="radio" name="r23" id="cb23s" class="hs shed row4 col1" />
+      <input type="radio" name="r24" id="cb24" class="hs house row4 col2" />
+      <input type="radio" name="r24" id="cb24s" class="hs shed row4 col2" />
+      <input type="radio" name="r25" id="cb25" class="hs house row4 col3" />
+      <input type="radio" name="r23" id="cb25s" class="hs shed row4 col3" />
+      <input type="radio" name="r26" id="cb26" class="hs house row4 col4" />
+      <input type="radio" name="r26" id="cb26s" class="hs shed row4 col4" />
+      <br />
+      <input type="radio" name="r19" id="cb19" class="hs house row3 col1" />
+      <input type="radio" name="r19" id="cb19s" class="hs shed row3 col1" />
+      <input type="radio" name="r20" id="cb20" class="hs house row3 col2" />
+      <input type="radio" name="r20" id="cb20s" class="hs shed row3 col2" />
+      <input type="radio" name="r21" id="cb21" class="hs house row3 col3" />
+      <input type="radio" name="r21" id="cb21s" class="hs shed row3 col3" />
+      <input type="radio" name="r22" id="cb22" class="hs house row3 col4" />
+      <input type="radio" name="r22" id="cb22s" class="hs shed row3 col4" />
+      <br />
+      <input type="radio" name="r15" id="cb15" class="hs house row2 col1" />
+      <input type="radio" name="r15" id="cb15s" class="hs shed row2 col1" />
+      <input type="radio" name="r16" id="cb16" class="hs house row2 col2" />
+      <input type="radio" name="r16" id="cb16s" class="hs shed row2 col2" />
+      <input type="radio" name="r17" id="cb17" class="hs house row2 col3" />
+      <input type="radio" name="r17" id="cb17s" class="hs shed row2 col3" checked />
+      <input type="radio" name="r18" id="cb18" class="hs house row2 col4" />
+      <input type="radio" name="r18" id="cb18s" class="hs shed row2 col4" />
+      <br />
+      <input type="radio" name="r11" id="cb11" class="hs house row1 col1" />
+      <input type="radio" name="r11" id="cb11s" class="hs shed row1 col1" />
+      <input type="radio" name="r12" id="cb12" class="hs house row1 col2" />
+      <input type="radio" name="r12" id="cb12s" class="hs shed row1 col2" />
+      <input type="radio" name="r13" id="cb13" class="hs house row1 col3" />
+      <input type="radio" name="r13" id="cb13s" class="hs shed row1 col3" />
+      <input type="radio" name="r14" id="cb14" class="hs house row1 col4" />
+      <input type="radio" name="r14" id="cb14s" class="hs shed row1 col4" />
+      <br />
+
+      <input type="radio" name="r23" id="ncb23" class="row4 col1" title="ncb23" />
+      <input type="radio" name="r24" id="ncb24" class="row4 col2" title="ncb24" />
+      <input type="radio" name="r25" id="ncb25" class="row4 col3" title="ncb25" />
+      <input type="radio" name="r26" id="ncb26" class="row4 col4" title="ncb26" />
+      <br />
+      <input type="radio" name="r19" id="ncb19" class="row3 col1" title="ncb19" />
+      <input type="radio" name="r20" id="ncb20" class="row3 col2" title="ncb20" />
+      <input type="radio" name="r21" id="ncb21" class="row3 col3" title="ncb21" />
+      <input type="radio" name="r22" id="ncb22" class="row3 col4" title="ncb22" />
+      <br />
+      <input type="radio" name="r15" id="ncb15" class="row2 col1" title="ncb15" />
+      <input type="radio" name="r16" id="ncb16" class="row2 col2" title="ncb16" />
+      <input type="radio" name="r17" id="ncb17" class="row2 col3" title="ncb17" />
+      <input type="radio" name="r18" id="ncb18" class="row2 col4" title="ncb18" />
+      <br />
+      <input type="radio" name="r11" id="ncb11" class="row1 col1" title="ncb11" />
+      <input type="radio" name="r12" id="ncb12" class="row1 col2" title="ncb12" />
+      <input type="radio" name="r13" id="ncb13" class="row1 col3" title="ncb13" />
+      <input type="radio" name="r14" id="ncb14" class="row1 col4" title="ncb14" />
+      <br />
+      <input type="radio" id="done" />
+
+      <div class="lh">
+        <light></light>
+      </div>
+      <div>
+        <div class="main">
+          <island></island>
+
+          <tree><i></i><i></i></tree>
+          <tree><i></i><i></i></tree>
+
+          <shed>
+            <label class="row1 col1 shedlabel" for="ncb11" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row1 col2 shedlabel" for="ncb12" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row1 col3 shedlabel" for="ncb13" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row1 col4 shedlabel" for="ncb14" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+
+            <label class="row2 col1 shedlabel" for="ncb15" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row2 col2 shedlabel" for="ncb16" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row2 col3 shedlabel" for="ncb17" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row2 col4 shedlabel" for="ncb18" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+
+            <label class="row3 col1 shedlabel" for="ncb19" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row3 col2 shedlabel" for="ncb20" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row3 col3 shedlabel" for="ncb21" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row3 col4 shedlabel" for="ncb22" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+          </shed>
+
+          <house>
+
+            <label class="row1 col1 houselabel" for="ncb11" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row1 col2 houselabel" for="ncb12" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row1 col3 houselabel" for="ncb13" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row1 col4 houselabel" for="ncb14" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+
+            <label class="row2 col1 houselabel" for="ncb15" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row2 col2 houselabel" for="ncb16" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row2 col3 houselabel" for="ncb17" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row2 col4 houselabel" for="ncb18" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+
+            <label class="row3 col1 houselabel" for="ncb19" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row3 col2 houselabel" for="ncb20" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row3 col3 houselabel" for="ncb21" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row3 col4 houselabel" for="ncb22" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+
+            <label class="row4 col1 houselabel" for="ncb23" title="Tap to build"><i></i><i></i><i></i><i></i></label>
+            <label class="row4 col2 houselabel" for="ncb24" title="Tap to build"><i></i><i></i><i></i><i></i></label>
+            <label class="row4 col3 houselabel" for="ncb25" title="Tap to build"><i></i><i></i><i></i><i></i></label>
+            <label class="row4 col4 houselabel" for="ncb26" title="Tap to build"><i></i><i></i><i></i><i></i></label>
+          </house>
+
+          <hbtn>
+
+            <label class="row1 col1 buttons" for="cb11" title="Tap to build"></label>
+            <label class="row1 col2 buttons" for="cb12" title="Tap to build"></label>
+            <label class="row1 col3 buttons" for="cb13" title="Tap to build"></label>
+            <label class="row1 col4 buttons" for="cb14" title="Tap to build"></label>
+
+            <label class="row2 col1 buttons" for="cb15" title="Tap to build"></label>
+            <label class="row2 col2 buttons" for="cb16" title="Tap to build"></label>
+            <label class="row2 col3 buttons" for="cb17" title="Tap to build"></label>
+            <label class="row2 col4 buttons" for="cb18" title="Tap to build"></label>
+
+            <label class="row3 col1 buttons" for="cb19" title="Tap to build"></label>
+            <label class="row3 col2 buttons" for="cb20" title="Tap to build"></label>
+            <label class="row3 col3 buttons" for="cb21" title="Tap to build"></label>
+            <label class="row3 col4 buttons" for="cb22" title="Tap to build"></label>
+
+            <label class="row4 col1 buttons" for="cb23" title="Tap to build"></label>
+            <label class="row4 col2 buttons" for="cb24" title="Tap to build"></label>
+            <label class="row4 col3 buttons" for="cb25" title="Tap to build"></label>
+            <label class="row4 col4 buttons" for="cb26" title="Tap to build"></label>
+          </hbtn>
+
+          <sbtn>
+
+            <label class="row1 col1 buttons" for="cb11s" title="Tap to build"></label>
+            <label class="row1 col2 buttons" for="cb12s" title="Tap to build"></label>
+            <label class="row1 col3 buttons" for="cb13s" title="Tap to build"></label>
+            <label class="row1 col4 buttons" for="cb14s" title="Tap to build"></label>
+
+            <label class="row2 col1 buttons" for="cb15s" title="Tap to build"></label>
+            <label class="row2 col2 buttons" for="cb16s" title="Tap to build"></label>
+            <label class="row2 col3 buttons" for="cb17s" title="Tap to build"></label>
+            <label class="row2 col4 buttons" for="cb18s" title="Tap to build"></label>
+
+            <label class="row3 col1 buttons" for="cb19s" title="Tap to build"></label>
+            <label class="row3 col2 buttons" for="cb20s" title="Tap to build"></label>
+            <label class="row3 col3 buttons" for="cb21s" title="Tap to build"></label>
+            <label class="row3 col4 buttons" for="cb22s" title="Tap to build"></label>
+          </sbtn>
+          <grass></grass>
+        </div>
+      </div>
+      <water><i></i></water>
+
+      <div class="lh">
+        <lens></lens>
+      </div>
+
+      <text>
+        <welldone>
+          <label for="done">✕</label>
+          <p>NICE ONE!</p>
+          <p>You built a lighthouse before nightfall!</p>
+          <p>The ships and islanders are safe!</p>
+        </welldone>
+      </text>
+      <text>
+        <gameover>
+          <label for="done">✕</label>
+          <p>GAME OVER!</p>
+          <p>I'm afraid I have some very bad news...</p>
+          <p>A ship has crashed into your beautiful island.</p>
+          <p>Everybody is dead!</p>
+          <p>Soz! You should build a lighthouse.</p>
+          <a href="" title="Try Again">Try Again</a>
+        </gameover>
+      </text>
+    </colour>
+    <div class="ss">
+      <lens></lens>
+    </div>
+    <sig><i></i></sig>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/a-pure-css-gameyou-must-build-a-lighthouse/dist/script.js b/a-pure-css-gameyou-must-build-a-lighthouse/dist/script.js
new file mode 100644
index 0000000..dde3155
--- /dev/null
+++ b/a-pure-css-gameyou-must-build-a-lighthouse/dist/script.js
@@ -0,0 +1,5 @@
+// 100% CSS. No artificial colours or ingredients.
+
+// First person to screenshot a lighthouse wins!
+
+// Your time starts now...
\ No newline at end of file
diff --git a/a-pure-css-gameyou-must-build-a-lighthouse/dist/style.css b/a-pure-css-gameyou-must-build-a-lighthouse/dist/style.css
new file mode 100644
index 0000000..0ac4312
--- /dev/null
+++ b/a-pure-css-gameyou-must-build-a-lighthouse/dist/style.css
@@ -0,0 +1,49364 @@
+@charset "UTF-8";
+.house.row3:checked ~ div,
+.shed.row3:checked ~ div {
+  filter: hue-rotate(-20deg);
+}
+
+.house.row2:checked ~ div,
+.shed.row2:checked ~ div {
+  filter: hue-rotate(-35deg);
+}
+
+.house.row1:checked ~ div,
+.shed.row1:checked ~ div {
+  filter: hue-rotate(-50deg);
+}
+
+html {
+  font-size: 0.97vh;
+  width: 100%;
+  height: 100%;
+  background: #f3cece;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(rgba(96, 139, 136, 0.5), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
+  box-shadow: inset 0 0 5rem 0 #252529;
+}
+body,
+body *,
+body *:before,
+body *:after {
+  display: block;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  position: absolute;
+  content: "";
+}
+
+div,
+house,
+shed,
+hbtn,
+sbtn {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 50rem;
+  height: 50rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+div label,
+house label,
+shed label,
+hbtn label,
+sbtn label {
+  width: calc(50rem / 4);
+  height: calc(50rem / 4);
+  position: relative;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  display: inline;
+  cursor: pointer;
+  box-shadow: 0 0 0 2rem rgba(255, 255, 255, 0);
+}
+div label *,
+div label *:before,
+div label *:after,
+house label *,
+house label *:before,
+house label *:after,
+shed label *,
+shed label *:before,
+shed label *:after,
+hbtn label *,
+hbtn label *:before,
+hbtn label *:after,
+sbtn label *,
+sbtn label *:before,
+sbtn label *:after {
+  transform: translate3d(0, 0, 0);
+  z-index: 1;
+  left: 0;
+  top: 0;
+  background: none;
+  border: none;
+  box-shadow: none;
+  pointer-events: none;
+}
+div label > i:nth-of-type(1):before, div label > i:nth-of-type(1):after,
+house label > i:nth-of-type(1):before,
+house label > i:nth-of-type(1):after,
+shed label > i:nth-of-type(1):before,
+shed label > i:nth-of-type(1):after,
+hbtn label > i:nth-of-type(1):before,
+hbtn label > i:nth-of-type(1):after,
+sbtn label > i:nth-of-type(1):before,
+sbtn label > i:nth-of-type(1):after {
+  filter: blur(0.5rem);
+  border: 1rem solid rgba(111, 111, 122, 0.75);
+  width: 5rem;
+  height: 5rem;
+  background: #6f6f7a;
+  opacity: 0;
+  border-radius: 50%;
+  box-shadow: 2rem -1.5rem 0 1rem rgba(111, 111, 122, 0.75), 3rem -2rem 0 1.5rem rgba(111, 111, 122, 0.5);
+}
+
+colour {
+  width: 100%;
+  height: 100%;
+}
+colour input,
+colour br {
+  position: relative;
+  display: inline-block;
+  opacity: 0.2;
+  top: 1rem;
+  left: 1rem;
+  transform: scale(0.75);
+  margin: -0.2rem;
+}
+@media (max-width: 900px) {
+  colour input,
+  colour br {
+    display: none;
+  }
+}
+colour input:checked {
+  opacity: 1;
+}
+colour br {
+  display: block;
+}
+
+input {
+  display: none;
+}
+
+div.main {
+  -webkit-box-reflect: below 4rem;
+}
+
+div.ss {
+  pointer-events: none;
+}
+
+sbtn {
+  height: calc(50rem - (50rem / 4));
+  bottom: auto;
+}
+sbtn label {
+  border: solid 1px rgba(116, 116, 116, 0.1);
+}
+sbtn label:nth-of-type(1) {
+  border-radius: 3rem 0 0 0;
+}
+sbtn label:nth-of-type(4) {
+  border-radius: 0 3rem 0 0;
+}
+sbtn label:hover {
+  border-color: #555;
+}
+
+hbtn label:nth-of-type(n + 12) {
+  border: solid 1px rgba(116, 116, 116, 0.1);
+}
+hbtn label:nth-of-type(n + 12):hover {
+  border-color: #555;
+}
+
+@keyframes smoke {
+  0% {
+    transform: scale(0.2) translate3d(0, 0, 0) rotate(-15deg);
+    opacity: 0.075;
+  }
+  50% {
+    transform: scale(1) translate3d(2rem, -4rem, 0) rotate(0);
+    opacity: 0.15;
+  }
+  100% {
+    transform: scale(2) translate3d(5rem, -5rem, 0) rotate(10deg);
+    opacity: 0;
+  }
+}
+island {
+  position: absolute;
+  top: 76rem;
+  top: 49.25rem;
+  left: -50%;
+  right: -50%;
+  margin: auto;
+  width: 80rem;
+  height: 5rem;
+  background: #bca52f;
+  border-radius: 55% 55% 45% 45%;
+}
+
+grass {
+  position: absolute;
+  z-index: 500;
+  top: 76rem;
+  top: 49.25rem;
+  left: -50%;
+  right: -50%;
+  margin: auto;
+  width: 80rem;
+  height: 5rem;
+  -webkit-box-reflect: below -5rem;
+  transform: skewX(0);
+}
+grass:after, grass:before {
+  top: 0.75rem;
+  left: 0.6rem;
+  z-index: 100;
+  width: 0.5rem;
+  height: 1.75rem;
+  transform: skewY(60deg);
+  background: #bca52f;
+  box-shadow: 1rem -1.6rem 0 #bca52f, 2.1rem -3.6rem 0 #bca52f, 2.9rem -4.8rem 0 #bca52f, 4rem -7rem 0 #bca52f;
+  filter: drop-shadow(5rem -8.3rem 0 #bca52f) drop-shadow(10rem -17.3rem 0 #bca52f) drop-shadow(20rem -34.5rem 0 #bca52f) drop-shadow(40rem -69rem 0 #bca52f);
+}
+grass:before {
+  transform: skewY(-60deg);
+  box-shadow: 1rem 1.6rem 0 #bca52f, 2.1rem 3.6rem 0 #bca52f, 2.9rem 4.8rem 0 #bca52f, 4rem 7rem 0 #bca52f;
+  filter: drop-shadow(5rem 8.3rem 0 #bca52f) drop-shadow(10rem 17.3rem 0 #bca52f) drop-shadow(20rem 34.5rem 0 #bca52f) drop-shadow(40rem 69rem 0 #bca52f);
+  left: 0;
+  top: 1.5rem;
+}
+
+@keyframes grass {
+  100% {
+    transform: skewX(5deg);
+  }
+}
+input:focus ~ div > div {
+  animation: thud 0.1s linear;
+}
+
+@keyframes thud {
+  0% {
+    transform: translate3d(0, 1rem, 0);
+  }
+  60% {
+    transform: translate3d(0, -0.5rem, 0);
+  }
+  80% {
+    transform: translate3d(0, 0.25rem, 0);
+  }
+}
+sig {
+  z-index: 500;
+  opacity: 0.2;
+  font-size: 0.5rem;
+  color: #000;
+  width: 10em;
+  top: auto;
+  left: auto;
+  bottom: 1em;
+  right: 1em;
+  transform: skewX(10deg) scaleY(0.45) rotate(2deg);
+}
+sig,
+sig * {
+  height: 9.25em;
+  overflow: hidden;
+  border-radius: 0.5em;
+}
+sig:before,
+sig *:before {
+  width: 5em;
+  height: 5em;
+  background: currentColor;
+  transform: translate3d(-2.5em, 0, 0) rotate(-45deg);
+  box-shadow: -3em 3em 0 0 currentColor;
+  border-radius: 0.5em 2em 0.5em 2em;
+}
+sig * {
+  width: 5em;
+  transform: translate3d(3.75em, 0, 0) scaleY(0.95);
+  display: block !important;
+}
+sig *:before {
+  transform: translate3d(-3em, -2em, 0) rotate(-45deg);
+  box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
+  border-radius: 0.5em;
+}
+
+text {
+  width: 95%;
+  max-width: 70rem;
+  bottom: 25%;
+  color: #e7b39d;
+  right: 0;
+  margin: auto;
+  height: 1rem;
+  font-size: 2.5rem;
+  text-align: center;
+  font-family: Telefon, Sans-Serif;
+  z-index: -1;
+  transform: scale(0);
+  font-weight: 100;
+  letter-spacing: 0.1rem;
+  opacity: 0;
+}
+text welldone,
+text gameover {
+  box-shadow: 0 0 5rem #ff7700, inset 0 0 0 0.5rem #fff;
+  background: rgba(32, 17, 42, 0.95);
+  padding: 5rem;
+  border-radius: 5rem;
+  border: 1rem solid #20112a;
+}
+text welldone {
+  display: none;
+}
+text * {
+  position: static;
+}
+text p:nth-of-type(1) {
+  font-size: 4rem;
+}
+text p:nth-of-type(odd) {
+  color: #bc2f60;
+}
+text label {
+  position: absolute;
+  left: auto;
+  right: 3rem;
+  top: 3rem;
+  color: #bc2f60;
+  padding: 2rem;
+  border-radius: 2rem;
+  box-shadow: 0 0 1rem rgba(255, 255, 255, 0);
+  cursor: pointer;
+  transition: box-shadow 0.25s ease-in-out;
+  box-sizing: border-box;
+  line-height: 1;
+}
+text label:hover, text label:focus {
+  box-shadow: 0 0 0.15rem #fff;
+}
+text a {
+  padding: 0.5rem 1rem;
+  border-radius: 1rem;
+  text-decoration: none;
+  background: #bc2f60;
+  color: #20112a;
+  box-shadow: 0 0 0 1rem rgba(255, 255, 255, 0), inset 0 0 0 0 rgba(255, 255, 255, 0.2);
+  transition: all 0.2s ease-in-out;
+}
+text a:hover, text a:focus {
+  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), inset 0 0 0 3rem rgba(255, 255, 255, 0.2);
+}
+
+#done:checked ~ text {
+  transform: scale(0) !important;
+  transition: all 0.5s ease-in-out;
+  opacity: 0;
+}
+
+colour > *:not(.lh):not(text) {
+  filter: hue-rotate(0deg) brightness(100%);
+  animation: set 400s linear infinite;
+}
+
+@media screen and (max-device-width: 480px) {
+  colour > *:not(.lh):not(text) {
+    animation: none;
+  }
+}
+@keyframes set {
+  15%,
+  85% {
+    filter: hue-rotate(0deg) brightness(100%);
+  }
+  30%,
+  70% {
+    filter: hue-rotate(-20deg) brightness(10%);
+  }
+  40%,
+  60% {
+    filter: hue-rotate(-40deg) brightness(50%);
+  }
+}
+stars {
+  width: 220rem;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  animation: stars 400s linear infinite;
+  -webkit-box-reflect: below -50rem;
+  opacity: 0;
+  z-index: 0;
+}
+stars:before {
+  width: 0.5rem;
+  height: 0.5rem;
+  box-shadow: 72vmin 41vmin 0 -.1rem #f9b9c8 , 47vmin 8vmin 0 -.2rem #8bd5fc , 170vmin 32vmin 0 -.1rem #af8bfc , 198vmin 36vmin 0 -.2rem #fc8bcb , 166vmin 30vmin 0 -.2rem #fc8bcd , 78vmin 52vmin 0 -.1rem #8babfc , 73vmin 10vmin 0 -.2rem #d48bfc , 60vmin 12vmin 0 -.1rem #8bfce7 , 74vmin 10vmin 0 -.2rem #fc908b , 134vmin 33vmin 0 -.2rem #8bfc92 , 57vmin 38vmin 0 -.1rem #8bfcda , 130vmin 12vmin 0 -.2rem #fc8bab , 115vmin 22vmin 0 -.2rem #e9fc8b , 48vmin 35vmin 0 -.1rem #cd8bfc , 47vmin 3vmin 0 -.1rem #fc8b9e , 66vmin 45vmin 0 -.1rem #fc8bdc , 163vmin 53vmin 0 -.1rem #8bfc96 , 17vmin 52vmin 0 -.1rem #fc8bc6 , 10vmin 2vmin 0 -.1rem #8bfce0 , 35vmin 36vmin 0 -.1rem #fc8bb1 , 165vmin 48vmin 0 -.2rem #8bf8fc , 90vmin 38vmin 0 -.2rem #dafc8b , 157vmin 17vmin 0 -.2rem #fc8bbe , 14vmin 18vmin 0 -.2rem #8bfccb , 60vmin 26vmin 0 -.2rem #fc8bad , 89vmin 18vmin 0 -.1rem #8bfcda , 192vmin 36vmin 0 -.2rem #8bb3fc , 76vmin 2vmin 0 -.1rem #8bd7fc , 2vmin 15vmin 0 -.1rem #fcef8b , 163vmin 19vmin 0 -.1rem #8bf1fc , 44vmin 38vmin 0 -.1rem #8bfccb , 25vmin 28vmin 0 -.1rem #b7fc8b , 60vmin 36vmin 0 -.2rem #c18bfc , 72vmin 24vmin 0 -.1rem #fc8bf5 , 138vmin 40vmin 0 -.2rem #d68bfc , 40vmin 45vmin 0 -.2rem #fc8be2 , 31vmin 20vmin 0 -.2rem #8b9afc , 12vmin 38vmin 0 -.2rem #fc8bcb , 172vmin 34vmin 0 -.1rem #988bfc , 139vmin 43vmin 0 -.2rem #fc8bed , 111vmin 38vmin 0 -.1rem #e4fc8b , 52vmin 46vmin 0 -.2rem #8bfcc9 , 92vmin 37vmin 0 -.1rem #8bdefc , 72vmin 13vmin 0 -.2rem #bafc8b , 16vmin 39vmin 0 -.2rem #fc8bcd , 39vmin 15vmin 0 -.1rem #988bfc , 85vmin 10vmin 0 -.2rem #8f8bfc , 63vmin 22vmin 0 -.2rem #fc8b9a , 64vmin 36vmin 0 -.2rem #8ba2fc , 1vmin 35vmin 0 -.1rem #fc9a8b;
+  border-radius: 50%;
+  content: "";
+  position: absolute;
+  top: 5rem;
+  left: 5rem;
+}
+stars i:before, stars i:after {
+  width: 0.5rem;
+  height: 0.5rem;
+  top: 40rem;
+  left: 40rem;
+  background: #fff;
+  border-radius: 50%;
+  animation: stars 1s linear infinite;
+  opacity: 0.5;
+  box-shadow: 0 0 1rem #fff;
+}
+stars i:after {
+  top: 20rem;
+  left: 180rem;
+  animation: stars 1s 0.5s linear infinite;
+  background: #f9b9c8;
+}
+
+sky {
+  width: 100%;
+  height: 78.5rem;
+  overflow: hidden;
+  -webkit-box-reflect: below 0;
+  z-index: 0;
+}
+sky:before, sky:after {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(#323248 10%, #fbd447, #d8480f);
+  opacity: 0;
+  animation: sky 400s linear infinite;
+}
+sky:after {
+  background: linear-gradient(#19043f, #1a0f6c);
+}
+
+time {
+  pointer-events: none;
+}
+time,
+time sun {
+  width: 170rem;
+  height: 170rem;
+  left: -100%;
+  right: -100%;
+  top: -100%;
+  bottom: -170%;
+  margin: auto;
+}
+time sun {
+  bottom: -100%;
+  transform: rotate(0deg);
+  z-index: 1;
+  animation: sun 400s linear infinite;
+  filter: blur(1rem) brightness(400%);
+}
+time sun:before {
+  width: 25rem;
+  height: 25rem;
+  border-radius: 50%;
+  background: radial-gradient(#bc592f, #bc2f2f);
+  right: 0;
+  margin: auto;
+  transform: rotate(0deg);
+}
+time sun:after {
+  width: 10rem;
+  height: 10rem;
+  border-radius: 50%;
+  box-shadow: inset 0 2rem 0 #5a4e38;
+  background: rgba(0, 0, 0, 0.1);
+  left: 60%;
+  top: auto;
+  bottom: 0;
+  transform: rotate(0deg);
+  z-index: 1;
+}
+
+@media (max-width: 500px) {
+  time,
+  input {
+    display: none;
+  }
+}
+div.ss lens {
+  top: 20rem;
+  left: 70rem;
+  animation: lensflair 400s linear infinite;
+  width: 60rem;
+  height: 60rem;
+  filter: brightness(150%);
+  transform: rotate(0);
+  opacity: 0;
+}
+div.ss lens:before {
+  width: 60rem;
+  height: 60rem;
+  border-radius: 50%;
+  top: 0;
+  right: -50%;
+  left: -50%;
+  margin: auto;
+  box-shadow: 0 70rem 0 -20rem yellow, 0 50rem 0 -25rem yellow, 0 100rem 0 5rem #f437c5, inset 0 0 3rem #ff7700;
+  border: 1rem solid #ff7700;
+}
+div.ss lens:after {
+  width: 100rem;
+  height: 100rem;
+  border-radius: 50%;
+  top: 140rem;
+  right: -50%;
+  left: -50%;
+  margin: auto;
+  border: 1rem solid yellow;
+  box-shadow: 0 0 3rem red, inset 0 0 3rem blue;
+}
+
+@keyframes lensflair {
+  20%,
+  30%,
+  70%,
+  80% {
+    opacity: 0;
+  }
+  25%,
+  75% {
+    opacity: 0.05;
+  }
+  100% {
+    transform: rotate(360deg);
+    opacity: 0;
+  }
+}
+@keyframes sun {
+  20%,
+  80% {
+    filter: blur(1rem) brightness(390%);
+  }
+  27%,
+  73% {
+    filter: blur(1rem) brightness(200%);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes stars {
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes sky {
+  20%,
+  85% {
+    filter: brightness(100%);
+    opacity: 0;
+  }
+  30%,
+  70% {
+    filter: brightness(100%);
+    opacity: 1;
+  }
+  40%,
+  60% {
+    filter: brightness(20%);
+    opacity: 1;
+  }
+}
+sunset {
+  width: 150%;
+  height: 20rem;
+  left: -25%;
+  top: 60rem;
+  background: radial-gradient(farthest-side at 70% 100%, #ff6400, rgba(255, 255, 255, 0));
+  filter: blur(1rem);
+  -webkit-box-reflect: below 0;
+  animation: sunset 400s linear infinite;
+  opacity: 0;
+  transform: translate3d(0, 20rem, 0);
+}
+sunset:before {
+  width: 100rem;
+  height: 50rem;
+  left: 55%;
+  top: -10rem;
+  border-radius: 50%;
+  background: radial-gradient(#ff6400, rgba(255, 255, 255, 0));
+  opacity: 0.1;
+}
+sunset:after {
+  width: 50rem;
+  height: 25rem;
+  left: 65%;
+  top: 5rem;
+  border-radius: 50%;
+  background: radial-gradient(#fffd91, rgba(255, 255, 255, 0));
+  opacity: 0.1;
+}
+
+@keyframes sunset {
+  28%,
+  75% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  20%,
+  35%,
+  70%,
+  80% {
+    opacity: 0;
+    transform: translate3d(0, 20rem, 0);
+  }
+}
+text:nth-of-type(2) {
+  animation: gameover 400s linear;
+}
+
+@keyframes gameover {
+  34.8% {
+    transform: scale(0);
+    z-index: 0;
+    display: block;
+    opacity: 0;
+  }
+  35%,
+  100% {
+    transform: scale(1);
+    z-index: 410;
+    transition: all 0.5s 1.5s ease-in-out;
+    opacity: 1;
+  }
+}
+tree:nth-of-type(1) {
+  width: 10rem;
+  height: 60.5rem;
+  top: -10rem;
+  transform: skew(-2deg);
+  border-radius: 0 50% 2rem 0;
+  box-shadow: 0.5rem 0 0 #683f44, 1rem 0 0 #885259, 3rem 0 0 #683f44, 5rem 0 0 #20112a;
+}
+tree:nth-of-type(1):before {
+  left: 16rem;
+  width: 10rem;
+  height: 60.5rem;
+  box-shadow: -2rem 0 0 #20112a, -3rem 0 0 #683f44, -4rem 0 0 #20112a;
+  border-radius: 50% 0 0 2rem;
+  transform: skew(4deg);
+}
+tree:nth-of-type(1):after {
+  top: -4rem;
+  width: 10rem;
+  height: 5rem;
+  border-radius: 60% 60% 40% 40% / 70% 70% 40% 40%;
+  background: #7dbc2f;
+  box-shadow: inset -1rem -1rem 1rem rgba(104, 63, 68, 0.1), 13rem 0 0 -0.2rem rgba(104, 63, 68, 0.1), 9rem 1rem 0 -1rem rgba(104, 63, 68, 0.1), -2rem -3rem 0 1rem rgba(104, 63, 68, 0.1), 5rem -5rem 0 -0.5rem rgba(104, 63, 68, 0.1), 7rem -4rem 0 rgba(104, 63, 68, 0.1), 11rem -2rem 0 -0.5rem rgba(104, 63, 68, 0.1), 12rem 0 0 -0.2rem #bca52f, 8rem 1rem 0 -1rem #bca52f, -3rem -3rem 0 1rem #81bc2f, 4rem -5rem 0 -0.5rem #bca52f, 6rem -4rem 0 #81bc2f, 10rem -2rem 0 -0.5rem #bca52f;
+}
+
+tree:nth-of-type(2) {
+  width: 10rem;
+  height: 50.5rem;
+  top: 0;
+  left: 25rem;
+  transform: skew(-3deg);
+  border-radius: 0 50% 2rem 0;
+  box-shadow: 0.5rem 0 0 #683f44, 1rem 0 0 #885259, 3rem 0 0 #683f44, 5rem 0 0 #20112a;
+}
+tree:nth-of-type(2):before {
+  left: 16rem;
+  width: 10rem;
+  height: 50.5rem;
+  box-shadow: -1.5rem 0 0 #20112a, -2.5rem 0 0 #683f44, -3rem 0 0 #20112a;
+  border-radius: 50% 0 0 2rem;
+  transform: skew(4deg);
+}
+tree:nth-of-type(2):after {
+  top: -4rem;
+  left: 17rem;
+  width: 10rem;
+  height: 5rem;
+  border-radius: 60% 60% 40% 40% / 70% 70% 40% 40%;
+  background: #7dbc2f;
+  box-shadow: inset -1rem -1rem 1rem rgba(104, 63, 68, 0.1), -19rem 1rem 0 -0.2rem rgba(104, 63, 68, 0.1), -14rem -4rem 0 -1rem rgba(104, 63, 68, 0.1), -13rem -1rem 0 1rem rgba(104, 63, 68, 0.1), -1rem -4rem 0 -0.5rem rgba(104, 63, 68, 0.1), -4rem -1rem 0 rgba(104, 63, 68, 0.1), -21rem -2rem 0 -0.5rem rgba(104, 63, 68, 0.1), -7rem -5rem 0 1rem rgba(104, 63, 68, 0.1), -20rem 1rem 0 -0.2rem #bca52f, -15rem -4rem 0 -1rem #bca52f, -15rem -1rem 0 1rem #81bc2f, -2rem -4rem 0 -0.5rem #bca52f, -5rem -1rem 0 #81bc2f, -22rem -2rem 0 -0.5rem #bca52f, -8rem -5rem 0 1rem #81bc2f;
+}
+
+tree i:nth-of-type(1), tree i:nth-of-type(1):before, tree i:nth-of-type(1):after {
+  width: 2.5rem;
+  height: 0.5rem;
+  background: #96d24c;
+  border-radius: 0 0 100% 100%;
+  top: -5rem;
+  filter: drop-shadow(3rem 1.5rem 0 #938125) drop-shadow(1.5rem 2.5rem 0 #938125);
+  z-index: 1;
+  left: -3rem;
+  opacity: 0.5;
+}
+tree i:nth-of-type(1):before {
+  left: 6rem;
+  top: -1rem;
+  filter: drop-shadow(2rem 1.5rem 0 #938125);
+}
+tree i:nth-of-type(1):after {
+  left: 15rem;
+  top: -1.5rem;
+  filter: drop-shadow(2.5rem 0.5rem 0 #938125) drop-shadow(1rem 2rem 0 #938125);
+}
+
+tree:nth-of-type(2) i:nth-of-type(1):after {
+  left: 20rem;
+}
+
+tree i:nth-of-type(2), tree i:nth-of-type(2):before, tree i:nth-of-type(2):after {
+  width: 0.5rem;
+  height: 0.25rem;
+  background: #81bc2f;
+  border-radius: 100% 0 100% 0;
+  top: -2rem;
+}
+tree i:nth-of-type(2):before {
+  left: 8rem;
+  top: -1rem;
+}
+tree i:nth-of-type(2):after {
+  left: 20rem;
+  top: 1.5rem;
+}
+
+[type="radio"]:focus ~ div > div > tree i:nth-of-type(1), [type="radio"]:focus ~ div > div > tree:after {
+  animation: shake 0.3s ease-in-out;
+}
+
+[type="radio"]:focus ~ div > div > tree > i:nth-of-type(2) {
+  animation: fall 5s ease-in-out;
+}
+[type="radio"]:focus ~ div > div > tree > i:nth-of-type(2):before {
+  animation: fall 10s ease-in-out;
+}
+[type="radio"]:focus ~ div > div > tree > i:nth-of-type(2):before {
+  animation: fall 5s ease-in-out;
+}
+
+@keyframes shake {
+  40% {
+    transform: translate3d(0, 0.5rem, 0);
+  }
+  60% {
+    transform: translate3d(0, -0.25rem, 0);
+  }
+  80% {
+    transform: translate3d(0, 0.15rem, 0);
+  }
+}
+@keyframes fall {
+  100% {
+    transform: translate3d(0, 15rem, 0);
+    opacity: 0;
+  }
+}
+water {
+  position: absolute;
+  top: 78.5rem;
+  bottom: 0;
+  left: -100%;
+  right: -100%;
+  margin: auto;
+  width: 100%;
+  height: 25rem;
+  background: linear-gradient(rgba(96, 139, 136, 0.5), #f3cece);
+  z-index: 99;
+  overflow: hidden;
+  box-shadow: inset 0 0 5rem 0 rgba(37, 37, 41, 0.5);
+}
+water:before, water:after,
+water i {
+  width: 80rem;
+  height: 3rem;
+  border-radius: 50%;
+  opacity: 0.2;
+  right: 0;
+  margin: auto;
+  transform: scaleX(1) scaleY(0);
+  top: -1.5rem;
+  border: 0.5rem solid #fff;
+  box-shadow: 0 0 1rem 0.5rem #040b27, inset 0 0 1rem 1rem #040b27, inset 0 0 1rem #fff;
+}
+water:before {
+  animation: waves 6s ease-in-out infinite;
+}
+water:after {
+  animation: waves 8s 2s ease-in-out infinite;
+}
+
+input:focus ~ water > i {
+  animation: waves 3s 0.25s ease-out;
+}
+
+@keyframes waves {
+  100% {
+    transform: scaleX(1.5) scaleY(7);
+    opacity: 0;
+  }
+}
+shed > label > i:nth-of-type(5) {
+  width: 100%;
+  height: 100%;
+}
+shed > label > i:nth-of-type(5):after {
+  width: 2rem;
+  border-left: 0.5rem solid #252529;
+  border-right: 0.5rem solid #252529;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 1.5rem, #252529 1.5rem, #252529 2rem);
+  height: 325%;
+  left: -1.5rem;
+  transform: rotate(-1deg);
+  top: 10.5rem;
+  display: none;
+}
+shed > label > i:nth-of-type(5):before {
+  width: 13rem;
+  height: 3rem;
+  top: 10.5rem;
+  left: 12.5rem;
+  border: 0.5rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #683f44;
+  box-shadow: 0 0.25rem 0 #683f44;
+  transform: rotate(-3deg);
+  border-radius: 50%;
+  display: none;
+}
+shed > label:nth-of-type(n + 5) > i:nth-of-type(5):after {
+  height: 225%;
+}
+shed > label:nth-of-type(n + 9) > i:nth-of-type(5):after {
+  height: 15rem;
+}
+shed > label:nth-of-type(even) > i:nth-of-type(5):after {
+  left: 10rem;
+  transform: rotate(2deg);
+}
+
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1:before {
+  background: repeating-linear-gradient(#bc592f 1rem, #683f44 2.3rem);
+  width: 90%;
+  height: 98%;
+  left: 1.25rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.5rem 0 0 #20112a;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1:after {
+  width: 105%;
+  height: 5rem;
+  background: repeating-linear-gradient(to right, #683f44 1rem, #20112a 2.1rem);
+  top: -2rem;
+  border-bottom: solid 0.5rem #252529;
+  box-shadow: 0 1.5rem 0.5rem -1rem rgba(79, 1, 14, 0.9);
+  border-radius: 0.5rem;
+  left: auto;
+  right: -1rem;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(4) {
+  width: 4rem;
+  height: 4rem;
+  right: 0;
+  margin: auto;
+  background: rgba(79, 1, 14, 0.3);
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+  transform: scale(0.5);
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(4):before {
+  width: 3.4rem;
+  height: 0.5rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 1.5rem 0 #252529, 0 3rem 0 #252529, 0 0.5rem 0 #000, 0 1rem 0 rgba(79, 1, 14, 0.9), 0 2rem 0 rgba(79, 1, 14, 0.9), 0 2.5rem 0 rgba(79, 1, 14, 0.75);
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(4):after {
+  width: 0.5rem;
+  height: 3.4rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 1.5rem 0 0 #252529, 3rem 0 0 #252529;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  background: #bc592f;
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(3):after {
+  left: -4rem;
+  border: 1rem solid rgba(255, 255, 255, 0);
+  top: -11rem;
+  border-bottom-color: #252529;
+  transform: rotate(-3deg);
+  height: 4rem;
+  box-shadow: 0 3.7rem 0 -0.5rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(3):before {
+  width: 14.5rem;
+  height: 4.5rem;
+  border-top: 0.5rem solid #20112a;
+  border-bottom: 0.5rem solid #20112a;
+  top: 5rem;
+  left: -5rem;
+  background: repeating-linear-gradient(to right, #683f44, #20112a 0.5rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1.4rem);
+  border-radius: 0.5rem;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(2):before {
+  width: 1rem;
+  height: 9rem;
+  background: #20112a;
+  top: -7rem;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1:nth-of-type(odd) > i:nth-of-type(2) {
+  width: 1rem;
+  background: #20112a;
+  height: 3rem;
+  border-radius: 0.25rem;
+  top: 18.5rem;
+  left: 10rem;
+  transform: rotate(5deg);
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1:nth-of-type(odd) > i:nth-of-type(2):before {
+  transform: rotate(-45deg);
+  left: -3rem;
+  border-radius: 0 1rem 0 0;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1:nth-of-type(odd) > i:nth-of-type(2):after {
+  width: 1rem;
+  height: 4rem;
+  transform: rotate(45deg);
+  background: #20112a;
+  top: -6.5rem;
+  left: -2rem;
+  border-radius: 1rem 0 0 0;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1:nth-of-type(even) > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1:nth-of-type(even) > i:nth-of-type(1) {
+  left: 11rem;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1:nth-of-type(even) > i:nth-of-type(2):before {
+  transform: rotate(45deg);
+  left: 5rem;
+  border-radius: 1rem 0 0 0;
+  top: 11rem;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(1):before, .hs.row1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(1):after {
+  top: -7.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(5):after {
+  display: block;
+}
+
+.hs.row1.col1:checked ~ div > div > shed > .row2.col1:after, .hs.row1.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(3):after, .hs.row1.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row1.col1:checked ~ div > div > shed > .row0.col1 > i:nth-of-type(3):before, .hs.row1.col1:checked ~ div > div > shed > .row0.col1 > i:nth-of-type(2), .hs.row1.col1:checked ~ div > div > shed > .row0.col1 > i:nth-of-type(5):after {
+  display: none;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row0.col1 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row1.col1:checked ~ div > div > shed > .row0.col1 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 1rem;
+  left: 2rem;
+}
+
+.hs.shed.row1.col-2:not(:checked)
+~ .hs.row1.col1:checked
+~ .shed.hs.row1.col2:not(:checked)
+~ .hs.row-1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.shed.row1.col-2:not(:checked)
+~ .hs.row1.col1:checked
+~ .shed.hs.row1.col2:not(:checked)
+~ .hs.row-1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row1.col1:before {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col1:before {
+  height: 12.5rem;
+  box-shadow: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 1rem;
+  left: 1rem;
+}
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row3.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col0:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(5):after {
+  display: none !important;
+}
+
+.hs.row1.col1:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(1), .hs.row1.col1:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(3):after {
+  display: none;
+}
+
+.hs.row1.col1:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row1.col1:after,
+.hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row1.col1:after {
+  width: 110%;
+  right: -1.25rem;
+}
+
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2:before {
+  background: repeating-linear-gradient(#bc592f 1rem, #683f44 2.3rem);
+  width: 90%;
+  height: 98%;
+  left: 1.25rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.5rem 0 0 #20112a;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2:after {
+  width: 105%;
+  height: 5rem;
+  background: repeating-linear-gradient(to right, #683f44 1rem, #20112a 2.1rem);
+  top: -2rem;
+  border-bottom: solid 0.5rem #252529;
+  box-shadow: 0 1.5rem 0.5rem -1rem rgba(79, 1, 14, 0.9);
+  border-radius: 0.5rem;
+  left: auto;
+  right: -1rem;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(4) {
+  width: 4rem;
+  height: 4rem;
+  right: 0;
+  margin: auto;
+  background: rgba(79, 1, 14, 0.3);
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+  transform: scale(0.5);
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(4):before {
+  width: 3.4rem;
+  height: 0.5rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 1.5rem 0 #252529, 0 3rem 0 #252529, 0 0.5rem 0 #000, 0 1rem 0 rgba(79, 1, 14, 0.9), 0 2rem 0 rgba(79, 1, 14, 0.9), 0 2.5rem 0 rgba(79, 1, 14, 0.75);
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(4):after {
+  width: 0.5rem;
+  height: 3.4rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 1.5rem 0 0 #252529, 3rem 0 0 #252529;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  background: #bc592f;
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(3):after {
+  left: -4rem;
+  border: 1rem solid rgba(255, 255, 255, 0);
+  top: -11rem;
+  border-bottom-color: #252529;
+  transform: rotate(-3deg);
+  height: 4rem;
+  box-shadow: 0 3.7rem 0 -0.5rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(3):before {
+  width: 14.5rem;
+  height: 4.5rem;
+  border-top: 0.5rem solid #20112a;
+  border-bottom: 0.5rem solid #20112a;
+  top: 5rem;
+  left: -5rem;
+  background: repeating-linear-gradient(to right, #683f44, #20112a 0.5rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1.4rem);
+  border-radius: 0.5rem;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(2):before {
+  width: 1rem;
+  height: 9rem;
+  background: #20112a;
+  top: -7rem;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2:nth-of-type(odd) > i:nth-of-type(2) {
+  width: 1rem;
+  background: #20112a;
+  height: 3rem;
+  border-radius: 0.25rem;
+  top: 18.5rem;
+  left: 10rem;
+  transform: rotate(5deg);
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2:nth-of-type(odd) > i:nth-of-type(2):before {
+  transform: rotate(-45deg);
+  left: -3rem;
+  border-radius: 0 1rem 0 0;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2:nth-of-type(odd) > i:nth-of-type(2):after {
+  width: 1rem;
+  height: 4rem;
+  transform: rotate(45deg);
+  background: #20112a;
+  top: -6.5rem;
+  left: -2rem;
+  border-radius: 1rem 0 0 0;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2:nth-of-type(even) > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2:nth-of-type(even) > i:nth-of-type(1) {
+  left: 11rem;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2:nth-of-type(even) > i:nth-of-type(2):before {
+  transform: rotate(45deg);
+  left: 5rem;
+  border-radius: 1rem 0 0 0;
+  top: 11rem;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(1):before, .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(1):after {
+  top: -7.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: block;
+}
+
+.hs.row1.col2:checked ~ div > div > shed > .row2.col2:after, .hs.row1.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3):after, .hs.row1.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row1.col2:checked ~ div > div > shed > .row0.col2 > i:nth-of-type(3):before, .hs.row1.col2:checked ~ div > div > shed > .row0.col2 > i:nth-of-type(2), .hs.row1.col2:checked ~ div > div > shed > .row0.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row0.col2 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row1.col2:checked ~ div > div > shed > .row0.col2 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 1rem;
+}
+
+.hs.shed.row1.col-1:not(:checked)
+~ .hs.row1.col2:checked
+~ .shed.hs.row1.col3:not(:checked)
+~ .hs.row-1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.shed.row1.col-1:not(:checked)
+~ .hs.row1.col2:checked
+~ .shed.hs.row1.col3:not(:checked)
+~ .hs.row-1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row1.col2:before {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col2:before {
+  height: 12.5rem;
+  box-shadow: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 1rem;
+}
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row3.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none !important;
+}
+
+.hs.row1.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(1), .hs.row1.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(3):after {
+  display: none;
+}
+
+.hs.row1.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row1.col2:after,
+.hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row1.col2:after {
+  width: 110%;
+  right: -1.25rem;
+}
+
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3:before {
+  background: repeating-linear-gradient(#bc592f 1rem, #683f44 2.3rem);
+  width: 90%;
+  height: 98%;
+  left: 1.25rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.5rem 0 0 #20112a;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3:after {
+  width: 105%;
+  height: 5rem;
+  background: repeating-linear-gradient(to right, #683f44 1rem, #20112a 2.1rem);
+  top: -2rem;
+  border-bottom: solid 0.5rem #252529;
+  box-shadow: 0 1.5rem 0.5rem -1rem rgba(79, 1, 14, 0.9);
+  border-radius: 0.5rem;
+  left: auto;
+  right: -1rem;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(4) {
+  width: 4rem;
+  height: 4rem;
+  right: 0;
+  margin: auto;
+  background: rgba(79, 1, 14, 0.3);
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+  transform: scale(0.5);
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(4):before {
+  width: 3.4rem;
+  height: 0.5rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 1.5rem 0 #252529, 0 3rem 0 #252529, 0 0.5rem 0 #000, 0 1rem 0 rgba(79, 1, 14, 0.9), 0 2rem 0 rgba(79, 1, 14, 0.9), 0 2.5rem 0 rgba(79, 1, 14, 0.75);
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(4):after {
+  width: 0.5rem;
+  height: 3.4rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 1.5rem 0 0 #252529, 3rem 0 0 #252529;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  background: #bc592f;
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(3):after {
+  left: -4rem;
+  border: 1rem solid rgba(255, 255, 255, 0);
+  top: -11rem;
+  border-bottom-color: #252529;
+  transform: rotate(-3deg);
+  height: 4rem;
+  box-shadow: 0 3.7rem 0 -0.5rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(3):before {
+  width: 14.5rem;
+  height: 4.5rem;
+  border-top: 0.5rem solid #20112a;
+  border-bottom: 0.5rem solid #20112a;
+  top: 5rem;
+  left: -5rem;
+  background: repeating-linear-gradient(to right, #683f44, #20112a 0.5rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1.4rem);
+  border-radius: 0.5rem;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(2):before {
+  width: 1rem;
+  height: 9rem;
+  background: #20112a;
+  top: -7rem;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3:nth-of-type(odd) > i:nth-of-type(2) {
+  width: 1rem;
+  background: #20112a;
+  height: 3rem;
+  border-radius: 0.25rem;
+  top: 18.5rem;
+  left: 10rem;
+  transform: rotate(5deg);
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3:nth-of-type(odd) > i:nth-of-type(2):before {
+  transform: rotate(-45deg);
+  left: -3rem;
+  border-radius: 0 1rem 0 0;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3:nth-of-type(odd) > i:nth-of-type(2):after {
+  width: 1rem;
+  height: 4rem;
+  transform: rotate(45deg);
+  background: #20112a;
+  top: -6.5rem;
+  left: -2rem;
+  border-radius: 1rem 0 0 0;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3:nth-of-type(even) > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3:nth-of-type(even) > i:nth-of-type(1) {
+  left: 11rem;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3:nth-of-type(even) > i:nth-of-type(2):before {
+  transform: rotate(45deg);
+  left: 5rem;
+  border-radius: 1rem 0 0 0;
+  top: 11rem;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(1):before, .hs.row1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(1):after {
+  top: -7.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(5):after {
+  display: block;
+}
+
+.hs.row1.col3:checked ~ div > div > shed > .row2.col3:after, .hs.row1.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3):after, .hs.row1.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row1.col3:checked ~ div > div > shed > .row0.col3 > i:nth-of-type(3):before, .hs.row1.col3:checked ~ div > div > shed > .row0.col3 > i:nth-of-type(2), .hs.row1.col3:checked ~ div > div > shed > .row0.col3 > i:nth-of-type(5):after {
+  display: none;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row0.col3 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row1.col3:checked ~ div > div > shed > .row0.col3 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 1rem;
+}
+
+.hs.shed.row1.col0:not(:checked)
+~ .hs.row1.col3:checked
+~ .shed.hs.row1.col4:not(:checked)
+~ .hs.row-1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.shed.row1.col0:not(:checked)
+~ .hs.row1.col3:checked
+~ .shed.hs.row1.col4:not(:checked)
+~ .hs.row-1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row1.col3:before {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col3:before {
+  height: 12.5rem;
+  box-shadow: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 1rem;
+  left: 2rem;
+}
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row3.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(5):after {
+  display: none !important;
+}
+
+.hs.row1.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(1), .hs.row1.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(3):after {
+  display: none;
+}
+
+.hs.row1.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col3:after,
+.hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col3:after {
+  width: 110%;
+  right: -1.25rem;
+}
+
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4:before {
+  background: repeating-linear-gradient(#bc592f 1rem, #683f44 2.3rem);
+  width: 90%;
+  height: 98%;
+  left: 1.25rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.5rem 0 0 #20112a;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4:after {
+  width: 105%;
+  height: 5rem;
+  background: repeating-linear-gradient(to right, #683f44 1rem, #20112a 2.1rem);
+  top: -2rem;
+  border-bottom: solid 0.5rem #252529;
+  box-shadow: 0 1.5rem 0.5rem -1rem rgba(79, 1, 14, 0.9);
+  border-radius: 0.5rem;
+  left: auto;
+  right: -1rem;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(4) {
+  width: 4rem;
+  height: 4rem;
+  right: 0;
+  margin: auto;
+  background: rgba(79, 1, 14, 0.3);
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+  transform: scale(0.5);
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(4):before {
+  width: 3.4rem;
+  height: 0.5rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 1.5rem 0 #252529, 0 3rem 0 #252529, 0 0.5rem 0 #000, 0 1rem 0 rgba(79, 1, 14, 0.9), 0 2rem 0 rgba(79, 1, 14, 0.9), 0 2.5rem 0 rgba(79, 1, 14, 0.75);
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(4):after {
+  width: 0.5rem;
+  height: 3.4rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 1.5rem 0 0 #252529, 3rem 0 0 #252529;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  background: #bc592f;
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(3):after {
+  left: -4rem;
+  border: 1rem solid rgba(255, 255, 255, 0);
+  top: -11rem;
+  border-bottom-color: #252529;
+  transform: rotate(-3deg);
+  height: 4rem;
+  box-shadow: 0 3.7rem 0 -0.5rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(3):before {
+  width: 14.5rem;
+  height: 4.5rem;
+  border-top: 0.5rem solid #20112a;
+  border-bottom: 0.5rem solid #20112a;
+  top: 5rem;
+  left: -5rem;
+  background: repeating-linear-gradient(to right, #683f44, #20112a 0.5rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1.4rem);
+  border-radius: 0.5rem;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(2):before {
+  width: 1rem;
+  height: 9rem;
+  background: #20112a;
+  top: -7rem;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4:nth-of-type(odd) > i:nth-of-type(2) {
+  width: 1rem;
+  background: #20112a;
+  height: 3rem;
+  border-radius: 0.25rem;
+  top: 18.5rem;
+  left: 10rem;
+  transform: rotate(5deg);
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4:nth-of-type(odd) > i:nth-of-type(2):before {
+  transform: rotate(-45deg);
+  left: -3rem;
+  border-radius: 0 1rem 0 0;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4:nth-of-type(odd) > i:nth-of-type(2):after {
+  width: 1rem;
+  height: 4rem;
+  transform: rotate(45deg);
+  background: #20112a;
+  top: -6.5rem;
+  left: -2rem;
+  border-radius: 1rem 0 0 0;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4:nth-of-type(even) > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4:nth-of-type(even) > i:nth-of-type(1) {
+  left: 11rem;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4:nth-of-type(even) > i:nth-of-type(2):before {
+  transform: rotate(45deg);
+  left: 5rem;
+  border-radius: 1rem 0 0 0;
+  top: 11rem;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(1):before, .hs.row1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(1):after {
+  top: -7.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(5):after {
+  display: block;
+}
+
+.hs.row1.col4:checked ~ div > div > shed > .row2.col4:after, .hs.row1.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(3):after, .hs.row1.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row1.col4:checked ~ div > div > shed > .row0.col4 > i:nth-of-type(3):before, .hs.row1.col4:checked ~ div > div > shed > .row0.col4 > i:nth-of-type(2), .hs.row1.col4:checked ~ div > div > shed > .row0.col4 > i:nth-of-type(5):after {
+  display: none;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row0.col4 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row1.col4:checked ~ div > div > shed > .row0.col4 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 1rem;
+}
+
+.hs.shed.row1.col1:not(:checked)
+~ .hs.row1.col4:checked
+~ .shed.hs.row1.col5:not(:checked)
+~ .hs.row-1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.shed.row1.col1:not(:checked)
+~ .hs.row1.col4:checked
+~ .shed.hs.row1.col5:not(:checked)
+~ .hs.row-1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col4:before {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col4:before {
+  height: 12.5rem;
+  box-shadow: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 1rem;
+}
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row3.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(5):after {
+  display: none !important;
+}
+
+.hs.row1.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(1), .hs.row1.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(3):after {
+  display: none;
+}
+
+.hs.row1.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row1.col4:after,
+.hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row1.col4:after {
+  width: 110%;
+  right: -1.25rem;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1:before {
+  width: 110%;
+}
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2:after {
+  width: 120%;
+  left: -1.25rem;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2:before {
+  width: 110%;
+}
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col3:after {
+  width: 120%;
+  left: -1.25rem;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3:before {
+  width: 110%;
+}
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col4:after {
+  width: 120%;
+  left: -1.25rem;
+}
+
+.hs.row1.col2:checked ~ .hs.shed.row1.col3:not(:checked) ~ div > div > shed > .row1.col2 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row1.col2:checked ~ .hs.shed.row1.col3:not(:checked) ~ div > div > shed > .row1.col2 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row1.col4:checked ~ .hs.shed.row1.col5:not(:checked) ~ div > div > shed > .row1.col4 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row1.col4:checked ~ .hs.shed.row1.col5:not(:checked) ~ div > div > shed > .row1.col4 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(3):after, .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(1) {
+  display: none;
+}
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(3):before {
+  width: 10.25rem;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(3):after {
+  left: 6rem;
+  transform: rotate(3deg);
+}
+.hs.row1.col2:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row1.col2:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  left: -2.5rem;
+  transform: rotate(-3deg);
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(3):after, .hs.row1.col2:checked ~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(1),
+.hs.row1.col2:checked ~ .hs.row1.col-3:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(3):after,
+.hs.row1.col2:checked ~ .hs.row1.col-3:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  left: 10rem;
+  transform: rotate(2deg);
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(3):after, .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(1) {
+  display: none;
+}
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(3):before {
+  width: 10.25rem;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(3):after {
+  left: 6rem;
+  transform: rotate(3deg);
+}
+.hs.row1.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row1.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(5):after {
+  left: -2.5rem;
+  transform: rotate(-3deg);
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(3):after, .hs.row1.col3:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(1),
+.hs.row1.col3:checked ~ .hs.row1.col-2:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(3):after,
+.hs.row1.col3:checked ~ .hs.row1.col-2:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(5):after {
+  left: 10rem;
+  transform: rotate(2deg);
+}
+
+.hs.shed.row1.col1:checked
+~ .hs.shed.row1.col2:not(:checked)
+~ .hs.shed.row1.col3:not(:checked)
+~ .hs.shed.row1.col4:checked
+~ div > div > shed > .row1.col1 > i:nth-of-type(5):before {
+  display: block;
+  width: 210%;
+}
+
+.hs.shed.row1.col1:checked
+~ .hs.shed.row1.col2:not(:checked)
+~ .hs.shed.row1.col3:checked
+~ div
+> div
+> shed
+> .row1.col1 > i:nth-of-type(5):before,
+.hs.shed.row1.col2:checked
+~ .hs.shed.row1.col3:not(:checked)
+~ .hs.shed.row1.col4:checked
+~ div
+> div
+> shed
+> .row1.col2 > i:nth-of-type(5):before {
+  display: block;
+  width: 110%;
+}
+
+.hs.row2.col2:checked
+~ .hs.shed.row1.col1:checked
+~ .hs.shed.row1.col2:not(:checked)
+~ .hs.shed.row1.col3:checked
+~ div
+> div
+> shed
+> .row1.col1 > i:nth-of-type(5):before,
+.hs.row2.col3:checked
+~ .hs.shed.row1.col2:checked
+~ .hs.shed.row1.col3:not(:checked)
+~ .hs.shed.row1.col4:checked
+~ div
+> div
+> shed
+> .row1.col2 > i:nth-of-type(5):before,
+.hs.row2.col3:checked
+~ .hs.shed.row1.col1:checked
+~ .hs.shed.row1.col2:not(:checked)
+~ .hs.shed.row1.col3:not(:checked)
+~ .hs.shed.row1.col4:checked
+~ div
+> div
+> shed
+> .row1.col1 > i:nth-of-type(5):before,
+.hs.row2.col2:checked
+~ .hs.shed.row1.col1:checked
+~ .hs.shed.row1.col2:not(:checked)
+~ .hs.shed.row1.col3:not(:checked)
+~ .hs.shed.row1.col4:checked
+~ div
+> div
+> shed
+> .row1.col1 > i:nth-of-type(5):before,
+.hs.shed.row2.col1:checked
+~ .hs.shed.row1.col1:checked
+~ .hs.shed.row1.col2:not(:checked)
+~ .hs.shed.row1.col3:checked
+~ div
+> div
+> shed
+> .row1.col1 > i:nth-of-type(5):before,
+.hs.shed.row2.col2:checked
+~ .hs.shed.row1.col2:checked
+~ .hs.shed.row1.col3:not(:checked)
+~ .hs.shed.row1.col4:checked
+~ div
+> div
+> shed
+> .row1.col2 > i:nth-of-type(5):before {
+  top: 1rem;
+  border: none;
+}
+
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1:before {
+  background: repeating-linear-gradient(#bc592f 1rem, #683f44 2.3rem);
+  width: 90%;
+  height: 98%;
+  left: 1.25rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.5rem 0 0 #20112a;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1:after {
+  width: 105%;
+  height: 5rem;
+  background: repeating-linear-gradient(to right, #683f44 1rem, #20112a 2.1rem);
+  top: -2rem;
+  border-bottom: solid 0.5rem #252529;
+  box-shadow: 0 1.5rem 0.5rem -1rem rgba(79, 1, 14, 0.9);
+  border-radius: 0.5rem;
+  left: auto;
+  right: -1rem;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(4) {
+  width: 4rem;
+  height: 4rem;
+  right: 0;
+  margin: auto;
+  background: rgba(79, 1, 14, 0.3);
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+  transform: scale(0.5);
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(4):before {
+  width: 3.4rem;
+  height: 0.5rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 1.5rem 0 #252529, 0 3rem 0 #252529, 0 0.5rem 0 #000, 0 1rem 0 rgba(79, 1, 14, 0.9), 0 2rem 0 rgba(79, 1, 14, 0.9), 0 2.5rem 0 rgba(79, 1, 14, 0.75);
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(4):after {
+  width: 0.5rem;
+  height: 3.4rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 1.5rem 0 0 #252529, 3rem 0 0 #252529;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  background: #bc592f;
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(3):after {
+  left: -4rem;
+  border: 1rem solid rgba(255, 255, 255, 0);
+  top: -11rem;
+  border-bottom-color: #252529;
+  transform: rotate(-3deg);
+  height: 4rem;
+  box-shadow: 0 3.7rem 0 -0.5rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(3):before {
+  width: 14.5rem;
+  height: 4.5rem;
+  border-top: 0.5rem solid #20112a;
+  border-bottom: 0.5rem solid #20112a;
+  top: 5rem;
+  left: -5rem;
+  background: repeating-linear-gradient(to right, #683f44, #20112a 0.5rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1.4rem);
+  border-radius: 0.5rem;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(2):before {
+  width: 1rem;
+  height: 9rem;
+  background: #20112a;
+  top: -7rem;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1:nth-of-type(odd) > i:nth-of-type(2) {
+  width: 1rem;
+  background: #20112a;
+  height: 3rem;
+  border-radius: 0.25rem;
+  top: 18.5rem;
+  left: 10rem;
+  transform: rotate(5deg);
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1:nth-of-type(odd) > i:nth-of-type(2):before {
+  transform: rotate(-45deg);
+  left: -3rem;
+  border-radius: 0 1rem 0 0;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1:nth-of-type(odd) > i:nth-of-type(2):after {
+  width: 1rem;
+  height: 4rem;
+  transform: rotate(45deg);
+  background: #20112a;
+  top: -6.5rem;
+  left: -2rem;
+  border-radius: 1rem 0 0 0;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1:nth-of-type(even) > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1:nth-of-type(even) > i:nth-of-type(1) {
+  left: 11rem;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1:nth-of-type(even) > i:nth-of-type(2):before {
+  transform: rotate(45deg);
+  left: 5rem;
+  border-radius: 1rem 0 0 0;
+  top: 11rem;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(1):before, .hs.row2.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(1):after {
+  top: -7.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(5):after {
+  display: block;
+}
+
+.hs.row2.col1:checked ~ div > div > shed > .row3.col1:after, .hs.row2.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(3):after, .hs.row2.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row2.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(3):before, .hs.row2.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(2), .hs.row2.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(5):after {
+  display: none;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row2.col1:checked ~ div > div > shed > .row1.col1 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 1rem;
+  left: 1rem;
+}
+
+.hs.shed.row2.col-2:not(:checked)
+~ .hs.row2.col1:checked
+~ .shed.hs.row2.col2:not(:checked)
+~ .hs.row0.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.shed.row2.col-2:not(:checked)
+~ .hs.row2.col1:checked
+~ .shed.hs.row2.col2:not(:checked)
+~ .hs.row0.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row2.col1:before {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col1:before {
+  height: 12.5rem;
+  box-shadow: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 1rem;
+}
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row4.col1:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(5):after {
+  display: none !important;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(1), .hs.row2.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(3):after {
+  display: none;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row2.col1:after,
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row2.col1:after {
+  width: 110%;
+  right: -1.25rem;
+}
+
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2:before {
+  background: repeating-linear-gradient(#bc592f 1rem, #683f44 2.3rem);
+  width: 90%;
+  height: 98%;
+  left: 1.25rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.5rem 0 0 #20112a;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2:after {
+  width: 105%;
+  height: 5rem;
+  background: repeating-linear-gradient(to right, #683f44 1rem, #20112a 2.1rem);
+  top: -2rem;
+  border-bottom: solid 0.5rem #252529;
+  box-shadow: 0 1.5rem 0.5rem -1rem rgba(79, 1, 14, 0.9);
+  border-radius: 0.5rem;
+  left: auto;
+  right: -1rem;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(4) {
+  width: 4rem;
+  height: 4rem;
+  right: 0;
+  margin: auto;
+  background: rgba(79, 1, 14, 0.3);
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+  transform: scale(0.5);
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(4):before {
+  width: 3.4rem;
+  height: 0.5rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 1.5rem 0 #252529, 0 3rem 0 #252529, 0 0.5rem 0 #000, 0 1rem 0 rgba(79, 1, 14, 0.9), 0 2rem 0 rgba(79, 1, 14, 0.9), 0 2.5rem 0 rgba(79, 1, 14, 0.75);
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(4):after {
+  width: 0.5rem;
+  height: 3.4rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 1.5rem 0 0 #252529, 3rem 0 0 #252529;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  background: #bc592f;
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3):after {
+  left: -4rem;
+  border: 1rem solid rgba(255, 255, 255, 0);
+  top: -11rem;
+  border-bottom-color: #252529;
+  transform: rotate(-3deg);
+  height: 4rem;
+  box-shadow: 0 3.7rem 0 -0.5rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3):before {
+  width: 14.5rem;
+  height: 4.5rem;
+  border-top: 0.5rem solid #20112a;
+  border-bottom: 0.5rem solid #20112a;
+  top: 5rem;
+  left: -5rem;
+  background: repeating-linear-gradient(to right, #683f44, #20112a 0.5rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1.4rem);
+  border-radius: 0.5rem;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(2):before {
+  width: 1rem;
+  height: 9rem;
+  background: #20112a;
+  top: -7rem;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2:nth-of-type(odd) > i:nth-of-type(2) {
+  width: 1rem;
+  background: #20112a;
+  height: 3rem;
+  border-radius: 0.25rem;
+  top: 18.5rem;
+  left: 10rem;
+  transform: rotate(5deg);
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2:nth-of-type(odd) > i:nth-of-type(2):before {
+  transform: rotate(-45deg);
+  left: -3rem;
+  border-radius: 0 1rem 0 0;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2:nth-of-type(odd) > i:nth-of-type(2):after {
+  width: 1rem;
+  height: 4rem;
+  transform: rotate(45deg);
+  background: #20112a;
+  top: -6.5rem;
+  left: -2rem;
+  border-radius: 1rem 0 0 0;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2:nth-of-type(even) > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2:nth-of-type(even) > i:nth-of-type(1) {
+  left: 11rem;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2:nth-of-type(even) > i:nth-of-type(2):before {
+  transform: rotate(45deg);
+  left: 5rem;
+  border-radius: 1rem 0 0 0;
+  top: 11rem;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(1):before, .hs.row2.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(1):after {
+  top: -7.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(5):after {
+  display: block;
+}
+
+.hs.row2.col2:checked ~ div > div > shed > .row3.col2:after, .hs.row2.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(3):after, .hs.row2.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row2.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(3):before, .hs.row2.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(2), .hs.row2.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row2.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 1rem;
+  left: 1rem;
+}
+
+.hs.shed.row2.col-1:not(:checked)
+~ .hs.row2.col2:checked
+~ .shed.hs.row2.col3:not(:checked)
+~ .hs.row0.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.shed.row2.col-1:not(:checked)
+~ .hs.row2.col2:checked
+~ .shed.hs.row2.col3:not(:checked)
+~ .hs.row0.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row2.col2:before {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2:before {
+  height: 12.5rem;
+  box-shadow: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 2rem;
+}
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row4.col2:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(5):after {
+  display: none !important;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(1), .hs.row2.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3):after {
+  display: none;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col2:after,
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col2:after {
+  width: 110%;
+  right: -1.25rem;
+}
+
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3:before {
+  background: repeating-linear-gradient(#bc592f 1rem, #683f44 2.3rem);
+  width: 90%;
+  height: 98%;
+  left: 1.25rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.5rem 0 0 #20112a;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3:after {
+  width: 105%;
+  height: 5rem;
+  background: repeating-linear-gradient(to right, #683f44 1rem, #20112a 2.1rem);
+  top: -2rem;
+  border-bottom: solid 0.5rem #252529;
+  box-shadow: 0 1.5rem 0.5rem -1rem rgba(79, 1, 14, 0.9);
+  border-radius: 0.5rem;
+  left: auto;
+  right: -1rem;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(4) {
+  width: 4rem;
+  height: 4rem;
+  right: 0;
+  margin: auto;
+  background: rgba(79, 1, 14, 0.3);
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+  transform: scale(0.5);
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(4):before {
+  width: 3.4rem;
+  height: 0.5rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 1.5rem 0 #252529, 0 3rem 0 #252529, 0 0.5rem 0 #000, 0 1rem 0 rgba(79, 1, 14, 0.9), 0 2rem 0 rgba(79, 1, 14, 0.9), 0 2.5rem 0 rgba(79, 1, 14, 0.75);
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(4):after {
+  width: 0.5rem;
+  height: 3.4rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 1.5rem 0 0 #252529, 3rem 0 0 #252529;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  background: #bc592f;
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3):after {
+  left: -4rem;
+  border: 1rem solid rgba(255, 255, 255, 0);
+  top: -11rem;
+  border-bottom-color: #252529;
+  transform: rotate(-3deg);
+  height: 4rem;
+  box-shadow: 0 3.7rem 0 -0.5rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3):before {
+  width: 14.5rem;
+  height: 4.5rem;
+  border-top: 0.5rem solid #20112a;
+  border-bottom: 0.5rem solid #20112a;
+  top: 5rem;
+  left: -5rem;
+  background: repeating-linear-gradient(to right, #683f44, #20112a 0.5rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1.4rem);
+  border-radius: 0.5rem;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(2):before {
+  width: 1rem;
+  height: 9rem;
+  background: #20112a;
+  top: -7rem;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3:nth-of-type(odd) > i:nth-of-type(2) {
+  width: 1rem;
+  background: #20112a;
+  height: 3rem;
+  border-radius: 0.25rem;
+  top: 18.5rem;
+  left: 10rem;
+  transform: rotate(5deg);
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3:nth-of-type(odd) > i:nth-of-type(2):before {
+  transform: rotate(-45deg);
+  left: -3rem;
+  border-radius: 0 1rem 0 0;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3:nth-of-type(odd) > i:nth-of-type(2):after {
+  width: 1rem;
+  height: 4rem;
+  transform: rotate(45deg);
+  background: #20112a;
+  top: -6.5rem;
+  left: -2rem;
+  border-radius: 1rem 0 0 0;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3:nth-of-type(even) > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3:nth-of-type(even) > i:nth-of-type(1) {
+  left: 11rem;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3:nth-of-type(even) > i:nth-of-type(2):before {
+  transform: rotate(45deg);
+  left: 5rem;
+  border-radius: 1rem 0 0 0;
+  top: 11rem;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(1):before, .hs.row2.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(1):after {
+  top: -7.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(5):after {
+  display: block;
+}
+
+.hs.row2.col3:checked ~ div > div > shed > .row3.col3:after, .hs.row2.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(3):after, .hs.row2.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(3):before, .hs.row2.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(2), .hs.row2.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(5):after {
+  display: none;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row2.col3:checked ~ div > div > shed > .row1.col3 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 1rem;
+}
+
+.hs.shed.row2.col0:not(:checked)
+~ .hs.row2.col3:checked
+~ .shed.hs.row2.col4:not(:checked)
+~ .hs.row0.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.shed.row2.col0:not(:checked)
+~ .hs.row2.col3:checked
+~ .shed.hs.row2.col4:not(:checked)
+~ .hs.row0.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col3:before {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col3:before {
+  height: 12.5rem;
+  box-shadow: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 2rem;
+}
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row4.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(5):after {
+  display: none !important;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(1), .hs.row2.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col3:after,
+.hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col3:after {
+  width: 110%;
+  right: -1.25rem;
+}
+
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4:before {
+  background: repeating-linear-gradient(#bc592f 1rem, #683f44 2.3rem);
+  width: 90%;
+  height: 98%;
+  left: 1.25rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.5rem 0 0 #20112a;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4:after {
+  width: 105%;
+  height: 5rem;
+  background: repeating-linear-gradient(to right, #683f44 1rem, #20112a 2.1rem);
+  top: -2rem;
+  border-bottom: solid 0.5rem #252529;
+  box-shadow: 0 1.5rem 0.5rem -1rem rgba(79, 1, 14, 0.9);
+  border-radius: 0.5rem;
+  left: auto;
+  right: -1rem;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(4) {
+  width: 4rem;
+  height: 4rem;
+  right: 0;
+  margin: auto;
+  background: rgba(79, 1, 14, 0.3);
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+  transform: scale(0.5);
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(4):before {
+  width: 3.4rem;
+  height: 0.5rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 1.5rem 0 #252529, 0 3rem 0 #252529, 0 0.5rem 0 #000, 0 1rem 0 rgba(79, 1, 14, 0.9), 0 2rem 0 rgba(79, 1, 14, 0.9), 0 2.5rem 0 rgba(79, 1, 14, 0.75);
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(4):after {
+  width: 0.5rem;
+  height: 3.4rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 1.5rem 0 0 #252529, 3rem 0 0 #252529;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  background: #bc592f;
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(3):after {
+  left: -4rem;
+  border: 1rem solid rgba(255, 255, 255, 0);
+  top: -11rem;
+  border-bottom-color: #252529;
+  transform: rotate(-3deg);
+  height: 4rem;
+  box-shadow: 0 3.7rem 0 -0.5rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(3):before {
+  width: 14.5rem;
+  height: 4.5rem;
+  border-top: 0.5rem solid #20112a;
+  border-bottom: 0.5rem solid #20112a;
+  top: 5rem;
+  left: -5rem;
+  background: repeating-linear-gradient(to right, #683f44, #20112a 0.5rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1.4rem);
+  border-radius: 0.5rem;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(2):before {
+  width: 1rem;
+  height: 9rem;
+  background: #20112a;
+  top: -7rem;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4:nth-of-type(odd) > i:nth-of-type(2) {
+  width: 1rem;
+  background: #20112a;
+  height: 3rem;
+  border-radius: 0.25rem;
+  top: 18.5rem;
+  left: 10rem;
+  transform: rotate(5deg);
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4:nth-of-type(odd) > i:nth-of-type(2):before {
+  transform: rotate(-45deg);
+  left: -3rem;
+  border-radius: 0 1rem 0 0;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4:nth-of-type(odd) > i:nth-of-type(2):after {
+  width: 1rem;
+  height: 4rem;
+  transform: rotate(45deg);
+  background: #20112a;
+  top: -6.5rem;
+  left: -2rem;
+  border-radius: 1rem 0 0 0;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4:nth-of-type(even) > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4:nth-of-type(even) > i:nth-of-type(1) {
+  left: 11rem;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4:nth-of-type(even) > i:nth-of-type(2):before {
+  transform: rotate(45deg);
+  left: 5rem;
+  border-radius: 1rem 0 0 0;
+  top: 11rem;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(1):before, .hs.row2.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(1):after {
+  top: -7.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(5):after {
+  display: block;
+}
+
+.hs.row2.col4:checked ~ div > div > shed > .row3.col4:after, .hs.row2.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(3):after, .hs.row2.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row2.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(3):before, .hs.row2.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(2), .hs.row2.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(5):after {
+  display: none;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row2.col4:checked ~ div > div > shed > .row1.col4 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 1rem;
+}
+
+.hs.shed.row2.col1:not(:checked)
+~ .hs.row2.col4:checked
+~ .shed.hs.row2.col5:not(:checked)
+~ .hs.row0.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.shed.row2.col1:not(:checked)
+~ .hs.row2.col4:checked
+~ .shed.hs.row2.col5:not(:checked)
+~ .hs.row0.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4:before {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col4:before {
+  height: 12.5rem;
+  box-shadow: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 2rem;
+}
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row4.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(5):after {
+  display: none !important;
+}
+
+.hs.row2.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(1), .hs.row2.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(3):after {
+  display: none;
+}
+
+.hs.row2.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col4:after,
+.hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col4:after {
+  width: 110%;
+  right: -1.25rem;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col1:before {
+  width: 110%;
+}
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col2:after {
+  width: 120%;
+  left: -1.25rem;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col2:before {
+  width: 110%;
+}
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col3:after {
+  width: 120%;
+  left: -1.25rem;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col3:before {
+  width: 110%;
+}
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col4:after {
+  width: 120%;
+  left: -1.25rem;
+}
+
+.hs.row2.col2:checked ~ .hs.shed.row2.col3:not(:checked) ~ div > div > shed > .row2.col2 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row2.col2:checked ~ .hs.shed.row2.col3:not(:checked) ~ div > div > shed > .row2.col2 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row2.col4:checked ~ .hs.shed.row2.col5:not(:checked) ~ div > div > shed > .row2.col4 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row2.col4:checked ~ .hs.shed.row2.col5:not(:checked) ~ div > div > shed > .row2.col4 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3):after, .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(1) {
+  display: none;
+}
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3):before {
+  width: 10.25rem;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3):after {
+  left: 6rem;
+  transform: rotate(3deg);
+}
+.hs.row2.col2:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row2.col2:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(5):after {
+  left: -2.5rem;
+  transform: rotate(-3deg);
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col-1:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3):after, .hs.row2.col2:checked ~ .hs.row2.col-1:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(1),
+.hs.row2.col2:checked ~ .hs.row2.col-3:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3):after,
+.hs.row2.col2:checked ~ .hs.row2.col-3:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col-1:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(5):after {
+  left: 10rem;
+  transform: rotate(2deg);
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3):after, .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(1) {
+  display: none;
+}
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3):before {
+  width: 10.25rem;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3):after {
+  left: 6rem;
+  transform: rotate(3deg);
+}
+.hs.row2.col3:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row2.col3:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(5):after {
+  left: -2.5rem;
+  transform: rotate(-3deg);
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col0:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3):after, .hs.row2.col3:checked ~ .hs.row2.col0:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(1),
+.hs.row2.col3:checked ~ .hs.row2.col-2:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3):after,
+.hs.row2.col3:checked ~ .hs.row2.col-2:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col0:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(5):after {
+  left: 10rem;
+  transform: rotate(2deg);
+}
+
+.hs.shed.row2.col1:checked
+~ .hs.shed.row2.col2:not(:checked)
+~ .hs.shed.row2.col3:not(:checked)
+~ .hs.shed.row2.col4:checked
+~ div > div > shed > .row2.col1 > i:nth-of-type(5):before {
+  display: block;
+  width: 210%;
+}
+
+.hs.shed.row2.col1:checked
+~ .hs.shed.row2.col2:not(:checked)
+~ .hs.shed.row2.col3:checked
+~ div
+> div
+> shed
+> .row2.col1 > i:nth-of-type(5):before,
+.hs.shed.row2.col2:checked
+~ .hs.shed.row2.col3:not(:checked)
+~ .hs.shed.row2.col4:checked
+~ div
+> div
+> shed
+> .row2.col2 > i:nth-of-type(5):before {
+  display: block;
+  width: 110%;
+}
+
+.hs.row3.col2:checked
+~ .hs.shed.row2.col1:checked
+~ .hs.shed.row2.col2:not(:checked)
+~ .hs.shed.row2.col3:checked
+~ div
+> div
+> shed
+> .row2.col1 > i:nth-of-type(5):before,
+.hs.row3.col3:checked
+~ .hs.shed.row2.col2:checked
+~ .hs.shed.row2.col3:not(:checked)
+~ .hs.shed.row2.col4:checked
+~ div
+> div
+> shed
+> .row2.col2 > i:nth-of-type(5):before,
+.hs.row3.col3:checked
+~ .hs.shed.row2.col1:checked
+~ .hs.shed.row2.col2:not(:checked)
+~ .hs.shed.row2.col3:not(:checked)
+~ .hs.shed.row2.col4:checked
+~ div
+> div
+> shed
+> .row2.col1 > i:nth-of-type(5):before,
+.hs.row3.col2:checked
+~ .hs.shed.row2.col1:checked
+~ .hs.shed.row2.col2:not(:checked)
+~ .hs.shed.row2.col3:not(:checked)
+~ .hs.shed.row2.col4:checked
+~ div
+> div
+> shed
+> .row2.col1 > i:nth-of-type(5):before,
+.hs.shed.row3.col1:checked
+~ .hs.shed.row2.col1:checked
+~ .hs.shed.row2.col2:not(:checked)
+~ .hs.shed.row2.col3:checked
+~ div
+> div
+> shed
+> .row2.col1 > i:nth-of-type(5):before,
+.hs.shed.row3.col2:checked
+~ .hs.shed.row2.col2:checked
+~ .hs.shed.row2.col3:not(:checked)
+~ .hs.shed.row2.col4:checked
+~ div
+> div
+> shed
+> .row2.col2 > i:nth-of-type(5):before {
+  top: 1rem;
+  border: none;
+}
+
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1:before {
+  background: repeating-linear-gradient(#bc592f 1rem, #683f44 2.3rem);
+  width: 90%;
+  height: 98%;
+  left: 1.25rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.5rem 0 0 #20112a;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1:after {
+  width: 105%;
+  height: 5rem;
+  background: repeating-linear-gradient(to right, #683f44 1rem, #20112a 2.1rem);
+  top: -2rem;
+  border-bottom: solid 0.5rem #252529;
+  box-shadow: 0 1.5rem 0.5rem -1rem rgba(79, 1, 14, 0.9);
+  border-radius: 0.5rem;
+  left: auto;
+  right: -1rem;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(4) {
+  width: 4rem;
+  height: 4rem;
+  right: 0;
+  margin: auto;
+  background: rgba(79, 1, 14, 0.3);
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+  transform: scale(0.5);
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(4):before {
+  width: 3.4rem;
+  height: 0.5rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 1.5rem 0 #252529, 0 3rem 0 #252529, 0 0.5rem 0 #000, 0 1rem 0 rgba(79, 1, 14, 0.9), 0 2rem 0 rgba(79, 1, 14, 0.9), 0 2.5rem 0 rgba(79, 1, 14, 0.75);
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(4):after {
+  width: 0.5rem;
+  height: 3.4rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 1.5rem 0 0 #252529, 3rem 0 0 #252529;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  background: #bc592f;
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(3):after {
+  left: -4rem;
+  border: 1rem solid rgba(255, 255, 255, 0);
+  top: -11rem;
+  border-bottom-color: #252529;
+  transform: rotate(-3deg);
+  height: 4rem;
+  box-shadow: 0 3.7rem 0 -0.5rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(3):before {
+  width: 14.5rem;
+  height: 4.5rem;
+  border-top: 0.5rem solid #20112a;
+  border-bottom: 0.5rem solid #20112a;
+  top: 5rem;
+  left: -5rem;
+  background: repeating-linear-gradient(to right, #683f44, #20112a 0.5rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1.4rem);
+  border-radius: 0.5rem;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(2):before {
+  width: 1rem;
+  height: 9rem;
+  background: #20112a;
+  top: -7rem;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1:nth-of-type(odd) > i:nth-of-type(2) {
+  width: 1rem;
+  background: #20112a;
+  height: 3rem;
+  border-radius: 0.25rem;
+  top: 18.5rem;
+  left: 10rem;
+  transform: rotate(5deg);
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1:nth-of-type(odd) > i:nth-of-type(2):before {
+  transform: rotate(-45deg);
+  left: -3rem;
+  border-radius: 0 1rem 0 0;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1:nth-of-type(odd) > i:nth-of-type(2):after {
+  width: 1rem;
+  height: 4rem;
+  transform: rotate(45deg);
+  background: #20112a;
+  top: -6.5rem;
+  left: -2rem;
+  border-radius: 1rem 0 0 0;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1:nth-of-type(even) > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1:nth-of-type(even) > i:nth-of-type(1) {
+  left: 11rem;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1:nth-of-type(even) > i:nth-of-type(2):before {
+  transform: rotate(45deg);
+  left: 5rem;
+  border-radius: 1rem 0 0 0;
+  top: 11rem;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(1):before, .hs.row3.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(1):after {
+  top: -7.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(5):after {
+  display: block;
+}
+
+.hs.row3.col1:checked ~ div > div > shed > .row4.col1:after, .hs.row3.col1:checked ~ div > div > shed > .row4.col1 > i:nth-of-type(3):after, .hs.row3.col1:checked ~ div > div > shed > .row4.col1 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row3.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(3):before, .hs.row3.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(2), .hs.row3.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(5):after {
+  display: none;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row3.col1:checked ~ div > div > shed > .row2.col1 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 1rem;
+  left: 2rem;
+}
+
+.hs.shed.row3.col-2:not(:checked)
+~ .hs.row3.col1:checked
+~ .shed.hs.row3.col2:not(:checked)
+~ .hs.row1.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.shed.row3.col-2:not(:checked)
+~ .hs.row3.col1:checked
+~ .shed.hs.row3.col2:not(:checked)
+~ .hs.row1.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row3.col1:before {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row2.col1:before {
+  height: 12.5rem;
+  box-shadow: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 1rem;
+}
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row5.col1:checked ~ .hs.row3.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col1:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(5):after {
+  display: none !important;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(1), .hs.row3.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row3.col1 > i:nth-of-type(3):after {
+  display: none;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row3.col1:after,
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row3.col1:after {
+  width: 110%;
+  right: -1.25rem;
+}
+
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2:before {
+  background: repeating-linear-gradient(#bc592f 1rem, #683f44 2.3rem);
+  width: 90%;
+  height: 98%;
+  left: 1.25rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.5rem 0 0 #20112a;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2:after {
+  width: 105%;
+  height: 5rem;
+  background: repeating-linear-gradient(to right, #683f44 1rem, #20112a 2.1rem);
+  top: -2rem;
+  border-bottom: solid 0.5rem #252529;
+  box-shadow: 0 1.5rem 0.5rem -1rem rgba(79, 1, 14, 0.9);
+  border-radius: 0.5rem;
+  left: auto;
+  right: -1rem;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(4) {
+  width: 4rem;
+  height: 4rem;
+  right: 0;
+  margin: auto;
+  background: rgba(79, 1, 14, 0.3);
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+  transform: scale(0.5);
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(4):before {
+  width: 3.4rem;
+  height: 0.5rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 1.5rem 0 #252529, 0 3rem 0 #252529, 0 0.5rem 0 #000, 0 1rem 0 rgba(79, 1, 14, 0.9), 0 2rem 0 rgba(79, 1, 14, 0.9), 0 2.5rem 0 rgba(79, 1, 14, 0.75);
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(4):after {
+  width: 0.5rem;
+  height: 3.4rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 1.5rem 0 0 #252529, 3rem 0 0 #252529;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  background: #bc592f;
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(3):after {
+  left: -4rem;
+  border: 1rem solid rgba(255, 255, 255, 0);
+  top: -11rem;
+  border-bottom-color: #252529;
+  transform: rotate(-3deg);
+  height: 4rem;
+  box-shadow: 0 3.7rem 0 -0.5rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(3):before {
+  width: 14.5rem;
+  height: 4.5rem;
+  border-top: 0.5rem solid #20112a;
+  border-bottom: 0.5rem solid #20112a;
+  top: 5rem;
+  left: -5rem;
+  background: repeating-linear-gradient(to right, #683f44, #20112a 0.5rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1.4rem);
+  border-radius: 0.5rem;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(2):before {
+  width: 1rem;
+  height: 9rem;
+  background: #20112a;
+  top: -7rem;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2:nth-of-type(odd) > i:nth-of-type(2) {
+  width: 1rem;
+  background: #20112a;
+  height: 3rem;
+  border-radius: 0.25rem;
+  top: 18.5rem;
+  left: 10rem;
+  transform: rotate(5deg);
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2:nth-of-type(odd) > i:nth-of-type(2):before {
+  transform: rotate(-45deg);
+  left: -3rem;
+  border-radius: 0 1rem 0 0;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2:nth-of-type(odd) > i:nth-of-type(2):after {
+  width: 1rem;
+  height: 4rem;
+  transform: rotate(45deg);
+  background: #20112a;
+  top: -6.5rem;
+  left: -2rem;
+  border-radius: 1rem 0 0 0;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2:nth-of-type(even) > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2:nth-of-type(even) > i:nth-of-type(1) {
+  left: 11rem;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2:nth-of-type(even) > i:nth-of-type(2):before {
+  transform: rotate(45deg);
+  left: 5rem;
+  border-radius: 1rem 0 0 0;
+  top: 11rem;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(1):before, .hs.row3.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(1):after {
+  top: -7.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(5):after {
+  display: block;
+}
+
+.hs.row3.col2:checked ~ div > div > shed > .row4.col2:after, .hs.row3.col2:checked ~ div > div > shed > .row4.col2 > i:nth-of-type(3):after, .hs.row3.col2:checked ~ div > div > shed > .row4.col2 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row3.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3):before, .hs.row3.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(2), .hs.row3.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row3.col2:checked ~ div > div > shed > .row2.col2 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 1rem;
+}
+
+.hs.shed.row3.col-1:not(:checked)
+~ .hs.row3.col2:checked
+~ .shed.hs.row3.col3:not(:checked)
+~ .hs.row1.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.shed.row3.col-1:not(:checked)
+~ .hs.row3.col2:checked
+~ .shed.hs.row3.col3:not(:checked)
+~ .hs.row1.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row3.col2:before {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col2:before {
+  height: 12.5rem;
+  box-shadow: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 1rem;
+  left: 1rem;
+}
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row5.col2:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(5):after {
+  display: none !important;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(1), .hs.row3.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(3):after {
+  display: none;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row3.col2:after,
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row3.col2:after {
+  width: 110%;
+  right: -1.25rem;
+}
+
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3:before {
+  background: repeating-linear-gradient(#bc592f 1rem, #683f44 2.3rem);
+  width: 90%;
+  height: 98%;
+  left: 1.25rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.5rem 0 0 #20112a;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3:after {
+  width: 105%;
+  height: 5rem;
+  background: repeating-linear-gradient(to right, #683f44 1rem, #20112a 2.1rem);
+  top: -2rem;
+  border-bottom: solid 0.5rem #252529;
+  box-shadow: 0 1.5rem 0.5rem -1rem rgba(79, 1, 14, 0.9);
+  border-radius: 0.5rem;
+  left: auto;
+  right: -1rem;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(4) {
+  width: 4rem;
+  height: 4rem;
+  right: 0;
+  margin: auto;
+  background: rgba(79, 1, 14, 0.3);
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+  transform: scale(0.5);
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(4):before {
+  width: 3.4rem;
+  height: 0.5rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 1.5rem 0 #252529, 0 3rem 0 #252529, 0 0.5rem 0 #000, 0 1rem 0 rgba(79, 1, 14, 0.9), 0 2rem 0 rgba(79, 1, 14, 0.9), 0 2.5rem 0 rgba(79, 1, 14, 0.75);
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(4):after {
+  width: 0.5rem;
+  height: 3.4rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 1.5rem 0 0 #252529, 3rem 0 0 #252529;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  background: #bc592f;
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(3):after {
+  left: -4rem;
+  border: 1rem solid rgba(255, 255, 255, 0);
+  top: -11rem;
+  border-bottom-color: #252529;
+  transform: rotate(-3deg);
+  height: 4rem;
+  box-shadow: 0 3.7rem 0 -0.5rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(3):before {
+  width: 14.5rem;
+  height: 4.5rem;
+  border-top: 0.5rem solid #20112a;
+  border-bottom: 0.5rem solid #20112a;
+  top: 5rem;
+  left: -5rem;
+  background: repeating-linear-gradient(to right, #683f44, #20112a 0.5rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1.4rem);
+  border-radius: 0.5rem;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(2):before {
+  width: 1rem;
+  height: 9rem;
+  background: #20112a;
+  top: -7rem;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3:nth-of-type(odd) > i:nth-of-type(2) {
+  width: 1rem;
+  background: #20112a;
+  height: 3rem;
+  border-radius: 0.25rem;
+  top: 18.5rem;
+  left: 10rem;
+  transform: rotate(5deg);
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3:nth-of-type(odd) > i:nth-of-type(2):before {
+  transform: rotate(-45deg);
+  left: -3rem;
+  border-radius: 0 1rem 0 0;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3:nth-of-type(odd) > i:nth-of-type(2):after {
+  width: 1rem;
+  height: 4rem;
+  transform: rotate(45deg);
+  background: #20112a;
+  top: -6.5rem;
+  left: -2rem;
+  border-radius: 1rem 0 0 0;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3:nth-of-type(even) > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3:nth-of-type(even) > i:nth-of-type(1) {
+  left: 11rem;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3:nth-of-type(even) > i:nth-of-type(2):before {
+  transform: rotate(45deg);
+  left: 5rem;
+  border-radius: 1rem 0 0 0;
+  top: 11rem;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(1):before, .hs.row3.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(1):after {
+  top: -7.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(5):after {
+  display: block;
+}
+
+.hs.row3.col3:checked ~ div > div > shed > .row4.col3:after, .hs.row3.col3:checked ~ div > div > shed > .row4.col3 > i:nth-of-type(3):after, .hs.row3.col3:checked ~ div > div > shed > .row4.col3 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row3.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3):before, .hs.row3.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(2), .hs.row3.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(5):after {
+  display: none;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row3.col3:checked ~ div > div > shed > .row2.col3 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 1rem;
+  left: 2rem;
+}
+
+.hs.shed.row3.col0:not(:checked)
+~ .hs.row3.col3:checked
+~ .shed.hs.row3.col4:not(:checked)
+~ .hs.row1.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.shed.row3.col0:not(:checked)
+~ .hs.row3.col3:checked
+~ .shed.hs.row3.col4:not(:checked)
+~ .hs.row1.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row3.col3:before {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col3:before {
+  height: 12.5rem;
+  box-shadow: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 1rem;
+  left: 1rem;
+}
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row5.col3:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(5):after {
+  display: none !important;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(1), .hs.row3.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(3):after {
+  display: none;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col3:after,
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col3:after {
+  width: 110%;
+  right: -1.25rem;
+}
+
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4:before {
+  background: repeating-linear-gradient(#bc592f 1rem, #683f44 2.3rem);
+  width: 90%;
+  height: 98%;
+  left: 1.25rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.5rem 0 0 #20112a;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4:after {
+  width: 105%;
+  height: 5rem;
+  background: repeating-linear-gradient(to right, #683f44 1rem, #20112a 2.1rem);
+  top: -2rem;
+  border-bottom: solid 0.5rem #252529;
+  box-shadow: 0 1.5rem 0.5rem -1rem rgba(79, 1, 14, 0.9);
+  border-radius: 0.5rem;
+  left: auto;
+  right: -1rem;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(4) {
+  width: 4rem;
+  height: 4rem;
+  right: 0;
+  margin: auto;
+  background: rgba(79, 1, 14, 0.3);
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+  transform: scale(0.5);
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(4):before {
+  width: 3.4rem;
+  height: 0.5rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 1.5rem 0 #252529, 0 3rem 0 #252529, 0 0.5rem 0 #000, 0 1rem 0 rgba(79, 1, 14, 0.9), 0 2rem 0 rgba(79, 1, 14, 0.9), 0 2.5rem 0 rgba(79, 1, 14, 0.75);
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(4):after {
+  width: 0.5rem;
+  height: 3.4rem;
+  background: #252529;
+  left: 0.3rem;
+  top: 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 1.5rem 0 0 #252529, 3rem 0 0 #252529;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  background: #bc592f;
+  top: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(3):after {
+  left: -4rem;
+  border: 1rem solid rgba(255, 255, 255, 0);
+  top: -11rem;
+  border-bottom-color: #252529;
+  transform: rotate(-3deg);
+  height: 4rem;
+  box-shadow: 0 3.7rem 0 -0.5rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(3):before {
+  width: 14.5rem;
+  height: 4.5rem;
+  border-top: 0.5rem solid #20112a;
+  border-bottom: 0.5rem solid #20112a;
+  top: 5rem;
+  left: -5rem;
+  background: repeating-linear-gradient(to right, #683f44, #20112a 0.5rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1.4rem);
+  border-radius: 0.5rem;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(2):before {
+  width: 1rem;
+  height: 9rem;
+  background: #20112a;
+  top: -7rem;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4:nth-of-type(odd) > i:nth-of-type(2) {
+  width: 1rem;
+  background: #20112a;
+  height: 3rem;
+  border-radius: 0.25rem;
+  top: 18.5rem;
+  left: 10rem;
+  transform: rotate(5deg);
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4:nth-of-type(odd) > i:nth-of-type(2):before {
+  transform: rotate(-45deg);
+  left: -3rem;
+  border-radius: 0 1rem 0 0;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4:nth-of-type(odd) > i:nth-of-type(2):after {
+  width: 1rem;
+  height: 4rem;
+  transform: rotate(45deg);
+  background: #20112a;
+  top: -6.5rem;
+  left: -2rem;
+  border-radius: 1rem 0 0 0;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4:nth-of-type(even) > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4:nth-of-type(even) > i:nth-of-type(1) {
+  left: 11rem;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4:nth-of-type(even) > i:nth-of-type(2):before {
+  transform: rotate(45deg);
+  left: 5rem;
+  border-radius: 1rem 0 0 0;
+  top: 11rem;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(1):before, .hs.row3.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(1):after {
+  top: -7.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(5):after {
+  display: block;
+}
+
+.hs.row3.col4:checked ~ div > div > shed > .row4.col4:after, .hs.row3.col4:checked ~ div > div > shed > .row4.col4 > i:nth-of-type(3):after, .hs.row3.col4:checked ~ div > div > shed > .row4.col4 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row3.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(3):before, .hs.row3.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(2), .hs.row3.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(5):after {
+  display: none;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row3.col4:checked ~ div > div > shed > .row2.col4 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 2rem;
+  left: 1rem;
+}
+
+.hs.shed.row3.col1:not(:checked)
+~ .hs.row3.col4:checked
+~ .shed.hs.row3.col5:not(:checked)
+~ .hs.row1.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.shed.row3.col1:not(:checked)
+~ .hs.row3.col4:checked
+~ .shed.hs.row3.col5:not(:checked)
+~ .hs.row1.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col4:before {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col4:before {
+  height: 12.5rem;
+  box-shadow: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(3) {
+  height: 0;
+}
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(4) {
+  transform: scale(1);
+  right: 1rem;
+  left: 2rem;
+}
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row5.col4:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2 > i:nth-of-type(5):after {
+  display: none;
+}
+
+.hs.row4.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(5):after {
+  display: none !important;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(1), .hs.row3.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row3.col4 > i:nth-of-type(3):after {
+  display: none;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row3.col4:after,
+.hs.row3.col5:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row3.col4:after {
+  width: 110%;
+  right: -1.25rem;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col1:before {
+  width: 110%;
+}
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col2:after {
+  width: 120%;
+  left: -1.25rem;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col2:before {
+  width: 110%;
+}
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col3:after {
+  width: 120%;
+  left: -1.25rem;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col3:before {
+  width: 110%;
+}
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col4:after {
+  width: 120%;
+  left: -1.25rem;
+}
+
+.hs.row3.col2:checked ~ .hs.shed.row3.col3:not(:checked) ~ div > div > shed > .row3.col2 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row3.col2:checked ~ .hs.shed.row3.col3:not(:checked) ~ div > div > shed > .row3.col2 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row3.col4:checked ~ .hs.shed.row3.col5:not(:checked) ~ div > div > shed > .row3.col4 > i:nth-of-type(3):after {
+  left: 7rem;
+  transform: rotate(3deg);
+}
+.hs.row3.col4:checked ~ .hs.shed.row3.col5:not(:checked) ~ div > div > shed > .row3.col4 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(3):after, .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(1) {
+  display: none;
+}
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(3):before {
+  width: 10.25rem;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col1:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(3):after {
+  left: 6rem;
+  transform: rotate(3deg);
+}
+.hs.row3.col2:checked ~ .hs.row3.col1:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row3.col2:checked ~ .hs.row3.col1:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(5):after {
+  left: -2.5rem;
+  transform: rotate(-3deg);
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col-1:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(3):after, .hs.row3.col2:checked ~ .hs.row3.col-1:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(1),
+.hs.row3.col2:checked ~ .hs.row3.col-3:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(3):after,
+.hs.row3.col2:checked ~ .hs.row3.col-3:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col-1:checked ~ div > div > shed > .row3.col2 > i:nth-of-type(5):after {
+  left: 10rem;
+  transform: rotate(2deg);
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(3):after, .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(1) {
+  display: none;
+}
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(3):before {
+  width: 10.25rem;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(3):after {
+  left: 6rem;
+  transform: rotate(3deg);
+}
+.hs.row3.col3:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row3.col3:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(5):after {
+  left: -2.5rem;
+  transform: rotate(-3deg);
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col0:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(3):after, .hs.row3.col3:checked ~ .hs.row3.col0:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(1),
+.hs.row3.col3:checked ~ .hs.row3.col-2:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(3):after,
+.hs.row3.col3:checked ~ .hs.row3.col-2:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col0:checked ~ div > div > shed > .row3.col3 > i:nth-of-type(5):after {
+  left: 10rem;
+  transform: rotate(2deg);
+}
+
+.hs.shed.row3.col1:checked
+~ .hs.shed.row3.col2:not(:checked)
+~ .hs.shed.row3.col3:not(:checked)
+~ .hs.shed.row3.col4:checked
+~ div > div > shed > .row3.col1 > i:nth-of-type(5):before {
+  display: block;
+  width: 210%;
+}
+
+.hs.shed.row3.col1:checked
+~ .hs.shed.row3.col2:not(:checked)
+~ .hs.shed.row3.col3:checked
+~ div
+> div
+> shed
+> .row3.col1 > i:nth-of-type(5):before,
+.hs.shed.row3.col2:checked
+~ .hs.shed.row3.col3:not(:checked)
+~ .hs.shed.row3.col4:checked
+~ div
+> div
+> shed
+> .row3.col2 > i:nth-of-type(5):before {
+  display: block;
+  width: 110%;
+}
+
+.hs.row4.col2:checked
+~ .hs.shed.row3.col1:checked
+~ .hs.shed.row3.col2:not(:checked)
+~ .hs.shed.row3.col3:checked
+~ div
+> div
+> shed
+> .row3.col1 > i:nth-of-type(5):before,
+.hs.row4.col3:checked
+~ .hs.shed.row3.col2:checked
+~ .hs.shed.row3.col3:not(:checked)
+~ .hs.shed.row3.col4:checked
+~ div
+> div
+> shed
+> .row3.col2 > i:nth-of-type(5):before,
+.hs.row4.col3:checked
+~ .hs.shed.row3.col1:checked
+~ .hs.shed.row3.col2:not(:checked)
+~ .hs.shed.row3.col3:not(:checked)
+~ .hs.shed.row3.col4:checked
+~ div
+> div
+> shed
+> .row3.col1 > i:nth-of-type(5):before,
+.hs.row4.col2:checked
+~ .hs.shed.row3.col1:checked
+~ .hs.shed.row3.col2:not(:checked)
+~ .hs.shed.row3.col3:not(:checked)
+~ .hs.shed.row3.col4:checked
+~ div
+> div
+> shed
+> .row3.col1 > i:nth-of-type(5):before,
+.hs.shed.row4.col1:checked
+~ .hs.shed.row3.col1:checked
+~ .hs.shed.row3.col2:not(:checked)
+~ .hs.shed.row3.col3:checked
+~ div
+> div
+> shed
+> .row3.col1 > i:nth-of-type(5):before,
+.hs.shed.row4.col2:checked
+~ .hs.shed.row3.col2:checked
+~ .hs.shed.row3.col3:not(:checked)
+~ .hs.shed.row3.col4:checked
+~ div
+> div
+> shed
+> .row3.col2 > i:nth-of-type(5):before {
+  top: 1rem;
+  border: none;
+}
+
+div > div > house > label > i:nth-of-type(5) {
+  width: 13rem;
+  height: 3rem;
+  top: 1rem;
+  border-bottom-color: #683f44;
+  box-shadow: 0 0.25rem 0 #683f44;
+  border-radius: 50%;
+  left: -0.5rem;
+  z-index: 1;
+  display: none;
+}
+div > div > house > label > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 1rem;
+  transform: rotate(5deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2rem 0.25rem 0 #bc2f60) drop-shadow(2rem 0rem 0 #bc592f);
+}
+div > div > house > label > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 7rem;
+  transform: rotate(-5deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2rem -0.25rem 0 #bc2f60) drop-shadow(2rem 0rem 0 #bc592f);
+}
+
+.hs.row1.col1:checked ~ div > div > house > .row1.col1:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1.col1 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(1):before, .hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row1.col1:checked ~ div > div > house > .row2.col1 i:nth-of-type(2),
+.hs.row1.col1:checked ~ div > div > house > .row2.col1 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row2.col1:checked
+~ .hs.shed.row1.col1:checked
+~ div > div > house > .row1.col1 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row2.col1:checked
+~ .hs.shed.row1.col1:checked
+~ div > div > house > .row2.col1:before {
+  background: #bc592f;
+}
+
+.hs.shed.row2.col1:checked
+~ .hs.house.row1.col1:checked
+~ div > div > house > .row1.col1 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row2.col1:checked
+~ .hs.house.row1.col1:checked
+~ div > div > house > .row2.col1:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row1.col-2:not(:checked)
+~ .hs.house.row1.col1:checked
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.house.row-1.col1:checked
+~ div > div > house > .row1.col1 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row1.col-2:not(:checked)
+~ .hs.house.row1.col1:checked
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.house.row-1.col1:checked
+~ div > div > house > .row1.col1 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row0.col0:checked
+~ .hs.row0.col1:not(:checked)
+~ div > div > house > .row1.col1 > i:nth-of-type(2):after,
+.hs.house.row0.col1:not(:checked)
+~ .hs.house.row-1.col1:checked
+~ div > div > house > .row1.col1 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row0.col0:checked
+~ .hs.row0.col1:not(:checked)
+~ div > div > house > .row1.col1 > i:nth-of-type(1),
+.hs.house.row0.col1:not(:checked)
+~ .hs.house.row-1.col1:checked
+~ div > div > house > .row1.col1 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.house.row0.col0:not(:checked)
+~ .hs.shed.row0.col0:not(:checked)
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col1 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.house.row0.col0:not(:checked)
+~ .hs.shed.row0.col0:not(:checked)
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col1 i:nth-of-type(1),
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.house.row0.col0:not(:checked)
+~ .hs.shed.row0.col0:not(:checked)
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col1 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col2 i:nth-of-type(1),
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row1.col2:checked ~ div > div > house > .row1.col2:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2.col3 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(1):before, .hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row1.col2:checked ~ div > div > house > .row2.col2 i:nth-of-type(2),
+.hs.row1.col2:checked ~ div > div > house > .row2.col2 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row2.col2:checked
+~ .hs.shed.row1.col2:checked
+~ div > div > house > .row1.col2 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row2.col2:checked
+~ .hs.shed.row1.col2:checked
+~ div > div > house > .row2.col2:before {
+  background: #bc592f;
+}
+
+.hs.shed.row2.col2:checked
+~ .hs.house.row1.col2:checked
+~ div > div > house > .row1.col2 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row2.col2:checked
+~ .hs.house.row1.col2:checked
+~ div > div > house > .row2.col2:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row1.col-1:not(:checked)
+~ .hs.house.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ .hs.house.row-1.col2:checked
+~ div > div > house > .row1.col2 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row1.col-1:not(:checked)
+~ .hs.house.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ .hs.house.row-1.col2:checked
+~ div > div > house > .row1.col2 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row0.col1:checked
+~ .hs.row0.col2:not(:checked)
+~ div > div > house > .row1.col2 > i:nth-of-type(2):after,
+.hs.house.row0.col2:not(:checked)
+~ .hs.house.row-1.col2:checked
+~ div > div > house > .row1.col2 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row0.col1:checked
+~ .hs.row0.col2:not(:checked)
+~ div > div > house > .row1.col2 > i:nth-of-type(1),
+.hs.house.row0.col2:not(:checked)
+~ .hs.house.row-1.col2:checked
+~ div > div > house > .row1.col2 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.house.row0.col1:not(:checked)
+~ .hs.shed.row0.col1:not(:checked)
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col2 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.house.row0.col1:not(:checked)
+~ .hs.shed.row0.col1:not(:checked)
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col2 i:nth-of-type(1),
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.house.row0.col1:not(:checked)
+~ .hs.shed.row0.col1:not(:checked)
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col2 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col2 i:nth-of-type(1),
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row1.col3:checked ~ div > div > house > .row1.col3:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3.col3 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(1):before, .hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row1.col3:checked ~ div > div > house > .row2.col3 i:nth-of-type(2),
+.hs.row1.col3:checked ~ div > div > house > .row2.col3 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row2.col3:checked
+~ .hs.shed.row1.col3:checked
+~ div > div > house > .row1.col3 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row2.col3:checked
+~ .hs.shed.row1.col3:checked
+~ div > div > house > .row2.col3:before {
+  background: #bc592f;
+}
+
+.hs.shed.row2.col3:checked
+~ .hs.house.row1.col3:checked
+~ div > div > house > .row1.col3 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row2.col3:checked
+~ .hs.house.row1.col3:checked
+~ div > div > house > .row2.col3:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row1.col0:not(:checked)
+~ .hs.house.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ .hs.house.row-1.col3:checked
+~ div > div > house > .row1.col3 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row1.col0:not(:checked)
+~ .hs.house.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ .hs.house.row-1.col3:checked
+~ div > div > house > .row1.col3 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row0.col2:checked
+~ .hs.row0.col3:not(:checked)
+~ div > div > house > .row1.col3 > i:nth-of-type(2):after,
+.hs.house.row0.col3:not(:checked)
+~ .hs.house.row-1.col3:checked
+~ div > div > house > .row1.col3 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row0.col2:checked
+~ .hs.row0.col3:not(:checked)
+~ div > div > house > .row1.col3 > i:nth-of-type(1),
+.hs.house.row0.col3:not(:checked)
+~ .hs.house.row-1.col3:checked
+~ div > div > house > .row1.col3 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.house.row0.col2:not(:checked)
+~ .hs.shed.row0.col2:not(:checked)
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col3 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.house.row0.col2:not(:checked)
+~ .hs.shed.row0.col2:not(:checked)
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col3 i:nth-of-type(1),
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.house.row0.col2:not(:checked)
+~ .hs.shed.row0.col2:not(:checked)
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col3 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col2 i:nth-of-type(1),
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row1.col4:checked ~ div > div > house > .row1.col4:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4.col1 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(1):before, .hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row1.col4:checked ~ div > div > house > .row2.col4 i:nth-of-type(2),
+.hs.row1.col4:checked ~ div > div > house > .row2.col4 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row2.col4:checked
+~ .hs.shed.row1.col4:checked
+~ div > div > house > .row1.col4 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row2.col4:checked
+~ .hs.shed.row1.col4:checked
+~ div > div > house > .row2.col4:before {
+  background: #bc592f;
+}
+
+.hs.shed.row2.col4:checked
+~ .hs.house.row1.col4:checked
+~ div > div > house > .row1.col4 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row2.col4:checked
+~ .hs.house.row1.col4:checked
+~ div > div > house > .row2.col4:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row1.col1:not(:checked)
+~ .hs.house.row1.col4:checked
+~ .hs.house.row1.col5:not(:checked)
+~ .hs.house.row-1.col4:checked
+~ div > div > house > .row1.col4 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row1.col1:not(:checked)
+~ .hs.house.row1.col4:checked
+~ .hs.house.row1.col5:not(:checked)
+~ .hs.house.row-1.col4:checked
+~ div > div > house > .row1.col4 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row0.col3:checked
+~ .hs.row0.col4:not(:checked)
+~ div > div > house > .row1.col4 > i:nth-of-type(2):after,
+.hs.house.row0.col4:not(:checked)
+~ .hs.house.row-1.col4:checked
+~ div > div > house > .row1.col4 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row0.col3:checked
+~ .hs.row0.col4:not(:checked)
+~ div > div > house > .row1.col4 > i:nth-of-type(1),
+.hs.house.row0.col4:not(:checked)
+~ .hs.house.row-1.col4:checked
+~ div > div > house > .row1.col4 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.house.row0.col3:not(:checked)
+~ .hs.shed.row0.col3:not(:checked)
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col4 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.house.row0.col3:not(:checked)
+~ .hs.shed.row0.col3:not(:checked)
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col4 i:nth-of-type(1),
+.hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.house.row0.col3:not(:checked)
+~ .hs.shed.row0.col3:not(:checked)
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col4 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col2 i:nth-of-type(1),
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row1.col2:checked ~ .row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row2.col1:checked ~ div > div > house > .row2.col1:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1.col3 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(1):before, .hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row2.col1:checked ~ div > div > house > .row3.col1 i:nth-of-type(2),
+.hs.row2.col1:checked ~ div > div > house > .row3.col1 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row3.col1:checked
+~ .hs.shed.row2.col1:checked
+~ div > div > house > .row2.col1 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row3.col1:checked
+~ .hs.shed.row2.col1:checked
+~ div > div > house > .row3.col1:before {
+  background: #bc592f;
+}
+
+.hs.shed.row3.col1:checked
+~ .hs.house.row2.col1:checked
+~ div > div > house > .row2.col1 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row3.col1:checked
+~ .hs.house.row2.col1:checked
+~ div > div > house > .row3.col1:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row2.col-2:not(:checked)
+~ .hs.house.row2.col1:checked
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.house.row0.col1:checked
+~ div > div > house > .row2.col1 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row2.col-2:not(:checked)
+~ .hs.house.row2.col1:checked
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.house.row0.col1:checked
+~ div > div > house > .row2.col1 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:not(:checked)
+~ div > div > house > .row2.col1 > i:nth-of-type(2):after,
+.hs.house.row1.col1:not(:checked)
+~ .hs.house.row0.col1:checked
+~ div > div > house > .row2.col1 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row1.col0:checked
+~ .hs.row1.col1:not(:checked)
+~ div > div > house > .row2.col1 > i:nth-of-type(1),
+.hs.house.row1.col1:not(:checked)
+~ .hs.house.row0.col1:checked
+~ div > div > house > .row2.col1 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.house.row1.col0:not(:checked)
+~ .hs.shed.row1.col0:not(:checked)
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col1 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.house.row1.col0:not(:checked)
+~ .hs.shed.row1.col0:not(:checked)
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col1 i:nth-of-type(1),
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.house.row1.col0:not(:checked)
+~ .hs.shed.row1.col0:not(:checked)
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col1 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col2 i:nth-of-type(1),
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row2.col2:checked ~ div > div > house > .row2.col2:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2.col3 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(1):before, .hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row2.col2:checked ~ div > div > house > .row3.col2 i:nth-of-type(2),
+.hs.row2.col2:checked ~ div > div > house > .row3.col2 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row3.col2:checked
+~ .hs.shed.row2.col2:checked
+~ div > div > house > .row2.col2 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row3.col2:checked
+~ .hs.shed.row2.col2:checked
+~ div > div > house > .row3.col2:before {
+  background: #bc592f;
+}
+
+.hs.shed.row3.col2:checked
+~ .hs.house.row2.col2:checked
+~ div > div > house > .row2.col2 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row3.col2:checked
+~ .hs.house.row2.col2:checked
+~ div > div > house > .row3.col2:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row2.col-1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row0.col2:checked
+~ div > div > house > .row2.col2 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row2.col-1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row0.col2:checked
+~ div > div > house > .row2.col2 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:not(:checked)
+~ div > div > house > .row2.col2 > i:nth-of-type(2):after,
+.hs.house.row1.col2:not(:checked)
+~ .hs.house.row0.col2:checked
+~ div > div > house > .row2.col2 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row1.col1:checked
+~ .hs.row1.col2:not(:checked)
+~ div > div > house > .row2.col2 > i:nth-of-type(1),
+.hs.house.row1.col2:not(:checked)
+~ .hs.house.row0.col2:checked
+~ div > div > house > .row2.col2 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col1:not(:checked)
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col2 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col1:not(:checked)
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col2 i:nth-of-type(1),
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col1:not(:checked)
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col2 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col2 i:nth-of-type(1),
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row2.col3:checked ~ div > div > house > .row2.col3:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3.col2 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(1):before, .hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row2.col3:checked ~ div > div > house > .row3.col3 i:nth-of-type(2),
+.hs.row2.col3:checked ~ div > div > house > .row3.col3 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row3.col3:checked
+~ .hs.shed.row2.col3:checked
+~ div > div > house > .row2.col3 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row3.col3:checked
+~ .hs.shed.row2.col3:checked
+~ div > div > house > .row3.col3:before {
+  background: #bc592f;
+}
+
+.hs.shed.row3.col3:checked
+~ .hs.house.row2.col3:checked
+~ div > div > house > .row2.col3 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row3.col3:checked
+~ .hs.house.row2.col3:checked
+~ div > div > house > .row3.col3:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row2.col0:not(:checked)
+~ .hs.house.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row0.col3:checked
+~ div > div > house > .row2.col3 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row2.col0:not(:checked)
+~ .hs.house.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row0.col3:checked
+~ div > div > house > .row2.col3 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:not(:checked)
+~ div > div > house > .row2.col3 > i:nth-of-type(2):after,
+.hs.house.row1.col3:not(:checked)
+~ .hs.house.row0.col3:checked
+~ div > div > house > .row2.col3 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row1.col2:checked
+~ .hs.row1.col3:not(:checked)
+~ div > div > house > .row2.col3 > i:nth-of-type(1),
+.hs.house.row1.col3:not(:checked)
+~ .hs.house.row0.col3:checked
+~ div > div > house > .row2.col3 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.shed.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col3 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.shed.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col3 i:nth-of-type(1),
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.shed.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col3 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col2 i:nth-of-type(1),
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row2.col4:checked ~ div > div > house > .row2.col4:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4.col4 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(1):before, .hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row2.col4:checked ~ div > div > house > .row3.col4 i:nth-of-type(2),
+.hs.row2.col4:checked ~ div > div > house > .row3.col4 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row3.col4:checked
+~ .hs.shed.row2.col4:checked
+~ div > div > house > .row2.col4 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row3.col4:checked
+~ .hs.shed.row2.col4:checked
+~ div > div > house > .row3.col4:before {
+  background: #bc592f;
+}
+
+.hs.shed.row3.col4:checked
+~ .hs.house.row2.col4:checked
+~ div > div > house > .row2.col4 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row3.col4:checked
+~ .hs.house.row2.col4:checked
+~ div > div > house > .row3.col4:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col4:checked
+~ .hs.house.row2.col5:not(:checked)
+~ .hs.house.row0.col4:checked
+~ div > div > house > .row2.col4 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col4:checked
+~ .hs.house.row2.col5:not(:checked)
+~ .hs.house.row0.col4:checked
+~ div > div > house > .row2.col4 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row1.col3:checked
+~ .hs.row1.col4:not(:checked)
+~ div > div > house > .row2.col4 > i:nth-of-type(2):after,
+.hs.house.row1.col4:not(:checked)
+~ .hs.house.row0.col4:checked
+~ div > div > house > .row2.col4 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row1.col3:checked
+~ .hs.row1.col4:not(:checked)
+~ div > div > house > .row2.col4 > i:nth-of-type(1),
+.hs.house.row1.col4:not(:checked)
+~ .hs.house.row0.col4:checked
+~ div > div > house > .row2.col4 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.house.row1.col3:not(:checked)
+~ .hs.shed.row1.col3:not(:checked)
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col4 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.house.row1.col3:not(:checked)
+~ .hs.shed.row1.col3:not(:checked)
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col4 i:nth-of-type(1),
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.house.row1.col3:not(:checked)
+~ .hs.shed.row1.col3:not(:checked)
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col4 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col2 i:nth-of-type(1),
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row2.col2:checked ~ .row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row3.col1:checked ~ div > div > house > .row3.col1:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1.col4 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(1):before, .hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row3.col1:checked ~ div > div > house > .row4.col1 i:nth-of-type(2),
+.hs.row3.col1:checked ~ div > div > house > .row4.col1 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row4.col1:checked
+~ .hs.shed.row3.col1:checked
+~ div > div > house > .row3.col1 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row4.col1:checked
+~ .hs.shed.row3.col1:checked
+~ div > div > house > .row4.col1:before {
+  background: #bc592f;
+}
+
+.hs.shed.row4.col1:checked
+~ .hs.house.row3.col1:checked
+~ div > div > house > .row3.col1 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row4.col1:checked
+~ .hs.house.row3.col1:checked
+~ div > div > house > .row4.col1:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row3.col-2:not(:checked)
+~ .hs.house.row3.col1:checked
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.house.row1.col1:checked
+~ div > div > house > .row3.col1 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row3.col-2:not(:checked)
+~ .hs.house.row3.col1:checked
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.house.row1.col1:checked
+~ div > div > house > .row3.col1 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:not(:checked)
+~ div > div > house > .row3.col1 > i:nth-of-type(2):after,
+.hs.house.row2.col1:not(:checked)
+~ .hs.house.row1.col1:checked
+~ div > div > house > .row3.col1 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row2.col0:checked
+~ .hs.row2.col1:not(:checked)
+~ div > div > house > .row3.col1 > i:nth-of-type(1),
+.hs.house.row2.col1:not(:checked)
+~ .hs.house.row1.col1:checked
+~ div > div > house > .row3.col1 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.house.row2.col0:not(:checked)
+~ .hs.shed.row2.col0:not(:checked)
+~ .hs.row2.col1:checked
+~ div > div > house > .row3.col1 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.house.row2.col0:not(:checked)
+~ .hs.shed.row2.col0:not(:checked)
+~ .hs.row2.col1:checked
+~ div > div > house > .row3.col1 i:nth-of-type(1),
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.house.row2.col0:not(:checked)
+~ .hs.shed.row2.col0:not(:checked)
+~ .hs.row2.col1:checked
+~ div > div > house > .row3.col1 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col2 i:nth-of-type(1),
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row3.col2:checked ~ div > div > house > .row3.col2:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2.col1 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(1):before, .hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row3.col2:checked ~ div > div > house > .row4.col2 i:nth-of-type(2),
+.hs.row3.col2:checked ~ div > div > house > .row4.col2 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row4.col2:checked
+~ .hs.shed.row3.col2:checked
+~ div > div > house > .row3.col2 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row4.col2:checked
+~ .hs.shed.row3.col2:checked
+~ div > div > house > .row4.col2:before {
+  background: #bc592f;
+}
+
+.hs.shed.row4.col2:checked
+~ .hs.house.row3.col2:checked
+~ div > div > house > .row3.col2 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row4.col2:checked
+~ .hs.house.row3.col2:checked
+~ div > div > house > .row4.col2:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row3.col-1:not(:checked)
+~ .hs.house.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row1.col2:checked
+~ div > div > house > .row3.col2 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row3.col-1:not(:checked)
+~ .hs.house.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row1.col2:checked
+~ div > div > house > .row3.col2 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:not(:checked)
+~ div > div > house > .row3.col2 > i:nth-of-type(2):after,
+.hs.house.row2.col2:not(:checked)
+~ .hs.house.row1.col2:checked
+~ div > div > house > .row3.col2 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row2.col1:checked
+~ .hs.row2.col2:not(:checked)
+~ div > div > house > .row3.col2 > i:nth-of-type(1),
+.hs.house.row2.col2:not(:checked)
+~ .hs.house.row1.col2:checked
+~ div > div > house > .row3.col2 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.shed.row2.col1:not(:checked)
+~ .hs.row2.col2:checked
+~ div > div > house > .row3.col2 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.shed.row2.col1:not(:checked)
+~ .hs.row2.col2:checked
+~ div > div > house > .row3.col2 i:nth-of-type(1),
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.shed.row2.col1:not(:checked)
+~ .hs.row2.col2:checked
+~ div > div > house > .row3.col2 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col2 i:nth-of-type(1),
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row3.col3:checked ~ div > div > house > .row3.col3:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3.col4 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(1):before, .hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row3.col3:checked ~ div > div > house > .row4.col3 i:nth-of-type(2),
+.hs.row3.col3:checked ~ div > div > house > .row4.col3 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row4.col3:checked
+~ .hs.shed.row3.col3:checked
+~ div > div > house > .row3.col3 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row4.col3:checked
+~ .hs.shed.row3.col3:checked
+~ div > div > house > .row4.col3:before {
+  background: #bc592f;
+}
+
+.hs.shed.row4.col3:checked
+~ .hs.house.row3.col3:checked
+~ div > div > house > .row3.col3 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row4.col3:checked
+~ .hs.house.row3.col3:checked
+~ div > div > house > .row4.col3:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row3.col0:not(:checked)
+~ .hs.house.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row1.col3:checked
+~ div > div > house > .row3.col3 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row3.col0:not(:checked)
+~ .hs.house.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row1.col3:checked
+~ div > div > house > .row3.col3 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:not(:checked)
+~ div > div > house > .row3.col3 > i:nth-of-type(2):after,
+.hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col3:checked
+~ div > div > house > .row3.col3 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row2.col2:checked
+~ .hs.row2.col3:not(:checked)
+~ div > div > house > .row3.col3 > i:nth-of-type(1),
+.hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col3:checked
+~ div > div > house > .row3.col3 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.shed.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ div > div > house > .row3.col3 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.shed.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ div > div > house > .row3.col3 i:nth-of-type(1),
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.shed.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ div > div > house > .row3.col3 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col2 i:nth-of-type(1),
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row3.col4:checked ~ div > div > house > .row3.col4:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4.col1 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(1):before, .hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row3.col4:checked ~ div > div > house > .row4.col4 i:nth-of-type(2),
+.hs.row3.col4:checked ~ div > div > house > .row4.col4 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row4.col4:checked
+~ .hs.shed.row3.col4:checked
+~ div > div > house > .row3.col4 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row4.col4:checked
+~ .hs.shed.row3.col4:checked
+~ div > div > house > .row4.col4:before {
+  background: #bc592f;
+}
+
+.hs.shed.row4.col4:checked
+~ .hs.house.row3.col4:checked
+~ div > div > house > .row3.col4 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row4.col4:checked
+~ .hs.house.row3.col4:checked
+~ div > div > house > .row4.col4:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row3.col1:not(:checked)
+~ .hs.house.row3.col4:checked
+~ .hs.house.row3.col5:not(:checked)
+~ .hs.house.row1.col4:checked
+~ div > div > house > .row3.col4 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row3.col1:not(:checked)
+~ .hs.house.row3.col4:checked
+~ .hs.house.row3.col5:not(:checked)
+~ .hs.house.row1.col4:checked
+~ div > div > house > .row3.col4 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:not(:checked)
+~ div > div > house > .row3.col4 > i:nth-of-type(2):after,
+.hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col4:checked
+~ div > div > house > .row3.col4 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row2.col3:checked
+~ .hs.row2.col4:not(:checked)
+~ div > div > house > .row3.col4 > i:nth-of-type(1),
+.hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col4:checked
+~ div > div > house > .row3.col4 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.shed.row2.col3:not(:checked)
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col4 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.shed.row2.col3:not(:checked)
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col4 i:nth-of-type(1),
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.shed.row2.col3:not(:checked)
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col4 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col2 i:nth-of-type(1),
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row3.col2:checked ~ .row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row4.col1:checked ~ div > div > house > .row4.col1:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row4.col1:checked ~ div > div > house > .row4.col1:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row4.col1:checked ~ div > div > house > .row4.col1 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row4.col1:checked ~ div > div > house > .row4.col1 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row4.col1:checked ~ div > div > house > .row4.col1 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row4.col1:checked ~ div > div > house > .row4.col1.col4 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row4.col1:checked ~ div > div > house > .row4.col1 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row4.col1:checked ~ div > div > house > .row4.col1 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row4.col1:checked ~ div > div > house > .row4.col1 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row4.col1:checked ~ div > div > house > .row4.col1 > i:nth-of-type(1):before, .hs.row4.col1:checked ~ div > div > house > .row4.col1 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row4.col1:checked ~ div > div > house > .row4.col1 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row4.col1:checked ~ div > div > house > .row4.col1:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row4.col1:checked ~ div > div > house > .row4.col1:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row4.col1:checked ~ div > div > house > .row5.col1 i:nth-of-type(2),
+.hs.row4.col1:checked ~ div > div > house > .row5.col1 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row5.col1:checked
+~ .hs.shed.row4.col1:checked
+~ div > div > house > .row4.col1 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row5.col1:checked
+~ .hs.shed.row4.col1:checked
+~ div > div > house > .row5.col1:before {
+  background: #bc592f;
+}
+
+.hs.shed.row5.col1:checked
+~ .hs.house.row4.col1:checked
+~ div > div > house > .row4.col1 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row5.col1:checked
+~ .hs.house.row4.col1:checked
+~ div > div > house > .row5.col1:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row4.col-2:not(:checked)
+~ .hs.house.row4.col1:checked
+~ .hs.house.row4.col2:not(:checked)
+~ .hs.house.row2.col1:checked
+~ div > div > house > .row4.col1 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row4.col-2:not(:checked)
+~ .hs.house.row4.col1:checked
+~ .hs.house.row4.col2:not(:checked)
+~ .hs.house.row2.col1:checked
+~ div > div > house > .row4.col1 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:not(:checked)
+~ div > div > house > .row4.col1 > i:nth-of-type(2):after,
+.hs.house.row3.col1:not(:checked)
+~ .hs.house.row2.col1:checked
+~ div > div > house > .row4.col1 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row3.col0:checked
+~ .hs.row3.col1:not(:checked)
+~ div > div > house > .row4.col1 > i:nth-of-type(1),
+.hs.house.row3.col1:not(:checked)
+~ .hs.house.row2.col1:checked
+~ div > div > house > .row4.col1 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.house.row3.col0:not(:checked)
+~ .hs.shed.row3.col0:not(:checked)
+~ .hs.row3.col1:checked
+~ div > div > house > .row4.col1 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.house.row3.col0:not(:checked)
+~ .hs.shed.row3.col0:not(:checked)
+~ .hs.row3.col1:checked
+~ div > div > house > .row4.col1 i:nth-of-type(1),
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.house.row3.col0:not(:checked)
+~ .hs.shed.row3.col0:not(:checked)
+~ .hs.row3.col1:checked
+~ div > div > house > .row4.col1 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col2 i:nth-of-type(1),
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row4.col2:checked ~ div > div > house > .row4.col2:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row4.col2:checked ~ div > div > house > .row4.col2:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row4.col2:checked ~ div > div > house > .row4.col2 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row4.col2:checked ~ div > div > house > .row4.col2 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row4.col2:checked ~ div > div > house > .row4.col2 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row4.col2:checked ~ div > div > house > .row4.col2.col2 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row4.col2:checked ~ div > div > house > .row4.col2 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row4.col2:checked ~ div > div > house > .row4.col2 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row4.col2:checked ~ div > div > house > .row4.col2 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row4.col2:checked ~ div > div > house > .row4.col2 > i:nth-of-type(1):before, .hs.row4.col2:checked ~ div > div > house > .row4.col2 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row4.col2:checked ~ div > div > house > .row4.col2 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row4.col2:checked ~ div > div > house > .row4.col2:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row4.col2:checked ~ div > div > house > .row4.col2:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row4.col2:checked ~ div > div > house > .row5.col2 i:nth-of-type(2),
+.hs.row4.col2:checked ~ div > div > house > .row5.col2 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row5.col2:checked
+~ .hs.shed.row4.col2:checked
+~ div > div > house > .row4.col2 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row5.col2:checked
+~ .hs.shed.row4.col2:checked
+~ div > div > house > .row5.col2:before {
+  background: #bc592f;
+}
+
+.hs.shed.row5.col2:checked
+~ .hs.house.row4.col2:checked
+~ div > div > house > .row4.col2 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row5.col2:checked
+~ .hs.house.row4.col2:checked
+~ div > div > house > .row5.col2:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row4.col-1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row2.col2:checked
+~ div > div > house > .row4.col2 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row4.col-1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row2.col2:checked
+~ div > div > house > .row4.col2 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:not(:checked)
+~ div > div > house > .row4.col2 > i:nth-of-type(2):after,
+.hs.house.row3.col2:not(:checked)
+~ .hs.house.row2.col2:checked
+~ div > div > house > .row4.col2 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row3.col1:checked
+~ .hs.row3.col2:not(:checked)
+~ div > div > house > .row4.col2 > i:nth-of-type(1),
+.hs.house.row3.col2:not(:checked)
+~ .hs.house.row2.col2:checked
+~ div > div > house > .row4.col2 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col1:not(:checked)
+~ .hs.row3.col2:checked
+~ div > div > house > .row4.col2 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col1:not(:checked)
+~ .hs.row3.col2:checked
+~ div > div > house > .row4.col2 i:nth-of-type(1),
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col1:not(:checked)
+~ .hs.row3.col2:checked
+~ div > div > house > .row4.col2 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col2 i:nth-of-type(1),
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row4.col3:checked ~ div > div > house > .row4.col3:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row4.col3:checked ~ div > div > house > .row4.col3:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row4.col3:checked ~ div > div > house > .row4.col3.col3 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(1):before, .hs.row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row4.col3:checked ~ div > div > house > .row4.col3:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row4.col3:checked ~ div > div > house > .row4.col3:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row4.col3:checked ~ div > div > house > .row5.col3 i:nth-of-type(2),
+.hs.row4.col3:checked ~ div > div > house > .row5.col3 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row5.col3:checked
+~ .hs.shed.row4.col3:checked
+~ div > div > house > .row4.col3 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row5.col3:checked
+~ .hs.shed.row4.col3:checked
+~ div > div > house > .row5.col3:before {
+  background: #bc592f;
+}
+
+.hs.shed.row5.col3:checked
+~ .hs.house.row4.col3:checked
+~ div > div > house > .row4.col3 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row5.col3:checked
+~ .hs.house.row4.col3:checked
+~ div > div > house > .row5.col3:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row4.col0:not(:checked)
+~ .hs.house.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row2.col3:checked
+~ div > div > house > .row4.col3 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row4.col0:not(:checked)
+~ .hs.house.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row2.col3:checked
+~ div > div > house > .row4.col3 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:not(:checked)
+~ div > div > house > .row4.col3 > i:nth-of-type(2):after,
+.hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col3:checked
+~ div > div > house > .row4.col3 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row3.col2:checked
+~ .hs.row3.col3:not(:checked)
+~ div > div > house > .row4.col3 > i:nth-of-type(1),
+.hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col3:checked
+~ div > div > house > .row4.col3 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.shed.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ div > div > house > .row4.col3 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.shed.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ div > div > house > .row4.col3 i:nth-of-type(1),
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.shed.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ div > div > house > .row4.col3 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col2 i:nth-of-type(1),
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row4.col4:checked ~ div > div > house > .row4.col4:before {
+  width: 1.5rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: -1.35rem;
+  left: 3rem;
+  box-shadow: 2rem 2rem 0 currentColor;
+  filter: hue-rotate(-10deg) brightness(1.1);
+  opacity: 0.7;
+}
+.hs.row4.col4:checked ~ div > div > house > .row4.col4:after {
+  filter: hue-rotate(-10deg) brightness(1.1);
+  width: 2rem;
+  height: 1rem;
+  background: currentColor;
+  border-radius: 0.25rem;
+  top: 0.5rem;
+  left: -0.15rem;
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+.hs.row4.col4:checked ~ div > div > house > .row4.col4 > i:nth-of-type(4) {
+  width: 5rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  background: rgba(79, 1, 14, 0.9);
+  height: 5rem;
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem currentColor, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+.hs.row4.col4:checked ~ div > div > house > .row4.col4 > i:nth-of-type(4):after {
+  width: 4.5rem;
+  height: 0.25rem;
+  left: 0.25rem;
+  top: 2.4rem;
+  background: currentColor;
+  border-radius: 0.0001rem;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), 0 3rem 0 0.3rem #dc9075, 0 3.5rem 0.35rem 0.25rem rgba(79, 1, 14, 0.9);
+}
+.hs.row4.col4:checked ~ div > div > house > .row4.col4 > i:nth-of-type(4):before {
+  width: 0.25rem;
+  height: 4.5rem;
+  left: 2.4rem;
+  top: 0.25rem;
+  background: currentColor;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.row4.col4:checked ~ div > div > house > .row4.col4.col2 > i:nth-of-type(4) {
+  border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+}
+.hs.row4.col4:checked ~ div > div > house > .row4.col4 > i:nth-of-type(2) {
+  border: solid rgba(255, 255, 255, 0) 1rem;
+  border-bottom: solid #6a1b37 4rem;
+  width: calc(100% + 2.1rem);
+  left: -1rem;
+  top: -2.5rem;
+  box-shadow: 0 0.25rem 0 #20112a, 0 1.5rem 1rem -1rem rgba(79, 1, 14, 0.75);
+}
+.hs.row4.col4:checked ~ div > div > house > .row4.col4 > i:nth-of-type(2):before {
+  width: 100%;
+  height: 3rem;
+  border-radius: 50%;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.75rem, rgba(79, 1, 14, 0.4), rgba(255, 255, 255, 0) 1rem);
+}
+.hs.row4.col4:checked ~ div > div > house > .row4.col4 > i:nth-of-type(2):after {
+  width: 3rem;
+  height: 4rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 0.5rem solid #bc2f2f;
+  top: -2rem;
+  box-shadow: inset 0 4rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -3rem 0 -1rem #252529;
+  border-radius: 0.5rem;
+  left: -0.25rem;
+  filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+.hs.row4.col4:checked ~ div > div > house > .row4.col4 > i:nth-of-type(1):before, .hs.row4.col4:checked ~ div > div > house > .row4.col4 > i:nth-of-type(1):after {
+  top: -8.5rem;
+  left: -1rem;
+  animation: smoke 8s linear infinite;
+}
+.hs.row4.col4:checked ~ div > div > house > .row4.col4 > i:nth-of-type(1):before {
+  animation: smoke 7.25s 3.75s linear infinite;
+}
+.hs.row4.col4:checked ~ div > div > house > .row4.col4:nth-of-type(even) i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.row4.col4:checked ~ div > div > house > .row4.col4:nth-of-type(even) > i:nth-of-type(1) {
+  left: 10rem;
+}
+.hs.row4.col4:checked ~ div > div > house > .row5.col4 i:nth-of-type(2),
+.hs.row4.col4:checked ~ div > div > house > .row5.col4 i:nth-of-type(1) {
+  display: none;
+}
+
+.hs.house.row5.col4:checked
+~ .hs.shed.row4.col4:checked
+~ div > div > house > .row4.col4 {
+  border-bottom: 0.25rem dashed #bc2f2f;
+}
+.hs.house.row5.col4:checked
+~ .hs.shed.row4.col4:checked
+~ div > div > house > .row5.col4:before {
+  background: #bc592f;
+}
+
+.hs.shed.row5.col4:checked
+~ .hs.house.row4.col4:checked
+~ div > div > house > .row4.col4 {
+  border-bottom: 0.25rem dashed #bc592f;
+}
+.hs.shed.row5.col4:checked
+~ .hs.house.row4.col4:checked
+~ div > div > house > .row5.col4:before {
+  background: #bc2f2f;
+}
+
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col4:checked
+~ .hs.house.row4.col5:not(:checked)
+~ .hs.house.row2.col4:checked
+~ div > div > house > .row4.col4 > i:nth-of-type(2):after {
+  left: 9.5rem;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col4:checked
+~ .hs.house.row4.col5:not(:checked)
+~ .hs.house.row2.col4:checked
+~ div > div > house > .row4.col4 > i:nth-of-type(1) {
+  left: 11rem;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:not(:checked)
+~ div > div > house > .row4.col4 > i:nth-of-type(2):after,
+.hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col4:checked
+~ div > div > house > .row4.col4 > i:nth-of-type(2):after {
+  left: 4.75rem;
+  height: 3rem;
+  box-shadow: inset 0 6rem 0 #bc2f2f, 0 -0.5rem 0 -0.2rem #6a1b37, 0 -2.25rem 0 -1rem #252529;
+  border-radius: 0 0 1rem 1rem;
+}
+.hs.row3.col3:checked
+~ .hs.row3.col4:not(:checked)
+~ div > div > house > .row4.col4 > i:nth-of-type(1),
+.hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col4:checked
+~ div > div > house > .row4.col4 > i:nth-of-type(1) {
+  left: 5rem;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.shed.row3.col3:not(:checked)
+~ .hs.row3.col4:checked
+~ div > div > house > .row4.col4 i:nth-of-type(2) {
+  display: block;
+  left: -42%;
+  width: 50%;
+}
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.shed.row3.col3:not(:checked)
+~ .hs.row3.col4:checked
+~ div > div > house > .row4.col4 i:nth-of-type(1),
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.shed.row3.col3:not(:checked)
+~ .hs.row3.col4:checked
+~ div > div > house > .row4.col4 i:nth-of-type(2):after {
+  display: none;
+}
+
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col2 i:nth-of-type(1),
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col2 i:nth-of-type(2):after {
+  display: none;
+}
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(2):after {
+  left: -1.5rem;
+}
+.row4.col2:checked ~ .row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(1) {
+  left: -1rem;
+}
+
+.hs.row1.col1:checked
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col2 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row1.col1:checked
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.shed.row1.col3:checked
+~ div > div > house > .row1.col2 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col3 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ .hs.shed.row1.col4:checked
+~ div > div > house > .row1.col3 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col4 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ .hs.shed.row1.col5:checked
+~ div > div > house > .row1.col4 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row1.col4:checked
+~ .hs.house.row1.col5:not(:checked)
+~ .hs.row1.col6:checked
+~ div > div > house > .row1.col5 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row1.col4:checked
+~ .hs.house.row1.col5:not(:checked)
+~ .hs.shed.row1.col6:checked
+~ div > div > house > .row1.col5 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row1.col1:checked
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.house.row1.col3:not(:checked)
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col2 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row1.col1:checked
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.house.row1.col3:not(:checked)
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col2 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row1.col1:checked
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.house.row1.col3:not(:checked)
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col2 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col1:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col1:after {
+  box-shadow: -2rem 5rem 0 rgba(204, 51, 51, 0.5), 0 7rem 0 currentColor;
+}
+
+.hs.row1.col0:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col1:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ .hs.house.row1.col4:not(:checked)
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col3 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ .hs.house.row1.col4:not(:checked)
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col3 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ .hs.house.row1.col4:not(:checked)
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col3 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col2:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col2:after {
+  box-shadow: -2rem 6rem 0 rgba(204, 51, 51, 0.5), 0 7rem 0 currentColor;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col2:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ .hs.house.row1.col5:not(:checked)
+~ .hs.row1.col6:checked
+~ div > div > house > .row1.col4 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ .hs.house.row1.col5:not(:checked)
+~ .hs.row1.col6:checked
+~ div > div > house > .row1.col4 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ .hs.house.row1.col5:not(:checked)
+~ .hs.row1.col6:checked
+~ div > div > house > .row1.col4 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col3:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col3:after {
+  box-shadow: -2rem 5rem 0 rgba(204, 51, 51, 0.5), 0 7rem 0 currentColor;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col3:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row1.col4:checked
+~ .hs.house.row1.col5:not(:checked)
+~ .hs.house.row1.col6:not(:checked)
+~ .hs.row1.col7:checked
+~ div > div > house > .row1.col5 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row1.col4:checked
+~ .hs.house.row1.col5:not(:checked)
+~ .hs.house.row1.col6:not(:checked)
+~ .hs.row1.col7:checked
+~ div > div > house > .row1.col5 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row1.col4:checked
+~ .hs.house.row1.col5:not(:checked)
+~ .hs.house.row1.col6:not(:checked)
+~ .hs.row1.col7:checked
+~ div > div > house > .row1.col5 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col4:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col4:after {
+  box-shadow: -2rem 4rem 0 rgba(204, 51, 51, 0.5), 0 7rem 0 currentColor;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col4:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col1 {
+  border-bottom: none;
+}
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col2 {
+  border-bottom: none;
+}
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col3 {
+  border-bottom: none;
+}
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col4 {
+  border-bottom: none;
+}
+.hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col1 {
+  border-bottom: none;
+}
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col2 {
+  border-bottom: none;
+}
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col3 {
+  border-bottom: none;
+}
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col4 {
+  border-bottom: none;
+}
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > house > .row3.col1 {
+  border-bottom: none;
+}
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col2 {
+  border-bottom: none;
+}
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col3 {
+  border-bottom: none;
+}
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col4 {
+  border-bottom: none;
+}
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col1:checked
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ div > div > house > .row2.col2 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row2.col1:checked
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.shed.row2.col3:checked
+~ div > div > house > .row2.col2 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.row2.col4:checked
+~ div > div > house > .row2.col3 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.shed.row2.col4:checked
+~ div > div > house > .row2.col3 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.row2.col5:checked
+~ div > div > house > .row2.col4 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.shed.row2.col5:checked
+~ div > div > house > .row2.col4 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row2.col4:checked
+~ .hs.house.row2.col5:not(:checked)
+~ .hs.row2.col6:checked
+~ div > div > house > .row2.col5 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row2.col4:checked
+~ .hs.house.row2.col5:not(:checked)
+~ .hs.shed.row2.col6:checked
+~ div > div > house > .row2.col5 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row2.col1:checked
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.row2.col4:checked
+~ div > div > house > .row2.col2 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row2.col1:checked
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.row2.col4:checked
+~ div > div > house > .row2.col2 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row2.col1:checked
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.row2.col4:checked
+~ div > div > house > .row2.col2 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col1:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col1:after {
+  box-shadow: -2rem 4rem 0 rgba(204, 51, 51, 0.5), 0 7rem 0 currentColor;
+}
+
+.hs.row2.col0:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col1:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.row2.col5:checked
+~ div > div > house > .row2.col3 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.row2.col5:checked
+~ div > div > house > .row2.col3 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.row2.col5:checked
+~ div > div > house > .row2.col3 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col2:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col2:after {
+  box-shadow: -2rem 6rem 0 rgba(204, 51, 51, 0.5), 0 8rem 0 currentColor;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col2:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row2.col5:not(:checked)
+~ .hs.row2.col6:checked
+~ div > div > house > .row2.col4 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row2.col5:not(:checked)
+~ .hs.row2.col6:checked
+~ div > div > house > .row2.col4 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row2.col5:not(:checked)
+~ .hs.row2.col6:checked
+~ div > div > house > .row2.col4 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col3:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col3:after {
+  box-shadow: -2rem 5rem 0 rgba(204, 51, 51, 0.5), 0 8rem 0 currentColor;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col3:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row2.col4:checked
+~ .hs.house.row2.col5:not(:checked)
+~ .hs.house.row2.col6:not(:checked)
+~ .hs.row2.col7:checked
+~ div > div > house > .row2.col5 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row2.col4:checked
+~ .hs.house.row2.col5:not(:checked)
+~ .hs.house.row2.col6:not(:checked)
+~ .hs.row2.col7:checked
+~ div > div > house > .row2.col5 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row2.col4:checked
+~ .hs.house.row2.col5:not(:checked)
+~ .hs.house.row2.col6:not(:checked)
+~ .hs.row2.col7:checked
+~ div > div > house > .row2.col5 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row2.col4:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row2.col4:after {
+  box-shadow: -2rem 6rem 0 rgba(204, 51, 51, 0.5), 0 8rem 0 currentColor;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col4:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col1 {
+  border-bottom: none;
+}
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col2 {
+  border-bottom: none;
+}
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col3 {
+  border-bottom: none;
+}
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col4 {
+  border-bottom: none;
+}
+.hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col1 {
+  border-bottom: none;
+}
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col2 {
+  border-bottom: none;
+}
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col3 {
+  border-bottom: none;
+}
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col4 {
+  border-bottom: none;
+}
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > house > .row3.col1 {
+  border-bottom: none;
+}
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col2 {
+  border-bottom: none;
+}
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col3 {
+  border-bottom: none;
+}
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col4 {
+  border-bottom: none;
+}
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col1:checked
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ div > div > house > .row3.col2 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row3.col1:checked
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.shed.row3.col3:checked
+~ div > div > house > .row3.col2 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.row3.col4:checked
+~ div > div > house > .row3.col3 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.shed.row3.col4:checked
+~ div > div > house > .row3.col3 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.row3.col5:checked
+~ div > div > house > .row3.col4 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.shed.row3.col5:checked
+~ div > div > house > .row3.col4 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row3.col4:checked
+~ .hs.house.row3.col5:not(:checked)
+~ .hs.row3.col6:checked
+~ div > div > house > .row3.col5 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row3.col4:checked
+~ .hs.house.row3.col5:not(:checked)
+~ .hs.shed.row3.col6:checked
+~ div > div > house > .row3.col5 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row3.col1:checked
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.row3.col4:checked
+~ div > div > house > .row3.col2 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row3.col1:checked
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.row3.col4:checked
+~ div > div > house > .row3.col2 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row3.col1:checked
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.row3.col4:checked
+~ div > div > house > .row3.col2 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col1:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col1:after {
+  box-shadow: -2rem 5rem 0 rgba(204, 51, 51, 0.5), 0 6rem 0 currentColor;
+}
+
+.hs.row3.col0:checked ~ .hs.row3.col1:checked ~ div > div > house > .row3.col1:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.row3.col5:checked
+~ div > div > house > .row3.col3 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.row3.col5:checked
+~ div > div > house > .row3.col3 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.row3.col5:checked
+~ div > div > house > .row3.col3 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col2:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col2:after {
+  box-shadow: -2rem 6rem 0 rgba(204, 51, 51, 0.5), 0 6rem 0 currentColor;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col2:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row3.col5:not(:checked)
+~ .hs.row3.col6:checked
+~ div > div > house > .row3.col4 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row3.col5:not(:checked)
+~ .hs.row3.col6:checked
+~ div > div > house > .row3.col4 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row3.col5:not(:checked)
+~ .hs.row3.col6:checked
+~ div > div > house > .row3.col4 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col3:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col3:after {
+  box-shadow: -2rem 5rem 0 rgba(204, 51, 51, 0.5), 0 7rem 0 currentColor;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col3:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row3.col4:checked
+~ .hs.house.row3.col5:not(:checked)
+~ .hs.house.row3.col6:not(:checked)
+~ .hs.row3.col7:checked
+~ div > div > house > .row3.col5 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row3.col4:checked
+~ .hs.house.row3.col5:not(:checked)
+~ .hs.house.row3.col6:not(:checked)
+~ .hs.row3.col7:checked
+~ div > div > house > .row3.col5 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row3.col4:checked
+~ .hs.house.row3.col5:not(:checked)
+~ .hs.house.row3.col6:not(:checked)
+~ .hs.row3.col7:checked
+~ div > div > house > .row3.col5 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row3.col4:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row3.col4:after {
+  box-shadow: -2rem 5rem 0 rgba(204, 51, 51, 0.5), 0 8rem 0 currentColor;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col4:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col1 {
+  border-bottom: none;
+}
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col2 {
+  border-bottom: none;
+}
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col3 {
+  border-bottom: none;
+}
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col4 {
+  border-bottom: none;
+}
+.hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col1 {
+  border-bottom: none;
+}
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col2 {
+  border-bottom: none;
+}
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col3 {
+  border-bottom: none;
+}
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col4 {
+  border-bottom: none;
+}
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > house > .row3.col1 {
+  border-bottom: none;
+}
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col2 {
+  border-bottom: none;
+}
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col3 {
+  border-bottom: none;
+}
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col4 {
+  border-bottom: none;
+}
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row4.col1:checked
+~ .hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ div > div > house > .row4.col2 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row4.col1:checked
+~ .hs.house.row4.col2:not(:checked)
+~ .hs.shed.row4.col3:checked
+~ div > div > house > .row4.col2 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.row4.col4:checked
+~ div > div > house > .row4.col3 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.shed.row4.col4:checked
+~ div > div > house > .row4.col3 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.row4.col5:checked
+~ div > div > house > .row4.col4 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.shed.row4.col5:checked
+~ div > div > house > .row4.col4 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row4.col4:checked
+~ .hs.house.row4.col5:not(:checked)
+~ .hs.row4.col6:checked
+~ div > div > house > .row4.col5 > i:nth-of-type(5) {
+  display: block;
+  width: 105%;
+}
+
+.hs.row4.col4:checked
+~ .hs.house.row4.col5:not(:checked)
+~ .hs.shed.row4.col6:checked
+~ div > div > house > .row4.col5 > i:nth-of-type(5) {
+  display: block;
+  width: 115%;
+}
+
+.hs.row4.col1:checked
+~ .hs.house.row4.col2:not(:checked)
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.row4.col4:checked
+~ div > div > house > .row4.col2 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row4.col1:checked
+~ .hs.house.row4.col2:not(:checked)
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.row4.col4:checked
+~ div > div > house > .row4.col2 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row4.col1:checked
+~ .hs.house.row4.col2:not(:checked)
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.row4.col4:checked
+~ div > div > house > .row4.col2 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row4.col1:checked ~ .hs.row4.col2:checked ~ div > div > house > .row4.col1:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row4.col0:checked ~ .hs.row4.col1:checked ~ .hs.row4.col2:checked ~ div > div > house > .row4.col1:after {
+  box-shadow: -2rem 4rem 0 rgba(204, 51, 51, 0.5), 0 8rem 0 currentColor;
+}
+
+.hs.row4.col0:checked ~ .hs.row4.col1:checked ~ div > div > house > .row4.col1:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.row4.col5:checked
+~ div > div > house > .row4.col3 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.row4.col5:checked
+~ div > div > house > .row4.col3 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.row4.col5:checked
+~ div > div > house > .row4.col3 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row4.col2:checked ~ .hs.row4.col3:checked ~ div > div > house > .row4.col2:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row4.col1:checked ~ .hs.row4.col2:checked ~ .hs.row4.col3:checked ~ div > div > house > .row4.col2:after {
+  box-shadow: -2rem 5rem 0 rgba(204, 51, 51, 0.5), 0 6rem 0 currentColor;
+}
+
+.hs.row4.col1:checked ~ .hs.row4.col2:checked ~ div > div > house > .row4.col2:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row4.col5:not(:checked)
+~ .hs.row4.col6:checked
+~ div > div > house > .row4.col4 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row4.col5:not(:checked)
+~ .hs.row4.col6:checked
+~ div > div > house > .row4.col4 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row4.col5:not(:checked)
+~ .hs.row4.col6:checked
+~ div > div > house > .row4.col4 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row4.col3:checked ~ .hs.row4.col4:checked ~ div > div > house > .row4.col3:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row4.col2:checked ~ .hs.row4.col3:checked ~ .hs.row4.col4:checked ~ div > div > house > .row4.col3:after {
+  box-shadow: -2rem 6rem 0 rgba(204, 51, 51, 0.5), 0 6rem 0 currentColor;
+}
+
+.hs.row4.col2:checked ~ .hs.row4.col3:checked ~ div > div > house > .row4.col3:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row4.col4:checked
+~ .hs.house.row4.col5:not(:checked)
+~ .hs.house.row4.col6:not(:checked)
+~ .hs.row4.col7:checked
+~ div > div > house > .row4.col5 > i:nth-of-type(5) {
+  display: block;
+  width: 205%;
+}
+.hs.row4.col4:checked
+~ .hs.house.row4.col5:not(:checked)
+~ .hs.house.row4.col6:not(:checked)
+~ .hs.row4.col7:checked
+~ div > div > house > .row4.col5 > i:nth-of-type(5):after {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #bc592f;
+  top: 2.75rem;
+  left: 3.5rem;
+  transform: rotate(4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem 0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+.hs.row4.col4:checked
+~ .hs.house.row4.col5:not(:checked)
+~ .hs.house.row4.col6:not(:checked)
+~ .hs.row4.col7:checked
+~ div > div > house > .row4.col5 > i:nth-of-type(5):before {
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #7dbc2f;
+  top: 3.25rem;
+  left: 13.5rem;
+  transform: rotate(-4deg);
+  z-index: -1 !important;
+  filter: drop-shadow(2.5rem -0.1rem 0 #bc2f60) drop-shadow(5rem 0 0 #bc592f);
+}
+
+.hs.row4.col4:checked ~ .hs.row4.col5:checked ~ div > div > house > .row4.col4:after {
+  box-shadow: 0 2rem 0 currentColor, 0 4rem 0 currentColor, 0 6rem 0 currentColor, 0 8rem 0 currentColor, 0 10rem 0 currentColor;
+}
+
+.hs.row4.col3:checked ~ .hs.row4.col4:checked ~ .hs.row4.col5:checked ~ div > div > house > .row4.col4:after {
+  box-shadow: -2rem 6rem 0 rgba(204, 51, 51, 0.5), 0 7rem 0 currentColor;
+}
+
+.hs.row4.col3:checked ~ .hs.row4.col4:checked ~ div > div > house > .row4.col4:after {
+  box-shadow: -2rem 3rem 0 rgba(204, 51, 51, 0.5), 0 5rem 0 currentColor, 10.75rem 0 0 currentColor, 10.75rem 2rem 0 currentColor, 10.75rem 4rem 0 currentColor, 10.75rem 6rem 0 currentColor, 10.75rem 8rem 0 currentColor, 10.75rem 10rem 0 currentColor;
+}
+
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col1 {
+  border-bottom: none;
+}
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col2 {
+  border-bottom: none;
+}
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col3 {
+  border-bottom: none;
+}
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col4 {
+  border-bottom: none;
+}
+.hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col1 {
+  border-bottom: none;
+}
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col2 {
+  border-bottom: none;
+}
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col3 {
+  border-bottom: none;
+}
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col4 {
+  border-bottom: none;
+}
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > house > .row3.col1 {
+  border-bottom: none;
+}
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col2 {
+  border-bottom: none;
+}
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col3 {
+  border-bottom: none;
+}
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 {
+  border-bottom: 0.75rem solid #20112a;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3) {
+  width: 2rem;
+  height: 325%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  top: 12rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+  z-index: -200;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3):before {
+  width: 12rem;
+  height: 12rem;
+  border: 1.15rem dashed rgba(255, 255, 255, 0);
+  border-bottom-color: #20112a;
+  box-shadow: 0 0.75rem 0 #20112a, inset 0 -0.75rem 0 #20112a;
+  top: 0.5rem;
+  border-radius: 5rem;
+  left: -0.5rem;
+  transform: scaleY(-1);
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3):after {
+  width: 2rem;
+  height: 100%;
+  border-left: 0.75rem solid #20112a;
+  border-right: 0.75rem solid #20112a;
+  left: 9.8rem;
+  background: repeating-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4rem, #20112a, #20112a 4.5rem);
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4:nth-of-type(n + 5) > i:nth-of-type(3) {
+  height: 225%;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4:nth-of-type(n + 9) > i:nth-of-type(3) {
+  height: 13.5rem;
+}
+
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col4 {
+  border-bottom: none;
+}
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(3) {
+  display: none !important;
+}
+
+[id^="cb23"]:checked ~ div > div > house > [for="ncb23"] {
+  box-shadow: 0 0.5rem 0 #bc2f2f;
+}
+[id^="cb23"]:checked ~ div > div > house > [for="ncb23"] > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  border-radius: 0.5rem;
+}
+[id^="cb23"]:checked ~ div > div > house > [for="ncb23"] > i:nth-of-type(3):before {
+  width: 7rem;
+  height: 4rem;
+  left: -8em;
+  top: 6rem;
+  border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem;
+  background: #7dbc2f;
+  box-shadow: 3rem 1rem 0 -1rem #81bc2f, 14rem 0.5rem 0 -0.5rem #bca52f, 10rem 1rem 0 -1.25rem #7dbc2f;
+}
+[id^="cb23"]:checked ~ div > div > house > [for="ncb23"] > i:nth-of-type(3):after {
+  width: 0.75rem;
+  height: 0.75rem;
+  background: #fff;
+  border-radius: 50%;
+  left: -5rem;
+  top: 7rem;
+  box-shadow: 2rem 0.5rem 0 -0.1rem #fff, 1rem 1.5rem 0 -0.05rem #fff, 15rem 1.5rem 0 -0.05rem #fff, 16rem 1rem 0 -0.1rem #fff;
+}
+[id^="cb23"]:checked ~ div > div > house > [for="ncb23"].col3 > i:nth-of-type(3):before {
+  height: 3rem;
+  left: -8.5em;
+  top: 7rem;
+  background: #7dbc2f;
+  box-shadow: 3rem 0.75rem 0 -1rem #81bc2f, 14rem 1rem 0 0.5rem #7dbc2f, 10rem 0.5rem 0 -0.5rem #bca52f;
+}
+[id^="cb23"]:checked ~ div > div > house > [for="ncb23"].col3 > i:nth-of-type(3):after {
+  left: -7rem;
+}
+[id^="cb23"]:checked ~ div > div > house > [for="ncb23"].col2 > i:nth-of-type(3):before {
+  height: 3.5rem;
+  width: 6rem;
+  left: -7em;
+  top: 6.5rem;
+  background: #7dbc2f;
+  box-shadow: 3rem 0.75rem 0 -1rem #81bc2f, 13rem 1rem 0 0.5rem #bca52f, 9rem 0.5rem 0 -0.5rem #81bc2f;
+}
+[id^="cb23"]:checked ~ div > div > house > [for="ncb23"].col2 > i:nth-of-type(3):after {
+  left: -7rem;
+}
+[id^="cb23"]:checked ~ div > div > house > [for="ncb23"].col1 > i:nth-of-type(3):before {
+  width: 6rem;
+  height: 3rem;
+  left: -6.5em;
+  top: 7rem;
+  border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem;
+  background: #81bc2f;
+  box-shadow: 3rem 0.5rem 0 -0.75rem #7dbc2f, 9rem 0.5rem 0 -0.5rem #7dbc2f, 12rem -0.25rem 0 0.5rem #bca52f;
+}
+[id^="cb23"]:checked ~ div > div > house > [for="ncb23"].col1 > i:nth-of-type(3):after {
+  width: 0.75rem;
+  height: 0.75rem;
+  background: #fff;
+  border-radius: 50%;
+  left: -5rem;
+  top: 7rem;
+  box-shadow: 2rem 0.5rem 0 -0.1rem #fff, 1rem 0.75rem 0 -0.05rem #fff, 16rem 1.5rem 0 -0.05rem #fff, 15rem 1rem 0 -0.1rem #fff;
+}
+
+#cb23:checked
+~ #cb24:not(:checked)
+~ div
+> div
+> house
+> [for="ncb23"] > i:nth-of-type(3),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(3),
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(3) {
+  background: radial-gradient(circle at 80% center, #bc2f60 0.25rem, rgba(255, 255, 255, 0) 0.25rem), radial-gradient(circle at 81% 52%, rgba(79, 1, 14, 0.75) 0.25rem, rgba(255, 255, 255, 0) 0.4rem), #6a1b37;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+#cb23:checked
+~ #cb24:not(:checked)
+~ div
+> div
+> house
+> [for="ncb23"].col1 > i:nth-of-type(3),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"].col1 > i:nth-of-type(3),
+#cb26:checked ~ div > div > house > [for="ncb26"].col1 > i:nth-of-type(3) {
+  background: radial-gradient(circle at 80% center, #bc2f60 0.25rem, rgba(255, 255, 255, 0) 0.25rem), radial-gradient(circle at 81% 52%, rgba(79, 1, 14, 0.75) 0.25rem, rgba(255, 255, 255, 0) 0.4rem), #683f44;
+}
+#cb23:checked
+~ #cb24:not(:checked)
+~ div
+> div
+> house
+> [for="ncb23"].col1 > i:nth-of-type(3),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"].col1 > i:nth-of-type(3),
+#cb26:checked ~ div > div > house > [for="ncb26"].col1 > i:nth-of-type(3) {
+  background: radial-gradient(circle at 80% center, #bc2f60 0.25rem, rgba(255, 255, 255, 0) 0.25rem), radial-gradient(circle at 81% 52%, rgba(79, 1, 14, 0.75) 0.25rem, rgba(255, 255, 255, 0) 0.4rem), #252529;
+}
+#cb23:checked
+~ #cb24:not(:checked)
+~ div
+> div
+> house
+> [for="ncb23"] > i:nth-of-type(4),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4),
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(4) {
+  transform: scale(0.5);
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #6a1b37, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+#cb23:checked
+~ #cb24:not(:checked)
+~ div
+> div
+> house
+> [for="ncb23"] > i:nth-of-type(4):after,
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4):after,
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(4):after {
+  height: 0.5rem;
+  top: 2.3rem;
+  background: #6a1b37;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+#cb23:checked
+~ #cb24:not(:checked)
+~ div
+> div
+> house
+> [for="ncb23"] > i:nth-of-type(4):before,
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4):before,
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(4):before {
+  width: 0.5rem;
+  left: 2.3rem;
+  background: #6a1b37;
+}
+
+[id^="cb24"]:checked ~ div > div > house > [for="ncb24"] {
+  box-shadow: 0 0.5rem 0 #bc2f2f;
+}
+[id^="cb24"]:checked ~ div > div > house > [for="ncb24"] > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  border-radius: 0.5rem;
+}
+[id^="cb24"]:checked ~ div > div > house > [for="ncb24"] > i:nth-of-type(3):before {
+  width: 7rem;
+  height: 4rem;
+  left: -8em;
+  top: 6rem;
+  border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem;
+  background: #7dbc2f;
+  box-shadow: 3rem 1rem 0 -1rem #81bc2f, 14rem 0.5rem 0 -0.5rem #bca52f, 10rem 1rem 0 -1.25rem #7dbc2f;
+}
+[id^="cb24"]:checked ~ div > div > house > [for="ncb24"] > i:nth-of-type(3):after {
+  width: 0.75rem;
+  height: 0.75rem;
+  background: #fff;
+  border-radius: 50%;
+  left: -5rem;
+  top: 7rem;
+  box-shadow: 2rem 0.5rem 0 -0.1rem #fff, 1rem 1.5rem 0 -0.05rem #fff, 15rem 1.5rem 0 -0.05rem #fff, 16rem 1rem 0 -0.1rem #fff;
+}
+[id^="cb24"]:checked ~ div > div > house > [for="ncb24"].col3 > i:nth-of-type(3):before {
+  height: 3rem;
+  left: -8.5em;
+  top: 7rem;
+  background: #7dbc2f;
+  box-shadow: 3rem 0.75rem 0 -1rem #81bc2f, 14rem 1rem 0 0.5rem #7dbc2f, 10rem 0.5rem 0 -0.5rem #bca52f;
+}
+[id^="cb24"]:checked ~ div > div > house > [for="ncb24"].col3 > i:nth-of-type(3):after {
+  left: -7rem;
+}
+[id^="cb24"]:checked ~ div > div > house > [for="ncb24"].col2 > i:nth-of-type(3):before {
+  height: 3.5rem;
+  width: 6rem;
+  left: -7em;
+  top: 6.5rem;
+  background: #7dbc2f;
+  box-shadow: 3rem 0.75rem 0 -1rem #81bc2f, 13rem 1rem 0 0.5rem #bca52f, 9rem 0.5rem 0 -0.5rem #81bc2f;
+}
+[id^="cb24"]:checked ~ div > div > house > [for="ncb24"].col2 > i:nth-of-type(3):after {
+  left: -7rem;
+}
+[id^="cb24"]:checked ~ div > div > house > [for="ncb24"].col1 > i:nth-of-type(3):before {
+  width: 6rem;
+  height: 3rem;
+  left: -6.5em;
+  top: 7rem;
+  border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem;
+  background: #81bc2f;
+  box-shadow: 3rem 0.5rem 0 -0.75rem #7dbc2f, 9rem 0.5rem 0 -0.5rem #7dbc2f, 12rem -0.25rem 0 0.5rem #bca52f;
+}
+[id^="cb24"]:checked ~ div > div > house > [for="ncb24"].col1 > i:nth-of-type(3):after {
+  width: 0.75rem;
+  height: 0.75rem;
+  background: #fff;
+  border-radius: 50%;
+  left: -5rem;
+  top: 7rem;
+  box-shadow: 2rem 0.5rem 0 -0.1rem #fff, 1rem 0.75rem 0 -0.05rem #fff, 16rem 1.5rem 0 -0.05rem #fff, 15rem 1rem 0 -0.1rem #fff;
+}
+
+#cb24:checked
+~ #cb25:not(:checked)
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(3),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(3),
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(3) {
+  background: radial-gradient(circle at 80% center, #bc2f60 0.25rem, rgba(255, 255, 255, 0) 0.25rem), radial-gradient(circle at 81% 52%, rgba(79, 1, 14, 0.75) 0.25rem, rgba(255, 255, 255, 0) 0.4rem), #6a1b37;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+#cb24:checked
+~ #cb25:not(:checked)
+~ div
+> div
+> house
+> [for="ncb24"].col3 > i:nth-of-type(3),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"].col3 > i:nth-of-type(3),
+#cb26:checked ~ div > div > house > [for="ncb26"].col3 > i:nth-of-type(3) {
+  background: radial-gradient(circle at 80% center, #bc2f60 0.25rem, rgba(255, 255, 255, 0) 0.25rem), radial-gradient(circle at 81% 52%, rgba(79, 1, 14, 0.75) 0.25rem, rgba(255, 255, 255, 0) 0.4rem), #683f44;
+}
+#cb24:checked
+~ #cb25:not(:checked)
+~ div
+> div
+> house
+> [for="ncb24"].col1 > i:nth-of-type(3),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"].col1 > i:nth-of-type(3),
+#cb26:checked ~ div > div > house > [for="ncb26"].col1 > i:nth-of-type(3) {
+  background: radial-gradient(circle at 80% center, #bc2f60 0.25rem, rgba(255, 255, 255, 0) 0.25rem), radial-gradient(circle at 81% 52%, rgba(79, 1, 14, 0.75) 0.25rem, rgba(255, 255, 255, 0) 0.4rem), #252529;
+}
+#cb24:checked
+~ #cb25:not(:checked)
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4),
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(4) {
+  transform: scale(0.5);
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #6a1b37, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+#cb24:checked
+~ #cb25:not(:checked)
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4):after,
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4):after,
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(4):after {
+  height: 0.5rem;
+  top: 2.3rem;
+  background: #6a1b37;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+#cb24:checked
+~ #cb25:not(:checked)
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4):before,
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4):before,
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(4):before {
+  width: 0.5rem;
+  left: 2.3rem;
+  background: #6a1b37;
+}
+
+[id^="cb25"]:checked ~ div > div > house > [for="ncb25"] {
+  box-shadow: 0 0.5rem 0 #bc2f2f;
+}
+[id^="cb25"]:checked ~ div > div > house > [for="ncb25"] > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  border-radius: 0.5rem;
+}
+[id^="cb25"]:checked ~ div > div > house > [for="ncb25"] > i:nth-of-type(3):before {
+  width: 7rem;
+  height: 4rem;
+  left: -8em;
+  top: 6rem;
+  border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem;
+  background: #7dbc2f;
+  box-shadow: 3rem 1rem 0 -1rem #81bc2f, 14rem 0.5rem 0 -0.5rem #bca52f, 10rem 1rem 0 -1.25rem #7dbc2f;
+}
+[id^="cb25"]:checked ~ div > div > house > [for="ncb25"] > i:nth-of-type(3):after {
+  width: 0.75rem;
+  height: 0.75rem;
+  background: #fff;
+  border-radius: 50%;
+  left: -5rem;
+  top: 7rem;
+  box-shadow: 2rem 0.5rem 0 -0.1rem #fff, 1rem 1.5rem 0 -0.05rem #fff, 15rem 1.5rem 0 -0.05rem #fff, 16rem 1rem 0 -0.1rem #fff;
+}
+[id^="cb25"]:checked ~ div > div > house > [for="ncb25"].col3 > i:nth-of-type(3):before {
+  height: 3rem;
+  left: -8.5em;
+  top: 7rem;
+  background: #7dbc2f;
+  box-shadow: 3rem 0.75rem 0 -1rem #81bc2f, 14rem 1rem 0 0.5rem #7dbc2f, 10rem 0.5rem 0 -0.5rem #bca52f;
+}
+[id^="cb25"]:checked ~ div > div > house > [for="ncb25"].col3 > i:nth-of-type(3):after {
+  left: -7rem;
+}
+[id^="cb25"]:checked ~ div > div > house > [for="ncb25"].col2 > i:nth-of-type(3):before {
+  height: 3.5rem;
+  width: 6rem;
+  left: -7em;
+  top: 6.5rem;
+  background: #7dbc2f;
+  box-shadow: 3rem 0.75rem 0 -1rem #81bc2f, 13rem 1rem 0 0.5rem #bca52f, 9rem 0.5rem 0 -0.5rem #81bc2f;
+}
+[id^="cb25"]:checked ~ div > div > house > [for="ncb25"].col2 > i:nth-of-type(3):after {
+  left: -7rem;
+}
+[id^="cb25"]:checked ~ div > div > house > [for="ncb25"].col1 > i:nth-of-type(3):before {
+  width: 6rem;
+  height: 3rem;
+  left: -6.5em;
+  top: 7rem;
+  border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem;
+  background: #81bc2f;
+  box-shadow: 3rem 0.5rem 0 -0.75rem #7dbc2f, 9rem 0.5rem 0 -0.5rem #7dbc2f, 12rem -0.25rem 0 0.5rem #bca52f;
+}
+[id^="cb25"]:checked ~ div > div > house > [for="ncb25"].col1 > i:nth-of-type(3):after {
+  width: 0.75rem;
+  height: 0.75rem;
+  background: #fff;
+  border-radius: 50%;
+  left: -5rem;
+  top: 7rem;
+  box-shadow: 2rem 0.5rem 0 -0.1rem #fff, 1rem 0.75rem 0 -0.05rem #fff, 16rem 1.5rem 0 -0.05rem #fff, 15rem 1rem 0 -0.1rem #fff;
+}
+
+#cb25:checked
+~ #cb26:not(:checked)
+~ div
+> div
+> house
+> [for="ncb25"] > i:nth-of-type(3),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(3),
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(3) {
+  background: radial-gradient(circle at 80% center, #bc2f60 0.25rem, rgba(255, 255, 255, 0) 0.25rem), radial-gradient(circle at 81% 52%, rgba(79, 1, 14, 0.75) 0.25rem, rgba(255, 255, 255, 0) 0.4rem), #6a1b37;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+#cb25:checked
+~ #cb26:not(:checked)
+~ div
+> div
+> house
+> [for="ncb25"].col4 > i:nth-of-type(3),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"].col4 > i:nth-of-type(3),
+#cb26:checked ~ div > div > house > [for="ncb26"].col4 > i:nth-of-type(3) {
+  background: radial-gradient(circle at 80% center, #bc2f60 0.25rem, rgba(255, 255, 255, 0) 0.25rem), radial-gradient(circle at 81% 52%, rgba(79, 1, 14, 0.75) 0.25rem, rgba(255, 255, 255, 0) 0.4rem), #683f44;
+}
+#cb25:checked
+~ #cb26:not(:checked)
+~ div
+> div
+> house
+> [for="ncb25"].col2 > i:nth-of-type(3),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"].col2 > i:nth-of-type(3),
+#cb26:checked ~ div > div > house > [for="ncb26"].col2 > i:nth-of-type(3) {
+  background: radial-gradient(circle at 80% center, #bc2f60 0.25rem, rgba(255, 255, 255, 0) 0.25rem), radial-gradient(circle at 81% 52%, rgba(79, 1, 14, 0.75) 0.25rem, rgba(255, 255, 255, 0) 0.4rem), #252529;
+}
+#cb25:checked
+~ #cb26:not(:checked)
+~ div
+> div
+> house
+> [for="ncb25"] > i:nth-of-type(4),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4),
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(4) {
+  transform: scale(0.5);
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #6a1b37, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+#cb25:checked
+~ #cb26:not(:checked)
+~ div
+> div
+> house
+> [for="ncb25"] > i:nth-of-type(4):after,
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4):after,
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(4):after {
+  height: 0.5rem;
+  top: 2.3rem;
+  background: #6a1b37;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+#cb25:checked
+~ #cb26:not(:checked)
+~ div
+> div
+> house
+> [for="ncb25"] > i:nth-of-type(4):before,
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4):before,
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(4):before {
+  width: 0.5rem;
+  left: 2.3rem;
+  background: #6a1b37;
+}
+
+[id^="cb26"]:checked ~ div > div > house > [for="ncb26"] {
+  box-shadow: 0 0.5rem 0 #bc2f2f;
+}
+[id^="cb26"]:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(3) {
+  width: 4rem;
+  height: 9rem;
+  right: 0;
+  margin: auto;
+  top: 3.5rem;
+  border-radius: 0.5rem;
+}
+[id^="cb26"]:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(3):before {
+  width: 7rem;
+  height: 4rem;
+  left: -8em;
+  top: 6rem;
+  border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem;
+  background: #7dbc2f;
+  box-shadow: 3rem 1rem 0 -1rem #81bc2f, 14rem 0.5rem 0 -0.5rem #bca52f, 10rem 1rem 0 -1.25rem #7dbc2f;
+}
+[id^="cb26"]:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(3):after {
+  width: 0.75rem;
+  height: 0.75rem;
+  background: #fff;
+  border-radius: 50%;
+  left: -5rem;
+  top: 7rem;
+  box-shadow: 2rem 0.5rem 0 -0.1rem #fff, 1rem 1.5rem 0 -0.05rem #fff, 15rem 1.5rem 0 -0.05rem #fff, 16rem 1rem 0 -0.1rem #fff;
+}
+[id^="cb26"]:checked ~ div > div > house > [for="ncb26"].col3 > i:nth-of-type(3):before {
+  height: 3rem;
+  left: -8.5em;
+  top: 7rem;
+  background: #7dbc2f;
+  box-shadow: 3rem 0.75rem 0 -1rem #81bc2f, 14rem 1rem 0 0.5rem #7dbc2f, 10rem 0.5rem 0 -0.5rem #bca52f;
+}
+[id^="cb26"]:checked ~ div > div > house > [for="ncb26"].col3 > i:nth-of-type(3):after {
+  left: -7rem;
+}
+[id^="cb26"]:checked ~ div > div > house > [for="ncb26"].col2 > i:nth-of-type(3):before {
+  height: 3.5rem;
+  width: 6rem;
+  left: -7em;
+  top: 6.5rem;
+  background: #7dbc2f;
+  box-shadow: 3rem 0.75rem 0 -1rem #81bc2f, 13rem 1rem 0 0.5rem #bca52f, 9rem 0.5rem 0 -0.5rem #81bc2f;
+}
+[id^="cb26"]:checked ~ div > div > house > [for="ncb26"].col2 > i:nth-of-type(3):after {
+  left: -7rem;
+}
+[id^="cb26"]:checked ~ div > div > house > [for="ncb26"].col1 > i:nth-of-type(3):before {
+  width: 6rem;
+  height: 3rem;
+  left: -6.5em;
+  top: 7rem;
+  border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem;
+  background: #81bc2f;
+  box-shadow: 3rem 0.5rem 0 -0.75rem #7dbc2f, 9rem 0.5rem 0 -0.5rem #7dbc2f, 12rem -0.25rem 0 0.5rem #bca52f;
+}
+[id^="cb26"]:checked ~ div > div > house > [for="ncb26"].col1 > i:nth-of-type(3):after {
+  width: 0.75rem;
+  height: 0.75rem;
+  background: #fff;
+  border-radius: 50%;
+  left: -5rem;
+  top: 7rem;
+  box-shadow: 2rem 0.5rem 0 -0.1rem #fff, 1rem 0.75rem 0 -0.05rem #fff, 16rem 1.5rem 0 -0.05rem #fff, 15rem 1rem 0 -0.1rem #fff;
+}
+
+#cb26:checked
+~ #cb27:not(:checked)
+~ div
+> div
+> house
+> [for="ncb26"] > i:nth-of-type(3),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(3),
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(3) {
+  background: radial-gradient(circle at 80% center, #bc2f60 0.25rem, rgba(255, 255, 255, 0) 0.25rem), radial-gradient(circle at 81% 52%, rgba(79, 1, 14, 0.75) 0.25rem, rgba(255, 255, 255, 0) 0.4rem), #6a1b37;
+  box-shadow: inset 0 0.5rem 1rem rgba(79, 1, 14, 0.75);
+}
+#cb26:checked
+~ #cb27:not(:checked)
+~ div
+> div
+> house
+> [for="ncb26"].col4 > i:nth-of-type(3),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"].col4 > i:nth-of-type(3),
+#cb26:checked ~ div > div > house > [for="ncb26"].col4 > i:nth-of-type(3) {
+  background: radial-gradient(circle at 80% center, #bc2f60 0.25rem, rgba(255, 255, 255, 0) 0.25rem), radial-gradient(circle at 81% 52%, rgba(79, 1, 14, 0.75) 0.25rem, rgba(255, 255, 255, 0) 0.4rem), #683f44;
+}
+#cb26:checked
+~ #cb27:not(:checked)
+~ div
+> div
+> house
+> [for="ncb26"].col1 > i:nth-of-type(3),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"].col1 > i:nth-of-type(3),
+#cb26:checked ~ div > div > house > [for="ncb26"].col1 > i:nth-of-type(3) {
+  background: radial-gradient(circle at 80% center, #bc2f60 0.25rem, rgba(255, 255, 255, 0) 0.25rem), radial-gradient(circle at 81% 52%, rgba(79, 1, 14, 0.75) 0.25rem, rgba(255, 255, 255, 0) 0.4rem), #252529;
+}
+#cb26:checked
+~ #cb27:not(:checked)
+~ div
+> div
+> house
+> [for="ncb26"] > i:nth-of-type(4),
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4),
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(4) {
+  transform: scale(0.5);
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #6a1b37, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 0 -2rem 0 #000, inset 0 -3.5rem 0 #20112a;
+}
+#cb26:checked
+~ #cb27:not(:checked)
+~ div
+> div
+> house
+> [for="ncb26"] > i:nth-of-type(4):after,
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4):after,
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(4):after {
+  height: 0.5rem;
+  top: 2.3rem;
+  background: #6a1b37;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+#cb26:checked
+~ #cb27:not(:checked)
+~ div
+> div
+> house
+> [for="ncb26"] > i:nth-of-type(4):before,
+#cb23:checked
+~ #cb24:checked
+~ #cb25:checked
+~ #cb26:checked
+~ div
+> div
+> house
+> [for="ncb24"] > i:nth-of-type(4):before,
+#cb26:checked ~ div > div > house > [for="ncb26"] > i:nth-of-type(4):before {
+  width: 0.5rem;
+  left: 2.3rem;
+  background: #6a1b37;
+}
+
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row1.col3,
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row2.col3,
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row3.col3,
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row4.col3 {
+  background: #a19372;
+  color: #a19372;
+  z-index: 310;
+}
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row1.col3 > i:nth-of-type(4), .hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row1.col3 > i:nth-of-type(3),
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row2.col3 > i:nth-of-type(4),
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row2.col3 > i:nth-of-type(3),
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row3.col3 > i:nth-of-type(4),
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row3.col3 > i:nth-of-type(3),
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row4.col3 > i:nth-of-type(4),
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row4.col3 > i:nth-of-type(3) {
+  border-radius: 50% 50% 0.3rem 0.3rem;
+}
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row1.col3 > i:nth-of-type(3),
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row2.col3 > i:nth-of-type(3),
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row3.col3 > i:nth-of-type(3),
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row4.col3 > i:nth-of-type(3) {
+  height: 10rem;
+  width: 4.5rem;
+  top: 2.5rem;
+}
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row1.col3 > i:nth-of-type(3):before,
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row2.col3 > i:nth-of-type(3):before,
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row3.col3 > i:nth-of-type(3):before,
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row4.col3 > i:nth-of-type(3):before {
+  top: 8rem;
+}
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row1.col3 > i:nth-of-type(3):after,
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row2.col3 > i:nth-of-type(3):after,
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row3.col3 > i:nth-of-type(3):after,
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row4.col3 > i:nth-of-type(3):after {
+  top: 8rem;
+}
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row1.col3 > i:nth-of-type(4):after,
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row2.col3 > i:nth-of-type(4):after,
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row3.col3 > i:nth-of-type(4):after,
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row4.col3 > i:nth-of-type(4):after {
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row1.col3 > i:nth-of-type(1) {
+  display: none;
+}
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row1.col3 > i:nth-of-type(2) {
+  border: 1rem solid rgba(255, 255, 255, 0);
+  border-left: 3rem solid #bc592f;
+  top: -8.5rem;
+  left: 4.25rem;
+  box-shadow: none;
+}
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row1.col3 > i:nth-of-type(2):before {
+  top: 3.25rem;
+  left: -8.25rem;
+  background: #a19372;
+  width: 2.75rem;
+  height: 5rem;
+  border-radius: 0.25rem 0.25rem 50% 50%;
+  box-shadow: 4rem 0 0 #a19372, 8rem 0 0 #a19372, 12rem 0 0 #a19372;
+}
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row1.col3 > i:nth-of-type(2):after {
+  width: 14.5rem;
+  height: 3rem;
+  top: 6.25rem;
+  border-radius: 0 0 2rem 2rem;
+  background: #a19372;
+  left: -8.25rem;
+  filter: none;
+  border: none;
+  box-shadow: none;
+}
+.hs.house.row4.col2:not(:checked)
+~ .hs.row4.col3:checked
+~ .hs.house.row4.col4:not(:checked)
+~ .hs.house.row3.col2:not(:checked)
+~ .hs.row3.col3:checked
+~ .hs.house.row3.col4:not(:checked)
+~ .hs.house.row2.col2:not(:checked)
+~ .hs.row2.col3:checked
+~ .hs.house.row2.col4:not(:checked)
+~ .hs.house.row1.col2:not(:checked)
+~ .hs.row1.col3:checked
+~ .hs.house.row1.col4:not(:checked)
+~ div > div > house > .row1.col3 > i:nth-of-type(4):before {
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), -2rem -12.5rem 0 #20112a;
+}
+
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row2.col2,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row3.col2,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row4.col2 {
+  z-index: 310;
+  background: none;
+  border: none;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2:before, .hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2:after,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row2.col2:before,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row2.col2:after,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row3.col2:before,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row3.col2:after,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row4.col2:before,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row4.col2:after {
+  width: 80%;
+  height: 105%;
+  background: linear-gradient(to right, #a99c7e, currentColor);
+  transform: skewX(-2deg);
+  border-radius: 0.1rem 0.1rem 50% 50% / 50% 50% 0.25rem 0.25rem;
+  top: 0;
+  left: -1rem;
+  box-shadow: none;
+  filter: none;
+  opacity: 1;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2:after,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row2.col2:after,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row3.col2:after,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row4.col2:after {
+  left: auto;
+  right: -1rem;
+  transform: skewX(2deg);
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), currentColor, #86795a);
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2 > i:nth-of-type(4),
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row2.col2 > i:nth-of-type(4),
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row3.col2 > i:nth-of-type(4),
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row4.col2 > i:nth-of-type(4) {
+  border-radius: 50%;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2 > i:nth-of-type(3),
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row2.col2 > i:nth-of-type(3),
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row3.col2 > i:nth-of-type(3),
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row4.col2 > i:nth-of-type(3) {
+  border-radius: 2rem 2rem 0.5rem 0.5rem;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2 > i:nth-of-type(4):after,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row2.col2 > i:nth-of-type(4):after,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row3.col2 > i:nth-of-type(4):after,
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row4.col2 > i:nth-of-type(4):after {
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2 > i:nth-of-type(1) {
+  display: none;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2 > i:nth-of-type(2) {
+  width: 8rem;
+  height: 12rem;
+  border: 0.5rem solid rgba(255, 255, 255, 0);
+  border-top: 1rem solid #252529;
+  border-bottom: 6rem solid #6a1b37;
+  border-radius: 0.5rem 0.5rem 0 0;
+  top: -12rem;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background: repeating-linear-gradient(to right, #252529 0.5rem, #252529 1rem, rgba(255, 255, 255, 0) 1rem, rgba(255, 255, 255, 0) 3.25rem), repeating-linear-gradient(45deg, #6a1b37, #6a1b37 0.2rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1rem), repeating-linear-gradient(-45deg, #6a1b37, #6a1b37 0.2rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1rem);
+  box-shadow: inset 0 -1rem 0 #252529;
+  background-size: cover;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2 > i:nth-of-type(2):before {
+  border: 3rem solid rgba(255, 255, 255, 0);
+  width: 6.5rem;
+  box-shadow: inset 0 3rem 0 #6a1b37;
+  border-bottom-color: #20112a;
+  top: -10rem;
+  right: 0;
+  margin: auto;
+  height: 9rem;
+  border-radius: 0;
+  background: none;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2 > i:nth-of-type(2):after {
+  width: 12.5rem;
+  background: repeating-linear-gradient(to right, #252529, #252529 0.5rem, rgba(255, 255, 255, 0) 0.5rem, rgba(255, 255, 255, 0) 1.32rem);
+  height: 5rem;
+  top: 6rem;
+  border-radius: 0.5rem;
+  border: none;
+  border-bottom: 1rem solid #252529;
+  border-top: 0.5rem solid #252529;
+  left: -10rem;
+  right: -10rem;
+  margin: auto;
+  box-shadow: none;
+  display: block;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row3.col2 {
+  color: #a19372;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row3.col2:before, .hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row3.col2:after {
+  left: -0.5rem;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row3.col2:after {
+  left: auto;
+  right: -0.5rem;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row2.col2:before, .hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row2.col2:after {
+  left: 0;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row2.col2:after {
+  left: auto;
+  right: 0;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2 {
+  color: #a19372;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2:before, .hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2:after {
+  left: 0.5rem;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div > div > house > .row1.col2:after {
+  left: auto;
+  right: 0.5rem;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ text {
+  transform: scale(1) !important;
+  z-index: 410;
+  transition: all 0.5s 1s ease-in-out;
+  opacity: 1;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ text welldone {
+  display: block;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ text gameover {
+  display: none;
+}
+
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(4) {
+  border-radius: 50% !important;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(4):after {
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+
+.hs.house.row4.col2:checked ~ .hs.shed.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(4) {
+  border-radius: 50%;
+}
+.hs.house.row4.col2:checked ~ .hs.shed.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(4):after {
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3);
+}
+
+house label,
+shed label {
+  opacity: 0;
+}
+house label *, house label:after, house label:before,
+shed label *,
+shed label:after,
+shed label:before {
+  transform: translate3d(0, 0, 0);
+}
+
+@keyframes pop {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -12rem, 0);
+  }
+  99% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes popup {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 12rem, 0);
+  }
+  99% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.shed.row1.col1:checked ~ div > div > shed > .row1.col1,
+.house.row1.col1:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.shed.row1.col1:checked ~ div > div > shed > .row1.col1:after, .shed.row1.col1:checked ~ div > div > shed > .row1.col1 *:after,
+.house.row1.col1:checked ~ div > div > house > .row1.col1:after,
+.house.row1.col1:checked ~ div > div > house > .row1.col1 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row1.col1:checked ~ div > div > shed > .row1.col1:before, .shed.row1.col1:checked ~ div > div > shed > .row1.col1 *:before,
+.house.row1.col1:checked ~ div > div > house > .row1.col1:before,
+.house.row1.col1:checked ~ div > div > house > .row1.col1 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row1.col1:checked ~ div > div > house > .row1.col1 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row1.col1:checked
+~ div
+> div
+> hbtn
+> .row1.col0 {
+  z-index: 100;
+}
+
+.house.row1.col1:checked
+~ div
+> div
+> hbtn
+> .row1.col2 {
+  z-index: 100;
+}
+
+.house.row1.col1:checked
+~ div
+> div
+> hbtn
+> .row2.col1 {
+  z-index: 100;
+}
+
+.house.row1.col1:checked
+~ div
+> div
+> hbtn
+> .row0.col1 {
+  z-index: 100;
+}
+
+.shed.row1.col2:checked ~ div > div > shed > .row1.col2,
+.house.row1.col2:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.shed.row1.col2:checked ~ div > div > shed > .row1.col2:after, .shed.row1.col2:checked ~ div > div > shed > .row1.col2 *:after,
+.house.row1.col2:checked ~ div > div > house > .row1.col2:after,
+.house.row1.col2:checked ~ div > div > house > .row1.col2 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row1.col2:checked ~ div > div > shed > .row1.col2:before, .shed.row1.col2:checked ~ div > div > shed > .row1.col2 *:before,
+.house.row1.col2:checked ~ div > div > house > .row1.col2:before,
+.house.row1.col2:checked ~ div > div > house > .row1.col2 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row1.col2:checked ~ div > div > house > .row1.col2 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row1.col2:checked
+~ div
+> div
+> hbtn
+> .row1.col1 {
+  z-index: 100;
+}
+
+.house.row1.col2:checked
+~ div
+> div
+> hbtn
+> .row1.col3 {
+  z-index: 100;
+}
+
+.house.row1.col2:checked
+~ div
+> div
+> hbtn
+> .row2.col2 {
+  z-index: 100;
+}
+
+.house.row1.col2:checked
+~ div
+> div
+> hbtn
+> .row0.col2 {
+  z-index: 100;
+}
+
+.shed.row1.col3:checked ~ div > div > shed > .row1.col3,
+.house.row1.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.shed.row1.col3:checked ~ div > div > shed > .row1.col3:after, .shed.row1.col3:checked ~ div > div > shed > .row1.col3 *:after,
+.house.row1.col3:checked ~ div > div > house > .row1.col3:after,
+.house.row1.col3:checked ~ div > div > house > .row1.col3 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row1.col3:checked ~ div > div > shed > .row1.col3:before, .shed.row1.col3:checked ~ div > div > shed > .row1.col3 *:before,
+.house.row1.col3:checked ~ div > div > house > .row1.col3:before,
+.house.row1.col3:checked ~ div > div > house > .row1.col3 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row1.col3:checked ~ div > div > house > .row1.col3 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row1.col3:checked
+~ div
+> div
+> hbtn
+> .row1.col2 {
+  z-index: 100;
+}
+
+.house.row1.col3:checked
+~ div
+> div
+> hbtn
+> .row1.col4 {
+  z-index: 100;
+}
+
+.house.row1.col3:checked
+~ div
+> div
+> hbtn
+> .row2.col3 {
+  z-index: 100;
+}
+
+.house.row1.col3:checked
+~ div
+> div
+> hbtn
+> .row0.col3 {
+  z-index: 100;
+}
+
+.shed.row1.col4:checked ~ div > div > shed > .row1.col4,
+.house.row1.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.shed.row1.col4:checked ~ div > div > shed > .row1.col4:after, .shed.row1.col4:checked ~ div > div > shed > .row1.col4 *:after,
+.house.row1.col4:checked ~ div > div > house > .row1.col4:after,
+.house.row1.col4:checked ~ div > div > house > .row1.col4 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row1.col4:checked ~ div > div > shed > .row1.col4:before, .shed.row1.col4:checked ~ div > div > shed > .row1.col4 *:before,
+.house.row1.col4:checked ~ div > div > house > .row1.col4:before,
+.house.row1.col4:checked ~ div > div > house > .row1.col4 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row1.col4:checked ~ div > div > house > .row1.col4 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row1.col4:checked
+~ div
+> div
+> hbtn
+> .row1.col3 {
+  z-index: 100;
+}
+
+.house.row1.col4:checked
+~ div
+> div
+> hbtn
+> .row1.col5 {
+  z-index: 100;
+}
+
+.house.row1.col4:checked
+~ div
+> div
+> hbtn
+> .row2.col4 {
+  z-index: 100;
+}
+
+.house.row1.col4:checked
+~ div
+> div
+> hbtn
+> .row0.col4 {
+  z-index: 100;
+}
+
+.shed.row2.col1:checked ~ div > div > shed > .row2.col1,
+.house.row2.col1:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.shed.row2.col1:checked ~ div > div > shed > .row2.col1:after, .shed.row2.col1:checked ~ div > div > shed > .row2.col1 *:after,
+.house.row2.col1:checked ~ div > div > house > .row2.col1:after,
+.house.row2.col1:checked ~ div > div > house > .row2.col1 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row2.col1:checked ~ div > div > shed > .row2.col1:before, .shed.row2.col1:checked ~ div > div > shed > .row2.col1 *:before,
+.house.row2.col1:checked ~ div > div > house > .row2.col1:before,
+.house.row2.col1:checked ~ div > div > house > .row2.col1 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row2.col1:checked ~ div > div > house > .row2.col1 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row2.col1:checked
+~ div
+> div
+> hbtn
+> .row2.col0 {
+  z-index: 100;
+}
+
+.house.row2.col1:checked
+~ div
+> div
+> hbtn
+> .row2.col2 {
+  z-index: 100;
+}
+
+.house.row2.col1:checked
+~ div
+> div
+> hbtn
+> .row3.col1 {
+  z-index: 100;
+}
+
+.house.row2.col1:checked
+~ div
+> div
+> hbtn
+> .row1.col1 {
+  z-index: 100;
+}
+
+.shed.row2.col2:checked ~ div > div > shed > .row2.col2,
+.house.row2.col2:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.shed.row2.col2:checked ~ div > div > shed > .row2.col2:after, .shed.row2.col2:checked ~ div > div > shed > .row2.col2 *:after,
+.house.row2.col2:checked ~ div > div > house > .row2.col2:after,
+.house.row2.col2:checked ~ div > div > house > .row2.col2 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row2.col2:checked ~ div > div > shed > .row2.col2:before, .shed.row2.col2:checked ~ div > div > shed > .row2.col2 *:before,
+.house.row2.col2:checked ~ div > div > house > .row2.col2:before,
+.house.row2.col2:checked ~ div > div > house > .row2.col2 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row2.col2:checked ~ div > div > house > .row2.col2 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row2.col2:checked
+~ div
+> div
+> hbtn
+> .row2.col1 {
+  z-index: 100;
+}
+
+.house.row2.col2:checked
+~ div
+> div
+> hbtn
+> .row2.col3 {
+  z-index: 100;
+}
+
+.house.row2.col2:checked
+~ div
+> div
+> hbtn
+> .row3.col2 {
+  z-index: 100;
+}
+
+.house.row2.col2:checked
+~ div
+> div
+> hbtn
+> .row1.col2 {
+  z-index: 100;
+}
+
+.shed.row2.col3:checked ~ div > div > shed > .row2.col3,
+.house.row2.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.shed.row2.col3:checked ~ div > div > shed > .row2.col3:after, .shed.row2.col3:checked ~ div > div > shed > .row2.col3 *:after,
+.house.row2.col3:checked ~ div > div > house > .row2.col3:after,
+.house.row2.col3:checked ~ div > div > house > .row2.col3 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row2.col3:checked ~ div > div > shed > .row2.col3:before, .shed.row2.col3:checked ~ div > div > shed > .row2.col3 *:before,
+.house.row2.col3:checked ~ div > div > house > .row2.col3:before,
+.house.row2.col3:checked ~ div > div > house > .row2.col3 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row2.col3:checked ~ div > div > house > .row2.col3 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row2.col3:checked
+~ div
+> div
+> hbtn
+> .row2.col2 {
+  z-index: 100;
+}
+
+.house.row2.col3:checked
+~ div
+> div
+> hbtn
+> .row2.col4 {
+  z-index: 100;
+}
+
+.house.row2.col3:checked
+~ div
+> div
+> hbtn
+> .row3.col3 {
+  z-index: 100;
+}
+
+.house.row2.col3:checked
+~ div
+> div
+> hbtn
+> .row1.col3 {
+  z-index: 100;
+}
+
+.shed.row2.col4:checked ~ div > div > shed > .row2.col4,
+.house.row2.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.shed.row2.col4:checked ~ div > div > shed > .row2.col4:after, .shed.row2.col4:checked ~ div > div > shed > .row2.col4 *:after,
+.house.row2.col4:checked ~ div > div > house > .row2.col4:after,
+.house.row2.col4:checked ~ div > div > house > .row2.col4 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row2.col4:checked ~ div > div > shed > .row2.col4:before, .shed.row2.col4:checked ~ div > div > shed > .row2.col4 *:before,
+.house.row2.col4:checked ~ div > div > house > .row2.col4:before,
+.house.row2.col4:checked ~ div > div > house > .row2.col4 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row2.col4:checked ~ div > div > house > .row2.col4 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row2.col4:checked
+~ div
+> div
+> hbtn
+> .row2.col3 {
+  z-index: 100;
+}
+
+.house.row2.col4:checked
+~ div
+> div
+> hbtn
+> .row2.col5 {
+  z-index: 100;
+}
+
+.house.row2.col4:checked
+~ div
+> div
+> hbtn
+> .row3.col4 {
+  z-index: 100;
+}
+
+.house.row2.col4:checked
+~ div
+> div
+> hbtn
+> .row1.col4 {
+  z-index: 100;
+}
+
+.shed.row3.col1:checked ~ div > div > shed > .row3.col1,
+.house.row3.col1:checked ~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+.shed.row3.col1:checked ~ div > div > shed > .row3.col1:after, .shed.row3.col1:checked ~ div > div > shed > .row3.col1 *:after,
+.house.row3.col1:checked ~ div > div > house > .row3.col1:after,
+.house.row3.col1:checked ~ div > div > house > .row3.col1 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row3.col1:checked ~ div > div > shed > .row3.col1:before, .shed.row3.col1:checked ~ div > div > shed > .row3.col1 *:before,
+.house.row3.col1:checked ~ div > div > house > .row3.col1:before,
+.house.row3.col1:checked ~ div > div > house > .row3.col1 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row3.col1:checked ~ div > div > house > .row3.col1 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row3.col1:checked
+~ div
+> div
+> hbtn
+> .row3.col0 {
+  z-index: 100;
+}
+
+.house.row3.col1:checked
+~ div
+> div
+> hbtn
+> .row3.col2 {
+  z-index: 100;
+}
+
+.house.row3.col1:checked
+~ div
+> div
+> hbtn
+> .row4.col1 {
+  z-index: 100;
+}
+
+.house.row3.col1:checked
+~ div
+> div
+> hbtn
+> .row2.col1 {
+  z-index: 100;
+}
+
+.shed.row3.col2:checked ~ div > div > shed > .row3.col2,
+.house.row3.col2:checked ~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+.shed.row3.col2:checked ~ div > div > shed > .row3.col2:after, .shed.row3.col2:checked ~ div > div > shed > .row3.col2 *:after,
+.house.row3.col2:checked ~ div > div > house > .row3.col2:after,
+.house.row3.col2:checked ~ div > div > house > .row3.col2 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row3.col2:checked ~ div > div > shed > .row3.col2:before, .shed.row3.col2:checked ~ div > div > shed > .row3.col2 *:before,
+.house.row3.col2:checked ~ div > div > house > .row3.col2:before,
+.house.row3.col2:checked ~ div > div > house > .row3.col2 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row3.col2:checked ~ div > div > house > .row3.col2 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row3.col2:checked
+~ div
+> div
+> hbtn
+> .row3.col1 {
+  z-index: 100;
+}
+
+.house.row3.col2:checked
+~ div
+> div
+> hbtn
+> .row3.col3 {
+  z-index: 100;
+}
+
+.house.row3.col2:checked
+~ div
+> div
+> hbtn
+> .row4.col2 {
+  z-index: 100;
+}
+
+.house.row3.col2:checked
+~ div
+> div
+> hbtn
+> .row2.col2 {
+  z-index: 100;
+}
+
+.shed.row3.col3:checked ~ div > div > shed > .row3.col3,
+.house.row3.col3:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+.shed.row3.col3:checked ~ div > div > shed > .row3.col3:after, .shed.row3.col3:checked ~ div > div > shed > .row3.col3 *:after,
+.house.row3.col3:checked ~ div > div > house > .row3.col3:after,
+.house.row3.col3:checked ~ div > div > house > .row3.col3 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row3.col3:checked ~ div > div > shed > .row3.col3:before, .shed.row3.col3:checked ~ div > div > shed > .row3.col3 *:before,
+.house.row3.col3:checked ~ div > div > house > .row3.col3:before,
+.house.row3.col3:checked ~ div > div > house > .row3.col3 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row3.col3:checked ~ div > div > house > .row3.col3 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row3.col3:checked
+~ div
+> div
+> hbtn
+> .row3.col2 {
+  z-index: 100;
+}
+
+.house.row3.col3:checked
+~ div
+> div
+> hbtn
+> .row3.col4 {
+  z-index: 100;
+}
+
+.house.row3.col3:checked
+~ div
+> div
+> hbtn
+> .row4.col3 {
+  z-index: 100;
+}
+
+.house.row3.col3:checked
+~ div
+> div
+> hbtn
+> .row2.col3 {
+  z-index: 100;
+}
+
+.shed.row3.col4:checked ~ div > div > shed > .row3.col4,
+.house.row3.col4:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.shed.row3.col4:checked ~ div > div > shed > .row3.col4:after, .shed.row3.col4:checked ~ div > div > shed > .row3.col4 *:after,
+.house.row3.col4:checked ~ div > div > house > .row3.col4:after,
+.house.row3.col4:checked ~ div > div > house > .row3.col4 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row3.col4:checked ~ div > div > shed > .row3.col4:before, .shed.row3.col4:checked ~ div > div > shed > .row3.col4 *:before,
+.house.row3.col4:checked ~ div > div > house > .row3.col4:before,
+.house.row3.col4:checked ~ div > div > house > .row3.col4 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row3.col4:checked ~ div > div > house > .row3.col4 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row3.col4:checked
+~ div
+> div
+> hbtn
+> .row3.col3 {
+  z-index: 100;
+}
+
+.house.row3.col4:checked
+~ div
+> div
+> hbtn
+> .row3.col5 {
+  z-index: 100;
+}
+
+.house.row3.col4:checked
+~ div
+> div
+> hbtn
+> .row4.col4 {
+  z-index: 100;
+}
+
+.house.row3.col4:checked
+~ div
+> div
+> hbtn
+> .row2.col4 {
+  z-index: 100;
+}
+
+.shed.row4.col1:checked ~ div > div > shed > .row4.col1,
+.house.row4.col1:checked ~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+.shed.row4.col1:checked ~ div > div > shed > .row4.col1:after, .shed.row4.col1:checked ~ div > div > shed > .row4.col1 *:after,
+.house.row4.col1:checked ~ div > div > house > .row4.col1:after,
+.house.row4.col1:checked ~ div > div > house > .row4.col1 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row4.col1:checked ~ div > div > shed > .row4.col1:before, .shed.row4.col1:checked ~ div > div > shed > .row4.col1 *:before,
+.house.row4.col1:checked ~ div > div > house > .row4.col1:before,
+.house.row4.col1:checked ~ div > div > house > .row4.col1 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row4.col1:checked ~ div > div > house > .row4.col1 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row4.col1:checked
+~ div
+> div
+> hbtn
+> .row4.col0 {
+  z-index: 100;
+}
+
+.house.row4.col1:checked
+~ div
+> div
+> hbtn
+> .row4.col2 {
+  z-index: 100;
+}
+
+.house.row4.col1:checked
+~ div
+> div
+> hbtn
+> .row5.col1 {
+  z-index: 100;
+}
+
+.house.row4.col1:checked
+~ div
+> div
+> hbtn
+> .row3.col1 {
+  z-index: 100;
+}
+
+.shed.row4.col2:checked ~ div > div > shed > .row4.col2,
+.house.row4.col2:checked ~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+.shed.row4.col2:checked ~ div > div > shed > .row4.col2:after, .shed.row4.col2:checked ~ div > div > shed > .row4.col2 *:after,
+.house.row4.col2:checked ~ div > div > house > .row4.col2:after,
+.house.row4.col2:checked ~ div > div > house > .row4.col2 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row4.col2:checked ~ div > div > shed > .row4.col2:before, .shed.row4.col2:checked ~ div > div > shed > .row4.col2 *:before,
+.house.row4.col2:checked ~ div > div > house > .row4.col2:before,
+.house.row4.col2:checked ~ div > div > house > .row4.col2 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row4.col2:checked ~ div > div > house > .row4.col2 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row4.col2:checked
+~ div
+> div
+> hbtn
+> .row4.col1 {
+  z-index: 100;
+}
+
+.house.row4.col2:checked
+~ div
+> div
+> hbtn
+> .row4.col3 {
+  z-index: 100;
+}
+
+.house.row4.col2:checked
+~ div
+> div
+> hbtn
+> .row5.col2 {
+  z-index: 100;
+}
+
+.house.row4.col2:checked
+~ div
+> div
+> hbtn
+> .row3.col2 {
+  z-index: 100;
+}
+
+.shed.row4.col3:checked ~ div > div > shed > .row4.col3,
+.house.row4.col3:checked ~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+.shed.row4.col3:checked ~ div > div > shed > .row4.col3:after, .shed.row4.col3:checked ~ div > div > shed > .row4.col3 *:after,
+.house.row4.col3:checked ~ div > div > house > .row4.col3:after,
+.house.row4.col3:checked ~ div > div > house > .row4.col3 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row4.col3:checked ~ div > div > shed > .row4.col3:before, .shed.row4.col3:checked ~ div > div > shed > .row4.col3 *:before,
+.house.row4.col3:checked ~ div > div > house > .row4.col3:before,
+.house.row4.col3:checked ~ div > div > house > .row4.col3 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row4.col3:checked ~ div > div > house > .row4.col3 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row4.col3:checked
+~ div
+> div
+> hbtn
+> .row4.col2 {
+  z-index: 100;
+}
+
+.house.row4.col3:checked
+~ div
+> div
+> hbtn
+> .row4.col4 {
+  z-index: 100;
+}
+
+.house.row4.col3:checked
+~ div
+> div
+> hbtn
+> .row5.col3 {
+  z-index: 100;
+}
+
+.house.row4.col3:checked
+~ div
+> div
+> hbtn
+> .row3.col3 {
+  z-index: 100;
+}
+
+.shed.row4.col4:checked ~ div > div > shed > .row4.col4,
+.house.row4.col4:checked ~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+.shed.row4.col4:checked ~ div > div > shed > .row4.col4:after, .shed.row4.col4:checked ~ div > div > shed > .row4.col4 *:after,
+.house.row4.col4:checked ~ div > div > house > .row4.col4:after,
+.house.row4.col4:checked ~ div > div > house > .row4.col4 *:after {
+  animation: pop 0.1s linear forwards;
+}
+.shed.row4.col4:checked ~ div > div > shed > .row4.col4:before, .shed.row4.col4:checked ~ div > div > shed > .row4.col4 *:before,
+.house.row4.col4:checked ~ div > div > house > .row4.col4:before,
+.house.row4.col4:checked ~ div > div > house > .row4.col4 *:before {
+  animation: popup 0.1s linear forwards;
+}
+
+.shed.row4.col4:checked ~ div > div > house > .row4.col4 > i:nth-of-type(5) {
+  display: none !important;
+}
+
+.house.row4.col4:checked
+~ div
+> div
+> hbtn
+> .row4.col3 {
+  z-index: 100;
+}
+
+.house.row4.col4:checked
+~ div
+> div
+> hbtn
+> .row4.col5 {
+  z-index: 100;
+}
+
+.house.row4.col4:checked
+~ div
+> div
+> hbtn
+> .row5.col4 {
+  z-index: 100;
+}
+
+.house.row4.col4:checked
+~ div
+> div
+> hbtn
+> .row3.col4 {
+  z-index: 100;
+}
+
+.hs.row1.col1:checked ~ div > div > shed > .row1.col1 {
+  z-index: 300;
+}
+
+.hs.row1.col1:checked ~ div > div > house > .row1.col1 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row1.col1:checked
+~ div
+> div
+> house
+> .row1.col1 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row1.col2:checked ~ div > div > shed > .row1.col2 {
+  z-index: 300;
+}
+
+.hs.row1.col2:checked ~ div > div > house > .row1.col2 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row1.col2:checked
+~ div
+> div
+> house
+> .row1.col2 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row1.col3:checked ~ div > div > shed > .row1.col3 {
+  z-index: 300;
+}
+
+.hs.row1.col3:checked ~ div > div > house > .row1.col3 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row1.col3:checked
+~ div
+> div
+> house
+> .row1.col3 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row1.col4:checked ~ div > div > shed > .row1.col4 {
+  z-index: 300;
+}
+
+.hs.row1.col4:checked ~ div > div > house > .row1.col4 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row1.col4:checked
+~ div
+> div
+> house
+> .row1.col4 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row2.col1:checked ~ div > div > shed > .row2.col1 {
+  z-index: 300;
+}
+
+.hs.row2.col1:checked ~ div > div > house > .row2.col1 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row2.col1:checked
+~ div
+> div
+> house
+> .row2.col1 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row2.col2:checked ~ div > div > shed > .row2.col2 {
+  z-index: 300;
+}
+
+.hs.row2.col2:checked ~ div > div > house > .row2.col2 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row2.col2:checked
+~ div
+> div
+> house
+> .row2.col2 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row2.col3:checked ~ div > div > shed > .row2.col3 {
+  z-index: 300;
+}
+
+.hs.row2.col3:checked ~ div > div > house > .row2.col3 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row2.col3:checked
+~ div
+> div
+> house
+> .row2.col3 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row2.col4:checked ~ div > div > shed > .row2.col4 {
+  z-index: 300;
+}
+
+.hs.row2.col4:checked ~ div > div > house > .row2.col4 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row2.col4:checked
+~ div
+> div
+> house
+> .row2.col4 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row3.col1:checked ~ div > div > shed > .row3.col1 {
+  z-index: 300;
+}
+
+.hs.row3.col1:checked ~ div > div > house > .row3.col1 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row3.col1:checked
+~ div
+> div
+> house
+> .row3.col1 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row3.col2:checked ~ div > div > shed > .row3.col2 {
+  z-index: 300;
+}
+
+.hs.row3.col2:checked ~ div > div > house > .row3.col2 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row3.col2:checked
+~ div
+> div
+> house
+> .row3.col2 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row3.col3:checked ~ div > div > shed > .row3.col3 {
+  z-index: 300;
+}
+
+.hs.row3.col3:checked ~ div > div > house > .row3.col3 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row3.col3:checked
+~ div
+> div
+> house
+> .row3.col3 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row3.col4:checked ~ div > div > shed > .row3.col4 {
+  z-index: 300;
+}
+
+.hs.row3.col4:checked ~ div > div > house > .row3.col4 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row3.col4:checked
+~ div
+> div
+> house
+> .row3.col4 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row4.col1:checked ~ div > div > shed > .row4.col1 {
+  z-index: 300;
+}
+
+.hs.row4.col1:checked ~ div > div > house > .row4.col1 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row4.col1:checked
+~ div
+> div
+> house
+> .row4.col1 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row4.col2:checked ~ div > div > shed > .row4.col2 {
+  z-index: 300;
+}
+
+.hs.row4.col2:checked ~ div > div > house > .row4.col2 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row4.col2:checked
+~ div
+> div
+> house
+> .row4.col2 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row4.col3:checked ~ div > div > shed > .row4.col3 {
+  z-index: 300;
+}
+
+.hs.row4.col3:checked ~ div > div > house > .row4.col3 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row4.col3:checked
+~ div
+> div
+> house
+> .row4.col3 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.hs.row4.col4:checked ~ div > div > shed > .row4.col4 {
+  z-index: 300;
+}
+
+.hs.row4.col4:checked ~ div > div > house > .row4.col4 {
+  background: #bc2f2f;
+  z-index: 300;
+  color: #bc2f2f;
+}
+
+.hs.shed.row4.col4:checked
+~ div
+> div
+> house
+> .row4.col4 {
+  background: #bc592f;
+  color: #bc592f;
+}
+
+.house.row0.col1:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row0.col1:checked ~ .house.row-1.col1:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row2.col0,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row1.col0,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row1.col-1,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row2.col0,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row1.col-2,
+.hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row2.col-1,
+.hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+
+.hs.row1.col-2:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row2.col-2,
+.hs.row1.col-2:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-1:checked ~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+
+.hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked ~ div > div > shed > .row-1.col-2,
+.hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked ~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+
+.hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > shed > .row-1.col0,
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > shed > .row-1.col-2 {
+  opacity: 0;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col1,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > shed > .row-1.col-2,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col0:checked
+~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked ~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col-2,
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col-1,
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col0,
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col1,
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked ~ div > div > shed > .row0.col-1,
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked ~ div > div > shed > .row-1.col-2 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row-1.col0,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row-1.col-1:checked ~ div > div > shed > .row-1.col-1,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row-1.col-1:checked ~ div > div > shed > .row-1.col-2 {
+  opacity: 0;
+}
+
+.house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-2.col-1:checked ~ div > div > shed > .row-2.col-1,
+.house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-2.col-1:checked ~ div > div > shed > .row-2.col-2 {
+  opacity: 0;
+}
+
+.house.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-2.col3:checked ~ div > div > shed > .row-2.col4,
+.house.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-2.col3:checked ~ div > div > shed > .row-2.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row1.col-2,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row-1.col-2,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+
+.house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-2.col1:checked
+~ .hs.row-1.col1:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row0.col-2,
+.house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-2.col1:checked
+~ .hs.row-1.col1:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row-1.col-2,
+.house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-2.col1:checked
+~ .hs.row-1.col1:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row-2.col-2 {
+  opacity: 0;
+}
+
+.hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row1.col-2,
+.hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+
+.hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.house.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.hs.row1.col-1:checked ~ .house.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row1.col-1,
+.hs.row1.col-1:checked ~ .house.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.hs.row1.col-2:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row1.col-2,
+.hs.row1.col-2:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row1.col-2:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col-1,
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row1.col-2:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col2,
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col2,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row0.col3,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col4,
+.house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col3,
+.house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col4,
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col3,
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col3,
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col4,
+.hs.row2.col3:checked ~ .house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row2.col4,
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col4,
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col4,
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col4,
+.house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col4:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col4,
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col4,
+.house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col4,
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ .house.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row2.col-1,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row3.col-1,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row1.col-2,
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row0.col1:checked ~ div > div > shed > .row2.col2,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row0.col1:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row0.col1:checked ~ div > div > shed > .row0.col3,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row0.col1:checked ~ div > div > shed > .row2.col3,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row0.col1:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col1:checked ~ div > div > shed > .row2.col4,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col1:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .house.row-1.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .house.row-1.col1:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked ~ .house.row-1.col1:checked ~ div > div > shed > .row0.col3,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked ~ .house.row-1.col1:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked ~ .house.row-1.col1:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked ~ .hs.row0.col4:checked ~ .house.row-1.col1:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked ~ .house.row-1.col1:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked ~ .hs.row0.col4:checked ~ .house.row-1.col1:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked ~ .house.row-1.col1:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked ~ .house.row-1.col1:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .house.row-1.col1:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .house.row-1.col0:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .house.row-1.col0:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .house.row-1.col0:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col0:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col0:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col1:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col1:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.house.row1.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3,
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row2.col2,
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4,
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col3,
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4,
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row2.col3,
+.hs.row2.col2:checked ~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row3.col1,
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col2:checked ~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked ~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col4,
+.hs.row2.col3:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col2,
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col4:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col4:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row-1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row1.col-3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row-1.col0:checked
+~ div > div > shed > .row0.col-1,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row-1.col0:checked
+~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row-1.col2,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row0.col0,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col1,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row-1.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row-1.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col-1,
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row0.col3,
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col-1,
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col-1,
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row0.col2,
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked ~ div > div > shed > .row-1.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked ~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked ~ .hs.row-1.col-1:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked ~ .hs.row-1.col-1:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col-2,
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked ~ div > div > shed > .row-1.col-1,
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > shed > .row-1.col-2,
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div
+> div
+> shed
+> .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row2.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row2.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked
+~ div
+> div
+> shed
+> .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row0.col-1,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > shed > .row-1.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row0.col-2,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row-1.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col0:checked
+~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row-1.col-2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.house.row0.col1:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row0.col1:checked ~ .house.row-1.col1:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row2.col0,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row1.col0,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row1.col-1,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row2.col0,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row1.col-2,
+.hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row2.col-1,
+.hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+
+.hs.row1.col-2:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row2.col-2,
+.hs.row1.col-2:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-1:checked ~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+
+.hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked ~ div > div > house > .row-1.col-2,
+.hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked ~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+
+.hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > house > .row-1.col0,
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > house > .row-1.col-2 {
+  opacity: 1;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col1,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > house > .row-1.col-2,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col0:checked
+~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked ~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col-2,
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col-1,
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col0,
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col1,
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked ~ div > div > house > .row0.col-1,
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked ~ div > div > house > .row-1.col-2 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ div > div > house > .row-1.col0,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row-1.col-1:checked ~ div > div > house > .row-1.col-1,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row-1.col-1:checked ~ div > div > house > .row-1.col-2 {
+  opacity: 1;
+}
+
+.house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-2.col-1:checked ~ div > div > house > .row-2.col-1,
+.house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-2.col-1:checked ~ div > div > house > .row-2.col-2 {
+  opacity: 1;
+}
+
+.house.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-2.col3:checked ~ div > div > house > .row-2.col4,
+.house.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-2.col3:checked ~ div > div > house > .row-2.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row1.col-2,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row-1.col-2,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+
+.house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-2.col1:checked
+~ .hs.row-1.col1:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row0.col-2,
+.house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-2.col1:checked
+~ .hs.row-1.col1:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row-1.col-2,
+.house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-2.col1:checked
+~ .hs.row-1.col1:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row-2.col-2 {
+  opacity: 1;
+}
+
+.hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row1.col-2,
+.hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+
+.hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.house.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.hs.row1.col-1:checked ~ .house.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col-1,
+.hs.row1.col-1:checked ~ .house.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.hs.row1.col-2:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col-2,
+.hs.row1.col-2:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row1.col-2:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col-1,
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row1.col-2:checked ~ .house.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col2,
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .house.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col2,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row0.col3,
+.hs.row1.col0:checked ~ .house.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col4,
+.house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col3,
+.house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col4,
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col3,
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col3,
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col4,
+.hs.row2.col3:checked ~ .house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row2.col4,
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col4,
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col4,
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col4,
+.house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col4:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col4,
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col4,
+.house.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col4,
+.house.row1.col1:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ .house.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row2.col-1,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row3.col-1,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row1.col-2,
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked ~ .house.row1.col1:checked ~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row0.col1:checked ~ div > div > house > .row2.col2,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row0.col1:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row0.col1:checked ~ div > div > house > .row0.col3,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row0.col1:checked ~ div > div > house > .row2.col3,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row0.col1:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col1:checked ~ div > div > house > .row2.col4,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col1:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .house.row-1.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .house.row-1.col1:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked ~ .house.row-1.col1:checked ~ div > div > house > .row0.col3,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked ~ .house.row-1.col1:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked ~ .house.row-1.col1:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked ~ .hs.row0.col4:checked ~ .house.row-1.col1:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked ~ .house.row-1.col1:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked ~ .hs.row0.col4:checked ~ .house.row-1.col1:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked ~ .house.row-1.col1:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked ~ .house.row-1.col1:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .house.row-1.col1:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .house.row-1.col0:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .house.row-1.col0:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .house.row-1.col0:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col0:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col0:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col1:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col1:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.house.row1.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3,
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row2.col2,
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4,
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row2.col3,
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col4,
+.house.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row2.col3,
+.hs.row2.col2:checked ~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row3.col1,
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col2:checked ~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked ~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col4,
+.hs.row2.col3:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col2,
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col4:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col4:checked ~ .house.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row-1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row1.col-3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row-1.col0:checked
+~ div > div > house > .row0.col-1,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row-1.col0:checked
+~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row-1.col2,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row0.col0,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col1,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row-1.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row-1.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col-1,
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row0.col3,
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col-1,
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col-1,
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row0.col2,
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked ~ div > div > house > .row-1.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked ~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked ~ .hs.row-1.col-1:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked ~ .hs.row-1.col-2:checked ~ .hs.row-1.col-1:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col-2,
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked ~ div > div > house > .row-1.col-1,
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked ~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > house > .row-1.col-2,
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div
+> div
+> house
+> .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row2.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row2.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked
+~ div
+> div
+> house
+> .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row0.col-1,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > house > .row-1.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row0.col-2,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row-1.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col3,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col0:checked
+~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row-1.col-2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.house.row1.col1:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row3.col0,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row2.col0,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row2.col-1,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row3.col0,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row2.col-2,
+.hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row3.col-1,
+.hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col-2:checked ~ .hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row3.col-2,
+.hs.row2.col-2:checked ~ .hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-1:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked ~ div > div > shed > .row0.col-2,
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col0,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col1,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row0.col-2,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col-2 {
+  opacity: 0;
+}
+
+.hs.row4.col-2:checked ~ .hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col-1 {
+  opacity: 0;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col-2,
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col-1,
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col0,
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col1,
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col-1 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col-2 {
+  opacity: 0;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > shed > .row4.col-2 {
+  opacity: 0;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked ~ div > div > shed > .row1.col-1,
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked ~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row0.col0,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col-1,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row-1.col-1:checked ~ div > div > shed > .row-1.col-1,
+.house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row-1.col-1:checked ~ div > div > shed > .row-1.col-2 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row2.col-2,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row0.col-2,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row-1.col1:checked
+~ .hs.row0.col1:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col-2,
+.house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row-1.col1:checked
+~ .hs.row0.col1:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row0.col-2,
+.house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row-1.col1:checked
+~ .hs.row0.col1:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row-1.col-2 {
+  opacity: 0;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row2.col-2,
+.hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked ~ .house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row2.col-1,
+.hs.row2.col-1:checked ~ .house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col-2:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row2.col-2,
+.hs.row2.col-2:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row2.col-2:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col-1,
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row2.col-2:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col2,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col2,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col3,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col4,
+.house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col3,
+.house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col4,
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col3,
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col3,
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col4,
+.hs.row3.col3:checked ~ .house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row3.col4,
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col4,
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row2.col4,
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col4,
+.house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col4,
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col4,
+.house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col4,
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked ~ .house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row3.col-1,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row4.col-1,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row2.col-2,
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > shed > .row4.col-2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row1.col1:checked ~ div > div > shed > .row3.col2,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row1.col1:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked ~ div > div > shed > .row1.col3,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked ~ div > div > shed > .row3.col3,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col1:checked ~ div > div > shed > .row3.col4,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col1:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > shed > .row1.col3,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked ~ .hs.row1.col4:checked ~ .house.row0.col1:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked ~ .house.row0.col1:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked ~ .hs.row1.col4:checked ~ .house.row0.col1:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked ~ .house.row0.col1:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked ~ .house.row0.col1:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col1:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row0.col0:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row0.col0:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row0.col0:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col0:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col0:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col3,
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row3.col2,
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col4,
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row3.col3,
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col4,
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row3.col3,
+.hs.row3.col2:checked ~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row4.col1,
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col2:checked ~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row3.col2:checked ~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row3.col4,
+.hs.row3.col3:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col2,
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row3.col4:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row3.col4:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.house.row3.col1:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col-1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col-1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row0.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col-3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row1.col-1,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row0.col2,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col0,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col1,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col4,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row2.col-1,
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col3,
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col-1,
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col-1,
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row1.col2,
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked ~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked ~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked ~ .hs.row0.col-1:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row2.col-2,
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked ~ div > div > shed > .row0.col-1,
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col-2,
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div
+> div
+> shed
+> .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row3.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row3.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked
+~ div
+> div
+> shed
+> .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col-1,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col0:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col-2,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.house.row1.col1:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row3.col0,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row2.col0,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row2.col-1,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row3.col0,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row2.col-2,
+.hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row3.col-1,
+.hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col-2:checked ~ .hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row3.col-2,
+.hs.row2.col-2:checked ~ .hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-1:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked ~ div > div > house > .row0.col-2,
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > house > .row0.col0,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col1,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row0.col-2,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col-2 {
+  opacity: 1;
+}
+
+.hs.row4.col-2:checked ~ .hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col-1 {
+  opacity: 1;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col-2,
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col-1,
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col0,
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col1,
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col-1 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col-2 {
+  opacity: 1;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ div > div > house > .row4.col-2 {
+  opacity: 1;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked ~ div > div > house > .row1.col-1,
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked ~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ div > div > house > .row0.col0,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row0.col-1:checked ~ div > div > house > .row0.col-1,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row0.col-1:checked ~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row-1.col-1:checked ~ div > div > house > .row-1.col-1,
+.house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row-1.col-1:checked ~ div > div > house > .row-1.col-2 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4,
+.house.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row2.col-2,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row0.col-2,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row-1.col1:checked
+~ .hs.row0.col1:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col-2,
+.house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row-1.col1:checked
+~ .hs.row0.col1:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row0.col-2,
+.house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row-1.col1:checked
+~ .hs.row0.col1:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row-1.col-2 {
+  opacity: 1;
+}
+
+.hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row2.col-2,
+.hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked ~ .house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col-1,
+.hs.row2.col-1:checked ~ .house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col-2:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col-2,
+.hs.row2.col-2:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row2.col-2:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col-1,
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row2.col-2:checked ~ .house.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col2,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .house.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col2,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col3,
+.hs.row2.col0:checked ~ .house.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col4,
+.house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col3,
+.house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col4,
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col3,
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col3,
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col4,
+.hs.row3.col3:checked ~ .house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row3.col4,
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col4,
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row2.col4,
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col4,
+.house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col4:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col4,
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col4,
+.house.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col4,
+.house.row2.col1:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked ~ .house.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row3.col-1,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row4.col-1,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row2.col-2,
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col0:checked ~ .house.row2.col1:checked ~ div > div > house > .row4.col-2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row1.col1:checked ~ div > div > house > .row3.col2,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row1.col1:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked ~ div > div > house > .row1.col3,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked ~ div > div > house > .row3.col3,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col1:checked ~ div > div > house > .row3.col4,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col1:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > house > .row1.col3,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked ~ .house.row0.col1:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked ~ .hs.row1.col4:checked ~ .house.row0.col1:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked ~ .house.row0.col1:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked ~ .hs.row1.col4:checked ~ .house.row0.col1:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked ~ .house.row0.col1:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked ~ .house.row0.col1:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col1:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row0.col0:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row0.col0:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row0.col0:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col0:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col0:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col3,
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row3.col2,
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col4,
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row3.col3,
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row3.col4,
+.house.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row3.col3,
+.hs.row3.col2:checked ~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row4.col1,
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col2:checked ~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row3.col2:checked ~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row3.col4,
+.hs.row3.col3:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col2,
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row3.col4:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row3.col4:checked ~ .house.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.house.row3.col1:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col-1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col-1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row0.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col-3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row1.col-1,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row0.col2,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col0,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col1,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col4,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col-1,
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col3,
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col-1,
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col-1,
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > house > .row1.col2,
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked ~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked ~ .hs.row0.col-1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked ~ .hs.row0.col-2:checked ~ .hs.row0.col-1:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row2.col-2,
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked ~ div > div > house > .row0.col-1,
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked ~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > house > .row0.col-2,
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div
+> div
+> house
+> .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row3.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row3.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked
+~ div
+> div
+> house
+> .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col-1,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col0:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col-2,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col3,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.house.row2.col1:checked ~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row4.col0,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row3.col0,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row3.col-1,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row4.col0,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row3.col-2,
+.hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row4.col-1,
+.hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked ~ .hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row4.col-2,
+.hs.row3.col-2:checked ~ .hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-1:checked ~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked ~ div > div > shed > .row1.col-2,
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked ~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col0,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col1,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row1.col-2,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row5.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col-1 {
+  opacity: 0;
+}
+
+.hs.row4.col-2:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col-2 {
+  opacity: 0;
+}
+
+.hs.row5.col-2:checked ~ .hs.row4.col-2:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col-1 {
+  opacity: 0;
+}
+
+.hs.row5.col-2:checked
+~ .hs.row5.col-1:checked
+~ .hs.row4.col-2:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col0 {
+  opacity: 0;
+}
+
+.hs.row5.col-2:checked
+~ .hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col-2:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.hs.row5.col-1:checked ~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col-2,
+.hs.row5.col-1:checked ~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col-1,
+.hs.row5.col-1:checked ~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col0 {
+  opacity: 0;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col0,
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col1,
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col-1 {
+  opacity: 0;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col-2 {
+  opacity: 0;
+}
+
+.hs.row5.col-2:checked
+~ .hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row4.col-2 {
+  opacity: 0;
+}
+
+.hs.row5.col-2:checked
+~ .hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col-2:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+
+.hs.row5.col-1:checked ~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > shed > .row5.col-2 {
+  opacity: 0;
+}
+
+.hs.row5.col-2:checked
+~ .hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col-2:checked
+~ .hs.row4.col0:checked
+~ .house.row4.col1:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked ~ div > div > shed > .row2.col-1,
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked ~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ div > div > shed > .row1.col0,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col-1,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+
+.house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col-1,
+.house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col3:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ div > div > shed > .row3.col-2,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ div > div > shed > .row1.col-2,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+
+.house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row0.col1:checked
+~ .hs.row1.col1:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row2.col-2,
+.house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row0.col1:checked
+~ .hs.row1.col1:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row1.col-2,
+.house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row0.col1:checked
+~ .hs.row1.col1:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row0.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ div > div > shed > .row3.col-2,
+.hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ div > div > shed > .row4.col-2 {
+  opacity: 0;
+}
+
+.hs.row4.col-2:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ div > div > shed > .row4.col-1 {
+  opacity: 0;
+}
+
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked ~ .house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row3.col-1,
+.hs.row3.col-1:checked ~ .house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row4.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-2:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row3.col-2,
+.hs.row3.col-2:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row4.col-2 {
+  opacity: 0;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row3.col-2:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row4.col-1,
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row3.col-2:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col2,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col2,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col3,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row3.col4,
+.house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row3.col3,
+.house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row3.col4,
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row3.col3,
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col3,
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked ~ .house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col4,
+.hs.row4.col3:checked ~ .house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row4.col4,
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row2.col4,
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row3.col4,
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row3.col4,
+.house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col4:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4,
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col4,
+.house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4,
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked ~ .house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row4.col-1,
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row5.col-1,
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row4.col-2 {
+  opacity: 0;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row3.col-2,
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > shed > .row5.col-2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .house.row2.col1:checked ~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row2.col1:checked ~ div > div > shed > .row4.col2,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row2.col1:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row2.col1:checked ~ div > div > shed > .row2.col3,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row2.col1:checked ~ div > div > shed > .row4.col3,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row2.col1:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col1:checked ~ div > div > shed > .row4.col4,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col1:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > shed > .row2.col3,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked ~ .hs.row2.col4:checked ~ .house.row1.col1:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked ~ .hs.row2.col4:checked ~ .house.row1.col1:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col1:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row1.col0:checked ~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row1.col0:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row1.col0:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col0:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col0:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row5.col4 {
+  opacity: 0;
+}
+
+.house.row3.col1:checked ~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col3,
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row4.col2,
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col4,
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row4.col3,
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row4.col4,
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked ~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row4.col3,
+.hs.row4.col2:checked ~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row5.col2 {
+  opacity: 0;
+}
+
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row5.col1,
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row5.col3 {
+  opacity: 0;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col2:checked ~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row5.col4 {
+  opacity: 0;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row4.col2:checked ~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > shed > .row4.col4,
+.hs.row4.col3:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > shed > .row5.col3 {
+  opacity: 0;
+}
+
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > shed > .row5.col2,
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > shed > .row5.col4 {
+  opacity: 0;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col3:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row5.col4 {
+  opacity: 0;
+}
+
+.hs.row5.col4:checked ~ .hs.row4.col4:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row5.col3 {
+  opacity: 0;
+}
+
+.hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row4.col4:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row5.col2 {
+  opacity: 0;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row4.col4:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.house.row4.col1:checked ~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col-1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col-1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row1.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col-3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row2.col-1,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row1.col2,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col0,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col4,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ div > div > shed > .row3.col-1,
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col3,
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ div > div > shed > .row2.col-1,
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col-1,
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row2.col2,
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-2:checked ~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked ~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked ~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ div > div > shed > .row3.col-2,
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked ~ div > div > shed > .row1.col-1,
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked ~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col-2,
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div
+> div
+> shed
+> .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col4,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row4.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row4.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked
+~ div
+> div
+> shed
+> .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row2.col-1,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col0:checked ~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row2.col-2,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row2.col4:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.house.row2.col1:checked ~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row4.col0,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row3.col0,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row3.col-1,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row4.col0,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row3.col-2,
+.hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row4.col-1,
+.hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked ~ .hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row4.col-2,
+.hs.row3.col-2:checked ~ .hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-1:checked ~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked ~ div > div > house > .row1.col-2,
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked ~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > house > .row1.col0,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col1,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row1.col-2,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row5.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col-1 {
+  opacity: 1;
+}
+
+.hs.row4.col-2:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col-2 {
+  opacity: 1;
+}
+
+.hs.row5.col-2:checked ~ .hs.row4.col-2:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col-1 {
+  opacity: 1;
+}
+
+.hs.row5.col-2:checked
+~ .hs.row5.col-1:checked
+~ .hs.row4.col-2:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col0 {
+  opacity: 1;
+}
+
+.hs.row5.col-2:checked
+~ .hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col-2:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.hs.row5.col-1:checked ~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col-2,
+.hs.row5.col-1:checked ~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col-1,
+.hs.row5.col-1:checked ~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col0 {
+  opacity: 1;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col0,
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col1,
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col-1 {
+  opacity: 1;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col-2 {
+  opacity: 1;
+}
+
+.hs.row5.col-2:checked
+~ .hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row4.col-2 {
+  opacity: 1;
+}
+
+.hs.row5.col-2:checked
+~ .hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col-2:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+
+.hs.row5.col-1:checked ~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ div > div > house > .row5.col-2 {
+  opacity: 1;
+}
+
+.hs.row5.col-2:checked
+~ .hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col-2:checked
+~ .hs.row4.col0:checked
+~ .house.row4.col1:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked ~ div > div > house > .row2.col-1,
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked ~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ div > div > house > .row1.col0,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-1:checked ~ div > div > house > .row1.col-1,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-1:checked ~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+
+.house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row0.col-1:checked ~ div > div > house > .row0.col-1,
+.house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row0.col-1:checked ~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col3:checked ~ div > div > house > .row0.col4,
+.house.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col3:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ div > div > house > .row3.col-2,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ div > div > house > .row1.col-2,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+
+.house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row0.col1:checked
+~ .hs.row1.col1:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row2.col-2,
+.house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row0.col1:checked
+~ .hs.row1.col1:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row1.col-2,
+.house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row0.col1:checked
+~ .hs.row1.col1:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row0.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ div > div > house > .row3.col-2,
+.hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ div > div > house > .row4.col-2 {
+  opacity: 1;
+}
+
+.hs.row4.col-2:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ div > div > house > .row4.col-1 {
+  opacity: 1;
+}
+
+.house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked ~ .house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row3.col-1,
+.hs.row3.col-1:checked ~ .house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row4.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-2:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row3.col-2,
+.hs.row3.col-2:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row4.col-2 {
+  opacity: 1;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row3.col-2:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row4.col-1,
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row3.col-2:checked ~ .house.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col2,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .house.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col2,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col3,
+.hs.row3.col0:checked ~ .house.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row3.col4,
+.house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row3.col3,
+.house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col4,
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col3,
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col3,
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked ~ .house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col4,
+.hs.row4.col3:checked ~ .house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row4.col4,
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row2.col4,
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row3.col4,
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col4,
+.house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col4:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4,
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col4,
+.house.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4,
+.house.row3.col1:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked ~ .house.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row4.col-1,
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row5.col-1,
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row4.col-2 {
+  opacity: 1;
+}
+
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row3.col-2,
+.hs.row4.col-2:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col0:checked ~ .house.row3.col1:checked ~ div > div > house > .row5.col-2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .house.row2.col1:checked ~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row2.col1:checked ~ div > div > house > .row4.col2,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row2.col1:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row2.col1:checked ~ div > div > house > .row2.col3,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row2.col1:checked ~ div > div > house > .row4.col3,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row2.col1:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col1:checked ~ div > div > house > .row4.col4,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col1:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > house > .row2.col3,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked ~ .house.row1.col1:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked ~ .hs.row2.col4:checked ~ .house.row1.col1:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked ~ .hs.row2.col4:checked ~ .house.row1.col1:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked ~ .house.row1.col1:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col1:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row1.col0:checked ~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row1.col0:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row1.col0:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col0:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col0:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row5.col4 {
+  opacity: 1;
+}
+
+.house.row3.col1:checked ~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col3,
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row4.col2,
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col4,
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row4.col3,
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row4.col4,
+.house.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked ~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row4.col3,
+.hs.row4.col2:checked ~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row5.col2 {
+  opacity: 1;
+}
+
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row5.col1,
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row5.col3 {
+  opacity: 1;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col2:checked ~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row5.col4 {
+  opacity: 1;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row4.col2:checked ~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > house > .row4.col4,
+.hs.row4.col3:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > house > .row5.col3 {
+  opacity: 1;
+}
+
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > house > .row5.col2,
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > house > .row5.col4 {
+  opacity: 1;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col3:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row5.col4 {
+  opacity: 1;
+}
+
+.hs.row5.col4:checked ~ .hs.row4.col4:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row5.col3 {
+  opacity: 1;
+}
+
+.hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row4.col4:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row5.col2 {
+  opacity: 1;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row4.col4:checked ~ .house.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.house.row4.col1:checked ~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col-1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col-1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row1.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col-3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row2.col-1,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row1.col2,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col0,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col1,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col4,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ div > div > house > .row3.col-1,
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col3,
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ div > div > house > .row2.col-1,
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col-1,
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row2.col2,
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-2:checked ~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked ~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked ~ .hs.row1.col-1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col-2:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-2:checked ~ .hs.row1.col-2:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ div > div > house > .row3.col-2,
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked ~ div > div > house > .row1.col-1,
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked ~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > house > .row1.col-2,
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div
+> div
+> house
+> .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col4,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row4.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row4.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked
+~ div
+> div
+> house
+> .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row2.col-1,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col0:checked ~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row2.col-2,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col-2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col3,
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row2.col4:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.house.row0.col2:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row0.col2:checked ~ .house.row-1.col2:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row2.col1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row1.col1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row1.col0,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row2.col1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row1.col-1,
+.hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row2.col0,
+.hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row2.col-1,
+.hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col0:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > shed > .row-1.col-1,
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col1,
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col2,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row-1.col-1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col-1,
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col0,
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col1,
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col2,
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col0,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked ~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row-1.col1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col0,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+
+.house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-2.col0:checked ~ div > div > shed > .row-2.col0,
+.house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-2.col0:checked ~ div > div > shed > .row-2.col-1 {
+  opacity: 0;
+}
+
+.house.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-2.col4:checked ~ div > div > shed > .row-2.col5,
+.house.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-2.col4:checked ~ div > div > shed > .row-2.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row1.col-1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row-1.col-1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+
+.house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-2.col2:checked
+~ .hs.row-1.col2:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col-1,
+.house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-2.col2:checked
+~ .hs.row-1.col2:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row-1.col-1,
+.house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-2.col2:checked
+~ .hs.row-1.col2:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row-2.col-1 {
+  opacity: 0;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row1.col-1,
+.hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.house.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col0,
+.hs.row1.col0:checked ~ .house.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col-1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col-1,
+.hs.row1.col-1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col0,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col3,
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col3,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row0.col4,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col5,
+.house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col4,
+.house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row1.col5,
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row1.col4,
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col4,
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col5,
+.hs.row2.col4:checked ~ .house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col5,
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col5,
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col5,
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row1.col5,
+.house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col5:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col5:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col5,
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col5,
+.house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col5,
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .house.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row2.col0,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row3.col0,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row1.col-1,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row0.col2:checked ~ div > div > shed > .row2.col3,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row0.col2:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col2:checked ~ div > div > shed > .row0.col4,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col2:checked ~ div > div > shed > .row2.col4,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col2:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col2:checked ~ div > div > shed > .row2.col5,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col2:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .house.row-1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .house.row-1.col2:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked ~ .house.row-1.col2:checked ~ div > div > shed > .row0.col4,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked ~ .house.row-1.col2:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked ~ .house.row-1.col2:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked ~ .hs.row0.col5:checked ~ .house.row-1.col2:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked ~ .house.row-1.col2:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked ~ .hs.row0.col5:checked ~ .house.row-1.col2:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked ~ .house.row-1.col2:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked ~ .house.row-1.col2:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .house.row-1.col2:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .house.row-1.col1:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .house.row-1.col1:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .house.row-1.col1:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col1:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col1:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col2:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col2:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.house.row1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4,
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col3,
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5,
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4,
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col5,
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col4,
+.hs.row2.col3:checked ~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row3.col2,
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col3:checked ~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked ~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col5,
+.hs.row2.col4:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col3,
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col4:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col5:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col5:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col5:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col0:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col0:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row-1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row1.col-2 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row0.col0,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row-1.col3,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row0.col1,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col2,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row-1.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col5,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row-1.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col5,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col0,
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row0.col4,
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col0,
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col0,
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row0.col3,
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked ~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col-1,
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked ~ div > div > shed > .row-1.col0,
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col-1,
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div
+> div
+> shed
+> .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row2.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row2.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked
+~ div
+> div
+> shed
+> .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col0,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col-1,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.house.row0.col2:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row0.col2:checked ~ .house.row-1.col2:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row2.col1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row1.col1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row1.col0,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row2.col1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row1.col-1,
+.hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row2.col0,
+.hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row2.col-1,
+.hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col0:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > house > .row-1.col-1,
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col1,
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col2,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row-1.col-1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col-1,
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col0,
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col1,
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col2,
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked ~ div > div > house > .row0.col0,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked ~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ div > div > house > .row-1.col1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col0,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+
+.house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-2.col0:checked ~ div > div > house > .row-2.col0,
+.house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-2.col0:checked ~ div > div > house > .row-2.col-1 {
+  opacity: 1;
+}
+
+.house.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-2.col4:checked ~ div > div > house > .row-2.col5,
+.house.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-2.col4:checked ~ div > div > house > .row-2.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col-1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row-1.col-1,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+
+.house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-2.col2:checked
+~ .hs.row-1.col2:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col-1,
+.house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-2.col2:checked
+~ .hs.row-1.col2:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row-1.col-1,
+.house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-2.col2:checked
+~ .hs.row-1.col2:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row-2.col-1 {
+  opacity: 1;
+}
+
+.hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col-1,
+.hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.house.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col0,
+.hs.row1.col0:checked ~ .house.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col-1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col-1,
+.hs.row1.col-1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col0,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row1.col-1:checked ~ .house.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col3,
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .house.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col3,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row0.col4,
+.hs.row1.col1:checked ~ .house.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col5,
+.house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col4,
+.house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row1.col5,
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row1.col4,
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col4,
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col5,
+.hs.row2.col4:checked ~ .house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row2.col5,
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col5,
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col5,
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row1.col5,
+.house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col5:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col5:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col5,
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col5,
+.house.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col5,
+.house.row1.col2:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .house.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row2.col0,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row3.col0,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row1.col-1,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked ~ .house.row1.col2:checked ~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row0.col2:checked ~ div > div > house > .row2.col3,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row0.col2:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col2:checked ~ div > div > house > .row0.col4,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col2:checked ~ div > div > house > .row2.col4,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col2:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col2:checked ~ div > div > house > .row2.col5,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col2:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .house.row-1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .house.row-1.col2:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked ~ .house.row-1.col2:checked ~ div > div > house > .row0.col4,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked ~ .house.row-1.col2:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked ~ .house.row-1.col2:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked ~ .hs.row0.col5:checked ~ .house.row-1.col2:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked ~ .house.row-1.col2:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked ~ .hs.row0.col5:checked ~ .house.row-1.col2:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked ~ .house.row-1.col2:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked ~ .house.row-1.col2:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .house.row-1.col2:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .house.row-1.col1:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .house.row-1.col1:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .house.row-1.col1:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col1:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col1:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col2:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col2:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.house.row1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4,
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row2.col3,
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5,
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col4,
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col5,
+.house.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row2.col4,
+.hs.row2.col3:checked ~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row3.col2,
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col3:checked ~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked ~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col5,
+.hs.row2.col4:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col3,
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col4:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col5:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col5:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col5:checked ~ .house.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col0:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col0:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row-1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row1.col-2 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row0.col0,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row-1.col3,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row0.col1,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col2,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row-1.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col5,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row-1.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col5,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col0,
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row0.col4,
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col0,
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col0,
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row0.col3,
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked ~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked ~ .hs.row-1.col-1:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col-1,
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked ~ div > div > house > .row-1.col0,
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col-1,
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div
+> div
+> house
+> .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row2.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row2.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked
+~ div
+> div
+> house
+> .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col0,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col-1:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col-1,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col4,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.house.row1.col2:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row3.col1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row2.col1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row2.col0,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row3.col1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row2.col-1,
+.hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row3.col0,
+.hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row3.col-1,
+.hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col0:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col-1,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col1,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col2,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row0.col-1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col-1 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col-1,
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col0,
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col1,
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col2,
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col-1 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > shed > .row4.col-1 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col0,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row0.col1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col0:checked ~ div > div > shed > .row0.col0,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col0:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col0,
+.house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col5,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row2.col-1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row0.col-1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row-1.col2:checked
+~ .hs.row0.col2:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col-1,
+.house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row-1.col2:checked
+~ .hs.row0.col2:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row0.col-1,
+.house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row-1.col2:checked
+~ .hs.row0.col2:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row-1.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row2.col-1,
+.hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col0,
+.hs.row2.col0:checked ~ .house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col-1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col-1,
+.hs.row2.col-1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col0,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col3,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col3,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col4,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col5,
+.house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col4,
+.house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row2.col5,
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row2.col4,
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col4,
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col5,
+.hs.row3.col4:checked ~ .house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row3.col5,
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col5,
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row2.col5,
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row2.col5,
+.house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col5:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col5,
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col5,
+.house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col5,
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row3.col0,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row4.col0,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row2.col-1,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > shed > .row4.col-1 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row1.col2:checked ~ div > div > shed > .row3.col3,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row1.col2:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked ~ div > div > shed > .row1.col4,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked ~ div > div > shed > .row3.col4,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col2:checked ~ div > div > shed > .row3.col5,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col2:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > shed > .row1.col4,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked ~ .hs.row1.col5:checked ~ .house.row0.col2:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked ~ .house.row0.col2:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked ~ .hs.row1.col5:checked ~ .house.row0.col2:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked ~ .house.row0.col2:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked ~ .house.row0.col2:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col2:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row0.col1:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row0.col1:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row0.col1:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col1:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col1:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col4,
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row3.col3,
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col5,
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col4,
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row3.col5,
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row3.col4,
+.hs.row3.col3:checked ~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row4.col2,
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row3.col3:checked ~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row3.col3:checked ~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row3.col5,
+.hs.row3.col4:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col3,
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row3.col4:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked ~ .hs.row3.col5:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row3.col5:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row3.col5:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.house.row3.col2:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col0:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col0:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row0.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col-2 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row1.col0,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col3,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col1,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col2,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col5,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col0,
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col4,
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col0,
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col0,
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row1.col3,
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row2.col-1,
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked ~ div > div > shed > .row0.col0,
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked ~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col-1,
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div
+> div
+> shed
+> .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row3.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row3.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked
+~ div
+> div
+> shed
+> .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col0,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col-1,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.house.row1.col2:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row3.col1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row2.col1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row2.col0,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row3.col1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row2.col-1,
+.hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row3.col0,
+.hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row3.col-1,
+.hs.row2.col-1:checked ~ .hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col0:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > house > .row0.col-1,
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col1,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col2,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row0.col-1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col-1 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col-1,
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col0,
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col1,
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col2,
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col-1 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ div > div > house > .row4.col-1 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked ~ div > div > house > .row1.col0,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ div > div > house > .row0.col1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col0:checked ~ div > div > house > .row0.col0,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col0:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col0,
+.house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col5,
+.house.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col-1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row0.col-1,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row-1.col2:checked
+~ .hs.row0.col2:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col-1,
+.house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row-1.col2:checked
+~ .hs.row0.col2:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row0.col-1,
+.house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row-1.col2:checked
+~ .hs.row0.col2:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row-1.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col-1,
+.hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col0,
+.hs.row2.col0:checked ~ .house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col-1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col-1,
+.hs.row2.col-1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col0,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row2.col-1:checked ~ .house.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col3,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .house.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col3,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col4,
+.hs.row2.col1:checked ~ .house.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col5,
+.house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col4,
+.house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row2.col5,
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row2.col4,
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col4,
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col5,
+.hs.row3.col4:checked ~ .house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row3.col5,
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col5,
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row2.col5,
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row2.col5,
+.house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col5:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col5,
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col5,
+.house.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col5,
+.house.row2.col2:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .house.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row3.col0,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row4.col0,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row2.col-1,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col1:checked ~ .house.row2.col2:checked ~ div > div > house > .row4.col-1 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row1.col2:checked ~ div > div > house > .row3.col3,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row1.col2:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked ~ div > div > house > .row1.col4,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked ~ div > div > house > .row3.col4,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col2:checked ~ div > div > house > .row3.col5,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col2:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > house > .row1.col4,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked ~ .house.row0.col2:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked ~ .hs.row1.col5:checked ~ .house.row0.col2:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked ~ .house.row0.col2:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked ~ .hs.row1.col5:checked ~ .house.row0.col2:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked ~ .house.row0.col2:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked ~ .house.row0.col2:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col2:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row0.col1:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row0.col1:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row0.col1:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col1:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col1:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col4,
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row3.col3,
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col5,
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row3.col4,
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row3.col5,
+.house.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row3.col4,
+.hs.row3.col3:checked ~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row4.col2,
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row3.col3:checked ~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row3.col3:checked ~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col5,
+.hs.row3.col4:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col3,
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row3.col4:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked ~ .hs.row3.col5:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row3.col5:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row3.col5:checked ~ .house.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.house.row3.col2:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col0:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col0:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row0.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col-2 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col0,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col3,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col1,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col2,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col5,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col0,
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col4,
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col0,
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col0,
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row1.col3,
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked ~ .hs.row0.col-1:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row2.col-1,
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked ~ div > div > house > .row0.col0,
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked ~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col-1,
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div
+> div
+> house
+> .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row3.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row3.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked
+~ div
+> div
+> house
+> .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col0,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col-1:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col-1,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col4,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.house.row2.col2:checked ~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row4.col1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row3.col1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row3.col0,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row4.col1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row3.col-1,
+.hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row4.col0,
+.hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row4.col-1,
+.hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col0:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col-1,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col1,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col-1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col-1 {
+  opacity: 0;
+}
+
+.hs.row5.col-1:checked ~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col0 {
+  opacity: 0;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col2 {
+  opacity: 0;
+}
+
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col-1,
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col0,
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col2 {
+  opacity: 0;
+}
+
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col1,
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col2,
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col0 {
+  opacity: 0;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col-1 {
+  opacity: 0;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row4.col-1 {
+  opacity: 0;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row5.col0:checked ~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > shed > .row5.col-1 {
+  opacity: 0;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col1:checked
+~ .house.row4.col2:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked ~ div > div > shed > .row2.col0,
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked ~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row1.col1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col0:checked ~ div > div > shed > .row1.col0,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col0:checked ~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+
+.house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col0:checked ~ div > div > shed > .row0.col0,
+.house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col0:checked ~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row3.col-1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row1.col-1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+
+.house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row0.col2:checked
+~ .hs.row1.col2:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row2.col-1,
+.house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row0.col2:checked
+~ .hs.row1.col2:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row1.col-1,
+.house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row0.col2:checked
+~ .hs.row1.col2:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row0.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row3.col-1,
+.hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row4.col-1 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row3.col0,
+.hs.row3.col0:checked ~ .house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col-1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row3.col-1,
+.hs.row3.col-1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row4.col-1 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row4.col0,
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col3,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col3,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col4,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row3.col5,
+.house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row3.col4,
+.house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row3.col5,
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row3.col4,
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col4,
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked ~ .house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col5,
+.hs.row4.col4:checked ~ .house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row4.col5,
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row2.col5,
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ div > div > shed > .row3.col5,
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row3.col5,
+.house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col5:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col5,
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col5,
+.house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col5,
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row4.col0,
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row5.col0,
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row4.col-1 {
+  opacity: 0;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row3.col-1,
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > shed > .row5.col-1 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .house.row2.col2:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row2.col2:checked ~ div > div > shed > .row4.col3,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row2.col2:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col2:checked ~ div > div > shed > .row2.col4,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col2:checked ~ div > div > shed > .row4.col4,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col2:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col2:checked ~ div > div > shed > .row4.col5,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col2:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > shed > .row2.col4,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked ~ .hs.row2.col5:checked ~ .house.row1.col2:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked ~ .hs.row2.col5:checked ~ .house.row1.col2:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col2:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row1.col1:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row1.col1:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row1.col1:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row5.col5 {
+  opacity: 0;
+}
+
+.house.row3.col2:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col4,
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row4.col3,
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col5,
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row4.col4,
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row4.col5,
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked ~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row4.col4,
+.hs.row4.col3:checked ~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row5.col3 {
+  opacity: 0;
+}
+
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row5.col2,
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row5.col4 {
+  opacity: 0;
+}
+
+.hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row4.col3:checked ~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row5.col5 {
+  opacity: 0;
+}
+
+.hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row4.col3:checked ~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row4.col5,
+.hs.row4.col4:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row5.col4 {
+  opacity: 0;
+}
+
+.hs.row5.col4:checked ~ .hs.row4.col4:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row5.col3,
+.hs.row5.col4:checked ~ .hs.row4.col4:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row5.col5 {
+  opacity: 0;
+}
+
+.hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row4.col4:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row5.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > shed > .row5.col5 {
+  opacity: 0;
+}
+
+.hs.row5.col5:checked ~ .hs.row4.col5:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > shed > .row5.col4 {
+  opacity: 0;
+}
+
+.hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row4.col5:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > shed > .row5.col3 {
+  opacity: 0;
+}
+
+.hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row4.col5:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > shed > .row5.col2 {
+  opacity: 0;
+}
+
+.house.row4.col2:checked ~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col0:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col0:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row1.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col-2 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row2.col0,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col3,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col1,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col5,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row3.col0,
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col4,
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row2.col0,
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col0,
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col3,
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col-1:checked ~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ div > div > shed > .row3.col-1,
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked ~ div > div > shed > .row1.col0,
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked ~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col-1,
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div
+> div
+> shed
+> .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col5:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col5:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col5,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row4.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row4.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked
+~ div
+> div
+> shed
+> .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row2.col0,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row2.col-1,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row2.col5:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row3.col4:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.house.row2.col2:checked ~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row4.col1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row3.col1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row3.col0,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row4.col1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row3.col-1,
+.hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row4.col0,
+.hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row4.col-1,
+.hs.row3.col-1:checked ~ .hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col0:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > house > .row1.col-1,
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col1,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col2,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col-1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col-1 {
+  opacity: 1;
+}
+
+.hs.row5.col-1:checked ~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col0 {
+  opacity: 1;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col2 {
+  opacity: 1;
+}
+
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col-1,
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col0,
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col2 {
+  opacity: 1;
+}
+
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col1,
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col2,
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col0 {
+  opacity: 1;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col-1 {
+  opacity: 1;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row4.col-1 {
+  opacity: 1;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row5.col0:checked ~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ div > div > house > .row5.col-1 {
+  opacity: 1;
+}
+
+.hs.row5.col-1:checked
+~ .hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col-1:checked
+~ .hs.row4.col1:checked
+~ .house.row4.col2:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked ~ div > div > house > .row2.col0,
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked ~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ div > div > house > .row1.col1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col0:checked ~ div > div > house > .row1.col0,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col0:checked ~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+
+.house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col0:checked ~ div > div > house > .row0.col0,
+.house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row0.col0:checked ~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col4:checked ~ div > div > house > .row0.col5,
+.house.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row3.col-1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row1.col-1,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+
+.house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row0.col2:checked
+~ .hs.row1.col2:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row2.col-1,
+.house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row0.col2:checked
+~ .hs.row1.col2:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row1.col-1,
+.house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row0.col2:checked
+~ .hs.row1.col2:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row0.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row3.col-1,
+.hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row4.col-1 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row3.col0,
+.hs.row3.col0:checked ~ .house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col-1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row3.col-1,
+.hs.row3.col-1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row4.col-1 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row4.col0,
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row3.col-1:checked ~ .house.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col3,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .house.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col3,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col4,
+.hs.row3.col1:checked ~ .house.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col5,
+.house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col4,
+.house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row3.col5,
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row3.col4,
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col4,
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked ~ .house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col5,
+.hs.row4.col4:checked ~ .house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row4.col5,
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row2.col5,
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ div > div > house > .row3.col5,
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row3.col5,
+.house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col5:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col5,
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col5,
+.house.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col5,
+.house.row3.col2:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .house.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row4.col0,
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row5.col0,
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row4.col-1 {
+  opacity: 1;
+}
+
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row3.col-1,
+.hs.row4.col-1:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col1:checked ~ .house.row3.col2:checked ~ div > div > house > .row5.col-1 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .house.row2.col2:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row2.col2:checked ~ div > div > house > .row4.col3,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row2.col2:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col2:checked ~ div > div > house > .row2.col4,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col2:checked ~ div > div > house > .row4.col4,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col2:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col2:checked ~ div > div > house > .row4.col5,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col2:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > house > .row2.col4,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked ~ .house.row1.col2:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked ~ .hs.row2.col5:checked ~ .house.row1.col2:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col2:checked ~ .hs.row2.col5:checked ~ .house.row1.col2:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked ~ .house.row1.col2:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col2:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row1.col1:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row1.col1:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row1.col1:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col1:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row5.col5 {
+  opacity: 1;
+}
+
+.house.row3.col2:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col4,
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row4.col3,
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col5,
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row4.col4,
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row4.col5,
+.house.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked ~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row4.col4,
+.hs.row4.col3:checked ~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row5.col3 {
+  opacity: 1;
+}
+
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row5.col2,
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row5.col4 {
+  opacity: 1;
+}
+
+.hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row4.col3:checked ~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row5.col5 {
+  opacity: 1;
+}
+
+.hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row4.col3:checked ~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row4.col3:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row4.col5,
+.hs.row4.col4:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row5.col4 {
+  opacity: 1;
+}
+
+.hs.row5.col4:checked ~ .hs.row4.col4:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row5.col3,
+.hs.row5.col4:checked ~ .hs.row4.col4:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row5.col5 {
+  opacity: 1;
+}
+
+.hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row4.col4:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row5.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > house > .row5.col5 {
+  opacity: 1;
+}
+
+.hs.row5.col5:checked ~ .hs.row4.col5:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > house > .row5.col4 {
+  opacity: 1;
+}
+
+.hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row4.col5:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > house > .row5.col3 {
+  opacity: 1;
+}
+
+.hs.row5.col3:checked
+~ .hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row4.col5:checked ~ .house.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > house > .row5.col2 {
+  opacity: 1;
+}
+
+.house.row4.col2:checked ~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col0:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col0:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row1.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col-2 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col0,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col3,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col1,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col2,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col5,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row3.col0,
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col4,
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ div > div > house > .row2.col0,
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col0,
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row2.col3,
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col-1:checked ~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col-1:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col-1:checked ~ .hs.row1.col-1:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ div > div > house > .row3.col-1,
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked ~ div > div > house > .row1.col0,
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked ~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col-1,
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div
+> div
+> house
+> .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col5:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row3.col5:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col5,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row4.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row2.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row4.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked
+~ div
+> div
+> house
+> .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row2.col0,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col-1:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row2.col-1,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col-1:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4,
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row2.col5:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row3.col4:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.house.row0.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row0.col3:checked ~ .house.row-1.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row2.col2,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row1.col2,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row1.col1,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row2.col2,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row1.col0,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row2.col1,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row2.col0,
+.hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col1:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col0,
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col2,
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col3,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col0,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col0,
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col1,
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col2,
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col3,
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked ~ div > div > shed > .row0.col1,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row-1.col2,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col1,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+
+.house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-2.col1:checked ~ div > div > shed > .row-2.col1,
+.house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-2.col1:checked ~ div > div > shed > .row-2.col0 {
+  opacity: 0;
+}
+
+.house.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-2.col5:checked ~ div > div > shed > .row-2.col6,
+.house.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-2.col5:checked ~ div > div > shed > .row-2.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col0,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row-1.col0,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-2.col3:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col0,
+.house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-2.col3:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row-1.col0,
+.house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-2.col3:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row-2.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col0,
+.hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.house.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col1,
+.hs.row1.col1:checked ~ .house.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col0,
+.hs.row1.col0:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col0:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col1,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col0:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row-1.col4,
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row-1.col4,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row0.col5,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row1.col6,
+.house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row1.col5,
+.house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row1.col6,
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row1.col5,
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col5,
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col5:checked ~ .house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col6,
+.hs.row2.col5:checked ~ .house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col6,
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row0.col6,
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row1.col6,
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row1.col6,
+.house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col6:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col6:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col6,
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col6,
+.house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col6,
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .house.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row2.col1,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row3.col1,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row1.col0,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col3:checked ~ div > div > shed > .row2.col4,
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col3:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col3:checked ~ div > div > shed > .row0.col5,
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col3:checked ~ div > div > shed > .row2.col5,
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col3:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .house.row0.col3:checked ~ div > div > shed > .row2.col6,
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .house.row0.col3:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .house.row-1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .house.row-1.col3:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked ~ .house.row-1.col3:checked ~ div > div > shed > .row0.col5,
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked ~ .house.row-1.col3:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked ~ .house.row-1.col3:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked ~ .hs.row0.col6:checked ~ .house.row-1.col3:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked ~ .house.row-1.col3:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked ~ .hs.row0.col6:checked ~ .house.row-1.col3:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked ~ .house.row-1.col3:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked ~ .house.row-1.col3:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .house.row-1.col3:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col2:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col2:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col2:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .house.row-1.col2:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .house.row-1.col2:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .house.row-1.col3:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+.hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .house.row-1.col3:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.house.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5,
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4,
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6,
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col5,
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row2.col6,
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col5,
+.hs.row2.col4:checked ~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row3.col3,
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col4:checked ~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked ~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col5:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row2.col6,
+.hs.row2.col5:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col4,
+.hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col5:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col6:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col6:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col6:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row-1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col-1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row0.col1,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row-1.col4,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row0.col2,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col3,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row-1.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col6,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row-1.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col6,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col1,
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row0.col5,
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col1,
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col1,
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row0.col4,
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col0,
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked ~ div > div > shed > .row-1.col1,
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col0,
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div
+> div
+> shed
+> .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row2.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row0.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row2.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked
+~ div
+> div
+> shed
+> .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col1,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col0,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row0.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.house.row0.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row0.col3:checked ~ .house.row-1.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row2.col2,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row1.col2,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row1.col1,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row2.col2,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row1.col0,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row2.col1,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row2.col0,
+.hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col1:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col0,
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col2,
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col3,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col0,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col0,
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col1,
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col2,
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col3,
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked ~ div > div > house > .row0.col1,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ div > div > house > .row-1.col2,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col1,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+
+.house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-2.col1:checked ~ div > div > house > .row-2.col1,
+.house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-2.col1:checked ~ div > div > house > .row-2.col0 {
+  opacity: 1;
+}
+
+.house.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-2.col5:checked ~ div > div > house > .row-2.col6,
+.house.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-2.col5:checked ~ div > div > house > .row-2.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col0,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row-1.col0,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-2.col3:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col0,
+.house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-2.col3:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row-1.col0,
+.house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-2.col3:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row-2.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col0,
+.hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.house.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col1,
+.hs.row1.col1:checked ~ .house.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col0:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col0,
+.hs.row1.col0:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col0:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col1,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row1.col0:checked ~ .house.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row-1.col4,
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .house.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row-1.col4,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row0.col5,
+.hs.row1.col2:checked ~ .house.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row1.col6,
+.house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row1.col5,
+.house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row1.col6,
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row1.col5,
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col5,
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col5:checked ~ .house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col6,
+.hs.row2.col5:checked ~ .house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col6,
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row0.col6,
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row1.col6,
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row1.col6,
+.house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col6:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col6:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col6,
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col6,
+.house.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col6,
+.house.row1.col3:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .house.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row2.col1,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row3.col1,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row1.col0,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked ~ .house.row1.col3:checked ~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col3:checked ~ div > div > house > .row2.col4,
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .house.row0.col3:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col3:checked ~ div > div > house > .row0.col5,
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col3:checked ~ div > div > house > .row2.col5,
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col3:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .house.row0.col3:checked ~ div > div > house > .row2.col6,
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .house.row0.col3:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .house.row-1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .house.row-1.col3:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked ~ .house.row-1.col3:checked ~ div > div > house > .row0.col5,
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked ~ .house.row-1.col3:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked ~ .house.row-1.col3:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked ~ .hs.row0.col6:checked ~ .house.row-1.col3:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked ~ .house.row-1.col3:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked ~ .hs.row0.col6:checked ~ .house.row-1.col3:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked ~ .house.row-1.col3:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked ~ .house.row-1.col3:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .house.row-1.col3:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col2:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col2:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .house.row-1.col2:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .house.row-1.col2:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .house.row-1.col2:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .house.row-1.col3:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+.hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .house.row-1.col3:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.house.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5,
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col4,
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6,
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col5,
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row2.col6,
+.house.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col5,
+.hs.row2.col4:checked ~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row3.col3,
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col4:checked ~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked ~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col5:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row2.col6,
+.hs.row2.col5:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col4,
+.hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col5:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col6:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col6:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col6:checked ~ .house.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col1:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row-1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col-1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row0.col1,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row-1.col4,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row0.col2,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col3,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row-1.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col6,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row-1.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col6,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col1,
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row0.col5,
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col1,
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col1,
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row0.col4,
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked ~ .hs.row-1.col0:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col0,
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked ~ div > div > house > .row-1.col1,
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col0,
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div
+> div
+> house
+> .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row2.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row0.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row2.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked
+~ div
+> div
+> house
+> .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col1,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col0:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col0,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col5,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row0.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.house.row1.col3:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row3.col2,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row2.col2,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row2.col1,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row3.col2,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row2.col0,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row3.col1,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row3.col0,
+.hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col1:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col0,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col2,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col0,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col0,
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col1,
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col2,
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col3,
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked ~ div > div > shed > .row1.col1,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row0.col2,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col1:checked ~ div > div > shed > .row0.col1,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col1,
+.house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col6,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col0,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row0.col0,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col0,
+.house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row0.col0,
+.house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row-1.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col0,
+.hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col1,
+.hs.row2.col1:checked ~ .house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col0,
+.hs.row2.col0:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col0:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col1,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col0:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col4,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col4,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col5,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row2.col6,
+.house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row2.col5,
+.house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row2.col6,
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row2.col5,
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col5,
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked ~ .house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col6,
+.hs.row3.col5:checked ~ .house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col6,
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col6,
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row2.col6,
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row2.col6,
+.house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col6:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col6:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col6,
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col6,
+.house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col6,
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row3.col1,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row4.col1,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row2.col0,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col3:checked ~ div > div > shed > .row3.col4,
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col3:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked ~ div > div > shed > .row1.col5,
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked ~ div > div > shed > .row3.col5,
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .house.row1.col3:checked ~ div > div > shed > .row3.col6,
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .house.row1.col3:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > shed > .row1.col5,
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked ~ .hs.row1.col6:checked ~ .house.row0.col3:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked ~ .house.row0.col3:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked ~ .hs.row1.col6:checked ~ .house.row0.col3:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked ~ .house.row0.col3:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked ~ .house.row0.col3:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .house.row0.col3:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col2:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col2:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col2:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .house.row0.col2:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .house.row0.col2:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .house.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .house.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row4.col6 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col5,
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col4,
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col6,
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row3.col5,
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row3.col6,
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col5,
+.hs.row3.col4:checked ~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row4.col3,
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row3.col4:checked ~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row4.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row3.col4:checked ~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row3.col6,
+.hs.row3.col5:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked ~ .hs.row3.col5:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col4,
+.hs.row4.col5:checked ~ .hs.row3.col5:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row3.col5:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col6:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col6:checked ~ .hs.row3.col6:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row3.col6:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row3.col6:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.house.row3.col3:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row0.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col-1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col1,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col2,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col3,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col6,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col1,
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col5,
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1,
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col1,
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col4,
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row2.col0,
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked ~ div > div > shed > .row0.col1,
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col0,
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div
+> div
+> shed
+> .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row3.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row3.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked
+~ div
+> div
+> shed
+> .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col1,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col2:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col0,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row1.col6:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.house.row1.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row3.col2,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row2.col2,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row2.col1,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row3.col2,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row2.col0,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row3.col1,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row3.col0,
+.hs.row2.col0:checked ~ .hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col1:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col0,
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col2,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col0,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col0,
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col1,
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col2,
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col3,
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked ~ div > div > house > .row1.col1,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > house > .row0.col2,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col1:checked ~ div > div > house > .row0.col1,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col1,
+.house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col6,
+.house.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col0,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row0.col0,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col0,
+.house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row0.col0,
+.house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row-1.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row-1.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col0,
+.hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col1,
+.hs.row2.col1:checked ~ .house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col0:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col0,
+.hs.row2.col0:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col0:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col1,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row2.col0:checked ~ .house.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col4,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .house.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col4,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col5,
+.hs.row2.col2:checked ~ .house.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row2.col6,
+.house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row2.col5,
+.house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row2.col6,
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row2.col5,
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col5,
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked ~ .house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col6,
+.hs.row3.col5:checked ~ .house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row3.col6,
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col6,
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row2.col6,
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row2.col6,
+.house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col6:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col6:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col6,
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col6,
+.house.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col6,
+.house.row2.col3:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .house.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row3.col1,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row4.col1,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row2.col0,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col2:checked ~ .house.row2.col3:checked ~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col3:checked ~ div > div > house > .row3.col4,
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .house.row1.col3:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked ~ div > div > house > .row1.col5,
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked ~ div > div > house > .row3.col5,
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .house.row1.col3:checked ~ div > div > house > .row3.col6,
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .house.row1.col3:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > house > .row1.col5,
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked ~ .house.row0.col3:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked ~ .hs.row1.col6:checked ~ .house.row0.col3:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked ~ .house.row0.col3:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked ~ .hs.row1.col6:checked ~ .house.row0.col3:checked ~ .hs.row0.col6:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked ~ .house.row0.col3:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked ~ .house.row0.col3:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .house.row0.col3:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col2:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col2:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row0.col2:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .house.row0.col2:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .house.row0.col2:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .house.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .house.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row4.col6 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col5,
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row3.col4,
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row2.col6,
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row3.col5,
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row3.col6,
+.house.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row3.col5,
+.hs.row3.col4:checked ~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row4.col3,
+.hs.row4.col4:checked ~ .hs.row3.col4:checked ~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row3.col4:checked ~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row4.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row3.col4:checked ~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row3.col6,
+.hs.row3.col5:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked ~ .hs.row3.col5:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col4,
+.hs.row4.col5:checked ~ .hs.row3.col5:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row3.col5:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col6:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col6:checked ~ .hs.row3.col6:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row3.col6:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row3.col6:checked ~ .house.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.house.row3.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col1:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row0.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col-1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col1,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col2,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col3,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row2.col6,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col1,
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col5,
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col1,
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col1,
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row1.col4,
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked ~ .hs.row0.col0:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row2.col0,
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked ~ div > div > house > .row0.col1,
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col0,
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div
+> div
+> house
+> .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row3.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row3.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked
+~ div
+> div
+> house
+> .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col1,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col2:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col0:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col0,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col5,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row1.col6:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.house.row2.col3:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row4.col2,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row3.col2,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row3.col1,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row4.col2,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row3.col0,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row4.col1,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row4.col0,
+.hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col1:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col0,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col0,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row5.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col0 {
+  opacity: 0;
+}
+
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col2 {
+  opacity: 0;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col3 {
+  opacity: 0;
+}
+
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col0,
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col1,
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col2 {
+  opacity: 0;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col3 {
+  opacity: 0;
+}
+
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col2,
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col3,
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col0 {
+  opacity: 0;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row5.col1:checked ~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > shed > .row5.col0 {
+  opacity: 0;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col2:checked
+~ .house.row4.col3:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked ~ div > div > shed > .row2.col1,
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row1.col2,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col1:checked ~ div > div > shed > .row1.col1,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col1:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+
+.house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col1:checked ~ div > div > shed > .row0.col1,
+.house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col1:checked ~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row3.col0,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row1.col0,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+
+.house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col3:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row2.col0,
+.house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col3:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row1.col0,
+.house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col3:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row0.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row3.col0,
+.hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row3.col1,
+.hs.row3.col1:checked ~ .house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row3.col0,
+.hs.row3.col0:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col0:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col1,
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col0:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col4,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col4,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col5,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row3.col6,
+.house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row3.col5,
+.house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row3.col6,
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row3.col5,
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col5,
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked ~ .house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col6,
+.hs.row4.col5:checked ~ .house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row4.col6,
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row2.col6,
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ div > div > shed > .row3.col6,
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row3.col6,
+.house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col6:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col6:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col6,
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col6,
+.house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col6,
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row4.col1,
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row5.col1,
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row4.col0 {
+  opacity: 0;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row3.col0,
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > shed > .row5.col0 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row2.col3:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col3:checked ~ div > div > shed > .row4.col4,
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col3:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col3:checked ~ div > div > shed > .row2.col5,
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col3:checked ~ div > div > shed > .row4.col5,
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col3:checked ~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .house.row2.col3:checked ~ div > div > shed > .row4.col6,
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .house.row2.col3:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > shed > .row2.col5,
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked ~ .hs.row2.col6:checked ~ .house.row1.col3:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked ~ .hs.row2.col6:checked ~ .house.row1.col3:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .house.row1.col3:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col2:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col2:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col2:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row5.col6 {
+  opacity: 0;
+}
+
+.house.row3.col3:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col5,
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row4.col4,
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row3.col6,
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row4.col5,
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > shed > .row4.col6,
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col4:checked ~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row4.col5,
+.hs.row4.col4:checked ~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row5.col4 {
+  opacity: 0;
+}
+
+.hs.row5.col4:checked ~ .hs.row4.col4:checked ~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row5.col3,
+.hs.row5.col4:checked ~ .hs.row4.col4:checked ~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row5.col5 {
+  opacity: 0;
+}
+
+.hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row4.col4:checked ~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row5.col6 {
+  opacity: 0;
+}
+
+.hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row4.col4:checked ~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row4.col6 {
+  opacity: 0;
+}
+
+.hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > shed > .row4.col6,
+.hs.row4.col5:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > shed > .row5.col5 {
+  opacity: 0;
+}
+
+.hs.row5.col5:checked ~ .hs.row4.col5:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > shed > .row5.col4,
+.hs.row5.col5:checked ~ .hs.row4.col5:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > shed > .row5.col6 {
+  opacity: 0;
+}
+
+.hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row4.col5:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > shed > .row5.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col6:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > shed > .row5.col6 {
+  opacity: 0;
+}
+
+.hs.row5.col6:checked ~ .hs.row4.col6:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > shed > .row5.col5 {
+  opacity: 0;
+}
+
+.hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row4.col6:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > shed > .row5.col4 {
+  opacity: 0;
+}
+
+.hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row4.col6:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > shed > .row5.col3 {
+  opacity: 0;
+}
+
+.house.row4.col3:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row1.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col-1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col1,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col2,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row3.col6,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row3.col1,
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col5,
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row2.col1,
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1,
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4,
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked ~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > shed > .row3.col0,
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked ~ div > div > shed > .row1.col1,
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked ~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col0,
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div
+> div
+> shed
+> .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col6:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col6:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col6,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row4.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row2.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row4.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked
+~ div
+> div
+> shed
+> .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row2.col1,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row2.col0,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row2.col6:checked ~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row3.col5:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.house.row2.col3:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row4.col2,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row3.col2,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row3.col1,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row4.col2,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row3.col0,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row4.col1,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row4.col0,
+.hs.row3.col0:checked ~ .hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col1:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col0,
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col2,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col0,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row5.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col0 {
+  opacity: 1;
+}
+
+.hs.row5.col0:checked ~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col2 {
+  opacity: 1;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col3 {
+  opacity: 1;
+}
+
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col0,
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col1,
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col2 {
+  opacity: 1;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col3 {
+  opacity: 1;
+}
+
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col2,
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col3,
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col0 {
+  opacity: 1;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row5.col1:checked ~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ div > div > house > .row5.col0 {
+  opacity: 1;
+}
+
+.hs.row5.col0:checked
+~ .hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col0:checked
+~ .hs.row4.col2:checked
+~ .house.row4.col3:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked ~ div > div > house > .row2.col1,
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ div > div > house > .row1.col2,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col1:checked ~ div > div > house > .row1.col1,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col1:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+
+.house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col1:checked ~ div > div > house > .row0.col1,
+.house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row0.col1:checked ~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col5:checked ~ div > div > house > .row0.col6,
+.house.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row3.col0,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row1.col0,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+
+.house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col3:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row2.col0,
+.house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col3:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row1.col0,
+.house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row0.col3:checked
+~ .hs.row1.col3:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row0.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row3.col0,
+.hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row3.col1,
+.hs.row3.col1:checked ~ .house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col0:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row3.col0,
+.hs.row3.col0:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col0:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col1,
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row3.col0:checked ~ .house.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col4,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .house.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col4,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col5,
+.hs.row3.col2:checked ~ .house.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row3.col6,
+.house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row3.col5,
+.house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row3.col6,
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row3.col5,
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col5,
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked ~ .house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col6,
+.hs.row4.col5:checked ~ .house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row4.col6,
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row2.col6,
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ div > div > house > .row3.col6,
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row3.col6,
+.house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col6:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col6:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col6,
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col6,
+.house.row3.col3:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col6,
+.house.row3.col3:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .house.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row4.col1,
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row5.col1,
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row4.col0 {
+  opacity: 1;
+}
+
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row3.col0,
+.hs.row4.col0:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col2:checked ~ .house.row3.col3:checked ~ div > div > house > .row5.col0 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row2.col3:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col3:checked ~ div > div > house > .row4.col4,
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .house.row2.col3:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col3:checked ~ div > div > house > .row2.col5,
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col3:checked ~ div > div > house > .row4.col5,
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col3:checked ~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .house.row2.col3:checked ~ div > div > house > .row4.col6,
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .house.row2.col3:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > house > .row2.col5,
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked ~ .house.row1.col3:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked ~ .hs.row2.col6:checked ~ .house.row1.col3:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col3:checked ~ .hs.row2.col6:checked ~ .house.row1.col3:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked ~ .house.row1.col3:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .house.row1.col3:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col2:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col2:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row1.col2:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col2:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .house.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row5.col6 {
+  opacity: 1;
+}
+
+.house.row3.col3:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col5,
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row4.col4,
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row3.col6,
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row4.col5,
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > house > .row4.col6,
+.house.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col4:checked ~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row4.col5,
+.hs.row4.col4:checked ~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row5.col4 {
+  opacity: 1;
+}
+
+.hs.row5.col4:checked ~ .hs.row4.col4:checked ~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row5.col3,
+.hs.row5.col4:checked ~ .hs.row4.col4:checked ~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row5.col5 {
+  opacity: 1;
+}
+
+.hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row4.col4:checked ~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row5.col6 {
+  opacity: 1;
+}
+
+.hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row4.col4:checked ~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row4.col6 {
+  opacity: 1;
+}
+
+.hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row4.col4:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > house > .row4.col6,
+.hs.row4.col5:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > house > .row5.col5 {
+  opacity: 1;
+}
+
+.hs.row5.col5:checked ~ .hs.row4.col5:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > house > .row5.col4,
+.hs.row5.col5:checked ~ .hs.row4.col5:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > house > .row5.col6 {
+  opacity: 1;
+}
+
+.hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row4.col5:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ div > div > house > .row5.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col6:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > house > .row5.col6 {
+  opacity: 1;
+}
+
+.hs.row5.col6:checked ~ .hs.row4.col6:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > house > .row5.col5 {
+  opacity: 1;
+}
+
+.hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row4.col6:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > house > .row5.col4 {
+  opacity: 1;
+}
+
+.hs.row5.col4:checked
+~ .hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row4.col6:checked ~ .house.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > house > .row5.col3 {
+  opacity: 1;
+}
+
+.house.row4.col3:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col1:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row1.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col-1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col1,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col2,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col3,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row3.col6,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row3.col1,
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col5,
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ div > div > house > .row2.col1,
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col1,
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col4,
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked ~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col0:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col0:checked ~ .hs.row1.col0:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > house > .row3.col0,
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked ~ div > div > house > .row1.col1,
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked ~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col0,
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ div
+> div
+> house
+> .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col6:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col5:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row3.col6:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row2.col6,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row4.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row2.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row4.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked
+~ div
+> div
+> house
+> .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row2.col1,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col2:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col0:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row2.col0,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col0:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col5,
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row2.col6:checked ~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row3.col5:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.house.row0.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row0.col4:checked ~ .house.row-1.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row2.col3,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row1.col3,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row1.col2,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row2.col3,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row1.col1,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row2.col2,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row2.col1,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col2:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col1,
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col3,
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col1,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col1,
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col2,
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col3,
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col4,
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked ~ div > div > shed > .row0.col2,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row-1.col3,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col2,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+
+.house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-2.col2:checked ~ div > div > shed > .row-2.col2,
+.house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-2.col2:checked ~ div > div > shed > .row-2.col1 {
+  opacity: 0;
+}
+
+.house.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-2.col6:checked ~ div > div > shed > .row-2.col7,
+.house.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-2.col6:checked ~ div > div > shed > .row-2.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col1,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row-1.col1,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-2.col4:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col1,
+.house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-2.col4:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row-1.col1,
+.house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-2.col4:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row-2.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col1,
+.hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.house.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col2,
+.hs.row1.col2:checked ~ .house.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col1,
+.hs.row1.col1:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col1:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col2,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col1:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row-1.col5,
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row-1.col5,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row0.col6,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row1.col7,
+.house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row1.col6,
+.house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row1.col7,
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row1.col6,
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+
+.hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ .house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col6,
+.hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ .house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col6:checked ~ .house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col7,
+.hs.row2.col6:checked ~ .house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col7,
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row0.col7,
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row1.col7,
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+
+.house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row1.col7,
+.house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col7:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col7:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > shed > .row1.col7,
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col7,
+.house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > shed > .row1.col7,
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .house.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row2.col2,
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row3.col2,
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row1.col1,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col4:checked ~ div > div > shed > .row2.col5,
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col4:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .house.row0.col4:checked ~ div > div > shed > .row0.col6,
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .house.row0.col4:checked ~ div > div > shed > .row2.col6,
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .house.row0.col4:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .house.row0.col4:checked ~ div > div > shed > .row2.col7,
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .house.row0.col4:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .house.row-1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col4:checked ~ .house.row-1.col4:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked ~ .house.row-1.col4:checked ~ div > div > shed > .row0.col6,
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked ~ .house.row-1.col4:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked ~ .house.row-1.col4:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked ~ .hs.row0.col7:checked ~ .house.row-1.col4:checked ~ div > div > shed > .row-1.col7 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked ~ .house.row-1.col4:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked ~ .hs.row0.col7:checked ~ .house.row-1.col4:checked ~ .hs.row-1.col7:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked ~ .house.row-1.col4:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row-1.col7 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked ~ .house.row-1.col4:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ .house.row-1.col4:checked ~ div > div > shed > .row-1.col7 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col3:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col3:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col3:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .house.row-1.col3:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .house.row-1.col3:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+
+.hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .house.row-1.col4:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > shed > .row-1.col7 {
+  opacity: 0;
+}
+.hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .house.row-1.col4:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+
+.house.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6,
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col5,
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col7,
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row2.col6,
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row2.col7,
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+
+.hs.row2.col5:checked ~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col6,
+.hs.row2.col5:checked ~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row3.col4,
+.hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col5:checked ~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col5:checked ~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+
+.hs.row2.col6:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row2.col7,
+.hs.row2.col6:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col5,
+.hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col6:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col7:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col7:checked ~ .hs.row2.col7:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col7:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col7:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row-1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col0 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row0.col2,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row-1.col5,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col7:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row0.col3,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col4,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row-1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ .hs.row-1.col7:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row-1.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row-1.col7,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > shed > .row-1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col7,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row-1.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > shed > .row-1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row-1.col7,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col7:checked ~ div > div > shed > .row-1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col7:checked ~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col7:checked ~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col7:checked ~ .hs.row-1.col7:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col2,
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row0.col6,
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col2,
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col2,
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row0.col5,
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col1,
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked ~ div > div > shed > .row-1.col2,
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col1,
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div
+> div
+> shed
+> .row1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col7:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row-1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ .hs.row-1.col7:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row0.col7,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row2.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > shed > .row0.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > shed > .row2.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > shed > .row-1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked
+~ div
+> div
+> shed
+> .row1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col2,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col3:checked ~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col1,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row-1.col4 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row0.col7:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col7:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col5 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row-1.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ .hs.row-1.col7:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row-1.col3 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col3:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row-1.col2 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col4:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.house.row0.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row0.col4:checked ~ .house.row-1.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row2.col3,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row1.col3,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row1.col2,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row2.col3,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row1.col1,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row2.col2,
+.hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row2.col1,
+.hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col2:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col1,
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col3,
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col1,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col1,
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col2,
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col3,
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col4,
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked ~ div > div > house > .row0.col2,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ div > div > house > .row-1.col3,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col2,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+
+.house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-2.col2:checked ~ div > div > house > .row-2.col2,
+.house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-2.col2:checked ~ div > div > house > .row-2.col1 {
+  opacity: 1;
+}
+
+.house.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-2.col6:checked ~ div > div > house > .row-2.col7,
+.house.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-2.col6:checked ~ div > div > house > .row-2.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col1,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row-1.col1,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-2.col4:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col1,
+.house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-2.col4:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row-1.col1,
+.house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-2.col4:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row-2.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col1,
+.hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.house.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked ~ .house.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col2,
+.hs.row1.col2:checked ~ .house.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col1,
+.hs.row1.col1:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col1:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col2,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row1.col1:checked ~ .house.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row-1.col5,
+.hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .house.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row-1.col5,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row0.col6,
+.hs.row1.col3:checked ~ .house.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row1.col7,
+.house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row1.col6,
+.house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row1.col7,
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row1.col6,
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+
+.hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ .house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col6,
+.hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ .house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col6:checked ~ .house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col7,
+.hs.row2.col6:checked ~ .house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col7,
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row0.col7,
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row1.col7,
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+
+.house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row1.col7,
+.house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+
+.hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col7:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col7:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > house > .row1.col7,
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col7,
+.house.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > house > .row1.col7,
+.house.row1.col4:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .house.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row2.col2,
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row3.col2,
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row1.col1,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked ~ .house.row1.col4:checked ~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col4:checked ~ div > div > house > .row2.col5,
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .house.row0.col4:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .house.row0.col4:checked ~ div > div > house > .row0.col6,
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .house.row0.col4:checked ~ div > div > house > .row2.col6,
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .house.row0.col4:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .house.row0.col4:checked ~ div > div > house > .row2.col7,
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .house.row0.col4:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .house.row-1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col4:checked ~ .house.row-1.col4:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked ~ .house.row-1.col4:checked ~ div > div > house > .row0.col6,
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked ~ .house.row-1.col4:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked ~ .house.row-1.col4:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked ~ .hs.row0.col7:checked ~ .house.row-1.col4:checked ~ div > div > house > .row-1.col7 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked ~ .house.row-1.col4:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col4:checked ~ .hs.row0.col7:checked ~ .house.row-1.col4:checked ~ .hs.row-1.col7:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked ~ .house.row-1.col4:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row-1.col7 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked ~ .house.row-1.col4:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ .house.row-1.col4:checked ~ div > div > house > .row-1.col7 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col3:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col3:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .house.row-1.col3:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .house.row-1.col3:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .house.row-1.col3:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+
+.hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .house.row-1.col4:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > house > .row-1.col7 {
+  opacity: 1;
+}
+.hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .house.row-1.col4:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+
+.house.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6,
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col5,
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col7,
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row2.col6,
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > house > .row2.col7,
+.house.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+
+.hs.row2.col5:checked ~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col6,
+.hs.row2.col5:checked ~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row3.col4,
+.hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col5:checked ~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col5:checked ~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .house.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+
+.hs.row2.col6:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row2.col7,
+.hs.row2.col6:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col5,
+.hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col6:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col7:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col7:checked ~ .hs.row2.col7:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col7:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col7:checked ~ .house.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col2:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row-1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col0 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row0.col2,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row-1.col5,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col7:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row0.col3,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col4,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row-1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ .hs.row-1.col7:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row-1.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row-1.col7,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > house > .row-1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col7,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > house > .row-1.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > house > .row-1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row-1.col7,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col7:checked ~ div > div > house > .row-1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col7:checked ~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col7:checked ~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .hs.row0.col7:checked ~ .hs.row-1.col7:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col2,
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row0.col6,
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col5:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col2,
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col2,
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row0.col5,
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked ~ .hs.row-1.col3:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked ~ .hs.row-1.col1:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col1,
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked ~ div > div > house > .row-1.col2,
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col1,
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked ~ .hs.row-1.col2:checked ~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div
+> div
+> house
+> .row1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col7:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row-1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ .hs.row-1.col7:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row0.col7,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row2.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > house > .row0.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > house > .row2.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > house > .row-1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked
+~ div
+> div
+> house
+> .row1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col2,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col3:checked ~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row-1.col1:checked
+~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col1,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row-1.col4 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col6,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row0.col7:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col7:checked
+~ .hs.row-1.col4:checked
+~ .hs.row-1.col5:checked
+~ .hs.row-1.col6:checked
+~ .hs.row-1.col7:checked
+~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col5 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row-1.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ .hs.row-1.col5:checked ~ .hs.row-1.col6:checked ~ .hs.row-1.col7:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row-1.col3 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked
+~ .hs.row-1.col3:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row-1.col2 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col2:checked
+~ .hs.row-1.col3:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row-1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col4:checked
+~ .hs.row-1.col4:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.house.row1.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row3.col3,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row2.col3,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row2.col2,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row3.col3,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row2.col1,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row3.col2,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row3.col1,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col2:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col1,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3,
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col1,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col1,
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col2,
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col3,
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col4,
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col3,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col2:checked ~ div > div > shed > .row0.col2,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col2:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col2,
+.house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col2:checked ~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col6:checked ~ div > div > shed > .row-1.col7,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col6:checked ~ div > div > shed > .row-1.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col1,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row0.col1,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col1,
+.house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row0.col1,
+.house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row-1.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col1,
+.hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col2,
+.hs.row2.col2:checked ~ .house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col1,
+.hs.row2.col1:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col1:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col2,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col1:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row0.col5,
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row0.col5,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row1.col6,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row2.col7,
+.house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row2.col6,
+.house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row2.col7,
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row2.col6,
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col6,
+.hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col6:checked ~ .house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col7,
+.hs.row3.col6:checked ~ .house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row3.col7,
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row1.col7,
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row2.col7,
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row2.col7,
+.house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col7:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col7:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col7,
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col7,
+.house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col7,
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row3.col2,
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row4.col2,
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row2.col1,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col4:checked ~ div > div > shed > .row3.col5,
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col4:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked ~ div > div > shed > .row1.col6,
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked ~ div > div > shed > .row3.col6,
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .house.row1.col4:checked ~ div > div > shed > .row3.col7,
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .house.row1.col4:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > shed > .row1.col6,
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked ~ .hs.row1.col7:checked ~ .house.row0.col4:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked ~ .house.row0.col4:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked ~ .hs.row1.col7:checked ~ .house.row0.col4:checked ~ .hs.row0.col7:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked ~ .house.row0.col4:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked ~ .house.row0.col4:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .house.row0.col4:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col3:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col3:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col3:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .house.row0.col3:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .house.row0.col3:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+
+.hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .house.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .house.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row4.col7 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col6,
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row3.col5,
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row2.col7,
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row3.col6,
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > shed > .row3.col7,
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col5:checked ~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row3.col6,
+.hs.row3.col5:checked ~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked ~ .hs.row3.col5:checked ~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row4.col4,
+.hs.row4.col5:checked ~ .hs.row3.col5:checked ~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row4.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row3.col5:checked ~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row4.col7 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .hs.row3.col5:checked ~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col6:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row3.col7,
+.hs.row3.col6:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col6:checked ~ .hs.row3.col6:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col5,
+.hs.row4.col6:checked ~ .hs.row3.col6:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col7 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row3.col6:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col7:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row4.col7 {
+  opacity: 0;
+}
+
+.hs.row4.col7:checked ~ .hs.row3.col7:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row4.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .hs.row3.col7:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .hs.row3.col7:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row4.col4 {
+  opacity: 0;
+}
+
+.house.row3.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row0.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col0 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col2,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row1.col3,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col4,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row0.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row0.col7,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row2.col7,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row0.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row0.col7,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col7:checked ~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col7:checked ~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col7:checked ~ .hs.row0.col7:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col2,
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row1.col6,
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2,
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col2,
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row1.col5,
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row2.col1,
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked ~ div > div > shed > .row0.col2,
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col1,
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div
+> div
+> shed
+> .row2.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col7,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row3.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row1.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row3.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked
+~ div
+> div
+> shed
+> .row2.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col2,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col3:checked ~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col1,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row0.col4 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row1.col7:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col5 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row0.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row0.col3 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col3:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col2 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col4:checked
+~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+
+.house.row1.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row3.col3,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row2.col3,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row2.col2,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row3.col3,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row2.col1,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row3.col2,
+.hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row3.col1,
+.hs.row2.col1:checked ~ .hs.row2.col2:checked ~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col2:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col1,
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3,
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col1,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col1,
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col2,
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col3,
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col4,
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked ~ div > div > house > .row1.col2,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col3,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col2:checked ~ div > div > house > .row0.col2,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col2:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col2,
+.house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row-1.col2:checked ~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col6:checked ~ div > div > house > .row-1.col7,
+.house.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row-1.col6:checked ~ div > div > house > .row-1.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col1,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row0.col1,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col1,
+.house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row0.col1,
+.house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row-1.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row-1.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col1,
+.hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked ~ .house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col2,
+.hs.row2.col2:checked ~ .house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row2.col1:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col1,
+.hs.row2.col1:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col1:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col2,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row2.col1:checked ~ .house.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row0.col5,
+.hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .house.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row0.col5,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row1.col6,
+.hs.row2.col3:checked ~ .house.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row2.col7,
+.house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row2.col6,
+.house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row2.col7,
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row2.col6,
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col6,
+.hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col6:checked ~ .house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col7,
+.hs.row3.col6:checked ~ .house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row3.col7,
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row1.col7,
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row2.col7,
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row2.col7,
+.house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col7:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col7:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col7,
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col7,
+.house.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col7,
+.house.row2.col4:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row2.col2:checked ~ .house.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row3.col2,
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row4.col2,
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row2.col1,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row2.col3:checked ~ .house.row2.col4:checked ~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col4:checked ~ div > div > house > .row3.col5,
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .house.row1.col4:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked ~ div > div > house > .row1.col6,
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked ~ div > div > house > .row3.col6,
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .house.row1.col4:checked ~ div > div > house > .row3.col7,
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .house.row1.col4:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > house > .row1.col6,
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked ~ .house.row0.col4:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked ~ .hs.row1.col7:checked ~ .house.row0.col4:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked ~ .house.row0.col4:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col4:checked ~ .hs.row1.col7:checked ~ .house.row0.col4:checked ~ .hs.row0.col7:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked ~ .house.row0.col4:checked ~ .hs.row0.col6:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked ~ .house.row0.col4:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ .house.row0.col4:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col3:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col3:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .house.row0.col3:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .house.row0.col3:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .house.row0.col3:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+
+.hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .house.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .house.row0.col4:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row4.col7 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row2.col6,
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row3.col5,
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row2.col7,
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row3.col6,
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > house > .row3.col7,
+.house.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col5:checked ~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row3.col6,
+.hs.row3.col5:checked ~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked ~ .hs.row3.col5:checked ~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row4.col4,
+.hs.row4.col5:checked ~ .hs.row3.col5:checked ~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row4.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row3.col5:checked ~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row4.col7 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .hs.row3.col5:checked ~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ .house.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col6:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row3.col7,
+.hs.row3.col6:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col6:checked ~ .hs.row3.col6:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col5,
+.hs.row4.col6:checked ~ .hs.row3.col6:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col7 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row3.col6:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col7:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row4.col7 {
+  opacity: 1;
+}
+
+.hs.row4.col7:checked ~ .hs.row3.col7:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row4.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .hs.row3.col7:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .hs.row3.col7:checked ~ .house.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row4.col4 {
+  opacity: 1;
+}
+
+.house.row3.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col2:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row0.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col0 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row2.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col2,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row1.col3,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col4,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row0.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > house > .row0.col7,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row2.col7,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > house > .row0.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > house > .row0.col7,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ .hs.row0.col6:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col7:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col7:checked ~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col7:checked ~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .hs.row1.col7:checked ~ .hs.row0.col7:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col2,
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row1.col6,
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col5:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col2,
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col2,
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row1.col5,
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked ~ .hs.row0.col3:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked ~ .hs.row0.col1:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row2.col1,
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked ~ div > div > house > .row0.col2,
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col1,
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked ~ .hs.row0.col2:checked ~ .hs.row0.col3:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div
+> div
+> house
+> .row2.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col7:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col7,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row3.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > house > .row1.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > house > .row3.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked
+~ div
+> div
+> house
+> .row2.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col2,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col3:checked ~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row0.col1:checked
+~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col1,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row0.col4 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col6,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row1.col7:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col7:checked
+~ .hs.row0.col4:checked
+~ .hs.row0.col5:checked
+~ .hs.row0.col6:checked
+~ .hs.row0.col7:checked
+~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col5 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row0.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ .hs.row0.col5:checked ~ .hs.row0.col6:checked ~ .hs.row0.col7:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row0.col3 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked
+~ .hs.row0.col3:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col2 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col2:checked
+~ .hs.row0.col3:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row0.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col4:checked
+~ .hs.row0.col4:checked
+~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+
+.house.row2.col4:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row4.col3,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row3.col3,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row3.col2,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row4.col3,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row3.col1,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row4.col2,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row4.col1,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col2:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col1,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3,
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col1,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row5.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col2 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col2 {
+  opacity: 0;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col3 {
+  opacity: 0;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col4 {
+  opacity: 0;
+}
+
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col1,
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col2,
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col3 {
+  opacity: 0;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col4 {
+  opacity: 0;
+}
+
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col3,
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col4,
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col2 {
+  opacity: 0;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col3:checked ~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col3:checked ~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row5.col2:checked ~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col3:checked
+~ .house.row4.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked ~ div > div > shed > .row2.col2,
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col3,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col2:checked ~ div > div > shed > .row1.col2,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+
+.house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col2:checked ~ div > div > shed > .row0.col2,
+.house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col2:checked ~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col6:checked ~ div > div > shed > .row0.col7,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col6:checked ~ div > div > shed > .row0.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row3.col1,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row1.col1,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+
+.house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col4:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row2.col1,
+.house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col4:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row1.col1,
+.house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col4:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row0.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row3.col1,
+.hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row3.col2,
+.hs.row3.col2:checked ~ .house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col2 {
+  opacity: 0;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row3.col1,
+.hs.row3.col1:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col1:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col2,
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col1:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col5,
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col5,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row2.col6,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row3.col7,
+.house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row3.col6,
+.house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col6 {
+  opacity: 0;
+}
+
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row3.col7,
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row3.col6,
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row4.col7 {
+  opacity: 0;
+}
+
+.hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row4.col6,
+.hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col6:checked ~ .house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col7,
+.hs.row4.col6:checked ~ .house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row4.col7,
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row4.col6 {
+  opacity: 0;
+}
+
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row2.col7,
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ div > div > shed > .row3.col7,
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+
+.house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row3.col7,
+.house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row4.col7 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col7:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col7:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > shed > .row4.col6 {
+  opacity: 0;
+}
+
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col7,
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col7,
+.house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col7,
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row4.col3 {
+  opacity: 0;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row4.col2,
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row5.col2,
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row4.col1 {
+  opacity: 0;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row3.col1,
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > shed > .row5.col1 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .house.row2.col4:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col4:checked ~ div > div > shed > .row4.col5,
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col4:checked ~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .house.row2.col4:checked ~ div > div > shed > .row2.col6,
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .house.row2.col4:checked ~ div > div > shed > .row4.col6,
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .house.row2.col4:checked ~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .house.row2.col4:checked ~ div > div > shed > .row4.col7,
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .house.row2.col4:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > shed > .row2.col6,
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked ~ .hs.row2.col7:checked ~ .house.row1.col4:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked ~ .hs.row2.col7:checked ~ .house.row1.col4:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .house.row1.col4:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col3:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col3:checked ~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col3:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+
+.hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row5.col7 {
+  opacity: 0;
+}
+
+.house.row3.col4:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row3.col6,
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row4.col5,
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > shed > .row3.col7,
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > shed > .row4.col6,
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ div > div > shed > .row4.col7,
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+
+.hs.row4.col5:checked ~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row4.col6,
+.hs.row4.col5:checked ~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row5.col5 {
+  opacity: 0;
+}
+
+.hs.row5.col5:checked ~ .hs.row4.col5:checked ~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row5.col4,
+.hs.row5.col5:checked ~ .hs.row4.col5:checked ~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row5.col6 {
+  opacity: 0;
+}
+
+.hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row4.col5:checked ~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row5.col7 {
+  opacity: 0;
+}
+
+.hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row5.col7:checked
+~ .hs.row4.col5:checked ~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row4.col7 {
+  opacity: 0;
+}
+
+.hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row5.col7:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col7:checked
+~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+
+.hs.row4.col6:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > shed > .row4.col7,
+.hs.row4.col6:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > shed > .row5.col6 {
+  opacity: 0;
+}
+
+.hs.row5.col6:checked ~ .hs.row4.col6:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > shed > .row5.col5,
+.hs.row5.col6:checked ~ .hs.row4.col6:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > shed > .row5.col7 {
+  opacity: 0;
+}
+
+.hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row4.col6:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > shed > .row5.col4 {
+  opacity: 0;
+}
+
+.hs.row4.col7:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ div > div > shed > .row5.col7 {
+  opacity: 0;
+}
+
+.hs.row5.col7:checked ~ .hs.row4.col7:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ div > div > shed > .row5.col6 {
+  opacity: 0;
+}
+
+.hs.row5.col6:checked
+~ .hs.row5.col7:checked
+~ .hs.row4.col7:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ div > div > shed > .row5.col5 {
+  opacity: 0;
+}
+
+.hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row5.col7:checked
+~ .hs.row4.col7:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ div > div > shed > .row5.col4 {
+  opacity: 0;
+}
+
+.house.row4.col4:checked ~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row1.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col0 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col5 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row3.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col2,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row4.col5 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row2.col3,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col4,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row1.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col7,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > shed > .row3.col7,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row1.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col7,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col7:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col7:checked ~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col7:checked ~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col7:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col3 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row3.col2,
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row2.col6,
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row2.col2,
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2,
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row2.col5,
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked ~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row3.col1,
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > shed > .row2.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked ~ div > div > shed > .row1.col2,
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked ~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col1,
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div
+> div
+> shed
+> .row3.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col7:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col7:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col5 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row2.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row2.col7,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row4.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > shed > .row2.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > shed > .row4.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > shed > .row3.col6 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked
+~ div
+> div
+> shed
+> .row3.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row2.col3 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row2.col2,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col3:checked ~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row2.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row3.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row2.col1,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > shed > .row1.col4 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row2.col7:checked ~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row3.col6:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > shed > .row3.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col5 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > shed > .row1.col6 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row1.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > shed > .row2.col6 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > shed > .row2.col7 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row1.col3 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col3:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col2 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row1.col1 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > shed > .row2.col4 {
+  opacity: 0;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col4:checked
+~ div > div > shed > .row3.col4 {
+  opacity: 0;
+}
+
+.house.row2.col4:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row4.col3,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row3.col3,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row3.col2,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row4.col3,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row3.col1,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row4.col2,
+.hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row4.col1,
+.hs.row3.col1:checked ~ .hs.row3.col2:checked ~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col2:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col1,
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3,
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col1,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col3:checked ~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row5.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col2 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.hs.row5.col1:checked ~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col2 {
+  opacity: 1;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col3 {
+  opacity: 1;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col4 {
+  opacity: 1;
+}
+
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col1,
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col2,
+.hs.row5.col2:checked ~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col3 {
+  opacity: 1;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col2:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col4 {
+  opacity: 1;
+}
+
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col3,
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col4,
+.hs.row5.col3:checked ~ .hs.row4.col3:checked ~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col2 {
+  opacity: 1;
+}
+
+.hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col3:checked ~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col3:checked ~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row5.col2:checked ~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.hs.row5.col1:checked
+~ .hs.row5.col2:checked
+~ .hs.row5.col3:checked
+~ .hs.row4.col1:checked
+~ .hs.row4.col3:checked
+~ .house.row4.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked ~ div > div > house > .row2.col2,
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col3,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col2:checked ~ div > div > house > .row1.col2,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row1.col2:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+
+.house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col2:checked ~ div > div > house > .row0.col2,
+.house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row0.col2:checked ~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col6:checked ~ div > div > house > .row0.col7,
+.house.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row0.col6:checked ~ div > div > house > .row0.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row3.col1,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row1.col1,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+
+.house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col4:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row2.col1,
+.house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col4:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row1.col1,
+.house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row0.col4:checked
+~ .hs.row1.col4:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row0.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row3.col1,
+.hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked ~ .house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col2,
+.hs.row3.col2:checked ~ .house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col2 {
+  opacity: 1;
+}
+
+.hs.row3.col1:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col1,
+.hs.row3.col1:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col1:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col2,
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row3.col1:checked ~ .house.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col5,
+.hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .house.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col5,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row2.col6,
+.hs.row3.col3:checked ~ .house.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row3.col7,
+.house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row3.col6,
+.house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col6 {
+  opacity: 1;
+}
+
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row3.col7,
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row3.col6,
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row4.col7 {
+  opacity: 1;
+}
+
+.hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row4.col6,
+.hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col6:checked ~ .house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col7,
+.hs.row4.col6:checked ~ .house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row4.col7,
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row4.col6 {
+  opacity: 1;
+}
+
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row2.col7,
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ div > div > house > .row3.col7,
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+
+.house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row3.col7,
+.house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row4.col7 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked
+~ .hs.row4.col6:checked
+~ .hs.row4.col7:checked
+~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col7:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col7:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col7:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ div > div > house > .row4.col6 {
+  opacity: 1;
+}
+
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col7,
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col7,
+.house.row3.col4:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col7,
+.house.row3.col4:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked ~ .hs.row3.col2:checked ~ .house.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row4.col3 {
+  opacity: 1;
+}
+
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row4.col2,
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row5.col2,
+.hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row4.col1 {
+  opacity: 1;
+}
+
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row3.col1,
+.hs.row4.col1:checked
+~ .hs.row4.col2:checked
+~ .hs.row4.col3:checked
+~ .hs.row3.col3:checked ~ .house.row3.col4:checked ~ div > div > house > .row5.col1 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .house.row2.col4:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col4:checked ~ div > div > house > .row4.col5,
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .house.row2.col4:checked ~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .house.row2.col4:checked ~ div > div > house > .row2.col6,
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .house.row2.col4:checked ~ div > div > house > .row4.col6,
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .house.row2.col4:checked ~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .house.row2.col4:checked ~ div > div > house > .row4.col7,
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .house.row2.col4:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > house > .row2.col6,
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked ~ .house.row1.col4:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked ~ .hs.row2.col7:checked ~ .house.row1.col4:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col4:checked ~ .hs.row2.col7:checked ~ .house.row1.col4:checked ~ .hs.row1.col7:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked ~ .house.row1.col4:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ .house.row1.col4:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col3:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col3:checked ~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .house.row1.col3:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+
+.hs.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col3:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+
+.hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.hs.row3.col6:checked ~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ .house.row1.col4:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row5.col7 {
+  opacity: 1;
+}
+
+.house.row3.col4:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row3.col6,
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row4.col5,
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > house > .row3.col7,
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > house > .row4.col6,
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ div > div > house > .row4.col7,
+.house.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+
+.hs.row4.col5:checked ~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row4.col6,
+.hs.row4.col5:checked ~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row5.col5 {
+  opacity: 1;
+}
+
+.hs.row5.col5:checked ~ .hs.row4.col5:checked ~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row5.col4,
+.hs.row5.col5:checked ~ .hs.row4.col5:checked ~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row5.col6 {
+  opacity: 1;
+}
+
+.hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row4.col5:checked ~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row5.col7 {
+  opacity: 1;
+}
+
+.hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row5.col7:checked
+~ .hs.row4.col5:checked ~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row4.col7 {
+  opacity: 1;
+}
+
+.hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row5.col7:checked
+~ .hs.row4.col5:checked
+~ .hs.row4.col7:checked
+~ .house.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+
+.hs.row4.col6:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > house > .row4.col7,
+.hs.row4.col6:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > house > .row5.col6 {
+  opacity: 1;
+}
+
+.hs.row5.col6:checked ~ .hs.row4.col6:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > house > .row5.col5,
+.hs.row5.col6:checked ~ .hs.row4.col6:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > house > .row5.col7 {
+  opacity: 1;
+}
+
+.hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row4.col6:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ div > div > house > .row5.col4 {
+  opacity: 1;
+}
+
+.hs.row4.col7:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ div > div > house > .row5.col7 {
+  opacity: 1;
+}
+
+.hs.row5.col7:checked ~ .hs.row4.col7:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ div > div > house > .row5.col6 {
+  opacity: 1;
+}
+
+.hs.row5.col6:checked
+~ .hs.row5.col7:checked
+~ .hs.row4.col7:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ div > div > house > .row5.col5 {
+  opacity: 1;
+}
+
+.hs.row5.col5:checked
+~ .hs.row5.col6:checked
+~ .hs.row5.col7:checked
+~ .hs.row4.col7:checked ~ .house.row3.col4:checked
+~ .hs.row3.col5:checked
+~ .hs.row3.col6:checked
+~ .hs.row3.col7:checked
+~ div > div > house > .row5.col4 {
+  opacity: 1;
+}
+
+.house.row4.col4:checked ~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col2:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row1.col2:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col0 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col5 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row3.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col2,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col3:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ div > div > house > .row2.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ div > div > house > .row4.col5 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row2.col3,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col4,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row1.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col7,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > house > .row3.col7,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ div > div > house > .row1.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col7,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row2.col6:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col7:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col7:checked ~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col7:checked ~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col5:checked ~ .hs.row3.col6:checked ~ .hs.row3.col7:checked ~ .hs.row2.col7:checked ~ .hs.row1.col7:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col3 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row3.col2,
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row2.col6,
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col5:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ div > div > house > .row2.col2,
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col2,
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row2.col5,
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col3:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked ~ .hs.row1.col3:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked ~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col1:checked
+~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col1:checked ~ .hs.row1.col1:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row3.col1,
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ div > div > house > .row2.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked ~ div > div > house > .row1.col2,
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked ~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col1,
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col2:checked
+~ .hs.row3.col3:checked
+~ .hs.row3.col4:checked
+~ .hs.row2.col2:checked ~ .hs.row1.col2:checked ~ .hs.row1.col3:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col6:checked
+~ div
+> div
+> house
+> .row3.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col7:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col6:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row3.col7:checked
+~ .hs.row2.col4:checked
+~ .hs.row2.col5:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col5 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row2.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col7:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row2.col7,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row4.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > house > .row2.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > house > .row4.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ div > div > house > .row3.col6 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col5:checked ~ .hs.row2.col6:checked ~ .hs.row2.col7:checked
+~ div
+> div
+> house
+> .row3.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row2.col3 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row2.col2,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col3:checked ~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row2.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ .hs.row1.col1:checked
+~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row3.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row2.col1,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col1:checked
+~ .hs.row2.col2:checked
+~ .hs.row2.col3:checked
+~ .hs.row2.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ div > div > house > .row1.col4 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col6,
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row2.col7:checked ~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col6:checked
+~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row3.col6:checked
+~ .hs.row2.col6:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col7:checked
+~ .hs.row1.col4:checked
+~ .hs.row1.col5:checked
+~ .hs.row1.col6:checked
+~ .hs.row1.col7:checked
+~ div > div > house > .row3.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col5 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ div > div > house > .row1.col6 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row1.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ div > div > house > .row2.col6 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ .hs.row1.col5:checked ~ .hs.row1.col6:checked ~ .hs.row1.col7:checked ~ div > div > house > .row2.col7 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row1.col3 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked
+~ .hs.row1.col3:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col2 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col2:checked
+~ .hs.row1.col3:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row1.col1 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row1.col4:checked ~ div > div > house > .row2.col4 {
+  opacity: 1;
+}
+.house.row4.col4:checked ~ .hs.row3.col4:checked ~ .hs.row2.col4:checked ~ .hs.row2.col4:checked
+~ .hs.row1.col4:checked
+~ div > div > house > .row3.col4 {
+  opacity: 1;
+}
+
+.hs.row1.col1:checked ~ div > div > house > .row1.col1.col3 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row1.col1:checked ~ div > div > house > .row1.col1.col3 > i:nth-of-type(4):after, .hs.row1.col1:checked ~ div > div > house > .row1.col1.col3 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row1.col2:checked ~ div > div > house > .row1.col2.col2 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row1.col2:checked ~ div > div > house > .row1.col2.col2 > i:nth-of-type(4):after, .hs.row1.col2:checked ~ div > div > house > .row1.col2.col2 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row1.col3:checked ~ div > div > house > .row1.col3.col4 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row1.col3:checked ~ div > div > house > .row1.col3.col4 > i:nth-of-type(4):after, .hs.row1.col3:checked ~ div > div > house > .row1.col3.col4 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row1.col4:checked ~ div > div > house > .row1.col4.col3 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row1.col4:checked ~ div > div > house > .row1.col4.col3 > i:nth-of-type(4):after, .hs.row1.col4:checked ~ div > div > house > .row1.col4.col3 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row2.col1:checked ~ div > div > house > .row2.col1.col2 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row2.col1:checked ~ div > div > house > .row2.col1.col2 > i:nth-of-type(4):after, .hs.row2.col1:checked ~ div > div > house > .row2.col1.col2 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row2.col2:checked ~ div > div > house > .row2.col2.col2 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row2.col2:checked ~ div > div > house > .row2.col2.col2 > i:nth-of-type(4):after, .hs.row2.col2:checked ~ div > div > house > .row2.col2.col2 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row2.col3:checked ~ div > div > house > .row2.col3.col2 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row2.col3:checked ~ div > div > house > .row2.col3.col2 > i:nth-of-type(4):after, .hs.row2.col3:checked ~ div > div > house > .row2.col3.col2 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row2.col4:checked ~ div > div > house > .row2.col4.col3 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row2.col4:checked ~ div > div > house > .row2.col4.col3 > i:nth-of-type(4):after, .hs.row2.col4:checked ~ div > div > house > .row2.col4.col3 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row3.col1:checked ~ div > div > house > .row3.col1.col2 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row3.col1:checked ~ div > div > house > .row3.col1.col2 > i:nth-of-type(4):after, .hs.row3.col1:checked ~ div > div > house > .row3.col1.col2 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row3.col2:checked ~ div > div > house > .row3.col2.col2 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row3.col2:checked ~ div > div > house > .row3.col2.col2 > i:nth-of-type(4):after, .hs.row3.col2:checked ~ div > div > house > .row3.col2.col2 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row3.col3:checked ~ div > div > house > .row3.col3.col3 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row3.col3:checked ~ div > div > house > .row3.col3.col3 > i:nth-of-type(4):after, .hs.row3.col3:checked ~ div > div > house > .row3.col3.col3 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row3.col4:checked ~ div > div > house > .row3.col4.col4 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row3.col4:checked ~ div > div > house > .row3.col4.col4 > i:nth-of-type(4):after, .hs.row3.col4:checked ~ div > div > house > .row3.col4.col4 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row4.col1:checked ~ div > div > house > .row4.col1.col4 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row4.col1:checked ~ div > div > house > .row4.col1.col4 > i:nth-of-type(4):after, .hs.row4.col1:checked ~ div > div > house > .row4.col1.col4 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row4.col2:checked ~ div > div > house > .row4.col2.col2 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row4.col2:checked ~ div > div > house > .row4.col2.col2 > i:nth-of-type(4):after, .hs.row4.col2:checked ~ div > div > house > .row4.col2.col2 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row4.col3:checked ~ div > div > house > .row4.col3.col1 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row4.col3:checked ~ div > div > house > .row4.col3.col1 > i:nth-of-type(4):after, .hs.row4.col3:checked ~ div > div > house > .row4.col3.col1 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.hs.row4.col4:checked ~ div > div > house > .row4.col4.col3 > i:nth-of-type(4) {
+  background: #ff7700;
+  box-shadow: inset 0 0 0 0.5rem rgba(79, 1, 14, 0.3), inset 0 0 0.5rem rgba(79, 1, 14, 0.9), inset 0 0 0 0.5rem #20112a, inset 0 0 1rem 1rem rgba(79, 1, 14, 0.9), inset 1rem 0 0 #bc592f, inset -1.25rem 0 0 #bc592f, inset 0 -2rem 0 yellow, inset 0 -3.5rem 0 #ffa200, 0 0 2rem yellow;
+}
+.hs.row4.col4:checked ~ div > div > house > .row4.col4.col3 > i:nth-of-type(4):after, .hs.row4.col4:checked ~ div > div > house > .row4.col4.col3 > i:nth-of-type(4):before {
+  background: #20112a;
+}
+
+.lh {
+  pointer-events: none;
+  perspective: 30rem;
+  perspective-origin: 50% -5rem;
+  transform: translate3d(0, 0, -100rem) scale(0);
+  opacity: 0;
+}
+
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div.lh {
+  transform: translate3d(0, 0, -100rem) scale(1);
+  /* animation: lightson $timer linear infinite;*/
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div.lh light {
+  top: -12rem;
+  left: -6.25rem;
+  transform: scaleX(3) rotateY(0);
+  /*   animation: light 8s linear infinite;*/
+  filter: blur(0.1rem);
+  opacity: 0.5;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div.lh light, .hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div.lh light:before, .hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div.lh light:after {
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 244, 102, 0.5), rgba(255, 255, 255, 0));
+  width: 100%;
+  height: 5rem;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div.lh light:before {
+  transform: rotate(15deg) rotateY(-5deg);
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div.lh light:after {
+  transform: rotate(-15deg) rotateY(5deg);
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div.lh lens {
+  top: -12rem;
+  left: -6.25rem;
+  width: 100%;
+  height: 5rem;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div.lh lens:before, .hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div.lh lens:after {
+  height: 5rem;
+  border-radius: 50%;
+  right: 0;
+  margin: auto;
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div.lh lens:before {
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(252, 246, 165, 0.5), rgba(255, 255, 255, 0));
+  width: 100%;
+  transform: scaleX(3) rotateY(0);
+  opacity: 0.25;
+  filter: blur(0.1rem);
+}
+.hs.house.row4.col1:not(:checked)
+~ .hs.house.row4.col2:checked
+~ .hs.house.row4.col3:not(:checked)
+~ .hs.house.row3.col1:not(:checked)
+~ .hs.shed.row3.col2:checked
+~ .hs.house.row3.col3:not(:checked)
+~ .hs.house.row2.col1:not(:checked)
+~ .hs.house.row2.col2:checked
+~ .hs.house.row2.col3:not(:checked)
+~ .hs.house.row1.col1:not(:checked)
+~ .hs.shed.row1.col2:checked
+~ .hs.house.row1.col3:not(:checked)
+~ div.lh lens:after {
+  width: 5rem;
+  background: radial-gradient(#fcf6a5, rgba(255, 255, 255, 0));
+  opacity: 0.75;
+  box-shadow: 60rem 0 15rem #fcf6a5, -60rem 0 15rem #fcf6a5, 0 0 3rem #fcf6a5, inset 0 0 0 #fcf6a5;
+}
+
+div.lh {
+  animation: lightson 400s linear infinite;
+}
+div.lh light {
+  animation: light 8s linear infinite;
+}
+div.lh lens:before {
+  animation: light 8s linear infinite;
+}
+div.lh lens:after {
+  animation: light2 8s ease-in-out infinite;
+}
+
+@keyframes light {
+  100% {
+    transform: scaleX(3) rotateY(-360deg);
+  }
+}
+@keyframes lightson {
+  20%,
+  80% {
+    opacity: 0;
+  }
+  25%,
+  75% {
+    opacity: 1;
+  }
+}
+@keyframes light2 {
+  22%,
+  27%,
+  72%,
+  77% {
+    box-shadow: 0rem 0 15rem #fcf6a5, 0rem 0 15rem #fcf6a5, 0 0 3rem #fcf6a5, inset 0 0 0 0 #fcf6a5;
+  }
+  24%,
+  74% {
+    box-shadow: 0rem 0 15rem #fcf6a5, 0rem 0 15rem #fcf6a5, 0 0 5rem 40rem rgba(252, 246, 165, 0.25), inset 0 0 0 2.5rem #fcf6a5;
+  }
+  50% {
+    box-shadow: -60rem 0 15rem #fcf6a5, 60rem 0 15rem #fcf6a5, 0 0 3rem #fcf6a5, inset 0 0 0 0 #fcf6a5;
+  }
+}
+#graphics {
+  top: 1rem;
+  left: auto;
+  right: 1rem;
+  font-family: Telefon, Sans-Serif;
+  font-size: 1.4rem;
+  z-index: 1000;
+  letter-spacing: 0.1rem;
+  color: #fff;
+  line-height: 1.5;
+  max-height: 2.5rem;
+  overflow: hidden;
+}
+#graphics label {
+  display: flex;
+  align-content: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 1rem;
+  cursor: pointer;
+  transition: box-shadow 0.2s ease-in-out;
+  box-shadow: 0 0 0 1rem rgba(255, 255, 255, 0), inset 0 0 0 0 rgba(255, 255, 255, 0.2);
+}
+#graphics label:not(:nth-of-type(1)):hover {
+  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), inset 0 0 0 2rem rgba(255, 255, 255, 0.2);
+}
+#graphics * {
+  position: static;
+}
+
+#gfxmenu:checked ~ #graphics {
+  max-height: 10rem;
+}
+
+#poor:checked ~ colour > div > div > house > label > i:nth-of-type(1),
+#poor:checked ~ colour > div > div > shed > label > i:nth-of-type(1),
+#poor:checked ~ colour > div > lens,
+#poor:checked ~ colour > water:before,
+#poor:checked ~ colour water:after {
+  display: none;
+}
+
+#poor:checked ~ colour > div > div.main {
+  -webkit-box-reflect: none;
+}
+
+#poor:checked ~ sky > time {
+  opacity: 0;
+}
+
+#poor:checked ~ text > welldone,
+#poor:checked ~ text > gameover {
+  box-shadow: none;
+}
+
+#good:checked ~ x > [for="good"],
+#poor:checked ~ x > [for="poor"] {
+  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), inset 0 0 0 2rem rgba(255, 255, 255, 0.1);
+}
+#good:checked ~ x > [for="good"]:before,
+#poor:checked ~ x > [for="poor"]:before {
+  content: "✓";
+  position: static;
+}
+
+#poor:checked ~ colour > div > div > shed > label:after, #poor:checked ~ colour > div > div > shed > label *:after,
+#poor:checked ~ colour > div > div > house > label:after,
+#poor:checked ~ colour > div > div > house > label *:after {
+  animation: none !important;
+}
+#poor:checked ~ colour > div > div > shed > label:before, #poor:checked ~ colour > div > div > shed > label *:before,
+#poor:checked ~ colour > div > div > house > label:before,
+#poor:checked ~ colour > div > div > house > label *:before {
+  animation: none !important;
+}
+
+[for="gfxmenu"]:after {
+  border-bottom: 0.1rem solid #fff;
+  border-right: 0.1rem solid #fff;
+  transform: rotate(45deg) scaleY(1);
+  position: relative;
+  width: 0.6rem;
+  height: 0.6rem;
+  margin-left: 0.4rem;
+  top: 0.5rem;
+  transition: all 0.2s ease-in-out;
+}
+
+#gfxmenu:checked ~ x > [for="gfxmenu"]:after {
+  transform: rotate(-45deg) scaleY(-1);
+}
+
+script {
+  display: none;
+}
\ No newline at end of file
diff --git a/a-pure-css-gameyou-must-build-a-lighthouse/license.txt b/a-pure-css-gameyou-must-build-a-lighthouse/license.txt
new file mode 100644
index 0000000..68b9c64
--- /dev/null
+++ b/a-pure-css-gameyou-must-build-a-lighthouse/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Ben Evans (https://codepen.io/ivorjetski/pen/OJXbvdL)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/a-pure-css-gameyou-must-build-a-lighthouse/src/index.html b/a-pure-css-gameyou-must-build-a-lighthouse/src/index.html
new file mode 100644
index 0000000..3bdb462
--- /dev/null
+++ b/a-pure-css-gameyou-must-build-a-lighthouse/src/index.html
@@ -0,0 +1,199 @@
+    <input type="checkbox" id="gfxmenu" />
+    <input type="radio" name="gfx" id="good" checked />
+    <input type="radio" name="gfx" id="poor" />
+    <x id="graphics">
+      <label class="gfx" for="gfxmenu">Graphics Quality</label>
+      <label class="gfx" for="good">Very Pretty</label>
+      <label class="gfx" for="poor">Quite Pretty</label>
+    </x>
+
+    <sky><time>
+        <sun></sun>
+      </time></sky>
+    <stars><i></i></stars>
+
+    <sunset></sunset>
+    <colour>
+
+      <input type="radio" name="r23" id="cb23" class="hs house row4 col1" />
+      <input type="radio" name="r23" id="cb23s" class="hs shed row4 col1" />
+      <input type="radio" name="r24" id="cb24" class="hs house row4 col2" />
+      <input type="radio" name="r24" id="cb24s" class="hs shed row4 col2" />
+      <input type="radio" name="r25" id="cb25" class="hs house row4 col3" />
+      <input type="radio" name="r23" id="cb25s" class="hs shed row4 col3" />
+      <input type="radio" name="r26" id="cb26" class="hs house row4 col4" />
+      <input type="radio" name="r26" id="cb26s" class="hs shed row4 col4" />
+      <br />
+      <input type="radio" name="r19" id="cb19" class="hs house row3 col1" />
+      <input type="radio" name="r19" id="cb19s" class="hs shed row3 col1" />
+      <input type="radio" name="r20" id="cb20" class="hs house row3 col2" />
+      <input type="radio" name="r20" id="cb20s" class="hs shed row3 col2" />
+      <input type="radio" name="r21" id="cb21" class="hs house row3 col3" />
+      <input type="radio" name="r21" id="cb21s" class="hs shed row3 col3" />
+      <input type="radio" name="r22" id="cb22" class="hs house row3 col4" />
+      <input type="radio" name="r22" id="cb22s" class="hs shed row3 col4" />
+      <br />
+      <input type="radio" name="r15" id="cb15" class="hs house row2 col1" />
+      <input type="radio" name="r15" id="cb15s" class="hs shed row2 col1" />
+      <input type="radio" name="r16" id="cb16" class="hs house row2 col2" />
+      <input type="radio" name="r16" id="cb16s" class="hs shed row2 col2" />
+      <input type="radio" name="r17" id="cb17" class="hs house row2 col3" />
+      <input type="radio" name="r17" id="cb17s" class="hs shed row2 col3" checked />
+      <input type="radio" name="r18" id="cb18" class="hs house row2 col4" />
+      <input type="radio" name="r18" id="cb18s" class="hs shed row2 col4" />
+      <br />
+      <input type="radio" name="r11" id="cb11" class="hs house row1 col1" />
+      <input type="radio" name="r11" id="cb11s" class="hs shed row1 col1" />
+      <input type="radio" name="r12" id="cb12" class="hs house row1 col2" />
+      <input type="radio" name="r12" id="cb12s" class="hs shed row1 col2" />
+      <input type="radio" name="r13" id="cb13" class="hs house row1 col3" />
+      <input type="radio" name="r13" id="cb13s" class="hs shed row1 col3" />
+      <input type="radio" name="r14" id="cb14" class="hs house row1 col4" />
+      <input type="radio" name="r14" id="cb14s" class="hs shed row1 col4" />
+      <br />
+
+      <input type="radio" name="r23" id="ncb23" class="row4 col1" title="ncb23" />
+      <input type="radio" name="r24" id="ncb24" class="row4 col2" title="ncb24" />
+      <input type="radio" name="r25" id="ncb25" class="row4 col3" title="ncb25" />
+      <input type="radio" name="r26" id="ncb26" class="row4 col4" title="ncb26" />
+      <br />
+      <input type="radio" name="r19" id="ncb19" class="row3 col1" title="ncb19" />
+      <input type="radio" name="r20" id="ncb20" class="row3 col2" title="ncb20" />
+      <input type="radio" name="r21" id="ncb21" class="row3 col3" title="ncb21" />
+      <input type="radio" name="r22" id="ncb22" class="row3 col4" title="ncb22" />
+      <br />
+      <input type="radio" name="r15" id="ncb15" class="row2 col1" title="ncb15" />
+      <input type="radio" name="r16" id="ncb16" class="row2 col2" title="ncb16" />
+      <input type="radio" name="r17" id="ncb17" class="row2 col3" title="ncb17" />
+      <input type="radio" name="r18" id="ncb18" class="row2 col4" title="ncb18" />
+      <br />
+      <input type="radio" name="r11" id="ncb11" class="row1 col1" title="ncb11" />
+      <input type="radio" name="r12" id="ncb12" class="row1 col2" title="ncb12" />
+      <input type="radio" name="r13" id="ncb13" class="row1 col3" title="ncb13" />
+      <input type="radio" name="r14" id="ncb14" class="row1 col4" title="ncb14" />
+      <br />
+      <input type="radio" id="done" />
+
+      <div class="lh">
+        <light></light>
+      </div>
+      <div>
+        <div class="main">
+          <island></island>
+
+          <tree><i></i><i></i></tree>
+          <tree><i></i><i></i></tree>
+
+          <shed>
+            <label class="row1 col1 shedlabel" for="ncb11" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row1 col2 shedlabel" for="ncb12" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row1 col3 shedlabel" for="ncb13" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row1 col4 shedlabel" for="ncb14" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+
+            <label class="row2 col1 shedlabel" for="ncb15" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row2 col2 shedlabel" for="ncb16" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row2 col3 shedlabel" for="ncb17" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row2 col4 shedlabel" for="ncb18" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+
+            <label class="row3 col1 shedlabel" for="ncb19" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row3 col2 shedlabel" for="ncb20" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row3 col3 shedlabel" for="ncb21" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row3 col4 shedlabel" for="ncb22" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+          </shed>
+
+          <house>
+
+            <label class="row1 col1 houselabel" for="ncb11" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row1 col2 houselabel" for="ncb12" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row1 col3 houselabel" for="ncb13" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row1 col4 houselabel" for="ncb14" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+
+            <label class="row2 col1 houselabel" for="ncb15" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row2 col2 houselabel" for="ncb16" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row2 col3 houselabel" for="ncb17" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row2 col4 houselabel" for="ncb18" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+
+            <label class="row3 col1 houselabel" for="ncb19" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row3 col2 houselabel" for="ncb20" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row3 col3 houselabel" for="ncb21" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+            <label class="row3 col4 houselabel" for="ncb22" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
+
+            <label class="row4 col1 houselabel" for="ncb23" title="Tap to build"><i></i><i></i><i></i><i></i></label>
+            <label class="row4 col2 houselabel" for="ncb24" title="Tap to build"><i></i><i></i><i></i><i></i></label>
+            <label class="row4 col3 houselabel" for="ncb25" title="Tap to build"><i></i><i></i><i></i><i></i></label>
+            <label class="row4 col4 houselabel" for="ncb26" title="Tap to build"><i></i><i></i><i></i><i></i></label>
+          </house>
+
+          <hbtn>
+
+            <label class="row1 col1 buttons" for="cb11" title="Tap to build"></label>
+            <label class="row1 col2 buttons" for="cb12" title="Tap to build"></label>
+            <label class="row1 col3 buttons" for="cb13" title="Tap to build"></label>
+            <label class="row1 col4 buttons" for="cb14" title="Tap to build"></label>
+
+            <label class="row2 col1 buttons" for="cb15" title="Tap to build"></label>
+            <label class="row2 col2 buttons" for="cb16" title="Tap to build"></label>
+            <label class="row2 col3 buttons" for="cb17" title="Tap to build"></label>
+            <label class="row2 col4 buttons" for="cb18" title="Tap to build"></label>
+
+            <label class="row3 col1 buttons" for="cb19" title="Tap to build"></label>
+            <label class="row3 col2 buttons" for="cb20" title="Tap to build"></label>
+            <label class="row3 col3 buttons" for="cb21" title="Tap to build"></label>
+            <label class="row3 col4 buttons" for="cb22" title="Tap to build"></label>
+
+            <label class="row4 col1 buttons" for="cb23" title="Tap to build"></label>
+            <label class="row4 col2 buttons" for="cb24" title="Tap to build"></label>
+            <label class="row4 col3 buttons" for="cb25" title="Tap to build"></label>
+            <label class="row4 col4 buttons" for="cb26" title="Tap to build"></label>
+          </hbtn>
+
+          <sbtn>
+
+            <label class="row1 col1 buttons" for="cb11s" title="Tap to build"></label>
+            <label class="row1 col2 buttons" for="cb12s" title="Tap to build"></label>
+            <label class="row1 col3 buttons" for="cb13s" title="Tap to build"></label>
+            <label class="row1 col4 buttons" for="cb14s" title="Tap to build"></label>
+
+            <label class="row2 col1 buttons" for="cb15s" title="Tap to build"></label>
+            <label class="row2 col2 buttons" for="cb16s" title="Tap to build"></label>
+            <label class="row2 col3 buttons" for="cb17s" title="Tap to build"></label>
+            <label class="row2 col4 buttons" for="cb18s" title="Tap to build"></label>
+
+            <label class="row3 col1 buttons" for="cb19s" title="Tap to build"></label>
+            <label class="row3 col2 buttons" for="cb20s" title="Tap to build"></label>
+            <label class="row3 col3 buttons" for="cb21s" title="Tap to build"></label>
+            <label class="row3 col4 buttons" for="cb22s" title="Tap to build"></label>
+          </sbtn>
+          <grass></grass>
+        </div>
+      </div>
+      <water><i></i></water>
+
+      <div class="lh">
+        <lens></lens>
+      </div>
+
+      <text>
+        <welldone>
+          <label for="done">✕</label>
+          <p>NICE ONE!</p>
+          <p>You built a lighthouse before nightfall!</p>
+          <p>The ships and islanders are safe!</p>
+        </welldone>
+      </text>
+      <text>
+        <gameover>
+          <label for="done">✕</label>
+          <p>GAME OVER!</p>
+          <p>I'm afraid I have some very bad news...</p>
+          <p>A ship has crashed into your beautiful island.</p>
+          <p>Everybody is dead!</p>
+          <p>Soz! You should build a lighthouse.</p>
+          <a href="" title="Try Again">Try Again</a>
+        </gameover>
+      </text>
+    </colour>
+    <div class="ss">
+      <lens></lens>
+    </div>
+    <sig><i></i></sig>
\ No newline at end of file
diff --git a/a-pure-css-gameyou-must-build-a-lighthouse/src/script.js b/a-pure-css-gameyou-must-build-a-lighthouse/src/script.js
new file mode 100644
index 0000000..62370be
--- /dev/null
+++ b/a-pure-css-gameyou-must-build-a-lighthouse/src/script.js
@@ -0,0 +1,5 @@
+// 100% CSS. No artificial colours or ingredients.
+
+// First person to screenshot a lighthouse wins!
+
+// Your time starts now...
diff --git a/a-pure-css-gameyou-must-build-a-lighthouse/src/style.scss b/a-pure-css-gameyou-must-build-a-lighthouse/src/style.scss
new file mode 100644
index 0000000..4acfcc0
--- /dev/null
+++ b/a-pure-css-gameyou-must-build-a-lighthouse/src/style.scss
@@ -0,0 +1,7160 @@
+// ## setup
+$timer: 400s;
+
+$none: rgba(#fff, 0);
+$light: #fcf6a5;
+$sun: #ff7700;
+$base: #bc2f2f;
+$shadow: #4f010e;
+$smoke: #252529;
+$smoke2: #6f6f7a;
+$sky: #608b88;
+$stone: #a19372;
+$tre1: #683f44;
+$tre2: #20112a;
+
+.house.row3:checked,
+.shed.row3:checked {
+  & ~ div {
+    filter: hue-rotate(-20deg);
+  }
+}
+
+.house.row2:checked,
+.shed.row2:checked {
+  & ~ div {
+    filter: hue-rotate(-35deg);
+  }
+}
+
+.house.row1:checked,
+.shed.row1:checked {
+  & ~ div {
+    filter: hue-rotate(-50deg);
+  }
+}
+
+$r1: adjust-hue($base, random(50) + 5);
+$r15: adjust-hue($base, random(50) + 10);
+$r2: adjust-hue($base, random(50) - 30);
+$r3: darken($r2, 20%);
+$r4: adjust-hue($base, random(50) + 50);
+$r41: adjust-hue($base, random(50) + 51);
+$r42: adjust-hue($base, random(50) + 49);
+$r43: darken($r42, 10%);
+$shadow: rgba($shadow, 0.75);
+$ls: rgba($shadow, 0.3);
+$ds: rgba($shadow, 0.9);
+$dark: darken($r2, 20%);
+$background: lighten($base, 42%);
+$b1: lighten($base, 4%);
+$b2: lighten($r1, 4%);
+$b3: lighten($r2, 4%);
+$s1: lighten($stone, 4%);
+$sd: darken($stone, 10%);
+
+$tre3: lighten($tre1, 10%);
+$vls: rgba($tre1, 0.1);
+
+html {
+  font-size: 0.97vh;
+  width: 100%;
+  height: 100%;
+  background: $background;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(rgba($sky, 0.5), rgba(#fff, 0.75), $none);
+  box-shadow: inset 0 0 5rem 0 $smoke;
+
+  &,
+  *,
+  *:before,
+  *:after {
+    display: block;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    position: absolute;
+    content: "";
+  }
+}
+
+div,
+house,
+shed,
+hbtn,
+sbtn {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 50rem;
+  height: 50rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+
+  label {
+    width: calc(50rem / 4);
+    height: calc(50rem / 4);
+    position: relative;
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    display: inline;
+    cursor: pointer;
+    box-shadow: 0 0 0 2rem $none;
+
+    *,
+    *:before,
+    *:after {
+      transform: translate3d(0, 0, 0);
+      z-index: 1;
+      left: 0;
+      top: 0;
+      background: none;
+      border: none;
+      box-shadow: none;
+      pointer-events: none;
+    }
+
+    & > i:nth-of-type(1) {
+      &:before,
+      &:after {
+        filter: blur(0.5rem);
+        border: 1rem solid rgba($smoke2, 0.75);
+        width: 5rem;
+        height: 5rem;
+        background: $smoke2;
+        opacity: 0;
+        border-radius: 50%;
+        box-shadow: 2rem -1.5rem 0 1rem rgba($smoke2, 0.75),
+          //
+            3rem -2rem 0 1.5rem rgba($smoke2, 0.5);
+      }
+    }
+  }
+}
+
+colour {
+  width: 100%;
+  height: 100%;
+
+  input,
+  br {
+    position: relative;
+    display: inline-block;
+    opacity: 0.2;
+    top: 1rem;
+    left: 1rem;
+    transform: scale(0.75);
+    margin: -0.2rem;
+
+    @media (max-width: 900px) {
+      display: none;
+    }
+  }
+
+  input:checked {
+    opacity: 1;
+  }
+
+  br {
+    display: block;
+  }
+}
+
+input {
+  display: none;
+}
+
+div.main {
+  -webkit-box-reflect: below 4rem;
+}
+
+div.ss {
+  pointer-events: none;
+}
+
+sbtn {
+  height: calc(50rem - (50rem / 4));
+  bottom: auto;
+
+  label {
+    border: solid 1px rgba(#747474, 0.1);
+
+    &:nth-of-type(1) {
+      border-radius: 3rem 0 0 0;
+    }
+
+    &:nth-of-type(4) {
+      border-radius: 0 3rem 0 0;
+    }
+
+    &:hover {
+      border-color: #555;
+    }
+  }
+}
+
+hbtn label:nth-of-type(n + 12) {
+  border: solid 1px rgba(#747474, 0.1);
+
+  &:hover {
+    border-color: #555;
+  }
+}
+
+@keyframes smoke {
+  0% {
+    transform: scale(0.2) translate3d(0, 0, 0) rotate(-15deg);
+    opacity: 0.075;
+  }
+
+  50% {
+    transform: scale(1) translate3d(2rem, -4rem, 0) rotate(0);
+    opacity: 0.15;
+  }
+
+  100% {
+    transform: scale(2) translate3d(5rem, -5rem, 0) rotate(10deg);
+    opacity: 0;
+  }
+}
+
+//pretty
+island {
+  position: absolute;
+  top: 76rem;
+  top: 49.25rem;
+  left: -50%;
+  right: -50%;
+  margin: auto;
+  width: 80rem;
+  height: 5rem;
+  background: $r42;
+  border-radius: 55% 55% 45% 45%;
+}
+
+grass {
+  position: absolute;
+  z-index: 500;
+  top: 76rem;
+  top: 49.25rem;
+  left: -50%;
+  right: -50%;
+  margin: auto;
+  width: 80rem;
+  height: 5rem;
+  -webkit-box-reflect: below -5rem;
+  transform: skewX(0);
+
+  &:after,
+  &:before {
+    top: 0.75rem;
+    left: 0.6rem;
+    z-index: 100;
+    width: 0.5rem;
+    height: 1.75rem;
+    transform: skewY(60deg);
+    background: $r42;
+    box-shadow: 1rem -1.6rem 0 $r42,
+      //
+        2.1rem -3.6rem 0 $r42,
+      //
+        2.9rem -4.8rem 0 $r42,
+      //
+        4rem -7rem 0 $r42;
+    filter: drop-shadow(5rem -8.3rem 0 $r42) //
+      drop-shadow(10rem -17.3rem 0 $r42) //
+      drop-shadow(20rem -34.5rem 0 $r42) //
+      drop-shadow(40rem -69rem 0 $r42);
+  }
+
+  &:before {
+    transform: skewY(-60deg);
+    box-shadow: 1rem 1.6rem 0 $r42,
+      //
+        2.1rem 3.6rem 0 $r42,
+      //
+        2.9rem 4.8rem 0 $r42,
+      //
+        4rem 7rem 0 $r42;
+    filter: drop-shadow(5rem 8.3rem 0 $r42) //
+      drop-shadow(10rem 17.3rem 0 $r42) //
+      drop-shadow(20rem 34.5rem 0 $r42) //
+      drop-shadow(40rem 69rem 0 $r42);
+    left: 0;
+    top: 1.5rem;
+  }
+}
+
+@keyframes grass {
+  100% {
+    transform: skewX(5deg);
+  }
+}
+
+input:focus ~ div > div {
+  animation: thud 0.1s linear;
+}
+
+@keyframes thud {
+  0% {
+    transform: translate3d(0, 1rem, 0);
+  }
+
+  60% {
+    transform: translate3d(0, -0.5rem, 0);
+  }
+
+  80% {
+    transform: translate3d(0, 0.25rem, 0);
+  }
+}
+
+sig {
+  z-index: 500;
+  opacity: 0.2;
+
+  &,
+  * {
+    height: 9.25em;
+    overflow: hidden;
+    border-radius: 0.5em;
+  }
+
+  font-size: 0.5rem;
+  color: #000;
+  width: 10em;
+  top: auto;
+  left: auto;
+  bottom: 1em;
+  right: 1em;
+  transform: skewX(10deg) scaleY(0.45) rotate(2deg);
+
+  &:before,
+  *:before {
+    width: 5em;
+    height: 5em;
+    background: currentColor;
+    transform: translate3d(-2.5em, 0, 0) rotate(-45deg);
+    box-shadow: -3em 3em 0 0 currentColor;
+    border-radius: 0.5em 2em 0.5em 2em;
+  }
+
+  * {
+    width: 5em;
+    transform: translate3d(3.75em, 0, 0) scaleY(0.95);
+    display: block !important;
+
+    &:before {
+      transform: translate3d(-3em, -2em, 0) rotate(-45deg);
+      box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
+      border-radius: 0.5em;
+    }
+  }
+}
+
+text {
+  width: 95%;
+  max-width: 70rem;
+  bottom: 25%;
+  color: lighten($r1, 30%);
+  right: 0;
+  margin: auto;
+  height: 1rem;
+  font-size: 2.5rem;
+  text-align: center;
+  font-family: Telefon, Sans-Serif;
+  z-index: -1;
+  transform: scale(0);
+  font-weight: 100;
+  letter-spacing: 0.1rem;
+  opacity: 0;
+
+  welldone,
+  gameover {
+    box-shadow: 0 0 5rem $sun, inset 0 0 0 0.5rem #fff;
+    background: rgba($tre2, 0.95);
+    padding: 5rem;
+    border-radius: 5rem;
+    border: 1rem solid $tre2;
+  }
+
+  welldone {
+    display: none;
+  }
+
+  & * {
+    position: static;
+  }
+
+  p:nth-of-type(1) {
+    font-size: 4rem;
+  }
+
+  p:nth-of-type(odd) {
+    color: $r2;
+  }
+
+  label {
+    position: absolute;
+    left: auto;
+    right: 3rem;
+    top: 3rem;
+    color: $r2;
+    padding: 2rem;
+    border-radius: 2rem;
+    box-shadow: 0 0 1rem $none;
+    cursor: pointer;
+    transition: box-shadow 0.25s ease-in-out;
+    box-sizing: border-box;
+    line-height: 1;
+
+    &:hover,
+    &:focus {
+      box-shadow: 0 0 0.15rem #fff;
+    }
+  }
+
+  a {
+    padding: 0.5rem 1rem;
+    border-radius: 1rem;
+    text-decoration: none;
+    background: $r2;
+    color: $tre2;
+    box-shadow: 0 0 0 1rem $none, inset 0 0 0 0 rgba(#fff, 0.2);
+    transition: all 0.2s ease-in-out;
+
+    &:hover,
+    &:focus {
+      box-shadow: 0 0 0 0 rgba(#fff, 0.2), inset 0 0 0 3rem rgba(#fff, 0.2);
+    }
+  }
+}
+
+#done:checked ~ text {
+  transform: scale(0) !important;
+  transition: all 0.5s ease-in-out;
+  opacity: 0;
+}
+// ## sun
+colour > *:not(.lh):not(text) {
+  filter: hue-rotate(0deg) brightness(100%);
+  animation: set $timer linear infinite;
+}
+
+@media screen and (max-device-width: 480px) {
+  colour > *:not(.lh):not(text) {
+    animation: none;
+  }
+}
+
+@keyframes set {
+  15%,
+  85% {
+    filter: hue-rotate(0deg) brightness(100%);
+  }
+
+  30%,
+  70% {
+    filter: hue-rotate(-20deg) brightness(10%);
+  }
+
+  40%,
+  60% {
+    filter: hue-rotate(-40deg) brightness(50%);
+  }
+}
+
+@function stars($a) {
+  $random2: #f9b9c8;
+  $value: "#{random(100 + 100)}vmin #{random(60)}vmin 0 -.#{random(2)}rem "+$random2;
+
+  @for $i from 2 through $a {
+    $random2: adjust-hue(#8beffc, random(360));
+    $value: "#{$value} , #{random(100 + 100)}vmin #{random(60)}vmin 0 -.#{random(2)}rem "+$random2;
+  }
+
+  @return unquote($value);
+}
+
+$stars: stars(50);
+
+stars {
+  width: 220rem;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  animation: stars $timer linear infinite;
+  -webkit-box-reflect: below -50rem;
+  opacity: 0;
+  z-index: 0;
+
+  &:before {
+    width: 0.5rem;
+    height: 0.5rem;
+    box-shadow: $stars;
+    border-radius: 50%;
+    content: "";
+    position: absolute;
+    top: 5rem;
+    left: 5rem;
+  }
+
+  i {
+    &:before,
+    &:after {
+      width: 0.5rem;
+      height: 0.5rem;
+      top: 40rem;
+      left: 40rem;
+      background: #fff;
+      border-radius: 50%;
+      animation: stars 1s linear infinite;
+      opacity: 0.5;
+      box-shadow: 0 0 1rem #fff;
+    }
+
+    &:after {
+      top: 20rem;
+      left: 180rem;
+      animation: stars 1s 0.5s linear infinite;
+      background: #f9b9c8;
+    }
+  }
+}
+
+sky {
+  width: 100%;
+  height: 78.5rem;
+  overflow: hidden;
+  -webkit-box-reflect: below 0;
+  z-index: 0;
+
+  &:before,
+  &:after {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(#323248 10%, #fbd447, #d8480f);
+    opacity: 0;
+    animation: sky $timer linear infinite;
+  }
+
+  &:after {
+    background: linear-gradient(#19043f, #1a0f6c);
+  }
+}
+
+time {
+  pointer-events: none;
+
+  &,
+  sun {
+    width: 170rem;
+    height: 170rem;
+    left: -100%;
+    right: -100%;
+    top: -100%;
+    bottom: -170%;
+    margin: auto;
+  }
+
+  & sun {
+    bottom: -100%;
+    transform: rotate(0deg);
+    z-index: 1;
+    animation: sun $timer linear infinite;
+    filter: blur(1rem) brightness(400%);
+
+    &:before {
+      width: 25rem;
+      height: 25rem;
+      border-radius: 50%;
+      background: radial-gradient($r1, $base);
+      right: 0;
+      margin: auto;
+      transform: rotate(0deg);
+    }
+    //moon
+    &:after {
+      width: 10rem;
+      height: 10rem;
+      border-radius: 50%;
+      box-shadow: inset 0 2rem 0 #5a4e38;
+      background: rgba(#000, 0.1);
+      left: 60%;
+      top: auto;
+      bottom: 0;
+      transform: rotate(0deg);
+      z-index: 1;
+    }
+  }
+}
+
+@media (max-width: 500px) {
+  time,
+  input {
+    display: none;
+  }
+}
+
+div.ss lens {
+  top: 20rem;
+  left: 70rem;
+  animation: lensflair $timer linear infinite;
+  width: 60rem;
+  height: 60rem;
+  filter: brightness(150%);
+  transform: rotate(0);
+  opacity: 0;
+
+  &:before {
+    width: 60rem;
+    height: 60rem;
+    border-radius: 50%;
+    top: 0;
+    right: -50%;
+    left: -50%;
+    margin: auto;
+    box-shadow: 0 70rem 0 -20rem yellow,
+      //
+        0 50rem 0 -25rem yellow,
+      //
+        0 100rem 0 5rem #f437c5,
+      //
+        inset 0 0 3rem $sun;
+    border: 1rem solid $sun;
+  }
+
+  &:after {
+    width: 100rem;
+    height: 100rem;
+    border-radius: 50%;
+    top: 140rem;
+    right: -50%;
+    left: -50%;
+    margin: auto;
+    border: 1rem solid yellow;
+    box-shadow: 0 0 3rem red, inset 0 0 3rem blue;
+  }
+}
+
+@keyframes lensflair {
+  20%,
+  30%,
+  70%,
+  80% {
+    opacity: 0;
+  }
+
+  25%,
+  75% {
+    opacity: 0.05;
+  }
+
+  100% {
+    transform: rotate(360deg);
+    opacity: 0;
+  }
+}
+
+@keyframes sun {
+  20%,
+  80% {
+    filter: blur(1rem) brightness(390%);
+  }
+
+  27%,
+  73% {
+    filter: blur(1rem) brightness(200%);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes stars {
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes sky {
+  20%,
+  85% {
+    filter: brightness(100%);
+    opacity: 0;
+  }
+
+  30%,
+  70% {
+    filter: brightness(100%);
+    opacity: 1;
+  }
+
+  40%,
+  60% {
+    filter: brightness(20%);
+    opacity: 1;
+  }
+}
+
+sunset {
+  width: 150%;
+  height: 20rem;
+  left: -25%;
+  top: 60rem;
+  background: radial-gradient(farthest-side at 70% 100%, #ff6400, $none);
+  filter: blur(1rem);
+  -webkit-box-reflect: below 0;
+  animation: sunset $timer linear infinite;
+  opacity: 0;
+  transform: translate3d(0, 20rem, 0);
+
+  &:before {
+    width: 100rem;
+    height: 50rem;
+    left: 55%;
+    top: -10rem;
+    border-radius: 50%;
+    background: radial-gradient(#ff6400, $none);
+    opacity: 0.1;
+  }
+
+  &:after {
+    width: 50rem;
+    height: 25rem;
+    left: 65%;
+    top: 5rem;
+    border-radius: 50%;
+    background: radial-gradient(#fffd91, $none);
+    opacity: 0.1;
+  }
+}
+
+@keyframes sunset {
+  28%,
+  75% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  20%,
+  35%,
+  70%,
+  80% {
+    opacity: 0;
+    transform: translate3d(0, 20rem, 0);
+  }
+}
+
+text:nth-of-type(2) {
+  animation: gameover $timer linear;
+}
+
+@keyframes gameover {
+  34.8% {
+    transform: scale(0);
+    z-index: 0;
+    display: block;
+    opacity: 0;
+  }
+
+  35%,
+  100% {
+    transform: scale(1);
+    z-index: 410;
+    transition: all 0.5s 1.5s ease-in-out;
+    opacity: 1;
+  }
+}
+// ## trees
+tree:nth-of-type(1) {
+  width: 10rem;
+  height: 60.5rem;
+  top: -10rem;
+  transform: skew(-2deg);
+  border-radius: 0 50% 2rem 0;
+  box-shadow: 0.5rem 0 0 $tre1, 1rem 0 0 $tre3, 3rem 0 0 $tre1, 5rem 0 0 $tre2;
+
+  &:before {
+    left: 16rem;
+    width: 10rem;
+    height: 60.5rem;
+    box-shadow: -2rem 0 0 $tre2, -3rem 0 0 $tre1, -4rem 0 0 $tre2;
+    border-radius: 50% 0 0 2rem;
+    transform: skew(4deg);
+  }
+
+  &:after {
+    top: -4rem;
+    width: 10rem;
+    height: 5rem;
+    border-radius: 60% 60% 40% 40% / 70% 70% 40% 40%;
+    background: $r4;
+    box-shadow: inset -1rem -1rem 1rem $vls,
+      //
+        13rem 0 0 -0.2rem $vls,
+      //
+        9rem 1rem 0 -1rem $vls,
+      //
+        -2rem -3rem 0 1rem $vls,
+      //
+        5rem -5rem 0 -0.5rem $vls,
+      //
+        7rem -4rem 0 $vls,
+      //
+        11rem -2rem 0 -0.5rem $vls,
+      //
+        //
+        12rem 0 0 -0.2rem $r42,
+      //
+        8rem 1rem 0 -1rem $r42,
+      //
+        -3rem -3rem 0 1rem $r41,
+      //
+        4rem -5rem 0 -0.5rem $r42,
+      //
+        6rem -4rem 0 $r41,
+      //
+        10rem -2rem 0 -0.5rem $r42; //
+  }
+}
+
+tree:nth-of-type(2) {
+  width: 10rem;
+  height: 50.5rem;
+  top: 0;
+  left: 25rem;
+  transform: skew(-3deg);
+  border-radius: 0 50% 2rem 0;
+  box-shadow: 0.5rem 0 0 $tre1, 1rem 0 0 $tre3, 3rem 0 0 $tre1, 5rem 0 0 $tre2;
+
+  &:before {
+    left: 16rem;
+    width: 10rem;
+    height: 50.5rem;
+    box-shadow: -1.5rem 0 0 $tre2, -2.5rem 0 0 $tre1, -3rem 0 0 $tre2;
+    border-radius: 50% 0 0 2rem;
+    transform: skew(4deg);
+  }
+
+  &:after {
+    top: -4rem;
+    left: 17rem;
+    width: 10rem;
+    height: 5rem;
+    border-radius: 60% 60% 40% 40% / 70% 70% 40% 40%;
+    background: $r4;
+    box-shadow: inset -1rem -1rem 1rem $vls,
+      //
+        -19rem 1rem 0 -0.2rem $vls,
+      //
+        -14rem -4rem 0 -1rem $vls,
+      //
+        -13rem -1rem 0 1rem $vls,
+      //
+        -1rem -4rem 0 -0.5rem $vls,
+      //
+        -4rem -1rem 0 $vls,
+      //
+        -21rem -2rem 0 -0.5rem $vls,
+      //
+        -7rem -5rem 0 1rem $vls,
+      //
+        //
+        -20rem 1rem 0 -0.2rem $r42,
+      //
+        -15rem -4rem 0 -1rem $r42,
+      //
+        -15rem -1rem 0 1rem $r41,
+      //
+        -2rem -4rem 0 -0.5rem $r42,
+      //
+        -5rem -1rem 0 $r41,
+      //
+        -22rem -2rem 0 -0.5rem $r42,
+      //
+        -8rem -5rem 0 1rem $r41; //
+  }
+}
+
+tree i:nth-of-type(1) {
+  &,
+  &:before,
+  &:after {
+    width: 2.5rem;
+    height: 0.5rem;
+    background: lighten($r4, 10%);
+    border-radius: 0 0 100% 100%;
+    top: -5rem;
+    filter: drop-shadow(3rem 1.5rem 0 $r43) drop-shadow(1.5rem 2.5rem 0 $r43);
+    z-index: 1;
+    left: -3rem;
+    opacity: 0.5;
+  }
+
+  &:before {
+    left: 6rem;
+    top: -1rem;
+    filter: drop-shadow(2rem 1.5rem 0 $r43);
+  }
+
+  &:after {
+    left: 15rem;
+    top: -1.5rem;
+    filter: drop-shadow(2.5rem 0.5rem 0 $r43) drop-shadow(1rem 2rem 0 $r43);
+  }
+}
+
+tree:nth-of-type(2) i:nth-of-type(1) {
+  &:after {
+    left: 20rem;
+  }
+}
+
+tree i:nth-of-type(2) {
+  &,
+  &:before,
+  &:after {
+    width: 0.5rem;
+    height: 0.25rem;
+    background: $r41;
+    border-radius: 100% 0 100% 0;
+    top: -2rem;
+  }
+
+  &:before {
+    left: 8rem;
+    top: -1rem;
+  }
+
+  &:after {
+    left: 20rem;
+    top: 1.5rem;
+  }
+}
+
+[type="radio"]:focus ~ div > div > tree {
+  i:nth-of-type(1),
+  &:after {
+    animation: shake 0.3s ease-in-out;
+  }
+}
+
+[type="radio"]:focus ~ div > div > tree > i:nth-of-type(2) {
+  & {
+    animation: fall 5s ease-in-out;
+  }
+
+  &:before {
+    animation: fall 10s ease-in-out;
+  }
+
+  &:before {
+    animation: fall 5s ease-in-out;
+  }
+}
+
+@keyframes shake {
+  40% {
+    transform: translate3d(0, 0.5rem, 0);
+  }
+
+  60% {
+    transform: translate3d(0, -0.25rem, 0);
+  }
+
+  80% {
+    transform: translate3d(0, 0.15rem, 0);
+  }
+}
+
+@keyframes fall {
+  100% {
+    transform: translate3d(0, 15rem, 0);
+    opacity: 0;
+  }
+}
+// ## water
+$w: #040b27;
+
+water {
+  position: absolute;
+  top: 78.5rem;
+  bottom: 0;
+  left: -100%;
+  right: -100%;
+  margin: auto;
+  width: 100%;
+  height: 25rem;
+  background: linear-gradient(rgba($sky, 0.5), $background);
+  z-index: 99;
+  overflow: hidden;
+  box-shadow: inset 0 0 5rem 0 rgba($smoke, 0.5);
+
+  &:before,
+  &:after,
+  i {
+    width: 80rem;
+    height: 3rem;
+    border-radius: 50%;
+    opacity: 0.2;
+    right: 0;
+    margin: auto;
+    transform: scaleX(1) scaleY(0);
+    top: -1.5rem;
+    border: 0.5rem solid #fff;
+    box-shadow: 0 0 1rem 0.5rem $w, inset 0 0 1rem 1rem $w, inset 0 0 1rem #fff;
+  }
+
+  &:before {
+    animation: waves 6s ease-in-out infinite;
+  }
+
+  &:after {
+    animation: waves 8s 2s ease-in-out infinite;
+  }
+}
+
+input:focus ~ water > i {
+  animation: waves 3s 0.25s ease-out;
+}
+
+@keyframes waves {
+  100% {
+    transform: scaleX(1.5) scaleY(7);
+    opacity: 0;
+  }
+}
+// ## shed
+//treehouse
+
+shed > label {
+  & > i:nth-of-type(5) {
+    width: 100%;
+    height: 100%;
+    //ladder
+    &:after {
+      width: 2rem;
+      border-left: 0.5rem solid $smoke;
+      border-right: 0.5rem solid $smoke;
+      background: repeating-linear-gradient(
+        $none,
+        $none 1.5rem,
+        $smoke 1.5rem,
+        $smoke 2rem
+      );
+      height: 325%;
+      left: -1.5rem;
+      transform: rotate(-1deg);
+      top: 10.5rem;
+      display: none;
+    }
+    //bridge
+    &:before {
+      width: 13rem;
+      height: 3rem;
+      top: 10.5rem;
+      left: 12.5rem;
+      border: 0.5rem dashed $none;
+      border-bottom-color: $tre1;
+      box-shadow: 0 0.25rem 0 $tre1;
+      transform: rotate(-3deg);
+      border-radius: 50%;
+      display: none;
+    }
+  }
+
+  &:nth-of-type(n + 5) > i:nth-of-type(5):after {
+    height: 225%;
+  }
+
+  &:nth-of-type(n + 9) > i:nth-of-type(5):after {
+    height: 15rem;
+  }
+
+  &:nth-of-type(even) > i:nth-of-type(5):after {
+    left: 10rem;
+    transform: rotate(2deg);
+  }
+}
+
+$row: 1, 2, 3;
+
+@each $i in $row {
+  $col: 1, 2, 3, 4;
+
+  @each $x in $col {
+    .hs.row#{$i}.col#{$x}:checked ~ div > div > shed > .row#{$i}.col#{$x} {
+      //back
+      &:before {
+        background: repeating-linear-gradient($r1 1rem, $tre1 2.3rem);
+        width: 90%;
+        height: 98%;
+        left: 1.25rem;
+        border-radius: 0.5rem;
+        box-shadow: 0 0.5rem 0 0 $tre2;
+      }
+      //roof
+      &:after {
+        width: 105%;
+        height: 5rem;
+        background: repeating-linear-gradient(
+          to right,
+          $tre1 1rem,
+          $tre2 2.1rem
+        );
+        top: -2rem;
+        border-bottom: solid 0.5rem $smoke;
+        box-shadow: 0 1.5rem 0.5rem -1rem $ds;
+        border-radius: 0.5rem;
+        left: auto;
+        right: -1rem;
+      }
+      //window
+      & > i:nth-of-type(4) {
+        width: 4rem;
+        height: 4rem;
+        right: 0;
+        margin: auto;
+        background: $ls;
+        top: 3rem;
+        border-radius: 0.5rem;
+        box-shadow: inset 0 0.5rem 1rem $shadow;
+        transform: scale(0.5);
+
+        &:before {
+          width: 3.4rem;
+          height: 0.5rem;
+          background: $smoke;
+          left: 0.3rem;
+          top: 0.4rem;
+          border-radius: 0.25rem;
+          box-shadow: 0 1.5rem 0 $smoke,
+            //
+              0
+              3rem
+              0
+              $smoke,
+            //
+              0
+              0.5rem
+              0
+              #000,
+            //
+              0
+              1rem
+              0
+              $ds,
+            //
+              0
+              2rem
+              0
+              $ds,
+            //
+              0
+              2.5rem
+              0
+              $shadow; //
+        }
+
+        &:after {
+          width: 0.5rem;
+          height: 3.4rem;
+          background: $smoke;
+          left: 0.3rem;
+          top: 0.4rem;
+          border-radius: 0.25rem;
+          box-shadow: 1.5rem 0 0 $smoke,
+            //
+              3rem
+              0
+              0
+              $smoke; //
+        }
+      }
+      //door / chimney / fence
+      & > i:nth-of-type(3) {
+        //door
+        width: 4rem;
+        height: 9rem;
+        right: 0;
+        margin: auto;
+        background: $r1;
+        top: 3rem;
+        border-radius: 0.5rem;
+        box-shadow: inset 0 0.5rem 1rem $shadow;
+        //chimney
+        &:after {
+          left: -4rem;
+          border: 1rem solid $none;
+          top: -11rem;
+          border-bottom-color: $smoke;
+          transform: rotate(-3deg);
+          height: 4rem;
+          box-shadow: 0 3.7rem 0 -0.5rem $smoke;
+          border-radius: 0 0 1rem 1rem;
+        }
+        //fence
+        &:before {
+          width: 14.5rem;
+          height: 4.5rem;
+          border-top: 0.5rem solid $tre2;
+          border-bottom: 0.5rem solid $tre2;
+          top: 5rem;
+          left: -5rem;
+          background: repeating-linear-gradient(
+            to right,
+            $tre1,
+            $tre2 0.5rem,
+            $none 0.5rem,
+            $none 1.4rem
+          );
+          border-radius: 0.5rem;
+        }
+      }
+      //props
+      & > i:nth-of-type(2) {
+        &:before {
+          width: 1rem;
+          height: 9rem;
+          background: $tre2;
+          top: -7rem;
+        }
+      }
+
+      &:nth-of-type(odd) > i:nth-of-type(2) {
+        width: 1rem;
+        background: $tre2;
+        height: 3rem;
+        border-radius: 0.25rem;
+        top: 18.5rem;
+        left: 10rem;
+        transform: rotate(5deg);
+
+        &:before {
+          transform: rotate(-45deg);
+          left: -3rem;
+          border-radius: 0 1rem 0 0;
+        }
+
+        &:after {
+          width: 1rem;
+          height: 4rem;
+          transform: rotate(45deg);
+          background: $tre2;
+          top: -6.5rem;
+          left: -2rem;
+          border-radius: 1rem 0 0 0;
+        }
+      }
+
+      &:nth-of-type(even) > i:nth-of-type(3) {
+        //chimney
+        &:after {
+          left: 7rem;
+          transform: rotate(3deg);
+        }
+      }
+      //smoke
+      &:nth-of-type(even) > i:nth-of-type(1) {
+        left: 11rem;
+      }
+
+      &:nth-of-type(even) > i:nth-of-type(2) {
+        &:before {
+          transform: rotate(45deg);
+          left: 5rem;
+          border-radius: 1rem 0 0 0;
+          top: 11rem;
+        }
+      }
+      //smoke
+      & > i:nth-of-type(1) {
+        &:before,
+        &:after {
+          top: -7.5rem;
+          left: -1rem;
+          animation: smoke 8s linear infinite;
+        }
+
+        &:before {
+          animation: smoke 7.25s 3.75s linear infinite;
+        }
+      }
+      //ladder
+      & > i:nth-of-type(5):after {
+        display: block;
+      }
+    }
+    //no roof
+    .hs.row#{$i}.col#{$x}:checked ~ {
+      div > div > shed > .row#{$i + 1}.col#{$x} {
+        &:after,
+        & > i:nth-of-type(3):after,
+        & > i:nth-of-type(1) {
+          display: none;
+        }
+      }
+    }
+    //no fence / door / window
+    .hs.row#{$i}.col#{$x}:checked ~ {
+      div > div > shed > .row#{$i - 1}.col#{$x} {
+        & > i:nth-of-type(3):before,
+        & > i:nth-of-type(2),
+        & > i:nth-of-type(5):after {
+          display: none;
+        }
+
+        & > i:nth-of-type(3) {
+          height: 0;
+        }
+
+        & > i:nth-of-type(4) {
+          transform: scale(1);
+          right: #{random(2)}rem;
+          left: #{random(2)}rem;
+        }
+      }
+    }
+    //chimney
+    .hs.shed.row#{$i}.col#{$x
+      -
+      3}:not(:checked)
+      ~ .hs.row#{$i}.col#{$x}:checked
+      ~ .shed.hs.row#{$i}.col#{$x
+      + 1}:not(:checked)
+      ~ {
+      .hs.row#{$i - 2}.col#{$x}:checked ~ {
+        div > div > shed > .row#{$i}.col#{$x} {
+          & > i:nth-of-type(3) {
+            //chimney
+            &:after {
+              left: 7rem;
+              transform: rotate(3deg);
+            }
+          }
+          //smoke
+          & > i:nth-of-type(1) {
+            left: 11rem;
+          }
+        }
+      }
+    }
+    //tall back
+    .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i - 1}.col#{$x}:checked ~ {
+      div > div > shed > .row#{$i}.col#{$x} {
+        &:before {
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+        }
+      }
+
+      div > div > shed > .row#{$i - 1}.col#{$x} {
+        &:before {
+          height: 12.5rem;
+          box-shadow: none;
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+    //random door
+    .hs.row#{$i}.col#{$x}:checked ~ {
+      .hs.row#{$i}.col#{$x + 1}:checked ~ {
+        div > div > shed > .row#{$i}.col#{$x} {
+          & > i:nth-of-type(3) {
+            height: 0;
+          }
+
+          & > i:nth-of-type(4) {
+            transform: scale(1);
+            right: #{random(2)}rem;
+            left: #{random(2)}rem;
+          }
+
+          & > i:nth-of-type(5):after {
+            display: none;
+          }
+        }
+      }
+    }
+    //ladder control
+    .hs.row#{$i + 2}.col#{$x}:checked ~ {
+      .hs.row#{$i}.col#{$x}:checked ~ {
+        div > div > shed > .row#{$i}.col#{$x} {
+          & > i:nth-of-type(5):after {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ {
+      div > div > shed > .row1.col2 {
+        & > i:nth-of-type(5):after {
+          display: none;
+        }
+      }
+    }
+
+    .hs.row#{$i + 1}.col#{$x - 1}:checked ~ {
+      .hs.row#{$i}.col#{$x}:checked ~ {
+        div > div > shed > .row#{$i}.col#{$x} {
+          & > i:nth-of-type(5):after {
+            display: none !important;
+          }
+        }
+      }
+    }
+
+    .hs.row#{$i}.col#{$x}:checked ~ {
+      .hs.row#{$i - 1}.col#{$x + 1}:checked ~ {
+        div > div > shed > .row#{$i}.col#{$x} {
+          & > i:nth-of-type(1),
+          & > i:nth-of-type(3):after {
+            display: none;
+          }
+        }
+      }
+    }
+    //extended roof
+    .hs.row#{$i}.col#{$x}:checked ~,
+    .hs.row#{$i}.col#{$x + 1}:checked ~ {
+      .hs.row#{$i - 1}.col#{$x + 1}:checked ~ {
+        div > div > shed > .row#{$i}.col#{$x} {
+          &:after {
+            width: 110%;
+            right: -1.25rem;
+          }
+        }
+      }
+    }
+  }
+  //long back
+  $house: 1, 2, 3;
+
+  @each $x in $house {
+    .hs.row#{$i}.col#{$x}:checked ~ {
+      .hs.row#{$i}.col#{$x + 1}:checked ~ {
+        div > div > shed > .row#{$i}.col#{$x} {
+          &:before {
+            width: 110%;
+          }
+        }
+
+        div > div > shed > .row#{$i}.col#{$x + 1} {
+          //roof
+          &:after {
+            width: 120%;
+            left: -1.25rem;
+          }
+        }
+      }
+    }
+  }
+  /////////////////////////////
+  //chimney
+
+  $house: 2, 4;
+
+  @each $x in $house {
+    .hs.row#{$i}.col#{$x}:checked ~ {
+      .hs.shed.row#{$i}.col#{$x + 1}:not(:checked) ~ {
+        div > div > shed > .row#{$i}.col#{$x} {
+          & > i:nth-of-type(3) {
+            //chimney
+            &:after {
+              left: 7rem;
+              transform: rotate(3deg);
+            }
+          }
+          //smoke
+          & > i:nth-of-type(1) {
+            left: 11rem;
+          }
+        }
+      }
+    }
+  }
+
+  $house: 2, 3;
+
+  @each $x in $house {
+    .hs.row#{$i}.col#{$x}:checked ~ {
+      .hs.row#{$i}.col#{$x + 1}:checked ~ {
+        div > div > shed > .row#{$i}.col#{$x} {
+          //chimney // smoke
+          & > i:nth-of-type(3):after,
+          & > i:nth-of-type(1) {
+            display: none;
+          }
+
+          & > i:nth-of-type(3):before {
+            width: 10.25rem;
+          }
+        }
+      }
+    }
+
+    .hs.row#{$i}.col#{$x}:checked ~ {
+      .hs.row#{$i}.col#{$x - 1}:checked ~ {
+        div > div > shed > .row#{$i}.col#{$x} {
+          & > i:nth-of-type(3) {
+            //chimney
+            &:after {
+              left: 6rem;
+              transform: rotate(3deg);
+            }
+          }
+          //smoke
+          & > i:nth-of-type(1) {
+            left: 10rem;
+          }
+
+          & > i:nth-of-type(5):after {
+            left: -2.5rem;
+            transform: rotate(-3deg);
+          }
+        }
+      }
+    }
+
+    .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x - 3}:checked ~,
+    .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x - 5}:checked ~ {
+      div > div > shed > .row#{$i}.col#{$x} {
+        //chimney // smoke
+        & > i:nth-of-type(3):after,
+        & > i:nth-of-type(1) {
+          display: none;
+        }
+      }
+    }
+
+    //ladder
+    .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x - 3}:checked ~ {
+      div > div > shed > .row#{$i}.col#{$x} {
+        & > i:nth-of-type(5):after {
+          left: 10rem;
+          transform: rotate(2deg);
+        }
+      }
+    }
+  }
+  //bridge
+
+  .hs.shed.row#{$i}.col1:checked
+    ~ .hs.shed.row#{$i}.col2:not(:checked)
+    ~ .hs.shed.row#{$i}.col3:not(:checked)
+    ~ .hs.shed.row#{$i}.col4:checked
+    ~ {
+    div > div > shed > .row#{$i}.col1 {
+      & > i:nth-of-type(5):before {
+        display: block;
+        width: 210%;
+      }
+    }
+  }
+
+  .hs.shed.row#{$i}.col1:checked
+    ~ .hs.shed.row#{$i}.col2:not(:checked)
+    ~ .hs.shed.row#{$i}.col3:checked
+    ~ div
+    > div
+    > shed
+    > .row#{$i}.col1,
+  .hs.shed.row#{$i}.col2:checked
+    ~ .hs.shed.row#{$i}.col3:not(:checked)
+    ~ .hs.shed.row#{$i}.col4:checked
+    ~ div
+    > div
+    > shed
+    > .row#{$i}.col2 {
+    & > i:nth-of-type(5):before {
+      display: block;
+      width: 110%;
+    }
+  }
+
+  // change bridge to rope
+  .hs.row#{$i
+    + 1}.col2:checked
+    ~ .hs.shed.row#{$i}.col1:checked
+    ~ .hs.shed.row#{$i}.col2:not(:checked)
+    ~ .hs.shed.row#{$i}.col3:checked
+    ~ div
+    > div
+    > shed
+    > .row#{$i}.col1,
+  .hs.row#{$i
+    + 1}.col3:checked
+    ~ .hs.shed.row#{$i}.col2:checked
+    ~ .hs.shed.row#{$i}.col3:not(:checked)
+    ~ .hs.shed.row#{$i}.col4:checked
+    ~ div
+    > div
+    > shed
+    > .row#{$i}.col2,
+  .hs.row#{$i
+    + 1}.col3:checked
+    ~ .hs.shed.row#{$i}.col1:checked
+    ~ .hs.shed.row#{$i}.col2:not(:checked)
+    ~ .hs.shed.row#{$i}.col3:not(:checked)
+    ~ .hs.shed.row#{$i}.col4:checked
+    ~ div
+    > div
+    > shed
+    > .row#{$i}.col1,
+  .hs.row#{$i
+    + 1}.col2:checked
+    ~ .hs.shed.row#{$i}.col1:checked
+    ~ .hs.shed.row#{$i}.col2:not(:checked)
+    ~ .hs.shed.row#{$i}.col3:not(:checked)
+    ~ .hs.shed.row#{$i}.col4:checked
+    ~ div
+    > div
+    > shed
+    > .row#{$i}.col1,
+  .hs.shed.row#{$i
+    + 1}.col1:checked
+    ~ .hs.shed.row#{$i}.col1:checked
+    ~ .hs.shed.row#{$i}.col2:not(:checked)
+    ~ .hs.shed.row#{$i}.col3:checked
+    ~ div
+    > div
+    > shed
+    > .row#{$i}.col1,
+  .hs.shed.row#{$i
+    + 1}.col2:checked
+    ~ .hs.shed.row#{$i}.col2:checked
+    ~ .hs.shed.row#{$i}.col3:not(:checked)
+    ~ .hs.shed.row#{$i}.col4:checked
+    ~ div
+    > div
+    > shed
+    > .row#{$i}.col2 {
+    & > i:nth-of-type(5):before {
+      top: 1rem;
+      border: none;
+    }
+  }
+}
+// ## house
+//house
+
+div > div > house > label {
+  & > i:nth-of-type(5) {
+    width: 13rem;
+    height: 3rem;
+    top: 1rem;
+    border-bottom-color: $tre1;
+    box-shadow: 0 0.25rem 0 $tre1;
+    border-radius: 50%;
+    left: -0.5rem;
+    z-index: 1;
+    display: none;
+
+    &:after {
+      border: 0.5rem solid $none;
+      border-top: 1rem solid $r1;
+      top: 2.75rem;
+      left: 1rem;
+      transform: rotate(5deg);
+      z-index: -1 !important;
+      filter: drop-shadow(2rem 0.25rem 0 $r2) drop-shadow(2rem 0rem 0 $r1);
+    }
+
+    &:before {
+      border: 0.5rem solid $none;
+      border-top: 1rem solid $r4;
+      top: 3.25rem;
+      left: 7rem;
+      transform: rotate(-5deg);
+      z-index: -1 !important;
+      filter: drop-shadow(2rem -0.25rem 0 $r2) drop-shadow(2rem 0rem 0 $r1);
+    }
+  }
+}
+
+$row: 1, 2, 3, 4;
+
+@each $i in $row {
+  $col: 1, 2, 3, 4;
+
+  @each $x in $col {
+    .hs.row#{$i}.col#{$x}:checked ~ {
+      div > div > house > .row#{$i}.col#{$x} {
+        //back
+        &:before {
+          width: 1.5rem;
+          height: 1rem;
+          background: currentColor;
+          border-radius: 0.25rem;
+          top: -1.35rem;
+          left: 3rem;
+          box-shadow: 2rem 2rem 0 currentColor;
+          filter: hue-rotate(-10deg) brightness(1.1);
+          opacity: 0.7;
+        }
+        //bricks
+        &:after {
+          filter: hue-rotate(-10deg) brightness(1.1);
+          width: 2rem;
+          height: 1rem;
+          background: currentColor;
+          border-radius: 0.25rem;
+          top: 0.5rem;
+          left: -0.15rem;
+          box-shadow: 0 2rem 0 currentColor,
+            //
+              0
+              4rem
+              0
+              currentColor,
+            //
+              0
+              6rem
+              0
+              currentColor,
+            //
+              0
+              8rem
+              0
+              currentColor,
+            //
+              0
+              10rem
+              0
+              currentColor,
+            //
+              //
+              10.75rem
+              0
+              0
+              currentColor,
+            //
+              10.75rem
+              2rem
+              0
+              currentColor,
+            //
+              10.75rem
+              4rem
+              0
+              currentColor,
+            //
+              10.75rem
+              6rem
+              0
+              currentColor,
+            //
+              10.75rem
+              8rem
+              0
+              currentColor,
+            //
+              10.75rem
+              10rem
+              0
+              currentColor;
+        }
+        //window
+        & > i:nth-of-type(4) {
+          //window
+          width: 5rem;
+          right: 0;
+          margin: auto;
+          top: 3.5rem;
+          background: $ds;
+          height: 5rem;
+          border-radius: 0.3rem;
+          box-shadow: inset 0 0 0 0.5rem $ls,
+            //
+              inset
+              0
+              0
+              0.5rem
+              $ds,
+            //
+              inset
+              0
+              0
+              0
+              0.5rem
+              currentColor,
+            //
+              inset
+              0
+              0
+              1rem
+              1rem
+              $ds,
+            //
+              inset
+              1rem
+              0
+              0
+              $r1,
+            //
+              inset -1.25rem
+              0
+              0
+              $r1,
+            //
+              inset
+              0 -2rem
+              0
+              #000,
+            //
+              inset
+              0 -3.5rem
+              0
+              $tre2;
+
+          &:after {
+            width: 4.5rem;
+            height: 0.25rem;
+            left: 0.25rem;
+            top: 2.4rem;
+            background: currentColor;
+            border-radius: 0.0001rem;
+            box-shadow: inset 0 0 0 0.5rem $ls,
+              //
+                0
+                3rem
+                0
+                0.3rem
+                lighten($r15, 20%),
+              //
+                0
+                3.5rem
+                0.35rem
+                0.25rem
+                $ds;
+          }
+
+          &:before {
+            width: 0.25rem;
+            height: 4.5rem;
+            left: 2.4rem;
+            top: 0.25rem;
+            background: currentColor;
+            box-shadow: inset 0 0 0 0.5rem $ls;
+          }
+        }
+        //random window
+        &.col#{random(4)} > i:nth-of-type(4) {
+          border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
+        }
+        //roof
+        & > i:nth-of-type(2) {
+          border: solid $none 1rem;
+          border-bottom: solid $r3 4rem;
+          width: calc(100% + 2.1rem);
+          left: -1rem;
+          top: -2.5rem;
+          box-shadow: 0 0.25rem 0 $tre2, 0 1.5rem 1rem -1rem $shadow;
+
+          &:before {
+            width: 100%;
+            height: 3rem;
+            border-radius: 50%;
+            background: repeating-linear-gradient(
+              $none,
+              $none 0.75rem,
+              rgba($ds, 0.4),
+              $none 1rem
+            );
+          }
+          //chimney
+          &:after {
+            width: 3rem;
+            height: 4rem;
+            border: 0.5rem solid $none;
+            border-top: 0.5rem solid $base;
+            top: -2rem;
+            box-shadow: inset 0 4rem 0 $base,
+              //
+                0 -0.5rem
+                0 -0.2rem
+                $dark,
+              //
+                0 -3rem
+                0 -1rem
+                $smoke;
+            border-radius: 0.5rem;
+            left: -0.25rem;
+            filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(#000, 0.15));
+          }
+        }
+        //smoke
+        & > i:nth-of-type(1) {
+          &:before,
+          &:after {
+            top: -8.5rem;
+            left: -1rem;
+            animation: smoke 8s linear infinite;
+          }
+
+          &:before {
+            animation: smoke 7.25s 3.75s linear infinite;
+          }
+        }
+
+        &:nth-of-type(even) {
+          i:nth-of-type(2):after {
+            left: 9.5rem;
+          }
+          //smoke
+          & > i:nth-of-type(1) {
+            left: 10rem;
+          }
+        }
+      }
+      //no roof
+      div > div > house > .row#{$i + 1}.col#{$x} {
+        i:nth-of-type(2),
+        i:nth-of-type(1) {
+          display: none;
+        }
+      }
+    }
+
+    //shedhouse
+    .hs.house.row#{$i
+      + 1}.col#{$x}:checked
+      ~ .hs.shed.row#{$i}.col#{$x}:checked
+      ~ {
+      div > div > house > .row#{$i}.col#{$x} {
+        border-bottom: 0.25rem dashed $base;
+      }
+
+      div > div > house > .row#{$i + 1}.col#{$x} {
+        &:before {
+          background: $r1;
+        }
+      }
+    }
+
+    .hs.shed.row#{$i
+      + 1}.col#{$x}:checked
+      ~ .hs.house.row#{$i}.col#{$x}:checked
+      ~ {
+      div > div > house > .row#{$i}.col#{$x} {
+        border-bottom: 0.25rem dashed $r1;
+      }
+
+      div > div > house > .row#{$i + 1}.col#{$x} {
+        &:before {
+          background: $base;
+        }
+      }
+    }
+    //chimney
+    .hs.house.row#{$i}.col#{$x
+      -
+      3}:not(:checked)
+      ~ .hs.house.row#{$i}.col#{$x}:checked
+      ~ .hs.house.row#{$i}.col#{$x
+      + 1}:not(:checked)
+      ~ .hs.house.row#{$i
+      -
+      2}.col#{$x}:checked
+      ~ {
+      div > div > house > .row#{$i}.col#{$x} {
+        & > i:nth-of-type(2):after {
+          //chimney
+          left: 9.5rem;
+        }
+        //smoke
+        & > i:nth-of-type(1) {
+          left: 11rem;
+        }
+      }
+    }
+    //center chimney
+    .hs.row#{$i
+      -
+      1}.col#{$x
+      -
+      1}:checked
+      ~ .hs.row#{$i
+      -
+      1}.col#{$x}:not(:checked)
+      ~,
+    .hs.house.row#{$i
+      -
+      1}.col#{$x}:not(:checked)
+      ~ .hs.house.row#{$i
+      -
+      2}.col#{$x}:checked
+      ~ {
+      div > div > house > .row#{$i}.col#{$x} {
+        & > i:nth-of-type(2):after {
+          //chimney
+          left: 4.75rem;
+          height: 3rem;
+          box-shadow: inset 0 6rem 0 $base,
+            //
+              0 -0.5rem
+              0 -0.2rem
+              $dark,
+            //
+              0 -2.25rem
+              0 -1rem
+              $smoke;
+          border-radius: 0 0 1rem 1rem;
+        }
+        //smoke
+        & > i:nth-of-type(1) {
+          left: 5rem;
+        }
+      }
+    }
+    //small roof
+    .hs.row#{$i}.col#{$x
+      -
+      1}:checked
+      ~ .hs.row#{$i}.col#{$x}:checked
+      ~ .hs.house.row#{$i
+      -
+      1}.col#{$x
+      -
+      1}:not(:checked)
+      ~ .hs.shed.row#{$i
+      -
+      1}.col#{$x
+      -
+      1}:not(:checked)
+      ~ .hs.row#{$i
+      -
+      1}.col#{$x}:checked
+      ~ {
+      div > div > house > .row#{$i}.col#{$x} {
+        i:nth-of-type(2) {
+          display: block;
+          left: -42%;
+          width: 50%;
+        }
+
+        i:nth-of-type(1),
+        i:nth-of-type(2):after {
+          display: none;
+        }
+      }
+    }
+    // no chimney
+
+    .row#{$i}.col2:checked ~ .row#{$i}.col3:checked ~ {
+      div > div > house > .row#{$i}.col2 {
+        i:nth-of-type(1),
+        i:nth-of-type(2):after {
+          display: none;
+        }
+      }
+
+      div > div > house > .row#{$i}.col3 {
+        & > i:nth-of-type(2):after {
+          //chimney
+          left: -1.5rem;
+        }
+        //smoke
+        & > i:nth-of-type(1) {
+          left: -1rem;
+        }
+      }
+    }
+  }
+}
+
+/////////////////////////////
+
+@each $i in $row {
+  $col: 1, 2, 3, 4;
+
+  @each $x in $col {
+    //bunting
+    .hs.row#{$i}.col#{$x}:checked
+      ~ .hs.house.row#{$i}.col#{$x
+      + 1}:not(:checked)
+      ~ .hs.row#{$i}.col#{$x
+      + 2}:checked
+      ~ {
+      div > div > house > .row#{$i}.col#{$x + 1} {
+        & > i:nth-of-type(5) {
+          display: block;
+          width: 105%;
+        }
+      }
+    }
+    //house to shed bunting
+    .hs.row#{$i}.col#{$x}:checked
+      ~ .hs.house.row#{$i}.col#{$x
+      + 1}:not(:checked)
+      ~ .hs.shed.row#{$i}.col#{$x
+      + 2}:checked
+      ~ {
+      div > div > house > .row#{$i}.col#{$x + 1} {
+        & > i:nth-of-type(5) {
+          display: block;
+          width: 115%;
+        }
+      }
+    }
+  }
+
+  //bunting
+  $col: 1, 2, 3, 4;
+
+  @each $x in $col {
+    .hs.row#{$i}.col#{$x}:checked
+      ~ .hs.house.row#{$i}.col#{$x
+      + 1}:not(:checked)
+      ~ .hs.house.row#{$i}.col#{$x
+      + 2}:not(:checked)
+      ~ .hs.row#{$i}.col#{$x
+      + 3}:checked
+      ~ {
+      div > div > house > .row#{$i}.col#{$x + 1} {
+        & > i:nth-of-type(5) {
+          display: block;
+          width: 205%;
+
+          &:after {
+            border: 0.5rem solid $none;
+            border-top: 1rem solid $r1;
+            top: 2.75rem;
+            left: 3.5rem;
+            transform: rotate(4deg);
+            z-index: -1 !important;
+            filter: drop-shadow(2.5rem 0.1rem 0 $r2) drop-shadow(5rem 0 0 $r1);
+          }
+
+          &:before {
+            border: 0.5rem solid $none;
+            border-top: 1rem solid $r4;
+            top: 3.25rem;
+            left: 13.5rem;
+            transform: rotate(-4deg);
+            z-index: -1 !important;
+            filter: drop-shadow(2.5rem -0.1rem 0 $r2) drop-shadow(5rem 0 0 $r1);
+          }
+        }
+      }
+    }
+
+    //bricks
+    .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x + 1}:checked ~ {
+      div > div > house > .row#{$i}.col#{$x} {
+        //bricks
+        &:after {
+          box-shadow: 0 2rem 0 currentColor,
+            //
+              0
+              4rem
+              0
+              currentColor,
+            //
+              0
+              6rem
+              0
+              currentColor,
+            //
+              0
+              8rem
+              0
+              currentColor,
+            //
+              0
+              10rem
+              0
+              currentColor;
+        }
+      }
+    }
+
+    //fixed
+    .hs.row#{$i}.col#{$x - 1}:checked ~ {
+      .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x + 1}:checked ~ {
+        div > div > house > .row#{$i}.col#{$x} {
+          //bricks
+          &:after {
+            box-shadow: -2rem #{random(3) + 3}rem 0 rgba($b1, 0.5),
+              //
+                0
+                #{random(3) +
+                5}rem
+                0
+                currentColor;
+          }
+        }
+      }
+    }
+
+    //bricks
+    .hs.row#{$i}.col#{$x - 1}:checked ~ {
+      .hs.row#{$i}.col#{$x}:checked ~ {
+        div > div > house > .row#{$i}.col#{$x} {
+          &:after {
+            box-shadow: -2rem 3rem 0 rgba($b1, 0.5),
+              //
+                0
+                5rem
+                0
+                currentColor,
+              //
+                //
+                10.75rem
+                0
+                0
+                currentColor,
+              //
+                10.75rem
+                2rem
+                0
+                currentColor,
+              //
+                10.75rem
+                4rem
+                0
+                currentColor,
+              //
+                10.75rem
+                6rem
+                0
+                currentColor,
+              //
+                10.75rem
+                8rem
+                0
+                currentColor,
+              //
+                10.75rem
+                10rem
+                0
+                currentColor;
+          }
+        }
+      }
+    }
+  }
+
+  $row: 1, 2, 3;
+
+  @each $i in $row {
+    $col: 1, 2, 3, 4;
+
+    @each $x in $col {
+      //prop
+      .hs.row#{$i}.col#{$x}:checked ~ {
+        div > div > house > .row#{$i}.col#{$x} {
+          border-bottom: 0.75rem solid $tre2;
+
+          & > i:nth-of-type(3) {
+            //prop
+            width: 2rem;
+            height: 325%;
+            border-left: 0.75rem solid $tre2;
+            border-right: 0.75rem solid $tre2;
+            top: 12rem;
+            background: repeating-linear-gradient(
+              $none,
+              $none 4rem,
+              $tre2,
+              $tre2 4.5rem
+            );
+            z-index: -200;
+
+            &:before {
+              width: 12rem;
+              height: 12rem;
+              border: 1.15rem dashed $none;
+              border-bottom-color: $tre2;
+              box-shadow: 0 0.75rem 0 $tre2, inset 0 -0.75rem 0 $tre2;
+              top: 0.5rem;
+              border-radius: 5rem;
+              left: -0.5rem;
+              transform: scaleY(-1);
+            }
+
+            &:after {
+              width: 2rem;
+              height: 100%;
+              border-left: 0.75rem solid $tre2;
+              border-right: 0.75rem solid $tre2;
+              left: 9.8rem;
+              background: repeating-linear-gradient(
+                $none,
+                $none 4rem,
+                $tre2,
+                $tre2 4.5rem
+              );
+            }
+          }
+
+          &:nth-of-type(n + 5) > i:nth-of-type(3) {
+            height: 225%;
+          }
+
+          &:nth-of-type(n + 9) > i:nth-of-type(3) {
+            height: 13.5rem;
+          }
+        }
+      }
+
+      .hs.row#{$i + 1}.col#{$x}:checked ~ {
+        .hs.row#{$i}.col#{$x}:checked ~ {
+          div > div > house > .row#{$i}.col#{$x} {
+            border-bottom: none;
+
+            & > i:nth-of-type(3) {
+              display: none !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+//bottom row
+@for $i from 23 through 26 {
+  [id^="cb#{$i}"]:checked ~ div > div > house > [for="ncb#{$i}"] {
+    box-shadow: 0 0.5rem 0 $base;
+
+    & > i:nth-of-type(3) {
+      //door
+      width: 4rem;
+      height: 9rem;
+      right: 0;
+      margin: auto;
+      top: 3.5rem;
+      border-radius: 0.5rem;
+      //bushes
+      &:before {
+        width: 7rem;
+        height: 4rem;
+        left: -8em;
+        top: 6rem;
+        border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem;
+        background: $r4;
+        box-shadow: 3rem 1rem 0 -1rem $r41,
+          //
+            14rem
+            0.5rem
+            0 -0.5rem
+            $r42,
+          //
+            10rem
+            1rem
+            0 -1.25rem
+            $r4;
+      }
+      //flowers
+      &:after {
+        width: 0.75rem;
+        height: 0.75rem;
+        background: #fff;
+        border-radius: 50%;
+        left: -5rem;
+        top: 7rem;
+        box-shadow: 2rem 0.5rem 0 -0.1rem #fff,
+          //
+            1rem
+            1.5rem
+            0 -0.05rem
+            #fff,
+          //
+            15rem
+            1.5rem
+            0 -0.05rem
+            #fff,
+          //
+            16rem
+            1rem
+            0 -0.1rem
+            #fff;
+      }
+    }
+    //differences
+    &.col3 > i:nth-of-type(3) {
+      //bushes
+      &:before {
+        height: 3rem;
+        left: -8.5em;
+        top: 7rem;
+        background: $r4;
+        box-shadow: 3rem 0.75rem 0 -1rem $r41,
+          //
+            14rem
+            1rem
+            0
+            0.5rem
+            $r4,
+          //
+            10rem
+            0.5rem
+            0 -0.5rem
+            $r42;
+      }
+      //flowers
+      &:after {
+        left: -7rem;
+      }
+    }
+
+    &.col2 > i:nth-of-type(3) {
+      //bushes
+      &:before {
+        height: 3.5rem;
+        width: 6rem;
+        left: -7em;
+        top: 6.5rem;
+        background: $r4;
+        box-shadow: 3rem 0.75rem 0 -1rem $r41,
+          //
+            13rem
+            1rem
+            0
+            0.5rem
+            $r42,
+          //
+            9rem
+            0.5rem
+            0 -0.5rem
+            $r41;
+      }
+      //flowers
+      &:after {
+        left: -7rem;
+      }
+    }
+
+    &.col1 > i:nth-of-type(3) {
+      //bushes
+      &:before {
+        width: 6rem;
+        height: 3rem;
+        left: -6.5em;
+        top: 7rem;
+        border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem;
+        background: $r41;
+        box-shadow: 3rem 0.5rem 0 -0.75rem $r4,
+          //
+            9rem
+            0.5rem
+            0 -0.5rem
+            $r4,
+          //
+            12rem -0.25rem
+            0
+            0.5rem
+            $r42;
+      }
+      //flowers
+      &:after {
+        width: 0.75rem;
+        height: 0.75rem;
+        background: #fff;
+        border-radius: 50%;
+        left: -5rem;
+        top: 7rem;
+        box-shadow: 2rem 0.5rem 0 -0.1rem #fff,
+          //
+            1rem
+            0.75rem
+            0 -0.05rem
+            #fff,
+          //
+            16rem
+            1.5rem
+            0 -0.05rem
+            #fff,
+          //
+            15rem
+            1rem
+            0 -0.1rem
+            #fff;
+      }
+    }
+  }
+
+  #cb#{$i}:checked
+    ~ #cb#{$i
+    + 1}:not(:checked)
+    ~ div
+    > div
+    > house
+    > [for="ncb#{$i}"],
+  #cb23:checked
+    ~ #cb24:checked
+    ~ #cb25:checked
+    ~ #cb26:checked
+    ~ div
+    > div
+    > house
+    > [for="ncb24"],
+  #cb26:checked ~ div > div > house > [for="ncb26"] {
+    & > i:nth-of-type(3) {
+      //door
+      background: radial-gradient(
+          circle at 80% center,
+          $r2 0.25rem,
+          $none 0.25rem
+        ),
+        radial-gradient(circle at 81% 52%, $shadow 0.25rem, $none 0.4rem), $r3;
+      box-shadow: inset 0 0.5rem 1rem $shadow;
+    }
+
+    &.col#{random(2 + 2)} > i:nth-of-type(3) {
+      //door
+      background: radial-gradient(
+          circle at 80% center,
+          $r2 0.25rem,
+          $none 0.25rem
+        ),
+        radial-gradient(circle at 81% 52%, $shadow 0.25rem, $none 0.4rem), $tre1;
+    }
+
+    &.col#{random(2)} > i:nth-of-type(3) {
+      //door
+      background: radial-gradient(
+          circle at 80% center,
+          $r2 0.25rem,
+          $none 0.25rem
+        ),
+        radial-gradient(circle at 81% 52%, $shadow 0.25rem, $none 0.4rem),
+        $smoke;
+    }
+
+    & > i:nth-of-type(4) {
+      transform: scale(0.5);
+      //window
+      box-shadow: inset 0 0 0 0.5rem $ls,
+        //
+          inset
+          0
+          0
+          0.5rem
+          $ds,
+        //
+          inset
+          0
+          0
+          0
+          0.5rem
+          $r3,
+        //
+          inset
+          0
+          0
+          1rem
+          1rem
+          $ds,
+        //
+          inset
+          0 -2rem
+          0
+          #000,
+        //
+          inset
+          0 -3.5rem
+          0
+          $tre2;
+
+      &:after {
+        height: 0.5rem;
+        top: 2.3rem;
+        background: $r3;
+        box-shadow: inset 0 0 0 0.5rem $ls;
+      }
+
+      &:before {
+        width: 0.5rem;
+        left: 2.3rem;
+        background: $r3;
+      }
+    }
+  }
+}
+
+//castle
+
+.hs.house.row4.col2:not(:checked)
+  ~ .hs.row4.col3:checked
+  ~ .hs.house.row4.col4:not(:checked)
+  ~ .hs.house.row3.col2:not(:checked)
+  ~ .hs.row3.col3:checked
+  ~ .hs.house.row3.col4:not(:checked)
+  ~ .hs.house.row2.col2:not(:checked)
+  ~ .hs.row2.col3:checked
+  ~ .hs.house.row2.col4:not(:checked)
+  ~ .hs.house.row1.col2:not(:checked)
+  ~ .hs.row1.col3:checked
+  ~ .hs.house.row1.col4:not(:checked)
+  ~ {
+  div > div > house > .row1.col3,
+  div > div > house > .row2.col3,
+  div > div > house > .row3.col3,
+  div > div > house > .row4.col3 {
+    background: $stone;
+    color: $stone;
+    z-index: 310;
+
+    & > i:nth-of-type(4),
+    & > i:nth-of-type(3) {
+      border-radius: 50% 50% 0.3rem 0.3rem;
+    }
+
+    & > i:nth-of-type(3) {
+      height: 10rem;
+      width: 4.5rem;
+      top: 2.5rem;
+
+      &:before {
+        top: 8rem;
+      }
+
+      &:after {
+        top: 8rem;
+      }
+    }
+
+    & > i:nth-of-type(4) {
+      &:after {
+        box-shadow: inset 0 0 0 0.5rem $ls;
+      }
+    }
+  }
+
+  div > div > house > .row1.col3 {
+    & > i:nth-of-type(1) {
+      display: none;
+    }
+
+    & > i:nth-of-type(2) {
+      border: 1rem solid $none;
+      border-left: 3rem solid $r1;
+      top: -8.5rem;
+      left: 4.25rem;
+      box-shadow: none;
+
+      &:before {
+        top: 3.25rem;
+        left: -8.25rem;
+        background: $stone;
+        width: 2.75rem;
+        height: 5rem;
+        border-radius: 0.25rem 0.25rem 50% 50%;
+        box-shadow: 4rem 0 0 $stone,
+          //
+            8rem 0 0 $stone,
+          //
+            12rem 0 0 $stone;
+      }
+
+      &:after {
+        width: 14.5rem;
+        height: 3rem;
+        top: 6.25rem;
+        border-radius: 0 0 2rem 2rem;
+        background: $stone;
+        left: -8.25rem;
+        filter: none;
+        border: none;
+        box-shadow: none;
+      }
+    }
+
+    & > i:nth-of-type(4) {
+      &:before {
+        box-shadow: inset 0 0 0 0.5rem $ls,
+          //
+            -2rem -12.5rem 0 $tre2;
+      }
+    }
+  }
+}
+
+//lighthouse
+
+.hs.house.row4.col1:not(:checked)
+  ~ .hs.house.row4.col2:checked
+  ~ .hs.house.row4.col3:not(:checked)
+  ~ .hs.house.row3.col1:not(:checked)
+  ~ .hs.shed.row3.col2:checked
+  ~ .hs.house.row3.col3:not(:checked)
+  ~ .hs.house.row2.col1:not(:checked)
+  ~ .hs.house.row2.col2:checked
+  ~ .hs.house.row2.col3:not(:checked)
+  ~ .hs.house.row1.col1:not(:checked)
+  ~ .hs.shed.row1.col2:checked
+  ~ .hs.house.row1.col3:not(:checked)
+  ~ {
+  div > div > house > .row1.col2,
+  div > div > house > .row2.col2,
+  div > div > house > .row3.col2,
+  div > div > house > .row4.col2 {
+    z-index: 310;
+    background: none;
+    border: none;
+    //back
+    &:before,
+    &:after {
+      width: 80%;
+      height: 105%;
+      background: linear-gradient(to right, $s1, currentColor);
+      transform: skewX(-2deg);
+      border-radius: 0.1rem 0.1rem 50% 50% / 50% 50% 0.25rem 0.25rem;
+      top: 0;
+      left: -1rem;
+      box-shadow: none;
+      filter: none;
+      opacity: 1;
+    }
+
+    &:after {
+      left: auto;
+      right: -1rem;
+      transform: skewX(2deg);
+      background: linear-gradient(to right, $none, currentColor, $sd);
+    }
+
+    & > i:nth-of-type(4) {
+      border-radius: 50%;
+    }
+
+    & > i:nth-of-type(3) {
+      border-radius: 2rem 2rem 0.5rem 0.5rem;
+    }
+
+    & > i:nth-of-type(4) {
+      &:after {
+        box-shadow: inset 0 0 0 0.5rem $ls;
+      }
+    }
+  }
+  //light
+  div > div > house > .row1.col2 {
+    & > i:nth-of-type(1) {
+      display: none;
+    }
+
+    & > i:nth-of-type(2) {
+      width: 8rem;
+      height: 12rem;
+      border: 0.5rem solid $none;
+      border-top: 1rem solid $smoke;
+      border-bottom: 6rem solid $dark;
+      border-radius: 0.5rem 0.5rem 0 0;
+      top: -12rem;
+      left: 0;
+      right: 0;
+      margin: auto;
+      background: repeating-linear-gradient(
+          to right,
+          $smoke 0.5rem,
+          $smoke 1rem,
+          $none 1rem,
+          $none 3.25rem
+        ),
+        //
+          repeating-linear-gradient(
+            45deg,
+            $dark,
+            $dark 0.2rem,
+            $none 0.5rem,
+            $none 1rem
+          ),
+        //
+          repeating-linear-gradient(
+            -45deg,
+            $dark,
+            $dark 0.2rem,
+            $none 0.5rem,
+            $none 1rem
+          );
+      box-shadow: inset 0 -1rem 0 $smoke;
+      background-size: cover;
+
+      &:before {
+        border: 3rem solid $none;
+        width: 6.5rem;
+        box-shadow: inset 0 3rem 0 $dark;
+        border-bottom-color: $tre2;
+        top: -10rem;
+        right: 0;
+        margin: auto;
+        height: 9rem;
+        border-radius: 0;
+        background: none;
+      }
+
+      &:after {
+        width: 12.5rem;
+        background: repeating-linear-gradient(
+          to right,
+          $smoke,
+          $smoke 0.5rem,
+          $none 0.5rem,
+          $none 1.32rem
+        );
+        height: 5rem;
+        top: 6rem;
+        border-radius: 0.5rem;
+        border: none;
+        border-bottom: 1rem solid $smoke;
+        border-top: 0.5rem solid $smoke;
+        left: -10rem;
+        right: -10rem;
+        margin: auto;
+        box-shadow: none;
+        display: block;
+      }
+    }
+  }
+
+  div > div > house > .row3.col2 {
+    //back
+    color: $stone;
+
+    &:before,
+    &:after {
+      left: -0.5rem;
+    }
+
+    &:after {
+      left: auto;
+      right: -0.5rem;
+    }
+  }
+
+  div > div > house > .row2.col2 {
+    //back
+    &:before,
+    &:after {
+      left: 0;
+    }
+
+    &:after {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  div > div > house > .row1.col2 {
+    color: $stone;
+    //back
+    &:before,
+    &:after {
+      left: 0.5rem;
+    }
+
+    &:after {
+      left: auto;
+      right: 0.5rem;
+    }
+  }
+
+  text {
+    transform: scale(1) !important;
+    z-index: 410;
+    transition: all 0.5s 1s ease-in-out;
+    opacity: 1;
+
+    welldone {
+      display: block;
+    }
+
+    gameover {
+      display: none;
+    }
+  }
+}
+
+.hs.row2.col2:checked ~ {
+  div > div > house > .row2.col2 {
+    & > i:nth-of-type(4) {
+      border-radius: 50% !important;
+    }
+
+    & > i:nth-of-type(4) {
+      &:after {
+        box-shadow: inset 0 0 0 0.5rem $ls;
+      }
+    }
+  }
+}
+
+.hs.house.row4.col2:checked ~ .hs.shed.row3.col2:checked ~ {
+  div > div > house > .row3.col2 {
+    & > i:nth-of-type(4) {
+      border-radius: 50%;
+    }
+
+    & > i:nth-of-type(4) {
+      &:after {
+        box-shadow: inset 0 0 0 0.5rem $ls;
+      }
+    }
+  }
+}
+// ## logic
+//
+//
+//
+//
+
+house label,
+shed label {
+  opacity: 0;
+
+  & *,
+  &:after,
+  &:before {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes pop {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -12rem, 0);
+  }
+
+  99% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes popup {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 12rem, 0);
+  }
+
+  99% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+$row: 1, 2, 3, 4;
+
+@each $i in $row {
+  $col: 1, 2, 3, 4;
+  //shed or house
+  @each $x in $col {
+    .shed.row#{$i}.col#{$x}:checked ~ div > div > shed > .row#{$i}.col#{$x},
+    .house.row#{$i}.col#{$x}:checked ~ div > div > house > .row#{$i}.col#{$x} {
+      opacity: 1;
+
+      &:after,
+      & *:after {
+        animation: pop 0.1s linear forwards;
+      }
+
+      &:before,
+      & *:before {
+        animation: popup 0.1s linear forwards;
+      }
+    }
+
+    .shed.row#{$i}.col#{$x}:checked ~ div > div > house > .row#{$i}.col#{$x} {
+      & > i:nth-of-type(5) {
+        display: none !important;
+      }
+    }
+
+    //right
+    .house.row#{$i}.col#{$x}:checked
+      ~ div
+      > div
+      > hbtn
+      > .row#{$i}.col#{$x
+      -
+      1} {
+      z-index: 100;
+    }
+    //left
+    .house.row#{$i}.col#{$x}:checked
+      ~ div
+      > div
+      > hbtn
+      > .row#{$i}.col#{$x
+      + 1} {
+      z-index: 100;
+    }
+    //down
+    .house.row#{$i}.col#{$x}:checked
+      ~ div
+      > div
+      > hbtn
+      > .row#{$i
+      + 1}.col#{$x} {
+      z-index: 100;
+    }
+    //up
+    .house.row#{$i}.col#{$x}:checked
+      ~ div
+      > div
+      > hbtn
+      > .row#{$i
+      -
+      1}.col#{$x} {
+      z-index: 100;
+    }
+  }
+}
+
+$row: 1, 2, 3, 4;
+
+@each $i in $row {
+  $col: 1, 2, 3, 4;
+
+  @each $x in $col {
+    .hs.row#{$i}.col#{$x}:checked ~ div > div > shed > .row#{$i}.col#{$x} {
+      z-index: 300;
+    }
+
+    .hs.row#{$i}.col#{$x}:checked ~ div > div > house > .row#{$i}.col#{$x} {
+      background: $base;
+      z-index: 300;
+      color: $base;
+    }
+
+    .hs.shed.row#{$i}.col#{$x}:checked
+      ~ div
+      > div
+      > house
+      > .row#{$i}.col#{$x} {
+      background: $r1;
+      color: $r1;
+    }
+  }
+}
+
+$col: 1, 2, 3, 4;
+
+@each $c in $col {
+  $row: 1, 2, 3;
+
+  @each $r in $row {
+    $hs: (
+      0: "shed",
+      1: "house"
+    );
+
+    @each $y, $z in $hs {
+      //down fix
+      .house.row#{$r - 1}.col#{$c}:checked ~ {
+        div > div > #{$z} > .row#{$r}.col#{$c} {
+          opacity: $y;
+        }
+      }
+
+      .hs.row#{$r - 1}.col#{$c}:checked ~ {
+        .house.row#{$r - 2}.col#{$c}:checked ~ {
+          div > div > #{$z} > .row#{$r}.col#{$c} {
+            opacity: $y;
+          }
+        }
+      }
+
+      //sh
+      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+        div > div > #{$z} > .row#{$r + 1}.col#{$c - 1},
+        div > div > #{$z} > .row#{$r}.col#{$c - 1},
+        div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} {
+          opacity: $y;
+        }
+      }
+
+      .hs.row#{$r}.col#{$c - 1}:checked ~ {
+        .house.row#{$r}.col#{$c}:checked ~ {
+          //..s
+          //.ssh
+          //..s
+          div > div > #{$z} > .row#{$r}.col#{$c - 2},
+          div > div > #{$z} > .row#{$r + 1}.col#{$c - 1},
+          div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c - 2}:checked ~ {
+        .hs.row#{$r}.col#{$c - 1}:checked ~ {
+          .house.row#{$r}.col#{$c}:checked ~ {
+            //.s
+            //sssh
+            //.s
+            div > div > #{$z} > .row#{$r}.col#{$c - 3},
+            div > div > #{$z} > .row#{$r + 1}.col#{$c - 2},
+            div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c - 3}:checked ~ {
+        .hs.row#{$r}.col#{$c - 2}:checked ~ {
+          .hs.row#{$r}.col#{$c - 1}:checked ~ {
+            .house.row#{$r}.col#{$c}:checked ~ {
+              //s
+              //sssh
+              //s
+              div > div > #{$z} > .row#{$r + 1}.col#{$c - 3},
+              div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r}.col#{$c
+        -
+        1}:checked
+        ~ .house.row#{$r}.col#{$c}:checked
+        ~ {
+        .hs.row#{$r - 1}.col#{$c - 2}:checked ~ {
+          //s
+          //s
+          //ssh
+          div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c
+        -
+        3}:checked
+        ~ .hs.row#{$r}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r}.col#{$c
+        -
+        1}:checked
+        ~ .house.row#{$r}.col#{$c}:checked
+        ~ {
+        .hs.row#{$r - 1}.col#{$c - 3}:checked ~ {
+          .hs.row#{$r - 2}.col#{$c - 3}:checked ~ {
+            //ss
+            //s
+            //sssh
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3},
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c
+        -
+        3}:checked
+        ~ .hs.row#{$r}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r}.col#{$c
+        -
+        1}:checked
+        ~ .house.row#{$r}.col#{$c}:checked
+        ~ {
+        .hs.row#{$r - 1}.col#{$c - 3}:checked ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            2}:checked
+            ~ {
+            //sss
+            //s
+            //sssh
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c
+        -
+        3}:checked
+        ~ .hs.row#{$r}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r}.col#{$c
+        -
+        1}:checked
+        ~ .house.row#{$r}.col#{$c}:checked
+        ~ {
+        .hs.row#{$r - 1}.col#{$c - 3}:checked ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            1}:checked
+            ~ {
+            //ssss
+            //s
+            //sssh
+            div > div > #{$z} > .row#{$r - 2}.col#{$c} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r}.col#{$c
+        -
+        1}:checked
+        ~ .house.row#{$r}.col#{$c}:checked
+        ~ {
+        .hs.row#{$r - 1}.col#{$c - 2}:checked ~ {
+          .hs.row#{$r - 2}.col#{$c - 2}:checked ~ {
+            //sss
+            //.s
+            //.ssh
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 1},
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r}.col#{$c
+        -
+        1}:checked
+        ~ .house.row#{$r}.col#{$c}:checked
+        ~ {
+        .hs.row#{$r - 1}.col#{$c - 2}:checked ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            1}:checked
+            ~ {
+            //.sss
+            //.s
+            //.ssh
+            div > div > #{$z} > .row#{$r - 2}.col#{$c} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r - 1}.col#{$c - 1}:checked ~ {
+          .hs.row#{$r - 2}.col#{$c - 1}:checked ~ {
+            //..ss
+            //..s
+            //..sh
+            div > div > #{$z} > .row#{$r - 2}.col#{$c},
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r - 1}.col#{$c - 1}:checked ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            1}:checked
+            ~ {
+            //sss
+            //s.s
+            //..sh
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3},
+            div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          3}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            1}:checked
+            ~ {
+            //sss
+            //s.s
+            //s.sh
+            div > div > #{$z} > .row#{$r}.col#{$c - 3} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r + 1}.col#{$c - 1}:checked ~ {
+        .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+          //..sh
+          //..s
+          //..s
+          div > div > #{$z} > .row#{$r + 2}.col#{$c - 1} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r + 1}.col#{$c - 2}:checked ~ {
+        .hs.row#{$r}.col#{$c
+          -
+          2}:checked
+          ~ .hs.row#{$r}.col#{$c
+          -
+          1}:checked
+          ~ .house.row#{$r}.col#{$c}:checked
+          ~ {
+          //.ssh
+          //.s.
+          //.s.
+          div > div > #{$z} > .row#{$r + 2}.col#{$c - 2} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r + 1}.col#{$c - 3}:checked ~ {
+        .hs.row#{$r}.col#{$c
+          -
+          3}:checked
+          ~ .hs.row#{$r}.col#{$c
+          -
+          2}:checked
+          ~ .hs.row#{$r}.col#{$c
+          -
+          1}:checked
+          ~ .house.row#{$r}.col#{$c}:checked
+          ~ {
+          //sssh
+          //s
+          //s
+          div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r + 2}.col#{$c - 3}:checked ~ {
+        .hs.row#{$r + 1}.col#{$c - 3}:checked ~ {
+          .hs.row#{$r}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r}.col#{$c
+            -
+            1}:checked
+            ~ .house.row#{$r}.col#{$c}:checked
+            ~ {
+            //sssh
+            //s
+            //ss
+            div > div > #{$z} > .row#{$r + 2}.col#{$c - 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 2}.col#{$c
+        -
+        3}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        -
+        2}:checked
+        ~ {
+        .hs.row#{$r + 1}.col#{$c - 3}:checked ~ {
+          .hs.row#{$r}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r}.col#{$c
+            -
+            1}:checked
+            ~ .house.row#{$r}.col#{$c}:checked
+            ~ {
+            //sssh
+            //s
+            //sss
+            div > div > #{$z} > .row#{$r + 2}.col#{$c - 1} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 2}.col#{$c
+        -
+        3}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        -
+        1}:checked
+        ~ {
+        .hs.row#{$r + 1}.col#{$c - 3}:checked ~ {
+          .hs.row#{$r}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r}.col#{$c
+            -
+            1}:checked
+            ~ .house.row#{$r}.col#{$c}:checked
+            ~ {
+            //sssh
+            //s
+            //ssss
+            div > div > #{$z} > .row#{$r + 2}.col#{$c} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r + 2}.col#{$c - 2}:checked ~ {
+        .hs.row#{$r + 1}.col#{$c - 2}:checked ~ {
+          .hs.row#{$r}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r}.col#{$c
+            -
+            1}:checked
+            ~ .house.row#{$r}.col#{$c}:checked
+            ~ {
+            //.ssh
+            //.s
+            //sss
+            div > div > #{$z} > .row#{$r + 2}.col#{$c - 3},
+            div > div > #{$z} > .row#{$r + 2}.col#{$c - 2},
+            div > div > #{$z} > .row#{$r + 2}.col#{$c - 1} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 2}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        -
+        1}:checked
+        ~ {
+        .hs.row#{$r + 1}.col#{$c - 2}:checked ~ {
+          .hs.row#{$r}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r}.col#{$c
+            -
+            1}:checked
+            ~ .house.row#{$r}.col#{$c}:checked
+            ~ {
+            //.ssh
+            //.s
+            //.sss
+            div > div > #{$z} > .row#{$r + 2}.col#{$c} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r + 2}.col#{$c - 1}:checked ~ {
+        .hs.row#{$r + 1}.col#{$c - 1}:checked ~ {
+          .hs.row#{$r}.col#{$c
+            -
+            1}:checked
+            ~ .house.row#{$r}.col#{$c}:checked
+            ~ {
+            //..sh
+            //..s
+            //.sss
+            div > div > #{$z} > .row#{$r + 2}.col#{$c - 1},
+            div > div > #{$z} > .row#{$r + 2}.col#{$c},
+            div > div > #{$z} > .row#{$r + 2}.col#{$c - 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 2}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        -
+        1}:checked
+        ~ {
+        .hs.row#{$r + 1}.col#{$c - 1}:checked ~ {
+          .hs.row#{$r}.col#{$c
+            -
+            1}:checked
+            ~ .house.row#{$r}.col#{$c}:checked
+            ~ {
+            //..sh
+            //..s
+            //sss
+            div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 2}.col#{$c
+        -
+        3}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        -
+        1}:checked
+        ~ {
+        .hs.row#{$r + 1}.col#{$c - 1}:checked ~ {
+          .hs.row#{$r}.col#{$c
+            -
+            1}:checked
+            ~ .house.row#{$r}.col#{$c}:checked
+            ~ {
+            //..sh
+            //s.s
+            //sss
+            div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 2}.col#{$c
+        -
+        3}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        -
+        1}:checked
+        ~ {
+        .hs.row#{$r
+          + 1}.col#{$c
+          -
+          3}:checked
+          ~ .hs.row#{$r
+          + 1}.col#{$c
+          -
+          1}:checked
+          ~ {
+          .hs.row#{$r}.col#{$c
+            -
+            1}:checked
+            ~ .house.row#{$r}.col#{$c}:checked
+            ~ {
+            //s.sh
+            //s.s
+            //sss
+            div > div > #{$z} > .row#{$r}.col#{$c - 3} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r + 2}.col#{$c - 2}:checked ~ {
+        .hs.row#{$r
+          + 1}.col#{$c
+          -
+          2}:checked
+          ~ .hs.row#{$r
+          + 1}.col#{$c
+          -
+          1}:checked
+          ~ {
+          .hs.row#{$r}.col#{$c
+            -
+            1}:checked
+            ~ .house.row#{$r}.col#{$c}:checked
+            ~ {
+            //..sh
+            //.ss
+            //ss
+            div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 2}.col#{$c
+        -
+        3}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        -
+        1}:checked
+        ~ {
+        .hs.row#{$r
+          + 1}.col#{$c
+          -
+          3}:checked
+          ~ .hs.row#{$r
+          + 1}.col#{$c
+          -
+          1}:checked
+          ~ .house.row#{$r
+          + 1}.col#{$c}:checked
+          ~ {
+          //s
+          //s.sh
+          //sss
+          div > div > #{$z} > .row#{$r}.col#{$c - 3} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 1}.col#{$c
+        -
+        3}:checked
+        ~ .hs.row#{$r
+        + 1}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r
+        + 1}.col#{$c
+        -
+        1}:checked
+        ~ {
+        .hs.row#{$r}.col#{$c
+          -
+          3}:checked
+          ~ .hs.row#{$r}.col#{$c
+          -
+          1}:checked
+          ~ .house.row#{$r}.col#{$c}:checked
+          ~ {
+          .hs.row#{$r - 1}.col#{$c - 3}:checked ~ {
+            //ss
+            //s.sh
+            //sss
+            div > div > #{$z} > .row#{$r - 1}.col#{$c - 2},
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r - 1}.col#{$c - 1}:checked ~ {
+          //.ss
+          //..sh
+          div > div > #{$z} > .row#{$r - 2}.col#{$c - 1},
+          div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          2}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ {
+          .hs.row#{$r - 2}.col#{$c - 2}:checked ~ {
+            //ss
+            //.ss
+            //..sh
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 2},
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            1}:checked
+            ~ {
+            .hs.row#{$r - 3}.col#{$c - 2}:checked ~ {
+              //ss
+              //.ss
+              //..ss
+              //...h
+              div > div > #{$z} > .row#{$r - 3}.col#{$c - 2},
+              div > div > #{$z} > .row#{$r - 3}.col#{$c - 3} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+      }
+
+      .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r - 1}.col#{$c}:checked ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 2}:checked
+            ~ {
+            .hs.row#{$r - 3}.col#{$c + 2}:checked ~ {
+              //..ss
+              //sss
+              //s
+              //h
+              div > div > #{$z} > .row#{$r - 3}.col#{$c + 3},
+              div > div > #{$z} > .row#{$r - 3}.col#{$c + 2} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          3}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          2}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ {
+          //s
+          //sss
+          //s.sh
+          div > div > #{$z} > .row#{$r}.col#{$c - 3},
+          div > div > #{$z} > .row#{$r - 2}.col#{$c - 3},
+          div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ {
+          .hs.row#{$r
+            -
+            3}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            //s
+            //sss
+            //s.ss
+            //...h
+            div > div > #{$z} > .row#{$r - 1}.col#{$c - 3},
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3},
+            div > div > #{$z} > .row#{$r - 3}.col#{$c - 3} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c
+        -
+        3}:checked
+        ~ .hs.row#{$r}.col#{$c
+        -
+        1}:checked
+        ~ .house.row#{$r}.col#{$c}:checked
+        ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          3}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          2}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ {
+          //sss
+          //s.sh
+          //S
+          div > div > #{$z} > .row#{$r}.col#{$c - 3},
+          div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r + 1}.col#{$c - 3}:checked ~ {
+        .hs.row#{$r}.col#{$c
+          -
+          3}:checked
+          ~ .hs.row#{$r}.col#{$c
+          -
+          1}:checked
+          ~ .house.row#{$r}.col#{$c}:checked
+          ~ {
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            1}:checked
+            ~ {
+            //sss
+            //s.sh
+            //ss
+            div > div > #{$z} > .row#{$r + 1}.col#{$c - 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          2}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c}:checked
+            ~ {
+            //sss
+            //s.s
+            //s.h
+            div > div > #{$z} > .row#{$r}.col#{$c - 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c - 2}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          2}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ {
+          //sss
+          //s.h
+          //s
+          div > div > #{$z} > .row#{$r}.col#{$c - 2},
+          div > div > #{$z} > .row#{$r + 1}.col#{$c - 2} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c - 3}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          3}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          2}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ {
+          //ssss
+          //s..h
+          //s
+          div > div > #{$z} > .row#{$r}.col#{$c - 3},
+          div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 1}.col#{$c
+        -
+        3}:checked
+        ~ .hs.row#{$r
+        + 1}.col#{$c
+        -
+        2}:checked
+        ~ {
+        .hs.row#{$r}.col#{$c - 3}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            //ssss
+            //s..h
+            //sss
+            div > div > #{$z} > .row#{$r + 1}.col#{$c - 2},
+            div > div > #{$z} > .row#{$r + 1}.col#{$c - 1} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r}.col#{$c
+        -
+        1}:checked
+        ~ .house.row#{$r}.col#{$c}:checked
+        ~ {
+        .hs.row#{$r - 1}.col#{$c - 2}:checked ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 1}:checked
+            ~ {
+            //ssss
+            //s..s
+            //ssh
+            div > div > #{$z} > .row#{$r - 2}.col#{$c + 1},
+            div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r - 1}.col#{$c - 1}:checked ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 1}:checked
+            ~ {
+            //ssss
+            //s
+            //sh
+            div > div > #{$z} > .row#{$r - 2}.col#{$c + 1},
+            div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 2}:checked
+          ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 1}:checked
+            ~ {
+            //ssss
+            //s..s
+            //sh.s
+            div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
+            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 2}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 2}:checked
+          ~ {
+          //sss
+          //h.ss
+          //..s
+          div > div > #{$z} > .row#{$r}.col#{$c + 3},
+          div > div > #{$z} > .row#{$r}.col#{$c + 2},
+          div > div > #{$z} > .row#{$r + 1}.col#{$c + 2} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 2}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 3}:checked
+          ~ {
+          //ssss
+          //h.ss
+          //...s
+          div > div > #{$z} > .row#{$r}.col#{$c + 3},
+          div > div > #{$z} > .row#{$r}.col#{$c + 2},
+          div > div > #{$z} > .row#{$r + 1}.col#{$c + 3} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 1}.col#{$c
+        + 2}:checked
+        ~ .hs.row#{$r
+        + 1}.col#{$c
+        + 3}:checked
+        ~ {
+        .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ {
+          .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 3}:checked
+            ~ {
+            //ssss
+            //h..s
+            //.sss
+            div > div > #{$z} > .row#{$r + 1}.col#{$c + 2},
+            div > div > #{$z} > .row#{$r + 1}.col#{$c + 1} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r + 1}.col#{$c + 2}:checked ~ {
+        .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 2}:checked ~ {
+          .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 2}:checked
+            ~ {
+            //sss
+            //h.s
+            //.sss
+            div > div > #{$z} > .row#{$r + 1}.col#{$c + 3},
+            div > div > #{$z} > .row#{$r + 1}.col#{$c + 1} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 1}.col#{$c
+        + 1}:checked
+        ~ .hs.row#{$r
+        + 1}.col#{$c
+        + 2}:checked
+        ~ {
+        .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          //hs
+          //.sss
+          div > div > #{$z} > .row#{$r + 1}.col#{$c + 3},
+          div > div > #{$z} > .row#{$r + 1}.col#{$c + 2} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 1}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          + 1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 2}:checked
+          ~ {
+          //.sss
+          //hs
+          div > div > #{$z} > .row#{$r - 1}.col#{$c + 3},
+          div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 1}.col#{$c
+        + 1}:checked
+        ~ .hs.row#{$r
+        + 1}.col#{$c
+        + 2}:checked
+        ~ .hs.row#{$r
+        + 1}.col#{$c
+        + 3}:checked
+        ~ {
+        .house.row#{$r}.col#{$c}:checked
+          ~ .hs.row#{$r}.col#{$c
+          + 1}:checked
+          ~ .hs.row#{$r}.col#{$c
+          + 3}:checked
+          ~ {
+          //...s
+          //hs.s
+          //.sss
+          div > div > #{$z} > .row#{$r}.col#{$c + 3},
+          div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .house.row#{$r}.col#{$c}:checked
+        ~ .hs.row#{$r}.col#{$c
+        + 1}:checked
+        ~ .hs.row#{$r}.col#{$c
+        + 3}:checked
+        ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          + 1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 2}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 3}:checked
+          ~ {
+          //.sss
+          //hs.s
+          //...s
+          div > div > #{$z} > .row#{$r}.col#{$c + 3},
+          div > div > #{$z} > .row#{$r + 1}.col#{$c + 3} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 1}.col#{$c
+        + 1}:checked
+        ~ .hs.row#{$r
+        + 1}.col#{$c
+        + 2}:checked
+        ~ .hs.row#{$r
+        + 1}.col#{$c
+        + 3}:checked
+        ~ {
+        .house.row#{$r}.col#{$c}:checked
+          ~ .hs.row#{$r}.col#{$c
+          + 1}:checked
+          ~ .hs.row#{$r}.col#{$c
+          + 3}:checked
+          ~ {
+          .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
+            //..ss
+            //hs.s
+            //.sss
+            div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r + 1}.col#{$c + 3}:checked ~ {
+        .house.row#{$r}.col#{$c}:checked
+          ~ .hs.row#{$r}.col#{$c
+          + 1}:checked
+          ~ .hs.row#{$r}.col#{$c
+          + 3}:checked
+          ~ {
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 3}:checked
+            ~ {
+            //.sss
+            //hs.s
+            //..ss
+            div > div > #{$z} > .row#{$r + 1}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 3}:checked
+          ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 2}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 3}:checked
+            ~ {
+            //ssss
+            //s..s
+            //h.ss
+            div > div > #{$z} > .row#{$r}.col#{$c + 3},
+            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 2}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 2}:checked
+          ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 2}:checked
+            ~ {
+            //sss
+            //s.s
+            //h.ss
+            div > div > #{$z} > .row#{$r}.col#{$c + 3},
+            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 3}:checked
+          ~ {
+          .hs.row#{$r
+            -
+            2}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 2}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 3}:checked
+            ~ {
+            //.sss
+            //ss.s
+            //h.ss
+            div > div > #{$z} > .row#{$r}.col#{$c + 3},
+            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r + 1}.col#{$c - 2}:checked ~ {
+        .hs.row#{$r}.col#{$c - 2}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            //sss
+            //s.h
+            //ss
+            div > div > #{$z} > .row#{$r + 1}.col#{$c - 1} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 1}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r
+        + 1}.col#{$c
+        -
+        1}:checked
+        ~ {
+        .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+          //..sh
+          //sss
+          //.s.
+          div > div > #{$z} > .row#{$r + 1}.col#{$c - 2},
+          div > div > #{$z} > .row#{$r + 2}.col#{$c - 2},
+          div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 1}.col#{$c
+        -
+        3}:checked
+        ~ .hs.row#{$r
+        + 1}.col#{$c
+        -
+        2}:checked
+        ~ .hs.row#{$r
+        + 1}.col#{$c
+        -
+        1}:checked
+        ~ {
+        .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
+          //s.sh
+          //sss
+          //s..
+          div > div > #{$z} > .row#{$r}.col#{$c - 3},
+          div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .house.row#{$r - 1}.col#{$c}:checked ~ {
+          div > div > #{$z} > .row#{$r}.col#{$c + 1} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          .house.row#{$r - 1}.col#{$c}:checked ~ {
+            div > div > #{$z} > .row#{$r + 1}.col#{$c + 1},
+            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          .hs.row#{$r}.col#{$c + 2}:checked ~ {
+            .house.row#{$r - 1}.col#{$c}:checked ~ {
+              div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
+              div > div > #{$z} > .row#{$r + 1}.col#{$c + 2},
+              div > div > #{$z} > .row#{$r}.col#{$c + 3} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          .hs.row#{$r}.col#{$c + 2}:checked ~ {
+            .hs.row#{$r}.col#{$c + 3}:checked ~ {
+              .house.row#{$r - 1}.col#{$c}:checked ~ {
+                div > div > #{$z} > .row#{$r + 1}.col#{$c + 3},
+                div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
+                  opacity: $y;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r - 1}.col#{$c}:checked ~ {
+          .house.row#{$r - 2}.col#{$c}:checked ~ {
+            div > div > #{$z} > .row#{$r}.col#{$c + 1} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          .hs.row#{$r - 1}.col#{$c}:checked ~ {
+            .house.row#{$r - 2}.col#{$c}:checked ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c + 2} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          .hs.row#{$r}.col#{$c + 2}:checked ~ {
+            .hs.row#{$r - 1}.col#{$c}:checked ~ {
+              .house.row#{$r - 2}.col#{$c}:checked ~ {
+                div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
+                div > div > #{$z} > .row#{$r}.col#{$c + 3} {
+                  opacity: $y;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          .hs.row#{$r}.col#{$c + 2}:checked ~ {
+            .hs.row#{$r}.col#{$c + 3}:checked ~ {
+              .hs.row#{$r - 1}.col#{$c}:checked ~ {
+                .house.row#{$r - 2}.col#{$c}:checked ~ {
+                  div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
+                    opacity: $y;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      //h..s
+      //s..s
+      //ssss
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          .hs.row#{$r}.col#{$c + 2}:checked ~ {
+            .hs.row#{$r}.col#{$c + 3}:checked ~ {
+              .hs.row#{$r - 1}.col#{$c}:checked ~ {
+                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
+                  .house.row#{$r - 2}.col#{$c}:checked ~ {
+                    div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
+                      opacity: $y;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      //h.s.
+      //s.s.
+      //sss.
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          .hs.row#{$r}.col#{$c + 2}:checked ~ {
+            .hs.row#{$r - 1}.col#{$c}:checked ~ {
+              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
+                .house.row#{$r - 2}.col#{$c}:checked ~ {
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
+                    opacity: $y;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      //h.ss
+      //s..s
+      //ssss
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          .hs.row#{$r}.col#{$c + 2}:checked ~ {
+            .hs.row#{$r}.col#{$c + 3}:checked ~ {
+              .hs.row#{$r - 1}.col#{$c}:checked ~ {
+                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
+                  .house.row#{$r - 2}.col#{$c}:checked ~ {
+                    .hs.row#{$r - 2}.col#{$c + 3}:checked ~ {
+                      div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
+                        opacity: $y;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      //h.ss
+      //s.s.
+      //sss.
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          .hs.row#{$r}.col#{$c + 2}:checked ~ {
+            .hs.row#{$r - 1}.col#{$c}:checked ~ {
+              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
+                .house.row#{$r - 2}.col#{$c}:checked ~ {
+                  .hs.row#{$r - 2}.col#{$c + 2}:checked ~ {
+                    div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
+                      opacity: $y;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      //h...
+      //s.ss
+      //sss.
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          .hs.row#{$r}.col#{$c + 2}:checked ~ {
+            .hs.row#{$r - 1}.col#{$c}:checked ~ {
+              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
+                .house.row#{$r - 2}.col#{$c}:checked ~ {
+                  div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
+                    opacity: $y;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      //h..s
+      //s.ss
+      //sss.
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          .hs.row#{$r}.col#{$c + 2}:checked ~ {
+            .hs.row#{$r - 1}.col#{$c}:checked ~ {
+              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
+                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
+                  .house.row#{$r - 2}.col#{$c}:checked ~ {
+                    div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
+                      opacity: $y;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      //h...
+      //ss..
+      //.ss.
+      .hs.row#{$r}.col#{$c}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ {
+          .house.row#{$r - 2}.col#{$c - 1}:checked ~ {
+            div > div > #{$z} > .row#{$r}.col#{$c + 1} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+      //h...
+      //ss..
+      //.sss
+      .hs.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 1}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ {
+          .house.row#{$r - 2}.col#{$c - 1}:checked ~ {
+            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+      //h...
+      //ss.s
+      //.sss
+      .hs.row#{$r}.col#{$c}:checked
+        ~ .hs.row#{$r}.col#{$c
+        + 1}:checked
+        ~ .hs.row#{$r}.col#{$c
+        + 2}:checked
+        ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ {
+          .house.row#{$r - 2}.col#{$c - 1}:checked ~ {
+            div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+      //h..s
+      //ss.s
+      //.sss
+      .hs.row#{$r}.col#{$c}:checked
+        ~ .hs.row#{$r}.col#{$c
+        + 1}:checked
+        ~ .hs.row#{$r}.col#{$c
+        + 2}:checked
+        ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 2}:checked
+          ~ {
+          .house.row#{$r - 2}.col#{$c - 1}:checked ~ {
+            div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+      //h.ss
+      //ss.s
+      //.sss
+      .hs.row#{$r}.col#{$c}:checked
+        ~ .hs.row#{$r}.col#{$c
+        + 1}:checked
+        ~ .hs.row#{$r}.col#{$c
+        + 2}:checked
+        ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c
+          -
+          1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 2}:checked
+          ~ {
+          .house.row#{$r
+            -
+            2}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 2}:checked
+            ~ {
+            div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+      //h.ss
+      //sss
+      //..ss
+      //not done yet
+      .hs.row#{$r}.col#{$c + 2}:checked ~ {
+        .hs.row#{$r
+          -
+          1}.col#{$c}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 1}:checked
+          ~ .hs.row#{$r
+          -
+          1}.col#{$c
+          + 2}:checked
+          ~ {
+          .house.row#{$r
+            -
+            2}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 2}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 3}:checked
+            ~ {
+            div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
+              opacity: $y;
+            }
+            //experiment
+            div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .house.row#{$r}.col#{$c}:checked ~ {
+        //hs
+        div > div > #{$z} > .row#{$r}.col#{$c + 1} {
+          opacity: $y;
+        }
+        //.s
+        //hss
+        //.s
+        .hs.row#{$r}.col#{$c + 1}:checked ~ {
+          div > div > #{$z} > .row#{$r}.col#{$c + 2},
+          div > div > #{$z} > .row#{$r + 1}.col#{$c + 1},
+          div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} {
+            opacity: $y;
+          }
+          //..s
+          //hsss
+          //..s
+          .hs.row#{$r}.col#{$c + 2}:checked ~ {
+            div > div > #{$z} > .row#{$r}.col#{$c + 3},
+            div > div > #{$z} > .row#{$r + 1}.col#{$c + 2},
+            div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
+              opacity: $y;
+            }
+            //...s
+            //hsss
+            //...s
+            .hs.row#{$r}.col#{$c + 3}:checked ~ {
+              div > div > #{$z} > .row#{$r + 1}.col#{$c + 3},
+              div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r + 1}.col#{$c + 1}:checked ~ {
+        .house.row#{$r}.col#{$c}:checked ~ {
+          .hs.row#{$r}.col#{$c + 1}:checked ~ {
+            //hs
+            //.ss
+            //.s
+            div > div > #{$z} > .row#{$r + 1}.col#{$c + 2},
+            div > div > #{$z} > .row#{$r + 2}.col#{$c + 1} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r + 2}.col#{$c + 1}:checked ~ {
+        .hs.row#{$r + 1}.col#{$c + 1}:checked ~ {
+          .house.row#{$r}.col#{$c}:checked ~ {
+            .hs.row#{$r}.col#{$c + 1}:checked ~ {
+              //hs
+              //.s
+              //sss
+              div > div > #{$z} > .row#{$r + 2}.col#{$c},
+              div > div > #{$z} > .row#{$r + 2}.col#{$c + 2} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 2}.col#{$c
+        + 1}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        + 2}:checked
+        ~ {
+        .hs.row#{$r + 1}.col#{$c + 1}:checked ~ {
+          .house.row#{$r}.col#{$c}:checked ~ {
+            .hs.row#{$r}.col#{$c + 1}:checked ~ {
+              //hs
+              //.s
+              //.sss
+              div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 2}.col#{$c
+        + 1}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        + 2}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        + 3}:checked
+        ~ {
+        .hs.row#{$r + 1}.col#{$c + 1}:checked ~ {
+          .house.row#{$r}.col#{$c}:checked ~ {
+            .hs.row#{$r}.col#{$c + 1}:checked ~ {
+              //hs
+              //.s.s
+              //.sss
+              div > div > #{$z} > .row#{$r + 1}.col#{$c + 3} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 2}.col#{$c
+        + 1}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        + 2}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        + 3}:checked
+        ~ {
+        .hs.row#{$r
+          + 1}.col#{$c
+          + 1}:checked
+          ~ .hs.row#{$r
+          + 1}.col#{$c
+          + 3}:checked
+          ~ {
+          .house.row#{$r}.col#{$c}:checked ~ {
+            .hs.row#{$r}.col#{$c + 1}:checked ~ {
+              //hs.s
+              //.s.s
+              //.sss
+              div > div > #{$z} > .row#{$r}.col#{$c + 3} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r + 1}.col#{$c + 2}:checked ~ {
+        .house.row#{$r}.col#{$c}:checked
+          ~ .hs.row#{$r}.col#{$c
+          + 1}:checked
+          ~ .hs.row#{$r}.col#{$c
+          + 2}:checked
+          ~ {
+          //hss
+          //..ss
+          //..s
+          div > div > #{$z} > .row#{$r + 1}.col#{$c + 3},
+          div > div > #{$z} > .row#{$r + 2}.col#{$c + 2} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r + 2}.col#{$c + 2}:checked ~ {
+        .hs.row#{$r + 1}.col#{$c + 2}:checked ~ {
+          .house.row#{$r}.col#{$c}:checked
+            ~ .hs.row#{$r}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r}.col#{$c
+            + 2}:checked
+            ~ {
+            //hss
+            //..s
+            //.sss
+            div > div > #{$z} > .row#{$r + 2}.col#{$c + 1},
+            div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 2}.col#{$c
+        + 1}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        + 2}:checked
+        ~ {
+        .hs.row#{$r + 1}.col#{$c + 2}:checked ~ {
+          .house.row#{$r}.col#{$c}:checked
+            ~ .hs.row#{$r}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r}.col#{$c
+            + 2}:checked
+            ~ {
+            //hss
+            //..s
+            //sss
+            div > div > #{$z} > .row#{$r + 2}.col#{$c} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r + 1}.col#{$c + 3}:checked ~ {
+        .house.row#{$r}.col#{$c}:checked
+          ~ .hs.row#{$r}.col#{$c
+          + 1}:checked
+          ~ .hs.row#{$r}.col#{$c
+          + 2}:checked
+          ~ .hs.row#{$r}.col#{$c
+          + 3}:checked
+          ~ {
+          //hsss
+          //...s
+          //...s
+          div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} {
+            opacity: $y;
+          }
+        }
+      }
+
+      .hs.row#{$r + 2}.col#{$c + 3}:checked ~ {
+        .hs.row#{$r + 1}.col#{$c + 3}:checked ~ {
+          .house.row#{$r}.col#{$c}:checked
+            ~ .hs.row#{$r}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r}.col#{$c
+            + 2}:checked
+            ~ .hs.row#{$r}.col#{$c
+            + 3}:checked
+            ~ {
+            //hsss
+            //...s
+            //..ss
+            div > div > #{$z} > .row#{$r + 2}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 2}.col#{$c
+        + 2}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        + 3}:checked
+        ~ {
+        .hs.row#{$r + 1}.col#{$c + 3}:checked ~ {
+          .house.row#{$r}.col#{$c}:checked
+            ~ .hs.row#{$r}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r}.col#{$c
+            + 2}:checked
+            ~ .hs.row#{$r}.col#{$c
+            + 3}:checked
+            ~ {
+            //hsss
+            //...s
+            //.sss
+            div > div > #{$z} > .row#{$r + 2}.col#{$c + 1} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      .hs.row#{$r
+        + 2}.col#{$c
+        + 1}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        + 2}:checked
+        ~ .hs.row#{$r
+        + 2}.col#{$c
+        + 3}:checked
+        ~ {
+        .hs.row#{$r + 1}.col#{$c + 3}:checked ~ {
+          .house.row#{$r}.col#{$c}:checked
+            ~ .hs.row#{$r}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r}.col#{$c
+            + 2}:checked
+            ~ .hs.row#{$r}.col#{$c
+            + 3}:checked
+            ~ {
+            //hsss
+            //...s
+            //ssss
+            div > div > #{$z} > .row#{$r + 2}.col#{$c} {
+              opacity: $y;
+            }
+          }
+        }
+      }
+
+      ////////////////////////////////
+      //UP
+      //x...
+      //x...
+      //x...
+      //x...
+      .house.row#{$r + 1}.col#{$c}:checked ~ {
+        div > div > #{$z} > .row#{$r}.col#{$c} {
+          opacity: $y;
+        }
+        //RIGHT
+        //xxx.
+        //x.xx
+        //xx.x
+        //...x
+        .hs.row#{$r}.col#{$c - 3}:checked ~ {
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              3}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c - 2} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+        //RIGHT
+        //xxx.
+        //x.xx
+        //xx.x
+        //...x
+        .hs.row#{$r}.col#{$c - 3}:checked ~ {
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              3}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c - 2} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+        //RIGHT
+        //....
+        //.xxx
+        //xx.x
+        //...x
+        .hs.row#{$r}.col#{$c - 2}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ {
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            div > div > #{$z} > .row#{$r}.col#{$c - 3} {
+              opacity: $y;
+            }
+          }
+        }
+        //RIGHT
+        //.xxx
+        //.x.x
+        //xx.x
+        //...x
+        .hs.row#{$r}.col#{$c - 2}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ {
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c - 3} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+
+        .hs.row#{$r}.col#{$c}:checked ~ {
+          //RIGHT
+          //....
+          //xxxx
+          //x..x
+          //...x
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            div > div > #{$z} > .row#{$r}.col#{$c - 3} {
+              opacity: $y;
+            }
+          }
+          //RIGHT
+          //....
+          //.xxx
+          //.x.x
+          //...x
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            div > div > #{$z} > .row#{$r}.col#{$c - 2} {
+              opacity: $y;
+            }
+          }
+          //RIGHT
+          //.xxx
+          //.x.x
+          //...x
+          //...x
+          .hs.row#{$r - 1}.col#{$c}:checked ~ {
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} {
+                opacity: $y;
+              }
+            }
+          }
+          //RIGHT
+          //.xxx
+          //.x.x
+          //.x.x
+          //...x
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
+                opacity: $y;
+              }
+
+              div > div > #{$z} > .row#{$r}.col#{$c - 2} {
+                opacity: $y;
+              }
+            }
+          }
+          //RIGHT
+          //.xxx
+          //.x.x
+          //xx.x
+          //...x
+          .hs.row#{$r - 2}.col#{$c - 2}:checked ~ {
+            .hs.row#{$r
+              -
+              1}.col#{$c
+              -
+              2}:checked
+              ~ .hs.row#{$r
+              -
+              1}.col#{$c}:checked
+              ~ {
+              .hs.row#{$r
+                -
+                2}.col#{$c
+                -
+                2}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c
+                -
+                1}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c}:checked
+                ~ {
+                div > div > #{$z} > .row#{$r}.col#{$c - 4} {
+                  opacity: $y;
+                }
+              }
+            }
+          }
+          //RIGHT
+          //.xxx
+          //xx.x
+          //x..x
+          //...x
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c - 3} {
+                opacity: $y;
+              }
+            }
+          }
+          //RIGHT
+          //xxxx
+          //x..x
+          //...x
+          //...x
+          .hs.row#{$r - 1}.col#{$c}:checked ~ {
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              3}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
+                opacity: $y;
+              }
+            }
+          }
+          //RIGHT
+          //xxxx
+          //x..x
+          //x..x
+          //...x
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              3}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c - 3} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+        //LEFT
+        //....
+        //....
+        //xxxx
+        //x...
+        .hs.row#{$r}.col#{$c}:checked ~ {
+          div > div > #{$z} > .row#{$r}.col#{$c + 1} {
+            opacity: $y;
+          }
+          //new bit
+          .hs.row#{$r}.col#{$c + 1}:checked ~ {
+            div > div > #{$z} > .row#{$r}.col#{$c + 2},
+            div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} {
+              opacity: $y;
+            }
+
+            .hs.row#{$r
+              -
+              1}.col#{$c
+              -
+              1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r - 1}.col#{$c - 2},
+              div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
+                opacity: $y;
+              }
+            }
+
+            .hs.row#{$r - 1}.col#{$c + 1}:checked ~ {
+              div > div > #{$z} > .row#{$r - 2}.col#{$c + 1},
+              div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
+              div > div > #{$z} > .row#{$r + 1}.col#{$c + 1} {
+                opacity: $y;
+              }
+              //silly down
+              .hs.row#{$r
+                -
+                1}.col#{$c
+                + 3}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c
+                + 1}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c
+                + 2}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c
+                + 3}:checked
+                ~ {
+                div > div > #{$z} > .row#{$r}.col#{$c + 3} {
+                  opacity: $y;
+                }
+              }
+              //backwards
+              .hs.row#{$r
+                -
+                2}.col#{$c}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c
+                + 1}:checked
+                ~ {
+                div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
+                  opacity: $y;
+                }
+              }
+
+              .hs.row#{$r
+                -
+                2}.col#{$c
+                -
+                1}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c
+                + 1}:checked
+                ~ {
+                div > div > #{$z} > .row#{$r - 1}.col#{$c - 1},
+                div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
+                  opacity: $y;
+                }
+              }
+
+              .hs.row#{$r
+                -
+                2}.col#{$c
+                -
+                2}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c
+                -
+                1}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c
+                + 1}:checked
+                ~ {
+                div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} {
+                  opacity: $y;
+                }
+              }
+
+              .hs.row#{$r - 2}.col#{$c + 1}:checked ~ {
+                div > div > #{$z} > .row#{$r - 2}.col#{$c + 2},
+                div > div > #{$z} > .row#{$r - 2}.col#{$c},
+                div > div > #{$z} > .row#{$r - 1}.col#{$c} {
+                  opacity: $y;
+                }
+
+                .hs.row#{$r - 2}.col#{$c + 2}:checked ~ {
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
+                    opacity: $y;
+                  }
+
+                  .hs.row#{$r - 2}.col#{$c + 3}:checked ~ {
+                    div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
+                      opacity: $y;
+                    }
+                  }
+                }
+              }
+              //>
+              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
+                div > div > #{$z} > .row#{$r - 2}.col#{$c + 2},
+                div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
+                  opacity: $y;
+                }
+
+                .hs.row#{$r - 2}.col#{$c + 2}:checked ~,
+                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
+                    opacity: $y;
+                  }
+                }
+
+                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
+                  div > div > #{$z} > .row#{$r}.col#{$c + 3} {
+                    opacity: $y;
+                  }
+                }
+              }
+            }
+
+            .hs.row#{$r}.col#{$c + 2}:checked ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c + 3},
+              div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
+                opacity: $y;
+              }
+
+              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
+                div > div > #{$z} > .row#{$r - 2}.col#{$c + 2},
+                div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
+                  opacity: $y;
+                }
+
+                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
+                    opacity: $y;
+                  }
+                }
+
+                .hs.row#{$r
+                  -
+                  2}.col#{$c}:checked
+                  ~ .hs.row#{$r
+                  -
+                  2}.col#{$c
+                  + 1}:checked
+                  ~ .hs.row#{$r
+                  -
+                  2}.col#{$c
+                  + 2}:checked
+                  ~ {
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
+                    opacity: $y;
+                  }
+                }
+
+                .hs.row#{$r
+                  -
+                  2}.col#{$c
+                  -
+                  1}:checked
+                  ~ .hs.row#{$r
+                  -
+                  2}.col#{$c}:checked
+                  ~ .hs.row#{$r
+                  -
+                  2}.col#{$c
+                  + 1}:checked
+                  ~ .hs.row#{$r
+                  -
+                  2}.col#{$c
+                  + 2}:checked
+                  ~ {
+                  div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} {
+                    opacity: $y;
+                  }
+                }
+
+                .hs.row#{$r
+                  -
+                  2}.col#{$c
+                  + 1}:checked
+                  ~ .hs.row#{$r
+                  -
+                  2}.col#{$c
+                  + 2}:checked
+                  ~ {
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c} {
+                    opacity: $y;
+                  }
+                }
+
+                .hs.row#{$r - 2}.col#{$c + 2}:checked ~ {
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3},
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} {
+                    opacity: $y;
+                  }
+                }
+              }
+
+              .hs.row#{$r}.col#{$c + 3}:checked ~ {
+                div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
+                  opacity: $y;
+                }
+
+                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
+                    opacity: $y;
+                  }
+
+                  .hs.row#{$r
+                    -
+                    2}.col#{$c
+                    + 1}:checked
+                    ~ .hs.row#{$r
+                    -
+                    2}.col#{$c
+                    + 2}:checked
+                    ~ .hs.row#{$r
+                    -
+                    2}.col#{$c
+                    + 3}:checked
+                    ~ {
+                    div > div > #{$z} > .row#{$r - 2}.col#{$c} {
+                      opacity: $y;
+                    }
+                  }
+
+                  .hs.row#{$r
+                    -
+                    2}.col#{$c
+                    + 2}:checked
+                    ~ .hs.row#{$r
+                    -
+                    2}.col#{$c
+                    + 3}:checked
+                    ~ {
+                    div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} {
+                      opacity: $y;
+                    }
+                  }
+
+                  .hs.row#{$r - 2}.col#{$c + 3}:checked ~ {
+                    div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
+                      opacity: $y;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        //RIGHT
+        //....
+        //....
+        //xxxx
+        //...x
+        .hs.row#{$r}.col#{$c}:checked ~ {
+          div > div > #{$z} > .row#{$r}.col#{$c - 1} {
+            opacity: $y;
+          }
+        }
+
+        .hs.row#{$r}.col#{$c - 1}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ {
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 2}:checked
+            ~ {
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              + 1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              + 2}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c + 2} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+
+        .hs.row#{$r}.col#{$c - 1}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ {
+          div > div > #{$z} > .row#{$r}.col#{$c - 2},
+          div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} {
+            opacity: $y;
+          }
+
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 1}:checked
+            ~ {
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              + 1}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
+              div > div > #{$z} > .row#{$r}.col#{$c + 2} {
+                opacity: $y;
+              }
+            }
+          }
+
+          .hs.row#{$r - 1}.col#{$c - 1}:checked ~ {
+            div > div > #{$z} > .row#{$r - 1}.col#{$c - 2},
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
+              opacity: $y;
+            }
+
+            .hs.row#{$r - 2}.col#{$c - 1}:checked ~ {
+              div > div > #{$z} > .row#{$r - 2}.col#{$c - 2},
+              div > div > #{$z} > .row#{$r - 2}.col#{$c} {
+                opacity: $y;
+              }
+
+              .hs.row#{$r - 2}.col#{$c}:checked ~ {
+                div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} {
+                  opacity: $y;
+                }
+
+                .hs.row#{$r - 2}.col#{$c + 1}:checked ~ {
+                  div > div > #{$z} > .row#{$r - 1}.col#{$c + 1},
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
+                    opacity: $y;
+                  }
+
+                  .hs.row#{$r - 2}.col#{$c + 2}:checked ~ {
+                    div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
+                      opacity: $y;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        //^
+        .hs.row#{$r}.col#{$c
+          -
+          3}:checked
+          ~ .hs.row#{$r}.col#{$c
+          -
+          2}:checked
+          ~ .hs.row#{$r}.col#{$c
+          -
+          1}:checked
+          ~ .hs.row#{$r}.col#{$c}:checked
+          ~ {
+          div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
+            opacity: $y;
+          }
+
+          .hs.row#{$r - 1}.col#{$c - 3}:checked ~ {
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
+              opacity: $y;
+            }
+
+            .hs.row#{$r - 2}.col#{$c - 3}:checked ~ {
+              div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
+                opacity: $y;
+              }
+
+              .hs.row#{$r - 2}.col#{$c - 2}:checked ~ {
+                div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
+                  opacity: $y;
+                }
+
+                .hs.row#{$r - 2}.col#{$c - 1}:checked ~ {
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c} {
+                    opacity: $y;
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        .hs.row#{$r}.col#{$c
+          -
+          2}:checked
+          ~ .hs.row#{$r}.col#{$c
+          -
+          1}:checked
+          ~ .hs.row#{$r}.col#{$c}:checked
+          ~ {
+          div > div > #{$z} > .row#{$r}.col#{$c - 3},
+          div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} {
+            opacity: $y;
+          }
+
+          .hs.row#{$r - 1}.col#{$c - 2}:checked ~ {
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 2},
+            div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
+              opacity: $y;
+            }
+
+            .hs.row#{$r - 2}.col#{$c - 2}:checked ~ {
+              div > div > #{$z} > .row#{$r - 2}.col#{$c - 3},
+              div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
+                opacity: $y;
+              }
+
+              .hs.row#{$r - 2}.col#{$c - 1}:checked ~ {
+                div > div > #{$z} > .row#{$r - 2}.col#{$c} {
+                  opacity: $y;
+                }
+              }
+            }
+          }
+        }
+        //^
+        ///////
+        ///////
+        ///////
+        .hs.row#{$r}.col#{$c}:checked ~ {
+          div > div > #{$z} > .row#{$r - 1}.col#{$c} {
+            opacity: $y;
+          }
+          //weirddown
+          //....
+          //xxx.
+          //x.xx
+          //x...
+          .hs.row#{$r}.col#{$c
+            + 2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 2}:checked
+            ~ div
+            > div
+            > #{$z}
+            > .row#{$r}.col#{$c
+            + 3} {
+            opacity: $y;
+          }
+          //wierd down
+          //xxxx
+          //x..x
+          //x.xx
+          //x...
+          .hs.row#{$r}.col#{$c
+            + 3}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 3}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 2}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 3}:checked
+            ~ {
+            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+          //wierd down
+          //xxx.
+          //x.x.
+          //x.xx
+          //x...
+          .hs.row#{$r}.col#{$c
+            + 2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 2}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c}:checked
+            ~ {
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              + 1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              + 2}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c + 3} {
+                opacity: $y;
+              }
+            }
+          }
+
+          .hs.row#{$r}.col#{$c
+            + 3}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            + 3}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 1}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 2}:checked
+            ~ .hs.row#{$r
+            -
+            2}.col#{$c
+            + 3}:checked
+            ~ {
+            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
+              opacity: $y;
+            }
+          }
+          //LEFT
+          //....
+          //xxxx
+          //x...
+          //x...
+          .hs.row#{$r - 1}.col#{$c}:checked ~ {
+            div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} {
+              opacity: $y;
+            }
+
+            .hs.row#{$r - 1}.col#{$c + 1}:checked ~ {
+              div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
+              div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} {
+                opacity: $y;
+              }
+
+              .hs.row#{$r
+                -
+                1}.col#{$c
+                + 3}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c
+                + 1}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c
+                + 2}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c
+                + 3}:checked
+                ~ {
+                div > div > #{$z} > .row#{$r}.col#{$c + 3} {
+                  opacity: $y;
+                }
+              }
+
+              .hs.row#{$r - 2}.col#{$c + 1}:checked ~ {
+                div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
+                  opacity: $y;
+                }
+
+                .hs.row#{$r - 2}.col#{$c + 2}:checked ~ {
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
+                    opacity: $y;
+                  }
+
+                  .hs.row#{$r - 2}.col#{$c + 3}:checked ~ {
+                    div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
+                      opacity: $y;
+                    }
+                  }
+                }
+              }
+
+              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
+                div > div > #{$z} > .row#{$r - 1}.col#{$c + 3},
+                div > div > #{$z} > .row#{$r + 1}.col#{$c + 2},
+                div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
+                  opacity: $y;
+                }
+
+                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
+                  div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
+                  div > div > #{$z} > .row#{$r + 1}.col#{$c + 2},
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
+                    opacity: $y;
+                  }
+                }
+                //DOWN
+                //....
+                //xxx.
+                //x.x.
+                //x...
+                div > div > #{$z} > .row#{$r}.col#{$c + 2} {
+                  opacity: $y;
+                }
+                //DOWN
+                //....
+                //xxxx
+                //x..x
+                //x...
+                .hs.row#{$r
+                  -
+                  1}.col#{$c
+                  + 3}:checked
+                  ~ div
+                  > div
+                  > #{$z}
+                  > .row#{$r}.col#{$c
+                  + 3} {
+                  opacity: $y;
+                }
+              }
+            }
+          }
+          //RIGHT
+          //....
+          //xxxx
+          //...x
+          //...x
+          .hs.row#{$r - 1}.col#{$c}:checked ~ {
+            div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} {
+              opacity: $y;
+            }
+          }
+
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            div > div > #{$z} > .row#{$r - 1}.col#{$c - 2},
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
+              opacity: $y;
+            }
+
+            .hs.row#{$r - 2}.col#{$c - 1}:checked ~ {
+              div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
+                opacity: $y;
+              }
+            }
+
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
+                opacity: $y;
+              }
+            }
+
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              3}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
+                opacity: $y;
+              }
+            }
+          }
+
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              3}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c - 3} {
+                opacity: $y;
+              }
+            }
+          }
+          ///////
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            div > div > #{$z} > .row#{$r - 1}.col#{$c - 3},
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
+              opacity: $y;
+            }
+          }
+
+          .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            3}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            2}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c
+            -
+            1}:checked
+            ~ .hs.row#{$r
+            -
+            1}.col#{$c}:checked
+            ~ {
+            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
+              opacity: $y;
+            }
+          }
+          /////////
+          .hs.row#{$r - 1}.col#{$c}:checked ~ {
+            div > div > #{$z} > .row#{$r - 2}.col#{$c} {
+              opacity: $y;
+            }
+            //wierd down
+            //xxx.
+            //x.x.
+            //x.x.
+            //x...
+            .hs.row#{$r
+              -
+              1}.col#{$c
+              + 2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              + 1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              + 2}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c + 2},
+              div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
+                opacity: $y;
+              }
+
+              .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
+                div > div > #{$z} > .row#{$r}.col#{$c + 3} {
+                  opacity: $y;
+                }
+              }
+            }
+
+            .hs.row#{$r
+              -
+              1}.col#{$c
+              + 2}:checked
+              ~ .hs.row#{$r
+              -
+              1}.col#{$c
+              + 3}:checked
+              ~ {
+              .hs.row#{$r
+                -
+                2}.col#{$c}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c
+                + 1}:checked
+                ~ .hs.row#{$r
+                -
+                2}.col#{$c
+                + 2}:checked
+                ~ {
+                div > div > #{$z} > .row#{$r}.col#{$c + 3} {
+                  opacity: $y;
+                }
+              }
+            }
+            //wierd down
+            //xxx.
+            //x.x.
+            //x.xx
+            //x...
+            .hs.row#{$r}.col#{$c
+              + 2}:checked
+              ~ .hs.row#{$r
+              -
+              1}.col#{$c
+              + 2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              + 1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              + 2}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c + 3} {
+                opacity: $y;
+              }
+            }
+            //wierd down
+            //xxxx
+            //x..x
+            //x..x
+            //x...
+            .hs.row#{$r
+              -
+              1}.col#{$c
+              + 3}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              + 1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              + 2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              + 3}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c + 3} {
+                opacity: $y;
+              }
+            }
+            //LEFT
+            //xxxx
+            //x...
+            //x...
+            //x...
+            .hs.row#{$r - 2}.col#{$c}:checked ~ {
+              div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} {
+                opacity: $y;
+              }
+
+              .hs.row#{$r - 2}.col#{$c + 1}:checked ~ {
+                div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
+                  opacity: $y;
+                }
+
+                .hs.row#{$r - 2}.col#{$c + 2}:checked ~ {
+                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
+                    opacity: $y;
+                  }
+                  //DOWN
+                  //xxx.
+                  //x.x.
+                  //x...
+                  //x...
+                  div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
+                    opacity: $y;
+                  }
+                  //DOWN
+                  //xxxx
+                  //x..x
+                  //x...
+                  //x...
+                  .hs.row#{$r - 2}.col#{$c + 3}:checked ~ {
+                    div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
+                      opacity: $y;
+                    }
+                  }
+                }
+              }
+            }
+            //RIGHT
+            //xxxx
+            //...x
+            //...x
+            //...x
+            .hs.row#{$r - 2}.col#{$c}:checked ~ {
+              div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
+                opacity: $y;
+              }
+            }
+
+            .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
+                opacity: $y;
+              }
+            }
+
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
+                opacity: $y;
+              }
+            }
+
+            .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              2}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c
+              -
+              1}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col#{$c}:checked
+              ~ {
+              div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
+                opacity: $y;
+              }
+            }
+            //DOWN
+            //xxxx
+            //x..x
+            //x..x
+            //x...
+            .hs.row#{$r - 2}.col#{$c}:checked ~ {
+              div > div > #{$z} > .row#{$r - 1}.col#{$c} {
+                opacity: $y;
+              }
+            }
+
+            .hs.row#{$r
+              -
+              1}.col#{$c}:checked
+              ~ .hs.row#{$r
+              -
+              2}.col4:checked
+              ~ {
+              div > div > #{$z} > .row#{$r}.col#{$c} {
+                opacity: $y;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+// ## lights
+$row: 1, 2, 3, 4;
+
+@each $i in $row {
+  $col: 1, 2, 3, 4;
+
+  @each $x in $col {
+    .hs.row#{$i}.col#{$x}:checked ~ {
+      div > div > house > .row#{$i}.col#{$x} {
+        //window
+        &.col#{random(4)} > i:nth-of-type(4) {
+          //window
+          background: $sun;
+          box-shadow: inset 0 0 0 0.5rem $ls,
+            //
+              inset
+              0
+              0
+              0.5rem
+              $ds,
+            //
+              inset
+              0
+              0
+              0
+              0.5rem
+              $tre2,
+            //
+              inset
+              0
+              0
+              1rem
+              1rem
+              $ds,
+            //
+              inset
+              1rem
+              0
+              0
+              $r1,
+            //
+              inset -1.25rem
+              0
+              0
+              $r1,
+            //
+              inset
+              0 -2rem
+              0
+              yellow,
+            //
+              inset
+              0 -3.5rem
+              0
+              #ffa200,
+            //
+              0
+              0
+              2rem
+              yellow;
+
+          &:after,
+          &:before {
+            background: $tre2;
+          }
+        }
+      }
+    }
+  }
+}
+
+.lh {
+  pointer-events: none;
+  perspective: 30rem;
+  perspective-origin: 50% -5rem;
+  transform: translate3d(0, 0, -100rem) scale(0);
+  opacity: 0;
+}
+
+.hs.house.row4.col1:not(:checked)
+  ~ .hs.house.row4.col2:checked
+  ~ .hs.house.row4.col3:not(:checked)
+  ~ .hs.house.row3.col1:not(:checked)
+  ~ .hs.shed.row3.col2:checked
+  ~ .hs.house.row3.col3:not(:checked)
+  ~ .hs.house.row2.col1:not(:checked)
+  ~ .hs.house.row2.col2:checked
+  ~ .hs.house.row2.col3:not(:checked)
+  ~ .hs.house.row1.col1:not(:checked)
+  ~ .hs.shed.row1.col2:checked
+  ~ .hs.house.row1.col3:not(:checked)
+  ~ {
+  div.lh {
+    transform: translate3d(0, 0, -100rem) scale(1);
+    /* animation: lightson $timer linear infinite;*/
+    light {
+      top: -12rem;
+      left: -6.25rem;
+      transform: scaleX(3) rotateY(0);
+      /*   animation: light 8s linear infinite;*/
+      filter: blur(0.1rem);
+      opacity: 0.5;
+
+      &,
+      &:before,
+      &:after {
+        background: linear-gradient(to right, $none, rgba(#fff466, 0.5), $none);
+        width: 100%;
+        height: 5rem;
+      }
+
+      &:before {
+        transform: rotate(15deg) rotateY(-5deg);
+      }
+
+      &:after {
+        transform: rotate(-15deg) rotateY(5deg);
+      }
+    }
+
+    lens {
+      top: -12rem;
+      left: -6.25rem;
+      width: 100%;
+      height: 5rem;
+
+      &:before,
+      &:after {
+        height: 5rem;
+        border-radius: 50%;
+        right: 0;
+        margin: auto;
+      }
+
+      &:before {
+        background: linear-gradient(to right, $none, rgba($light, 0.5), $none);
+        width: 100%;
+        transform: scaleX(3) rotateY(0);
+        opacity: 0.25;
+        filter: blur(0.1rem);
+      }
+
+      &:after {
+        width: 5rem;
+        background: radial-gradient($light, $none);
+        opacity: 0.75;
+        box-shadow: 60rem 0 15rem $light, -60rem 0 15rem $light, 0 0 3rem $light,
+          inset 0 0 0 $light;
+      }
+    }
+  }
+}
+
+div.lh {
+  animation: lightson $timer linear infinite;
+
+  light {
+    animation: light 8s linear infinite;
+  }
+
+  lens {
+    &:before {
+      animation: light 8s linear infinite;
+    }
+
+    &:after {
+      animation: light2 8s ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes light {
+  100% {
+    transform: scaleX(3) rotateY(-360deg);
+  }
+}
+
+@keyframes lightson {
+  20%,
+  80% {
+    opacity: 0;
+  }
+
+  25%,
+  75% {
+    opacity: 1;
+  }
+}
+
+@keyframes light2 {
+  22%,
+  27%,
+  72%,
+  77% {
+    box-shadow: 0rem 0 15rem $light, 0rem 0 15rem $light, 0 0 3rem $light,
+      inset 0 0 0 0 $light;
+  }
+
+  24%,
+  74% {
+    box-shadow: 0rem 0 15rem $light, 0rem 0 15rem $light,
+      0 0 5rem 40rem rgba($light, 0.25), inset 0 0 0 2.5rem $light;
+  }
+
+  50% {
+    box-shadow: -60rem 0 15rem $light, 60rem 0 15rem $light, 0 0 3rem $light,
+      inset 0 0 0 0 $light;
+  }
+}
+// ## gfx
+#graphics {
+  top: 1rem;
+  left: auto;
+  right: 1rem;
+  font-family: Telefon, Sans-Serif;
+  font-size: 1.4rem;
+  z-index: 1000;
+  letter-spacing: 0.1rem;
+  color: #fff;
+  line-height: 1.5;
+  max-height: 2.5rem;
+  overflow: hidden;
+
+  label {
+    display: flex;
+    align-content: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    border-radius: 1rem;
+    cursor: pointer;
+    transition: box-shadow 0.2s ease-in-out;
+    box-shadow: 0 0 0 1rem $none, inset 0 0 0 0 rgba(#fff, 0.2);
+
+    &:not(:nth-of-type(1)):hover {
+      box-shadow: 0 0 0 0 rgba(#fff, 0.2), inset 0 0 0 2rem rgba(#fff, 0.2);
+    }
+  }
+
+  * {
+    position: static;
+  }
+}
+
+#gfxmenu:checked ~ #graphics {
+  max-height: 10rem;
+}
+
+#poor:checked ~ colour > div > div > house > label > i:nth-of-type(1),
+#poor:checked ~ colour > div > div > shed > label > i:nth-of-type(1),
+#poor:checked ~ colour > div > lens,
+#poor:checked ~ colour > water:before,
+#poor:checked ~ colour water:after {
+  display: none;
+}
+
+#poor:checked ~ colour > div > div.main {
+  -webkit-box-reflect: none;
+}
+
+#poor:checked ~ sky > time {
+  opacity: 0;
+}
+
+#poor:checked ~ text > welldone,
+#poor:checked ~ text > gameover {
+  box-shadow: none;
+}
+
+#good:checked ~ x > [for="good"],
+#poor:checked ~ x > [for="poor"] {
+  box-shadow: 0 0 0 0 rgba(#fff, 0.1), inset 0 0 0 2rem rgba(#fff, 0.1);
+
+  &:before {
+    content: "✓";
+    position: static;
+  }
+}
+
+#poor:checked ~ colour > div > div > shed > label,
+#poor:checked ~ colour > div > div > house > label {
+  &:after,
+  & *:after {
+    animation: none !important;
+  }
+
+  &:before,
+  & *:before {
+    animation: none !important;
+  }
+}
+
+[for="gfxmenu"]:after {
+  border-bottom: 0.1rem solid #fff;
+  border-right: 0.1rem solid #fff;
+  transform: rotate(45deg) scaleY(1);
+  position: relative;
+  width: 0.6rem;
+  height: 0.6rem;
+  margin-left: 0.4rem;
+  top: 0.5rem;
+  transition: all 0.2s ease-in-out;
+}
+
+#gfxmenu:checked ~ x > [for="gfxmenu"]:after {
+  transform: rotate(-45deg) scaleY(-1);
+}
+script {
+  display: none;
+}
diff --git a/a-tribute-to-manfred-mohrsimplex-noise/README.markdown b/a-tribute-to-manfred-mohrsimplex-noise/README.markdown
new file mode 100644
index 0000000..45ba8b4
--- /dev/null
+++ b/a-tribute-to-manfred-mohrsimplex-noise/README.markdown
@@ -0,0 +1,16 @@
+# A Tribute to Manfred Mohr - Simplex Noise
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/DonKarlssonSan/pen/abNjZaQ](https://codepen.io/DonKarlssonSan/pen/abNjZaQ).
+
+Click to generate a new pattern!
+
+The pattern is based on simplex noise.
+
+Also check the sibling Pen based on randomness:  https://codepen.io/DonKarlssonSan/pen/poyZbbR  
+
+I was inspired by this image by Manfred Mohr:
+https://twitter.com/manfredemohr/status/1305650441687101440?s=20
+
+"Triangles Formed from Random Point in Squares"
+
+http://emohr.com/sc69-73/vfile_triangles1972_73.html
diff --git a/a-tribute-to-manfred-mohrsimplex-noise/dist/index.html b/a-tribute-to-manfred-mohrsimplex-noise/dist/index.html
new file mode 100644
index 0000000..7d18bb8
--- /dev/null
+++ b/a-tribute-to-manfred-mohrsimplex-noise/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - A Tribute to Manfred Mohr - Simplex Noise</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canvas"></canvas>
+<!-- partial -->
+  <script src='https://codepen.io/DonKarlssonSan/pen/bLGjLm.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/a-tribute-to-manfred-mohrsimplex-noise/dist/script.js b/a-tribute-to-manfred-mohrsimplex-noise/dist/script.js
new file mode 100644
index 0000000..c67e734
--- /dev/null
+++ b/a-tribute-to-manfred-mohrsimplex-noise/dist/script.js
@@ -0,0 +1,86 @@
+/*
+  Johan Karlsson, 2020
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+let canvas;
+let ctx;
+let w, h;
+let simplex;
+
+function setup() {
+  canvas = document.querySelector("#canvas");
+  ctx = canvas.getContext("2d");
+  resize();
+  window.addEventListener("resize", () => {
+    resize();
+    draw();
+  });
+  canvas.addEventListener("click", draw);
+}
+
+function resize() {
+  w = canvas.width = window.innerWidth;
+  h = canvas.height = window.innerHeight;
+}
+
+function fillTriangle(x1, y1, x2, y2, x3, y3) {
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.lineTo(x3, y3);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function drawSquare(x, y, size) {
+  let zoom = 600;
+  let angle = simplex.noise2D(x / zoom, y / zoom) * Math.PI * 2;
+  let xc = Math.cos(angle) * size / 2 + x + size / 2;
+  let yc = Math.sin(angle) * size / 2 + y + size / 2;
+  ctx.fillStyle = "darkgray";
+  fillTriangle(x, y, x, y + size, xc, yc);
+  ctx.fillStyle = "gray";
+  fillTriangle(x, y + size, x + size, y + size, xc, yc);
+  ctx.fillStyle = "black";
+  fillTriangle(x + size, y + size, x + size, y, xc, yc);
+  ctx.fillStyle = "beige";
+  fillTriangle(x + size, y, x, y, xc, yc);
+  ctx.strokeRect(x, y, size, size);
+}
+
+function drawPattern() {
+  let min = Math.min(w, h) * 0.75;
+  let steps = 16;
+  let size = Math.round(min / steps);
+  let x0 = Math.round((w - min) / 2);
+  let y0 = Math.round((h - min) / 2);
+
+  ctx.shadowColor = "black";
+  ctx.shadowBlur = 15;
+  ctx.fillStyle = "black";
+  ctx.fillRect(x0 - 2, y0 - 2, size * steps + 4, size * steps + 4);
+  ctx.shadowBlur = 0;
+  
+  for(let col = 0; col < steps; col++) {
+    for(let row = 0; row < steps; row++) {
+      let x = size * col + x0;
+      let y = size * row + y0;
+      drawSquare(x, y, size);
+    }
+  }
+}
+
+function draw() {
+  console.clear();
+  simplex = new SimplexNoise();
+  ctx.fillStyle = "white";
+  ctx.fillRect(0, 0, w, h);
+  ctx.fillStyle = "black";
+  let max = Math.max(w, h);
+  drawSquare(0, 0, max);
+  drawPattern();
+}
+
+setup();
+draw();
\ No newline at end of file
diff --git a/a-tribute-to-manfred-mohrsimplex-noise/dist/style.css b/a-tribute-to-manfred-mohrsimplex-noise/dist/style.css
new file mode 100644
index 0000000..4567039
--- /dev/null
+++ b/a-tribute-to-manfred-mohrsimplex-noise/dist/style.css
@@ -0,0 +1,8 @@
+body, html {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/a-tribute-to-manfred-mohrsimplex-noise/license.txt b/a-tribute-to-manfred-mohrsimplex-noise/license.txt
new file mode 100644
index 0000000..898e976
--- /dev/null
+++ b/a-tribute-to-manfred-mohrsimplex-noise/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Johan Karlsson (https://codepen.io/DonKarlssonSan/pen/abNjZaQ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/a-tribute-to-manfred-mohrsimplex-noise/src/index.html b/a-tribute-to-manfred-mohrsimplex-noise/src/index.html
new file mode 100644
index 0000000..30325df
--- /dev/null
+++ b/a-tribute-to-manfred-mohrsimplex-noise/src/index.html
@@ -0,0 +1 @@
+<canvas id="canvas"></canvas>
\ No newline at end of file
diff --git a/a-tribute-to-manfred-mohrsimplex-noise/src/script.js b/a-tribute-to-manfred-mohrsimplex-noise/src/script.js
new file mode 100644
index 0000000..c67e734
--- /dev/null
+++ b/a-tribute-to-manfred-mohrsimplex-noise/src/script.js
@@ -0,0 +1,86 @@
+/*
+  Johan Karlsson, 2020
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+let canvas;
+let ctx;
+let w, h;
+let simplex;
+
+function setup() {
+  canvas = document.querySelector("#canvas");
+  ctx = canvas.getContext("2d");
+  resize();
+  window.addEventListener("resize", () => {
+    resize();
+    draw();
+  });
+  canvas.addEventListener("click", draw);
+}
+
+function resize() {
+  w = canvas.width = window.innerWidth;
+  h = canvas.height = window.innerHeight;
+}
+
+function fillTriangle(x1, y1, x2, y2, x3, y3) {
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.lineTo(x3, y3);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function drawSquare(x, y, size) {
+  let zoom = 600;
+  let angle = simplex.noise2D(x / zoom, y / zoom) * Math.PI * 2;
+  let xc = Math.cos(angle) * size / 2 + x + size / 2;
+  let yc = Math.sin(angle) * size / 2 + y + size / 2;
+  ctx.fillStyle = "darkgray";
+  fillTriangle(x, y, x, y + size, xc, yc);
+  ctx.fillStyle = "gray";
+  fillTriangle(x, y + size, x + size, y + size, xc, yc);
+  ctx.fillStyle = "black";
+  fillTriangle(x + size, y + size, x + size, y, xc, yc);
+  ctx.fillStyle = "beige";
+  fillTriangle(x + size, y, x, y, xc, yc);
+  ctx.strokeRect(x, y, size, size);
+}
+
+function drawPattern() {
+  let min = Math.min(w, h) * 0.75;
+  let steps = 16;
+  let size = Math.round(min / steps);
+  let x0 = Math.round((w - min) / 2);
+  let y0 = Math.round((h - min) / 2);
+
+  ctx.shadowColor = "black";
+  ctx.shadowBlur = 15;
+  ctx.fillStyle = "black";
+  ctx.fillRect(x0 - 2, y0 - 2, size * steps + 4, size * steps + 4);
+  ctx.shadowBlur = 0;
+  
+  for(let col = 0; col < steps; col++) {
+    for(let row = 0; row < steps; row++) {
+      let x = size * col + x0;
+      let y = size * row + y0;
+      drawSquare(x, y, size);
+    }
+  }
+}
+
+function draw() {
+  console.clear();
+  simplex = new SimplexNoise();
+  ctx.fillStyle = "white";
+  ctx.fillRect(0, 0, w, h);
+  ctx.fillStyle = "black";
+  let max = Math.max(w, h);
+  drawSquare(0, 0, max);
+  drawPattern();
+}
+
+setup();
+draw();
\ No newline at end of file
diff --git a/a-tribute-to-manfred-mohrsimplex-noise/src/style.css b/a-tribute-to-manfred-mohrsimplex-noise/src/style.css
new file mode 100644
index 0000000..4567039
--- /dev/null
+++ b/a-tribute-to-manfred-mohrsimplex-noise/src/style.css
@@ -0,0 +1,8 @@
+body, html {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/academy/README.markdown b/academy/README.markdown
new file mode 100644
index 0000000..7a60927
--- /dev/null
+++ b/academy/README.markdown
@@ -0,0 +1,5 @@
+# Academy
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/limitedunlimited/pen/pabERa](https://codepen.io/limitedunlimited/pen/pabERa).
+
+Falling leafs triggered by an event listener
diff --git a/academy/dist/index.html b/academy/dist/index.html
new file mode 100644
index 0000000..c08a619
--- /dev/null
+++ b/academy/dist/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Academy</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<header role="banner">
+
+  
+<svg class="logo"id="Times-academy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440.59 487"><defs><style>.cls-1,.cls-9{fill:#1d1d1b;}.cls-2{fill:#e8336e;}.cls-3{fill:#0073a5;}.cls-4{fill:#6fc2b6;}.cls-5{fill:#007036;}.cls-6{fill:#bc0b3b;}.cls-7{fill:#823783;}.cls-8{fill:#ec6608;}.cls-9{fill-rule:evenodd;}</style></defs><title>Times-academy</title><path id="T" class="cls-1" d="M268.79,378.46H177.56v-2.33L203,364V215.34h-.2a63,63,0,0,0-14.41,1.74,29.59,29.59,0,0,0-12.3,7.1c-5.18,4.79-32.29,32.76-32.29,32.76l-2.92-1.13,4.05-48.44H298.16l5.08,48.44-2.92,1.13s-27.1-28-32.28-32.76a29.65,29.65,0,0,0-12.3-7.1,50.29,50.29,0,0,0-12.87-1.62V364l25.84,11.9Z"/><g id="Leaf-pink"><path id="Pink" class="cls-2" d="M333.26,149.5c-7.65,9.39-2.53,22.91-2.53,22.91s14.4,2.11,22.06-7.28,5.83-27,5.83-27S340.92,140.1,333.26,149.5Z"/><path id="Pink-2" data-name="Pink" class="cls-2" d="M331.67,102c-8.73,11.65-1.92,27.64-1.92,27.64s17.42,1.84,26.15-9.82,5.68-32.66,5.68-32.66S340.41,90.28,331.67,102Z"/><path id="Pink-3" data-name="Pink" class="cls-2" d="M350.28,52.24c-8,10.68-1.76,25.33-1.76,25.33s16,1.69,24-9,5.19-29.94,5.19-29.94S358.28,41.56,350.28,52.24Z"/><path id="Pink-4" data-name="Pink" class="cls-2" d="M415.3,115.22c-6.4,5.21-4.85,14.94-4.85,14.94s9.32,3.4,15.72-1.81,7.61-17.18,7.61-17.18S421.7,110,415.3,115.22Z"/><path id="Pink-5" data-name="Pink" class="cls-2" d="M376.73,128.5c-8.47,7.85-5.46,21.26-5.46,21.26s13.3,3.88,21.77-4,9.1-24.64,9.1-24.64S385.2,120.65,376.73,128.5Z"/><path id="Pink-6" data-name="Pink" class="cls-2" d="M364.23,166.24c-6.07,3.47-6.15,11.77-6.15,11.77s7.29,4.1,13.36.63,8.77-13.27,8.77-13.27S370.31,162.77,364.23,166.24Z"/><path id="Pink-7" data-name="Pink" class="cls-2" d="M374.66,106.9c-3.28,4.11-1,9.93-1,9.93s6.25.87,9.53-3.24,2.41-11.71,2.41-11.71S377.94,102.79,374.66,106.9Z"/><path id="Pink-8" data-name="Pink" class="cls-2" d="M403.35,148.19c-5.73,3.27-5.82,11.09-5.82,11.09s6.87,3.88,12.6.61,8.29-12.5,8.29-12.5S409.08,144.93,403.35,148.19Z"/></g><g id="Leafs-blue"><path id="blue" class="cls-3" d="M152.77,121c2.49,14.31-10.86,25.54-10.86,25.54s-16.38-6.15-18.87-20.45,9.79-31.7,9.79-31.7S150.28,106.65,152.77,121Z"/><path id="blue-2" data-name="blue" class="cls-3" d="M171.72,95.46c-2.35,5.22-9.19,6-9.19,6s-4-5.55-1.65-10.77,10.2-8.22,10.2-8.22S174.06,90.25,171.72,95.46Z"/><path id="blue-3" data-name="blue" class="cls-3" d="M108.92,102c8.73,11.65,1.92,27.64,1.92,27.64s-17.41,1.84-26.14-9.82S79,87.11,79,87.11,100.19,90.28,108.92,102Z"/><path id="blue-4" data-name="blue" class="cls-3" d="M90.31,52.24c8,10.68,1.77,25.33,1.77,25.33s-16,1.69-24-9-5.2-29.94-5.2-29.94S82.31,41.56,90.31,52.24Z"/><path id="blue-5" data-name="blue" class="cls-3" d="M154.05,48c5.6,13.41-4.94,27.31-4.94,27.31s-17.34-2.37-22.93-15.78,2.54-33.07,2.54-33.07S148.46,34.58,154.05,48Z"/><path id="blue-6" data-name="blue" class="cls-3" d="M189.89,129c2.81,10.4-6.24,19.68-6.24,19.68S171.2,145.3,168.4,134.9s5-24.14,5-24.14S187.09,118.57,189.89,129Z"/><path id="blue-7" data-name="blue" class="cls-3" d="M122,71.94c5.65,7.8,1,18.29,1,18.29s-11.54,1-17.18-6.78-3.38-21.66-3.38-21.66S116.36,64.13,122,71.94Z"/><path id="blue-8" data-name="blue" class="cls-3" d="M162.34,185.13c8,10.06,23.31,7.84,23.31,7.84s5.6-14.42-2.4-24.48-26.76-12.19-26.76-12.19S154.34,175.06,162.34,185.13Z"/></g><g id="Leafs-green"><path id="green" class="cls-4" d="M108.66,148.17c7.66,9.39,2.54,22.91,2.54,22.91s-14.4,2.11-22.06-7.28-5.83-27-5.83-27S101,138.77,108.66,148.17Z"/><path id="green-2" data-name="green" class="cls-5" d="M93.18,237c13.82-10.12,32.73-2.15,32.73-2.15s2.13,20.26-11.69,30.38-38.69,6.52-38.69,6.52S79.35,247.14,93.18,237Z"/><path id="green-3" data-name="green" class="cls-5" d="M40.06,228.54c7.63-5.6,18.08-1.19,18.08-1.19s1.17,11.19-6.46,16.78-21.37,3.6-21.37,3.6S32.42,234.14,40.06,228.54Z"/><path id="green-4" data-name="green" class="cls-4" d="M34.91,170.23c14.65.24,23.29,15.34,23.29,15.34s-9.13,14.8-23.78,14.57S4.83,184.71,4.83,184.71,20.26,170,34.91,170.23Z"/><path id="green-5" data-name="green" class="cls-4" d="M25.3,115.22c6.39,5.21,4.84,14.94,4.84,14.94s-9.32,3.4-15.72-1.81-7.61-17.18-7.61-17.18S18.89,110,25.3,115.22Z"/><path id="green-6" data-name="green" class="cls-5" d="M49.87,261.35c6.25-5.39,15.56-2.16,15.56-2.16s1.72,9.77-4.53,15.16-18.25,4.48-18.25,4.48S43.62,266.74,49.87,261.35Z"/><path id="green-7" data-name="green" class="cls-4" d="M63.86,128.5c8.47,7.85,5.46,21.26,5.46,21.26s-13.29,3.88-21.76-4-9.11-24.64-9.11-24.64S55.39,120.65,63.86,128.5Z"/><path id="green-8" data-name="green" class="cls-5" d="M69.47,234.4c4.5-3.29,10.65-.7,10.65-.7s.7,6.59-3.8,9.89-12.59,2.11-12.59,2.11S65,237.69,69.47,234.4Z"/><path id="green-9" data-name="green" class="cls-5" d="M142.75,171.54c5.65,7.81,1,18.31,1,18.31s-11.54,1-17.18-6.79-3.38-21.66-3.38-21.66S137.11,163.74,142.75,171.54Z"/><path id="green-10" data-name="green" class="cls-4" d="M76.36,166.24c6.08,3.47,6.16,11.77,6.16,11.77s-7.3,4.1-13.37.63-8.76-13.27-8.76-13.27S70.29,162.77,76.36,166.24Z"/><path id="green-11" data-name="green" class="cls-4" d="M65.94,106.9c3.27,4.11,1,9.93,1,9.93s-6.25.87-9.53-3.24S55,101.88,55,101.88,62.66,102.79,65.94,106.9Z"/><path id="green-12" data-name="green" class="cls-4" d="M37.25,148.19c5.73,3.27,5.82,11.09,5.82,11.09s-6.87,3.88-12.61.61-8.28-12.5-8.28-12.5S31.51,144.93,37.25,148.19Z"/><path id="green-13" data-name="green" class="cls-4" d="M13.19,209.27c8.32-3.62,17.12,2.67,17.12,2.67s-1.28,10.7-9.6,14.32S0,225.14,0,225.14,4.87,212.89,13.19,209.27Z"/><path id="green-14" data-name="green" class="cls-5" d="M82.25,184.9c14.91-2.91,27,10.55,27,10.55s-6,17-20.94,19.9-33.4-9.3-33.4-9.3S67.34,187.82,82.25,184.9Z"/><path id="green-15" data-name="green" class="cls-5" d="M130.12,216.23c5.81-4.67,4.49-13.54,4.49-13.54s-8.38-3.2-14.19,1.46-7,15.54-7,15.54S124.3,220.9,130.12,216.23Z"/></g><g id="Leaf-red"><path id="Red" class="cls-6" d="M259.52,36.46c-1.36,8.14,6.23,14.41,6.23,14.41s9.25-3.61,10.61-11.75S270.7,21.2,270.7,21.2,260.87,28.31,259.52,36.46Z"/><path id="Red-2" data-name="Red" class="cls-6" d="M284.49,120.93c-2.49,14.31,10.86,25.54,10.86,25.54s16.38-6.15,18.87-20.45-9.8-31.7-9.8-31.7S287,106.62,284.49,120.93Z"/><path id="Red-3" data-name="Red" class="cls-6" d="M286.54,48C281,61.4,291.49,75.3,291.49,75.3s17.33-2.37,22.92-15.78-2.54-33.07-2.54-33.07S292.14,34.58,286.54,48Z"/><path id="Red-4" data-name="Red" class="cls-6" d="M297.84,171.54c-5.65,7.81-.95,18.31-.95,18.31s11.53,1,17.17-6.79,3.39-21.66,3.39-21.66S303.49,163.74,297.84,171.54Z"/><path id="Red-5" data-name="Red" class="cls-6" d="M251.8,129.83c3.94,8.77,15.45,10.06,15.45,10.06s6.72-9.35,2.77-18.13-17.15-13.83-17.15-13.83S247.85,121.06,251.8,129.83Z"/><path id="Red-6" data-name="Red" class="cls-6" d="M268.84,95.46c2.35,5.22,9.19,6,9.19,6s4-5.55,1.64-10.77-10.19-8.22-10.19-8.22S266.5,90.25,268.84,95.46Z"/><path id="Red-7" data-name="Red" class="cls-6" d="M318.59,71.94c-5.64,7.8-.95,18.29-.95,18.29s11.53,1,17.17-6.78,3.38-21.66,3.38-21.66S324.23,64.13,318.59,71.94Z"/><path id="Red-8" data-name="Red" class="cls-6" d="M271.2,185.74c-7.15,10.26-21.56,7.42-21.56,7.42s-5.73-15.3,1.42-25.57,24.64-11.85,24.64-11.85S278.36,175.46,271.2,185.74Z"/></g><g id="Leafs-purple"><path id="Purple" class="cls-7" d="M235.63,118.16c2.28,16.63-13.61,29-13.61,29s-18.65-7.77-20.92-24.39,12.63-36.19,12.63-36.19S233.36,101.53,235.63,118.16Z"/><path id="Purple-2" data-name="Purple" class="cls-7" d="M230.43,29.13C230.86,43.65,216,52.89,216,52.89S200.7,44.52,200.27,30s14.2-30,14.2-30S230,14.62,230.43,29.13Z"/><path id="Purple-3" data-name="Purple" class="cls-7" d="M181.08,36.46c1.36,8.14-6.24,14.41-6.24,14.41s-9.24-3.61-10.6-11.75S169.9,21.2,169.9,21.2,179.72,28.31,181.08,36.46Z"/><path id="Purple-4" data-name="Purple" class="cls-7" d="M199.63,72.85c-.27,9.61-10.4,15.11-10.4,15.11s-9.8-6.16-9.53-15.77S190.21,53,190.21,53,199.89,63.24,199.63,72.85Z"/><path id="Purple-5" data-name="Purple" class="cls-7" d="M229.93,69.31c-2.34,5.22-9.18,6-9.18,6s-4-5.56-1.65-10.78,10.2-8.23,10.2-8.23S232.28,64.1,229.93,69.31Z"/><path id="Purple-6" data-name="Purple" class="cls-7" d="M240.74,74.22c-3,9.14,4.7,17.73,4.7,17.73s11.31-2.5,14.29-11.64-3.43-21.66-3.43-21.66S243.72,65.09,240.74,74.22Z"/><path id="Purple-7" data-name="Purple" class="cls-7" d="M219.65,172.49c4.2,10.33-4,21-4,21s-13.28-1.91-17.48-12.23,2.17-25.41,2.17-25.41S215.44,162.16,219.65,172.49Z"/><path id="Purple-8" data-name="Purple" class="cls-7" d="M242,164c-4.06,5.25-12,4.21-12,4.21s-3-7.41,1.06-12.66,13.73-6.47,13.73-6.47S246.05,158.74,242,164Z"/></g><g id="Leafs-orange"><path id="Orange" class="cls-8" d="M347.42,237c-13.82-10.12-32.73-2.15-32.73-2.15s-2.14,20.26,11.69,30.38,38.68,6.52,38.68,6.52S361.25,247.14,347.42,237Z"/><path id="Orange-2" data-name="Orange" class="cls-8" d="M400.54,228.54c-7.64-5.6-18.08-1.19-18.08-1.19s-1.18,11.19,6.45,16.78,21.37,3.6,21.37,3.6S408.18,234.14,400.54,228.54Z"/><path id="Orange-3" data-name="Orange" class="cls-8" d="M405.68,170.23c-14.64.24-23.29,15.34-23.29,15.34s9.14,14.8,23.78,14.57,29.59-15.43,29.59-15.43S420.33,170,405.68,170.23Z"/><path id="Orange-4" data-name="Orange" class="cls-8" d="M390.72,261.35c-6.25-5.39-15.56-2.16-15.56-2.16s-1.71,9.77,4.54,15.16S398,278.83,398,278.83,397,266.74,390.72,261.35Z"/><path id="Orange-5" data-name="Orange" class="cls-8" d="M371.12,234.4c-4.5-3.29-10.64-.7-10.64-.7s-.7,6.59,3.8,9.89,12.58,2.11,12.58,2.11S375.62,237.69,371.12,234.4Z"/><path id="Orange-6" data-name="Orange" class="cls-8" d="M427.41,209.27c-8.33-3.62-17.12,2.67-17.12,2.67s1.28,10.7,9.6,14.32,20.7-1.12,20.7-1.12S435.72,212.89,427.41,209.27Z"/><path id="Orange-7" data-name="Orange" class="cls-8" d="M358.35,184.9c-14.92-2.91-27,10.55-27,10.55s6,17,20.93,19.9,33.4-9.3,33.4-9.3S373.26,187.82,358.35,184.9Z"/><path id="Orange-8" data-name="Orange" class="cls-8" d="M310.25,216.19c-5.81-4.67-4.47-13.54-4.47-13.54s8.39-3.19,14.19,1.48,7,15.56,7,15.56S316.06,220.87,310.25,216.19Z"/></g><g id="theTimes"><path id="t-2" data-name="t" class="cls-9" d="M123.5,441.85H106.9v-.42l4.63-2.2V412.16h0a11.54,11.54,0,0,0-2.62.32,5.32,5.32,0,0,0-2.24,1.29c-.94.87-5.88,6-5.88,6l-.53-.2.74-8.82h27.89l.93,8.82-.54.2s-4.93-5.09-5.87-6a5.38,5.38,0,0,0-2.24-1.29,9.27,9.27,0,0,0-2.34-.3v27.05l4.7,2.16Z"/><polygon id="h" class="cls-9" points="163.24 413.34 167.03 411.17 167.04 410.71 152.25 410.71 152.25 411.13 156.08 413.28 156.08 424.88 141.87 424.98 141.87 413.34 145.66 411.17 145.67 410.71 130.88 410.71 130.88 411.13 134.71 413.32 134.71 439.28 130.88 441.43 130.88 441.85 145.67 441.85 145.66 441.39 141.87 439.23 141.87 426.72 156.08 426.82 156.08 439.28 152.25 441.43 152.25 441.85 167.04 441.85 167.03 441.39 163.24 439.23 163.24 413.34"/><path id="e" class="cls-9" d="M194.88,441.85H168.41v-.42l3.82-2.15v-26l-3.82-2.19v-.42H194l.56,8.14-.47.16s-4.1-4.24-5-5.11a5.31,5.31,0,0,0-2.24-1.3,11.22,11.22,0,0,0-2.62-.31l-4.69-.15V425.3s4.91-.08,5.45-.15c.75-.09,1-.09,2.06-1.28.84-1,2.17-2.71,2.17-2.71h.55v10.43h-.55s-2.58-3.76-2.78-3.89a2.53,2.53,0,0,0-2-.7c-1.35,0-4.95-.09-4.95-.09v13.43s2.8,0,5.05-.15,3.49-.24,5-1.48,5.35-5.78,5.35-5.78l.59.19Z"/><path id="t-3" data-name="t" class="cls-9" d="M228.44,441.85h-16.6v-.42l4.63-2.2V412.16h0a11.49,11.49,0,0,0-2.62.32,5.26,5.26,0,0,0-2.24,1.29c-.94.87-5.88,6-5.88,6l-.53-.2.74-8.82h27.89l.92,8.82-.53.2s-4.93-5.09-5.88-6a5.3,5.3,0,0,0-2.23-1.29,9.27,9.27,0,0,0-2.34-.3v27.05l4.7,2.16Z"/><polygon id="i" class="cls-9" points="239.61 439.28 235.78 441.42 235.78 441.85 250.57 441.85 250.56 441.39 246.77 439.22 246.77 413.33 250.56 411.16 250.57 410.7 235.78 410.7 235.78 411.13 239.61 413.27 239.61 439.28"/><path id="e-2" data-name="e" class="cls-9" d="M321.89,433.12l-.58-.19s-3.88,4.54-5.36,5.78-2.71,1.28-5,1.48-5,.15-5,.15l0-13.43s3.6.11,5,.09a2.56,2.56,0,0,1,2,.7c.19.13,2.78,3.89,2.78,3.89h.54V421.16h-.54s-1.33,1.74-2.17,2.71c-1,1.19-1.32,1.19-2.06,1.28-.54.07-5.46.15-5.46.15l0-13.16,4.68.15a11.28,11.28,0,0,1,2.63.31,5.43,5.43,0,0,1,2.24,1.3c.94.87,5,5.11,5,5.11l.47-.16-.56-8.14H294.87v.42l3.83,2.19v26l-3.83,2.15v.42h26.48Z"/><polygon id="m" class="cls-9" points="273.67 432.03 283.16 410.7 293.54 410.7 293.53 411.16 289.75 413.33 289.75 439.22 293.53 441.39 293.54 441.85 278.77 441.85 278.77 441.42 282.6 439.28 282.6 417.13 271.41 441.42 270.06 441.42 258.13 416.63 258.13 439.22 261.92 441.39 261.93 441.85 251.99 441.85 251.99 441.42 255.82 439.28 255.82 413.27 251.99 411.13 251.99 410.7 263.23 410.7 273.67 432.03"/><path id="s" class="cls-9" d="M343,411.14l.58,7.69-.51.1s-5.32-5.8-5.94-6.28a4.66,4.66,0,0,0-5.51-.14,3.82,3.82,0,0,0-.94,5.08c1.68,3.3,6.66,5.63,7.93,6.39s7.63,3.85,6.83,10.15c-.76,5.94-6.07,7.65-8.28,8.07-4.7.89-12-1.1-12-1.1l-.55-8.06.62-.07s5.31,6.35,7.41,7.14,5,1.06,6.69-1.13.29-5.3-1.41-6.46c-2.4-1.64-5.89-3.49-8.33-5.11a10.48,10.48,0,0,1-4.85-7.45,8.4,8.4,0,0,1,5.15-8.89,15.72,15.72,0,0,1,7.52-.79A47.16,47.16,0,0,1,343,411.14Z"/></g><g id="Academy"><path id="a" class="cls-1" d="M100.47,485.45l11-30.3h1.2l10.86,30.3v.61h-.66l-3.76-10.37H104.84l-3.75,10.37h-.62Zm4.64-10.51h13.73L112.08,456H112Z"/><path id="c" class="cls-1" d="M136.85,470.48c0-10.29,6.23-15.46,13.17-15.46,5,0,7.19,1.59,9.44,3.62v.75h-.61c-1.73-2.07-4.15-3.62-8.79-3.62-6.76,0-12.32,4.9-12.32,14.66s4.81,15,12,15c4.9,0,7.86-1.82,9.67-4.2H160V482a13.06,13.06,0,0,1-10.29,4.2C142.29,486.2,136.85,480.72,136.85,470.48Z"/><path id="a-2" data-name="a" class="cls-1" d="M172.67,485.45l11-30.3h1.19l10.87,30.3v.61h-.66l-3.76-10.37H177l-3.76,10.37h-.61Zm4.63-10.51H191L184.28,456h-.09Z"/><path id="d" class="cls-1" d="M210.82,455.15h7.77c10.16,0,15.32,4.33,15.32,15.46s-5.16,15.45-15.32,15.45h-7.77Zm7.77,30.12c9.76,0,14.44-4,14.44-14.66S228.35,456,218.59,456H211.7v29.32Z"/><path id="e-3" data-name="e" class="cls-1" d="M249.63,455.15h17.84v.75h-17v13.74h12.94v.75H250.52v14.92h17.57v.75H249.63Z"/><path id="m-2" data-name="m" class="cls-1" d="M283.28,455.15h1.77l11.66,29.68h0l11.66-29.68h1.72v30.91h-.88V455.81H309L297.1,486.06h-.83l-11.88-30.25h-.22v30.25h-.89Z"/><path id="y" class="cls-1" d="M335.08,486.06v-13.2L325,455.73v-.58h.61l9.94,16.92h0l10-16.92h.58v.58L336,472.86v13.2Z"/></g></svg>
+<div data-direction="&darr;" class="scroll-direction">Scroll
+</div>  
+</header>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/academy/dist/script.js b/academy/dist/script.js
new file mode 100644
index 0000000..696e789
--- /dev/null
+++ b/academy/dist/script.js
@@ -0,0 +1,168 @@
+//svg name space
+const ns = "http://www.w3.org/2000/svg"
+
+//Create new svg group and place in the dom for copies
+const svg = document.getElementsByTagName('svg')[0]
+const copyGroup = document.createElementNS(ns,'g')
+copyGroup.setAttribute('id','copy');
+svg.appendChild(copyGroup)
+
+
+const header = document.querySelector('header');
+const header_height = getComputedStyle(header).height.split('px')[0];
+console.log(header_height);
+
+function changeArrow(direction){
+  const arrow = document.querySelector('.scroll-direction');
+  console.log(arrow)
+  arrow.setAttribute('data-direction', direction)
+}
+
+function changeDirection(){
+  if(window.pageYOffset > header_height){
+  changeArrow("↑")    
+  }
+  if(window.pageYOffset < header_height){
+    changeArrow("↓")
+  }
+}
+
+
+console.log(window.pageYOffset)
+
+// Array helper for leafPicker function. 'collection' key matches svg data attribute, 'leafs' key creates a 
+const leafPickers = [
+    {leafs:"orangeLeafs",
+    collection: "Orange"},
+    {leafs:"purpleLeafs",
+     collection:"Purple"},
+    {leafs:"redLeafs",
+    collection: "Red"},
+    {leafs:"pinkLeafs",
+    collection:"Pink"},
+    {leafs:"blueLeafs",
+    collection:"blue"},
+    {leafs:"greenLeafs",
+    collection:"green"}
+]
+
+// Function to copy leafs to a groupd tag in the dom
+let leafCopy = [];
+function leafPicker(collection){
+  const leafs = document.querySelectorAll(`[data-name="${collection}"]`)
+  for(const leaf of leafs){
+    leafCopy.push(leaf.cloneNode(true))
+  }
+}
+
+
+
+for(const leafs of leafPickers){
+  leafPicker(leafs.collection)
+}
+
+console.log(leafCopy)
+
+function makeCopies(){
+for(const copies of leafCopy){
+  copyGroup.appendChild(copies)
+
+const leafCopies = Array.from(document.getElementById('copy').querySelectorAll('[data-name]'))
+
+for(const [index, leafCopy] of leafCopies.entries()){
+  leafCopy.setAttribute('id' , `copy-${index}`)
+}
+}  
+}
+
+makeCopies()
+const leafCopies = Array.from(document.getElementById('copy').querySelectorAll('[data-name]'))
+
+  let spring = {},
+      summer = {},
+      autumn = {};
+
+function shuffle(array) {
+    var counter = array.length, temp, index;
+
+    // While there are elements in the array
+    while (counter--) {
+        // Pick a random index
+        index = (Math.random() * counter) | 0;
+
+        // And swap the last element with it
+        temp = array[counter];
+        array[counter] = array[index];
+        array[index] = temp;
+    }
+
+    return array;
+}
+
+spring = shuffle(leafCopies);
+spring.length = 20; // get 4 random elements
+
+
+summer = shuffle(leafCopies);
+summer.length = 40;
+
+
+ function debounce(func, wait = 20, immediate = true) {
+      var timeout;
+      return function() {
+        var context = this, args = arguments;
+        var later = function() {
+          timeout = null;
+          if (!immediate) func.apply(context, args);
+        };
+        var callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow) func.apply(context, args);
+      };
+    }
+
+// function checkSlide(){
+//   changeDirection()
+//   console.log(window.scrollY)
+// }
+changeDirection()
+
+
+const summerFall = anime({
+  targets : summer,
+  easing: 'easeInOutQuint',
+  opacity : 0,
+  translateY: 200,
+  duration: function(el,i,l){
+    return 2500 + (i * 100)
+  },
+    autoplay : false
+
+})
+
+function playAnimation(){
+
+if (window.pageYOffset <  10)
+		{
+    summerFall.play()  
+		summerFall.restart()
+		};
+};
+
+
+document.addEventListener("touchmove", ScrollStart, false);
+document.addEventListener("scroll", Scroll, false);
+
+function ScrollStart() {
+    debounce(playAnimation,10)
+}
+
+function Scroll() {
+    //end of scroll event for iOS
+    //and
+    debounce(playAnimation,10)
+  //start/end of scroll event for other browsers
+}
+
+window.addEventListener('scroll' , debounce(playAnimation,10))
\ No newline at end of file
diff --git a/academy/dist/style.css b/academy/dist/style.css
new file mode 100644
index 0000000..275477e
--- /dev/null
+++ b/academy/dist/style.css
@@ -0,0 +1,45 @@
+body {
+  height: 300vh;
+}
+
+:root {
+  --width: 100%;
+  --bg: #efefef;
+}
+
+.scroll-direction {
+  font-size: 3rem;
+}
+
+.scroll-direction:after {
+  content: attr(data-direction);
+}
+
+header {
+  position: fixed;
+  width: var(--width);
+  margin: 0;
+  background: var(--bg);
+  padding: 1rem;
+  height: 100vh;
+}
+
+.logo {
+  position: absolute;
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+  height: 30rem;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+main, article {
+  height: 100%;
+}
+
+.wrapper {
+  margin: 0 auto;
+  max-width: var(--width);
+}
\ No newline at end of file
diff --git a/academy/license.txt b/academy/license.txt
new file mode 100644
index 0000000..3631c0c
--- /dev/null
+++ b/academy/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by James Grubb (https://codepen.io/limitedunlimited/pen/pabERa)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/academy/src/index.html b/academy/src/index.html
new file mode 100644
index 0000000..8a7aae9
--- /dev/null
+++ b/academy/src/index.html
@@ -0,0 +1,7 @@
+<header role="banner">
+
+  
+<svg class="logo"id="Times-academy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440.59 487"><defs><style>.cls-1,.cls-9{fill:#1d1d1b;}.cls-2{fill:#e8336e;}.cls-3{fill:#0073a5;}.cls-4{fill:#6fc2b6;}.cls-5{fill:#007036;}.cls-6{fill:#bc0b3b;}.cls-7{fill:#823783;}.cls-8{fill:#ec6608;}.cls-9{fill-rule:evenodd;}</style></defs><title>Times-academy</title><path id="T" class="cls-1" d="M268.79,378.46H177.56v-2.33L203,364V215.34h-.2a63,63,0,0,0-14.41,1.74,29.59,29.59,0,0,0-12.3,7.1c-5.18,4.79-32.29,32.76-32.29,32.76l-2.92-1.13,4.05-48.44H298.16l5.08,48.44-2.92,1.13s-27.1-28-32.28-32.76a29.65,29.65,0,0,0-12.3-7.1,50.29,50.29,0,0,0-12.87-1.62V364l25.84,11.9Z"/><g id="Leaf-pink"><path id="Pink" class="cls-2" d="M333.26,149.5c-7.65,9.39-2.53,22.91-2.53,22.91s14.4,2.11,22.06-7.28,5.83-27,5.83-27S340.92,140.1,333.26,149.5Z"/><path id="Pink-2" data-name="Pink" class="cls-2" d="M331.67,102c-8.73,11.65-1.92,27.64-1.92,27.64s17.42,1.84,26.15-9.82,5.68-32.66,5.68-32.66S340.41,90.28,331.67,102Z"/><path id="Pink-3" data-name="Pink" class="cls-2" d="M350.28,52.24c-8,10.68-1.76,25.33-1.76,25.33s16,1.69,24-9,5.19-29.94,5.19-29.94S358.28,41.56,350.28,52.24Z"/><path id="Pink-4" data-name="Pink" class="cls-2" d="M415.3,115.22c-6.4,5.21-4.85,14.94-4.85,14.94s9.32,3.4,15.72-1.81,7.61-17.18,7.61-17.18S421.7,110,415.3,115.22Z"/><path id="Pink-5" data-name="Pink" class="cls-2" d="M376.73,128.5c-8.47,7.85-5.46,21.26-5.46,21.26s13.3,3.88,21.77-4,9.1-24.64,9.1-24.64S385.2,120.65,376.73,128.5Z"/><path id="Pink-6" data-name="Pink" class="cls-2" d="M364.23,166.24c-6.07,3.47-6.15,11.77-6.15,11.77s7.29,4.1,13.36.63,8.77-13.27,8.77-13.27S370.31,162.77,364.23,166.24Z"/><path id="Pink-7" data-name="Pink" class="cls-2" d="M374.66,106.9c-3.28,4.11-1,9.93-1,9.93s6.25.87,9.53-3.24,2.41-11.71,2.41-11.71S377.94,102.79,374.66,106.9Z"/><path id="Pink-8" data-name="Pink" class="cls-2" d="M403.35,148.19c-5.73,3.27-5.82,11.09-5.82,11.09s6.87,3.88,12.6.61,8.29-12.5,8.29-12.5S409.08,144.93,403.35,148.19Z"/></g><g id="Leafs-blue"><path id="blue" class="cls-3" d="M152.77,121c2.49,14.31-10.86,25.54-10.86,25.54s-16.38-6.15-18.87-20.45,9.79-31.7,9.79-31.7S150.28,106.65,152.77,121Z"/><path id="blue-2" data-name="blue" class="cls-3" d="M171.72,95.46c-2.35,5.22-9.19,6-9.19,6s-4-5.55-1.65-10.77,10.2-8.22,10.2-8.22S174.06,90.25,171.72,95.46Z"/><path id="blue-3" data-name="blue" class="cls-3" d="M108.92,102c8.73,11.65,1.92,27.64,1.92,27.64s-17.41,1.84-26.14-9.82S79,87.11,79,87.11,100.19,90.28,108.92,102Z"/><path id="blue-4" data-name="blue" class="cls-3" d="M90.31,52.24c8,10.68,1.77,25.33,1.77,25.33s-16,1.69-24-9-5.2-29.94-5.2-29.94S82.31,41.56,90.31,52.24Z"/><path id="blue-5" data-name="blue" class="cls-3" d="M154.05,48c5.6,13.41-4.94,27.31-4.94,27.31s-17.34-2.37-22.93-15.78,2.54-33.07,2.54-33.07S148.46,34.58,154.05,48Z"/><path id="blue-6" data-name="blue" class="cls-3" d="M189.89,129c2.81,10.4-6.24,19.68-6.24,19.68S171.2,145.3,168.4,134.9s5-24.14,5-24.14S187.09,118.57,189.89,129Z"/><path id="blue-7" data-name="blue" class="cls-3" d="M122,71.94c5.65,7.8,1,18.29,1,18.29s-11.54,1-17.18-6.78-3.38-21.66-3.38-21.66S116.36,64.13,122,71.94Z"/><path id="blue-8" data-name="blue" class="cls-3" d="M162.34,185.13c8,10.06,23.31,7.84,23.31,7.84s5.6-14.42-2.4-24.48-26.76-12.19-26.76-12.19S154.34,175.06,162.34,185.13Z"/></g><g id="Leafs-green"><path id="green" class="cls-4" d="M108.66,148.17c7.66,9.39,2.54,22.91,2.54,22.91s-14.4,2.11-22.06-7.28-5.83-27-5.83-27S101,138.77,108.66,148.17Z"/><path id="green-2" data-name="green" class="cls-5" d="M93.18,237c13.82-10.12,32.73-2.15,32.73-2.15s2.13,20.26-11.69,30.38-38.69,6.52-38.69,6.52S79.35,247.14,93.18,237Z"/><path id="green-3" data-name="green" class="cls-5" d="M40.06,228.54c7.63-5.6,18.08-1.19,18.08-1.19s1.17,11.19-6.46,16.78-21.37,3.6-21.37,3.6S32.42,234.14,40.06,228.54Z"/><path id="green-4" data-name="green" class="cls-4" d="M34.91,170.23c14.65.24,23.29,15.34,23.29,15.34s-9.13,14.8-23.78,14.57S4.83,184.71,4.83,184.71,20.26,170,34.91,170.23Z"/><path id="green-5" data-name="green" class="cls-4" d="M25.3,115.22c6.39,5.21,4.84,14.94,4.84,14.94s-9.32,3.4-15.72-1.81-7.61-17.18-7.61-17.18S18.89,110,25.3,115.22Z"/><path id="green-6" data-name="green" class="cls-5" d="M49.87,261.35c6.25-5.39,15.56-2.16,15.56-2.16s1.72,9.77-4.53,15.16-18.25,4.48-18.25,4.48S43.62,266.74,49.87,261.35Z"/><path id="green-7" data-name="green" class="cls-4" d="M63.86,128.5c8.47,7.85,5.46,21.26,5.46,21.26s-13.29,3.88-21.76-4-9.11-24.64-9.11-24.64S55.39,120.65,63.86,128.5Z"/><path id="green-8" data-name="green" class="cls-5" d="M69.47,234.4c4.5-3.29,10.65-.7,10.65-.7s.7,6.59-3.8,9.89-12.59,2.11-12.59,2.11S65,237.69,69.47,234.4Z"/><path id="green-9" data-name="green" class="cls-5" d="M142.75,171.54c5.65,7.81,1,18.31,1,18.31s-11.54,1-17.18-6.79-3.38-21.66-3.38-21.66S137.11,163.74,142.75,171.54Z"/><path id="green-10" data-name="green" class="cls-4" d="M76.36,166.24c6.08,3.47,6.16,11.77,6.16,11.77s-7.3,4.1-13.37.63-8.76-13.27-8.76-13.27S70.29,162.77,76.36,166.24Z"/><path id="green-11" data-name="green" class="cls-4" d="M65.94,106.9c3.27,4.11,1,9.93,1,9.93s-6.25.87-9.53-3.24S55,101.88,55,101.88,62.66,102.79,65.94,106.9Z"/><path id="green-12" data-name="green" class="cls-4" d="M37.25,148.19c5.73,3.27,5.82,11.09,5.82,11.09s-6.87,3.88-12.61.61-8.28-12.5-8.28-12.5S31.51,144.93,37.25,148.19Z"/><path id="green-13" data-name="green" class="cls-4" d="M13.19,209.27c8.32-3.62,17.12,2.67,17.12,2.67s-1.28,10.7-9.6,14.32S0,225.14,0,225.14,4.87,212.89,13.19,209.27Z"/><path id="green-14" data-name="green" class="cls-5" d="M82.25,184.9c14.91-2.91,27,10.55,27,10.55s-6,17-20.94,19.9-33.4-9.3-33.4-9.3S67.34,187.82,82.25,184.9Z"/><path id="green-15" data-name="green" class="cls-5" d="M130.12,216.23c5.81-4.67,4.49-13.54,4.49-13.54s-8.38-3.2-14.19,1.46-7,15.54-7,15.54S124.3,220.9,130.12,216.23Z"/></g><g id="Leaf-red"><path id="Red" class="cls-6" d="M259.52,36.46c-1.36,8.14,6.23,14.41,6.23,14.41s9.25-3.61,10.61-11.75S270.7,21.2,270.7,21.2,260.87,28.31,259.52,36.46Z"/><path id="Red-2" data-name="Red" class="cls-6" d="M284.49,120.93c-2.49,14.31,10.86,25.54,10.86,25.54s16.38-6.15,18.87-20.45-9.8-31.7-9.8-31.7S287,106.62,284.49,120.93Z"/><path id="Red-3" data-name="Red" class="cls-6" d="M286.54,48C281,61.4,291.49,75.3,291.49,75.3s17.33-2.37,22.92-15.78-2.54-33.07-2.54-33.07S292.14,34.58,286.54,48Z"/><path id="Red-4" data-name="Red" class="cls-6" d="M297.84,171.54c-5.65,7.81-.95,18.31-.95,18.31s11.53,1,17.17-6.79,3.39-21.66,3.39-21.66S303.49,163.74,297.84,171.54Z"/><path id="Red-5" data-name="Red" class="cls-6" d="M251.8,129.83c3.94,8.77,15.45,10.06,15.45,10.06s6.72-9.35,2.77-18.13-17.15-13.83-17.15-13.83S247.85,121.06,251.8,129.83Z"/><path id="Red-6" data-name="Red" class="cls-6" d="M268.84,95.46c2.35,5.22,9.19,6,9.19,6s4-5.55,1.64-10.77-10.19-8.22-10.19-8.22S266.5,90.25,268.84,95.46Z"/><path id="Red-7" data-name="Red" class="cls-6" d="M318.59,71.94c-5.64,7.8-.95,18.29-.95,18.29s11.53,1,17.17-6.78,3.38-21.66,3.38-21.66S324.23,64.13,318.59,71.94Z"/><path id="Red-8" data-name="Red" class="cls-6" d="M271.2,185.74c-7.15,10.26-21.56,7.42-21.56,7.42s-5.73-15.3,1.42-25.57,24.64-11.85,24.64-11.85S278.36,175.46,271.2,185.74Z"/></g><g id="Leafs-purple"><path id="Purple" class="cls-7" d="M235.63,118.16c2.28,16.63-13.61,29-13.61,29s-18.65-7.77-20.92-24.39,12.63-36.19,12.63-36.19S233.36,101.53,235.63,118.16Z"/><path id="Purple-2" data-name="Purple" class="cls-7" d="M230.43,29.13C230.86,43.65,216,52.89,216,52.89S200.7,44.52,200.27,30s14.2-30,14.2-30S230,14.62,230.43,29.13Z"/><path id="Purple-3" data-name="Purple" class="cls-7" d="M181.08,36.46c1.36,8.14-6.24,14.41-6.24,14.41s-9.24-3.61-10.6-11.75S169.9,21.2,169.9,21.2,179.72,28.31,181.08,36.46Z"/><path id="Purple-4" data-name="Purple" class="cls-7" d="M199.63,72.85c-.27,9.61-10.4,15.11-10.4,15.11s-9.8-6.16-9.53-15.77S190.21,53,190.21,53,199.89,63.24,199.63,72.85Z"/><path id="Purple-5" data-name="Purple" class="cls-7" d="M229.93,69.31c-2.34,5.22-9.18,6-9.18,6s-4-5.56-1.65-10.78,10.2-8.23,10.2-8.23S232.28,64.1,229.93,69.31Z"/><path id="Purple-6" data-name="Purple" class="cls-7" d="M240.74,74.22c-3,9.14,4.7,17.73,4.7,17.73s11.31-2.5,14.29-11.64-3.43-21.66-3.43-21.66S243.72,65.09,240.74,74.22Z"/><path id="Purple-7" data-name="Purple" class="cls-7" d="M219.65,172.49c4.2,10.33-4,21-4,21s-13.28-1.91-17.48-12.23,2.17-25.41,2.17-25.41S215.44,162.16,219.65,172.49Z"/><path id="Purple-8" data-name="Purple" class="cls-7" d="M242,164c-4.06,5.25-12,4.21-12,4.21s-3-7.41,1.06-12.66,13.73-6.47,13.73-6.47S246.05,158.74,242,164Z"/></g><g id="Leafs-orange"><path id="Orange" class="cls-8" d="M347.42,237c-13.82-10.12-32.73-2.15-32.73-2.15s-2.14,20.26,11.69,30.38,38.68,6.52,38.68,6.52S361.25,247.14,347.42,237Z"/><path id="Orange-2" data-name="Orange" class="cls-8" d="M400.54,228.54c-7.64-5.6-18.08-1.19-18.08-1.19s-1.18,11.19,6.45,16.78,21.37,3.6,21.37,3.6S408.18,234.14,400.54,228.54Z"/><path id="Orange-3" data-name="Orange" class="cls-8" d="M405.68,170.23c-14.64.24-23.29,15.34-23.29,15.34s9.14,14.8,23.78,14.57,29.59-15.43,29.59-15.43S420.33,170,405.68,170.23Z"/><path id="Orange-4" data-name="Orange" class="cls-8" d="M390.72,261.35c-6.25-5.39-15.56-2.16-15.56-2.16s-1.71,9.77,4.54,15.16S398,278.83,398,278.83,397,266.74,390.72,261.35Z"/><path id="Orange-5" data-name="Orange" class="cls-8" d="M371.12,234.4c-4.5-3.29-10.64-.7-10.64-.7s-.7,6.59,3.8,9.89,12.58,2.11,12.58,2.11S375.62,237.69,371.12,234.4Z"/><path id="Orange-6" data-name="Orange" class="cls-8" d="M427.41,209.27c-8.33-3.62-17.12,2.67-17.12,2.67s1.28,10.7,9.6,14.32,20.7-1.12,20.7-1.12S435.72,212.89,427.41,209.27Z"/><path id="Orange-7" data-name="Orange" class="cls-8" d="M358.35,184.9c-14.92-2.91-27,10.55-27,10.55s6,17,20.93,19.9,33.4-9.3,33.4-9.3S373.26,187.82,358.35,184.9Z"/><path id="Orange-8" data-name="Orange" class="cls-8" d="M310.25,216.19c-5.81-4.67-4.47-13.54-4.47-13.54s8.39-3.19,14.19,1.48,7,15.56,7,15.56S316.06,220.87,310.25,216.19Z"/></g><g id="theTimes"><path id="t-2" data-name="t" class="cls-9" d="M123.5,441.85H106.9v-.42l4.63-2.2V412.16h0a11.54,11.54,0,0,0-2.62.32,5.32,5.32,0,0,0-2.24,1.29c-.94.87-5.88,6-5.88,6l-.53-.2.74-8.82h27.89l.93,8.82-.54.2s-4.93-5.09-5.87-6a5.38,5.38,0,0,0-2.24-1.29,9.27,9.27,0,0,0-2.34-.3v27.05l4.7,2.16Z"/><polygon id="h" class="cls-9" points="163.24 413.34 167.03 411.17 167.04 410.71 152.25 410.71 152.25 411.13 156.08 413.28 156.08 424.88 141.87 424.98 141.87 413.34 145.66 411.17 145.67 410.71 130.88 410.71 130.88 411.13 134.71 413.32 134.71 439.28 130.88 441.43 130.88 441.85 145.67 441.85 145.66 441.39 141.87 439.23 141.87 426.72 156.08 426.82 156.08 439.28 152.25 441.43 152.25 441.85 167.04 441.85 167.03 441.39 163.24 439.23 163.24 413.34"/><path id="e" class="cls-9" d="M194.88,441.85H168.41v-.42l3.82-2.15v-26l-3.82-2.19v-.42H194l.56,8.14-.47.16s-4.1-4.24-5-5.11a5.31,5.31,0,0,0-2.24-1.3,11.22,11.22,0,0,0-2.62-.31l-4.69-.15V425.3s4.91-.08,5.45-.15c.75-.09,1-.09,2.06-1.28.84-1,2.17-2.71,2.17-2.71h.55v10.43h-.55s-2.58-3.76-2.78-3.89a2.53,2.53,0,0,0-2-.7c-1.35,0-4.95-.09-4.95-.09v13.43s2.8,0,5.05-.15,3.49-.24,5-1.48,5.35-5.78,5.35-5.78l.59.19Z"/><path id="t-3" data-name="t" class="cls-9" d="M228.44,441.85h-16.6v-.42l4.63-2.2V412.16h0a11.49,11.49,0,0,0-2.62.32,5.26,5.26,0,0,0-2.24,1.29c-.94.87-5.88,6-5.88,6l-.53-.2.74-8.82h27.89l.92,8.82-.53.2s-4.93-5.09-5.88-6a5.3,5.3,0,0,0-2.23-1.29,9.27,9.27,0,0,0-2.34-.3v27.05l4.7,2.16Z"/><polygon id="i" class="cls-9" points="239.61 439.28 235.78 441.42 235.78 441.85 250.57 441.85 250.56 441.39 246.77 439.22 246.77 413.33 250.56 411.16 250.57 410.7 235.78 410.7 235.78 411.13 239.61 413.27 239.61 439.28"/><path id="e-2" data-name="e" class="cls-9" d="M321.89,433.12l-.58-.19s-3.88,4.54-5.36,5.78-2.71,1.28-5,1.48-5,.15-5,.15l0-13.43s3.6.11,5,.09a2.56,2.56,0,0,1,2,.7c.19.13,2.78,3.89,2.78,3.89h.54V421.16h-.54s-1.33,1.74-2.17,2.71c-1,1.19-1.32,1.19-2.06,1.28-.54.07-5.46.15-5.46.15l0-13.16,4.68.15a11.28,11.28,0,0,1,2.63.31,5.43,5.43,0,0,1,2.24,1.3c.94.87,5,5.11,5,5.11l.47-.16-.56-8.14H294.87v.42l3.83,2.19v26l-3.83,2.15v.42h26.48Z"/><polygon id="m" class="cls-9" points="273.67 432.03 283.16 410.7 293.54 410.7 293.53 411.16 289.75 413.33 289.75 439.22 293.53 441.39 293.54 441.85 278.77 441.85 278.77 441.42 282.6 439.28 282.6 417.13 271.41 441.42 270.06 441.42 258.13 416.63 258.13 439.22 261.92 441.39 261.93 441.85 251.99 441.85 251.99 441.42 255.82 439.28 255.82 413.27 251.99 411.13 251.99 410.7 263.23 410.7 273.67 432.03"/><path id="s" class="cls-9" d="M343,411.14l.58,7.69-.51.1s-5.32-5.8-5.94-6.28a4.66,4.66,0,0,0-5.51-.14,3.82,3.82,0,0,0-.94,5.08c1.68,3.3,6.66,5.63,7.93,6.39s7.63,3.85,6.83,10.15c-.76,5.94-6.07,7.65-8.28,8.07-4.7.89-12-1.1-12-1.1l-.55-8.06.62-.07s5.31,6.35,7.41,7.14,5,1.06,6.69-1.13.29-5.3-1.41-6.46c-2.4-1.64-5.89-3.49-8.33-5.11a10.48,10.48,0,0,1-4.85-7.45,8.4,8.4,0,0,1,5.15-8.89,15.72,15.72,0,0,1,7.52-.79A47.16,47.16,0,0,1,343,411.14Z"/></g><g id="Academy"><path id="a" class="cls-1" d="M100.47,485.45l11-30.3h1.2l10.86,30.3v.61h-.66l-3.76-10.37H104.84l-3.75,10.37h-.62Zm4.64-10.51h13.73L112.08,456H112Z"/><path id="c" class="cls-1" d="M136.85,470.48c0-10.29,6.23-15.46,13.17-15.46,5,0,7.19,1.59,9.44,3.62v.75h-.61c-1.73-2.07-4.15-3.62-8.79-3.62-6.76,0-12.32,4.9-12.32,14.66s4.81,15,12,15c4.9,0,7.86-1.82,9.67-4.2H160V482a13.06,13.06,0,0,1-10.29,4.2C142.29,486.2,136.85,480.72,136.85,470.48Z"/><path id="a-2" data-name="a" class="cls-1" d="M172.67,485.45l11-30.3h1.19l10.87,30.3v.61h-.66l-3.76-10.37H177l-3.76,10.37h-.61Zm4.63-10.51H191L184.28,456h-.09Z"/><path id="d" class="cls-1" d="M210.82,455.15h7.77c10.16,0,15.32,4.33,15.32,15.46s-5.16,15.45-15.32,15.45h-7.77Zm7.77,30.12c9.76,0,14.44-4,14.44-14.66S228.35,456,218.59,456H211.7v29.32Z"/><path id="e-3" data-name="e" class="cls-1" d="M249.63,455.15h17.84v.75h-17v13.74h12.94v.75H250.52v14.92h17.57v.75H249.63Z"/><path id="m-2" data-name="m" class="cls-1" d="M283.28,455.15h1.77l11.66,29.68h0l11.66-29.68h1.72v30.91h-.88V455.81H309L297.1,486.06h-.83l-11.88-30.25h-.22v30.25h-.89Z"/><path id="y" class="cls-1" d="M335.08,486.06v-13.2L325,455.73v-.58h.61l9.94,16.92h0l10-16.92h.58v.58L336,472.86v13.2Z"/></g></svg>
+<div data-direction="&darr;" class="scroll-direction">Scroll
+</div>  
+</header>
\ No newline at end of file
diff --git a/academy/src/script.js b/academy/src/script.js
new file mode 100644
index 0000000..521193f
--- /dev/null
+++ b/academy/src/script.js
@@ -0,0 +1,169 @@
+
+//svg name space
+const ns = "http://www.w3.org/2000/svg"
+
+//Create new svg group and place in the dom for copies
+const svg = document.getElementsByTagName('svg')[0]
+const copyGroup = document.createElementNS(ns,'g')
+copyGroup.setAttribute('id','copy');
+svg.appendChild(copyGroup)
+
+
+const header = document.querySelector('header');
+const header_height = getComputedStyle(header).height.split('px')[0];
+console.log(header_height);
+
+function changeArrow(direction){
+  const arrow = document.querySelector('.scroll-direction');
+  console.log(arrow)
+  arrow.setAttribute('data-direction', direction)
+}
+
+function changeDirection(){
+  if(window.pageYOffset > header_height){
+  changeArrow("↑")    
+  }
+  if(window.pageYOffset < header_height){
+    changeArrow("↓")
+  }
+}
+
+
+console.log(window.pageYOffset)
+
+// Array helper for leafPicker function. 'collection' key matches svg data attribute, 'leafs' key creates a 
+const leafPickers = [
+    {leafs:"orangeLeafs",
+    collection: "Orange"},
+    {leafs:"purpleLeafs",
+     collection:"Purple"},
+    {leafs:"redLeafs",
+    collection: "Red"},
+    {leafs:"pinkLeafs",
+    collection:"Pink"},
+    {leafs:"blueLeafs",
+    collection:"blue"},
+    {leafs:"greenLeafs",
+    collection:"green"}
+]
+
+// Function to copy leafs to a groupd tag in the dom
+let leafCopy = [];
+function leafPicker(collection){
+  const leafs = document.querySelectorAll(`[data-name="${collection}"]`)
+  for(const leaf of leafs){
+    leafCopy.push(leaf.cloneNode(true))
+  }
+}
+
+
+
+for(const leafs of leafPickers){
+  leafPicker(leafs.collection)
+}
+
+console.log(leafCopy)
+
+function makeCopies(){
+for(const copies of leafCopy){
+  copyGroup.appendChild(copies)
+
+const leafCopies = Array.from(document.getElementById('copy').querySelectorAll('[data-name]'))
+
+for(const [index, leafCopy] of leafCopies.entries()){
+  leafCopy.setAttribute('id' , `copy-${index}`)
+}
+}  
+}
+
+makeCopies()
+const leafCopies = Array.from(document.getElementById('copy').querySelectorAll('[data-name]'))
+
+  let spring = {},
+      summer = {},
+      autumn = {};
+
+function shuffle(array) {
+    var counter = array.length, temp, index;
+
+    // While there are elements in the array
+    while (counter--) {
+        // Pick a random index
+        index = (Math.random() * counter) | 0;
+
+        // And swap the last element with it
+        temp = array[counter];
+        array[counter] = array[index];
+        array[index] = temp;
+    }
+
+    return array;
+}
+
+spring = shuffle(leafCopies);
+spring.length = 20; // get 4 random elements
+
+
+summer = shuffle(leafCopies);
+summer.length = 40;
+
+
+ function debounce(func, wait = 20, immediate = true) {
+      var timeout;
+      return function() {
+        var context = this, args = arguments;
+        var later = function() {
+          timeout = null;
+          if (!immediate) func.apply(context, args);
+        };
+        var callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow) func.apply(context, args);
+      };
+    }
+
+// function checkSlide(){
+//   changeDirection()
+//   console.log(window.scrollY)
+// }
+changeDirection()
+
+
+const summerFall = anime({
+  targets : summer,
+  easing: 'easeInOutQuint',
+  opacity : 0,
+  translateY: 200,
+  duration: function(el,i,l){
+    return 2500 + (i * 100)
+  },
+    autoplay : false
+
+})
+
+function playAnimation(){
+
+if (window.pageYOffset <  10)
+		{
+    summerFall.play()  
+		summerFall.restart()
+		};
+};
+
+
+document.addEventListener("touchmove", ScrollStart, false);
+document.addEventListener("scroll", Scroll, false);
+
+function ScrollStart() {
+    debounce(playAnimation,10)
+}
+
+function Scroll() {
+    //end of scroll event for iOS
+    //and
+    debounce(playAnimation,10)
+  //start/end of scroll event for other browsers
+}
+
+window.addEventListener('scroll' , debounce(playAnimation,10))
\ No newline at end of file
diff --git a/academy/src/style.scss b/academy/src/style.scss
new file mode 100644
index 0000000..6c2c9f9
--- /dev/null
+++ b/academy/src/style.scss
@@ -0,0 +1,52 @@
+$colors: #1d1d1b, #e8336e, #007036, #bc0b3b, #823783, #ec6608,#ec6608,#1d1d1b, #e8336e, #007036, #bc0b3b, #823783, #ec6608,#ec6608,#1d1d1b, #e8336e, #007036, #bc0b3b, #823783, #ec6608;
+
+body{
+  height: 300vh
+}
+
+:root{
+  --width : 100%;
+  --bg : #efefef;
+}
+
+.scroll-direction{
+  font-size: 3rem;
+  
+}
+.scroll-direction:after{
+  content: attr(data-direction);
+
+}
+
+header{
+  position: fixed;
+  width: var(--width);
+  margin: 0;
+  background: var(--bg);
+  padding: 1rem;
+  height: 100vh;
+
+  
+}
+
+.logo{
+  position: absolute;
+  transform: translate3d(0,0,0);
+  height: 30rem;
+  top:50%;
+   left:50%;
+  transform: translate(-50%, -50%)
+   
+}
+
+main, article{
+  height: 100%;
+  
+}
+
+.wrapper{
+  margin: 0 auto;
+  max-width: var(--width);
+ 
+}
+
diff --git a/accessibility-to-a11y/README.markdown b/accessibility-to-a11y/README.markdown
new file mode 100644
index 0000000..c7229bf
--- /dev/null
+++ b/accessibility-to-a11y/README.markdown
@@ -0,0 +1,6 @@
+# Accessibility to a11y
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/alvaromontoro/pen/NJMMaL](https://codepen.io/alvaromontoro/pen/NJMMaL).
+
+ Animation that shows how accessibility turns into a11y. 
+
+This pen uses animations on pseudo elements, so it will not work on IE, Edge, or iOS.
\ No newline at end of file
diff --git a/accessibility-to-a11y/dist/index.html b/accessibility-to-a11y/dist/index.html
new file mode 100644
index 0000000..1f36fd1
--- /dev/null
+++ b/accessibility-to-a11y/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Accessibility to a11y</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div>
+  <span>a</span><span>c</span><span>c</span><span>e</span><span>s</span><span>s</span><span>i</span><span>b</span><span>i</span><span>l</span><span>i</span><span>t</span><span>y</span>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/accessibility-to-a11y/dist/style.css b/accessibility-to-a11y/dist/style.css
new file mode 100644
index 0000000..a313094
--- /dev/null
+++ b/accessibility-to-a11y/dist/style.css
@@ -0,0 +1,201 @@
+@keyframes colorize {
+  0% {
+    color: #909;
+  }
+  100% {
+    color: #e00;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes removeLetters {
+  0% {
+    max-width: 8vw;
+  }
+  100% {
+    max-width: 0;
+  }
+}
+@keyframes addMargin {
+  0% {
+    margin: 0 0;
+  }
+  100% {
+    margin: 0 5vw;
+  }
+}
+@keyframes numbersUp {
+  0% {
+    transform: translate(-50%, 100%);
+  }
+  100% {
+    transform: translate(-50%, -3%);
+  }
+}
+@keyframes lineGrow {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 84%;
+  }
+}
+@keyframes numberUpdate {
+  0% {
+    content: "";
+  }
+  9% {
+    content: "1";
+  }
+  18% {
+    content: "2";
+  }
+  27% {
+    content: "3";
+  }
+  36% {
+    content: "4";
+  }
+  45% {
+    content: "5";
+  }
+  54% {
+    content: "6";
+  }
+  63% {
+    content: "7";
+  }
+  72% {
+    content: "8";
+  }
+  81% {
+    content: "9";
+  }
+  90% {
+    content: "10";
+  }
+  100% {
+    content: "11";
+  }
+}
+div {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
+}
+
+div::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  width: 0%;
+  left: 50%;
+  border-bottom: 0.5vw solid #505;
+  transform: translate(-50%, 50%);
+  animation: lineGrow 1s, fadeOut 1s linear;
+  animation-delay: 1s, 8s;
+  animation-fill-mode: forwards;
+}
+
+div::after {
+  content: "";
+  font-size: 8vw;
+  font-family: 'Courier', 'Courier New', 'Courier New Sans', sans-serif;
+  color: #909;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 100%);
+  animation: numberUpdate 5.5s steps(11, end), numbersUp 0.75s linear;
+  animation-delay: 2s, 9s;
+  animation-fill-mode: forwards;
+}
+
+span {
+  font-size: 8vw;
+  font-family: 'Courier', 'Courier New', 'Courier New Sans', sans-serif;
+  color: #909;
+  display: inline-block;
+  overflow: hidden;
+  max-width: 8vw;
+}
+
+div span:nth-child(2) {
+  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
+  animation-delay: 2s, 8s, 9s;
+  animation-fill-mode: forwards;
+}
+
+div span:nth-child(3) {
+  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
+  animation-delay: 2.5s, 8s, 9s;
+  animation-fill-mode: forwards;
+}
+
+div span:nth-child(4) {
+  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
+  animation-delay: 3s, 8s, 9s;
+  animation-fill-mode: forwards;
+}
+
+div span:nth-child(5) {
+  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
+  animation-delay: 3.5s, 8s, 9s;
+  animation-fill-mode: forwards;
+}
+
+div span:nth-child(6) {
+  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
+  animation-delay: 4s, 8s, 9s;
+  animation-fill-mode: forwards;
+}
+
+div span:nth-child(7) {
+  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
+  animation-delay: 4.5s, 8s, 9s;
+  animation-fill-mode: forwards;
+}
+
+div span:nth-child(8) {
+  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
+  animation-delay: 5s, 8s, 9s;
+  animation-fill-mode: forwards;
+}
+
+div span:nth-child(9) {
+  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
+  animation-delay: 5.5s, 8s, 9s;
+  animation-fill-mode: forwards;
+}
+
+div span:nth-child(10) {
+  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
+  animation-delay: 6s, 8s, 9s;
+  animation-fill-mode: forwards;
+}
+
+div span:nth-child(11) {
+  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
+  animation-delay: 6.5s, 8s, 9s;
+  animation-fill-mode: forwards;
+}
+
+div span:nth-child(12) {
+  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
+  animation-delay: 7s, 8s, 9s;
+  animation-fill-mode: forwards;
+}
+
+div span:first-child, div span:last-child {
+  animation: addMargin 0.5s;
+  animation-delay: 9s;
+  animation-fill-mode: forwards;
+}
diff --git a/accessibility-to-a11y/license.txt b/accessibility-to-a11y/license.txt
new file mode 100644
index 0000000..c802087
--- /dev/null
+++ b/accessibility-to-a11y/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Alvaro Montoro (https://codepen.io/alvaromontoro/pen/NJMMaL)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/accessibility-to-a11y/src/index.html b/accessibility-to-a11y/src/index.html
new file mode 100644
index 0000000..b4375b9
--- /dev/null
+++ b/accessibility-to-a11y/src/index.html
@@ -0,0 +1,3 @@
+<div>
+  <span>a</span><span>c</span><span>c</span><span>e</span><span>s</span><span>s</span><span>i</span><span>b</span><span>i</span><span>l</span><span>i</span><span>t</span><span>y</span>
+</div>
\ No newline at end of file
diff --git a/accessibility-to-a11y/src/style.scss b/accessibility-to-a11y/src/style.scss
new file mode 100644
index 0000000..6e71b37
--- /dev/null
+++ b/accessibility-to-a11y/src/style.scss
@@ -0,0 +1,95 @@
+@keyframes colorize {
+  0% { color: #909; }
+  100% { color: #e00; }
+}
+
+@keyframes fadeOut {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes removeLetters {
+  0% { max-width: 8vw; }
+  100% { max-width: 0; }
+}
+
+@keyframes addMargin {
+  0% { margin: 0 0; }
+  100% { margin: 0 5vw; }
+}
+
+@keyframes numbersUp {
+  0% { transform: translate(-50%, 100%); }
+  100% { transform: translate(-50%, -3%); }
+}
+
+@keyframes lineGrow {
+  0% { width: 0%; }
+  100% { width: 84%; }
+}
+
+@keyframes numberUpdate {
+  0% { content: ""; }
+  @for $i from 1 through 10 {
+    #{$i * 9}% { content: "#{$i}"; }
+  }
+  100% { content: "11"; }
+}
+
+div {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
+}
+
+div::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  width: 0%;
+  left: 50%;
+  border-bottom: 0.5vw solid #505;
+  transform: translate(-50%, 50%);
+  animation: lineGrow 1s, fadeOut 1s linear;
+  animation-delay: 1s, 8s;
+  animation-fill-mode: forwards;
+}
+
+div::after {
+  content: "";
+  font-size: 8vw;
+  font-family: 'Courier', 'Courier New', 'Courier New Sans', sans-serif;
+  color: #909;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 100%);
+  animation: numberUpdate 5.5s steps(11,end), numbersUp 0.75s linear;
+  animation-delay: 2s, 9s;
+  animation-fill-mode: forwards;
+}
+
+span {
+  font-size: 8vw;
+  font-family: 'Courier', 'Courier New', 'Courier New Sans', sans-serif;
+  color: #909;
+  display: inline-block;
+  overflow: hidden;
+  max-width: 8vw;
+}
+
+@for $i from 2 through 12 {
+  div span:nth-child(#{$i}) {
+    animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
+    animation-delay: #{$i/2 + 1}s, 8s, 9s;
+    animation-fill-mode: forwards;
+  }
+}
+
+div span:first-child, div span:last-child {
+  animation: addMargin 0.5s;
+  animation-delay: 9s;
+  animation-fill-mode: forwards;
+}
\ No newline at end of file
diff --git a/acrobatic-preloader/README.markdown b/acrobatic-preloader/README.markdown
new file mode 100644
index 0000000..db60fc9
--- /dev/null
+++ b/acrobatic-preloader/README.markdown
@@ -0,0 +1,5 @@
+# Acrobatic Preloader
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jkantner/pen/VwrYggy](https://codepen.io/jkantner/pen/VwrYggy).
+
+It goes round and round and out like a dolphin.
diff --git a/acrobatic-preloader/dist/index.html b/acrobatic-preloader/dist/index.html
new file mode 100644
index 0000000..7df4b08
--- /dev/null
+++ b/acrobatic-preloader/dist/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Acrobatic Preloader</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main>
+	<svg class="ap" viewBox="0 0 128 256" width="128px" height="256px" xmlns="http://www.w3.org/2000/svg">
+		<defs>
+			<linearGradient id="ap-grad1" x1="0" y1="0" x2="0" y2="1">
+				<stop offset="0%" stop-color="hsl(223,90%,55%)" />
+				<stop offset="100%" stop-color="hsl(253,90%,55%)" />
+			</linearGradient>
+			<linearGradient id="ap-grad2" x1="0" y1="0" x2="0" y2="1">
+				<stop offset="0%" stop-color="hsl(193,90%,55%)" />
+				<stop offset="50%" stop-color="hsl(223,90%,55%)" />
+				<stop offset="100%" stop-color="hsl(253,90%,55%)" />
+			</linearGradient>
+		</defs>
+		<circle class="ap__ring" r="56" cx="64" cy="192" fill="none" stroke="#ddd" stroke-width="16" stroke-linecap="round" />
+		<circle class="ap__worm1" r="56" cx="64" cy="192" fill="none" stroke="url(#ap-grad1)" stroke-width="16" stroke-linecap="round" stroke-dasharray="87.96 263.89" />
+		<path class="ap__worm2" d="M120,192A56,56,0,0,1,8,192C8,161.07,16,8,64,8S120,161.07,120,192Z" fill="none" stroke="url(#ap-grad2)" stroke-width="16" stroke-linecap="round" stroke-dasharray="87.96 494" />
+	</svg>
+</main>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/acrobatic-preloader/dist/style.css b/acrobatic-preloader/dist/style.css
new file mode 100644
index 0000000..bc1d8d4
--- /dev/null
+++ b/acrobatic-preloader/dist/style.css
@@ -0,0 +1,98 @@
+* {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+:root {
+	--hue: 223;
+	--bg: hsl(var(--hue),10%,90%);
+	--fg: hsl(var(--hue),10%,10%);
+	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
+}
+body {
+	background-color: var(--bg);
+	color: var(--fg);
+	font: 1em/1.5 sans-serif;
+	height: 100vh;
+	display: grid;
+	place-items: center;
+	transition: background-color 0.3s;
+}
+main {
+	padding: 1.5em 0;
+}
+
+.ap {
+	width: 8em;
+	height: 16em;
+}
+.ap__ring {
+	stroke: hsla(var(--hue),10%,10%,0.15);
+	transition: stroke 0.3s;
+}
+.ap__worm1,
+.ap__worm2 {
+	animation-duration: 3s;
+	animation-iteration-count: infinite;
+}
+.ap__worm1 {
+	animation-name: worm1;
+}
+.ap__worm2 {
+	animation-name: worm2;
+	visibility: hidden;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: hsl(var(--hue),10%,10%);
+		--fg: hsl(var(--hue),10%,90%);
+	}
+	.ap__ring {
+		stroke: hsla(var(--hue),10%,90%,0.1);
+	}
+}
+
+/* Animtions */
+@keyframes worm1 {
+	from {
+		animation-timing-function: ease-in-out;
+		stroke-dashoffset: -87.96;
+	}
+	20% {
+		animation-timing-function: ease-in;
+		stroke-dashoffset: 0;
+	}
+	60% {
+		stroke-dashoffset: -791.68;
+		visibility: visible;
+	}
+	60.1%,
+	to {
+		stroke-dashoffset: -791.68;
+		visibility: hidden;
+	}
+}
+@keyframes worm2 {
+	from,
+	60% {
+		stroke-dashoffset: -87.96;
+		visibility: hidden;
+	}
+	60.1% {
+		animation-timing-function: cubic-bezier(0,0,0.5,0.75);
+		stroke-dashoffset: -87.96;
+		visibility: visible;
+	}
+	77% {
+		animation-timing-function: cubic-bezier(0.5,0.25,0.5,0.88);
+		stroke-dashoffset: -340;
+		visibility: visible;
+	}
+	to {
+		stroke-dashoffset: -669.92;
+		visibility: visible;
+	}
+}
\ No newline at end of file
diff --git a/acrobatic-preloader/license.txt b/acrobatic-preloader/license.txt
new file mode 100644
index 0000000..8b03093
--- /dev/null
+++ b/acrobatic-preloader/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Jon Kantner (https://codepen.io/jkantner/pen/VwrYggy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/acrobatic-preloader/src/index.html b/acrobatic-preloader/src/index.html
new file mode 100644
index 0000000..feca1c2
--- /dev/null
+++ b/acrobatic-preloader/src/index.html
@@ -0,0 +1,18 @@
+<main>
+	<svg class="ap" viewBox="0 0 128 256" width="128px" height="256px" xmlns="http://www.w3.org/2000/svg">
+		<defs>
+			<linearGradient id="ap-grad1" x1="0" y1="0" x2="0" y2="1">
+				<stop offset="0%" stop-color="hsl(223,90%,55%)" />
+				<stop offset="100%" stop-color="hsl(253,90%,55%)" />
+			</linearGradient>
+			<linearGradient id="ap-grad2" x1="0" y1="0" x2="0" y2="1">
+				<stop offset="0%" stop-color="hsl(193,90%,55%)" />
+				<stop offset="50%" stop-color="hsl(223,90%,55%)" />
+				<stop offset="100%" stop-color="hsl(253,90%,55%)" />
+			</linearGradient>
+		</defs>
+		<circle class="ap__ring" r="56" cx="64" cy="192" fill="none" stroke="#ddd" stroke-width="16" stroke-linecap="round" />
+		<circle class="ap__worm1" r="56" cx="64" cy="192" fill="none" stroke="url(#ap-grad1)" stroke-width="16" stroke-linecap="round" stroke-dasharray="87.96 263.89" />
+		<path class="ap__worm2" d="M120,192A56,56,0,0,1,8,192C8,161.07,16,8,64,8S120,161.07,120,192Z" fill="none" stroke="url(#ap-grad2)" stroke-width="16" stroke-linecap="round" stroke-dasharray="87.96 494" />
+	</svg>
+</main>
\ No newline at end of file
diff --git a/acrobatic-preloader/src/style.css b/acrobatic-preloader/src/style.css
new file mode 100644
index 0000000..bc1d8d4
--- /dev/null
+++ b/acrobatic-preloader/src/style.css
@@ -0,0 +1,98 @@
+* {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+:root {
+	--hue: 223;
+	--bg: hsl(var(--hue),10%,90%);
+	--fg: hsl(var(--hue),10%,10%);
+	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
+}
+body {
+	background-color: var(--bg);
+	color: var(--fg);
+	font: 1em/1.5 sans-serif;
+	height: 100vh;
+	display: grid;
+	place-items: center;
+	transition: background-color 0.3s;
+}
+main {
+	padding: 1.5em 0;
+}
+
+.ap {
+	width: 8em;
+	height: 16em;
+}
+.ap__ring {
+	stroke: hsla(var(--hue),10%,10%,0.15);
+	transition: stroke 0.3s;
+}
+.ap__worm1,
+.ap__worm2 {
+	animation-duration: 3s;
+	animation-iteration-count: infinite;
+}
+.ap__worm1 {
+	animation-name: worm1;
+}
+.ap__worm2 {
+	animation-name: worm2;
+	visibility: hidden;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: hsl(var(--hue),10%,10%);
+		--fg: hsl(var(--hue),10%,90%);
+	}
+	.ap__ring {
+		stroke: hsla(var(--hue),10%,90%,0.1);
+	}
+}
+
+/* Animtions */
+@keyframes worm1 {
+	from {
+		animation-timing-function: ease-in-out;
+		stroke-dashoffset: -87.96;
+	}
+	20% {
+		animation-timing-function: ease-in;
+		stroke-dashoffset: 0;
+	}
+	60% {
+		stroke-dashoffset: -791.68;
+		visibility: visible;
+	}
+	60.1%,
+	to {
+		stroke-dashoffset: -791.68;
+		visibility: hidden;
+	}
+}
+@keyframes worm2 {
+	from,
+	60% {
+		stroke-dashoffset: -87.96;
+		visibility: hidden;
+	}
+	60.1% {
+		animation-timing-function: cubic-bezier(0,0,0.5,0.75);
+		stroke-dashoffset: -87.96;
+		visibility: visible;
+	}
+	77% {
+		animation-timing-function: cubic-bezier(0.5,0.25,0.5,0.88);
+		stroke-dashoffset: -340;
+		visibility: visible;
+	}
+	to {
+		stroke-dashoffset: -669.92;
+		visibility: visible;
+	}
+}
\ No newline at end of file
diff --git a/ambient-blur-using-backdrop-filter/README.markdown b/ambient-blur-using-backdrop-filter/README.markdown
new file mode 100644
index 0000000..9766f33
--- /dev/null
+++ b/ambient-blur-using-backdrop-filter/README.markdown
@@ -0,0 +1,5 @@
+# Ambient blur using backdrop filter
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pepf/pen/GqZkdj](https://codepen.io/pepf/pen/GqZkdj).
+
+Testing the backdrop filter property in a interesting looking visual
diff --git a/ambient-blur-using-backdrop-filter/dist/index.html b/ambient-blur-using-backdrop-filter/dist/index.html
new file mode 100644
index 0000000..79e229c
--- /dev/null
+++ b/ambient-blur-using-backdrop-filter/dist/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Ambient blur using backdrop filter</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="wrapper">
+  <div class="demo">
+    <div class="overlay"></div>
+    <div class="overlay second"></div>
+    <div class="overlay third"></div>
+    <div class="overlay fourth"></div>
+    <canvas id="canvas" width="800" height="800"></canvas>
+  </div>
+</div>
+<span class="disclaimer">
+You need a recent Safari browser or Chrome >= 49 with the "Experimental Web Platform Features" flag enabled to view this pen properly
+</span>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/ambient-blur-using-backdrop-filter/dist/script.js b/ambient-blur-using-backdrop-filter/dist/script.js
new file mode 100644
index 0000000..6859506
--- /dev/null
+++ b/ambient-blur-using-backdrop-filter/dist/script.js
@@ -0,0 +1,51 @@
+cubes = [];
+
+//random int
+function rand(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function draw() {
+   var ctx = canvas.getContext('2d');
+   ctx.clearRect(0,0,w,h);
+  
+   var t = new Date().getTime();
+  
+   cubes.forEach(function(cube) {
+      var speed = cube.speed || 500;
+      cube.dx = 50 * Math.sin(t/speed - cube.offset);
+      cube.dy = 200 * Math.sin(t/speed);
+      drawCube(ctx, cube);  
+   });
+
+  
+   window.requestAnimationFrame(draw);
+}
+
+function drawCube( ctx, cube ) {
+  ctx.fillStyle = cube.color;
+  ctx.fillRect(cube.x + cube.dx, cube.y + cube.dy, 
+               cube.w, cube.h);
+}
+
+function init() {
+  canvas = document.getElementById('canvas');
+  w = canvas.width;
+  h = canvas.height;
+  
+  var i=0;
+  while(i<100) {
+    cubes.push({
+      color: "#"+rand(0,999999),
+      w: rand(50,150), h: rand(50,150),
+      x: rand(0,w), y: rand(0,h),
+      dx: 0, dy: 0,
+      offset: rand(0,10),
+      speed: rand(500,2000)  
+    });
+    i++;
+  }
+  window.requestAnimationFrame(draw);  
+}
+
+init();
\ No newline at end of file
diff --git a/ambient-blur-using-backdrop-filter/dist/style.css b/ambient-blur-using-backdrop-filter/dist/style.css
new file mode 100644
index 0000000..e860346
--- /dev/null
+++ b/ambient-blur-using-backdrop-filter/dist/style.css
@@ -0,0 +1,64 @@
+body {
+    background: #efefef;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+.wrapper {
+  background-color: white;
+  padding: 1em;
+  display:inline-block;
+  border-radius: 5px;
+  box-shadow: 0px 0px 50px rgba(0,0,0,0.1)
+}
+.demo {
+  border: 1px solid #ddd;
+  display: inline-block;
+  padding: 0;
+  position: relative;
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  height: 50%;
+  -webkit-backdrop-filter: brightness(150%) saturate(150%) blur(15px);
+          backdrop-filter: brightness(150%) saturate(150%) blur(15px);
+}
+.second {
+  left:50%;
+  width:50%;
+  -webkit-backdrop-filter: blur(30px) brightness(150%);
+          backdrop-filter: blur(30px) brightness(150%);
+}
+.third {
+  bottom: 0;
+  left: 0;
+  top: 50%;
+  height: 50%;
+  width: 50%;
+  -webkit-backdrop-filter: blur(30px) brightness(150%);
+          backdrop-filter: blur(30px) brightness(150%);
+}
+.fourth {
+  top: 50%;
+  left: 50%;
+  right: 0;
+  bottom: 0;
+  -webkit-backdrop-filter: brightness(150%) saturate(150%) blur(15px);
+          backdrop-filter: brightness(150%) saturate(150%) blur(15px);
+}
+
+.disclaimer {
+  font-family: sans-serif;
+  color: #aaa;
+  font-size:14px;
+  position:absolute;
+  top: 0
+}
\ No newline at end of file
diff --git a/ambient-blur-using-backdrop-filter/license.txt b/ambient-blur-using-backdrop-filter/license.txt
new file mode 100644
index 0000000..4eefabc
--- /dev/null
+++ b/ambient-blur-using-backdrop-filter/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Pepijn (https://codepen.io/pepf/pen/GqZkdj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/ambient-blur-using-backdrop-filter/src/index.html b/ambient-blur-using-backdrop-filter/src/index.html
new file mode 100644
index 0000000..bfd6fec
--- /dev/null
+++ b/ambient-blur-using-backdrop-filter/src/index.html
@@ -0,0 +1,12 @@
+<div class="wrapper">
+  <div class="demo">
+    <div class="overlay"></div>
+    <div class="overlay second"></div>
+    <div class="overlay third"></div>
+    <div class="overlay fourth"></div>
+    <canvas id="canvas" width="800" height="800"></canvas>
+  </div>
+</div>
+<span class="disclaimer">
+You need a recent Safari browser or Chrome >= 49 with the "Experimental Web Platform Features" flag enabled to view this pen properly
+</span>
diff --git a/ambient-blur-using-backdrop-filter/src/script.js b/ambient-blur-using-backdrop-filter/src/script.js
new file mode 100644
index 0000000..dd37aaa
--- /dev/null
+++ b/ambient-blur-using-backdrop-filter/src/script.js
@@ -0,0 +1,51 @@
+cubes = [];
+
+//random int
+function rand(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function draw() {
+   var ctx = canvas.getContext('2d');
+   ctx.clearRect(0,0,w,h);
+  
+   var t = new Date().getTime();
+  
+   cubes.forEach(function(cube) {
+      var speed = cube.speed || 500;
+      cube.dx = 50 * Math.sin(t/speed - cube.offset);
+      cube.dy = 200 * Math.sin(t/speed);
+      drawCube(ctx, cube);  
+   });
+
+  
+   window.requestAnimationFrame(draw);
+}
+
+function drawCube( ctx, cube ) {
+  ctx.fillStyle = cube.color;
+  ctx.fillRect(cube.x + cube.dx, cube.y + cube.dy, 
+               cube.w, cube.h);
+}
+
+function init() {
+  canvas = document.getElementById('canvas');
+  w = canvas.width;
+  h = canvas.height;
+  
+  var i=0;
+  while(i<100) {
+    cubes.push({
+      color: "#"+rand(0,999999),
+      w: rand(50,150), h: rand(50,150),
+      x: rand(0,w), y: rand(0,h),
+      dx: 0, dy: 0,
+      offset: rand(0,10),
+      speed: rand(500,2000)  
+    });
+    i++;
+  }
+  window.requestAnimationFrame(draw);  
+}
+
+init();
diff --git a/ambient-blur-using-backdrop-filter/src/style.css b/ambient-blur-using-backdrop-filter/src/style.css
new file mode 100644
index 0000000..e4af238
--- /dev/null
+++ b/ambient-blur-using-backdrop-filter/src/style.css
@@ -0,0 +1,60 @@
+body {
+    background: #efefef;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+.wrapper {
+  background-color: white;
+  padding: 1em;
+  display:inline-block;
+  border-radius: 5px;
+  box-shadow: 0px 0px 50px rgba(0,0,0,0.1)
+}
+.demo {
+  border: 1px solid #ddd;
+  display: inline-block;
+  padding: 0;
+  position: relative;
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  height: 50%;
+  backdrop-filter: brightness(150%) saturate(150%) blur(15px);
+}
+.second {
+  left:50%;
+  width:50%;
+  backdrop-filter: blur(30px) brightness(150%);
+}
+.third {
+  bottom: 0;
+  left: 0;
+  top: 50%;
+  height: 50%;
+  width: 50%;
+  backdrop-filter: blur(30px) brightness(150%);
+}
+.fourth {
+  top: 50%;
+  left: 50%;
+  right: 0;
+  bottom: 0;
+  backdrop-filter: brightness(150%) saturate(150%) blur(15px);
+}
+
+.disclaimer {
+  font-family: sans-serif;
+  color: #aaa;
+  font-size:14px;
+  position:absolute;
+  top: 0
+}
\ No newline at end of file
diff --git a/animated-atom-svg/README.markdown b/animated-atom-svg/README.markdown
new file mode 100644
index 0000000..fee8fae
--- /dev/null
+++ b/animated-atom-svg/README.markdown
@@ -0,0 +1,4 @@
+# Animated atom SVG
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/bradfrost/pen/KKwpzxG](https://codepen.io/bradfrost/pen/KKwpzxG).
+
+ 
\ No newline at end of file
diff --git a/animated-atom-svg/dist/index.html b/animated-atom-svg/dist/index.html
new file mode 100644
index 0000000..c90c4e3
--- /dev/null
+++ b/animated-atom-svg/dist/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Animated atom SVG</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox='-1024 -1024 2048 2048' class="atom">
+  <g>
+    <circle class="nucleus" fill="#ababab" stroke="#ababab" r="132"/>
+    <circle class="ring" r="230" fill="none" stroke="#fff" stroke-width="15" />
+<circle class="ring" r="320" fill="none" stroke="#fff" stroke-width="15" />
+     <circle class="ring" r="410" fill="none" stroke="#fff" stroke-width="15" />
+<circle class="ring" r="500" fill="none" stroke="#fff" stroke-width="15" />
+   <circle class="ring" r="590" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="680" fill="none" stroke="#fff" stroke-width="15" />
+     <circle class="ring" r="770" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="860" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="950" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1040" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1130" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1220" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1310" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1400" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1490" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1580" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1670" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1760" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1850" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1940" fill="none" stroke="#fff" stroke-width="15" />
+     <circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="225" r="28"/>
+    <circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="-290"  cy="-142" r="28"/>
+    <circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="310" cy="270" r="28"/>
+    <circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="400" cy="-295" r="28"/>
+    <circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="-400" cy="295" r="28"/>
+    <circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="-515" cy="-295" r="28"/>
+  </g>
+</svg>
+
+<button class="theme-switch-btn js-theme-switch-btn">Switch theme</buton>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/animated-atom-svg/dist/script.js b/animated-atom-svg/dist/script.js
new file mode 100644
index 0000000..c667376
--- /dev/null
+++ b/animated-atom-svg/dist/script.js
@@ -0,0 +1,5 @@
+var themeBtn = document.querySelector('.js-theme-switch-btn');
+
+themeBtn.addEventListener('click', event => {
+  document.body.classList.toggle('theme-brad');
+});
\ No newline at end of file
diff --git a/animated-atom-svg/dist/style.css b/animated-atom-svg/dist/style.css
new file mode 100644
index 0000000..db50d61
--- /dev/null
+++ b/animated-atom-svg/dist/style.css
@@ -0,0 +1,236 @@
+:root {
+  --color-background-body: #333;
+  --color-particle-fill: #ababab;
+  --color-ring-stroke: #fff;
+}
+
+.theme-brad {
+  --color-background-body: #f6f5de;
+  --color-particle-fill: #be6701;
+  --color-ring-stroke: #110000;
+}
+
+body {
+  background-color: var(--color-background-body);
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.5s ease-in-out;
+}
+
+.atom {
+  width: 200vw;
+  height: 200vh;
+}
+
+.nucleus {
+  fill: var(--color-particle-fill);
+  stroke: var(--color-particle-fill);
+  transition: all 0.5s ease-in-out;
+  -webkit-animation: nucleus-pulse 2s infinite ease-in-out alternate;
+          animation: nucleus-pulse 2s infinite ease-in-out alternate;
+}
+
+.electron {
+  fill: var(--color-particle-fill);
+  stroke: var(--color-particle-fill);
+  transition: all 0.5s ease-in-out;
+  -webkit-animation: rotate 10s infinite linear, electron-pulse 1s infinite ease-in-out alternate;
+          animation: rotate 10s infinite linear, electron-pulse 1s infinite ease-in-out alternate;
+}
+
+.ring {
+  stroke: var(--color-ring-stroke);
+  -webkit-animation: ring-width 1s infinite ease-in-out alternate;
+          animation: ring-width 1s infinite ease-in-out alternate;
+}
+
+.ring:nth-of-type(1) {
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
+}
+
+.ring:nth-of-type(2) {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s;
+}
+
+.ring:nth-of-type(3) {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s;
+}
+
+.ring:nth-of-type(4) {
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+}
+
+.ring:nth-of-type(5) {
+  -webkit-animation-delay: 0.5s;
+          animation-delay: 0.5s;
+}
+
+.ring:nth-of-type(6) {
+  -webkit-animation-delay: 0.6s;
+          animation-delay: 0.6s;
+}
+
+.ring:nth-of-type(7) {
+  -webkit-animation-delay: 0.7s;
+          animation-delay: 0.7s;
+}
+
+.ring:nth-of-type(8) {
+  -webkit-animation-delay: 0.8s;
+          animation-delay: 0.8s;
+}
+
+.ring:nth-of-type(9) {
+  -webkit-animation-delay: 0.9s;
+          animation-delay: 0.9s;
+}
+
+.ring:nth-of-type(10) {
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+
+.ring:nth-of-type(11) {
+  -webkit-animation-delay: 1.1s;
+          animation-delay: 1.1s;
+}
+
+.ring:nth-of-type(12) {
+  -webkit-animation-delay: 1.2s;
+          animation-delay: 1.2s;
+}
+
+.ring:nth-of-type(13) {
+  -webkit-animation-delay: 1.3s;
+          animation-delay: 1.3s;
+}
+
+.ring:nth-of-type(14) {
+  -webkit-animation-delay: 1.4s;
+          animation-delay: 1.4s;
+}
+
+.ring:nth-of-type(15) {
+  -webkit-animation-delay: 1.5s;
+          animation-delay: 1.5s;
+}
+
+.ring:nth-of-type(16) {
+  -webkit-animation-delay: 1.6s;
+          animation-delay: 1.6s;
+}
+
+.ring:nth-of-type(17) {
+  -webkit-animation-delay: 1.7s;
+          animation-delay: 1.7s;
+}
+
+.ring:nth-of-type(18) {
+  -webkit-animation-delay: 1.8s;
+          animation-delay: 1.8s;
+}
+
+.ring:nth-of-type(19) {
+  -webkit-animation-delay: 1.9s;
+          animation-delay: 1.9s;
+}
+
+.ring:nth-of-type(20) {
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+
+@-webkit-keyframes ring-width {
+  0% {
+    stroke-width: 15;
+  }
+  100% {
+    stroke-width: 2;
+  }
+}
+
+@keyframes ring-width {
+  0% {
+    stroke-width: 15;
+  }
+  100% {
+    stroke-width: 2;
+  }
+}
+@-webkit-keyframes nucleus-pulse {
+  0% {
+    stroke-width: 0;
+  }
+  100% {
+    stroke-width: 12;
+  }
+}
+@keyframes nucleus-pulse {
+  0% {
+    stroke-width: 0;
+  }
+  100% {
+    stroke-width: 12;
+  }
+}
+@-webkit-keyframes electron-pulse {
+  0% {
+    stroke-width: 6;
+  }
+  100% {
+    stroke-width: 3;
+  }
+}
+@keyframes electron-pulse {
+  0% {
+    stroke-width: 6;
+  }
+  100% {
+    stroke-width: 3;
+  }
+}
+@-webkit-keyframes rotate {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes rotate {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+.theme-switch-btn {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #808080;
+  color: #fff;
+  border: 0;
+  padding: 0.5rem;
+  text-transform: lowercase;
+  cursor: pointer;
+}
+.theme-switch-btn:focus {
+  outline: 4px solid #fff;
+}
\ No newline at end of file
diff --git a/animated-atom-svg/license.txt b/animated-atom-svg/license.txt
new file mode 100644
index 0000000..0e6095d
--- /dev/null
+++ b/animated-atom-svg/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2019 by Brad Frost (https://codepen.io/bradfrost/pen/KKwpzxG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/animated-atom-svg/src/index.html b/animated-atom-svg/src/index.html
new file mode 100644
index 0000000..9997c77
--- /dev/null
+++ b/animated-atom-svg/src/index.html
@@ -0,0 +1,33 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox='-1024 -1024 2048 2048' class="atom">
+  <g>
+    <circle class="nucleus" fill="#ababab" stroke="#ababab" r="132"/>
+    <circle class="ring" r="230" fill="none" stroke="#fff" stroke-width="15" />
+<circle class="ring" r="320" fill="none" stroke="#fff" stroke-width="15" />
+     <circle class="ring" r="410" fill="none" stroke="#fff" stroke-width="15" />
+<circle class="ring" r="500" fill="none" stroke="#fff" stroke-width="15" />
+   <circle class="ring" r="590" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="680" fill="none" stroke="#fff" stroke-width="15" />
+     <circle class="ring" r="770" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="860" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="950" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1040" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1130" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1220" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1310" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1400" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1490" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1580" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1670" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1760" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1850" fill="none" stroke="#fff" stroke-width="15" />
+    <circle class="ring" r="1940" fill="none" stroke="#fff" stroke-width="15" />
+     <circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="225" r="28"/>
+    <circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="-290"  cy="-142" r="28"/>
+    <circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="310" cy="270" r="28"/>
+    <circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="400" cy="-295" r="28"/>
+    <circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="-400" cy="295" r="28"/>
+    <circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="-515" cy="-295" r="28"/>
+  </g>
+</svg>
+
+<button class="theme-switch-btn js-theme-switch-btn">Switch theme</buton>
\ No newline at end of file
diff --git a/animated-atom-svg/src/script.js b/animated-atom-svg/src/script.js
new file mode 100644
index 0000000..c667376
--- /dev/null
+++ b/animated-atom-svg/src/script.js
@@ -0,0 +1,5 @@
+var themeBtn = document.querySelector('.js-theme-switch-btn');
+
+themeBtn.addEventListener('click', event => {
+  document.body.classList.toggle('theme-brad');
+});
\ No newline at end of file
diff --git a/animated-atom-svg/src/style.scss b/animated-atom-svg/src/style.scss
new file mode 100644
index 0000000..815c791
--- /dev/null
+++ b/animated-atom-svg/src/style.scss
@@ -0,0 +1,109 @@
+:root {
+  --color-background-body: #333;
+  --color-particle-fill: #ababab;
+  --color-ring-stroke: #fff;
+}
+
+.theme-brad {
+  --color-background-body: #f6f5de;
+  --color-particle-fill: #be6701;
+  --color-ring-stroke: #110000;
+}
+
+body {
+  background-color: var(--color-background-body);
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.5s ease-in-out;
+}
+
+.atom {
+  width: 200vw;
+  height: 200vh;
+}
+
+.nucleus {
+   fill: var(--color-particle-fill);
+   stroke: var(--color-particle-fill);
+   transition: all 0.5s ease-in-out;
+   animation: nucleus-pulse 2s infinite ease-in-out alternate;
+}
+
+.electron {
+   fill: var(--color-particle-fill);
+   stroke: var(--color-particle-fill);
+   transition: all 0.5s ease-in-out;
+   animation: rotate 10s infinite linear, electron-pulse 1s infinite ease-in-out alternate;
+}
+
+.ring {
+   stroke: var(--color-ring-stroke);
+  animation: ring-width 1s infinite ease-in-out alternate;
+}
+
+@for $i from 1 through 20 {
+ .ring:nth-of-type(#{$i}) {
+    animation-delay: 0.1s * $i
+  }
+}
+
+@keyframes ring-width {
+  0%   { 
+    stroke-width: 15; 
+  }
+  100% { 
+    stroke-width: 2; 
+  }
+}
+
+@keyframes nucleus-pulse {
+  0%   { 
+    stroke-width: 0;
+  }
+  100% { 
+    stroke-width: 12;
+  }
+}
+
+@keyframes electron-pulse {
+  0%   { 
+    stroke-width: 6;
+  }
+  100% { 
+    stroke-width: 3;
+  }
+}
+
+@keyframes rotate {
+  0%   { 
+    transform: rotate(0);
+  }
+  100% { 
+    transform: rotate(360deg);
+  }
+}
+
+
+
+.theme-switch-btn {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #808080;
+  color: #fff;
+  border: 0;
+  padding: 0.5rem;
+  text-transform: lowercase;
+  cursor: pointer;
+  
+  &:focus {
+    outline: 4px solid #fff;
+  }
+}
\ No newline at end of file
diff --git a/animated-fill-and-strikethrough-checkboxes/README.markdown b/animated-fill-and-strikethrough-checkboxes/README.markdown
new file mode 100644
index 0000000..23ebd3a
--- /dev/null
+++ b/animated-fill-and-strikethrough-checkboxes/README.markdown
@@ -0,0 +1,5 @@
+# Animated Fill and Strikethrough Checkboxes
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jkantner/pen/QWKydLJ](https://codepen.io/jkantner/pen/QWKydLJ).
+
+A checkbox concept where the unchecked state is secretly a square covering the checkmark. When checked, the fill is shaped into a line and penetrates the label text. The reverse happens when unchecked again.
diff --git a/animated-fill-and-strikethrough-checkboxes/dist/index.html b/animated-fill-and-strikethrough-checkboxes/dist/index.html
new file mode 100644
index 0000000..1052953
--- /dev/null
+++ b/animated-fill-and-strikethrough-checkboxes/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Animated Fill and Strikethrough Checkboxes</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<form>
+	<label><input class="pristine" type="checkbox" name="A" checked> <span>Apples</span></label>
+	<br>
+	<label><input class="pristine" type="checkbox" name="B"> <span>Bananas</span></label>
+	<br>
+	<label><input class="pristine" type="checkbox" name="C"> <span>Cherries</span></label>
+	<br>
+	<label><input class="pristine" type="checkbox" name="D"> <span>Oranges</span></label>
+</form>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/animated-fill-and-strikethrough-checkboxes/dist/script.js b/animated-fill-and-strikethrough-checkboxes/dist/script.js
new file mode 100644
index 0000000..88bce6f
--- /dev/null
+++ b/animated-fill-and-strikethrough-checkboxes/dist/script.js
@@ -0,0 +1,5 @@
+document.addEventListener("DOMContentLoaded",function(){
+	this.forms[0].addEventListener("change",e => {
+		e.target.removeAttribute("class");
+	});
+});
\ No newline at end of file
diff --git a/animated-fill-and-strikethrough-checkboxes/dist/style.css b/animated-fill-and-strikethrough-checkboxes/dist/style.css
new file mode 100644
index 0000000..98f699f
--- /dev/null
+++ b/animated-fill-and-strikethrough-checkboxes/dist/style.css
@@ -0,0 +1,230 @@
+* {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+:root {
+	--bg: #e3e4e8;
+	--checkBg: #ffffff;
+	--checkBorder: #c7cad1;
+	--fg: #17181c;
+	--fgDim: #5c6270;
+	--primary: #255ff4;
+	--dur: 0.6s;
+	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
+}
+body, input {
+	color: var(--fg);
+	font: 1em/1.5 system-ui, -apple-system, sans-serif;
+}
+body {
+	background: var(--bg);
+	display: grid;
+	height: 100vh;
+	place-items: center;
+}
+label, input[type=checkbox] {
+	cursor: pointer;
+}
+label {
+	display: inline-flex;
+	align-items: center;
+	margin-bottom: 0.75em;
+	position: relative;
+	-webkit-tap-highlight-color: transparent;
+}
+input[type=checkbox], input[type=checkbox]:before, input[type=checkbox]:after {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+input[type=checkbox], input[type=checkbox]:before {
+	background: var(--checkBg);
+	border-radius: 0.2em;
+	box-shadow: 0 0 0 1px var(--checkBorder) inset;
+}
+input[type=checkbox]:before, input[type=checkbox]:after {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+input[type=checkbox] {
+	margin-right: 0.75em;
+	-webkit-appearance: none;
+	appearance: none;
+}
+input[type=checkbox] + span {
+	animation: brighten var(--dur) linear;
+}
+input[type=checkbox]:before {
+	animation: unstrike var(--dur) linear;
+	content: "";
+	transform-origin: 0 50%;
+	z-index: 1;
+}
+input[type=checkbox]:after {
+	color: var(--primary);
+	content: "\2713";
+	font-size: 1.5em;
+	line-height: 1;
+	text-align: center;
+}
+input[type=checkbox]:focus {
+	outline: transparent;
+}
+input[type=checkbox]:focus + span {
+	text-decoration: underline;
+}
+input[type=checkbox]:checked + span {
+	animation-name: dim;
+	color: var(--fgDim);
+}
+input[type=checkbox]:checked:before {
+	animation-name: strike;
+	background: var(--fgDim);
+	border-radius: 0;
+	box-shadow: 0 0 0 1px var(--fgDim) inset;
+	transform: translateX(2.25em) scale(1,0.05);
+	width: calc(100% - 2.25em);
+}
+input[type=checkbox].pristine:before, input[type=checkbox].pristine + span {
+	animation: none;
+}
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #17181c;
+		--checkBg: #2e3138;
+		--checkBorder: #454954;
+		--fg: #e3e4e8;
+		--fgDim: #8f95a3;
+		--primary: #5583f6;
+	}
+}
+/* Animations */
+@keyframes dim {
+	from, 83% {
+		color: var(--fg);
+	}
+	to {
+		color: var(--fgDim);
+	}
+}
+@keyframes brighten {
+	from {
+		color: var(--fgDim);
+	}
+	17%, to {
+		color: var(--fg);
+	}
+}
+@keyframes unstrike {
+	from {
+		background: var(--fgDim);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fgDim) inset;
+		transform: translateX(2.25em) scale(1,0.05);
+		width: calc(100% - 2.25em);
+	}
+	14% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(2.25em) scale(1,0.05);
+		width: calc(100% - 2.25em);
+	}
+	29% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(2.75em) scale(1,0.05);
+		width: calc(100% - 2.25em);
+	}
+	43% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(-0.5em) scale(0.75,0.05);
+		width: 1.5em;
+	}
+	57% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(0) scale(1,0.05);
+		width: 1.5em;
+	}
+	71% {
+		background: var(--fg);
+		border-radius: 0.2em;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(0) scale(1,1.25);
+		width: 1.5em;
+	}
+	86% {
+		background: var(--fg);
+		border-radius: 0.2em;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(0) scale(1,1);
+		width: 1.5em;
+	}
+	to {
+		background: var(--checkBg);
+		border-radius: 0.2em;
+		box-shadow: 0 0 0 1px var(--checkBorder) inset;
+		transform: translateX(0) scale(1,1);
+		width: 1.5em;
+	}
+}
+@keyframes strike {
+	from {
+		background: var(--checkBg);
+		border-radius: 0.2em;
+		box-shadow: 0 0 0 1px var(--checkBorder) inset;
+		transform: translateX(0) scale(1,1);
+		width: 1.5em;
+	}
+	17% {
+		background: var(--fg);
+		border-radius: 0.2em;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(0) scale(1,1);
+		width: 1.5em;
+	}
+	33% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(0) scale(1,0.05);
+		width: 1.5em;
+	}
+	50% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(-0.5em) scale(1,0.05);
+		width: 1.5em;
+	}
+	67% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(2.25em) scale(1.25,0.05);
+		width: calc(100% - 2.25em);
+	}
+	83% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(2.25em) scale(1,0.05);
+		width: calc(100% - 2.25em);
+	}
+	to {
+		background: var(--fgDim);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fgDim) inset;
+		transform: translateX(2.25em) scale(1,0.05);
+		width: calc(100% - 2.25em);
+	}
+}
\ No newline at end of file
diff --git a/animated-fill-and-strikethrough-checkboxes/license.txt b/animated-fill-and-strikethrough-checkboxes/license.txt
new file mode 100644
index 0000000..d13c1af
--- /dev/null
+++ b/animated-fill-and-strikethrough-checkboxes/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Jon Kantner (https://codepen.io/jkantner/pen/QWKydLJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/animated-fill-and-strikethrough-checkboxes/src/index.html b/animated-fill-and-strikethrough-checkboxes/src/index.html
new file mode 100644
index 0000000..09f242b
--- /dev/null
+++ b/animated-fill-and-strikethrough-checkboxes/src/index.html
@@ -0,0 +1,9 @@
+<form>
+	<label><input class="pristine" type="checkbox" name="A" checked> <span>Apples</span></label>
+	<br>
+	<label><input class="pristine" type="checkbox" name="B"> <span>Bananas</span></label>
+	<br>
+	<label><input class="pristine" type="checkbox" name="C"> <span>Cherries</span></label>
+	<br>
+	<label><input class="pristine" type="checkbox" name="D"> <span>Oranges</span></label>
+</form>
\ No newline at end of file
diff --git a/animated-fill-and-strikethrough-checkboxes/src/script.js b/animated-fill-and-strikethrough-checkboxes/src/script.js
new file mode 100644
index 0000000..88bce6f
--- /dev/null
+++ b/animated-fill-and-strikethrough-checkboxes/src/script.js
@@ -0,0 +1,5 @@
+document.addEventListener("DOMContentLoaded",function(){
+	this.forms[0].addEventListener("change",e => {
+		e.target.removeAttribute("class");
+	});
+});
\ No newline at end of file
diff --git a/animated-fill-and-strikethrough-checkboxes/src/style.css b/animated-fill-and-strikethrough-checkboxes/src/style.css
new file mode 100644
index 0000000..98f699f
--- /dev/null
+++ b/animated-fill-and-strikethrough-checkboxes/src/style.css
@@ -0,0 +1,230 @@
+* {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+:root {
+	--bg: #e3e4e8;
+	--checkBg: #ffffff;
+	--checkBorder: #c7cad1;
+	--fg: #17181c;
+	--fgDim: #5c6270;
+	--primary: #255ff4;
+	--dur: 0.6s;
+	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
+}
+body, input {
+	color: var(--fg);
+	font: 1em/1.5 system-ui, -apple-system, sans-serif;
+}
+body {
+	background: var(--bg);
+	display: grid;
+	height: 100vh;
+	place-items: center;
+}
+label, input[type=checkbox] {
+	cursor: pointer;
+}
+label {
+	display: inline-flex;
+	align-items: center;
+	margin-bottom: 0.75em;
+	position: relative;
+	-webkit-tap-highlight-color: transparent;
+}
+input[type=checkbox], input[type=checkbox]:before, input[type=checkbox]:after {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+input[type=checkbox], input[type=checkbox]:before {
+	background: var(--checkBg);
+	border-radius: 0.2em;
+	box-shadow: 0 0 0 1px var(--checkBorder) inset;
+}
+input[type=checkbox]:before, input[type=checkbox]:after {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+input[type=checkbox] {
+	margin-right: 0.75em;
+	-webkit-appearance: none;
+	appearance: none;
+}
+input[type=checkbox] + span {
+	animation: brighten var(--dur) linear;
+}
+input[type=checkbox]:before {
+	animation: unstrike var(--dur) linear;
+	content: "";
+	transform-origin: 0 50%;
+	z-index: 1;
+}
+input[type=checkbox]:after {
+	color: var(--primary);
+	content: "\2713";
+	font-size: 1.5em;
+	line-height: 1;
+	text-align: center;
+}
+input[type=checkbox]:focus {
+	outline: transparent;
+}
+input[type=checkbox]:focus + span {
+	text-decoration: underline;
+}
+input[type=checkbox]:checked + span {
+	animation-name: dim;
+	color: var(--fgDim);
+}
+input[type=checkbox]:checked:before {
+	animation-name: strike;
+	background: var(--fgDim);
+	border-radius: 0;
+	box-shadow: 0 0 0 1px var(--fgDim) inset;
+	transform: translateX(2.25em) scale(1,0.05);
+	width: calc(100% - 2.25em);
+}
+input[type=checkbox].pristine:before, input[type=checkbox].pristine + span {
+	animation: none;
+}
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #17181c;
+		--checkBg: #2e3138;
+		--checkBorder: #454954;
+		--fg: #e3e4e8;
+		--fgDim: #8f95a3;
+		--primary: #5583f6;
+	}
+}
+/* Animations */
+@keyframes dim {
+	from, 83% {
+		color: var(--fg);
+	}
+	to {
+		color: var(--fgDim);
+	}
+}
+@keyframes brighten {
+	from {
+		color: var(--fgDim);
+	}
+	17%, to {
+		color: var(--fg);
+	}
+}
+@keyframes unstrike {
+	from {
+		background: var(--fgDim);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fgDim) inset;
+		transform: translateX(2.25em) scale(1,0.05);
+		width: calc(100% - 2.25em);
+	}
+	14% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(2.25em) scale(1,0.05);
+		width: calc(100% - 2.25em);
+	}
+	29% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(2.75em) scale(1,0.05);
+		width: calc(100% - 2.25em);
+	}
+	43% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(-0.5em) scale(0.75,0.05);
+		width: 1.5em;
+	}
+	57% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(0) scale(1,0.05);
+		width: 1.5em;
+	}
+	71% {
+		background: var(--fg);
+		border-radius: 0.2em;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(0) scale(1,1.25);
+		width: 1.5em;
+	}
+	86% {
+		background: var(--fg);
+		border-radius: 0.2em;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(0) scale(1,1);
+		width: 1.5em;
+	}
+	to {
+		background: var(--checkBg);
+		border-radius: 0.2em;
+		box-shadow: 0 0 0 1px var(--checkBorder) inset;
+		transform: translateX(0) scale(1,1);
+		width: 1.5em;
+	}
+}
+@keyframes strike {
+	from {
+		background: var(--checkBg);
+		border-radius: 0.2em;
+		box-shadow: 0 0 0 1px var(--checkBorder) inset;
+		transform: translateX(0) scale(1,1);
+		width: 1.5em;
+	}
+	17% {
+		background: var(--fg);
+		border-radius: 0.2em;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(0) scale(1,1);
+		width: 1.5em;
+	}
+	33% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(0) scale(1,0.05);
+		width: 1.5em;
+	}
+	50% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(-0.5em) scale(1,0.05);
+		width: 1.5em;
+	}
+	67% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(2.25em) scale(1.25,0.05);
+		width: calc(100% - 2.25em);
+	}
+	83% {
+		background: var(--fg);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fg) inset;
+		transform: translateX(2.25em) scale(1,0.05);
+		width: calc(100% - 2.25em);
+	}
+	to {
+		background: var(--fgDim);
+		border-radius: 0;
+		box-shadow: 0 0 0 1px var(--fgDim) inset;
+		transform: translateX(2.25em) scale(1,0.05);
+		width: calc(100% - 2.25em);
+	}
+}
\ No newline at end of file
diff --git a/animated-pill-radiosreact-responsive/README.markdown b/animated-pill-radiosreact-responsive/README.markdown
new file mode 100644
index 0000000..da6785f
--- /dev/null
+++ b/animated-pill-radiosreact-responsive/README.markdown
@@ -0,0 +1,5 @@
+# Animated Pill Radios - React, Responsive
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shalanah/pen/LYWxwNp](https://codepen.io/shalanah/pen/LYWxwNp).
+
+
diff --git a/animated-pill-radiosreact-responsive/dist/index.html b/animated-pill-radiosreact-responsive/dist/index.html
new file mode 100644
index 0000000..3d9dec6
--- /dev/null
+++ b/animated-pill-radiosreact-responsive/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Animated Pill Radios - React, Responsive</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="root">
+</div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/animated-pill-radiosreact-responsive/dist/script.js b/animated-pill-radiosreact-responsive/dist/script.js
new file mode 100644
index 0000000..024cdea
--- /dev/null
+++ b/animated-pill-radiosreact-responsive/dist/script.js
@@ -0,0 +1,305 @@
+import React, {
+useState,
+useRef,
+useEffect } from
+'https://cdn.skypack.dev/react';
+import ReactDOM from 'https://cdn.skypack.dev/react-dom';
+import styled from 'https://cdn.skypack.dev/styled-components';
+import ResizeObserver from 'https://cdn.skypack.dev/resize-observer-polyfill';
+
+const opts = [
+{
+  name: 'Hamburgers',
+  value: 'ham' },
+
+{
+  name: 'Hotdogs',
+  value: 'hot',
+  background: '#e75252' // optional
+},
+{
+  name: 'Salads',
+  value: 'sal',
+  background: '#2e8e65' // optional
+}];
+
+
+const fontStyling = {
+  textTransform: 'uppercase',
+  fontWeight: 'bold',
+  fontSize: '4.3vw',
+  letterSpacing: '0.05em',
+  fontFamily: 'Bebas Neue, sans-serif' };
+
+
+// Comps
+const Highlight = styled.span`
+  position: absolute;
+  background: var(--sd-pill-bg);
+  height: var(--sd-pill-height);
+  pointer-events: none;
+  transition-duration: var(--sd-pill-dur);
+  transition-timing-function: ease-out;
+  transition-property: transform, background, width;
+  left: 0px;
+  transform-origin: center;
+  ::before,
+  ::after {
+    transform-origin: center;
+    transition-property: transform, background, width;
+    transition-duration: var(--sd-pill-dur);
+    transition-timing-function: ease-out;
+    content: '';
+    position: absolute;
+    top: 0px;
+    height: var(--sd-pill-height);
+    width: var(--sd-pill-height);
+    background: var(--sd-pill-bg);
+    border-radius: 100%;
+  }
+  ::before {
+    left: 0px;
+    transform: translateX(-50%);
+  }
+  ::after {
+    right: 0px;
+    transform: translateX(50%);
+  }
+`;
+const Container = styled.div`
+  position: relative;
+  border-radius: 10000px; /* absurd number to ensure circle on edges*/
+  display: inline-flex;
+`;
+
+const Label = styled.label`
+  position: relative;
+  transition: 0.15s color;
+  cursor: pointer;
+  user-select: none;
+  line-height: 1em;
+  transition-property: color;
+  transition-duration: var(--sd-pill-dur);
+  transition-timing-function: ease-out;
+`;
+
+var Input = styled.input`
+  position: absolute;
+  left: -100vw;
+  top: -100vh;
+`;
+
+var ExtraPillHitZone = styled.span`
+  position: absolute;
+  width: var(--sd-pill-height);
+  height: var(--sd-pill-height);
+  border-radius: var(--sd-pill-height);
+  top: 0;
+`;
+
+// If value can be a px value return that
+// - IE a number `5.5` or `5.5px` will return 5.5
+// - IE `5vh`, `5em` etc will return null
+function getPadPx(val) {
+  if (isNaN(val)) {
+    const parts = val.match(/([0-9\.]+)(.+)/);
+    if (parts[1] === 'px') return val[0];else
+    return null; // will need to fill with a real value
+  } else {
+    return val; // no change!
+  }
+}
+
+function Switch({
+  // Required
+  opts,
+  radioGroupName,
+  selected,
+  onChange,
+  // Optional
+  style,
+  textPadTop = '.25em',
+  textPadBottom = '.25em',
+  containerPad = '.25em',
+  background = '#efefef',
+  borderColor = '#ccc',
+  borderWidth = 1, // inset
+  activeBg = 'purple',
+  activeTextColor = '#fff',
+  textColor = '#222' })
+{var _opts$index;
+  const index = opts.findIndex(({ value }) => value === selected);
+  const containerRef = useRef(null);
+  const containerPadRef = useRef(null);
+  const dim = useElemResize(containerRef); // for forcing repaints on container shift or size change
+
+  const refs = useRef([]); // For each option
+  refs.current = Array.from({ length: opts.length }).map(
+  (_, i) => refs.current[i] = React.createRef());
+
+
+  const [containerPadPx, setContainerPadPx] = useState(() =>
+  getPadPx(containerPad));
+
+  const [activePos, setActivePos] = useState({ width: 0, left: 0 });
+
+  // Get containerPadPx for no px padding values (like ems or rems or vh etc)
+  useEffect(() => {
+    if (containerPadRef && containerPadRef.current) {
+      const pad = containerPadRef.current.getBoundingClientRect().width;
+      if (containerPadPx !== pad) setContainerPadPx(pad);
+    }
+  }, [containerPadPx, setContainerPadPx, dim]); // winDim add for responsive re-renders
+
+  // Get placement of active pill
+  useEffect(() => {var _refs$current, _refs$current$index;
+    if (
+    refs !== null && refs !== void 0 && (_refs$current = refs.current) !== null && _refs$current !== void 0 && (_refs$current$index = _refs$current[index]) !== null && _refs$current$index !== void 0 && _refs$current$index.current &&
+    containerRef &&
+    containerRef.current &&
+    containerPadPx !== null)
+    {
+      const {
+        width: prevWidth,
+        left: prevLeft,
+        height: prevHeight } =
+      activePos;
+      let { width, left: l } =
+      refs.current[index].current.getBoundingClientRect();
+      const {
+        left: containerLeft,
+        height: containerHeight } =
+      containerRef.current.getBoundingClientRect();
+      const left = l - containerLeft;
+      const height = containerHeight - containerPadPx * 2;
+      if (width !== prevWidth || left !== prevLeft || height !== prevHeight)
+      setActivePos({
+        width,
+        left,
+        height,
+        speed: Math.abs((prevLeft || 0) - left) * 0.0005 // make animations a factor of items average width: ;
+      });
+    }
+  }, [activePos, index, containerPadPx, dim]); // winDim add for responsive re-renders
+  return /*#__PURE__*/(
+    React.createElement("span", { style: style }, /*#__PURE__*/
+
+    React.createElement("div", { ref: containerPadRef, style: { width: containerPad } }),
+
+    !isNaN(containerPadPx) && /*#__PURE__*/
+    React.createElement(Container, {
+      ref: containerRef,
+      style: {
+        '--sd-pill-dur': activePos !== null && activePos !== void 0 && activePos.speed ?
+        Math.min(Math.max(activePos === null || activePos === void 0 ? void 0 : activePos.speed, 0.15), 0.35) + 's' :
+        '.15s',
+        '--sd-pill-bg': ((_opts$index = opts[index]) === null || _opts$index === void 0 ? void 0 : _opts$index.background) || activeBg,
+        '--sd-pill-height': `${activePos.height}px`,
+        opacity: activePos !== null && activePos !== void 0 && activePos.height ? 1 : 0,
+        background,
+        boxShadow: `inset 0 0 0 ${borderWidth}px ${borderColor}`,
+        padding: `${containerPadPx}px ${
+        containerPadPx + activePos.height / 2 + 1
+        }px` } }, /*#__PURE__*/
+
+
+    React.createElement(Highlight, {
+      style: {
+        top: containerPad,
+        width: activePos.width,
+        transform: `translateX(${activePos.left}px)` } }),
+
+
+    opts.map(({ name, value }, i) => {
+      const checked = value === selected;
+      return /*#__PURE__*/(
+        React.createElement(Label, {
+          key: i,
+          style: {
+            paddingTop: textPadTop, // allows for numbers or css vals
+            paddingBottom: textPadBottom,
+            paddingLeft: 0, // good measure
+            paddingRight: 0, // good measure
+            color: checked ? activeTextColor : textColor,
+            marginRight:
+            opts.length - 1 === i ? 0 : activePos.height * 0.8 + 'px' } }, /*#__PURE__*/
+
+
+        React.createElement(Input, {
+          name: radioGroupName,
+          type: 'radio',
+          id: name,
+          checked: checked,
+          val: value,
+          key: i,
+          onChange: () => {
+            if (onChange) onChange(value);
+          } }), /*#__PURE__*/
+
+        React.createElement(ExtraPillHitZone, { style: { left: -activePos.height / 2 } }), /*#__PURE__*/
+        React.createElement(ExtraPillHitZone, { style: { right: -activePos.height / 2 } }), /*#__PURE__*/
+        React.createElement("span", { ref: refs.current[i] }, name)));
+
+
+    }))));
+
+
+
+
+}
+
+function useElemResize(
+ref)
+{
+  // Hook draws inspiration from: ZeeCoder/use-resize-observer
+  const [{ width, height }, setDim] = useState({
+    width: 1,
+    height: 1 });
+
+  useEffect(() => {
+    const el = ref === null || ref === void 0 ? void 0 : ref.current;
+    const ro = new ResizeObserver(entries => {
+      if (!entries || !entries.length) return;
+      const {
+        contentRect: { width, height } } =
+      entries[0];
+      setDim({ width, height });
+    });
+    if (el) ro.observe(el);
+    return () => {
+      if (el) ro.unobserve(el);
+    };
+  }, [ref]);
+  return { width, height };
+}
+
+// Usage
+function App() {
+  const [selected, setSelected] = useState(opts[0].value);
+  return /*#__PURE__*/(
+    React.createElement(Switch
+    // Required
+    , { opts: opts,
+      selected: selected,
+      onChange: v => setSelected(v),
+      radioGroupName: 'radio demo'
+      // Optional
+      , containerPad: '.25em' // Any valid css value or a number (numbers will be in px)
+      , background: '#fff',
+      borderColor: '#ddd',
+      borderWidth: 2 // Number in px can be zero
+      , activeBg: '#373e96' // Default value if not specified in opts
+      , activeTextColor: '#fff',
+      textColor: '#333',
+      textPadTop: '.3em' // Any valid css value or a number (numbers will be in px)
+      , textPadBottom: '.17em' // Nice to have diff values for diff fonts
+      , style: {
+        // For positioning and setting default font values
+        margin: 'auto',
+        ...fontStyling } }));
+
+
+
+}
+
+ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('root'));
\ No newline at end of file
diff --git a/animated-pill-radiosreact-responsive/dist/style.css b/animated-pill-radiosreact-responsive/dist/style.css
new file mode 100644
index 0000000..76c9b07
--- /dev/null
+++ b/animated-pill-radiosreact-responsive/dist/style.css
@@ -0,0 +1,19 @@
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+
+#root,
+body,
+html {
+  height: 100%;
+  width: 100%;
+}
+#root {
+  display: flex;
+  background: #efefef;
+}
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
\ No newline at end of file
diff --git a/animated-pill-radiosreact-responsive/license.txt b/animated-pill-radiosreact-responsive/license.txt
new file mode 100644
index 0000000..81fbde5
--- /dev/null
+++ b/animated-pill-radiosreact-responsive/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by shalanah (https://codepen.io/shalanah/pen/LYWxwNp)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/animated-pill-radiosreact-responsive/src/index.html b/animated-pill-radiosreact-responsive/src/index.html
new file mode 100644
index 0000000..c1123fe
--- /dev/null
+++ b/animated-pill-radiosreact-responsive/src/index.html
@@ -0,0 +1,2 @@
+<div id="root">
+</div>
diff --git a/animated-pill-radiosreact-responsive/src/script.babel b/animated-pill-radiosreact-responsive/src/script.babel
new file mode 100644
index 0000000..3e66f53
--- /dev/null
+++ b/animated-pill-radiosreact-responsive/src/script.babel
@@ -0,0 +1,305 @@
+import React, {
+  useState,
+  useRef,
+  useEffect,
+} from 'https://cdn.skypack.dev/react';
+import ReactDOM from 'https://cdn.skypack.dev/react-dom';
+import styled from 'https://cdn.skypack.dev/styled-components';
+import ResizeObserver from 'https://cdn.skypack.dev/resize-observer-polyfill';
+
+const opts = [
+  {
+    name: 'Hamburgers',
+    value: 'ham',
+  },
+  {
+    name: 'Hotdogs',
+    value: 'hot',
+    background: '#e75252', // optional
+  },
+  {
+    name: 'Salads',
+    value: 'sal',
+    background: '#2e8e65', // optional
+  },
+];
+
+const fontStyling = {
+  textTransform: 'uppercase',
+  fontWeight: 'bold',
+  fontSize: '4.3vw',
+  letterSpacing: '0.05em',
+  fontFamily: 'Bebas Neue, sans-serif',
+};
+
+// Comps
+const Highlight = styled.span`
+  position: absolute;
+  background: var(--sd-pill-bg);
+  height: var(--sd-pill-height);
+  pointer-events: none;
+  transition-duration: var(--sd-pill-dur);
+  transition-timing-function: ease-out;
+  transition-property: transform, background, width;
+  left: 0px;
+  transform-origin: center;
+  ::before,
+  ::after {
+    transform-origin: center;
+    transition-property: transform, background, width;
+    transition-duration: var(--sd-pill-dur);
+    transition-timing-function: ease-out;
+    content: '';
+    position: absolute;
+    top: 0px;
+    height: var(--sd-pill-height);
+    width: var(--sd-pill-height);
+    background: var(--sd-pill-bg);
+    border-radius: 100%;
+  }
+  ::before {
+    left: 0px;
+    transform: translateX(-50%);
+  }
+  ::after {
+    right: 0px;
+    transform: translateX(50%);
+  }
+`;
+const Container = styled.div`
+  position: relative;
+  border-radius: 10000px; /* absurd number to ensure circle on edges*/
+  display: inline-flex;
+`;
+
+const Label = styled.label`
+  position: relative;
+  transition: 0.15s color;
+  cursor: pointer;
+  user-select: none;
+  line-height: 1em;
+  transition-property: color;
+  transition-duration: var(--sd-pill-dur);
+  transition-timing-function: ease-out;
+`;
+
+var Input = styled.input`
+  position: absolute;
+  left: -100vw;
+  top: -100vh;
+`;
+
+var ExtraPillHitZone = styled.span`
+  position: absolute;
+  width: var(--sd-pill-height);
+  height: var(--sd-pill-height);
+  border-radius: var(--sd-pill-height);
+  top: 0;
+`;
+
+// If value can be a px value return that
+// - IE a number `5.5` or `5.5px` will return 5.5
+// - IE `5vh`, `5em` etc will return null
+function getPadPx(val) {
+  if (isNaN(val)) {
+    const parts = val.match(/([0-9\.]+)(.+)/);
+    if (parts[1] === 'px') return val[0];
+    else return null; // will need to fill with a real value
+  } else {
+    return val; // no change!
+  }
+}
+
+function Switch({
+  // Required
+  opts,
+  radioGroupName,
+  selected,
+  onChange,
+  // Optional
+  style,
+  textPadTop = '.25em',
+  textPadBottom = '.25em',
+  containerPad = '.25em',
+  background = '#efefef',
+  borderColor = '#ccc',
+  borderWidth = 1, // inset
+  activeBg = 'purple',
+  activeTextColor = '#fff',
+  textColor = '#222',
+}) {
+  const index = opts.findIndex(({ value }) => value === selected);
+  const containerRef = useRef(null);
+  const containerPadRef = useRef(null);
+  const dim = useElemResize(containerRef); // for forcing repaints on container shift or size change
+
+  const refs = useRef([]); // For each option
+  refs.current = Array.from({ length: opts.length }).map(
+    (_, i) => (refs.current[i] = React.createRef())
+  );
+
+  const [containerPadPx, setContainerPadPx] = useState(() =>
+    getPadPx(containerPad)
+  );
+  const [activePos, setActivePos] = useState({ width: 0, left: 0 });
+
+  // Get containerPadPx for no px padding values (like ems or rems or vh etc)
+  useEffect(() => {
+    if (containerPadRef && containerPadRef.current) {
+      const pad = containerPadRef.current.getBoundingClientRect().width;
+      if (containerPadPx !== pad) setContainerPadPx(pad);
+    }
+  }, [containerPadPx, setContainerPadPx, dim]); // winDim add for responsive re-renders
+
+  // Get placement of active pill
+  useEffect(() => {
+    if (
+      refs?.current?.[index]?.current &&
+      containerRef &&
+      containerRef.current &&
+      containerPadPx !== null
+    ) {
+      const {
+        width: prevWidth,
+        left: prevLeft,
+        height: prevHeight,
+      } = activePos;
+      let { width, left: l } =
+        refs.current[index].current.getBoundingClientRect();
+      const {
+        left: containerLeft,
+        height: containerHeight,
+      } = containerRef.current.getBoundingClientRect();
+      const left = l - containerLeft;
+      const height = containerHeight - containerPadPx * 2;
+      if (width !== prevWidth || left !== prevLeft || height !== prevHeight)
+        setActivePos({
+          width,
+          left,
+          height,
+          speed: Math.abs((prevLeft || 0) - left) * 0.0005, // make animations a factor of items average width: ;
+        });
+    }
+  }, [activePos, index, containerPadPx, dim]); // winDim add for responsive re-renders
+  return (
+    <span style={style}>
+      {/* Div is just to get padding value in px */}
+      <div ref={containerPadRef} style={{ width: containerPad }} />
+      {/* Container - need containerPadPx first */}
+      {!isNaN(containerPadPx) && (
+        <Container
+          ref={containerRef}
+          style={{
+            '--sd-pill-dur': activePos?.speed
+              ? Math.min(Math.max(activePos?.speed, 0.15), 0.35) + 's'
+              : '.15s',
+            '--sd-pill-bg': opts[index]?.background || activeBg,
+            '--sd-pill-height': `${activePos.height}px`,
+            opacity: activePos?.height ? 1 : 0,
+            background,
+            boxShadow: `inset 0 0 0 ${borderWidth}px ${borderColor}`,
+            padding: `${containerPadPx}px ${
+              containerPadPx + activePos.height / 2 + 1
+            }px`,
+          }}
+        >
+          <Highlight
+            style={{
+              top: containerPad,
+              width: activePos.width,
+              transform: `translateX(${activePos.left}px)`,
+            }}
+          />
+          {opts.map(({ name, value }, i) => {
+            const checked = value === selected;
+            return (
+              <Label
+                key={i}
+                style={{
+                  paddingTop: textPadTop, // allows for numbers or css vals
+                  paddingBottom: textPadBottom,
+                  paddingLeft: 0, // good measure
+                  paddingRight: 0, // good measure
+                  color: checked ? activeTextColor : textColor,
+                  marginRight:
+                    opts.length - 1 === i ? 0 : activePos.height * 0.8 + 'px',
+                }}
+              >
+                <Input
+                  name={radioGroupName}
+                  type={'radio'}
+                  id={name}
+                  checked={checked}
+                  val={value}
+                  key={i}
+                  onChange={() => {
+                    if (onChange) onChange(value);
+                  }}
+                />
+                <ExtraPillHitZone style={{ left: -activePos.height / 2 }} />
+                <ExtraPillHitZone style={{ right: -activePos.height / 2 }} />
+                <span ref={refs.current[i]}>{name}</span>
+              </Label>
+            );
+          })}
+        </Container>
+      )}
+    </span>
+  );
+}
+
+function useElemResize(
+  ref
+) {
+  // Hook draws inspiration from: ZeeCoder/use-resize-observer
+  const [{ width, height }, setDim] = useState({
+    width: 1,
+    height: 1
+  });
+  useEffect(() => {
+    const el = ref?.current;
+    const ro = new ResizeObserver((entries) => {
+      if (!entries || !entries.length) return;
+      const {
+        contentRect: { width, height },
+      } = entries[0];
+      setDim({ width, height });
+    });
+    if (el) ro.observe(el);
+    return () => {
+      if (el) ro.unobserve(el);
+    };
+  }, [ref]);
+  return {width, height};
+}
+
+// Usage
+function App() {
+  const [selected, setSelected] = useState(opts[0].value);
+  return (
+    <Switch
+      // Required
+      opts={opts}
+      selected={selected}
+      onChange={(v) => setSelected(v)}
+      radioGroupName={'radio demo'}
+      // Optional
+      containerPad={'.25em'} // Any valid css value or a number (numbers will be in px)
+      background={'#fff'}
+      borderColor={'#ddd'}
+      borderWidth={2} // Number in px can be zero
+      activeBg={'#373e96'} // Default value if not specified in opts
+      activeTextColor={'#fff'}
+      textColor={'#333'}
+      textPadTop={'.3em'} // Any valid css value or a number (numbers will be in px)
+      textPadBottom={'.17em'} // Nice to have diff values for diff fonts
+      style={{
+        // For positioning and setting default font values
+        margin: 'auto',
+        ...fontStyling,
+      }}
+    />
+  );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/animated-pill-radiosreact-responsive/src/style.css b/animated-pill-radiosreact-responsive/src/style.css
new file mode 100644
index 0000000..622c397
--- /dev/null
+++ b/animated-pill-radiosreact-responsive/src/style.css
@@ -0,0 +1,19 @@
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+
+#root,
+body,
+html {
+  height: 100%;
+  width: 100%;
+}
+#root {
+  display: flex;
+  background: #efefef;
+}
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
diff --git a/animated-striped-gradient-button/LICENSE.txt b/animated-striped-gradient-button/LICENSE.txt
new file mode 100644
index 0000000..afa2544
--- /dev/null
+++ b/animated-striped-gradient-button/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Cassidy (https://codepen.io/cassidoo/pen/QWJwgox)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/animated-striped-gradient-button/README.md b/animated-striped-gradient-button/README.md
new file mode 100644
index 0000000..41c19be
--- /dev/null
+++ b/animated-striped-gradient-button/README.md
@@ -0,0 +1,5 @@
+# Animated striped gradient button
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cassidoo/pen/QWJwgox](https://codepen.io/cassidoo/pen/QWJwgox).
+
+Inspired by the SVG button on astro.party, but with pure CSS! Added pausing animation on click, and a hover state.
\ No newline at end of file
diff --git a/animated-striped-gradient-button/dist/index.html b/animated-striped-gradient-button/dist/index.html
new file mode 100644
index 0000000..b01fc22
--- /dev/null
+++ b/animated-striped-gradient-button/dist/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Animated striped gradient button</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<button>Subscribe & Save!</button>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/animated-striped-gradient-button/dist/style.css b/animated-striped-gradient-button/dist/style.css
new file mode 100644
index 0000000..a205d1b
--- /dev/null
+++ b/animated-striped-gradient-button/dist/style.css
@@ -0,0 +1,89 @@
+@import url("https://fonts.googleapis.com/css2?family=Calistoga&display=swap");
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  height: 0;
+  text-align: center;
+}
+
+button {
+  position: relative;
+  margin: 50px;
+  width: 400px;
+  height: 100px;
+  background: transparent;
+  border: 5px solid #000000;
+  border-radius: 60px;
+  color: #fff;
+  cursor: pointer;
+  font-family: "Calistoga", cursive;
+  font-size: 1.5em;
+  font-weight: bold;
+  overflow: hidden;
+}
+
+button::before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 400px;
+  height: 100px;
+  background-image: linear-gradient(45deg, #f04d4d 11.36%, #000000 11.36%, #000000 12.5%, #ffd903 12.5%, #ffd903 23.86%, #000000 23.86%, #000000 25%, #2dc40f 25%, #2dc40f 36.36%, #000000 36.36%, #000000 37.5%, #5ba1fc 37.5%, #5ba1fc 48.86%, #000000 48.86%, #000000 50%, #f04d4d 50%, #f04d4d 61.36%, #000000 61.36%, #000000 62.5%, #ffd903 62.5%, #ffd903 73.86%, #000000 73.86%, #000000 75%, #2dc40f 75%, #2dc40f 86.36%, #000000 86.36%, #000000 87.5%, #5ba1fc 87.5%, #5ba1fc 98.86%, #000000 98.86%, #000000 100%);
+  background-size: 200px 200px;
+  -webkit-animation: barberpole 10s linear infinite;
+          animation: barberpole 10s linear infinite;
+  z-index: -1;
+}
+
+button::after {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 250px;
+  height: 50px;
+  background: #000000;
+  border: 5px solid #000;
+  border-radius: 100px;
+  box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.75);
+  z-index: -1;
+}
+
+button:hover {
+  color: #000;
+}
+
+button:hover::after {
+  background: #fff;
+}
+
+button:active {
+  color: #fff;
+}
+
+button:active::before {
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+
+button:active::after {
+  background: #000;
+}
+
+@-webkit-keyframes barberpole {
+  100% {
+    background-position: 50% 50%;
+  }
+}
+
+@keyframes barberpole {
+  100% {
+    background-position: 50% 50%;
+  }
+}
\ No newline at end of file
diff --git a/animated-striped-gradient-button/src/index.html b/animated-striped-gradient-button/src/index.html
new file mode 100644
index 0000000..0d0325c
--- /dev/null
+++ b/animated-striped-gradient-button/src/index.html
@@ -0,0 +1 @@
+<button>Subscribe & Save!</button>
\ No newline at end of file
diff --git a/animated-striped-gradient-button/src/style.scss b/animated-striped-gradient-button/src/style.scss
new file mode 100644
index 0000000..9ca35aa
--- /dev/null
+++ b/animated-striped-gradient-button/src/style.scss
@@ -0,0 +1,116 @@
+@import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap');
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  height: 0;
+  text-align: center;
+}
+
+button {
+  position: relative;
+  margin: 50px;
+  width: 400px;
+  height: 100px;
+  background: transparent;
+  border: 5px solid #000000;
+  border-radius: 60px;
+  color: #fff;
+  cursor: pointer;
+  font-family: 'Calistoga', cursive;
+  font-size: 1.5em;
+  font-weight: bold;
+  overflow: hidden;
+}
+
+button::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 400px;
+  height: 100px;
+  background-image: linear-gradient(
+    45deg,
+    #f04d4d 11.36%,
+    #000000 11.36%,
+    #000000 12.5%,
+    #ffd903 12.5%,
+    #ffd903 23.86%,
+    #000000 23.86%,
+    #000000 25%,
+    #2dc40f 25%,
+    #2dc40f 36.36%,
+    #000000 36.36%,
+    #000000 37.5%,
+    #5ba1fc 37.5%,
+    #5ba1fc 48.86%,
+    #000000 48.86%,
+    #000000 50%,
+    #f04d4d 50%,
+    #f04d4d 61.36%,
+    #000000 61.36%,
+    #000000 62.5%,
+    #ffd903 62.5%,
+    #ffd903 73.86%,
+    #000000 73.86%,
+    #000000 75%,
+    #2dc40f 75%,
+    #2dc40f 86.36%,
+    #000000 86.36%,
+    #000000 87.5%,
+    #5ba1fc 87.5%,
+    #5ba1fc 98.86%,
+    #000000 98.86%,
+    #000000 100%
+  );
+  background-size: 200px 200px;
+  animation: barberpole 10s linear infinite;
+  z-index: -1;
+}
+
+button::after {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 250px;
+  height: 50px;  
+  background: #000000;
+  border: 5px solid #000;
+  border-radius: 100px;
+  box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
+  z-index: -1;
+}
+
+button:hover {
+  color: #000;
+}
+
+button:hover::after {
+  background: #fff;
+}
+
+button:active {
+  color: #fff;
+}
+
+button:active::before {
+  animation-play-state: paused;
+}
+
+button:active::after {
+  background: #000;
+}
+
+
+@keyframes barberpole {
+  100% {
+    background-position: 50% 50%;
+  }
+}
diff --git a/animated-verbs-ii/README.markdown b/animated-verbs-ii/README.markdown
new file mode 100644
index 0000000..1c04167
--- /dev/null
+++ b/animated-verbs-ii/README.markdown
@@ -0,0 +1,6 @@
+# Animated Verbs II
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/hexagoncircle/pen/OJLxWKq](https://codepen.io/hexagoncircle/pen/OJLxWKq).
+
+ A second take on animating characters in verbs to represent their action. Leave a comment if there's a word you'd like to see added and animated on this list.
+
+Part one: https://codepen.io/hexagoncircle/pen/MWgbqON
\ No newline at end of file
diff --git a/animated-verbs-ii/dist/index.html b/animated-verbs-ii/dist/index.html
new file mode 100644
index 0000000..ab2defc
--- /dev/null
+++ b/animated-verbs-ii/dist/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Animated Verbs II</title>
+  <link href="https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap" rel="stylesheet">
+<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://unpkg.com/splitting@1.0.0/dist/splitting.css'>
+<link rel='stylesheet' href='css/mwgbqon.css'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main class="container">
+  <h2 data-splitting class="headline headline--yell">yelling</h2>
+  <h2 data-splitting class="headline headline--ghost">ghosting</h2>
+  <h2 data-splitting class="headline headline--sail">sailing</h2>
+  <h2 data-splitting class="headline headline--shiver">shivering</h2>
+  <h2 data-splitting class="headline headline--fade">fading</h2>
+  <h2 data-splitting class="headline headline--rock">rocking</h2>
+</main>
+<!-- partial -->
+  <script src='https://unpkg.com/splitting/dist/splitting.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/animated-verbs-ii/dist/mwgbqon.css b/animated-verbs-ii/dist/mwgbqon.css
new file mode 100644
index 0000000..57b717c
--- /dev/null
+++ b/animated-verbs-ii/dist/mwgbqon.css
@@ -0,0 +1,227 @@
+$colors: #f9ca24, #3498db, #ff7979, #1abc9c, #e74c3c, #f8c291;
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+}
+
+.container {
+  max-height: 100vh;
+	overflow-y: scroll;
+  position: relative;
+  scroll-snap-type: y mandatory;
+  -webkit-overflow-scrolling: touch;
+}
+
+.headline {
+  align-items: center;
+  background-color: var(--color);
+  display: flex;
+  font-family: 'Lexend Deca', sans-serif;
+  font-weight: 700;
+  font-size: calc(1rem + 15vmin);
+  height: 100vh;
+  justify-content: center;
+  overflow: hidden;
+  perspective: 1000px;
+  scroll-snap-align: start;
+  width: 100vw;
+  
+  @for $i from 1 through length($colors) {
+    &:nth-child(#{$i}) {
+      --color: #{nth($colors, $i)};
+    }
+  }
+}
+
+.word,
+.char {
+  animation-delay: var(--del);
+  animation-direction: var(--dir, normal);
+  animation-duration: var(--dur);
+  animation-iteration-count: infinite;
+  animation-name: var(--name);
+  animation-timing-function: var(--tf);
+  display: inline-block;
+  position: relative;
+  transform-origin: 50% 100%;
+  z-index: 1;
+}
+
+
+// =========================
+// Headline animations
+// =========================
+
+.headline--fall {
+  .char {
+    --name: fall;
+    --dur: 600ms;
+    --del: calc(var(--char-index) * -0.05s);
+    --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
+  }
+
+  @keyframes fall {
+    0% {
+      transform: rotateY(-25deg);
+    }
+    25% {
+      transform: translateY(2%) rotateY(25deg);
+    }
+    50% {
+      transform: rotateY(-25deg);
+    }
+    75% {
+      transform: translateY(4%) rotateY(25deg);
+    }
+    100% {
+      transform: rotateY(-25deg);
+    }
+  }
+}
+
+.headline--flip {
+  .char {
+    --name: flip;
+    --dur: 4000ms;
+    --del: calc(var(--char-index) * 0.075s);
+    --tf: linear;
+  }
+
+  @keyframes flip {
+    5% {
+      transform: rotateX(1turn);
+    }
+    10% {
+      transform: rotateX(2turn);
+    }
+    20% {
+      transform: rotateX(3turn);
+    }
+    40% {
+      transform: rotateX(4turn);
+    }
+    70%, 100% {
+      transform: rotateX(5turn);
+    }
+  }
+}
+
+.headline--float {
+  .char {
+    --name: float;
+    --dur: 2200ms;
+    --del: calc(var(--char-index) * -0.5s);
+    --tf: ease-in-out; 
+    --dir: alternate;
+    
+    &:nth-child(2n) {
+      --name: float-alt;
+    }
+  }
+  
+  @keyframes float {
+    from {
+      transform: translate(2%, -10%) rotate(-1deg);
+    }
+    to {
+      transform: translate(-2%, 5%) rotate(3deg);
+    }
+  }
+
+  @keyframes float-alt {
+    from {
+      transform: translate(0%, -5%) rotate(-1deg);
+    }
+    to {
+      transform: translate(2%, 10%) rotate(3deg);
+    }
+  }
+}
+
+.headline--jog {
+  .char {
+    --name: jog;
+    --dur: 500ms;
+    --del: calc(var(--char-index) * -0.025s);
+    --tf: linear;
+  }
+
+  @keyframes jog {
+    0% {
+      transform: translate(0, 0) rotate(5deg);
+    }
+    25% {
+      transform: translate(5%, -5%) rotate(10deg);
+    }
+    50% {
+      transform: translate(5%, 0) rotate(15deg);
+    }
+    75% {
+      transform: translate(10%, -5%) rotate(10deg);
+    }
+    100% {
+      transform: translate(0, 0) rotate(5deg);
+    }
+  }
+}
+
+.headline--jump {
+  .char {
+    --name: jump;
+    --dur: 800ms;
+    --del: calc(var(--char-index) * 0.075s);
+    --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
+  }
+
+  @keyframes jump {
+    20% {
+      transform: translateY(2%) scaleY(0.9);
+    }
+    40% {
+      transform: translateY(-100%) scaleY(1.2);
+    }
+    50% {
+      transform: translateY(10%) scaleY(0.8);
+    }
+    70% {
+      transform: translateY(-5%) scaleY(1);
+    }
+    80%, 100% {
+      transform: translateY(0) scaleY(1);
+    }
+  }
+}
+
+.headline--twirl {
+  .char {
+    --name: twirl;
+    --dur: 6000ms;
+    --del: calc(var(--char-index) * 0.025s);
+    --tf: linear;
+  }
+
+  @keyframes twirl {
+    2.5% {
+      transform: rotateY(1turn);
+    }
+    5% {
+      transform: rotateY(2turn);
+    }
+    10% {
+      transform: rotateY(3turn);
+    }
+    20% {
+      transform: rotateY(4turn);
+    }
+    40% {
+      transform: rotateY(5turn);
+    }
+    70%, 100% {
+      transform: rotateY(6turn);
+    }
+  }
+}
\ No newline at end of file
diff --git a/animated-verbs-ii/dist/script.js b/animated-verbs-ii/dist/script.js
new file mode 100644
index 0000000..dc4e89e
--- /dev/null
+++ b/animated-verbs-ii/dist/script.js
@@ -0,0 +1 @@
+Splitting();
\ No newline at end of file
diff --git a/animated-verbs-ii/dist/style.css b/animated-verbs-ii/dist/style.css
new file mode 100644
index 0000000..5f4d716
--- /dev/null
+++ b/animated-verbs-ii/dist/style.css
@@ -0,0 +1,441 @@
+.headline:nth-child(1) {
+  --color: #e74c3c;
+}
+.headline:nth-child(2) {
+  --color: #f5f6fa;
+}
+.headline:nth-child(3) {
+  --color: #48dbfb;
+}
+.headline:nth-child(4) {
+  --color: #9980FA;
+}
+.headline:nth-child(5) {
+  --color: #F79F1F;
+}
+.headline:nth-child(6) {
+  --color: #f8c291;
+}
+
+.headline--fade .char {
+  --name: fade;
+  --dur: 2s;
+  --del: calc(var(--distance-percent) * 0.15s);
+  --td: ease-in-out;
+  -webkit-transform-origin: 0 100%;
+          transform-origin: 0 100%;
+}
+@-webkit-keyframes fade {
+  50% {
+    opacity: 0;
+  }
+}
+@keyframes fade {
+  50% {
+    opacity: 0;
+  }
+}
+.headline--ghost .char {
+  --name: rise;
+  --dur: 3s;
+  --del: calc(var(--distance-percent) * 0.125s);
+  --tf: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  -webkit-transform-origin: 50% 100%;
+          transform-origin: 50% 100%;
+}
+.headline--ghost .char:after {
+  -webkit-animation: ghost var(--dur) ease-in var(--del) infinite;
+          animation: ghost var(--dur) ease-in var(--del) infinite;
+  content: attr(data-char);
+  opacity: 0;
+  -webkit-transform-origin: 100% 50%;
+          transform-origin: 100% 50%;
+  visibility: visible;
+}
+@-webkit-keyframes rise {
+  40% {
+    -webkit-transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));
+            transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));
+  }
+  50% {
+    -webkit-transform: translateY(6%);
+            transform: translateY(6%);
+  }
+  55% {
+    -webkit-transform: translateY(-4%);
+            transform: translateY(-4%);
+  }
+  60% {
+    -webkit-transform: translateY(2%);
+            transform: translateY(2%);
+  }
+  65% {
+    -webkit-transform: translateY(-1%);
+            transform: translateY(-1%);
+  }
+  70% {
+    -webkit-transform: translateY(0%);
+            transform: translateY(0%);
+  }
+}
+@keyframes rise {
+  40% {
+    -webkit-transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));
+            transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));
+  }
+  50% {
+    -webkit-transform: translateY(6%);
+            transform: translateY(6%);
+  }
+  55% {
+    -webkit-transform: translateY(-4%);
+            transform: translateY(-4%);
+  }
+  60% {
+    -webkit-transform: translateY(2%);
+            transform: translateY(2%);
+  }
+  65% {
+    -webkit-transform: translateY(-1%);
+            transform: translateY(-1%);
+  }
+  70% {
+    -webkit-transform: translateY(0%);
+            transform: translateY(0%);
+  }
+}
+@-webkit-keyframes ghost {
+  8% {
+    opacity: 0;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+  40% {
+    opacity: 0.25;
+    -webkit-transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));
+            transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));
+  }
+  60%, 100% {
+    opacity: 0;
+    -webkit-transform: translateY(-200%);
+            transform: translateY(-200%);
+  }
+}
+@keyframes ghost {
+  8% {
+    opacity: 0;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+  40% {
+    opacity: 0.25;
+    -webkit-transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));
+            transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));
+  }
+  60%, 100% {
+    opacity: 0;
+    -webkit-transform: translateY(-200%);
+            transform: translateY(-200%);
+  }
+}
+.headline--rock .char {
+  --name: rock;
+  --dur: 2s;
+  --td: ease-in-out;
+  -webkit-transform-origin: 0 100%;
+          transform-origin: 0 100%;
+}
+@-webkit-keyframes rock {
+  0%, 100% {
+    -webkit-transform: rotate(-10deg);
+            transform: rotate(-10deg);
+  }
+  50% {
+    -webkit-transform: rotate(-18deg);
+            transform: rotate(-18deg);
+  }
+}
+@keyframes rock {
+  0%, 100% {
+    -webkit-transform: rotate(-10deg);
+            transform: rotate(-10deg);
+  }
+  50% {
+    -webkit-transform: rotate(-18deg);
+            transform: rotate(-18deg);
+  }
+}
+.headline--sail .word {
+  --dur: 5s;
+}
+.headline--sail .word:before, .headline--sail .word:after {
+  -webkit-animation: wave var(--dur) linear infinite;
+          animation: wave var(--dur) linear infinite;
+  background-image: radial-gradient(circle at 20px -30px, transparent 40px, var(--color) 41px);
+  background-repeat: repeat-x;
+  background-size: 40px 100%;
+  content: '';
+  height: 150%;
+  left: 0;
+  position: absolute;
+  top: 90%;
+  width: 200%;
+  z-index: 2;
+}
+.headline--sail .word:after {
+  -webkit-animation-duration: calc(var(--dur) * 1.4);
+          animation-duration: calc(var(--dur) * 1.4);
+  opacity: 0.8;
+  top: 70%;
+}
+.headline--sail .char {
+  --name: sail;
+  --del: calc(var(--char-index) * -0.15s);
+  --tf: linear;
+}
+@-webkit-keyframes sail {
+  25% {
+    -webkit-transform: rotate(-1deg) translateY(2%);
+            transform: rotate(-1deg) translateY(2%);
+  }
+  50% {
+    -webkit-transform: rotate(0) translateY(0);
+            transform: rotate(0) translateY(0);
+  }
+  75% {
+    -webkit-transform: rotate(1deg) translateY(1%);
+            transform: rotate(1deg) translateY(1%);
+  }
+}
+@keyframes sail {
+  25% {
+    -webkit-transform: rotate(-1deg) translateY(2%);
+            transform: rotate(-1deg) translateY(2%);
+  }
+  50% {
+    -webkit-transform: rotate(0) translateY(0);
+            transform: rotate(0) translateY(0);
+  }
+  75% {
+    -webkit-transform: rotate(1deg) translateY(1%);
+            transform: rotate(1deg) translateY(1%);
+  }
+}
+@-webkit-keyframes wave {
+  to {
+    -webkit-transform: translateX(-200px);
+            transform: translateX(-200px);
+  }
+}
+@keyframes wave {
+  to {
+    -webkit-transform: translateX(-200px);
+            transform: translateX(-200px);
+  }
+}
+.headline--shiver .word {
+  --name: shiver;
+  --dur: 3s;
+  --td: linear;
+}
+.headline--shiver .char {
+  --name: shiver-letter;
+  --del: calc(var(--char-index) * -0.0125s);
+  --dur: 140ms;
+  --td: linear;
+}
+@-webkit-keyframes shiver {
+  1% {
+    -webkit-transform: translateX(2%);
+            transform: translateX(2%);
+  }
+  2% {
+    -webkit-transform: translateX(-2%);
+            transform: translateX(-2%);
+  }
+  3% {
+    -webkit-transform: translateX(3%);
+            transform: translateX(3%);
+  }
+  4% {
+    -webkit-transform: translateX(-3%);
+            transform: translateX(-3%);
+  }
+  5% {
+    -webkit-transform: translateX(4%);
+            transform: translateX(4%);
+  }
+  6% {
+    -webkit-transform: translateX(-4%);
+            transform: translateX(-4%);
+  }
+  7% {
+    -webkit-transform: translateX(3%);
+            transform: translateX(3%);
+  }
+  8% {
+    -webkit-transform: translateX(-3%);
+            transform: translateX(-3%);
+  }
+  9% {
+    -webkit-transform: translateX(2%);
+            transform: translateX(2%);
+  }
+  10% {
+    -webkit-transform: translateX(-2%);
+            transform: translateX(-2%);
+  }
+  11% {
+    -webkit-transform: translateX(1%);
+            transform: translateX(1%);
+  }
+  12% {
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+}
+@keyframes shiver {
+  1% {
+    -webkit-transform: translateX(2%);
+            transform: translateX(2%);
+  }
+  2% {
+    -webkit-transform: translateX(-2%);
+            transform: translateX(-2%);
+  }
+  3% {
+    -webkit-transform: translateX(3%);
+            transform: translateX(3%);
+  }
+  4% {
+    -webkit-transform: translateX(-3%);
+            transform: translateX(-3%);
+  }
+  5% {
+    -webkit-transform: translateX(4%);
+            transform: translateX(4%);
+  }
+  6% {
+    -webkit-transform: translateX(-4%);
+            transform: translateX(-4%);
+  }
+  7% {
+    -webkit-transform: translateX(3%);
+            transform: translateX(3%);
+  }
+  8% {
+    -webkit-transform: translateX(-3%);
+            transform: translateX(-3%);
+  }
+  9% {
+    -webkit-transform: translateX(2%);
+            transform: translateX(2%);
+  }
+  10% {
+    -webkit-transform: translateX(-2%);
+            transform: translateX(-2%);
+  }
+  11% {
+    -webkit-transform: translateX(1%);
+            transform: translateX(1%);
+  }
+  12% {
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+}
+@-webkit-keyframes shiver-letter {
+  25% {
+    -webkit-transform: translateY(1%);
+            transform: translateY(1%);
+  }
+  50% {
+    -webkit-transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));
+            transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));
+  }
+  75% {
+    -webkit-transform: translateY(1%);
+            transform: translateY(1%);
+  }
+}
+@keyframes shiver-letter {
+  25% {
+    -webkit-transform: translateY(1%);
+            transform: translateY(1%);
+  }
+  50% {
+    -webkit-transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));
+            transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));
+  }
+  75% {
+    -webkit-transform: translateY(1%);
+            transform: translateY(1%);
+  }
+}
+.headline--yell .char {
+  --name: yell;
+  --dur: 3s;
+  --tf: ease;
+  -webkit-transform-origin: 50% 100%;
+          transform-origin: 50% 100%;
+}
+@-webkit-keyframes yell {
+  3% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
+            transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
+  }
+  6% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
+            transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
+  }
+  12% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
+            transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
+  }
+  18% {
+    -webkit-transform: scaleY(1) translateY(-2%);
+            transform: scaleY(1) translateY(-2%);
+  }
+  25% {
+    -webkit-transform: scaleY(0.98);
+            transform: scaleY(0.98);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+  75% {
+    -webkit-transform: scale(0.98);
+            transform: scale(0.98);
+  }
+}
+@keyframes yell {
+  3% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
+            transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
+  }
+  6% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
+            transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
+  }
+  12% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
+            transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
+  }
+  18% {
+    -webkit-transform: scaleY(1) translateY(-2%);
+            transform: scaleY(1) translateY(-2%);
+  }
+  25% {
+    -webkit-transform: scaleY(0.98);
+            transform: scaleY(0.98);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+  75% {
+    -webkit-transform: scale(0.98);
+            transform: scale(0.98);
+  }
+}
diff --git a/animated-verbs-ii/license.txt b/animated-verbs-ii/license.txt
new file mode 100644
index 0000000..0302e34
--- /dev/null
+++ b/animated-verbs-ii/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Ryan Mulligan (https://codepen.io/hexagoncircle/pen/OJLxWKq)
+
+
+Fork of an original work by Ryan Mulligan (https://codepen.io/hexagoncircle/pen/MWgbqON)
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/animated-verbs-ii/src/index.html b/animated-verbs-ii/src/index.html
new file mode 100644
index 0000000..ce5d786
--- /dev/null
+++ b/animated-verbs-ii/src/index.html
@@ -0,0 +1,8 @@
+<main class="container">
+  <h2 data-splitting class="headline headline--yell">yelling</h2>
+  <h2 data-splitting class="headline headline--ghost">ghosting</h2>
+  <h2 data-splitting class="headline headline--sail">sailing</h2>
+  <h2 data-splitting class="headline headline--shiver">shivering</h2>
+  <h2 data-splitting class="headline headline--fade">fading</h2>
+  <h2 data-splitting class="headline headline--rock">rocking</h2>
+</main>
\ No newline at end of file
diff --git a/animated-verbs-ii/src/mwgbqon.css b/animated-verbs-ii/src/mwgbqon.css
new file mode 100644
index 0000000..57b717c
--- /dev/null
+++ b/animated-verbs-ii/src/mwgbqon.css
@@ -0,0 +1,227 @@
+$colors: #f9ca24, #3498db, #ff7979, #1abc9c, #e74c3c, #f8c291;
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+}
+
+.container {
+  max-height: 100vh;
+	overflow-y: scroll;
+  position: relative;
+  scroll-snap-type: y mandatory;
+  -webkit-overflow-scrolling: touch;
+}
+
+.headline {
+  align-items: center;
+  background-color: var(--color);
+  display: flex;
+  font-family: 'Lexend Deca', sans-serif;
+  font-weight: 700;
+  font-size: calc(1rem + 15vmin);
+  height: 100vh;
+  justify-content: center;
+  overflow: hidden;
+  perspective: 1000px;
+  scroll-snap-align: start;
+  width: 100vw;
+  
+  @for $i from 1 through length($colors) {
+    &:nth-child(#{$i}) {
+      --color: #{nth($colors, $i)};
+    }
+  }
+}
+
+.word,
+.char {
+  animation-delay: var(--del);
+  animation-direction: var(--dir, normal);
+  animation-duration: var(--dur);
+  animation-iteration-count: infinite;
+  animation-name: var(--name);
+  animation-timing-function: var(--tf);
+  display: inline-block;
+  position: relative;
+  transform-origin: 50% 100%;
+  z-index: 1;
+}
+
+
+// =========================
+// Headline animations
+// =========================
+
+.headline--fall {
+  .char {
+    --name: fall;
+    --dur: 600ms;
+    --del: calc(var(--char-index) * -0.05s);
+    --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
+  }
+
+  @keyframes fall {
+    0% {
+      transform: rotateY(-25deg);
+    }
+    25% {
+      transform: translateY(2%) rotateY(25deg);
+    }
+    50% {
+      transform: rotateY(-25deg);
+    }
+    75% {
+      transform: translateY(4%) rotateY(25deg);
+    }
+    100% {
+      transform: rotateY(-25deg);
+    }
+  }
+}
+
+.headline--flip {
+  .char {
+    --name: flip;
+    --dur: 4000ms;
+    --del: calc(var(--char-index) * 0.075s);
+    --tf: linear;
+  }
+
+  @keyframes flip {
+    5% {
+      transform: rotateX(1turn);
+    }
+    10% {
+      transform: rotateX(2turn);
+    }
+    20% {
+      transform: rotateX(3turn);
+    }
+    40% {
+      transform: rotateX(4turn);
+    }
+    70%, 100% {
+      transform: rotateX(5turn);
+    }
+  }
+}
+
+.headline--float {
+  .char {
+    --name: float;
+    --dur: 2200ms;
+    --del: calc(var(--char-index) * -0.5s);
+    --tf: ease-in-out; 
+    --dir: alternate;
+    
+    &:nth-child(2n) {
+      --name: float-alt;
+    }
+  }
+  
+  @keyframes float {
+    from {
+      transform: translate(2%, -10%) rotate(-1deg);
+    }
+    to {
+      transform: translate(-2%, 5%) rotate(3deg);
+    }
+  }
+
+  @keyframes float-alt {
+    from {
+      transform: translate(0%, -5%) rotate(-1deg);
+    }
+    to {
+      transform: translate(2%, 10%) rotate(3deg);
+    }
+  }
+}
+
+.headline--jog {
+  .char {
+    --name: jog;
+    --dur: 500ms;
+    --del: calc(var(--char-index) * -0.025s);
+    --tf: linear;
+  }
+
+  @keyframes jog {
+    0% {
+      transform: translate(0, 0) rotate(5deg);
+    }
+    25% {
+      transform: translate(5%, -5%) rotate(10deg);
+    }
+    50% {
+      transform: translate(5%, 0) rotate(15deg);
+    }
+    75% {
+      transform: translate(10%, -5%) rotate(10deg);
+    }
+    100% {
+      transform: translate(0, 0) rotate(5deg);
+    }
+  }
+}
+
+.headline--jump {
+  .char {
+    --name: jump;
+    --dur: 800ms;
+    --del: calc(var(--char-index) * 0.075s);
+    --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
+  }
+
+  @keyframes jump {
+    20% {
+      transform: translateY(2%) scaleY(0.9);
+    }
+    40% {
+      transform: translateY(-100%) scaleY(1.2);
+    }
+    50% {
+      transform: translateY(10%) scaleY(0.8);
+    }
+    70% {
+      transform: translateY(-5%) scaleY(1);
+    }
+    80%, 100% {
+      transform: translateY(0) scaleY(1);
+    }
+  }
+}
+
+.headline--twirl {
+  .char {
+    --name: twirl;
+    --dur: 6000ms;
+    --del: calc(var(--char-index) * 0.025s);
+    --tf: linear;
+  }
+
+  @keyframes twirl {
+    2.5% {
+      transform: rotateY(1turn);
+    }
+    5% {
+      transform: rotateY(2turn);
+    }
+    10% {
+      transform: rotateY(3turn);
+    }
+    20% {
+      transform: rotateY(4turn);
+    }
+    40% {
+      transform: rotateY(5turn);
+    }
+    70%, 100% {
+      transform: rotateY(6turn);
+    }
+  }
+}
\ No newline at end of file
diff --git a/animated-verbs-ii/src/script.js b/animated-verbs-ii/src/script.js
new file mode 100644
index 0000000..dc4e89e
--- /dev/null
+++ b/animated-verbs-ii/src/script.js
@@ -0,0 +1 @@
+Splitting();
\ No newline at end of file
diff --git a/animated-verbs-ii/src/style.scss b/animated-verbs-ii/src/style.scss
new file mode 100644
index 0000000..8aa6646
--- /dev/null
+++ b/animated-verbs-ii/src/style.scss
@@ -0,0 +1,222 @@
+// ==================================================
+// Base styles imported from original Animated Verbs
+// https://codepen.io/hexagoncircle/pen/MWgbqON
+// ==================================================
+$colors: #e74c3c, #f5f6fa, #48dbfb, #9980FA, #F79F1F, #f8c291;
+
+.headline {
+  @for $i from 1 through length($colors) {
+    &:nth-child(#{$i}) {
+      --color: #{nth($colors, $i)};
+    }
+  }
+}
+
+// =========================
+// Headline animations
+// =========================
+
+.headline--fade {
+  .char {
+    --name: fade;
+    --dur: 2s;
+    --del: calc(var(--distance-percent) * 0.15s);
+    --td: ease-in-out;
+    
+    transform-origin: 0 100%;
+  }
+  
+  @keyframes fade {
+    50% { opacity: 0; }
+  }
+}
+
+.headline--ghost {
+  .char {
+    --name: rise;
+    --dur: 3s;
+    --del: calc(var(--distance-percent) * 0.125s);
+    --tf: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    
+    transform-origin: 50% 100%;
+    
+    &:after {
+      animation: ghost var(--dur) ease-in var(--del) infinite;
+      content: attr(data-char);
+      opacity: 0;
+      transform-origin: 100% 50%;
+      visibility: visible;
+    }
+  }
+  
+  @keyframes rise {
+    40% {
+      transform: 
+        translateY(-40%)
+        rotate(calc(var(--distance-sine) * 10deg)
+      );
+    }
+    50% { transform: translateY( 6%); }
+    55% { transform: translateY(-4%); }
+    60% { transform: translateY( 2%); }
+    65% { transform: translateY(-1%); }
+    70% { transform: translateY( 0%); }
+  }
+  
+  @keyframes ghost {
+    8% {
+      opacity: 0;
+      transform: translateY(0); 
+    }
+    40% {
+      opacity: 0.25;
+      transform: 
+        translateY(-30%)
+        rotate(calc(var(--distance-sine) * -10deg)
+      ); 
+    }
+    60%, 100% {
+      opacity: 0;
+      transform: translateY(-200%);
+    }
+  }
+}
+
+.headline--rock {
+  .char {
+    --name: rock;
+    --dur: 2s;
+    --td: ease-in-out;
+    
+    transform-origin: 0 100%;
+  }
+  
+  @keyframes rock {
+    0%, 100% { transform: rotate(-10deg); }
+    50% { transform: rotate(-18deg); }
+  }
+}
+
+.headline--sail {
+  .word {
+    --dur: 5s;
+    
+    &:before,
+    &:after {
+      animation: wave var(--dur) linear infinite;
+      background-image: 
+        radial-gradient(
+          circle at 20px -30px,
+          transparent 40px,
+          var(--color) 41px
+        );
+      background-repeat: repeat-x;
+      background-size: 40px 100%;
+      content: '';
+      height: 150%;
+      left: 0;
+      position: absolute;
+      top: 90%;
+      width: 200%;
+      z-index: 2;
+    }  
+    
+    &:after {
+      animation-duration: calc(var(--dur) * 1.4);
+      opacity: 0.8;
+      top: 70%;
+    }
+  }
+  
+  .char {
+    --name: sail;
+    --del: calc(var(--char-index) * -0.15s);
+    --tf: linear;
+  }
+  
+  @keyframes sail {
+    25% { transform: rotate(-1deg) translateY(2%); }
+    50% { transform: rotate(0) translateY(0); }
+    75% { transform: rotate(1deg) translateY(1%); }
+  }
+  
+  @keyframes wave {
+    to { transform: translateX(-200px); }
+  }
+}
+
+.headline--shiver {
+  .word {
+    --name: shiver;
+    --dur: 3s;
+    --td: linear;
+  }
+  
+  .char {
+    --name: shiver-letter;
+    --del: calc(var(--char-index) * -0.0125s);
+    --dur: 140ms;
+    --td: linear;
+  }
+  
+  @keyframes shiver {
+     1% { transform: translateX( 2%); }
+     2% { transform: translateX(-2%); }
+     3% { transform: translateX( 3%); }
+     4% { transform: translateX(-3%); }
+     5% { transform: translateX( 4%); }
+     6% { transform: translateX(-4%); }
+     7% { transform: translateX( 3%); }
+     8% { transform: translateX(-3%); }
+     9% { transform: translateX( 2%); }
+    10% { transform: translateX(-2%); }
+    11% { transform: translateX( 1%); }
+    12% { transform: translateX( 0%); }
+  }
+
+  @keyframes shiver-letter {
+    25% { transform: translateY( 1%); }
+    50% {
+      transform: translate(
+        calc(var(--distance-percent) * 1%),
+        calc(var(--distance-percent) * 1%)
+      );
+    }
+    75% { transform: translateY( 1%); }
+  }
+}
+
+.headline--yell {
+  .char {
+    --name: yell;
+    --dur: 3s;
+    --tf: ease;
+    
+    transform-origin: 50% 100%;
+  }
+  
+  @keyframes yell {
+    3% {
+      transform:
+        scale(calc(1 * var(--distance-percent) + 1.5)) 
+        rotate(calc(15deg * var(--distance-sine)))
+        translateY(-10%);
+    }
+    6% {
+      transform:
+        scale(calc(1 * var(--distance-percent) + 1.2)) 
+        rotate(calc(15deg * var(--distance-sine)))
+        translateY(-10%);
+    }
+    12% {
+      transform:
+        scale(calc(1 * var(--distance-percent) + 1.5)) 
+        rotate(calc(15deg * var(--distance-sine)))
+        translateY(-10%);
+    }
+    18% { transform: scaleY(1) translateY(-2%); }
+    25% { transform: scaleY(0.98); }
+    50% { transform: scaleY(1); }
+    75% { transform: scale(0.98); }
+  }
+}
\ No newline at end of file
diff --git a/anime-js-scrollmagic-scroll-based-animations/LICENSE.txt b/anime-js-scrollmagic-scroll-based-animations/LICENSE.txt
new file mode 100644
index 0000000..0226aa1
--- /dev/null
+++ b/anime-js-scrollmagic-scroll-based-animations/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 by Rex Bullington (https://codepen.io/rexjbull/pen/RwRRezq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/anime-js-scrollmagic-scroll-based-animations/README.md b/anime-js-scrollmagic-scroll-based-animations/README.md
new file mode 100644
index 0000000..b7b53a7
--- /dev/null
+++ b/anime-js-scrollmagic-scroll-based-animations/README.md
@@ -0,0 +1,5 @@
+# Anime.js + ScrollMagic Scroll Based Animations
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/rexjbull/pen/RwRRezq](https://codepen.io/rexjbull/pen/RwRRezq).
+
+A example of using ScrollMagic to trigger Anime.js animations. Some of the animations are set to play when triggered and some are set to progress as the user scrolls the page.
\ No newline at end of file
diff --git a/anime-js-scrollmagic-scroll-based-animations/dist/index.html b/anime-js-scrollmagic-scroll-based-animations/dist/index.html
new file mode 100644
index 0000000..2d0a206
--- /dev/null
+++ b/anime-js-scrollmagic-scroll-based-animations/dist/index.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Anime.js + ScrollMagic Scroll Based Animations</title>
+  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
+      <a class="navbar-brand" href="#">START</a>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-toggle="collapse"
+        data-target="#navbarsExampleDefault"
+        aria-controls="navbarsExampleDefault"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="#one">Section 1</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#two">Section 2</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#three">Section 3</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#four">Section 4</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+    <main role="main" class="container-fluid">
+      <div class="row no-gutters">
+        <div class="col text-center">
+          <h1 class="py-5">SCROLL DOWN TO TRY ANIMATIONS</h1>
+          <img
+            src="https://drive.google.com/uc?export=view&id=1g2iw0lEBMYFyKjI9A1jN2wm0glHiXubt"
+            class="img-fluid"
+            alt="Responsive image"
+          />
+        </div>
+      </div>
+      <section id="intro" class="section">
+        <div class="row no-gutters">
+          <div class="col">
+            <div>
+              The Neuron scales the steepest climbs and descends with complete
+              control thanks to its 130 - 140mm suspension, 29” wheels (in sizes
+              M-XL) and confidence-inspiring geometry.
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="one" class="section">
+        <div class="row no-gutters">
+          <div class="col">
+            <div class="rectangle"></div>
+            <div class="elem">
+              <div class="text-block">
+                <h2 class="mb-0">2021</h2>
+                <h5>Neuron CF SLX 9</h5>
+              </div>
+              <div class="blocks">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="two" class="section">
+        <div class="row no-gutters">
+          <div class="col">
+            <div class="elem">
+              <div>
+                <img
+                  src="https://drive.google.com/uc?export=view&id=1wx3G8XcML7t9hTiE1ioUkLUiqUHkI_AJ"
+                  class="img-fluid"
+                  alt="Responsive image"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="three" class="section">
+        <div class="image"></div>
+        <div class="row no-gutters">
+          <div class="col">
+            <div class="elem">
+              <h2>GET OUT THERE</h2>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="four" class="section">
+        <div class="image"></div>
+        <div class="row no-gutters">
+          <div class="col">
+            <div class="elem">
+              <h2>GO RIDE</h2>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+<!-- partial -->
+  <script src='https://code.jquery.com/jquery-3.5.1.slim.min.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/anime-js-scrollmagic-scroll-based-animations/dist/script.js b/anime-js-scrollmagic-scroll-based-animations/dist/script.js
new file mode 100644
index 0000000..c53a54e
--- /dev/null
+++ b/anime-js-scrollmagic-scroll-based-animations/dist/script.js
@@ -0,0 +1,317 @@
+// Add active class to current nav selected link
+var a = document.querySelectorAll(".navbar li a");
+for (var i = 0, length = a.length; i < length; i++) {
+  a[i].onclick = function() {
+    var b = document.querySelector(".navbar li.active");
+    if (b) b.classList.remove("active");
+    this.parentNode.classList.add('active');
+  };
+}
+
+// Color palette variables
+let dark = '#252525';
+let mid = '#888';
+let light = 'rgba(255, 255, 255, 0.4)';
+
+// Add scrollmagic controller
+let controller = new ScrollMagic.Controller();
+
+//------------------
+//TIMELINE 1
+//------------------
+
+// Add timeline
+let tl1 = anime.timeline({autoplay: false});
+
+// Add animations
+let s1a1 = {
+  targets: '#one .elem',
+  opacity: 1,
+  translateX: {
+    value: [250, 0],
+    duration: 800
+  },
+  rotate: {
+    value: [90, 0],
+    duration: 1200,
+    easing: 'easeInOutSine'
+  },
+  scale: {
+    value: [2, 1.5],
+    duration: 1100,
+    delay: 800,
+    easing: 'easeInOutQuart'
+  },
+  color: [light, dark],
+  duration: 800,
+  delay: 0,
+  easing: 'easeInOutSine'
+};
+
+let s1a2 = {
+  targets: '#one .elem .blocks > div',
+  backgroundColor: [light, dark],
+  borderRadius: function(el) { return anime.random(2, 10); },
+  delay: function(el) { return anime.random(0, 800); }
+};
+
+let s1a3 = {
+  targets: '#one .rectangle',
+  opacity: [0,1],
+  translateX: {
+    value: ['-100vw', '0vw'],
+    duration: 1500,
+  },
+  translateY: {
+    value: [-100, 0],
+    duration: 1500,
+  },
+  easing: 'easeInOutSine',
+  duration: 2000
+};
+
+// Add children
+tl1.add(s1a3).add(s1a1, '-=1600').add(s1a2, '-=1300');
+
+// Get section height
+let oneHeight = document.getElementById("one").clientHeight;
+console.log('oneHeight: ' + oneHeight);
+
+//------------------
+//SCENE 1
+//------------------
+
+//Add first scrollmagic scene
+let scene1 = new ScrollMagic.Scene({
+  triggerElement: "#one",
+  triggerHook: 0.5,
+  reverse: false
+})
+
+// Add debug indicators
+.addIndicators({
+  colorTrigger: "black",
+  colorStart: "blue",
+  colorEnd: "red",
+  indent: 10
+})
+
+// Trigger animation timeline
+.on("enter", function (event) {
+  tl1.play();
+})
+  
+.addTo(controller);
+
+
+
+//------------------
+//TIMELINE 2
+//------------------
+
+// Add timeline
+let tl2 = anime.timeline({autoplay: false});
+
+// Add animations
+let s2a1 = {
+  targets: '#two .elem img',
+  opacity: [0.3,1],
+  scale: [4,1],
+  duration: 1000,
+  delay: 0,
+  easing: 'easeInOutSine'
+};
+
+let s2a2 = {
+  targets: '#two .elem img',
+  scale: 1,
+  duration: 2000,
+};
+
+// Add children
+tl2.add(s2a1).add(s2a2);
+
+// Get section height
+let twoHeight = document.getElementById("two").clientHeight;
+console.log('twoHeight: ' + twoHeight);
+
+//------------------
+//SCENE 2
+//------------------
+
+//Add second scrollmagic scene
+let scene2 = new ScrollMagic.Scene({
+  triggerElement: "#two",
+  duration: 4500,
+  triggerHook: 0,
+})
+
+// Add debug indicators
+.addIndicators({
+  colorTrigger: "black",
+  colorStart: "blue",
+  colorEnd: "red",
+  indent: 10
+})
+
+// Trigger animation timeline
+//Use scroll position to play animation
+.on("progress", function (event) {
+  tl2.seek(tl2.duration * event.progress);
+})
+
+.setPin('#two')
+.addTo(controller);
+
+
+
+//------------------
+//TIMELINE 3
+//------------------
+
+// Add timeline
+let tl3 = anime.timeline({autoplay: false});
+
+// Add animations
+let s3a1 = {
+  targets: '#three h2',
+  opacity: 1,
+  scale: [4,1.5],
+  duration: 1000,
+  delay: 0,
+  easing: 'easeInOutSine'
+};
+
+// Add children
+tl3.add(s3a1);
+
+//------------------
+//TIMELINE 4
+//------------------
+
+// Add timeline
+let tl4 = anime.timeline({autoplay: false});
+
+// Add animations
+let s3a2 = {
+  targets: '#three .image',
+  opacity: [0,.5],
+  translateX: {
+    value: ['-100%', '0%'],
+    duration: 1500,
+  },
+  duration: 1000,
+  delay: 0,
+  easing: 'easeInOutSine'
+};
+
+// Add children
+tl4.add(s3a2);
+
+//------------------
+//SCENE 3
+//------------------
+
+//Add third scrollmagic scene
+let scene3 = new ScrollMagic.Scene({
+  triggerElement: "#three",
+  duration: 2000,
+  triggerHook: 0
+})
+
+// Add debug indicators
+.addIndicators({
+  colorTrigger: "black",
+  colorStart: "blue",
+  colorEnd: "red",
+  indent: 10
+})
+
+// Trigger animation timeline
+//Use scroll position to play animation
+.on("enter", function (event) {
+  tl3.play();
+})
+.on("progress", function (event) {
+  tl4.seek((tl4.duration * event.progress) * 3);
+})
+
+.setPin('#three')
+.addTo(controller);
+
+
+
+
+//------------------
+//TIMELINE 5
+//------------------
+
+// Add timeline
+let tl5 = anime.timeline({autoplay: false});
+
+// Add animations
+let s4a1 = {
+  targets: '#four h2',
+  opacity: 1,
+  scale: [1.5,3],
+  duration: 1000,
+  delay: 0,
+  easing: 'easeInOutSine'
+};
+
+// Add children
+tl5.add(s4a1);
+
+//------------------
+//TIMELINE 6
+//------------------
+
+// Add timeline
+let tl6 = anime.timeline({autoplay: false});
+
+// Add animations
+let s4a2 = {
+  targets: '#four .image',
+  opacity: [0,.5],
+  translateX: {
+    value: ['100%', '0%'],
+    duration: 1500,
+  },
+  duration: 1000,
+  delay: 0,
+  easing: 'easeInOutSine'
+};
+
+// Add children
+tl6.add(s4a2);
+
+//------------------
+//SCENE 4
+//------------------
+
+//Add third scrollmagic scene
+let scene4 = new ScrollMagic.Scene({
+  triggerElement: "#four",
+  duration: 2000,
+  triggerHook: 0
+})
+
+// Add debug indicators
+.addIndicators({
+  colorTrigger: "black",
+  colorStart: "blue",
+  colorEnd: "red",
+  indent: 10
+})
+
+// Trigger animation timeline
+//Use scroll position to play animation
+.on("enter", function (event) {
+  tl5.play();
+})
+.on("progress", function (event) {
+  tl6.seek((tl6.duration * event.progress) * 3);
+})
+
+.setPin('#four')
+.addTo(controller);
\ No newline at end of file
diff --git a/anime-js-scrollmagic-scroll-based-animations/dist/style.css b/anime-js-scrollmagic-scroll-based-animations/dist/style.css
new file mode 100644
index 0000000..bbe73ef
--- /dev/null
+++ b/anime-js-scrollmagic-scroll-based-animations/dist/style.css
@@ -0,0 +1,137 @@
+body {
+  padding-top: 56px;
+  font-weight: 300;
+  letter-spacing: 0.03em;
+  background-color: #f7f7f7;
+}
+
+nav.navbar {
+  border-bottom: solid 1px #d6d6d6;
+}
+
+.navbar .navbar-brand {
+  font-weight: 500;
+  letter-spacing: .065em;
+}
+
+
+.navbar-nav .nav-link {
+    letter-spacing: .035em;
+}
+
+.navbar li.active a {
+  font-weight: 400;
+}
+
+main.container-fluid {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.spacer {
+  height: 40vh;
+}
+
+.rectangle {
+  position: absolute;
+  width: 97vw;
+  height: 30vw;
+  border-radius: 10px;
+  background: linear-gradient(45deg, #69b7bf 25%, #ffe664);
+}
+
+@media (min-width: 500px) {
+  .rectangle {
+    width: 80%;
+  }
+}
+
+.section > .row > .col {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+#intro .col {
+  height: 50vh;
+  padding: 9vw 6vw;
+  font-size: 18px;
+}
+
+@media (min-width: 1000px) {
+  #intro .col {
+    padding: 18vw 12vw;
+    font-size: 2.7vw;
+  }
+}
+
+#one {
+  background-color: #212121;
+}
+
+#one .elem {
+  opacity: 0;
+  letter-spacing: 0.04em;
+}
+
+#one .text-block h2 {
+  font-size: 5vw;
+  letter-spacing: 0.2em;
+  font-weight: 300;
+  line-height: 1;
+}
+
+#one .text-block h5 {
+  font-size: 4vw;
+  line-height: 1;
+}
+
+#one .elem .blocks {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  align-items: center;
+}
+
+#one .elem .blocks > div {
+  height: 20px;
+  width: 20px;
+  margin: 2px;
+  border-radius: 2px;
+  background-color: #333;
+}
+
+#two {
+  height: auto;
+  overflow: hidden;
+  padding: 3vw 15vw 10vw;
+  background: linear-gradient(0deg, #69b7bf 25%, #ffe664);
+}
+
+#three, #four {
+  position: relative;
+  overflow: hidden;
+}
+
+#three .image, #four .image {
+  position: absolute;
+  top: 0;
+  bottom:0;
+  width: 100%;
+}
+
+#three .image {
+  background-image: url("https://drive.google.com/uc?export=view&id=10tzeBrvoR5OO3EK_Wcg-gRxbVO7xv6em");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+#four .image {
+  background-image: url("https://drive.google.com/uc?export=view&id=1SzCTDu5_eAF569lFHtNyIlUCrdW2mOXu");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
\ No newline at end of file
diff --git a/anime-js-scrollmagic-scroll-based-animations/src/index.html b/anime-js-scrollmagic-scroll-based-animations/src/index.html
new file mode 100644
index 0000000..bff87e2
--- /dev/null
+++ b/anime-js-scrollmagic-scroll-based-animations/src/index.html
@@ -0,0 +1,110 @@
+<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
+      <a class="navbar-brand" href="#">START</a>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-toggle="collapse"
+        data-target="#navbarsExampleDefault"
+        aria-controls="navbarsExampleDefault"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="#one">Section 1</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#two">Section 2</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#three">Section 3</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#four">Section 4</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+    <main role="main" class="container-fluid">
+      <div class="row no-gutters">
+        <div class="col text-center">
+          <h1 class="py-5">SCROLL DOWN TO TRY ANIMATIONS</h1>
+          <img
+            src="https://drive.google.com/uc?export=view&id=1g2iw0lEBMYFyKjI9A1jN2wm0glHiXubt"
+            class="img-fluid"
+            alt="Responsive image"
+          />
+        </div>
+      </div>
+      <section id="intro" class="section">
+        <div class="row no-gutters">
+          <div class="col">
+            <div>
+              The Neuron scales the steepest climbs and descends with complete
+              control thanks to its 130 - 140mm suspension, 29” wheels (in sizes
+              M-XL) and confidence-inspiring geometry.
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="one" class="section">
+        <div class="row no-gutters">
+          <div class="col">
+            <div class="rectangle"></div>
+            <div class="elem">
+              <div class="text-block">
+                <h2 class="mb-0">2021</h2>
+                <h5>Neuron CF SLX 9</h5>
+              </div>
+              <div class="blocks">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="two" class="section">
+        <div class="row no-gutters">
+          <div class="col">
+            <div class="elem">
+              <div>
+                <img
+                  src="https://drive.google.com/uc?export=view&id=1wx3G8XcML7t9hTiE1ioUkLUiqUHkI_AJ"
+                  class="img-fluid"
+                  alt="Responsive image"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="three" class="section">
+        <div class="image"></div>
+        <div class="row no-gutters">
+          <div class="col">
+            <div class="elem">
+              <h2>GET OUT THERE</h2>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="four" class="section">
+        <div class="image"></div>
+        <div class="row no-gutters">
+          <div class="col">
+            <div class="elem">
+              <h2>GO RIDE</h2>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
\ No newline at end of file
diff --git a/anime-js-scrollmagic-scroll-based-animations/src/script.js b/anime-js-scrollmagic-scroll-based-animations/src/script.js
new file mode 100644
index 0000000..b3c8509
--- /dev/null
+++ b/anime-js-scrollmagic-scroll-based-animations/src/script.js
@@ -0,0 +1,319 @@
+// Add active class to current nav selected link
+var a = document.querySelectorAll(".navbar li a");
+for (var i = 0, length = a.length; i < length; i++) {
+  a[i].onclick = function() {
+    var b = document.querySelector(".navbar li.active");
+    if (b) b.classList.remove("active");
+    this.parentNode.classList.add('active');
+  };
+}
+
+// Color palette variables
+let dark = '#252525';
+let mid = '#888';
+let light = 'rgba(255, 255, 255, 0.4)';
+
+// Add scrollmagic controller
+let controller = new ScrollMagic.Controller();
+
+//------------------
+//TIMELINE 1
+//------------------
+
+// Add timeline
+let tl1 = anime.timeline({autoplay: false});
+
+// Add animations
+let s1a1 = {
+  targets: '#one .elem',
+  opacity: 1,
+  translateX: {
+    value: [250, 0],
+    duration: 800
+  },
+  rotate: {
+    value: [90, 0],
+    duration: 1200,
+    easing: 'easeInOutSine'
+  },
+  scale: {
+    value: [2, 1.5],
+    duration: 1100,
+    delay: 800,
+    easing: 'easeInOutQuart'
+  },
+  color: [light, dark],
+  duration: 800,
+  delay: 0,
+  easing: 'easeInOutSine'
+};
+
+let s1a2 = {
+  targets: '#one .elem .blocks > div',
+  backgroundColor: [light, dark],
+  borderRadius: function(el) { return anime.random(2, 10); },
+  delay: function(el) { return anime.random(0, 800); }
+};
+
+let s1a3 = {
+  targets: '#one .rectangle',
+  opacity: [0,1],
+  translateX: {
+    value: ['-100vw', '0vw'],
+    duration: 1500,
+  },
+  translateY: {
+    value: [-100, 0],
+    duration: 1500,
+  },
+  easing: 'easeInOutSine',
+  duration: 2000
+};
+
+// Add children
+tl1.add(s1a3).add(s1a1, '-=1600').add(s1a2, '-=1300');
+
+// Get section height
+let oneHeight = document.getElementById("one").clientHeight;
+console.log('oneHeight: ' + oneHeight);
+
+//------------------
+//SCENE 1
+//------------------
+
+//Add first scrollmagic scene
+let scene1 = new ScrollMagic.Scene({
+  triggerElement: "#one",
+  triggerHook: 0.5,
+  reverse: false
+})
+
+// Add debug indicators
+.addIndicators({
+  colorTrigger: "black",
+  colorStart: "blue",
+  colorEnd: "red",
+  indent: 10
+})
+
+// Trigger animation timeline
+.on("enter", function (event) {
+  tl1.play();
+})
+  
+.addTo(controller);
+
+
+
+//------------------
+//TIMELINE 2
+//------------------
+
+// Add timeline
+let tl2 = anime.timeline({autoplay: false});
+
+// Add animations
+let s2a1 = {
+  targets: '#two .elem img',
+  opacity: [0.3,1],
+  scale: [4,1],
+  duration: 1000,
+  delay: 0,
+  easing: 'easeInOutSine'
+};
+
+let s2a2 = {
+  targets: '#two .elem img',
+  scale: 1,
+  duration: 2000,
+};
+
+// Add children
+tl2.add(s2a1).add(s2a2);
+
+// Get section height
+let twoHeight = document.getElementById("two").clientHeight;
+console.log('twoHeight: ' + twoHeight);
+
+//------------------
+//SCENE 2
+//------------------
+
+//Add second scrollmagic scene
+let scene2 = new ScrollMagic.Scene({
+  triggerElement: "#two",
+  duration: 4500,
+  triggerHook: 0,
+})
+
+// Add debug indicators
+.addIndicators({
+  colorTrigger: "black",
+  colorStart: "blue",
+  colorEnd: "red",
+  indent: 10
+})
+
+// Trigger animation timeline
+//Use scroll position to play animation
+.on("progress", function (event) {
+  tl2.seek(tl2.duration * event.progress);
+})
+
+.setPin('#two')
+.addTo(controller);
+
+
+
+//------------------
+//TIMELINE 3
+//------------------
+
+// Add timeline
+let tl3 = anime.timeline({autoplay: false});
+
+// Add animations
+let s3a1 = {
+  targets: '#three h2',
+  opacity: 1,
+  scale: [4,1.5],
+  duration: 1000,
+  delay: 0,
+  easing: 'easeInOutSine'
+};
+
+// Add children
+tl3.add(s3a1);
+
+//------------------
+//TIMELINE 4
+//------------------
+
+// Add timeline
+let tl4 = anime.timeline({autoplay: false});
+
+// Add animations
+let s3a2 = {
+  targets: '#three .image',
+  opacity: [0,.5],
+  translateX: {
+    value: ['-100%', '0%'],
+    duration: 1500,
+  },
+  duration: 1000,
+  delay: 0,
+  easing: 'easeInOutSine'
+};
+
+// Add children
+tl4.add(s3a2);
+
+//------------------
+//SCENE 3
+//------------------
+
+//Add third scrollmagic scene
+let scene3 = new ScrollMagic.Scene({
+  triggerElement: "#three",
+  duration: 2000,
+  triggerHook: 0
+})
+
+// Add debug indicators
+.addIndicators({
+  colorTrigger: "black",
+  colorStart: "blue",
+  colorEnd: "red",
+  indent: 10
+})
+
+// Trigger animation timeline
+//Use scroll position to play animation
+.on("enter", function (event) {
+  tl3.play();
+})
+.on("progress", function (event) {
+  tl4.seek((tl4.duration * event.progress) * 3);
+})
+
+.setPin('#three')
+.addTo(controller);
+
+
+
+
+//------------------
+//TIMELINE 5
+//------------------
+
+// Add timeline
+let tl5 = anime.timeline({autoplay: false});
+
+// Add animations
+let s4a1 = {
+  targets: '#four h2',
+  opacity: 1,
+  scale: [1.5,3],
+  duration: 1000,
+  delay: 0,
+  easing: 'easeInOutSine'
+};
+
+// Add children
+tl5.add(s4a1);
+
+//------------------
+//TIMELINE 6
+//------------------
+
+// Add timeline
+let tl6 = anime.timeline({autoplay: false});
+
+// Add animations
+let s4a2 = {
+  targets: '#four .image',
+  opacity: [0,.5],
+  translateX: {
+    value: ['100%', '0%'],
+    duration: 1500,
+  },
+  duration: 1000,
+  delay: 0,
+  easing: 'easeInOutSine'
+};
+
+// Add children
+tl6.add(s4a2);
+
+//------------------
+//SCENE 4
+//------------------
+
+//Add third scrollmagic scene
+let scene4 = new ScrollMagic.Scene({
+  triggerElement: "#four",
+  duration: 2000,
+  triggerHook: 0
+})
+
+// Add debug indicators
+.addIndicators({
+  colorTrigger: "black",
+  colorStart: "blue",
+  colorEnd: "red",
+  indent: 10
+})
+
+// Trigger animation timeline
+//Use scroll position to play animation
+.on("enter", function (event) {
+  tl5.play();
+})
+.on("progress", function (event) {
+  tl6.seek((tl6.duration * event.progress) * 3);
+})
+
+.setPin('#four')
+.addTo(controller);
+
+
diff --git a/anime-js-scrollmagic-scroll-based-animations/src/style.css b/anime-js-scrollmagic-scroll-based-animations/src/style.css
new file mode 100644
index 0000000..2a85ea5
--- /dev/null
+++ b/anime-js-scrollmagic-scroll-based-animations/src/style.css
@@ -0,0 +1,137 @@
+body {
+  padding-top: 56px;
+  font-weight: 300;
+  letter-spacing: 0.03em;
+  background-color: #f7f7f7;
+}
+
+nav.navbar {
+  border-bottom: solid 1px #d6d6d6;
+}
+
+.navbar .navbar-brand {
+  font-weight: 500;
+  letter-spacing: .065em;
+}
+
+
+.navbar-nav .nav-link {
+    letter-spacing: .035em;
+}
+
+.navbar li.active a {
+  font-weight: 400;
+}
+
+main.container-fluid {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.spacer {
+  height: 40vh;
+}
+
+.rectangle {
+  position: absolute;
+  width: 97vw;
+  height: 30vw;
+  border-radius: 10px;
+  background: linear-gradient(45deg, #69b7bf 25%, #ffe664);
+}
+
+@media (min-width: 500px) {
+  .rectangle {
+    width: 80%;
+  }
+}
+
+.section > .row > .col {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+#intro .col {
+  height: 50vh;
+  padding: 9vw 6vw;
+  font-size: 18px;
+}
+
+@media (min-width: 1000px) {
+  #intro .col {
+    padding: 18vw 12vw;
+    font-size: 2.7vw;
+  }
+}
+
+#one {
+  background-color: #212121;
+}
+
+#one .elem {
+  opacity: 0;
+  letter-spacing: 0.04em;
+}
+
+#one .text-block h2 {
+  font-size: 5vw;
+  letter-spacing: 0.2em;
+  font-weight: 300;
+  line-height: 1;
+}
+
+#one .text-block h5 {
+  font-size: 4vw;
+  line-height: 1;
+}
+
+#one .elem .blocks {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  align-items: center;
+}
+
+#one .elem .blocks > div {
+  height: 20px;
+  width: 20px;
+  margin: 2px;
+  border-radius: 2px;
+  background-color: #333;
+}
+
+#two {
+  height: auto;
+  overflow: hidden;
+  padding: 3vw 15vw 10vw;
+  background: linear-gradient(0deg, #69b7bf 25%, #ffe664);
+}
+
+#three, #four {
+  position: relative;
+  overflow: hidden;
+}
+
+#three .image, #four .image {
+  position: absolute;
+  top: 0;
+  bottom:0;
+  width: 100%;
+}
+
+#three .image {
+  background-image: url("https://drive.google.com/uc?export=view&id=10tzeBrvoR5OO3EK_Wcg-gRxbVO7xv6em");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+#four .image {
+  background-image: url("https://drive.google.com/uc?export=view&id=1SzCTDu5_eAF569lFHtNyIlUCrdW2mOXu");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
diff --git a/another-branching-strategy-svg/README.markdown b/another-branching-strategy-svg/README.markdown
new file mode 100644
index 0000000..1795626
--- /dev/null
+++ b/another-branching-strategy-svg/README.markdown
@@ -0,0 +1,15 @@
+# Another Branching Strategy | SVG
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/DonKarlssonSan/pen/zYoGejE](https://codepen.io/DonKarlssonSan/pen/zYoGejE).
+
+Click to generate a new random image!
+
+The lines are not allowed to intersect.
+
+My previous attempt is using recursion. I was not 100% happy with the results, the tree look unbalanced because the branches are drawn from the root to end, giving the posibility for one branch to occopy a lot of space.
+https://codepen.io/DonKarlssonSan/pen/yLVNBrz
+
+This algorithm on the other hand uses a for loop instead of recursion, forcing it to draw all branches of the same level in one sweep.
+
+Buy a unique Crypto Art (NFT) on OpenSea:
+https://opensea.io/collection/branching-strategy/
diff --git a/another-branching-strategy-svg/dist/index.html b/another-branching-strategy-svg/dist/index.html
new file mode 100644
index 0000000..22e6488
--- /dev/null
+++ b/another-branching-strategy-svg/dist/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Another Branching Strategy | SVG</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1650 1170" width="1650" height="1170" version="1.1" >
+  <!-- 
+    Johan Karlsson, 2021
+    https://twitter.com/DonKarlssonSan 
+  -->
+</svg>
+<!-- partial -->
+  <script src='https://codepen.io/DonKarlssonSan/pen/yLOxWGB.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/another-branching-strategy-svg/dist/script.js b/another-branching-strategy-svg/dist/script.js
new file mode 100644
index 0000000..3b17330
--- /dev/null
+++ b/another-branching-strategy-svg/dist/script.js
@@ -0,0 +1,175 @@
+/*
+  Johan Karlsson, 2021
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+
+let svg;
+let w = 1650;
+let h = 1170;
+let lines;
+let lengthFactor;
+let branchFactor;
+let revDivisor;
+
+function setup() {
+  svg = document.querySelector("svg");
+  document.addEventListener("click", draw);
+  document.addEventListener("keydown", onKeyDown);
+}
+
+function createSvgElement(elementName) {
+  const svgNs = "http://www.w3.org/2000/svg";
+  return document.createElementNS(svgNs, elementName);
+}
+
+function onKeyDown (e) {
+  if(e.code === "KeyD") {
+    download();
+  }
+}
+
+function download() {
+  let svgDoc = svg.outerHTML;
+  let filename = "branching-strategy.svg";
+  let element = document.createElement("a");
+  element.setAttribute("href", "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgDoc));
+  element.setAttribute("download", filename);
+  element.style.display = "none";
+  document.body.appendChild(element);
+  element.addEventListener("click", e => e.stopPropagation());
+  element.click();
+  document.body.removeChild(element);
+}
+
+// http://paulbourke.net/geometry/pointlineplane/
+function intersects(x1, y1, x2, y2, x3, y3, x4, y4) {
+  let denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
+  if (denom === 0) {
+    return false;
+  }
+  let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denom;
+  let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denom;
+  if(ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {
+    return true;
+  }
+  else {
+    return false;
+  }
+}
+
+function intersectsAnotherLine(x3, y3, x4, y4) {
+  for(let i = 0; i < lines.length; i++) {
+    let x1 = lines[i][0];
+    let y1 = lines[i][1];
+    let x2 = lines[i][2];
+    let y2 = lines[i][3];
+    if(intersects(x1, y1, x2, y2, x3, y3, x4, y4)) {
+      return true;
+    }
+  }
+  if(x4 < 0 || x4 > w || y4 < 0 || y4 > h) {
+    return true;
+  }
+  return false;
+}
+
+function drawLine(groupElement, x1, y1, x2, y2) {
+  let line = createSvgElement("line");
+  line.setAttribute("x1", x1);
+  line.setAttribute("y1", y1);
+  line.setAttribute("x2", x2);
+  line.setAttribute("y2", y2);
+
+  groupElement.appendChild(line);
+}
+
+// I have a recursive version here that I did first:
+// https://codepen.io/DonKarlssonSan/pen/yLVNBrz
+// But I was not satisfied with the result. The 
+// problem being it draws a branch at a time. But 
+// since I want revDivisor number of base branches
+// I don't want the first base branch take up all 
+// the space.
+// The solution is to perform the drawing with a 
+// loop instead. First drawing each base branch and 
+// then draw their children and then their children
+// and so on. This gives a more balanced tree 
+// around the center.
+function drawTree(groupElement) {
+  lines = [];
+  maxLength = Math.min(w, h) / 2;
+  branchFactor = Math.random() * 4 + 3;
+  lengthFactor = Math.random() * 0.8 + 0.2;
+  revDivisor = Math.round(Math.random() * 8 + 2);
+  let nrOfIterations = Math.round(Math.random() * 5 + 2);
+  let nodes = [];
+  for(let i = 0; i < revDivisor; i++) {
+    let angle = i / revDivisor * Math.PI * 2;
+    let x = w / 2;
+    let y = h / 2;
+    nodes.push({
+      x: x,
+      y: y,
+      angle: angle,
+      level: 0
+    });
+  }
+  while(nodes.length > 0) {
+    let node = nodes.shift();
+    let length = (Math.random() * 0.9 + 0.1) * (nrOfIterations - node.level) / nrOfIterations * maxLength;
+    // Move the start point slightly to avoid intersection
+    node.x += Math.cos(node.angle);
+    node.y += Math.sin(node.angle);
+    let x2 = node.x + Math.cos(node.angle) * length;
+    let y2 = node.y + Math.sin(node.angle) * length;
+
+    if(intersectsAnotherLine(node.x, node.y, x2, y2)) {
+      continue;
+    }
+    drawLine(groupElement, node.x, node.y, x2, y2);
+    lines.push([node.x, node.y, x2, y2]);
+    
+    if(node.level < nrOfIterations) {
+      let nrOfBranches = (nrOfIterations - node.level) * 2; //Math.ceil(1 * (nrOfIterations - node.level) * branchFactor);
+      for(let i = 0; i < nrOfBranches; i++) {
+        let f = Math.random() * lengthFactor;
+        let newLength = length * f;
+        let newX = node.x + Math.cos(node.angle) * newLength;
+        let newY = node.y + Math.sin(node.angle) * newLength;
+        let direction = Math.random() > 0.5 ? -1 : 1;
+        let deltaAngle = Math.PI / revDivisor * direction;
+        let angle = node.angle + deltaAngle;
+        nodes.push({
+          x: newX,
+          y: newY,
+          angle: angle,
+          level: node.level + 1,
+        });      
+      }
+    }
+  }
+}
+  
+function draw() {
+  console.clear();
+  
+  let group = document.querySelector("#container");
+  if(group) {
+    group.remove();
+  }
+  group = createSvgElement("g");
+  group.setAttribute("id", "container");
+  group.setAttribute("fill", "none");
+  group.setAttribute("stroke", "white");
+
+  drawTree(group);
+  
+  let logo = new Logo(w - 90, h - 70, "white");
+  logo.draw(group);
+  
+  svg.appendChild(group);
+}
+
+setup();
+draw();
\ No newline at end of file
diff --git a/another-branching-strategy-svg/dist/style.css b/another-branching-strategy-svg/dist/style.css
new file mode 100644
index 0000000..1178cb6
--- /dev/null
+++ b/another-branching-strategy-svg/dist/style.css
@@ -0,0 +1,13 @@
+html, body {
+  height: 100%;
+  margin: 0;
+  cursor: pointer;
+  background-color: #000;
+}
+
+svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #223;
+}
\ No newline at end of file
diff --git a/another-branching-strategy-svg/license.txt b/another-branching-strategy-svg/license.txt
new file mode 100644
index 0000000..dff0881
--- /dev/null
+++ b/another-branching-strategy-svg/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Johan Karlsson (https://codepen.io/DonKarlssonSan/pen/zYoGejE)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/another-branching-strategy-svg/src/index.html b/another-branching-strategy-svg/src/index.html
new file mode 100644
index 0000000..6dd7cb4
--- /dev/null
+++ b/another-branching-strategy-svg/src/index.html
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1650 1170" width="1650" height="1170" version="1.1" >
+  <!-- 
+    Johan Karlsson, 2021
+    https://twitter.com/DonKarlssonSan 
+  -->
+</svg>
diff --git a/another-branching-strategy-svg/src/script.js b/another-branching-strategy-svg/src/script.js
new file mode 100644
index 0000000..f5b563a
--- /dev/null
+++ b/another-branching-strategy-svg/src/script.js
@@ -0,0 +1,175 @@
+/*
+  Johan Karlsson, 2021
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+
+let svg;
+let w = 1650;
+let h = 1170;
+let lines;
+let lengthFactor;
+let branchFactor;
+let revDivisor;
+
+function setup() {
+  svg = document.querySelector("svg");
+  document.addEventListener("click", draw);
+  document.addEventListener("keydown", onKeyDown);
+}
+
+function createSvgElement(elementName) {
+  const svgNs = "http://www.w3.org/2000/svg";
+  return document.createElementNS(svgNs, elementName);
+}
+
+function onKeyDown (e) {
+  if(e.code === "KeyD") {
+    download();
+  }
+}
+
+function download() {
+  let svgDoc = svg.outerHTML;
+  let filename = "branching-strategy.svg";
+  let element = document.createElement("a");
+  element.setAttribute("href", "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgDoc));
+  element.setAttribute("download", filename);
+  element.style.display = "none";
+  document.body.appendChild(element);
+  element.addEventListener("click", e => e.stopPropagation());
+  element.click();
+  document.body.removeChild(element);
+}
+
+// http://paulbourke.net/geometry/pointlineplane/
+function intersects(x1, y1, x2, y2, x3, y3, x4, y4) {
+  let denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
+  if (denom === 0) {
+    return false;
+  }
+  let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denom;
+  let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denom;
+  if(ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {
+    return true;
+  }
+  else {
+    return false;
+  }
+}
+
+function intersectsAnotherLine(x3, y3, x4, y4) {
+  for(let i = 0; i < lines.length; i++) {
+    let x1 = lines[i][0];
+    let y1 = lines[i][1];
+    let x2 = lines[i][2];
+    let y2 = lines[i][3];
+    if(intersects(x1, y1, x2, y2, x3, y3, x4, y4)) {
+      return true;
+    }
+  }
+  if(x4 < 0 || x4 > w || y4 < 0 || y4 > h) {
+    return true;
+  }
+  return false;
+}
+
+function drawLine(groupElement, x1, y1, x2, y2) {
+  let line = createSvgElement("line");
+  line.setAttribute("x1", x1);
+  line.setAttribute("y1", y1);
+  line.setAttribute("x2", x2);
+  line.setAttribute("y2", y2);
+
+  groupElement.appendChild(line);
+}
+
+// I have a recursive version here that I did first:
+// https://codepen.io/DonKarlssonSan/pen/yLVNBrz
+// But I was not satisfied with the result. The 
+// problem being it draws a branch at a time. But 
+// since I want revDivisor number of base branches
+// I don't want the first base branch take up all 
+// the space.
+// The solution is to perform the drawing with a 
+// loop instead. First drawing each base branch and 
+// then draw their children and then their children
+// and so on. This gives a more balanced tree 
+// around the center.
+function drawTree(groupElement) {
+  lines = [];
+  maxLength = Math.min(w, h) / 2;
+  branchFactor = Math.random() * 4 + 3;
+  lengthFactor = Math.random() * 0.8 + 0.2;
+  revDivisor = Math.round(Math.random() * 8 + 2);
+  let nrOfIterations = Math.round(Math.random() * 5 + 2);
+  let nodes = [];
+  for(let i = 0; i < revDivisor; i++) {
+    let angle = i / revDivisor * Math.PI * 2;
+    let x = w / 2;
+    let y = h / 2;
+    nodes.push({
+      x: x,
+      y: y,
+      angle: angle,
+      level: 0
+    });
+  }
+  while(nodes.length > 0) {
+    let node = nodes.shift();
+    let length = (Math.random() * 0.9 + 0.1) * (nrOfIterations - node.level) / nrOfIterations * maxLength;
+    // Move the start point slightly to avoid intersection
+    node.x += Math.cos(node.angle);
+    node.y += Math.sin(node.angle);
+    let x2 = node.x + Math.cos(node.angle) * length;
+    let y2 = node.y + Math.sin(node.angle) * length;
+
+    if(intersectsAnotherLine(node.x, node.y, x2, y2)) {
+      continue;
+    }
+    drawLine(groupElement, node.x, node.y, x2, y2);
+    lines.push([node.x, node.y, x2, y2]);
+    
+    if(node.level < nrOfIterations) {
+      let nrOfBranches = (nrOfIterations - node.level) * 2; //Math.ceil(1 * (nrOfIterations - node.level) * branchFactor);
+      for(let i = 0; i < nrOfBranches; i++) {
+        let f = Math.random() * lengthFactor;
+        let newLength = length * f;
+        let newX = node.x + Math.cos(node.angle) * newLength;
+        let newY = node.y + Math.sin(node.angle) * newLength;
+        let direction = Math.random() > 0.5 ? -1 : 1;
+        let deltaAngle = Math.PI / revDivisor * direction;
+        let angle = node.angle + deltaAngle;
+        nodes.push({
+          x: newX,
+          y: newY,
+          angle: angle,
+          level: node.level + 1,
+        });      
+      }
+    }
+  }
+}
+  
+function draw() {
+  console.clear();
+  
+  let group = document.querySelector("#container");
+  if(group) {
+    group.remove();
+  }
+  group = createSvgElement("g");
+  group.setAttribute("id", "container");
+  group.setAttribute("fill", "none");
+  group.setAttribute("stroke", "white");
+
+  drawTree(group);
+  
+  let logo = new Logo(w - 90, h - 70, "white");
+  logo.draw(group);
+  
+  svg.appendChild(group);
+}
+
+setup();
+draw();
diff --git a/another-branching-strategy-svg/src/style.css b/another-branching-strategy-svg/src/style.css
new file mode 100644
index 0000000..f928470
--- /dev/null
+++ b/another-branching-strategy-svg/src/style.css
@@ -0,0 +1,13 @@
+html, body {
+  height: 100%;
+  margin: 0;
+  cursor: pointer;
+  background-color: #000;
+}
+
+svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #223;
+}
diff --git a/apart/README.markdown b/apart/README.markdown
new file mode 100644
index 0000000..efd4574
--- /dev/null
+++ b/apart/README.markdown
@@ -0,0 +1,5 @@
+# Apart
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Gthibaud/pen/zYBZmVg](https://codepen.io/Gthibaud/pen/zYBZmVg).
+
+
diff --git a/apart/dist/index.html b/apart/dist/index.html
new file mode 100644
index 0000000..afc7107
--- /dev/null
+++ b/apart/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Apart</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/apart/dist/script.js b/apart/dist/script.js
new file mode 100644
index 0000000..e9e70f1
--- /dev/null
+++ b/apart/dist/script.js
@@ -0,0 +1,166 @@
+let shape = [{
+        "x": 0.04,
+        "y": 0.46430333455403644
+      },
+      {
+        "x": 0.11380900382995605,
+        "y": 0.3257950146993001
+      },
+      {
+        "x": 0.13240699768066405,
+        "y": 0.18728583653767902
+      },
+      {
+        "x": 0.3311690139770508,
+        "y": 0.03333333333333333
+      },
+      {
+        "x": 0.7106759643554688,
+        "y": 0.03333333333333333
+      },
+      {
+        "x": 0.8193560028076172,
+        "y": 0.12213333447774251
+      },
+      {
+        "x": 0.8960710144042969,
+        "y": 0.35668166478474933
+      },
+      {
+        "x": 0.7821600341796875,
+        "y": 0.5477949778238932
+      },
+      {
+        "x": 0.7821600341796875,
+        "y": 0.8016475041707357
+      },
+      {
+        "x": 0.96,
+        "y": 1
+      },
+      {
+        "x": 0.42822498321533203,
+        "y": 1
+      },
+      {
+        "x": 0.405,
+        "y": 0.7292558034261067
+      },
+      {
+        "x": 0.2427669906616211,
+        "y": 0.7198350270589192
+      },
+      {
+        "x": 0.18,
+        "y": 0.6875
+      },
+      {
+        "x": 0.15268500328063964,
+        "y": 0.6397216796875
+      },
+      {
+        "x": 0.13240699768066405,
+        "y": 0.49181251525878905
+      },
+      {
+        "x": 0.05278580188751221,
+        "y": 0.4807125091552734
+      }
+    ];
+
+    function getShape(points, x, y, w, h) {
+
+      let source_ratio = 100 / 120,
+        target_ratio = w / h;
+
+      let image_width, image_height;
+
+      let side = source_ratio > target_ratio;
+
+      if (side) {
+        image_width = w;
+        image_height = image_width / source_ratio;
+      } else {
+        image_height = h;
+        image_width = image_height * source_ratio;
+      }
+
+      let offset_x = x + w / 2 - image_width / 2,
+        offset_y = y + h - image_height;
+
+      return points.map((p, i) => {
+        return {
+          x: offset_x + p.x * image_width,
+          y: offset_y + p.y * image_height
+        };
+      });
+
+    }
+
+    function getDistance(points) {
+      let result = [];
+      for (var i = 0; i < points.length; i++) {
+        let p = points[i],
+          past_p = points[mod(i - 1, points.length)],
+          next_p = points[(i + 1) % points.length];
+        let last_dist = dist(past_p.x, past_p.y, p.x, p.y),
+          next_dist = dist(p.x, p.y, next_p.x, next_p.y);
+        result.push(min(last_dist, next_dist));
+      }
+      return result;
+    }
+    let faces = [];
+
+    function setup() {
+      createCanvas(windowWidth, windowHeight);
+      noStroke();
+      init();
+    }
+
+    function windowResized() {
+      resizeCanvas(windowWidth, windowHeight);
+      init();
+    }
+
+    function init() {
+      let f1 = {
+        color: "#FD86FF",
+        origin: getShape(shape, -width * 0.1, 0, width, height)
+      };
+      f1.point_dist = getDistance(f1.origin);
+
+      let f2 = {
+        color: "#FFEB35",
+        origin: getShape(shape, 0, height * 0.1, width, height)
+      };
+      f2.point_dist = getDistance(f2.origin);
+
+      let f3 = {
+        color: "#2CB3FF",
+        origin: getShape(shape, width * 0.1, 0, width, height)
+      };
+      f3.point_dist = getDistance(f3.origin);
+      faces = [f1, f2, f3];
+    }
+
+    function draw() {
+      background("#FFFAEF");
+      blendMode(MULTIPLY);
+      faces.forEach((f, i) => {
+        fill(f.color);
+        beginShape();
+        f.origin.forEach((p, p_i) => {
+          let t = millis() / 1000;
+          let s = map(mouseX, 0, width, 0.1, 0.5),
+            s_cos = map(mouseY, 0, height, 0.1, 0.5);
+          vertex(p.x + sin(t + (i + p_i)) * f.point_dist[p_i] * s_cos, p.y + cos(1000 + t - (i + p_i)) * f.point_dist[p_i] * s);
+        });
+        endShape(CLOSE);
+      });
+      blendMode(BLEND);
+    }
+
+
+    function mod(n, m) {
+      return ((n % m) + m) % m;
+    }
\ No newline at end of file
diff --git a/apart/dist/style.css b/apart/dist/style.css
new file mode 100644
index 0000000..45e7cf0
--- /dev/null
+++ b/apart/dist/style.css
@@ -0,0 +1,4 @@
+body{
+      margin: 0;
+      overflow: hidden;
+    }
\ No newline at end of file
diff --git a/apart/license.txt b/apart/license.txt
new file mode 100644
index 0000000..3d55de2
--- /dev/null
+++ b/apart/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Tibo (https://codepen.io/Gthibaud/pen/zYBZmVg)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/apart/src/index.html b/apart/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/apart/src/script.js b/apart/src/script.js
new file mode 100644
index 0000000..3afde2e
--- /dev/null
+++ b/apart/src/script.js
@@ -0,0 +1,166 @@
+    let shape = [{
+        "x": 0.04,
+        "y": 0.46430333455403644
+      },
+      {
+        "x": 0.11380900382995605,
+        "y": 0.3257950146993001
+      },
+      {
+        "x": 0.13240699768066405,
+        "y": 0.18728583653767902
+      },
+      {
+        "x": 0.3311690139770508,
+        "y": 0.03333333333333333
+      },
+      {
+        "x": 0.7106759643554688,
+        "y": 0.03333333333333333
+      },
+      {
+        "x": 0.8193560028076172,
+        "y": 0.12213333447774251
+      },
+      {
+        "x": 0.8960710144042969,
+        "y": 0.35668166478474933
+      },
+      {
+        "x": 0.7821600341796875,
+        "y": 0.5477949778238932
+      },
+      {
+        "x": 0.7821600341796875,
+        "y": 0.8016475041707357
+      },
+      {
+        "x": 0.96,
+        "y": 1
+      },
+      {
+        "x": 0.42822498321533203,
+        "y": 1
+      },
+      {
+        "x": 0.405,
+        "y": 0.7292558034261067
+      },
+      {
+        "x": 0.2427669906616211,
+        "y": 0.7198350270589192
+      },
+      {
+        "x": 0.18,
+        "y": 0.6875
+      },
+      {
+        "x": 0.15268500328063964,
+        "y": 0.6397216796875
+      },
+      {
+        "x": 0.13240699768066405,
+        "y": 0.49181251525878905
+      },
+      {
+        "x": 0.05278580188751221,
+        "y": 0.4807125091552734
+      }
+    ];
+
+    function getShape(points, x, y, w, h) {
+
+      let source_ratio = 100 / 120,
+        target_ratio = w / h;
+
+      let image_width, image_height;
+
+      let side = source_ratio > target_ratio;
+
+      if (side) {
+        image_width = w;
+        image_height = image_width / source_ratio;
+      } else {
+        image_height = h;
+        image_width = image_height * source_ratio;
+      }
+
+      let offset_x = x + w / 2 - image_width / 2,
+        offset_y = y + h - image_height;
+
+      return points.map((p, i) => {
+        return {
+          x: offset_x + p.x * image_width,
+          y: offset_y + p.y * image_height
+        };
+      });
+
+    }
+
+    function getDistance(points) {
+      let result = [];
+      for (var i = 0; i < points.length; i++) {
+        let p = points[i],
+          past_p = points[mod(i - 1, points.length)],
+          next_p = points[(i + 1) % points.length];
+        let last_dist = dist(past_p.x, past_p.y, p.x, p.y),
+          next_dist = dist(p.x, p.y, next_p.x, next_p.y);
+        result.push(min(last_dist, next_dist));
+      }
+      return result;
+    }
+    let faces = [];
+
+    function setup() {
+      createCanvas(windowWidth, windowHeight);
+      noStroke();
+      init();
+    }
+
+    function windowResized() {
+      resizeCanvas(windowWidth, windowHeight);
+      init();
+    }
+
+    function init() {
+      let f1 = {
+        color: "#FD86FF",
+        origin: getShape(shape, -width * 0.1, 0, width, height)
+      };
+      f1.point_dist = getDistance(f1.origin);
+
+      let f2 = {
+        color: "#FFEB35",
+        origin: getShape(shape, 0, height * 0.1, width, height)
+      };
+      f2.point_dist = getDistance(f2.origin);
+
+      let f3 = {
+        color: "#2CB3FF",
+        origin: getShape(shape, width * 0.1, 0, width, height)
+      };
+      f3.point_dist = getDistance(f3.origin);
+      faces = [f1, f2, f3];
+    }
+
+    function draw() {
+      background("#FFFAEF");
+      blendMode(MULTIPLY);
+      faces.forEach((f, i) => {
+        fill(f.color);
+        beginShape();
+        f.origin.forEach((p, p_i) => {
+          let t = millis() / 1000;
+          let s = map(mouseX, 0, width, 0.1, 0.5),
+            s_cos = map(mouseY, 0, height, 0.1, 0.5);
+          vertex(p.x + sin(t + (i + p_i)) * f.point_dist[p_i] * s_cos, p.y + cos(1000 + t - (i + p_i)) * f.point_dist[p_i] * s);
+        });
+        endShape(CLOSE);
+      });
+      blendMode(BLEND);
+    }
+
+
+    function mod(n, m) {
+      return ((n % m) + m) % m;
+    }
diff --git a/apart/src/style.css b/apart/src/style.css
new file mode 100644
index 0000000..7c5650a
--- /dev/null
+++ b/apart/src/style.css
@@ -0,0 +1,4 @@
+    body{
+      margin: 0;
+      overflow: hidden;
+    }
\ No newline at end of file
diff --git a/apple-inspired-pride-clock/LICENSE.txt b/apple-inspired-pride-clock/LICENSE.txt
new file mode 100644
index 0000000..2e4b2f7
--- /dev/null
+++ b/apple-inspired-pride-clock/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 by Scott Kellum (https://codepen.io/scottkellum/pen/gOvXodv)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/apple-inspired-pride-clock/README.md b/apple-inspired-pride-clock/README.md
new file mode 100644
index 0000000..1c0ada5
--- /dev/null
+++ b/apple-inspired-pride-clock/README.md
@@ -0,0 +1,4 @@
+# Apple inspired Pride clock
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/scottkellum/pen/gOvXodv](https://codepen.io/scottkellum/pen/gOvXodv).
+
diff --git a/apple-inspired-pride-clock/dist/index.html b/apple-inspired-pride-clock/dist/index.html
new file mode 100644
index 0000000..a0c8192
--- /dev/null
+++ b/apple-inspired-pride-clock/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Apple inspired Pride clock</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+a<div class="clock">
+	<div class="clock-inner">
+		<div class="numbers" contenteditable>
+			<div class="hour" id="hour">9</div>
+			<div class="min" id="min">41</div>
+		</div>
+	</div>
+	<div class="clock-overlay"></div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/apple-inspired-pride-clock/dist/script.js b/apple-inspired-pride-clock/dist/script.js
new file mode 100644
index 0000000..32ad86a
--- /dev/null
+++ b/apple-inspired-pride-clock/dist/script.js
@@ -0,0 +1,7 @@
+var time = new Date();
+
+h = time.getHours();
+m = time.getMinutes();
+
+document.getElementById("hour").innerHTML = h;
+document.getElementById("min").innerHTML = m;
\ No newline at end of file
diff --git a/apple-inspired-pride-clock/dist/style.css b/apple-inspired-pride-clock/dist/style.css
new file mode 100644
index 0000000..e54cbe1
--- /dev/null
+++ b/apple-inspired-pride-clock/dist/style.css
@@ -0,0 +1,73 @@
+html {
+  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+::-moz-selection {
+  background: #000;
+  color: #858585;
+}
+
+::selection {
+  background: #000;
+  color: #858585;
+}
+
+.clock {
+  font-size: 45vmin;
+  line-height: 0.8;
+  position: static;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-style: italic;
+  font-weight: 1000;
+  letter-spacing: -0.05em;
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+}
+
+.clock-inner {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: grid;
+  place-content: center;
+  background: repeating-radial-gradient(circle at -150% -25%, #fff, #777 0.025em, #fff 0.05em);
+  filter: contrast(2000%);
+}
+
+.numbers {
+  font-size: 1em;
+  filter: blur(0.0125em);
+  transform: rotate(6deg);
+  opacity: 0.46;
+}
+
+.hour {
+  transform: translatex(0.2em);
+}
+
+.min {
+  transform: translatex(-0.2em);
+}
+
+.clock-overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  mix-blend-mode: lighten;
+  pointer-events: none;
+  background: repeating-radial-gradient(circle at -150% -25% , #f7b232 0em, #f7b232 0.05em, #e12626 0.05em, #e12626 0.1em, #733d2c 0.1em, #733d2c 0.15em, #2b1d1d 0.15em, #2b1d1d 0.2em, #511c69 0.2em, #511c69 0.25em, #1c73c4 0.25em, #1c73c4 0.3em, #a0cdfb 0.3em, #a0cdfb 0.35em, #69d6ad 0.35em, #69d6ad 0.4em, #ffcd04 0.4em, #ffcd04 0.45em, #fbaaaa 0.45em, #fbaaaa 0.5em);
+}
\ No newline at end of file
diff --git a/apple-inspired-pride-clock/src/index.html b/apple-inspired-pride-clock/src/index.html
new file mode 100644
index 0000000..fc12e02
--- /dev/null
+++ b/apple-inspired-pride-clock/src/index.html
@@ -0,0 +1,9 @@
+a<div class="clock">
+	<div class="clock-inner">
+		<div class="numbers" contenteditable>
+			<div class="hour" id="hour">9</div>
+			<div class="min" id="min">41</div>
+		</div>
+	</div>
+	<div class="clock-overlay"></div>
+</div>
\ No newline at end of file
diff --git a/apple-inspired-pride-clock/src/script.js b/apple-inspired-pride-clock/src/script.js
new file mode 100644
index 0000000..0527b8a
--- /dev/null
+++ b/apple-inspired-pride-clock/src/script.js
@@ -0,0 +1,7 @@
+var time = new Date();
+
+h = time.getHours();
+m = time.getMinutes();
+
+document.getElementById("hour").innerHTML = h;
+document.getElementById("min").innerHTML = m;
diff --git a/apple-inspired-pride-clock/src/style.scss b/apple-inspired-pride-clock/src/style.scss
new file mode 100644
index 0000000..80a861d
--- /dev/null
+++ b/apple-inspired-pride-clock/src/style.scss
@@ -0,0 +1,94 @@
+$density: 0.05em;
+
+html {
+	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
+		helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+}
+
+html,
+body {
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+}
+
+::selection {
+	background: #000;
+	color: hsl(0deg, 0%, 52%);
+}
+
+@mixin rainbow($colors...) {
+	$output: "";
+	$i: 0;
+
+	@each $color in $colors {
+		$output: $output +
+			", #{$color} #{$density * $i}, #{$color} #{$density * ($i + 1)}";
+		$i: $i + 1;
+	}
+	background: repeating-radial-gradient(circle at -150% -25% unquote($output));
+}
+
+.clock {
+	font-size: 45vmin;
+	line-height: 0.8;
+	position: static;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	font-style: italic;
+	font-weight: 1000;
+	letter-spacing: -0.05em;
+	font-variant-numeric: tabular-nums;
+	overflow: hidden;
+}
+.clock-inner {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	display: grid;
+	place-content: center;
+	background: repeating-radial-gradient(
+		circle at -150% -25%,
+		#fff,
+		#777 ($density / 2),
+		#fff $density
+	);
+	filter: contrast(2000%);
+}
+.numbers {
+	font-size: 1em;
+	filter: blur($density / 4);
+	transform: rotate(6deg);
+	opacity: 0.46;
+}
+.hour {
+	transform: translatex(0.2em);
+}
+.min {
+	transform: translatex(-0.2em);
+}
+.clock-overlay {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	mix-blend-mode: lighten;
+	pointer-events: none;
+	@include rainbow(
+		#f7b232,
+		#e12626,
+		#733d2c,
+		#2b1d1d,
+		#511c69,
+		#1c73c4,
+		#a0cdfb,
+		#69d6ad,
+		#ffcd04,
+		#fbaaaa
+	);
+}
diff --git a/apple-keynote-animation/README.markdown b/apple-keynote-animation/README.markdown
new file mode 100644
index 0000000..825c9bd
--- /dev/null
+++ b/apple-keynote-animation/README.markdown
@@ -0,0 +1,5 @@
+# Apple Keynote animation
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Mamboleoo/pen/ZELqMOg](https://codepen.io/Mamboleoo/pen/ZELqMOg).
+
+
diff --git a/apple-keynote-animation/dist/index.html b/apple-keynote-animation/dist/index.html
new file mode 100644
index 0000000..d609d4f
--- /dev/null
+++ b/apple-keynote-animation/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Apple Keynote animation</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas></canvas>
+<svg viewBox="0 0 400 488">
+  <path d="m 376.3299,351.06186 c 4.45361,47.0103 -51.46392,124.20619 -127.17526,105.40206 -75.71134,-18.80413 9.89692,-176.65979 69.7732,-140.53608 59.87628,36.12371 -80.02665,144.51868 -165.7732,140.53608 -51.44793,-2.38956 -95.0103,-28.70103 -80.65979,-101.4433 14.35051,-72.74227 207.83505,-255.3402 264.24742,-194.96907 56.41237,60.37113 -171.71134,177.15461 -229.60825,173.6907 -57.89691,-3.46391 -114.55671,-62.35051 -65.31959,-137.567 49.23712,-75.21649 131.76348,-45.721 131.76348,-45.721" fill="none" stroke="#4F7FFF" stroke-linecap="round" stroke-width="2" />
+  <path d="M207.83505,122.567C243.83505,117 308.04124,69.98969 288.24742,21.49485C215.62887,21.49485 199.858,109.20619 203.01031,131.84536" fill="none" stroke="#4F7FFF" stroke-linecap="round" stroke-width="2" />
+</svg>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/apple-keynote-animation/dist/script.js b/apple-keynote-animation/dist/script.js
new file mode 100644
index 0000000..c6ee096
--- /dev/null
+++ b/apple-keynote-animation/dist/script.js
@@ -0,0 +1,145 @@
+console.clear();
+
+const canvas = document.querySelector('canvas');
+const svg = document.querySelector('svg');
+const ctx = canvas.getContext('2d');
+let width = svg.clientWidth;
+let height = svg.clientHeight;
+
+canvas.width = width;
+canvas.height = height;
+
+const gradients = [
+  [
+    [0, [118, 179, 236]],
+    [10, [41, 102, 193]],
+    [20, [129, 77, 185]],
+    [30, [129, 77, 185]],
+    [50, [250, 148, 170]],
+    [60, [237, 70, 54]],
+    [70, [253, 134, 100]],
+    [80, [254, 156, 33]],
+    [90, [250, 213, 0]],
+    [100, [171, 211, 96]]
+  ],
+  [
+    [0, [1, 123, 147]],
+    [100, [131, 201, 167]]
+  ]
+];
+
+const dots = [];
+class Dot {
+  constructor (x, y, color, delay) {
+    this.x = x;   
+    this.y = y;
+    this.r = 0;
+    this.color = color;
+    this.delay = (delay * 0.9);
+    this.tween = gsap.fromTo(this, {
+      r: 0,
+      x: x - 0.05,
+      y: y - 0.05
+    }, {
+      x: x,
+      y: y,
+      r: () => width * 0.03 + (Math.abs(Math.sin(this.delay * 3.4 - 1.5)) * width * 0.02),
+      duration: 1.8,
+      ease: 'elastic.out(1, 0.5)',
+      delay: this.delay
+    });
+  }
+  draw () {
+    ctx.fillStyle = this.color;
+    ctx.beginPath();
+    ctx.arc(this.x * width, this.y * height, this.r, 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}
+
+function init () {
+  const paths = svg.querySelectorAll('path');
+  const totalLength = [...paths].reduce((p) => p.getTotalLength());
+  let sum_length = 0;
+  paths.forEach((path, pathIndex) => {
+    const length = path.getTotalLength();
+    for (let i = 0; i < length; i+=2) {
+      const point = path.getPointAtLength(i);
+      const x = point.x / 400;
+      const y = point.y / 488;
+      const RGB_color = getColor(pathIndex, length, i / length);
+      const color = `rgb(${RGB_color[0]}, ${RGB_color[1]}, ${RGB_color[2]})`;
+      
+      const dot = new Dot(x, y, color, (1.5 - (sum_length / totalLength)));
+      dots.push(dot);
+      sum_length += 2;
+    }
+  });
+}
+
+/* Code copied from https://stackoverflow.com/a/30144587 */
+function pickHex(color1, color2, weight) {
+  var p = weight;
+  var w = p * 2 - 1;
+  var w1 = (w/1+1) / 2;
+  var w2 = 1 - w1;
+  var rgb = [Math.round(color1[0] * w1 + color2[0] * w2),
+      Math.round(color1[1] * w1 + color2[1] * w2),
+      Math.round(color1[2] * w1 + color2[2] * w2)];
+  return rgb;
+}
+function getColor(pathIndex, pathLength, colorIndex) {
+  var colorRange = [];
+  let stop = false;
+  const gradient = gradients[pathIndex];
+  gradient.forEach((step, index) => {
+    if (!stop && (colorIndex * 100) <= step[0]) {
+      if (index === 0) {
+        index = 1;
+      }
+      colorRange = [index - 1, index];
+      stop = true;
+    }
+  });
+
+  //Get the two closest colors
+  var firstcolor = gradient[colorRange[0]][1];
+  var secondcolor = gradient[colorRange[1]][1];
+  //Calculate ratio between the two closest colors
+  var firstcolor_x = pathLength * (gradient[colorRange[0]][0]/100);
+  var secondcolor_x = pathLength * (gradient[colorRange[1]][0]/100)-firstcolor_x;
+  var slider_x = pathLength * colorIndex - firstcolor_x;
+  var ratio = slider_x / secondcolor_x;
+
+  //Get the color with pickHex(thx, less.js's mix function!)
+  return pickHex(secondcolor, firstcolor, ratio);
+}
+
+
+function render () {
+  requestAnimationFrame(render);
+  ctx.clearRect(0, 0, width, height);
+  dots.forEach(dot => {
+    dot.draw();
+  });
+}
+
+window.addEventListener('click', () => {
+  dots.forEach(dot => {
+    dot.tween.restart(true);
+  });
+});
+
+window.addEventListener('resize', () => {
+  width = svg.clientWidth;
+  height = svg.clientHeight;
+
+  canvas.width = width;
+  canvas.height = height;
+  dots.forEach(dot => {
+    dot.tween.invalidate().restart(true);
+  });
+});
+
+init();
+requestAnimationFrame(render);
\ No newline at end of file
diff --git a/apple-keynote-animation/dist/style.css b/apple-keynote-animation/dist/style.css
new file mode 100644
index 0000000..a2dd441
--- /dev/null
+++ b/apple-keynote-animation/dist/style.css
@@ -0,0 +1,25 @@
+svg {
+  width: 80vmin;
+  opacity: 0;
+  position: absolute;
+  left: 50%;
+  top: 48%;
+  transform: translate(-50%, -50%);
+  transition: 0.15s ease-out;
+}
+svg:hover {
+  opacity: 1;
+}
+
+body {
+  height: 100vh;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+canvas {
+  position: absolute;
+  left: 50%;
+  top: 48%;
+  transform: translate(-50%, -50%);
+}
\ No newline at end of file
diff --git a/apple-keynote-animation/license.txt b/apple-keynote-animation/license.txt
new file mode 100644
index 0000000..cc0f3a9
--- /dev/null
+++ b/apple-keynote-animation/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Louis Hoebregts (https://codepen.io/Mamboleoo/pen/ZELqMOg)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/apple-keynote-animation/src/index.html b/apple-keynote-animation/src/index.html
new file mode 100644
index 0000000..4c7ac6f
--- /dev/null
+++ b/apple-keynote-animation/src/index.html
@@ -0,0 +1,5 @@
+<canvas></canvas>
+<svg viewBox="0 0 400 488">
+  <path d="m 376.3299,351.06186 c 4.45361,47.0103 -51.46392,124.20619 -127.17526,105.40206 -75.71134,-18.80413 9.89692,-176.65979 69.7732,-140.53608 59.87628,36.12371 -80.02665,144.51868 -165.7732,140.53608 -51.44793,-2.38956 -95.0103,-28.70103 -80.65979,-101.4433 14.35051,-72.74227 207.83505,-255.3402 264.24742,-194.96907 56.41237,60.37113 -171.71134,177.15461 -229.60825,173.6907 -57.89691,-3.46391 -114.55671,-62.35051 -65.31959,-137.567 49.23712,-75.21649 131.76348,-45.721 131.76348,-45.721" fill="none" stroke="#4F7FFF" stroke-linecap="round" stroke-width="2" />
+  <path d="M207.83505,122.567C243.83505,117 308.04124,69.98969 288.24742,21.49485C215.62887,21.49485 199.858,109.20619 203.01031,131.84536" fill="none" stroke="#4F7FFF" stroke-linecap="round" stroke-width="2" />
+</svg>
diff --git a/apple-keynote-animation/src/script.js b/apple-keynote-animation/src/script.js
new file mode 100644
index 0000000..c6ee096
--- /dev/null
+++ b/apple-keynote-animation/src/script.js
@@ -0,0 +1,145 @@
+console.clear();
+
+const canvas = document.querySelector('canvas');
+const svg = document.querySelector('svg');
+const ctx = canvas.getContext('2d');
+let width = svg.clientWidth;
+let height = svg.clientHeight;
+
+canvas.width = width;
+canvas.height = height;
+
+const gradients = [
+  [
+    [0, [118, 179, 236]],
+    [10, [41, 102, 193]],
+    [20, [129, 77, 185]],
+    [30, [129, 77, 185]],
+    [50, [250, 148, 170]],
+    [60, [237, 70, 54]],
+    [70, [253, 134, 100]],
+    [80, [254, 156, 33]],
+    [90, [250, 213, 0]],
+    [100, [171, 211, 96]]
+  ],
+  [
+    [0, [1, 123, 147]],
+    [100, [131, 201, 167]]
+  ]
+];
+
+const dots = [];
+class Dot {
+  constructor (x, y, color, delay) {
+    this.x = x;   
+    this.y = y;
+    this.r = 0;
+    this.color = color;
+    this.delay = (delay * 0.9);
+    this.tween = gsap.fromTo(this, {
+      r: 0,
+      x: x - 0.05,
+      y: y - 0.05
+    }, {
+      x: x,
+      y: y,
+      r: () => width * 0.03 + (Math.abs(Math.sin(this.delay * 3.4 - 1.5)) * width * 0.02),
+      duration: 1.8,
+      ease: 'elastic.out(1, 0.5)',
+      delay: this.delay
+    });
+  }
+  draw () {
+    ctx.fillStyle = this.color;
+    ctx.beginPath();
+    ctx.arc(this.x * width, this.y * height, this.r, 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}
+
+function init () {
+  const paths = svg.querySelectorAll('path');
+  const totalLength = [...paths].reduce((p) => p.getTotalLength());
+  let sum_length = 0;
+  paths.forEach((path, pathIndex) => {
+    const length = path.getTotalLength();
+    for (let i = 0; i < length; i+=2) {
+      const point = path.getPointAtLength(i);
+      const x = point.x / 400;
+      const y = point.y / 488;
+      const RGB_color = getColor(pathIndex, length, i / length);
+      const color = `rgb(${RGB_color[0]}, ${RGB_color[1]}, ${RGB_color[2]})`;
+      
+      const dot = new Dot(x, y, color, (1.5 - (sum_length / totalLength)));
+      dots.push(dot);
+      sum_length += 2;
+    }
+  });
+}
+
+/* Code copied from https://stackoverflow.com/a/30144587 */
+function pickHex(color1, color2, weight) {
+  var p = weight;
+  var w = p * 2 - 1;
+  var w1 = (w/1+1) / 2;
+  var w2 = 1 - w1;
+  var rgb = [Math.round(color1[0] * w1 + color2[0] * w2),
+      Math.round(color1[1] * w1 + color2[1] * w2),
+      Math.round(color1[2] * w1 + color2[2] * w2)];
+  return rgb;
+}
+function getColor(pathIndex, pathLength, colorIndex) {
+  var colorRange = [];
+  let stop = false;
+  const gradient = gradients[pathIndex];
+  gradient.forEach((step, index) => {
+    if (!stop && (colorIndex * 100) <= step[0]) {
+      if (index === 0) {
+        index = 1;
+      }
+      colorRange = [index - 1, index];
+      stop = true;
+    }
+  });
+
+  //Get the two closest colors
+  var firstcolor = gradient[colorRange[0]][1];
+  var secondcolor = gradient[colorRange[1]][1];
+  //Calculate ratio between the two closest colors
+  var firstcolor_x = pathLength * (gradient[colorRange[0]][0]/100);
+  var secondcolor_x = pathLength * (gradient[colorRange[1]][0]/100)-firstcolor_x;
+  var slider_x = pathLength * colorIndex - firstcolor_x;
+  var ratio = slider_x / secondcolor_x;
+
+  //Get the color with pickHex(thx, less.js's mix function!)
+  return pickHex(secondcolor, firstcolor, ratio);
+}
+
+
+function render () {
+  requestAnimationFrame(render);
+  ctx.clearRect(0, 0, width, height);
+  dots.forEach(dot => {
+    dot.draw();
+  });
+}
+
+window.addEventListener('click', () => {
+  dots.forEach(dot => {
+    dot.tween.restart(true);
+  });
+});
+
+window.addEventListener('resize', () => {
+  width = svg.clientWidth;
+  height = svg.clientHeight;
+
+  canvas.width = width;
+  canvas.height = height;
+  dots.forEach(dot => {
+    dot.tween.invalidate().restart(true);
+  });
+});
+
+init();
+requestAnimationFrame(render);
\ No newline at end of file
diff --git a/apple-keynote-animation/src/style.scss b/apple-keynote-animation/src/style.scss
new file mode 100644
index 0000000..b6fcef1
--- /dev/null
+++ b/apple-keynote-animation/src/style.scss
@@ -0,0 +1,23 @@
+svg {
+  width: 80vmin;
+  opacity: 0;
+  position: absolute;
+  left: 50%;
+  top: 48%;
+  transform: translate(-50%, -50%);
+  transition: 0.15s ease-out;
+  &:hover {
+    opacity: 1;
+  }
+}
+body {
+  height: 100vh;
+  overflow: hidden;
+  cursor: pointer;
+}
+canvas {
+  position: absolute;
+  left: 50%;
+  top: 48%;
+  transform: translate(-50%, -50%);
+}
\ No newline at end of file
diff --git a/art-gallery/README.markdown b/art-gallery/README.markdown
new file mode 100644
index 0000000..ce0f121
--- /dev/null
+++ b/art-gallery/README.markdown
@@ -0,0 +1,6 @@
+# Art Gallery
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/isladjan/pen/BazjqKe](https://codepen.io/isladjan/pen/BazjqKe).
+
+“Stop thinking about art works as objects and start thinking about them as triggers for experiences. What makes a work of art good for you is not something that s already inside it but something that happens inside you.”
+― Brian Eno
diff --git a/art-gallery/dist/index.html b/art-gallery/dist/index.html
new file mode 100644
index 0000000..e8083ac
--- /dev/null
+++ b/art-gallery/dist/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Art Gallery</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" user-scalable="yes">
+<link href="https://fonts.googleapis.com/css2?family=Rajdhani&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="cc" id="canvas_container1"></div> 
+<div class="cc" id="canvas_container2"></div> 
+
+<div class="pngLights"></div> 
+<div class="bg"></div>  
+
+<div class="buttons">   
+    <div class="btn btn_Light">Light OFF</div>
+    <a href="https://codepen.io/collection/DxkYzq" target="_blank" class="btn btn_Works">My Gallery</a>
+</div>
+
+<div class="floor"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/art-gallery/dist/script.js b/art-gallery/dist/script.js
new file mode 100644
index 0000000..e7395c5
--- /dev/null
+++ b/art-gallery/dist/script.js
@@ -0,0 +1,516 @@
+let camera,
+  renderer1,
+  scene,
+  uniformsBlob,
+  uniformsPano,
+  container1 = document.getElementById("canvas_container1"),
+  bg = document.querySelector(".bg"),
+  floor = document.querySelector(".floor"),
+  btn_Light = document.querySelector(".btn_Light"),
+  timeout_Debounce,
+  lightOFF = true,
+  renderer2,
+  camera2,
+  scene2,
+  sprites = new THREE.Group(),
+  container2 = document.getElementById("canvas_container2"),
+  mouse = { x: 1 }
+
+
+init();
+animate();
+
+
+function init() {
+  renderer1 = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+  renderer1.setSize(container1.clientWidth, container1.clientHeight);
+  renderer1.setPixelRatio(window.devicePixelRatio);
+  container1.appendChild(renderer1.domElement);
+
+  scene = new THREE.Scene();
+  camera = new THREE.PerspectiveCamera(75, container1.clientWidth / container1.clientHeight, 0.1, 1000);
+  camera.position.set(0, 0, 40);
+
+  const light1 = new THREE.DirectionalLight("#ffffff", 0.7);
+  light1.position.set(-10, 30, 20);
+  scene.add(light1);
+
+  const light2 = new THREE.DirectionalLight("#ffffff", 0.7);
+  light2.position.set(10, 30, 20);
+  scene.add(light2);
+
+  const light3 = new THREE.DirectionalLight("#fcfcfc", 0.3);
+  light3.position.set(0, -20, 10);
+  scene.add(light3);
+
+  const textureLoader = new THREE.TextureLoader();
+  const blobTexture = textureLoader.load("https://res.cloudinary.com/di1ldxpot/image/upload/v1602936154/Modern_Gallery/blob1_ls1rst.jpg");
+  const panoTexture = textureLoader.load("https://res.cloudinary.com/di1ldxpot/image/upload/v1602936153/Modern_Gallery/pano_ex9djn.jpg");
+
+
+
+  /***   Blob   ***/
+  let blobGeometry = new THREE.IcosahedronBufferGeometry(10, 50);
+
+  uniformsBlob = THREE.UniformsUtils.merge([uniformsBlob, THREE.UniformsLib["lights"]]);
+  Object.assign(uniformsBlob, {
+    t_texture: { type: "t", value: blobTexture },
+    u_time: { type: "f", value: 0.0 },
+    u_mouse1: { type: "v2", value: new THREE.Vector2(1, 1) },
+    u_mouse2: { type: "v2", value: new THREE.Vector2(20, 20) },
+    u_lightOFF: { type: "b", value: lightOFF },
+    u_effect_Switch: { type: "f", value: 0.0 },
+    u_textura_Zoom: { type: "f", value: 1.0 },
+  });
+
+  uniformsBlob.t_texture.value.anisotropy = 16
+  uniformsBlob.t_texture.value.wrapS = THREE.MirroredRepeatWrapping;
+  uniformsBlob.t_texture.value.wrapT = THREE.ClampToEdgeWrapping;
+
+  let shaderMaterialBlob = new THREE.ShaderMaterial({
+    uniforms: uniformsBlob,
+    fragmentShader: blobFragmentShader(),
+    vertexShader: blobVertexShader(),
+    lights: true,
+  });
+  blob = new THREE.Mesh(blobGeometry, shaderMaterialBlob);
+  blob.position.set(2, -2.2, 10);
+  scene.add(blob);
+
+
+
+  /***     Pano     ****/
+  let panoGeometry = new THREE.PlaneBufferGeometry(54.5, 27.3);
+
+  uniformsPano = {
+    t_texture: { type: "t", value: panoTexture },
+    u_resolution: { type: "v2", value: new THREE.Vector2() },
+    u_time: { type: 'f', value: 0 },
+    u_mouse: { type: "v2", value: new THREE.Vector2() },
+    u_lightOFF: { type: "b", value: lightOFF },
+    u_randomColor: { type: "v3", value: new THREE.Vector3(0.2, 0.2, 0.2) },
+    u_panoScale: { type: "v2", value: new THREE.Vector2(10.1, 0.2) },
+  };
+
+  uniformsPano.u_resolution.value.x = renderer1.domElement.width;
+  uniformsPano.u_resolution.value.y = renderer1.domElement.height;
+  
+  uniformsPano.t_texture.value.wrapS = THREE.ClampToEdgeWrapping;
+  uniformsPano.t_texture.value.wrapT = THREE.ClampToEdgeWrapping;
+
+  let shaderMaterialPano = new THREE.ShaderMaterial({
+    uniforms: uniformsPano,
+    fragmentShader: panoFragmentShader(),
+    vertexShader: panoVertexShader(),
+  });
+  pano = new THREE.Mesh(panoGeometry, shaderMaterialPano);
+  pano.position.set(0.5, -1.6, 10);
+  scene.add(pano);
+
+
+  /*   Mouse Event Handler  */
+  function norm(val, max, min) { return (val - min) / (max - min); }
+  window.addEventListener("mousemove", (e) => {
+    mouse.x = e.x;
+
+    let x = norm(-(container1.clientWidth / 2 - e.x), container1.clientWidth / 2, 0) + 0.999;
+    if (x > 0) uniformsBlob.u_mouse1.value.x = x - 1;
+    else uniformsBlob.u_mouse1.value.x = x + 1;
+
+    uniformsBlob.u_mouse1.value.y =  norm(container1.clientHeight / 2 - e.y, container1.clientHeight / 2, 0);
+
+    uniformsBlob.u_mouse2.value.x = norm(e.x, container1.clientWidth, 0) + 0.5;
+    uniformsPano.u_mouse.value.x = uniformsBlob.u_mouse2.value.x - 0.5;
+    uniformsPano.u_mouse.value.y = uniformsBlob.u_mouse1.value.y
+  });
+
+
+
+  /*   CANVAS 2  Particles  */
+  let spriteSet = function () {
+    let h = window.innerHeight;
+
+    renderer2 = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer2.setSize(window.innerWidth, h);
+    renderer2.setPixelRatio(window.devicePixelRatio);
+    container2.appendChild(renderer2.domElement);
+    scene2 = new THREE.Scene();
+
+    //better to do this dynamically
+    camera2 = new THREE.PerspectiveCamera(75, window.innerWidth / h, 0.1, 1000);
+    camera2.position.set(0, 0, 40);
+    if (h <= 500) camera2.position.set(0, 0, 40);
+    else if (h > 500 && h <= 600) camera2.position.set(0, -3, 50);
+    else if (h > 600 && h <= 700) camera2.position.set(0, -12, 60);
+    else if (h > 700 && h <= 800) camera2.position.set(0, -18, 60);
+    else if (h > 800 && h <= 900) camera2.position.set(0, -25, 60);
+    else camera2.position.set(0, -28, 60);
+
+    for (var i = 0; i < 1000; i++) {
+      spriteMaterial = new THREE.SpriteMaterial({
+        transparent: true,
+        opacity: 0.8,
+      });
+      let sprite = new THREE.Sprite(spriteMaterial);
+
+      sprite.position.set(
+        THREE.MathUtils.randFloat(-40, 40),    //x
+        THREE.MathUtils.randFloat(-22, 17),    //y 
+        THREE.MathUtils.randFloat(-1, -6),     //z
+      );
+      sprite.scale.set(0.8, 0.8);
+
+      //can't do in shader because is difference renderer from pano
+      if (sprite.position.y > 12 && sprite.position.y <= 17) spriteMaterial.color.set("#F9BE6E");
+      else if (sprite.position.y > 8 && sprite.position.y <= 12) spriteMaterial.color.set("#F9DA8A");
+      else if (sprite.position.y > 3 && sprite.position.y <= 8) spriteMaterial.color.set("#E29A50");
+      else if (sprite.position.y > 0 && sprite.position.y <= 3) spriteMaterial.color.set("#7A5437");
+      else if (sprite.position.y > -11 && sprite.position.y <= 0) spriteMaterial.color.set("#1B5A7D");
+      else if (sprite.position.y > -16 && sprite.position.y <= -11) spriteMaterial.color.set("#038BA5");
+      else if (sprite.position.y >= -22 && sprite.position.y <= -16) spriteMaterial.color.set("#CCD79F");
+
+      sprite.velocity = {
+        x: (Math.random() - 0.5) / 6,
+        z: -0.1 - Math.random() / 4
+      }
+      sprites.add(sprite);
+    }
+    scene2.add(sprites);
+    spriteSet = function () { };
+  }
+
+
+
+  btn_Light.addEventListener("click", e => {
+    if (lightOFF) {
+      sprites.visible = true;
+      bg.style.webkitFilter = "brightness(25%)";
+      floor.style.webkitFilter = "brightness(25%)";
+      btn_Light.innerHTML = "Light  ON";
+      lightOFF = false;
+      btn_Light.style.color = "#3ef93e";
+      uniformsPano.u_lightOFF.value = false;
+      uniformsBlob.u_lightOFF.value = false;
+      spriteSet(); 
+      uniformsPano.u_panoScale.value.x = 80;   
+      uniformsPano.u_panoScale.value.y = 0;   
+
+    } else {
+      bg.style.webkitFilter = "brightness(100%)";
+      floor.style.webkitFilter = "brightness(100%)";
+      btn_Light.innerHTML = "Light OFF";
+      btn_Light.style.color = "#feaeae";
+      lightOFF = true;
+      uniformsBlob.u_lightOFF.value = true;
+      uniformsPano.u_lightOFF.value = true;
+      sprites.visible = false;                   
+      renderer2.clear();                         
+
+      if (uniformsBlob.u_effect_Switch.value == 0.0) {
+        uniformsBlob.u_effect_Switch.value = 0.08;  
+        uniformsPano.u_randomColor.value.x = THREE.MathUtils.randFloat(-0.9, -0.5);
+        uniformsPano.u_randomColor.value.y = uniformsPano.u_randomColor.value.x;
+        uniformsPano.u_randomColor.value.z = uniformsPano.u_randomColor.value.x;
+        uniformsPano.u_panoScale.value.x = 10;   
+        uniformsPano.u_panoScale.value.y = 5.4;  
+      }
+
+      else {
+        uniformsBlob.u_effect_Switch.value = 0.0;
+        uniformsPano.u_panoScale.value.x = 40;    
+        uniformsPano.u_panoScale.value.y = 0;  
+        uniformsPano.u_randomColor.value.x = 0.2;
+        uniformsPano.u_randomColor.value.y = 0.2;
+        uniformsPano.u_randomColor.value.z = 0.2;
+      }
+    }
+    document.querySelector(".pngLights").classList.toggle("active");   //sakriva jedno png svetlo sa lampe
+  });
+}
+
+
+function blobVertexShader() {
+  return `
+    varying vec3 v_normal;      
+    varying vec2 v_uv;
+
+    uniform float u_time;
+    uniform vec2 u_mouse1;
+    uniform bool u_lightOFF;
+    
+    /***   Classic 3D Perlin noise, periodic version by Stefan Gustavson  ***/
+    vec3 mod289(vec3 x){ return x - floor(x * (1.0 / 289.0)) * 289.0; }
+    vec4 mod289(vec4 x){ return x - floor(x * (1.0 / 289.0)) * 289.0;}
+    vec4 permute(vec4 x){ return mod289(((x*34.0)+1.0)*x); }
+    vec4 taylorInvSqrt(vec4 r){ return 1.79284291400159 - 0.85373472095314 * r;}
+    vec3 fade(vec3 t) { return t*t*t*(t*(t*6.0-15.0)+10.0);}
+    float pnoise(vec3 P, vec3 rep) {
+      vec3 Pi0 = mod(floor(P), rep); 
+      vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); 
+      Pi0 = mod289(Pi0);
+      Pi1 = mod289(Pi1);
+      vec3 Pf0 = fract(P);
+      vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
+      vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+      vec4 iy = vec4(Pi0.yy, Pi1.yy);
+      vec4 iz0 = Pi0.zzzz;
+      vec4 iz1 = Pi1.zzzz;
+    
+      vec4 ixy = permute(permute(ix) + iy);
+      vec4 ixy0 = permute(ixy + iz0);
+      vec4 ixy1 = permute(ixy + iz1);
+    
+      vec4 gx0 = ixy0 * (1.0 / 7.0);
+      vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
+      gx0 = fract(gx0);
+      vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+      vec4 sz0 = step(gz0, vec4(0.0));
+      gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+      gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+    
+      vec4 gx1 = ixy1 * (1.0 / 7.0);
+      vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
+      gx1 = fract(gx1);
+      vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+      vec4 sz1 = step(gz1, vec4(0.0));
+      gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+      gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+    
+      vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
+      vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
+      vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
+      vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
+      vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
+      vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
+      vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
+      vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
+    
+      vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+      g000 *= norm0.x;
+      g010 *= norm0.y;
+      g100 *= norm0.z;
+      g110 *= norm0.w;
+      vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+      g001 *= norm1.x;
+      g011 *= norm1.y;
+      g101 *= norm1.z;
+      g111 *= norm1.w;
+    
+      float n000 = dot(g000, Pf0);
+      float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+      float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+      float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+      float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+      float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+      float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+      float n111 = dot(g111, Pf1);
+    
+      vec3 fade_xyz = fade(Pf0);
+      vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+      vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+      float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
+      return 2.2 * n_xyz;
+    }
+
+    void main() {
+        v_normal = normalMatrix * normal;
+        v_uv = uv;
+
+        // Static Boolean Uniform in conditional 
+        if (u_lightOFF) {
+            float b = 6.0 * pnoise( (u_mouse1.y - u_mouse1.x)/10. * position + vec3( u_time*2.), vec3( 10.0 ) );    
+            vec3 newPosition = position + normal * b;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
+        } else {
+            gl_Position =  vec4( 0.0, 0.0, -50.0, 1.0 );   
+        }
+   }
+  `
+}
+
+function blobFragmentShader() {
+  return `  
+      varying vec3 v_normal;
+      varying vec2 v_uv;
+      
+      uniform sampler2D t_texture; 
+      uniform vec2 u_mouse2;       
+      uniform float u_time;          
+      uniform bool u_lightOFF;        
+      uniform float u_effect_Switch;  
+      uniform float u_textura_Zoom;   
+
+      float random( vec3 scale, float seed ){
+        return fract( sin( dot( gl_FragCoord.xyz + seed, scale ) ) * 43758.5453 + seed ) ;
+      }
+
+      struct DirectionalLight {
+        vec3 direction;    
+        vec3 color;
+      };
+      uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ];
+
+      void main() {
+          if (u_lightOFF) {
+              /*** Light ***/
+                vec3 lightFactor1 = vec3(0.0, 0.0, 0.0);
+                vec3 lightFactor2 = vec3(0.0, 0.0, 0.0);
+                vec3 lightFactor3 = vec3(0.0, 0.0, 0.0);
+      
+                vec3  ecFromLight1 = normalize( directionalLights[0].direction );            
+                float NdotL1 = max(0.1, dot(v_normal, ecFromLight1));    
+                lightFactor1 += NdotL1 * directionalLights[0].color; 
+      
+                vec3  ecFromLight2 = normalize( directionalLights[1].direction  );
+                float NdotL2 = max(0.1, dot(v_normal, ecFromLight2));
+                lightFactor2 += NdotL2 * directionalLights[1].color; 
+      
+                vec3  ecFromLight3 = normalize( directionalLights[2].direction  );
+                float NdotL3 = max(0.0, dot(v_normal, ecFromLight3));
+                lightFactor3 += NdotL3 * directionalLights[2].color; 
+      
+                vec3 directionalLights = lightFactor1 + lightFactor2 + lightFactor3;
+      
+              /*** texture Effect Distortion  ***/
+                float effect = random( vec3( 12.9898, 78.233, 151.7182), 0.0 ) * u_effect_Switch;
+                
+                vec4 color = texture2D( t_texture, (v_uv + effect  + u_time/3.) + sin(u_mouse2) * u_textura_Zoom );  
+                gl_FragColor = vec4( color.rgb  * directionalLights, 1.0 );
+
+          } else {
+                gl_FragColor = vec4( 0.0, 0.0, 0.0, 0.0 );               
+          }
+      }
+    `
+}
+
+
+
+
+function panoVertexShader() {
+  return `
+      varying vec2 v_uv;         
+      void main() {
+         v_uv = uv;
+         gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+      }
+  `
+}
+
+function panoFragmentShader() {
+  return `
+      uniform sampler2D t_texture;
+      uniform vec2 u_resolution;
+      uniform float u_time;
+      uniform vec2 u_mouse;
+      uniform bool u_lightOFF;     
+      uniform vec3 u_randomColor; 
+      uniform vec2 u_panoScale; 
+
+      varying vec2 v_uv;
+
+      // voronoise by inigo quilez - iq/2013
+      vec3 hash3( vec2 p ) {
+          vec3 q = vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) );
+          return fract(sin(q)*43758.5453 + u_time+ sin(u_mouse.y)/2.  );                                            
+      }
+      float iqnoise( in vec2 x, float u, float v ) {
+          vec2 p = floor(x);
+          vec2 f = fract(x);
+          float k = 1.0+63.0*pow(1.0-v,4.0);
+          float va = 0.0;
+          float wt = 0.0;
+          for (int j=-2; j<=2; j++) {
+              for (int i=-2; i<=2; i++) {
+                  vec2 g = vec2(float(i),float(j));
+                  vec3 o = hash3(p + g)*vec3(u,u,1.0);
+                  vec2 r = g - f + o.xy;
+                  float d = dot(r,r);
+                  float ww = pow( 1.0-smoothstep(0.0,1.414,sqrt(d)), k );
+                  va += o.z*ww;
+                  wt += ww;
+              }
+          }
+          return va/wt;
+      }
+  
+     void main() {
+          vec2 st = gl_FragCoord.xy/u_resolution.xy;
+          st.x *= u_resolution.x/u_resolution.y;
+   
+          st *= u_panoScale.x + 5.0 + sin(u_mouse.y)/2. * u_panoScale.y;
+
+          float n = iqnoise(st, u_mouse.x, 0.0);
+
+          if (u_lightOFF) {
+               gl_FragColor = vec4(vec3(n + u_randomColor.r,   n + u_randomColor.g,   n + u_randomColor.b) ,1.0);                          
+          } else {
+               vec4 textura = texture2D( t_texture, v_uv + vec2(u_mouse.x, 0.0)/10. );    
+               gl_FragColor = vec4( textura.rgb  *  vec3(n), 1.0);
+          }
+      }
+  `
+}
+
+
+
+function animate() {
+  uniformsBlob.u_time.value += 0.0015;
+  uniformsPano.u_time.value += 0.01;
+
+  for (var i = 0; i < sprites.children.length; i++) {
+    if (lightOFF) { break; }                    
+
+    let pos = sprites.children[i].position;
+    let velocity = sprites.children[i].velocity;
+
+    pos.x = pos.x - (velocity.x);
+    pos.z = pos.z - (velocity.z);
+
+    velocity.z = velocity.z - Math.sin(mouse.x) / 200;
+    pos.z <= -5  ?  sprites.children[i].visible = false  :  sprites.children[i].visible = true;
+
+    if (pos.z >= 61 || pos.z <= -20) {
+      pos.z = -5;
+      velocity.z = -0.1 - Math.random() / 4;
+    }
+
+    if (pos.x <= -40 || pos.x >= 40) velocity.x = velocity.x * -0.8;
+  }
+
+  renderer1.render(scene, camera);
+  if (renderer2 && !lightOFF) renderer2.render(scene2, camera2);
+  requestAnimationFrame(animate);
+}
+
+
+/*     Resize     */
+window.addEventListener("resize", () => {
+  clearTimeout(timeout_Debounce);
+  timeout_Debounce = setTimeout(onWindowResize, 20); 
+});
+function onWindowResize() {
+  camera.aspect = container1.clientWidth / container1.clientHeight;
+  camera.updateProjectionMatrix();
+  renderer1.setSize(container1.clientWidth, container1.clientHeight);
+
+  if (renderer2 && !lightOFF) {
+    let h = window.innerHeight;
+    if (h <= 500) camera2.position.set(0, 0, 40);
+    else if (h > 500 && h <= 600) camera2.position.set(0, -3, 50);
+    else if (h > 600 && h <= 700) camera2.position.set(0, -12, 60);
+    else if (h > 700 && h <= 800) camera2.position.set(0, -18, 60);
+    else if (h > 800 && h <= 900) camera2.position.set(0, -25, 60);
+    else camera2.position.set(0, -28, 60);
+
+    
+    camera2.aspect = window.innerWidth / h;
+    camera2.updateProjectionMatrix();
+    renderer2.setSize(window.innerWidth, h);
+  }
+  uniformsPano.u_resolution.value.x = renderer1.domElement.width;
+  uniformsPano.u_resolution.value.y = renderer1.domElement.height;
+}
+
+/*  Call for action  */
+setInterval(() => { btn_Light.classList.toggle("blink") }, 3000);
\ No newline at end of file
diff --git a/art-gallery/dist/style.css b/art-gallery/dist/style.css
new file mode 100644
index 0000000..b9ac6a3
--- /dev/null
+++ b/art-gallery/dist/style.css
@@ -0,0 +1,139 @@
+body {
+    height: 100vh;
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+    background-color: #79838b;
+    display: flex;
+    flex-flow: column;
+    position: relative;
+}
+
+.bg {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    max-height: 500px;
+    background-image: url("https://user-images.githubusercontent.com/26748614/96336781-733b6f80-1082-11eb-82a6-9b422f8f91c1.jpg");
+    background-size: contain;
+    background-repeat: repeat-x;
+    background-position: 50% 50%;
+}
+
+.pngLights {
+    position: absolute;
+    z-index: 8;
+    width: 100%;
+    height: 100vh;
+    max-height: 500px;
+    background-image: url("https://user-images.githubusercontent.com/26748614/96336791-759dc980-1082-11eb-85cb-c8761a9a5672.png"), url("https://user-images.githubusercontent.com/26748614/96336777-72a2d900-1082-11eb-9422-8f2ca0a4f302.png"), url("https://user-images.githubusercontent.com/26748614/96336777-72a2d900-1082-11eb-9422-8f2ca0a4f302.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: 50% -22px;
+}
+
+.pngLights.active {
+    background-image: url("https://user-images.githubusercontent.com/26748614/96336791-759dc980-1082-11eb-85cb-c8761a9a5672.png"), url("https://user-images.githubusercontent.com/26748614/96336777-72a2d900-1082-11eb-9422-8f2ca0a4f302.png"), url("");
+}
+
+.cc {
+    width: 100%;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#canvas_container1 {
+    max-height: 500px;
+    z-index: 1;
+}
+
+#canvas_container2 {
+    height: 100vh;
+    z-index: 2;
+}
+
+.floor {
+    flex: 1 1 auto;
+    background-image: url("https://user-images.githubusercontent.com/26748614/96336787-746c9c80-1082-11eb-941f-7846cba8223b.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 50% 0%;
+}
+
+
+/****   Buttons   *****/
+.buttons {
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+    max-height: 500px;
+}
+
+.btn {
+    position: absolute;
+    bottom: 5%;
+    z-index: 10;
+    border: 1px solid white;
+    border-radius: 5px;
+    padding: 3px 15px;
+    background-color: #1f1f1f;
+    color: #fdfcfc;
+    -webkit-font-smoothing: antialiased;
+    font-size: 18px;
+    font-family: 'Rajdhani', sans-serif;
+    letter-spacing: 1px;
+    cursor: pointer;
+    user-select: none;
+    box-shadow: 5px 3px 12px 0px rgba(0, 0, 0, 0.75);
+    transition: color .3s;
+}
+
+.btn_Works {
+    left: 5%;
+    text-decoration: none;
+}
+
+.btn_Light {
+    left: 50%;
+    transform: translateX(-50%);
+    transform-origin: 25% 50%;
+    color: #feaeae;
+}
+
+.btn_Works:hover {
+    background-color: #3d3d3d;
+    color: #6286f4;
+}
+
+.btn_Light:hover {
+    background-color: #3d3d3d;
+    color: #da1616;
+}
+
+.btn_Light.blink {
+    animation: blinkAni 500ms;
+}
+
+@keyframes blinkAni {
+    0% {
+        background: #f5f6e4;
+        transform: scale(1) translateX(-50%);
+    }
+    50% {
+        transform: scale(1.2) translateX(-50%);
+    }
+    100% {
+        transform: scale(1) translateX(-50%);
+    }
+}
+
+@media only screen and (max-height: 350px) {
+    .btn {
+        font-size: 4.5vh;
+        bottom: 2%;
+        box-shadow: none;
+        color: #fdfcfc;
+    }
+}
\ No newline at end of file
diff --git a/art-gallery/license.txt b/art-gallery/license.txt
new file mode 100644
index 0000000..7832fe0
--- /dev/null
+++ b/art-gallery/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by isladjan (https://codepen.io/isladjan/pen/BazjqKe)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/art-gallery/src/index.html b/art-gallery/src/index.html
new file mode 100644
index 0000000..230219f
--- /dev/null
+++ b/art-gallery/src/index.html
@@ -0,0 +1,12 @@
+<div class="cc" id="canvas_container1"></div> 
+<div class="cc" id="canvas_container2"></div> 
+
+<div class="pngLights"></div> 
+<div class="bg"></div>  
+
+<div class="buttons">   
+    <div class="btn btn_Light">Light OFF</div>
+    <a href="https://codepen.io/collection/DxkYzq" target="_blank" class="btn btn_Works">My Gallery</a>
+</div>
+
+<div class="floor"></div>  
\ No newline at end of file
diff --git a/art-gallery/src/script.js b/art-gallery/src/script.js
new file mode 100644
index 0000000..e7395c5
--- /dev/null
+++ b/art-gallery/src/script.js
@@ -0,0 +1,516 @@
+let camera,
+  renderer1,
+  scene,
+  uniformsBlob,
+  uniformsPano,
+  container1 = document.getElementById("canvas_container1"),
+  bg = document.querySelector(".bg"),
+  floor = document.querySelector(".floor"),
+  btn_Light = document.querySelector(".btn_Light"),
+  timeout_Debounce,
+  lightOFF = true,
+  renderer2,
+  camera2,
+  scene2,
+  sprites = new THREE.Group(),
+  container2 = document.getElementById("canvas_container2"),
+  mouse = { x: 1 }
+
+
+init();
+animate();
+
+
+function init() {
+  renderer1 = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+  renderer1.setSize(container1.clientWidth, container1.clientHeight);
+  renderer1.setPixelRatio(window.devicePixelRatio);
+  container1.appendChild(renderer1.domElement);
+
+  scene = new THREE.Scene();
+  camera = new THREE.PerspectiveCamera(75, container1.clientWidth / container1.clientHeight, 0.1, 1000);
+  camera.position.set(0, 0, 40);
+
+  const light1 = new THREE.DirectionalLight("#ffffff", 0.7);
+  light1.position.set(-10, 30, 20);
+  scene.add(light1);
+
+  const light2 = new THREE.DirectionalLight("#ffffff", 0.7);
+  light2.position.set(10, 30, 20);
+  scene.add(light2);
+
+  const light3 = new THREE.DirectionalLight("#fcfcfc", 0.3);
+  light3.position.set(0, -20, 10);
+  scene.add(light3);
+
+  const textureLoader = new THREE.TextureLoader();
+  const blobTexture = textureLoader.load("https://res.cloudinary.com/di1ldxpot/image/upload/v1602936154/Modern_Gallery/blob1_ls1rst.jpg");
+  const panoTexture = textureLoader.load("https://res.cloudinary.com/di1ldxpot/image/upload/v1602936153/Modern_Gallery/pano_ex9djn.jpg");
+
+
+
+  /***   Blob   ***/
+  let blobGeometry = new THREE.IcosahedronBufferGeometry(10, 50);
+
+  uniformsBlob = THREE.UniformsUtils.merge([uniformsBlob, THREE.UniformsLib["lights"]]);
+  Object.assign(uniformsBlob, {
+    t_texture: { type: "t", value: blobTexture },
+    u_time: { type: "f", value: 0.0 },
+    u_mouse1: { type: "v2", value: new THREE.Vector2(1, 1) },
+    u_mouse2: { type: "v2", value: new THREE.Vector2(20, 20) },
+    u_lightOFF: { type: "b", value: lightOFF },
+    u_effect_Switch: { type: "f", value: 0.0 },
+    u_textura_Zoom: { type: "f", value: 1.0 },
+  });
+
+  uniformsBlob.t_texture.value.anisotropy = 16
+  uniformsBlob.t_texture.value.wrapS = THREE.MirroredRepeatWrapping;
+  uniformsBlob.t_texture.value.wrapT = THREE.ClampToEdgeWrapping;
+
+  let shaderMaterialBlob = new THREE.ShaderMaterial({
+    uniforms: uniformsBlob,
+    fragmentShader: blobFragmentShader(),
+    vertexShader: blobVertexShader(),
+    lights: true,
+  });
+  blob = new THREE.Mesh(blobGeometry, shaderMaterialBlob);
+  blob.position.set(2, -2.2, 10);
+  scene.add(blob);
+
+
+
+  /***     Pano     ****/
+  let panoGeometry = new THREE.PlaneBufferGeometry(54.5, 27.3);
+
+  uniformsPano = {
+    t_texture: { type: "t", value: panoTexture },
+    u_resolution: { type: "v2", value: new THREE.Vector2() },
+    u_time: { type: 'f', value: 0 },
+    u_mouse: { type: "v2", value: new THREE.Vector2() },
+    u_lightOFF: { type: "b", value: lightOFF },
+    u_randomColor: { type: "v3", value: new THREE.Vector3(0.2, 0.2, 0.2) },
+    u_panoScale: { type: "v2", value: new THREE.Vector2(10.1, 0.2) },
+  };
+
+  uniformsPano.u_resolution.value.x = renderer1.domElement.width;
+  uniformsPano.u_resolution.value.y = renderer1.domElement.height;
+  
+  uniformsPano.t_texture.value.wrapS = THREE.ClampToEdgeWrapping;
+  uniformsPano.t_texture.value.wrapT = THREE.ClampToEdgeWrapping;
+
+  let shaderMaterialPano = new THREE.ShaderMaterial({
+    uniforms: uniformsPano,
+    fragmentShader: panoFragmentShader(),
+    vertexShader: panoVertexShader(),
+  });
+  pano = new THREE.Mesh(panoGeometry, shaderMaterialPano);
+  pano.position.set(0.5, -1.6, 10);
+  scene.add(pano);
+
+
+  /*   Mouse Event Handler  */
+  function norm(val, max, min) { return (val - min) / (max - min); }
+  window.addEventListener("mousemove", (e) => {
+    mouse.x = e.x;
+
+    let x = norm(-(container1.clientWidth / 2 - e.x), container1.clientWidth / 2, 0) + 0.999;
+    if (x > 0) uniformsBlob.u_mouse1.value.x = x - 1;
+    else uniformsBlob.u_mouse1.value.x = x + 1;
+
+    uniformsBlob.u_mouse1.value.y =  norm(container1.clientHeight / 2 - e.y, container1.clientHeight / 2, 0);
+
+    uniformsBlob.u_mouse2.value.x = norm(e.x, container1.clientWidth, 0) + 0.5;
+    uniformsPano.u_mouse.value.x = uniformsBlob.u_mouse2.value.x - 0.5;
+    uniformsPano.u_mouse.value.y = uniformsBlob.u_mouse1.value.y
+  });
+
+
+
+  /*   CANVAS 2  Particles  */
+  let spriteSet = function () {
+    let h = window.innerHeight;
+
+    renderer2 = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer2.setSize(window.innerWidth, h);
+    renderer2.setPixelRatio(window.devicePixelRatio);
+    container2.appendChild(renderer2.domElement);
+    scene2 = new THREE.Scene();
+
+    //better to do this dynamically
+    camera2 = new THREE.PerspectiveCamera(75, window.innerWidth / h, 0.1, 1000);
+    camera2.position.set(0, 0, 40);
+    if (h <= 500) camera2.position.set(0, 0, 40);
+    else if (h > 500 && h <= 600) camera2.position.set(0, -3, 50);
+    else if (h > 600 && h <= 700) camera2.position.set(0, -12, 60);
+    else if (h > 700 && h <= 800) camera2.position.set(0, -18, 60);
+    else if (h > 800 && h <= 900) camera2.position.set(0, -25, 60);
+    else camera2.position.set(0, -28, 60);
+
+    for (var i = 0; i < 1000; i++) {
+      spriteMaterial = new THREE.SpriteMaterial({
+        transparent: true,
+        opacity: 0.8,
+      });
+      let sprite = new THREE.Sprite(spriteMaterial);
+
+      sprite.position.set(
+        THREE.MathUtils.randFloat(-40, 40),    //x
+        THREE.MathUtils.randFloat(-22, 17),    //y 
+        THREE.MathUtils.randFloat(-1, -6),     //z
+      );
+      sprite.scale.set(0.8, 0.8);
+
+      //can't do in shader because is difference renderer from pano
+      if (sprite.position.y > 12 && sprite.position.y <= 17) spriteMaterial.color.set("#F9BE6E");
+      else if (sprite.position.y > 8 && sprite.position.y <= 12) spriteMaterial.color.set("#F9DA8A");
+      else if (sprite.position.y > 3 && sprite.position.y <= 8) spriteMaterial.color.set("#E29A50");
+      else if (sprite.position.y > 0 && sprite.position.y <= 3) spriteMaterial.color.set("#7A5437");
+      else if (sprite.position.y > -11 && sprite.position.y <= 0) spriteMaterial.color.set("#1B5A7D");
+      else if (sprite.position.y > -16 && sprite.position.y <= -11) spriteMaterial.color.set("#038BA5");
+      else if (sprite.position.y >= -22 && sprite.position.y <= -16) spriteMaterial.color.set("#CCD79F");
+
+      sprite.velocity = {
+        x: (Math.random() - 0.5) / 6,
+        z: -0.1 - Math.random() / 4
+      }
+      sprites.add(sprite);
+    }
+    scene2.add(sprites);
+    spriteSet = function () { };
+  }
+
+
+
+  btn_Light.addEventListener("click", e => {
+    if (lightOFF) {
+      sprites.visible = true;
+      bg.style.webkitFilter = "brightness(25%)";
+      floor.style.webkitFilter = "brightness(25%)";
+      btn_Light.innerHTML = "Light  ON";
+      lightOFF = false;
+      btn_Light.style.color = "#3ef93e";
+      uniformsPano.u_lightOFF.value = false;
+      uniformsBlob.u_lightOFF.value = false;
+      spriteSet(); 
+      uniformsPano.u_panoScale.value.x = 80;   
+      uniformsPano.u_panoScale.value.y = 0;   
+
+    } else {
+      bg.style.webkitFilter = "brightness(100%)";
+      floor.style.webkitFilter = "brightness(100%)";
+      btn_Light.innerHTML = "Light OFF";
+      btn_Light.style.color = "#feaeae";
+      lightOFF = true;
+      uniformsBlob.u_lightOFF.value = true;
+      uniformsPano.u_lightOFF.value = true;
+      sprites.visible = false;                   
+      renderer2.clear();                         
+
+      if (uniformsBlob.u_effect_Switch.value == 0.0) {
+        uniformsBlob.u_effect_Switch.value = 0.08;  
+        uniformsPano.u_randomColor.value.x = THREE.MathUtils.randFloat(-0.9, -0.5);
+        uniformsPano.u_randomColor.value.y = uniformsPano.u_randomColor.value.x;
+        uniformsPano.u_randomColor.value.z = uniformsPano.u_randomColor.value.x;
+        uniformsPano.u_panoScale.value.x = 10;   
+        uniformsPano.u_panoScale.value.y = 5.4;  
+      }
+
+      else {
+        uniformsBlob.u_effect_Switch.value = 0.0;
+        uniformsPano.u_panoScale.value.x = 40;    
+        uniformsPano.u_panoScale.value.y = 0;  
+        uniformsPano.u_randomColor.value.x = 0.2;
+        uniformsPano.u_randomColor.value.y = 0.2;
+        uniformsPano.u_randomColor.value.z = 0.2;
+      }
+    }
+    document.querySelector(".pngLights").classList.toggle("active");   //sakriva jedno png svetlo sa lampe
+  });
+}
+
+
+function blobVertexShader() {
+  return `
+    varying vec3 v_normal;      
+    varying vec2 v_uv;
+
+    uniform float u_time;
+    uniform vec2 u_mouse1;
+    uniform bool u_lightOFF;
+    
+    /***   Classic 3D Perlin noise, periodic version by Stefan Gustavson  ***/
+    vec3 mod289(vec3 x){ return x - floor(x * (1.0 / 289.0)) * 289.0; }
+    vec4 mod289(vec4 x){ return x - floor(x * (1.0 / 289.0)) * 289.0;}
+    vec4 permute(vec4 x){ return mod289(((x*34.0)+1.0)*x); }
+    vec4 taylorInvSqrt(vec4 r){ return 1.79284291400159 - 0.85373472095314 * r;}
+    vec3 fade(vec3 t) { return t*t*t*(t*(t*6.0-15.0)+10.0);}
+    float pnoise(vec3 P, vec3 rep) {
+      vec3 Pi0 = mod(floor(P), rep); 
+      vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); 
+      Pi0 = mod289(Pi0);
+      Pi1 = mod289(Pi1);
+      vec3 Pf0 = fract(P);
+      vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
+      vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+      vec4 iy = vec4(Pi0.yy, Pi1.yy);
+      vec4 iz0 = Pi0.zzzz;
+      vec4 iz1 = Pi1.zzzz;
+    
+      vec4 ixy = permute(permute(ix) + iy);
+      vec4 ixy0 = permute(ixy + iz0);
+      vec4 ixy1 = permute(ixy + iz1);
+    
+      vec4 gx0 = ixy0 * (1.0 / 7.0);
+      vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
+      gx0 = fract(gx0);
+      vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+      vec4 sz0 = step(gz0, vec4(0.0));
+      gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+      gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+    
+      vec4 gx1 = ixy1 * (1.0 / 7.0);
+      vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
+      gx1 = fract(gx1);
+      vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+      vec4 sz1 = step(gz1, vec4(0.0));
+      gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+      gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+    
+      vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
+      vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
+      vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
+      vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
+      vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
+      vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
+      vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
+      vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
+    
+      vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+      g000 *= norm0.x;
+      g010 *= norm0.y;
+      g100 *= norm0.z;
+      g110 *= norm0.w;
+      vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+      g001 *= norm1.x;
+      g011 *= norm1.y;
+      g101 *= norm1.z;
+      g111 *= norm1.w;
+    
+      float n000 = dot(g000, Pf0);
+      float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+      float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+      float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+      float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+      float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+      float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+      float n111 = dot(g111, Pf1);
+    
+      vec3 fade_xyz = fade(Pf0);
+      vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+      vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+      float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
+      return 2.2 * n_xyz;
+    }
+
+    void main() {
+        v_normal = normalMatrix * normal;
+        v_uv = uv;
+
+        // Static Boolean Uniform in conditional 
+        if (u_lightOFF) {
+            float b = 6.0 * pnoise( (u_mouse1.y - u_mouse1.x)/10. * position + vec3( u_time*2.), vec3( 10.0 ) );    
+            vec3 newPosition = position + normal * b;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
+        } else {
+            gl_Position =  vec4( 0.0, 0.0, -50.0, 1.0 );   
+        }
+   }
+  `
+}
+
+function blobFragmentShader() {
+  return `  
+      varying vec3 v_normal;
+      varying vec2 v_uv;
+      
+      uniform sampler2D t_texture; 
+      uniform vec2 u_mouse2;       
+      uniform float u_time;          
+      uniform bool u_lightOFF;        
+      uniform float u_effect_Switch;  
+      uniform float u_textura_Zoom;   
+
+      float random( vec3 scale, float seed ){
+        return fract( sin( dot( gl_FragCoord.xyz + seed, scale ) ) * 43758.5453 + seed ) ;
+      }
+
+      struct DirectionalLight {
+        vec3 direction;    
+        vec3 color;
+      };
+      uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ];
+
+      void main() {
+          if (u_lightOFF) {
+              /*** Light ***/
+                vec3 lightFactor1 = vec3(0.0, 0.0, 0.0);
+                vec3 lightFactor2 = vec3(0.0, 0.0, 0.0);
+                vec3 lightFactor3 = vec3(0.0, 0.0, 0.0);
+      
+                vec3  ecFromLight1 = normalize( directionalLights[0].direction );            
+                float NdotL1 = max(0.1, dot(v_normal, ecFromLight1));    
+                lightFactor1 += NdotL1 * directionalLights[0].color; 
+      
+                vec3  ecFromLight2 = normalize( directionalLights[1].direction  );
+                float NdotL2 = max(0.1, dot(v_normal, ecFromLight2));
+                lightFactor2 += NdotL2 * directionalLights[1].color; 
+      
+                vec3  ecFromLight3 = normalize( directionalLights[2].direction  );
+                float NdotL3 = max(0.0, dot(v_normal, ecFromLight3));
+                lightFactor3 += NdotL3 * directionalLights[2].color; 
+      
+                vec3 directionalLights = lightFactor1 + lightFactor2 + lightFactor3;
+      
+              /*** texture Effect Distortion  ***/
+                float effect = random( vec3( 12.9898, 78.233, 151.7182), 0.0 ) * u_effect_Switch;
+                
+                vec4 color = texture2D( t_texture, (v_uv + effect  + u_time/3.) + sin(u_mouse2) * u_textura_Zoom );  
+                gl_FragColor = vec4( color.rgb  * directionalLights, 1.0 );
+
+          } else {
+                gl_FragColor = vec4( 0.0, 0.0, 0.0, 0.0 );               
+          }
+      }
+    `
+}
+
+
+
+
+function panoVertexShader() {
+  return `
+      varying vec2 v_uv;         
+      void main() {
+         v_uv = uv;
+         gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+      }
+  `
+}
+
+function panoFragmentShader() {
+  return `
+      uniform sampler2D t_texture;
+      uniform vec2 u_resolution;
+      uniform float u_time;
+      uniform vec2 u_mouse;
+      uniform bool u_lightOFF;     
+      uniform vec3 u_randomColor; 
+      uniform vec2 u_panoScale; 
+
+      varying vec2 v_uv;
+
+      // voronoise by inigo quilez - iq/2013
+      vec3 hash3( vec2 p ) {
+          vec3 q = vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) );
+          return fract(sin(q)*43758.5453 + u_time+ sin(u_mouse.y)/2.  );                                            
+      }
+      float iqnoise( in vec2 x, float u, float v ) {
+          vec2 p = floor(x);
+          vec2 f = fract(x);
+          float k = 1.0+63.0*pow(1.0-v,4.0);
+          float va = 0.0;
+          float wt = 0.0;
+          for (int j=-2; j<=2; j++) {
+              for (int i=-2; i<=2; i++) {
+                  vec2 g = vec2(float(i),float(j));
+                  vec3 o = hash3(p + g)*vec3(u,u,1.0);
+                  vec2 r = g - f + o.xy;
+                  float d = dot(r,r);
+                  float ww = pow( 1.0-smoothstep(0.0,1.414,sqrt(d)), k );
+                  va += o.z*ww;
+                  wt += ww;
+              }
+          }
+          return va/wt;
+      }
+  
+     void main() {
+          vec2 st = gl_FragCoord.xy/u_resolution.xy;
+          st.x *= u_resolution.x/u_resolution.y;
+   
+          st *= u_panoScale.x + 5.0 + sin(u_mouse.y)/2. * u_panoScale.y;
+
+          float n = iqnoise(st, u_mouse.x, 0.0);
+
+          if (u_lightOFF) {
+               gl_FragColor = vec4(vec3(n + u_randomColor.r,   n + u_randomColor.g,   n + u_randomColor.b) ,1.0);                          
+          } else {
+               vec4 textura = texture2D( t_texture, v_uv + vec2(u_mouse.x, 0.0)/10. );    
+               gl_FragColor = vec4( textura.rgb  *  vec3(n), 1.0);
+          }
+      }
+  `
+}
+
+
+
+function animate() {
+  uniformsBlob.u_time.value += 0.0015;
+  uniformsPano.u_time.value += 0.01;
+
+  for (var i = 0; i < sprites.children.length; i++) {
+    if (lightOFF) { break; }                    
+
+    let pos = sprites.children[i].position;
+    let velocity = sprites.children[i].velocity;
+
+    pos.x = pos.x - (velocity.x);
+    pos.z = pos.z - (velocity.z);
+
+    velocity.z = velocity.z - Math.sin(mouse.x) / 200;
+    pos.z <= -5  ?  sprites.children[i].visible = false  :  sprites.children[i].visible = true;
+
+    if (pos.z >= 61 || pos.z <= -20) {
+      pos.z = -5;
+      velocity.z = -0.1 - Math.random() / 4;
+    }
+
+    if (pos.x <= -40 || pos.x >= 40) velocity.x = velocity.x * -0.8;
+  }
+
+  renderer1.render(scene, camera);
+  if (renderer2 && !lightOFF) renderer2.render(scene2, camera2);
+  requestAnimationFrame(animate);
+}
+
+
+/*     Resize     */
+window.addEventListener("resize", () => {
+  clearTimeout(timeout_Debounce);
+  timeout_Debounce = setTimeout(onWindowResize, 20); 
+});
+function onWindowResize() {
+  camera.aspect = container1.clientWidth / container1.clientHeight;
+  camera.updateProjectionMatrix();
+  renderer1.setSize(container1.clientWidth, container1.clientHeight);
+
+  if (renderer2 && !lightOFF) {
+    let h = window.innerHeight;
+    if (h <= 500) camera2.position.set(0, 0, 40);
+    else if (h > 500 && h <= 600) camera2.position.set(0, -3, 50);
+    else if (h > 600 && h <= 700) camera2.position.set(0, -12, 60);
+    else if (h > 700 && h <= 800) camera2.position.set(0, -18, 60);
+    else if (h > 800 && h <= 900) camera2.position.set(0, -25, 60);
+    else camera2.position.set(0, -28, 60);
+
+    
+    camera2.aspect = window.innerWidth / h;
+    camera2.updateProjectionMatrix();
+    renderer2.setSize(window.innerWidth, h);
+  }
+  uniformsPano.u_resolution.value.x = renderer1.domElement.width;
+  uniformsPano.u_resolution.value.y = renderer1.domElement.height;
+}
+
+/*  Call for action  */
+setInterval(() => { btn_Light.classList.toggle("blink") }, 3000);
\ No newline at end of file
diff --git a/art-gallery/src/style.css b/art-gallery/src/style.css
new file mode 100644
index 0000000..b9ac6a3
--- /dev/null
+++ b/art-gallery/src/style.css
@@ -0,0 +1,139 @@
+body {
+    height: 100vh;
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+    background-color: #79838b;
+    display: flex;
+    flex-flow: column;
+    position: relative;
+}
+
+.bg {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    max-height: 500px;
+    background-image: url("https://user-images.githubusercontent.com/26748614/96336781-733b6f80-1082-11eb-82a6-9b422f8f91c1.jpg");
+    background-size: contain;
+    background-repeat: repeat-x;
+    background-position: 50% 50%;
+}
+
+.pngLights {
+    position: absolute;
+    z-index: 8;
+    width: 100%;
+    height: 100vh;
+    max-height: 500px;
+    background-image: url("https://user-images.githubusercontent.com/26748614/96336791-759dc980-1082-11eb-85cb-c8761a9a5672.png"), url("https://user-images.githubusercontent.com/26748614/96336777-72a2d900-1082-11eb-9422-8f2ca0a4f302.png"), url("https://user-images.githubusercontent.com/26748614/96336777-72a2d900-1082-11eb-9422-8f2ca0a4f302.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: 50% -22px;
+}
+
+.pngLights.active {
+    background-image: url("https://user-images.githubusercontent.com/26748614/96336791-759dc980-1082-11eb-85cb-c8761a9a5672.png"), url("https://user-images.githubusercontent.com/26748614/96336777-72a2d900-1082-11eb-9422-8f2ca0a4f302.png"), url("");
+}
+
+.cc {
+    width: 100%;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#canvas_container1 {
+    max-height: 500px;
+    z-index: 1;
+}
+
+#canvas_container2 {
+    height: 100vh;
+    z-index: 2;
+}
+
+.floor {
+    flex: 1 1 auto;
+    background-image: url("https://user-images.githubusercontent.com/26748614/96336787-746c9c80-1082-11eb-941f-7846cba8223b.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 50% 0%;
+}
+
+
+/****   Buttons   *****/
+.buttons {
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+    max-height: 500px;
+}
+
+.btn {
+    position: absolute;
+    bottom: 5%;
+    z-index: 10;
+    border: 1px solid white;
+    border-radius: 5px;
+    padding: 3px 15px;
+    background-color: #1f1f1f;
+    color: #fdfcfc;
+    -webkit-font-smoothing: antialiased;
+    font-size: 18px;
+    font-family: 'Rajdhani', sans-serif;
+    letter-spacing: 1px;
+    cursor: pointer;
+    user-select: none;
+    box-shadow: 5px 3px 12px 0px rgba(0, 0, 0, 0.75);
+    transition: color .3s;
+}
+
+.btn_Works {
+    left: 5%;
+    text-decoration: none;
+}
+
+.btn_Light {
+    left: 50%;
+    transform: translateX(-50%);
+    transform-origin: 25% 50%;
+    color: #feaeae;
+}
+
+.btn_Works:hover {
+    background-color: #3d3d3d;
+    color: #6286f4;
+}
+
+.btn_Light:hover {
+    background-color: #3d3d3d;
+    color: #da1616;
+}
+
+.btn_Light.blink {
+    animation: blinkAni 500ms;
+}
+
+@keyframes blinkAni {
+    0% {
+        background: #f5f6e4;
+        transform: scale(1) translateX(-50%);
+    }
+    50% {
+        transform: scale(1.2) translateX(-50%);
+    }
+    100% {
+        transform: scale(1) translateX(-50%);
+    }
+}
+
+@media only screen and (max-height: 350px) {
+    .btn {
+        font-size: 4.5vh;
+        bottom: 2%;
+        box-shadow: none;
+        color: #fdfcfc;
+    }
+}
\ No newline at end of file
diff --git a/art-of-noise-29/README.markdown b/art-of-noise-29/README.markdown
new file mode 100644
index 0000000..da561a7
--- /dev/null
+++ b/art-of-noise-29/README.markdown
@@ -0,0 +1,5 @@
+# Art of Noise #29
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Tibixx/pen/jOBZoKV](https://codepen.io/Tibixx/pen/jOBZoKV).
+
+
diff --git a/art-of-noise-29/dist/index.html b/art-of-noise-29/dist/index.html
new file mode 100644
index 0000000..e007dfe
--- /dev/null
+++ b/art-of-noise-29/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Art of Noise #29</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="aon">
+  <a href="https://codepen.io/collection/DpwaJW/" target="_blank">
+    <span>View Collection</span>
+    <span>Art of Noise</span>
+  </a>
+</div>
+<!-- partial -->
+  <script src='https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js'></script>
+<script src='https://codepen.io/Tibixx/pen/BbBxRG.js'></script>
+<script src='https://unpkg.com/three@0.85.0/examples/js/controls/OrbitControls.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/art-of-noise-29/dist/script.js b/art-of-noise-29/dist/script.js
new file mode 100644
index 0000000..26ea687
--- /dev/null
+++ b/art-of-noise-29/dist/script.js
@@ -0,0 +1,149 @@
+/* === Setup === */
+var scene, camera, renderer, controls;
+config = {
+  planeSegments: 100,
+  xNoiseScale: 40,
+  yNoiseScale: 40,
+  zNoiseScale: 20,
+  noiseSpeed: 0.001,
+  nt1: Math.random(),
+  nt2: Math.random(),
+  nt3: Math.random(),
+  col1: "255, 0, 0",
+  col2: "0, 255, 0",
+  col3: "0, 0, 255"
+}
+
+/* Dat Gui */
+var gui = new dat.GUI();
+gui.add(config, "xNoiseScale", 10, 100).step(1).name("Noise X");
+gui.add(config, "yNoiseScale", 10, 100).step(1).name("Noise Y");
+gui.add(config, "zNoiseScale", 10, 100).step(1).name("Noise Z");
+gui.add(config, "noiseSpeed", 0.00001, 0.01).name("Noise Speed");
+
+/* === Events === */
+window.onresize = function(){
+  var w = window.innerWidth, h = window.innerHeight;
+  camera.aspect = w / h;
+  camera.updateProjectionMatrix();
+  renderer.setSize( w, h );
+}
+
+/* === Scene === */
+var scene = new THREE.Scene();
+
+/* === Camera === */
+var camera = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 1000 );
+camera.position.y = -config.planeSegments/2;
+camera.position.z = config.planeSegments/2;
+camera.lookAt(0,0,0);
+
+/* === Renderer === */
+var renderer = new THREE.WebGLRenderer({antialias:true});
+renderer.setClearColor("#000000");
+renderer.setSize( window.innerWidth, window.innerHeight );
+document.body.appendChild( renderer.domElement );
+
+/* Orbit Controls */
+oControls = new THREE.OrbitControls(camera, renderer.domElement);
+oControls.update();
+
+/* === Stars === */
+var starsGeometry = new THREE.Geometry();
+for(i=0; i<3000; i++){
+  var star = new THREE.Vector3();
+  star.x = THREE.Math.randFloatSpread(2000);
+  star.y = THREE.Math.randFloatSpread(2000);
+  star.z = THREE.Math.randFloatSpread(2000);
+  starsGeometry.vertices.push(star);
+}
+var starsMaterial = new THREE.PointsMaterial({color: 0xFFFFFF});
+var starField = new THREE.Points(starsGeometry,starsMaterial);
+scene.add(starField);
+
+
+/* === Sprites === */
+function generateSprite(col) {
+  var canvas = document.createElement("canvas");
+  canvas.width = 16;
+  canvas.height = 16;
+
+  var context = canvas.getContext("2d");
+  var gradient = context.createRadialGradient(
+    canvas.width / 2,
+    canvas.height / 2,
+    0,
+    canvas.width / 2,
+    canvas.height / 2,
+    canvas.width / 2
+  );
+  gradient.addColorStop(0.0, "rgba("+col+", 1)");
+  gradient.addColorStop(0.9, "rgba("+col+", 0)");
+  gradient.addColorStop(1.0, "rgba("+col+", 0)");
+
+  context.fillStyle = gradient;
+  context.fillRect(0, 0, canvas.width, canvas.height);
+
+  var texture = new THREE.Texture(canvas);
+  texture.needsUpdate = true;
+  return texture;
+}
+
+/* === Particle System === */
+function createParticleSystem(geom, col) {
+  var material = new THREE.ParticleBasicMaterial({
+    color: 0xffffff,
+    size: 3,
+    transparent: true,
+    blending: THREE.AdditiveBlending, // Time to Shine!
+    map: generateSprite(col)
+  });
+
+  var system = new THREE.ParticleSystem(geom, material);
+  system.sortParticles = true;
+  return system;
+}
+
+/* === Meshes === */
+geo1 = new THREE.PlaneBufferGeometry(config.planeSegments,config.planeSegments,config.planeSegments/2, config.planeSegments/2);
+plane1 = createParticleSystem(geo1, config.col1);
+scene.add(plane1);
+
+geo2 = new THREE.PlaneBufferGeometry(config.planeSegments,config.planeSegments,config.planeSegments/2, config.planeSegments/2);
+plane2 = createParticleSystem(geo2, config.col2);
+scene.add(plane2);
+
+geo3 = new THREE.PlaneBufferGeometry(config.planeSegments,config.planeSegments,config.planeSegments/2, config.planeSegments/2);
+plane3 = createParticleSystem(geo3, config.col3);
+scene.add(plane3);
+
+/* === Lights === */
+ambientLight = new THREE.AmbientLight("#333"),
+scene.add(ambientLight);
+
+/* === Animate Points === */
+function animate() {
+  gp1 = plane1.geometry.attributes.position;
+  gp2 = plane2.geometry.attributes.position;
+  gp3 = plane3.geometry.attributes.position;
+  config.nt1 += config.noiseSpeed;
+  config.nt2 += config.noiseSpeed;
+  config.nt3 += config.noiseSpeed;
+  for (i=0; i<gp1.array.length; i+=3) {
+    gp1.array[i+2] = noise.simplex3(gp1.array[i]/config.xNoiseScale, gp1.array[i+1]/config.yNoiseScale, config.nt1)*config.zNoiseScale;
+    gp2.array[i+2] = noise.simplex3(gp2.array[i]/config.xNoiseScale, gp2.array[i+1]/config.yNoiseScale, config.nt2)*config.zNoiseScale;
+    gp3.array[i+2] = noise.simplex3(gp3.array[i]/config.xNoiseScale, gp3.array[i+1]/config.yNoiseScale, config.nt3)*config.zNoiseScale;
+  }
+  gp1.needsUpdate = true;
+  gp2.needsUpdate = true;
+  gp3.needsUpdate = true;
+}
+
+/* === Render === */
+var render = function () {
+  requestAnimationFrame( render );
+  renderer.render(scene, camera);
+  animate();
+  oControls.update();
+};
+render();
\ No newline at end of file
diff --git a/art-of-noise-29/dist/style.css b/art-of-noise-29/dist/style.css
new file mode 100644
index 0000000..c6bc635
--- /dev/null
+++ b/art-of-noise-29/dist/style.css
@@ -0,0 +1,97 @@
+@import url("https://fonts.googleapis.com/css?family=Cinzel|Cinzel+Decorative");
+html, body {
+  overflow: hidden;
+  background: #000;
+  padding: 0px;
+  margin: 0px;
+}
+
+.aon {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+.aon a {
+  position: relative;
+  display: inline-block;
+  outline: none;
+  margin: 0 0px;
+  padding: 15px 10px;
+  color: #fff;
+  text-decoration: none;
+  font-family: Cinzel;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 400;
+  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
+  font-size: 1em;
+}
+.aon a:focus::before, .aon a:hover::before {
+  height: 6px;
+}
+.aon a:hover::before, .aon a:hover::after, .aon a:focus::before, .aon a:focus::after {
+  opacity: 1;
+  -webkit-transform: translateY(0px);
+  -moz-transform: translateY(0px);
+  transform: translateY(0px);
+}
+.aon a:hover span:last-child, .aon a:focus span:last-child {
+  opacity: 1;
+  -webkit-transform: translateY(0%);
+  -moz-transform: translateY(0%);
+  transform: translateY(0%);
+}
+.aon a span {
+  color: #fff !important;
+}
+.aon a span:first-child {
+  z-index: 2;
+  display: block;
+  font-weight: 300;
+}
+.aon a span:last-child {
+  z-index: 1;
+  display: block;
+  padding: 8px 0 0 0;
+  color: rgba(0, 0, 0, 0.4);
+  text-shadow: none;
+  text-transform: none;
+  font-style: italic;
+  font-size: 1.2em;
+  font-family: Cinzel Decorative;
+  font-weight: 600;
+  opacity: 0;
+  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
+  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
+  transition: transform 0.3s, opacity 0.3s;
+  -webkit-transform: translateY(-100%);
+  -moz-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+.aon a::before, .aon a::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: #fff;
+  content: "";
+  opacity: 0.2;
+  -webkit-transition: opacity 0.3s, height 0.3s;
+  -moz-transition: opacity 0.3s, height 0.3s;
+  transition: opacity 0.3s, height 0.3s;
+}
+.aon a::after {
+  top: 100%;
+  opacity: 0;
+  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
+  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
+  transition: transform 0.3s, opacity 0.3s;
+  -webkit-transform: translateY(-10px);
+  -moz-transform: translateY(-10px);
+  transform: translateY(-10px);
+}
+.aon a:hover {
+  outline: none;
+}
\ No newline at end of file
diff --git a/art-of-noise-29/license.txt b/art-of-noise-29/license.txt
new file mode 100644
index 0000000..424f7c7
--- /dev/null
+++ b/art-of-noise-29/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Tibix (https://codepen.io/Tibixx/pen/jOBZoKV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/art-of-noise-29/src/index.html b/art-of-noise-29/src/index.html
new file mode 100644
index 0000000..cb0347a
--- /dev/null
+++ b/art-of-noise-29/src/index.html
@@ -0,0 +1,6 @@
+<div class="aon">
+  <a href="https://codepen.io/collection/DpwaJW/" target="_blank">
+    <span>View Collection</span>
+    <span>Art of Noise</span>
+  </a>
+</div>
\ No newline at end of file
diff --git a/art-of-noise-29/src/script.js b/art-of-noise-29/src/script.js
new file mode 100644
index 0000000..26ea687
--- /dev/null
+++ b/art-of-noise-29/src/script.js
@@ -0,0 +1,149 @@
+/* === Setup === */
+var scene, camera, renderer, controls;
+config = {
+  planeSegments: 100,
+  xNoiseScale: 40,
+  yNoiseScale: 40,
+  zNoiseScale: 20,
+  noiseSpeed: 0.001,
+  nt1: Math.random(),
+  nt2: Math.random(),
+  nt3: Math.random(),
+  col1: "255, 0, 0",
+  col2: "0, 255, 0",
+  col3: "0, 0, 255"
+}
+
+/* Dat Gui */
+var gui = new dat.GUI();
+gui.add(config, "xNoiseScale", 10, 100).step(1).name("Noise X");
+gui.add(config, "yNoiseScale", 10, 100).step(1).name("Noise Y");
+gui.add(config, "zNoiseScale", 10, 100).step(1).name("Noise Z");
+gui.add(config, "noiseSpeed", 0.00001, 0.01).name("Noise Speed");
+
+/* === Events === */
+window.onresize = function(){
+  var w = window.innerWidth, h = window.innerHeight;
+  camera.aspect = w / h;
+  camera.updateProjectionMatrix();
+  renderer.setSize( w, h );
+}
+
+/* === Scene === */
+var scene = new THREE.Scene();
+
+/* === Camera === */
+var camera = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 1000 );
+camera.position.y = -config.planeSegments/2;
+camera.position.z = config.planeSegments/2;
+camera.lookAt(0,0,0);
+
+/* === Renderer === */
+var renderer = new THREE.WebGLRenderer({antialias:true});
+renderer.setClearColor("#000000");
+renderer.setSize( window.innerWidth, window.innerHeight );
+document.body.appendChild( renderer.domElement );
+
+/* Orbit Controls */
+oControls = new THREE.OrbitControls(camera, renderer.domElement);
+oControls.update();
+
+/* === Stars === */
+var starsGeometry = new THREE.Geometry();
+for(i=0; i<3000; i++){
+  var star = new THREE.Vector3();
+  star.x = THREE.Math.randFloatSpread(2000);
+  star.y = THREE.Math.randFloatSpread(2000);
+  star.z = THREE.Math.randFloatSpread(2000);
+  starsGeometry.vertices.push(star);
+}
+var starsMaterial = new THREE.PointsMaterial({color: 0xFFFFFF});
+var starField = new THREE.Points(starsGeometry,starsMaterial);
+scene.add(starField);
+
+
+/* === Sprites === */
+function generateSprite(col) {
+  var canvas = document.createElement("canvas");
+  canvas.width = 16;
+  canvas.height = 16;
+
+  var context = canvas.getContext("2d");
+  var gradient = context.createRadialGradient(
+    canvas.width / 2,
+    canvas.height / 2,
+    0,
+    canvas.width / 2,
+    canvas.height / 2,
+    canvas.width / 2
+  );
+  gradient.addColorStop(0.0, "rgba("+col+", 1)");
+  gradient.addColorStop(0.9, "rgba("+col+", 0)");
+  gradient.addColorStop(1.0, "rgba("+col+", 0)");
+
+  context.fillStyle = gradient;
+  context.fillRect(0, 0, canvas.width, canvas.height);
+
+  var texture = new THREE.Texture(canvas);
+  texture.needsUpdate = true;
+  return texture;
+}
+
+/* === Particle System === */
+function createParticleSystem(geom, col) {
+  var material = new THREE.ParticleBasicMaterial({
+    color: 0xffffff,
+    size: 3,
+    transparent: true,
+    blending: THREE.AdditiveBlending, // Time to Shine!
+    map: generateSprite(col)
+  });
+
+  var system = new THREE.ParticleSystem(geom, material);
+  system.sortParticles = true;
+  return system;
+}
+
+/* === Meshes === */
+geo1 = new THREE.PlaneBufferGeometry(config.planeSegments,config.planeSegments,config.planeSegments/2, config.planeSegments/2);
+plane1 = createParticleSystem(geo1, config.col1);
+scene.add(plane1);
+
+geo2 = new THREE.PlaneBufferGeometry(config.planeSegments,config.planeSegments,config.planeSegments/2, config.planeSegments/2);
+plane2 = createParticleSystem(geo2, config.col2);
+scene.add(plane2);
+
+geo3 = new THREE.PlaneBufferGeometry(config.planeSegments,config.planeSegments,config.planeSegments/2, config.planeSegments/2);
+plane3 = createParticleSystem(geo3, config.col3);
+scene.add(plane3);
+
+/* === Lights === */
+ambientLight = new THREE.AmbientLight("#333"),
+scene.add(ambientLight);
+
+/* === Animate Points === */
+function animate() {
+  gp1 = plane1.geometry.attributes.position;
+  gp2 = plane2.geometry.attributes.position;
+  gp3 = plane3.geometry.attributes.position;
+  config.nt1 += config.noiseSpeed;
+  config.nt2 += config.noiseSpeed;
+  config.nt3 += config.noiseSpeed;
+  for (i=0; i<gp1.array.length; i+=3) {
+    gp1.array[i+2] = noise.simplex3(gp1.array[i]/config.xNoiseScale, gp1.array[i+1]/config.yNoiseScale, config.nt1)*config.zNoiseScale;
+    gp2.array[i+2] = noise.simplex3(gp2.array[i]/config.xNoiseScale, gp2.array[i+1]/config.yNoiseScale, config.nt2)*config.zNoiseScale;
+    gp3.array[i+2] = noise.simplex3(gp3.array[i]/config.xNoiseScale, gp3.array[i+1]/config.yNoiseScale, config.nt3)*config.zNoiseScale;
+  }
+  gp1.needsUpdate = true;
+  gp2.needsUpdate = true;
+  gp3.needsUpdate = true;
+}
+
+/* === Render === */
+var render = function () {
+  requestAnimationFrame( render );
+  renderer.render(scene, camera);
+  animate();
+  oControls.update();
+};
+render();
\ No newline at end of file
diff --git a/art-of-noise-29/src/style.scss b/art-of-noise-29/src/style.scss
new file mode 100644
index 0000000..fd96d71
--- /dev/null
+++ b/art-of-noise-29/src/style.scss
@@ -0,0 +1,114 @@
+@import url('https://fonts.googleapis.com/css?family=Cinzel|Cinzel+Decorative');
+
+html, body{
+  overflow: hidden;
+  background: #000;
+  padding: 0px;
+  margin: 0px;
+}
+
+.aon {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  
+  & a{
+    position: relative;
+    display: inline-block;
+    outline: none;
+    margin: 0 0px;
+    padding: 15px 10px;
+    color: #fff;
+    text-decoration: none;
+    font-family: Cinzel;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 400;
+    text-shadow: 0 0 1px rgba(255,255,255,0.3);
+    font-size: 1em;
+    
+    &:focus::before,
+    &:hover::before{
+      height: 6px;
+    }
+    
+    &:hover::before,
+    &:hover::after,
+    &:focus::before,
+    &:focus::after {
+      opacity: 1;
+      -webkit-transform: translateY(0px);
+      -moz-transform: translateY(0px);
+      transform: translateY(0px);
+    }
+    
+    &:hover span:last-child,
+    &:focus span:last-child {
+      opacity: 1;
+      -webkit-transform: translateY(0%);
+      -moz-transform: translateY(0%);
+      transform: translateY(0%);
+    }
+    
+    & span{
+      color: #fff !important;
+      
+      &:first-child{
+        z-index: 2;
+        display: block;
+        font-weight: 300;
+      }
+      
+      &:last-child{
+        z-index: 1;
+        display: block;
+        padding: 8px 0 0 0;
+        color: rgba(0,0,0,0.4);
+        text-shadow: none;
+        text-transform: none;
+        font-style: italic;
+        font-size: 1.2em;
+        font-family: Cinzel Decorative;
+        font-weight: 600;
+        opacity: 0;
+        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
+        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
+        transition: transform 0.3s, opacity 0.3s;
+        -webkit-transform: translateY(-100%);
+        -moz-transform: translateY(-100%);
+        transform: translateY(-100%);
+      }
+    }
+    
+    &::before,
+    &::after{
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: #fff;
+      content: '';
+      opacity: 0.2;
+      -webkit-transition: opacity 0.3s, height 0.3s;
+      -moz-transition: opacity 0.3s, height 0.3s;
+      transition: opacity 0.3s, height 0.3s;
+    }
+    
+    &::after{
+      top: 100%;
+      opacity: 0;
+      -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
+      -moz-transition: -moz-transform 0.3s, opacity 0.3s;
+      transition: transform 0.3s, opacity 0.3s;
+      -webkit-transform: translateY(-10px);
+      -moz-transform: translateY(-10px);
+      transform: translateY(-10px);
+    }
+    
+    &:hover{
+      outline: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/ascii-corridor/README.markdown b/ascii-corridor/README.markdown
new file mode 100644
index 0000000..244873f
--- /dev/null
+++ b/ascii-corridor/README.markdown
@@ -0,0 +1,5 @@
+# ASCII Corridor
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/omercanbalandi/pen/jOWVOYL](https://codepen.io/omercanbalandi/pen/jOWVOYL).
+
+
diff --git a/ascii-corridor/dist/index.html b/ascii-corridor/dist/index.html
new file mode 100644
index 0000000..3ca5ff5
--- /dev/null
+++ b/ascii-corridor/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - ASCII Corridor</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="ascii"></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/ascii-corridor/dist/script.js b/ascii-corridor/dist/script.js
new file mode 100644
index 0000000..c7d05ce
--- /dev/null
+++ b/ascii-corridor/dist/script.js
@@ -0,0 +1,136 @@
+// ref: http://paulbourke.net/dataformats/asciiart/ 
+const ascii = ".:-=+*#%@"; 
+
+const canvas = document.createElement('canvas');
+canvas.width = 32;
+canvas.height = 48;
+
+const ctx = canvas.getContext('2d');
+
+const asciicontainer = document.querySelector('.ascii');
+
+const map = (x, max, min, tmax, tmin) => (x - min) / (max - min) * (tmax - tmin) + tmin;
+
+const lerp = (x, a, b) => a + (b - a) * x;
+
+const map_table = new Array(255).fill(1).map((_, i) => Math.ceil(map(i, 255, 0, ascii.length - 1, 0)));
+
+const line = (x1, y1, x2, y2) => {
+    ctx.beginPath();
+
+    let grad = ctx.createLinearGradient(x1, y1, x2, y2);
+    grad.addColorStop(0, "rgba(255, 255, 255, 0.75)");
+    grad.addColorStop(0.5, "rgba(255, 255, 255, 0.35)");
+    grad.addColorStop(1, "rgba(255, 255, 255, 0.12)");
+    
+    ctx.strokeStyle = grad;
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+    ctx.closePath();
+}
+
+const getAsciiOutput = (canvas, ctx) => {
+    let imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    let pix = imgd.data;
+
+    let output = '';
+
+    for (let i = 0, n = pix.length; i < n; i += 4) {
+        let xpos = (i / 4) % canvas.width;
+        let char = ascii[map_table[pix[i]]];
+        
+        if (xpos == 0) {
+            output += '<div>';
+        } else if (xpos == canvas.width - 1) {
+            output.innerHTML += '</div>';
+        }
+
+        output += char == ascii[0] ? `<span style="color: #444">${char}</span>` : char;
+    }
+
+    return output;
+}
+
+const randomBox = () => ({
+    x: Math.floor(Math.random() * 10) + 7,
+    y: Math.floor(Math.random() * 15) + 7,
+    sx: 0,
+    sy: 0,
+    w: 6,
+    h: 10,
+    progress: 0
+});
+
+let box = randomBox();
+box.sx = box.x;
+box.sy = box.y;
+
+let nextPos = randomBox();
+
+let tick = 0;
+let mouseState = false;
+
+const loop = () => {
+    tick += 0.025;
+
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = '#f4f4f4'
+    ctx.fillRect(box.x, box.y, box.w, box.h);
+
+
+    line(box.x, box.y, 0, 0);
+    line(box.x + box.w, box.y, canvas.width, 0);
+    line(box.x, box.y + box.h, 0, canvas.height);
+    line(box.x + box.w, box.y + box.h, canvas.width, canvas.height);
+
+    ctx.beginPath();
+    let x = box.x + box.w / 2;
+    let y = box.y + box.h / 2;
+
+    let grad = ctx.createRadialGradient(x, y, 5, x, y, 20);
+    grad.addColorStop(0, "rgba(255, 255, 255, 0.5)");
+    grad.addColorStop(0.5, "rgba(0, 0, 0, 0)");
+    grad.addColorStop(1, "rgba(0, 0, 0, 0)");
+    
+    ctx.fillStyle = grad;
+    ctx.arc(x, y, 6 + 2.5 * Math.acos(Math.sin(tick) * Math.PI / 4), 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.closePath();
+
+    if (!mouseState) {
+        if (box.progress < 0.99) {
+            box.progress += 0.005;
+            box.x = lerp(box.progress, box.sx, nextPos.x);
+            box.y = lerp(box.progress, box.sy, nextPos.y);
+        } else {
+            box = Object.assign({}, nextPos);
+            box.sx = box.x;
+            box.sy = box.y;
+            nextPos = randomBox();
+        }
+    }
+
+    asciicontainer.innerHTML = getAsciiOutput(canvas, ctx);
+
+    requestAnimationFrame(loop);
+}
+
+loop();
+
+asciicontainer.addEventListener('mouseenter', _ => {
+    mouseState = true;
+});
+
+asciicontainer.addEventListener('mouseleave', _ => {
+    mouseState = false;
+});
+
+window.addEventListener('mousemove', e => {
+    if (mouseState) {
+        box.x = map(e.clientX, window.innerWidth, 0, canvas.width, 0) - box.w / 2;
+        box.y = map(e.clientY, window.innerHeight, 0, canvas.height, 0) - box.h / 2;
+    }
+});
\ No newline at end of file
diff --git a/ascii-corridor/dist/style.css b/ascii-corridor/dist/style.css
new file mode 100644
index 0000000..e20b084
--- /dev/null
+++ b/ascii-corridor/dist/style.css
@@ -0,0 +1,22 @@
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap");
+body {
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 12px;
+  background-color: black;
+  letter-spacing: 4px;
+  line-height: 12px;
+}
+
+.ascii {
+  border: 1px dashed #585858;
+  color: #ffe599;
+  padding: 20px;
+}
+
+.ascii, .screen {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
\ No newline at end of file
diff --git a/ascii-corridor/license.txt b/ascii-corridor/license.txt
new file mode 100644
index 0000000..eb55ab9
--- /dev/null
+++ b/ascii-corridor/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Ömercan Balandı (https://codepen.io/omercanbalandi/pen/jOWVOYL)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/ascii-corridor/src/index.html b/ascii-corridor/src/index.html
new file mode 100644
index 0000000..9a8d9e9
--- /dev/null
+++ b/ascii-corridor/src/index.html
@@ -0,0 +1 @@
+<div class="ascii"></div>
\ No newline at end of file
diff --git a/ascii-corridor/src/script.js b/ascii-corridor/src/script.js
new file mode 100644
index 0000000..c7d05ce
--- /dev/null
+++ b/ascii-corridor/src/script.js
@@ -0,0 +1,136 @@
+// ref: http://paulbourke.net/dataformats/asciiart/ 
+const ascii = ".:-=+*#%@"; 
+
+const canvas = document.createElement('canvas');
+canvas.width = 32;
+canvas.height = 48;
+
+const ctx = canvas.getContext('2d');
+
+const asciicontainer = document.querySelector('.ascii');
+
+const map = (x, max, min, tmax, tmin) => (x - min) / (max - min) * (tmax - tmin) + tmin;
+
+const lerp = (x, a, b) => a + (b - a) * x;
+
+const map_table = new Array(255).fill(1).map((_, i) => Math.ceil(map(i, 255, 0, ascii.length - 1, 0)));
+
+const line = (x1, y1, x2, y2) => {
+    ctx.beginPath();
+
+    let grad = ctx.createLinearGradient(x1, y1, x2, y2);
+    grad.addColorStop(0, "rgba(255, 255, 255, 0.75)");
+    grad.addColorStop(0.5, "rgba(255, 255, 255, 0.35)");
+    grad.addColorStop(1, "rgba(255, 255, 255, 0.12)");
+    
+    ctx.strokeStyle = grad;
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+    ctx.closePath();
+}
+
+const getAsciiOutput = (canvas, ctx) => {
+    let imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    let pix = imgd.data;
+
+    let output = '';
+
+    for (let i = 0, n = pix.length; i < n; i += 4) {
+        let xpos = (i / 4) % canvas.width;
+        let char = ascii[map_table[pix[i]]];
+        
+        if (xpos == 0) {
+            output += '<div>';
+        } else if (xpos == canvas.width - 1) {
+            output.innerHTML += '</div>';
+        }
+
+        output += char == ascii[0] ? `<span style="color: #444">${char}</span>` : char;
+    }
+
+    return output;
+}
+
+const randomBox = () => ({
+    x: Math.floor(Math.random() * 10) + 7,
+    y: Math.floor(Math.random() * 15) + 7,
+    sx: 0,
+    sy: 0,
+    w: 6,
+    h: 10,
+    progress: 0
+});
+
+let box = randomBox();
+box.sx = box.x;
+box.sy = box.y;
+
+let nextPos = randomBox();
+
+let tick = 0;
+let mouseState = false;
+
+const loop = () => {
+    tick += 0.025;
+
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = '#f4f4f4'
+    ctx.fillRect(box.x, box.y, box.w, box.h);
+
+
+    line(box.x, box.y, 0, 0);
+    line(box.x + box.w, box.y, canvas.width, 0);
+    line(box.x, box.y + box.h, 0, canvas.height);
+    line(box.x + box.w, box.y + box.h, canvas.width, canvas.height);
+
+    ctx.beginPath();
+    let x = box.x + box.w / 2;
+    let y = box.y + box.h / 2;
+
+    let grad = ctx.createRadialGradient(x, y, 5, x, y, 20);
+    grad.addColorStop(0, "rgba(255, 255, 255, 0.5)");
+    grad.addColorStop(0.5, "rgba(0, 0, 0, 0)");
+    grad.addColorStop(1, "rgba(0, 0, 0, 0)");
+    
+    ctx.fillStyle = grad;
+    ctx.arc(x, y, 6 + 2.5 * Math.acos(Math.sin(tick) * Math.PI / 4), 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.closePath();
+
+    if (!mouseState) {
+        if (box.progress < 0.99) {
+            box.progress += 0.005;
+            box.x = lerp(box.progress, box.sx, nextPos.x);
+            box.y = lerp(box.progress, box.sy, nextPos.y);
+        } else {
+            box = Object.assign({}, nextPos);
+            box.sx = box.x;
+            box.sy = box.y;
+            nextPos = randomBox();
+        }
+    }
+
+    asciicontainer.innerHTML = getAsciiOutput(canvas, ctx);
+
+    requestAnimationFrame(loop);
+}
+
+loop();
+
+asciicontainer.addEventListener('mouseenter', _ => {
+    mouseState = true;
+});
+
+asciicontainer.addEventListener('mouseleave', _ => {
+    mouseState = false;
+});
+
+window.addEventListener('mousemove', e => {
+    if (mouseState) {
+        box.x = map(e.clientX, window.innerWidth, 0, canvas.width, 0) - box.w / 2;
+        box.y = map(e.clientY, window.innerHeight, 0, canvas.height, 0) - box.h / 2;
+    }
+});
\ No newline at end of file
diff --git a/ascii-corridor/src/style.sass b/ascii-corridor/src/style.sass
new file mode 100644
index 0000000..e5727d6
--- /dev/null
+++ b/ascii-corridor/src/style.sass
@@ -0,0 +1,21 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap')
+
+body 
+    font-family: 'IBM Plex Mono', monospace
+    font-size: 12px
+    background-color: black
+    letter-spacing: 4px
+    line-height: 12px
+
+
+.ascii 
+    border: 1px dashed #585858
+    color: #ffe599
+    padding: 20px
+
+
+.ascii, .screen
+    position: absolute
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
diff --git a/background-patterns/README.markdown b/background-patterns/README.markdown
new file mode 100644
index 0000000..ed69a3c
--- /dev/null
+++ b/background-patterns/README.markdown
@@ -0,0 +1,5 @@
+# Background patterns
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/yuanchuan/pen/xxEXwZw](https://codepen.io/yuanchuan/pen/xxEXwZw).
+
+
diff --git a/background-patterns/dist/index.html b/background-patterns/dist/index.html
new file mode 100644
index 0000000..063304c
--- /dev/null
+++ b/background-patterns/dist/index.html
@@ -0,0 +1,365 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Background patterns</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- 
+  Patterns built with css-doodle 
+  https://css-doodle.com
+-->
+
+<style>
+css-doodle {
+  
+  --pattern-1: (
+    @grid: 1 / 100%;
+    background: @doodle(
+      @grid: 1 / 100%;
+      background-size: 300px 300px;
+      background-image: @doodle(
+        :doodle {
+          @grid: 5x12 / 100% 240%;
+          transform: scale(1.25);
+        }
+        top: calc(@y * -30px);
+        :before, :after {
+          content: '';
+          @size: 100%;
+          position: absolute;
+          left: @pn(auto, 50%);
+          top: @pn(auto, 25%);
+          border-radius: 50%;
+          z-index: calc(@y - @pn(2, 1));
+          background: repeating-radial-gradient(
+            @stripe(#023967 4px, #c5dff5 2px)
+          );
+        }
+      );
+    );
+  );
+  
+  --pattern-2: (
+    @grid: 1 / 100%;
+    background: @doodle(
+      @grid: 1 / 100%;
+      background-color: #f5f8ff;
+      background-size:  160px 160px;
+      background-image: @doodle(
+        :doodle {
+          @grid: 3 / 100%;
+          transform: scale(calc(3 / 2));
+        }
+        :after, :before {
+          content: '';
+          @size: 100%;
+          border-radius: 50%;
+          position: absolute;
+          border: 3px double #4169E1;
+          background: @doodle(
+            @grid: 1 / 100%;
+            @shape: clover 4;
+            background: #4169E1;
+          );
+          background-size: 45% 45%;
+          background-repeat: no-repeat;
+          background-position: 50% 52%;
+        }
+        :before {
+          transform: translate(50%, 50%);
+        }
+      );
+    );
+  );
+
+  --pattern-3: (
+    @grid: 1 / 100%;
+    background-color: #fff;
+    background-image: @doodle(
+      @grid: 1 / 100%;
+      background-size:  180px 180px;
+      background-image: @doodle(
+        :doodle {
+          @grid: 3 / 100%;
+          transform: scale(calc(3 / 2));
+        }
+        z-index: @ri(100);
+        :after, :before {
+          content: '';
+          @size: 100%;
+          border-radius: 50%;
+          position: absolute;
+          background: radial-gradient(
+            @stripe.@m9.@pn(#654062, #fff, transparent)
+          );
+        }
+        :before {
+          transform: translateX(50%) translateY(50%);
+        }
+      );
+    );
+  );
+
+  --pattern-4: (
+    @grid: 1 / 100%;
+    background-color: #332B33;
+    background-image: @doodle(
+      :doodle {
+        @grid: 1 / 10000px;
+        transform: scale(1.5) rotate(45deg);
+      }
+      background-size: 50px 50px;
+      background-image: @doodle(
+        :doodle {
+          @grid: 8x1 / 90%;
+          border-radius: 0% 60%;
+          overflow: hidden;
+        }
+        position: absolute;
+        border: 1px solid #BCB8BB;
+        @nth(1) { border-radius: 0% 60%; }
+        @size: calc(100% - 100% / @I * (@i - 1));
+        background: linear-gradient(
+          45deg, @stripe(transparent, #BCB8BB 1px, transparent)
+        );
+      );
+    );
+  );
+
+  --pattern-5: (
+    @grid: 1 / 100%;
+    background: @doodle(
+      :doodle {
+        @grid: 1 / 10000px;
+        transform: rotate(45deg) scale(2);
+      }
+      background-size: 30px 30px;
+      background-image: @doodle(
+        @grid: 5x1 / calc(100% + 1px);
+        @place-cell: center;
+        @size: calc(100% - 100% / @I * (@i - 1));
+        border-radius: calc(100% / @I * (@i - 1));
+        border: 1px solid #003049;
+        background: @pn(
+          #d62828, #f77f00, #fcbf49, #eae2b7
+        );
+      );
+    );
+  );
+
+  --pattern-6: (
+    @grid: 1 / 100%;
+    background-color: #fff;
+    background-image: @doodle(
+      @grid: 1 / 100%;
+      background-size:  125px 125px;
+      background-image: @doodle(
+        :doodle {
+          @grid: 3 / 100%;
+          transform: scale(calc(3 / 2));
+        }
+        z-index: @ri(100);
+        :after, :before {
+          content: '';
+          @size: 100%;
+          border-radius: 50%;
+          position: absolute;
+          background: radial-gradient(
+            @stripe.@m8.@pn(#F7D006, #52514F)
+          );
+        }
+        :before {
+          transform: translate(50%, 50%);
+        }
+      );
+    );
+  );
+
+  --pattern-7: (
+    @grid: 1 / 100%;
+    background-size: 83px 135px;
+    background-color: #D24B45;
+    background-image: @doodle(
+      @grid: 2 / 100%;
+      background: @pn(#3C2B34, #F7F0E9, #F7F0E9);
+      transform-origin: @pn(100% 100%, 0 100%, 100% 0, 0 0);
+      transform:
+        rotateX(45deg)
+        skewY(@pn(34deg, -34deg, -34deg));
+    );
+  );
+
+  --pattern-8: (
+    @grid: 1 / 100%;
+    background: @doodle(
+      :doodle {
+        @grid: 1 / 10000px;
+        transform: scale(1.5) rotate(45deg);
+      }
+      background-size: 150px 150px;
+      background-color: #1d3557;
+      background-image: @doodle(
+        @grid: 4 / 100%;
+        :after {
+          content: '';
+          @size: 100%;
+          position: absolute;
+          background: @doodle(
+            @grid: @p([1-4]) / 100%;
+            @shape: triangle;
+            background: @p(#e63946, #f1faee, #a8dadc, #457b9d);
+            transform: rotate(@p(0, 180deg)) scale(.8);
+          );
+        }
+      );
+    );
+  );
+
+  --pattern-9: (
+    @grid: 1 / 100%;
+    background-color: #211a4c;
+    background-image: @doodle(
+      :doodle {
+        @grid: 1 / 10000px;
+        transform: scale(1.5) rotate(45deg);
+      }
+      background-size: 300px 300px;
+      background-image: @doodle(
+        @grid: 1 / 100%;
+        background: @doodle(
+          @grid: @r(8) / 100%;
+           background: @doodle(
+            @grid: @r(10) / 100%;
+            background: radial-gradient(
+              @stripe.@m2.@p(
+                @m10(#293462),
+                @m10(#211a4c), 
+                @m2(#b2ebf2), 
+                #e84a5f
+              )
+            );
+          );
+        );
+      );
+    );
+  );
+
+  --pattern-10: (
+    @grid: 1 / 100%;
+    background: @doodle(
+      :doodle {
+        @grid: / 10000px;
+        transform: scale(1.5) rotate(45deg);
+      }
+      background-color: #213061;
+      background-size: 150px 150px;
+      background-image: @doodle(
+        @grid: 10 / 100%;
+        :after, :before {
+          content: '';
+          position: absolute;
+          left: 50%; top: 50%;
+          @size: @r(10%, 50%) 1px;
+          transform: rotate(@r(360deg));
+          transform-origin: 0 50%;
+          background: currentColor;
+          color: #fff9;
+        }
+      );
+    );
+  );
+  
+  --pattern-11: (
+    @grid: 1 / 100%;
+    background-size: 200px 200px;
+    background-color: #005874;
+    background-image: @doodle(
+      @grid: 10x1 / 100%;
+      @place-cell: center;
+      @size: 200px;
+      background-image: @doodle(
+        @grid: 1 / 50px;
+        background: @p(#65d6ce,#1c819e,#e6e6d4,#ffbe00);
+        transform: rotate(@r(360deg)) scale(@r(.5, 1));
+        clip-path: @shape(
+          split: 50;
+          scale: .3;
+          x: cos(t) + cos(2t) * 2;
+          y: sin(2t) + sin(t) * 2;
+        );
+      );
+      background-position: @pn(
+        -25px 45px, 50px 75px, 90px 95px,
+        160px 165px, 20px 0, 22px -65px,
+        110px -18px, 120px 34px, 130px 125px,
+        5px 90px
+      );
+    );
+  );
+  
+  --pattern-12: (
+    @grid: 1 / 100%;
+    background-size: 300px 300px;
+    background-color: #293D56; 
+    background-image: @doodle(
+      @grid: 16x1 / 100%;
+      @place-cell: center;
+      @size: 100%;
+      background-image: @doodle(
+        @grid: 1 / 80px;
+        background: @p(#ff6f6f,#fff46e,#f6f6f6,#a58bff);
+        transform: rotate(@r(360deg)) scale(@r(.5, 1));
+        clip-path: @shape(
+          split: 240;
+          y: sin(2t) * sin(4t) * cos(5t);
+          x: cos(2t) * cos(5t) * sin(t); 
+        );
+      );
+      background-position: @pn(
+        -5px 10px, 65px 25px, 80px 90px, 110px -40px, -40px 120px,
+        40px 240px, 90px 180px, 150px 190px, 160px 40px, 220px 60px,
+        240px 240px, 210px 160px, 20px 150px,  160px 100px
+      );
+      z-index: 2;
+      @nth(15, 16) {
+        z-index: 1;
+        background: @m90(
+          radial-gradient(
+            @p(#ff6f6f,#fff46e,#f6f6f6,#a58bff) @r(50%), 
+            transparent 0
+          ) 
+          @r(100%) @r(100%) / @r(10px) @lr 
+          no-repeat
+        );
+      }
+    );
+  );
+  
+}
+</style>
+
+<main>
+  <ul>
+    <li> <css-doodle use="var(--pattern-1)"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-2)"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-3)"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-4)"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-5)"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-6)" seed="1608648378232"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-7)"></css-doodle></li>
+    <li> <css-doodle use="var(--pattern-8)" seed="1608633329491"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-9)" seed="1608634842475"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-10)" seed="1608625270519"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-11)" seed="1608724650251"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-12)" seed="1608732448356"></css-doodle> </li>
+  </ul>
+</main>
+<!-- partial -->
+  <script src='https://unpkg.com/css-doodle@0.12.2/css-doodle.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/background-patterns/dist/script.js b/background-patterns/dist/script.js
new file mode 100644
index 0000000..c0c5151
--- /dev/null
+++ b/background-patterns/dist/script.js
@@ -0,0 +1,6 @@
+Array.from(document.querySelectorAll('li')).forEach(li => {
+  li.addEventListener('click', e => {
+    li.classList.toggle('active');
+    return false;
+  });
+});
\ No newline at end of file
diff --git a/background-patterns/dist/style.css b/background-patterns/dist/style.css
new file mode 100644
index 0000000..fe93e35
--- /dev/null
+++ b/background-patterns/dist/style.css
@@ -0,0 +1,82 @@
+/* Layout things */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, main {
+  height: 100%;
+}
+
+body {
+  background: #35363A;
+}
+
+main {
+  display: grid;
+  place-items: center;
+  max-width: 80em;
+  margin: auto;
+}
+
+ul {
+  width: 100%;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 1em;
+  padding: 2em;
+  grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
+}
+
+li {
+  height: 20em;
+  border: 6px solid #fff;
+  overflow: hidden;
+}
+
+li css-doodle {
+  transition: transform .2s ease;
+  will-change: transform;
+}
+
+li.active {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  border: none;
+}
+li.active css-doodle {
+  animation: scale-down .4s ease;
+}
+li:not(.active):hover {
+  cursor: pointer;
+}
+li:not(.active):hover css-doodle {
+  transform: scale(1.02);
+}
+li.active:after {
+  content: '';
+  cursor: pointer;
+  position: fixed;
+  top: 1em;
+  right: 1em;
+  width: 4em;
+  height: 4em;
+  border-radius: 50%;
+  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cg stroke='%23fff' stroke-width='.5'%3E%3Cline x1='1' y1='1' x2='9' y2='9' /%3E%3Cline x1='9' y1='1' x2='1' y2='9' /%3E%3C/g%3E%3C/svg%3E");
+  background-color: rgba(0, 0, 0, .8);
+  background-size: 50%;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+@keyframes scale-down {
+  from { transform: scale(1.02); }
+  to { transform: scale(1); }
+}
\ No newline at end of file
diff --git a/background-patterns/license.txt b/background-patterns/license.txt
new file mode 100644
index 0000000..3971d2e
--- /dev/null
+++ b/background-patterns/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by yuanchuan (https://codepen.io/yuanchuan/pen/xxEXwZw)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/background-patterns/src/index.html b/background-patterns/src/index.html
new file mode 100644
index 0000000..4d56812
--- /dev/null
+++ b/background-patterns/src/index.html
@@ -0,0 +1,350 @@
+<!-- 
+  Patterns built with css-doodle 
+  https://css-doodle.com
+-->
+
+<style>
+css-doodle {
+  
+  --pattern-1: (
+    @grid: 1 / 100%;
+    background: @doodle(
+      @grid: 1 / 100%;
+      background-size: 300px 300px;
+      background-image: @doodle(
+        :doodle {
+          @grid: 5x12 / 100% 240%;
+          transform: scale(1.25);
+        }
+        top: calc(@y * -30px);
+        :before, :after {
+          content: '';
+          @size: 100%;
+          position: absolute;
+          left: @pn(auto, 50%);
+          top: @pn(auto, 25%);
+          border-radius: 50%;
+          z-index: calc(@y - @pn(2, 1));
+          background: repeating-radial-gradient(
+            @stripe(#023967 4px, #c5dff5 2px)
+          );
+        }
+      );
+    );
+  );
+  
+  --pattern-2: (
+    @grid: 1 / 100%;
+    background: @doodle(
+      @grid: 1 / 100%;
+      background-color: #f5f8ff;
+      background-size:  160px 160px;
+      background-image: @doodle(
+        :doodle {
+          @grid: 3 / 100%;
+          transform: scale(calc(3 / 2));
+        }
+        :after, :before {
+          content: '';
+          @size: 100%;
+          border-radius: 50%;
+          position: absolute;
+          border: 3px double #4169E1;
+          background: @doodle(
+            @grid: 1 / 100%;
+            @shape: clover 4;
+            background: #4169E1;
+          );
+          background-size: 45% 45%;
+          background-repeat: no-repeat;
+          background-position: 50% 52%;
+        }
+        :before {
+          transform: translate(50%, 50%);
+        }
+      );
+    );
+  );
+
+  --pattern-3: (
+    @grid: 1 / 100%;
+    background-color: #fff;
+    background-image: @doodle(
+      @grid: 1 / 100%;
+      background-size:  180px 180px;
+      background-image: @doodle(
+        :doodle {
+          @grid: 3 / 100%;
+          transform: scale(calc(3 / 2));
+        }
+        z-index: @ri(100);
+        :after, :before {
+          content: '';
+          @size: 100%;
+          border-radius: 50%;
+          position: absolute;
+          background: radial-gradient(
+            @stripe.@m9.@pn(#654062, #fff, transparent)
+          );
+        }
+        :before {
+          transform: translateX(50%) translateY(50%);
+        }
+      );
+    );
+  );
+
+  --pattern-4: (
+    @grid: 1 / 100%;
+    background-color: #332B33;
+    background-image: @doodle(
+      :doodle {
+        @grid: 1 / 10000px;
+        transform: scale(1.5) rotate(45deg);
+      }
+      background-size: 50px 50px;
+      background-image: @doodle(
+        :doodle {
+          @grid: 8x1 / 90%;
+          border-radius: 0% 60%;
+          overflow: hidden;
+        }
+        position: absolute;
+        border: 1px solid #BCB8BB;
+        @nth(1) { border-radius: 0% 60%; }
+        @size: calc(100% - 100% / @I * (@i - 1));
+        background: linear-gradient(
+          45deg, @stripe(transparent, #BCB8BB 1px, transparent)
+        );
+      );
+    );
+  );
+
+  --pattern-5: (
+    @grid: 1 / 100%;
+    background: @doodle(
+      :doodle {
+        @grid: 1 / 10000px;
+        transform: rotate(45deg) scale(2);
+      }
+      background-size: 30px 30px;
+      background-image: @doodle(
+        @grid: 5x1 / calc(100% + 1px);
+        @place-cell: center;
+        @size: calc(100% - 100% / @I * (@i - 1));
+        border-radius: calc(100% / @I * (@i - 1));
+        border: 1px solid #003049;
+        background: @pn(
+          #d62828, #f77f00, #fcbf49, #eae2b7
+        );
+      );
+    );
+  );
+
+  --pattern-6: (
+    @grid: 1 / 100%;
+    background-color: #fff;
+    background-image: @doodle(
+      @grid: 1 / 100%;
+      background-size:  125px 125px;
+      background-image: @doodle(
+        :doodle {
+          @grid: 3 / 100%;
+          transform: scale(calc(3 / 2));
+        }
+        z-index: @ri(100);
+        :after, :before {
+          content: '';
+          @size: 100%;
+          border-radius: 50%;
+          position: absolute;
+          background: radial-gradient(
+            @stripe.@m8.@pn(#F7D006, #52514F)
+          );
+        }
+        :before {
+          transform: translate(50%, 50%);
+        }
+      );
+    );
+  );
+
+  --pattern-7: (
+    @grid: 1 / 100%;
+    background-size: 83px 135px;
+    background-color: #D24B45;
+    background-image: @doodle(
+      @grid: 2 / 100%;
+      background: @pn(#3C2B34, #F7F0E9, #F7F0E9);
+      transform-origin: @pn(100% 100%, 0 100%, 100% 0, 0 0);
+      transform:
+        rotateX(45deg)
+        skewY(@pn(34deg, -34deg, -34deg));
+    );
+  );
+
+  --pattern-8: (
+    @grid: 1 / 100%;
+    background: @doodle(
+      :doodle {
+        @grid: 1 / 10000px;
+        transform: scale(1.5) rotate(45deg);
+      }
+      background-size: 150px 150px;
+      background-color: #1d3557;
+      background-image: @doodle(
+        @grid: 4 / 100%;
+        :after {
+          content: '';
+          @size: 100%;
+          position: absolute;
+          background: @doodle(
+            @grid: @p([1-4]) / 100%;
+            @shape: triangle;
+            background: @p(#e63946, #f1faee, #a8dadc, #457b9d);
+            transform: rotate(@p(0, 180deg)) scale(.8);
+          );
+        }
+      );
+    );
+  );
+
+  --pattern-9: (
+    @grid: 1 / 100%;
+    background-color: #211a4c;
+    background-image: @doodle(
+      :doodle {
+        @grid: 1 / 10000px;
+        transform: scale(1.5) rotate(45deg);
+      }
+      background-size: 300px 300px;
+      background-image: @doodle(
+        @grid: 1 / 100%;
+        background: @doodle(
+          @grid: @r(8) / 100%;
+           background: @doodle(
+            @grid: @r(10) / 100%;
+            background: radial-gradient(
+              @stripe.@m2.@p(
+                @m10(#293462),
+                @m10(#211a4c), 
+                @m2(#b2ebf2), 
+                #e84a5f
+              )
+            );
+          );
+        );
+      );
+    );
+  );
+
+  --pattern-10: (
+    @grid: 1 / 100%;
+    background: @doodle(
+      :doodle {
+        @grid: / 10000px;
+        transform: scale(1.5) rotate(45deg);
+      }
+      background-color: #213061;
+      background-size: 150px 150px;
+      background-image: @doodle(
+        @grid: 10 / 100%;
+        :after, :before {
+          content: '';
+          position: absolute;
+          left: 50%; top: 50%;
+          @size: @r(10%, 50%) 1px;
+          transform: rotate(@r(360deg));
+          transform-origin: 0 50%;
+          background: currentColor;
+          color: #fff9;
+        }
+      );
+    );
+  );
+  
+  --pattern-11: (
+    @grid: 1 / 100%;
+    background-size: 200px 200px;
+    background-color: #005874;
+    background-image: @doodle(
+      @grid: 10x1 / 100%;
+      @place-cell: center;
+      @size: 200px;
+      background-image: @doodle(
+        @grid: 1 / 50px;
+        background: @p(#65d6ce,#1c819e,#e6e6d4,#ffbe00);
+        transform: rotate(@r(360deg)) scale(@r(.5, 1));
+        clip-path: @shape(
+          split: 50;
+          scale: .3;
+          x: cos(t) + cos(2t) * 2;
+          y: sin(2t) + sin(t) * 2;
+        );
+      );
+      background-position: @pn(
+        -25px 45px, 50px 75px, 90px 95px,
+        160px 165px, 20px 0, 22px -65px,
+        110px -18px, 120px 34px, 130px 125px,
+        5px 90px
+      );
+    );
+  );
+  
+  --pattern-12: (
+    @grid: 1 / 100%;
+    background-size: 300px 300px;
+    background-color: #293D56; 
+    background-image: @doodle(
+      @grid: 16x1 / 100%;
+      @place-cell: center;
+      @size: 100%;
+      background-image: @doodle(
+        @grid: 1 / 80px;
+        background: @p(#ff6f6f,#fff46e,#f6f6f6,#a58bff);
+        transform: rotate(@r(360deg)) scale(@r(.5, 1));
+        clip-path: @shape(
+          split: 240;
+          y: sin(2t) * sin(4t) * cos(5t);
+          x: cos(2t) * cos(5t) * sin(t); 
+        );
+      );
+      background-position: @pn(
+        -5px 10px, 65px 25px, 80px 90px, 110px -40px, -40px 120px,
+        40px 240px, 90px 180px, 150px 190px, 160px 40px, 220px 60px,
+        240px 240px, 210px 160px, 20px 150px,  160px 100px
+      );
+      z-index: 2;
+      @nth(15, 16) {
+        z-index: 1;
+        background: @m90(
+          radial-gradient(
+            @p(#ff6f6f,#fff46e,#f6f6f6,#a58bff) @r(50%), 
+            transparent 0
+          ) 
+          @r(100%) @r(100%) / @r(10px) @lr 
+          no-repeat
+        );
+      }
+    );
+  );
+  
+}
+</style>
+
+<main>
+  <ul>
+    <li> <css-doodle use="var(--pattern-1)"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-2)"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-3)"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-4)"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-5)"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-6)" seed="1608648378232"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-7)"></css-doodle></li>
+    <li> <css-doodle use="var(--pattern-8)" seed="1608633329491"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-9)" seed="1608634842475"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-10)" seed="1608625270519"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-11)" seed="1608724650251"></css-doodle> </li>
+    <li> <css-doodle use="var(--pattern-12)" seed="1608732448356"></css-doodle> </li>
+  </ul>
+</main>
\ No newline at end of file
diff --git a/background-patterns/src/script.js b/background-patterns/src/script.js
new file mode 100644
index 0000000..c0c5151
--- /dev/null
+++ b/background-patterns/src/script.js
@@ -0,0 +1,6 @@
+Array.from(document.querySelectorAll('li')).forEach(li => {
+  li.addEventListener('click', e => {
+    li.classList.toggle('active');
+    return false;
+  });
+});
\ No newline at end of file
diff --git a/background-patterns/src/style.css b/background-patterns/src/style.css
new file mode 100644
index 0000000..fe93e35
--- /dev/null
+++ b/background-patterns/src/style.css
@@ -0,0 +1,82 @@
+/* Layout things */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, main {
+  height: 100%;
+}
+
+body {
+  background: #35363A;
+}
+
+main {
+  display: grid;
+  place-items: center;
+  max-width: 80em;
+  margin: auto;
+}
+
+ul {
+  width: 100%;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 1em;
+  padding: 2em;
+  grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
+}
+
+li {
+  height: 20em;
+  border: 6px solid #fff;
+  overflow: hidden;
+}
+
+li css-doodle {
+  transition: transform .2s ease;
+  will-change: transform;
+}
+
+li.active {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  border: none;
+}
+li.active css-doodle {
+  animation: scale-down .4s ease;
+}
+li:not(.active):hover {
+  cursor: pointer;
+}
+li:not(.active):hover css-doodle {
+  transform: scale(1.02);
+}
+li.active:after {
+  content: '';
+  cursor: pointer;
+  position: fixed;
+  top: 1em;
+  right: 1em;
+  width: 4em;
+  height: 4em;
+  border-radius: 50%;
+  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cg stroke='%23fff' stroke-width='.5'%3E%3Cline x1='1' y1='1' x2='9' y2='9' /%3E%3Cline x1='9' y1='1' x2='1' y2='9' /%3E%3C/g%3E%3C/svg%3E");
+  background-color: rgba(0, 0, 0, .8);
+  background-size: 50%;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+@keyframes scale-down {
+  from { transform: scale(1.02); }
+  to { transform: scale(1); }
+}
\ No newline at end of file
diff --git a/balanced-truncation/LICENSE.txt b/balanced-truncation/LICENSE.txt
new file mode 100644
index 0000000..232aa23
--- /dev/null
+++ b/balanced-truncation/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Adam Argyle (https://codepen.io/argyleink/pen/XWyRrxz)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/balanced-truncation/README.md b/balanced-truncation/README.md
new file mode 100644
index 0000000..dcff9ba
--- /dev/null
+++ b/balanced-truncation/README.md
@@ -0,0 +1,4 @@
+# Balanced Truncation
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/argyleink/pen/XWyRrxz](https://codepen.io/argyleink/pen/XWyRrxz).
+
diff --git a/balanced-truncation/dist/index.html b/balanced-truncation/dist/index.html
new file mode 100644
index 0000000..3ee4962
--- /dev/null
+++ b/balanced-truncation/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Balanced Truncation</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<label>Balanced <input type="checkbox" checked></label>
+<p>Lorem ipsum dolor sit amet consectetur elit. Quasi, commodi laudantium recusandae repellat accusantium, praesentium expedita magnam labore vitae neque ex. Dolorem enim asperiores corporis officia inventore impedit ratione laudantium.</p>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/balanced-truncation/dist/style.css b/balanced-truncation/dist/style.css
new file mode 100644
index 0000000..16aa596
--- /dev/null
+++ b/balanced-truncation/dist/style.css
@@ -0,0 +1,41 @@
+@layer demo {
+  p {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;  
+    overflow: hidden;
+    max-inline-size: 40ch;
+  }
+  
+  html:has(input[type=checkbox]:checked) p {
+    text-wrap: balance;
+  }
+}
+
+@layer demo.support {
+  * {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  html {
+    block-size: 100%;
+    color-scheme: dark light;
+  }
+
+  body {
+    min-block-size: 100%;
+    font-family: system-ui, sans-serif;
+
+    display: grid;
+    place-content: center;
+    gap: 1rem;
+  }
+  
+  label {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: row-reverse;
+    gap: 1ch;
+  }
+}
\ No newline at end of file
diff --git a/balanced-truncation/src/index.html b/balanced-truncation/src/index.html
new file mode 100644
index 0000000..d9d547a
--- /dev/null
+++ b/balanced-truncation/src/index.html
@@ -0,0 +1,2 @@
+<label>Balanced <input type="checkbox" checked></label>
+<p>Lorem ipsum dolor sit amet consectetur elit. Quasi, commodi laudantium recusandae repellat accusantium, praesentium expedita magnam labore vitae neque ex. Dolorem enim asperiores corporis officia inventore impedit ratione laudantium.</p>
\ No newline at end of file
diff --git a/balanced-truncation/src/style.css b/balanced-truncation/src/style.css
new file mode 100644
index 0000000..16aa596
--- /dev/null
+++ b/balanced-truncation/src/style.css
@@ -0,0 +1,41 @@
+@layer demo {
+  p {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;  
+    overflow: hidden;
+    max-inline-size: 40ch;
+  }
+  
+  html:has(input[type=checkbox]:checked) p {
+    text-wrap: balance;
+  }
+}
+
+@layer demo.support {
+  * {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  html {
+    block-size: 100%;
+    color-scheme: dark light;
+  }
+
+  body {
+    min-block-size: 100%;
+    font-family: system-ui, sans-serif;
+
+    display: grid;
+    place-content: center;
+    gap: 1rem;
+  }
+  
+  label {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: row-reverse;
+    gap: 1ch;
+  }
+}
\ No newline at end of file
diff --git a/banksyvalentine-s-day/README.markdown b/banksyvalentine-s-day/README.markdown
new file mode 100644
index 0000000..508ed65
--- /dev/null
+++ b/banksyvalentine-s-day/README.markdown
@@ -0,0 +1,4 @@
+# Banksy - Valentine's Day
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/loficodes/pen/MWwyaxj](https://codepen.io/loficodes/pen/MWwyaxj).
+
+ 
\ No newline at end of file
diff --git a/banksyvalentine-s-day/dist/index.html b/banksyvalentine-s-day/dist/index.html
new file mode 100644
index 0000000..25460a4
--- /dev/null
+++ b/banksyvalentine-s-day/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Banksy - Valentine&#39;s Day</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdn.jsdelivr.net/npm/p5'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/banksyvalentine-s-day/dist/script.js b/banksyvalentine-s-day/dist/script.js
new file mode 100644
index 0000000..2defa85
--- /dev/null
+++ b/banksyvalentine-s-day/dist/script.js
@@ -0,0 +1,231 @@
+var startPos;
+var endPos;
+var bullets = [];
+var flowers = [];
+var showVector = false;
+var splatterPane;
+var flowerCount = 20;
+var dripCount = 4;
+var maxSpeed = 50;
+var girlW = 100;
+var girlH = girlW * 1.72;
+var buttonW = Math.max(window.innerWidth * .1, 80);
+var buttonH = Math.max(window.innerHeight * .05, 20);
+
+// BULLET CLASS
+function Bullet(x, y) {
+  this.pos = createVector(girlW, height-girlH);
+  this.vel = createVector(x, y);
+  this.grav= createVector(0,.25);
+  this.maxSpeed = 20;
+  
+  this.vel.setMag(map(this.vel.mag(), 0,500,0,this.maxSpeed))
+  
+  this.update = function() {
+    this.vel.add(this.grav);
+    this.pos.add(this.vel);
+  }
+  
+  this.show = function() {
+    noStroke();
+    ellipse(this.pos.x, this.pos.y, 10, 10);
+  }
+}
+
+// FLOWER CLASS
+function Flower(pos, vel, chance) {
+  this.chance = chance;
+  this.pos = pos;
+  this.vel = vel;
+  this.acc = createVector(0,0);
+  this.lifetimeStart = 20;
+  this.lifetime = this.lifetimeStart;
+  this.grav = createVector(0, .25);
+  this.dead = false;
+  this.size = 10;
+  this.prevPos;
+  
+  this.update = function() {
+    if ( !this.dead ){
+      //save
+      this.prevPos = this.pos.copy();
+      
+      // accumulate
+      this.acc.add(this.grav);
+      this.vel.add(this.acc);
+      this.pos.add(this.vel);
+
+      // reset
+      this.acc = createVector(0,0);
+
+      // increment
+      this.lifetime--;
+      if ( this.lifetime == 0 ) {
+        this.dead = true;
+      }
+    }
+  }
+  
+  this.show = function() {
+    var size = this.size * (this.lifetime/this.lifetimeStart);
+    var lightness = floor(random(42,50));
+    
+    if (random() < this.chance ) {
+      splatterPane.stroke(color("hsl(0,60%,"+lightness+"%)"));
+      splatterPane.strokeWeight(size);
+      splatterPane.noFill();
+      splatterPane.line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
+    }
+  }
+}
+
+// P5 setup
+function preload() {
+  girl = loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/banksy.png');
+  
+  chelsea = loadFont('https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/ChelseaMarket-Regular.ttf');
+  
+}
+function setup() {
+  createCanvas(windowWidth,windowHeight);
+  splatterPane = createGraphics(width, height);
+  
+  button = createButton('RESET');
+  button.position(width - (buttonW + 20), height - (buttonH + 40));
+  button.mousePressed(reset);
+  
+  button.size(buttonW, buttonH);
+}
+function draw() {
+  background(204);
+  drawInstructions();
+  image(girl, 0, height-girlH, girlW, girlH);
+  image(splatterPane, 0, 0, width, height);
+  
+  fill(0)
+  
+  // VECTOR
+  if ( showVector ) {
+    var d = dist(startPos.x, startPos.y, mouseX, mouseY);
+    var m = createVector(mouseX, mouseY);
+    var angle = startPos.angleBetween(m);
+    var hue = min(map(d, 0, height/3, 0, 100), 100);
+    var col = color('hsl('+floor(hue)+',50%,50%)');
+    stroke(col);
+    
+    strokeWeight(10)
+    line(startPos.x, startPos.y, mouseX, mouseY);
+  }
+  
+  // BULLETS
+  for(let i = bullets.length-1; i >=0; i--) {
+    var b = bullets[i];
+    b.update();
+    b.show();
+    if ( b.pos.y > height ) {
+      bullets.splice(i, 1);
+    }
+  }
+  
+  // FLOWERS
+  for(let i = flowers.length-1; i >=0; i--) {
+    var f = flowers[i];
+    f.update();
+    f.show();
+    if ( f.dead ) {
+      flowers.splice(i, 1);
+    }
+  }
+}
+
+// BULLET TO FLOWERS
+function burst () {
+  for ( var j = 0; j < bullets.length; j++){
+    var b = bullets[j];
+    var mag = b.vel.mag();
+    var magPower = 1.2
+    
+    for ( var i = 0; i < (mag*magPower); i++){
+      var pos = createVector(b.pos.x, b.pos.y);
+      var vel = createVector(b.vel.x, b.vel.y);
+      
+      var angle = (TAU/(mag*magPower))*i;
+      
+      newVel = createVector(vel.x, vel.y).rotate(angle);
+      var angle = vel.angleBetween(newVel);
+      var angleDiff = PI - abs(angle) + .5;
+      
+      var chanceOfShowing = map(angleDiff, 0, PI, 0, .9);
+      newVel.mult(map(angleDiff, 0, PI, 0, .5))
+      
+      var f = new Flower(pos, newVel, chanceOfShowing);
+      flowers.push(f); 
+    }
+    for ( var i = 0; i < dripCount; i++){
+      
+      var pos = createVector(b.pos.x+(random(-mag,mag)), b.pos.y);
+      var vel = createVector(0,1).setMag(mag*.3);
+      var f = new Flower(pos, vel, .8);
+      flowers.push(f); 
+    }
+  }
+  console.log(flowers)
+  bullets = new Array;
+}
+
+// FIRE A BULLET
+function fire() {
+  var d = dist(startPos.x, startPos.y, endPos.x, endPos.y);
+  
+  if ( d < 10 ) {
+    burst();
+  } else {
+    var b = new Bullet(startPos.x - endPos.x, startPos.y - endPos.y); 
+    bullets.push(b);
+  }
+}
+
+// EVENTS
+function start() {
+  startPos = createVector(mouseX, mouseY);
+  showVector = true;
+}
+function end() {
+  endPos = createVector(mouseX, mouseY);
+  showVector = false;
+  fire();
+}
+function mousePressed() {
+  start()
+}
+function touchStarted() {
+  start()
+}
+function mouseReleased() {
+  end()
+}
+function touchEnded() {
+  end()
+}
+
+// RESET
+function reset() {
+  splatterPane.clear();
+}
+
+// DRAW INSTRUCTIONS
+function drawInstructions () {
+  noStroke();
+  fill(70);
+  textFont(chelsea);
+  textSize(32);
+  textAlign(CENTER);
+  var topAlign = max(height*.1)
+  text('drag to aim', width/2, topAlign);
+  text('tap to burst', width/2, topAlign*2);
+}
+
+// NO WEIRDNESS ON MOBILE
+document.ontouchmove = function(event){
+    event.preventDefault();
+}
\ No newline at end of file
diff --git a/banksyvalentine-s-day/dist/style.css b/banksyvalentine-s-day/dist/style.css
new file mode 100644
index 0000000..1709a6e
--- /dev/null
+++ b/banksyvalentine-s-day/dist/style.css
@@ -0,0 +1,19 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+canvas {
+  width: 500px;
+  height: 500px;
+  max-width: 100vw;
+	max-height: 100vh;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+  border: 2px solid #8DA5B2;
+}
\ No newline at end of file
diff --git a/banksyvalentine-s-day/license.txt b/banksyvalentine-s-day/license.txt
new file mode 100644
index 0000000..33cb8ed
--- /dev/null
+++ b/banksyvalentine-s-day/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by LoFi (https://codepen.io/loficodes/pen/MWwyaxj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/banksyvalentine-s-day/src/index.html b/banksyvalentine-s-day/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/banksyvalentine-s-day/src/script.js b/banksyvalentine-s-day/src/script.js
new file mode 100644
index 0000000..2defa85
--- /dev/null
+++ b/banksyvalentine-s-day/src/script.js
@@ -0,0 +1,231 @@
+var startPos;
+var endPos;
+var bullets = [];
+var flowers = [];
+var showVector = false;
+var splatterPane;
+var flowerCount = 20;
+var dripCount = 4;
+var maxSpeed = 50;
+var girlW = 100;
+var girlH = girlW * 1.72;
+var buttonW = Math.max(window.innerWidth * .1, 80);
+var buttonH = Math.max(window.innerHeight * .05, 20);
+
+// BULLET CLASS
+function Bullet(x, y) {
+  this.pos = createVector(girlW, height-girlH);
+  this.vel = createVector(x, y);
+  this.grav= createVector(0,.25);
+  this.maxSpeed = 20;
+  
+  this.vel.setMag(map(this.vel.mag(), 0,500,0,this.maxSpeed))
+  
+  this.update = function() {
+    this.vel.add(this.grav);
+    this.pos.add(this.vel);
+  }
+  
+  this.show = function() {
+    noStroke();
+    ellipse(this.pos.x, this.pos.y, 10, 10);
+  }
+}
+
+// FLOWER CLASS
+function Flower(pos, vel, chance) {
+  this.chance = chance;
+  this.pos = pos;
+  this.vel = vel;
+  this.acc = createVector(0,0);
+  this.lifetimeStart = 20;
+  this.lifetime = this.lifetimeStart;
+  this.grav = createVector(0, .25);
+  this.dead = false;
+  this.size = 10;
+  this.prevPos;
+  
+  this.update = function() {
+    if ( !this.dead ){
+      //save
+      this.prevPos = this.pos.copy();
+      
+      // accumulate
+      this.acc.add(this.grav);
+      this.vel.add(this.acc);
+      this.pos.add(this.vel);
+
+      // reset
+      this.acc = createVector(0,0);
+
+      // increment
+      this.lifetime--;
+      if ( this.lifetime == 0 ) {
+        this.dead = true;
+      }
+    }
+  }
+  
+  this.show = function() {
+    var size = this.size * (this.lifetime/this.lifetimeStart);
+    var lightness = floor(random(42,50));
+    
+    if (random() < this.chance ) {
+      splatterPane.stroke(color("hsl(0,60%,"+lightness+"%)"));
+      splatterPane.strokeWeight(size);
+      splatterPane.noFill();
+      splatterPane.line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
+    }
+  }
+}
+
+// P5 setup
+function preload() {
+  girl = loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/banksy.png');
+  
+  chelsea = loadFont('https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/ChelseaMarket-Regular.ttf');
+  
+}
+function setup() {
+  createCanvas(windowWidth,windowHeight);
+  splatterPane = createGraphics(width, height);
+  
+  button = createButton('RESET');
+  button.position(width - (buttonW + 20), height - (buttonH + 40));
+  button.mousePressed(reset);
+  
+  button.size(buttonW, buttonH);
+}
+function draw() {
+  background(204);
+  drawInstructions();
+  image(girl, 0, height-girlH, girlW, girlH);
+  image(splatterPane, 0, 0, width, height);
+  
+  fill(0)
+  
+  // VECTOR
+  if ( showVector ) {
+    var d = dist(startPos.x, startPos.y, mouseX, mouseY);
+    var m = createVector(mouseX, mouseY);
+    var angle = startPos.angleBetween(m);
+    var hue = min(map(d, 0, height/3, 0, 100), 100);
+    var col = color('hsl('+floor(hue)+',50%,50%)');
+    stroke(col);
+    
+    strokeWeight(10)
+    line(startPos.x, startPos.y, mouseX, mouseY);
+  }
+  
+  // BULLETS
+  for(let i = bullets.length-1; i >=0; i--) {
+    var b = bullets[i];
+    b.update();
+    b.show();
+    if ( b.pos.y > height ) {
+      bullets.splice(i, 1);
+    }
+  }
+  
+  // FLOWERS
+  for(let i = flowers.length-1; i >=0; i--) {
+    var f = flowers[i];
+    f.update();
+    f.show();
+    if ( f.dead ) {
+      flowers.splice(i, 1);
+    }
+  }
+}
+
+// BULLET TO FLOWERS
+function burst () {
+  for ( var j = 0; j < bullets.length; j++){
+    var b = bullets[j];
+    var mag = b.vel.mag();
+    var magPower = 1.2
+    
+    for ( var i = 0; i < (mag*magPower); i++){
+      var pos = createVector(b.pos.x, b.pos.y);
+      var vel = createVector(b.vel.x, b.vel.y);
+      
+      var angle = (TAU/(mag*magPower))*i;
+      
+      newVel = createVector(vel.x, vel.y).rotate(angle);
+      var angle = vel.angleBetween(newVel);
+      var angleDiff = PI - abs(angle) + .5;
+      
+      var chanceOfShowing = map(angleDiff, 0, PI, 0, .9);
+      newVel.mult(map(angleDiff, 0, PI, 0, .5))
+      
+      var f = new Flower(pos, newVel, chanceOfShowing);
+      flowers.push(f); 
+    }
+    for ( var i = 0; i < dripCount; i++){
+      
+      var pos = createVector(b.pos.x+(random(-mag,mag)), b.pos.y);
+      var vel = createVector(0,1).setMag(mag*.3);
+      var f = new Flower(pos, vel, .8);
+      flowers.push(f); 
+    }
+  }
+  console.log(flowers)
+  bullets = new Array;
+}
+
+// FIRE A BULLET
+function fire() {
+  var d = dist(startPos.x, startPos.y, endPos.x, endPos.y);
+  
+  if ( d < 10 ) {
+    burst();
+  } else {
+    var b = new Bullet(startPos.x - endPos.x, startPos.y - endPos.y); 
+    bullets.push(b);
+  }
+}
+
+// EVENTS
+function start() {
+  startPos = createVector(mouseX, mouseY);
+  showVector = true;
+}
+function end() {
+  endPos = createVector(mouseX, mouseY);
+  showVector = false;
+  fire();
+}
+function mousePressed() {
+  start()
+}
+function touchStarted() {
+  start()
+}
+function mouseReleased() {
+  end()
+}
+function touchEnded() {
+  end()
+}
+
+// RESET
+function reset() {
+  splatterPane.clear();
+}
+
+// DRAW INSTRUCTIONS
+function drawInstructions () {
+  noStroke();
+  fill(70);
+  textFont(chelsea);
+  textSize(32);
+  textAlign(CENTER);
+  var topAlign = max(height*.1)
+  text('drag to aim', width/2, topAlign);
+  text('tap to burst', width/2, topAlign*2);
+}
+
+// NO WEIRDNESS ON MOBILE
+document.ontouchmove = function(event){
+    event.preventDefault();
+}
\ No newline at end of file
diff --git a/banksyvalentine-s-day/src/style.css b/banksyvalentine-s-day/src/style.css
new file mode 100644
index 0000000..1709a6e
--- /dev/null
+++ b/banksyvalentine-s-day/src/style.css
@@ -0,0 +1,19 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+canvas {
+  width: 500px;
+  height: 500px;
+  max-width: 100vw;
+	max-height: 100vh;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+  border: 2px solid #8DA5B2;
+}
\ No newline at end of file
diff --git a/based-on-moir-motion-by-takahiro-kurashima-san/README.markdown b/based-on-moir-motion-by-takahiro-kurashima-san/README.markdown
new file mode 100644
index 0000000..ee5022a
--- /dev/null
+++ b/based-on-moir-motion-by-takahiro-kurashima-san/README.markdown
@@ -0,0 +1,6 @@
+# Based on Moirémotion by TAKAHIRO KURASHIMA-san
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/toshiya-marukubo/pen/ExwbrVV](https://codepen.io/toshiya-marukubo/pen/ExwbrVV).
+
+Based on Moirémotion by TAKAHIRO KURASHIMA-san.  
+Please google it. It's an amazing book.
diff --git a/based-on-moir-motion-by-takahiro-kurashima-san/dist/index.html b/based-on-moir-motion-by-takahiro-kurashima-san/dist/index.html
new file mode 100644
index 0000000..b3d288b
--- /dev/null
+++ b/based-on-moir-motion-by-takahiro-kurashima-san/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Based on Moirémotion by TAKAHIRO KURASHIMA-san</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>Based on Moirémotion by TAKAHIRO KURASHIMA-san</h1>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/based-on-moir-motion-by-takahiro-kurashima-san/dist/script.js b/based-on-moir-motion-by-takahiro-kurashima-san/dist/script.js
new file mode 100644
index 0000000..cf7f995
--- /dev/null
+++ b/based-on-moir-motion-by-takahiro-kurashima-san/dist/script.js
@@ -0,0 +1,123 @@
+class Sketch {
+  constructor() {
+    this.setupCanvas();
+    this.setupEvents();
+    
+    this.initialize();
+  }
+  
+  setupCanvas() {
+    this.canvas = document.createElement('canvas');
+    document.getElementsByTagName('body')[0].appendChild(this.canvas);
+    this.ctx = this.canvas.getContext('2d');
+    this.canvas.style.display = 'block';
+    this.canvas.style.height = '100%';
+    this.canvas.style.width = '100%';
+    this.canvas.style.position = 'fixed';
+    this.canvas.style.top = '0';
+    this.canvas.style.left = '0';
+    this.canvas.style.zIndex = '-1';
+    this.canvas.style.background = '#FFF';
+  }
+  
+  setupEvents() {
+    window.addEventListener('resize', this.onResize.bind(this));
+    document.body.addEventListener('click', this.onClick.bind(this));
+    document.body.addEventListener('mousemove', this.onMousemove.bind(this));
+    document.body.addEventListener('touchmove', this.onTouchmove.bind(this));
+  }
+  
+  onResize() {
+    this.initialize();
+  }
+  
+  onClick() {
+    if (this.display) {
+      this.display = false;
+    } else {
+      this.display = true;
+    }
+  }
+  
+  onMousemove(e) {
+    this.mouseX = e.clientX;
+    this.mouseY = e.clientY;
+  }
+  
+  onTouchmove(e) {
+    const touches = e.touches[0];
+    
+    this.mouseX = touches.clientX;
+    this.mouseY = touches.clientY;
+  }
+  
+  initialize() {
+    if (this.id) {
+      cancelAnimationFrame(this.id);
+    }
+    
+    this.display = true;
+    
+    this.width = this.canvas.width = Math.floor(window.innerWidth);
+    this.height = this.canvas.height = Math.floor(window.innerHeight);
+    
+    this.mouseX = this.width / 2;
+    this.mouseY = this.height / 2;
+    
+    this.shapes = [];
+    this.step = 5;
+    
+    for (let x = -this.width; x <= this.width; x += this.step) {
+      const tmp = {
+        x: x,
+        y: 0,
+        r: (2.0 - Math.abs(x) / (this.width)) * 0.8
+      };
+      
+      this.shapes.push(tmp);
+    }
+    
+    this.draw(0);
+  }
+  
+  draw(t) {
+    t *= 0.1;
+    
+    this.ctx.save();
+    this.ctx.clearRect(0, 0, this.width, this.height);
+    this.ctx.translate(this.width / 2, 0);
+    
+    if (this.display) {
+      for (let i = 0; i < this.shapes.length; i++) {
+        const s = this.shapes[i];
+        this.ctx.beginPath();
+        this.ctx.moveTo(s.x * s.r, s.y);
+        this.ctx.lineTo(s.x * s.r - this.step * 10, this.height);
+        this.ctx.stroke();
+      }
+    }
+    
+    this.ctx.restore();
+    
+    this.ctx.save();
+    this.ctx.translate(this.mouseX, this.mouseY);
+    this.ctx.lineWidth = this.step;
+    for (let i = -this.width / 4; i <= this.width / 4; i += this.step + 1) {
+      this.ctx.beginPath();
+      this.ctx.moveTo(i, -this.height / 4);
+      this.ctx.lineTo(i, this.height / 4);
+      this.ctx.stroke();
+    }
+    this.ctx.restore();
+    
+    this.id = requestAnimationFrame(this.draw.bind(this));
+  }
+}
+
+(function() {
+  window.addEventListener('DOMContentLoaded', () => {
+    console.clear();
+    
+    new Sketch();
+  });
+})();
\ No newline at end of file
diff --git a/based-on-moir-motion-by-takahiro-kurashima-san/dist/style.css b/based-on-moir-motion-by-takahiro-kurashima-san/dist/style.css
new file mode 100644
index 0000000..4c6146b
--- /dev/null
+++ b/based-on-moir-motion-by-takahiro-kurashima-san/dist/style.css
@@ -0,0 +1,21 @@
+* {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  cursor: pointer;
+}
+html,
+body {
+  font-size: 12px;
+  font-family: serif;
+}
+h1 {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0,0,0,0.8);
+  color: #fff;
+  padding: 16px;
+  line-height: 1.5;
+}
\ No newline at end of file
diff --git a/based-on-moir-motion-by-takahiro-kurashima-san/license.txt b/based-on-moir-motion-by-takahiro-kurashima-san/license.txt
new file mode 100644
index 0000000..1d615cb
--- /dev/null
+++ b/based-on-moir-motion-by-takahiro-kurashima-san/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Toshiya Marukubo (https://codepen.io/toshiya-marukubo/pen/ExwbrVV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/based-on-moir-motion-by-takahiro-kurashima-san/src/index.pug b/based-on-moir-motion-by-takahiro-kurashima-san/src/index.pug
new file mode 100644
index 0000000..ae689a2
--- /dev/null
+++ b/based-on-moir-motion-by-takahiro-kurashima-san/src/index.pug
@@ -0,0 +1 @@
+h1 Based on Moirémotion by TAKAHIRO KURASHIMA-san
\ No newline at end of file
diff --git a/based-on-moir-motion-by-takahiro-kurashima-san/src/script.js b/based-on-moir-motion-by-takahiro-kurashima-san/src/script.js
new file mode 100644
index 0000000..cf7f995
--- /dev/null
+++ b/based-on-moir-motion-by-takahiro-kurashima-san/src/script.js
@@ -0,0 +1,123 @@
+class Sketch {
+  constructor() {
+    this.setupCanvas();
+    this.setupEvents();
+    
+    this.initialize();
+  }
+  
+  setupCanvas() {
+    this.canvas = document.createElement('canvas');
+    document.getElementsByTagName('body')[0].appendChild(this.canvas);
+    this.ctx = this.canvas.getContext('2d');
+    this.canvas.style.display = 'block';
+    this.canvas.style.height = '100%';
+    this.canvas.style.width = '100%';
+    this.canvas.style.position = 'fixed';
+    this.canvas.style.top = '0';
+    this.canvas.style.left = '0';
+    this.canvas.style.zIndex = '-1';
+    this.canvas.style.background = '#FFF';
+  }
+  
+  setupEvents() {
+    window.addEventListener('resize', this.onResize.bind(this));
+    document.body.addEventListener('click', this.onClick.bind(this));
+    document.body.addEventListener('mousemove', this.onMousemove.bind(this));
+    document.body.addEventListener('touchmove', this.onTouchmove.bind(this));
+  }
+  
+  onResize() {
+    this.initialize();
+  }
+  
+  onClick() {
+    if (this.display) {
+      this.display = false;
+    } else {
+      this.display = true;
+    }
+  }
+  
+  onMousemove(e) {
+    this.mouseX = e.clientX;
+    this.mouseY = e.clientY;
+  }
+  
+  onTouchmove(e) {
+    const touches = e.touches[0];
+    
+    this.mouseX = touches.clientX;
+    this.mouseY = touches.clientY;
+  }
+  
+  initialize() {
+    if (this.id) {
+      cancelAnimationFrame(this.id);
+    }
+    
+    this.display = true;
+    
+    this.width = this.canvas.width = Math.floor(window.innerWidth);
+    this.height = this.canvas.height = Math.floor(window.innerHeight);
+    
+    this.mouseX = this.width / 2;
+    this.mouseY = this.height / 2;
+    
+    this.shapes = [];
+    this.step = 5;
+    
+    for (let x = -this.width; x <= this.width; x += this.step) {
+      const tmp = {
+        x: x,
+        y: 0,
+        r: (2.0 - Math.abs(x) / (this.width)) * 0.8
+      };
+      
+      this.shapes.push(tmp);
+    }
+    
+    this.draw(0);
+  }
+  
+  draw(t) {
+    t *= 0.1;
+    
+    this.ctx.save();
+    this.ctx.clearRect(0, 0, this.width, this.height);
+    this.ctx.translate(this.width / 2, 0);
+    
+    if (this.display) {
+      for (let i = 0; i < this.shapes.length; i++) {
+        const s = this.shapes[i];
+        this.ctx.beginPath();
+        this.ctx.moveTo(s.x * s.r, s.y);
+        this.ctx.lineTo(s.x * s.r - this.step * 10, this.height);
+        this.ctx.stroke();
+      }
+    }
+    
+    this.ctx.restore();
+    
+    this.ctx.save();
+    this.ctx.translate(this.mouseX, this.mouseY);
+    this.ctx.lineWidth = this.step;
+    for (let i = -this.width / 4; i <= this.width / 4; i += this.step + 1) {
+      this.ctx.beginPath();
+      this.ctx.moveTo(i, -this.height / 4);
+      this.ctx.lineTo(i, this.height / 4);
+      this.ctx.stroke();
+    }
+    this.ctx.restore();
+    
+    this.id = requestAnimationFrame(this.draw.bind(this));
+  }
+}
+
+(function() {
+  window.addEventListener('DOMContentLoaded', () => {
+    console.clear();
+    
+    new Sketch();
+  });
+})();
\ No newline at end of file
diff --git a/based-on-moir-motion-by-takahiro-kurashima-san/src/style.styl b/based-on-moir-motion-by-takahiro-kurashima-san/src/style.styl
new file mode 100644
index 0000000..600790a
--- /dev/null
+++ b/based-on-moir-motion-by-takahiro-kurashima-san/src/style.styl
@@ -0,0 +1,19 @@
+*
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  cursor: pointer;
+  
+html, body
+  font-size: 12px;
+  font-family: serif;
+
+h1
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.8);
+  color: #FFF;
+  padding: 16px;
+  line-height: 1.5;
\ No newline at end of file
diff --git a/baubudsgenerative-bauhaus-inspired-characters/README.markdown b/baubudsgenerative-bauhaus-inspired-characters/README.markdown
new file mode 100644
index 0000000..c5f5a54
--- /dev/null
+++ b/baubudsgenerative-bauhaus-inspired-characters/README.markdown
@@ -0,0 +1,5 @@
+# BauBuds - Generative Bauhaus inspired Characters
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/georgedoescode/pen/VwmbxRy](https://codepen.io/georgedoescode/pen/VwmbxRy).
+
+BauBuds are generative Bauhaus inspired characters for an upcoming project... keep an eye out for them in the future! 👀
diff --git a/baubudsgenerative-bauhaus-inspired-characters/dist/index.html b/baubudsgenerative-bauhaus-inspired-characters/dist/index.html
new file mode 100644
index 0000000..e97c1af
--- /dev/null
+++ b/baubudsgenerative-bauhaus-inspired-characters/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - BauBuds - Generative Bauhaus inspired Characters</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="buds"></div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/baubudsgenerative-bauhaus-inspired-characters/dist/script.js b/baubudsgenerative-bauhaus-inspired-characters/dist/script.js
new file mode 100644
index 0000000..dc8fcb3
--- /dev/null
+++ b/baubudsgenerative-bauhaus-inspired-characters/dist/script.js
@@ -0,0 +1,237 @@
+import { SVG } from "https://cdn.skypack.dev/@svgdotjs/svg.js";
+
+function random(min, max, clamp = false) {
+  const value = Math.random() * (max - min) + min;
+
+  return clamp ? Math.round(value) : value;
+}
+
+class BauBudEyes {}
+
+class BauBudPatternGenerator {
+  constructor(svg) {
+    this.svg = svg;
+    this.types = ["dots", "rects"];
+  }
+
+  generate(fill) {
+    this.type = this.types[random(0, this.types.length, true)];
+
+    return this.svg.pattern(4, 4, (add) => {
+      if (this.type === "rects") {
+        add.rect(2, 2).cx(0).cy(0).fill(fill);
+      } else {
+        add.circle(1).cx(2).cy(2).fill(fill);
+      }
+    });
+  }
+}
+
+class BauBudBody {
+  constructor(svg, x, y, width, height) {
+    this.svg = svg.group();
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+
+    this.types = [
+      this.circle,
+      this.rect,
+      this.equilateralTriangle,
+      this.rightAngleTriangle,
+      this.semiCircle
+    ];
+
+    this.patternGenerator = new BauBudPatternGenerator(this.svg);
+  }
+
+  circle() {
+    this.type = "circle";
+
+    return this.svg
+      .circle(Math.max(this.width, this.height))
+      .cx(this.x)
+      .cy(this.height);
+  }
+
+  rect() {
+    this.type = "rect";
+
+    return this.svg.rect(this.width, this.height).cx(this.x).cy(this.y);
+  }
+
+  equilateralTriangle() {
+    this.type = "equilateralTriangle";
+
+    return this.svg
+      .path(
+        `
+      M ${this.x} ${this.y - this.height / 2}
+      L ${this.x + this.width / 2} ${this.y + this.height / 2}
+      L ${this.x - this.width / 2} ${this.y + this.height / 2}
+      Z
+    `
+      )
+      .rotate(this.randomRotation(180));
+  }
+
+  rightAngleTriangle() {
+    this.type = "rightAngleTriangle";
+
+    return this.svg
+      .path(
+        `
+      M ${this.x - this.width / 2} ${this.y - this.height / 2}
+      L ${this.x + this.width / 2} ${this.y + this.height / 2}
+      L ${this.x - this.width / 2} ${this.y + this.height / 2}
+      Z
+    `
+      )
+      .rotate(this.randomRotation(90));
+  }
+
+  semiCircle() {
+    this.type = "semiCircle";
+
+    const rad = Math.max(this.width, this.height) / 2;
+
+    return this.svg
+      .path(
+        `
+        M ${this.x - rad} ${this.y + rad / 2}
+        A ${rad} ${rad} 0 0 1 ${this.x + this.width / 2} ${this.y + rad / 2}
+        Z
+      `
+      )
+      .rotate(this.randomRotation(180));
+  }
+
+  randomRotation(step = 90) {
+    const n = 360 / step;
+    return random(0, n, true) * step;
+  }
+
+  generate() {
+    this.svg.clear();
+
+    this.fill = ["red", "yellow", "blue"][random(0, 2, true)];
+
+    const pattern = this.patternGenerator.generate("#000");
+
+    this.base = this.types[random(0, this.types.length - 1, true)]
+      .call(this)
+      .fill("none")
+      .stroke("none");
+
+    let translateVal = random(5, 15);
+    if (random(0, 1) > 0.5) translateVal *= -1;
+
+    this.fill = this.base
+      .clone()
+      .addTo(this.svg)
+      .fill(this.fill)
+      .translate(translateVal, -translateVal);
+
+    this.pattern = this.base
+      .clone()
+      .addTo(this.svg)
+      .fill(pattern)
+      .translate(-translateVal * 2, translateVal * 2)
+      .scale(random(0.625, 0.825));
+
+    this.outline = this.base
+      .clone()
+      .addTo(this.svg)
+      .stroke("black")
+      .fill("transparent");
+  }
+}
+
+class BauBud {
+  constructor(target) {
+    this.svg = SVG().viewbox(0, 0, 200, 200).addTo(target);
+
+    this.body = new BauBudBody(this.svg, 100, 100, 100, 100);
+    this.eyes = new BauBudEyes(this.svg, 100, 100);
+  }
+
+  generate() {
+    this.body.generate();
+
+    const eyeWidth = random(5, 20);
+    const innerWidth = 8;
+
+    this.svg
+      .ellipse(16)
+      .stroke("#000")
+      .fill("#fff")
+      .cx(100 - eyeWidth)
+      .cy(100);
+    this.svg
+      .ellipse(16)
+      .stroke("#000")
+      .fill("#fff")
+      .cx(100 + eyeWidth)
+      .cy(100);
+
+    const choice = random(0, 5, true);
+
+    let leftEyeInnerX = 100 - eyeWidth;
+    let rightEyeInnerX = 100 + eyeWidth;
+
+    let eyeY = 100;
+
+    switch (choice) {
+      case 1:
+        leftEyeInnerX -= 4;
+        rightEyeInnerX -= 4;
+        break;
+      case 2:
+        leftEyeInnerX += 4;
+        rightEyeInnerX += 4;
+        break;
+      case 3:
+        eyeY += 4;
+        break;
+      case 4:
+        eyeY -= 4;
+        break;
+
+      default:
+        leftEyeInnerX = leftEyeInnerX;
+        rightEyeInnerX = rightEyeInnerX;
+    }
+
+    this.svg
+      .ellipse(innerWidth)
+      .stroke("#000")
+      .fill("#000")
+      .cx(leftEyeInnerX)
+      .cy(eyeY);
+    this.svg
+      .ellipse(innerWidth)
+      .stroke("#000")
+      .fill("#000")
+      .cx(rightEyeInnerX)
+      .cy(eyeY);
+  }
+}
+
+for (let i = 0; i < 100; i++) {
+  const bauBud = new BauBud(document.querySelector(".buds"));
+  bauBud.generate();
+}
+
+const buds = document.querySelector(".buds");
+
+setInterval(() => {
+  const y = window.pageYOffset;
+  const windowHeight = window.innerHeight;
+  if (y + 200 + windowHeight >= buds.scrollHeight) {
+    for (let i = 0; i < 100; i++) {
+      const bauBud = new BauBud(buds);
+      bauBud.generate();
+    }
+  }
+}, 100);
\ No newline at end of file
diff --git a/baubudsgenerative-bauhaus-inspired-characters/dist/style.css b/baubudsgenerative-bauhaus-inspired-characters/dist/style.css
new file mode 100644
index 0000000..0378ccd
--- /dev/null
+++ b/baubudsgenerative-bauhaus-inspired-characters/dist/style.css
@@ -0,0 +1,48 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --grid-rows: repeat(2, 1fr);
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: Helvetica, system-ui, sans-serif;
+  color: #000;
+  padding: 1.5rem;
+  line-height: 1;
+}
+
+.buds {
+  display: grid;
+  grid-template-columns: var(--grid-rows);
+}
+
+svg {
+  width: 100%;
+}
+
+@media only screen and (min-width: 800px) {
+  :root {
+    --grid-rows: repeat(3, 1fr);
+  }
+}
+
+@media only screen and (min-width: 1280px) {
+  :root {
+    --grid-rows: repeat(4, 1fr);
+  }
+}
+
+@media only screen and (min-width: 1600px) {
+  :root {
+    --grid-rows: repeat(5, 1fr);
+  }
+}
\ No newline at end of file
diff --git a/baubudsgenerative-bauhaus-inspired-characters/license.txt b/baubudsgenerative-bauhaus-inspired-characters/license.txt
new file mode 100644
index 0000000..2bd315e
--- /dev/null
+++ b/baubudsgenerative-bauhaus-inspired-characters/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by George Francis (https://codepen.io/georgedoescode/pen/VwmbxRy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/baubudsgenerative-bauhaus-inspired-characters/src/index.html b/baubudsgenerative-bauhaus-inspired-characters/src/index.html
new file mode 100644
index 0000000..1e5b05f
--- /dev/null
+++ b/baubudsgenerative-bauhaus-inspired-characters/src/index.html
@@ -0,0 +1 @@
+<div class="buds"></div>
\ No newline at end of file
diff --git a/baubudsgenerative-bauhaus-inspired-characters/src/script.js b/baubudsgenerative-bauhaus-inspired-characters/src/script.js
new file mode 100644
index 0000000..d7c2dc8
--- /dev/null
+++ b/baubudsgenerative-bauhaus-inspired-characters/src/script.js
@@ -0,0 +1,237 @@
+import { SVG } from "https://cdn.skypack.dev/@svgdotjs/svg.js";
+
+function random(min, max, clamp = false) {
+  const value = Math.random() * (max - min) + min;
+
+  return clamp ? Math.round(value) : value;
+}
+
+class BauBudEyes {}
+
+class BauBudPatternGenerator {
+  constructor(svg) {
+    this.svg = svg;
+    this.types = ["dots", "rects"];
+  }
+
+  generate(fill) {
+    this.type = this.types[random(0, this.types.length, true)];
+
+    return this.svg.pattern(4, 4, (add) => {
+      if (this.type === "rects") {
+        add.rect(2, 2).cx(0).cy(0).fill(fill);
+      } else {
+        add.circle(1).cx(2).cy(2).fill(fill);
+      }
+    });
+  }
+}
+
+class BauBudBody {
+  constructor(svg, x, y, width, height) {
+    this.svg = svg.group();
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+
+    this.types = [
+      this.circle,
+      this.rect,
+      this.equilateralTriangle,
+      this.rightAngleTriangle,
+      this.semiCircle
+    ];
+
+    this.patternGenerator = new BauBudPatternGenerator(this.svg);
+  }
+
+  circle() {
+    this.type = "circle";
+
+    return this.svg
+      .circle(Math.max(this.width, this.height))
+      .cx(this.x)
+      .cy(this.height);
+  }
+
+  rect() {
+    this.type = "rect";
+
+    return this.svg.rect(this.width, this.height).cx(this.x).cy(this.y);
+  }
+
+  equilateralTriangle() {
+    this.type = "equilateralTriangle";
+
+    return this.svg
+      .path(
+        `
+      M ${this.x} ${this.y - this.height / 2}
+      L ${this.x + this.width / 2} ${this.y + this.height / 2}
+      L ${this.x - this.width / 2} ${this.y + this.height / 2}
+      Z
+    `
+      )
+      .rotate(this.randomRotation(180));
+  }
+
+  rightAngleTriangle() {
+    this.type = "rightAngleTriangle";
+
+    return this.svg
+      .path(
+        `
+      M ${this.x - this.width / 2} ${this.y - this.height / 2}
+      L ${this.x + this.width / 2} ${this.y + this.height / 2}
+      L ${this.x - this.width / 2} ${this.y + this.height / 2}
+      Z
+    `
+      )
+      .rotate(this.randomRotation(90));
+  }
+
+  semiCircle() {
+    this.type = "semiCircle";
+
+    const rad = Math.max(this.width, this.height) / 2;
+
+    return this.svg
+      .path(
+        `
+        M ${this.x - rad} ${this.y + rad / 2}
+        A ${rad} ${rad} 0 0 1 ${this.x + this.width / 2} ${this.y + rad / 2}
+        Z
+      `
+      )
+      .rotate(this.randomRotation(180));
+  }
+
+  randomRotation(step = 90) {
+    const n = 360 / step;
+    return random(0, n, true) * step;
+  }
+
+  generate() {
+    this.svg.clear();
+
+    this.fill = ["red", "yellow", "blue"][random(0, 2, true)];
+
+    const pattern = this.patternGenerator.generate("#000");
+
+    this.base = this.types[random(0, this.types.length - 1, true)]
+      .call(this)
+      .fill("none")
+      .stroke("none");
+
+    let translateVal = random(5, 15);
+    if (random(0, 1) > 0.5) translateVal *= -1;
+
+    this.fill = this.base
+      .clone()
+      .addTo(this.svg)
+      .fill(this.fill)
+      .translate(translateVal, -translateVal);
+
+    this.pattern = this.base
+      .clone()
+      .addTo(this.svg)
+      .fill(pattern)
+      .translate(-translateVal * 2, translateVal * 2)
+      .scale(random(0.625, 0.825));
+
+    this.outline = this.base
+      .clone()
+      .addTo(this.svg)
+      .stroke("black")
+      .fill("transparent");
+  }
+}
+
+class BauBud {
+  constructor(target) {
+    this.svg = SVG().viewbox(0, 0, 200, 200).addTo(target);
+
+    this.body = new BauBudBody(this.svg, 100, 100, 100, 100);
+    this.eyes = new BauBudEyes(this.svg, 100, 100);
+  }
+
+  generate() {
+    this.body.generate();
+
+    const eyeWidth = random(5, 20);
+    const innerWidth = 8;
+
+    this.svg
+      .ellipse(16)
+      .stroke("#000")
+      .fill("#fff")
+      .cx(100 - eyeWidth)
+      .cy(100);
+    this.svg
+      .ellipse(16)
+      .stroke("#000")
+      .fill("#fff")
+      .cx(100 + eyeWidth)
+      .cy(100);
+
+    const choice = random(0, 5, true);
+
+    let leftEyeInnerX = 100 - eyeWidth;
+    let rightEyeInnerX = 100 + eyeWidth;
+
+    let eyeY = 100;
+
+    switch (choice) {
+      case 1:
+        leftEyeInnerX -= 4;
+        rightEyeInnerX -= 4;
+        break;
+      case 2:
+        leftEyeInnerX += 4;
+        rightEyeInnerX += 4;
+        break;
+      case 3:
+        eyeY += 4;
+        break;
+      case 4:
+        eyeY -= 4;
+        break;
+
+      default:
+        leftEyeInnerX = leftEyeInnerX;
+        rightEyeInnerX = rightEyeInnerX;
+    }
+
+    this.svg
+      .ellipse(innerWidth)
+      .stroke("#000")
+      .fill("#000")
+      .cx(leftEyeInnerX)
+      .cy(eyeY);
+    this.svg
+      .ellipse(innerWidth)
+      .stroke("#000")
+      .fill("#000")
+      .cx(rightEyeInnerX)
+      .cy(eyeY);
+  }
+}
+
+for (let i = 0; i < 100; i++) {
+  const bauBud = new BauBud(document.querySelector(".buds"));
+  bauBud.generate();
+}
+
+const buds = document.querySelector(".buds");
+
+setInterval(() => {
+  const y = window.pageYOffset;
+  const windowHeight = window.innerHeight;
+  if (y + 200 + windowHeight >= buds.scrollHeight) {
+    for (let i = 0; i < 100; i++) {
+      const bauBud = new BauBud(buds);
+      bauBud.generate();
+    }
+  }
+}, 100);
diff --git a/baubudsgenerative-bauhaus-inspired-characters/src/style.css b/baubudsgenerative-bauhaus-inspired-characters/src/style.css
new file mode 100644
index 0000000..6d79833
--- /dev/null
+++ b/baubudsgenerative-bauhaus-inspired-characters/src/style.css
@@ -0,0 +1,48 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --grid-rows: repeat(2, 1fr);
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: Helvetica, system-ui, sans-serif;
+  color: #000;
+  padding: 1.5rem;
+  line-height: 1;
+}
+
+.buds {
+  display: grid;
+  grid-template-columns: var(--grid-rows);
+}
+
+svg {
+  width: 100%;
+}
+
+@media only screen and (min-width: 800px) {
+  :root {
+    --grid-rows: repeat(3, 1fr);
+  }
+}
+
+@media only screen and (min-width: 1280px) {
+  :root {
+    --grid-rows: repeat(4, 1fr);
+  }
+}
+
+@media only screen and (min-width: 1600px) {
+  :root {
+    --grid-rows: repeat(5, 1fr);
+  }
+}
diff --git a/bbc13-minutes-to-the-moon/README.markdown b/bbc13-minutes-to-the-moon/README.markdown
new file mode 100644
index 0000000..6c3d1b3
--- /dev/null
+++ b/bbc13-minutes-to-the-moon/README.markdown
@@ -0,0 +1,7 @@
+# BBC - 13 Minutes to the Moon
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/petebarr/pen/VwLqRYv](https://codepen.io/petebarr/pen/VwLqRYv).
+
+From the BBC's series: https://www.bbc.co.uk/programmes/w13xttx2
+
+I initially tried it with html/css masking/clipping but it was very poor cross browser with the things I needed to do with background-clip: text; So just went all out SVG which is far easier.
diff --git a/bbc13-minutes-to-the-moon/dist/index.html b/bbc13-minutes-to-the-moon/dist/index.html
new file mode 100644
index 0000000..bd8e785
--- /dev/null
+++ b/bbc13-minutes-to-the-moon/dist/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - BBC - 13 Minutes to the Moon</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://codepen.io/GreenSock/pen/JGaKdQ.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+    
+    <div class="moon">
+        <svg class="moon__svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 611 611">
+            <defs>
+                <clipPath id="clip-path" class="moon__svg-rects" >
+                    <rect id="top" width="611" height="72" />
+                    <rect y="77" width="611" height="72" />
+                    <rect y="154" width="611" height="72" />
+                    <rect y="231" width="611" height="72" />
+                    <rect y="308" width="611" height="72" />
+                    <rect y="385" width="611" height="72" />
+                    <rect y="462" width="611" height="72" />
+                    <rect y="539" width="611" height="72" />
+                </clipPath>
+            </defs>
+            <g clip-path="url(#clip-path)">
+                <image class="moon__img" width="1024" height="1024" transform="translate(-271 -188) scale(0.98)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/moon-01-adjusted-02.jpg"  />
+            </g>
+            <g class="moon__txt-bg" fill="#D5CEC6" transform="translate(-1 0)">
+                <rect y="229" width="612" height="76" />
+                <rect y="306" width="612" height="76" />
+                <rect y="383" width="612" height="76" />
+                <rect y="460" width="612" height="76" />
+                <rect y="537" width="612" height="76" />
+            </g>
+            <clipPath id="moon_txt-mask" class="moon__txt" transform="translate(-2 0)">
+                <text x="0" y="303">
+                    <tspan>13</tspan>
+                </text>
+                <text x="0" y="380">
+                    <tspan>MINUTES</tspan>
+                </text>
+                <text x="1" y="457">
+                    <tspan>TO</tspan>
+                </text>
+                <text x="1" y="534">
+                    <tspan>THE</tspan>
+                </text>
+                <text x="0" y="611">
+                    <tspan>MOON</tspan>
+                </text>
+            </clipPath>
+            <g clip-path="url(#moon_txt-mask)">
+                <image class="moon__img" width="1024" height="1024" transform="translate(-271 -188) scale(0.98)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/moon-01-adjusted-02.jpg"  />
+                <rect class="moon__txt-overlay" width="611" height="611"></rect>
+            </g>
+        </svg>
+    </div>
+    <div class="container__base"></div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/bbc13-minutes-to-the-moon/dist/script.js b/bbc13-minutes-to-the-moon/dist/script.js
new file mode 100644
index 0000000..f68a1f2
--- /dev/null
+++ b/bbc13-minutes-to-the-moon/dist/script.js
@@ -0,0 +1,99 @@
+console.clear();
+
+select = e => document.querySelector(e);
+selectAll = e => document.querySelectorAll(e);
+
+const container = select('.container');
+let wArray = [161, 614, 189, 278, 404],
+    tl;
+
+function animate() {
+    tl = gsap.timeline( { 
+        delay: 0.5,
+        repeat: -1, 
+        defaults: {
+            ease: "expo.inOut",
+            duration: 2
+        }
+    });
+    
+    tl.from('.container__base', {
+        scaleX: 0,
+        duration: 2,
+        transformOrigin: "top right",
+        // ease: "expo"
+    })
+    
+    .from('.moon__svg-rects rect', {
+        scaleX: 0,
+        stagger: 0.07,
+        duration: 3,
+        ease: "expo"
+    }, "-=1.0")
+    
+    .to('.moon__txt-bg rect', {
+        stagger: 0.14,
+        scaleX: 1
+    }, "-=2.5")
+    
+    .from('text', {
+        x: function(i) {
+            return -wArray[i]
+        },
+        ease: 'power4',
+        stagger: 0.14
+    }, "-=1.6")
+    
+    .from('.moon__img', {
+        x: "+=200",
+        ease: 'power4',
+        duration: 15
+    }, 0);
+}
+
+function init() {
+    gsap.set(container, { autoAlpha: 1 });
+    
+    gsap.set('.moon__txt-bg rect', { 
+         width: function(i) {
+            return wArray[i]
+        },
+        scaleX: 0
+    })
+    
+    animate();
+    
+    container.onclick = () => {
+        tl.restart();
+    }
+
+}
+
+function resize() {
+	let vw = window.innerWidth;
+    let vh = window.innerHeight;
+	let wh = container.offsetWidth;
+	let scaleFactor = 1;
+    
+    if(vw/vh >= 1) {
+        scaleFactor = vh/wh
+    }
+    else {
+        scaleFactor = vw/wh
+    }
+    
+	if(scaleFactor<1) {
+		gsap.set(container, { scale: scaleFactor });
+	}
+	else {
+        gsap.set(container, { scale: 1 });
+    }
+}
+
+window.onresize = resize;
+
+window.onload = () => {
+	init();
+    resize();
+    // GSDevTools.create();
+};
\ No newline at end of file
diff --git a/bbc13-minutes-to-the-moon/dist/style.css b/bbc13-minutes-to-the-moon/dist/style.css
new file mode 100644
index 0000000..b70f259
--- /dev/null
+++ b/bbc13-minutes-to-the-moon/dist/style.css
@@ -0,0 +1,83 @@
+@font-face {
+  font-family: "MonumentExtended-Ultrabold";
+  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/MonumentExtended-Ultrabold.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/MonumentExtended-Ultrabold.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+  background-color: black;
+  color: white;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+}
+
+.container {
+  position: relative;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+  position: relative;
+  max-width: 679px;
+  max-height: 679px;
+  min-width: 679px;
+  min-height: 679px;
+  background: black;
+  cursor: pointer;
+  visibility: hidden;
+}
+
+.container__base {
+  position: absolute;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  background: #D5CEC6;
+}
+
+.moon {
+  position: relative;
+  z-index: 2;
+  width: 611px;
+  height: 611px;
+}
+
+.moon__svg {
+  width: 611px;
+  height: 611px;
+}
+
+.moon__txt {
+  font-family: "MonumentExtended-Ultrabold", sans-serif;
+  font-size: 103px;
+  line-height: 1;
+  fill: black;
+  letter-spacing: 2.1px;
+}
+
+.moon__txt-overlay {
+  fill: rgba(0, 0, 0, 0.6);
+}
\ No newline at end of file
diff --git a/bbc13-minutes-to-the-moon/license.txt b/bbc13-minutes-to-the-moon/license.txt
new file mode 100644
index 0000000..36e8464
--- /dev/null
+++ b/bbc13-minutes-to-the-moon/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Pete Barr (https://codepen.io/petebarr/pen/VwLqRYv)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/bbc13-minutes-to-the-moon/src/index.html b/bbc13-minutes-to-the-moon/src/index.html
new file mode 100644
index 0000000..7f63a16
--- /dev/null
+++ b/bbc13-minutes-to-the-moon/src/index.html
@@ -0,0 +1,51 @@
+<div class="container">
+    
+    <div class="moon">
+        <svg class="moon__svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 611 611">
+            <defs>
+                <clipPath id="clip-path" class="moon__svg-rects" >
+                    <rect id="top" width="611" height="72" />
+                    <rect y="77" width="611" height="72" />
+                    <rect y="154" width="611" height="72" />
+                    <rect y="231" width="611" height="72" />
+                    <rect y="308" width="611" height="72" />
+                    <rect y="385" width="611" height="72" />
+                    <rect y="462" width="611" height="72" />
+                    <rect y="539" width="611" height="72" />
+                </clipPath>
+            </defs>
+            <g clip-path="url(#clip-path)">
+                <image class="moon__img" width="1024" height="1024" transform="translate(-271 -188) scale(0.98)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/moon-01-adjusted-02.jpg"  />
+            </g>
+            <g class="moon__txt-bg" fill="#D5CEC6" transform="translate(-1 0)">
+                <rect y="229" width="612" height="76" />
+                <rect y="306" width="612" height="76" />
+                <rect y="383" width="612" height="76" />
+                <rect y="460" width="612" height="76" />
+                <rect y="537" width="612" height="76" />
+            </g>
+            <clipPath id="moon_txt-mask" class="moon__txt" transform="translate(-2 0)">
+                <text x="0" y="303">
+                    <tspan>13</tspan>
+                </text>
+                <text x="0" y="380">
+                    <tspan>MINUTES</tspan>
+                </text>
+                <text x="1" y="457">
+                    <tspan>TO</tspan>
+                </text>
+                <text x="1" y="534">
+                    <tspan>THE</tspan>
+                </text>
+                <text x="0" y="611">
+                    <tspan>MOON</tspan>
+                </text>
+            </clipPath>
+            <g clip-path="url(#moon_txt-mask)">
+                <image class="moon__img" width="1024" height="1024" transform="translate(-271 -188) scale(0.98)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/moon-01-adjusted-02.jpg"  />
+                <rect class="moon__txt-overlay" width="611" height="611"></rect>
+            </g>
+        </svg>
+    </div>
+    <div class="container__base"></div>
+</div>
\ No newline at end of file
diff --git a/bbc13-minutes-to-the-moon/src/script.js b/bbc13-minutes-to-the-moon/src/script.js
new file mode 100644
index 0000000..f68a1f2
--- /dev/null
+++ b/bbc13-minutes-to-the-moon/src/script.js
@@ -0,0 +1,99 @@
+console.clear();
+
+select = e => document.querySelector(e);
+selectAll = e => document.querySelectorAll(e);
+
+const container = select('.container');
+let wArray = [161, 614, 189, 278, 404],
+    tl;
+
+function animate() {
+    tl = gsap.timeline( { 
+        delay: 0.5,
+        repeat: -1, 
+        defaults: {
+            ease: "expo.inOut",
+            duration: 2
+        }
+    });
+    
+    tl.from('.container__base', {
+        scaleX: 0,
+        duration: 2,
+        transformOrigin: "top right",
+        // ease: "expo"
+    })
+    
+    .from('.moon__svg-rects rect', {
+        scaleX: 0,
+        stagger: 0.07,
+        duration: 3,
+        ease: "expo"
+    }, "-=1.0")
+    
+    .to('.moon__txt-bg rect', {
+        stagger: 0.14,
+        scaleX: 1
+    }, "-=2.5")
+    
+    .from('text', {
+        x: function(i) {
+            return -wArray[i]
+        },
+        ease: 'power4',
+        stagger: 0.14
+    }, "-=1.6")
+    
+    .from('.moon__img', {
+        x: "+=200",
+        ease: 'power4',
+        duration: 15
+    }, 0);
+}
+
+function init() {
+    gsap.set(container, { autoAlpha: 1 });
+    
+    gsap.set('.moon__txt-bg rect', { 
+         width: function(i) {
+            return wArray[i]
+        },
+        scaleX: 0
+    })
+    
+    animate();
+    
+    container.onclick = () => {
+        tl.restart();
+    }
+
+}
+
+function resize() {
+	let vw = window.innerWidth;
+    let vh = window.innerHeight;
+	let wh = container.offsetWidth;
+	let scaleFactor = 1;
+    
+    if(vw/vh >= 1) {
+        scaleFactor = vh/wh
+    }
+    else {
+        scaleFactor = vw/wh
+    }
+    
+	if(scaleFactor<1) {
+		gsap.set(container, { scale: scaleFactor });
+	}
+	else {
+        gsap.set(container, { scale: 1 });
+    }
+}
+
+window.onresize = resize;
+
+window.onload = () => {
+	init();
+    resize();
+    // GSDevTools.create();
+};
\ No newline at end of file
diff --git a/bbc13-minutes-to-the-moon/src/style.scss b/bbc13-minutes-to-the-moon/src/style.scss
new file mode 100644
index 0000000..19593ea
--- /dev/null
+++ b/bbc13-minutes-to-the-moon/src/style.scss
@@ -0,0 +1,80 @@
+@font-face {
+    font-family: "MonumentExtended-Ultrabold";
+    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/MonumentExtended-Ultrabold.woff") format("woff"),
+        url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/MonumentExtended-Ultrabold.woff2") format("woff2");
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+}
+
+html {
+	box-sizing: border-box;
+}
+
+*, *:before, *:after {
+	box-sizing: inherit;
+}
+
+html, body {
+	width: 100%;
+	height: 100%;
+}
+
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: black;
+    color: white;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow: hidden;
+}
+
+.container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+	position: relative;
+    max-width: 679px;
+    max-height: 679px;
+	min-width: 679px;
+	min-height: 679px;
+    background: black;
+    cursor: pointer;
+	visibility: hidden;
+}
+
+.container__base {
+    position: absolute;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    background: #D5CEC6;
+}
+
+.moon {
+    position: relative;
+    z-index: 2;
+    width: 611px;
+	height: 611px;
+}
+
+.moon__svg {
+    width: 611px;
+    height: 611px;
+}
+
+.moon__txt {
+    font-family: "MonumentExtended-Ultrabold", sans-serif;
+    font-size: 103px;
+    line-height: 1;
+    fill: black;
+    letter-spacing: 2.1px;
+}
+
+.moon__txt-overlay {
+    fill: rgba(0, 0, 0, 0.6);
+}
+
diff --git a/beating-heart/README.markdown b/beating-heart/README.markdown
new file mode 100644
index 0000000..47d2960
--- /dev/null
+++ b/beating-heart/README.markdown
@@ -0,0 +1,5 @@
+# Beating heart ❤
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Mamboleoo/pen/YzQzQgo](https://codepen.io/Mamboleoo/pen/YzQzQgo).
+
+
diff --git a/beating-heart/dist/index.html b/beating-heart/dist/index.html
new file mode 100644
index 0000000..0604a7a
--- /dev/null
+++ b/beating-heart/dist/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Beating heart ❤</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/three@0.131.3/examples/js/math/MeshSurfaceSampler.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/three@0.131.3/examples/js/controls/TrackballControls.js'></script>
+<script src='https://assets.codepen.io/127738/simplex-noise.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/three@0.131.3/examples/js/loaders/OBJLoader.js'></script>
+<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/beating-heart/dist/script.js b/beating-heart/dist/script.js
new file mode 100644
index 0000000..0c31b7e
--- /dev/null
+++ b/beating-heart/dist/script.js
@@ -0,0 +1,130 @@
+console.clear();
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(
+  75,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000
+);
+
+const renderer = new THREE.WebGLRenderer({
+  antialias: true
+});
+renderer.setClearColor(0xff5555);
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+camera.position.z = 1;
+
+const controls = new THREE.TrackballControls(camera, renderer.domElement);
+controls.noPan = true;
+controls.maxDistance = 3;
+controls.minDistance = 0.7;
+
+const group = new THREE.Group();
+scene.add(group);
+
+let heart = null;
+let sampler = null;
+let originHeart = null;
+new THREE.OBJLoader().load('https://assets.codepen.io/127738/heart_2.obj',obj => {
+  heart = obj.children[0];
+  heart.geometry.rotateX(-Math.PI * 0.5);
+  heart.geometry.scale(0.04, 0.04, 0.04);
+  heart.geometry.translate(0, -0.4, 0);
+  group.add(heart);
+  
+  heart.material = new THREE.MeshBasicMaterial({
+    color: 0xff5555    
+  });
+  originHeart = Array.from(heart.geometry.attributes.position.array);
+  sampler = new THREE.MeshSurfaceSampler(heart).build();
+  init();
+  renderer.setAnimationLoop(render);
+});
+
+let positions = [];
+const geometry = new THREE.BufferGeometry();
+const material = new THREE.LineBasicMaterial({
+  color: 0xffffff
+});
+const lines = new THREE.LineSegments(geometry, material);
+group.add(lines);
+
+const simplex = new SimplexNoise();
+const pos = new THREE.Vector3();
+class Grass {
+  constructor () {
+    sampler.sample(pos);
+    this.pos = pos.clone();
+    this.scale = Math.random() * 0.01 + 0.001;
+    this.one = null;
+    this.two = null;
+  }
+  update (a) {
+    const noise = simplex.noise4D(this.pos.x*1.5, this.pos.y*1.5, this.pos.z*1.5, a * 0.0005) + 1;
+    this.one = this.pos.clone().multiplyScalar(1.01 + (noise * 0.15 * beat.a));
+    this.two = this.one.clone().add(this.one.clone().setLength(this.scale));
+  }
+}
+
+let spikes = [];
+function init (a) {
+  positions = [];
+  for (let i = 0; i < 20000; i++) {
+    const g = new Grass();
+    spikes.push(g);
+  }
+}
+
+const beat = { a: 0 };
+gsap.timeline({
+  repeat: -1,
+  repeatDelay: 0.3
+}).to(beat, {
+  a: 1.2,
+  duration: 0.6,
+  ease: 'power2.in'
+}).to(beat, {
+  a: 0.0,
+  duration: 0.6,
+  ease: 'power3.out'
+});
+gsap.to(group.rotation, {
+  y: Math.PI * 2,
+  duration: 12,
+  ease: 'none',
+  repeat: -1
+});
+
+function render(a) {
+  positions = [];
+  spikes.forEach(g => {
+    g.update(a);
+    positions.push(g.one.x, g.one.y, g.one.z);
+    positions.push(g.two.x, g.two.y, g.two.z);
+  });
+  geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
+  
+  const vs = heart.geometry.attributes.position.array;
+  for (let i = 0; i < vs.length; i+=3) {
+    const v = new THREE.Vector3(originHeart[i], originHeart[i+1], originHeart[i+2]);
+    const noise = simplex.noise4D(originHeart[i]*1.5, originHeart[i+1]*1.5, originHeart[i+2]*1.5, a * 0.0005) + 1;
+    v.multiplyScalar(1 + (noise * 0.15 * beat.a));
+    vs[i] = v.x;
+    vs[i+1] = v.y;
+    vs[i+2] = v.z;
+  }
+  heart.geometry.attributes.position.needsUpdate = true;
+  
+  controls.update();
+  renderer.render(scene, camera);
+}
+
+window.addEventListener("resize", onWindowResize, false);
+function onWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
\ No newline at end of file
diff --git a/beating-heart/dist/style.css b/beating-heart/dist/style.css
new file mode 100644
index 0000000..e099e7a
--- /dev/null
+++ b/beating-heart/dist/style.css
@@ -0,0 +1,5 @@
+body {
+  background: #000;
+  overflow: hidden;
+  margin: 0;
+}
\ No newline at end of file
diff --git a/beating-heart/license.txt b/beating-heart/license.txt
new file mode 100644
index 0000000..7d1f7ce
--- /dev/null
+++ b/beating-heart/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Louis Hoebregts (https://codepen.io/Mamboleoo/pen/YzQzQgo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/beating-heart/src/index.html b/beating-heart/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/beating-heart/src/script.js b/beating-heart/src/script.js
new file mode 100644
index 0000000..9c81666
--- /dev/null
+++ b/beating-heart/src/script.js
@@ -0,0 +1,130 @@
+console.clear();
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(
+  75,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000
+);
+
+const renderer = new THREE.WebGLRenderer({
+  antialias: true
+});
+renderer.setClearColor(0xff5555);
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+camera.position.z = 1;
+
+const controls = new THREE.TrackballControls(camera, renderer.domElement);
+controls.noPan = true;
+controls.maxDistance = 3;
+controls.minDistance = 0.7;
+
+const group = new THREE.Group();
+scene.add(group);
+
+let heart = null;
+let sampler = null;
+let originHeart = null;
+new THREE.OBJLoader().load('https://assets.codepen.io/127738/heart_2.obj',obj => {
+  heart = obj.children[0];
+  heart.geometry.rotateX(-Math.PI * 0.5);
+  heart.geometry.scale(0.04, 0.04, 0.04);
+  heart.geometry.translate(0, -0.4, 0);
+  group.add(heart);
+  
+  heart.material = new THREE.MeshBasicMaterial({
+    color: 0xff5555    
+  });
+  originHeart = Array.from(heart.geometry.attributes.position.array);
+  sampler = new THREE.MeshSurfaceSampler(heart).build();
+  init();
+  renderer.setAnimationLoop(render);
+});
+
+let positions = [];
+const geometry = new THREE.BufferGeometry();
+const material = new THREE.LineBasicMaterial({
+  color: 0xffffff
+});
+const lines = new THREE.LineSegments(geometry, material);
+group.add(lines);
+
+const simplex = new SimplexNoise();
+const pos = new THREE.Vector3();
+class Grass {
+  constructor () {
+    sampler.sample(pos);
+    this.pos = pos.clone();
+    this.scale = Math.random() * 0.01 + 0.001;
+    this.one = null;
+    this.two = null;
+  }
+  update (a) {
+    const noise = simplex.noise4D(this.pos.x*1.5, this.pos.y*1.5, this.pos.z*1.5, a * 0.0005) + 1;
+    this.one = this.pos.clone().multiplyScalar(1.01 + (noise * 0.15 * beat.a));
+    this.two = this.one.clone().add(this.one.clone().setLength(this.scale));
+  }
+}
+
+let spikes = [];
+function init (a) {
+  positions = [];
+  for (let i = 0; i < 20000; i++) {
+    const g = new Grass();
+    spikes.push(g);
+  }
+}
+
+const beat = { a: 0 };
+gsap.timeline({
+  repeat: -1,
+  repeatDelay: 0.3
+}).to(beat, {
+  a: 1.2,
+  duration: 0.6,
+  ease: 'power2.in'
+}).to(beat, {
+  a: 0.0,
+  duration: 0.6,
+  ease: 'power3.out'
+});
+gsap.to(group.rotation, {
+  y: Math.PI * 2,
+  duration: 12,
+  ease: 'none',
+  repeat: -1
+});
+
+function render(a) {
+  positions = [];
+  spikes.forEach(g => {
+    g.update(a);
+    positions.push(g.one.x, g.one.y, g.one.z);
+    positions.push(g.two.x, g.two.y, g.two.z);
+  });
+  geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
+  
+  const vs = heart.geometry.attributes.position.array;
+  for (let i = 0; i < vs.length; i+=3) {
+    const v = new THREE.Vector3(originHeart[i], originHeart[i+1], originHeart[i+2]);
+    const noise = simplex.noise4D(originHeart[i]*1.5, originHeart[i+1]*1.5, originHeart[i+2]*1.5, a * 0.0005) + 1;
+    v.multiplyScalar(1 + (noise * 0.15 * beat.a));
+    vs[i] = v.x;
+    vs[i+1] = v.y;
+    vs[i+2] = v.z;
+  }
+  heart.geometry.attributes.position.needsUpdate = true;
+  
+  controls.update();
+  renderer.render(scene, camera);
+}
+
+window.addEventListener("resize", onWindowResize, false);
+function onWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
diff --git a/beating-heart/src/style.scss b/beating-heart/src/style.scss
new file mode 100644
index 0000000..e099e7a
--- /dev/null
+++ b/beating-heart/src/style.scss
@@ -0,0 +1,5 @@
+body {
+  background: #000;
+  overflow: hidden;
+  margin: 0;
+}
\ No newline at end of file
diff --git a/best-css-3d-cuboid-ever/README.markdown b/best-css-3d-cuboid-ever/README.markdown
new file mode 100644
index 0000000..532e39b
--- /dev/null
+++ b/best-css-3d-cuboid-ever/README.markdown
@@ -0,0 +1,15 @@
+# Best CSS 3D Cuboid Ever!
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ShadowShahriar/pen/rNGJNwy](https://codepen.io/ShadowShahriar/pen/rNGJNwy).
+
+How many `<DIV>`s do we need to make a cube? 🤔
+
+Seven? Six? Probably three?
+
+NO.
+
+Two `<DIV>`s are enough not only to make a cube but also to make a flexible cuboid.
+
+Here is a demo pen showing how we can do that 😄
+
+> Some of you probably noticed the flow direction of base gradients is from **left to right**. Similarly, the flow direction of side gradients is from **bottom to top**.
diff --git a/best-css-3d-cuboid-ever/dist/index.html b/best-css-3d-cuboid-ever/dist/index.html
new file mode 100644
index 0000000..be259a6
--- /dev/null
+++ b/best-css-3d-cuboid-ever/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" class="test">
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Best CSS 3D Cuboid Ever!</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input id="flow_dir" type="checkbox" checked="checked" data-isolated="data-isolated"/>
+<section data-camera="data-camera">
+  <section data-scene="data-scene">
+    <div class="cuboid" data-3d="data-3d">
+      <div></div>
+    </div>
+  </section>
+</section>
+<label for="flow_dir" data-isolated="data-isolated">Show Flow Direction</label>
+<!-- partial -->
+  <script src='https://shadowshahriar.github.io/assets/codepen/css3d-cake/js/camera.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/best-css-3d-cuboid-ever/dist/script.js b/best-css-3d-cuboid-ever/dist/script.js
new file mode 100644
index 0000000..8b74b9b
--- /dev/null
+++ b/best-css-3d-cuboid-ever/dist/script.js
@@ -0,0 +1,11 @@
+window.addEventListener("load", () => {
+	new Camera()
+		.setOptimalPerspective()
+		.with({
+			debug: true,
+			rotate: {
+				speed: 1.2
+			}
+		})
+		.init();
+});
\ No newline at end of file
diff --git a/best-css-3d-cuboid-ever/dist/style.css b/best-css-3d-cuboid-ever/dist/style.css
new file mode 100644
index 0000000..444d5d8
--- /dev/null
+++ b/best-css-3d-cuboid-ever/dist/style.css
@@ -0,0 +1,228 @@
+:root {
+  --unit: 1vmin;
+  --zoom: 100;
+  --available-screen-min: 665;
+  --px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
+  --auto-rotate-duration: 10s;
+  --auto-rotate-timing-func: ease;
+  --auto-rotate-direction: forwards;
+  --fallback-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
+  	Arial, Ubuntu, sans-serif, "Apple Color Emoji", "Twemoji Mozilla",
+  	"Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+*,
+*::before,
+*::after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+       text-size-adjust: none;
+}
+
+*::before,
+*::after {
+  display: block;
+}
+
+body {
+  touch-action: none;
+}
+
+html {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+
+html:active {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+
+html,
+body {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  scrollbar-width: thin;
+  font-size: 0;
+  overflow: hidden;
+  /* to make touch gestures work correctly */
+}
+
+html::before {
+  content: "";
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-image: radial-gradient(circle at 50% 50%, #fff, #f8f8f8);
+  background-size: 100vw 100vh;
+  background-repeat: no-repeat;
+}
+
+[data-camera] {
+  --scene-size: 500;
+  --scale: 100;
+  --perspective: 1200;
+  --cameraZ: 0;
+  --cameraY: 0;
+  --translateX: 0;
+  --translateY: 0;
+  --translateZ: 0;
+}
+
+[data-camera] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  --fmt-s: calc(var(--scale, 100) / 100);
+  transform: scale(var(--fmt-s));
+  display: grid;
+  place-items: center;
+  overflow: visible;
+  transition: transform ease 500ms;
+  will-change: transform;
+}
+
+[data-scene] {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: calc(var(--scene-size) * var(--px));
+  height: calc(var(--scene-size) * var(--px));
+  background-color: rgba(0, 0, 0, 0.1);
+  transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg)) rotateZ(calc(var(--cameraZ, 0) * 1deg)) translate3d(calc(var(--translateX, 0) * var(--px)), calc(var(--translateY, 0) * var(--px) * -1), calc(var(--translateZ, 0) * var(--px) * -1));
+  --max-rotation: calc((360 + var(--cameraZ)) * 1deg);
+  transform-origin: 50% 50%;
+}
+
+[data-camera][data-dragging] {
+  transition: none;
+}
+
+@-webkit-keyframes rotateCamera {
+  to {
+    transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg)) rotateZ(var(--max-rotation)) translate3d(calc(var(--translateX, 0) * var(--px)), calc(var(--translateY, 0) * var(--px) * -1), calc(var(--translateZ, 0) * var(--px) * -1));
+  }
+}
+
+@keyframes rotateCamera {
+  to {
+    transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg)) rotateZ(var(--max-rotation)) translate3d(calc(var(--translateX, 0) * var(--px)), calc(var(--translateY, 0) * var(--px) * -1), calc(var(--translateZ, 0) * var(--px) * -1));
+  }
+}
+[data-scene],
+[data-camera],
+[data-3d] {
+  transform-style: preserve-3d;
+}
+
+[data-hidden],
+.class-hidden {
+  display: none;
+}
+
+.test .cuboid {
+  --base-width: 256;
+  --side-width: 256;
+  --height: 172;
+  --color-base: #f52d2d;
+  --color-side: #f52d2d;
+  --color-shade: rgba(0, 0, 0, 0.1);
+  --edge-fix: 0 0 0 1px rgba(0, 0, 0, 0.01);
+  --base-flw-dir: linear-gradient(to right, skyblue, purple);
+  --side-flw-dir: linear-gradient(to right, skyblue, purple);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.test .cuboid {
+  width: calc(var(--base-width) * var(--px));
+  height: calc(var(--side-width) * var(--px));
+  background-image: var(--base-flw-dir);
+  background-color: var(--color-base);
+}
+.test .cuboid::before, .test .cuboid::after {
+  top: 0;
+  width: calc(var(--height) * var(--px));
+  height: 100%;
+  background-image: linear-gradient(var(--color-shade) 0 0), var(--side-flw-dir);
+  background-color: var(--color-side);
+  transform: rotateY(-90deg);
+  transform-origin: top left;
+}
+.test .cuboid::before {
+  left: 0;
+}
+.test .cuboid::after {
+  left: 100%;
+}
+.test .cuboid div {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: inherit;
+  height: inherit;
+  background-image: inherit;
+  background-color: inherit;
+  transform: translateZ(calc(var(--height) * var(--px)));
+  transform-style: inherit;
+}
+.test .cuboid div::before, .test .cuboid div::after {
+  right: 100%;
+  background-image: linear-gradient(var(--color-shade) 0 0), linear-gradient(var(--color-shade) 0 0), var(--side-flw-dir);
+  background-color: var(--color-side);
+  width: calc(var(--height) * var(--px));
+  height: calc(var(--base-width) * var(--px));
+  transform: rotateX(90deg) rotateZ(90deg);
+  transform-origin: bottom right;
+}
+.test .cuboid div::before {
+  bottom: 100%;
+}
+.test .cuboid div::after {
+  bottom: 0;
+}
+.test .cuboid::before, .test .cuboid::after, .test .cuboid div::before, .test .cuboid div::after {
+  content: "";
+  position: absolute;
+  display: block;
+  box-shadow: var(--edge-fix);
+  box-sizing: border-box;
+}
+.test .cuboid, .test .cuboid div {
+  box-shadow: var(--edge-fix);
+  box-sizing: border-box;
+}
+
+.test [data-camera] {
+  --cameraY: 62;
+  --cameraZ: 140;
+  --translateZ: 30;
+}
+.test input,
+.test label {
+  position: relative;
+  cursor: pointer;
+  z-index: 10;
+  margin: 14px 10px;
+}
+.test input:not(:checked) ~ [data-camera] .cuboid {
+  --base-flw-dir: none;
+  --side-flw-dir: none;
+}
+.test label {
+  font-size: 16px;
+  font-family: var(--fallback-fonts);
+  margin-left: 0;
+}
\ No newline at end of file
diff --git a/best-css-3d-cuboid-ever/dist/vyegypg.css b/best-css-3d-cuboid-ever/dist/vyegypg.css
new file mode 100644
index 0000000..46b051b
--- /dev/null
+++ b/best-css-3d-cuboid-ever/dist/vyegypg.css
@@ -0,0 +1,146 @@
+// ===================
+// === starter.css ===
+// ===================
+
+:root {
+	--unit: 1vmin;
+	--zoom: 100;
+	--available-screen-min: 665;
+	--px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
+
+	--auto-rotate-duration: 10s;
+	--auto-rotate-timing-func: ease;
+	--auto-rotate-direction: forwards;
+
+	--fallback-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
+		Arial, Ubuntu, sans-serif, "Apple Color Emoji", "Twemoji Mozilla",
+		"Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+*,
+*::before,
+*::after {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+	-webkit-text-size-adjust: none;
+	text-size-adjust: none;
+}
+
+*::before,
+*::after {
+	display: block;
+}
+
+body {
+	touch-action: none;
+}
+
+html {
+	cursor: grab;
+}
+
+html:active {
+	cursor: grabbing;
+}
+
+html,
+body {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	scrollbar-width: thin;
+	font-size: 0;
+	overflow: hidden; /* to make touch gestures work correctly */
+}
+
+html::before {
+	content: "";
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100vw;
+	height: 100vh;
+	background-image: radial-gradient(circle at 50% 50%, #fff, #f8f8f8);
+	background-size: 100vw 100vh;
+	background-repeat: no-repeat;
+}
+
+// ==============
+// === 3D.css ===
+// ==============
+
+[data-camera] {
+	--scene-size: 500;
+	--scale: 100;
+	--perspective: 1200;
+	--cameraZ: 0;
+	--cameraY: 0;
+	--translateX: 0;
+	--translateY: 0;
+	--translateZ: 0;
+}
+
+[data-camera] {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100vw;
+	height: 100vh;
+	--fmt-s: calc(var(--scale, 100) / 100);
+	transform: scale(var(--fmt-s));
+	display: grid;
+	place-items: center;
+	overflow: visible;
+
+	transition: transform ease 500ms;
+	will-change: transform;
+}
+
+[data-scene] {
+	position: relative;
+	left: 0;
+	top: 0;
+	width: calc(var(--scene-size) * var(--px));
+	height: calc(var(--scene-size) * var(--px));
+	background-color: rgba(0, 0, 0, 0.1);
+	transform: perspective(calc(var(--perspective, 1000) * 1px))
+		rotateX(calc(var(--cameraY, 0) * 1deg))
+		rotateZ(calc(var(--cameraZ, 0) * 1deg))
+		translate3d(
+			calc(var(--translateX, 0) * var(--px)),
+			calc(var(--translateY, 0) * var(--px) * -1),
+			calc(var(--translateZ, 0) * var(--px) * -1)
+		);
+	--max-rotation: calc((360 + var(--cameraZ)) * 1deg);
+	transform-origin: 50% 50%;
+}
+
+[data-camera][data-dragging] {
+	transition: none;
+}
+
+@keyframes rotateCamera {
+	to {
+		transform: perspective(calc(var(--perspective, 1000) * 1px))
+			rotateX(calc(var(--cameraY, 0) * 1deg)) rotateZ(var(--max-rotation))
+			translate3d(
+				calc(var(--translateX, 0) * var(--px)),
+				calc(var(--translateY, 0) * var(--px) * -1),
+				calc(var(--translateZ, 0) * var(--px) * -1)
+			);
+	}
+}
+
+[data-scene],
+[data-camera],
+[data-3d] {
+	transform-style: preserve-3d;
+}
+
+[data-hidden],
+.class-hidden {
+	display: none;
+}
diff --git a/best-css-3d-cuboid-ever/license.txt b/best-css-3d-cuboid-ever/license.txt
new file mode 100644
index 0000000..c0e8cf3
--- /dev/null
+++ b/best-css-3d-cuboid-ever/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by S. Shahriar (https://codepen.io/ShadowShahriar/pen/rNGJNwy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/best-css-3d-cuboid-ever/src/index.pug b/best-css-3d-cuboid-ever/src/index.pug
new file mode 100644
index 0000000..0ca8e64
--- /dev/null
+++ b/best-css-3d-cuboid-ever/src/index.pug
@@ -0,0 +1,7 @@
+input#flow_dir(type="checkbox", checked, data-isolated)
+section(data-camera)
+	section(data-scene)
+		.cuboid(data-3d)
+			div
+label(for="flow_dir", data-isolated)
+	| Show Flow Direction
diff --git a/best-css-3d-cuboid-ever/src/script.js b/best-css-3d-cuboid-ever/src/script.js
new file mode 100644
index 0000000..07219fe
--- /dev/null
+++ b/best-css-3d-cuboid-ever/src/script.js
@@ -0,0 +1,11 @@
+window.addEventListener("load", () => {
+	new Camera()
+		.setOptimalPerspective()
+		.with({
+			debug: true,
+			rotate: {
+				speed: 1.2
+			}
+		})
+		.init();
+});
diff --git a/best-css-3d-cuboid-ever/src/style.scss b/best-css-3d-cuboid-ever/src/style.scss
new file mode 100644
index 0000000..862c1d5
--- /dev/null
+++ b/best-css-3d-cuboid-ever/src/style.scss
@@ -0,0 +1,131 @@
+// * 29 December 2021
+// * CSS 3D Cubiod (a highly customizable cubiod module)
+// * ✔ less markup, ✔ responsive, ✔ extendable
+
+.test .cuboid {
+	--base-width: 256;
+	--side-width: 256;
+	--height: 172;
+
+	--color-base: #f52d2d;
+	--color-side: #f52d2d;
+	--color-shade: rgba(0, 0, 0, 0.1);
+	--edge-fix: 0 0 0 1px rgba(0, 0, 0, 0.01);
+
+	// --base-flw-dir: radial-gradient(circle at center, skyblue, purple 85%);
+	--base-flw-dir: linear-gradient(to right, skyblue, purple);
+	--side-flw-dir: linear-gradient(to right, skyblue, purple);
+
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
+@mixin cubiod {
+	width: calc(var(--base-width) * var(--px));
+	height: calc(var(--side-width) * var(--px));
+	background-image: var(--base-flw-dir);
+	background-color: var(--color-base);
+
+	&::before,
+	&::after {
+		top: 0;
+		width: calc(var(--height) * var(--px));
+		height: 100%;
+		background-image: linear-gradient(var(--color-shade) 0 0), var(--side-flw-dir);
+		background-color: var(--color-side);
+		transform: rotateY(-90deg);
+		transform-origin: top left;
+	}
+
+	&::before {
+		left: 0;
+	}
+
+	&::after {
+		left: 100%;
+	}
+
+	& div {
+		position: absolute;
+		left: 0;
+		top: 0;
+
+		width: inherit;
+		height: inherit;
+		background-image: inherit;
+		background-color: inherit;
+
+		transform: translateZ(calc(var(--height) * var(--px)));
+		transform-style: inherit;
+
+		&::before,
+		&::after {
+			right: 100%;
+			background-image: linear-gradient(var(--color-shade) 0 0),
+				linear-gradient(var(--color-shade) 0 0), var(--side-flw-dir);
+			background-color: var(--color-side);
+			width: calc(var(--height) * var(--px));
+			height: calc(var(--base-width) * var(--px));
+			transform: rotateX(90deg) rotateZ(90deg);
+			transform-origin: bottom right;
+		}
+
+		&::before {
+			bottom: 100%;
+		}
+
+		&::after {
+			bottom: 0;
+		}
+	}
+
+	&::before,
+	&::after,
+	& div::before,
+	& div::after {
+		content: "";
+		position: absolute;
+		display: block;
+		box-shadow: var(--edge-fix);
+		box-sizing: border-box;
+	}
+
+	&,
+	& div {
+		box-shadow: var(--edge-fix);
+		box-sizing: border-box;
+	}
+}
+
+.test .cuboid {
+	@include cubiod;
+}
+
+.test {
+	[data-camera] {
+		--cameraY: 62;
+		--cameraZ: 140; // -36
+		--translateZ: 30;
+	}
+
+	input,
+	label {
+		position: relative;
+		cursor: pointer;
+		z-index: 10;
+		margin: 14px 10px;
+	}
+
+	input:not(:checked) ~ [data-camera] .cuboid {
+		--base-flw-dir: none;
+		--side-flw-dir: none;
+	}
+
+	label {
+		font-size: 16px;
+		font-family: var(--fallback-fonts);
+		margin-left: 0;
+	}
+}
diff --git a/best-css-3d-cuboid-ever/src/vyegypg.css b/best-css-3d-cuboid-ever/src/vyegypg.css
new file mode 100644
index 0000000..46b051b
--- /dev/null
+++ b/best-css-3d-cuboid-ever/src/vyegypg.css
@@ -0,0 +1,146 @@
+// ===================
+// === starter.css ===
+// ===================
+
+:root {
+	--unit: 1vmin;
+	--zoom: 100;
+	--available-screen-min: 665;
+	--px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
+
+	--auto-rotate-duration: 10s;
+	--auto-rotate-timing-func: ease;
+	--auto-rotate-direction: forwards;
+
+	--fallback-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
+		Arial, Ubuntu, sans-serif, "Apple Color Emoji", "Twemoji Mozilla",
+		"Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+*,
+*::before,
+*::after {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+	-webkit-text-size-adjust: none;
+	text-size-adjust: none;
+}
+
+*::before,
+*::after {
+	display: block;
+}
+
+body {
+	touch-action: none;
+}
+
+html {
+	cursor: grab;
+}
+
+html:active {
+	cursor: grabbing;
+}
+
+html,
+body {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	scrollbar-width: thin;
+	font-size: 0;
+	overflow: hidden; /* to make touch gestures work correctly */
+}
+
+html::before {
+	content: "";
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100vw;
+	height: 100vh;
+	background-image: radial-gradient(circle at 50% 50%, #fff, #f8f8f8);
+	background-size: 100vw 100vh;
+	background-repeat: no-repeat;
+}
+
+// ==============
+// === 3D.css ===
+// ==============
+
+[data-camera] {
+	--scene-size: 500;
+	--scale: 100;
+	--perspective: 1200;
+	--cameraZ: 0;
+	--cameraY: 0;
+	--translateX: 0;
+	--translateY: 0;
+	--translateZ: 0;
+}
+
+[data-camera] {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100vw;
+	height: 100vh;
+	--fmt-s: calc(var(--scale, 100) / 100);
+	transform: scale(var(--fmt-s));
+	display: grid;
+	place-items: center;
+	overflow: visible;
+
+	transition: transform ease 500ms;
+	will-change: transform;
+}
+
+[data-scene] {
+	position: relative;
+	left: 0;
+	top: 0;
+	width: calc(var(--scene-size) * var(--px));
+	height: calc(var(--scene-size) * var(--px));
+	background-color: rgba(0, 0, 0, 0.1);
+	transform: perspective(calc(var(--perspective, 1000) * 1px))
+		rotateX(calc(var(--cameraY, 0) * 1deg))
+		rotateZ(calc(var(--cameraZ, 0) * 1deg))
+		translate3d(
+			calc(var(--translateX, 0) * var(--px)),
+			calc(var(--translateY, 0) * var(--px) * -1),
+			calc(var(--translateZ, 0) * var(--px) * -1)
+		);
+	--max-rotation: calc((360 + var(--cameraZ)) * 1deg);
+	transform-origin: 50% 50%;
+}
+
+[data-camera][data-dragging] {
+	transition: none;
+}
+
+@keyframes rotateCamera {
+	to {
+		transform: perspective(calc(var(--perspective, 1000) * 1px))
+			rotateX(calc(var(--cameraY, 0) * 1deg)) rotateZ(var(--max-rotation))
+			translate3d(
+				calc(var(--translateX, 0) * var(--px)),
+				calc(var(--translateY, 0) * var(--px) * -1),
+				calc(var(--translateZ, 0) * var(--px) * -1)
+			);
+	}
+}
+
+[data-scene],
+[data-camera],
+[data-3d] {
+	transform-style: preserve-3d;
+}
+
+[data-hidden],
+.class-hidden {
+	display: none;
+}
diff --git a/big-collection-houdini-animated-1-element-spinners/README.markdown b/big-collection-houdini-animated-1-element-spinners/README.markdown
new file mode 100644
index 0000000..1328e2f
--- /dev/null
+++ b/big-collection-houdini-animated-1-element-spinners/README.markdown
@@ -0,0 +1,5 @@
+# Big collection: Houdini-animated 1 element spinners
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/thebabydino/pen/WNrbGBz](https://codepen.io/thebabydino/pen/WNrbGBz).
+
+Houdini support is needed for the animations to work. This means this demo is currently limited to Chromium browsers.
diff --git a/big-collection-houdini-animated-1-element-spinners/dist/index.html b/big-collection-houdini-animated-1-element-spinners/dist/index.html
new file mode 100644
index 0000000..7d7ddb9
--- /dev/null
+++ b/big-collection-houdini-animated-1-element-spinners/dist/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Big collection: Houdini-animated 1 element spinners</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<header>
+  <h3>Houdini-animated 1 element spinners</h3>
+  <p>Note that they're only animated in supporting browsers - that's just Chromium browsers for now.<br>They're all different, no two of them identical - can you spot the differences between similar ones?<br>Can you figure out how they were made before checking the code?</p>
+</header>
+<div class="load" id="load-1"></div>
+<div class="load" id="load-2"></div>
+<div class="load" id="load-3"></div>
+<div class="load" id="load-4"></div>
+<div class="load" id="load-5"></div>
+<div class="load" id="load-6"></div>
+<div class="load" id="load-7"></div>
+<div class="load" id="load-8"></div>
+<div class="load" id="load-9"></div>
+<div class="load" id="load-10"></div>
+<div class="load" id="load-11"></div>
+<div class="load" id="load-12"></div>
+<div class="load" id="load-13"></div>
+<div class="load" id="load-14"></div>
+<div class="load" id="load-15"></div>
+<div class="load" id="load-16"></div>
+<div class="load" id="load-17"></div>
+<div class="load" id="load-18"></div>
+<div class="load" id="load-19"></div>
+<div class="load" id="load-20"></div>
+<div class="load" id="load-21"></div>
+<div class="load" id="load-22"></div>
+<div class="load" id="load-23"></div>
+<div class="load" id="load-24"></div>
+<div class="load" id="load-25"></div>
+<div class="load" id="load-26"></div>
+<div class="load" id="load-27"></div>
+<div class="load" id="load-28"></div>
+<div class="load" id="load-29"></div>
+<div class="load" id="load-30"></div>
+<div class="load" id="load-31"></div>
+<div class="load" id="load-32"></div>
+<div class="load" id="load-33"></div>
+<div class="load" id="load-34"></div>
+<div class="load" id="load-35"></div>
+<div class="load" id="load-36"></div>
+<div class="load" id="load-37"></div>
+<div class="load" id="load-38"></div>
+<div class="load" id="load-39"></div>
+<div class="load" id="load-40"></div>
+<div class="load" id="load-41"></div>
+<div class="load" id="load-42"></div>
+<div class="load" id="load-43"></div>
+<div class="load" id="load-44"></div>
+<div class="load" id="load-45"></div>
+<div class="load" id="load-46"></div>
+<div class="load" id="load-47"></div>
+<div class="load" id="load-48"></div>
+<div class="load" id="load-49"></div>
+<div class="load" id="load-50"></div>
+<div class="load" id="load-51"></div>
+<div class="load" id="load-52"></div>
+<div class="load" id="load-53"></div>
+<div class="load" id="load-54"></div>
+<div class="load" id="load-55"></div>
+<div class="load" id="load-56"></div>
+<div class="load" id="load-57"></div>
+<div class="load" id="load-58"></div>
+<div class="load" id="load-59"></div>
+<div class="load" id="load-60"></div>
+<div class="load" id="load-61"></div>
+<div class="load" id="load-62"></div>
+<div class="load" id="load-63"></div>
+<div class="load" id="load-64"></div>
+<div class="load" id="load-65"></div>
+<div class="load" id="load-66"></div>
+<div class="load" id="load-67"></div>
+<div class="load" id="load-68"></div>
+<div class="load" id="load-69"></div>
+<div class="load" id="load-70"></div>
+<div class="load" id="load-71"></div>
+<div class="load" id="load-72"></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/big-collection-houdini-animated-1-element-spinners/dist/script.js b/big-collection-houdini-animated-1-element-spinners/dist/script.js
new file mode 100644
index 0000000..0356d3e
--- /dev/null
+++ b/big-collection-houdini-animated-1-element-spinners/dist/script.js
@@ -0,0 +1,23 @@
+/* this is all the JS, only registering custom properties here so they can be animated in CSS and nothing else */
+CSS.registerProperty({
+  name: '--hue',
+  syntax: '<angle>',
+  initialValue: '0deg',
+  inherits: true });
+
+
+CSS.registerProperty({
+  name: '--a',
+  syntax: '<angle>',
+  initialValue: '0deg',
+  inherits: true });
+
+
+for (let i = 0; i < 12; i++) {
+  CSS.registerProperty({
+    name: `--alpha${i}`,
+    syntax: '<number>',
+    initialValue: 0,
+    inherits: true });
+
+}
\ No newline at end of file
diff --git a/big-collection-houdini-animated-1-element-spinners/dist/style.css b/big-collection-houdini-animated-1-element-spinners/dist/style.css
new file mode 100644
index 0000000..195d563
--- /dev/null
+++ b/big-collection-houdini-animated-1-element-spinners/dist/style.css
@@ -0,0 +1,1132 @@
+body {
+  box-sizing: border-box;
+  display: grid;
+  grid-gap: 2em;
+  grid-template-columns: repeat(auto-fill, 5em);
+  place-content: center;
+  margin: 0;
+  padding: 2em;
+  min-height: 100vh;
+  background: repeating-linear-Gradient(45deg, #131313 0 2px, #000 0 7px);
+}
+
+header {
+  grid-column: 1/ -1;
+  color: #eee;
+  font: 1em/ 1.375 segoe script, purisa, comic sans ms, cursive;
+  text-align: center;
+}
+
+h3 {
+  font-size: 2em;
+}
+
+small {
+  display: block;
+  font-style: italic;
+  font-size: .375em;
+  font-weight: normal;
+}
+
+.load {
+  position: relative;
+  width: 5em;
+  height: 5em;
+  border-radius: 50%;
+  -webkit-mask: var(--mask);
+          mask: var(--mask);
+}
+.load::before, .load::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+  -webkit-mask: var(--mask);
+          mask: var(--mask);
+}
+
+#load-1 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
+  -webkit-mask-composite: source-in, source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+
+#load-2 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
+  -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-2::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  content: "";
+}
+
+#load-3 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
+  -webkit-mask-composite: source-in, source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+
+#load-4 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
+  -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-4::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  content: "";
+}
+
+#load-5 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
+  -webkit-mask-composite: source-in, source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+
+#load-6 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
+  -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-6::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  content: "";
+}
+
+#load-7 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+
+#load-8 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-8::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  content: "";
+}
+
+#load-9 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+
+#load-10 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-10::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  content: "";
+}
+
+#load-11 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+
+#load-12 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-12::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  content: "";
+}
+
+#load-13 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+
+#load-14 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-14::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  content: "";
+}
+
+#load-15 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+
+#load-16 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-16::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  content: "";
+}
+
+#load-17 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+
+#load-18 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-18::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  content: "";
+}
+
+#load-19 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+
+#load-20 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-20::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  content: "";
+}
+
+#load-21 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+
+#load-22 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-22::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  content: "";
+}
+
+#load-23 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+
+#load-24 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-24::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  content: "";
+}
+
+#load-25 {
+  background: radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 0, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 100%;
+  background-repeat: no-repeat;
+  background-size: 0.79247em 1.58494em, 1.58494em 0.79247em;
+  --c: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-25::before, #load-25:after {
+  -webkit-transform: rotate(var(--az, 30deg));
+          transform: rotate(var(--az, 30deg));
+  background: inherit;
+  -webkit-mask: none;
+          mask: none;
+  content: "";
+}
+#load-25::after {
+  --az: -30deg;
+}
+
+#load-26 {
+  background: radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 0, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 100%;
+  background-repeat: no-repeat;
+  background-size: 0.79247em 1.58494em, 1.58494em 0.79247em;
+  --c: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-26::before, #load-26:after {
+  -webkit-transform: rotate(var(--az, 30deg));
+          transform: rotate(var(--az, 30deg));
+  background: inherit;
+  -webkit-mask: none;
+          mask: none;
+  content: "";
+}
+#load-26::after {
+  --az: -30deg;
+}
+
+#load-27 {
+  background: radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 0, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 100%;
+  background-repeat: no-repeat;
+  background-size: 0.79247em 1.58494em, 1.58494em 0.79247em;
+  --c: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-27::before, #load-27:after {
+  -webkit-transform: rotate(var(--az, 30deg));
+          transform: rotate(var(--az, 30deg));
+  background: inherit;
+  -webkit-mask: none;
+          mask: none;
+  content: "";
+}
+#load-27::after {
+  --az: -30deg;
+}
+
+#load-28 {
+  background: radial-Gradient(at 50% 100%, var(--c) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(at 100% 50%, var(--c) calc(69% - 1px), transparent 69%) 0, radial-Gradient(at 50% 0, var(--c) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(at 0 50%, var(--c) calc(69% - 1px), transparent 69%) 100%;
+  background-repeat: no-repeat;
+  background-size: 0.79247em 0.79247em, 0.79247em 0.79247em;
+  --c: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-28::before, #load-28:after {
+  -webkit-transform: rotate(var(--az, 30deg));
+          transform: rotate(var(--az, 30deg));
+  background: inherit;
+  -webkit-mask: none;
+          mask: none;
+  content: "";
+}
+#load-28::after {
+  --az: -30deg;
+}
+
+#load-29 {
+  background: radial-Gradient(at 50% 100%, var(--c) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(at 100% 50%, var(--c) calc(69% - 1px), transparent 69%) 0, radial-Gradient(at 50% 0, var(--c) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(at 0 50%, var(--c) calc(69% - 1px), transparent 69%) 100%;
+  background-repeat: no-repeat;
+  background-size: 0.79247em 0.79247em, 0.79247em 0.79247em;
+  --c: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-29::before, #load-29:after {
+  -webkit-transform: rotate(var(--az, 30deg));
+          transform: rotate(var(--az, 30deg));
+  background: inherit;
+  -webkit-mask: none;
+          mask: none;
+  content: "";
+}
+#load-29::after {
+  --az: -30deg;
+}
+
+#load-30 {
+  background: radial-Gradient(at 50% 100%, var(--c) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(at 100% 50%, var(--c) calc(69% - 1px), transparent 69%) 0, radial-Gradient(at 50% 0, var(--c) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(at 0 50%, var(--c) calc(69% - 1px), transparent 69%) 100%;
+  background-repeat: no-repeat;
+  background-size: 0.79247em 0.79247em, 0.79247em 0.79247em;
+  --c: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-30::before, #load-30:after {
+  -webkit-transform: rotate(var(--az, 30deg));
+          transform: rotate(var(--az, 30deg));
+  background: inherit;
+  -webkit-mask: none;
+          mask: none;
+  content: "";
+}
+#load-30::after {
+  --az: -30deg;
+}
+
+#load-31 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+
+#load-32 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-32::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  content: "";
+}
+
+#load-33 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+
+#load-34 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-34::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  content: "";
+}
+
+#load-35 {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+
+#load-36 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-36::before {
+  background: HSL(var(--hue, 0deg), 85%, 65%);
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  content: "";
+}
+
+#load-37 {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
+  -webkit-mask-composite: source-in, source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+
+#load-38 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
+  -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+#load-38::before {
+  background: conic-Gradient(from -15deg, HSL(0deg, 100%, 35%)  30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  content: "";
+}
+
+#load-39 {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
+  -webkit-mask-composite: source-in, source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+
+#load-40 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
+  -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+#load-40::before {
+  background: conic-Gradient(from -15deg, HSL(0deg, 100%, 35%)  30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  content: "";
+}
+
+#load-41 {
+  background: conic-Gradient(from -15deg, HSL(0deg, 100%, 35%)  30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
+  -webkit-mask-composite: source-in, source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+
+#load-42 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
+  -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-42::before {
+  background: conic-Gradient(from -15deg, HSL(0deg, 100%, 35%)  30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  content: "";
+}
+
+#load-43 {
+  background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+
+#load-44 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+#load-44::before {
+  background: conic-Gradient(from 0deg, HSL(0deg, 100%, 35%)  30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  content: "";
+}
+
+#load-45 {
+  background: conic-Gradient(from 0deg, HSL(0deg, 100%, 35%)  30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+
+#load-46 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+#load-46::before {
+  background: conic-Gradient(from 0deg, HSL(0deg, 100%, 35%)  30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  content: "";
+}
+
+#load-47 {
+  background: conic-Gradient(from 0deg, HSL(0deg, 100%, 35%)  30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+
+#load-48 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-48::before {
+  background: conic-Gradient(from 0deg, HSL(0deg, 100%, 35%)  30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  content: "";
+}
+
+#load-49 {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+
+#load-50 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+#load-50::before {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  content: "";
+}
+
+#load-51 {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+
+#load-52 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+#load-52::before {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  content: "";
+}
+
+#load-53 {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+
+#load-54 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-54::before {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  content: "";
+}
+
+#load-55 {
+  background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+
+#load-56 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+#load-56::before {
+  background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  content: "";
+}
+
+#load-57 {
+  background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+
+#load-58 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: a 1s steps(12) infinite;
+          animation: a 1s steps(12) infinite;
+}
+#load-58::before {
+  background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  content: "";
+}
+
+#load-59 {
+  background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+
+#load-60 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-60::before {
+  background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  content: "";
+}
+
+#load-61 {
+  --az: 0deg;
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-61, #load-61::before, #load-61::after {
+  background: radial-Gradient(HSL(var(--az), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(HSL(calc(var(--az) + 90deg), 85%, 65%) calc(69% - 1px), transparent 69%) 100%, radial-Gradient(HSL(calc(var(--az) + 180deg), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(HSL(calc(var(--az) + 270deg), 85%, 65%) calc(69% - 1px), transparent 69%) 0;
+  background-repeat: no-repeat;
+  background-size: 0.79247em 1.58494em, 1.58494em 0.79247em;
+}
+#load-61::before, #load-61:after {
+  --az: 30deg;
+  -webkit-transform: rotate(var(--az));
+          transform: rotate(var(--az));
+  -webkit-mask: none;
+          mask: none;
+  content: "";
+}
+#load-61::after {
+  --az: -30deg;
+}
+
+#load-62 {
+  --az: 0deg;
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-62, #load-62::before, #load-62::after {
+  background: radial-Gradient(HSL(var(--az), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(HSL(calc(var(--az) + 90deg), 85%, 65%) calc(69% - 1px), transparent 69%) 100%, radial-Gradient(HSL(calc(var(--az) + 180deg), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(HSL(calc(var(--az) + 270deg), 85%, 65%) calc(69% - 1px), transparent 69%) 0;
+  background-repeat: no-repeat;
+  background-size: 0.79247em 1.58494em, 1.58494em 0.79247em;
+}
+#load-62::before, #load-62:after {
+  --az: 30deg;
+  -webkit-transform: rotate(var(--az));
+          transform: rotate(var(--az));
+  -webkit-mask: none;
+          mask: none;
+  content: "";
+}
+#load-62::after {
+  --az: -30deg;
+}
+
+#load-63 {
+  --az: 0deg;
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-63, #load-63::before, #load-63::after {
+  background: radial-Gradient(HSL(var(--az), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(HSL(calc(var(--az) + 90deg), 85%, 65%) calc(69% - 1px), transparent 69%) 100%, radial-Gradient(HSL(calc(var(--az) + 180deg), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(HSL(calc(var(--az) + 270deg), 85%, 65%) calc(69% - 1px), transparent 69%) 0;
+  background-repeat: no-repeat;
+  background-size: 0.79247em 1.58494em, 1.58494em 0.79247em;
+}
+#load-63::before, #load-63:after {
+  --az: 30deg;
+  -webkit-transform: rotate(var(--az));
+          transform: rotate(var(--az));
+  -webkit-mask: none;
+          mask: none;
+  content: "";
+}
+#load-63::after {
+  --az: -30deg;
+}
+
+#load-64 {
+  --az: 0deg;
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-64, #load-64::before, #load-64::after {
+  background: radial-Gradient(at 50% 100%, HSL(var(--az), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(at 0 50%, HSL(calc(var(--az) + 90deg), 85%, 65%) calc(69% - 1px), transparent 69%) 100%, radial-Gradient(at 50% 0, HSL(calc(var(--az) + 180deg), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(at 100% 50%, HSL(calc(var(--az) + 270deg), 85%, 65%) calc(69% - 1px), transparent 69%) 0;
+  background-repeat: no-repeat;
+  background-size: 0.79247em 0.79247em, 0.79247em 0.79247em;
+}
+#load-64::before, #load-64:after {
+  --az: 30deg;
+  -webkit-transform: rotate(var(--az, 30deg));
+          transform: rotate(var(--az, 30deg));
+  -webkit-mask: none;
+          mask: none;
+  content: "";
+}
+#load-64::after {
+  --az: -30deg;
+}
+
+#load-65 {
+  --az: 0deg;
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-65, #load-65::before, #load-65::after {
+  background: radial-Gradient(at 50% 100%, HSL(var(--az), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(at 0 50%, HSL(calc(var(--az) + 90deg), 85%, 65%) calc(69% - 1px), transparent 69%) 100%, radial-Gradient(at 50% 0, HSL(calc(var(--az) + 180deg), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(at 100% 50%, HSL(calc(var(--az) + 270deg), 85%, 65%) calc(69% - 1px), transparent 69%) 0;
+  background-repeat: no-repeat;
+  background-size: 0.79247em 0.79247em, 0.79247em 0.79247em;
+}
+#load-65::before, #load-65:after {
+  --az: 30deg;
+  -webkit-transform: rotate(var(--az, 30deg));
+          transform: rotate(var(--az, 30deg));
+  -webkit-mask: none;
+          mask: none;
+  content: "";
+}
+#load-65::after {
+  --az: -30deg;
+}
+
+#load-66 {
+  --az: 0deg;
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-66, #load-66::before, #load-66::after {
+  background: radial-Gradient(at 50% 100%, HSL(var(--az), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(at 0 50%, HSL(calc(var(--az) + 90deg), 85%, 65%) calc(69% - 1px), transparent 69%) 100%, radial-Gradient(at 50% 0, HSL(calc(var(--az) + 180deg), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(at 100% 50%, HSL(calc(var(--az) + 270deg), 85%, 65%) calc(69% - 1px), transparent 69%) 0;
+  background-repeat: no-repeat;
+  background-size: 0.79247em 0.79247em, 0.79247em 0.79247em;
+}
+#load-66::before, #load-66:after {
+  --az: 30deg;
+  -webkit-transform: rotate(var(--az, 30deg));
+          transform: rotate(var(--az, 30deg));
+  -webkit-mask: none;
+          mask: none;
+  content: "";
+}
+#load-66::after {
+  --az: -30deg;
+}
+
+#load-67 {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+
+#load-68 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-68::before {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
+  content: "";
+}
+
+#load-69 {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+
+#load-70 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
+          animation: hue 12s linear infinite, a 1s steps(12) infinite;
+}
+#load-70::before {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0)  240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
+  content: "";
+}
+
+#load-71 {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
+          mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+
+#load-72 {
+  background: rgba(255, 255, 255, 0.2);
+  --mask: linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
+  -webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
+          mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
+  -webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+          animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
+}
+#load-72::before {
+  background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%)  30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
+  --mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0))  30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
+  content: "";
+}
+
+@-webkit-keyframes hue {
+  to {
+    --hue: 360deg;
+  }
+}
+
+@keyframes hue {
+  to {
+    --hue: 360deg;
+  }
+}
+@-webkit-keyframes a {
+  to {
+    --a: 360deg;
+  }
+}
+@keyframes a {
+  to {
+    --a: 360deg;
+  }
+}
+@-webkit-keyframes alpha0 {
+  50% {
+    --alpha0: 1;
+  }
+}
+@keyframes alpha0 {
+  50% {
+    --alpha0: 1;
+  }
+}
+@-webkit-keyframes alpha1 {
+  50% {
+    --alpha1: 1;
+  }
+}
+@keyframes alpha1 {
+  50% {
+    --alpha1: 1;
+  }
+}
+@-webkit-keyframes alpha2 {
+  50% {
+    --alpha2: 1;
+  }
+}
+@keyframes alpha2 {
+  50% {
+    --alpha2: 1;
+  }
+}
+@-webkit-keyframes alpha3 {
+  50% {
+    --alpha3: 1;
+  }
+}
+@keyframes alpha3 {
+  50% {
+    --alpha3: 1;
+  }
+}
+@-webkit-keyframes alpha4 {
+  50% {
+    --alpha4: 1;
+  }
+}
+@keyframes alpha4 {
+  50% {
+    --alpha4: 1;
+  }
+}
+@-webkit-keyframes alpha5 {
+  50% {
+    --alpha5: 1;
+  }
+}
+@keyframes alpha5 {
+  50% {
+    --alpha5: 1;
+  }
+}
+@-webkit-keyframes alpha6 {
+  50% {
+    --alpha6: 1;
+  }
+}
+@keyframes alpha6 {
+  50% {
+    --alpha6: 1;
+  }
+}
+@-webkit-keyframes alpha7 {
+  50% {
+    --alpha7: 1;
+  }
+}
+@keyframes alpha7 {
+  50% {
+    --alpha7: 1;
+  }
+}
+@-webkit-keyframes alpha8 {
+  50% {
+    --alpha8: 1;
+  }
+}
+@keyframes alpha8 {
+  50% {
+    --alpha8: 1;
+  }
+}
+@-webkit-keyframes alpha9 {
+  50% {
+    --alpha9: 1;
+  }
+}
+@keyframes alpha9 {
+  50% {
+    --alpha9: 1;
+  }
+}
+@-webkit-keyframes alpha10 {
+  50% {
+    --alpha10: 1;
+  }
+}
+@keyframes alpha10 {
+  50% {
+    --alpha10: 1;
+  }
+}
+@-webkit-keyframes alpha11 {
+  50% {
+    --alpha11: 1;
+  }
+}
+@keyframes alpha11 {
+  50% {
+    --alpha11: 1;
+  }
+}
\ No newline at end of file
diff --git a/big-collection-houdini-animated-1-element-spinners/license.txt b/big-collection-houdini-animated-1-element-spinners/license.txt
new file mode 100644
index 0000000..ef2fb15
--- /dev/null
+++ b/big-collection-houdini-animated-1-element-spinners/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Ana Tudor (https://codepen.io/thebabydino/pen/WNrbGBz)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/big-collection-houdini-animated-1-element-spinners/src/index.pug b/big-collection-houdini-animated-1-element-spinners/src/index.pug
new file mode 100644
index 0000000..a898621
--- /dev/null
+++ b/big-collection-houdini-animated-1-element-spinners/src/index.pug
@@ -0,0 +1,8 @@
+- let n = 72;
+
+header
+	h3 Houdini-animated 1 element spinners
+	p Note that they're only animated in supporting browsers - that's just Chromium browsers for now.<br>They're all different, no two of them identical - can you spot the differences between similar ones?<br>Can you figure out how they were made before checking the code?
+
+- for(let i = 0; i < n; i++)
+	.load(id=`load-${i + 1}`)
\ No newline at end of file
diff --git a/big-collection-houdini-animated-1-element-spinners/src/script.babel b/big-collection-houdini-animated-1-element-spinners/src/script.babel
new file mode 100644
index 0000000..7feab8d
--- /dev/null
+++ b/big-collection-houdini-animated-1-element-spinners/src/script.babel
@@ -0,0 +1,23 @@
+/* this is all the JS, only registering custom properties here so they can be animated in CSS and nothing else */
+CSS.registerProperty({
+	name: '--hue', 
+	syntax: '<angle>', 
+	initialValue: '0deg', 
+	inherits: true
+});
+
+CSS.registerProperty({
+	name: '--a', 
+	syntax: '<angle>', 
+	initialValue: '0deg', 
+	inherits: true
+});
+
+for(let i = 0; i < 12; i++) {
+	CSS.registerProperty({
+		name: `--alpha${i}`, 
+		syntax: '<number>', 
+		initialValue: 0, 
+		inherits: true
+	});
+}
\ No newline at end of file
diff --git a/big-collection-houdini-animated-1-element-spinners/src/style.scss b/big-collection-houdini-animated-1-element-spinners/src/style.scss
new file mode 100644
index 0000000..ea58dd7
--- /dev/null
+++ b/big-collection-houdini-animated-1-element-spinners/src/style.scss
@@ -0,0 +1,1537 @@
+@import 'compass/css3';
+
+$d: 5em;
+$n: 12;
+$m: 5;
+$t: 1s;
+
+@function vrepeat($val, $n: 12) {
+	$list: ();
+	
+	@for $i from 0 to $n {
+		$list: $list, $val
+	}
+	
+	@return $list
+}
+
+@function rainbow($n: 12, $sat: 100%, $lum: 50%, $o: 0) {
+	$ba: 360deg/$n;
+	$c-list: from ($o - .5)*$ba;
+	
+	@for $i from 0 to $n {
+		$c-list: $c-list, 
+			HSL($i*$ba, $sat, $lum) 
+			if($i > 0, 0, unquote('')) 
+			if($i < $n - 1, ($i + 1)*$ba, unquote(''))
+	}
+	
+	@return $c-list
+}
+
+@function bars($n: 12, $bar-w: .05*$d, $a: 0) {
+	$n: $n - $n%2;
+	$ba: 360deg/$n;
+	$g-list: ();
+	$m: .5*$n;
+	$o: .5*$bar-w;
+	
+	@for $i from 0 to $n {
+		$g-list: $g-list, 
+			linear-Gradient(($i + $a)*$ba, 
+					transparent calc(50% - #{$o} - 1px), 
+					red calc(50% - #{$o}) calc(50% + #{$o}), 
+					transparent calc(50% - #{$o} + 1px))
+	}
+	
+	@return $g-list
+}
+
+@function dots($n: 12, $ro: .5*$d) {
+	$ba: 360deg/$n;
+	$rd: $ro*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$rp: $ro - $rd;
+	$g-list: ();
+	
+	@for $i from 0 to $n {
+		$ca: $i*$ba;
+		$x: calc(50% + #{$rp*cos($ca)});
+		$y: calc(50% + #{$rp*sin($ca)});
+		$g-list: $g-list, 
+			radial-Gradient(#{circle at $x $y}, 
+					red calc(#{$rd} - 2px), transparent calc(#{$rd} - 1px))
+	}
+	
+	@return $g-list
+}
+
+@function base-steps($n: 12, $m: $n, $a-ani: 0) {
+	$ba: 360deg/$n;
+	$s-list: ();
+	
+	@for $i from 0 to $m {
+		$s-list: $s-list, 
+			RGBA(0, 0, 0, if($a-ani > 0, var(--alpha#{$i}), $i/($m - 1))) 
+			if($i > 0, ($n - $m)*$ba, unquote('')) 
+			if($i < $n - 1, ($n - $m + $i + 1)*$ba, unquote(''))
+	}
+	
+	@return $s-list
+}
+
+@function alpha-ani($n: 12) {
+	$a-list: ();
+	
+	@for $i from 0 to $n {
+		$a-list: $a-list, alpha#{$i} $t steps(1) ($i/$n - 1)*.5*$t infinite alternate
+	}
+	
+	@return $a-list
+}
+
+body {
+	box-sizing: border-box;
+	display: grid;
+	grid-gap: 2em;
+	grid-template-columns: repeat(auto-fill, $d);
+	place-content: center;
+	margin: 0;
+	padding: 2em;
+	min-height: 100vh;
+	background: repeating-linear-Gradient(45deg, 
+			#131313 0 2px, #000 0 7px)
+}
+
+header {
+	grid-column: 1/ -1;
+	color: #eee;
+	font: 1em/ 1.375 segoe script, purisa, comic sans ms, cursive;
+	text-align: center;
+}
+
+h3 { font-size: 2em }
+
+small { display: block; font-style: italic; font-size: .375em; font-weight: normal; }
+
+.load {
+	position: relative;
+	width: $d; height: $d;
+	border-radius: 50%;
+	mask: var(--mask);
+	
+	&::before, &::after {
+		position: absolute;
+		top: 0; right: 0; bottom: 0; left: 0;
+		border-radius: inherit;
+		mask: var(--mask);
+	}
+}
+
+#load-1 {
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n)}), 
+		radial-Gradient(transparent #{.25*$d}, red 0), 
+		#{bars($n)};
+	mask-composite: intersect, intersect, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite
+}
+
+#load-2 {
+	background: rgba(#fff, .2);
+	--mask: 
+		radial-Gradient(transparent #{.25*$d}, red 0), 
+		#{bars($n)};
+	mask-composite: intersect, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n)});
+		content: ''
+	}
+}
+
+#load-3 {
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $m)}), 
+		radial-Gradient(transparent #{.25*$d}, red 0), 
+		#{bars($n)};
+	mask-composite: intersect, intersect, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite
+}
+
+#load-4 {
+	background: rgba(#fff, .2);
+	--mask: 
+		radial-Gradient(transparent #{.25*$d}, red 0), 
+		#{bars($n)};
+	mask-composite: intersect, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n, $m)});
+		content: ''
+	}
+}
+
+#load-5 {
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $a-ani: 1)}), 
+		radial-Gradient(transparent #{.25*$d}, red 0), 
+		#{bars($n)};
+	mask-composite: intersect, intersect, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani()
+}
+
+#load-6 {
+	background: rgba(#fff, .2);
+	--mask: 
+		radial-Gradient(transparent #{.25*$d}, red 0), 
+		#{bars($n)};
+	mask-composite: intersect, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani();
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n, $a-ani: 1)});
+		content: ''
+	}
+}
+
+#load-7 {
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from var(--a, 0deg), #{base-steps($n)}), 
+		linear-Gradient(red, red), 
+		radial-Gradient(red #{.25*$d}, transparent 0), 
+		#{bars($n, 2px)};
+	mask-composite: intersect, exclude, vrepeat(add, $n + 1);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite
+}
+
+#load-8 {
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-Gradient(red, red), 
+		radial-Gradient(red #{.25*$d}, transparent 0), 
+		#{bars($n, 2px)};
+	mask-composite: exclude, vrepeat(add, $n + 1);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from var(--a, 0deg), 
+					#{base-steps($n)});
+		content: ''
+	}
+}
+
+#load-9 {
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from var(--a, 0deg), #{base-steps($n, $m)}), 
+		linear-Gradient(red, red), 
+		radial-Gradient(red #{.25*$d}, transparent 0), 
+		#{bars($n, 2px)};
+	mask-composite: intersect, exclude, vrepeat(add, $n + 1);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite
+}
+
+#load-10 {
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-Gradient(red, red), 
+		radial-Gradient(red #{.25*$d}, transparent 0), 
+		#{bars($n, 2px)};
+	mask-composite: exclude, vrepeat(add, $n + 1);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from var(--a, 0deg), #{base-steps($n, $m)});
+		content: ''
+	}
+}
+
+#load-11 {
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from var(--a, 0deg), 
+				#{base-steps($n, $a-ani: 1)}), 
+		linear-Gradient(red, red), 
+		radial-Gradient(red #{.25*$d}, transparent 0), 
+		#{bars($n, 2px)};
+	mask-composite: intersect, exclude, vrepeat(add, $n + 1);
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani()
+}
+
+#load-12 {
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-Gradient(red, red), 
+		radial-Gradient(red #{.25*$d}, transparent 0), 
+		#{bars($n, 2px)};
+	mask-composite: exclude, vrepeat(add, $n + 1);
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani();
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from var(--a, 0deg), #{base-steps($n, $a-ani: 1)});
+		content: ''
+	}
+}
+
+#load-13 {
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n)}), 
+		#{dots($n)};
+	mask-composite: intersect, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite
+}
+
+#load-14 {
+	background: rgba(#fff, .2);
+	--mask: #{dots($n)};
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n)});
+		content: ''
+	}
+}
+
+#load-15 {
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $m)}), 
+		#{dots($n)};
+	mask-composite: intersect, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite
+}
+
+#load-16 {
+	background: rgba(#fff, .2);
+	--mask: #{dots($n)};
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n, $m)});
+		content: ''
+	}
+}
+
+#load-17 {
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $a-ani: 1)}), 
+		#{dots($n)};
+	mask-composite: intersect, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani()
+}
+
+#load-18 {
+	background: rgba(#fff, .2);
+	--mask: #{dots($n)};
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani();
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n, $a-ani: 1)});
+		content: ''
+	}
+}
+
+#load-19 {
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from var(--a, 0deg), #{base-steps($n)}), 
+		linear-Gradient(red, red), 
+		#{bars($n, 2px)};
+	mask-composite: intersect, exclude, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite
+}
+
+#load-20 {
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-Gradient(red, red), 
+		#{bars($n, 2px)};
+	mask-composite: exclude, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from var(--a, 0deg), 
+					#{base-steps($n)});
+		content: ''
+	}
+}
+
+#load-21 {
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from var(--a, 0deg), #{base-steps($n, $m)}), 
+		linear-Gradient(red, red), 
+		#{bars($n, 2px)};
+	mask-composite: intersect, exclude, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite
+}
+
+#load-22 {
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-Gradient(red, red), 
+		#{bars($n, 2px)};
+	mask-composite: exclude, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from var(--a, 0deg), #{base-steps($n, $m)});
+		content: ''
+	}
+}
+
+#load-23 {
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from var(--a, 0deg), 
+				#{base-steps($n, $a-ani: 1)}), 
+		linear-Gradient(red, red), 
+		#{bars($n, 2px)};
+	mask-composite: intersect, exclude, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani()
+}
+
+#load-24 {
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-Gradient(red, red), 
+		#{bars($n, 2px)};
+	mask-composite: exclude, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani();
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from var(--a, 0deg), #{base-steps($n, $a-ani: 1)});
+		content: ''
+	}
+}
+
+#load-25 {
+	$ba: 360deg/12;
+	$rx: .375*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$ry: 2*$rx;
+	background: 
+		radial-Gradient(var(--c) calc(69% - 1px), 
+				transparent 69%) 50% 0, 
+		radial-Gradient(var(--c) calc(69% - 1px), 
+				transparent 69%) 0, 
+		radial-Gradient(var(--c) calc(69% - 1px), 
+				transparent 69%) 50% 100%, 
+		radial-Gradient(var(--c) calc(69% - 1px), 
+				transparent 69%) 100%;
+	background-repeat: no-repeat;
+	background-size: 2*$rx 2*$ry, 2*$ry 2*$rx;
+	--c: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n)});
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before, &:after {
+		transform: rotate(var(--az, 30deg));
+		background: inherit;
+		mask: none;
+		content: ''
+	}
+	
+	&::after { --az: -30deg }
+}
+
+#load-26 {
+	$ba: 360deg/12;
+	$rx: .375*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$ry: 2*$rx;
+	background: 
+		radial-Gradient(var(--c) calc(69% - 1px), 
+				transparent 69%) 50% 0, 
+		radial-Gradient(var(--c) calc(69% - 1px), 
+				transparent 69%) 0, 
+		radial-Gradient(var(--c) calc(69% - 1px), 
+				transparent 69%) 50% 100%, 
+		radial-Gradient(var(--c) calc(69% - 1px), 
+				transparent 69%) 100%;
+	background-repeat: no-repeat;
+	background-size: 2*$rx 2*$ry, 2*$ry 2*$rx;
+	--c: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $m)});
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before, &:after {
+		transform: rotate(var(--az, 30deg));
+		background: inherit;
+		mask: none;
+		content: ''
+	}
+	
+	&::after { --az: -30deg }
+}
+
+#load-27 {
+	$ba: 360deg/12;
+	$rx: .375*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$ry: 2*$rx;
+	background: 
+		radial-Gradient(var(--c) calc(69% - 1px), 
+				transparent 69%) 50% 0, 
+		radial-Gradient(var(--c) calc(69% - 1px), 
+				transparent 69%) 0, 
+		radial-Gradient(var(--c) calc(69% - 1px), 
+				transparent 69%) 50% 100%, 
+		radial-Gradient(var(--c) calc(69% - 1px), 
+				transparent 69%) 100%;
+	background-repeat: no-repeat;
+	background-size: 2*$rx 2*$ry, 2*$ry 2*$rx;
+	--c: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $a-ani: 1)});
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani();
+	
+	&::before, &:after {
+		transform: rotate(var(--az, 30deg));
+		background: inherit;
+		mask: none;
+		content: ''
+	}
+	
+	&::after { --az: -30deg }
+}
+
+#load-28 {
+	$ba: 360deg/12;
+	$rx: .375*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$ry: 2*$rx;
+	background: 
+		radial-Gradient(at 50% 100%, 
+				var(--c) calc(69% - 1px), 
+				transparent 69%) 50% 0, 
+		radial-Gradient(at 100% 50%, 
+				var(--c) calc(69% - 1px), 
+				transparent 69%) 0, 
+		radial-Gradient(at 50% 0, 
+				var(--c) calc(69% - 1px), 
+				transparent 69%) 50% 100%, 
+		radial-Gradient(at 0 50%, 
+				var(--c) calc(69% - 1px), 
+				transparent 69%) 100%;
+	background-repeat: no-repeat;
+	background-size: 2*$rx $ry, $ry 2*$rx;
+	--c: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n)});
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before, &:after {
+		transform: rotate(var(--az, 30deg));
+		background: inherit;
+		mask: none;
+		content: ''
+	}
+	
+	&::after { --az: -30deg }
+}
+
+#load-29 {
+	$ba: 360deg/12;
+	$rx: .375*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$ry: 2*$rx;
+	background: 
+		radial-Gradient(at 50% 100%, 
+				var(--c) calc(69% - 1px), 
+				transparent 69%) 50% 0, 
+		radial-Gradient(at 100% 50%, 
+				var(--c) calc(69% - 1px), 
+				transparent 69%) 0, 
+		radial-Gradient(at 50% 0, 
+				var(--c) calc(69% - 1px), 
+				transparent 69%) 50% 100%, 
+		radial-Gradient(at 0 50%, 
+				var(--c) calc(69% - 1px), 
+				transparent 69%) 100%;
+	background-repeat: no-repeat;
+	background-size: 2*$rx $ry, $ry 2*$rx;
+	--c: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $m)});
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before, &:after {
+		transform: rotate(var(--az, 30deg));
+		background: inherit;
+		mask: none;
+		content: ''
+	}
+	
+	&::after { --az: -30deg }
+}
+
+#load-30 {
+	$ba: 360deg/12;
+	$rx: .375*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$ry: 2*$rx;
+	background: 
+		radial-Gradient(at 50% 100%, 
+				var(--c) calc(69% - 1px), 
+				transparent 69%) 50% 0, 
+		radial-Gradient(at 100% 50%, 
+				var(--c) calc(69% - 1px), 
+				transparent 69%) 0, 
+		radial-Gradient(at 50% 0, 
+				var(--c) calc(69% - 1px), 
+				transparent 69%) 50% 100%, 
+		radial-Gradient(at 0 50%, 
+				var(--c) calc(69% - 1px), 
+				transparent 69%) 100%;
+	background-repeat: no-repeat;
+	background-size: 2*$rx $ry, $ry 2*$rx;
+	--c: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $a-ani: 1)});
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani();
+	
+	&::before, &:after {
+		transform: rotate(var(--az, 30deg));
+		background: inherit;
+		mask: none;
+		content: ''
+	}
+	
+	&::after { --az: -30deg }
+}
+
+#load-31 {
+	$ba: 360deg/$n;
+	$rd: .5*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$rp: .5*$d - $rd;
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n)}), 
+		linear-gradient(red, red), 
+		#{bars($n, 2px, .5)}, 
+		linear-gradient(red, red), 
+		radial-Gradient(red #{$rp}, transparent 0), 
+		#{dots($n)};
+	mask-composite: intersect, exclude, vrepeat(add, $n), exclude, add, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite
+}
+
+#load-32 {
+	$ba: 360deg/$n;
+	$rd: .5*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$rp: .5*$d - $rd;
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-gradient(red, red), 
+		#{bars($n, 2px, .5)}, 
+		linear-gradient(red, red), 
+		radial-Gradient(red #{$rp}, transparent 0), 
+		#{dots($n)};
+	mask-composite: exclude, vrepeat(add, $n), exclude, add, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n)});
+		content: ''
+	}
+}
+
+#load-33 {
+	$ba: 360deg/$n;
+	$rd: .5*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$rp: .5*$d - $rd;
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $m)}), 
+		linear-gradient(red, red), 
+		#{bars($n, 2px, .5)}, 
+		linear-gradient(red, red), 
+		radial-Gradient(red #{$rp}, transparent 0), 
+		#{dots($n)};
+	mask-composite: intersect, exclude, vrepeat(add, $n), exclude, add, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite
+}
+
+#load-34 {
+	$ba: 360deg/$n;
+	$rd: .5*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$rp: .5*$d - $rd;
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-gradient(red, red), 
+		#{bars($n, 2px, .5)}, 
+		linear-gradient(red, red), 
+		radial-Gradient(red #{$rp}, transparent 0), 
+		#{dots($n)};
+	mask-composite: exclude, vrepeat(add, $n), exclude, add, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n, $m)});
+		content: ''
+	}
+}
+
+#load-35 {
+	$ba: 360deg/$n;
+	$rd: .5*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$rp: .5*$d - $rd;
+	background: HSL(var(--hue, 0deg), 85%, 65%);
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $a-ani: 1)}), 
+		linear-gradient(red, red), 
+		#{bars($n, 2px, .5)}, 
+		linear-gradient(red, red), 
+		radial-Gradient(red #{$rp}, transparent 0), 
+		#{dots($n)};
+	mask-composite: intersect, exclude, vrepeat(add, $n), exclude, add, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani()
+}
+
+#load-36 {
+	$ba: 360deg/$n;
+	$rd: .5*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$rp: .5*$d - $rd;
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-gradient(red, red), 
+		#{bars($n, 2px, .5)}, 
+		linear-gradient(red, red), 
+		radial-Gradient(red #{$rp}, transparent 0), 
+		#{dots($n)};
+	mask-composite: exclude, vrepeat(add, $n), exclude, add, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani();
+	
+	&::before {
+		background: HSL(var(--hue, 0deg), 85%, 65%);
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n, $a-ani: 1)});
+		content: ''
+	}
+}
+
+#load-37 {
+	$n: 12;
+	background: conic-Gradient(rainbow($n, 85%, 65%));
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n)}), 
+		radial-Gradient(transparent #{.25*$d}, red 0), 
+		#{bars($n)};
+	mask-composite: intersect, intersect, vrepeat(add, $n);
+	animation: a $t steps($n) infinite
+}
+
+#load-38 {
+	$n: 12;
+	background: rgba(#fff, .2);
+	--mask: 
+		radial-Gradient(transparent #{.25*$d}, red 0), 
+		#{bars($n)};
+	mask-composite: intersect, vrepeat(add, $n);
+	animation: a $t steps($n) infinite;
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 100%, 35%));
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n)});
+		content: ''
+	}
+}
+
+#load-39 {
+	$n: 12;
+	$m: 5;
+	background: conic-Gradient(rainbow($n, 85%, 65%));
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $m)}), 
+		radial-Gradient(transparent #{.25*$d}, red 0), 
+		#{bars($n)};
+	mask-composite: intersect, intersect, vrepeat(add, $n);
+	animation: a $t steps($n) infinite;
+}
+
+#load-40 {
+	$n: 12;
+	$m: 5;
+	background: rgba(#fff, .2);
+	--mask: 
+		radial-Gradient(transparent #{.25*$d}, red 0), 
+		#{bars($n)};
+	mask-composite: intersect, vrepeat(add, $n);
+	animation: a $t steps($n) infinite;
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 100%, 35%));
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n, $m)});
+		content: ''
+	}
+}
+
+#load-41 {
+	background: conic-Gradient(rainbow($n, 100%, 35%));
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $a-ani: 1)}), 
+		radial-Gradient(transparent #{.25*$d}, red 0), 
+		#{bars($n)};
+	mask-composite: intersect, intersect, vrepeat(add, $n);
+	animation: alpha-ani()
+}
+
+#load-42 {
+	background: rgba(#fff, .2);
+	--mask: 
+		radial-Gradient(transparent #{.25*$d}, red 0), 
+		#{bars($n)};
+	mask-composite: intersect, vrepeat(add, $n);
+	animation: alpha-ani();
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 100%, 35%));
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n, $a-ani: 1)});
+		content: ''
+	}
+}
+
+#load-43 {
+	background: conic-Gradient(rainbow($n, 85%, 65%, .5));
+	--mask: 
+		conic-Gradient(from var(--a, 0deg), #{base-steps($n)}), 
+		linear-Gradient(red, red), 
+		radial-Gradient(red #{.25*$d}, transparent 0), 
+		#{bars($n, 2px)};
+	mask-composite: intersect, exclude, vrepeat(add, $n + 1);
+	animation: a $t steps($n) infinite
+}
+
+#load-44 {
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-Gradient(red, red), 
+		radial-Gradient(red #{.25*$d}, transparent 0), 
+		#{bars($n, 2px)};
+	mask-composite: exclude, vrepeat(add, $n + 1);
+	animation: a $t steps($n) infinite;
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 100%, 35%, .5));
+		--mask: 
+			conic-Gradient(from var(--a, 0deg), 
+					#{base-steps($n)});
+		content: ''
+	}
+}
+
+#load-45 {
+	background: conic-Gradient(rainbow($n, 100%, 35%, .5));
+	--mask: 
+		conic-Gradient(from var(--a, 0deg), #{base-steps($n, $m)}), 
+		linear-Gradient(red, red), 
+		radial-Gradient(red #{.25*$d}, transparent 0), 
+		#{bars($n, 2px)};
+	mask-composite: intersect, exclude, vrepeat(add, $n + 1);
+	animation: a $t steps($n) infinite
+}
+
+#load-46 {
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-Gradient(red, red), 
+		radial-Gradient(red #{.25*$d}, transparent 0), 
+		#{bars($n, 2px)};
+	mask-composite: exclude, vrepeat(add, $n + 1);
+	animation: a $t steps($n) infinite;
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 100%, 35%, .5));
+		--mask: 
+			conic-Gradient(from var(--a, 0deg), #{base-steps($n, $m)});
+		content: ''
+	}
+}
+
+#load-47 {
+	background: conic-Gradient(rainbow($n, 100%, 35%, .5));
+	--mask: 
+		conic-Gradient(from var(--a, 0deg), 
+				#{base-steps($n, $a-ani: 1)}), 
+		linear-Gradient(red, red), 
+		radial-Gradient(red #{.25*$d}, transparent 0), 
+		#{bars($n, 2px)};
+	mask-composite: intersect, exclude, vrepeat(add, $n + 1);
+	animation: alpha-ani()
+}
+
+#load-48 {
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-Gradient(red, red), 
+		radial-Gradient(red #{.25*$d}, transparent 0), 
+		#{bars($n, 2px)};
+	mask-composite: exclude, vrepeat(add, $n + 1);
+	animation: alpha-ani();
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 100%, 35%, .5));
+		--mask: 
+			conic-Gradient(from var(--a, 0deg), #{base-steps($n, $a-ani: 1)});
+		content: ''
+	}
+}
+
+#load-49 {
+	background: conic-Gradient(rainbow($n, 85%, 65%));
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n)}), 
+		#{dots($n)};
+	mask-composite: intersect, vrepeat(add, $n);
+	animation: a $t steps($n) infinite
+}
+
+#load-50 {
+	background: rgba(#fff, .2);
+	--mask: #{dots($n)};
+	animation: a $t steps($n) infinite;
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 85%, 65%));
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n)});
+		content: ''
+	}
+}
+
+#load-51 {
+	background: conic-Gradient(rainbow($n, 85%, 65%));
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $m)}), 
+		#{dots($n)};
+	mask-composite: intersect, vrepeat(add, $n);
+	animation: a $t steps($n) infinite
+}
+
+#load-52 {
+	background: rgba(#fff, .2);
+	--mask: #{dots($n)};
+	animation: a $t steps($n) infinite;
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 85%, 65%));
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n, $m)});
+		content: ''
+	}
+}
+
+#load-53 {
+	background: conic-Gradient(rainbow($n, 85%, 65%));
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $a-ani: 1)}), 
+		#{dots($n)};
+	mask-composite: intersect, vrepeat(add, $n);
+	animation: alpha-ani()
+}
+
+#load-54 {
+	background: rgba(#fff, .2);
+	--mask: 
+		#{dots($n)};
+	animation: alpha-ani();
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 85%, 65%));
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n, $a-ani: 1)});
+		content: ''
+	}
+}
+
+#load-55 {
+	background: conic-Gradient(rainbow($n, 85%, 65%, .5));
+	--mask: 
+		conic-Gradient(from var(--a, 0deg), #{base-steps($n)}), 
+		linear-Gradient(red, red), 
+		#{bars($n, 2px)};
+	mask-composite: intersect, exclude, vrepeat(add, $n);
+	animation: a $t steps($n) infinite
+}
+
+#load-56 {
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-Gradient(red, red), 
+		#{bars($n, 2px)};
+	mask-composite: exclude, vrepeat(add, $n);
+	animation: a $t steps($n) infinite;
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 85%, 65%, .5));
+		--mask: 
+			conic-Gradient(from var(--a, 0deg), 
+					#{base-steps($n)});
+		content: ''
+	}
+}
+
+#load-57 {
+	background: conic-Gradient(rainbow($n, 85%, 65%, .5));
+	--mask: 
+		conic-Gradient(from var(--a, 0deg), #{base-steps($n, $m)}), 
+		linear-Gradient(red, red), 
+		#{bars($n, 2px)};
+	mask-composite: intersect, exclude, vrepeat(add, $n);
+	animation: a $t steps($n) infinite
+}
+
+#load-58 {
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-Gradient(red, red), 
+		#{bars($n, 2px)};
+	mask-composite: exclude, vrepeat(add, $n);
+	animation: a $t steps($n) infinite;
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 85%, 65%, .5));
+		--mask: 
+			conic-Gradient(from var(--a, 0deg), #{base-steps($n, $m)});
+		content: ''
+	}
+}
+
+#load-59 {
+	background: conic-Gradient(rainbow($n, 85%, 65%, .5));
+	--mask: 
+		conic-Gradient(from var(--a, 0deg), 
+				#{base-steps($n, $a-ani: 1)}), 
+		linear-Gradient(red, red), 
+		#{bars($n, 2px)};
+	mask-composite: intersect, exclude, vrepeat(add, $n);
+	animation: alpha-ani()
+}
+
+#load-60 {
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-Gradient(red, red), 
+		#{bars($n, 2px)};
+	mask-composite: exclude, vrepeat(add, $n);
+	animation: alpha-ani();
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 85%, 65%, .5));
+		--mask: 
+			conic-Gradient(from var(--a, 0deg), #{base-steps($n, $a-ani: 1)});
+		content: ''
+	}
+}
+
+#load-61 {
+	$ba: 360deg/12;
+	$rx: .375*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$ry: 2*$rx;
+	--az: 0deg;
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n)});
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&, &::before, &::after {
+		background: 
+			radial-Gradient(HSL(var(--az), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 50% 0, 
+			radial-Gradient(HSL(calc(var(--az) + #{3*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 100%, 
+			radial-Gradient(HSL(calc(var(--az) + #{6*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 50% 100%, 
+			radial-Gradient(HSL(calc(var(--az) + #{9*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 0;
+		background-repeat: no-repeat;
+		background-size: 2*$rx 2*$ry, 2*$ry 2*$rx;
+	}
+	
+	&::before, &:after {
+		--az: 30deg;
+		transform: rotate(var(--az));
+		mask: none;
+		content: ''
+	}
+	
+	&::after { --az: -30deg }
+}
+
+#load-62 {
+	$ba: 360deg/12;
+	$rx: .375*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$ry: 2*$rx;
+	--az: 0deg;
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $m)});
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&, &::before, &::after {
+		background: 
+			radial-Gradient(HSL(var(--az), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 50% 0, 
+			radial-Gradient(HSL(calc(var(--az) + #{3*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 100%, 
+			radial-Gradient(HSL(calc(var(--az) + #{6*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 50% 100%, 
+			radial-Gradient(HSL(calc(var(--az) + #{9*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 0;
+		background-repeat: no-repeat;
+		background-size: 2*$rx 2*$ry, 2*$ry 2*$rx;
+	}
+	
+	&::before, &:after {
+		--az: 30deg;
+		transform: rotate(var(--az));
+		mask: none;
+		content: ''
+	}
+	
+	&::after { --az: -30deg }
+}
+
+#load-63 {
+	$ba: 360deg/12;
+	$rx: .375*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$ry: 2*$rx;
+	--az: 0deg;
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $a-ani: 1)});
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani();
+	
+	&, &::before, &::after {
+		background: 
+			radial-Gradient(HSL(var(--az), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 50% 0, 
+			radial-Gradient(HSL(calc(var(--az) + #{3*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 100%, 
+			radial-Gradient(HSL(calc(var(--az) + #{6*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 50% 100%, 
+			radial-Gradient(HSL(calc(var(--az) + #{9*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 0;
+		background-repeat: no-repeat;
+		background-size: 2*$rx 2*$ry, 2*$ry 2*$rx;
+	}
+	
+	&::before, &:after {
+		--az: 30deg;
+		transform: rotate(var(--az));
+		mask: none;
+		content: ''
+	}
+	
+	&::after { --az: -30deg }
+}
+
+#load-64 {
+	$ba: 360deg/12;
+	$rx: .375*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$ry: 2*$rx;
+	--az: 0deg;
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n)});
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&, &::before, &::after {
+		background: 
+			radial-Gradient(at 50% 100%, 
+					HSL(var(--az), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 50% 0, 
+			radial-Gradient(at 0 50%, 
+					HSL(calc(var(--az) + #{3*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 100%, 
+			radial-Gradient(at 50% 0, 
+					HSL(calc(var(--az) + #{6*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 50% 100%, 
+			radial-Gradient(at 100% 50%, 
+					HSL(calc(var(--az) + #{9*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 0;
+		background-repeat: no-repeat;
+		background-size: 2*$rx $ry, $ry 2*$rx;
+	}
+	
+	&::before, &:after {
+		--az: 30deg;
+		transform: rotate(var(--az, 30deg));
+		mask: none;
+		content: ''
+	}
+	
+	&::after { --az: -30deg }
+}
+
+#load-65 {
+	$ba: 360deg/12;
+	$rx: .375*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$ry: 2*$rx;
+	--az: 0deg;
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $m)});
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&, &::before, &::after {
+		background: 
+			radial-Gradient(at 50% 100%, 
+					HSL(var(--az), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 50% 0, 
+			radial-Gradient(at 0 50%, 
+					HSL(calc(var(--az) + #{3*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 100%, 
+			radial-Gradient(at 50% 0, 
+					HSL(calc(var(--az) + #{6*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 50% 100%, 
+			radial-Gradient(at 100% 50%, 
+					HSL(calc(var(--az) + #{9*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 0;
+		background-repeat: no-repeat;
+		background-size: 2*$rx $ry, $ry 2*$rx;
+	}
+	
+	&::before, &:after {
+		--az: 30deg;
+		transform: rotate(var(--az, 30deg));
+		mask: none;
+		content: ''
+	}
+	
+	&::after { --az: -30deg }
+}
+
+#load-66 {
+	$ba: 360deg/12;
+	$rx: .375*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$ry: 2*$rx;
+	--az: 0deg;
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $a-ani: 1)});
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani();
+	
+	&, &::before, &::after {
+		background: 
+			radial-Gradient(at 50% 100%, 
+					HSL(var(--az), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 50% 0, 
+			radial-Gradient(at 0 50%, 
+					HSL(calc(var(--az) + #{3*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 100%, 
+			radial-Gradient(at 50% 0, 
+					HSL(calc(var(--az) + #{6*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 50% 100%, 
+			radial-Gradient(at 100% 50%, 
+					HSL(calc(var(--az) + #{9*$ba}), 85%, 65%) calc(69% - 1px), 
+					transparent 69%) 0;
+		background-repeat: no-repeat;
+		background-size: 2*$rx $ry, $ry 2*$rx;
+	}
+	
+	&::before, &:after {
+		--az: 30deg;
+		transform: rotate(var(--az, 30deg));
+		mask: none;
+		content: ''
+	}
+	
+	&::after { --az: -30deg }
+}
+
+#load-67 {
+	$ba: 360deg/$n;
+	$rd: .5*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$rp: .5*$d - $rd;
+	background: conic-Gradient(rainbow($n, 85%, 65%));
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n)}), 
+		linear-gradient(red, red), 
+		#{bars($n, 2px, .5)}, 
+		linear-gradient(red, red), 
+		radial-Gradient(red #{$rp}, transparent 0), 
+		#{dots($n)};
+	mask-composite: intersect, exclude, vrepeat(add, $n), exclude, add, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite
+}
+
+#load-68 {
+	$ba: 360deg/$n;
+	$rd: .5*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$rp: .5*$d - $rd;
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-gradient(red, red), 
+		#{bars($n, 2px, .5)}, 
+		linear-gradient(red, red), 
+		radial-Gradient(red #{$rp}, transparent 0), 
+		#{dots($n)};
+	mask-composite: exclude, vrepeat(add, $n), exclude, add, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 85%, 65%));
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n)});
+		content: ''
+	}
+}
+
+#load-69 {
+	$ba: 360deg/$n;
+	$rd: .5*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$rp: .5*$d - $rd;
+	background: conic-Gradient(rainbow($n, 85%, 65%));
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $m)}), 
+		linear-gradient(red, red), 
+		#{bars($n, 2px, .5)}, 
+		linear-gradient(red, red), 
+		radial-Gradient(red #{$rp}, transparent 0), 
+		#{dots($n)};
+	mask-composite: intersect, exclude, vrepeat(add, $n), exclude, add, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite
+}
+
+#load-70 {
+	$ba: 360deg/$n;
+	$rd: .5*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$rp: .5*$d - $rd;
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-gradient(red, red), 
+		#{bars($n, 2px, .5)}, 
+		linear-gradient(red, red), 
+		radial-Gradient(red #{$rp}, transparent 0), 
+		#{dots($n)};
+	mask-composite: exclude, vrepeat(add, $n), exclude, add, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		a $t steps($n) infinite;
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 85%, 65%));
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n, $m)});
+		content: ''
+	}
+}
+
+#load-71 {
+	$ba: 360deg/$n;
+	$rd: .5*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$rp: .5*$d - $rd;
+	background: conic-Gradient(rainbow($n, 85%, 65%));
+	--mask: 
+		conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+				#{base-steps($n, $a-ani: 1)}), 
+		linear-gradient(red, red), 
+		#{bars($n, 2px, .5)}, 
+		linear-gradient(red, red), 
+		radial-Gradient(red #{$rp}, transparent 0), 
+		#{dots($n)};
+	mask-composite: intersect, exclude, vrepeat(add, $n), exclude, add, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani()
+}
+
+#load-72 {
+	$ba: 360deg/$n;
+	$rd: .5*$d*tan(.5*$ba)/(1 + tan(.5*$ba));
+	$rp: .5*$d - $rd;
+	background: rgba(#fff, .2);
+	--mask: 
+		linear-gradient(red, red), 
+		#{bars($n, 2px, .5)}, 
+		linear-gradient(red, red), 
+		radial-Gradient(red #{$rp}, transparent 0), 
+		#{dots($n)};
+	mask-composite: exclude, vrepeat(add, $n), exclude, add, vrepeat(add, $n);
+	animation: 
+		hue $n*$t linear infinite, 
+		alpha-ani();
+	
+	&::before {
+		background: conic-Gradient(rainbow($n, 85%, 65%));
+		--mask: 
+			conic-Gradient(from calc(var(--a, 0deg) - #{.5*360deg/$n}), 
+					#{base-steps($n, $a-ani: 1)});
+		content: ''
+	}
+}
+
+@keyframes hue { to { --hue: 360deg } }
+
+@keyframes a { to { --a: 360deg } }
+
+@for $i from 0 to $n {
+	@keyframes alpha#{$i} { 50% { --alpha#{$i}: 1 } }
+}
\ No newline at end of file
diff --git a/bind-css-keyframe-animation-to-scroll/LICENSE.txt b/bind-css-keyframe-animation-to-scroll/LICENSE.txt
new file mode 100644
index 0000000..da637d1
--- /dev/null
+++ b/bind-css-keyframe-animation-to-scroll/LICENSE.txt
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Chris Coyier  (https://codepen.io/chriscoyier/pen/NWxpJVx)
+Fork of an original work Bind CSS keyframe animation to scroll (https://codepen.io/chriscoyier/pen/NWxpJVx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/bind-css-keyframe-animation-to-scroll/README.md b/bind-css-keyframe-animation-to-scroll/README.md
new file mode 100644
index 0000000..cecffc9
--- /dev/null
+++ b/bind-css-keyframe-animation-to-scroll/README.md
@@ -0,0 +1,4 @@
+# Bind CSS keyframe animation to scroll
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/chriscoyier/pen/NWxpJVx](https://codepen.io/chriscoyier/pen/NWxpJVx).
+
diff --git a/bind-css-keyframe-animation-to-scroll/dist/index.html b/bind-css-keyframe-animation-to-scroll/dist/index.html
new file mode 100644
index 0000000..f02c991
--- /dev/null
+++ b/bind-css-keyframe-animation-to-scroll/dist/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Bind CSS keyframe animation to scroll</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="progress"></div>
+
+<div class="cube-wrap">
+  <div class="cube">
+    <div class="side top"></div>
+    <div class="side bottom"></div>
+    <div class="side front"></div>
+    <div class="side back"></div>
+    <div class="side left"></div>
+    <div class="side right"></div>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/bind-css-keyframe-animation-to-scroll/dist/script.js b/bind-css-keyframe-animation-to-scroll/dist/script.js
new file mode 100644
index 0000000..c498ba5
--- /dev/null
+++ b/bind-css-keyframe-animation-to-scroll/dist/script.js
@@ -0,0 +1,3 @@
+window.addEventListener('scroll', () => {
+  document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
+}, false);
\ No newline at end of file
diff --git a/bind-css-keyframe-animation-to-scroll/dist/style.css b/bind-css-keyframe-animation-to-scroll/dist/style.css
new file mode 100644
index 0000000..d8c3568
--- /dev/null
+++ b/bind-css-keyframe-animation-to-scroll/dist/style.css
@@ -0,0 +1,92 @@
+body {
+  padding: 0;
+  margin: 0;
+  min-height: 500vh;
+  background-color: rgb(139, 201, 228);
+  animation: body 1s linear;
+}
+@keyframes body {
+  to {
+    background-color: rgb(19, 48, 97);
+  }
+}
+
+.progress {
+  height: 3px;
+  width: 0%;
+  background-color: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  animation: progress 1s linear;
+}
+@keyframes progress {
+  to {
+    background-color: rgb(20, 255, 226);
+    width: 100%;
+  }
+}
+
+.cube-wrap {
+  --size: 30vmin;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  perspective: 100vmin;
+}
+.cube {
+  transform-style: preserve-3d;
+  transform: rotateX(0deg) rotateZ(45deg) rotateY(-45deg);
+  animation: cube 1s linear;
+}
+@keyframes cube {
+  to {
+    transform: rotateX(360deg) rotateZ(45deg) rotateY(-45deg);
+  }
+}
+
+.side {
+  position: absolute;
+  width: var(--size);
+  height: var(--size);
+  background-color: #eee;
+  backface-visibility: visible;
+  top: calc(var(--size) * -.5);
+  left: calc(var(--size) * -.5);
+}
+.top {
+  background-color: #fff;
+  transform: rotateX(90deg) translateZ(calc(var(--size) * .5));
+}
+.bottom {
+  background-color: #999;
+  transform: rotateX(90deg) translateZ(calc(var(--size) * -.5));
+}
+.left {
+  background-color: #ccc;
+  transform: rotateY(90deg) translateZ(calc(var(--size) * .5));
+}
+.right {
+  background-color: #ddd;
+  transform: rotateY(90deg) translateZ(calc(var(--size) * -.5));
+}
+.front {
+  background-color: #aaa;
+  transform: translateZ(calc(var(--size) * .5));
+}
+.back {
+  background-color: #bbb;
+  transform: translateZ(calc(var(--size) * -.5));
+}
+
+:root * {
+  /* Pause the animation */
+  animation-play-state: paused;
+  /* Bind the animation to scroll */
+  animation-delay: calc(var(--scroll) * -1s);
+  /* These last 2 properites clean up overshoot weirdness */
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+}
\ No newline at end of file
diff --git a/bind-css-keyframe-animation-to-scroll/src/index.html b/bind-css-keyframe-animation-to-scroll/src/index.html
new file mode 100644
index 0000000..8a261a0
--- /dev/null
+++ b/bind-css-keyframe-animation-to-scroll/src/index.html
@@ -0,0 +1,12 @@
+<div class="progress"></div>
+
+<div class="cube-wrap">
+  <div class="cube">
+    <div class="side top"></div>
+    <div class="side bottom"></div>
+    <div class="side front"></div>
+    <div class="side back"></div>
+    <div class="side left"></div>
+    <div class="side right"></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/bind-css-keyframe-animation-to-scroll/src/script.js b/bind-css-keyframe-animation-to-scroll/src/script.js
new file mode 100644
index 0000000..c498ba5
--- /dev/null
+++ b/bind-css-keyframe-animation-to-scroll/src/script.js
@@ -0,0 +1,3 @@
+window.addEventListener('scroll', () => {
+  document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
+}, false);
\ No newline at end of file
diff --git a/bind-css-keyframe-animation-to-scroll/src/style.css b/bind-css-keyframe-animation-to-scroll/src/style.css
new file mode 100644
index 0000000..d8c3568
--- /dev/null
+++ b/bind-css-keyframe-animation-to-scroll/src/style.css
@@ -0,0 +1,92 @@
+body {
+  padding: 0;
+  margin: 0;
+  min-height: 500vh;
+  background-color: rgb(139, 201, 228);
+  animation: body 1s linear;
+}
+@keyframes body {
+  to {
+    background-color: rgb(19, 48, 97);
+  }
+}
+
+.progress {
+  height: 3px;
+  width: 0%;
+  background-color: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  animation: progress 1s linear;
+}
+@keyframes progress {
+  to {
+    background-color: rgb(20, 255, 226);
+    width: 100%;
+  }
+}
+
+.cube-wrap {
+  --size: 30vmin;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  perspective: 100vmin;
+}
+.cube {
+  transform-style: preserve-3d;
+  transform: rotateX(0deg) rotateZ(45deg) rotateY(-45deg);
+  animation: cube 1s linear;
+}
+@keyframes cube {
+  to {
+    transform: rotateX(360deg) rotateZ(45deg) rotateY(-45deg);
+  }
+}
+
+.side {
+  position: absolute;
+  width: var(--size);
+  height: var(--size);
+  background-color: #eee;
+  backface-visibility: visible;
+  top: calc(var(--size) * -.5);
+  left: calc(var(--size) * -.5);
+}
+.top {
+  background-color: #fff;
+  transform: rotateX(90deg) translateZ(calc(var(--size) * .5));
+}
+.bottom {
+  background-color: #999;
+  transform: rotateX(90deg) translateZ(calc(var(--size) * -.5));
+}
+.left {
+  background-color: #ccc;
+  transform: rotateY(90deg) translateZ(calc(var(--size) * .5));
+}
+.right {
+  background-color: #ddd;
+  transform: rotateY(90deg) translateZ(calc(var(--size) * -.5));
+}
+.front {
+  background-color: #aaa;
+  transform: translateZ(calc(var(--size) * .5));
+}
+.back {
+  background-color: #bbb;
+  transform: translateZ(calc(var(--size) * -.5));
+}
+
+:root * {
+  /* Pause the animation */
+  animation-play-state: paused;
+  /* Bind the animation to scroll */
+  animation-delay: calc(var(--scroll) * -1s);
+  /* These last 2 properites clean up overshoot weirdness */
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+}
\ No newline at end of file
diff --git a/blob-study/README.markdown b/blob-study/README.markdown
new file mode 100644
index 0000000..c74ebb4
--- /dev/null
+++ b/blob-study/README.markdown
@@ -0,0 +1,5 @@
+# Blob study
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shubniggurath/pen/dyOKjLG](https://codepen.io/shubniggurath/pen/dyOKjLG).
+
+A 3D blob distance field study.
diff --git a/blob-study/dist/apxlmx.js b/blob-study/dist/apxlmx.js
new file mode 100644
index 0000000..2b29a76
--- /dev/null
+++ b/blob-study/dist/apxlmx.js
@@ -0,0 +1,726 @@
+/**
+ * A basic Web GL class. This provides a very basic setup for GLSL shader code.
+ * Currently it doesn't support anything except for clip-space 3d, but this was
+ * done so that we could start writing fragments right out of the gate. My
+ * Intention is to update it with particle and polygonal 3d support later on.
+ *
+ * @class WTCGL
+ * @author Liam Egan <liam@wethecollective.com>
+ * @version 0.0.8
+ * @created Jan 16, 2019
+ */
+class WTCGL {  
+
+	/**
+	 * The WTCGL Class constructor. If construction of the webGL context fails 
+   * for any reason this will return null.
+   * 
+   * @TODO make the dimension properties properly optional
+   * @TODO provide the ability to allow for programmable buffers
+	 *
+	 * @constructor
+	 * @param {HTMLElement} el The canvas element to use as the root
+	 * @param {string} vertexShaderSource The vertex shader source
+	 * @param {string} fragmentShaderSource The fragment shader source
+   * @param {number} [width] The width of the webGL context. This will default to the canvas dimensions
+   * @param {number} [height] The height of the webGL context. This will default to the canvas dimensions
+   * @param {number} [pxratio=1] The pixel aspect ratio of the canvas
+   * @param {boolean} [styleElement] A boolean indicating whether to apply a style property to the canvas (resizing the canvas by the inverse of the pixel ratio)
+   * @param {boolean} [webgl2] A boolean indicating whether to try to create a webgl2 context instead of a regulart context
+	 */
+  constructor(el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, styleElement, webgl2) {
+    this.run = this.run.bind(this);
+    
+    this._onRun = ()=>{};
+    
+    // Destructure if an object is aprovided instead a series of parameters
+    if(el instanceof Object && el.el) {
+      ({el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, webgl2, styleElement} = el);
+    }
+
+    // If the HTML element isn't a canvas, return null
+    if(!el instanceof HTMLElement || el.nodeName.toLowerCase() !== 'canvas') {
+      console.log('Provided element should be a canvas element');
+      return null;
+    }
+    
+    this._el = el;
+    // The context should be either webgl2, webgl or experimental-webgl
+    if(webgl2 === true) {
+      this.isWebgl2 = true;
+      this._ctx = this._el.getContext("webgl2", this.webgl_params) || this._el.getContext("webgl", this.webgl_params) || this._el.getContext("experimental-webgl", this.webgl_params);
+    } else {
+      this.isWebgl2 = false;
+      this._ctx = this._el.getContext("webgl", this.webgl_params) || this._el.getContext("experimental-webgl", this.webgl_params);
+    }
+    
+    // Set up the extensions
+    this._ctx.getExtension('OES_standard_derivatives');
+    this._ctx.getExtension('EXT_shader_texture_lod');
+    this._ctx.getExtension('OES_texture_float');
+    this._ctx.getExtension('WEBGL_color_buffer_float');
+    this._ctx.getExtension('OES_texture_float_linear');
+    this._ctx.getExtension('EXT_color_buffer_float');
+    
+    // We can't make the context so return an error
+    if (!this._ctx) {
+      console.log('Browser doesn\'t support WebGL ');
+      return null;
+    }
+        
+    // Create the shaders
+    this._vertexShader = WTCGL.createShaderOfType(this._ctx, this._ctx.VERTEX_SHADER, vertexShaderSource);
+    this._fragmentShader = WTCGL.createShaderOfType(this._ctx, this._ctx.FRAGMENT_SHADER, fragmentShaderSource);
+    
+    // Create the program and link the shaders
+    this._program = this._ctx.createProgram();
+    this._ctx.attachShader(this._program, this._vertexShader);
+    this._ctx.attachShader(this._program, this._fragmentShader);
+    this._ctx.linkProgram(this._program);
+    
+    // If we can't set up the params, this means the shaders have failed for some reason
+    if (!this._ctx.getProgramParameter(this._program, this._ctx.LINK_STATUS)) {
+      console.log('Unable to initialize the shader program: ' + this._ctx.getProgramInfoLog(this._program));
+      return null;
+    }
+
+    // Initialise the vertex buffers
+    this.initBuffers([
+      -1.0,  1.0, -1.,
+       1.0,  1.0, -1.,
+      -1.0, -1.0, -1.,
+       1.0, -1.0, -1.,
+    ]);
+    
+    // Initialise the frame buffers
+    this.frameBuffers = [];
+    
+    // The program information object. This is essentially a state machine for the webGL instance
+    this._programInfo = {
+      attribs: {
+        vertexPosition: this._ctx.getAttribLocation(this._program, 'a_position'),
+      },
+      uniforms: {
+        projectionMatrix: this._ctx.getUniformLocation(this._program, 'u_projectionMatrix'),
+        modelViewMatrix: this._ctx.getUniformLocation(this._program, 'u_modelViewMatrix'),
+        resolution: this._ctx.getUniformLocation(this._program, 'u_resolution'),
+        time: this._ctx.getUniformLocation(this._program, 'u_time'),
+      },
+    };
+    
+    // Tell WebGL to use our program when drawing
+    this._ctx.useProgram(this._program);
+    
+    this.pxratio = pxratio;
+
+    this.styleElement = styleElement !== true;
+    
+    this.resize(width, height);
+  }
+
+
+  /**
+   * Public methods
+   */
+  
+  addFrameBuffer(w, h, tiling = 0, buffertype = 0) {
+    // create to render to
+    const gl = this._ctx;
+    const targetTextureWidth = w * this.pxratio;
+    const targetTextureHeight = h * this.pxratio;
+    const targetTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, targetTexture);
+    {
+      // define size and format of level 0
+      const level = 0;
+      let internalFormat = gl.RGBA;
+      const border = 0;
+      let format = gl.RGBA;
+      let t;
+      if(buffertype & WTCGL.TEXTYPE_FLOAT) {
+        const e = gl.getExtension('OES_texture_float');
+        window.extension = e;
+        t = e.FLOAT;
+        // internalFormat = gl.RGBA32F;
+      } else if(buffertype & WTCGL.TEXTYPE_HALF_FLOAT_OES) {
+        // t = gl.renderer.isWebgl2 ? e.HALF_FLOAT : e.HALF_FLOAT_OES;
+        //     gl.renderer.extensions['OES_texture_half_float'] ? gl.renderer.extensions['OES_texture_half_float'].HALF_FLOAT_OES : 
+        //     gl.UNSIGNED_BYTE;
+        const e = gl.getExtension('OES_texture_half_float');
+        t = this.isWebgl2 ? gl.HALF_FLOAT : e.HALF_FLOAT_OES;
+        // format = gl.RGBA;
+        if(this.isWebgl2) {
+          internalFormat = gl.RGBA16F;
+        }
+        // internalFormat = gl.RGB32F;
+        // format = gl.RGB32F;
+        // window.gl = gl
+        // t = e.HALF_FLOAT_OES;
+      } else {
+        t = gl.UNSIGNED_BYTE;
+      }
+      const type = t;
+      const data = null;
+      gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                    targetTextureWidth, targetTextureHeight, border,
+                    format, type, data);
+      // gl.generateMipmap(gl.TEXTURE_2D);
+
+      // set the filtering so we don't need mips
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      
+      // Set the parameters based on the passed type
+      if(tiling === WTCGL.IMAGETYPE_TILE) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+      } else if(tiling === WTCGL.IMAGETYPE_MIRROR) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
+      } else if(tiling === WTCGL.IMAGETYPE_REGULAR) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      }
+    }
+    
+    // Create and bind the framebuffer
+    const fb = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+
+    // attach the texture as the first color attachment
+    const attachmentPoint = gl.COLOR_ATTACHMENT0;
+    const level = 0;
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);
+
+    return {
+      w: w * this.pxratio,
+      h: h * this.pxratio,
+      fb: fb,
+      frameTexture: targetTexture
+    };
+  }
+  
+
+	/**
+	 * Resizes the canvas to a specified width and height, respecting the pixel ratio
+	 *
+	 * @param  {number} w The width of the canvas
+	 * @param  {number} h The height of the canvas
+	 * @return {Void}
+	 */
+  resize(w, h) {
+    this.width = w;
+    this.height = h;
+    this._el.width = w * this.pxratio;
+    this._el.height = h * this.pxratio;
+    this._size = [w * this.pxratio, h * this.pxratio];
+    if(this.styleElement) {
+      this._el.style.width = w + 'px';
+      this._el.style.height = h + 'px';
+    }
+    
+    this._ctx.viewportWidth = w * this.pxratio;
+    this._ctx.viewportHeight = h * this.pxratio;
+    
+    this._ctx.uniform2fv( this._programInfo.uniforms.resolution, this._size);
+    
+    this.initBuffers(this._positions);
+  }
+  
+	/**
+	 * Initialise a provided vertex buffer
+	 *
+	 * @param  {array} positions The vertex positions to initialise
+	 * @return {Void}
+	 */
+  initBuffers(positions) {
+    this._positions = positions;
+    this._positionBuffer = this._ctx.createBuffer();
+    
+    this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
+    
+    this._ctx.bufferData(this._ctx.ARRAY_BUFFER,
+                  new Float32Array(positions),
+                  this._ctx.STATIC_DRAW);
+  }
+  
+	/**
+	 * Add a uniform to the program. At this time the following types are supported:
+   * - Float - WTCGL.TYPE_FLOAT
+   * - Vector 2 - WTCGL.TYPE_V2
+   * - Vector 3 - WTCGL.TYPE_V3
+   * - Vector 4 - WTCGL.TYPE_V4
+	 *
+	 * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
+	 * @param  {WTCGL.UNIFORM_TYPE} type The unfiform type 
+	 * @param  {number|array} value The unfiform value. The type depends on the uniform type being created 
+	 * @return {WebGLUniformLocation} The uniform location for later reference
+	 */
+  addUniform(name, type, value) {
+    let uniform = this._programInfo.uniforms[name];
+    uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+    switch(type) {
+      case WTCGL.TYPE_INT : 
+        if(!isNaN(value)) this._ctx.uniform1i( uniform, value);
+        break;
+      case WTCGL.TYPE_FLOAT : 
+        if(!isNaN(value)) this._ctx.uniform1f( uniform, value);
+        break;
+      case WTCGL.TYPE_V2 : 
+        if(value instanceof Array && value.length === 2.) this._ctx.uniform2fv( uniform, value);
+        break;
+      case WTCGL.TYPE_V3 : 
+        if(value instanceof Array && value.length === 3.) this._ctx.uniform3fv( uniform, value);
+        break;
+      case WTCGL.TYPE_V4 : 
+        if(value instanceof Array && value.length === 4.) this._ctx.uniform4fv( uniform, value);
+        break;
+      case WTCGL.TYPE_BOOL : 
+        if(!isNaN(value)) this._ctx.uniform1i( uniform, value);
+        break;
+    }
+    this._programInfo.uniforms[name] = uniform;
+    return uniform;
+  }
+
+  /**
+   * Adds a texture to the program and links it to a named uniform. Providing the type changes the tiling properties of the texture. Possible values for type:
+   * - WTCGL.IMAGETYPE_REGULAR - No tiling, clamp to edges and doesn't need to be power of 2.
+   * - WTCGL.IMAGETYPE_TILE - full x and y tiling, needs to be power of 2.
+   * - WTCGL.IMAGETYPE_MIRROR - mirror tiling, needs to be power of 2.
+   *
+   * @public
+	 * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
+   * @param  {WTCGL.TYPE_IMAGETYPE} type The type of texture to create. This is basically the tiling behaviour of the texture as described above
+	 * @param  {Image} image The image object to add to the texture
+   * @return {WebGLTexture} The texture object
+   */
+  addTexture(name, type, image, liveUpdate = false) {
+    
+    var texture = this._ctx.createTexture();
+    this._ctx.pixelStorei(this._ctx.UNPACK_FLIP_Y_WEBGL, true);
+    this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
+    
+    // this._ctx.generateMipmap(this._ctx.TEXTURE_2D);
+ 
+    // Set the parameters based on the passed type
+    if(type === WTCGL.IMAGETYPE_MIRROR) {
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.MIRRORED_REPEAT);
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.MIRRORED_REPEAT);
+    } else if(type === WTCGL.IMAGETYPE_REGULAR) {
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.CLAMP_TO_EDGE);
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.CLAMP_TO_EDGE);
+    }
+    
+    this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MIN_FILTER, this._ctx.LINEAR);
+    // this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MAG_FILTER, this._ctx.LINEAR);
+ 
+    // Upload the image into the texture.
+    this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
+ 
+    // add the texture to the array of textures.
+    this.pushTexture(name, texture, image, this._ctx.TEXTURE_2D, liveUpdate);
+    
+    
+    return texture;
+  }
+  
+  pushTexture(name, texture, image, target, liveUpdate = false) {
+    let textures = this.textures;
+    
+    textures.push({ name: name, tex: texture, liveUpdate: liveUpdate, image: image, target: target });
+    
+    // Finally set the this.textures (this is just to get around the funnyness of default getters)
+    this.textures = textures;
+  }
+
+	/**
+	 * Updates a texture location for a given WebGLTexture with an image
+	 *
+	 * @param  {WebGLTexture} texture The texture location to update
+	 * @param  {Image} image The image object to add to the texture
+	 * @return {Void}
+	 */
+  updateTexture(texture, image, name) {
+    
+    let uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+    // Set the texture unit to the uniform
+    this._ctx.uniform1i(uniform, 0);
+    this._ctx.activeTexture(this._ctx.TEXTURE0);
+    
+    this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
+    // Upload the image into the texture.
+    this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
+  }
+
+	/**
+	 * Initialise texture locations in the program
+	 *
+	 * @return {Void}
+	 */
+  initTextures() {
+    for(let i = 0; i < this.textures.length; i++) {
+      let name = this.textures[i].name;
+      let uniform = this._programInfo.uniforms[name];
+      uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+
+      // Set the texture unit to the uniform
+      this._ctx.uniform1i(uniform, i);
+
+      // find the active texture based on the index
+      this._ctx.activeTexture(this._ctx[`TEXTURE${i}`]);
+
+      // Finally, bind the texture
+      this._ctx.bindTexture(this.textures[i].target, this.textures[i].tex);
+    }
+  }
+  
+	/**
+	 * The run loop. This function is run as a part of a RaF and updates the internal
+   * time uniform (`u_time`).
+	 *
+   * @param  {number} delta The delta time provided by the RaF loop
+	 * @return {Void}
+	 */
+  run(delta) {
+    this.running && requestAnimationFrame(this.run);
+    
+    const runFunction = () => {
+      this.time = this.startTime + delta * .0002;
+      this.onRun(delta);
+      this.render();
+    }
+    
+    if(this.frameRate) {
+      let now = Date.now();
+      let elapsed = now - this._then;
+
+      if (elapsed > this.frameRate) {
+        this._then = now - (elapsed % this.frameRate);
+
+        runFunction();
+      }
+    } else {
+      runFunction();
+    }
+  }
+  
+	/**
+	 * Render the program
+	 *
+	 * @return {Void}
+	 */
+  render(buffer = {}) {
+    this._ctx.bindFramebuffer(this._ctx.FRAMEBUFFER, buffer.fb || null);
+    // Update the time uniform
+    this._ctx.uniform1f( this._programInfo.uniforms.time, this.time);
+    
+    this.textures.forEach((textureInfo) => {
+      if(textureInfo.liveUpdate === true) {
+        this.updateTexture(textureInfo.tex, textureInfo.image, textureInfo.name);
+      }
+    });
+
+    this._ctx.viewport(0, 0, buffer.w || this._ctx.viewportWidth, buffer.h || this._ctx.viewportHeight);
+    if(this.clearing) {
+      this._ctx.clearColor(1.0, 0.0, 0.0, 0.0);
+      // this._ctx.clearDepth(1.0);
+      // this._ctx.enable(this._ctx.DEPTH_TEST);
+      // this._ctx.depthFunc(this._ctx.LEQUAL);
+      
+      this._ctx.blendFunc(this._ctx.SRC_ALPHA, this._ctx.ONE_MINUS_SRC_ALPHA);
+
+      this._ctx.clear( this._ctx.COLOR_BUFFER_BIT );
+    }
+
+    this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
+    this._ctx.vertexAttribPointer(
+        this._programInfo.attribs.vertexPosition,
+        3,
+        this._ctx.FLOAT,
+        false,
+        0,
+        0);
+    this._ctx.enableVertexAttribArray(this._programInfo.attribs.vertexPosition);
+
+    // Set the shader uniforms
+    this.includePerspectiveMatrix && this._ctx.uniformMatrix4fv( this._programInfo.uniforms.projectionMatrix, false, this.perspectiveMatrix);
+    this.includeModelViewMatrix && this._ctx.uniformMatrix4fv( this._programInfo.uniforms.modelViewMatrix, false, this.modelViewMatrix);
+
+    this._ctx.drawArrays(this._ctx.TRIANGLE_STRIP, 0, 4);
+  }
+
+
+  /**
+   * Getters and setters
+   */
+
+  /**
+   * The default webGL parameters to be used for the program.
+   * This is read only and should only be overridden as a part of a subclass.
+   *
+   * @readonly
+   * @type {object}
+   * @default { alpha: true }
+   */
+  get webgl_params() {
+    return { alpha: true };
+  }
+  
+  /**
+   * (getter/setter) Whether the element should include styling as a part of
+   * its rendition.
+   *
+   * @type {boolean}
+   * @default true
+   */
+  set styleElement(value) {
+    this._styleElement = value === true;
+    if(this._styleElement === false && this._el) {
+      this._el.style.width = '';
+      this._el.style.height = '';
+    }
+  }
+  get styleElement() {
+    return this._styleElement !== false;
+  }
+
+  /**
+   * (getter/setter) startTime. This is a value to begin the `u_time` 
+   * unform at. This is here in case you want `u_time` to begin at a 
+   * specific value other than 0.
+   *
+   * @type {number}
+   * @default 0
+   */
+  set startTime(value) {
+    if(!isNaN(value)) {
+      this._startTime = value;
+    }
+  }
+  get startTime() {
+    return this._startTime || 0;
+  }
+  
+  /**
+   * (getter/setter) time. This is the time that the program currently
+   * sits at. By default this value is set as a part of the run loop
+   * however this is a public property so that we can specify time
+   * for rendition outside of the run loop.
+   *
+   * @type {number}
+   * @default 0
+   */
+  set time(value) {
+    if(!isNaN(value)) {
+      this._time = value;
+    }
+  }
+  get time() {
+    return this._time || 0;
+  }
+  
+  /**
+   * (getter/setter) includePerspectiveMatrix. This determines whether the 
+   * perspecive matrix is included in the program. This doesn't really make
+   * a difference right now, but this is here to provide future interoperability.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set includePerspectiveMatrix(value) {
+    this._includePerspectiveMatrix = value === true;
+  }
+  get includePerspectiveMatrix() {
+    return this._includePerspectiveMatrix === true;
+  }
+  
+  /**
+   * (getter/setter) includeModelViewMatrix. This determines whether the 
+   * model view matrix is included in the program. This doesn't really make
+   * a difference right now, but this is here to provide future interoperability.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set includeModelViewMatrix(value) {
+    this._includeModelViewMatrix = value === true;
+  }
+  get includeModelViewMatrix() {
+    return this._includeModelViewMatrix === true;
+  }
+
+  /**
+   * (getter/setter) textures. The array of textures to initialise into the program.
+   *
+   * @private
+   * @type {array}
+   * @default []
+   */
+  set textures(value) {
+    if(value instanceof Array) {
+      this._textures = value;
+    }
+  }
+  get textures() {
+    return this._textures || [];
+  }
+  
+  /**
+   * (getter/setter) clearing. Specifies whether the program should clear the screen 
+   * before drawing anew.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set clearing(value) {
+    this._clearing = value === true;
+  }
+  get clearing() {
+    return this._clearing === true;
+  }
+  
+  /**
+   * (getter/setter) running. Specifies whether the programming is running. Setting 
+   * this to true will create a RaF loop which will call the run function.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set running(value) {
+    if(!this.running && value === true) {
+      
+      this._then = Date.now();
+      
+      requestAnimationFrame(this.run);
+    } 
+    this._running = value === true;
+  }
+  get running() {
+    return this._running === true;
+  }
+  
+  set frameRate(value) {
+    if(!isNaN(value)) this._frameRate = 1000 / value;
+  }
+  get frameRate() {
+    return this._frameRate || null;
+  }
+  
+  /**
+   * (getter/setter) pxratio. The 1-dimensional pixel ratio of the application.
+   * This should be used either for making a program look good on high density
+   * screens or for raming down pixel density for performance.
+   *
+   * @type {number}
+   * @default 1
+   */
+  set pxratio(value) {
+    if(value > 0) this._pxratio = value;
+  }
+  get pxratio() {
+    return this._pxratio || 1;
+  }
+  
+  /**
+   * (getter/setter) perspectiveMatrix. Calculate a perspective matrix, a 
+   * special matrix that is used to simulate the distortion of perspective in 
+   * a camera. Our field of view is 45 degrees, with a width/height ratio 
+   * that matches the display size of the canvas and we only want to see 
+   * objects between 0.1 units and 100 units away from the camera.
+   *
+   * @readonly
+   * @type {mat4}
+   */
+  get perspectiveMatrix() {
+    const fieldOfView = 45 * Math.PI / 180;   // in radians
+    const aspect = this._size.w / this._size.h;
+    const zNear = 0.1;
+    const zFar = 100.0;
+    const projectionMatrix = mat4.create();
+    // note: glmatrix.js always has the first argument
+    // as the destination to receive the result.
+    mat4.perspective(projectionMatrix,
+                     fieldOfView,
+                     aspect,
+                     zNear,
+                     zFar);
+    
+    return projectionMatrix;
+  }
+  
+  /**
+   * (getter/setter) perspectiveMatrix. Calculate a model view matrix.
+   *
+   * @readonly
+   * @type {mat4}
+   */
+  get modelViewMatrix() {
+    // Set the drawing position to the "identity" point, which is
+    // the center of the scene.
+    const modelViewMatrix = mat4.create();
+    
+    // Now move the drawing position a bit to where we want to
+    // start drawing the square.
+    mat4.translate(modelViewMatrix,     // destination matrix
+                   modelViewMatrix,     // matrix to translate
+                   [-0.0, 0.0, -1.]);  // amount to translate
+    
+    return modelViewMatrix;
+  }
+  
+  set onRun(runMethod) {
+    if(typeof runMethod == 'function') {
+      this._onRun = runMethod.bind(this);
+    }
+  }
+  get onRun() {
+    return this._onRun;
+  }
+  
+  get context() {
+    return this._ctx || null;
+  }
+  
+  /**
+   * Static Methods
+   */
+
+	/**
+	 * Create a shader of a given type given a context, type and source.
+	 *
+   * @static
+	 * @param  {WebGLContext} ctx The context under which to create the shader
+	 * @param  {WebGLShaderType} type The shader type, vertex or fragment
+	 * @param  {string} source The shader source.
+	 * @return {WebGLShader} The created shader
+	 */
+  static createShaderOfType(ctx, type, source) {
+    const shader = ctx.createShader(type);
+    ctx.shaderSource(shader, source);
+    ctx.compileShader(shader);
+    
+    if (!ctx.getShaderParameter(shader, ctx.COMPILE_STATUS)) {
+      console.log('An error occurred compiling the shaders: ' + ctx.getShaderInfoLog(shader));
+      ctx.deleteShader(shader);
+      return null;
+    }
+    
+    return shader;
+  }
+}
+
+WTCGL.TYPE_INT = 0;
+WTCGL.TYPE_FLOAT = 1;
+WTCGL.TYPE_V2 = 2;
+WTCGL.TYPE_V3 = 3;
+WTCGL.TYPE_V4 = 4;
+WTCGL.TYPE_BOOL = 5;
+
+WTCGL.IMAGETYPE_REGULAR = 0;
+WTCGL.IMAGETYPE_TILE = 1;
+WTCGL.IMAGETYPE_MIRROR = 2;
+
+WTCGL.TEXTYPE_FLOAT = 0;
+WTCGL.TEXTYPE_UNSIGNED_BYTE = 1;
+WTCGL.TEXTYPE_HALF_FLOAT_OES = 2;
\ No newline at end of file
diff --git a/blob-study/dist/index.html b/blob-study/dist/index.html
new file mode 100644
index 0000000..43a3890
--- /dev/null
+++ b/blob-study/dist/index.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Blob study</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="webgl" width="500" height="1758"></canvas>
+
+<script id="vertexShader" type="x-shader/x-vertex">
+  attribute vec4 a_position;
+  
+  uniform mat4 u_modelViewMatrix;
+  uniform mat4 u_projectionMatrix;
+  
+  void main() {
+    gl_Position = a_position;
+  }
+</script>
+<script id="fragmentShader" type="x-shader/x-fragment">
+ precision highp float;
+  precision highp int;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D u_noise;
+  
+  // movement variables
+  vec3 movement = vec3(.0);
+  
+  uniform int u_maxIterations;
+  uniform float u_stopThreshold;
+  uniform float u_stepScale;
+  uniform float u_eps;
+  uniform int u_octaves;
+  uniform vec3 u_clipBGColour;
+  uniform vec3 u_blobColour;
+  uniform vec3 u_light_position;
+  uniform vec3 u_lightColour;
+  uniform float u_lightStrength;
+  uniform float u_sceneWeight;
+  uniform float u_internalStep;
+  
+  const int maxIterations = 1024;
+  
+  const vec3 light1_position = vec3(0, 1., -1.);
+  const vec3 light1_colour = vec3(.5, .8, 1.85);
+  
+  const int octaves = 3;
+  const int max_octaves = 16;
+  
+  struct Surface {
+    int object_id;
+    float distance;
+    vec3 position;
+    vec3 colour;
+    float ambient;
+    float spec;
+  };
+  
+  float bumps(in vec3 p, float phase, float size, vec3 frequency) {
+    return size * sin(p.x * frequency.x + phase) * cos(p.y * frequency.y + phase) * cos(p.z * frequency.z + phase);
+  }
+  
+  float fractalBumps(in vec3 p, float phase, float size, vec3 frequency, float multiplier) {
+    // const float octaves = 2.;
+    float _bumps = 0.;
+    for(int i = 1; i < max_octaves; i++) {
+      if(i > u_octaves) break;
+      float f = float(i);
+      _bumps += bumps(p, phase + f * 10., size * multiplier * 1./f, frequency * f);
+    }
+    
+    return _bumps;
+  }
+  
+  // This function describes the world in distances from any given 3 dimensional point in space
+  float world(in vec3 position, inout int object_id) {
+    vec3 pos = floor(position * .5);
+    object_id = int(floor(pos.x + pos.y + pos.z));
+    // position = mod(position, 1.) - .5;
+    float gradient = max(0., (position.y + .3));
+    float bumps = fractalBumps(position, u_time * 2., .5 * gradient, vec3(10. + sin(u_time) * 5.), 2.8);
+    
+    float world = length(position) - .4 + bumps * .15;
+    
+    // world = max(world, -position.y);
+    
+    return world;
+  }
+  float world(in vec3 position) {
+    int dummy = 0;
+    return world(position, dummy);
+  }
+  
+  vec3 getNormal(vec3 p, float eps) {
+    vec3 n;
+    n.y = world(p);    
+    n.x = world(vec3(p.x+eps,p.y,p.z)) - n.y;
+    n.z = world(vec3(p.x,p.y,p.z+eps)) - n.y;
+    n.y = eps;
+    return normalize(n);
+  }
+  
+  Surface getSurface(int object_id, float rayDepth, vec3 sp) {
+    return Surface(
+      object_id, 
+      rayDepth, 
+      sp, 
+      vec3(1.), 
+      .5, 
+      200.);
+  }
+  
+  // The raymarch loop
+  Surface rayMarch(vec3 ro, vec3 rd, float start, float end, inout vec3 col) {
+    float sceneDist = 1e4;
+    float rayDepth = start;
+    int object_id = 0;
+    
+    // Light position
+    vec3 lp = ro + vec3(2, 2, -5.);
+    
+    bool hit = false;
+    
+    float energy = u_lightStrength*2.;
+    bool inside = false;
+    
+    for(int i = 0; i < maxIterations; i++) {
+      if(i > u_maxIterations) break;
+      if(energy <= 0.) break;
+      vec3 r = ro + rd * rayDepth;
+      sceneDist = world(r, object_id);
+      
+      // if(inside == true && sceneDist > 0.) {
+      //   rayDepth -= sceneDist;
+      //   rayDepth += .01;
+      //   sceneDist = world(r, object_id);
+      // }
+      
+      vec3 normal = normalize(r);
+      vec3 ld = lp - r;
+      float len = length( ld );
+      ld = normalize(ld);
+      float lightAtten = min( 1.0 / ( 0.15*len ), 1.0 );
+      float diffuse = max(0., dot(normal, ld))+.2;
+      
+      float weighting = length(r);
+      
+      energy -= .1;
+     
+      col += clamp((1./abs(sceneDist)*u_sceneWeight)*weighting*(diffuse*.0005*u_blobColour)*(u_lightColour*energy*lightAtten), 0.0, 1.);
+      
+      if(sceneDist < u_stopThreshold) {
+        // if(inside == false) {
+          // vec3 n = getNormal(r, .01);
+          // rd = normalize(refract(rd, n, 1.01));
+        // }
+        inside = true;
+        // vec3 r = ro + (rd+u_internalStep) * rayDepth;
+        // sceneDist = world(r, object_id);
+        // if(sceneDist>0.) {
+        //   rayDepth += u_internalStep*.1;
+        // } else {
+          rayDepth += u_internalStep;
+        // }
+      } else {
+        inside = false;
+        rayDepth += sceneDist * u_stepScale;
+      }
+      
+      if(rayDepth > end) {
+        break;
+      }
+    }
+    
+    col = sqrt(col);
+    
+    return getSurface(object_id, rayDepth, ro + rd * rayDepth);
+  }
+
+  void main() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    // Camera and look-at
+    vec3 cam = vec3(cos(u_mouse.x * 5.)*3.,u_mouse.y * 3.,sin(u_mouse.x * 5.)*3.);
+    vec3 lookAt = vec3(0,0,0);
+    
+    // Unit vectors
+    vec3 forward = normalize(lookAt - cam);
+    vec3 right = normalize(vec3(forward.z, 0., -forward.x));
+    vec3 up = normalize(cross(forward, right));
+    
+    // FOV
+    float FOV = .4;
+    
+    // Ray origin and ray direction
+    vec3 ro = cam;
+    vec3 rd = normalize(forward + FOV * uv.x * right + FOV * uv.y * up);
+    
+    // Ray marching
+    const float clipNear = 0.;
+    const float clipFar = 32.;
+    vec3 col = u_clipBGColour;
+    Surface objectSurface = rayMarch(ro, rd, clipNear, clipFar, col);
+    
+    gl_FragColor = vec4(col, 1.);
+  }
+  
+</script>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/blob-study/dist/script.js b/blob-study/dist/script.js
new file mode 100644
index 0000000..9cc346e
--- /dev/null
+++ b/blob-study/dist/script.js
@@ -0,0 +1,916 @@
+/**
+ * A basic Web GL class. This provides a very basic setup for GLSL shader code.
+ * Currently it doesn't support anything except for clip-space 3d, but this was
+ * done so that we could start writing fragments right out of the gate. My
+ * Intention is to update it with particle and polygonal 3d support later on.
+ *
+ * @class WTCGL
+ * @author Liam Egan <liam@wethecollective.com>
+ * @version 0.0.8
+ * @created Jan 16, 2019
+ */
+class WTCGL {
+
+  /**
+   * The WTCGL Class constructor. If construction of the webGL context fails 
+    * for any reason this will return null.
+    * 
+    * @TODO make the dimension properties properly optional
+    * @TODO provide the ability to allow for programmable buffers
+   *
+   * @constructor
+   * @param {HTMLElement} el The canvas element to use as the root
+   * @param {string} vertexShaderSource The vertex shader source
+   * @param {string} fragmentShaderSource The fragment shader source
+    * @param {number} [width] The width of the webGL context. This will default to the canvas dimensions
+    * @param {number} [height] The height of the webGL context. This will default to the canvas dimensions
+    * @param {number} [pxratio=1] The pixel aspect ratio of the canvas
+    * @param {boolean} [styleElement] A boolean indicating whether to apply a style property to the canvas (resizing the canvas by the inverse of the pixel ratio)
+    * @param {boolean} [webgl2] A boolean indicating whether to try to create a webgl2 context instead of a regulart context
+   */
+  constructor(el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, styleElement, webgl2) {
+    this.run = this.run.bind(this);
+
+    this._onRun = () => {};
+
+    // Destructure if an object is aprovided instead a series of parameters
+    if (el instanceof Object && el.el) {
+      ({ el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, webgl2, styleElement } = el);
+    }
+
+    // If the HTML element isn't a canvas, return null
+    if (!el instanceof HTMLElement || el.nodeName.toLowerCase() !== 'canvas') {
+      console.log('Provided element should be a canvas element');
+      return null;
+    }
+
+    this._el = el;
+    // The context should be either webgl2, webgl or experimental-webgl
+    if (webgl2 === true) {
+      this.isWebgl2 = true;
+      this._ctx = this._el.getContext("webgl2", this.webgl_params) || this._el.getContext("webgl", this.webgl_params) || this._el.getContext("experimental-webgl", this.webgl_params);
+    } else {
+      this.isWebgl2 = false;
+      this._ctx = this._el.getContext("webgl", this.webgl_params) || this._el.getContext("experimental-webgl", this.webgl_params);
+    }
+
+    // Set up the extensions
+    this._ctx.getExtension('OES_standard_derivatives');
+    this._ctx.getExtension('EXT_shader_texture_lod');
+    this._ctx.getExtension('OES_texture_float');
+    this._ctx.getExtension('WEBGL_color_buffer_float');
+    this._ctx.getExtension('OES_texture_float_linear');
+    this._ctx.getExtension('EXT_color_buffer_float');
+
+    // We can't make the context so return an error
+    if (!this._ctx) {
+      console.log('Browser doesn\'t support WebGL ');
+      return null;
+    }
+
+    // Create the shaders
+    this._vertexShader = WTCGL.createShaderOfType(this._ctx, this._ctx.VERTEX_SHADER, vertexShaderSource);
+    this._fragmentShader = WTCGL.createShaderOfType(this._ctx, this._ctx.FRAGMENT_SHADER, fragmentShaderSource);
+
+    // Create the program and link the shaders
+    this._program = this._ctx.createProgram();
+    this._ctx.attachShader(this._program, this._vertexShader);
+    this._ctx.attachShader(this._program, this._fragmentShader);
+    this._ctx.linkProgram(this._program);
+
+    // If we can't set up the params, this means the shaders have failed for some reason
+    if (!this._ctx.getProgramParameter(this._program, this._ctx.LINK_STATUS)) {
+      console.log('Unable to initialize the shader program: ' + this._ctx.getProgramInfoLog(this._program));
+      return null;
+    }
+
+    // Initialise the vertex buffers
+    this.initBuffers([
+    -1.0, 1.0, -1.,
+    1.0, 1.0, -1.,
+    -1.0, -1.0, -1.,
+    1.0, -1.0, -1.]);
+
+
+    // Initialise the frame buffers
+    this.frameBuffers = [];
+
+    // The program information object. This is essentially a state machine for the webGL instance
+    this._programInfo = {
+      attribs: {
+        vertexPosition: this._ctx.getAttribLocation(this._program, 'a_position') },
+
+      uniforms: {
+        projectionMatrix: this._ctx.getUniformLocation(this._program, 'u_projectionMatrix'),
+        modelViewMatrix: this._ctx.getUniformLocation(this._program, 'u_modelViewMatrix'),
+        resolution: this._ctx.getUniformLocation(this._program, 'u_resolution'),
+        time: this._ctx.getUniformLocation(this._program, 'u_time') } };
+
+
+
+    // Tell WebGL to use our program when drawing
+    this._ctx.useProgram(this._program);
+
+    this.pxratio = pxratio;
+
+    this.styleElement = styleElement !== true;
+
+    this.resize(width, height);
+  }
+
+
+  /**
+   * Public methods
+   */
+
+  addFrameBuffer(w, h, tiling = 0, buffertype = 0) {
+    // create to render to
+    const gl = this._ctx;
+    const targetTextureWidth = w * this.pxratio;
+    const targetTextureHeight = h * this.pxratio;
+    const targetTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, targetTexture);
+    {
+      // define size and format of level 0
+      const level = 0;
+      let internalFormat = gl.RGBA;
+      const border = 0;
+      let format = gl.RGBA;
+      let t;
+      if (buffertype & WTCGL.TEXTYPE_FLOAT) {
+        const e = gl.getExtension('OES_texture_float');
+        window.extension = e;
+        t = e.FLOAT;
+        // internalFormat = gl.RGBA32F;
+      } else if (buffertype & WTCGL.TEXTYPE_HALF_FLOAT_OES) {
+        // t = gl.renderer.isWebgl2 ? e.HALF_FLOAT : e.HALF_FLOAT_OES;
+        //     gl.renderer.extensions['OES_texture_half_float'] ? gl.renderer.extensions['OES_texture_half_float'].HALF_FLOAT_OES : 
+        //     gl.UNSIGNED_BYTE;
+        const e = gl.getExtension('OES_texture_half_float');
+        t = this.isWebgl2 ? gl.HALF_FLOAT : e.HALF_FLOAT_OES;
+        // format = gl.RGBA;
+        if (this.isWebgl2) {
+          internalFormat = gl.RGBA16F;
+        }
+        // internalFormat = gl.RGB32F;
+        // format = gl.RGB32F;
+        // window.gl = gl
+        // t = e.HALF_FLOAT_OES;
+      } else {
+        t = gl.UNSIGNED_BYTE;
+      }
+      const type = t;
+      const data = null;
+      gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+      targetTextureWidth, targetTextureHeight, border,
+      format, type, data);
+      // gl.generateMipmap(gl.TEXTURE_2D);
+
+      // set the filtering so we don't need mips
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+
+      // Set the parameters based on the passed type
+      if (tiling === WTCGL.IMAGETYPE_TILE) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+      } else if (tiling === WTCGL.IMAGETYPE_MIRROR) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
+      } else if (tiling === WTCGL.IMAGETYPE_REGULAR) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      }
+    }
+
+    // Create and bind the framebuffer
+    const fb = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+
+    // attach the texture as the first color attachment
+    const attachmentPoint = gl.COLOR_ATTACHMENT0;
+    const level = 0;
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);
+
+    return {
+      w: w * this.pxratio,
+      h: h * this.pxratio,
+      fb: fb,
+      frameTexture: targetTexture };
+
+  }
+
+
+  /**
+   * Resizes the canvas to a specified width and height, respecting the pixel ratio
+   *
+   * @param  {number} w The width of the canvas
+   * @param  {number} h The height of the canvas
+   * @return {Void}
+   */
+  resize(w, h) {
+    this.width = w;
+    this.height = h;
+    this._el.width = w * this.pxratio;
+    this._el.height = h * this.pxratio;
+    this._size = [w * this.pxratio, h * this.pxratio];
+    if (this.styleElement) {
+      this._el.style.width = w + 'px';
+      this._el.style.height = h + 'px';
+    }
+
+    this._ctx.viewportWidth = w * this.pxratio;
+    this._ctx.viewportHeight = h * this.pxratio;
+
+    this._ctx.uniform2fv(this._programInfo.uniforms.resolution, this._size);
+
+    this.initBuffers(this._positions);
+  }
+
+  /**
+   * Initialise a provided vertex buffer
+   *
+   * @param  {array} positions The vertex positions to initialise
+   * @return {Void}
+   */
+  initBuffers(positions) {
+    this._positions = positions;
+    this._positionBuffer = this._ctx.createBuffer();
+
+    this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
+
+    this._ctx.bufferData(this._ctx.ARRAY_BUFFER,
+    new Float32Array(positions),
+    this._ctx.STATIC_DRAW);
+  }
+
+  /**
+   * Add a uniform to the program. At this time the following types are supported:
+    * - Float - WTCGL.TYPE_FLOAT
+    * - Vector 2 - WTCGL.TYPE_V2
+    * - Vector 3 - WTCGL.TYPE_V3
+    * - Vector 4 - WTCGL.TYPE_V4
+   *
+   * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
+   * @param  {WTCGL.UNIFORM_TYPE} type The unfiform type 
+   * @param  {number|array} value The unfiform value. The type depends on the uniform type being created 
+   * @return {WebGLUniformLocation} The uniform location for later reference
+   */
+  addUniform(name, type, value) {
+    let uniform = this._programInfo.uniforms[name];
+    uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+    switch (type) {
+      case WTCGL.TYPE_INT:
+        if (!isNaN(value)) this._ctx.uniform1i(uniform, value);
+        break;
+      case WTCGL.TYPE_FLOAT:
+        if (!isNaN(value)) this._ctx.uniform1f(uniform, value);
+        break;
+      case WTCGL.TYPE_V2:
+        if (value instanceof Array && value.length === 2.) this._ctx.uniform2fv(uniform, value);
+        break;
+      case WTCGL.TYPE_V3:
+        if (value instanceof Array && value.length === 3.) this._ctx.uniform3fv(uniform, value);
+        break;
+      case WTCGL.TYPE_V4:
+        if (value instanceof Array && value.length === 4.) this._ctx.uniform4fv(uniform, value);
+        break;
+      case WTCGL.TYPE_BOOL:
+        if (!isNaN(value)) this._ctx.uniform1i(uniform, value);
+        break;}
+
+    this._programInfo.uniforms[name] = uniform;
+    return uniform;
+  }
+
+  /**
+   * Adds a texture to the program and links it to a named uniform. Providing the type changes the tiling properties of the texture. Possible values for type:
+   * - WTCGL.IMAGETYPE_REGULAR - No tiling, clamp to edges and doesn't need to be power of 2.
+   * - WTCGL.IMAGETYPE_TILE - full x and y tiling, needs to be power of 2.
+   * - WTCGL.IMAGETYPE_MIRROR - mirror tiling, needs to be power of 2.
+   *
+   * @public
+  * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
+   * @param  {WTCGL.TYPE_IMAGETYPE} type The type of texture to create. This is basically the tiling behaviour of the texture as described above
+  * @param  {Image} image The image object to add to the texture
+   * @return {WebGLTexture} The texture object
+   */
+  addTexture(name, type, image, liveUpdate = false) {
+
+    var texture = this._ctx.createTexture();
+    this._ctx.pixelStorei(this._ctx.UNPACK_FLIP_Y_WEBGL, true);
+    this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
+
+    // this._ctx.generateMipmap(this._ctx.TEXTURE_2D);
+
+    // Set the parameters based on the passed type
+    if (type === WTCGL.IMAGETYPE_MIRROR) {
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.MIRRORED_REPEAT);
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.MIRRORED_REPEAT);
+    } else if (type === WTCGL.IMAGETYPE_REGULAR) {
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.CLAMP_TO_EDGE);
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.CLAMP_TO_EDGE);
+    }
+
+    this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MIN_FILTER, this._ctx.LINEAR);
+    // this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MAG_FILTER, this._ctx.LINEAR);
+
+    // Upload the image into the texture.
+    this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
+
+    // add the texture to the array of textures.
+    this.pushTexture(name, texture, image, this._ctx.TEXTURE_2D, liveUpdate);
+
+
+    return texture;
+  }
+
+  pushTexture(name, texture, image, target, liveUpdate = false) {
+    let textures = this.textures;
+
+    textures.push({ name: name, tex: texture, liveUpdate: liveUpdate, image: image, target: target });
+
+    // Finally set the this.textures (this is just to get around the funnyness of default getters)
+    this.textures = textures;
+  }
+
+  /**
+   * Updates a texture location for a given WebGLTexture with an image
+   *
+   * @param  {WebGLTexture} texture The texture location to update
+   * @param  {Image} image The image object to add to the texture
+   * @return {Void}
+   */
+  updateTexture(texture, image, name) {
+
+    let uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+    // Set the texture unit to the uniform
+    this._ctx.uniform1i(uniform, 0);
+    this._ctx.activeTexture(this._ctx.TEXTURE0);
+
+    this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
+    // Upload the image into the texture.
+    this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
+  }
+
+  /**
+   * Initialise texture locations in the program
+   *
+   * @return {Void}
+   */
+  initTextures() {
+    for (let i = 0; i < this.textures.length; i++) {
+      let name = this.textures[i].name;
+      let uniform = this._programInfo.uniforms[name];
+      uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+
+      // Set the texture unit to the uniform
+      this._ctx.uniform1i(uniform, i);
+
+      // find the active texture based on the index
+      this._ctx.activeTexture(this._ctx[`TEXTURE${i}`]);
+
+      // Finally, bind the texture
+      this._ctx.bindTexture(this.textures[i].target, this.textures[i].tex);
+    }
+  }
+
+  /**
+   * The run loop. This function is run as a part of a RaF and updates the internal
+    * time uniform (`u_time`).
+   *
+    * @param  {number} delta The delta time provided by the RaF loop
+   * @return {Void}
+   */
+  run(delta) {
+    this.running && requestAnimationFrame(this.run);
+
+    const runFunction = () => {
+      this.time = this.startTime + delta * .0002;
+      this.onRun(delta);
+      this.render();
+    };
+
+    if (this.frameRate) {
+      let now = Date.now();
+      let elapsed = now - this._then;
+
+      if (elapsed > this.frameRate) {
+        this._then = now - elapsed % this.frameRate;
+
+        runFunction();
+      }
+    } else {
+      runFunction();
+    }
+  }
+
+  /**
+   * Render the program
+   *
+   * @return {Void}
+   */
+  render(buffer = {}) {
+    this._ctx.bindFramebuffer(this._ctx.FRAMEBUFFER, buffer.fb || null);
+    // Update the time uniform
+    this._ctx.uniform1f(this._programInfo.uniforms.time, this.time);
+
+    this.textures.forEach(textureInfo => {
+      if (textureInfo.liveUpdate === true) {
+        this.updateTexture(textureInfo.tex, textureInfo.image, textureInfo.name);
+      }
+    });
+
+    this._ctx.viewport(0, 0, buffer.w || this._ctx.viewportWidth, buffer.h || this._ctx.viewportHeight);
+    if (this.clearing) {
+      this._ctx.clearColor(1.0, 0.0, 0.0, 0.0);
+      // this._ctx.clearDepth(1.0);
+      // this._ctx.enable(this._ctx.DEPTH_TEST);
+      // this._ctx.depthFunc(this._ctx.LEQUAL);
+
+      this._ctx.blendFunc(this._ctx.SRC_ALPHA, this._ctx.ONE_MINUS_SRC_ALPHA);
+
+      this._ctx.clear(this._ctx.COLOR_BUFFER_BIT);
+    }
+
+    this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
+    this._ctx.vertexAttribPointer(
+    this._programInfo.attribs.vertexPosition,
+    3,
+    this._ctx.FLOAT,
+    false,
+    0,
+    0);
+    this._ctx.enableVertexAttribArray(this._programInfo.attribs.vertexPosition);
+
+    // Set the shader uniforms
+    this.includePerspectiveMatrix && this._ctx.uniformMatrix4fv(this._programInfo.uniforms.projectionMatrix, false, this.perspectiveMatrix);
+    this.includeModelViewMatrix && this._ctx.uniformMatrix4fv(this._programInfo.uniforms.modelViewMatrix, false, this.modelViewMatrix);
+
+    this._ctx.drawArrays(this._ctx.TRIANGLE_STRIP, 0, 4);
+  }
+
+
+  /**
+   * Getters and setters
+   */
+
+  /**
+   * The default webGL parameters to be used for the program.
+   * This is read only and should only be overridden as a part of a subclass.
+   *
+   * @readonly
+   * @type {object}
+   * @default { alpha: true }
+   */
+  get webgl_params() {
+    return { alpha: true };
+  }
+
+  /**
+   * (getter/setter) Whether the element should include styling as a part of
+   * its rendition.
+   *
+   * @type {boolean}
+   * @default true
+   */
+  set styleElement(value) {
+    this._styleElement = value === true;
+    if (this._styleElement === false && this._el) {
+      this._el.style.width = '';
+      this._el.style.height = '';
+    }
+  }
+  get styleElement() {
+    return this._styleElement !== false;
+  }
+
+  /**
+   * (getter/setter) startTime. This is a value to begin the `u_time` 
+   * unform at. This is here in case you want `u_time` to begin at a 
+   * specific value other than 0.
+   *
+   * @type {number}
+   * @default 0
+   */
+  set startTime(value) {
+    if (!isNaN(value)) {
+      this._startTime = value;
+    }
+  }
+  get startTime() {
+    return this._startTime || 0;
+  }
+
+  /**
+   * (getter/setter) time. This is the time that the program currently
+   * sits at. By default this value is set as a part of the run loop
+   * however this is a public property so that we can specify time
+   * for rendition outside of the run loop.
+   *
+   * @type {number}
+   * @default 0
+   */
+  set time(value) {
+    if (!isNaN(value)) {
+      this._time = value;
+    }
+  }
+  get time() {
+    return this._time || 0;
+  }
+
+  /**
+   * (getter/setter) includePerspectiveMatrix. This determines whether the 
+   * perspecive matrix is included in the program. This doesn't really make
+   * a difference right now, but this is here to provide future interoperability.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set includePerspectiveMatrix(value) {
+    this._includePerspectiveMatrix = value === true;
+  }
+  get includePerspectiveMatrix() {
+    return this._includePerspectiveMatrix === true;
+  }
+
+  /**
+   * (getter/setter) includeModelViewMatrix. This determines whether the 
+   * model view matrix is included in the program. This doesn't really make
+   * a difference right now, but this is here to provide future interoperability.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set includeModelViewMatrix(value) {
+    this._includeModelViewMatrix = value === true;
+  }
+  get includeModelViewMatrix() {
+    return this._includeModelViewMatrix === true;
+  }
+
+  /**
+   * (getter/setter) textures. The array of textures to initialise into the program.
+   *
+   * @private
+   * @type {array}
+   * @default []
+   */
+  set textures(value) {
+    if (value instanceof Array) {
+      this._textures = value;
+    }
+  }
+  get textures() {
+    return this._textures || [];
+  }
+
+  /**
+   * (getter/setter) clearing. Specifies whether the program should clear the screen 
+   * before drawing anew.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set clearing(value) {
+    this._clearing = value === true;
+  }
+  get clearing() {
+    return this._clearing === true;
+  }
+
+  /**
+   * (getter/setter) running. Specifies whether the programming is running. Setting 
+   * this to true will create a RaF loop which will call the run function.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set running(value) {
+    if (!this.running && value === true) {
+
+      this._then = Date.now();
+
+      requestAnimationFrame(this.run);
+    }
+    this._running = value === true;
+  }
+  get running() {
+    return this._running === true;
+  }
+
+  set frameRate(value) {
+    if (!isNaN(value)) this._frameRate = 1000 / value;
+  }
+  get frameRate() {
+    return this._frameRate || null;
+  }
+
+  /**
+   * (getter/setter) pxratio. The 1-dimensional pixel ratio of the application.
+   * This should be used either for making a program look good on high density
+   * screens or for raming down pixel density for performance.
+   *
+   * @type {number}
+   * @default 1
+   */
+  set pxratio(value) {
+    if (value > 0) this._pxratio = value;
+  }
+  get pxratio() {
+    return this._pxratio || 1;
+  }
+
+  /**
+   * (getter/setter) perspectiveMatrix. Calculate a perspective matrix, a 
+   * special matrix that is used to simulate the distortion of perspective in 
+   * a camera. Our field of view is 45 degrees, with a width/height ratio 
+   * that matches the display size of the canvas and we only want to see 
+   * objects between 0.1 units and 100 units away from the camera.
+   *
+   * @readonly
+   * @type {mat4}
+   */
+  get perspectiveMatrix() {
+    const fieldOfView = 45 * Math.PI / 180; // in radians
+    const aspect = this._size.w / this._size.h;
+    const zNear = 0.1;
+    const zFar = 100.0;
+    const projectionMatrix = mat4.create();
+    // note: glmatrix.js always has the first argument
+    // as the destination to receive the result.
+    mat4.perspective(projectionMatrix,
+    fieldOfView,
+    aspect,
+    zNear,
+    zFar);
+
+    return projectionMatrix;
+  }
+
+  /**
+   * (getter/setter) perspectiveMatrix. Calculate a model view matrix.
+   *
+   * @readonly
+   * @type {mat4}
+   */
+  get modelViewMatrix() {
+    // Set the drawing position to the "identity" point, which is
+    // the center of the scene.
+    const modelViewMatrix = mat4.create();
+
+    // Now move the drawing position a bit to where we want to
+    // start drawing the square.
+    mat4.translate(modelViewMatrix, // destination matrix
+    modelViewMatrix, // matrix to translate
+    [-0.0, 0.0, -1.]); // amount to translate
+
+    return modelViewMatrix;
+  }
+
+  set onRun(runMethod) {
+    if (typeof runMethod == 'function') {
+      this._onRun = runMethod.bind(this);
+    }
+  }
+  get onRun() {
+    return this._onRun;
+  }
+
+  get context() {
+    return this._ctx || null;
+  }
+
+  /**
+   * Static Methods
+   */
+
+  /**
+   * Create a shader of a given type given a context, type and source.
+   *
+    * @static
+   * @param  {WebGLContext} ctx The context under which to create the shader
+   * @param  {WebGLShaderType} type The shader type, vertex or fragment
+   * @param  {string} source The shader source.
+   * @return {WebGLShader} The created shader
+   */
+  static createShaderOfType(ctx, type, source) {
+    const shader = ctx.createShader(type);
+    ctx.shaderSource(shader, source);
+    ctx.compileShader(shader);
+
+    if (!ctx.getShaderParameter(shader, ctx.COMPILE_STATUS)) {
+      console.log('An error occurred compiling the shaders: ' + ctx.getShaderInfoLog(shader));
+      ctx.deleteShader(shader);
+      return null;
+    }
+
+    return shader;
+  }}
+
+
+WTCGL.TYPE_INT = 0;
+WTCGL.TYPE_FLOAT = 1;
+WTCGL.TYPE_V2 = 2;
+WTCGL.TYPE_V3 = 3;
+WTCGL.TYPE_V4 = 4;
+WTCGL.TYPE_BOOL = 5;
+
+WTCGL.IMAGETYPE_REGULAR = 0;
+WTCGL.IMAGETYPE_TILE = 1;
+WTCGL.IMAGETYPE_MIRROR = 2;
+
+WTCGL.TEXTYPE_FLOAT = 0;
+WTCGL.TEXTYPE_UNSIGNED_BYTE = 1;
+WTCGL.TEXTYPE_HALF_FLOAT_OES = 2;
+import * as dat from 'https://cdn.skypack.dev/dat.gui';
+console.clear();
+
+const twodWebGL = new WTCGL(
+document.querySelector('canvas#webgl'),
+document.querySelector('script#vertexShader').textContent,
+document.querySelector('script#fragmentShader').textContent,
+window.innerWidth,
+window.innerHeight,
+window.devicePixelRatio);
+
+
+window.addEventListener('resize', () => {
+  twodWebGL.resize(window.innerWidth, window.innerHeight);
+});
+
+
+
+// track mouse move
+let mousepos = [0, 0];
+const u_mousepos = twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
+window.addEventListener('pointermove', e => {
+  let ratio = window.innerHeight / window.innerWidth;
+  if (window.innerHeight > window.innerWidth) {
+    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth;
+    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1 * ratio;
+  } else {
+    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
+    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
+  }
+  twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
+});
+
+const uniforms = {
+  octaves: {
+    v: 3,
+    max: 12,
+    min: 0,
+    type: WTCGL.TYPE_INT },
+  sceneWeight: {
+    v: 1,
+    max: 10,
+    min: .01,
+    type: WTCGL.TYPE_FLOAT },
+  maxIterations: {
+    v: 256,
+    max: 512,
+    min: 2,
+    type: WTCGL.TYPE_INT },
+  internalStep: {
+    v: .003,
+    max: 1,
+    min: 0.0001,
+    type: WTCGL.TYPE_FLOAT },
+  stopThreshold: {
+    v: .01,
+    max: .1,
+    min: .0001,
+    type: WTCGL.TYPE_FLOAT },
+  stepScale: {
+    v: .8,
+    max: 2.,
+    min: .1,
+    type: WTCGL.TYPE_FLOAT },
+  clipBGColour: {
+    v: '#000000',
+    type: 'COLOUR' },
+  blobColour: {
+    v: '#FFFFFF',
+    type: 'COLOUR' },
+  lightColour: {
+    v: '#3F66FF',
+    type: 'COLOUR' },
+  lightStrength: {
+    v: 2,
+    min: .1,
+    max: 5,
+    type: WTCGL.TYPE_FLOAT } };
+
+
+
+const hexToGL = hex => {
+  const components = /^#?([A-F0-9]{2})([A-F0-9]{2})([A-F0-9]{2})/i.exec(hex);
+  if (components && components.length === 4) {
+    const r = Math.round(`0x${components[1]}` / 255 * 1000) / 1000;
+    const g = Math.round(`0x${components[2]}` / 255 * 1000) / 1000;
+    const b = Math.round(`0x${components[3]}` / 255 * 1000) / 1000;
+    return [r, g, b];
+  } else {
+    return [];
+  }
+};
+const updateUniform = (e, n) => {
+  const prop = uniforms[e];
+  if (prop.type === 'COLOUR') {
+    const c = hexToGL(n);
+    twodWebGL.addUniform(e, WTCGL.TYPE_V3, c);
+  } else {
+    twodWebGL.addUniform(e, prop.type, n);
+  }
+};
+
+// const updateUniform(name, value) => {
+
+// }
+
+const gui = new dat.GUI();
+Object.entries(uniforms).forEach((u, v) => {
+  console.log(u);
+  const prop = uniforms[u[0]];
+  if (prop.type === 'COLOUR') {
+    const c = hexToGL(prop.v);
+    console.log(c);
+    twodWebGL.addUniform(u[0], WTCGL.TYPE_V3, c);
+  } else {
+    twodWebGL.addUniform(u[0], prop.type, prop.v);
+  }
+  if (prop.type === 'COLOUR') {
+    gui.addColor(prop, 'v').name(u[0]).onChange(v => {updateUniform(u[0], v);});
+  } else {
+    gui.add(prop, 'v', prop.min, prop.max).name(u[0]).onChange(v => {updateUniform(u[0], v);});
+  }
+});
+
+
+
+
+
+
+
+
+
+// Load all our textures. We only initiate the instance once all images are loaded.
+const textures = [
+{
+  name: 'noise',
+  url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',
+  type: WTCGL.IMAGETYPE_TILE,
+  img: null }];
+
+
+const loadImage = function (imageObject) {
+  let img = document.createElement('img');
+  img.crossOrigin = "anonymous";
+
+  return new Promise((resolve, reject) => {
+    img.addEventListener('load', e => {
+      imageObject.img = img;
+      resolve(imageObject);
+    });
+    img.addEventListener('error', e => {
+      reject(e);
+    });
+    img.src = imageObject.url;
+  });
+};
+const loadTextures = function (textures) {
+  return new Promise((resolve, reject) => {
+    const loadTexture = pointer => {
+      if (pointer >= textures.length || pointer > 10) {
+        resolve(textures);
+        return;
+      };
+      const imageObject = textures[pointer];
+
+      const p = loadImage(imageObject);
+      p.then(
+      result => {
+        twodWebGL.addTexture(result.name, result.type, result.img);
+      },
+      error => {
+        console.log('error', error);
+      }).finally(e => {
+        loadTexture(pointer + 1);
+      });
+    };
+    loadTexture(0);
+  });
+
+};
+
+loadTextures(textures).then(
+result => {
+  twodWebGL.initTextures();
+  // twodWebGL.render();
+  twodWebGL.running = true;
+},
+error => {
+  console.log('error');
+});
\ No newline at end of file
diff --git a/blob-study/dist/style.css b/blob-study/dist/style.css
new file mode 100644
index 0000000..c013696
--- /dev/null
+++ b/blob-study/dist/style.css
@@ -0,0 +1,7 @@
+body {
+  margin:0;
+}
+
+canvas {
+  position: fixed;
+}
\ No newline at end of file
diff --git a/blob-study/license.txt b/blob-study/license.txt
new file mode 100644
index 0000000..fb5c1bf
--- /dev/null
+++ b/blob-study/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Liam Egan (https://codepen.io/shubniggurath/pen/dyOKjLG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/blob-study/src/apxlmx.js b/blob-study/src/apxlmx.js
new file mode 100644
index 0000000..2b29a76
--- /dev/null
+++ b/blob-study/src/apxlmx.js
@@ -0,0 +1,726 @@
+/**
+ * A basic Web GL class. This provides a very basic setup for GLSL shader code.
+ * Currently it doesn't support anything except for clip-space 3d, but this was
+ * done so that we could start writing fragments right out of the gate. My
+ * Intention is to update it with particle and polygonal 3d support later on.
+ *
+ * @class WTCGL
+ * @author Liam Egan <liam@wethecollective.com>
+ * @version 0.0.8
+ * @created Jan 16, 2019
+ */
+class WTCGL {  
+
+	/**
+	 * The WTCGL Class constructor. If construction of the webGL context fails 
+   * for any reason this will return null.
+   * 
+   * @TODO make the dimension properties properly optional
+   * @TODO provide the ability to allow for programmable buffers
+	 *
+	 * @constructor
+	 * @param {HTMLElement} el The canvas element to use as the root
+	 * @param {string} vertexShaderSource The vertex shader source
+	 * @param {string} fragmentShaderSource The fragment shader source
+   * @param {number} [width] The width of the webGL context. This will default to the canvas dimensions
+   * @param {number} [height] The height of the webGL context. This will default to the canvas dimensions
+   * @param {number} [pxratio=1] The pixel aspect ratio of the canvas
+   * @param {boolean} [styleElement] A boolean indicating whether to apply a style property to the canvas (resizing the canvas by the inverse of the pixel ratio)
+   * @param {boolean} [webgl2] A boolean indicating whether to try to create a webgl2 context instead of a regulart context
+	 */
+  constructor(el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, styleElement, webgl2) {
+    this.run = this.run.bind(this);
+    
+    this._onRun = ()=>{};
+    
+    // Destructure if an object is aprovided instead a series of parameters
+    if(el instanceof Object && el.el) {
+      ({el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, webgl2, styleElement} = el);
+    }
+
+    // If the HTML element isn't a canvas, return null
+    if(!el instanceof HTMLElement || el.nodeName.toLowerCase() !== 'canvas') {
+      console.log('Provided element should be a canvas element');
+      return null;
+    }
+    
+    this._el = el;
+    // The context should be either webgl2, webgl or experimental-webgl
+    if(webgl2 === true) {
+      this.isWebgl2 = true;
+      this._ctx = this._el.getContext("webgl2", this.webgl_params) || this._el.getContext("webgl", this.webgl_params) || this._el.getContext("experimental-webgl", this.webgl_params);
+    } else {
+      this.isWebgl2 = false;
+      this._ctx = this._el.getContext("webgl", this.webgl_params) || this._el.getContext("experimental-webgl", this.webgl_params);
+    }
+    
+    // Set up the extensions
+    this._ctx.getExtension('OES_standard_derivatives');
+    this._ctx.getExtension('EXT_shader_texture_lod');
+    this._ctx.getExtension('OES_texture_float');
+    this._ctx.getExtension('WEBGL_color_buffer_float');
+    this._ctx.getExtension('OES_texture_float_linear');
+    this._ctx.getExtension('EXT_color_buffer_float');
+    
+    // We can't make the context so return an error
+    if (!this._ctx) {
+      console.log('Browser doesn\'t support WebGL ');
+      return null;
+    }
+        
+    // Create the shaders
+    this._vertexShader = WTCGL.createShaderOfType(this._ctx, this._ctx.VERTEX_SHADER, vertexShaderSource);
+    this._fragmentShader = WTCGL.createShaderOfType(this._ctx, this._ctx.FRAGMENT_SHADER, fragmentShaderSource);
+    
+    // Create the program and link the shaders
+    this._program = this._ctx.createProgram();
+    this._ctx.attachShader(this._program, this._vertexShader);
+    this._ctx.attachShader(this._program, this._fragmentShader);
+    this._ctx.linkProgram(this._program);
+    
+    // If we can't set up the params, this means the shaders have failed for some reason
+    if (!this._ctx.getProgramParameter(this._program, this._ctx.LINK_STATUS)) {
+      console.log('Unable to initialize the shader program: ' + this._ctx.getProgramInfoLog(this._program));
+      return null;
+    }
+
+    // Initialise the vertex buffers
+    this.initBuffers([
+      -1.0,  1.0, -1.,
+       1.0,  1.0, -1.,
+      -1.0, -1.0, -1.,
+       1.0, -1.0, -1.,
+    ]);
+    
+    // Initialise the frame buffers
+    this.frameBuffers = [];
+    
+    // The program information object. This is essentially a state machine for the webGL instance
+    this._programInfo = {
+      attribs: {
+        vertexPosition: this._ctx.getAttribLocation(this._program, 'a_position'),
+      },
+      uniforms: {
+        projectionMatrix: this._ctx.getUniformLocation(this._program, 'u_projectionMatrix'),
+        modelViewMatrix: this._ctx.getUniformLocation(this._program, 'u_modelViewMatrix'),
+        resolution: this._ctx.getUniformLocation(this._program, 'u_resolution'),
+        time: this._ctx.getUniformLocation(this._program, 'u_time'),
+      },
+    };
+    
+    // Tell WebGL to use our program when drawing
+    this._ctx.useProgram(this._program);
+    
+    this.pxratio = pxratio;
+
+    this.styleElement = styleElement !== true;
+    
+    this.resize(width, height);
+  }
+
+
+  /**
+   * Public methods
+   */
+  
+  addFrameBuffer(w, h, tiling = 0, buffertype = 0) {
+    // create to render to
+    const gl = this._ctx;
+    const targetTextureWidth = w * this.pxratio;
+    const targetTextureHeight = h * this.pxratio;
+    const targetTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, targetTexture);
+    {
+      // define size and format of level 0
+      const level = 0;
+      let internalFormat = gl.RGBA;
+      const border = 0;
+      let format = gl.RGBA;
+      let t;
+      if(buffertype & WTCGL.TEXTYPE_FLOAT) {
+        const e = gl.getExtension('OES_texture_float');
+        window.extension = e;
+        t = e.FLOAT;
+        // internalFormat = gl.RGBA32F;
+      } else if(buffertype & WTCGL.TEXTYPE_HALF_FLOAT_OES) {
+        // t = gl.renderer.isWebgl2 ? e.HALF_FLOAT : e.HALF_FLOAT_OES;
+        //     gl.renderer.extensions['OES_texture_half_float'] ? gl.renderer.extensions['OES_texture_half_float'].HALF_FLOAT_OES : 
+        //     gl.UNSIGNED_BYTE;
+        const e = gl.getExtension('OES_texture_half_float');
+        t = this.isWebgl2 ? gl.HALF_FLOAT : e.HALF_FLOAT_OES;
+        // format = gl.RGBA;
+        if(this.isWebgl2) {
+          internalFormat = gl.RGBA16F;
+        }
+        // internalFormat = gl.RGB32F;
+        // format = gl.RGB32F;
+        // window.gl = gl
+        // t = e.HALF_FLOAT_OES;
+      } else {
+        t = gl.UNSIGNED_BYTE;
+      }
+      const type = t;
+      const data = null;
+      gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                    targetTextureWidth, targetTextureHeight, border,
+                    format, type, data);
+      // gl.generateMipmap(gl.TEXTURE_2D);
+
+      // set the filtering so we don't need mips
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      
+      // Set the parameters based on the passed type
+      if(tiling === WTCGL.IMAGETYPE_TILE) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+      } else if(tiling === WTCGL.IMAGETYPE_MIRROR) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
+      } else if(tiling === WTCGL.IMAGETYPE_REGULAR) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      }
+    }
+    
+    // Create and bind the framebuffer
+    const fb = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+
+    // attach the texture as the first color attachment
+    const attachmentPoint = gl.COLOR_ATTACHMENT0;
+    const level = 0;
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);
+
+    return {
+      w: w * this.pxratio,
+      h: h * this.pxratio,
+      fb: fb,
+      frameTexture: targetTexture
+    };
+  }
+  
+
+	/**
+	 * Resizes the canvas to a specified width and height, respecting the pixel ratio
+	 *
+	 * @param  {number} w The width of the canvas
+	 * @param  {number} h The height of the canvas
+	 * @return {Void}
+	 */
+  resize(w, h) {
+    this.width = w;
+    this.height = h;
+    this._el.width = w * this.pxratio;
+    this._el.height = h * this.pxratio;
+    this._size = [w * this.pxratio, h * this.pxratio];
+    if(this.styleElement) {
+      this._el.style.width = w + 'px';
+      this._el.style.height = h + 'px';
+    }
+    
+    this._ctx.viewportWidth = w * this.pxratio;
+    this._ctx.viewportHeight = h * this.pxratio;
+    
+    this._ctx.uniform2fv( this._programInfo.uniforms.resolution, this._size);
+    
+    this.initBuffers(this._positions);
+  }
+  
+	/**
+	 * Initialise a provided vertex buffer
+	 *
+	 * @param  {array} positions The vertex positions to initialise
+	 * @return {Void}
+	 */
+  initBuffers(positions) {
+    this._positions = positions;
+    this._positionBuffer = this._ctx.createBuffer();
+    
+    this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
+    
+    this._ctx.bufferData(this._ctx.ARRAY_BUFFER,
+                  new Float32Array(positions),
+                  this._ctx.STATIC_DRAW);
+  }
+  
+	/**
+	 * Add a uniform to the program. At this time the following types are supported:
+   * - Float - WTCGL.TYPE_FLOAT
+   * - Vector 2 - WTCGL.TYPE_V2
+   * - Vector 3 - WTCGL.TYPE_V3
+   * - Vector 4 - WTCGL.TYPE_V4
+	 *
+	 * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
+	 * @param  {WTCGL.UNIFORM_TYPE} type The unfiform type 
+	 * @param  {number|array} value The unfiform value. The type depends on the uniform type being created 
+	 * @return {WebGLUniformLocation} The uniform location for later reference
+	 */
+  addUniform(name, type, value) {
+    let uniform = this._programInfo.uniforms[name];
+    uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+    switch(type) {
+      case WTCGL.TYPE_INT : 
+        if(!isNaN(value)) this._ctx.uniform1i( uniform, value);
+        break;
+      case WTCGL.TYPE_FLOAT : 
+        if(!isNaN(value)) this._ctx.uniform1f( uniform, value);
+        break;
+      case WTCGL.TYPE_V2 : 
+        if(value instanceof Array && value.length === 2.) this._ctx.uniform2fv( uniform, value);
+        break;
+      case WTCGL.TYPE_V3 : 
+        if(value instanceof Array && value.length === 3.) this._ctx.uniform3fv( uniform, value);
+        break;
+      case WTCGL.TYPE_V4 : 
+        if(value instanceof Array && value.length === 4.) this._ctx.uniform4fv( uniform, value);
+        break;
+      case WTCGL.TYPE_BOOL : 
+        if(!isNaN(value)) this._ctx.uniform1i( uniform, value);
+        break;
+    }
+    this._programInfo.uniforms[name] = uniform;
+    return uniform;
+  }
+
+  /**
+   * Adds a texture to the program and links it to a named uniform. Providing the type changes the tiling properties of the texture. Possible values for type:
+   * - WTCGL.IMAGETYPE_REGULAR - No tiling, clamp to edges and doesn't need to be power of 2.
+   * - WTCGL.IMAGETYPE_TILE - full x and y tiling, needs to be power of 2.
+   * - WTCGL.IMAGETYPE_MIRROR - mirror tiling, needs to be power of 2.
+   *
+   * @public
+	 * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
+   * @param  {WTCGL.TYPE_IMAGETYPE} type The type of texture to create. This is basically the tiling behaviour of the texture as described above
+	 * @param  {Image} image The image object to add to the texture
+   * @return {WebGLTexture} The texture object
+   */
+  addTexture(name, type, image, liveUpdate = false) {
+    
+    var texture = this._ctx.createTexture();
+    this._ctx.pixelStorei(this._ctx.UNPACK_FLIP_Y_WEBGL, true);
+    this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
+    
+    // this._ctx.generateMipmap(this._ctx.TEXTURE_2D);
+ 
+    // Set the parameters based on the passed type
+    if(type === WTCGL.IMAGETYPE_MIRROR) {
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.MIRRORED_REPEAT);
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.MIRRORED_REPEAT);
+    } else if(type === WTCGL.IMAGETYPE_REGULAR) {
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.CLAMP_TO_EDGE);
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.CLAMP_TO_EDGE);
+    }
+    
+    this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MIN_FILTER, this._ctx.LINEAR);
+    // this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MAG_FILTER, this._ctx.LINEAR);
+ 
+    // Upload the image into the texture.
+    this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
+ 
+    // add the texture to the array of textures.
+    this.pushTexture(name, texture, image, this._ctx.TEXTURE_2D, liveUpdate);
+    
+    
+    return texture;
+  }
+  
+  pushTexture(name, texture, image, target, liveUpdate = false) {
+    let textures = this.textures;
+    
+    textures.push({ name: name, tex: texture, liveUpdate: liveUpdate, image: image, target: target });
+    
+    // Finally set the this.textures (this is just to get around the funnyness of default getters)
+    this.textures = textures;
+  }
+
+	/**
+	 * Updates a texture location for a given WebGLTexture with an image
+	 *
+	 * @param  {WebGLTexture} texture The texture location to update
+	 * @param  {Image} image The image object to add to the texture
+	 * @return {Void}
+	 */
+  updateTexture(texture, image, name) {
+    
+    let uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+    // Set the texture unit to the uniform
+    this._ctx.uniform1i(uniform, 0);
+    this._ctx.activeTexture(this._ctx.TEXTURE0);
+    
+    this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
+    // Upload the image into the texture.
+    this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
+  }
+
+	/**
+	 * Initialise texture locations in the program
+	 *
+	 * @return {Void}
+	 */
+  initTextures() {
+    for(let i = 0; i < this.textures.length; i++) {
+      let name = this.textures[i].name;
+      let uniform = this._programInfo.uniforms[name];
+      uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+
+      // Set the texture unit to the uniform
+      this._ctx.uniform1i(uniform, i);
+
+      // find the active texture based on the index
+      this._ctx.activeTexture(this._ctx[`TEXTURE${i}`]);
+
+      // Finally, bind the texture
+      this._ctx.bindTexture(this.textures[i].target, this.textures[i].tex);
+    }
+  }
+  
+	/**
+	 * The run loop. This function is run as a part of a RaF and updates the internal
+   * time uniform (`u_time`).
+	 *
+   * @param  {number} delta The delta time provided by the RaF loop
+	 * @return {Void}
+	 */
+  run(delta) {
+    this.running && requestAnimationFrame(this.run);
+    
+    const runFunction = () => {
+      this.time = this.startTime + delta * .0002;
+      this.onRun(delta);
+      this.render();
+    }
+    
+    if(this.frameRate) {
+      let now = Date.now();
+      let elapsed = now - this._then;
+
+      if (elapsed > this.frameRate) {
+        this._then = now - (elapsed % this.frameRate);
+
+        runFunction();
+      }
+    } else {
+      runFunction();
+    }
+  }
+  
+	/**
+	 * Render the program
+	 *
+	 * @return {Void}
+	 */
+  render(buffer = {}) {
+    this._ctx.bindFramebuffer(this._ctx.FRAMEBUFFER, buffer.fb || null);
+    // Update the time uniform
+    this._ctx.uniform1f( this._programInfo.uniforms.time, this.time);
+    
+    this.textures.forEach((textureInfo) => {
+      if(textureInfo.liveUpdate === true) {
+        this.updateTexture(textureInfo.tex, textureInfo.image, textureInfo.name);
+      }
+    });
+
+    this._ctx.viewport(0, 0, buffer.w || this._ctx.viewportWidth, buffer.h || this._ctx.viewportHeight);
+    if(this.clearing) {
+      this._ctx.clearColor(1.0, 0.0, 0.0, 0.0);
+      // this._ctx.clearDepth(1.0);
+      // this._ctx.enable(this._ctx.DEPTH_TEST);
+      // this._ctx.depthFunc(this._ctx.LEQUAL);
+      
+      this._ctx.blendFunc(this._ctx.SRC_ALPHA, this._ctx.ONE_MINUS_SRC_ALPHA);
+
+      this._ctx.clear( this._ctx.COLOR_BUFFER_BIT );
+    }
+
+    this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
+    this._ctx.vertexAttribPointer(
+        this._programInfo.attribs.vertexPosition,
+        3,
+        this._ctx.FLOAT,
+        false,
+        0,
+        0);
+    this._ctx.enableVertexAttribArray(this._programInfo.attribs.vertexPosition);
+
+    // Set the shader uniforms
+    this.includePerspectiveMatrix && this._ctx.uniformMatrix4fv( this._programInfo.uniforms.projectionMatrix, false, this.perspectiveMatrix);
+    this.includeModelViewMatrix && this._ctx.uniformMatrix4fv( this._programInfo.uniforms.modelViewMatrix, false, this.modelViewMatrix);
+
+    this._ctx.drawArrays(this._ctx.TRIANGLE_STRIP, 0, 4);
+  }
+
+
+  /**
+   * Getters and setters
+   */
+
+  /**
+   * The default webGL parameters to be used for the program.
+   * This is read only and should only be overridden as a part of a subclass.
+   *
+   * @readonly
+   * @type {object}
+   * @default { alpha: true }
+   */
+  get webgl_params() {
+    return { alpha: true };
+  }
+  
+  /**
+   * (getter/setter) Whether the element should include styling as a part of
+   * its rendition.
+   *
+   * @type {boolean}
+   * @default true
+   */
+  set styleElement(value) {
+    this._styleElement = value === true;
+    if(this._styleElement === false && this._el) {
+      this._el.style.width = '';
+      this._el.style.height = '';
+    }
+  }
+  get styleElement() {
+    return this._styleElement !== false;
+  }
+
+  /**
+   * (getter/setter) startTime. This is a value to begin the `u_time` 
+   * unform at. This is here in case you want `u_time` to begin at a 
+   * specific value other than 0.
+   *
+   * @type {number}
+   * @default 0
+   */
+  set startTime(value) {
+    if(!isNaN(value)) {
+      this._startTime = value;
+    }
+  }
+  get startTime() {
+    return this._startTime || 0;
+  }
+  
+  /**
+   * (getter/setter) time. This is the time that the program currently
+   * sits at. By default this value is set as a part of the run loop
+   * however this is a public property so that we can specify time
+   * for rendition outside of the run loop.
+   *
+   * @type {number}
+   * @default 0
+   */
+  set time(value) {
+    if(!isNaN(value)) {
+      this._time = value;
+    }
+  }
+  get time() {
+    return this._time || 0;
+  }
+  
+  /**
+   * (getter/setter) includePerspectiveMatrix. This determines whether the 
+   * perspecive matrix is included in the program. This doesn't really make
+   * a difference right now, but this is here to provide future interoperability.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set includePerspectiveMatrix(value) {
+    this._includePerspectiveMatrix = value === true;
+  }
+  get includePerspectiveMatrix() {
+    return this._includePerspectiveMatrix === true;
+  }
+  
+  /**
+   * (getter/setter) includeModelViewMatrix. This determines whether the 
+   * model view matrix is included in the program. This doesn't really make
+   * a difference right now, but this is here to provide future interoperability.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set includeModelViewMatrix(value) {
+    this._includeModelViewMatrix = value === true;
+  }
+  get includeModelViewMatrix() {
+    return this._includeModelViewMatrix === true;
+  }
+
+  /**
+   * (getter/setter) textures. The array of textures to initialise into the program.
+   *
+   * @private
+   * @type {array}
+   * @default []
+   */
+  set textures(value) {
+    if(value instanceof Array) {
+      this._textures = value;
+    }
+  }
+  get textures() {
+    return this._textures || [];
+  }
+  
+  /**
+   * (getter/setter) clearing. Specifies whether the program should clear the screen 
+   * before drawing anew.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set clearing(value) {
+    this._clearing = value === true;
+  }
+  get clearing() {
+    return this._clearing === true;
+  }
+  
+  /**
+   * (getter/setter) running. Specifies whether the programming is running. Setting 
+   * this to true will create a RaF loop which will call the run function.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set running(value) {
+    if(!this.running && value === true) {
+      
+      this._then = Date.now();
+      
+      requestAnimationFrame(this.run);
+    } 
+    this._running = value === true;
+  }
+  get running() {
+    return this._running === true;
+  }
+  
+  set frameRate(value) {
+    if(!isNaN(value)) this._frameRate = 1000 / value;
+  }
+  get frameRate() {
+    return this._frameRate || null;
+  }
+  
+  /**
+   * (getter/setter) pxratio. The 1-dimensional pixel ratio of the application.
+   * This should be used either for making a program look good on high density
+   * screens or for raming down pixel density for performance.
+   *
+   * @type {number}
+   * @default 1
+   */
+  set pxratio(value) {
+    if(value > 0) this._pxratio = value;
+  }
+  get pxratio() {
+    return this._pxratio || 1;
+  }
+  
+  /**
+   * (getter/setter) perspectiveMatrix. Calculate a perspective matrix, a 
+   * special matrix that is used to simulate the distortion of perspective in 
+   * a camera. Our field of view is 45 degrees, with a width/height ratio 
+   * that matches the display size of the canvas and we only want to see 
+   * objects between 0.1 units and 100 units away from the camera.
+   *
+   * @readonly
+   * @type {mat4}
+   */
+  get perspectiveMatrix() {
+    const fieldOfView = 45 * Math.PI / 180;   // in radians
+    const aspect = this._size.w / this._size.h;
+    const zNear = 0.1;
+    const zFar = 100.0;
+    const projectionMatrix = mat4.create();
+    // note: glmatrix.js always has the first argument
+    // as the destination to receive the result.
+    mat4.perspective(projectionMatrix,
+                     fieldOfView,
+                     aspect,
+                     zNear,
+                     zFar);
+    
+    return projectionMatrix;
+  }
+  
+  /**
+   * (getter/setter) perspectiveMatrix. Calculate a model view matrix.
+   *
+   * @readonly
+   * @type {mat4}
+   */
+  get modelViewMatrix() {
+    // Set the drawing position to the "identity" point, which is
+    // the center of the scene.
+    const modelViewMatrix = mat4.create();
+    
+    // Now move the drawing position a bit to where we want to
+    // start drawing the square.
+    mat4.translate(modelViewMatrix,     // destination matrix
+                   modelViewMatrix,     // matrix to translate
+                   [-0.0, 0.0, -1.]);  // amount to translate
+    
+    return modelViewMatrix;
+  }
+  
+  set onRun(runMethod) {
+    if(typeof runMethod == 'function') {
+      this._onRun = runMethod.bind(this);
+    }
+  }
+  get onRun() {
+    return this._onRun;
+  }
+  
+  get context() {
+    return this._ctx || null;
+  }
+  
+  /**
+   * Static Methods
+   */
+
+	/**
+	 * Create a shader of a given type given a context, type and source.
+	 *
+   * @static
+	 * @param  {WebGLContext} ctx The context under which to create the shader
+	 * @param  {WebGLShaderType} type The shader type, vertex or fragment
+	 * @param  {string} source The shader source.
+	 * @return {WebGLShader} The created shader
+	 */
+  static createShaderOfType(ctx, type, source) {
+    const shader = ctx.createShader(type);
+    ctx.shaderSource(shader, source);
+    ctx.compileShader(shader);
+    
+    if (!ctx.getShaderParameter(shader, ctx.COMPILE_STATUS)) {
+      console.log('An error occurred compiling the shaders: ' + ctx.getShaderInfoLog(shader));
+      ctx.deleteShader(shader);
+      return null;
+    }
+    
+    return shader;
+  }
+}
+
+WTCGL.TYPE_INT = 0;
+WTCGL.TYPE_FLOAT = 1;
+WTCGL.TYPE_V2 = 2;
+WTCGL.TYPE_V3 = 3;
+WTCGL.TYPE_V4 = 4;
+WTCGL.TYPE_BOOL = 5;
+
+WTCGL.IMAGETYPE_REGULAR = 0;
+WTCGL.IMAGETYPE_TILE = 1;
+WTCGL.IMAGETYPE_MIRROR = 2;
+
+WTCGL.TEXTYPE_FLOAT = 0;
+WTCGL.TEXTYPE_UNSIGNED_BYTE = 1;
+WTCGL.TEXTYPE_HALF_FLOAT_OES = 2;
\ No newline at end of file
diff --git a/blob-study/src/index.html b/blob-study/src/index.html
new file mode 100644
index 0000000..eb63a41
--- /dev/null
+++ b/blob-study/src/index.html
@@ -0,0 +1,204 @@
+<canvas id="webgl" width="500" height="1758"></canvas>
+
+<script id="vertexShader" type="x-shader/x-vertex">
+  attribute vec4 a_position;
+  
+  uniform mat4 u_modelViewMatrix;
+  uniform mat4 u_projectionMatrix;
+  
+  void main() {
+    gl_Position = a_position;
+  }
+</script>
+<script id="fragmentShader" type="x-shader/x-fragment">
+ precision highp float;
+  precision highp int;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D u_noise;
+  
+  // movement variables
+  vec3 movement = vec3(.0);
+  
+  uniform int u_maxIterations;
+  uniform float u_stopThreshold;
+  uniform float u_stepScale;
+  uniform float u_eps;
+  uniform int u_octaves;
+  uniform vec3 u_clipBGColour;
+  uniform vec3 u_blobColour;
+  uniform vec3 u_light_position;
+  uniform vec3 u_lightColour;
+  uniform float u_lightStrength;
+  uniform float u_sceneWeight;
+  uniform float u_internalStep;
+  
+  const int maxIterations = 1024;
+  
+  const vec3 light1_position = vec3(0, 1., -1.);
+  const vec3 light1_colour = vec3(.5, .8, 1.85);
+  
+  const int octaves = 3;
+  const int max_octaves = 16;
+  
+  struct Surface {
+    int object_id;
+    float distance;
+    vec3 position;
+    vec3 colour;
+    float ambient;
+    float spec;
+  };
+  
+  float bumps(in vec3 p, float phase, float size, vec3 frequency) {
+    return size * sin(p.x * frequency.x + phase) * cos(p.y * frequency.y + phase) * cos(p.z * frequency.z + phase);
+  }
+  
+  float fractalBumps(in vec3 p, float phase, float size, vec3 frequency, float multiplier) {
+    // const float octaves = 2.;
+    float _bumps = 0.;
+    for(int i = 1; i < max_octaves; i++) {
+      if(i > u_octaves) break;
+      float f = float(i);
+      _bumps += bumps(p, phase + f * 10., size * multiplier * 1./f, frequency * f);
+    }
+    
+    return _bumps;
+  }
+  
+  // This function describes the world in distances from any given 3 dimensional point in space
+  float world(in vec3 position, inout int object_id) {
+    vec3 pos = floor(position * .5);
+    object_id = int(floor(pos.x + pos.y + pos.z));
+    // position = mod(position, 1.) - .5;
+    float gradient = max(0., (position.y + .3));
+    float bumps = fractalBumps(position, u_time * 2., .5 * gradient, vec3(10. + sin(u_time) * 5.), 2.8);
+    
+    float world = length(position) - .4 + bumps * .15;
+    
+    // world = max(world, -position.y);
+    
+    return world;
+  }
+  float world(in vec3 position) {
+    int dummy = 0;
+    return world(position, dummy);
+  }
+  
+  vec3 getNormal(vec3 p, float eps) {
+    vec3 n;
+    n.y = world(p);    
+    n.x = world(vec3(p.x+eps,p.y,p.z)) - n.y;
+    n.z = world(vec3(p.x,p.y,p.z+eps)) - n.y;
+    n.y = eps;
+    return normalize(n);
+  }
+  
+  Surface getSurface(int object_id, float rayDepth, vec3 sp) {
+    return Surface(
+      object_id, 
+      rayDepth, 
+      sp, 
+      vec3(1.), 
+      .5, 
+      200.);
+  }
+  
+  // The raymarch loop
+  Surface rayMarch(vec3 ro, vec3 rd, float start, float end, inout vec3 col) {
+    float sceneDist = 1e4;
+    float rayDepth = start;
+    int object_id = 0;
+    
+    // Light position
+    vec3 lp = ro + vec3(2, 2, -5.);
+    
+    bool hit = false;
+    
+    float energy = u_lightStrength*2.;
+    bool inside = false;
+    
+    for(int i = 0; i < maxIterations; i++) {
+      if(i > u_maxIterations) break;
+      if(energy <= 0.) break;
+      vec3 r = ro + rd * rayDepth;
+      sceneDist = world(r, object_id);
+      
+      // if(inside == true && sceneDist > 0.) {
+      //   rayDepth -= sceneDist;
+      //   rayDepth += .01;
+      //   sceneDist = world(r, object_id);
+      // }
+      
+      vec3 normal = normalize(r);
+      vec3 ld = lp - r;
+      float len = length( ld );
+      ld = normalize(ld);
+      float lightAtten = min( 1.0 / ( 0.15*len ), 1.0 );
+      float diffuse = max(0., dot(normal, ld))+.2;
+      
+      float weighting = length(r);
+      
+      energy -= .1;
+     
+      col += clamp((1./abs(sceneDist)*u_sceneWeight)*weighting*(diffuse*.0005*u_blobColour)*(u_lightColour*energy*lightAtten), 0.0, 1.);
+      
+      if(sceneDist < u_stopThreshold) {
+        // if(inside == false) {
+          // vec3 n = getNormal(r, .01);
+          // rd = normalize(refract(rd, n, 1.01));
+        // }
+        inside = true;
+        // vec3 r = ro + (rd+u_internalStep) * rayDepth;
+        // sceneDist = world(r, object_id);
+        // if(sceneDist>0.) {
+        //   rayDepth += u_internalStep*.1;
+        // } else {
+          rayDepth += u_internalStep;
+        // }
+      } else {
+        inside = false;
+        rayDepth += sceneDist * u_stepScale;
+      }
+      
+      if(rayDepth > end) {
+        break;
+      }
+    }
+    
+    col = sqrt(col);
+    
+    return getSurface(object_id, rayDepth, ro + rd * rayDepth);
+  }
+
+  void main() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    // Camera and look-at
+    vec3 cam = vec3(cos(u_mouse.x * 5.)*3.,u_mouse.y * 3.,sin(u_mouse.x * 5.)*3.);
+    vec3 lookAt = vec3(0,0,0);
+    
+    // Unit vectors
+    vec3 forward = normalize(lookAt - cam);
+    vec3 right = normalize(vec3(forward.z, 0., -forward.x));
+    vec3 up = normalize(cross(forward, right));
+    
+    // FOV
+    float FOV = .4;
+    
+    // Ray origin and ray direction
+    vec3 ro = cam;
+    vec3 rd = normalize(forward + FOV * uv.x * right + FOV * uv.y * up);
+    
+    // Ray marching
+    const float clipNear = 0.;
+    const float clipFar = 32.;
+    vec3 col = u_clipBGColour;
+    Surface objectSurface = rayMarch(ro, rd, clipNear, clipFar, col);
+    
+    gl_FragColor = vec4(col, 1.);
+  }
+  
+</script>
\ No newline at end of file
diff --git a/blob-study/src/script.babel b/blob-study/src/script.babel
new file mode 100644
index 0000000..405b9eb
--- /dev/null
+++ b/blob-study/src/script.babel
@@ -0,0 +1,191 @@
+import * as dat from 'https://cdn.skypack.dev/dat.gui';
+console.clear();
+
+const twodWebGL = new WTCGL(
+  document.querySelector('canvas#webgl'), 
+  document.querySelector('script#vertexShader').textContent, 
+  document.querySelector('script#fragmentShader').textContent,
+  window.innerWidth,
+  window.innerHeight,
+  window.devicePixelRatio
+);
+
+window.addEventListener('resize', () => {
+  twodWebGL.resize(window.innerWidth, window.innerHeight);
+});
+
+
+
+// track mouse move
+let mousepos = [0,0];
+const u_mousepos = twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
+window.addEventListener('pointermove', (e) => {
+  let ratio = window.innerHeight / window.innerWidth;
+  if(window.innerHeight > window.innerWidth) {
+    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth;
+    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1 * ratio;
+  } else {
+    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
+    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
+  }
+  twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
+});
+
+const uniforms = {
+  octaves: {
+    v: 3,
+    max: 12,
+    min: 0,
+    type: WTCGL.TYPE_INT },
+  sceneWeight: {
+    v: 1,
+    max: 10,
+    min: .01,
+    type: WTCGL.TYPE_FLOAT },
+  maxIterations: {
+    v: 256,
+    max: 512,
+    min: 2,
+    type: WTCGL.TYPE_INT },
+  internalStep: {
+    v: .003,
+    max: 1,
+    min: 0.0001,
+    type: WTCGL.TYPE_FLOAT },
+  stopThreshold: {
+    v: .01,
+    max: .1,
+    min: .0001,
+    type: WTCGL.TYPE_FLOAT },
+  stepScale: {
+    v: .8,
+    max: 2.,
+    min: .1,
+    type: WTCGL.TYPE_FLOAT },
+  clipBGColour: {
+    v: '#000000',
+    type: 'COLOUR' },
+  blobColour: {
+    v: '#FFFFFF',
+    type: 'COLOUR' },
+  lightColour: {
+    v: '#3F66FF',
+    type: 'COLOUR' },
+  lightStrength: {
+    v: 2,
+    min: .1,
+    max: 5,
+    type: WTCGL.TYPE_FLOAT }
+  
+}
+
+const hexToGL = (hex) => {
+  const components = /^#?([A-F0-9]{2})([A-F0-9]{2})([A-F0-9]{2})/i.exec(hex);
+  if(components && components.length === 4) {
+    const r = Math.round(`0x${components[1]}` / 255 * 1000) / 1000;
+    const g = Math.round(`0x${components[2]}` / 255 * 1000) / 1000;
+    const b = Math.round(`0x${components[3]}` / 255 * 1000) / 1000;
+    return [r,g,b]
+  } else {
+    return [];
+  }
+}
+const updateUniform = (e, n) => {
+  const prop = uniforms[e];
+  if(prop.type === 'COLOUR') {
+    const c = hexToGL(n);
+    twodWebGL.addUniform(e, WTCGL.TYPE_V3, c);
+  } else {
+    twodWebGL.addUniform(e, prop.type, n);
+  }
+}
+
+// const updateUniform(name, value) => {
+  
+// }
+
+const gui = new dat.GUI();
+Object.entries(uniforms).forEach((u, v) => {
+  console.log(u);
+  const prop = uniforms[u[0]];
+  if(prop.type === 'COLOUR') {
+    const c = hexToGL(prop.v);
+    console.log(c)
+    twodWebGL.addUniform(u[0], WTCGL.TYPE_V3, c);
+  } else {
+    twodWebGL.addUniform(u[0], prop.type, prop.v);
+  }
+  if(prop.type === 'COLOUR') {
+    gui.addColor(prop, 'v').name(u[0]).onChange((v) => { updateUniform(u[0], v) });
+  } else {
+    gui.add(prop, 'v', prop.min, prop.max).name(u[0]).onChange((v) => { updateUniform(u[0], v) });
+  }
+});
+
+
+
+
+
+
+
+
+
+// Load all our textures. We only initiate the instance once all images are loaded.
+const textures = [
+  {
+    name: 'noise',
+    url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',
+    type: WTCGL.IMAGETYPE_TILE,
+    img: null
+  }
+];
+const loadImage = function (imageObject) {
+  let img = document.createElement('img');
+  img.crossOrigin="anonymous";
+  
+  return new Promise((resolve, reject) => {
+    img.addEventListener('load', (e) => {
+      imageObject.img = img;
+      resolve(imageObject);
+    });
+    img.addEventListener('error', (e) => {
+      reject(e);
+    });
+    img.src = imageObject.url
+  });
+}
+const loadTextures = function(textures) {
+  return new Promise((resolve, reject) => {
+    const loadTexture = (pointer) => {
+      if(pointer >= textures.length || pointer > 10) {
+        resolve(textures);
+        return;
+      };
+      const imageObject = textures[pointer];
+
+      const p = loadImage(imageObject);
+      p.then(
+        (result) => {
+          twodWebGL.addTexture(result.name, result.type, result.img);
+        },
+        (error) => {
+          console.log('error', error)
+        }).finally((e) => {
+          loadTexture(pointer+1);
+      });
+    }
+    loadTexture(0);
+  });
+  
+}
+
+loadTextures(textures).then(
+  (result) => {
+    twodWebGL.initTextures();
+    // twodWebGL.render();
+    twodWebGL.running = true;
+  },
+  (error) => {
+    console.log('error');
+  }
+);
\ No newline at end of file
diff --git a/blob-study/src/style.css b/blob-study/src/style.css
new file mode 100644
index 0000000..c013696
--- /dev/null
+++ b/blob-study/src/style.css
@@ -0,0 +1,7 @@
+body {
+  margin:0;
+}
+
+canvas {
+  position: fixed;
+}
\ No newline at end of file
diff --git a/blobby-deerthreejs-to-svg-render-gsap/README.markdown b/blobby-deerthreejs-to-svg-render-gsap/README.markdown
new file mode 100644
index 0000000..6f530aa
--- /dev/null
+++ b/blobby-deerthreejs-to-svg-render-gsap/README.markdown
@@ -0,0 +1,5 @@
+# Blobby deer - ThreeJS to SVG render + GSAP
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Mamboleoo/pen/JjNvQGP](https://codepen.io/Mamboleoo/pen/JjNvQGP).
+
+
diff --git a/blobby-deerthreejs-to-svg-render-gsap/dist/index.html b/blobby-deerthreejs-to-svg-render-gsap/dist/index.html
new file mode 100644
index 0000000..a8e859a
--- /dev/null
+++ b/blobby-deerthreejs-to-svg-render-gsap/dist/index.html
@@ -0,0 +1,1442 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Blobby deer - ThreeJS to SVG render + GSAP</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg viewBox="-350 -490 920 927" xmlns="http://www.w3.org/2000/svg">
+  <circle r="14" z="894" transform="translate(-35,74)"></circle>
+  <circle r="14" z="887" transform="translate(129,101)"></circle>
+  <circle r="14" z="960" transform="translate(-81,15)"></circle>
+  <circle r="14" z="770" transform="translate(269,-156)"></circle>
+  <circle r="14" z="972" transform="translate(-7,2)"></circle>
+  <circle r="14" z="869" transform="translate(211,-386)"></circle>
+  <circle r="14" z="850" transform="translate(81,209)"></circle>
+  <circle r="14" z="818" transform="translate(191,107)"></circle>
+  <circle r="14" z="884" transform="translate(-52,-43)"></circle>
+  <circle r="14" z="897" transform="translate(131,276)"></circle>
+  <circle r="14" z="814" transform="translate(239,-68)"></circle>
+  <circle r="14" z="890" transform="translate(149,179)"></circle>
+  <circle r="14" z="1003" transform="translate(-65,156)"></circle>
+  <circle r="14" z="866" transform="translate(131,132)"></circle>
+  <circle r="14" z="1007" transform="translate(-55,225)"></circle>
+  <circle r="14" z="834" transform="translate(177,113)"></circle>
+  <circle r="14" z="793" transform="translate(182,-46)"></circle>
+  <circle r="14" z="904" transform="translate(20,90)"></circle>
+  <circle r="14" z="856" transform="translate(39,-54)"></circle>
+  <circle r="14" z="849" transform="translate(242,-311)"></circle>
+  <circle r="14" z="890" transform="translate(143,175)"></circle>
+  <circle r="14" z="966" transform="translate(-116,226)"></circle>
+  <circle r="14" z="975" transform="translate(-135,121)"></circle>
+  <circle r="14" z="838" transform="translate(139,-67)"></circle>
+  <circle r="14" z="916" transform="translate(-92,-92)"></circle>
+  <circle r="14" z="929" transform="translate(-140,-2)"></circle>
+  <circle r="14" z="979" transform="translate(-25,-69)"></circle>
+  <circle r="14" z="946" transform="translate(-128,59)"></circle>
+  <circle r="14" z="847" transform="translate(21,-19)"></circle>
+  <circle r="14" z="867" transform="translate(2,99)"></circle>
+  <circle r="14" z="885" transform="translate(138,-19)"></circle>
+  <circle r="14" z="884" transform="translate(157,65)"></circle>
+  <circle r="14" z="816" transform="translate(235,-49)"></circle>
+  <circle r="14" z="971" transform="translate(-114,155)"></circle>
+  <circle r="14" z="841" transform="translate(185,-37)"></circle>
+  <circle r="14" z="980" transform="translate(-122,-45)"></circle>
+  <circle r="14" z="885" transform="translate(-34,75)"></circle>
+  <circle r="14" z="875" transform="translate(127,-54)"></circle>
+  <circle r="14" z="870" transform="translate(183,38)"></circle>
+  <circle r="14" z="906" transform="translate(81,75)"></circle>
+  <circle r="14" z="782" transform="translate(178,-258)"></circle>
+  <circle r="14" z="965" transform="translate(-65,-123)"></circle>
+  <circle r="14" z="911" transform="translate(21,-86)"></circle>
+  <circle r="14" z="886" transform="translate(153,60)"></circle>
+  <circle r="14" z="788" transform="translate(199,-184)"></circle>
+  <circle r="14" z="875" transform="translate(-55,27)"></circle>
+  <circle r="14" z="806" transform="translate(107,83)"></circle>
+  <circle r="14" z="995" transform="translate(-63,202)"></circle>
+  <circle r="14" z="774" transform="translate(234,-147)"></circle>
+  <circle r="14" z="914" transform="translate(-87,61)"></circle>
+  <circle r="14" z="817" transform="translate(247,-252)"></circle>
+  <circle r="14" z="985" transform="translate(-40,-37)"></circle>
+  <circle r="14" z="788" transform="translate(260,-100)"></circle>
+  <circle r="14" z="911" transform="translate(101,25)"></circle>
+  <circle r="14" z="969" transform="translate(-43,-116)"></circle>
+  <circle r="14" z="815" transform="translate(73,13)"></circle>
+  <circle r="14" z="816" transform="translate(79,-389)"></circle>
+  <circle r="14" z="837" transform="translate(70,230)"></circle>
+  <circle r="14" z="823" transform="translate(226,-31)"></circle>
+  <circle r="14" z="995" transform="translate(-62,108)"></circle>
+  <circle r="14" z="851" transform="translate(74,193)"></circle>
+  <circle r="14" z="993" transform="translate(-27,248)"></circle>
+  <circle r="14" z="976" transform="translate(-16,24)"></circle>
+  <circle r="14" z="817" transform="translate(171,116)"></circle>
+  <circle r="14" z="917" transform="translate(-115,52)"></circle>
+  <circle r="14" z="788" transform="translate(198,-234)"></circle>
+  <circle r="14" z="887" transform="translate(16,-84)"></circle>
+  <circle r="14" z="947" transform="translate(7,26)"></circle>
+  <circle r="14" z="903" transform="translate(29,-83)"></circle>
+  <circle r="14" z="834" transform="translate(210,65)"></circle>
+  <circle r="14" z="884" transform="translate(124,108)"></circle>
+  <circle r="14" z="909" transform="translate(-2,84)"></circle>
+  <circle r="14" z="839" transform="translate(64,236)"></circle>
+  <circle r="14" z="922" transform="translate(8,-92)"></circle>
+  <circle r="14" z="880" transform="translate(-62,21)"></circle>
+  <circle r="14" z="864" transform="translate(11,-49)"></circle>
+  <circle r="14" z="829" transform="translate(244,-264)"></circle>
+  <circle r="14" z="857" transform="translate(98,371)"></circle>
+  <circle r="14" z="803" transform="translate(255,-66)"></circle>
+  <circle r="14" z="801" transform="translate(240,16)"></circle>
+  <circle r="14" z="823" transform="translate(45,17)"></circle>
+  <circle r="14" z="857" transform="translate(55,-62)"></circle>
+  <circle r="14" z="912" transform="translate(79,-35)"></circle>
+  <circle r="14" z="822" transform="translate(118,-47)"></circle>
+  <circle r="14" z="852" transform="translate(102,125)"></circle>
+  <circle r="14" z="770" transform="translate(332,-166)"></circle>
+  <circle r="14" z="879" transform="translate(169,35)"></circle>
+  <circle r="14" z="853" transform="translate(193,75)"></circle>
+  <circle r="14" z="808" transform="translate(232,-234)"></circle>
+  <circle r="14" z="980" transform="translate(-73,-107)"></circle>
+  <circle r="14" z="898" transform="translate(116,-4)"></circle>
+  <circle r="14" z="928" transform="translate(-65,-116)"></circle>
+  <circle r="14" z="828" transform="translate(139,-65)"></circle>
+  <circle r="14" z="901" transform="translate(92,-35)"></circle>
+  <circle r="14" z="908" transform="translate(-74,-87)"></circle>
+  <circle r="14" z="860" transform="translate(63,336)"></circle>
+  <circle r="14" z="944" transform="translate(-78,-128)"></circle>
+  <circle r="14" z="814" transform="translate(88,-4)"></circle>
+  <circle r="14" z="935" transform="translate(-50,33)"></circle>
+  <circle r="14" z="968" transform="translate(-127,201)"></circle>
+  <circle r="14" z="978" transform="translate(-18,-49)"></circle>
+  <circle r="14" z="975" transform="translate(-135,-82)"></circle>
+  <circle r="14" z="906" transform="translate(102,-2)"></circle>
+  <circle r="14" z="959" transform="translate(-140,-93)"></circle>
+  <circle r="14" z="830" transform="translate(180,112)"></circle>
+  <circle r="14" z="856" transform="translate(6,-23)"></circle>
+  <circle r="14" z="998" transform="translate(-76,83)"></circle>
+  <circle r="14" z="894" transform="translate(166,339)"></circle>
+  <circle r="14" z="814" transform="translate(75,21)"></circle>
+  <circle r="14" z="784" transform="translate(300,-161)"></circle>
+  <circle r="14" z="904" transform="translate(137,287)"></circle>
+  <circle r="14" z="812" transform="translate(203,-180)"></circle>
+  <circle r="14" z="767" transform="translate(343,-139)"></circle>
+  <circle r="14" z="971" transform="translate(-106,-112)"></circle>
+  <circle r="14" z="958" transform="translate(-105,278)"></circle>
+  <circle r="14" z="905" transform="translate(150,306)"></circle>
+  <circle r="14" z="810" transform="translate(147,109)"></circle>
+  <circle r="14" z="947" transform="translate(-21,-108)"></circle>
+  <circle r="14" z="988" transform="translate(-64,121)"></circle>
+  <circle r="14" z="884" transform="translate(-3,-74)"></circle>
+  <circle r="14" z="774" transform="translate(254,-174)"></circle>
+  <circle r="14" z="963" transform="translate(-112,259)"></circle>
+  <circle r="14" z="852" transform="translate(182,98)"></circle>
+  <circle r="14" z="884" transform="translate(-39,68)"></circle>
+  <circle r="14" z="914" transform="translate(75,61)"></circle>
+  <circle r="14" z="807" transform="translate(252,-125)"></circle>
+  <circle r="14" z="811" transform="translate(243,-59)"></circle>
+  <circle r="14" z="976" transform="translate(-37,72)"></circle>
+  <circle r="14" z="838" transform="translate(93,193)"></circle>
+  <circle r="14" z="990" transform="translate(-63,-32)"></circle>
+  <circle r="14" z="781" transform="translate(209,-173)"></circle>
+  <circle r="14" z="860" transform="translate(223,-426)"></circle>
+  <circle r="14" z="857" transform="translate(159,-48)"></circle>
+  <circle r="14" z="983" transform="translate(-40,21)"></circle>
+  <circle r="14" z="969" transform="translate(-98,255)"></circle>
+  <circle r="14" z="859" transform="translate(65,298)"></circle>
+  <circle r="14" z="800" transform="translate(159,77)"></circle>
+  <circle r="14" z="893" transform="translate(-62,-58)"></circle>
+  <circle r="14" z="755" transform="translate(345,-146)"></circle>
+  <circle r="14" z="968" transform="translate(-114,164)"></circle>
+  <circle r="14" z="960" transform="translate(12,-55)"></circle>
+  <circle r="14" z="841" transform="translate(206,62)"></circle>
+  <circle r="14" z="934" transform="translate(27,37)"></circle>
+  <circle r="14" z="801" transform="translate(214,-228)"></circle>
+  <circle r="14" z="818" transform="translate(95,135)"></circle>
+  <circle r="14" z="879" transform="translate(-21,85)"></circle>
+  <circle r="14" z="927" transform="translate(69,18)"></circle>
+  <circle r="14" z="894" transform="translate(131,0)"></circle>
+  <circle r="14" z="799" transform="translate(234,-233)"></circle>
+  <circle r="14" z="910" transform="translate(-107,-67)"></circle>
+  <circle r="14" z="959" transform="translate(-106,285)"></circle>
+  <circle r="14" z="906" transform="translate(71,-50)"></circle>
+  <circle r="14" z="974" transform="translate(-33,-104)"></circle>
+  <circle r="14" z="980" transform="translate(-24,-36)"></circle>
+  <circle r="14" z="849" transform="translate(1,11)"></circle>
+  <circle r="14" z="850" transform="translate(136,-65)"></circle>
+  <circle r="14" z="935" transform="translate(-140,-86)"></circle>
+  <circle r="14" z="788" transform="translate(165,-269)"></circle>
+  <circle r="14" z="904" transform="translate(-102,27)"></circle>
+  <circle r="14" z="914" transform="translate(94,2)"></circle>
+  <circle r="14" z="816" transform="translate(60,37)"></circle>
+  <circle r="14" z="915" transform="translate(-113,-78)"></circle>
+  <circle r="14" z="867" transform="translate(147,-51)"></circle>
+  <circle r="14" z="887" transform="translate(140,136)"></circle>
+  <circle r="14" z="864" transform="translate(124,119)"></circle>
+  <circle r="14" z="908" transform="translate(105,11)"></circle>
+  <circle r="14" z="780" transform="translate(275,-205)"></circle>
+  <circle r="14" z="843" transform="translate(57,201)"></circle>
+  <circle r="14" z="808" transform="translate(249,-83)"></circle>
+  <circle r="14" z="988" transform="translate(-24,261)"></circle>
+  <circle r="14" z="819" transform="translate(50,69)"></circle>
+  <circle r="14" z="924" transform="translate(72,34)"></circle>
+  <circle r="14" z="831" transform="translate(128,133)"></circle>
+  <circle r="14" z="837" transform="translate(169,-57)"></circle>
+  <circle r="14" z="984" transform="translate(-52,0)"></circle>
+  <circle r="14" z="923" transform="translate(5,-93)"></circle>
+  <circle r="14" z="838" transform="translate(211,17)"></circle>
+  <circle r="14" z="909" transform="translate(-7,81)"></circle>
+  <circle r="14" z="969" transform="translate(-66,62)"></circle>
+  <circle r="14" z="798" transform="translate(274,-136)"></circle>
+  <circle r="14" z="787" transform="translate(107,-321)"></circle>
+  <circle r="14" z="940" transform="translate(-143,7)"></circle>
+  <circle r="14" z="916" transform="translate(-63,53)"></circle>
+  <circle r="14" z="817" transform="translate(109,124)"></circle>
+  <circle r="14" z="812" transform="translate(175,115)"></circle>
+  <circle r="14" z="847" transform="translate(199,0)"></circle>
+  <circle r="14" z="963" transform="translate(8,-40)"></circle>
+  <circle r="14" z="786" transform="translate(203,-212)"></circle>
+  <circle r="14" z="812" transform="translate(231,-227)"></circle>
+  <circle r="14" z="941" transform="translate(-102,98)"></circle>
+  <circle r="14" z="853" transform="translate(187,-11)"></circle>
+  <circle r="14" z="815" transform="translate(125,-35)"></circle>
+  <circle r="14" z="808" transform="translate(246,-28)"></circle>
+  <circle r="14" z="959" transform="translate(-105,285)"></circle>
+  <circle r="14" z="961" transform="translate(-18,53)"></circle>
+  <circle r="14" z="943" transform="translate(-97,94)"></circle>
+  <circle r="14" z="818" transform="translate(133,-45)"></circle>
+  <circle r="14" z="918" transform="translate(-125,31)"></circle>
+  <circle r="14" z="863" transform="translate(31,-55)"></circle>
+  <circle r="14" z="968" transform="translate(-16,-93)"></circle>
+  <circle r="14" z="898" transform="translate(-93,18)"></circle>
+  <circle r="14" z="965" transform="translate(-123,202)"></circle>
+  <circle r="14" z="828" transform="translate(219,47)"></circle>
+  <circle r="14" z="978" transform="translate(-29,60)"></circle>
+  <circle r="14" z="968" transform="translate(-113,146)"></circle>
+  <circle r="14" z="864" transform="translate(80,352)"></circle>
+  <circle r="14" z="854" transform="translate(80,276)"></circle>
+  <circle r="14" z="813" transform="translate(239,-134)"></circle>
+  <circle r="14" z="952" transform="translate(-120,51)"></circle>
+  <circle r="14" z="911" transform="translate(94,51)"></circle>
+  <circle r="14" z="812" transform="translate(263,-232)"></circle>
+  <circle r="14" z="940" transform="translate(42,-16)"></circle>
+  <circle r="14" z="805" transform="translate(234,-234)"></circle>
+  <circle r="14" z="994" transform="translate(-73,69)"></circle>
+  <circle r="14" z="783" transform="translate(300,-171)"></circle>
+  <circle r="14" z="970" transform="translate(-127,222)"></circle>
+  <circle r="14" z="835" transform="translate(212,53)"></circle>
+  <circle r="14" z="976" transform="translate(-115,212)"></circle>
+  <circle r="14" z="835" transform="translate(250,-264)"></circle>
+  <circle r="14" z="846" transform="translate(9,9)"></circle>
+  <circle r="14" z="820" transform="translate(72,-13)"></circle>
+  <circle r="14" z="927" transform="translate(-125,-95)"></circle>
+  <circle r="14" z="856" transform="translate(76,355)"></circle>
+  <circle r="14" z="880" transform="translate(87,105)"></circle>
+  <circle r="14" z="859" transform="translate(16,102)"></circle>
+  <circle r="14" z="793" transform="translate(168,3)"></circle>
+  <circle r="14" z="795" transform="translate(263,-221)"></circle>
+  <circle r="14" z="934" transform="translate(-73,-120)"></circle>
+  <circle r="14" z="820" transform="translate(106,-40)"></circle>
+  <circle r="14" z="927" transform="translate(-90,82)"></circle>
+  <circle r="14" z="974" transform="translate(-117,-107)"></circle>
+  <circle r="14" z="846" transform="translate(45,-48)"></circle>
+  <circle r="14" z="817" transform="translate(58,74)"></circle>
+  <circle r="14" z="817" transform="translate(109,-30)"></circle>
+  <circle r="14" z="801" transform="translate(259,-112)"></circle>
+  <circle r="14" z="784" transform="translate(179,-252)"></circle>
+  <circle r="14" z="823" transform="translate(49,99)"></circle>
+  <circle r="14" z="805" transform="translate(112,72)"></circle>
+  <circle r="14" z="898" transform="translate(131,278)"></circle>
+  <circle r="14" z="851" transform="translate(5,85)"></circle>
+  <circle r="14" z="876" transform="translate(163,161)"></circle>
+  <circle r="14" z="863" transform="translate(-0,96)"></circle>
+  <circle r="14" z="830" transform="translate(215,-22)"></circle>
+  <circle r="14" z="789" transform="translate(258,-85)"></circle>
+  <circle r="14" z="872" transform="translate(36,-69)"></circle>
+  <circle r="14" z="973" transform="translate(-70,66)"></circle>
+  <circle r="14" z="903" transform="translate(-77,39)"></circle>
+  <circle r="14" z="942" transform="translate(35,5)"></circle>
+  <circle r="14" z="974" transform="translate(-115,194)"></circle>
+  <circle r="14" z="845" transform="translate(205,11)"></circle>
+  <circle r="14" z="774" transform="translate(289,-123)"></circle>
+  <circle r="14" z="795" transform="translate(195,-177)"></circle>
+  <circle r="14" z="880" transform="translate(163,192)"></circle>
+  <circle r="14" z="797" transform="translate(235,18)"></circle>
+  <circle r="14" z="849" transform="translate(78,171)"></circle>
+  <circle r="14" z="899" transform="translate(141,314)"></circle>
+  <circle r="14" z="960" transform="translate(-0,-81)"></circle>
+  <circle r="14" z="952" transform="translate(-25,-110)"></circle>
+  <circle r="14" z="835" transform="translate(161,119)"></circle>
+  <circle r="14" z="858" transform="translate(247,-358)"></circle>
+  <circle r="14" z="893" transform="translate(-57,-62)"></circle>
+  <circle r="14" z="781" transform="translate(232,-84)"></circle>
+  <circle r="14" z="885" transform="translate(-74,1)"></circle>
+  <circle r="14" z="988" transform="translate(-54,60)"></circle>
+  <circle r="14" z="970" transform="translate(-111,192)"></circle>
+  <circle r="14" z="848" transform="translate(245,-300)"></circle>
+  <circle r="14" z="821" transform="translate(224,-257)"></circle>
+  <circle r="14" z="897" transform="translate(104,-25)"></circle>
+  <circle r="14" z="854" transform="translate(-2,-9)"></circle>
+  <circle r="14" z="892" transform="translate(150,244)"></circle>
+  <circle r="14" z="850" transform="translate(64,201)"></circle>
+  <circle r="14" z="968" transform="translate(-93,265)"></circle>
+  <circle r="14" z="856" transform="translate(124,122)"></circle>
+  <circle r="14" z="864" transform="translate(68,333)"></circle>
+  <circle r="14" z="821" transform="translate(47,32)"></circle>
+  <circle r="14" z="887" transform="translate(-80,-7)"></circle>
+  <circle r="14" z="814" transform="translate(68,81)"></circle>
+  <circle r="14" z="978" transform="translate(-59,-110)"></circle>
+  <circle r="14" z="899" transform="translate(121,34)"></circle>
+  <circle r="14" z="789" transform="translate(293,-201)"></circle>
+  <circle r="14" z="904" transform="translate(97,-19)"></circle>
+  <circle r="14" z="962" transform="translate(-103,-122)"></circle>
+  <circle r="14" z="887" transform="translate(147,103)"></circle>
+  <circle r="14" z="820" transform="translate(45,48)"></circle>
+  <circle r="14" z="905" transform="translate(105,1)"></circle>
+  <circle r="14" z="913" transform="translate(96,10)"></circle>
+  <circle r="14" z="880" transform="translate(152,212)"></circle>
+  <circle r="14" z="787" transform="translate(198,-160)"></circle>
+  <circle r="14" z="822" transform="translate(228,24)"></circle>
+  <circle r="14" z="847" transform="translate(173,-40)"></circle>
+  <circle r="14" z="808" transform="translate(259,-228)"></circle>
+  <circle r="14" z="888" transform="translate(-73,-32)"></circle>
+  <circle r="14" z="911" transform="translate(101,40)"></circle>
+  <circle r="14" z="861" transform="translate(105,-71)"></circle>
+  <circle r="14" z="1007" transform="translate(-47,226)"></circle>
+  <circle r="14" z="975" transform="translate(-70,79)"></circle>
+  <circle r="14" z="801" transform="translate(125,31)"></circle>
+  <circle r="14" z="791" transform="translate(217,28)"></circle>
+  <circle r="14" z="877" transform="translate(79,107)"></circle>
+  <circle r="14" z="921" transform="translate(-68,56)"></circle>
+  <circle r="14" z="863" transform="translate(145,-56)"></circle>
+  <circle r="14" z="960" transform="translate(-116,11)"></circle>
+  <circle r="14" z="828" transform="translate(40,4)"></circle>
+  <circle r="14" z="831" transform="translate(26,26)"></circle>
+  <circle r="14" z="931" transform="translate(-131,43)"></circle>
+  <circle r="14" z="781" transform="translate(303,-163)"></circle>
+  <circle r="14" z="957" transform="translate(-133,106)"></circle>
+  <circle r="14" z="848" transform="translate(202,53)"></circle>
+  <circle r="14" z="888" transform="translate(139,152)"></circle>
+  <circle r="14" z="813" transform="translate(240,-100)"></circle>
+  <circle r="14" z="952" transform="translate(-142,-82)"></circle>
+  <circle r="14" z="998" transform="translate(-64,121)"></circle>
+  <circle r="14" z="788" transform="translate(198,-6)"></circle>
+  <circle r="14" z="810" transform="translate(240,18)"></circle>
+  <circle r="14" z="850" transform="translate(85,242)"></circle>
+  <circle r="14" z="825" transform="translate(245,-222)"></circle>
+  <circle r="14" z="807" transform="translate(145,-28)"></circle>
+  <circle r="14" z="804" transform="translate(216,-229)"></circle>
+  <circle r="14" z="974" transform="translate(-130,164)"></circle>
+  <circle r="14" z="782" transform="translate(301,-178)"></circle>
+  <circle r="14" z="910" transform="translate(20,-87)"></circle>
+  <circle r="14" z="913" transform="translate(7,-92)"></circle>
+  <circle r="14" z="957" transform="translate(-107,19)"></circle>
+  <circle r="14" z="957" transform="translate(-73,18)"></circle>
+  <circle r="14" z="993" transform="translate(-81,72)"></circle>
+  <circle r="14" z="826" transform="translate(34,47)"></circle>
+  <circle r="14" z="850" transform="translate(194,-3)"></circle>
+  <circle r="14" z="867" transform="translate(186,28)"></circle>
+  <circle r="14" z="912" transform="translate(-65,-96)"></circle>
+  <circle r="14" z="874" transform="translate(138,196)"></circle>
+  <circle r="14" z="804" transform="translate(181,91)"></circle>
+  <circle r="14" z="780" transform="translate(177,-255)"></circle>
+  <circle r="14" z="805" transform="translate(117,14)"></circle>
+  <circle r="14" z="980" transform="translate(-25,-25)"></circle>
+  <circle r="14" z="839" transform="translate(124,-72)"></circle>
+  <circle r="14" z="910" transform="translate(-20,76)"></circle>
+  <circle r="14" z="991" transform="translate(-71,-29)"></circle>
+  <circle r="14" z="845" transform="translate(7,22)"></circle>
+  <circle r="14" z="789" transform="translate(214,19)"></circle>
+  <circle r="14" z="954" transform="translate(0,29)"></circle>
+  <circle r="14" z="924" transform="translate(-112,74)"></circle>
+  <circle r="14" z="928" transform="translate(-96,-109)"></circle>
+  <circle r="14" z="841" transform="translate(45,121)"></circle>
+  <circle r="14" z="926" transform="translate(-13,59)"></circle>
+  <circle r="14" z="987" transform="translate(-47,-47)"></circle>
+  <circle r="14" z="964" transform="translate(-117,190)"></circle>
+  <circle r="14" z="848" transform="translate(77,279)"></circle>
+  <circle r="14" z="953" transform="translate(-43,47)"></circle>
+  <circle r="14" z="841" transform="translate(62,242)"></circle>
+  <circle r="14" z="863" transform="translate(84,352)"></circle>
+  <circle r="14" z="893" transform="translate(135,57)"></circle>
+  <circle r="14" z="928" transform="translate(-141,-73)"></circle>
+  <circle r="14" z="806" transform="translate(245,-1)"></circle>
+  <circle r="14" z="958" transform="translate(-28,-110)"></circle>
+  <circle r="14" z="804" transform="translate(154,99)"></circle>
+  <circle r="14" z="937" transform="translate(-70,39)"></circle>
+  <circle r="14" z="907" transform="translate(158,327)"></circle>
+  <circle r="14" z="818" transform="translate(220,-85)"></circle>
+  <circle r="14" z="806" transform="translate(150,-27)"></circle>
+  <circle r="14" z="809" transform="translate(169,110)"></circle>
+  <circle r="14" z="786" transform="translate(293,-184)"></circle>
+  <circle r="14" z="865" transform="translate(137,146)"></circle>
+  <circle r="14" z="794" transform="translate(171,29)"></circle>
+  <circle r="14" z="804" transform="translate(271,-212)"></circle>
+  <circle r="14" z="899" transform="translate(75,87)"></circle>
+  <circle r="14" z="833" transform="translate(187,108)"></circle>
+  <circle r="14" z="820" transform="translate(117,128)"></circle>
+  <circle r="14" z="835" transform="translate(212,47)"></circle>
+  <circle r="14" z="874" transform="translate(42,110)"></circle>
+  <circle r="14" z="888" transform="translate(33,-82)"></circle>
+  <circle r="14" z="792" transform="translate(189,-75)"></circle>
+  <circle r="14" z="885" transform="translate(103,-52)"></circle>
+  <circle r="14" z="806" transform="translate(99,62)"></circle>
+  <circle r="14" z="983" transform="translate(-114,-95)"></circle>
+  <circle r="14" z="969" transform="translate(-126,222)"></circle>
+  <circle r="14" z="858" transform="translate(76,300)"></circle>
+  <circle r="14" z="899" transform="translate(62,92)"></circle>
+  <circle r="14" z="791" transform="translate(125,-301)"></circle>
+  <circle r="14" z="823" transform="translate(54,-5)"></circle>
+  <circle r="14" z="886" transform="translate(153,15)"></circle>
+  <circle r="14" z="785" transform="translate(147,-281)"></circle>
+  <circle r="14" z="851" transform="translate(182,-24)"></circle>
+  <circle r="14" z="983" transform="translate(-78,102)"></circle>
+  <circle r="14" z="832" transform="translate(44,108)"></circle>
+  <circle r="14" z="803" transform="translate(252,-34)"></circle>
+  <circle r="14" z="876" transform="translate(19,105)"></circle>
+  <circle r="14" z="889" transform="translate(-83,-14)"></circle>
+  <circle r="14" z="893" transform="translate(146,266)"></circle>
+  <circle r="14" z="827" transform="translate(202,-51)"></circle>
+  <circle r="14" z="804" transform="translate(163,98)"></circle>
+  <circle r="14" z="963" transform="translate(-143,-89)"></circle>
+  <circle r="14" z="770" transform="translate(265,-134)"></circle>
+  <circle r="14" z="884" transform="translate(127,163)"></circle>
+  <circle r="14" z="849" transform="translate(89,219)"></circle>
+  <circle r="14" z="833" transform="translate(257,-249)"></circle>
+  <circle r="14" z="974" transform="translate(-127,199)"></circle>
+  <circle r="14" z="809" transform="translate(261,-183)"></circle>
+  <circle r="14" z="857" transform="translate(0,-21)"></circle>
+  <circle r="14" z="801" transform="translate(130,46)"></circle>
+  <circle r="14" z="870" transform="translate(-35,-21)"></circle>
+  <circle r="14" z="954" transform="translate(-101,62)"></circle>
+  <circle r="14" z="971" transform="translate(-6,12)"></circle>
+  <circle r="14" z="790" transform="translate(195,-237)"></circle>
+  <circle r="14" z="799" transform="translate(141,32)"></circle>
+  <circle r="14" z="806" transform="translate(247,-12)"></circle>
+  <circle r="14" z="812" transform="translate(82,-386)"></circle>
+  <circle r="14" z="768" transform="translate(335,-151)"></circle>
+  <circle r="14" z="834" transform="translate(21,75)"></circle>
+  <circle r="14" z="843" transform="translate(31,-24)"></circle>
+  <circle r="14" z="977" transform="translate(-114,-25)"></circle>
+  <circle r="14" z="921" transform="translate(68,-29)"></circle>
+  <circle r="14" z="886" transform="translate(84,101)"></circle>
+  <circle r="14" z="969" transform="translate(-101,250)"></circle>
+  <circle r="14" z="792" transform="translate(196,-229)"></circle>
+  <circle r="14" z="833" transform="translate(47,128)"></circle>
+  <circle r="14" z="912" transform="translate(71,-44)"></circle>
+  <circle r="14" z="820" transform="translate(204,93)"></circle>
+  <circle r="14" z="813" transform="translate(239,-36)"></circle>
+  <circle r="14" z="811" transform="translate(230,-227)"></circle>
+  <circle r="14" z="924" transform="translate(21,65)"></circle>
+  <circle r="14" z="803" transform="translate(114,55)"></circle>
+  <circle r="14" z="791" transform="translate(192,-122)"></circle>
+  <circle r="14" z="916" transform="translate(-67,56)"></circle>
+  <circle r="14" z="848" transform="translate(50,-53)"></circle>
+  <circle r="14" z="799" transform="translate(147,49)"></circle>
+  <circle r="14" z="983" transform="translate(-40,-82)"></circle>
+  <circle r="14" z="886" transform="translate(20,-84)"></circle>
+  <circle r="14" z="922" transform="translate(16,-88)"></circle>
+  <circle r="14" z="849" transform="translate(54,231)"></circle>
+  <circle r="14" z="969" transform="translate(-106,-115)"></circle>
+  <circle r="14" z="837" transform="translate(96,184)"></circle>
+  <circle r="14" z="877" transform="translate(1,98)"></circle>
+  <circle r="14" z="868" transform="translate(-30,70)"></circle>
+  <circle r="14" z="984" transform="translate(-122,-79)"></circle>
+  <circle r="14" z="821" transform="translate(160,-68)"></circle>
+  <circle r="14" z="951" transform="translate(-122,26)"></circle>
+  <circle r="14" z="896" transform="translate(-20,87)"></circle>
+  <circle r="14" z="877" transform="translate(36,109)"></circle>
+  <circle r="14" z="856" transform="translate(-14,2)"></circle>
+  <circle r="14" z="961" transform="translate(-31,-112)"></circle>
+  <circle r="14" z="888" transform="translate(133,-18)"></circle>
+  <circle r="14" z="804" transform="translate(254,-79)"></circle>
+  <circle r="14" z="930" transform="translate(34,46)"></circle>
+  <circle r="14" z="863" transform="translate(2,-40)"></circle>
+  <circle r="14" z="898" transform="translate(135,255)"></circle>
+  <circle r="14" z="797" transform="translate(171,-259)"></circle>
+  <circle r="14" z="863" transform="translate(69,358)"></circle>
+  <circle r="14" z="864" transform="translate(67,334)"></circle>
+  <circle r="14" z="818" transform="translate(224,-78)"></circle>
+  <circle r="14" z="940" transform="translate(35,12)"></circle>
+  <circle r="14" z="952" transform="translate(-97,43)"></circle>
+  <circle r="14" z="953" transform="translate(-144,-78)"></circle>
+  <circle r="14" z="928" transform="translate(5,56)"></circle>
+  <circle r="14" z="916" transform="translate(-132,-45)"></circle>
+  <circle r="14" z="776" transform="translate(275,-197)"></circle>
+  <circle r="14" z="996" transform="translate(-52,197)"></circle>
+  <circle r="14" z="832" transform="translate(29,84)"></circle>
+  <circle r="14" z="940" transform="translate(27,15)"></circle>
+  <circle r="14" z="842" transform="translate(34,99)"></circle>
+  <circle r="14" z="996" transform="translate(-86,113)"></circle>
+  <circle r="14" z="930" transform="translate(0,55)"></circle>
+  <circle r="14" z="960" transform="translate(-119,72)"></circle>
+  <circle r="14" z="1003" transform="translate(-72,167)"></circle>
+  <circle r="14" z="896" transform="translate(135,38)"></circle>
+  <circle r="14" z="817" transform="translate(58,25)"></circle>
+  <circle r="14" z="805" transform="translate(99,50)"></circle>
+  <circle r="14" z="895" transform="translate(81,89)"></circle>
+  <circle r="14" z="888" transform="translate(71,-63)"></circle>
+  <circle r="14" z="1002" transform="translate(-72,179)"></circle>
+  <circle r="14" z="852" transform="translate(76,299)"></circle>
+  <circle r="14" z="926" transform="translate(-123,64)"></circle>
+  <circle r="14" z="850" transform="translate(76,181)"></circle>
+  <circle r="14" z="797" transform="translate(234,-231)"></circle>
+  <circle r="14" z="988" transform="translate(-72,-81)"></circle>
+  <circle r="14" z="955" transform="translate(-87,288)"></circle>
+  <circle r="14" z="942" transform="translate(-144,-80)"></circle>
+  <circle r="14" z="778" transform="translate(308,-134)"></circle>
+  <circle r="14" z="987" transform="translate(-50,63)"></circle>
+  <circle r="14" z="940" transform="translate(-84,68)"></circle>
+  <circle r="14" z="950" transform="translate(-47,36)"></circle>
+  <circle r="14" z="851" transform="translate(1,-0)"></circle>
+  <circle r="14" z="907" transform="translate(107,10)"></circle>
+  <circle r="14" z="795" transform="translate(256,-45)"></circle>
+  <circle r="14" z="789" transform="translate(199,-242)"></circle>
+  <circle r="14" z="812" transform="translate(262,-224)"></circle>
+  <circle r="14" z="932" transform="translate(-145,-68)"></circle>
+  <circle r="14" z="920" transform="translate(-118,-86)"></circle>
+  <circle r="14" z="960" transform="translate(-104,269)"></circle>
+  <circle r="14" z="771" transform="translate(326,-135)"></circle>
+  <circle r="14" z="871" transform="translate(129,147)"></circle>
+  <circle r="14" z="898" transform="translate(25,94)"></circle>
+  <circle r="14" z="874" transform="translate(36,-73)"></circle>
+  <circle r="14" z="815" transform="translate(154,-51)"></circle>
+  <circle r="14" z="903" transform="translate(161,322)"></circle>
+  <circle r="14" z="940" transform="translate(-65,26)"></circle>
+  <circle r="14" z="887" transform="translate(-73,18)"></circle>
+  <circle r="14" z="994" transform="translate(-64,89)"></circle>
+  <circle r="14" z="858" transform="translate(-4,-19)"></circle>
+  <circle r="14" z="831" transform="translate(24,63)"></circle>
+  <circle r="14" z="845" transform="translate(23,88)"></circle>
+  <circle r="14" z="968" transform="translate(-128,196)"></circle>
+  <circle r="14" z="851" transform="translate(67,120)"></circle>
+  <circle r="14" z="899" transform="translate(9,-92)"></circle>
+  <circle r="14" z="962" transform="translate(-107,99)"></circle>
+  <circle r="14" z="982" transform="translate(-138,-64)"></circle>
+  <circle r="14" z="962" transform="translate(-116,142)"></circle>
+  <circle r="14" z="847" transform="translate(89,236)"></circle>
+  <circle r="14" z="788" transform="translate(210,-232)"></circle>
+  <circle r="14" z="983" transform="translate(-42,73)"></circle>
+  <circle r="14" z="864" transform="translate(230,-368)"></circle>
+  <circle r="14" z="823" transform="translate(225,37)"></circle>
+  <circle r="14" z="868" transform="translate(164,144)"></circle>
+  <circle r="14" z="970" transform="translate(-141,120)"></circle>
+  <circle r="14" z="818" transform="translate(196,-96)"></circle>
+  <circle r="14" z="818" transform="translate(245,-256)"></circle>
+  <circle r="14" z="866" transform="translate(223,-380)"></circle>
+  <circle r="14" z="963" transform="translate(-148,-19)"></circle>
+  <circle r="14" z="853" transform="translate(76,258)"></circle>
+  <circle r="14" z="987" transform="translate(-68,-6)"></circle>
+  <circle r="14" z="809" transform="translate(244,2)"></circle>
+  <circle r="14" z="947" transform="translate(-4,-91)"></circle>
+  <circle r="14" z="835" transform="translate(51,145)"></circle>
+  <circle r="14" z="897" transform="translate(145,325)"></circle>
+  <circle r="14" z="832" transform="translate(114,-60)"></circle>
+  <circle r="14" z="813" transform="translate(248,-235)"></circle>
+  <circle r="14" z="966" transform="translate(-109,229)"></circle>
+  <circle r="14" z="781" transform="translate(210,-184)"></circle>
+  <circle r="14" z="798" transform="translate(172,-256)"></circle>
+  <circle r="14" z="901" transform="translate(88,-38)"></circle>
+  <circle r="14" z="967" transform="translate(0,-4)"></circle>
+  <circle r="14" z="908" transform="translate(-123,-27)"></circle>
+  <circle r="14" z="784" transform="translate(137,-286)"></circle>
+  <circle r="14" z="848" transform="translate(79,152)"></circle>
+  <circle r="14" z="968" transform="translate(-139,126)"></circle>
+  <circle r="14" z="790" transform="translate(193,-209)"></circle>
+  <circle r="14" z="811" transform="translate(243,-37)"></circle>
+  <circle r="14" z="797" transform="translate(177,68)"></circle>
+  <circle r="14" z="808" transform="translate(83,75)"></circle>
+  <circle r="14" z="880" transform="translate(-12,-66)"></circle>
+  <circle r="14" z="962" transform="translate(-17,51)"></circle>
+  <circle r="14" z="819" transform="translate(153,-57)"></circle>
+  <circle r="14" z="899" transform="translate(-44,65)"></circle>
+  <circle r="14" z="888" transform="translate(-39,71)"></circle>
+  <circle r="14" z="943" transform="translate(-152,-31)"></circle>
+  <circle r="14" z="838" transform="translate(60,200)"></circle>
+  <circle r="14" z="855" transform="translate(197,58)"></circle>
+  <circle r="14" z="994" transform="translate(-60,147)"></circle>
+  <circle r="14" z="840" transform="translate(209,45)"></circle>
+  <circle r="14" z="915" transform="translate(-101,61)"></circle>
+  <circle r="14" z="793" transform="translate(185,42)"></circle>
+  <circle r="14" z="886" transform="translate(142,-12)"></circle>
+  <circle r="14" z="780" transform="translate(288,-196)"></circle>
+  <circle r="14" z="1002" transform="translate(-62,161)"></circle>
+  <circle r="14" z="896" transform="translate(146,328)"></circle>
+  <circle r="14" z="1001" transform="translate(-60,162)"></circle>
+  <circle r="14" z="870" transform="translate(32,109)"></circle>
+  <circle r="14" z="810" transform="translate(127,-21)"></circle>
+  <circle r="14" z="812" transform="translate(250,-215)"></circle>
+  <circle r="14" z="949" transform="translate(-151,-55)"></circle>
+  <circle r="14" z="797" transform="translate(231,-232)"></circle>
+  <circle r="14" z="850" transform="translate(89,225)"></circle>
+  <circle r="14" z="974" transform="translate(-11,-36)"></circle>
+  <circle r="14" z="969" transform="translate(-84,10)"></circle>
+  <circle r="14" z="892" transform="translate(25,-85)"></circle>
+  <circle r="14" z="962" transform="translate(-149,-39)"></circle>
+  <circle r="14" z="797" transform="translate(246,-228)"></circle>
+  <circle r="14" z="833" transform="translate(67,192)"></circle>
+  <circle r="14" z="958" transform="translate(-135,3)"></circle>
+  <circle r="14" z="848" transform="translate(188,89)"></circle>
+  <circle r="14" z="899" transform="translate(150,288)"></circle>
+  <circle r="14" z="969" transform="translate(-113,271)"></circle>
+  <circle r="14" z="797" transform="translate(214,-223)"></circle>
+  <circle r="14" z="986" transform="translate(-48,68)"></circle>
+  <circle r="14" z="803" transform="translate(235,33)"></circle>
+  <circle r="14" z="953" transform="translate(-34,51)"></circle>
+  <circle r="14" z="789" transform="translate(103,-348)"></circle>
+  <circle r="14" z="887" transform="translate(-19,87)"></circle>
+  <circle r="14" z="822" transform="translate(83,-30)"></circle>
+  <circle r="14" z="809" transform="translate(195,91)"></circle>
+  <circle r="14" z="828" transform="translate(49,109)"></circle>
+  <circle r="14" z="994" transform="translate(-86,115)"></circle>
+  <circle r="14" z="981" transform="translate(-35,-82)"></circle>
+  <circle r="14" z="979" transform="translate(-63,-109)"></circle>
+  <circle r="14" z="784" transform="translate(213,-46)"></circle>
+  <circle r="14" z="1005" transform="translate(-58,231)"></circle>
+  <circle r="14" z="963" transform="translate(-115,168)"></circle>
+  <circle r="14" z="961" transform="translate(-114,10)"></circle>
+  <circle r="14" z="826" transform="translate(88,168)"></circle>
+  <circle r="14" z="809" transform="translate(167,-61)"></circle>
+  <circle r="14" z="837" transform="translate(76,-57)"></circle>
+  <circle r="14" z="917" transform="translate(37,-73)"></circle>
+  <circle r="14" z="851" transform="translate(34,-45)"></circle>
+  <circle r="14" z="963" transform="translate(-53,-123)"></circle>
+  <circle r="14" z="847" transform="translate(-0,29)"></circle>
+  <circle r="14" z="836" transform="translate(75,230)"></circle>
+  <circle r="14" z="802" transform="translate(154,85)"></circle>
+  <circle r="14" z="811" transform="translate(110,-6)"></circle>
+  <circle r="14" z="987" transform="translate(-136,-61)"></circle>
+  <circle r="14" z="956" transform="translate(-20,58)"></circle>
+  <circle r="14" z="775" transform="translate(235,-130)"></circle>
+  <circle r="14" z="908" transform="translate(-64,55)"></circle>
+  <circle r="14" z="866" transform="translate(-37,48)"></circle>
+  <circle r="14" z="796" transform="translate(190,-138)"></circle>
+  <circle r="14" z="853" transform="translate(251,-312)"></circle>
+  <circle r="14" z="956" transform="translate(-129,13)"></circle>
+  <circle r="14" z="831" transform="translate(124,135)"></circle>
+  <circle r="14" z="862" transform="translate(-34,19)"></circle>
+  <circle r="14" z="938" transform="translate(-145,4)"></circle>
+  <circle r="14" z="792" transform="translate(287,-141)"></circle>
+  <circle r="14" z="835" transform="translate(73,222)"></circle>
+  <circle r="14" z="929" transform="translate(-0,57)"></circle>
+  <circle r="14" z="998" transform="translate(-58,156)"></circle>
+  <circle r="14" z="989" transform="translate(-65,-25)"></circle>
+  <circle r="14" z="810" transform="translate(154,-43)"></circle>
+  <circle r="14" z="862" transform="translate(25,106)"></circle>
+  <circle r="14" z="809" transform="translate(205,-210)"></circle>
+  <circle r="14" z="963" transform="translate(-92,268)"></circle>
+  <circle r="14" z="914" transform="translate(-27,69)"></circle>
+  <circle r="14" z="800" transform="translate(233,31)"></circle>
+  <circle r="14" z="855" transform="translate(-20,26)"></circle>
+  <circle r="14" z="968" transform="translate(-117,102)"></circle>
+  <circle r="14" z="987" transform="translate(-106,-79)"></circle>
+  <circle r="14" z="907" transform="translate(-120,-20)"></circle>
+  <circle r="14" z="938" transform="translate(-98,96)"></circle>
+  <circle r="14" z="784" transform="translate(250,-85)"></circle>
+  <circle r="14" z="950" transform="translate(-65,-126)"></circle>
+  <circle r="14" z="879" transform="translate(127,171)"></circle>
+  <circle r="14" z="862" transform="translate(235,-409)"></circle>
+  <circle r="14" z="847" transform="translate(47,112)"></circle>
+  <circle r="14" z="771" transform="translate(279,-174)"></circle>
+  <circle r="14" z="978" transform="translate(-121,-38)"></circle>
+  <circle r="14" z="1001" transform="translate(-26,245)"></circle>
+  <circle r="14" z="977" transform="translate(-120,219)"></circle>
+  <circle r="14" z="963" transform="translate(-117,168)"></circle>
+  <circle r="14" z="994" transform="translate(-37,236)"></circle>
+  <circle r="14" z="783" transform="translate(179,-256)"></circle>
+  <circle r="14" z="975" transform="translate(-124,187)"></circle>
+  <circle r="14" z="776" transform="translate(303,-130)"></circle>
+  <circle r="14" z="845" transform="translate(90,181)"></circle>
+  <circle r="14" z="950" transform="translate(-45,-119)"></circle>
+  <circle r="14" z="923" transform="translate(-105,74)"></circle>
+  <circle r="14" z="795" transform="translate(161,31)"></circle>
+  <circle r="14" z="898" transform="translate(30,-83)"></circle>
+  <circle r="14" z="847" transform="translate(19,-16)"></circle>
+  <circle r="14" z="968" transform="translate(-5,-69)"></circle>
+  <circle r="14" z="926" transform="translate(70,11)"></circle>
+  <circle r="14" z="859" transform="translate(63,117)"></circle>
+  <circle r="14" z="990" transform="translate(-87,-27)"></circle>
+  <circle r="14" z="927" transform="translate(19,-79)"></circle>
+  <circle r="14" z="890" transform="translate(-48,-62)"></circle>
+  <circle r="14" z="858" transform="translate(65,351)"></circle>
+  <circle r="14" z="876" transform="translate(173,55)"></circle>
+  <circle r="14" z="861" transform="translate(244,-384)"></circle>
+  <circle r="14" z="841" transform="translate(13,17)"></circle>
+  <circle r="14" z="830" transform="translate(175,114)"></circle>
+  <circle r="14" z="931" transform="translate(-80,71)"></circle>
+  <circle r="14" z="794" transform="translate(189,-121)"></circle>
+  <circle r="14" z="790" transform="translate(295,-147)"></circle>
+  <circle r="14" z="966" transform="translate(-90,8)"></circle>
+  <circle r="14" z="961" transform="translate(-45,61)"></circle>
+  <circle r="14" z="786" transform="translate(191,-224)"></circle>
+  <circle r="14" z="920" transform="translate(-70,60)"></circle>
+  <circle r="14" z="935" transform="translate(-47,-119)"></circle>
+  <circle r="14" z="829" transform="translate(240,-275)"></circle>
+  <circle r="14" z="905" transform="translate(-110,-50)"></circle>
+  <circle r="14" z="848" transform="translate(7,1)"></circle>
+  <circle r="14" z="817" transform="translate(257,-243)"></circle>
+  <circle r="14" z="984" transform="translate(-111,-89)"></circle>
+  <circle r="14" z="803" transform="translate(228,-236)"></circle>
+  <circle r="14" z="963" transform="translate(-133,137)"></circle>
+  <circle r="14" z="926" transform="translate(-46,44)"></circle>
+  <circle r="14" z="829" transform="translate(216,60)"></circle>
+  <circle r="14" z="951" transform="translate(-11,-96)"></circle>
+  <circle r="14" z="820" transform="translate(206,91)"></circle>
+  <circle r="14" z="806" transform="translate(249,-26)"></circle>
+  <circle r="14" z="789" transform="translate(204,22)"></circle>
+  <circle r="14" z="861" transform="translate(157,-46)"></circle>
+  <circle r="14" z="1000" transform="translate(-24,250)"></circle>
+  <circle r="14" z="941" transform="translate(38,-14)"></circle>
+  <circle r="14" z="906" transform="translate(-87,45)"></circle>
+  <circle r="14" z="822" transform="translate(237,-267)"></circle>
+  <circle r="14" z="862" transform="translate(79,343)"></circle>
+  <circle r="14" z="977" transform="translate(-50,88)"></circle>
+  <circle r="14" z="831" transform="translate(218,31)"></circle>
+  <circle r="14" z="788" transform="translate(228,-221)"></circle>
+  <circle r="14" z="823" transform="translate(227,8)"></circle>
+  <circle r="14" z="959" transform="translate(-137,94)"></circle>
+  <circle r="14" z="884" transform="translate(158,101)"></circle>
+  <circle r="14" z="801" transform="translate(250,-215)"></circle>
+  <circle r="14" z="862" transform="translate(181,91)"></circle>
+  <circle r="14" z="1000" transform="translate(-71,194)"></circle>
+  <circle r="14" z="887" transform="translate(124,90)"></circle>
+  <circle r="14" z="841" transform="translate(14,10)"></circle>
+  <circle r="14" z="911" transform="translate(-125,-11)"></circle>
+  <circle r="14" z="934" transform="translate(-64,-122)"></circle>
+  <circle r="14" z="800" transform="translate(224,-236)"></circle>
+  <circle r="14" z="792" transform="translate(230,13)"></circle>
+  <circle r="14" z="847" transform="translate(0,25)"></circle>
+  <circle r="14" z="790" transform="translate(212,-223)"></circle>
+  <circle r="14" z="845" transform="translate(64,254)"></circle>
+  <circle r="14" z="953" transform="translate(-152,-44)"></circle>
+  <circle r="14" z="878" transform="translate(119,117)"></circle>
+  <circle r="14" z="868" transform="translate(159,-35)"></circle>
+  <circle r="14" z="932" transform="translate(58,-1)"></circle>
+  <circle r="14" z="786" transform="translate(253,-220)"></circle>
+  <circle r="14" z="960" transform="translate(-0,-79)"></circle>
+  <circle r="14" z="887" transform="translate(73,-63)"></circle>
+  <circle r="14" z="883" transform="translate(45,106)"></circle>
+  <circle r="14" z="935" transform="translate(-145,-78)"></circle>
+  <circle r="14" z="967" transform="translate(-113,108)"></circle>
+  <circle r="14" z="860" transform="translate(194,56)"></circle>
+  <circle r="14" z="801" transform="translate(273,-218)"></circle>
+  <circle r="14" z="826" transform="translate(225,-271)"></circle>
+  <circle r="14" z="828" transform="translate(222,27)"></circle>
+  <circle r="14" z="834" transform="translate(214,42)"></circle>
+  <circle r="14" z="818" transform="translate(179,-81)"></circle>
+  <circle r="14" z="928" transform="translate(50,40)"></circle>
+  <circle r="14" z="993" transform="translate(-77,143)"></circle>
+  <circle r="14" z="788" transform="translate(210,-224)"></circle>
+  <circle r="14" z="937" transform="translate(-127,64)"></circle>
+  <circle r="14" z="821" transform="translate(218,-59)"></circle>
+  <circle r="14" z="957" transform="translate(-56,42)"></circle>
+  <circle r="14" z="970" transform="translate(-132,98)"></circle>
+  <circle r="14" z="885" transform="translate(24,103)"></circle>
+  <circle r="14" z="954" transform="translate(-116,57)"></circle>
+  <circle r="14" z="879" transform="translate(3,-70)"></circle>
+  <circle r="14" z="855" transform="translate(175,105)"></circle>
+  <circle r="14" z="919" transform="translate(-120,48)"></circle>
+  <circle r="14" z="934" transform="translate(-147,-48)"></circle>
+  <circle r="14" z="897" transform="translate(105,-25)"></circle>
+  <circle r="14" z="911" transform="translate(-113,-67)"></circle>
+  <circle r="14" z="818" transform="translate(76,124)"></circle>
+  <circle r="14" z="991" transform="translate(-93,-39)"></circle>
+  <circle r="14" z="831" transform="translate(170,-61)"></circle>
+  <circle r="14" z="784" transform="translate(129,-299)"></circle>
+  <circle r="14" z="952" transform="translate(-123,113)"></circle>
+  <circle r="14" z="980" transform="translate(-43,76)"></circle>
+  <circle r="14" z="860" transform="translate(79,349)"></circle>
+  <circle r="14" z="856" transform="translate(71,263)"></circle>
+  <circle r="14" z="858" transform="translate(193,18)"></circle>
+  <circle r="14" z="983" transform="translate(-45,23)"></circle>
+  <circle r="14" z="823" transform="translate(228,1)"></circle>
+  <circle r="14" z="820" transform="translate(216,-76)"></circle>
+  <circle r="14" z="923" transform="translate(-139,-55)"></circle>
+  <circle r="14" z="798" transform="translate(271,-128)"></circle>
+  <circle r="14" z="963" transform="translate(-147,-59)"></circle>
+  <circle r="14" z="805" transform="translate(142,-14)"></circle>
+  <circle r="14" z="816" transform="translate(243,-208)"></circle>
+  <circle r="14" z="948" transform="translate(-110,108)"></circle>
+  <circle r="14" z="909" transform="translate(-113,23)"></circle>
+  <circle r="14" z="882" transform="translate(125,138)"></circle>
+  <circle r="14" z="932" transform="translate(55,19)"></circle>
+  <circle r="14" z="969" transform="translate(-50,76)"></circle>
+  <circle r="14" z="789" transform="translate(109,-326)"></circle>
+  <circle r="14" z="804" transform="translate(102,43)"></circle>
+  <circle r="14" z="878" transform="translate(40,108)"></circle>
+  <circle r="14" z="988" transform="translate(-51,77)"></circle>
+  <circle r="14" z="824" transform="translate(57,128)"></circle>
+  <circle r="14" z="909" transform="translate(19,86)"></circle>
+  <circle r="14" z="949" transform="translate(-127,62)"></circle>
+  <circle r="14" z="939" transform="translate(-27,32)"></circle>
+  <circle r="14" z="956" transform="translate(-45,52)"></circle>
+  <circle r="14" z="847" transform="translate(9,6)"></circle>
+  <circle r="14" z="851" transform="translate(70,300)"></circle>
+  <circle r="14" z="842" transform="translate(196,-20)"></circle>
+  <circle r="14" z="908" transform="translate(-8,82)"></circle>
+  <circle r="14" z="929" transform="translate(-37,46)"></circle>
+  <circle r="14" z="818" transform="translate(216,-91)"></circle>
+  <circle r="14" z="969" transform="translate(-113,156)"></circle>
+  <circle r="14" z="838" transform="translate(211,24)"></circle>
+  <circle r="14" z="991" transform="translate(-73,149)"></circle>
+  <circle r="14" z="807" transform="translate(86,-376)"></circle>
+  <circle r="14" z="884" transform="translate(-70,-8)"></circle>
+  <circle r="14" z="864" transform="translate(74,362)"></circle>
+  <circle r="14" z="777" transform="translate(239,-118)"></circle>
+  <circle r="14" z="811" transform="translate(248,-231)"></circle>
+  <circle r="14" z="810" transform="translate(219,-223)"></circle>
+  <circle r="14" z="943" transform="translate(36,-28)"></circle>
+  <circle r="14" z="880" transform="translate(-50,-34)"></circle>
+  <circle r="14" z="830" transform="translate(51,131)"></circle>
+  <circle r="14" z="858" transform="translate(-25,56)"></circle>
+  <circle r="14" z="953" transform="translate(-93,-127)"></circle>
+  <circle r="14" z="934" transform="translate(-131,47)"></circle>
+  <circle r="14" z="825" transform="translate(258,-267)"></circle>
+  <circle r="14" z="972" transform="translate(-68,39)"></circle>
+  <circle r="14" z="841" transform="translate(176,-46)"></circle>
+  <circle r="14" z="976" transform="translate(-124,205)"></circle>
+  <circle r="14" z="818" transform="translate(146,120)"></circle>
+  <circle r="14" z="927" transform="translate(58,-30)"></circle>
+  <circle r="14" z="787" transform="translate(198,-101)"></circle>
+  <circle r="14" z="801" transform="translate(270,-220)"></circle>
+  <circle r="14" z="839" transform="translate(181,-44)"></circle>
+  <circle r="14" z="961" transform="translate(-137,-5)"></circle>
+  <circle r="14" z="986" transform="translate(-51,45)"></circle>
+  <circle r="14" z="844" transform="translate(54,161)"></circle>
+  <circle r="14" z="917" transform="translate(-128,-73)"></circle>
+  <circle r="14" z="942" transform="translate(-74,32)"></circle>
+  <circle r="14" z="830" transform="translate(25,66)"></circle>
+  <circle r="14" z="791" transform="translate(192,35)"></circle>
+  <circle r="14" z="1006" transform="translate(-59,189)"></circle>
+  <circle r="14" z="994" transform="translate(-63,83)"></circle>
+  <circle r="14" z="879" transform="translate(123,140)"></circle>
+  <circle r="14" z="800" transform="translate(136,42)"></circle>
+  <circle r="14" z="786" transform="translate(106,-349)"></circle>
+  <circle r="14" z="933" transform="translate(26,42)"></circle>
+  <circle r="14" z="965" transform="translate(-146,-58)"></circle>
+  <circle r="14" z="804" transform="translate(121,81)"></circle>
+  <circle r="14" z="961" transform="translate(-19,55)"></circle>
+  <circle r="14" z="924" transform="translate(-139,-59)"></circle>
+  <circle r="14" z="953" transform="translate(-92,-127)"></circle>
+  <circle r="14" z="885" transform="translate(126,119)"></circle>
+  <circle r="14" z="838" transform="translate(86,-62)"></circle>
+  <circle r="14" z="823" transform="translate(244,-257)"></circle>
+  <circle r="14" z="844" transform="translate(139,-64)"></circle>
+  <circle r="14" z="804" transform="translate(151,-271)"></circle>
+  <circle r="14" z="1000" transform="translate(-72,104)"></circle>
+  <circle r="14" z="878" transform="translate(170,61)"></circle>
+  <circle r="14" z="807" transform="translate(186,-122)"></circle>
+  <circle r="14" z="980" transform="translate(-49,84)"></circle>
+  <circle r="14" z="818" transform="translate(233,-23)"></circle>
+  <circle r="14" z="943" transform="translate(-129,61)"></circle>
+  <circle r="14" z="980" transform="translate(-128,-61)"></circle>
+  <circle r="14" z="890" transform="translate(113,75)"></circle>
+  <circle r="14" z="834" transform="translate(90,213)"></circle>
+  <circle r="14" z="821" transform="translate(89,-32)"></circle>
+  <circle r="14" z="864" transform="translate(149,142)"></circle>
+  <circle r="14" z="887" transform="translate(135,136)"></circle>
+  <circle r="14" z="890" transform="translate(1,-84)"></circle>
+  <circle r="14" z="889" transform="translate(-82,5)"></circle>
+  <circle r="14" z="849" transform="translate(1,13)"></circle>
+  <circle r="14" z="859" transform="translate(157,127)"></circle>
+  <circle r="14" z="788" transform="translate(193,-38)"></circle>
+  <circle r="14" z="857" transform="translate(-25,33)"></circle>
+  <circle r="14" z="993" transform="translate(-63,71)"></circle>
+  <circle r="14" z="975" transform="translate(-14,-23)"></circle>
+  <circle r="14" z="782" transform="translate(296,-131)"></circle>
+  <circle r="14" z="959" transform="translate(-111,-117)"></circle>
+  <circle r="14" z="781" transform="translate(295,-190)"></circle>
+  <circle r="14" z="787" transform="translate(143,-275)"></circle>
+  <circle r="14" z="968" transform="translate(-130,176)"></circle>
+  <circle r="14" z="874" transform="translate(67,-73)"></circle>
+  <circle r="14" z="895" transform="translate(131,259)"></circle>
+  <circle r="14" z="800" transform="translate(243,5)"></circle>
+  <circle r="14" z="878" transform="translate(161,-9)"></circle>
+  <circle r="14" z="844" transform="translate(149,-60)"></circle>
+  <circle r="14" z="906" transform="translate(132,298)"></circle>
+  <circle r="14" z="946" transform="translate(-70,-127)"></circle>
+  <circle r="14" z="863" transform="translate(136,135)"></circle>
+  <circle r="14" z="895" transform="translate(-100,-13)"></circle>
+  <circle r="14" z="767" transform="translate(331,-166)"></circle>
+  <circle r="14" z="905" transform="translate(61,83)"></circle>
+  <circle r="14" z="830" transform="translate(64,174)"></circle>
+  <circle r="14" z="1000" transform="translate(-30,238)"></circle>
+  <circle r="14" z="884" transform="translate(125,174)"></circle>
+  <circle r="14" z="933" transform="translate(-12,47)"></circle>
+  <circle r="14" z="996" transform="translate(-62,206)"></circle>
+  <circle r="14" z="873" transform="translate(174,103)"></circle>
+  <circle r="14" z="848" transform="translate(68,281)"></circle>
+  <circle r="14" z="857" transform="translate(248,-328)"></circle>
+  <circle r="14" z="848" transform="translate(202,62)"></circle>
+  <circle r="14" z="959" transform="translate(-147,-72)"></circle>
+  <circle r="14" z="934" transform="translate(-115,-108)"></circle>
+  <circle r="14" z="965" transform="translate(-144,-73)"></circle>
+  <circle r="14" z="981" transform="translate(-34,-76)"></circle>
+  <circle r="14" z="805" transform="translate(227,-233)"></circle>
+  <circle r="14" z="894" transform="translate(-49,61)"></circle>
+  <circle r="14" z="919" transform="translate(-101,67)"></circle>
+  <circle r="14" z="949" transform="translate(-17,-103)"></circle>
+  <circle r="14" z="979" transform="translate(-73,94)"></circle>
+  <circle r="14" z="966" transform="translate(-111,112)"></circle>
+  <circle r="14" z="913" transform="translate(-63,53)"></circle>
+  <circle r="14" z="967" transform="translate(-92,266)"></circle>
+  <circle r="14" z="817" transform="translate(105,-29)"></circle>
+  <circle r="14" z="967" transform="translate(-114,141)"></circle>
+  <circle r="14" z="837" transform="translate(37,104)"></circle>
+  <circle r="14" z="786" transform="translate(225,-14)"></circle>
+  <circle r="14" z="972" transform="translate(-69,67)"></circle>
+  <circle r="14" z="817" transform="translate(113,124)"></circle>
+  <circle r="14" z="954" transform="translate(-24,53)"></circle>
+  <circle r="14" z="940" transform="translate(-40,-116)"></circle>
+  <circle r="14" z="999" transform="translate(-74,88)"></circle>
+  <circle r="14" z="969" transform="translate(-132,-28)"></circle>
+  <circle r="14" z="886" transform="translate(127,102)"></circle>
+  <circle r="14" z="806" transform="translate(244,2)"></circle>
+  <circle r="14" z="873" transform="translate(-46,-9)"></circle>
+  <circle r="14" z="914" transform="translate(-31,-106)"></circle>
+  <circle r="14" z="969" transform="translate(-119,-109)"></circle>
+  <circle r="14" z="943" transform="translate(-38,31)"></circle>
+  <circle r="14" z="843" transform="translate(204,71)"></circle>
+  <circle r="14" z="874" transform="translate(130,157)"></circle>
+  <circle r="14" z="974" transform="translate(-54,-116)"></circle>
+  <circle r="14" z="839" transform="translate(47,133)"></circle>
+  <circle r="14" z="841" transform="translate(145,-63)"></circle>
+  <circle r="14" z="804" transform="translate(273,-195)"></circle>
+  <circle r="14" z="983" transform="translate(-39,59)"></circle>
+  <circle r="14" z="820" transform="translate(229,-33)"></circle>
+  <circle r="14" z="842" transform="translate(60,237)"></circle>
+  <circle r="14" z="824" transform="translate(226,14)"></circle>
+  <circle r="14" z="948" transform="translate(-152,-43)"></circle>
+  <circle r="14" z="852" transform="translate(77,292)"></circle>
+  <circle r="14" z="903" transform="translate(138,319)"></circle>
+  <circle r="14" z="833" transform="translate(255,-256)"></circle>
+  <circle r="14" z="991" transform="translate(-70,-32)"></circle>
+  <circle r="14" z="903" transform="translate(-111,-35)"></circle>
+  <circle r="14" z="981" transform="translate(-28,-12)"></circle>
+  <circle r="14" z="978" transform="translate(-66,19)"></circle>
+  <circle r="14" z="921" transform="translate(-92,-102)"></circle>
+  <circle r="14" z="814" transform="translate(260,-232)"></circle>
+  <circle r="14" z="888" transform="translate(134,231)"></circle>
+  <circle r="14" z="870" transform="translate(95,-69)"></circle>
+  <circle r="14" z="852" transform="translate(197,7)"></circle>
+  <circle r="14" z="907" transform="translate(-92,44)"></circle>
+  <circle r="14" z="809" transform="translate(214,-218)"></circle>
+  <circle r="14" z="906" transform="translate(20,-87)"></circle>
+  <circle r="14" z="987" transform="translate(-124,-77)"></circle>
+  <circle r="14" z="895" transform="translate(-59,-67)"></circle>
+  <circle r="14" z="932" transform="translate(-145,-43)"></circle>
+  <circle r="14" z="815" transform="translate(233,-187)"></circle>
+  <circle r="14" z="821" transform="translate(216,-55)"></circle>
+  <circle r="14" z="812" transform="translate(255,-234)"></circle>
+  <circle r="14" z="896" transform="translate(-59,-68)"></circle>
+  <circle r="14" z="858" transform="translate(246,-327)"></circle>
+  <circle r="14" z="785" transform="translate(240,-219)"></circle>
+  <circle r="14" z="921" transform="translate(-134,-3)"></circle>
+  <circle r="14" z="868" transform="translate(-19,-33)"></circle>
+  <circle r="14" z="1006" transform="translate(-44,225)"></circle>
+  <circle r="14" z="975" transform="translate(-117,259)"></circle>
+  <circle r="14" z="792" transform="translate(290,-190)"></circle>
+  <circle r="14" z="976" transform="translate(-71,49)"></circle>
+  <circle r="14" z="803" transform="translate(146,-7)"></circle>
+  <circle r="14" z="853" transform="translate(78,263)"></circle>
+  <circle r="14" z="864" transform="translate(190,37)"></circle>
+  <circle r="14" z="950" transform="translate(-47,-120)"></circle>
+  <circle r="14" z="963" transform="translate(-111,93)"></circle>
+  <circle r="14" z="794" transform="translate(288,-169)"></circle>
+  <circle r="14" z="856" transform="translate(13,-28)"></circle>
+  <circle r="14" z="825" transform="translate(171,117)"></circle>
+  <circle r="14" z="857" transform="translate(156,-51)"></circle>
+  <circle r="14" z="885" transform="translate(158,23)"></circle>
+  <circle r="14" z="981" transform="translate(-34,49)"></circle>
+  <circle r="14" z="843" transform="translate(200,-6)"></circle>
+  <circle r="14" z="771" transform="translate(283,-165)"></circle>
+  <circle r="14" z="939" transform="translate(38,-36)"></circle>
+  <circle r="14" z="851" transform="translate(173,108)"></circle>
+  <circle r="14" z="781" transform="translate(191,-239)"></circle>
+  <circle r="14" z="921" transform="translate(-1,69)"></circle>
+  <circle r="14" z="797" transform="translate(259,-225)"></circle>
+  <circle r="14" z="779" transform="translate(263,-208)"></circle>
+  <circle r="14" z="806" transform="translate(240,21)"></circle>
+  <circle r="14" z="990" transform="translate(-22,257)"></circle>
+  <circle r="14" z="893" transform="translate(136,52)"></circle>
+  <circle r="14" z="884" transform="translate(158,62)"></circle>
+  <circle r="14" z="946" transform="translate(32,-10)"></circle>
+  <circle r="14" z="811" transform="translate(243,-49)"></circle>
+  <circle r="14" z="803" transform="translate(255,-70)"></circle>
+  <circle r="14" z="898" transform="translate(-88,-50)"></circle>
+  <circle r="14" z="957" transform="translate(3,22)"></circle>
+  <circle r="14" z="879" transform="translate(154,201)"></circle>
+  <circle r="14" z="854" transform="translate(75,257)"></circle>
+  <circle r="14" z="849" transform="translate(152,-59)"></circle>
+  <circle r="14" z="873" transform="translate(57,-76)"></circle>
+  <circle r="14" z="864" transform="translate(-0,97)"></circle>
+  <circle r="14" z="895" transform="translate(-99,-22)"></circle>
+  <circle r="14" z="903" transform="translate(76,-48)"></circle>
+  <circle r="14" z="817" transform="translate(117,123)"></circle>
+  <circle r="14" z="923" transform="translate(-132,-79)"></circle>
+  <circle r="14" z="958" transform="translate(-69,20)"></circle>
+  <circle r="14" z="898" transform="translate(-102,-34)"></circle>
+  <circle r="14" z="832" transform="translate(208,83)"></circle>
+  <circle r="14" z="819" transform="translate(160,-64)"></circle>
+  <circle r="14" z="973" transform="translate(-128,207)"></circle>
+  <circle r="14" z="877" transform="translate(167,133)"></circle>
+  <circle r="14" z="981" transform="translate(-30,8)"></circle>
+  <circle r="14" z="939" transform="translate(-144,-81)"></circle>
+  <circle r="14" z="759" transform="translate(337,-162)"></circle>
+  <circle r="14" z="772" transform="translate(246,-140)"></circle>
+  <circle r="14" z="873" transform="translate(154,-34)"></circle>
+  <circle r="14" z="828" transform="translate(56,143)"></circle>
+  <circle r="14" z="892" transform="translate(144,262)"></circle>
+  <circle r="14" z="927" transform="translate(-125,56)"></circle>
+  <circle r="14" z="867" transform="translate(141,157)"></circle>
+  <circle r="14" z="776" transform="translate(257,-206)"></circle>
+  <circle r="14" z="774" transform="translate(235,-161)"></circle>
+  <circle r="14" z="951" transform="translate(-146,-73)"></circle>
+  <circle r="14" z="814" transform="translate(66,32)"></circle>
+  <circle r="14" z="794" transform="translate(166,6)"></circle>
+  <circle r="14" z="772" transform="translate(252,-187)"></circle>
+  <circle r="14" z="853" transform="translate(-16,30)"></circle>
+  <circle r="14" z="780" transform="translate(286,-125)"></circle>
+  <circle r="14" z="898" transform="translate(158,338)"></circle>
+  <circle r="14" z="800" transform="translate(177,82)"></circle>
+  <circle r="14" z="969" transform="translate(-8,28)"></circle>
+  <circle r="14" z="958" transform="translate(-97,286)"></circle>
+  <circle r="14" z="896" transform="translate(113,-21)"></circle>
+  <circle r="14" z="919" transform="translate(54,63)"></circle>
+  <circle r="14" z="822" transform="translate(119,-47)"></circle>
+  <circle r="14" z="901" transform="translate(59,91)"></circle>
+  <circle r="14" z="808" transform="translate(103,94)"></circle>
+  <circle r="14" z="812" transform="translate(251,-207)"></circle>
+  <circle r="14" z="986" transform="translate(-75,-88)"></circle>
+  <circle r="14" z="788" transform="translate(204,8)"></circle>
+  <circle r="14" z="910" transform="translate(-116,-60)"></circle>
+  <circle r="14" z="899" transform="translate(-19,87)"></circle>
+  <circle r="14" z="788" transform="translate(162,-270)"></circle>
+  <circle r="14" z="876" transform="translate(119,120)"></circle>
+  <circle r="14" z="902" transform="translate(-60,50)"></circle>
+  <circle r="14" z="834" transform="translate(86,-57)"></circle>
+  <circle r="14" z="861" transform="translate(60,-68)"></circle>
+  <circle r="14" z="816" transform="translate(116,122)"></circle>
+  <circle r="14" z="968" transform="translate(-134,155)"></circle>
+  <circle r="14" z="877" transform="translate(19,105)"></circle>
+  <circle r="14" z="1001" transform="translate(-47,210)"></circle>
+  <circle r="14" z="907" transform="translate(151,327)"></circle>
+  <circle r="14" z="969" transform="translate(-105,277)"></circle>
+  <circle r="14" z="996" transform="translate(-52,213)"></circle>
+  <circle r="14" z="915" transform="translate(70,-41)"></circle>
+  <circle r="14" z="834" transform="translate(20,27)"></circle>
+  <circle r="14" z="783" transform="translate(229,-42)"></circle>
+  <circle r="14" z="964" transform="translate(-132,81)"></circle>
+  <circle r="14" z="811" transform="translate(173,-76)"></circle>
+  <circle r="14" z="905" transform="translate(-59,51)"></circle>
+  <circle r="14" z="844" transform="translate(167,113)"></circle>
+  <circle r="14" z="816" transform="translate(57,64)"></circle>
+  <circle r="14" z="802" transform="translate(185,-118)"></circle>
+  <circle r="14" z="803" transform="translate(274,-175)"></circle>
+  <circle r="14" z="978" transform="translate(-64,-110)"></circle>
+  <circle r="14" z="917" transform="translate(-38,59)"></circle>
+  <circle r="14" z="803" transform="translate(184,85)"></circle>
+  <circle r="14" z="990" transform="translate(-31,249)"></circle>
+  <circle r="14" z="832" transform="translate(96,185)"></circle>
+  <circle r="14" z="981" transform="translate(-76,95)"></circle>
+  <circle r="14" z="999" transform="translate(-72,185)"></circle>
+  <circle r="14" z="872" transform="translate(133,160)"></circle>
+  <circle r="14" z="891" transform="translate(-22,-79)"></circle>
+  <circle r="14" z="857" transform="translate(-20,13)"></circle>
+  <circle r="14" z="818" transform="translate(99,-28)"></circle>
+  <circle r="14" z="813" transform="translate(242,-155)"></circle>
+  <circle r="14" z="973" transform="translate(-139,-64)"></circle>
+  <circle r="14" z="809" transform="translate(263,-163)"></circle>
+  <circle r="14" z="817" transform="translate(224,-90)"></circle>
+  <circle r="14" z="895" transform="translate(100,80)"></circle>
+  <circle r="14" z="955" transform="translate(-52,45)"></circle>
+  <circle r="14" z="964" transform="translate(-44,66)"></circle>
+  <circle r="14" z="927" transform="translate(46,-53)"></circle>
+  <circle r="14" z="831" transform="translate(73,194)"></circle>
+  <circle r="14" z="933" transform="translate(-125,70)"></circle>
+  <circle r="14" z="828" transform="translate(221,32)"></circle>
+  <circle r="14" z="809" transform="translate(180,-96)"></circle>
+  <circle r="14" z="800" transform="translate(142,11)"></circle>
+  <circle r="14" z="891" transform="translate(139,2)"></circle>
+  <circle r="14" z="772" transform="translate(289,-170)"></circle>
+  <circle r="14" z="931" transform="translate(32,-63)"></circle>
+  <circle r="14" z="952" transform="translate(-152,-46)"></circle>
+  <circle r="14" z="830" transform="translate(206,-39)"></circle>
+  <circle r="14" z="832" transform="translate(253,-241)"></circle>
+  <circle r="14" z="843" transform="translate(195,86)"></circle>
+  <circle r="14" z="779" transform="translate(183,-254)"></circle>
+  <circle r="14" z="886" transform="translate(148,-1)"></circle>
+  <circle r="14" z="900" transform="translate(-38,69)"></circle>
+  <circle r="14" z="910" transform="translate(4,84)"></circle>
+  <circle r="14" z="853" transform="translate(177,-25)"></circle>
+  <circle r="14" z="966" transform="translate(-114,236)"></circle>
+  <circle r="14" z="845" transform="translate(105,-73)"></circle>
+  <circle r="14" z="814" transform="translate(179,-92)"></circle>
+  <circle r="14" z="794" transform="translate(164,16)"></circle>
+  <circle r="14" z="927" transform="translate(-127,49)"></circle>
+  <circle r="14" z="887" transform="translate(72,101)"></circle>
+  <circle r="14" z="888" transform="translate(149,14)"></circle>
+  <circle r="14" z="961" transform="translate(11,-37)"></circle>
+  <circle r="14" z="878" transform="translate(154,198)"></circle>
+  <circle r="14" z="900" transform="translate(29,93)"></circle>
+  <circle r="14" z="884" transform="translate(-5,-74)"></circle>
+  <circle r="14" z="790" transform="translate(112,-363)"></circle>
+  <circle r="14" z="954" transform="translate(-57,35)"></circle>
+  <circle r="14" z="814" transform="translate(246,-184)"></circle>
+  <circle r="14" z="904" transform="translate(6,-93)"></circle>
+  <circle r="14" z="949" transform="translate(15,-67)"></circle>
+  <circle r="14" z="896" transform="translate(119,56)"></circle>
+  <circle r="14" z="946" transform="translate(-148,-6)"></circle>
+  <circle r="14" z="963" transform="translate(-82,279)"></circle>
+  <circle r="14" z="784" transform="translate(191,-235)"></circle>
+  <circle r="14" z="888" transform="translate(71,101)"></circle>
+  <circle r="14" z="834" transform="translate(90,207)"></circle>
+  <circle r="14" z="903" transform="translate(99,-18)"></circle>
+  <circle r="14" z="945" transform="translate(-97,-121)"></circle>
+  <circle r="14" z="987" transform="translate(-63,108)"></circle>
+  <circle r="14" z="806" transform="translate(92,58)"></circle>
+  <circle r="14" z="891" transform="translate(142,262)"></circle>
+  <circle r="14" z="836" transform="translate(27,-0)"></circle>
+  <circle r="14" z="826" transform="translate(36,79)"></circle>
+  <circle r="14" z="812" transform="translate(242,-57)"></circle>
+  <circle r="14" z="882" transform="translate(-41,65)"></circle>
+  <circle r="14" z="958" transform="translate(-128,-104)"></circle>
+  <circle r="14" z="886" transform="translate(6,100)"></circle>
+  <circle r="14" z="880" transform="translate(141,219)"></circle>
+  <circle r="14" z="802" transform="translate(178,88)"></circle>
+  <circle r="14" z="772" transform="translate(254,-169)"></circle>
+  <circle r="14" z="976" transform="translate(-15,-28)"></circle>
+  <circle r="14" z="884" transform="translate(1,98)"></circle>
+  <circle r="14" z="927" transform="translate(51,41)"></circle>
+  <circle r="14" z="983" transform="translate(-79,-96)"></circle>
+  <circle r="14" z="758" transform="translate(328,-130)"></circle>
+  <circle r="14" z="849" transform="translate(180,-28)"></circle>
+  <circle r="14" z="991" transform="translate(-92,-44)"></circle>
+  <circle r="14" z="798" transform="translate(200,65)"></circle>
+  <circle r="14" z="826" transform="translate(236,-259)"></circle>
+  <circle r="14" z="793" transform="translate(197,-197)"></circle>
+  <circle r="14" z="952" transform="translate(-77,17)"></circle>
+  <circle r="14" z="840" transform="translate(42,-33)"></circle>
+  <circle r="14" z="806" transform="translate(242,-223)"></circle>
+  <circle r="14" z="781" transform="translate(283,-199)"></circle>
+  <circle r="14" z="856" transform="translate(240,-338)"></circle>
+  <circle r="14" z="958" transform="translate(-115,67)"></circle>
+  <circle r="14" z="943" transform="translate(-151,-14)"></circle>
+  <circle r="14" z="982" transform="translate(-59,-102)"></circle>
+  <circle r="14" z="887" transform="translate(146,0)"></circle>
+  <circle r="14" z="849" transform="translate(87,217)"></circle>
+  <circle r="14" z="886" transform="translate(146,124)"></circle>
+  <circle r="14" z="928" transform="translate(21,-77)"></circle>
+  <circle r="14" z="969" transform="translate(-82,-119)"></circle>
+  <circle r="14" z="894" transform="translate(-96,-20)"></circle>
+  <circle r="14" z="807" transform="translate(236,37)"></circle>
+  <circle r="14" z="906" transform="translate(89,67)"></circle>
+  <circle r="14" z="863" transform="translate(-3,-34)"></circle>
+  <circle r="14" z="814" transform="translate(239,-131)"></circle>
+  <circle r="14" z="904" transform="translate(96,-20)"></circle>
+  <circle r="14" z="776" transform="translate(248,-119)"></circle>
+  <circle r="14" z="841" transform="translate(175,-48)"></circle>
+  <circle r="14" z="970" transform="translate(-129,200)"></circle>
+  <circle r="14" z="832" transform="translate(141,126)"></circle>
+  <circle r="14" z="856" transform="translate(34,-51)"></circle>
+  <circle r="14" z="813" transform="translate(238,-103)"></circle>
+  <circle r="14" z="881" transform="translate(165,41)"></circle>
+  <circle r="14" z="892" transform="translate(145,35)"></circle>
+  <circle r="14" z="869" transform="translate(181,80)"></circle>
+  <circle r="14" z="930" transform="translate(-7,-100)"></circle>
+  <circle r="14" z="973" transform="translate(-66,26)"></circle>
+  <circle r="14" z="814" transform="translate(209,-166)"></circle>
+  <circle r="14" z="838" transform="translate(88,216)"></circle>
+  <circle r="14" z="883" transform="translate(162,48)"></circle>
+  <circle r="14" z="835" transform="translate(254,-279)"></circle>
+  <circle r="14" z="898" transform="translate(163,329)"></circle>
+  <circle r="14" z="977" transform="translate(-120,223)"></circle>
+  <circle r="14" z="772" transform="translate(285,-177)"></circle>
+  <circle r="14" z="802" transform="translate(242,13)"></circle>
+  <circle r="14" z="957" transform="translate(-136,-97)"></circle>
+  <circle r="14" z="914" transform="translate(-129,-9)"></circle>
+  <circle r="14" z="870" transform="translate(204,-389)"></circle>
+  <circle r="14" z="920" transform="translate(42,65)"></circle>
+  <circle r="14" z="782" transform="translate(158,-243)"></circle>
+  <circle r="14" z="855" transform="translate(79,360)"></circle>
+  <circle r="14" z="840" transform="translate(15,64)"></circle>
+  <circle r="14" z="785" transform="translate(173,-247)"></circle>
+  <circle r="14" z="772" transform="translate(284,-182)"></circle>
+  <circle r="14" z="909" transform="translate(-51,56)"></circle>
+  <circle r="14" z="805" transform="translate(165,101)"></circle>
+  <circle r="14" z="967" transform="translate(-137,132)"></circle>
+  <circle r="14" z="787" transform="translate(169,-269)"></circle>
+  <circle r="14" z="966" transform="translate(-18,-97)"></circle>
+  <circle r="14" z="955" transform="translate(16,-11)"></circle>
+  <circle r="14" z="774" transform="translate(319,-171)"></circle>
+  <circle r="14" z="782" transform="translate(164,-231)"></circle>
+  <circle r="14" z="808" transform="translate(83,70)"></circle>
+  <circle r="14" z="912" transform="translate(95,49)"></circle>
+  <circle r="14" z="803" transform="translate(131,79)"></circle>
+  <circle r="14" z="995" transform="translate(-36,235)"></circle>
+  <circle r="14" z="969" transform="translate(-31,-108)"></circle>
+  <circle r="14" z="879" transform="translate(90,-66)"></circle>
+  <circle r="14" z="897" transform="translate(-26,-85)"></circle>
+  <circle r="14" z="786" transform="translate(295,-174)"></circle>
+  <circle r="14" z="892" transform="translate(-85,-33)"></circle>
+  <circle r="14" z="890" transform="translate(129,189)"></circle>
+  <circle r="14" z="929" transform="translate(29,-69)"></circle>
+  <circle r="14" z="806" transform="translate(186,-120)"></circle>
+  <circle r="14" z="959" transform="translate(-128,8)"></circle>
+  <circle r="14" z="785" transform="translate(204,-120)"></circle>
+  <circle r="14" z="954" transform="translate(-115,58)"></circle>
+  <circle r="14" z="981" transform="translate(-63,22)"></circle>
+  <circle r="14" z="967" transform="translate(-29,67)"></circle>
+  <circle r="14" z="782" transform="translate(206,-170)"></circle>
+  <circle r="14" z="791" transform="translate(192,-234)"></circle>
+  <circle r="14" z="903" transform="translate(18,-88)"></circle>
+  <circle r="14" z="959" transform="translate(-31,61)"></circle>
+  <circle r="14" z="789" transform="translate(204,24)"></circle>
+  <circle r="14" z="925" transform="translate(-122,65)"></circle>
+  <circle r="14" z="952" transform="translate(-122,-108)"></circle>
+  <circle r="14" z="846" transform="translate(194,-13)"></circle>
+  <circle r="14" z="972" transform="translate(-70,54)"></circle>
+  <circle r="14" z="820" transform="translate(138,-50)"></circle>
+  <circle r="14" z="894" transform="translate(25,-85)"></circle>
+  <circle r="14" z="976" transform="translate(-132,-50)"></circle>
+  <circle r="14" z="983" transform="translate(-99,-99)"></circle>
+  <circle r="14" z="812" transform="translate(239,9)"></circle>
+  <circle r="14" z="877" transform="translate(81,107)"></circle>
+  <circle r="14" z="794" transform="translate(177,48)"></circle>
+  <circle r="14" z="983" transform="translate(-34,-9)"></circle>
+  <circle r="14" z="859" transform="translate(63,117)"></circle>
+  <circle r="14" z="951" transform="translate(0,-84)"></circle>
+  <circle r="14" z="884" transform="translate(159,108)"></circle>
+  <circle r="14" z="800" transform="translate(193,73)"></circle>
+  <circle r="14" z="897" transform="translate(133,28)"></circle>
+  <circle r="14" z="899" transform="translate(-95,-48)"></circle>
+  <circle r="14" z="911" transform="translate(72,-44)"></circle>
+  <circle r="14" z="988" transform="translate(-51,70)"></circle>
+  <circle r="14" z="874" transform="translate(-50,-5)"></circle>
+  <circle r="14" z="803" transform="translate(151,-271)"></circle>
+  <circle r="14" z="797" transform="translate(285,-200)"></circle>
+  <circle r="14" z="926" transform="translate(-133,24)"></circle>
+  <circle r="14" z="952" transform="translate(19,-55)"></circle>
+  <circle r="14" z="863" transform="translate(-34,47)"></circle>
+  <circle r="14" z="965" transform="translate(-105,3)"></circle>
+  <circle r="14" z="973" transform="translate(-117,173)"></circle>
+  <circle r="14" z="791" transform="translate(191,-82)"></circle>
+  <circle r="14" z="932" transform="translate(-109,88)"></circle>
+  <circle r="14" z="815" transform="translate(234,-189)"></circle>
+  <circle r="14" z="998" transform="translate(-77,150)"></circle>
+  <circle r="14" z="907" transform="translate(151,327)"></circle>
+  <circle r="14" z="888" transform="translate(145,95)"></circle>
+  <circle r="14" z="969" transform="translate(-91,5)"></circle>
+  <circle r="14" z="970" transform="translate(-141,120)"></circle>
+  <circle r="14" z="825" transform="translate(247,-219)"></circle>
+  <circle r="14" z="846" transform="translate(-0,53)"></circle>
+  <circle r="14" z="859" transform="translate(9,97)"></circle>
+  <circle r="14" z="995" transform="translate(-41,232)"></circle>
+  <circle r="14" z="897" transform="translate(-63,-68)"></circle>
+  <circle r="14" z="793" transform="translate(188,-82)"></circle>
+  <circle r="14" z="872" transform="translate(129,-57)"></circle>
+  <circle r="14" z="962" transform="translate(-10,-90)"></circle>
+  <circle r="14" z="864" transform="translate(82,356)"></circle>
+  <circle r="14" z="806" transform="translate(192,-165)"></circle>
+  <circle r="14" z="780" transform="translate(165,-231)"></circle>
+  <circle r="14" z="972" transform="translate(-110,265)"></circle>
+  <circle r="14" z="811" transform="translate(182,-103)"></circle>
+  <circle r="14" z="938" transform="translate(45,8)"></circle>
+  <circle r="14" z="974" transform="translate(-13,-65)"></circle>
+  <circle r="14" z="779" transform="translate(163,-225)"></circle>
+  <circle r="14" z="780" transform="translate(220,-121)"></circle>
+  <circle r="14" z="938" transform="translate(18,29)"></circle>
+  <circle r="14" z="971" transform="translate(-13,40)"></circle>
+  <circle r="14" z="885" transform="translate(60,104)"></circle>
+  <circle r="14" z="933" transform="translate(-124,72)"></circle>
+  <circle r="14" z="805" transform="translate(271,-187)"></circle>
+  <circle r="14" z="901" transform="translate(111,53)"></circle>
+  <circle r="14" z="914" transform="translate(-30,-107)"></circle>
+  <circle r="14" z="882" transform="translate(-47,58)"></circle>
+  <circle r="14" z="992" transform="translate(-83,80)"></circle>
+  <circle r="14" z="874" transform="translate(81,-69)"></circle>
+  <circle r="14" z="896" transform="translate(20,-87)"></circle>
+  <circle r="14" z="880" transform="translate(154,210)"></circle>
+  <circle r="14" z="788" transform="translate(198,-162)"></circle>
+  <circle r="14" z="877" transform="translate(162,-8)"></circle>
+  <circle r="14" z="774" transform="translate(239,-183)"></circle>
+  <circle r="14" z="919" transform="translate(-89,-99)"></circle>
+  <circle r="14" z="941" transform="translate(-126,83)"></circle>
+  <circle r="14" z="903" transform="translate(107,53)"></circle>
+  <circle r="14" z="849" transform="translate(178,-31)"></circle>
+  <circle r="14" z="956" transform="translate(-125,120)"></circle>
+  <circle r="14" z="934" transform="translate(-14,44)"></circle>
+  <circle r="14" z="973" transform="translate(-138,-79)"></circle>
+  <circle r="14" z="962" transform="translate(-131,146)"></circle>
+  <circle r="14" z="976" transform="translate(-124,229)"></circle>
+  <circle r="14" z="898" transform="translate(166,340)"></circle>
+  <circle r="14" z="964" transform="translate(-114,122)"></circle>
+  <circle r="14" z="967" transform="translate(-44,-120)"></circle>
+  <circle r="14" z="828" transform="translate(81,186)"></circle>
+  <circle r="14" z="918" transform="translate(65,-43)"></circle>
+  <circle r="14" z="889" transform="translate(-6,94)"></circle>
+  <circle r="14" z="890" transform="translate(78,-59)"></circle>
+  <circle r="14" z="976" transform="translate(-14,-1)"></circle>
+  <circle r="14" z="848" transform="translate(-1,30)"></circle>
+  <circle r="14" z="894" transform="translate(134,191)"></circle>
+  <circle r="14" z="784" transform="translate(220,-35)"></circle>
+  <circle r="14" z="982" transform="translate(-135,-84)"></circle>
+  <circle r="14" z="794" transform="translate(190,-126)"></circle>
+  <circle r="14" z="910" transform="translate(-3,-97)"></circle>
+  <circle r="14" z="948" transform="translate(-140,10)"></circle>
+  <circle r="14" z="947" transform="translate(-80,24)"></circle>
+  <circle r="14" z="849" transform="translate(79,141)"></circle>
+  <circle r="14" z="1001" transform="translate(-74,108)"></circle>
+  <circle r="14" z="854" transform="translate(147,126)"></circle>
+  <circle r="14" z="846" transform="translate(82,250)"></circle>
+  <circle r="14" z="864" transform="translate(32,-57)"></circle>
+  <circle r="14" z="790" transform="translate(172,-261)"></circle>
+  <circle r="14" z="839" transform="translate(159,120)"></circle>
+  <circle r="14" z="780" transform="translate(195,-237)"></circle>
+  <circle r="14" z="830" transform="translate(104,149)"></circle>
+  <circle r="14" z="872" transform="translate(-50,7)"></circle>
+  <circle r="14" z="953" transform="translate(-3,-87)"></circle>
+  <circle r="14" z="976" transform="translate(-83,3)"></circle>
+  <circle r="14" z="861" transform="translate(130,-69)"></circle>
+  <circle r="14" z="833" transform="translate(70,200)"></circle>
+  <circle r="14" z="795" transform="translate(197,-189)"></circle>
+  <circle r="14" z="785" transform="translate(253,-93)"></circle>
+  <circle r="14" z="823" transform="translate(151,123)"></circle>
+  <circle r="14" z="851" transform="translate(74,189)"></circle>
+  <circle r="14" z="827" transform="translate(84,-44)"></circle>
+  <circle r="14" z="872" transform="translate(156,-31)"></circle>
+  <circle r="14" z="786" transform="translate(197,-217)"></circle>
+  <circle r="14" z="917" transform="translate(81,-13)"></circle>
+  <circle r="14" z="825" transform="translate(92,158)"></circle>
+  <circle r="14" z="790" transform="translate(260,-220)"></circle>
+  <circle r="14" z="881" transform="translate(-38,68)"></circle>
+  <circle r="14" z="783" transform="translate(194,-233)"></circle>
+  <circle r="14" z="830" transform="translate(54,141)"></circle>
+  <circle r="14" z="893" transform="translate(136,7)"></circle>
+  <circle r="14" z="885" transform="translate(122,102)"></circle>
+  <circle r="14" z="791" transform="translate(262,-93)"></circle>
+  <circle r="14" z="809" transform="translate(107,2)"></circle>
+  <circle r="14" z="974" transform="translate(-13,-70)"></circle>
+  <circle r="14" z="910" transform="translate(101,45)"></circle>
+  <circle r="14" z="756" transform="translate(335,-135)"></circle>
+  <circle r="14" z="784" transform="translate(163,-245)"></circle>
+  <circle r="14" z="968" transform="translate(-7,-73)"></circle>
+  <circle r="14" z="809" transform="translate(254,-143)"></circle>
+  <circle r="14" z="791" transform="translate(193,33)"></circle>
+  <circle r="14" z="822" transform="translate(70,137)"></circle>
+  <circle r="14" z="817" transform="translate(105,126)"></circle>
+  <circle r="14" z="879" transform="translate(165,113)"></circle>
+  <circle r="14" z="871" transform="translate(148,-46)"></circle>
+  <circle r="14" z="955" transform="translate(-93,-128)"></circle>
+  <circle r="14" z="862" transform="translate(177,101)"></circle>
+  <circle r="14" z="808" transform="translate(266,-207)"></circle>
+  <circle r="14" z="823" transform="translate(195,107)"></circle>
+  <circle r="14" z="969" transform="translate(-139,-86)"></circle>
+  <circle r="14" z="816" transform="translate(175,-85)"></circle>
+  <circle r="14" z="921" transform="translate(76,40)"></circle>
+  <circle r="14" z="937" transform="translate(-147,-15)"></circle>
+  <circle r="14" z="811" transform="translate(241,-8)"></circle>
+  <circle r="14" z="921" transform="translate(-3,-97)"></circle>
+  <circle r="14" z="966" transform="translate(-79,-122)"></circle>
+  <circle r="14" z="926" transform="translate(-89,-107)"></circle>
+  <circle r="14" z="873" transform="translate(187,-399)"></circle>
+  <circle r="14" z="943" transform="translate(-79,45)"></circle>
+  <circle r="14" z="784" transform="translate(204,-218)"></circle>
+  <circle r="14" z="856" transform="translate(130,121)"></circle>
+  <circle r="14" z="921" transform="translate(64,-39)"></circle>
+  <circle r="14" z="790" transform="translate(184,-240)"></circle>
+  <circle r="14" z="771" transform="translate(257,-152)"></circle>
+  <circle r="14" z="826" transform="translate(204,94)"></circle>
+  <circle r="14" z="874" transform="translate(166,148)"></circle>
+  <circle r="14" z="989" transform="translate(-65,-72)"></circle>
+  <circle r="14" z="814" transform="translate(236,-109)"></circle>
+  <circle r="14" z="848" transform="translate(70,145)"></circle>
+  <circle r="14" z="915" transform="translate(-132,-32)"></circle>
+  <circle r="14" z="875" transform="translate(170,121)"></circle>
+  <circle r="14" z="976" transform="translate(-128,-98)"></circle>
+  <circle r="14" z="785" transform="translate(198,-227)"></circle>
+  <circle r="14" z="783" transform="translate(216,-63)"></circle>
+  <circle r="14" z="792" transform="translate(189,-233)"></circle>
+  <circle r="14" z="986" transform="translate(-64,108)"></circle>
+  <circle r="14" z="869" transform="translate(99,-69)"></circle>
+  <circle r="14" z="931" transform="translate(-55,35)"></circle>
+  <circle r="14" z="883" transform="translate(161,207)"></circle>
+  <circle r="14" z="989" transform="translate(-85,-23)"></circle>
+  <circle r="14" z="877" transform="translate(170,73)"></circle>
+  <circle r="14" z="877" transform="translate(170,79)"></circle>
+  <circle r="14" z="868" transform="translate(-38,59)"></circle>
+  <circle r="14" z="878" transform="translate(133,-45)"></circle>
+  <circle r="14" z="893" transform="translate(75,-61)"></circle>
+  <circle r="14" z="818" transform="translate(142,-47)"></circle>
+  <circle r="14" z="904" transform="translate(84,76)"></circle>
+  <circle r="14" z="977" transform="translate(-20,-76)"></circle>
+  <circle r="14" z="838" transform="translate(248,-284)"></circle>
+  <circle r="14" z="788" transform="translate(187,-254)"></circle>
+  <circle r="14" z="983" transform="translate(-126,-87)"></circle>
+  <circle r="14" z="796" transform="translate(287,-187)"></circle>
+  <circle r="14" z="965" transform="translate(-115,198)"></circle>
+  <circle r="14" z="880" transform="translate(51,107)"></circle>
+  <circle r="14" z="822" transform="translate(181,113)"></circle>
+  <circle r="14" z="783" transform="translate(168,-224)"></circle>
+  <circle r="14" z="848" transform="translate(65,164)"></circle>
+  <circle r="14" z="926" transform="translate(-99,79)"></circle>
+  <circle r="14" z="994" transform="translate(-48,250)"></circle>
+  <circle r="14" z="807" transform="translate(181,-100)"></circle>
+  <circle r="14" z="916" transform="translate(83,-14)"></circle>
+  <circle r="14" z="983" transform="translate(-91,-14)"></circle>
+  <circle r="14" z="846" transform="translate(19,87)"></circle>
+  <circle r="14" z="816" transform="translate(187,-99)"></circle>
+  <circle r="14" z="837" transform="translate(203,-286)"></circle>
+  <circle r="14" z="870" transform="translate(171,-408)"></circle>
+  <circle r="14" z="867" transform="translate(153,-45)"></circle>
+  <circle r="14" z="779" transform="translate(307,-170)"></circle>
+  <circle r="14" z="989" transform="translate(-89,-78)"></circle>
+  <circle r="14" z="839" transform="translate(56,164)"></circle>
+  <circle r="14" z="918" transform="translate(-126,24)"></circle>
+  <circle r="14" z="792" transform="translate(286,-207)"></circle>
+  <circle r="14" z="898" transform="translate(143,310)"></circle>
+  <circle r="14" z="858" transform="translate(2,-26)"></circle>
+  <circle r="14" z="962" transform="translate(-109,10)"></circle>
+  <circle r="14" z="882" transform="translate(164,26)"></circle>
+  <circle r="14" z="876" transform="translate(127,160)"></circle>
+  <circle r="14" z="911" transform="translate(-121,1)"></circle>
+  <circle r="14" z="894" transform="translate(12,-91)"></circle>
+  <circle r="14" z="849" transform="translate(175,-35)"></circle>
+  <circle r="14" z="860" transform="translate(168,117)"></circle>
+  <circle r="14" z="815" transform="translate(232,-221)"></circle>
+  <circle r="14" z="942" transform="translate(36,-11)"></circle>
+  <circle r="14" z="799" transform="translate(282,-178)"></circle>
+  <circle r="14" z="894" transform="translate(135,201)"></circle>
+  <circle r="14" z="903" transform="translate(-92,-62)"></circle>
+  <circle r="14" z="931" transform="translate(-12,-102)"></circle>
+  <circle r="14" z="899" transform="translate(150,287)"></circle>
+  <circle r="14" z="966" transform="translate(-0,-65)"></circle>
+  <circle r="14" z="972" transform="translate(-95,-0)"></circle>
+  <circle r="14" z="887" transform="translate(72,-63)"></circle>
+  <circle r="14" z="816" transform="translate(72,103)"></circle>
+  <circle r="14" z="951" transform="translate(25,-14)"></circle>
+  <circle r="14" z="874" transform="translate(-26,-43)"></circle>
+  <circle r="14" z="855" transform="translate(-12,6)"></circle>
+  <circle r="14" z="943" transform="translate(-80,47)"></circle>
+  <circle r="14" z="892" transform="translate(144,38)"></circle>
+  <circle r="14" z="955" transform="translate(-9,43)"></circle>
+  <circle r="14" z="827" transform="translate(122,132)"></circle>
+  <circle r="14" z="978" transform="translate(-119,-34)"></circle>
+  <circle r="14" z="854" transform="translate(-8,1)"></circle>
+  <circle r="14" z="791" transform="translate(110,-339)"></circle>
+  <circle r="14" z="799" transform="translate(179,77)"></circle>
+  <circle r="14" z="954" transform="translate(8,5)"></circle>
+  <circle r="14" z="914" transform="translate(-105,-81)"></circle>
+  <circle r="14" z="809" transform="translate(246,-64)"></circle>
+  <circle r="14" z="882" transform="translate(157,3)"></circle>
+  <circle r="14" z="888" transform="translate(137,150)"></circle>
+  <circle r="14" z="822" transform="translate(41,61)"></circle>
+  <circle r="14" z="845" transform="translate(58,-54)"></circle>
+  <circle r="14" z="856" transform="translate(240,-316)"></circle>
+</svg>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/blobby-deerthreejs-to-svg-render-gsap/dist/script.js b/blobby-deerthreejs-to-svg-render-gsap/dist/script.js
new file mode 100644
index 0000000..7379311
--- /dev/null
+++ b/blobby-deerthreejs-to-svg-render-gsap/dist/script.js
@@ -0,0 +1,54 @@
+console.clear();
+const circles = [...document.querySelectorAll('circle')];
+const svg = document.querySelector('svg');
+circles.sort((a, b) => {
+  const a_z = parseFloat(a.getAttribute('z'));
+  const b_z = parseFloat(b.getAttribute('z'));
+  return b_z - a_z;
+});
+let colors = ['#16F8C0','#00D4C0','#00AFB5','#008B9E','#22687E','#2F4858'];
+
+circles.forEach((node, i) => {
+  svg.appendChild(node);
+  node.setAttribute('r', parseFloat(node.getAttribute('r')) * 1.5);
+  node.style.fill = colors[Math.floor(i / 70) % 6];
+  
+  /* Rainbow colors */
+  // node.setAttribute('stroke', `hsl(${Math.floor(i / circles.length * 360)}deg, 70%, 60%)`);
+  // node.style.fill = `hsl(${Math.floor(i / circles.length * 360)}deg, 70%, 60%)`;
+});
+
+const tween = gsap.timeline({
+  repeat: -1
+});
+
+tween.fromTo('circle',{
+  strokeDasharray: (i, node) => {
+    return node.getTotalLength();
+  },
+  strokeDashoffset: (i, node) => {
+    return node.getTotalLength();
+  },
+  transformOrigin: 'center',
+  rotation: Math.random() * 360,
+  scale: 0
+}, {
+  scale: 1,
+  rotation: Math.random() * 360,
+  strokeDashoffset: 0,
+  stagger: 0.004,
+  duration: 'random(0.8, 2.5)',
+  ease: 'elastic.out(1,0.3)'
+});
+tween.to('circle', {
+  cx: () => {
+    return `+=${(Math.random() - 0.5) * 500}`
+  },
+  cy: () => {
+    return `+=${(Math.random() - 0.5) * 500}`
+  },
+  scale: 0,
+  opacity: 0,
+  duration: 'random(0.4, 1.5)',
+  stagger: 0.001
+});
\ No newline at end of file
diff --git a/blobby-deerthreejs-to-svg-render-gsap/dist/style.css b/blobby-deerthreejs-to-svg-render-gsap/dist/style.css
new file mode 100644
index 0000000..2957aea
--- /dev/null
+++ b/blobby-deerthreejs-to-svg-render-gsap/dist/style.css
@@ -0,0 +1,19 @@
+body {
+  overflow: hidden;
+  margin: 0;
+  background: radial-gradient(#005FA2 0%, #030847 80%);
+  height: 100vh;
+  filter: drop-shadow(0 0 30px rgba(161, 238, 243, 0.3));
+}
+
+svg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+circle {
+  fill: none;
+}
\ No newline at end of file
diff --git a/blobby-deerthreejs-to-svg-render-gsap/license.txt b/blobby-deerthreejs-to-svg-render-gsap/license.txt
new file mode 100644
index 0000000..ace1a81
--- /dev/null
+++ b/blobby-deerthreejs-to-svg-render-gsap/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Louis Hoebregts (https://codepen.io/Mamboleoo/pen/JjNvQGP)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/blobby-deerthreejs-to-svg-render-gsap/src/index.html b/blobby-deerthreejs-to-svg-render-gsap/src/index.html
new file mode 100644
index 0000000..1ff0ab9
--- /dev/null
+++ b/blobby-deerthreejs-to-svg-render-gsap/src/index.html
@@ -0,0 +1,1427 @@
+<svg viewBox="-350 -490 920 927" xmlns="http://www.w3.org/2000/svg">
+  <circle r="14" z="894" transform="translate(-35,74)"></circle>
+  <circle r="14" z="887" transform="translate(129,101)"></circle>
+  <circle r="14" z="960" transform="translate(-81,15)"></circle>
+  <circle r="14" z="770" transform="translate(269,-156)"></circle>
+  <circle r="14" z="972" transform="translate(-7,2)"></circle>
+  <circle r="14" z="869" transform="translate(211,-386)"></circle>
+  <circle r="14" z="850" transform="translate(81,209)"></circle>
+  <circle r="14" z="818" transform="translate(191,107)"></circle>
+  <circle r="14" z="884" transform="translate(-52,-43)"></circle>
+  <circle r="14" z="897" transform="translate(131,276)"></circle>
+  <circle r="14" z="814" transform="translate(239,-68)"></circle>
+  <circle r="14" z="890" transform="translate(149,179)"></circle>
+  <circle r="14" z="1003" transform="translate(-65,156)"></circle>
+  <circle r="14" z="866" transform="translate(131,132)"></circle>
+  <circle r="14" z="1007" transform="translate(-55,225)"></circle>
+  <circle r="14" z="834" transform="translate(177,113)"></circle>
+  <circle r="14" z="793" transform="translate(182,-46)"></circle>
+  <circle r="14" z="904" transform="translate(20,90)"></circle>
+  <circle r="14" z="856" transform="translate(39,-54)"></circle>
+  <circle r="14" z="849" transform="translate(242,-311)"></circle>
+  <circle r="14" z="890" transform="translate(143,175)"></circle>
+  <circle r="14" z="966" transform="translate(-116,226)"></circle>
+  <circle r="14" z="975" transform="translate(-135,121)"></circle>
+  <circle r="14" z="838" transform="translate(139,-67)"></circle>
+  <circle r="14" z="916" transform="translate(-92,-92)"></circle>
+  <circle r="14" z="929" transform="translate(-140,-2)"></circle>
+  <circle r="14" z="979" transform="translate(-25,-69)"></circle>
+  <circle r="14" z="946" transform="translate(-128,59)"></circle>
+  <circle r="14" z="847" transform="translate(21,-19)"></circle>
+  <circle r="14" z="867" transform="translate(2,99)"></circle>
+  <circle r="14" z="885" transform="translate(138,-19)"></circle>
+  <circle r="14" z="884" transform="translate(157,65)"></circle>
+  <circle r="14" z="816" transform="translate(235,-49)"></circle>
+  <circle r="14" z="971" transform="translate(-114,155)"></circle>
+  <circle r="14" z="841" transform="translate(185,-37)"></circle>
+  <circle r="14" z="980" transform="translate(-122,-45)"></circle>
+  <circle r="14" z="885" transform="translate(-34,75)"></circle>
+  <circle r="14" z="875" transform="translate(127,-54)"></circle>
+  <circle r="14" z="870" transform="translate(183,38)"></circle>
+  <circle r="14" z="906" transform="translate(81,75)"></circle>
+  <circle r="14" z="782" transform="translate(178,-258)"></circle>
+  <circle r="14" z="965" transform="translate(-65,-123)"></circle>
+  <circle r="14" z="911" transform="translate(21,-86)"></circle>
+  <circle r="14" z="886" transform="translate(153,60)"></circle>
+  <circle r="14" z="788" transform="translate(199,-184)"></circle>
+  <circle r="14" z="875" transform="translate(-55,27)"></circle>
+  <circle r="14" z="806" transform="translate(107,83)"></circle>
+  <circle r="14" z="995" transform="translate(-63,202)"></circle>
+  <circle r="14" z="774" transform="translate(234,-147)"></circle>
+  <circle r="14" z="914" transform="translate(-87,61)"></circle>
+  <circle r="14" z="817" transform="translate(247,-252)"></circle>
+  <circle r="14" z="985" transform="translate(-40,-37)"></circle>
+  <circle r="14" z="788" transform="translate(260,-100)"></circle>
+  <circle r="14" z="911" transform="translate(101,25)"></circle>
+  <circle r="14" z="969" transform="translate(-43,-116)"></circle>
+  <circle r="14" z="815" transform="translate(73,13)"></circle>
+  <circle r="14" z="816" transform="translate(79,-389)"></circle>
+  <circle r="14" z="837" transform="translate(70,230)"></circle>
+  <circle r="14" z="823" transform="translate(226,-31)"></circle>
+  <circle r="14" z="995" transform="translate(-62,108)"></circle>
+  <circle r="14" z="851" transform="translate(74,193)"></circle>
+  <circle r="14" z="993" transform="translate(-27,248)"></circle>
+  <circle r="14" z="976" transform="translate(-16,24)"></circle>
+  <circle r="14" z="817" transform="translate(171,116)"></circle>
+  <circle r="14" z="917" transform="translate(-115,52)"></circle>
+  <circle r="14" z="788" transform="translate(198,-234)"></circle>
+  <circle r="14" z="887" transform="translate(16,-84)"></circle>
+  <circle r="14" z="947" transform="translate(7,26)"></circle>
+  <circle r="14" z="903" transform="translate(29,-83)"></circle>
+  <circle r="14" z="834" transform="translate(210,65)"></circle>
+  <circle r="14" z="884" transform="translate(124,108)"></circle>
+  <circle r="14" z="909" transform="translate(-2,84)"></circle>
+  <circle r="14" z="839" transform="translate(64,236)"></circle>
+  <circle r="14" z="922" transform="translate(8,-92)"></circle>
+  <circle r="14" z="880" transform="translate(-62,21)"></circle>
+  <circle r="14" z="864" transform="translate(11,-49)"></circle>
+  <circle r="14" z="829" transform="translate(244,-264)"></circle>
+  <circle r="14" z="857" transform="translate(98,371)"></circle>
+  <circle r="14" z="803" transform="translate(255,-66)"></circle>
+  <circle r="14" z="801" transform="translate(240,16)"></circle>
+  <circle r="14" z="823" transform="translate(45,17)"></circle>
+  <circle r="14" z="857" transform="translate(55,-62)"></circle>
+  <circle r="14" z="912" transform="translate(79,-35)"></circle>
+  <circle r="14" z="822" transform="translate(118,-47)"></circle>
+  <circle r="14" z="852" transform="translate(102,125)"></circle>
+  <circle r="14" z="770" transform="translate(332,-166)"></circle>
+  <circle r="14" z="879" transform="translate(169,35)"></circle>
+  <circle r="14" z="853" transform="translate(193,75)"></circle>
+  <circle r="14" z="808" transform="translate(232,-234)"></circle>
+  <circle r="14" z="980" transform="translate(-73,-107)"></circle>
+  <circle r="14" z="898" transform="translate(116,-4)"></circle>
+  <circle r="14" z="928" transform="translate(-65,-116)"></circle>
+  <circle r="14" z="828" transform="translate(139,-65)"></circle>
+  <circle r="14" z="901" transform="translate(92,-35)"></circle>
+  <circle r="14" z="908" transform="translate(-74,-87)"></circle>
+  <circle r="14" z="860" transform="translate(63,336)"></circle>
+  <circle r="14" z="944" transform="translate(-78,-128)"></circle>
+  <circle r="14" z="814" transform="translate(88,-4)"></circle>
+  <circle r="14" z="935" transform="translate(-50,33)"></circle>
+  <circle r="14" z="968" transform="translate(-127,201)"></circle>
+  <circle r="14" z="978" transform="translate(-18,-49)"></circle>
+  <circle r="14" z="975" transform="translate(-135,-82)"></circle>
+  <circle r="14" z="906" transform="translate(102,-2)"></circle>
+  <circle r="14" z="959" transform="translate(-140,-93)"></circle>
+  <circle r="14" z="830" transform="translate(180,112)"></circle>
+  <circle r="14" z="856" transform="translate(6,-23)"></circle>
+  <circle r="14" z="998" transform="translate(-76,83)"></circle>
+  <circle r="14" z="894" transform="translate(166,339)"></circle>
+  <circle r="14" z="814" transform="translate(75,21)"></circle>
+  <circle r="14" z="784" transform="translate(300,-161)"></circle>
+  <circle r="14" z="904" transform="translate(137,287)"></circle>
+  <circle r="14" z="812" transform="translate(203,-180)"></circle>
+  <circle r="14" z="767" transform="translate(343,-139)"></circle>
+  <circle r="14" z="971" transform="translate(-106,-112)"></circle>
+  <circle r="14" z="958" transform="translate(-105,278)"></circle>
+  <circle r="14" z="905" transform="translate(150,306)"></circle>
+  <circle r="14" z="810" transform="translate(147,109)"></circle>
+  <circle r="14" z="947" transform="translate(-21,-108)"></circle>
+  <circle r="14" z="988" transform="translate(-64,121)"></circle>
+  <circle r="14" z="884" transform="translate(-3,-74)"></circle>
+  <circle r="14" z="774" transform="translate(254,-174)"></circle>
+  <circle r="14" z="963" transform="translate(-112,259)"></circle>
+  <circle r="14" z="852" transform="translate(182,98)"></circle>
+  <circle r="14" z="884" transform="translate(-39,68)"></circle>
+  <circle r="14" z="914" transform="translate(75,61)"></circle>
+  <circle r="14" z="807" transform="translate(252,-125)"></circle>
+  <circle r="14" z="811" transform="translate(243,-59)"></circle>
+  <circle r="14" z="976" transform="translate(-37,72)"></circle>
+  <circle r="14" z="838" transform="translate(93,193)"></circle>
+  <circle r="14" z="990" transform="translate(-63,-32)"></circle>
+  <circle r="14" z="781" transform="translate(209,-173)"></circle>
+  <circle r="14" z="860" transform="translate(223,-426)"></circle>
+  <circle r="14" z="857" transform="translate(159,-48)"></circle>
+  <circle r="14" z="983" transform="translate(-40,21)"></circle>
+  <circle r="14" z="969" transform="translate(-98,255)"></circle>
+  <circle r="14" z="859" transform="translate(65,298)"></circle>
+  <circle r="14" z="800" transform="translate(159,77)"></circle>
+  <circle r="14" z="893" transform="translate(-62,-58)"></circle>
+  <circle r="14" z="755" transform="translate(345,-146)"></circle>
+  <circle r="14" z="968" transform="translate(-114,164)"></circle>
+  <circle r="14" z="960" transform="translate(12,-55)"></circle>
+  <circle r="14" z="841" transform="translate(206,62)"></circle>
+  <circle r="14" z="934" transform="translate(27,37)"></circle>
+  <circle r="14" z="801" transform="translate(214,-228)"></circle>
+  <circle r="14" z="818" transform="translate(95,135)"></circle>
+  <circle r="14" z="879" transform="translate(-21,85)"></circle>
+  <circle r="14" z="927" transform="translate(69,18)"></circle>
+  <circle r="14" z="894" transform="translate(131,0)"></circle>
+  <circle r="14" z="799" transform="translate(234,-233)"></circle>
+  <circle r="14" z="910" transform="translate(-107,-67)"></circle>
+  <circle r="14" z="959" transform="translate(-106,285)"></circle>
+  <circle r="14" z="906" transform="translate(71,-50)"></circle>
+  <circle r="14" z="974" transform="translate(-33,-104)"></circle>
+  <circle r="14" z="980" transform="translate(-24,-36)"></circle>
+  <circle r="14" z="849" transform="translate(1,11)"></circle>
+  <circle r="14" z="850" transform="translate(136,-65)"></circle>
+  <circle r="14" z="935" transform="translate(-140,-86)"></circle>
+  <circle r="14" z="788" transform="translate(165,-269)"></circle>
+  <circle r="14" z="904" transform="translate(-102,27)"></circle>
+  <circle r="14" z="914" transform="translate(94,2)"></circle>
+  <circle r="14" z="816" transform="translate(60,37)"></circle>
+  <circle r="14" z="915" transform="translate(-113,-78)"></circle>
+  <circle r="14" z="867" transform="translate(147,-51)"></circle>
+  <circle r="14" z="887" transform="translate(140,136)"></circle>
+  <circle r="14" z="864" transform="translate(124,119)"></circle>
+  <circle r="14" z="908" transform="translate(105,11)"></circle>
+  <circle r="14" z="780" transform="translate(275,-205)"></circle>
+  <circle r="14" z="843" transform="translate(57,201)"></circle>
+  <circle r="14" z="808" transform="translate(249,-83)"></circle>
+  <circle r="14" z="988" transform="translate(-24,261)"></circle>
+  <circle r="14" z="819" transform="translate(50,69)"></circle>
+  <circle r="14" z="924" transform="translate(72,34)"></circle>
+  <circle r="14" z="831" transform="translate(128,133)"></circle>
+  <circle r="14" z="837" transform="translate(169,-57)"></circle>
+  <circle r="14" z="984" transform="translate(-52,0)"></circle>
+  <circle r="14" z="923" transform="translate(5,-93)"></circle>
+  <circle r="14" z="838" transform="translate(211,17)"></circle>
+  <circle r="14" z="909" transform="translate(-7,81)"></circle>
+  <circle r="14" z="969" transform="translate(-66,62)"></circle>
+  <circle r="14" z="798" transform="translate(274,-136)"></circle>
+  <circle r="14" z="787" transform="translate(107,-321)"></circle>
+  <circle r="14" z="940" transform="translate(-143,7)"></circle>
+  <circle r="14" z="916" transform="translate(-63,53)"></circle>
+  <circle r="14" z="817" transform="translate(109,124)"></circle>
+  <circle r="14" z="812" transform="translate(175,115)"></circle>
+  <circle r="14" z="847" transform="translate(199,0)"></circle>
+  <circle r="14" z="963" transform="translate(8,-40)"></circle>
+  <circle r="14" z="786" transform="translate(203,-212)"></circle>
+  <circle r="14" z="812" transform="translate(231,-227)"></circle>
+  <circle r="14" z="941" transform="translate(-102,98)"></circle>
+  <circle r="14" z="853" transform="translate(187,-11)"></circle>
+  <circle r="14" z="815" transform="translate(125,-35)"></circle>
+  <circle r="14" z="808" transform="translate(246,-28)"></circle>
+  <circle r="14" z="959" transform="translate(-105,285)"></circle>
+  <circle r="14" z="961" transform="translate(-18,53)"></circle>
+  <circle r="14" z="943" transform="translate(-97,94)"></circle>
+  <circle r="14" z="818" transform="translate(133,-45)"></circle>
+  <circle r="14" z="918" transform="translate(-125,31)"></circle>
+  <circle r="14" z="863" transform="translate(31,-55)"></circle>
+  <circle r="14" z="968" transform="translate(-16,-93)"></circle>
+  <circle r="14" z="898" transform="translate(-93,18)"></circle>
+  <circle r="14" z="965" transform="translate(-123,202)"></circle>
+  <circle r="14" z="828" transform="translate(219,47)"></circle>
+  <circle r="14" z="978" transform="translate(-29,60)"></circle>
+  <circle r="14" z="968" transform="translate(-113,146)"></circle>
+  <circle r="14" z="864" transform="translate(80,352)"></circle>
+  <circle r="14" z="854" transform="translate(80,276)"></circle>
+  <circle r="14" z="813" transform="translate(239,-134)"></circle>
+  <circle r="14" z="952" transform="translate(-120,51)"></circle>
+  <circle r="14" z="911" transform="translate(94,51)"></circle>
+  <circle r="14" z="812" transform="translate(263,-232)"></circle>
+  <circle r="14" z="940" transform="translate(42,-16)"></circle>
+  <circle r="14" z="805" transform="translate(234,-234)"></circle>
+  <circle r="14" z="994" transform="translate(-73,69)"></circle>
+  <circle r="14" z="783" transform="translate(300,-171)"></circle>
+  <circle r="14" z="970" transform="translate(-127,222)"></circle>
+  <circle r="14" z="835" transform="translate(212,53)"></circle>
+  <circle r="14" z="976" transform="translate(-115,212)"></circle>
+  <circle r="14" z="835" transform="translate(250,-264)"></circle>
+  <circle r="14" z="846" transform="translate(9,9)"></circle>
+  <circle r="14" z="820" transform="translate(72,-13)"></circle>
+  <circle r="14" z="927" transform="translate(-125,-95)"></circle>
+  <circle r="14" z="856" transform="translate(76,355)"></circle>
+  <circle r="14" z="880" transform="translate(87,105)"></circle>
+  <circle r="14" z="859" transform="translate(16,102)"></circle>
+  <circle r="14" z="793" transform="translate(168,3)"></circle>
+  <circle r="14" z="795" transform="translate(263,-221)"></circle>
+  <circle r="14" z="934" transform="translate(-73,-120)"></circle>
+  <circle r="14" z="820" transform="translate(106,-40)"></circle>
+  <circle r="14" z="927" transform="translate(-90,82)"></circle>
+  <circle r="14" z="974" transform="translate(-117,-107)"></circle>
+  <circle r="14" z="846" transform="translate(45,-48)"></circle>
+  <circle r="14" z="817" transform="translate(58,74)"></circle>
+  <circle r="14" z="817" transform="translate(109,-30)"></circle>
+  <circle r="14" z="801" transform="translate(259,-112)"></circle>
+  <circle r="14" z="784" transform="translate(179,-252)"></circle>
+  <circle r="14" z="823" transform="translate(49,99)"></circle>
+  <circle r="14" z="805" transform="translate(112,72)"></circle>
+  <circle r="14" z="898" transform="translate(131,278)"></circle>
+  <circle r="14" z="851" transform="translate(5,85)"></circle>
+  <circle r="14" z="876" transform="translate(163,161)"></circle>
+  <circle r="14" z="863" transform="translate(-0,96)"></circle>
+  <circle r="14" z="830" transform="translate(215,-22)"></circle>
+  <circle r="14" z="789" transform="translate(258,-85)"></circle>
+  <circle r="14" z="872" transform="translate(36,-69)"></circle>
+  <circle r="14" z="973" transform="translate(-70,66)"></circle>
+  <circle r="14" z="903" transform="translate(-77,39)"></circle>
+  <circle r="14" z="942" transform="translate(35,5)"></circle>
+  <circle r="14" z="974" transform="translate(-115,194)"></circle>
+  <circle r="14" z="845" transform="translate(205,11)"></circle>
+  <circle r="14" z="774" transform="translate(289,-123)"></circle>
+  <circle r="14" z="795" transform="translate(195,-177)"></circle>
+  <circle r="14" z="880" transform="translate(163,192)"></circle>
+  <circle r="14" z="797" transform="translate(235,18)"></circle>
+  <circle r="14" z="849" transform="translate(78,171)"></circle>
+  <circle r="14" z="899" transform="translate(141,314)"></circle>
+  <circle r="14" z="960" transform="translate(-0,-81)"></circle>
+  <circle r="14" z="952" transform="translate(-25,-110)"></circle>
+  <circle r="14" z="835" transform="translate(161,119)"></circle>
+  <circle r="14" z="858" transform="translate(247,-358)"></circle>
+  <circle r="14" z="893" transform="translate(-57,-62)"></circle>
+  <circle r="14" z="781" transform="translate(232,-84)"></circle>
+  <circle r="14" z="885" transform="translate(-74,1)"></circle>
+  <circle r="14" z="988" transform="translate(-54,60)"></circle>
+  <circle r="14" z="970" transform="translate(-111,192)"></circle>
+  <circle r="14" z="848" transform="translate(245,-300)"></circle>
+  <circle r="14" z="821" transform="translate(224,-257)"></circle>
+  <circle r="14" z="897" transform="translate(104,-25)"></circle>
+  <circle r="14" z="854" transform="translate(-2,-9)"></circle>
+  <circle r="14" z="892" transform="translate(150,244)"></circle>
+  <circle r="14" z="850" transform="translate(64,201)"></circle>
+  <circle r="14" z="968" transform="translate(-93,265)"></circle>
+  <circle r="14" z="856" transform="translate(124,122)"></circle>
+  <circle r="14" z="864" transform="translate(68,333)"></circle>
+  <circle r="14" z="821" transform="translate(47,32)"></circle>
+  <circle r="14" z="887" transform="translate(-80,-7)"></circle>
+  <circle r="14" z="814" transform="translate(68,81)"></circle>
+  <circle r="14" z="978" transform="translate(-59,-110)"></circle>
+  <circle r="14" z="899" transform="translate(121,34)"></circle>
+  <circle r="14" z="789" transform="translate(293,-201)"></circle>
+  <circle r="14" z="904" transform="translate(97,-19)"></circle>
+  <circle r="14" z="962" transform="translate(-103,-122)"></circle>
+  <circle r="14" z="887" transform="translate(147,103)"></circle>
+  <circle r="14" z="820" transform="translate(45,48)"></circle>
+  <circle r="14" z="905" transform="translate(105,1)"></circle>
+  <circle r="14" z="913" transform="translate(96,10)"></circle>
+  <circle r="14" z="880" transform="translate(152,212)"></circle>
+  <circle r="14" z="787" transform="translate(198,-160)"></circle>
+  <circle r="14" z="822" transform="translate(228,24)"></circle>
+  <circle r="14" z="847" transform="translate(173,-40)"></circle>
+  <circle r="14" z="808" transform="translate(259,-228)"></circle>
+  <circle r="14" z="888" transform="translate(-73,-32)"></circle>
+  <circle r="14" z="911" transform="translate(101,40)"></circle>
+  <circle r="14" z="861" transform="translate(105,-71)"></circle>
+  <circle r="14" z="1007" transform="translate(-47,226)"></circle>
+  <circle r="14" z="975" transform="translate(-70,79)"></circle>
+  <circle r="14" z="801" transform="translate(125,31)"></circle>
+  <circle r="14" z="791" transform="translate(217,28)"></circle>
+  <circle r="14" z="877" transform="translate(79,107)"></circle>
+  <circle r="14" z="921" transform="translate(-68,56)"></circle>
+  <circle r="14" z="863" transform="translate(145,-56)"></circle>
+  <circle r="14" z="960" transform="translate(-116,11)"></circle>
+  <circle r="14" z="828" transform="translate(40,4)"></circle>
+  <circle r="14" z="831" transform="translate(26,26)"></circle>
+  <circle r="14" z="931" transform="translate(-131,43)"></circle>
+  <circle r="14" z="781" transform="translate(303,-163)"></circle>
+  <circle r="14" z="957" transform="translate(-133,106)"></circle>
+  <circle r="14" z="848" transform="translate(202,53)"></circle>
+  <circle r="14" z="888" transform="translate(139,152)"></circle>
+  <circle r="14" z="813" transform="translate(240,-100)"></circle>
+  <circle r="14" z="952" transform="translate(-142,-82)"></circle>
+  <circle r="14" z="998" transform="translate(-64,121)"></circle>
+  <circle r="14" z="788" transform="translate(198,-6)"></circle>
+  <circle r="14" z="810" transform="translate(240,18)"></circle>
+  <circle r="14" z="850" transform="translate(85,242)"></circle>
+  <circle r="14" z="825" transform="translate(245,-222)"></circle>
+  <circle r="14" z="807" transform="translate(145,-28)"></circle>
+  <circle r="14" z="804" transform="translate(216,-229)"></circle>
+  <circle r="14" z="974" transform="translate(-130,164)"></circle>
+  <circle r="14" z="782" transform="translate(301,-178)"></circle>
+  <circle r="14" z="910" transform="translate(20,-87)"></circle>
+  <circle r="14" z="913" transform="translate(7,-92)"></circle>
+  <circle r="14" z="957" transform="translate(-107,19)"></circle>
+  <circle r="14" z="957" transform="translate(-73,18)"></circle>
+  <circle r="14" z="993" transform="translate(-81,72)"></circle>
+  <circle r="14" z="826" transform="translate(34,47)"></circle>
+  <circle r="14" z="850" transform="translate(194,-3)"></circle>
+  <circle r="14" z="867" transform="translate(186,28)"></circle>
+  <circle r="14" z="912" transform="translate(-65,-96)"></circle>
+  <circle r="14" z="874" transform="translate(138,196)"></circle>
+  <circle r="14" z="804" transform="translate(181,91)"></circle>
+  <circle r="14" z="780" transform="translate(177,-255)"></circle>
+  <circle r="14" z="805" transform="translate(117,14)"></circle>
+  <circle r="14" z="980" transform="translate(-25,-25)"></circle>
+  <circle r="14" z="839" transform="translate(124,-72)"></circle>
+  <circle r="14" z="910" transform="translate(-20,76)"></circle>
+  <circle r="14" z="991" transform="translate(-71,-29)"></circle>
+  <circle r="14" z="845" transform="translate(7,22)"></circle>
+  <circle r="14" z="789" transform="translate(214,19)"></circle>
+  <circle r="14" z="954" transform="translate(0,29)"></circle>
+  <circle r="14" z="924" transform="translate(-112,74)"></circle>
+  <circle r="14" z="928" transform="translate(-96,-109)"></circle>
+  <circle r="14" z="841" transform="translate(45,121)"></circle>
+  <circle r="14" z="926" transform="translate(-13,59)"></circle>
+  <circle r="14" z="987" transform="translate(-47,-47)"></circle>
+  <circle r="14" z="964" transform="translate(-117,190)"></circle>
+  <circle r="14" z="848" transform="translate(77,279)"></circle>
+  <circle r="14" z="953" transform="translate(-43,47)"></circle>
+  <circle r="14" z="841" transform="translate(62,242)"></circle>
+  <circle r="14" z="863" transform="translate(84,352)"></circle>
+  <circle r="14" z="893" transform="translate(135,57)"></circle>
+  <circle r="14" z="928" transform="translate(-141,-73)"></circle>
+  <circle r="14" z="806" transform="translate(245,-1)"></circle>
+  <circle r="14" z="958" transform="translate(-28,-110)"></circle>
+  <circle r="14" z="804" transform="translate(154,99)"></circle>
+  <circle r="14" z="937" transform="translate(-70,39)"></circle>
+  <circle r="14" z="907" transform="translate(158,327)"></circle>
+  <circle r="14" z="818" transform="translate(220,-85)"></circle>
+  <circle r="14" z="806" transform="translate(150,-27)"></circle>
+  <circle r="14" z="809" transform="translate(169,110)"></circle>
+  <circle r="14" z="786" transform="translate(293,-184)"></circle>
+  <circle r="14" z="865" transform="translate(137,146)"></circle>
+  <circle r="14" z="794" transform="translate(171,29)"></circle>
+  <circle r="14" z="804" transform="translate(271,-212)"></circle>
+  <circle r="14" z="899" transform="translate(75,87)"></circle>
+  <circle r="14" z="833" transform="translate(187,108)"></circle>
+  <circle r="14" z="820" transform="translate(117,128)"></circle>
+  <circle r="14" z="835" transform="translate(212,47)"></circle>
+  <circle r="14" z="874" transform="translate(42,110)"></circle>
+  <circle r="14" z="888" transform="translate(33,-82)"></circle>
+  <circle r="14" z="792" transform="translate(189,-75)"></circle>
+  <circle r="14" z="885" transform="translate(103,-52)"></circle>
+  <circle r="14" z="806" transform="translate(99,62)"></circle>
+  <circle r="14" z="983" transform="translate(-114,-95)"></circle>
+  <circle r="14" z="969" transform="translate(-126,222)"></circle>
+  <circle r="14" z="858" transform="translate(76,300)"></circle>
+  <circle r="14" z="899" transform="translate(62,92)"></circle>
+  <circle r="14" z="791" transform="translate(125,-301)"></circle>
+  <circle r="14" z="823" transform="translate(54,-5)"></circle>
+  <circle r="14" z="886" transform="translate(153,15)"></circle>
+  <circle r="14" z="785" transform="translate(147,-281)"></circle>
+  <circle r="14" z="851" transform="translate(182,-24)"></circle>
+  <circle r="14" z="983" transform="translate(-78,102)"></circle>
+  <circle r="14" z="832" transform="translate(44,108)"></circle>
+  <circle r="14" z="803" transform="translate(252,-34)"></circle>
+  <circle r="14" z="876" transform="translate(19,105)"></circle>
+  <circle r="14" z="889" transform="translate(-83,-14)"></circle>
+  <circle r="14" z="893" transform="translate(146,266)"></circle>
+  <circle r="14" z="827" transform="translate(202,-51)"></circle>
+  <circle r="14" z="804" transform="translate(163,98)"></circle>
+  <circle r="14" z="963" transform="translate(-143,-89)"></circle>
+  <circle r="14" z="770" transform="translate(265,-134)"></circle>
+  <circle r="14" z="884" transform="translate(127,163)"></circle>
+  <circle r="14" z="849" transform="translate(89,219)"></circle>
+  <circle r="14" z="833" transform="translate(257,-249)"></circle>
+  <circle r="14" z="974" transform="translate(-127,199)"></circle>
+  <circle r="14" z="809" transform="translate(261,-183)"></circle>
+  <circle r="14" z="857" transform="translate(0,-21)"></circle>
+  <circle r="14" z="801" transform="translate(130,46)"></circle>
+  <circle r="14" z="870" transform="translate(-35,-21)"></circle>
+  <circle r="14" z="954" transform="translate(-101,62)"></circle>
+  <circle r="14" z="971" transform="translate(-6,12)"></circle>
+  <circle r="14" z="790" transform="translate(195,-237)"></circle>
+  <circle r="14" z="799" transform="translate(141,32)"></circle>
+  <circle r="14" z="806" transform="translate(247,-12)"></circle>
+  <circle r="14" z="812" transform="translate(82,-386)"></circle>
+  <circle r="14" z="768" transform="translate(335,-151)"></circle>
+  <circle r="14" z="834" transform="translate(21,75)"></circle>
+  <circle r="14" z="843" transform="translate(31,-24)"></circle>
+  <circle r="14" z="977" transform="translate(-114,-25)"></circle>
+  <circle r="14" z="921" transform="translate(68,-29)"></circle>
+  <circle r="14" z="886" transform="translate(84,101)"></circle>
+  <circle r="14" z="969" transform="translate(-101,250)"></circle>
+  <circle r="14" z="792" transform="translate(196,-229)"></circle>
+  <circle r="14" z="833" transform="translate(47,128)"></circle>
+  <circle r="14" z="912" transform="translate(71,-44)"></circle>
+  <circle r="14" z="820" transform="translate(204,93)"></circle>
+  <circle r="14" z="813" transform="translate(239,-36)"></circle>
+  <circle r="14" z="811" transform="translate(230,-227)"></circle>
+  <circle r="14" z="924" transform="translate(21,65)"></circle>
+  <circle r="14" z="803" transform="translate(114,55)"></circle>
+  <circle r="14" z="791" transform="translate(192,-122)"></circle>
+  <circle r="14" z="916" transform="translate(-67,56)"></circle>
+  <circle r="14" z="848" transform="translate(50,-53)"></circle>
+  <circle r="14" z="799" transform="translate(147,49)"></circle>
+  <circle r="14" z="983" transform="translate(-40,-82)"></circle>
+  <circle r="14" z="886" transform="translate(20,-84)"></circle>
+  <circle r="14" z="922" transform="translate(16,-88)"></circle>
+  <circle r="14" z="849" transform="translate(54,231)"></circle>
+  <circle r="14" z="969" transform="translate(-106,-115)"></circle>
+  <circle r="14" z="837" transform="translate(96,184)"></circle>
+  <circle r="14" z="877" transform="translate(1,98)"></circle>
+  <circle r="14" z="868" transform="translate(-30,70)"></circle>
+  <circle r="14" z="984" transform="translate(-122,-79)"></circle>
+  <circle r="14" z="821" transform="translate(160,-68)"></circle>
+  <circle r="14" z="951" transform="translate(-122,26)"></circle>
+  <circle r="14" z="896" transform="translate(-20,87)"></circle>
+  <circle r="14" z="877" transform="translate(36,109)"></circle>
+  <circle r="14" z="856" transform="translate(-14,2)"></circle>
+  <circle r="14" z="961" transform="translate(-31,-112)"></circle>
+  <circle r="14" z="888" transform="translate(133,-18)"></circle>
+  <circle r="14" z="804" transform="translate(254,-79)"></circle>
+  <circle r="14" z="930" transform="translate(34,46)"></circle>
+  <circle r="14" z="863" transform="translate(2,-40)"></circle>
+  <circle r="14" z="898" transform="translate(135,255)"></circle>
+  <circle r="14" z="797" transform="translate(171,-259)"></circle>
+  <circle r="14" z="863" transform="translate(69,358)"></circle>
+  <circle r="14" z="864" transform="translate(67,334)"></circle>
+  <circle r="14" z="818" transform="translate(224,-78)"></circle>
+  <circle r="14" z="940" transform="translate(35,12)"></circle>
+  <circle r="14" z="952" transform="translate(-97,43)"></circle>
+  <circle r="14" z="953" transform="translate(-144,-78)"></circle>
+  <circle r="14" z="928" transform="translate(5,56)"></circle>
+  <circle r="14" z="916" transform="translate(-132,-45)"></circle>
+  <circle r="14" z="776" transform="translate(275,-197)"></circle>
+  <circle r="14" z="996" transform="translate(-52,197)"></circle>
+  <circle r="14" z="832" transform="translate(29,84)"></circle>
+  <circle r="14" z="940" transform="translate(27,15)"></circle>
+  <circle r="14" z="842" transform="translate(34,99)"></circle>
+  <circle r="14" z="996" transform="translate(-86,113)"></circle>
+  <circle r="14" z="930" transform="translate(0,55)"></circle>
+  <circle r="14" z="960" transform="translate(-119,72)"></circle>
+  <circle r="14" z="1003" transform="translate(-72,167)"></circle>
+  <circle r="14" z="896" transform="translate(135,38)"></circle>
+  <circle r="14" z="817" transform="translate(58,25)"></circle>
+  <circle r="14" z="805" transform="translate(99,50)"></circle>
+  <circle r="14" z="895" transform="translate(81,89)"></circle>
+  <circle r="14" z="888" transform="translate(71,-63)"></circle>
+  <circle r="14" z="1002" transform="translate(-72,179)"></circle>
+  <circle r="14" z="852" transform="translate(76,299)"></circle>
+  <circle r="14" z="926" transform="translate(-123,64)"></circle>
+  <circle r="14" z="850" transform="translate(76,181)"></circle>
+  <circle r="14" z="797" transform="translate(234,-231)"></circle>
+  <circle r="14" z="988" transform="translate(-72,-81)"></circle>
+  <circle r="14" z="955" transform="translate(-87,288)"></circle>
+  <circle r="14" z="942" transform="translate(-144,-80)"></circle>
+  <circle r="14" z="778" transform="translate(308,-134)"></circle>
+  <circle r="14" z="987" transform="translate(-50,63)"></circle>
+  <circle r="14" z="940" transform="translate(-84,68)"></circle>
+  <circle r="14" z="950" transform="translate(-47,36)"></circle>
+  <circle r="14" z="851" transform="translate(1,-0)"></circle>
+  <circle r="14" z="907" transform="translate(107,10)"></circle>
+  <circle r="14" z="795" transform="translate(256,-45)"></circle>
+  <circle r="14" z="789" transform="translate(199,-242)"></circle>
+  <circle r="14" z="812" transform="translate(262,-224)"></circle>
+  <circle r="14" z="932" transform="translate(-145,-68)"></circle>
+  <circle r="14" z="920" transform="translate(-118,-86)"></circle>
+  <circle r="14" z="960" transform="translate(-104,269)"></circle>
+  <circle r="14" z="771" transform="translate(326,-135)"></circle>
+  <circle r="14" z="871" transform="translate(129,147)"></circle>
+  <circle r="14" z="898" transform="translate(25,94)"></circle>
+  <circle r="14" z="874" transform="translate(36,-73)"></circle>
+  <circle r="14" z="815" transform="translate(154,-51)"></circle>
+  <circle r="14" z="903" transform="translate(161,322)"></circle>
+  <circle r="14" z="940" transform="translate(-65,26)"></circle>
+  <circle r="14" z="887" transform="translate(-73,18)"></circle>
+  <circle r="14" z="994" transform="translate(-64,89)"></circle>
+  <circle r="14" z="858" transform="translate(-4,-19)"></circle>
+  <circle r="14" z="831" transform="translate(24,63)"></circle>
+  <circle r="14" z="845" transform="translate(23,88)"></circle>
+  <circle r="14" z="968" transform="translate(-128,196)"></circle>
+  <circle r="14" z="851" transform="translate(67,120)"></circle>
+  <circle r="14" z="899" transform="translate(9,-92)"></circle>
+  <circle r="14" z="962" transform="translate(-107,99)"></circle>
+  <circle r="14" z="982" transform="translate(-138,-64)"></circle>
+  <circle r="14" z="962" transform="translate(-116,142)"></circle>
+  <circle r="14" z="847" transform="translate(89,236)"></circle>
+  <circle r="14" z="788" transform="translate(210,-232)"></circle>
+  <circle r="14" z="983" transform="translate(-42,73)"></circle>
+  <circle r="14" z="864" transform="translate(230,-368)"></circle>
+  <circle r="14" z="823" transform="translate(225,37)"></circle>
+  <circle r="14" z="868" transform="translate(164,144)"></circle>
+  <circle r="14" z="970" transform="translate(-141,120)"></circle>
+  <circle r="14" z="818" transform="translate(196,-96)"></circle>
+  <circle r="14" z="818" transform="translate(245,-256)"></circle>
+  <circle r="14" z="866" transform="translate(223,-380)"></circle>
+  <circle r="14" z="963" transform="translate(-148,-19)"></circle>
+  <circle r="14" z="853" transform="translate(76,258)"></circle>
+  <circle r="14" z="987" transform="translate(-68,-6)"></circle>
+  <circle r="14" z="809" transform="translate(244,2)"></circle>
+  <circle r="14" z="947" transform="translate(-4,-91)"></circle>
+  <circle r="14" z="835" transform="translate(51,145)"></circle>
+  <circle r="14" z="897" transform="translate(145,325)"></circle>
+  <circle r="14" z="832" transform="translate(114,-60)"></circle>
+  <circle r="14" z="813" transform="translate(248,-235)"></circle>
+  <circle r="14" z="966" transform="translate(-109,229)"></circle>
+  <circle r="14" z="781" transform="translate(210,-184)"></circle>
+  <circle r="14" z="798" transform="translate(172,-256)"></circle>
+  <circle r="14" z="901" transform="translate(88,-38)"></circle>
+  <circle r="14" z="967" transform="translate(0,-4)"></circle>
+  <circle r="14" z="908" transform="translate(-123,-27)"></circle>
+  <circle r="14" z="784" transform="translate(137,-286)"></circle>
+  <circle r="14" z="848" transform="translate(79,152)"></circle>
+  <circle r="14" z="968" transform="translate(-139,126)"></circle>
+  <circle r="14" z="790" transform="translate(193,-209)"></circle>
+  <circle r="14" z="811" transform="translate(243,-37)"></circle>
+  <circle r="14" z="797" transform="translate(177,68)"></circle>
+  <circle r="14" z="808" transform="translate(83,75)"></circle>
+  <circle r="14" z="880" transform="translate(-12,-66)"></circle>
+  <circle r="14" z="962" transform="translate(-17,51)"></circle>
+  <circle r="14" z="819" transform="translate(153,-57)"></circle>
+  <circle r="14" z="899" transform="translate(-44,65)"></circle>
+  <circle r="14" z="888" transform="translate(-39,71)"></circle>
+  <circle r="14" z="943" transform="translate(-152,-31)"></circle>
+  <circle r="14" z="838" transform="translate(60,200)"></circle>
+  <circle r="14" z="855" transform="translate(197,58)"></circle>
+  <circle r="14" z="994" transform="translate(-60,147)"></circle>
+  <circle r="14" z="840" transform="translate(209,45)"></circle>
+  <circle r="14" z="915" transform="translate(-101,61)"></circle>
+  <circle r="14" z="793" transform="translate(185,42)"></circle>
+  <circle r="14" z="886" transform="translate(142,-12)"></circle>
+  <circle r="14" z="780" transform="translate(288,-196)"></circle>
+  <circle r="14" z="1002" transform="translate(-62,161)"></circle>
+  <circle r="14" z="896" transform="translate(146,328)"></circle>
+  <circle r="14" z="1001" transform="translate(-60,162)"></circle>
+  <circle r="14" z="870" transform="translate(32,109)"></circle>
+  <circle r="14" z="810" transform="translate(127,-21)"></circle>
+  <circle r="14" z="812" transform="translate(250,-215)"></circle>
+  <circle r="14" z="949" transform="translate(-151,-55)"></circle>
+  <circle r="14" z="797" transform="translate(231,-232)"></circle>
+  <circle r="14" z="850" transform="translate(89,225)"></circle>
+  <circle r="14" z="974" transform="translate(-11,-36)"></circle>
+  <circle r="14" z="969" transform="translate(-84,10)"></circle>
+  <circle r="14" z="892" transform="translate(25,-85)"></circle>
+  <circle r="14" z="962" transform="translate(-149,-39)"></circle>
+  <circle r="14" z="797" transform="translate(246,-228)"></circle>
+  <circle r="14" z="833" transform="translate(67,192)"></circle>
+  <circle r="14" z="958" transform="translate(-135,3)"></circle>
+  <circle r="14" z="848" transform="translate(188,89)"></circle>
+  <circle r="14" z="899" transform="translate(150,288)"></circle>
+  <circle r="14" z="969" transform="translate(-113,271)"></circle>
+  <circle r="14" z="797" transform="translate(214,-223)"></circle>
+  <circle r="14" z="986" transform="translate(-48,68)"></circle>
+  <circle r="14" z="803" transform="translate(235,33)"></circle>
+  <circle r="14" z="953" transform="translate(-34,51)"></circle>
+  <circle r="14" z="789" transform="translate(103,-348)"></circle>
+  <circle r="14" z="887" transform="translate(-19,87)"></circle>
+  <circle r="14" z="822" transform="translate(83,-30)"></circle>
+  <circle r="14" z="809" transform="translate(195,91)"></circle>
+  <circle r="14" z="828" transform="translate(49,109)"></circle>
+  <circle r="14" z="994" transform="translate(-86,115)"></circle>
+  <circle r="14" z="981" transform="translate(-35,-82)"></circle>
+  <circle r="14" z="979" transform="translate(-63,-109)"></circle>
+  <circle r="14" z="784" transform="translate(213,-46)"></circle>
+  <circle r="14" z="1005" transform="translate(-58,231)"></circle>
+  <circle r="14" z="963" transform="translate(-115,168)"></circle>
+  <circle r="14" z="961" transform="translate(-114,10)"></circle>
+  <circle r="14" z="826" transform="translate(88,168)"></circle>
+  <circle r="14" z="809" transform="translate(167,-61)"></circle>
+  <circle r="14" z="837" transform="translate(76,-57)"></circle>
+  <circle r="14" z="917" transform="translate(37,-73)"></circle>
+  <circle r="14" z="851" transform="translate(34,-45)"></circle>
+  <circle r="14" z="963" transform="translate(-53,-123)"></circle>
+  <circle r="14" z="847" transform="translate(-0,29)"></circle>
+  <circle r="14" z="836" transform="translate(75,230)"></circle>
+  <circle r="14" z="802" transform="translate(154,85)"></circle>
+  <circle r="14" z="811" transform="translate(110,-6)"></circle>
+  <circle r="14" z="987" transform="translate(-136,-61)"></circle>
+  <circle r="14" z="956" transform="translate(-20,58)"></circle>
+  <circle r="14" z="775" transform="translate(235,-130)"></circle>
+  <circle r="14" z="908" transform="translate(-64,55)"></circle>
+  <circle r="14" z="866" transform="translate(-37,48)"></circle>
+  <circle r="14" z="796" transform="translate(190,-138)"></circle>
+  <circle r="14" z="853" transform="translate(251,-312)"></circle>
+  <circle r="14" z="956" transform="translate(-129,13)"></circle>
+  <circle r="14" z="831" transform="translate(124,135)"></circle>
+  <circle r="14" z="862" transform="translate(-34,19)"></circle>
+  <circle r="14" z="938" transform="translate(-145,4)"></circle>
+  <circle r="14" z="792" transform="translate(287,-141)"></circle>
+  <circle r="14" z="835" transform="translate(73,222)"></circle>
+  <circle r="14" z="929" transform="translate(-0,57)"></circle>
+  <circle r="14" z="998" transform="translate(-58,156)"></circle>
+  <circle r="14" z="989" transform="translate(-65,-25)"></circle>
+  <circle r="14" z="810" transform="translate(154,-43)"></circle>
+  <circle r="14" z="862" transform="translate(25,106)"></circle>
+  <circle r="14" z="809" transform="translate(205,-210)"></circle>
+  <circle r="14" z="963" transform="translate(-92,268)"></circle>
+  <circle r="14" z="914" transform="translate(-27,69)"></circle>
+  <circle r="14" z="800" transform="translate(233,31)"></circle>
+  <circle r="14" z="855" transform="translate(-20,26)"></circle>
+  <circle r="14" z="968" transform="translate(-117,102)"></circle>
+  <circle r="14" z="987" transform="translate(-106,-79)"></circle>
+  <circle r="14" z="907" transform="translate(-120,-20)"></circle>
+  <circle r="14" z="938" transform="translate(-98,96)"></circle>
+  <circle r="14" z="784" transform="translate(250,-85)"></circle>
+  <circle r="14" z="950" transform="translate(-65,-126)"></circle>
+  <circle r="14" z="879" transform="translate(127,171)"></circle>
+  <circle r="14" z="862" transform="translate(235,-409)"></circle>
+  <circle r="14" z="847" transform="translate(47,112)"></circle>
+  <circle r="14" z="771" transform="translate(279,-174)"></circle>
+  <circle r="14" z="978" transform="translate(-121,-38)"></circle>
+  <circle r="14" z="1001" transform="translate(-26,245)"></circle>
+  <circle r="14" z="977" transform="translate(-120,219)"></circle>
+  <circle r="14" z="963" transform="translate(-117,168)"></circle>
+  <circle r="14" z="994" transform="translate(-37,236)"></circle>
+  <circle r="14" z="783" transform="translate(179,-256)"></circle>
+  <circle r="14" z="975" transform="translate(-124,187)"></circle>
+  <circle r="14" z="776" transform="translate(303,-130)"></circle>
+  <circle r="14" z="845" transform="translate(90,181)"></circle>
+  <circle r="14" z="950" transform="translate(-45,-119)"></circle>
+  <circle r="14" z="923" transform="translate(-105,74)"></circle>
+  <circle r="14" z="795" transform="translate(161,31)"></circle>
+  <circle r="14" z="898" transform="translate(30,-83)"></circle>
+  <circle r="14" z="847" transform="translate(19,-16)"></circle>
+  <circle r="14" z="968" transform="translate(-5,-69)"></circle>
+  <circle r="14" z="926" transform="translate(70,11)"></circle>
+  <circle r="14" z="859" transform="translate(63,117)"></circle>
+  <circle r="14" z="990" transform="translate(-87,-27)"></circle>
+  <circle r="14" z="927" transform="translate(19,-79)"></circle>
+  <circle r="14" z="890" transform="translate(-48,-62)"></circle>
+  <circle r="14" z="858" transform="translate(65,351)"></circle>
+  <circle r="14" z="876" transform="translate(173,55)"></circle>
+  <circle r="14" z="861" transform="translate(244,-384)"></circle>
+  <circle r="14" z="841" transform="translate(13,17)"></circle>
+  <circle r="14" z="830" transform="translate(175,114)"></circle>
+  <circle r="14" z="931" transform="translate(-80,71)"></circle>
+  <circle r="14" z="794" transform="translate(189,-121)"></circle>
+  <circle r="14" z="790" transform="translate(295,-147)"></circle>
+  <circle r="14" z="966" transform="translate(-90,8)"></circle>
+  <circle r="14" z="961" transform="translate(-45,61)"></circle>
+  <circle r="14" z="786" transform="translate(191,-224)"></circle>
+  <circle r="14" z="920" transform="translate(-70,60)"></circle>
+  <circle r="14" z="935" transform="translate(-47,-119)"></circle>
+  <circle r="14" z="829" transform="translate(240,-275)"></circle>
+  <circle r="14" z="905" transform="translate(-110,-50)"></circle>
+  <circle r="14" z="848" transform="translate(7,1)"></circle>
+  <circle r="14" z="817" transform="translate(257,-243)"></circle>
+  <circle r="14" z="984" transform="translate(-111,-89)"></circle>
+  <circle r="14" z="803" transform="translate(228,-236)"></circle>
+  <circle r="14" z="963" transform="translate(-133,137)"></circle>
+  <circle r="14" z="926" transform="translate(-46,44)"></circle>
+  <circle r="14" z="829" transform="translate(216,60)"></circle>
+  <circle r="14" z="951" transform="translate(-11,-96)"></circle>
+  <circle r="14" z="820" transform="translate(206,91)"></circle>
+  <circle r="14" z="806" transform="translate(249,-26)"></circle>
+  <circle r="14" z="789" transform="translate(204,22)"></circle>
+  <circle r="14" z="861" transform="translate(157,-46)"></circle>
+  <circle r="14" z="1000" transform="translate(-24,250)"></circle>
+  <circle r="14" z="941" transform="translate(38,-14)"></circle>
+  <circle r="14" z="906" transform="translate(-87,45)"></circle>
+  <circle r="14" z="822" transform="translate(237,-267)"></circle>
+  <circle r="14" z="862" transform="translate(79,343)"></circle>
+  <circle r="14" z="977" transform="translate(-50,88)"></circle>
+  <circle r="14" z="831" transform="translate(218,31)"></circle>
+  <circle r="14" z="788" transform="translate(228,-221)"></circle>
+  <circle r="14" z="823" transform="translate(227,8)"></circle>
+  <circle r="14" z="959" transform="translate(-137,94)"></circle>
+  <circle r="14" z="884" transform="translate(158,101)"></circle>
+  <circle r="14" z="801" transform="translate(250,-215)"></circle>
+  <circle r="14" z="862" transform="translate(181,91)"></circle>
+  <circle r="14" z="1000" transform="translate(-71,194)"></circle>
+  <circle r="14" z="887" transform="translate(124,90)"></circle>
+  <circle r="14" z="841" transform="translate(14,10)"></circle>
+  <circle r="14" z="911" transform="translate(-125,-11)"></circle>
+  <circle r="14" z="934" transform="translate(-64,-122)"></circle>
+  <circle r="14" z="800" transform="translate(224,-236)"></circle>
+  <circle r="14" z="792" transform="translate(230,13)"></circle>
+  <circle r="14" z="847" transform="translate(0,25)"></circle>
+  <circle r="14" z="790" transform="translate(212,-223)"></circle>
+  <circle r="14" z="845" transform="translate(64,254)"></circle>
+  <circle r="14" z="953" transform="translate(-152,-44)"></circle>
+  <circle r="14" z="878" transform="translate(119,117)"></circle>
+  <circle r="14" z="868" transform="translate(159,-35)"></circle>
+  <circle r="14" z="932" transform="translate(58,-1)"></circle>
+  <circle r="14" z="786" transform="translate(253,-220)"></circle>
+  <circle r="14" z="960" transform="translate(-0,-79)"></circle>
+  <circle r="14" z="887" transform="translate(73,-63)"></circle>
+  <circle r="14" z="883" transform="translate(45,106)"></circle>
+  <circle r="14" z="935" transform="translate(-145,-78)"></circle>
+  <circle r="14" z="967" transform="translate(-113,108)"></circle>
+  <circle r="14" z="860" transform="translate(194,56)"></circle>
+  <circle r="14" z="801" transform="translate(273,-218)"></circle>
+  <circle r="14" z="826" transform="translate(225,-271)"></circle>
+  <circle r="14" z="828" transform="translate(222,27)"></circle>
+  <circle r="14" z="834" transform="translate(214,42)"></circle>
+  <circle r="14" z="818" transform="translate(179,-81)"></circle>
+  <circle r="14" z="928" transform="translate(50,40)"></circle>
+  <circle r="14" z="993" transform="translate(-77,143)"></circle>
+  <circle r="14" z="788" transform="translate(210,-224)"></circle>
+  <circle r="14" z="937" transform="translate(-127,64)"></circle>
+  <circle r="14" z="821" transform="translate(218,-59)"></circle>
+  <circle r="14" z="957" transform="translate(-56,42)"></circle>
+  <circle r="14" z="970" transform="translate(-132,98)"></circle>
+  <circle r="14" z="885" transform="translate(24,103)"></circle>
+  <circle r="14" z="954" transform="translate(-116,57)"></circle>
+  <circle r="14" z="879" transform="translate(3,-70)"></circle>
+  <circle r="14" z="855" transform="translate(175,105)"></circle>
+  <circle r="14" z="919" transform="translate(-120,48)"></circle>
+  <circle r="14" z="934" transform="translate(-147,-48)"></circle>
+  <circle r="14" z="897" transform="translate(105,-25)"></circle>
+  <circle r="14" z="911" transform="translate(-113,-67)"></circle>
+  <circle r="14" z="818" transform="translate(76,124)"></circle>
+  <circle r="14" z="991" transform="translate(-93,-39)"></circle>
+  <circle r="14" z="831" transform="translate(170,-61)"></circle>
+  <circle r="14" z="784" transform="translate(129,-299)"></circle>
+  <circle r="14" z="952" transform="translate(-123,113)"></circle>
+  <circle r="14" z="980" transform="translate(-43,76)"></circle>
+  <circle r="14" z="860" transform="translate(79,349)"></circle>
+  <circle r="14" z="856" transform="translate(71,263)"></circle>
+  <circle r="14" z="858" transform="translate(193,18)"></circle>
+  <circle r="14" z="983" transform="translate(-45,23)"></circle>
+  <circle r="14" z="823" transform="translate(228,1)"></circle>
+  <circle r="14" z="820" transform="translate(216,-76)"></circle>
+  <circle r="14" z="923" transform="translate(-139,-55)"></circle>
+  <circle r="14" z="798" transform="translate(271,-128)"></circle>
+  <circle r="14" z="963" transform="translate(-147,-59)"></circle>
+  <circle r="14" z="805" transform="translate(142,-14)"></circle>
+  <circle r="14" z="816" transform="translate(243,-208)"></circle>
+  <circle r="14" z="948" transform="translate(-110,108)"></circle>
+  <circle r="14" z="909" transform="translate(-113,23)"></circle>
+  <circle r="14" z="882" transform="translate(125,138)"></circle>
+  <circle r="14" z="932" transform="translate(55,19)"></circle>
+  <circle r="14" z="969" transform="translate(-50,76)"></circle>
+  <circle r="14" z="789" transform="translate(109,-326)"></circle>
+  <circle r="14" z="804" transform="translate(102,43)"></circle>
+  <circle r="14" z="878" transform="translate(40,108)"></circle>
+  <circle r="14" z="988" transform="translate(-51,77)"></circle>
+  <circle r="14" z="824" transform="translate(57,128)"></circle>
+  <circle r="14" z="909" transform="translate(19,86)"></circle>
+  <circle r="14" z="949" transform="translate(-127,62)"></circle>
+  <circle r="14" z="939" transform="translate(-27,32)"></circle>
+  <circle r="14" z="956" transform="translate(-45,52)"></circle>
+  <circle r="14" z="847" transform="translate(9,6)"></circle>
+  <circle r="14" z="851" transform="translate(70,300)"></circle>
+  <circle r="14" z="842" transform="translate(196,-20)"></circle>
+  <circle r="14" z="908" transform="translate(-8,82)"></circle>
+  <circle r="14" z="929" transform="translate(-37,46)"></circle>
+  <circle r="14" z="818" transform="translate(216,-91)"></circle>
+  <circle r="14" z="969" transform="translate(-113,156)"></circle>
+  <circle r="14" z="838" transform="translate(211,24)"></circle>
+  <circle r="14" z="991" transform="translate(-73,149)"></circle>
+  <circle r="14" z="807" transform="translate(86,-376)"></circle>
+  <circle r="14" z="884" transform="translate(-70,-8)"></circle>
+  <circle r="14" z="864" transform="translate(74,362)"></circle>
+  <circle r="14" z="777" transform="translate(239,-118)"></circle>
+  <circle r="14" z="811" transform="translate(248,-231)"></circle>
+  <circle r="14" z="810" transform="translate(219,-223)"></circle>
+  <circle r="14" z="943" transform="translate(36,-28)"></circle>
+  <circle r="14" z="880" transform="translate(-50,-34)"></circle>
+  <circle r="14" z="830" transform="translate(51,131)"></circle>
+  <circle r="14" z="858" transform="translate(-25,56)"></circle>
+  <circle r="14" z="953" transform="translate(-93,-127)"></circle>
+  <circle r="14" z="934" transform="translate(-131,47)"></circle>
+  <circle r="14" z="825" transform="translate(258,-267)"></circle>
+  <circle r="14" z="972" transform="translate(-68,39)"></circle>
+  <circle r="14" z="841" transform="translate(176,-46)"></circle>
+  <circle r="14" z="976" transform="translate(-124,205)"></circle>
+  <circle r="14" z="818" transform="translate(146,120)"></circle>
+  <circle r="14" z="927" transform="translate(58,-30)"></circle>
+  <circle r="14" z="787" transform="translate(198,-101)"></circle>
+  <circle r="14" z="801" transform="translate(270,-220)"></circle>
+  <circle r="14" z="839" transform="translate(181,-44)"></circle>
+  <circle r="14" z="961" transform="translate(-137,-5)"></circle>
+  <circle r="14" z="986" transform="translate(-51,45)"></circle>
+  <circle r="14" z="844" transform="translate(54,161)"></circle>
+  <circle r="14" z="917" transform="translate(-128,-73)"></circle>
+  <circle r="14" z="942" transform="translate(-74,32)"></circle>
+  <circle r="14" z="830" transform="translate(25,66)"></circle>
+  <circle r="14" z="791" transform="translate(192,35)"></circle>
+  <circle r="14" z="1006" transform="translate(-59,189)"></circle>
+  <circle r="14" z="994" transform="translate(-63,83)"></circle>
+  <circle r="14" z="879" transform="translate(123,140)"></circle>
+  <circle r="14" z="800" transform="translate(136,42)"></circle>
+  <circle r="14" z="786" transform="translate(106,-349)"></circle>
+  <circle r="14" z="933" transform="translate(26,42)"></circle>
+  <circle r="14" z="965" transform="translate(-146,-58)"></circle>
+  <circle r="14" z="804" transform="translate(121,81)"></circle>
+  <circle r="14" z="961" transform="translate(-19,55)"></circle>
+  <circle r="14" z="924" transform="translate(-139,-59)"></circle>
+  <circle r="14" z="953" transform="translate(-92,-127)"></circle>
+  <circle r="14" z="885" transform="translate(126,119)"></circle>
+  <circle r="14" z="838" transform="translate(86,-62)"></circle>
+  <circle r="14" z="823" transform="translate(244,-257)"></circle>
+  <circle r="14" z="844" transform="translate(139,-64)"></circle>
+  <circle r="14" z="804" transform="translate(151,-271)"></circle>
+  <circle r="14" z="1000" transform="translate(-72,104)"></circle>
+  <circle r="14" z="878" transform="translate(170,61)"></circle>
+  <circle r="14" z="807" transform="translate(186,-122)"></circle>
+  <circle r="14" z="980" transform="translate(-49,84)"></circle>
+  <circle r="14" z="818" transform="translate(233,-23)"></circle>
+  <circle r="14" z="943" transform="translate(-129,61)"></circle>
+  <circle r="14" z="980" transform="translate(-128,-61)"></circle>
+  <circle r="14" z="890" transform="translate(113,75)"></circle>
+  <circle r="14" z="834" transform="translate(90,213)"></circle>
+  <circle r="14" z="821" transform="translate(89,-32)"></circle>
+  <circle r="14" z="864" transform="translate(149,142)"></circle>
+  <circle r="14" z="887" transform="translate(135,136)"></circle>
+  <circle r="14" z="890" transform="translate(1,-84)"></circle>
+  <circle r="14" z="889" transform="translate(-82,5)"></circle>
+  <circle r="14" z="849" transform="translate(1,13)"></circle>
+  <circle r="14" z="859" transform="translate(157,127)"></circle>
+  <circle r="14" z="788" transform="translate(193,-38)"></circle>
+  <circle r="14" z="857" transform="translate(-25,33)"></circle>
+  <circle r="14" z="993" transform="translate(-63,71)"></circle>
+  <circle r="14" z="975" transform="translate(-14,-23)"></circle>
+  <circle r="14" z="782" transform="translate(296,-131)"></circle>
+  <circle r="14" z="959" transform="translate(-111,-117)"></circle>
+  <circle r="14" z="781" transform="translate(295,-190)"></circle>
+  <circle r="14" z="787" transform="translate(143,-275)"></circle>
+  <circle r="14" z="968" transform="translate(-130,176)"></circle>
+  <circle r="14" z="874" transform="translate(67,-73)"></circle>
+  <circle r="14" z="895" transform="translate(131,259)"></circle>
+  <circle r="14" z="800" transform="translate(243,5)"></circle>
+  <circle r="14" z="878" transform="translate(161,-9)"></circle>
+  <circle r="14" z="844" transform="translate(149,-60)"></circle>
+  <circle r="14" z="906" transform="translate(132,298)"></circle>
+  <circle r="14" z="946" transform="translate(-70,-127)"></circle>
+  <circle r="14" z="863" transform="translate(136,135)"></circle>
+  <circle r="14" z="895" transform="translate(-100,-13)"></circle>
+  <circle r="14" z="767" transform="translate(331,-166)"></circle>
+  <circle r="14" z="905" transform="translate(61,83)"></circle>
+  <circle r="14" z="830" transform="translate(64,174)"></circle>
+  <circle r="14" z="1000" transform="translate(-30,238)"></circle>
+  <circle r="14" z="884" transform="translate(125,174)"></circle>
+  <circle r="14" z="933" transform="translate(-12,47)"></circle>
+  <circle r="14" z="996" transform="translate(-62,206)"></circle>
+  <circle r="14" z="873" transform="translate(174,103)"></circle>
+  <circle r="14" z="848" transform="translate(68,281)"></circle>
+  <circle r="14" z="857" transform="translate(248,-328)"></circle>
+  <circle r="14" z="848" transform="translate(202,62)"></circle>
+  <circle r="14" z="959" transform="translate(-147,-72)"></circle>
+  <circle r="14" z="934" transform="translate(-115,-108)"></circle>
+  <circle r="14" z="965" transform="translate(-144,-73)"></circle>
+  <circle r="14" z="981" transform="translate(-34,-76)"></circle>
+  <circle r="14" z="805" transform="translate(227,-233)"></circle>
+  <circle r="14" z="894" transform="translate(-49,61)"></circle>
+  <circle r="14" z="919" transform="translate(-101,67)"></circle>
+  <circle r="14" z="949" transform="translate(-17,-103)"></circle>
+  <circle r="14" z="979" transform="translate(-73,94)"></circle>
+  <circle r="14" z="966" transform="translate(-111,112)"></circle>
+  <circle r="14" z="913" transform="translate(-63,53)"></circle>
+  <circle r="14" z="967" transform="translate(-92,266)"></circle>
+  <circle r="14" z="817" transform="translate(105,-29)"></circle>
+  <circle r="14" z="967" transform="translate(-114,141)"></circle>
+  <circle r="14" z="837" transform="translate(37,104)"></circle>
+  <circle r="14" z="786" transform="translate(225,-14)"></circle>
+  <circle r="14" z="972" transform="translate(-69,67)"></circle>
+  <circle r="14" z="817" transform="translate(113,124)"></circle>
+  <circle r="14" z="954" transform="translate(-24,53)"></circle>
+  <circle r="14" z="940" transform="translate(-40,-116)"></circle>
+  <circle r="14" z="999" transform="translate(-74,88)"></circle>
+  <circle r="14" z="969" transform="translate(-132,-28)"></circle>
+  <circle r="14" z="886" transform="translate(127,102)"></circle>
+  <circle r="14" z="806" transform="translate(244,2)"></circle>
+  <circle r="14" z="873" transform="translate(-46,-9)"></circle>
+  <circle r="14" z="914" transform="translate(-31,-106)"></circle>
+  <circle r="14" z="969" transform="translate(-119,-109)"></circle>
+  <circle r="14" z="943" transform="translate(-38,31)"></circle>
+  <circle r="14" z="843" transform="translate(204,71)"></circle>
+  <circle r="14" z="874" transform="translate(130,157)"></circle>
+  <circle r="14" z="974" transform="translate(-54,-116)"></circle>
+  <circle r="14" z="839" transform="translate(47,133)"></circle>
+  <circle r="14" z="841" transform="translate(145,-63)"></circle>
+  <circle r="14" z="804" transform="translate(273,-195)"></circle>
+  <circle r="14" z="983" transform="translate(-39,59)"></circle>
+  <circle r="14" z="820" transform="translate(229,-33)"></circle>
+  <circle r="14" z="842" transform="translate(60,237)"></circle>
+  <circle r="14" z="824" transform="translate(226,14)"></circle>
+  <circle r="14" z="948" transform="translate(-152,-43)"></circle>
+  <circle r="14" z="852" transform="translate(77,292)"></circle>
+  <circle r="14" z="903" transform="translate(138,319)"></circle>
+  <circle r="14" z="833" transform="translate(255,-256)"></circle>
+  <circle r="14" z="991" transform="translate(-70,-32)"></circle>
+  <circle r="14" z="903" transform="translate(-111,-35)"></circle>
+  <circle r="14" z="981" transform="translate(-28,-12)"></circle>
+  <circle r="14" z="978" transform="translate(-66,19)"></circle>
+  <circle r="14" z="921" transform="translate(-92,-102)"></circle>
+  <circle r="14" z="814" transform="translate(260,-232)"></circle>
+  <circle r="14" z="888" transform="translate(134,231)"></circle>
+  <circle r="14" z="870" transform="translate(95,-69)"></circle>
+  <circle r="14" z="852" transform="translate(197,7)"></circle>
+  <circle r="14" z="907" transform="translate(-92,44)"></circle>
+  <circle r="14" z="809" transform="translate(214,-218)"></circle>
+  <circle r="14" z="906" transform="translate(20,-87)"></circle>
+  <circle r="14" z="987" transform="translate(-124,-77)"></circle>
+  <circle r="14" z="895" transform="translate(-59,-67)"></circle>
+  <circle r="14" z="932" transform="translate(-145,-43)"></circle>
+  <circle r="14" z="815" transform="translate(233,-187)"></circle>
+  <circle r="14" z="821" transform="translate(216,-55)"></circle>
+  <circle r="14" z="812" transform="translate(255,-234)"></circle>
+  <circle r="14" z="896" transform="translate(-59,-68)"></circle>
+  <circle r="14" z="858" transform="translate(246,-327)"></circle>
+  <circle r="14" z="785" transform="translate(240,-219)"></circle>
+  <circle r="14" z="921" transform="translate(-134,-3)"></circle>
+  <circle r="14" z="868" transform="translate(-19,-33)"></circle>
+  <circle r="14" z="1006" transform="translate(-44,225)"></circle>
+  <circle r="14" z="975" transform="translate(-117,259)"></circle>
+  <circle r="14" z="792" transform="translate(290,-190)"></circle>
+  <circle r="14" z="976" transform="translate(-71,49)"></circle>
+  <circle r="14" z="803" transform="translate(146,-7)"></circle>
+  <circle r="14" z="853" transform="translate(78,263)"></circle>
+  <circle r="14" z="864" transform="translate(190,37)"></circle>
+  <circle r="14" z="950" transform="translate(-47,-120)"></circle>
+  <circle r="14" z="963" transform="translate(-111,93)"></circle>
+  <circle r="14" z="794" transform="translate(288,-169)"></circle>
+  <circle r="14" z="856" transform="translate(13,-28)"></circle>
+  <circle r="14" z="825" transform="translate(171,117)"></circle>
+  <circle r="14" z="857" transform="translate(156,-51)"></circle>
+  <circle r="14" z="885" transform="translate(158,23)"></circle>
+  <circle r="14" z="981" transform="translate(-34,49)"></circle>
+  <circle r="14" z="843" transform="translate(200,-6)"></circle>
+  <circle r="14" z="771" transform="translate(283,-165)"></circle>
+  <circle r="14" z="939" transform="translate(38,-36)"></circle>
+  <circle r="14" z="851" transform="translate(173,108)"></circle>
+  <circle r="14" z="781" transform="translate(191,-239)"></circle>
+  <circle r="14" z="921" transform="translate(-1,69)"></circle>
+  <circle r="14" z="797" transform="translate(259,-225)"></circle>
+  <circle r="14" z="779" transform="translate(263,-208)"></circle>
+  <circle r="14" z="806" transform="translate(240,21)"></circle>
+  <circle r="14" z="990" transform="translate(-22,257)"></circle>
+  <circle r="14" z="893" transform="translate(136,52)"></circle>
+  <circle r="14" z="884" transform="translate(158,62)"></circle>
+  <circle r="14" z="946" transform="translate(32,-10)"></circle>
+  <circle r="14" z="811" transform="translate(243,-49)"></circle>
+  <circle r="14" z="803" transform="translate(255,-70)"></circle>
+  <circle r="14" z="898" transform="translate(-88,-50)"></circle>
+  <circle r="14" z="957" transform="translate(3,22)"></circle>
+  <circle r="14" z="879" transform="translate(154,201)"></circle>
+  <circle r="14" z="854" transform="translate(75,257)"></circle>
+  <circle r="14" z="849" transform="translate(152,-59)"></circle>
+  <circle r="14" z="873" transform="translate(57,-76)"></circle>
+  <circle r="14" z="864" transform="translate(-0,97)"></circle>
+  <circle r="14" z="895" transform="translate(-99,-22)"></circle>
+  <circle r="14" z="903" transform="translate(76,-48)"></circle>
+  <circle r="14" z="817" transform="translate(117,123)"></circle>
+  <circle r="14" z="923" transform="translate(-132,-79)"></circle>
+  <circle r="14" z="958" transform="translate(-69,20)"></circle>
+  <circle r="14" z="898" transform="translate(-102,-34)"></circle>
+  <circle r="14" z="832" transform="translate(208,83)"></circle>
+  <circle r="14" z="819" transform="translate(160,-64)"></circle>
+  <circle r="14" z="973" transform="translate(-128,207)"></circle>
+  <circle r="14" z="877" transform="translate(167,133)"></circle>
+  <circle r="14" z="981" transform="translate(-30,8)"></circle>
+  <circle r="14" z="939" transform="translate(-144,-81)"></circle>
+  <circle r="14" z="759" transform="translate(337,-162)"></circle>
+  <circle r="14" z="772" transform="translate(246,-140)"></circle>
+  <circle r="14" z="873" transform="translate(154,-34)"></circle>
+  <circle r="14" z="828" transform="translate(56,143)"></circle>
+  <circle r="14" z="892" transform="translate(144,262)"></circle>
+  <circle r="14" z="927" transform="translate(-125,56)"></circle>
+  <circle r="14" z="867" transform="translate(141,157)"></circle>
+  <circle r="14" z="776" transform="translate(257,-206)"></circle>
+  <circle r="14" z="774" transform="translate(235,-161)"></circle>
+  <circle r="14" z="951" transform="translate(-146,-73)"></circle>
+  <circle r="14" z="814" transform="translate(66,32)"></circle>
+  <circle r="14" z="794" transform="translate(166,6)"></circle>
+  <circle r="14" z="772" transform="translate(252,-187)"></circle>
+  <circle r="14" z="853" transform="translate(-16,30)"></circle>
+  <circle r="14" z="780" transform="translate(286,-125)"></circle>
+  <circle r="14" z="898" transform="translate(158,338)"></circle>
+  <circle r="14" z="800" transform="translate(177,82)"></circle>
+  <circle r="14" z="969" transform="translate(-8,28)"></circle>
+  <circle r="14" z="958" transform="translate(-97,286)"></circle>
+  <circle r="14" z="896" transform="translate(113,-21)"></circle>
+  <circle r="14" z="919" transform="translate(54,63)"></circle>
+  <circle r="14" z="822" transform="translate(119,-47)"></circle>
+  <circle r="14" z="901" transform="translate(59,91)"></circle>
+  <circle r="14" z="808" transform="translate(103,94)"></circle>
+  <circle r="14" z="812" transform="translate(251,-207)"></circle>
+  <circle r="14" z="986" transform="translate(-75,-88)"></circle>
+  <circle r="14" z="788" transform="translate(204,8)"></circle>
+  <circle r="14" z="910" transform="translate(-116,-60)"></circle>
+  <circle r="14" z="899" transform="translate(-19,87)"></circle>
+  <circle r="14" z="788" transform="translate(162,-270)"></circle>
+  <circle r="14" z="876" transform="translate(119,120)"></circle>
+  <circle r="14" z="902" transform="translate(-60,50)"></circle>
+  <circle r="14" z="834" transform="translate(86,-57)"></circle>
+  <circle r="14" z="861" transform="translate(60,-68)"></circle>
+  <circle r="14" z="816" transform="translate(116,122)"></circle>
+  <circle r="14" z="968" transform="translate(-134,155)"></circle>
+  <circle r="14" z="877" transform="translate(19,105)"></circle>
+  <circle r="14" z="1001" transform="translate(-47,210)"></circle>
+  <circle r="14" z="907" transform="translate(151,327)"></circle>
+  <circle r="14" z="969" transform="translate(-105,277)"></circle>
+  <circle r="14" z="996" transform="translate(-52,213)"></circle>
+  <circle r="14" z="915" transform="translate(70,-41)"></circle>
+  <circle r="14" z="834" transform="translate(20,27)"></circle>
+  <circle r="14" z="783" transform="translate(229,-42)"></circle>
+  <circle r="14" z="964" transform="translate(-132,81)"></circle>
+  <circle r="14" z="811" transform="translate(173,-76)"></circle>
+  <circle r="14" z="905" transform="translate(-59,51)"></circle>
+  <circle r="14" z="844" transform="translate(167,113)"></circle>
+  <circle r="14" z="816" transform="translate(57,64)"></circle>
+  <circle r="14" z="802" transform="translate(185,-118)"></circle>
+  <circle r="14" z="803" transform="translate(274,-175)"></circle>
+  <circle r="14" z="978" transform="translate(-64,-110)"></circle>
+  <circle r="14" z="917" transform="translate(-38,59)"></circle>
+  <circle r="14" z="803" transform="translate(184,85)"></circle>
+  <circle r="14" z="990" transform="translate(-31,249)"></circle>
+  <circle r="14" z="832" transform="translate(96,185)"></circle>
+  <circle r="14" z="981" transform="translate(-76,95)"></circle>
+  <circle r="14" z="999" transform="translate(-72,185)"></circle>
+  <circle r="14" z="872" transform="translate(133,160)"></circle>
+  <circle r="14" z="891" transform="translate(-22,-79)"></circle>
+  <circle r="14" z="857" transform="translate(-20,13)"></circle>
+  <circle r="14" z="818" transform="translate(99,-28)"></circle>
+  <circle r="14" z="813" transform="translate(242,-155)"></circle>
+  <circle r="14" z="973" transform="translate(-139,-64)"></circle>
+  <circle r="14" z="809" transform="translate(263,-163)"></circle>
+  <circle r="14" z="817" transform="translate(224,-90)"></circle>
+  <circle r="14" z="895" transform="translate(100,80)"></circle>
+  <circle r="14" z="955" transform="translate(-52,45)"></circle>
+  <circle r="14" z="964" transform="translate(-44,66)"></circle>
+  <circle r="14" z="927" transform="translate(46,-53)"></circle>
+  <circle r="14" z="831" transform="translate(73,194)"></circle>
+  <circle r="14" z="933" transform="translate(-125,70)"></circle>
+  <circle r="14" z="828" transform="translate(221,32)"></circle>
+  <circle r="14" z="809" transform="translate(180,-96)"></circle>
+  <circle r="14" z="800" transform="translate(142,11)"></circle>
+  <circle r="14" z="891" transform="translate(139,2)"></circle>
+  <circle r="14" z="772" transform="translate(289,-170)"></circle>
+  <circle r="14" z="931" transform="translate(32,-63)"></circle>
+  <circle r="14" z="952" transform="translate(-152,-46)"></circle>
+  <circle r="14" z="830" transform="translate(206,-39)"></circle>
+  <circle r="14" z="832" transform="translate(253,-241)"></circle>
+  <circle r="14" z="843" transform="translate(195,86)"></circle>
+  <circle r="14" z="779" transform="translate(183,-254)"></circle>
+  <circle r="14" z="886" transform="translate(148,-1)"></circle>
+  <circle r="14" z="900" transform="translate(-38,69)"></circle>
+  <circle r="14" z="910" transform="translate(4,84)"></circle>
+  <circle r="14" z="853" transform="translate(177,-25)"></circle>
+  <circle r="14" z="966" transform="translate(-114,236)"></circle>
+  <circle r="14" z="845" transform="translate(105,-73)"></circle>
+  <circle r="14" z="814" transform="translate(179,-92)"></circle>
+  <circle r="14" z="794" transform="translate(164,16)"></circle>
+  <circle r="14" z="927" transform="translate(-127,49)"></circle>
+  <circle r="14" z="887" transform="translate(72,101)"></circle>
+  <circle r="14" z="888" transform="translate(149,14)"></circle>
+  <circle r="14" z="961" transform="translate(11,-37)"></circle>
+  <circle r="14" z="878" transform="translate(154,198)"></circle>
+  <circle r="14" z="900" transform="translate(29,93)"></circle>
+  <circle r="14" z="884" transform="translate(-5,-74)"></circle>
+  <circle r="14" z="790" transform="translate(112,-363)"></circle>
+  <circle r="14" z="954" transform="translate(-57,35)"></circle>
+  <circle r="14" z="814" transform="translate(246,-184)"></circle>
+  <circle r="14" z="904" transform="translate(6,-93)"></circle>
+  <circle r="14" z="949" transform="translate(15,-67)"></circle>
+  <circle r="14" z="896" transform="translate(119,56)"></circle>
+  <circle r="14" z="946" transform="translate(-148,-6)"></circle>
+  <circle r="14" z="963" transform="translate(-82,279)"></circle>
+  <circle r="14" z="784" transform="translate(191,-235)"></circle>
+  <circle r="14" z="888" transform="translate(71,101)"></circle>
+  <circle r="14" z="834" transform="translate(90,207)"></circle>
+  <circle r="14" z="903" transform="translate(99,-18)"></circle>
+  <circle r="14" z="945" transform="translate(-97,-121)"></circle>
+  <circle r="14" z="987" transform="translate(-63,108)"></circle>
+  <circle r="14" z="806" transform="translate(92,58)"></circle>
+  <circle r="14" z="891" transform="translate(142,262)"></circle>
+  <circle r="14" z="836" transform="translate(27,-0)"></circle>
+  <circle r="14" z="826" transform="translate(36,79)"></circle>
+  <circle r="14" z="812" transform="translate(242,-57)"></circle>
+  <circle r="14" z="882" transform="translate(-41,65)"></circle>
+  <circle r="14" z="958" transform="translate(-128,-104)"></circle>
+  <circle r="14" z="886" transform="translate(6,100)"></circle>
+  <circle r="14" z="880" transform="translate(141,219)"></circle>
+  <circle r="14" z="802" transform="translate(178,88)"></circle>
+  <circle r="14" z="772" transform="translate(254,-169)"></circle>
+  <circle r="14" z="976" transform="translate(-15,-28)"></circle>
+  <circle r="14" z="884" transform="translate(1,98)"></circle>
+  <circle r="14" z="927" transform="translate(51,41)"></circle>
+  <circle r="14" z="983" transform="translate(-79,-96)"></circle>
+  <circle r="14" z="758" transform="translate(328,-130)"></circle>
+  <circle r="14" z="849" transform="translate(180,-28)"></circle>
+  <circle r="14" z="991" transform="translate(-92,-44)"></circle>
+  <circle r="14" z="798" transform="translate(200,65)"></circle>
+  <circle r="14" z="826" transform="translate(236,-259)"></circle>
+  <circle r="14" z="793" transform="translate(197,-197)"></circle>
+  <circle r="14" z="952" transform="translate(-77,17)"></circle>
+  <circle r="14" z="840" transform="translate(42,-33)"></circle>
+  <circle r="14" z="806" transform="translate(242,-223)"></circle>
+  <circle r="14" z="781" transform="translate(283,-199)"></circle>
+  <circle r="14" z="856" transform="translate(240,-338)"></circle>
+  <circle r="14" z="958" transform="translate(-115,67)"></circle>
+  <circle r="14" z="943" transform="translate(-151,-14)"></circle>
+  <circle r="14" z="982" transform="translate(-59,-102)"></circle>
+  <circle r="14" z="887" transform="translate(146,0)"></circle>
+  <circle r="14" z="849" transform="translate(87,217)"></circle>
+  <circle r="14" z="886" transform="translate(146,124)"></circle>
+  <circle r="14" z="928" transform="translate(21,-77)"></circle>
+  <circle r="14" z="969" transform="translate(-82,-119)"></circle>
+  <circle r="14" z="894" transform="translate(-96,-20)"></circle>
+  <circle r="14" z="807" transform="translate(236,37)"></circle>
+  <circle r="14" z="906" transform="translate(89,67)"></circle>
+  <circle r="14" z="863" transform="translate(-3,-34)"></circle>
+  <circle r="14" z="814" transform="translate(239,-131)"></circle>
+  <circle r="14" z="904" transform="translate(96,-20)"></circle>
+  <circle r="14" z="776" transform="translate(248,-119)"></circle>
+  <circle r="14" z="841" transform="translate(175,-48)"></circle>
+  <circle r="14" z="970" transform="translate(-129,200)"></circle>
+  <circle r="14" z="832" transform="translate(141,126)"></circle>
+  <circle r="14" z="856" transform="translate(34,-51)"></circle>
+  <circle r="14" z="813" transform="translate(238,-103)"></circle>
+  <circle r="14" z="881" transform="translate(165,41)"></circle>
+  <circle r="14" z="892" transform="translate(145,35)"></circle>
+  <circle r="14" z="869" transform="translate(181,80)"></circle>
+  <circle r="14" z="930" transform="translate(-7,-100)"></circle>
+  <circle r="14" z="973" transform="translate(-66,26)"></circle>
+  <circle r="14" z="814" transform="translate(209,-166)"></circle>
+  <circle r="14" z="838" transform="translate(88,216)"></circle>
+  <circle r="14" z="883" transform="translate(162,48)"></circle>
+  <circle r="14" z="835" transform="translate(254,-279)"></circle>
+  <circle r="14" z="898" transform="translate(163,329)"></circle>
+  <circle r="14" z="977" transform="translate(-120,223)"></circle>
+  <circle r="14" z="772" transform="translate(285,-177)"></circle>
+  <circle r="14" z="802" transform="translate(242,13)"></circle>
+  <circle r="14" z="957" transform="translate(-136,-97)"></circle>
+  <circle r="14" z="914" transform="translate(-129,-9)"></circle>
+  <circle r="14" z="870" transform="translate(204,-389)"></circle>
+  <circle r="14" z="920" transform="translate(42,65)"></circle>
+  <circle r="14" z="782" transform="translate(158,-243)"></circle>
+  <circle r="14" z="855" transform="translate(79,360)"></circle>
+  <circle r="14" z="840" transform="translate(15,64)"></circle>
+  <circle r="14" z="785" transform="translate(173,-247)"></circle>
+  <circle r="14" z="772" transform="translate(284,-182)"></circle>
+  <circle r="14" z="909" transform="translate(-51,56)"></circle>
+  <circle r="14" z="805" transform="translate(165,101)"></circle>
+  <circle r="14" z="967" transform="translate(-137,132)"></circle>
+  <circle r="14" z="787" transform="translate(169,-269)"></circle>
+  <circle r="14" z="966" transform="translate(-18,-97)"></circle>
+  <circle r="14" z="955" transform="translate(16,-11)"></circle>
+  <circle r="14" z="774" transform="translate(319,-171)"></circle>
+  <circle r="14" z="782" transform="translate(164,-231)"></circle>
+  <circle r="14" z="808" transform="translate(83,70)"></circle>
+  <circle r="14" z="912" transform="translate(95,49)"></circle>
+  <circle r="14" z="803" transform="translate(131,79)"></circle>
+  <circle r="14" z="995" transform="translate(-36,235)"></circle>
+  <circle r="14" z="969" transform="translate(-31,-108)"></circle>
+  <circle r="14" z="879" transform="translate(90,-66)"></circle>
+  <circle r="14" z="897" transform="translate(-26,-85)"></circle>
+  <circle r="14" z="786" transform="translate(295,-174)"></circle>
+  <circle r="14" z="892" transform="translate(-85,-33)"></circle>
+  <circle r="14" z="890" transform="translate(129,189)"></circle>
+  <circle r="14" z="929" transform="translate(29,-69)"></circle>
+  <circle r="14" z="806" transform="translate(186,-120)"></circle>
+  <circle r="14" z="959" transform="translate(-128,8)"></circle>
+  <circle r="14" z="785" transform="translate(204,-120)"></circle>
+  <circle r="14" z="954" transform="translate(-115,58)"></circle>
+  <circle r="14" z="981" transform="translate(-63,22)"></circle>
+  <circle r="14" z="967" transform="translate(-29,67)"></circle>
+  <circle r="14" z="782" transform="translate(206,-170)"></circle>
+  <circle r="14" z="791" transform="translate(192,-234)"></circle>
+  <circle r="14" z="903" transform="translate(18,-88)"></circle>
+  <circle r="14" z="959" transform="translate(-31,61)"></circle>
+  <circle r="14" z="789" transform="translate(204,24)"></circle>
+  <circle r="14" z="925" transform="translate(-122,65)"></circle>
+  <circle r="14" z="952" transform="translate(-122,-108)"></circle>
+  <circle r="14" z="846" transform="translate(194,-13)"></circle>
+  <circle r="14" z="972" transform="translate(-70,54)"></circle>
+  <circle r="14" z="820" transform="translate(138,-50)"></circle>
+  <circle r="14" z="894" transform="translate(25,-85)"></circle>
+  <circle r="14" z="976" transform="translate(-132,-50)"></circle>
+  <circle r="14" z="983" transform="translate(-99,-99)"></circle>
+  <circle r="14" z="812" transform="translate(239,9)"></circle>
+  <circle r="14" z="877" transform="translate(81,107)"></circle>
+  <circle r="14" z="794" transform="translate(177,48)"></circle>
+  <circle r="14" z="983" transform="translate(-34,-9)"></circle>
+  <circle r="14" z="859" transform="translate(63,117)"></circle>
+  <circle r="14" z="951" transform="translate(0,-84)"></circle>
+  <circle r="14" z="884" transform="translate(159,108)"></circle>
+  <circle r="14" z="800" transform="translate(193,73)"></circle>
+  <circle r="14" z="897" transform="translate(133,28)"></circle>
+  <circle r="14" z="899" transform="translate(-95,-48)"></circle>
+  <circle r="14" z="911" transform="translate(72,-44)"></circle>
+  <circle r="14" z="988" transform="translate(-51,70)"></circle>
+  <circle r="14" z="874" transform="translate(-50,-5)"></circle>
+  <circle r="14" z="803" transform="translate(151,-271)"></circle>
+  <circle r="14" z="797" transform="translate(285,-200)"></circle>
+  <circle r="14" z="926" transform="translate(-133,24)"></circle>
+  <circle r="14" z="952" transform="translate(19,-55)"></circle>
+  <circle r="14" z="863" transform="translate(-34,47)"></circle>
+  <circle r="14" z="965" transform="translate(-105,3)"></circle>
+  <circle r="14" z="973" transform="translate(-117,173)"></circle>
+  <circle r="14" z="791" transform="translate(191,-82)"></circle>
+  <circle r="14" z="932" transform="translate(-109,88)"></circle>
+  <circle r="14" z="815" transform="translate(234,-189)"></circle>
+  <circle r="14" z="998" transform="translate(-77,150)"></circle>
+  <circle r="14" z="907" transform="translate(151,327)"></circle>
+  <circle r="14" z="888" transform="translate(145,95)"></circle>
+  <circle r="14" z="969" transform="translate(-91,5)"></circle>
+  <circle r="14" z="970" transform="translate(-141,120)"></circle>
+  <circle r="14" z="825" transform="translate(247,-219)"></circle>
+  <circle r="14" z="846" transform="translate(-0,53)"></circle>
+  <circle r="14" z="859" transform="translate(9,97)"></circle>
+  <circle r="14" z="995" transform="translate(-41,232)"></circle>
+  <circle r="14" z="897" transform="translate(-63,-68)"></circle>
+  <circle r="14" z="793" transform="translate(188,-82)"></circle>
+  <circle r="14" z="872" transform="translate(129,-57)"></circle>
+  <circle r="14" z="962" transform="translate(-10,-90)"></circle>
+  <circle r="14" z="864" transform="translate(82,356)"></circle>
+  <circle r="14" z="806" transform="translate(192,-165)"></circle>
+  <circle r="14" z="780" transform="translate(165,-231)"></circle>
+  <circle r="14" z="972" transform="translate(-110,265)"></circle>
+  <circle r="14" z="811" transform="translate(182,-103)"></circle>
+  <circle r="14" z="938" transform="translate(45,8)"></circle>
+  <circle r="14" z="974" transform="translate(-13,-65)"></circle>
+  <circle r="14" z="779" transform="translate(163,-225)"></circle>
+  <circle r="14" z="780" transform="translate(220,-121)"></circle>
+  <circle r="14" z="938" transform="translate(18,29)"></circle>
+  <circle r="14" z="971" transform="translate(-13,40)"></circle>
+  <circle r="14" z="885" transform="translate(60,104)"></circle>
+  <circle r="14" z="933" transform="translate(-124,72)"></circle>
+  <circle r="14" z="805" transform="translate(271,-187)"></circle>
+  <circle r="14" z="901" transform="translate(111,53)"></circle>
+  <circle r="14" z="914" transform="translate(-30,-107)"></circle>
+  <circle r="14" z="882" transform="translate(-47,58)"></circle>
+  <circle r="14" z="992" transform="translate(-83,80)"></circle>
+  <circle r="14" z="874" transform="translate(81,-69)"></circle>
+  <circle r="14" z="896" transform="translate(20,-87)"></circle>
+  <circle r="14" z="880" transform="translate(154,210)"></circle>
+  <circle r="14" z="788" transform="translate(198,-162)"></circle>
+  <circle r="14" z="877" transform="translate(162,-8)"></circle>
+  <circle r="14" z="774" transform="translate(239,-183)"></circle>
+  <circle r="14" z="919" transform="translate(-89,-99)"></circle>
+  <circle r="14" z="941" transform="translate(-126,83)"></circle>
+  <circle r="14" z="903" transform="translate(107,53)"></circle>
+  <circle r="14" z="849" transform="translate(178,-31)"></circle>
+  <circle r="14" z="956" transform="translate(-125,120)"></circle>
+  <circle r="14" z="934" transform="translate(-14,44)"></circle>
+  <circle r="14" z="973" transform="translate(-138,-79)"></circle>
+  <circle r="14" z="962" transform="translate(-131,146)"></circle>
+  <circle r="14" z="976" transform="translate(-124,229)"></circle>
+  <circle r="14" z="898" transform="translate(166,340)"></circle>
+  <circle r="14" z="964" transform="translate(-114,122)"></circle>
+  <circle r="14" z="967" transform="translate(-44,-120)"></circle>
+  <circle r="14" z="828" transform="translate(81,186)"></circle>
+  <circle r="14" z="918" transform="translate(65,-43)"></circle>
+  <circle r="14" z="889" transform="translate(-6,94)"></circle>
+  <circle r="14" z="890" transform="translate(78,-59)"></circle>
+  <circle r="14" z="976" transform="translate(-14,-1)"></circle>
+  <circle r="14" z="848" transform="translate(-1,30)"></circle>
+  <circle r="14" z="894" transform="translate(134,191)"></circle>
+  <circle r="14" z="784" transform="translate(220,-35)"></circle>
+  <circle r="14" z="982" transform="translate(-135,-84)"></circle>
+  <circle r="14" z="794" transform="translate(190,-126)"></circle>
+  <circle r="14" z="910" transform="translate(-3,-97)"></circle>
+  <circle r="14" z="948" transform="translate(-140,10)"></circle>
+  <circle r="14" z="947" transform="translate(-80,24)"></circle>
+  <circle r="14" z="849" transform="translate(79,141)"></circle>
+  <circle r="14" z="1001" transform="translate(-74,108)"></circle>
+  <circle r="14" z="854" transform="translate(147,126)"></circle>
+  <circle r="14" z="846" transform="translate(82,250)"></circle>
+  <circle r="14" z="864" transform="translate(32,-57)"></circle>
+  <circle r="14" z="790" transform="translate(172,-261)"></circle>
+  <circle r="14" z="839" transform="translate(159,120)"></circle>
+  <circle r="14" z="780" transform="translate(195,-237)"></circle>
+  <circle r="14" z="830" transform="translate(104,149)"></circle>
+  <circle r="14" z="872" transform="translate(-50,7)"></circle>
+  <circle r="14" z="953" transform="translate(-3,-87)"></circle>
+  <circle r="14" z="976" transform="translate(-83,3)"></circle>
+  <circle r="14" z="861" transform="translate(130,-69)"></circle>
+  <circle r="14" z="833" transform="translate(70,200)"></circle>
+  <circle r="14" z="795" transform="translate(197,-189)"></circle>
+  <circle r="14" z="785" transform="translate(253,-93)"></circle>
+  <circle r="14" z="823" transform="translate(151,123)"></circle>
+  <circle r="14" z="851" transform="translate(74,189)"></circle>
+  <circle r="14" z="827" transform="translate(84,-44)"></circle>
+  <circle r="14" z="872" transform="translate(156,-31)"></circle>
+  <circle r="14" z="786" transform="translate(197,-217)"></circle>
+  <circle r="14" z="917" transform="translate(81,-13)"></circle>
+  <circle r="14" z="825" transform="translate(92,158)"></circle>
+  <circle r="14" z="790" transform="translate(260,-220)"></circle>
+  <circle r="14" z="881" transform="translate(-38,68)"></circle>
+  <circle r="14" z="783" transform="translate(194,-233)"></circle>
+  <circle r="14" z="830" transform="translate(54,141)"></circle>
+  <circle r="14" z="893" transform="translate(136,7)"></circle>
+  <circle r="14" z="885" transform="translate(122,102)"></circle>
+  <circle r="14" z="791" transform="translate(262,-93)"></circle>
+  <circle r="14" z="809" transform="translate(107,2)"></circle>
+  <circle r="14" z="974" transform="translate(-13,-70)"></circle>
+  <circle r="14" z="910" transform="translate(101,45)"></circle>
+  <circle r="14" z="756" transform="translate(335,-135)"></circle>
+  <circle r="14" z="784" transform="translate(163,-245)"></circle>
+  <circle r="14" z="968" transform="translate(-7,-73)"></circle>
+  <circle r="14" z="809" transform="translate(254,-143)"></circle>
+  <circle r="14" z="791" transform="translate(193,33)"></circle>
+  <circle r="14" z="822" transform="translate(70,137)"></circle>
+  <circle r="14" z="817" transform="translate(105,126)"></circle>
+  <circle r="14" z="879" transform="translate(165,113)"></circle>
+  <circle r="14" z="871" transform="translate(148,-46)"></circle>
+  <circle r="14" z="955" transform="translate(-93,-128)"></circle>
+  <circle r="14" z="862" transform="translate(177,101)"></circle>
+  <circle r="14" z="808" transform="translate(266,-207)"></circle>
+  <circle r="14" z="823" transform="translate(195,107)"></circle>
+  <circle r="14" z="969" transform="translate(-139,-86)"></circle>
+  <circle r="14" z="816" transform="translate(175,-85)"></circle>
+  <circle r="14" z="921" transform="translate(76,40)"></circle>
+  <circle r="14" z="937" transform="translate(-147,-15)"></circle>
+  <circle r="14" z="811" transform="translate(241,-8)"></circle>
+  <circle r="14" z="921" transform="translate(-3,-97)"></circle>
+  <circle r="14" z="966" transform="translate(-79,-122)"></circle>
+  <circle r="14" z="926" transform="translate(-89,-107)"></circle>
+  <circle r="14" z="873" transform="translate(187,-399)"></circle>
+  <circle r="14" z="943" transform="translate(-79,45)"></circle>
+  <circle r="14" z="784" transform="translate(204,-218)"></circle>
+  <circle r="14" z="856" transform="translate(130,121)"></circle>
+  <circle r="14" z="921" transform="translate(64,-39)"></circle>
+  <circle r="14" z="790" transform="translate(184,-240)"></circle>
+  <circle r="14" z="771" transform="translate(257,-152)"></circle>
+  <circle r="14" z="826" transform="translate(204,94)"></circle>
+  <circle r="14" z="874" transform="translate(166,148)"></circle>
+  <circle r="14" z="989" transform="translate(-65,-72)"></circle>
+  <circle r="14" z="814" transform="translate(236,-109)"></circle>
+  <circle r="14" z="848" transform="translate(70,145)"></circle>
+  <circle r="14" z="915" transform="translate(-132,-32)"></circle>
+  <circle r="14" z="875" transform="translate(170,121)"></circle>
+  <circle r="14" z="976" transform="translate(-128,-98)"></circle>
+  <circle r="14" z="785" transform="translate(198,-227)"></circle>
+  <circle r="14" z="783" transform="translate(216,-63)"></circle>
+  <circle r="14" z="792" transform="translate(189,-233)"></circle>
+  <circle r="14" z="986" transform="translate(-64,108)"></circle>
+  <circle r="14" z="869" transform="translate(99,-69)"></circle>
+  <circle r="14" z="931" transform="translate(-55,35)"></circle>
+  <circle r="14" z="883" transform="translate(161,207)"></circle>
+  <circle r="14" z="989" transform="translate(-85,-23)"></circle>
+  <circle r="14" z="877" transform="translate(170,73)"></circle>
+  <circle r="14" z="877" transform="translate(170,79)"></circle>
+  <circle r="14" z="868" transform="translate(-38,59)"></circle>
+  <circle r="14" z="878" transform="translate(133,-45)"></circle>
+  <circle r="14" z="893" transform="translate(75,-61)"></circle>
+  <circle r="14" z="818" transform="translate(142,-47)"></circle>
+  <circle r="14" z="904" transform="translate(84,76)"></circle>
+  <circle r="14" z="977" transform="translate(-20,-76)"></circle>
+  <circle r="14" z="838" transform="translate(248,-284)"></circle>
+  <circle r="14" z="788" transform="translate(187,-254)"></circle>
+  <circle r="14" z="983" transform="translate(-126,-87)"></circle>
+  <circle r="14" z="796" transform="translate(287,-187)"></circle>
+  <circle r="14" z="965" transform="translate(-115,198)"></circle>
+  <circle r="14" z="880" transform="translate(51,107)"></circle>
+  <circle r="14" z="822" transform="translate(181,113)"></circle>
+  <circle r="14" z="783" transform="translate(168,-224)"></circle>
+  <circle r="14" z="848" transform="translate(65,164)"></circle>
+  <circle r="14" z="926" transform="translate(-99,79)"></circle>
+  <circle r="14" z="994" transform="translate(-48,250)"></circle>
+  <circle r="14" z="807" transform="translate(181,-100)"></circle>
+  <circle r="14" z="916" transform="translate(83,-14)"></circle>
+  <circle r="14" z="983" transform="translate(-91,-14)"></circle>
+  <circle r="14" z="846" transform="translate(19,87)"></circle>
+  <circle r="14" z="816" transform="translate(187,-99)"></circle>
+  <circle r="14" z="837" transform="translate(203,-286)"></circle>
+  <circle r="14" z="870" transform="translate(171,-408)"></circle>
+  <circle r="14" z="867" transform="translate(153,-45)"></circle>
+  <circle r="14" z="779" transform="translate(307,-170)"></circle>
+  <circle r="14" z="989" transform="translate(-89,-78)"></circle>
+  <circle r="14" z="839" transform="translate(56,164)"></circle>
+  <circle r="14" z="918" transform="translate(-126,24)"></circle>
+  <circle r="14" z="792" transform="translate(286,-207)"></circle>
+  <circle r="14" z="898" transform="translate(143,310)"></circle>
+  <circle r="14" z="858" transform="translate(2,-26)"></circle>
+  <circle r="14" z="962" transform="translate(-109,10)"></circle>
+  <circle r="14" z="882" transform="translate(164,26)"></circle>
+  <circle r="14" z="876" transform="translate(127,160)"></circle>
+  <circle r="14" z="911" transform="translate(-121,1)"></circle>
+  <circle r="14" z="894" transform="translate(12,-91)"></circle>
+  <circle r="14" z="849" transform="translate(175,-35)"></circle>
+  <circle r="14" z="860" transform="translate(168,117)"></circle>
+  <circle r="14" z="815" transform="translate(232,-221)"></circle>
+  <circle r="14" z="942" transform="translate(36,-11)"></circle>
+  <circle r="14" z="799" transform="translate(282,-178)"></circle>
+  <circle r="14" z="894" transform="translate(135,201)"></circle>
+  <circle r="14" z="903" transform="translate(-92,-62)"></circle>
+  <circle r="14" z="931" transform="translate(-12,-102)"></circle>
+  <circle r="14" z="899" transform="translate(150,287)"></circle>
+  <circle r="14" z="966" transform="translate(-0,-65)"></circle>
+  <circle r="14" z="972" transform="translate(-95,-0)"></circle>
+  <circle r="14" z="887" transform="translate(72,-63)"></circle>
+  <circle r="14" z="816" transform="translate(72,103)"></circle>
+  <circle r="14" z="951" transform="translate(25,-14)"></circle>
+  <circle r="14" z="874" transform="translate(-26,-43)"></circle>
+  <circle r="14" z="855" transform="translate(-12,6)"></circle>
+  <circle r="14" z="943" transform="translate(-80,47)"></circle>
+  <circle r="14" z="892" transform="translate(144,38)"></circle>
+  <circle r="14" z="955" transform="translate(-9,43)"></circle>
+  <circle r="14" z="827" transform="translate(122,132)"></circle>
+  <circle r="14" z="978" transform="translate(-119,-34)"></circle>
+  <circle r="14" z="854" transform="translate(-8,1)"></circle>
+  <circle r="14" z="791" transform="translate(110,-339)"></circle>
+  <circle r="14" z="799" transform="translate(179,77)"></circle>
+  <circle r="14" z="954" transform="translate(8,5)"></circle>
+  <circle r="14" z="914" transform="translate(-105,-81)"></circle>
+  <circle r="14" z="809" transform="translate(246,-64)"></circle>
+  <circle r="14" z="882" transform="translate(157,3)"></circle>
+  <circle r="14" z="888" transform="translate(137,150)"></circle>
+  <circle r="14" z="822" transform="translate(41,61)"></circle>
+  <circle r="14" z="845" transform="translate(58,-54)"></circle>
+  <circle r="14" z="856" transform="translate(240,-316)"></circle>
+</svg>
\ No newline at end of file
diff --git a/blobby-deerthreejs-to-svg-render-gsap/src/script.js b/blobby-deerthreejs-to-svg-render-gsap/src/script.js
new file mode 100644
index 0000000..7379311
--- /dev/null
+++ b/blobby-deerthreejs-to-svg-render-gsap/src/script.js
@@ -0,0 +1,54 @@
+console.clear();
+const circles = [...document.querySelectorAll('circle')];
+const svg = document.querySelector('svg');
+circles.sort((a, b) => {
+  const a_z = parseFloat(a.getAttribute('z'));
+  const b_z = parseFloat(b.getAttribute('z'));
+  return b_z - a_z;
+});
+let colors = ['#16F8C0','#00D4C0','#00AFB5','#008B9E','#22687E','#2F4858'];
+
+circles.forEach((node, i) => {
+  svg.appendChild(node);
+  node.setAttribute('r', parseFloat(node.getAttribute('r')) * 1.5);
+  node.style.fill = colors[Math.floor(i / 70) % 6];
+  
+  /* Rainbow colors */
+  // node.setAttribute('stroke', `hsl(${Math.floor(i / circles.length * 360)}deg, 70%, 60%)`);
+  // node.style.fill = `hsl(${Math.floor(i / circles.length * 360)}deg, 70%, 60%)`;
+});
+
+const tween = gsap.timeline({
+  repeat: -1
+});
+
+tween.fromTo('circle',{
+  strokeDasharray: (i, node) => {
+    return node.getTotalLength();
+  },
+  strokeDashoffset: (i, node) => {
+    return node.getTotalLength();
+  },
+  transformOrigin: 'center',
+  rotation: Math.random() * 360,
+  scale: 0
+}, {
+  scale: 1,
+  rotation: Math.random() * 360,
+  strokeDashoffset: 0,
+  stagger: 0.004,
+  duration: 'random(0.8, 2.5)',
+  ease: 'elastic.out(1,0.3)'
+});
+tween.to('circle', {
+  cx: () => {
+    return `+=${(Math.random() - 0.5) * 500}`
+  },
+  cy: () => {
+    return `+=${(Math.random() - 0.5) * 500}`
+  },
+  scale: 0,
+  opacity: 0,
+  duration: 'random(0.4, 1.5)',
+  stagger: 0.001
+});
\ No newline at end of file
diff --git a/blobby-deerthreejs-to-svg-render-gsap/src/style.scss b/blobby-deerthreejs-to-svg-render-gsap/src/style.scss
new file mode 100644
index 0000000..46aff17
--- /dev/null
+++ b/blobby-deerthreejs-to-svg-render-gsap/src/style.scss
@@ -0,0 +1,18 @@
+body {
+  overflow: hidden;
+  margin: 0;
+  // background: radial-gradient(circle at center, #aaeeff 60%, #6293c5 120%);
+  background: radial-gradient(#005FA2 0%, #030847 80%);
+  height: 100vh;
+  filter: drop-shadow(0 0 30px rgba(161,238,243, 0.3));
+}
+svg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+circle {
+  fill: none;
+}
\ No newline at end of file
diff --git a/blobhow-to/README.markdown b/blobhow-to/README.markdown
new file mode 100644
index 0000000..649d940
--- /dev/null
+++ b/blobhow-to/README.markdown
@@ -0,0 +1,5 @@
+# Blob - How to
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Mamboleoo/pen/QWbmPGZ](https://codepen.io/Mamboleoo/pen/QWbmPGZ).
+
+
diff --git a/blobhow-to/dist/index.html b/blobhow-to/dist/index.html
new file mode 100644
index 0000000..4d4d53f
--- /dev/null
+++ b/blobhow-to/dist/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Blob - How to</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input type="range" min="1" max="7" step="1" id="step" value="1">
+<section>
+  <p>Draw 100 evenly-spaced dots along a circle</p>
+  <p>For every dot, use a noise algorithm to vary the radius</p>
+  <p>Connect the dots and hide them</p>
+  <p>Draw more shapes with the same logic while reducing the radius</p>
+  <p>Fade the lines from the center to the outside</p>
+  <p>Animate the shapes using the frame count in your noise function</p>
+  <p>Go crazy</p>
+</section>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/perlin.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/blobhow-to/dist/script.js b/blobhow-to/dist/script.js
new file mode 100644
index 0000000..b8a71c9
--- /dev/null
+++ b/blobhow-to/dist/script.js
@@ -0,0 +1,249 @@
+const _noise = noise;
+_noise.seed(Math.random() * 100);
+const anim = {t: 0};
+let ctx;
+console.clear();
+
+/* ====== STEP 1 ====== */
+function goToStep1 () {
+  noLoop();
+  fill(255);
+}
+
+function step1 () {
+  clear();
+  const r = min(width, height) * 0.35;
+  for (let i = 0; i < 100; i++) {
+    const x = cos(i / 100 * TWO_PI) * r + width / 2;
+    const y = sin(i / 100 * TWO_PI) * r + height / 2;
+    circle(x, y, 5);
+  }
+}
+
+/* ====== STEP 2 ====== */
+function goToStep2 () {
+  loop();
+  fill(255);
+  noStroke();
+  gsap.fromTo(anim, {
+    t: 0 
+  }, {
+    t: 1,
+    duration: 3,
+    ease: 'power2.out'
+  });
+}
+
+function step2 () {
+  clear();
+  const r = min(width, height) * 0.35;
+  for (let i = 0; i < 100; i++) {
+    let x = cos(i / 100 * TWO_PI);
+    let y = sin(i / 100 * TWO_PI);
+    const offset = _noise.simplex3(x, y, 0) * (r / 5) * anim.t;
+    x *= r + offset;
+    y *= r + offset;
+    x += width / 2;
+    y += height / 2;
+    circle(x, y, 5);
+  }
+}
+
+/* ====== STEP 3 ====== */
+function goToStep3 () {
+  loop();
+  noFill();
+  gsap.fromTo(anim, {
+    t: 0 
+  }, {
+    t: 1,
+    duration: 3,
+    ease: 'none'
+  });
+}
+
+function step3 () {
+  clear();
+  const r = min(width, height) * 0.35;
+  beginShape();
+  for (let i = 0; i <= 100; i++) {
+    let x = cos(i / 100 * TWO_PI);
+    let y = sin(i / 100 * TWO_PI);
+    const offset = _noise.simplex3(x, y, 0) * (r / 5);
+    x *= r + offset;
+    y *= r + offset;
+    x += width / 2;
+    y += height / 2;
+    if (anim.t >= (i/100)) {
+      vertex(x, y);
+    }
+    fill(255);
+    noStroke();
+    circle(x, y, 5 * (1 - anim.t));
+  }
+  stroke(255);
+  noFill();
+  endShape();
+}
+
+/* ====== STEP 4 ====== */
+function goToStep4 () {
+  loop();
+  stroke(255);
+  fill(0);
+  gsap.fromTo(anim, {
+    t: 0 
+  }, {
+    t: 1,
+    duration: 3,
+    ease: 'none'
+  });
+}
+
+function step4 () {
+  clear();
+  let r = min(width, height) * 0.35;
+  const rings = 70;
+  for (let j = 0; j <= (rings * anim.t); j++) {
+    let rad = (r / rings) * (rings - j);
+    beginShape();
+    for (let i = 0; i <= 100; i++) {
+      let x = cos(i / 100 * TWO_PI);
+      let y = sin(i / 100 * TWO_PI);
+      const offset = _noise.simplex3(x, y + (j * 0.03), 0) * (rad / 5);
+      x *= rad + offset;
+      y *= rad + offset;
+      x += width / 2;
+      y += height / 2;
+      vertex(x, y);
+    }
+    endShape();
+  }
+}
+
+/* ====== STEP 5 ====== */
+function goToStep5 () {
+  loop();
+  stroke(255);
+  noFill();
+  gsap.fromTo(anim, {
+    t: 0 
+  }, {
+    t: 1,
+    duration: 3,
+    ease: 'none'
+  });
+}
+
+function step5 () {
+  clear();
+  let r = min(width, height) * 0.35;
+  const rings = 70;
+  for (let j = 0; j < rings; j++) {
+    let rad = (r / rings) * (rings - j);
+    beginShape();
+    for (let i = 0; i <= 100; i++) {
+      let x = cos(i / 100 * TWO_PI);
+      let y = sin(i / 100 * TWO_PI);
+      const offset = _noise.simplex3(x, y + (j * 0.03), 0) * (rad / 5);
+      x *= rad + offset;
+      y *= rad + offset;
+      x += width / 2;
+      y += height / 2;
+      vertex(x, y);
+    }
+    stroke(j / rings * 175 + 80);
+    endShape();
+  }
+}
+
+/* ====== STEP 6 ====== */
+let frames = 0;
+function goToStep6 () {
+  loop();
+  ctx.fillStyle = 'black';
+  frames = 0;
+}
+
+function step6 () {
+  clear();
+  let r = min(width, height) * 0.35;
+  const rings = 70;
+  for (let j = 0; j < rings; j++) {
+    let rad = (r / rings) * (rings - j);
+    beginShape();
+    for (let i = 0; i <= 100; i++) {
+      let x = cos(i / 100 * TWO_PI);
+      let y = sin(i / 100 * TWO_PI);
+      const offset = _noise.simplex3(x, y + (j * 0.03), frames * 0.003) * (rad / 5);
+      x *= rad + offset;
+      y *= rad + offset;
+      x += width / 2;
+      y += height / 2;
+      vertex(x, y);
+    }
+    stroke(j / rings * 175 + 80);
+    endShape();
+  }
+  frames++;
+}
+
+/* ====== STEP 7 ====== */
+function goToStep7 () {
+  loop();
+}
+
+function step7 () {
+  clear();
+  let r = min(width, height) * 0.35;
+  const rings = 40;
+  for (let j = 0; j < rings; j++) {
+    let rad = (r / rings) * (rings - j);
+    ctx.beginPath();
+    for (let i = 0; i <= 150; i++) {
+      let x = cos(i / 100 * TWO_PI);
+      let y = sin(i / 100 * TWO_PI);
+      const offset = _noise.simplex3(x, y + (j * 0.03), frames * 0.003) * (rad / 3);
+      x *= rad + offset;
+      y *= rad + offset;
+      x += width / 2;
+      y += height / 2;
+      ctx.lineTo(x, y);
+    }
+    ctx.fillStyle = `hsl(${j/rings * 360}, 70%, 70%)`;
+    ctx.strokeStyle = `hsl(${j/rings * 360}, 70%, 80%)`;
+    ctx.fill();
+    ctx.stroke();
+  }
+  frames++;
+}
+
+function setup () {
+  const canvas = createCanvas(windowWidth, windowHeight);
+  ctx = canvas.drawingContext;
+  
+  windowResized();
+  document.querySelector('#step').addEventListener('input', () => {
+    if (window['goToStep' + step.value]) {
+      window['goToStep' + step.value]();
+    }
+    draw();
+  });
+}
+
+function windowResized () {
+  resizeCanvas(windowWidth, windowHeight);
+  
+  if (window['goToStep' + step.value]) {
+    window['goToStep' + step.value]();
+  }
+  draw();
+}
+
+const texts = document.querySelectorAll('section p');
+function draw () {
+  window['step' + step.value]();
+  
+  texts.forEach(text => text.style.display = 'none');
+  texts[step.value - 1].style.display = 'block';
+}
\ No newline at end of file
diff --git a/blobhow-to/dist/style.css b/blobhow-to/dist/style.css
new file mode 100644
index 0000000..8e244a8
--- /dev/null
+++ b/blobhow-to/dist/style.css
@@ -0,0 +1,113 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+  height: 100vh;
+  background: black;
+}
+
+canvas {
+  margin: auto;
+  touch-action: none;
+}
+
+input {
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 34px;
+  max-width: 400px;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+}
+input:active {
+  cursor: grabbing;
+}
+input::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  height: 6px;
+  background: #fff;
+  -webkit-appearance: none;
+  appearance: none;
+}
+input::-moz-range-track {
+  box-sizing: border-box;
+  height: 6px;
+  background: #fff;
+  -webkit-appearance: none;
+  appearance: none;
+}
+input::-ms-track {
+  box-sizing: border-box;
+  height: 6px;
+  background: #fff;
+  -webkit-appearance: none;
+  appearance: none;
+}
+input::-webkit-slider-thumb {
+  margin-top: -12px;
+  box-sizing: border-box;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid black;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: grab;
+}
+input::-moz-range-thumb {
+  box-sizing: border-box;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid black;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: grab;
+}
+input::-ms-thumb {
+  margin-top: 0px;
+  box-sizing: border-box;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid black;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: grab;
+}
+
+section {
+  box-sizing: border-box;
+  font-size: 30px;
+  color: white;
+  position: fixed;
+  left: 0;
+  top: 20px;
+  width: 100%;
+  text-align: center;
+  padding: 10px 10%;
+  z-index: 10;
+  pointer-events: none;
+  text-shadow: 0 0 3px black, 0 0 4px black, 0 0 5px black;
+  background: rgba(0, 0, 0, 0.7);
+  font-family: 'Montserrat', sans-serif;
+}
+section p {
+  margin: 0;
+}
+@media (max-width: 500px) {
+  section {
+    font-size: 24px;
+  }
+}
+
+code {
+  white-space: nowrap;
+}
\ No newline at end of file
diff --git a/blobhow-to/license.txt b/blobhow-to/license.txt
new file mode 100644
index 0000000..7e5517c
--- /dev/null
+++ b/blobhow-to/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Louis Hoebregts (https://codepen.io/Mamboleoo/pen/QWbmPGZ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/blobhow-to/src/index.html b/blobhow-to/src/index.html
new file mode 100644
index 0000000..863c062
--- /dev/null
+++ b/blobhow-to/src/index.html
@@ -0,0 +1,10 @@
+<input type="range" min="1" max="7" step="1" id="step" value="1">
+<section>
+  <p>Draw 100 evenly-spaced dots along a circle</p>
+  <p>For every dot, use a noise algorithm to vary the radius</p>
+  <p>Connect the dots and hide them</p>
+  <p>Draw more shapes with the same logic while reducing the radius</p>
+  <p>Fade the lines from the center to the outside</p>
+  <p>Animate the shapes using the frame count in your noise function</p>
+  <p>Go crazy</p>
+</section>
diff --git a/blobhow-to/src/script.js b/blobhow-to/src/script.js
new file mode 100644
index 0000000..d6ac970
--- /dev/null
+++ b/blobhow-to/src/script.js
@@ -0,0 +1,249 @@
+const _noise = noise;
+_noise.seed(Math.random() * 100);
+const anim = {t: 0};
+let ctx;
+console.clear();
+
+/* ====== STEP 1 ====== */
+function goToStep1 () {
+  noLoop();
+  fill(255);
+}
+
+function step1 () {
+  clear();
+  const r = min(width, height) * 0.35;
+  for (let i = 0; i < 100; i++) {
+    const x = cos(i / 100 * TWO_PI) * r + width / 2;
+    const y = sin(i / 100 * TWO_PI) * r + height / 2;
+    circle(x, y, 5);
+  }
+}
+
+/* ====== STEP 2 ====== */
+function goToStep2 () {
+  loop();
+  fill(255);
+  noStroke();
+  gsap.fromTo(anim, {
+    t: 0 
+  }, {
+    t: 1,
+    duration: 3,
+    ease: 'power2.out'
+  });
+}
+
+function step2 () {
+  clear();
+  const r = min(width, height) * 0.35;
+  for (let i = 0; i < 100; i++) {
+    let x = cos(i / 100 * TWO_PI);
+    let y = sin(i / 100 * TWO_PI);
+    const offset = _noise.simplex3(x, y, 0) * (r / 5) * anim.t;
+    x *= r + offset;
+    y *= r + offset;
+    x += width / 2;
+    y += height / 2;
+    circle(x, y, 5);
+  }
+}
+
+/* ====== STEP 3 ====== */
+function goToStep3 () {
+  loop();
+  noFill();
+  gsap.fromTo(anim, {
+    t: 0 
+  }, {
+    t: 1,
+    duration: 3,
+    ease: 'none'
+  });
+}
+
+function step3 () {
+  clear();
+  const r = min(width, height) * 0.35;
+  beginShape();
+  for (let i = 0; i <= 100; i++) {
+    let x = cos(i / 100 * TWO_PI);
+    let y = sin(i / 100 * TWO_PI);
+    const offset = _noise.simplex3(x, y, 0) * (r / 5);
+    x *= r + offset;
+    y *= r + offset;
+    x += width / 2;
+    y += height / 2;
+    if (anim.t >= (i/100)) {
+      vertex(x, y);
+    }
+    fill(255);
+    noStroke();
+    circle(x, y, 5 * (1 - anim.t));
+  }
+  stroke(255);
+  noFill();
+  endShape();
+}
+
+/* ====== STEP 4 ====== */
+function goToStep4 () {
+  loop();
+  stroke(255);
+  fill(0);
+  gsap.fromTo(anim, {
+    t: 0 
+  }, {
+    t: 1,
+    duration: 3,
+    ease: 'none'
+  });
+}
+
+function step4 () {
+  clear();
+  let r = min(width, height) * 0.35;
+  const rings = 70;
+  for (let j = 0; j <= (rings * anim.t); j++) {
+    let rad = (r / rings) * (rings - j);
+    beginShape();
+    for (let i = 0; i <= 100; i++) {
+      let x = cos(i / 100 * TWO_PI);
+      let y = sin(i / 100 * TWO_PI);
+      const offset = _noise.simplex3(x, y + (j * 0.03), 0) * (rad / 5);
+      x *= rad + offset;
+      y *= rad + offset;
+      x += width / 2;
+      y += height / 2;
+      vertex(x, y);
+    }
+    endShape();
+  }
+}
+
+/* ====== STEP 5 ====== */
+function goToStep5 () {
+  loop();
+  stroke(255);
+  noFill();
+  gsap.fromTo(anim, {
+    t: 0 
+  }, {
+    t: 1,
+    duration: 3,
+    ease: 'none'
+  });
+}
+
+function step5 () {
+  clear();
+  let r = min(width, height) * 0.35;
+  const rings = 70;
+  for (let j = 0; j < rings; j++) {
+    let rad = (r / rings) * (rings - j);
+    beginShape();
+    for (let i = 0; i <= 100; i++) {
+      let x = cos(i / 100 * TWO_PI);
+      let y = sin(i / 100 * TWO_PI);
+      const offset = _noise.simplex3(x, y + (j * 0.03), 0) * (rad / 5);
+      x *= rad + offset;
+      y *= rad + offset;
+      x += width / 2;
+      y += height / 2;
+      vertex(x, y);
+    }
+    stroke(j / rings * 175 + 80);
+    endShape();
+  }
+}
+
+/* ====== STEP 6 ====== */
+let frames = 0;
+function goToStep6 () {
+  loop();
+  ctx.fillStyle = 'black';
+  frames = 0;
+}
+
+function step6 () {
+  clear();
+  let r = min(width, height) * 0.35;
+  const rings = 70;
+  for (let j = 0; j < rings; j++) {
+    let rad = (r / rings) * (rings - j);
+    beginShape();
+    for (let i = 0; i <= 100; i++) {
+      let x = cos(i / 100 * TWO_PI);
+      let y = sin(i / 100 * TWO_PI);
+      const offset = _noise.simplex3(x, y + (j * 0.03), frames * 0.003) * (rad / 5);
+      x *= rad + offset;
+      y *= rad + offset;
+      x += width / 2;
+      y += height / 2;
+      vertex(x, y);
+    }
+    stroke(j / rings * 175 + 80);
+    endShape();
+  }
+  frames++;
+}
+
+/* ====== STEP 7 ====== */
+function goToStep7 () {
+  loop();
+}
+
+function step7 () {
+  clear();
+  let r = min(width, height) * 0.35;
+  const rings = 40;
+  for (let j = 0; j < rings; j++) {
+    let rad = (r / rings) * (rings - j);
+    ctx.beginPath();
+    for (let i = 0; i <= 150; i++) {
+      let x = cos(i / 100 * TWO_PI);
+      let y = sin(i / 100 * TWO_PI);
+      const offset = _noise.simplex3(x, y + (j * 0.03), frames * 0.003) * (rad / 3);
+      x *= rad + offset;
+      y *= rad + offset;
+      x += width / 2;
+      y += height / 2;
+      ctx.lineTo(x, y);
+    }
+    ctx.fillStyle = `hsl(${j/rings * 360}, 70%, 70%)`;
+    ctx.strokeStyle = `hsl(${j/rings * 360}, 70%, 80%)`;
+    ctx.fill();
+    ctx.stroke();
+  }
+  frames++;
+}
+
+function setup () {
+  const canvas = createCanvas(windowWidth, windowHeight);
+  ctx = canvas.drawingContext;
+  
+  windowResized();
+  document.querySelector('#step').addEventListener('input', () => {
+    if (window['goToStep' + step.value]) {
+      window['goToStep' + step.value]();
+    }
+    draw();
+  });
+}
+
+function windowResized () {
+  resizeCanvas(windowWidth, windowHeight);
+  
+  if (window['goToStep' + step.value]) {
+    window['goToStep' + step.value]();
+  }
+  draw();
+}
+
+const texts = document.querySelectorAll('section p');
+function draw () {
+  window['step' + step.value]();
+  
+  texts.forEach(text => text.style.display = 'none');
+  texts[step.value - 1].style.display = 'block';
+}
diff --git a/blobhow-to/src/style.scss b/blobhow-to/src/style.scss
new file mode 100644
index 0000000..3b8d93a
--- /dev/null
+++ b/blobhow-to/src/style.scss
@@ -0,0 +1,81 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+  height: 100vh;
+  background: black;
+}
+canvas {
+  margin: auto;
+  touch-action: none;
+}
+
+@mixin track {
+  box-sizing: border-box;
+  height: 6px;
+	background: #fff;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+@mixin thumb {
+  box-sizing: border-box;
+	width: 30px;
+  height: 30px;
+	border-radius: 50%;
+	background: #fff;
+  border: 2px solid black;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: grab;
+}
+
+input {
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 34px;
+  max-width: 400px;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  &:active {
+    cursor: grabbing;
+  }
+  &::-webkit-slider-runnable-track {@include track }
+	&::-moz-range-track { @include track }
+	&::-ms-track { @include track }
+  
+  &::-webkit-slider-thumb {margin-top: -12px;@include thumb}
+	&::-moz-range-thumb { @include thumb }
+  &::-ms-thumb {margin-top:0px;@include thumb}
+}
+
+section {
+  box-sizing: border-box;
+  font-size: 30px;
+  color: white;
+  position: fixed;
+  left: 0;
+  top: 20px;
+  width: 100%;
+  text-align: center;
+  padding: 10px 10%;
+  z-index: 10;
+  pointer-events: none;
+  text-shadow: 0 0 3px black, 0 0 4px black, 0 0 5px black;
+  background: rgba(0, 0, 0, 0.7);
+  font-family: 'Montserrat', sans-serif;
+  p {
+    margin: 0;
+  }
+  @media (max-width: 500px) {
+    font-size: 24px;
+  }
+}
+
+code {
+  white-space: nowrap;
+}
\ No newline at end of file
diff --git a/blobs/README.markdown b/blobs/README.markdown
new file mode 100644
index 0000000..e2566f1
--- /dev/null
+++ b/blobs/README.markdown
@@ -0,0 +1,4 @@
+# Blobs
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/Mamboleoo/pen/BWXeqR](https://codepen.io/Mamboleoo/pen/BWXeqR).
+
+ Drag, swipe, click, move, do whatever you want with those blobs. They won't hurt you :)
\ No newline at end of file
diff --git a/blobs/dist/index.html b/blobs/dist/index.html
new file mode 100644
index 0000000..cf2f727
--- /dev/null
+++ b/blobs/dist/index.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Blobs</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas></canvas>
+
+<script type="x-shader/x-vertex" id="wrapVertexShader">
+  //	Classic Perlin 3D Noise 
+  //	by Stefan Gustavson
+  //
+  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
+  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
+  vec4 fade(vec4 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
+
+  float cnoise(vec4 P){
+    vec4 Pi0 = floor(P); // Integer part for indexing
+    vec4 Pi1 = Pi0 + 1.0; // Integer part + 1
+    Pi0 = mod(Pi0, 289.0);
+    Pi1 = mod(Pi1, 289.0);
+    vec4 Pf0 = fract(P); // Fractional part for interpolation
+    vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
+    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+    vec4 iy = vec4(Pi0.yy, Pi1.yy);
+    vec4 iz0 = vec4(Pi0.zzzz);
+    vec4 iz1 = vec4(Pi1.zzzz);
+    vec4 iw0 = vec4(Pi0.wwww);
+    vec4 iw1 = vec4(Pi1.wwww);
+
+    vec4 ixy = permute(permute(ix) + iy);
+    vec4 ixy0 = permute(ixy + iz0);
+    vec4 ixy1 = permute(ixy + iz1);
+    vec4 ixy00 = permute(ixy0 + iw0);
+    vec4 ixy01 = permute(ixy0 + iw1);
+    vec4 ixy10 = permute(ixy1 + iw0);
+    vec4 ixy11 = permute(ixy1 + iw1);
+
+    vec4 gx00 = ixy00 / 7.0;
+    vec4 gy00 = floor(gx00) / 7.0;
+    vec4 gz00 = floor(gy00) / 6.0;
+    gx00 = fract(gx00) - 0.5;
+    gy00 = fract(gy00) - 0.5;
+    gz00 = fract(gz00) - 0.5;
+    vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
+    vec4 sw00 = step(gw00, vec4(0.0));
+    gx00 -= sw00 * (step(0.0, gx00) - 0.5);
+    gy00 -= sw00 * (step(0.0, gy00) - 0.5);
+
+    vec4 gx01 = ixy01 / 7.0;
+    vec4 gy01 = floor(gx01) / 7.0;
+    vec4 gz01 = floor(gy01) / 6.0;
+    gx01 = fract(gx01) - 0.5;
+    gy01 = fract(gy01) - 0.5;
+    gz01 = fract(gz01) - 0.5;
+    vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
+    vec4 sw01 = step(gw01, vec4(0.0));
+    gx01 -= sw01 * (step(0.0, gx01) - 0.5);
+    gy01 -= sw01 * (step(0.0, gy01) - 0.5);
+
+    vec4 gx10 = ixy10 / 7.0;
+    vec4 gy10 = floor(gx10) / 7.0;
+    vec4 gz10 = floor(gy10) / 6.0;
+    gx10 = fract(gx10) - 0.5;
+    gy10 = fract(gy10) - 0.5;
+    gz10 = fract(gz10) - 0.5;
+    vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
+    vec4 sw10 = step(gw10, vec4(0.0));
+    gx10 -= sw10 * (step(0.0, gx10) - 0.5);
+    gy10 -= sw10 * (step(0.0, gy10) - 0.5);
+
+    vec4 gx11 = ixy11 / 7.0;
+    vec4 gy11 = floor(gx11) / 7.0;
+    vec4 gz11 = floor(gy11) / 6.0;
+    gx11 = fract(gx11) - 0.5;
+    gy11 = fract(gy11) - 0.5;
+    gz11 = fract(gz11) - 0.5;
+    vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
+    vec4 sw11 = step(gw11, vec4(0.0));
+    gx11 -= sw11 * (step(0.0, gx11) - 0.5);
+    gy11 -= sw11 * (step(0.0, gy11) - 0.5);
+
+    vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
+    vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
+    vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
+    vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
+    vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
+    vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
+    vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
+    vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
+    vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
+    vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
+    vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
+    vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
+    vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
+    vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
+    vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
+    vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
+
+    vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
+    g0000 *= norm00.x;
+    g0100 *= norm00.y;
+    g1000 *= norm00.z;
+    g1100 *= norm00.w;
+
+    vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
+    g0001 *= norm01.x;
+    g0101 *= norm01.y;
+    g1001 *= norm01.z;
+    g1101 *= norm01.w;
+
+    vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
+    g0010 *= norm10.x;
+    g0110 *= norm10.y;
+    g1010 *= norm10.z;
+    g1110 *= norm10.w;
+
+    vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
+    g0011 *= norm11.x;
+    g0111 *= norm11.y;
+    g1011 *= norm11.z;
+    g1111 *= norm11.w;
+
+    float n0000 = dot(g0000, Pf0);
+    float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
+    float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
+    float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
+    float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
+    float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
+    float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
+    float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
+    float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
+    float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
+    float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
+    float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
+    float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
+    float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
+    float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
+    float n1111 = dot(g1111, Pf1);
+
+    vec4 fade_xyzw = fade(Pf0);
+    vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
+    vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
+    vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
+    vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
+    float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
+    return 2.2 * n_xyzw;
+  }
+  
+
+	uniform float time;
+	varying float dist;
+  void main() {
+    vec4 tempPosition = vec4(position*0.09, time);
+    dist = cnoise(tempPosition) * 2.0;
+    vec4 position = vec4(position, 1.0);
+    position.x += dist;
+    position.y += dist;
+    position.z += dist;
+    vec4 mvPosition = modelViewMatrix * position;
+    gl_Position = projectionMatrix * mvPosition;
+  }
+</script>
+<script type="x-shader/x-fragment" id="wrapFragmentShader">
+// From Matt DesLauriers
+float hue2rgb(float f1, float f2, float hue) {
+    if (hue < 0.0)
+        hue += 1.0;
+    else if (hue > 1.0)
+        hue -= 1.0;
+    float res;
+    if ((6.0 * hue) < 1.0)
+        res = f1 + (f2 - f1) * 6.0 * hue;
+    else if ((2.0 * hue) < 1.0)
+        res = f2;
+    else if ((3.0 * hue) < 2.0)
+        res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
+    else
+        res = f1;
+    return res;
+}
+vec3 hsl2rgb(vec3 hsl) {
+    vec3 rgb;
+
+    if (hsl.y == 0.0) {
+        rgb = vec3(hsl.z); // Luminance
+    } else {
+        float f2;
+
+        if (hsl.z < 0.5)
+            f2 = hsl.z * (1.0 + hsl.y);
+        else
+            f2 = hsl.z + hsl.y - hsl.y * hsl.z;
+
+        float f1 = 2.0 * hsl.z - f2;
+
+        rgb.r = hue2rgb(f1, f2, hsl.x + (1.0/3.0));
+        rgb.g = hue2rgb(f1, f2, hsl.x);
+        rgb.b = hue2rgb(f1, f2, hsl.x - (1.0/3.0));
+    }   
+    return rgb;
+}
+varying float dist;
+uniform vec2 rainbow;
+void main(){
+		vec3 color1 = hsl2rgb( vec3((dist*0.5)*rainbow.x + rainbow.y, 0.6, 0.6) );
+    vec4 color = vec4(color1, 1.0);
+    gl_FragColor = color;
+  }
+</script>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/OrbitControls.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/perlin.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/blobs/dist/script.js b/blobs/dist/script.js
new file mode 100644
index 0000000..1a2deb8
--- /dev/null
+++ b/blobs/dist/script.js
@@ -0,0 +1,179 @@
+var ww = window.innerWidth,
+  wh = window.innerHeight;
+
+var renderer = new THREE.WebGLRenderer({
+  canvas: document.querySelector("canvas")
+});
+renderer.setSize(ww, wh);
+
+var scene = new THREE.Scene();
+
+var camera = new THREE.PerspectiveCamera(45, ww / wh, 0.01, 10000);
+camera.position.z = 180;
+camera.position.y = 1;
+
+var controls = new THREE.OrbitControls(camera, renderer.domElement);
+var dollyIn = controls.dollyIn;
+controls.dollyIn = function(){
+  dollyIn();
+  checkCameraPosition();
+};
+var dollyOut = controls.dollyOut;
+controls.dollyOut = function(){
+  dollyOut();
+  checkCameraPosition();
+};
+controls.noPan = true;
+
+var vectCenter = new THREE.Vector3(0,0,0);
+function checkCameraPosition() {
+  var dist = vectCenter.distanceTo(camera.position);
+  if(dist < 60){
+    wireframe = true;
+  } else {
+    wireframe = false;
+  }
+  for (var i = 0; i < amount; i++) {
+    spheres.children[i].material.wireframe = wireframe;
+  }
+}
+
+var sphereGeom = new THREE.SphereGeometry(4, 28, 28);
+
+function Blobby(x, y, z, i) {
+  this.uniforms = {
+    time: {
+      value: 1.0
+    },
+    rainbow: {
+      value: new THREE.Vector2(0.2, noise.simplex3(x * 0.001, y * 0.001, z * 0.001))
+    }
+  };
+  var mat = new THREE.ShaderMaterial({
+    uniforms: this.uniforms,
+    vertexShader: document.getElementById("wrapVertexShader").textContent,
+    fragmentShader: document.getElementById("wrapFragmentShader").textContent,
+    wireframe: true
+  });
+  this.sphere = new THREE.Mesh(sphereGeom, mat);
+  this.sphere.offset = Math.random() * 500;
+  this.sphere.uniforms = this.uniforms;
+  var ratio = Math.random()*0.1 + 1;
+  this.sphere.position.x = x*ratio;
+  this.sphere.position.y = y*ratio;
+  this.sphere.position.z = z*ratio;
+}
+
+var spheres = new THREE.Object3D();
+scene.add(spheres);
+var tempSphere = new THREE.IcosahedronGeometry(60, 3);
+var vertices = tempSphere.vertices;
+amount = vertices.length;
+for (var i = 0; i < amount; i++) {
+  var x = vertices[i].x;
+  var y = vertices[i].y;
+  var z = vertices[i].z;
+  var twin = false;
+  for (var j = 0; j < spheres.children.length; j++) {
+    if (Math.round(spheres.children[j].position.x) === Math.round(x)) {
+      if (Math.round(spheres.children[j].position.y) === Math.round(y)) {
+        if (Math.round(spheres.children[j].position.z) === Math.round(z)) {
+          twin = true;
+        }
+      }
+    }
+  }
+  if (!twin) {
+    var blob = new Blobby(x, y, z, i);
+    spheres.add(blob.sphere);
+  }
+}
+
+function render(d) {
+
+  for (var i = 0; i < spheres.children.length; i++) {
+    spheres.children[i].uniforms.time.value = d * 0.0005 + spheres.children[i].offset;
+  }
+  spheres.rotation.z = d * 0.00004;
+  var color = new THREE.Color("hsl(" + (d * 0.006 + 200) + ",90%,75%)");
+  renderer.setClearColor(color);
+  
+  renderer.render(scene, camera);
+  requestAnimationFrame(render);
+}
+requestAnimationFrame(render);
+
+var wireframe = true;
+
+window.addEventListener("resize", onResize);
+
+function onResize() {
+  ww = window.innerWidth;
+  wh = window.innerHeight;
+  camera.aspect = ww / wh;
+  camera.updateProjectionMatrix();
+  renderer.setSize(ww, wh);
+}
+
+window.addEventListener("mousedown", onClick);
+window.addEventListener("mousemove", onClick);
+window.addEventListener("touchdown", onClick);
+function onClick(e) {
+	var vector = new THREE.Vector2();
+  if(e.type === "touchdown"){
+    vector.set(
+      2 * (e.touches[0].clientX / ww) - 1,
+      1 - 2 * (e.touches[0].clientY / wh )
+    );
+  } else {
+    vector.set(
+      2 * (e.clientX / ww) - 1,
+      1 - 2 * (e.clientY / wh )
+    );
+  }
+	raycaster = new THREE.Raycaster();
+	raycaster.setFromCamera(vector,camera);
+	intersects = raycaster.intersectObjects(spheres.children);
+	if(intersects.length > 0 ){
+    var blob = intersects[0].object;
+    if(e.type === "mousemove"){
+      if(!blob.bounce && blob.scale.x < 1.5){
+        TweenMax.to(blob.scale, 1.3, {
+          x: 1.5,
+          y: 1.5,
+          z: 1.5,
+          ease: Elastic.easeOut.config(1.5, 0.2),
+          onComplete : function(){
+            TweenMax.to(blob.scale, 2, {
+              x: 1,
+              y: 1,
+              z: 1,
+              ease: Power1.easeIn
+            });
+            blob.bounce = false;
+          }
+        });
+      }
+    } else {
+      TweenMax.to(blob.scale, 1.3, {
+        x: "+=0.5",
+        y: "+=0.5",
+        z: "+=0.5",
+        ease: Elastic.easeOut.config(1.5, 0.2),
+        onComplete : function(){
+          TweenMax.to(blob.scale, 2, {
+            x: 1,
+            y: 1,
+            z: 1,
+            ease: Power1.easeIn
+          });
+          blob.bounce = false;
+        }
+      });
+    }
+    blob.bounce = true;
+  }
+}
+
+camera.rotation.set(0,0,0);
+checkCameraPosition();
\ No newline at end of file
diff --git a/blobs/dist/style.css b/blobs/dist/style.css
new file mode 100644
index 0000000..a96bb7a
--- /dev/null
+++ b/blobs/dist/style.css
@@ -0,0 +1,9 @@
+body{
+  overflow: hidden;
+  cursor: pointer;
+}
+canvas{
+  position: absolute;
+  top: 0;
+  left: 0;
+}
\ No newline at end of file
diff --git a/blobs/license.txt b/blobs/license.txt
new file mode 100644
index 0000000..1c11e4e
--- /dev/null
+++ b/blobs/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Louis Hoebregts (https://codepen.io/Mamboleoo/pen/BWXeqR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/blobs/src/index.html b/blobs/src/index.html
new file mode 100644
index 0000000..718304e
--- /dev/null
+++ b/blobs/src/index.html
@@ -0,0 +1,204 @@
+<canvas></canvas>
+
+<script type="x-shader/x-vertex" id="wrapVertexShader">
+  //	Classic Perlin 3D Noise 
+  //	by Stefan Gustavson
+  //
+  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
+  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
+  vec4 fade(vec4 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
+
+  float cnoise(vec4 P){
+    vec4 Pi0 = floor(P); // Integer part for indexing
+    vec4 Pi1 = Pi0 + 1.0; // Integer part + 1
+    Pi0 = mod(Pi0, 289.0);
+    Pi1 = mod(Pi1, 289.0);
+    vec4 Pf0 = fract(P); // Fractional part for interpolation
+    vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
+    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+    vec4 iy = vec4(Pi0.yy, Pi1.yy);
+    vec4 iz0 = vec4(Pi0.zzzz);
+    vec4 iz1 = vec4(Pi1.zzzz);
+    vec4 iw0 = vec4(Pi0.wwww);
+    vec4 iw1 = vec4(Pi1.wwww);
+
+    vec4 ixy = permute(permute(ix) + iy);
+    vec4 ixy0 = permute(ixy + iz0);
+    vec4 ixy1 = permute(ixy + iz1);
+    vec4 ixy00 = permute(ixy0 + iw0);
+    vec4 ixy01 = permute(ixy0 + iw1);
+    vec4 ixy10 = permute(ixy1 + iw0);
+    vec4 ixy11 = permute(ixy1 + iw1);
+
+    vec4 gx00 = ixy00 / 7.0;
+    vec4 gy00 = floor(gx00) / 7.0;
+    vec4 gz00 = floor(gy00) / 6.0;
+    gx00 = fract(gx00) - 0.5;
+    gy00 = fract(gy00) - 0.5;
+    gz00 = fract(gz00) - 0.5;
+    vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
+    vec4 sw00 = step(gw00, vec4(0.0));
+    gx00 -= sw00 * (step(0.0, gx00) - 0.5);
+    gy00 -= sw00 * (step(0.0, gy00) - 0.5);
+
+    vec4 gx01 = ixy01 / 7.0;
+    vec4 gy01 = floor(gx01) / 7.0;
+    vec4 gz01 = floor(gy01) / 6.0;
+    gx01 = fract(gx01) - 0.5;
+    gy01 = fract(gy01) - 0.5;
+    gz01 = fract(gz01) - 0.5;
+    vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
+    vec4 sw01 = step(gw01, vec4(0.0));
+    gx01 -= sw01 * (step(0.0, gx01) - 0.5);
+    gy01 -= sw01 * (step(0.0, gy01) - 0.5);
+
+    vec4 gx10 = ixy10 / 7.0;
+    vec4 gy10 = floor(gx10) / 7.0;
+    vec4 gz10 = floor(gy10) / 6.0;
+    gx10 = fract(gx10) - 0.5;
+    gy10 = fract(gy10) - 0.5;
+    gz10 = fract(gz10) - 0.5;
+    vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
+    vec4 sw10 = step(gw10, vec4(0.0));
+    gx10 -= sw10 * (step(0.0, gx10) - 0.5);
+    gy10 -= sw10 * (step(0.0, gy10) - 0.5);
+
+    vec4 gx11 = ixy11 / 7.0;
+    vec4 gy11 = floor(gx11) / 7.0;
+    vec4 gz11 = floor(gy11) / 6.0;
+    gx11 = fract(gx11) - 0.5;
+    gy11 = fract(gy11) - 0.5;
+    gz11 = fract(gz11) - 0.5;
+    vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
+    vec4 sw11 = step(gw11, vec4(0.0));
+    gx11 -= sw11 * (step(0.0, gx11) - 0.5);
+    gy11 -= sw11 * (step(0.0, gy11) - 0.5);
+
+    vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
+    vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
+    vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
+    vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
+    vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
+    vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
+    vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
+    vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
+    vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
+    vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
+    vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
+    vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
+    vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
+    vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
+    vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
+    vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
+
+    vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
+    g0000 *= norm00.x;
+    g0100 *= norm00.y;
+    g1000 *= norm00.z;
+    g1100 *= norm00.w;
+
+    vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
+    g0001 *= norm01.x;
+    g0101 *= norm01.y;
+    g1001 *= norm01.z;
+    g1101 *= norm01.w;
+
+    vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
+    g0010 *= norm10.x;
+    g0110 *= norm10.y;
+    g1010 *= norm10.z;
+    g1110 *= norm10.w;
+
+    vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
+    g0011 *= norm11.x;
+    g0111 *= norm11.y;
+    g1011 *= norm11.z;
+    g1111 *= norm11.w;
+
+    float n0000 = dot(g0000, Pf0);
+    float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
+    float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
+    float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
+    float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
+    float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
+    float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
+    float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
+    float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
+    float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
+    float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
+    float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
+    float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
+    float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
+    float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
+    float n1111 = dot(g1111, Pf1);
+
+    vec4 fade_xyzw = fade(Pf0);
+    vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
+    vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
+    vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
+    vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
+    float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
+    return 2.2 * n_xyzw;
+  }
+  
+
+	uniform float time;
+	varying float dist;
+  void main() {
+    vec4 tempPosition = vec4(position*0.09, time);
+    dist = cnoise(tempPosition) * 2.0;
+    vec4 position = vec4(position, 1.0);
+    position.x += dist;
+    position.y += dist;
+    position.z += dist;
+    vec4 mvPosition = modelViewMatrix * position;
+    gl_Position = projectionMatrix * mvPosition;
+  }
+</script>
+<script type="x-shader/x-fragment" id="wrapFragmentShader">
+// From Matt DesLauriers
+float hue2rgb(float f1, float f2, float hue) {
+    if (hue < 0.0)
+        hue += 1.0;
+    else if (hue > 1.0)
+        hue -= 1.0;
+    float res;
+    if ((6.0 * hue) < 1.0)
+        res = f1 + (f2 - f1) * 6.0 * hue;
+    else if ((2.0 * hue) < 1.0)
+        res = f2;
+    else if ((3.0 * hue) < 2.0)
+        res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
+    else
+        res = f1;
+    return res;
+}
+vec3 hsl2rgb(vec3 hsl) {
+    vec3 rgb;
+
+    if (hsl.y == 0.0) {
+        rgb = vec3(hsl.z); // Luminance
+    } else {
+        float f2;
+
+        if (hsl.z < 0.5)
+            f2 = hsl.z * (1.0 + hsl.y);
+        else
+            f2 = hsl.z + hsl.y - hsl.y * hsl.z;
+
+        float f1 = 2.0 * hsl.z - f2;
+
+        rgb.r = hue2rgb(f1, f2, hsl.x + (1.0/3.0));
+        rgb.g = hue2rgb(f1, f2, hsl.x);
+        rgb.b = hue2rgb(f1, f2, hsl.x - (1.0/3.0));
+    }   
+    return rgb;
+}
+varying float dist;
+uniform vec2 rainbow;
+void main(){
+		vec3 color1 = hsl2rgb( vec3((dist*0.5)*rainbow.x + rainbow.y, 0.6, 0.6) );
+    vec4 color = vec4(color1, 1.0);
+    gl_FragColor = color;
+  }
+</script>
\ No newline at end of file
diff --git a/blobs/src/script.js b/blobs/src/script.js
new file mode 100644
index 0000000..1a2deb8
--- /dev/null
+++ b/blobs/src/script.js
@@ -0,0 +1,179 @@
+var ww = window.innerWidth,
+  wh = window.innerHeight;
+
+var renderer = new THREE.WebGLRenderer({
+  canvas: document.querySelector("canvas")
+});
+renderer.setSize(ww, wh);
+
+var scene = new THREE.Scene();
+
+var camera = new THREE.PerspectiveCamera(45, ww / wh, 0.01, 10000);
+camera.position.z = 180;
+camera.position.y = 1;
+
+var controls = new THREE.OrbitControls(camera, renderer.domElement);
+var dollyIn = controls.dollyIn;
+controls.dollyIn = function(){
+  dollyIn();
+  checkCameraPosition();
+};
+var dollyOut = controls.dollyOut;
+controls.dollyOut = function(){
+  dollyOut();
+  checkCameraPosition();
+};
+controls.noPan = true;
+
+var vectCenter = new THREE.Vector3(0,0,0);
+function checkCameraPosition() {
+  var dist = vectCenter.distanceTo(camera.position);
+  if(dist < 60){
+    wireframe = true;
+  } else {
+    wireframe = false;
+  }
+  for (var i = 0; i < amount; i++) {
+    spheres.children[i].material.wireframe = wireframe;
+  }
+}
+
+var sphereGeom = new THREE.SphereGeometry(4, 28, 28);
+
+function Blobby(x, y, z, i) {
+  this.uniforms = {
+    time: {
+      value: 1.0
+    },
+    rainbow: {
+      value: new THREE.Vector2(0.2, noise.simplex3(x * 0.001, y * 0.001, z * 0.001))
+    }
+  };
+  var mat = new THREE.ShaderMaterial({
+    uniforms: this.uniforms,
+    vertexShader: document.getElementById("wrapVertexShader").textContent,
+    fragmentShader: document.getElementById("wrapFragmentShader").textContent,
+    wireframe: true
+  });
+  this.sphere = new THREE.Mesh(sphereGeom, mat);
+  this.sphere.offset = Math.random() * 500;
+  this.sphere.uniforms = this.uniforms;
+  var ratio = Math.random()*0.1 + 1;
+  this.sphere.position.x = x*ratio;
+  this.sphere.position.y = y*ratio;
+  this.sphere.position.z = z*ratio;
+}
+
+var spheres = new THREE.Object3D();
+scene.add(spheres);
+var tempSphere = new THREE.IcosahedronGeometry(60, 3);
+var vertices = tempSphere.vertices;
+amount = vertices.length;
+for (var i = 0; i < amount; i++) {
+  var x = vertices[i].x;
+  var y = vertices[i].y;
+  var z = vertices[i].z;
+  var twin = false;
+  for (var j = 0; j < spheres.children.length; j++) {
+    if (Math.round(spheres.children[j].position.x) === Math.round(x)) {
+      if (Math.round(spheres.children[j].position.y) === Math.round(y)) {
+        if (Math.round(spheres.children[j].position.z) === Math.round(z)) {
+          twin = true;
+        }
+      }
+    }
+  }
+  if (!twin) {
+    var blob = new Blobby(x, y, z, i);
+    spheres.add(blob.sphere);
+  }
+}
+
+function render(d) {
+
+  for (var i = 0; i < spheres.children.length; i++) {
+    spheres.children[i].uniforms.time.value = d * 0.0005 + spheres.children[i].offset;
+  }
+  spheres.rotation.z = d * 0.00004;
+  var color = new THREE.Color("hsl(" + (d * 0.006 + 200) + ",90%,75%)");
+  renderer.setClearColor(color);
+  
+  renderer.render(scene, camera);
+  requestAnimationFrame(render);
+}
+requestAnimationFrame(render);
+
+var wireframe = true;
+
+window.addEventListener("resize", onResize);
+
+function onResize() {
+  ww = window.innerWidth;
+  wh = window.innerHeight;
+  camera.aspect = ww / wh;
+  camera.updateProjectionMatrix();
+  renderer.setSize(ww, wh);
+}
+
+window.addEventListener("mousedown", onClick);
+window.addEventListener("mousemove", onClick);
+window.addEventListener("touchdown", onClick);
+function onClick(e) {
+	var vector = new THREE.Vector2();
+  if(e.type === "touchdown"){
+    vector.set(
+      2 * (e.touches[0].clientX / ww) - 1,
+      1 - 2 * (e.touches[0].clientY / wh )
+    );
+  } else {
+    vector.set(
+      2 * (e.clientX / ww) - 1,
+      1 - 2 * (e.clientY / wh )
+    );
+  }
+	raycaster = new THREE.Raycaster();
+	raycaster.setFromCamera(vector,camera);
+	intersects = raycaster.intersectObjects(spheres.children);
+	if(intersects.length > 0 ){
+    var blob = intersects[0].object;
+    if(e.type === "mousemove"){
+      if(!blob.bounce && blob.scale.x < 1.5){
+        TweenMax.to(blob.scale, 1.3, {
+          x: 1.5,
+          y: 1.5,
+          z: 1.5,
+          ease: Elastic.easeOut.config(1.5, 0.2),
+          onComplete : function(){
+            TweenMax.to(blob.scale, 2, {
+              x: 1,
+              y: 1,
+              z: 1,
+              ease: Power1.easeIn
+            });
+            blob.bounce = false;
+          }
+        });
+      }
+    } else {
+      TweenMax.to(blob.scale, 1.3, {
+        x: "+=0.5",
+        y: "+=0.5",
+        z: "+=0.5",
+        ease: Elastic.easeOut.config(1.5, 0.2),
+        onComplete : function(){
+          TweenMax.to(blob.scale, 2, {
+            x: 1,
+            y: 1,
+            z: 1,
+            ease: Power1.easeIn
+          });
+          blob.bounce = false;
+        }
+      });
+    }
+    blob.bounce = true;
+  }
+}
+
+camera.rotation.set(0,0,0);
+checkCameraPosition();
\ No newline at end of file
diff --git a/blobs/src/style.css b/blobs/src/style.css
new file mode 100644
index 0000000..a96bb7a
--- /dev/null
+++ b/blobs/src/style.css
@@ -0,0 +1,9 @@
+body{
+  overflow: hidden;
+  cursor: pointer;
+}
+canvas{
+  position: absolute;
+  top: 0;
+  left: 0;
+}
\ No newline at end of file
diff --git a/bloom/README.markdown b/bloom/README.markdown
new file mode 100644
index 0000000..d3ca3f8
--- /dev/null
+++ b/bloom/README.markdown
@@ -0,0 +1,6 @@
+# Bloom
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/MillerTime/pen/OJPBGyv](https://codepen.io/MillerTime/pen/OJPBGyv).
+
+ SVG strokes animated with JavaScript. I originally tried animating with CSS only, but I ended up needing a custom easing curve for each style property I was animating.
+
+I was inspired to create a visual with rings splitting apart after seeing [this animation](https://twitter.com/beesandbombs/status/1215675762352717824) by [@beesandbombs](https://twitter.com/beesandbombs).
\ No newline at end of file
diff --git a/bloom/dist/index.html b/bloom/dist/index.html
new file mode 100644
index 0000000..8744e8f
--- /dev/null
+++ b/bloom/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Bloom</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1000px" height="1000px" viewBox="-500 -500 1000 1000">
+	<circle class="ring1" r="100" />
+	<circle class="ring2" r="100" />
+	<circle class="ring3" r="100" />
+	<circle class="ring4" r="100" />
+	<circle class="ring5" r="100" />
+	<circle class="ring6" r="100" />
+</svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/bloom/dist/script.js b/bloom/dist/script.js
new file mode 100644
index 0000000..d018c49
--- /dev/null
+++ b/bloom/dist/script.js
@@ -0,0 +1,99 @@
+console.clear();
+
+// Config
+const DURATION = 10000;
+const TURNS = 1.5;
+const SPLITS_INITIAL = 16;
+const SPLITS_FINAL = 32;
+
+// Elements
+const ringSelectors = ['.ring1', '.ring2', '.ring3', '.ring4', '.ring5', '.ring6'];
+const ringElements = ringSelectors.map(selector => document.querySelector(selector));
+
+// Helpers
+const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+const map = (num, min, max, minTarget, maxTarget) => {
+	const currentRatio = (num - min) / (max - min);
+	return (maxTarget - minTarget) * currentRatio + minTarget;
+};
+const lerp = (a, b, p) => (b - a) * p + a;
+const easeOut1_5 = p => 1 - ((1-p) ** 1.5);
+const easeOut5 = p => 1 - ((1-p) ** 5);
+
+// Gradient sampler factory.
+// Creates an instance with a `sample(position)` method used to query a color from a specific position on the gradient.
+// `position` is a number, where `0` is the start of the gradient and `1` is the end. Out-of-range values are wrapped.
+// I experimented with this kind of gradient here: https://codepen.io/MillerTime/pen/NXxxma?editors=0010
+const gradientSampler = (function GradientSamplerFactory() {
+	// The instance to be returned.
+	const sampler = {};
+
+	// Gradient color stops in RGB format.
+	// Note: does not currently wrap smoothly - this is by design.
+	//       Perhaps a `wrap` flag could be added to `sample()` method.
+	const colors = [
+		{ r: 255, g: 232, b:   0 },
+		{ r: 255, g: 103, b:   0 },
+		{ r: 191, g:  26, b: 156 },
+		{ r:   0, g:  79, b: 229 },
+		{ r:   0, g: 196, b:   9 }
+		// The real gradient continues from green back into orange and pink, but IMO it looks better without it.
+		// { r: 247, g: 154, b:   0 },
+		// { r: 243, g:  63, b: 149 }
+	];
+
+	const colorCount = colors.length;
+	const colorSpans = colorCount - 1;
+	const spanSize = 1 / colorSpans;
+
+	sampler.sample = function sample(position) {
+		// Normalize position to 0..1 scale (inclusive of 0, exlusive of 1).
+		position -= position | 0;
+		if (position < 0) position = 1 - position * -1;
+
+		const startIndex = position * colorSpans | 0;
+		const startColor = colors[startIndex];
+		const endColor = colors[startIndex + 1];
+		// Compute relative position between two chosen color stops.
+		const innerPosition = (position - (startIndex / colorSpans)) / spanSize;
+
+		const r = lerp(startColor.r, endColor.r, innerPosition) | 0;
+		const g = lerp(startColor.g, endColor.g, innerPosition) | 0;
+		const b = lerp(startColor.b, endColor.b, innerPosition) | 0;
+
+		return `rgb(${r},${g},${b})`;
+	};
+
+	return sampler;
+})();
+
+// 200 is the diameter of the <circle> element
+const ringCircumference = 200 * Math.PI;
+
+// Style a ring, given the current animation time in milliseconds. Setting `flip` to `true` reverses rotation.
+function styleRing(el, time, flip) {
+	const progress = Math.max(0, time) % DURATION / DURATION;
+	const delayedProgress = clamp(map(progress, 0, 1, -0.1, 1), 0, 1);
+	el.style.stroke = gradientSampler.sample(easeOut1_5(progress));
+	el.style.transform = `rotate(${flip ? '-' : ''}${progress ** 1.25 * TURNS}turn) scale(${progress ** 1.35 * 6})`;
+	el.style.strokeWidth = lerp(200, 0, easeOut5(delayedProgress));
+	const dash = lerp(ringCircumference / SPLITS_INITIAL, ringCircumference / (2*SPLITS_FINAL), easeOut5(delayedProgress));
+	const gap = lerp(0, ringCircumference / (2*SPLITS_FINAL), easeOut5(delayedProgress));
+	el.style.strokeDasharray = `${dash} ${gap}`;
+}
+
+let startTime = -1;
+
+// Animation Loop
+function tick(time) {
+	if (startTime === -1) startTime = time;
+	const timeFromZero = time - startTime;
+	
+	ringElements.forEach((ringEl, i) => {
+		styleRing(ringEl, timeFromZero - DURATION / ringElements.length * i, i % 2 !== 0);
+	});
+	
+	requestAnimationFrame(tick);
+}
+
+requestAnimationFrame(tick);
\ No newline at end of file
diff --git a/bloom/dist/style.css b/bloom/dist/style.css
new file mode 100644
index 0000000..40bdf39
--- /dev/null
+++ b/bloom/dist/style.css
@@ -0,0 +1,17 @@
+body {
+  display: -webkit-box;
+  display: flex;
+  height: 100vh;
+  background-color: #123;
+}
+
+svg {
+  margin: auto;
+  width: 100%;
+  max-width: 100vh;
+  height: auto;
+}
+
+circle {
+  fill: none;
+}
\ No newline at end of file
diff --git a/bloom/license.txt b/bloom/license.txt
new file mode 100644
index 0000000..9c91aad
--- /dev/null
+++ b/bloom/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Caleb Miller (https://codepen.io/MillerTime/pen/OJPBGyv)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/bloom/src/index.html b/bloom/src/index.html
new file mode 100644
index 0000000..c2ff3b5
--- /dev/null
+++ b/bloom/src/index.html
@@ -0,0 +1,8 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1000px" height="1000px" viewBox="-500 -500 1000 1000">
+	<circle class="ring1" r="100" />
+	<circle class="ring2" r="100" />
+	<circle class="ring3" r="100" />
+	<circle class="ring4" r="100" />
+	<circle class="ring5" r="100" />
+	<circle class="ring6" r="100" />
+</svg>
diff --git a/bloom/src/script.js b/bloom/src/script.js
new file mode 100644
index 0000000..a987ca6
--- /dev/null
+++ b/bloom/src/script.js
@@ -0,0 +1,99 @@
+console.clear();
+
+// Config
+const DURATION = 10000;
+const TURNS = 1.5;
+const SPLITS_INITIAL = 16;
+const SPLITS_FINAL = 32;
+
+// Elements
+const ringSelectors = ['.ring1', '.ring2', '.ring3', '.ring4', '.ring5', '.ring6'];
+const ringElements = ringSelectors.map(selector => document.querySelector(selector));
+
+// Helpers
+const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+const map = (num, min, max, minTarget, maxTarget) => {
+	const currentRatio = (num - min) / (max - min);
+	return (maxTarget - minTarget) * currentRatio + minTarget;
+};
+const lerp = (a, b, p) => (b - a) * p + a;
+const easeOut1_5 = p => 1 - ((1-p) ** 1.5);
+const easeOut5 = p => 1 - ((1-p) ** 5);
+
+// Gradient sampler factory.
+// Creates an instance with a `sample(position)` method used to query a color from a specific position on the gradient.
+// `position` is a number, where `0` is the start of the gradient and `1` is the end. Out-of-range values are wrapped.
+// I experimented with this kind of gradient here: https://codepen.io/MillerTime/pen/NXxxma?editors=0010
+const gradientSampler = (function GradientSamplerFactory() {
+	// The instance to be returned.
+	const sampler = {};
+
+	// Gradient color stops in RGB format.
+	// Note: does not currently wrap smoothly - this is by design.
+	//       Perhaps a `wrap` flag could be added to `sample()` method.
+	const colors = [
+		{ r: 255, g: 232, b:   0 },
+		{ r: 255, g: 103, b:   0 },
+		{ r: 191, g:  26, b: 156 },
+		{ r:   0, g:  79, b: 229 },
+		{ r:   0, g: 196, b:   9 }
+		// The real gradient continues from green back into orange and pink, but IMO it looks better without it.
+		// { r: 247, g: 154, b:   0 },
+		// { r: 243, g:  63, b: 149 }
+	];
+
+	const colorCount = colors.length;
+	const colorSpans = colorCount - 1;
+	const spanSize = 1 / colorSpans;
+
+	sampler.sample = function sample(position) {
+		// Normalize position to 0..1 scale (inclusive of 0, exlusive of 1).
+		position -= position | 0;
+		if (position < 0) position = 1 - position * -1;
+
+		const startIndex = position * colorSpans | 0;
+		const startColor = colors[startIndex];
+		const endColor = colors[startIndex + 1];
+		// Compute relative position between two chosen color stops.
+		const innerPosition = (position - (startIndex / colorSpans)) / spanSize;
+
+		const r = lerp(startColor.r, endColor.r, innerPosition) | 0;
+		const g = lerp(startColor.g, endColor.g, innerPosition) | 0;
+		const b = lerp(startColor.b, endColor.b, innerPosition) | 0;
+
+		return `rgb(${r},${g},${b})`;
+	};
+
+	return sampler;
+})();
+
+// 200 is the diameter of the <circle> element
+const ringCircumference = 200 * Math.PI;
+
+// Style a ring, given the current animation time in milliseconds. Setting `flip` to `true` reverses rotation.
+function styleRing(el, time, flip) {
+	const progress = Math.max(0, time) % DURATION / DURATION;
+	const delayedProgress = clamp(map(progress, 0, 1, -0.1, 1), 0, 1);
+	el.style.stroke = gradientSampler.sample(easeOut1_5(progress));
+	el.style.transform = `rotate(${flip ? '-' : ''}${progress ** 1.25 * TURNS}turn) scale(${progress ** 1.35 * 6})`;
+	el.style.strokeWidth = lerp(200, 0, easeOut5(delayedProgress));
+	const dash = lerp(ringCircumference / SPLITS_INITIAL, ringCircumference / (2*SPLITS_FINAL), easeOut5(delayedProgress));
+	const gap = lerp(0, ringCircumference / (2*SPLITS_FINAL), easeOut5(delayedProgress));
+	el.style.strokeDasharray = `${dash} ${gap}`;
+}
+
+let startTime = -1;
+
+// Animation Loop
+function tick(time) {
+	if (startTime === -1) startTime = time;
+	const timeFromZero = time - startTime;
+	
+	ringElements.forEach((ringEl, i) => {
+		styleRing(ringEl, timeFromZero - DURATION / ringElements.length * i, i % 2 !== 0);
+	});
+	
+	requestAnimationFrame(tick);
+}
+
+requestAnimationFrame(tick);
diff --git a/bloom/src/style.scss b/bloom/src/style.scss
new file mode 100644
index 0000000..f7be9f5
--- /dev/null
+++ b/bloom/src/style.scss
@@ -0,0 +1,16 @@
+body {
+	display: flex;
+	height: 100vh;
+	background-color: #123;
+}
+
+svg {
+	margin: auto;
+	width: 100%;
+	max-width: 100vh;
+	height: auto;
+}
+
+circle {
+	fill: none;
+}
\ No newline at end of file
diff --git a/bongo-cat-codes-2jamming/README.markdown b/bongo-cat-codes-2jamming/README.markdown
new file mode 100644
index 0000000..7734ed5
--- /dev/null
+++ b/bongo-cat-codes-2jamming/README.markdown
@@ -0,0 +1,7 @@
+# Bongo Cat Codes #2 - Jamming
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/carolineartz/pen/qBOEzQa](https://codepen.io/carolineartz/pen/qBOEzQa).
+
+A variation on an older pen: https://codepen.io/carolineartz/pen/VwYwZaP 
+
+beyond the obvious differences, this version uses gsap vs the linked pen animates via css.
diff --git a/bongo-cat-codes-2jamming/dist/index.html b/bongo-cat-codes-2jamming/dist/index.html
new file mode 100644
index 0000000..3005b62
--- /dev/null
+++ b/bongo-cat-codes-2jamming/dist/index.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Bongo Cat Codes #2 - Jamming</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 785.5 465.8">
+    <g id="bongo-cat">
+      <g class="head">
+        <path d="M280.4,221l383.8,62.6a171.4,171.4,0,0,0-9.2-40.5,174,174,0,0,0-28.7-50.5,163.3,163.3,0,0,0,3.2-73.8c-11.6-1.9-42,14.2-44.5,17.5-19.6-24-88.5-52.7-153.7-48.1A78.8,78.8,0,0,0,398,67.1c-9.8,2.9-19,29.7-19.4,33.7a320,320,0,0,0-31.7,23.6c-14,11.8-28.9,24.4-42.5,44.3A173,173,0,0,0,280.4,221Z"></path>
+        <path d="M396.6,178.6c.4.9,2.7,6.5,8.5,8.4s13.4-1.2,17.2-7.9c-.9,7.5,3.8,14.3,10.4,16a14.4,14.4,0,0,0,15-5.7"></path>
+        <path d="M474,179.2a6.6,6.6,0,0,0-4.9,3.6,6,6,0,0,0,1.5,7.3,6,6,0,0,0,7.9-1c2.3-2.6,2-7,.2-8s-5.9,1.6-5.7,3.5,1.9,2.8,3.2,2.3,1.1-2.2,1.1-2.3"></path>
+        <path d="M365.4,168.9c0,.3-.8,3.6,1.5,6a5.9,5.9,0,0,0,7.2,1.4,6.1,6.1,0,0,0,2.2-7.7c-1.5-3.1-5.7-4.5-7.3-3.2s-.8,6,1,6.6,3.3-.7,3.3-2.1-1.5-1.8-1.6-1.9"></path>
+        <g class="headphone headphone-right">
+          <g class="speaker">
+            <path d="M400.7,80.2c-14.1-20.8-40.2.3-50.7,15-8.7,12.2-9.7,30.3,2.8,37.3,5.4-9,11.8-15.6,21-26.2A214.1,214.1,0,0,1,400.7,80.2Z"></path>
+            <path d="M381.5,79.4c-6.6-7.5-9.6-5.8-12.3-5.5-16.3,1.3-32,20.3-27.8,33.9a21.8,21.8,0,0,0,5.9,8.5c1.7-2.6,3.5-5.1,5.4-7.7A150.7,150.7,0,0,1,381.5,79.4Z"></path>
+            <path d="M367.3,77.8a13.1,13.1,0,0,0-5.1-1.8c-8.5-.9-18.7,7.5-18.4,16.1a12.8,12.8,0,0,0,2.6,7c3.1-3.3,6.3-6.8,9.6-10.2S363.6,81.3,367.3,77.8Z"></path>
+          </g>
+          <path class="band" d="M515,40.6c-15.9-4.6-57-14.1-104,2.3a166.9,166.9,0,0,0-60.9,37.3"></path>
+        </g>
+      </g>
+      <g class="music music-right">
+        <g class="note">
+          <g>
+            <path d="M368.5,46.5c.5,2.1,1.2,3.5,3.8,6.3s5.1,4.3,6.5,7.2a11.1,11.1,0,0,1,.7,2,10.5,10.5,0,0,1-.7,6.5"></path>
+            <path d="M368.5,46.5a20.8,20.8,0,0,0,2.4,11.7c2.3,4.4,5,5.4,6.8,9.5a17.5,17.5,0,0,1,.4,11"></path>
+            <line x1="368.5" y1="47.7" x2="368.5" y2="92.8"></line>
+            <path d="M368.5,92.8c.1-3.1-4.7-6.3-9-6.3s-8.7,2.7-8.7,5.8,4.8,5.7,8.7,5.8S368.3,95.8,368.5,92.8Z"></path>
+          </g>
+          <g>
+            <path d="M368.5,46.5c.5,2.1,1.2,3.5,3.8,6.3s5.1,4.3,6.5,7.2a11.1,11.1,0,0,1,.7,2,10.5,10.5,0,0,1-.7,6.5"></path>
+            <path d="M368.5,46.5a20.8,20.8,0,0,0,2.4,11.7c2.3,4.4,5,5.4,6.8,9.5a17.5,17.5,0,0,1,.4,11"></path>
+            <line x1="368.5" y1="47.7" x2="368.5" y2="92.8"></line>
+            <path d="M368.5,92.8c.1-3.1-4.7-6.3-9-6.3s-8.7,2.7-8.7,5.8,4.8,5.7,8.7,5.8S368.3,95.8,368.5,92.8Z"></path>
+          </g>
+        </g>
+        <g class="note">
+          <g>
+            <polyline points="350 81.7 350 43.5 382.7 50.7 382.7 89.5"></polyline>
+            <path d="M350,82.3c0-3.1-4.5-5.7-8.2-5.9s-9.3,2.8-9.2,6,4.7,5.7,8.6,5.7S349.9,85.5,350,82.3Z"></path>
+            <path d="M382.7,89.9c0-3.1-4.4-5.7-8.2-5.8s-9.3,2.7-9.2,5.9,4.7,5.7,8.7,5.7S382.7,93.1,382.7,89.9Z"></path>
+          </g>
+          <g>
+            <polyline points="350 81.7 350 43.5 382.7 50.7 382.7 89.5"></polyline>
+            <path d="M350,82.3c0-3.1-4.5-5.7-8.2-5.9s-9.3,2.8-9.2,6,4.7,5.7,8.6,5.7S349.9,85.5,350,82.3Z"></path>
+            <path d="M382.7,89.9c0-3.1-4.4-5.7-8.2-5.8s-9.3,2.7-9.2,5.9,4.7,5.7,8.7,5.7S382.7,93.1,382.7,89.9Z"></path>
+          </g>
+        </g>
+        <g class="note">
+          <polyline points="388.2 73.6 388.2 34.6 354.9 42.6 354.9 82.4"></polyline>
+          <path d="M388.2,74.1c0-3-4.4-5.6-8.1-5.8s-9.2,2.8-9.1,6,4.6,5.6,8.6,5.6S388.2,77.3,388.2,74.1Z"></path>
+          <path d="M354.9,81.9c0-3.1-4.4-5.7-8.2-5.9s-9.3,2.8-9.2,6,4.7,5.7,8.7,5.7S354.9,85.1,354.9,81.9Z"></path>
+          <line x1="354.9" y1="48.4" x2="388.2" y2="40.3"></line>
+          <line x1="354.9" y1="54.6" x2="388.2" y2="47"></line>
+        </g>
+        <g class="note">
+          <g>
+            <path d="M371.8,79.5c0-3.1-4.5-5.8-8.3-5.9s-9.3,2.8-9.2,6,4.7,5.7,8.7,5.7S371.8,82.7,371.8,79.5Z"></path>
+            <line x1="371.8" y1="79.5" x2="371.8" y2="33.3"></line>
+            <path d="M371.8,33.4a26.6,26.6,0,0,0,3.6,7.8c3.7,5.7,7.6,7,8.8,11.6.5,1.7.7,4.4-.9,8.3"></path>
+          </g>
+          <g>
+            <path d="M371.8,79.5c0-3.1-4.5-5.8-8.3-5.9s-9.3,2.8-9.2,6,4.7,5.7,8.7,5.7S371.8,82.7,371.8,79.5Z"></path>
+            <line x1="371.8" y1="79.5" x2="371.8" y2="33.3"></line>
+            <path d="M371.8,33.4a26.6,26.6,0,0,0,3.6,7.8c3.7,5.7,7.6,7,8.8,11.6.5,1.7.7,4.4-.9,8.3"></path>
+          </g>
+        </g>
+      </g>
+      <g class="table">
+        <polyline points="27.3 160.5 785.2 295 785.4 465.8"></polyline>
+        <line x1="785.2" y1="295" x2="27.3" y2="160.5"></line>
+      </g>
+      <polygon class="laptop-base" points="103.2 263.6 258.9 219.3 636.5 294.4 452.1 339 103.2 263.6"></polygon>
+      <g class="laptop-keyboard">
+        <polygon points="369.6 265.6 255.3 244.3 255.5 243.5 264.7 241.9 380.9 262.3 380.8 263.1 369.6 265.6"></polygon>
+        <polygon points="235.9 256.4 219.8 253.2 219.9 252.5 228.7 251 245.3 253.4 245.1 254.2 235.9 256.4"></polygon>
+        <polygon points="473.1 303.7 248.4 258.9 248.6 258.1 257.7 256.6 486.2 300.4 486 301.3 473.1 303.7"></polygon>
+        <polygon points="410.3 300.2 202.7 257.5 202.9 256.8 211.4 255.3 422.4 297.1 422.2 298 410.3 300.2"></polygon>
+        <polygon points="448.5 308.1 427 303.7 427.3 302.8 439.2 301.4 461.2 304.9 461 305.8 448.5 308.1"></polygon>
+        <polygon points="200.1 264.7 186 261.7 186.2 261 194.5 259.5 208.9 261.8 208.8 262.5 200.1 264.7"></polygon>
+        <polygon points="221.1 269.1 206.6 266.1 206.8 265.3 215.4 263.9 230.3 266.2 230.1 267 221.1 269.1"></polygon>
+        <polygon points="361.4 298.9 230 271 230.2 270.3 239.2 268.9 372.7 295.9 372.5 296.7 361.4 298.9"></polygon>
+        <polygon points="442.8 279.2 383.7 268.2 383.9 267.3 395.1 265.7 455.4 275.9 455.2 276.7 442.8 279.2"></polygon>
+        <polygon points="524.6 294.4 458.6 282.1 458.8 281.2 471.3 279.7 538.6 291 538.4 291.9 524.6 294.4"></polygon>
+        <polygon points="424.7 312.4 374.6 301.7 374.8 300.9 385.9 299.5 437 309.3 436.8 310.2 424.7 312.4"></polygon>
+        <polygon points="409.1 277.3 397.6 278.8 397.4 279.6 498.4 299.1 511.8 296.7 512 295.8 409.1 277.3"></polygon>
+        <polygon points="394.2 274.5 394.4 273.6 246.7 246.5 237.7 248.1 237.5 248.8 382.8 276.8 394.2 274.5"></polygon>
+      </g>
+      <g class="paw paw-right">
+        <path class="down" d="M289.1,181.7c-12.1,9.8-20.6,20.7-20.7,32.1-.2,9,3.8,20.4,13.3,25.2s20.1.6,29.6-3.4c13.4-5.7,23.9-14.6,29.4-21.5"></path>
+        <g class="up">
+          <path d="M327.3,170c-.4-1.4-6.3-18.8-23.5-23.5-.8-.2-18.6-4.7-28.9,6.3-8.4,9.1-6,22.5-4.6,30.2a54.3,54.3,0,0,0,8.1,19.9"></path>
+          <g class="pads">
+            <path d="M297.2,154.8c1-.5,2.7-.1,3,.6s-1.4,2.4-2.6,2.1a1.6,1.6,0,0,1-1.1-1.2A1.6,1.6,0,0,1,297.2,154.8Z"></path>
+            <path d="M285.8,159.4c.3-.4,1-1.1,1.7-.8s.9,1.4.8,2.2-1.8,2.1-2.5,1.5S285.2,160.4,285.8,159.4Z"></path>
+            <path d="M276.9,171c.5-.4,2.7-.3,3.2.6s-.6,1.8-1.4,1.8S276.2,171.6,276.9,171Z"></path>
+            <path d="M296.4,168.6c2.3-.9,6.4,6.3,7.6,9s-5.2,4.5-7.4,6-5.1-6.1-5.9-8.3S293.7,169.8,296.4,168.6Z"></path>
+          </g>
+        </g>
+      </g>
+      <polygon class="terminal-frame" points="93.8 63.3 284.1 73 335.9 230.5 146.2 197.6 93.8 63.3"></polygon>
+      <g class="terminal-code">
+        <line x1="260.2" y1="92.3" x2="212.2" y2="88.7"></line>
+        <line x1="197.3" y1="87.5" x2="145.2" y2="83.5"></line>
+        <line x1="251" y1="104.2" x2="223.4" y2="101.8"></line>
+        <line x1="209.4" y1="100.5" x2="154.4" y2="95.6"></line>
+        <line x1="256.4" y1="117.9" x2="227.5" y2="114.7"></line>
+        <line x1="215.9" y1="113.4" x2="183.5" y2="109.8"></line>
+        <line x1="169.1" y1="108.2" x2="142.9" y2="105.3"></line>
+        <line x1="275.4" y1="132.8" x2="249.4" y2="129.6"></line>
+        <line x1="234.4" y1="127.8" x2="197.3" y2="123.3"></line>
+        <line x1="185.6" y1="121.9" x2="149.1" y2="117.5"></line>
+        <line x1="261" y1="144.6" x2="244.5" y2="142.5"></line>
+        <line x1="235.5" y1="141.3" x2="214.9" y2="138.7"></line>
+        <line x1="203.4" y1="137.2" x2="180.4" y2="134.3"></line>
+        <line x1="169.3" y1="132.9" x2="155.1" y2="131.1"></line>
+        <line x1="264.7" y1="158.3" x2="221.9" y2="152.1"></line>
+        <line x1="208.2" y1="150.1" x2="191.7" y2="147.7"></line>
+        <line x1="291.3" y1="174.3" x2="268.8" y2="170.9"></line>
+        <line x1="257.8" y1="169.2" x2="226.5" y2="164.4"></line>
+        <line x1="217.3" y1="163" x2="185" y2="158.1"></line>
+        <line x1="173.8" y1="156.4" x2="152.9" y2="153.2"></line>
+        <line x1="278.5" y1="185.6" x2="257.3" y2="182.2"></line>
+        <line x1="243.8" y1="179.9" x2="230.3" y2="177.7"></line>
+        <line x1="216.5" y1="175.8" x2="196.7" y2="172.5"></line>
+        <line x2="262.1" y2="196.1" x1="280.5" y1="199.2"></line>
+        <line x2="213.8" y2="187.9" x1="251.1" y1="194.2"></line>
+        <line x2="180.8" y2="182.3" x1="202.7" y1="186"></line>
+      </g>
+      <polygon class="laptop-cover" points="103.2 263.6 452.1 339 360.8 12.4 2 2 103.2 263.6"></polygon>
+      <g class="paw paw-left">
+        <g class="up">
+          <path d="M586.6,208.8c-.6-2.3-4.2-15.6-17.2-22.2-2.7-1.3-12.8-6.4-23.6-1.8s-14.6,16.5-14.8,18.4c-1.2,9-.7,18.4,2.4,26.1,2.4,6,7.5,17.2,9.7,20.2"></path>
+          <g class="pads">
+            <path d="M561.4,194.9a2.7,2.7,0,0,1,3,.5c.4,1-1.4,2.4-2.6,2.2a1.5,1.5,0,0,1-1.1-1.3A1.2,1.2,0,0,1,561.4,194.9Z"></path>
+            <path d="M550.7,200.4c.4-.5,1.1-1.1,1.7-.8a2,2,0,0,1,.8,2.2c-.3,1.2-1.8,2-2.5,1.5S550.1,201.3,550.7,200.4Z"></path>
+            <path d="M541.1,211.1c.5-.4,2.7-.4,3.2.5s-.6,1.8-1.5,1.9S540.4,211.6,541.1,211.1Z"></path>
+            <path d="M560.6,209.2c2.3-.9,6.4,6.3,7.6,9s-5.3,4.5-7.4,6-5.1-6-5.9-8.3S557.9,210.4,560.6,209.2Z"></path>
+          </g>
+        </g>
+        <path class="down" d="M534.1,231.4c-19.7,6-32.9,18.4-34.2,29.1a30.1,30.1,0,0,0,1.7,14.1,24.8,24.8,0,0,0,6.1,8.8c6,5.1,16.8,4,38-3.9a288.7,288.7,0,0,0,46.5-22.1"></path>
+      </g>
+      <g class="headphone headphone-left">
+        <g class="speaker">
+          <path d="M609.5,137.3c-17.1,6.3-20.7,51.4-4.5,67.3,1.4,1.5,5.5,5.5,11.3,5.9,8.2.5,14.5-6.3,16.9-8.9,10.1-11,11.5-27.5,8.1-40.1-1.4-4.8-3.9-14-12.7-19.9C627.4,140.8,617.7,134.3,609.5,137.3Z"></path>
+          <path d="M626.5,196.1c2.7-.4,5.9-2.6,9.3-6,6.6-6.6,6.8-16.6,5.8-24s-4.2-16.1-11.3-19.7a18.7,18.7,0,0,0-10.9-1.9C614,149.3,615.3,192.6,626.5,196.1Z"></path>
+          <path d="M631.6,151c-4.5,3.3-.5,27.1,3.8,28.2s6.9-6.6,6.2-13.1S637.4,153.5,631.6,151Z"></path>
+        </g>
+        <path class="band" d="M638.9,157.7c-4-16.8-25.9-61.9-75.3-95.3A155.5,155.5,0,0,0,515,40.6"></path>
+      </g>
+      <g class="music music-left">
+        <g class="note">
+          <g>
+            <path d="M633.3,119.9c.6,2,1.3,3.5,3.8,6.3s5.2,4.3,6.5,7.2a6.9,6.9,0,0,1,.7,1.9,10.2,10.2,0,0,1-.7,6.6"></path>
+            <path d="M633.3,119.9a23,23,0,0,0,2.4,11.7c2.4,4.3,5.1,5.4,6.8,9.5a16.9,16.9,0,0,1,.5,11"></path>
+            <line x1="633.3" y1="121.1" x2="633.3" y2="166.2"></line>
+            <path d="M633.3,166.2c.2-3.2-4.6-6.3-8.9-6.3s-8.7,2.6-8.7,5.7,4.7,5.7,8.7,5.8S633.1,169.2,633.3,166.2Z"></path>
+          </g>
+          <g>
+            <path d="M633.3,119.9c.6,2,1.3,3.5,3.8,6.3s5.2,4.3,6.5,7.2a6.9,6.9,0,0,1,.7,1.9,10.2,10.2,0,0,1-.7,6.6"></path>
+            <path d="M633.3,119.9a23,23,0,0,0,2.4,11.7c2.4,4.3,5.1,5.4,6.8,9.5a16.9,16.9,0,0,1,.5,11"></path>
+            <line x1="633.3" y1="121.1" x2="633.3" y2="166.2"></line>
+            <path d="M633.3,166.2c.2-3.2-4.6-6.3-8.9-6.3s-8.7,2.6-8.7,5.7,4.7,5.7,8.7,5.8S633.1,169.2,633.3,166.2Z"></path>
+          </g>
+        </g>
+        <g class="note">
+          <g>
+            <polyline points="614.8 155 614.8 116.8 647.5 124 647.5 162.9"></polyline>
+            <path d="M614.8,155.7c0-3.1-4.4-5.7-8.2-5.9s-9.2,2.8-9.2,6,4.7,5.6,8.7,5.6S614.8,158.8,614.8,155.7Z"></path>
+            <path d="M647.5,163.3c.1-3.1-4.4-5.7-8.2-5.9s-9.2,2.8-9.1,6,4.7,5.7,8.6,5.7S647.5,166.5,647.5,163.3Z"></path>
+          </g>
+          <g>
+            <polyline points="614.8 155 614.8 116.8 647.5 124 647.5 162.9"></polyline>
+            <path d="M614.8,155.7c0-3.1-4.4-5.7-8.2-5.9s-9.2,2.8-9.2,6,4.7,5.6,8.7,5.6S614.8,158.8,614.8,155.7Z"></path>
+            <path d="M647.5,163.3c.1-3.1-4.4-5.7-8.2-5.9s-9.2,2.8-9.1,6,4.7,5.7,8.6,5.7S647.5,166.5,647.5,163.3Z"></path>
+          </g>
+        </g>
+        <g class="note">
+          <polyline points="646.5 148.5 646.5 109.4 613.2 117.4 613.2 157.2"></polyline>
+          <path d="M646.5,149c0-3.1-4.4-5.7-8.1-5.8s-9.2,2.7-9.1,5.9,4.7,5.6,8.6,5.6S646.5,152.1,646.5,149Z"></path>
+          <path d="M613.2,156.7c.1-3.1-4.4-5.7-8.2-5.8s-9.3,2.7-9.2,6,4.7,5.6,8.7,5.6S613.2,159.9,613.2,156.7Z"></path>
+          <line x1="613.2" y1="123.2" x2="646.5" y2="115.1"></line>
+          <line x1="613.2" y1="129.4" x2="646.5" y2="121.8"></line>
+        </g>
+        <g class="note">
+          <g>
+            <path d="M636.6,152.9c0-3.2-4.4-5.8-8.2-5.9s-9.3,2.8-9.3,6,4.8,5.7,8.7,5.7S636.6,156.1,636.6,152.9Z"></path>
+            <line x1="636.6" y1="152.9" x2="636.6" y2="106.6"></line>
+            <path d="M636.6,106.8a33.2,33.2,0,0,0,3.6,7.8c3.8,5.7,7.6,6.9,8.9,11.5a13.3,13.3,0,0,1-.9,8.4"></path>
+          </g>
+          <g>
+            <path d="M636.6,152.9c0-3.2-4.4-5.8-8.2-5.9s-9.3,2.8-9.3,6,4.8,5.7,8.7,5.7S636.6,156.1,636.6,152.9Z"></path>
+            <line x1="636.6" y1="152.9" x2="636.6" y2="106.6"></line>
+            <path d="M636.6,106.8a33.2,33.2,0,0,0,3.6,7.8c3.8,5.7,7.6,6.9,8.9,11.5a13.3,13.3,0,0,1-.9,8.4"></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+</div>
+<!-- partial -->
+  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/bongo-cat-codes-2jamming/dist/script.js b/bongo-cat-codes-2jamming/dist/script.js
new file mode 100644
index 0000000..6fa15e2
--- /dev/null
+++ b/bongo-cat-codes-2jamming/dist/script.js
@@ -0,0 +1,114 @@
+// Inspired By
+// https://codepen.io/abeatrize/pen/LJqYey
+
+// Bongo Cat originally created by @StrayRogue and @DitzyFlama
+
+const ID = "bongo-cat";
+const s = selector => `#${ID} ${selector}`;
+const notes = document.querySelectorAll(".note");
+
+for (let note of notes) {
+  note.parentElement.appendChild(note.cloneNode(true));
+  note.parentElement.appendChild(note.cloneNode(true));
+}
+
+const music = { note: s(".music .note") };
+const terminal = { frame: s(".terminal-frame"), code: s(".terminal-code line") };
+const cat = {
+  pawRight: {
+    up: s(".paw-right .up"),
+    down: s(".paw-right .down") },
+
+  pawLeft: {
+    up: s(".paw-left .up"),
+    down: s(".paw-left .down") } };
+
+
+
+const style = getComputedStyle(document.documentElement);
+
+const green = style.getPropertyValue("--green");
+const pink = style.getPropertyValue("--pink");
+const blue = style.getPropertyValue("--blue");
+const orange = style.getPropertyValue("--orange");
+const cyan = style.getPropertyValue("--cyan");
+
+gsap.set(music.note, { scale: 0, autoAlpha: 1 });
+
+const animatePawState = (selector) =>
+gsap.fromTo(
+selector,
+{ autoAlpha: 0 },
+{
+  autoAlpha: 1,
+  duration: 0.01,
+  repeatDelay: 0.19,
+  yoyo: true,
+  repeat: -1 });
+
+
+
+const tl = gsap.timeline();
+
+tl.
+add(animatePawState(cat.pawLeft.up), "start").
+add(animatePawState(cat.pawRight.down), "start").
+add(animatePawState(cat.pawLeft.down), "start+=0.19").
+add(animatePawState(cat.pawRight.up), "start+=0.19").
+timeScale(1.6);
+
+gsap.from(".terminal-code line", {
+  drawSVG: "0%",
+  duration: 0.1,
+  stagger: 0.1,
+  ease: 'none',
+  repeat: -1 });
+
+
+const noteEls = gsap.utils.pipe(
+gsap.utils.toArray,
+gsap.utils.shuffle)(
+music.note);
+
+const numNotes = noteEls.length / 3;
+const notesG1 = noteEls.splice(0, numNotes);
+const notesG2 = noteEls.splice(0, numNotes);
+const notesG3 = noteEls;
+
+const colorizer = gsap.utils.random([green, pink, blue, orange, cyan, "#a3a4ec", "#67b5c0", "#fd7c6e"], true);
+const rotator = gsap.utils.random(-50, 50, 1, true);
+const dir = amt => `${gsap.utils.random(["-", "+"])}=${amt}`;
+
+const animateNotes = els => {
+  els.forEach(el => {
+    gsap.set(el, {
+      stroke: colorizer(),
+      rotation: rotator(),
+      x: gsap.utils.random(-25, 25, 1) });
+
+  });
+
+  return gsap.fromTo(els, {
+    autoAlpha: 1,
+    y: 0,
+    scale: 0 },
+  {
+    duration: 2,
+    autoAlpha: 0,
+    scale: 1,
+    ease: "none",
+    stagger: {
+      from: "random",
+      each: 0.5 },
+
+    rotation: dir(gsap.utils.random(20, 30, 1)),
+    x: dir(gsap.utils.random(40, 60, 1)),
+    y: gsap.utils.random(-200, -220, 1),
+    onComplete: () => animateNotes(els) });
+
+};
+
+tl.
+add(animateNotes(notesG1)).
+add(animateNotes(notesG2), ">0.05").
+add(animateNotes(notesG3), ">0.25");
\ No newline at end of file
diff --git a/bongo-cat-codes-2jamming/dist/style.css b/bongo-cat-codes-2jamming/dist/style.css
new file mode 100644
index 0000000..eb0f3f0
--- /dev/null
+++ b/bongo-cat-codes-2jamming/dist/style.css
@@ -0,0 +1,69 @@
+:root {
+  --bg: #1a1e2d;
+  --green: #a5ea9b;
+  --pink: #ff61d8;
+  --blue: #569cfa;
+  --orange: #ffcc81;
+  --cyan: #7ed1e2;
+}
+
+body {
+  height: 100vh;
+  width: 100vw;
+  background: var(--bg);
+  display: -webkit-box;
+  display: flex;
+  place-content: center;
+  -webkit-box-align: end;
+          align-items: flex-end;
+}
+
+.container {
+  width: 80vw;
+  height: 80vh;
+}
+.container svg {
+  height: 100%;
+  width: 100%;
+  overflow: visible;
+}
+
+#bongo-cat {
+  fill: var(--bg);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 4;
+}
+#bongo-cat .laptop-cover,
+#bongo-cat .headphone .band {
+  fill: none;
+}
+#bongo-cat .paw, #bongo-cat .head {
+  stroke: var(--orange);
+}
+#bongo-cat .laptop-keyboard {
+  stroke-width: 2;
+}
+#bongo-cat .terminal-code {
+  stroke-width: 5;
+}
+#bongo-cat .music .note,
+#bongo-cat .laptop-base,
+#bongo-cat .laptop-cover,
+#bongo-cat .paw .pads {
+  stroke: var(--pink);
+}
+#bongo-cat .table line,
+#bongo-cat .headphone .band,
+#bongo-cat .headphone .speaker path:nth-child(3) {
+  stroke: var(--green);
+}
+#bongo-cat .terminal-frame,
+#bongo-cat .laptop-keyboard,
+#bongo-cat .headphone .speaker path:nth-child(2) {
+  stroke: var(--blue);
+}
+#bongo-cat .terminal-code,
+#bongo-cat .headphone .speaker path:first-child {
+  stroke: var(--cyan);
+}
\ No newline at end of file
diff --git a/bongo-cat-codes-2jamming/license.txt b/bongo-cat-codes-2jamming/license.txt
new file mode 100644
index 0000000..bcdec38
--- /dev/null
+++ b/bongo-cat-codes-2jamming/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Caroline Artz (https://codepen.io/carolineartz/pen/qBOEzQa)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/bongo-cat-codes-2jamming/src/index.pug b/bongo-cat-codes-2jamming/src/index.pug
new file mode 100644
index 0000000..21f9175
--- /dev/null
+++ b/bongo-cat-codes-2jamming/src/index.pug
@@ -0,0 +1,157 @@
+.container
+  svg(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 785.5 465.8')
+    g#bongo-cat
+      g.head
+        path(d='M280.4,221l383.8,62.6a171.4,171.4,0,0,0-9.2-40.5,174,174,0,0,0-28.7-50.5,163.3,163.3,0,0,0,3.2-73.8c-11.6-1.9-42,14.2-44.5,17.5-19.6-24-88.5-52.7-153.7-48.1A78.8,78.8,0,0,0,398,67.1c-9.8,2.9-19,29.7-19.4,33.7a320,320,0,0,0-31.7,23.6c-14,11.8-28.9,24.4-42.5,44.3A173,173,0,0,0,280.4,221Z')
+        path(d='M396.6,178.6c.4.9,2.7,6.5,8.5,8.4s13.4-1.2,17.2-7.9c-.9,7.5,3.8,14.3,10.4,16a14.4,14.4,0,0,0,15-5.7')
+        path(d='M474,179.2a6.6,6.6,0,0,0-4.9,3.6,6,6,0,0,0,1.5,7.3,6,6,0,0,0,7.9-1c2.3-2.6,2-7,.2-8s-5.9,1.6-5.7,3.5,1.9,2.8,3.2,2.3,1.1-2.2,1.1-2.3')
+        path(d='M365.4,168.9c0,.3-.8,3.6,1.5,6a5.9,5.9,0,0,0,7.2,1.4,6.1,6.1,0,0,0,2.2-7.7c-1.5-3.1-5.7-4.5-7.3-3.2s-.8,6,1,6.6,3.3-.7,3.3-2.1-1.5-1.8-1.6-1.9')
+        g.headphone.headphone-right
+          g.speaker
+            path(d='M400.7,80.2c-14.1-20.8-40.2.3-50.7,15-8.7,12.2-9.7,30.3,2.8,37.3,5.4-9,11.8-15.6,21-26.2A214.1,214.1,0,0,1,400.7,80.2Z')
+            path(d='M381.5,79.4c-6.6-7.5-9.6-5.8-12.3-5.5-16.3,1.3-32,20.3-27.8,33.9a21.8,21.8,0,0,0,5.9,8.5c1.7-2.6,3.5-5.1,5.4-7.7A150.7,150.7,0,0,1,381.5,79.4Z')
+            path(d='M367.3,77.8a13.1,13.1,0,0,0-5.1-1.8c-8.5-.9-18.7,7.5-18.4,16.1a12.8,12.8,0,0,0,2.6,7c3.1-3.3,6.3-6.8,9.6-10.2S363.6,81.3,367.3,77.8Z')
+          path.band(d='M515,40.6c-15.9-4.6-57-14.1-104,2.3a166.9,166.9,0,0,0-60.9,37.3')
+      g.music.music-right
+        g.note
+          g
+            path(d='M368.5,46.5c.5,2.1,1.2,3.5,3.8,6.3s5.1,4.3,6.5,7.2a11.1,11.1,0,0,1,.7,2,10.5,10.5,0,0,1-.7,6.5')
+            path(d='M368.5,46.5a20.8,20.8,0,0,0,2.4,11.7c2.3,4.4,5,5.4,6.8,9.5a17.5,17.5,0,0,1,.4,11')
+            line(x1='368.5' y1='47.7' x2='368.5' y2='92.8')
+            path(d='M368.5,92.8c.1-3.1-4.7-6.3-9-6.3s-8.7,2.7-8.7,5.8,4.8,5.7,8.7,5.8S368.3,95.8,368.5,92.8Z')
+          g
+            path(d='M368.5,46.5c.5,2.1,1.2,3.5,3.8,6.3s5.1,4.3,6.5,7.2a11.1,11.1,0,0,1,.7,2,10.5,10.5,0,0,1-.7,6.5')
+            path(d='M368.5,46.5a20.8,20.8,0,0,0,2.4,11.7c2.3,4.4,5,5.4,6.8,9.5a17.5,17.5,0,0,1,.4,11')
+            line(x1='368.5' y1='47.7' x2='368.5' y2='92.8')
+            path(d='M368.5,92.8c.1-3.1-4.7-6.3-9-6.3s-8.7,2.7-8.7,5.8,4.8,5.7,8.7,5.8S368.3,95.8,368.5,92.8Z')
+        g.note
+          g
+            polyline(points='350 81.7 350 43.5 382.7 50.7 382.7 89.5')
+            path(d='M350,82.3c0-3.1-4.5-5.7-8.2-5.9s-9.3,2.8-9.2,6,4.7,5.7,8.6,5.7S349.9,85.5,350,82.3Z')
+            path(d='M382.7,89.9c0-3.1-4.4-5.7-8.2-5.8s-9.3,2.7-9.2,5.9,4.7,5.7,8.7,5.7S382.7,93.1,382.7,89.9Z')
+          g
+            polyline(points='350 81.7 350 43.5 382.7 50.7 382.7 89.5')
+            path(d='M350,82.3c0-3.1-4.5-5.7-8.2-5.9s-9.3,2.8-9.2,6,4.7,5.7,8.6,5.7S349.9,85.5,350,82.3Z')
+            path(d='M382.7,89.9c0-3.1-4.4-5.7-8.2-5.8s-9.3,2.7-9.2,5.9,4.7,5.7,8.7,5.7S382.7,93.1,382.7,89.9Z')
+        g.note
+          polyline(points='388.2 73.6 388.2 34.6 354.9 42.6 354.9 82.4')
+          path(d='M388.2,74.1c0-3-4.4-5.6-8.1-5.8s-9.2,2.8-9.1,6,4.6,5.6,8.6,5.6S388.2,77.3,388.2,74.1Z')
+          path(d='M354.9,81.9c0-3.1-4.4-5.7-8.2-5.9s-9.3,2.8-9.2,6,4.7,5.7,8.7,5.7S354.9,85.1,354.9,81.9Z')
+          line(x1='354.9' y1='48.4' x2='388.2' y2='40.3')
+          line(x1='354.9' y1='54.6' x2='388.2' y2='47')
+        g.note
+          g
+            path(d='M371.8,79.5c0-3.1-4.5-5.8-8.3-5.9s-9.3,2.8-9.2,6,4.7,5.7,8.7,5.7S371.8,82.7,371.8,79.5Z')
+            line(x1='371.8' y1='79.5' x2='371.8' y2='33.3')
+            path(d='M371.8,33.4a26.6,26.6,0,0,0,3.6,7.8c3.7,5.7,7.6,7,8.8,11.6.5,1.7.7,4.4-.9,8.3')
+          g
+            path(d='M371.8,79.5c0-3.1-4.5-5.8-8.3-5.9s-9.3,2.8-9.2,6,4.7,5.7,8.7,5.7S371.8,82.7,371.8,79.5Z')
+            line(x1='371.8' y1='79.5' x2='371.8' y2='33.3')
+            path(d='M371.8,33.4a26.6,26.6,0,0,0,3.6,7.8c3.7,5.7,7.6,7,8.8,11.6.5,1.7.7,4.4-.9,8.3')
+      g.table
+        polyline(points='27.3 160.5 785.2 295 785.4 465.8')
+        line(x1='785.2' y1='295' x2='27.3' y2='160.5')
+      polygon.laptop-base(points='103.2 263.6 258.9 219.3 636.5 294.4 452.1 339 103.2 263.6')
+      g.laptop-keyboard
+        polygon(points='369.6 265.6 255.3 244.3 255.5 243.5 264.7 241.9 380.9 262.3 380.8 263.1 369.6 265.6')
+        polygon(points='235.9 256.4 219.8 253.2 219.9 252.5 228.7 251 245.3 253.4 245.1 254.2 235.9 256.4')
+        polygon(points='473.1 303.7 248.4 258.9 248.6 258.1 257.7 256.6 486.2 300.4 486 301.3 473.1 303.7')
+        polygon(points='410.3 300.2 202.7 257.5 202.9 256.8 211.4 255.3 422.4 297.1 422.2 298 410.3 300.2')
+        polygon(points='448.5 308.1 427 303.7 427.3 302.8 439.2 301.4 461.2 304.9 461 305.8 448.5 308.1')
+        polygon(points='200.1 264.7 186 261.7 186.2 261 194.5 259.5 208.9 261.8 208.8 262.5 200.1 264.7')
+        polygon(points='221.1 269.1 206.6 266.1 206.8 265.3 215.4 263.9 230.3 266.2 230.1 267 221.1 269.1')
+        polygon(points='361.4 298.9 230 271 230.2 270.3 239.2 268.9 372.7 295.9 372.5 296.7 361.4 298.9')
+        polygon(points='442.8 279.2 383.7 268.2 383.9 267.3 395.1 265.7 455.4 275.9 455.2 276.7 442.8 279.2')
+        polygon(points='524.6 294.4 458.6 282.1 458.8 281.2 471.3 279.7 538.6 291 538.4 291.9 524.6 294.4')
+        polygon(points='424.7 312.4 374.6 301.7 374.8 300.9 385.9 299.5 437 309.3 436.8 310.2 424.7 312.4')
+        polygon(points='409.1 277.3 397.6 278.8 397.4 279.6 498.4 299.1 511.8 296.7 512 295.8 409.1 277.3')
+        polygon(points='394.2 274.5 394.4 273.6 246.7 246.5 237.7 248.1 237.5 248.8 382.8 276.8 394.2 274.5')
+      g.paw.paw-right
+        path.down(d='M289.1,181.7c-12.1,9.8-20.6,20.7-20.7,32.1-.2,9,3.8,20.4,13.3,25.2s20.1.6,29.6-3.4c13.4-5.7,23.9-14.6,29.4-21.5')
+        g.up
+          path(d='M327.3,170c-.4-1.4-6.3-18.8-23.5-23.5-.8-.2-18.6-4.7-28.9,6.3-8.4,9.1-6,22.5-4.6,30.2a54.3,54.3,0,0,0,8.1,19.9')
+          g.pads
+            path(d='M297.2,154.8c1-.5,2.7-.1,3,.6s-1.4,2.4-2.6,2.1a1.6,1.6,0,0,1-1.1-1.2A1.6,1.6,0,0,1,297.2,154.8Z')
+            path(d='M285.8,159.4c.3-.4,1-1.1,1.7-.8s.9,1.4.8,2.2-1.8,2.1-2.5,1.5S285.2,160.4,285.8,159.4Z')
+            path(d='M276.9,171c.5-.4,2.7-.3,3.2.6s-.6,1.8-1.4,1.8S276.2,171.6,276.9,171Z')
+            path(d='M296.4,168.6c2.3-.9,6.4,6.3,7.6,9s-5.2,4.5-7.4,6-5.1-6.1-5.9-8.3S293.7,169.8,296.4,168.6Z')
+      polygon.terminal-frame(points='93.8 63.3 284.1 73 335.9 230.5 146.2 197.6 93.8 63.3')
+      g.terminal-code
+        line(x1='260.2' y1='92.3' x2='212.2' y2='88.7')
+        line(x1='197.3' y1='87.5' x2='145.2' y2='83.5')
+        line(x1='251' y1='104.2' x2='223.4' y2='101.8')
+        line(x1='209.4' y1='100.5' x2='154.4' y2='95.6')
+        line(x1='256.4' y1='117.9' x2='227.5' y2='114.7')
+        line(x1='215.9' y1='113.4' x2='183.5' y2='109.8')
+        line(x1='169.1' y1='108.2' x2='142.9' y2='105.3')
+        line(x1='275.4' y1='132.8' x2='249.4' y2='129.6')
+        line(x1='234.4' y1='127.8' x2='197.3' y2='123.3')
+        line(x1='185.6' y1='121.9' x2='149.1' y2='117.5')
+        line(x1='261' y1='144.6' x2='244.5' y2='142.5')
+        line(x1='235.5' y1='141.3' x2='214.9' y2='138.7')
+        line(x1='203.4' y1='137.2' x2='180.4' y2='134.3')
+        line(x1='169.3' y1='132.9' x2='155.1' y2='131.1')
+        line(x1='264.7' y1='158.3' x2='221.9' y2='152.1')
+        line(x1='208.2' y1='150.1' x2='191.7' y2='147.7')
+        line(x1='291.3' y1='174.3' x2='268.8' y2='170.9')
+        line(x1='257.8' y1='169.2' x2='226.5' y2='164.4')
+        line(x1='217.3' y1='163' x2='185' y2='158.1')
+        line(x1='173.8' y1='156.4' x2='152.9' y2='153.2')
+        line(x1='278.5' y1='185.6' x2='257.3' y2='182.2')
+        line(x1='243.8' y1='179.9' x2='230.3' y2='177.7')
+        line(x1='216.5' y1='175.8' x2='196.7' y2='172.5')
+        line(x2='262.1' y2='196.1' x1='280.5' y1='199.2')
+        line(x2='213.8' y2='187.9' x1='251.1' y1='194.2')
+        line(x2='180.8' y2='182.3' x1='202.7' y1='186')
+      polygon.laptop-cover(points='103.2 263.6 452.1 339 360.8 12.4 2 2 103.2 263.6')
+      g.paw.paw-left
+        g.up
+          path(d='M586.6,208.8c-.6-2.3-4.2-15.6-17.2-22.2-2.7-1.3-12.8-6.4-23.6-1.8s-14.6,16.5-14.8,18.4c-1.2,9-.7,18.4,2.4,26.1,2.4,6,7.5,17.2,9.7,20.2')
+          g.pads
+            path(d='M561.4,194.9a2.7,2.7,0,0,1,3,.5c.4,1-1.4,2.4-2.6,2.2a1.5,1.5,0,0,1-1.1-1.3A1.2,1.2,0,0,1,561.4,194.9Z')
+            path(d='M550.7,200.4c.4-.5,1.1-1.1,1.7-.8a2,2,0,0,1,.8,2.2c-.3,1.2-1.8,2-2.5,1.5S550.1,201.3,550.7,200.4Z')
+            path(d='M541.1,211.1c.5-.4,2.7-.4,3.2.5s-.6,1.8-1.5,1.9S540.4,211.6,541.1,211.1Z')
+            path(d='M560.6,209.2c2.3-.9,6.4,6.3,7.6,9s-5.3,4.5-7.4,6-5.1-6-5.9-8.3S557.9,210.4,560.6,209.2Z')
+        path.down(d='M534.1,231.4c-19.7,6-32.9,18.4-34.2,29.1a30.1,30.1,0,0,0,1.7,14.1,24.8,24.8,0,0,0,6.1,8.8c6,5.1,16.8,4,38-3.9a288.7,288.7,0,0,0,46.5-22.1')
+      g.headphone.headphone-left
+        g.speaker
+          path(d='M609.5,137.3c-17.1,6.3-20.7,51.4-4.5,67.3,1.4,1.5,5.5,5.5,11.3,5.9,8.2.5,14.5-6.3,16.9-8.9,10.1-11,11.5-27.5,8.1-40.1-1.4-4.8-3.9-14-12.7-19.9C627.4,140.8,617.7,134.3,609.5,137.3Z')
+          path(d='M626.5,196.1c2.7-.4,5.9-2.6,9.3-6,6.6-6.6,6.8-16.6,5.8-24s-4.2-16.1-11.3-19.7a18.7,18.7,0,0,0-10.9-1.9C614,149.3,615.3,192.6,626.5,196.1Z')
+          path(d='M631.6,151c-4.5,3.3-.5,27.1,3.8,28.2s6.9-6.6,6.2-13.1S637.4,153.5,631.6,151Z')
+        path.band(d='M638.9,157.7c-4-16.8-25.9-61.9-75.3-95.3A155.5,155.5,0,0,0,515,40.6')
+      g.music.music-left
+        g.note
+          g
+            path(d='M633.3,119.9c.6,2,1.3,3.5,3.8,6.3s5.2,4.3,6.5,7.2a6.9,6.9,0,0,1,.7,1.9,10.2,10.2,0,0,1-.7,6.6')
+            path(d='M633.3,119.9a23,23,0,0,0,2.4,11.7c2.4,4.3,5.1,5.4,6.8,9.5a16.9,16.9,0,0,1,.5,11')
+            line(x1='633.3' y1='121.1' x2='633.3' y2='166.2')
+            path(d='M633.3,166.2c.2-3.2-4.6-6.3-8.9-6.3s-8.7,2.6-8.7,5.7,4.7,5.7,8.7,5.8S633.1,169.2,633.3,166.2Z')
+          g
+            path(d='M633.3,119.9c.6,2,1.3,3.5,3.8,6.3s5.2,4.3,6.5,7.2a6.9,6.9,0,0,1,.7,1.9,10.2,10.2,0,0,1-.7,6.6')
+            path(d='M633.3,119.9a23,23,0,0,0,2.4,11.7c2.4,4.3,5.1,5.4,6.8,9.5a16.9,16.9,0,0,1,.5,11')
+            line(x1='633.3' y1='121.1' x2='633.3' y2='166.2')
+            path(d='M633.3,166.2c.2-3.2-4.6-6.3-8.9-6.3s-8.7,2.6-8.7,5.7,4.7,5.7,8.7,5.8S633.1,169.2,633.3,166.2Z')
+        g.note
+          g
+            polyline(points='614.8 155 614.8 116.8 647.5 124 647.5 162.9')
+            path(d='M614.8,155.7c0-3.1-4.4-5.7-8.2-5.9s-9.2,2.8-9.2,6,4.7,5.6,8.7,5.6S614.8,158.8,614.8,155.7Z')
+            path(d='M647.5,163.3c.1-3.1-4.4-5.7-8.2-5.9s-9.2,2.8-9.1,6,4.7,5.7,8.6,5.7S647.5,166.5,647.5,163.3Z')
+          g
+            polyline(points='614.8 155 614.8 116.8 647.5 124 647.5 162.9')
+            path(d='M614.8,155.7c0-3.1-4.4-5.7-8.2-5.9s-9.2,2.8-9.2,6,4.7,5.6,8.7,5.6S614.8,158.8,614.8,155.7Z')
+            path(d='M647.5,163.3c.1-3.1-4.4-5.7-8.2-5.9s-9.2,2.8-9.1,6,4.7,5.7,8.6,5.7S647.5,166.5,647.5,163.3Z')
+        g.note
+          polyline(points='646.5 148.5 646.5 109.4 613.2 117.4 613.2 157.2')
+          path(d='M646.5,149c0-3.1-4.4-5.7-8.1-5.8s-9.2,2.7-9.1,5.9,4.7,5.6,8.6,5.6S646.5,152.1,646.5,149Z')
+          path(d='M613.2,156.7c.1-3.1-4.4-5.7-8.2-5.8s-9.3,2.7-9.2,6,4.7,5.6,8.7,5.6S613.2,159.9,613.2,156.7Z')
+          line(x1='613.2' y1='123.2' x2='646.5' y2='115.1')
+          line(x1='613.2' y1='129.4' x2='646.5' y2='121.8')
+        g.note
+          g
+            path(d='M636.6,152.9c0-3.2-4.4-5.8-8.2-5.9s-9.3,2.8-9.3,6,4.8,5.7,8.7,5.7S636.6,156.1,636.6,152.9Z')
+            line(x1='636.6' y1='152.9' x2='636.6' y2='106.6')
+            path(d='M636.6,106.8a33.2,33.2,0,0,0,3.6,7.8c3.8,5.7,7.6,6.9,8.9,11.5a13.3,13.3,0,0,1-.9,8.4')
+          g
+            path(d='M636.6,152.9c0-3.2-4.4-5.8-8.2-5.9s-9.3,2.8-9.3,6,4.8,5.7,8.7,5.7S636.6,156.1,636.6,152.9Z')
+            line(x1='636.6' y1='152.9' x2='636.6' y2='106.6')
+            path(d='M636.6,106.8a33.2,33.2,0,0,0,3.6,7.8c3.8,5.7,7.6,6.9,8.9,11.5a13.3,13.3,0,0,1-.9,8.4')
\ No newline at end of file
diff --git a/bongo-cat-codes-2jamming/src/script.babel b/bongo-cat-codes-2jamming/src/script.babel
new file mode 100644
index 0000000..4c98287
--- /dev/null
+++ b/bongo-cat-codes-2jamming/src/script.babel
@@ -0,0 +1,114 @@
+// Inspired By
+// https://codepen.io/abeatrize/pen/LJqYey
+
+// Bongo Cat originally created by @StrayRogue and @DitzyFlama
+
+const ID = "bongo-cat"
+const s = selector => `#${ID} ${selector}`
+const notes = document.querySelectorAll(".note")
+
+for (let note of notes) {
+  note.parentElement.appendChild(note.cloneNode(true))
+  note.parentElement.appendChild(note.cloneNode(true))
+}
+
+const music = { note: s(".music .note") }
+const terminal = { frame: s(".terminal-frame"), code: s(".terminal-code line") }
+const cat = { 
+  pawRight: {
+    up: s(".paw-right .up"),
+    down: s(".paw-right .down")
+  },
+  pawLeft: {
+    up: s(".paw-left .up"),
+    down: s(".paw-left .down")
+  }
+}
+
+const style = getComputedStyle(document.documentElement)
+
+const green = style.getPropertyValue("--green")
+const pink = style.getPropertyValue("--pink")
+const blue = style.getPropertyValue("--blue")
+const orange = style.getPropertyValue("--orange")
+const cyan = style.getPropertyValue("--cyan")
+
+gsap.set(music.note, { scale: 0, autoAlpha: 1 })
+
+const animatePawState = selector =>
+  gsap.fromTo(
+    selector, 
+    { autoAlpha: 0 }, 
+    { 
+      autoAlpha: 1, 
+      duration: 0.01, 
+      repeatDelay: 0.19, 
+      yoyo: true, 
+      repeat: -1 
+    }
+  )
+
+const tl = gsap.timeline()
+
+tl
+  .add(animatePawState(cat.pawLeft.up), "start")
+  .add(animatePawState(cat.pawRight.down), "start")
+  .add(animatePawState(cat.pawLeft.down), "start+=0.19")
+  .add(animatePawState(cat.pawRight.up), "start+=0.19")
+  .timeScale(1.6)
+
+gsap.from(".terminal-code line", {
+  drawSVG: "0%",
+  duration: 0.1,
+  stagger: 0.1,
+  ease: 'none',
+  repeat: -1
+})
+
+const noteEls = gsap.utils.pipe(
+  gsap.utils.toArray,
+  gsap.utils.shuffle
+)(music.note)
+
+const numNotes = noteEls.length/3
+const notesG1 = noteEls.splice(0, numNotes)
+const notesG2 = noteEls.splice(0, numNotes)
+const notesG3 = noteEls
+
+const colorizer = gsap.utils.random([green, pink, blue, orange, cyan, "#a3a4ec", "#67b5c0", "#fd7c6e"], true)
+const rotator = gsap.utils.random(-50, 50, 1, true);
+const dir = amt => `${gsap.utils.random(["-", "+"])}=${amt}`
+
+const animateNotes = (els) => {
+  els.forEach(el => {
+    gsap.set(el, { 
+      stroke: colorizer(), 
+      rotation: rotator(),
+      x: gsap.utils.random(-25, 25, 1)
+    })
+  })
+  
+  return gsap.fromTo(els, {
+    autoAlpha: 1,
+    y: 0,
+    scale: 0
+  }, {
+    duration: 2, 
+    autoAlpha: 0, 
+    scale: 1, 
+    ease: "none",
+    stagger: {
+      from: "random",
+      each: 0.5
+    },
+    rotation: dir(gsap.utils.random(20, 30, 1)),
+    x: dir(gsap.utils.random(40, 60, 1)),
+    y: gsap.utils.random(-200, -220, 1),
+    onComplete: () => animateNotes(els)
+  })
+}
+
+tl
+  .add(animateNotes(notesG1))
+  .add(animateNotes(notesG2), ">0.05")
+  .add(animateNotes(notesG3), ">0.25")
diff --git a/bongo-cat-codes-2jamming/src/style.scss b/bongo-cat-codes-2jamming/src/style.scss
new file mode 100644
index 0000000..c4dc80c
--- /dev/null
+++ b/bongo-cat-codes-2jamming/src/style.scss
@@ -0,0 +1,76 @@
+:root {
+  --bg: #1a1e2d;
+  --green: #a5ea9b;
+  --pink: #ff61d8;
+  --blue: #569cfa;
+  --orange: #ffcc81;
+  --cyan: #7ed1e2;
+}
+
+body {
+  height: 100vh;
+  width: 100vw;
+  background: var(--bg);
+  display: flex;
+  place-content: center;
+  align-items: flex-end;
+}
+
+.container  {
+  width: 80vw;
+  height: 80vh;
+  
+  svg {
+    height: 100%;
+    width: 100%;
+    overflow: visible;
+  }
+}
+
+#bongo-cat {
+  fill: var(--bg);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 4;
+  
+  .laptop-cover,
+  .headphone .band {
+    fill: none;
+  }
+  
+  .paw, .head {
+    stroke: var(--orange);
+  }
+  
+  .laptop-keyboard {
+    stroke-width: 2;
+  }
+  
+  .terminal-code {
+    stroke-width: 5;  
+  }
+  
+  .music .note, 
+  .laptop-base, 
+  .laptop-cover,
+  .paw .pads {
+    stroke: var(--pink);   
+  }
+  
+  .table line,
+  .headphone .band,
+  .headphone .speaker path:nth-child(3) {
+    stroke: var(--green);
+  }
+
+  .terminal-frame,
+  .laptop-keyboard,
+  .headphone .speaker path:nth-child(2) {
+    stroke: var(--blue);
+  }
+  
+  .terminal-code,
+  .headphone .speaker path:first-child {
+    stroke: var(--cyan);
+  }
+}
\ No newline at end of file
diff --git a/bongo-cat-codes/README.markdown b/bongo-cat-codes/README.markdown
new file mode 100644
index 0000000..0609e92
--- /dev/null
+++ b/bongo-cat-codes/README.markdown
@@ -0,0 +1,9 @@
+# Bongo Cat Codes
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/carolineartz/pen/VwYwZaP](https://codepen.io/carolineartz/pen/VwYwZaP).
+
+ Part of an upcoming personal site update
+
+Inspired By
+https://codepen.io/abeatrize/pen/LJqYey
+
+Bongo Cat originally created by @StrayRogue and @DitzyFlama
\ No newline at end of file
diff --git a/bongo-cat-codes/dist/index.html b/bongo-cat-codes/dist/index.html
new file mode 100644
index 0000000..c7f87c1
--- /dev/null
+++ b/bongo-cat-codes/dist/index.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Bongo Cat Codes</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="content">
+  <div class="container">
+    <svg id="bongo-cat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 787.3 433.8">
+      <defs>
+        <symbol id="eye" data-name="eye" viewBox="0 0 19.2 18.7">
+          <circle cx="9.4" cy="9.1" r="8"></circle>
+          <path d="M16.3,5.1a1.3,1.3,0,0,1-1.4-.3,7.2,7.2,0,0,0-4.5-2.6A7.2,7.2,0,0,0,5.5,3.5,6.8,6.8,0,0,0,2.8,7.8a6.8,6.8,0,0,0,1,4.8,6.2,6.2,0,0,0,4,2.7,6.1,6.1,0,0,0,4.6-.7,6.7,6.7,0,0,0,2.9-3.7,6.4,6.4,0,0,0-.5-4.5c-.1-.2.8-1,1.5-1.3s2.2,0,2.3.5a9.4,9.4,0,0,1-.2,7.2,9.4,9.4,0,0,1-5.1,5.1,9,9,0,0,1-7,.2A9.6,9.6,0,0,1,1,13.5,9.2,9.2,0,0,1,.4,6.6,8.9,8.9,0,0,1,4.6,1.3,9,9,0,0,1,11.2.2,9.3,9.3,0,0,1,16.7,4C16.9,4.3,17,4.8,16.3,5.1Z"></path>
+        </symbol>
+        <symbol id="paw-pads" data-name="paw-pads" viewBox="0 0 31.4 33.9">
+          <path d="M6.8,16a3.7,3.7,0,0,1,1.1,2.8,3.2,3.2,0,0,1-1.6,2.6L5,21.8H4.4a2.8,2.8,0,0,1-1.8.3A4.2,4.2,0,0,1,.2,19.1,7.7,7.7,0,0,1,0,17.6a2.8,2.8,0,0,1,.6-2,3.2,3.2,0,0,1,2.1-.8H4A5,5,0,0,1,6.8,16Zm7.3-4.8a1.8,1.8,0,0,0,.7-.5l.7-.4a3.5,3.5,0,0,0,1.1-1,3.2,3.2,0,0,0,.3-1.4,1.4,1.4,0,0,0-.2-.6,3.4,3.4,0,0,0-.3-2.4,3.2,3.2,0,0,0-2.1-1.5H13.1a4.7,4.7,0,0,0-1.6.4,2,2,0,0,0-.9.9l-.4.6v.4a6.1,6.1,0,0,0-.5,1.2,4.3,4.3,0,0,0,0,1.6,3.5,3.5,0,0,0,.5,2l.7.6a3.3,3.3,0,0,0,1.7.7A3,3,0,0,0,14.1,11.2ZM22.7,7l.6.2h.3A2.3,2.3,0,0,0,25,6.8l.4-.3.6-.3a7.5,7.5,0,0,0,1.5-.9,4.2,4.2,0,0,0,.8-1.2,1.9,1.9,0,0,0,.1-1.5A2.6,2.6,0,0,0,27.5,1,3.5,3.5,0,0,0,23.6.3a3.8,3.8,0,0,0-2,1.5,4.8,4.8,0,0,0-.7,2,3.6,3.6,0,0,0,.9,2.6ZM31,24.1a13.5,13.5,0,0,0-2.2-4.7,36.6,36.6,0,0,0-3.2-3.9,5.3,5.3,0,0,0-5-1.9,10.5,10.5,0,0,0-4.5,2.2A5.6,5.6,0,0,0,13.5,20a15.1,15.1,0,0,0,1.2,6.3c.8,2,1.7,4,2.6,5.9a1.6,1.6,0,0,0,1.5.8,1.7,1.7,0,0,0,1.9.9,17.1,17.1,0,0,0,8.7-4.8,8.2,8.2,0,0,0,1.7-2C31.6,26.3,31.3,25,31,24.1Z" fill="#ef97b0"></path>
+        </symbol>
+      </defs>
+      <g id="head">
+        <g id="head__outline">
+          <path d="M303.2,186.3c4-7,14.8-20.2,20-26,17-19,34.6-34.9,43-41l12-8s16.6-32,21-33c9-2,33,22,33,22s20-9,79,7c41,11.1,47,14,57,22,7.5,6,18,16,18,16s33.7-19.5,41-15-2,66-2,66,5.9,12.9,11,22c9.1,16.2,13.6,20.2,19,31,3.6,7.2,8.4,28.5,10.5,43.5l-385-62Z" fill="#fff"></path>
+          <path d="M302.9,186.9c-1.2,3-5.9,12.6-9,18.8l-12.5,25.5-.6-1.2c32.2,4.8,64.4,9.2,96.6,13.6s64.4,8.9,96.5,13.7,64.3,9.7,96.4,14.9,64.1,10.5,96.2,15.8l-5.6,5.5c-1.2-8.5-2.8-17.1-4.8-25.6-1-4.1-2.1-8.4-3.4-12.3l-.5-1.4-.5-1.4-.6-1.3-.7-1.3a59.5,59.5,0,0,0-3.1-5.5c-2.2-3.6-4.7-7.2-7.1-11s-4.8-7.6-7-11.5c-4.5-7.9-8.3-15.9-12.1-24a4,4,0,0,1-.3-2.6h0c1.4-9.1,2.7-18.2,3.7-27.4.5-4.5.9-9.1,1.2-13.7s.4-9.1.2-13.4a26.4,26.4,0,0,0-.8-6,8.1,8.1,0,0,0-.3-1.1c-.1-.3-.2-.4-.1-.3h.3c0,.1.1.1,0,.1h-.6a11.9,11.9,0,0,0-2.5.2,16.3,16.3,0,0,0-3,.7,56.7,56.7,0,0,0-6.2,2.1,212.6,212.6,0,0,0-24.5,11.9h-.1a3.9,3.9,0,0,1-4.7-.6c-4.9-4.7-10-9.4-15.1-13.8a86.6,86.6,0,0,0-7.9-6,46.1,46.1,0,0,0-8.5-4.6c-6-2.6-12.6-4.6-19.2-6.7l-19.8-5.7a324.9,324.9,0,0,0-40-8.9,196.8,196.8,0,0,0-20.2-1.8c-1.7,0-3.4-.1-5.1,0h-2.5l-2.5.2-2.5.2-2.4.4-2.4.5-1.1.3h-.5l-.4.2H433a2.5,2.5,0,0,1-2.6-.7c-4.6-4.6-9.5-9.1-14.5-13.2a82.7,82.7,0,0,0-7.9-5.7L403.9,81a10.8,10.8,0,0,0-4-.9c-.1,0-.3,0-.3.1h0l-.7.5-1.5,1.7c-1,1.2-2,2.6-2.9,3.9s-3.6,5.5-5.3,8.3c-3.5,5.7-6.8,11.4-9.9,17.3h0l-.4.4-10.2,6.6a53.6,53.6,0,0,0-4.9,3.4l-4.6,3.8c-6.2,5.1-12.1,10.6-17.9,16.2s-11.3,11.4-16.7,17.4c-2.7,3-5.3,6.1-7.8,9.2s-5,6.3-7.4,9.5c-4.2,5.6-7,10-5.7,7.1a34.1,34.1,0,0,1,2.1-3.8l3.8-5.6c2.9-4,6.3-8.3,8.5-10.9s4.4-5.2,6.7-7.7l6.9-7.4c4.7-4.9,9.4-9.7,14.3-14.3s9.8-9.3,15-13.7l4-3.2,4.2-2.9,8.3-5.7-.4.4c3-5.9,6.1-11.8,9.4-17.7,1.6-2.9,3.3-5.8,5.1-8.6l2.9-4.3,1.8-2a7.5,7.5,0,0,1,1.3-1.1c.1-.2.6-.4,1-.5l.9-.2h1.7l1.4.2,2.7.8c1.7.7,3.3,1.5,4.8,2.3a84,84,0,0,1,8.5,5.7A175.7,175.7,0,0,1,434,98.5l-2.9-.6.8-.3.7-.2L434,97l2.7-.7,2.7-.5a23,23,0,0,1,2.6-.3l2.7-.3,2.7-.2h5.3a182.1,182.1,0,0,1,21,1.3,332.5,332.5,0,0,1,41.1,8.4l20,5.5c6.7,2,13.4,4,20.1,6.7a65.3,65.3,0,0,1,9.8,5.1c3.1,2.1,5.9,4.3,8.6,6.5,5.4,4.5,10.6,9.2,15.7,14l-4.8-.6c4.1-2.4,8.2-4.6,12.4-6.7s8.6-4.2,13-6c2.3-.9,4.6-1.7,7-2.4a23.4,23.4,0,0,1,3.8-.9,20,20,0,0,1,4.4-.4h1.3l1.5.4a5.1,5.1,0,0,1,1.7.7l.9.7.8.7a8.3,8.3,0,0,1,1.6,2.6,12.7,12.7,0,0,1,.8,2.3,44.6,44.6,0,0,1,1.1,7.7c.2,5,.1,9.7-.1,14.4s-.7,9.5-1.2,14.1c-.9,9.4-2.1,18.6-3.6,27.9l-.3-2.6c3.7,7.9,7.5,15.8,11.8,23.3,2.1,3.7,4.4,7.4,6.8,11s4.9,7.2,7.3,11.1c1.3,2,2.4,4,3.5,6.1a10.9,10.9,0,0,0,.8,1.5l.8,1.8.7,1.7.6,1.7c1.5,4.4,2.6,8.7,3.7,13.1a262,262,0,0,1,5.2,26.4,4.9,4.9,0,0,1-4.1,5.6h-1.5c-32.1-5-64.2-9.9-96.3-15.1s-64.1-10.6-96.1-16.1-64-11.4-96-17.4-63.9-11.9-95.9-17.4h-.1a.8.8,0,0,1-.6-.9v-.2l16.6-32.1C299.8,192.2,304.1,183.9,302.9,186.9Z"></path>
+        </g>
+        <g id="head__face">
+          <g id="eyes">
+            <use width="19.2" height="18.7" transform="translate(474.8 195.2)" xlink:href="#eye"></use>
+            <use width="19.2" height="18.7" transform="matrix(-0.51, -0.85, 0.82, -0.5, 370.39, 192.59)" xlink:href="#eye"></use>
+          </g>
+          <g id="mouth">
+            <path d="M399.2,186.3c.9,3.6,2.6,7.8,6,9,6.4,2.3,19-6,19-6s4.1,12.4,10,15,10.7-1.7,16-6" fill="#fff"></path>
+            <path d="M450.2,198.3c.6,1.2.2,1.9-.2,2.2a36.7,36.7,0,0,1-7.6,4.9,14.9,14.9,0,0,1-4.8,1.4h-1.4l-1.3-.2-1.4-.4-1.3-.6a21.6,21.6,0,0,1-6.4-7.2,52.8,52.8,0,0,1-4-8.3l3.8,1.3a62.3,62.3,0,0,1-7.1,4.1,32.1,32.1,0,0,1-7.9,2.8,13.2,13.2,0,0,1-4.9.2l-1.4-.3a7.5,7.5,0,0,1-1.3-.6,7.9,7.9,0,0,1-2.3-1.6,16.8,16.8,0,0,1-2.9-4,24.1,24.1,0,0,1-1.6-4.2c-.1-.5,1.6-1.3,3-1.4s3.5.2,3.6.6a10.3,10.3,0,0,0,2.6,4.9l.7.5h2.4l1.5-.2a28.4,28.4,0,0,0,6.5-2c2.1-1,4.3-2.1,6.3-3.3h.1a2.5,2.5,0,0,1,3.4.9l.3.5a43.1,43.1,0,0,0,3.2,7.7,19.8,19.8,0,0,0,2.2,3.4,8.1,8.1,0,0,0,2.6,2.6,5,5,0,0,0,3,.7,10.8,10.8,0,0,0,3.7-1,33.4,33.4,0,0,0,7.2-4.3C448.8,197.4,449.5,197.2,450.2,198.3Z"></path>
+          </g>
+        </g>
+      </g>
+      <g id="table">
+        <path d="M65.7,181.8l714,124c0,74-2,54-2,128l-673-161Z" fill="#fff"></path>
+        <path d="M786.7,304.2c-2.7,1.2-10.8,0-16.1-.9L31.1,176.4c-5.2-.9-8.9-3.8-6.2-5s14.3-1.4,19.5-.5L777.1,300.6C782.3,301.6,789.4,303.1,786.7,304.2Z"></path>
+      </g>
+      <g id="laptop">
+        <g id="laptop__base">
+          <polygon points="641.9 304.1 454.7 348.2 103.8 271.3 254.6 230.3 641.9 304.1" fill="#f2f2f2"></polygon>
+          <path d="M641.9,304.1c1.5-.1-2.3,1.5-10.3,3.6-28.9,7.5-58.1,15.2-87.7,22.6s-59.1,14.5-88.4,21.3l-.8.2-.8-.2-349.5-78-1.1-.2-8.7-1.9,8.6-2.3,150.6-41.5.6-.2h.7c62.5,11.7,125.5,23.6,188.4,35.9s125.6,25.1,188,37.6c8,1.6,11.9,3,10.4,3a185.6,185.6,0,0,1-18.4-2.6c-61.9-11.2-123.6-22.2-185-33.5s-122.7-23.1-184.4-35h1.2L104.4,273.4h-.1v-4.3l351.2,75.7h-1.5c28.3-6.7,56.3-13.3,84.3-19.5s56.5-12,85.2-18.1C631.3,305.6,640.4,304.1,641.9,304.1Z" fill="#231f20"></path>
+        </g>
+        <g id="laptop__keyboard">
+          <polygon points="371.1 274.8 256.8 253.5 257 252.7 266.2 251.1 382.4 271.5 382.3 272.3 371.1 274.8" fill="#3e3e54"></polygon>
+          <polygon points="237.4 265.6 221.3 262.4 221.4 261.7 230.2 260.2 246.8 262.6 246.6 263.4 237.4 265.6" fill="#3e3e54"></polygon>
+          <polygon points="474.6 312.9 249.9 268.1 250.1 267.3 259.2 265.8 487.7 309.6 487.5 310.5 474.6 312.9" fill="#3e3e54"></polygon>
+          <polygon points="411.8 309.4 204.2 266.7 204.4 266 212.9 264.5 423.9 306.3 423.7 307.2 411.8 309.4" fill="#3e3e54"></polygon>
+          <polygon points="450 317.3 428.5 312.9 428.8 312 440.7 310.6 462.7 314.1 462.5 315 450 317.3" fill="#3e3e54"></polygon>
+          <polygon points="201.6 273.9 187.5 270.9 187.7 270.2 196 268.7 210.4 271 210.3 271.7 201.6 273.9" fill="#3e3e54"></polygon>
+          <polygon points="222.6 278.3 208.1 275.3 208.3 274.5 216.9 273.1 231.8 275.4 231.6 276.2 222.6 278.3" fill="#3e3e54"></polygon>
+          <polygon points="362.9 308.1 231.5 280.2 231.7 279.5 240.7 278.1 374.2 305.1 374 305.9 362.9 308.1" fill="#3e3e54"></polygon>
+          <polygon points="444.3 288.4 385.2 277.4 385.4 276.5 396.6 274.9 456.9 285.1 456.7 285.9 444.3 288.4" fill="#3e3e54"></polygon>
+          <polygon points="526.1 303.6 460.1 291.3 460.3 290.4 472.8 288.9 540.1 300.2 539.9 301.1 526.1 303.6" fill="#3e3e54"></polygon>
+          <polygon points="426.2 321.6 376.1 310.9 376.3 310.1 387.4 308.7 438.5 318.5 438.3 319.4 426.2 321.6" fill="#3e3e54"></polygon>
+          <g>
+            <polygon points="410.6 286.5 399.1 288 398.9 288.8 499.9 308.3 513.3 305.9 513.5 305 410.6 286.5" fill="#3e3e54"></polygon>
+            <polygon points="395.7 283.7 395.9 282.8 248.2 255.7 239.2 257.3 239 258 384.3 286 395.7 283.7" fill="#3e3e54"></polygon>
+          </g>
+          <polygon points="371.3 273.9 256.9 252.7 266.4 250.3 382.4 271.5 371.3 273.9" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
+          <polygon points="237.6 264.9 221.4 261.7 230.4 259.4 246.8 262.6 237.6 264.9" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
+          <polygon points="474.8 312 250 267.3 259.4 265.1 487.7 309.6 474.8 312" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
+          <polygon points="412 308.5 204.4 266 213.1 263.8 423.9 306.3 412 308.5" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
+          <polygon points="450.2 316.4 428.8 312 440.9 309.7 462.8 314.1 450.2 316.4" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
+          <polygon points="201.7 273.1 187.7 270.2 196.2 268 210.4 271 201.7 273.1" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
+          <polygon points="222.8 277.6 208.3 274.5 217.1 272.4 231.8 275.4 222.8 277.6" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
+          <polygon points="363.1 307.3 231.7 279.5 240.9 277.3 374.2 305.1 363.1 307.3" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
+          <polygon points="444.6 287.5 385.4 276.5 396.8 274.1 456.9 285 444.6 287.5" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
+          <polygon points="526.3 302.7 460.3 290.4 473 288 540.1 300.2 526.3 302.7" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
+          <polygon points="426.4 320.7 376.3 310.1 387.6 307.9 438.5 318.5 426.4 320.7" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
+          <g>
+            <polygon points="410.7 285.6 399.1 288 500.1 307.4 513.5 305 410.7 285.6" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
+            <polygon points="395.9 282.8 248.4 255 239.2 257.3 384.5 285.2 395.9 282.8" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
+          </g>
+        </g>
+        <g id="paw-right">
+          <g id="paw-right--down">
+            <path d="M293.2,191.3l10-7s-18.4,11.1-24,20-13,20.4-9,31c4.7,12.4,20.5,15.7,22,16,20,3.8,47.8-24.3,47.8-24.3s1.9-3.3,2.2-3.7" fill="#fff"></path>
+            <path d="M342.1,223.4c.9,1.2.2,2.8-.3,3.7l-.4.7-.3.3a118.1,118.1,0,0,1-14.2,12.3,83.2,83.2,0,0,1-16.2,9.8,43.9,43.9,0,0,1-9.3,3,26.3,26.3,0,0,1-10.1.2,44.5,44.5,0,0,1-9.3-3.2,34.2,34.2,0,0,1-8.3-5.5,23,23,0,0,1-5.8-8.5,21.3,21.3,0,0,1-1.3-10.3,34.9,34.9,0,0,1,2.7-9.7,76.1,76.1,0,0,1,4.5-8.5l2.4-4,.6-1,.8-1.1a15.6,15.6,0,0,1,1.6-2,49.9,49.9,0,0,1,7-6.8,136.1,136.1,0,0,1,15.3-11.2,3.1,3.1,0,0,1,4.4,1,3,3,0,0,1-.8,4.2H305l-8.6,6.2c-.9.6-2.7-.5-3.1-1.9s.5-4.4,1.5-5l6.6-4.5,3.5,5.3A131.9,131.9,0,0,0,290,197.4a52.7,52.7,0,0,0-6.4,6,6.5,6.5,0,0,0-1.3,1.6l-.6.8-.7,1-2.4,3.8c-1.6,2.6-3.1,5.2-4.4,7.8a27.7,27.7,0,0,0-2.4,8.1,15.6,15.6,0,0,0,.8,8,17.4,17.4,0,0,0,4.4,6.7,27.2,27.2,0,0,0,7.1,4.9,39.5,39.5,0,0,0,8.1,3,21.6,21.6,0,0,0,8.4,0,37.8,37.8,0,0,0,8.5-2.6,84.9,84.9,0,0,0,15.7-9,142.4,142.4,0,0,0,14.1-11.6l-.3.3,1.1-1.8C340.3,223.4,341.3,222.2,342.1,223.4Z"></path>
+          </g>
+          <g id="paw-right--up">
+            <g>
+              <path d="M282.2,215.2c-1.6-1.6-12.8-17.9-14-34.3-.1-2.5,1.7-16,12.9-22.4s22.3-1.9,26.2.4c12.2,7.3,21.2,19.1,22.8,22.4" fill="#fff"></path>
+              <path d="M330,181.2a2.4,2.4,0,0,1-2.6-1.3,71.4,71.4,0,0,0-9.8-10.8,64,64,0,0,0-11.7-8.6,26.3,26.3,0,0,0-6.5-2.3,26.9,26.9,0,0,0-6.9-.6,24.9,24.9,0,0,0-6.7,1.3,20.8,20.8,0,0,0-5.8,3.3,23.1,23.1,0,0,0-7.6,11,32.5,32.5,0,0,0-1.4,6.6,6.6,6.6,0,0,0,.1,1.4l.2,1.8c.1,1.2.4,2.3.6,3.5a65,65,0,0,0,4.8,13.4c1,2.2,2.2,4.3,3.4,6.4a43.1,43.1,0,0,0,3.9,5.9.6.6,0,0,1,0,.6c0,.2-.2.4-.4.7a5.7,5.7,0,0,1-1.5,1.6c-1.3.6-4.1.1-4.6-.6a89.5,89.5,0,0,1-7.2-13.7,63.7,63.7,0,0,1-4.3-14.9,25.7,25.7,0,0,1-.5-4c0-.3-.1-.6-.1-1v-1.2a12.5,12.5,0,0,1,.2-2.1,35.2,35.2,0,0,1,2.4-7.8,28.6,28.6,0,0,1,4.1-6.9,24.6,24.6,0,0,1,6.1-5.5,26.2,26.2,0,0,1,15.5-4.2,28.9,28.9,0,0,1,7.8,1.2l3.8,1.3,1.8.9,1.8,1a78.2,78.2,0,0,1,11.9,9.6,80.2,80.2,0,0,1,9.7,11.8C331.1,179.7,331.4,181,330,181.2Z"></path>
+            </g>
+            <use width="31.4" height="33.93" transform="translate(273.2 166.1) rotate(-5.6)" xlink:href="#paw-pads"></use>
+          </g>
+        </g>
+        <g id="laptop__terminal">
+          <path d="M316.9,238.7,153.5,205.2a5.1,5.1,0,0,1-4-3.5L109.8,75.4c-1-3.3,1.9-6.6,5.6-6.3L277.9,84.5a5.2,5.2,0,0,1,4.6,3.7l40.7,144.4C324.2,236.2,320.8,239.5,316.9,238.7Z"></path>
+          <path d="M317.3,238.7a7.9,7.9,0,0,0,2.2-.7,5,5,0,0,0,2.2-1.9,3.7,3.7,0,0,0,.6-2.9l-.3-.8-.2-.9a15.4,15.4,0,0,1-.5-1.7L300,154.6l-10.7-37.5L284,98.3l-2.6-9.4a7.9,7.9,0,0,0-.4-.9,4.3,4.3,0,0,0-.4-.7,3.3,3.3,0,0,0-1.5-1.1l-.9-.3h-1.1l-2.4-.2L119.2,71.2l-2.4-.3h-2.2a3.3,3.3,0,0,0-2.8,1.6,2.4,2.4,0,0,0-.5,1.4v.8c.1.1.1.2.1.4l.2.6,1.5,4.6L119,98.8l11.8,37.3,11.7,37.2,5.9,18.6,2.9,9.3a3.4,3.4,0,0,0,2.2,2h1l1.2.3,2.4.4,153,31.1c4.3.9,7.4,2.9,5.2,3.3s-11.7-.1-16-1l-75.8-15.7L186.6,214l-19-3.9-9.5-2-4.7-1h-.7l-.8-.3a6.1,6.1,0,0,1-1.4-.7,7.6,7.6,0,0,1-2.3-2.4l-.4-.8a1.9,1.9,0,0,1-.2-.7l-.4-1.2-.7-2.3-1.4-4.6-2.9-9.2-5.8-18.5-11.5-36.9-11.5-37-2.9-9.2L109,78.5l-.7-2.3v-.6c0-.3-.1-.6-.1-.8a4.8,4.8,0,0,1,0-1.7,6.8,6.8,0,0,1,3.8-5,10.1,10.1,0,0,1,3-.7h2.6l9.6,1L204.1,76l38.5,3.7,19.3,1.9,9.6.9,4.8.5h2.6a6.6,6.6,0,0,1,2.7,1.2,7.2,7.2,0,0,1,1.9,2.4,12.1,12.1,0,0,1,.5,1.4l.3,1.1,1.3,4.7,2.6,9.3,5.2,18.6,10.4,37.3,10.4,37.3,5.3,18.6,2.6,9.4,1.3,4.6.6,2.4a7,7,0,0,1,.4,2.7,5.7,5.7,0,0,1-1.8,3.7,5.9,5.9,0,0,1-3.4,1.6,3.5,3.5,0,0,1-2.1-.4C316.7,239,316.8,238.9,317.3,238.7Z"></path>
+        </g>
+        <g id="laptop__terminal_code_scene"> 
+          <g id="laptop__code">
+            <g stroke="#3DE0E8" stroke-width="6" transform="matrix(-1 0 0 1 278 103)">
+              <g id="f3" transform="translate(0 76)">
+                <path class="typing-animation" id="f3-l9" d="M8,25L8,25" stroke-dasharray="60,10"></path>
+                <path class="typing-animation" id="f3-l8" d="M8,13L8,13" stroke-dasharray="50,10"></path>
+                <path class="typing-animation" id="f3-l7" d="M0,1L0,1" stroke-dasharray="25,10"></path>
+              </g>
+              <g id="f2" transform="translate(0 38)">
+                <path class="typing-animation" id="f2-l6" d="M8,25L8,25" stroke-dasharray="40,10"></path>
+                <path class="typing-animation" id="f2-l5" d="M8,13L8,13" stroke-dasharray="60,10"></path>
+                <path class="typing-animation" id="f2-l4" d="M0,1L0,1" stroke-dasharray="30,10"></path>
+              </g>
+              <g id="f1">
+                <path class="typing-animation" id="f1-l3" d="M8,25L8,25" stroke-dasharray="60,10"></path>
+                <path class="typing-animation" id="f1-l2" d="M8,13L8,13" stroke-dasharray="60,10"></path>
+                <path class="typing-animation" id="f1-l1" d="M0,1L0,1" stroke-dasharray="60,10"></path>
+              </g>
+            </g>
+          </g>
+        </g>
+        <g id="laptop__cover" style="mix-blend-mode: hard-light;">
+          <polygon points="440.7 347.2 90.3 275.6 4.7 3.8 353 36.7 440.7 347.2" fill="#f2f2f2"></polygon>
+          <path d="M440.4,346.4c-2.5-5.3-6.5-18.8-9-27.4L390.7,178c-13.6-46.8-26.9-93.7-40.3-140.6l2.3,2L4.4,7.1,7.9,2.8,94,274.5l-2.9-2.6q83.7,16.8,166.8,34.2t166.8,35.4c8.8,1.9,17.5,5.1,14.7,5.5s-6.3-.2-12-.9-12.3-1.5-16.8-2.3Q330.5,328.1,250,312.1c-53.5-10.8-107.1-21.7-160.4-32.7l-2.3-.5-.6-2.1L1.5,4.8,0,0,5,.5,353.3,34l1.8.2.5,1.8q20.7,73.8,41.2,147.8l40.6,147.5C439.8,340.1,442.9,351.7,440.4,346.4Z"></path>
+        </g>
+      </g>
+      <g id="paw-left">
+        <g id="paw-left--up">
+          <g>
+            <path d="M545.4,261.9c-7.1-13-12.9-31.1-13.3-37.6-.6-9,0-15.6,5.2-22.2s15-9.8,22.7-8.8a26.7,26.7,0,0,1,17.3,9.4c5.3,5.8,9.4,12.9,11.6,16.6" fill="#fff"></path>
+            <path d="M588.9,219.2c-1.4.4-2.3-.7-2.8-1.4a93.9,93.9,0,0,0-8.9-12.5c-3.3-3.9-7.1-7-11.7-8.6a24.2,24.2,0,0,0-7.1-1.4,24.5,24.5,0,0,0-7.1.7,27,27,0,0,0-6.6,2.7,21,21,0,0,0-5.2,4.6,20.6,20.6,0,0,0-3.5,6.1,22.2,22.2,0,0,0-1.3,6.9,47.3,47.3,0,0,0,.1,7.5,52.2,52.2,0,0,0,1.4,7.1c1.4,4.8,3.1,9.7,5,14.4a147.7,147.7,0,0,0,6.5,13.9c.4.7-1,2.3-2.4,2.6s-4-.6-4.4-1.4c-2.3-4.8-4.3-9.7-6.1-14.6a128.8,128.8,0,0,1-4.6-15.3c-.3-1.3-.5-2.6-.7-4a16.4,16.4,0,0,1-.2-2.2v-2a57,57,0,0,1,.4-8.2,27.2,27.2,0,0,1,2.3-8.2c.7-1.3,1.4-2.5,2.2-3.7l1.3-1.7,1.4-1.6a28.8,28.8,0,0,1,7-5,27.6,27.6,0,0,1,8-2.5,25.6,25.6,0,0,1,8.3-.2,27.4,27.4,0,0,1,15.1,6.7,50.6,50.6,0,0,1,5.5,5.9,111.3,111.3,0,0,1,8.7,13.2C589.8,217.7,590.3,218.9,588.9,219.2Z"></path>
+          </g>
+          <use width="31.4" height="33.93" transform="matrix(0.99, -0.03, 0.04, 1, 539.85, 203.52)" xlink:href="#paw-pads"></use>
+        </g>
+        <g id="paw-left--down">
+          <path d="M538.2,239.3c-3.2,1.6-33,10.8-37,28-.4,1.8-2.1,18.9,7,26,5.5,4.3,12.7,2.8,25,0,10.3-2.3,19-5.8,40-16,9.1-4.4,16.6-8.2,22-11" fill="#fff"></path>
+          <path d="M595.1,266.4c.1,1.4-1.4,2.4-2.4,2.9l-18.3,9.4c-6.2,3.1-12.3,6.1-18.6,9a120.8,120.8,0,0,1-19.6,7.2l-5.1,1.2-5.1,1.1a43.4,43.4,0,0,1-5.2.9,33.8,33.8,0,0,1-5.6.3,17.8,17.8,0,0,1-5.8-1.5,6.1,6.1,0,0,1-1.4-.7l-1.3-.9-2.2-2a23.6,23.6,0,0,1-5.2-10.2,44.5,44.5,0,0,1-1.3-10.9c0-.9.1-1.8.1-2.7a6.6,6.6,0,0,0,.1-1.4v-.7c.1-.3.1-.7.2-.9a21.6,21.6,0,0,1,2.1-5.5,33.4,33.4,0,0,1,7.1-8.7,67.1,67.1,0,0,1,8.7-6.4,121.7,121.7,0,0,1,19-9,1.5,1.5,0,0,1,1.7.6,3.4,3.4,0,0,1,.9,1.9c.1,1.5-1.6,4.2-2.6,4.6a91.1,91.1,0,0,0-17.8,8.5,40.1,40.1,0,0,0-7.6,5.8,22.8,22.8,0,0,0-5.2,7.3l-.4,1-.3,1a1.7,1.7,0,0,0-.2.5v.4c-.1.4-.1.8-.2,1.2s-.1,3.1-.1,4.7a35.4,35.4,0,0,0,1.4,9.3,15.6,15.6,0,0,0,4.5,7.3c2,1.9,4.7,2.6,7.8,2.5a55.9,55.9,0,0,0,9.7-1.2l4.9-1.1,4.9-1.1a121,121,0,0,0,18.8-6.8c12.4-5.3,24.6-11.5,36.8-17.4C593.4,265.4,595,264.9,595.1,266.4Z"></path>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/bongo-cat-codes/dist/script.js b/bongo-cat-codes/dist/script.js
new file mode 100644
index 0000000..b6ff590
--- /dev/null
+++ b/bongo-cat-codes/dist/script.js
@@ -0,0 +1,6 @@
+// Part of an upcoming personal site update
+
+// Inspired By
+// https://codepen.io/abeatrize/pen/LJqYey
+
+// Bongo Cat originally created by @StrayRogue and @DitzyFlama
\ No newline at end of file
diff --git a/bongo-cat-codes/dist/style.css b/bongo-cat-codes/dist/style.css
new file mode 100644
index 0000000..e26c01d
--- /dev/null
+++ b/bongo-cat-codes/dist/style.css
@@ -0,0 +1,364 @@
+.content {
+  position: relative;
+}
+
+.container {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+#bongo-cat {
+  position: absolute;
+  height: 80vh;
+  width: 80vw;
+  top: 100vh;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+.typing-animation {
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-duration: 1200ms;
+          animation-duration: 1200ms;
+}
+
+path#f1-l1 {
+  -webkit-animation-name: typing-f1-l1;
+          animation-name: typing-f1-l1;
+}
+
+path#f1-l2 {
+  -webkit-animation-name: typing-f1-l2;
+          animation-name: typing-f1-l2;
+}
+
+path#f1-l3 {
+  -webkit-animation-name: typing-f1-l3;
+          animation-name: typing-f1-l3;
+}
+
+path#f2-l4 {
+  -webkit-animation-name: typing-f2-l4;
+          animation-name: typing-f2-l4;
+}
+
+path#f2-l5 {
+  -webkit-animation-name: typing-f2-l5;
+          animation-name: typing-f2-l5;
+}
+
+path#f2-l6 {
+  -webkit-animation-name: typing-f2-l6;
+          animation-name: typing-f2-l6;
+}
+
+path#f3-l7 {
+  -webkit-animation-name: typing-f3-l7;
+          animation-name: typing-f3-l7;
+}
+
+path#f3-l8 {
+  -webkit-animation-name: typing-f3-l8;
+          animation-name: typing-f3-l8;
+}
+
+path#f3-l9 {
+  -webkit-animation-name: typing-f3-l9;
+          animation-name: typing-f3-l9;
+}
+
+@-webkit-keyframes typing-f3-l9 {
+  0% {
+    d: path("M8,25L8,25");
+  }
+  82% {
+    d: path("M8,25L8,25");
+  }
+  92% {
+    d: path("M8,25L96,25");
+  }
+  100% {
+    d: path("M8,25L96,25");
+  }
+}
+
+@keyframes typing-f3-l9 {
+  0% {
+    d: path("M8,25L8,25");
+  }
+  82% {
+    d: path("M8,25L8,25");
+  }
+  92% {
+    d: path("M8,25L96,25");
+  }
+  100% {
+    d: path("M8,25L96,25");
+  }
+}
+@-webkit-keyframes typing-f3-l8 {
+  0% {
+    d: path("M8,13L8,13");
+  }
+  68% {
+    d: path("M8,13L8,13");
+  }
+  82% {
+    d: path("M8,13L146,13");
+  }
+  100% {
+    d: path("M8,13L146,13");
+  }
+}
+@keyframes typing-f3-l8 {
+  0% {
+    d: path("M8,13L8,13");
+  }
+  68% {
+    d: path("M8,13L8,13");
+  }
+  82% {
+    d: path("M8,13L146,13");
+  }
+  100% {
+    d: path("M8,13L146,13");
+  }
+}
+@-webkit-keyframes typing-f3-l7 {
+  0% {
+    d: path("M0,1L0,1");
+  }
+  60% {
+    d: path("M0,1L0,1");
+  }
+  68% {
+    d: path("M0,1L96,1");
+  }
+  100% {
+    d: path("M0,1L96,1");
+  }
+}
+@keyframes typing-f3-l7 {
+  0% {
+    d: path("M0,1L0,1");
+  }
+  60% {
+    d: path("M0,1L0,1");
+  }
+  68% {
+    d: path("M0,1L96,1");
+  }
+  100% {
+    d: path("M0,1L96,1");
+  }
+}
+@-webkit-keyframes typing-f2-l6 {
+  0% {
+    d: path("M8,25L8,25");
+  }
+  54% {
+    d: path("M8,25L8,25");
+  }
+  60% {
+    d: path("M8,25L69,25");
+  }
+  100% {
+    d: path("M8,25L69,25");
+  }
+}
+@keyframes typing-f2-l6 {
+  0% {
+    d: path("M8,25L8,25");
+  }
+  54% {
+    d: path("M8,25L8,25");
+  }
+  60% {
+    d: path("M8,25L69,25");
+  }
+  100% {
+    d: path("M8,25L69,25");
+  }
+}
+@-webkit-keyframes typing-f2-l5 {
+  0% {
+    d: path("M8,13L8,13");
+  }
+  44% {
+    d: path("M8,13L8,13");
+  }
+  54% {
+    d: path("M8,13L114,13");
+  }
+  100% {
+    d: path("M8,13L114,13");
+  }
+}
+@keyframes typing-f2-l5 {
+  0% {
+    d: path("M8,13L8,13");
+  }
+  44% {
+    d: path("M8,13L8,13");
+  }
+  54% {
+    d: path("M8,13L114,13");
+  }
+  100% {
+    d: path("M8,13L114,13");
+  }
+}
+@-webkit-keyframes typing-f2-l4 {
+  0% {
+    d: path("M0,1L0,1");
+  }
+  30% {
+    d: path("M0,1L0,1");
+  }
+  44% {
+    d: path("M0,1L136,1");
+  }
+  100% {
+    d: path("M0,1L136,1");
+  }
+}
+@keyframes typing-f2-l4 {
+  0% {
+    d: path("M0,1L0,1");
+  }
+  30% {
+    d: path("M0,1L0,1");
+  }
+  44% {
+    d: path("M0,1L136,1");
+  }
+  100% {
+    d: path("M0,1L136,1");
+  }
+}
+@-webkit-keyframes typing-f1-l3 {
+  0% {
+    d: path("M8,25L8,25");
+  }
+  24% {
+    d: path("M8,25L8,25");
+  }
+  30% {
+    d: path("M8,25L61,25");
+  }
+  100% {
+    d: path("M8,25L61,25");
+  }
+}
+@keyframes typing-f1-l3 {
+  0% {
+    d: path("M8,25L8,25");
+  }
+  24% {
+    d: path("M8,25L8,25");
+  }
+  30% {
+    d: path("M8,25L61,25");
+  }
+  100% {
+    d: path("M8,25L61,25");
+  }
+}
+@-webkit-keyframes typing-f1-l2 {
+  0% {
+    d: path("M8,13L8,13");
+  }
+  14% {
+    d: path("M8,13L8,13");
+  }
+  24% {
+    d: path("M8,13L124,13");
+  }
+  100% {
+    d: path("M8,13L124,13");
+  }
+}
+@keyframes typing-f1-l2 {
+  0% {
+    d: path("M8,13L8,13");
+  }
+  14% {
+    d: path("M8,13L8,13");
+  }
+  24% {
+    d: path("M8,13L124,13");
+  }
+  100% {
+    d: path("M8,13L124,13");
+  }
+}
+@-webkit-keyframes typing-f1-l1 {
+  0% {
+    d: path("M0,1L0,1");
+  }
+  14% {
+    d: path("M0,1L160,1");
+  }
+  100% {
+    d: path("M0,1L160,1");
+  }
+}
+@keyframes typing-f1-l1 {
+  0% {
+    d: path("M0,1L0,1");
+  }
+  14% {
+    d: path("M0,1L160,1");
+  }
+  100% {
+    d: path("M0,1L160,1");
+  }
+}
+#paw-right--up,
+#paw-right--down,
+#paw-left--up,
+#paw-left--down {
+  -webkit-animation: blink 300ms infinite;
+          animation: blink 300ms infinite;
+}
+
+#paw-right--up,
+#paw-left--down {
+  -webkit-animation-delay: 150ms;
+          animation-delay: 150ms;
+}
+
+@-webkit-keyframes blink {
+  0% {
+    opacity: 0;
+  }
+  49% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0;
+  }
+  49% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+#laptop__code {
+  -webkit-transform: rotateX(-37deg) rotateY(-46deg) rotateZ(-23deg) translateX(8px) translateY(20px) translateZ(-50px);
+          transform: rotateX(-37deg) rotateY(-46deg) rotateZ(-23deg) translateX(8px) translateY(20px) translateZ(-50px);
+}
\ No newline at end of file
diff --git a/bongo-cat-codes/license.txt b/bongo-cat-codes/license.txt
new file mode 100644
index 0000000..4d8810d
--- /dev/null
+++ b/bongo-cat-codes/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2019 by Caroline Artz (https://codepen.io/carolineartz/pen/VwYwZaP)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/bongo-cat-codes/src/index.pug b/bongo-cat-codes/src/index.pug
new file mode 100644
index 0000000..e4974ac
--- /dev/null
+++ b/bongo-cat-codes/src/index.pug
@@ -0,0 +1,96 @@
+.content
+  .container
+    svg#bongo-cat(xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewBox='0 0 787.3 433.8')
+      defs
+        symbol#eye(data-name='eye', viewBox='0 0 19.2 18.7')
+          circle(cx='9.4', cy='9.1', r='8')
+          path(d='M16.3,5.1a1.3,1.3,0,0,1-1.4-.3,7.2,7.2,0,0,0-4.5-2.6A7.2,7.2,0,0,0,5.5,3.5,6.8,6.8,0,0,0,2.8,7.8a6.8,6.8,0,0,0,1,4.8,6.2,6.2,0,0,0,4,2.7,6.1,6.1,0,0,0,4.6-.7,6.7,6.7,0,0,0,2.9-3.7,6.4,6.4,0,0,0-.5-4.5c-.1-.2.8-1,1.5-1.3s2.2,0,2.3.5a9.4,9.4,0,0,1-.2,7.2,9.4,9.4,0,0,1-5.1,5.1,9,9,0,0,1-7,.2A9.6,9.6,0,0,1,1,13.5,9.2,9.2,0,0,1,.4,6.6,8.9,8.9,0,0,1,4.6,1.3,9,9,0,0,1,11.2.2,9.3,9.3,0,0,1,16.7,4C16.9,4.3,17,4.8,16.3,5.1Z')
+        symbol#paw-pads(data-name='paw-pads', viewBox='0 0 31.4 33.9')
+          path(d='M6.8,16a3.7,3.7,0,0,1,1.1,2.8,3.2,3.2,0,0,1-1.6,2.6L5,21.8H4.4a2.8,2.8,0,0,1-1.8.3A4.2,4.2,0,0,1,.2,19.1,7.7,7.7,0,0,1,0,17.6a2.8,2.8,0,0,1,.6-2,3.2,3.2,0,0,1,2.1-.8H4A5,5,0,0,1,6.8,16Zm7.3-4.8a1.8,1.8,0,0,0,.7-.5l.7-.4a3.5,3.5,0,0,0,1.1-1,3.2,3.2,0,0,0,.3-1.4,1.4,1.4,0,0,0-.2-.6,3.4,3.4,0,0,0-.3-2.4,3.2,3.2,0,0,0-2.1-1.5H13.1a4.7,4.7,0,0,0-1.6.4,2,2,0,0,0-.9.9l-.4.6v.4a6.1,6.1,0,0,0-.5,1.2,4.3,4.3,0,0,0,0,1.6,3.5,3.5,0,0,0,.5,2l.7.6a3.3,3.3,0,0,0,1.7.7A3,3,0,0,0,14.1,11.2ZM22.7,7l.6.2h.3A2.3,2.3,0,0,0,25,6.8l.4-.3.6-.3a7.5,7.5,0,0,0,1.5-.9,4.2,4.2,0,0,0,.8-1.2,1.9,1.9,0,0,0,.1-1.5A2.6,2.6,0,0,0,27.5,1,3.5,3.5,0,0,0,23.6.3a3.8,3.8,0,0,0-2,1.5,4.8,4.8,0,0,0-.7,2,3.6,3.6,0,0,0,.9,2.6ZM31,24.1a13.5,13.5,0,0,0-2.2-4.7,36.6,36.6,0,0,0-3.2-3.9,5.3,5.3,0,0,0-5-1.9,10.5,10.5,0,0,0-4.5,2.2A5.6,5.6,0,0,0,13.5,20a15.1,15.1,0,0,0,1.2,6.3c.8,2,1.7,4,2.6,5.9a1.6,1.6,0,0,0,1.5.8,1.7,1.7,0,0,0,1.9.9,17.1,17.1,0,0,0,8.7-4.8,8.2,8.2,0,0,0,1.7-2C31.6,26.3,31.3,25,31,24.1Z', fill='#ef97b0')
+      g#head
+        g#head__outline
+          path(d='M303.2,186.3c4-7,14.8-20.2,20-26,17-19,34.6-34.9,43-41l12-8s16.6-32,21-33c9-2,33,22,33,22s20-9,79,7c41,11.1,47,14,57,22,7.5,6,18,16,18,16s33.7-19.5,41-15-2,66-2,66,5.9,12.9,11,22c9.1,16.2,13.6,20.2,19,31,3.6,7.2,8.4,28.5,10.5,43.5l-385-62Z', fill='#fff')
+          path(d='M302.9,186.9c-1.2,3-5.9,12.6-9,18.8l-12.5,25.5-.6-1.2c32.2,4.8,64.4,9.2,96.6,13.6s64.4,8.9,96.5,13.7,64.3,9.7,96.4,14.9,64.1,10.5,96.2,15.8l-5.6,5.5c-1.2-8.5-2.8-17.1-4.8-25.6-1-4.1-2.1-8.4-3.4-12.3l-.5-1.4-.5-1.4-.6-1.3-.7-1.3a59.5,59.5,0,0,0-3.1-5.5c-2.2-3.6-4.7-7.2-7.1-11s-4.8-7.6-7-11.5c-4.5-7.9-8.3-15.9-12.1-24a4,4,0,0,1-.3-2.6h0c1.4-9.1,2.7-18.2,3.7-27.4.5-4.5.9-9.1,1.2-13.7s.4-9.1.2-13.4a26.4,26.4,0,0,0-.8-6,8.1,8.1,0,0,0-.3-1.1c-.1-.3-.2-.4-.1-.3h.3c0,.1.1.1,0,.1h-.6a11.9,11.9,0,0,0-2.5.2,16.3,16.3,0,0,0-3,.7,56.7,56.7,0,0,0-6.2,2.1,212.6,212.6,0,0,0-24.5,11.9h-.1a3.9,3.9,0,0,1-4.7-.6c-4.9-4.7-10-9.4-15.1-13.8a86.6,86.6,0,0,0-7.9-6,46.1,46.1,0,0,0-8.5-4.6c-6-2.6-12.6-4.6-19.2-6.7l-19.8-5.7a324.9,324.9,0,0,0-40-8.9,196.8,196.8,0,0,0-20.2-1.8c-1.7,0-3.4-.1-5.1,0h-2.5l-2.5.2-2.5.2-2.4.4-2.4.5-1.1.3h-.5l-.4.2H433a2.5,2.5,0,0,1-2.6-.7c-4.6-4.6-9.5-9.1-14.5-13.2a82.7,82.7,0,0,0-7.9-5.7L403.9,81a10.8,10.8,0,0,0-4-.9c-.1,0-.3,0-.3.1h0l-.7.5-1.5,1.7c-1,1.2-2,2.6-2.9,3.9s-3.6,5.5-5.3,8.3c-3.5,5.7-6.8,11.4-9.9,17.3h0l-.4.4-10.2,6.6a53.6,53.6,0,0,0-4.9,3.4l-4.6,3.8c-6.2,5.1-12.1,10.6-17.9,16.2s-11.3,11.4-16.7,17.4c-2.7,3-5.3,6.1-7.8,9.2s-5,6.3-7.4,9.5c-4.2,5.6-7,10-5.7,7.1a34.1,34.1,0,0,1,2.1-3.8l3.8-5.6c2.9-4,6.3-8.3,8.5-10.9s4.4-5.2,6.7-7.7l6.9-7.4c4.7-4.9,9.4-9.7,14.3-14.3s9.8-9.3,15-13.7l4-3.2,4.2-2.9,8.3-5.7-.4.4c3-5.9,6.1-11.8,9.4-17.7,1.6-2.9,3.3-5.8,5.1-8.6l2.9-4.3,1.8-2a7.5,7.5,0,0,1,1.3-1.1c.1-.2.6-.4,1-.5l.9-.2h1.7l1.4.2,2.7.8c1.7.7,3.3,1.5,4.8,2.3a84,84,0,0,1,8.5,5.7A175.7,175.7,0,0,1,434,98.5l-2.9-.6.8-.3.7-.2L434,97l2.7-.7,2.7-.5a23,23,0,0,1,2.6-.3l2.7-.3,2.7-.2h5.3a182.1,182.1,0,0,1,21,1.3,332.5,332.5,0,0,1,41.1,8.4l20,5.5c6.7,2,13.4,4,20.1,6.7a65.3,65.3,0,0,1,9.8,5.1c3.1,2.1,5.9,4.3,8.6,6.5,5.4,4.5,10.6,9.2,15.7,14l-4.8-.6c4.1-2.4,8.2-4.6,12.4-6.7s8.6-4.2,13-6c2.3-.9,4.6-1.7,7-2.4a23.4,23.4,0,0,1,3.8-.9,20,20,0,0,1,4.4-.4h1.3l1.5.4a5.1,5.1,0,0,1,1.7.7l.9.7.8.7a8.3,8.3,0,0,1,1.6,2.6,12.7,12.7,0,0,1,.8,2.3,44.6,44.6,0,0,1,1.1,7.7c.2,5,.1,9.7-.1,14.4s-.7,9.5-1.2,14.1c-.9,9.4-2.1,18.6-3.6,27.9l-.3-2.6c3.7,7.9,7.5,15.8,11.8,23.3,2.1,3.7,4.4,7.4,6.8,11s4.9,7.2,7.3,11.1c1.3,2,2.4,4,3.5,6.1a10.9,10.9,0,0,0,.8,1.5l.8,1.8.7,1.7.6,1.7c1.5,4.4,2.6,8.7,3.7,13.1a262,262,0,0,1,5.2,26.4,4.9,4.9,0,0,1-4.1,5.6h-1.5c-32.1-5-64.2-9.9-96.3-15.1s-64.1-10.6-96.1-16.1-64-11.4-96-17.4-63.9-11.9-95.9-17.4h-.1a.8.8,0,0,1-.6-.9v-.2l16.6-32.1C299.8,192.2,304.1,183.9,302.9,186.9Z')
+        g#head__face
+          g#eyes
+            use(width='19.2', height='18.7', transform='translate(474.8 195.2)', xlink:href='#eye')
+            use(width='19.2', height='18.7', transform='matrix(-0.51, -0.85, 0.82, -0.5, 370.39, 192.59)', xlink:href='#eye')
+          g#mouth
+            path(d='M399.2,186.3c.9,3.6,2.6,7.8,6,9,6.4,2.3,19-6,19-6s4.1,12.4,10,15,10.7-1.7,16-6', fill='#fff')
+            path(d='M450.2,198.3c.6,1.2.2,1.9-.2,2.2a36.7,36.7,0,0,1-7.6,4.9,14.9,14.9,0,0,1-4.8,1.4h-1.4l-1.3-.2-1.4-.4-1.3-.6a21.6,21.6,0,0,1-6.4-7.2,52.8,52.8,0,0,1-4-8.3l3.8,1.3a62.3,62.3,0,0,1-7.1,4.1,32.1,32.1,0,0,1-7.9,2.8,13.2,13.2,0,0,1-4.9.2l-1.4-.3a7.5,7.5,0,0,1-1.3-.6,7.9,7.9,0,0,1-2.3-1.6,16.8,16.8,0,0,1-2.9-4,24.1,24.1,0,0,1-1.6-4.2c-.1-.5,1.6-1.3,3-1.4s3.5.2,3.6.6a10.3,10.3,0,0,0,2.6,4.9l.7.5h2.4l1.5-.2a28.4,28.4,0,0,0,6.5-2c2.1-1,4.3-2.1,6.3-3.3h.1a2.5,2.5,0,0,1,3.4.9l.3.5a43.1,43.1,0,0,0,3.2,7.7,19.8,19.8,0,0,0,2.2,3.4,8.1,8.1,0,0,0,2.6,2.6,5,5,0,0,0,3,.7,10.8,10.8,0,0,0,3.7-1,33.4,33.4,0,0,0,7.2-4.3C448.8,197.4,449.5,197.2,450.2,198.3Z')
+      g#table
+        path(d='M65.7,181.8l714,124c0,74-2,54-2,128l-673-161Z', fill='#fff')
+        path(d='M786.7,304.2c-2.7,1.2-10.8,0-16.1-.9L31.1,176.4c-5.2-.9-8.9-3.8-6.2-5s14.3-1.4,19.5-.5L777.1,300.6C782.3,301.6,789.4,303.1,786.7,304.2Z')
+      g#laptop
+        g#laptop__base
+          polygon(points='641.9 304.1 454.7 348.2 103.8 271.3 254.6 230.3 641.9 304.1', fill='#f2f2f2')
+          path(d='M641.9,304.1c1.5-.1-2.3,1.5-10.3,3.6-28.9,7.5-58.1,15.2-87.7,22.6s-59.1,14.5-88.4,21.3l-.8.2-.8-.2-349.5-78-1.1-.2-8.7-1.9,8.6-2.3,150.6-41.5.6-.2h.7c62.5,11.7,125.5,23.6,188.4,35.9s125.6,25.1,188,37.6c8,1.6,11.9,3,10.4,3a185.6,185.6,0,0,1-18.4-2.6c-61.9-11.2-123.6-22.2-185-33.5s-122.7-23.1-184.4-35h1.2L104.4,273.4h-.1v-4.3l351.2,75.7h-1.5c28.3-6.7,56.3-13.3,84.3-19.5s56.5-12,85.2-18.1C631.3,305.6,640.4,304.1,641.9,304.1Z', fill='#231f20')
+        g#laptop__keyboard
+          polygon(points='371.1 274.8 256.8 253.5 257 252.7 266.2 251.1 382.4 271.5 382.3 272.3 371.1 274.8', fill='#3e3e54')
+          polygon(points='237.4 265.6 221.3 262.4 221.4 261.7 230.2 260.2 246.8 262.6 246.6 263.4 237.4 265.6', fill='#3e3e54')
+          polygon(points='474.6 312.9 249.9 268.1 250.1 267.3 259.2 265.8 487.7 309.6 487.5 310.5 474.6 312.9', fill='#3e3e54')
+          polygon(points='411.8 309.4 204.2 266.7 204.4 266 212.9 264.5 423.9 306.3 423.7 307.2 411.8 309.4', fill='#3e3e54')
+          polygon(points='450 317.3 428.5 312.9 428.8 312 440.7 310.6 462.7 314.1 462.5 315 450 317.3', fill='#3e3e54')
+          polygon(points='201.6 273.9 187.5 270.9 187.7 270.2 196 268.7 210.4 271 210.3 271.7 201.6 273.9', fill='#3e3e54')
+          polygon(points='222.6 278.3 208.1 275.3 208.3 274.5 216.9 273.1 231.8 275.4 231.6 276.2 222.6 278.3', fill='#3e3e54')
+          polygon(points='362.9 308.1 231.5 280.2 231.7 279.5 240.7 278.1 374.2 305.1 374 305.9 362.9 308.1', fill='#3e3e54')
+          polygon(points='444.3 288.4 385.2 277.4 385.4 276.5 396.6 274.9 456.9 285.1 456.7 285.9 444.3 288.4', fill='#3e3e54')
+          polygon(points='526.1 303.6 460.1 291.3 460.3 290.4 472.8 288.9 540.1 300.2 539.9 301.1 526.1 303.6', fill='#3e3e54')
+          polygon(points='426.2 321.6 376.1 310.9 376.3 310.1 387.4 308.7 438.5 318.5 438.3 319.4 426.2 321.6', fill='#3e3e54')
+          g
+            polygon(points='410.6 286.5 399.1 288 398.9 288.8 499.9 308.3 513.3 305.9 513.5 305 410.6 286.5', fill='#3e3e54')
+            polygon(points='395.7 283.7 395.9 282.8 248.2 255.7 239.2 257.3 239 258 384.3 286 395.7 283.7', fill='#3e3e54')
+          polygon(points='371.3 273.9 256.9 252.7 266.4 250.3 382.4 271.5 371.3 273.9', stroke='#000', stroke-linecap='round', stroke-linejoin='round', stroke-width='1.2')
+          polygon(points='237.6 264.9 221.4 261.7 230.4 259.4 246.8 262.6 237.6 264.9', stroke='#000', stroke-linecap='round', stroke-linejoin='round', stroke-width='1.2')
+          polygon(points='474.8 312 250 267.3 259.4 265.1 487.7 309.6 474.8 312', stroke='#000', stroke-linecap='round', stroke-linejoin='round', stroke-width='1.2')
+          polygon(points='412 308.5 204.4 266 213.1 263.8 423.9 306.3 412 308.5', stroke='#000', stroke-linecap='round', stroke-linejoin='round', stroke-width='1.2')
+          polygon(points='450.2 316.4 428.8 312 440.9 309.7 462.8 314.1 450.2 316.4', stroke='#000', stroke-linecap='round', stroke-linejoin='round', stroke-width='1.2')
+          polygon(points='201.7 273.1 187.7 270.2 196.2 268 210.4 271 201.7 273.1', stroke='#000', stroke-linecap='round', stroke-linejoin='round', stroke-width='1.2')
+          polygon(points='222.8 277.6 208.3 274.5 217.1 272.4 231.8 275.4 222.8 277.6', stroke='#000', stroke-linecap='round', stroke-linejoin='round', stroke-width='1.2')
+          polygon(points='363.1 307.3 231.7 279.5 240.9 277.3 374.2 305.1 363.1 307.3', stroke='#000', stroke-linecap='round', stroke-linejoin='round', stroke-width='1.2')
+          polygon(points='444.6 287.5 385.4 276.5 396.8 274.1 456.9 285 444.6 287.5', stroke='#000', stroke-linecap='round', stroke-linejoin='round', stroke-width='1.2')
+          polygon(points='526.3 302.7 460.3 290.4 473 288 540.1 300.2 526.3 302.7', stroke='#000', stroke-linecap='round', stroke-linejoin='round', stroke-width='1.2')
+          polygon(points='426.4 320.7 376.3 310.1 387.6 307.9 438.5 318.5 426.4 320.7', stroke='#000', stroke-linecap='round', stroke-linejoin='round', stroke-width='1.2')
+          g
+            polygon(points='410.7 285.6 399.1 288 500.1 307.4 513.5 305 410.7 285.6', stroke='#000', stroke-linecap='round', stroke-linejoin='round', stroke-width='1.2')
+            polygon(points='395.9 282.8 248.4 255 239.2 257.3 384.5 285.2 395.9 282.8', stroke='#000', stroke-linecap='round', stroke-linejoin='round', stroke-width='1.2')
+        g#paw-right
+          g#paw-right--down
+            path(d='M293.2,191.3l10-7s-18.4,11.1-24,20-13,20.4-9,31c4.7,12.4,20.5,15.7,22,16,20,3.8,47.8-24.3,47.8-24.3s1.9-3.3,2.2-3.7', fill='#fff')
+            path(d='M342.1,223.4c.9,1.2.2,2.8-.3,3.7l-.4.7-.3.3a118.1,118.1,0,0,1-14.2,12.3,83.2,83.2,0,0,1-16.2,9.8,43.9,43.9,0,0,1-9.3,3,26.3,26.3,0,0,1-10.1.2,44.5,44.5,0,0,1-9.3-3.2,34.2,34.2,0,0,1-8.3-5.5,23,23,0,0,1-5.8-8.5,21.3,21.3,0,0,1-1.3-10.3,34.9,34.9,0,0,1,2.7-9.7,76.1,76.1,0,0,1,4.5-8.5l2.4-4,.6-1,.8-1.1a15.6,15.6,0,0,1,1.6-2,49.9,49.9,0,0,1,7-6.8,136.1,136.1,0,0,1,15.3-11.2,3.1,3.1,0,0,1,4.4,1,3,3,0,0,1-.8,4.2H305l-8.6,6.2c-.9.6-2.7-.5-3.1-1.9s.5-4.4,1.5-5l6.6-4.5,3.5,5.3A131.9,131.9,0,0,0,290,197.4a52.7,52.7,0,0,0-6.4,6,6.5,6.5,0,0,0-1.3,1.6l-.6.8-.7,1-2.4,3.8c-1.6,2.6-3.1,5.2-4.4,7.8a27.7,27.7,0,0,0-2.4,8.1,15.6,15.6,0,0,0,.8,8,17.4,17.4,0,0,0,4.4,6.7,27.2,27.2,0,0,0,7.1,4.9,39.5,39.5,0,0,0,8.1,3,21.6,21.6,0,0,0,8.4,0,37.8,37.8,0,0,0,8.5-2.6,84.9,84.9,0,0,0,15.7-9,142.4,142.4,0,0,0,14.1-11.6l-.3.3,1.1-1.8C340.3,223.4,341.3,222.2,342.1,223.4Z')
+          g#paw-right--up
+            g
+              path(d='M282.2,215.2c-1.6-1.6-12.8-17.9-14-34.3-.1-2.5,1.7-16,12.9-22.4s22.3-1.9,26.2.4c12.2,7.3,21.2,19.1,22.8,22.4', fill='#fff')
+              path(d='M330,181.2a2.4,2.4,0,0,1-2.6-1.3,71.4,71.4,0,0,0-9.8-10.8,64,64,0,0,0-11.7-8.6,26.3,26.3,0,0,0-6.5-2.3,26.9,26.9,0,0,0-6.9-.6,24.9,24.9,0,0,0-6.7,1.3,20.8,20.8,0,0,0-5.8,3.3,23.1,23.1,0,0,0-7.6,11,32.5,32.5,0,0,0-1.4,6.6,6.6,6.6,0,0,0,.1,1.4l.2,1.8c.1,1.2.4,2.3.6,3.5a65,65,0,0,0,4.8,13.4c1,2.2,2.2,4.3,3.4,6.4a43.1,43.1,0,0,0,3.9,5.9.6.6,0,0,1,0,.6c0,.2-.2.4-.4.7a5.7,5.7,0,0,1-1.5,1.6c-1.3.6-4.1.1-4.6-.6a89.5,89.5,0,0,1-7.2-13.7,63.7,63.7,0,0,1-4.3-14.9,25.7,25.7,0,0,1-.5-4c0-.3-.1-.6-.1-1v-1.2a12.5,12.5,0,0,1,.2-2.1,35.2,35.2,0,0,1,2.4-7.8,28.6,28.6,0,0,1,4.1-6.9,24.6,24.6,0,0,1,6.1-5.5,26.2,26.2,0,0,1,15.5-4.2,28.9,28.9,0,0,1,7.8,1.2l3.8,1.3,1.8.9,1.8,1a78.2,78.2,0,0,1,11.9,9.6,80.2,80.2,0,0,1,9.7,11.8C331.1,179.7,331.4,181,330,181.2Z')
+            use(width='31.4', height='33.93', transform='translate(273.2 166.1) rotate(-5.6)', xlink:href='#paw-pads')
+        g#laptop__terminal
+          path(d='M316.9,238.7,153.5,205.2a5.1,5.1,0,0,1-4-3.5L109.8,75.4c-1-3.3,1.9-6.6,5.6-6.3L277.9,84.5a5.2,5.2,0,0,1,4.6,3.7l40.7,144.4C324.2,236.2,320.8,239.5,316.9,238.7Z')
+          path(d='M317.3,238.7a7.9,7.9,0,0,0,2.2-.7,5,5,0,0,0,2.2-1.9,3.7,3.7,0,0,0,.6-2.9l-.3-.8-.2-.9a15.4,15.4,0,0,1-.5-1.7L300,154.6l-10.7-37.5L284,98.3l-2.6-9.4a7.9,7.9,0,0,0-.4-.9,4.3,4.3,0,0,0-.4-.7,3.3,3.3,0,0,0-1.5-1.1l-.9-.3h-1.1l-2.4-.2L119.2,71.2l-2.4-.3h-2.2a3.3,3.3,0,0,0-2.8,1.6,2.4,2.4,0,0,0-.5,1.4v.8c.1.1.1.2.1.4l.2.6,1.5,4.6L119,98.8l11.8,37.3,11.7,37.2,5.9,18.6,2.9,9.3a3.4,3.4,0,0,0,2.2,2h1l1.2.3,2.4.4,153,31.1c4.3.9,7.4,2.9,5.2,3.3s-11.7-.1-16-1l-75.8-15.7L186.6,214l-19-3.9-9.5-2-4.7-1h-.7l-.8-.3a6.1,6.1,0,0,1-1.4-.7,7.6,7.6,0,0,1-2.3-2.4l-.4-.8a1.9,1.9,0,0,1-.2-.7l-.4-1.2-.7-2.3-1.4-4.6-2.9-9.2-5.8-18.5-11.5-36.9-11.5-37-2.9-9.2L109,78.5l-.7-2.3v-.6c0-.3-.1-.6-.1-.8a4.8,4.8,0,0,1,0-1.7,6.8,6.8,0,0,1,3.8-5,10.1,10.1,0,0,1,3-.7h2.6l9.6,1L204.1,76l38.5,3.7,19.3,1.9,9.6.9,4.8.5h2.6a6.6,6.6,0,0,1,2.7,1.2,7.2,7.2,0,0,1,1.9,2.4,12.1,12.1,0,0,1,.5,1.4l.3,1.1,1.3,4.7,2.6,9.3,5.2,18.6,10.4,37.3,10.4,37.3,5.3,18.6,2.6,9.4,1.3,4.6.6,2.4a7,7,0,0,1,.4,2.7,5.7,5.7,0,0,1-1.8,3.7,5.9,5.9,0,0,1-3.4,1.6,3.5,3.5,0,0,1-2.1-.4C316.7,239,316.8,238.9,317.3,238.7Z')
+        
+        g#laptop__terminal_code_scene 
+          g#laptop__code
+            g(stroke='#3DE0E8', stroke-width='6', transform='matrix(-1 0 0 1 278 103)')
+              g#f3(transform='translate(0 76)')
+                path#f3-l9.typing-animation(d='M8,25L8,25', stroke-dasharray='60,10')
+                path#f3-l8.typing-animation(d='M8,13L8,13', stroke-dasharray='50,10')
+                path#f3-l7.typing-animation(d='M0,1L0,1', stroke-dasharray='25,10')
+              g#f2(transform='translate(0 38)')
+                path#f2-l6.typing-animation(d='M8,25L8,25', stroke-dasharray='40,10')
+                path#f2-l5.typing-animation(d='M8,13L8,13', stroke-dasharray='60,10')
+                path#f2-l4.typing-animation(d='M0,1L0,1', stroke-dasharray='30,10')
+              g#f1
+                path#f1-l3.typing-animation(d='M8,25L8,25', stroke-dasharray='60,10')
+                path#f1-l2.typing-animation(d='M8,13L8,13', stroke-dasharray='60,10')
+                path#f1-l1.typing-animation(d='M0,1L0,1', stroke-dasharray='60,10')
+        g#laptop__cover(style='mix-blend-mode: hard-light;')
+          polygon(points='440.7 347.2 90.3 275.6 4.7 3.8 353 36.7 440.7 347.2', fill='#f2f2f2')
+          path(d='M440.4,346.4c-2.5-5.3-6.5-18.8-9-27.4L390.7,178c-13.6-46.8-26.9-93.7-40.3-140.6l2.3,2L4.4,7.1,7.9,2.8,94,274.5l-2.9-2.6q83.7,16.8,166.8,34.2t166.8,35.4c8.8,1.9,17.5,5.1,14.7,5.5s-6.3-.2-12-.9-12.3-1.5-16.8-2.3Q330.5,328.1,250,312.1c-53.5-10.8-107.1-21.7-160.4-32.7l-2.3-.5-.6-2.1L1.5,4.8,0,0,5,.5,353.3,34l1.8.2.5,1.8q20.7,73.8,41.2,147.8l40.6,147.5C439.8,340.1,442.9,351.7,440.4,346.4Z')
+      g#paw-left
+        g#paw-left--up
+          g
+            path(d='M545.4,261.9c-7.1-13-12.9-31.1-13.3-37.6-.6-9,0-15.6,5.2-22.2s15-9.8,22.7-8.8a26.7,26.7,0,0,1,17.3,9.4c5.3,5.8,9.4,12.9,11.6,16.6', fill='#fff')
+            path(d='M588.9,219.2c-1.4.4-2.3-.7-2.8-1.4a93.9,93.9,0,0,0-8.9-12.5c-3.3-3.9-7.1-7-11.7-8.6a24.2,24.2,0,0,0-7.1-1.4,24.5,24.5,0,0,0-7.1.7,27,27,0,0,0-6.6,2.7,21,21,0,0,0-5.2,4.6,20.6,20.6,0,0,0-3.5,6.1,22.2,22.2,0,0,0-1.3,6.9,47.3,47.3,0,0,0,.1,7.5,52.2,52.2,0,0,0,1.4,7.1c1.4,4.8,3.1,9.7,5,14.4a147.7,147.7,0,0,0,6.5,13.9c.4.7-1,2.3-2.4,2.6s-4-.6-4.4-1.4c-2.3-4.8-4.3-9.7-6.1-14.6a128.8,128.8,0,0,1-4.6-15.3c-.3-1.3-.5-2.6-.7-4a16.4,16.4,0,0,1-.2-2.2v-2a57,57,0,0,1,.4-8.2,27.2,27.2,0,0,1,2.3-8.2c.7-1.3,1.4-2.5,2.2-3.7l1.3-1.7,1.4-1.6a28.8,28.8,0,0,1,7-5,27.6,27.6,0,0,1,8-2.5,25.6,25.6,0,0,1,8.3-.2,27.4,27.4,0,0,1,15.1,6.7,50.6,50.6,0,0,1,5.5,5.9,111.3,111.3,0,0,1,8.7,13.2C589.8,217.7,590.3,218.9,588.9,219.2Z')
+          use(width='31.4', height='33.93', transform='matrix(0.99, -0.03, 0.04, 1, 539.85, 203.52)', xlink:href='#paw-pads')
+        g#paw-left--down
+          path(d='M538.2,239.3c-3.2,1.6-33,10.8-37,28-.4,1.8-2.1,18.9,7,26,5.5,4.3,12.7,2.8,25,0,10.3-2.3,19-5.8,40-16,9.1-4.4,16.6-8.2,22-11', fill='#fff')
+          path(d='M595.1,266.4c.1,1.4-1.4,2.4-2.4,2.9l-18.3,9.4c-6.2,3.1-12.3,6.1-18.6,9a120.8,120.8,0,0,1-19.6,7.2l-5.1,1.2-5.1,1.1a43.4,43.4,0,0,1-5.2.9,33.8,33.8,0,0,1-5.6.3,17.8,17.8,0,0,1-5.8-1.5,6.1,6.1,0,0,1-1.4-.7l-1.3-.9-2.2-2a23.6,23.6,0,0,1-5.2-10.2,44.5,44.5,0,0,1-1.3-10.9c0-.9.1-1.8.1-2.7a6.6,6.6,0,0,0,.1-1.4v-.7c.1-.3.1-.7.2-.9a21.6,21.6,0,0,1,2.1-5.5,33.4,33.4,0,0,1,7.1-8.7,67.1,67.1,0,0,1,8.7-6.4,121.7,121.7,0,0,1,19-9,1.5,1.5,0,0,1,1.7.6,3.4,3.4,0,0,1,.9,1.9c.1,1.5-1.6,4.2-2.6,4.6a91.1,91.1,0,0,0-17.8,8.5,40.1,40.1,0,0,0-7.6,5.8,22.8,22.8,0,0,0-5.2,7.3l-.4,1-.3,1a1.7,1.7,0,0,0-.2.5v.4c-.1.4-.1.8-.2,1.2s-.1,3.1-.1,4.7a35.4,35.4,0,0,0,1.4,9.3,15.6,15.6,0,0,0,4.5,7.3c2,1.9,4.7,2.6,7.8,2.5a55.9,55.9,0,0,0,9.7-1.2l4.9-1.1,4.9-1.1a121,121,0,0,0,18.8-6.8c12.4-5.3,24.6-11.5,36.8-17.4C593.4,265.4,595,264.9,595.1,266.4Z')
\ No newline at end of file
diff --git a/bongo-cat-codes/src/script.babel b/bongo-cat-codes/src/script.babel
new file mode 100644
index 0000000..b6ff590
--- /dev/null
+++ b/bongo-cat-codes/src/script.babel
@@ -0,0 +1,6 @@
+// Part of an upcoming personal site update
+
+// Inspired By
+// https://codepen.io/abeatrize/pen/LJqYey
+
+// Bongo Cat originally created by @StrayRogue and @DitzyFlama
\ No newline at end of file
diff --git a/bongo-cat-codes/src/style.scss b/bongo-cat-codes/src/style.scss
new file mode 100644
index 0000000..d560ab6
--- /dev/null
+++ b/bongo-cat-codes/src/style.scss
@@ -0,0 +1,115 @@
+$base-typing-speed: 300ms;
+$code-typing-animation-duration: 1200ms;
+
+.content {
+  position: relative;
+}
+
+.container {
+  top: 0; bottom: 0; left: 0; right: 0;
+}
+
+#bongo-cat {
+  position: absolute;
+  height: 80vh;
+  width: 80vw;
+  top: 100vh; bottom: 0; left: 0; right: 0;
+  margin: auto;
+}
+
+.typing-animation {
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-duration: $code-typing-animation-duration;
+}
+
+@for $line from 1 through 9 {
+  $fn-group: ceil($line / 3);
+  path#f#{$fn-group}-l#{$line} {
+    animation-name: typing-f#{$fn-group}-l#{$line}
+  }
+}
+
+@keyframes typing-f3-l9 {
+  0% { d: path('M8,25L8,25') }
+  82% { d: path('M8,25L8,25') }
+  92% { d: path('M8,25L96,25') }
+  100% { d: path('M8,25L96,25') }
+}
+
+@keyframes typing-f3-l8 {
+  0% { d: path('M8,13L8,13') }
+  68% { d: path('M8,13L8,13') }
+  82% { d: path('M8,13L146,13') }
+  100% { d: path('M8,13L146,13') }
+}
+
+@keyframes typing-f3-l7 {
+  0% { d: path('M0,1L0,1') }
+  60% { d: path('M0,1L0,1') }
+  68% { d: path('M0,1L96,1') }
+  100% { d: path('M0,1L96,1') }
+}
+
+@keyframes typing-f2-l6 {
+  0% { d: path('M8,25L8,25') }
+  54% { d: path('M8,25L8,25') }
+  60% { d: path('M8,25L69,25') }
+  100% { d: path('M8,25L69,25') }
+}
+
+@keyframes typing-f2-l5 {
+  0% { d: path('M8,13L8,13') }
+  44% { d: path('M8,13L8,13') }
+  54% { d: path('M8,13L114,13') }
+  100% { d: path('M8,13L114,13') }
+}
+
+@keyframes typing-f2-l4 {
+  0% { d: path('M0,1L0,1') }
+  30% { d: path('M0,1L0,1') }
+  44% { d: path('M0,1L136,1') }
+  100% { d: path('M0,1L136,1') }
+}
+
+@keyframes typing-f1-l3 {
+  0% { d: path('M8,25L8,25') }
+  24% { d: path('M8,25L8,25') }
+  30% { d: path('M8,25L61,25') }
+  100% { d: path('M8,25L61,25') }
+}
+
+@keyframes typing-f1-l2 {
+  0% { d: path('M8,13L8,13') }
+  14% { d: path('M8,13L8,13') }
+  24% { d: path('M8,13L124,13') }
+  100% { d: path('M8,13L124,13') }
+}
+
+@keyframes typing-f1-l1 {
+  0% { d: path('M0,1L0,1') }
+  14% { d: path('M0,1L160,1') }
+  100% { d: path('M0,1L160,1') }
+}
+
+#paw-right--up, 
+#paw-right--down, 
+#paw-left--up,
+#paw-left--down {
+  animation: blink $base-typing-speed infinite;
+}
+
+#paw-right--up,
+#paw-left--down{
+  animation-delay: $base-typing-speed/2;
+}
+
+@keyframes blink {
+  0% { opacity: 0; }
+  49% { opacity: 0; }
+  50% { opacity: 1; }
+}
+
+#laptop__code {
+  transform: rotateX(-37deg) rotateY(-46deg) rotateZ(-23deg) translateX(8px) translateY(20px) translateZ(-50px);
+}
\ No newline at end of file
diff --git a/book-store-ui/LICENSE.txt b/book-store-ui/LICENSE.txt
new file mode 100644
index 0000000..d514c26
--- /dev/null
+++ b/book-store-ui/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Aysenur Turk (https://codepen.io/TurkAysenur/pen/JjGKKrP)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/book-store-ui/README.markdown b/book-store-ui/README.markdown
new file mode 100644
index 0000000..e342cf6
--- /dev/null
+++ b/book-store-ui/README.markdown
@@ -0,0 +1,7 @@
+# Book Store UI
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/TurkAysenur/pen/JjGKKrP](https://codepen.io/TurkAysenur/pen/JjGKKrP).
+
+Inspired by Dwinawan
+https://dribbble.com/shots/2425824--Exploration-Book-Store-Website
+
diff --git a/book-store-ui/README.md b/book-store-ui/README.md
new file mode 100644
index 0000000..482e902
--- /dev/null
+++ b/book-store-ui/README.md
@@ -0,0 +1,6 @@
+# Book Store UI
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/TurkAysenur/pen/JjGKKrP](https://codepen.io/TurkAysenur/pen/JjGKKrP).
+
+Inspired by Dwinawan
+https://dribbble.com/shots/2425824--Exploration-Book-Store-Website
diff --git a/book-store-ui/dist/index.html b/book-store-ui/dist/index.html
new file mode 100644
index 0000000..8301de5
--- /dev/null
+++ b/book-store-ui/dist/index.html
@@ -0,0 +1,540 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Book Store UI</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="book-store">
+ <div class="header">
+  <div class="browse">
+   <div class="browse-category">
+    Browse Category
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
+     <path d="M6 9l6 6 6-6" /></svg>
+   </div>
+   <div class="search-bar">
+    <input type="text" placeholder="Search Book" />
+   </div>
+  </div>
+  <div class="header-title">read<span>books</span></div>
+  <div class="profile">
+   <div class="user-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="user-img">
+   </div>
+   <div class="profile-menu">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
+     <path d="M3 12h18M3 6h18M3 18h18" /></svg>
+    Menu
+   </div>
+  </div>
+ </div>
+ <div class="book-slide">
+  <div class="book js-flickity" data-flickity-options='{ "wrapAround": true }'>
+   <div class="book-cell">
+    <div class="book-img">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/81WcnNQ-TBL.jpg" alt="" class="book-photo">
+    </div>
+    <div class="book-content">
+     <div class="book-title">BIG MAGIC</div>
+     <div class="book-author">by Elizabeth Gilbert</div>
+     <div class="rate">
+      <fieldset class="rating">
+       <input type="checkbox" id="star5" name="rating" value="5" />
+       <label class="full" for="star5"></label>
+       <input type="checkbox" id="star4" name="rating" value="4" />
+       <label class="full" for="star4"></label>
+       <input type="checkbox" id="star3" name="rating" value="3" />
+       <label class="full" for="star3"></label>
+       <input type="checkbox" id="star2" name="rating" value="2" />
+       <label class="full" for="star2"></label>
+       <input type="checkbox" id="star1" name="rating" value="1" />
+       <label class="full" for="star1"></label>
+      </fieldset>
+      <span class="book-voters">1.987 voters</span>
+     </div>
+     <div class="book-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+     <div class="book-see">See The Book</div>
+    </div>
+   </div>
+   <div class="book-cell">
+    <div class="book-img">
+     <img src="https://i.pinimg.com/originals/a8/b9/ff/a8b9ff74ed0f3efd97e09a7a0447f892.jpg" alt="" class="book-photo">
+    </div>
+    <div class="book-content">
+     <div class="book-title">Ten Thousand Skies Above You</div>
+     <div class="book-author">by Claudia Gray</div>
+     <div class="rate">
+      <fieldset class="rating blue">
+       <input type="checkbox" id="star6" name="rating" value="5" />
+       <label class="full1" for="star6"></label>
+       <input type="checkbox" id="star7" name="rating" value="4" />
+       <label class="full1" for="star7"></label>
+       <input type="checkbox" id="star8" name="rating" value="3" />
+       <label class="full1" for="star8"></label>
+       <input type="checkbox" id="star9" name="rating" value="2" />
+       <label class="full1" for="star9"></label>
+       <input type="checkbox" id="star10" name="rating" value="1" />
+       <label class="full1" for="star10"></label>
+      </fieldset>
+      <span class="book-voters">1.987 voters</span>
+     </div>
+     <div class="book-sum">The hunt for each splinter of Paul's soul sends Marguerite racing through a war-torn San Francisco.</div>
+     <div class="book-see book-blue">See The Book</div>
+    </div>
+   </div>
+   <div class="book-cell">
+    <div class="book-img">
+     <img src="https://www.abebooks.com/blog/wp-content/uploads/2016/08/10.jpg" alt="" class="book-photo">
+    </div>
+    <div class="book-content">
+     <div class="book-title">A Tale For The Time Being</div>
+     <div class="book-author">by Ruth Ozeki</div>
+     <div class="rate">
+      <fieldset class="rating purple">
+       <input type="checkbox" id="star11" name="rating" value="5" />
+       <label class="full" for="star11"></label>
+       <input type="checkbox" id="star12" name="rating" value="4" />
+       <label class="full" for="star12"></label>
+       <input type="checkbox" id="star13" name="rating" value="3" />
+       <label class="full" for="star13"></label>
+       <input type="checkbox" id="star14" name="rating" value="2" />
+       <label class="full" for="star14"></label>
+       <input type="checkbox" id="star15" name="rating" value="1" />
+       <label class="full" for="star15"></label>
+      </fieldset>
+      <span class="book-voters">1.987 voters</span>
+     </div>
+     <div class="book-sum">In Tokyo, sixteen-year-old Nao has decided there’s only one escape from her aching loneliness and her classmates’ bullying.</div>
+     <div class="book-see book-pink">See The Book</div>
+    </div>
+   </div>
+   <div class="book-cell">
+    <div class="book-img">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/81af+MCATTL.jpg" alt="" class="book-photo">
+    </div>
+    <div class="book-content">
+     <div class="book-title">The Great Gatsby</div>
+     <div class="book-author">by F.Scott Fitzgerald</div>
+     <div class="rate">
+      <fieldset class="rating yellow">
+       <input type="checkbox" id="star16" name="rating" value="5" />
+       <label class="full" for="star16"></label>
+       <input type="checkbox" id="star17" name="rating" value="4" />
+       <label class="full" for="star17"></label>
+       <input type="checkbox" id="star18" name="rating" value="3" />
+       <label class="full" for="star18"></label>
+       <input type="checkbox" id="star19" name="rating" value="2" />
+       <label class="full" for="star19"></label>
+       <input type="checkbox" id="star20" name="rating" value="1" />
+       <label class="full" for="star20"></label>
+      </fieldset>
+      <span class="book-voters">1.987 voters</span>
+     </div>
+     <div class="book-sum">The Great Gatsby, F. Scott Fitzgerald’s third book, stands as the supreme achievement of his career.</div>
+     <div class="book-see book-yellow">See The Book</div>
+    </div>
+   </div>
+   <div class="book-cell">
+    <div class="book-img">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/81UWB7oUZ0L.jpg" alt="" class="book-photo">
+    </div>
+    <div class="book-content">
+     <div class="book-title">After You</div>
+     <div class="book-author">by Jojo Moyes</div>
+     <div class="rate">
+      <fieldset class="rating dark-purp">
+       <input type="checkbox" id="star21" name="rating" value="5" />
+       <label class="full" for="star21"></label>
+       <input type="checkbox" id="star22" name="rating" value="4" />
+       <label class="full" for="star22"></label>
+       <input type="checkbox" id="star23" name="rating" value="3" />
+       <label class="full" for="star23"></label>
+       <input type="checkbox" id="star24" name="rating" value="2" />
+       <label class="full" for="star24"></label>
+       <input type="checkbox" id="star25" name="rating" value="1" />
+       <label class="full" for="star25"></label>
+      </fieldset>
+      <span class="book-voters">1.987 voters</span>
+     </div>
+     <div class="book-sum">Louisa Clark is no longer just an ordinary girl living an ordinary life. After the transformative six months spent.</div>
+     <div class="book-see book-purple">See The Book</div>
+    </div>
+   </div>
+  </div>
+ </div>
+ <div class="main-wrapper">
+  <div class="books-of">
+   <div class="week">
+    <div class="author-title">Author of the week</div>
+    <div class="author">
+     <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="author-img">
+     <div class="author-name">Sebastian Jeremy</div>
+    </div>
+    <div class="author">
+     <img src="https://images.unsplash.com/photo-1586297098710-0382a496c814?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80" alt="" class="author-img">
+     <div class="author-name">Jonathan Doe</div>
+    </div>
+    <div class="author">
+     <img src="https://images.unsplash.com/photo-1573140247632-f8fd74997d5c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="author-img">
+     <div class="author-name">Angeline Summer</div>
+    </div>
+    <div class="author">
+     <img src="https://pbs.twimg.com/profile_images/737221709267374081/sdwta9Oh.jpg" alt="" class="author-img">
+     <div class="author-name">Noah Jones</div>
+    </div>
+    <div class="author">
+     <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="author-img">
+     <div class="author-name">Tommy Adam</div>
+    </div>
+    <div class="author">
+     <img src="https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="author-img">
+     <div class="author-name">Ian Cassandra</div>
+    </div>
+   </div>
+   <div class="week year">
+    <div class="author-title">Books of the year</div>
+    <div class="year-book">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/A1kNdYXw0GL.jpg" alt="" class="year-book-img">
+     <div class="year-book-content">
+      <div class="year-book-name">Disappearing Earth</div>
+      <div class="year-book-author">by Julia Phillips</div>
+     </div>
+    </div>
+    <div class="year-book">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/81eI0ExR+VL.jpg" alt="" class="year-book-img">
+     <div class="year-book-content">
+      <div class="year-book-name">Lost Children Archive</div>
+      <div class="year-book-author">by Valeria Luiselli</div>
+     </div>
+    </div>
+    <div class="year-book">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/81OF9eJDA4L.jpg" alt="" class="year-book-img">
+     <div class="year-book-content">
+      <div class="year-book-name">Phantoms: A Thriller </div>
+      <div class="year-book-author">by Dean Koontz</div>
+     </div>
+    </div>
+    <div class="year-book">
+     <img src="https://m.media-amazon.com/images/I/515FWPyZ-5L.jpg" alt="" class="year-book-img">
+     <div class="year-book-content">
+      <div class="year-book-name">Midnight in Chernobyl</div>
+      <div class="year-book-author">by Adam Higginbotham</div>
+     </div>
+    </div>
+    <div class="year-book">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/91dBtgERNUL.jpg" alt="" class="year-book-img">
+     <div class="year-book-content">
+      <div class="year-book-name">10 Minutes 38 Seconds</div>
+      <div class="year-book-author">by Elif Shafak</div>
+     </div>
+    </div>
+   </div>
+   <div class="overlay"></div>
+  </div>
+  <div class="popular-books">
+   <div class="main-menu">
+    <div class="genre">Popular by Genre</div>
+    <div class="book-types">
+     <a href="#" class="book-type active"> All Genres</a>
+     <a href="#" class="book-type"> Business</a>
+     <a href="#" class="book-type"> Science</a>
+     <a href="#" class="book-type"> Fiction</a>
+     <a href="#" class="book-type"> Philosophy</a>
+     <a href="#" class="book-type"> Biography</a>
+    </div>
+   </div>
+   <div class="book-cards">
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F6%2F2019%2F07%2Fchances-are-1-2000.jpg&q=85" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Changes Are</div>
+      <div class="book-by">by Richard Russo</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c1" name="rating" value="5">
+<label class="full" for="star-c1"></label>
+<input type="checkbox" id="star-c2" name="rating" value="4">
+<label class="full" for="star-c2"></label>
+<input type="checkbox" id="star-c3" name="rating" value="3">
+<label class="full" for="star-c3"></label>
+<input type="checkbox" id="star-c4" name="rating" value="2">
+<label class="full" for="star-c4"></label>
+<input type="checkbox" id="star-c5" name="rating" value="1">
+<label class="full" for="star-c5"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Samantha William</span> and<span> 2 other friends</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/7167iiDUeAL.jpg" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Dominicana</div>
+      <div class="book-by">by Angie Cruz</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c6" name="rating" value="5">
+<label class="full" for="star-c6"></label>
+<input type="checkbox" id="star-c7" name="rating" value="4">
+<label class="full" for="star-c7"></label>
+<input type="checkbox" id="star-c8" name="rating" value="3">
+<label class="full" for="star-c8"></label>
+<input type="checkbox" id="star-c9" name="rating" value="2">
+<label class="full" for="star-c9"></label>
+<input type="checkbox" id="star-c10" name="rating" value="1">
+<label class="full" for="star-c10"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Kimberly Jones</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://assets.fontsinuse.com/static/use-media-items/95/94294/full-2000x3056/5d56c6b1/cg%201.jpeg?resolution=0" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">The Travellers</div>
+      <div class="book-by">by Regina Porter</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c11" name="rating" value="5">
+<label class="full" for="star-c11"></label>
+<input type="checkbox" id="star-c12" name="rating" value="4">
+<label class="full" for="star-c12"></label>
+<input type="checkbox" id="star-c13" name="rating" value="3">
+<label class="full" for="star-c13"></label>
+<input type="checkbox" id="star-c14" name="rating" value="2">
+<label class="full" for="star-c14"></label>
+<input type="checkbox" id="star-c15" name="rating" value="1">
+<label class="full" for="star-c15"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Adam</span> and<span> Kimberly</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/91M4E+SURUL.jpg" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Afternoon Of A Faun</div>
+      <div class="book-by">by James Lasdun</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c16" name="rating" value="5">
+<label class="full" for="star-c16"></label>
+<input type="checkbox" id="star-c17" name="rating" value="4">
+<label class="full" for="star-c17"></label>
+<input type="checkbox" id="star-18" name="rating" value="3">
+<label class="full" for="star-c18"></label>
+<input type="checkbox" id="star-c19" name="rating" value="2">
+<label class="full" for="star-c19"></label>
+<input type="checkbox" id="star-c20" name="rating" value="1">
+<label class="full" for="star-c20"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Samantha William</span> and<span> 2 other friends</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/61OTY2-4anL.jpg" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Flash Count Diary</div>
+      <div class="book-by">by Darcey Steinke</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c21" name="rating" value="5">
+<label class="full" for="star-c21"></label>
+<input type="checkbox" id="star-c22" name="rating" value="4">
+<label class="full" for="star-c22"></label>
+<input type="checkbox" id="star-c23" name="rating" value="3">
+<label class="full" for="star-c23"></label>
+<input type="checkbox" id="star-c24" name="rating" value="2">
+<label class="full" for="star-c24"></label>
+<input type="checkbox" id="star-c25" name="rating" value="1">
+<label class="full" for="star-c25"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Angelina Stone</span> and<span> 2 other friends</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/61Vc+xM23GL.jpg" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Picnic Comma Lightning</div>
+      <div class="book-by">by Lucy Parker</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c1" name="rating" value="5">
+<label class="full" for="star-c1"></label>
+<input type="checkbox" id="star-c2" name="rating" value="4">
+<label class="full" for="star-c2"></label>
+<input type="checkbox" id="star-c3" name="rating" value="3">
+<label class="full" for="star-c3"></label>
+<input type="checkbox" id="star-c4" name="rating" value="2">
+<label class="full" for="star-c4"></label>
+<input type="checkbox" id="star-c5" name="rating" value="1">
+<label class="full" for="star-c5"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>George</span> and<span> Mike</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://prodimage.images-bn.com/pimages/9780525655633_p0_v5_s1200x630.jpg" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Very Nica</div>
+      <div class="book-by">by Lucy Parker</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c1" name="rating" value="5">
+<label class="full" for="star-c1"></label>
+<input type="checkbox" id="star-c2" name="rating" value="4">
+<label class="full" for="star-c2"></label>
+<input type="checkbox" id="star-c3" name="rating" value="3">
+<label class="full" for="star-c3"></label>
+<input type="checkbox" id="star-c4" name="rating" value="2">
+<label class="full" for="star-c4"></label>
+<input type="checkbox" id="star-c5" name="rating" value="1">
+<label class="full" for="star-c5"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Samantha William</span> and<span> 2 other friends</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/71PL7BiZ5NL.jpg" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Stay And Fight</div>
+      <div class="book-by">by Lucy Parker</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c1" name="rating" value="5">
+<label class="full" for="star-c1"></label>
+<input type="checkbox" id="star-c2" name="rating" value="4">
+<label class="full" for="star-c2"></label>
+<input type="checkbox" id="star-c3" name="rating" value="3">
+<label class="full" for="star-c3"></label>
+<input type="checkbox" id="star-c4" name="rating" value="2">
+<label class="full" for="star-c4"></label>
+<input type="checkbox" id="star-c5" name="rating" value="1">
+<label class="full" for="star-c5"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Samantha William</span> and<span> Jonathan</span> like this</div>
+   </div>
+    </div>
+   </div>
+  </div>
+ </div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+</body>
+</html>
diff --git a/book-store-ui/dist/style.css b/book-store-ui/dist/style.css
new file mode 100644
index 0000000..2ac7049
--- /dev/null
+++ b/book-store-ui/dist/style.css
@@ -0,0 +1,762 @@
+@charset "UTF-8";
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
+@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
+:root {
+  --body-bg-color: #e5f4f9;
+  --body-color-light: #8b939c;
+  --body-font: "Roboto", sans-serif;
+  --page-bg-color: #f2f5f7;
+  --body-color: #3d4954;
+  --border-color: #b8bec3;
+  --placeholder: #ccd0d2;
+}
+
+* {
+  outline: none;
+  box-sizing: border-box;
+}
+
+img {
+  max-width: 100%;
+}
+
+html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='946' height='473' viewBox='0 0 1600 800'%3E%3Cpath fill='%23e436ff' d='M1102.5 734.8c2.5-1.2 24.8-8.6 25.6-7.5.5.7-3.9 23.8-4.6 24.5C1123.3 752.1 1107.5 739.5 1102.5 734.8zM1226.3 229.1c0-.1-4.9-9.4-7-14.2-.1-.3-.3-1.1-.4-1.6-.1-.4-.3-.7-.6-.9-.3-.2-.6-.1-.8.1l-13.1 12.3c0 0 0 0 0 0-.2.2-.3.5-.4.8 0 .3 0 .7.2 1 .1.1 1.4 2.5 2.1 3.6 2.4 3.7 6.5 12.1 6.5 12.2.2.3.4.5.7.6.3 0 .5-.1.7-.3 0 0 1.8-2.5 2.7-3.6 1.5-1.6 3-3.2 4.6-4.7 1.2-1.2 1.6-1.4 2.1-1.6.5-.3 1.1-.5 2.5-1.9C1226.5 230.4 1226.6 229.6 1226.3 229.1zM33 770.3C33 770.3 33 770.3 33 770.3c0-.7-.5-1.2-1.2-1.2-.1 0-.3 0-.4.1-1.6.2-14.3.1-22.2 0-.3 0-.6.1-.9.4-.2.2-.4.5-.4.9 0 .2 0 4.9.1 5.9l.4 13.6c0 .3.2.6.4.9.2.2.5.3.8.3 0 0 .1 0 .1 0 7.3-.7 14.7-.9 22-.6.3 0 .7-.1.9-.3.2-.2.4-.6.4-.9C32.9 783.3 32.9 776.2 33 770.3z'/%3E%3Cpath fill='%232ee7ff' d='M171.1 383.4c1.3-2.5 14.3-22 15.6-21.6.8.3 11.5 21.2 11.5 22.1C198.1 384.2 177.9 384 171.1 383.4zM596.4 711.8c-.1-.1-6.7-8.2-9.7-12.5-.2-.3-.5-1-.7-1.5-.2-.4-.4-.7-.7-.8-.3-.1-.6 0-.8.3L574 712c0 0 0 0 0 0-.2.2-.2.5-.2.9 0 .3.2.7.4.9.1.1 1.8 2.2 2.8 3.1 3.1 3.1 8.8 10.5 8.9 10.6.2.3.5.4.8.4.3 0 .5-.2.6-.5 0 0 1.2-2.8 2-4.1 1.1-1.9 2.3-3.7 3.5-5.5.9-1.4 1.3-1.7 1.7-2 .5-.4 1-.7 2.1-2.4C596.9 713.1 596.8 712.3 596.4 711.8zM727.5 179.9C727.5 179.9 727.5 179.9 727.5 179.9c.6.2 1.3-.2 1.4-.8 0-.1 0-.2 0-.4.2-1.4 2.8-12.6 4.5-19.5.1-.3 0-.6-.2-.8-.2-.3-.5-.4-.8-.5-.2 0-4.7-1.1-5.7-1.3l-13.4-2.7c-.3-.1-.7 0-.9.2-.2.2-.4.4-.5.6 0 0 0 .1 0 .1-.8 6.5-2.2 13.1-3.9 19.4-.1.3 0 .6.2.9.2.3.5.4.8.5C714.8 176.9 721.7 178.5 727.5 179.9zM728.5 178.1c-.1-.1-.2-.2-.4-.2C728.3 177.9 728.4 178 728.5 178.1z'/%3E%3Cg fill='%23FFF'%3E%3Cpath d='M699.6 472.7c-1.5 0-2.8-.8-3.5-2.3-.8-1.9 0-4.2 1.9-5 3.7-1.6 6.8-4.7 8.4-8.5 1.6-3.8 1.7-8.1.2-11.9-.3-.9-.8-1.8-1.2-2.8-.8-1.7-1.8-3.7-2.3-5.9-.9-4.1-.2-8.6 2-12.8 1.7-3.1 4.1-6.1 7.6-9.1 1.6-1.4 4-1.2 5.3.4 1.4 1.6 1.2 4-.4 5.3-2.8 2.5-4.7 4.7-5.9 7-1.4 2.6-1.9 5.3-1.3 7.6.3 1.4 1 2.8 1.7 4.3.5 1.1 1 2.2 1.5 3.3 2.1 5.6 2 12-.3 17.6-2.3 5.5-6.8 10.1-12.3 12.5C700.6 472.6 700.1 472.7 699.6 472.7zM740.4 421.4c1.5-.2 3 .5 3.8 1.9 1.1 1.8.4 4.2-1.4 5.3-3.7 2.1-6.4 5.6-7.6 9.5-1.2 4-.8 8.4 1.1 12.1.4.9 1 1.7 1.6 2.7 1 1.7 2.2 3.5 3 5.7 1.4 4 1.2 8.7-.6 13.2-1.4 3.4-3.5 6.6-6.8 10.1-1.5 1.6-3.9 1.7-5.5.2-1.6-1.4-1.7-3.9-.2-5.4 2.6-2.8 4.3-5.3 5.3-7.7 1.1-2.8 1.3-5.6.5-7.9-.5-1.3-1.3-2.7-2.2-4.1-.6-1-1.3-2.1-1.9-3.2-2.8-5.4-3.4-11.9-1.7-17.8 1.8-5.9 5.8-11 11.2-14C739.4 421.6 739.9 421.4 740.4 421.4zM261.3 590.9c5.7 6.8 9 15.7 9.4 22.4.5 7.3-2.4 16.4-10.2 20.4-3 1.5-6.7 2.2-11.2 2.2-7.9-.1-12.9-2.9-15.4-8.4-2.1-4.7-2.3-11.4 1.8-15.9 3.2-3.5 7.8-4.1 11.2-1.6 1.2.9 1.5 2.7.6 3.9-.9 1.2-2.7 1.5-3.9.6-1.8-1.3-3.6.6-3.8.8-2.4 2.6-2.1 7-.8 9.9 1.5 3.4 4.7 5 10.4 5.1 3.6 0 6.4-.5 8.6-1.6 4.7-2.4 7.7-8.6 7.2-15-.5-7.3-5.3-18.2-13-23.9-4.2-3.1-8.5-4.1-12.9-3.1-3.1.7-6.2 2.4-9.7 5-6.6 5.1-11.7 11.8-14.2 19-2.7 7.7-2.1 15.8 1.9 23.9.7 1.4.1 3.1-1.3 3.7-1.4.7-3.1.1-3.7-1.3-4.6-9.4-5.4-19.2-2.2-28.2 2.9-8.2 8.6-15.9 16.1-21.6 4.1-3.1 8-5.1 11.8-6 6-1.4 12 0 17.5 4C257.6 586.9 259.6 588.8 261.3 590.9z'/%3E%3Ccircle cx='1013.7' cy='153.9' r='7.1'/%3E%3Ccircle cx='1024.3' cy='132.1' r='7.1'/%3E%3Ccircle cx='1037.3' cy='148.9' r='7.1'/%3E%3Cpath d='M1508.7 297.2c-4.8-5.4-9.7-10.8-14.8-16.2 5.6-5.6 11.1-11.5 15.6-18.2 1.2-1.7.7-4.1-1-5.2-1.7-1.2-4.1-.7-5.2 1-4.2 6.2-9.1 11.6-14.5 16.9-4.8-5-9.7-10-14.7-14.9-1.5-1.5-3.9-1.5-5.3 0-1.5 1.5-1.5 3.9 0 5.3 4.9 4.8 9.7 9.8 14.5 14.8-1.1 1.1-2.3 2.2-3.5 3.2-4.1 3.8-8.4 7.8-12.4 12-1.4 1.5-1.4 3.8 0 5.3 0 0 0 0 0 0 1.5 1.4 3.9 1.4 5.3-.1 3.9-4 8.1-7.9 12.1-11.7 1.2-1.1 2.3-2.2 3.5-3.3 4.9 5.3 9.8 10.6 14.6 15.9.1.1.1.1.2.2 1.4 1.4 3.7 1.5 5.2.2C1510 301.2 1510.1 298.8 1508.7 297.2zM327.6 248.6l-.4-2.6c-1.5-11.1-2.2-23.2-2.3-37 0-5.5 0-11.5.2-18.5 0-.7 0-1.5 0-2.3 0-5 0-11.2 3.9-13.5 2.2-1.3 5.1-1 8.5.9 5.7 3.1 13.2 8.7 17.5 14.9 5.5 7.8 7.3 16.9 5 25.7-3.2 12.3-15 31-30 32.1L327.6 248.6zM332.1 179.2c-.2 0-.3 0-.4.1-.1.1-.7.5-1.1 2.7-.3 1.9-.3 4.2-.3 6.3 0 .8 0 1.7 0 2.4-.2 6.9-.2 12.8-.2 18.3.1 12.5.7 23.5 2 33.7 11-2.7 20.4-18.1 23-27.8 1.9-7.2.4-14.8-4.2-21.3l0 0C347 188.1 340 183 335 180.3 333.6 179.5 332.6 179.2 332.1 179.2zM516.3 60.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6C517.3 60.4 516.8 60.8 516.3 60.8zM506.1 70.5c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3.7 0 1.3.5 1.3 1.2.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6C506.4 70.5 506.2 70.5 506.1 70.5zM494.1 64.4c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3C494.7 64.3 494.4 64.4 494.1 64.4zM500.5 55.3c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7C500.9 55.3 500.7 55.3 500.5 55.3zM506.7 55c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6C507.4 54.8 507.1 55 506.7 55zM1029.3 382.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6C1030.3 382.4 1029.8 382.8 1029.3 382.8zM1019.1 392.5c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3.7 0 1.3.5 1.3 1.2.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6C1019.4 392.5 1019.2 392.5 1019.1 392.5zM1007.1 386.4c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3C1007.7 386.3 1007.4 386.4 1007.1 386.4zM1013.5 377.3c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7C1013.9 377.3 1013.7 377.3 1013.5 377.3zM1019.7 377c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6C1020.4 376.8 1020.1 377 1019.7 377zM1329.7 573.4c-1.4 0-2.9-.2-4.5-.7-8.4-2.7-16.6-12.7-18.7-20-.4-1.4-.7-2.9-.9-4.4-8.1 3.3-15.5 10.6-15.4 21 0 1.5-1.2 2.7-2.7 2.8 0 0 0 0 0 0-1.5 0-2.7-1.2-2.7-2.7-.1-6.7 2.4-12.9 7-18 3.6-4 8.4-7.1 13.7-8.8.5-6.5 3.1-12.9 7.4-17.4 7-7.4 18.2-8.9 27.3-10.1l.7-.1c1.5-.2 2.9.9 3.1 2.3.2 1.5-.9 2.9-2.3 3.1l-.7.1c-8.6 1.2-18.4 2.5-24 8.4-3 3.2-5 7.7-5.7 12.4 7.9-1 17.7 1.3 24.3 5.7 4.3 2.9 7.1 7.8 7.2 12.7.2 4.3-1.7 8.3-5.2 11.1C1335.2 572.4 1332.6 573.4 1329.7 573.4zM1311 546.7c.1 1.5.4 3 .8 4.4 1.7 5.8 8.7 14.2 15.1 16.3 2.8.9 5.1.5 7.2-1.1 2.7-2.1 3.2-4.8 3.1-6.6-.1-3.2-2-6.4-4.8-8.3C1326.7 547.5 1317.7 545.6 1311 546.7z'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  font-family: var(--body-font);
+  color: var(--body-color);
+  font-weight: 400;
+  margin: 0;
+}
+
+.likes, .year-book, .author, .main-menu, .profile-menu, .profile, .browse-category, .browse, .header {
+  display: flex;
+  align-items: center;
+}
+
+.book-store {
+  display: flex;
+  flex-direction: column;
+  max-width: 1400px;
+  height: 100vh;
+  background-color: var(--page-bg-color);
+  margin: 0 auto;
+  overflow: hidden;
+  box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.21);
+}
+
+.header {
+  height: 70px;
+  width: 100%;
+  background-color: #ffffff;
+  padding: 0 30px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--body-color-light);
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.search-bar {
+  position: relative;
+}
+.search-bar input {
+  height: 100%;
+  width: 100%;
+  display: block;
+  background-color: transparent;
+  border: none;
+  font-weight: 600;
+  padding: 0 10px 0 40px;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238b939c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cpath d='M21 21l-4.35-4.35'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-size: 15px;
+  background-position: 15px 50%;
+  color: var(--body-color);
+  font-family: var(--body-font);
+}
+.search-bar input::placeholder {
+  color: var(--placeholder);
+}
+
+.browse-category {
+  border-right: 1px solid var(--border-color);
+  white-space: nowrap;
+}
+.browse-category svg {
+  width: 16px;
+  margin: 2px 10px 0 8px;
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: 400;
+  margin-right: 120px;
+}
+.header-title span {
+  font-weight: 500;
+  color: var(--body-color);
+}
+
+.user-img {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  margin-right: 15px;
+}
+
+.user-profile {
+  position: relative;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.user-profile:before {
+  content: "";
+  position: absolute;
+  background-color: #f86d72;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  border: 2px solid var(--theme-bg-color);
+  right: 12px;
+  top: -3px;
+  border: 2px solid #fff;
+}
+
+.profile {
+  flex-shrink: 0;
+}
+.profile-menu {
+  border-left: 1px solid var(--border-color);
+}
+.profile svg {
+  width: 16px;
+  margin: 0 8px 0 15px;
+  flex-shrink: 0;
+}
+
+.book-slide {
+  width: 100%;
+}
+
+.book {
+  background: #fff;
+}
+
+.book-cell {
+  position: relative;
+  display: flex;
+  padding: 25px;
+  width: 40%;
+  height: 250px;
+  margin-right: 1px;
+}
+.book-cell:nth-child(1) {
+  background-color: #fbadaf;
+}
+.book-cell:nth-child(2) {
+  background-color: #a4e0eb;
+}
+.book-cell:nth-child(3) {
+  background-color: #edb9d6;
+}
+.book-cell:nth-child(4) {
+  background-color: #fdca95;
+}
+.book-cell:nth-child(5) {
+  background-color: #cbb5e2;
+}
+
+.flickity-page-dots {
+  display: none;
+}
+
+.flickity-prev-next-button .arrow {
+  fill: #d6d6d6;
+}
+
+.flickity-prev-next-button svg {
+  left: 25%;
+  top: 25%;
+  width: 50%;
+  height: 50%;
+}
+
+.flickity-prev-next-button.previous {
+  left: 15px;
+}
+.flickity-prev-next-button.next {
+  right: 15px;
+}
+
+.flickity-viewport {
+  overflow: visible;
+}
+
+.book-photo {
+  width: 180px;
+  flex-shrink: 0;
+  bottom: -35px;
+  left: 35px;
+  border-radius: 2px;
+  box-shadow: -2px 6px 19px 0px #7f818e;
+  transition: 0.3s ease;
+}
+.book-photo:hover {
+  transform: scale(1.03);
+}
+
+.book-img {
+  flex-shrink: 0;
+}
+
+.book-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.book-title {
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.book-author {
+  margin-top: 3px;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.book-content {
+  padding: 0 20px;
+  color: #ffffff;
+  overflow: hidden;
+}
+
+fieldset,
+label {
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+h1 {
+  font-size: 0.5em;
+  margin: 10px;
+}
+
+.rating {
+  border: none;
+}
+
+.rating > input {
+  display: none;
+}
+
+.rating > label:before {
+  margin-right: 5px;
+  margin-top: 10px;
+  font-size: 0.9em;
+  font-family: FontAwesome;
+  display: inline-block;
+  content: "";
+}
+
+.rating > label {
+  color: #fff;
+  float: right;
+}
+
+.rating > input:checked ~ label,
+.rating:not(:checked) > label:hover,
+.rating:not(:checked) > label:hover ~ label {
+  color: #d85d61;
+}
+
+.rating > input:checked + label:hover,
+.rating > input:checked ~ label:hover,
+.rating > label:hover ~ input:checked ~ label,
+.rating > input:checked ~ label:hover ~ label {
+  color: #d85d61;
+}
+
+.blue > input:checked ~ label,
+.blue:not(:checked) > label:hover,
+.blue:not(:checked) > label:hover ~ label {
+  color: #458997;
+}
+
+.blue > input:checked + label:hover,
+.blue > input:checked ~ label:hover,
+.blue > label:hover ~ input:checked ~ label,
+.blue > input:checked ~ label:hover ~ label {
+  color: #458997;
+}
+
+.purple > input:checked ~ label,
+.purple:not(:checked) > label:hover,
+.purple:not(:checked) > label:hover ~ label {
+  color: #a76287;
+}
+
+.purple > input:checked + label:hover,
+.purple > input:checked ~ label:hover,
+.purple > label:hover ~ input:checked ~ label,
+.purple > input:checked ~ label:hover ~ label {
+  color: #a76287;
+}
+
+.yellow > input:checked ~ label,
+.yellow:not(:checked) > label:hover,
+.yellow:not(:checked) > label:hover ~ label {
+  color: #ffad58;
+}
+
+.yellow > input:checked + label:hover,
+.yellow > input:checked ~ label:hover,
+.yellow > label:hover ~ input:checked ~ label,
+.yellow > input:checked ~ label:hover ~ label {
+  color: #ffad58;
+}
+
+.dark-purp > input:checked ~ label,
+.dark-purp:not(:checked) > label:hover,
+.dark-purp:not(:checked) > label:hover ~ label {
+  color: #905587;
+}
+
+.dark-purp > input:checked + label:hover,
+.dark-purp > input:checked ~ label:hover,
+.dark-purp > label:hover ~ input:checked ~ label,
+.dark-purp > input:checked ~ label:hover ~ label {
+  color: #905587;
+}
+
+.book-voters {
+  color: #fff;
+  vertical-align: sub;
+  font-size: 13px;
+  margin-left: 7px;
+  white-space: nowrap;
+  margin-top: 7px;
+}
+
+.book-sum {
+  margin-top: 20px;
+  font-size: 14px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.book-see {
+  margin-top: 25px;
+  text-align: center;
+  background-color: #fff;
+  color: #fbadaf;
+  font-weight: 600;
+  padding: 8px;
+  font-size: 14px;
+  width: 160px;
+  border-radius: 20px;
+}
+.book-see:hover {
+  color: #ff6e72;
+}
+.book-see.book-blue {
+  color: #a4e0eb;
+}
+.book-see.book-blue:hover {
+  color: #22cdec;
+}
+.book-see.book-pink {
+  color: #edb9d6;
+}
+.book-see.book-pink:hover {
+  color: #ff6dbe;
+}
+.book-see.book-yellow {
+  color: #fdca95;
+}
+.book-see.book-yellow:hover {
+  color: #fb9124;
+}
+.book-see.book-purple {
+  color: #cbb5e2;
+}
+.book-see.book-purple:hover {
+  color: #a764ec;
+}
+
+.main-wrapper {
+  width: 100%;
+  display: flex;
+  flex-grow: 1;
+  margin-top: 100px;
+  overflow: hidden;
+}
+
+.books-of {
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-shrink: 0;
+}
+
+.popular-books {
+  flex-grow: 1;
+  padding: 0 30px 50px;
+  overflow-y: auto;
+}
+
+.genre {
+  font-weight: 500;
+  font-size: 15px;
+}
+
+.main-menu {
+  white-space: nowrap;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #dcddde;
+  position: sticky;
+  top: 0;
+  right: 0;
+  background-color: var(--page-bg-color);
+  z-index: 2;
+}
+
+.book-types {
+  margin-left: auto;
+}
+.book-types a {
+  text-decoration: none;
+  color: var(--body-color);
+  font-size: 14px;
+}
+
+.book-type + .book-type {
+  margin-left: 20px;
+}
+
+.book-type {
+  position: relative;
+  transition: 0.2s;
+}
+.book-type.active, .book-type:hover {
+  -webkit-text-stroke: 0.3px;
+}
+.book-type.active:before, .book-type:hover:before {
+  content: "";
+  position: absolute;
+  width: 28px;
+  height: 2px;
+  bottom: -17px;
+  right: 15px;
+  background-color: #67d4ea;
+  box-shadow: 0px -1px 5px 0px #67d4ea;
+}
+.book-type:nth-child(2):before {
+  right: 12px;
+}
+.book-type:nth-child(3):before {
+  right: 8px;
+}
+.book-type:nth-child(4):before {
+  right: 6px;
+}
+.book-type:nth-child(5):before {
+  right: 20px;
+}
+
+.week {
+  padding: 0 30px;
+}
+
+.author + .author {
+  margin-top: 20px;
+}
+.author-name {
+  font-size: 14px;
+}
+.author:last-child {
+  margin-bottom: 40px;
+}
+
+.author-title {
+  padding: 0 0 20px;
+  font-weight: 500;
+  font-size: 15px;
+}
+
+.author-img {
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  margin-right: 16px;
+  object-fit: cover;
+  object-position: center;
+}
+
+.year-book-img {
+  width: 45px;
+  margin-right: 16px;
+}
+.year-book-name {
+  margin-bottom: 15px;
+  font-weight: 500;
+}
+.year-book-author {
+  font-size: 13px;
+}
+.year-book + .year-book {
+  margin-top: 20px;
+}
+
+.year-book-content {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+}
+
+.overlay {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  width: 340px;
+  flex-shrink: 0;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f2f5f7 65%, #f2f5f7 100%);
+  height: 60px;
+  margin-left: -35px;
+}
+
+.book-cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 40px;
+  grid-row-gap: 40px;
+  padding-top: 40px;
+  position: relative;
+}
+
+.book-card {
+  margin-top: 20px;
+  background-color: #fff;
+  height: 270px;
+  box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  padding: 0 0 20px 20px;
+  color: var(--body-color-light);
+}
+
+.book-card-img {
+  width: 160px;
+  margin-top: -35px;
+  border-radius: 2px;
+  box-shadow: 0px 1px 7px 2px #c7c9d3;
+  border-bottom: 1px solid #dcddde;
+  object-fit: cover;
+  margin-bottom: 20px;
+  transition: 0.3s ease;
+}
+.book-card-img:hover {
+  transform: scale(1.04);
+}
+
+.card-content {
+  color: var(--body-color);
+  padding: 30px;
+  overflow: hidden;
+  position: relative;
+}
+
+.book-name {
+  font-weight: 500;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.book-by {
+  font-size: 13px;
+  color: var(--body-color-light);
+  margin-top: 4px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.book-rate > label {
+  color: #cccccc;
+}
+
+.rate {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.book-rate > input:checked ~ label,
+.book-rate:not(:checked) > label:hover,
+.book-rate:not(:checked) > label:hover ~ label {
+  color: #ff9700;
+}
+
+.book-rate > input:checked + label:hover,
+.book-rate > input:checked ~ label:hover,
+.book-rate > label:hover ~ input:checked ~ label,
+.book-rate > input:checked ~ label:hover ~ label {
+  color: #ff9700;
+}
+
+.card-vote {
+  color: var(--body-color-light);
+}
+
+.card-sum {
+  color: var(--body-color-light);
+  font-size: 13px;
+  line-height: 1.6em;
+  -webkit-line-clamp: 4;
+  margin-top: 15px;
+}
+
+.content-wrapper {
+  display: flex;
+  border-bottom: 1px solid #ebedef;
+  position: relative;
+}
+.content-wrapper:before {
+  content: "";
+  position: absolute;
+  background-color: #8f98a9;
+  background-color: #aaaebc;
+  box-shadow: 0 -6px 0 0 #aaaebc, 0 6px 0 0 #aaaebc;
+  width: 4px;
+  height: 4px;
+  border: 0;
+  padding: 0;
+  right: 12px;
+  top: 17px;
+  border-radius: 50%;
+  margin-left: auto;
+}
+
+.like-profile {
+  margin-top: 8px;
+}
+.like-profile + .like-profile {
+  margin-left: -5px;
+}
+
+.like-img {
+  border-radius: 50%;
+  width: 28px;
+  object-fit: cover;
+  border: 2px solid #fff;
+}
+
+.like-name {
+  font-size: 13px;
+  margin-left: 15px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.like-name span {
+  font-weight: 600;
+}
+
+@media (max-width: 1103px) {
+  .book-cell {
+    width: 60%;
+  }
+}
+@media (max-width: 765px) {
+  .book-cell {
+    width: 80%;
+  }
+}
+@media (max-width: 575px) {
+  .book-cell {
+    width: 100%;
+  }
+}
+@media (max-width: 458px) {
+  .book-photo {
+    width: 180px;
+  }
+
+  .book-voters {
+    display: none;
+  }
+}
+@media (max-width: 420px) {
+  .book-see {
+    width: 120px;
+    font-size: 13px;
+  }
+
+  .book-photo {
+    width: 130px;
+  }
+
+  .main-wrapper {
+    margin-top: 50px;
+  }
+}
+@media (max-width: 360px) {
+  .rating > label:before {
+    font-size: 0.8em;
+  }
+}
+@media (max-width: 1220px) {
+  .card-vote {
+    display: none;
+  }
+}
+@media (max-width: 1085px) {
+  .book-rate > label {
+    font-size: 0.7em;
+  }
+}
+@media (max-width: 1045px) {
+  .books-of {
+    display: none;
+  }
+}
+@media (max-width: 725px) {
+  .browse-category, .search-bar {
+    display: none;
+  }
+
+  .header-title {
+    margin-right: auto;
+  }
+
+  .book-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .book-types {
+    display: none;
+  }
+}
+@media (max-width: 372px) {
+  .card-content {
+    padding: 20px;
+  }
+}
\ No newline at end of file
diff --git a/book-store-ui/license.txt b/book-store-ui/license.txt
new file mode 100644
index 0000000..4068ae2
--- /dev/null
+++ b/book-store-ui/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Aysenur Turk (https://codepen.io/TurkAysenur/pen/JjGKKrP)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/book-store-ui/src/index.html b/book-store-ui/src/index.html
new file mode 100644
index 0000000..677e5df
--- /dev/null
+++ b/book-store-ui/src/index.html
@@ -0,0 +1,525 @@
+<div class="book-store">
+ <div class="header">
+  <div class="browse">
+   <div class="browse-category">
+    Browse Category
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
+     <path d="M6 9l6 6 6-6" /></svg>
+   </div>
+   <div class="search-bar">
+    <input type="text" placeholder="Search Book" />
+   </div>
+  </div>
+  <div class="header-title">read<span>books</span></div>
+  <div class="profile">
+   <div class="user-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="user-img">
+   </div>
+   <div class="profile-menu">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
+     <path d="M3 12h18M3 6h18M3 18h18" /></svg>
+    Menu
+   </div>
+  </div>
+ </div>
+ <div class="book-slide">
+  <div class="book js-flickity" data-flickity-options='{ "wrapAround": true }'>
+   <div class="book-cell">
+    <div class="book-img">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/81WcnNQ-TBL.jpg" alt="" class="book-photo">
+    </div>
+    <div class="book-content">
+     <div class="book-title">BIG MAGIC</div>
+     <div class="book-author">by Elizabeth Gilbert</div>
+     <div class="rate">
+      <fieldset class="rating">
+       <input type="checkbox" id="star5" name="rating" value="5" />
+       <label class="full" for="star5"></label>
+       <input type="checkbox" id="star4" name="rating" value="4" />
+       <label class="full" for="star4"></label>
+       <input type="checkbox" id="star3" name="rating" value="3" />
+       <label class="full" for="star3"></label>
+       <input type="checkbox" id="star2" name="rating" value="2" />
+       <label class="full" for="star2"></label>
+       <input type="checkbox" id="star1" name="rating" value="1" />
+       <label class="full" for="star1"></label>
+      </fieldset>
+      <span class="book-voters">1.987 voters</span>
+     </div>
+     <div class="book-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+     <div class="book-see">See The Book</div>
+    </div>
+   </div>
+   <div class="book-cell">
+    <div class="book-img">
+     <img src="https://i.pinimg.com/originals/a8/b9/ff/a8b9ff74ed0f3efd97e09a7a0447f892.jpg" alt="" class="book-photo">
+    </div>
+    <div class="book-content">
+     <div class="book-title">Ten Thousand Skies Above You</div>
+     <div class="book-author">by Claudia Gray</div>
+     <div class="rate">
+      <fieldset class="rating blue">
+       <input type="checkbox" id="star6" name="rating" value="5" />
+       <label class="full1" for="star6"></label>
+       <input type="checkbox" id="star7" name="rating" value="4" />
+       <label class="full1" for="star7"></label>
+       <input type="checkbox" id="star8" name="rating" value="3" />
+       <label class="full1" for="star8"></label>
+       <input type="checkbox" id="star9" name="rating" value="2" />
+       <label class="full1" for="star9"></label>
+       <input type="checkbox" id="star10" name="rating" value="1" />
+       <label class="full1" for="star10"></label>
+      </fieldset>
+      <span class="book-voters">1.987 voters</span>
+     </div>
+     <div class="book-sum">The hunt for each splinter of Paul's soul sends Marguerite racing through a war-torn San Francisco.</div>
+     <div class="book-see book-blue">See The Book</div>
+    </div>
+   </div>
+   <div class="book-cell">
+    <div class="book-img">
+     <img src="https://www.abebooks.com/blog/wp-content/uploads/2016/08/10.jpg" alt="" class="book-photo">
+    </div>
+    <div class="book-content">
+     <div class="book-title">A Tale For The Time Being</div>
+     <div class="book-author">by Ruth Ozeki</div>
+     <div class="rate">
+      <fieldset class="rating purple">
+       <input type="checkbox" id="star11" name="rating" value="5" />
+       <label class="full" for="star11"></label>
+       <input type="checkbox" id="star12" name="rating" value="4" />
+       <label class="full" for="star12"></label>
+       <input type="checkbox" id="star13" name="rating" value="3" />
+       <label class="full" for="star13"></label>
+       <input type="checkbox" id="star14" name="rating" value="2" />
+       <label class="full" for="star14"></label>
+       <input type="checkbox" id="star15" name="rating" value="1" />
+       <label class="full" for="star15"></label>
+      </fieldset>
+      <span class="book-voters">1.987 voters</span>
+     </div>
+     <div class="book-sum">In Tokyo, sixteen-year-old Nao has decided there’s only one escape from her aching loneliness and her classmates’ bullying.</div>
+     <div class="book-see book-pink">See The Book</div>
+    </div>
+   </div>
+   <div class="book-cell">
+    <div class="book-img">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/81af+MCATTL.jpg" alt="" class="book-photo">
+    </div>
+    <div class="book-content">
+     <div class="book-title">The Great Gatsby</div>
+     <div class="book-author">by F.Scott Fitzgerald</div>
+     <div class="rate">
+      <fieldset class="rating yellow">
+       <input type="checkbox" id="star16" name="rating" value="5" />
+       <label class="full" for="star16"></label>
+       <input type="checkbox" id="star17" name="rating" value="4" />
+       <label class="full" for="star17"></label>
+       <input type="checkbox" id="star18" name="rating" value="3" />
+       <label class="full" for="star18"></label>
+       <input type="checkbox" id="star19" name="rating" value="2" />
+       <label class="full" for="star19"></label>
+       <input type="checkbox" id="star20" name="rating" value="1" />
+       <label class="full" for="star20"></label>
+      </fieldset>
+      <span class="book-voters">1.987 voters</span>
+     </div>
+     <div class="book-sum">The Great Gatsby, F. Scott Fitzgerald’s third book, stands as the supreme achievement of his career.</div>
+     <div class="book-see book-yellow">See The Book</div>
+    </div>
+   </div>
+   <div class="book-cell">
+    <div class="book-img">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/81UWB7oUZ0L.jpg" alt="" class="book-photo">
+    </div>
+    <div class="book-content">
+     <div class="book-title">After You</div>
+     <div class="book-author">by Jojo Moyes</div>
+     <div class="rate">
+      <fieldset class="rating dark-purp">
+       <input type="checkbox" id="star21" name="rating" value="5" />
+       <label class="full" for="star21"></label>
+       <input type="checkbox" id="star22" name="rating" value="4" />
+       <label class="full" for="star22"></label>
+       <input type="checkbox" id="star23" name="rating" value="3" />
+       <label class="full" for="star23"></label>
+       <input type="checkbox" id="star24" name="rating" value="2" />
+       <label class="full" for="star24"></label>
+       <input type="checkbox" id="star25" name="rating" value="1" />
+       <label class="full" for="star25"></label>
+      </fieldset>
+      <span class="book-voters">1.987 voters</span>
+     </div>
+     <div class="book-sum">Louisa Clark is no longer just an ordinary girl living an ordinary life. After the transformative six months spent.</div>
+     <div class="book-see book-purple">See The Book</div>
+    </div>
+   </div>
+  </div>
+ </div>
+ <div class="main-wrapper">
+  <div class="books-of">
+   <div class="week">
+    <div class="author-title">Author of the week</div>
+    <div class="author">
+     <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="author-img">
+     <div class="author-name">Sebastian Jeremy</div>
+    </div>
+    <div class="author">
+     <img src="https://images.unsplash.com/photo-1586297098710-0382a496c814?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80" alt="" class="author-img">
+     <div class="author-name">Jonathan Doe</div>
+    </div>
+    <div class="author">
+     <img src="https://images.unsplash.com/photo-1573140247632-f8fd74997d5c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="author-img">
+     <div class="author-name">Angeline Summer</div>
+    </div>
+    <div class="author">
+     <img src="https://pbs.twimg.com/profile_images/737221709267374081/sdwta9Oh.jpg" alt="" class="author-img">
+     <div class="author-name">Noah Jones</div>
+    </div>
+    <div class="author">
+     <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="author-img">
+     <div class="author-name">Tommy Adam</div>
+    </div>
+    <div class="author">
+     <img src="https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="author-img">
+     <div class="author-name">Ian Cassandra</div>
+    </div>
+   </div>
+   <div class="week year">
+    <div class="author-title">Books of the year</div>
+    <div class="year-book">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/A1kNdYXw0GL.jpg" alt="" class="year-book-img">
+     <div class="year-book-content">
+      <div class="year-book-name">Disappearing Earth</div>
+      <div class="year-book-author">by Julia Phillips</div>
+     </div>
+    </div>
+    <div class="year-book">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/81eI0ExR+VL.jpg" alt="" class="year-book-img">
+     <div class="year-book-content">
+      <div class="year-book-name">Lost Children Archive</div>
+      <div class="year-book-author">by Valeria Luiselli</div>
+     </div>
+    </div>
+    <div class="year-book">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/81OF9eJDA4L.jpg" alt="" class="year-book-img">
+     <div class="year-book-content">
+      <div class="year-book-name">Phantoms: A Thriller </div>
+      <div class="year-book-author">by Dean Koontz</div>
+     </div>
+    </div>
+    <div class="year-book">
+     <img src="https://m.media-amazon.com/images/I/515FWPyZ-5L.jpg" alt="" class="year-book-img">
+     <div class="year-book-content">
+      <div class="year-book-name">Midnight in Chernobyl</div>
+      <div class="year-book-author">by Adam Higginbotham</div>
+     </div>
+    </div>
+    <div class="year-book">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/91dBtgERNUL.jpg" alt="" class="year-book-img">
+     <div class="year-book-content">
+      <div class="year-book-name">10 Minutes 38 Seconds</div>
+      <div class="year-book-author">by Elif Shafak</div>
+     </div>
+    </div>
+   </div>
+   <div class="overlay"></div>
+  </div>
+  <div class="popular-books">
+   <div class="main-menu">
+    <div class="genre">Popular by Genre</div>
+    <div class="book-types">
+     <a href="#" class="book-type active"> All Genres</a>
+     <a href="#" class="book-type"> Business</a>
+     <a href="#" class="book-type"> Science</a>
+     <a href="#" class="book-type"> Fiction</a>
+     <a href="#" class="book-type"> Philosophy</a>
+     <a href="#" class="book-type"> Biography</a>
+    </div>
+   </div>
+   <div class="book-cards">
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F6%2F2019%2F07%2Fchances-are-1-2000.jpg&q=85" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Changes Are</div>
+      <div class="book-by">by Richard Russo</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c1" name="rating" value="5">
+<label class="full" for="star-c1"></label>
+<input type="checkbox" id="star-c2" name="rating" value="4">
+<label class="full" for="star-c2"></label>
+<input type="checkbox" id="star-c3" name="rating" value="3">
+<label class="full" for="star-c3"></label>
+<input type="checkbox" id="star-c4" name="rating" value="2">
+<label class="full" for="star-c4"></label>
+<input type="checkbox" id="star-c5" name="rating" value="1">
+<label class="full" for="star-c5"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Samantha William</span> and<span> 2 other friends</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/7167iiDUeAL.jpg" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Dominicana</div>
+      <div class="book-by">by Angie Cruz</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c6" name="rating" value="5">
+<label class="full" for="star-c6"></label>
+<input type="checkbox" id="star-c7" name="rating" value="4">
+<label class="full" for="star-c7"></label>
+<input type="checkbox" id="star-c8" name="rating" value="3">
+<label class="full" for="star-c8"></label>
+<input type="checkbox" id="star-c9" name="rating" value="2">
+<label class="full" for="star-c9"></label>
+<input type="checkbox" id="star-c10" name="rating" value="1">
+<label class="full" for="star-c10"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Kimberly Jones</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://assets.fontsinuse.com/static/use-media-items/95/94294/full-2000x3056/5d56c6b1/cg%201.jpeg?resolution=0" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">The Travellers</div>
+      <div class="book-by">by Regina Porter</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c11" name="rating" value="5">
+<label class="full" for="star-c11"></label>
+<input type="checkbox" id="star-c12" name="rating" value="4">
+<label class="full" for="star-c12"></label>
+<input type="checkbox" id="star-c13" name="rating" value="3">
+<label class="full" for="star-c13"></label>
+<input type="checkbox" id="star-c14" name="rating" value="2">
+<label class="full" for="star-c14"></label>
+<input type="checkbox" id="star-c15" name="rating" value="1">
+<label class="full" for="star-c15"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Adam</span> and<span> Kimberly</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/91M4E+SURUL.jpg" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Afternoon Of A Faun</div>
+      <div class="book-by">by James Lasdun</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c16" name="rating" value="5">
+<label class="full" for="star-c16"></label>
+<input type="checkbox" id="star-c17" name="rating" value="4">
+<label class="full" for="star-c17"></label>
+<input type="checkbox" id="star-18" name="rating" value="3">
+<label class="full" for="star-c18"></label>
+<input type="checkbox" id="star-c19" name="rating" value="2">
+<label class="full" for="star-c19"></label>
+<input type="checkbox" id="star-c20" name="rating" value="1">
+<label class="full" for="star-c20"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Samantha William</span> and<span> 2 other friends</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/61OTY2-4anL.jpg" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Flash Count Diary</div>
+      <div class="book-by">by Darcey Steinke</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c21" name="rating" value="5">
+<label class="full" for="star-c21"></label>
+<input type="checkbox" id="star-c22" name="rating" value="4">
+<label class="full" for="star-c22"></label>
+<input type="checkbox" id="star-c23" name="rating" value="3">
+<label class="full" for="star-c23"></label>
+<input type="checkbox" id="star-c24" name="rating" value="2">
+<label class="full" for="star-c24"></label>
+<input type="checkbox" id="star-c25" name="rating" value="1">
+<label class="full" for="star-c25"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Angelina Stone</span> and<span> 2 other friends</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/61Vc+xM23GL.jpg" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Picnic Comma Lightning</div>
+      <div class="book-by">by Lucy Parker</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c1" name="rating" value="5">
+<label class="full" for="star-c1"></label>
+<input type="checkbox" id="star-c2" name="rating" value="4">
+<label class="full" for="star-c2"></label>
+<input type="checkbox" id="star-c3" name="rating" value="3">
+<label class="full" for="star-c3"></label>
+<input type="checkbox" id="star-c4" name="rating" value="2">
+<label class="full" for="star-c4"></label>
+<input type="checkbox" id="star-c5" name="rating" value="1">
+<label class="full" for="star-c5"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>George</span> and<span> Mike</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://prodimage.images-bn.com/pimages/9780525655633_p0_v5_s1200x630.jpg" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Very Nica</div>
+      <div class="book-by">by Lucy Parker</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c1" name="rating" value="5">
+<label class="full" for="star-c1"></label>
+<input type="checkbox" id="star-c2" name="rating" value="4">
+<label class="full" for="star-c2"></label>
+<input type="checkbox" id="star-c3" name="rating" value="3">
+<label class="full" for="star-c3"></label>
+<input type="checkbox" id="star-c4" name="rating" value="2">
+<label class="full" for="star-c4"></label>
+<input type="checkbox" id="star-c5" name="rating" value="1">
+<label class="full" for="star-c5"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Samantha William</span> and<span> 2 other friends</span> like this</div>
+   </div>
+    </div>
+    <div class="book-card">
+     <div class="content-wrapper">
+     <img src="https://images-na.ssl-images-amazon.com/images/I/71PL7BiZ5NL.jpg" alt="" class="book-card-img">
+     <div class="card-content">
+     <div class="book-name">Stay And Fight</div>
+      <div class="book-by">by Lucy Parker</div>
+      <div class="rate">
+<fieldset class="rating book-rate">
+<input type="checkbox" id="star-c1" name="rating" value="5">
+<label class="full" for="star-c1"></label>
+<input type="checkbox" id="star-c2" name="rating" value="4">
+<label class="full" for="star-c2"></label>
+<input type="checkbox" id="star-c3" name="rating" value="3">
+<label class="full" for="star-c3"></label>
+<input type="checkbox" id="star-c4" name="rating" value="2">
+<label class="full" for="star-c4"></label>
+<input type="checkbox" id="star-c5" name="rating" value="1">
+<label class="full" for="star-c5"></label>
+</fieldset>
+<span class="book-voters card-vote">1.987 voters</span>
+</div>
+       <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
+      </div>
+    </div>
+     <div class="likes">
+     <div class="like-profile">
+    <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
+   </div>
+     <div class="like-profile">
+    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
+   </div>
+     <div class="like-name"><span>Samantha William</span> and<span> Jonathan</span> like this</div>
+   </div>
+    </div>
+   </div>
+  </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/book-store-ui/src/style.scss b/book-store-ui/src/style.scss
new file mode 100644
index 0000000..280b1ee
--- /dev/null
+++ b/book-store-ui/src/style.scss
@@ -0,0 +1,787 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
+
+@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
+
+:root {
+ --body-bg-color: #e5f4f9;
+ --body-color-light: #8b939c;
+ --body-font: "Roboto", sans-serif;
+ --page-bg-color: #f2f5f7;
+ --body-color: #3d4954;
+ --border-color: #b8bec3;
+ --placeholder: #ccd0d2;
+}
+
+* {
+ outline: none;
+ box-sizing: border-box;
+}
+
+img {
+ max-width: 100%;
+}
+
+html {
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+}
+
+body {
+background-color: #fff;
+background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='946' height='473' viewBox='0 0 1600 800'%3E%3Cpath fill='%23e436ff' d='M1102.5 734.8c2.5-1.2 24.8-8.6 25.6-7.5.5.7-3.9 23.8-4.6 24.5C1123.3 752.1 1107.5 739.5 1102.5 734.8zM1226.3 229.1c0-.1-4.9-9.4-7-14.2-.1-.3-.3-1.1-.4-1.6-.1-.4-.3-.7-.6-.9-.3-.2-.6-.1-.8.1l-13.1 12.3c0 0 0 0 0 0-.2.2-.3.5-.4.8 0 .3 0 .7.2 1 .1.1 1.4 2.5 2.1 3.6 2.4 3.7 6.5 12.1 6.5 12.2.2.3.4.5.7.6.3 0 .5-.1.7-.3 0 0 1.8-2.5 2.7-3.6 1.5-1.6 3-3.2 4.6-4.7 1.2-1.2 1.6-1.4 2.1-1.6.5-.3 1.1-.5 2.5-1.9C1226.5 230.4 1226.6 229.6 1226.3 229.1zM33 770.3C33 770.3 33 770.3 33 770.3c0-.7-.5-1.2-1.2-1.2-.1 0-.3 0-.4.1-1.6.2-14.3.1-22.2 0-.3 0-.6.1-.9.4-.2.2-.4.5-.4.9 0 .2 0 4.9.1 5.9l.4 13.6c0 .3.2.6.4.9.2.2.5.3.8.3 0 0 .1 0 .1 0 7.3-.7 14.7-.9 22-.6.3 0 .7-.1.9-.3.2-.2.4-.6.4-.9C32.9 783.3 32.9 776.2 33 770.3z'/%3E%3Cpath fill='%232ee7ff' d='M171.1 383.4c1.3-2.5 14.3-22 15.6-21.6.8.3 11.5 21.2 11.5 22.1C198.1 384.2 177.9 384 171.1 383.4zM596.4 711.8c-.1-.1-6.7-8.2-9.7-12.5-.2-.3-.5-1-.7-1.5-.2-.4-.4-.7-.7-.8-.3-.1-.6 0-.8.3L574 712c0 0 0 0 0 0-.2.2-.2.5-.2.9 0 .3.2.7.4.9.1.1 1.8 2.2 2.8 3.1 3.1 3.1 8.8 10.5 8.9 10.6.2.3.5.4.8.4.3 0 .5-.2.6-.5 0 0 1.2-2.8 2-4.1 1.1-1.9 2.3-3.7 3.5-5.5.9-1.4 1.3-1.7 1.7-2 .5-.4 1-.7 2.1-2.4C596.9 713.1 596.8 712.3 596.4 711.8zM727.5 179.9C727.5 179.9 727.5 179.9 727.5 179.9c.6.2 1.3-.2 1.4-.8 0-.1 0-.2 0-.4.2-1.4 2.8-12.6 4.5-19.5.1-.3 0-.6-.2-.8-.2-.3-.5-.4-.8-.5-.2 0-4.7-1.1-5.7-1.3l-13.4-2.7c-.3-.1-.7 0-.9.2-.2.2-.4.4-.5.6 0 0 0 .1 0 .1-.8 6.5-2.2 13.1-3.9 19.4-.1.3 0 .6.2.9.2.3.5.4.8.5C714.8 176.9 721.7 178.5 727.5 179.9zM728.5 178.1c-.1-.1-.2-.2-.4-.2C728.3 177.9 728.4 178 728.5 178.1z'/%3E%3Cg fill='%23FFF'%3E%3Cpath d='M699.6 472.7c-1.5 0-2.8-.8-3.5-2.3-.8-1.9 0-4.2 1.9-5 3.7-1.6 6.8-4.7 8.4-8.5 1.6-3.8 1.7-8.1.2-11.9-.3-.9-.8-1.8-1.2-2.8-.8-1.7-1.8-3.7-2.3-5.9-.9-4.1-.2-8.6 2-12.8 1.7-3.1 4.1-6.1 7.6-9.1 1.6-1.4 4-1.2 5.3.4 1.4 1.6 1.2 4-.4 5.3-2.8 2.5-4.7 4.7-5.9 7-1.4 2.6-1.9 5.3-1.3 7.6.3 1.4 1 2.8 1.7 4.3.5 1.1 1 2.2 1.5 3.3 2.1 5.6 2 12-.3 17.6-2.3 5.5-6.8 10.1-12.3 12.5C700.6 472.6 700.1 472.7 699.6 472.7zM740.4 421.4c1.5-.2 3 .5 3.8 1.9 1.1 1.8.4 4.2-1.4 5.3-3.7 2.1-6.4 5.6-7.6 9.5-1.2 4-.8 8.4 1.1 12.1.4.9 1 1.7 1.6 2.7 1 1.7 2.2 3.5 3 5.7 1.4 4 1.2 8.7-.6 13.2-1.4 3.4-3.5 6.6-6.8 10.1-1.5 1.6-3.9 1.7-5.5.2-1.6-1.4-1.7-3.9-.2-5.4 2.6-2.8 4.3-5.3 5.3-7.7 1.1-2.8 1.3-5.6.5-7.9-.5-1.3-1.3-2.7-2.2-4.1-.6-1-1.3-2.1-1.9-3.2-2.8-5.4-3.4-11.9-1.7-17.8 1.8-5.9 5.8-11 11.2-14C739.4 421.6 739.9 421.4 740.4 421.4zM261.3 590.9c5.7 6.8 9 15.7 9.4 22.4.5 7.3-2.4 16.4-10.2 20.4-3 1.5-6.7 2.2-11.2 2.2-7.9-.1-12.9-2.9-15.4-8.4-2.1-4.7-2.3-11.4 1.8-15.9 3.2-3.5 7.8-4.1 11.2-1.6 1.2.9 1.5 2.7.6 3.9-.9 1.2-2.7 1.5-3.9.6-1.8-1.3-3.6.6-3.8.8-2.4 2.6-2.1 7-.8 9.9 1.5 3.4 4.7 5 10.4 5.1 3.6 0 6.4-.5 8.6-1.6 4.7-2.4 7.7-8.6 7.2-15-.5-7.3-5.3-18.2-13-23.9-4.2-3.1-8.5-4.1-12.9-3.1-3.1.7-6.2 2.4-9.7 5-6.6 5.1-11.7 11.8-14.2 19-2.7 7.7-2.1 15.8 1.9 23.9.7 1.4.1 3.1-1.3 3.7-1.4.7-3.1.1-3.7-1.3-4.6-9.4-5.4-19.2-2.2-28.2 2.9-8.2 8.6-15.9 16.1-21.6 4.1-3.1 8-5.1 11.8-6 6-1.4 12 0 17.5 4C257.6 586.9 259.6 588.8 261.3 590.9z'/%3E%3Ccircle cx='1013.7' cy='153.9' r='7.1'/%3E%3Ccircle cx='1024.3' cy='132.1' r='7.1'/%3E%3Ccircle cx='1037.3' cy='148.9' r='7.1'/%3E%3Cpath d='M1508.7 297.2c-4.8-5.4-9.7-10.8-14.8-16.2 5.6-5.6 11.1-11.5 15.6-18.2 1.2-1.7.7-4.1-1-5.2-1.7-1.2-4.1-.7-5.2 1-4.2 6.2-9.1 11.6-14.5 16.9-4.8-5-9.7-10-14.7-14.9-1.5-1.5-3.9-1.5-5.3 0-1.5 1.5-1.5 3.9 0 5.3 4.9 4.8 9.7 9.8 14.5 14.8-1.1 1.1-2.3 2.2-3.5 3.2-4.1 3.8-8.4 7.8-12.4 12-1.4 1.5-1.4 3.8 0 5.3 0 0 0 0 0 0 1.5 1.4 3.9 1.4 5.3-.1 3.9-4 8.1-7.9 12.1-11.7 1.2-1.1 2.3-2.2 3.5-3.3 4.9 5.3 9.8 10.6 14.6 15.9.1.1.1.1.2.2 1.4 1.4 3.7 1.5 5.2.2C1510 301.2 1510.1 298.8 1508.7 297.2zM327.6 248.6l-.4-2.6c-1.5-11.1-2.2-23.2-2.3-37 0-5.5 0-11.5.2-18.5 0-.7 0-1.5 0-2.3 0-5 0-11.2 3.9-13.5 2.2-1.3 5.1-1 8.5.9 5.7 3.1 13.2 8.7 17.5 14.9 5.5 7.8 7.3 16.9 5 25.7-3.2 12.3-15 31-30 32.1L327.6 248.6zM332.1 179.2c-.2 0-.3 0-.4.1-.1.1-.7.5-1.1 2.7-.3 1.9-.3 4.2-.3 6.3 0 .8 0 1.7 0 2.4-.2 6.9-.2 12.8-.2 18.3.1 12.5.7 23.5 2 33.7 11-2.7 20.4-18.1 23-27.8 1.9-7.2.4-14.8-4.2-21.3l0 0C347 188.1 340 183 335 180.3 333.6 179.5 332.6 179.2 332.1 179.2zM516.3 60.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6C517.3 60.4 516.8 60.8 516.3 60.8zM506.1 70.5c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3.7 0 1.3.5 1.3 1.2.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6C506.4 70.5 506.2 70.5 506.1 70.5zM494.1 64.4c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3C494.7 64.3 494.4 64.4 494.1 64.4zM500.5 55.3c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7C500.9 55.3 500.7 55.3 500.5 55.3zM506.7 55c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6C507.4 54.8 507.1 55 506.7 55zM1029.3 382.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6C1030.3 382.4 1029.8 382.8 1029.3 382.8zM1019.1 392.5c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3.7 0 1.3.5 1.3 1.2.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6C1019.4 392.5 1019.2 392.5 1019.1 392.5zM1007.1 386.4c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3C1007.7 386.3 1007.4 386.4 1007.1 386.4zM1013.5 377.3c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7C1013.9 377.3 1013.7 377.3 1013.5 377.3zM1019.7 377c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6C1020.4 376.8 1020.1 377 1019.7 377zM1329.7 573.4c-1.4 0-2.9-.2-4.5-.7-8.4-2.7-16.6-12.7-18.7-20-.4-1.4-.7-2.9-.9-4.4-8.1 3.3-15.5 10.6-15.4 21 0 1.5-1.2 2.7-2.7 2.8 0 0 0 0 0 0-1.5 0-2.7-1.2-2.7-2.7-.1-6.7 2.4-12.9 7-18 3.6-4 8.4-7.1 13.7-8.8.5-6.5 3.1-12.9 7.4-17.4 7-7.4 18.2-8.9 27.3-10.1l.7-.1c1.5-.2 2.9.9 3.1 2.3.2 1.5-.9 2.9-2.3 3.1l-.7.1c-8.6 1.2-18.4 2.5-24 8.4-3 3.2-5 7.7-5.7 12.4 7.9-1 17.7 1.3 24.3 5.7 4.3 2.9 7.1 7.8 7.2 12.7.2 4.3-1.7 8.3-5.2 11.1C1335.2 572.4 1332.6 573.4 1329.7 573.4zM1311 546.7c.1 1.5.4 3 .8 4.4 1.7 5.8 8.7 14.2 15.1 16.3 2.8.9 5.1.5 7.2-1.1 2.7-2.1 3.2-4.8 3.1-6.6-.1-3.2-2-6.4-4.8-8.3C1326.7 547.5 1317.7 545.6 1311 546.7z'/%3E%3C/g%3E%3C/svg%3E");
+background-attachment: fixed;
+ font-family: var(--body-font);
+ color: var(--body-color);
+ font-weight: 400;
+ margin: 0;
+}
+
+%display {
+ display: flex;
+ align-items: center;
+}
+
+.book-store {
+ display: flex;
+ flex-direction: column;
+ max-width: 1400px;
+ height: 100vh;
+ background-color: var(--page-bg-color);
+ margin: 0 auto;
+ overflow: hidden;
+ box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.21);
+}
+
+.header {
+ @extend %display;
+ height: 70px;
+ width: 100%;
+ background-color: #ffffff;
+ padding: 0 30px;
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--body-color-light);
+ justify-content: space-between;
+ flex-shrink: 0;
+}
+
+.search-bar {
+ position: relative;
+ input {
+  height: 100%;
+  width: 100%;
+  display: block;
+  background-color: transparent;
+  border: none;
+  font-weight: 600;
+  padding: 0 10px 0 40px;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238b939c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cpath d='M21 21l-4.35-4.35'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-size: 15px;
+  background-position: 15px 50%;
+  color: var(--body-color);
+  font-family: var(--body-font);
+  &::placeholder {
+   color: var(--placeholder);
+  }
+ }
+}
+
+.browse {
+ @extend %display;
+ &-category {
+  @extend %display;
+  border-right: 1px solid var(--border-color);
+  white-space: nowrap;
+  svg {
+   width: 16px;
+   margin: 2px 10px 0 8px;
+  }
+ }
+}
+
+.header-title {
+ font-size: 16px;
+ font-weight: 400;
+ margin-right: 120px;
+ span {
+  font-weight: 500;
+  color: var(--body-color);
+ }
+}
+
+.user-img {
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ margin-right: 15px;
+}
+
+.user-profile {
+ position: relative;
+ cursor: pointer;
+ flex-shrink: 0;
+ &:before {
+  content: "";
+  position: absolute;
+  background-color: #f86d72;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  border: 2px solid var(--theme-bg-color);
+  right: 12px;
+  top: -3px;
+  border: 2px solid #fff;
+ }
+}
+
+.profile {
+ @extend %display;
+ flex-shrink: 0;
+ &-menu {
+  @extend %display;
+  border-left: 1px solid var(--border-color);
+ }
+ svg {
+  width: 16px;
+  margin: 0 8px 0 15px;
+  flex-shrink: 0;
+ }
+}
+
+.book-slide {
+ width: 100%;
+}
+
+.book {
+ background: #fff;
+}
+
+.book-cell {
+ position: relative;
+ display: flex;
+ padding: 25px;
+ width: 40%;
+ height: 250px;
+ margin-right: 1px;
+ &:nth-child(1) {
+  background-color: #fbadaf;
+ }
+ &:nth-child(2) {
+  background-color: #a4e0eb;
+ }
+ &:nth-child(3) {
+  background-color: #edb9d6;
+ }
+ &:nth-child(4) {
+  background-color: #fdca95;
+ }
+ &:nth-child(5) {
+  background-color: #cbb5e2;
+ }
+}
+
+.flickity-page-dots {
+ display: none;
+}
+
+.flickity-prev-next-button .arrow {
+ fill: #d6d6d6;
+}
+
+.flickity-prev-next-button svg {
+ left: 25%;
+ top: 25%;
+ width: 50%;
+ height: 50%;
+}
+
+.flickity-prev-next-button {
+ &.previous {
+  left: 15px;
+ }
+ &.next {
+  right: 15px;
+ }
+}
+
+.flickity-viewport {
+ overflow: visible;
+}
+
+.book-photo {
+ width: 180px;
+ flex-shrink: 0;
+ bottom: -35px;
+ left: 35px;
+ border-radius: 2px;
+ box-shadow: -2px 6px 19px 0px #7f818e;
+ transition: .3s ease;
+ &:hover {
+  transform: scale(1.03);
+ }
+}
+
+.book-img {
+ flex-shrink: 0;
+}
+
+.book-title {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.book-title {
+ color: #ffffff;
+ font-weight: 600;
+}
+
+.book-author {
+ margin-top: 3px;
+ font-size: 14px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.book-content {
+ padding: 0 20px;
+ color: #ffffff;
+ overflow: hidden;
+}
+
+fieldset,
+label {
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+h1 {
+ font-size: 0.5em;
+ margin: 10px;
+}
+.rating {
+ border: none;
+}
+
+.rating > input {
+ display: none;
+}
+.rating > label:before {
+ margin-right: 5px;
+ margin-top: 10px;
+ font-size: 0.9em;
+ font-family: FontAwesome;
+ display: inline-block;
+ content: "\f005";
+}
+
+.rating > label {
+ color: #fff;
+ float: right;
+}
+
+.rating > input:checked ~ label,
+.rating:not(:checked) > label:hover,
+.rating:not(:checked) > label:hover ~ label {
+ color: #d85d61;
+}
+.rating > input:checked + label:hover,
+.rating > input:checked ~ label:hover,
+.rating > label:hover ~ input:checked ~ label,
+.rating > input:checked ~ label:hover ~ label {
+ color: #d85d61;
+}
+
+.blue > input:checked ~ label,
+.blue:not(:checked) > label:hover,
+.blue:not(:checked) > label:hover ~ label {
+ color: #458997;
+}
+.blue > input:checked + label:hover,
+.blue > input:checked ~ label:hover,
+.blue > label:hover ~ input:checked ~ label,
+.blue > input:checked ~ label:hover ~ label {
+ color: #458997;
+}
+
+.purple > input:checked ~ label,
+.purple:not(:checked) > label:hover,
+.purple:not(:checked) > label:hover ~ label {
+ color: #a76287;
+}
+.purple > input:checked + label:hover,
+.purple > input:checked ~ label:hover,
+.purple > label:hover ~ input:checked ~ label,
+.purple > input:checked ~ label:hover ~ label {
+ color: #a76287;
+}
+
+.yellow > input:checked ~ label,
+.yellow:not(:checked) > label:hover,
+.yellow:not(:checked) > label:hover ~ label {
+ color: #ffad58;
+}
+.yellow > input:checked + label:hover,
+.yellow > input:checked ~ label:hover,
+.yellow > label:hover ~ input:checked ~ label,
+.yellow > input:checked ~ label:hover ~ label {
+ color: #ffad58;
+}
+
+.dark-purp > input:checked ~ label,
+.dark-purp:not(:checked) > label:hover,
+.dark-purp:not(:checked) > label:hover ~ label {
+ color: #905587;
+}
+.dark-purp > input:checked + label:hover,
+.dark-purp > input:checked ~ label:hover,
+.dark-purp > label:hover ~ input:checked ~ label,
+.dark-purp > input:checked ~ label:hover ~ label {
+ color: #905587;
+}
+
+.book-voters {
+ color: #fff;
+ vertical-align: sub;
+ font-size: 13px;
+ margin-left: 7px;
+ white-space: nowrap;
+ margin-top: 7px;
+}
+
+.book-sum {
+ margin-top: 20px;
+ font-size: 14px;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+}
+
+.book-see {
+ margin-top: 25px;
+ text-align: center;
+ background-color: #fff;
+ color: #fbadaf;
+ font-weight: 600;
+ padding: 8px;
+ font-size: 14px;
+ width: 160px;
+ border-radius: 20px;
+ &:hover {
+  color: #ff6e72;
+ }
+ &.book-blue {
+  color: #a4e0eb;
+  &:hover {
+   color: #22cdec;
+  }
+ }
+ &.book-pink {
+  color: #edb9d6;
+  &:hover {
+   color: #ff6dbe;
+  }
+ }
+ &.book-yellow {
+  color: #fdca95;
+  &:hover {
+   color: #fb9124;
+  }
+ }
+ &.book-purple {
+  color: #cbb5e2;
+  &:hover {
+   color: #a764ec;
+  }
+ }
+}
+
+.main-wrapper {
+ width: 100%;
+ display: flex;
+ flex-grow: 1;
+ margin-top: 100px;
+ overflow: hidden;
+}
+
+.books-of {
+ width: 320px;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ overflow-x: hidden;
+ flex-shrink: 0;
+}
+
+.popular-books {
+ flex-grow: 1;
+ padding: 0 30px 50px;
+ overflow-y: auto;
+}
+
+.genre {
+ font-weight: 500;
+ font-size: 15px;
+}
+
+.main-menu {
+ @extend %display;
+ white-space: nowrap;
+ padding-bottom: 15px;
+ border-bottom: 1px solid #dcddde;
+ position: sticky;
+ top: 0;
+ right: 0;
+ background-color: var(--page-bg-color);
+ z-index: 2;
+}
+
+.book-types {
+ margin-left: auto;
+ a {
+  text-decoration: none;
+  color: var(--body-color);
+  font-size: 14px;
+ }
+}
+
+.book-type + .book-type {
+ margin-left: 20px;
+}
+
+.book-type {
+ position: relative;
+ transition: 0.2s;
+ &.active,
+ &:hover {
+  -webkit-text-stroke: .3px;
+  &:before {
+   content: "";
+   position: absolute;
+   width: 28px;
+   height: 2px;
+   bottom: -17px;
+   right: 15px;
+   background-color: #67d4ea;
+   box-shadow: 0px -1px 5px 0px #67d4ea;
+  }
+ }
+ &:nth-child(2):before {
+  right: 12px;
+ }
+ &:nth-child(3):before {
+  right: 8px;
+ }
+ &:nth-child(4):before {
+  right: 6px;
+ }
+ &:nth-child(5):before {
+  right: 20px;
+ }
+}
+
+.week {
+ padding: 0 30px;
+}
+
+.author {
+ @extend %display;
+ & + & {
+  margin-top: 20px;
+ }
+ &-name {
+  font-size: 14px;
+ }
+ &:last-child {
+  margin-bottom: 40px;
+ }
+}
+
+.author-title {
+ padding: 0 0 20px;
+ font-weight: 500;
+ font-size: 15px;
+}
+
+.author-img {
+ border-radius: 50%;
+ width: 30px;
+ height: 30px;
+ margin-right: 16px;
+ object-fit: cover;
+ object-position: center;
+}
+
+.year-book {
+ @extend %display;
+ &-img {
+  width: 45px;
+  margin-right: 16px;
+ }
+ &-name {
+  margin-bottom: 15px;
+  font-weight: 500;
+ }
+ &-author {
+  font-size: 13px;
+ }
+ & + & {
+  margin-top: 20px;
+ }
+}
+
+.year-book-content {
+ display: flex;
+ flex-direction: column;
+ font-size: 14px;
+}
+
+.overlay {
+ position: sticky;
+ bottom: 0;
+ left: 0;
+ width: 340px;
+ flex-shrink: 0;
+ background: linear-gradient(
+  to bottom,
+  rgba(255, 255, 255, 0) 0%,
+  #f2f5f7 65%,
+  #f2f5f7 100%
+ );
+ height: 60px;
+ margin-left: -35px;
+}
+
+.book-cards {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-column-gap: 40px;
+ grid-row-gap: 40px;
+ padding-top: 40px;
+ position: relative;
+}
+
+.book-card {
+ margin-top: 20px;
+ background-color: #fff;
+ height: 270px;
+ box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.1);
+ border-radius: 4px;
+ display: flex;
+ flex-direction: column;
+ cursor: pointer;
+ padding: 0 0 20px 20px;
+ color: var(--body-color-light);
+}
+
+.book-card-img {
+ width: 160px;
+ margin-top: -35px;
+ border-radius: 2px;
+ box-shadow: 0px 1px 7px 2px #c7c9d3;
+ border-bottom: 1px solid #dcddde;
+ object-fit: cover;
+ margin-bottom: 20px;
+ transition: .3s ease;
+ &:hover {
+  transform: scale(1.04);
+ }
+}
+
+
+.card-content {
+ color: var(--body-color);
+ padding: 30px;
+ overflow: hidden;
+ position: relative;
+}
+
+.book-name {
+ font-weight: 500;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.book-by {
+ font-size: 13px;
+ color: var(--body-color-light);
+ margin-top: 4px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.book-rate > label {
+ color: #cccccc;
+}
+
+.rate {
+ display: inline-block;
+ white-space: nowrap;
+}
+
+.book-rate > input:checked ~ label,
+.book-rate:not(:checked) > label:hover,
+.book-rate:not(:checked) > label:hover ~ label {
+ color: #ff9700;
+}
+.book-rate > input:checked + label:hover,
+.book-rate > input:checked ~ label:hover,
+.book-rate > label:hover ~ input:checked ~ label,
+.book-rate > input:checked ~ label:hover ~ label {
+ color: #ff9700;
+}
+
+.card-vote {
+ color: var(--body-color-light);
+}
+
+.card-sum {
+ color: var(--body-color-light);
+ font-size: 13px;
+ line-height: 1.6em;
+ -webkit-line-clamp: 4;
+ margin-top: 15px;
+}
+
+.content-wrapper {
+ display: flex;
+ border-bottom: 1px solid #ebedef;
+ position: relative;
+ &:before {
+  content: "";
+  position: absolute;
+  background-color: #8f98a9;
+        background-color: #aaaebc;
+    box-shadow: 0 -6px 0 0 #aaaebc, 0 6px 0 0 #aaaebc;
+    width: 4px;
+    height: 4px;
+    border: 0;
+    padding: 0;
+    right: 12px;
+    top: 17px;
+    border-radius: 50%;
+    margin-left: auto; 
+ }
+}
+
+.like-profile {
+ margin-top: 8px;
+ & + & {
+  margin-left: -5px;
+ }
+}
+
+.like-img {
+ border-radius: 50%;
+ width: 28px;
+ object-fit: cover;
+ border: 2px solid #fff;
+}
+
+.like-name {
+ font-size: 13px;
+ margin-left: 15px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ span {
+  font-weight: 600;
+ }
+}
+
+.likes {
+ @extend %display;
+}
+
+
+@media (max-width: 1103px) {
+ .book-cell {
+  width: 60%;
+ }
+}
+
+@media (max-width: 765px) {
+ .book-cell {
+  width: 80%;
+ }
+}
+
+@media (max-width: 575px) {
+ .book-cell {
+  width: 100%;
+ }
+}
+
+@media (max-width: 458px) {
+ .book-photo {
+  width: 180px;
+ }
+ .book-voters {
+  display: none;
+ }
+}
+
+@media (max-width: 420px) {
+ .book-see {
+  width: 120px;
+  font-size: 13px;
+ }
+ .book-photo {
+  width: 130px;
+ }
+ .main-wrapper {
+  margin-top: 50px;
+ }
+}
+
+@media (max-width: 360px) {
+ .rating > label:before {
+  font-size: 0.8em;
+ }
+}
+
+@media (max-width: 1220px) {
+ .card-vote {
+  display: none;
+ }
+}
+
+@media (max-width: 1085px) {
+ .book-rate > label {
+  font-size: .7em;
+}
+}
+
+@media (max-width: 1045px) {
+ .books-of {
+  display: none;
+}
+}
+
+@media (max-width: 725px) {
+ .browse-category, .search-bar {
+  display: none;
+}
+ .header-title {
+  margin-right: auto;
+ }
+ .book-cards {
+  grid-template-columns: 1fr;
+ }
+ .book-types {
+  display: none;
+ }
+}
+
+@media (max-width: 372px)  {
+ .card-content {
+  padding: 20px;
+ }
+}
\ No newline at end of file
diff --git a/bouncing-bunnies-animation-delay-lesson/README.markdown b/bouncing-bunnies-animation-delay-lesson/README.markdown
new file mode 100644
index 0000000..7139a44
--- /dev/null
+++ b/bouncing-bunnies-animation-delay-lesson/README.markdown
@@ -0,0 +1,5 @@
+# Bouncing Bunnies (animation-delay lesson) 😎
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jh3y/pen/mdEPXPj](https://codepen.io/jh3y/pen/mdEPXPj).
+
+
diff --git a/bouncing-bunnies-animation-delay-lesson/dist/index.html b/bouncing-bunnies-animation-delay-lesson/dist/index.html
new file mode 100644
index 0000000..a530371
--- /dev/null
+++ b/bouncing-bunnies-animation-delay-lesson/dist/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Bouncing Bunnies (animation-delay lesson) 😎</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="bunny" style="--index: 0;"></div>
+  <div class="bunny" style="--index: 1;"></div>
+  <div class="bunny" style="--index: 2;"></div>
+  <div class="bunny" style="--index: 3;"></div>
+  <div class="bunny" style="--index: 4;"></div>
+</div>
+<input type="range" min="0" max="6" value="0"/>
+<h1>No delay</h1>
+<h1>Delay</h1>
+<h1>Negative Delay</h1>
+<h1>Staggered</h1>
+<h1>Staggered w/ Negative Delay</h1>
+<h1>Reverse Stagger</h1>
+<h1>Reverse Stagger w/ Negative Delay</h1>
+<p>Animate simulataneously with no delay</p>
+<p>Animate simulataneously with a delay</p>
+<p>Animate simulataneously with a negative delay</p>
+<p>Use a variable to create a stagger</p>
+<p>Use an offset to make the delays negative so that the elements retain stagger but don't stagger in</p>
+<p>Use the total amount of bunnies to reverse the stagger</p>
+<p>Use a negative coefficient to create a stagger in the opposite direction</p>
+<pre><code>.bunny {</code><code>  animation-delay: 0s;</code><code>}</code></pre>
+<pre><code>.bunny {</code><code>  animation-delay: 2s;</code><code>}</code></pre>
+<pre><code>.bunny {</code><code>  animation-delay: -0.5s;</code><code>}</code></pre>
+<pre><code>.bunny {</code><code>  animation-delay: calc(var(--index) * 0.15s);</code><code>}</code></pre>
+<pre><code>.bunny {</code><code>  animation-delay: calc((var(--index) - 5) * 0.15s);</code><code>}</code></pre>
+<pre><code>.bunny {</code><code>  animation-delay: calc((5 - var(--index)) * 0.15s);</code><code>}</code></pre>
+<pre><code>.bunny {</code><code>  animation-delay: calc(var(--index) * -0.15s);</code><code>}</code></pre>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/bouncing-bunnies-animation-delay-lesson/dist/script.js b/bouncing-bunnies-animation-delay-lesson/dist/script.js
new file mode 100644
index 0000000..6f875c7
--- /dev/null
+++ b/bouncing-bunnies-animation-delay-lesson/dist/script.js
@@ -0,0 +1,44 @@
+// Get started!
+const RANGE = document.querySelector('input');
+const CONTAINER = document.querySelector('.container');
+const TITLES = [...document.querySelectorAll('h1')];
+const BLURBS = [...document.querySelectorAll('p')];
+const CODES = [...document.querySelectorAll('pre')];
+
+// Each config reps delay, duration, stagger, coefficient, offset
+const STEP_CONFIGS = [
+[0, 0.9, 0, 1, 0],
+[2, 0.9, 0, 1, 0],
+[-0.5, 0.9, 0, 1, 0],
+[0, 0.9, 0.15, 1, 0],
+[0, 0.9, 0.15, 1, -5],
+[0, 0.9, 0.15, 1, 0],
+[0, 0.9, 0.15, -1, 0]];
+
+
+const update = () => {
+  // Show/Hide elements
+  for (let e = 0; e < TITLES.length; e++) {
+    TITLES[e].style.display = BLURBS[e].style.display = CODES[e].style.display =
+    e === parseInt(RANGE.value, 10) ? 'block' : 'none';
+  }
+  // Running the step function
+  const CONFIG = STEP_CONFIGS[parseInt(RANGE.value, 10)];
+  document.documentElement.style.setProperty('--delay', CONFIG[0]);
+  document.documentElement.style.setProperty('--duration', CONFIG[1]);
+  document.documentElement.style.setProperty('--stagger-step', CONFIG[2]);
+  document.documentElement.style.setProperty('--coefficient', CONFIG[3]);
+  document.documentElement.style.setProperty('--offset', CONFIG[4]);
+  if (parseInt(RANGE.value, 10) === 5) {
+    CONTAINER.classList.add('reversed');
+  } else {
+    CONTAINER.classList.remove('reversed');
+  }
+  // Retrigger the animation
+  CONTAINER.hidden = true;
+  requestAnimationFrame(() => CONTAINER.hidden = false);
+};
+
+RANGE.addEventListener('change', update);
+// Run the first time to show step 0 👍
+update();
\ No newline at end of file
diff --git a/bouncing-bunnies-animation-delay-lesson/dist/style.css b/bouncing-bunnies-animation-delay-lesson/dist/style.css
new file mode 100644
index 0000000..9a0c76b
--- /dev/null
+++ b/bouncing-bunnies-animation-delay-lesson/dist/style.css
@@ -0,0 +1,104 @@
+* {
+  box-sizing: border-box;
+}
+:root {
+  --delay: 0;
+  --duration: 1;
+  --stagger-step: 0;
+  --coefficient: 1;
+  --offset: 0;
+}
+body {
+  background: linear-gradient(-45deg, #593, #a8d194);
+  min-height: 100vh;
+  display: -webkit-box;
+  display: flex;
+  color: #fff;
+  -webkit-box-align: center;
+          align-items: center;
+  font-family: sans-serif;
+  font-size: 1.2rem;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  text-align: center;
+}
+pre,
+code {
+  background: #1a1a1a;
+  font-weight: bold;
+  font-size: 1.25rem;
+  font-family: monospace;
+}
+pre {
+  padding: 1rem;
+  border-radius: 6px;
+}
+.bunny {
+  height: 50px;
+  width: 50px;
+  background-image: url("https://assets.codepen.io/605876/bunny-ready.png");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  -webkit-transform-origin: 50% 100%;
+          transform-origin: 50% 100%;
+  -webkit-animation: jump calc(var(--duration) * 1s) infinite both;
+          animation: jump calc(var(--duration) * 1s) infinite both;
+  -webkit-animation-delay: calc((((var(--delay, 0) + (var(--index) * var(--stagger-step))) + var(--offset)) * var(--coefficient)) * 1s);
+          animation-delay: calc((((var(--delay, 0) + (var(--index) * var(--stagger-step))) + var(--offset)) * var(--coefficient)) * 1s);
+}
+.reversed .bunny {
+  -webkit-animation-delay: calc((((var(--delay, 0) + ((5 - var(--index)) * var(--stagger-step))) + var(--offset)) * var(--coefficient)) * 1s);
+          animation-delay: calc((((var(--delay, 0) + ((5 - var(--index)) * var(--stagger-step))) + var(--offset)) * var(--coefficient)) * 1s);
+}
+.container {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 1vmin;
+  margin: 4rem 0;
+}
+h1,
+p,
+pre {
+  display: none;
+  text-align: left;
+}
+h1 {
+  margin-bottom: 0.25rem;
+}
+p {
+  max-width: 550px;
+}
+code {
+  line-height: 1.75;
+  display: block;
+}
+[hidden] * {
+  -webkit-animation: none;
+          animation: none;
+}
+@-webkit-keyframes jump {
+  10%, 90% {
+    -webkit-transform: translate(0, 0) scaleX(1.1) scaleY(0.8);
+            transform: translate(0, 0) scaleX(1.1) scaleY(0.8);
+  }
+  50% {
+    background-image: url("https://assets.codepen.io/605876/bunny-jump.png");
+    -webkit-transform: translate(0, -60px) scaleX(0.9) scaleY(1.2);
+            transform: translate(0, -60px) scaleX(0.9) scaleY(1.2);
+  }
+}
+@keyframes jump {
+  10%, 90% {
+    -webkit-transform: translate(0, 0) scaleX(1.1) scaleY(0.8);
+            transform: translate(0, 0) scaleX(1.1) scaleY(0.8);
+  }
+  50% {
+    background-image: url("https://assets.codepen.io/605876/bunny-jump.png");
+    -webkit-transform: translate(0, -60px) scaleX(0.9) scaleY(1.2);
+            transform: translate(0, -60px) scaleX(0.9) scaleY(1.2);
+  }
+}
\ No newline at end of file
diff --git a/bouncing-bunnies-animation-delay-lesson/license.txt b/bouncing-bunnies-animation-delay-lesson/license.txt
new file mode 100644
index 0000000..4e17c7e
--- /dev/null
+++ b/bouncing-bunnies-animation-delay-lesson/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Jhey (https://codepen.io/jh3y/pen/mdEPXPj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/bouncing-bunnies-animation-delay-lesson/src/index.pug b/bouncing-bunnies-animation-delay-lesson/src/index.pug
new file mode 100644
index 0000000..e5b864d
--- /dev/null
+++ b/bouncing-bunnies-animation-delay-lesson/src/index.pug
@@ -0,0 +1,50 @@
+.container
+  - let b = 0
+  while (b < 5)
+    .bunny(style=`--index: ${b};`)
+    - b++
+
+input(type='range', min="0", max="6", value="0")
+
+h1 No delay
+h1 Delay
+h1 Negative Delay
+h1 Staggered
+h1 Staggered w/ Negative Delay
+h1 Reverse Stagger
+h1 Reverse Stagger w/ Negative Delay
+p Animate simulataneously with no delay
+p Animate simulataneously with a delay
+p Animate simulataneously with a negative delay
+p Use a variable to create a stagger
+p Use an offset to make the delays negative so that the elements retain stagger but don't stagger in
+p Use the total amount of bunnies to reverse the stagger
+p Use a negative coefficient to create a stagger in the opposite direction
+pre
+  code .bunny {
+  code   animation-delay: 0s;
+  code }
+pre
+  code .bunny {
+  code   animation-delay: 2s;
+  code }
+pre
+  code .bunny {
+  code   animation-delay: -0.5s;
+  code }
+pre
+  code .bunny {
+  code   animation-delay: calc(var(--index) * 0.15s);
+  code }
+pre
+  code .bunny {
+  code   animation-delay: calc((var(--index) - 5) * 0.15s);
+  code }
+pre
+  code .bunny {
+  code   animation-delay: calc((5 - var(--index)) * 0.15s);
+  code }
+pre
+  code .bunny {
+  code   animation-delay: calc(var(--index) * -0.15s);
+  code }
\ No newline at end of file
diff --git a/bouncing-bunnies-animation-delay-lesson/src/script.babel b/bouncing-bunnies-animation-delay-lesson/src/script.babel
new file mode 100644
index 0000000..fec8cd8
--- /dev/null
+++ b/bouncing-bunnies-animation-delay-lesson/src/script.babel
@@ -0,0 +1,44 @@
+// Get started!
+const RANGE = document.querySelector('input')
+const CONTAINER = document.querySelector('.container')
+const TITLES = [...document.querySelectorAll('h1')]
+const BLURBS = [...document.querySelectorAll('p')]
+const CODES = [...document.querySelectorAll('pre')]
+
+// Each config reps delay, duration, stagger, coefficient, offset
+const STEP_CONFIGS = [
+  [0, 0.9, 0, 1, 0],
+  [2, 0.9, 0, 1, 0],
+  [-0.5, 0.9, 0, 1, 0],
+  [0, 0.9, 0.15, 1, 0],
+  [0, 0.9, 0.15, 1, -5],
+  [0, 0.9, 0.15, 1, 0],
+  [0, 0.9, 0.15, -1, 0],
+]
+
+const update = () => {
+  // Show/Hide elements
+  for (let e = 0; e < TITLES.length; e++) {
+    TITLES[e].style.display = BLURBS[e].style.display = CODES[e].style.display =
+      e === parseInt(RANGE.value, 10) ? 'block' : 'none'
+  }
+  // Running the step function
+  const CONFIG = STEP_CONFIGS[parseInt(RANGE.value, 10)]
+  document.documentElement.style.setProperty('--delay', CONFIG[0])
+  document.documentElement.style.setProperty('--duration', CONFIG[1])
+  document.documentElement.style.setProperty('--stagger-step', CONFIG[2])
+  document.documentElement.style.setProperty('--coefficient', CONFIG[3])
+  document.documentElement.style.setProperty('--offset', CONFIG[4])
+  if (parseInt(RANGE.value, 10) === 5) {
+    CONTAINER.classList.add('reversed')
+  } else {
+    CONTAINER.classList.remove('reversed')
+  }
+  // Retrigger the animation
+  CONTAINER.hidden = true
+  requestAnimationFrame(() => (CONTAINER.hidden = false))
+}
+
+RANGE.addEventListener('change', update)
+// Run the first time to show step 0 👍
+update()
diff --git a/bouncing-bunnies-animation-delay-lesson/src/style.styl b/bouncing-bunnies-animation-delay-lesson/src/style.styl
new file mode 100644
index 0000000..dc1fdff
--- /dev/null
+++ b/bouncing-bunnies-animation-delay-lesson/src/style.styl
@@ -0,0 +1,77 @@
+*
+  box-sizing border-box
+
+:root
+  --delay 0
+  --duration 1
+  --stagger-step 0
+  --coefficient 1
+  --offset 0
+
+body
+  background linear-gradient(-45deg, hsl(100, 50%, 40%), hsl(100, 40%, 70%))
+  min-height 100vh
+  display flex
+  color hsl(0, 0%, 100%)
+  align-items center
+  font-family sans-serif
+  font-size 1.2rem
+  justify-content center
+  flex-direction column
+  text-align center
+
+pre
+code
+  background hsl(0, 0%, 10%)
+  font-weight bold
+  font-size 1.25rem
+  font-family monospace
+pre
+  padding 1rem
+  border-radius 6px
+
+.bunny
+  height 50px
+  width 50px
+  background-image url("https://assets.codepen.io/605876/bunny-ready.png")
+  background-size contain
+  background-position center
+  background-repeat no-repeat
+  transform-origin 50% 100%
+  animation jump calc(var(--duration) * 1s) infinite both
+  animation-delay calc((((var(--delay, 0) + (var(--index) * var(--stagger-step))) + var(--offset)) * var(--coefficient)) * 1s)
+
+@keyframes jump
+  10%, 90%
+    transform translate(0, 0) scaleX(1.1) scaleY(0.8)
+  50%
+    background-image url("https://assets.codepen.io/605876/bunny-jump.png")
+    transform translate(0, -60px) scaleX(0.9) scaleY(1.2)
+
+.reversed .bunny
+  animation-delay calc((((var(--delay, 0) + ((5 - var(--index)) * var(--stagger-step))) + var(--offset)) * var(--coefficient)) * 1s)
+
+.container
+  display grid
+  grid-template-columns repeat(5, 1fr)
+  grid-gap 1vmin
+  margin 4rem 0
+
+h1
+p
+pre
+  display none
+  text-align left
+
+h1
+  margin-bottom 0.25rem
+
+p
+  max-width 550px
+
+code
+  line-height 1.75
+  display block
+
+[hidden] *
+  animation none
diff --git a/box-model/README.markdown b/box-model/README.markdown
new file mode 100644
index 0000000..e58faa8
--- /dev/null
+++ b/box-model/README.markdown
@@ -0,0 +1,5 @@
+# Box Model
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/argyleink/pen/bGNmgGW](https://codepen.io/argyleink/pen/bGNmgGW).
+
+
diff --git a/box-model/dist/index.html b/box-model/dist/index.html
new file mode 100644
index 0000000..3195255
--- /dev/null
+++ b/box-model/dist/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Box Model</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<article dir="ltr">
+  <figure id="box_model">
+    Content Box
+    <span class="vertical scrollbar"></span>
+    <span class="horizontal scrollbar"></span>
+  </figure>
+</article>
+
+<form action="">
+  <label for="show_scrollbars">Show scrollbars?</label>
+  <input id="show_scrollbars" type="checkbox">
+  
+  <label for="inline_scrollbars">Inline scrollbars?</label>
+  <input id="inline_scrollbars" type="checkbox">
+</form>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/box-model/dist/script.js b/box-model/dist/script.js
new file mode 100644
index 0000000..7e75b0b
--- /dev/null
+++ b/box-model/dist/script.js
@@ -0,0 +1,7 @@
+document.body.setAttribute('dir', 'ltr');
+
+window.show_scrollbars.addEventListener('input', (e) =>
+window.box_model.setAttribute('scrollbars', e.target.checked));
+
+window.inline_scrollbars.addEventListener('input', (e) =>
+window.box_model.setAttribute('inline-scrollbars', e.target.checked));
\ No newline at end of file
diff --git a/box-model/dist/style.css b/box-model/dist/style.css
new file mode 100644
index 0000000..40e0f9b
--- /dev/null
+++ b/box-model/dist/style.css
@@ -0,0 +1,127 @@
+body {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  /*  scale the whole thing here  */
+  font-size: min(2vmax, 2rem);
+}
+
+article {
+  background: repeating-linear-gradient(-45deg, hsl(0, 0%, 70%), hsl(0, 0%, 70%) 1px, white 1px, white 10px);
+  box-shadow: 0 2rem 5rem hsla(0, 0%, 0%, 0.25);
+  position: relative
+}
+
+article::before {
+    content: "Margin Box";
+    position: absolute;
+    top: 1ex;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 3ex;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: .5em;
+    background: white;
+    padding: .25rem 1rem;
+    border-radius: 3rem;
+  }
+
+article::after {
+    content: "Outline & Box Shadow";
+    position: absolute;
+    top: 6ex;
+    left: 0;
+    width: 100%;
+    height: 6ex;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: .5em;
+    color: white;
+  }
+
+figure {
+  width: 25vmin;
+  height: 25vmin;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 6ex;
+  border: 3ex solid black;
+  outline: 3ex solid hsla(270, 50%, 40%, 0.8);
+	padding: 3ex;
+	background:
+		linear-gradient(white, white) content-box,
+		linear-gradient(hotpink, hotpink) padding-box;
+  position: relative
+}
+
+figure::after {
+    content: "Padding Box";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 6ex;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: .5em;
+  }
+
+figure::before {
+    content: "Border Box";
+    color: white;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateY(-100%);
+    width: 100%;
+    height: 6ex;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: .5em;
+  }
+
+figure > .scrollbar {
+    background: hsla(0, 0%, 0%, 0.25);
+    position: absolute;
+    visibility: hidden
+  }
+
+figure > .scrollbar.vertical {
+      width: 1ex;
+      height: 100%;
+      top: 0;
+      right: 0;
+    }
+
+figure > .scrollbar.horizontal {
+      height: 1ex;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+    }
+
+figure[scrollbars="true"] .scrollbar {
+    visibility: visible;
+  }
+
+figure[inline-scrollbars="true"] {
+    padding: 3ex 4ex 4ex 3ex;
+  }
+
+form {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  justify-items: flex-end;
+  grid-gap: 1rem;
+  gap: 1rem;
+  margin-top: 3rem;
+}
\ No newline at end of file
diff --git a/box-model/license.txt b/box-model/license.txt
new file mode 100644
index 0000000..df0d922
--- /dev/null
+++ b/box-model/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Adam Argyle (https://codepen.io/argyleink/pen/bGNmgGW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/box-model/src/index.html b/box-model/src/index.html
new file mode 100644
index 0000000..a329a8b
--- /dev/null
+++ b/box-model/src/index.html
@@ -0,0 +1,15 @@
+<article dir="ltr">
+  <figure id="box_model">
+    Content Box
+    <span class="vertical scrollbar"></span>
+    <span class="horizontal scrollbar"></span>
+  </figure>
+</article>
+
+<form action="">
+  <label for="show_scrollbars">Show scrollbars?</label>
+  <input id="show_scrollbars" type="checkbox">
+  
+  <label for="inline_scrollbars">Inline scrollbars?</label>
+  <input id="inline_scrollbars" type="checkbox">
+</form>
\ No newline at end of file
diff --git a/box-model/src/script.babel b/box-model/src/script.babel
new file mode 100644
index 0000000..848f191
--- /dev/null
+++ b/box-model/src/script.babel
@@ -0,0 +1,7 @@
+document.body.setAttribute('dir', 'ltr')
+
+window.show_scrollbars.addEventListener('input', e =>
+  window.box_model.setAttribute('scrollbars', e.target.checked))
+
+window.inline_scrollbars.addEventListener('input', e =>
+  window.box_model.setAttribute('inline-scrollbars', e.target.checked))
\ No newline at end of file
diff --git a/box-model/src/style.css b/box-model/src/style.css
new file mode 100644
index 0000000..401b3c2
--- /dev/null
+++ b/box-model/src/style.css
@@ -0,0 +1,130 @@
+@use postcss-preset-env {
+  stage: 0;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  /*  scale the whole thing here  */
+  font-size: min(2vmax, 2rem);
+}
+
+article {
+  background: repeating-linear-gradient(-45deg, hsl(0 0% 70%), hsl(0 0% 70%) 1px, white 1px, white 10px);
+  box-shadow: 0 2rem 5rem hsl(0 0% 0% / 25%);
+  position: relative;
+  
+  &::before {
+    content: "Margin Box";
+    position: absolute;
+    top: 1ex;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 3ex;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: .5em;
+    background: white;
+    padding: .25rem 1rem;
+    border-radius: 3rem;
+  }
+  
+  &::after {
+    content: "Outline & Box Shadow";
+    position: absolute;
+    top: 6ex;
+    left: 0;
+    width: 100%;
+    height: 6ex;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: .5em;
+    color: white;
+  }
+}
+
+figure {
+  width: 25vmin;
+  height: 25vmin;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 6ex;
+  border: 3ex solid black;
+  outline: 3ex solid hsl(270 50% 40% / 80%);
+	padding: 3ex;
+	background:
+		linear-gradient(white, white) content-box,
+		linear-gradient(hotpink, hotpink) padding-box;
+  position: relative;
+  
+  &::after {
+    content: "Padding Box";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 6ex;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: .5em;
+  }
+  
+  &::before {
+    content: "Border Box";
+    color: white;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateY(-100%);
+    width: 100%;
+    height: 6ex;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: .5em;
+  }
+  
+  & > .scrollbar {
+    background: hsl(0 0% 0% / 25%);
+    position: absolute;
+    visibility: hidden;
+    
+    &.vertical {
+      width: 1ex;
+      height: 100%;
+      top: 0;
+      right: 0;
+    }
+    
+    &.horizontal {
+      height: 1ex;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+    }
+  }
+  
+  &[scrollbars="true"] .scrollbar {
+    visibility: visible;
+  }
+  
+  &[inline-scrollbars="true"] {
+    padding: 3ex 4ex 4ex 3ex;
+  }
+}
+
+form {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  justify-items: flex-end;
+  gap: 1rem;
+  margin-block-start: 3rem;
+}
\ No newline at end of file
diff --git a/break-out-of-parent-element-indented/README.markdown b/break-out-of-parent-element-indented/README.markdown
new file mode 100644
index 0000000..d358a54
--- /dev/null
+++ b/break-out-of-parent-element-indented/README.markdown
@@ -0,0 +1,4 @@
+# Break out of parent element (indented)
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jakob-e/pen/YbrRYN](https://codepen.io/jakob-e/pen/YbrRYN).
+
+ Break out of parent element while keeping content aligned – a small guide.  
\ No newline at end of file
diff --git a/break-out-of-parent-element-indented/dist/index.html b/break-out-of-parent-element-indented/dist/index.html
new file mode 100644
index 0000000..d9c8ba9
--- /dev/null
+++ b/break-out-of-parent-element-indented/dist/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Break out of parent element (indented)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input type="radio" name="rb" id="step0" checked />
+<input type="radio" name="rb" id="step1" />
+<input type="radio" name="rb" id="step2" />
+<input type="radio" name="rb" id="step3" />
+<input type="radio" name="rb" id="step4" />
+<input type="radio" name="rb" id="step5" />
+<input type="radio" name="rb" id="step6" />
+<input type="radio" name="rb" id="step7" />
+
+<div class="wrap">
+	<div class="breakout">
+		<div class="content"><h2>The Great Escape</h2><p></div>		
+	</div>	
+	
+<pre>
+  .breakout {
+    <span>/* click next */</span>
+  }
+</pre>
+<pre>
+  .breakout {
+    margin-left: 50%;
+  }
+</pre>
+<pre>
+  .breakout {
+    margin-left: calc(50% - 50vw);
+  }
+</pre>	
+<pre>
+  .breakout {
+    margin-left:  calc(50% - 50vw);
+    padding-left: 50vw;
+  }
+</pre>	
+<pre>
+  .breakout {
+    margin-left:  calc(50% - 50vw);
+    padding-left: calc(50vw - 50%);
+  }
+</pre>	
+<pre>
+  .breakout {
+    margin-left:   calc(50% - 50vw);
+    margin-right:  calc(50% - 50vw);
+    padding-left:  calc(50vw - 50%);
+    padding-right: calc(50vw - 50%);
+  }
+<span> 
+  /* ---------------------------
+     leave out padding to make 
+     content stretch to viewport 
+     --------------------------- */ 
+</span>	 
+</pre>		
+
+
+
+		<div class="next">
+			<label for="step1"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
+			<label for="step2"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
+			<label for="step3"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
+			<label for="step4"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
+			<label for="step5"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
+		</div>
+		
+		<div class="prev">
+			<label for="step0"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>	
+			<label for="step1"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>	
+			<label for="step2"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>	
+			<label for="step3"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>	
+			<label for="step4"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>	
+		</div>			
+
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/break-out-of-parent-element-indented/dist/style.css b/break-out-of-parent-element-indented/dist/style.css
new file mode 100644
index 0000000..ce30ec6
--- /dev/null
+++ b/break-out-of-parent-element-indented/dist/style.css
@@ -0,0 +1,282 @@
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+  position: relative;
+  z-index: 0;
+}
+
+body {
+  padding: 1rem;
+  background: whitesmoke;
+  -webkit-font-smoothing: antialiased;
+}
+
+*:before, *:after {
+  z-index: 1;
+}
+
+.wrap {
+  max-width: 50vw;
+  margin: 0 auto;
+  background: white;
+  outline: 1px solid #ccc;
+  outline-offset: -1px;
+  min-height: 80vh;
+  padding: 2rem;
+}
+.wrap:after {
+  content: '';
+  position: absolute;
+  display: block;
+  outline: 1px dotted silver;
+  top: 2rem;
+  left: 2rem;
+  bottom: 2rem;
+  right: 2rem;
+  z-index: -1;
+}
+
+.content {
+  background: rgba(255, 69, 0, 0.5);
+  height: 100px;
+}
+
+.breakout {
+  background-image: url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23ff6a33" fill-opacity="0.4" fill-rule="evenodd"%3E%3Cpath d="M0 40L40 0H20L0 20M40 40V20L20 40"/%3E%3C/g%3E%3C/svg%3E');
+  transition: all 600ms;
+  font: caption;
+  outline: 1px dotted silver;
+}
+.breakout h2 {
+  text-align: center;
+  padding: 1rem 0;
+  font-size: 1.1rem;
+}
+.breakout:before, .breakout:after {
+  transition: all 300ms;
+}
+
+[id="step1"]:checked ~ * .breakout {
+  margin-left: calc(50%);
+}
+[id="step1"]:checked ~ * .breakout:before {
+  content: '+50% margin';
+  position: absolute;
+  display: block;
+  width: 100%;
+  left: -100%;
+  top: 50%;
+  border-bottom: 1px dashed;
+  text-align: center;
+}
+[id="step1"]:checked ~ * .breakout:after {
+  content: '';
+  position: absolute;
+  display: block;
+  left: 0;
+  top: -1rem;
+  height: calc(100% + 3rem);
+  border-left: 1px dashed;
+  text-align: center;
+}
+
+[id="step2"]:checked ~ * .breakout {
+  margin-left: calc(50% - 50vw);
+}
+[id="step2"]:checked ~ * .breakout:before {
+  content: '-50vw margin';
+  position: absolute;
+  display: block;
+  width: 50vw;
+  top: 50%;
+  border-bottom: 1px dashed;
+  text-align: center;
+}
+[id="step2"]:checked ~ * .breakout:after {
+  content: '';
+  position: fixed;
+  display: block;
+  left: calc(50% - 1px);
+  top: 0;
+  height: 100vh;
+  border-left: 1px dashed silver;
+  text-align: center;
+  transition: none;
+}
+
+[id="step3"]:checked ~ * .breakout {
+  margin-left: calc(50% - 50vw);
+  padding-left: calc(50vw);
+}
+[id="step3"]:checked ~ * .breakout:before {
+  content: '+50vw padding';
+  position: absolute;
+  display: block;
+  width: 50vw;
+  top: 50%;
+  left: 0;
+  border-bottom: 1px dashed;
+  text-align: center;
+}
+[id="step3"]:checked ~ * .breakout:after {
+  content: '';
+  position: fixed;
+  display: block;
+  left: calc(50% - 1px);
+  top: 0;
+  height: 100vh;
+  border-left: 1px dashed silver;
+  text-align: center;
+  transition: none;
+}
+
+[id="step4"]:checked ~ * .breakout {
+  margin-left: calc(50% - 50vw);
+  padding-left: calc(50vw - 50%);
+}
+[id="step4"]:checked ~ * .breakout:before {
+  content: '-50% padding';
+  position: absolute;
+  display: block;
+  width: 50%;
+  top: 50%;
+  left: 0;
+  border-bottom: 1px dashed;
+  text-align: center;
+  white-space: pre;
+}
+[id="step4"]:checked ~ * .breakout:after {
+  content: '';
+  position: absolute;
+  display: block;
+  left: 50%;
+  top: -1rem;
+  height: calc(100% + 3rem);
+  border-left: 1px dashed;
+  text-align: center;
+}
+
+[id="step5"]:checked ~ * .breakout {
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+  padding-left: calc(50vw - 50%);
+  padding-right: calc(50vw - 50%);
+}
+
+pre {
+  overflow: auto;
+  display: none;
+  font-size: 12px;
+  background: whitesmoke;
+  padding: 1.5rem;
+  margin-top: 2rem;
+  font-family: monospace;
+}
+pre span {
+  color: #999;
+}
+
+[id="step0"]:checked ~ * pre:nth-of-type(1) {
+  display: block;
+}
+
+[id="step1"]:checked ~ * pre:nth-of-type(2) {
+  display: block;
+}
+
+[id="step2"]:checked ~ * pre:nth-of-type(3) {
+  display: block;
+}
+
+[id="step3"]:checked ~ * pre:nth-of-type(4) {
+  display: block;
+}
+
+[id="step4"]:checked ~ * pre:nth-of-type(5) {
+  display: block;
+}
+
+[id="step5"]:checked ~ * pre:nth-of-type(6) {
+  display: block;
+}
+
+input {
+  position: fixed;
+  top: -100px;
+}
+
+.prev, .next {
+  width: 40px;
+  text-align: center;
+  position: absolute;
+  bottom: 3rem;
+}
+
+.prev {
+  right: 5.5rem;
+}
+
+.next {
+  right: 3rem;
+}
+
+label {
+  display: none;
+  cursor: pointer;
+}
+
+svg {
+  background: white;
+  border-radius: 50%;
+  border: 2px solid;
+  padding: 4px;
+  width: 32px;
+  height: 32px;
+}
+
+[id="step1"]:checked ~ * .prev label:nth-of-type(1) {
+  display: block;
+}
+
+[id="step2"]:checked ~ * .prev label:nth-of-type(2) {
+  display: block;
+}
+
+[id="step3"]:checked ~ * .prev label:nth-of-type(3) {
+  display: block;
+}
+
+[id="step4"]:checked ~ * .prev label:nth-of-type(4) {
+  display: block;
+}
+
+[id="step5"]:checked ~ * .prev label:nth-of-type(5) {
+  display: block;
+}
+
+[id="step0"]:checked ~ * .next label:nth-of-type(1) {
+  display: block;
+}
+
+[id="step1"]:checked ~ * .next label:nth-of-type(2) {
+  display: block;
+}
+
+[id="step2"]:checked ~ * .next label:nth-of-type(3) {
+  display: block;
+}
+
+[id="step3"]:checked ~ * .next label:nth-of-type(4) {
+  display: block;
+}
+
+[id="step4"]:checked ~ * .next label:nth-of-type(5) {
+  display: block;
+}
+
+[id="step5"]:checked ~ * .next label:nth-of-type(6) {
+  display: block;
+}
diff --git a/break-out-of-parent-element-indented/license.txt b/break-out-of-parent-element-indented/license.txt
new file mode 100644
index 0000000..79e94dd
--- /dev/null
+++ b/break-out-of-parent-element-indented/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by jakob-e (https://codepen.io/jakob-e/pen/YbrRYN)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/break-out-of-parent-element-indented/src/index.html b/break-out-of-parent-element-indented/src/index.html
new file mode 100644
index 0000000..ea917c0
--- /dev/null
+++ b/break-out-of-parent-element-indented/src/index.html
@@ -0,0 +1,75 @@
+<input type="radio" name="rb" id="step0" checked />
+<input type="radio" name="rb" id="step1" />
+<input type="radio" name="rb" id="step2" />
+<input type="radio" name="rb" id="step3" />
+<input type="radio" name="rb" id="step4" />
+<input type="radio" name="rb" id="step5" />
+<input type="radio" name="rb" id="step6" />
+<input type="radio" name="rb" id="step7" />
+
+<div class="wrap">
+	<div class="breakout">
+		<div class="content"><h2>The Great Escape</h2><p></div>		
+	</div>	
+	
+<pre>
+  .breakout {
+    <span>/* click next */</span>
+  }
+</pre>
+<pre>
+  .breakout {
+    margin-left: 50%;
+  }
+</pre>
+<pre>
+  .breakout {
+    margin-left: calc(50% - 50vw);
+  }
+</pre>	
+<pre>
+  .breakout {
+    margin-left:  calc(50% - 50vw);
+    padding-left: 50vw;
+  }
+</pre>	
+<pre>
+  .breakout {
+    margin-left:  calc(50% - 50vw);
+    padding-left: calc(50vw - 50%);
+  }
+</pre>	
+<pre>
+  .breakout {
+    margin-left:   calc(50% - 50vw);
+    margin-right:  calc(50% - 50vw);
+    padding-left:  calc(50vw - 50%);
+    padding-right: calc(50vw - 50%);
+  }
+<span> 
+  /* ---------------------------
+     leave out padding to make 
+     content stretch to viewport 
+     --------------------------- */ 
+</span>	 
+</pre>		
+
+
+
+		<div class="next">
+			<label for="step1"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
+			<label for="step2"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
+			<label for="step3"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
+			<label for="step4"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
+			<label for="step5"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
+		</div>
+		
+		<div class="prev">
+			<label for="step0"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>	
+			<label for="step1"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>	
+			<label for="step2"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>	
+			<label for="step3"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>	
+			<label for="step4"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>	
+		</div>			
+
+</div>
\ No newline at end of file
diff --git a/break-out-of-parent-element-indented/src/style.scss b/break-out-of-parent-element-indented/src/style.scss
new file mode 100644
index 0000000..611fb4f
--- /dev/null
+++ b/break-out-of-parent-element-indented/src/style.scss
@@ -0,0 +1,190 @@
+html { box-sizing: border-box; } *,*::before,*::after { box-sizing: inherit; position: relative; z-index: 0; }
+body { padding: 1rem; background: whitesmoke; -webkit-font-smoothing: antialiased; }
+*:before, *:after { z-index: 1; }
+.wrap {
+	max-width: 50vw;
+	margin: 0 auto;
+	background: white;
+	outline: 1px solid #ccc;
+	outline-offset: -1px;
+	min-height: 80vh;
+	padding: 2rem;	
+	
+	&:after {
+		content: '';
+		position: absolute;
+		display: block;
+		outline: 1px dotted silver;
+		top: 2rem;
+		left: 2rem;
+		bottom: 2rem;
+		right: 2rem;
+		z-index: -1;
+	}
+}
+
+.content {
+	background: rgba(orangered, 0.5);	
+	height: 100px;
+}
+.breakout {
+	h2 { text-align: center; padding: 1rem 0; font-size: 1.1rem; }
+background-image: url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23ff6a33" fill-opacity="0.4" fill-rule="evenodd"%3E%3Cpath d="M0 40L40 0H20L0 20M40 40V20L20 40"/%3E%3C/g%3E%3C/svg%3E');
+	transition: all 600ms;
+	font: caption;
+	outline: 1px dotted silver;
+	&:before, &:after { transition: all 300ms;}
+}
+
+[id="step1"]:checked ~ * .breakout {
+	margin-left: calc(50%);
+	
+	&:before {
+		content: '+50% margin';
+		position: absolute;
+		display: block;
+		width: 100%;
+		left: -100%;
+		top : 50%;		
+		border-bottom: 1px dashed;
+		text-align: center;
+	}
+	
+	&:after {
+		content: '';
+		position: absolute;
+		display: block;
+		left: 0;
+		top : -1rem;		
+		height: calc(100% + 3rem);
+		border-left: 1px dashed;
+		text-align: center;
+	
+	}	
+}
+
+
+
+[id="step2"]:checked ~ * .breakout {
+	margin-left: calc(50% - 50vw);
+	&:before {
+		content: '-50vw margin';
+		position: absolute;
+		display: block;
+		width: 50vw;
+		top : 50%;		
+		border-bottom: 1px dashed;
+		text-align: center;
+	}	
+	
+	&:after {
+		content: '';
+		position: fixed;
+		display: block;
+		left: calc(50% - 1px);
+		top : 0;		
+		height: 100vh;
+		border-left: 1px dashed silver;
+		text-align: center;
+		transition: none;
+	}		
+}
+[id="step3"]:checked ~ * .breakout {
+	margin-left: calc(50% - 50vw);	
+	padding-left: calc(50vw);
+	&:before {
+		content: '+50vw padding';
+		position: absolute;
+		display: block;
+		width: 50vw;
+		top : 50%;	
+		left: 0;
+		border-bottom: 1px dashed;
+		text-align: center;
+	}		
+	
+	&:after {
+		content: '';
+		position: fixed;
+		display: block;
+		left: calc(50% - 1px);
+		top : 0;		
+		height: 100vh;
+		border-left: 1px dashed silver;
+		text-align: center;
+		transition: none;		
+	}	
+}
+[id="step4"]:checked ~ * .breakout {
+	margin-left: calc(50% - 50vw);	
+	// margin-right: calc(50% - 50vw);	
+	padding-left: calc(50vw - 50%);	
+	&:before {
+		content: '-50% padding';
+		position: absolute;
+		display: block;
+		width: 50%;
+		top : 50%;	
+		left: 0;
+		border-bottom: 1px dashed;
+		text-align: center;
+		white-space: pre;
+	}	
+	
+	&:after {
+		content: '';
+		position: absolute;
+		display: block;
+		left: 50%;
+		top : -1rem;		
+		height: calc(100% + 3rem);
+		border-left: 1px dashed;
+		text-align: center;
+	
+	}		
+}
+[id="step5"]:checked ~ * .breakout {
+	margin-left: calc(50% - 50vw);	
+	margin-right: calc(50% - 50vw);	
+	padding-left: calc(50vw - 50%);	
+	padding-right: calc(50vw - 50%);		
+}
+
+
+pre { 
+	overflow: auto;
+	display: none; 
+	font-size: 12px;
+	background: whitesmoke;
+	padding: 1.5rem;
+	margin-top: 2rem;
+	font-family: monospace;
+	span { color: #999; }
+}
+[id="step0"]:checked ~ * pre:nth-of-type(1) { display: block; }
+[id="step1"]:checked ~ * pre:nth-of-type(2) { display: block; }
+[id="step2"]:checked ~ * pre:nth-of-type(3) { display: block; }
+[id="step3"]:checked ~ * pre:nth-of-type(4) { display: block; }
+[id="step4"]:checked ~ * pre:nth-of-type(5) { display: block; }
+[id="step5"]:checked ~ * pre:nth-of-type(6) { display: block; }
+
+
+
+input { position: fixed; top: -100px; }
+.prev,.next  { width: 40px; text-align: center; position: absolute; bottom: 3rem; }
+.prev { right: 5.5rem; }
+.next { right: 3rem; }
+label { display: none; cursor: pointer; }
+svg { background:white; border-radius: 50%; border: 2px solid; padding: 4px; width:32px; height: 32px; }
+[id="step1"]:checked ~ * .prev label:nth-of-type(1) { display: block; }
+[id="step2"]:checked ~ * .prev label:nth-of-type(2) { display: block; }
+[id="step3"]:checked ~ * .prev label:nth-of-type(3) { display: block; }
+[id="step4"]:checked ~ * .prev label:nth-of-type(4) { display: block; }
+[id="step5"]:checked ~ * .prev label:nth-of-type(5) { display: block; }
+
+[id="step0"]:checked ~ * .next label:nth-of-type(1) { display: block; }
+[id="step1"]:checked ~ * .next label:nth-of-type(2) { display: block; }
+[id="step2"]:checked ~ * .next label:nth-of-type(3) { display: block; }
+[id="step3"]:checked ~ * .next label:nth-of-type(4) { display: block; }
+[id="step4"]:checked ~ * .next label:nth-of-type(5) { display: block; }
+[id="step5"]:checked ~ * .next label:nth-of-type(6) { display: block; }
diff --git a/breathe/README.markdown b/breathe/README.markdown
new file mode 100644
index 0000000..a0f6df3
--- /dev/null
+++ b/breathe/README.markdown
@@ -0,0 +1,5 @@
+# Breathe
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/supah/pen/OJXJgZq](https://codepen.io/supah/pen/OJXJgZq).
+
+
diff --git a/breathe/dist/index.html b/breathe/dist/index.html
new file mode 100644
index 0000000..64d5af2
--- /dev/null
+++ b/breathe/dist/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Breathe</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!--
+
+Follow me on
+Instagram: https://www.instagram.com/supahfunk/
+Dribbble: https://dribbble.com/supahfunk
+Twitter: https://twitter.com/supahfunk
+Codepen: https://codepen.io/supah/
+
+-->
+
+<canvas id="canvas"></canvas>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/breathe/dist/script.js b/breathe/dist/script.js
new file mode 100644
index 0000000..0bddfeb
--- /dev/null
+++ b/breathe/dist/script.js
@@ -0,0 +1,144 @@
+/*--------------------
+Utils
+--------------------*/
+const mapRange = (a, b, c, d, e) => {
+  return (a - b) * (e - d) / (c - b) + d;
+};
+const lerp = (v0, v1, t) => {
+  return v0 * (1 - t) + v1 * t;
+};
+const random = (min, max) => min + Math.random() * (max - min);
+const sin = t => Math.sin(t);
+const cos = t => Math.cos(t);
+const PI = Math.PI;
+const TAO = PI * 2;
+const LOOP = 4;
+
+
+/*--------------------
+                Raf
+                --------------------*/
+class Raf {
+  constructor() {
+    this.raf();
+  }
+
+  raf() {
+    if (this.onRaf) {
+      window.requestAnimationFrame(() => {
+        const o = {};
+        o.time = window.performance.now() / 1000;
+        o.playhead = o.time % LOOP / LOOP;
+        this.raf();
+        this.onRaf(o);
+      });
+    }
+  }}
+
+
+
+/*--------------------
+     Canvas
+     --------------------*/
+class Canvas extends Raf {
+  constructor(obj) {
+    super();
+    this.canvas = document.getElementById(obj.id);
+    this.ctx = this.canvas.getContext('2d');
+    this.resize();
+    this.events();
+  }
+
+  resize() {
+    this.dpr = window.devicePixelRatio;
+    this.canvas.style.width = `${window.innerWidth}px`;
+    this.canvas.style.height = `${window.innerHeight}px`;
+    this.canvas.width = window.innerWidth * this.dpr;
+    this.canvas.height = window.innerHeight * this.dpr;
+  }
+
+  events() {
+    window.addEventListener('resize', this.resize);
+  }
+
+  clear() {
+    this.ctx.clearRect(0, 0, window.innerWidth * this.dpr, window.innerHeight * this.dpr);
+  }
+
+  onRaf() {
+    this.clear();
+  }}
+
+
+
+/*--------------------
+     Circle
+     --------------------*/
+class Circle extends Raf {
+  constructor(obj) {
+    super();
+    Object.assign(this, obj);
+    this.draw();
+  }
+
+  draw(playhead, time) {
+    const breathe = sin(playhead * TAO);
+    this.ctx.globalCompositeOperation = "screen";
+    this.ctx.save();
+    this.ctx.translate(window.innerWidth / 2 * this.dpr, window.innerHeight / 2 * this.dpr - 30 * this.dpr);
+    this.ctx.rotate(PI);
+
+    this.ctx.strokeStyle = this.color;
+    this.ctx.fillStyle = 'rgba(0, 100, 0, 0)';
+    this.ctx.lineWidth = this.lineWidth;
+    this.ctx.beginPath();
+
+    for (let i = 0; i <= this.points; i++) {
+      const p = i / this.points;
+
+      const times = 7;
+
+      const phase = mapRange(cos(p * TAO), -1, 1, 1, mapRange(sin(((this.offset + time * this.speed) * .2 + p) * times * TAO), -1, 1, .5, .58));
+
+      let x = phase * this.radius * sin(p * TAO);
+      let y = phase * this.radius * cos(p * TAO);
+
+      const type = i === 0 ? 'moveTo' : 'lineTo';
+      this.ctx[type](x, y);
+    }
+
+    this.ctx.fill();
+    this.ctx.stroke();
+    this.ctx.beginPath();
+    this.ctx.fillStyle = this.color;
+    this.ctx.fill();
+    this.ctx.restore();
+  }
+
+  onRaf({ playhead, time }) {
+    this.draw(playhead, time);
+  }}
+
+
+
+
+
+/*--------------------
+     Init
+     --------------------*/
+const canvas = new Canvas({
+  id: 'canvas' });
+
+
+for (let i = 0; i < 8; i++) {
+  new Circle({
+    ctx: canvas.ctx,
+    dpr: canvas.dpr,
+    lineWidth: 1 * canvas.dpr,
+    points: 200,
+    offset: i * 1.5,
+    speed: .7,
+    radius: (150 - i * 4) * canvas.dpr,
+    color: `hsl(${220 + i * 10}, 60%, 70%)` });
+
+}
\ No newline at end of file
diff --git a/breathe/dist/style.css b/breathe/dist/style.css
new file mode 100644
index 0000000..2660c01
--- /dev/null
+++ b/breathe/dist/style.css
@@ -0,0 +1,42 @@
+body {
+  margin: 0;
+  padding: 0;
+  background: #172442;
+}
+body:before {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  background: -webkit-gradient(linear, left bottom, left top, from(#191842), color-stop(95%, transparent));
+  background: linear-gradient(0deg, #191842, transparent 95%);
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 320px;
+  height: 400px;
+  box-shadow: -5px 35px 30px -20px rgba(0, 0, 0, 0.5);
+}
+body:after {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  letter-spacing: 1.4em;
+  margin: 0 0 0 0.6em;
+  text-transform: uppercase;
+  content: 'BREATHE';
+  color: violet;
+  mix-blend-mode: lighten;
+  font-size: 12px;
+  font-family: serif;
+  opacity: .8;
+}
+
+canvas {
+  position: relative;
+  z-index: 2;
+  background: transparent;
+}
\ No newline at end of file
diff --git a/breathe/license.txt b/breathe/license.txt
new file mode 100644
index 0000000..d7f75ab
--- /dev/null
+++ b/breathe/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Fabio Ottaviani (https://codepen.io/supah/pen/OJXJgZq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/breathe/src/index.html b/breathe/src/index.html
new file mode 100644
index 0000000..651b9fa
--- /dev/null
+++ b/breathe/src/index.html
@@ -0,0 +1,11 @@
+<!--
+
+Follow me on
+Instagram: https://www.instagram.com/supahfunk/
+Dribbble: https://dribbble.com/supahfunk
+Twitter: https://twitter.com/supahfunk
+Codepen: https://codepen.io/supah/
+
+-->
+
+<canvas id="canvas"></canvas>
\ No newline at end of file
diff --git a/breathe/src/script.babel b/breathe/src/script.babel
new file mode 100644
index 0000000..b718469
--- /dev/null
+++ b/breathe/src/script.babel
@@ -0,0 +1,144 @@
+/*--------------------
+Utils
+--------------------*/
+const mapRange = (a, b, c, d, e) => {
+  return (a - b) * (e - d) / (c - b) + d
+}
+const lerp = (v0, v1, t) => {
+  return v0 * (1 - t) + v1 * t
+}
+const random = (min, max) => min + Math.random() * (max - min)
+const sin = (t) => (Math.sin(t))
+const cos = (t) => (Math.cos(t))
+const PI = Math.PI
+const TAO = PI * 2
+const LOOP = 4
+
+
+/*--------------------
+Raf
+--------------------*/
+class Raf {
+  constructor() {
+    this.raf()
+  }
+  
+  raf() {
+    if (this.onRaf) {
+      window.requestAnimationFrame(() => {
+        const o = {}
+        o.time = window.performance.now() / 1000
+        o.playhead = o.time % LOOP / LOOP
+        this.raf()
+        this.onRaf(o)
+      })
+    }
+  }
+}
+
+
+/*--------------------
+Canvas
+--------------------*/
+class Canvas extends Raf {
+  constructor(obj) {
+    super()
+    this.canvas = document.getElementById(obj.id)
+    this.ctx = this.canvas.getContext('2d')
+    this.resize()
+    this.events()
+  }
+  
+  resize() {
+    this.dpr = window.devicePixelRatio
+    this.canvas.style.width = `${window.innerWidth}px`
+    this.canvas.style.height = `${window.innerHeight}px`
+    this.canvas.width = window.innerWidth * this.dpr
+    this.canvas.height = window.innerHeight * this.dpr
+  }
+  
+  events() {
+    window.addEventListener('resize', this.resize)
+  }
+  
+  clear() {
+    this.ctx.clearRect(0, 0, window.innerWidth * this.dpr, window.innerHeight * this.dpr)
+  }
+  
+  onRaf() {
+    this.clear()
+  }
+}
+
+
+/*--------------------
+Circle
+--------------------*/
+class Circle extends Raf {
+  constructor(obj) {
+    super()
+    Object.assign(this, obj)
+    this.draw()
+  }
+  
+  draw(playhead, time) {
+    const breathe = sin(playhead * TAO)
+    this.ctx.globalCompositeOperation = "screen"
+    this.ctx.save()
+    this.ctx.translate(window.innerWidth / 2 * this.dpr, window.innerHeight / 2 * this.dpr - 30 * this.dpr)
+    this.ctx.rotate(PI)
+    
+    this.ctx.strokeStyle = this.color
+    this.ctx.fillStyle = 'rgba(0, 100, 0, 0)'
+    this.ctx.lineWidth = this.lineWidth
+    this.ctx.beginPath()
+    
+    for (let i = 0; i <= this.points; i++) {
+      const p = i / this.points
+      
+      const times = 7
+
+      const phase = mapRange(cos(p * TAO), -1, 1, 1, mapRange(sin(((this.offset + time * this.speed) * .2 + p) * times * TAO), -1, 1, .5, .58))
+      
+      let x = phase * this.radius * sin(p * TAO)
+      let y = phase * this.radius * cos(p * TAO) 
+      
+      const type = i === 0 ? 'moveTo' : 'lineTo'
+      this.ctx[type](x, y)  
+    }
+    
+    this.ctx.fill()
+    this.ctx.stroke() 
+    this.ctx.beginPath()
+    this.ctx.fillStyle = this.color
+    this.ctx.fill()
+    this.ctx.restore()
+  }
+  
+  onRaf({playhead, time}) {
+    this.draw(playhead, time)
+  }
+  
+}
+
+
+
+/*--------------------
+Init
+--------------------*/
+const canvas = new Canvas({
+  id: 'canvas'
+})
+
+for (let i = 0; i < 8; i++) {
+  new Circle({
+    ctx: canvas.ctx,
+    dpr: canvas.dpr,
+    lineWidth: 1 * canvas.dpr,
+    points: 200,
+    offset: i * 1.5,
+    speed: .7,
+    radius: (150 - i * 4) * canvas.dpr,
+    color: `hsl(${220 + i * 10}, 60%, 70%)`
+  })
+}
diff --git a/breathe/src/style.scss b/breathe/src/style.scss
new file mode 100644
index 0000000..dbe83c9
--- /dev/null
+++ b/breathe/src/style.scss
@@ -0,0 +1,42 @@
+body {
+  margin: 0;
+  padding: 0;
+  background: #172442;
+  
+  &:before {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    background: linear-gradient(0deg, #191842, transparent 95%);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 320px;
+    height: 400px;
+    box-shadow: -5px 35px 30px -20px rgba(0, 0, 0, 0.5);
+  }
+  
+  &:after {
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    letter-spacing: 1.4em;
+    margin: 0 0 0 0.6em;
+    text-transform: uppercase;
+    content: 'BREATHE';
+    color: violet;
+    mix-blend-mode: lighten;
+    font-size: 12px;
+    font-family: serif;
+    opacity: .8;
+  }
+}
+
+canvas {
+  position: relative;
+  z-index: 2;
+  background: transparent;
+}
\ No newline at end of file
diff --git a/bricks-darkcss-doodle/README.markdown b/bricks-darkcss-doodle/README.markdown
new file mode 100644
index 0000000..8fe41de
--- /dev/null
+++ b/bricks-darkcss-doodle/README.markdown
@@ -0,0 +1,4 @@
+# Bricks(dark) - CSS Doodle 
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/aragakey/pen/YMvPRd](https://codepen.io/aragakey/pen/YMvPRd).
+
+ 
\ No newline at end of file
diff --git a/bricks-darkcss-doodle/dist/index.html b/bricks-darkcss-doodle/dist/index.html
new file mode 100644
index 0000000..164a40c
--- /dev/null
+++ b/bricks-darkcss-doodle/dist/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Bricks(dark) - CSS Doodle </title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<css-doodle>
+		:doodle {
+	 		@grid: 6x6 / 100vmin;
+		}
+		color: hsla(
+    	calc(360 - @i() * 4), 70%, 68%, @r(.99)
+  	);
+		@nth(1, 3, 5, 13, 15, 17, 25, 27, 29) {
+	  	z-index: 100;
+
+	  	::after{
+				content: "";
+				opacity: .5;
+				position: absolute;
+				z-index: 100;
+				top: 50%;
+				left: 50%;
+				@size: 100%;
+	    	background-image: linear-gradient(
+		     	transparent calc(25% - 1px),
+		     	#000 calc(25% - 1px),
+		     	#000 calc(25% + 1px),
+		     	transparent calc(25% + 1px),
+		     	transparent calc(75% - 1px),
+		     	#000 calc(75% - 1px),
+		     	#000 calc(75% + 1px),
+		     	transparent calc(75% + 1px)),linear-gradient(90deg,
+		     	transparent calc(25% - 1px),
+		     	#000 calc(25% - 1px),
+		     	#000 calc(25% + 1px),
+		     	transparent calc(25% + 1px),
+		     	transparent calc(75% - 1px),
+		     	#000 calc(75% - 1px),
+		     	#000 calc(75% + 1px),
+	     		transparent calc(75% + 1px)
+     		);
+	    	background-color: currentColor;
+	    	transition: .8s ease all;
+	  		transform: rotate(@p(0deg, 90deg, 180deg, -90deg)); 
+	  	}
+		}
+		@nth(1, 3, 5, 13, 15, 17, 25, 27, 29, 8, 10, 12, 20, 22, 24, 32, 34, 36) {
+	  ::before {
+	   content: "";
+	   position: absolute;
+	   top: 0; left: 0;
+		 @size: 100%;
+	   background:
+	    radial-gradient(circle at 50% 100%, currentColor 22.2%, transparent 22.2%, transparent calc(22.2% + 2px), currentColor calc(22.2% + 2px), currentColor 44.4%, transparent 44.4%);
+	   transform: rotate(@p(0deg, 90deg, 180deg, -90deg));
+	   transition: .8s ease all;
+	  }
+	 }
+		@nth(2, 4, 6, 14, 16, 18, 26, 28, 30, 7, 9, 11, 19, 21, 23, 31, 33, 35) {
+	  ::after {
+	   content: "";
+	   position: absolute;
+	   top: calc(25% - 2px);
+	   left: calc(25% - 2px);
+		 @size: 50%;
+		 border: 2px solid #000;
+	  }
+	 ::before {
+	   content: "";
+	   position: absolute;
+	   top: 0;
+	   left: 0;
+		 @size: 100%;
+	   background: linear-gradient(45deg, transparent 50%, currentColor 50%);
+	   transition: .8s ease all;
+	   transform: rotate(@p(0deg, 90deg, 180deg, -90deg)); 
+	  }
+	 }
+	</css-doodle>
+<!-- partial -->
+  <script src='https://unpkg.com/css-doodle@0.6.1/css-doodle.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/bricks-darkcss-doodle/dist/script.js b/bricks-darkcss-doodle/dist/script.js
new file mode 100644
index 0000000..a3b6c7f
--- /dev/null
+++ b/bricks-darkcss-doodle/dist/script.js
@@ -0,0 +1,6 @@
+document.addEventListener('click', function (e) {
+  e.target.update && e.target.update();
+});
+document.addEventListener('touchstart', function (e) {
+  e.target.update && e.target.update();
+});
\ No newline at end of file
diff --git a/bricks-darkcss-doodle/dist/style.css b/bricks-darkcss-doodle/dist/style.css
new file mode 100644
index 0000000..85fbe1b
--- /dev/null
+++ b/bricks-darkcss-doodle/dist/style.css
@@ -0,0 +1,16 @@
+html, body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: #000;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+* {
+  box-sizing: border-box;
+}
diff --git a/bricks-darkcss-doodle/license.txt b/bricks-darkcss-doodle/license.txt
new file mode 100644
index 0000000..133a913
--- /dev/null
+++ b/bricks-darkcss-doodle/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Aragakey (https://codepen.io/aragakey/pen/YMvPRd)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/bricks-darkcss-doodle/src/index.html b/bricks-darkcss-doodle/src/index.html
new file mode 100644
index 0000000..ab4ad0a
--- /dev/null
+++ b/bricks-darkcss-doodle/src/index.html
@@ -0,0 +1,74 @@
+<css-doodle>
+		:doodle {
+	 		@grid: 6x6 / 100vmin;
+		}
+		color: hsla(
+    	calc(360 - @i() * 4), 70%, 68%, @r(.99)
+  	);
+		@nth(1, 3, 5, 13, 15, 17, 25, 27, 29) {
+	  	z-index: 100;
+
+	  	::after{
+				content: "";
+				opacity: .5;
+				position: absolute;
+				z-index: 100;
+				top: 50%;
+				left: 50%;
+				@size: 100%;
+	    	background-image: linear-gradient(
+		     	transparent calc(25% - 1px),
+		     	#000 calc(25% - 1px),
+		     	#000 calc(25% + 1px),
+		     	transparent calc(25% + 1px),
+		     	transparent calc(75% - 1px),
+		     	#000 calc(75% - 1px),
+		     	#000 calc(75% + 1px),
+		     	transparent calc(75% + 1px)),linear-gradient(90deg,
+		     	transparent calc(25% - 1px),
+		     	#000 calc(25% - 1px),
+		     	#000 calc(25% + 1px),
+		     	transparent calc(25% + 1px),
+		     	transparent calc(75% - 1px),
+		     	#000 calc(75% - 1px),
+		     	#000 calc(75% + 1px),
+	     		transparent calc(75% + 1px)
+     		);
+	    	background-color: currentColor;
+	    	transition: .8s ease all;
+	  		transform: rotate(@p(0deg, 90deg, 180deg, -90deg)); 
+	  	}
+		}
+		@nth(1, 3, 5, 13, 15, 17, 25, 27, 29, 8, 10, 12, 20, 22, 24, 32, 34, 36) {
+	  ::before {
+	   content: "";
+	   position: absolute;
+	   top: 0; left: 0;
+		 @size: 100%;
+	   background:
+	    radial-gradient(circle at 50% 100%, currentColor 22.2%, transparent 22.2%, transparent calc(22.2% + 2px), currentColor calc(22.2% + 2px), currentColor 44.4%, transparent 44.4%);
+	   transform: rotate(@p(0deg, 90deg, 180deg, -90deg));
+	   transition: .8s ease all;
+	  }
+	 }
+		@nth(2, 4, 6, 14, 16, 18, 26, 28, 30, 7, 9, 11, 19, 21, 23, 31, 33, 35) {
+	  ::after {
+	   content: "";
+	   position: absolute;
+	   top: calc(25% - 2px);
+	   left: calc(25% - 2px);
+		 @size: 50%;
+		 border: 2px solid #000;
+	  }
+	 ::before {
+	   content: "";
+	   position: absolute;
+	   top: 0;
+	   left: 0;
+		 @size: 100%;
+	   background: linear-gradient(45deg, transparent 50%, currentColor 50%);
+	   transition: .8s ease all;
+	   transform: rotate(@p(0deg, 90deg, 180deg, -90deg)); 
+	  }
+	 }
+	</css-doodle>
\ No newline at end of file
diff --git a/bricks-darkcss-doodle/src/script.babel b/bricks-darkcss-doodle/src/script.babel
new file mode 100644
index 0000000..9268b1d
--- /dev/null
+++ b/bricks-darkcss-doodle/src/script.babel
@@ -0,0 +1,6 @@
+document.addEventListener('click', function(e) {
+  e.target.update && e.target.update();
+});
+document.addEventListener('touchstart', function(e) {
+  e.target.update && e.target.update();
+});
\ No newline at end of file
diff --git a/bricks-darkcss-doodle/src/style.scss b/bricks-darkcss-doodle/src/style.scss
new file mode 100644
index 0000000..ab6aa0a
--- /dev/null
+++ b/bricks-darkcss-doodle/src/style.scss
@@ -0,0 +1,16 @@
+html, body {
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+	background: #000;
+}
+
+body {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+* {
+	box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/brutalism/README.markdown b/brutalism/README.markdown
new file mode 100644
index 0000000..8c6d422
--- /dev/null
+++ b/brutalism/README.markdown
@@ -0,0 +1,5 @@
+# Brutalism
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/CrystalS/pen/VwjYxoO](https://codepen.io/CrystalS/pen/VwjYxoO).
+
+https://dribbble.com/shots/6774839-Brutalism
diff --git a/brutalism/dist/index.html b/brutalism/dist/index.html
new file mode 100644
index 0000000..21af27e
--- /dev/null
+++ b/brutalism/dist/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Brutalism</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="stairs stairs--layer">
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+</div>
+<div class="block"></div>
+<div class="stairs">
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/brutalism/dist/style.css b/brutalism/dist/style.css
new file mode 100644
index 0000000..c1d52bd
--- /dev/null
+++ b/brutalism/dist/style.css
@@ -0,0 +1,118 @@
+body {
+  background: #ffcabb;
+  background: linear-gradient(to top, #ffcabb 50%, #f7c0aa 100%);
+  overflow: hidden;
+}
+
+.block {
+  background: #73695D;
+  background: linear-gradient(180deg, #444035 0%, #444035 22%, #73695D 22%, #73695D 35%, #444035 45%, #444035 60%, #73695D 60%, #73695D 73%, #444035 88%, #444035 98%, #73695D 98%);
+  z-index: 0;
+  position: absolute;
+  left: 150px;
+  width: 100px;
+  min-height: 939px;
+  height: 100vh;
+}
+
+.stairs {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 800px;
+}
+.stairs--layer {
+  position: absolute;
+  top: 50px;
+  width: 800px;
+  z-index: 0;
+}
+
+.level {
+  position: relative;
+  display: flex;
+  height: 360px;
+}
+
+.level > * {
+  position: relative;
+  height: 100px;
+}
+
+.level > *:before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -97px;
+  width: 100%;
+  height: 95px;
+  background-image: linear-gradient(180deg, transparent 0%, transparent 30%, #404040 30%, #404040 33%, transparent 33%, transparent 63%, #404040 63%, #404040 66%, transparent 66%, transparent 100%);
+  box-shadow: inset -3px 0px 0 0px #404040;
+  background-size: 10% 100%;
+  border-top: 3px solid #404040;
+}
+.stairs--layer .level > *:before {
+  content: none;
+}
+
+.level > *:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 100px;
+  background-color: #23261C;
+  width: 100%;
+  height: 75px;
+}
+
+.upper {
+  background: #73695D;
+  width: 40%;
+}
+
+.upper:after {
+  height: 55px;
+}
+.stairs--layer .upper:after {
+  height: 75px;
+}
+
+.middle {
+  background: #A69886;
+  transform: skew(0deg, 33deg);
+  transform-origin: left;
+  width: 35%;
+}
+.stairs--layer .middle {
+  background: #73695D;
+  transform: skew(0deg, -33deg);
+}
+.stairs--layer .middle:before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -97px;
+  width: 100%;
+  height: 95px;
+  background-image: linear-gradient(180deg, transparent 0%, transparent 30%, #404040 30%, #404040 33%, transparent 33%, transparent 63%, #404040 63%, #404040 66%, transparent 66%, transparent 100%);
+  box-shadow: inset -3px 0px 0 0px #404040;
+  background-size: 10% 100%;
+  border-top: 3px solid #404040;
+}
+
+.lower {
+  background: #73695D;
+  margin-top: 182px;
+  width: 25%;
+}
+.stairs--layer .lower {
+  background: transparent;
+  margin-top: -182px;
+}
+.lower:after {
+  transform: skewX(-20deg);
+  left: -14px;
+}
+.stairs--layer .lower:after {
+  left: -31px;
+}
\ No newline at end of file
diff --git a/brutalism/license.txt b/brutalism/license.txt
new file mode 100644
index 0000000..b1537bf
--- /dev/null
+++ b/brutalism/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Crystal S (https://codepen.io/CrystalS/pen/VwjYxoO)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/brutalism/src/index.html b/brutalism/src/index.html
new file mode 100644
index 0000000..91ad48d
--- /dev/null
+++ b/brutalism/src/index.html
@@ -0,0 +1,41 @@
+<div class="stairs stairs--layer">
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+</div>
+<div class="block"></div>
+<div class="stairs">
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+	<div class="level">
+		<div class="upper"></div>
+		<div class="middle"></div>
+		<div class="lower"></div>
+	</div>
+</div>
+
diff --git a/brutalism/src/style.scss b/brutalism/src/style.scss
new file mode 100644
index 0000000..57bd502
--- /dev/null
+++ b/brutalism/src/style.scss
@@ -0,0 +1,140 @@
+// Based on this Dribbble shot by Roy Smith
+// https://dribbble.com/shots/6774839-Brutalism
+
+$grey: #D9D9D9;
+$grey-dark: #404040;
+$shade: #23261C;
+$brown: #A69886;
+$brown-dark: #73695D;
+$brown-shade: #444035;
+
+body {
+    background: #ffcabb; 
+    background:linear-gradient(to top, #ffcabb 50%, #f7c0aa 100%);
+    overflow: hidden;
+}
+
+.block {
+    background: $brown-dark;
+    background: linear-gradient(180deg, $brown-shade 0%, $brown-shade 22%, $brown-dark 22%, $brown-dark 35%, $brown-shade 45%, $brown-shade 60%, $brown-dark 60%, $brown-dark 73%, $brown-shade 88%, $brown-shade 98%, $brown-dark 98%);
+    z-index: 0;
+    position: absolute;
+    left: 150px;
+    width: 100px;
+    min-height: 939px;
+    height: 100vh;
+}
+
+.stairs {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    width: 800px;
+
+    &--layer {
+        position: absolute;
+        top: 50px;
+        width: 800px;
+        z-index: 0;
+    }
+}
+
+.level {
+    position: relative;
+    display: flex;
+    height: 360px;
+}
+
+.level > * {
+    position: relative;
+    height: 100px;
+}
+
+.level > *:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -97px;
+    width: 100%;
+    height: 95px;
+    background-image: linear-gradient(180deg, transparent 0%, transparent 30%, $grey-dark 30%, $grey-dark 33%, transparent 33%, transparent 63%, $grey-dark 63%, $grey-dark 66%, transparent 66%, transparent 100%);
+    box-shadow: inset -3px 0px 0 0px $grey-dark;
+    background-size: 10% 100%;
+    border-top: 3px solid $grey-dark;
+
+   .stairs--layer & {
+        content: none;
+    }
+}
+
+.level > *:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 100px;
+    background-color: $shade;
+    width: 100%;
+    height: 75px;    
+}
+
+
+.upper {
+    background: $brown-dark;
+    width: 40%;
+}
+
+.upper:after {
+    height: 55px;
+
+    .stairs--layer & {
+        height: 75px;
+    }
+}
+
+.middle {
+    background:  $brown;
+    transform: skew(0deg, 33deg);
+    transform-origin: left;
+    width: 35%;
+
+    .stairs--layer & {
+        background: $brown-dark;
+        transform: skew(0deg, -33deg);
+    }
+
+    &:before {
+        
+        .stairs--layer & {
+            content: "";
+            display: block;
+            position: absolute;
+            top: -97px;
+            width: 100%;
+            height: 95px;
+            background-image: linear-gradient(180deg, transparent 0%, transparent 30%, $grey-dark 30%, $grey-dark 33%, transparent 33%, transparent 63%, $grey-dark 63%, $grey-dark 66%, transparent 66%, transparent 100%);
+            box-shadow: inset -3px 0px 0 0px $grey-dark;
+            background-size: 10% 100%;
+            border-top: 3px solid $grey-dark;
+        }        
+    }
+}
+
+.lower {
+    background:  $brown-dark;
+    margin-top: 182px;
+    width: 25%;
+
+    .stairs--layer & {
+        background: transparent;
+        margin-top: -182px;
+    }
+
+    &:after {
+        transform: skewX(-20deg);  
+        left: -14px;  
+        
+        .stairs--layer & {
+            left: -31px;  
+        }
+    }
+}
\ No newline at end of file
diff --git a/bubble-sort-colors/README.markdown b/bubble-sort-colors/README.markdown
new file mode 100644
index 0000000..b4f74e3
--- /dev/null
+++ b/bubble-sort-colors/README.markdown
@@ -0,0 +1,4 @@
+# Bubble Sort Colors
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/borntofrappe/pen/WWLXGN](https://codepen.io/borntofrappe/pen/WWLXGN).
+
+ Using CSS grid and a few lines of JavaScript, visualize a bubble sort algorithm with a bit of a rainbow.
\ No newline at end of file
diff --git a/bubble-sort-colors/dist/index.html b/bubble-sort-colors/dist/index.html
new file mode 100644
index 0000000..5112838
--- /dev/null
+++ b/bubble-sort-colors/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Bubble Sort Colors</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- include a single button, to be absolute positioned in the center of the viewport
+the columns of different colors are added through the script
+-->
+<button>
+  🌈 Sort <span>🌈</span>
+</button>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/bubble-sort-colors/dist/script.js b/bubble-sort-colors/dist/script.js
new file mode 100644
index 0000000..d99940b
--- /dev/null
+++ b/bubble-sort-colors/dist/script.js
@@ -0,0 +1,96 @@
+/*
+variables tweaking the design
+
+- numberOfColumns: the number of columns to be included in the viewport
+  ! the value is capped to 360 to have at most one color for each hue in the [0-360] color wheel
+- duration: the number of seconds it takes to complete the bubble sort
+  ! this does not account for the animation of the button, but the animation of the columns only
+
+- lightness and saturation: default values for the hsl color
+*/
+const numberOfColumns = 359;
+const duration = 7.5;
+const saturation = 70;
+const lightness = 70;
+
+// array describing the hues of the different columns, to avoid doubles
+const hues = [];
+// function returning a random hue, which is not already in the hues array
+const uniqueHue = () => {
+  const hue = Math.floor(Math.random() * 360);
+  // if the hue is already present re-run the function
+  if (hues.includes(hue)) {
+    return uniqueHue();
+  }
+  // else add the hue to the array and return its value
+  hues.push(hue);
+  return hue;
+};
+
+// select the node in which to add the columns
+const body = document.querySelector('body');
+
+// in the body include as many div elements as specified by the columns variable
+for (let i = 0; i < Math.min(numberOfColumns, 359); i += 1) {
+  const columns = document.createElement('div');
+  // with a unique hue
+  const hue = uniqueHue();
+  columns.style.background = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+  // with a transition incrementally delayed for each successive column
+  // ! ultimately this has the effect of swapping the columns one after the other
+  columns.style.transition = `all 0.2s ${duration / numberOfColumns * i}s ease-out`;
+  // add a data attribute to rapidly order the columns according to the hue value
+  columns.setAttribute('data-hue', hue);
+  body.appendChild(columns);
+}
+
+// target the button
+const button = document.querySelector('button');
+
+// function called to sort the items of an array according to data-hue attribute
+function bubbleSort(arr) {
+  // bubble sort algorithm
+  // instead of swapping the items based on their values, swap them on the basis of the data-hue attribute
+  for (let n = arr.length; n >= 0; n -= 1) {
+    for (let i = 0; i < n - 1; i += 1) {
+      const currentPosition = i;
+      const nextPosition = i + 1;
+
+      const current = arr[currentPosition];
+      const next = arr[nextPosition];
+
+      const currentHue = Number.parseInt(current.getAttribute('data-hue'), 10);
+      const nextHue = Number.parseInt(next.getAttribute('data-hue'), 10);
+
+      if (currentHue > nextHue) {
+        [arr[currentPosition], arr[nextPosition]] = [arr[nextPosition], arr[currentPosition]];
+      }
+    }
+  }
+  return arr;
+}
+
+// function called when the button is pressed
+function handleClick() {
+  // add the class prompting the transition
+  button.classList.add('clicked');
+  // once the button's animation is complete
+  button.addEventListener('animationend', () => {
+    // target all the columns
+    const columns = body.querySelectorAll('div');
+    // sort an copy of the node list, converting it first to an array
+    const sortedColumns = bubbleSort([...columns]);
+
+    // loop through the sortedColumns array
+    for (let i = 0; i < sortedColumns.length; i += 1) {
+      // find the column in the unsorted data structure with the data-hue attribute matching the sorted value
+      const sortedColumn = sortedColumns[i];
+      const matchingColumn = [...columns].find(column => column.getAttribute('data-hue') === sortedColumn.getAttribute('data-hue'));
+      // apply a property of order beginning with the smallest values, pushing the smaller hues to the beginning of the grid
+      matchingColumn.style.order = i - sortedColumns.length;
+    }
+  });
+}
+
+// on click call the function prompting the sorting and the application of the order property according to the hue
+button.addEventListener('click', handleClick);
\ No newline at end of file
diff --git a/bubble-sort-colors/dist/style.css b/bubble-sort-colors/dist/style.css
new file mode 100644
index 0000000..def0012
--- /dev/null
+++ b/bubble-sort-colors/dist/style.css
@@ -0,0 +1,67 @@
+@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy");
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+/* specify the width and height of the body to encompass the viewport */
+body {
+  width: 100vw;
+  height: 100vh;
+  /* include a grid whose items are automatically added as column and occupy a fraction of the width */
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+}
+
+/* absolute position the button in the center of teh viewport */
+button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 0.6rem 1.25rem;
+  background: hsl(0, 0%, 100%);
+  border: none;
+  border-radius: 10px;
+  box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.3);
+  color: #1c2d4a;
+  text-transform: uppercase;
+  font-family: "Luckiest Guy", cursive;
+  font-size: 2rem;
+  letter-spacing: 0.3rem;
+  /* transition for the transform and box-shadow properties */
+  transition: all 0.3s ease-out;
+}
+/* on hover slightly elevate the button */
+button:hover {
+  transform: translate(-50%, calc(-50% - 2px));
+  box-shadow: 0 2px 7px hsla(0, 0%, 0%, 0.4);
+}
+/* when a class of .clicked is added (through the script) animate the button out of sight */
+button.clicked {
+  animation: clicked 0.8s cubic-bezier(0.13, 1.03, 0.72, 1.32) forwards;
+}
+
+/* animation to have the button pushed downward and then disappear as it returns to its original location */
+@keyframes clicked {
+  10%,
+  35% {
+    transform: translate(-50%, calc(-50% + 8px)) scaleY(0.95);
+    box-shadow: 0 1px 5px hsla(0, 0%, 0%, 0.2);
+    opacity: 1;
+    visibility: visible;
+  }
+  80%,
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+
+button span {
+  display: inline-block;
+  transform: rotateY(180deg);
+}
\ No newline at end of file
diff --git a/bubble-sort-colors/license.txt b/bubble-sort-colors/license.txt
new file mode 100644
index 0000000..ce0286d
--- /dev/null
+++ b/bubble-sort-colors/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Gabriele Corti (https://codepen.io/borntofrappe/pen/WWLXGN)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/bubble-sort-colors/src/index.html b/bubble-sort-colors/src/index.html
new file mode 100644
index 0000000..5d93aed
--- /dev/null
+++ b/bubble-sort-colors/src/index.html
@@ -0,0 +1,6 @@
+<!-- include a single button, to be absolute positioned in the center of the viewport
+the columns of different colors are added through the script
+-->
+<button>
+  🌈 Sort <span>🌈</span>
+</button>
\ No newline at end of file
diff --git a/bubble-sort-colors/src/script.js b/bubble-sort-colors/src/script.js
new file mode 100644
index 0000000..7a020ae
--- /dev/null
+++ b/bubble-sort-colors/src/script.js
@@ -0,0 +1,96 @@
+/*
+variables tweaking the design
+
+- numberOfColumns: the number of columns to be included in the viewport
+  ! the value is capped to 360 to have at most one color for each hue in the [0-360] color wheel
+- duration: the number of seconds it takes to complete the bubble sort
+  ! this does not account for the animation of the button, but the animation of the columns only
+
+- lightness and saturation: default values for the hsl color
+*/
+const numberOfColumns = 359;
+const duration = 7.5;
+const saturation = 70;
+const lightness = 70;
+
+// array describing the hues of the different columns, to avoid doubles
+const hues = [];
+// function returning a random hue, which is not already in the hues array
+const uniqueHue = () => {
+  const hue = Math.floor(Math.random() * 360);
+  // if the hue is already present re-run the function
+  if (hues.includes(hue)) {
+    return uniqueHue();
+  }
+  // else add the hue to the array and return its value
+  hues.push(hue);
+  return hue;
+};
+
+// select the node in which to add the columns
+const body = document.querySelector('body');
+
+// in the body include as many div elements as specified by the columns variable
+for (let i = 0; i < Math.min(numberOfColumns, 359); i += 1) {
+  const columns = document.createElement('div');
+  // with a unique hue
+  const hue = uniqueHue();
+  columns.style.background = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+  // with a transition incrementally delayed for each successive column
+  // ! ultimately this has the effect of swapping the columns one after the other
+  columns.style.transition = `all 0.2s ${duration / numberOfColumns * i}s ease-out`;
+  // add a data attribute to rapidly order the columns according to the hue value
+  columns.setAttribute('data-hue', hue);
+  body.appendChild(columns);
+}
+
+// target the button
+const button = document.querySelector('button');
+
+// function called to sort the items of an array according to data-hue attribute
+function bubbleSort(arr) {
+  // bubble sort algorithm
+  // instead of swapping the items based on their values, swap them on the basis of the data-hue attribute
+  for (let n = arr.length; n >= 0; n -= 1) {
+    for (let i = 0; i < n - 1; i += 1) {
+      const currentPosition = i;
+      const nextPosition = i + 1;
+
+      const current = arr[currentPosition];
+      const next = arr[nextPosition];
+
+      const currentHue = Number.parseInt(current.getAttribute('data-hue'), 10);
+      const nextHue = Number.parseInt(next.getAttribute('data-hue'), 10);
+
+      if (currentHue > nextHue) {
+        [arr[currentPosition], arr[nextPosition]] = [arr[nextPosition], arr[currentPosition]];
+      }
+    }
+  }
+  return arr;
+}
+
+// function called when the button is pressed
+function handleClick() {
+  // add the class prompting the transition
+  button.classList.add('clicked');
+  // once the button's animation is complete
+  button.addEventListener('animationend', () => {
+    // target all the columns
+    const columns = body.querySelectorAll('div');
+    // sort an copy of the node list, converting it first to an array
+    const sortedColumns = bubbleSort([...columns]);
+
+    // loop through the sortedColumns array
+    for (let i = 0; i < sortedColumns.length; i += 1) {
+      // find the column in the unsorted data structure with the data-hue attribute matching the sorted value
+      const sortedColumn = sortedColumns[i];
+      const matchingColumn = [...columns].find(column => column.getAttribute('data-hue') === sortedColumn.getAttribute('data-hue'));
+      // apply a property of order beginning with the smallest values, pushing the smaller hues to the beginning of the grid
+      matchingColumn.style.order = i - sortedColumns.length;
+    }
+  });
+}
+
+// on click call the function prompting the sorting and the application of the order property according to the hue
+button.addEventListener('click', handleClick);
diff --git a/bubble-sort-colors/src/style.css b/bubble-sort-colors/src/style.css
new file mode 100644
index 0000000..def0012
--- /dev/null
+++ b/bubble-sort-colors/src/style.css
@@ -0,0 +1,67 @@
+@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy");
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+/* specify the width and height of the body to encompass the viewport */
+body {
+  width: 100vw;
+  height: 100vh;
+  /* include a grid whose items are automatically added as column and occupy a fraction of the width */
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+}
+
+/* absolute position the button in the center of teh viewport */
+button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 0.6rem 1.25rem;
+  background: hsl(0, 0%, 100%);
+  border: none;
+  border-radius: 10px;
+  box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.3);
+  color: #1c2d4a;
+  text-transform: uppercase;
+  font-family: "Luckiest Guy", cursive;
+  font-size: 2rem;
+  letter-spacing: 0.3rem;
+  /* transition for the transform and box-shadow properties */
+  transition: all 0.3s ease-out;
+}
+/* on hover slightly elevate the button */
+button:hover {
+  transform: translate(-50%, calc(-50% - 2px));
+  box-shadow: 0 2px 7px hsla(0, 0%, 0%, 0.4);
+}
+/* when a class of .clicked is added (through the script) animate the button out of sight */
+button.clicked {
+  animation: clicked 0.8s cubic-bezier(0.13, 1.03, 0.72, 1.32) forwards;
+}
+
+/* animation to have the button pushed downward and then disappear as it returns to its original location */
+@keyframes clicked {
+  10%,
+  35% {
+    transform: translate(-50%, calc(-50% + 8px)) scaleY(0.95);
+    box-shadow: 0 1px 5px hsla(0, 0%, 0%, 0.2);
+    opacity: 1;
+    visibility: visible;
+  }
+  80%,
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+
+button span {
+  display: inline-block;
+  transform: rotateY(180deg);
+}
\ No newline at end of file
diff --git a/bubblegum-on-hover/README.markdown b/bubblegum-on-hover/README.markdown
new file mode 100644
index 0000000..2831e87
--- /dev/null
+++ b/bubblegum-on-hover/README.markdown
@@ -0,0 +1,5 @@
+# Bubblegum on hover
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/natszafraniec/pen/oNGmoOa](https://codepen.io/natszafraniec/pen/oNGmoOa).
+
+
diff --git a/bubblegum-on-hover/dist/index.html b/bubblegum-on-hover/dist/index.html
new file mode 100644
index 0000000..b5f07c9
--- /dev/null
+++ b/bubblegum-on-hover/dist/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Bubblegum on hover</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="scene flex">
+	<svg class="scene__animation" id="animation" xmlns="http://www.w3.org/2000/svg" role="img" preserveAspectRatio="xMidYMid slice">
+		<filter id="goo">
+			<feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
+			<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="goo" />
+			<feBlend in="SourceGraphic" in2="goo" />
+		</filter>
+		<g filter="url(#goo)"></g>
+	</svg>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/bubblegum-on-hover/dist/script.js b/bubblegum-on-hover/dist/script.js
new file mode 100644
index 0000000..4c9510e
--- /dev/null
+++ b/bubblegum-on-hover/dist/script.js
@@ -0,0 +1,159 @@
+class Animation {
+	cols = 16;
+	rows = 9;
+
+	circleSize = 30;
+	scaleMin = 0.15;
+	scaleMax = 2.5;
+	range = 175;
+	
+	spacingHorizontal = 60;
+	spacingVertical = 80;
+	fill = getComputedStyle(document.documentElement).getPropertyValue('--circles');
+
+	svgMargin = 40;
+	svgHeight = 0;
+	svgWidth = 0;
+
+	circles = [];
+	screen = {
+		width: window.innerWidth,
+		height: window.innerHeight
+	};
+	mouse = {
+		x: window.innerWidth / 2,
+		y: window.innerHeight / 2
+	};
+	mouseStored = Object.assign({}, this.mouse);
+
+	constructor(selector) {
+		this.svg = document.querySelector(selector);
+		this.g = this.svg.querySelector("g");
+
+		this.svgWidth = this.cols * this.circleSize + 2 * this.svgMargin + (this.cols - 1) * this.spacingHorizontal;
+		this.svgHeight = this.rows + 2 * this.svgMargin + (this.rows - 1) * this.spacingVertical;
+
+		this.svg.setAttribute("viewBox", `0 0 ${this.svgWidth} ${this.svgHeight}`);
+
+		this.addEventListeners();
+		// Draw all the circles
+		this.draw();
+		// And animate them if the user is fine with it
+		window.matchMedia('(prefers-reduced-motion: no-preference)').matches ? this.animate() : null;
+	}
+
+	addEventListeners() {
+		let self = this;
+		// Don't redraw everything, only recalculate the centers of all arrows
+		window.addEventListener("resize", function() {
+			self.screen.width = window.innerWidth;
+			self.screen.height = window.innerHeight;
+			self.setCircleCenters();
+		});
+	}
+
+	draw() {
+		for(var i = 0; i < this.rows; i++) {
+			const offset = i % 2;
+			for(var j = 0; j < this.cols + 2 * offset; j++) {
+				// We're drawing the initial lines horizontally
+				let c = new Circle(
+					this.svgMargin + j*this.circleSize + j*this.spacingHorizontal - (offset * (this.spacingHorizontal + this.circleSize)/2),
+					this.svgMargin + i*this.spacingVertical,
+					this.circleSize,
+					this.fill
+				);
+
+				// Set a transform origin and add the HTML element to the SVG
+				const cElement = c.getElement();
+				gsap.set(cElement, {transformOrigin: "50% 50%"});
+				this.g.appendChild(cElement);
+
+				this.circles.push(c);
+			}
+		}
+
+		this.setCircleCenters();
+	}
+	
+	clamp(num, min, max) {
+		return Math.min(Math.max(num, min), max);
+	}
+
+	setMouseCoords(event) {
+		this.mouse.x = event.clientX;
+		this.mouse.y = event.clientY;
+	}
+
+	setCircleCenters() {
+		this.circles.forEach(circle => {
+			// Get the center of the line
+			// Instead of mapping svg coords to the screen position, get the position on the actual screen using boundingRect
+			const boundingRect = circle.getElement().getBoundingClientRect();
+			circle.center = {
+				x: boundingRect.x + boundingRect.width / 2,
+				y: boundingRect.y + boundingRect.height / 2
+			};
+		})
+	}
+
+	animate() {
+		// Listen for the mouse movements
+		window.addEventListener("mousemove", this.setMouseCoords.bind(this));
+		// And use the ticker to update the rotation accordingly
+		gsap.ticker.add(this.setCircleScale.bind(this));
+	}
+
+	setCircleScale() {
+		// Don't do anything if the cursor's position is the same as in the previous tick
+		if (this.mouseStored.x === this.mouse.x && this.mouseStored.y === this.mouse.y) return;
+
+		this.circles.forEach(circle => {
+			// d = √[(x2 − x1)2 + (y2 − y1)2]
+			const distance = Math.sqrt((Math.pow((circle.center.x - this.mouse.x), 2) + Math.pow((circle.center.y - this.mouse.y), 2)));
+			const scale = this.range / (distance + this.circleSize);
+
+			gsap.to(
+				circle.getElement(),
+				{
+					scale: this.clamp(scale, this.scaleMin, this.scaleMax)
+				}
+			);
+		});
+
+		// Store the mouse position for the next tick
+		this.mouseStored.x = this.mouse.x;
+		this.mouseStored.y = this.mouse.y;
+	}
+}
+
+class Circle {
+	cx = 0;
+	cy = 0;
+	r = 0;
+	fill = "white";
+	element = null;
+
+	constructor(cx, cy, r, fill) {
+		this.cx = cx;
+		this.cy = cy;
+		this.r = r;
+		this.fill = fill;
+		this.element = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
+
+		this.setElement();
+	}
+
+	getElement() {
+		return this.element;
+	}
+
+	setElement(cx, cy, r, fill) {
+		this.element.setAttribute("cx", cx ? cx : this.cx);
+		this.element.setAttribute("cy", cy ? cy : this.cy);
+		this.element.setAttribute("r", r ? r : this.r);
+		this.element.setAttribute("fill", fill ? fill : this.fill);
+	}
+}
+
+const animation = new Animation("#animation");
\ No newline at end of file
diff --git a/bubblegum-on-hover/dist/style.css b/bubblegum-on-hover/dist/style.css
new file mode 100644
index 0000000..6b74dc0
--- /dev/null
+++ b/bubblegum-on-hover/dist/style.css
@@ -0,0 +1,25 @@
+:root {
+  --circles: #ff9ff3;
+  --background: #f368e0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.flex {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.scene {
+  background: var(--background);
+  height: 100vh;
+}
+.scene__animation {
+  height: 100%;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/bubblegum-on-hover/license.txt b/bubblegum-on-hover/license.txt
new file mode 100644
index 0000000..fe506a2
--- /dev/null
+++ b/bubblegum-on-hover/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Natalia 🤟 (https://codepen.io/natszafraniec/pen/oNGmoOa)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/bubblegum-on-hover/src/index.html b/bubblegum-on-hover/src/index.html
new file mode 100644
index 0000000..0168fba
--- /dev/null
+++ b/bubblegum-on-hover/src/index.html
@@ -0,0 +1,10 @@
+<div class="scene flex">
+	<svg class="scene__animation" id="animation" xmlns="http://www.w3.org/2000/svg" role="img" preserveAspectRatio="xMidYMid slice">
+		<filter id="goo">
+			<feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
+			<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="goo" />
+			<feBlend in="SourceGraphic" in2="goo" />
+		</filter>
+		<g filter="url(#goo)"></g>
+	</svg>
+</div>
\ No newline at end of file
diff --git a/bubblegum-on-hover/src/script.js b/bubblegum-on-hover/src/script.js
new file mode 100644
index 0000000..4c9510e
--- /dev/null
+++ b/bubblegum-on-hover/src/script.js
@@ -0,0 +1,159 @@
+class Animation {
+	cols = 16;
+	rows = 9;
+
+	circleSize = 30;
+	scaleMin = 0.15;
+	scaleMax = 2.5;
+	range = 175;
+	
+	spacingHorizontal = 60;
+	spacingVertical = 80;
+	fill = getComputedStyle(document.documentElement).getPropertyValue('--circles');
+
+	svgMargin = 40;
+	svgHeight = 0;
+	svgWidth = 0;
+
+	circles = [];
+	screen = {
+		width: window.innerWidth,
+		height: window.innerHeight
+	};
+	mouse = {
+		x: window.innerWidth / 2,
+		y: window.innerHeight / 2
+	};
+	mouseStored = Object.assign({}, this.mouse);
+
+	constructor(selector) {
+		this.svg = document.querySelector(selector);
+		this.g = this.svg.querySelector("g");
+
+		this.svgWidth = this.cols * this.circleSize + 2 * this.svgMargin + (this.cols - 1) * this.spacingHorizontal;
+		this.svgHeight = this.rows + 2 * this.svgMargin + (this.rows - 1) * this.spacingVertical;
+
+		this.svg.setAttribute("viewBox", `0 0 ${this.svgWidth} ${this.svgHeight}`);
+
+		this.addEventListeners();
+		// Draw all the circles
+		this.draw();
+		// And animate them if the user is fine with it
+		window.matchMedia('(prefers-reduced-motion: no-preference)').matches ? this.animate() : null;
+	}
+
+	addEventListeners() {
+		let self = this;
+		// Don't redraw everything, only recalculate the centers of all arrows
+		window.addEventListener("resize", function() {
+			self.screen.width = window.innerWidth;
+			self.screen.height = window.innerHeight;
+			self.setCircleCenters();
+		});
+	}
+
+	draw() {
+		for(var i = 0; i < this.rows; i++) {
+			const offset = i % 2;
+			for(var j = 0; j < this.cols + 2 * offset; j++) {
+				// We're drawing the initial lines horizontally
+				let c = new Circle(
+					this.svgMargin + j*this.circleSize + j*this.spacingHorizontal - (offset * (this.spacingHorizontal + this.circleSize)/2),
+					this.svgMargin + i*this.spacingVertical,
+					this.circleSize,
+					this.fill
+				);
+
+				// Set a transform origin and add the HTML element to the SVG
+				const cElement = c.getElement();
+				gsap.set(cElement, {transformOrigin: "50% 50%"});
+				this.g.appendChild(cElement);
+
+				this.circles.push(c);
+			}
+		}
+
+		this.setCircleCenters();
+	}
+	
+	clamp(num, min, max) {
+		return Math.min(Math.max(num, min), max);
+	}
+
+	setMouseCoords(event) {
+		this.mouse.x = event.clientX;
+		this.mouse.y = event.clientY;
+	}
+
+	setCircleCenters() {
+		this.circles.forEach(circle => {
+			// Get the center of the line
+			// Instead of mapping svg coords to the screen position, get the position on the actual screen using boundingRect
+			const boundingRect = circle.getElement().getBoundingClientRect();
+			circle.center = {
+				x: boundingRect.x + boundingRect.width / 2,
+				y: boundingRect.y + boundingRect.height / 2
+			};
+		})
+	}
+
+	animate() {
+		// Listen for the mouse movements
+		window.addEventListener("mousemove", this.setMouseCoords.bind(this));
+		// And use the ticker to update the rotation accordingly
+		gsap.ticker.add(this.setCircleScale.bind(this));
+	}
+
+	setCircleScale() {
+		// Don't do anything if the cursor's position is the same as in the previous tick
+		if (this.mouseStored.x === this.mouse.x && this.mouseStored.y === this.mouse.y) return;
+
+		this.circles.forEach(circle => {
+			// d = √[(x2 − x1)2 + (y2 − y1)2]
+			const distance = Math.sqrt((Math.pow((circle.center.x - this.mouse.x), 2) + Math.pow((circle.center.y - this.mouse.y), 2)));
+			const scale = this.range / (distance + this.circleSize);
+
+			gsap.to(
+				circle.getElement(),
+				{
+					scale: this.clamp(scale, this.scaleMin, this.scaleMax)
+				}
+			);
+		});
+
+		// Store the mouse position for the next tick
+		this.mouseStored.x = this.mouse.x;
+		this.mouseStored.y = this.mouse.y;
+	}
+}
+
+class Circle {
+	cx = 0;
+	cy = 0;
+	r = 0;
+	fill = "white";
+	element = null;
+
+	constructor(cx, cy, r, fill) {
+		this.cx = cx;
+		this.cy = cy;
+		this.r = r;
+		this.fill = fill;
+		this.element = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
+
+		this.setElement();
+	}
+
+	getElement() {
+		return this.element;
+	}
+
+	setElement(cx, cy, r, fill) {
+		this.element.setAttribute("cx", cx ? cx : this.cx);
+		this.element.setAttribute("cy", cy ? cy : this.cy);
+		this.element.setAttribute("r", r ? r : this.r);
+		this.element.setAttribute("fill", fill ? fill : this.fill);
+	}
+}
+
+const animation = new Animation("#animation");
\ No newline at end of file
diff --git a/bubblegum-on-hover/src/style.scss b/bubblegum-on-hover/src/style.scss
new file mode 100644
index 0000000..eabf0a5
--- /dev/null
+++ b/bubblegum-on-hover/src/style.scss
@@ -0,0 +1,26 @@
+:root {
+	--circles: #ff9ff3;
+	--background: #f368e0;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+}
+
+.flex {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+}
+
+.scene {
+	background: var(--background);
+	height: 100vh;
+
+	&__animation {
+		height: 100%;
+		width: 100%;
+	}
+}
\ No newline at end of file
diff --git a/bug-report-d20/README.markdown b/bug-report-d20/README.markdown
new file mode 100644
index 0000000..233180f
--- /dev/null
+++ b/bug-report-d20/README.markdown
@@ -0,0 +1,4 @@
+# Bug Report D20
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/chrisvfritz/pen/BxXyEJ](https://codepen.io/chrisvfritz/pen/BxXyEJ).
+
+ 
\ No newline at end of file
diff --git a/bug-report-d20/dist/index.html b/bug-report-d20/dist/index.html
new file mode 100644
index 0000000..a7758d7
--- /dev/null
+++ b/bug-report-d20/dist/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Bug Report D20</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script src="https://unpkg.com/vue"></script>
+
+<div id="app">
+  <div 
+    class="content"
+    @click="roll"
+  >
+    <div 
+      :class="[
+        'die',
+        { rolling: isRolling }
+      ]"
+      :data-face="currentFaceIndex + 1"
+    >
+      <figure
+        v-for="n in 20"
+        :class="[
+          'face', 
+          'face-' + n
+        ]"
+      >
+        <span class="face-text">
+          {{ faces[n - 1] }}
+        </span>
+      </figure>
+    </div>
+  </div>
+</div>
+
+<p class="source">(built off <a href="https://codepen.io/vicentemundim/details/cenIh">3d d20 die with pure CSS</a>)</p>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/bug-report-d20/dist/script.js b/bug-report-d20/dist/script.js
new file mode 100644
index 0000000..4b7b93d
--- /dev/null
+++ b/bug-report-d20/dist/script.js
@@ -0,0 +1,42 @@
+new Vue({
+  el: '#app',
+  data: {
+    currentFaceIndex: 0,
+    isRolling: false,
+    faces: [
+    'works on my machine',
+    'try updating',
+    'but the tests pass',
+    'did you rebase?',
+    'huh',
+    'even on master?',
+    'are you sure?',
+    'even in prod?',
+    'oh, windows?',
+    'oh, high sierra?',
+    'what error?',
+    '🤔',
+    'every time?',
+    'i\'m on vacation',
+    'force refresh',
+    'no, it should not',
+    'it\'s a feature',
+    'don\'t do that then',
+    'try a fresh clone',
+    'it sorta works'] },
+
+
+  computed: {
+    currentFace() {
+      return this.faces[this.currentFaceIndex];
+    } },
+
+  methods: {
+    roll() {
+      if (this.isRolling) return;
+      this.currentFaceIndex = Math.floor(Math.random() * this.faces.length);
+      this.isRolling = true;
+      setTimeout(() => {
+        this.isRolling = false;
+      }, 3000);
+    } } });
\ No newline at end of file
diff --git a/bug-report-d20/dist/style.css b/bug-report-d20/dist/style.css
new file mode 100644
index 0000000..5b05cd8
--- /dev/null
+++ b/bug-report-d20/dist/style.css
@@ -0,0 +1,273 @@
+@-webkit-keyframes roll {
+  10% {
+    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+  }
+  30% {
+    -webkit-transform: rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px);
+            transform: rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px);
+  }
+  50% {
+    -webkit-transform: rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px);
+            transform: rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px);
+  }
+  70% {
+    -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(0deg);
+            transform: rotateX(360deg) rotateY(720deg) rotateZ(0deg);
+  }
+  90% {
+    -webkit-transform: rotateX(480deg) rotateY(960deg) rotateZ(0deg);
+            transform: rotateX(480deg) rotateY(960deg) rotateZ(0deg);
+  }
+}
+@keyframes roll {
+  10% {
+    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+  }
+  30% {
+    -webkit-transform: rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px);
+            transform: rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px);
+  }
+  50% {
+    -webkit-transform: rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px);
+            transform: rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px);
+  }
+  70% {
+    -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(0deg);
+            transform: rotateX(360deg) rotateY(720deg) rotateZ(0deg);
+  }
+  90% {
+    -webkit-transform: rotateX(480deg) rotateY(960deg) rotateZ(0deg);
+            transform: rotateX(480deg) rotateY(960deg) rotateZ(0deg);
+  }
+}
+body {
+  background: #35495e;
+  padding: 20px;
+}
+
+.content {
+  margin: auto auto;
+  position: relative;
+  width: 400px;
+  height: 400px;
+  -webkit-perspective: 1500px;
+          perspective: 1500px;
+}
+
+.die {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  transition: -webkit-transform 0.5s ease-out;
+  transition: transform 0.5s ease-out;
+  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
+  cursor: pointer;
+  -webkit-transform: rotateX(-53deg);
+          transform: rotateX(-53deg);
+}
+.die.rolling {
+  -webkit-animation: roll 3s linear;
+          animation: roll 3s linear;
+}
+.die[data-face="1"] {
+  -webkit-transform: rotateX(-53deg) rotateY(0deg);
+          transform: rotateX(-53deg) rotateY(0deg);
+}
+.die[data-face="2"] {
+  -webkit-transform: rotateX(-53deg) rotateY(72deg);
+          transform: rotateX(-53deg) rotateY(72deg);
+}
+.die[data-face="3"] {
+  -webkit-transform: rotateX(-53deg) rotateY(144deg);
+          transform: rotateX(-53deg) rotateY(144deg);
+}
+.die[data-face="4"] {
+  -webkit-transform: rotateX(-53deg) rotateY(216deg);
+          transform: rotateX(-53deg) rotateY(216deg);
+}
+.die[data-face="5"] {
+  -webkit-transform: rotateX(-53deg) rotateY(288deg);
+          transform: rotateX(-53deg) rotateY(288deg);
+}
+.die[data-face="16"] {
+  -webkit-transform: rotateX(127deg) rotateY(-72deg);
+          transform: rotateX(127deg) rotateY(-72deg);
+}
+.die[data-face="17"] {
+  -webkit-transform: rotateX(127deg) rotateY(-144deg);
+          transform: rotateX(127deg) rotateY(-144deg);
+}
+.die[data-face="18"] {
+  -webkit-transform: rotateX(127deg) rotateY(-216deg);
+          transform: rotateX(127deg) rotateY(-216deg);
+}
+.die[data-face="19"] {
+  -webkit-transform: rotateX(127deg) rotateY(-288deg);
+          transform: rotateX(127deg) rotateY(-288deg);
+}
+.die[data-face="20"] {
+  -webkit-transform: rotateX(127deg) rotateY(-360deg);
+          transform: rotateX(127deg) rotateY(-360deg);
+}
+.die[data-face="6"] {
+  -webkit-transform: rotateX(11deg) rotateZ(180deg) rotateY(0deg);
+          transform: rotateX(11deg) rotateZ(180deg) rotateY(0deg);
+}
+.die[data-face="7"] {
+  -webkit-transform: rotateX(11deg) rotateZ(180deg) rotateY(72deg);
+          transform: rotateX(11deg) rotateZ(180deg) rotateY(72deg);
+}
+.die[data-face="8"] {
+  -webkit-transform: rotateX(11deg) rotateZ(180deg) rotateY(144deg);
+          transform: rotateX(11deg) rotateZ(180deg) rotateY(144deg);
+}
+.die[data-face="9"] {
+  -webkit-transform: rotateX(11deg) rotateZ(180deg) rotateY(216deg);
+          transform: rotateX(11deg) rotateZ(180deg) rotateY(216deg);
+}
+.die[data-face="10"] {
+  -webkit-transform: rotateX(11deg) rotateZ(180deg) rotateY(288deg);
+          transform: rotateX(11deg) rotateZ(180deg) rotateY(288deg);
+}
+.die[data-face="11"] {
+  -webkit-transform: rotateX(11deg) rotateY(-252deg);
+          transform: rotateX(11deg) rotateY(-252deg);
+}
+.die[data-face="12"] {
+  -webkit-transform: rotateX(11deg) rotateY(-324deg);
+          transform: rotateX(11deg) rotateY(-324deg);
+}
+.die[data-face="13"] {
+  -webkit-transform: rotateX(11deg) rotateY(-396deg);
+          transform: rotateX(11deg) rotateY(-396deg);
+}
+.die[data-face="14"] {
+  -webkit-transform: rotateX(11deg) rotateY(-468deg);
+          transform: rotateX(11deg) rotateY(-468deg);
+}
+.die[data-face="15"] {
+  -webkit-transform: rotateX(11deg) rotateY(-540deg);
+          transform: rotateX(11deg) rotateY(-540deg);
+}
+.die .face {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  margin: 0 -100px;
+  border-left: 100px solid transparent;
+  border-right: 100px solid transparent;
+  border-bottom: 172px solid rgba(0, 166, 100, 0.75);
+  width: 0px;
+  height: 0px;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  counter-increment: steps 1;
+}
+.die .face .face-text {
+  position: absolute;
+  top: 77.4px;
+  left: -50px;
+  color: #fff;
+  text-shadow: 1px 1px 3px #000;
+  font-size: 21.5px;
+  text-align: center;
+  line-height: 1.3;
+  width: 100px;
+  height: 172px;
+  font-family: monospace;
+}
+.die .face:nth-child(1) {
+  -webkit-transform: rotateY(0deg) translateZ(67px) translateY(-25.8px) rotateX(53deg);
+          transform: rotateY(0deg) translateZ(67px) translateY(-25.8px) rotateX(53deg);
+}
+.die .face:nth-child(2) {
+  -webkit-transform: rotateY(-72deg) translateZ(67px) translateY(-25.8px) rotateX(53deg);
+          transform: rotateY(-72deg) translateZ(67px) translateY(-25.8px) rotateX(53deg);
+}
+.die .face:nth-child(3) {
+  -webkit-transform: rotateY(-144deg) translateZ(67px) translateY(-25.8px) rotateX(53deg);
+          transform: rotateY(-144deg) translateZ(67px) translateY(-25.8px) rotateX(53deg);
+}
+.die .face:nth-child(4) {
+  -webkit-transform: rotateY(-216deg) translateZ(67px) translateY(-25.8px) rotateX(53deg);
+          transform: rotateY(-216deg) translateZ(67px) translateY(-25.8px) rotateX(53deg);
+}
+.die .face:nth-child(5) {
+  -webkit-transform: rotateY(-288deg) translateZ(67px) translateY(-25.8px) rotateX(53deg);
+          transform: rotateY(-288deg) translateZ(67px) translateY(-25.8px) rotateX(53deg);
+}
+.die .face:nth-child(16) {
+  -webkit-transform: rotateY(-108deg) translateZ(67px) translateY(242.52px) rotateZ(180deg) rotateX(53deg);
+          transform: rotateY(-108deg) translateZ(67px) translateY(242.52px) rotateZ(180deg) rotateX(53deg);
+}
+.die .face:nth-child(17) {
+  -webkit-transform: rotateY(-36deg) translateZ(67px) translateY(242.52px) rotateZ(180deg) rotateX(53deg);
+          transform: rotateY(-36deg) translateZ(67px) translateY(242.52px) rotateZ(180deg) rotateX(53deg);
+}
+.die .face:nth-child(18) {
+  -webkit-transform: rotateY(36deg) translateZ(67px) translateY(242.52px) rotateZ(180deg) rotateX(53deg);
+          transform: rotateY(36deg) translateZ(67px) translateY(242.52px) rotateZ(180deg) rotateX(53deg);
+}
+.die .face:nth-child(19) {
+  -webkit-transform: rotateY(108deg) translateZ(67px) translateY(242.52px) rotateZ(180deg) rotateX(53deg);
+          transform: rotateY(108deg) translateZ(67px) translateY(242.52px) rotateZ(180deg) rotateX(53deg);
+}
+.die .face:nth-child(20) {
+  -webkit-transform: rotateY(180deg) translateZ(67px) translateY(242.52px) rotateZ(180deg) rotateX(53deg);
+          transform: rotateY(180deg) translateZ(67px) translateY(242.52px) rotateZ(180deg) rotateX(53deg);
+}
+.die .face:nth-child(6) {
+  -webkit-transform: rotateY(360deg) translateZ(150px) translateY(108.36px) rotateZ(180deg) rotateX(-11deg);
+          transform: rotateY(360deg) translateZ(150px) translateY(108.36px) rotateZ(180deg) rotateX(-11deg);
+}
+.die .face:nth-child(7) {
+  -webkit-transform: rotateY(288deg) translateZ(150px) translateY(108.36px) rotateZ(180deg) rotateX(-11deg);
+          transform: rotateY(288deg) translateZ(150px) translateY(108.36px) rotateZ(180deg) rotateX(-11deg);
+}
+.die .face:nth-child(8) {
+  -webkit-transform: rotateY(216deg) translateZ(150px) translateY(108.36px) rotateZ(180deg) rotateX(-11deg);
+          transform: rotateY(216deg) translateZ(150px) translateY(108.36px) rotateZ(180deg) rotateX(-11deg);
+}
+.die .face:nth-child(9) {
+  -webkit-transform: rotateY(144deg) translateZ(150px) translateY(108.36px) rotateZ(180deg) rotateX(-11deg);
+          transform: rotateY(144deg) translateZ(150px) translateY(108.36px) rotateZ(180deg) rotateX(-11deg);
+}
+.die .face:nth-child(10) {
+  -webkit-transform: rotateY(72deg) translateZ(150px) translateY(108.36px) rotateZ(180deg) rotateX(-11deg);
+          transform: rotateY(72deg) translateZ(150px) translateY(108.36px) rotateZ(180deg) rotateX(-11deg);
+}
+.die .face:nth-child(11) {
+  -webkit-transform: rotateY(252deg) translateZ(150px) translateY(108.36px) rotateX(-11deg);
+          transform: rotateY(252deg) translateZ(150px) translateY(108.36px) rotateX(-11deg);
+}
+.die .face:nth-child(12) {
+  -webkit-transform: rotateY(324deg) translateZ(150px) translateY(108.36px) rotateX(-11deg);
+          transform: rotateY(324deg) translateZ(150px) translateY(108.36px) rotateX(-11deg);
+}
+.die .face:nth-child(13) {
+  -webkit-transform: rotateY(396deg) translateZ(150px) translateY(108.36px) rotateX(-11deg);
+          transform: rotateY(396deg) translateZ(150px) translateY(108.36px) rotateX(-11deg);
+}
+.die .face:nth-child(14) {
+  -webkit-transform: rotateY(468deg) translateZ(150px) translateY(108.36px) rotateX(-11deg);
+          transform: rotateY(468deg) translateZ(150px) translateY(108.36px) rotateX(-11deg);
+}
+.die .face:nth-child(15) {
+  -webkit-transform: rotateY(540deg) translateZ(150px) translateY(108.36px) rotateX(-11deg);
+          transform: rotateY(540deg) translateZ(150px) translateY(108.36px) rotateX(-11deg);
+}
+
+.source {
+  color: #bbb;
+  text-align: center;
+  margin-top: 50px;
+}
+.source a {
+  color: #ccc;
+}
diff --git a/bug-report-d20/license.txt b/bug-report-d20/license.txt
new file mode 100644
index 0000000..d8126e2
--- /dev/null
+++ b/bug-report-d20/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Chris Fritz (https://codepen.io/chrisvfritz/pen/BxXyEJ)
+
+
+Fork of an original work by Vicente Mundim (https://codepen.io/vicentemundim/pen/cenIh)
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/bug-report-d20/src/index.html b/bug-report-d20/src/index.html
new file mode 100644
index 0000000..d899779
--- /dev/null
+++ b/bug-report-d20/src/index.html
@@ -0,0 +1,30 @@
+<script src="https://unpkg.com/vue"></script>
+
+<div id="app">
+  <div 
+    class="content"
+    @click="roll"
+  >
+    <div 
+      :class="[
+        'die',
+        { rolling: isRolling }
+      ]"
+      :data-face="currentFaceIndex + 1"
+    >
+      <figure
+        v-for="n in 20"
+        :class="[
+          'face', 
+          'face-' + n
+        ]"
+      >
+        <span class="face-text">
+          {{ faces[n - 1] }}
+        </span>
+      </figure>
+    </div>
+  </div>
+</div>
+
+<p class="source">(built off <a href="https://codepen.io/vicentemundim/details/cenIh">3d d20 die with pure CSS</a>)</p>
\ No newline at end of file
diff --git a/bug-report-d20/src/script.babel b/bug-report-d20/src/script.babel
new file mode 100644
index 0000000..8cdb286
--- /dev/null
+++ b/bug-report-d20/src/script.babel
@@ -0,0 +1,44 @@
+new Vue({
+  el: '#app',
+  data: {
+    currentFaceIndex: 0,
+    isRolling: false,
+    faces: [
+      'works on my machine',
+      'try updating',
+      'but the tests pass',
+      'did you rebase?',
+      'huh',
+      'even on master?',
+      'are you sure?',
+      'even in prod?',
+      'oh, windows?',
+      'oh, high sierra?',
+      'what error?',
+      '🤔',
+      'every time?',
+      'i\'m on vacation',
+      'force refresh',
+      'no, it should not',
+      'it\'s a feature',
+      'don\'t do that then',
+      'try a fresh clone',
+      'it sorta works'
+    ]
+  },
+  computed: {
+    currentFace() {
+      return this.faces[this.currentFaceIndex]
+    }
+  },
+  methods: {
+    roll() {
+      if (this.isRolling) return
+      this.currentFaceIndex = Math.floor(Math.random() * this.faces.length)
+      this.isRolling = true
+      setTimeout(() => {
+        this.isRolling = false
+      }, 3000)
+    }
+  }
+})
\ No newline at end of file
diff --git a/bug-report-d20/src/style.scss b/bug-report-d20/src/style.scss
new file mode 100644
index 0000000..796a5bf
--- /dev/null
+++ b/bug-report-d20/src/style.scss
@@ -0,0 +1,157 @@
+$containerWidth: 400px;
+$containerHeight: $containerWidth;
+
+$faceWidth:  $containerWidth*0.5;
+$faceHeight: $faceWidth*0.86;
+$faceTextWidth: $faceWidth*0.5;
+$faceTextFontSize: $faceHeight*0.125;
+$faceTextLineHeight: 1.3;
+
+$transitionDuration: 0.5s;
+$animationDuration:  3s;
+
+$angle: 53deg;
+$ringAngle: -11deg;
+$sideAngle: 360deg/5;
+$opacity: 0.75;
+$color: rgba(0, 166, 100, $opacity);
+
+$rotateX: -$angle;
+$translateZ: $faceWidth*0.335;
+$translateY: -$faceHeight*0.15;
+$translateRingZ: $faceWidth*0.75;
+$translateRingY: $faceHeight*0.78 + $translateY;
+$translateLowerZ: $translateZ;
+$translateLowerY: $faceHeight*0.78 + $translateRingY;
+
+@keyframes roll {
+  10% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) }
+  30% { transform: rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px) }
+  50% { transform: rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px) }
+  70% { transform: rotateX(360deg) rotateY(720deg) rotateZ(0deg) }
+  90% { transform: rotateX(480deg) rotateY(960deg) rotateZ(0deg) }
+}
+
+body {
+  background: rgb(53, 73, 94);
+  padding: 20px;
+}
+
+.content {
+  margin: auto auto;
+  position: relative;
+  width: $containerWidth;
+  height: $containerHeight;
+  perspective: 1500px;
+}
+
+.die {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform $transitionDuration ease-out;
+  cursor: pointer;
+  
+  transform: rotateX($rotateX);
+  
+  &.rolling {
+    animation: roll $animationDuration linear;
+  }
+  
+  @for $i from 1 through 5 {
+    &[data-face="#{$i}"] {
+      $angleMultiplier: $i - 1;
+      transform: rotateX(-$angle) rotateY($sideAngle * $angleMultiplier);
+    }
+  }
+  
+  @for $i from 16 through 20 {
+    &[data-face="#{$i}"] {
+      $angleMultiplier: $i - 15;
+      transform: rotateX(-$angle + 180deg) rotateY(-$sideAngle * $angleMultiplier);
+    }
+  }
+  
+  @for $i from 6 through 10 {
+    &[data-face="#{$i}"] {
+      $angleMultiplier: $i - 6;
+      transform: rotateX(-$ringAngle) rotateZ(180deg) rotateY($sideAngle * $angleMultiplier);
+    }
+  }
+  
+  @for $i from 11 through 15 {
+    &[data-face="#{$i}"] {
+      $angleMultiplier: $i - 8;
+      transform: rotateX(-$ringAngle) rotateY(-$sideAngle * $angleMultiplier - $sideAngle/2);
+    }
+  }
+  
+  .face {
+    $horizontalMargin: -$faceWidth*0.5;
+    
+    position: absolute;
+    left: 50%;
+    top: 0;
+    margin: 0 $horizontalMargin;
+    border-left: $faceWidth*0.5 solid transparent;
+    border-right: $faceWidth*0.5 solid transparent;
+    border-bottom: $faceHeight solid $color;
+    width: 0px;
+    height: 0px;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    counter-increment: steps 1;
+  
+    .face-text {
+      position: absolute;
+      top: $faceHeight*0.45;
+      left: -$faceTextWidth / 2;
+      color: #fff;
+      text-shadow: 1px 1px 3px #000;
+      font-size: $faceTextFontSize;
+      text-align: center;
+      line-height: $faceTextLineHeight;
+      width: $faceTextWidth;
+      height: $faceHeight;
+      font-family: monospace;
+    }
+    
+    @for $i from 1 through 5 {
+      &:nth-child(#{$i}) {
+        $angleMultiplier: $i - 1;
+        transform: rotateY(-$sideAngle * $angleMultiplier) translateZ($translateZ) translateY($translateY) rotateX($angle);
+      }
+    }
+      
+    @for $i from 16 through 20 {
+      &:nth-child(#{$i}) {
+        $angleMultiplier: $i - 18;
+        transform: rotateY($sideAngle * $angleMultiplier + $sideAngle/2) translateZ($translateLowerZ) translateY($translateLowerY) rotateZ(180deg) rotateX($angle);
+      }
+    }
+      
+    @for $i from 6 through 10 {
+      &:nth-child(#{$i}) {
+        $angleMultiplier: $i - 11;
+        transform: rotateY(-$sideAngle * $angleMultiplier) translateZ($translateRingZ) translateY($translateRingY) rotateZ(180deg) rotateX($ringAngle);
+      }
+    }
+      
+    @for $i from 11 through 15 {
+      &:nth-child(#{$i}) {
+        $angleMultiplier: $i - 8;
+        transform: rotateY($sideAngle * $angleMultiplier + $sideAngle/2) translateZ($translateRingZ) translateY($translateRingY) rotateX($ringAngle);
+      }
+    }
+  }
+}
+
+.source {
+  color: #bbb;
+  text-align: center;
+  margin-top: 50px;
+  a {
+    color: #ccc;
+  }
+}
\ No newline at end of file
diff --git a/building-a-realtime-photoshop/README.markdown b/building-a-realtime-photoshop/README.markdown
new file mode 100644
index 0000000..1519de0
--- /dev/null
+++ b/building-a-realtime-photoshop/README.markdown
@@ -0,0 +1,5 @@
+# Building a Realtime Photoshop 🎨
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/rebelchris/pen/LYNNPpp](https://codepen.io/rebelchris/pen/LYNNPpp).
+
+
diff --git a/building-a-realtime-photoshop/dist/index.html b/building-a-realtime-photoshop/dist/index.html
new file mode 100644
index 0000000..81caf79
--- /dev/null
+++ b/building-a-realtime-photoshop/dist/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Building a Realtime Photoshop 🎨</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <img src="https://images.unsplash.com/photo-1508671323699-6df22ecaec2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80" id="main-image" />
+  <div class="toolbox">
+    <label>
+      Blur
+      <input id='blur' max='20' min='0' step='1' type='range' value='0'>
+    </label>
+    <label>
+      Brightness
+      <input id='brightness' max='1' min='0' step='0.1' type='range' value='1'>
+    </label>
+    <label>
+      Contrast
+      <input id='contrast' max='200' min='0' step='1' type='range' value='100'>
+    </label>
+    <label>
+      Grayscale
+      <input id='grayscale' max='100' min='0' step='1' type='range' value='0'>
+    </label>
+    <label>
+      Hue
+      <input id='hue' max='360' min='0' step='1' type='range' value='0'>
+    </label>
+    <label>
+      Invert
+      <input id='invert' max='100' min='0' step='1' type='range' value='0'>
+    </label>
+    <label>
+      Opacity
+      <input id='opacity' max='100' min='0' step='1' type='range' value='100'>
+    </label>
+    <label>
+      Saturate
+      <input id='saturate' max='200' min='0' step='1' type='range' value='100'>
+    </label>
+    <label>
+      Sepia
+      <input id='sepia' max='100' min='0' step='1' type='range' value='0'>
+    </label>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/building-a-realtime-photoshop/dist/script.js b/building-a-realtime-photoshop/dist/script.js
new file mode 100644
index 0000000..48d43f2
--- /dev/null
+++ b/building-a-realtime-photoshop/dist/script.js
@@ -0,0 +1,9 @@
+var img = document.getElementById('main-image');
+
+var inputs = document.querySelectorAll('input');
+
+[].forEach.call(inputs, function(input) {
+  input.addEventListener('input', e => {
+    img.style.setProperty('--'+input.id, input.value);
+  });
+});
\ No newline at end of file
diff --git a/building-a-realtime-photoshop/dist/style.css b/building-a-realtime-photoshop/dist/style.css
new file mode 100644
index 0000000..7a6cae7
--- /dev/null
+++ b/building-a-realtime-photoshop/dist/style.css
@@ -0,0 +1,41 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+:root {
+  --blur: 0;
+  --brightness: 1;
+  --contrast: 100;
+  --grayscale: 0;
+  --hue: 0;
+  --invert: 0;
+  --opacity: 100;
+  --saturate: 100;
+  --sepia: 0;
+}
+#main-image {
+  transition: all 300ms ease-in-out;
+  filter: blur(calc(1px * var(--blur))) brightness(var(--brightness))
+    contrast(calc(1% * var(--contrast))) grayscale(calc(1% * var(--grayscale)))
+    hue-rotate(calc(1deg * var(--hue))) invert(calc(1% * var(--invert)))
+    opacity(calc(1% * var(--opacity))) saturate(calc(1% * var(--saturate)))
+    sepia(calc(1% * var(--sepia)));
+  border: 5px solid #fff;
+}
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: #eee;
+}
+.toolbox {
+  margin-left: 50px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+label {
+  margin-bottom: 5px;
+}
\ No newline at end of file
diff --git a/building-a-realtime-photoshop/license.txt b/building-a-realtime-photoshop/license.txt
new file mode 100644
index 0000000..cbf8902
--- /dev/null
+++ b/building-a-realtime-photoshop/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Chris Bongers (https://codepen.io/rebelchris/pen/LYNNPpp)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/building-a-realtime-photoshop/src/index.html b/building-a-realtime-photoshop/src/index.html
new file mode 100644
index 0000000..2edc8fd
--- /dev/null
+++ b/building-a-realtime-photoshop/src/index.html
@@ -0,0 +1,41 @@
+<div class="container">
+  <img src="https://images.unsplash.com/photo-1508671323699-6df22ecaec2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80" id="main-image" />
+  <div class="toolbox">
+    <label>
+      Blur
+      <input id='blur' max='20' min='0' step='1' type='range' value='0'>
+    </label>
+    <label>
+      Brightness
+      <input id='brightness' max='1' min='0' step='0.1' type='range' value='1'>
+    </label>
+    <label>
+      Contrast
+      <input id='contrast' max='200' min='0' step='1' type='range' value='100'>
+    </label>
+    <label>
+      Grayscale
+      <input id='grayscale' max='100' min='0' step='1' type='range' value='0'>
+    </label>
+    <label>
+      Hue
+      <input id='hue' max='360' min='0' step='1' type='range' value='0'>
+    </label>
+    <label>
+      Invert
+      <input id='invert' max='100' min='0' step='1' type='range' value='0'>
+    </label>
+    <label>
+      Opacity
+      <input id='opacity' max='100' min='0' step='1' type='range' value='100'>
+    </label>
+    <label>
+      Saturate
+      <input id='saturate' max='200' min='0' step='1' type='range' value='100'>
+    </label>
+    <label>
+      Sepia
+      <input id='sepia' max='100' min='0' step='1' type='range' value='0'>
+    </label>
+  </div>
+</div>
\ No newline at end of file
diff --git a/building-a-realtime-photoshop/src/script.js b/building-a-realtime-photoshop/src/script.js
new file mode 100644
index 0000000..48d43f2
--- /dev/null
+++ b/building-a-realtime-photoshop/src/script.js
@@ -0,0 +1,9 @@
+var img = document.getElementById('main-image');
+
+var inputs = document.querySelectorAll('input');
+
+[].forEach.call(inputs, function(input) {
+  input.addEventListener('input', e => {
+    img.style.setProperty('--'+input.id, input.value);
+  });
+});
\ No newline at end of file
diff --git a/building-a-realtime-photoshop/src/style.css b/building-a-realtime-photoshop/src/style.css
new file mode 100644
index 0000000..12d8ada
--- /dev/null
+++ b/building-a-realtime-photoshop/src/style.css
@@ -0,0 +1,41 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+:root {
+  --blur: 0;
+  --brightness: 1;
+  --contrast: 100;
+  --grayscale: 0;
+  --hue: 0;
+  --invert: 0;
+  --opacity: 100;
+  --saturate: 100;
+  --sepia: 0;
+}
+#main-image {
+  transition: all 300ms ease-in-out;
+  filter: blur(calc(1px * var(--blur))) brightness(var(--brightness))
+    contrast(calc(1% * var(--contrast))) grayscale(calc(1% * var(--grayscale)))
+    hue-rotate(calc(1deg * var(--hue))) invert(calc(1% * var(--invert)))
+    opacity(calc(1% * var(--opacity))) saturate(calc(1% * var(--saturate)))
+    sepia(calc(1% * var(--sepia)));
+  border: 5px solid #fff;
+}
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: #eee;
+}
+.toolbox {
+  margin-left: 50px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+label {
+  margin-bottom: 5px;
+}
diff --git a/button-and-link-with-no-labelling-linthtmlwithcss/README.markdown b/button-and-link-with-no-labelling-linthtmlwithcss/README.markdown
new file mode 100644
index 0000000..aa60b57
--- /dev/null
+++ b/button-and-link-with-no-labelling-linthtmlwithcss/README.markdown
@@ -0,0 +1,5 @@
+# Button and link with no labelling #lintHTMLwithCSS
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/GeoffreyCrofte/pen/PoZQKNj](https://codepen.io/GeoffreyCrofte/pen/PoZQKNj).
+
+A big CSS selector to get most of the use case where a link/button is empty in a way or another.
diff --git a/button-and-link-with-no-labelling-linthtmlwithcss/dist/index.html b/button-and-link-with-no-labelling-linthtmlwithcss/dist/index.html
new file mode 100644
index 0000000..7f62cb2
--- /dev/null
+++ b/button-and-link-with-no-labelling-linthtmlwithcss/dist/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Button and link with no labelling #lintHTMLwithCSS</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>Lint button and link with no labelling</h1>
+
+<h2>With content (ok)</h2>
+<a href="#something">A link</a>
+<button type="button">A button</button>
+
+<h2>Empty (not ok)</h2>
+<a href="#something"></a>
+<button type="button"></button>
+
+<h2>Not empty, with img no alt (not ok)</h2>
+<a href="#something"><img src=""></a>
+<button type="button"><img src=""></button>
+
+<h2>Not empty, with img empty alt (not ok)</h2>
+<a href="#something"><img src="" alt=""></a>
+<button type="button"><img src="" alt=""></button>
+
+<h2>Not empty, with i (icon) with no labelling (not ok)</h2>
+<a href="#something"><i class="icon-user"></i></a>
+<button type="button"><i class="icon-user"></i></button>
+
+<h2>Faux-negative because of :only-child (should be ok)</h2>
+<a href="#something"><img src="" alt=""> Text</a>
+<button type="button"><img src="" alt=""> Text</button>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/button-and-link-with-no-labelling-linthtmlwithcss/dist/style.css b/button-and-link-with-no-labelling-linthtmlwithcss/dist/style.css
new file mode 100644
index 0000000..6d9cb90
--- /dev/null
+++ b/button-and-link-with-no-labelling-linthtmlwithcss/dist/style.css
@@ -0,0 +1,13 @@
+/* Empty buttons or links without any kind of labelling */
+:is(button, a):empty:not([aria-label]):not([aria-labelledby]),
+:is(button, a):not([aria-label]):not([aria-labelledby]) img:only-child:is(:not([alt]),[alt=""]),
+:is(button, a):not([aria-label]):not([aria-labelledby]) i:only-child:not([aria-label]):not([aria-labelledby]) {
+	outline: 2px dashed darksalmon;
+	padding: 8px;
+}
+
+
+body {
+	margin: 2em;
+	text-align: center;
+}
\ No newline at end of file
diff --git a/button-and-link-with-no-labelling-linthtmlwithcss/license.txt b/button-and-link-with-no-labelling-linthtmlwithcss/license.txt
new file mode 100644
index 0000000..d9bff5e
--- /dev/null
+++ b/button-and-link-with-no-labelling-linthtmlwithcss/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Geoffrey Crofte (https://codepen.io/GeoffreyCrofte/pen/PoZQKNj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/button-and-link-with-no-labelling-linthtmlwithcss/src/index.html b/button-and-link-with-no-labelling-linthtmlwithcss/src/index.html
new file mode 100644
index 0000000..ab35df9
--- /dev/null
+++ b/button-and-link-with-no-labelling-linthtmlwithcss/src/index.html
@@ -0,0 +1,25 @@
+<h1>Lint button and link with no labelling</h1>
+
+<h2>With content (ok)</h2>
+<a href="#something">A link</a>
+<button type="button">A button</button>
+
+<h2>Empty (not ok)</h2>
+<a href="#something"></a>
+<button type="button"></button>
+
+<h2>Not empty, with img no alt (not ok)</h2>
+<a href="#something"><img src=""></a>
+<button type="button"><img src=""></button>
+
+<h2>Not empty, with img empty alt (not ok)</h2>
+<a href="#something"><img src="" alt=""></a>
+<button type="button"><img src="" alt=""></button>
+
+<h2>Not empty, with i (icon) with no labelling (not ok)</h2>
+<a href="#something"><i class="icon-user"></i></a>
+<button type="button"><i class="icon-user"></i></button>
+
+<h2>Faux-negative because of :only-child (should be ok)</h2>
+<a href="#something"><img src="" alt=""> Text</a>
+<button type="button"><img src="" alt=""> Text</button>
\ No newline at end of file
diff --git a/button-and-link-with-no-labelling-linthtmlwithcss/src/style.css b/button-and-link-with-no-labelling-linthtmlwithcss/src/style.css
new file mode 100644
index 0000000..6d9cb90
--- /dev/null
+++ b/button-and-link-with-no-labelling-linthtmlwithcss/src/style.css
@@ -0,0 +1,13 @@
+/* Empty buttons or links without any kind of labelling */
+:is(button, a):empty:not([aria-label]):not([aria-labelledby]),
+:is(button, a):not([aria-label]):not([aria-labelledby]) img:only-child:is(:not([alt]),[alt=""]),
+:is(button, a):not([aria-label]):not([aria-labelledby]) i:only-child:not([aria-label]):not([aria-labelledby]) {
+	outline: 2px dashed darksalmon;
+	padding: 8px;
+}
+
+
+body {
+	margin: 2em;
+	text-align: center;
+}
\ No newline at end of file
diff --git a/c3-color-contrast-checker/README.markdown b/c3-color-contrast-checker/README.markdown
new file mode 100644
index 0000000..44a395e
--- /dev/null
+++ b/c3-color-contrast-checker/README.markdown
@@ -0,0 +1,4 @@
+# C3: Color Contrast Checker
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/alvaromontoro/pen/YgpWZG](https://codepen.io/alvaromontoro/pen/YgpWZG).
+
+ Interactive validator that gets two colors (in RGB or HEX), and calculates the contrast difference between the two, providing information about their accessibility based on [WCAG 2.1 criteria](https://www.w3.org/TR/WCAG/#contrast-minimum)
\ No newline at end of file
diff --git a/c3-color-contrast-checker/dist/index.html b/c3-color-contrast-checker/dist/index.html
new file mode 100644
index 0000000..f29243f
--- /dev/null
+++ b/c3-color-contrast-checker/dist/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>C3: Color Contrast Checker</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<section id="color-contrast">
+  <h1>Color Contrast Checker (C3)</h1>
+  <div class="character">
+    <div id="jill">
+    <svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title  desc">
+    <title id="title">Teacher</title>
+    <desc id="desc">Cartoon of a Caucasian woman smiling, and wearing black glasses and a purple shirt with white collar.</desc>
+    <defs>
+      <clipPath id="scene">
+        <circle cx="125" cy="125" r="115"/>
+      </clipPath>
+      <clipPath id="lips">
+        <path d="M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z" />
+      </clipPath>
+    </defs>
+    <g stroke="none" stroke-width="0" clip-path="url(#scene)">
+      <rect x="0" y="0" width="250" height="250" fill="#b0d2e5" />
+      <g id="head">
+        <path fill="none" stroke="#111111" stroke-width="2" d="M 68,103 83,103.5" />
+        <path class="hair" d="M 67,90 67,169 78,164 89,169 100,164 112,169 125,164 138,169 150,164 161,169 172,164 183,169 183,90 Z" />
+        <circle cx="125" cy="100" r="55" class="skin" />
+        <ellipse cx="102" cy="107" rx="5" ry="5" class="eyes" id="eye-left" />
+        <ellipse cx="148" cy="107" rx="5" ry="5" class="eyes" id="eye-right" />
+        <rect x="119" y="140" width="12" height="40" class="skin" />
+        <path class="line eyebrow" d="M 90,98 C 93,90 103,89 110,94" id="eyebrow-left" />
+        <path class="line eyebrow" d="M 160,98 C 157,90 147,89 140,94" id="eyebrow-right"/>
+        <path stroke="#111111" stroke-width="4" d="M 68,103 83,102.5" />
+        <path stroke="#111111" stroke-width="4" d="M 182,103 167,102.5" />
+        <path stroke="#050505" stroke-width="3" fill="none" d="M 119,102 C 123,99 127,99 131,102" />
+        <path fill="#050505" d="M 92,97 C 85,97 79,98 80,101 81,104 84,104 85,102" />
+        <path fill="#050505" d="M 158,97 C 165,97 171,98 170,101 169,104 166,104 165,102" />
+        <path stroke="#050505" stroke-width="3" fill="rgba(240,240,255,0.4)" d="M 119,102 C 118,111 115,119 98,117 85,115 84,108 84,104 84,97 94,96 105,97 112,98 117,98 119,102 Z" />
+        <path stroke="#050505" stroke-width="3" fill="rgba(240,240,255,0.4)" d="M 131,102 C 132,111 135,119 152,117 165,115 166,108 166,104 166,97 156,96 145,97 138,98 133,98 131,102 Z" />
+        <path class="hair" d="M 60,109 C 59,39 118,40 129,40 139,40 187,43 189,99 135,98 115,67 115,67 115,67 108,90 80,109 86,101 91,92 92,87 85,99 65,108 60,109" />
+        <path id="mouth" fill="#d73e3e" d="M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,149  125,149  116,149 109,142 106,132 Z" /> 
+        <path id="smile" fill="white" d="M125,144 C 140,144 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,144 125,144 Z"  />
+      </g>
+      <g id="shirt">
+        <path fill="#8665c2" d="M 132,170 C 146,170 154,200 154,200 154,200 158,245 158,245 158,245 92,245 92,245 92,245 96,200 96,200 96,200 104,170 118,170 118,170 125,172 125,172 125,172 132,170 132,170 Z"/>
+        <path id="arm-left" class="arm" stroke="#8665c2" fill="none" stroke-width="14" d="M 118,178 C 94,179 66,220 65,254" />
+        <path id="arm-right" class="arm" stroke="#8665c2" fill="none" stroke-width="14" d="M 132,178 C 156,179 184,220 185,254" />
+        <path fill="white" d="M 117,166 C 117,166 125,172 125,172 125,182 115,182 109,170 Z" />
+        <path fill="white" d="M 133,166 C 133,166 125,172 125,172 125,182 135,182 141,170 Z" />
+        <circle cx="125" cy="188" r="4" fill="#5a487b" />
+        <circle cx="125" cy="202" r="4" fill="#5a487b" />
+        <circle cx="125" cy="216" r="4" fill="#5a487b" />
+        <circle cx="125" cy="230" r="4" fill="#5a487b" />
+        <circle cx="125" cy="244" r="4" fill="#5a487b" />
+        <path stroke="#daa37f" stroke-width="1" class="skin hand" id="hand-left" d="M 51,270 C 46,263 60,243 63,246 65,247 66,248 61,255 72,243 76,238 79,240 82,243 72,254 69,257 72,254 82,241 86,244 89,247 75,261 73,263 77,258 84,251 86,253 89,256 70,287 59,278" /> 
+        <path stroke="#daa37f" stroke-width="1" class="skin hand" id="hand-right" d="M 199,270 C 204,263 190,243 187,246 185,247 184,248 189,255 178,243 174,238 171,240 168,243 178,254 181,257 178,254 168,241 164,244 161,247 175,261 177,263 173,258 166,251 164,253 161,256 180,287 191,278"/> 
+      </g>
+    </g>
+  </svg>
+    </div>
+  </div>
+  <div id="boxes">
+    <div id="aa-large">
+      <span>Large Text</span>
+      <span>WCAG AA</span>
+    </div>
+    <div id="aa-normal">
+      <span>Normal Text</span>
+      <span>WCAG AA</span>
+    </div>
+    <div id="aaa-large">
+      <span>Large Text</span>
+      <span>WCAG AAA</span>
+    </div>
+    <div id="aaa-normal">
+      <span>Normal Text</span>
+      <span>WCAG AAA</span>
+    </div>
+  </div>
+  <div id="sample">
+    <div contenteditable id="sample-text" style="color:rgb(0,0,0);background:rgb(255,255,255)">
+      Click to change demo text
+    </div>
+  </div>
+  <div id="bars">
+    <div>
+      <h2>Foreground</h2>
+      <div>
+        <label for="color-1-r" class="red">R</label> 
+        <input id="color-1-r" type="range" min="0" max="255" value="0" />
+        <input id="number-1-r" type="number" min="0" max="255" value="0" />
+      </div>
+      <div>
+        <label for="color-1-g" class="green">G</label> 
+        <input id="color-1-g" type="range" min="0" max="255" value="0" />
+        <input id="number-1-g" type="number" min="0" max="255" value="0" />
+      </div>
+      <div>
+        <label for="color-1-b" class="blue">B</label> 
+        <input id="color-1-b" type="range" min="0" max="255" value="0" />
+        <input id="number-1-b" type="number" min="0" max="255" value="0" />
+      </div>
+      <input id="color-1-hex" data-target="1" type="text" value="#000000" maxlength="7" />
+    </div>
+    <div>
+      <h2>Background</h2>
+      <div>
+        <label for="color-2-r" class="red">R</label> 
+        <input id="color-2-r" type="range" min="0" max="255" value="255" />
+        <input id="number-2-r" type="number" min="0" max="255" value="255" />
+      </div>
+      <div>
+        <label for="color-2-g" class="green">G</label> 
+        <input id="color-2-g" type="range" min="0" max="255" value="255" />
+        <input id="number-2-g" type="number"min="0" max="255" value="255" />
+      </div>
+      <div>
+        <label for="color-2-b" class="blue">B</label> 
+        <input id="color-2-b" type="range" min="0" max="255" value="255" />
+        <input id="number-2-b" type="number" min="0" max="255" value="255" />
+      </div>
+      <input id="color-2-hex" data-target="2" type="text" value="#FFFFFF" maxlength="7" />
+    </div>
+  </div>
+</section>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/c3-color-contrast-checker/dist/script.js b/c3-color-contrast-checker/dist/script.js
new file mode 100644
index 0000000..82d190c
--- /dev/null
+++ b/c3-color-contrast-checker/dist/script.js
@@ -0,0 +1,136 @@
+function updateDemoColors(colorFront, colorBack) {
+  const demo = document.querySelector("#sample-text");
+  demo.style.color = `rgb(${colorFront.toString()})`;
+  demo.style.backgroundColor = `rgb(${colorBack.toString()})`;
+}
+
+/* the following functions are adapted from https://stackoverflow.com/a/9733420/3695983 */
+function luminanace(r, g, b) {
+  var a = [r, g, b].map(function (v) {
+    v /= 255;
+    return v <= 0.03928
+      ? v / 12.92
+    : Math.pow( (v + 0.055) / 1.055, 2.4 );
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+function contrast(rgb1, rgb2) {
+  const luminanceFront = luminanace(rgb1[0], rgb1[1], rgb1[2]);
+  const luminanceBack  = luminanace(rgb2[0], rgb2[1], rgb2[2]);
+  return luminanceBack > luminanceFront 
+    ? ((luminanceFront + 0.05) / (luminanceBack + 0.05))
+    : ((luminanceBack + 0.05) / (luminanceFront + 0.05));
+}
+
+function updateBoxesColors(colorFront, colorBack) {
+  const ratio = contrast(colorFront, colorBack);
+  document.querySelector("#aa-normal").className  = ratio < 0.22222 ? "" : "fail";
+  document.querySelector("#aa-large").className   = ratio < 0.33333 ? "" : "fail";
+  document.querySelector("#aaa-normal").className = ratio < 0.14285 ? "" : "fail";
+  document.querySelector("#aaa-large").className  = ratio < 0.22222 ? "" : "fail";
+  
+  const totalWrong = document.querySelectorAll(".fail").length;
+  let mouth = document.querySelector("#mouth");
+  let smile = document.querySelector("#smile");
+  
+  switch(totalWrong) {
+    case 0:
+      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,149  125,149  116,149 109,142 106,132 Z");
+      smile.setAttribute("d", "M125,144 C 140,144 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,144 125,144 Z");
+      break;
+    case 1:
+    case 2:
+      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z");
+      smile.setAttribute("d", "M125,141 C 140,141 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,141 125,141 Z");
+      break;
+    case 3: 
+      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  140,143  125,143  110,143 109,138 106,132 Z");
+    smile.setAttribute("d", "M125,138 C 140,138 143.5,132 143.5,132 143.5,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,138 125,138 Z");
+      break;
+    case 4: 
+      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  134,142  125,142  116,142 109,138 106,132 Z");
+      smile.setAttribute("d", "M125,135 C 140,135 143,132 143,132 143,135 125,136 125,136 125,136 106.5,135 106.5,132 106.5,132 110,135 125,135 Z");
+      break;
+  }
+}
+
+function updateHex(colorFront, colorBack) {
+  const colorFrontHex = colorFront.map(function(el) { return Number(el).toString(16).padStart(2, "0").toUpperCase(); });
+  const colorBackHex = colorBack.map(function(el) { return Number(el).toString(16).padStart(2, "0").toUpperCase(); });
+  document.querySelector("#color-1-hex").value = `#${colorFrontHex.join('')}`;
+  document.querySelector("#color-2-hex").value = `#${colorBackHex.join('')}`
+}
+
+function updateColors() {
+  const colorFront = [ 
+    document.querySelector("#color-1-r").value,
+    document.querySelector("#color-1-g").value,
+    document.querySelector("#color-1-b").value
+  ];
+  const colorBack = [
+    document.querySelector("#color-2-r").value,
+    document.querySelector("#color-2-g").value,
+    document.querySelector("#color-2-b").value
+  ];
+
+  updateDemoColors(colorFront, colorBack);
+  updateBoxesColors(colorFront, colorBack);
+  updateHex(colorFront, colorBack);
+}
+
+document.querySelectorAll("input[type='number'], input[type='range']").forEach(function(el) {
+  el.addEventListener("input", function() {
+    if (this.type === "range") {
+      this.nextElementSibling.value = this.value;
+    } else if (this.type === "number") {
+      this.previousElementSibling.value = this.value;
+    }
+    updateColors();
+  });
+});
+
+document.querySelectorAll("input[type='text']").forEach(function(el) {
+  el.addEventListener("blur", function() {
+    let val = this.value;
+    let wrongValue = false;
+    if (val[0] === "#") val = val.substring(1);
+    if (val.length === 3 || val.length === 6) {
+      if (val.length === 3) {
+        val = `${val[0]}${val[0]}${val[1]}${val[1]}${val[2]}${val[2]}`;
+      }
+      if (val.match(/[0-9A-Fa-f]{6}/)) {
+        const red = parseInt(`${val[0]}${val[1]}`, 16);
+        const green = parseInt(`${val[2]}${val[3]}`, 16);
+        const blue = parseInt(`${val[4]}${val[5]}`, 16);
+        const target = this.dataset.target;
+        
+        document.getElementById(`number-${target}-r`).value = red;
+        document.getElementById(`number-${target}-g`).value = green;
+        document.getElementById(`number-${target}-b`).value = blue;
+        document.getElementById(`color-${target}-r`).value = red;
+        document.getElementById(`color-${target}-g`).value = green;
+        document.getElementById(`color-${target}-b`).value = blue;
+        
+        updateColors();
+      } else {
+        wrongValue = true;
+      }
+    } else {
+      wrongValue = true;
+    }
+    
+    if (wrongValue){
+      const colorFront = [ 
+        document.querySelector("#color-1-r").value,
+        document.querySelector("#color-1-g").value,
+        document.querySelector("#color-1-b").value
+      ];
+      const colorBack = [
+        document.querySelector("#color-2-r").value,
+        document.querySelector("#color-2-g").value,
+        document.querySelector("#color-2-b").value
+      ];
+      updateHex(colorFront, colorBack)
+    }
+  });
+})
\ No newline at end of file
diff --git a/c3-color-contrast-checker/dist/style.css b/c3-color-contrast-checker/dist/style.css
new file mode 100644
index 0000000..fa1c8e5
--- /dev/null
+++ b/c3-color-contrast-checker/dist/style.css
@@ -0,0 +1,183 @@
+/* Generic */
+@import url('https://fonts.googleapis.com/css?family=Ubuntu');
+
+html, body {
+  background: #ddd;
+  font-family: Ubuntu, sans-serif;
+  font-size: 16px;
+}
+
+h1, h2 {
+  text-align: center;
+  display: block;
+  margin-top: 0;
+}
+
+/* Tool general styles */
+#color-contrast {
+  background: #fff;
+  box-shadow: 0 0 1rem rgba(0,0,0,0.25);
+  border-radius: 2px;
+  width: 500px;
+  margin: auto auto;
+  box-sizing: border-box;
+  padding: 2rem;
+  /*position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);*/
+}
+
+/* character */
+#jill {
+  width: 250px;
+  height: 250px;
+  margin: auto auto;
+  border-radius: 100%;
+}
+
+/* SVG */
+@-moz-keyframes blink { 
+  0%  { ry: 5; }
+  49% { ry: 5; }
+  50% { ry: 0; }
+  51% { ry: 5; }
+}
+@-webkit-keyframes blink { 
+  0%  { ry: 5; }
+  49% { ry: 5; }
+  50% { ry: 0; }
+  51% { ry: 5; }
+}
+@keyframes blink { 
+  0%  { ry: 5; }
+  49% { ry: 5; }
+  50% { ry: 0; }
+  51% { ry: 5; }
+}
+.skin { fill: #eab38f; }
+.eyes { fill: #1f1f1f; animation: blink 10s alternate infinite; -webkit-animation: blink 10s alternate infinite; -moz-animation: blink 10s alternate infinite;}
+.hair { fill: #2f1b0d; }
+.line { fill: none; stroke: #2f1b0d; stroke-width:2px; }
+.arm, #mouth, #smile, .eyes, .hand, .eyebrow { transition: all 0.25s; }
+
+/* boxes */
+#boxes {
+  display: flex;
+  margin-top: 1.5rem;
+}
+
+#boxes > div {
+  flex: 1;
+  text-align: center;
+  background: #081;
+  color: white;
+  padding: 0.5rem 0;
+  margin-left: 10px;
+  border-radius: 3px;
+  transition: background 0.5s;
+  position: relative;
+}
+
+#boxes > div::after {
+  content: "✓ Pass";
+  display: block;
+  position: absolute;
+  color: #000;
+  text-align:center;
+  width: 100%;
+  margin-top: 10px;
+}
+
+#boxes > div.fail {
+  background: #d32;
+}
+
+#boxes > div.fail::after {
+  content: "✕ Fail";
+}
+
+#boxes > div:first-child {
+  margin-left: 0;
+}
+
+#boxes span:first-child {
+  font-size: 0.75em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+}
+
+/* demo */
+#sample-text {
+  margin: 2.5rem 0 1.6rem 0;
+  padding: 1rem;
+  background: #fff;
+  color: #000;
+  text-align: center;
+  font-size: 20px;
+  border-radius: 2px;
+}
+
+/* sliders */
+#bars {
+  display: flex;
+  flex-direction: row;
+}
+
+#bars > div {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+#bars > div:first-child {
+  margin-right: 0.5rem;
+}
+
+#bars > div:last-child {
+  margin-left: 0.5rem;
+}
+
+#bars > div > div {
+  display: flex;
+  margin-bottom: 0.5rem;
+}
+
+#bars label {
+  display: inline-block;
+  color: white;
+  width: 2rem;
+  height: 2rem;
+  line-height: 2rem;
+  font-size: 1rem;
+  text-align: center;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+
+label.red { background: #d32; }
+label.green { background: #081; }
+label.blue { background: #26e; }
+
+#bars input[type="range"] {
+  flex: 1;
+}
+#bars input[type="number"] {
+  text-align: center;
+  width: 3rem;
+  border-radius: 2px;
+  border: 1px solid #ccc;
+  font-size: 0.75rem;
+  height: 2rem;
+  box-sizing:border-box;
+  line-height: 2rem;
+}
+#bars input[type="text"] {
+  border-radius: 2px;
+  border: 1px solid #ccc;
+  text-align: center;
+  font-size: 1rem;
+  height: 2rem;
+  box-sizing:border-box;
+  line-height: 2rem;
+}
\ No newline at end of file
diff --git a/c3-color-contrast-checker/license.txt b/c3-color-contrast-checker/license.txt
new file mode 100644
index 0000000..909f205
--- /dev/null
+++ b/c3-color-contrast-checker/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Alvaro Montoro (https://codepen.io/alvaromontoro/pen/YgpWZG)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/c3-color-contrast-checker/src/index.html b/c3-color-contrast-checker/src/index.html
new file mode 100644
index 0000000..8d7b854
--- /dev/null
+++ b/c3-color-contrast-checker/src/index.html
@@ -0,0 +1,119 @@
+<section id="color-contrast">
+  <h1>Color Contrast Checker (C3)</h1>
+  <div class="character">
+    <div id="jill">
+    <svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title  desc">
+    <title id="title">Teacher</title>
+    <desc id="desc">Cartoon of a Caucasian woman smiling, and wearing black glasses and a purple shirt with white collar.</desc>
+    <defs>
+      <clipPath id="scene">
+        <circle cx="125" cy="125" r="115"/>
+      </clipPath>
+      <clipPath id="lips">
+        <path d="M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z" />
+      </clipPath>
+    </defs>
+    <g stroke="none" stroke-width="0" clip-path="url(#scene)">
+      <rect x="0" y="0" width="250" height="250" fill="#b0d2e5" />
+      <g id="head">
+        <path fill="none" stroke="#111111" stroke-width="2" d="M 68,103 83,103.5" />
+        <path class="hair" d="M 67,90 67,169 78,164 89,169 100,164 112,169 125,164 138,169 150,164 161,169 172,164 183,169 183,90 Z" />
+        <circle cx="125" cy="100" r="55" class="skin" />
+        <ellipse cx="102" cy="107" rx="5" ry="5" class="eyes" id="eye-left" />
+        <ellipse cx="148" cy="107" rx="5" ry="5" class="eyes" id="eye-right" />
+        <rect x="119" y="140" width="12" height="40" class="skin" />
+        <path class="line eyebrow" d="M 90,98 C 93,90 103,89 110,94" id="eyebrow-left" />
+        <path class="line eyebrow" d="M 160,98 C 157,90 147,89 140,94" id="eyebrow-right"/>
+        <path stroke="#111111" stroke-width="4" d="M 68,103 83,102.5" />
+        <path stroke="#111111" stroke-width="4" d="M 182,103 167,102.5" />
+        <path stroke="#050505" stroke-width="3" fill="none" d="M 119,102 C 123,99 127,99 131,102" />
+        <path fill="#050505" d="M 92,97 C 85,97 79,98 80,101 81,104 84,104 85,102" />
+        <path fill="#050505" d="M 158,97 C 165,97 171,98 170,101 169,104 166,104 165,102" />
+        <path stroke="#050505" stroke-width="3" fill="rgba(240,240,255,0.4)" d="M 119,102 C 118,111 115,119 98,117 85,115 84,108 84,104 84,97 94,96 105,97 112,98 117,98 119,102 Z" />
+        <path stroke="#050505" stroke-width="3" fill="rgba(240,240,255,0.4)" d="M 131,102 C 132,111 135,119 152,117 165,115 166,108 166,104 166,97 156,96 145,97 138,98 133,98 131,102 Z" />
+        <path class="hair" d="M 60,109 C 59,39 118,40 129,40 139,40 187,43 189,99 135,98 115,67 115,67 115,67 108,90 80,109 86,101 91,92 92,87 85,99 65,108 60,109" />
+        <path id="mouth" fill="#d73e3e" d="M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,149  125,149  116,149 109,142 106,132 Z" /> 
+        <path id="smile" fill="white" d="M125,144 C 140,144 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,144 125,144 Z"  />
+      </g>
+      <g id="shirt">
+        <path fill="#8665c2" d="M 132,170 C 146,170 154,200 154,200 154,200 158,245 158,245 158,245 92,245 92,245 92,245 96,200 96,200 96,200 104,170 118,170 118,170 125,172 125,172 125,172 132,170 132,170 Z"/>
+        <path id="arm-left" class="arm" stroke="#8665c2" fill="none" stroke-width="14" d="M 118,178 C 94,179 66,220 65,254" />
+        <path id="arm-right" class="arm" stroke="#8665c2" fill="none" stroke-width="14" d="M 132,178 C 156,179 184,220 185,254" />
+        <path fill="white" d="M 117,166 C 117,166 125,172 125,172 125,182 115,182 109,170 Z" />
+        <path fill="white" d="M 133,166 C 133,166 125,172 125,172 125,182 135,182 141,170 Z" />
+        <circle cx="125" cy="188" r="4" fill="#5a487b" />
+        <circle cx="125" cy="202" r="4" fill="#5a487b" />
+        <circle cx="125" cy="216" r="4" fill="#5a487b" />
+        <circle cx="125" cy="230" r="4" fill="#5a487b" />
+        <circle cx="125" cy="244" r="4" fill="#5a487b" />
+        <path stroke="#daa37f" stroke-width="1" class="skin hand" id="hand-left" d="M 51,270 C 46,263 60,243 63,246 65,247 66,248 61,255 72,243 76,238 79,240 82,243 72,254 69,257 72,254 82,241 86,244 89,247 75,261 73,263 77,258 84,251 86,253 89,256 70,287 59,278" /> 
+        <path stroke="#daa37f" stroke-width="1" class="skin hand" id="hand-right" d="M 199,270 C 204,263 190,243 187,246 185,247 184,248 189,255 178,243 174,238 171,240 168,243 178,254 181,257 178,254 168,241 164,244 161,247 175,261 177,263 173,258 166,251 164,253 161,256 180,287 191,278"/> 
+      </g>
+    </g>
+  </svg>
+    </div>
+  </div>
+  <div id="boxes">
+    <div id="aa-large">
+      <span>Large Text</span>
+      <span>WCAG AA</span>
+    </div>
+    <div id="aa-normal">
+      <span>Normal Text</span>
+      <span>WCAG AA</span>
+    </div>
+    <div id="aaa-large">
+      <span>Large Text</span>
+      <span>WCAG AAA</span>
+    </div>
+    <div id="aaa-normal">
+      <span>Normal Text</span>
+      <span>WCAG AAA</span>
+    </div>
+  </div>
+  <div id="sample">
+    <div contenteditable id="sample-text" style="color:rgb(0,0,0);background:rgb(255,255,255)">
+      Click to change demo text
+    </div>
+  </div>
+  <div id="bars">
+    <div>
+      <h2>Foreground</h2>
+      <div>
+        <label for="color-1-r" class="red">R</label> 
+        <input id="color-1-r" type="range" min="0" max="255" value="0" />
+        <input id="number-1-r" type="number" min="0" max="255" value="0" />
+      </div>
+      <div>
+        <label for="color-1-g" class="green">G</label> 
+        <input id="color-1-g" type="range" min="0" max="255" value="0" />
+        <input id="number-1-g" type="number" min="0" max="255" value="0" />
+      </div>
+      <div>
+        <label for="color-1-b" class="blue">B</label> 
+        <input id="color-1-b" type="range" min="0" max="255" value="0" />
+        <input id="number-1-b" type="number" min="0" max="255" value="0" />
+      </div>
+      <input id="color-1-hex" data-target="1" type="text" value="#000000" maxlength="7" />
+    </div>
+    <div>
+      <h2>Background</h2>
+      <div>
+        <label for="color-2-r" class="red">R</label> 
+        <input id="color-2-r" type="range" min="0" max="255" value="255" />
+        <input id="number-2-r" type="number" min="0" max="255" value="255" />
+      </div>
+      <div>
+        <label for="color-2-g" class="green">G</label> 
+        <input id="color-2-g" type="range" min="0" max="255" value="255" />
+        <input id="number-2-g" type="number"min="0" max="255" value="255" />
+      </div>
+      <div>
+        <label for="color-2-b" class="blue">B</label> 
+        <input id="color-2-b" type="range" min="0" max="255" value="255" />
+        <input id="number-2-b" type="number" min="0" max="255" value="255" />
+      </div>
+      <input id="color-2-hex" data-target="2" type="text" value="#FFFFFF" maxlength="7" />
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/c3-color-contrast-checker/src/script.js b/c3-color-contrast-checker/src/script.js
new file mode 100644
index 0000000..82d190c
--- /dev/null
+++ b/c3-color-contrast-checker/src/script.js
@@ -0,0 +1,136 @@
+function updateDemoColors(colorFront, colorBack) {
+  const demo = document.querySelector("#sample-text");
+  demo.style.color = `rgb(${colorFront.toString()})`;
+  demo.style.backgroundColor = `rgb(${colorBack.toString()})`;
+}
+
+/* the following functions are adapted from https://stackoverflow.com/a/9733420/3695983 */
+function luminanace(r, g, b) {
+  var a = [r, g, b].map(function (v) {
+    v /= 255;
+    return v <= 0.03928
+      ? v / 12.92
+    : Math.pow( (v + 0.055) / 1.055, 2.4 );
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+function contrast(rgb1, rgb2) {
+  const luminanceFront = luminanace(rgb1[0], rgb1[1], rgb1[2]);
+  const luminanceBack  = luminanace(rgb2[0], rgb2[1], rgb2[2]);
+  return luminanceBack > luminanceFront 
+    ? ((luminanceFront + 0.05) / (luminanceBack + 0.05))
+    : ((luminanceBack + 0.05) / (luminanceFront + 0.05));
+}
+
+function updateBoxesColors(colorFront, colorBack) {
+  const ratio = contrast(colorFront, colorBack);
+  document.querySelector("#aa-normal").className  = ratio < 0.22222 ? "" : "fail";
+  document.querySelector("#aa-large").className   = ratio < 0.33333 ? "" : "fail";
+  document.querySelector("#aaa-normal").className = ratio < 0.14285 ? "" : "fail";
+  document.querySelector("#aaa-large").className  = ratio < 0.22222 ? "" : "fail";
+  
+  const totalWrong = document.querySelectorAll(".fail").length;
+  let mouth = document.querySelector("#mouth");
+  let smile = document.querySelector("#smile");
+  
+  switch(totalWrong) {
+    case 0:
+      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,149  125,149  116,149 109,142 106,132 Z");
+      smile.setAttribute("d", "M125,144 C 140,144 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,144 125,144 Z");
+      break;
+    case 1:
+    case 2:
+      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z");
+      smile.setAttribute("d", "M125,141 C 140,141 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,141 125,141 Z");
+      break;
+    case 3: 
+      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  140,143  125,143  110,143 109,138 106,132 Z");
+    smile.setAttribute("d", "M125,138 C 140,138 143.5,132 143.5,132 143.5,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,138 125,138 Z");
+      break;
+    case 4: 
+      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  134,142  125,142  116,142 109,138 106,132 Z");
+      smile.setAttribute("d", "M125,135 C 140,135 143,132 143,132 143,135 125,136 125,136 125,136 106.5,135 106.5,132 106.5,132 110,135 125,135 Z");
+      break;
+  }
+}
+
+function updateHex(colorFront, colorBack) {
+  const colorFrontHex = colorFront.map(function(el) { return Number(el).toString(16).padStart(2, "0").toUpperCase(); });
+  const colorBackHex = colorBack.map(function(el) { return Number(el).toString(16).padStart(2, "0").toUpperCase(); });
+  document.querySelector("#color-1-hex").value = `#${colorFrontHex.join('')}`;
+  document.querySelector("#color-2-hex").value = `#${colorBackHex.join('')}`
+}
+
+function updateColors() {
+  const colorFront = [ 
+    document.querySelector("#color-1-r").value,
+    document.querySelector("#color-1-g").value,
+    document.querySelector("#color-1-b").value
+  ];
+  const colorBack = [
+    document.querySelector("#color-2-r").value,
+    document.querySelector("#color-2-g").value,
+    document.querySelector("#color-2-b").value
+  ];
+
+  updateDemoColors(colorFront, colorBack);
+  updateBoxesColors(colorFront, colorBack);
+  updateHex(colorFront, colorBack);
+}
+
+document.querySelectorAll("input[type='number'], input[type='range']").forEach(function(el) {
+  el.addEventListener("input", function() {
+    if (this.type === "range") {
+      this.nextElementSibling.value = this.value;
+    } else if (this.type === "number") {
+      this.previousElementSibling.value = this.value;
+    }
+    updateColors();
+  });
+});
+
+document.querySelectorAll("input[type='text']").forEach(function(el) {
+  el.addEventListener("blur", function() {
+    let val = this.value;
+    let wrongValue = false;
+    if (val[0] === "#") val = val.substring(1);
+    if (val.length === 3 || val.length === 6) {
+      if (val.length === 3) {
+        val = `${val[0]}${val[0]}${val[1]}${val[1]}${val[2]}${val[2]}`;
+      }
+      if (val.match(/[0-9A-Fa-f]{6}/)) {
+        const red = parseInt(`${val[0]}${val[1]}`, 16);
+        const green = parseInt(`${val[2]}${val[3]}`, 16);
+        const blue = parseInt(`${val[4]}${val[5]}`, 16);
+        const target = this.dataset.target;
+        
+        document.getElementById(`number-${target}-r`).value = red;
+        document.getElementById(`number-${target}-g`).value = green;
+        document.getElementById(`number-${target}-b`).value = blue;
+        document.getElementById(`color-${target}-r`).value = red;
+        document.getElementById(`color-${target}-g`).value = green;
+        document.getElementById(`color-${target}-b`).value = blue;
+        
+        updateColors();
+      } else {
+        wrongValue = true;
+      }
+    } else {
+      wrongValue = true;
+    }
+    
+    if (wrongValue){
+      const colorFront = [ 
+        document.querySelector("#color-1-r").value,
+        document.querySelector("#color-1-g").value,
+        document.querySelector("#color-1-b").value
+      ];
+      const colorBack = [
+        document.querySelector("#color-2-r").value,
+        document.querySelector("#color-2-g").value,
+        document.querySelector("#color-2-b").value
+      ];
+      updateHex(colorFront, colorBack)
+    }
+  });
+})
\ No newline at end of file
diff --git a/c3-color-contrast-checker/src/style.css b/c3-color-contrast-checker/src/style.css
new file mode 100644
index 0000000..fa1c8e5
--- /dev/null
+++ b/c3-color-contrast-checker/src/style.css
@@ -0,0 +1,183 @@
+/* Generic */
+@import url('https://fonts.googleapis.com/css?family=Ubuntu');
+
+html, body {
+  background: #ddd;
+  font-family: Ubuntu, sans-serif;
+  font-size: 16px;
+}
+
+h1, h2 {
+  text-align: center;
+  display: block;
+  margin-top: 0;
+}
+
+/* Tool general styles */
+#color-contrast {
+  background: #fff;
+  box-shadow: 0 0 1rem rgba(0,0,0,0.25);
+  border-radius: 2px;
+  width: 500px;
+  margin: auto auto;
+  box-sizing: border-box;
+  padding: 2rem;
+  /*position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);*/
+}
+
+/* character */
+#jill {
+  width: 250px;
+  height: 250px;
+  margin: auto auto;
+  border-radius: 100%;
+}
+
+/* SVG */
+@-moz-keyframes blink { 
+  0%  { ry: 5; }
+  49% { ry: 5; }
+  50% { ry: 0; }
+  51% { ry: 5; }
+}
+@-webkit-keyframes blink { 
+  0%  { ry: 5; }
+  49% { ry: 5; }
+  50% { ry: 0; }
+  51% { ry: 5; }
+}
+@keyframes blink { 
+  0%  { ry: 5; }
+  49% { ry: 5; }
+  50% { ry: 0; }
+  51% { ry: 5; }
+}
+.skin { fill: #eab38f; }
+.eyes { fill: #1f1f1f; animation: blink 10s alternate infinite; -webkit-animation: blink 10s alternate infinite; -moz-animation: blink 10s alternate infinite;}
+.hair { fill: #2f1b0d; }
+.line { fill: none; stroke: #2f1b0d; stroke-width:2px; }
+.arm, #mouth, #smile, .eyes, .hand, .eyebrow { transition: all 0.25s; }
+
+/* boxes */
+#boxes {
+  display: flex;
+  margin-top: 1.5rem;
+}
+
+#boxes > div {
+  flex: 1;
+  text-align: center;
+  background: #081;
+  color: white;
+  padding: 0.5rem 0;
+  margin-left: 10px;
+  border-radius: 3px;
+  transition: background 0.5s;
+  position: relative;
+}
+
+#boxes > div::after {
+  content: "✓ Pass";
+  display: block;
+  position: absolute;
+  color: #000;
+  text-align:center;
+  width: 100%;
+  margin-top: 10px;
+}
+
+#boxes > div.fail {
+  background: #d32;
+}
+
+#boxes > div.fail::after {
+  content: "✕ Fail";
+}
+
+#boxes > div:first-child {
+  margin-left: 0;
+}
+
+#boxes span:first-child {
+  font-size: 0.75em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+}
+
+/* demo */
+#sample-text {
+  margin: 2.5rem 0 1.6rem 0;
+  padding: 1rem;
+  background: #fff;
+  color: #000;
+  text-align: center;
+  font-size: 20px;
+  border-radius: 2px;
+}
+
+/* sliders */
+#bars {
+  display: flex;
+  flex-direction: row;
+}
+
+#bars > div {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+#bars > div:first-child {
+  margin-right: 0.5rem;
+}
+
+#bars > div:last-child {
+  margin-left: 0.5rem;
+}
+
+#bars > div > div {
+  display: flex;
+  margin-bottom: 0.5rem;
+}
+
+#bars label {
+  display: inline-block;
+  color: white;
+  width: 2rem;
+  height: 2rem;
+  line-height: 2rem;
+  font-size: 1rem;
+  text-align: center;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+
+label.red { background: #d32; }
+label.green { background: #081; }
+label.blue { background: #26e; }
+
+#bars input[type="range"] {
+  flex: 1;
+}
+#bars input[type="number"] {
+  text-align: center;
+  width: 3rem;
+  border-radius: 2px;
+  border: 1px solid #ccc;
+  font-size: 0.75rem;
+  height: 2rem;
+  box-sizing:border-box;
+  line-height: 2rem;
+}
+#bars input[type="text"] {
+  border-radius: 2px;
+  border: 1px solid #ccc;
+  text-align: center;
+  font-size: 1rem;
+  height: 2rem;
+  box-sizing:border-box;
+  line-height: 2rem;
+}
\ No newline at end of file
diff --git a/cacheable-3-colour-svgs-via-use/README.markdown b/cacheable-3-colour-svgs-via-use/README.markdown
new file mode 100644
index 0000000..1ccd509
--- /dev/null
+++ b/cacheable-3-colour-svgs-via-use/README.markdown
@@ -0,0 +1,5 @@
+# Cacheable 3 colour SVGs via <use>
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/scootman/pen/MWmombb](https://codepen.io/scootman/pen/MWmombb).
+
+
diff --git a/cacheable-3-colour-svgs-via-use/dist/index.html b/cacheable-3-colour-svgs-via-use/dist/index.html
new file mode 100644
index 0000000..94e3038
--- /dev/null
+++ b/cacheable-3-colour-svgs-via-use/dist/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Cacheable 3 colour SVGs via &lt;use&gt;</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<body data-theme="dark">
+  <svg class="defs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="package" viewBox="0 0 36 36"><g data-note="darker elements"><path d="M33.94,10.08A3.11,3.11,0,0,0,33.56,9L18,18l-7-4h0L27,4.72,25,3.57,9,12.8H9L2.44,9a3.11,3.11,0,0,0-.38,1.07,1.26,1.26,0,0,0,0,.27,2.64,2.64,0,0,0,0,.29V25.38a3.28,3.28,0,0,0,1.63,2.8l12.75,7.36a3.27,3.27,0,0,0,3.24,0l12.76-7.36.35-.24A3.27,3.27,0,0,0,34,25.38V10.64a2.64,2.64,0,0,0,0-.29A1.26,1.26,0,0,0,33.94,10.08Z"></path></g><g data-note="lighter elements" style="fill: currentcolor"><path d="M9,12.8,25,3.56,19.62.46a3,3,0,0,0-.78-.33A3,3,0,0,0,18.11,0a1.92,1.92,0,0,0-.24,0,3.37,3.37,0,0,0-.71.09,3.16,3.16,0,0,0-.79.33L3.62,7.82,3.38,8l-.21.17A3.18,3.18,0,0,0,2.44,9Z"></path><path d="M33.56,9a3.18,3.18,0,0,0-.73-.86L32.62,8l-.25-.16L32,7.58,27,4.72,11,14h0l7,4Z"></path><path d="M11,14v5.22a.5.5,0,0,1-.75.43l-.75-.43a1,1,0,0,1-.5-.87V12.8H9L2.44,9a3.11,3.11,0,0,0-.38,1.07,1.26,1.26,0,0,0,0,.27,2.64,2.64,0,0,0,0,.29V25.36a2.64,2.64,0,0,0,0,.29,1.26,1.26,0,0,0,0,.27,3.23,3.23,0,0,0,1.11,1.93l.21.16a2.2,2.2,0,0,0,.25.17l.81.47,11.94,6.89A3.27,3.27,0,0,0,18,36V18Z" style="opacity: 0.5"></path></g></symbol><symbol id="delivery" viewBox="0 0 36 36"><g data-note="darker elements"><path d="M35.72,5.41l-.14-.11-24.93,16,2,8.83a.92.92,0,0,0,.65.69.94.94,0,0,0,.93-.24l5.14-5.22-4-1.87Z"></path></g><g data-note="lighter elements" style="fill: currentcolor"><path d="M34.81,5.17.68,14.85A.94.94,0,0,0,.54,16.6l10.11,4.71,24.93-16A.9.9,0,0,0,34.81,5.17Z"></path><path d="M35.72,5.41,15.34,23.5l4,1.87,6.52,3a1.87,1.87,0,0,0,2.56-1.06l7.51-21A.92.92,0,0,0,35.72,5.41Z"></path><path d="M35.72,5.41l-.14-.11-24.93,16,2,8.83a.92.92,0,0,0,.65.69l2.06-7.33Z" style="opacity: 0.5"></path></g></symbol></defs></svg>
+  <div class="layout">
+    <div class="icons">
+      <button id="icon-1"><svg class="icon" viewBox="0 0 36 36"><use href="#package"></use></svg></button><button class="alt" id="icon-2"><svg class="icon" viewBox="0 0 36 36"><use href="#delivery"></use></svg></button>
+    </div>
+    <div class="segmented-control">
+      <input id="light-theme" name="theme" type="radio" value="light" /><label for="light-theme">Light</label><input checked="" id="dark-theme" name="theme" type="radio" value="dark" /><label for="dark-theme">Dark</label>
+    </div>
+    <div class="links">
+      <a href="https://twitter.com/_AntiAlias_/status/1416989388429352961?s=20" target="_top" title="Twitter thread">Detailed explanation</a><a href="https://codepen.io/scootman/project/editor/ArpPQr" target="_top" title="Codepen project">Production ready demo</a>
+    </div>
+  </div>
+</body>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/cacheable-3-colour-svgs-via-use/dist/script.js b/cacheable-3-colour-svgs-via-use/dist/script.js
new file mode 100644
index 0000000..6f2109a
--- /dev/null
+++ b/cacheable-3-colour-svgs-via-use/dist/script.js
@@ -0,0 +1,5 @@
+$('input[name="theme"]').on('change', function() {
+    if ($(this).prop("checked", true)) {
+      $('body').attr('data-theme', $(this).prop('value'));
+    }
+  });
\ No newline at end of file
diff --git a/cacheable-3-colour-svgs-via-use/dist/style.css b/cacheable-3-colour-svgs-via-use/dist/style.css
new file mode 100644
index 0000000..b6c412a
--- /dev/null
+++ b/cacheable-3-colour-svgs-via-use/dist/style.css
@@ -0,0 +1,174 @@
+@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400&display=swap");
+svg {
+  -webkit-backface-visibility: hidden;
+  -webkit-transform: translateZ(0) scale(1);
+  font-smoothing: antialiased !important;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
+  min-width: 375px;
+  color: #0e0e11;
+  background: #eeeef1;
+  font-family: "Barlow", sans-serif;
+  font-size: 14px;
+  transition: all 0.1s ease-in-out;
+}
+body[data-theme=dark] {
+  color: white;
+  background: #1c1c21;
+}
+
+.layout {
+  display: grid;
+  grid-template-rows: 20fr auto 21fr;
+  grid-template-columns: 1fr 2fr 1fr;
+  grid-template-areas: "header header header" ". icons ." "footer footer footer";
+  justify-items: center;
+  min-height: 192px;
+  flex: 1 0 0;
+  max-width: 1200px;
+}
+
+.icons {
+  display: flex;
+  grid-area: icons;
+}
+.icons button {
+  all: unset;
+  position: relative;
+  cursor: pointer;
+}
+@media (hover: hover) {
+  .icons button::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    background: white;
+    z-index: -1;
+    border-radius: 10%;
+    transition: all 0.1s ease-in-out;
+  }
+  [data-theme=dark] .icons button::before {
+    background: #0e0e11;
+  }
+}
+.icons button:hover svg, .icons button:hover::before {
+  opacity: 1;
+}
+.icons button:hover svg {
+  color: #05c7b7;
+  fill: #007399;
+}
+.icons button.alt:hover svg {
+  color: #ffaa00;
+  fill: #e5592e;
+}
+
+svg {
+  color: #75758a;
+  fill: #0e0e11;
+}
+[data-theme=dark] svg {
+  color: white;
+  fill: #868698;
+}
+svg.defs {
+  position: absolute;
+  height: 0;
+  width: 0;
+}
+svg.icon {
+  width: 60%;
+  margin: 20%;
+  opacity: 0.6;
+  transition: all 0.1s ease-in-out;
+}
+
+.segmented-control {
+  grid-area: header;
+  align-self: start;
+  display: flex;
+  width: 144px;
+  margin: 27px 0;
+  height: 27px;
+  border-radius: 5px;
+  background: white;
+  z-index: 1;
+  transition: all 0.1s ease-in-out;
+}
+[data-theme=dark] .segmented-control {
+  background: #0e0e11;
+}
+[data-theme=dark] .segmented-control label {
+  color: #868698;
+}
+[data-theme=dark] .segmented-control label:last-child::before {
+  background-color: #1c1c21;
+}
+.segmented-control input {
+  position: absolute;
+  transform: scale(0);
+}
+.segmented-control input:checked + label {
+  color: inherit;
+}
+.segmented-control input:checked + label ~ label:last-child::before {
+  transform: translate(-100%);
+}
+.segmented-control label {
+  flex: 1 0 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding-bottom: 1px;
+  color: #75758a;
+  transition: all 0.1s ease-in-out;
+  cursor: pointer;
+}
+.segmented-control label:hover {
+  color: inherit;
+}
+.segmented-control label:last-child::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-clip: padding-box;
+  background-color: #eeeef1;
+  border-radius: 5px;
+  border: 2px solid transparent;
+  z-index: -1;
+  transition: transform 0.25s ease-in-out, background-color 0.1s ease-in-out;
+}
+
+.links {
+  grid-area: footer;
+  align-self: end;
+  display: flex;
+  opacity: 0.55;
+}
+.links a {
+  all: unset;
+  cursor: pointer;
+  margin: 27px 0;
+  padding: 0 0.5em;
+  color: #75758a;
+  transition: all 0.1s ease-in-out;
+}
+[data-theme=dark] .links a {
+  color: #868698;
+}
+.links a:hover {
+  color: inherit;
+}
\ No newline at end of file
diff --git a/cacheable-3-colour-svgs-via-use/license.txt b/cacheable-3-colour-svgs-via-use/license.txt
new file mode 100644
index 0000000..3b2fef3
--- /dev/null
+++ b/cacheable-3-colour-svgs-via-use/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Scott Henderson (https://codepen.io/scootman/pen/MWmombb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/cacheable-3-colour-svgs-via-use/src/index.slim b/cacheable-3-colour-svgs-via-use/src/index.slim
new file mode 100644
index 0000000..f437c25
--- /dev/null
+++ b/cacheable-3-colour-svgs-via-use/src/index.slim
@@ -0,0 +1,47 @@
+// A full explanation about this approach can be found here: https://twitter.com/_AntiAlias_/status/1416989388429352961?s=20
+
+body data-theme="dark"
+
+	// Below would be shifted to an external asset (icons.svg) to be cacheable (see notes below)
+	// Refer https://codepen.io/scootman/project/editor/28a25d9b324f8b1ce54b2917b241ca14 for production ready cacheable demo
+	svg.defs xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+		defs
+			symbol id="package" viewBox="0 0 36 36"
+				g data-note="darker elements"
+					path d="M33.94,10.08A3.11,3.11,0,0,0,33.56,9L18,18l-7-4h0L27,4.72,25,3.57,9,12.8H9L2.44,9a3.11,3.11,0,0,0-.38,1.07,1.26,1.26,0,0,0,0,.27,2.64,2.64,0,0,0,0,.29V25.38a3.28,3.28,0,0,0,1.63,2.8l12.75,7.36a3.27,3.27,0,0,0,3.24,0l12.76-7.36.35-.24A3.27,3.27,0,0,0,34,25.38V10.64a2.64,2.64,0,0,0,0-.29A1.26,1.26,0,0,0,33.94,10.08Z"
+				g data-note="lighter elements" style="fill: currentcolor"
+					path d="M9,12.8,25,3.56,19.62.46a3,3,0,0,0-.78-.33A3,3,0,0,0,18.11,0a1.92,1.92,0,0,0-.24,0,3.37,3.37,0,0,0-.71.09,3.16,3.16,0,0,0-.79.33L3.62,7.82,3.38,8l-.21.17A3.18,3.18,0,0,0,2.44,9Z"
+					path d="M33.56,9a3.18,3.18,0,0,0-.73-.86L32.62,8l-.25-.16L32,7.58,27,4.72,11,14h0l7,4Z"
+					path d="M11,14v5.22a.5.5,0,0,1-.75.43l-.75-.43a1,1,0,0,1-.5-.87V12.8H9L2.44,9a3.11,3.11,0,0,0-.38,1.07,1.26,1.26,0,0,0,0,.27,2.64,2.64,0,0,0,0,.29V25.36a2.64,2.64,0,0,0,0,.29,1.26,1.26,0,0,0,0,.27,3.23,3.23,0,0,0,1.11,1.93l.21.16a2.2,2.2,0,0,0,.25.17l.81.47,11.94,6.89A3.27,3.27,0,0,0,18,36V18Z" style="opacity: 0.5"
+
+			symbol id="delivery" viewBox="0 0 36 36"
+				g data-note="darker elements"
+					path d="M35.72,5.41l-.14-.11-24.93,16,2,8.83a.92.92,0,0,0,.65.69.94.94,0,0,0,.93-.24l5.14-5.22-4-1.87Z"
+				g data-note="lighter elements" style="fill: currentcolor"
+					path d="M34.81,5.17.68,14.85A.94.94,0,0,0,.54,16.6l10.11,4.71,24.93-16A.9.9,0,0,0,34.81,5.17Z" 
+					path d="M35.72,5.41,15.34,23.5l4,1.87,6.52,3a1.87,1.87,0,0,0,2.56-1.06l7.51-21A.92.92,0,0,0,35.72,5.41Z"
+					path d="M35.72,5.41l-.14-.11-24.93,16,2,8.83a.92.92,0,0,0,.65.69l2.06-7.33Z" style="opacity: 0.5"
+
+
+	.layout
+	
+		.icons
+			button#icon-1
+				svg.icon viewBox="0 0 36 36"
+					use href="#package"
+					/ use href="https://assets.codepen.io/436544/icons.svg#package"
+					/ ^ this should work in a production environment, but in the Codepen environment you get a 'Unsafe attempt to load' error (see CodePen project link above)
+			button#icon-2.alt
+				svg.icon viewBox="0 0 36 36"
+					use href="#delivery"
+					/ use href="https://assets.codepen.io/436544/icons.svg#delivery"
+					
+		.segmented-control
+			input#light-theme type="radio" name="theme" value="light"
+			label for="light-theme" Light
+			input#dark-theme {type="radio" name="theme" value="dark" checked}
+			label for="dark-theme" Dark
+			
+		.links
+			a href="https://twitter.com/_AntiAlias_/status/1416989388429352961?s=20" target="_top" title='Twitter thread' Detailed explanation
+			a href="https://codepen.io/scootman/project/editor/ArpPQr" target="_top" title='Codepen project' Production ready demo
\ No newline at end of file
diff --git a/cacheable-3-colour-svgs-via-use/src/script.js b/cacheable-3-colour-svgs-via-use/src/script.js
new file mode 100644
index 0000000..6f2109a
--- /dev/null
+++ b/cacheable-3-colour-svgs-via-use/src/script.js
@@ -0,0 +1,5 @@
+$('input[name="theme"]').on('change', function() {
+    if ($(this).prop("checked", true)) {
+      $('body').attr('data-theme', $(this).prop('value'));
+    }
+  });
\ No newline at end of file
diff --git a/cacheable-3-colour-svgs-via-use/src/style.scss b/cacheable-3-colour-svgs-via-use/src/style.scss
new file mode 100644
index 0000000..12a4aef
--- /dev/null
+++ b/cacheable-3-colour-svgs-via-use/src/style.scss
@@ -0,0 +1,237 @@
+// This is an extension of the two colour 'SVG use' approach that has been documented for some time (e.g. https://css-tricks.com/lodge/svg/21-get-two-colors-use/)
+// This example includes changing the opacity on some lighter elements to create a third colour
+
+// A full explanation about this approach can be found here: https://twitter.com/_AntiAlias_/status/1416989388429352961?s=20
+
+
+// Defs ---------
+
+// neutral colors
+$light-theme-fgd: hsl(240,8%,6%);
+$light-theme-fgd-weaker: hsl(240,8%,50%); // weaker contrast
+$light-theme-bgd: hsl(240,8%,94%);
+$light-theme-bgd-stronger: white; // stronger contrast
+
+$dark-theme-fgd: white;
+$dark-theme-fgd-weaker: hsl(240,8%,56%);
+$dark-theme-bgd: hsl(240,8%,12%);
+$dark-theme-bgd-stronger: hsl(240,8%,6%);
+
+// neutral colors (as applied to svg icons; note reversal of contrast to make 3D icons 'lit' naturally for both themes)
+$light-theme-icon-light: $light-theme-fgd-weaker;
+$light-theme-icon-dark: $light-theme-fgd;
+$dark-theme-icon-light: $dark-theme-fgd;
+$dark-theme-icon-dark: $dark-theme-fgd-weaker;
+
+// turquoise (same colors are used for both themes)
+$icon-color-a-light: hsl(175,95%,40%);
+$icon-color-a-dark: hsl(195,100%,30%);
+
+// amber (same colors are used for both themes)
+$icon-color-b-light: hsl(40,100%,50%);
+$icon-color-b-dark: hsl(14,78%,54%);
+
+
+// typeface (an awesome one by Jeremy Tribby)
+@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400&display=swap');
+
+// standard transition
+$transition: all .1s ease-in-out;
+
+// changing the color state of an SVG may cause it to jiggle in Safari
+%svg-safari-jiggle-fix {
+	-webkit-backface-visibility: hidden;
+	-webkit-transform: translateZ(0) scale(1);
+	font-smoothing: antialiased !important;
+}
+
+
+
+// Rules ---------
+
+body {
+	margin: 0;
+	display: flex;
+	justify-content: center;
+	min-height: 100vh;
+	min-width: 375px;
+	color: $light-theme-fgd;
+	background: $light-theme-bgd;
+	font-family: 'Barlow', sans-serif;
+	font-size: 14px;
+	transition: $transition;
+	&[data-theme='dark'] {
+		color: $dark-theme-fgd;
+		background: $dark-theme-bgd;
+	}
+}
+
+.layout {
+	display: grid;
+	grid-template-rows: 20fr auto 21fr; // +1fr to shift icons up to optical center
+	grid-template-columns: 1fr 2fr 1fr;
+	grid-template-areas: 
+		"header header header"
+    ". icons ."
+    "footer footer footer";
+	justify-items: center;
+	min-height: 192px;
+	flex: 1 0 0;
+	max-width: 1200px;
+}
+
+.icons {
+	display: flex;
+	grid-area: icons;
+	button {
+		all: unset;
+		position: relative;
+  	cursor: pointer;
+		@media (hover: hover) {
+			&::before {
+				// hover background 
+				// Making this a (psuedo) child of label helps with transitions sync, however pseudo elements revealed on hover
+				// sometimes require an additional touch on mobile devices, so disabed in this case
+				content: '';
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				opacity: 0;
+				background: $light-theme-bgd-stronger;
+				z-index: -1;
+				border-radius: 10%;
+				transition: $transition;
+				[data-theme='dark'] & {
+					background: $dark-theme-bgd-stronger;
+				}
+			}
+		}
+		&:hover {
+			svg, &::before {
+				opacity: 1;
+			}
+			svg {
+				color: $icon-color-a-light;
+				fill: $icon-color-a-dark;
+			}
+		}
+		&.alt:hover {
+			svg {
+				color: $icon-color-b-light;
+				fill: $icon-color-b-dark;
+			}
+		}
+	}
+}
+
+svg {
+	color: $light-theme-icon-light;
+	fill: $light-theme-icon-dark;
+	@extend %svg-safari-jiggle-fix;
+	[data-theme='dark'] & {
+		color: $dark-theme-icon-light;
+		fill: $dark-theme-icon-dark;
+	}
+	&.defs {
+    position: absolute;
+    height: 0;
+    width: 0;
+  }
+	&.icon {
+		width: 60%;
+		margin: 20%;
+		opacity: .6;
+		transition: $transition;
+	}
+}
+
+.segmented-control {
+	grid-area: header;
+	align-self: start;
+	display: flex;
+	width: 144px;
+	margin: 27px 0;
+	height: 27px;
+	border-radius: 5px;
+	background: $light-theme-bgd-stronger;
+	z-index: 1;
+	transition: $transition;
+	[data-theme='dark'] & {
+		background: $dark-theme-bgd-stronger;
+		label {
+			color: $dark-theme-fgd-weaker;
+			&:last-child::before {
+				background-color: $dark-theme-bgd;
+			}
+		}
+	}
+	input {
+		position: absolute;
+		transform: scale(0); // not 'hidden' for better accessibilty
+		&:checked + label {
+			color: inherit;
+			~ label:last-child::before {
+				// if first radio checked shift background of last radio left
+				// this approach can be extended to 3 or 4 segments, but gets messy beyond 4
+				// 3 value control example can be found here: https://codepen.io/scootman/pen/qBEPoLO
+				transform: translate(-100%); 
+			}
+		}
+	}
+	label {
+		flex: 1 0 0px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		padding-bottom: 1px;
+		color: $light-theme-fgd-weaker;
+		transition: $transition;
+		cursor: pointer;
+		&:hover {
+			color: inherit;
+		}
+		&:last-child::before {
+			// checked background
+			// placed on light item so it can 'detect' if radios are check before it in the DOM &
+			// and allows for sliding transition effect
+			content: '';
+			position: absolute;
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			background-clip: padding-box;
+			background-color: $light-theme-bgd;
+			border-radius: 5px;
+			border: 2px solid transparent;
+			z-index: -1;
+			transition: transform .25s ease-in-out, background-color .1s ease-in-out ;
+		}
+	}
+}
+
+
+.links {
+	grid-area: footer;
+	align-self: end;
+	display: flex;
+	opacity: .55;
+	a {
+		all: unset;
+		cursor: pointer;
+		margin: 27px 0;
+		padding: 0 .5em;
+		color: $light-theme-fgd-weaker;
+		transition: $transition;
+		[data-theme='dark'] & {
+			color: $dark-theme-fgd-weaker;
+		}
+		&:hover {
+			color: inherit;
+		}
+	}
+}
+
diff --git a/cafe-menu-interactive-codepen-challenge/README.markdown b/cafe-menu-interactive-codepen-challenge/README.markdown
new file mode 100644
index 0000000..6b8a73b
--- /dev/null
+++ b/cafe-menu-interactive-codepen-challenge/README.markdown
@@ -0,0 +1,19 @@
+# Cafe Menu Interactive Codepen challenge
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/toruskit/pen/bGWNYjj](https://codepen.io/toruskit/pen/bGWNYjj).
+
+Magazine Layout design for Codepen challenge.  CSS interactions are made with [Torus Kit] (https://toruskit.com).
+
+Animations are done with this super simple HTML code:
+
+```html
+data-tor-group="
+h2            => active(p):reveal(up) slow quad wait(400ms);
+
+.prices span  => active(p):[pull.right(md) fade.in] slow wait(500ms) delay(/+100ms/);
+
+hr            => active(p):scale.from(0) origin.left slow wait(500ms);
+
+.product      => active(p):[fade.in pull.up(md)] slower wait(500ms) delay(/+100ms/);
+"
+```
diff --git a/cafe-menu-interactive-codepen-challenge/dist/index.html b/cafe-menu-interactive-codepen-challenge/dist/index.html
new file mode 100644
index 0000000..20c9c61
--- /dev/null
+++ b/cafe-menu-interactive-codepen-challenge/dist/index.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Cafe Menu Interactive Codepen challenge</title>
+  <script>(function (w, d, s, l, i) {
+    w[l] = w[l] || []; w[l].push({
+      'gtm.start':
+        new Date().getTime(), event: 'gtm.js'
+    }); var f = d.getElementsByTagName(s)[0],
+      j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+        'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+  })(window, document, 'script', 'dataLayer', 'GTM-KHN4CRK');</script>
+<link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Abril+Fatface&amp;family=Poppins&amp;display=swap" crossorigin="anonymous">
+<link rel="stylesheet" href="https://toruskit.com/assets/css/toruskit.bundle.min.css">
+<script src="https://toruskit.com/assets/js/toruskit.min.js"></script><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="overflow-auto h-100">
+	<div class="h-100 position-relative f.p-8">
+
+		<!-- Main -->
+		<main class="h-100 shadow-pop">
+			<div class="d-md-flex h-100">
+				<!-- Left -->
+				<div id="left" class="w-md-40 h-100">
+					<div id="about" class="position-relative h-100">
+						<div class="overlay h-100">
+							<div class="overlay-content z-index-2 overflow-visible">
+								<h1 class="position-absolute ms-6 mt-n7 svg-shadow-lg">The Cascade Cafe</h1>
+
+								<div id="address" class="position-absolute start-0 bottom-0 ms-6 mb-n5 p-6 shadow-lg">
+									<address class="mb-3">
+										<div class="circle circle-md position-absolute start-0 bg-black bg-opacity-50" data-tor="shift.left(50%)">
+											<svg viewBox="0 0 384 512" width="15" title="map-marker-alt" fill="white">
+												<path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z" />
+											</svg>
+										</div>
+
+										<p class="h3">123 Main Street <br> Smalltown, PA</p>
+
+										<div class="circle circle-md position-absolute start-0 bg-black bg-opacity-50" data-tor="shift.left(50%) shift.up(10%)">
+											<svg viewBox="0 0 512 512" width="15" title="phone-alt" fill="white">
+												<path d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z" />
+											</svg>
+										</div>
+										<a href="4125550100" class="text-white text-decoration-none my-2 d-block">412-555-0100</a>
+									</address>
+
+									<table class="hours">
+										<tbody>
+											<tr>
+												<td class="pe-6">Mon. - Thurs.</td>
+												<td>6 a.m. - 9 p.m.</td>
+											</tr>
+											<tr>
+												<td class="pe-6">Fri. - Sat.</td>
+												<td>6 a.m. - 11 p.m.</td>
+											</tr>
+											<tr>
+												<td class="pe-6">Sunday</td>
+												<td>8 a.m. - 2 p.m.</td>
+											</tr>
+										</tbody>
+									</table>
+								</div>
+
+							</div>
+							<img class="obj-fit-cover w-h-100" src="https://assets.codepen.io/t-1/nathan-dumlao-6VhPY27jdps-unsplash.jpg" alt="three hands toasting with coffee drinks">
+						</div>
+					</div>
+				</div>
+
+				<!-- Right -->
+				<div id="right" class="w-md-60 h-100 position-relative">
+
+					<div class="position-absolute shadow-lg z-index-1 d-flex flex-column end-0 bottom-0 z-index-2" data-tor-slider-target="#slider" data-tor="shift.right(50%) shift.up(50%)">
+						<button role="button" class="btn btn-arrow square p-4 shadow-0" data-tor-slide-to="next"></button>
+						<button role="button" class="btn btn-arrow-left square p-4 shadow-0" data-tor-slide-to="prev"></button>
+					</div>
+
+					<div class="h-100" id="slider" data-tor-slider="add-parent(active) stack(true)" data-tor-group="
+              .slide => active(p):clip(up, {skew: 4rem}) slowest quad;">
+
+						<div class="slide px-7 pt-7 h-100 overflow-auto scrollbar scrollbar-light" data-tor="bg(#846b47)" data-tor-group="
+                h2            => active(p):reveal(up) slow quad wait(400ms);
+                .prices span  => active(p):[pull.right(md) fade.in] slow wait(500ms) delay(/+100ms/);
+                hr            => active(p):scale.from(0) origin.left slow wait(500ms);
+                .product      => active(p):[fade.in pull.up(md)] slower wait(500ms) delay(/+100ms/);
+              ">
+							<header class="">
+								<h2 class="text-end">Coffee</h2>
+								<p class="prices text-end">
+
+									<span class="d-block"><strong>Small:</strong> $2</span>
+
+									<span class="d-block"><strong>Large:</strong> $4</span>
+
+								</p>
+							</header>
+
+							<hr class="border-white my-5">
+
+							<dl class="list">
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">01</span>
+										House Blend
+									</dt>
+									<dd class="description">
+										<p>Smoky, strong, and assertive, just like us.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">02</span>
+										Organic French Roast
+									</dt>
+									<dd class="description">
+										<p>Smooth and mellow with hints of molasses.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">03</span>
+										Organic Decaf
+									</dt>
+									<dd class="description">
+										<p>Full bodied and rich, we promise you won&#39;t miss the caffiene.</p>
+									</dd>
+								</div>
+
+							</dl>
+						</div>
+
+						<div class="slide px-7 pt-7 h-100 overflow-auto scrollbar scrollbar-light" data-tor="bg(#755f3f)" data-tor-group="
+                h2            => active(p):reveal(up) slow quad wait(400ms);
+                .prices span  => active(p):[pull.right(md) fade.in] slow wait(500ms) delay(/+100ms/);
+                hr            => active(p):scale.from(0) origin.left slow wait(500ms);
+                .product      => active(p):[fade.in pull.up(md)] slower wait(500ms) delay(/+100ms/);
+              ">
+							<header class="">
+								<h2 class="text-end">Espresso Drinks</h2>
+								<p class="prices text-end">
+
+									<span class="d-block"><strong>Small:</strong> $3</span>
+
+									<span class="d-block"><strong>Large:</strong> $5</span>
+
+								</p>
+							</header>
+
+							<hr class="border-white my-5">
+
+							<dl class="list">
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">01</span>
+										Machiatto
+									</dt>
+									<dd class="description">
+										<p>Espressso and steamed milk, served in a demitasse cup. (Size Small Only)</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">02</span>
+										Latte
+									</dt>
+									<dd class="description">
+										<p>Espresso with steamed milk, and sometimes a little art on top.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">03</span>
+										Mocha
+									</dt>
+									<dd class="description">
+										<p>Espresso with steamed chocolate milk and whipped cream. Also available with white chocolate milk.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">04</span>
+										Americano
+									</dt>
+									<dd class="description">
+										<p>1 shot espresso, two shots hot water.</p>
+									</dd>
+								</div>
+
+							</dl>
+						</div>
+
+						<div class="slide px-7 pt-7 h-100 overflow-auto scrollbar scrollbar-light" data-tor="bg(#6d583b)" data-tor-group="
+                h2            => active(p):reveal(up) slow quad wait(400ms);
+                .prices span  => active(p):[pull.right(md) fade.in] slow wait(500ms) delay(/+100ms/);
+                hr            => active(p):scale.from(0) origin.left slow wait(500ms);
+                .product      => active(p):[fade.in pull.up(md)] slower wait(500ms) delay(/+100ms/);
+              ">
+							<header class="">
+								<h2 class="text-end">Tea</h2>
+								<p class="prices text-end">
+
+									<span class="d-block"><strong>Per Cup:</strong> $2</span>
+
+									<span class="d-block"><strong>If you break the cup:</strong> $200</span>
+
+								</p>
+							</header>
+
+							<hr class="border-white my-5">
+
+							<dl class="list">
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">01</span>
+										Earl Grey
+									</dt>
+									<dd class="description">
+										<p>Black tea fragranced with bergamot.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">02</span>
+										Ginger Hibiscus
+									</dt>
+									<dd class="description">
+										<p>Floral, tart, and spicy. Caffeine free.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">03</span>
+										Cascade Green
+									</dt>
+									<dd class="description">
+										<p>A blend of green teas hand selected by our master teamaker.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">04</span>
+										Chamomile
+									</dt>
+									<dd class="description">
+										<p>Soothing and slightly sweet. Try it with honey! Caffeine free.</p>
+									</dd>
+								</div>
+
+							</dl>
+						</div>
+
+						<div class="slide px-7 pt-7 h-100 overflow-auto scrollbar scrollbar-light" data-tor="bg(#655236)" data-tor-group="
+                h2            => active(p):reveal(up) slow quad wait(400ms);
+                .prices span  => active(p):[pull.right(md) fade.in] slow wait(500ms) delay(/+100ms/);
+                hr            => active(p):scale.from(0) origin.left slow wait(500ms);
+                .product      => active(p):[fade.in pull.up(md)] slower wait(500ms) delay(/+100ms/);
+              ">
+							<header class="">
+								<h2 class="text-end">From the Bakery</h2>
+								<p class="prices text-end">
+
+									<span class="d-block"><strong>Cookies:</strong> $2</span>
+
+									<span class="d-block"><strong>Muffins &amp; Pastries:</strong> $3</span>
+
+								</p>
+							</header>
+
+							<hr class="border-white my-5">
+
+							<dl class="list">
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">01</span>
+										Mallory&#39;s Famous Snickerdoodles
+									</dt>
+									<dd class="description">
+										<p>Creamy cinnamony goodness made from scratch with our founder Mallory&#39;s prizewinning recipe.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">02</span>
+										Oatmeal Cookie
+									</dt>
+									<dd class="description">
+										<p>Packed with rolled oats, raisins, and cranberries, these monster cookies are (almost) good for ya!</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">03</span>
+										Mixed Berry Muffins
+									</dt>
+									<dd class="description">
+										<p>Filled with the best berries of the season and topped with a crumb crust.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">04</span>
+										Croissant
+									</dt>
+									<dd class="description">
+										<p>Our oversized croissants are buttery, flaky, and usually all sold out by 7 a.m.</p>
+									</dd>
+								</div>
+
+							</dl>
+						</div>
+
+					</div>
+					<!-- end tor-slider -->
+				</div>
+
+			</div>
+		</main>
+
+	</div>
+</div>
+
+<div class="position-fixed bottom-0 end-0 m-4 z-index-master">
+	<a href="https://toruskit.com" id="btn-codepen" class="d-inline-block btn-gtm strong text-white text-decoration-none bg-black bg-opacity-80 p-3 btn-arrow">Made with <strong class="text-decoration-underline">Torus Kit</strong></a>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/cafe-menu-interactive-codepen-challenge/dist/style.css b/cafe-menu-interactive-codepen-challenge/dist/style.css
new file mode 100644
index 0000000..c9f1ec7
--- /dev/null
+++ b/cafe-menu-interactive-codepen-challenge/dist/style.css
@@ -0,0 +1,56 @@
+body {
+	background-color: #29372a;
+	color: #fff;
+	font-family: "Poppins", sans-serif;
+	min-height: 200%;
+}
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+	height: 100%;
+}
+
+strong,
+.fw-700 {
+	font-weight: 700;
+}
+
+h1,
+h2,
+h3,
+.h3,
+.number {
+	font-family: "Abril Fatface", cursive;
+}
+
+h1 {
+	font-size: clamp(1rem, calc(6vmin + 6vmax), 10rem);
+	line-height: 0.8;
+}
+
+h2 {
+	font-size: clamp(1rem, calc(3vmin + 3vmax), 5rem);
+}
+
+.h3,
+h3 {
+	font-size: 1.5rem;
+}
+
+.number {
+	font-size: clamp(1rem, calc(2vmin + 2vmax), 3.75rem);
+}
+
+[data-tor-slider-target] {
+	background-color: #ecbf7f;
+}
+
+#address {
+	background-color: #415444;
+}
+
+.list {
+	column-count: 2;
+}
\ No newline at end of file
diff --git a/cafe-menu-interactive-codepen-challenge/license.txt b/cafe-menu-interactive-codepen-challenge/license.txt
new file mode 100644
index 0000000..3fb90d2
--- /dev/null
+++ b/cafe-menu-interactive-codepen-challenge/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Andrew (https://codepen.io/toruskit/pen/bGWNYjj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/cafe-menu-interactive-codepen-challenge/src/index.html b/cafe-menu-interactive-codepen-challenge/src/index.html
new file mode 100644
index 0000000..0da3bd0
--- /dev/null
+++ b/cafe-menu-interactive-codepen-challenge/src/index.html
@@ -0,0 +1,325 @@
+<div class="overflow-auto h-100">
+	<div class="h-100 position-relative f.p-8">
+
+		<!-- Main -->
+		<main class="h-100 shadow-pop">
+			<div class="d-md-flex h-100">
+				<!-- Left -->
+				<div id="left" class="w-md-40 h-100">
+					<div id="about" class="position-relative h-100">
+						<div class="overlay h-100">
+							<div class="overlay-content z-index-2 overflow-visible">
+								<h1 class="position-absolute ms-6 mt-n7 svg-shadow-lg">The Cascade Cafe</h1>
+
+								<div id="address" class="position-absolute start-0 bottom-0 ms-6 mb-n5 p-6 shadow-lg">
+									<address class="mb-3">
+										<div class="circle circle-md position-absolute start-0 bg-black bg-opacity-50" data-tor="shift.left(50%)">
+											<svg viewBox="0 0 384 512" width="15" title="map-marker-alt" fill="white">
+												<path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z" />
+											</svg>
+										</div>
+
+										<p class="h3">123 Main Street <br> Smalltown, PA</p>
+
+										<div class="circle circle-md position-absolute start-0 bg-black bg-opacity-50" data-tor="shift.left(50%) shift.up(10%)">
+											<svg viewBox="0 0 512 512" width="15" title="phone-alt" fill="white">
+												<path d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z" />
+											</svg>
+										</div>
+										<a href="4125550100" class="text-white text-decoration-none my-2 d-block">412-555-0100</a>
+									</address>
+
+									<table class="hours">
+										<tbody>
+											<tr>
+												<td class="pe-6">Mon. - Thurs.</td>
+												<td>6 a.m. - 9 p.m.</td>
+											</tr>
+											<tr>
+												<td class="pe-6">Fri. - Sat.</td>
+												<td>6 a.m. - 11 p.m.</td>
+											</tr>
+											<tr>
+												<td class="pe-6">Sunday</td>
+												<td>8 a.m. - 2 p.m.</td>
+											</tr>
+										</tbody>
+									</table>
+								</div>
+
+							</div>
+							<img class="obj-fit-cover w-h-100" src="https://assets.codepen.io/t-1/nathan-dumlao-6VhPY27jdps-unsplash.jpg" alt="three hands toasting with coffee drinks">
+						</div>
+					</div>
+				</div>
+
+				<!-- Right -->
+				<div id="right" class="w-md-60 h-100 position-relative">
+
+					<div class="position-absolute shadow-lg z-index-1 d-flex flex-column end-0 bottom-0 z-index-2" data-tor-slider-target="#slider" data-tor="shift.right(50%) shift.up(50%)">
+						<button role="button" class="btn btn-arrow square p-4 shadow-0" data-tor-slide-to="next"></button>
+						<button role="button" class="btn btn-arrow-left square p-4 shadow-0" data-tor-slide-to="prev"></button>
+					</div>
+
+					<div class="h-100" id="slider" data-tor-slider="add-parent(active) stack(true)" data-tor-group="
+              .slide => active(p):clip(up, {skew: 4rem}) slowest quad;">
+
+						<div class="slide px-7 pt-7 h-100 overflow-auto scrollbar scrollbar-light" data-tor="bg(#846b47)" data-tor-group="
+                h2            => active(p):reveal(up) slow quad wait(400ms);
+                .prices span  => active(p):[pull.right(md) fade.in] slow wait(500ms) delay(/+100ms/);
+                hr            => active(p):scale.from(0) origin.left slow wait(500ms);
+                .product      => active(p):[fade.in pull.up(md)] slower wait(500ms) delay(/+100ms/);
+              ">
+							<header class="">
+								<h2 class="text-end">Coffee</h2>
+								<p class="prices text-end">
+
+									<span class="d-block"><strong>Small:</strong> $2</span>
+
+									<span class="d-block"><strong>Large:</strong> $4</span>
+
+								</p>
+							</header>
+
+							<hr class="border-white my-5">
+
+							<dl class="list">
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">01</span>
+										House Blend
+									</dt>
+									<dd class="description">
+										<p>Smoky, strong, and assertive, just like us.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">02</span>
+										Organic French Roast
+									</dt>
+									<dd class="description">
+										<p>Smooth and mellow with hints of molasses.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">03</span>
+										Organic Decaf
+									</dt>
+									<dd class="description">
+										<p>Full bodied and rich, we promise you won&#39;t miss the caffiene.</p>
+									</dd>
+								</div>
+
+							</dl>
+						</div>
+
+						<div class="slide px-7 pt-7 h-100 overflow-auto scrollbar scrollbar-light" data-tor="bg(#755f3f)" data-tor-group="
+                h2            => active(p):reveal(up) slow quad wait(400ms);
+                .prices span  => active(p):[pull.right(md) fade.in] slow wait(500ms) delay(/+100ms/);
+                hr            => active(p):scale.from(0) origin.left slow wait(500ms);
+                .product      => active(p):[fade.in pull.up(md)] slower wait(500ms) delay(/+100ms/);
+              ">
+							<header class="">
+								<h2 class="text-end">Espresso Drinks</h2>
+								<p class="prices text-end">
+
+									<span class="d-block"><strong>Small:</strong> $3</span>
+
+									<span class="d-block"><strong>Large:</strong> $5</span>
+
+								</p>
+							</header>
+
+							<hr class="border-white my-5">
+
+							<dl class="list">
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">01</span>
+										Machiatto
+									</dt>
+									<dd class="description">
+										<p>Espressso and steamed milk, served in a demitasse cup. (Size Small Only)</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">02</span>
+										Latte
+									</dt>
+									<dd class="description">
+										<p>Espresso with steamed milk, and sometimes a little art on top.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">03</span>
+										Mocha
+									</dt>
+									<dd class="description">
+										<p>Espresso with steamed chocolate milk and whipped cream. Also available with white chocolate milk.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">04</span>
+										Americano
+									</dt>
+									<dd class="description">
+										<p>1 shot espresso, two shots hot water.</p>
+									</dd>
+								</div>
+
+							</dl>
+						</div>
+
+						<div class="slide px-7 pt-7 h-100 overflow-auto scrollbar scrollbar-light" data-tor="bg(#6d583b)" data-tor-group="
+                h2            => active(p):reveal(up) slow quad wait(400ms);
+                .prices span  => active(p):[pull.right(md) fade.in] slow wait(500ms) delay(/+100ms/);
+                hr            => active(p):scale.from(0) origin.left slow wait(500ms);
+                .product      => active(p):[fade.in pull.up(md)] slower wait(500ms) delay(/+100ms/);
+              ">
+							<header class="">
+								<h2 class="text-end">Tea</h2>
+								<p class="prices text-end">
+
+									<span class="d-block"><strong>Per Cup:</strong> $2</span>
+
+									<span class="d-block"><strong>If you break the cup:</strong> $200</span>
+
+								</p>
+							</header>
+
+							<hr class="border-white my-5">
+
+							<dl class="list">
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">01</span>
+										Earl Grey
+									</dt>
+									<dd class="description">
+										<p>Black tea fragranced with bergamot.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">02</span>
+										Ginger Hibiscus
+									</dt>
+									<dd class="description">
+										<p>Floral, tart, and spicy. Caffeine free.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">03</span>
+										Cascade Green
+									</dt>
+									<dd class="description">
+										<p>A blend of green teas hand selected by our master teamaker.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">04</span>
+										Chamomile
+									</dt>
+									<dd class="description">
+										<p>Soothing and slightly sweet. Try it with honey! Caffeine free.</p>
+									</dd>
+								</div>
+
+							</dl>
+						</div>
+
+						<div class="slide px-7 pt-7 h-100 overflow-auto scrollbar scrollbar-light" data-tor="bg(#655236)" data-tor-group="
+                h2            => active(p):reveal(up) slow quad wait(400ms);
+                .prices span  => active(p):[pull.right(md) fade.in] slow wait(500ms) delay(/+100ms/);
+                hr            => active(p):scale.from(0) origin.left slow wait(500ms);
+                .product      => active(p):[fade.in pull.up(md)] slower wait(500ms) delay(/+100ms/);
+              ">
+							<header class="">
+								<h2 class="text-end">From the Bakery</h2>
+								<p class="prices text-end">
+
+									<span class="d-block"><strong>Cookies:</strong> $2</span>
+
+									<span class="d-block"><strong>Muffins &amp; Pastries:</strong> $3</span>
+
+								</p>
+							</header>
+
+							<hr class="border-white my-5">
+
+							<dl class="list">
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">01</span>
+										Mallory&#39;s Famous Snickerdoodles
+									</dt>
+									<dd class="description">
+										<p>Creamy cinnamony goodness made from scratch with our founder Mallory&#39;s prizewinning recipe.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">02</span>
+										Oatmeal Cookie
+									</dt>
+									<dd class="description">
+										<p>Packed with rolled oats, raisins, and cranberries, these monster cookies are (almost) good for ya!</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">03</span>
+										Mixed Berry Muffins
+									</dt>
+									<dd class="description">
+										<p>Filled with the best berries of the season and topped with a crumb crust.</p>
+									</dd>
+								</div>
+
+								<div class="product d-inline-block mb-3">
+									<dt class="h3">
+										<span class="number d-block mb-2 opacity-20">04</span>
+										Croissant
+									</dt>
+									<dd class="description">
+										<p>Our oversized croissants are buttery, flaky, and usually all sold out by 7 a.m.</p>
+									</dd>
+								</div>
+
+							</dl>
+						</div>
+
+					</div>
+					<!-- end tor-slider -->
+				</div>
+
+			</div>
+		</main>
+
+	</div>
+</div>
+
+<div class="position-fixed bottom-0 end-0 m-4 z-index-master">
+	<a href="https://toruskit.com" id="btn-codepen" class="d-inline-block btn-gtm strong text-white text-decoration-none bg-black bg-opacity-80 p-3 btn-arrow">Made with <strong class="text-decoration-underline">Torus Kit</strong></a>
+</div>
\ No newline at end of file
diff --git a/cafe-menu-interactive-codepen-challenge/src/style.css b/cafe-menu-interactive-codepen-challenge/src/style.css
new file mode 100644
index 0000000..ee770ca
--- /dev/null
+++ b/cafe-menu-interactive-codepen-challenge/src/style.css
@@ -0,0 +1,56 @@
+body {
+	background-color: #29372a;
+	color: #fff;
+	font-family: "Poppins", sans-serif;
+	min-height: 200%;
+}
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+	height: 100%;
+}
+
+strong,
+.fw-700 {
+	font-weight: 700;
+}
+
+h1,
+h2,
+h3,
+.h3,
+.number {
+	font-family: "Abril Fatface", cursive;
+}
+
+h1 {
+	font-size: clamp(1rem, calc(6vmin + 6vmax), 10rem);
+	line-height: 0.8;
+}
+
+h2 {
+	font-size: clamp(1rem, calc(3vmin + 3vmax), 5rem);
+}
+
+.h3,
+h3 {
+	font-size: 1.5rem;
+}
+
+.number {
+	font-size: clamp(1rem, calc(2vmin + 2vmax), 3.75rem);
+}
+
+[data-tor-slider-target] {
+	background-color: #ecbf7f;
+}
+
+#address {
+	background-color: #415444;
+}
+
+.list {
+	column-count: 2;
+}
diff --git a/calm-in-the-iridescence/README.markdown b/calm-in-the-iridescence/README.markdown
new file mode 100644
index 0000000..166cae9
--- /dev/null
+++ b/calm-in-the-iridescence/README.markdown
@@ -0,0 +1,5 @@
+# Calm in the Iridescence
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/darrylhuffman/pen/rNWpmjP](https://codepen.io/darrylhuffman/pen/rNWpmjP).
+
+
diff --git a/calm-in-the-iridescence/dist/index.html b/calm-in-the-iridescence/dist/index.html
new file mode 100644
index 0000000..09237a1
--- /dev/null
+++ b/calm-in-the-iridescence/dist/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Calm in the Iridescence</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
+<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"></script>
+
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/CopyShader.js"></script>
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/EffectComposer.js"></script>
+<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/RenderPass.js"></script>
+<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/FilmShader.js"></script>
+<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/FilmPass.js"></script>
+<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/LuminosityHighPassShader.js"></script>
+<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/UnrealBloomPass.js"></script>
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/ShaderPass.js"></script>
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/OutlinePass.js"></script>
+
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/dat.gui.min.js"></script>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/calm-in-the-iridescence/dist/script.js b/calm-in-the-iridescence/dist/script.js
new file mode 100644
index 0000000..02b9d9b
--- /dev/null
+++ b/calm-in-the-iridescence/dist/script.js
@@ -0,0 +1,251 @@
+function perlin() {
+  return `
+#ifdef GL_ES
+  precision highp float;
+  #endif
+
+  #define PI 3.14159265359;
+
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform float u_xpos;
+  uniform float u_ypos;
+
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+     return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v)
+  { 
+  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  vec3 i  = floor(v + dot(v, C.yyy) );
+  vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min( g.xyz, l.zxy );
+  vec3 i2 = max( g.xyz, l.zxy );
+
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
+
+  i = mod289(i); 
+  vec4 p = permute( permute( permute( 
+             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+  float n_ = 0.142857142857;
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_ );
+
+  vec4 x = x_ *ns.x + ns.yyyy;
+  vec4 y = y_ *ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4( x.xy, y.xy );
+  vec4 b1 = vec4( x.zw, y.zw );
+
+  vec4 s0 = floor(b0)*2.0 + 1.0;
+  vec4 s1 = floor(b1)*2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+  vec3 p0 = vec3(a0.xy,h.x);
+  vec3 p1 = vec3(a0.zw,h.y);
+  vec3 p2 = vec3(a1.xy,h.z);
+  vec3 p3 = vec3(a1.zw,h.w);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
+                                dot(p2,x2), dot(p3,x3) ) );
+  }
+`;
+}
+
+const shaders = {
+  cloth: {
+    vertex: `
+
+uniform float time;
+
+varying vec3 vUv; 
+
+${perlin()}
+
+void main() {
+	vec3 p = position;
+	float e = sin(snoise(vec3(p.xy * .15, time * 0.1))  * 10.) * .5;
+
+	p.z += e;
+
+
+	vec4 modelViewPosition = modelViewMatrix * vec4(p, 1.0);
+	vUv = p; 
+	gl_Position = projectionMatrix * modelViewPosition; 
+}
+
+`,
+    fragment: `
+
+uniform vec3 camera;
+uniform float time;
+
+varying vec3 vUv;
+
+vec3 hsv2rgb(vec3 c)
+{
+    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+void main() {
+	float d = dot(camera, normalize(vUv)) / 3.1415;
+	vec3 c = hsv2rgb(vec3(d, 1., 1.));
+	c = mix(vec3(1., 0., 1.), c, .75);
+
+	gl_FragColor = vec4(c * 0.29, 1.0);
+}
+
+` } };
+
+
+
+
+
+const scene = new THREE.Scene(),
+width = window.innerWidth,
+height = window.innerHeight,
+camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000),
+renderer = new THREE.WebGLRenderer(),
+startTime = new Date().getTime(),
+timeOffset = 15;
+
+var composer, outlinePass;
+
+let currentTime = 0;
+
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+let CameraHolder = new THREE.Object3D();
+CameraHolder.add(camera);
+scene.add(CameraHolder);
+
+
+composer = new THREE.EffectComposer(renderer);
+
+var renderPass = new THREE.RenderPass(scene, camera);
+composer.addPass(renderPass);
+
+outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
+composer.addPass(outlinePass);
+
+
+let bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(width, height), 1.5, .4, .85);
+renderer.toneMappingExposure = 1;
+bloomPass.threshold = 0;
+bloomPass.strength = 1.5;
+bloomPass.radius = 1.5;
+composer.addPass(bloomPass);
+
+/*
+let filmPass = new THREE.FilmPass(0.34, 0.025, 256, false);
+composer.addPass(filmPass);
+
+outlinePass.edgeStrength = 3
+outlinePass.edgeThickness = 1
+outlinePass.edgeGlow  = 0
+outlinePass.visibleEdgeColor.set('#ffffff')
+outlinePass.hiddenEdgeColor.set('#ffffff')
+outlinePass.BlurDirectionX = new THREE.Vector2(0.0, 0.0)
+outlinePass.BlurDirectionY = new THREE.Vector2(0.0, 0.0)
+*/
+
+let uniforms = {
+  camera: { value: camera.position },
+  time: { value: 0 } };
+
+
+let length = 60,
+cameraZ = 5;
+
+var geometry = new THREE.PlaneGeometry(length * 1.2, length, 600, 600);
+//var geometry = new THREE.SphereGeometry( 1, 100, 100 );
+let material = new THREE.ShaderMaterial({
+  uniforms: uniforms,
+  fragmentShader: shaders.cloth.fragment,
+  vertexShader: shaders.cloth.vertex });
+
+var plane = new THREE.Mesh(geometry, material);
+scene.add(plane);
+
+plane.rotation.x = Math.PI * 1.5;
+plane.position.y = -6;
+plane.position.z = -(length * .3);
+
+var plane2 = new THREE.Mesh(geometry, material);
+scene.add(plane2);
+
+plane2.rotation.x = Math.PI * .15;
+plane2.position.z = -length * .25;
+
+camera.position.z = length * .5 - cameraZ / 2;
+
+const sgeom = new THREE.SphereGeometry(3, 50, 50);
+const smat = new THREE.MeshBasicMaterial({ color: 0x000000 });
+const sphere = new THREE.Mesh(sgeom, smat);
+scene.add(sphere);
+
+function animate() {
+  var now = new Date().getTime();
+  currentTime = (now - startTime) / 1000;
+  let t = currentTime + timeOffset;
+
+  CameraHolder.updateMatrixWorld();
+  camera.updateMatrixWorld();
+  var vector = camera.position.clone();
+  vector.applyMatrix4(camera.matrixWorld);
+
+  uniforms.time.value = t;
+  uniforms.camera.value = vector;
+
+  //CameraHolder.rotation.y = t * 0.1
+  CameraHolder.rotation.x = -.1 + Math.cos(t * 0.15) * (Math.PI * .01);
+
+  requestAnimationFrame(animate);
+  //renderer.render(scene, camera)
+  composer.render();
+}
+animate();
\ No newline at end of file
diff --git a/calm-in-the-iridescence/dist/style.css b/calm-in-the-iridescence/dist/style.css
new file mode 100644
index 0000000..3bf3706
--- /dev/null
+++ b/calm-in-the-iridescence/dist/style.css
@@ -0,0 +1,9 @@
+body {
+  margin: 0;
+}
+
+canvas {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
\ No newline at end of file
diff --git a/calm-in-the-iridescence/license.txt b/calm-in-the-iridescence/license.txt
new file mode 100644
index 0000000..75215f6
--- /dev/null
+++ b/calm-in-the-iridescence/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Darryl Huffman (https://codepen.io/darrylhuffman/pen/rNWpmjP)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/calm-in-the-iridescence/src/index.html b/calm-in-the-iridescence/src/index.html
new file mode 100644
index 0000000..b02dbbb
--- /dev/null
+++ b/calm-in-the-iridescence/src/index.html
@@ -0,0 +1,16 @@
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
+<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"></script>
+
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/CopyShader.js"></script>
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/EffectComposer.js"></script>
+<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/RenderPass.js"></script>
+<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/FilmShader.js"></script>
+<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/FilmPass.js"></script>
+<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/LuminosityHighPassShader.js"></script>
+<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/UnrealBloomPass.js"></script>
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/ShaderPass.js"></script>
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/OutlinePass.js"></script>
+
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>
+<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/dat.gui.min.js"></script>
\ No newline at end of file
diff --git a/calm-in-the-iridescence/src/script.babel b/calm-in-the-iridescence/src/script.babel
new file mode 100644
index 0000000..3141e4a
--- /dev/null
+++ b/calm-in-the-iridescence/src/script.babel
@@ -0,0 +1,251 @@
+function perlin(){ 
+	return `
+#ifdef GL_ES
+  precision highp float;
+  #endif
+
+  #define PI 3.14159265359;
+
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform float u_xpos;
+  uniform float u_ypos;
+
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+     return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v)
+  { 
+  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  vec3 i  = floor(v + dot(v, C.yyy) );
+  vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min( g.xyz, l.zxy );
+  vec3 i2 = max( g.xyz, l.zxy );
+
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
+
+  i = mod289(i); 
+  vec4 p = permute( permute( permute( 
+             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+  float n_ = 0.142857142857;
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_ );
+
+  vec4 x = x_ *ns.x + ns.yyyy;
+  vec4 y = y_ *ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4( x.xy, y.xy );
+  vec4 b1 = vec4( x.zw, y.zw );
+
+  vec4 s0 = floor(b0)*2.0 + 1.0;
+  vec4 s1 = floor(b1)*2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+  vec3 p0 = vec3(a0.xy,h.x);
+  vec3 p1 = vec3(a0.zw,h.y);
+  vec3 p2 = vec3(a1.xy,h.z);
+  vec3 p3 = vec3(a1.zw,h.w);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
+                                dot(p2,x2), dot(p3,x3) ) );
+  }
+`
+}
+
+const shaders = {
+	cloth: {
+		vertex: `
+
+uniform float time;
+
+varying vec3 vUv; 
+
+${perlin()}
+
+void main() {
+	vec3 p = position;
+	float e = sin(snoise(vec3(p.xy * .15, time * 0.1))  * 10.) * .5;
+
+	p.z += e;
+
+
+	vec4 modelViewPosition = modelViewMatrix * vec4(p, 1.0);
+	vUv = p; 
+	gl_Position = projectionMatrix * modelViewPosition; 
+}
+
+`,
+		fragment: `
+
+uniform vec3 camera;
+uniform float time;
+
+varying vec3 vUv;
+
+vec3 hsv2rgb(vec3 c)
+{
+    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+void main() {
+	float d = dot(camera, normalize(vUv)) / 3.1415;
+	vec3 c = hsv2rgb(vec3(d, 1., 1.));
+	c = mix(vec3(1., 0., 1.), c, .75);
+
+	gl_FragColor = vec4(c * 0.29, 1.0);
+}
+
+`
+	}
+}
+
+
+
+const scene = new THREE.Scene(),
+	 width = window.innerWidth,
+	 height = window.innerHeight,
+	 camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 1000 ),
+	 renderer = new THREE.WebGLRenderer(),
+	 startTime = new Date().getTime(),
+	 timeOffset = 15
+
+var composer, outlinePass;
+
+let currentTime = 0
+
+renderer.setSize( window.innerWidth, window.innerHeight )
+document.body.appendChild( renderer.domElement )
+
+let CameraHolder = new THREE.Object3D()
+CameraHolder.add(camera)
+scene.add(CameraHolder)
+
+
+composer = new THREE.EffectComposer( renderer )
+
+var renderPass = new THREE.RenderPass( scene, camera );
+composer.addPass( renderPass );
+
+outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight ), scene, camera);
+composer.addPass( outlinePass );
+
+
+let bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( width, height ), 1.5, .4, .85 );
+renderer.toneMappingExposure = 1;
+bloomPass.threshold = 0;
+bloomPass.strength = 1.5;
+bloomPass.radius = 1.5;
+composer.addPass(bloomPass);
+
+/*
+let filmPass = new THREE.FilmPass(0.34, 0.025, 256, false);
+composer.addPass(filmPass);
+
+outlinePass.edgeStrength = 3
+outlinePass.edgeThickness = 1
+outlinePass.edgeGlow  = 0
+outlinePass.visibleEdgeColor.set('#ffffff')
+outlinePass.hiddenEdgeColor.set('#ffffff')
+outlinePass.BlurDirectionX = new THREE.Vector2(0.0, 0.0)
+outlinePass.BlurDirectionY = new THREE.Vector2(0.0, 0.0)
+*/
+
+let uniforms = {
+	camera: { value: camera.position },
+	time: { value: 0 }
+}
+
+let length = 60,
+    cameraZ = 5
+
+var geometry = new THREE.PlaneGeometry( length * 1.2, length, 600, 600 );
+//var geometry = new THREE.SphereGeometry( 1, 100, 100 );
+let material =  new THREE.ShaderMaterial({
+    uniforms: uniforms,
+    fragmentShader: shaders.cloth.fragment,
+    vertexShader: shaders.cloth.vertex
+  })
+var plane = new THREE.Mesh( geometry, material );
+scene.add( plane );
+
+plane.rotation.x = Math.PI * 1.5
+plane.position.y = -6
+plane.position.z = -(length * .3)
+
+var plane2 = new THREE.Mesh( geometry, material );
+scene.add( plane2 );
+				 
+plane2.rotation.x = Math.PI * .15
+plane2.position.z = -length * .25
+
+camera.position.z = length*.5 - cameraZ/2
+
+const sgeom = new THREE.SphereGeometry(3, 50, 50);
+const smat = new THREE.MeshBasicMaterial({ color: 0x000000 });
+const sphere = new THREE.Mesh(sgeom, smat);
+scene.add( sphere );
+
+function animate() {
+	var now = new Date().getTime();
+	currentTime = (now - startTime) / 1000;
+	let t = currentTime + timeOffset;
+	
+	CameraHolder.updateMatrixWorld();
+	camera.updateMatrixWorld();
+	var vector = camera.position.clone();
+	vector.applyMatrix4( camera.matrixWorld );
+	
+	uniforms.time.value = t;
+	uniforms.camera.value = vector;
+	
+	//CameraHolder.rotation.y = t * 0.1
+	CameraHolder.rotation.x = -.1 + Math.cos(t * 0.15) * (Math.PI * .01)
+	
+	requestAnimationFrame(animate)
+	//renderer.render(scene, camera)
+	composer.render()
+}
+animate()
\ No newline at end of file
diff --git a/calm-in-the-iridescence/src/style.scss b/calm-in-the-iridescence/src/style.scss
new file mode 100644
index 0000000..a39e74e
--- /dev/null
+++ b/calm-in-the-iridescence/src/style.scss
@@ -0,0 +1,2 @@
+body { margin: 0; }
+canvas { position: absolute; top: 0px; left: 0px; }
\ No newline at end of file
diff --git a/candy-cane/README.markdown b/candy-cane/README.markdown
new file mode 100644
index 0000000..c13d542
--- /dev/null
+++ b/candy-cane/README.markdown
@@ -0,0 +1,4 @@
+# Candy Cane
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/danwilson/pen/BayBWgr](https://codepen.io/danwilson/pen/BayBWgr).
+
+ CSS Motion Path (Firefox 72+ and Chrome/newEdge/Blink)
\ No newline at end of file
diff --git a/candy-cane/dist/index.html b/candy-cane/dist/index.html
new file mode 100644
index 0000000..2ed0b7f
--- /dev/null
+++ b/candy-cane/dist/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Candy Cane</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg viewBox="0 -20 300 300">
+  <defs>
+    <filter id="drawn">
+      <feTurbulence baseFrequency="0.1325" numOctaves="8" />
+      <feDisplacementMap in="SourceGraphic" scale="10" />
+    </filter>
+  </defs>
+  <g id="toDraw">
+    <g>
+    <circle cx=50 cy="190" r="50" fill="white" />
+    <path id="mint" d="M50,190 L50,140 C70,130 110,170 100,190 L50,190 L50,240 C-20,230 10,170 0,190" fill="red" />
+    </g>
+    <!--path id="base" d="
+      M190,280
+      L190,80
+      C190,0 90,0 90,80" stroke-width="20" stroke-linecap="round" stroke="#fff" fill="none" /-->
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    
+    
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+  </g>
+</svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/candy-cane/dist/script.js b/candy-cane/dist/script.js
new file mode 100644
index 0000000..d23ae12
--- /dev/null
+++ b/candy-cane/dist/script.js
@@ -0,0 +1,50 @@
+const stripes = document.querySelectorAll('.stripe');
+const duration = 11000;
+const offset = 12;
+const offsetBase = 88;
+
+const getPath = () => `polygon(${Math.random()*offset*1.95}% ${Math.random()*offset}%, ${Math.random()*offset+offsetBase}% ${Math.random()*offset}%, ${Math.random()*offset+offsetBase}% ${Math.random()*offset+offsetBase}%, ${Math.random()*offset*1.95}% ${Math.random()*offset+offsetBase}%)`;
+
+
+
+stripes.forEach((stripe, i) => {
+  stripe.setAttribute('width',i%2===1 ? 18 : 24);
+  stripe.setAttribute('height',i%2===1 ?28:24);
+  stripe.animate({
+    offsetDistance: ['0%', '100%'],
+    opacity: [0,1,1,1,1,1,1,0]
+  }, {
+    duration,
+    direction: 'reverse',
+    delay: -i / stripes.length * duration,
+    iterations: Infinity
+  });
+  
+//   stripe.animate({
+//     clipPath: [getPath(), getPath()]
+//   }, {
+//     duration: duration * Math.random() + duration / 12,
+//     direction: 'alternate',
+//     iterations: Infinity
+//   });
+  
+//   stripe.animate({
+//     transform: ['skewX(18deg)','skewX(6deg)'],
+//   }, {
+//     duration: Math.random() / 2 * duration / 12 + duration / 12,
+//     direction: 'alternate',
+//     iterations: Infinity
+//   });
+});
+
+
+// const drawn = document.getElementById('drawn').querySelector('feTurbulence');
+// let freq = 0.001;
+// const filtered = () => {
+//   freq += 0.001;
+//   drawn.setAttribute('baseFrequency',freq);
+  
+//   requestAnimationFrame(filtered)
+// }
+
+// requestAnimationFrame(filtered)
\ No newline at end of file
diff --git a/candy-cane/dist/style.css b/candy-cane/dist/style.css
new file mode 100644
index 0000000..bfcece0
--- /dev/null
+++ b/candy-cane/dist/style.css
@@ -0,0 +1,44 @@
+body {
+  height: 100vh;
+  background: linear-gradient(108deg,hsl(233, 80%,18%),hsl(233, 80%,12%));
+  overflow: hidden;
+  margin: 0;
+  display: flex;
+}
+
+svg {
+  height: 80vmin;
+  width: 80vmin;
+  margin: auto;
+  transform: rotate(18deg);
+}
+
+#toDraw {
+  filter: url(#drawn);
+}
+
+#mint {
+  animation: r 3456ms infinite linear;
+  transform-origin: 50px 190px;
+}
+
+.stripe {
+  transform-box: fill-box;
+  transform: skewX(18deg);
+  offset-path: path('M190,280 L190,80 C190,0 90,0 90,80');
+  offset-anchor: center center;
+}
+.stripe:nth-child(odd) {
+  fill: white;
+}
+
+@keyframes r {
+  100% {
+    transform: rotate(-1turn);
+  }
+}
+@keyframes f {
+  100% {
+    filter: url(#drawn2);
+  }
+}
\ No newline at end of file
diff --git a/candy-cane/license.txt b/candy-cane/license.txt
new file mode 100644
index 0000000..c63a719
--- /dev/null
+++ b/candy-cane/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2019 by Dan Wilson (https://codepen.io/danwilson/pen/BayBWgr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/candy-cane/src/index.html b/candy-cane/src/index.html
new file mode 100644
index 0000000..d16b7c6
--- /dev/null
+++ b/candy-cane/src/index.html
@@ -0,0 +1,44 @@
+<svg viewBox="0 -20 300 300">
+  <defs>
+    <filter id="drawn">
+      <feTurbulence baseFrequency="0.1325" numOctaves="8" />
+      <feDisplacementMap in="SourceGraphic" scale="10" />
+    </filter>
+  </defs>
+  <g id="toDraw">
+    <g>
+    <circle cx=50 cy="190" r="50" fill="white" />
+    <path id="mint" d="M50,190 L50,140 C70,130 110,170 100,190 L50,190 L50,240 C-20,230 10,170 0,190" fill="red" />
+    </g>
+    <!--path id="base" d="
+      M190,280
+      L190,80
+      C190,0 90,0 90,80" stroke-width="20" stroke-linecap="round" stroke="#fff" fill="none" /-->
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    
+    
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/candy-cane/src/script.js b/candy-cane/src/script.js
new file mode 100644
index 0000000..d23ae12
--- /dev/null
+++ b/candy-cane/src/script.js
@@ -0,0 +1,50 @@
+const stripes = document.querySelectorAll('.stripe');
+const duration = 11000;
+const offset = 12;
+const offsetBase = 88;
+
+const getPath = () => `polygon(${Math.random()*offset*1.95}% ${Math.random()*offset}%, ${Math.random()*offset+offsetBase}% ${Math.random()*offset}%, ${Math.random()*offset+offsetBase}% ${Math.random()*offset+offsetBase}%, ${Math.random()*offset*1.95}% ${Math.random()*offset+offsetBase}%)`;
+
+
+
+stripes.forEach((stripe, i) => {
+  stripe.setAttribute('width',i%2===1 ? 18 : 24);
+  stripe.setAttribute('height',i%2===1 ?28:24);
+  stripe.animate({
+    offsetDistance: ['0%', '100%'],
+    opacity: [0,1,1,1,1,1,1,0]
+  }, {
+    duration,
+    direction: 'reverse',
+    delay: -i / stripes.length * duration,
+    iterations: Infinity
+  });
+  
+//   stripe.animate({
+//     clipPath: [getPath(), getPath()]
+//   }, {
+//     duration: duration * Math.random() + duration / 12,
+//     direction: 'alternate',
+//     iterations: Infinity
+//   });
+  
+//   stripe.animate({
+//     transform: ['skewX(18deg)','skewX(6deg)'],
+//   }, {
+//     duration: Math.random() / 2 * duration / 12 + duration / 12,
+//     direction: 'alternate',
+//     iterations: Infinity
+//   });
+});
+
+
+// const drawn = document.getElementById('drawn').querySelector('feTurbulence');
+// let freq = 0.001;
+// const filtered = () => {
+//   freq += 0.001;
+//   drawn.setAttribute('baseFrequency',freq);
+  
+//   requestAnimationFrame(filtered)
+// }
+
+// requestAnimationFrame(filtered)
\ No newline at end of file
diff --git a/candy-cane/src/style.css b/candy-cane/src/style.css
new file mode 100644
index 0000000..bfcece0
--- /dev/null
+++ b/candy-cane/src/style.css
@@ -0,0 +1,44 @@
+body {
+  height: 100vh;
+  background: linear-gradient(108deg,hsl(233, 80%,18%),hsl(233, 80%,12%));
+  overflow: hidden;
+  margin: 0;
+  display: flex;
+}
+
+svg {
+  height: 80vmin;
+  width: 80vmin;
+  margin: auto;
+  transform: rotate(18deg);
+}
+
+#toDraw {
+  filter: url(#drawn);
+}
+
+#mint {
+  animation: r 3456ms infinite linear;
+  transform-origin: 50px 190px;
+}
+
+.stripe {
+  transform-box: fill-box;
+  transform: skewX(18deg);
+  offset-path: path('M190,280 L190,80 C190,0 90,0 90,80');
+  offset-anchor: center center;
+}
+.stripe:nth-child(odd) {
+  fill: white;
+}
+
+@keyframes r {
+  100% {
+    transform: rotate(-1turn);
+  }
+}
+@keyframes f {
+  100% {
+    filter: url(#drawn2);
+  }
+}
\ No newline at end of file
diff --git a/candy-stacker/README.markdown b/candy-stacker/README.markdown
new file mode 100644
index 0000000..7fe270d
--- /dev/null
+++ b/candy-stacker/README.markdown
@@ -0,0 +1,5 @@
+# Candy Stacker
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pjkarlik/pen/ZEyKymB](https://codepen.io/pjkarlik/pen/ZEyKymB).
+
+Some work on timing / animation / stacking stuff. Probably have more around this theme - I like the mechanics / taking vec - time + traveled to change animation - GLSL Fragment Shader in HTML window / WebGL Bootstrap in JS wnidow
diff --git a/candy-stacker/dist/index.html b/candy-stacker/dist/index.html
new file mode 100644
index 0000000..ce4dbdc
--- /dev/null
+++ b/candy-stacker/dist/index.html
@@ -0,0 +1,331 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Candy Stacker</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- VertexShader code here -->
+<script id="vertexShader" type="x-shader/x-vertex">#version 300 es
+precision highp float;
+in vec4 vPosition;
+void main() {
+	gl_Position = vPosition;
+}
+</script>
+<!-- FragmentShader code here -->
+<script id="fragmentShader" type="x-shader/x-fragment">#version 300 es
+precision highp float;
+out vec4 fragColor;
+  
+uniform vec4 mouse;
+uniform vec2 resolution;
+uniform float time;
+
+#define T 			time
+#define M				mouse
+#define R				resolution
+
+#define PI  3.14159265359
+#define PI2 6.28318530718
+
+#define MAX_DIST    150.
+#define MIN_DIST    .001
+
+mat2 rot(float a){ return mat2(cos(a),sin(a),-sin(a),cos(a)); }
+float hash21(vec2 p){ return fract(sin(dot(p,vec2(26.34,45.32)))*4324.23); }
+float lsp(float begin, float end, float t) { return clamp((t - begin) / (end - begin), 0., 1.); }
+
+//@iq shapes and extrude
+float box(vec3 p, vec3 s) {
+    p = abs(p)-s;
+    return length(max(p, 0.))+min(max(p.x, max(p.y, p.z)), 0.)-.025;
+}
+float cyl( vec3 p, float h, float r ) {
+  vec2 d = abs(vec2(length(p.xz),p.y)) - vec2(h,r);
+  return min(max(d.x,d.y),0.) + length(max(d,0.));
+}
+float opx( in vec3 p, float d, in float h ) {
+    vec2 w = vec2( d, abs(p.z) - h );
+    return min(max(w.x,w.y),0.) + length(max(w,0.));
+}
+// gear
+float gear(vec3 p, float radius, float thick) {
+    float hole = (radius*.25);
+    float sp = floor(radius*PI);
+    float gs = length(p.xy)-radius;
+    float gw = abs(sin(atan(p.y,p.x)*sp)*.2);
+    gs +=smoothstep(.05,.45,gw);
+    float cog=max(opx(p,gs,thick),-(length(p.xy)-hole));
+    return cog;
+}
+// consts
+const float size = 4.;
+const float hlf = size/2.;
+const float dbl = size*2.;
+// globals
+float floorspeed;
+float ga1,ga2,ga3,ga4;
+
+vec3 hit=vec3(0),hitPoint,gid,sid;
+vec3 speed = vec3(0);
+mat2 r45,turn,spin;
+
+vec2 map(in vec3 p) {
+    vec2 res = vec2(1e5,0.);
+    p += speed;
+
+    float id;
+    vec3 p2, q;
+    for(int i = 0; i<2; i++)
+    {
+        float cnt = i<1 ? size : dbl;
+        q = vec3(p.x-cnt,p.yz);
+        id = floor(q.x/dbl) + .5;
+        q.x -= (id)*dbl;
+        float qf = (id)*dbl + cnt;
+
+        float ff = qf-size;
+        float lent= ff<floorspeed-3. ? 7. : clamp(ga4,0.,1.)*7. ;
+        float fent= ff<floorspeed-3. ? 5. : clamp(ga4,0.,1.)*5. ;
+        vec3 r = q;
+        p2=q;
+        q.z=abs(q.z)-19.;
+        
+        float pole = (ff<floorspeed+1.&& i==0) ? min(cyl(q-vec3(0,lent+1.5,0),.25,lent+.5),
+        length(q-vec3(0,(lent+1.5)*2.,0))-(.75)) : 1e5;
+        
+        float pcap = max(cyl(q,.85,1.), -cyl(q,.45,2.) );
+        pcap = min(box(q,vec3(1.9,.1,1.5)),pcap);
+        pole=min(pcap,pole);
+        if(pole<res.x){
+            res = vec2(pole,5.);
+            hit=q;
+            gid = vec3(qf,0,0);
+        }  
+        
+        float qw=q.z - 2.;     
+        float wave = .5*sin(qw*1.5-T*4.+ff);
+        wave = mix(wave,0.,clamp(1.-((qw-1.5)*.5),0.,.8));
+        q.x-= wave*2.;
+        q.y-= wave;
+        
+        vec3 fq = q-vec3(0,(lent*2.),fent);
+        float flag=(ff<floorspeed+1.&& i==0) ? box(fq,vec3(.05,2.5,fent)) : 1e5;
+        if(flag<res.x){
+            res = vec2(flag,1.);
+            hit=fq;
+            gid = vec3(qf,0,0);
+        }
+
+        lent= ff<floorspeed+5. ? 0. : ff>floorspeed+6. ? 3.25 : clamp(1.-ga3,0.,1.)*3.25;
+        float ent= ff<floorspeed+35. ? 0. : ff>floorspeed+38. ? 38. : clamp(1.-ga3,0.,1.)*38.;
+        
+        if(i==0) ent = -ent;
+        float d3=box(r-vec3(0,(lent*3.)-2.,ent),vec3(2,2,14.));
+        if(d3<res.x){
+            res = vec2(d3,3.);
+            hit= r-vec3(0,(lent*3.)-2.,ent);
+            gid = vec3(qf,0,0);
+        }
+        
+    }
+
+    vec3 pb = vec3(p.x-speed.x-25.,p.y-19.,p.z-11.);
+    pb.xy*=spin;
+    float bls = gear(pb, 9.,1.5);
+    vec3 pp = vec3(p.x-speed.x-29.,p.y-3.,p.z);
+    vec3 pq = vec3(p.x-speed.x-16.,p.y-3.,p.z);
+    
+    float beam = min(length(pp.xy)-.45,length(pq.xy)-.45);
+    beam = min(cyl(pb.yzx-vec3(0,24,0),1.25,25.25),beam);
+    beam = min(cyl(pb,.5,4.),beam);
+    pp.xy*=turn; pq.xy*=turn;
+    bls = min(gear(pp, 3.,14.75),bls);
+    bls = min(gear(pq, 3.,14.75),bls);
+   
+    if(bls<res.x){
+        res=vec2(bls,4.);
+        hit=p2;
+    }
+    if(beam<res.x){
+        res=vec2(beam,5.);
+        hit=pb;
+    }
+    float fl=max(p.y,-box(p2,vec3(8.,4.,16.)) );
+    if(fl<res.x){
+        res=vec2(fl,2.);
+        hit=p;
+    }
+    return res;
+}
+
+vec3 normal(vec3 p, float t) {
+    float e = MIN_DIST*t;
+    vec2 h =vec2(1,-1)*.5773;
+    vec3 n = h.xyy * map(p+h.xyy*e).x+
+             h.yyx * map(p+h.yyx*e).x+
+             h.yxy * map(p+h.yxy*e).x+
+             h.xxx * map(p+h.xxx*e).x;
+    return normalize(n);
+}
+
+vec2 marcher(vec3 ro, vec3 rd, int maxsteps){
+	float d = 0.;
+    float m = 0.;
+    for(int i=0;i<maxsteps;i++){
+    	vec2 ray = map(ro + rd * d);
+        if(ray.x<MIN_DIST*d||d>MAX_DIST) break;
+        d += i<32?ray.x*.25:ray.x*.85;
+        m  = ray.y;
+    }
+	return vec2(d,m);
+}
+
+vec3 hue(float t){ 
+    const vec3 c = vec3(.122,.467,.918);
+    return .45 + .45*cos(PI2*t*(c+vec3(.978,.969,.891))); 
+}
+
+vec4 render(inout vec3 ro, inout vec3 rd, inout vec3 ref, bool last, inout float d, vec2 uv) {
+
+    vec3 C = vec3(0);
+    vec2 ray = marcher(ro,rd,128);
+    hitPoint=hit;  
+    sid=gid;
+    d = ray.x;
+    float m = ray.y;
+    float alpha = 0.;
+    
+    if(d<MAX_DIST)
+    {
+        vec3 p = ro + rd * d;
+        vec3 n = normal(p,d);
+        vec3 lpos =vec3(25.,125.,-75.);
+        vec3 l = normalize(lpos-p);
+        
+        vec3 h = vec3(.5);
+        vec3 hp = hitPoint+vec3(size,5,size);
+        float diff = clamp(dot(n,l),0.,1.);
+        float fresnel = pow(clamp(1.+dot(rd, n), 0., 1.), 9.);
+        fresnel = mix(.01, .7, fresnel);
+
+        float shdw = 1.;
+        for( float t=.0; t < 26.; )
+        {
+            float h = map(p + l*t).x;
+            if( h<MIN_DIST ) { shdw = 0.; break; }
+            shdw = min(shdw, 18.*h/t);
+            t += t<10.||t>20.?h*.4:h*.8;
+            if( shdw<MIN_DIST || t>32. ) break;
+        }
+
+        diff = mix(diff,diff*shdw,.75);
+
+        vec3 view = normalize(p - ro);
+        vec3 ret = reflect(normalize(lpos), n);
+        float spec = 0.3 * pow(max(dot(view, ret), 0.), 20.);
+        float clr;
+        
+        // materials
+        if(m==1.){
+            h=vec3(.745,.933,.929);
+            vec2 f = fract(hp.zy)-.5;
+            if(f.x*f.y>0.||hp.y<0.) h*=.25;    
+            ref = h-fresnel;     
+        }
+        if(m==2.){
+            h=vec3(.192,.306,.302);
+            vec2 f = fract(hp.xz/(dbl*2.))-.5;
+            if(f.x*f.y>0.) h=vec3(.220,.698,.682);
+            if( hp.y<1.1 ) h=vec3(.133,.247,.243);
+            ref =(f.x*f.y>0. && hp.y>1.1) ? vec3(.35)-fresnel:vec3(0.); 
+        }
+        if(m==3.){
+            h = hue((50.+sid.x)*.0025);
+            float px = .05;
+            vec2 grid = fract(hp.xz/hlf)-.5;
+            vec2 id = floor(hp.xz/hlf);
+            float hs = hash21(id+sid.x);
+            if(hs>.5) grid.x*=-1.;
+            vec2 d2 = vec2(length(grid-.5), length(grid+.5));
+            vec2 gx = d2.x<d2.y? vec2(grid-.5) : vec2(grid+.5);
+            float chk = mod(id.y + id.x,2.) * 2. - 1.;
+            float circle = length(gx)-.5;
+            circle=(chk>.5 ^^ hs<.5) ? smoothstep(-px,px,circle) : smoothstep(px,-px,circle);
+            h = mix(h, vec3(.1),circle);
+            if(hp.y<6.99) h=vec3(.8); 
+            if(hp.y<6.99&&hp.y>6.) h=vec3(.2);
+            ref = (h*.4)-fresnel;
+        }
+        if(m==4.) {
+            ref = vec3(.1)-fresnel;
+            h=vec3(.2);
+        }
+        if(m==5.) {
+            ref = vec3(.2)-fresnel;
+            h=vec3(.4);
+        }
+        C = (diff*h)+spec;
+        ro = p+n*MIN_DIST;
+        rd = reflect(rd,n);
+    } 
+    return vec4(C,alpha);
+}
+
+void main() {   
+    // precal
+    r45=rot(-0.78539816339); 
+    float ftime = (T+40.)*12.;
+    float tmod = mod(ftime, 10.);
+    float t3 = lsp(5., 10., tmod);
+    
+    float fmod = mod(ftime, 20.);
+    float t2 = lsp(10., 20., fmod);
+    
+    ga1 = (ftime*.1);
+    ga3 = (tmod<5.?t3+1. :t3);
+    ga4 = (fmod<10.?t2+1. :t2);
+    
+    speed = vec3(abs(ga1*size),0,0);
+    floorspeed=floor(speed.x);
+    turn=rot(ga1);
+    spin=rot(-ga1*.38);
+    //
+    vec2 F = gl_FragCoord.xy;
+    vec2 uv = (2.*F.xy-R.xy)/max(R.x,R.y);
+    vec3 ro = vec3(uv*42.,-42.);
+    vec3 rd = vec3(0.,0.,1.);
+
+    ro.yz*=r45;ro.xz*=r45;
+    rd.yz*=r45;rd.xz*=r45;
+    
+    // reflection loop (@BigWings)
+    vec3 C = vec3(0), ref=vec3(0), fill=vec3(1);
+    float d =0.;
+
+    for(float i=0.; i<2.; i++) {
+        vec4 pass = render(ro, rd, ref, i==2.-1., d, uv);
+        C += pass.rgb*fill;
+        fill*=ref;
+    }
+    // mixdown 
+    float vin = length((2.*F.xy-R.xy)/R.x)-.175;
+    C = mix(C,C*.5,smoothstep(.0,.8,vin));
+    C = clamp(C,vec3(.015),vec3(1));
+    // gamma
+    C = pow(C, vec3(.4545));
+    // output
+    fragColor = vec4(C,1.);
+}
+
+</script>
+<div id="container" />
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/candy-stacker/dist/script.js b/candy-stacker/dist/script.js
new file mode 100644
index 0000000..8486e42
--- /dev/null
+++ b/candy-stacker/dist/script.js
@@ -0,0 +1,153 @@
+function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const swidth = 800;
+const sheight = 450;
+
+// Boostrap for WebGL and Attaching Shaders //
+// Fragment & Vertex Shaders in HTML window //
+class Render {
+  constructor() {_defineProperty(this, "createShader",
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    (type, source) => {
+      const shader = this.gl.createShader(type);
+      this.gl.shaderSource(shader, source);
+      this.gl.compileShader(shader);
+      const success = this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS);
+      if (!success) {
+        console.log(this.gl.getShaderInfoLog(shader));
+        this.gl.deleteShader(shader);
+        return false;
+      }
+      return shader;
+    });_defineProperty(this, "createWebGL",
+
+    (vertexSource, fragmentSource) => {
+      // Setup Vertext/Fragment Shader functions
+      this.vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexSource);
+      this.fragmentShader = this.createShader(
+      this.gl.FRAGMENT_SHADER,
+      fragmentSource);
+
+
+      // Setup Program and Attach Shader functions
+      this.program = this.gl.createProgram();
+      this.gl.attachShader(this.program, this.vertexShader);
+      this.gl.attachShader(this.program, this.fragmentShader);
+      this.gl.linkProgram(this.program);
+      this.gl.useProgram(this.program);
+
+      if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
+        console.warn(
+        "Unable to initialize the shader program: " +
+        this.gl.getProgramInfoLog(this.program));
+
+        return null;
+      }
+
+      // Create and Bind buffer //
+      const buffer = this.gl.createBuffer();
+      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+
+      this.gl.bufferData(
+      this.gl.ARRAY_BUFFER,
+      new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),
+      this.gl.STATIC_DRAW);
+
+
+      const vPosition = this.gl.getAttribLocation(this.program, "vPosition");
+
+      this.gl.enableVertexAttribArray(vPosition);
+      this.gl.vertexAttribPointer(
+      vPosition,
+      2, // size: 2 components per iteration
+      this.gl.FLOAT, // type: the data is 32bit floats
+      false, // normalize: don't normalize the data
+      0, // stride: 0 = move forward size * sizeof(type) each iteration to get the next position
+      0 // start at the beginning of the buffer
+      );
+
+      this.clearCanvas();
+      this.importUniforms();
+    });_defineProperty(this, "clearCanvas",
+
+    () => {
+      this.gl.clearColor(0, 0, 0, 0);
+      this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+    });_defineProperty(this, "importUniforms",
+
+
+    () => {
+      const width = swidth;
+      const height = sheight;
+      this.resolution = new Float32Array([width, height]);
+      this.gl.uniform2fv(
+      this.gl.getUniformLocation(this.program, "resolution"),
+      this.resolution);
+
+      // get the uniform ins from the shader fragments
+      this.ut = this.gl.getUniformLocation(this.program, "time");
+    });_defineProperty(this, "updateUniforms",
+
+
+    () => {
+      let tm = (Date.now() - this.start) / 1000;
+      //prevent time from getting too big
+      if (tm > 2000) this.start = Date.now();
+      // this.gl.uniform1f(this.ut,150.230);
+      this.gl.uniform1f(this.ut, (Date.now() - this.start) / 1000);
+
+      const factor = 0.15;
+
+      this.gl.drawArrays(
+      this.gl.TRIANGLE_FAN, // primitiveType
+      0, // Offset
+      4 // Count
+      );
+    });_defineProperty(this, "init",
+
+
+    () => {
+      this.createWebGL(
+      document.getElementById("vertexShader").textContent,
+      document.getElementById("fragmentShader").textContent);
+
+      this.renderLoop();
+    });_defineProperty(this, "renderLoop",
+
+    () => {
+      this.updateUniforms();
+      this.animation = window.requestAnimationFrame(this.renderLoop);
+    });this.start = Date.now(); // Setup WebGL canvas and surface object //
+    // Make Canvas and get WebGl2 Context //
+    let _width = swidth; //(this.width = ~~(document.documentElement.clientWidth,window.innerWidth || 0));
+    let _height = sheight; //(this.height = ~~(document.documentElement.clientHeight,window.innerHeight || 0));
+    const canvas = this.canvas = document.createElement("canvas");const container = document.getElementById("container");canvas.id = "GLShaders";canvas.width = _width;canvas.height = _height;document.body.appendChild(canvas);const gl = this.gl = canvas.getContext("webgl2");if (!gl) {console.warn("WebGL 2 is not available.");return;} // WebGl and WebGl2 Extension //
+    this.gl.getExtension("OES_standard_derivatives");this.gl.getExtension("EXT_shader_texture_lod");this.gl.getExtension("OES_texture_float");this.gl.getExtension("WEBGL_color_buffer_float");this.gl.getExtension("OES_texture_float_linear");this.gl.viewport(0, 0, canvas.width, canvas.height);this.init();} // Shader Bootstrap code //
+}const demo = new Render(document.body);
\ No newline at end of file
diff --git a/candy-stacker/dist/style.css b/candy-stacker/dist/style.css
new file mode 100644
index 0000000..15f68dc
--- /dev/null
+++ b/candy-stacker/dist/style.css
@@ -0,0 +1,30 @@
+html {
+  height: 100%;
+}
+body {
+  background-color: #464646;
+  background-image: linear-gradient(30deg, #222222 12%, transparent 12.5%, transparent 87%, #222222 87.5%, #222222), linear-gradient(150deg, #222222 12%, transparent 12.5%, transparent 87%, #222222 87.5%, #222222), linear-gradient(30deg, #222222 12%, transparent 12.5%, transparent 87%, #222222 87.5%, #222222), linear-gradient(150deg, #222222 12%, transparent 12.5%, transparent 87%, #222222 87.5%, #222222), linear-gradient(60deg, #22222277 25%, transparent 25.5%, transparent 75%, #22222277 75%, #22222277), linear-gradient(60deg, #22222277 25%, transparent 25.5%, transparent 75%, #22222277 75%, #22222277);
+  background-size: 62px 109px;
+  background-position: 0 0, 0 0, 31px 54px, 31px 54px, 0 0, 31px 54px;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+}
+canvas {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  box-shadow: 2px 10px 13px rgba(0, 0, 0, 0.75);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 800px;
+  height: 450px;
+}
\ No newline at end of file
diff --git a/candy-stacker/license.txt b/candy-stacker/license.txt
new file mode 100644
index 0000000..917f0b4
--- /dev/null
+++ b/candy-stacker/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by pjkarlik (https://codepen.io/pjkarlik/pen/ZEyKymB)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/candy-stacker/src/index.html b/candy-stacker/src/index.html
new file mode 100644
index 0000000..bd706d3
--- /dev/null
+++ b/candy-stacker/src/index.html
@@ -0,0 +1,316 @@
+<!-- VertexShader code here -->
+<script id="vertexShader" type="x-shader/x-vertex">#version 300 es
+precision highp float;
+in vec4 vPosition;
+void main() {
+	gl_Position = vPosition;
+}
+</script>
+<!-- FragmentShader code here -->
+<script id="fragmentShader" type="x-shader/x-fragment">#version 300 es
+precision highp float;
+out vec4 fragColor;
+  
+uniform vec4 mouse;
+uniform vec2 resolution;
+uniform float time;
+
+#define T 			time
+#define M				mouse
+#define R				resolution
+
+#define PI  3.14159265359
+#define PI2 6.28318530718
+
+#define MAX_DIST    150.
+#define MIN_DIST    .001
+
+mat2 rot(float a){ return mat2(cos(a),sin(a),-sin(a),cos(a)); }
+float hash21(vec2 p){ return fract(sin(dot(p,vec2(26.34,45.32)))*4324.23); }
+float lsp(float begin, float end, float t) { return clamp((t - begin) / (end - begin), 0., 1.); }
+
+//@iq shapes and extrude
+float box(vec3 p, vec3 s) {
+    p = abs(p)-s;
+    return length(max(p, 0.))+min(max(p.x, max(p.y, p.z)), 0.)-.025;
+}
+float cyl( vec3 p, float h, float r ) {
+  vec2 d = abs(vec2(length(p.xz),p.y)) - vec2(h,r);
+  return min(max(d.x,d.y),0.) + length(max(d,0.));
+}
+float opx( in vec3 p, float d, in float h ) {
+    vec2 w = vec2( d, abs(p.z) - h );
+    return min(max(w.x,w.y),0.) + length(max(w,0.));
+}
+// gear
+float gear(vec3 p, float radius, float thick) {
+    float hole = (radius*.25);
+    float sp = floor(radius*PI);
+    float gs = length(p.xy)-radius;
+    float gw = abs(sin(atan(p.y,p.x)*sp)*.2);
+    gs +=smoothstep(.05,.45,gw);
+    float cog=max(opx(p,gs,thick),-(length(p.xy)-hole));
+    return cog;
+}
+// consts
+const float size = 4.;
+const float hlf = size/2.;
+const float dbl = size*2.;
+// globals
+float floorspeed;
+float ga1,ga2,ga3,ga4;
+
+vec3 hit=vec3(0),hitPoint,gid,sid;
+vec3 speed = vec3(0);
+mat2 r45,turn,spin;
+
+vec2 map(in vec3 p) {
+    vec2 res = vec2(1e5,0.);
+    p += speed;
+
+    float id;
+    vec3 p2, q;
+    for(int i = 0; i<2; i++)
+    {
+        float cnt = i<1 ? size : dbl;
+        q = vec3(p.x-cnt,p.yz);
+        id = floor(q.x/dbl) + .5;
+        q.x -= (id)*dbl;
+        float qf = (id)*dbl + cnt;
+
+        float ff = qf-size;
+        float lent= ff<floorspeed-3. ? 7. : clamp(ga4,0.,1.)*7. ;
+        float fent= ff<floorspeed-3. ? 5. : clamp(ga4,0.,1.)*5. ;
+        vec3 r = q;
+        p2=q;
+        q.z=abs(q.z)-19.;
+        
+        float pole = (ff<floorspeed+1.&& i==0) ? min(cyl(q-vec3(0,lent+1.5,0),.25,lent+.5),
+        length(q-vec3(0,(lent+1.5)*2.,0))-(.75)) : 1e5;
+        
+        float pcap = max(cyl(q,.85,1.), -cyl(q,.45,2.) );
+        pcap = min(box(q,vec3(1.9,.1,1.5)),pcap);
+        pole=min(pcap,pole);
+        if(pole<res.x){
+            res = vec2(pole,5.);
+            hit=q;
+            gid = vec3(qf,0,0);
+        }  
+        
+        float qw=q.z - 2.;     
+        float wave = .5*sin(qw*1.5-T*4.+ff);
+        wave = mix(wave,0.,clamp(1.-((qw-1.5)*.5),0.,.8));
+        q.x-= wave*2.;
+        q.y-= wave;
+        
+        vec3 fq = q-vec3(0,(lent*2.),fent);
+        float flag=(ff<floorspeed+1.&& i==0) ? box(fq,vec3(.05,2.5,fent)) : 1e5;
+        if(flag<res.x){
+            res = vec2(flag,1.);
+            hit=fq;
+            gid = vec3(qf,0,0);
+        }
+
+        lent= ff<floorspeed+5. ? 0. : ff>floorspeed+6. ? 3.25 : clamp(1.-ga3,0.,1.)*3.25;
+        float ent= ff<floorspeed+35. ? 0. : ff>floorspeed+38. ? 38. : clamp(1.-ga3,0.,1.)*38.;
+        
+        if(i==0) ent = -ent;
+        float d3=box(r-vec3(0,(lent*3.)-2.,ent),vec3(2,2,14.));
+        if(d3<res.x){
+            res = vec2(d3,3.);
+            hit= r-vec3(0,(lent*3.)-2.,ent);
+            gid = vec3(qf,0,0);
+        }
+        
+    }
+
+    vec3 pb = vec3(p.x-speed.x-25.,p.y-19.,p.z-11.);
+    pb.xy*=spin;
+    float bls = gear(pb, 9.,1.5);
+    vec3 pp = vec3(p.x-speed.x-29.,p.y-3.,p.z);
+    vec3 pq = vec3(p.x-speed.x-16.,p.y-3.,p.z);
+    
+    float beam = min(length(pp.xy)-.45,length(pq.xy)-.45);
+    beam = min(cyl(pb.yzx-vec3(0,24,0),1.25,25.25),beam);
+    beam = min(cyl(pb,.5,4.),beam);
+    pp.xy*=turn; pq.xy*=turn;
+    bls = min(gear(pp, 3.,14.75),bls);
+    bls = min(gear(pq, 3.,14.75),bls);
+   
+    if(bls<res.x){
+        res=vec2(bls,4.);
+        hit=p2;
+    }
+    if(beam<res.x){
+        res=vec2(beam,5.);
+        hit=pb;
+    }
+    float fl=max(p.y,-box(p2,vec3(8.,4.,16.)) );
+    if(fl<res.x){
+        res=vec2(fl,2.);
+        hit=p;
+    }
+    return res;
+}
+
+vec3 normal(vec3 p, float t) {
+    float e = MIN_DIST*t;
+    vec2 h =vec2(1,-1)*.5773;
+    vec3 n = h.xyy * map(p+h.xyy*e).x+
+             h.yyx * map(p+h.yyx*e).x+
+             h.yxy * map(p+h.yxy*e).x+
+             h.xxx * map(p+h.xxx*e).x;
+    return normalize(n);
+}
+
+vec2 marcher(vec3 ro, vec3 rd, int maxsteps){
+	float d = 0.;
+    float m = 0.;
+    for(int i=0;i<maxsteps;i++){
+    	vec2 ray = map(ro + rd * d);
+        if(ray.x<MIN_DIST*d||d>MAX_DIST) break;
+        d += i<32?ray.x*.25:ray.x*.85;
+        m  = ray.y;
+    }
+	return vec2(d,m);
+}
+
+vec3 hue(float t){ 
+    const vec3 c = vec3(.122,.467,.918);
+    return .45 + .45*cos(PI2*t*(c+vec3(.978,.969,.891))); 
+}
+
+vec4 render(inout vec3 ro, inout vec3 rd, inout vec3 ref, bool last, inout float d, vec2 uv) {
+
+    vec3 C = vec3(0);
+    vec2 ray = marcher(ro,rd,128);
+    hitPoint=hit;  
+    sid=gid;
+    d = ray.x;
+    float m = ray.y;
+    float alpha = 0.;
+    
+    if(d<MAX_DIST)
+    {
+        vec3 p = ro + rd * d;
+        vec3 n = normal(p,d);
+        vec3 lpos =vec3(25.,125.,-75.);
+        vec3 l = normalize(lpos-p);
+        
+        vec3 h = vec3(.5);
+        vec3 hp = hitPoint+vec3(size,5,size);
+        float diff = clamp(dot(n,l),0.,1.);
+        float fresnel = pow(clamp(1.+dot(rd, n), 0., 1.), 9.);
+        fresnel = mix(.01, .7, fresnel);
+
+        float shdw = 1.;
+        for( float t=.0; t < 26.; )
+        {
+            float h = map(p + l*t).x;
+            if( h<MIN_DIST ) { shdw = 0.; break; }
+            shdw = min(shdw, 18.*h/t);
+            t += t<10.||t>20.?h*.4:h*.8;
+            if( shdw<MIN_DIST || t>32. ) break;
+        }
+
+        diff = mix(diff,diff*shdw,.75);
+
+        vec3 view = normalize(p - ro);
+        vec3 ret = reflect(normalize(lpos), n);
+        float spec = 0.3 * pow(max(dot(view, ret), 0.), 20.);
+        float clr;
+        
+        // materials
+        if(m==1.){
+            h=vec3(.745,.933,.929);
+            vec2 f = fract(hp.zy)-.5;
+            if(f.x*f.y>0.||hp.y<0.) h*=.25;    
+            ref = h-fresnel;     
+        }
+        if(m==2.){
+            h=vec3(.192,.306,.302);
+            vec2 f = fract(hp.xz/(dbl*2.))-.5;
+            if(f.x*f.y>0.) h=vec3(.220,.698,.682);
+            if( hp.y<1.1 ) h=vec3(.133,.247,.243);
+            ref =(f.x*f.y>0. && hp.y>1.1) ? vec3(.35)-fresnel:vec3(0.); 
+        }
+        if(m==3.){
+            h = hue((50.+sid.x)*.0025);
+            float px = .05;
+            vec2 grid = fract(hp.xz/hlf)-.5;
+            vec2 id = floor(hp.xz/hlf);
+            float hs = hash21(id+sid.x);
+            if(hs>.5) grid.x*=-1.;
+            vec2 d2 = vec2(length(grid-.5), length(grid+.5));
+            vec2 gx = d2.x<d2.y? vec2(grid-.5) : vec2(grid+.5);
+            float chk = mod(id.y + id.x,2.) * 2. - 1.;
+            float circle = length(gx)-.5;
+            circle=(chk>.5 ^^ hs<.5) ? smoothstep(-px,px,circle) : smoothstep(px,-px,circle);
+            h = mix(h, vec3(.1),circle);
+            if(hp.y<6.99) h=vec3(.8); 
+            if(hp.y<6.99&&hp.y>6.) h=vec3(.2);
+            ref = (h*.4)-fresnel;
+        }
+        if(m==4.) {
+            ref = vec3(.1)-fresnel;
+            h=vec3(.2);
+        }
+        if(m==5.) {
+            ref = vec3(.2)-fresnel;
+            h=vec3(.4);
+        }
+        C = (diff*h)+spec;
+        ro = p+n*MIN_DIST;
+        rd = reflect(rd,n);
+    } 
+    return vec4(C,alpha);
+}
+
+void main() {   
+    // precal
+    r45=rot(-0.78539816339); 
+    float ftime = (T+40.)*12.;
+    float tmod = mod(ftime, 10.);
+    float t3 = lsp(5., 10., tmod);
+    
+    float fmod = mod(ftime, 20.);
+    float t2 = lsp(10., 20., fmod);
+    
+    ga1 = (ftime*.1);
+    ga3 = (tmod<5.?t3+1. :t3);
+    ga4 = (fmod<10.?t2+1. :t2);
+    
+    speed = vec3(abs(ga1*size),0,0);
+    floorspeed=floor(speed.x);
+    turn=rot(ga1);
+    spin=rot(-ga1*.38);
+    //
+    vec2 F = gl_FragCoord.xy;
+    vec2 uv = (2.*F.xy-R.xy)/max(R.x,R.y);
+    vec3 ro = vec3(uv*42.,-42.);
+    vec3 rd = vec3(0.,0.,1.);
+
+    ro.yz*=r45;ro.xz*=r45;
+    rd.yz*=r45;rd.xz*=r45;
+    
+    // reflection loop (@BigWings)
+    vec3 C = vec3(0), ref=vec3(0), fill=vec3(1);
+    float d =0.;
+
+    for(float i=0.; i<2.; i++) {
+        vec4 pass = render(ro, rd, ref, i==2.-1., d, uv);
+        C += pass.rgb*fill;
+        fill*=ref;
+    }
+    // mixdown 
+    float vin = length((2.*F.xy-R.xy)/R.x)-.175;
+    C = mix(C,C*.5,smoothstep(.0,.8,vin));
+    C = clamp(C,vec3(.015),vec3(1));
+    // gamma
+    C = pow(C, vec3(.4545));
+    // output
+    fragColor = vec4(C,1.);
+}
+
+</script>
+<div id="container" />
\ No newline at end of file
diff --git a/candy-stacker/src/script.babel b/candy-stacker/src/script.babel
new file mode 100644
index 0000000..9e8ad05
--- /dev/null
+++ b/candy-stacker/src/script.babel
@@ -0,0 +1,150 @@
+const swidth = 800;
+const sheight = 450;
+
+// Boostrap for WebGL and Attaching Shaders //
+// Fragment & Vertex Shaders in HTML window //
+class Render {
+  constructor() {
+    this.start = Date.now();
+    // Setup WebGL canvas and surface object //
+    // Make Canvas and get WebGl2 Context //
+    let width = swidth; //(this.width = ~~(document.documentElement.clientWidth,window.innerWidth || 0));
+    let height = sheight; //(this.height = ~~(document.documentElement.clientHeight,window.innerHeight || 0));
+    const canvas = (this.canvas = document.createElement("canvas"));
+    const container = document.getElementById("container");
+    canvas.id = "GLShaders";
+
+    canvas.width = width;
+    canvas.height = height;
+    document.body.appendChild(canvas);
+    const gl = (this.gl = canvas.getContext("webgl2"));
+
+    if (!gl) {
+      console.warn("WebGL 2 is not available.");
+      return;
+    }
+    // WebGl and WebGl2 Extension //
+    this.gl.getExtension("OES_standard_derivatives");
+    this.gl.getExtension("EXT_shader_texture_lod");
+    this.gl.getExtension("OES_texture_float");
+    this.gl.getExtension("WEBGL_color_buffer_float");
+    this.gl.getExtension("OES_texture_float_linear");
+    this.gl.viewport(0, 0, canvas.width, canvas.height);
+
+    this.init();
+  }
+
+  // Shader Bootstrap code //
+  createShader = (type, source) => {
+    const shader = this.gl.createShader(type);
+    this.gl.shaderSource(shader, source);
+    this.gl.compileShader(shader);
+    const success = this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS);
+    if (!success) {
+      console.log(this.gl.getShaderInfoLog(shader));
+      this.gl.deleteShader(shader);
+      return false;
+    }
+    return shader;
+  };
+
+  createWebGL = (vertexSource, fragmentSource) => {
+    // Setup Vertext/Fragment Shader functions
+    this.vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexSource);
+    this.fragmentShader = this.createShader(
+      this.gl.FRAGMENT_SHADER,
+      fragmentSource
+    );
+
+    // Setup Program and Attach Shader functions
+    this.program = this.gl.createProgram();
+    this.gl.attachShader(this.program, this.vertexShader);
+    this.gl.attachShader(this.program, this.fragmentShader);
+    this.gl.linkProgram(this.program);
+    this.gl.useProgram(this.program);
+
+    if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
+      console.warn(
+        "Unable to initialize the shader program: " +
+          this.gl.getProgramInfoLog(this.program)
+      );
+      return null;
+    }
+
+    // Create and Bind buffer //
+    const buffer = this.gl.createBuffer();
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+
+    this.gl.bufferData(
+      this.gl.ARRAY_BUFFER,
+      new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),
+      this.gl.STATIC_DRAW
+    );
+
+    const vPosition = this.gl.getAttribLocation(this.program, "vPosition");
+
+    this.gl.enableVertexAttribArray(vPosition);
+    this.gl.vertexAttribPointer(
+      vPosition,
+      2, // size: 2 components per iteration
+      this.gl.FLOAT, // type: the data is 32bit floats
+      false, // normalize: don't normalize the data
+      0, // stride: 0 = move forward size * sizeof(type) each iteration to get the next position
+      0 // start at the beginning of the buffer
+    );
+
+    this.clearCanvas();
+    this.importUniforms();
+  };
+
+  clearCanvas = () => {
+    this.gl.clearColor(0, 0, 0, 0);
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+  };
+
+  // add other uniforms here
+  importUniforms = () => {
+    const width = swidth;
+    const height = sheight;
+    this.resolution = new Float32Array([width, height]);
+    this.gl.uniform2fv(
+      this.gl.getUniformLocation(this.program, "resolution"),
+      this.resolution
+    );
+    // get the uniform ins from the shader fragments
+    this.ut = this.gl.getUniformLocation(this.program, "time");
+  };
+
+  // things that need to be updated per frame
+  updateUniforms = () => {
+    let tm = (Date.now() - this.start) / 1000;
+    //prevent time from getting too big
+    if (tm > 2000) this.start = Date.now();
+    // this.gl.uniform1f(this.ut,150.230);
+    this.gl.uniform1f(this.ut, (Date.now() - this.start) / 1000);
+
+    const factor = 0.15;
+
+    this.gl.drawArrays(
+      this.gl.TRIANGLE_FAN, // primitiveType
+      0, // Offset
+      4 // Count
+    );
+  };
+
+  // setup shaders and send to render loop
+  init = () => {
+    this.createWebGL(
+      document.getElementById("vertexShader").textContent,
+      document.getElementById("fragmentShader").textContent
+    );
+    this.renderLoop();
+  };
+
+  renderLoop = () => {
+    this.updateUniforms();
+    this.animation = window.requestAnimationFrame(this.renderLoop);
+  };
+}
+
+const demo = new Render(document.body);
diff --git a/candy-stacker/src/style.less b/candy-stacker/src/style.less
new file mode 100644
index 0000000..2ebcd19
--- /dev/null
+++ b/candy-stacker/src/style.less
@@ -0,0 +1,80 @@
+html {
+  height: 100%;
+}
+
+body {
+  background-color: #464646;
+  background-image: linear-gradient(
+      30deg,
+      #222222 12%,
+      transparent 12.5%,
+      transparent 87%,
+      #222222 87.5%,
+      #222222
+    ),
+    linear-gradient(
+      150deg,
+      #222222 12%,
+      transparent 12.5%,
+      transparent 87%,
+      #222222 87.5%,
+      #222222
+    ),
+    linear-gradient(
+      30deg,
+      #222222 12%,
+      transparent 12.5%,
+      transparent 87%,
+      #222222 87.5%,
+      #222222
+    ),
+    linear-gradient(
+      150deg,
+      #222222 12%,
+      transparent 12.5%,
+      transparent 87%,
+      #222222 87.5%,
+      #222222
+    ),
+    linear-gradient(
+      60deg,
+      #22222277 25%,
+      transparent 25.5%,
+      transparent 75%,
+      #22222277 75%,
+      #22222277
+    ),
+    linear-gradient(
+      60deg,
+      #22222277 25%,
+      transparent 25.5%,
+      transparent 75%,
+      #22222277 75%,
+      #22222277
+    );
+  background-size: 62px 109px;
+  background-position: 0 0, 0 0, 31px 54px, 31px 54px, 0 0, 31px 54px;
+
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+}
+
+canvas {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  box-shadow: 2px 10px 13px rgba(0, 0, 0, 0.75);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 800px;
+  height: 450px;
+}
diff --git a/canvas-image-hover-interaction/README.markdown b/canvas-image-hover-interaction/README.markdown
new file mode 100644
index 0000000..0698f7e
--- /dev/null
+++ b/canvas-image-hover-interaction/README.markdown
@@ -0,0 +1,5 @@
+# Canvas Image Hover Interaction
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/dev_loop/pen/Bajvged](https://codepen.io/dev_loop/pen/Bajvged).
+
+
diff --git a/canvas-image-hover-interaction/dist/index.html b/canvas-image-hover-interaction/dist/index.html
new file mode 100644
index 0000000..174b4ab
--- /dev/null
+++ b/canvas-image-hover-interaction/dist/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Canvas Image Hover Interaction</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap"rel="stylesheet'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main>
+ 	<div class="cards">
+ 		<div class="card">
+ 			<div class="card__image">
+ 				<div class="card__image--inner"></div>
+ 			</div>
+ 			<div class="card__text">
+ 				<span class="card__text--inner">DESERT</span>
+ 			</div>
+ 		</div>
+
+ 		<div class="card">
+ 			<div class="card__image">
+ 				<div class="card__image--inner"></div>
+ 			</div>
+ 			<div class="card__text">
+ 				<span class="card__text--inner">FOREST</span>
+ 			</div>
+ 		</div>
+
+ 		<div class="card">
+ 			<div class="card__image">
+ 				<div class="card__image--inner"></div>
+ 			</div>
+ 			<div class="card__text">
+ 				<span class="card__text--inner">OCEAN</span>
+ 			</div>
+ 		</div>
+ 	</div>
+ </main>
+
+ <div class="loading__wrapper">
+ 	<div class="loader__text">Loading...</div>
+ </div>
+
+ <div class="support">
+ 	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
+ 	<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
+ </div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/canvas-image-hover-interaction/dist/script.js b/canvas-image-hover-interaction/dist/script.js
new file mode 100644
index 0000000..f6c2acb
--- /dev/null
+++ b/canvas-image-hover-interaction/dist/script.js
@@ -0,0 +1,628 @@
+// this might look cluttery on codepen, you can check the repo (below)
+// GITHUB LINK --> https://github.com/devloop01/canvas-image-interaction
+
+// I added comments just in case you are exploring through the code.
+
+// ALL THE CARD OPTIONS LISTED BELOW -->
+// 1. jumpToRandomPosition: If `true` the particles on every frame will jump to random position. Else the particles will move randomly without jumping. Defaults to `false`
+// 2. growAndShrink: If `true` the particles will grow & shrink, it will grow .8 times larger than the radius. Defaults to `false`
+// 3. fill: If `true` the particles are filled with the current pixel color that they are on, else they will be stroked for that same color. Defaults to `true`
+// 4. bounceFromEdges: If `true` the particles will bounce back when they hit the (specified) edges, or else thay will continue their path from the opposite edges/walls. Defaults to `true`.
+// 5. shape: You can specify what shape of the particles. Currently you can specify any one from the following, i.e. "circle", "square", "hexagon". If not specified then it defaults to "circle"
+// 6. radius: You can specity the radius of the particles, defaults to "5" if not specified.
+// 7. randomRadius: If `true` then the particles will have random radius, else defaults to `false`
+// 8. maxRadius: You can specify the minimum radius of the particles, else defaults to "2"
+// 9. minRadius: You can specify the maximum radius of the particles, else defaults to "5"
+// 10. maxVelocity: You can specify the maximum velocity of the particles, else defaults to "8"
+
+// Okay that's it, that's all the options I could add. Play around and see what fits for you.
+// Also please STAR this project if you think it's interesting, you can even fork it and make/add something new.
+
+console.clear();
+
+const cards = Array.from(document.querySelectorAll(".card"));
+const cardOptions = [
+	{
+		imageURL: {
+			default: "https://source.unsplash.com/8xznAGy4HcY/400x600",
+			hovered: "https://source.unsplash.com/Xc6gtOwSMSA/400x600"
+		},
+		totalParticles: 1500,
+		mouseRange: 80,
+		particlesConfig: {
+			jumpToRandomPosition: false,
+			fill: true,
+			randomRadius: true,
+			minRadius: 1,
+			maxRadius: 2
+		}
+	},
+	{
+		imageURL: {
+			default: "https://source.unsplash.com/wQImoykAwGs/400x600",
+			hovered: "https://source.unsplash.com/QsWG0kjPQRY/400x600"
+		},
+		totalParticles: 2500,
+		particlesConfig: {
+			jumpToRandomPosition: true,
+			fill: true,
+			shape: "square",
+			radius: 2
+		}
+	},
+	{
+		imageURL: {
+			default: "https://source.unsplash.com/sLAk1guBG90/400x600",
+			hovered: "https://source.unsplash.com/xe-ss5Tg2mo/400x600"
+		},
+		totalParticles: 2500,
+		particlesConfig: {
+			jumpToRandomPosition: false,
+			bounceFromEdges: false,
+			fill: false,
+			shape: "hexagon",
+			radius: 1
+		}
+	}
+];
+
+const imageURLS = cardOptions
+	.map((option) => Object.values(option.imageURL))
+	.flat();
+
+// --------------------- CLASSES ----------------------------
+
+class App {
+	init() {
+		// after all images are loaded remove loader
+		// (this is not the best way to do so but it gets the job done)
+		loadImages(imageURLS, (images) => {
+			// this array holds the images in a sub array
+			// i.e [img, img, img, img, img, img] ==> [[img, img], [img, img], [img, img]]
+			const splitedImagesArray = splitArray(images, 2);
+
+			cards.forEach((card, index) => {
+				new Canvas({
+					parent: card.querySelector(".card__image--inner"),
+					dimensions: {
+						width: card.getBoundingClientRect().width,
+						height: card.getBoundingClientRect().height
+					},
+					...cardOptions[index],
+					images: {
+						default: splitedImagesArray[index][0],
+						hovered: splitedImagesArray[index][1]
+					}
+				});
+			});
+
+			// hide the loading wrapper
+			document.querySelector(".loading__wrapper").classList.add("hide");
+
+			// let the gsap animation begin
+			gsap
+				.timeline({
+					delay: 0.8,
+					defaults: {
+						duration: 1.5,
+						stagger: 0.1,
+						ease: "expo.out"
+					}
+				})
+				.fromTo(
+					cards.map((card) => card.querySelector(".card__image")),
+					{
+						translateY: "-100%"
+					},
+					{
+						translateY: "0%"
+					}
+				)
+				.fromTo(
+					cards.map((card) => card.querySelector(".card__image--inner")),
+					{
+						translateY: "100%"
+					},
+					{
+						translateY: "0%"
+					},
+					0
+				)
+				.fromTo(
+					cards.map((card) => card.querySelector(".card__text--inner")),
+					{
+						translateY: "100%"
+					},
+					{
+						duration: 1.2,
+						translateY: "0%"
+					},
+					0.4
+				);
+		});
+	}
+}
+
+class Canvas {
+	constructor(options = {}) {
+		// the parent where the canvas will be appended
+		this.parent = options.parent;
+
+		// canvas dimensions
+		this.dimensions = options.dimensions;
+
+		// all imageURL's, images(optional) & imagesData that are required
+		this.imageURL = options.imageURL || {};
+		this.images = options.images || {};
+		this.imagesData = options.imagesData || {
+			default: null,
+			hovered: null
+		};
+		this.currentImageData = null;
+
+		// Array where all the particles will be stored
+		this.particles = null;
+		this.totalParticles = options.totalParticles || 400;
+
+		// boolean which changes to 'true' when hovered, oe else false
+		this.hovered = false;
+
+		// particles configs
+		this.particlesConfig = options.particlesConfig;
+
+		// mouse range and mouse particle instance
+		this.mouseRange = options.mouseRange || null;
+		this.mouse = null;
+
+		// initialize the canvas
+		this.init();
+	}
+
+	init() {
+		// create the canvas element
+		this.canvas = document.createElement("canvas");
+		// get the canvas context
+		this.ctx = this.canvas.getContext("2d");
+		// set the canvas dimensions
+		this.canvas.width = this.dimensions.width;
+		this.canvas.height = this.dimensions.height;
+
+		const initialize = () => {
+			// this variable holds the current image data
+			this.currentImageData = this.imagesData.default;
+
+			// add many Particle instances
+			this.addParticles(this.totalParticles);
+			// start rendering the canvas
+			this.startRender();
+			// initialize all the canvas events
+			this.initEvents();
+			// append the canvas on the parent
+			this.parent.appendChild(this.canvas);
+		};
+
+		// what happens here is if the user/dev provides the loaded image directly then use the images provided by the use directly
+		// and if the user provides the URL for the image then load the images from the URL and initialize
+		if (
+			!this.images.hasOwnProperty("default") &&
+			!this.images.hasOwnProperty("hovered")
+		) {
+			// load all the images that are required and after all the images are loaded the callback is called.
+			loadImages([this.imageURL.default, this.imageURL.hovered], (images) => {
+				// set the image data so that they can be accessed later when needed
+				this.imagesData.default = returnImageData(images[0], this.dimensions);
+				this.imagesData.hovered = returnImageData(images[1], this.dimensions);
+				initialize();
+			});
+		} else {
+			// set the image data so that they can be accessed later when needed
+			this.imagesData.default = returnImageData(
+				this.images.default,
+				this.dimensions
+			);
+			this.imagesData.hovered = returnImageData(
+				this.images.hovered,
+				this.dimensions
+			);
+			initialize();
+		}
+
+		// init mouse particle
+		if (this.mouseRange != null) {
+			this.mouse = new Particle({
+				ctx: this.ctx,
+				position: {
+					x: 0,
+					y: 0
+				},
+				radius: this.mouseRange,
+				color: "#000",
+				avoisEdges: true,
+				shape: "circle"
+			});
+		}
+	}
+
+	initEvents() {
+		const onMouseEnter = () => {
+			this.hovered = true;
+			this.currentImageData = this.imagesData.hovered;
+		};
+		const onMouseLeave = () => {
+			this.hovered = false;
+			this.currentImageData = this.imagesData.default;
+		};
+		const onMouseMove = (e) => {
+			if (this.mouse != null && this.hovered) {
+				this.mouse.position.x = e.offsetX;
+				this.mouse.position.y = e.offsetY;
+			}
+		};
+
+		this.canvas.addEventListener("mouseenter", onMouseEnter);
+		this.canvas.addEventListener("mouseleave", onMouseLeave);
+		this.canvas.addEventListener("mousemove", onMouseMove);
+	}
+
+	addParticles(n) {
+		this.particles = new Particles({
+			ctx: this.ctx,
+			totalParticles: n,
+			maxBounds: { width: this.dimensions.width, height: this.dimensions.height },
+			imageData: this.currentImageData,
+			particlesConfig: this.particlesConfig
+		});
+	}
+
+	updateParticleColor(imageData, particle) {
+		const color = returnPixelColor(imageData, Math.floor(this.dimensions.width), {
+			x: Math.floor(particle.position.x),
+			y: Math.floor(particle.position.y)
+		});
+		particle.updateColor(color);
+	}
+
+	startRender() {
+		requestAnimationFrame(() => this.render());
+	}
+
+	render() {
+		// this.ctx.clearRect(0, 0, this.dimensions.width, this.dimensions.height);
+
+		// loop through all the particles
+		this.particles.particles.forEach((particle) => {
+			if (this.mouseRange != null) {
+				// if the mouse range is not null then calculate the dist between mouse particle & all the other particles
+				const d = dist(this.mouse.position, particle.position);
+				// if the dist between the particles is less than the summation of the radius of the mouse particle & the other particle, that means they are intersecting
+				if (d < this.mouse.radius + particle.radius && this.hovered) {
+					// update the color of the intersecting particle only if mouse is hovered
+					this.updateParticleColor(this.imagesData.hovered, particle);
+				}
+				// else update every other particle too
+				else this.updateParticleColor(this.imagesData.default, particle);
+			}
+			// if the mouserange is null then update all particles at once
+			else this.updateParticleColor(this.currentImageData, particle);
+		});
+
+		this.particles.update();
+
+		requestAnimationFrame(() => this.render());
+	}
+}
+
+class Particles {
+	constructor(options = {}) {
+		this.ctx = options.ctx; // canvas context
+		this.totalParticles = options.totalParticles;
+		this.maxBounds = options.maxBounds;
+		this.imageData = options.imageData;
+
+		// array that holds all the particles
+		this.particles = [];
+
+		// all the particles config
+		this.particlesConfig = {
+			jumpToRandomPosition: options.particlesConfig.hasOwnProperty(
+				"jumpToRandomPosition"
+			)
+				? options.particlesConfig.jumpToRandomPosition
+				: false,
+			growAndShrink: options.particlesConfig.hasOwnProperty("growAndShrink")
+				? options.particlesConfig.growAndShrink
+				: false,
+			fill: options.particlesConfig.hasOwnProperty("fill")
+				? options.particlesConfig.fill
+				: true,
+			bounceFromEdges: options.particlesConfig.hasOwnProperty("bounceFromEdges")
+				? options.particlesConfig.bounceFromEdges
+				: true,
+			shape: options.particlesConfig.hasOwnProperty("shape")
+				? options.particlesConfig.shape
+				: "circle",
+			radius: options.particlesConfig.hasOwnProperty("radius")
+				? options.particlesConfig.radius
+				: 5,
+			randomRadius: options.particlesConfig.hasOwnProperty("randomRadius")
+				? options.particlesConfig.randomRadius
+				: false,
+			maxRadius: options.particlesConfig.hasOwnProperty("maxRadius")
+				? options.particlesConfig.maxRadius
+				: 5,
+			minRadius: options.particlesConfig.hasOwnProperty("minRadius")
+				? options.particlesConfig.minRadius
+				: 2,
+			maxVelocity: options.particlesConfig.hasOwnProperty("maxVelocity")
+				? options.particlesConfig.maxVelocity
+				: 8
+		};
+
+		this.init();
+	}
+
+	init() {
+		const ctx = this.ctx;
+		const color = "transparent";
+		for (let i = 0; i < this.totalParticles; i++) {
+			const radius = this.particlesConfig.randomRadius
+				? randomIntegerFromRange(
+						this.particlesConfig.minRadius,
+						this.particlesConfig.maxRadius
+				  )
+				: this.particlesConfig.radius;
+			const position = {
+				x: randomIntegerFromRange(radius, this.maxBounds.width - radius),
+				y: randomIntegerFromRange(radius, this.maxBounds.height - radius)
+			};
+			this.particles.push(
+				new Particle({
+					ctx,
+					position,
+					radius,
+					color,
+					imageData: this.imageData,
+					maxVelocity: 8,
+					bounceFromEdges: this.particlesConfig.bounceFromEdges,
+					shape: this.particlesConfig.shape,
+					edges: { width: this.maxBounds.width, height: this.maxBounds.height }
+				})
+			);
+		}
+	}
+
+	update() {
+		// loop through particles, draw & update each particle
+		this.particles.forEach((particle) => {
+			particle.draw();
+			if (this.particlesConfig.fill) particle.fillShape();
+			else particle.strokeShape();
+
+			particle.update();
+
+			if (this.particlesConfig.growAndShrink)
+				particle.growAndShrink(particle.minRadius * 0.65);
+
+			if (!this.particlesConfig.jumpToRandomPosition) particle.updatePosition();
+			else
+				particle.jumpToRandomPosition({
+					width: this.maxBounds.width,
+					height: this.maxBounds.height
+				});
+		});
+	}
+}
+
+class Particle {
+	constructor(options = {}) {
+		this.ctx = options.ctx;
+
+		this.position = options.position || {
+			x: 0,
+			y: 0
+		};
+		this.maxVelocity = options.maxVelocity || 5;
+		this.velocity = options.velocity || {
+			x: (0.5 - Math.random()) * this.maxVelocity,
+			y: (0.5 - Math.random()) * this.maxVelocity
+		};
+
+		this.radius = options.radius;
+		this.minRadius = this.radius;
+
+		this.color = options.color;
+
+		this.imageData = options.imageData;
+
+		this.rotation = 0;
+		this.rotationIncrement = randomIntegerFromRange(2, 5);
+
+		this.stroke = false;
+		this.fill = true;
+
+		this.shape = options.shape || "circle";
+
+		this.edges = options.edges || null;
+		this.bounceFromEdges = options.bounceFromEdges;
+		this.avoidEdges = options.avoidEdges || false;
+
+		this.tick = 0;
+		this.tickIncrement = 0.02 + Math.random() * 0.03;
+	}
+
+	draw() {
+		this.ctx.beginPath();
+		this.ctx.save();
+		this.ctx.translate(this.position.x, this.position.y);
+		this.ctx.rotate((Math.PI / 180) * this.rotation);
+		this.drawShape(this.shape);
+		this.ctx.restore();
+		this.ctx.closePath();
+	}
+
+	fillShape() {
+		this.ctx.fillStyle = this.color;
+		this.ctx.fill();
+	}
+
+	strokeShape() {
+		this.ctx.strokeStyle = this.color;
+		this.ctx.stroke();
+	}
+
+	drawShape(shape) {
+		if (shape === "square")
+			this.ctx.rect(-this.radius / 2, -this.radius / 2, this.radius, this.radius);
+		else if (shape === "circle") this.ctx.arc(0, 0, this.radius, 0, Math.PI * 2);
+		else if (shape === "hexagon") {
+			this.ctx.moveTo(this.radius * Math.cos(0), this.radius * Math.sin(0));
+			for (let side = 0; side < 7; side++) {
+				this.ctx.lineTo(
+					this.radius * Math.cos((side * 2 * Math.PI) / 6),
+					this.radius * Math.sin((side * 2 * Math.PI) / 6)
+				);
+			}
+		}
+	}
+
+	update() {
+		if (this.bounceFromEdges) this.changeVelocityOnBounce(this.edges);
+		else this.continueFromEdge();
+
+		this.rotation += this.rotationIncrement;
+		this.tick += this.tickIncrement;
+	}
+
+	updatePosition() {
+		this.position.x += this.velocity.x;
+		this.position.y += this.velocity.y;
+	}
+
+	jumpToRandomPosition(bounds) {
+		this.position.x = Math.random() * bounds.width;
+		this.position.y = Math.random() * bounds.height;
+	}
+
+	growAndShrink(max) {
+		this.radius = this.minRadius + Math.abs(Math.sin(this.tick)) * max;
+	}
+
+	updateColor(color) {
+		this.color = color;
+	}
+
+	continueFromEdge() {
+		if (!this.avoidEdges) {
+			if (this.position.x > this.edges.width) this.position.x = 0;
+			else if (this.position.x < 0) this.position.x = this.edges.width;
+			if (this.position.y > this.edges.height) this.position.y = 0;
+			else if (this.position.y < 0) this.position.y = this.edges.height;
+		}
+	}
+
+	changeVelocityOnBounce() {
+		if (!this.avoidEdges) {
+			if (
+				this.position.x + this.radius > this.edges.width ||
+				this.position.x - this.radius < 0
+			)
+				this.velocity.x *= -1;
+			if (
+				this.position.y + this.radius > this.edges.height ||
+				this.position.y - this.radius < 0
+			)
+				this.velocity.y *= -1;
+		}
+	}
+}
+
+// ---------------- UTILITY FUNCTIONS ------------------------
+
+function randomIntegerFromRange(min, max) {
+	return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+function dist(a, b) {
+	return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
+}
+
+function splitArray(array, n) {
+	let [...arr] = array;
+	var res = [];
+	while (arr.length) {
+		res.push(arr.splice(0, n));
+	}
+	return res;
+}
+
+function returnPixelColor(imageData, width, position) {
+	const index = (position.x + position.y * width) * 4;
+	let pixel = {
+		r: imageData.data[index + 0],
+		g: imageData.data[index + 1],
+		b: imageData.data[index + 2]
+	};
+	return `rgb(${pixel.r}, ${pixel.g}, ${pixel.b})`;
+}
+
+function toDataURL(url) {
+	return new Promise((resolve, reject) => {
+		var xhr = new XMLHttpRequest();
+		xhr.onload = function () {
+			var reader = new FileReader();
+			reader.onloadend = function () {
+				resolve(reader.result);
+			};
+			reader.readAsDataURL(xhr.response);
+		};
+		xhr.onerror = reject;
+		xhr.open("GET", url);
+		xhr.responseType = "blob";
+		xhr.send();
+	});
+}
+
+function returnImageData(image, dimensions) {
+	const imageCanvas = document.createElement("canvas");
+	const imageCanvasCtx = imageCanvas.getContext("2d");
+	imageCanvas.width = dimensions.width;
+	imageCanvas.height = dimensions.height;
+	imageCanvasCtx.drawImage(image, 0, 0, imageCanvas.width, imageCanvas.height);
+	return imageCanvasCtx.getImageData(
+		0,
+		0,
+		imageCanvas.width,
+		imageCanvas.height
+	);
+}
+
+function loadImage(imageURL, callback) {
+	toDataURL(imageURL).then((data) => {
+		const IMAGE = new Image();
+		IMAGE.src = data;
+		IMAGE.onload = function () {
+			callback(IMAGE);
+		};
+	});
+}
+
+function loadImages(imagesURLS, callback) {
+	const totalImageToLoad = imagesURLS.length;
+	let curentImageIndex = 0;
+	let imagesArray = [];
+
+	const load = () => {
+		loadImage(imagesURLS[curentImageIndex], (image) => {
+			imagesArray.push(image);
+			curentImageIndex++;
+			if (curentImageIndex === totalImageToLoad) callback(imagesArray);
+			else load();
+		});
+	};
+
+	load();
+}
+
+// initiate the App instance
+const app = new App();
+app.init();
\ No newline at end of file
diff --git a/canvas-image-hover-interaction/dist/style.css b/canvas-image-hover-interaction/dist/style.css
new file mode 100644
index 0000000..33a9086
--- /dev/null
+++ b/canvas-image-hover-interaction/dist/style.css
@@ -0,0 +1,125 @@
+@import url("https://fonts.googleapis.com/css2?family=Red+Rose:wght@400;700&display=swap");
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  width: 100%;
+  height: 100vh;
+  display: grid;
+  place-items: center;
+  background: #161616;
+}
+
+main {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  padding: 4rem;
+}
+
+.cards {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+.cards .card {
+  position: relative;
+  width: 260px;
+  height: 360px;
+  margin: 2rem 4rem;
+}
+.cards .card__image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.cards .card__image--inner {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.cards .card__image--inner canvas {
+  transform: scale(1.02);
+}
+.cards .card__text {
+  position: absolute;
+  left: 0;
+  bottom: 25%;
+  transform: translateX(-50%);
+  pointer-events: none;
+  user-select: none;
+  overflow: hidden;
+}
+.cards .card__text--inner {
+  display: inline-block;
+  color: #fff;
+  font-size: 3rem;
+  font-family: "Red Rose", Roboto;
+  font-weight: 700;
+}
+
+.loading__wrapper {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #000;
+  z-index: 200;
+  transition: opacity 500ms ease-in;
+}
+.loading__wrapper .loader__text {
+  color: #fff;
+  font-family: "Red Rose", Roboto;
+  font-weight: 400;
+  margin-bottom: 1.4rem;
+}
+.loading__wrapper.hide {
+  pointer-events: none;
+  user-select: none;
+  opacity: 0;
+}
+
+.support {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  padding: 10px;
+  display: flex;
+}
+.support a {
+  margin: 0 10px;
+  color: #fff;
+  font-size: 1.8rem;
+  backface-visibility: hidden;
+  transition: all 150ms ease;
+}
+.support a:hover {
+  transform: scale(1.1);
+}
+
+@keyframes octocat-wave {
+  0%,
+	100% {
+    transform: rotate(0);
+  }
+  20%,
+	60% {
+    transform: rotate(-20deg);
+  }
+  40%,
+	80% {
+    transform: rotate(10deg);
+  }
+}
\ No newline at end of file
diff --git a/canvas-image-hover-interaction/license.txt b/canvas-image-hover-interaction/license.txt
new file mode 100644
index 0000000..f32bf44
--- /dev/null
+++ b/canvas-image-hover-interaction/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Sikriti Dakua (https://codepen.io/dev_loop/pen/Bajvged)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/canvas-image-hover-interaction/src/index.html b/canvas-image-hover-interaction/src/index.html
new file mode 100644
index 0000000..772b29b
--- /dev/null
+++ b/canvas-image-hover-interaction/src/index.html
@@ -0,0 +1,40 @@
+ <main>
+ 	<div class="cards">
+ 		<div class="card">
+ 			<div class="card__image">
+ 				<div class="card__image--inner"></div>
+ 			</div>
+ 			<div class="card__text">
+ 				<span class="card__text--inner">DESERT</span>
+ 			</div>
+ 		</div>
+
+ 		<div class="card">
+ 			<div class="card__image">
+ 				<div class="card__image--inner"></div>
+ 			</div>
+ 			<div class="card__text">
+ 				<span class="card__text--inner">FOREST</span>
+ 			</div>
+ 		</div>
+
+ 		<div class="card">
+ 			<div class="card__image">
+ 				<div class="card__image--inner"></div>
+ 			</div>
+ 			<div class="card__text">
+ 				<span class="card__text--inner">OCEAN</span>
+ 			</div>
+ 		</div>
+ 	</div>
+ </main>
+
+ <div class="loading__wrapper">
+ 	<div class="loader__text">Loading...</div>
+ </div>
+
+ <div class="support">
+ 	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
+ 	<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
+ </div>
+
diff --git a/canvas-image-hover-interaction/src/script.js b/canvas-image-hover-interaction/src/script.js
new file mode 100644
index 0000000..3f5405e
--- /dev/null
+++ b/canvas-image-hover-interaction/src/script.js
@@ -0,0 +1,628 @@
+// this might look cluttery on codepen, you can check the repo (below)
+// GITHUB LINK --> https://github.com/devloop01/canvas-image-interaction
+
+// I added comments just in case you are exploring through the code.
+
+// ALL THE CARD OPTIONS LISTED BELOW -->
+// 1. jumpToRandomPosition: If `true` the particles on every frame will jump to random position. Else the particles will move randomly without jumping. Defaults to `false`
+// 2. growAndShrink: If `true` the particles will grow & shrink, it will grow .8 times larger than the radius. Defaults to `false`
+// 3. fill: If `true` the particles are filled with the current pixel color that they are on, else they will be stroked for that same color. Defaults to `true`
+// 4. bounceFromEdges: If `true` the particles will bounce back when they hit the (specified) edges, or else thay will continue their path from the opposite edges/walls. Defaults to `true`.
+// 5. shape: You can specify what shape of the particles. Currently you can specify any one from the following, i.e. "circle", "square", "hexagon". If not specified then it defaults to "circle"
+// 6. radius: You can specity the radius of the particles, defaults to "5" if not specified.
+// 7. randomRadius: If `true` then the particles will have random radius, else defaults to `false`
+// 8. maxRadius: You can specify the minimum radius of the particles, else defaults to "2"
+// 9. minRadius: You can specify the maximum radius of the particles, else defaults to "5"
+// 10. maxVelocity: You can specify the maximum velocity of the particles, else defaults to "8"
+
+// Okay that's it, that's all the options I could add. Play around and see what fits for you.
+// Also please STAR this project if you think it's interesting, you can even fork it and make/add something new.
+
+console.clear();
+
+const cards = Array.from(document.querySelectorAll(".card"));
+const cardOptions = [
+	{
+		imageURL: {
+			default: "https://source.unsplash.com/8xznAGy4HcY/400x600",
+			hovered: "https://source.unsplash.com/Xc6gtOwSMSA/400x600"
+		},
+		totalParticles: 1500,
+		mouseRange: 80,
+		particlesConfig: {
+			jumpToRandomPosition: false,
+			fill: true,
+			randomRadius: true,
+			minRadius: 1,
+			maxRadius: 2
+		}
+	},
+	{
+		imageURL: {
+			default: "https://source.unsplash.com/wQImoykAwGs/400x600",
+			hovered: "https://source.unsplash.com/QsWG0kjPQRY/400x600"
+		},
+		totalParticles: 2500,
+		particlesConfig: {
+			jumpToRandomPosition: true,
+			fill: true,
+			shape: "square",
+			radius: 2
+		}
+	},
+	{
+		imageURL: {
+			default: "https://source.unsplash.com/sLAk1guBG90/400x600",
+			hovered: "https://source.unsplash.com/xe-ss5Tg2mo/400x600"
+		},
+		totalParticles: 2500,
+		particlesConfig: {
+			jumpToRandomPosition: false,
+			bounceFromEdges: false,
+			fill: false,
+			shape: "hexagon",
+			radius: 1
+		}
+	}
+];
+
+const imageURLS = cardOptions
+	.map((option) => Object.values(option.imageURL))
+	.flat();
+
+// --------------------- CLASSES ----------------------------
+
+class App {
+	init() {
+		// after all images are loaded remove loader
+		// (this is not the best way to do so but it gets the job done)
+		loadImages(imageURLS, (images) => {
+			// this array holds the images in a sub array
+			// i.e [img, img, img, img, img, img] ==> [[img, img], [img, img], [img, img]]
+			const splitedImagesArray = splitArray(images, 2);
+
+			cards.forEach((card, index) => {
+				new Canvas({
+					parent: card.querySelector(".card__image--inner"),
+					dimensions: {
+						width: card.getBoundingClientRect().width,
+						height: card.getBoundingClientRect().height
+					},
+					...cardOptions[index],
+					images: {
+						default: splitedImagesArray[index][0],
+						hovered: splitedImagesArray[index][1]
+					}
+				});
+			});
+
+			// hide the loading wrapper
+			document.querySelector(".loading__wrapper").classList.add("hide");
+
+			// let the gsap animation begin
+			gsap
+				.timeline({
+					delay: 0.8,
+					defaults: {
+						duration: 1.5,
+						stagger: 0.1,
+						ease: "expo.out"
+					}
+				})
+				.fromTo(
+					cards.map((card) => card.querySelector(".card__image")),
+					{
+						translateY: "-100%"
+					},
+					{
+						translateY: "0%"
+					}
+				)
+				.fromTo(
+					cards.map((card) => card.querySelector(".card__image--inner")),
+					{
+						translateY: "100%"
+					},
+					{
+						translateY: "0%"
+					},
+					0
+				)
+				.fromTo(
+					cards.map((card) => card.querySelector(".card__text--inner")),
+					{
+						translateY: "100%"
+					},
+					{
+						duration: 1.2,
+						translateY: "0%"
+					},
+					0.4
+				);
+		});
+	}
+}
+
+class Canvas {
+	constructor(options = {}) {
+		// the parent where the canvas will be appended
+		this.parent = options.parent;
+
+		// canvas dimensions
+		this.dimensions = options.dimensions;
+
+		// all imageURL's, images(optional) & imagesData that are required
+		this.imageURL = options.imageURL || {};
+		this.images = options.images || {};
+		this.imagesData = options.imagesData || {
+			default: null,
+			hovered: null
+		};
+		this.currentImageData = null;
+
+		// Array where all the particles will be stored
+		this.particles = null;
+		this.totalParticles = options.totalParticles || 400;
+
+		// boolean which changes to 'true' when hovered, oe else false
+		this.hovered = false;
+
+		// particles configs
+		this.particlesConfig = options.particlesConfig;
+
+		// mouse range and mouse particle instance
+		this.mouseRange = options.mouseRange || null;
+		this.mouse = null;
+
+		// initialize the canvas
+		this.init();
+	}
+
+	init() {
+		// create the canvas element
+		this.canvas = document.createElement("canvas");
+		// get the canvas context
+		this.ctx = this.canvas.getContext("2d");
+		// set the canvas dimensions
+		this.canvas.width = this.dimensions.width;
+		this.canvas.height = this.dimensions.height;
+
+		const initialize = () => {
+			// this variable holds the current image data
+			this.currentImageData = this.imagesData.default;
+
+			// add many Particle instances
+			this.addParticles(this.totalParticles);
+			// start rendering the canvas
+			this.startRender();
+			// initialize all the canvas events
+			this.initEvents();
+			// append the canvas on the parent
+			this.parent.appendChild(this.canvas);
+		};
+
+		// what happens here is if the user/dev provides the loaded image directly then use the images provided by the use directly
+		// and if the user provides the URL for the image then load the images from the URL and initialize
+		if (
+			!this.images.hasOwnProperty("default") &&
+			!this.images.hasOwnProperty("hovered")
+		) {
+			// load all the images that are required and after all the images are loaded the callback is called.
+			loadImages([this.imageURL.default, this.imageURL.hovered], (images) => {
+				// set the image data so that they can be accessed later when needed
+				this.imagesData.default = returnImageData(images[0], this.dimensions);
+				this.imagesData.hovered = returnImageData(images[1], this.dimensions);
+				initialize();
+			});
+		} else {
+			// set the image data so that they can be accessed later when needed
+			this.imagesData.default = returnImageData(
+				this.images.default,
+				this.dimensions
+			);
+			this.imagesData.hovered = returnImageData(
+				this.images.hovered,
+				this.dimensions
+			);
+			initialize();
+		}
+
+		// init mouse particle
+		if (this.mouseRange != null) {
+			this.mouse = new Particle({
+				ctx: this.ctx,
+				position: {
+					x: 0,
+					y: 0
+				},
+				radius: this.mouseRange,
+				color: "#000",
+				avoisEdges: true,
+				shape: "circle"
+			});
+		}
+	}
+
+	initEvents() {
+		const onMouseEnter = () => {
+			this.hovered = true;
+			this.currentImageData = this.imagesData.hovered;
+		};
+		const onMouseLeave = () => {
+			this.hovered = false;
+			this.currentImageData = this.imagesData.default;
+		};
+		const onMouseMove = (e) => {
+			if (this.mouse != null && this.hovered) {
+				this.mouse.position.x = e.offsetX;
+				this.mouse.position.y = e.offsetY;
+			}
+		};
+
+		this.canvas.addEventListener("mouseenter", onMouseEnter);
+		this.canvas.addEventListener("mouseleave", onMouseLeave);
+		this.canvas.addEventListener("mousemove", onMouseMove);
+	}
+
+	addParticles(n) {
+		this.particles = new Particles({
+			ctx: this.ctx,
+			totalParticles: n,
+			maxBounds: { width: this.dimensions.width, height: this.dimensions.height },
+			imageData: this.currentImageData,
+			particlesConfig: this.particlesConfig
+		});
+	}
+
+	updateParticleColor(imageData, particle) {
+		const color = returnPixelColor(imageData, Math.floor(this.dimensions.width), {
+			x: Math.floor(particle.position.x),
+			y: Math.floor(particle.position.y)
+		});
+		particle.updateColor(color);
+	}
+
+	startRender() {
+		requestAnimationFrame(() => this.render());
+	}
+
+	render() {
+		// this.ctx.clearRect(0, 0, this.dimensions.width, this.dimensions.height);
+
+		// loop through all the particles
+		this.particles.particles.forEach((particle) => {
+			if (this.mouseRange != null) {
+				// if the mouse range is not null then calculate the dist between mouse particle & all the other particles
+				const d = dist(this.mouse.position, particle.position);
+				// if the dist between the particles is less than the summation of the radius of the mouse particle & the other particle, that means they are intersecting
+				if (d < this.mouse.radius + particle.radius && this.hovered) {
+					// update the color of the intersecting particle only if mouse is hovered
+					this.updateParticleColor(this.imagesData.hovered, particle);
+				}
+				// else update every other particle too
+				else this.updateParticleColor(this.imagesData.default, particle);
+			}
+			// if the mouserange is null then update all particles at once
+			else this.updateParticleColor(this.currentImageData, particle);
+		});
+
+		this.particles.update();
+
+		requestAnimationFrame(() => this.render());
+	}
+}
+
+class Particles {
+	constructor(options = {}) {
+		this.ctx = options.ctx; // canvas context
+		this.totalParticles = options.totalParticles;
+		this.maxBounds = options.maxBounds;
+		this.imageData = options.imageData;
+
+		// array that holds all the particles
+		this.particles = [];
+
+		// all the particles config
+		this.particlesConfig = {
+			jumpToRandomPosition: options.particlesConfig.hasOwnProperty(
+				"jumpToRandomPosition"
+			)
+				? options.particlesConfig.jumpToRandomPosition
+				: false,
+			growAndShrink: options.particlesConfig.hasOwnProperty("growAndShrink")
+				? options.particlesConfig.growAndShrink
+				: false,
+			fill: options.particlesConfig.hasOwnProperty("fill")
+				? options.particlesConfig.fill
+				: true,
+			bounceFromEdges: options.particlesConfig.hasOwnProperty("bounceFromEdges")
+				? options.particlesConfig.bounceFromEdges
+				: true,
+			shape: options.particlesConfig.hasOwnProperty("shape")
+				? options.particlesConfig.shape
+				: "circle",
+			radius: options.particlesConfig.hasOwnProperty("radius")
+				? options.particlesConfig.radius
+				: 5,
+			randomRadius: options.particlesConfig.hasOwnProperty("randomRadius")
+				? options.particlesConfig.randomRadius
+				: false,
+			maxRadius: options.particlesConfig.hasOwnProperty("maxRadius")
+				? options.particlesConfig.maxRadius
+				: 5,
+			minRadius: options.particlesConfig.hasOwnProperty("minRadius")
+				? options.particlesConfig.minRadius
+				: 2,
+			maxVelocity: options.particlesConfig.hasOwnProperty("maxVelocity")
+				? options.particlesConfig.maxVelocity
+				: 8
+		};
+
+		this.init();
+	}
+
+	init() {
+		const ctx = this.ctx;
+		const color = "transparent";
+		for (let i = 0; i < this.totalParticles; i++) {
+			const radius = this.particlesConfig.randomRadius
+				? randomIntegerFromRange(
+						this.particlesConfig.minRadius,
+						this.particlesConfig.maxRadius
+				  )
+				: this.particlesConfig.radius;
+			const position = {
+				x: randomIntegerFromRange(radius, this.maxBounds.width - radius),
+				y: randomIntegerFromRange(radius, this.maxBounds.height - radius)
+			};
+			this.particles.push(
+				new Particle({
+					ctx,
+					position,
+					radius,
+					color,
+					imageData: this.imageData,
+					maxVelocity: 8,
+					bounceFromEdges: this.particlesConfig.bounceFromEdges,
+					shape: this.particlesConfig.shape,
+					edges: { width: this.maxBounds.width, height: this.maxBounds.height }
+				})
+			);
+		}
+	}
+
+	update() {
+		// loop through particles, draw & update each particle
+		this.particles.forEach((particle) => {
+			particle.draw();
+			if (this.particlesConfig.fill) particle.fillShape();
+			else particle.strokeShape();
+
+			particle.update();
+
+			if (this.particlesConfig.growAndShrink)
+				particle.growAndShrink(particle.minRadius * 0.65);
+
+			if (!this.particlesConfig.jumpToRandomPosition) particle.updatePosition();
+			else
+				particle.jumpToRandomPosition({
+					width: this.maxBounds.width,
+					height: this.maxBounds.height
+				});
+		});
+	}
+}
+
+class Particle {
+	constructor(options = {}) {
+		this.ctx = options.ctx;
+
+		this.position = options.position || {
+			x: 0,
+			y: 0
+		};
+		this.maxVelocity = options.maxVelocity || 5;
+		this.velocity = options.velocity || {
+			x: (0.5 - Math.random()) * this.maxVelocity,
+			y: (0.5 - Math.random()) * this.maxVelocity
+		};
+
+		this.radius = options.radius;
+		this.minRadius = this.radius;
+
+		this.color = options.color;
+
+		this.imageData = options.imageData;
+
+		this.rotation = 0;
+		this.rotationIncrement = randomIntegerFromRange(2, 5);
+
+		this.stroke = false;
+		this.fill = true;
+
+		this.shape = options.shape || "circle";
+
+		this.edges = options.edges || null;
+		this.bounceFromEdges = options.bounceFromEdges;
+		this.avoidEdges = options.avoidEdges || false;
+
+		this.tick = 0;
+		this.tickIncrement = 0.02 + Math.random() * 0.03;
+	}
+
+	draw() {
+		this.ctx.beginPath();
+		this.ctx.save();
+		this.ctx.translate(this.position.x, this.position.y);
+		this.ctx.rotate((Math.PI / 180) * this.rotation);
+		this.drawShape(this.shape);
+		this.ctx.restore();
+		this.ctx.closePath();
+	}
+
+	fillShape() {
+		this.ctx.fillStyle = this.color;
+		this.ctx.fill();
+	}
+
+	strokeShape() {
+		this.ctx.strokeStyle = this.color;
+		this.ctx.stroke();
+	}
+
+	drawShape(shape) {
+		if (shape === "square")
+			this.ctx.rect(-this.radius / 2, -this.radius / 2, this.radius, this.radius);
+		else if (shape === "circle") this.ctx.arc(0, 0, this.radius, 0, Math.PI * 2);
+		else if (shape === "hexagon") {
+			this.ctx.moveTo(this.radius * Math.cos(0), this.radius * Math.sin(0));
+			for (let side = 0; side < 7; side++) {
+				this.ctx.lineTo(
+					this.radius * Math.cos((side * 2 * Math.PI) / 6),
+					this.radius * Math.sin((side * 2 * Math.PI) / 6)
+				);
+			}
+		}
+	}
+
+	update() {
+		if (this.bounceFromEdges) this.changeVelocityOnBounce(this.edges);
+		else this.continueFromEdge();
+
+		this.rotation += this.rotationIncrement;
+		this.tick += this.tickIncrement;
+	}
+
+	updatePosition() {
+		this.position.x += this.velocity.x;
+		this.position.y += this.velocity.y;
+	}
+
+	jumpToRandomPosition(bounds) {
+		this.position.x = Math.random() * bounds.width;
+		this.position.y = Math.random() * bounds.height;
+	}
+
+	growAndShrink(max) {
+		this.radius = this.minRadius + Math.abs(Math.sin(this.tick)) * max;
+	}
+
+	updateColor(color) {
+		this.color = color;
+	}
+
+	continueFromEdge() {
+		if (!this.avoidEdges) {
+			if (this.position.x > this.edges.width) this.position.x = 0;
+			else if (this.position.x < 0) this.position.x = this.edges.width;
+			if (this.position.y > this.edges.height) this.position.y = 0;
+			else if (this.position.y < 0) this.position.y = this.edges.height;
+		}
+	}
+
+	changeVelocityOnBounce() {
+		if (!this.avoidEdges) {
+			if (
+				this.position.x + this.radius > this.edges.width ||
+				this.position.x - this.radius < 0
+			)
+				this.velocity.x *= -1;
+			if (
+				this.position.y + this.radius > this.edges.height ||
+				this.position.y - this.radius < 0
+			)
+				this.velocity.y *= -1;
+		}
+	}
+}
+
+// ---------------- UTILITY FUNCTIONS ------------------------
+
+function randomIntegerFromRange(min, max) {
+	return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+function dist(a, b) {
+	return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
+}
+
+function splitArray(array, n) {
+	let [...arr] = array;
+	var res = [];
+	while (arr.length) {
+		res.push(arr.splice(0, n));
+	}
+	return res;
+}
+
+function returnPixelColor(imageData, width, position) {
+	const index = (position.x + position.y * width) * 4;
+	let pixel = {
+		r: imageData.data[index + 0],
+		g: imageData.data[index + 1],
+		b: imageData.data[index + 2]
+	};
+	return `rgb(${pixel.r}, ${pixel.g}, ${pixel.b})`;
+}
+
+function toDataURL(url) {
+	return new Promise((resolve, reject) => {
+		var xhr = new XMLHttpRequest();
+		xhr.onload = function () {
+			var reader = new FileReader();
+			reader.onloadend = function () {
+				resolve(reader.result);
+			};
+			reader.readAsDataURL(xhr.response);
+		};
+		xhr.onerror = reject;
+		xhr.open("GET", url);
+		xhr.responseType = "blob";
+		xhr.send();
+	});
+}
+
+function returnImageData(image, dimensions) {
+	const imageCanvas = document.createElement("canvas");
+	const imageCanvasCtx = imageCanvas.getContext("2d");
+	imageCanvas.width = dimensions.width;
+	imageCanvas.height = dimensions.height;
+	imageCanvasCtx.drawImage(image, 0, 0, imageCanvas.width, imageCanvas.height);
+	return imageCanvasCtx.getImageData(
+		0,
+		0,
+		imageCanvas.width,
+		imageCanvas.height
+	);
+}
+
+function loadImage(imageURL, callback) {
+	toDataURL(imageURL).then((data) => {
+		const IMAGE = new Image();
+		IMAGE.src = data;
+		IMAGE.onload = function () {
+			callback(IMAGE);
+		};
+	});
+}
+
+function loadImages(imagesURLS, callback) {
+	const totalImageToLoad = imagesURLS.length;
+	let curentImageIndex = 0;
+	let imagesArray = [];
+
+	const load = () => {
+		loadImage(imagesURLS[curentImageIndex], (image) => {
+			imagesArray.push(image);
+			curentImageIndex++;
+			if (curentImageIndex === totalImageToLoad) callback(imagesArray);
+			else load();
+		});
+	};
+
+	load();
+}
+
+// initiate the App instance
+const app = new App();
+app.init();
diff --git a/canvas-image-hover-interaction/src/style.scss b/canvas-image-hover-interaction/src/style.scss
new file mode 100644
index 0000000..f864d63
--- /dev/null
+++ b/canvas-image-hover-interaction/src/style.scss
@@ -0,0 +1,127 @@
+@import url("https://fonts.googleapis.com/css2?family=Red+Rose:wght@400;700&display=swap");
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	width: 100%;
+	height: 100vh;
+	display: grid;
+	place-items: center;
+	background: #161616;
+}
+
+main {
+	width: 100%;
+	height: 100%;
+	display: grid;
+	place-items: center;
+	padding: 4rem;
+}
+
+.cards {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	.card {
+		position: relative;
+		width: 260px;
+		height: 360px;
+		margin: 2rem 4rem;
+		&__image {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+			&--inner {
+				width: 100%;
+				height: 100%;
+				overflow: hidden;
+				canvas {
+					transform: scale(1.02);
+				}
+			}
+		}
+		&__text {
+			position: absolute;
+			left: 0;
+			bottom: 25%;
+			transform: translateX(-50%);
+			pointer-events: none;
+			user-select: none;
+			overflow: hidden;
+			&--inner {
+				display: inline-block;
+				color: #fff;
+				font-size: 3rem;
+				font-family: "Red Rose", Roboto;
+				font-weight: 700;
+			}
+		}
+	}
+}
+
+.loading__wrapper {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	background: #000;
+	z-index: 200;
+	transition: opacity 500ms ease-in;
+	.loader__text {
+		color: #fff;
+		font-family: "Red Rose", Roboto;
+		font-weight: 400;
+		margin-bottom: 1.4rem;
+	}
+	&.hide {
+		pointer-events: none;
+		user-select: none;
+		opacity: 0;
+	}
+}
+
+.support {
+	position: fixed;
+	right: 10px;
+	bottom: 10px;
+	padding: 10px;
+	display: flex;
+	a {
+		margin: 0 10px;
+		color: #fff;
+		font-size: 1.8rem;
+		backface-visibility: hidden;
+		transition: all 150ms ease;
+		&:hover {
+			transform: scale(1.1);
+		}
+	}
+}
+
+
+@keyframes octocat-wave {
+	0%,
+	100% {
+		transform: rotate(0);
+	}
+	20%,
+	60% {
+		transform: rotate(-20deg);
+	}
+	40%,
+	80% {
+		transform: rotate(10deg);
+	}
+}
diff --git a/card-hover-interactions/README.markdown b/card-hover-interactions/README.markdown
new file mode 100644
index 0000000..0528f0a
--- /dev/null
+++ b/card-hover-interactions/README.markdown
@@ -0,0 +1,4 @@
+# Card Hover Interactions
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/hexagoncircle/pen/XWbWKwL](https://codepen.io/hexagoncircle/pen/XWbWKwL).
+
+ Hacking together a solution to show part of an element in a card as a default state, lining up the element headline across each card and then animating the element to the center of its parent element
\ No newline at end of file
diff --git a/card-hover-interactions/dist/index.html b/card-hover-interactions/dist/index.html
new file mode 100644
index 0000000..089fe43
--- /dev/null
+++ b/card-hover-interactions/dist/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Card Hover Interactions</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main class="page-content">
+  <div class="card">
+    <div class="content">
+      <h2 class="title">Mountain View</h2>
+      <p class="copy">Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains</p>
+      <button class="btn">View Trips</button>
+    </div>
+  </div>
+  <div class="card">
+    <div class="content">
+      <h2 class="title">To The Beach</h2>
+      <p class="copy">Plan your next beach trip with these fabulous destinations</p>
+      <button class="btn">View Trips</button>
+    </div>
+  </div>
+  <div class="card">
+    <div class="content">
+      <h2 class="title">Desert Destinations</h2>
+      <p class="copy">It's the desert you've always dreamed of</p>
+      <button class="btn">Book Now</button>
+    </div>
+  </div>
+  <div class="card">
+    <div class="content">
+      <h2 class="title">Explore The Galaxy</h2>
+      <p class="copy">Seriously, straight up, just blast off into outer space today</p>
+      <button class="btn">Book Now</button>
+    </div>
+  </div>
+</main>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/card-hover-interactions/dist/style.css b/card-hover-interactions/dist/style.css
new file mode 100644
index 0000000..9212a2d
--- /dev/null
+++ b/card-hover-interactions/dist/style.css
@@ -0,0 +1,215 @@
+@import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");
+:root {
+  --d: 700ms;
+  --e: cubic-bezier(0.19, 1, 0.22, 1);
+  --font-sans: 'Rubik', sans-serif;
+  --font-serif: 'Cardo', serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  display: grid;
+  place-items: center;
+}
+
+.page-content {
+  display: grid;
+  grid-gap: 1rem;
+  padding: 1rem;
+  max-width: 1024px;
+  margin: 0 auto;
+  font-family: var(--font-sans);
+}
+@media (min-width: 600px) {
+  .page-content {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 800px) {
+  .page-content {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.card {
+  position: relative;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: end;
+          align-items: flex-end;
+  overflow: hidden;
+  padding: 1rem;
+  width: 100%;
+  text-align: center;
+  color: whitesmoke;
+  background-color: whitesmoke;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
+}
+@media (min-width: 600px) {
+  .card {
+    height: 350px;
+  }
+}
+.card:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 110%;
+  background-size: cover;
+  background-position: 0 0;
+  -webkit-transition: -webkit-transform calc(var(--d) * 1.5) var(--e);
+  transition: -webkit-transform calc(var(--d) * 1.5) var(--e);
+  transition: transform calc(var(--d) * 1.5) var(--e);
+  transition: transform calc(var(--d) * 1.5) var(--e), -webkit-transform calc(var(--d) * 1.5) var(--e);
+  pointer-events: none;
+}
+.card:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 200%;
+  pointer-events: none;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(11.7%, rgba(0, 0, 0, 0.009)), color-stop(22.1%, rgba(0, 0, 0, 0.034)), color-stop(31.2%, rgba(0, 0, 0, 0.072)), color-stop(39.4%, rgba(0, 0, 0, 0.123)), color-stop(46.6%, rgba(0, 0, 0, 0.182)), color-stop(53.1%, rgba(0, 0, 0, 0.249)), color-stop(58.9%, rgba(0, 0, 0, 0.32)), color-stop(64.3%, rgba(0, 0, 0, 0.394)), color-stop(69.3%, rgba(0, 0, 0, 0.468)), color-stop(74.1%, rgba(0, 0, 0, 0.54)), color-stop(78.8%, rgba(0, 0, 0, 0.607)), color-stop(83.6%, rgba(0, 0, 0, 0.668)), color-stop(88.7%, rgba(0, 0, 0, 0.721)), color-stop(94.1%, rgba(0, 0, 0, 0.762)), to(rgba(0, 0, 0, 0.79)));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  -webkit-transition: -webkit-transform calc(var(--d) * 2) var(--e);
+  transition: -webkit-transform calc(var(--d) * 2) var(--e);
+  transition: transform calc(var(--d) * 2) var(--e);
+  transition: transform calc(var(--d) * 2) var(--e), -webkit-transform calc(var(--d) * 2) var(--e);
+}
+.card:nth-child(1):before {
+  background-image: url(https://images.unsplash.com/photo-1517021897933-0e0319cfbc28?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
+}
+.card:nth-child(2):before {
+  background-image: url(https://images.unsplash.com/photo-1533903345306-15d1c30952de?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
+}
+.card:nth-child(3):before {
+  background-image: url(https://images.unsplash.com/photo-1545243424-0ce743321e11?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
+}
+.card:nth-child(4):before {
+  background-image: url(https://images.unsplash.com/photo-1531306728370-e2ebd9d7bb99?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
+}
+
+.content {
+  position: relative;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  -webkit-box-align: center;
+          align-items: center;
+  width: 100%;
+  padding: 1rem;
+  -webkit-transition: -webkit-transform var(--d) var(--e);
+  transition: -webkit-transform var(--d) var(--e);
+  transition: transform var(--d) var(--e);
+  transition: transform var(--d) var(--e), -webkit-transform var(--d) var(--e);
+  z-index: 1;
+}
+.content > * + * {
+  margin-top: 1rem;
+}
+
+.title {
+  font-size: 1.3rem;
+  font-weight: bold;
+  line-height: 1.2;
+}
+
+.copy {
+  font-family: var(--font-serif);
+  font-size: 1.125rem;
+  font-style: italic;
+  line-height: 1.35;
+}
+
+.btn {
+  cursor: pointer;
+  margin-top: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.65rem;
+  font-weight: bold;
+  letter-spacing: 0.025rem;
+  text-transform: uppercase;
+  color: white;
+  background-color: black;
+  border: none;
+}
+.btn:hover {
+  background-color: #0d0d0d;
+}
+.btn:focus {
+  outline: 1px dashed yellow;
+  outline-offset: 3px;
+}
+
+@media (hover: hover) and (min-width: 600px) {
+  .card:after {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+
+  .content {
+    -webkit-transform: translateY(calc(100% - 4.5rem));
+            transform: translateY(calc(100% - 4.5rem));
+  }
+  .content > *:not(.title) {
+    opacity: 0;
+    -webkit-transform: translateY(1rem);
+            transform: translateY(1rem);
+    -webkit-transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
+    transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
+    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
+    transition: transform var(--d) var(--e), opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
+  }
+
+  .card:hover,
+  .card:focus-within {
+    -webkit-box-align: center;
+            align-items: center;
+  }
+  .card:hover:before,
+  .card:focus-within:before {
+    -webkit-transform: translateY(-4%);
+            transform: translateY(-4%);
+  }
+  .card:hover:after,
+  .card:focus-within:after {
+    -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+  }
+  .card:hover .content,
+  .card:focus-within .content {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+  .card:hover .content > *:not(.title),
+  .card:focus-within .content > *:not(.title) {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    -webkit-transition-delay: calc(var(--d) / 8);
+            transition-delay: calc(var(--d) / 8);
+  }
+
+  .card:focus-within:before, .card:focus-within:after,
+  .card:focus-within .content,
+  .card:focus-within .content > *:not(.title) {
+    -webkit-transition-duration: 0s;
+            transition-duration: 0s;
+  }
+}
\ No newline at end of file
diff --git a/card-hover-interactions/license.txt b/card-hover-interactions/license.txt
new file mode 100644
index 0000000..031e537
--- /dev/null
+++ b/card-hover-interactions/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Ryan Mulligan (https://codepen.io/hexagoncircle/pen/XWbWKwL)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/card-hover-interactions/src/index.pug b/card-hover-interactions/src/index.pug
new file mode 100644
index 0000000..b92abf1
--- /dev/null
+++ b/card-hover-interactions/src/index.pug
@@ -0,0 +1,13 @@
+- var cards = [{ title: 'Mountain View', copy: 'Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains', button: 'View Trips' }, { title: 'To The Beach', copy: 'Plan your next beach trip with these fabulous destinations', button: 'View Trips' }, { title: 'Desert Destinations', copy: 'It\'s the desert you\'ve always dreamed of', button: 'Book Now' }, { title: 'Explore The Galaxy', copy: 'Seriously, straight up, just blast off into outer space today', button: 'Book Now' }]
+
+
+mixin card(title, copy, button)
+  .card
+    .content
+      h2.title= title
+      p.copy= copy
+      button.btn= button
+
+main.page-content
+  each card in cards
+    +card(card.title, card.copy, card.button)
\ No newline at end of file
diff --git a/card-hover-interactions/src/style.scss b/card-hover-interactions/src/style.scss
new file mode 100644
index 0000000..0368cdc
--- /dev/null
+++ b/card-hover-interactions/src/style.scss
@@ -0,0 +1,214 @@
+@import url('https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap');
+
+$imageIds: '1517021897933-0e0319cfbc28', '1533903345306-15d1c30952de', '1545243424-0ce743321e11', '1531306728370-e2ebd9d7bb99';
+
+$bp-md: 600px;
+$bp-lg: 800px;
+
+:root {
+  --d: 700ms;
+  --e: cubic-bezier(0.19, 1, 0.22, 1);
+  --font-sans: 'Rubik', sans-serif;
+  --font-serif: 'Cardo', serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  display: grid;
+  place-items: center;
+}
+
+.page-content {
+  display: grid;
+  grid-gap: 1rem;
+  padding: 1rem;
+  max-width: 1024px;
+  margin: 0 auto;
+  font-family: var(--font-sans);
+  
+  @media (min-width: $bp-md) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  @media (min-width: $bp-lg) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+
+
+.card {  
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  overflow: hidden;
+  padding: 1rem;
+  width: 100%;
+  text-align: center;
+  color: whitesmoke;
+  background-color: whitesmoke;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.1), 
+    0 2px 2px rgba(0,0,0,0.1), 
+    0 4px 4px rgba(0,0,0,0.1), 
+    0 8px 8px rgba(0,0,0,0.1),
+    0 16px 16px rgba(0,0,0,0.1);
+  
+  @media (min-width: $bp-md) {
+    height: 350px;
+  }
+  
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 110%;
+    background-size: cover;
+    background-position: 0 0;
+    transition: transform calc(var(--d) * 1.5) var(--e);
+    pointer-events: none;
+  }
+  
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 200%;
+    pointer-events: none;
+    background-image: linear-gradient(
+      to bottom,
+      hsla(0, 0%, 0%, 0) 0%,
+      hsla(0, 0%, 0%, 0.009) 11.7%,
+      hsla(0, 0%, 0%, 0.034) 22.1%,
+      hsla(0, 0%, 0%, 0.072) 31.2%,
+      hsla(0, 0%, 0%, 0.123) 39.4%,
+      hsla(0, 0%, 0%, 0.182) 46.6%,
+      hsla(0, 0%, 0%, 0.249) 53.1%,
+      hsla(0, 0%, 0%, 0.320) 58.9%,
+      hsla(0, 0%, 0%, 0.394) 64.3%,
+      hsla(0, 0%, 0%, 0.468) 69.3%,
+      hsla(0, 0%, 0%, 0.540) 74.1%,
+      hsla(0, 0%, 0%, 0.607) 78.8%,
+      hsla(0, 0%, 0%, 0.668) 83.6%,
+      hsla(0, 0%, 0%, 0.721) 88.7%,
+      hsla(0, 0%, 0%, 0.762) 94.1%,
+      hsla(0, 0%, 0%, 0.790) 100%
+    );
+    transform: translateY(-50%);
+    transition: transform calc(var(--d) * 2) var(--e);
+  }
+  
+  @each $id in $imageIds {
+    $i: index($imageIds, $id);
+    
+    &:nth-child(#{$i}):before {
+      background-image: url(https://images.unsplash.com/photo-#{$id}?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
+    }
+  }
+}
+
+.content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+  transition: transform var(--d) var(--e);
+  z-index: 1;
+  
+  > * + * {
+    margin-top: 1rem;
+  }
+}
+
+.title {
+  font-size: 1.3rem;
+  font-weight: bold;
+  line-height: 1.2;
+}
+
+.copy {
+  font-family: var(--font-serif);
+  font-size: 1.125rem;
+  font-style: italic;
+  line-height: 1.35;
+}
+
+.btn {
+  cursor: pointer;
+  margin-top: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.65rem;
+  font-weight: bold;
+  letter-spacing: 0.025rem;
+  text-transform: uppercase;
+  color: white;
+  background-color: black;
+  border: none;
+  
+  &:hover {
+    background-color: lighten(black, 5%);
+  }
+  
+  &:focus {
+    outline: 1px dashed yellow;
+    outline-offset: 3px;
+  }
+}
+
+@media (hover: hover) and (min-width: $bp-md) {
+  .card:after {
+    transform: translateY(0);
+  }
+  
+  .content {
+    transform: translateY(calc(100% - 4.5rem));
+    
+    > *:not(.title) {
+      opacity: 0;
+      transform: translateY(1rem);
+      transition:
+        transform var(--d) var(--e),
+        opacity var(--d) var(--e);
+    }
+  }
+  
+  .card:hover,
+  .card:focus-within {
+    align-items: center;
+
+    &:before { transform: translateY(-4%); }
+    &:after { transform: translateY(-50%); }
+
+    .content {
+      transform: translateY(0);
+
+      > *:not(.title) {
+        opacity: 1;
+        transform: translateY(0);
+        transition-delay: calc(var(--d) / 8);
+      }
+    }
+  }
+  
+  .card:focus-within {
+    &:before,
+    &:after,
+    .content,
+    .content > *:not(.title) {
+      transition-duration: 0s;
+    }
+  }
+}
\ No newline at end of file
diff --git a/card-interactions-with-gsap/README.markdown b/card-interactions-with-gsap/README.markdown
new file mode 100644
index 0000000..fa001a0
--- /dev/null
+++ b/card-interactions-with-gsap/README.markdown
@@ -0,0 +1,9 @@
+# Card Interactions with GSAP
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/dilums/pen/VwbBGVr](https://codepen.io/dilums/pen/VwbBGVr).
+
+Card Interactions with GSAP  
+
+[You can use Codepen live link to try it on mobile](https://codepen.io/dilums/live/VwbBGVr)  
+
+[Inspiration : Darkmode card interactions by  Sam Atmore](https://dribbble.com/shots/11109492-Darkmode-card-interactions-using-principleapp)
diff --git a/card-interactions-with-gsap/dist/index.html b/card-interactions-with-gsap/dist/index.html
new file mode 100644
index 0000000..d67cea3
--- /dev/null
+++ b/card-interactions-with-gsap/dist/index.html
@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Card Interactions with GSAP</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="w-full h-screen overflow-hidden flex items-center justify-center">
+  <div class="mock-window">
+    <div class="page overflow-hidden">
+      <div class="device-top hidden sm:block"></div>
+      <div class="nav overflow-hidden mt-6 sm:mt-0">
+        <div class="title-sets">
+          <div class="title-set-1">
+            <div class="titles">
+              <div class="uppercase px-6 text-secondary">
+                Sunday, September 7
+              </div>
+              <div class="px-6 font-bold" style="font-size: 30px">
+                For You
+              </div>
+            </div>
+            <div class="tabs flex px-6 justify-between">
+              <button class="tab-selected px-5 rounded-full">Nature</button>
+              <button class="px-5 rounded-full text-secondary">City</button>
+              <button class="px-5 rounded-full text-secondary">
+                People
+              </button>
+              <button class="px-5 rounded-full text-secondary">
+                Animals
+              </button>
+            </div>
+          </div>
+          <div class="title-set-2">
+            <div class="titles flex items-center justify-between">
+              <div class="">
+                <div class="uppercase px-6 text-secondary">Collections</div>
+                <div class="px-6 font-bold" style="font-size: 30px">
+                  Plants
+                </div>
+              </div>
+              <div class="pr-6 h-full flex items-center">
+                <div class="rounded-full p-2 flex items-center justify-center" style="
+                        height: 50px;
+                        width: 50px;
+                        background-color: #424446;
+                      ">
+                  <img src="https://assets.codepen.io/3685267/card-interactions-gsap-list.svg" alt="" class="w-full h-full" />
+                </div>
+                <div class="
+                        rounded-full
+                        ml-4
+                        p-2
+                        flex
+                        items-center
+                        justify-center
+                      " style="
+                        height: 50px;
+                        width: 50px;
+                        background-color: #1e1e20;
+                      ">
+                  <img src="https://assets.codepen.io/3685267/card-interactions-gsap-grid.svg" alt="" class="w-full h-full" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-6 section-1 overflow-hidden" style="height: 414px" id="section-1">
+        <div class="card-set relative" style="border-radius: 24px; height: 366px; width: 366px">
+          <div class="card card-3 absolute inset-0 flex items-end">
+            <div class="p-6">
+              <div class="flex items-center user-details">
+                <div class="avatar-border rounded-full" style="width: 64px; height: 64px">
+                  <img src="https://assets.codepen.io/3685267/card-interactions-gsap-avatar3.jpg" alt="" class="w-full rounded-full" />
+                </div>
+                <div class="ml-3">
+                  <div class="font-bold" style="font-size: 21px">
+                    Emma Wallace
+                  </div>
+                  <div class="">13 Photos</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card card-2 absolute inset-0 flex items-end">
+            <div class="p-6">
+              <div class="flex items-center user-details">
+                <div class="avatar-border rounded-full" style="width: 64px; height: 64px">
+                  <img src="https://assets.codepen.io/3685267/card-interactions-gsap-avatar2.jpg" alt="" class="w-full rounded-full" />
+                </div>
+                <div class="ml-3">
+                  <div class="font-bold" style="font-size: 21px">
+                    Harry Sans
+                  </div>
+                  <div class="">16 Photos</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card card-1 absolute inset-0 flex items-end">
+            <div class="p-6">
+              <div class="flex items-center user-details">
+                <div class="avatar-border rounded-full" style="width: 64px; height: 64px">
+                  <img src="https://assets.codepen.io/3685267/card-interactions-gsap-avatar1.jpg" alt="" class="w-full rounded-full" />
+                </div>
+                <div class="ml-3">
+                  <div class="font-bold" style="font-size: 21px">
+                    Emma Wallace
+                  </div>
+                  <div class="">13 Photos</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="px-6 gallery">
+          <div class="flex items-center mt-6">
+            <img src="https://assets.codepen.io/3685267/card-interactions-gsap-pin.svg" alt="" style="height: 16px" />
+            <div class="ml-1 font-semibold">New Zeland</div>
+          </div>
+          <div class="py-4 text-secondary" style="font-size: 18px">
+            A New Zeland based product designer who specializes in
+            interaction design
+          </div>
+          <div class="flex mt-2">
+            <div class="w-1/2 pr-3">
+              <div class="py-3 w-full" style="height: 190px">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-1.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
+              </div>
+              <div class="py-3 w-full" style="height: 270px">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-2.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
+              </div>
+            </div>
+            <div class="w-1/2 pl-3">
+              <div class="py-3 w-full" style="height: 130px">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-3.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
+              </div>
+              <div class="py-3 w-full" style="height: 200px">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-4.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
+              </div>
+              <div class="py-3 w-full" style="height: 130px">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-5.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-6 section-2" style="height: 414px">
+        <div class="h-full overflow-hidden" style="border-radius: 24px">
+          <img src="https://assets.codepen.io/3685267/card-interactions-gsap-image4.jpg" alt="" class="w-full h-full" />
+        </div>
+      </div>
+    </div>
+    <div class="backdrop" style="transform: translate(0px)"></div>
+
+    <div class="device-details text-white px-6 pt-3 hidden sm:block" style="transform: translate(0px)">
+      <div class="flex items-center justify-between">
+        <div class="">9:41</div>
+        <img src="https://assets.codepen.io/3685267/card-interactions-gsap-device.svg" alt="" style="height: 26px" />
+      </div>
+    </div>
+    <div class="bottom-nav px-6 pt-3" style="transform: translate(0px)">
+      <div class="relative w-full" style="height: 64px">
+        <div class="
+                absolute
+                inset-0
+                rounded-full
+                flex
+                items-center
+                justify-between
+                px-3
+                nav-bottom-back
+              " style="background: #c0c0c0cc">
+          <div class="rounded-full relative btn-home" style="height: 48px; width: 48px; background-color: #f8f8f8">
+            <div class="
+                    absolute
+                    inset-0
+                    flex
+                    items-center
+                    justify-center
+                    icon-home
+                  ">
+              <img src="https://assets.codepen.io/3685267/card-interactions-gsap-home.svg" alt="" />
+            </div>
+            <div class="
+                    absolute
+                    inset-0
+                    flex
+                    items-center
+                    justify-center
+                    icon-arrow-down
+                  ">
+              <img src="https://assets.codepen.io/3685267/card-interactions-gsap-arrow-down.svg" alt="" />
+            </div>
+          </div>
+          <div class="rounded-full flex items-center justify-center" style="height: 48px; width: 48px">
+            <img src="https://assets.codepen.io/3685267/card-interactions-gsap-search.svg" alt="" />
+          </div>
+          <div class="
+                  bg-pink-500
+                  rounded-full
+                  flex
+                  items-center
+                  justify-center
+                " style="height: 48px; width: 48px"></div>
+          <div class="rounded-full flex items-center justify-center" style="height: 48px; width: 48px">
+            <img src="https://assets.codepen.io/3685267/card-interactions-gsap-bell.svg" alt="" />
+          </div>
+          <div class="
+                  bg-white
+                  p-0.5
+                  rounded-full
+                  flex
+                  items-center
+                  justify-center
+                " style="height: 48px; width: 48px">
+            <img src="https://assets.codepen.io/3685267/card-interactions-gsap-avatar4.jpg" alt="" class="w-full h-full rounded-full" />
+          </div>
+        </div>
+
+        <div class="absolute absolute-center bg-white rounded-full btn-options" style="width: 74px; height: 74px">
+          <div class="w-full h-full relative">
+            <div class="absolute inset-0 rounded-full plus-btn-bg" style="background: #6469e3"></div>
+
+            <div class="
+                    absolute
+                    inset-0
+                    flex
+                    items-center
+                    justify-center
+                    plus-icon
+                  " style="color: #39414d">
+              <svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <g filter="url(#filter0_d)">
+                  <path d="M22.1523 15.125H16.875V9.84766C16.875 9.36641 16.4812 8.97266 16 8.97266C15.5188 8.97266 15.125 9.36641 15.125 9.84766V15.125H9.84766C9.36641 15.125 8.97266 15.5188 8.97266 16C8.97266 16.2406 9.07109 16.4594 9.22969 16.618C9.38828 16.7766 9.60703 16.875 9.84766 16.875H15.125V22.1523C15.125 22.393 15.2234 22.6117 15.382 22.7703C15.5406 22.9289 15.7594 23.0273 16 23.0273C16.4812 23.0273 16.875 22.6336 16.875 22.1523V16.875H22.1523C22.6336 16.875 23.0273 16.4812 23.0273 16C23.0273 15.5188 22.6336 15.125 22.1523 15.125Z" />
+                </g>
+                <defs>
+                  <filter id="filter0_d" x="6.97266" y="6.97266" width="22.0547" height="22.0547" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                    <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="2" dy="2" />
+                    <feGaussianBlur stdDeviation="2" />
+                    <feComposite in2="hardAlpha" operator="out" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+                  </filter>
+                </defs>
+              </svg>
+            </div>
+
+            <div class="
+                    absolute
+                    inset-0
+                    flex
+                    items-center
+                    justify-center
+                    btn-folders
+                  ">
+              <div class="rounded-full" style="width: 60px; height: 60px; background-color: #dddddd">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-folders.svg" alt="" />
+              </div>
+            </div>
+            <div class="
+                    absolute
+                    inset-0
+                    flex
+                    items-center
+                    justify-center
+                    btn-camera
+                  ">
+              <div class="rounded-full" style="width: 60px; height: 60px; background-color: #dddddd">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-camera.svg" alt="" />
+              </div>
+            </div>
+            <div class="
+                    absolute
+                    inset-0
+                    flex
+                    items-center
+                    justify-center
+                    btn-play
+                  ">
+              <div class="rounded-full" style="width: 60px; height: 60px; background-color: #dddddd">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-play.svg" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/card-interactions-with-gsap/dist/script.js b/card-interactions-with-gsap/dist/script.js
new file mode 100644
index 0000000..8e4d5ff
--- /dev/null
+++ b/card-interactions-with-gsap/dist/script.js
@@ -0,0 +1,279 @@
+const { innerWidth } = window;
+const { set, to } = gsap;
+
+const stackPadding = 24;
+let stackStep = -1;
+let mainStep = 0;
+let showOptions = false;
+
+let cardHeight = 600;
+let cardWidth = 340;
+let deviceWidth = 414;
+let sectionOffset = -500;
+
+if (innerWidth < 640) {
+  deviceWidth = innerWidth;
+  cardWidth = (340 / 414) * deviceWidth;
+  cardHeight = (600 / 414) * deviceWidth;
+  sectionOffset = -428;
+}
+
+const restCardSize = deviceWidth - 2 * stackPadding;
+const stackBackgroundOffset = cardWidth - cardHeight;
+
+const click = (item) => (func) => {
+  document.querySelector(item).addEventListener("click", func);
+};
+
+const btnOptions = ".btn-options";
+const btnHome = ".btn-home";
+
+const page = ".page";
+const backdrop = ".backdrop";
+const nav = ".nav";
+const titleSets = ".title-sets";
+const titleSet1 = ".title-set-1";
+const titleSet2 = ".title-set-2";
+const section2 = ".section-2";
+const section1 = ".section-1";
+const cardSet = ".card-set";
+
+const card1 = ".card-1";
+const card2 = ".card-2";
+const card3 = ".card-3";
+const card = ".card";
+const gallery = ".gallery";
+const userDetails = ".user-details";
+const btnFolders = ".btn-folders";
+const btnCamera = ".btn-camera";
+const btnPlay = ".btn-play";
+const navBottomBack = ".nav-bottom-back";
+const plusBtnBg = ".plus-btn-bg";
+const plusIcon = ".plus-icon";
+
+const iconHome = ".icon-home";
+const iconArrowDown = ".icon-arrow-down";
+
+set(gallery, { scale: 0 });
+set(backdrop, { display: "none", opacity: 0 });
+set(titleSet2, { scale: 0 });
+set(titleSet2, { scale: 0 });
+set(userDetails, { scale: 0.8, transformOrigin: "Bottom Left" });
+set(btnFolders, { scale: 0, x: 0, y: 0 });
+set(btnPlay, { scale: 0, x: 0, y: 0 });
+set(btnCamera, { scale: 0, x: 0, y: 0 });
+set(plusBtnBg, { scale: 0 });
+set(cardSet, { width: restCardSize, height: restCardSize });
+set(card, { backgroundSize: `${restCardSize}px ${restCardSize}px` });
+set(iconArrowDown, { opacity: 0 });
+
+click(btnOptions)(() => {
+  showOptions = !showOptions;
+
+  const getPos = (angle) => ({
+    x: 100 * Math.cos(angle),
+    y: 100 * Math.sin(angle)
+  });
+
+  const alpha = Math.PI * 0.3;
+  const start = Math.PI * -0.5;
+
+  if (showOptions) {
+    to(page, { scale: 0.8 });
+    to(backdrop, { display: "block", opacity: 0.7 });
+    to(navBottomBack, { scale: 0 });
+    to(btnFolders, { scale: 1, ...getPos(start - alpha) });
+    to(btnCamera, { scale: 1, ...getPos(start), delay: 0.15 });
+    to(btnPlay, { scale: 1, ...getPos(start + alpha), delay: 0.3 });
+    to(plusBtnBg, { scale: 1.05 });
+    to(plusIcon, { rotation: 45, color: "#ffffff" });
+  } else {
+    to(page, { scale: 1 });
+    to(backdrop, { display: "none", opacity: 0 });
+    to(navBottomBack, { scale: 1 });
+    to(btnFolders, { scale: 0, x: 0, y: 0, delay: 0.3 });
+    to(btnCamera, { scale: 0, x: 0, y: 0, delay: 0.15 });
+    to(btnPlay, { scale: 0, x: 0, y: 0 });
+    to(plusBtnBg, { scale: 0 });
+    to(plusBtnBg, { scale: 0 });
+    to(plusIcon, { rotation: 0, color: "#39414D" });
+  }
+});
+
+const roi = new Hammer(document.getElementById("section-1"));
+
+roi.on("swipe", ({ direction }) => {
+  if (mainStep === 1) {
+    if (direction === 2) {
+      stackStep = Math.min(stackStep + 1, 2);
+    } else {
+      stackStep = Math.max(stackStep - 1, 0);
+    }
+
+    updateStack();
+  }
+});
+
+const updateStack = () => {
+  if (stackStep === 0) {
+    to(card1, {
+      x: 0,
+      scale: 1,
+      backgroundSize: `${cardHeight}px ${cardHeight}px`,
+      backgroundPosition: `${stackBackgroundOffset * 0.5}px 0px`
+    });
+    to(card2, {
+      x: 30,
+      scale: 0.9,
+      backgroundSize: `${cardHeight * 1.2}px ${cardHeight * 1.2}px`,
+      backgroundPosition: `${stackBackgroundOffset * 1.2 * 0.5}px ${
+        -cardHeight * 0.2 * 0.5
+      }px`
+    });
+    to(card3, {
+      x: 60,
+      scale: 0.8,
+      backgroundSize: `${cardHeight * 1.2}px ${cardHeight * 1.2}px`,
+      backgroundPosition: `${stackBackgroundOffset * 1.2 * 0.5}px ${
+        -cardHeight * 0.2 * 0.5
+      }px`
+    });
+  }
+  if (stackStep === 1) {
+    to(card1, {
+      x: -deviceWidth,
+      scale: 0.8,
+      backgroundSize: `${cardHeight}px ${cardHeight}px`,
+      backgroundPosition: `${stackBackgroundOffset * 0.5 + deviceWidth}px 0px`
+    });
+    to(card2, {
+      x: 0,
+      scale: 1,
+      backgroundSize: `${cardHeight}px ${cardHeight}px`,
+      backgroundPosition: `${stackBackgroundOffset * 0.5}px 0px`
+    });
+    to(card3, {
+      x: 30,
+      scale: 0.9,
+      backgroundSize: `${cardHeight * 1.2}px ${cardHeight * 1.2}px`,
+      backgroundPosition: `${stackBackgroundOffset * 1.2 * 0.5}px ${
+        -cardHeight * 0.2 * 0.5
+      }px`
+    });
+  }
+  if (stackStep === 2) {
+    to(card1, {
+      x: -deviceWidth,
+      scale: 0.8,
+      backgroundSize: `${cardHeight}px ${cardHeight}px`,
+      backgroundPosition: `${stackBackgroundOffset * 0.5 + deviceWidth}px 0px`
+    });
+    to(card2, {
+      x: -deviceWidth,
+      scale: 0.8,
+      backgroundSize: `${cardHeight}px ${cardHeight}px`,
+      backgroundPosition: `${stackBackgroundOffset * 0.5 + deviceWidth}px 0px`
+    });
+    to(card3, {
+      x: 0,
+      scale: 1,
+      backgroundSize: `${cardHeight}px ${cardHeight}px`,
+      backgroundPosition: `${stackBackgroundOffset * 0.5}px 0px`
+    });
+  }
+
+  if (stackStep === -1) {
+    to(card1, {
+      x: 0,
+      backgroundSize: `${restCardSize}px ${restCardSize}px`,
+      backgroundPosition: "0px 0px",
+      scale: 1
+    });
+    to(card2, {
+      x: 0,
+      backgroundSize: `${restCardSize}px ${restCardSize}px`,
+      backgroundPosition: "0px 0px",
+      scale: 0.9
+    });
+    to(card3, {
+      x: 0,
+      backgroundSize: `${restCardSize}px ${restCardSize}px`,
+      backgroundPosition: "0px 0px",
+      scale: 0.8
+    });
+  }
+};
+
+const stackOnSelect = () => {
+  to(card1, {
+    backgroundPosition: `${(deviceWidth - cardHeight) * 0.5}px 0px`
+  });
+  to(card2, {
+    backgroundPosition: `${(deviceWidth - cardHeight) * 0.5}px 0px`
+  });
+  to(card3, {
+    backgroundPosition: `${(deviceWidth - cardHeight) * 0.5}px 0px`
+  });
+};
+
+const updateLayout = (reset = false) => {
+  if (mainStep === 0) {
+    to(nav, { height: 120 });
+    to(titleSet1, { scale: 1, transformOrigin: "Top Left" });
+    to(titleSet2, { scale: 0, transformOrigin: "Bottom Left" });
+    to(titleSets, { y: 0 });
+
+    to(section1, { height: deviceWidth, y: 0 });
+    to(cardSet, { height: restCardSize, width: restCardSize });
+    to(userDetails, { scale: 0.8, transformOrigin: "Bottom Left" });
+
+    stackStep = -1;
+    updateStack();
+  }
+
+  if (mainStep === 1) {
+    to(nav, { height: 72 });
+    to(titleSet1, { scale: 0, transformOrigin: "Top Left" });
+    to(titleSet2, { scale: 1, transformOrigin: "Bottom Left" });
+    to(titleSets, { y: -120 });
+    to(userDetails, { scale: 0.85, transformOrigin: "Bottom Left" });
+
+    to(section1, { height: 1200, y: 0, padding: stackPadding });
+    to(cardSet, { height: cardHeight, width: cardWidth });
+    to(card, { borderRadius: 24 });
+    to(gallery, { scale: 0 });
+    if (reset) {
+      stackStep = 0;
+    }
+    to(iconArrowDown, { opacity: 0, scale: 0 });
+    to(iconHome, { opacity: 1, scale: 1 });
+    updateStack();
+  }
+
+  if (mainStep === 2) {
+    to(section1, { y: sectionOffset, padding: 0, height: 1200 });
+    to(gallery, { scale: 1 });
+    to(cardSet, { width: deviceWidth, height: cardHeight });
+    to(card, { borderRadius: 0 });
+    to(userDetails, { scale: 1, transformOrigin: "Bottom Left" });
+    to(iconArrowDown, { opacity: 1, scale: 1 });
+    to(iconHome, { opacity: 0, scale: 0 });
+    stackOnSelect();
+  }
+};
+
+updateLayout();
+
+roi.on("tap", () => {
+  if ([0, 1].includes(mainStep)) {
+    mainStep += 1;
+    updateLayout(true);
+  }
+});
+
+click(btnHome)(() => {
+  if ([1, 2].includes(mainStep)) {
+    mainStep -= 1;
+    updateLayout(false);
+  }
+});
\ No newline at end of file
diff --git a/card-interactions-with-gsap/dist/style.css b/card-interactions-with-gsap/dist/style.css
new file mode 100644
index 0000000..a1a3560
--- /dev/null
+++ b/card-interactions-with-gsap/dist/style.css
@@ -0,0 +1,107 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
+body {
+  font-family: "Roboto", sans-serif;
+  color: white;
+  background: linear-gradient(180deg, #ae5c49 0%, #593733 100%);
+}
+
+.mock-window {
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 72px 1fr 100px;
+  background-color: #131517;
+}
+
+@media (min-width: 640px) {
+  .mock-window {
+    width: 414px;
+    height: 896px;
+  }
+}
+
+.device-details {
+  grid-row: 1/2;
+  grid-column: 1/2;
+}
+.page {
+  grid-row: 1/4;
+  grid-column: 1/2;
+}
+.backdrop {
+  grid-row: 1/4;
+  grid-column: 1/2;
+  background: #171010;
+  display: none;
+}
+.bottom-nav {
+  grid-row: 3/4;
+  grid-column: 1/2;
+}
+
+.device-top {
+  height: 72px;
+}
+.nav {
+  height: 120px;
+}
+.titles {
+  height: 72px;
+}
+
+.tabs {
+  height: 48px;
+}
+
+.card {
+  border-radius: 24px;
+}
+
+.card-1 {
+  background: url("https://assets.codepen.io/3685267/card-interactions-gsap-image1.jpg");
+  background-size: 366px 366px;
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+}
+.card-2 {
+  background: url("https://assets.codepen.io/3685267/card-interactions-gsap-image2.jpg");
+  background-size: 366px 366px;
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+}
+.card-3 {
+  background: url("https://assets.codepen.io/3685267/card-interactions-gsap-image3.jpg");
+  background-size: 366px 366px;
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+}
+
+.tab-selected {
+  background-color: #444346;
+}
+
+.text-secondary {
+  color: #9fa1a3;
+}
+
+.absolute-center {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.test {
+  transform: translate(-100px, -100px);
+}
+.test1 {
+  transform: translate(0px, -100px);
+}
+.test2 {
+  transform: translate(100px, -100px);
+}
+
+.btn-options {
+  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
+}
\ No newline at end of file
diff --git a/card-interactions-with-gsap/license.txt b/card-interactions-with-gsap/license.txt
new file mode 100644
index 0000000..95ebc14
--- /dev/null
+++ b/card-interactions-with-gsap/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Dilum (https://codepen.io/dilums/pen/VwbBGVr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/card-interactions-with-gsap/src/index.html b/card-interactions-with-gsap/src/index.html
new file mode 100644
index 0000000..354a15e
--- /dev/null
+++ b/card-interactions-with-gsap/src/index.html
@@ -0,0 +1,290 @@
+<div class="w-full h-screen overflow-hidden flex items-center justify-center">
+  <div class="mock-window">
+    <div class="page overflow-hidden">
+      <div class="device-top hidden sm:block"></div>
+      <div class="nav overflow-hidden mt-6 sm:mt-0">
+        <div class="title-sets">
+          <div class="title-set-1">
+            <div class="titles">
+              <div class="uppercase px-6 text-secondary">
+                Sunday, September 7
+              </div>
+              <div class="px-6 font-bold" style="font-size: 30px">
+                For You
+              </div>
+            </div>
+            <div class="tabs flex px-6 justify-between">
+              <button class="tab-selected px-5 rounded-full">Nature</button>
+              <button class="px-5 rounded-full text-secondary">City</button>
+              <button class="px-5 rounded-full text-secondary">
+                People
+              </button>
+              <button class="px-5 rounded-full text-secondary">
+                Animals
+              </button>
+            </div>
+          </div>
+          <div class="title-set-2">
+            <div class="titles flex items-center justify-between">
+              <div class="">
+                <div class="uppercase px-6 text-secondary">Collections</div>
+                <div class="px-6 font-bold" style="font-size: 30px">
+                  Plants
+                </div>
+              </div>
+              <div class="pr-6 h-full flex items-center">
+                <div class="rounded-full p-2 flex items-center justify-center" style="
+                        height: 50px;
+                        width: 50px;
+                        background-color: #424446;
+                      ">
+                  <img src="https://assets.codepen.io/3685267/card-interactions-gsap-list.svg" alt="" class="w-full h-full" />
+                </div>
+                <div class="
+                        rounded-full
+                        ml-4
+                        p-2
+                        flex
+                        items-center
+                        justify-center
+                      " style="
+                        height: 50px;
+                        width: 50px;
+                        background-color: #1e1e20;
+                      ">
+                  <img src="https://assets.codepen.io/3685267/card-interactions-gsap-grid.svg" alt="" class="w-full h-full" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-6 section-1 overflow-hidden" style="height: 414px" id="section-1">
+        <div class="card-set relative" style="border-radius: 24px; height: 366px; width: 366px">
+          <div class="card card-3 absolute inset-0 flex items-end">
+            <div class="p-6">
+              <div class="flex items-center user-details">
+                <div class="avatar-border rounded-full" style="width: 64px; height: 64px">
+                  <img src="https://assets.codepen.io/3685267/card-interactions-gsap-avatar3.jpg" alt="" class="w-full rounded-full" />
+                </div>
+                <div class="ml-3">
+                  <div class="font-bold" style="font-size: 21px">
+                    Emma Wallace
+                  </div>
+                  <div class="">13 Photos</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card card-2 absolute inset-0 flex items-end">
+            <div class="p-6">
+              <div class="flex items-center user-details">
+                <div class="avatar-border rounded-full" style="width: 64px; height: 64px">
+                  <img src="https://assets.codepen.io/3685267/card-interactions-gsap-avatar2.jpg" alt="" class="w-full rounded-full" />
+                </div>
+                <div class="ml-3">
+                  <div class="font-bold" style="font-size: 21px">
+                    Harry Sans
+                  </div>
+                  <div class="">16 Photos</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card card-1 absolute inset-0 flex items-end">
+            <div class="p-6">
+              <div class="flex items-center user-details">
+                <div class="avatar-border rounded-full" style="width: 64px; height: 64px">
+                  <img src="https://assets.codepen.io/3685267/card-interactions-gsap-avatar1.jpg" alt="" class="w-full rounded-full" />
+                </div>
+                <div class="ml-3">
+                  <div class="font-bold" style="font-size: 21px">
+                    Emma Wallace
+                  </div>
+                  <div class="">13 Photos</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="px-6 gallery">
+          <div class="flex items-center mt-6">
+            <img src="https://assets.codepen.io/3685267/card-interactions-gsap-pin.svg" alt="" style="height: 16px" />
+            <div class="ml-1 font-semibold">New Zeland</div>
+          </div>
+          <div class="py-4 text-secondary" style="font-size: 18px">
+            A New Zeland based product designer who specializes in
+            interaction design
+          </div>
+          <div class="flex mt-2">
+            <div class="w-1/2 pr-3">
+              <div class="py-3 w-full" style="height: 190px">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-1.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
+              </div>
+              <div class="py-3 w-full" style="height: 270px">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-2.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
+              </div>
+            </div>
+            <div class="w-1/2 pl-3">
+              <div class="py-3 w-full" style="height: 130px">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-3.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
+              </div>
+              <div class="py-3 w-full" style="height: 200px">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-4.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
+              </div>
+              <div class="py-3 w-full" style="height: 130px">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-5.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-6 section-2" style="height: 414px">
+        <div class="h-full overflow-hidden" style="border-radius: 24px">
+          <img src="https://assets.codepen.io/3685267/card-interactions-gsap-image4.jpg" alt="" class="w-full h-full" />
+        </div>
+      </div>
+    </div>
+    <div class="backdrop" style="transform: translate(0px)"></div>
+
+    <div class="device-details text-white px-6 pt-3 hidden sm:block" style="transform: translate(0px)">
+      <div class="flex items-center justify-between">
+        <div class="">9:41</div>
+        <img src="https://assets.codepen.io/3685267/card-interactions-gsap-device.svg" alt="" style="height: 26px" />
+      </div>
+    </div>
+    <div class="bottom-nav px-6 pt-3" style="transform: translate(0px)">
+      <div class="relative w-full" style="height: 64px">
+        <div class="
+                absolute
+                inset-0
+                rounded-full
+                flex
+                items-center
+                justify-between
+                px-3
+                nav-bottom-back
+              " style="background: #c0c0c0cc">
+          <div class="rounded-full relative btn-home" style="height: 48px; width: 48px; background-color: #f8f8f8">
+            <div class="
+                    absolute
+                    inset-0
+                    flex
+                    items-center
+                    justify-center
+                    icon-home
+                  ">
+              <img src="https://assets.codepen.io/3685267/card-interactions-gsap-home.svg" alt="" />
+            </div>
+            <div class="
+                    absolute
+                    inset-0
+                    flex
+                    items-center
+                    justify-center
+                    icon-arrow-down
+                  ">
+              <img src="https://assets.codepen.io/3685267/card-interactions-gsap-arrow-down.svg" alt="" />
+            </div>
+          </div>
+          <div class="rounded-full flex items-center justify-center" style="height: 48px; width: 48px">
+            <img src="https://assets.codepen.io/3685267/card-interactions-gsap-search.svg" alt="" />
+          </div>
+          <div class="
+                  bg-pink-500
+                  rounded-full
+                  flex
+                  items-center
+                  justify-center
+                " style="height: 48px; width: 48px"></div>
+          <div class="rounded-full flex items-center justify-center" style="height: 48px; width: 48px">
+            <img src="https://assets.codepen.io/3685267/card-interactions-gsap-bell.svg" alt="" />
+          </div>
+          <div class="
+                  bg-white
+                  p-0.5
+                  rounded-full
+                  flex
+                  items-center
+                  justify-center
+                " style="height: 48px; width: 48px">
+            <img src="https://assets.codepen.io/3685267/card-interactions-gsap-avatar4.jpg" alt="" class="w-full h-full rounded-full" />
+          </div>
+        </div>
+
+        <div class="absolute absolute-center bg-white rounded-full btn-options" style="width: 74px; height: 74px">
+          <div class="w-full h-full relative">
+            <div class="absolute inset-0 rounded-full plus-btn-bg" style="background: #6469e3"></div>
+
+            <div class="
+                    absolute
+                    inset-0
+                    flex
+                    items-center
+                    justify-center
+                    plus-icon
+                  " style="color: #39414d">
+              <svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <g filter="url(#filter0_d)">
+                  <path d="M22.1523 15.125H16.875V9.84766C16.875 9.36641 16.4812 8.97266 16 8.97266C15.5188 8.97266 15.125 9.36641 15.125 9.84766V15.125H9.84766C9.36641 15.125 8.97266 15.5188 8.97266 16C8.97266 16.2406 9.07109 16.4594 9.22969 16.618C9.38828 16.7766 9.60703 16.875 9.84766 16.875H15.125V22.1523C15.125 22.393 15.2234 22.6117 15.382 22.7703C15.5406 22.9289 15.7594 23.0273 16 23.0273C16.4812 23.0273 16.875 22.6336 16.875 22.1523V16.875H22.1523C22.6336 16.875 23.0273 16.4812 23.0273 16C23.0273 15.5188 22.6336 15.125 22.1523 15.125Z" />
+                </g>
+                <defs>
+                  <filter id="filter0_d" x="6.97266" y="6.97266" width="22.0547" height="22.0547" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                    <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="2" dy="2" />
+                    <feGaussianBlur stdDeviation="2" />
+                    <feComposite in2="hardAlpha" operator="out" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+                  </filter>
+                </defs>
+              </svg>
+            </div>
+
+            <div class="
+                    absolute
+                    inset-0
+                    flex
+                    items-center
+                    justify-center
+                    btn-folders
+                  ">
+              <div class="rounded-full" style="width: 60px; height: 60px; background-color: #dddddd">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-folders.svg" alt="" />
+              </div>
+            </div>
+            <div class="
+                    absolute
+                    inset-0
+                    flex
+                    items-center
+                    justify-center
+                    btn-camera
+                  ">
+              <div class="rounded-full" style="width: 60px; height: 60px; background-color: #dddddd">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-camera.svg" alt="" />
+              </div>
+            </div>
+            <div class="
+                    absolute
+                    inset-0
+                    flex
+                    items-center
+                    justify-center
+                    btn-play
+                  ">
+              <div class="rounded-full" style="width: 60px; height: 60px; background-color: #dddddd">
+                <img src="https://assets.codepen.io/3685267/card-interactions-gsap-play.svg" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/card-interactions-with-gsap/src/script.js b/card-interactions-with-gsap/src/script.js
new file mode 100644
index 0000000..0a0911c
--- /dev/null
+++ b/card-interactions-with-gsap/src/script.js
@@ -0,0 +1,279 @@
+const { innerWidth } = window;
+const { set, to } = gsap;
+
+const stackPadding = 24;
+let stackStep = -1;
+let mainStep = 0;
+let showOptions = false;
+
+let cardHeight = 600;
+let cardWidth = 340;
+let deviceWidth = 414;
+let sectionOffset = -500;
+
+if (innerWidth < 640) {
+  deviceWidth = innerWidth;
+  cardWidth = (340 / 414) * deviceWidth;
+  cardHeight = (600 / 414) * deviceWidth;
+  sectionOffset = -428;
+}
+
+const restCardSize = deviceWidth - 2 * stackPadding;
+const stackBackgroundOffset = cardWidth - cardHeight;
+
+const click = (item) => (func) => {
+  document.querySelector(item).addEventListener("click", func);
+};
+
+const btnOptions = ".btn-options";
+const btnHome = ".btn-home";
+
+const page = ".page";
+const backdrop = ".backdrop";
+const nav = ".nav";
+const titleSets = ".title-sets";
+const titleSet1 = ".title-set-1";
+const titleSet2 = ".title-set-2";
+const section2 = ".section-2";
+const section1 = ".section-1";
+const cardSet = ".card-set";
+
+const card1 = ".card-1";
+const card2 = ".card-2";
+const card3 = ".card-3";
+const card = ".card";
+const gallery = ".gallery";
+const userDetails = ".user-details";
+const btnFolders = ".btn-folders";
+const btnCamera = ".btn-camera";
+const btnPlay = ".btn-play";
+const navBottomBack = ".nav-bottom-back";
+const plusBtnBg = ".plus-btn-bg";
+const plusIcon = ".plus-icon";
+
+const iconHome = ".icon-home";
+const iconArrowDown = ".icon-arrow-down";
+
+set(gallery, { scale: 0 });
+set(backdrop, { display: "none", opacity: 0 });
+set(titleSet2, { scale: 0 });
+set(titleSet2, { scale: 0 });
+set(userDetails, { scale: 0.8, transformOrigin: "Bottom Left" });
+set(btnFolders, { scale: 0, x: 0, y: 0 });
+set(btnPlay, { scale: 0, x: 0, y: 0 });
+set(btnCamera, { scale: 0, x: 0, y: 0 });
+set(plusBtnBg, { scale: 0 });
+set(cardSet, { width: restCardSize, height: restCardSize });
+set(card, { backgroundSize: `${restCardSize}px ${restCardSize}px` });
+set(iconArrowDown, { opacity: 0 });
+
+click(btnOptions)(() => {
+  showOptions = !showOptions;
+
+  const getPos = (angle) => ({
+    x: 100 * Math.cos(angle),
+    y: 100 * Math.sin(angle)
+  });
+
+  const alpha = Math.PI * 0.3;
+  const start = Math.PI * -0.5;
+
+  if (showOptions) {
+    to(page, { scale: 0.8 });
+    to(backdrop, { display: "block", opacity: 0.7 });
+    to(navBottomBack, { scale: 0 });
+    to(btnFolders, { scale: 1, ...getPos(start - alpha) });
+    to(btnCamera, { scale: 1, ...getPos(start), delay: 0.15 });
+    to(btnPlay, { scale: 1, ...getPos(start + alpha), delay: 0.3 });
+    to(plusBtnBg, { scale: 1.05 });
+    to(plusIcon, { rotation: 45, color: "#ffffff" });
+  } else {
+    to(page, { scale: 1 });
+    to(backdrop, { display: "none", opacity: 0 });
+    to(navBottomBack, { scale: 1 });
+    to(btnFolders, { scale: 0, x: 0, y: 0, delay: 0.3 });
+    to(btnCamera, { scale: 0, x: 0, y: 0, delay: 0.15 });
+    to(btnPlay, { scale: 0, x: 0, y: 0 });
+    to(plusBtnBg, { scale: 0 });
+    to(plusBtnBg, { scale: 0 });
+    to(plusIcon, { rotation: 0, color: "#39414D" });
+  }
+});
+
+const roi = new Hammer(document.getElementById("section-1"));
+
+roi.on("swipe", ({ direction }) => {
+  if (mainStep === 1) {
+    if (direction === 2) {
+      stackStep = Math.min(stackStep + 1, 2);
+    } else {
+      stackStep = Math.max(stackStep - 1, 0);
+    }
+
+    updateStack();
+  }
+});
+
+const updateStack = () => {
+  if (stackStep === 0) {
+    to(card1, {
+      x: 0,
+      scale: 1,
+      backgroundSize: `${cardHeight}px ${cardHeight}px`,
+      backgroundPosition: `${stackBackgroundOffset * 0.5}px 0px`
+    });
+    to(card2, {
+      x: 30,
+      scale: 0.9,
+      backgroundSize: `${cardHeight * 1.2}px ${cardHeight * 1.2}px`,
+      backgroundPosition: `${stackBackgroundOffset * 1.2 * 0.5}px ${
+        -cardHeight * 0.2 * 0.5
+      }px`
+    });
+    to(card3, {
+      x: 60,
+      scale: 0.8,
+      backgroundSize: `${cardHeight * 1.2}px ${cardHeight * 1.2}px`,
+      backgroundPosition: `${stackBackgroundOffset * 1.2 * 0.5}px ${
+        -cardHeight * 0.2 * 0.5
+      }px`
+    });
+  }
+  if (stackStep === 1) {
+    to(card1, {
+      x: -deviceWidth,
+      scale: 0.8,
+      backgroundSize: `${cardHeight}px ${cardHeight}px`,
+      backgroundPosition: `${stackBackgroundOffset * 0.5 + deviceWidth}px 0px`
+    });
+    to(card2, {
+      x: 0,
+      scale: 1,
+      backgroundSize: `${cardHeight}px ${cardHeight}px`,
+      backgroundPosition: `${stackBackgroundOffset * 0.5}px 0px`
+    });
+    to(card3, {
+      x: 30,
+      scale: 0.9,
+      backgroundSize: `${cardHeight * 1.2}px ${cardHeight * 1.2}px`,
+      backgroundPosition: `${stackBackgroundOffset * 1.2 * 0.5}px ${
+        -cardHeight * 0.2 * 0.5
+      }px`
+    });
+  }
+  if (stackStep === 2) {
+    to(card1, {
+      x: -deviceWidth,
+      scale: 0.8,
+      backgroundSize: `${cardHeight}px ${cardHeight}px`,
+      backgroundPosition: `${stackBackgroundOffset * 0.5 + deviceWidth}px 0px`
+    });
+    to(card2, {
+      x: -deviceWidth,
+      scale: 0.8,
+      backgroundSize: `${cardHeight}px ${cardHeight}px`,
+      backgroundPosition: `${stackBackgroundOffset * 0.5 + deviceWidth}px 0px`
+    });
+    to(card3, {
+      x: 0,
+      scale: 1,
+      backgroundSize: `${cardHeight}px ${cardHeight}px`,
+      backgroundPosition: `${stackBackgroundOffset * 0.5}px 0px`
+    });
+  }
+
+  if (stackStep === -1) {
+    to(card1, {
+      x: 0,
+      backgroundSize: `${restCardSize}px ${restCardSize}px`,
+      backgroundPosition: "0px 0px",
+      scale: 1
+    });
+    to(card2, {
+      x: 0,
+      backgroundSize: `${restCardSize}px ${restCardSize}px`,
+      backgroundPosition: "0px 0px",
+      scale: 0.9
+    });
+    to(card3, {
+      x: 0,
+      backgroundSize: `${restCardSize}px ${restCardSize}px`,
+      backgroundPosition: "0px 0px",
+      scale: 0.8
+    });
+  }
+};
+
+const stackOnSelect = () => {
+  to(card1, {
+    backgroundPosition: `${(deviceWidth - cardHeight) * 0.5}px 0px`
+  });
+  to(card2, {
+    backgroundPosition: `${(deviceWidth - cardHeight) * 0.5}px 0px`
+  });
+  to(card3, {
+    backgroundPosition: `${(deviceWidth - cardHeight) * 0.5}px 0px`
+  });
+};
+
+const updateLayout = (reset = false) => {
+  if (mainStep === 0) {
+    to(nav, { height: 120 });
+    to(titleSet1, { scale: 1, transformOrigin: "Top Left" });
+    to(titleSet2, { scale: 0, transformOrigin: "Bottom Left" });
+    to(titleSets, { y: 0 });
+
+    to(section1, { height: deviceWidth, y: 0 });
+    to(cardSet, { height: restCardSize, width: restCardSize });
+    to(userDetails, { scale: 0.8, transformOrigin: "Bottom Left" });
+
+    stackStep = -1;
+    updateStack();
+  }
+
+  if (mainStep === 1) {
+    to(nav, { height: 72 });
+    to(titleSet1, { scale: 0, transformOrigin: "Top Left" });
+    to(titleSet2, { scale: 1, transformOrigin: "Bottom Left" });
+    to(titleSets, { y: -120 });
+    to(userDetails, { scale: 0.85, transformOrigin: "Bottom Left" });
+
+    to(section1, { height: 1200, y: 0, padding: stackPadding });
+    to(cardSet, { height: cardHeight, width: cardWidth });
+    to(card, { borderRadius: 24 });
+    to(gallery, { scale: 0 });
+    if (reset) {
+      stackStep = 0;
+    }
+    to(iconArrowDown, { opacity: 0, scale: 0 });
+    to(iconHome, { opacity: 1, scale: 1 });
+    updateStack();
+  }
+
+  if (mainStep === 2) {
+    to(section1, { y: sectionOffset, padding: 0, height: 1200 });
+    to(gallery, { scale: 1 });
+    to(cardSet, { width: deviceWidth, height: cardHeight });
+    to(card, { borderRadius: 0 });
+    to(userDetails, { scale: 1, transformOrigin: "Bottom Left" });
+    to(iconArrowDown, { opacity: 1, scale: 1 });
+    to(iconHome, { opacity: 0, scale: 0 });
+    stackOnSelect();
+  }
+};
+
+updateLayout();
+
+roi.on("tap", () => {
+  if ([0, 1].includes(mainStep)) {
+    mainStep += 1;
+    updateLayout(true);
+  }
+});
+
+click(btnHome)(() => {
+  if ([1, 2].includes(mainStep)) {
+    mainStep -= 1;
+    updateLayout(false);
+  }
+});
diff --git a/card-interactions-with-gsap/src/style.css b/card-interactions-with-gsap/src/style.css
new file mode 100644
index 0000000..5e8e4b4
--- /dev/null
+++ b/card-interactions-with-gsap/src/style.css
@@ -0,0 +1,107 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
+body {
+  font-family: "Roboto", sans-serif;
+  color: white;
+  background: linear-gradient(180deg, #ae5c49 0%, #593733 100%);
+}
+
+.mock-window {
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 72px 1fr 100px;
+  background-color: #131517;
+}
+
+@media (min-width: 640px) {
+  .mock-window {
+    width: 414px;
+    height: 896px;
+  }
+}
+
+.device-details {
+  grid-row: 1/2;
+  grid-column: 1/2;
+}
+.page {
+  grid-row: 1/4;
+  grid-column: 1/2;
+}
+.backdrop {
+  grid-row: 1/4;
+  grid-column: 1/2;
+  background: #171010;
+  display: none;
+}
+.bottom-nav {
+  grid-row: 3/4;
+  grid-column: 1/2;
+}
+
+.device-top {
+  height: 72px;
+}
+.nav {
+  height: 120px;
+}
+.titles {
+  height: 72px;
+}
+
+.tabs {
+  height: 48px;
+}
+
+.card {
+  border-radius: 24px;
+}
+
+.card-1 {
+  background: url("https://assets.codepen.io/3685267/card-interactions-gsap-image1.jpg");
+  background-size: 366px 366px;
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+}
+.card-2 {
+  background: url("https://assets.codepen.io/3685267/card-interactions-gsap-image2.jpg");
+  background-size: 366px 366px;
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+}
+.card-3 {
+  background: url("https://assets.codepen.io/3685267/card-interactions-gsap-image3.jpg");
+  background-size: 366px 366px;
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+}
+
+.tab-selected {
+  background-color: #444346;
+}
+
+.text-secondary {
+  color: #9fa1a3;
+}
+
+.absolute-center {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.test {
+  transform: translate(-100px, -100px);
+}
+.test1 {
+  transform: translate(0px, -100px);
+}
+.test2 {
+  transform: translate(100px, -100px);
+}
+
+.btn-options {
+  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
+}
diff --git a/cards-with-simple-stripe-backgrounds/README.markdown b/cards-with-simple-stripe-backgrounds/README.markdown
new file mode 100644
index 0000000..5a2daaa
--- /dev/null
+++ b/cards-with-simple-stripe-backgrounds/README.markdown
@@ -0,0 +1,4 @@
+# Cards with simple stripe backgrounds
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/thebabydino/pen/poJJgKq](https://codepen.io/thebabydino/pen/poJJgKq).
+
+ Inspiration from these Shutterstock sets:  [#1](https://www.shutterstock.com/image-vector/flat-cover-templates-set-geometric-lines-1544522735), [#2](https://www.shutterstock.com/image-vector/tech-cover-templates-set-geometric-lines-1577082949), [#3](https://www.shutterstock.com/image-vector/tech-cover-templates-set-geometric-lines-1448836910), [#4](https://www.shutterstock.com/image-vector/colorful-cover-templates-set-geometric-lines-1433157926), [#4](https://www.shutterstock.com/image-vector/dynamic-cover-templates-set-geometric-lines-1458828635), [#5](https://www.shutterstock.com/image-vector/minimalist-covers-linear-design-geometric-lines-1495500647), [#6](https://www.shutterstock.com/image-vector/colored-cover-templates-set-geometric-lines-1521829895), [#7](https://www.shutterstock.com/image-vector/colored-cover-templates-set-geometric-lines-1521829895).
\ No newline at end of file
diff --git a/cards-with-simple-stripe-backgrounds/dist/index.html b/cards-with-simple-stripe-backgrounds/dist/index.html
new file mode 100644
index 0000000..a70a8db
--- /dev/null
+++ b/cards-with-simple-stripe-backgrounds/dist/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Cards with simple stripe backgrounds</title>
+  <link rel="stylesheet" href="./style.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/cards-with-simple-stripe-backgrounds/dist/style.css b/cards-with-simple-stripe-backgrounds/dist/style.css
new file mode 100644
index 0000000..9cf62b1
--- /dev/null
+++ b/cards-with-simple-stripe-backgrounds/dist/style.css
@@ -0,0 +1,188 @@
+body {
+  --h: 19em;
+  display: grid;
+  grid-template-columns: repeat(var(--n, 7), var(--w, 13em));
+  grid-gap: 1em;
+  place-content: center;
+  margin: 0;
+  min-height: 100vh;
+  background: #333;
+}
+@media (max-width: 99em) {
+  body {
+    --n: 6 ;
+  }
+}
+@media (max-width: 85em) {
+  body {
+    --n: 5 ;
+  }
+}
+@media (max-width: 71em) {
+  body {
+    --n: 4 ;
+  }
+}
+@media (max-width: 57em) {
+  body {
+    --n: 3 ;
+  }
+}
+@media (max-width: 43em) {
+  body {
+    --n: 2 ;
+  }
+}
+@media (max-width: 29em) {
+  body {
+    --n: 1 ;
+  }
+}
+@media (max-width: 15em) {
+  body {
+    --w: 100%;
+    --h: 146.1538461538vw;
+  }
+}
+
+.card {
+  --rlist: var(--c) 0 3px, transparent 0 7px;
+  --dim: 100% 50% no-repeat;
+  --ang: 90deg;
+  overflow: hidden;
+  position: relative;
+  height: var(--h);
+  border-radius: 7px;
+  box-shadow: 2px 2px 17px #000;
+  background: repeating-linear-gradient(var(--ang-0, -45deg), var(--rlist)) var(--pos-0, 0 0)/var(--dim), repeating-linear-gradient(var(--ang-1, 45deg), var(--rlist)) var(--pos-1, 0 100%)/var(--dim), linear-gradient(var(--ang), var(--nlist));
+}
+.card:nth-child(4n + 2) {
+  --ang-0: 45deg;
+  --ang-1: 135deg;
+}
+.card:nth-child(4n + 3) {
+  --ang-0: -60deg;
+  --ang-1: 60deg;
+}
+.card:nth-child(4n) {
+  --ang-0: -120deg;
+  --ang-1: 120deg;
+}
+.card:nth-child(1) {
+  --c: #3ea814;
+  --nlist: #e8f4c6, #3bb720;
+}
+.card:nth-child(2) {
+  --c: #5d6f80;
+  --nlist: #768896, #cbd4d6;
+}
+.card:nth-child(3) {
+  --c: #fe3a01;
+  --nlist: #fe3502, #efd25d;
+}
+.card:nth-child(4) {
+  --c: #14282d;
+  --nlist: #81b7c9, #26353c;
+}
+.card:nth-child(5) {
+  --c: #0e685e;
+  --nlist: #77dddd, #1e766a;
+}
+.card:nth-child(6) {
+  --c: #dd7519;
+  --nlist: #e68323, #fcdf85;
+}
+.card:nth-child(7) {
+  --c: #034077;
+  --nlist: #013579, #3fdbe5;
+}
+.card:nth-child(8) {
+  --c: #05131f;
+  --nlist: #2c6f90, #0e1f29;
+}
+.card:nth-child(9) {
+  --c: #b63e03;
+  --nlist: #ebd346, #c2400c;
+}
+.card:nth-child(10) {
+  --c: #010e05;
+  --nlist: #051e18, #186d56;
+}
+.card:nth-child(11) {
+  --c: #093658;
+  --nlist: #193961, #72cadd;
+}
+.card:nth-child(12) {
+  --c: #011422;
+  --nlist: #027899, #05262d;
+}
+.card:nth-child(13) {
+  --c: #e0aa0a;
+  --nlist: #fcef34, #dead1f;
+}
+.card:nth-child(14) {
+  --c: #13507e;
+  --nlist: #235790, #7fc8d3;
+}
+.card:nth-child(15) {
+  --c: #326f12;
+  --nlist: #397d28, #cce296;
+}
+.card:nth-child(16) {
+  --c: #4486b0;
+  --nlist: #d4eef7, #3b8cbc;
+}
+.card:nth-child(17) {
+  --c: #4d3628;
+  --nlist: #dac7b0, #513831;
+}
+.card:nth-child(18) {
+  --c: #ed1d00;
+  --nlist: #ef2902, #f6940a;
+}
+.card:nth-child(19) {
+  --c: #c71b01;
+  --nlist: #cd1700, #f76705;
+}
+.card:nth-child(20) {
+  --c: #2e354c;
+  --nlist: #adc0e0, #303548;
+}
+.card:nth-child(21) {
+  --c: #88b70f;
+  --nlist: #e2eb81, #9cc323;
+}
+.card:nth-child(22) {
+  --c: #243eb1;
+  --nlist: #3046bb, #a4c9e6;
+}
+.card:nth-child(23) {
+  --c: #990741;
+  --nlist: #a6103c, #f246d6;
+}
+.card:nth-child(24) {
+  --c: #456400;
+  --nlist: #d2e001, #3a6202;
+}
+.card:nth-child(25) {
+  --c: #bf5734;
+  --nlist: #ecd7bc, #c95c3a;
+}
+.card:nth-child(26) {
+  --c: #228f8a;
+  --nlist: #2b9c96, #90e1e2;
+}
+.card:nth-child(27) {
+  --c: #49130c;
+  --nlist: #de8068, #55221a;
+}
+.card:nth-child(28) {
+  --c: #32453f;
+  --nlist: #b9dcce, #333e3a;
+}
+
+.v {
+  --dim: 50% no-repeat;
+  --ang: 0deg;
+  --pos-1: 100%;
+}
\ No newline at end of file
diff --git a/cards-with-simple-stripe-backgrounds/license.txt b/cards-with-simple-stripe-backgrounds/license.txt
new file mode 100644
index 0000000..745bb98
--- /dev/null
+++ b/cards-with-simple-stripe-backgrounds/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Ana Tudor (https://codepen.io/thebabydino/pen/poJJgKq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/cards-with-simple-stripe-backgrounds/src/index.html b/cards-with-simple-stripe-backgrounds/src/index.html
new file mode 100644
index 0000000..6d1948f
--- /dev/null
+++ b/cards-with-simple-stripe-backgrounds/src/index.html
@@ -0,0 +1,28 @@
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
+<div class='card'></div>
+<div class='card'></div>
+<div class='card v'></div>
+<div class='card v'></div>
\ No newline at end of file
diff --git a/cards-with-simple-stripe-backgrounds/src/style.scss b/cards-with-simple-stripe-backgrounds/src/style.scss
new file mode 100644
index 0000000..729169c
--- /dev/null
+++ b/cards-with-simple-stripe-backgrounds/src/style.scss
@@ -0,0 +1,204 @@
+$w: 13em;
+$f: 19/13;
+$g: 1em;
+$n: 7;
+$c: #4B384C;
+
+body {
+	--h: #{$f*$w};
+	display: grid;
+	grid-template-columns: repeat(var(--n, #{$n}), var(--w, #{$w}));
+	grid-gap: 1em;
+	place-content: center;
+	margin: 0;
+	min-height: 100vh;
+	background: #333;
+	
+	@for $i from 1 through $n {
+		@media (max-width: ($n - $i + 1)*$w + ($n - $i + 2)*$g) {
+			@if $i == $n {
+				--w: 100%;
+				--h: #{$f*100vw};
+			}
+			@else { --n: #{$n - $i} }
+		}
+	}
+}
+
+.card {
+	--rlist: var(--c) 0 3px, transparent 0 7px;
+	--dim: 100% 50% no-repeat;
+	--ang: 90deg;
+	overflow: hidden;
+	position: relative;
+	height: var(--h);
+	border-radius: 7px;
+	box-shadow: 2px 2px 17px #000;
+	background: 
+			repeating-linear-gradient(var(--ang-0, -45deg), 
+					var(--rlist)) var(--pos-0, 0 0)/ var(--dim), 
+			repeating-linear-gradient(var(--ang-1, 45deg), 
+					var(--rlist)) var(--pos-1, 0 100%)/ var(--dim), 
+			linear-gradient(var(--ang), var(--nlist));
+	
+	&:nth-child(4n + 2) {
+		--ang-0: 45deg;
+		--ang-1: 135deg;
+	}
+	
+	&:nth-child(4n + 3) {
+		--ang-0: -60deg;
+		--ang-1: 60deg;
+	}
+	
+	&:nth-child(4n) {
+		--ang-0: -120deg;
+		--ang-1: 120deg;
+	}
+	
+	&:nth-child(1) {
+		--c: #3ea814;
+		--nlist: #e8f4c6, #3bb720;
+	}
+	
+	&:nth-child(2) {
+		--c: #5d6f80;
+		--nlist: #768896, #cbd4d6;
+	}
+	
+	&:nth-child(3) {
+		--c: #fe3a01;
+		--nlist: #fe3502, #efd25d;
+	}
+	
+	&:nth-child(4) {
+		--c: #14282d;
+		--nlist: #81b7c9, #26353c;
+	}
+	
+	&:nth-child(5) {
+		--c: #0e685e;
+		--nlist: #77dddd, #1e766a;
+	}
+	
+	&:nth-child(6) {
+		--c: #dd7519;
+		--nlist: #e68323, #fcdf85;
+	}
+	
+	&:nth-child(7) {
+		--c: #034077;
+		--nlist: #013579, #3fdbe5;
+	}
+	
+	&:nth-child(8) {
+		--c: #05131f;
+		--nlist: #2c6f90, #0e1f29;
+	}
+	
+	&:nth-child(9) {
+		--c: #b63e03;
+		--nlist: #ebd346, #c2400c;
+	}
+	
+	&:nth-child(10) {
+		--c: #010e05;
+		--nlist: #051e18, #186d56;
+	}
+	
+	&:nth-child(11) {
+		--c: #093658;
+		--nlist: #193961, #72cadd;
+	}
+	
+	&:nth-child(12) {
+		--c: #011422;
+		--nlist: #027899, #05262d;
+	}
+	
+	&:nth-child(13) {
+		--c: #e0aa0a;
+		--nlist: #fcef34, #dead1f;
+	}
+	
+	&:nth-child(14) {
+		--c: #13507e;
+		--nlist: #235790, #7fc8d3;
+	}
+	
+	&:nth-child(15) {
+		--c: #326f12;
+		--nlist: #397d28, #cce296;
+	}
+	
+	&:nth-child(16) {
+		--c: #4486b0;
+		--nlist: #d4eef7, #3b8cbc;
+	}
+	
+	&:nth-child(17) {
+		--c: #4d3628;
+		--nlist: #dac7b0, #513831;
+	}
+	
+	&:nth-child(18) {
+		--c: #ed1d00;
+		--nlist: #ef2902, #f6940a;
+	}
+	
+	&:nth-child(19) {
+		--c: #c71b01;
+		--nlist: #cd1700, #f76705;
+	}
+	
+	&:nth-child(20) {
+		--c: #2e354c;
+		--nlist: #adc0e0, #303548;
+	}
+	
+	&:nth-child(21) {
+		--c: #88b70f;
+		--nlist: #e2eb81, #9cc323;
+	}
+	
+	&:nth-child(22) {
+		--c: #243eb1;
+		--nlist: #3046bb, #a4c9e6;
+	}
+	
+	&:nth-child(23) {
+		--c: #990741;
+		--nlist: #a6103c, #f246d6;
+	}
+	
+	&:nth-child(24) {
+		--c: #456400;
+		--nlist: #d2e001, #3a6202;
+	}
+	
+	&:nth-child(25) {
+		--c: #bf5734;
+		--nlist: #ecd7bc, #c95c3a;
+	}
+	
+	&:nth-child(26) {
+		--c: #228f8a;
+		--nlist: #2b9c96, #90e1e2;
+	}
+	
+	&:nth-child(27) {
+		--c: #49130c;
+		--nlist: #de8068, #55221a;
+	}
+	
+	&:nth-child(28) {
+		--c: #32453f;
+		--nlist: #b9dcce, #333e3a;
+	}
+}
+
+.v {
+	--dim: 50% no-repeat;
+	--ang: 0deg;
+	--pos-1: 100%;
+}
\ No newline at end of file
diff --git a/carousel-lock-interface/README.markdown b/carousel-lock-interface/README.markdown
new file mode 100644
index 0000000..798456f
--- /dev/null
+++ b/carousel-lock-interface/README.markdown
@@ -0,0 +1,9 @@
+# Carousel Lock Interface
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jackrugile/pen/RxqdxL](https://codepen.io/jackrugile/pen/RxqdxL).
+
+ Having some fun with carousels! Use the sliding carousels to enter the super secret code.
+
+This demo was made with:
+
+- [Flickity](https://flickity.metafizzy.co/) by [Metafizzy](https://metafizzy.co/)
+- [howler.js](https://howlerjs.com/) by [James Simpson](https://twitter.com/GoldFireStudios)
\ No newline at end of file
diff --git a/carousel-lock-interface/dist/index.html b/carousel-lock-interface/dist/index.html
new file mode 100644
index 0000000..10024ce
--- /dev/null
+++ b/carousel-lock-interface/dist/index.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Carousel Lock Interface</title>
+  <link href="https://fonts.googleapis.com/css?family=Orbitron:400,500,700,900" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/flickity.css'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<div class="loader"></div>
+<div class="lock">
+  <div class="screen">
+    <div class="code">0000</div>
+    <div class="status">LOCKED</div>
+    <div class="scanlines"></div>
+  </div>
+  <div class="rows">
+    <div class="row">
+      <div class="cell">
+        <div class="text">0</div>
+      </div>
+      <div class="cell">
+        <div class="text">1</div>
+      </div>
+      <div class="cell">
+        <div class="text">2</div>
+      </div>
+      <div class="cell">
+        <div class="text">3</div>
+      </div>
+      <div class="cell">
+        <div class="text">4</div>
+      </div>
+      <div class="cell">
+        <div class="text">5</div>
+      </div>
+      <div class="cell">
+        <div class="text">6</div>
+      </div>
+      <div class="cell">
+        <div class="text">7</div>
+      </div>
+      <div class="cell">
+        <div class="text">8</div>
+      </div>
+      <div class="cell">
+        <div class="text">9</div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cell">
+        <div class="text">0</div>
+      </div>
+      <div class="cell">
+        <div class="text">1</div>
+      </div>
+      <div class="cell">
+        <div class="text">2</div>
+      </div>
+      <div class="cell">
+        <div class="text">3</div>
+      </div>
+      <div class="cell">
+        <div class="text">4</div>
+      </div>
+      <div class="cell">
+        <div class="text">5</div>
+      </div>
+      <div class="cell">
+        <div class="text">6</div>
+      </div>
+      <div class="cell">
+        <div class="text">7</div>
+      </div>
+      <div class="cell">
+        <div class="text">8</div>
+      </div>
+      <div class="cell">
+        <div class="text">9</div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cell">
+        <div class="text">0</div>
+      </div>
+      <div class="cell">
+        <div class="text">1</div>
+      </div>
+      <div class="cell">
+        <div class="text">2</div>
+      </div>
+      <div class="cell">
+        <div class="text">3</div>
+      </div>
+      <div class="cell">
+        <div class="text">4</div>
+      </div>
+      <div class="cell">
+        <div class="text">5</div>
+      </div>
+      <div class="cell">
+        <div class="text">6</div>
+      </div>
+      <div class="cell">
+        <div class="text">7</div>
+      </div>
+      <div class="cell">
+        <div class="text">8</div>
+      </div>
+      <div class="cell">
+        <div class="text">9</div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cell">
+        <div class="text">0</div>
+      </div>
+      <div class="cell">
+        <div class="text">1</div>
+      </div>
+      <div class="cell">
+        <div class="text">2</div>
+      </div>
+      <div class="cell">
+        <div class="text">3</div>
+      </div>
+      <div class="cell">
+        <div class="text">4</div>
+      </div>
+      <div class="cell">
+        <div class="text">5</div>
+      </div>
+      <div class="cell">
+        <div class="text">6</div>
+      </div>
+      <div class="cell">
+        <div class="text">7</div>
+      </div>
+      <div class="cell">
+        <div class="text">8</div>
+      </div>
+      <div class="cell">
+        <div class="text">9</div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="info">
+  <p><strong>Super Secret Code</strong>: 1234</p>
+  <p>Made with <a href="https://flickity.metafizzy.co/" target="_blank">Flickity</a></p>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.10/flickity.pkgd.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.7/howler.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/carousel-lock-interface/dist/script.js b/carousel-lock-interface/dist/script.js
new file mode 100644
index 0000000..734c34c
--- /dev/null
+++ b/carousel-lock-interface/dist/script.js
@@ -0,0 +1,158 @@
+class Lock {
+
+  constructor() {
+    this.pin = '1234';
+    this.setupDom();
+    this.setupFlickity();
+    this.setupAudio();
+    this.onResize();
+    this.listen();
+  }
+
+  listen() {
+    window.addEventListener('resize', () => this.onResize());
+  }
+
+  onResize() {
+    if (window.innerWidth % 2 === 0) {
+      this.dom.lock.style.marginLeft = '0px';
+    } else {
+      this.dom.lock.style.marginLeft = '1px';
+    }
+  }
+
+  onChange() {
+    this.sounds.select.play();
+    this.code = this.getCode();
+    this.dom.code.textContent = this.code;
+    if (this.code === this.pin) {
+      this.verified = true;
+      this.dom.lock.classList.add('verified');
+      this.dom.status.textContent = 'UNLOCKED';
+      this.sounds.success.play();
+    } else {
+      this.dom.lock.classList.remove('verified');
+      this.dom.status.textContent = 'LOCKED';
+      if (this.verified) {
+        this.sounds.fail.play();
+      }
+      this.verified = false;
+    }
+  }
+
+  getCode() {
+    let code = '';
+    for (let i = 0, len = this.dom.rows.length; i < len; i++) {
+      let cell = this.dom.rows[i].querySelector('.is-selected .text');
+      let num = cell.textContent;
+      code += num;
+    }
+    return code;
+  }
+
+  setupDom() {
+    this.dom = {};
+    this.dom.lock = document.querySelector('.lock');
+    this.dom.rows = document.querySelectorAll('.row');
+    this.dom.code = document.querySelector('.code');
+    this.dom.status = document.querySelector('.status');
+  }
+
+  setupAudio() {
+    this.sounds = {};
+
+    this.sounds.select = new Howl({
+      src: [
+      'https://jackrugile.com/sounds/misc/lock-button-1.mp3',
+      'https://jackrugile.com/sounds/misc/lock-button-1.ogg'],
+
+      volume: 0.5,
+      rate: 1.4 });
+
+
+    this.sounds.prev = new Howl({
+      src: [
+      'https://jackrugile.com/sounds/misc/lock-button-4.mp3',
+      'https://jackrugile.com/sounds/misc/lock-button-4.ogg'],
+
+      volume: 0.5,
+      rate: 1 });
+
+
+    this.sounds.next = new Howl({
+      src: [
+      'https://jackrugile.com/sounds/misc/lock-button-4.mp3',
+      'https://jackrugile.com/sounds/misc/lock-button-4.ogg'],
+
+      volume: 0.5,
+      rate: 1.2 });
+
+
+    this.sounds.hover = new Howl({
+      src: [
+      'https://jackrugile.com/sounds/misc/lock-button-1.mp3',
+      'https://jackrugile.com/sounds/misc/lock-button-1.ogg'],
+
+      volume: 0.2,
+      rate: 3 });
+
+
+    this.sounds.success = new Howl({
+      src: [
+      'https://jackrugile.com/sounds/misc/lock-online-1.mp3',
+      'https://jackrugile.com/sounds/misc/lock-online-1.ogg'],
+
+      volume: 0.5,
+      rate: 1 });
+
+
+    this.sounds.fail = new Howl({
+      src: [
+      'https://jackrugile.com/sounds/misc/lock-fail-1.mp3',
+      'https://jackrugile.com/sounds/misc/lock-fail-1.ogg'],
+
+      volume: 0.6,
+      rate: 1 });
+
+  }
+
+  setupFlickity() {
+    for (let i = 0, len = this.dom.rows.length; i < len; i++) {
+      let row = this.dom.rows[i];
+      let flkty = new Flickity(row, {
+        selectedAttraction: 0.25,
+        friction: 0.9,
+        cellAlign: 'center',
+        pageDots: false,
+        wrapAround: true });
+
+      flkty.lastIndex = 0;
+
+      flkty.on('select', () => {
+        if (flkty.selectedIndex !== flkty.lastIndex) {
+          this.onChange();
+        }
+        flkty.lastIndex = flkty.selectedIndex;
+      });
+
+      row.addEventListener('mouseenter', () => {
+        this.sounds.hover.play();
+      });
+    }
+
+    this.dom.prevNextBtns = this.dom.lock.querySelectorAll('.flickity-prev-next-button');
+    for (let i = 0, len = this.dom.prevNextBtns.length; i < len; i++) {
+      let btn = this.dom.prevNextBtns[i];
+      btn.addEventListener('click', () => {
+        if (btn.classList.contains('previous')) {
+          this.sounds.prev.play();
+        } else {
+          this.sounds.next.play();
+        }
+      });
+    }
+  }}
+
+
+
+let lock = new Lock();
\ No newline at end of file
diff --git a/carousel-lock-interface/dist/style.css b/carousel-lock-interface/dist/style.css
new file mode 100644
index 0000000..b93bc51
--- /dev/null
+++ b/carousel-lock-interface/dist/style.css
@@ -0,0 +1,363 @@
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  align-items: center;
+  background: #111;
+  background: radial-gradient(#1a1a1a, black);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+body:after {
+  -webkit-animation: fade 1000ms 100ms forwards;
+          animation: fade 1000ms 100ms forwards;
+  background: #000;
+  bottom: 0;
+  content: '';
+  left: 0;
+  pointer-events: none;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 100;
+}
+
+@-webkit-keyframes fade {
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fade {
+  100% {
+    opacity: 0;
+  }
+}
+.lock {
+  background: #000;
+  border-bottom: 1px solid #262626;
+  border-left: 1px solid #262626;
+  box-shadow: -1px 1px 0 #0f0f0f, -2px 2px 0 #0d0d0d, -3px 3px 0 #0a0a0a, -4px 4px 0 #080808, -8px 8px 16px rgba(0, 0, 0, 0.5);
+  position: relative;
+  z-index: 20;
+}
+.lock:before {
+  background: linear-gradient(90deg, #262626 0%, #595959 100%);
+  content: '';
+  height: 1px;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+.lock:after {
+  background: linear-gradient(0deg, #262626 0%, #595959 100%);
+  bottom: 0;
+  content: '';
+  height: 100%;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 1px;
+}
+
+.screen {
+  background: #000;
+  height: 40px;
+  position: relative;
+}
+.screen:before {
+  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 100%);
+  bottom: 0;
+  content: '';
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+.screen:after {
+  background: linear-gradient(90deg, #262626 0%, #595959 100%);
+  bottom: 0;
+  content: '';
+  height: 1px;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.code,
+.status {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: 1em;
+  height: 40px;
+  line-height: 42px;
+  padding: 0 0.75em;
+  position: absolute;
+}
+
+.code {
+  color: #fff;
+  left: 0;
+  text-shadow: 0 0 15px #fff;
+}
+
+.status {
+  -webkit-animation: pulse 1000ms infinite alternate;
+          animation: pulse 1000ms infinite alternate;
+  color: #f00;
+  right: 0;
+  text-shadow: 0 0 15px #f00;
+}
+.verified .status {
+  -webkit-animation: pulse 300ms infinite alternate;
+          animation: pulse 300ms infinite alternate;
+  color: #0f0;
+  text-shadow: 0 0 15px #0f0;
+}
+
+@-webkit-keyframes pulse {
+  0%,
+  0% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pulse {
+  0%,
+  0% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.scanlines {
+  background: linear-gradient(rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.1) 50%);
+  background-size: 100% 2px;
+  bottom: 1px;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  z-index: 1;
+}
+
+.rows {
+  padding: 1px 2px 1px 1px;
+  width: 210px;
+}
+
+.row {
+  height: 50px;
+  width: 210px;
+  position: relative;
+}
+.row:before, .row:after {
+  bottom: 0;
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 35%;
+  z-index: 1;
+}
+.row:before {
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  left: 0;
+}
+.row:after {
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
+  right: 0;
+}
+
+.cell {
+  background: linear-gradient(45deg, #0d0d0d, #262626);
+  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #383838;
+  display: flex;
+  height: 50px;
+  position: relative;
+  justify-content: center;
+  width: 70px;
+}
+.cell:before {
+  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/noise.jpg);
+  background-size: 256px 256px;
+  bottom: 0;
+  content: '';
+  left: 0;
+  opacity: 0.08;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+.cell:after {
+  background: radial-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
+  bottom: 0;
+  content: '';
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition-duration: 200ms;
+  transition-property: opacity;
+  z-index: 2;
+}
+.row:hover .cell:after {
+  opacity: 1;
+  transition-duration: 64ms;
+}
+
+.text {
+  color: #fff;
+  font-family: 'Orbitron', monospace;
+  font-size: 1.25em;
+  font-weight: 500;
+  line-height: 56px;
+  opacity: 0.3;
+  -webkit-transform: scale(0.55);
+          transform: scale(0.55);
+  transition-duration: 150ms;
+  transition-property: color, opacity, text-shadow, -webkit-transform;
+  transition-property: color, opacity, text-shadow, transform;
+  transition-property: color, opacity, text-shadow, transform, -webkit-transform;
+}
+.is-selected .text {
+  opacity: 1;
+  -webkit-transform: scale(1);
+          transform: scale(1);
+}
+.verified .is-selected .text {
+  color: #0f0;
+}
+
+/* ---- previous/next buttons ---- */
+.flickity-prev-next-button {
+  width: 60px;
+  height: 50px;
+  border: none;
+  border-radius: 0;
+  background: none;
+}
+.flickity-prev-next-button:before {
+  background: linear-gradient(135deg, #8c8c8c, #333333);
+  bottom: 0;
+  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+  content: '';
+  height: 12px;
+  left: 0;
+  margin: auto;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  -webkit-transform: scale(1) rotate(45deg);
+          transform: scale(1) rotate(45deg);
+  transition-duration: 200ms;
+  transition-property: background, box-shadow, opacity, -webkit-transform;
+  transition-property: background, box-shadow, opacity, transform;
+  transition-property: background, box-shadow, opacity, transform, -webkit-transform;
+  width: 12px;
+  z-index: 1;
+}
+.flickity-prev-next-button:after {
+  background: rgba(26, 26, 26, 0.1);
+  background: linear-gradient(135deg, #404040, #1a1a1a);
+  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 0 #212121, 0 2px 0 #1a1a1a, 0 3px 0 #141414, 0 4px 0 #0f0f0f, 0 5px 16px rgba(0, 0, 0, 0.75);
+  bottom: 0;
+  content: '';
+  height: 12px;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  -webkit-transform: scale(1) rotate(45deg);
+          transform: scale(1) rotate(45deg);
+  transition-duration: 200ms;
+  transition-property: background, box-shadow, opacity, -webkit-transform;
+  transition-property: background, box-shadow, opacity, transform;
+  transition-property: background, box-shadow, opacity, transform, -webkit-transform;
+  width: 12px;
+}
+
+.flickity-prev-next-button:hover {
+  background: none;
+}
+.flickity-prev-next-button:hover:before {
+  opacity: 1;
+  -webkit-transform: scale(1) rotate(45deg);
+          transform: scale(1) rotate(45deg);
+  transition-duration: 64ms;
+}
+.flickity-prev-next-button:hover:after {
+  transition-duration: 64ms;
+}
+
+.flickity-prev-next-button:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.flickity-prev-next-button:active {
+  opacity: 1;
+}
+.flickity-prev-next-button:active:before {
+  -webkit-transform: scale(1) translateX(-1px) translateY(3px) rotate(45deg);
+          transform: scale(1) translateX(-1px) translateY(3px) rotate(45deg);
+  transition-duration: 64ms;
+}
+.flickity-prev-next-button:active:after {
+  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0px 0 #262626, 0 0px 0 #1f1f1f, 0 0px 0 #1a1a1a, 0 0px 0 #141414, 0 5px 4px rgba(0, 0, 0, 0.5);
+  -webkit-transform: scale(1) translateX(-1px) translateY(3px) rotate(45deg);
+          transform: scale(1) translateX(-1px) translateY(3px) rotate(45deg);
+  transition-duration: 64ms;
+}
+
+.flickity-prev-next-button.previous {
+  left: -60px;
+}
+
+.flickity-prev-next-button.next {
+  right: -60px;
+}
+
+.flickity-prev-next-button svg {
+  display: none;
+}
+
+.info {
+  color: #666;
+  font-family: 'Share Tech Mono', monospace;
+  font-size: 0.75em;
+  line-height: 1;
+  padding-top: 40px;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.info p {
+  margin-bottom: 10px;
+}
+.info p:last-child {
+  margin-bottom: 0;
+}
+
+.info a {
+  color: #fff;
+  text-decoration: none;
+}
diff --git a/carousel-lock-interface/license.txt b/carousel-lock-interface/license.txt
new file mode 100644
index 0000000..67c74ad
--- /dev/null
+++ b/carousel-lock-interface/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Jack Rugile (https://codepen.io/jackrugile/pen/RxqdxL)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/carousel-lock-interface/src/index.html b/carousel-lock-interface/src/index.html
new file mode 100644
index 0000000..b0aa395
--- /dev/null
+++ b/carousel-lock-interface/src/index.html
@@ -0,0 +1,143 @@
+
+<div class="loader"></div>
+<div class="lock">
+  <div class="screen">
+    <div class="code">0000</div>
+    <div class="status">LOCKED</div>
+    <div class="scanlines"></div>
+  </div>
+  <div class="rows">
+    <div class="row">
+      <div class="cell">
+        <div class="text">0</div>
+      </div>
+      <div class="cell">
+        <div class="text">1</div>
+      </div>
+      <div class="cell">
+        <div class="text">2</div>
+      </div>
+      <div class="cell">
+        <div class="text">3</div>
+      </div>
+      <div class="cell">
+        <div class="text">4</div>
+      </div>
+      <div class="cell">
+        <div class="text">5</div>
+      </div>
+      <div class="cell">
+        <div class="text">6</div>
+      </div>
+      <div class="cell">
+        <div class="text">7</div>
+      </div>
+      <div class="cell">
+        <div class="text">8</div>
+      </div>
+      <div class="cell">
+        <div class="text">9</div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cell">
+        <div class="text">0</div>
+      </div>
+      <div class="cell">
+        <div class="text">1</div>
+      </div>
+      <div class="cell">
+        <div class="text">2</div>
+      </div>
+      <div class="cell">
+        <div class="text">3</div>
+      </div>
+      <div class="cell">
+        <div class="text">4</div>
+      </div>
+      <div class="cell">
+        <div class="text">5</div>
+      </div>
+      <div class="cell">
+        <div class="text">6</div>
+      </div>
+      <div class="cell">
+        <div class="text">7</div>
+      </div>
+      <div class="cell">
+        <div class="text">8</div>
+      </div>
+      <div class="cell">
+        <div class="text">9</div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cell">
+        <div class="text">0</div>
+      </div>
+      <div class="cell">
+        <div class="text">1</div>
+      </div>
+      <div class="cell">
+        <div class="text">2</div>
+      </div>
+      <div class="cell">
+        <div class="text">3</div>
+      </div>
+      <div class="cell">
+        <div class="text">4</div>
+      </div>
+      <div class="cell">
+        <div class="text">5</div>
+      </div>
+      <div class="cell">
+        <div class="text">6</div>
+      </div>
+      <div class="cell">
+        <div class="text">7</div>
+      </div>
+      <div class="cell">
+        <div class="text">8</div>
+      </div>
+      <div class="cell">
+        <div class="text">9</div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cell">
+        <div class="text">0</div>
+      </div>
+      <div class="cell">
+        <div class="text">1</div>
+      </div>
+      <div class="cell">
+        <div class="text">2</div>
+      </div>
+      <div class="cell">
+        <div class="text">3</div>
+      </div>
+      <div class="cell">
+        <div class="text">4</div>
+      </div>
+      <div class="cell">
+        <div class="text">5</div>
+      </div>
+      <div class="cell">
+        <div class="text">6</div>
+      </div>
+      <div class="cell">
+        <div class="text">7</div>
+      </div>
+      <div class="cell">
+        <div class="text">8</div>
+      </div>
+      <div class="cell">
+        <div class="text">9</div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="info">
+  <p><strong>Super Secret Code</strong>: 1234</p>
+  <p>Made with <a href="https://flickity.metafizzy.co/" target="_blank">Flickity</a></p>
+</div>
\ No newline at end of file
diff --git a/carousel-lock-interface/src/script.babel b/carousel-lock-interface/src/script.babel
new file mode 100644
index 0000000..70db32e
--- /dev/null
+++ b/carousel-lock-interface/src/script.babel
@@ -0,0 +1,158 @@
+class Lock {
+  
+  constructor() {
+    this.pin = '1234';
+    this.setupDom();
+    this.setupFlickity();  
+    this.setupAudio();
+    this.onResize();
+    this.listen();
+  }
+  
+  listen() {
+    window.addEventListener('resize', () => this.onResize());
+  }
+  
+  onResize() {
+    if(window.innerWidth % 2 === 0) {
+      this.dom.lock.style.marginLeft = '0px';
+    } else {
+      this.dom.lock.style.marginLeft = '1px';
+    }
+  }
+  
+  onChange() {
+    this.sounds.select.play();
+    this.code = this.getCode();
+    this.dom.code.textContent = this.code;
+    if(this.code === this.pin) {
+      this.verified = true;
+      this.dom.lock.classList.add('verified');
+      this.dom.status.textContent = 'UNLOCKED';
+      this.sounds.success.play();
+    } else {
+      this.dom.lock.classList.remove('verified');
+      this.dom.status.textContent = 'LOCKED';
+      if(this.verified) {
+        this.sounds.fail.play();
+      }
+      this.verified = false;
+    }
+  }
+  
+  getCode() {
+    let code = '';
+    for(let i = 0, len = this.dom.rows.length; i < len; i++) {
+      let cell = this.dom.rows[i].querySelector('.is-selected .text');
+      let num = cell.textContent;
+      code += num;
+    }
+    return code;
+  }
+  
+  setupDom() {
+    this.dom = {};
+    this.dom.lock = document.querySelector('.lock');
+    this.dom.rows = document.querySelectorAll('.row');
+    this.dom.code = document.querySelector('.code');
+    this.dom.status = document.querySelector('.status');
+  }
+  
+  setupAudio() {
+    this.sounds = {};
+    
+    this.sounds.select = new Howl({
+      src: [
+        'https://jackrugile.com/sounds/misc/lock-button-1.mp3',
+        'https://jackrugile.com/sounds/misc/lock-button-1.ogg'
+      ],
+      volume: 0.5,
+      rate: 1.4
+    });
+    
+    this.sounds.prev = new Howl({
+      src: [
+        'https://jackrugile.com/sounds/misc/lock-button-4.mp3',
+        'https://jackrugile.com/sounds/misc/lock-button-4.ogg'
+      ],
+      volume: 0.5,
+      rate: 1
+    });
+    
+    this.sounds.next = new Howl({
+      src: [
+        'https://jackrugile.com/sounds/misc/lock-button-4.mp3',
+        'https://jackrugile.com/sounds/misc/lock-button-4.ogg'
+      ],
+      volume: 0.5,
+      rate: 1.2
+    });
+    
+    this.sounds.hover = new Howl({
+      src: [
+        'https://jackrugile.com/sounds/misc/lock-button-1.mp3',
+        'https://jackrugile.com/sounds/misc/lock-button-1.ogg'
+      ],
+      volume: 0.2,
+      rate: 3
+    });
+    
+    this.sounds.success = new Howl({
+      src: [
+        'https://jackrugile.com/sounds/misc/lock-online-1.mp3',
+        'https://jackrugile.com/sounds/misc/lock-online-1.ogg'
+      ],
+      volume: 0.5,
+      rate: 1
+    });
+    
+    this.sounds.fail = new Howl({
+      src: [
+        'https://jackrugile.com/sounds/misc/lock-fail-1.mp3',
+        'https://jackrugile.com/sounds/misc/lock-fail-1.ogg'
+      ],
+      volume: 0.6,
+      rate: 1
+    });
+  }
+  
+  setupFlickity() {
+    for(let i = 0, len = this.dom.rows.length; i < len; i++) {
+      let row = this.dom.rows[i];
+      let flkty = new Flickity( row, {
+        selectedAttraction: 0.25,
+        friction: 0.9,
+        cellAlign: 'center',
+        pageDots: false,
+        wrapAround: true
+      });
+      flkty.lastIndex = 0;
+
+      flkty.on('select', () => {
+        if(flkty.selectedIndex !== flkty.lastIndex) {
+          this.onChange();
+        }
+        flkty.lastIndex = flkty.selectedIndex;
+      });
+      
+      row.addEventListener('mouseenter', () => {
+        this.sounds.hover.play();			   
+      });
+    }
+    
+    this.dom.prevNextBtns = this.dom.lock.querySelectorAll('.flickity-prev-next-button');
+    for(let i = 0, len = this.dom.prevNextBtns.length; i < len; i++) {
+      let btn = this.dom.prevNextBtns[i];
+      btn.addEventListener('click', () => {
+        if(btn.classList.contains('previous')) {
+          this.sounds.prev.play();
+        } else {
+          this.sounds.next.play();
+        }
+      });
+    }
+  }
+  
+}
+
+let lock = new Lock();
\ No newline at end of file
diff --git a/carousel-lock-interface/src/style.scss b/carousel-lock-interface/src/style.scss
new file mode 100644
index 0000000..e8ac557
--- /dev/null
+++ b/carousel-lock-interface/src/style.scss
@@ -0,0 +1,405 @@
+html,
+body {
+  height: 100%;
+  overflow: hidden; 
+}
+
+body {
+	align-items: center;
+	background: #111;
+	background: radial-gradient(
+    hsla(0, 0%, 10%, 1),
+    hsla(0, 0%, 0%, 1)
+  );
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+  &:after {
+    animation: fade 1000ms 100ms forwards;
+    background: #000;
+    bottom: 0;
+    content: '';
+    left: 0;
+    pointer-events: none;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 100
+  }
+}
+
+@keyframes fade {
+  100% {
+    opacity: 0;
+  }
+}
+
+.lock {
+	background: #000;
+	border-bottom: 1px solid hsla(0, 0%, 15%, 1);
+	border-left: 1px solid hsla(0, 0%, 15%, 1);
+	box-shadow:
+		-1px 1px 0 hsla(0, 0%, 6%, 1),
+		-2px 2px 0 hsla(0, 0%, 5%, 1),
+		-3px 3px 0 hsla(0, 0%, 4%, 1),
+		-4px 4px 0 hsla(0, 0%, 3%, 1),
+		-8px 8px 16px hsla(0, 0%, 0%, 0.5)
+	;
+	position: relative;
+  z-index: 20;
+	&:before {
+		background: linear-gradient(
+      90deg,
+      hsla(0, 0%, 15%, 1) 0%,
+      hsla( 0, 0%, 35%, 1) 100%
+    );
+		content: '';
+		height: 1px;
+		left: 0;
+		pointer-events: none;
+		position: absolute;
+		top: 0;
+		width: 100%;
+		z-index: 1;
+	}
+	&:after {
+		background: linear-gradient(
+      0deg,
+      hsla(0, 0%, 15%, 1) 0%,
+      hsla(0, 0%, 35%, 1) 100%
+    );
+		bottom: 0;
+		content: '';
+		height: 100%;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 1px;
+  }
+}
+
+.screen {
+	background: #000;
+	height: 40px;
+	position: relative;
+  &:before {
+    background: linear-gradient( 
+      45deg,
+      hsla(0, 0%, 100%, 0) 40%,
+      hsla(0, 0%, 100%, 0.2) 100%
+    );
+    bottom: 0;
+    content: '';
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1; 
+  }
+	&:after {
+		background: linear-gradient(
+      90deg,
+      hsla(0, 0%, 15%, 1) 0%,
+      hsla(0, 0%, 35%, 1) 100%
+    );
+		bottom: 0;
+		content: '';
+		height: 1px;
+		left: 0;
+		position: absolute;
+		width: 100%;
+	}
+}
+
+.code,
+.status {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: 1em;
+  height: 40px;
+  line-height: 42px;
+  padding: 0 0.75em;
+  position: absolute; 
+}
+
+.code {
+  color: #fff;
+  left: 0;
+  text-shadow: 0 0 15px #fff ;
+}
+
+.status {
+  animation: pulse 1000ms infinite alternate;
+  color: #f00;
+  right: 0;
+  text-shadow: 0 0 15px #f00;
+  .verified & {
+    animation: pulse 300ms infinite alternate;
+    color: #0f0;
+    text-shadow: 0 0 15px #0f0;
+  }
+}
+
+@keyframes pulse {
+  0%,
+  0% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1; 
+  }
+}
+
+.scanlines {
+	background: linear-gradient(
+    hsla(0, 0%, 100%, 0.04) 50%,
+    hsla(0, 0%, 0%, 0.1) 50%
+  );
+	background-size: 100% 2px;
+	bottom: 1px;
+	left: 0;
+	pointer-events: none;
+	position: absolute;
+	right: 1px;
+	top: 1px;
+	z-index: 1;
+}
+
+.rows {
+  padding: 1px 2px 1px 1px;
+  width: 210px;
+}
+
+.row {
+	height: 50px;
+	width: 210px;
+	position: relative;
+	&:before,
+	&:after {
+		bottom: 0;
+		content: '';
+		pointer-events: none;
+		position: absolute;
+		top: 0;
+		width: 35%;
+		z-index: 1;
+	}
+	&:before {
+		background: linear-gradient(
+      90deg,
+      hsla(0, 0%, 0%, 0.5),
+      hsla(0, 0%, 0%, 0)
+    );
+		left: 0;
+	}
+	&:after {
+		background: linear-gradient(
+      90deg,
+      hsla(0, 0%, 0%, 0),
+      hsla(0, 0%, 0%, 0.5)
+    );
+		right: 0;	
+	}
+}
+
+.cell {
+	background: linear-gradient(
+    45deg,
+    hsla(0, 0%, 5%, 1),
+    hsla(0, 0%, 15%, 1)
+  );
+  box-shadow: 
+    inset 0 0 0 1px #000,
+    inset 0 0 0 2px #383838
+  ;
+	display: flex;
+	height: 50px;
+	position: relative;
+	justify-content: center;
+	width: 70px;
+	&:before {
+		background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/noise.jpg);
+    background-size: 256px 256px;
+		bottom: 0;
+		content: '';
+		left: 0;
+		opacity: 0.08;
+		position: absolute;
+		right: 0;
+		top: 0;
+		z-index: 1;
+	}
+	&:after {
+		background: radial-gradient(
+      hsla(0, 0%, 100%, 0.1),
+      hsla( 0, 0%, 100%, 0)
+    );
+		bottom: 0;
+		content: '';
+		left: 0;
+		opacity: 0;
+		position: absolute;
+		right: 0;
+		top: 0;
+		transition-duration: 200ms;
+		transition-property: opacity;
+		z-index: 2;
+	}
+	.row:hover & {
+		&:after {
+			opacity: 1;
+			transition-duration: 64ms;
+		}
+	}
+}
+
+.text {
+	color: #fff;
+  font-family: 'Orbitron', monospace;
+	font-size: 1.25em;
+	font-weight: 500;
+	line-height: 56px;
+	opacity: 0.3;
+	transform: scale(0.55);
+	transition-duration: 150ms;
+	transition-property: color, opacity, text-shadow, transform;
+	.is-selected & {
+		opacity: 1;
+		transform: scale(1);
+	}
+  .verified .is-selected & {
+    color: #0f0; 
+  }
+}
+
+/* ---- previous/next buttons ---- */
+
+.flickity-prev-next-button {
+	width: 60px;
+	height: 50px;
+	border: none;
+	border-radius: 0;
+	background: none;
+	&:before {
+		background: linear-gradient(
+      135deg,
+      hsla(0, 0%, 55%, 1),
+      hsla(0, 0%, 20%, 1)
+    );
+		bottom: 0;
+		box-shadow: 
+			inset 0 1px 0 0 hsla(0, 0%, 100%, 0.3),
+			inset 0 0 0 1px hsla(0, 0%, 100%, 0.2)
+		;
+		content: '';
+		height: 12px;
+		left: 0;
+		margin: auto;
+		opacity: 0;
+		position: absolute;
+		right: 0;
+		top: 0;
+		transform: scale(1) rotate(45deg);
+		transition-duration: 200ms;
+		transition-property: background, box-shadow, opacity, transform;
+		width: 12px;
+		z-index: 1;
+	}
+	&:after {
+		background: hsla(0, 0%, 10%, 0.1);
+		background: linear-gradient(
+      135deg,
+      hsla(0, 0%, 25%, 1),
+      hsla(0, 0%, 10%, 1)
+    );
+		box-shadow: 
+			inset 0 1px 0 0 hsla(0, 0%, 100%, 0.15),
+			inset 0 0 0 1px hsla(0, 0%, 100%, 0.1),
+			0 1px 0 hsla(0, 0%, 13%, 1),
+			0 2px 0 hsla(0, 0%, 10%, 1),
+			0 3px 0 hsla(0, 0%, 8%, 1),
+			0 4px 0 hsla(0, 0%, 6%, 1),
+			0 5px 16px hsla(0, 0%, 0%, 0.75)
+		;
+		bottom: 0;
+		content: '';
+		height: 12px;
+		left: 0;
+		margin: auto;
+		position: absolute;
+		right: 0;
+		top: 0;
+		transform: scale(1) rotate(45deg);
+		transition-duration: 200ms;
+		transition-property: background, box-shadow, opacity, transform;
+		width: 12px;
+	}
+}
+
+.flickity-prev-next-button:hover {
+	background: none;
+	&:before {
+		opacity: 1;
+		transform: scale(1) rotate(45deg);
+		transition-duration: 64ms;
+	}
+	&:after {
+		transition-duration: 64ms;
+	}
+}
+
+.flickity-prev-next-button:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.flickity-prev-next-button:active {
+ 	opacity: 1;
+	&:before {
+		transform: scale(1) translateX(-1px) translateY(3px) rotate(45deg);
+		transition-duration: 64ms;
+	}
+	&:after {
+		box-shadow: 
+			inset 0 1px 0 0 hsla(0, 0%, 100%, 0.15),
+			inset 0 0 0 1px hsla(0, 0%, 100%, 0.1),
+			0 0px 0 hsla(0, 0%, 15%, 1),
+			0 0px 0 hsla(0, 0%, 12%, 1),
+			0 0px 0 hsla(0, 0%, 10%, 1),
+			0 0px 0 hsla(0, 0%, 8%, 1),
+			0 5px 4px hsla(0, 0%, 0%, 0.5)
+		;
+		transform: scale(1) translateX(-1px) translateY(3px) rotate(45deg);
+		transition-duration: 64ms;
+	}
+}
+
+.flickity-prev-next-button.previous { left: -60px; }
+.flickity-prev-next-button.next { right: -60px; }
+
+.flickity-prev-next-button svg {
+	display: none;
+}
+
+.info {
+  color: #666;
+  font-family: 'Share Tech Mono', monospace;
+  font-size: 0.75em;
+  line-height: 1;
+  padding-top: 40px;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.info p {
+  margin-bottom: 10px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.info a {
+  color: #fff;
+  text-decoration: none; 
+}
\ No newline at end of file
diff --git a/casio-pt-1-with-html-css-js/README.markdown b/casio-pt-1-with-html-css-js/README.markdown
new file mode 100644
index 0000000..7c3523c
--- /dev/null
+++ b/casio-pt-1-with-html-css-js/README.markdown
@@ -0,0 +1,5 @@
+# CASIO PT-1 with HTML/CSS/JS
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/manz/pen/KKmdjQZ](https://codepen.io/manz/pen/KKmdjQZ).
+
+
diff --git a/casio-pt-1-with-html-css-js/dist/index.html b/casio-pt-1-with-html-css-js/dist/index.html
new file mode 100644
index 0000000..418c1f8
--- /dev/null
+++ b/casio-pt-1-with-html-css-js/dist/index.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CASIO PT-1 with HTML/CSS/JS</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="colorButtons">
+    <button class="mode1"></button>
+    <button class="mode2"></button>
+    <button class="mode3"></button>
+    <button class="mode4"></button>
+  </div>
+
+  <div class="container">
+    <div class="casio-pt1">
+      <div class="casio-left">
+        <div class="speaker-container">
+          <div class="speaker"></div>
+        </div>
+        <div class="speaker-bottom">
+          <div class="power">
+            <div class="led on"></div>
+            <span>power</span>
+          </div>
+          <div class="logo">
+            <span class="brand">CASIO</span>
+            <div class="model">PT-1</div>
+          </div>
+        </div>
+      </div>
+      <div class="casio-right">
+        <div class="casio-controls">
+          <div class="controls-label">
+            <div class="group">
+              <div class="box">mode</div>
+              <div class="options">
+                <span class="fill inline">power off</span>
+                <span>record</span>
+                <span>play</span>
+              </div>
+            </div>
+            <div class="group">
+              <div class="box">volume</div>
+              <div class="options">
+                <span>min</span>
+                <span class="volume">||||||||||</span>
+                <span>max</span>
+              </div>
+            </div>
+
+            <div class="group">
+              <div class="box">tone</div>
+              <div class="options">
+                <span>piano</span>
+                <span>fantasy</span>
+                <span>violin</span>
+                <span>flute</span>
+              </div>
+            </div>
+
+            <div class="buttons group">
+              <div class="options">
+                <span>clear</span>
+                <span>del.</span>
+                <span class="arrow fill">▼</span>
+                <span class="arrow fill">▲</span>
+                <span>rhythm select</span>
+                <span>reset</span>
+                <span>demo</span>
+                <span>memory play</span>
+              </div>
+              <div class="semi box">tempo</div>
+            </div>
+
+            <div class="group">
+              <div class="last box">one key play</div>
+            </div>
+          </div>
+          <div class="controls-buttons">
+            <div class="grid">
+              <div class="mode slider">
+                <input id="off" type="radio" name="mode" value="off">
+                <label for="off"></label>
+
+                <input id="record" type="radio" name="mode" value="record">
+                <label for="record"></label>
+
+                <input id="play" type="radio" name="mode" value="play" checked>
+                <label for="play"></label>
+              </div>
+              <div class="volume slider">
+                <input id="v0" type="radio" name="volume" value="0">
+                <label for="v0"></label>
+
+                <input id="v1" type="radio" name="volume" value="0.25">
+                <label for="v1"></label>
+
+                <input id="v2" type="radio" name="volume" value="0.5">
+                <label for="v2"></label>
+
+                <input id="v3" type="radio" name="volume" value="0.75">
+                <label for="v3"></label>
+
+                <input id="v4" type="radio" name="volume" value="1" checked>
+                <label for="v4"></label>
+              </div>
+              <div class="tone slider">
+                <input id="piano" type="radio" name="tone" value="piano" checked>
+                <label for="piano"></label>
+
+                <input id="fantasy" type="radio" name="tone" value="fantasy">
+                <label for="fantasy"></label>
+
+                <input id="violin" type="radio" name="tone" value="violin">
+                <label for="violin"></label>
+
+                <input id="flute" type="radio" name="tone" value="flute">
+                <label for="flute"></label>
+              </div>
+              <div class="buttons group">
+                <div class="button steelblue" data-type="clear"></div>
+                <div class="button orange" data-type="del"></div>
+                <div class="button orange" data-type="down"></div>
+                <div class="button orange" data-type="up"></div>
+                <div class="button orange" data-type="rhythm"></div>
+                <div class="button gold" data-type="reset"></div>
+                <div class="button green" data-type="demo"></div>
+                <div class="button grey" data-type="memory"></div>
+              </div>
+              <div class="end group">
+                <div class="big button steelblue"></div>
+                <div class="big button steelblue"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="keys-container">
+          <div class="name-keys">
+            <div class="key-name"></div>
+            <div class="key-name"></div>
+            <div class="key-name" data-rhytm="march"></div>
+            <div class="key-name" data-rhytm="waltz"></div>
+            <div class="key-name" data-rhytm="4beat"></div>
+            <div class="key-name" data-rhytm="swing"></div>
+            <div class="key-name" data-rhytm="rock1"></div>
+            <div class="key-name" data-rhytm="rock2"></div>
+            <div class="key-name" data-rhytm="bossa nova"></div>
+            <div class="key-name" data-rhytm="samba"></div>
+            <div class="key-name" data-rhytm="rhumba"></div>
+            <div class="key-name" data-rhytm="beguine"></div>
+            <div class="key-name"></div>
+            <div class="key-name"></div>
+            <div class="key-name"></div>
+            <div class="key-name"></div>
+            <div class="key-name"></div>
+            <div class="instrument-type">ELECTRONIC MUSICAL INSTRUMENT</div>
+          </div>
+          <div class="keys">
+            <div class="black-keys">
+              <div class="black key" data-note="G#3"></div>
+              <div class="black key" data-note="A#3"></div>
+              <div class="black key" data-note="C#4"></div>
+              <div class="black key" data-note="D#4"></div>
+              <div class="black key" data-note="F#4"></div>
+              <div class="black key" data-note="G#4"></div>
+              <div class="black key" data-note="A#4"></div>
+              <div class="black key" data-note="C#5"></div>
+              <div class="black key" data-note="D#5"></div>
+              <div class="black key" data-note="F#5"></div>
+              <div class="black key" data-note="G#5"></div>
+              <div class="black key" data-note="A#5"></div>
+            </div>
+            <div class="white-keys">
+              <div class="white key" data-note="G3"></div>
+              <div class="white key" data-note="A3"></div>
+              <div class="white key" data-note="B3"></div>
+              <div class="white key" data-note="C4"></div>
+              <div class="white key" data-note="D4"></div>
+              <div class="white key" data-note="E4"></div>
+              <div class="white key" data-note="F4"></div>
+              <div class="white key" data-note="G4"></div>
+              <div class="white key" data-note="A4"></div>
+              <div class="white key" data-note="B4"></div>
+              <div class="white key" data-note="C5"></div>
+              <div class="white key" data-note="D5"></div>
+              <div class="white key" data-note="E5"></div>
+              <div class="white key" data-note="F5"></div>
+              <div class="white key" data-note="G5"></div>
+              <div class="white key" data-note="A5"></div>
+              <div class="white key" data-note="B5"></div>
+            </div>
+          </div>
+          <div class="note-keys">
+            <div class="note">G</div>
+            <div class="note">A</div>
+            <div class="note">B</div>
+            <div class="note">C</div>
+            <div class="note">D</div>
+            <div class="note">E</div>
+            <div class="note">F</div>
+            <div class="note">G</div>
+            <div class="note">A</div>
+            <div class="note">B</div>
+            <div class="note">C</div>
+            <div class="note">D</div>
+            <div class="note">E</div>
+            <div class="note">F</div>
+            <div class="note">G</div>
+            <div class="note">A</div>
+            <div class="note">B</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+<div class="created">
+  <span>Created by</span>
+  <a href="https://manz.dev/"><h2>Manz.dev</h2></a>
+  <p>on <a href="https://twitch.tv/ManzDev">Twitch</a> / <a href="https://youtube.com/c/ManzDev/videos">Youtube</a></p>
+</div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/casio-pt-1-with-html-css-js/dist/script.js b/casio-pt-1-with-html-css-js/dist/script.js
new file mode 100644
index 0000000..e973b9c
--- /dev/null
+++ b/casio-pt-1-with-html-css-js/dist/script.js
@@ -0,0 +1,172 @@
+import Soundfont from "https://cdn.skypack.dev/soundfont-player";
+
+const NOTES = {
+  "keyz": "G3",
+  "keyx": "A3",
+  "keyc": "B3",
+  "keyv": "C4",
+  "keyb": "D4",
+  "keyn": "E4",
+  "keym": "F4",
+  "keyq": "G4",
+  "keyw": "A4",
+  "keye": "B4",
+  "keyr": "C5",
+  "keyt": "D5",
+  "keyy": "E5",
+  "keyu": "F5",
+  "keyi": "G5",
+  "keyo": "A5",
+  "keyp": "B5",
+  "keys": "G#3",
+  "keyd": "A#3",
+  "keyg": "C#4",
+  "keyh": "D#4",
+  "keyk": "F#4",
+  "keyl": "G#4",
+  "keyñ": "A#4",
+  "key5": "C#5",
+  "key6": "D#5",
+  "key8": "F#5",
+  "key9": "G#5",
+  "key0": "A#5" };
+
+
+const ac = new AudioContext();
+const options = { soundfont: "FluidR3_GM" };
+const cumbiaSong = new Audio("https://manzdev.github.io/twitch-casio-pt1/cumbia.mp3");
+cumbiaSong.volume = 0.45;
+const playingNotes = {};
+let currentInstrument = "piano";
+let currentVolume = 1;
+let thanosMode = false;
+
+const COLORMODES = [
+{ bgcolor: "#171e27", color: "#909eb4" },
+{ bgcolor: "#c0beaf", color: "#4d1210" },
+{ bgcolor: "#c02628", color: "#e17d75" },
+{ bgcolor: "#becedd", color: "#6b799e" }];
+
+
+const colorsButtons = document.querySelectorAll(".colorButtons button");
+colorsButtons.forEach((button, index) => {
+  button.style.setProperty("--casio-bgcolor", COLORMODES[index].bgcolor);
+  button.style.setProperty("--casio-color", COLORMODES[index].color);
+  button.addEventListener("click", () => {
+    document.body.style.setProperty("--casio-bgcolor", COLORMODES[index].bgcolor);
+    document.body.style.setProperty("--casio-color", COLORMODES[index].color);
+  });
+});
+
+const instruments = {
+  piano: "acoustic_grand_piano",
+  fantasy: "lead_2_sawtooth",
+  violin: "violin",
+  flute: "flute" };
+
+
+for (const pair of Object.entries(instruments)) {
+  const [key, value] = pair;
+  Soundfont.instrument(ac, value, options).
+  then(data => {instruments[key] = data;});
+}
+
+const play = (instrument, note, duration = 6) => {
+  playingNotes[note] = instruments[instrument].start(note, ac.currentTime, { duration, gain: currentVolume });
+};
+
+const stop = note => {
+  const playingNote = playingNotes[note];
+  playingNote.stop();
+  playingNotes[note] = null;
+};
+
+const pianoKeys = document.querySelectorAll(".key");
+pianoKeys.forEach(key => {
+  const note = key.dataset.note;
+  key.addEventListener("mousedown", () => play(currentInstrument, note));
+  key.addEventListener("mouseleave", () => playingNotes[note] && stop(note));
+  key.addEventListener("mouseup", () => playingNotes[note] && stop(note));
+});
+
+document.addEventListener("keydown", ev => {
+  const id = `key${ev.key}`;
+  const note = NOTES[id];
+  if (!playingNotes[note] && note) {
+    const key = document.querySelector(`[data-note="${note}"]`);
+    key.classList.add("active");
+    play(currentInstrument, note);
+  }
+});
+
+document.addEventListener("keyup", ev => {
+  const id = `key${ev.key}`;
+  const note = NOTES[id];
+  if (playingNotes[note] && note) {
+    const key = document.querySelector(`[data-note="${note}"]`);
+    key.classList.remove("active");
+    stop(note);
+  }
+});
+
+const toneSliders = document.querySelectorAll(".tone input");
+toneSliders.forEach(input => {
+  input.addEventListener("click", () => {
+    const instrument = input.id;
+    currentInstrument = String(instrument);
+  });
+});
+
+const volumeSliders = document.querySelectorAll(".volume input");
+volumeSliders.forEach(input => {
+  input.addEventListener("click", () => {
+    const volume = input.value;
+    currentVolume = Number(volume);
+  });
+});
+
+// Thanos egg easter
+const COLORS = ["#d81313", "#eace17", "#33ea12", "#12eae3", "#101eea", "#ea10e3"];
+
+const changeColor = () => {
+  setTimeout(() => {
+    const color = COLORS[~~(Math.random() * COLORS.length)];
+    document.body.classList.remove("dark");
+    document.body.style.setProperty("--body-color", color);
+    if (thanosMode) {setTimeout(() => changeColor(), 350);}
+  }, 350);
+};
+
+const disableThanosMode = () => {
+  document.body.classList.remove(...["dark", "party"]);
+  const thanosImage = document.querySelector(".thanos");
+  thanosImage && thanosImage.remove();
+  thanosMode = false;
+  cumbiaSong.pause();
+};
+
+const enableThanosMode = () => {
+  thanosMode = true;
+  cumbiaSong.currentTime = 0;
+  cumbiaSong.play();
+  document.body.classList.add("dark");
+
+  // Thanos image add
+  setTimeout(() => {
+    const image = document.createElement("img");
+    image.src = "https://manzdev.github.io/twitch-casio-pt1/thanos.png";
+    image.className = "thanos";
+    document.body.appendChild(image);
+  }, 18000);
+
+  // Party mode
+  setTimeout(() => {
+    document.body.classList.add("party");
+    changeColor();
+  }, 27000);
+};
+
+const demoButton = document.querySelector("[data-type=demo");
+demoButton.addEventListener("click", () => {
+  if (cumbiaSong.paused) {enableThanosMode();} else {disableThanosMode();}
+});
\ No newline at end of file
diff --git a/casio-pt-1-with-html-css-js/dist/style.css b/casio-pt-1-with-html-css-js/dist/style.css
new file mode 100644
index 0000000..7600c28
--- /dev/null
+++ b/casio-pt-1-with-html-css-js/dist/style.css
@@ -0,0 +1,632 @@
+@font-face {
+  font-family: Michroma;
+  src:
+    url(https://manzdev.github.io/twitch-casio-pt1/michroma.woff2) format("woff2"),
+    url(https://manzdev.github.io/twitch-casio-pt1/michroma.woff) format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Tourney;
+  src:
+    url(https://manzdev.github.io/twitch-casio-pt1/tourney.woff2) format("woff2"),
+    url(https://manzdev.github.io/twitch-casio-pt1/tourney.woff) format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Raleway;
+  src:
+    url(/raleway.woff2) format("woff2"),
+    url(/raleway.woff) format("woff");
+  font-display: swap;
+}
+
+:root {
+  --casio-bgcolor: #171e27;
+  --casio-color: #909eb4;
+}
+
+.colorButtons {
+  display: flex;
+  justify-content: center;
+  padding: 0 10px;
+}
+
+.colorButtons button {
+    width: 25px;
+    height: 25px;
+    margin: 0 5px;
+    border-radius: 5px;
+    border: 2px solid var(--casio-color);
+    background: var(--casio-bgcolor);
+  }
+
+body {
+  transition: background 1s;
+}
+
+body.dark {
+  background: #000;
+  -webkit-animation: prepareSong 8s ease 8s alternate 3;
+          animation: prepareSong 8s ease 8s alternate 3;
+}
+
+.thanos {
+  width: 100px;
+  -webkit-animation: moveThanos 5s linear infinite;
+          animation: moveThanos 5s linear infinite;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 25;
+  border-radius: 50%;
+}
+
+@-webkit-keyframes moveThanos {
+  0%,
+  100% { transform: translate(0, 0); }
+  25% { transform: translate(90vw, 75vh); }
+  50% { transform: translate(90vw, 0); }
+  75% { transform: translate(0, 75vh); }
+}
+
+@keyframes moveThanos {
+  0%,
+  100% { transform: translate(0, 0); }
+  25% { transform: translate(90vw, 75vh); }
+  50% { transform: translate(90vw, 0); }
+  75% { transform: translate(0, 75vh); }
+}
+
+@-webkit-keyframes prepareSong {
+  0% { background: #000; }
+  100% { background: #333; }
+}
+
+@keyframes prepareSong {
+  0% { background: #000; }
+  100% { background: #333; }
+}
+
+body.party {
+  background: var(--body-color, #000);
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  margin-top: 3em;
+}
+
+.casio-pt1 {
+  display: flex;
+  width: 900px;
+  height: 250px;
+  background: var(--casio-bgcolor);
+  border-radius: 4px;
+  font-family: Raleway, Arial, serif;
+  font-weight: 400;
+  font-size: 9px;
+  color: var(--casio-color);
+  padding: 8px 5px 5px 5px;
+  box-shadow:
+    0 2px 1px #fffc inset,
+    1px 1px 0 #0001,
+    1px 1px 0 var(--casio-bgcolor),
+    2px 2px 0 #0003,
+    2px 2px 0 var(--casio-bgcolor),
+    4px 4px 0 #0005,
+    4px 4px 0 var(--casio-bgcolor),
+    6px 6px 0 #0006,
+    6px 6px 0 var(--casio-bgcolor),
+    8px 8px 0 #0007,
+    8px 8px 0 var(--casio-bgcolor),
+    8px 8px 4px #0005;
+}
+
+.casio-pt1 .casio-left {
+    width: 200px;
+    min-width: 200px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+.casio-pt1 .casio-left .speaker-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+
+.casio-pt1 .casio-left .speaker-container .speaker {
+        width: 170px;
+        height: 180px;
+        background:
+          repeating-linear-gradient(to bottom, #0003 0 2px, #0005 2px 3px, transparent 3px 7px),
+          linear-gradient(
+            to right,
+            transparent 0 32%,
+            var(--casio-bgcolor) 32% 35%,
+            transparent 35% 66%,
+            var(--casio-bgcolor) 66% 68%,
+            transparent 68% 100%
+          ),
+          radial-gradient(circle, #0001 65%, transparent 65% 100%);
+      }
+
+.casio-pt1 .casio-left .speaker-bottom {
+      width: 100%;
+      height: 50px;
+      display: flex;
+    }
+
+.casio-pt1 .casio-left .speaker-bottom .power {
+        width: 60px;
+        height: 90%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+
+.casio-pt1 .casio-left .speaker-bottom .power .led {
+          width: 12px;
+          height: 4px;
+          background: #2f1f2a;
+        }
+
+.casio-pt1 .casio-left .speaker-bottom .power .led.on {
+            background: #c01812;
+          }
+
+.casio-pt1 .casio-left .speaker-bottom .logo {
+        display: flex;
+        width: 100%;
+        align-items: baseline;
+      }
+
+.casio-pt1 .casio-left .speaker-bottom .logo .brand {
+          font-family: "Michroma", sans-serif;
+          font-weight: bold;
+          font-size: 16px;
+          margin-left: 6px;
+        }
+
+.casio-pt1 .casio-left .speaker-bottom .logo .model {
+          font-family: "Tourney", serif;
+          font-weight: normal;
+          font-size: 18px;
+          margin-left: 6px;
+        }
+
+.casio-pt1 .casio-right {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    padding-right: 8px;
+  }
+
+.casio-pt1 .casio-right .casio-controls {
+      min-height: 80px;
+      border-top: 2px solid var(--casio-color);
+    }
+
+.casio-pt1 .casio-right .casio-controls .controls-label {
+        display: flex;
+        align-items: flex-end;
+        font-size: 9px;
+      }
+
+.casio-pt1 .casio-right .casio-controls .controls-label .group {
+          display: inline-flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
+.casio-pt1 .casio-right .casio-controls .controls-label .group.buttons .semi.box {
+              border-bottom: 0;
+              border-radius: 2px 2px 0 0;
+              padding: 2px 3px;
+              position: absolute;
+              height: 10px;
+              transform: translate(-28px, -2px);
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-label .group.buttons .options {
+              display: flex;
+              align-items: flex-end;
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-label .group.buttons span:not(.fill)::after {
+              content: "▪";
+              display: block;
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-label .group.buttons .fill {
+              margin: 0 2px;
+              display: flex;
+              justify-content: center;
+              width: 5px;
+              text-align: center;
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-label .group.buttons .arrow {
+              width: 4px;
+              margin: 0 6px;
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-label .group .box {
+            display: inline-block;
+            border: 1px solid var(--casio-color);
+            border-radius: 2px;
+            padding: 0 10px;
+            font-size: 10px;
+            margin: 4px;
+          }
+
+.casio-pt1 .casio-right .casio-controls .controls-label .group .box.last {
+              margin-left: 2em;
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-label .group .fill {
+            background: var(--casio-color);
+            color: var(--casio-bgcolor);
+          }
+
+.casio-pt1 .casio-right .casio-controls .controls-label .group .options {
+            display: flex;
+          }
+
+.casio-pt1 .casio-right .casio-controls .controls-label .group .options > span {
+              display: inline-block;
+              max-width: 26px;
+              padding: 2px 5px;
+              text-align: center;
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-label .group .options > span.inline {
+                max-width: none;
+                width: 42px;
+              }
+
+.casio-pt1 .casio-right .casio-controls .controls-label .group .options .volume {
+              -webkit-clip-path: polygon(0 50%, 100% 15%, 100% 85%, 0 50%);
+                      clip-path: polygon(0 50%, 100% 15%, 100% 85%, 0 50%);
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-label > :nth-child(4) .options {
+          margin-left: 6px;
+        }
+
+.casio-pt1 .casio-right .casio-controls .controls-label > :nth-child(4) .options > span { width: 20px; }
+
+.casio-pt1 .casio-right .casio-controls .controls-label > :nth-child(4) .options > span:nth-child(n+7) {
+            transform: translateX(-3px);
+          }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons {
+        width: 100%;
+        height: 25px;
+        margin: 4px 0;
+      }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid {
+          border: 1px solid #0004;
+          border-bottom-color: #fff4;
+          border-right-color: #fff4;
+          width: 100%;
+          height: 100%;
+          background:
+            linear-gradient(to bottom, var(--casio-bgcolor) 0 15%, transparent 15% 85%, var(--casio-bgcolor) 85% 100%),
+            repeating-linear-gradient(to right, transparent 0 2px, #0004 2px 3px);
+          display: flex;
+          align-items: center;
+        }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid > div {
+            background: var(--casio-bgcolor);
+            padding: 0 6px;
+          }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid > div:nth-child(1) { margin-left: 32px; }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid > div:nth-child(2) { margin-left: 36px; }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid > div:nth-child(3) { margin-left: 38px; }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid > div:nth-child(4) { margin-left: 36px; }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid > div:nth-child(5) { margin-left: 38px; }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .group {
+            display: flex;
+            justify-content: space-around;
+          }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .group.buttons .button {
+              margin: 0 10px;
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .group.end {
+              margin-left: 24px;
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .group.end .big {
+                margin: 0 4px;
+              }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .button {
+            display: inline-block;
+            border: 0;
+            width: 8px;
+            height: 18px;
+            background: black;
+            box-shadow:
+              1px 1px 2px #0006,
+              1px 0 0 #fff5 inset;
+          }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .button:active {
+              box-shadow: 0 0 3px #0005 inset;
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .big.button {
+            width: 26px;
+            background-image:
+              linear-gradient(to top, #44517a 0 20%, transparent 20% 80%, #44517a 80% 100%),
+              repeating-linear-gradient(to top, transparent 0 1px, #0003 1px 2px);
+          }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .steelblue { background: #44517a; }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .orange { background: #b34431; }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .gold { background: #b67523; }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .green { background: #398d79; }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .grey { background: #53586b; }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider {
+            display: flex;
+            align-items: center;
+            height: 18px;
+            border: 1px solid #0004;
+            border-bottom-color: #fff7;
+            border-right-color: #fff7;
+            box-shadow: 2px 2px 2px #0003 inset;
+          }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input {
+              display: none;
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input + label {
+              display: block;
+              width: 12px;
+              height: 8px;
+              background: #000;
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input:checked + label {
+              height: 16px;
+              background: transparent;
+              display: flex;
+              position: relative;
+            }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input:checked + label::before,
+              .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input:checked + label::after {
+                content: "";
+                display: block;
+                background: #444;
+                width: 5px;
+                border-radius: 1px;
+                border-right: 1px solid #222;
+                height: 16px;
+                position: absolute;
+              }
+
+.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input:checked + label::after { right: 0; }
+
+.casio-pt1 .casio-right .keys-container {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      border-top: 4px solid var(--casio-color);
+      position: relative;
+    }
+
+.casio-pt1 .casio-right .keys-container .name-keys {
+        min-height: 15px;
+        display: flex;
+      }
+
+.casio-pt1 .casio-right .keys-container .name-keys .key-name {
+          width: 100%;
+          text-align: center;
+          position: relative;
+        }
+
+.casio-pt1 .casio-right .keys-container .name-keys .key-name[data-rhytm]::before {
+            content: attr(data-rhytm);
+          }
+
+.casio-pt1 .casio-right .keys-container .name-keys .key-name:nth-child(9)::before {
+              width: 200%;
+              position: absolute;
+              left: -50%;
+            }
+
+.casio-pt1 .casio-right .keys-container .name-keys .key-name:nth-child(9)::after {
+              margin-top: 10px;
+            }
+
+.casio-pt1 .casio-right .keys-container .name-keys .key-name[data-rhytm]::after {
+            content: "|";
+            display: block;
+          }
+
+.casio-pt1 .casio-right .keys-container .name-keys .instrument-type {
+          font-size: 8px;
+          position: absolute;
+          right: 0;
+        }
+
+.casio-pt1 .casio-right .keys-container .keys {
+        min-height: 135px;
+        position: relative;
+        box-shadow: 0 1px 0 1px #1113;
+      }
+
+.casio-pt1 .casio-right .keys-container .keys .black-keys {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 73px;
+          display: flex;
+          justify-content: space-evenly;
+        }
+
+.casio-pt1 .casio-right .keys-container .keys .black-keys .black.key {
+            grid-area: key;
+            width: 22px;
+            height: 100%;
+            background-color: #111;
+            background-image:
+              linear-gradient(to right, #111 0 2px, transparent 2px),
+              linear-gradient(to left, #111 0 2px, transparent 2px),
+              linear-gradient(to top, transparent 0 3px, #fff8 4px 5px, transparent 8px);
+            border: 1px outset #ccc;
+            border-top: 0;
+            border-bottom-left-radius: 4px;
+            border-bottom-right-radius: 4px;
+            position: relative;
+            z-index: 10;
+          }
+
+.casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:nth-child(2),
+            .casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:nth-child(4),
+            .casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:nth-child(7),
+            .casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:nth-child(9) {
+              margin-right: 28px;
+            }
+
+.casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:active,
+            .casio-pt1 .casio-right .keys-container .keys .black-keys .black.key.active {
+              z-index: 8;
+              background-image:
+                linear-gradient(to right, #111 0 2px, transparent 2px),
+                linear-gradient(to left, #111 0 2px, transparent 2px),
+                linear-gradient(to top, transparent 0 1px, #fff3 2px 3px, transparent 6px);
+            }
+
+.casio-pt1 .casio-right .keys-container .keys .white-keys {
+          display: flex;
+          height: 100%;
+        }
+
+.casio-pt1 .casio-right .keys-container .keys .white-keys .white.key {
+            width: 100%;
+            height: 136px;
+            background: #fff;
+            border: 1px solid #ccc;
+            border-left: 2px solid #fff;
+            border-right: 2px solid #ddd;
+            border-top: 0;
+            border-bottom-left-radius: 4px;
+            border-bottom-right-radius: 4px;
+            position: relative;
+            z-index: 5;
+            box-shadow: 0 2px 2px #0004;
+          }
+
+.casio-pt1 .casio-right .keys-container .keys .white-keys .white.key::after {
+              content: "";
+              display: block;
+              background: linear-gradient(to bottom, #0006 0 1px, #0005 2px 10px, transparent 15% 100%);
+              width: 100%;
+              height: 100%;
+              position: absolute;
+              top: 0;
+            }
+
+.casio-pt1 .casio-right .keys-container .keys .white-keys .white.key:active,
+            .casio-pt1 .casio-right .keys-container .keys .white-keys .white.key.active {
+              transform: translate(2px, 0);
+              z-index: 2;
+              border-top: 2px solid #fff;
+              box-shadow: 0 0 2px #0004;
+            }
+
+.casio-pt1 .casio-right .keys-container .keys .white-keys .white.key:active::after, .casio-pt1 .casio-right .keys-container .keys .white-keys .white.key.active::after {
+                transform: translate(-2px, -2px);
+              }
+
+.casio-pt1 .casio-right .keys-container .note-keys {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        font-size: 8px;
+        justify-content: space-around;
+        transform: translateY(3px);
+        box-shadow: 0 5px 4px #0005 inset;
+        border-right: 1px solid #fff2;
+        border-top: 1px solid #0007;
+        position: relative;
+        top: -2px;
+        left: -1px;
+        padding: 0 1px;
+      }
+
+.created {
+  background: 
+    url(https://assets.codepen.io/154065/internal/avatars/users/default.png),
+    linear-gradient(to bottom, #884ced, #ec1cce);
+  background-size: 75px 75px, cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 250px;
+  height: 75px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-left: 2em;
+}
+
+.created span,
+  .created h2,
+  .created p,
+  .created a {
+    font-family: Montserrat;
+    margin: 0;
+  }
+
+.created a,
+  .created p,
+  .created span {
+    color: #fff;    
+  }
+
+.created h2 {
+    font-weight: 700;
+    transform: translate(0, -4px);    
+  }
+
+.created a {
+    -webkit-text-decoration-color: rgba(255,255,255,0.4);
+            text-decoration-color: rgba(255,255,255,0.4);
+  }
+
+.created a:hover {
+    color: #e6e82a;
+  }
\ No newline at end of file
diff --git a/casio-pt-1-with-html-css-js/license.txt b/casio-pt-1-with-html-css-js/license.txt
new file mode 100644
index 0000000..aed1e82
--- /dev/null
+++ b/casio-pt-1-with-html-css-js/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Manz (https://codepen.io/manz/pen/KKmdjQZ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/casio-pt-1-with-html-css-js/src/index.html b/casio-pt-1-with-html-css-js/src/index.html
new file mode 100644
index 0000000..852408b
--- /dev/null
+++ b/casio-pt-1-with-html-css-js/src/index.html
@@ -0,0 +1,215 @@
+<div class="colorButtons">
+    <button class="mode1"></button>
+    <button class="mode2"></button>
+    <button class="mode3"></button>
+    <button class="mode4"></button>
+  </div>
+
+  <div class="container">
+    <div class="casio-pt1">
+      <div class="casio-left">
+        <div class="speaker-container">
+          <div class="speaker"></div>
+        </div>
+        <div class="speaker-bottom">
+          <div class="power">
+            <div class="led on"></div>
+            <span>power</span>
+          </div>
+          <div class="logo">
+            <span class="brand">CASIO</span>
+            <div class="model">PT-1</div>
+          </div>
+        </div>
+      </div>
+      <div class="casio-right">
+        <div class="casio-controls">
+          <div class="controls-label">
+            <div class="group">
+              <div class="box">mode</div>
+              <div class="options">
+                <span class="fill inline">power off</span>
+                <span>record</span>
+                <span>play</span>
+              </div>
+            </div>
+            <div class="group">
+              <div class="box">volume</div>
+              <div class="options">
+                <span>min</span>
+                <span class="volume">||||||||||</span>
+                <span>max</span>
+              </div>
+            </div>
+
+            <div class="group">
+              <div class="box">tone</div>
+              <div class="options">
+                <span>piano</span>
+                <span>fantasy</span>
+                <span>violin</span>
+                <span>flute</span>
+              </div>
+            </div>
+
+            <div class="buttons group">
+              <div class="options">
+                <span>clear</span>
+                <span>del.</span>
+                <span class="arrow fill">▼</span>
+                <span class="arrow fill">▲</span>
+                <span>rhythm select</span>
+                <span>reset</span>
+                <span>demo</span>
+                <span>memory play</span>
+              </div>
+              <div class="semi box">tempo</div>
+            </div>
+
+            <div class="group">
+              <div class="last box">one key play</div>
+            </div>
+          </div>
+          <div class="controls-buttons">
+            <div class="grid">
+              <div class="mode slider">
+                <input id="off" type="radio" name="mode" value="off">
+                <label for="off"></label>
+
+                <input id="record" type="radio" name="mode" value="record">
+                <label for="record"></label>
+
+                <input id="play" type="radio" name="mode" value="play" checked>
+                <label for="play"></label>
+              </div>
+              <div class="volume slider">
+                <input id="v0" type="radio" name="volume" value="0">
+                <label for="v0"></label>
+
+                <input id="v1" type="radio" name="volume" value="0.25">
+                <label for="v1"></label>
+
+                <input id="v2" type="radio" name="volume" value="0.5">
+                <label for="v2"></label>
+
+                <input id="v3" type="radio" name="volume" value="0.75">
+                <label for="v3"></label>
+
+                <input id="v4" type="radio" name="volume" value="1" checked>
+                <label for="v4"></label>
+              </div>
+              <div class="tone slider">
+                <input id="piano" type="radio" name="tone" value="piano" checked>
+                <label for="piano"></label>
+
+                <input id="fantasy" type="radio" name="tone" value="fantasy">
+                <label for="fantasy"></label>
+
+                <input id="violin" type="radio" name="tone" value="violin">
+                <label for="violin"></label>
+
+                <input id="flute" type="radio" name="tone" value="flute">
+                <label for="flute"></label>
+              </div>
+              <div class="buttons group">
+                <div class="button steelblue" data-type="clear"></div>
+                <div class="button orange" data-type="del"></div>
+                <div class="button orange" data-type="down"></div>
+                <div class="button orange" data-type="up"></div>
+                <div class="button orange" data-type="rhythm"></div>
+                <div class="button gold" data-type="reset"></div>
+                <div class="button green" data-type="demo"></div>
+                <div class="button grey" data-type="memory"></div>
+              </div>
+              <div class="end group">
+                <div class="big button steelblue"></div>
+                <div class="big button steelblue"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="keys-container">
+          <div class="name-keys">
+            <div class="key-name"></div>
+            <div class="key-name"></div>
+            <div class="key-name" data-rhytm="march"></div>
+            <div class="key-name" data-rhytm="waltz"></div>
+            <div class="key-name" data-rhytm="4beat"></div>
+            <div class="key-name" data-rhytm="swing"></div>
+            <div class="key-name" data-rhytm="rock1"></div>
+            <div class="key-name" data-rhytm="rock2"></div>
+            <div class="key-name" data-rhytm="bossa nova"></div>
+            <div class="key-name" data-rhytm="samba"></div>
+            <div class="key-name" data-rhytm="rhumba"></div>
+            <div class="key-name" data-rhytm="beguine"></div>
+            <div class="key-name"></div>
+            <div class="key-name"></div>
+            <div class="key-name"></div>
+            <div class="key-name"></div>
+            <div class="key-name"></div>
+            <div class="instrument-type">ELECTRONIC MUSICAL INSTRUMENT</div>
+          </div>
+          <div class="keys">
+            <div class="black-keys">
+              <div class="black key" data-note="G#3"></div>
+              <div class="black key" data-note="A#3"></div>
+              <div class="black key" data-note="C#4"></div>
+              <div class="black key" data-note="D#4"></div>
+              <div class="black key" data-note="F#4"></div>
+              <div class="black key" data-note="G#4"></div>
+              <div class="black key" data-note="A#4"></div>
+              <div class="black key" data-note="C#5"></div>
+              <div class="black key" data-note="D#5"></div>
+              <div class="black key" data-note="F#5"></div>
+              <div class="black key" data-note="G#5"></div>
+              <div class="black key" data-note="A#5"></div>
+            </div>
+            <div class="white-keys">
+              <div class="white key" data-note="G3"></div>
+              <div class="white key" data-note="A3"></div>
+              <div class="white key" data-note="B3"></div>
+              <div class="white key" data-note="C4"></div>
+              <div class="white key" data-note="D4"></div>
+              <div class="white key" data-note="E4"></div>
+              <div class="white key" data-note="F4"></div>
+              <div class="white key" data-note="G4"></div>
+              <div class="white key" data-note="A4"></div>
+              <div class="white key" data-note="B4"></div>
+              <div class="white key" data-note="C5"></div>
+              <div class="white key" data-note="D5"></div>
+              <div class="white key" data-note="E5"></div>
+              <div class="white key" data-note="F5"></div>
+              <div class="white key" data-note="G5"></div>
+              <div class="white key" data-note="A5"></div>
+              <div class="white key" data-note="B5"></div>
+            </div>
+          </div>
+          <div class="note-keys">
+            <div class="note">G</div>
+            <div class="note">A</div>
+            <div class="note">B</div>
+            <div class="note">C</div>
+            <div class="note">D</div>
+            <div class="note">E</div>
+            <div class="note">F</div>
+            <div class="note">G</div>
+            <div class="note">A</div>
+            <div class="note">B</div>
+            <div class="note">C</div>
+            <div class="note">D</div>
+            <div class="note">E</div>
+            <div class="note">F</div>
+            <div class="note">G</div>
+            <div class="note">A</div>
+            <div class="note">B</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+<div class="created">
+  <span>Created by</span>
+  <a href="https://manz.dev/"><h2>Manz.dev</h2></a>
+  <p>on <a href="https://twitch.tv/ManzDev">Twitch</a> / <a href="https://youtube.com/c/ManzDev/videos">Youtube</a></p>
+</div>
\ No newline at end of file
diff --git a/casio-pt-1-with-html-css-js/src/script.babel b/casio-pt-1-with-html-css-js/src/script.babel
new file mode 100644
index 0000000..4b2de1b
--- /dev/null
+++ b/casio-pt-1-with-html-css-js/src/script.babel
@@ -0,0 +1,172 @@
+import Soundfont from "https://cdn.skypack.dev/soundfont-player";
+
+const NOTES = {
+  "keyz": "G3",
+  "keyx": "A3",
+  "keyc": "B3",
+  "keyv": "C4",
+  "keyb": "D4",
+  "keyn": "E4",
+  "keym": "F4",
+  "keyq": "G4",
+  "keyw": "A4",
+  "keye": "B4",
+  "keyr": "C5",
+  "keyt": "D5",
+  "keyy": "E5",
+  "keyu": "F5",
+  "keyi": "G5",
+  "keyo": "A5",
+  "keyp": "B5",
+  "keys": "G#3",
+  "keyd": "A#3",
+  "keyg": "C#4",
+  "keyh": "D#4",
+  "keyk": "F#4",
+  "keyl": "G#4",
+  "keyñ": "A#4",
+  "key5": "C#5",
+  "key6": "D#5",
+  "key8": "F#5",
+  "key9": "G#5",
+  "key0": "A#5"
+};
+
+const ac = new AudioContext();
+const options = { soundfont: "FluidR3_GM" };
+const cumbiaSong = new Audio("https://manzdev.github.io/twitch-casio-pt1/cumbia.mp3");
+cumbiaSong.volume = 0.45;
+const playingNotes = {};
+let currentInstrument = "piano";
+let currentVolume = 1;
+let thanosMode = false;
+
+const COLORMODES = [
+  { bgcolor: "#171e27", color: "#909eb4" },
+  { bgcolor: "#c0beaf", color: "#4d1210" },
+  { bgcolor: "#c02628", color: "#e17d75" },
+  { bgcolor: "#becedd", color: "#6b799e" },
+];
+
+const colorsButtons = document.querySelectorAll(".colorButtons button");
+colorsButtons.forEach((button, index) => {
+  button.style.setProperty("--casio-bgcolor", COLORMODES[index].bgcolor);
+  button.style.setProperty("--casio-color", COLORMODES[index].color);
+  button.addEventListener("click", () => {
+    document.body.style.setProperty("--casio-bgcolor", COLORMODES[index].bgcolor);
+    document.body.style.setProperty("--casio-color", COLORMODES[index].color);
+  });
+});
+
+const instruments = {
+  piano: "acoustic_grand_piano",
+  fantasy: "lead_2_sawtooth",
+  violin: "violin",
+  flute: "flute"
+};
+
+for (const pair of Object.entries(instruments)) {
+  const [key, value] = pair;
+  Soundfont.instrument(ac, value, options)
+    .then(data => { instruments[key] = data; });
+}
+
+const play = (instrument, note, duration = 6) => {
+  playingNotes[note] = instruments[instrument].start(note, ac.currentTime, { duration, gain: currentVolume });
+};
+
+const stop = (note) => {
+  const playingNote = playingNotes[note];
+  playingNote.stop();
+  playingNotes[note] = null;
+};
+
+const pianoKeys = document.querySelectorAll(".key");
+pianoKeys.forEach(key => {
+  const note = key.dataset.note;
+  key.addEventListener("mousedown", () => play(currentInstrument, note));
+  key.addEventListener("mouseleave", () => playingNotes[note] && stop(note));
+  key.addEventListener("mouseup", () => playingNotes[note] && stop(note));
+});
+
+document.addEventListener("keydown", (ev) => {
+  const id = `key${ev.key}`;
+  const note = NOTES[id];
+  if (!playingNotes[note] && note) {
+    const key = document.querySelector(`[data-note="${note}"]`);
+    key.classList.add("active");
+    play(currentInstrument, note);
+  }
+});
+
+document.addEventListener("keyup", (ev) => {
+  const id = `key${ev.key}`;
+  const note = NOTES[id];
+  if (playingNotes[note] && note) {
+    const key = document.querySelector(`[data-note="${note}"]`);
+    key.classList.remove("active");
+    stop(note);
+  }
+});
+
+const toneSliders = document.querySelectorAll(".tone input");
+toneSliders.forEach(input => {
+  input.addEventListener("click", () => {
+    const instrument = input.id;
+    currentInstrument = String(instrument);
+  });
+});
+
+const volumeSliders = document.querySelectorAll(".volume input");
+volumeSliders.forEach(input => {
+  input.addEventListener("click", () => {
+    const volume = input.value;
+    currentVolume = Number(volume);
+  });
+});
+
+// Thanos egg easter
+const COLORS = ["#d81313", "#eace17", "#33ea12", "#12eae3", "#101eea", "#ea10e3"];
+
+const changeColor = () => {
+  setTimeout(() => {
+    const color = COLORS[~~(Math.random() * COLORS.length)];
+    document.body.classList.remove("dark");
+    document.body.style.setProperty("--body-color", color);
+    if (thanosMode) { setTimeout(() => changeColor(), 350); }
+  }, 350);
+};
+
+const disableThanosMode = () => {
+  document.body.classList.remove(...["dark", "party"]);
+  const thanosImage = document.querySelector(".thanos");
+  thanosImage && thanosImage.remove();
+  thanosMode = false;
+  cumbiaSong.pause();
+};
+
+const enableThanosMode = () => {
+  thanosMode = true;
+  cumbiaSong.currentTime = 0;
+  cumbiaSong.play();
+  document.body.classList.add("dark");
+
+  // Thanos image add
+  setTimeout(() => {
+    const image = document.createElement("img");
+    image.src = "https://manzdev.github.io/twitch-casio-pt1/thanos.png";
+    image.className = "thanos";
+    document.body.appendChild(image);
+  }, 18000);
+
+  // Party mode
+  setTimeout(() => {
+    document.body.classList.add("party");
+    changeColor();
+  }, 27000);
+};
+
+const demoButton = document.querySelector("[data-type=demo");
+demoButton.addEventListener("click", () => {
+  if (cumbiaSong.paused) { enableThanosMode(); } else { disableThanosMode(); }
+});
\ No newline at end of file
diff --git a/casio-pt-1-with-html-css-js/src/style.css b/casio-pt-1-with-html-css-js/src/style.css
new file mode 100644
index 0000000..b1b4cbd
--- /dev/null
+++ b/casio-pt-1-with-html-css-js/src/style.css
@@ -0,0 +1,612 @@
+@use postcss-nested;
+
+@font-face {
+  font-family: Michroma;
+  src:
+    url(https://manzdev.github.io/twitch-casio-pt1/michroma.woff2) format("woff2"),
+    url(https://manzdev.github.io/twitch-casio-pt1/michroma.woff) format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Tourney;
+  src:
+    url(https://manzdev.github.io/twitch-casio-pt1/tourney.woff2) format("woff2"),
+    url(https://manzdev.github.io/twitch-casio-pt1/tourney.woff) format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Raleway;
+  src:
+    url(/raleway.woff2) format("woff2"),
+    url(/raleway.woff) format("woff");
+  font-display: swap;
+}
+
+:root {
+  --casio-bgcolor: #171e27;
+  --casio-color: #909eb4;
+}
+
+.colorButtons {
+  display: flex;
+  justify-content: center;
+  padding: 0 10px;
+
+  & button {
+    width: 25px;
+    height: 25px;
+    margin: 0 5px;
+    border-radius: 5px;
+    border: 2px solid var(--casio-color);
+    background: var(--casio-bgcolor);
+  }
+}
+
+body {
+  transition: background 1s;
+}
+
+body.dark {
+  background: #000;
+  animation: prepareSong 8s ease 8s alternate 3;
+}
+
+.thanos {
+  width: 100px;
+  animation: moveThanos 5s linear infinite;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 25;
+  border-radius: 50%;
+}
+
+@keyframes moveThanos {
+  0%,
+  100% { transform: translate(0, 0); }
+  25% { transform: translate(90vw, 75vh); }
+  50% { transform: translate(90vw, 0); }
+  75% { transform: translate(0, 75vh); }
+}
+
+@keyframes prepareSong {
+  0% { background: #000; }
+  100% { background: #333; }
+}
+
+body.party {
+  background: var(--body-color, #000);
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  margin-top: 3em;
+}
+
+.casio-pt1 {
+  display: flex;
+  width: 900px;
+  height: 250px;
+  background: var(--casio-bgcolor);
+  border-radius: 4px;
+  font-family: Raleway, Arial, serif;
+  font-weight: 400;
+  font-size: 9px;
+  color: var(--casio-color);
+  padding: 8px 5px 5px 5px;
+  box-shadow:
+    0 2px 1px #fffc inset,
+    1px 1px 0 #0001,
+    1px 1px 0 var(--casio-bgcolor),
+    2px 2px 0 #0003,
+    2px 2px 0 var(--casio-bgcolor),
+    4px 4px 0 #0005,
+    4px 4px 0 var(--casio-bgcolor),
+    6px 6px 0 #0006,
+    6px 6px 0 var(--casio-bgcolor),
+    8px 8px 0 #0007,
+    8px 8px 0 var(--casio-bgcolor),
+    8px 8px 4px #0005;
+
+  & .casio-left {
+    width: 200px;
+    min-width: 200px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+
+    & .speaker-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+
+      & .speaker {
+        width: 170px;
+        height: 180px;
+        background:
+          repeating-linear-gradient(to bottom, #0003 0 2px, #0005 2px 3px, transparent 3px 7px),
+          linear-gradient(
+            to right,
+            transparent 0 32%,
+            var(--casio-bgcolor) 32% 35%,
+            transparent 35% 66%,
+            var(--casio-bgcolor) 66% 68%,
+            transparent 68% 100%
+          ),
+          radial-gradient(circle, #0001 65%, transparent 65% 100%);
+      }
+    }
+
+    & .speaker-bottom {
+      width: 100%;
+      height: 50px;
+      display: flex;
+
+      & .power {
+        width: 60px;
+        height: 90%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        & .led {
+          width: 12px;
+          height: 4px;
+          background: #2f1f2a;
+
+          &.on {
+            background: #c01812;
+          }
+        }
+      }
+
+      & .logo {
+        display: flex;
+        width: 100%;
+        align-items: baseline;
+
+        & .brand {
+          font-family: "Michroma", sans-serif;
+          font-weight: bold;
+          font-size: 16px;
+          margin-left: 6px;
+        }
+
+        & .model {
+          font-family: "Tourney", serif;
+          font-weight: normal;
+          font-size: 18px;
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+
+  & .casio-right {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    padding-right: 8px;
+
+    & .casio-controls {
+      min-height: 80px;
+      border-top: 2px solid var(--casio-color);
+
+      & .controls-label {
+        display: flex;
+        align-items: flex-end;
+        font-size: 9px;
+
+        & .group {
+          display: inline-flex;
+          flex-direction: column;
+          align-items: center;
+
+          &.buttons {
+            & .semi.box {
+              border-bottom: 0;
+              border-radius: 2px 2px 0 0;
+              padding: 2px 3px;
+              position: absolute;
+              height: 10px;
+              transform: translate(-28px, -2px);
+            }
+
+            & .options {
+              display: flex;
+              align-items: flex-end;
+            }
+
+            & span:not(.fill)::after {
+              content: "▪";
+              display: block;
+            }
+
+            & .fill {
+              margin: 0 2px;
+              display: flex;
+              justify-content: center;
+              width: 5px;
+              text-align: center;
+            }
+
+            & .arrow {
+              width: 4px;
+              margin: 0 6px;
+            }
+          }
+
+          & .box {
+            display: inline-block;
+            border: 1px solid var(--casio-color);
+            border-radius: 2px;
+            padding: 0 10px;
+            font-size: 10px;
+            margin: 4px;
+
+            &.last {
+              margin-left: 2em;
+            }
+          }
+
+          & .fill {
+            background: var(--casio-color);
+            color: var(--casio-bgcolor);
+          }
+
+          & .options {
+            display: flex;
+
+            & > span {
+              display: inline-block;
+              max-width: 26px;
+              padding: 2px 5px;
+              text-align: center;
+
+              &.inline {
+                max-width: none;
+                width: 42px;
+              }
+            }
+
+            & .volume {
+              clip-path: polygon(0 50%, 100% 15%, 100% 85%, 0 50%);
+            }
+          }
+        }
+
+        & > :nth-child(4) .options {
+          margin-left: 6px;
+
+          & > span { width: 20px; }
+
+          & > span:nth-child(n+7) {
+            transform: translateX(-3px);
+          }
+        }
+      }
+
+      & .controls-buttons {
+        width: 100%;
+        height: 25px;
+        margin: 4px 0;
+
+        & .grid {
+          border: 1px solid #0004;
+          border-bottom-color: #fff4;
+          border-right-color: #fff4;
+          width: 100%;
+          height: 100%;
+          background:
+            linear-gradient(to bottom, var(--casio-bgcolor) 0 15%, transparent 15% 85%, var(--casio-bgcolor) 85% 100%),
+            repeating-linear-gradient(to right, transparent 0 2px, #0004 2px 3px);
+          display: flex;
+          align-items: center;
+
+          & > div {
+            background: var(--casio-bgcolor);
+            padding: 0 6px;
+
+            &:nth-child(1) { margin-left: 32px; }
+            &:nth-child(2) { margin-left: 36px; }
+            &:nth-child(3) { margin-left: 38px; }
+            &:nth-child(4) { margin-left: 36px; }
+            &:nth-child(5) { margin-left: 38px; }
+          }
+
+          & .group {
+            display: flex;
+            justify-content: space-around;
+
+            &.buttons .button {
+              margin: 0 10px;
+            }
+
+            &.end {
+              margin-left: 24px;
+
+              & .big {
+                margin: 0 4px;
+              }
+            }
+          }
+
+          & .button {
+            display: inline-block;
+            border: 0;
+            width: 8px;
+            height: 18px;
+            background: black;
+            box-shadow:
+              1px 1px 2px #0006,
+              1px 0 0 #fff5 inset;
+
+            &:active {
+              box-shadow: 0 0 3px #0005 inset;
+            }
+          }
+
+          & .big.button {
+            width: 26px;
+            background-image:
+              linear-gradient(to top, #44517a 0 20%, transparent 20% 80%, #44517a 80% 100%),
+              repeating-linear-gradient(to top, transparent 0 1px, #0003 1px 2px);
+          }
+
+          & .steelblue { background: #44517a; }
+          & .orange { background: #b34431; }
+          & .gold { background: #b67523; }
+          & .green { background: #398d79; }
+          & .grey { background: #53586b; }
+
+          & .slider {
+            display: flex;
+            align-items: center;
+            height: 18px;
+            border: 1px solid #0004;
+            border-bottom-color: #fff7;
+            border-right-color: #fff7;
+            box-shadow: 2px 2px 2px #0003 inset;
+
+            & input {
+              display: none;
+            }
+
+            & input + label {
+              display: block;
+              width: 12px;
+              height: 8px;
+              background: #000;
+            }
+
+            & input:checked + label {
+              height: 16px;
+              background: transparent;
+              display: flex;
+              position: relative;
+
+              &::before,
+              &::after {
+                content: "";
+                display: block;
+                background: #444;
+                width: 5px;
+                border-radius: 1px;
+                border-right: 1px solid #222;
+                height: 16px;
+                position: absolute;
+              }
+              &::after { right: 0; }
+            }
+          }
+        }
+      }
+    }
+
+    & .keys-container {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      border-top: 4px solid var(--casio-color);
+      position: relative;
+
+      & .name-keys {
+        min-height: 15px;
+        display: flex;
+
+        & .key-name {
+          width: 100%;
+          text-align: center;
+          position: relative;
+
+          &[data-rhytm]::before {
+            content: attr(data-rhytm);
+          }
+
+          &:nth-child(9) {
+            &::before {
+              width: 200%;
+              position: absolute;
+              left: -50%;
+            }
+
+            &::after {
+              margin-top: 10px;
+            }
+          }
+
+          &[data-rhytm]::after {
+            content: "|";
+            display: block;
+          }
+        }
+
+        & .instrument-type {
+          font-size: 8px;
+          position: absolute;
+          right: 0;
+        }
+      }
+
+      & .keys {
+        min-height: 135px;
+        position: relative;
+        box-shadow: 0 1px 0 1px #1113;
+
+        & .black-keys {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 73px;
+          display: flex;
+          justify-content: space-evenly;
+
+          & .black.key {
+            grid-area: key;
+            width: 22px;
+            height: 100%;
+            background-color: #111;
+            background-image:
+              linear-gradient(to right, #111 0 2px, transparent 2px),
+              linear-gradient(to left, #111 0 2px, transparent 2px),
+              linear-gradient(to top, transparent 0 3px, #fff8 4px 5px, transparent 8px);
+            border: 1px outset #ccc;
+            border-top: 0;
+            border-bottom-left-radius: 4px;
+            border-bottom-right-radius: 4px;
+            position: relative;
+            z-index: 10;
+
+            &:nth-child(2),
+            &:nth-child(4),
+            &:nth-child(7),
+            &:nth-child(9) {
+              margin-right: 28px;
+            }
+
+            &:active,
+            &.active {
+              z-index: 8;
+              background-image:
+                linear-gradient(to right, #111 0 2px, transparent 2px),
+                linear-gradient(to left, #111 0 2px, transparent 2px),
+                linear-gradient(to top, transparent 0 1px, #fff3 2px 3px, transparent 6px);
+            }
+          }
+        }
+
+        & .white-keys {
+          display: flex;
+          height: 100%;
+
+          & .white.key {
+            width: 100%;
+            height: 136px;
+            background: #fff;
+            border: 1px solid #ccc;
+            border-left: 2px solid #fff;
+            border-right: 2px solid #ddd;
+            border-top: 0;
+            border-bottom-left-radius: 4px;
+            border-bottom-right-radius: 4px;
+            position: relative;
+            z-index: 5;
+            box-shadow: 0 2px 2px #0004;
+
+            &::after {
+              content: "";
+              display: block;
+              background: linear-gradient(to bottom, #0006 0 1px, #0005 2px 10px, transparent 15% 100%);
+              width: 100%;
+              height: 100%;
+              position: absolute;
+              top: 0;
+            }
+
+            &:active,
+            &.active {
+              transform: translate(2px, 0);
+              z-index: 2;
+              border-top: 2px solid #fff;
+              box-shadow: 0 0 2px #0004;
+
+              &::after {
+                transform: translate(-2px, -2px);
+              }
+            }
+          }
+        }
+      }
+
+      & .note-keys {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        font-size: 8px;
+        justify-content: space-around;
+        transform: translateY(3px);
+        box-shadow: 0 5px 4px #0005 inset;
+        border-right: 1px solid #fff2;
+        border-top: 1px solid #0007;
+        position: relative;
+        top: -2px;
+        left: -1px;
+        padding: 0 1px;
+      }
+    }
+  }
+}
+
+.created {
+  background: 
+    url(https://assets.codepen.io/154065/internal/avatars/users/default.png),
+    linear-gradient(to bottom, #884ced, #ec1cce);
+  background-size: 75px 75px, cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 250px;
+  height: 75px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-left: 2em;
+  
+  & span,
+  & h2,
+  & p,
+  & a {
+    font-family: Montserrat;
+    margin: 0;
+  }
+  
+  & a,
+  & p,
+  & span {
+    color: #fff;    
+  }
+  
+  & h2 {
+    font-weight: 700;
+    transform: translate(0, -4px);    
+  }
+  
+  & a {
+    text-decoration-color: rgba(255,255,255,0.4);
+  }
+  
+  & a:hover {
+    color: #e6e82a;
+  }
+}
\ No newline at end of file
diff --git a/casiopt-1-css/README.markdown b/casiopt-1-css/README.markdown
new file mode 100644
index 0000000..5ad7c70
--- /dev/null
+++ b/casiopt-1-css/README.markdown
@@ -0,0 +1,16 @@
+# CasioPT-1.css
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/fossheim/pen/VweaNYW](https://codepen.io/fossheim/pen/VweaNYW).
+
+Vintage Casio PT-1 keyboard drawn entirely with HTML and CSS; using divs, gradients and box-shadows. 
+
+Tutorials on how to make drawings like this: 
+https://fossheim.io/writing/posts/css-macintosh/
+https://fossheim.io/writing/posts/css-polaroid-camera/
+
+GitHub repo with my CSS drawings:
+https://github.com/sarahfossheim/art.css
+
+If you like my work: 
+https://www.buymeacoffee.com/fossheim
+https://www.patreon.com/fossheim
diff --git a/casiopt-1-css/dist/index.html b/casiopt-1-css/dist/index.html
new file mode 100644
index 0000000..ec3f54f
--- /dev/null
+++ b/casiopt-1-css/dist/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CasioPT-1.css</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- tutorials on https://fossheim.io/writing/ -->
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap" rel="stylesheet">
+
+
+<div class="wrapper" aria-label="Casio PT-1 Keyboard illustration made with HTML and CSS">
+            <div class="casio" aria-hidden="true">
+                <div class="speaker"></div>
+                <div class="logo">
+                    <h1><span>Casio</span> <span>PT-1</span></h1>
+                </div>
+                <div class="controls">
+                    <div class="controls-labels">
+                        <p>mode</p>
+                        <p>volume</p>
+                        <p>tone</p>
+                        <p>tempo</p>
+                        <p>one key play</p>
+                    </div>
+                    <div class="controls-bar">
+                        <div class="mode-container">
+                            <div class="mode-bar"></div>
+                            <div class="mode-handle"></div>
+                        </div>
+                        <div class="volume-container">
+                            <div class="volume-bar"></div>
+                            <div class="volume-handle"></div>
+                        </div>
+                        <div class="tone-container">
+                            <div class="tone-bar"></div>
+                            <div class="tone-handle"></div>
+                        </div>
+                        <div class="clear btn"></div>
+                        <div class="del btn"></div>
+                        <div class="down btn"></div>
+                        <div class="up btn"></div>
+                        <div class="select btn"></div>
+                        <div class="reset btn"></div>
+                        <div class="demo btn"></div>
+                        <div class="memory btn"></div>
+                        <div class="onekey-1 bigbtn"></div>
+                        <div class="onekey-2 bigbtn"></div>
+                    </div>
+                </div>
+                <div class="keys-container">
+                    <div class="white">
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                    </div>
+                    <div class="black">
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class=""></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class=""></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class=""></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class=""></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+<!-- 
+  If you like my work: 
+    https://www.buymeacoffee.com/fossheim
+    https://www.patreon.com/fossheim
+-->
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/casiopt-1-css/dist/style.css b/casiopt-1-css/dist/style.css
new file mode 100644
index 0000000..53c2889
--- /dev/null
+++ b/casiopt-1-css/dist/style.css
@@ -0,0 +1,881 @@
+/* tutorials on https://fossheim.io/writing/ */
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #333335;
+    background-color: #E996AF;
+}
+
+.casio {
+    display: block;
+    width: 960px;
+    height: 260px;
+    margin: 100px auto 0 auto;
+    margin: calc(50vh - 150px) auto 0 auto;
+    border-radius: 4px;
+    background-color: #EFEFE7;
+    background-image: linear-gradient(90deg, #EFEFE7, #F4F3EE);
+    position: relative;
+    box-shadow: 0 -2px 2px -0.5px #D0CCC1 inset,
+        2px 0 2px -0.5px #E1DFE0 inset,
+        0 3px 1px #FBFAF8 inset,
+        0 45px 10px -25px rgba(0,0,0,0.1),
+        0 65px 50px -10px rgba(0,0,0,0.05);
+}
+
+.speaker {
+    display: block;
+    width: 180px;
+    height: 200px;
+    position: absolute;
+    top: 12px;
+    left: 14px;
+    border-radius: 0.5px;
+    background-color: #D6C6A2;
+    background-image: linear-gradient(transparent 40%, #EFEFE7 60%),
+        linear-gradient(90deg, #BFA58D, transparent 2% 96%, #C9B59A),
+        linear-gradient(#D1BBA3 20%, transparent 65%),
+        linear-gradient(90deg, #D6C6A2, #E2D9CA),
+        linear-gradient(90deg, #D6C6A2, #E2D9CA),
+        radial-gradient(#897866 60%, transparent 61%);
+    background-size: 100% 8px,
+        100% 100%,
+        100% 8px,
+        6px 100%,
+        6px 100%,
+        190px 190px;
+    background-repeat: repeat,
+        no-repeat,
+        repeat,
+        no-repeat,
+        no-repeat,
+        no-repeat;
+    background-position: 0 0,
+        0 0,
+        0 0,
+        50px 0,
+        120px 0,
+        -7px 7px;
+}
+
+.controls {
+    display: block;
+    width: 745px;
+    height: 80px;
+    background-color: transparent;
+    position: absolute;
+    top: 7px;
+    right: 15px;
+    box-shadow: 0 2px 0.75px -0.8px #543F44 inset, 0 -2.5px 0.75px -0.8px #543F44 inset;
+}
+
+.controls-labels {
+    display: block;
+    width: 745px;
+    height: 30px;
+    font-family: sans-serif;
+    color: #4F4949;
+}
+
+.controls-labels p {
+    font-size: 0.5rem;
+    letter-spacing: 0.5px;
+    display: inline-block;
+    border: 1px solid #7A7174;
+    padding: 0px 8px;
+    border-radius: 2px;
+    position: absolute;
+    top: 4px;
+}
+
+.controls-labels p:nth-child(1) {
+    left: 55px;
+}
+
+.controls-labels p:nth-child(2) {
+    left: 130px;
+    padding: 0 15px;
+}
+
+.controls-labels p:nth-child(3) {
+    left: 265px;
+    padding: 0 15px;
+}
+
+.controls-labels p:nth-child(4) {
+    left: 400px;
+}
+
+.controls-labels p:nth-child(5) {
+    left: 645px;
+    padding: 0 11px;
+}
+
+.controls-bar {
+    display: block;
+    width: 745px;
+    height: 30px;
+    position: absolute;
+    top: 30px;
+    background-image: linear-gradient(
+            90deg, 
+            transparent 0% 2.5%, #DCDCD0 2.5% 5%,
+            transparent 5% 7.5%, #E1DFD3 7.5% 10%,
+            transparent 10% 12.5%, #D5D5CD 12.5% 15%,
+            transparent 15% 17.5%, #DCDCD0 17.5% 20%,
+            transparent 20% 22.5%, #E1DFD3 22.5% 25%,
+            transparent 25% 27.5%, #D5D5CD 27.5% 30%,
+            transparent 30% 32.5%, #DCDCD0 32.5% 35%,
+            transparent 35% 37.5%, #E1DFD3 37.5% 40%,
+            transparent 40% 42.5%, #D5D5CD 42.5% 45%,
+            transparent 45% 47.5%, #DCDCD0 47.5% 50%,
+            transparent 50% 52.5%, #E1DFD3 52.5% 55%,
+            transparent 55% 57.5%, #D5D5CD 57.5% 60%,
+            transparent 60% 62.5%, #DCDCD0 62.5% 65%,
+            transparent 65% 67.5%, #E1DFD3 67.5% 70%,
+            transparent 70% 72.5%, #D5D5CD 72.5% 75%,
+            transparent 75% 77.5%, #DCDCD0 77.5% 80%,
+            transparent 80% 82.5%, #E1DFD3 82.5% 85%,
+            transparent 85% 87.5%, #D5D5CD 87.5% 90%,
+            transparent 90% 92.5%, #DCDCD0 92.5% 95%,
+            transparent 95% 97.5%, #E1DFD3 97.5% 100%
+        ), linear-gradient(
+            90deg, 
+            transparent 0% 7%, #DCDCD0 7% 14%,
+            transparent 14% 21%, #E1DFD3 21% 28%,
+            transparent 28% 35%, #D5D5CD 35% 42%,
+            transparent 42% 49%, #DCDCD0 49% 56%,
+            transparent 56% 63%, #E1DFD3 63% 70%,
+            transparent 70% 77%, #D5D5CD 77% 84%,
+            transparent 84% 91%, #DCDCD0 91% 98%,
+            transparent 98%
+        ), linear-gradient(
+            90deg, 
+            transparent 0% 2.5%, #E0DED1 2.5% 5%,
+            transparent 5% 7.5%, #DDDBCE 7.5% 10%,
+            transparent 10% 12.5%, #DEDCCF 12.5% 15%,
+            transparent 15% 17.5%, #E0DED1 17.5% 20%,
+            transparent 20% 22.5%, #E1DFD3 22.5% 25%,
+            transparent 25% 27.5%, #DDDBCE 27.5% 30%,
+            transparent 30% 32.5%, #DEDCCF 32.5% 35%,
+            transparent 35% 37.5%, #E0DED1 37.5% 40%,
+            transparent 40% 42.5%, #D5D5CD 42.5% 45%,
+            transparent 45% 47.5%, #DDDBCE 47.5% 50%,
+            transparent 50% 52.5%, #E4E2D6 52.5% 55%,
+            transparent 55% 57.5%, #E0DED1 57.5% 60%,
+            transparent 60% 62.5%, #DCDCD0 62.5% 65%,
+            transparent 65% 67.5%, #DDDBCE 67.5% 70%,
+            transparent 70% 72.5%, #DEDCCF 72.5% 75%,
+            transparent 75% 77.5%, #E0DED1 77.5% 80%,
+            transparent 80% 82.5%, #E1DFD3 82.5% 85%,
+            transparent 85% 87.5%, #E4E2D6 87.5% 90%,
+            transparent 90% 92.5%, #E0DED1 92.5% 95%,
+            transparent 95% 97.5%, #E1DFD3 97.5% 100%
+        ), linear-gradient(
+            90deg, 
+            transparent 0% 7%, #CAC8BC 7% 14%,
+            transparent 14% 21%, #DBD9CD 21% 28%,
+            transparent 28% 35%, #D0CEC2 35% 42%,
+            transparent 42% 49%, #CAC8BC 49% 56%,
+            transparent 56% 63%, #DBD9CD 63% 70%,
+            transparent 70% 77%, #D0CEC2 77% 84%,
+            transparent 84% 91%, #CAC8BC 91% 98%,
+            transparent 98%
+        ), linear-gradient(
+            90deg, 
+            transparent 0% 2.5%, #E0DED1 2.5% 5%,
+            transparent 5% 7.5%, #DDDBCE 7.5% 10%,
+            transparent 10% 12.5%, #DEDCCF 12.5% 15%,
+            transparent 15% 17.5%, #E0DED1 17.5% 20%,
+            transparent 20% 22.5%, #E1DFD3 22.5% 25%,
+            transparent 25% 27.5%, #DDDBCE 27.5% 30%,
+            transparent 30% 32.5%, #DEDCCF 32.5% 35%,
+            transparent 35% 37.5%, #E0DED1 37.5% 40%,
+            transparent 40% 42.5%, #D5D5CD 42.5% 45%,
+            transparent 45% 47.5%, #DDDBCE 47.5% 50%,
+            transparent 50% 52.5%, #E4E2D6 52.5% 55%,
+            transparent 55% 57.5%, #E0DED1 57.5% 60%,
+            transparent 60% 62.5%, #DCDCD0 62.5% 65%,
+            transparent 65% 67.5%, #DDDBCE 67.5% 70%,
+            transparent 70% 72.5%, #DEDCCF 72.5% 75%,
+            transparent 75% 77.5%, #E0DED1 77.5% 80%,
+            transparent 80% 82.5%, #E1DFD3 82.5% 85%,
+            transparent 85% 87.5%, #D5D5CD 87.5% 90%,
+            transparent 90% 92.5%, #DCDCD0 92.5% 95%,
+            transparent 95% 97.5%, #E1DFD3 97.5% 100%
+        ), linear-gradient(
+            90deg, 
+            transparent 0% 2.5%, #DCDCD0 2.5% 5%,
+            transparent 5% 7.5%, #E1DFD3 7.5% 10%,
+            transparent 10% 12.5%, #D5D5CD 12.5% 15%,
+            transparent 15% 17.5%, #DCDCD0 17.5% 20%,
+            transparent 20% 22.5%, #E1DFD3 22.5% 25%,
+            transparent 25% 27.5%, #D5D5CD 27.5% 30%,
+            transparent 30% 32.5%, #DCDCD0 32.5% 35%,
+            transparent 35% 37.5%, #E1DFD3 37.5% 40%,
+            transparent 40% 42.5%, #D5D5CD 42.5% 45%,
+            transparent 45% 47.5%, #DCDCD0 47.5% 50%,
+            transparent 50% 52.5%, #E1DFD3 52.5% 55%,
+            transparent 55% 57.5%, #D5D5CD 57.5% 60%,
+            transparent 60% 62.5%, #DCDCD0 62.5% 65%,
+            transparent 65% 67.5%, #DDDBCE 67.5% 70%,
+            transparent 70% 72.5%, #DEDCCF 72.5% 75%,
+            transparent 75% 77.5%, #E0DED1 77.5% 80%,
+            transparent 80% 82.5%, #E1DFD3 82.5% 85%,
+            transparent 85% 87.5%, #E4E2D6 87.5% 90%,
+            transparent 90% 92.5%, #E0DED1 92.5% 95%,
+            transparent 95% 97.5%, #E1DFD3 97.5% 100%
+        ), linear-gradient(
+            90deg, 
+            transparent 0% 7%, #CAC8BC 7% 14%,
+            transparent 14% 21%, #DBD9CD 21% 28%,
+            transparent 28% 35%, #D0CEC2 35% 42%,
+            transparent 42% 49%, #CAC8BC 49% 56%,
+            transparent 56% 63%, #DBD9CD 63% 70%,
+            transparent 70% 77%, #D0CEC2 77% 84%,
+            transparent 84% 91%, #CAC8BC 91% 98%,
+            transparent 98%
+        ), linear-gradient(90deg, #F1EEE7, #EDE8E2, #EBE8E1);
+    background-size: 52px 20px,
+        16px 20px,
+        52px 20px, 
+        16px 20px,
+        52px 20px, 
+        52px 20px,
+        16px 20px,
+        100% 100%;
+    background-repeat: no-repeat;
+    background-position: 1px 5px, 
+        107px 5px, 
+        203px 5px, 
+        325px 5px,
+        537px 5px,
+        589px 5px,
+        730px 5px,
+        top left;
+    box-shadow: 0 2px 1px -1px #C1BEB5 inset, 0 -2px 1px -1px #FCFCFA inset, 1px 0 0.5px -0.5px #DFDFD7 inset, -2.5px 0 1px -1px #D4CDC5 inset;
+    border-radius: 1px;
+}
+
+.mode-container {
+    display: block;
+    width: 45px;
+    height: 20px;
+    border-radius: 2px;
+    background-image: linear-gradient(90deg,#E6E4D7, #EAE7DE);
+    position: absolute;
+    top: 5px;
+    left: 55px;
+    box-shadow: 0 4.5px 1px -2px #837363 inset,
+        4px 0 3px -2px #BEB8A8 inset,
+        -3px 0 2px -2px #DBDBD3 inset,
+        0 -0.5px 1px #DBD8CF inset,
+        0 1px 0.5px -0.75px #FFFCF5;
+}
+
+.mode-bar {
+    display: block;
+    width: 35px;
+    height: 8px;
+    background-color: black;
+    position: absolute;
+    left: 5px;
+    top: 7px;
+    background-image: linear-gradient(#1E1E23 45%, #3D3D3D 55%);
+    border-radius: 1px;
+    box-shadow: 0 -0.5px 0.5px 0 #D6DBDE, 0 0 1px 0.5px #F7F4ED, 0 -1.25px 2px -1px #2A2925 inset, 0 1.25px 2px -1px black inset;
+}
+
+.mode-handle {
+    display: block;
+    width: 14px;
+    height: 7px;
+    border-radius: 3px;
+    position: absolute;
+    top: 8px;
+    left: 7px;
+    background-image: radial-gradient(transparent 40%, #1A1C1D 70%),
+        linear-gradient(#23272A 60%, #484852 70%);
+    box-shadow: 0 1.5px 1px -1px #676B6E inset,
+        1px 3px 2px -2px #6B685F,
+        3px 5px 5px rgba(110, 106, 94, 0.3);
+}
+
+.volume-container {
+    display: block;
+    width: 65px;
+    height: 20px;
+    position: absolute;
+    top: 5px;
+    left: 130px;
+    border-radius: 2px;
+    background-image: linear-gradient(90deg, #E5E0DA, #F0EEE1);
+    box-shadow: 0 1px 0.5px -0.75px #FFFCF5,
+        0 3.5px 1.5px -1.5px #807060 inset,
+        0 -1.75px 2px -2px #ECE9E0 inset,
+        3.5px 0 2px -2px #C7BFB2 inset,
+        -1.5px 0 0.5px -0.75px #DBD8D1 inset,
+        0 -0.5px 1px #D2D1CF;
+}
+
+.volume-bar {
+    display: block;
+    width: 55px;
+    height: 10px;
+    position: absolute;
+    top: 6px;
+    left: 5px;
+    border-radius: 1px;
+    background-image: linear-gradient(#1D1E23 45%, #3F3D40 55%);
+}
+
+.volume-handle {
+    display: block;
+    width: 19px;
+    height: 19px;
+    border-radius: 2px;
+    position: absolute;
+    left: 14px;
+    top: 1px;
+    background-color: #6A6964;
+    background-image: radial-gradient(#262626 50%, #3E3D39 80%),
+        radial-gradient(#353537, #3E3E40 80%, #323031 90%),
+        linear-gradient(#4C4942, #676860 10% 25%, #282C2C 30% 70%, #777370 75%),
+        linear-gradient(#4C4942, #676860 10% 25%, #282C2C 30% 70%, #777370 75%);
+    background-size: 17px 4px,
+        15px 15px,
+        3px 20px,
+        3px 20px;
+    background-repeat: no-repeat;
+    background-position: bottom left,
+        2px 0,
+        top right,
+        top left;
+    box-shadow: 0 1.5px 0.75px -0.5px #454442 inset,
+        0 2px 1px -0.5px #797876 inset,
+        -0.5px 0 0.5px rgba(30,32,36,0.5) inset,
+        5px 0 6px -2px rgba(24,23,28,0.3),
+        0 5px 4px rgba(76,74,72,0.3),
+        0 6px 2px -3px rgba(76,74,72,0.75);
+}
+
+.tone-container {
+    display: block;
+    width: 52px;
+    height: 20px;
+    position: absolute;
+    left: 265px;
+    top: 5px;
+    border-radius: 2px;
+    box-shadow: 0 3.5px 1.5px -1.5px #6B5E4B inset,
+        4px 0 3px -2px #A9A79B inset,
+        -3px 0 2px -2px #D1CAB7 inset,
+        0 -0.5px 1px #DEDCD0 inset,
+        0 1px 0.5px -0.75px #FFFCF5;
+    background-image: linear-gradient(90deg, rgba(207,202,196,0.5), rgba(246,243,226,0.5));
+}
+
+.tone-bar {
+    display: block;
+    width: 45px;
+    height: 9px;
+    position: absolute;
+    left: 3px;
+    top: 6px;
+    background-image: linear-gradient(#282C2D 25%, #3C3D3F 35%, #373739);
+    border-radius: 1px;
+    box-shadow: 0 0.5px 0.5px #F8F5EC,
+        -1px 0 0.5px #CBC8C1,
+        1px 0 0.5px #E9EBDD,
+        0 -1px 0.5px #E2E2E2;
+}
+
+.tone-handle {
+    display: block;
+    position: absolute;
+    width: 19px;
+    height: 18px;
+    border-radius: 2px;
+    left: 5px;
+    top: 1px;
+    background-color: #6A6964;
+    background-image: radial-gradient(#272729, #22211C 60%, #5F5C55),
+        radial-gradient(#3E3F41, #363638 80%, #272729 90%),
+        linear-gradient(#4C4942, #676860 10% 25%, #282C2C 30% 70%, #777370 75%),
+        linear-gradient(#4F4A46, #65645F);
+    background-size: 18px 4px,
+        15px 15px,
+        2px 20px,
+        3px 20px;
+    background-repeat: no-repeat;
+    background-position: bottom left,
+        2.25px 0,
+        top right,
+        top left;
+    box-shadow: 0 1.5px 0.75px -0.5px #494846 inset,
+        0 2.5px 1px -0.75px #313131 inset,
+        -0.75px 0 0.5px -0.25px #454545 inset,
+        0.5px 0 0.5px #3D3A35 inset,
+        0 5px 4px 1px rgba(76,74,72,0.4),
+        0 6px 2px -3px rgba(76,74,72,0.7);
+}
+
+.btn {
+    display: block;
+    width: 9px;
+    height: 20px;
+    position: absolute;
+    top: 5px;
+    border-radius: 1px;
+}
+
+.clear.btn {
+    left: 350px;
+    background-color: #7C99DB;
+    box-shadow:  0 -1px 1px -0.5px #2F3B43 inset,
+        0 -2px 0.5px -0.5px #474D67 inset,
+        0 0 1px 1.25px #93A6D1 inset,
+        0 0 1px 0.5px #889FBF inset,
+        0 3px 3px -1px #59524C,
+        0 4px 4px -1px #9D998E,
+        -0.5px 0 0.5px #707E9A,
+        0 2px 4px #D6D4C5;
+}
+
+.del.btn {
+    left: 375px;
+    background-color: #EB8372;
+    box-shadow:   0.5px 0 0.5px #945C4E inset,
+        0 -1px 1px -0.5px #6A331E inset,
+        0 -2px 0.5px -0.5px #A65F50 inset,
+        0 0 1px 1.25px #D38671 inset,
+        0 0 1px 0.5px #EF8C7F inset,
+        0 3px 3px -1px #966C51,
+        0 4px 4px -1px #C9A99A,
+        -0.5px 0 0.5px #D5AEA2,
+        0 2px 4px #DBBBB0;
+}
+
+.down.btn {
+    left: 400px;
+    background-color: #EE8273;
+    box-shadow:   0.5px 0 0.5px #C07C69 inset,
+        0 -1px 1px -0.5px #6A331E inset,
+        0 -2px 0.5px -0.5px #A65F50 inset,
+        0 0 1.25px 1px #EC8775 inset,
+        0 0 1px 0.5px #EF8C7F inset,
+        0 3px 3px -1px #966C51,
+        0 4px 4px -1px #C9A99A,
+        -0.5px 0 0.5px #D5AEA2,
+        0 2px 4px #DBBBB0;
+}
+
+.up.btn {
+    left: 425px;
+    background-color: #EB8372;
+    box-shadow:   0.5px 0 0.5px #945C4E inset,
+        0 -1px 1px -0.5px #6A331E inset,
+        0 -2px 0.5px -0.5px #A65F50 inset,
+        0 0 1.25px 1px #D38671 inset,
+        0 0 1px 1px #EF8C7F inset,
+        0 3px 3px -1px #966C51,
+        0 4px 4px -1px #C9A99A,
+        -0.5px 0 0.5px #D5AEA2,
+        0 2px 4px #DBBBB0;
+}
+
+.select.btn {
+    left: 450px;
+    background-color: #EE8273;
+    box-shadow:   0.5px 0 0.5px #945C4E inset,
+        0 -1px 1px -0.5px #6A331E inset,
+        0 -2px 0.5px -0.5px #A65F50 inset,
+        0 0 1.25px 1px #D38671 inset,
+        0 0 1px 1px #EF8C7F inset,
+        0 3px 3px -1px #966C51,
+        0 4px 4px -1px #C9A99A,
+        -0.5px 0 0.5px #D5AEA2,
+        0 2px 4px #DBBBB0;
+}
+
+.reset.btn {
+    left: 475px;
+    background-color: #EDAF5D;
+    box-shadow: 0.75px 0 0.5px #AE8059 inset,
+        0 -0.75px 0.5px #975A2B inset,
+        0 0 1px 1.5px #E3AC75 inset,
+        0 0 1px 3px #E6AE60 inset,
+        0 3px 3px -1px #966C51,
+        0 4px 4px -1px #C9A99A,
+        1px 0 3px #F8CD94,
+        -1px 0 5px -2px #D1A78E,
+        0 0 4px 1px #EAD4B4;
+}
+
+.demo.btn {
+    left: 500px;
+    background-color: #8ED8C5;
+    box-shadow: 1.25px 0 0.5px #729883 inset,
+        0.5px 0 1px 2px #9AD4BE inset,
+        -3px 0 4px -2px #B4BFAF,
+        0 3px 3px -1px #464F3E,
+        0 0 5px #D6E4DA,
+        0 0 7px #D1D1C7;
+}
+
+.memory.btn {
+    left: 525px;
+    background-color: #92A5C3;
+    box-shadow:  0 -1px 1px -0.5px #2F3B43 inset,
+        0 -2px 0.5px -0.5px #474D67 inset,
+        0 0 1px 1.25px #93A6D1 inset,
+        0 0 1px 0.5px #889FBF inset,
+        0 3px 3px -1px #59524C,
+        0 4px 4px -1px #9D998E,
+        -0.5px 0 0.5px #707E9A,
+        0 2px 4px #D6D4C5;
+}
+
+.bigbtn {
+    display: block;
+    width: 35px;
+    height: 20px;
+    background-color: red;
+    border-radius: 3px;
+    position: absolute;
+    top: 4px;
+    background-color: #759ADE;
+}
+
+.bigbtn.onekey-1 {
+    right: 65px;
+
+    background-image: linear-gradient(
+        transparent 25%,
+
+        #405E94 28%,
+        #A4BFF6 31%,
+        #8398D1 34%,
+
+        #405E94 37%,
+        #A4BFF6 40%,
+        #8398D1 43%,
+
+        #405E94 46%,
+        #A4BFF6 49%,
+        #8398D1 52%,
+
+        #405E94 55%,
+        #A4BFF6 58%,
+        #8398D1 61%,
+
+        #405E94 64%,
+        #A4BFF6 67%,
+        #8398D1 70%,
+
+        #405E94 73%,
+        #A4BFF6 76%,
+        #8398D1 79%,
+        
+        transparent 80%
+    );
+    box-shadow: 0 -0.5px 1px #15172C inset,
+        1.25px 0 0.5px -0.5px #3B3B47 inset,
+        2.5px 0 1px #65748B inset,
+        3.5px 0 1px #98AED3 inset,
+        0 1px 1px #D4E0FA inset,
+        0 -1.5px 1px #8DA3D4 inset,
+        -0.5px 0 0.5px #9AAED1 inset,
+        -0.75px 0.25px 0.5px #2C2C38,
+        -1.25px -0.1px 0.1px #EDEEF3,
+        0 5px 3px -2.5px #4F4B40,
+        0 3px 4px -1px #ACA59D,
+        0 4px 5px #CFCBCA;
+}
+
+.bigbtn.onekey-2 {
+    right: 20px;
+
+    background-image: linear-gradient(
+        transparent 25%,
+
+        #405E94 28%,
+        #A4BFF6 31%,
+        #8398D1 34%,
+
+        #405E94 37%,
+        #A4BFF6 40%,
+        #8398D1 43%,
+
+        #47659B 46%,
+        #A4BFF6 49%,
+        #8398D1 52%,
+
+        #5871A7 55%,
+        #A4BFF6 58%,
+        #8398D1 61%,
+
+        #405E94 64%,
+        #A4BFF6 67%,
+        #8398D1 70%,
+
+        #5871A7 73%,
+        #A4BFF6 76%,
+        #8398D1 79%,
+        
+        transparent 80%
+    );
+    box-shadow: 0 -0.5px 1px #535E70 inset,
+        1.25px 0 0.5px -0.5px #3B3B47 inset,
+        2.5px 0 1px #65748B inset,
+        3.5px 0 1px #98AED3 inset,
+        0 1px 1px #D4E0FA inset,
+        0 -1.5px 1px #8DA3D4 inset,
+        -0.5px 0 0.5px #9AAED1 inset,
+        -0.75px 0.25px 0.5px #454F59,
+        -1.25px -0.1px 0.1px #EDEEF3,
+        0 5px 3px -2.5px #433E38,
+        0 3px 4px -1px #C0B9B1,
+        0 4px 5px #CFCBCA;
+}
+
+.keys-container {
+    display: block;
+    width: 720px;
+    height: 150px;
+    position: absolute;
+    bottom: 0;
+    right: 35px;
+    background-color: #E3DFDA;
+    background-image: linear-gradient(90deg, #E3DFDA, #DFDCD3);
+    border-radius: 0.5px;
+    box-shadow: 0 3px 1.25px -0.75px #282421 inset,
+        5px 0 2px #AFA896 inset,
+        -2px 0 4px #9F9684 inset,
+        -6px 0 2px #BFB3A5 inset,
+        0 -1.5px 1px 1px #F1F6EF;
+}
+
+.white {
+    width: 710px;
+    height: 135px;
+    background-color: #141312;
+    position: absolute;
+    top: 2px;
+    left: 5px;
+    box-shadow:  -1px 0 2px -1px rgba(40,36,33,0.35),
+        3px 0 2px -1px rgba(40,36,33,0.5),
+        -2px 0 3px -2px #574E45,
+        0 8px 6px -3px #CBC8B9;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-gap: 2px;
+
+}
+
+.white .key {
+    height: 133px;
+    background-color: #E9E7D8;
+    border-radius: 3px;
+    background-image: linear-gradient(#E9E7D8, #F4F2E3);
+    box-shadow: 1px 0 1px -0.5px #F6EDDC inset,
+        -1.25px 0 0.5px -0.5px #9D9885 inset, 
+        0 0 1px 2px #F7F5E8 inset,
+        0 10px 5px -5px rgba(34,33,28,0.75),
+        0 10px 7px -3px rgba(40,36,33,0.25);
+}
+
+.black {
+    display: grid;
+    width: 665px;
+    height: 72px;
+    position: absolute;
+    top: 2px;
+    left: 35px;
+    grid-template-columns: 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px;
+    -ms-grid-columns: 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px;
+    grid-gap: 21px;
+}
+
+.black .key {
+    background-color: #000;
+    background-image: linear-gradient(
+        #B5BDD2 15%,
+        #556478 17%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+    box-shadow: 1px 0 1px #1D212D inset,
+        2px 0 1px #252D3A inset, 
+        -2px 0 0.75px #252D3A inset, 
+        0 -2px 0.5px #22252A inset,
+        0 -6px 0.5px #3B3F42 inset,
+        0 0 0.5px 1px #181913,
+        7px 7px 1px -5px #FAFBF3,
+        -7.25px 7px 1px -5px #FAFBF3;
+    border-radius: 1.5px;
+}
+
+.black .key:nth-child(1) {
+    background-image: linear-gradient(
+        #B5BDD2 4%,
+        #556478 7%,
+        #3C4759 50%,
+        #262E31 90%
+    );
+}
+
+.black .key:nth-child(4) {
+    background-image: linear-gradient(
+        176deg,
+        #B5BDD2 4%,
+        #556478 8%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(5) {
+    background-image: linear-gradient(
+        178deg,
+        #B5BDD2 2%,
+        #556478 3%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(7) {
+    background-image: linear-gradient(
+        #B5BDD2 12%,
+        #556478 15%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(8) {
+    background-image: linear-gradient(
+        182deg,
+        #B5BDD2 2%,
+        #556478 3% 10%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(9) {
+    background-image: linear-gradient(
+        #B5BDD2 7%,
+        #556478 10% 20%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(11) {
+    background-image: linear-gradient(
+        182deg,
+        #B5BDD2 7%,
+        #556478 10% 20%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(12) {
+    background-image: linear-gradient(
+        181deg,
+        #B5BDD2 5%,
+        #556478 8%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+
+.black .key:nth-child(14) {
+    background-image: linear-gradient(
+        #B5BDD2 2%,
+        #556478 8%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(15) {
+    background-image: linear-gradient(
+        175deg,
+        #B5BDD2 3%,
+        #556478 8% 15%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(16) {
+    background-image: linear-gradient(
+        179deg,
+        #B5BDD2 5%,
+        #556478 7%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.logo {
+    position: absolute;
+    top: 225px;
+    left: 15px;
+    display: block;
+    width: 180px;
+}
+
+.logo h1 {
+    font-family: "Montserrat", sans-serif;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    text-align: center;
+}
+
+.logo h1 span:first-child {
+    color: #6C4351;
+    text-shadow: 0 0 1px #C3A9B2, 0 0 2px #EEDFE2;
+}
+
+.logo h1 span:last-child {
+    color: #ECE8E5;
+    letter-spacing: 1px;
+    text-shadow: 0px 0.5px 0.75px #BCBBB7,
+        0.5px 0.5px 0.75px #BCBBB7,
+        0.5px 0px 0.75px #BCBBB7,
+        0.5px -0.5px 0.75px #BCBBB7,
+        0 -0.5px 0.75px #BCBBB7,
+        -0.5px -0.5px 0.75px #BCBBB7,
+        -0.5px 0.5px 0.75px #BCBBB7,
+        -0.5px 0 0.75px #BCBBB7;
+}
+
+/* 
+  If you like my work: 
+    https://www.buymeacoffee.com/fossheim
+    https://www.patreon.com/fossheim
+*/
\ No newline at end of file
diff --git a/casiopt-1-css/license.txt b/casiopt-1-css/license.txt
new file mode 100644
index 0000000..1c0f5f4
--- /dev/null
+++ b/casiopt-1-css/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Sarah Fossheim (https://codepen.io/fossheim/pen/VweaNYW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/casiopt-1-css/src/index.html b/casiopt-1-css/src/index.html
new file mode 100644
index 0000000..856263c
--- /dev/null
+++ b/casiopt-1-css/src/index.html
@@ -0,0 +1,90 @@
+<!-- tutorials on https://fossheim.io/writing/ -->
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap" rel="stylesheet">
+
+
+<div class="wrapper" aria-label="Casio PT-1 Keyboard illustration made with HTML and CSS">
+            <div class="casio" aria-hidden="true">
+                <div class="speaker"></div>
+                <div class="logo">
+                    <h1><span>Casio</span> <span>PT-1</span></h1>
+                </div>
+                <div class="controls">
+                    <div class="controls-labels">
+                        <p>mode</p>
+                        <p>volume</p>
+                        <p>tone</p>
+                        <p>tempo</p>
+                        <p>one key play</p>
+                    </div>
+                    <div class="controls-bar">
+                        <div class="mode-container">
+                            <div class="mode-bar"></div>
+                            <div class="mode-handle"></div>
+                        </div>
+                        <div class="volume-container">
+                            <div class="volume-bar"></div>
+                            <div class="volume-handle"></div>
+                        </div>
+                        <div class="tone-container">
+                            <div class="tone-bar"></div>
+                            <div class="tone-handle"></div>
+                        </div>
+                        <div class="clear btn"></div>
+                        <div class="del btn"></div>
+                        <div class="down btn"></div>
+                        <div class="up btn"></div>
+                        <div class="select btn"></div>
+                        <div class="reset btn"></div>
+                        <div class="demo btn"></div>
+                        <div class="memory btn"></div>
+                        <div class="onekey-1 bigbtn"></div>
+                        <div class="onekey-2 bigbtn"></div>
+                    </div>
+                </div>
+                <div class="keys-container">
+                    <div class="white">
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                    </div>
+                    <div class="black">
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class=""></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class=""></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class=""></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class=""></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                        <div class="key"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+<!-- 
+  If you like my work: 
+    https://www.buymeacoffee.com/fossheim
+    https://www.patreon.com/fossheim
+-->
\ No newline at end of file
diff --git a/casiopt-1-css/src/style.css b/casiopt-1-css/src/style.css
new file mode 100644
index 0000000..53c2889
--- /dev/null
+++ b/casiopt-1-css/src/style.css
@@ -0,0 +1,881 @@
+/* tutorials on https://fossheim.io/writing/ */
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #333335;
+    background-color: #E996AF;
+}
+
+.casio {
+    display: block;
+    width: 960px;
+    height: 260px;
+    margin: 100px auto 0 auto;
+    margin: calc(50vh - 150px) auto 0 auto;
+    border-radius: 4px;
+    background-color: #EFEFE7;
+    background-image: linear-gradient(90deg, #EFEFE7, #F4F3EE);
+    position: relative;
+    box-shadow: 0 -2px 2px -0.5px #D0CCC1 inset,
+        2px 0 2px -0.5px #E1DFE0 inset,
+        0 3px 1px #FBFAF8 inset,
+        0 45px 10px -25px rgba(0,0,0,0.1),
+        0 65px 50px -10px rgba(0,0,0,0.05);
+}
+
+.speaker {
+    display: block;
+    width: 180px;
+    height: 200px;
+    position: absolute;
+    top: 12px;
+    left: 14px;
+    border-radius: 0.5px;
+    background-color: #D6C6A2;
+    background-image: linear-gradient(transparent 40%, #EFEFE7 60%),
+        linear-gradient(90deg, #BFA58D, transparent 2% 96%, #C9B59A),
+        linear-gradient(#D1BBA3 20%, transparent 65%),
+        linear-gradient(90deg, #D6C6A2, #E2D9CA),
+        linear-gradient(90deg, #D6C6A2, #E2D9CA),
+        radial-gradient(#897866 60%, transparent 61%);
+    background-size: 100% 8px,
+        100% 100%,
+        100% 8px,
+        6px 100%,
+        6px 100%,
+        190px 190px;
+    background-repeat: repeat,
+        no-repeat,
+        repeat,
+        no-repeat,
+        no-repeat,
+        no-repeat;
+    background-position: 0 0,
+        0 0,
+        0 0,
+        50px 0,
+        120px 0,
+        -7px 7px;
+}
+
+.controls {
+    display: block;
+    width: 745px;
+    height: 80px;
+    background-color: transparent;
+    position: absolute;
+    top: 7px;
+    right: 15px;
+    box-shadow: 0 2px 0.75px -0.8px #543F44 inset, 0 -2.5px 0.75px -0.8px #543F44 inset;
+}
+
+.controls-labels {
+    display: block;
+    width: 745px;
+    height: 30px;
+    font-family: sans-serif;
+    color: #4F4949;
+}
+
+.controls-labels p {
+    font-size: 0.5rem;
+    letter-spacing: 0.5px;
+    display: inline-block;
+    border: 1px solid #7A7174;
+    padding: 0px 8px;
+    border-radius: 2px;
+    position: absolute;
+    top: 4px;
+}
+
+.controls-labels p:nth-child(1) {
+    left: 55px;
+}
+
+.controls-labels p:nth-child(2) {
+    left: 130px;
+    padding: 0 15px;
+}
+
+.controls-labels p:nth-child(3) {
+    left: 265px;
+    padding: 0 15px;
+}
+
+.controls-labels p:nth-child(4) {
+    left: 400px;
+}
+
+.controls-labels p:nth-child(5) {
+    left: 645px;
+    padding: 0 11px;
+}
+
+.controls-bar {
+    display: block;
+    width: 745px;
+    height: 30px;
+    position: absolute;
+    top: 30px;
+    background-image: linear-gradient(
+            90deg, 
+            transparent 0% 2.5%, #DCDCD0 2.5% 5%,
+            transparent 5% 7.5%, #E1DFD3 7.5% 10%,
+            transparent 10% 12.5%, #D5D5CD 12.5% 15%,
+            transparent 15% 17.5%, #DCDCD0 17.5% 20%,
+            transparent 20% 22.5%, #E1DFD3 22.5% 25%,
+            transparent 25% 27.5%, #D5D5CD 27.5% 30%,
+            transparent 30% 32.5%, #DCDCD0 32.5% 35%,
+            transparent 35% 37.5%, #E1DFD3 37.5% 40%,
+            transparent 40% 42.5%, #D5D5CD 42.5% 45%,
+            transparent 45% 47.5%, #DCDCD0 47.5% 50%,
+            transparent 50% 52.5%, #E1DFD3 52.5% 55%,
+            transparent 55% 57.5%, #D5D5CD 57.5% 60%,
+            transparent 60% 62.5%, #DCDCD0 62.5% 65%,
+            transparent 65% 67.5%, #E1DFD3 67.5% 70%,
+            transparent 70% 72.5%, #D5D5CD 72.5% 75%,
+            transparent 75% 77.5%, #DCDCD0 77.5% 80%,
+            transparent 80% 82.5%, #E1DFD3 82.5% 85%,
+            transparent 85% 87.5%, #D5D5CD 87.5% 90%,
+            transparent 90% 92.5%, #DCDCD0 92.5% 95%,
+            transparent 95% 97.5%, #E1DFD3 97.5% 100%
+        ), linear-gradient(
+            90deg, 
+            transparent 0% 7%, #DCDCD0 7% 14%,
+            transparent 14% 21%, #E1DFD3 21% 28%,
+            transparent 28% 35%, #D5D5CD 35% 42%,
+            transparent 42% 49%, #DCDCD0 49% 56%,
+            transparent 56% 63%, #E1DFD3 63% 70%,
+            transparent 70% 77%, #D5D5CD 77% 84%,
+            transparent 84% 91%, #DCDCD0 91% 98%,
+            transparent 98%
+        ), linear-gradient(
+            90deg, 
+            transparent 0% 2.5%, #E0DED1 2.5% 5%,
+            transparent 5% 7.5%, #DDDBCE 7.5% 10%,
+            transparent 10% 12.5%, #DEDCCF 12.5% 15%,
+            transparent 15% 17.5%, #E0DED1 17.5% 20%,
+            transparent 20% 22.5%, #E1DFD3 22.5% 25%,
+            transparent 25% 27.5%, #DDDBCE 27.5% 30%,
+            transparent 30% 32.5%, #DEDCCF 32.5% 35%,
+            transparent 35% 37.5%, #E0DED1 37.5% 40%,
+            transparent 40% 42.5%, #D5D5CD 42.5% 45%,
+            transparent 45% 47.5%, #DDDBCE 47.5% 50%,
+            transparent 50% 52.5%, #E4E2D6 52.5% 55%,
+            transparent 55% 57.5%, #E0DED1 57.5% 60%,
+            transparent 60% 62.5%, #DCDCD0 62.5% 65%,
+            transparent 65% 67.5%, #DDDBCE 67.5% 70%,
+            transparent 70% 72.5%, #DEDCCF 72.5% 75%,
+            transparent 75% 77.5%, #E0DED1 77.5% 80%,
+            transparent 80% 82.5%, #E1DFD3 82.5% 85%,
+            transparent 85% 87.5%, #E4E2D6 87.5% 90%,
+            transparent 90% 92.5%, #E0DED1 92.5% 95%,
+            transparent 95% 97.5%, #E1DFD3 97.5% 100%
+        ), linear-gradient(
+            90deg, 
+            transparent 0% 7%, #CAC8BC 7% 14%,
+            transparent 14% 21%, #DBD9CD 21% 28%,
+            transparent 28% 35%, #D0CEC2 35% 42%,
+            transparent 42% 49%, #CAC8BC 49% 56%,
+            transparent 56% 63%, #DBD9CD 63% 70%,
+            transparent 70% 77%, #D0CEC2 77% 84%,
+            transparent 84% 91%, #CAC8BC 91% 98%,
+            transparent 98%
+        ), linear-gradient(
+            90deg, 
+            transparent 0% 2.5%, #E0DED1 2.5% 5%,
+            transparent 5% 7.5%, #DDDBCE 7.5% 10%,
+            transparent 10% 12.5%, #DEDCCF 12.5% 15%,
+            transparent 15% 17.5%, #E0DED1 17.5% 20%,
+            transparent 20% 22.5%, #E1DFD3 22.5% 25%,
+            transparent 25% 27.5%, #DDDBCE 27.5% 30%,
+            transparent 30% 32.5%, #DEDCCF 32.5% 35%,
+            transparent 35% 37.5%, #E0DED1 37.5% 40%,
+            transparent 40% 42.5%, #D5D5CD 42.5% 45%,
+            transparent 45% 47.5%, #DDDBCE 47.5% 50%,
+            transparent 50% 52.5%, #E4E2D6 52.5% 55%,
+            transparent 55% 57.5%, #E0DED1 57.5% 60%,
+            transparent 60% 62.5%, #DCDCD0 62.5% 65%,
+            transparent 65% 67.5%, #DDDBCE 67.5% 70%,
+            transparent 70% 72.5%, #DEDCCF 72.5% 75%,
+            transparent 75% 77.5%, #E0DED1 77.5% 80%,
+            transparent 80% 82.5%, #E1DFD3 82.5% 85%,
+            transparent 85% 87.5%, #D5D5CD 87.5% 90%,
+            transparent 90% 92.5%, #DCDCD0 92.5% 95%,
+            transparent 95% 97.5%, #E1DFD3 97.5% 100%
+        ), linear-gradient(
+            90deg, 
+            transparent 0% 2.5%, #DCDCD0 2.5% 5%,
+            transparent 5% 7.5%, #E1DFD3 7.5% 10%,
+            transparent 10% 12.5%, #D5D5CD 12.5% 15%,
+            transparent 15% 17.5%, #DCDCD0 17.5% 20%,
+            transparent 20% 22.5%, #E1DFD3 22.5% 25%,
+            transparent 25% 27.5%, #D5D5CD 27.5% 30%,
+            transparent 30% 32.5%, #DCDCD0 32.5% 35%,
+            transparent 35% 37.5%, #E1DFD3 37.5% 40%,
+            transparent 40% 42.5%, #D5D5CD 42.5% 45%,
+            transparent 45% 47.5%, #DCDCD0 47.5% 50%,
+            transparent 50% 52.5%, #E1DFD3 52.5% 55%,
+            transparent 55% 57.5%, #D5D5CD 57.5% 60%,
+            transparent 60% 62.5%, #DCDCD0 62.5% 65%,
+            transparent 65% 67.5%, #DDDBCE 67.5% 70%,
+            transparent 70% 72.5%, #DEDCCF 72.5% 75%,
+            transparent 75% 77.5%, #E0DED1 77.5% 80%,
+            transparent 80% 82.5%, #E1DFD3 82.5% 85%,
+            transparent 85% 87.5%, #E4E2D6 87.5% 90%,
+            transparent 90% 92.5%, #E0DED1 92.5% 95%,
+            transparent 95% 97.5%, #E1DFD3 97.5% 100%
+        ), linear-gradient(
+            90deg, 
+            transparent 0% 7%, #CAC8BC 7% 14%,
+            transparent 14% 21%, #DBD9CD 21% 28%,
+            transparent 28% 35%, #D0CEC2 35% 42%,
+            transparent 42% 49%, #CAC8BC 49% 56%,
+            transparent 56% 63%, #DBD9CD 63% 70%,
+            transparent 70% 77%, #D0CEC2 77% 84%,
+            transparent 84% 91%, #CAC8BC 91% 98%,
+            transparent 98%
+        ), linear-gradient(90deg, #F1EEE7, #EDE8E2, #EBE8E1);
+    background-size: 52px 20px,
+        16px 20px,
+        52px 20px, 
+        16px 20px,
+        52px 20px, 
+        52px 20px,
+        16px 20px,
+        100% 100%;
+    background-repeat: no-repeat;
+    background-position: 1px 5px, 
+        107px 5px, 
+        203px 5px, 
+        325px 5px,
+        537px 5px,
+        589px 5px,
+        730px 5px,
+        top left;
+    box-shadow: 0 2px 1px -1px #C1BEB5 inset, 0 -2px 1px -1px #FCFCFA inset, 1px 0 0.5px -0.5px #DFDFD7 inset, -2.5px 0 1px -1px #D4CDC5 inset;
+    border-radius: 1px;
+}
+
+.mode-container {
+    display: block;
+    width: 45px;
+    height: 20px;
+    border-radius: 2px;
+    background-image: linear-gradient(90deg,#E6E4D7, #EAE7DE);
+    position: absolute;
+    top: 5px;
+    left: 55px;
+    box-shadow: 0 4.5px 1px -2px #837363 inset,
+        4px 0 3px -2px #BEB8A8 inset,
+        -3px 0 2px -2px #DBDBD3 inset,
+        0 -0.5px 1px #DBD8CF inset,
+        0 1px 0.5px -0.75px #FFFCF5;
+}
+
+.mode-bar {
+    display: block;
+    width: 35px;
+    height: 8px;
+    background-color: black;
+    position: absolute;
+    left: 5px;
+    top: 7px;
+    background-image: linear-gradient(#1E1E23 45%, #3D3D3D 55%);
+    border-radius: 1px;
+    box-shadow: 0 -0.5px 0.5px 0 #D6DBDE, 0 0 1px 0.5px #F7F4ED, 0 -1.25px 2px -1px #2A2925 inset, 0 1.25px 2px -1px black inset;
+}
+
+.mode-handle {
+    display: block;
+    width: 14px;
+    height: 7px;
+    border-radius: 3px;
+    position: absolute;
+    top: 8px;
+    left: 7px;
+    background-image: radial-gradient(transparent 40%, #1A1C1D 70%),
+        linear-gradient(#23272A 60%, #484852 70%);
+    box-shadow: 0 1.5px 1px -1px #676B6E inset,
+        1px 3px 2px -2px #6B685F,
+        3px 5px 5px rgba(110, 106, 94, 0.3);
+}
+
+.volume-container {
+    display: block;
+    width: 65px;
+    height: 20px;
+    position: absolute;
+    top: 5px;
+    left: 130px;
+    border-radius: 2px;
+    background-image: linear-gradient(90deg, #E5E0DA, #F0EEE1);
+    box-shadow: 0 1px 0.5px -0.75px #FFFCF5,
+        0 3.5px 1.5px -1.5px #807060 inset,
+        0 -1.75px 2px -2px #ECE9E0 inset,
+        3.5px 0 2px -2px #C7BFB2 inset,
+        -1.5px 0 0.5px -0.75px #DBD8D1 inset,
+        0 -0.5px 1px #D2D1CF;
+}
+
+.volume-bar {
+    display: block;
+    width: 55px;
+    height: 10px;
+    position: absolute;
+    top: 6px;
+    left: 5px;
+    border-radius: 1px;
+    background-image: linear-gradient(#1D1E23 45%, #3F3D40 55%);
+}
+
+.volume-handle {
+    display: block;
+    width: 19px;
+    height: 19px;
+    border-radius: 2px;
+    position: absolute;
+    left: 14px;
+    top: 1px;
+    background-color: #6A6964;
+    background-image: radial-gradient(#262626 50%, #3E3D39 80%),
+        radial-gradient(#353537, #3E3E40 80%, #323031 90%),
+        linear-gradient(#4C4942, #676860 10% 25%, #282C2C 30% 70%, #777370 75%),
+        linear-gradient(#4C4942, #676860 10% 25%, #282C2C 30% 70%, #777370 75%);
+    background-size: 17px 4px,
+        15px 15px,
+        3px 20px,
+        3px 20px;
+    background-repeat: no-repeat;
+    background-position: bottom left,
+        2px 0,
+        top right,
+        top left;
+    box-shadow: 0 1.5px 0.75px -0.5px #454442 inset,
+        0 2px 1px -0.5px #797876 inset,
+        -0.5px 0 0.5px rgba(30,32,36,0.5) inset,
+        5px 0 6px -2px rgba(24,23,28,0.3),
+        0 5px 4px rgba(76,74,72,0.3),
+        0 6px 2px -3px rgba(76,74,72,0.75);
+}
+
+.tone-container {
+    display: block;
+    width: 52px;
+    height: 20px;
+    position: absolute;
+    left: 265px;
+    top: 5px;
+    border-radius: 2px;
+    box-shadow: 0 3.5px 1.5px -1.5px #6B5E4B inset,
+        4px 0 3px -2px #A9A79B inset,
+        -3px 0 2px -2px #D1CAB7 inset,
+        0 -0.5px 1px #DEDCD0 inset,
+        0 1px 0.5px -0.75px #FFFCF5;
+    background-image: linear-gradient(90deg, rgba(207,202,196,0.5), rgba(246,243,226,0.5));
+}
+
+.tone-bar {
+    display: block;
+    width: 45px;
+    height: 9px;
+    position: absolute;
+    left: 3px;
+    top: 6px;
+    background-image: linear-gradient(#282C2D 25%, #3C3D3F 35%, #373739);
+    border-radius: 1px;
+    box-shadow: 0 0.5px 0.5px #F8F5EC,
+        -1px 0 0.5px #CBC8C1,
+        1px 0 0.5px #E9EBDD,
+        0 -1px 0.5px #E2E2E2;
+}
+
+.tone-handle {
+    display: block;
+    position: absolute;
+    width: 19px;
+    height: 18px;
+    border-radius: 2px;
+    left: 5px;
+    top: 1px;
+    background-color: #6A6964;
+    background-image: radial-gradient(#272729, #22211C 60%, #5F5C55),
+        radial-gradient(#3E3F41, #363638 80%, #272729 90%),
+        linear-gradient(#4C4942, #676860 10% 25%, #282C2C 30% 70%, #777370 75%),
+        linear-gradient(#4F4A46, #65645F);
+    background-size: 18px 4px,
+        15px 15px,
+        2px 20px,
+        3px 20px;
+    background-repeat: no-repeat;
+    background-position: bottom left,
+        2.25px 0,
+        top right,
+        top left;
+    box-shadow: 0 1.5px 0.75px -0.5px #494846 inset,
+        0 2.5px 1px -0.75px #313131 inset,
+        -0.75px 0 0.5px -0.25px #454545 inset,
+        0.5px 0 0.5px #3D3A35 inset,
+        0 5px 4px 1px rgba(76,74,72,0.4),
+        0 6px 2px -3px rgba(76,74,72,0.7);
+}
+
+.btn {
+    display: block;
+    width: 9px;
+    height: 20px;
+    position: absolute;
+    top: 5px;
+    border-radius: 1px;
+}
+
+.clear.btn {
+    left: 350px;
+    background-color: #7C99DB;
+    box-shadow:  0 -1px 1px -0.5px #2F3B43 inset,
+        0 -2px 0.5px -0.5px #474D67 inset,
+        0 0 1px 1.25px #93A6D1 inset,
+        0 0 1px 0.5px #889FBF inset,
+        0 3px 3px -1px #59524C,
+        0 4px 4px -1px #9D998E,
+        -0.5px 0 0.5px #707E9A,
+        0 2px 4px #D6D4C5;
+}
+
+.del.btn {
+    left: 375px;
+    background-color: #EB8372;
+    box-shadow:   0.5px 0 0.5px #945C4E inset,
+        0 -1px 1px -0.5px #6A331E inset,
+        0 -2px 0.5px -0.5px #A65F50 inset,
+        0 0 1px 1.25px #D38671 inset,
+        0 0 1px 0.5px #EF8C7F inset,
+        0 3px 3px -1px #966C51,
+        0 4px 4px -1px #C9A99A,
+        -0.5px 0 0.5px #D5AEA2,
+        0 2px 4px #DBBBB0;
+}
+
+.down.btn {
+    left: 400px;
+    background-color: #EE8273;
+    box-shadow:   0.5px 0 0.5px #C07C69 inset,
+        0 -1px 1px -0.5px #6A331E inset,
+        0 -2px 0.5px -0.5px #A65F50 inset,
+        0 0 1.25px 1px #EC8775 inset,
+        0 0 1px 0.5px #EF8C7F inset,
+        0 3px 3px -1px #966C51,
+        0 4px 4px -1px #C9A99A,
+        -0.5px 0 0.5px #D5AEA2,
+        0 2px 4px #DBBBB0;
+}
+
+.up.btn {
+    left: 425px;
+    background-color: #EB8372;
+    box-shadow:   0.5px 0 0.5px #945C4E inset,
+        0 -1px 1px -0.5px #6A331E inset,
+        0 -2px 0.5px -0.5px #A65F50 inset,
+        0 0 1.25px 1px #D38671 inset,
+        0 0 1px 1px #EF8C7F inset,
+        0 3px 3px -1px #966C51,
+        0 4px 4px -1px #C9A99A,
+        -0.5px 0 0.5px #D5AEA2,
+        0 2px 4px #DBBBB0;
+}
+
+.select.btn {
+    left: 450px;
+    background-color: #EE8273;
+    box-shadow:   0.5px 0 0.5px #945C4E inset,
+        0 -1px 1px -0.5px #6A331E inset,
+        0 -2px 0.5px -0.5px #A65F50 inset,
+        0 0 1.25px 1px #D38671 inset,
+        0 0 1px 1px #EF8C7F inset,
+        0 3px 3px -1px #966C51,
+        0 4px 4px -1px #C9A99A,
+        -0.5px 0 0.5px #D5AEA2,
+        0 2px 4px #DBBBB0;
+}
+
+.reset.btn {
+    left: 475px;
+    background-color: #EDAF5D;
+    box-shadow: 0.75px 0 0.5px #AE8059 inset,
+        0 -0.75px 0.5px #975A2B inset,
+        0 0 1px 1.5px #E3AC75 inset,
+        0 0 1px 3px #E6AE60 inset,
+        0 3px 3px -1px #966C51,
+        0 4px 4px -1px #C9A99A,
+        1px 0 3px #F8CD94,
+        -1px 0 5px -2px #D1A78E,
+        0 0 4px 1px #EAD4B4;
+}
+
+.demo.btn {
+    left: 500px;
+    background-color: #8ED8C5;
+    box-shadow: 1.25px 0 0.5px #729883 inset,
+        0.5px 0 1px 2px #9AD4BE inset,
+        -3px 0 4px -2px #B4BFAF,
+        0 3px 3px -1px #464F3E,
+        0 0 5px #D6E4DA,
+        0 0 7px #D1D1C7;
+}
+
+.memory.btn {
+    left: 525px;
+    background-color: #92A5C3;
+    box-shadow:  0 -1px 1px -0.5px #2F3B43 inset,
+        0 -2px 0.5px -0.5px #474D67 inset,
+        0 0 1px 1.25px #93A6D1 inset,
+        0 0 1px 0.5px #889FBF inset,
+        0 3px 3px -1px #59524C,
+        0 4px 4px -1px #9D998E,
+        -0.5px 0 0.5px #707E9A,
+        0 2px 4px #D6D4C5;
+}
+
+.bigbtn {
+    display: block;
+    width: 35px;
+    height: 20px;
+    background-color: red;
+    border-radius: 3px;
+    position: absolute;
+    top: 4px;
+    background-color: #759ADE;
+}
+
+.bigbtn.onekey-1 {
+    right: 65px;
+
+    background-image: linear-gradient(
+        transparent 25%,
+
+        #405E94 28%,
+        #A4BFF6 31%,
+        #8398D1 34%,
+
+        #405E94 37%,
+        #A4BFF6 40%,
+        #8398D1 43%,
+
+        #405E94 46%,
+        #A4BFF6 49%,
+        #8398D1 52%,
+
+        #405E94 55%,
+        #A4BFF6 58%,
+        #8398D1 61%,
+
+        #405E94 64%,
+        #A4BFF6 67%,
+        #8398D1 70%,
+
+        #405E94 73%,
+        #A4BFF6 76%,
+        #8398D1 79%,
+        
+        transparent 80%
+    );
+    box-shadow: 0 -0.5px 1px #15172C inset,
+        1.25px 0 0.5px -0.5px #3B3B47 inset,
+        2.5px 0 1px #65748B inset,
+        3.5px 0 1px #98AED3 inset,
+        0 1px 1px #D4E0FA inset,
+        0 -1.5px 1px #8DA3D4 inset,
+        -0.5px 0 0.5px #9AAED1 inset,
+        -0.75px 0.25px 0.5px #2C2C38,
+        -1.25px -0.1px 0.1px #EDEEF3,
+        0 5px 3px -2.5px #4F4B40,
+        0 3px 4px -1px #ACA59D,
+        0 4px 5px #CFCBCA;
+}
+
+.bigbtn.onekey-2 {
+    right: 20px;
+
+    background-image: linear-gradient(
+        transparent 25%,
+
+        #405E94 28%,
+        #A4BFF6 31%,
+        #8398D1 34%,
+
+        #405E94 37%,
+        #A4BFF6 40%,
+        #8398D1 43%,
+
+        #47659B 46%,
+        #A4BFF6 49%,
+        #8398D1 52%,
+
+        #5871A7 55%,
+        #A4BFF6 58%,
+        #8398D1 61%,
+
+        #405E94 64%,
+        #A4BFF6 67%,
+        #8398D1 70%,
+
+        #5871A7 73%,
+        #A4BFF6 76%,
+        #8398D1 79%,
+        
+        transparent 80%
+    );
+    box-shadow: 0 -0.5px 1px #535E70 inset,
+        1.25px 0 0.5px -0.5px #3B3B47 inset,
+        2.5px 0 1px #65748B inset,
+        3.5px 0 1px #98AED3 inset,
+        0 1px 1px #D4E0FA inset,
+        0 -1.5px 1px #8DA3D4 inset,
+        -0.5px 0 0.5px #9AAED1 inset,
+        -0.75px 0.25px 0.5px #454F59,
+        -1.25px -0.1px 0.1px #EDEEF3,
+        0 5px 3px -2.5px #433E38,
+        0 3px 4px -1px #C0B9B1,
+        0 4px 5px #CFCBCA;
+}
+
+.keys-container {
+    display: block;
+    width: 720px;
+    height: 150px;
+    position: absolute;
+    bottom: 0;
+    right: 35px;
+    background-color: #E3DFDA;
+    background-image: linear-gradient(90deg, #E3DFDA, #DFDCD3);
+    border-radius: 0.5px;
+    box-shadow: 0 3px 1.25px -0.75px #282421 inset,
+        5px 0 2px #AFA896 inset,
+        -2px 0 4px #9F9684 inset,
+        -6px 0 2px #BFB3A5 inset,
+        0 -1.5px 1px 1px #F1F6EF;
+}
+
+.white {
+    width: 710px;
+    height: 135px;
+    background-color: #141312;
+    position: absolute;
+    top: 2px;
+    left: 5px;
+    box-shadow:  -1px 0 2px -1px rgba(40,36,33,0.35),
+        3px 0 2px -1px rgba(40,36,33,0.5),
+        -2px 0 3px -2px #574E45,
+        0 8px 6px -3px #CBC8B9;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-gap: 2px;
+
+}
+
+.white .key {
+    height: 133px;
+    background-color: #E9E7D8;
+    border-radius: 3px;
+    background-image: linear-gradient(#E9E7D8, #F4F2E3);
+    box-shadow: 1px 0 1px -0.5px #F6EDDC inset,
+        -1.25px 0 0.5px -0.5px #9D9885 inset, 
+        0 0 1px 2px #F7F5E8 inset,
+        0 10px 5px -5px rgba(34,33,28,0.75),
+        0 10px 7px -3px rgba(40,36,33,0.25);
+}
+
+.black {
+    display: grid;
+    width: 665px;
+    height: 72px;
+    position: absolute;
+    top: 2px;
+    left: 35px;
+    grid-template-columns: 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px;
+    -ms-grid-columns: 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px;
+    grid-gap: 21px;
+}
+
+.black .key {
+    background-color: #000;
+    background-image: linear-gradient(
+        #B5BDD2 15%,
+        #556478 17%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+    box-shadow: 1px 0 1px #1D212D inset,
+        2px 0 1px #252D3A inset, 
+        -2px 0 0.75px #252D3A inset, 
+        0 -2px 0.5px #22252A inset,
+        0 -6px 0.5px #3B3F42 inset,
+        0 0 0.5px 1px #181913,
+        7px 7px 1px -5px #FAFBF3,
+        -7.25px 7px 1px -5px #FAFBF3;
+    border-radius: 1.5px;
+}
+
+.black .key:nth-child(1) {
+    background-image: linear-gradient(
+        #B5BDD2 4%,
+        #556478 7%,
+        #3C4759 50%,
+        #262E31 90%
+    );
+}
+
+.black .key:nth-child(4) {
+    background-image: linear-gradient(
+        176deg,
+        #B5BDD2 4%,
+        #556478 8%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(5) {
+    background-image: linear-gradient(
+        178deg,
+        #B5BDD2 2%,
+        #556478 3%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(7) {
+    background-image: linear-gradient(
+        #B5BDD2 12%,
+        #556478 15%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(8) {
+    background-image: linear-gradient(
+        182deg,
+        #B5BDD2 2%,
+        #556478 3% 10%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(9) {
+    background-image: linear-gradient(
+        #B5BDD2 7%,
+        #556478 10% 20%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(11) {
+    background-image: linear-gradient(
+        182deg,
+        #B5BDD2 7%,
+        #556478 10% 20%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(12) {
+    background-image: linear-gradient(
+        181deg,
+        #B5BDD2 5%,
+        #556478 8%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+
+.black .key:nth-child(14) {
+    background-image: linear-gradient(
+        #B5BDD2 2%,
+        #556478 8%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(15) {
+    background-image: linear-gradient(
+        175deg,
+        #B5BDD2 3%,
+        #556478 8% 15%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.black .key:nth-child(16) {
+    background-image: linear-gradient(
+        179deg,
+        #B5BDD2 5%,
+        #556478 7%,
+        #3C4759 30%,
+        #262E31 90%,
+        #192026 92%
+    );
+}
+
+.logo {
+    position: absolute;
+    top: 225px;
+    left: 15px;
+    display: block;
+    width: 180px;
+}
+
+.logo h1 {
+    font-family: "Montserrat", sans-serif;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    text-align: center;
+}
+
+.logo h1 span:first-child {
+    color: #6C4351;
+    text-shadow: 0 0 1px #C3A9B2, 0 0 2px #EEDFE2;
+}
+
+.logo h1 span:last-child {
+    color: #ECE8E5;
+    letter-spacing: 1px;
+    text-shadow: 0px 0.5px 0.75px #BCBBB7,
+        0.5px 0.5px 0.75px #BCBBB7,
+        0.5px 0px 0.75px #BCBBB7,
+        0.5px -0.5px 0.75px #BCBBB7,
+        0 -0.5px 0.75px #BCBBB7,
+        -0.5px -0.5px 0.75px #BCBBB7,
+        -0.5px 0.5px 0.75px #BCBBB7,
+        -0.5px 0 0.75px #BCBBB7;
+}
+
+/* 
+  If you like my work: 
+    https://www.buymeacoffee.com/fossheim
+    https://www.patreon.com/fossheim
+*/
\ No newline at end of file
diff --git a/ceramic-looped/README.markdown b/ceramic-looped/README.markdown
new file mode 100644
index 0000000..d0e4176
--- /dev/null
+++ b/ceramic-looped/README.markdown
@@ -0,0 +1,5 @@
+# Ceramic looped
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/supah/pen/jOrNgOM](https://codepen.io/supah/pen/jOrNgOM).
+
+
diff --git a/ceramic-looped/dist/index.html b/ceramic-looped/dist/index.html
new file mode 100644
index 0000000..bbea6f5
--- /dev/null
+++ b/ceramic-looped/dist/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Ceramic looped</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!--
+
+Follow me on
+Instagram: https://www.instagram.com/supahfunk/
+Dribbble: https://dribbble.com/supahfunk
+Twitter: https://twitter.com/supahfunk
+Codepen: https://codepen.io/supah/
+
+-->
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/ceramic-looped/dist/script.js b/ceramic-looped/dist/script.js
new file mode 100644
index 0000000..f10ff33
--- /dev/null
+++ b/ceramic-looped/dist/script.js
@@ -0,0 +1,230 @@
+/*--------------------
+Vars
+--------------------*/
+let ball;
+let pattern;
+let palettes;
+const win = { w: window.innerWidth, h: window.innerHeight };
+const mouse = { x: win.w * 0.5, y: win.h * 0.5 };
+
+
+/*--------------------
+                                                  Utils
+                                                  --------------------*/
+const lerp = (v0, v1, t) => v0 * (1 - t) + v1 * t;
+
+
+/*--------------------
+                                                   Pattern Generator
+                                                   --------------------*/
+class Pattern {
+  constructor(obj) {
+    Object.assign(this, obj);
+    this.init();
+  }
+
+  init() {
+    this.canvas = document.querySelector(`#${this.id}`) || document.createElement('canvas');
+    this.canvas.id = this.id;
+    this.canvas.width = this.width;
+    this.canvas.height = this.height;
+    document.body.appendChild(this.canvas);
+    this.ctx = this.canvas.getContext('2d');
+    this.generate();
+  }
+
+  random(min, max) {
+    return Math.floor(min + Math.random() * (max - min));
+  }
+
+  generate() {
+    let randomPalette = this.random(0, 100);
+    // randomPalette = 65
+    this.palette = palettes[randomPalette];
+    console.log('palette ---->', randomPalette);
+    let start = 0;
+    while (start < this.height + this.maxStroke) {
+      const off = this.random(this.minStroke, this.maxStroke);
+      this.ctx.beginPath();
+      this.ctx.strokeStyle = this.palette[this.random(0, 5)];
+      this.ctx.lineWidth = off;
+      this.ctx.moveTo(-this.maxStroke, start);
+      this.ctx.lineTo(this.width + this.maxStroke, start);
+      this.ctx.stroke();
+      this.ctx.closePath();
+      start += off;
+    }
+
+    if (ball) {
+      ball.material.map.needsUpdate = true;
+    }
+  }}
+
+
+
+/*--------------------
+     Ball
+     --------------------*/
+class Ball {
+  constructor(obj) {
+    Object.assign(this, obj);
+    this.init();
+    this.events = this.events.bind(this);
+  }
+
+  init() {
+    this.renderer = new THREE.WebGLRenderer({ antialias: true, transparent: true });
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(this.renderer.domElement);
+
+    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    this.camera.position.z = 5;
+
+    this.scene = new THREE.Scene();
+
+    this.createLights();
+    this.createGeo();
+
+    this.events();
+    this.render();
+  }
+
+  createLights() {
+    this.ambientLight = new THREE.AmbientLight(0xffffff, .7);
+    this.scene.add(this.ambientLight);
+    this.ambientLight.castShadow = true;
+
+    this.light = new THREE.SpotLight(0xffffff, .5);
+    this.light.position.set(0, 0, 10);
+    this.light.castShadow = true;
+
+    this.scene.add(this.light);
+    this.scene.add(this.ambientLight);
+  }
+
+  createGeo() {
+    this.texture = new THREE.Texture(document.getElementById(this.textureID));
+    this.texture.wrapS = THREE.RepeatWrapping;
+    this.texture.wrapT = THREE.RepeatWrapping;
+
+    const path = 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/';
+    const format = '.jpg';
+    const urls = [
+    `${path}px${format}`, `${path}nx${format}`,
+    `${path}py${format}`, `${path}ny${format}`,
+    `${path}pz${format}`, `${path}nz${format}`];
+
+    this.cubeTexture = new THREE.CubeTextureLoader().load(urls);
+    this.cubeTexture.mapping = THREE.CubeRefractionMapping;
+
+    console.log(this.cubeTexture);
+    this.geo = new THREE.SphereBufferGeometry(1.5, 100, 100);
+    this.material = new THREE.MeshStandardMaterial({
+      roughness: 0.1,
+      metalness: 0.2,
+      emissive: 0x111111,
+      map: this.texture,
+      envMap: this.cubeTexture,
+      reflectivity: 0,
+      refractionRatio: 0.8 });
+
+    this.material.map.needsUpdate = true;
+
+    this.material.onBeforeCompile = function (shader) {
+      shader.uniforms.time = { value: 0 };
+
+      shader.vertexShader = `
+      uniform float time; 
+      ${shader.vertexShader}`;
+      shader.vertexShader = shader.vertexShader.replace(
+      '#include <begin_vertex>',
+      `
+          #include <begin_vertex>
+          float speed = 8.;
+          float TAO =  3.14159265 * 2.;
+          float t = mod(time, speed)  / speed;
+          mat3 mat = mat3(
+            vec3(1. + sin(TAO * t * 2. + position.z * 2.5) * .5, 0., 0.),
+            vec3(0., 1. + cos(TAO * t + position.x * 2.) * .5, 0.),
+            vec3(0., 0., 1. + sin(TAO * t + position.y * 3.) * .5)
+          );
+          transformed *= mat;
+          vNormal *= mat;
+        `);
+
+      this.userData.shader = shader;
+    };
+    this.material.castShadow = true;
+    this.material.receiveShadow = true;
+
+    this.box = new THREE.Mesh(this.geo, this.material);
+    this.scene.add(this.box);
+  }
+
+  render() {
+    this.renderer.render(this.scene, this.camera);
+    requestAnimationFrame(this.render.bind(this));
+
+    const time = performance.now() / 1000;
+
+    if (this.material.userData) {
+      this.material.userData.shader.uniforms.time.value = time;
+      this.material.map.offset.y = time % 8 / 8;
+    }
+    this.box.rotation.y = lerp(this.box.rotation.z, -mouse.x * 0.005, 0.08);
+    this.box.rotation.z = lerp(this.box.rotation.y, mouse.y * 0.005, 0.08);
+    this.box.rotation.x = Math.PI * 2 * (time % 8) / 8;
+
+    this.light.position.x = lerp(this.light.position.x, -10 + mouse.x / win.w * 20, 0.08);
+    this.light.position.y = lerp(this.light.position.y, 10 + mouse.y / win.h * -20, 0.08);
+    this.light.position.z = lerp(this.light.position.z, -10 + Math.sin(mouse.x / win.w * Math.PI) * 20, 0.08);
+  }
+
+  handleMouse(e) {
+    mouse.x = e.clientX || e.touches[0].clientX;
+    mouse.y = e.clientY || e.touches[0].clientY;
+  }
+
+  events() {
+    window.addEventListener('resize', () => {
+      this.camera.aspect = window.innerWidth / window.innerHeight;
+      this.camera.updateProjectionMatrix();
+
+      this.renderer.setSize(window.innerWidth, window.innerHeight);
+
+      win.w = window.innerWidth;
+      win.h = window.innerHeight;
+    });
+
+    window.addEventListener('touchmove', e => {this.handleMouse(e);});
+    window.addEventListener('mousemove', e => {this.handleMouse(e);});
+  }}
+
+
+
+/*--------------------
+     Init
+     --------------------*/
+fetch('https://cdn.jsdelivr.net/npm/nice-color-palettes@3.0.0/100.json').
+then(response => response.json()).
+then(data => {
+  palettes = data;
+
+  pattern = new Pattern({
+    id: 'canvas-pattern',
+    width: 1024,
+    height: 1024,
+    minStroke: 2,
+    maxStroke: 6 });
+
+
+  ball = new Ball({
+    textureID: 'canvas-pattern' });
+
+});
+
+
+/*--------------------
+    Listeners
+    --------------------*/
+document.body.addEventListener('click', () => {pattern.generate();});
\ No newline at end of file
diff --git a/ceramic-looped/dist/style.css b/ceramic-looped/dist/style.css
new file mode 100644
index 0000000..0354a50
--- /dev/null
+++ b/ceramic-looped/dist/style.css
@@ -0,0 +1,20 @@
+html,
+body {
+  margin: 0;
+  touch-action: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  background: #030303;
+}
+
+#canvas-pattern {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 30px;
+  height: 30px;
+}
\ No newline at end of file
diff --git a/ceramic-looped/license.txt b/ceramic-looped/license.txt
new file mode 100644
index 0000000..0442a7b
--- /dev/null
+++ b/ceramic-looped/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Fabio Ottaviani (https://codepen.io/supah/pen/jOrNgOM)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/ceramic-looped/src/index.html b/ceramic-looped/src/index.html
new file mode 100644
index 0000000..72f5cf5
--- /dev/null
+++ b/ceramic-looped/src/index.html
@@ -0,0 +1,9 @@
+<!--
+
+Follow me on
+Instagram: https://www.instagram.com/supahfunk/
+Dribbble: https://dribbble.com/supahfunk
+Twitter: https://twitter.com/supahfunk
+Codepen: https://codepen.io/supah/
+
+-->
\ No newline at end of file
diff --git a/ceramic-looped/src/script.babel b/ceramic-looped/src/script.babel
new file mode 100644
index 0000000..2295551
--- /dev/null
+++ b/ceramic-looped/src/script.babel
@@ -0,0 +1,230 @@
+/*--------------------
+Vars
+--------------------*/
+let ball
+let pattern
+let palettes
+const win = { w: window.innerWidth, h : window.innerHeight }
+const mouse = { x: win.w * 0.5 , y: win.h * 0.5 }
+
+
+/*--------------------
+Utils
+--------------------*/
+const lerp = (v0, v1, t) => (v0 * (1 - t) + v1 * t)
+
+
+/*--------------------
+Pattern Generator
+--------------------*/
+class Pattern {
+  constructor (obj) {
+    Object.assign(this, obj)
+    this.init()
+  }
+  
+  init() {
+    this.canvas = document.querySelector(`#${this.id}`) || document.createElement('canvas')
+    this.canvas.id = this.id
+    this.canvas.width = this.width
+    this.canvas.height = this.height
+    document.body.appendChild(this.canvas)
+    this.ctx = this.canvas.getContext('2d')
+    this.generate()
+  }
+  
+  random(min, max) {
+    return Math.floor(min + Math.random() * (max - min))
+  }
+  
+  generate() {
+    let randomPalette = this.random(0, 100)
+    // randomPalette = 65
+    this.palette = palettes[randomPalette]
+    console.log('palette ---->', randomPalette)
+    let start = 0
+    while (start < this.height + this.maxStroke) {
+      const off = this.random(this.minStroke, this.maxStroke)
+      this.ctx.beginPath()
+      this.ctx.strokeStyle = this.palette[this.random(0, 5)]
+      this.ctx.lineWidth = off
+      this.ctx.moveTo(-this.maxStroke, start)
+      this.ctx.lineTo(this.width + this.maxStroke, start)
+      this.ctx.stroke()
+      this.ctx.closePath()
+      start += off
+    }
+
+    if (ball) {
+      ball.material.map.needsUpdate = true
+    }
+  }
+}
+
+
+/*--------------------
+Ball
+--------------------*/
+class Ball {
+  constructor(obj) {
+    Object.assign(this, obj)
+    this.init()
+    this.events = this.events.bind(this)
+  }
+  
+  init() {
+    this.renderer = new THREE.WebGLRenderer({ antialias: true, transparent: true })
+    this.renderer.setSize(window.innerWidth, window.innerHeight)
+    document.body.appendChild(this.renderer.domElement)
+    
+    this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
+    this.camera.position.z = 5
+    
+    this.scene = new THREE.Scene()
+    
+    this.createLights()
+    this.createGeo()
+    
+    this.events()
+    this.render()
+  }
+  
+  createLights() {
+    this.ambientLight = new THREE.AmbientLight(0xffffff, .7)
+    this.scene.add(this.ambientLight)
+    this.ambientLight.castShadow = true
+
+    this.light = new THREE.SpotLight( 0xffffff, .5 )
+    this.light.position.set(0, 0, 10)
+    this.light.castShadow = true
+    
+    this.scene.add(this.light)
+    this.scene.add(this.ambientLight)
+  }
+  
+  createGeo() {
+    this.texture = new THREE.Texture(document.getElementById(this.textureID))
+    this.texture.wrapS = THREE.RepeatWrapping
+    this.texture.wrapT = THREE.RepeatWrapping
+    
+    const path = 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/'
+    const format = '.jpg'
+    const urls = [
+      `${path}px${format}`, `${path}nx${format}`,
+      `${path}py${format}`, `${path}ny${format}`,
+      `${path}pz${format}`, `${path}nz${format}`
+    ]
+    this.cubeTexture = new THREE.CubeTextureLoader().load(urls)
+		this.cubeTexture.mapping = THREE.CubeRefractionMapping
+
+    console.log(this.cubeTexture)
+    this.geo = new THREE.SphereBufferGeometry( 1.5, 100, 100)
+    this.material = new THREE.MeshStandardMaterial({
+      roughness: 0.1,
+      metalness: 0.2,
+      emissive: 0x111111,
+      map: this.texture,
+      envMap: this.cubeTexture,
+      reflectivity: 0,
+      refractionRatio: 0.8,
+    })
+    this.material.map.needsUpdate = true
+    
+    this.material.onBeforeCompile = function ( shader ) {
+      shader.uniforms.time = { value: 0 }
+      
+      shader.vertexShader = `
+      uniform float time; 
+      ${shader.vertexShader}`;
+      shader.vertexShader = shader.vertexShader.replace(
+        '#include <begin_vertex>',
+        `
+          #include <begin_vertex>
+          float speed = 8.;
+          float TAO =  3.14159265 * 2.;
+          float t = mod(time, speed)  / speed;
+          mat3 mat = mat3(
+            vec3(1. + sin(TAO * t * 2. + position.z * 2.5) * .5, 0., 0.),
+            vec3(0., 1. + cos(TAO * t + position.x * 2.) * .5, 0.),
+            vec3(0., 0., 1. + sin(TAO * t + position.y * 3.) * .5)
+          );
+          transformed *= mat;
+          vNormal *= mat;
+        `
+      );
+      this.userData.shader = shader
+    }
+    this.material.castShadow = true
+    this.material.receiveShadow = true
+   
+    this.box = new THREE.Mesh(this.geo, this.material)
+    this.scene.add(this.box)
+  }
+  
+  render() {
+    this.renderer.render(this.scene, this.camera)
+    requestAnimationFrame(this.render.bind(this))
+    
+    const time = performance.now() / 1000
+    
+    if (this.material.userData) {
+      this.material.userData.shader.uniforms.time.value = time
+      this.material.map.offset.y = (time % 8) / 8
+    }
+    this.box.rotation.y = lerp(this.box.rotation.z, -mouse.x * 0.005, 0.08)
+    this.box.rotation.z = lerp(this.box.rotation.y, mouse.y * 0.005, 0.08)
+    this.box.rotation.x = Math.PI * 2 * (time % 8) / 8
+    
+    this.light.position.x = lerp(this.light.position.x, -10 + mouse.x / win.w * 20, 0.08)
+    this.light.position.y = lerp(this.light.position.y, 10 + mouse.y / win.h * -20, 0.08)
+    this.light.position.z = lerp(this.light.position.z, -10 + Math.sin(mouse.x / win.w * Math.PI) * 20, 0.08)
+  }
+
+  handleMouse(e) {
+    mouse.x = e.clientX || e.touches[0].clientX
+    mouse.y = e.clientY || e.touches[0].clientY
+  }
+  
+  events() {
+    window.addEventListener('resize', () => {
+      this.camera.aspect = window.innerWidth / window.innerHeight
+      this.camera.updateProjectionMatrix()
+      
+      this.renderer.setSize(window.innerWidth, window.innerHeight)
+      
+      win.w = window.innerWidth
+      win.h = window.innerHeight
+    })
+    
+    window.addEventListener('touchmove', (e) => { this.handleMouse(e)})
+    window.addEventListener('mousemove', (e) => { this.handleMouse(e)})
+  }
+}
+
+
+/*--------------------
+Init
+--------------------*/
+fetch('https://cdn.jsdelivr.net/npm/nice-color-palettes@3.0.0/100.json')
+  .then(response => response.json())
+  .then(data => {
+  palettes = data
+  
+  pattern = new Pattern({
+    id: 'canvas-pattern',
+    width: 1024,
+    height: 1024,
+    minStroke: 2,
+    maxStroke: 6
+  })
+  
+  ball = new Ball({
+    textureID: 'canvas-pattern'
+  })
+})
+
+
+/*--------------------
+Listeners
+--------------------*/
+document.body.addEventListener('click', () => { pattern.generate() })
\ No newline at end of file
diff --git a/ceramic-looped/src/style.scss b/ceramic-looped/src/style.scss
new file mode 100644
index 0000000..1d1308d
--- /dev/null
+++ b/ceramic-looped/src/style.scss
@@ -0,0 +1,17 @@
+html,
+body {
+  margin: 0;
+  touch-action: none;
+  user-select: none;
+  cursor: pointer;
+  background: #030303;
+}
+
+#canvas-pattern {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 30px;
+  height: 30px;
+}
\ No newline at end of file
diff --git a/checkbox-group-styled-as-tiles/README.markdown b/checkbox-group-styled-as-tiles/README.markdown
new file mode 100644
index 0000000..e3b69bf
--- /dev/null
+++ b/checkbox-group-styled-as-tiles/README.markdown
@@ -0,0 +1,7 @@
+# Checkbox group styled as tiles
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/havardob/pen/BapJYMg](https://codepen.io/havardob/pen/BapJYMg).
+
+A demonstration of how to create checkboxes that doesn't necessarily looks like... well, checkboxes. 
+
+Icons by https://phosphoricons.com/ 
diff --git a/checkbox-group-styled-as-tiles/dist/index.html b/checkbox-group-styled-as-tiles/dist/index.html
new file mode 100644
index 0000000..ddbc267
--- /dev/null
+++ b/checkbox-group-styled-as-tiles/dist/index.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Checkbox group styled as tiles</title>
+  
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<fieldset class="checkbox-group">
+	<legend class="checkbox-group-legend">Choose your favorites</legend>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<circle cx="96" cy="144.00002" r="10"></circle>
+						<circle cx="160" cy="144.00002" r="10"></circle>
+						<path d="M74.4017,80A175.32467,175.32467,0,0,1,128,72a175.32507,175.32507,0,0,1,53.59754,7.99971" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M181.59717,176.00041A175.32523,175.32523,0,0,1,128,184a175.32505,175.32505,0,0,1-53.59753-7.99971" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M155.04392,182.08789l12.02517,24.05047a7.96793,7.96793,0,0,0,8.99115,4.20919c24.53876-5.99927,45.69294-16.45908,61.10024-29.85086a8.05225,8.05225,0,0,0,2.47192-8.38971L205.65855,58.86074a8.02121,8.02121,0,0,0-4.62655-5.10908,175.85294,175.85294,0,0,0-29.66452-9.18289,8.01781,8.01781,0,0,0-9.31925,5.28642l-7.97318,23.91964" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M100.95624,182.08757l-12.02532,24.0508a7.96794,7.96794,0,0,1-8.99115,4.20918c-24.53866-5.99924-45.69277-16.459-61.10006-29.85069a8.05224,8.05224,0,0,1-2.47193-8.38972L50.34158,58.8607a8.0212,8.0212,0,0,1,4.62655-5.1091,175.85349,175.85349,0,0,1,29.66439-9.18283,8.0178,8.0178,0,0,1,9.31924,5.28642l7.97318,23.91964" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+					</svg>
+				</span>
+				<span class="checkbox-label">Discord</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" checked />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<polygon points="56 100 56 168 128 236 128 168 200 168 56 32 200 32 200 100 56 100" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polygon>
+					</svg>
+				</span>
+				<span class="checkbox-label">Framer</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<polygon points="72 40 184 40 240 104 128 224 16 104 72 40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polygon>
+						<polygon points="177.091 104 128 224 78.909 104 128 40 177.091 104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polygon>
+						<line x1="16" y1="104" x2="240" y2="104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line>
+					</svg>
+				</span>
+				<span class="checkbox-label">Sketch</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<circle cx="128" cy="128" r="40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle>
+						<rect x="36" y="36" width="184" height="184" rx="48" stroke-width="12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect>
+						<circle cx="180" cy="75.99998" r="10"></circle>
+					</svg>
+				</span>
+				<span class="checkbox-label">Instagram</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle>
+						<path d="M71.0247,205.27116a159.91145,159.91145,0,0,1,136.98116-77.27311q8.09514,0,15.99054.78906" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M188.0294,53.09083A159.68573,159.68573,0,0,1,64.00586,111.99805a160.8502,160.8502,0,0,1-30.15138-2.83671" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M85.93041,41.68508a159.92755,159.92755,0,0,1,78.99267,138.00723,160.35189,160.35189,0,0,1-4.73107,38.77687" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+					</svg>
+				</span>
+				<span class="checkbox-label">Dribbble</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle>
+						<g>
+							<path d="M179.1333,108.32931a112.19069,112.19069,0,0,0-102.3584.04859" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+							<path d="M164.29541,136.71457a79.94058,79.94058,0,0,0-72.68359.04736" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+							<path d="M149.47217,165.07248a47.97816,47.97816,0,0,0-43.03662.04736" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						</g>
+					</svg>
+				</span>
+				<span class="checkbox-label">Spotify</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<circle cx="162" cy="128" r="34" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle>
+						<path d="M128,94V26.00089H94a34,34,0,0,0,0,68Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M128,161.99911V94H94a34,34,0,0,0,0,68Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M128,94V26.00089h34a34,34,0,0,1,0,68Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M128,161.99911v34.00044A34,34,0,1,1,94,162Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+					</svg>
+				</span>
+				<span class="checkbox-label">Figma</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" checked/>
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<path d="M80,56.00005h24a0,0,0,0,1,0,0v72a24,24,0,0,1-24,24h0a24,24,0,0,1-24-24V80a24,24,0,0,1,24-24Z" transform="translate(184.00005 24.00003) rotate(90)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M128,80H104a24,24,0,0,1-24-24V56a24,24,0,0,1,24-24h0a24,24,0,0,1,24,24Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M152,32.00007h24a0,0,0,0,1,0,0v72a24,24,0,0,1-24,24h0a24,24,0,0,1-24-24V56a24,24,0,0,1,24-24Z" transform="translate(304 160.00011) rotate(180)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M176,128V104a24,24,0,0,1,24-24h0a24,24,0,0,1,24,24v0a24,24,0,0,1-24,24Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M176,104.00005h24a0,0,0,0,1,0,0v72a24,24,0,0,1-24,24h0a24,24,0,0,1-24-24V128A24,24,0,0,1,176,104.00005Z" transform="translate(23.99995 328.00003) rotate(-90)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M128,176h24a24,24,0,0,1,24,24v0a24,24,0,0,1-24,24h0a24,24,0,0,1-24-24Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M104,128h24a0,0,0,0,1,0,0v72a24,24,0,0,1-24,24h0a24,24,0,0,1-24-24V152A24,24,0,0,1,104,128Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M80,128v24a24,24,0,0,1-24,24h0a24,24,0,0,1-24-24v0a24,24,0,0,1,24-24Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+					</svg>
+				</span>
+				<span class="checkbox-label">Slack</span>
+			</span>
+		</label>
+	</div>
+</fieldset>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/checkbox-group-styled-as-tiles/dist/script.js b/checkbox-group-styled-as-tiles/dist/script.js
new file mode 100644
index 0000000..91557d7
--- /dev/null
+++ b/checkbox-group-styled-as-tiles/dist/script.js
@@ -0,0 +1 @@
+// Nope
\ No newline at end of file
diff --git a/checkbox-group-styled-as-tiles/dist/style.css b/checkbox-group-styled-as-tiles/dist/style.css
new file mode 100644
index 0000000..44cef49
--- /dev/null
+++ b/checkbox-group-styled-as-tiles/dist/style.css
@@ -0,0 +1,128 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Inter", sans-serif;
+  line-height: 1.5;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f8f8f9;
+}
+
+.checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 600px;
+}
+.checkbox-group > * {
+  margin: 0.5rem 0.5rem;
+}
+
+.checkbox-group-legend {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #9c9c9c;
+  text-align: center;
+  line-height: 1.125;
+  margin-bottom: 1.25rem;
+}
+
+.checkbox-input {
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+.checkbox-input:checked + .checkbox-tile {
+  border-color: #2260ff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+  color: #2260ff;
+}
+.checkbox-input:checked + .checkbox-tile:before {
+  transform: scale(1);
+  opacity: 1;
+  background-color: #2260ff;
+  border-color: #2260ff;
+}
+.checkbox-input:checked + .checkbox-tile .checkbox-icon, .checkbox-input:checked + .checkbox-tile .checkbox-label {
+  color: #2260ff;
+}
+.checkbox-input:focus + .checkbox-tile {
+  border-color: #2260ff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
+}
+.checkbox-input:focus + .checkbox-tile:before {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.checkbox-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 7rem;
+  min-height: 7rem;
+  border-radius: 0.5rem;
+  border: 2px solid #b5bfd9;
+  background-color: #fff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+  transition: 0.15s ease;
+  cursor: pointer;
+  position: relative;
+}
+.checkbox-tile:before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid #b5bfd9;
+  background-color: #fff;
+  border-radius: 50%;
+  top: 0.25rem;
+  left: 0.25rem;
+  opacity: 0;
+  transform: scale(0);
+  transition: 0.25s ease;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
+  background-size: 12px;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+}
+.checkbox-tile:hover {
+  border-color: #2260ff;
+}
+.checkbox-tile:hover:before {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.checkbox-icon {
+  transition: 0.375s ease;
+  color: #494949;
+}
+.checkbox-icon svg {
+  width: 3rem;
+  height: 3rem;
+}
+
+.checkbox-label {
+  color: #707070;
+  transition: 0.375s ease;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/checkbox-group-styled-as-tiles/license.txt b/checkbox-group-styled-as-tiles/license.txt
new file mode 100644
index 0000000..5922deb
--- /dev/null
+++ b/checkbox-group-styled-as-tiles/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Håvard Brynjulfsen (https://codepen.io/havardob/pen/BapJYMg)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/checkbox-group-styled-as-tiles/src/index.html b/checkbox-group-styled-as-tiles/src/index.html
new file mode 100644
index 0000000..f7f55b4
--- /dev/null
+++ b/checkbox-group-styled-as-tiles/src/index.html
@@ -0,0 +1,143 @@
+<fieldset class="checkbox-group">
+	<legend class="checkbox-group-legend">Choose your favorites</legend>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<circle cx="96" cy="144.00002" r="10"></circle>
+						<circle cx="160" cy="144.00002" r="10"></circle>
+						<path d="M74.4017,80A175.32467,175.32467,0,0,1,128,72a175.32507,175.32507,0,0,1,53.59754,7.99971" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M181.59717,176.00041A175.32523,175.32523,0,0,1,128,184a175.32505,175.32505,0,0,1-53.59753-7.99971" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M155.04392,182.08789l12.02517,24.05047a7.96793,7.96793,0,0,0,8.99115,4.20919c24.53876-5.99927,45.69294-16.45908,61.10024-29.85086a8.05225,8.05225,0,0,0,2.47192-8.38971L205.65855,58.86074a8.02121,8.02121,0,0,0-4.62655-5.10908,175.85294,175.85294,0,0,0-29.66452-9.18289,8.01781,8.01781,0,0,0-9.31925,5.28642l-7.97318,23.91964" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M100.95624,182.08757l-12.02532,24.0508a7.96794,7.96794,0,0,1-8.99115,4.20918c-24.53866-5.99924-45.69277-16.459-61.10006-29.85069a8.05224,8.05224,0,0,1-2.47193-8.38972L50.34158,58.8607a8.0212,8.0212,0,0,1,4.62655-5.1091,175.85349,175.85349,0,0,1,29.66439-9.18283,8.0178,8.0178,0,0,1,9.31924,5.28642l7.97318,23.91964" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+					</svg>
+				</span>
+				<span class="checkbox-label">Discord</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" checked />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<polygon points="56 100 56 168 128 236 128 168 200 168 56 32 200 32 200 100 56 100" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polygon>
+					</svg>
+				</span>
+				<span class="checkbox-label">Framer</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<polygon points="72 40 184 40 240 104 128 224 16 104 72 40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polygon>
+						<polygon points="177.091 104 128 224 78.909 104 128 40 177.091 104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polygon>
+						<line x1="16" y1="104" x2="240" y2="104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line>
+					</svg>
+				</span>
+				<span class="checkbox-label">Sketch</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<circle cx="128" cy="128" r="40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle>
+						<rect x="36" y="36" width="184" height="184" rx="48" stroke-width="12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect>
+						<circle cx="180" cy="75.99998" r="10"></circle>
+					</svg>
+				</span>
+				<span class="checkbox-label">Instagram</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle>
+						<path d="M71.0247,205.27116a159.91145,159.91145,0,0,1,136.98116-77.27311q8.09514,0,15.99054.78906" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M188.0294,53.09083A159.68573,159.68573,0,0,1,64.00586,111.99805a160.8502,160.8502,0,0,1-30.15138-2.83671" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M85.93041,41.68508a159.92755,159.92755,0,0,1,78.99267,138.00723,160.35189,160.35189,0,0,1-4.73107,38.77687" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+					</svg>
+				</span>
+				<span class="checkbox-label">Dribbble</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle>
+						<g>
+							<path d="M179.1333,108.32931a112.19069,112.19069,0,0,0-102.3584.04859" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+							<path d="M164.29541,136.71457a79.94058,79.94058,0,0,0-72.68359.04736" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+							<path d="M149.47217,165.07248a47.97816,47.97816,0,0,0-43.03662.04736" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						</g>
+					</svg>
+				</span>
+				<span class="checkbox-label">Spotify</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" />
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<circle cx="162" cy="128" r="34" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle>
+						<path d="M128,94V26.00089H94a34,34,0,0,0,0,68Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M128,161.99911V94H94a34,34,0,0,0,0,68Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M128,94V26.00089h34a34,34,0,0,1,0,68Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M128,161.99911v34.00044A34,34,0,1,1,94,162Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+					</svg>
+				</span>
+				<span class="checkbox-label">Figma</span>
+			</span>
+		</label>
+	</div>
+	<div class="checkbox">
+		<label class="checkbox-wrapper">
+			<input type="checkbox" class="checkbox-input" checked/>
+			<span class="checkbox-tile">
+				<span class="checkbox-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
+						<rect width="256" height="256" fill="none"></rect>
+						<path d="M80,56.00005h24a0,0,0,0,1,0,0v72a24,24,0,0,1-24,24h0a24,24,0,0,1-24-24V80a24,24,0,0,1,24-24Z" transform="translate(184.00005 24.00003) rotate(90)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M128,80H104a24,24,0,0,1-24-24V56a24,24,0,0,1,24-24h0a24,24,0,0,1,24,24Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M152,32.00007h24a0,0,0,0,1,0,0v72a24,24,0,0,1-24,24h0a24,24,0,0,1-24-24V56a24,24,0,0,1,24-24Z" transform="translate(304 160.00011) rotate(180)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M176,128V104a24,24,0,0,1,24-24h0a24,24,0,0,1,24,24v0a24,24,0,0,1-24,24Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M176,104.00005h24a0,0,0,0,1,0,0v72a24,24,0,0,1-24,24h0a24,24,0,0,1-24-24V128A24,24,0,0,1,176,104.00005Z" transform="translate(23.99995 328.00003) rotate(-90)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M128,176h24a24,24,0,0,1,24,24v0a24,24,0,0,1-24,24h0a24,24,0,0,1-24-24Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M104,128h24a0,0,0,0,1,0,0v72a24,24,0,0,1-24,24h0a24,24,0,0,1-24-24V152A24,24,0,0,1,104,128Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+						<path d="M80,128v24a24,24,0,0,1-24,24h0a24,24,0,0,1-24-24v0a24,24,0,0,1,24-24Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
+					</svg>
+				</span>
+				<span class="checkbox-label">Slack</span>
+			</span>
+		</label>
+	</div>
+</fieldset>
\ No newline at end of file
diff --git a/checkbox-group-styled-as-tiles/src/script.js b/checkbox-group-styled-as-tiles/src/script.js
new file mode 100644
index 0000000..91557d7
--- /dev/null
+++ b/checkbox-group-styled-as-tiles/src/script.js
@@ -0,0 +1 @@
+// Nope
\ No newline at end of file
diff --git a/checkbox-group-styled-as-tiles/src/style.scss b/checkbox-group-styled-as-tiles/src/style.scss
new file mode 100644
index 0000000..b749b52
--- /dev/null
+++ b/checkbox-group-styled-as-tiles/src/style.scss
@@ -0,0 +1,136 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
+
+*,
+*:after,
+*:before {
+	box-sizing: border-box;
+}
+
+body {
+	font-family: "Inter", sans-serif;
+	line-height: 1.5;
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #f8f8f9;
+}
+
+.checkbox-group {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	width: 90%;
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 600px;
+	& > * {
+		margin: .5rem 0.5rem;
+	}
+}
+
+
+
+.checkbox-group-legend {
+	font-size: 1.5rem;
+	font-weight: 700;
+	color: #9c9c9c;
+	text-align: center;
+	line-height: 1.125;
+	margin-bottom: 1.25rem;
+}
+
+.checkbox-input {
+	// Code to hide the input
+	clip: rect(0 0 0 0);
+	clip-path: inset(100%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+
+	&:checked + .checkbox-tile {
+		border-color: #2260ff;
+		box-shadow: 0 5px 10px rgba(#000, 0.1);
+		color: #2260ff;
+		&:before {
+			transform: scale(1);
+			opacity: 1;
+			background-color: #2260ff;
+			border-color: #2260ff;
+		}
+		
+		.checkbox-icon, .checkbox-label {
+			color: #2260ff;
+		}
+	}
+	
+	&:focus + .checkbox-tile {
+		border-color: #2260ff;
+		box-shadow: 0 5px 10px rgba(#000, 0.1), 0 0 0 4px #b5c9fc;
+		&:before {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+}
+
+.checkbox-tile {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 7rem;
+	min-height: 7rem;
+	border-radius: 0.5rem;
+	border: 2px solid #b5bfd9;
+	background-color: #fff;
+	box-shadow: 0 5px 10px rgba(#000, 0.1);
+	transition: 0.15s ease;
+	cursor: pointer;
+	position: relative;
+
+	&:before {
+		content: "";
+		position: absolute;
+		display: block;
+		width: 1.25rem;
+		height: 1.25rem;
+		border: 2px solid #b5bfd9;
+		background-color: #fff;
+		border-radius: 50%;
+		top: 0.25rem;
+		left: 0.25rem;
+		opacity: 0;
+		transform: scale(0);
+		transition: 0.25s ease;
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
+		background-size: 12px;
+		background-repeat: no-repeat;
+		background-position: 50% 50%;
+	}
+
+	&:hover {
+		border-color: #2260ff;
+		&:before {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+}
+
+.checkbox-icon {
+	transition: .375s ease;
+	color: #494949;
+	svg {
+		width: 3rem;
+		height: 3rem;
+	}
+}
+
+.checkbox-label {
+	color: #707070;
+	transition: .375s ease;
+	text-align: center;
+}
diff --git a/checkbox-switch-input-element-only-css-crossbrowser/README.markdown b/checkbox-switch-input-element-only-css-crossbrowser/README.markdown
new file mode 100644
index 0000000..9ade3d8
--- /dev/null
+++ b/checkbox-switch-input-element-only-css-crossbrowser/README.markdown
@@ -0,0 +1,4 @@
+# Checkbox switch, input element only + CSS, crossbrowser
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/rakeizer/pen/QQRBoZ](https://codepen.io/rakeizer/pen/QQRBoZ).
+
+ Checkbox switch using no extra markup, CSS only
\ No newline at end of file
diff --git a/checkbox-switch-input-element-only-css-crossbrowser/dist/index.html b/checkbox-switch-input-element-only-css-crossbrowser/dist/index.html
new file mode 100644
index 0000000..48f38ab
--- /dev/null
+++ b/checkbox-switch-input-element-only-css-crossbrowser/dist/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Checkbox switch, input element only + CSS, crossbrowser</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input class="switch" type="checkbox">
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/checkbox-switch-input-element-only-css-crossbrowser/dist/style.css b/checkbox-switch-input-element-only-css-crossbrowser/dist/style.css
new file mode 100644
index 0000000..a0ca7f8
--- /dev/null
+++ b/checkbox-switch-input-element-only-css-crossbrowser/dist/style.css
@@ -0,0 +1,19 @@
+input.switch {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -o-appearance: none;
+  height: 20px;
+  width: 40px;
+  border-radius: 10px;
+  box-shadow: inset -20px 0px 0px 0px rgba(192, 192, 192, 1);
+  background-color: white;
+  border: 1px solid rgba(192, 192, 192, 1);
+  outline: none;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+
+input.switch:checked {
+  box-shadow: inset 20px 0px 0px 1px rgba(33, 150, 243, 0.5);
+  border: 1px solid rgba(33, 150, 243, 1);
+}
diff --git a/checkbox-switch-input-element-only-css-crossbrowser/license.txt b/checkbox-switch-input-element-only-css-crossbrowser/license.txt
new file mode 100644
index 0000000..d6832bc
--- /dev/null
+++ b/checkbox-switch-input-element-only-css-crossbrowser/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Richard Keizer (https://codepen.io/rakeizer/pen/QQRBoZ)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/checkbox-switch-input-element-only-css-crossbrowser/src/index.html b/checkbox-switch-input-element-only-css-crossbrowser/src/index.html
new file mode 100644
index 0000000..dca1e99
--- /dev/null
+++ b/checkbox-switch-input-element-only-css-crossbrowser/src/index.html
@@ -0,0 +1 @@
+<input class="switch" type="checkbox">
\ No newline at end of file
diff --git a/checkbox-switch-input-element-only-css-crossbrowser/src/style.css b/checkbox-switch-input-element-only-css-crossbrowser/src/style.css
new file mode 100644
index 0000000..a0ca7f8
--- /dev/null
+++ b/checkbox-switch-input-element-only-css-crossbrowser/src/style.css
@@ -0,0 +1,19 @@
+input.switch {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -o-appearance: none;
+  height: 20px;
+  width: 40px;
+  border-radius: 10px;
+  box-shadow: inset -20px 0px 0px 0px rgba(192, 192, 192, 1);
+  background-color: white;
+  border: 1px solid rgba(192, 192, 192, 1);
+  outline: none;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+
+input.switch:checked {
+  box-shadow: inset 20px 0px 0px 1px rgba(33, 150, 243, 0.5);
+  border: 1px solid rgba(33, 150, 243, 1);
+}
diff --git a/checklist-animation/README.markdown b/checklist-animation/README.markdown
new file mode 100644
index 0000000..4514ce2
--- /dev/null
+++ b/checklist-animation/README.markdown
@@ -0,0 +1,4 @@
+# Checklist animation
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/milanraring/pen/QWbqBGo](https://codepen.io/milanraring/pen/QWbqBGo).
+
+ Simple checklist animation
\ No newline at end of file
diff --git a/checklist-animation/dist/index.html b/checklist-animation/dist/index.html
new file mode 100644
index 0000000..75c8125
--- /dev/null
+++ b/checklist-animation/dist/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Checklist animation</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Varela+Round&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="checklist">
+  <input id="01" type="checkbox" name="r" value="1" checked>
+  <label for="01">Bread</label>
+  <input id="02" type="checkbox" name="r" value="2">
+  <label for="02">Cheese</label>
+  <input id="03" type="checkbox" name="r" value="3">
+  <label for="03">Coffee</label>
+</div>
+
+
+<!--- ## DRIBBBLE + TWITTER ############# -->
+<div class="socials">
+  <a class="dribbble" href="https://dribbble.com/shots/10629617-Simple-checklist-animation" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" fill="black" d="M16 0C7.16703 0 0 7.16703 0 16C0 24.833 7.16703 32 16 32C24.8156 32 32 24.833 32 16C32 7.16703 24.8156 0 16 0ZM26.5683 7.37527C28.4772 9.70065 29.6226 12.6681 29.6573 15.8785C29.2061 15.7918 24.6941 14.872 20.1475 15.4447C20.0434 15.2191 19.9566 14.9761 19.8525 14.7332C19.5748 14.0738 19.2625 13.397 18.9501 12.7549C23.9826 10.7072 26.2733 7.75705 26.5683 7.37527ZM16 2.36009C19.4707 2.36009 22.6464 3.66161 25.0586 5.7961C24.8156 6.14317 22.7505 8.90239 17.8915 10.7245C15.6529 6.61171 13.1714 3.24512 12.7896 2.72451C13.8134 2.48156 14.8894 2.36009 16 2.36009ZM10.1866 3.64425C10.551 4.13015 12.9805 7.5141 15.2538 11.5401C8.86768 13.2408 3.22777 13.2061 2.62039 13.2061C3.50542 8.9718 6.36876 5.44902 10.1866 3.64425ZM2.32538 16.0174C2.32538 15.8785 2.32538 15.7397 2.32538 15.6009C2.9154 15.6182 9.54447 15.705 16.3644 13.6573C16.7636 14.4208 17.128 15.2017 17.4751 15.9826C17.3015 16.0347 17.1106 16.0868 16.9371 16.1388C9.89154 18.4121 6.14317 24.6247 5.8308 25.1453C3.6616 22.7332 2.32538 19.5228 2.32538 16.0174ZM16 29.6746C12.8416 29.6746 9.92625 28.5987 7.61822 26.7939C7.86117 26.2907 10.6377 20.9458 18.3427 18.256C18.3774 18.2386 18.3948 18.2386 18.4295 18.2213C20.3557 23.2017 21.1367 27.3839 21.3449 28.5813C19.6963 29.2928 17.8915 29.6746 16 29.6746ZM23.6182 27.3319C23.4794 26.4989 22.7505 22.5076 20.9631 17.5965C25.2495 16.9197 28.9978 18.0304 29.4664 18.1866C28.8764 21.987 26.6898 25.2668 23.6182 27.3319Z" fill="#EA4C89"></path></svg></a>
+  <a class="twitter" href="https://twitter.com/MilanRaring" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 72 72"><path fill="black" d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/checklist-animation/dist/style.css b/checklist-animation/dist/style.css
new file mode 100644
index 0000000..ebd058b
--- /dev/null
+++ b/checklist-animation/dist/style.css
@@ -0,0 +1,316 @@
+#checklist {
+  --background: #ffffff;
+  --text: #414856;
+  --check: #4F29F0;
+  --disabled: #C3C8DE;
+  --width: 100px;
+  --height: 140px;
+  --border-radius: 10px;
+  background: var(--background);
+  width: var(--width);
+  height: var(--height);
+  border-radius: var(--border-radius);
+  position: relative;
+  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
+  padding: 30px 45px;
+  display: grid;
+  grid-template-columns: 30px auto;
+  -webkit-box-align: center;
+          align-items: center;
+}
+#checklist label {
+  color: var(--text);
+  position: relative;
+  cursor: pointer;
+  display: grid;
+  -webkit-box-align: center;
+          align-items: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  -webkit-transition: color .3s ease;
+  transition: color .3s ease;
+}
+#checklist label::before, #checklist label::after {
+  content: "";
+  position: absolute;
+}
+#checklist label::before {
+  height: 2px;
+  width: 8px;
+  left: -27px;
+  background: var(--check);
+  border-radius: 2px;
+  -webkit-transition: background .3s ease;
+  transition: background .3s ease;
+}
+#checklist label:after {
+  height: 4px;
+  width: 4px;
+  top: 8px;
+  left: -25px;
+  border-radius: 50%;
+}
+#checklist input[type="checkbox"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  position: relative;
+  height: 15px;
+  width: 15px;
+  outline: none;
+  border: 0;
+  margin: 0 15px 0 0;
+  cursor: pointer;
+  background: var(--background);
+  display: grid;
+  -webkit-box-align: center;
+          align-items: center;
+}
+#checklist input[type="checkbox"]::before, #checklist input[type="checkbox"]::after {
+  content: "";
+  position: absolute;
+  height: 2px;
+  top: auto;
+  background: var(--check);
+  border-radius: 2px;
+}
+#checklist input[type="checkbox"]::before {
+  width: 0px;
+  right: 60%;
+  -webkit-transform-origin: right bottom;
+          transform-origin: right bottom;
+}
+#checklist input[type="checkbox"]::after {
+  width: 0px;
+  left: 40%;
+  -webkit-transform-origin: left bottom;
+          transform-origin: left bottom;
+}
+#checklist input[type="checkbox"]:checked::before {
+  -webkit-animation: check-01 .4s ease forwards;
+          animation: check-01 .4s ease forwards;
+}
+#checklist input[type="checkbox"]:checked::after {
+  -webkit-animation: check-02 .4s ease forwards;
+          animation: check-02 .4s ease forwards;
+}
+#checklist input[type="checkbox"]:checked + label {
+  color: var(--disabled);
+  -webkit-animation: move .3s ease .1s forwards;
+          animation: move .3s ease .1s forwards;
+}
+#checklist input[type="checkbox"]:checked + label::before {
+  background: var(--disabled);
+  -webkit-animation: slice .4s ease forwards;
+          animation: slice .4s ease forwards;
+}
+#checklist input[type="checkbox"]:checked + label::after {
+  -webkit-animation: firework .5s ease forwards .1s;
+          animation: firework .5s ease forwards .1s;
+}
+
+@-webkit-keyframes move {
+  50% {
+    padding-left: 8px;
+    padding-right: 0px;
+  }
+  100% {
+    padding-right: 4px;
+  }
+}
+
+@keyframes move {
+  50% {
+    padding-left: 8px;
+    padding-right: 0px;
+  }
+  100% {
+    padding-right: 4px;
+  }
+}
+@-webkit-keyframes slice {
+  60% {
+    width: 100%;
+    left: 4px;
+  }
+  100% {
+    width: 100%;
+    left: -2px;
+    padding-left: 0;
+  }
+}
+@keyframes slice {
+  60% {
+    width: 100%;
+    left: 4px;
+  }
+  100% {
+    width: 100%;
+    left: -2px;
+    padding-left: 0;
+  }
+}
+@-webkit-keyframes check-01 {
+  0% {
+    width: 4px;
+    top: auto;
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  50% {
+    width: 0px;
+    top: auto;
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  51% {
+    width: 0px;
+    top: 8px;
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+  }
+  100% {
+    width: 5px;
+    top: 8px;
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+  }
+}
+@keyframes check-01 {
+  0% {
+    width: 4px;
+    top: auto;
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  50% {
+    width: 0px;
+    top: auto;
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  51% {
+    width: 0px;
+    top: 8px;
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+  }
+  100% {
+    width: 5px;
+    top: 8px;
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+  }
+}
+@-webkit-keyframes check-02 {
+  0% {
+    width: 4px;
+    top: auto;
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  50% {
+    width: 0px;
+    top: auto;
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  51% {
+    width: 0px;
+    top: 8px;
+    -webkit-transform: rotate(-45deg);
+            transform: rotate(-45deg);
+  }
+  100% {
+    width: 10px;
+    top: 8px;
+    -webkit-transform: rotate(-45deg);
+            transform: rotate(-45deg);
+  }
+}
+@keyframes check-02 {
+  0% {
+    width: 4px;
+    top: auto;
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  50% {
+    width: 0px;
+    top: auto;
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  51% {
+    width: 0px;
+    top: 8px;
+    -webkit-transform: rotate(-45deg);
+            transform: rotate(-45deg);
+  }
+  100% {
+    width: 10px;
+    top: 8px;
+    -webkit-transform: rotate(-45deg);
+            transform: rotate(-45deg);
+  }
+}
+@-webkit-keyframes firework {
+  0% {
+    opacity: 1;
+    box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
+  }
+}
+@keyframes firework {
+  0% {
+    opacity: 1;
+    box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
+  }
+}
+body {
+  background: #E8EBF3;
+  height: 100vh;
+  font: 400 16px 'Varela Round', sans-serif;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+}
+body .socials {
+  position: fixed;
+  display: block;
+  left: 20px;
+  bottom: 20px;
+}
+body .socials > a {
+  display: block;
+  width: 30px;
+  opacity: .2;
+  -webkit-transform: scale(var(--scale, 0.8));
+          transform: scale(var(--scale, 0.8));
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
+  transition: -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
+  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
+  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91), -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
+}
+body .socials > a:hover {
+  --scale: 1;
+}
\ No newline at end of file
diff --git a/checklist-animation/license.txt b/checklist-animation/license.txt
new file mode 100644
index 0000000..3162436
--- /dev/null
+++ b/checklist-animation/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Milan Raring (https://codepen.io/milanraring/pen/QWbqBGo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/checklist-animation/src/index.html b/checklist-animation/src/index.html
new file mode 100644
index 0000000..a4f5656
--- /dev/null
+++ b/checklist-animation/src/index.html
@@ -0,0 +1,15 @@
+ <div id="checklist">
+  <input id="01" type="checkbox" name="r" value="1" checked>
+  <label for="01">Bread</label>
+  <input id="02" type="checkbox" name="r" value="2">
+  <label for="02">Cheese</label>
+  <input id="03" type="checkbox" name="r" value="3">
+  <label for="03">Coffee</label>
+</div>
+
+
+<!--- ## DRIBBBLE + TWITTER ############# -->
+<div class="socials">
+  <a class="dribbble" href="https://dribbble.com/shots/10629617-Simple-checklist-animation" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" fill="black" d="M16 0C7.16703 0 0 7.16703 0 16C0 24.833 7.16703 32 16 32C24.8156 32 32 24.833 32 16C32 7.16703 24.8156 0 16 0ZM26.5683 7.37527C28.4772 9.70065 29.6226 12.6681 29.6573 15.8785C29.2061 15.7918 24.6941 14.872 20.1475 15.4447C20.0434 15.2191 19.9566 14.9761 19.8525 14.7332C19.5748 14.0738 19.2625 13.397 18.9501 12.7549C23.9826 10.7072 26.2733 7.75705 26.5683 7.37527ZM16 2.36009C19.4707 2.36009 22.6464 3.66161 25.0586 5.7961C24.8156 6.14317 22.7505 8.90239 17.8915 10.7245C15.6529 6.61171 13.1714 3.24512 12.7896 2.72451C13.8134 2.48156 14.8894 2.36009 16 2.36009ZM10.1866 3.64425C10.551 4.13015 12.9805 7.5141 15.2538 11.5401C8.86768 13.2408 3.22777 13.2061 2.62039 13.2061C3.50542 8.9718 6.36876 5.44902 10.1866 3.64425ZM2.32538 16.0174C2.32538 15.8785 2.32538 15.7397 2.32538 15.6009C2.9154 15.6182 9.54447 15.705 16.3644 13.6573C16.7636 14.4208 17.128 15.2017 17.4751 15.9826C17.3015 16.0347 17.1106 16.0868 16.9371 16.1388C9.89154 18.4121 6.14317 24.6247 5.8308 25.1453C3.6616 22.7332 2.32538 19.5228 2.32538 16.0174ZM16 29.6746C12.8416 29.6746 9.92625 28.5987 7.61822 26.7939C7.86117 26.2907 10.6377 20.9458 18.3427 18.256C18.3774 18.2386 18.3948 18.2386 18.4295 18.2213C20.3557 23.2017 21.1367 27.3839 21.3449 28.5813C19.6963 29.2928 17.8915 29.6746 16 29.6746ZM23.6182 27.3319C23.4794 26.4989 22.7505 22.5076 20.9631 17.5965C25.2495 16.9197 28.9978 18.0304 29.4664 18.1866C28.8764 21.987 26.6898 25.2668 23.6182 27.3319Z" fill="#EA4C89"></path></svg></a>
+  <a class="twitter" href="https://twitter.com/MilanRaring" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 72 72"><path fill="black" d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
+</div>  
\ No newline at end of file
diff --git a/checklist-animation/src/style.scss b/checklist-animation/src/style.scss
new file mode 100644
index 0000000..2f7d43d
--- /dev/null
+++ b/checklist-animation/src/style.scss
@@ -0,0 +1,206 @@
+#checklist {
+  --background: #ffffff;
+  --text: #414856;
+  --check: #4F29F0;
+  --disabled: #C3C8DE;
+  --width: 100px;
+  --height: 140px;
+  --border-radius: 10px;
+  background: var(--background);
+  width: var(--width);
+  height: var(--height);
+  border-radius: var(--border-radius);
+  position: relative;
+  box-shadow: 0 10px 30px rgba(#414856, 0.05);
+  padding: 30px 45px;
+  display: grid;
+  grid-template-columns: 30px auto;
+  align-items: center;
+  label {
+    color: var(--text);
+    position: relative;
+    cursor: pointer;
+    display: grid;
+    align-items: center;
+    width: fit-content;
+    transition: color .3s ease;
+    &::before,
+    &::after {
+      content:"";
+      position: absolute;
+    }
+    &::before {
+      height: 2px;
+      width: 8px;
+      left: -27px;
+      background: var(--check);
+      border-radius: 2px;
+      transition: background .3s ease; 
+    }
+    &:after {
+      height: 4px;
+      width: 4px;
+      top: 8px;
+      left: -25px;
+      border-radius: 50%;
+    }
+  }
+  input[type="checkbox"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    position: relative;
+    height: 15px;
+    width: 15px;
+    outline: none;
+    border: 0;
+    margin: 0 15px 0 0;
+    cursor: pointer;
+    background: var(--background);
+    display: grid;
+    align-items: center;
+    &::before,
+    &::after {
+      content:"";
+      position: absolute;
+      height: 2px;
+      top: auto;
+      background: var(--check);
+      border-radius: 2px;
+    }
+    &::before {
+      width: 0px;
+      right: 60%;
+      transform-origin: right bottom;
+    }
+    &::after {
+      width: 0px;
+      left: 40%;
+      transform-origin: left bottom;
+    }
+    &:checked {
+      &::before {
+        animation: check-01 .4s ease forwards;
+      }
+      &::after {
+        animation: check-02 .4s ease forwards;
+      }
+      + label {
+        color: var(--disabled);
+        animation: move .3s ease .1s forwards;
+        &::before {
+          background: var(--disabled);
+          animation: slice .4s ease forwards;
+        }
+        &::after {
+          animation: firework .5s ease forwards .1s;
+        }
+      }
+    }
+  }
+}
+
+@keyframes move {
+  50% {
+    padding-left: 8px;
+    padding-right: 0px;
+  }
+  100% {
+    padding-right: 4px;
+  }
+}
+@keyframes slice {
+  60% {
+    width: 100%;
+    left: 4px;
+  }
+  100% {
+    width: 100%;
+    left: -2px;
+    padding-left: 0;
+  }
+}
+@keyframes check-01 {
+  0% {
+    width: 4px;
+    top: auto;
+    transform: rotate(0);
+  }
+  50% {
+    width: 0px;
+    top: auto;
+    transform: rotate(0);
+  }
+  51% {
+    width: 0px;
+    top: 8px;
+    transform: rotate(45deg);
+  }
+  100% {
+    width: 5px;
+    top: 8px;
+    transform: rotate(45deg);
+  }
+}
+@keyframes check-02 {
+  0% {
+    width: 4px;
+    top: auto;
+    transform: rotate(0);
+  }
+  50% {
+    width: 0px;
+    top: auto;
+    transform: rotate(0);
+  }
+  51% {
+    width: 0px;
+    top: 8px;
+    transform: rotate(-45deg);
+  }
+  100% {
+    width: 10px;
+    top: 8px;
+    transform: rotate(-45deg);
+  }
+}
+@keyframes firework {
+  0% {
+    opacity: 1;
+    box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
+  }
+}
+
+
+//--- ## BASIC #############
+body {
+  background: #E8EBF3;
+  height: 100vh;
+  font: 400 16px 'Varela Round', sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .socials {
+    position: fixed;
+    display: block;
+    left: 20px;
+    bottom: 20px;
+    > a {
+      display: block;
+      width: 30px;
+      opacity: .2;
+      transform: scale(var(--scale, .8));
+      transition: transform .3s cubic-bezier(0.38,-0.12, 0.24, 1.91);
+      &:hover {
+        --scale: 1;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/christmas-cannon/LICENSE.txt b/christmas-cannon/LICENSE.txt
new file mode 100644
index 0000000..dcf6f7d
--- /dev/null
+++ b/christmas-cannon/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 by Steve Gardner (https://codepen.io/ste-vg/pen/BazEQbY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/christmas-cannon/README.md b/christmas-cannon/README.md
new file mode 100644
index 0000000..365b33c
--- /dev/null
+++ b/christmas-cannon/README.md
@@ -0,0 +1,12 @@
+# Christmas Cannon
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ste-vg/pen/BazEQbY](https://codepen.io/ste-vg/pen/BazEQbY).
+
+Make this dull room more festive with the Christmas Cannon!
+
+Pro tip: Hold down spacebar for faster shooting!
+
+Sofa model by [Danny Bittman](https://poly.google.com/view/7Q_Ab2HLll1).
+Fireplace, table, TV, tree and snowman models by [Google](https://poly.google.com).
+Cannon model by [Семён Хазам](https://poly.google.com/view/aXKsp4PcwLy)
+TV stand by [Chris Hauck](https://poly.google.com/view/8KS3ETLfRrb)
\ No newline at end of file
diff --git a/christmas-cannon/dist/index.html b/christmas-cannon/dist/index.html
new file mode 100644
index 0000000..1822ff8
--- /dev/null
+++ b/christmas-cannon/dist/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Christmas Cannon</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<base target="_parent">
+
+<div id="canvas-container"></div>
+<div id="ui">
+    <div class="positioner">
+        <div></div>
+        <div class="speech-bubble">
+            <div id="bubble">
+                <span id="text">Oh no! Look at this dull room, not at all Christmassy.</span>
+                <span id="text-highlight"></span>
+                <div id="next">Next</div>
+            </div>
+        </div>
+
+            <img id="steve" src="https://assets.codepen.io/557388/sad.svg" alt="Steve">
+
+    </div>
+</div>
+<div id="loading">Loading</div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/christmas-cannon/dist/script.js b/christmas-cannon/dist/script.js
new file mode 100644
index 0000000..5d416b4
--- /dev/null
+++ b/christmas-cannon/dist/script.js
@@ -0,0 +1,1855 @@
+let showGuides = false;
+
+// 👆 change to true to see the physics objects
+
+let extraBounce = 0.1;
+
+// 👆 change to 1 for bouncey fun! Change to 2 for everything to bounce out of existence!
+
+let powerMultiplier = 1.2;
+
+// 👆 increase for more POWER!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+import {
+TextureLoader, RepeatWrapping,
+Scene, Color, Fog, HemisphereLight,
+PointLight, MeshPhongMaterial, Mesh,
+PlaneBufferGeometry, WebGLRenderer,
+PerspectiveCamera, Vector3,
+Group, BoxBufferGeometry, IcosahedronBufferGeometry,
+CylinderBufferGeometry, Cache, PCFSoftShadowMap,
+LoadingManager, AxisHelper, Clock } from
+"https://cdn.skypack.dev/three@0.122.0";
+
+import { GLTFLoader } from "https://cdn.skypack.dev/three@0.122.0/examples/jsm/loaders/GLTFLoader";
+import Stats from "https://cdn.skypack.dev/three@0.122.0/examples/jsm/libs/stats.module";
+import CANNON from "https://cdn.skypack.dev/cannon@0.6.2";
+import gsap from "https://cdn.skypack.dev/gsap@3.5.1";
+
+class Stage
+{
+  constructor(scale, stageSize, onReady, showStats)
+  {
+    const manager = new LoadingManager();
+
+    this.showStats = showStats;
+    this.models = {};
+    this.stats = new Stats();
+
+    manager.onLoad = function () {
+
+      console.log('Loading complete!');
+      setTimeout(() => onReady(), 100);
+
+    };
+
+    this.wrappingImages = [
+    'data:image/png;base64,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',
+    'data:image/png;base64,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',
+    'data:image/png;base64,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',
+    'data:image/png;base64,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',
+    'data:image/png;base64,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',
+    'data:image/png;base64,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',
+    'data:image/png;base64,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',
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAATeklEQVR4Xu1deXhUVZb/VRaoSqXIAgQEGoJ0h7AoAQJKsyUKOBAEpyGIqKPNTtAWGMURJCyt/QmhgeZjaWQZpgVkHUUEBlDWkSXFNmwpaAIJ3QQTIFulspAKNd+pUElVqurde1NVSB7v/UPIO/fcs/zuOeeee/M9Vf0TnSyo8ZS+eL7mrxz+X7BNj5DNC51orocMR3poouTYuvpyRvwYXG58xqX4C/zm4g/dh0qqljdzPcIMe7nULw1sjPLRk6Ab0MGJPnejHg2+XYGAh8UO73K7DEf4TLbtvzp/EONKp1WNVbkCwPbQ1Rgc3c2tsMb9l6FbNc/p/aVGk3BbG8elZF0j2tRhJbZ0WOVS7N7GOBzov0RSJfN9EzBxMgIelnCrbgpqhbL23a30KpMJmut6qMvvuhxPoFFvXsbk/b1Bj+H543wDAH2TZOSqnVHLlKoOEPzYeieWdpvtVtJ/Pn8MjYJ0kprkfr4N4We3+07bHVuYvH0KgH2t2AIwJXxCCS5G6PFpXPXKqSkmTxqgKFA2ZS60xZk+0dI4Idll2rCf7N9/Wonl/tWRzGUKON96D6KbNBNKAQ8atcSF2C9QmOGPcv4o5xND+IKpqZ4Ro17r7ZZ1k5JmyIzfw5y67P8y4P/ZHKFUwGT6iIAHAImHZmGXZpd0CmAVga5qgPIB/fDgrTetjO9f8UeuwR8FGf4ozVPxyv/E00kVgiQ8TxQguoKteoRscS6iPTYARwro8MPrSA++6hkAin64jOCVjkVg2Qfvw9y1i5MOpjt+yD4XYAVEXQfDrqgNWBPj3nG8UYCMlL/uMEJ3r/TY5zYGxtB20K2dI8nvXrERLS44RjGnFPCsKQpXXt4qyaho7fcI3vOVA03xX5fDEhQkOY4AkJvmj5zzASi64+c15R8Xo2xtFsYnDJKcblLpBCyOm8QlknHfZWjWpHglHRjHJ0P3inQBvjR1J6Y/dCxknQAwyjQK616eLg2AZZsRfOibKhpzr54oGz+WS2kbkbkEuJ9WGRnup/kLjf0liT8YMAIZodckRWBto+0Hl167i/L5y6HLT6u1Wnmt+iJsURJzfI8DY3FOd9qBzgkAPMIXfzQfQTfOVjFyF/6ZEtkR2OqGXEPAE11EsraDpBKlgjMvbGFuC+3tQylBfWAb1A/ucZvN7KdBYUwCVwMo9WcD+mSMdOLtBABWAUgcSke+V9WQeBjeECVLvFvQPMl1Q6AGePflgcgJuiPpqC7FsTj+0hpuZ9oICQgqvR4hOY4r1Z4ROd74q+7QTEyEOqox1xwD9k/F0QaHpAGQUPQqdvT7oyRDc64JAeNGV9FQ+ze73TBEdDYjpPVDaJs+5BKIl4jAUHDT74mqG77pvRLrn3HdFbTXa3DREGzv59wx5dGdegYlpzNQfvqKA3lgbHtmrq/Jv2bzx/69QwQ41HQzekRGS8pnX70SEo82X45yP23VGHWYBQ3bVSAs2ozQ1t4FAxWRBTcrt5i/ZN0QGG3E8PYDURxQxPSlJyBgMucgoMq/66nXka3JckldBYCYoq442W8tk2XetBUIyzxipWMd/lC4DG9nRnh0hRUU3nyoiLSB4ZeoG44P2YD5ar7U16cwHpt6zROqCbxlK1eFn8sIsD1kNQa3c38AZBtkTvy99STK1epnCd2oPUUGAoMZAWoWtdh7ShO2XcXj6DeE/xp4P2oMzge7PiGsKX2borbY8fxiREe477CKaSxNTSv/zRPJOKJ1zvtOAOA5zaJB9uH/avi/IUOXUGuZg595aK0bwttVQB3qdCJda740kOoGW5rwZb8h+F+z8CpGoDiQnQpILm25DrPrf8g8OvZIeQCGnCwMuzDVoePnjqcq7GhPy7Uue9FIK32SRQyMY+ZCl38FxsBWON5sgadyOtUNBAhvF5G25hO1pb1dN2jCgTPxO/GJv/tTQldG6myMxX92mueTaLA09TvMLUuBKdDI5R/V387+aHm780tMYvv+/4ln5qOwXiRzTG0IfF03UJoozKAI4Z1+Q2RfYH7wAmzSbhJWlwrEz56f6BUgUKX/+T9WOTV6WEKpLBYLV/y1rX5W4ceaUPS9L+sGaj6lfV1fVCQn+m6TgXE3Z2F3cPUpmwhTKhIHh8ZjVMd4oUKR8vymS4ewqnAjV7ivKRNt+7kAYFv9ufXbQd9U+sBBRHFRWuozUAHpzbrhf2dJn1/wyEhRq88s4JXDU/BT6GGeIW5pKD30qBeLSE0ztGlQWTC+0LItTt2qPMHLKzPibP5VnHhwWni120/aMz8OP/7LEjYAqPFjTvoYARVFTnt+jzT1cDAVkQQIT+sGbwCAVGnQHOiWBPzuwCzsj6hdJPDQJNzD6cDv6ItrrXUfMwLQZUbdtcPQN5njs7zPLbkbQmo+hbSuEO435N/0w6V13tuPNu8ORA8F5h7bgJQGfD0CT3UXHV+z2ysJALr9q926/Il2fk0DUDgmMPD0G/7+TT1knw0QtaEkPYGg40jgq3MH8UFRMvcW0atCuGE2w/whknu95fDWLQCKUzNQL2UuDOHv1OmbvlRENoiscKobzKXAmUVBPjl5tIEgvSAL408s8Lgu8BQcFPLXtpnnss3vEgCU94unpeBqUKKsbvlS3UCRgSLEzycDce+K7+4h2EBAztuRqsdUUzJyNNIniJ46uub4oPJgvFPxpuQFFZcAME1LwYUHiU9szve2oXzFz1oTvIaqtvdnpzZgdelGZNf3LRBsjp/Z7S1mg88JAEXpJlxYVQyjme+c2VfGkwtf2h3EjAY0YdUafZ+mx9KsjTiq9WzLWNNGFOpH1h+CpM5DmY63jXUAQOZRIH0ffJIX5eLQ2uhBhWnHN4CIjo6jDdlZ0GcZcDD3NE7hNG5opa+auQrxUaVtMUgTjxG/eUnyKr87ua0AMGYBhm+B3Ou1UU8Zw2uBJs9VAsHdSeg9kxEnbxms7H7Mdn0jKCxAhy4N26KhRse8u8Ejl+ri1xbL7VQeUoXGGxagaNCyD/DrV7zBzTMetPBV/zOV7yzAs6mU0TUtQCeJbV4BmrOvYHjdeDmXAEr3FPEVAHjdvGIMKSLQboGign2hKMaFTU2rnRxOji/JraZXAMC23WOjoB1D444A1Qo6L1wcyk0H7l4Csi86Ot1eIQUAj829YhNRZNA1rzxkUodV/mx76HdUSJKDbQ/dkSy8DRRlVf5rv8qlZlYAIOYX2VErAJCdS8UUUgAgZi/ZUSsAkJ1LxRRSACBmL9lRKwCQnUvFFFIAIGYv2VErAJCdS8UUUgAgZi/ZUSsAkJ1LxRRSACBmL9lRKwCQnUvFFFIAIGYv2VErAJCdS8UUUgAgZi/ZUSsAkJ1LxRRSACBmL9lRKwCQnUvFFFIAIGYv2VErAJCdS8UUUgAgZi/ZUSsAkJ1LxRRSACBmL9lRKwCQnUvFFFIAIGYv2VErAJCdS8UUUgAgZi/ZUSsAkJ1LxRRSACBmL9lRKwCQnUvFFFIAIGYv2VErAJCdS8UUUgAgZi/ZUSsAkJ1LxRRSACBmL9lRKwCQnUvFFFIAIGYv2VErAJCdS8UUUgAgZi/ZUSsAkJ1LxRRSACBmL9lRKwCQnUvFFFIAIGYv2VErAJCdS8UUUgAgZi/ZUSsAkJ1LxRRSACBmL9lRKwCQnUvFFFIAIGYv2VErAJCdS8UUUgAgZi/ZUSsAkJ1LxRRSACBmL9lRKwCQnUvFFFIAIGavX4za9qk4mwD0GTn6tBx9Io4+GWcurfxZ9FEAIGqxx0BPzg5rU/nxSPrZ/puBrOnpe4HG25XfFMxLZ4NCAQDLoo/pPTm6WSwQ8RxA3xX21kPRgT4Ze1sP0DeDaz4KALxl6VryoY9H00ekvel0d6IQGOgzsun7q78sqgCglo7zdNjjdLwrWXMuApnHAFX2BYvFsJP/W7OeKv60jz8S9R2SBsejRQvdE2EKlcVisVBouL6v8tPiyuMbC9wMM2BNp4V4XhuFdS9P98kkxgNXnPhqurZCQLjW7XxWANjeUvV4aTO7cvSJ9DJmuitqI9bEpCCh6FXs6PdHjzQtTs1A2YkrwN27CLiTAU1hBgIeFjN5lgY2Rll4JCp+FYnA2PbQ9W9vHaMq3HfJohvQoYoBRQMCARULyuOZBUz1jFjTKQUHW3/nkfNL/34XJXv00JzYA3X5Xc+EejTa7BcEY8tuUFl+N8JC6CgZkAjda7FV4SJ9X2VaUJ7aWYCcP7PvWNwMu1pr5xv3Xwa2bIcu3zm0104q51FWANh+bUVFr0SEfTDI+qvbqZXRQHnELED5/i+xs2vtfFrx5V+s8KnjbRo5AKCqFghtD/8J7yCoe6QCAjHfg1b+lP6vI0ebhWdNUTj64lo00vJX/Hmf/hfC0vYIzlp7cpcAsLHLjU1E+CfDFRBw2tc+7AeVB+N41FZEN2nGNZpWfcW8FGiLM7novUUkCQCaJC+yL8L+nGTdIhq+9da08uQzM24sLkWctiq3uv4ivN35JS5FKddrVi/kqua5GAoQMQFAvExBrVD/L7Nh2K+1RgPlcbbA6pgF+D5qk/VFb2McDvRfwmWm/HWHEbp7JRetL4i4AGADgf8Xs3Fus7ZWx46+EP5J4Xmq+UH8qec0qzgU+q912cuV92lPHzT/Y6+qYQxpZ+WnMVJ/oITJmxsANhA8+Hg2zn2tRTmbN3NyORBQ3h83aJC1+KNncsUE/LnnJKZq5Px6KXNrHfYpKpe1bI/APt0Q2DoC6qjGLuekvk7J0cswGzLgZ7iCkJzKFGV7hABAg6gmKByapNQDjyxoH/qDzMG40WMvQv2lq35zrgmY8J6w881+GhRGxSHonQS3Dmchz3zfhKKdeqgPbIP6wT2oSkYmWegHkScveiCuN3/Xes78ND8XI/T4NG5clQneV01Aygvs1V+QtBAh2Xpu01kdH5OABhMHIaCh+74+N8NHhFR/qMrvFVkKF21DuGGv0Ph7o5Jx5qfqFrLQYJkQ21f9lPtv/Ja9+vOW7kbYkb9xW4BCvf+sj2q94lkTVR0GGfddhmZNClfhQEypfZz5xjJkHGFNIc/3NVc/z0EP7fUDZkznDv15rfoibFGSTw3ocBpI+aFsylzuZsTPvxmOK/6JT2VBaL/6yUOHmm5Gj8hoSWcVfLQCITf4VszjcD4J6wAA+gWBoGR6CnT5aVzIu95/PtKvRXLRyoWo5uqPKHkGt+KlU6hI4fe4nO8SADYQ8EaCnMZ9cS7It2HqSQPO5z2nILX54SqxRplGMS955H6+DeFntzNVKa3XCAHLFni12JOa1CkC2IhF0sHZrstw957rfShT4zpGkK3NwviEytNS27NavQhvx0i3fc2Jv+fK/cXT5yPohccXUd0CgJQrPpWBegvnMAvD6yHDkR6aWMdcWTtxN3VYiS0dVjkM/udzxyQ7f9Tr162ax5zQG6H/XrERp25dxdn7VxESqEObBs3QJrwZoiNcH0pJAoAk5tm2lPg3xtEWy5gKyoFgXMIg61Gv7WltjEJa/62SquXPXo/QS+xttierf2nqd1hVuBHpwVddytKmqC1GaoZgUuchaBRU3ahiAoC4GcfMYRaF5xt/iOygbnLwsVsd6KLHlP4jHd7HFHXFyX5rJfU2vT2dubOi3K/+ermw/Qw5WRh2Yapbx9dkqC3XYYrfRMzq+ab1FRcASq/dhfqT9ySFy9QNhCH8XWEF6tIAV+F/UukELI5jdP+Gvc5UM7fLcITPFEujJzINGHxrHEyBlecQIk9nYyx29VwM1V1TocU+JLhjkjdtBcIy3e9hjYGtcLzZAhEZ6hwt3fShO372DwsA1PxR/4f04rFG2QnJsL+cyzIO5fq2ZwbVyvk23pQWVO0PjLAc+e0ah7zganKeKLCv1RaW3HX2PZ32jXqtt5P8rB0AbwFo/nKd0NZv2A+zsDt4l8f2VNU/0cnSpzAe+wcsZjJjRQF9k2TkquV5PlCz+WMz1vbQ1Rgc7b724QUAdogtnobHenu0+m3yWwFA/2Eh2Rqm9l2G7kv32xk5bwd3RW3AmpiFTouECYANh6H7huPGjwAAKPy3uOAcjZgr2AVBFQCalDRDZjz7NmrpG5Ot58iuHjkDwP7c3153JgA4ewAiEcCQnYWYm47NKJKJbiG3s7S1ipemuoob2mtMTFQBgCgX+M3FH7oPlRyUN3M9wtwcHcsZADPix+By4zNOtplR8SGSe77l1ma8KcC8ep3k3/DVnEB9MqbqV+T49R3moXtTx8MoAsqqtJ1YqXZsXNnzcgAAVYWX+0nnooJteoRsdg6FxDRHE4tzER8xUVcXCdwBgLULoJZ6wPjRTJXzEyYhdHQck85G0P/AFBzTHcagglfxZa/pkp3IExkGJPxjLIoDi5z4OwCA3p5/do/btiG9l1Iot3476JvO4VaiLhHWFgBWmyW+y2ynFzSJRcgK/sWzNHUnFpr+irPdt3JdQCUQxP/s2MQi2ZwAwAppNMhdZ+tpBABPJ7AgKQUh2Y6XMV2BX6QXQKnlzn8vQYvRM61/wcXzTD280ikdOAGAR6HC91PQIMtZoacRANRavd/7mKT9ee/+2/7+Qurv+W0T2ddivMC5ZzIi6uxAh1TgBAAehdydbd/W9sWlRvK8G+AuBfCmTUyczEwD1uj66I9wpEBQeCwDDZZU/z0B/VEvVi3jKiITD83CLk11A+n/AQydRHzZTK11AAAAAElFTkSuQmCC'];
+
+    this.presentTextures = [];
+    this.presentMaterials = [];
+
+    for (var i in this.wrappingImages)
+    {
+      var presentTexture = new TextureLoader().load(this.wrappingImages[i]);
+      presentTexture.wrapS = RepeatWrapping;
+      presentTexture.wrapT = RepeatWrapping;
+      presentTexture.repeat.set(3, 3);
+
+
+
+      this.presentTextures.push(presentTexture);
+
+      this.presentMaterials.push(new MeshPhongMaterial({ shininess: 100, map: presentTexture }));
+
+    }
+
+    this.boxGeometry = new BoxBufferGeometry(1, 1, 1);
+    this.greyMaterial = new MeshPhongMaterial({ color: 0xeeeeee, shininess: 30 });
+
+    this.container;
+    this.scene;
+    this.plane;
+    this.renderer;
+    this.width = 0;
+    this.height = 0;
+    this.lookAtHelper;
+    this.stageSize;
+
+    this.cameraTarget;
+    this.camera;
+
+    this.scale = scale;
+    this.stageSize = stageSize;
+
+    Cache.enabled = true;
+
+    // SCENE
+
+    this.scene = new Scene();
+    this.scene.background = new Color(0x424874);
+    this.scene.fog = new Fog(0x424874, 100, 200);
+    // this.scene.add(new AxisHelper());
+
+    // LIGHTS
+
+    this.scene.add(new HemisphereLight(0xfefeff, 0xeeeeff, 0.4));
+
+    const ambientLight = new PointLight(0xffffff, 0.1);
+    ambientLight.position.set(20, -10, 20);
+    this.scene.add(ambientLight);
+
+    const shadowLight = new PointLight(0xffffff, 0.6, 100);
+    shadowLight.position.set(10, 0, 4);
+    shadowLight.castShadow = true;
+    shadowLight.shadow.radius = 16;
+    shadowLight.shadow.mapSize.width = 2048;
+    shadowLight.shadow.mapSize.height = 2048;
+    this.scene.add(shadowLight);
+
+    this.cannonLight = new PointLight(0xEDB458, 0, 100, 2);
+    this.cannonLight.position.set(28, -20, 28);
+    this.cannonLight.castShadow = true;
+    this.cannonLight.shadow.radius = 2;
+    this.cannonLight.shadow.mapSize.width = 256;
+    this.cannonLight.shadow.mapSize.height = 256;
+    this.scene.add(this.cannonLight);
+
+    // FLOOR
+
+    this.plane = new Mesh(
+    new PlaneBufferGeometry(1000 * this.scale, 1000 * this.scale),
+    new MeshPhongMaterial({ color: 0xDCD6F7 }));
+
+    this.plane.position.set(-10, -30.5, -10);
+    this.plane.receiveShadow = true;
+    this.plane.rotation.x = -Math.PI / 2;
+    this.scene.add(this.plane);
+
+    // RENDERER
+
+    this.renderer = new WebGLRenderer({ antialias: true });
+    console.log('pixel ratio:', window.devicePixelRatio);
+    // this.renderer.setPixelRatio( window.devicePixelRatio );
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.renderer.shadowMap.enabled = true;
+    this.renderer.shadowMap.type = PCFSoftShadowMap;
+
+    // CONTAINER
+
+    this.container = document.getElementById('canvas-container');
+    this.container.appendChild(this.renderer.domElement);
+    if (this.showStats) this.container.appendChild(this.stats.dom);
+
+    // CAMERA
+
+    this.camera = new PerspectiveCamera(40, window.innerWidth / window.innerHeight, 5, 400);
+    this.camera.position.set(55, 15, 55);
+    this.cameraTarget = new Vector3(0, -22, 0);
+    // this.camera.position.set(65, -20, 20);
+    // this.cameraTarget = new Vector3( 30, -25, 30 );
+
+    let center = new Vector3((this.stageSize.left + this.stageSize.width / 2) * scale, (this.stageSize.top - this.stageSize.height / 2) * scale, 0);
+    const previewCameraDistance = 70 * scale;
+
+    // this.lookAtHelper = this.createBall(0.5, new Color(0xffffff));
+
+    // let stageSizeHelper = new Mesh(
+    // new PlaneBufferGeometry( this.stageSize.width * this.scale, this.stageSize.height * this.scale, Math.floor(this.stageSize.width / 5), Math.floor(this.stageSize.height / 5) ),
+    // new MeshPhongMaterial ( { color: 0xaaddff, wireframe: false} )
+    // );
+    // stageSizeHelper.position.set(this.stageSize.left * this.scale, this.stageSize.top * this.scale, 0);
+    // stageSizeHelper.applyMatrix4( new THREE.Matrix4().makeTranslation( (this.stageSize.width / 2), -this.stageSize.height / 2, 0 ) );
+    // this.scene.add( stageSizeHelper );
+
+    // ROOM
+
+    this.lights = [];
+
+    let colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff];
+
+    for (let i = 0; i < 3; i++) {
+
+      let group = new Group();
+      group.position.x = 1000;
+
+      let color = colors[Math.floor(Math.random() * colors.length)];
+      let light = new PointLight(color, 0.5, 50, 1.7);
+      // gsap.timeline({ repeat: -1}).to(light, {intensity: 0.7, duration: 0.2}).to(light, {intensity: 0.5, duration: 0.2}).to(light, {intensity: 0.8, duration: 0.2})
+      group.add(light);
+
+      let geometry = new IcosahedronBufferGeometry(0.5, 4);
+      let material = new MeshPhongMaterial({ color: color, wireframe: false });
+      let mesh = new Mesh(geometry, material);
+      mesh.castShadow = true;
+      group.add(mesh);
+
+      this.scene.add(group);
+      this.lights.push(group);
+    }
+
+
+    ///=================
+    //    SOFA
+    ///=================
+
+    let sofaGroup = new Group();
+    sofaGroup.position.y = 1000;
+    this.scene.add(sofaGroup);
+
+    var sofaLoader = new GLTFLoader(manager);
+    sofaLoader.load("https://assets.codepen.io/557388/sofa.glb", object => {
+
+      object.scene.rotation.y = Math.PI * 0.5;
+      let mat = new MeshPhongMaterial({ color: 0xffffff });
+
+      sofaGroup.add(object.scene);
+
+      object.scene.traverse(function (child) {
+
+        if (child.isMesh) {
+          child.position.set(0, 0, 0);
+          child.castShadow = true;
+          child.receiveShadow = true;
+          child.material = mat;
+        } else
+        if (child.isLight)
+        {
+          child.visible = false; //child.intensity = 0;
+        }
+
+      });
+
+      this.models.sofa = sofaGroup;
+    });
+
+    ///=================
+    //    TREE
+    ///=================
+
+    let treeGroup = new Group();
+    treeGroup.position.y = 1000;
+    this.scene.add(treeGroup);
+
+    var treeLoader = new GLTFLoader(manager);
+    treeLoader.load("https://assets.codepen.io/557388/PineTree.gltf", object => {
+
+      object.scene.position.set(0, 0, -17);
+      object.scene.scale.set(1.2, 1.2, 1.2);
+      object.scene.rotation.x = Math.PI * 0.5;
+
+      treeGroup.add(object.scene);
+      treeGroup.position.y = 1000;
+
+      object.scene.traverse(function (child) {
+
+        let mat = new MeshPhongMaterial({ color: 0x99dd66 });
+        if (child.isMesh) {
+          child.castShadow = true;
+          child.receiveShadow = true;
+          child.material = mat;
+        } else
+        if (child.isLight)
+        {
+          child.visible = false; //child.intensity = 0;
+        }
+
+      });
+
+      this.models.tree = treeGroup;
+    });
+
+    ///=================
+    //    FIREPLACE
+    ///=================
+
+    let fireplaceGroup = new Group();
+    this.scene.add(fireplaceGroup);
+
+    var fireplaceLoader = new GLTFLoader(manager);
+    fireplaceLoader.load("https://assets.codepen.io/557388/fireplace.gltf", object => {
+
+      object.scene.position.set(0, -29, -19.5);
+      object.scene.scale.set(4, 4, 4);
+      object.scene.rotation.y = -Math.PI * 0.5;
+      fireplaceGroup.add(object.scene);
+
+
+
+      object.scene.traverse(function (child) {
+
+        let mat = new MeshPhongMaterial({ color: 0xffffff });
+        if (child.isMesh) {
+          child.castShadow = true;
+          child.receiveShadow = true;
+          child.material = mat;
+        } else
+        if (child.isLight)
+        {
+          child.visible = false; //child.intensity = 0;
+        }
+
+      });
+
+      this.models.fireplace = fireplaceGroup;
+    });
+
+    ///=================
+    //    TABLE
+    ///=================
+
+    let tableGroup = new Group();
+    tableGroup.position.y = 1000;
+    this.scene.add(tableGroup);
+
+    var tableLoader = new GLTFLoader(manager);
+    tableLoader.load("https://assets.codepen.io/557388/table.gltf", object => {
+
+      object.scene.position.set(0, -6.3, 0);
+      object.scene.scale.set(2, 2, 2);
+      tableGroup.add(object.scene);
+
+      object.scene.traverse(function (child) {
+
+        let mat = new MeshPhongMaterial({ color: 0xffffff });
+        if (child.isMesh) {
+          child.castShadow = true;
+          child.receiveShadow = true;
+          child.material = mat;
+        } else
+        if (child.isLight)
+        {
+          child.visible = false;
+          // child.intensity = 0;
+        }
+
+      });
+
+      this.models.table = tableGroup;
+    });
+
+    ///=================
+    //    TV STAND
+    ///=================
+
+    let standGroup = new Group();
+    standGroup.position.y = 1000;
+    this.scene.add(standGroup);
+
+    var tableLoader = new GLTFLoader(manager);
+    tableLoader.load("https://assets.codepen.io/557388/stand.gltf", object => {
+
+      object.scene.rotation.y = Math.PI * 0.5;
+      standGroup.add(object.scene);
+
+      object.scene.traverse(function (child) {
+
+        let mat = new MeshPhongMaterial({ color: 0xffffff });
+        if (child.isMesh) {
+          child.castShadow = true;
+          child.receiveShadow = true;
+          child.material = mat;
+        } else
+        if (child.isLight)
+        {
+          child.visible = false; //child.intensity = 0;
+        }
+
+      });
+
+      this.models.stand = standGroup;
+    });
+
+    ///=================
+    //    TV
+    ///=================
+
+    let tvGroup = new Group();
+    tvGroup.position.y = 1000;
+    this.scene.add(tvGroup);
+
+    var tableLoader = new GLTFLoader(manager);
+    tableLoader.load("https://assets.codepen.io/557388/tv.gltf", object => {
+
+      object.scene.scale.set(2, 2, 2);
+      object.scene.rotation.y = Math.PI * 0.5;
+      tvGroup.add(object.scene);
+
+      object.scene.traverse(function (child) {
+
+        let mat = new MeshPhongMaterial({ color: 0xffffff });
+        if (child.isMesh) {
+          child.castShadow = true;
+          child.receiveShadow = true;
+          child.material = mat;
+        } else
+        if (child.isLight)
+        {
+          child.visible = false; //child.intensity = 0;
+        }
+
+      });
+
+      this.models.tv = tvGroup;
+    });
+
+    ///=================
+    //    POT
+    ///=================
+
+    let potGroup = new Group();
+    potGroup.position.y = 1000;
+    this.scene.add(potGroup);
+
+    var tableLoader = new GLTFLoader(manager);
+    tableLoader.load("https://assets.codepen.io/557388/pot.gltf", object => {
+
+      object.scene.position.set(0, 0, -15);
+      object.scene.scale.set(6, 6, 6);
+      object.scene.rotation.x = Math.PI * 0.5;
+      potGroup.add(object.scene);
+
+      object.scene.traverse(function (child) {
+
+        let mat = new MeshPhongMaterial({ color: 0xB2967D });
+        if (child.isMesh) {
+          child.castShadow = true;
+          child.receiveShadow = true;
+          child.material = mat;
+        } else
+        if (child.isLight)
+        {
+          child.visible = false; //child.intensity = 0;
+        }
+
+      });
+
+      this.models.pot = potGroup;
+    });
+
+    ///=================
+    //    CANNON
+    ///=================
+
+    let cannonGroup = new Group();
+    this.scene.add(cannonGroup);
+
+    var tableLoader = new GLTFLoader(manager);
+    tableLoader.load("https://assets.codepen.io/557388/cannon2.gltf", object => {
+
+      object.scene.position.set(30, -30, 30);
+      object.scene.scale.set(3, 3, 3);
+      object.scene.rotation.y = Math.PI * 1.25;
+      cannonGroup.add(object.scene);
+
+      object.scene.traverse(function (child) {
+
+        if (child.isMesh) {
+          child.castShadow = true;
+        }
+        if (child.isLight)
+        {
+          child.visible = false; //child.intensity = 0;
+        }
+
+      });
+
+      this.models.cannon = cannonGroup;
+    });
+
+
+    ///=================
+    //    SNOWMAN
+    ///=================
+
+    let snowmanGroup = new Group();
+    snowmanGroup.position.y = 1000;
+    this.scene.add(snowmanGroup);
+
+    var snowmanLoader = new GLTFLoader(manager);
+    snowmanLoader.load("https://assets.codepen.io/557388/snowman.gltf", object => {
+
+      //object.scene.position.set(30, -30, 30);
+      object.scene.scale.set(2.5, 2.5, 2.5);
+      // object.scene.rotation.y = Math.PI * 1.25;
+      snowmanGroup.add(object.scene);
+
+      object.scene.traverse(function (child) {
+
+        if (child.isMesh) {
+          child.castShadow = true;
+        }
+        if (child.isLight)
+        {
+          child.visible = false; //child.intensity = 0;
+        }
+
+      });
+
+      this.models.snowman = snowmanGroup;
+    });
+
+    ///=================
+    //    STAR
+    ///=================
+
+    let starGroup = new Group();
+    starGroup.position.y = 1000;
+    this.scene.add(starGroup);
+
+    var starLoader = new GLTFLoader(manager);
+    starLoader.load("https://assets.codepen.io/557388/star.gltf", object => {
+
+      object.scene.position.set(-1, 0, 0);
+      object.scene.scale.set(0.01, 0.01, 0.01);
+      object.scene.rotation.y = Math.PI * .5;
+      starGroup.add(object.scene);
+
+      object.scene.traverse(function (child) {
+
+        if (child.isMesh) {
+          child.castShadow = true;
+        }
+        if (child.isLight)
+        {
+          child.visible = false;
+          // child.intensity = 0;
+
+        }
+
+      });
+
+      this.models.star = starGroup;
+    });
+
+
+
+    this.onResize();
+  }
+
+  setPlane(physicsPlane)
+  {
+    this.plane.position.copy(physicsPlane.position);
+    this.plane.quaternion.copy(physicsPlane.quaternion);
+  }
+
+  render()
+  {
+    this.camera.lookAt(this.cameraTarget);
+    this.renderer.render(this.scene, this.camera);
+
+    if (this.showStats) this.stats.update();
+  }
+
+  onResize()
+  {
+    this.camera.aspect = window.innerWidth / window.innerHeight;
+
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+
+    var aspect = window.innerWidth / window.innerHeight;
+    this.width = window.innerWidth;
+    this.height = window.innerHeight;
+
+  }
+
+  createBox(width, height, depth, color = 0xffffff, present = false)
+  {
+    //let geometry = new BoxBufferGeometry( width * this.scale, height * this.scale, depth * this.scale );
+    //let texture = present ? this.presentTextures[Math.floor(Math.random() * this.presentTextures.length)] : null;
+    //let material = new MeshPhongMaterial( { color: color, shininess: present ? 100 : 30, map: texture } );
+    let material = present ?
+    this.presentMaterials[Math.floor(Math.random() * this.presentMaterials.length)] :
+    this.greyMaterial;
+    let mesh = new Mesh(this.boxGeometry, material);
+    mesh.scale.set(width, height, depth);
+    mesh.castShadow = true;
+    mesh.receiveShadow = true;
+    this.scene.add(mesh);
+    return mesh;
+  }
+
+  createSphere(radius, color)
+  {
+    let geometry = new IcosahedronBufferGeometry(radius, 3);
+    let material = new MeshPhongMaterial({ color: color, shininess: 30 });
+    let mesh = new Mesh(geometry, material);
+    mesh.castShadow = true;
+    mesh.receiveShadow = true;
+    this.scene.add(mesh);
+    return mesh;
+  }
+
+  createBall(size, color, light = false)
+  {
+
+    if (light && this.lights.length)
+    {
+      return this.lights.shift();
+    }
+
+    let group = new Group();
+    let material = new MeshPhongMaterial({ color: color, wireframe: false });
+    let ball = new IcosahedronBufferGeometry(size, 4);
+    let mesh = new Mesh(ball, material);
+    mesh.castShadow = true;
+    group.add(mesh);
+
+    if (!light)
+    {
+      let cap = new CylinderBufferGeometry(size / 2, size / 2, size, 5);
+      let capMat = new MeshPhongMaterial({ color: 0xFFD338, wireframe: false });
+      let capMesh = new Mesh(cap, capMat);
+      capMesh.castShadow = true;
+      capMesh.position.y = size * 0.75;
+      group.add(capMesh);
+
+    }
+
+    this.scene.add(group);
+    return group;
+  }
+
+  createCylinder(radiusTop, radiusBottom, height, numSegments)
+  {
+    const group = new Group();
+    const geometry = new CylinderBufferGeometry(radiusTop, radiusBottom, height, numSegments);
+    const material = new MeshPhongMaterial({ color: 0xff0000 });
+    const cylinder = new Mesh(geometry, material);
+    // cylinder.position.set(x, y, z
+    cylinder.rotation.x = Math.PI * 0.5;
+    group.add(cylinder);
+    this.scene.add(group);
+    return group;
+  }}
+
+
+
+
+const PHYSICS_MATERIAL = {
+  lowBounce: 'lowbounce',
+  normalBounce: 'normalbounce',
+  highBounce: 'highbounce' };
+
+
+class Physics
+{
+  constructor(scale = 1, stageSize)
+  {
+    this.scale = 1;
+    this.stageSize;
+
+    this.scale = scale;
+    this.stageSize = stageSize;
+
+    this.materials = {};
+
+    let mainMaterial = new CANNON.Material('main');
+    mainMaterial.friction = 1;
+
+    this.materials[PHYSICS_MATERIAL.lowBounce] = new CANNON.ContactMaterial(mainMaterial, mainMaterial, { friction: 2, restitution: 0 + extraBounce });
+    this.materials[PHYSICS_MATERIAL.normalBounce] = new CANNON.ContactMaterial(mainMaterial, mainMaterial, { friction: 2, restitution: 0 + extraBounce });
+    this.materials[PHYSICS_MATERIAL.highBounce] = new CANNON.ContactMaterial(mainMaterial, mainMaterial, { friction: 2, restitution: 1.5 + extraBounce });
+
+    // WORLD
+
+    this.world = new CANNON.World();
+    this.world.gravity.set(0, -60 * this.scale, 0);
+    this.world.broadphase = new CANNON.SAPBroadphase(this.world);
+    this.world.solver.iterations = 4;
+    this.world.allowSleep = true;
+
+    this.world.addContactMaterial(this.materials[PHYSICS_MATERIAL.lowBounce]);
+    this.world.addContactMaterial(this.materials[PHYSICS_MATERIAL.normalBounce]);
+    this.world.addContactMaterial(this.materials[PHYSICS_MATERIAL.highBounce]);
+
+    // GROUND
+
+    this.groundBody = new CANNON.Body({ mass: 0, material: mainMaterial });
+    let groundShape = new CANNON.Plane();
+    this.groundBody.addShape(groundShape);
+    var rotate = new CANNON.Vec3(1, 0, 0);
+    this.groundBody.quaternion.setFromAxisAngle(rotate, -(Math.PI / 2));
+    this.groundBody.position.set(0, (this.stageSize.top - this.stageSize.height) * scale, 0);
+    this.world.addBody(this.groundBody);
+
+  }
+
+  createBody(mass, position, rotation, material = PHYSICS_MATERIAL.normalBounce)
+  {
+    let body = new CANNON.Body({
+      type: mass == 0 ? CANNON.Body.KINEMATIC : CANNON.Body.DYNAMIC,
+      material: this.materials[material],
+      mass: mass * this.scale,
+      position: new CANNON.Vec3(position.x * this.scale, position.y * this.scale, position.z * this.scale) // m
+    });
+
+    Object.keys(rotation || {}).forEach((key) =>
+    {
+      this.setAngle(body, rotation[key], key);
+    });
+    this.world.addBody(body);
+
+    return body;
+  }
+
+  createBoxShape(width, height, depth)
+  {
+    return new CANNON.Box(new CANNON.Vec3(width / 2 * this.scale, height / 2 * this.scale, depth / 2 * this.scale));
+  }
+
+  createCylinderShape(radiusTop, radiusBottom, height, segments)
+  {
+    return new CANNON.Cylinder(radiusTop, radiusBottom, height, segments);
+  }
+
+  createSphereShape(radius)
+  {
+    return new CANNON.Sphere(radius);
+  }
+
+  // createCylinder(x, y, z, radiusTop, radiusBottom,  height, numSegments)
+  // {
+  // 	let shape = new CANNON.Cylinder(radiusTop, radiusBottom,  height, numSegments);
+
+  // 	let body = new CANNON.Body({
+  // 		material: this.materials[PHYSICS_MATERIAL.normalBounce],
+  // 		mass: 15 * this.scale,
+  // 		position: new CANNON.Vec3(x * this.scale, y * this.scale, z * this.scale), // m
+  // 	});
+  // 	body.addShape(shape);
+  // 	this.setAngle(body, -Math.PI * 0.5, 'x');
+
+  // 	this.world.addBody(body);
+
+  // 	return body;
+  // }
+
+  createBox(width, height, depth, x, y, z, mass = 0, rotation = 0, trigger)
+  {
+    let shape = new CANNON.Box(new CANNON.Vec3(width / 2 * this.scale, height / 2 * this.scale, depth / 2 * this.scale));
+    let body = new CANNON.Body({
+      type: mass == 0 ? CANNON.Body.KINEMATIC : CANNON.Body.DYNAMIC,
+      material: this.materials[PHYSICS_MATERIAL.normalBounce],
+      mass: mass * this.scale,
+      position: new CANNON.Vec3(x * this.scale, y * this.scale, z * this.scale) // m
+    });
+    body.addShape(shape);
+    body.collisionResponse = trigger ? false : true;
+
+    if (trigger)
+    {
+      body.addEventListener('collide', () => trigger());
+    }
+
+    this.setAngle(body, rotation);
+
+    this.world.addBody(body);
+
+    return body;
+  }
+
+  setAngle(body, rotation, direction = 'z')
+  {
+    let q = new CANNON.Quaternion();
+    let x = direction === 'x' ? 1 : 0;
+    let y = direction === 'y' ? 1 : 0;
+    let z = direction === 'z' ? 1 : 0;
+    q.setFromAxisAngle(new CANNON.Vec3(x, y, z), rotation);
+    body.quaternion = q.mult(body.quaternion);
+  }
+
+  createBall(size, x = 0, y = 0, z = 0)
+  {
+    let shape = new CANNON.Sphere(size);
+    let body = new CANNON.Body({
+      material: this.materials[PHYSICS_MATERIAL.highBounce],
+      mass: 1 * this.scale,
+      position: new CANNON.Vec3(x * this.scale, y * this.scale, z * this.scale) // m
+    });
+    body.addShape(shape);
+
+    this.world.addBody(body);
+
+    return body;
+  }
+
+  createCylinder(x, y, z, radiusTop, radiusBottom, height, numSegments)
+  {
+    let shape = new CANNON.Cylinder(radiusTop, radiusBottom, height, numSegments);
+
+    let body = new CANNON.Body({
+      material: this.materials[PHYSICS_MATERIAL.normalBounce],
+      mass: 15 * this.scale,
+      position: new CANNON.Vec3(x * this.scale, y * this.scale, z * this.scale) // m
+    });
+    body.addShape(shape);
+    this.setAngle(body, -Math.PI * 0.5, 'x');
+
+    this.world.addBody(body);
+
+    return body;
+  }
+
+  remove(body)
+  {
+    this.world.remove(body);
+  }
+
+  tick(delta)
+  {
+    this.world.step(1 / 60, delta, 3);
+  }}
+
+
+
+console.clear();
+
+const DIRECTION = {
+  left: 'LEFT',
+  right: 'RIGHT' };
+
+
+const GAME_STATE = {
+  loading: 'loading',
+  intro: 'intro',
+  waiting: 'waiting',
+  game: 'game' };
+
+
+let sounds = {
+  fire: [new Audio('https://assets.codepen.io/557388/fire_01.mp3'), new Audio('https://assets.codepen.io/557388/fire_02.mp3')],
+  bells: [new Audio('https://assets.codepen.io/557388/bells_01.mp3')],
+  bing: [new Audio('https://assets.codepen.io/557388/bing_01.mp3'), new Audio('https://assets.codepen.io/557388/bing_02.mp3')] };
+
+
+let gameState = GAME_STATE.loading;
+
+let physicsItems = [];
+let stage;
+let physics;
+
+let mousePos = { x: 0, y: 0 };
+
+
+
+let count = 0;
+let cannonFlash;
+let cannonRecoil;
+let stars = [];
+
+const introSteps = [init, prepUI, loadComplete, dropIn, createClickListeners, introRoom, introCannon, introStart, startGame];
+
+function next()
+{
+  if (introSteps.length)
+  {
+    introSteps.shift()();
+  }
+}
+
+function loadComplete()
+{
+  const loadingScreen = document.querySelector('#loading');
+  loadingScreen.innerHTML = '';
+  setState(GAME_STATE.intro);
+
+  gsap.to(loadingScreen, { autoAlpha: 0, duration: 1.5 });
+  setTimeout(() => next(), 1000);
+}
+
+function prepUI()
+{
+  gsap.set('#steve', { y: '50%', scale: 0, rotation: 45 });
+  gsap.set('#bubble', { transformOrigin: '100% 50%', autoAlpha: 0, x: '+=50', rotation: 5, scale: 0.9 });
+
+  next();
+}
+
+function dropIn()
+{
+  createSofa();
+  createTable();
+  createStand();
+  createTV();
+
+  next();
+}
+
+function setState(newState)
+{
+  gameState = newState;
+  document.body.setAttribute('class', gameState);
+}
+
+function onMouseMove(event)
+{
+  mousePos = { x: event.clientX, y: event.clientY };
+}
+
+function createClickListeners()
+{
+  document.addEventListener('keypress', onClick, false);
+  document.addEventListener('click', onClick, false);
+  document.addEventListener('mousemove', onMouseMove, false);
+
+  next();
+}
+
+function introRoom()
+{
+  setState(GAME_STATE.intro);
+  let roomTL = gsap.timeline({ onComplete: () => setState(GAME_STATE.waiting) });
+  roomTL.to('#steve', { delay: 1, y: 0, rotation: 0, scale: 1, ease: 'power4.out', duration: 0.6, onComplete: () => playSound('bing') });
+  roomTL.fromTo('#bubble', { autoAlpha: 0, y: 0, x: '+=50', rotation: 5, scale: 0.9 }, { autoAlpha: 1, rotation: 0, scale: 1, x: 0, ease: 'elastic', duration: 1 });
+
+}
+
+function introCannon()
+{
+  setState(GAME_STATE.intro);
+  const steveEl = document.querySelector('#steve');
+  const textEl = document.querySelector('#text');
+  const textHighlightEl = document.querySelector('#text-highlight');
+
+  let cannonTL = gsap.timeline({ onComplete: () => setState(GAME_STATE.waiting), defaults: { ease: 'power4.easeInOut', duration: .8 } });
+  cannonTL.to(stage.camera.position, { x: 65, y: -20, z: 20 });
+  cannonTL.to(stage.cameraTarget, { x: 30, y: -25, z: 30 }, 0);
+  cannonTL.to('#bubble', { autoAlpha: 0, y: '-=30', scale: 0.5, duration: 0.3, ease: 'power2.in' }, 0);
+  cannonTL.to(steveEl, { y: '-=20', duration: 0.1, onComplete: () => {
+      steveEl.setAttribute('src', 'https://assets.codepen.io/557388/happy.svg');
+      textEl.textContent = "But wait, we have this ";
+      textHighlightEl.textContent = "Christmas Cannon!!";
+      setTimeout(() => playSound('bing'), 300);
+
+    } }, 0.5);
+  cannonTL.fromTo('#bubble', { autoAlpha: 0, y: 0, x: '+=50', rotation: 5, scale: 0.9 }, { autoAlpha: 1, rotation: 0, scale: 1, x: 0, ease: 'elastic', duration: 1 });
+  cannonTL.to(steveEl, { y: 0, duration: .7, ease: 'bounce' }, 0.6);
+}
+
+function introStart()
+{
+  setState(GAME_STATE.intro);
+  const steveEl = document.querySelector('#steve');
+  const textEl = document.querySelector('#text');
+  const textHighlightEl = document.querySelector('#text-highlight');
+
+  let cannonTL = gsap.timeline({ onComplete: () => setState(GAME_STATE.game), defaults: { ease: 'power4.easeInOut', duration: .8 } });
+  cannonTL.to(stage.camera.position, { x: 55, y: 15, z: 55 });
+  cannonTL.to(stage.cameraTarget, { x: 0, y: -22, z: 0, duration: 1.4 }, 0);
+  cannonTL.to('#bubble', { autoAlpha: 0, y: '-=30', scale: 0.5, duration: 0.3, ease: 'power2.in' }, 0);
+  cannonTL.to(steveEl, { y: '-=20', duration: 0.1, onComplete: () => {
+      steveEl.setAttribute('src', 'https://assets.codepen.io/557388/steve.svg');
+      textEl.textContent = "Click or tap to fire the Christmas Cannon, let’s make this room more festive!!";
+      textHighlightEl.textContent = "";
+      setTimeout(() => playSound('bing'), 700);
+    } }, 0.5);
+  cannonTL.fromTo('#bubble', { autoAlpha: 0, y: 0, x: '+=50', rotation: 5, scale: 0.9 }, { autoAlpha: 1, rotation: 0, scale: 1, x: 0, ease: 'elastic', duration: 1 });
+  cannonTL.to(steveEl, { y: 0, duration: .7, ease: 'bounce' }, 0.6);
+}
+
+function endMessage()
+{
+  const steveEl = document.querySelector('#steve');
+  const textEl = document.querySelector('#text');
+  const textHighlightEl = document.querySelector('#text-highlight');
+
+  let changed = false;
+  steveEl.addEventListener('click', event => {
+    event.stopPropagation();
+    if (!changed)
+    {
+      changed = true;
+      let steveTL = gsap.timeline();
+      steveTL.to(steveEl, { y: '-=40', duration: 0.1, onComplete: () => {
+          steveEl.setAttribute('src', 'https://assets.codepen.io/557388/snowman.svg');
+        } }, 0);
+      steveTL.to(steveEl, { y: 0, duration: .7, ease: 'bounce' }, 0.1);
+    } else
+    window.open('https://ste.vg/pJ96mS5DC', '_blank');
+  });
+
+  textEl.addEventListener('click', event => {
+    event.stopPropagation();
+    startGame();
+    // window.open('https://www.twitter.com/steeevg/','_blank');
+  });
+
+  // steveEl.setAttribute('src', 'https://assets.codepen.io/557388/snowman.svg');
+  textEl.innerHTML = `Yay! So much better.`;
+
+
+  // Be sure to send a screenshot to <a href="https://twitter.com/steeevg/" target="_blank">@steeevg</a>, he’d love to see it!`;
+  textHighlightEl.textContent = "Merry Christmas!";
+
+  let roomTL = gsap.timeline();
+  setTimeout(() => playSound('bing'), 700);
+  roomTL.to('#steve', { y: 0, rotation: 0, scale: 1, ease: 'power4.out', duration: 0.6 });
+  roomTL.fromTo('#bubble', { autoAlpha: 0, y: 0, x: '+=50', rotation: 5, scale: 0.9 }, { autoAlpha: 1, rotation: 0, scale: 1, x: 0, ease: 'elastic', duration: 1 });
+}
+
+function hideEndMessage()
+{
+
+}
+
+function playSound(name)
+{
+  let options = sounds[name];
+  if (options)
+  {
+    let sound = options[Math.floor(Math.random() * options.length)];
+    sound.currentTime = 0;
+    sound.play();
+  }
+}
+
+function startGame()
+{
+  setState(GAME_STATE.game);
+
+  let gameStartTL = gsap.timeline({ defaults: { ease: 'power4.easeInOut', duration: .5 } });
+  gameStartTL.to('#bubble', { autoAlpha: 0, y: '-=30', scale: 0.5, duration: 0.3, ease: 'power2.in' }, 0);
+  gameStartTL.to('#steve', { y: '100%', scale: 0, rotation: 45 }, 0);
+}
+
+function onClick(event)
+{
+  if (event) event.preventDefault();
+
+  let coords = {
+    x: event.clientX || mousePos.x,
+    y: event.clientY || mousePos.y };
+
+
+
+  switch (gameState) {
+
+    case GAME_STATE.waiting:
+      next();
+      break;
+    case GAME_STATE.game:
+      fire(coords);
+      break;
+    default:
+      return;}
+
+
+}
+
+function fire(coords)
+{
+  if (count === 0) next();
+  count++;
+  let item;
+
+  let randomItems = [addBall, createStar];
+
+  if (count === 50) item = createSnowman();else
+  if (count === 10) item = createTree();else
+  if (stars.length && Math.random() > 0.8) item = createStar(); //randomItems[Math.floor(Math.random() * randomItems.length)]();
+  else item = addBall();
+
+  if (count === 100)
+  {
+    setTimeout(() => endMessage(), 1000);
+  }
+
+  playSound('fire');
+  // if(Math.random() > 0.8) playSound('bells');
+
+  let range = stage.height * 0.4;
+  let x = -60;
+  // let y = 20;
+  let z = -60;
+
+  let xStart = stage.width / 2 - range;
+  let xEnd = stage.width / 2 + range;
+  if (coords.x > stage.width / 2)
+  {
+    if (coords.x > xEnd) x = -20;else
+
+    {
+      let r = coords.x - stage.width / 2;
+      x = -20 + (range - r) / range * -40;
+    }
+  }
+
+  // let yStart = (stage.width / 2);
+  if (coords.x < stage.width / 2)
+  {
+    if (coords.x < xStart) z = -20;else
+
+    {
+      let r = coords.x - xStart;
+      z = -20 + r / range * -40;
+    }
+  }
+
+  let hRange = 100;
+  let y = 60 - coords.y / stage.height * hRange;
+
+  item.physics.velocity.set(x * powerMultiplier, y, z * powerMultiplier);
+  const angularRandomness = 10;
+  item.physics.angularVelocity.set(
+  Math.random() * angularRandomness - angularRandomness / 2,
+  Math.random() * angularRandomness - angularRandomness / 2,
+  Math.random() * angularRandomness - angularRandomness / 2);
+  item.physics.angularDamping = 0.8;
+
+  cannonFlash.restart();
+  cannonRecoil.restart();
+}
+
+function onReady()
+{
+  // createTree();
+
+  setState(GAME_STATE.intro);
+
+  cannonFlash = gsap.timeline();
+  cannonFlash.fromTo(stage.cannonLight, { intensity: 2 }, { intensity: 0, duration: .3 });
+
+  cannonRecoil = gsap.timeline();
+  cannonRecoil.to(stage.models.cannon.position, { x: '+=3', z: '+=3', duration: 0.1, ease: 'Power2.out' }).to(stage.models.cannon.position, { x: '-=3', z: '-=3', duration: 0.4 });
+  // cannonFlash.stop();
+
+  for (let i = 0; i < 20; i++) {
+    let star = stage.models.star.clone();
+    stars.push(star);
+    stage.scene.add(star);
+
+  }
+
+  setTimeout(() => {
+    animate();
+    next();
+  }, 100);
+
+}
+
+
+
+
+function addBall()
+{
+  // gsap.to(stage.cameraTarget, {x: stageSize.left + (stageSize.width * 0.5), ease: 'Power4.inOut', duration: 1})
+
+
+
+  let x = 35;
+  let y = -15;
+  let z = 35;
+
+  let width = 1 + Math.random() * 4;
+  let height = 1 + Math.random() * 4;
+  let depth = 1 + Math.random() * 4;
+
+  let isBall = Math.random() > 0.5;
+
+  let light = Math.random() > 0.8;
+  var size = light ? .5 : .8;
+
+  var physicsItem = {
+    mesh: isBall ? stage.createBall(size, showGuides ? 0xFF0000 : Math.random() * 0xFFFFFF, light) : stage.createBox(width, height, depth, showGuides ? 0xFF0000 : 0xFFFFFF, !showGuides),
+    physics: isBall ? physics.createBall(size, x, y, z) : physics.createBox(width, height, depth, x, y, z, 2),
+    previousPosition: new CANNON.Vec3(x, y, z),
+    rotation: 0,
+    rotationVelocity: 0 };
+
+
+  // physicsItem.physics.velocity.set(-20 - (Math.random() * 50), 1 + (Math.random() * 10), -20 - (Math.random() * 50))
+
+
+  // -60 => -20
+
+  // 10 => 30
+
+  // -20 => -60
+
+  // physicsItem.physics.velocity.set(-60, 10, -60)
+  // const angularRandomness = 10;
+  // physicsItem.physics.angularVelocity.set(
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+  // physicsItem.physics.angularDamping = 0.8;
+
+  physicsItems.push(physicsItem);
+
+  return physicsItem;
+
+  // if(pauseTimer) clearTimeout(pauseTimer);
+  // pauseTimer = setTimeout( _ => doPhysics = false, 7000);
+}
+
+function createStaticBox(settings)
+{
+  // const z = 1;
+  var physicsItem = {
+    mesh: settings.show ? stage.createBox(settings.width, settings.height, settings.depth, settings.color) : null,
+    physics: physics.createBox(settings.width, settings.height, settings.depth, settings.x, settings.y, settings.z, 0, settings.rotation, settings.trigger),
+    previousPosition: new CANNON.Vec3(settings.x, settings.y, settings.z),
+    rotation: settings.rotation,
+    rotationVelocity: 0 };
+
+  physicsItems.push(physicsItem);
+
+  return physicsItem;
+}
+
+const clock = new Clock();
+let oldElapsedTime = 0;
+
+function animate()
+{
+  const elapsedTime = clock.getElapsedTime();
+  const delta = elapsedTime - oldElapsedTime;
+  oldElapsedTime = elapsedTime;
+
+  physics.tick(delta);
+
+  for (var i in physicsItems)
+  {
+    if (physicsItems[i].mesh)
+    {
+      physicsItems[i].mesh.position.copy(physicsItems[i].physics.position);
+      physicsItems[i].mesh.quaternion.copy(physicsItems[i].physics.quaternion);
+    }
+
+  }
+
+  stage.render();
+
+  requestAnimationFrame(animate);
+}
+
+function init()
+{
+  console.log('init()');
+
+
+
+  let worldScale = 1;
+
+  let stageSize = {
+    left: -20,
+    width: 40,
+    top: 0,
+    height: 30 };
+
+
+  stage = new Stage(worldScale, stageSize, onReady, showGuides);
+  physics = new Physics(worldScale, stageSize);
+
+  window.addEventListener('resize', () => {stage.onResize();}, false);
+
+
+
+
+  let staticItems = [
+  {
+    show: true,
+    x: stageSize.left,
+    y: -18.5,
+    z: 0,
+    width: 25,
+    height: 2,
+    depth: 40,
+    color: 0xcccccc,
+    rotation: Math.PI * 0.5 },
+
+  {
+    show: true,
+    x: stageSize.left + stageSize.width / 2 - 0.5,
+    y: -18.5,
+    z: -20,
+    width: 41,
+    height: 25,
+    depth: 2,
+    color: 0xcccccc,
+    rotation: 0 },
+
+  {
+    show: true,
+    x: stageSize.left + stageSize.width / 2,
+    y: -30,
+    z: 0,
+    width: 40,
+    height: 2,
+    depth: 40,
+    color: 0xcccccc,
+    rotation: 0 },
+
+  {
+    show: showGuides,
+    x: 5.5,
+    y: -25,
+    z: -18,
+    width: 3,
+    height: 14,
+    depth: 3,
+    color: 0xff0000,
+    rotation: 0 },
+
+  {
+    show: showGuides,
+    x: -5,
+    y: -25,
+    z: -18,
+    width: 3,
+    height: 14,
+    depth: 3,
+    color: 0xff0000,
+    rotation: 0 },
+
+  {
+    show: showGuides,
+    x: 0,
+    y: -19,
+    z: -18,
+    width: 10,
+    height: 2.5,
+    depth: 3,
+    color: 0xff0000,
+    rotation: 0 },
+
+  {
+    show: showGuides,
+    x: 0,
+    y: -17.7,
+    z: -18,
+    width: 15.2,
+    height: 0.5,
+    depth: 3.3,
+    color: 0xff0000,
+    rotation: 0 }];
+
+
+
+
+  staticItems.forEach(settings => {
+    createStaticBox(settings);
+  });
+
+
+
+
+
+
+  // addBall();
+}
+
+function createSofa()
+{
+  let body = physics.createBody(5, { x: 12, y: -10, z: 2 }, { y: Math.PI * 1.023, x: Math.PI * 0.01 }, PHYSICS_MATERIAL.lowBounce);
+
+  let shapes = [{
+    show: false,
+    x: 0,
+    y: -1.5,
+    z: 0,
+    width: 9,
+    height: 2.6,
+    depth: 23.5,
+    rotation: 0 },
+
+  {
+    show: false,
+    x: -4,
+    y: 0,
+    z: 0,
+    width: 2.3,
+    height: 6,
+    depth: 23,
+    rotation: 0 },
+
+  {
+    show: false,
+    x: 0,
+    y: 0,
+    z: -10.3,
+    width: 9,
+    height: 2,
+    depth: 2.5,
+    rotation: 0 },
+
+  {
+    show: false,
+    x: 0,
+    y: 0,
+    z: 10.3,
+    width: 9,
+    height: 2,
+    depth: 2.5,
+    rotation: 0 },
+
+  {
+    show: false,
+    x: -2.2,
+    y: 2.8,
+    z: 0,
+    width: 3.5,
+    height: 1,
+    depth: 18.5,
+    rotation: -Math.PI * 0.4 }];
+
+
+  stage.models.sofa.position.y = 0;
+
+  let sofaGroup = new Group();
+  sofaGroup.add(stage.models.sofa);
+  stage.scene.add(sofaGroup);
+
+  shapes.forEach(box => {
+    let shape = physics.createBoxShape(box.width, box.height, box.depth);
+
+    if (showGuides)
+    {
+      let b = stage.createBox(box.width, box.height, box.depth, 0xff0000);
+      b.position.set(box.x, box.y, box.z);
+      b.rotation.set(0, 0, box.rotation);
+      sofaGroup.add(b);
+    }
+
+    body.addShape(shape, new CANNON.Vec3(box.x, box.y, box.z), new CANNON.Quaternion(0, 0, box.rotation));
+  });
+
+  var physicsItem = {
+    mesh: sofaGroup,
+    physics: body };
+
+
+  physicsItem.physics.velocity.set(0, -20, 0);
+  // const angularRandomness = 10;
+  // physicsItem.physics.angularVelocity.set(
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+  // physicsItem.physics.angularDamping = 0.8;
+
+  physicsItems.push(physicsItem);
+}
+
+function createTable()
+{
+  let body = physics.createBody(3, { x: 0, y: -13, z: 2 }, { y: -Math.PI * 1.013, x: Math.PI * 0.01 }, PHYSICS_MATERIAL.lowBounce);
+
+  let shapes = [
+  {
+    x: 0.5,
+    y: -1.2,
+    z: 0,
+    width: 7,
+    height: 0.5,
+    depth: 16,
+    rotation: 0 },
+
+  {
+    x: 4,
+    y: -2.5,
+    z: 7.8,
+    width: 0.5,
+    height: 2.5,
+    depth: 0.5,
+    rotation: 0 },
+
+  {
+    x: 4,
+    y: -2.5,
+    z: -7.8,
+    width: 0.5,
+    height: 2.5,
+    depth: 0.5,
+    rotation: 0 },
+
+  {
+    x: -2.8,
+    y: -2.5,
+    z: 7.8,
+    width: 0.5,
+    height: 2.5,
+    depth: 0.5,
+    rotation: 0 },
+
+  {
+    x: -2.8,
+    y: -2.5,
+    z: -7.8,
+    width: 0.5,
+    height: 2.5,
+    depth: 0.5,
+    rotation: 0 }];
+
+
+
+  stage.models.table.position.y = 0;
+
+  let tableGroup = new Group();
+  tableGroup.add(stage.models.table);
+  stage.scene.add(tableGroup);
+
+  shapes.forEach(box => {
+    let shape = physics.createBoxShape(box.width, box.height, box.depth);
+
+    if (showGuides)
+    {
+      let b = stage.createBox(box.width, box.height, box.depth, 0xff0000);
+      b.position.set(box.x, box.y, box.z);
+      b.rotation.set(0, 0, box.rotation);
+      tableGroup.add(b);
+    }
+
+    body.addShape(shape, new CANNON.Vec3(box.x, box.y, box.z), new CANNON.Quaternion(0, 0, box.rotation));
+  });
+
+  var physicsItem = {
+    mesh: tableGroup,
+    physics: body };
+
+
+  physicsItem.physics.velocity.set(0, -20, 0);
+  // const angularRandomness = 10;
+  // physicsItem.physics.angularVelocity.set(
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+  // physicsItem.physics.angularDamping = 0.8;
+
+  physicsItems.push(physicsItem);
+}
+
+function createStand()
+{
+  let body = physics.createBody(6, { x: -16, y: -10, z: 0 }, { y: -Math.PI * 0.001, x: Math.PI * 0.05 }, PHYSICS_MATERIAL.lowBounce);
+
+  let shapes = [
+  {
+    x: 0,
+    y: 1.5,
+    z: 0,
+    width: 4.5,
+    height: 4.8,
+    depth: 18,
+    rotation: 0 }];
+
+
+
+
+  stage.models.stand.position.y = 0;
+
+  let standGroup = new Group();
+  standGroup.add(stage.models.stand);
+  stage.scene.add(standGroup);
+
+  shapes.forEach(box => {
+    let shape = physics.createBoxShape(box.width, box.height, box.depth);
+
+    if (showGuides)
+    {
+      let b = stage.createBox(box.width, box.height, box.depth, 0xff0000);
+      b.position.set(box.x, box.y, box.z);
+      b.rotation.set(0, 0, box.rotation);
+      standGroup.add(b);
+    }
+
+    body.addShape(shape, new CANNON.Vec3(box.x, box.y, box.z), new CANNON.Quaternion(0, 0, box.rotation));
+  });
+
+  var physicsItem = {
+    mesh: standGroup,
+    physics: body };
+
+
+  physicsItem.physics.velocity.set(0, -20, 0);
+  // const angularRandomness = 10;
+  // physicsItem.physics.angularVelocity.set(
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+  // physicsItem.physics.angularDamping = 0.8;
+
+  physicsItems.push(physicsItem);
+}
+
+function createTV()
+{
+  let body = physics.createBody(2, { x: -15.5, y: 0, z: 0 }, { y: -Math.PI * 0.001, x: Math.PI * 0.001 }, PHYSICS_MATERIAL.lowBounce);
+
+  let shapes = [
+  {
+    x: 0,
+    y: 4.5,
+    z: 0.5,
+    width: 1.5,
+    height: 9.5,
+    depth: 18,
+    rotation: 0 },
+
+  {
+    x: 0,
+    y: -1.6,
+    z: 0.5,
+    width: 2.5,
+    height: 0.5,
+    depth: 6.8,
+    rotation: 0 }];
+
+
+
+
+  stage.models.tv.position.y = 0;
+
+  let tvGroup = new Group();
+  tvGroup.add(stage.models.tv);
+  stage.scene.add(tvGroup);
+
+  shapes.forEach(box => {
+    let shape = physics.createBoxShape(box.width, box.height, box.depth);
+
+    if (showGuides)
+    {
+      let b = stage.createBox(box.width, box.height, box.depth, 0xff0000);
+      b.position.set(box.x, box.y, box.z);
+      b.rotation.set(0, 0, box.rotation);
+      tvGroup.add(b);
+    }
+
+    body.addShape(shape, new CANNON.Vec3(box.x, box.y, box.z), new CANNON.Quaternion(0, 0, box.rotation));
+  });
+
+  var physicsItem = {
+    mesh: tvGroup,
+    physics: body };
+
+
+  physicsItem.physics.velocity.set(0, -20, 0);
+  // const angularRandomness = 10;
+  // physicsItem.physics.angularVelocity.set(
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+  // physicsItem.physics.angularDamping = 0.8;
+
+  physicsItems.push(physicsItem);
+}
+
+function createTree()
+{
+  let body = physics.createBody(10, { x: 30, y: -10, z: 30 }, { y: -Math.PI * 0.001, x: Math.PI * 0.001 }, PHYSICS_MATERIAL.lowBounce);
+  physics.setAngle(body, -Math.PI * 0.5, 'x');
+  let shapes = [
+  {
+    x: 0,
+    y: 0,
+    z: -2.2,
+    topRadius: 1,
+    bottomRadius: 6,
+    height: 16,
+    segments: 10 },
+
+  {
+    x: 0,
+    y: 0,
+    z: -13,
+    topRadius: 0.5,
+    bottomRadius: 1,
+    height: 7,
+    segments: 5 },
+
+  {
+    x: 0,
+    y: 0,
+    z: -15,
+    topRadius: 3,
+    bottomRadius: 2,
+    height: 5,
+    segments: 7 }];
+
+
+
+  stage.models.tree.position.y = 0;
+  stage.models.pot.position.y = 0;
+
+  let treeGroup = new Group();
+  treeGroup.add(stage.models.tree);
+  treeGroup.add(stage.models.pot);
+  stage.scene.add(treeGroup);
+
+  shapes.forEach(cylinder => {
+    let shape = physics.createCylinderShape(cylinder.topRadius, cylinder.bottomRadius, cylinder.height, cylinder.segments);
+
+    if (showGuides)
+    {
+      let b = stage.createCylinder(cylinder.topRadius, cylinder.bottomRadius, cylinder.height, cylinder.segments, 0xff0000);
+      b.position.set(cylinder.x, cylinder.y, cylinder.z);
+      b.rotation.set(0, 0, 0);
+      treeGroup.add(b);
+    }
+
+    body.addShape(shape, new CANNON.Vec3(cylinder.x, cylinder.y, cylinder.z), new CANNON.Quaternion(0, 0, cylinder.rotation));
+  });
+
+  var physicsItem = {
+    mesh: treeGroup,
+    physics: body };
+
+
+  // body.velocity.set(-40, 30, -40)
+  // const angularRandomness = 5;
+  // body.angularVelocity.set(
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+  // body.angularDamping = 0.8;
+
+  physicsItems.push(physicsItem);
+
+  return physicsItem;
+}
+
+function createSnowman()
+{
+  // let body = physics.createBody(10, {x: 30, y: -10, z: 30}, {y: -Math.PI * 0.001, x: Math.PI * 0.001}, PHYSICS_MATERIAL.lowBounce);
+  let body = physics.createBody(10, { x: 30, y: -10, z: 30 }, { y: 0, x: Math.PI * .5 }, PHYSICS_MATERIAL.normalBounce);
+  physics.setAngle(body, -Math.PI * 0.5, 'x');
+  let shapes = [
+  {
+    x: 0,
+    y: 2.5,
+    z: 0,
+    radius: 3 },
+
+  {
+    x: 0,
+    y: 5,
+    z: 0,
+    radius: 2.5 },
+
+  {
+    x: 0,
+    y: 9.5,
+    z: 0,
+    radius: 1.7 }];
+
+
+
+  stage.models.snowman.position.y = 0;
+
+  let snowmanGroup = new Group();
+  snowmanGroup.add(stage.models.snowman);
+  stage.scene.add(snowmanGroup);
+
+  shapes.forEach(sphere => {
+    let shape = physics.createSphereShape(sphere.radius);
+
+    if (showGuides)
+    {
+      let b = stage.createSphere(sphere.radius, 0xff0000);
+      b.position.set(sphere.x, sphere.y, sphere.z);
+      b.rotation.set(0, 0, 0);
+      snowmanGroup.add(b);
+    }
+
+    body.addShape(shape, new CANNON.Vec3(sphere.x, sphere.y, sphere.z), new CANNON.Quaternion(0, 0, 0));
+  });
+
+  var physicsItem = {
+    mesh: snowmanGroup,
+    physics: body };
+
+
+  // body.velocity.set(-40, 30, -40)
+  // const angularRandomness = 5;
+  // body.angularVelocity.set(
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+  // body.angularDamping = 0.8;
+
+  physicsItems.push(physicsItem);
+
+  return physicsItem;
+}
+
+function createStar()
+{
+
+
+  // let body = physics.createBody(10, {x: 30, y: -10, z: 30}, {y: -Math.PI * 0.001, x: Math.PI * 0.001}, PHYSICS_MATERIAL.lowBounce);
+  let body = physics.createBody(1, { x: 30, y: -10, z: 30 }, { y: 0, x: Math.PI * .5 }, PHYSICS_MATERIAL.normalBounce);
+  // physics.setAngle(body, -Math.PI * 0.5, 'x');
+  let shapes = [
+  {
+    x: 0,
+    y: 0,
+    z: 0,
+    topRadius: 1,
+    bottomRadius: 1,
+    height: 0.5,
+    segments: 5 }];
+
+
+
+  let star = stars.shift();
+  star.position.y = 0;
+
+
+
+
+  shapes.forEach(cylinder => {
+    let shape = physics.createCylinderShape(cylinder.topRadius, cylinder.bottomRadius, cylinder.height, cylinder.segments);
+
+    if (showGuides)
+    {
+      let b = stage.createCylinder(cylinder.topRadius, cylinder.bottomRadius, cylinder.height, cylinder.segments, 0xff0000);
+      b.position.set(cylinder.x, cylinder.y, cylinder.z);
+      b.rotation.set(0, 0, 0);
+      star.add(b);
+    }
+
+    body.addShape(shape, new CANNON.Vec3(cylinder.x, cylinder.y, cylinder.z), new CANNON.Quaternion(0, 0, cylinder.rotation));
+  });
+
+
+  var physicsItem = {
+    mesh: star,
+    physics: body };
+
+
+  // body.velocity.set(-40, 30, -40)
+  // const angularRandomness = 5;
+  // body.angularVelocity.set(
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+  // 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+  // body.angularDamping = 0.8;
+
+  physicsItems.push(physicsItem);
+
+  return physicsItem;
+}
+
+next();
\ No newline at end of file
diff --git a/christmas-cannon/dist/style.css b/christmas-cannon/dist/style.css
new file mode 100644
index 0000000..839f9ed
--- /dev/null
+++ b/christmas-cannon/dist/style.css
@@ -0,0 +1,129 @@
+@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");
+* {
+  font-family: "Fredoka One", sans-serif;
+}
+
+html, body {
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: 20px;
+}
+
+body {
+  background: #eee;
+  background: linear-gradient(to left, #ddd, #eee);
+  position: relative;
+  overflow: hidden;
+}
+
+.page {
+  z-index: 2;
+  position: relative;
+  width: calc(80vw - 80px);
+  padding: 20px 40px;
+  margin: 0;
+}
+
+#canvas-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.spacer {
+  display: block;
+  width: 100%;
+  height: 40vh;
+}
+
+.status {
+  font-size: 3rem;
+}
+
+#loading {
+  position: absolute;
+  background-color: #3A3F69;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 3rem;
+  font-family: "Fredoka One", cursive;
+}
+
+#ui {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 5;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+#ui .positioner {
+  width: 130vh;
+  max-width: 100vw;
+  height: 100vh;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 100px 1fr 200px;
+  align-items: flex-end;
+}
+#ui .speech-bubble {
+  display: flex;
+  justify-content: flex-end;
+}
+#ui #bubble {
+  padding: 1.5rem 2rem;
+  width: calc(100% - 4rem);
+  max-width: calc(400px - 4rem);
+  background-color: white;
+  border-radius: 1.7rem;
+  margin-bottom: 3rem;
+  position: relative;
+  cursor: pointer;
+}
+#ui #bubble::after {
+  content: "";
+  width: 0;
+  height: 0;
+  border-top: 1rem solid transparent;
+  border-bottom: 1rem solid transparent;
+  border-left: 1rem solid white;
+  position: absolute;
+  left: calc(100% - 0.25rem);
+  bottom: 1rem;
+}
+
+#text-highlight {
+  font-size: 1.5rem;
+  display: inline-block;
+}
+
+#next {
+  color: #505050;
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+  text-align: right;
+  margin-top: 1rem;
+  transition: opacity 0.2s ease-in-out;
+  display: none;
+}
+
+#steve {
+  width: 100%;
+}
+
+.game {
+  cursor: url(https://assets.codepen.io/557388/crosshair.svg) 41 41, auto;
+}
\ No newline at end of file
diff --git a/christmas-cannon/src/index.html b/christmas-cannon/src/index.html
new file mode 100644
index 0000000..34efcc3
--- /dev/null
+++ b/christmas-cannon/src/index.html
@@ -0,0 +1,19 @@
+ <base target="_parent">
+
+<div id="canvas-container"></div>
+<div id="ui">
+    <div class="positioner">
+        <div></div>
+        <div class="speech-bubble">
+            <div id="bubble">
+                <span id="text">Oh no! Look at this dull room, not at all Christmassy.</span>
+                <span id="text-highlight"></span>
+                <div id="next">Next</div>
+            </div>
+        </div>
+
+            <img id="steve" src="https://assets.codepen.io/557388/sad.svg" alt="Steve">
+
+    </div>
+</div>
+<div id="loading">Loading</div>
\ No newline at end of file
diff --git a/christmas-cannon/src/script.babel b/christmas-cannon/src/script.babel
new file mode 100644
index 0000000..2388b07
--- /dev/null
+++ b/christmas-cannon/src/script.babel
@@ -0,0 +1,1857 @@
+
+
+let showGuides = false;
+
+// 👆 change to true to see the physics objects
+
+let extraBounce = 0.1;
+
+// 👆 change to 1 for bouncey fun! Change to 2 for everything to bounce out of existence!
+
+let powerMultiplier = 1.2   ;
+
+// 👆 increase for more POWER!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+import { 
+    TextureLoader, RepeatWrapping,
+    Scene, Color, Fog, HemisphereLight, 
+    PointLight, MeshPhongMaterial, Mesh, 
+    PlaneBufferGeometry, WebGLRenderer, 
+    PerspectiveCamera, Vector3,
+    Group, BoxBufferGeometry, IcosahedronBufferGeometry,
+	CylinderBufferGeometry, Cache, PCFSoftShadowMap, 
+	LoadingManager, AxisHelper, Clock
+} from "https://cdn.skypack.dev/three@0.122.0";
+
+import { GLTFLoader } from "https://cdn.skypack.dev/three@0.122.0/examples/jsm/loaders/GLTFLoader";
+import Stats from "https://cdn.skypack.dev/three@0.122.0/examples/jsm/libs/stats.module";
+import CANNON from "https://cdn.skypack.dev/cannon@0.6.2";
+import gsap from "https://cdn.skypack.dev/gsap@3.5.1";
+
+class Stage 
+{
+	constructor(scale, stageSize, onReady, showStats)
+	{
+		const manager = new LoadingManager();
+		
+		this.showStats = showStats;
+		this.models = {};
+		this.stats = new Stats();
+
+		manager.onLoad = function ( ) {
+
+			console.log( 'Loading complete!');
+			setTimeout(() => onReady(), 100);
+		
+		};
+
+		this.wrappingImages = [
+			'data:image/png;base64,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',
+			'data:image/png;base64,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',
+			'data:image/png;base64,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',
+			'data:image/png;base64,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',
+			'data:image/png;base64,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',
+			'data:image/png;base64,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',
+			'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAe6UlEQVR4Xu1dC1SU153/D5FBBZSHziAyKhAFRTARkgbfpmiNqY8mPs6m29h2T3dNT7vbnrZ7mnabrOmebbvt6fs0yaZJm7Tp1jwa0FatmtpoBJtAjAwqJAIGEJnxAcrDCCmz53fH+/E97veYF8zEuedwEue77//v3vt/3f+13bnjaz66kW5JHE/OwqU0tWAJjbNP4D/r/vd6fzc1VH1H+o7ycyq208T0bN0yX01oUXxr942nnT79/KadMMmw1dZJLtv7mlzVvnTCnzwtsnVTka2XJtMHQTf7PiXQc8M5dJXG6daBdvAnT6L+qCv4YPAaNR98gvp6zkuffrLxk0TJmfScL8e0z72eZmqv203XejqlvDY5APiv9onplL1gFWXmlplWeqmlls4ee8ESCGbY3qcttpHGUahhOIX2kcO0nWAzrLRdolLbFU3xymEnnaFk6fdbqZ82JniCbUZRrsGXQvt8+mMKBgAg/jsHn1QQb3v5SlqeX0DXKYF+NjzLcKF21h+gy621mjwMAAmJ49mH4SHlSklx5JGrdL3hikY5MxAk0TAjAv7w//J0yJdJdb7JYZl4USVob6OtS7EL6K1+9aoMtlPBAMBoHoyIjz4a7aLn3QfI03iE/q6iLWgOejMAgNCzyrdSZ/1+utxapxl3Rm4ZuUrXGR4LeiCoyJggJDwaAXL/d3gG++9oJAcNkpfswqaKqJfuSbgQcjcwlp3D2brtoIENti6abRtQtIVjEIRUJzPiI/9bvsn0F1+momhPx0lqr91FgwPKo8aenEau0g000H2OzrsPjgCgoGI7qwDnRKf7APV5lWc15w+mFa/SnSQ1CCYk2unR1RtoZrqyc7yCfb6p1OBLDXnSw1UBdoD5tl6aRB+wM/yKT/8cR5tXaBxdpUTV9p9qeP4js4gvAd+gBqcV4qO+p3wzpL6CLztbs1NDP6x4Z+ESyi5ezfrb6d4vBgAfDYjZVrdLcyyAP3CVrae0nCLhvE/qqKWamkp6f2hQ+s7PqtHc+sMFinDXgyPpiwlnNdX+YDhP8ZuI+JvLV9N9+cp8nIdCfmz33qbXBTt4KWWXrKak5BGm1xQAqAWVepuOMKSoEz82eKXgnhdRN022fUDvdV+iHfur6JoABNjmDtEU8vrEW3G4Jzza6hMdNe/6JlKVL0vqqoj4C8s/QV/Ld2qGg9Xf0vI22+7V5/yEtGmMh0t15mvKWQIAL4Vtpb2uiq50nNJUNKfgI7S9pISmJd2i+CYCAQZhyy2PNpqMan8eTOgg8CLytHd4Kp0k/1EoIv6su7bQQ/nZBClKnv50vpterjuikAzwHdv9jNL1lJmnL8UFBADeqF+O3EXXZHIovk1MtNOmBXfQPYXFGhD85/4qxXGAwRh1zAo1brX100q6xHYbnNNVlBUTOwr0ETj/5UkuwukR//b8+Qrx2dvXSy/X19LhlibNdDkKlhD4NDM9TlAA4K1BrLjo/rOCsPg2NTmVti9aSfOc2YwRgrj1xuVeajr4hIKXCBYEWAF30WXNSgAIsBVGexIxf1xk1CM+Fgt0J3z1g/B7TtfTgOx4xbjVR7LZXIQEAMjzdw510kv1tbSv0a1pa0ZOAU0qvU9iOga6O0MCgR7h5Q2rmSizCRjt76LVjz5ADL48OKRR8vBFwpVnte1n6bnao3Shv1fRdS7W6THleuMMCQCfs7Wx7RcJ29Hj1X+hRu+IepI3ml28SlIrBwMCK4RHW5HWJoYDLHqr/4/XU3WJj3YrBhppV/VeOq2aX7VYF2gfgwaAwzZID9o6FO1hu/9R21VqqdtFg/09im/QH0BshFrZKgjQxgq6qNnq1YPE+QktIv5GS5kU6EQjv97q/8X7U6n24NMKJo6vfBwJfe691Nx0TNNkVt7tNKV4jUKsC7RflgAAXQB0yPaUdEpzzadURx6VZEymjTalzlyuWkXFnsbXNfqDCWnZTJt4i32C7nGAXaWc/MoYs4RVX2PLMFXWmNUzGt9Fq//VywP03F93KzR1nPiXWmuFYh0UaksXVtBpZ6lut7HIer0t1NfVTL3eZiYGiphuSwB4+8VHNLKlPTGJ7nLNoqKsbCp0ZJMjJZVe8GVTm0yNCfRCWtBTK6e7iqi1ZqcCJOvK76EH8mea0iOWCK+3+iEif3P/bsXcgvj25HSNtQ51QKO6rWwx3ZU/V6M6h4je522mq10tdKWjQUMvlC994H8082oKAIh877z6pClBZqRlUqJzNpGzQKMdBBoBBJFaOdWRTz3nTirqF2kMeYZYIzzvt3r1g/iP7t9F14euS2OfVlxB1/t6hNa6NYXFtKmkjJLtSRKvAz0/6NPradHoAEQEu3fZJspzzWafoL4+40umVvdBY1UwRwgKgeEYZx+vOd9FjUEc4ccF9wtgR4l7v6XyahDEKuFFqx/Ef2x/lUKEg2r970PXNCs3zZFLOxYtYjssytW2t1JtVxed9Sr5LxENkhLtlGy30+X+PvYZIMIOwhP4pV+cOEFvuI9qjUE8E2R3vnIzckspt3wrYbuZ3XGU2jzv0SnPeYWqV9QRMIBY6Wkzigg8QE9Hg5A/UJcFCPLyFlANZSiOFtPtKMoyyFe/iPii7kKscxQspXFJE2hK+xt0ytOpkflF5Qod09ixfIcrjxnfXmtuoidqDrGs2KW/9/HNimIv1b9JL9fXiQGAM/zES49KBfKXbZO2d7lHDzpX0+Who+1tGu2gcHAT0ykrw0EXPa2mgwpWWRQtGJBz/laJj75jR1CbcEVjmpKcQmWuXCpyTqe5zmnsiJAniOf/Vvm89NMvt3xGkUcBgBkOF02t+KKUGWdM8+FnpX8v2LSDqRZFlizujMDEFm8LO5uw0tXiYDCEiWUQ8NUfCPGN5giMYBmYb0ZwP/Ntlr7+pxfZ8YH0leVrWHmeFADA9nH/qn8k2OeRwLhxsyIsSvPWftm/lQhcuvR82Rh36mmm7o4GxqyovY3MOs+/xyII+OoPlfjgp+a6bqX7sybr+lQYzePjb9bQ4aYTLIsr7za6u3wdwUUOC1kDADhuwDkDrknH9/xU4i5hXIAsiQQjjJEOwKgzt3c3UPe5k3Syq1OoNTQqG2sggMePvaddw/CZgR6LDaZb/MlVu1h4a2xe5qiil7ATX6Ak5lQCJxWI5fKdHEdL8caHCUo27E676/82wgNgBwAAkE73XafHKn8ltSM//0XOjGodgKiDop0Duu3DXV5qADOpsi6K6pjz0X8R2rXNJnUsvn9s6D36ceVTpnwOGL4URz5NcubT5JwiUwseFqDclAxig+h6nktqXm7+hoeZ9hAgsLsrqaq+1s8EygEg5x4xeXIlwhry0vwEv2jBE9yRzZw7ROXkjoz8uLjqaWZKDRH/AFmZuzONBVEDafMWTxO98erTmiIQp1OdeUwywio3cp8PpD2jvHJpTr6TXnHvpTPuQ1oA/KL6L3Sk5R1W5yRHLs2ueEiqX6TSNLPCQb0L45E6Ge0cTJ0JRYe3mTmhYOIghgZq8QrXJAZaj99//3Hq6+milLQsSmVqdD/RRzvJ9TmTc+bRrcs+zbqg0AQWOLLpP1f7z/l/feV5yeS4pvhOulp8HzO0iAgJIxDMmUYJpmMwHvIU6csgoz3J0dyeXKMLvcxtmx/TAiDdMYt+tHotdXVfIIgOPH333s2UlT6VPD47OW2DGp9+K2ZYkQt0pc/J1JFGiTM8Rjdsonnio6lvx198RJLC5t7zJXb0aGwBS1d9ltIa99L/1R1lfYfc+czWzxqOwwoDCA9Y9WUQ3GIxMt+C451v8/MakEy4eBpNkxpLfTlz+NeSP2fOwnXs+p/QGNR++BnydjSysZXmzKSvrrhHd5yiywjqzCLFERhGo3tsoita8JrFVatotvlHMyDgwtfx1m7WRc4HCAEgN/9+qnQRrZ1bIhyXla0fBYO5C6h3QwfAwe2ZOAiMoYZFp54jMNWn9/5YKgjJTgMAuG/Jzb/bNn6eFiaPYzIjT1iJxynNsoEmGMURBvDPCW2aYwN9iIPATwnQZCpdZzoB/FfEnyEflEEdNIHaaQLtqfyhJF5DpwIJS3E1DPIpvwACBUXxhm+EvKuJFEdWroNhYFsTOm96EGAxyImNQ1C+IAMh0M+qD1H1DTdy6FSQFADAD2rzbyANiPLebbtEC1VXs60wjgzlJiCo9GWZ3sELtf+jWR5iNl/RU31+QnPH23D0Q67gy0hzUpKrWAkAuddOuHTvIsWRmQQgHyxWAHYC9U0a5EEghhdMbuGGY+Ks1IF+Qtfhsl1jwSVwVNb4MgxvCPN6URaisvrWj5V2A8mjNg/fVXA7HWs67tcEqivi5t9AGhDllbuP8+9mmkN1PbEAApGuA65XuPFrxrSK1OTBzLv6arkoKsoXX/ktXbzhJQQnkbaeS1oAyM2/wXREXkYdDsZMBNRrL9pBoB4nH4fenX/5OPVC2OjNBb+2DsbOzBiEYwRiNb/y/mztUc1FHs0OIDf/hgIAkeo4FBWwGQhwu1YUYCGUMVgtGwoARJISbxcLBjsJLH7g5qGRNdtR9PoMhtzW8Tb99LW9iiwaAMjNv1YnQJRPpAOwojwyatN/1l6UtITqvFZWXChj0isr0nYiryjog6gOgAD6j15KlAgud7MPV5+Th3rp8IvfNgZAxeZvUndi6DF7sO2ssSlDrliJhGVlsHJVsTx/KDuMlXb18oi0l7itBOeaaEuNe35I/T1dUrcUOwD8Ar6++hNM42Zm4zcbmEgHYMUIZFYv/y4CAc5ErLqxSDBeuegajbcNU7vPfz5HY5Kbh9E/BQDuLymlTSV3sHMmVBCIuFurOgCrE6cGgTzQgtU6brZ86gs/CgB8a9V6drcfKVQQBOM8EgwxIO5g5YErHismMJh+R7IM9CZJbCfSRh1Du3W/+3ftESAy/4YCAhFjFKgOIJKT9GGtW74r6tlO5OZhaQeYk5NPO1ZoQ8AFC4LRDgn7YSVoIOMSXUMXBaCUm4clAMBRYFthgcbpM9jjQH0EhEsCCGRCbra8IsZYBAC5eVgCAHcV0lNNBroTMJmdLjKDBs5ndWDmm404kR6vXvxB+GyK3Oq4mxgDgNr8qwcCdTy7SA8qXr/1GRA50hjpRRCfAfEbGAD47V95c2a+/Na7Fs85GjNgFn9Q3Qce1te26ulf+WbdtVV4K0UNgnAqckZjUm6WNqCEgheVPFkJxI07oLaH3vVpzMHyirglCcaISOinbxYiRXKcojcRzELW8/6YAiCSHY/XHZ4ZwOpXXxy1ahgLKwDQCR6+NX6hIzzENatFZIiycmMrrDuAyK0pLjGYkS4830WyfyA6l7DsACLLH4YXN86Eh8h6tQQq+4vqCQsA9NyaotUmHlmyjF7tgcr+cQCMHm1GpaVAZf+IAUB0BTx+BEQWA8HK/upeheUIQKVqZiS+/UcWACLu36rsL+9Z2ADAK+UvbkV2+PHa4fSBI0CerMr+EQVAnDSjNwNgAu9O8EdfgegXzAOcYd8BRm/48ZbCMQNxAIRjFmO4jjgAYph44eh6HADhmMUYriMOgBgmXji6HgdAOGYxhuuIAyCGiReOrscBEI5ZjOE64gCIQeJBDYzX2uFuf9KXGnTMAAw9DoAYA4DaBgA/TVy6DTbFARDszI1ROVE8IquBKERdDhkAMP7AHIyAhQhlcoaS47d0IwiOUDyAww4AkU0ajQRjlYrgnH2oqhZZAREy7+fDIw9CBTLgkHYAPV/AYOzSgXT6Zs8bDk8gPochASDaYvXcLMAQ+QIGywyGBID4DjA2kNMLqK13E9iolyEBADzAtoQOTVDnOA8QeWCIdt9g3PBCAgCGCRDg/iCP04OnYKI1QlbkyTJ6LYSLGQwZAKM35HhL6hkIBzPI4gPoRQcVvT4RJ0P0zEAozCDeajy950fi18Pld/1wzxxxZvB4UzxF1wyEwgwqnozBsPgLoSwos61T8TIFQIA4//EUfTMQLDPIXxQdCRN3423eLbZO4eMFVp6Ijb7p+fD3KFhmkAeLlACAMPGfKytnHL06BRvn/8M//dExQhEzWDnsZHYZUZK/Kj4CgDQH/eTj92nyI9jAsxZevpAXRJCIhXSF2alPUqru69bRMX2x3wsRMyiKD8hHithA3qbX2T8VsYJ/ueUzlGxPkmYk0NiAKAjiP2gbUQ5ZCVYU+yQY2xGAb4NCjoeJwZxj0epFaTm158d0radTC4CvLF9DZS4/sxcM8RkzKXgs2spTcWM7hbHfOlfIAQzQCOoRHy+bn3jpUWnAih1gTWExbStbHDTxUWswj0XG/vTHzgh4fEDeYwUApian0vc/8amQ3grAQ0U4AuRprF7yiB2yjF5PeYRQIQDw470bv0RdE4P3MUMd6kjhV3zj6CnfjNEbZbwl3RlwV36HBge6xUcAfg3Ho5HYAdRPnMbfChh7VEL921D1HUVHNK+GieIGB9p1oeOiLyfkd4jU/UB8/IXUw8zRcI+GyBlP+jPga62ht2pe0QIgMTGJhoausw+3JI6n2zY/FtI8RvrBKD1pI+6HoE82KPgaXnuO6jreY5nwQsy1oUG/HmByzjy60nFKKs3fDggWBZGUBPg7vSKNZSABEoMdm145db/w4OOh4UxdbRzq4WVm2/r9j0L6EuiCLYl5V8PRMxxvIEEvU07dTMP7TzufoYGhQTaE0pyZDAwMAHhO3NP4Og0Pvc8+4vUQZ+HSoOdIJAmEI3IoZN2Nti7dJ9THcgcQGWVARPjs68nkoqNSPelgoPnrodDN4DYQfz7WiECgATSEIDyA9l73Jfr6n16UVv/aucX0cv2N9wIAADwjwncB7Ai3Lvt00ABAwXC9G8w7gRsxaxIu0HgaFvbLSPUZ0kAsFg7m+Vi9F0ctNsl4KoAMkdyRsEAm0RB7wVz99Pye0/X0m7pqafX70l30lvv1kR0gKTmDzh57QWqbm4etdkadL5ySgJ7zKdrEqkBIWj3DR7D9D7ScHgCMwuWG6+VwK33dsb+KGr3nWdbF5euppW+AzrsPjgAgM+8OhYgw54Z52Erlojyi8LGBmpSxdWFrnW0bEHYDvof7hh1R4YMossih00bXtvi7SrMTBjSOtcHOu165f/jtE9Kn+RsepkstbyoBkF28mtxV/02D/T0so6v4o1Raspw5e4IpwWTjPLKaQpUEYOcG8dX6BN4+eIp9PkdIN2OtjsVKPvR3a0KngpCBMKUAg9M2yLZwbOW4aoetXG/8VvrE8xzt8tLPD/6B/ZO/D6XwCAIPAADI1YQz0jLpex/frGgHbmE1lG4JCKE8Hh3t573e5IOInGDg6MPlHY3zHGDIwdvENMzAgXbQnl4CfwC9CI7Ghto9kvmX63mEAPB1nKC3Dj8v1ak2D/Mz18q7wqLn461IAqLLj7xDOO8rfVlhEY8CWUHRnBfzLE9MnKQExW9y8y93ANYA4LaSFbRuqJU+/8LTUmG5eVheI44CnOfqhtQTFahNQBT/lteJ1VQ5nKUrUkUzkcayb2rz74JNO9gDYQoA3Fq8kv5jwVy2pUBWhMyIxM3DogFYOd9EkoARI6iWi/sHr1Ndx1nq8I2nS7nLTQE3lhOtbhuvdA/0nKe0nCJKSk4fs67J3b8mpE2jeWu/zPqiAMCa4jtp24KF7MOztUdpX6Ob/X9Gcip9cuMX2Jmj5sStWPhEYo6RvA5nkqwLDfRmWwud7Oqkth4/EJFCVU6NJgXkT7OiXfvEdEpx5lO6q4hSHHnCJ/oi1T85Xwe/T1fpei0A7i8ppU0ld7APpzyd9O0Du6T+QGQAgkWrGSZeI8lApBJWAweT1ettob6uZuo5d1J3HjijGqmJCme9WP3vvPqkbpUT0rL9YHDmU6ojL5xNa+qSm3/lor1iB5ADADXIZUZuHhaJdYhNY/aWoFrb5e3rpT96rlBdVxdd6Wigv99QPxvNArauORXbR3XlhEoVteOFUX1p04soJcsPhonpofliyNtRm3/lyj2v+8/U7n7VrwiSAwDiw7cO7Kar3lb/MZBbSrnlW4N29QJw7OeO06muc5pt3cokxyLx+bgCAQEvw4+LSVl5NHl6UUigl7t/4egpqNjOmgGvN8n9B9rnfkMJABAfIl5b41HqeGs3y4wOFW98mF0WwaUReWoYTqF95NDQ0W9XOElXPc3U522xQmdhnlglPowwixK6mXXvh9Wv0XutJ0KYg2xKdeZRqjOfMZSBpDOHfy3Zd+Q8FI7zw+6jI8Yg7ADrSj4i+QKqmRhuHlaLddzXD1tNn7eZetpOUq+32dK2bjaQWCU+nFSgBpenLx39G3laj5sN2dL3OY5sKpuRR1MdMyklPZuJxbAQQiTHApant198RKIFp+Ea2wVmIXyp/s0RAGwoKaPB4o2KCvj78qiQo4c/UQrx7LT3PL3Z1krHurwKHzPRKBISx9McZzatcM1kTGZte6tklxblj1XiYywiXgl80veqj7Dn2o1SRm4ZJaWkMctsr6dFMs/rlZmYaKd5zmy6Y0YuFTqyyZGSKlkIj3dfpd/veYYVhZPP8i2P0ArfRYLdAUkBAOgBJhffo2hHvn3APOwsXEazvG9TY9u7CvFMr3M4c7B1peXMZ4xNf0cDeeteocv92qtn8jpimfgYh2gHwO84Wg9XV5mCAEdu9oJVlJlbRrd4m2ia9wQ1dZ2TLHlGAIJXN+51zMuaTmcvX2ArHAnOH19doaSvAgAiEUvtP262P8HIAGLjrJLLujgeztbs1PAC3CVJXu/M9Ez6TMUWOmGfZipdmPVnLL+LLKE8iJOIMcQOyZ1xeL8xhw+ULKSVWVPYT2zX9Zynk55zbAe92N9neYjby1fS8vwCRX5TAIg8SBUrNdHO0JbknENdjmKNtgsqyPPuA5IRQl52Xk4e+QavsWOEJxD/W6vWS1fTMGHHKCMmgaAXP5H7BqhBADEwwT5euDssyyugB8sWKa7sYc4gTp/2dN4AxFnm36eXfrLxk+x4kKff19dSVX3tiD8ArIHqxO+Q898zHbNorSubirKmEwiGJJIELrXWUnvtLg0ziO0dmqiLLXV0ubVWl/jyfkBxVE3pzOs3lpLIRQyuXU8N++9HqEGA899ZuIRwcVMtOeGsXzu3hArmr5CkLlgDYRmEhXCSb4j6e86Tx3OWjre3KI4L0Om79yqtumAcv3/iJJ1xHzIGAFYxjoKklAxJBNGTBDAoaMDa63ZLFw85wbDFZRevYn6GrTUvKIiflTaF/mv1Og3C1cSONSDoRVCTq8JFIMgt38LmvNu9l66o+KUJyWmUXbrBVByEyD7gOcOYyaV5BZRmT2TTCfexZkqmd33J1Oo+qHUIsbLCuCTA80L8+EHvZOqsP6AgLP8O/fO04lVMoaEmPmf4MpMSqdx3meYnmJ9raA+XH/FnZo20Mp5I5hFJBCACdgHedz0QLBo6R51Nr9Oe027N9g7+ADtpKFpDoT+AlclQMzgv19dS5Wk3fXDjXgGvQ91JPeIDGDwxF+YPERD0YvioLakiEGxa9DGCbwTOejBsR1re0ZBHvris0E6eJ2gA8Ovfte1n6bnao3RBtU1BGnCptikrxJd3DkCANg1tGXm9oEyw19gDnbBg8+s9rK2O6qkGwdTcUvrpYr+BDgn6E8w3N9Xz3yHjTytZTc6CJQF1MWgA2AcuUk/1bxQcPFqGWHd34QLKLFxGZxJhQPZ7pQRKfPkoQHxMoBkQ9FTSAc1IBDOrj000JQqorQZBcW4RfWOx8n7GvuYz9JvakTscvNvQH8wq38LEcCspYAAYiXVQNDxYtkQSNfg5/fvq/XRBpv0KVskDIEB9CSDwKBjyQVpxNbMyKZHKo+fpJPIYVoNgcV4hfWHRCkXXdl1Ppb82HmdMnDpBpMwpW2/qhBIQAPTEOogYD5YtZupIdXq8+hAdbmmSfg6W+Op6AQQwV/JwKFW+rKjXFxgph9RjVIMAuoCHFq2UsvGwO1f7r1B7XZXiWh/PBKlrasESXWuiJQCYiXWQTUEM9TmtJj6AsqniATpun2bJo9jKSoSzCVyxYyUIlZGKWHQH0AwEckYSdDp7bKfk0i/nD1xl65laWZ0MAQAtoBWxDpWqt2cR8eUavkBcy60AIZbyiO4CGh1fRiAQBd/yNB6hTvcBjVoZHkiu0nUK/kAXAFDfoiK1p44V2bPn2PPU3DJi+1ardzmxbtbws3oqYqM4/0YgEDG/RrwatI3ZJasYf6ABwMT06Ux9Kw8fAoKJxDrRqlNz+9PSptC3TTR8lT4nIbz8aCRMPsRL2MzHUoEUTGhXIxDo+WXqGeEgNkIjC6AgViBzCcOP6hUP9S10046CpYZuSajonYNPKtS/nOHLS7JROV1mJlJRGo0YgvLA17wPwTysEC6QingBK5FY9UDw7vBEqqIs3e7BLRyMIr/yp86oCRGDDLD/Q5ljxZ9dfusEZUXcPnTTt1OP8JJnpGMI6r1rZHRrN1zE1qtHdC0cwbjNdibvsd9Re8vbUrVcOrDinIstXx4DgleiAAC31llVJqjdn81EPZFWLNJKHJH4hcFbudgiIqDebsbzWjliRMyg1eAWHxz7NZ1oGYnmgttb46fPF/pmqvuP3RrWRrln0v8Db10kSsHC7+UAAAAASUVORK5CYII=',
+			'data:image/png;base64,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'
+		]
+		this.presentTextures = [];
+		this.presentMaterials = [];
+		
+		for(var i in this.wrappingImages)
+		{
+			var presentTexture = new TextureLoader().load(this.wrappingImages[i]);
+			presentTexture.wrapS = RepeatWrapping;
+			presentTexture.wrapT = RepeatWrapping;
+			presentTexture.repeat.set(3, 3);
+			
+			 
+			
+			this.presentTextures.push(presentTexture);
+			
+			this.presentMaterials.push(new MeshPhongMaterial( { shininess: 100, map: presentTexture } ));
+		
+		}
+		
+		this.boxGeometry = new BoxBufferGeometry(1, 1, 1);
+		this.greyMaterial = new MeshPhongMaterial( {color: 0xeeeeee, shininess: 30} )
+		
+		this.container;
+		this.scene;
+		this.plane;
+		this.renderer;
+		this.width = 0;
+		this.height = 0;
+		this.lookAtHelper;
+		this.stageSize;
+
+    	this.cameraTarget;
+    	this.camera;
+		
+		this.scale = scale;
+        this.stageSize = stageSize;
+        
+		Cache.enabled = true;
+		
+		// SCENE
+		
+		this.scene = new Scene();
+		this.scene.background = new Color( 0x424874 );
+		this.scene.fog = new Fog(0x424874, 100, 200);
+		// this.scene.add(new AxisHelper());
+		
+		// LIGHTS
+		
+		this.scene.add( new HemisphereLight(0xfefeff, 0xeeeeff, 0.4 ));
+		
+		const ambientLight = new PointLight( 0xffffff, 0.1);
+		ambientLight.position.set(20, -10, 20)
+		this.scene.add( ambientLight );
+		
+		const shadowLight = new PointLight( 0xffffff, 0.6, 100 );
+		shadowLight.position.set( 10, 0, 4 );
+		shadowLight.castShadow = true;
+		shadowLight.shadow.radius = 16;
+		shadowLight.shadow.mapSize.width = 2048; 
+		shadowLight.shadow.mapSize.height = 2048;
+		this.scene.add( shadowLight );
+
+		this.cannonLight = new PointLight( 0xEDB458, 0, 100, 2);
+		this.cannonLight.position.set(28, -20, 28)
+		this.cannonLight.castShadow = true;
+		this.cannonLight.shadow.radius = 2;
+		this.cannonLight.shadow.mapSize.width = 256; 
+		this.cannonLight.shadow.mapSize.height = 256;
+		this.scene.add( this.cannonLight );
+		
+		// FLOOR
+		
+		this.plane = new Mesh(
+			new PlaneBufferGeometry( 1000 * this.scale, 1000  * this.scale ),
+			new MeshPhongMaterial  ( { color: 0xDCD6F7} )
+        );
+		this.plane.position.set(-10, -30.5, -10);
+		this.plane.receiveShadow = true;
+		this.plane.rotation.x = -Math.PI / 2;
+        this.scene.add( this.plane );
+
+		// RENDERER
+		
+		this.renderer = new WebGLRenderer( { antialias: true } );
+		console.log('pixel ratio:', window.devicePixelRatio)
+		// this.renderer.setPixelRatio( window.devicePixelRatio );
+		this.renderer.setSize( window.innerWidth, window.innerHeight );
+		this.renderer.shadowMap.enabled = true;
+		this.renderer.shadowMap.type = PCFSoftShadowMap;
+
+		// CONTAINER
+		
+		this.container = document.getElementById( 'canvas-container' );
+		this.container.appendChild( this.renderer.domElement );
+		if(this.showStats) this.container.appendChild( this.stats.dom );
+
+		// CAMERA
+
+		this.camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 5, 400  );
+		this.camera.position.set(55, 15, 55);
+		this.cameraTarget = new Vector3( 0, -22, 0 );
+		// this.camera.position.set(65, -20, 20);
+		// this.cameraTarget = new Vector3( 30, -25, 30 );
+        
+        let center = new Vector3((this.stageSize.left + (this.stageSize.width / 2)) * scale, (this.stageSize.top - (this.stageSize.height / 2)) * scale, 0)
+        const previewCameraDistance = 70 * scale;
+
+        // this.lookAtHelper = this.createBall(0.5, new Color(0xffffff));
+
+			// let stageSizeHelper = new Mesh(
+			// new PlaneBufferGeometry( this.stageSize.width * this.scale, this.stageSize.height * this.scale, Math.floor(this.stageSize.width / 5), Math.floor(this.stageSize.height / 5) ),
+			// new MeshPhongMaterial ( { color: 0xaaddff, wireframe: false} )
+			// );
+        // stageSizeHelper.position.set(this.stageSize.left * this.scale, this.stageSize.top * this.scale, 0);
+        // stageSizeHelper.applyMatrix4( new THREE.Matrix4().makeTranslation( (this.stageSize.width / 2), -this.stageSize.height / 2, 0 ) );
+        // this.scene.add( stageSizeHelper );
+		
+		// ROOM
+
+		this.lights = [];
+
+		let colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff,  0x00ffff];
+
+		for (let i = 0; i < 3; i++) {
+
+			let group = new Group();
+			group.position.x = 1000;
+
+			let color = colors[Math.floor(Math.random() * colors.length)];
+			let light = new PointLight(color, 0.5, 50, 1.7 );
+			// gsap.timeline({ repeat: -1}).to(light, {intensity: 0.7, duration: 0.2}).to(light, {intensity: 0.5, duration: 0.2}).to(light, {intensity: 0.8, duration: 0.2})
+			group.add(light);
+			
+			let geometry = new IcosahedronBufferGeometry(0.5, 4);
+			let material = new MeshPhongMaterial ( { color: color, wireframe: false } );
+			let mesh = new Mesh( geometry, material );
+			mesh.castShadow = true;
+			group.add(mesh);
+			
+			this.scene.add(group);
+			this.lights.push(group);
+		}
+
+
+		///=================
+		//    SOFA
+		///=================
+		
+		let sofaGroup = new Group();
+		sofaGroup.position.y = 1000;
+		this.scene.add(sofaGroup);
+
+		var sofaLoader = new GLTFLoader(manager);
+		sofaLoader.load("https://assets.codepen.io/557388/sofa.glb", object => {
+
+			object.scene.rotation.y = Math.PI * 0.5;
+			let mat = new MeshPhongMaterial  ( { color: 0xffffff } );
+			
+			sofaGroup.add( object.scene );
+
+			object.scene.traverse( function( child ) { 
+
+				if ( child.isMesh ) {
+					child.position.set(0, 0, 0);
+					child.castShadow = true;
+					child.receiveShadow = true;
+					child.material = mat;
+				}
+				else if(child.isLight)
+				{
+					child.visible = false;//child.intensity = 0;
+				}
+
+			} );
+
+			this.models.sofa = sofaGroup;
+		});
+
+		///=================
+		//    TREE
+		///=================
+
+		let treeGroup = new Group();
+		treeGroup.position.y = 1000;
+		this.scene.add( treeGroup );
+		
+		var treeLoader = new GLTFLoader(manager);
+		treeLoader.load("https://assets.codepen.io/557388/PineTree.gltf", object => {
+
+			object.scene.position.set(0, 0, -17);
+			object.scene.scale.set(1.2, 1.2, 1.2);
+			object.scene.rotation.x = Math.PI * 0.5;
+			  
+			treeGroup.add( object.scene );
+			treeGroup.position.y = 1000;
+			
+			object.scene.traverse( function( child ) { 
+
+				let mat = new MeshPhongMaterial  ( { color: 0x99dd66 } );
+				if ( child.isMesh ) {
+					child.castShadow = true;
+					child.receiveShadow = true;
+					child.material = mat;
+				}
+				else if(child.isLight)
+				{
+					child.visible = false;//child.intensity = 0;
+				}
+
+			} );
+
+			this.models.tree = treeGroup;
+		});
+
+		///=================
+		//    FIREPLACE
+		///=================
+
+		let fireplaceGroup = new Group();
+		this.scene.add( fireplaceGroup );
+		
+		var fireplaceLoader = new GLTFLoader(manager);
+		fireplaceLoader.load("https://assets.codepen.io/557388/fireplace.gltf", object => {
+
+			object.scene.position.set(0, -29, -19.5);
+			object.scene.scale.set(4, 4, 4);
+			object.scene.rotation.y = -Math.PI * 0.5;
+		  	fireplaceGroup.add( object.scene );
+		  	
+			
+			
+			object.scene.traverse( function( child ) { 
+
+				let mat = new MeshPhongMaterial  ( { color: 0xffffff } );
+				if ( child.isMesh ) {
+					child.castShadow = true;
+					child.receiveShadow = true;
+					child.material = mat;
+				}
+				else if(child.isLight)
+				{
+					child.visible = false;//child.intensity = 0;
+				}
+
+			} );
+
+			this.models.fireplace = fireplaceGroup;
+		});
+
+		///=================
+		//    TABLE
+		///=================
+
+		let tableGroup = new Group();
+		tableGroup.position.y = 1000;
+		this.scene.add( tableGroup );
+		
+		var tableLoader = new GLTFLoader(manager);
+		tableLoader.load("https://assets.codepen.io/557388/table.gltf", object => {
+
+			object.scene.position.set(0, -6.3, 0);
+			object.scene.scale.set(2, 2, 2);
+		  	tableGroup.add( object.scene );
+			
+			object.scene.traverse( function( child ) { 
+
+				let mat = new MeshPhongMaterial  ( { color: 0xffffff } );
+				if ( child.isMesh ) {
+					child.castShadow = true;
+					child.receiveShadow = true;
+					child.material = mat;
+				}
+				else if(child.isLight)
+				{
+					child.visible = false;
+					// child.intensity = 0;
+				}
+
+			} );
+
+			this.models.table = tableGroup;
+		});
+
+		///=================
+		//    TV STAND
+		///=================
+
+		let standGroup = new Group();
+		standGroup.position.y = 1000;
+		this.scene.add( standGroup );
+		
+		var tableLoader = new GLTFLoader(manager);
+		tableLoader.load("https://assets.codepen.io/557388/stand.gltf", object => {
+
+			object.scene.rotation.y = Math.PI * 0.5;
+		  	standGroup.add( object.scene );
+			
+			object.scene.traverse( function( child ) { 
+
+				let mat = new MeshPhongMaterial  ( { color: 0xffffff } );
+				if ( child.isMesh ) {
+					child.castShadow = true;
+					child.receiveShadow = true;
+					child.material = mat;
+				}
+				else if(child.isLight)
+				{
+					child.visible = false;//child.intensity = 0;
+				}
+
+			} );
+
+			this.models.stand = standGroup;
+		});
+		
+		///=================
+		//    TV
+		///=================
+
+		let tvGroup = new Group();
+		tvGroup.position.y = 1000;
+		this.scene.add( tvGroup );
+		
+		var tableLoader = new GLTFLoader(manager);
+		tableLoader.load("https://assets.codepen.io/557388/tv.gltf", object => {
+
+			object.scene.scale.set(2, 2, 2);
+			object.scene.rotation.y = Math.PI * 0.5;
+		  	tvGroup.add( object.scene );
+			
+			object.scene.traverse( function( child ) { 
+
+				let mat = new MeshPhongMaterial  ( { color: 0xffffff } );
+				if ( child.isMesh ) {
+					child.castShadow = true;
+					child.receiveShadow = true;
+					child.material = mat;
+				}
+				else if(child.isLight)
+				{
+					child.visible = false;//child.intensity = 0;
+				}
+
+			} );
+
+			this.models.tv = tvGroup;
+		});
+
+		///=================
+		//    POT
+		///=================
+
+		let potGroup = new Group();
+		potGroup.position.y = 1000;
+		this.scene.add( potGroup );
+		
+		var tableLoader = new GLTFLoader(manager);
+		tableLoader.load("https://assets.codepen.io/557388/pot.gltf", object => {
+
+			object.scene.position.set(0, 0, -15);
+			object.scene.scale.set(6, 6, 6);
+			object.scene.rotation.x = Math.PI * 0.5;
+		  	potGroup.add( object.scene );
+			
+			object.scene.traverse( function( child ) { 
+
+				let mat = new MeshPhongMaterial  ( { color: 0xB2967D } );
+				if ( child.isMesh ) {
+					child.castShadow = true;
+					child.receiveShadow = true;
+					child.material = mat;
+				}
+				else if(child.isLight)
+				{
+					child.visible = false;//child.intensity = 0;
+				}
+
+			} );
+
+			this.models.pot = potGroup;
+		});
+
+		///=================
+		//    CANNON
+		///=================
+
+		let cannonGroup = new Group();
+		this.scene.add( cannonGroup );
+		
+		var tableLoader = new GLTFLoader(manager);
+		tableLoader.load("https://assets.codepen.io/557388/cannon2.gltf", object => {
+
+			object.scene.position.set(30, -30, 30);
+			object.scene.scale.set(3, 3, 3);
+			object.scene.rotation.y = Math.PI * 1.25;
+		  	cannonGroup.add( object.scene );
+			
+			object.scene.traverse( function( child ) { 
+
+				if ( child.isMesh ) {
+					child.castShadow = true;
+				}
+				if(child.isLight)
+				{
+					child.visible = false;//child.intensity = 0;
+				}
+
+			} );
+
+			this.models.cannon = cannonGroup;
+		});
+
+
+		///=================
+		//    SNOWMAN
+		///=================
+
+		let snowmanGroup = new Group();
+		snowmanGroup.position.y = 1000;
+		this.scene.add( snowmanGroup );
+		
+		var snowmanLoader = new GLTFLoader(manager);
+		snowmanLoader.load("https://assets.codepen.io/557388/snowman.gltf", object => {
+
+			//object.scene.position.set(30, -30, 30);
+			object.scene.scale.set(2.5, 2.5, 2.5);
+			// object.scene.rotation.y = Math.PI * 1.25;
+		  	snowmanGroup.add( object.scene );
+			
+			object.scene.traverse( function( child ) { 
+
+				if ( child.isMesh ) {
+					child.castShadow = true;
+				}
+				if(child.isLight)
+				{
+					child.visible = false;//child.intensity = 0;
+				}
+
+			} );
+
+			this.models.snowman = snowmanGroup;
+		});
+
+		///=================
+		//    STAR
+		///=================
+
+		let starGroup = new Group();
+		starGroup.position.y = 1000;
+		this.scene.add( starGroup );
+		
+		var starLoader = new GLTFLoader(manager);
+		starLoader.load("https://assets.codepen.io/557388/star.gltf", object => {
+
+			object.scene.position.set(-1, 0, 0);
+			object.scene.scale.set(0.01, 0.01, 0.01);
+			object.scene.rotation.y = Math.PI * .5;
+		  	starGroup.add( object.scene );
+			
+			object.scene.traverse( function( child ) { 
+
+				if ( child.isMesh ) {
+					child.castShadow = true;
+				}
+				if(child.isLight)
+				{
+					child.visible = false;
+					// child.intensity = 0;
+					
+				}
+
+			} );
+
+			this.models.star = starGroup;
+		});
+
+		
+
+		this.onResize();
+	}
+	
+	setPlane(physicsPlane)
+	{
+		this.plane.position.copy(physicsPlane.position);
+		this.plane.quaternion.copy(physicsPlane.quaternion);
+	}
+
+	render() 
+	{
+        this.camera.lookAt( this.cameraTarget );
+		this.renderer.render( this.scene, this.camera );	
+		
+		if(this.showStats) this.stats.update();
+	}
+	
+	onResize() 
+	{
+		this.camera.aspect = window.innerWidth / window.innerHeight;
+		
+		this.camera.updateProjectionMatrix();
+		this.renderer.setSize( window.innerWidth, window.innerHeight );
+
+		var aspect = window.innerWidth / window.innerHeight;
+		this.width = window.innerWidth;
+		this.height = window.innerHeight;
+		
+	}
+	
+	createBox(width, height, depth, color = 0xffffff, present = false)
+	{
+		//let geometry = new BoxBufferGeometry( width * this.scale, height * this.scale, depth * this.scale );
+		//let texture = present ? this.presentTextures[Math.floor(Math.random() * this.presentTextures.length)] : null;
+		//let material = new MeshPhongMaterial( { color: color, shininess: present ? 100 : 30, map: texture } );
+		let material = present ? 
+			this.presentMaterials[Math.floor(Math.random() * this.presentMaterials.length)]
+			: this.greyMaterial
+		let mesh = new Mesh( this.boxGeometry, material );
+		mesh.scale.set(width, height, depth)
+		mesh.castShadow = true;
+		mesh.receiveShadow = true;
+		this.scene.add(mesh);
+		return mesh;
+	}
+	
+	createSphere(radius, color)
+	{
+		let geometry = new IcosahedronBufferGeometry(radius, 3);
+		let material = new MeshPhongMaterial( { color: color, shininess: 30 } );
+		let mesh = new Mesh( geometry, material );
+		mesh.castShadow = true;
+		mesh.receiveShadow = true;
+		this.scene.add(mesh);
+		return mesh;
+	}
+
+	createBall(size, color, light = false)
+	{
+		
+		if(light && this.lights.length)
+		{
+			return this.lights.shift();
+		}
+		
+		let group = new Group();
+		let material = new MeshPhongMaterial ( { color: color, wireframe: false } );
+		let ball = new IcosahedronBufferGeometry(size, 4);
+		let mesh = new Mesh( ball, material );
+		mesh.castShadow = true;
+		group.add(mesh);
+		
+		if(!light)
+		{
+			let cap = new CylinderBufferGeometry( size / 2, size / 2,  size, 5 );
+			let capMat = new MeshPhongMaterial ( { color: 0xFFD338, wireframe: false } );
+			let capMesh = new Mesh( cap, capMat );
+			capMesh.castShadow = true;
+			capMesh.position.y = size * 0.75;
+			group.add(capMesh);
+
+		}
+
+		this.scene.add(group);
+		return group;
+	}
+	
+	createCylinder(radiusTop, radiusBottom,  height, numSegments)
+	{
+		const group = new Group();
+		const geometry = new CylinderBufferGeometry( radiusTop, radiusBottom,  height, numSegments );
+		const material = new MeshPhongMaterial( { color: 0xff0000 } );
+		const cylinder = new Mesh( geometry, material );
+		// cylinder.position.set(x, y, z
+		cylinder.rotation.x = Math.PI * 0.5;
+		group.add(cylinder);
+		this.scene.add(group);
+		return group;
+	}
+	
+	
+}
+
+const PHYSICS_MATERIAL = {
+	lowBounce: 'lowbounce',
+	normalBounce: 'normalbounce',
+	highBounce: 'highbounce',
+}
+
+class Physics
+{
+	constructor(scale = 1, stageSize)
+	{
+		this.scale = 1;
+		this.stageSize;
+		
+        this.scale = scale;
+		this.stageSize = stageSize;
+		
+		this.materials = {};
+
+        let mainMaterial = new CANNON.Material('main');
+		mainMaterial.friction = 1;
+		
+		this.materials[PHYSICS_MATERIAL.lowBounce] = new CANNON.ContactMaterial(mainMaterial, mainMaterial, {friction: 2, restitution: 0 + extraBounce });
+		this.materials[PHYSICS_MATERIAL.normalBounce] = new CANNON.ContactMaterial(mainMaterial, mainMaterial, {friction: 2, restitution: 0 + extraBounce });
+		this.materials[PHYSICS_MATERIAL.highBounce] = new CANNON.ContactMaterial(mainMaterial, mainMaterial, {friction: 2, restitution: 1.5 + extraBounce });
+
+		// WORLD
+
+		this.world = new CANNON.World();
+		this.world.gravity.set(0, -60 * this.scale, 0);
+		this.world.broadphase = new CANNON.SAPBroadphase(this.world);
+		this.world.solver.iterations = 4;
+		this.world.allowSleep = true;
+
+		this.world.addContactMaterial(this.materials[PHYSICS_MATERIAL.lowBounce]); 
+		this.world.addContactMaterial(this.materials[PHYSICS_MATERIAL.normalBounce]); 
+		this.world.addContactMaterial(this.materials[PHYSICS_MATERIAL.highBounce]); 
+
+		// GROUND
+		
+		this.groundBody = new CANNON.Body({mass: 0, material: mainMaterial});
+		let groundShape = new CANNON.Plane();
+		this.groundBody.addShape(groundShape);
+		var rotate = new CANNON.Vec3(1,0,0)
+        this.groundBody.quaternion.setFromAxisAngle(rotate, - (Math.PI/2))
+        this.groundBody.position.set(0, (this.stageSize.top - this.stageSize.height) * scale, 0)
+		this.world.addBody(this.groundBody);
+
+	}
+
+	createBody(mass, position, rotation, material = PHYSICS_MATERIAL.normalBounce)
+	{
+		let body = new CANNON.Body({
+            type: mass == 0 ? CANNON.Body.KINEMATIC : CANNON.Body.DYNAMIC,
+            material: this.materials[material],
+            mass: mass * this.scale,
+            position: new CANNON.Vec3(position.x * this.scale, position.y * this.scale, position.z * this.scale), // m
+		});
+
+		Object.keys(rotation || {}).forEach(key => 
+		{
+			this.setAngle(body, rotation[key], key);
+		})
+		this.world.addBody(body);
+
+		return body;
+	}
+
+	createBoxShape(width, height, depth)
+	{
+		return new CANNON.Box(new CANNON.Vec3(width / 2 * this.scale, height / 2 * this.scale, depth / 2 * this.scale));
+	}
+
+	createCylinderShape(radiusTop, radiusBottom,  height, segments)
+	{
+		return new CANNON.Cylinder(radiusTop, radiusBottom,  height, segments);
+	}
+
+	createSphereShape(radius)
+	{
+		return new CANNON.Sphere(radius);
+	}
+
+	// createCylinder(x, y, z, radiusTop, radiusBottom,  height, numSegments)
+	// {
+	// 	let shape = new CANNON.Cylinder(radiusTop, radiusBottom,  height, numSegments);
+            
+	// 	let body = new CANNON.Body({
+	// 		material: this.materials[PHYSICS_MATERIAL.normalBounce],
+	// 		mass: 15 * this.scale,
+	// 		position: new CANNON.Vec3(x * this.scale, y * this.scale, z * this.scale), // m
+	// 	});
+	// 	body.addShape(shape);
+	// 	this.setAngle(body, -Math.PI * 0.5, 'x');
+
+	// 	this.world.addBody(body);
+
+	// 	return body;
+	// }
+	
+	createBox(width, height, depth, x, y, z, mass = 0, rotation = 0, trigger)
+	{
+		let shape = new CANNON.Box(new CANNON.Vec3(width / 2 * this.scale, height / 2 * this.scale, depth / 2 * this.scale));
+		let body = new CANNON.Body({
+            type: mass == 0 ? CANNON.Body.KINEMATIC : CANNON.Body.DYNAMIC,
+            material: this.materials[PHYSICS_MATERIAL.normalBounce],
+            mass: mass * this.scale,
+            position: new CANNON.Vec3(x * this.scale, y * this.scale, z * this.scale), // m
+		});
+        body.addShape(shape);
+        body.collisionResponse = trigger ? false : true;
+
+        if(trigger)
+        {
+            body.addEventListener('collide', () => trigger())
+        }
+        
+        this.setAngle(body, rotation);
+        
+		this.world.addBody(body);
+		
+		return body;
+    }
+    
+    setAngle(body, rotation, direction = 'z', )
+    {
+        let q = new CANNON.Quaternion();
+		let x = direction === 'x' ? 1 : 0
+		let y = direction === 'y' ? 1 : 0
+		let z = direction === 'z' ? 1 : 0
+        q.setFromAxisAngle(new CANNON.Vec3(x,y,z), rotation);
+        body.quaternion = q.mult(body.quaternion);
+    }
+
+	createBall(size, x = 0, y = 0, z = 0)
+	{
+		let shape = new CANNON.Sphere(size);
+		let body = new CANNON.Body({
+            material: this.materials[PHYSICS_MATERIAL.highBounce],
+			mass: 1 * this.scale,
+			position: new CANNON.Vec3(x * this.scale, y * this.scale, z * this.scale), // m
+		});
+		body.addShape(shape);
+		
+		this.world.addBody(body);
+		
+		return body;
+	}
+	
+	createCylinder(x, y, z, radiusTop, radiusBottom,  height, numSegments)
+	{
+		let shape = new CANNON.Cylinder(radiusTop, radiusBottom,  height, numSegments);
+            
+		let body = new CANNON.Body({
+			material: this.materials[PHYSICS_MATERIAL.normalBounce],
+			mass: 15 * this.scale,
+			position: new CANNON.Vec3(x * this.scale, y * this.scale, z * this.scale), // m
+		});
+		body.addShape(shape);
+		this.setAngle(body, -Math.PI * 0.5, 'x');
+
+		this.world.addBody(body);
+
+		return body;
+	}
+	
+	remove(body)
+	{
+		this.world.remove(body);
+	}
+	
+	tick(delta)
+	{
+		this.world.step(1/60, delta, 3);
+	}
+}
+
+
+console.clear();
+
+const DIRECTION = {
+	left: 'LEFT',
+	right: 'RIGHT'
+}
+
+const GAME_STATE = {
+	loading: 'loading',
+	intro: 'intro',
+	waiting: 'waiting',
+	game: 'game'
+}
+
+let sounds = {
+	fire: [new Audio('https://assets.codepen.io/557388/fire_01.mp3'), new Audio('https://assets.codepen.io/557388/fire_02.mp3')],
+	bells: [new Audio('https://assets.codepen.io/557388/bells_01.mp3')],
+	bing: [new Audio('https://assets.codepen.io/557388/bing_01.mp3'), new Audio('https://assets.codepen.io/557388/bing_02.mp3')]
+};
+
+let gameState = GAME_STATE.loading;
+
+let physicsItems = [];
+let stage;
+let physics;
+
+let mousePos = {x: 0, y: 0};
+
+
+
+let count = 0;
+let cannonFlash;
+let cannonRecoil;
+let stars = [];
+
+const introSteps = [init, prepUI, loadComplete, dropIn, createClickListeners, introRoom, introCannon, introStart, startGame];
+
+function next() 
+{
+	if(introSteps.length)
+	{
+		introSteps.shift()();
+	}
+}
+
+function loadComplete()
+{
+	const loadingScreen = document.querySelector('#loading');
+	loadingScreen.innerHTML = '';
+	setState(GAME_STATE.intro);
+
+	gsap.to(loadingScreen, {autoAlpha: 0, duration: 1.5});
+	setTimeout(() => next(), 1000);
+}
+
+function prepUI()
+{
+	gsap.set('#steve', {y: '50%', scale: 0, rotation: 45});
+	gsap.set('#bubble', {transformOrigin: '100% 50%', autoAlpha: 0, x:'+=50', rotation: 5, scale: 0.9})
+
+	next();
+}
+
+function dropIn()
+{
+	createSofa();
+	createTable();
+	createStand();
+	createTV();
+
+	next();
+}
+
+function setState(newState)
+{
+	gameState = newState;
+	document.body.setAttribute('class', gameState);
+}
+
+function onMouseMove(event)
+{
+	mousePos = {x: event.clientX, y: event.clientY};
+}
+
+function createClickListeners()
+{
+	document.addEventListener( 'keypress', onClick, false );
+	document.addEventListener( 'click', onClick, false );
+	document.addEventListener( 'mousemove', onMouseMove, false );
+
+	next();
+}
+
+function introRoom()
+{
+	setState(GAME_STATE.intro);
+	let roomTL = gsap.timeline({onComplete: () => setState(GAME_STATE.waiting)});
+	roomTL.to('#steve', {delay:1, y: 0, rotation: 0, scale: 1, ease: 'power4.out', duration: 0.6, onComplete:() => playSound('bing')})
+	roomTL.fromTo('#bubble', {autoAlpha: 0, y: 0,  x:'+=50', rotation: 5, scale: 0.9}, {autoAlpha: 1, rotation: 0, scale: 1, x:0, ease: 'elastic', duration: 1})
+	
+}
+
+function introCannon()
+{
+	setState(GAME_STATE.intro);
+	const steveEl = document.querySelector('#steve');
+	const textEl = document.querySelector('#text');
+	const textHighlightEl = document.querySelector('#text-highlight');
+
+	let cannonTL = gsap.timeline({onComplete: () => setState(GAME_STATE.waiting), defaults: { ease: 'power4.easeInOut', duration: .8}});
+	cannonTL.to(stage.camera.position, {x: 65, y: -20, z: 20})
+	cannonTL.to(stage.cameraTarget, {x: 30, y: -25, z: 30}, 0)
+	cannonTL.to('#bubble', {autoAlpha: 0, y:'-=30', scale: 0.5, duration: 0.3, ease: 'power2.in'}, 0);
+	cannonTL.to(steveEl, {y: '-=20', duration: 0.1, onComplete: () => {
+		steveEl.setAttribute('src', 'https://assets.codepen.io/557388/happy.svg');
+		textEl.textContent = "But wait, we have this ";
+		textHighlightEl.textContent = "Christmas Cannon!!";
+		setTimeout(() => playSound('bing'),300);
+
+	}}, 0.5)
+	cannonTL.fromTo('#bubble', {autoAlpha: 0, y: 0,  x:'+=50', rotation: 5, scale: 0.9}, {autoAlpha: 1, rotation: 0, scale: 1, x:0, ease: 'elastic', duration: 1});
+	cannonTL.to(steveEl, {y: 0, duration: .7, ease: 'bounce'}, 0.6);
+}
+
+function introStart()
+{
+	setState(GAME_STATE.intro);
+	const steveEl = document.querySelector('#steve');
+	const textEl = document.querySelector('#text');
+	const textHighlightEl = document.querySelector('#text-highlight');
+
+	let cannonTL = gsap.timeline({onComplete: () => setState(GAME_STATE.game), defaults: { ease: 'power4.easeInOut', duration: .8}});
+	cannonTL.to(stage.camera.position, {x: 55, y: 15, z: 55})
+	cannonTL.to(stage.cameraTarget, {x: 0, y: -22, z: 0, duration: 1.4}, 0)
+	cannonTL.to('#bubble', {autoAlpha: 0, y:'-=30', scale: 0.5, duration: 0.3, ease: 'power2.in'}, 0);
+	cannonTL.to(steveEl, {y: '-=20', duration: 0.1, onComplete: () => {
+		steveEl.setAttribute('src', 'https://assets.codepen.io/557388/steve.svg');
+		textEl.textContent = "Click or tap to fire the Christmas Cannon, let’s make this room more festive!!";
+		textHighlightEl.textContent = "";
+		setTimeout(() => playSound('bing'),700);
+	}}, 0.5)
+	cannonTL.fromTo('#bubble', {autoAlpha: 0, y: 0,  x:'+=50', rotation: 5, scale: 0.9}, {autoAlpha: 1, rotation: 0, scale: 1, x:0, ease: 'elastic', duration: 1});
+	cannonTL.to(steveEl, {y: 0, duration: .7, ease: 'bounce'}, 0.6);
+}
+
+function endMessage()
+{
+	const steveEl = document.querySelector('#steve');
+	const textEl = document.querySelector('#text');
+	const textHighlightEl = document.querySelector('#text-highlight');
+
+	let changed = false;
+	steveEl.addEventListener('click', (event) => {
+		event.stopPropagation();
+		if(!changed)
+		{
+			changed = true;
+			let steveTL = gsap.timeline();
+			steveTL.to(steveEl, {y: '-=40', duration: 0.1, onComplete: () => {
+				steveEl.setAttribute('src', 'https://assets.codepen.io/557388/snowman.svg');
+			}}, 0)
+			steveTL.to(steveEl, {y: 0, duration: .7, ease: 'bounce'}, 0.1);
+		}
+		else window.open('https://ste.vg/pJ96mS5DC','_blank');
+	})
+	
+	textEl.addEventListener('click', (event) => {
+		event.stopPropagation();
+		startGame();
+		// window.open('https://www.twitter.com/steeevg/','_blank');
+	})
+
+	// steveEl.setAttribute('src', 'https://assets.codepen.io/557388/snowman.svg');
+	textEl.innerHTML = `Yay! So much better.`
+
+
+// Be sure to send a screenshot to <a href="https://twitter.com/steeevg/" target="_blank">@steeevg</a>, he’d love to see it!`;
+	textHighlightEl.textContent = "Merry Christmas!";
+
+	let roomTL = gsap.timeline();
+	setTimeout(() => playSound('bing'),700);
+	roomTL.to('#steve', {y: 0, rotation: 0, scale: 1, ease: 'power4.out', duration: 0.6})
+	roomTL.fromTo('#bubble', {autoAlpha: 0, y: 0,  x:'+=50', rotation: 5, scale: 0.9}, {autoAlpha: 1, rotation: 0, scale: 1, x:0, ease: 'elastic', duration: 1})
+}
+
+function hideEndMessage() 
+{
+	
+}
+
+function playSound(name)
+{
+	let options = sounds[name];
+	if(options)
+	{
+		let sound = options[Math.floor(Math.random() * options.length)];
+		sound.currentTime = 0;
+		sound.play();
+	}
+}
+
+function startGame()
+{
+	setState(GAME_STATE.game);
+
+	let gameStartTL = gsap.timeline({defaults: { ease: 'power4.easeInOut', duration: .5}});
+	gameStartTL.to('#bubble', {autoAlpha: 0, y:'-=30', scale: 0.5, duration: 0.3, ease: 'power2.in'}, 0);
+	gameStartTL.to('#steve', {y: '100%', scale: 0, rotation: 45}, 0)
+}
+
+function onClick(event)
+{
+	if(event) event.preventDefault();
+
+	let coords = {
+		x: event.clientX || mousePos.x,
+		y: event.clientY || mousePos.y
+	}
+	
+
+	switch(gameState)
+	{
+		case GAME_STATE.waiting:
+			next();
+			break;
+		case GAME_STATE.game:
+			fire(coords);
+			break;
+		default:
+			return;
+	}
+	
+}
+
+function fire(coords)
+{
+	if(count === 0) next();
+	count++;
+	let item;
+
+	let randomItems = [addBall, createStar];
+
+	if(count === 50) item = createSnowman();
+	else if(count === 10) item = createTree();
+	else if(stars.length && Math.random() > 0.8) item = createStar(); //randomItems[Math.floor(Math.random() * randomItems.length)]();
+	else item = addBall();
+
+	if(count === 100)
+	{
+		setTimeout(() => endMessage(), 1000);
+	}
+
+	playSound('fire');
+	// if(Math.random() > 0.8) playSound('bells');
+
+	let range = stage.height * 0.4;
+	let x = -60;
+	// let y = 20;
+	let z = -60;
+
+	let xStart = (stage.width / 2) - range;
+	let xEnd = (stage.width / 2) + range;
+	if(coords.x > stage.width / 2)
+	{
+		if(coords.x > xEnd) x = -20;
+		else
+		{
+			let r = coords.x - (stage.width / 2)
+			x = -20 + ((range - r) / range) * -40;
+		}
+	}
+	
+	// let yStart = (stage.width / 2);
+	if(coords.x < stage.width / 2)
+	{
+		if(coords.x < xStart) z = -20;
+		else
+		{
+			let r = coords.x - xStart;
+			z = -20 + (r / range) * -40;
+		}
+	}
+
+	let hRange = 100;
+	let y = 60 - (coords.y / stage.height) * hRange;
+
+	item.physics.velocity.set(x * powerMultiplier, y, z * powerMultiplier)
+	const angularRandomness = 10;
+	item.physics.angularVelocity.set(
+		((Math.random() * angularRandomness) - (angularRandomness/2)),
+		((Math.random() * angularRandomness) - (angularRandomness/2)),
+		((Math.random() * angularRandomness) - (angularRandomness/2)))
+	item.physics.angularDamping = 0.8;
+	
+	cannonFlash.restart();
+	cannonRecoil.restart();
+}
+
+function onReady()
+{
+	// createTree();
+
+	setState(GAME_STATE.intro);
+
+	cannonFlash = gsap.timeline();
+	cannonFlash.fromTo(stage.cannonLight, {intensity: 2}, {intensity: 0, duration: .3});
+
+	cannonRecoil = gsap.timeline();
+	cannonRecoil.to(stage.models.cannon.position, {x: '+=3', z: '+=3', duration: 0.1, ease: 'Power2.out'}).to(stage.models.cannon.position, {x: '-=3', z: '-=3', duration: 0.4})
+	// cannonFlash.stop();
+
+	for (let i = 0; i < 20; i++) {
+		let star = stage.models.star.clone();
+		stars.push(star);
+		stage.scene.add(star);
+		
+	}	
+
+	setTimeout(() => {
+		animate();
+		next();	
+	},100)
+	
+}
+
+
+
+
+function addBall()
+{		
+	// gsap.to(stage.cameraTarget, {x: stageSize.left + (stageSize.width * 0.5), ease: 'Power4.inOut', duration: 1})
+
+	
+	
+	let x = 35;
+	let y = -15;
+	let z = 35;
+	
+	let width = 1 + Math.random() * 4;
+	let height = 1 + Math.random() * 4;
+	let depth = 1 + Math.random() * 4;
+	
+	let isBall = Math.random() > 0.5;
+	
+	let light = Math.random() > 0.8;
+	var size = light ? .5 : .8;
+	
+	var physicsItem = { 
+		mesh: isBall ? stage.createBall(size, showGuides ? 0xFF0000 : Math.random() * 0xFFFFFF, light) : stage.createBox(width, height, depth, showGuides ? 0xFF0000 : 0xFFFFFF, !showGuides),
+		physics: isBall ? physics.createBall(size, x, y, z) : physics.createBox(width, height, depth, x, y, z, 2),
+		previousPosition: new CANNON.Vec3(x, y, z),
+		rotation: 0,
+		rotationVelocity: 0
+	}
+	
+	// physicsItem.physics.velocity.set(-20 - (Math.random() * 50), 1 + (Math.random() * 10), -20 - (Math.random() * 50))
+
+
+	// -60 => -20
+
+	// 10 => 30
+
+	// -20 => -60
+
+	// physicsItem.physics.velocity.set(-60, 10, -60)
+	// const angularRandomness = 10;
+	// physicsItem.physics.angularVelocity.set(
+	// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+	// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+	// 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+	// physicsItem.physics.angularDamping = 0.8;
+	
+	physicsItems.push(physicsItem);
+
+	return physicsItem;
+
+	// if(pauseTimer) clearTimeout(pauseTimer);
+	// pauseTimer = setTimeout( _ => doPhysics = false, 7000);
+}
+
+function createStaticBox(settings)
+{
+	// const z = 1;
+	var physicsItem = { 
+		mesh: settings.show ? stage.createBox(settings.width, settings.height, settings.depth, settings.color) : null,
+		physics: physics.createBox(settings.width, settings.height, settings.depth, settings.x, settings.y, settings.z, 0, settings.rotation, settings.trigger),
+		previousPosition: new CANNON.Vec3(settings.x, settings.y, settings.z),
+		rotation: settings.rotation,
+		rotationVelocity: 0
+	}
+	physicsItems.push(physicsItem);
+
+	return physicsItem
+}
+
+const clock = new Clock();
+let oldElapsedTime = 0;
+
+function animate() 
+{
+	const elapsedTime = clock.getElapsedTime();
+	const delta = elapsedTime - oldElapsedTime;
+	oldElapsedTime = elapsedTime;
+	
+	physics.tick(delta)
+
+	for(var i in physicsItems)
+	{
+		if(physicsItems[i].mesh)
+		{
+			physicsItems[i].mesh.position.copy(physicsItems[i].physics.position);
+			physicsItems[i].mesh.quaternion.copy(physicsItems[i].physics.quaternion);	
+		}
+		
+	}
+
+	stage.render();
+
+	requestAnimationFrame( animate );
+}
+
+function init()
+{
+	console.log('init()');
+
+
+
+	let worldScale = 1;
+
+	let stageSize = {
+		left: -20,
+		width: 40,
+		top: 0,
+		height: 30
+	}
+
+	stage = new Stage(worldScale, stageSize, onReady, showGuides);
+	physics = new Physics(worldScale, stageSize);
+	
+	window.addEventListener( 'resize', () => { stage.onResize() }, false );
+
+
+
+
+	let staticItems = [
+		{
+			show: true,
+			x: stageSize.left,
+			y: -18.5,
+			z: 0,
+			width: 25,
+			height: 2,
+			depth: 40,
+			color: 0xcccccc,
+			rotation: Math.PI * 0.5,
+		},
+		{
+			show: true,
+			x: stageSize.left + (stageSize.width / 2) - 0.5,
+			y: -18.5,
+			z: -20,
+			width: 41,
+			height: 25,
+			depth: 2,
+			color: 0xcccccc,
+			rotation: 0
+		},
+		{
+			show: true,
+			x: stageSize.left + (stageSize.width / 2),
+			y: -30,
+			z: 0,
+			width: 40,
+			height: 2,
+			depth: 40,
+			color: 0xcccccc,
+			rotation: 0
+		},
+		{
+			show: showGuides,
+			x: 5.5,
+			y: -25,
+			z: -18,
+			width: 3,
+			height: 14,
+			depth: 3,
+			color: 0xff0000,
+			rotation: 0
+		},
+		{
+			show: showGuides,
+			x: -5,
+			y: -25,
+			z: -18,
+			width: 3,
+			height: 14,
+			depth: 3,
+			color: 0xff0000,
+			rotation: 0
+		},
+		{
+			show: showGuides,
+			x: 0,
+			y: -19,
+			z: -18,
+			width: 10,
+			height: 2.5,
+			depth: 3,
+			color: 0xff0000,
+			rotation: 0
+		},
+		{
+			show: showGuides,
+			x: 0,
+			y: -17.7,
+			z: -18,
+			width: 15.2,
+			height: 0.5,
+			depth: 3.3,
+			color: 0xff0000,
+			rotation: 0
+		}
+		
+	]
+
+	staticItems.forEach(settings => {
+		createStaticBox(settings);
+	})
+
+	
+
+	
+
+	
+	// addBall();
+}
+
+function createSofa()
+	{
+		let body = physics.createBody(5, {x: 12, y: -10, z: 2}, {y: Math.PI * 1.023, x: Math.PI * 0.01}, PHYSICS_MATERIAL.lowBounce);
+
+		let shapes = [{
+			show: false,
+			x: 0,
+			y: -1.5,
+			z: 0,
+			width: 9,
+			height: 2.6,
+			depth: 23.5,
+			rotation: 0
+		},
+		{
+			show: false,
+			x: -4,
+			y: 0,
+			z: 0,
+			width: 2.3,
+			height: 6,
+			depth: 23,
+			rotation: 0
+		},
+		{
+			show: false,
+			x: 0,
+			y: 0,
+			z: -10.3,
+			width: 9,
+			height: 2,
+			depth: 2.5,
+			rotation: 0
+		},
+		{
+			show: false,
+			x: 0,
+			y: 0,
+			z: 10.3,
+			width: 9,
+			height: 2,
+			depth: 2.5,
+			rotation: 0
+		},
+		{
+			show: false,
+			x: -2.2,
+			y: 2.8,
+			z: 0,
+			width: 3.5,
+			height: 1,
+			depth: 18.5,
+			rotation: -Math.PI * 0.4
+		}];
+
+		stage.models.sofa.position.y = 0;
+
+		let sofaGroup = new Group();
+		sofaGroup.add(stage.models.sofa)
+		stage.scene.add(sofaGroup);
+
+		shapes.forEach(box => {
+			let shape = physics.createBoxShape(box.width, box.height, box.depth);
+			
+			if(showGuides)
+			{
+				let b = stage.createBox(box.width, box.height, box.depth, 0xff0000);
+				b.position.set(box.x, box.y, box.z);
+				b.rotation.set(0, 0, box.rotation);
+				sofaGroup.add(b);
+			}
+
+			body.addShape(shape, new CANNON.Vec3(box.x, box.y, box.z), new CANNON.Quaternion(0, 0, box.rotation));
+		})
+
+		var physicsItem = { 
+			mesh: sofaGroup,
+			physics: body,
+		}
+		
+		physicsItem.physics.velocity.set(0, -20, 0)
+		// const angularRandomness = 10;
+		// physicsItem.physics.angularVelocity.set(
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+		// physicsItem.physics.angularDamping = 0.8;
+		
+		physicsItems.push(physicsItem);
+	}
+
+	function createTable()
+	{
+		let body = physics.createBody(3, {x: 0, y: -13, z: 2}, {y: -Math.PI * 1.013, x: Math.PI * 0.01}, PHYSICS_MATERIAL.lowBounce);
+
+		let shapes = [
+			{
+				x: 0.5,
+				y: -1.2,
+				z: 0,
+				width: 7,
+				height: 0.5,
+				depth: 16,
+				rotation: 0
+			},
+			{
+				x: 4,
+				y: -2.5,
+				z: 7.8,
+				width: 0.5,
+				height: 2.5,
+				depth: 0.5,
+				rotation: 0
+			},
+			{
+				x: 4,
+				y: -2.5,
+				z: -7.8,
+				width: 0.5,
+				height: 2.5,
+				depth: 0.5,
+				rotation: 0
+			},
+			{
+				x: -2.8,
+				y: -2.5,
+				z: 7.8,
+				width: 0.5,
+				height: 2.5,
+				depth: 0.5,
+				rotation: 0
+			},
+			{
+				x: -2.8,
+				y: -2.5,
+				z: -7.8,
+				width: 0.5,
+				height: 2.5,
+				depth: 0.5,
+				rotation: 0
+			},
+		];
+
+		stage.models.table.position.y = 0;
+
+		let tableGroup = new Group();
+		tableGroup.add(stage.models.table)
+		stage.scene.add(tableGroup);
+
+		shapes.forEach(box => {
+			let shape = physics.createBoxShape(box.width, box.height, box.depth);
+			
+			if(showGuides)
+			{
+				let b = stage.createBox(box.width, box.height, box.depth, 0xff0000);
+				b.position.set(box.x, box.y, box.z);
+				b.rotation.set(0, 0, box.rotation);
+				tableGroup.add(b);
+			}
+
+			body.addShape(shape, new CANNON.Vec3(box.x, box.y, box.z), new CANNON.Quaternion(0, 0, box.rotation));
+		})
+
+		var physicsItem = { 
+			mesh: tableGroup,
+			physics: body,
+		}
+		
+		physicsItem.physics.velocity.set(0, -20, 0)
+		// const angularRandomness = 10;
+		// physicsItem.physics.angularVelocity.set(
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+		// physicsItem.physics.angularDamping = 0.8;
+		
+		physicsItems.push(physicsItem);
+	}
+	
+	function createStand()
+	{
+		let body = physics.createBody(6, {x: -16, y: -10, z: 0}, {y: -Math.PI * 0.001, x: Math.PI * 0.05}, PHYSICS_MATERIAL.lowBounce);
+
+		let shapes = [
+			{
+				x: 0,
+				y: 1.5,
+				z: 0,
+				width: 4.5,
+				height: 4.8,
+				depth: 18,
+				rotation: 0
+			}
+			
+		];
+
+		stage.models.stand.position.y = 0;
+
+		let standGroup = new Group();
+		standGroup.add(stage.models.stand)
+		stage.scene.add(standGroup);
+
+		shapes.forEach(box => {
+			let shape = physics.createBoxShape(box.width, box.height, box.depth);
+			
+			if(showGuides)
+			{
+				let b = stage.createBox(box.width, box.height, box.depth, 0xff0000);
+				b.position.set(box.x, box.y, box.z);
+				b.rotation.set(0, 0, box.rotation);
+				standGroup.add(b);
+			}
+
+			body.addShape(shape, new CANNON.Vec3(box.x, box.y, box.z), new CANNON.Quaternion(0, 0, box.rotation));
+		})
+
+		var physicsItem = { 
+			mesh: standGroup,
+			physics: body,
+		}
+		
+		physicsItem.physics.velocity.set(0, -20, 0)
+		// const angularRandomness = 10;
+		// physicsItem.physics.angularVelocity.set(
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+		// physicsItem.physics.angularDamping = 0.8;
+		
+		physicsItems.push(physicsItem);
+	}
+	
+	function createTV()
+	{
+		let body = physics.createBody(2, {x: -15.5, y: 0, z: 0}, {y: -Math.PI * 0.001, x: Math.PI * 0.001}, PHYSICS_MATERIAL.lowBounce);
+
+		let shapes = [
+			{
+				x: 0,
+				y: 4.5,
+				z: 0.5,
+				width: 1.5,
+				height: 9.5,
+				depth: 18,
+				rotation: 0
+			},
+			{
+				x: 0,
+				y: -1.6,
+				z: 0.5,
+				width: 2.5,
+				height: 0.5,
+				depth: 6.8,
+				rotation: 0
+			}
+			
+		];
+
+		stage.models.tv.position.y = 0;
+
+		let tvGroup = new Group();
+		tvGroup.add(stage.models.tv)
+		stage.scene.add(tvGroup);
+
+		shapes.forEach(box => {
+			let shape = physics.createBoxShape(box.width, box.height, box.depth);
+			
+			if(showGuides)
+			{
+				let b = stage.createBox(box.width, box.height, box.depth, 0xff0000);
+				b.position.set(box.x, box.y, box.z);
+				b.rotation.set(0, 0, box.rotation);
+				tvGroup.add(b);
+			}
+
+			body.addShape(shape, new CANNON.Vec3(box.x, box.y, box.z), new CANNON.Quaternion(0, 0, box.rotation));
+		})
+
+		var physicsItem = { 
+			mesh: tvGroup,
+			physics: body,
+		}
+		
+		physicsItem.physics.velocity.set(0, -20, 0)
+		// const angularRandomness = 10;
+		// physicsItem.physics.angularVelocity.set(
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+		// physicsItem.physics.angularDamping = 0.8;
+		
+		physicsItems.push(physicsItem);
+	}
+	
+	function createTree()
+	{
+		let body = physics.createBody(10, {x: 30, y: -10, z: 30}, {y: -Math.PI * 0.001, x: Math.PI * 0.001}, PHYSICS_MATERIAL.lowBounce);
+		physics.setAngle(body, -Math.PI * 0.5, 'x');
+		let shapes = [
+			{
+				x: 0,
+				y: 0,
+				z: -2.2,
+				topRadius: 1,
+				bottomRadius: 6,
+				height: 16,
+				segments: 10
+			},
+			{
+				x: 0,
+				y: 0,
+				z: -13,
+				topRadius: 0.5,
+				bottomRadius: 1,
+				height: 7,
+				segments: 5
+			},
+			{
+				x: 0,
+				y: 0,
+				z: -15,
+				topRadius: 3,
+				bottomRadius: 2,
+				height: 5,
+				segments: 7
+			}
+		];
+
+		stage.models.tree.position.y = 0;
+		stage.models.pot.position.y = 0;
+
+		let treeGroup = new Group();
+		treeGroup.add(stage.models.tree);
+		treeGroup.add(stage.models.pot);
+		stage.scene.add(treeGroup);
+
+		shapes.forEach(cylinder => {
+			let shape = physics.createCylinderShape(cylinder.topRadius, cylinder.bottomRadius, cylinder.height, cylinder.segments);
+			
+			if(showGuides)
+			{
+				let b = stage.createCylinder(cylinder.topRadius, cylinder.bottomRadius, cylinder.height, cylinder.segments, 0xff0000);
+				b.position.set(cylinder.x, cylinder.y, cylinder.z);
+				b.rotation.set(0,0,0);
+				treeGroup.add(b);
+			}
+
+			body.addShape(shape, new CANNON.Vec3(cylinder.x, cylinder.y, cylinder.z), new CANNON.Quaternion(0, 0, cylinder.rotation));
+		})
+
+		var physicsItem = { 
+			mesh: treeGroup,
+			physics: body,
+		}
+		
+		// body.velocity.set(-40, 30, -40)
+		// const angularRandomness = 5;
+		// body.angularVelocity.set(
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+		// body.angularDamping = 0.8;
+		
+		physicsItems.push(physicsItem);
+
+		return physicsItem;
+	}
+
+	function createSnowman()
+	{
+		// let body = physics.createBody(10, {x: 30, y: -10, z: 30}, {y: -Math.PI * 0.001, x: Math.PI * 0.001}, PHYSICS_MATERIAL.lowBounce);
+		let body = physics.createBody(10, {x: 30, y: -10, z: 30}, {y: 0, x: Math.PI * .5}, PHYSICS_MATERIAL.normalBounce);
+		physics.setAngle(body, -Math.PI * 0.5, 'x');
+		let shapes = [
+			{
+				x: 0,
+				y: 2.5,
+				z: 0,
+				radius: 3
+			},
+			{
+				x: 0,
+				y: 5,
+				z: 0,
+				radius: 2.5
+			},
+			{
+				x: 0,
+				y: 9.5,
+				z: 0,
+				radius: 1.7
+			}
+		];
+
+		stage.models.snowman.position.y = 0;
+
+		let snowmanGroup = new Group();
+		snowmanGroup.add(stage.models.snowman);
+		stage.scene.add(snowmanGroup);
+
+		shapes.forEach(sphere => {
+			let shape = physics.createSphereShape(sphere.radius);
+			
+			if(showGuides)
+			{
+				let b = stage.createSphere(sphere.radius, 0xff0000);
+				b.position.set(sphere.x, sphere.y, sphere.z);
+				b.rotation.set(0,0,0);
+				snowmanGroup.add(b);
+			}
+
+			body.addShape(shape, new CANNON.Vec3(sphere.x, sphere.y, sphere.z), new CANNON.Quaternion(0, 0, 0));
+		})
+
+		var physicsItem = { 
+			mesh: snowmanGroup,
+			physics: body,
+		}
+		
+		// body.velocity.set(-40, 30, -40)
+		// const angularRandomness = 5;
+		// body.angularVelocity.set(
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+		// body.angularDamping = 0.8;
+		
+		physicsItems.push(physicsItem);
+
+		return physicsItem;
+	}
+
+	function createStar()
+	{
+
+		
+		// let body = physics.createBody(10, {x: 30, y: -10, z: 30}, {y: -Math.PI * 0.001, x: Math.PI * 0.001}, PHYSICS_MATERIAL.lowBounce);
+		let body = physics.createBody(1, {x: 30, y: -10, z: 30}, {y: 0, x: Math.PI * .5}, PHYSICS_MATERIAL.normalBounce);
+		// physics.setAngle(body, -Math.PI * 0.5, 'x');
+		let shapes = [
+			{
+				x: 0,
+				y: 0,
+				z: 0,
+				topRadius: 1,
+				bottomRadius: 1,
+				height: 0.5,
+				segments: 5
+			}
+		];
+
+		let star = stars.shift();
+		star.position.y = 0;
+
+		
+		
+
+		shapes.forEach(cylinder => {
+			let shape = physics.createCylinderShape(cylinder.topRadius, cylinder.bottomRadius, cylinder.height, cylinder.segments);
+			
+			if(showGuides)
+			{
+				let b = stage.createCylinder(cylinder.topRadius, cylinder.bottomRadius, cylinder.height, cylinder.segments, 0xff0000);
+				b.position.set(cylinder.x, cylinder.y, cylinder.z);
+				b.rotation.set(0,0,0);
+				star.add(b);
+			}
+
+			body.addShape(shape, new CANNON.Vec3(cylinder.x, cylinder.y, cylinder.z), new CANNON.Quaternion(0, 0, cylinder.rotation));
+		})
+
+
+		var physicsItem = { 
+			mesh: star,
+			physics: body,
+		}
+		
+		// body.velocity.set(-40, 30, -40)
+		// const angularRandomness = 5;
+		// body.angularVelocity.set(
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)),
+		// 	((Math.random() * angularRandomness) - (angularRandomness/2)))
+		// body.angularDamping = 0.8;
+		
+		physicsItems.push(physicsItem);
+
+		return physicsItem;
+	}
+
+next();
\ No newline at end of file
diff --git a/christmas-cannon/src/style.scss b/christmas-cannon/src/style.scss
new file mode 100644
index 0000000..6627d99
--- /dev/null
+++ b/christmas-cannon/src/style.scss
@@ -0,0 +1,166 @@
+@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
+
+*
+{
+  font-family: 'Fredoka One', sans-serif;
+}
+
+html, body
+{
+	width: 100%;
+	min-height: 100%;
+	margin: 0;
+	padding: 0;
+	font-size: 20px;
+	
+}
+
+body 
+{
+  background: #eee;
+  background: linear-gradient(to left, #ddd , #eee);
+  position: relative;
+	overflow: hidden;
+}
+
+.page
+{
+  z-index: 2;
+  position: relative;
+  width: calc(80vw - 80px);
+  padding: 20px 40px;
+  margin: 0;
+  
+}
+
+#canvas-container
+{
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    
+}
+
+.spacer
+{
+  display: block;
+  width: 100%;
+  height: 40vh;
+}
+
+.status
+{
+  font-size: 3rem;
+}
+
+#loading
+{
+    position: absolute;
+    background-color: #3A3F69;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 10;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 3rem;
+    font-family: 'Fredoka One', cursive;
+}
+
+#ui
+{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 5;
+
+  user-select: none;
+
+  .positioner
+  {
+    width: 130vh;
+    max-width: 100vw;
+    height: 100vh;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 100px 1fr 200px;
+    align-items: flex-end;
+  }
+
+  .speech-bubble
+  {
+    display: flex;
+    justify-content: flex-end;
+  }
+  
+  #bubble 
+  {
+    padding: 1.5rem 2rem;
+    width: calc(100% - 4rem);
+    max-width: calc(400px - 4rem);
+    background-color: white;
+    border-radius: 1.7rem;
+    margin-bottom: 3rem;
+    position: relative;
+    cursor: pointer;
+
+    &::after
+    {
+      content: '';
+      width: 0; 
+      height: 0; 
+      border-top: 1rem solid transparent;
+      border-bottom: 1rem solid transparent; 
+  
+      border-left:1rem solid white; 
+      position: absolute;
+      left: calc(100% - 0.25rem);
+      bottom: 1rem;
+    }
+
+    
+  }
+}
+
+#text-highlight
+{
+  font-size: 1.5rem;
+  display: inline-block;
+}
+
+#next
+{
+  // opacity: 0;
+  color: #505050;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  text-align: right;
+  margin-top: 1rem;
+  transition: opacity 0.2s ease-in-out;
+  display: none;
+}
+
+#steve
+{
+	
+width: 100%;
+}
+
+.waiting
+{
+  #next
+  {
+    // display: block;
+  }
+}
+
+.game
+{
+  cursor: url(https://assets.codepen.io/557388/crosshair.svg) 41 41, auto;
+}
\ No newline at end of file
diff --git a/city/README.markdown b/city/README.markdown
new file mode 100644
index 0000000..f6424e7
--- /dev/null
+++ b/city/README.markdown
@@ -0,0 +1,5 @@
+# City
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/b29/pen/yLzJbzy](https://codepen.io/b29/pen/yLzJbzy).
+
+
diff --git a/city/dist/index.html b/city/dist/index.html
new file mode 100644
index 0000000..c35bb8f
--- /dev/null
+++ b/city/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - City</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r59/three.min.js"></script>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/city/dist/script.js b/city/dist/script.js
new file mode 100644
index 0000000..fc171e9
--- /dev/null
+++ b/city/dist/script.js
@@ -0,0 +1,183 @@
+var renderer	= new THREE.WebGLRenderer();
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	document.body.appendChild( renderer.domElement );
+
+
+
+	var updateFcts	= [];
+	var scene	= new THREE.Scene();
+	var camera	= new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 3000 );
+	camera.position.z = 200;
+
+
+
+   window.addEventListener("resize", function() {
+    let width = window.innerWidth;
+    let height = window.innerHeight;
+    renderer.setSize(width, height);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+  });
+
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		comment								//
+	//////////////////////////////////////////////////////////////////////////////////
+	// from @mrdoob http://www.mrdoob.com/lab/javascript/webgl/city/01/
+
+	var THREEx = THREEx || {}
+
+	THREEx.ProceduralCity	= function(){
+		// build the base geometry for each building
+		var geometry = new THREE.CubeGeometry( 1, 1, 1 );
+		// translate the geometry to place the pivot point at the bottom instead of the center
+		geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0.5, 0 ) );
+		// get rid of the bottom face - it is never seen
+		geometry.faces.splice( 3, 1 );
+		geometry.faceVertexUvs[0].splice( 3, 1 );
+		// change UVs for the top face
+		// - it is the roof so it wont use the same texture as the side of the building
+		// - set the UVs to the single coordinate 0,0. so the roof will be the same color
+		//   as a floor row.
+		geometry.faceVertexUvs[0][2][0].set( 0, 0 );
+		geometry.faceVertexUvs[0][2][1].set( 0, 0 );
+		geometry.faceVertexUvs[0][2][2].set( 0, 0 );
+		geometry.faceVertexUvs[0][2][3].set( 0, 0 );
+		// buildMesh
+		var buildingMesh= new THREE.Mesh( geometry );
+
+		// base colors for vertexColors. light is for vertices at the top, shaddow is for the ones at the bottom
+		var light	= new THREE.Color( 0xffffff )
+		var shadow	= new THREE.Color( 0x303050 )
+
+		var cityGeometry= new THREE.Geometry();
+		for( var i = 0; i < 20000; i ++ ){
+			// put a random position
+			buildingMesh.position.x	= Math.floor( Math.random() * 200 - 100 ) * 10;
+			buildingMesh.position.z	= Math.floor( Math.random() * 200 - 100 ) * 10;
+			// put a random rotation
+			buildingMesh.rotation.y	= Math.random()*Math.PI*2;
+			// put a random scale
+			buildingMesh.scale.x	= Math.random() * Math.random() * Math.random() * Math.random() * 50 + 10;
+			buildingMesh.scale.y	= (Math.random() * Math.random() * Math.random() * buildingMesh.scale.x) * 8 + 8;
+			buildingMesh.scale.z	= buildingMesh.scale.x
+
+			// establish the base color for the buildingMesh
+			var value	= 1 - Math.random() * Math.random();
+			var baseColor	= new THREE.Color().setRGB( value + Math.random() * 0.1, value, value + Math.random() * 0.1 );
+			// set topColor/bottom vertexColors as adjustement of baseColor
+			var topColor	= baseColor.clone().multiply( light );
+			var bottomColor	= baseColor.clone().multiply( shadow );
+			// set .vertexColors for each face
+			var geometry	= buildingMesh.geometry;		
+			for ( var j = 0, jl = geometry.faces.length; j < jl; j ++ ) {
+				if ( j === 2 ) {
+					// set face.vertexColors on root face
+					geometry.faces[ j ].vertexColors = [ baseColor, baseColor, baseColor, baseColor ];
+				} else {
+					// set face.vertexColors on sides faces
+					geometry.faces[ j ].vertexColors = [ topColor, bottomColor, bottomColor, topColor ];
+				}
+			}
+			// merge it with cityGeometry - very important for performance
+			THREE.GeometryUtils.merge( cityGeometry, buildingMesh );
+		}
+
+		// generate the texture
+		var texture		= new THREE.Texture( generateTextureCanvas() );
+		texture.anisotropy	= renderer.getMaxAnisotropy();
+		texture.needsUpdate	= true;
+
+		// build the mesh
+		var material	= new THREE.MeshLambertMaterial({
+			map		: texture,
+			vertexColors	: THREE.VertexColors
+		});
+		var mesh = new THREE.Mesh(cityGeometry, material );
+		return mesh
+
+		function generateTextureCanvas(){
+			// build a small canvas 32x64 and paint it in white
+			var canvas	= document.createElement( 'canvas' );
+			canvas.width	= 32;
+			canvas.height	= 64;
+			var context	= canvas.getContext( '2d' );
+			// plain it in white
+			context.fillStyle	= '#ffffff';
+			context.fillRect( 0, 0, 32, 64 );
+			// draw the window rows - with a small noise to simulate light variations in each room
+			for( var y = 2; y < 64; y += 2 ){
+				for( var x = 0; x < 32; x += 2 ){
+					var value	= Math.floor( Math.random() * 64 );
+					context.fillStyle = 'rgb(' + [value, value, value].join( ',' )  + ')';
+					context.fillRect( x, y, 2, 1 );
+				}
+			}
+
+			// build a bigger canvas and copy the small one in it
+			// This is a trick to upscale the texture without filtering
+			var canvas2	= document.createElement( 'canvas' );
+			canvas2.width	= 512;
+			canvas2.height	= 1024;
+			var context	= canvas2.getContext( '2d' );
+			// disable smoothing
+			context.imageSmoothingEnabled		= false;
+			context.webkitImageSmoothingEnabled	= false;
+			context.mozImageSmoothingEnabled	= false;
+			// then draw the image
+			context.drawImage( canvas, 0, 0, canvas2.width, canvas2.height );
+			// return the just built canvas2
+			return canvas2;
+		}
+	}
+
+	
+	var city	= new THREEx.ProceduralCity()
+	scene.add(city)	
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		add an object and make it move					//
+	//////////////////////////////////////////////////////////////////////////////////
+
+	var light	= new THREE.HemisphereLight( 0xfffff0, 0x101020, 1.25 );
+	light.position.set( 0.75, 1, 0.25 );
+	scene.add( light );
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Camera Controls							//
+	//////////////////////////////////////////////////////////////////////////////////
+	var mouse	= {x : 0, y : 0}
+	document.addEventListener('mousemove', function(event){
+		mouse.x	= (event.clientX / window.innerWidth ) - 0.5
+		mouse.y	= (event.clientY / window.innerHeight) - 0.5
+	}, false)
+	updateFcts.push(function(delta, now){
+		camera.position.x += (mouse.x*300 - camera.position.x) * (delta*3)
+		camera.position.y += (mouse.y*300 - (camera.position.y-200)) * (delta*3)
+		camera.lookAt( scene.position )
+	})
+
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		render the scene						//
+	//////////////////////////////////////////////////////////////////////////////////
+	updateFcts.push(function(){
+		renderer.render( scene, camera );		
+	})
+	
+	//////////////////////////////////////////////////////////////////////////////////
+	//		loop runner							//
+	//////////////////////////////////////////////////////////////////////////////////
+	var lastTimeMsec= null
+	requestAnimationFrame(function animate(nowMsec){
+		// keep looping
+		requestAnimationFrame( animate );
+		// measure time
+		lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
+		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
+		lastTimeMsec	= nowMsec
+		// call each update function
+		updateFcts.forEach(function(updateFn){
+			updateFn(deltaMsec/1000, nowMsec/1000)
+		})
+	})
\ No newline at end of file
diff --git a/city/dist/style.css b/city/dist/style.css
new file mode 100644
index 0000000..76d6f52
--- /dev/null
+++ b/city/dist/style.css
@@ -0,0 +1 @@
+body{margin: 0px; background-color: #bbbbbb; overflow: hidden;}
\ No newline at end of file
diff --git a/city/license.txt b/city/license.txt
new file mode 100644
index 0000000..7c6e7f9
--- /dev/null
+++ b/city/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Baron (https://codepen.io/b29/pen/yLzJbzy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/city/src/index.html b/city/src/index.html
new file mode 100644
index 0000000..b3f6785
--- /dev/null
+++ b/city/src/index.html
@@ -0,0 +1 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r59/three.min.js"></script>
\ No newline at end of file
diff --git a/city/src/script.js b/city/src/script.js
new file mode 100644
index 0000000..fc171e9
--- /dev/null
+++ b/city/src/script.js
@@ -0,0 +1,183 @@
+var renderer	= new THREE.WebGLRenderer();
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	document.body.appendChild( renderer.domElement );
+
+
+
+	var updateFcts	= [];
+	var scene	= new THREE.Scene();
+	var camera	= new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 3000 );
+	camera.position.z = 200;
+
+
+
+   window.addEventListener("resize", function() {
+    let width = window.innerWidth;
+    let height = window.innerHeight;
+    renderer.setSize(width, height);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+  });
+
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		comment								//
+	//////////////////////////////////////////////////////////////////////////////////
+	// from @mrdoob http://www.mrdoob.com/lab/javascript/webgl/city/01/
+
+	var THREEx = THREEx || {}
+
+	THREEx.ProceduralCity	= function(){
+		// build the base geometry for each building
+		var geometry = new THREE.CubeGeometry( 1, 1, 1 );
+		// translate the geometry to place the pivot point at the bottom instead of the center
+		geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0.5, 0 ) );
+		// get rid of the bottom face - it is never seen
+		geometry.faces.splice( 3, 1 );
+		geometry.faceVertexUvs[0].splice( 3, 1 );
+		// change UVs for the top face
+		// - it is the roof so it wont use the same texture as the side of the building
+		// - set the UVs to the single coordinate 0,0. so the roof will be the same color
+		//   as a floor row.
+		geometry.faceVertexUvs[0][2][0].set( 0, 0 );
+		geometry.faceVertexUvs[0][2][1].set( 0, 0 );
+		geometry.faceVertexUvs[0][2][2].set( 0, 0 );
+		geometry.faceVertexUvs[0][2][3].set( 0, 0 );
+		// buildMesh
+		var buildingMesh= new THREE.Mesh( geometry );
+
+		// base colors for vertexColors. light is for vertices at the top, shaddow is for the ones at the bottom
+		var light	= new THREE.Color( 0xffffff )
+		var shadow	= new THREE.Color( 0x303050 )
+
+		var cityGeometry= new THREE.Geometry();
+		for( var i = 0; i < 20000; i ++ ){
+			// put a random position
+			buildingMesh.position.x	= Math.floor( Math.random() * 200 - 100 ) * 10;
+			buildingMesh.position.z	= Math.floor( Math.random() * 200 - 100 ) * 10;
+			// put a random rotation
+			buildingMesh.rotation.y	= Math.random()*Math.PI*2;
+			// put a random scale
+			buildingMesh.scale.x	= Math.random() * Math.random() * Math.random() * Math.random() * 50 + 10;
+			buildingMesh.scale.y	= (Math.random() * Math.random() * Math.random() * buildingMesh.scale.x) * 8 + 8;
+			buildingMesh.scale.z	= buildingMesh.scale.x
+
+			// establish the base color for the buildingMesh
+			var value	= 1 - Math.random() * Math.random();
+			var baseColor	= new THREE.Color().setRGB( value + Math.random() * 0.1, value, value + Math.random() * 0.1 );
+			// set topColor/bottom vertexColors as adjustement of baseColor
+			var topColor	= baseColor.clone().multiply( light );
+			var bottomColor	= baseColor.clone().multiply( shadow );
+			// set .vertexColors for each face
+			var geometry	= buildingMesh.geometry;		
+			for ( var j = 0, jl = geometry.faces.length; j < jl; j ++ ) {
+				if ( j === 2 ) {
+					// set face.vertexColors on root face
+					geometry.faces[ j ].vertexColors = [ baseColor, baseColor, baseColor, baseColor ];
+				} else {
+					// set face.vertexColors on sides faces
+					geometry.faces[ j ].vertexColors = [ topColor, bottomColor, bottomColor, topColor ];
+				}
+			}
+			// merge it with cityGeometry - very important for performance
+			THREE.GeometryUtils.merge( cityGeometry, buildingMesh );
+		}
+
+		// generate the texture
+		var texture		= new THREE.Texture( generateTextureCanvas() );
+		texture.anisotropy	= renderer.getMaxAnisotropy();
+		texture.needsUpdate	= true;
+
+		// build the mesh
+		var material	= new THREE.MeshLambertMaterial({
+			map		: texture,
+			vertexColors	: THREE.VertexColors
+		});
+		var mesh = new THREE.Mesh(cityGeometry, material );
+		return mesh
+
+		function generateTextureCanvas(){
+			// build a small canvas 32x64 and paint it in white
+			var canvas	= document.createElement( 'canvas' );
+			canvas.width	= 32;
+			canvas.height	= 64;
+			var context	= canvas.getContext( '2d' );
+			// plain it in white
+			context.fillStyle	= '#ffffff';
+			context.fillRect( 0, 0, 32, 64 );
+			// draw the window rows - with a small noise to simulate light variations in each room
+			for( var y = 2; y < 64; y += 2 ){
+				for( var x = 0; x < 32; x += 2 ){
+					var value	= Math.floor( Math.random() * 64 );
+					context.fillStyle = 'rgb(' + [value, value, value].join( ',' )  + ')';
+					context.fillRect( x, y, 2, 1 );
+				}
+			}
+
+			// build a bigger canvas and copy the small one in it
+			// This is a trick to upscale the texture without filtering
+			var canvas2	= document.createElement( 'canvas' );
+			canvas2.width	= 512;
+			canvas2.height	= 1024;
+			var context	= canvas2.getContext( '2d' );
+			// disable smoothing
+			context.imageSmoothingEnabled		= false;
+			context.webkitImageSmoothingEnabled	= false;
+			context.mozImageSmoothingEnabled	= false;
+			// then draw the image
+			context.drawImage( canvas, 0, 0, canvas2.width, canvas2.height );
+			// return the just built canvas2
+			return canvas2;
+		}
+	}
+
+	
+	var city	= new THREEx.ProceduralCity()
+	scene.add(city)	
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		add an object and make it move					//
+	//////////////////////////////////////////////////////////////////////////////////
+
+	var light	= new THREE.HemisphereLight( 0xfffff0, 0x101020, 1.25 );
+	light.position.set( 0.75, 1, 0.25 );
+	scene.add( light );
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Camera Controls							//
+	//////////////////////////////////////////////////////////////////////////////////
+	var mouse	= {x : 0, y : 0}
+	document.addEventListener('mousemove', function(event){
+		mouse.x	= (event.clientX / window.innerWidth ) - 0.5
+		mouse.y	= (event.clientY / window.innerHeight) - 0.5
+	}, false)
+	updateFcts.push(function(delta, now){
+		camera.position.x += (mouse.x*300 - camera.position.x) * (delta*3)
+		camera.position.y += (mouse.y*300 - (camera.position.y-200)) * (delta*3)
+		camera.lookAt( scene.position )
+	})
+
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		render the scene						//
+	//////////////////////////////////////////////////////////////////////////////////
+	updateFcts.push(function(){
+		renderer.render( scene, camera );		
+	})
+	
+	//////////////////////////////////////////////////////////////////////////////////
+	//		loop runner							//
+	//////////////////////////////////////////////////////////////////////////////////
+	var lastTimeMsec= null
+	requestAnimationFrame(function animate(nowMsec){
+		// keep looping
+		requestAnimationFrame( animate );
+		// measure time
+		lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
+		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
+		lastTimeMsec	= nowMsec
+		// call each update function
+		updateFcts.forEach(function(updateFn){
+			updateFn(deltaMsec/1000, nowMsec/1000)
+		})
+	})
\ No newline at end of file
diff --git a/city/src/style.css b/city/src/style.css
new file mode 100644
index 0000000..76d6f52
--- /dev/null
+++ b/city/src/style.css
@@ -0,0 +1 @@
+body{margin: 0px; background-color: #bbbbbb; overflow: hidden;}
\ No newline at end of file
diff --git a/claymorphism/README.markdown b/claymorphism/README.markdown
new file mode 100644
index 0000000..b46142a
--- /dev/null
+++ b/claymorphism/README.markdown
@@ -0,0 +1,5 @@
+# Claymorphism
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/antoniasymeonidou/pen/RwLMqxy](https://codepen.io/antoniasymeonidou/pen/RwLMqxy).
+
+
diff --git a/claymorphism/dist/index.html b/claymorphism/dist/index.html
new file mode 100644
index 0000000..c35abf2
--- /dev/null
+++ b/claymorphism/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Claymorphism</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="box">
+  <h2 class="claymorphism">Claymorphism</h2>
+  <p class="trend">New Trend 2022</p>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/claymorphism/dist/style.css b/claymorphism/dist/style.css
new file mode 100644
index 0000000..84f6991
--- /dev/null
+++ b/claymorphism/dist/style.css
@@ -0,0 +1,34 @@
+@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300&family=Press+Start+2P&family=Prompt&family=Rock+3D&family=Wendy+One&display=swap');
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+body {
+  background: #b5ead7;
+  font-family: 'Prompt', sans-serif;
+}
+
+.box {
+  width: 300px;
+  height: 300px;
+  border-radius: 30px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  text-align: center;
+  padding-top: 100px;
+  background: white;
+  box-shadow: 0 35px 65px 0 rgba(86, 184, 149,0.42), inset 0 -10px 15px 0 rgba(113, 235, 191,0.8);
+}
+
+.claymorphism {
+  font-size: 2em;
+  line-height: 2;
+}
+
+.trend {
+  font-size: 1em;
+}
\ No newline at end of file
diff --git a/claymorphism/license.txt b/claymorphism/license.txt
new file mode 100644
index 0000000..19d3898
--- /dev/null
+++ b/claymorphism/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by NANOUU (https://codepen.io/antoniasymeonidou/pen/RwLMqxy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/claymorphism/src/index.html b/claymorphism/src/index.html
new file mode 100644
index 0000000..5e39523
--- /dev/null
+++ b/claymorphism/src/index.html
@@ -0,0 +1,4 @@
+<div class="box">
+  <h2 class="claymorphism">Claymorphism</h2>
+  <p class="trend">New Trend 2022</p>
+</div>
\ No newline at end of file
diff --git a/claymorphism/src/style.css b/claymorphism/src/style.css
new file mode 100644
index 0000000..84f6991
--- /dev/null
+++ b/claymorphism/src/style.css
@@ -0,0 +1,34 @@
+@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300&family=Press+Start+2P&family=Prompt&family=Rock+3D&family=Wendy+One&display=swap');
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+body {
+  background: #b5ead7;
+  font-family: 'Prompt', sans-serif;
+}
+
+.box {
+  width: 300px;
+  height: 300px;
+  border-radius: 30px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  text-align: center;
+  padding-top: 100px;
+  background: white;
+  box-shadow: 0 35px 65px 0 rgba(86, 184, 149,0.42), inset 0 -10px 15px 0 rgba(113, 235, 191,0.8);
+}
+
+.claymorphism {
+  font-size: 2em;
+  line-height: 2;
+}
+
+.trend {
+  font-size: 1em;
+}
\ No newline at end of file
diff --git a/clip-path-theme-switch-backdrop-filter-version/LICENSE.txt b/clip-path-theme-switch-backdrop-filter-version/LICENSE.txt
new file mode 100644
index 0000000..1e8f47b
--- /dev/null
+++ b/clip-path-theme-switch-backdrop-filter-version/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Chukwuma Okere (https://codepen.io/chukwumaokere/pen/poKWZyL)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/clip-path-theme-switch-backdrop-filter-version/README.md b/clip-path-theme-switch-backdrop-filter-version/README.md
new file mode 100644
index 0000000..774c89a
--- /dev/null
+++ b/clip-path-theme-switch-backdrop-filter-version/README.md
@@ -0,0 +1,4 @@
+# Clip-path Theme Switch (Backdrop-Filter version) 🤔
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/chukwumaokere/pen/poKWZyL](https://codepen.io/chukwumaokere/pen/poKWZyL).
+
diff --git a/clip-path-theme-switch-backdrop-filter-version/dist/index.html b/clip-path-theme-switch-backdrop-filter-version/dist/index.html
new file mode 100644
index 0000000..2e242e2
--- /dev/null
+++ b/clip-path-theme-switch-backdrop-filter-version/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Clip-path Theme Switch (Backdrop-Filter version) 🤔</title>
+  <script src="https://cdn.tailwindcss.com"></script><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id='root'></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/clip-path-theme-switch-backdrop-filter-version/dist/script.js b/clip-path-theme-switch-backdrop-filter-version/dist/script.js
new file mode 100644
index 0000000..945774d
--- /dev/null
+++ b/clip-path-theme-switch-backdrop-filter-version/dist/script.js
@@ -0,0 +1,327 @@
+/* Inspired and modelled after https://twitter.com/emilkowalski_/status/1592997196911501312?s=20&t=_ZLymh8Tb2IcsZqCLiIACg
+
+Obviously its a bit different. He uses clip-path and im trying to use backdrop-filter to invert. It could use some cleanup with #overlay.active cleaning up some asset colors, but its an idea for now. 
+*/
+
+function ButtonWithIcon({ text }) {
+  return /*#__PURE__*/(
+    React.createElement("div", { className: "flex flex-shrink-0" }, /*#__PURE__*/
+    React.createElement("button", { className: "cursor-pointer px-3 py-2 bg-black text-white rounded-md flex flex-row items-center gap-10" }, /*#__PURE__*/
+    React.createElement("span", null, text), /*#__PURE__*/
+    React.createElement("div", { className: "w-5 h-5" }, /*#__PURE__*/
+    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon icon-tabler icon-tabler-chevron-down", width: "100%", height: "100%", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }, /*#__PURE__*/
+    React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), /*#__PURE__*/
+    React.createElement("polyline", { points: "6 9 12 15 18 9" }))))));
+
+
+
+
+
+}
+
+function ButtonGroup() {
+  return /*#__PURE__*/(
+    React.createElement("div", { className: "grid grid-cols-2 border-2 border-gray-200 divide-x rounded-md bg-white flex-shrink-0" }, /*#__PURE__*/
+    React.createElement("div", { className: "p-2 flex items-center cursor-pointer bg-gray-100" }, /*#__PURE__*/
+    React.createElement("div", { className: "w-4 h-4" }, /*#__PURE__*/
+    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon icon-tabler icon-tabler-layout-grid", width: "100%", height: "100%", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }, /*#__PURE__*/
+    React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), /*#__PURE__*/
+    React.createElement("rect", { x: "4", y: "4", width: "6", height: "6", rx: "1" }), /*#__PURE__*/
+    React.createElement("rect", { x: "14", y: "4", width: "6", height: "6", rx: "1" }), /*#__PURE__*/
+    React.createElement("rect", { x: "4", y: "14", width: "6", height: "6", rx: "1" }), /*#__PURE__*/
+    React.createElement("rect", { x: "14", y: "14", width: "6", height: "6", rx: "1" })))), /*#__PURE__*/
+
+
+
+    React.createElement("div", { className: "p-2 flex items-center cursor-pointer" }, /*#__PURE__*/
+    React.createElement("div", { className: "w-4 h-4" }, /*#__PURE__*/
+    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon icon-tabler icon-tabler-list", width: "100%", height: "100%", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }, /*#__PURE__*/
+    React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), /*#__PURE__*/
+    React.createElement("line", { x1: "9", y1: "6", x2: "20", y2: "6" }), /*#__PURE__*/
+    React.createElement("line", { x1: "9", y1: "12", x2: "20", y2: "12" }), /*#__PURE__*/
+    React.createElement("line", { x1: "9", y1: "18", x2: "20", y2: "18" }), /*#__PURE__*/
+    React.createElement("line", { x1: "5", y1: "6", x2: "5", y2: "6.01" }), /*#__PURE__*/
+    React.createElement("line", { x1: "5", y1: "12", x2: "5", y2: "12.01" }), /*#__PURE__*/
+    React.createElement("line", { x1: "5", y1: "18", x2: "5", y2: "18.01" }))))));
+
+
+
+
+
+}
+
+function SearchBar({ placeholder }) {
+  return /*#__PURE__*/(
+    React.createElement("div", { className: "w-full relative block" }, /*#__PURE__*/
+    React.createElement("span", { class: "absolute inset-y-0 left-0 flex items-center pl-4 h-full" }, /*#__PURE__*/
+    React.createElement("div", { className: "w-5 h-5 text-gray-400" }, /*#__PURE__*/
+    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon icon-tabler icon-tabler-search", width: "100%", height: "100%", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }, /*#__PURE__*/
+    React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), /*#__PURE__*/
+    React.createElement("circle", { cx: "10", cy: "10", r: "7" }), /*#__PURE__*/
+    React.createElement("line", { x1: "21", y1: "21", x2: "15", y2: "15" })))), /*#__PURE__*/
+
+
+
+    React.createElement("input", { className: "pl-12 h-full rounded-md bg-white border-2 border-gray-200 w-full focus:outline-none", placeholder: placeholder, type: "text", name: "search" })));
+
+
+}
+
+function Card({ data }) {
+  return /*#__PURE__*/(
+    React.createElement("div", { className: "p-6 rounded-md bg-white flex flex-col justify-between gap-5 border-2 border-gray-100 shadow-lg" }, /*#__PURE__*/
+    React.createElement("div", { className: "w-full h-full flex justify-between items-center" }, /*#__PURE__*/
+    React.createElement("div", { className: "w-full h-full flex flex-row items-center gap-2" }, /*#__PURE__*/
+    React.createElement("div", { className: "bg-black rounded-full w-9 h-9 text-white flex items-center justify-center antialiased font-serif" }, "N"), /*#__PURE__*/
+    React.createElement("div", { className: "flex flex-col h-full" }, /*#__PURE__*/
+    React.createElement("span", { className: "font-bold text-black" }, data.title), /*#__PURE__*/
+    React.createElement("span", { className: "text-gray-400 font-semibold text-sm" }, data.subtitle))), /*#__PURE__*/
+
+
+    React.createElement("div", { className: "bg-gray-200 rounded-full w-9 h-9 flex justify-center items-center" }, /*#__PURE__*/
+    React.createElement("div", { className: "bg-white rounded-full w-7 h-7" }, /*#__PURE__*/
+    React.createElement("div", { className: "flex justify-center items-center w-full h-full text-gray-400" }, /*#__PURE__*/
+    React.createElement("div", { className: "w-5 h-5" }, /*#__PURE__*/
+    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon icon-tabler icon-tabler-activity", width: "100%", height: "100%", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }, /*#__PURE__*/
+    React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), /*#__PURE__*/
+    React.createElement("path", { d: "M3 12h4l3 8l4 -16l3 8h4" }))))))), /*#__PURE__*/
+
+
+
+
+
+
+    React.createElement("div", { className: "w-full h-full" }, /*#__PURE__*/
+    React.createElement("span", { className: "font-semibold text-md text-gray-600" }, data.content)), /*#__PURE__*/
+
+    React.createElement("div", { className: "flex flex-row items-center gap-1 text-gray-500 font-medium" }, /*#__PURE__*/
+    React.createElement("div", { className: "w-4 h-4" }, /*#__PURE__*/
+    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon icon-tabler icon-tabler-git-branch", width: "100%", height: "100%", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }, /*#__PURE__*/
+    React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), /*#__PURE__*/
+    React.createElement("circle", { cx: "7", cy: "18", r: "2" }), /*#__PURE__*/
+    React.createElement("circle", { cx: "7", cy: "6", r: "2" }), /*#__PURE__*/
+    React.createElement("circle", { cx: "17", cy: "6", r: "2" }), /*#__PURE__*/
+    React.createElement("line", { x1: "7", y1: "8", x2: "7", y2: "16" }), /*#__PURE__*/
+    React.createElement("path", { d: "M9 18h6a2 2 0 0 0 2 -2v-5" }), /*#__PURE__*/
+    React.createElement("polyline", { points: "14 14 17 11 20 14" }))), /*#__PURE__*/
+
+
+    React.createElement("span", null, "From ", /*#__PURE__*/React.createElement("span", { className: "text-md font-mono bg-gray-100 px-1" }, data.from))), /*#__PURE__*/
+
+    React.createElement("div", { className: "flex flex-row items-center h-full" }, /*#__PURE__*/
+    React.createElement("span", { className: "text-gray-400 font-medium" }, data.date, "d ago via\xA0"), /*#__PURE__*/
+    React.createElement("div", { className: "w-5 h-5 flex items-center" }, /*#__PURE__*/
+    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-github", viewBox: "0 0 16 16" }, /*#__PURE__*/
+    React.createElement("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" }))))));
+
+
+
+
+
+}
+
+function Content() {
+  const cardsList = [
+  {
+    title: 'test-user-card',
+    subtitle: 'test-user-app.vercel.app',
+    content: 'Initial commit from Create Next App',
+    from: 'main',
+    date: '10' },
+
+  {
+    title: 'test-user-card',
+    subtitle: 'test-user-app.vercel.app',
+    content: 'Initial commit from Create Next App',
+    from: 'main',
+    date: '10' },
+
+  {
+    title: 'test-user-card',
+    subtitle: 'test-user-app.vercel.app',
+    content: 'Initial commit from Create Next App',
+    from: 'main',
+    date: '10' },
+
+  {
+    title: 'test-user-card',
+    subtitle: 'test-user-app.vercel.app',
+    content: 'Initial commit from Create Next App',
+    from: 'main',
+    date: '10' },
+
+  {
+    title: 'test-user-card',
+    subtitle: 'test-user-app.vercel.app',
+    content: 'Initial commit from Create Next App',
+    from: 'main',
+    date: '10' },
+
+  {
+    title: 'test-user-card',
+    subtitle: 'test-user-app.vercel.app',
+    content: 'Initial commit from Create Next App',
+    from: 'main',
+    date: '10' },
+
+  {
+    title: 'test-user-card',
+    subtitle: 'test-user-app.vercel.app',
+    content: 'Initial commit from Create Next App',
+    from: 'main',
+    date: '10' },
+
+  {
+    title: 'test-user-card',
+    subtitle: 'test-user-app.vercel.app',
+    content: 'Initial commit from Create Next App',
+    from: 'main',
+    date: '10' },
+
+  {
+    title: 'test-user-card',
+    subtitle: 'test-user-app.vercel.app',
+    content: 'Initial commit from Create Next App',
+    from: 'main',
+    date: '10' }];
+
+
+  return /*#__PURE__*/(
+    React.createElement("div", { className: "w-full mx-auto container" }, /*#__PURE__*/
+    React.createElement("div", { className: "w-full flex flex-row gap-2 my-5" }, /*#__PURE__*/
+    React.createElement(SearchBar, { placeholder: 'Search...' }), /*#__PURE__*/
+    React.createElement(ButtonGroup, null), /*#__PURE__*/
+    React.createElement(ButtonWithIcon, { text: 'Add New...' })), /*#__PURE__*/
+
+    React.createElement("div", { className: "grid grid-cols-3 gap-6 justify-evenly w-full" },
+    cardsList.map((card, index) => {
+      return /*#__PURE__*/(
+        React.createElement(Card, { key: index, data: card }));
+
+    }))));
+
+
+
+}
+
+function ThemeButton() {
+  const onClick = React.useCallback(() => {
+    document.querySelector('#overlay').classList.toggle('active');
+  }, []);
+  return /*#__PURE__*/(
+    React.createElement("button", { onClick: onClick, className: "cursor-pointer px-3 py-2 bg-black text-white rounded-md" }, "Toggle Theme"));
+
+}
+
+function HeaderItem({ active, children }) {
+  return /*#__PURE__*/(
+    React.createElement("div", { className: `py-3 font-semibold cursor-pointer text-gray-500/75 hover:text-gray-500 transition-all duration-75 ease-in-out ${active ? 'text-black border-b-2 border-solid border-black hover:text-black' : ''}` },
+    children));
+
+
+}
+
+function Header() {
+  const tabs = [
+  {
+    name: 'Overview',
+    active: true },
+
+  {
+    name: 'Integrations',
+    active: false },
+
+  {
+    name: 'Activity',
+    active: false },
+
+  {
+    name: 'Domains',
+    active: false },
+
+  {
+    name: 'Usage',
+    active: false },
+
+  {
+    name: 'Settings',
+    active: false }];
+
+
+  const supplementalButtons = [
+  'Feedback', 'Changelog', 'Help', 'Docs'];
+
+  return /*#__PURE__*/(
+    React.createElement("div", { className: "w-full bg-white px-6 pt-6 border-b-2 border-gray-200" }, /*#__PURE__*/
+    React.createElement("div", { className: "w-full flex flex-row pb-2" }, /*#__PURE__*/
+    React.createElement("div", { className: "w-full flex flex-row" }, /*#__PURE__*/
+    React.createElement("div", { className: "flex flex-row" }, /*#__PURE__*/
+    React.createElement("svg", { height: "35", width: "60" }, /*#__PURE__*/
+    React.createElement("polygon", { points: "25,0 60,60 0,40" })), /*#__PURE__*/
+
+    React.createElement("div", { className: "flex h-full self-center items-center" }, /*#__PURE__*/
+    React.createElement("svg", { height: "30", width: "50" }, /*#__PURE__*/
+    React.createElement("polygon", { points: "25,0 0,50", style: { strokeWidth: '1px', stroke: 'gray' } })))), /*#__PURE__*/
+
+
+
+    React.createElement("div", { className: "flex flex-row w-full justify-between" }, /*#__PURE__*/
+    React.createElement("div", { className: "flex flex-row items-center gap-2" }, /*#__PURE__*/
+    React.createElement("div", { className: "bg-blue-300 rounded-full w-9 h-9", style: { filter: 'invert(0)' } }), /*#__PURE__*/
+    React.createElement("span", { className: "font-bold text-black" }, "Testing User"), /*#__PURE__*/
+    React.createElement("div", { className: "rounded-full bg-gray-400 text-black px-2 py-1 text-xs font-bold" }, "Hobby")), /*#__PURE__*/
+
+    React.createElement("div", null, /*#__PURE__*/
+    React.createElement(ThemeButton, null)), /*#__PURE__*/
+
+    React.createElement("div", { className: "flex flex-row" },
+    supplementalButtons.map((button, index) => {
+      return /*#__PURE__*/(
+        React.createElement("div", { key: index, className: `cursor-pointer text-gray-500/75 hover:text-gray-500 transition-all duration-75 ease-in-out font-semibold antialiased flex items-center px-3 ${index === 0 ? 'border-2 hover:border-gray-200 border-gray-100 rounded-md' : ''}` }, button));
+
+    }), /*#__PURE__*/
+    React.createElement("div", { className: "w-6 flex items-center h-full mr-2 cursor-pointer text-gray-500/75 hover:text-gray-500 transition-all duration-75 ease-in-out" }, /*#__PURE__*/
+    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon icon-tabler icon-tabler-bell", width: "100%", height: "100%", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }, /*#__PURE__*/
+    React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), /*#__PURE__*/
+    React.createElement("path", { d: "M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" }), /*#__PURE__*/
+    React.createElement("path", { d: "M9 17v1a3 3 0 0 0 6 0v-1" }))), /*#__PURE__*/
+
+
+    React.createElement("div", { className: "bg-blue-300 rounded-full w-9 h-9 cursor-pointer", style: { filter: 'invert(0)' } }))))), /*#__PURE__*/
+
+
+
+
+    React.createElement("div", { className: "w-full flex flex-row gap-6" },
+    tabs.map((tab, index) => {
+      return /*#__PURE__*/(
+        React.createElement(HeaderItem, { key: index, active: tab.active },
+        tab.name));
+
+
+    }))));
+
+
+
+}
+
+function App() {
+  return /*#__PURE__*/(
+    React.createElement("div", { id: "content", className: "w-full h-full flex flex-col bg-blue-50 pb-8 relative" }, /*#__PURE__*/
+    React.createElement("div", { id: "overlay" }), /*#__PURE__*/
+    React.createElement(Header, null), /*#__PURE__*/
+    React.createElement(Content, null)));
+
+
+}
+
+
+
+
+
+
+
+
+
+
+ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));
\ No newline at end of file
diff --git a/clip-path-theme-switch-backdrop-filter-version/dist/style.css b/clip-path-theme-switch-backdrop-filter-version/dist/style.css
new file mode 100644
index 0000000..e5606b3
--- /dev/null
+++ b/clip-path-theme-switch-backdrop-filter-version/dist/style.css
@@ -0,0 +1,32 @@
+:root {
+  --transition-timing: 1s;
+}
+
+body, html{
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100vh;
+}
+
+#overlay {
+  position: absolute;
+  height: 0%;
+  width: 100%;
+  backdrop-filter: invert(1);
+  transition: height var(--transition-timing) ease-in-out;
+  user-select: none;
+  pointer-events: none;
+}
+
+#overlay.active {
+  height: 100%;
+}
+
+#overlay ~ div .shadow-lg {
+  transition: var(--transition-timing) ease-in-out;
+}
+
+#overlay.active ~ div .shadow-lg {
+    box-shadow: none;
+}
\ No newline at end of file
diff --git a/clip-path-theme-switch-backdrop-filter-version/src/index.html b/clip-path-theme-switch-backdrop-filter-version/src/index.html
new file mode 100644
index 0000000..b02261b
--- /dev/null
+++ b/clip-path-theme-switch-backdrop-filter-version/src/index.html
@@ -0,0 +1 @@
+<div id='root'></div>
\ No newline at end of file
diff --git a/clip-path-theme-switch-backdrop-filter-version/src/script.js b/clip-path-theme-switch-backdrop-filter-version/src/script.js
new file mode 100644
index 0000000..e10bda9
--- /dev/null
+++ b/clip-path-theme-switch-backdrop-filter-version/src/script.js
@@ -0,0 +1,327 @@
+/* Inspired and modelled after https://twitter.com/emilkowalski_/status/1592997196911501312?s=20&t=_ZLymh8Tb2IcsZqCLiIACg
+
+Obviously its a bit different. He uses clip-path and im trying to use backdrop-filter to invert. It could use some cleanup with #overlay.active cleaning up some asset colors, but its an idea for now. 
+*/
+
+function ButtonWithIcon ({text}) {
+  return (
+    <div className='flex flex-shrink-0'>
+      <button className='cursor-pointer px-3 py-2 bg-black text-white rounded-md flex flex-row items-center gap-10'>
+        <span>{text}</span>
+        <div className='w-5 h-5'>
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="100%" height="100%" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </div>
+      </button>
+    </div>
+  )
+}
+
+function ButtonGroup () {
+  return (
+    <div className='grid grid-cols-2 border-2 border-gray-200 divide-x rounded-md bg-white flex-shrink-0'>
+      <div className='p-2 flex items-center cursor-pointer bg-gray-100'>
+        <div className='w-4 h-4'>
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-grid" width="100%" height="100%" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <rect x="4" y="4" width="6" height="6" rx="1" />
+            <rect x="14" y="4" width="6" height="6" rx="1" />
+            <rect x="4" y="14" width="6" height="6" rx="1" />
+            <rect x="14" y="14" width="6" height="6" rx="1" />
+          </svg>
+        </div>
+      </div>
+      <div className='p-2 flex items-center cursor-pointer'>
+        <div className='w-4 h-4'>
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list" width="100%" height="100%" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <line x1="9" y1="6" x2="20" y2="6" />
+            <line x1="9" y1="12" x2="20" y2="12" />
+            <line x1="9" y1="18" x2="20" y2="18" />
+            <line x1="5" y1="6" x2="5" y2="6.01" />
+            <line x1="5" y1="12" x2="5" y2="12.01" />
+            <line x1="5" y1="18" x2="5" y2="18.01" />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SearchBar({placeholder}) {
+  return (
+    <div className='w-full relative block'>
+      <span class="absolute inset-y-0 left-0 flex items-center pl-4 h-full">
+        <div className='w-5 h-5 text-gray-400'>
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="100%" height="100%" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <circle cx="10" cy="10" r="7" />
+            <line x1="21" y1="21" x2="15" y2="15" />
+          </svg>
+        </div>
+      </span>
+      <input className='pl-12 h-full rounded-md bg-white border-2 border-gray-200 w-full focus:outline-none' placeholder={placeholder} type='text' name='search' />
+    </div>
+  )
+}
+
+function Card ({data}) {
+  return (
+    <div className='p-6 rounded-md bg-white flex flex-col justify-between gap-5 border-2 border-gray-100 shadow-lg'>
+      <div className='w-full h-full flex justify-between items-center'>
+        <div className='w-full h-full flex flex-row items-center gap-2'>     
+          <div className='bg-black rounded-full w-9 h-9 text-white flex items-center justify-center antialiased font-serif'>N</div>
+          <div className='flex flex-col h-full'>
+            <span className='font-bold text-black'>{data.title}</span>
+            <span className='text-gray-400 font-semibold text-sm'>{data.subtitle}</span>
+          </div>
+        </div>
+        <div className='bg-gray-200 rounded-full w-9 h-9 flex justify-center items-center'>
+          <div className='bg-white rounded-full w-7 h-7'>
+            <div className='flex justify-center items-center w-full h-full text-gray-400'>
+              <div className='w-5 h-5'>
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-activity" width="100%" height="100%" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                  <path d="M3 12h4l3 8l4 -16l3 8h4" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='w-full h-full'>
+        <span className='font-semibold text-md text-gray-600'>{data.content}</span>  
+      </div>
+      <div className='flex flex-row items-center gap-1 text-gray-500 font-medium'>
+        <div className='w-4 h-4'>
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-git-branch" width="100%" height="100%" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <circle cx="7" cy="18" r="2" />
+            <circle cx="7" cy="6" r="2" />
+            <circle cx="17" cy="6" r="2" />
+            <line x1="7" y1="8" x2="7" y2="16" />
+            <path d="M9 18h6a2 2 0 0 0 2 -2v-5" />
+            <polyline points="14 14 17 11 20 14" />
+          </svg>
+        </div>
+        <span>From <span className='text-md font-mono bg-gray-100 px-1'>{data.from}</span></span>
+      </div>
+      <div className='flex flex-row items-center h-full'>
+        <span className='text-gray-400 font-medium'>{data.date}d ago via&nbsp;</span>
+        <div className='w-5 h-5 flex items-center'>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
+            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Content () {
+  const cardsList = [
+    {
+      title: 'test-user-card',
+      subtitle: 'test-user-app.vercel.app',
+      content: 'Initial commit from Create Next App',
+      from: 'main',
+      date: '10'
+    },
+    {
+      title: 'test-user-card',
+      subtitle: 'test-user-app.vercel.app',
+      content: 'Initial commit from Create Next App',
+      from: 'main',
+      date: '10'
+    },
+    {
+      title: 'test-user-card',
+      subtitle: 'test-user-app.vercel.app',
+      content: 'Initial commit from Create Next App',
+      from: 'main',
+      date: '10'
+    },
+    {
+      title: 'test-user-card',
+      subtitle: 'test-user-app.vercel.app',
+      content: 'Initial commit from Create Next App',
+      from: 'main',
+      date: '10'
+    },
+    {
+      title: 'test-user-card',
+      subtitle: 'test-user-app.vercel.app',
+      content: 'Initial commit from Create Next App',
+      from: 'main',
+      date: '10'
+    },
+    {
+      title: 'test-user-card',
+      subtitle: 'test-user-app.vercel.app',
+      content: 'Initial commit from Create Next App',
+      from: 'main',
+      date: '10'
+    },
+    {
+      title: 'test-user-card',
+      subtitle: 'test-user-app.vercel.app',
+      content: 'Initial commit from Create Next App',
+      from: 'main',
+      date: '10'
+    },
+    {
+      title: 'test-user-card',
+      subtitle: 'test-user-app.vercel.app',
+      content: 'Initial commit from Create Next App',
+      from: 'main',
+      date: '10'
+    },
+    {
+      title: 'test-user-card',
+      subtitle: 'test-user-app.vercel.app',
+      content: 'Initial commit from Create Next App',
+      from: 'main',
+      date: '10'
+    },
+  ]
+  return (
+    <div className='w-full mx-auto container'>
+      <div className='w-full flex flex-row gap-2 my-5'>
+          <SearchBar placeholder={'Search...'} />
+          <ButtonGroup />
+          <ButtonWithIcon text={'Add New...'} />
+      </div>
+      <div className='grid grid-cols-3 gap-6 justify-evenly w-full'>
+          {cardsList.map((card, index) => {
+            return (
+              <Card key={index} data={card} />
+            );
+        })}
+      </div>
+    </div>
+  )
+}
+
+function ThemeButton () {
+  const onClick = React.useCallback(() => {
+      document.querySelector('#overlay').classList.toggle('active');
+  }, []);
+  return (
+    <button onClick={onClick} className='cursor-pointer px-3 py-2 bg-black text-white rounded-md'>Toggle Theme</button>
+  );
+}
+
+function HeaderItem ({active, children}) {
+  return (
+    <div className={`py-3 font-semibold cursor-pointer text-gray-500/75 hover:text-gray-500 transition-all duration-75 ease-in-out ${active ? 'text-black border-b-2 border-solid border-black hover:text-black' : ''}`}>
+      {children}
+    </div>
+  )
+}
+
+function Header () {
+  const tabs = [
+    {
+      name: 'Overview',
+      active: true,
+    },
+    {
+      name: 'Integrations',
+      active: false,
+    },
+    {
+      name: 'Activity',
+      active: false,
+    },
+    {
+      name: 'Domains',
+      active: false,
+    },
+    {
+      name: 'Usage',
+      active: false,
+    },
+    {
+      name: 'Settings',
+      active: false,
+    },
+  ];
+  const supplementalButtons = [
+    'Feedback', 'Changelog', 'Help', 'Docs'
+  ];
+  return (
+    <div className='w-full bg-white px-6 pt-6 border-b-2 border-gray-200'>
+      <div className='w-full flex flex-row pb-2'>
+        <div className='w-full flex flex-row'>
+          <div className='flex flex-row'>
+            <svg height="35" width="60">
+              <polygon points="25,0 60,60 0,40" />
+            </svg>
+            <div className='flex h-full self-center items-center'>
+              <svg height="30" width="50">
+                <polygon points="25,0 0,50" style={{strokeWidth: '1px', stroke: 'gray'}} />
+              </svg>
+            </div>
+          </div>
+          <div className='flex flex-row w-full justify-between'>
+            <div className='flex flex-row items-center gap-2'>
+              <div className='bg-blue-300 rounded-full w-9 h-9' style={{filter: 'invert(0)'}}></div>
+              <span className='font-bold text-black'>Testing User</span>
+              <div className='rounded-full bg-gray-400 text-black px-2 py-1 text-xs font-bold'>Hobby</div>
+            </div>
+            <div>
+              <ThemeButton />
+            </div>
+            <div className='flex flex-row'>
+              {supplementalButtons.map((button, index) => {
+                 return (
+                  <div key={index} className={`cursor-pointer text-gray-500/75 hover:text-gray-500 transition-all duration-75 ease-in-out font-semibold antialiased flex items-center px-3 ${index === 0 ? 'border-2 hover:border-gray-200 border-gray-100 rounded-md': ''}`}>{button}</div>
+                 )
+              })}
+              <div className='w-6 flex items-center h-full mr-2 cursor-pointer text-gray-500/75 hover:text-gray-500 transition-all duration-75 ease-in-out'>
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell" width="100%" height="100%" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
+                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
+                </svg>
+              </div>
+              <div className='bg-blue-300 rounded-full w-9 h-9 cursor-pointer' style={{filter: 'invert(0)'}}></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='w-full flex flex-row gap-6'>
+        {tabs.map((tab, index) => {
+          return (
+            <HeaderItem key={index} active={tab.active}>
+              {tab.name}
+            </HeaderItem>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function App () {
+  return (
+    <div id='content' className='w-full h-full flex flex-col bg-blue-50 pb-8 relative'>
+      <div id='overlay'></div>
+      <Header />
+      <Content />
+    </div>
+  );
+}
+
+
+
+
+
+
+
+
+
+
+ReactDOM.render(<App />, document.getElementById("root"));
\ No newline at end of file
diff --git a/clip-path-theme-switch-backdrop-filter-version/src/style.css b/clip-path-theme-switch-backdrop-filter-version/src/style.css
new file mode 100644
index 0000000..e5606b3
--- /dev/null
+++ b/clip-path-theme-switch-backdrop-filter-version/src/style.css
@@ -0,0 +1,32 @@
+:root {
+  --transition-timing: 1s;
+}
+
+body, html{
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100vh;
+}
+
+#overlay {
+  position: absolute;
+  height: 0%;
+  width: 100%;
+  backdrop-filter: invert(1);
+  transition: height var(--transition-timing) ease-in-out;
+  user-select: none;
+  pointer-events: none;
+}
+
+#overlay.active {
+  height: 100%;
+}
+
+#overlay ~ div .shadow-lg {
+  transition: var(--transition-timing) ease-in-out;
+}
+
+#overlay.active ~ div .shadow-lg {
+    box-shadow: none;
+}
\ No newline at end of file
diff --git a/clipped-image-reveal-on-hover/README.markdown b/clipped-image-reveal-on-hover/README.markdown
new file mode 100644
index 0000000..7f34672
--- /dev/null
+++ b/clipped-image-reveal-on-hover/README.markdown
@@ -0,0 +1,5 @@
+# Clipped Image Reveal on Hover
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/kathykato/pen/pogaOKG](https://codepen.io/kathykato/pen/pogaOKG).
+
+Hover effect using clip-path that reveals an image while following the cursor.
diff --git a/clipped-image-reveal-on-hover/dist/index.html b/clipped-image-reveal-on-hover/dist/index.html
new file mode 100644
index 0000000..4c41183
--- /dev/null
+++ b/clipped-image-reveal-on-hover/dist/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Clipped Image Reveal on Hover</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <a class="link" href="#">Tokyo Tower</a>
+  <span class="hover-container">
+    <span class="link-text" aria-hidden="true">Tokyo Tower</span>
+    <span class="image-container">
+      <span class="image-inner">
+        <img class="link-image" src="https://assets.codepen.io/1159990/tokyo-tower.jpg" alt="Tokyo Tower" />
+      </span>
+    </span>
+  </span>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/clipped-image-reveal-on-hover/dist/script.js b/clipped-image-reveal-on-hover/dist/script.js
new file mode 100644
index 0000000..7b4dc1e
--- /dev/null
+++ b/clipped-image-reveal-on-hover/dist/script.js
@@ -0,0 +1,12 @@
+const linkText = document.querySelector('.link-text');
+const linkImage = document.querySelector('.link-image');
+
+function showImgContent(e) {
+  x = e.clientX;
+  y = e.clientY;
+  linkImage.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+  linkText.style.setProperty('--x',(x)+'px');
+  linkText.style.setProperty('--y',(y)+'px');
+}
+
+document.addEventListener('mousemove', showImgContent);
\ No newline at end of file
diff --git a/clipped-image-reveal-on-hover/dist/style.css b/clipped-image-reveal-on-hover/dist/style.css
new file mode 100644
index 0000000..3bfa203
--- /dev/null
+++ b/clipped-image-reveal-on-hover/dist/style.css
@@ -0,0 +1,109 @@
+@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@900&display=swap");
+* {
+  box-sizing: border-box;
+}
+*::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Work Sans', sans-serif;
+  font-size: 1em;
+  margin: 0;
+  background: #f2f0ed;
+  overflow: hidden;
+}
+
+.container {
+  position: relative;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  width: 100%;
+  min-height: 100vh;
+}
+
+a {
+  text-decoration: none;
+}
+
+.link {
+  z-index: 1;
+  position: relative;
+  display: inline-block;
+  font-size: 3em;
+  color: #808080;
+  text-transform: uppercase;
+  -webkit-transition: color 275ms ease;
+  transition: color 275ms ease;
+}
+.link:hover {
+  color: #333;
+}
+.link:hover ~ .hover-container .link-text {
+  opacity: 1;
+}
+.link:hover ~ .hover-container .image-container {
+  opacity: 1;
+}
+
+.link-text {
+  z-index: 2;
+  position: absolute;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  font-size: 3em;
+  color: #fff;
+  text-transform: uppercase;
+  pointer-events: none;
+  -webkit-clip-path: circle(75px at var(--x) var(--y));
+          clip-path: circle(75px at var(--x) var(--y));
+  opacity: 0;
+  -webkit-transition: opacity 250ms ease;
+  transition: opacity 250ms ease;
+}
+
+.image-container {
+  z-index: -2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 150px;
+  height: 150px;
+  opacity: 0;
+  -webkit-transition: opacity 250ms ease;
+  transition: opacity 250ms ease;
+}
+
+.image-inner {
+  position: absolute;
+  top: -75px;
+  left: -75px;
+  width: 150px;
+  height: 150px;
+}
+
+.link-image {
+  display: block;
+  max-width: 100%;
+  width: 150px;
+  height: 150px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+  border-radius: 50%;
+  -webkit-filter: brightness(0.9);
+          filter: brightness(0.9);
+}
\ No newline at end of file
diff --git a/clipped-image-reveal-on-hover/license.txt b/clipped-image-reveal-on-hover/license.txt
new file mode 100644
index 0000000..836c6e3
--- /dev/null
+++ b/clipped-image-reveal-on-hover/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Katherine Kato (https://codepen.io/kathykato/pen/pogaOKG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/clipped-image-reveal-on-hover/src/index.html b/clipped-image-reveal-on-hover/src/index.html
new file mode 100644
index 0000000..0de1a0c
--- /dev/null
+++ b/clipped-image-reveal-on-hover/src/index.html
@@ -0,0 +1,11 @@
+<div class="container">
+  <a class="link" href="#">Tokyo Tower</a>
+  <span class="hover-container">
+    <span class="link-text" aria-hidden="true">Tokyo Tower</span>
+    <span class="image-container">
+      <span class="image-inner">
+        <img class="link-image" src="https://assets.codepen.io/1159990/tokyo-tower.jpg" alt="Tokyo Tower" />
+      </span>
+    </span>
+  </span>
+</div>
\ No newline at end of file
diff --git a/clipped-image-reveal-on-hover/src/script.js b/clipped-image-reveal-on-hover/src/script.js
new file mode 100644
index 0000000..7b4dc1e
--- /dev/null
+++ b/clipped-image-reveal-on-hover/src/script.js
@@ -0,0 +1,12 @@
+const linkText = document.querySelector('.link-text');
+const linkImage = document.querySelector('.link-image');
+
+function showImgContent(e) {
+  x = e.clientX;
+  y = e.clientY;
+  linkImage.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+  linkText.style.setProperty('--x',(x)+'px');
+  linkText.style.setProperty('--y',(y)+'px');
+}
+
+document.addEventListener('mousemove', showImgContent);
\ No newline at end of file
diff --git a/clipped-image-reveal-on-hover/src/style.scss b/clipped-image-reveal-on-hover/src/style.scss
new file mode 100644
index 0000000..2563c16
--- /dev/null
+++ b/clipped-image-reveal-on-hover/src/style.scss
@@ -0,0 +1,104 @@
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@900&display=swap');
+
+$black: #333;
+$gray: #808080;
+$white: #fff;
+$bg: #f2f0ed;
+
+* {
+  box-sizing: border-box;
+  &::before, &::after {
+    box-sizing: border-box;
+  }
+}
+
+body {
+  font-family: 'Work Sans', sans-serif;
+  font-size: 1em;
+  margin: 0;
+  background: $bg;
+  overflow: hidden;
+}
+
+.container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 100vh;
+}
+
+a {
+  text-decoration: none;
+}
+
+.link {
+  z-index: 1;
+  position: relative;
+  display: inline-block;
+  font-size: 3em;
+  color: $gray;
+  text-transform: uppercase;
+  transition: color 275ms ease;
+  &:hover {
+    color: $black;
+    ~ .hover-container {
+      .link-text {
+        opacity: 1;
+      }
+      .image-container {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.link-text {
+  z-index: 2;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  font-size: 3em;
+  color: $white;
+  text-transform: uppercase;
+  pointer-events: none;
+  clip-path: circle(75px at var(--x) var(--y));
+  opacity: 0;
+  transition: opacity 250ms ease;
+}
+
+.image-container {
+  z-index: -2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 150px;
+  height: 150px;
+  opacity: 0;
+  transition: opacity 250ms ease;
+}
+
+.image-inner {
+  position: absolute;
+  top: -75px;
+  left: -75px;
+  width: 150px;
+  height: 150px;
+}
+
+.link-image {
+  display: block;
+  max-width: 100%;
+  width: 150px;
+  height: 150px;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 50%;
+  filter: brightness(0.9);
+}
\ No newline at end of file
diff --git a/codepen-challenge-knockout-text/README.markdown b/codepen-challenge-knockout-text/README.markdown
new file mode 100644
index 0000000..da2b13b
--- /dev/null
+++ b/codepen-challenge-knockout-text/README.markdown
@@ -0,0 +1,5 @@
+# Codepen Challenge: Knockout Text
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Sicontis/pen/NWvopeq](https://codepen.io/Sicontis/pen/NWvopeq).
+
+A club party poster/flyer. Wanted to try layering elements and using mix-blend-mode to give the image some texture.
diff --git a/codepen-challenge-knockout-text/dist/index.html b/codepen-challenge-knockout-text/dist/index.html
new file mode 100644
index 0000000..1ac38bb
--- /dev/null
+++ b/codepen-challenge-knockout-text/dist/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Codepen Challenge: Knockout Text</title>
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Modak&amp;display=swap"rel="stylesheet'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="poster">
+	<div class="lens-flare"></div>
+	<div class="stripes">
+		<div class="stripe-block str1">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+		<div class="stripe-block str2">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+		<div class="stripe-block str3">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+	</div>
+	<div class="info">
+
+		<header>
+			<h3>Codepen</h3>
+			<p>Presents</p>
+		</header>
+
+		<main>
+			<svg id="text-1" viewBox="0 0 450 100">
+				<rect mask="url(#knockout-text-1)" />
+
+				<mask id="knockout-text-1">
+					<rect />
+					<text x="50%" y="80" text-anchor="middle">Summer</text>
+				</mask>
+			</svg>
+
+			<svg id="text-2" viewBox="0 0 450 100">
+				<rect mask="url(#knockout-text-2)" />
+
+				<mask id="knockout-text-2">
+					<rect />
+					<text x="50%" y="80" text-anchor="middle">Lounge</text>
+				</mask>
+			</svg>
+		</main>
+
+		<section id="date">
+			<div class="circle-item">22</div>
+			<div class="circle-item">Jan</div>
+			<div class="circle-item">2022</div>
+		</section>
+
+		<section id="talent">
+			<div class="dj-title">Featuring</div>
+			<ul class="dj-list">
+				<li>DJ Coyier</li>
+				<li>//</li>
+				<li>DJ Kuhn</li>
+				<li>//</li>
+				<li>D-Jhey</li>
+			</ul>
+		</section>
+
+		<footer>
+			<div class="tickets">
+				$25 Pre Sale Tickets / 18+ Ages / $30 at Door
+			</div>
+			<div class="venue">
+				<h3>Club Sicontis</h3>
+				<p>Level 2, 48 Fort Street, AKL</p>
+				<p><small>www.clubsicontis.com</small></p>
+			</div>
+		</footer>
+
+	</div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/codepen-challenge-knockout-text/dist/script.js b/codepen-challenge-knockout-text/dist/script.js
new file mode 100644
index 0000000..9dc9635
--- /dev/null
+++ b/codepen-challenge-knockout-text/dist/script.js
@@ -0,0 +1,2 @@
+// Inspired by this Pin
+// https://www.pinterest.nz/pin/117797346494620639/
\ No newline at end of file
diff --git a/codepen-challenge-knockout-text/dist/style.css b/codepen-challenge-knockout-text/dist/style.css
new file mode 100644
index 0000000..c94eb4d
--- /dev/null
+++ b/codepen-challenge-knockout-text/dist/style.css
@@ -0,0 +1,294 @@
+@import url("https://fonts.googleapis.com/css2?family=Catamaran:wght@900&family=PT+Sans+Narrow&display=swap");
+
+*,
+::before,
+::after {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	min-height: 100vh;
+	display: grid;
+	place-items: center;
+
+	--white: #e9e9e9;
+
+	background-color: lavender;
+	background-image: url("https://www.transparenttextures.com/patterns/black-paper.png");
+}
+
+ul {
+	list-style: none;
+}
+
+.poster {
+	height: 90vh;
+	max-width: 700px;
+	width: 100%;
+	background-image: url("trees-bkg.jpg");
+	background-image: url("https://www.sicontis.com/codepen/cpc-knockout-text/trees-bkg.jpg");
+	background-size: cover;
+	background-position-y: -100px;
+	background-repeat: no-repeat;
+	position: relative;
+	font-family: "PT Sans Narrow", sans-serif;
+	overflow: hidden;
+	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+	border: 10px solid rgb(34, 33, 33);
+}
+
+.lens-flare {
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 1;
+	width: 100%;
+	height: 100%;
+	background-image: linear-gradient(
+			45deg,
+			rgba(72, 33, 24, 0.2) 0%,
+			rgba(72, 33, 24, 0.2) 36%,
+			rgba(107, 68, 41, 0.2) 36%,
+			rgba(107, 68, 41, 0.2) 51%,
+			rgba(141, 103, 58, 0.2) 51%,
+			rgba(141, 103, 58, 0.2) 64%,
+			rgba(176, 137, 74, 0.2) 64%,
+			rgba(176, 137, 74, 0.2) 76%,
+			rgba(210, 172, 91, 0.2) 76%,
+			rgba(210, 172, 91, 0.2) 100%
+		),
+		linear-gradient(
+			135deg,
+			rgba(16, 29, 192, 0.2) 0%,
+			rgba(16, 29, 192, 0.2) 40%,
+			rgba(61, 43, 200, 0.2) 40%,
+			rgba(61, 43, 200, 0.2) 41%,
+			rgba(107, 57, 208, 0.2) 41%,
+			rgba(107, 57, 208, 0.2) 47%,
+			rgba(152, 70, 215, 0.2) 47%,
+			rgba(152, 70, 215, 0.2) 88%,
+			rgba(198, 84, 223, 0.2) 88%,
+			rgba(198, 84, 223, 0.2) 91%,
+			rgba(243, 98, 231, 0.2) 91%,
+			rgba(243, 98, 231, 0.2) 100%
+		),
+		linear-gradient(
+			90deg,
+			rgb(255, 136, 53) 0%,
+			rgb(255, 136, 53) 10%,
+			rgb(246, 113, 64) 10%,
+			rgb(246, 113, 64) 12%,
+			rgb(236, 89, 75) 12%,
+			rgb(236, 89, 75) 24%,
+			rgb(227, 66, 87) 24%,
+			rgb(227, 66, 87) 29%,
+			rgb(217, 42, 98) 29%,
+			rgb(217, 42, 98) 40%,
+			rgb(208, 19, 109) 40%,
+			rgb(208, 19, 109) 100%
+		);
+	mix-blend-mode: hard-light;
+	opacity: 0.7;
+}
+
+.stripes {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+	position: relative;
+}
+
+.stripe-block {
+	position: absolute;
+	height: 700px;
+	width: 300px;
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	opacity: 0.3;
+}
+.stripe-block div {
+	border-right: 1px solid var(--white);
+	opacity: 0.5;
+}
+
+.str1 {
+	transform: translate(-200px, -100px) rotateZ(-45deg);
+}
+.str2 {
+	bottom: 0;
+	right: 0;
+	transform: translate(30%, 60%) rotateZ(-45deg);
+}
+.str3 {
+	top: 0;
+	right: 0;
+	transform: translate(60%, -40%) rotateZ(45deg);
+}
+
+.info {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 3;
+	display: grid;
+	justify-items: center;
+	color: var(--white);
+}
+
+/* HEADER 
+---------------------- */
+.info header {
+	text-align: center;
+	text-transform: uppercase;
+	letter-spacing: 4px;
+	padding: 2em;
+}
+.info header h3 {
+	font-size: 2rem;
+	font-weight: normal;
+}
+
+/* MAIN 
+---------------------- */
+.info main {
+	text-align: center;
+}
+
+svg#text-1 {
+	width: 450px;
+	height: 100px;
+}
+svg#text-2 {
+	width: 300px;
+	height: 80px;
+}
+svg rect {
+	width: 100%;
+	height: 100%;
+	fill: var(--white);
+}
+svg text {
+	font-size: 6rem;
+	text-transform: uppercase;
+	font-family: "Catamaran", sans-serif;
+	fill: #000;
+}
+
+/* SECTIONS 
+---------------------- */
+section#date {
+	display: grid;
+	grid-template-columns: repeat(3, 80px);
+	grid-column-gap: 10px;
+}
+.circle-item {
+	width: 80px;
+	height: 80px;
+	display: grid;
+	place-items: center;
+	text-transform: uppercase;
+	font-size: 1.75rem;
+	border: 2px solid var(--white);
+	opacity: 0.8;
+	border-radius: 50%;
+	mix-blend-mode: overlay;
+}
+
+section#talent {
+	padding: 10px;
+}
+.dj-title {
+	padding: 2px 5px;
+	text-transform: uppercase;
+	background-color: var(--white);
+	color: #000;
+	letter-spacing: 2px;
+	width: min-content;
+	margin: 0 auto;
+	mix-blend-mode: screen;
+}
+.dj-list {
+	margin-top: 10px;
+	display: grid;
+	grid-template-columns: repeat(
+		min-content,
+		20px,
+		min-content,
+		20px,
+		min-content
+	);
+	grid-auto-flow: column;
+}
+.dj-list li {
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	padding: 0 5px;
+	letter-spacing: 2px;
+}
+
+/* FOOTER 
+---------------------- */
+footer {
+	padding: 10px;
+}
+.tickets {
+	padding: 5px 0;
+	text-transform: uppercase;
+	font-weight: bold;
+	letter-spacing: 1px;
+	border-top: 1px solid var(--white);
+	border-bottom: 1px solid var(--white);
+}
+.venue {
+	padding: 1em;
+	text-align: center;
+	text-transform: uppercase;
+}
+.venue h3,
+.venue p {
+	letter-spacing: 2px;
+}
+
+@media screen and (max-width: 600px) {
+	.poster {
+		height: 100vh;
+		background-position-y: 0px;
+	}
+
+	.info header h3 {
+		font-size: 1.4rem;
+	}
+
+	svg#text-1 {
+		width: 360px;
+		height: 70px;
+	}
+	svg#text-2 {
+		width: 240px;
+		height: 60px;
+	}
+
+	section#date {
+		grid-template-columns: repeat(3, 60px);
+	}
+	.circle-item {
+		width: 60px;
+		height: 60px;
+		font-size: 1.3rem;
+	}
+	.dj-title,
+	.tickets,
+	.venue {
+		font-size: 0.9rem;
+	}
+	.dj-list li {
+		font-size: 1.2rem;
+	}
+}
\ No newline at end of file
diff --git a/codepen-challenge-knockout-text/license.txt b/codepen-challenge-knockout-text/license.txt
new file mode 100644
index 0000000..e56be45
--- /dev/null
+++ b/codepen-challenge-knockout-text/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Sicontis (https://codepen.io/Sicontis/pen/NWvopeq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/codepen-challenge-knockout-text/src/index.html b/codepen-challenge-knockout-text/src/index.html
new file mode 100644
index 0000000..98df224
--- /dev/null
+++ b/codepen-challenge-knockout-text/src/index.html
@@ -0,0 +1,79 @@
+<div class="poster">
+	<div class="lens-flare"></div>
+	<div class="stripes">
+		<div class="stripe-block str1">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+		<div class="stripe-block str2">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+		<div class="stripe-block str3">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+	</div>
+	<div class="info">
+
+		<header>
+			<h3>Codepen</h3>
+			<p>Presents</p>
+		</header>
+
+		<main>
+			<svg id="text-1" viewBox="0 0 450 100">
+				<rect mask="url(#knockout-text-1)" />
+
+				<mask id="knockout-text-1">
+					<rect />
+					<text x="50%" y="80" text-anchor="middle">Summer</text>
+				</mask>
+			</svg>
+
+			<svg id="text-2" viewBox="0 0 450 100">
+				<rect mask="url(#knockout-text-2)" />
+
+				<mask id="knockout-text-2">
+					<rect />
+					<text x="50%" y="80" text-anchor="middle">Lounge</text>
+				</mask>
+			</svg>
+		</main>
+
+		<section id="date">
+			<div class="circle-item">22</div>
+			<div class="circle-item">Jan</div>
+			<div class="circle-item">2022</div>
+		</section>
+
+		<section id="talent">
+			<div class="dj-title">Featuring</div>
+			<ul class="dj-list">
+				<li>DJ Coyier</li>
+				<li>//</li>
+				<li>DJ Kuhn</li>
+				<li>//</li>
+				<li>D-Jhey</li>
+			</ul>
+		</section>
+
+		<footer>
+			<div class="tickets">
+				$25 Pre Sale Tickets / 18+ Ages / $30 at Door
+			</div>
+			<div class="venue">
+				<h3>Club Sicontis</h3>
+				<p>Level 2, 48 Fort Street, AKL</p>
+				<p><small>www.clubsicontis.com</small></p>
+			</div>
+		</footer>
+
+	</div>
+</div>
\ No newline at end of file
diff --git a/codepen-challenge-knockout-text/src/script.js b/codepen-challenge-knockout-text/src/script.js
new file mode 100644
index 0000000..47da1e4
--- /dev/null
+++ b/codepen-challenge-knockout-text/src/script.js
@@ -0,0 +1,2 @@
+// Inspired by this Pin
+// https://www.pinterest.nz/pin/117797346494620639/
diff --git a/codepen-challenge-knockout-text/src/style.css b/codepen-challenge-knockout-text/src/style.css
new file mode 100644
index 0000000..93a4de2
--- /dev/null
+++ b/codepen-challenge-knockout-text/src/style.css
@@ -0,0 +1,294 @@
+@import url("https://fonts.googleapis.com/css2?family=Catamaran:wght@900&family=PT+Sans+Narrow&display=swap");
+
+*,
+::before,
+::after {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	min-height: 100vh;
+	display: grid;
+	place-items: center;
+
+	--white: #e9e9e9;
+
+	background-color: lavender;
+	background-image: url("https://www.transparenttextures.com/patterns/black-paper.png");
+}
+
+ul {
+	list-style: none;
+}
+
+.poster {
+	height: 90vh;
+	max-width: 700px;
+	width: 100%;
+	background-image: url("trees-bkg.jpg");
+	background-image: url("https://www.sicontis.com/codepen/cpc-knockout-text/trees-bkg.jpg");
+	background-size: cover;
+	background-position-y: -100px;
+	background-repeat: no-repeat;
+	position: relative;
+	font-family: "PT Sans Narrow", sans-serif;
+	overflow: hidden;
+	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+	border: 10px solid rgb(34, 33, 33);
+}
+
+.lens-flare {
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 1;
+	width: 100%;
+	height: 100%;
+	background-image: linear-gradient(
+			45deg,
+			rgba(72, 33, 24, 0.2) 0%,
+			rgba(72, 33, 24, 0.2) 36%,
+			rgba(107, 68, 41, 0.2) 36%,
+			rgba(107, 68, 41, 0.2) 51%,
+			rgba(141, 103, 58, 0.2) 51%,
+			rgba(141, 103, 58, 0.2) 64%,
+			rgba(176, 137, 74, 0.2) 64%,
+			rgba(176, 137, 74, 0.2) 76%,
+			rgba(210, 172, 91, 0.2) 76%,
+			rgba(210, 172, 91, 0.2) 100%
+		),
+		linear-gradient(
+			135deg,
+			rgba(16, 29, 192, 0.2) 0%,
+			rgba(16, 29, 192, 0.2) 40%,
+			rgba(61, 43, 200, 0.2) 40%,
+			rgba(61, 43, 200, 0.2) 41%,
+			rgba(107, 57, 208, 0.2) 41%,
+			rgba(107, 57, 208, 0.2) 47%,
+			rgba(152, 70, 215, 0.2) 47%,
+			rgba(152, 70, 215, 0.2) 88%,
+			rgba(198, 84, 223, 0.2) 88%,
+			rgba(198, 84, 223, 0.2) 91%,
+			rgba(243, 98, 231, 0.2) 91%,
+			rgba(243, 98, 231, 0.2) 100%
+		),
+		linear-gradient(
+			90deg,
+			rgb(255, 136, 53) 0%,
+			rgb(255, 136, 53) 10%,
+			rgb(246, 113, 64) 10%,
+			rgb(246, 113, 64) 12%,
+			rgb(236, 89, 75) 12%,
+			rgb(236, 89, 75) 24%,
+			rgb(227, 66, 87) 24%,
+			rgb(227, 66, 87) 29%,
+			rgb(217, 42, 98) 29%,
+			rgb(217, 42, 98) 40%,
+			rgb(208, 19, 109) 40%,
+			rgb(208, 19, 109) 100%
+		);
+	mix-blend-mode: hard-light;
+	opacity: 0.7;
+}
+
+.stripes {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+	position: relative;
+}
+
+.stripe-block {
+	position: absolute;
+	height: 700px;
+	width: 300px;
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	opacity: 0.3;
+}
+.stripe-block div {
+	border-right: 1px solid var(--white);
+	opacity: 0.5;
+}
+
+.str1 {
+	transform: translate(-200px, -100px) rotateZ(-45deg);
+}
+.str2 {
+	bottom: 0;
+	right: 0;
+	transform: translate(30%, 60%) rotateZ(-45deg);
+}
+.str3 {
+	top: 0;
+	right: 0;
+	transform: translate(60%, -40%) rotateZ(45deg);
+}
+
+.info {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 3;
+	display: grid;
+	justify-items: center;
+	color: var(--white);
+}
+
+/* HEADER 
+---------------------- */
+.info header {
+	text-align: center;
+	text-transform: uppercase;
+	letter-spacing: 4px;
+	padding: 2em;
+}
+.info header h3 {
+	font-size: 2rem;
+	font-weight: normal;
+}
+
+/* MAIN 
+---------------------- */
+.info main {
+	text-align: center;
+}
+
+svg#text-1 {
+	width: 450px;
+	height: 100px;
+}
+svg#text-2 {
+	width: 300px;
+	height: 80px;
+}
+svg rect {
+	width: 100%;
+	height: 100%;
+	fill: var(--white);
+}
+svg text {
+	font-size: 6rem;
+	text-transform: uppercase;
+	font-family: "Catamaran", sans-serif;
+	fill: #000;
+}
+
+/* SECTIONS 
+---------------------- */
+section#date {
+	display: grid;
+	grid-template-columns: repeat(3, 80px);
+	grid-column-gap: 10px;
+}
+.circle-item {
+	width: 80px;
+	height: 80px;
+	display: grid;
+	place-items: center;
+	text-transform: uppercase;
+	font-size: 1.75rem;
+	border: 2px solid var(--white);
+	opacity: 0.8;
+	border-radius: 50%;
+	mix-blend-mode: overlay;
+}
+
+section#talent {
+	padding: 10px;
+}
+.dj-title {
+	padding: 2px 5px;
+	text-transform: uppercase;
+	background-color: var(--white);
+	color: #000;
+	letter-spacing: 2px;
+	width: min-content;
+	margin: 0 auto;
+	mix-blend-mode: screen;
+}
+.dj-list {
+	margin-top: 10px;
+	display: grid;
+	grid-template-columns: repeat(
+		min-content,
+		20px,
+		min-content,
+		20px,
+		min-content
+	);
+	grid-auto-flow: column;
+}
+.dj-list li {
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	padding: 0 5px;
+	letter-spacing: 2px;
+}
+
+/* FOOTER 
+---------------------- */
+footer {
+	padding: 10px;
+}
+.tickets {
+	padding: 5px 0;
+	text-transform: uppercase;
+	font-weight: bold;
+	letter-spacing: 1px;
+	border-top: 1px solid var(--white);
+	border-bottom: 1px solid var(--white);
+}
+.venue {
+	padding: 1em;
+	text-align: center;
+	text-transform: uppercase;
+}
+.venue h3,
+.venue p {
+	letter-spacing: 2px;
+}
+
+@media screen and (max-width: 600px) {
+	.poster {
+		height: 100vh;
+		background-position-y: 0px;
+	}
+
+	.info header h3 {
+		font-size: 1.4rem;
+	}
+
+	svg#text-1 {
+		width: 360px;
+		height: 70px;
+	}
+	svg#text-2 {
+		width: 240px;
+		height: 60px;
+	}
+
+	section#date {
+		grid-template-columns: repeat(3, 60px);
+	}
+	.circle-item {
+		width: 60px;
+		height: 60px;
+		font-size: 1.3rem;
+	}
+	.dj-title,
+	.tickets,
+	.venue {
+		font-size: 0.9rem;
+	}
+	.dj-list li {
+		font-size: 1.2rem;
+	}
+}
diff --git a/codevember-12/README.markdown b/codevember-12/README.markdown
new file mode 100644
index 0000000..c53882d
--- /dev/null
+++ b/codevember-12/README.markdown
@@ -0,0 +1,7 @@
+# Codevember #12
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/dpdknl/pen/aVWVrw](https://codepen.io/dpdknl/pen/aVWVrw).
+
+ Follow the magic zebra on it's trip! where is this mystical being going? who knows!
+Maybe clicking on it will reveal what kind of trip it's going to be, or maybe it won't, who knows! :D
+
+Fun fact: It is the mountains that move in this pen. (click and stare at the plane, you'll see that it is actually standing still while the mountains move across it)
\ No newline at end of file
diff --git a/codevember-12/dist/index.html b/codevember-12/dist/index.html
new file mode 100644
index 0000000..14db34a
--- /dev/null
+++ b/codevember-12/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Codevember #12</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<footer class="footer v-dark">
+ Made with 😘&nbsp; by <a class="footer-anchor" target="_blank" href="//codepen.io/Fahscinate">Mo</a>
+</footer>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js'></script>
+<script src='https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/codevember-12/dist/script.js b/codevember-12/dist/script.js
new file mode 100644
index 0000000..555a279
--- /dev/null
+++ b/codevember-12/dist/script.js
@@ -0,0 +1,525 @@
+let scene;
+let camera;
+let renderer;
+let controls;
+let zebra;
+let landscape;
+let mixer;
+let prevTime;
+
+const horse = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/51676/horse.json';
+class ShieldMaterial extends THREE.ShaderMaterial {
+
+  constructor(params) {
+    // Make uniforms unique per instance
+    const shader = Object.assign({}, ShieldMaterial.shader, {
+      uniforms: Object.assign({}, ShieldMaterial.shader.uniforms, {
+        color: { value: params.color },
+        offset: { value: params.offset } }) });
+
+
+
+    // console.log(scene);
+
+    super(shader);
+
+    this.loop = timestamp => {
+      window.requestAnimationFrame(this.loop);
+      this.uniforms.time.value = timestamp;
+    };
+
+    window.requestAnimationFrame(this.loop);
+  }}
+
+
+
+ShieldMaterial.shader = {
+  morphTargets: true,
+  vertexShader: `
+#define GLSLIFY 1
+varying vec2 vUv;
+varying vec3 vPosition;
+
+#include <morphtarget_pars_vertex>
+ 
+void main() 
+{
+
+    #include <begin_vertex>
+	#include <morphtarget_vertex>
+
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( transformed, 1.0 );
+    vPosition = position;
+}
+`,
+  fragmentShader: `
+
+#ifdef GL_ES
+    precision mediump float;
+#define GLSLIFY 1
+#endif
+
+uniform float time;
+uniform float offset;
+uniform vec3 color;
+
+varying vec3 vPosition;
+varying vec2 vUv;
+
+//
+// Description : Array and textureless GLSL 2D/3D/4D simplex
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : stegu
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//               https://github.com/stegu/webgl-noise
+//
+
+vec3 mod289(vec3 x) {
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+    return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+    return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v)
+{
+    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+    // First corner
+    vec3 i  = floor(v + dot(v, C.yyy) );
+    vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+    // Other corners
+    vec3 g_0 = step(x0.yzx, x0.xyz);
+    vec3 l = 1.0 - g_0;
+    vec3 i1 = min( g_0.xyz, l.zxy );
+    vec3 i2 = max( g_0.xyz, l.zxy );
+
+    //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+    //   x1 = x0 - i1  + 1.0 * C.xxx;
+    //   x2 = x0 - i2  + 2.0 * C.xxx;
+    //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+    vec3 x1 = x0 - i1 + C.xxx;
+    vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+    vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+    // Permutations
+    i = mod289(i);
+    vec4 p = permute( permute( permute(
+    i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+    + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+    + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+    // Gradients: 7x7 points over a square, mapped onto an octahedron.
+    // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+    float n_ = 0.142857142857; // 1.0/7.0
+    vec3  ns = n_ * D.wyz - D.xzx;
+
+    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+    vec4 x_ = floor(j * ns.z);
+    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+    vec4 x = x_ *ns.x + ns.yyyy;
+    vec4 y = y_ *ns.x + ns.yyyy;
+    vec4 h = 1.0 - abs(x) - abs(y);
+
+    vec4 b0 = vec4( x.xy, y.xy );
+    vec4 b1 = vec4( x.zw, y.zw );
+
+    //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+    //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+    vec4 s0 = floor(b0)*2.0 + 1.0;
+    vec4 s1 = floor(b1)*2.0 + 1.0;
+    vec4 sh = -step(h, vec4(0.0));
+
+    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+    vec3 p0 = vec3(a0.xy,h.x);
+    vec3 p1 = vec3(a0.zw,h.y);
+    vec3 p2 = vec3(a1.xy,h.z);
+    vec3 p3 = vec3(a1.zw,h.w);
+
+    //Normalise gradients
+    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+    p0 *= norm.x;
+    p1 *= norm.y;
+    p2 *= norm.z;
+    p3 *= norm.w;
+
+    // Mix final noise value
+    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+    m = m * m;
+    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
+    dot(p2,x2), dot(p3,x3) ) );
+}
+
+float perlin3( vec3 coord ) {
+
+    // float n = 0.0;
+    float n = 10.0 * abs( snoise( coord ));
+    return n;
+
+}
+
+void main( void ) {
+    vec2 uv = (vPosition.zx / vec2(100.0, 100.0));
+    float change = 10.0;
+    float changeCoord = 14.0;
+
+    if(color.r > 0.1) {
+        change = time * 0.001;
+        changeCoord = time * 0.0001;
+    }
+
+    uv.x = uv.x + change;
+    vec3 coord = vec3( uv.xy, changeCoord );
+
+    
+    float n = perlin3( coord.xyz );
+    
+    vec3 colors = vec3(
+            (255.0 * sin(n * 6.0))
+    );
+
+    float head = smoothstep(115.0,0.0,vPosition.z) * smoothstep(-100.0,800.0,vPosition.z);
+    vec4 zebrahead = vec4(color, 1.0);
+
+    if(colors.r < 0.1) colors = color;
+
+    gl_FragColor = mix(zebrahead, vec4( colors.r, colors.g, colors.b, 1.0 ), head);
+
+}
+`,
+  uniforms: {
+    time: { value: performance.now() } } };
+
+
+class LandscapeMaterial extends THREE.ShaderMaterial {
+
+  constructor(params) {
+    // Make uniforms unique per instance
+    const shader = Object.assign({}, LandscapeMaterial.shader, {
+      uniforms: Object.assign({}, LandscapeMaterial.shader.uniforms, {
+        color: { value: params.color } }) });
+
+
+
+    // console.log(scene);
+
+    super(shader);
+
+    this.loop = timestamp => {
+      window.requestAnimationFrame(this.loop);
+      this.uniforms.time.value = timestamp;
+    };
+
+    window.requestAnimationFrame(this.loop);
+  }}
+
+
+
+LandscapeMaterial.shader = {
+  blending: THREE.AdditiveBlending,
+  transparent: true,
+  // wireframe: true,
+  vertexShader: `
+#define GLSLIFY 1
+uniform float time;
+varying vec3 vPosition;
+
+//
+// GLSL textureless classic 3D noise "cnoise",
+// with an RSL-style periodic variant "pnoise".
+// Author:  Stefan Gustavson (stefan.gustavson@liu.se)
+// Version: 2011-10-11
+//
+// Many thanks to Ian McEwan of Ashima Arts for the
+// ideas for permutation and gradient selection.
+//
+// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
+// Distributed under the MIT license. See LICENSE file.
+// https://github.com/ashima/webgl-noise
+//
+vec3 mod289(vec3 x)
+{
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+vec4 mod289(vec4 x)
+{
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+vec4 permute(vec4 x)
+{
+    return mod289(((x*34.0)+1.0)*x);
+}
+vec4 taylorInvSqrt(vec4 r)
+{
+    return 1.79284291400159 - 0.85373472095314 * r;
+}
+vec3 fade(vec3 t) {
+    return t*t*t*(t*(t*6.0-15.0)+10.0);
+}
+float cnoise(vec3 P)
+{
+    vec3 Pi0 = floor(P);
+    // Integer part for indexing
+    vec3 Pi1 = Pi0 + vec3(1.0);
+    // Integer part + 1
+    Pi0 = mod289(Pi0);
+    Pi1 = mod289(Pi1);
+    vec3 Pf0 = fract(P);
+    // Fractional part for interpolation
+    vec3 Pf1 = Pf0 - vec3(1.0);
+    // Fractional part - 1.0
+    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+    vec4 iy = vec4(Pi0.yy, Pi1.yy);
+    vec4 iz0 = Pi0.zzzz;
+    vec4 iz1 = Pi1.zzzz;
+    vec4 ixy = permute(permute(ix) + iy);
+    vec4 ixy0 = permute(ixy + iz0);
+    vec4 ixy1 = permute(ixy + iz1);
+    vec4 gx0 = ixy0 * (1.0 / 7.0);
+    vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
+    gx0 = fract(gx0);
+    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+    vec4 sz0 = step(gz0, vec4(0.0));
+    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+    gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+    vec4 gx1 = ixy1 * (1.0 / 7.0);
+    vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
+    gx1 = fract(gx1);
+    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+    vec4 sz1 = step(gz1, vec4(0.0));
+    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+    gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+    vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
+    vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
+    vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
+    vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
+    vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
+    vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
+    vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
+    vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
+    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+    g000 *= norm0.x;
+    g010 *= norm0.y;
+    g100 *= norm0.z;
+    g110 *= norm0.w;
+    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+    g001 *= norm1.x;
+    g011 *= norm1.y;
+    g101 *= norm1.z;
+    g111 *= norm1.w;
+    float n000 = dot(g000, Pf0);
+    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+    float n111 = dot(g111, Pf1);
+    vec3 fade_xyz = fade(Pf0);
+    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
+    return 2.2 * n_xyz;
+}
+
+mat4 rotateMatrixX(float radian) {
+    return mat4(
+        1.0, 0.0, 0.0, 0.0,
+        0.0, cos(radian), -sin(radian), 0.0,
+        0.0, sin(radian), cos(radian), 0.0,
+        0.0, 0.0, 0.0, 1.0
+    );
+}
+
+mat4 rotateMatrixY(float radian) {
+    return mat4(
+        cos(radian), 0.0, sin(radian), 0.0,
+        0.0, 1.0, 0.0, 0.0,
+        -sin(radian), 0.0, cos(radian), 0.0,
+        0.0, 0.0, 0.0, 1.0
+    );
+}
+
+mat4 rotateMatrixZ(float radian) {
+    return mat4(
+        cos(radian), -sin(radian), 0.0, 0.0,
+        sin(radian), cos(radian), 0.0, 0.0,
+        0.0, 0.0, 1.0, 0.0,
+        0.0, 0.0, 0.0, 1.0
+    );
+}
+
+void main(void) {
+
+    float sin1 = sin(radians(position.y / 128.0 * 90.0));
+
+    //speed
+    vec3 noisePosition = position + vec3(-time * 0.05, 0.0, 0.0);
+    float noise1 = cnoise(noisePosition * 0.02);
+    float noise2 = cnoise(noisePosition * 0.08);
+    float noise3 = cnoise(noisePosition * 0.4);
+    vec3 lastPosition = position + vec3(0.0, 0.0,
+                                                noise1 * sin1 * 8.0
+                                                + noise2 * sin1 * 8.0
+                                                + noise2 * sin1 * 8.0
+                                                + noise3 * sin1 * 2.0
+                                                + noise3 * sin1 * 1.0
+                                                + pow(sin1, 2.0) * 40.0);
+    vPosition = lastPosition;
+
+    vec4 mvPosition = modelViewMatrix * vec4( lastPosition, 1.0 );
+    // gl_PointSize = floor(20.0 * ( 100.0 / -mvPosition.z ));
+    // gl_PointSize = 2.0 * (1.0+ 300.0 / length( mvPosition.xyz ) );
+    gl_Position = projectionMatrix * mvPosition;
+}
+`,
+  fragmentShader: `
+uniform sampler2D texture;
+
+precision highp float;
+#define GLSLIFY 1
+varying vec3 vPosition;
+
+void main ()
+{
+
+    float dist =  sqrt(dot (vPosition, vPosition));
+
+    mediump vec4 final_color;
+    final_color.rgb = vec3(237.0 / 255.0, 201.0 / 255.0, 175.0 / 255.0);
+    // final_color.rgb = vec3(194.0 / 255.0, 178.0 / 255.0, 128.0 / 255.0);
+    final_color.a = (((80.0 - dist) / 70.0) * 1.0);
+    // gl_FragColor = final_color.a * (vec4(final_color.rgb, 1.0));
+
+    float grass = smoothstep(10.0,40.0,dist);
+    vec4 grassfield = vec4(96.0/ 255.0, 128.0/ 255.0, 56.0/ 255.0, 1.0);
+
+    gl_FragColor = mix(grassfield, final_color.a * (vec4(final_color.rgb, 1.0)), grass);
+
+    // if ( gl_FragColor.a > 0.9 ) gl_FragColor.rgb = vec3(96.0/ 255.0, 128.0/ 255.0, 56.0/ 255.0);
+}
+`,
+  uniforms: {
+    time: { value: performance.now() } } };
+
+
+function init() {
+  initScene();
+  loadModel().then(() => {
+    requestAnimationFrame(loop);
+  });
+  window.addEventListener('resize', onResize);
+}
+
+function initScene() {
+  prevTime = Date.now();
+
+  scene = new THREE.Scene();
+
+  camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 10000);
+  camera.position.set(0, 400, 1200);
+  var vector = new THREE.Vector3(0, 100, 0);
+  // vector.applyQuaternion( camera.quaternion );
+  camera.target = vector;
+  // camera.updateMatrix();
+  scene.add(camera);
+
+  camera.updateProjectionMatrix();
+
+  renderer = new THREE.WebGLRenderer({
+    alpha: true,
+    // antialias: true,
+    pixelRatio: window.devicePixelRatio,
+    antialias: window.devicePixelRatio === 1 });
+
+  renderer.setSize(window.innerWidth, window.innerHeight);
+
+  controls = new THREE.OrbitControls(camera, renderer.domElement);
+
+  document.body.appendChild(renderer.domElement);
+}
+
+function loadModel() {
+  return new Promise((res, rej) => {
+    new THREE.JSONLoader().load(horse, geometry => {
+
+      const material = new ShieldMaterial({
+        color: new THREE.Color(0x000000),
+        offset: 10,
+        morphTargets: true });
+
+      zebra = new THREE.Mesh(geometry, material);
+      zebra.rotation.y = -Math.PI / 2;
+      scene.add(zebra);
+
+      let landscapeGeometry = new THREE.PlaneGeometry(128, 128, 128, 128);
+      const landscapeMaterial = new LandscapeMaterial({
+        color: new THREE.Color(0xffffff) });
+
+      landscape = new THREE.Mesh(landscapeGeometry, landscapeMaterial);
+      landscape.rotation.x = -Math.PI / 2;
+      landscape.scale.set(15.0, 15.0, 15.0);
+      scene.add(landscape);
+
+      mixer = new THREE.AnimationMixer(zebra);
+      var clip = THREE.AnimationClip.CreateFromMorphTargetSequence('gallop', geometry.morphTargets, 30);
+      mixer.clipAction(clip).play();
+
+      res();
+    });
+  });
+}
+
+function loop(timestamp) {
+  requestAnimationFrame(loop);
+
+  if (mixer) {
+    let time = Date.now();
+    mixer.update((time - prevTime) * 0.0005);
+    prevTime = time;
+  }
+
+  controls.update();
+
+  camera.lookAt(camera.target);
+  renderer.render(scene, camera);
+}
+
+function onResize() {
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+}
+
+window.addEventListener('click', function () {
+  zebra.material.uniforms.color.value = new THREE.Color(Math.random() * 0xffffff);
+  // console.log(landscape.material.wireframe);
+  if (landscape.material.wireframe == false) {
+    landscape.material.wireframe = true;
+  } else {
+    landscape.material.wireframe = false;
+  }
+});
+
+init();
\ No newline at end of file
diff --git a/codevember-12/dist/style.css b/codevember-12/dist/style.css
new file mode 100644
index 0000000..75c8793
--- /dev/null
+++ b/codevember-12/dist/style.css
@@ -0,0 +1,52 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto");
+*, *:before, *:after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, canvas {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  background: radial-gradient(#514969, #0e171b);
+}
+
+.footer {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 10px 10px;
+  text-align: right;
+  font-family: 'Roboto', sans-serif;
+  font-size: 12px;
+}
+.footer.v-dark {
+  background-color: #343436;
+  color: #fff;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.footer.v-light {
+  background-color: #fff;
+  color: #343436;
+}
+
+.footer-anchor {
+  display: inline-block;
+  margin-left: 5px;
+  padding: 2px 4px;
+  color: #343436;
+  text-decoration: none;
+  background-color: #fcd000;
+  border-radius: 4px;
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+.footer-anchor:hover {
+  opacity: 0.6;
+}
diff --git a/codevember-12/license.txt b/codevember-12/license.txt
new file mode 100644
index 0000000..5113f8f
--- /dev/null
+++ b/codevember-12/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by DPDK (https://codepen.io/dpdknl/pen/aVWVrw)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/codevember-12/src/index.html b/codevember-12/src/index.html
new file mode 100644
index 0000000..3818d66
--- /dev/null
+++ b/codevember-12/src/index.html
@@ -0,0 +1,3 @@
+<footer class="footer v-dark">
+ Made with 😘&nbsp; by <a class="footer-anchor" target="_blank" href="//codepen.io/Fahscinate">Mo</a>
+</footer>
\ No newline at end of file
diff --git a/codevember-12/src/script.babel b/codevember-12/src/script.babel
new file mode 100644
index 0000000..d3b6092
--- /dev/null
+++ b/codevember-12/src/script.babel
@@ -0,0 +1,525 @@
+let scene;
+let camera;
+let renderer;
+let controls;
+let zebra;
+let landscape;
+let mixer;
+let prevTime;
+
+const horse = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/51676/horse.json';
+class ShieldMaterial extends THREE.ShaderMaterial {
+
+  constructor(params) {
+    // Make uniforms unique per instance
+    const shader = Object.assign({}, ShieldMaterial.shader, {
+      uniforms: Object.assign({}, ShieldMaterial.shader.uniforms, {
+        color: { value: params.color },
+        offset: { value: params.offset }
+      })
+    });
+
+    // console.log(scene);
+
+    super(shader);
+
+    this.loop = timestamp => {
+      window.requestAnimationFrame(this.loop);
+      this.uniforms.time.value = timestamp;
+    };
+
+    window.requestAnimationFrame(this.loop);
+  }
+
+}
+
+ShieldMaterial.shader = {
+  morphTargets: true,
+  vertexShader: `
+#define GLSLIFY 1
+varying vec2 vUv;
+varying vec3 vPosition;
+
+#include <morphtarget_pars_vertex>
+ 
+void main() 
+{
+
+    #include <begin_vertex>
+	#include <morphtarget_vertex>
+
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( transformed, 1.0 );
+    vPosition = position;
+}
+`,
+  fragmentShader: `
+
+#ifdef GL_ES
+    precision mediump float;
+#define GLSLIFY 1
+#endif
+
+uniform float time;
+uniform float offset;
+uniform vec3 color;
+
+varying vec3 vPosition;
+varying vec2 vUv;
+
+//
+// Description : Array and textureless GLSL 2D/3D/4D simplex
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : stegu
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//               https://github.com/stegu/webgl-noise
+//
+
+vec3 mod289(vec3 x) {
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+    return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+    return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v)
+{
+    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+    // First corner
+    vec3 i  = floor(v + dot(v, C.yyy) );
+    vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+    // Other corners
+    vec3 g_0 = step(x0.yzx, x0.xyz);
+    vec3 l = 1.0 - g_0;
+    vec3 i1 = min( g_0.xyz, l.zxy );
+    vec3 i2 = max( g_0.xyz, l.zxy );
+
+    //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+    //   x1 = x0 - i1  + 1.0 * C.xxx;
+    //   x2 = x0 - i2  + 2.0 * C.xxx;
+    //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+    vec3 x1 = x0 - i1 + C.xxx;
+    vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+    vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+    // Permutations
+    i = mod289(i);
+    vec4 p = permute( permute( permute(
+    i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+    + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+    + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+    // Gradients: 7x7 points over a square, mapped onto an octahedron.
+    // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+    float n_ = 0.142857142857; // 1.0/7.0
+    vec3  ns = n_ * D.wyz - D.xzx;
+
+    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+    vec4 x_ = floor(j * ns.z);
+    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+    vec4 x = x_ *ns.x + ns.yyyy;
+    vec4 y = y_ *ns.x + ns.yyyy;
+    vec4 h = 1.0 - abs(x) - abs(y);
+
+    vec4 b0 = vec4( x.xy, y.xy );
+    vec4 b1 = vec4( x.zw, y.zw );
+
+    //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+    //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+    vec4 s0 = floor(b0)*2.0 + 1.0;
+    vec4 s1 = floor(b1)*2.0 + 1.0;
+    vec4 sh = -step(h, vec4(0.0));
+
+    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+    vec3 p0 = vec3(a0.xy,h.x);
+    vec3 p1 = vec3(a0.zw,h.y);
+    vec3 p2 = vec3(a1.xy,h.z);
+    vec3 p3 = vec3(a1.zw,h.w);
+
+    //Normalise gradients
+    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+    p0 *= norm.x;
+    p1 *= norm.y;
+    p2 *= norm.z;
+    p3 *= norm.w;
+
+    // Mix final noise value
+    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+    m = m * m;
+    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
+    dot(p2,x2), dot(p3,x3) ) );
+}
+
+float perlin3( vec3 coord ) {
+
+    // float n = 0.0;
+    float n = 10.0 * abs( snoise( coord ));
+    return n;
+
+}
+
+void main( void ) {
+    vec2 uv = (vPosition.zx / vec2(100.0, 100.0));
+    float change = 10.0;
+    float changeCoord = 14.0;
+
+    if(color.r > 0.1) {
+        change = time * 0.001;
+        changeCoord = time * 0.0001;
+    }
+
+    uv.x = uv.x + change;
+    vec3 coord = vec3( uv.xy, changeCoord );
+
+    
+    float n = perlin3( coord.xyz );
+    
+    vec3 colors = vec3(
+            (255.0 * sin(n * 6.0))
+    );
+
+    float head = smoothstep(115.0,0.0,vPosition.z) * smoothstep(-100.0,800.0,vPosition.z);
+    vec4 zebrahead = vec4(color, 1.0);
+
+    if(colors.r < 0.1) colors = color;
+
+    gl_FragColor = mix(zebrahead, vec4( colors.r, colors.g, colors.b, 1.0 ), head);
+
+}
+`,
+  uniforms: {
+    time: { value: performance.now() }
+  }
+};
+class LandscapeMaterial extends THREE.ShaderMaterial {
+
+  constructor(params) {
+    // Make uniforms unique per instance
+    const shader = Object.assign({}, LandscapeMaterial.shader, {
+      uniforms: Object.assign({}, LandscapeMaterial.shader.uniforms, {
+        color: { value: params.color }
+      })
+    });
+
+    // console.log(scene);
+
+    super(shader);
+
+    this.loop = timestamp => {
+      window.requestAnimationFrame(this.loop);
+      this.uniforms.time.value = timestamp;
+    };
+
+    window.requestAnimationFrame(this.loop);
+  }
+
+}
+
+LandscapeMaterial.shader = {
+  blending: THREE.AdditiveBlending,
+  transparent: true,
+  // wireframe: true,
+  vertexShader: `
+#define GLSLIFY 1
+uniform float time;
+varying vec3 vPosition;
+
+//
+// GLSL textureless classic 3D noise "cnoise",
+// with an RSL-style periodic variant "pnoise".
+// Author:  Stefan Gustavson (stefan.gustavson@liu.se)
+// Version: 2011-10-11
+//
+// Many thanks to Ian McEwan of Ashima Arts for the
+// ideas for permutation and gradient selection.
+//
+// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
+// Distributed under the MIT license. See LICENSE file.
+// https://github.com/ashima/webgl-noise
+//
+vec3 mod289(vec3 x)
+{
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+vec4 mod289(vec4 x)
+{
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+vec4 permute(vec4 x)
+{
+    return mod289(((x*34.0)+1.0)*x);
+}
+vec4 taylorInvSqrt(vec4 r)
+{
+    return 1.79284291400159 - 0.85373472095314 * r;
+}
+vec3 fade(vec3 t) {
+    return t*t*t*(t*(t*6.0-15.0)+10.0);
+}
+float cnoise(vec3 P)
+{
+    vec3 Pi0 = floor(P);
+    // Integer part for indexing
+    vec3 Pi1 = Pi0 + vec3(1.0);
+    // Integer part + 1
+    Pi0 = mod289(Pi0);
+    Pi1 = mod289(Pi1);
+    vec3 Pf0 = fract(P);
+    // Fractional part for interpolation
+    vec3 Pf1 = Pf0 - vec3(1.0);
+    // Fractional part - 1.0
+    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+    vec4 iy = vec4(Pi0.yy, Pi1.yy);
+    vec4 iz0 = Pi0.zzzz;
+    vec4 iz1 = Pi1.zzzz;
+    vec4 ixy = permute(permute(ix) + iy);
+    vec4 ixy0 = permute(ixy + iz0);
+    vec4 ixy1 = permute(ixy + iz1);
+    vec4 gx0 = ixy0 * (1.0 / 7.0);
+    vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
+    gx0 = fract(gx0);
+    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+    vec4 sz0 = step(gz0, vec4(0.0));
+    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+    gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+    vec4 gx1 = ixy1 * (1.0 / 7.0);
+    vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
+    gx1 = fract(gx1);
+    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+    vec4 sz1 = step(gz1, vec4(0.0));
+    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+    gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+    vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
+    vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
+    vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
+    vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
+    vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
+    vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
+    vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
+    vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
+    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+    g000 *= norm0.x;
+    g010 *= norm0.y;
+    g100 *= norm0.z;
+    g110 *= norm0.w;
+    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+    g001 *= norm1.x;
+    g011 *= norm1.y;
+    g101 *= norm1.z;
+    g111 *= norm1.w;
+    float n000 = dot(g000, Pf0);
+    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+    float n111 = dot(g111, Pf1);
+    vec3 fade_xyz = fade(Pf0);
+    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
+    return 2.2 * n_xyz;
+}
+
+mat4 rotateMatrixX(float radian) {
+    return mat4(
+        1.0, 0.0, 0.0, 0.0,
+        0.0, cos(radian), -sin(radian), 0.0,
+        0.0, sin(radian), cos(radian), 0.0,
+        0.0, 0.0, 0.0, 1.0
+    );
+}
+
+mat4 rotateMatrixY(float radian) {
+    return mat4(
+        cos(radian), 0.0, sin(radian), 0.0,
+        0.0, 1.0, 0.0, 0.0,
+        -sin(radian), 0.0, cos(radian), 0.0,
+        0.0, 0.0, 0.0, 1.0
+    );
+}
+
+mat4 rotateMatrixZ(float radian) {
+    return mat4(
+        cos(radian), -sin(radian), 0.0, 0.0,
+        sin(radian), cos(radian), 0.0, 0.0,
+        0.0, 0.0, 1.0, 0.0,
+        0.0, 0.0, 0.0, 1.0
+    );
+}
+
+void main(void) {
+
+    float sin1 = sin(radians(position.y / 128.0 * 90.0));
+
+    //speed
+    vec3 noisePosition = position + vec3(-time * 0.05, 0.0, 0.0);
+    float noise1 = cnoise(noisePosition * 0.02);
+    float noise2 = cnoise(noisePosition * 0.08);
+    float noise3 = cnoise(noisePosition * 0.4);
+    vec3 lastPosition = position + vec3(0.0, 0.0,
+                                                noise1 * sin1 * 8.0
+                                                + noise2 * sin1 * 8.0
+                                                + noise2 * sin1 * 8.0
+                                                + noise3 * sin1 * 2.0
+                                                + noise3 * sin1 * 1.0
+                                                + pow(sin1, 2.0) * 40.0);
+    vPosition = lastPosition;
+
+    vec4 mvPosition = modelViewMatrix * vec4( lastPosition, 1.0 );
+    // gl_PointSize = floor(20.0 * ( 100.0 / -mvPosition.z ));
+    // gl_PointSize = 2.0 * (1.0+ 300.0 / length( mvPosition.xyz ) );
+    gl_Position = projectionMatrix * mvPosition;
+}
+`,
+  fragmentShader: `
+uniform sampler2D texture;
+
+precision highp float;
+#define GLSLIFY 1
+varying vec3 vPosition;
+
+void main ()
+{
+
+    float dist =  sqrt(dot (vPosition, vPosition));
+
+    mediump vec4 final_color;
+    final_color.rgb = vec3(237.0 / 255.0, 201.0 / 255.0, 175.0 / 255.0);
+    // final_color.rgb = vec3(194.0 / 255.0, 178.0 / 255.0, 128.0 / 255.0);
+    final_color.a = (((80.0 - dist) / 70.0) * 1.0);
+    // gl_FragColor = final_color.a * (vec4(final_color.rgb, 1.0));
+
+    float grass = smoothstep(10.0,40.0,dist);
+    vec4 grassfield = vec4(96.0/ 255.0, 128.0/ 255.0, 56.0/ 255.0, 1.0);
+
+    gl_FragColor = mix(grassfield, final_color.a * (vec4(final_color.rgb, 1.0)), grass);
+
+    // if ( gl_FragColor.a > 0.9 ) gl_FragColor.rgb = vec3(96.0/ 255.0, 128.0/ 255.0, 56.0/ 255.0);
+}
+`,
+  uniforms: {
+    time: { value: performance.now() }
+  }
+};
+function init() {
+  initScene();
+  loadModel().then(() => {
+    requestAnimationFrame(loop);
+  });
+  window.addEventListener('resize', onResize);
+}
+
+function initScene() {
+  prevTime = Date.now();
+
+  scene = new THREE.Scene();
+
+  camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 10000);
+  camera.position.set(0, 400, 1200);
+  var vector = new THREE.Vector3(0, 100, 0);
+  // vector.applyQuaternion( camera.quaternion );
+  camera.target = vector;
+  // camera.updateMatrix();
+  scene.add(camera);
+
+  camera.updateProjectionMatrix();
+
+  renderer = new THREE.WebGLRenderer({
+    alpha: true,
+    // antialias: true,
+    pixelRatio: window.devicePixelRatio,
+    antialias: window.devicePixelRatio === 1,
+  });
+  renderer.setSize(window.innerWidth, window.innerHeight);
+
+  controls = new THREE.OrbitControls(camera, renderer.domElement);
+
+  document.body.appendChild(renderer.domElement);
+}
+
+function loadModel() {
+  return new Promise((res, rej) => {
+    new THREE.JSONLoader().load(horse, geometry => {
+
+      const material = new ShieldMaterial({
+        color: new THREE.Color(0x000000),
+        offset: 10,
+        morphTargets: true
+      });
+      zebra = new THREE.Mesh(geometry, material);
+      zebra.rotation.y = -Math.PI / 2;
+      scene.add(zebra);
+
+      let landscapeGeometry = new THREE.PlaneGeometry(128, 128, 128, 128);
+      const landscapeMaterial = new LandscapeMaterial({
+        color: new THREE.Color(0xffffff)
+      });
+      landscape = new THREE.Mesh(landscapeGeometry, landscapeMaterial);
+      landscape.rotation.x = -Math.PI / 2;
+      landscape.scale.set(15.0, 15.0, 15.0);
+      scene.add(landscape);
+
+      mixer = new THREE.AnimationMixer(zebra);
+      var clip = THREE.AnimationClip.CreateFromMorphTargetSequence('gallop', geometry.morphTargets, 30);
+      mixer.clipAction(clip).play();
+
+      res();
+    });
+  });
+}
+
+function loop(timestamp) {
+  requestAnimationFrame(loop);
+
+  if (mixer) {
+    let time = Date.now();
+    mixer.update((time - prevTime) * 0.0005);
+    prevTime = time;
+  }
+
+  controls.update();
+
+  camera.lookAt(camera.target);
+  renderer.render(scene, camera);
+}
+
+function onResize() {
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+}
+
+window.addEventListener('click', function () {
+  zebra.material.uniforms.color.value = new THREE.Color(Math.random() * 0xffffff);
+  // console.log(landscape.material.wireframe);
+  if(landscape.material.wireframe == false) {
+   landscape.material.wireframe = true;
+  } else {
+   landscape.material.wireframe = false;
+  }
+});
+
+init();
diff --git a/codevember-12/src/style.scss b/codevember-12/src/style.scss
new file mode 100644
index 0000000..5044614
--- /dev/null
+++ b/codevember-12/src/style.scss
@@ -0,0 +1,59 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+
+$black: #343436;
+$white: #fff;
+$yellow: #fcd000;
+
+*, *:before, *:after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html, body, canvas {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+  background: radial-gradient(hsl(255, 18%, 35%), hsl(198, 32%, 8%));
+}
+
+.footer {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ padding: 10px 10px;
+ text-align: right;
+ font-family: 'Roboto', sans-serif;
+ font-size: 12px;
+ 
+ &.v-dark {
+  background-color: $black;
+  color: $white;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+ }
+ &.v-light {
+  background-color: $white;
+  color: $black;
+ }
+}
+
+.footer-anchor {
+ display: inline-block;
+ margin-left: 5px;
+ padding: 2px 4px;
+ color: $black;
+ text-decoration: none;
+ background-color: $yellow;
+ border-radius: 4px;
+ opacity: 1;
+ transition: opacity 0.2s;
+ 
+ &:hover {
+  opacity: 0.6;
+ }
+}
\ No newline at end of file
diff --git a/codevember-29-hypnotic-neon-lights/README.markdown b/codevember-29-hypnotic-neon-lights/README.markdown
new file mode 100644
index 0000000..dc05332
--- /dev/null
+++ b/codevember-29-hypnotic-neon-lights/README.markdown
@@ -0,0 +1,5 @@
+# #CodeVember 29 | Hypnotic neon lights
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/terabaud/pen/xRPxwV](https://codepen.io/terabaud/pen/xRPxwV).
+
+Roughly based on this simple [DOS experiment](https://twitter.com/terabaud/status/803639860967809024)
diff --git a/codevember-29-hypnotic-neon-lights/dist/index.html b/codevember-29-hypnotic-neon-lights/dist/index.html
new file mode 100644
index 0000000..c3fdeec
--- /dev/null
+++ b/codevember-29-hypnotic-neon-lights/dist/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - #CodeVember 29 | Hypnotic neon lights</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id=a></canvas>
+<script id=fragmentShader type=x-shader/x-fragment>
+precision mediump float;
+uniform float time;
+uniform float width;
+uniform float height;
+
+vec2 R(vec2 p,float a) {
+	return vec2( p.x*cos(a) + p.y*sin(a), 
+			    -p.x*sin(a) + p.y*cos(a));
+}
+
+
+void main() {
+	vec2 resolution = vec2(width, height);
+  float vc = time / 50.0;
+	float vt = 1000.0 + sin(sin(time/16.0)*2.0*3.1415927) * 7000.0;
+	float vr = time / 20.0;
+	vec2 c0 = (gl_FragCoord.xy / resolution) - vec2(0.5 + cos(time*0.3) * sin(time * 0.1) * 0.3, 0.5 + sin(time*0.3) * sin(time * 0.2) * 0.3);
+	vec2 c  = -R(c0, vr)*8.0; 
+	float val = 0.5 + sin((((vt - c.x - c.y) / 2.0)*(0.5+c.x)*(c.y+0.5) + vt+ c.x + c.y)/500.0);
+	gl_FragColor = vec4(vec3(val* (0.2+sin(sin(1.0+vc)* 10.0 *c.x*c.y)*0.8), val * (0.3+cos(2.0 + c.x*c.y*sin(vc)* 10.0 )*0.7), val * (0.3+cos(1.0 + c.x*c.y *sin(vc)* 10.0))*0.7), 1.0);
+}
+</script>
+	
+<script id=vertexShader type=x-shader/x-vertex>
+attribute vec3 pos;
+
+void main() {
+	gl_Position=vec4(pos, 1.0);
+}
+</script>
+<!-- partial -->
+  <script src='https://terabaud.github.io/hello-webgl/glutz.js'></script><script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/codevember-29-hypnotic-neon-lights/dist/script.js b/codevember-29-hypnotic-neon-lights/dist/script.js
new file mode 100644
index 0000000..3c0e587
--- /dev/null
+++ b/codevember-29-hypnotic-neon-lights/dist/script.js
@@ -0,0 +1,36 @@
+import GLea from 'https://terabaud.github.io/hello-webgl/lib/glea/glea.mjs';
+
+const frag = document.getElementById('fragmentShader').textContent;
+const vert = document.getElementById('vertexShader').textContent;
+
+let texture = null;
+
+const glea = new GLea({
+  shaders: [
+    GLea.fragmentShader(frag),
+    GLea.vertexShader(vert)
+  ],
+  buffers: {
+    'pos': GLea.buffer(2, [1, 1,  -1, 1,  1,-1,  -1,-1])
+  }
+}).create();
+
+function loop(time) {
+  const { gl } = glea;
+  glea.clear();
+  glea.uni('width', glea.width);
+  glea.uni('height', glea.height);
+  glea.uni('time', time * .001);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  requestAnimationFrame(loop);
+}
+
+function setup() {
+  const { gl } = glea;
+  window.addEventListener('resize', () => {
+    glea.resize();
+  });
+  loop(0);
+}
+
+setup();
\ No newline at end of file
diff --git a/codevember-29-hypnotic-neon-lights/dist/style.css b/codevember-29-hypnotic-neon-lights/dist/style.css
new file mode 100644
index 0000000..c1bf066
--- /dev/null
+++ b/codevember-29-hypnotic-neon-lights/dist/style.css
@@ -0,0 +1,9 @@
+body {
+	margin: 0;
+	overflow: hidden;
+}
+
+canvas {
+	width: 100vw;
+	height: 100vh;
+}
\ No newline at end of file
diff --git a/codevember-29-hypnotic-neon-lights/license.txt b/codevember-29-hypnotic-neon-lights/license.txt
new file mode 100644
index 0000000..f5030bc
--- /dev/null
+++ b/codevember-29-hypnotic-neon-lights/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Lea Rosema (https://codepen.io/terabaud/pen/xRPxwV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/codevember-29-hypnotic-neon-lights/src/index.html b/codevember-29-hypnotic-neon-lights/src/index.html
new file mode 100644
index 0000000..2745ac3
--- /dev/null
+++ b/codevember-29-hypnotic-neon-lights/src/index.html
@@ -0,0 +1,32 @@
+<canvas id=a></canvas>
+<script id=fragmentShader type=x-shader/x-fragment>
+precision mediump float;
+uniform float time;
+uniform float width;
+uniform float height;
+
+vec2 R(vec2 p,float a) {
+	return vec2( p.x*cos(a) + p.y*sin(a), 
+			    -p.x*sin(a) + p.y*cos(a));
+}
+
+
+void main() {
+	vec2 resolution = vec2(width, height);
+  float vc = time / 50.0;
+	float vt = 1000.0 + sin(sin(time/16.0)*2.0*3.1415927) * 7000.0;
+	float vr = time / 20.0;
+	vec2 c0 = (gl_FragCoord.xy / resolution) - vec2(0.5 + cos(time*0.3) * sin(time * 0.1) * 0.3, 0.5 + sin(time*0.3) * sin(time * 0.2) * 0.3);
+	vec2 c  = -R(c0, vr)*8.0; 
+	float val = 0.5 + sin((((vt - c.x - c.y) / 2.0)*(0.5+c.x)*(c.y+0.5) + vt+ c.x + c.y)/500.0);
+	gl_FragColor = vec4(vec3(val* (0.2+sin(sin(1.0+vc)* 10.0 *c.x*c.y)*0.8), val * (0.3+cos(2.0 + c.x*c.y*sin(vc)* 10.0 )*0.7), val * (0.3+cos(1.0 + c.x*c.y *sin(vc)* 10.0))*0.7), 1.0);
+}
+</script>
+	
+<script id=vertexShader type=x-shader/x-vertex>
+attribute vec3 pos;
+
+void main() {
+	gl_Position=vec4(pos, 1.0);
+}
+</script>
\ No newline at end of file
diff --git a/codevember-29-hypnotic-neon-lights/src/script.js b/codevember-29-hypnotic-neon-lights/src/script.js
new file mode 100644
index 0000000..c802c1a
--- /dev/null
+++ b/codevember-29-hypnotic-neon-lights/src/script.js
@@ -0,0 +1,36 @@
+import GLea from 'https://terabaud.github.io/hello-webgl/lib/glea/glea.mjs';
+
+const frag = document.getElementById('fragmentShader').textContent;
+const vert = document.getElementById('vertexShader').textContent;
+
+let texture = null;
+
+const glea = new GLea({
+  shaders: [
+    GLea.fragmentShader(frag),
+    GLea.vertexShader(vert)
+  ],
+  buffers: {
+    'pos': GLea.buffer(2, [1, 1,  -1, 1,  1,-1,  -1,-1])
+  }
+}).create();
+
+function loop(time) {
+  const { gl } = glea;
+  glea.clear();
+  glea.uni('width', glea.width);
+  glea.uni('height', glea.height);
+  glea.uni('time', time * .001);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  requestAnimationFrame(loop);
+}
+
+function setup() {
+  const { gl } = glea;
+  window.addEventListener('resize', () => {
+    glea.resize();
+  });
+  loop(0);
+}
+
+setup();
diff --git a/codevember-29-hypnotic-neon-lights/src/style.css b/codevember-29-hypnotic-neon-lights/src/style.css
new file mode 100644
index 0000000..c1bf066
--- /dev/null
+++ b/codevember-29-hypnotic-neon-lights/src/style.css
@@ -0,0 +1,9 @@
+body {
+	margin: 0;
+	overflow: hidden;
+}
+
+canvas {
+	width: 100vw;
+	height: 100vh;
+}
\ No newline at end of file
diff --git a/codevember-30-2021-pure-css-order-vs-chaos/README.markdown b/codevember-30-2021-pure-css-order-vs-chaos/README.markdown
new file mode 100644
index 0000000..3c5a256
--- /dev/null
+++ b/codevember-30-2021-pure-css-order-vs-chaos/README.markdown
@@ -0,0 +1,43 @@
+# #codeVember #30/2021: pure CSS order vs. chaos
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/thebabydino/pen/VwMwRGQ](https://codepen.io/thebabydino/pen/VwMwRGQ).
+
+[See me code this](https://youtu.be/afADEZdsQVA) in 20 minutes.
+
+---
+
+If the work I've been putting out since early 2012 has helped you in any way or you just like it and you wish me to be able to continue putting out stuff, please consider one of the following:
+
+* being a cool cat 😼🎩 and becoming a patron on Patreon
+
+[![become a patron button](https://assets.codepen.io/2017/btn_patreon.png)](https://www.patreon.com/anatudor)
+
+* making a one time donation via Ko-fi
+
+[![ko-fi](https://assets.codepen.io/2017/btn_kofi.svg)](https://ko-fi.com/anatudor)
+
+* getting me something off my Amazon WishList 
+
+[🎁 🇺🇸](https://www.amazon.com/gp/registry/wishlist/2Y3C4722GXH0I/) / [🎁 🇬🇧](https://www.amazon.co.uk/gp/registry/wishlist/2I25W7U0KADSR/)
+
+* or at least sharing this to show the rest of the world what can be done with CSS these days
+
+Thank you!
+
+---
+
+Resources:
+
+* [inspiration](https://dribbble.com/shots/15066435-Order-vs-Chaos)
+
+* [layout tip](https://twitter.com/ChallengesCss/status/1471128244720181258)
+
+* [distance between two points in 1D](https://wumbo.net/formula/distance-between-two-points-1d/)
+
+* [Using Absolute Value, Sign, Rounding and Modulo in CSS Today](https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/)
+
+* [circle equation](http://herodgeometry.weebly.com/uploads/3/7/4/1/37417637/_9159574.png)
+
+---
+
+Dedicated to the memory of someone dear who passed away in January 2019. Missing you every day.
diff --git a/codevember-30-2021-pure-css-order-vs-chaos/dist/index.html b/codevember-30-2021-pure-css-order-vs-chaos/dist/index.html
new file mode 100644
index 0000000..559678c
--- /dev/null
+++ b/codevember-30-2021-pure-css-order-vs-chaos/dist/index.html
@@ -0,0 +1,1075 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - #codeVember #30/2021: pure CSS order vs. chaos</title>
+  <script>const ID='afADEZdsQVA'</script><link rel='stylesheet' href='https://codepen.io/thebabydino/pen/evPbxv.css'><link rel="stylesheet" href="./style.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<body style="--n: 32">
+  <style>.tile:nth-of-type(32n + 1) { --i: 0 }
+    .tile:nth-of-type(n + 1) { --j: 0 }.tile:nth-of-type(32n + 2) { --i: 1 }
+    .tile:nth-of-type(n + 33) { --j: 1 }.tile:nth-of-type(32n + 3) { --i: 2 }
+    .tile:nth-of-type(n + 65) { --j: 2 }.tile:nth-of-type(32n + 4) { --i: 3 }
+    .tile:nth-of-type(n + 97) { --j: 3 }.tile:nth-of-type(32n + 5) { --i: 4 }
+    .tile:nth-of-type(n + 129) { --j: 4 }.tile:nth-of-type(32n + 6) { --i: 5 }
+    .tile:nth-of-type(n + 161) { --j: 5 }.tile:nth-of-type(32n + 7) { --i: 6 }
+    .tile:nth-of-type(n + 193) { --j: 6 }.tile:nth-of-type(32n + 8) { --i: 7 }
+    .tile:nth-of-type(n + 225) { --j: 7 }.tile:nth-of-type(32n + 9) { --i: 8 }
+    .tile:nth-of-type(n + 257) { --j: 8 }.tile:nth-of-type(32n + 10) { --i: 9 }
+    .tile:nth-of-type(n + 289) { --j: 9 }.tile:nth-of-type(32n + 11) { --i: 10 }
+    .tile:nth-of-type(n + 321) { --j: 10 }.tile:nth-of-type(32n + 12) { --i: 11 }
+    .tile:nth-of-type(n + 353) { --j: 11 }.tile:nth-of-type(32n + 13) { --i: 12 }
+    .tile:nth-of-type(n + 385) { --j: 12 }.tile:nth-of-type(32n + 14) { --i: 13 }
+    .tile:nth-of-type(n + 417) { --j: 13 }.tile:nth-of-type(32n + 15) { --i: 14 }
+    .tile:nth-of-type(n + 449) { --j: 14 }.tile:nth-of-type(32n + 16) { --i: 15 }
+    .tile:nth-of-type(n + 481) { --j: 15 }.tile:nth-of-type(32n + 17) { --i: 16 }
+    .tile:nth-of-type(n + 513) { --j: 16 }.tile:nth-of-type(32n + 18) { --i: 17 }
+    .tile:nth-of-type(n + 545) { --j: 17 }.tile:nth-of-type(32n + 19) { --i: 18 }
+    .tile:nth-of-type(n + 577) { --j: 18 }.tile:nth-of-type(32n + 20) { --i: 19 }
+    .tile:nth-of-type(n + 609) { --j: 19 }.tile:nth-of-type(32n + 21) { --i: 20 }
+    .tile:nth-of-type(n + 641) { --j: 20 }.tile:nth-of-type(32n + 22) { --i: 21 }
+    .tile:nth-of-type(n + 673) { --j: 21 }.tile:nth-of-type(32n + 23) { --i: 22 }
+    .tile:nth-of-type(n + 705) { --j: 22 }.tile:nth-of-type(32n + 24) { --i: 23 }
+    .tile:nth-of-type(n + 737) { --j: 23 }.tile:nth-of-type(32n + 25) { --i: 24 }
+    .tile:nth-of-type(n + 769) { --j: 24 }.tile:nth-of-type(32n + 26) { --i: 25 }
+    .tile:nth-of-type(n + 801) { --j: 25 }.tile:nth-of-type(32n + 27) { --i: 26 }
+    .tile:nth-of-type(n + 833) { --j: 26 }.tile:nth-of-type(32n + 28) { --i: 27 }
+    .tile:nth-of-type(n + 865) { --j: 27 }.tile:nth-of-type(32n + 29) { --i: 28 }
+    .tile:nth-of-type(n + 897) { --j: 28 }.tile:nth-of-type(32n + 30) { --i: 29 }
+    .tile:nth-of-type(n + 929) { --j: 29 }.tile:nth-of-type(32n + 31) { --i: 30 }
+    .tile:nth-of-type(n + 961) { --j: 30 }.tile:nth-of-type(32n + 32) { --i: 31 }
+    .tile:nth-of-type(n + 993) { --j: 31 }
+  </style>
+  <div class="tile" style="--x: -143%; --y: -103%"></div>
+  <div class="tile" style="--x: 143%; --y: 79%"></div>
+  <div class="tile" style="--x: -70%; --y: -129%"></div>
+  <div class="tile" style="--x: -90%; --y: 67%"></div>
+  <div class="tile" style="--x: -104%; --y: 90%"></div>
+  <div class="tile" style="--x: 56%; --y: 146%"></div>
+  <div class="tile" style="--x: 93%; --y: -75%"></div>
+  <div class="tile" style="--x: -76%; --y: -140%"></div>
+  <div class="tile" style="--x: 75%; --y: -95%"></div>
+  <div class="tile" style="--x: 144%; --y: 146%"></div>
+  <div class="tile" style="--x: 69%; --y: -137%"></div>
+  <div class="tile" style="--x: 69%; --y: -60%"></div>
+  <div class="tile" style="--x: -52%; --y: -103%"></div>
+  <div class="tile" style="--x: -111%; --y: -97%"></div>
+  <div class="tile" style="--x: 69%; --y: -140%"></div>
+  <div class="tile" style="--x: -80%; --y: -106%"></div>
+  <div class="tile" style="--x: -79%; --y: 109%"></div>
+  <div class="tile" style="--x: -132%; --y: 99%"></div>
+  <div class="tile" style="--x: 87%; --y: 62%"></div>
+  <div class="tile" style="--x: -90%; --y: -81%"></div>
+  <div class="tile" style="--x: -53%; --y: -85%"></div>
+  <div class="tile" style="--x: 135%; --y: 72%"></div>
+  <div class="tile" style="--x: 67%; --y: -115%"></div>
+  <div class="tile" style="--x: 83%; --y: -92%"></div>
+  <div class="tile" style="--x: -64%; --y: -86%"></div>
+  <div class="tile" style="--x: -60%; --y: -54%"></div>
+  <div class="tile" style="--x: -54%; --y: 78%"></div>
+  <div class="tile" style="--x: 111%; --y: -120%"></div>
+  <div class="tile" style="--x: -137%; --y: -112%"></div>
+  <div class="tile" style="--x: -130%; --y: -137%"></div>
+  <div class="tile" style="--x: 58%; --y: 104%"></div>
+  <div class="tile" style="--x: -149%; --y: 75%"></div>
+  <div class="tile" style="--x: 132%; --y: -118%"></div>
+  <div class="tile" style="--x: -58%; --y: 115%"></div>
+  <div class="tile" style="--x: -96%; --y: -150%"></div>
+  <div class="tile" style="--x: -123%; --y: 106%"></div>
+  <div class="tile" style="--x: 76%; --y: 71%"></div>
+  <div class="tile" style="--x: 132%; --y: -130%"></div>
+  <div class="tile" style="--x: 65%; --y: -105%"></div>
+  <div class="tile" style="--x: -82%; --y: -148%"></div>
+  <div class="tile" style="--x: 140%; --y: -128%"></div>
+  <div class="tile" style="--x: 56%; --y: 85%"></div>
+  <div class="tile" style="--x: -77%; --y: 100%"></div>
+  <div class="tile" style="--x: -76%; --y: -101%"></div>
+  <div class="tile" style="--x: 59%; --y: 67%"></div>
+  <div class="tile" style="--x: -70%; --y: -79%"></div>
+  <div class="tile" style="--x: -91%; --y: -68%"></div>
+  <div class="tile" style="--x: -53%; --y: -95%"></div>
+  <div class="tile" style="--x: -117%; --y: -120%"></div>
+  <div class="tile" style="--x: -71%; --y: 109%"></div>
+  <div class="tile" style="--x: -53%; --y: -55%"></div>
+  <div class="tile" style="--x: 108%; --y: -59%"></div>
+  <div class="tile" style="--x: -58%; --y: 141%"></div>
+  <div class="tile" style="--x: -149%; --y: -96%"></div>
+  <div class="tile" style="--x: -86%; --y: 74%"></div>
+  <div class="tile" style="--x: -132%; --y: 78%"></div>
+  <div class="tile" style="--x: -114%; --y: 84%"></div>
+  <div class="tile" style="--x: -78%; --y: -106%"></div>
+  <div class="tile" style="--x: -139%; --y: -142%"></div>
+  <div class="tile" style="--x: -60%; --y: -129%"></div>
+  <div class="tile" style="--x: 106%; --y: 146%"></div>
+  <div class="tile" style="--x: 107%; --y: 104%"></div>
+  <div class="tile" style="--x: 73%; --y: -142%"></div>
+  <div class="tile" style="--x: -145%; --y: -118%"></div>
+  <div class="tile" style="--x: -108%; --y: -141%"></div>
+  <div class="tile" style="--x: -119%; --y: -85%"></div>
+  <div class="tile" style="--x: 76%; --y: 126%"></div>
+  <div class="tile" style="--x: -79%; --y: 81%"></div>
+  <div class="tile" style="--x: -125%; --y: 89%"></div>
+  <div class="tile" style="--x: 125%; --y: -144%"></div>
+  <div class="tile" style="--x: -65%; --y: -126%"></div>
+  <div class="tile" style="--x: -104%; --y: -62%"></div>
+  <div class="tile" style="--x: -108%; --y: 62%"></div>
+  <div class="tile" style="--x: 67%; --y: -134%"></div>
+  <div class="tile" style="--x: 81%; --y: 83%"></div>
+  <div class="tile" style="--x: 91%; --y: 84%"></div>
+  <div class="tile" style="--x: -86%; --y: -82%"></div>
+  <div class="tile" style="--x: 148%; --y: -66%"></div>
+  <div class="tile" style="--x: 55%; --y: 53%"></div>
+  <div class="tile" style="--x: 127%; --y: 87%"></div>
+  <div class="tile" style="--x: 69%; --y: 103%"></div>
+  <div class="tile" style="--x: -117%; --y: -143%"></div>
+  <div class="tile" style="--x: 69%; --y: -57%"></div>
+  <div class="tile" style="--x: -96%; --y: -64%"></div>
+  <div class="tile" style="--x: 51%; --y: -81%"></div>
+  <div class="tile" style="--x: -128%; --y: -92%"></div>
+  <div class="tile" style="--x: 109%; --y: -78%"></div>
+  <div class="tile" style="--x: -72%; --y: 114%"></div>
+  <div class="tile" style="--x: 51%; --y: 64%"></div>
+  <div class="tile" style="--x: -124%; --y: 140%"></div>
+  <div class="tile" style="--x: 123%; --y: -74%"></div>
+  <div class="tile" style="--x: -51%; --y: 72%"></div>
+  <div class="tile" style="--x: 130%; --y: -141%"></div>
+  <div class="tile" style="--x: -114%; --y: -117%"></div>
+  <div class="tile" style="--x: -117%; --y: 119%"></div>
+  <div class="tile" style="--x: 121%; --y: -144%"></div>
+  <div class="tile" style="--x: -116%; --y: 61%"></div>
+  <div class="tile" style="--x: 142%; --y: -55%"></div>
+  <div class="tile" style="--x: 147%; --y: -70%"></div>
+  <div class="tile" style="--x: 94%; --y: -95%"></div>
+  <div class="tile" style="--x: 109%; --y: 111%"></div>
+  <div class="tile" style="--x: 63%; --y: -87%"></div>
+  <div class="tile" style="--x: 57%; --y: 112%"></div>
+  <div class="tile" style="--x: 130%; --y: -64%"></div>
+  <div class="tile" style="--x: 145%; --y: -67%"></div>
+  <div class="tile" style="--x: -63%; --y: 125%"></div>
+  <div class="tile" style="--x: -124%; --y: -132%"></div>
+  <div class="tile" style="--x: 124%; --y: -95%"></div>
+  <div class="tile" style="--x: -85%; --y: 120%"></div>
+  <div class="tile" style="--x: -122%; --y: 139%"></div>
+  <div class="tile" style="--x: -107%; --y: -93%"></div>
+  <div class="tile" style="--x: 77%; --y: -125%"></div>
+  <div class="tile" style="--x: -88%; --y: -102%"></div>
+  <div class="tile" style="--x: -53%; --y: -96%"></div>
+  <div class="tile" style="--x: 149%; --y: 132%"></div>
+  <div class="tile" style="--x: -54%; --y: 96%"></div>
+  <div class="tile" style="--x: -142%; --y: 105%"></div>
+  <div class="tile" style="--x: 143%; --y: -111%"></div>
+  <div class="tile" style="--x: 53%; --y: -69%"></div>
+  <div class="tile" style="--x: 147%; --y: -139%"></div>
+  <div class="tile" style="--x: 114%; --y: -94%"></div>
+  <div class="tile" style="--x: -69%; --y: 134%"></div>
+  <div class="tile" style="--x: 67%; --y: -74%"></div>
+  <div class="tile" style="--x: 149%; --y: -137%"></div>
+  <div class="tile" style="--x: 90%; --y: 135%"></div>
+  <div class="tile" style="--x: 53%; --y: -78%"></div>
+  <div class="tile" style="--x: -65%; --y: 112%"></div>
+  <div class="tile" style="--x: -141%; --y: -116%"></div>
+  <div class="tile" style="--x: 115%; --y: -135%"></div>
+  <div class="tile" style="--x: -74%; --y: -111%"></div>
+  <div class="tile" style="--x: 143%; --y: 76%"></div>
+  <div class="tile" style="--x: -138%; --y: -57%"></div>
+  <div class="tile" style="--x: -65%; --y: -92%"></div>
+  <div class="tile" style="--x: 60%; --y: -112%"></div>
+  <div class="tile" style="--x: -92%; --y: 126%"></div>
+  <div class="tile" style="--x: -80%; --y: 58%"></div>
+  <div class="tile" style="--x: 97%; --y: -105%"></div>
+  <div class="tile" style="--x: 98%; --y: -136%"></div>
+  <div class="tile" style="--x: 104%; --y: -55%"></div>
+  <div class="tile" style="--x: -59%; --y: -149%"></div>
+  <div class="tile" style="--x: 51%; --y: 110%"></div>
+  <div class="tile" style="--x: 139%; --y: -80%"></div>
+  <div class="tile" style="--x: -93%; --y: 97%"></div>
+  <div class="tile" style="--x: -80%; --y: 64%"></div>
+  <div class="tile" style="--x: -65%; --y: -63%"></div>
+  <div class="tile" style="--x: -104%; --y: 76%"></div>
+  <div class="tile" style="--x: 88%; --y: 101%"></div>
+  <div class="tile" style="--x: -60%; --y: 126%"></div>
+  <div class="tile" style="--x: -103%; --y: 85%"></div>
+  <div class="tile" style="--x: 140%; --y: -63%"></div>
+  <div class="tile" style="--x: -102%; --y: -60%"></div>
+  <div class="tile" style="--x: -68%; --y: -60%"></div>
+  <div class="tile" style="--x: 107%; --y: 107%"></div>
+  <div class="tile" style="--x: 126%; --y: -93%"></div>
+  <div class="tile" style="--x: 120%; --y: 54%"></div>
+  <div class="tile" style="--x: 144%; --y: 119%"></div>
+  <div class="tile" style="--x: 117%; --y: 141%"></div>
+  <div class="tile" style="--x: -92%; --y: 66%"></div>
+  <div class="tile" style="--x: -96%; --y: 55%"></div>
+  <div class="tile" style="--x: 135%; --y: -88%"></div>
+  <div class="tile" style="--x: -101%; --y: 83%"></div>
+  <div class="tile" style="--x: -81%; --y: -110%"></div>
+  <div class="tile" style="--x: -95%; --y: 54%"></div>
+  <div class="tile" style="--x: -87%; --y: -119%"></div>
+  <div class="tile" style="--x: 94%; --y: -126%"></div>
+  <div class="tile" style="--x: 114%; --y: 112%"></div>
+  <div class="tile" style="--x: -118%; --y: -85%"></div>
+  <div class="tile" style="--x: 145%; --y: -55%"></div>
+  <div class="tile" style="--x: 112%; --y: -129%"></div>
+  <div class="tile" style="--x: -55%; --y: -68%"></div>
+  <div class="tile" style="--x: -88%; --y: -105%"></div>
+  <div class="tile" style="--x: -79%; --y: -75%"></div>
+  <div class="tile" style="--x: -63%; --y: -113%"></div>
+  <div class="tile" style="--x: 116%; --y: -111%"></div>
+  <div class="tile" style="--x: 100%; --y: 88%"></div>
+  <div class="tile" style="--x: 71%; --y: 139%"></div>
+  <div class="tile" style="--x: -121%; --y: -137%"></div>
+  <div class="tile" style="--x: 79%; --y: 74%"></div>
+  <div class="tile" style="--x: -107%; --y: -96%"></div>
+  <div class="tile" style="--x: -143%; --y: 60%"></div>
+  <div class="tile" style="--x: -59%; --y: 149%"></div>
+  <div class="tile" style="--x: 107%; --y: -73%"></div>
+  <div class="tile" style="--x: -117%; --y: -149%"></div>
+  <div class="tile" style="--x: 133%; --y: -95%"></div>
+  <div class="tile" style="--x: -91%; --y: -133%"></div>
+  <div class="tile" style="--x: 73%; --y: -52%"></div>
+  <div class="tile" style="--x: 63%; --y: -109%"></div>
+  <div class="tile" style="--x: 145%; --y: -92%"></div>
+  <div class="tile" style="--x: 87%; --y: -73%"></div>
+  <div class="tile" style="--x: 98%; --y: -69%"></div>
+  <div class="tile" style="--x: -133%; --y: 127%"></div>
+  <div class="tile" style="--x: 83%; --y: -136%"></div>
+  <div class="tile" style="--x: 94%; --y: 68%"></div>
+  <div class="tile" style="--x: -149%; --y: 101%"></div>
+  <div class="tile" style="--x: 114%; --y: -72%"></div>
+  <div class="tile" style="--x: 73%; --y: 72%"></div>
+  <div class="tile" style="--x: -91%; --y: 115%"></div>
+  <div class="tile" style="--x: 97%; --y: -123%"></div>
+  <div class="tile" style="--x: -75%; --y: 105%"></div>
+  <div class="tile" style="--x: -57%; --y: -141%"></div>
+  <div class="tile" style="--x: 95%; --y: 134%"></div>
+  <div class="tile" style="--x: -119%; --y: -70%"></div>
+  <div class="tile" style="--x: -76%; --y: 116%"></div>
+  <div class="tile" style="--x: 146%; --y: -145%"></div>
+  <div class="tile" style="--x: 120%; --y: -109%"></div>
+  <div class="tile" style="--x: 95%; --y: 51%"></div>
+  <div class="tile" style="--x: 143%; --y: 127%"></div>
+  <div class="tile" style="--x: 84%; --y: 126%"></div>
+  <div class="tile" style="--x: 130%; --y: -132%"></div>
+  <div class="tile" style="--x: 53%; --y: 53%"></div>
+  <div class="tile" style="--x: 74%; --y: 79%"></div>
+  <div class="tile" style="--x: 114%; --y: 51%"></div>
+  <div class="tile" style="--x: -127%; --y: -121%"></div>
+  <div class="tile" style="--x: -128%; --y: -78%"></div>
+  <div class="tile" style="--x: 74%; --y: -126%"></div>
+  <div class="tile" style="--x: -88%; --y: 114%"></div>
+  <div class="tile" style="--x: 123%; --y: -76%"></div>
+  <div class="tile" style="--x: -66%; --y: -77%"></div>
+  <div class="tile" style="--x: 71%; --y: -123%"></div>
+  <div class="tile" style="--x: 127%; --y: 106%"></div>
+  <div class="tile" style="--x: -117%; --y: 127%"></div>
+  <div class="tile" style="--x: 96%; --y: -105%"></div>
+  <div class="tile" style="--x: -57%; --y: -104%"></div>
+  <div class="tile" style="--x: -118%; --y: -76%"></div>
+  <div class="tile" style="--x: -67%; --y: 119%"></div>
+  <div class="tile" style="--x: -137%; --y: 140%"></div>
+  <div class="tile" style="--x: 56%; --y: -58%"></div>
+  <div class="tile" style="--x: 146%; --y: -69%"></div>
+  <div class="tile" style="--x: 62%; --y: -87%"></div>
+  <div class="tile" style="--x: -109%; --y: -55%"></div>
+  <div class="tile" style="--x: 89%; --y: 56%"></div>
+  <div class="tile" style="--x: -146%; --y: -120%"></div>
+  <div class="tile" style="--x: 130%; --y: 93%"></div>
+  <div class="tile" style="--x: 54%; --y: 102%"></div>
+  <div class="tile" style="--x: 97%; --y: -113%"></div>
+  <div class="tile" style="--x: -54%; --y: -59%"></div>
+  <div class="tile" style="--x: 123%; --y: -113%"></div>
+  <div class="tile" style="--x: 140%; --y: -112%"></div>
+  <div class="tile" style="--x: -142%; --y: 77%"></div>
+  <div class="tile" style="--x: -61%; --y: -95%"></div>
+  <div class="tile" style="--x: -131%; --y: -110%"></div>
+  <div class="tile" style="--x: -131%; --y: 127%"></div>
+  <div class="tile" style="--x: 111%; --y: 58%"></div>
+  <div class="tile" style="--x: -58%; --y: -85%"></div>
+  <div class="tile" style="--x: -63%; --y: -140%"></div>
+  <div class="tile" style="--x: -65%; --y: -101%"></div>
+  <div class="tile" style="--x: 100%; --y: 117%"></div>
+  <div class="tile" style="--x: 108%; --y: -141%"></div>
+  <div class="tile" style="--x: -127%; --y: -143%"></div>
+  <div class="tile" style="--x: -116%; --y: -127%"></div>
+  <div class="tile" style="--x: 80%; --y: 146%"></div>
+  <div class="tile" style="--x: -86%; --y: -117%"></div>
+  <div class="tile" style="--x: 82%; --y: -72%"></div>
+  <div class="tile" style="--x: -69%; --y: 137%"></div>
+  <div class="tile" style="--x: -137%; --y: -141%"></div>
+  <div class="tile" style="--x: -52%; --y: 123%"></div>
+  <div class="tile" style="--x: -77%; --y: -79%"></div>
+  <div class="tile" style="--x: -60%; --y: 149%"></div>
+  <div class="tile" style="--x: 95%; --y: 142%"></div>
+  <div class="tile" style="--x: 67%; --y: -55%"></div>
+  <div class="tile" style="--x: 130%; --y: 86%"></div>
+  <div class="tile" style="--x: 60%; --y: -67%"></div>
+  <div class="tile" style="--x: -83%; --y: 136%"></div>
+  <div class="tile" style="--x: -79%; --y: -66%"></div>
+  <div class="tile" style="--x: 105%; --y: -147%"></div>
+  <div class="tile" style="--x: -124%; --y: -59%"></div>
+  <div class="tile" style="--x: -104%; --y: 112%"></div>
+  <div class="tile" style="--x: 118%; --y: -120%"></div>
+  <div class="tile" style="--x: 103%; --y: -130%"></div>
+  <div class="tile" style="--x: 82%; --y: -106%"></div>
+  <div class="tile" style="--x: 132%; --y: -78%"></div>
+  <div class="tile" style="--x: -147%; --y: 66%"></div>
+  <div class="tile" style="--x: -134%; --y: 106%"></div>
+  <div class="tile" style="--x: -80%; --y: -85%"></div>
+  <div class="tile" style="--x: -105%; --y: 112%"></div>
+  <div class="tile" style="--x: -133%; --y: 116%"></div>
+  <div class="tile" style="--x: -125%; --y: -80%"></div>
+  <div class="tile" style="--x: 131%; --y: 93%"></div>
+  <div class="tile" style="--x: 94%; --y: -103%"></div>
+  <div class="tile" style="--x: 87%; --y: 112%"></div>
+  <div class="tile" style="--x: 100%; --y: 86%"></div>
+  <div class="tile" style="--x: -55%; --y: -75%"></div>
+  <div class="tile" style="--x: -96%; --y: 56%"></div>
+  <div class="tile" style="--x: -125%; --y: -79%"></div>
+  <div class="tile" style="--x: 143%; --y: 94%"></div>
+  <div class="tile" style="--x: -108%; --y: 86%"></div>
+  <div class="tile" style="--x: -131%; --y: 147%"></div>
+  <div class="tile" style="--x: 136%; --y: 131%"></div>
+  <div class="tile" style="--x: 127%; --y: 146%"></div>
+  <div class="tile" style="--x: 74%; --y: -61%"></div>
+  <div class="tile" style="--x: 88%; --y: 131%"></div>
+  <div class="tile" style="--x: -69%; --y: 109%"></div>
+  <div class="tile" style="--x: -55%; --y: -115%"></div>
+  <div class="tile" style="--x: 83%; --y: -93%"></div>
+  <div class="tile" style="--x: 112%; --y: 74%"></div>
+  <div class="tile" style="--x: 113%; --y: 144%"></div>
+  <div class="tile" style="--x: -121%; --y: -105%"></div>
+  <div class="tile" style="--x: 131%; --y: 92%"></div>
+  <div class="tile" style="--x: -100%; --y: 76%"></div>
+  <div class="tile" style="--x: 122%; --y: 130%"></div>
+  <div class="tile" style="--x: 53%; --y: 137%"></div>
+  <div class="tile" style="--x: 85%; --y: -93%"></div>
+  <div class="tile" style="--x: -80%; --y: 114%"></div>
+  <div class="tile" style="--x: -98%; --y: -59%"></div>
+  <div class="tile" style="--x: -146%; --y: -111%"></div>
+  <div class="tile" style="--x: -74%; --y: 80%"></div>
+  <div class="tile" style="--x: 81%; --y: 128%"></div>
+  <div class="tile" style="--x: -105%; --y: 130%"></div>
+  <div class="tile" style="--x: -94%; --y: -51%"></div>
+  <div class="tile" style="--x: 121%; --y: 135%"></div>
+  <div class="tile" style="--x: -108%; --y: 65%"></div>
+  <div class="tile" style="--x: 71%; --y: 134%"></div>
+  <div class="tile" style="--x: 66%; --y: 72%"></div>
+  <div class="tile" style="--x: -119%; --y: -89%"></div>
+  <div class="tile" style="--x: -86%; --y: 97%"></div>
+  <div class="tile" style="--x: 107%; --y: 137%"></div>
+  <div class="tile" style="--x: -50%; --y: -128%"></div>
+  <div class="tile" style="--x: 116%; --y: -100%"></div>
+  <div class="tile" style="--x: 121%; --y: -114%"></div>
+  <div class="tile" style="--x: 106%; --y: -52%"></div>
+  <div class="tile" style="--x: 112%; --y: -131%"></div>
+  <div class="tile" style="--x: -101%; --y: -124%"></div>
+  <div class="tile" style="--x: -52%; --y: 61%"></div>
+  <div class="tile" style="--x: -133%; --y: -73%"></div>
+  <div class="tile" style="--x: -101%; --y: -64%"></div>
+  <div class="tile" style="--x: 149%; --y: -148%"></div>
+  <div class="tile" style="--x: 143%; --y: 78%"></div>
+  <div class="tile" style="--x: 94%; --y: 93%"></div>
+  <div class="tile" style="--x: 61%; --y: 54%"></div>
+  <div class="tile" style="--x: 127%; --y: -70%"></div>
+  <div class="tile" style="--x: 102%; --y: -99%"></div>
+  <div class="tile" style="--x: -58%; --y: 96%"></div>
+  <div class="tile" style="--x: 83%; --y: -61%"></div>
+  <div class="tile" style="--x: -57%; --y: -72%"></div>
+  <div class="tile" style="--x: -54%; --y: 113%"></div>
+  <div class="tile" style="--x: 122%; --y: -146%"></div>
+  <div class="tile" style="--x: 104%; --y: 120%"></div>
+  <div class="tile" style="--x: 55%; --y: 145%"></div>
+  <div class="tile" style="--x: 115%; --y: -113%"></div>
+  <div class="tile" style="--x: 89%; --y: 59%"></div>
+  <div class="tile" style="--x: -70%; --y: 128%"></div>
+  <div class="tile" style="--x: -116%; --y: 150%"></div>
+  <div class="tile" style="--x: 66%; --y: 92%"></div>
+  <div class="tile" style="--x: 58%; --y: -112%"></div>
+  <div class="tile" style="--x: 66%; --y: 67%"></div>
+  <div class="tile" style="--x: -81%; --y: -65%"></div>
+  <div class="tile" style="--x: -94%; --y: -114%"></div>
+  <div class="tile" style="--x: 136%; --y: 128%"></div>
+  <div class="tile" style="--x: 141%; --y: -108%"></div>
+  <div class="tile" style="--x: -109%; --y: 127%"></div>
+  <div class="tile" style="--x: -117%; --y: -51%"></div>
+  <div class="tile" style="--x: 98%; --y: -80%"></div>
+  <div class="tile" style="--x: 90%; --y: 94%"></div>
+  <div class="tile" style="--x: 128%; --y: -121%"></div>
+  <div class="tile" style="--x: -102%; --y: -52%"></div>
+  <div class="tile" style="--x: 99%; --y: 144%"></div>
+  <div class="tile" style="--x: -109%; --y: 52%"></div>
+  <div class="tile" style="--x: 91%; --y: -121%"></div>
+  <div class="tile" style="--x: 144%; --y: -85%"></div>
+  <div class="tile" style="--x: 93%; --y: 145%"></div>
+  <div class="tile" style="--x: 133%; --y: 123%"></div>
+  <div class="tile" style="--x: -95%; --y: 126%"></div>
+  <div class="tile" style="--x: -74%; --y: -63%"></div>
+  <div class="tile" style="--x: -53%; --y: -92%"></div>
+  <div class="tile" style="--x: -83%; --y: -71%"></div>
+  <div class="tile" style="--x: 51%; --y: -131%"></div>
+  <div class="tile" style="--x: 150%; --y: 135%"></div>
+  <div class="tile" style="--x: -88%; --y: -126%"></div>
+  <div class="tile" style="--x: -125%; --y: -65%"></div>
+  <div class="tile" style="--x: 76%; --y: -139%"></div>
+  <div class="tile" style="--x: -57%; --y: 55%"></div>
+  <div class="tile" style="--x: 110%; --y: -102%"></div>
+  <div class="tile" style="--x: -113%; --y: 75%"></div>
+  <div class="tile" style="--x: -146%; --y: -138%"></div>
+  <div class="tile" style="--x: 133%; --y: 88%"></div>
+  <div class="tile" style="--x: 111%; --y: -109%"></div>
+  <div class="tile" style="--x: -84%; --y: -122%"></div>
+  <div class="tile" style="--x: -139%; --y: -101%"></div>
+  <div class="tile" style="--x: 91%; --y: 95%"></div>
+  <div class="tile" style="--x: 91%; --y: -114%"></div>
+  <div class="tile" style="--x: 74%; --y: 97%"></div>
+  <div class="tile" style="--x: 87%; --y: 52%"></div>
+  <div class="tile" style="--x: -99%; --y: -104%"></div>
+  <div class="tile" style="--x: 83%; --y: -85%"></div>
+  <div class="tile" style="--x: -117%; --y: -109%"></div>
+  <div class="tile" style="--x: -138%; --y: 142%"></div>
+  <div class="tile" style="--x: -61%; --y: 51%"></div>
+  <div class="tile" style="--x: 69%; --y: 121%"></div>
+  <div class="tile" style="--x: 145%; --y: -73%"></div>
+  <div class="tile" style="--x: -115%; --y: -132%"></div>
+  <div class="tile" style="--x: 116%; --y: -56%"></div>
+  <div class="tile" style="--x: -95%; --y: 58%"></div>
+  <div class="tile" style="--x: -102%; --y: -149%"></div>
+  <div class="tile" style="--x: -134%; --y: 71%"></div>
+  <div class="tile" style="--x: 69%; --y: 109%"></div>
+  <div class="tile" style="--x: 139%; --y: 72%"></div>
+  <div class="tile" style="--x: -89%; --y: -117%"></div>
+  <div class="tile" style="--x: -97%; --y: -140%"></div>
+  <div class="tile" style="--x: 65%; --y: 127%"></div>
+  <div class="tile" style="--x: 93%; --y: -125%"></div>
+  <div class="tile" style="--x: 63%; --y: 61%"></div>
+  <div class="tile" style="--x: 66%; --y: -148%"></div>
+  <div class="tile" style="--x: 139%; --y: 96%"></div>
+  <div class="tile" style="--x: -119%; --y: 126%"></div>
+  <div class="tile" style="--x: 65%; --y: -110%"></div>
+  <div class="tile" style="--x: -109%; --y: 86%"></div>
+  <div class="tile" style="--x: -101%; --y: 144%"></div>
+  <div class="tile" style="--x: 51%; --y: 145%"></div>
+  <div class="tile" style="--x: -130%; --y: 141%"></div>
+  <div class="tile" style="--x: 134%; --y: 112%"></div>
+  <div class="tile" style="--x: 135%; --y: -139%"></div>
+  <div class="tile" style="--x: -139%; --y: 118%"></div>
+  <div class="tile" style="--x: 132%; --y: -63%"></div>
+  <div class="tile" style="--x: -55%; --y: 90%"></div>
+  <div class="tile" style="--x: -74%; --y: 116%"></div>
+  <div class="tile" style="--x: -110%; --y: -129%"></div>
+  <div class="tile" style="--x: 52%; --y: 57%"></div>
+  <div class="tile" style="--x: -94%; --y: 123%"></div>
+  <div class="tile" style="--x: 81%; --y: 73%"></div>
+  <div class="tile" style="--x: 60%; --y: -125%"></div>
+  <div class="tile" style="--x: 78%; --y: 138%"></div>
+  <div class="tile" style="--x: 108%; --y: 76%"></div>
+  <div class="tile" style="--x: 134%; --y: -72%"></div>
+  <div class="tile" style="--x: -86%; --y: 93%"></div>
+  <div class="tile" style="--x: 130%; --y: 74%"></div>
+  <div class="tile" style="--x: 146%; --y: -79%"></div>
+  <div class="tile" style="--x: 85%; --y: 74%"></div>
+  <div class="tile" style="--x: -131%; --y: -95%"></div>
+  <div class="tile" style="--x: -131%; --y: 140%"></div>
+  <div class="tile" style="--x: -72%; --y: 128%"></div>
+  <div class="tile" style="--x: -111%; --y: -143%"></div>
+  <div class="tile" style="--x: 95%; --y: -91%"></div>
+  <div class="tile" style="--x: 67%; --y: 87%"></div>
+  <div class="tile" style="--x: 109%; --y: 145%"></div>
+  <div class="tile" style="--x: -148%; --y: -142%"></div>
+  <div class="tile" style="--x: -126%; --y: -104%"></div>
+  <div class="tile" style="--x: 110%; --y: -91%"></div>
+  <div class="tile" style="--x: -118%; --y: 144%"></div>
+  <div class="tile" style="--x: 137%; --y: -54%"></div>
+  <div class="tile" style="--x: -104%; --y: 149%"></div>
+  <div class="tile" style="--x: -92%; --y: 133%"></div>
+  <div class="tile" style="--x: -64%; --y: 104%"></div>
+  <div class="tile" style="--x: -87%; --y: 92%"></div>
+  <div class="tile" style="--x: -72%; --y: 87%"></div>
+  <div class="tile" style="--x: -110%; --y: -51%"></div>
+  <div class="tile" style="--x: 83%; --y: 119%"></div>
+  <div class="tile" style="--x: 100%; --y: -76%"></div>
+  <div class="tile" style="--x: 66%; --y: -84%"></div>
+  <div class="tile" style="--x: -126%; --y: 75%"></div>
+  <div class="tile" style="--x: -134%; --y: 59%"></div>
+  <div class="tile" style="--x: -54%; --y: 102%"></div>
+  <div class="tile" style="--x: -129%; --y: -72%"></div>
+  <div class="tile" style="--x: 104%; --y: -57%"></div>
+  <div class="tile" style="--x: -127%; --y: -84%"></div>
+  <div class="tile" style="--x: -134%; --y: 111%"></div>
+  <div class="tile" style="--x: -112%; --y: -112%"></div>
+  <div class="tile" style="--x: 150%; --y: -95%"></div>
+  <div class="tile" style="--x: -54%; --y: -150%"></div>
+  <div class="tile" style="--x: -104%; --y: 97%"></div>
+  <div class="tile" style="--x: 122%; --y: -106%"></div>
+  <div class="tile" style="--x: 83%; --y: -67%"></div>
+  <div class="tile" style="--x: 94%; --y: 145%"></div>
+  <div class="tile" style="--x: 101%; --y: -78%"></div>
+  <div class="tile" style="--x: 102%; --y: -123%"></div>
+  <div class="tile" style="--x: 100%; --y: 79%"></div>
+  <div class="tile" style="--x: 88%; --y: -134%"></div>
+  <div class="tile" style="--x: -100%; --y: 70%"></div>
+  <div class="tile" style="--x: -102%; --y: 148%"></div>
+  <div class="tile" style="--x: -148%; --y: -128%"></div>
+  <div class="tile" style="--x: -52%; --y: 134%"></div>
+  <div class="tile" style="--x: -95%; --y: 57%"></div>
+  <div class="tile" style="--x: -119%; --y: 118%"></div>
+  <div class="tile" style="--x: -109%; --y: -144%"></div>
+  <div class="tile" style="--x: -128%; --y: -120%"></div>
+  <div class="tile" style="--x: 59%; --y: 141%"></div>
+  <div class="tile" style="--x: -114%; --y: 91%"></div>
+  <div class="tile" style="--x: 94%; --y: -111%"></div>
+  <div class="tile" style="--x: -82%; --y: 129%"></div>
+  <div class="tile" style="--x: 119%; --y: -78%"></div>
+  <div class="tile" style="--x: 90%; --y: 146%"></div>
+  <div class="tile" style="--x: 103%; --y: -86%"></div>
+  <div class="tile" style="--x: 116%; --y: -60%"></div>
+  <div class="tile" style="--x: 79%; --y: 77%"></div>
+  <div class="tile" style="--x: 113%; --y: -53%"></div>
+  <div class="tile" style="--x: 127%; --y: 84%"></div>
+  <div class="tile" style="--x: 137%; --y: 139%"></div>
+  <div class="tile" style="--x: 121%; --y: -84%"></div>
+  <div class="tile" style="--x: -96%; --y: 62%"></div>
+  <div class="tile" style="--x: -67%; --y: 87%"></div>
+  <div class="tile" style="--x: -96%; --y: 54%"></div>
+  <div class="tile" style="--x: 67%; --y: 132%"></div>
+  <div class="tile" style="--x: -103%; --y: 99%"></div>
+  <div class="tile" style="--x: 78%; --y: 149%"></div>
+  <div class="tile" style="--x: 90%; --y: 59%"></div>
+  <div class="tile" style="--x: -147%; --y: -142%"></div>
+  <div class="tile" style="--x: -88%; --y: 69%"></div>
+  <div class="tile" style="--x: -64%; --y: -85%"></div>
+  <div class="tile" style="--x: -84%; --y: -63%"></div>
+  <div class="tile" style="--x: -146%; --y: -78%"></div>
+  <div class="tile" style="--x: 134%; --y: -135%"></div>
+  <div class="tile" style="--x: -149%; --y: -55%"></div>
+  <div class="tile" style="--x: 65%; --y: 109%"></div>
+  <div class="tile" style="--x: 135%; --y: -56%"></div>
+  <div class="tile" style="--x: -53%; --y: 106%"></div>
+  <div class="tile" style="--x: -137%; --y: 77%"></div>
+  <div class="tile" style="--x: 143%; --y: -54%"></div>
+  <div class="tile" style="--x: -136%; --y: -99%"></div>
+  <div class="tile" style="--x: -63%; --y: -145%"></div>
+  <div class="tile" style="--x: -135%; --y: 109%"></div>
+  <div class="tile" style="--x: 91%; --y: 51%"></div>
+  <div class="tile" style="--x: -71%; --y: 120%"></div>
+  <div class="tile" style="--x: 63%; --y: 138%"></div>
+  <div class="tile" style="--x: -71%; --y: 61%"></div>
+  <div class="tile" style="--x: -101%; --y: -122%"></div>
+  <div class="tile" style="--x: -79%; --y: -139%"></div>
+  <div class="tile" style="--x: -75%; --y: 95%"></div>
+  <div class="tile" style="--x: -142%; --y: 143%"></div>
+  <div class="tile" style="--x: -147%; --y: 144%"></div>
+  <div class="tile" style="--x: 110%; --y: -149%"></div>
+  <div class="tile" style="--x: -66%; --y: 82%"></div>
+  <div class="tile" style="--x: -99%; --y: -118%"></div>
+  <div class="tile" style="--x: -135%; --y: 113%"></div>
+  <div class="tile" style="--x: 126%; --y: -142%"></div>
+  <div class="tile" style="--x: -76%; --y: -133%"></div>
+  <div class="tile" style="--x: -65%; --y: 54%"></div>
+  <div class="tile" style="--x: 125%; --y: 86%"></div>
+  <div class="tile" style="--x: -103%; --y: -111%"></div>
+  <div class="tile" style="--x: -92%; --y: 61%"></div>
+  <div class="tile" style="--x: 138%; --y: -58%"></div>
+  <div class="tile" style="--x: -104%; --y: -74%"></div>
+  <div class="tile" style="--x: 129%; --y: -101%"></div>
+  <div class="tile" style="--x: -61%; --y: 119%"></div>
+  <div class="tile" style="--x: 52%; --y: 124%"></div>
+  <div class="tile" style="--x: 135%; --y: -72%"></div>
+  <div class="tile" style="--x: -81%; --y: 142%"></div>
+  <div class="tile" style="--x: -100%; --y: -98%"></div>
+  <div class="tile" style="--x: 75%; --y: 141%"></div>
+  <div class="tile" style="--x: -119%; --y: -55%"></div>
+  <div class="tile" style="--x: 56%; --y: 54%"></div>
+  <div class="tile" style="--x: 121%; --y: -131%"></div>
+  <div class="tile" style="--x: -51%; --y: -129%"></div>
+  <div class="tile" style="--x: 91%; --y: 100%"></div>
+  <div class="tile" style="--x: 68%; --y: 104%"></div>
+  <div class="tile" style="--x: 70%; --y: -70%"></div>
+  <div class="tile" style="--x: 142%; --y: -74%"></div>
+  <div class="tile" style="--x: 76%; --y: -112%"></div>
+  <div class="tile" style="--x: 118%; --y: 138%"></div>
+  <div class="tile" style="--x: -82%; --y: 99%"></div>
+  <div class="tile" style="--x: 144%; --y: -66%"></div>
+  <div class="tile" style="--x: -85%; --y: -90%"></div>
+  <div class="tile" style="--x: 131%; --y: -124%"></div>
+  <div class="tile" style="--x: 147%; --y: 118%"></div>
+  <div class="tile" style="--x: 138%; --y: 132%"></div>
+  <div class="tile" style="--x: -127%; --y: -87%"></div>
+  <div class="tile" style="--x: 143%; --y: 102%"></div>
+  <div class="tile" style="--x: 97%; --y: 83%"></div>
+  <div class="tile" style="--x: -72%; --y: -117%"></div>
+  <div class="tile" style="--x: -58%; --y: 122%"></div>
+  <div class="tile" style="--x: -62%; --y: -97%"></div>
+  <div class="tile" style="--x: -103%; --y: 87%"></div>
+  <div class="tile" style="--x: 59%; --y: 134%"></div>
+  <div class="tile" style="--x: 56%; --y: 56%"></div>
+  <div class="tile" style="--x: 57%; --y: 140%"></div>
+  <div class="tile" style="--x: -133%; --y: -109%"></div>
+  <div class="tile" style="--x: -116%; --y: -116%"></div>
+  <div class="tile" style="--x: 83%; --y: 98%"></div>
+  <div class="tile" style="--x: -75%; --y: -131%"></div>
+  <div class="tile" style="--x: -85%; --y: -93%"></div>
+  <div class="tile" style="--x: -61%; --y: 58%"></div>
+  <div class="tile" style="--x: 73%; --y: -85%"></div>
+  <div class="tile" style="--x: 88%; --y: -113%"></div>
+  <div class="tile" style="--x: 54%; --y: -103%"></div>
+  <div class="tile" style="--x: 107%; --y: -83%"></div>
+  <div class="tile" style="--x: 110%; --y: -120%"></div>
+  <div class="tile" style="--x: -106%; --y: -133%"></div>
+  <div class="tile" style="--x: -58%; --y: 99%"></div>
+  <div class="tile" style="--x: 139%; --y: 78%"></div>
+  <div class="tile" style="--x: -52%; --y: 103%"></div>
+  <div class="tile" style="--x: -106%; --y: 117%"></div>
+  <div class="tile" style="--x: 111%; --y: 143%"></div>
+  <div class="tile" style="--x: -110%; --y: -70%"></div>
+  <div class="tile" style="--x: -83%; --y: 121%"></div>
+  <div class="tile" style="--x: -138%; --y: -126%"></div>
+  <div class="tile" style="--x: 144%; --y: -126%"></div>
+  <div class="tile" style="--x: -129%; --y: -149%"></div>
+  <div class="tile" style="--x: -55%; --y: -123%"></div>
+  <div class="tile" style="--x: -111%; --y: -54%"></div>
+  <div class="tile" style="--x: 56%; --y: -135%"></div>
+  <div class="tile" style="--x: 68%; --y: 144%"></div>
+  <div class="tile" style="--x: 58%; --y: -65%"></div>
+  <div class="tile" style="--x: -134%; --y: 95%"></div>
+  <div class="tile" style="--x: 54%; --y: -136%"></div>
+  <div class="tile" style="--x: -127%; --y: 128%"></div>
+  <div class="tile" style="--x: -74%; --y: 86%"></div>
+  <div class="tile" style="--x: -149%; --y: -76%"></div>
+  <div class="tile" style="--x: -110%; --y: 89%"></div>
+  <div class="tile" style="--x: -51%; --y: 111%"></div>
+  <div class="tile" style="--x: -150%; --y: -131%"></div>
+  <div class="tile" style="--x: -77%; --y: 140%"></div>
+  <div class="tile" style="--x: 51%; --y: 129%"></div>
+  <div class="tile" style="--x: 70%; --y: -55%"></div>
+  <div class="tile" style="--x: 139%; --y: 135%"></div>
+  <div class="tile" style="--x: -126%; --y: 132%"></div>
+  <div class="tile" style="--x: -140%; --y: 100%"></div>
+  <div class="tile" style="--x: 90%; --y: 98%"></div>
+  <div class="tile" style="--x: -140%; --y: -79%"></div>
+  <div class="tile" style="--x: 134%; --y: -107%"></div>
+  <div class="tile" style="--x: 71%; --y: -68%"></div>
+  <div class="tile" style="--x: 53%; --y: -87%"></div>
+  <div class="tile" style="--x: 148%; --y: 148%"></div>
+  <div class="tile" style="--x: -149%; --y: 128%"></div>
+  <div class="tile" style="--x: -146%; --y: -60%"></div>
+  <div class="tile" style="--x: 62%; --y: -141%"></div>
+  <div class="tile" style="--x: 75%; --y: -93%"></div>
+  <div class="tile" style="--x: -60%; --y: -102%"></div>
+  <div class="tile" style="--x: -81%; --y: 100%"></div>
+  <div class="tile" style="--x: 82%; --y: 58%"></div>
+  <div class="tile" style="--x: 147%; --y: -107%"></div>
+  <div class="tile" style="--x: -61%; --y: 128%"></div>
+  <div class="tile" style="--x: 56%; --y: 91%"></div>
+  <div class="tile" style="--x: 112%; --y: -108%"></div>
+  <div class="tile" style="--x: 69%; --y: -87%"></div>
+  <div class="tile" style="--x: 115%; --y: 107%"></div>
+  <div class="tile" style="--x: -66%; --y: -93%"></div>
+  <div class="tile" style="--x: -144%; --y: -92%"></div>
+  <div class="tile" style="--x: -144%; --y: -142%"></div>
+  <div class="tile" style="--x: -103%; --y: 104%"></div>
+  <div class="tile" style="--x: 139%; --y: -135%"></div>
+  <div class="tile" style="--x: -134%; --y: 124%"></div>
+  <div class="tile" style="--x: 108%; --y: 57%"></div>
+  <div class="tile" style="--x: -144%; --y: -59%"></div>
+  <div class="tile" style="--x: 133%; --y: -115%"></div>
+  <div class="tile" style="--x: -67%; --y: -75%"></div>
+  <div class="tile" style="--x: -114%; --y: 130%"></div>
+  <div class="tile" style="--x: -71%; --y: 70%"></div>
+  <div class="tile" style="--x: 56%; --y: -58%"></div>
+  <div class="tile" style="--x: 52%; --y: 65%"></div>
+  <div class="tile" style="--x: -133%; --y: -58%"></div>
+  <div class="tile" style="--x: -108%; --y: 84%"></div>
+  <div class="tile" style="--x: 83%; --y: -119%"></div>
+  <div class="tile" style="--x: 63%; --y: 59%"></div>
+  <div class="tile" style="--x: 147%; --y: -67%"></div>
+  <div class="tile" style="--x: 82%; --y: -91%"></div>
+  <div class="tile" style="--x: 83%; --y: 143%"></div>
+  <div class="tile" style="--x: -142%; --y: -90%"></div>
+  <div class="tile" style="--x: -110%; --y: -95%"></div>
+  <div class="tile" style="--x: -85%; --y: -117%"></div>
+  <div class="tile" style="--x: -78%; --y: 134%"></div>
+  <div class="tile" style="--x: -74%; --y: -138%"></div>
+  <div class="tile" style="--x: 104%; --y: 124%"></div>
+  <div class="tile" style="--x: -90%; --y: -76%"></div>
+  <div class="tile" style="--x: -109%; --y: 148%"></div>
+  <div class="tile" style="--x: -121%; --y: 94%"></div>
+  <div class="tile" style="--x: -132%; --y: -92%"></div>
+  <div class="tile" style="--x: 99%; --y: 53%"></div>
+  <div class="tile" style="--x: 69%; --y: -77%"></div>
+  <div class="tile" style="--x: -82%; --y: 79%"></div>
+  <div class="tile" style="--x: -53%; --y: 110%"></div>
+  <div class="tile" style="--x: -69%; --y: 75%"></div>
+  <div class="tile" style="--x: 101%; --y: -75%"></div>
+  <div class="tile" style="--x: 117%; --y: 124%"></div>
+  <div class="tile" style="--x: 147%; --y: -61%"></div>
+  <div class="tile" style="--x: -76%; --y: 82%"></div>
+  <div class="tile" style="--x: -105%; --y: 81%"></div>
+  <div class="tile" style="--x: 96%; --y: -93%"></div>
+  <div class="tile" style="--x: 108%; --y: 146%"></div>
+  <div class="tile" style="--x: -91%; --y: 80%"></div>
+  <div class="tile" style="--x: 88%; --y: 74%"></div>
+  <div class="tile" style="--x: -55%; --y: 90%"></div>
+  <div class="tile" style="--x: -108%; --y: -81%"></div>
+  <div class="tile" style="--x: -72%; --y: -123%"></div>
+  <div class="tile" style="--x: -149%; --y: -80%"></div>
+  <div class="tile" style="--x: 57%; --y: -99%"></div>
+  <div class="tile" style="--x: -119%; --y: 122%"></div>
+  <div class="tile" style="--x: -76%; --y: -115%"></div>
+  <div class="tile" style="--x: -98%; --y: 109%"></div>
+  <div class="tile" style="--x: -82%; --y: 103%"></div>
+  <div class="tile" style="--x: 68%; --y: -106%"></div>
+  <div class="tile" style="--x: 147%; --y: 101%"></div>
+  <div class="tile" style="--x: 110%; --y: 51%"></div>
+  <div class="tile" style="--x: -59%; --y: -142%"></div>
+  <div class="tile" style="--x: 143%; --y: -86%"></div>
+  <div class="tile" style="--x: 69%; --y: 63%"></div>
+  <div class="tile" style="--x: 130%; --y: 118%"></div>
+  <div class="tile" style="--x: 92%; --y: 126%"></div>
+  <div class="tile" style="--x: -104%; --y: -76%"></div>
+  <div class="tile" style="--x: 142%; --y: 100%"></div>
+  <div class="tile" style="--x: -147%; --y: -128%"></div>
+  <div class="tile" style="--x: 83%; --y: 87%"></div>
+  <div class="tile" style="--x: -56%; --y: 67%"></div>
+  <div class="tile" style="--x: 118%; --y: -134%"></div>
+  <div class="tile" style="--x: -106%; --y: 81%"></div>
+  <div class="tile" style="--x: 60%; --y: -58%"></div>
+  <div class="tile" style="--x: 74%; --y: -125%"></div>
+  <div class="tile" style="--x: 119%; --y: 77%"></div>
+  <div class="tile" style="--x: -57%; --y: 134%"></div>
+  <div class="tile" style="--x: -100%; --y: 133%"></div>
+  <div class="tile" style="--x: -99%; --y: 120%"></div>
+  <div class="tile" style="--x: -83%; --y: 84%"></div>
+  <div class="tile" style="--x: 111%; --y: 127%"></div>
+  <div class="tile" style="--x: 58%; --y: -66%"></div>
+  <div class="tile" style="--x: -95%; --y: -52%"></div>
+  <div class="tile" style="--x: 118%; --y: 127%"></div>
+  <div class="tile" style="--x: -73%; --y: -119%"></div>
+  <div class="tile" style="--x: -84%; --y: 99%"></div>
+  <div class="tile" style="--x: 95%; --y: -135%"></div>
+  <div class="tile" style="--x: -139%; --y: 130%"></div>
+  <div class="tile" style="--x: -76%; --y: -105%"></div>
+  <div class="tile" style="--x: -70%; --y: -140%"></div>
+  <div class="tile" style="--x: 125%; --y: 124%"></div>
+  <div class="tile" style="--x: -100%; --y: -147%"></div>
+  <div class="tile" style="--x: -125%; --y: 142%"></div>
+  <div class="tile" style="--x: 73%; --y: -83%"></div>
+  <div class="tile" style="--x: -106%; --y: -123%"></div>
+  <div class="tile" style="--x: 125%; --y: -131%"></div>
+  <div class="tile" style="--x: 96%; --y: 132%"></div>
+  <div class="tile" style="--x: 133%; --y: -52%"></div>
+  <div class="tile" style="--x: -94%; --y: 93%"></div>
+  <div class="tile" style="--x: 93%; --y: -137%"></div>
+  <div class="tile" style="--x: 83%; --y: -127%"></div>
+  <div class="tile" style="--x: 136%; --y: 122%"></div>
+  <div class="tile" style="--x: -136%; --y: 68%"></div>
+  <div class="tile" style="--x: 76%; --y: -75%"></div>
+  <div class="tile" style="--x: -141%; --y: -110%"></div>
+  <div class="tile" style="--x: -104%; --y: 129%"></div>
+  <div class="tile" style="--x: -84%; --y: 86%"></div>
+  <div class="tile" style="--x: 61%; --y: -63%"></div>
+  <div class="tile" style="--x: 125%; --y: 85%"></div>
+  <div class="tile" style="--x: -143%; --y: 137%"></div>
+  <div class="tile" style="--x: -93%; --y: 134%"></div>
+  <div class="tile" style="--x: -112%; --y: 77%"></div>
+  <div class="tile" style="--x: 139%; --y: 134%"></div>
+  <div class="tile" style="--x: -51%; --y: 90%"></div>
+  <div class="tile" style="--x: -136%; --y: 83%"></div>
+  <div class="tile" style="--x: 74%; --y: 86%"></div>
+  <div class="tile" style="--x: -81%; --y: 75%"></div>
+  <div class="tile" style="--x: -105%; --y: 131%"></div>
+  <div class="tile" style="--x: 72%; --y: 99%"></div>
+  <div class="tile" style="--x: -74%; --y: 92%"></div>
+  <div class="tile" style="--x: -54%; --y: 148%"></div>
+  <div class="tile" style="--x: 92%; --y: 119%"></div>
+  <div class="tile" style="--x: 135%; --y: -92%"></div>
+  <div class="tile" style="--x: 53%; --y: 53%"></div>
+  <div class="tile" style="--x: 111%; --y: -110%"></div>
+  <div class="tile" style="--x: 80%; --y: -143%"></div>
+  <div class="tile" style="--x: 51%; --y: 125%"></div>
+  <div class="tile" style="--x: 107%; --y: 109%"></div>
+  <div class="tile" style="--x: -93%; --y: -72%"></div>
+  <div class="tile" style="--x: 76%; --y: -78%"></div>
+  <div class="tile" style="--x: -114%; --y: 64%"></div>
+  <div class="tile" style="--x: 82%; --y: -112%"></div>
+  <div class="tile" style="--x: -115%; --y: -95%"></div>
+  <div class="tile" style="--x: -53%; --y: -59%"></div>
+  <div class="tile" style="--x: 83%; --y: 126%"></div>
+  <div class="tile" style="--x: 103%; --y: 108%"></div>
+  <div class="tile" style="--x: -127%; --y: -92%"></div>
+  <div class="tile" style="--x: 129%; --y: 134%"></div>
+  <div class="tile" style="--x: -87%; --y: -96%"></div>
+  <div class="tile" style="--x: -138%; --y: 96%"></div>
+  <div class="tile" style="--x: -139%; --y: 101%"></div>
+  <div class="tile" style="--x: 80%; --y: 74%"></div>
+  <div class="tile" style="--x: 134%; --y: -129%"></div>
+  <div class="tile" style="--x: 130%; --y: -81%"></div>
+  <div class="tile" style="--x: -112%; --y: 140%"></div>
+  <div class="tile" style="--x: 92%; --y: 103%"></div>
+  <div class="tile" style="--x: 106%; --y: 71%"></div>
+  <div class="tile" style="--x: -124%; --y: 66%"></div>
+  <div class="tile" style="--x: -93%; --y: 128%"></div>
+  <div class="tile" style="--x: -90%; --y: 104%"></div>
+  <div class="tile" style="--x: 70%; --y: 97%"></div>
+  <div class="tile" style="--x: -107%; --y: -77%"></div>
+  <div class="tile" style="--x: -129%; --y: -101%"></div>
+  <div class="tile" style="--x: 148%; --y: 120%"></div>
+  <div class="tile" style="--x: 93%; --y: -52%"></div>
+  <div class="tile" style="--x: 107%; --y: 93%"></div>
+  <div class="tile" style="--x: -112%; --y: 107%"></div>
+  <div class="tile" style="--x: 145%; --y: -140%"></div>
+  <div class="tile" style="--x: 60%; --y: 135%"></div>
+  <div class="tile" style="--x: -116%; --y: 98%"></div>
+  <div class="tile" style="--x: 94%; --y: 115%"></div>
+  <div class="tile" style="--x: 58%; --y: -128%"></div>
+  <div class="tile" style="--x: -143%; --y: -149%"></div>
+  <div class="tile" style="--x: 105%; --y: -99%"></div>
+  <div class="tile" style="--x: -140%; --y: 77%"></div>
+  <div class="tile" style="--x: -111%; --y: -119%"></div>
+  <div class="tile" style="--x: 108%; --y: -51%"></div>
+  <div class="tile" style="--x: 150%; --y: 67%"></div>
+  <div class="tile" style="--x: 145%; --y: 146%"></div>
+  <div class="tile" style="--x: 143%; --y: -140%"></div>
+  <div class="tile" style="--x: -75%; --y: 66%"></div>
+  <div class="tile" style="--x: -138%; --y: -110%"></div>
+  <div class="tile" style="--x: 78%; --y: 142%"></div>
+  <div class="tile" style="--x: 101%; --y: 129%"></div>
+  <div class="tile" style="--x: -84%; --y: -147%"></div>
+  <div class="tile" style="--x: 95%; --y: 58%"></div>
+  <div class="tile" style="--x: 59%; --y: -92%"></div>
+  <div class="tile" style="--x: -145%; --y: 89%"></div>
+  <div class="tile" style="--x: 142%; --y: -147%"></div>
+  <div class="tile" style="--x: -51%; --y: 123%"></div>
+  <div class="tile" style="--x: -143%; --y: -120%"></div>
+  <div class="tile" style="--x: -146%; --y: 109%"></div>
+  <div class="tile" style="--x: -105%; --y: 116%"></div>
+  <div class="tile" style="--x: -146%; --y: -105%"></div>
+  <div class="tile" style="--x: -58%; --y: 121%"></div>
+  <div class="tile" style="--x: 73%; --y: -131%"></div>
+  <div class="tile" style="--x: 94%; --y: 78%"></div>
+  <div class="tile" style="--x: -126%; --y: -74%"></div>
+  <div class="tile" style="--x: 113%; --y: -93%"></div>
+  <div class="tile" style="--x: 74%; --y: 52%"></div>
+  <div class="tile" style="--x: 126%; --y: -117%"></div>
+  <div class="tile" style="--x: -94%; --y: 92%"></div>
+  <div class="tile" style="--x: -101%; --y: -53%"></div>
+  <div class="tile" style="--x: 55%; --y: 73%"></div>
+  <div class="tile" style="--x: 115%; --y: -97%"></div>
+  <div class="tile" style="--x: -126%; --y: 69%"></div>
+  <div class="tile" style="--x: -114%; --y: 65%"></div>
+  <div class="tile" style="--x: -72%; --y: 96%"></div>
+  <div class="tile" style="--x: -123%; --y: -77%"></div>
+  <div class="tile" style="--x: 91%; --y: 83%"></div>
+  <div class="tile" style="--x: -65%; --y: -63%"></div>
+  <div class="tile" style="--x: 52%; --y: -80%"></div>
+  <div class="tile" style="--x: -59%; --y: 102%"></div>
+  <div class="tile" style="--x: 59%; --y: 96%"></div>
+  <div class="tile" style="--x: 126%; --y: 67%"></div>
+  <div class="tile" style="--x: 51%; --y: 134%"></div>
+  <div class="tile" style="--x: -65%; --y: -127%"></div>
+  <div class="tile" style="--x: 58%; --y: 98%"></div>
+  <div class="tile" style="--x: -110%; --y: 97%"></div>
+  <div class="tile" style="--x: 55%; --y: 123%"></div>
+  <div class="tile" style="--x: -84%; --y: 52%"></div>
+  <div class="tile" style="--x: -125%; --y: -90%"></div>
+  <div class="tile" style="--x: 91%; --y: -102%"></div>
+  <div class="tile" style="--x: 102%; --y: -111%"></div>
+  <div class="tile" style="--x: -113%; --y: -66%"></div>
+  <div class="tile" style="--x: 81%; --y: -130%"></div>
+  <div class="tile" style="--x: 69%; --y: -80%"></div>
+  <div class="tile" style="--x: 144%; --y: 132%"></div>
+  <div class="tile" style="--x: -129%; --y: -122%"></div>
+  <div class="tile" style="--x: -56%; --y: 51%"></div>
+  <div class="tile" style="--x: 147%; --y: -88%"></div>
+  <div class="tile" style="--x: -114%; --y: 71%"></div>
+  <div class="tile" style="--x: -89%; --y: 91%"></div>
+  <div class="tile" style="--x: 51%; --y: -131%"></div>
+  <div class="tile" style="--x: -124%; --y: -96%"></div>
+  <div class="tile" style="--x: 126%; --y: -116%"></div>
+  <div class="tile" style="--x: -73%; --y: -87%"></div>
+  <div class="tile" style="--x: 113%; --y: -63%"></div>
+  <div class="tile" style="--x: -86%; --y: -136%"></div>
+  <div class="tile" style="--x: 90%; --y: -50%"></div>
+  <div class="tile" style="--x: -122%; --y: 139%"></div>
+  <div class="tile" style="--x: 87%; --y: 123%"></div>
+  <div class="tile" style="--x: -114%; --y: -138%"></div>
+  <div class="tile" style="--x: 102%; --y: -143%"></div>
+  <div class="tile" style="--x: 114%; --y: -133%"></div>
+  <div class="tile" style="--x: -129%; --y: -148%"></div>
+  <div class="tile" style="--x: -129%; --y: -109%"></div>
+  <div class="tile" style="--x: -111%; --y: 137%"></div>
+  <div class="tile" style="--x: -109%; --y: -98%"></div>
+  <div class="tile" style="--x: 145%; --y: 96%"></div>
+  <div class="tile" style="--x: -138%; --y: 106%"></div>
+  <div class="tile" style="--x: 140%; --y: 72%"></div>
+  <div class="tile" style="--x: -102%; --y: 71%"></div>
+  <div class="tile" style="--x: -139%; --y: 97%"></div>
+  <div class="tile" style="--x: -116%; --y: -93%"></div>
+  <div class="tile" style="--x: 144%; --y: -135%"></div>
+  <div class="tile" style="--x: 65%; --y: 65%"></div>
+  <div class="tile" style="--x: 144%; --y: -98%"></div>
+  <div class="tile" style="--x: -66%; --y: 84%"></div>
+  <div class="tile" style="--x: -65%; --y: -56%"></div>
+  <div class="tile" style="--x: 145%; --y: 87%"></div>
+  <div class="tile" style="--x: -93%; --y: -113%"></div>
+  <div class="tile" style="--x: -92%; --y: 145%"></div>
+  <div class="tile" style="--x: 144%; --y: -120%"></div>
+  <div class="tile" style="--x: -113%; --y: -134%"></div>
+  <div class="tile" style="--x: -137%; --y: 123%"></div>
+  <div class="tile" style="--x: -63%; --y: -62%"></div>
+  <div class="tile" style="--x: 107%; --y: 135%"></div>
+  <div class="tile" style="--x: 127%; --y: -56%"></div>
+  <div class="tile" style="--x: 66%; --y: 91%"></div>
+  <div class="tile" style="--x: 53%; --y: -100%"></div>
+  <div class="tile" style="--x: 101%; --y: -61%"></div>
+  <div class="tile" style="--x: 106%; --y: -57%"></div>
+  <div class="tile" style="--x: -107%; --y: 128%"></div>
+  <div class="tile" style="--x: 104%; --y: 62%"></div>
+  <div class="tile" style="--x: -126%; --y: 131%"></div>
+  <div class="tile" style="--x: 120%; --y: 131%"></div>
+  <div class="tile" style="--x: -137%; --y: 61%"></div>
+  <div class="tile" style="--x: 65%; --y: 122%"></div>
+  <div class="tile" style="--x: 79%; --y: 105%"></div>
+  <div class="tile" style="--x: 51%; --y: -55%"></div>
+  <div class="tile" style="--x: -117%; --y: -134%"></div>
+  <div class="tile" style="--x: -104%; --y: -122%"></div>
+  <div class="tile" style="--x: -127%; --y: 145%"></div>
+  <div class="tile" style="--x: 133%; --y: 64%"></div>
+  <div class="tile" style="--x: -147%; --y: -120%"></div>
+  <div class="tile" style="--x: 106%; --y: -56%"></div>
+  <div class="tile" style="--x: 96%; --y: 81%"></div>
+  <div class="tile" style="--x: 147%; --y: 97%"></div>
+  <div class="tile" style="--x: 81%; --y: 86%"></div>
+  <div class="tile" style="--x: -71%; --y: -123%"></div>
+  <div class="tile" style="--x: 86%; --y: -71%"></div>
+  <div class="tile" style="--x: -80%; --y: -86%"></div>
+  <div class="tile" style="--x: -89%; --y: -89%"></div>
+  <div class="tile" style="--x: 81%; --y: 108%"></div>
+  <div class="tile" style="--x: -74%; --y: 51%"></div>
+  <div class="tile" style="--x: -94%; --y: 125%"></div>
+  <div class="tile" style="--x: -135%; --y: -141%"></div>
+  <div class="tile" style="--x: -99%; --y: -135%"></div>
+  <div class="tile" style="--x: 54%; --y: 142%"></div>
+  <div class="tile" style="--x: -96%; --y: 53%"></div>
+  <div class="tile" style="--x: 124%; --y: 90%"></div>
+  <div class="tile" style="--x: 113%; --y: 139%"></div>
+  <div class="tile" style="--x: -64%; --y: -124%"></div>
+  <div class="tile" style="--x: 92%; --y: 56%"></div>
+  <div class="tile" style="--x: 85%; --y: 86%"></div>
+  <div class="tile" style="--x: 91%; --y: -95%"></div>
+  <div class="tile" style="--x: 79%; --y: -146%"></div>
+  <div class="tile" style="--x: 56%; --y: 65%"></div>
+  <div class="tile" style="--x: -149%; --y: 72%"></div>
+  <div class="tile" style="--x: 108%; --y: 86%"></div>
+  <div class="tile" style="--x: -105%; --y: 72%"></div>
+  <div class="tile" style="--x: 103%; --y: 150%"></div>
+  <div class="tile" style="--x: 135%; --y: -107%"></div>
+  <div class="tile" style="--x: -112%; --y: -104%"></div>
+  <div class="tile" style="--x: -77%; --y: -93%"></div>
+  <div class="tile" style="--x: 133%; --y: 108%"></div>
+  <div class="tile" style="--x: 116%; --y: -70%"></div>
+  <div class="tile" style="--x: -130%; --y: -78%"></div>
+  <div class="tile" style="--x: -134%; --y: 72%"></div>
+  <div class="tile" style="--x: 117%; --y: 69%"></div>
+  <div class="tile" style="--x: -122%; --y: 109%"></div>
+  <div class="tile" style="--x: 137%; --y: 64%"></div>
+  <div class="tile" style="--x: 74%; --y: 88%"></div>
+  <div class="tile" style="--x: -111%; --y: -88%"></div>
+  <div class="tile" style="--x: 141%; --y: -80%"></div>
+  <div class="tile" style="--x: -111%; --y: -75%"></div>
+  <div class="tile" style="--x: 73%; --y: -131%"></div>
+  <div class="tile" style="--x: 89%; --y: -102%"></div>
+  <div class="tile" style="--x: 147%; --y: 110%"></div>
+  <div class="tile" style="--x: 59%; --y: -76%"></div>
+  <div class="tile" style="--x: 109%; --y: -88%"></div>
+  <div class="tile" style="--x: -57%; --y: 71%"></div>
+  <div class="tile" style="--x: -98%; --y: -119%"></div>
+  <div class="tile" style="--x: 132%; --y: -87%"></div>
+  <div class="tile" style="--x: -95%; --y: -66%"></div>
+  <div class="tile" style="--x: 58%; --y: -89%"></div>
+  <div class="tile" style="--x: 61%; --y: 115%"></div>
+  <div class="tile" style="--x: -141%; --y: -74%"></div>
+  <div class="tile" style="--x: -108%; --y: -93%"></div>
+  <div class="tile" style="--x: 119%; --y: -141%"></div>
+  <div class="tile" style="--x: -122%; --y: -130%"></div>
+  <div class="tile" style="--x: -130%; --y: -68%"></div>
+  <div class="tile" style="--x: 113%; --y: 69%"></div>
+  <div class="tile" style="--x: 73%; --y: 137%"></div>
+  <div class="tile" style="--x: 91%; --y: 61%"></div>
+  <div class="tile" style="--x: 86%; --y: 95%"></div>
+  <div class="tile" style="--x: 70%; --y: -53%"></div>
+  <div class="tile" style="--x: 68%; --y: -90%"></div>
+  <div class="tile" style="--x: 53%; --y: -119%"></div>
+  <div class="tile" style="--x: -142%; --y: 110%"></div>
+  <div class="tile" style="--x: 120%; --y: 134%"></div>
+  <div class="tile" style="--x: 77%; --y: 67%"></div>
+  <div class="tile" style="--x: -124%; --y: -90%"></div>
+  <div class="tile" style="--x: 106%; --y: 135%"></div>
+  <div class="tile" style="--x: 71%; --y: -143%"></div>
+  <div class="tile" style="--x: 129%; --y: -101%"></div>
+  <div class="tile" style="--x: -81%; --y: 150%"></div>
+  <div class="tile" style="--x: 92%; --y: 51%"></div>
+  <div class="tile" style="--x: 63%; --y: -53%"></div>
+  <div class="tile" style="--x: -109%; --y: 71%"></div>
+  <div class="tile" style="--x: -114%; --y: 89%"></div>
+  <div class="tile" style="--x: 131%; --y: 55%"></div>
+  <div class="tile" style="--x: 98%; --y: -126%"></div>
+  <div class="tile" style="--x: 85%; --y: 125%"></div>
+  <div class="tile" style="--x: -106%; --y: 148%"></div>
+  <div class="tile" style="--x: 134%; --y: 112%"></div>
+  <div class="tile" style="--x: -114%; --y: -63%"></div>
+  <div class="tile" style="--x: 98%; --y: 146%"></div>
+  <div class="tile" style="--x: 138%; --y: 81%"></div>
+  <div class="tile" style="--x: -81%; --y: 93%"></div>
+  <div class="tile" style="--x: -63%; --y: -79%"></div>
+  <div class="tile" style="--x: -92%; --y: -147%"></div>
+  <div class="tile" style="--x: -120%; --y: -133%"></div>
+  <div class="tile" style="--x: 66%; --y: -54%"></div>
+  <div class="tile" style="--x: 99%; --y: -58%"></div>
+  <div class="tile" style="--x: -77%; --y: -63%"></div>
+  <div class="tile" style="--x: 56%; --y: 94%"></div>
+  <div class="tile" style="--x: -73%; --y: -145%"></div>
+  <div class="tile" style="--x: 124%; --y: -88%"></div>
+  <div class="tile" style="--x: -122%; --y: 142%"></div>
+  <div class="tile" style="--x: -68%; --y: -130%"></div>
+  <div class="tile" style="--x: 138%; --y: -142%"></div>
+  <div class="tile" style="--x: -62%; --y: 56%"></div>
+  <div class="tile" style="--x: -148%; --y: -147%"></div>
+  <div class="tile" style="--x: -125%; --y: -118%"></div>
+  <div class="tile" style="--x: 127%; --y: 92%"></div>
+  <div class="tile" style="--x: -104%; --y: 51%"></div>
+  <div class="tile" style="--x: 59%; --y: 76%"></div>
+  <div class="tile" style="--x: 89%; --y: 107%"></div>
+  <div class="tile" style="--x: 63%; --y: 104%"></div>
+  <div class="tile" style="--x: 118%; --y: 113%"></div>
+  <div class="tile" style="--x: -138%; --y: 112%"></div>
+  <div class="tile" style="--x: -139%; --y: 127%"></div>
+  <div class="tile" style="--x: 69%; --y: 76%"></div>
+  <div class="tile" style="--x: 67%; --y: 134%"></div>
+  <div class="tile" style="--x: -135%; --y: -111%"></div>
+  <div class="tile" style="--x: 74%; --y: 87%"></div>
+  <div class="tile" style="--x: -78%; --y: -86%"></div>
+  <div class="tile" style="--x: 127%; --y: -117%"></div>
+  <div class="tile" style="--x: 83%; --y: 128%"></div>
+  <div class="tile" style="--x: -123%; --y: 87%"></div>
+  <div class="tile" style="--x: 119%; --y: -89%"></div>
+  <div class="tile" style="--x: -80%; --y: -72%"></div>
+  <div class="tile" style="--x: -87%; --y: -109%"></div>
+  <div class="tile" style="--x: -71%; --y: 50%"></div>
+  <div class="tile" style="--x: -137%; --y: 57%"></div>
+  <div class="tile" style="--x: 95%; --y: -136%"></div>
+  <div class="tile" style="--x: 77%; --y: 54%"></div>
+  <div class="tile" style="--x: -147%; --y: 127%"></div>
+  <div class="tile" style="--x: 125%; --y: -133%"></div>
+  <div class="tile" style="--x: -80%; --y: 63%"></div>
+  <div class="tile" style="--x: 53%; --y: -123%"></div>
+  <div class="tile" style="--x: -58%; --y: -88%"></div>
+  <div class="tile" style="--x: 130%; --y: -147%"></div>
+</body>
+<!-- partial -->
+  <script src='https://codepen.io/thebabydino/pen/evPbxv.js'></script>
+</body>
+</html>
diff --git a/codevember-30-2021-pure-css-order-vs-chaos/dist/style.css b/codevember-30-2021-pure-css-order-vs-chaos/dist/style.css
new file mode 100644
index 0000000..99b4d35
--- /dev/null
+++ b/codevember-30-2021-pure-css-order-vs-chaos/dist/style.css
@@ -0,0 +1,30 @@
+html, body {
+  display: grid;
+}
+
+html {
+  overflow: hidden;
+  height: 100%;
+}
+
+body {
+  --tmpl: repeat(var(--n), 1.125em);
+  grid-template: var(--tmpl)/var(--tmpl);
+  place-content: center;
+}
+
+.tile {
+  --m: calc(.5*(var(--n) - 1));
+  --abs-i: max(var(--m) - var(--i), var(--i) - var(--m));
+  --abs-j: max(var(--m) - var(--j), var(--j) - var(--m));
+  --rat: calc((var(--abs-i)*var(--abs-i) + var(--abs-j)*var(--abs-j))/var(--m)/var(--m));
+  transform: translate(var(--x), var(--y));
+  background: #000;
+  animation: a 2s cubic-bezier(0.65, 0, 0.35, 1) calc((var(--rat) - 2)*2s) infinite alternate;
+}
+
+@keyframes a {
+  0% {
+    transform: scale(0.3333333333);
+  }
+}
\ No newline at end of file
diff --git a/codevember-30-2021-pure-css-order-vs-chaos/license.txt b/codevember-30-2021-pure-css-order-vs-chaos/license.txt
new file mode 100644
index 0000000..bbf19f0
--- /dev/null
+++ b/codevember-30-2021-pure-css-order-vs-chaos/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Ana Tudor (https://codepen.io/thebabydino/pen/VwMwRGQ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/codevember-30-2021-pure-css-order-vs-chaos/src/index.pug b/codevember-30-2021-pure-css-order-vs-chaos/src/index.pug
new file mode 100644
index 0000000..299be1f
--- /dev/null
+++ b/codevember-30-2021-pure-css-order-vs-chaos/src/index.pug
@@ -0,0 +1,18 @@
+- let n = 32;
+- let p = n*n;
+
+- function rand(max = 100, min = 0, prc = 0)
+	- return +(min + (max - min)*Math.random()).toFixed(prc)
+
+- function rsgn()
+	- return Math.pow(-1, Math.round(Math.random()))
+
+body(style=`--n: ${n}`)
+	style
+		- for(let i = 0; i < n; i++)
+			| .tile:nth-of-type(#{n}n + #{i + 1}) { --i: #{i} }
+			| .tile:nth-of-type(n + #{n*i + 1}) { --j: #{i} }
+	while p--
+		- let x = rsgn()*rand(150, 50);
+		- let y = rsgn()*rand(150, 50);
+		.tile(style=`--x: ${x}%; --y: ${y}%`)
\ No newline at end of file
diff --git a/codevember-30-2021-pure-css-order-vs-chaos/src/style.scss b/codevember-30-2021-pure-css-order-vs-chaos/src/style.scss
new file mode 100644
index 0000000..8be110f
--- /dev/null
+++ b/codevember-30-2021-pure-css-order-vs-chaos/src/style.scss
@@ -0,0 +1,24 @@
+$f: 1/3;
+$t: 2s;
+
+html, body { display: grid }
+
+html { overflow: hidden; height: 100% }
+
+body {
+	--tmpl: repeat(var(--n), 1.125em);
+	grid-template: var(--tmpl)/var(--tmpl);
+	place-content: center
+}
+
+.tile {
+	--m: calc(.5*(var(--n) - 1));
+	--abs-i: max(var(--m) - var(--i), var(--i) - var(--m));
+	--abs-j: max(var(--m) - var(--j), var(--j) - var(--m));
+	--rat: calc((var(--abs-i)*var(--abs-i) + var(--abs-j)*var(--abs-j))/var(--m)/var(--m));
+	transform: translate(var(--x), var(--y));
+	background: #000;
+	animation: a $t cubic-bezier(.65, 0, .35, 1) calc((var(--rat) - 2)*#{$t}) infinite alternate
+}
+
+@keyframes a { 0% { transform: scale($f) } }
\ No newline at end of file
diff --git a/codevember-9-electric-hover-effect/README.markdown b/codevember-9-electric-hover-effect/README.markdown
new file mode 100644
index 0000000..a7ae730
--- /dev/null
+++ b/codevember-9-electric-hover-effect/README.markdown
@@ -0,0 +1,4 @@
+# #codevember #9 Electric hover effect
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/robin-dela/pen/vWgRPP](https://codepen.io/robin-dela/pen/vWgRPP).
+
+ 
\ No newline at end of file
diff --git a/codevember-9-electric-hover-effect/dist/index.html b/codevember-9-electric-hover-effect/dist/index.html
new file mode 100644
index 0000000..032e0cd
--- /dev/null
+++ b/codevember-9-electric-hover-effect/dist/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>#codevember #9 Electric hover effect</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<a href="https://twitter.com/not__robin" target="_blank">ENTER</a>
+
+<script id="vertexShader" type="x-shader/x-vertex">
+	varying vec2 vUv;
+	void main() {
+		vUv = uv;
+		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+	}
+</script>
+
+<script id="fragmentShader" type="x-shader/x-fragment">
+	uniform sampler2D _circle;
+	uniform sampler2D _circle_blur;
+	uniform sampler2D _dist;
+	uniform sampler2D _mask;
+	uniform sampler2D _color;
+	uniform float _time;
+	varying vec2 vUv;
+
+	//custom
+	uniform float _dispFactor;
+	uniform float _speed;
+
+	float map(float value, float minA, float maxA, float minB, float maxB){
+			return (value - minA) / (maxA - minA) * (maxB - minB) + minB;
+	}
+
+	void main()	{
+
+		vec2 uv = vUv;
+
+		vec4 circleTexture = texture2D( _mask, uv );
+
+			vec2 scaleCenter = vec2(0.5, 0.5);
+
+			vec2 coord = uv;
+			float sin_factor = sin(0.72 * _time);
+			float cos_factor = cos(0.72 * _time);
+			coord = vec2(coord.x - 0.5, coord.y - 0.5) * mat2(cos_factor, sin_factor, -sin_factor, cos_factor);
+			coord += 0.5;
+
+
+			vec2 distMapUV = uv * 0.22;
+			distMapUV.y -= _time / _speed;
+
+			vec4 mapColorDisp = texture2D( _color, (coord - scaleCenter) * 0.7 + scaleCenter );
+			vec4 mapDisp = texture2D( _dist, distMapUV);// - 0.75;
+
+			float xDisp = map( mapColorDisp.x, 0.0, 1.0, -1.0, 1.0 ) * mapDisp.x * _dispFactor;
+			float yDisp = map( mapColorDisp.y, 0.0, 1.0, -1.0, 1.0 ) * mapDisp.x * _dispFactor;
+
+			vec2 uvDisp = vec2(
+					clamp( xDisp * 0.3448 * circleTexture.a, -0.1, 0.1 ),
+					clamp( yDisp * 0.3448 * circleTexture.a, -0.1, 0.1 )
+			);
+
+			float maskCircle = circleTexture.a * 1.8;
+
+		vec2 scaledUV = vec2((uv - scaleCenter) * 1.5 + scaleCenter );
+
+			vec4 tex_light = texture2D( _circle, scaledUV + uvDisp * coord * 1.5);
+			vec4 tex_lightBlur = texture2D( _circle_blur, scaledUV + uvDisp * coord * 1.5);
+			tex_lightBlur.a *= (8.41 * circleTexture.a);
+		tex_lightBlur.rgb *= 2.2;
+			tex_light.rgb *= 1.6 * max((1.0 - maskCircle), .0);
+
+
+		gl_FragColor = mix(tex_light, tex_lightBlur, min(maskCircle, 1.0));
+	}
+</script>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js'></script>
+<script src='https://robindelaporte.fr/codepen/codevember/dat.gui.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/codevember-9-electric-hover-effect/dist/script.js b/codevember-9-electric-hover-effect/dist/script.js
new file mode 100644
index 0000000..745ba8f
--- /dev/null
+++ b/codevember-9-electric-hover-effect/dist/script.js
@@ -0,0 +1,184 @@
+var mobileAndTabletcheck = function() {
+	var check = false;
+	(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+	return check;
+};
+
+var canvas = document.createElement( 'canvas' );
+var ctx = canvas.getContext( '2d' );
+
+var w = 320;
+var h = 320;
+
+var width = window.innerWidth;
+var height = window.innerHeight;
+
+var planeSize = 600;
+
+var radius = 300;
+
+if(mobileAndTabletcheck()){
+	planeSize = 400;
+	w = 200;
+	h = 200;
+	radius = 150;
+}
+
+canvas.setAttribute('width', w);
+canvas.setAttribute('height', h);
+
+// canvas.style.position = 'absolute';
+// canvas.style.width = '320px';
+// canvas.style.height = '320px';
+// canvas.style.top = '0';
+// canvas.style.left = '0';
+// canvas.style.zIndex = '100';
+// document.body.appendChild(canvas);
+
+window.addEventListener('resize', onWindowResize);
+
+var maskImage = new Image();
+// maskImage.src = "https://robindelaporte.fr/codepen/codevember/circle_disp.png";
+//because of tainted canvas
+maskImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTM4NzkwRjM0QTk3MTFFNzlCMkFFRTA2QTZFNkM4MTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTM4NzkwRjQ0QTk3MTFFNzlCMkFFRTA2QTZFNkM4MTgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1Mzg3OTBGMTRBOTcxMUU3OUIyQUVFMDZBNkU2QzgxOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1Mzg3OTBGMjRBOTcxMUU3OUIyQUVFMDZBNkU2QzgxOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pmzm5t8AABYsSURBVHja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";
+// maskImage.crossOrigin = "Anonymous";
+
+var mousePos = [0, 0];
+
+var raycaster = new THREE.Raycaster();
+var mouse = new THREE.Vector2();
+
+if(mobileAndTabletcheck()){
+	window.addEventListener('touchmove', function(e){
+		mouse.x = ( e.touches[0].clientX / window.innerWidth ) * 2 - 1;
+		mouse.y = - ( e.touches[0].clientY / window.innerHeight ) * 2 + 1;
+	});
+	} else {
+	window.addEventListener('mousemove', function(e){
+		mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
+		mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
+	});
+}
+
+function renderRay() {
+	raycaster.setFromCamera( mouse, camera );
+	var intersects = raycaster.intersectObjects( scene.children );
+	for ( var i = 0; i < intersects.length; i++ ) {
+		mousePos[0] = (((intersects[i].point.x / planeSize)+ 0.5) * w) - (radius*0.5);
+		mousePos[1] = ((((intersects[i].point.y * -1) / planeSize)+ 0.5) * h) - (radius*0.5);
+	}
+}
+
+
+function draw(){
+	ctx.clearRect(0, 0, w, h);
+	ctx.drawImage(maskImage, mousePos[0], mousePos[1], radius, radius);
+	renderRay();
+}
+
+var frustumSize = 600;
+var aspect = window.innerWidth / window.innerHeight;
+
+
+var clock = new THREE.Clock(true);
+
+var scene = new THREE.Scene();
+camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 2000 );
+
+camera.lookAt(scene.position);
+camera.position.z = 1;
+
+
+var renderer = new THREE.WebGLRenderer({
+	antialias: true,
+	alpha: true
+});
+renderer.setPixelRatio = 1;
+renderer.setClearColor(0x3A405A, 1.0);
+renderer.setSize( window.innerWidth, window.innerHeight );
+document.body.appendChild( renderer.domElement );
+
+function onWindowResize(){
+
+var aspect = window.innerWidth / window.innerHeight;
+
+camera.left   = - frustumSize * aspect / 2;
+camera.right  =   frustumSize * aspect / 2;
+camera.top    =   frustumSize / 2;
+camera.bottom = - frustumSize / 2;
+
+camera.updateProjectionMatrix();
+
+renderer.setSize( window.innerWidth, window.innerHeight );
+}
+
+var gui = new dat.GUI();
+var params = {
+	dispFactor: 0.238,
+	speed: 24.0,
+};
+
+gui.add(params, 'dispFactor', 0, 1).step(0.001).onChange(function( value ) {
+	object.material.uniforms._dispFactor.value = value;
+	object.material.uniforms._dispFactor.needsUpdate = true;
+});
+gui.add(params, 'speed', 1, 50).step(1).onChange(function( value ) {
+	object.material.uniforms._speed.value = value;
+	object.material.uniforms._speed.needsUpdate = true;
+});
+
+// var controls = new THREE.OrbitControls( camera, renderer.domElement );
+
+var loader = new THREE.TextureLoader();
+loader.crossOrigin = '';
+var circle = loader.load('https://robindelaporte.fr/codepen/codevember/circle.png');
+var circle_blur = loader.load('https://robindelaporte.fr/codepen/codevember/circle_blur.png');
+var color = loader.load('https://robindelaporte.fr/codepen/codevember/map_light_disp_color.png');
+var dist = loader.load('https://robindelaporte.fr/codepen/codevember/dist_c.jpg');
+
+dist.wrapS = dist.wrapT = THREE.RepeatWrapping;
+color.wrapS = color.wrapT = THREE.RepeatWrapping;
+
+var mask = new THREE.Texture(canvas);
+mask.minFilter = THREE.LinearFilter;
+
+var mat = new THREE.ShaderMaterial({
+	uniforms: {
+		_time: { type: "f", value: 1.0 },
+		_mask: { type: 't', value: mask },
+		_color: { type: 't', value: color },
+		_circle: { type: 't', value: circle },
+		_circle_blur: { type: 't', value: circle_blur },
+		_dist: { type: 't', value: dist },
+
+		_dispFactor: { type: "f", value: params.dispFactor },
+		_speed: { type: "f", value: params.speed }
+	},
+
+	vertexShader: document.getElementById( 'vertexShader' ).textContent,
+	fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+	transparent: true,
+	opacity: 1.0,
+	blending: THREE.AdditiveBlending
+});
+
+var geometry = new THREE.PlaneBufferGeometry( planeSize, planeSize, 1 );
+var object = new THREE.Mesh(geometry, mat);
+scene.add(object);
+
+window.addEventListener('click', function(){
+});
+
+
+var animate = function () {
+	requestAnimationFrame( animate );
+	renderer.render(scene, camera);
+
+	var d = clock.getDelta();
+	mat.uniforms._time.value += d;
+
+	mask.needsUpdate = true;
+
+	draw();
+};
+animate();
\ No newline at end of file
diff --git a/codevember-9-electric-hover-effect/dist/style.css b/codevember-9-electric-hover-effect/dist/style.css
new file mode 100644
index 0000000..22735ee
--- /dev/null
+++ b/codevember-9-electric-hover-effect/dist/style.css
@@ -0,0 +1,29 @@
+body {
+	margin: 0;
+	overflow: hidden;
+	position: fixed;
+}
+canvas {
+	width: 100%;
+	height: 100%;
+}
+a {
+	text-decoration: none;
+	position: absolute;
+	color: rgba(255, 255, 255, 0.9);
+	font-weight: 100;
+	font-size: 20px;
+	font-family: "helvetica";
+	letter-spacing: 8px;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	        transform: translate(-50%, -50%);
+	transition: color 0.6s ease;
+	padding: 130px 90px;
+	border-radius: 50%;
+}
+a:hover {
+	color: rgba(255, 255, 255, 0.4);
+	transition: color 0.6s ease;
+}
diff --git a/codevember-9-electric-hover-effect/license.txt b/codevember-9-electric-hover-effect/license.txt
new file mode 100644
index 0000000..0bbbd86
--- /dev/null
+++ b/codevember-9-electric-hover-effect/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Robin Delaporte (https://codepen.io/robin-dela/pen/vWgRPP)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/codevember-9-electric-hover-effect/src/index.html b/codevember-9-electric-hover-effect/src/index.html
new file mode 100644
index 0000000..c23defb
--- /dev/null
+++ b/codevember-9-electric-hover-effect/src/index.html
@@ -0,0 +1,70 @@
+<a href="https://twitter.com/not__robin" target="_blank">ENTER</a>
+
+<script id="vertexShader" type="x-shader/x-vertex">
+	varying vec2 vUv;
+	void main() {
+		vUv = uv;
+		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+	}
+</script>
+
+<script id="fragmentShader" type="x-shader/x-fragment">
+	uniform sampler2D _circle;
+	uniform sampler2D _circle_blur;
+	uniform sampler2D _dist;
+	uniform sampler2D _mask;
+	uniform sampler2D _color;
+	uniform float _time;
+	varying vec2 vUv;
+
+	//custom
+	uniform float _dispFactor;
+	uniform float _speed;
+
+	float map(float value, float minA, float maxA, float minB, float maxB){
+			return (value - minA) / (maxA - minA) * (maxB - minB) + minB;
+	}
+
+	void main()	{
+
+		vec2 uv = vUv;
+
+		vec4 circleTexture = texture2D( _mask, uv );
+
+			vec2 scaleCenter = vec2(0.5, 0.5);
+
+			vec2 coord = uv;
+			float sin_factor = sin(0.72 * _time);
+			float cos_factor = cos(0.72 * _time);
+			coord = vec2(coord.x - 0.5, coord.y - 0.5) * mat2(cos_factor, sin_factor, -sin_factor, cos_factor);
+			coord += 0.5;
+
+
+			vec2 distMapUV = uv * 0.22;
+			distMapUV.y -= _time / _speed;
+
+			vec4 mapColorDisp = texture2D( _color, (coord - scaleCenter) * 0.7 + scaleCenter );
+			vec4 mapDisp = texture2D( _dist, distMapUV);// - 0.75;
+
+			float xDisp = map( mapColorDisp.x, 0.0, 1.0, -1.0, 1.0 ) * mapDisp.x * _dispFactor;
+			float yDisp = map( mapColorDisp.y, 0.0, 1.0, -1.0, 1.0 ) * mapDisp.x * _dispFactor;
+
+			vec2 uvDisp = vec2(
+					clamp( xDisp * 0.3448 * circleTexture.a, -0.1, 0.1 ),
+					clamp( yDisp * 0.3448 * circleTexture.a, -0.1, 0.1 )
+			);
+
+			float maskCircle = circleTexture.a * 1.8;
+
+		vec2 scaledUV = vec2((uv - scaleCenter) * 1.5 + scaleCenter );
+
+			vec4 tex_light = texture2D( _circle, scaledUV + uvDisp * coord * 1.5);
+			vec4 tex_lightBlur = texture2D( _circle_blur, scaledUV + uvDisp * coord * 1.5);
+			tex_lightBlur.a *= (8.41 * circleTexture.a);
+		tex_lightBlur.rgb *= 2.2;
+			tex_light.rgb *= 1.6 * max((1.0 - maskCircle), .0);
+
+
+		gl_FragColor = mix(tex_light, tex_lightBlur, min(maskCircle, 1.0));
+	}
+</script>
\ No newline at end of file
diff --git a/codevember-9-electric-hover-effect/src/script.js b/codevember-9-electric-hover-effect/src/script.js
new file mode 100644
index 0000000..745ba8f
--- /dev/null
+++ b/codevember-9-electric-hover-effect/src/script.js
@@ -0,0 +1,184 @@
+var mobileAndTabletcheck = function() {
+	var check = false;
+	(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+	return check;
+};
+
+var canvas = document.createElement( 'canvas' );
+var ctx = canvas.getContext( '2d' );
+
+var w = 320;
+var h = 320;
+
+var width = window.innerWidth;
+var height = window.innerHeight;
+
+var planeSize = 600;
+
+var radius = 300;
+
+if(mobileAndTabletcheck()){
+	planeSize = 400;
+	w = 200;
+	h = 200;
+	radius = 150;
+}
+
+canvas.setAttribute('width', w);
+canvas.setAttribute('height', h);
+
+// canvas.style.position = 'absolute';
+// canvas.style.width = '320px';
+// canvas.style.height = '320px';
+// canvas.style.top = '0';
+// canvas.style.left = '0';
+// canvas.style.zIndex = '100';
+// document.body.appendChild(canvas);
+
+window.addEventListener('resize', onWindowResize);
+
+var maskImage = new Image();
+// maskImage.src = "https://robindelaporte.fr/codepen/codevember/circle_disp.png";
+//because of tainted canvas
+maskImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTM4NzkwRjM0QTk3MTFFNzlCMkFFRTA2QTZFNkM4MTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTM4NzkwRjQ0QTk3MTFFNzlCMkFFRTA2QTZFNkM4MTgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1Mzg3OTBGMTRBOTcxMUU3OUIyQUVFMDZBNkU2QzgxOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1Mzg3OTBGMjRBOTcxMUU3OUIyQUVFMDZBNkU2QzgxOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pmzm5t8AABYsSURBVHja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";
+// maskImage.crossOrigin = "Anonymous";
+
+var mousePos = [0, 0];
+
+var raycaster = new THREE.Raycaster();
+var mouse = new THREE.Vector2();
+
+if(mobileAndTabletcheck()){
+	window.addEventListener('touchmove', function(e){
+		mouse.x = ( e.touches[0].clientX / window.innerWidth ) * 2 - 1;
+		mouse.y = - ( e.touches[0].clientY / window.innerHeight ) * 2 + 1;
+	});
+	} else {
+	window.addEventListener('mousemove', function(e){
+		mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
+		mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
+	});
+}
+
+function renderRay() {
+	raycaster.setFromCamera( mouse, camera );
+	var intersects = raycaster.intersectObjects( scene.children );
+	for ( var i = 0; i < intersects.length; i++ ) {
+		mousePos[0] = (((intersects[i].point.x / planeSize)+ 0.5) * w) - (radius*0.5);
+		mousePos[1] = ((((intersects[i].point.y * -1) / planeSize)+ 0.5) * h) - (radius*0.5);
+	}
+}
+
+
+function draw(){
+	ctx.clearRect(0, 0, w, h);
+	ctx.drawImage(maskImage, mousePos[0], mousePos[1], radius, radius);
+	renderRay();
+}
+
+var frustumSize = 600;
+var aspect = window.innerWidth / window.innerHeight;
+
+
+var clock = new THREE.Clock(true);
+
+var scene = new THREE.Scene();
+camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 2000 );
+
+camera.lookAt(scene.position);
+camera.position.z = 1;
+
+
+var renderer = new THREE.WebGLRenderer({
+	antialias: true,
+	alpha: true
+});
+renderer.setPixelRatio = 1;
+renderer.setClearColor(0x3A405A, 1.0);
+renderer.setSize( window.innerWidth, window.innerHeight );
+document.body.appendChild( renderer.domElement );
+
+function onWindowResize(){
+
+var aspect = window.innerWidth / window.innerHeight;
+
+camera.left   = - frustumSize * aspect / 2;
+camera.right  =   frustumSize * aspect / 2;
+camera.top    =   frustumSize / 2;
+camera.bottom = - frustumSize / 2;
+
+camera.updateProjectionMatrix();
+
+renderer.setSize( window.innerWidth, window.innerHeight );
+}
+
+var gui = new dat.GUI();
+var params = {
+	dispFactor: 0.238,
+	speed: 24.0,
+};
+
+gui.add(params, 'dispFactor', 0, 1).step(0.001).onChange(function( value ) {
+	object.material.uniforms._dispFactor.value = value;
+	object.material.uniforms._dispFactor.needsUpdate = true;
+});
+gui.add(params, 'speed', 1, 50).step(1).onChange(function( value ) {
+	object.material.uniforms._speed.value = value;
+	object.material.uniforms._speed.needsUpdate = true;
+});
+
+// var controls = new THREE.OrbitControls( camera, renderer.domElement );
+
+var loader = new THREE.TextureLoader();
+loader.crossOrigin = '';
+var circle = loader.load('https://robindelaporte.fr/codepen/codevember/circle.png');
+var circle_blur = loader.load('https://robindelaporte.fr/codepen/codevember/circle_blur.png');
+var color = loader.load('https://robindelaporte.fr/codepen/codevember/map_light_disp_color.png');
+var dist = loader.load('https://robindelaporte.fr/codepen/codevember/dist_c.jpg');
+
+dist.wrapS = dist.wrapT = THREE.RepeatWrapping;
+color.wrapS = color.wrapT = THREE.RepeatWrapping;
+
+var mask = new THREE.Texture(canvas);
+mask.minFilter = THREE.LinearFilter;
+
+var mat = new THREE.ShaderMaterial({
+	uniforms: {
+		_time: { type: "f", value: 1.0 },
+		_mask: { type: 't', value: mask },
+		_color: { type: 't', value: color },
+		_circle: { type: 't', value: circle },
+		_circle_blur: { type: 't', value: circle_blur },
+		_dist: { type: 't', value: dist },
+
+		_dispFactor: { type: "f", value: params.dispFactor },
+		_speed: { type: "f", value: params.speed }
+	},
+
+	vertexShader: document.getElementById( 'vertexShader' ).textContent,
+	fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+	transparent: true,
+	opacity: 1.0,
+	blending: THREE.AdditiveBlending
+});
+
+var geometry = new THREE.PlaneBufferGeometry( planeSize, planeSize, 1 );
+var object = new THREE.Mesh(geometry, mat);
+scene.add(object);
+
+window.addEventListener('click', function(){
+});
+
+
+var animate = function () {
+	requestAnimationFrame( animate );
+	renderer.render(scene, camera);
+
+	var d = clock.getDelta();
+	mat.uniforms._time.value += d;
+
+	mask.needsUpdate = true;
+
+	draw();
+};
+animate();
\ No newline at end of file
diff --git a/codevember-9-electric-hover-effect/src/style.css b/codevember-9-electric-hover-effect/src/style.css
new file mode 100644
index 0000000..e4d383b
--- /dev/null
+++ b/codevember-9-electric-hover-effect/src/style.css
@@ -0,0 +1,28 @@
+body {
+	margin: 0;
+	overflow: hidden;
+	position: fixed;
+}
+canvas {
+	width: 100%;
+	height: 100%;
+}
+a {
+	text-decoration: none;
+	position: absolute;
+	color: rgba(255, 255, 255, 0.9);
+	font-weight: 100;
+	font-size: 20px;
+	font-family: "helvetica";
+	letter-spacing: 8px;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	transition: color 0.6s ease;
+	padding: 130px 90px;
+	border-radius: 50%;
+}
+a:hover {
+	color: rgba(255, 255, 255, 0.4);
+	transition: color 0.6s ease;
+}
diff --git a/codevember-9/README.markdown b/codevember-9/README.markdown
new file mode 100644
index 0000000..f8d99b0
--- /dev/null
+++ b/codevember-9/README.markdown
@@ -0,0 +1,4 @@
+# Codevember(9)
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/nikita_ska/pen/JOExqE](https://codepen.io/nikita_ska/pen/JOExqE).
+
+ 
\ No newline at end of file
diff --git a/codevember-9/dist/index.html b/codevember-9/dist/index.html
new file mode 100644
index 0000000..183085b
--- /dev/null
+++ b/codevember-9/dist/index.html
@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Codevember(9)</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<a href="https://twitter.com/nskargovskii" target="_blank">@nskargovskii</a>
+<script type="x-shader/vertex-shader" id="vert">
+
+uniform float u_time;
+
+//
+// Description : Array and textureless GLSL 2D/3D/4D simplex 
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : stegu
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//               https://github.com/stegu/webgl-noise
+// 
+
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+     return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v)
+  { 
+  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+// First corner
+  vec3 i  = floor(v + dot(v, C.yyy) );
+  vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+// Other corners
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min( g.xyz, l.zxy );
+  vec3 i2 = max( g.xyz, l.zxy );
+
+  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+  //   x1 = x0 - i1  + 1.0 * C.xxx;
+  //   x2 = x0 - i2  + 2.0 * C.xxx;
+  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+// Permutations
+  i = mod289(i); 
+  vec4 p = permute( permute( permute( 
+             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+// Gradients: 7x7 points over a square, mapped onto an octahedron.
+// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+  float n_ = 0.142857142857; // 1.0/7.0
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+  vec4 x = x_ *ns.x + ns.yyyy;
+  vec4 y = y_ *ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4( x.xy, y.xy );
+  vec4 b1 = vec4( x.zw, y.zw );
+
+  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+  vec4 s0 = floor(b0)*2.0 + 1.0;
+  vec4 s1 = floor(b1)*2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+  vec3 p0 = vec3(a0.xy,h.x);
+  vec3 p1 = vec3(a0.zw,h.y);
+  vec3 p2 = vec3(a1.xy,h.z);
+  vec3 p3 = vec3(a1.zw,h.w);
+
+//Normalise gradients
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+// Mix final noise value
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
+                                dot(p2,x2), dot(p3,x3) ) );
+  }
+
+  vec3 snoiseVec3( vec3 x ){
+
+  float s  = snoise(vec3( x ));
+  float s1 = snoise(vec3( x.y - 19.1 , x.z + 33.4 , x.x + 47.2 ));
+  float s2 = snoise(vec3( x.z + 74.2 , x.x - 124.5 , x.y + 99.4 ));
+  vec3 c = vec3( s , s1 , s2 );
+  return c;
+
+}
+varying vec3 newPosition;
+varying vec2 v_uv;
+varying float time;
+
+void main() {
+  v_uv = uv;
+  float noise = snoise(position+u_time)*5.;
+  time = u_time;
+  newPosition = position*(50.+noise);
+  	gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+}
+</script>
+
+<script type="x-shader/fragment-shader" id="frag">
+varying vec3 newPosition;
+
+
+//
+// Description : Array and textureless GLSL 2D/3D/4D simplex 
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : stegu
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//               https://github.com/stegu/webgl-noise
+// 
+
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+     return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v)
+  { 
+  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+// First corner
+  vec3 i  = floor(v + dot(v, C.yyy) );
+  vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+// Other corners
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min( g.xyz, l.zxy );
+  vec3 i2 = max( g.xyz, l.zxy );
+
+  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+  //   x1 = x0 - i1  + 1.0 * C.xxx;
+  //   x2 = x0 - i2  + 2.0 * C.xxx;
+  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+// Permutations
+  i = mod289(i); 
+  vec4 p = permute( permute( permute( 
+             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+// Gradients: 7x7 points over a square, mapped onto an octahedron.
+// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+  float n_ = 0.142857142857; // 1.0/7.0
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+  vec4 x = x_ *ns.x + ns.yyyy;
+  vec4 y = y_ *ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4( x.xy, y.xy );
+  vec4 b1 = vec4( x.zw, y.zw );
+
+  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+  vec4 s0 = floor(b0)*2.0 + 1.0;
+  vec4 s1 = floor(b1)*2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+  vec3 p0 = vec3(a0.xy,h.x);
+  vec3 p1 = vec3(a0.zw,h.y);
+  vec3 p2 = vec3(a1.xy,h.z);
+  vec3 p3 = vec3(a1.zw,h.w);
+
+//Normalise gradients
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+// Mix final noise value
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
+                                dot(p2,x2), dot(p3,x3) ) );
+  }
+
+  vec3 snoiseVec3( vec3 x ){
+
+  float s  = snoise(vec3( x ));
+  float s1 = snoise(vec3( x.y - 19.1 , x.z + 33.4 , x.x + 47.2 ));
+  float s2 = snoise(vec3( x.z + 74.2 , x.x - 124.5 , x.y + 99.4 ));
+  vec3 c = vec3( s , s1 , s2 );
+  return c;
+
+}
+
+varying vec2 v_uv;
+varying float time;
+vec2 movingTiles(vec2 _st, float _zoom, float _speed){
+    _st *= _zoom;
+   if (fract( _st.x ) > 0.){
+            _st.y += fract(time)*2.0;}
+    
+    return fract(_st);
+}
+
+float circle(vec2 _st, float _radius){
+    vec2 pos = _st;
+    return step((1.0-pos.y),pos.y);
+}
+
+void main() {
+    vec2 st = newPosition.xz/v_uv;
+
+    st = movingTiles(st,1./10.,0.5);
+  
+    vec3 color = vec3( 1.0-circle(st, 1. ) );
+    float alpha = 0.;
+    if(color == vec3(1.)) {
+      alpha = 0.;
+    } else {
+      alpha = 1.;
+    }
+    gl_FragColor = vec4(color,alpha);
+}
+</script>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/OrbitControls.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/codevember-9/dist/script.js b/codevember-9/dist/script.js
new file mode 100644
index 0000000..e8a3377
--- /dev/null
+++ b/codevember-9/dist/script.js
@@ -0,0 +1,71 @@
+class Galaxy {
+  constructor(){
+    this.ww = window.innerWidth
+    this.wh = window.innerHeight
+    
+    this.mouseX = 0;
+    this.mouseY = 0;
+    
+    this.time = 0;
+    this.scene = new THREE.Scene()
+    this.camera = new THREE.PerspectiveCamera(75,this.ww/this.wh,0.1,1000)
+    this.camera.position.z = 100;
+    this.controls = new THREE.OrbitControls(this.camera);
+    
+    this.renderer = new THREE.WebGLRenderer({antialias:true, alpha:true})
+    this.renderer.setSize (this.ww, this.wh)
+           
+
+    window.addEventListener('resize', this.resize.bind(this))
+    document.body.appendChild(this.renderer.domElement)
+    
+    this.planet()
+    this.animate()
+  }
+  
+  resize() {
+    this.ww = window.innerWidth
+    this.wh = window.innerHeight
+    console.log(this.wh)
+    this.camera.aspect =this.ww / this.wh;
+  this.camera.updateProjectionMatrix();
+    this.renderer.setSize(this.ww, this.wh)
+  }
+  
+
+  planet() {
+    this.planGeo = new THREE.SphereBufferGeometry(1,128,128);
+     var uniforms = {
+      u_time: { type: "f", value: 1.0 },
+    }
+    this.planMat = new THREE.ShaderMaterial(
+      {
+        vertexShader: document.getElementById('vert').textContent,
+        fragmentShader: document.getElementById('frag').textContent,
+          shading: THREE.SmoothShading,
+            side: THREE.DoubleSide,
+            transparent: true,
+            depthTest: false,
+      uniforms: uniforms,
+      }
+    )
+    
+    this.planet = new THREE.Mesh(this.planGeo, this.planMat)
+    this.scene.add(this.planet)
+  }
+  
+  onDocumentMouseMove(event) {
+        this.mouseX = ( event.clientX - window.innerWidth/2 ) ;
+        this.mouseY = ( event.clientY - window.innerHeight/2 ) ;
+    }
+  
+  animate(){
+    requestAnimationFrame(this.animate.bind(this))
+    
+    this.time += 0.01;
+    this.planMat.uniforms.u_time.value = this.time;
+    this.renderer.render(this.scene,this.camera)
+  }
+}
+
+let galaxy = new Galaxy()
\ No newline at end of file
diff --git a/codevember-9/dist/style.css b/codevember-9/dist/style.css
new file mode 100644
index 0000000..653679a
--- /dev/null
+++ b/codevember-9/dist/style.css
@@ -0,0 +1,20 @@
+a {
+  position: absolute;
+  color: black;
+  bottom : 15px;
+  left:10px;
+  font-family: arial;
+  text-decoration: none;
+  font-size: 18px;
+}
+
+body, html {
+  margin:0;
+  overflow:hidden;
+}
+canvas {
+  margin:0;
+  width:100%;
+  height:100%;
+  background: #e8e8e8;  
+}
\ No newline at end of file
diff --git a/codevember-9/license.txt b/codevember-9/license.txt
new file mode 100644
index 0000000..8b10796
--- /dev/null
+++ b/codevember-9/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Nikita Skargovskii (https://codepen.io/nikita_ska/pen/JOExqE)
+
+
+Fork of an original work by Nikita Skargovskii (https://codepen.io/nikita_ska/pen/GOjbYg)
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/codevember-9/src/index.html b/codevember-9/src/index.html
new file mode 100644
index 0000000..3edf638
--- /dev/null
+++ b/codevember-9/src/index.html
@@ -0,0 +1,279 @@
+<a href="https://twitter.com/nskargovskii" target="_blank">@nskargovskii</a>
+<script type="x-shader/vertex-shader" id="vert">
+
+uniform float u_time;
+
+//
+// Description : Array and textureless GLSL 2D/3D/4D simplex 
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : stegu
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//               https://github.com/stegu/webgl-noise
+// 
+
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+     return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v)
+  { 
+  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+// First corner
+  vec3 i  = floor(v + dot(v, C.yyy) );
+  vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+// Other corners
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min( g.xyz, l.zxy );
+  vec3 i2 = max( g.xyz, l.zxy );
+
+  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+  //   x1 = x0 - i1  + 1.0 * C.xxx;
+  //   x2 = x0 - i2  + 2.0 * C.xxx;
+  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+// Permutations
+  i = mod289(i); 
+  vec4 p = permute( permute( permute( 
+             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+// Gradients: 7x7 points over a square, mapped onto an octahedron.
+// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+  float n_ = 0.142857142857; // 1.0/7.0
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+  vec4 x = x_ *ns.x + ns.yyyy;
+  vec4 y = y_ *ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4( x.xy, y.xy );
+  vec4 b1 = vec4( x.zw, y.zw );
+
+  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+  vec4 s0 = floor(b0)*2.0 + 1.0;
+  vec4 s1 = floor(b1)*2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+  vec3 p0 = vec3(a0.xy,h.x);
+  vec3 p1 = vec3(a0.zw,h.y);
+  vec3 p2 = vec3(a1.xy,h.z);
+  vec3 p3 = vec3(a1.zw,h.w);
+
+//Normalise gradients
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+// Mix final noise value
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
+                                dot(p2,x2), dot(p3,x3) ) );
+  }
+
+  vec3 snoiseVec3( vec3 x ){
+
+  float s  = snoise(vec3( x ));
+  float s1 = snoise(vec3( x.y - 19.1 , x.z + 33.4 , x.x + 47.2 ));
+  float s2 = snoise(vec3( x.z + 74.2 , x.x - 124.5 , x.y + 99.4 ));
+  vec3 c = vec3( s , s1 , s2 );
+  return c;
+
+}
+varying vec3 newPosition;
+varying vec2 v_uv;
+varying float time;
+
+void main() {
+  v_uv = uv;
+  float noise = snoise(position+u_time)*5.;
+  time = u_time;
+  newPosition = position*(50.+noise);
+  	gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+}
+</script>
+
+<script type="x-shader/fragment-shader" id="frag">
+varying vec3 newPosition;
+
+
+//
+// Description : Array and textureless GLSL 2D/3D/4D simplex 
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : stegu
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//               https://github.com/stegu/webgl-noise
+// 
+
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+     return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v)
+  { 
+  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+// First corner
+  vec3 i  = floor(v + dot(v, C.yyy) );
+  vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+// Other corners
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min( g.xyz, l.zxy );
+  vec3 i2 = max( g.xyz, l.zxy );
+
+  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+  //   x1 = x0 - i1  + 1.0 * C.xxx;
+  //   x2 = x0 - i2  + 2.0 * C.xxx;
+  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+// Permutations
+  i = mod289(i); 
+  vec4 p = permute( permute( permute( 
+             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+// Gradients: 7x7 points over a square, mapped onto an octahedron.
+// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+  float n_ = 0.142857142857; // 1.0/7.0
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+  vec4 x = x_ *ns.x + ns.yyyy;
+  vec4 y = y_ *ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4( x.xy, y.xy );
+  vec4 b1 = vec4( x.zw, y.zw );
+
+  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+  vec4 s0 = floor(b0)*2.0 + 1.0;
+  vec4 s1 = floor(b1)*2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+  vec3 p0 = vec3(a0.xy,h.x);
+  vec3 p1 = vec3(a0.zw,h.y);
+  vec3 p2 = vec3(a1.xy,h.z);
+  vec3 p3 = vec3(a1.zw,h.w);
+
+//Normalise gradients
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+// Mix final noise value
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
+                                dot(p2,x2), dot(p3,x3) ) );
+  }
+
+  vec3 snoiseVec3( vec3 x ){
+
+  float s  = snoise(vec3( x ));
+  float s1 = snoise(vec3( x.y - 19.1 , x.z + 33.4 , x.x + 47.2 ));
+  float s2 = snoise(vec3( x.z + 74.2 , x.x - 124.5 , x.y + 99.4 ));
+  vec3 c = vec3( s , s1 , s2 );
+  return c;
+
+}
+
+varying vec2 v_uv;
+varying float time;
+vec2 movingTiles(vec2 _st, float _zoom, float _speed){
+    _st *= _zoom;
+   if (fract( _st.x ) > 0.){
+            _st.y += fract(time)*2.0;}
+    
+    return fract(_st);
+}
+
+float circle(vec2 _st, float _radius){
+    vec2 pos = _st;
+    return step((1.0-pos.y),pos.y);
+}
+
+void main() {
+    vec2 st = newPosition.xz/v_uv;
+
+    st = movingTiles(st,1./10.,0.5);
+  
+    vec3 color = vec3( 1.0-circle(st, 1. ) );
+    float alpha = 0.;
+    if(color == vec3(1.)) {
+      alpha = 0.;
+    } else {
+      alpha = 1.;
+    }
+    gl_FragColor = vec4(color,alpha);
+}
+</script>
diff --git a/codevember-9/src/script.js b/codevember-9/src/script.js
new file mode 100644
index 0000000..e8a3377
--- /dev/null
+++ b/codevember-9/src/script.js
@@ -0,0 +1,71 @@
+class Galaxy {
+  constructor(){
+    this.ww = window.innerWidth
+    this.wh = window.innerHeight
+    
+    this.mouseX = 0;
+    this.mouseY = 0;
+    
+    this.time = 0;
+    this.scene = new THREE.Scene()
+    this.camera = new THREE.PerspectiveCamera(75,this.ww/this.wh,0.1,1000)
+    this.camera.position.z = 100;
+    this.controls = new THREE.OrbitControls(this.camera);
+    
+    this.renderer = new THREE.WebGLRenderer({antialias:true, alpha:true})
+    this.renderer.setSize (this.ww, this.wh)
+           
+
+    window.addEventListener('resize', this.resize.bind(this))
+    document.body.appendChild(this.renderer.domElement)
+    
+    this.planet()
+    this.animate()
+  }
+  
+  resize() {
+    this.ww = window.innerWidth
+    this.wh = window.innerHeight
+    console.log(this.wh)
+    this.camera.aspect =this.ww / this.wh;
+  this.camera.updateProjectionMatrix();
+    this.renderer.setSize(this.ww, this.wh)
+  }
+  
+
+  planet() {
+    this.planGeo = new THREE.SphereBufferGeometry(1,128,128);
+     var uniforms = {
+      u_time: { type: "f", value: 1.0 },
+    }
+    this.planMat = new THREE.ShaderMaterial(
+      {
+        vertexShader: document.getElementById('vert').textContent,
+        fragmentShader: document.getElementById('frag').textContent,
+          shading: THREE.SmoothShading,
+            side: THREE.DoubleSide,
+            transparent: true,
+            depthTest: false,
+      uniforms: uniforms,
+      }
+    )
+    
+    this.planet = new THREE.Mesh(this.planGeo, this.planMat)
+    this.scene.add(this.planet)
+  }
+  
+  onDocumentMouseMove(event) {
+        this.mouseX = ( event.clientX - window.innerWidth/2 ) ;
+        this.mouseY = ( event.clientY - window.innerHeight/2 ) ;
+    }
+  
+  animate(){
+    requestAnimationFrame(this.animate.bind(this))
+    
+    this.time += 0.01;
+    this.planMat.uniforms.u_time.value = this.time;
+    this.renderer.render(this.scene,this.camera)
+  }
+}
+
+let galaxy = new Galaxy()
\ No newline at end of file
diff --git a/codevember-9/src/style.css b/codevember-9/src/style.css
new file mode 100644
index 0000000..653679a
--- /dev/null
+++ b/codevember-9/src/style.css
@@ -0,0 +1,20 @@
+a {
+  position: absolute;
+  color: black;
+  bottom : 15px;
+  left:10px;
+  font-family: arial;
+  text-decoration: none;
+  font-size: 18px;
+}
+
+body, html {
+  margin:0;
+  overflow:hidden;
+}
+canvas {
+  margin:0;
+  width:100%;
+  height:100%;
+  background: #e8e8e8;  
+}
\ No newline at end of file
diff --git a/codevember11ladder-illusion/README.markdown b/codevember11ladder-illusion/README.markdown
new file mode 100644
index 0000000..5007265
--- /dev/null
+++ b/codevember11ladder-illusion/README.markdown
@@ -0,0 +1,6 @@
+# #codevember - 11 - Ladder Illusion
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/Milleus/pen/KKKxVbE](https://codepen.io/Milleus/pen/KKKxVbE).
+
+ Codevember Day #11 - Perspective
+
+When rotating along the 3D plane, things don't look like what it seems. Ladder? square? triangle? what do you see? 
\ No newline at end of file
diff --git a/codevember11ladder-illusion/dist/index.html b/codevember11ladder-illusion/dist/index.html
new file mode 100644
index 0000000..0dd084c
--- /dev/null
+++ b/codevember11ladder-illusion/dist/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>#codevember - 11 - Ladder Illusion</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="top">
+    <div class="shadow">
+      <div class="step"></div>
+      <div class="step"></div>
+      <div class="step"></div>
+      <div class="step"></div>
+      <div class="step"></div>
+    </div>
+    <div class="ladder">
+      <div class="step"></div>
+      <div class="step"></div>
+      <div class="step"></div>
+      <div class="step"></div>
+      <div class="step"></div>
+    </div>
+  </div>
+  <div class="bottom">
+    <div class="shadow">
+      <div class="step"></div>
+      <div class="step"></div>
+      <div class="step"></div>
+      <div class="step"></div>
+      <div class="step"></div>
+    </div>
+    <div class="ladder">
+      <div class="step"></div>
+      <div class="step"></div>
+      <div class="step"></div>
+      <div class="step"></div>
+      <div class="step"></div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/codevember11ladder-illusion/dist/style.css b/codevember11ladder-illusion/dist/style.css
new file mode 100644
index 0000000..1342f7a
--- /dev/null
+++ b/codevember11ladder-illusion/dist/style.css
@@ -0,0 +1,74 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  background: #fff;
+}
+
+.container {
+  transform-style: preserve-3d;
+  transform: rotateX(62deg) rotateZ(-60deg);
+  animation: rotate 9s ease-in-out alternate infinite;
+}
+.container .shadow {
+  position: absolute;
+}
+.container .shadow .step {
+  height: 2.5rem;
+  width: 2.5rem;
+  border: 0.2rem solid #888;
+  border-top: none;
+}
+.container .ladder .step {
+  height: 2.5rem;
+  width: 2.5rem;
+  border: 0.2rem solid #363636;
+  border-top: none;
+}
+.container .top {
+  background-color: rgba(54, 54, 54, 0.1);
+  display: grid;
+  place-items: center;
+  position: relative;
+  width: 10rem;
+  transform: rotateX(-90deg);
+  transform-origin: 50% 100%;
+}
+.container .top .ladder {
+  transform-origin: 50% 0%;
+  transform: skewX(40deg);
+}
+.container .bottom {
+  background-color: rgba(54, 54, 54, 0.2);
+  display: grid;
+  place-items: center;
+  position: relative;
+  width: 10rem;
+}
+.container .bottom .step:last-child {
+  border-bottom: none;
+}
+.container .bottom .ladder {
+  transform-origin: 50% 100%;
+  transform: skewX(-40deg);
+}
+
+@keyframes rotate {
+  0%,
+  20% {
+    transform: rotateX(62deg) rotateZ(-60deg);
+  }
+  40%,
+  60% {
+    transform: rotateX(55deg) rotateZ(-36deg);
+  }
+  80%,
+  100% {
+    transform: rotateX(45deg) rotateZ(0deg);
+  }
+}
\ No newline at end of file
diff --git a/codevember11ladder-illusion/license.txt b/codevember11ladder-illusion/license.txt
new file mode 100644
index 0000000..3c79db8
--- /dev/null
+++ b/codevember11ladder-illusion/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2019 by Dave Quah (https://codepen.io/Milleus/pen/KKKxVbE)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/codevember11ladder-illusion/src/index.pug b/codevember11ladder-illusion/src/index.pug
new file mode 100644
index 0000000..8389da2
--- /dev/null
+++ b/codevember11ladder-illusion/src/index.pug
@@ -0,0 +1,15 @@
+.container
+  .top
+    .shadow
+      - for (i=0; i < 5; i++)
+        .step
+    .ladder
+      - for (i=0; i < 5; i++)
+        .step
+  .bottom
+    .shadow
+      - for (i=0; i < 5; i++)
+        .step
+    .ladder
+      - for (i=0; i < 5; i++)
+        .step
\ No newline at end of file
diff --git a/codevember11ladder-illusion/src/style.scss b/codevember11ladder-illusion/src/style.scss
new file mode 100644
index 0000000..bac2066
--- /dev/null
+++ b/codevember11ladder-illusion/src/style.scss
@@ -0,0 +1,89 @@
+$color-background: #fff;
+$color-line: #363636;
+$color-shadow: #888;
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  background: $color-background;
+}
+
+@mixin step($c) {
+  height: 2.5rem;
+  width: 2.5rem;
+  border: 0.2rem solid $c;
+  border-top: none;
+}
+
+.container {
+  transform-style: preserve-3d;
+  transform: rotateX(62deg) rotateZ(-60deg);
+  animation: rotate 9s ease-in-out alternate infinite;
+  
+  .shadow {
+    position: absolute;
+
+    .step {
+      @include step($color-shadow);
+    }
+  }
+
+  .ladder {
+    .step {
+      @include step($color-line);
+    }
+  }
+
+  .top {
+    background-color: rgba($color-line, 0.1);
+    display: grid;
+    place-items: center;
+    position: relative;
+    width: 10rem;
+    transform: rotateX(-90deg);
+    transform-origin: 50% 100%;
+
+    .ladder {
+      transform-origin: 50% 0%;
+      transform: skewX(40deg);
+    }
+  }
+
+  .bottom {
+    background-color: rgba($color-line, 0.2);
+    display: grid;
+    place-items: center;
+    position: relative;
+    width: 10rem;
+    
+    .step:last-child {
+      border-bottom: none;
+    }
+
+    .ladder {
+      transform-origin: 50% 100%;
+      transform: skewX(-40deg);
+    }
+  }
+}
+
+@keyframes rotate {
+  0%,
+  20% {
+    transform: rotateX(62deg) rotateZ(-60deg);
+  }
+  40%,
+  60% {
+    transform: rotateX(55deg) rotateZ(-36deg);
+  }
+  80%,
+  100% {
+    transform: rotateX(45deg) rotateZ(0deg);
+  }
+}
diff --git a/cogs-with-variables/README.markdown b/cogs-with-variables/README.markdown
new file mode 100644
index 0000000..348fa21
--- /dev/null
+++ b/cogs-with-variables/README.markdown
@@ -0,0 +1,4 @@
+# Cogs with variables
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/KamilDyrek/pen/GzMPoQ](https://codepen.io/KamilDyrek/pen/GzMPoQ).
+
+ Responsive animated svg cogs using css variables.
\ No newline at end of file
diff --git a/cogs-with-variables/dist/index.html b/cogs-with-variables/dist/index.html
new file mode 100644
index 0000000..2839a04
--- /dev/null
+++ b/cogs-with-variables/dist/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Cogs with variables</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="cogs">
+  <svg class="static_cog" viewbox="0 0 120 120">
+    <circle cx="60" cy="60" r="50" fill="black" stroke="white"/>
+    <circle cx="60" cy="60" r="50" stroke="black" fill="transparent"/>
+  </svg>
+  <svg class="dynamic_cog" viewbox="0 0 120 120" style="--d: 30; --turn: reverse; --delay: .3s;">
+   <circle cx="60" cy="60" r="50" fill="black" stroke="white"/>
+   <circle cx="60" cy="60" r="50" stroke="black" fill="transparent"/>
+  </svg>
+  <svg class="dynamic_cog" viewbox="0 0 120 120" style="--d: 20;">
+   <circle cx="60" cy="60" r="50" fill="black" stroke="white"/>
+   <circle cx="60" cy="60" r="50" stroke="black" fill="transparent"/>
+  </svg>
+</div>
+<a target="_blank" href="https://twitter.com/kamildyrek"><svg style="width:2em;height:2em;position:fixed;top:1em;left:1em;opacity:.8;" viewBox="0 0 24 24"><path fill="#000" d="M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" /></svg></a>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/cogs-with-variables/dist/style.css b/cogs-with-variables/dist/style.css
new file mode 100644
index 0000000..0c719c4
--- /dev/null
+++ b/cogs-with-variables/dist/style.css
@@ -0,0 +1,53 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cogs {
+  display: flex;
+  align-items: center;
+}
+
+.static_cog, .dynamic_cog {
+  display: block;
+  position: relative;
+  margin: 0  calc((var(--d, 10) * 1.2 * 1vmin) * -.08);
+  height: 12vmin;
+  width: 12vmin;
+  mix-blend-mode: multiply;
+  
+  stroke-width: 15.7;
+  stroke-dasharray: 0 31.4;    
+  
+  stroke-linecap: round;
+  animation: turn 6s infinite linear;
+}
+.static_cog circle:first-child, .dynamic_cog  circle:first-child {
+  stroke-dashoffset: calc(15.7 * 10 / var(--d, 10));
+}
+.dynamic_cog {
+  width: calc(var(--d, 10) * 1.2 * 1vmin);
+  height: calc(var(--d, 10) * 1.2 * 1vmin);  
+  stroke-width: calc(15.7 * 10 / var(--d, 10));
+  stroke-dasharray:  0 calc(31.4 * 10 / var(--d, 10));  
+  
+  animation: turn calc(6s * var(--d, 10) / 10) var(--delay, 0s) infinite linear var(--turn, normal);
+}
+
+@keyframes turn {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/cogs-with-variables/license.txt b/cogs-with-variables/license.txt
new file mode 100644
index 0000000..10457cc
--- /dev/null
+++ b/cogs-with-variables/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Kamil (https://codepen.io/KamilDyrek/pen/GzMPoQ)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/cogs-with-variables/src/index.html b/cogs-with-variables/src/index.html
new file mode 100644
index 0000000..e04d75a
--- /dev/null
+++ b/cogs-with-variables/src/index.html
@@ -0,0 +1,15 @@
+<div class="cogs">
+  <svg class="static_cog" viewbox="0 0 120 120">
+    <circle cx="60" cy="60" r="50" fill="black" stroke="white"/>
+    <circle cx="60" cy="60" r="50" stroke="black" fill="transparent"/>
+  </svg>
+  <svg class="dynamic_cog" viewbox="0 0 120 120" style="--d: 30; --turn: reverse; --delay: .3s;">
+   <circle cx="60" cy="60" r="50" fill="black" stroke="white"/>
+   <circle cx="60" cy="60" r="50" stroke="black" fill="transparent"/>
+  </svg>
+  <svg class="dynamic_cog" viewbox="0 0 120 120" style="--d: 20;">
+   <circle cx="60" cy="60" r="50" fill="black" stroke="white"/>
+   <circle cx="60" cy="60" r="50" stroke="black" fill="transparent"/>
+  </svg>
+</div>
+<a target="_blank" href="https://twitter.com/kamildyrek"><svg style="width:2em;height:2em;position:fixed;top:1em;left:1em;opacity:.8;" viewBox="0 0 24 24"><path fill="#000" d="M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" /></svg></a>
\ No newline at end of file
diff --git a/cogs-with-variables/src/style.css b/cogs-with-variables/src/style.css
new file mode 100644
index 0000000..0c719c4
--- /dev/null
+++ b/cogs-with-variables/src/style.css
@@ -0,0 +1,53 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cogs {
+  display: flex;
+  align-items: center;
+}
+
+.static_cog, .dynamic_cog {
+  display: block;
+  position: relative;
+  margin: 0  calc((var(--d, 10) * 1.2 * 1vmin) * -.08);
+  height: 12vmin;
+  width: 12vmin;
+  mix-blend-mode: multiply;
+  
+  stroke-width: 15.7;
+  stroke-dasharray: 0 31.4;    
+  
+  stroke-linecap: round;
+  animation: turn 6s infinite linear;
+}
+.static_cog circle:first-child, .dynamic_cog  circle:first-child {
+  stroke-dashoffset: calc(15.7 * 10 / var(--d, 10));
+}
+.dynamic_cog {
+  width: calc(var(--d, 10) * 1.2 * 1vmin);
+  height: calc(var(--d, 10) * 1.2 * 1vmin);  
+  stroke-width: calc(15.7 * 10 / var(--d, 10));
+  stroke-dasharray:  0 calc(31.4 * 10 / var(--d, 10));  
+  
+  animation: turn calc(6s * var(--d, 10) / 10) var(--delay, 0s) infinite linear var(--turn, normal);
+}
+
+@keyframes turn {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/color-palettes/README.markdown b/color-palettes/README.markdown
new file mode 100644
index 0000000..a9fddc2
--- /dev/null
+++ b/color-palettes/README.markdown
@@ -0,0 +1,5 @@
+# Color Palettes 🎨
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Astap/pen/abJXNVj](https://codepen.io/Astap/pen/abJXNVj).
+
+
diff --git a/color-palettes/dist/index.html b/color-palettes/dist/index.html
new file mode 100644
index 0000000..fa0a724
--- /dev/null
+++ b/color-palettes/dist/index.html
@@ -0,0 +1,614 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Color Palettes 🎨</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="paletteWrap clearfix">
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_1"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_2"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_3"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_4"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_1"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_2"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_3"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_4"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_1"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_2"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_3"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_4"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#f5f4e8</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#c50d66</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#f07810</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#eec60a</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_5"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_6"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_7"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_8"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_5"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_6"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_7"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_8"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_5"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_6"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_7"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_8"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#13334c</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#005792</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#f6f6e9</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#fd5f00</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_9"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_10"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_11"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_12"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_9"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_10"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_11"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_12"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_9"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_10"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_11"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_12"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#57D1C9</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#ED5485</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#FFFBCB</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#FFE869</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_13"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_14"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_15"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_16"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_13"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_14"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_15"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_16"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_13"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_14"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_15"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_16"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#F8F9FC</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#C00000</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#DE3C3C</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#F7B32D</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_17"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_18"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_19"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_20"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_17"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_18"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_19"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_20"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_17"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_18"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_19"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_20"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#003246</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#E4491C</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#0387B1</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#F5F5F5</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_21"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_22"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_23"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_24"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_21"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_22"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_23"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_24"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_21"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_22"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_23"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_24"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#ff5108</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#fffdf8</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#ff2321</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#000000</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_25"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_26"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_27"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_28"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_25"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_26"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_27"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_28"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_25"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_26"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_27"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_28"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#7abed1</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#f05945</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#f7f3e9</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#f05945</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_29"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_30"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_31"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_32"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_29"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_30"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_31"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_32"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_29"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_30"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_31"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_32"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#FFFC31</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#F6F7EB</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#E94F37</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#393E41</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_33"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_34"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_35"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_36"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_33"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_34"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_35"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_36"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_33"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_34"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_35"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_36"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#518f8b</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#e3e1c8</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#472c33</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#e6462d</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_37"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_38"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_39"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_40"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_37"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_38"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_39"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_40"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_37"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_38"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_39"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_40"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#c12127</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#2a333c</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#ffffff</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#8f9299</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_41"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_42"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_43"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_44"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_41"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_42"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_43"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_44"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_41"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_42"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_43"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_44"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#EDEDE4</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#F74906</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#554E44</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#FFFFFF</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_45"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_46"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_47"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_48"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_45"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_46"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_47"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_48"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_45"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_46"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_47"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_48"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#221E1D</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#ECEAE0</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#63AA9C</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#E9633B</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_49"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_50"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_51"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_52"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_49"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_50"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_51"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_52"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_49"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_50"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_51"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_52"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#a10015</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#d52b15</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#efeee9</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#beb1b4</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_53"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_54"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_55"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_56"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_53"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_54"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_55"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_56"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_53"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_54"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_55"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_56"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#222831</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#393E46</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#FD7013</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#EEEEEE</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_57"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_58"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_59"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_60"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_57"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_58"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_59"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_60"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_57"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_58"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_59"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_60"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#FF7260</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#9BD7D5</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#FFF5C3</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#505050</p>
+            </div>
+          </div>
+        </div>
+        <div class="paletteItem">
+          <div class="paletteItem__schemeBox">
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
+              <div class="paletteItem__colorItem paletteItem__colorItem_61"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_62"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_63"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_64"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
+              <div class="paletteItem__colorItem paletteItem__colorItem_61"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_62"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_63"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_64"></div>
+            </div>
+            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
+              <div class="paletteItem__colorItem paletteItem__colorItem_61"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_62"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_63"></div>
+              <div class="paletteItem__colorItem paletteItem__colorItem_64"></div>
+            </div>
+          </div>
+          <div class="paletteItem__infoBox">
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#FF3B1D</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#7BDFF2</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#000000</p>
+            </div>
+            <div class="paletteItem__colorBox">
+              <p class="paletteItem__colorName">#FFFFFF</p>
+            </div>
+          </div>
+        </div>
+  </div>
+</div>
+<div class="social">
+  <ul class="socialList">
+    <li class="socialList__item"><a class="socialList__link" href="https://github.com/Kerthin?tab=overview&amp;from=2021-05-01&amp;to=2021-05-05" target="_blank">
+        <svg class="socialList__icon" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+        </svg></a></li>
+    <li class="socialList__item"><a class="socialList__link" href="https://codepen.io/Astap" target="_blank">
+        <svg class="socialList__icon" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon>
+          <line x1="12" y1="22" x2="12" y2="15.5"></line>
+          <polyline points="22 8.5 12 15.5 2 8.5"></polyline>
+          <polyline points="2 15.5 12 8.5 22 15.5"></polyline>
+          <line x1="12" y1="2" x2="12" y2="8.5"></line>
+        </svg></a></li>
+    <li class="socialList__item"><a class="socialList__link" href="https://twitter.com/BelichenkoRoden" target="_blank">
+        <svg class="socialList__icon" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
+        </svg></a></li>
+  </ul>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/color-palettes/dist/style.css b/color-palettes/dist/style.css
new file mode 100644
index 0000000..bd320ad
--- /dev/null
+++ b/color-palettes/dist/style.css
@@ -0,0 +1,441 @@
+@import 'https://rawcdn.githack.com/Kerthin/links/e23c46b4fa25b5672245c51fca29213232d5e883/css/fontLinks.css';
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  width: 0;
+}
+
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.container {
+  position: absolute;
+  width: 100%;
+  height: auto;
+  background-image: linear-gradient(135deg, #f06966, #fad6a6);
+}
+
+.paletteWrap {
+  position: relative;
+  width: 1230px;
+  margin: 50px auto;
+}
+
+.paletteItem {
+  float: left;
+  padding: 20px;
+  margin-bottom: 50px;
+  margin-right: 50px;
+  background-color: #f7e0b5;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+.paletteItem:nth-child(4n) {
+  margin-right: 0;
+}
+
+.paletteItem__schemeBox {
+  position: relative;
+  margin-bottom: 15px;
+  width: 230px;
+  height: 310px;
+  background-color: #fff8e7;
+}
+
+.paletteItem__colorScheme {
+  position: absolute;
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+.paletteItem__colorScheme_square {
+  top: 65px;
+  left: 15px;
+  width: 100px;
+  height: 100px;
+}
+.paletteItem__colorScheme_square .paletteItem__colorItem {
+  width: 50%;
+  height: 50%;
+}
+.paletteItem__colorScheme_vertical {
+  top: 15px;
+  right: 15px;
+  width: 50px;
+  height: 200px;
+}
+.paletteItem__colorScheme_vertical .paletteItem__colorItem {
+  width: 100%;
+  height: 25%;
+}
+.paletteItem__colorScheme_horizontal {
+  bottom: 20px;
+  left: 15px;
+  width: 200px;
+  height: 50px;
+}
+.paletteItem__colorScheme_horizontal .paletteItem__colorItem {
+  width: 25%;
+  height: 100%;
+}
+
+.paletteItem__colorItem {
+  float: left;
+}
+
+.paletteItem__infoBox {
+  width: 230px;
+  height: 50px;
+}
+
+.paletteItem__colorBox {
+  float: left;
+  width: 50%;
+  height: 25px;
+}
+
+.paletteItem__colorName {
+  text-align: center;
+  font-family: "Galeria-Medium";
+}
+
+.paletteItem__colorItem_1 {
+  background-color: #f5f4e8;
+}
+
+.paletteItem__colorItem_2 {
+  background-color: #c50d66;
+}
+
+.paletteItem__colorItem_3 {
+  background-color: #f07810;
+}
+
+.paletteItem__colorItem_4 {
+  background-color: #eec60a;
+}
+
+.paletteItem__colorItem_5 {
+  background-color: #13334c;
+}
+
+.paletteItem__colorItem_6 {
+  background-color: #005792;
+}
+
+.paletteItem__colorItem_7 {
+  background-color: #f6f6e9;
+}
+
+.paletteItem__colorItem_8 {
+  background-color: #fd5f00;
+}
+
+.paletteItem__colorItem_9 {
+  background-color: #57D1C9;
+}
+
+.paletteItem__colorItem_10 {
+  background-color: #ED5485;
+}
+
+.paletteItem__colorItem_11 {
+  background-color: #FFFBCB;
+}
+
+.paletteItem__colorItem_12 {
+  background-color: #FFE869;
+}
+
+.paletteItem__colorItem_13 {
+  background-color: #F8F9FC;
+}
+
+.paletteItem__colorItem_14 {
+  background-color: #C00000;
+}
+
+.paletteItem__colorItem_15 {
+  background-color: #DE3C3C;
+}
+
+.paletteItem__colorItem_16 {
+  background-color: #F7B32D;
+}
+
+.paletteItem__colorItem_17 {
+  background-color: #003246;
+}
+
+.paletteItem__colorItem_18 {
+  background-color: #E4491C;
+}
+
+.paletteItem__colorItem_19 {
+  background-color: #0387B1;
+}
+
+.paletteItem__colorItem_20 {
+  background-color: #F5F5F5;
+}
+
+.paletteItem__colorItem_21 {
+  background-color: #ff5108;
+}
+
+.paletteItem__colorItem_22 {
+  background-color: #fffdf8;
+}
+
+.paletteItem__colorItem_23 {
+  background-color: #ff2321;
+}
+
+.paletteItem__colorItem_24 {
+  background-color: #000000;
+}
+
+.paletteItem__colorItem_25 {
+  background-color: #7abed1;
+}
+
+.paletteItem__colorItem_26 {
+  background-color: #f05945;
+}
+
+.paletteItem__colorItem_27 {
+  background-color: #f7f3e9;
+}
+
+.paletteItem__colorItem_28 {
+  background-color: #f05945;
+}
+
+.paletteItem__colorItem_29 {
+  background-color: #FFFC31;
+}
+
+.paletteItem__colorItem_30 {
+  background-color: #F6F7EB;
+}
+
+.paletteItem__colorItem_31 {
+  background-color: #E94F37;
+}
+
+.paletteItem__colorItem_32 {
+  background-color: #393E41;
+}
+
+.paletteItem__colorItem_33 {
+  background-color: #518f8b;
+}
+
+.paletteItem__colorItem_34 {
+  background-color: #e3e1c8;
+}
+
+.paletteItem__colorItem_35 {
+  background-color: #472c33;
+}
+
+.paletteItem__colorItem_36 {
+  background-color: #e6462d;
+}
+
+.paletteItem__colorItem_37 {
+  background-color: #c12127;
+}
+
+.paletteItem__colorItem_38 {
+  background-color: #2a333c;
+}
+
+.paletteItem__colorItem_39 {
+  background-color: #ffffff;
+}
+
+.paletteItem__colorItem_40 {
+  background-color: #8f9299;
+}
+
+.paletteItem__colorItem_41 {
+  background-color: #EDEDE4;
+}
+
+.paletteItem__colorItem_42 {
+  background-color: #F74906;
+}
+
+.paletteItem__colorItem_43 {
+  background-color: #554E44;
+}
+
+.paletteItem__colorItem_44 {
+  background-color: #FFFFFF;
+}
+
+.paletteItem__colorItem_45 {
+  background-color: #221E1D;
+}
+
+.paletteItem__colorItem_46 {
+  background-color: #ECEAE0;
+}
+
+.paletteItem__colorItem_47 {
+  background-color: #63AA9C;
+}
+
+.paletteItem__colorItem_48 {
+  background-color: #E9633B;
+}
+
+.paletteItem__colorItem_49 {
+  background-color: #a10015;
+}
+
+.paletteItem__colorItem_50 {
+  background-color: #d52b15;
+}
+
+.paletteItem__colorItem_51 {
+  background-color: #efeee9;
+}
+
+.paletteItem__colorItem_52 {
+  background-color: #beb1b4;
+}
+
+.paletteItem__colorItem_53 {
+  background-color: #222831;
+}
+
+.paletteItem__colorItem_54 {
+  background-color: #393E46;
+}
+
+.paletteItem__colorItem_55 {
+  background-color: #FD7013;
+}
+
+.paletteItem__colorItem_56 {
+  background-color: #EEEEEE;
+}
+
+.paletteItem__colorItem_57 {
+  background-color: #FF7260;
+}
+
+.paletteItem__colorItem_58 {
+  background-color: #9BD7D5;
+}
+
+.paletteItem__colorItem_59 {
+  background-color: #FFF5C3;
+}
+
+.paletteItem__colorItem_60 {
+  background-color: #505050;
+}
+
+.paletteItem__colorItem_61 {
+  background-color: #FF3B1D;
+}
+
+.paletteItem__colorItem_62 {
+  background-color: #7BDFF2;
+}
+
+.paletteItem__colorItem_63 {
+  background-color: #000000;
+}
+
+.paletteItem__colorItem_64 {
+  background-color: #FFFFFF;
+}
+
+@media only screen and (max-width: 1280px) {
+  .paletteWrap {
+    width: 910px;
+  }
+
+  .paletteItem:nth-child(3n) {
+    margin-right: 0;
+  }
+  .paletteItem:nth-child(4n) {
+    margin-right: 50px;
+  }
+  .paletteItem:nth-child(12n) {
+    margin-right: 0;
+  }
+}
+@media only screen and (max-width: 960px) {
+  .paletteWrap {
+    width: 590px;
+  }
+
+  .paletteItem:nth-child(2n) {
+    margin-right: 0;
+  }
+  .paletteItem:nth-child(3n) {
+    margin-right: 50px;
+  }
+  .paletteItem:nth-child(6n) {
+    margin-right: 0;
+  }
+}
+@media only screen and (max-width: 642px) {
+  .paletteWrap {
+    width: 270px;
+  }
+
+  .paletteItem {
+    margin-bottom: 50px;
+    margin-right: 0;
+  }
+}
+/*____________________________________________________________
+## Developer Links
+____________________________________________________________*/
+.social {
+  position: fixed;
+  bottom: 0;
+  left: 30px;
+}
+
+.socialList {
+  list-style: none;
+}
+.socialList:after {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 1px;
+  height: 40px;
+  background: #f7e0b5;
+}
+
+.socialList__item {
+  margin-bottom: 10px;
+  width: 20px;
+  height: 20px;
+  transition: transform 0.2s;
+}
+.socialList__item:hover {
+  transform: translateY(-3px);
+}
+.socialList__item:hover .socialList__icon {
+  stroke: #7dcbd8;
+}
+
+.socialList__icon {
+  fill: none;
+  stroke: #f7e0b5;
+}
\ No newline at end of file
diff --git a/color-palettes/license.txt b/color-palettes/license.txt
new file mode 100644
index 0000000..903c03e
--- /dev/null
+++ b/color-palettes/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Roden (https://codepen.io/Astap/pen/abJXNVj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/color-palettes/src/index.pug b/color-palettes/src/index.pug
new file mode 100644
index 0000000..3dc5192
--- /dev/null
+++ b/color-palettes/src/index.pug
@@ -0,0 +1,57 @@
+.container
+	.paletteWrap.clearfix
+	
+		mixin paletteItemMix(firstColorMix, secondColorMix, thirdColorMix, fourthColorMix, firstHexColorMix, seconHexdColorMix, thirdHexColorMix, fourtHexhColorMix)
+			.paletteItem
+				.paletteItem__schemeBox
+					.paletteItem__colorScheme.paletteItem__colorScheme_square
+						each val in [`${firstColorMix}`, `${secondColorMix}`, `${thirdColorMix}`, `${fourthColorMix}`]
+							.paletteItem__colorItem(class=`paletteItem__colorItem_${val}`)
+					.paletteItem__colorScheme.paletteItem__colorScheme_vertical
+						each val in [`${firstColorMix}`, `${secondColorMix}`, `${thirdColorMix}`, `${fourthColorMix}`]
+							.paletteItem__colorItem(class=`paletteItem__colorItem_${val}`)
+					.paletteItem__colorScheme.paletteItem__colorScheme_horizontal
+						each val in [`${firstColorMix}`, `${secondColorMix}`, `${thirdColorMix}`, `${fourthColorMix}`]
+							.paletteItem__colorItem(class=`paletteItem__colorItem_${val}`)
+				.paletteItem__infoBox
+					each val in [`${firstHexColorMix}`, `${seconHexdColorMix}`, `${thirdHexColorMix}`, `${fourtHexhColorMix}`]
+						.paletteItem__colorBox
+							p.paletteItem__colorName ##{val}
+
+		+paletteItemMix('1', '2', '3', '4', 'f5f4e8', 'c50d66', 'f07810', 'eec60a')
+		+paletteItemMix('5', '6', '7', '8', '13334c', '005792', 'f6f6e9', 'fd5f00')
+		+paletteItemMix('9', '10', '11', '12', '57D1C9', 'ED5485', 'FFFBCB', 'FFE869')
+		+paletteItemMix('13', '14', '15', '16', 'F8F9FC', 'C00000', 'DE3C3C', 'F7B32D')
+		+paletteItemMix('17', '18', '19', '20', '003246', 'E4491C', '0387B1', 'F5F5F5')
+		+paletteItemMix('21', '22', '23', '24', 'ff5108', 'fffdf8', 'ff2321', '000000')
+		+paletteItemMix('25', '26', '27', '28', '7abed1', 'f05945', 'f7f3e9', 'f05945')
+		+paletteItemMix('29', '30', '31', '32', 'FFFC31', 'F6F7EB', 'E94F37', '393E41')
+		+paletteItemMix('33', '34', '35', '36', '518f8b', 'e3e1c8', '472c33', 'e6462d')
+		+paletteItemMix('37', '38', '39', '40', 'c12127', '2a333c', 'ffffff', '8f9299')
+		+paletteItemMix('41', '42', '43', '44', 'EDEDE4', 'F74906', '554E44', 'FFFFFF')
+		+paletteItemMix('45', '46', '47', '48', '221E1D', 'ECEAE0', '63AA9C', 'E9633B')
+		+paletteItemMix('49', '50', '51', '52', 'a10015', 'd52b15', 'efeee9', 'beb1b4')
+		+paletteItemMix('53', '54', '55', '56', '222831', '393E46', 'FD7013', 'EEEEEE')
+		+paletteItemMix('57', '58', '59', '60', 'FF7260', '9BD7D5', 'FFF5C3', '505050')
+		+paletteItemMix('61', '62', '63', '64', 'FF3B1D', '7BDFF2', '000000', 'FFFFFF')
+		
+		
+//--- Social links
+.social
+	ul.socialList
+		li.socialList__item
+			a.socialList__link(href="https://github.com/Kerthin?tab=overview&from=2021-05-01&to=2021-05-05" target="_blank")
+				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
+					path(d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22")
+		li.socialList__item
+			a.socialList__link(href="https://codepen.io/Astap" target="_blank")
+				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
+					polygon(points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2")
+					line(x1="12" y1="22" x2="12" y2="15.5")
+					polyline(points="22 8.5 12 15.5 2 8.5")
+					polyline(points="2 15.5 12 8.5 22 15.5")
+					line(x1="12" y1="2" x2="12" y2="8.5")
+		li.socialList__item
+			a.socialList__link(href="https://twitter.com/BelichenkoRoden" target="_blank")
+				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
+					path(d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z")
\ No newline at end of file
diff --git a/color-palettes/src/style.scss b/color-palettes/src/style.scss
new file mode 100644
index 0000000..d209e75
--- /dev/null
+++ b/color-palettes/src/style.scss
@@ -0,0 +1,289 @@
+* {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+	width: 0;
+}
+
+.clearfix:after {
+	content: "";
+	display: table;
+	clear: both;
+}
+
+@import 'https://rawcdn.githack.com/Kerthin/links/e23c46b4fa25b5672245c51fca29213232d5e883/css/fontLinks.css';
+
+.container {
+	position: absolute;
+	width: 100%;
+	height: auto;
+	background-image: linear-gradient(135deg, rgb(240, 105, 102), rgb(250, 214, 166));
+}
+
+.paletteWrap {
+	position: relative;
+	width: 1230px;
+	margin: 50px auto;
+}
+
+.paletteItem {
+	float: left;
+	padding: 20px;
+	margin-bottom: 50px;
+	margin-right: 50px;
+	background-color: #f7e0b5;
+	box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
+	
+	&:nth-child(4n) {
+		margin-right: 0;
+	}
+}
+.paletteItem__schemeBox {
+	position: relative;
+	margin-bottom: 15px;
+	width: 230px;
+	height: 310px;
+	background-color: #fff8e7;
+}
+
+.paletteItem__colorScheme {
+	position: absolute;
+	border-radius: 5px;
+	overflow: hidden;
+	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+	
+	&_square {
+		top: 65px;
+		left: 15px;
+		width: 100px;
+		height: 100px;
+
+		.paletteItem__colorItem {
+			width: 50%;
+			height: 50%;
+		}
+	}
+
+	&_vertical {
+		top: 15px;
+		right: 15px;
+		width: 50px;
+		height: 200px;
+
+		.paletteItem__colorItem {
+			width: 100%;
+			height: 25%;
+		}
+	}
+
+	&_horizontal {
+		bottom: 20px;
+		left: 15px;
+		width: 200px;
+		height: 50px;
+
+		.paletteItem__colorItem {
+			width: 25%;
+			height: 100%;
+		}
+	}
+}
+.paletteItem__colorItem {
+	float: left;
+}
+
+.paletteItem__infoBox {
+	width: 230px;
+	height: 50px;
+}
+.paletteItem__colorBox {
+	float: left;
+	width: 50%;
+	height: 25px;
+}
+.paletteItem__colorName {
+	text-align: center;
+	font-family: 'Galeria-Medium';
+}
+
+$colorPalette: (
+	1	: #f5f4e8,
+	2	: #c50d66,
+	3	: #f07810,
+	4	: #eec60a,
+
+	5	: #13334c,
+	6	: #005792,
+	7	: #f6f6e9,
+	8	: #fd5f00,
+
+	9	: #57D1C9,
+	10	: #ED5485,
+	11	: #FFFBCB,
+	12	: #FFE869,
+
+	13	: #F8F9FC,
+	14	: #C00000,
+	15	: #DE3C3C,
+	16	: #F7B32D,
+
+	17	: #003246,
+	18	: #E4491C,
+	19	: #0387B1,
+	20	: #F5F5F5,
+
+	21	: #ff5108,
+	22	: #fffdf8,
+	23	: #ff2321,
+	24	: #000000,
+
+	25	: #7abed1,
+	26	: #f05945,
+	27	: #f7f3e9,
+	28	: #f05945,
+
+	29	: #FFFC31,
+	30	: #F6F7EB,
+	31	: #E94F37,
+	32	: #393E41,
+
+	33	: #518f8b,
+	34	: #e3e1c8,
+	35	: #472c33,
+	36	: #e6462d,
+
+	37	: #c12127,
+	38	: #2a333c,
+	39	: #ffffff,
+	40	: #8f9299,
+
+	41	: #EDEDE4,
+	42	: #F74906,
+	43	: #554E44,
+	44	: #FFFFFF,
+
+	45	: #221E1D,
+	46	: #ECEAE0,
+	47	: #63AA9C,
+	48	: #E9633B,
+
+	49	: #a10015,
+	50	: #d52b15,
+	51	: #efeee9,
+	52	: #beb1b4,
+
+	53	: #222831,
+	54	: #393E46,
+	55	: #FD7013,
+	56	: #EEEEEE,
+
+	57	: #FF7260,
+	58	: #9BD7D5,
+	59	: #FFF5C3,
+	60	: #505050,
+
+	61	: #FF3B1D,
+	62	: #7BDFF2,
+	63	: #000000,
+	64	: #FFFFFF
+);
+
+@each $hex, $color in $colorPalette {
+	.paletteItem__colorItem_#{$hex} {
+		background-color: $color;
+	}
+}
+
+
+@media only screen and (max-width: 1280px) {
+	.paletteWrap {
+		width: 910px;
+	}
+
+	.paletteItem {
+
+		&:nth-child(3n) {
+			margin-right: 0;
+		}
+		&:nth-child(4n) {
+			margin-right: 50px;
+		}
+		&:nth-child(12n) {
+			margin-right: 0;
+		}
+	}
+}
+
+@media only screen and (max-width: 960px) {
+	.paletteWrap {
+		width: 590px;
+	}
+	
+	.paletteItem {
+
+		&:nth-child(2n) {
+			margin-right: 0;
+		}
+		&:nth-child(3n) {
+			margin-right: 50px;
+		}
+		&:nth-child(6n) {
+			margin-right: 0;
+		}
+	}
+}
+
+@media only screen and (max-width: 642px) {
+	.paletteWrap {
+		width: 270px;
+	}
+	
+	.paletteItem {
+		margin-bottom: 50px;
+		margin-right: 0;
+	}
+}
+
+
+/*____________________________________________________________
+## Developer Links
+____________________________________________________________*/
+.social {
+	position: fixed;
+	bottom: 0;
+	left: 30px;
+}
+.socialList {
+	list-style: none;
+	
+	&:after {
+		content: '';
+		display: block;
+		margin: 0 auto;
+		width: 1px;
+		height: 40px;
+		background: #f7e0b5;
+	}
+}
+.socialList__item {
+	margin-bottom: 10px;
+	width: 20px;
+	height: 20px;
+	transition: transform .2s;
+	
+	&:hover {
+		transform: translateY(-3px);
+		
+		.socialList__icon {
+			stroke: #7dcbd8;
+		}
+	}
+}
+
+.socialList__icon {
+	fill: none;
+	stroke: #f7e0b5;
+}
\ No newline at end of file
diff --git a/color-search-engine-w-react-gsap/README.markdown b/color-search-engine-w-react-gsap/README.markdown
new file mode 100644
index 0000000..b140e8d
--- /dev/null
+++ b/color-search-engine-w-react-gsap/README.markdown
@@ -0,0 +1,5 @@
+# Color search engine w/ React && GSAP 🎨
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jh3y/pen/PoNWLKp](https://codepen.io/jh3y/pen/PoNWLKp).
+
+
diff --git a/color-search-engine-w-react-gsap/dist/index.html b/color-search-engine-w-react-gsap/dist/index.html
new file mode 100644
index 0000000..a023f9e
--- /dev/null
+++ b/color-search-engine-w-react-gsap/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Color search engine w/ React &amp;&amp; GSAP 🎨</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="app"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/color-search-engine-w-react-gsap/dist/script.js b/color-search-engine-w-react-gsap/dist/script.js
new file mode 100644
index 0000000..d305015
--- /dev/null
+++ b/color-search-engine-w-react-gsap/dist/script.js
@@ -0,0 +1,291 @@
+const { React, ReactDOM, gsap } = window;
+const { useEffect, useState, useRef, useReducer } = React;
+const { render } = ReactDOM;
+const rootNode = document.getElementById('app');
+
+const ANIM_SPEED = 0.25;
+
+const initialState = {
+  dataSet: undefined,
+  searchTime: 0,
+  searching: false,
+  keyword: undefined };
+
+const ACTIONS = {
+  SEARCH_NEW: 'SEARCH_NEW',
+  SEARCH_RESULTS: 'SEARCH_RESULTS',
+  COPY: 'COPY' };
+
+
+const colorSearchReducer = (state, action) => {
+  switch (action.type) {
+    case ACTIONS.SEARCH_NEW:
+      return {
+        searching: true,
+        searchTime: Date.now(),
+        dataSet: state.dataSet,
+        keyword: action.keyword };
+
+    case ACTIONS.SEARCH_RESULTS:
+      return { searching: false, searchTime: null, dataSet: action.data };
+    case ACTIONS.COPY:
+      return {
+        searching: false,
+        searchTime: null,
+        dataSet: state.dataSet.map(c => ({
+          ...c,
+          copiedHsl: c.color.hsl === action.color,
+          copiedHex: c.color.hex === action.color,
+          copiedRgb:
+          `rgb(${c.color.rgb.r}, ${c.color.rgb.g}, ${c.color.rgb.b})` ===
+          action.color })) };
+
+
+    default:
+      return state;}
+
+};
+const URL = 'https://culr.netlify.app/.netlify/functions/culr';
+const useColorSearch = () => {
+  const searchResults = useRef(null);
+  const [{ searchTime, searching, dataSet, keyword }, dispatch] = useReducer(
+  colorSearchReducer,
+  initialState);
+
+  const grabImages = async keyword => {
+    if (!keyword) return;
+    const data = await (await (await fetch(`${URL}/?search=${keyword}`)).json()).
+    images;
+    dispatch({ type: ACTIONS.SEARCH_RESULTS, data });
+  };
+  useEffect(() => {
+    grabImages(keyword);
+  }, [searchTime]);
+
+  const search = async keyword => {
+    if (!keyword) return;
+    searchResults.current = [];
+    dispatch({ type: ACTIONS.SEARCH_NEW, keyword });
+  };
+
+  const copy = color => {
+    // Copy to clipboard
+    const input = document.createElement('input');
+    input.value = color;
+    document.body.appendChild(input);
+    input.select();
+    document.execCommand('copy');
+    input.remove();
+    dispatch({ type: ACTIONS.COPY, color });
+  };
+  return [dataSet, searching, search, copy];
+};
+
+const App = () => {
+  const [keyword, setKeyword] = useState('');
+  const invisiput = useRef(null);
+  const colorsRef = useRef(null);
+  const [selected, setSelected] = useState(null);
+  const selectedRef = useRef(null);
+  const selectedImageRef = useRef(null);
+  const colorRef = useRef(null);
+  const formRef = useRef(null);
+  const [data, searching, search, copy] = useColorSearch();
+
+  const unset = () => {
+    setSelected(null);
+    search(keyword);
+  };
+  const onSubmit = e => {
+    e.preventDefault();
+    if (selected) {
+      closeSelected(unset);
+    } else {
+      unset();
+    }
+  };
+
+  const copyToClipboard = color => {
+    invisiput.current.value = color;
+    invisiput.current.select();
+    document.execCommand('copy');
+    copy(color);
+  };
+
+  useEffect(() => {
+    if (selected) {
+      const colorEl = colorsRef.current.children[selected.index];
+      const { top, left, bottom, right } = colorEl.getBoundingClientRect();
+      const {
+        top: containerTop,
+        left: containerLeft,
+        right: containerRight,
+        bottom: containerBottom } =
+      colorsRef.current.getBoundingClientRect();
+
+      const colorPos = {
+        top: top - containerTop,
+        left: left - containerLeft,
+        bottom: containerBottom - bottom,
+        right: containerRight - right };
+
+      colorRef.current = {
+        pos: colorPos };
+
+      const onStart = () => {
+        gsap.set(selectedRef.current, {
+          opacity: 1,
+          '--color': selected.data.color.hex,
+          '--red': selected.data.color.rgb.r,
+          '--green': selected.data.color.rgb.g,
+          '--blue': selected.data.color.rgb.b,
+          '--t': colorPos.top,
+          '--r': colorPos.right,
+          '--b': colorPos.bottom,
+          '--l': colorPos.left,
+          zIndex: 2 });
+
+      };
+      gsap.
+      timeline({ onStart }).
+      to(selectedRef.current, {
+        duration: ANIM_SPEED,
+        '--t': -10,
+        '--r': -10,
+        '--b': -10,
+        '--l': -10 }).
+
+      to(selectedImageRef.current, {
+        duration: ANIM_SPEED,
+        opacity: 1 });
+
+    }
+  }, [selected]);
+
+  const closeSelected = cb => {
+    const colorPos = colorRef.current.pos;
+    const onComplete = () => {
+      gsap.set(selectedRef.current, { opacity: 0, zIndex: -1 });
+      if (cb && typeof cb === 'function') {
+        cb();
+      }
+    };
+    gsap.
+    timeline({ onComplete }).
+    to(selectedImageRef.current, {
+      duration: ANIM_SPEED / 2,
+      opacity: 0 }).
+
+    to(selectedRef.current, {
+      duration: ANIM_SPEED / 2,
+      '--t': colorPos.top,
+      '--r': colorPos.right,
+      '--b': colorPos.bottom,
+      '--l': colorPos.left });
+
+  };
+
+  return (
+    React.createElement("div", { className: "color-search" },
+    React.createElement("input", { ref: invisiput, className: "input-invisible" }),
+    React.createElement("form", { ref: formRef, onSubmit: onSubmit, className: "input-container" },
+    React.createElement("input", {
+      value: keyword,
+      disabled: searching,
+      onChange: e => setKeyword(e.target.value),
+      placeholder: "Search for a color" }),
+
+    React.createElement("button", {
+      className: "input-container__button",
+      role: "button",
+      disabled: searching,
+      onClick: onSubmit },
+    React.createElement("div", { className: "search" },
+    React.createElement("div", { className: "search__glass" }),
+    React.createElement("div", { className: "search__prongs" },
+    new Array(10).fill().map((d, i) =>
+    React.createElement("div", { key: `loader-prong--${i}` })))))),
+
+
+
+
+
+    React.createElement("div", {
+      ref: colorsRef,
+      className: `colors ${searching ? 'colors--searching' : ''}` },
+    data &&
+    data.length !== 0 &&
+    data.map((s, index) =>
+    React.createElement("div", {
+      key: `color--${index}`,
+      className: "color",
+      style: {
+        '--color': s.color.hex },
+
+      onClick: () => setSelected({ index, data: data[index] }) })),
+
+    data && data.length !== 0 && selected &&
+    React.createElement("div", {
+      ref: selectedRef,
+      className: `color--selected ${
+      selected.data.color.dark ? 'color--selected-dark' : ''
+      }` },
+    React.createElement("button", { className: "color__close", onClick: closeSelected },
+    React.createElement("svg", { viewBox: "0 0 24 24" },
+    React.createElement("path", { d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" }))),
+
+
+    React.createElement("button", {
+      onClick: () => copyToClipboard(selected.data.color.hsl),
+      className: "info" },
+    data && data[selected.index] && data[selected.index].copiedHsl ?
+    'COPIED!' :
+    selected.data.color.hsl),
+
+    React.createElement("button", {
+      onClick: () => copyToClipboard(selected.data.color.hex),
+      className: "info" },
+    data && data[selected.index] && data[selected.index].copiedHex ?
+    'COPIED!' :
+    selected.data.color.hex),
+
+    React.createElement("button", {
+      onClick: () => copyToClipboard(selected.data.color.rgb.label),
+      className: "info" },
+    data && data[selected.index] && data[selected.index].copiedRgb ?
+    'COPIED!' :
+    selected.data.color.rgb.label),
+
+    React.createElement("div", { className: "info" }, "Photo by",
+    ' ',
+    React.createElement("a", {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      href: `https://unsplash.com/@${selected.data.user.username}?utm_source=color-image-search&utm_medium=referral` },
+    selected.data.user.name),
+    ' ', "on",
+    ' ',
+    React.createElement("a", {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      href: "https://unsplash.com/?utm_source=color-image-search&utm_medium=referral" }, "Unsplash")),
+
+
+
+    React.createElement("div", { ref: selectedImageRef, className: "img" },
+    React.createElement("img", {
+      className: "image--loading",
+      key: selected.data.id,
+      alt: selected.data.alt_description,
+      src: selected.data.urls.regular }))),
+
+
+
+
+    data && data.length === 0 && React.createElement("h1", null, "No results! \uD83D\uDE2D"))));
+
+
+
+};
+const ROOT = document.querySelector('#app');
+render(React.createElement(App, null), ROOT);
\ No newline at end of file
diff --git a/color-search-engine-w-react-gsap/dist/style.css b/color-search-engine-w-react-gsap/dist/style.css
new file mode 100644
index 0000000..aead7ef
--- /dev/null
+++ b/color-search-engine-w-react-gsap/dist/style.css
@@ -0,0 +1,473 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  font-family: sans-serif;
+}
+.input-container {
+  display: inline-grid;
+  grid-template-columns: auto 60px;
+  margin: 0;
+  height: 60px;
+  margin: 1rem 0;
+  width: 100%;
+}
+.input-container:hover [disabled] {
+  border-color: #ddd;
+}
+.input-container:hover input {
+  border-color: #111;
+}
+.input-container:hover input ~ button {
+  border-color: #111;
+}
+.input-container:hover input ~ button .search__glass {
+  border-color: #111;
+}
+.input-container:hover input ~ button .search__glass:after {
+  background: #111;
+}
+input {
+  box-sizing: border-box;
+  cursor: pointer;
+  padding: 0 24px;
+  font-size: 18px;
+  border: 2px solid #aaa;
+  border-radius: 10px 0 0 10px;
+  outline: transparent;
+  -webkit-transition: border-color 0.25s ease, color 0.25s ease;
+  transition: border-color 0.25s ease, color 0.25s ease;
+}
+input::-webkit-input-placeholder {
+  color: #aaa;
+}
+input::-moz-placeholder {
+  color: #aaa;
+}
+input:-ms-input-placeholder {
+  color: #aaa;
+}
+input::-ms-input-placeholder {
+  color: #aaa;
+}
+input::placeholder {
+  color: #aaa;
+}
+input:hover,
+input:active,
+input:focus {
+  border-color: #111;
+}
+input:hover ~ button,
+input:active ~ button,
+input:focus ~ button {
+  border-color: #111;
+}
+input:hover ~ button .search__glass,
+input:active ~ button .search__glass,
+input:focus ~ button .search__glass {
+  border-color: #111;
+  -webkit-transition: border-color 0.25s ease;
+  transition: border-color 0.25s ease;
+}
+input:hover ~ button .search__glass:after,
+input:active ~ button .search__glass:after,
+input:focus ~ button .search__glass:after {
+  background: #111;
+  -webkit-transition: background 0.25s ease;
+  transition: background 0.25s ease;
+}
+input[disabled],
+input:hover[disabled] {
+  border-color: #ddd;
+  color: #ddd;
+}
+input[disabled] ~ button,
+input:hover[disabled] ~ button {
+  border-color: #ddd;
+}
+input[disabled] ~ button .search__glass,
+input:hover[disabled] ~ button .search__glass {
+  border-color: transparent;
+}
+.input-container__button {
+  cursor: pointer;
+  width: 60px;
+  outline: transparent;
+  border-radius: 0 10px 10px 0;
+  position: relative;
+  border: 2px solid #aaa;
+  border-left-width: 0;
+  -webkit-transition: border-color 0.25s ease;
+  transition: border-color 0.25s ease;
+  background: transparent;
+}
+.input-container__button:hover[disabled] .search__glass {
+  border-color: transparent;
+}
+.input-container__button[disabled] .search__prongs {
+  opacity: 1;
+  -webkit-transition: opacity 0.25s 0.25s ease;
+  transition: opacity 0.25s 0.25s ease;
+}
+.input-container__button[disabled] .search__glass {
+  -webkit-transform: translate(0, 0);
+          transform: translate(0, 0);
+  border-color: transparent;
+  -webkit-transition: border-color 0.25s ease, -webkit-transform 0.25s ease;
+  transition: border-color 0.25s ease, -webkit-transform 0.25s ease;
+  transition: border-color 0.25s ease, transform 0.25s ease;
+  transition: border-color 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease;
+}
+.input-container__button[disabled] .search__glass:after {
+  background: transparent;
+  -webkit-transition: background 0.25s ease, -webkit-transform 0.25s ease;
+  transition: background 0.25s ease, -webkit-transform 0.25s ease;
+  transition: background 0.25s ease, transform 0.25s ease;
+  transition: background 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease;
+  -webkit-transform: translate(-50%, 0) rotate(-45deg) translate(0, 100%) scaleY(0);
+          transform: translate(-50%, 0) rotate(-45deg) translate(0, 100%) scaleY(0);
+}
+.search {
+  height: 24px;
+  width: 24px;
+  border-radius: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.search__glass {
+  border-radius: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border: 4px solid #aaa;
+  -webkit-transition: border-color 0.25s ease, -webkit-transform 0.25s ease;
+  transition: border-color 0.25s ease, -webkit-transform 0.25s ease;
+  transition: border-color 0.25s ease, transform 0.25s ease;
+  transition: border-color 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease;
+  -webkit-transform: translate(-10%, -10%);
+          transform: translate(-10%, -10%);
+}
+.search__glass:after {
+  content: '';
+  position: absolute;
+  height: 12px;
+  top: 50%;
+  left: 50%;
+  background: #aaa;
+  -webkit-transition: background 0.25s ease, -webkit-transform 0.25s ease;
+  transition: background 0.25s ease, -webkit-transform 0.25s ease;
+  transition: background 0.25s ease, transform 0.25s ease;
+  transition: background 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease;
+  width: 4px;
+  -webkit-transform-origin: top center;
+          transform-origin: top center;
+  -webkit-transform: translate(-50%, 0) rotate(-45deg) translate(0, 95%) scaleY(1);
+          transform: translate(-50%, 0) rotate(-45deg) translate(0, 95%) scaleY(1);
+  border-radius: 0 0 2px 2px;
+}
+.search__prongs {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  -webkit-animation: rotate 1s infinite linear;
+          animation: rotate 1s infinite linear;
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+.search__prongs > div:nth-of-type(1) {
+  height: 2px;
+  width: 2px;
+  background: #222;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(36deg) translate(0, 10px);
+          transform: translate(-50%, -50%) rotate(36deg) translate(0, 10px);
+}
+.search__prongs > div:nth-of-type(2) {
+  height: 2px;
+  width: 2px;
+  background: #222;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(72deg) translate(0, 10px);
+          transform: translate(-50%, -50%) rotate(72deg) translate(0, 10px);
+}
+.search__prongs > div:nth-of-type(3) {
+  height: 2px;
+  width: 2px;
+  background: #222;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(108deg) translate(0, 10px);
+          transform: translate(-50%, -50%) rotate(108deg) translate(0, 10px);
+}
+.search__prongs > div:nth-of-type(4) {
+  height: 2px;
+  width: 2px;
+  background: #222;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(144deg) translate(0, 10px);
+          transform: translate(-50%, -50%) rotate(144deg) translate(0, 10px);
+}
+.search__prongs > div:nth-of-type(5) {
+  height: 2px;
+  width: 2px;
+  background: #222;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(180deg) translate(0, 10px);
+          transform: translate(-50%, -50%) rotate(180deg) translate(0, 10px);
+}
+.search__prongs > div:nth-of-type(6) {
+  height: 2px;
+  width: 2px;
+  background: #222;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(216deg) translate(0, 10px);
+          transform: translate(-50%, -50%) rotate(216deg) translate(0, 10px);
+}
+.search__prongs > div:nth-of-type(7) {
+  height: 2px;
+  width: 2px;
+  background: #222;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(252deg) translate(0, 10px);
+          transform: translate(-50%, -50%) rotate(252deg) translate(0, 10px);
+}
+.search__prongs > div:nth-of-type(8) {
+  height: 2px;
+  width: 2px;
+  background: #222;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(288deg) translate(0, 10px);
+          transform: translate(-50%, -50%) rotate(288deg) translate(0, 10px);
+}
+.search__prongs > div:nth-of-type(9) {
+  height: 2px;
+  width: 2px;
+  background: #222;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(324deg) translate(0, 10px);
+          transform: translate(-50%, -50%) rotate(324deg) translate(0, 10px);
+}
+.search__prongs > div:nth-of-type(10) {
+  height: 2px;
+  width: 2px;
+  background: #222;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(360deg) translate(0, 10px);
+          transform: translate(-50%, -50%) rotate(360deg) translate(0, 10px);
+}
+#app {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  min-height: 100vh;
+}
+.colors {
+  min-height: 250px;
+  display: grid;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+  grid-template-columns: repeat(3, auto);
+  grid-gap: 4px;
+  -webkit-transition: opacity 0.25s ease, -webkit-filter 0.25s ease;
+  transition: opacity 0.25s ease, -webkit-filter 0.25s ease;
+  transition: opacity 0.25s ease, filter 0.25s ease;
+  transition: opacity 0.25s ease, filter 0.25s ease, -webkit-filter 0.25s ease;
+  position: relative;
+}
+.colors:empty {
+  min-height: 0;
+}
+.colors--searching {
+  -webkit-filter: grayscale(1);
+          filter: grayscale(1);
+}
+.color {
+  background-color: var(--color);
+  position: relative;
+  height: 100px;
+  width: 100px;
+  cursor: pointer;
+  overflow: hidden;
+  text-transform: uppercase;
+  -webkit-transition: -webkit-transform 0.1s ease;
+  transition: -webkit-transform 0.1s ease;
+  transition: transform 0.1s ease;
+  transition: transform 0.1s ease, -webkit-transform 0.1s ease;
+  border-radius: 10px;
+}
+.color:hover {
+  -webkit-transform: scale(0.9);
+          transform: scale(0.9);
+}
+.color__close {
+  cursor: pointer;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  height: 44px;
+  border: 0;
+  background: transparent;
+  width: 44px;
+}
+.color__close svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 30px;
+  height: 30px;
+}
+.color__close svg path {
+  fill: #fff;
+}
+.color--selected {
+  border-radius: 10px;
+  position: absolute;
+  color: #fff;
+  overflow: hidden;
+  background: var(--color);
+  opacity: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  font-weight: bold;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  -webkit-box-pack: end;
+          justify-content: flex-end;
+  -webkit-box-align: end;
+          align-items: flex-end;
+  padding: 1rem;
+  z-index: -1;
+  -webkit-clip-path: inset(calc(var(--t) * 1px) calc(var(--r) * 1px) calc(var(--b) * 1px) calc(var(--l) * 1px));
+  clip-path: inset(calc(var(--t) * 1px) calc(var(--r) * 1px) calc(var(--b) * 1px) calc(var(--l) * 1px));
+}
+.color--selected a,
+.color--selected button {
+  color: #fff;
+}
+.color--selected-dark {
+  color: #111;
+}
+.color--selected-dark a,
+.color--selected-dark button {
+  color: #111;
+}
+.color--selected-dark svg path {
+  fill: #111;
+}
+.img,
+img {
+  border-radius: 10px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  -webkit-animation: fadeIn 0.25s ease;
+          animation: fadeIn 0.25s ease;
+  z-index: -1;
+}
+.img {
+  opacity: 0;
+}
+.info {
+  cursor: pointer;
+  padding: 0.5rem 0.5rem 0.5rem;
+  text-align: right;
+  font-size: 16px;
+  font-family: sans-serif;
+  background: rgba(var(--red), var(--green), var(--blue), var(--alpha, 0));
+  -webkit-transition: background 0.25s ease;
+  transition: background 0.25s ease;
+  border: 0;
+  font-weight: bold;
+  display: inline-block;
+}
+.info:hover {
+  --alpha: 1;
+}
+.info:hover ~ .img {
+  --alpha: 0;
+}
+.img:after {
+  content: '';
+  background: rgba(var(--red), var(--green), var(--blue), var(--alpha, 0.75));
+  position: absolute;
+  -webkit-transition: background 0.25s ease;
+  transition: background 0.25s ease;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.input-invisible {
+  position: fixed;
+  top: 0;
+  left: 100%;
+}
+@-webkit-keyframes rotate {
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes rotate {
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+}
\ No newline at end of file
diff --git a/color-search-engine-w-react-gsap/license.txt b/color-search-engine-w-react-gsap/license.txt
new file mode 100644
index 0000000..b3f8f54
--- /dev/null
+++ b/color-search-engine-w-react-gsap/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Jhey (https://codepen.io/jh3y/pen/PoNWLKp)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/color-search-engine-w-react-gsap/src/index.pug b/color-search-engine-w-react-gsap/src/index.pug
new file mode 100644
index 0000000..4b9f0fe
--- /dev/null
+++ b/color-search-engine-w-react-gsap/src/index.pug
@@ -0,0 +1 @@
+#app
\ No newline at end of file
diff --git a/color-search-engine-w-react-gsap/src/script.babel b/color-search-engine-w-react-gsap/src/script.babel
new file mode 100644
index 0000000..be9128a
--- /dev/null
+++ b/color-search-engine-w-react-gsap/src/script.babel
@@ -0,0 +1,291 @@
+const { React, ReactDOM, gsap } = window
+const { useEffect, useState, useRef, useReducer } = React
+const { render } = ReactDOM
+const rootNode = document.getElementById('app')
+
+const ANIM_SPEED = 0.25
+
+const initialState = {
+  dataSet: undefined,
+  searchTime: 0,
+  searching: false,
+  keyword: undefined,
+}
+const ACTIONS = {
+  SEARCH_NEW: 'SEARCH_NEW',
+  SEARCH_RESULTS: 'SEARCH_RESULTS',
+  COPY: 'COPY',
+}
+
+const colorSearchReducer = (state, action) => {
+  switch (action.type) {
+    case ACTIONS.SEARCH_NEW:
+      return {
+        searching: true,
+        searchTime: Date.now(),
+        dataSet: state.dataSet,
+        keyword: action.keyword,
+      }
+    case ACTIONS.SEARCH_RESULTS:
+      return { searching: false, searchTime: null, dataSet: action.data }
+    case ACTIONS.COPY:
+      return {
+        searching: false,
+        searchTime: null,
+        dataSet: state.dataSet.map((c) => ({
+          ...c,
+          copiedHsl: c.color.hsl === action.color,
+          copiedHex: c.color.hex === action.color,
+          copiedRgb:
+            `rgb(${c.color.rgb.r}, ${c.color.rgb.g}, ${c.color.rgb.b})` ===
+            action.color,
+        })),
+      }
+    default:
+      return state
+  }
+}
+const URL = 'https://culr.netlify.app/.netlify/functions/culr'
+const useColorSearch = () => {
+  const searchResults = useRef(null)
+  const [{ searchTime, searching, dataSet, keyword }, dispatch] = useReducer(
+    colorSearchReducer,
+    initialState
+  )
+  const grabImages = async (keyword) => {
+    if (!keyword) return
+    const data = await (await (await fetch(`${URL}/?search=${keyword}`)).json())
+      .images
+    dispatch({ type: ACTIONS.SEARCH_RESULTS, data })
+  }
+  useEffect(() => {
+    grabImages(keyword)
+  }, [searchTime])
+
+  const search = async (keyword) => {
+    if (!keyword) return
+    searchResults.current = []
+    dispatch({ type: ACTIONS.SEARCH_NEW, keyword })
+  }
+
+  const copy = (color) => {
+    // Copy to clipboard
+    const input = document.createElement('input')
+    input.value = color
+    document.body.appendChild(input)
+    input.select()
+    document.execCommand('copy')
+    input.remove()
+    dispatch({ type: ACTIONS.COPY, color })
+  }
+  return [dataSet, searching, search, copy]
+}
+
+const App = () => {
+  const [keyword, setKeyword] = useState('')
+  const invisiput = useRef(null)
+  const colorsRef = useRef(null)
+  const [selected, setSelected] = useState(null)
+  const selectedRef = useRef(null)
+  const selectedImageRef = useRef(null)
+  const colorRef = useRef(null)
+  const formRef = useRef(null)
+  const [data, searching, search, copy] = useColorSearch()
+
+  const unset = () => {
+    setSelected(null)
+    search(keyword)
+  }
+  const onSubmit = (e) => {
+    e.preventDefault()
+    if (selected) {
+      closeSelected(unset)
+    } else {
+      unset()
+    }
+  }
+
+  const copyToClipboard = (color) => {
+    invisiput.current.value = color
+    invisiput.current.select()
+    document.execCommand('copy')
+    copy(color)
+  }
+
+  useEffect(() => {
+    if (selected) {
+      const colorEl = colorsRef.current.children[selected.index]
+      const { top, left, bottom, right } = colorEl.getBoundingClientRect()
+      const {
+        top: containerTop,
+        left: containerLeft,
+        right: containerRight,
+        bottom: containerBottom,
+      } = colorsRef.current.getBoundingClientRect()
+
+      const colorPos = {
+        top: top - containerTop,
+        left: left - containerLeft,
+        bottom: containerBottom - bottom,
+        right: containerRight - right,
+      }
+      colorRef.current = {
+        pos: colorPos,
+      }
+      const onStart = () => {
+        gsap.set(selectedRef.current, {
+          opacity: 1,
+          '--color': selected.data.color.hex,
+          '--red': selected.data.color.rgb.r,
+          '--green': selected.data.color.rgb.g,
+          '--blue': selected.data.color.rgb.b,
+          '--t': colorPos.top,
+          '--r': colorPos.right,
+          '--b': colorPos.bottom,
+          '--l': colorPos.left,
+          zIndex: 2,
+        })
+      }
+      gsap
+        .timeline({ onStart })
+        .to(selectedRef.current, {
+          duration: ANIM_SPEED,
+          '--t': -10,
+          '--r': -10,
+          '--b': -10,
+          '--l': -10,
+        })
+        .to(selectedImageRef.current, {
+          duration: ANIM_SPEED,
+          opacity: 1,
+        })
+    }
+  }, [selected])
+
+  const closeSelected = (cb) => {
+    const colorPos = colorRef.current.pos
+    const onComplete = () => {
+      gsap.set(selectedRef.current, { opacity: 0, zIndex: -1 })
+      if (cb && typeof cb === 'function') {
+        cb()
+      }
+    }
+    gsap
+      .timeline({ onComplete })
+      .to(selectedImageRef.current, {
+        duration: ANIM_SPEED / 2,
+        opacity: 0,
+      })
+      .to(selectedRef.current, {
+        duration: ANIM_SPEED / 2,
+        '--t': colorPos.top,
+        '--r': colorPos.right,
+        '--b': colorPos.bottom,
+        '--l': colorPos.left,
+      })
+  }
+
+  return (
+    <div className="color-search">
+      <input ref={invisiput} className="input-invisible" />
+      <form ref={formRef} onSubmit={onSubmit} className="input-container">
+        <input
+          value={keyword}
+          disabled={searching}
+          onChange={(e) => setKeyword(e.target.value)}
+          placeholder="Search for a color"
+        />
+        <button
+          className="input-container__button"
+          role="button"
+          disabled={searching}
+          onClick={onSubmit}>
+          <div className="search">
+            <div className="search__glass" />
+            <div className="search__prongs">
+              {new Array(10).fill().map((d, i) => (
+                <div key={`loader-prong--${i}`} />
+              ))}
+            </div>
+          </div>
+        </button>
+      </form>
+      <div
+        ref={colorsRef}
+        className={`colors ${searching ? 'colors--searching' : ''}`}>
+        {data &&
+          data.length !== 0 &&
+          data.map((s, index) => (
+            <div
+              key={`color--${index}`}
+              className="color"
+              style={{
+                '--color': s.color.hex,
+              }}
+              onClick={() => setSelected({ index, data: data[index] })}></div>
+          ))}
+        {data && data.length !== 0 && selected && (
+          <div
+            ref={selectedRef}
+            className={`color--selected ${
+              selected.data.color.dark ? 'color--selected-dark' : ''
+            }`}>
+            <button className="color__close" onClick={closeSelected}>
+              <svg viewBox="0 0 24 24">
+                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+              </svg>
+            </button>
+            <button
+              onClick={() => copyToClipboard(selected.data.color.hsl)}
+              className="info">
+              {data && data[selected.index] && data[selected.index].copiedHsl
+                ? 'COPIED!'
+                : selected.data.color.hsl}
+            </button>
+            <button
+              onClick={() => copyToClipboard(selected.data.color.hex)}
+              className="info">
+              {data && data[selected.index] && data[selected.index].copiedHex
+                ? 'COPIED!'
+                : selected.data.color.hex}
+            </button>
+            <button
+              onClick={() => copyToClipboard(selected.data.color.rgb.label)}
+              className="info">
+              {data && data[selected.index] && data[selected.index].copiedRgb
+                ? 'COPIED!'
+                : selected.data.color.rgb.label}
+            </button>
+            <div className="info">
+              Photo by{' '}
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href={`https://unsplash.com/@${selected.data.user.username}?utm_source=color-image-search&utm_medium=referral`}>
+                {selected.data.user.name}
+              </a>{' '}
+              on{' '}
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://unsplash.com/?utm_source=color-image-search&utm_medium=referral">
+                Unsplash
+              </a>
+            </div>
+            <div ref={selectedImageRef} className="img">
+              <img
+                className="image--loading"
+                key={selected.data.id}
+                alt={selected.data.alt_description}
+                src={selected.data.urls.regular}
+              />
+            </div>
+          </div>
+        )}
+        {data && data.length === 0 && <h1>No results! 😭</h1>}
+      </div>
+    </div>
+  )
+}
+const ROOT = document.querySelector('#app')
+render(<App />, ROOT)
diff --git a/color-search-engine-w-react-gsap/src/style.styl b/color-search-engine-w-react-gsap/src/style.styl
new file mode 100644
index 0000000..95a918f
--- /dev/null
+++ b/color-search-engine-w-react-gsap/src/style.styl
@@ -0,0 +1,302 @@
+*
+  box-sizing border-box
+
+body
+  margin 0
+  padding 0
+  overflow-x hidden
+  font-family sans-serif
+
+.input-container
+  display inline-grid
+  grid-template-columns auto 60px
+  margin 0
+  height 60px
+  margin 1rem 0
+  width 100%
+
+  &:hover
+    [disabled]
+      border-color #ddd
+
+    input
+      border-color #111
+
+      ~ button
+        border-color #111
+
+        .search__glass
+          border-color #111
+
+          &:after
+            background #111
+
+input
+  box-sizing border-box
+  cursor pointer
+  padding 0 24px
+  font-size 18px
+  border 2px solid #aaa
+  border-radius 10px 0 0 10px
+  outline transparent
+  transition border-color .25s ease, color .25s ease
+
+  &::placeholder
+    color #aaa
+
+
+  &:hover
+  &:active
+  &:focus
+    border-color #111
+
+    ~ button
+      border-color #111
+
+      .search__glass
+        border-color #111
+        transition border-color 0.25s ease
+
+        &:after
+          background #111
+          transition background 0.25s ease
+
+  &[disabled]
+  &:hover[disabled]
+    border-color #ddd
+    color #ddd
+
+    ~ button
+      border-color #ddd
+
+      .search__glass
+        border-color transparent
+
+.input-container__button
+  cursor pointer
+  width 60px
+  outline transparent
+  border-radius 0 10px 10px 0
+  position relative
+  border 2px solid #aaa
+  border-left-width 0
+  transition border-color 0.25s ease
+  background transparent
+
+  &:hover[disabled] .search__glass
+    border-color transparent
+
+  &[disabled] .search__prongs
+    opacity 1
+    transition opacity .25s .25s ease
+
+  &[disabled] .search__glass
+    transform translate(0, 0)
+    border-color transparent
+    transition border-color 0.25s ease, transform 0.25s ease
+
+  &[disabled] .search__glass:after
+    background transparent
+    transition background 0.25s ease, transform 0.25s ease
+    transform translate(-50%, 0) rotate(-45deg) translate(0, 100%) scaleY(0)
+
+.search
+  height 24px
+  width 24px
+  border-radius 100%
+  position absolute
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+
+  &__glass
+    border-radius 100%
+    position absolute
+    top 0
+    right 0
+    bottom 0
+    left 0
+    border 4px solid #aaa
+    transition border-color 0.25s ease, transform 0.25s ease
+    transform translate(-10%, -10%)
+
+    &:after
+      content ''
+      position absolute
+      height 12px
+      top 50%
+      left 50%
+      background #aaa
+      transition background 0.25s ease, transform 0.25s ease
+      width 4px
+      transform-origin top center
+      transform translate(-50%, 0) rotate(-45deg) translate(0, 95%) scaleY(1)
+      border-radius 0 0 2px 2px
+
+  &__prongs
+    position absolute
+    top 0
+    right 0
+    bottom 0
+    left 0
+    animation rotate 1s infinite linear
+    opacity 0
+    transition opacity .25s ease
+
+    > div
+      for $prong in (1..10)
+        &:nth-of-type({$prong})
+          height 2px
+          width 2px
+          background #222
+          position absolute
+          top 50%
+          left 50%
+          transform translate(-50%, -50%) rotate($prong * 36deg) translate(0, 10px)
+
+@keyframes rotate
+  to
+    transform rotate(360deg)
+
+#app
+  display flex
+  justify-content center
+  align-items center
+  min-height 100vh
+
+.colors
+  min-height 250px
+  display grid
+  align-items center
+  justify-content center
+  grid-template-columns repeat(3, auto)
+  grid-gap 4px
+  transition opacity .25s ease, filter .25s ease
+  position relative
+
+  &:empty
+    min-height 0
+
+  &--searching
+    filter grayscale(1)
+
+.color
+  background-color var(--color)
+  position relative
+  height 100px
+  width 100px
+  cursor pointer
+  overflow hidden
+  text-transform uppercase
+  transition transform 0.1s ease
+  border-radius 10px
+
+  &:hover
+    transform scale(0.9)
+
+  &__close
+    cursor pointer
+    position absolute
+    top 5px
+    right 5px
+    height 44px
+    border 0
+    background transparent
+    width 44px
+    svg
+      position absolute
+      top 50%
+      left 50%
+      transform translate(-50%, -50%)
+      width 30px
+      height 30px
+      path
+        fill #fff
+
+  &--selected
+    border-radius 10px
+    position absolute
+    color #FFFFFF
+    overflow hidden
+    background var(--color)
+    opacity 0
+    top 0
+    right 0
+    bottom 0
+    left 0
+    font-weight bold
+    display flex
+    flex-direction column
+    justify-content flex-end
+    align-items flex-end
+    padding 1rem
+    z-index -1
+    $clip = inset(calc(var(--t) * 1px) calc(var(--r) * 1px) calc(var(--b) * 1px) calc(var(--l) * 1px))
+    -webkit-clip-path $clip
+    clip-path $clip
+
+    a
+    button
+      color #FFF
+
+
+    &-dark
+      color #111
+
+      a
+      button
+        color #111
+
+      svg path
+        fill #111
+
+.img
+img
+  border-radius 10px
+  object-fit cover
+  position absolute
+  top 0
+  width 100%
+  height 100%
+  left 0
+  animation fadeIn 0.25s ease
+  z-index -1
+
+.img
+  opacity 0
+
+.info
+  cursor pointer
+  padding 0.5rem 0.5rem 0.5rem
+  text-align right
+  font-size 16px
+  font-family sans-serif
+  background 'rgba(%s, %s, %s, %s)' % (var(--red) var(--green) var(--blue) var(--alpha, 0))
+  transition background 0.25s ease
+  border 0
+  font-weight bold
+  display inline-block
+
+  &:hover
+    --alpha 1
+    ~ .img
+      --alpha 0
+
+@keyframes fadeIn
+  from
+    opacity 0
+
+.img:after
+  content ''
+  background 'rgba(%s, %s, %s, %s)' % (var(--red) var(--green) var(--blue) var(--alpha, 0.75))
+  position absolute
+  transition background 0.25s ease
+  top 0
+  right 0
+  bottom 0
+  left 0
+
+.input-invisible
+  position fixed
+  top 0
+  left 100%
diff --git a/color-standards-and-color-nomenclature/LICENSE.txt b/color-standards-and-color-nomenclature/LICENSE.txt
new file mode 100644
index 0000000..021960e
--- /dev/null
+++ b/color-standards-and-color-nomenclature/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 David Aerne (https://codepen.io/meodai/pen/abGjoLq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/color-standards-and-color-nomenclature/README.md b/color-standards-and-color-nomenclature/README.md
new file mode 100644
index 0000000..8fccc2e
--- /dev/null
+++ b/color-standards-and-color-nomenclature/README.md
@@ -0,0 +1,4 @@
+# Color Standards and Color Nomenclature
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/meodai/pen/abGjoLq](https://codepen.io/meodai/pen/abGjoLq).
+
diff --git a/color-standards-and-color-nomenclature/dist/index.html b/color-standards-and-color-nomenclature/dist/index.html
new file mode 100644
index 0000000..fc13518
--- /dev/null
+++ b/color-standards-and-color-nomenclature/dist/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Color Standards and Color Nomenclature</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- https://github.com/davo/Color-Standards-and-Color-Nomenclature -->
+
+<div class="head">
+<h1 class="title">Color Standards and Color Nomenclature</h1>
+<h2 class="title title--sub">Robert Ridgway</h2>
+
+<p class="lead">Color Standards and Color Nomenclature, by Robert Ridgway (1850-1929) was published in Washignton, DC in 1912, it's part of the public domain in the USA. In August 31, 2020 was added to the Gutenberg Project.
+
+The book full title "Color Standards and Color Nomenclature: With fifty-three colored plates and eleven hundred and fifteen named colors" clearly informs about the magnitud and spectrum of pigments, naming conventions and categories embedded in the book.</p>
+</div>
+
+<menu class="menu">
+  <li>
+    <button 
+      role="checkbox"
+      data-tabs
+    >
+      <span>Tabulated</span>
+    </button>
+  </li>
+  <li>
+    <button 
+      role="checkbox"
+      data-shuffle-size data-view-grid
+    >
+      <span>Column</span>
+    </button>
+  </li>
+</menu>
+
+<div id="app" class="wrap">
+  
+</div>
+<div class="foot">
+<a class="link" href="https://github.com/davo/Color-Standards-and-Color-Nomenclature">Source</a>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/color-standards-and-color-nomenclature/dist/script.js b/color-standards-and-color-nomenclature/dist/script.js
new file mode 100644
index 0000000..8089188
--- /dev/null
+++ b/color-standards-and-color-nomenclature/dist/script.js
@@ -0,0 +1,100 @@
+// https://github.com/davo/Color-Standards-and-Color-Nomenclature
+console.clear();
+
+const $a = document.querySelector('#app');
+
+const bestContrst = hexColor => {
+  return chroma.contrast(hexColor, '#fff') > 4.5 ? '#fff' : '#000';
+};
+
+const plates = {};
+
+fetch(
+'https://api.color.pizza/v1/?list=ridgway').
+then(
+d => d.json()).
+then(dd => {
+  const d = dd.colors;
+
+  let data = d.sort((a, b) => a.meta.parsed.originalPosition < b.meta.parsed.originalPosition ? -1 : 1);
+
+  data.forEach((c, i) => {
+    if (!plates.hasOwnProperty(c.meta.plate)) {
+      plates[c.meta.plate] = [];
+    }
+
+    plates[c.meta.plate].push(c);
+  });
+
+  const keys = Object.keys(plates);
+
+  let j = 0;
+  let ii = 0;
+
+  const parentRnd = () => {
+    $a.style = d.map((c, i) => {
+      return `
+      --rnd-${i}-a: ${Math.random()};
+      --rnd-${i}-b: ${Math.random()};
+    `;
+    }).join('');
+  };
+
+  parentRnd();
+
+  document.querySelector('[data-shuffle-size]').addEventListener('click', () => parentRnd());
+
+  keys.forEach(plate => {
+    if (j++ % 2) {
+      //plates[plate].reverse();
+    }
+
+    const $plate = Object.assign(
+    document.createElement('section'),
+    {
+      className: 'plate' });
+
+
+
+    const $title = Object.assign(document.createElement('h1'), {
+      innerHTML: plate,
+      className: 'plate__title' });
+
+
+    $plate.appendChild($title);
+
+    plates[plate].forEach((c, i) => {
+      const $color = Object.assign(
+      document.createElement('aside'),
+      {
+        style: `
+          --cd: ${c.hex};
+          --cc: ${bestContrst(c.hex)};
+          --rnd: var(--rnd-${ii}-a);
+          --rnd2: var(--rnd-${ii}-b);
+        `,
+        className: 'plate__color color',
+        innerHTML: `
+          <img src="https://raw.githubusercontent.com/davo/Color-Standards-and-Color-Nomenclature/main/src/plate_swatches/${c.meta.image}" />
+          <b>${c.name}</b>
+        ` });
+
+      ii++;
+
+      $plate.appendChild($color);
+    });
+
+    $a.appendChild($plate);
+  });
+});
+
+
+document.querySelector('[data-tabs]').addEventListener('click', e => {
+  e.target.toggleAttribute('aria-checked');
+  $a.classList.toggle('is-tabbed');
+});
+
+document.querySelector('[data-view-grid]').addEventListener('click', e => {
+  e.target.toggleAttribute('aria-checked');
+  $a.classList.toggle('is-stack');
+});
\ No newline at end of file
diff --git a/color-standards-and-color-nomenclature/dist/style.css b/color-standards-and-color-nomenclature/dist/style.css
new file mode 100644
index 0000000..5d57fa6
--- /dev/null
+++ b/color-standards-and-color-nomenclature/dist/style.css
@@ -0,0 +1,212 @@
+@import url("https://fonts.googleapis.com/css2?family=Lustria");
+:root {
+  font-size: clamp(13px, 4vw, 30px);
+  font-family: serif;
+  font-family: "Lustria", serif;
+  --bgc: #f1ede8;
+  --tc: #2b2b2b;
+  color: var(--tc);
+  background: var(--bgc);
+  padding-bottom: 2em;
+}
+
+body::before {
+  content: "";
+  background-image: url(https://assets.codepen.io/102565/paper-512x512.jpg);
+  position: fixed;
+  inset: 0;
+  opacity: 0.5;
+  z-index: -1;
+}
+
+.head,
+.foot {
+  max-width: 40rem;
+  padding: 1rem;
+  margin: 0 auto;
+}
+
+.foot {
+  text-align: center;
+}
+
+.title {
+  font-size: 1.6rem;
+  max-width: 14rem;
+  line-height: 1.05;
+  letter-spacing: -0.05em;
+  margin: 1em 0 0 0;
+}
+.title--sub {
+  font-size: 0.7em;
+}
+
+.lead {
+  font-size: 0.47rem;
+  max-width: 22rem;
+  line-height: 1.6;
+  margin: 1rem 0 0 auto;
+  -moz-column-count: 2;
+       column-count: 2;
+  -moz-column-gap: 2em;
+       column-gap: 2em;
+}
+@media (max-width: 50em) {
+  .lead {
+    max-width: 100%;
+  }
+}
+@media (max-width: 35em) {
+  .lead {
+    -moz-column-count: 1;
+         column-count: 1;
+    -moz-column-gap: 0;
+         column-gap: 0;
+    font-size: 1rem;
+  }
+}
+
+.menu {
+  list-style: none;
+  padding: 0 1rem;
+  margin: 2rem 0 0;
+  display: flex;
+}
+
+button {
+  border: none;
+  background: none;
+  font: inherit;
+  cursor: pointer;
+  font-size: 0.47rem;
+}
+button[aria-checked] {
+  text-decoration: underline;
+}
+button span {
+  pointer-events: none;
+}
+
+.wrap {
+  padding: 4rem;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  padding: 1rem;
+  max-width: 34rem;
+  margin: 0 auto;
+}
+
+.wrap.is-stack {
+  display: block;
+  max-width: 20rem;
+  margin-top: 3rem;
+}
+.wrap.is-stack .plate {
+  padding: 0 2rem;
+  display: flex;
+  flex-direction: column;
+}
+.wrap.is-stack .plate:nth-child(2n) {
+  flex-direction: column-reverse;
+}
+.wrap.is-stack .plate__color {
+  height: calc(3rem + var(--rnd) * 7rem);
+  transform: scale(1) scaleX(calc(.95 + var(--rnd) * .05)) rotate(calc((-.5 + var(--rnd2)) * -4deg)) translateX(calc((-.5 + var(--rnd2)) * 15%)) translateY(calc((-.5 + var(--rnd)) * 50%));
+}
+.wrap.is-stack .plate__color:hover {
+  z-index: 1;
+}
+
+.plate {
+  gap: 1px;
+  position: relative;
+  padding: 2rem;
+  /*background: beige;
+  background: var(--bgc);*/
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.plate__color {
+  flex: 1 1 auto;
+  height: calc(0.1rem + var(--rnd) * 1rem);
+  box-shadow: 0 0 0 1px var(--bgc);
+  transform: scale(1) scaleX(calc(.9 + var(--rnd) * .1)) skewX(calc((-.5 + var(--rnd)) * 5deg)) rotate(calc((-.5 + var(--rnd2)) * -10deg)) translateX(calc((-.5 + var(--rnd2)) * 25%)) translateY(calc((-.5 + var(--rnd)) * 100%));
+  margin-top: 1px;
+  transition: 300ms height, 400ms transform;
+  will-change: height, transform;
+}
+.plate__color:hover {
+  height: 4rem;
+  transform: scale(1.1);
+  z-index: 1;
+}
+
+.wrap.is-tabbed .plate {
+  padding: 1rem;
+}
+.wrap.is-tabbed .plate__color {
+  height: calc(0.75rem + var(--rnd) * 0.25rem);
+  box-shadow: 0 0 0 1px var(--bgc);
+  transform: scale(1) scaleX(calc(.9 + var(--rnd) * .1)) rotate(calc((-.5 + var(--rnd2)) * -2deg)) translateX(calc((-.5 + var(--rnd2)) * 5%));
+}
+
+.wrap.is-stack.is-tabbed .plate__color {
+  height: calc(3rem + var(--rnd) * 7rem);
+}
+
+.plate__title {
+  position: absolute;
+  z-index: 1;
+  bottom: 2rem;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 3vw;
+  padding: 0.5em;
+  color: var(--bgc);
+  pointer-events: none;
+  letter-spacing: -0.05em;
+}
+
+.plate:hover .plate__title {
+  opacity: 0;
+}
+
+.color {
+  position: relative;
+  width: 100%;
+  background: var(--cd);
+  overflow: hidden;
+}
+.color img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.color b {
+  display: block;
+  position: absolute;
+  z-index: 2;
+  font-size: 0.4em;
+  line-height: 1.1;
+  padding: 1em;
+  bottom: 0;
+  opacity: 0;
+  transform: translateY(-3em);
+  color: var(--cc);
+}
+.color:hover b {
+  opacity: 1;
+  transform: translateY(0);
+  transition: 450ms opacity linear 100ms, 400ms transform cubic-bezier(0.3, 0.7, 0, 1) 100ms;
+}
+
+.color:hover {
+  height: 4rem;
+}
\ No newline at end of file
diff --git a/color-standards-and-color-nomenclature/src/index.html b/color-standards-and-color-nomenclature/src/index.html
new file mode 100644
index 0000000..7533e9d
--- /dev/null
+++ b/color-standards-and-color-nomenclature/src/index.html
@@ -0,0 +1,36 @@
+<!-- https://github.com/davo/Color-Standards-and-Color-Nomenclature -->
+
+<div class="head">
+<h1 class="title">Color Standards and Color Nomenclature</h1>
+<h2 class="title title--sub">Robert Ridgway</h2>
+
+<p class="lead">Color Standards and Color Nomenclature, by Robert Ridgway (1850-1929) was published in Washignton, DC in 1912, it's part of the public domain in the USA. In August 31, 2020 was added to the Gutenberg Project.
+
+The book full title "Color Standards and Color Nomenclature: With fifty-three colored plates and eleven hundred and fifteen named colors" clearly informs about the magnitud and spectrum of pigments, naming conventions and categories embedded in the book.</p>
+</div>
+
+<menu class="menu">
+  <li>
+    <button 
+      role="checkbox"
+      data-tabs
+    >
+      <span>Tabulated</span>
+    </button>
+  </li>
+  <li>
+    <button 
+      role="checkbox"
+      data-shuffle-size data-view-grid
+    >
+      <span>Column</span>
+    </button>
+  </li>
+</menu>
+
+<div id="app" class="wrap">
+  
+</div>
+<div class="foot">
+<a class="link" href="https://github.com/davo/Color-Standards-and-Color-Nomenclature">Source</a>
+</div>
\ No newline at end of file
diff --git a/color-standards-and-color-nomenclature/src/script.js b/color-standards-and-color-nomenclature/src/script.js
new file mode 100644
index 0000000..328b80b
--- /dev/null
+++ b/color-standards-and-color-nomenclature/src/script.js
@@ -0,0 +1,100 @@
+// https://github.com/davo/Color-Standards-and-Color-Nomenclature
+console.clear();
+
+const $a = document.querySelector('#app');
+
+const bestContrst = (hexColor) => {
+  return chroma.contrast(hexColor, '#fff') > 4.5 ? '#fff' : '#000';
+}
+
+const plates = {};
+
+fetch(
+  'https://api.color.pizza/v1/?list=ridgway'
+).then(
+  d => d.json()
+).then(dd => {
+  const d = dd.colors;
+  
+  let data = d.sort((a,b) => a.meta.parsed.originalPosition < b.meta.parsed.originalPosition ? -1 : 1);
+  
+  data.forEach((c, i) => {
+    if (!plates.hasOwnProperty(c.meta.plate)) {
+      plates[c.meta.plate] = [];
+    }
+    
+    plates[c.meta.plate].push(c);
+  });
+  
+  const keys = Object.keys(plates);
+  
+  let j = 0;
+  let ii = 0;
+  
+  const parentRnd = () => {
+    $a.style = d.map((c,i) => {
+    return `
+      --rnd-${i}-a: ${Math.random()};
+      --rnd-${i}-b: ${Math.random()};
+    `
+    }).join('');
+  };
+  
+  parentRnd();
+  
+  document.querySelector('[data-shuffle-size]').addEventListener('click', () => parentRnd())
+  
+  keys.forEach(plate => {
+    if (j++%2) {
+      //plates[plate].reverse();
+    }
+    
+    const $plate = Object.assign(
+      document.createElement('section'),
+      {
+        className: 'plate'
+      }
+    );
+    
+    const $title = Object.assign(document.createElement('h1'), {
+      innerHTML: plate,
+      className: 'plate__title',
+    });
+    
+    $plate.appendChild($title);
+    
+    plates[plate].forEach((c, i) => {
+      const $color = Object.assign(
+        document.createElement('aside'), 
+        {
+        style: `
+          --cd: ${c.hex};
+          --cc: ${bestContrst(c.hex)};
+          --rnd: var(--rnd-${ii}-a);
+          --rnd2: var(--rnd-${ii}-b);
+        `,
+        className: 'plate__color color',
+        innerHTML: `
+          <img src="https://raw.githubusercontent.com/davo/Color-Standards-and-Color-Nomenclature/main/src/plate_swatches/${c.meta.image}" />
+          <b>${c.name}</b>
+        `
+      });
+      ii++;
+      
+      $plate.appendChild($color); 
+    })
+    
+    $a.appendChild($plate);
+  })
+});
+
+
+document.querySelector('[data-tabs]').addEventListener('click', e => {
+  e.target.toggleAttribute('aria-checked');
+  $a.classList.toggle('is-tabbed');
+});
+
+document.querySelector('[data-view-grid]').addEventListener('click', e => {
+  e.target.toggleAttribute('aria-checked');
+  $a.classList.toggle('is-stack');
+});
diff --git a/color-standards-and-color-nomenclature/src/style.scss b/color-standards-and-color-nomenclature/src/style.scss
new file mode 100644
index 0000000..d8d2b49
--- /dev/null
+++ b/color-standards-and-color-nomenclature/src/style.scss
@@ -0,0 +1,237 @@
+// https://github.com/davo/Color-Standards-and-Color-Nomenclature
+
+@import url('https://fonts.googleapis.com/css2?family=Lustria');
+
+:root {
+  font-size: clamp(13px, 4vw, 30px);
+  font-family: serif;
+  font-family: 'Lustria', serif;
+  --bgc: #f1ede8;
+  --tc: #2b2b2b;
+  
+  color: var(--tc);
+  background: var(--bgc);
+  
+
+  padding-bottom: 2em;
+}
+
+body::before {
+  content: '';
+  background-image: url(https://assets.codepen.io/102565/paper-512x512.jpg);
+  position: fixed;
+  inset: 0;
+  opacity: .5;
+  z-index: -1;
+}
+
+.head,
+.foot {
+  max-width: 40rem;
+  padding: 1rem;
+  margin: 0 auto;
+}
+
+.foot {
+  text-align: center;
+}
+
+.title {
+  font-size: 1.6rem;
+  max-width: 14rem;
+  line-height: 1.05;
+  letter-spacing: -0.05em;
+  margin: 1em 0 0 0;
+  &--sub {
+    font-size: .7em;
+  }
+}
+
+.lead {
+  font-size: .47rem;
+  max-width: 22rem;
+  line-height: 1.6;
+  margin: 1rem 0 0 auto;
+  column-count: 2;
+  column-gap: 2em;
+  
+  @media (max-width: 50em) {
+    max-width: 100%;
+  }
+  
+  
+  @media (max-width: 35em) {
+    column-count: 1;
+    column-gap: 0;
+    font-size: 1rem;
+  }
+}
+
+.menu {
+  list-style: none;
+  padding: 0 1rem;
+  margin: 2rem 0 0;
+  
+  display: flex;
+  //flex-direction: row-reverse;
+  //justify-content: center;
+}
+
+button {
+  border: none;
+  background: none;
+  font: inherit;
+  cursor: pointer;
+  font-size: 0.47rem;
+  
+  &[aria-checked] {
+    text-decoration: underline;
+  }
+  span {
+    pointer-events: none;
+  }
+}
+
+.wrap {
+  padding: 4rem;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  //grid-template-rows: masonry;
+  
+  //grid-auto-flow: column dense;
+  //grid-auto-flow: row dense;
+  //gap: .2rem;
+  padding: 1rem;
+  max-width: 34rem;
+  margin: 0 auto;
+}
+
+.wrap.is-stack {
+  display: block;
+  max-width: 20rem;
+  margin-top: 3rem;
+  
+  .plate {
+    padding: 0 2rem;
+    display: flex;
+    flex-direction: column;
+    &:nth-child(2n) {
+      flex-direction: column-reverse;
+      
+    }
+  }
+  
+  .plate__color {
+    height:  calc(3rem + var(--rnd) * 7rem);
+  transform: scale(1) scaleX(calc(.95 + var(--rnd) * .05)) rotate(calc((-.5 + var(--rnd2)) * -4deg)) translateX(calc((-.5 + var(--rnd2)) * 15%)) translateY(calc((-.5 + var(--rnd)) * 50%));
+    &:hover {
+      //height: 4rem;
+      //transform: scale(1.1);
+      z-index: 1;
+    }
+  }
+}
+
+.plate {
+  //height: 80vh;
+  //display: flex;
+  //flex-direction: column;
+  gap: 1px;
+  position: relative;
+  padding: 2rem;
+  /*background: beige;
+  background: var(--bgc);*/
+  height: fit-content;
+}
+
+.plate__color {
+  flex: 1 1 auto;
+  height:  calc(0.1rem + var(--rnd) * 1rem);
+  
+  box-shadow: 0 0 0 1px var(--bgc);
+  transform: scale(1) scaleX(calc(.9 + var(--rnd) * .1)) skewX(calc((-.5 + var(--rnd)) * 5deg)) rotate(calc((-.5 + var(--rnd2)) * -10deg)) translateX(calc((-.5 + var(--rnd2)) * 25%)) translateY(calc((-.5 + var(--rnd)) * 100%));
+  margin-top: 1px;
+  transition: 300ms height, 400ms transform;
+  will-change: height, transform;
+  &:hover {
+    height: 4rem;
+    transform: scale(1.1);
+    z-index: 1;
+  }
+}
+
+.wrap.is-tabbed {
+  .plate {
+    padding: 1rem;
+  }
+  .plate__color {
+    height:  calc(0.75rem + var(--rnd) * 0.25rem);
+  
+    box-shadow: 0 0 0 1px var(--bgc);
+    transform: scale(1) scaleX(calc(.9 + var(--rnd) * .1)) rotate(calc((-.5 + var(--rnd2)) * -2deg)) translateX(calc((-.5 + var(--rnd2)) * 5%));
+  }
+}
+
+.wrap.is-stack.is-tabbed .plate__color {
+    height:  calc(3rem + var(--rnd) * 7rem);
+}
+
+
+.plate__title {
+  position: absolute;
+  z-index: 1;
+  bottom: 2rem;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 3vw;
+  padding: .5em;
+  color: var(--bgc);
+  pointer-events: none;
+  letter-spacing: -0.05em;
+}
+
+.plate:hover .plate__title {
+  opacity: 0;
+}
+
+
+.color {
+  position: relative;
+  width: 100%;
+  background: var(--cd);
+  overflow: hidden;
+  
+  img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    object-fit: cover;
+  }
+  
+  b {
+    display: block;
+    position: absolute;
+    z-index: 2;
+    font-size: 0.4em;
+    line-height: 1.1;
+    padding: 1em;
+    bottom: 0;
+    opacity: 0;
+    transform: translateY(-3em);
+    color: var(--cc);
+  }
+  
+  &:hover b {
+    opacity: 1;
+    transform: translateY(0);
+    
+    transition: 450ms opacity linear 100ms, 400ms transform cubic-bezier(.3, .7, 0, 1) 100ms; 
+  }
+}
+
+.color:hover {
+  height: 4rem;
+}
\ No newline at end of file
diff --git a/color-wave/README.markdown b/color-wave/README.markdown
new file mode 100644
index 0000000..e6d740a
--- /dev/null
+++ b/color-wave/README.markdown
@@ -0,0 +1,5 @@
+# Color wave
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Mamboleoo/pen/dypZQGo](https://codepen.io/Mamboleoo/pen/dypZQGo).
+
+
diff --git a/color-wave/dist/index.html b/color-wave/dist/index.html
new file mode 100644
index 0000000..528edc1
--- /dev/null
+++ b/color-wave/dist/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Color wave</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg viewBox="0 0 921.5 600" preserveAspectRatio="xMidYMid slice">
+  <defs></defs>
+  <path d="M922.2-71.4c-13.43656-.412-26.48915,5.62324-35.99986,14.90046-14.855,13.16536-29.04824,42.71862-47.9996,46.90013-17.572,1.75686-29.56248-18.48017-40.00091-29.9-29.18831-35.737-40.50058-23.80184-63.99953,7.89994C717.36217-9.113,702.9969-3.10112,678.1999-18.80068c-9.80071-5.794-20.17021-13.15093-31.99991-13.29919-21.53446.34057-37.32314,19.99687-60,8.99916-23.38951-10.14357-39.21427-55.75048-67.99964-38.69961C498.937-51.89154,479.02251-12.143,458.20042-16.39949c-11.45371-3.33172-19.31009-13.99176-28.00056-21.50037C413.92368-52.97929,402.31529-44.67435,390.2-29.99949c-9.99742,11.65631-18.84148,25.89031-31.99977,34.29966-18.84346,10.84032-34.29633-12.23026-52.00044-15.59961-9.15219-2.33868-18.91.39229-27.99975,1.69967-13.97887,2.1049-26.77544-5.99233-40-8.90051-25.62086-6.35959-41.05658,16.23289-64,12.60093-25.66962-6.55755-37.99794-30.49476-68.00018-15.79995-11.469,5.43541-23.12182,12.3855-36,13.69907C38.95149-5.59716,16.01128-31.37117-5.8-49.9" fill="none" stroke="#e8505b" stroke-dasharray="8 5"/>
+  <path d="M922.2-56.3a56.94513,56.94513,0,0,0-36,12.60012c-14.53055,10.97908-29.409,37.51327-47.99959,38.70049-17.535-1.107-28.95878-21.385-40.00088-33.1-34.37177-42.28981-48.22773-1.69194-71.99957,23.8-15.17058,16.46925-30.61237,13.269-48.00013,2.49878C669.6424-16.81079,660.42445-23.07,650.2-23.5c-22.089-.35286-37.08827,26.6514-60,20.6-26.02393-7.27763-40.04983-64.55317-67.99962-53.8006-23.35574,11.24147-32.78865,42.10628-56,52.80116-15.69881,4.14511-25.8689-13.21158-36.00068-22.2-13.07129-13.02322-23.6025-12.90669-35.99967.90009C383.38367-13.56468,374.59275.985,362.20014,11.1001c-16.20165,13.09869-30.341-2.107-44.00021-10.90058-6.9496-4.44042-15.65447-7.58087-24-6.79922C287.71877-6.15244,280.66752-4.103,274.2-3.50006c-9.34789.98225-18.92261-2.18495-28-3.90008-20.23839-3.97656-34.479,6.7327-51.99982,14.10089C164.92935,19.50593,146.38282-18.809,118.2-17.10041c-12.61817.69626-23.98422,8.03261-36,11.20034C48.334,4.54672,20.14637-19.465-5.8-37.6" fill="none" stroke="#e8505b" stroke-dasharray="23 2"/>
+  <path d="M922.2-39.1c-14.04.007-28.65536,3.55258-39.99989,12.10028-15.13446,10.18256-31.53287,34.08971-51.99971,23-20.18208-10.4688-36.22226-50.58582-60-45.90088-24.44324,8.54316-32.33009,41.53223-56.0006,51.8003C691.84,10.00314,674.946-13.38164,654.20006-16.40042c-30.30464-2.485-50.05055,53.57238-80.00013,18.59989-12.61224-13.14236-28.55912-54.67817-47.99936-52.39994-21.39506,5.4936-35.01355,39.4101-52.0011,53.59978C445.478,28.28,433.26837-31.16834,406.20014-24.10063c-6.21795,2.33463-11.72848,8.10152-16,13.00081-8.98756,10.157-17.10208,22.42577-28,30.69989C345.88745,32.10033,330.93281,14.17158,318.2,5.09948,311.424.2022,302.69562-3.39677,294.2-2.49964c-10.55386,1.20262-21.23322,5.32248-32,4.39928-21.92555-2.15679-32.92833-.09792-51.99983,11.601-22.17142,13.86705-34.99359,13.9364-56.00005-2.50139C144.42533,3.7228,134.2838-4.7949,122.2-7.7999,110.18133-10.72681,97.77227-6.35379,86.2001-3.39974,73.25632-.18466,59.24117.43781,46.2-2.60024,27.78866-6.61468,11.108-16.39235-5.8-24.3" fill="none" stroke="#e8505b" stroke-dasharray="24 4"/>
+  <path d="M922.2-20c-13.47139.34546-27.77378,1.31331-39.99994,7.5001C869.3-6.75364,857.17355,4.80441,842.2002,3.60023c-32.05478-4.4394-48.32175-70.92042-84.00009-35.1995C741.7454-16.71348,728.32642,13.8032,702.20044,9.70061,686.0963,7.05175,673.82923-5.93151,658.2001-9.80031c-27.63938-4.53285-39.38884,31.47642-64.00025,36.89987-19.35218,1.91811-30.909-27.83129-40.0004-41.399-6.81777-10.14123-14.00345-26.14263-27.999-26.5011C508.5262-37.75549,493.90032-6.7464,482.19939,6.49932c-18.848,24.05407-30.18763,18.04535-47.99931-2.69994-6.48068-6.89065-13.84507-16.19935-24-16.89947C388.17237-11.05484,376.9236,25.904,354.1998,30.09958c-16.68629.90652-26.77985-16.40443-40.00012-23.89889A30.425,30.425,0,0,0,290.2,2.20054c-6.42219,1.68687-13.47888,4.18337-20,5.49942-6.34586,1.11247-13.60428,1.28065-20,2C233.76256,11.14753,219.69388,20.957,206.2002,29.60041c-14.98621,9.584-28.91052,10.919-44.00011.29889C143.543,17.35719,126.7344-3.37813,102.19981-1.99967,88.97134-1.261,75.51055,1.58574,62.2,1.09958,39.06822,1.05377,16.5136-5.58293-5.8-10.9" fill="none" stroke="#e8505b" stroke-dasharray="11 3"/>
+  <path d="M922.2,0c-14.06338.09731-30.64875-.88817-44.00129,3.10029-17.22254,5.03642-31.89948,11.14245-47.99864-.701-15.48757-9.81861-28.75382-35.19743-47.99964-35.29993-20.19241,3.19023-32.85851,27.04845-48.00086,39.2-15.14448,13.47626-31.46469,11.1713-47.99968,1.8C677.24652,3.15963,668.319-3.56059,658.2-5.9c-12.735-2.85113-23.69833,6.67925-32,15.10034-21.26136,21.9151-37.79119,45.50129-59.99972,8.69916-9.27461-12.65925-25.35869-55.04228-43.99977-48.79975-23.47008,10.80186-35.676,55.27641-60.00034,63.10053-11.96526,1.63545-20.587-9.72368-28.00027-17.4002C425.05632,4.62081,412.4924-9.21739,398.2.90066c-18.51621,12.87577-34.59938,46.18428-60,25.29869-10.35065-7.73741-19.22265-19.25883-32-23.09945-11.02464-2.809-21.92276,3.44256-32.0001,7.1C265.31047,13.40761,255.29442,14.54174,246.2,17c-20.787,5.17216-35.49059,23.5758-55.99966,29.10075-9.65377,2.25489-19.9811-1.32713-28.0002-6.70112C147.10587,29.3159,134.4417,15.094,118.2,6.7a61.37693,61.37693,0,0,0-20-5.79977C91.28146-.24289,3.3368.49577-5.8.3" fill="none" stroke="#f9d56e" stroke-dasharray="11 4"/>
+  <path d="M922.2,20c-18.63657-.37017-37.295-4.61473-56-3.19941-46.60907,4.571-57.07375-49.42844-88-36.30128C754.7686-7.69627,740.58087,27.43639,710.20014,21.59991c-14.65832-2.89374-27.302-11.76184-40-19.10024-29.50795-17.76954-45.44331,14.88327-64.00031,32.10063-23.52751,23.97605-35.67186,1.61463-48-18.90072C550.70834,4.359,538.83215-24.55594,522.20051-20.40054c-18.75053,7.88236-31.805,40.1063-48.00114,54.59986-29.90017,28.12966-43.25461-33.14483-71.99926-25.4C384.36845,15.36168,371.86555,41.69481,350.19983,33.7c-18.64965-7.26758-29.77446-32.55847-51.99969-29.90043C289.80867,5.28922,281.86545,10.22493,274.2,13.7c-7.53853,3.435-16.13347,6.04715-24,8.59993-17.72292,5.02747-32.15706,17.32635-47.99967,26.10068C161.799,70.177,136.18782,11.76556,98.19968,3.00062,80.06308-1.57714,60.68572-1.80475,42.2.5998,26.10838,2.83513,10.11178,7.31916-5.8,10.5" fill="none" stroke="#14b1ab" stroke-dasharray="31 4"/>
+  <path d="M922.2,39.1c-15.1026.205-29.61665-5.37535-44-9.20017-11.89183-3.141-24.73976-4.71587-36-9.89983C832.06856,15.33269,822.91079,7.84,814.20007.99986,800.58225-9.81393,788.598-13.08595,774.2-1.59932c-20.53381,16.2535-34.17858,39.72743-64,28.19855-15.76877-4.82134-29.45365-14.81476-43.9997-22.19971-27.686-14.3263-43.48389,16.823-60.00048,33.50056C599.19868,45.11772,588.93,55.17024,578.2,49.49963,558.24573,36.04308,552.65945,8.76968,534.19966-6.29969c-10.57749-7.8317-21.08441,1.40357-27.99959,9.50028C499.32146,11.2012,492.624,20.93918,486.2,29.3c-7.2605,8.75629-15.7601,20.00659-27.99989,21.00008-21.50458-1.4501-30.35452-30.044-52.00013-31.3-15.15707.7778-25.26842,15.81944-40.00011,18.29951-23.52,2.44434-35.3237-25.14494-55.99992-31.19921-8.24867-2.34657-17.00469,1.24353-23.9998,5.50007-7.63222,4.45783-15.83369,9.4544-24.00018,12.89939-11.96538,5.075-24.77145,9.4403-35.99983,16.10037C213.645,47.6876,201.02189,57.08237,186.2,58.29992c-28.09309.60456-46.88251-24.68906-68.00016-39.49943C98.18473,3.06792,71.14066-3.74266,46.19991,2.00029,28.13225,6.17622,11.511,15.45064-5.8,21.8" fill="none" stroke="#e8505b" stroke-dasharray="27 5"/>
+  <path d="M922.2,56.2c-15.82593.39858-30.116-7.786-44-14.30022C865.12474,35.8,850.89583,31.31134,838.2,24.4c-24.36434-12.81246-37.48636-32.67017-63.99987-9.69945C753.56039,32.17923,742.36256,46.976,714.20005,32.69929c-9.24171-4.21113-19.19176-8.3108-28-13.39936-9.04328-4.79375-18.068-11.1503-28-13.99995C636.62856-1.28894,622.384,21.12684,610.19989,35.1,593.92243,54.243,580.9482,66.88709,562.20015,41.69943c-9.997-11.473-22.48283-40.73649-39.99962-38.3-17.55132,5.74726-30.16033,30.92673-44.0011,43.39985-8.47443,8.59566-20.34134,14.86009-31.99951,8.4C427.48908,44.59117,414.58541,21.128,390.2,33.70072c-9.76262,4.72467-21.28905,9.31859-32,4.89865-20.3319-7.72454-35.77863-38.76241-59.9997-30C286.86194,13.51354,277.1,22.34371,266.19984,28.09967,254.83273,34.37767,241.961,38.47342,230.2,43.89989c-16.41814,7.52552-33.11753,18.67172-52.00007,16.29977-27.23123-3.60356-46.39864-26.11166-68-40.89935-19.19253-14.05423-45.19935-22.40588-68-12.29969C25.39948,13.84812,10.57831,25.28748-5.8,33" fill="none" stroke="#f9d56e" stroke-dasharray="23 2"/>
+  <path d="M922.2,70.5c-13.14042.40658-25.27278-6.20721-36-13.10028a280.72044,280.72044,0,0,0-28.0001-15.99963c-9.19564-4.521-18.99254-9.11048-27.99985-14.00024-9.70314-5.208-20.46462-12.38055-32-10.39982-24.23341,5.09917-40.25886,41.67285-68,28.99962-6.656-2.99282-13.47229-7.45723-20.00013-10.69958-9.10545-4.5635-18.94261-8.94225-27.9999-13.60015-16.14734-8.47976-35.378-20.45663-51.9999-6.29929-14.87924,11.95044-24.46989,30.08728-40,41.2995-12.78478,8.93679-23.85752-.88366-32-10.80074-9.5201-10.35572-19.90222-30.15681-35.99964-28.69994-18.73593,5.33462-31.945,29.74048-48.00093,41.09989-9.62451,7.56086-20.97158,9.771-31.99956,3.7-13.97767-7.62224-26.64687-22.22058-44-19.999-6.46617.81187-13.496,2.92092-19.99992,3.49962-11.98686,1.277-23.25433-5.31622-31.99983-12.90034-8.7646-7.18906-17.32115-16.26329-28.00009-20.59966-11.32309-4.81514-23.17717,1.99317-31.99991,8.90059-8.79976,6.60881-18.06857,13.843-28.0002,18.69939C246.87812,45.3034,234.043,48.41251,222.2,52.80005c-12.79415,4.5817-26.20213,9.57705-40.00007,9.29966-41.37069-.24379-66.56542-40.15807-103.99981-51.5C45.23186-.84338,20.85029,31.39911-5.8,44.8" fill="none" stroke="#e8505b" stroke-dasharray="15 2"/>
+  <path d="M922.2,81.4c-20.388.972-35.71863-15.18207-52.00023-24.99978C858.92246,49.18555,846.35514,43.343,834.2,37.8c-9.95434-4.316-20.76686-10.49463-31.99993-8.59994-15.959,3.45579-26.24162,18.31056-40.00027,25.99968-21.875,12.74038-37.56329-9.637-55.99986-17.80008C695.8212,32.6428,684.55,28.72381,674.2,23.8999c-11.12753-4.7459-23.59139-11.44417-35.99994-8.2-25.33731,6.32514-44.77261,62.65907-71.99974,46.00067-13.99-8.5463-22.92112-26.62111-40-29.60106-17.48176-.61115-33.98228,21.75978-48.00072,31.19985-10.06026,7.74251-23.72326,12.63032-35.9997,7.29991-13.33614-5.34059-25.18149-15.75841-40-16.89887-11.95185-.64218-24.93765,1.47833-35.99979-4.30085-19.75342-8.42374-37.89447-39.74185-59.99979-34.2C297.20343,17.83449,289.41114,24.585,282.2,30.3,272.50487,38.12961,262.06421,46.35475,250.2,50.59985,241.34935,53.88331,231.41651,55.50747,222.2,57.4c-7.76847,1.50582-16.15435,3.41054-24,4.5a106.79816,106.79816,0,0,1-52-5.1C130.70188,50.83658,116.44127,41.40154,102.2,33c-16.56518-9.52-36.91323-21.068-56.00009-11.89983C27.33935,30.47007,12.84337,47.18459-5.8,57" fill="none" stroke="#e8505b" stroke-dasharray="9 2"/>
+  <path d="M922.2,88.8c-20.39424,1.5871-35.82676-14.45168-52.00018-24.29993-9.90109-6.42566-21.13143-11.48215-31.99989-16-8.92986-3.42906-18.3288-7.95187-27.99991-8.60016-14.5738-.3103-25.28746,11.48377-36.00012,19.70018C748.8784,80.64033,735.0278,59.02833,714.2,45.49937c-10.854-6.80969-24.02638-9.222-36-13.29938-11.846-3.45735-23.49259-9.95451-35.99989-10.60023-20.97548.66645-33.50482,24.59037-48.00053,37.09958-33.12073,32.31207-44.68372-16.92709-75.99955-10.1-22.68633,7.22143-39.35852,29.22977-64.00009,31.30039-12.664.85582-24.44682-5.48931-35.99988-9.69994-10.11894-3.85813-21.43448-4.41167-32.00009-6.19943-30.24945-4.56347-46.83453-41.32566-71.99955-43.80117-12.65684-.06-22.84376,9.81922-32.00044,17.40069-25.15676,22.25-35.25733,23.99512-68.00012,25.19935-23.84957,1.98272-48.3415,3.40886-71.99982-1.09937-13.82689-2.45978-27.41335-7.657-39.99995-13.8C91.83238,42.77932,81.32715,36.47747,70.2,33.1c-16.66562-5.74-31.50941,3.48406-43.99976,13.90071C16.20607,55.02432,5.72913,63.64428-5.8,69.4" fill="none" stroke="#f9d56e" stroke-dasharray="28 3"/>
+  <path d="M922.2,93.2c-19.7465,2.514-35.77481-11.96076-52.00014-20.8a213.89251,213.89251,0,0,0-31.99992-14.2c-7.67909-2.80146-15.867-6.30993-24-7.5001-24.58122-3.15986-37.0781,28.12528-59.99979,25.70078-16.02294-3.91094-26.19476-19.09274-40.00045-27.10038-10.75733-6.59488-23.92714-6.97336-35.99988-9.20015C667.3952,38.25745,656.81315,33.76878,646.2,31.19982c-10.05133-2.46268-20.41757,1.62611-27.99991,8.20081-13.42159,11.07389-24.08854,26.604-40,34.39951-12.123,5.76375-24.86479-.83672-36.00015-5.80079-11.439-5.57414-24.57961-4.7402-36,.40138-13.28435,5.16148-26.21927,12.35477-40,16.1992C448.89163,90.0995,431.18463,85.65308,414.2,81.29922c-11.94319-2.83882-24.89249-4.00926-36-9.59935-21.22832-10.54046-34.46655-32.944-55.9996-42.80055-25.28644-8.90183-44.87864,27.98908-68.00083,36-12.69561,4.92166-26.83,2.24557-39.9996,1.40052-19.91955-1.10234-40.1117.65435-60,1.69981-17.25787,1.38984-35.42265,3.413-51.99995-2.90009-13.52317-4.63476-25.95635-13.263-40-16.39977C49.123,45.64076,36.37217,53.11494,26.2002,60.60025,16.15045,68.00287,5.74447,76.11612-5.8,81.1" fill="none" stroke="#14b1ab" stroke-dasharray="21 3"/>
+  <path d="M922.2,95.7c-18.5887,3.18323-35.53859-7.6972-52.00015-14.59989C858.60059,76.04369,846.09192,72.18059,834.2,67.89988c-8.81541-3.21465-18.42539-7.24518-28-6.19988-20.02727,2.16071-34.48275,29.8743-55.99976,20.00029-14.59039-7.52876-24.74035-22.43156-40.00031-28.90023-11.39641-4.42581-24.1481-1.58648-36-2.90015-12.2583-.79771-23.81449-6.92684-35.99989-7.90034-14.56065-.55672-25.84377,11.08832-36.00017,20.00032-17.04446,15.47094-31.68913,27.72255-56,21.09937-8.97782-2.174-18.76612-3.83089-27.99994-2.49909-17.48234,2.74461-34.60691,8.66228-52,11.89955-26.98216,5.95041-63.47955,4.54629-88.0001-8.99924-17.92765-10.88574-30.743-28.75831-47.99973-40.50064-34.897-23.14053-54.38843,34.51736-87.99987,32.59985-12.06589-.367-23.98156-4.82937-36.0003-5.79935-17.37132-1.66036-35.15416,1.261-52,5.39946-16.95587,4.63525-33.91046,14.557-52,10.90013C88.06881,83.46456,75.6808,74.717,62.20009,70.19986,36.76408,61.71149,16.80371,85.97314-5.8,93" fill="none" stroke="#f9d56e" stroke-dasharray="16 3"/>
+  <path d="M922.2,97.8C908.83647,100.41332,895.1149,96.75575,882.2,93.4999,870.29273,90.51668,857.94876,87.5635,846.2,84c-19.253-5.61972-36.17544-18.86095-55.9999-6.89946C775.43156,85.45692,763.004,96.8629,746.2,85.3994c-21.893-15.26622-29.8399-32.46516-60-25.39871-7.7444,1.38579-16.21285,1.93684-24,.599-18.998-3.94857-30.1154-9.79047-47.9999,2.301C595.35505,75.32434,577.95784,93.80649,554.2,95.49984c-11.8664.31658-24.13131-1.39069-36-.39955-24.02254,2.1685-48.29965,4.2691-72,8.89985-23.31322,4.97136-47.24638,5.56071-68-7.90078C364.83827,87.41834,353.9697,74.79256,342.2,64.2c-8.75073-7.87029-19.43966-16.84219-32-15.59983C286.4753,51.936,274.00231,79.21008,250.2,82.4c-10.9595,1.13852-21.68379-3.89277-32-6.8-10.18108-3.09943-21.4518-4.34961-32-2.59974A110.87887,110.87887,0,0,0,146.2001,87.50019c-12.79923,7.08489-24.94233,17.75588-40,19.29993-14.42867,1.2116-27.5922-6.87442-39.99995-13.10031C39.35909,78.94613,19.70427,94.642-5.8,102.3" fill="none" stroke="#14b1ab" stroke-dasharray="20 5"/>
+  <path d="M922.2,100.9c-11.64984,2.02742-24.23766,1.37137-36,1.1-11.92755-.26467-24.36746-.60283-36-3.5-18.73665-4.00756-35.92255-21.27052-55.99978-14.70007-8.22316,2.66047-15.906,8.061-24.00022,11.00024-11.82816,4.54522-22.97609-1.33329-31.99991-8.80076-11.39554-9.13034-24.19171-21.08885-40.00016-18.599-7.90667,1.193-16.09654,4.00664-24,5.19961-13.36624,2.66819-26.68554-2.89575-40-2.60046-11.71779.585-22.23367,7.43633-32,13.30054-11.40621,6.96359-23.47453,13.85235-36,18.59987-11.31368,4.48274-23.98693,4.90684-36,5.09989-20.06426,1.163-43.98263-.4913-63.99994,1.69936-20.22382,2.22614-39.30978,13.73692-59.99994,11.50112-47.55633-3.78357-69.2421-72.93893-107.9999-55.6008-16.472,7.2491-28.86151,24.88749-48.00012,25.30061-11.26705-.2011-21.66207-6.249-32-10.00027-20.25089-8.2578-42.44119-1.952-60,9.70076-9.87378,6.33645-19.1092,14.69235-27.99993,22.2995C121.24205,119.5269,110.44484,127.27665,98.2,127.3998c-20.77695-.31623-36.07058-18.27549-56.00006-21.99939C26.19875,101.71128,9.69811,106.34694-5.8,110.3" fill="none" stroke="#e8505b" stroke-dasharray="26 3"/>
+  <path d="M922.2,106.4c-14.54728,2.05046-29.57366,2.98154-44,5.90037-20.52109,3.917-34.42279.19034-51.99992-10.30108-7.343-4.0706-15.43089-8.69716-24.00022-9.1991-9.89812-.63582-19.2108,4.69942-28,8.49983-32.99138,15.1993-45.38245-30.89869-80.00006-22.49965-10.48993,2.583-21.1041,6.89709-31.99991,7.49941-11.88347.39648-24.412-2.02038-35.9999,1.70062C615.20755,91.30418,604.70606,97.18408,594.2,101.7c-17.82824,7.37567-36.6357,14.0872-55.9999,15.60021a287.91014,287.91014,0,0,1-36.00007.29991c-10.50033-.47874-21.49011-1.94224-32-.9-15.578,1.22865-29.61856,9.36311-44,14.70015-23.35383,9.294-46.93519-2.53888-63.99978-18.601-23.01093-19.36184-43.56864-48.82213-76-28.199-11.98309,7.12382-25.38259,16.17672-40.00043,12.29924-16.19435-4.45879-30.52335-16.62111-48-15.99907-28.91159,1.72532-48.8236,26.3909-67.99989,45.29947-37.20764,37.81187-50.63377,14.32858-87.99987-4.50046A71.07779,71.07779,0,0,0-5.8,116.4" fill="none" stroke="#14b1ab" stroke-dasharray="14 4"/>
+  <path d="M922.2,115c-9.22446.89984-18.9951,1.70385-28,4.00015-9.25007,2.37394-18.62811,6.20192-28,8.09984-31.70141,6.3598-45.19552-25.46695-71.99981-22.40067C783.19548,106.58506,773.38587,114.00255,762.2,115.1c-12.23658.82955-22.486-7.9255-32.00011-14.40006C707.06775,84.6744,694.85654,89.404,670.2,96.90071c-11.64107,3.28353-24.28279,3.303-36,6.19921-12.2499,3.08048-23.83611,9.4412-36,12.8-10.26532,3.0566-21.4155,4.15909-32,5.5a259.81044,259.81044,0,0,1-56,3.79964c-24.19749-1.19619-41.52768-4.81383-63.99983,7.80112-10.26312,5.26258-20.5347,12.15665-32.00017,14.4992-28.82211,5.13284-51.18786-18.57-71.9999-34.69985C330.748,103.80846,317.54271,93.7451,302.2,94.60014c-12.5052.65552-23.8617,7.76968-35.99992,10.09992-33.30461,5.62805-49.3325-33.27546-88.00011-11.49944-20.90555,12.42915-34.994,33.44689-52,50.29929-18.78246,19.209-36.37027,26.1474-59.99983,9.09943C44.47807,138.55811,22.29692,115.90917-5.8,121.7" fill="none" stroke="#f9d56e" stroke-dasharray="12 5"/>
+  <path d="M922.2,127.1c-9.24639.1941-19.11047.62961-28,3.40011-22.16125,7.42246-37.2,18.85954-60,4.6992-12.26061-7.26407-24.61056-19.16767-39.99994-16.699-8.1733,1.52377-16.155,5.72632-24.00009,8.29976-18.366,6.51129-33.049-9.13322-48-17.00057-19.89367-10.99489-35.5219-8.06358-56-1.29874-7.8132,2.38829-16.31515,4.71929-24,7.49928-7.96271,3.05937-16.23354,7.09377-24,10.60007-25.01054,12.34035-42.44062,3.36282-68.00012,3.89948-23.81815,1.28586-48.2208-1.487-71.99991-.0002-13.07825,1.4255-25.21837,8.129-35.99994,15.30075-12.97182,8.54436-27.67377,18.56889-44.0001,15.99965-21.04505-3.49991-38.59388-17.38928-56-28.79953-9.89749-6.73523-20.342-14.09534-31.99994-17.40011-15.61009-4.9765-32.11431,1.00437-47.99995-.59991-12.98815-1.24057-24.59449-8.48129-35.99988-14.20049-25.21542-13.59014-45.28094-4.24766-64,14.90089-19.82513,18.75876-42.71254,58.80355-71.99964,59.70014-15.61808-.43717-28.27774-11.90242-40.00049-21.0006C33.9876,141.61541,16.6766,123.637-5.8,126.8" fill="none" stroke="#f9d56e" stroke-dasharray="17 4"/>
+  <path d="M922.2,142c-39.23927-5.51627-51.59659,20.91691-80,10.90062-15.75667-6.1504-29.64577-22.10543-47.99993-18.30028-8.1201,1.668-16.04434,5.91785-24,8.09975-20.04221,5.64395-35.50131-11.87624-52.00019-20.0001-22.471-12.44457-41.43666-11.096-63.99983.00072-15.18605,7.06752-28.26024,18.86488-43.99988,24.79944-18.08145,6.6935-35.10565-5.1891-52.00011-10.00073-8.94073-2.58327-18.77765-3.01792-28-3.69932a243.26037,243.26037,0,0,0-36,.2c-30.12186.68921-44.79388,17.124-67.9997,32.50056-14.15111,9.27047-28.23353,10.02953-44.00036,4.49856-22.733-6.85775-42.79384-20.43059-63.99982-30.69951-18.71142-9.48015-40.34472-10.1722-60.00024-16.69938-12.4713-4.2178-23.87421-11.9065-35.99978-16.9006-23.20256-10.575-43.89835,1.91741-59.99991,18.70088-20.457,19.74755-44.3568,60.40037-75.99978,58.00007-15.61586-2.21808-28.30707-13.54453-40.00049-23.30054C31.08738,147.56747,15.65618,129.47174-5.8,131" fill="none" stroke="#f9d56e" stroke-dasharray="26 3"/>
+  <path d="M922.2,158.7c-40.41887-10.95072-50.3275,15.41223-80.00007,7.00069-14.33973-5.12712-27.80943-17.1832-43.99992-14.30038-9.545,1.53572-18.58156,6.689-28,8.69962-13.35016,2.83881-25.56508-5.09859-36-12.40043A299.74308,299.74308,0,0,0,706.19993,130.3c-19.89719-10.9914-37.9884-9.83157-55.99986,4.00062-21.09017,15.109-39.88595,43.80425-67.99984,24.799-12.67854-8.1362-24.94042-18.553-40.00035-21.89944-28.06848-6.56929-60.08639-3.20093-84,13.69931-16.97073,11.48264-31.23006,29.32272-51.99971,33.90073C394.282,187.01068,381.832,184.04017,370.2,181.5c-26.78192-6.1587-51.30736-19.29332-75.99992-30.90018-17.36007-8.23376-35.08335-16.47326-52-25.59987-22.74251-12.511-40.37853-18.64-64.00008-3.19925-40.39922,27.17543-68.458,96.33525-123.99984,51.39883C35.21412,159.98407,19.34762,135.24379-5.8,135.2" fill="none" stroke="#14b1ab" stroke-dasharray="8 5"/>
+  <path d="M922.2,176.1c-18.1517-6.05713-29.62913-7.908-48-1.49926-7.61492,2.31883-15.959,4.78535-24,4.39914-15.07082-1.25516-28.48347-12.06226-44-10.4995-23.37366,3.06258-36.05687,18.62794-60,2.69895-12.11363-8.11387-24.03159-17.37856-36-25.69924-12.511-8.69107-28.32775-18.68731-44-12.69979-18.288,7.82658-29.32632,26.19367-44.00031,38.79941-13.84732,12.30964-26.08953,12.23021-39.9997.19973-11.76686-9.98747-21.93647-23.02406-36.00009-29.99925-26.32034-12.98776-56.56886-5.24813-80,10.30019-37.00619,26.55307-43.99409,50.34461-96,43.899-22.27809-1.67866-44.689-7.17575-63.99974-18.69965-30.2274-17.15786-75.73814-60.57315-112-50.2-47.00034,13.72867-75.74754,88.5869-132.00034,56.29985C39.19212,172.1071,20.5352,140.688-5.8,141.20008" fill="none" stroke="#e8505b" stroke-dasharray="16 2"/>
+  <path d="M922.2,193.5c-14.33693-5.84093-28.21519-11.49129-44.00013-8.39924-7.80241,1.29955-16.06757,3.47516-23.99993,3.79912-9.43371.28089-18.814-3.08956-28-4.60014-17.26535-3.48572-31.85821,6.08555-47.99989,9.701-15.29877,3.35852-28.76379-6.52662-40.00005-15.60125-12.03577-9.377-23.80122-19.9363-35.99993-29.09959C669.96,124.56568,654.72166,144.00947,634.2,169.90055c-8.5136,9.89915-17.86007,23.49041-31.99967,24.5998-21.59456-1.00068-38.07592-40.73025-60.00079-51.79972-10.76642-5.90431-23.97423-8.37141-35.99954-5.40048-16.11684,4.20324-31.18117,13.10361-44,23.59966-19.02119,15.45871-35.427,36.60966-59.99994,43.30008-11.58483,3.17816-24.058,3.83921-36,4.4-16.02031.74557-33.05132.44827-48-5.99982-18.39194-7.79216-32.633-22.9143-48.00008-35.2-14.04858-11.42866-30.34015-20.93426-48-25.39994-29.98907-8.15775-57.22258,12.05957-79.9996,29.00024-39.51516,29.6514-70.69762,28.88192-108.00018-4.10123C22.78042,157.48311,9.8975,146.40385-5.8,146.89994" fill="none" stroke="#e8505b" stroke-dasharray="2 3"/>
+  <path d="M922.2,210.4c-15.17973-6.70027-30.81448-15.33507-48.00013-13.69929-9.14891.64872-18.83682,1.74432-27.99989.79925-9.14144-1.0476-18.90283-2.44882-28-.29956-17.199,3.57152-33.75879,17.9085-51.99987,11.49947-9.02922-3.07582-16.87827-9.88536-24.00008-16-10.62952-9.16849-21.4876-19.00183-32-28.3-12.87107-11.23789-30.53731-26.33638-48.00016-15.29918-20.05056,13.53535-29.192,38.51681-48,53.39927-32.62834,23.71142-48.87361-56.81353-88.00025-63.09931-21.00619-4.85485-40.13208,9.334-55.99981,21.2992-18.86205,14.51289-34.46523,34.07516-55.99977,44.90024C401.76856,211.862,387.79,215.33038,374.2,217.99982c-13.05206,2.49456-26.65406,5.06134-40,4.50016-30.84223-1.62251-48.75251-30.65586-72.0001-47-23.71644-17.52549-56.22174-22.67925-83.99984-12.49976-16.623,5.52975-31.83644,15.17872-48,21.7997-21.19545,9.05545-46.39229,13.11317-68,3.1997-9.91565-4.20454-19.3437-10.76329-28-17.09978-11.59306-8.50642-24.77545-18.6088-40-16.9" fill="none" stroke="#f9d56e" stroke-dasharray="17 3"/>
+  <path d="M922.2,226.1c-9.49078-3.77455-18.64535-9.54535-28-13.60007-11.20979-5.03572-23.85318-6.23456-36.00012-6.19959-6.44094-.32249-13.55563-.91782-19.99993-1.00031-24.74333-1.11784-43.551,25.46154-67.99986,16.80054-9.12152-3.56772-16.97833-10.78016-24-17.40076C738.49771,197.31887,730.03087,189.53844,722.2,182.3c-26.418-24.39548-48.588-46.54226-75.9998-8.69941-11.15856,13.20833-25.78869,43.66438-43.99957,45.3-32.61543-2.40753-45.73588-94.22662-100.00089-72.70027C473.302,160.40122,453.02249,187.3276,426.2,204.59984,410.29844,214.52429,392.00288,220.41433,374.2,225.9c-14.22142,4.14378-29.02215,9.041-44,8.7001-30.54486-1.927-47.038-33.47063-72.00048-47.29953-24.88016-13.54163-56.88912-11.83179-83.99949-7.10121-31.52911,6.52829-63.369,18.269-96.00017,13.60035C63.89955,191.23316,50.49567,184.08,38.2,176.59987c-13.12069-8.15193-27.73665-18.49417-44-15.5" fill="none" stroke="#e8505b" stroke-dasharray="21 5"/>
+  <path d="M922.2,240.1c-15.39194-5.54192-28.50239-16.62817-44-21.90008-14.03242-4.02162-29.43045-6.79886-44-4.60043-21.65471,4.07621-40.74263,30.76689-63.99991,17.90025C759.32182,225.45957,750.88276,215.07779,742.2,206.4c-8.78021-8.87378-18.42984-17.88774-28-25.9-11.24451-9.09364-24.54108-20.40831-39.99982-18.40018-24.85513,4.55721-38.53964,41.83769-56.00072,58.69951-35.41182,36.24426-52.17856-55.42425-87.99988-67.99885-19.40843-8.75966-38.07575,6.00317-51.99937,18.30009C463.96206,183.181,450.05208,196.4988,434.2,206.5c-16.08462,9.79361-34.54281,15.50344-51.99987,22.30029-23.91048,8.25681-52.06011,24.3515-76.00006,7.99955-23.57277-15.74247-40.738-40.54005-72.00029-39.999-10.15162-.48841-139.47947.54592-147.99972-.60053a87.49024,87.49024,0,0,1-23.99994-6.10043c-10.755-4.46952-21.57583-10.11714-32.00008-15.2998-10.98039-5.43174-23.75978-9.60107-36-6.2" fill="none" stroke="#14b1ab" stroke-dasharray="14 5"/>
+  <path d="M922.2,251.9c-21.38226-6.87-37.72-25.00976-60.00017-29.79955-10.2576-2.90819-21.91475-4.41059-31.99982-.10018-17.73131,7.57348-35.085,30.45249-55.99986,18.79932C763.04127,234.65209,754.637,223.77293,746.19993,214.5a204.7057,204.7057,0,0,0-24-22.9c-12.70744-9.72092-27.1277-21.19756-43.99982-20.50016-26.735,3.22149-39.473,36.78405-56.00067,54.7995-17.04363,20.34491-30.18973,14.9671-43.99941-4.8-12.95637-17.76035-22.248-39.77724-39.99973-53.49958-21.22592-15.55145-39.30987-3.62126-56.0002,11.70088-12.46944,11.2245-25.122,23.2818-40.00017,31.29926-17.6299,9.21831-37.70128,13.22346-55.99968,20.90073-14.631,5.54857-28.95381,12.98692-44.00018,17.39954a44.05442,44.05442,0,0,1-35.99994-4.20078c-10.981-6.40588-21.09139-15.17143-32.00016-21.69929-19.08658-11.926-35.12772-8.2765-56-6.29934-29.816,2.13508-59.01632-6.4753-87.9999-12.10083-18.3858-3.91784-37.78222-2.69256-56.00008-7.39944C47.93131,189.992,22.61091,167.872-5.8,177.7" fill="none" stroke="#e8505b" stroke-dasharray="21 2"/>
+  <path d="M922.2,261.1c-19.56092-4.65551-34.05082-20.33111-52.00012-28.49984-13.50591-6.59781-30.4541-11.25431-43.9998-2.29943-14.37741,8.39454-29.88933,26.71773-47.99991,17.399-9.48625-4.9451-17.07189-13.96155-24.0002-21.8997-8.34075-9.94687-17.44572-20.33583-28.00016-27.99986C713.46161,188.744,698.22334,180.80758,682.2,181.29992c-29.63688,2.09073-42.00178,34.04186-60.00042,53.09964-19.91993,22.43867-33.62835,11.85881-47.99961-8.90009-10.03252-14.34435-18.83887-30.87659-32-42.69951-30.9848-27.1528-52.85612,5.70736-75.99995,24.50057a75.40392,75.40392,0,0,1-32.00018,15.89923c-11.87357,2.38224-24.36916,3.91062-35.99986,7.40036-13.64482,3.872-26.96576,9.88519-40,15.39989-25.91157,11.70449-39.53686,11.92523-63.99989-3.40076-9.8053-5.98911-20.4782-12.12228-32.00018-13.89907-12.07921-1.86389-24.33595,1.94842-35.99991,4.6-21.52918,5.32861-43.69452-.9423-64-8.20058-13.11318-4.83457-26.46194-10.3338-40-13.89964-10.317-2.859-21.47591-4.08114-32-5.89981a120.52036,120.52036,0,0,1-27.99993-8.80033C40.38111,186.30456,18.24068,174.84082-5.8,186" fill="none" stroke="#f9d56e" stroke-dasharray="21 5"/>
+  <path d="M922.2,268.1c-31.35425-4.69586-63.94541-51.5014-95.9999-31.70034-13.14518,7.98045-27.108,24.53064-43.99991,17.20017-21.761-11.2251-31.75344-36.70847-52.00057-49.99937C717.46721,195.0832,701.40558,191.40771,686.2,192.5c-38.31639,2.67835-47.77671,42.20743-75.99951,60.00086-17.02134,9.52763-31.00041-8.83455-40.00035-21.10125C561.66473,219.90815,553.35154,206.88365,542.2,197.7c-28.04231-22.98086-47.38057,1.2552-67.99994,19.90055-9.8527,9.06422-22.32229,16.41132-36.00026,16.89891-10.38224.6248-21.6614-.52279-31.99978.80062a122.87843,122.87843,0,0,0-28,6.89988c-17.01763,5.72843-33.5935,15.77441-51.99991,15.70032-14.24727-.30062-27.059-7.97094-40-13.00051-25.64205-10.85724-40.13876.02248-64,6.90094-23.62426,6.00712-46.96123-5.7569-68.00017-15.30053C142.63819,230.99052,130.57693,225.247,118.2,221.8c-13.10631-3.79687-27.18317-5.47716-40-10.3001C48.48869,199.97113,27.00312,180.10234-5.8,198" fill="none" stroke="#f9d56e" stroke-dasharray="3 3"/>
+  <path d="M922.2,273.6c-29.69686-4.44455-58.47224-37.84566-83.99978-35.90079-12.22628,2.02628-21.53492,11.67527-32.0003,17.5008-13.70507,8.4901-25.87464,1.88178-35.99989-8.40064-24.83755-26.29495-33.96443-50.997-76.00029-43.79861-14.13889,2.16324-28.664,6.56443-39.99962,15.59952-17.38488,12.61359-36.02237,47.92209-59.9997,43.10047-17.70519-6.01025-27.34578-24.90122-40.001-37.50006-37.01688-38.40207-52.83131-12.24945-83.99906,13.69978-28.70072,21.96934-47.63584-3.68052-88.00039,7.20012-14.73481,3.54972-29.06478,9.9261-44,12.69947-21.30214,4.15968-39.596-7.02644-59.99992-9.60079-15.84228-1.69848-30.26735,7.00556-44,13.601-28.17557,14.98739-54.18018-.64431-80.00023-12.70073-9.00821-4.31681-18.57457-8.94272-27.9999-12.29949-10.30029-3.55922-21.51788-5.76754-32-8.70005-36.99494-10.40233-60.10866-43.54032-100-18.60008" fill="none" stroke="#14b1ab" stroke-dasharray="7 2"/>
+  <path d="M922.2,278.2c-13.95131-2.9211-27.49257-8.76936-40-15.50006-11.7185-6.10025-23.10165-14.47853-35.99985-17.90029-15.34655-3.58973-27.27947,9.15524-40.00029,15.30055-14.1674,7.34808-26.29181-.99884-35.99983-11.20084-15.05166-14.72442-27.68023-40.54185-51.99963-38.69974-9.47383.7571-19.00373,4.24973-28.00046,7.10028-9.28913,3.0348-19.25207,5.97022-27.99993,10.40018-13.73774,6.85151-24.34839,18.92154-36,28.6-39.00473,34.28477-53.74531-6.134-84.00008-25.80066-12.80073-8.58635-27.07224-10.0997-39.99991-.8987C489.56063,237.96023,479.52754,250.60621,466.2,258c-28.05379,14.8567-48.34425-15.75118-92-5.59933-13.16637,2.59589-26.51964,6.58633-40,7.19916-10.58921.53971-21.62087-.761-32-2.80009-13.171-2.92193-27.63318-3.49211-40,2.70081-14.78648,6.82417-27.63189,19.01618-44,22.09949-15.31172,2.66828-30.21218-4.82631-44-10.5-19.374-8.84578-39.0534-18.03271-60.0001-22.4997-13.79652-2.78728-27.81614-6.993-39.99977-14.20066C45.97113,217.49558,26.11091,201.93348-5.8,223.5" fill="none" stroke="#f9d56e" stroke-dasharray="17 2"/>
+  <path d="M922.2,283a235.74827,235.74827,0,0,1-59.99971-23.80073c-26.19076-14.87586-32.59032-5.02979-56.00017,5.80147-11.84089,5.32141-23.65187-1.44162-32-9.8014-15.936-14.02657-31.0082-44.01555-55.99971-36.69972-9.6043,2.88887-18.82653,8.24858-28.00044,12.20031-14.66974,6.452-30.91879,10.692-43.99986,20.30021-22.36262,15.71172-44.56928,36.87251-72,17.69913-18.65-11.82472-39.97511-34.99063-63.99984-25.99982C482.405,255.658,469.9856,288.07925,434.2,271.79918c-18.2022-7.73939-35.63935-15.857-56.0001-14.69851-18.535,1.16729-37.368,4.00919-55.99986,3.09876-15.90187-.30612-32.79491-4.17869-47.99993,2.20051-17.39,7.01918-30.39545,22.44512-48,29-17.95338,6.65724-35.84877-4.57262-52.00009-11.40006-17.82973-7.80317-36.688-13.96008-56.00009-16.69965-13.87331-1.78063-27.95032-5.62108-39.99976-12.90078C48.07583,231.07108,29.96582,211.83315-5.8,235.79984" fill="none" stroke="#14b1ab" stroke-dasharray="7 5"/>
+  <path d="M922.2,288.5c-18.67991-6.41418-38.57643-10.34076-55.99985-20.00034-29.29018-15.51874-32.62-8.54052-60,2.301-16.33417,5.30741-29.64735-9.02508-40.00025-19.60086-26.53221-27.88465-34.6864-32.57917-67.99971-10.59921-13.50126,8.93284-29.47719,13.39554-44.00045,20.19883-40.29991,22.15127-56.3395,35.08792-99.99958,9.49988-14.636-7.46354-31.9305-16.41689-48.00011-7.69862-16.37905,8.18917-28.89457,25.49493-47.99992,27.59956-12.85874.96635-24.86028-5.88743-36.00012-11.40023-12.47172-6.56405-25.92162-12.41633-40.00009-14.29965-19.46411-2.35044-40.3821-2.15554-59.99994-2.00076-11.88943.49131-24.50213-.29861-36,3.30036-18.71879,5.91151-31.931,21.987-48,32.4-18.858,12.99577-33.58,6.12462-52-3.30064-12.49529-6.4723-26.08327-11.8912-40-14.2992-21.30543-3.63194-44.53293-.09578-63.99987-11.30063C48.51515,248.98457,35.97076,225.01061-5.8,251.1" fill="none" stroke="#e8505b" stroke-dasharray="27 5"/>
+  <path d="M922.2,295.1c-14.13067-6.04834-29.66052-8.72882-44.0002-14.0995-11.79739-4.351-23.26651-11.667-35.99975-12.90063-15.51539-1.65651-28.60611,11.13794-44,9.90044-23.08615-3.92474-34.96482-30.01312-56.00034-38.69968-19.96095-7.483-36.11271,11.30618-51.99988,20.29914-9.92578,6.05862-21.32526,10.22156-31.99989,14.7001-6.45821,2.85166-13.457,6.44808-20,9.10007-28.9233,12.51758-58.91788,12.64856-87.99985.69929-19.19068-7.51752-32.98973-13.57741-52-1.19853-14.46762,9.104-29.568,23.10232-48.0001,19.59912-11.452-2.23054-22.0179-8.64941-31.99994-14.39977-10.11625-5.71726-20.94074-11.3374-32.00006-14.99989-30.8234-10.2756-80.18287-12.75365-108.00006,5.89941-22.19873,13.79873-42.025,48.2889-72.00008,35.2008-14.88342-6.43187-28.25646-17.01575-43.99988-21.50007-24.8152-7.48848-51.802,5.07591-75.99992-5.60018-38.79589-19.26766-42.87272-48.11462-92-20.1" fill="none" stroke="#14b1ab" stroke-dasharray="19 2"/>
+  <path d="M922.2,302.8c-13.78764-7.13225-29.35749-9.9873-44.00024-14.69948-11.71064-3.87352-23.46823-9.97523-35.99974-10.50056-15.24726-.85931-28.69783,11.08527-44,8.60034-23.41242-5.23023-35.74189-32.65212-60.00009-36.00013-18.82843-1.28717-32.96811,14.26805-48.00019,23.19949-8.67127,5.65586-18.532,10.3707-27.99987,14.50021-8.99218,4.01493-18.38,8.67614-28,11-12.95426,3.22494-26.73622,3.26185-40,3.6001-11.771.2797-24.3867.971-36-1.4-17.14611-3.15307-34.2456-14.11263-51.99994-8.1996-18.72143,6.15355-34.87658,23.676-56.00015,20.0993-10.00654-1.77306-19.43307-7.16835-27.99987-12.3997-9.11716-5.48392-18.63547-11.53911-28-16.59985-31.47492-17.49315-67.51729-22.68087-100-4.59941-11.89337,6.40216-22.358,15.96179-31.99988,25.29955-12.92875,11.85911-28.78571,28.16225-48.00027,22.19959-14.50033-4.91005-26.48313-15.78457-40-22.69948-27.45167-15.52865-52.05006,2.29507-79.99995-1.59951C82.23857,300.79048,71.57419,293.44193,62.20011,286.2c-26.074-21.325-38.984-18.64719-68.0001-4.09984" fill="none" stroke="#f9d56e" stroke-dasharray="10 3"/>
+  <path d="M922.2,311.2c-13.6982-7.4787-29.00224-11.5758-44.00026-15.49946C866.52594,292.42168,854.53911,287.4328,842.2,288c-14.992.4099-28.7652,11.54365-43.99993,8.1-22.32687-6.18532-35.59372-32.24807-60-32.90009-16.89648.11628-30.48558,12.159-44.0002,20.8A350.27929,350.27929,0,0,1,662.2,303.2c-8.619,4.87132-18.12776,9.63884-28,11.19991-14.49671,2.05675-29.45268-1.14324-43.99993-.09976-27.19955,2.96323-33.32437,4.2547-59.99994-4.80095-8.88164-2.76631-18.93373-4.01617-28.00006-1.39892C484.97885,313.11151,469.09868,326.862,450.2,323.79974c-18.06241-3.38169-32.87872-16.05621-48.00018-25.69933-32.2459-22.201-63.74271-36.56344-99.99967-12.99979-13.23652,8.44473-24.79083,19.91481-36,30.79946-12.817,12.18205-28.48337,29.314-48.00014,24.2-15.07839-4.58-26.89324-16.46423-40.00014-24.69981-25.65482-17.61384-45.00659-5.61575-71.99994-1.09971-33.19939,5.76943-45.179-21.59749-71.99961-26.90137C20.23524,285.78754,6.89149,292.90021-5.8,297.7" fill="none" stroke="#f9d56e" stroke-dasharray="15 2"/>
+  <path d="M922.2,320.3c-12.30263-7.2366-26.11539-11.71079-40.00031-14.69937-10.47564-2.39769-21.19052-6.27339-31.99969-6.80071-15.33673-.75285-28.84728,9.46271-44,9.70038-26.19509-1.6817-40.57541-34.12155-68.00015-31.99968-21.90567,1.797-45.62051,21.18968-64.00014,32.89878C661.799,317.48268,649.5293,328.42121,634.2,329.9c-13.37318,1.17129-26.64278-4.05823-40.00006-3.79978-13.392-.19481-26.56452,5.74869-40,4.3998-16.38586-1.34644-31.339-11.49042-48-10.80007-19.27119,1.21161-36.17292,16.24812-56,12.99985-19.91427-4.26194-35.88815-18.70815-52.00022-30.29938-29.96977-22.40943-58.483-36.89557-91.99961-11.19976-23.27324,15.93422-51.56773,62.02494-79.99974,60.8-15.79184-1.51489-27.90916-14.11518-40.00064-23.20018-16.02368-13.08311-30.86611-20.85947-51.99985-14.79972-14.56824,3.23142-28.85209,10.17735-43.99989,10.09951-11.42242-.17775-22.26763-5.69427-31.99994-11.20038C33.6697,297.61854,19.84056,303.02239-5.8,311.80007" fill="none" stroke="#e8505b" stroke-dasharray="20 2"/>
+  <path d="M922.2,329.7c-12.3262-6.85888-26.2867-10.406-40.00022-13.19952-11.72779-2.40306-23.86305-6.94055-35.99977-5.10031-14.75711,2.165-28.58377,13.44092-43.99992,9.59978-24.562-7.3238-39.11417-37.27048-68.00029-31.49919-20.62276,4.33669-39.396,16.20664-56.00009,28.7986-14.51588,10.77092-28.19408,28.2952-47.99953,27.20078-13.4104-1.15815-26.32418-7.92589-40.00022-7.09972-10.80394.60864-21.25773,5.52626-32,6.49964-15.48074,1.4738-29.43713-6.94524-43.99993-10.50053-21.92784-5.84332-42.13488,11.959-64.00007,7.40084-20.26547-4.77177-35.91236-20.3199-52.00024-32.6-28.12527-22.1656-56.25744-38.675-87.99959-11.79981C285.923,315.66149,258.99155,365.931,226.20045,363.0007c-15.8753-2.80444-27.95455-15.53184-40.00063-25.30036-13.15086-11.69162-29.43474-23.34269-47.99993-19.39963C127.33669,320.21055,116.5928,324.53842,106.2,328.1c-37.06618,13.18036-45.07171-6.35736-75.9999-9.30089C18.12783,318.53524,5.7768,321.30279-5.8,324.4999" fill="none" stroke="#e8505b" stroke-dasharray="4 2"/>
+  <path d="M922.2,339.4c-12.66074-5.365-26.528-7.5256-40.00017-9.69955-10.46-1.85992-21.23922-5.83565-31.99982-4.80041-13.88893,1.25684-25.87712,11.39677-40,11.30009-27.82979-2.24337-41.99941-38.281-72.00025-35.29926-18.84461,1.87469-36.78066,11.101-52,21.9987-17.25907,11.97831-33.16307,40.05236-55.99941,38.101-9.63461-1.00406-18.7439-6.01647-28.00041-8.50049-16.60154-5.03153-28.44495,2.4958-43.99992,5.7007-15.36839,2.94739-29.72665-5.17381-44-9.40115-23.8566-7.22137-44.72132,9.82569-68,1.40065-18.5286-7.1108-32.65693-22.37108-48.00021-34.3999-28.94718-23.08415-56.5479-38.40986-87.99956-9.19977-23.18834,20.07174-44.248,60.76849-75.99972,65.70034-11.93017,1.19451-22.96939-5.88807-32.00042-12.901-16.745-12.47909-30.83181-31.2628-51.99983-36.20023-24.294-4.43872-45.12554,13.7204-68.0002,18.30034-14.77124,3.42229-29.656-2.55948-44-5.4-14.3302-2.21074-29.76564-2.31262-44.00009.60024" fill="none" stroke="#14b1ab" stroke-dasharray="26 2"/>
+  <path d="M922.2,349.4c-12.97272-3.41841-26.80073-2.68107-40.00007-4.39977-15.59255-2.45519-28.30608-8.01427-43.99991-1.59946-7.70216,2.75523-15.71377,6.91554-24.00007,7.49916-21.84265-.02758-35.00081-22.38195-52.00025-32.99928-22.97319-15.29172-51.79175-2.07976-71.99988,11.99924-18.73342,12.04994-37.25844,49.159-59.99942,45.90052C620.36959,374.26648,611.40928,368.40049,602.2,365c-16.31926-6.62984-28.75449.89664-43.99993,5.60069-12.01448,3.22593-24.53221-.73738-36-4.301-34.46076-12.607-51.85589,6.78511-80.00008-7.59926-17.882-10.098-31.57578-26.49178-48.0001-38.60027-32.68564-24.63472-57.04777-30.90007-87.9996.60031-21.1,19.94231-44.0094,59.77455-75.99978,59.30019C216.36045,378.9071,204.54266,369.61146,194.2,361.1c-15.95657-12.68037-30.3522-31.63769-51.99985-33.70034-27.04207-1.08078-46.835,21.95746-71.99987,27.7007-10.49129,2.12814-21.6326-.02372-32.00018-1.90063C23.77023,351.19768,8.80988,347.29852-5.8,349.39992" fill="none" stroke="#e8505b" stroke-dasharray="7 5"/>
+  <path d="M922.2,359.2c-14.59393-.54261-29.44762,3.847-44,1.60012-28.68587-6.14948-28.82677-5.12989-56,3.4006-29.71284,6.39586-44.08769-30.83016-68.00035-41.3-21.939-10.14218-46.55818,2.16852-63.99981,15.89905-8.85769,7.35083-16.79258,16.97737-23.99981,25.90025-8.5871,9.8401-17.96294,23.04172-31.99984,24.40019-20.21953-.467-33.65932-22.645-56.00035-15.6996-14.05273,4.6789-24.24969,11.85883-40,9.59856-14.63775-1.55152-29.182-6.39556-43.99988-6.29913-14.59048-.0715-30.10089,3.1885-43.99991-2.80046-18.9792-8.57032-32.24966-25.97772-48.00027-38.99936-11.712-9.81475-25.34436-18.41709-39.99975-23.00031-25.05841-8.6181-47.89414,9.49657-63.99982,26.90075-38.2849,40.447-61.86427,68.35517-112,22.49882-14.05252-11.9332-28.08661-28.92063-48.00017-29.09977-28.81326.25406-46.50877,27.79138-71.99977,36.8007C51.91365,373.61618,36.35821,370.21051,22.2,366.7c-8.93214-2.55777-18.60053-5.32851-28-4.6" fill="none" stroke="#14b1ab" stroke-dasharray="2 2"/>
+  <path d="M922.2,368.4c-14.54283,3.09661-28.777,10.93828-43.99994,9.50006-7.85546-.8217-16.10221-3.10208-24.0001-3.50011-14.77415-1.3756-29.30462,7.094-43.99994,3.90034-22.63066-7.32738-32.971-32.3647-52.00048-45.09976-35.16-23.25857-72.15387,15.18-91.99935,41.89922-9.70668,11.70626-22.47571,30.1857-40,24.10029-8.53607-3.21537-16.12747-9.64845-24.00022-14.10011-8.34848-5.00357-18.90177-6.59872-28-2.69935-11.81942,5.076-22.64224,11.18888-36.00011,10.99866-11.89526.16579-24.13605-1.31-35.99981-1.89937-9.15718-.44385-18.84268.08268-28,.10025-31.65233.759-49.90282-28.85414-71.99991-46.70048-11.60324-9.52725-25.43762-17.34116-40-21.19981-24.27223-6.87627-46.99655,8.83744-63.99978,24.60071-27.91316,25.95686-56.77949,54.94759-96.00035,29.99874-22.21267-12.08723-40.78836-43.17532-67.99959-40.6998-30.29772,3.44047-45.33665,35.59566-72.00019,46.60074-11.36326,4.66874-24.59084,3.18787-36.00008-.60034C15.86321,380.14958,5.40126,374.46807-5.8,374.9" fill="none" stroke="#f9d56e" stroke-dasharray="22 2"/>
+  <path d="M922.2,376.6c-16.45262,7.66654-32.71,20.9689-52,17.09936-9.09607-1.43776-18.77376-2.87439-28-2.09917-13.25748.96879-28.26766,4.52275-39.99977-3.8007-14.45636-10.31254-23.78113-26.69536-36.00043-39.29929-18.02191-19.73116-39.05352-20.06912-59.99988-4.59957C694.24216,352.5648,683.47466,363.7522,674.20008,375.2c-10.8283,12.21206-22.44515,33.83743-39.99956,35.80055-15.86994-.6617-25.95793-16.18409-40.00074-21.70013-15.64154-6.81638-29.68444,6.23433-43.99984,10.59987-18.08384,5.14921-37.373,4.948-55.99991,6.1-43.13057,3.26327-51.41505-10.05841-79.99991-38.10076C398.2068,351.84112,377.05468,339.52686,354.19994,337.4c-17.24908-1.00721-34.00853,6.357-47.99984,15.90029-34.5816,24.19249-64.80489,52.09953-108.00023,26.29907-20.18087-11.13759-35.27151-34.92056-59.99957-35.70011-30.34118,1.72806-45.70826,33.65592-68.00071,50.00017C55.65681,405.58425,38.84578,406.52679,22.2,398.29933c-8.71974-4.13787-18.117-9.19253-28-9.39923" fill="none" stroke="#e8505b" stroke-dasharray="3 5"/>
+  <path d="M922.2,383.5c-15.26175,9.26788-28.7651,25.73189-47.99983,25.50008-10.55385-.17165-21.43311-2.23225-32.0002-2.19985-15.73337.29752-31.90136,1.51327-43.99972-10.50088-21.48142-18.932-36.66578-65.08826-71.99982-55.09991-17.67178,6.27838-31.383,20.68209-44.00064,34.0004-8.1909,8.91649-15.99176,19.42995-23.99976,28.50031-9.535,10.72991-21.74719,20.38658-36.00012,11.4993-10.81616-6.49919-19.71736-17.269-31.99989-21.19939-12.92068-3.757-24.75526,5.09707-36.00009,10.10014-13.93923,5.88785-29.15635,9.1516-43.99993,11.79988-48.87116,8.78633-58.13333,2.25941-91.9997-31.90061-12.30439-11.95788-27.007-22.56564-44.00051-26.39892-21.19861-6.30583-44.11495-3.16933-63.99972,6.0003-14.70256,6.41593-28.91747,14.85667-44,20.39935-19.004,6.83391-41.08666,9.42268-60,.9999-9.86024-4.16469-19.45079-10.29848-27.99993-16.70008-11.74424-8.46938-24.70022-18.83886-40.00012-17.99982-27.8,2.83152-44.87372,35.095-64.0005,52.59927-13.14029,13.09806-30.12277,20.29119-47.99948,11.6-10.24183-4.69292-20.36408-11.95237-32-12.39925" fill="none" stroke="#f9d56e" stroke-dasharray="14 3"/>
+  <path d="M922.2,389.1c-8.35564,6.16895-16.133,14.25746-24,21.00007-6.71508,5.79388-15.02974,10.78463-24.00028,11.69964-13.19954,1.03924-26.79671-.7329-39.99973-1.09937-19.67637-.03384-32.217-6.43862-43.99968-22.001-14.27135-16.99617-27.43323-47.77425-51.99973-50-15.75674-.23139-28.72425,11.3173-40.00072,21.00049A324.417,324.417,0,0,0,670.2,398.6c-7.27218,8.21106-14.71356,17.75787-24,23.8-26.38584,16.40937-41.84642-27.5282-68-22.49988-8.35325,1.50912-16.31664,6.23509-24,9.5998a291.31986,291.31986,0,0,1-28,10.19991c-20.50011,5.89793-42.46721,14.97754-63.99988,9.70072-21.14261-6.8104-34.7311-26.35749-52.00035-39.20037C380.29263,366.14113,332.997,372.692,298.2,381.29946c-28.69972,7.047-63.50792,16.47021-92,5.1009-11.14813-4.41642-21.93041-10.84539-31.99991-17.30069-11.70159-7.48615-25.80736-14.53432-40.0002-10.59932-25.23088,7.83626-41.25867,38.06646-60.0005,55.69883-12.954,13.4912-29.78635,22.16861-47.9994,12.69988-10.14625-4.98584-20.3055-12.259-32-12.69927" fill="none" stroke="#e8505b" stroke-dasharray="31 5"/>
+  <path d="M922.2,393.4c-16.05258,12.478-27.33273,33.32689-47.99964,38.80037-9.0227,2.11284-18.81311,1.7684-28.00042,1.4995-12.09732-.47154-25.00414-1.22114-35.99988-6.80011-26.55012-14.90643-34.05171-49.98264-59.99986-65.5-15.56709-8.40545-31.9667,2.58513-44.00024,12.30069A404.24948,404.24948,0,0,0,674.2,402.89992c-17.62489,17.70924-34.32431,41.65-59.99988,20.49936-18.56029-14.4512-28.28812-23.03378-52.00021-12.19866-21.02055,8.6552-42.693,16.38153-63.99978,24.29973-17.95822,6.48474-35.91587,8.33621-52-3.80114C429.04509,419.8588,414.80923,402.137,394.2,396.09993c-25.55575-6.65835-145.84144.58993-172-3.90073C209.56064,389.97935,197.61872,383.797,186.2,378.2c-46.13408-25.90479-60.25894-13.99026-92.00011,23.70046-14.11225,15.53014-29.27787,37.33-51.99946,38.70022C24.69629,440.90216,11.63942,424.62655-5.8,424.5" fill="none" stroke="#e8505b" stroke-dasharray="30 3"/>
+  <path d="M922.2,396.7c-16.76927,13.26186-27.592,34.78237-47.99975,43.2002C856.24889,446.1,827.14937,445.39491,810.2,436.20045c-26.34181-14.65573-34.07859-49.30386-59.99969-64.30091-17.67473-8.10375-34.59687,6.66583-48.00049,16.70028-7.89627,6.077-16.31579,12.75986-23.99986,19.10014-7.875,6.73523-15.77257,14.68455-24,21-28.75549,22.46-42.3649-7.24241-67.99982-14.60073-9.33281-1.98215-19.2163.85179-28.00013,3.90086-7.85355,2.515-16.28075,5.40008-24,8.29977-12.05,4.4101-24.08853,10.046-36,14.80015-11.27436,4.37736-23.83335,8.64906-36,5.69963-13.58146-3.529-24.75856-13.29483-36-21.19964-14.85735-10.76683-29.4321-16.434-48.0001-13.89928-15.81577,2.0784-32.168,2.72082-47.99986.39893-18.84865-2.18255-37.40349-7.52407-56-11.09967-15.69634-3.48051-32.14772-3.17311-48.00008-5.29931-11.11523-1.61448-21.86289-6.59037-31.99988-11.20076-34.61954-16.24018-55.5417-22.27834-83.99984,9.10078-18.46874,18.95345-39.74972,51.62963-67.99976,53.5999C24.896,447.92313,11.50582,432.3576-5.8,432.89992" fill="none" stroke="#f9d56e" stroke-dasharray="3 4"/>
+  <path d="M922.2,399.3c-16.46133,12.49924-26.55687,32.43155-44,43.8-19.17147,11.59546-48.16412,11.32122-67.99994,1.30053-17.59649-9.64814-27.6941-28.42344-40.00016-43.5005-5.42645-6.6264-11.94369-14.013-20.0001-17.3999-14.418-5.63871-28.35326,4.53917-39.99991,12-11.72121,8.09334-24.36242,15.68721-36,23.89985-7.76148,5.67392-15.58652,12.58059-24,17.3-29.10578,17.1998-44.80208-13.38006-72-14.90053-28.1343.39129-54.58628,12.15894-79.99994,23.10069-38.20055,17.09277-47.60134.34586-79.99993-14.80078-16.02178-7.25871-31.78133-3.67336-48.00013.50145-33.60262,9.02271-65.26784-9.34919-95.9999-20.30142-14.00847-5.25434-29.24617-6.57427-44.00019-8.09873-11.08055-1.4428-21.96689-5.73083-31.99979-10.50086-40.41552-19.66056-61.61857-18.35036-91.99976,16.60091-17.27437,18.24366-37.19064,42.66818-64,44.40005C25.26559,453.488,11.199,439.65831-5.8,440.9" fill="none" stroke="#f9d56e" stroke-dasharray="11 2"/>
+  <path d="M922.2,401.8c-18.51838,12.77243-28.838,35.08181-48,47.1-21.47844,13.02006-51.33018,12.3959-72-1.99955-19.41707-12.89475-33.301-47.66761-55.99949-51.30112-14.91335-1.00443-27.461,9.669-40.00075,16.20024-8.87423,5.05873-18.91987,9.05347-27.99981,13.70037-6.70169,3.33276-13.64325,7.97562-20,11.9-33.7211,21.57921-44.48455,3.69007-75.99984-4.90068-21.39754-3.99767-43.77535-.61493-64.00008,7.00091-13.14955,4.7457-26.17328,11.407-40,13.99992-15.39262,2.9159-30.37495-3.82874-44-10.20053-22.831-10.749-37.60718-6.94014-60,1.80114-17.39539,6.625-35.10452,5.4593-52-2.1015-21.81163-8.79754-41.45265-23.06123-64-30.09945C249.288,410.12729,239.38214,409.39208,230.2,408a104.81292,104.81292,0,0,1-27.99991-8.40039c-19.60681-9.60024-42.76115-19.52741-64.00015-8.899-15.88124,7.78681-27.55064,22.273-40,34.39919-16.01651,15.71059-36.566,30.57233-60,29.8-15.04083-.69319-28.66294-10.77457-43.99994-8.9" fill="none" stroke="#f9d56e" stroke-dasharray="18 4"/>
+  <path d="M922.2,404.9c-18.12451,10.32758-28.044,30.56795-44.00028,43.49976-19.54272,16.49185-49.17792,18.96434-71.99978,8.10048-22.48076-10.10835-35.98516-44.83954-59.99949-46.40093-11.59819.34834-21.93875,7.37846-32.00054,12.40063-9.95588,5.212-21.18157,8.38826-32.00006,11.19979-19.295,5.2452-35.50616,20.27254-55.99983,21.4003-12.42466.6207-24.41434-4.444-36-8.20011a180.74261,180.74261,0,0,0-40-7.7c-35.26409-2.06033-64.13807,24.71546-100,13.19956-14.11729-4.20029-29.11279-9.94988-44-6.39916-21.79049,5.14553-40.1944,23.00272-64.0001,17.49887-30.82973-7.25348-54.73437-30.79082-84-41.89884-15.40436-5.57-32.48246-5.27513-47.99989-10.4003-15.90393-5.35467-30.8474-15.25971-48.00008-16.1998-45.74147-1.50924-57.45991,52.68708-112.0002,59.899a70.40732,70.40732,0,0,1-23.99965-.69931C15.83975,451.86594,4.95391,448.16891-5.8,449.9" fill="none" stroke="#e8505b" stroke-dasharray="9 3"/>
+  <path d="M922.2,409.2c-18.64047,8.23582-28.84571,28.12711-44.00048,40.89948-20.111,18.12807-51.466,21.34906-75.99964,11.00091-21.00551-8.84973-35.00545-40.72391-59.99955-35.501-12.53145,3.13313-23.50208,11.47129-36.00048,14.80021C694.569,443.699,681.75063,442.61243,670.2,446.3c-18.59216,5.69656-35.792,18.62529-56,17.59966-30.03782-1.33655-57.35857-21.37317-88-16.69943-16.02026,2.15739-31.79181,7.70923-48,8.59955-36.7114,2.276-52.10588-16.18446-87.99979,7.00065-20.78015,12.67926-36.254,19.68488-60.00028,8.5987-23.82791-10.49083-44.80616-26.74667-67.99971-38.39965-11.08824-5.53578-23.8357-7.708-36.00024-9.39946a125.74016,125.74016,0,0,1-31.99987-8.20046c-12.62534-5.08489-26.05879-11.12822-40.00013-9.69949-22.5464,2.40312-38.60929,20.663-55.99992,33.29983C80.19266,452.80421,56.41692,456.83442,34.2,456.2c-13.23618-.65768-26.70835-5.018-40-2.70009" fill="none" stroke="#e8505b" stroke-dasharray="11 5"/>
+  <path d="M922.2,415.5c-9.59207,2.18046-17.32366,9.82486-24,16.60015-21.80189,23.89826-33.77823,37.11908-68.0004,38.59917-29.56316,2.24838-38.07437-5.90973-59.99933-22.7-11.58569-8.56352-22.98165-10.02045-36.00036-3.79865-12.37334,6.15582-25.816,12.39-40,11.19879-7.7961-.35751-16.24694-1.16835-23.9999.10056-16.92712,2.70278-31.612,13.04157-48,17.4999-16.02409,4.43814-33.06974.655-48-5.80041-42.59937-19.7498-48.9032-12.35867-92.0001-10.299-17.26867.85753-34.75768-2.22179-51.99989-1.50129-13.05715,1.072-25.2942,7.51448-36,14.70066-14.12548,9.33891-30.15561,20.65085-48.00016,16.59935-9.75865-2.13488-19.20034-7.12335-27.99992-11.69945-10.60283-5.53732-21.69172-11.32243-31.99992-17.40015-26.99254-16.58236-39.45589-23.83937-72.00024-25.79911-17.96622-1.33627-34.27166-10.86394-51.9997-13.20119-29.85513-3.52111-50.20566,23.73088-75.99988,33.40081-17.84609,5.81861-37.42316,5.24025-56.0002,5.60033-11.85154-.16788-24.17339-1.87377-36-.40071" fill="none" stroke="#14b1ab" stroke-dasharray="30 3"/>
+  <path d="M922.2,424.1c-23.77288,3.05736-37.70928,33.947-60.00039,43.19923-12.44064,5.66695-26.62647,6.60323-39.99964,8.40085-20.41716,3.36238-31.14431-.58915-47.99982-11.50078-31.76587-20.63122-42.22015,5.47-72.0002,5.50135-7.88151-.39114-16.17364-2.352-24-3.20073-18.83571-2.64115-35.599,7.893-51.99989,15.4006-13.71344,6.31537-29.91853,7.57945-44.00011,1.69884-41.34543-18.7099-39.87423-23.25343-88.0002-22.09849-22.52717-.25323-45.83063-4.45459-67.9998,1.09852-22.21447,6.17281-38.12448,25.52131-59.99977,32.30091-19.90541,5.68853-38.34937-7.665-56.00027-14.90018-12.07162-5.39013-24.64266-10.88271-35.99986-17.70028-11.4564-6.444-23.08423-14.14032-36-17.29986-11.6168-3.01979-24.1526-1.91431-36-2.99993-10.75866-.99561-21.58042-4.32732-31.99994-7.00026-14.68259-3.71327-30.56633-1.13845-44,5.60065-15.42291,7.2166-30.48024,17.50464-48.00022,18.39926-10.39044.63936-21.60123-.09357-31.99994.4005-16.88524,1.07386-35.0692,1.50708-51.99995,1.49994" fill="none" stroke="#f9d56e" stroke-dasharray="17 4"/>
+  <path d="M922.2,435.2c-22.9712-.67009-36.65734,25.94486-56.00034,35.19928-9.785,5.2153-21.29456,6.48143-31.99979,8.60054-9.25853,1.65375-18.71555,4.80825-27.99988,6.30026-15.83808,3.1241-29.57907-6.88218-44-11.40065-21.642-7.01181-38.678,12.419-60,10.00087-11.98894-1.23687-23.86615-5.89667-36-6.00016-17.653-.1337-32.27345,11.48683-48,17.8-30.42354,14.02569-52.9295-13.20972-80-21.80068-16.68587-5.43545-34.84334-3.19867-52-5.89979-28.01144-4.202-50.93906-5.69014-75.99991,10.10107-18.41206,10.86732-36.943,28.78781-60.0001,24.69929-16.40443-3.8567-31.725-12.18173-48.00027-16.59924a142.07363,142.07363,0,0,1-27.99965-11.601c-7.93236-4.38661-15.99666-10.036-24-14.29981-18.702-10.85554-35.83625-6.57768-56.00015-6.49927-17.30107-.82667-34.56767-7.17641-51.99993-3.90008-35.6573,7.15382-38.10616,17.98169-80,12.09857-14.64151-1.532-29.54182,1.3554-43.99988,3.30109-7.76306.80415-16.258.25608-24.00006-.60025" fill="none" stroke="#f9d56e" stroke-dasharray="3 5"/>
+  <path d="M922.2,448.5c-23.02672-4.52366-37.10471,19.61638-56.00034,27.99952-9.9386,4.66224-21.46911,5.31127-31.99973,7.90047-9.50095,2.35351-18.82925,6.88347-28,10.2-17.40591,6.85388-31.31542-1.83243-48-5.20068-18.15842-3.78779-34.18783,9.39039-52,9.20124-18.8319-.32119-37.005-12.19087-55.99993-6.90028C633.60235,496.09537,619.56851,508.60484,602.2,510.5c-28.62589,2.15009-45.68793-27.30578-80.00018-28.59913-11.909-.57184-24.32682-.6728-35.99979-3.401-21.18235-4.60778-39.26278-8.444-60,.901C415.21647,484.22294,404.47475,490.747,394.2,496.9c-10.851,6.42786-23.05385,12.719-36,12.39982-15.14868-.68-29.112-8.55749-44-10.79943-31.60748-4.11977-38.2204-8.77538-63.99961-26.50111C232.24713,460.4,218.06955,462.46022,198.2,466.60083c-18.50138,3.43561-37.38777-2.10087-55.99994-.30037-30.53444,3.69421-39.52558,8.69868-72,.89889-32.78211-7.674-47.07833,10.89234-76,2.80079" fill="none" stroke="#e8505b" stroke-dasharray="5 2"/>
+  <path d="M922.2,463.5c-23.13449-9.01583-39.59493,15.44195-60.00031,21.39988-11.75361,3.53881-24.84041,3.67515-35.9996,9.20039-14.021,6.673-27.51034,18.39779-44.00008,16.79944-6.56675-.58615-13.59694-2.56779-20-3.99985-15.23809-4.159-29.4797.14257-43.99994,4.60092-9.00706,2.4926-19.00681,1.97514-28.00008-.30092-15.55473-3.90653-31.94089-11.2173-47.99993-5.39915-12.17878,3.67166-23.51634,10.87226-36,13.5994-33.55669,5.91088-47.00764-27.78639-88.00013-23.99932-9.19775.4-18.99409.35371-27.99988-1.801-11.89849-2.59781-23.81493-7.20013-36-8.39971-37.17269-2.792-66.20452,35.59108-104.00006,27.79954-10.46013-2.14508-21.21734-5.62482-32-5.69933-17.61408-.04588-32.38,2.25673-47.99978-8.501C259.50559,491.91367,249.86013,482.34725,238.2,477c-15.53244-7.835-32.52123-.2262-47.99986,3.70064-11.65838,2.84167-24.1272,1.85636-36.00011,1.59912-13.59876-.47175-34.54884.81834-47.99912-1.59976-12.15236-1.92647-24.1525-6.42461-36.00087-9.60014a57.66663,57.66663,0,0,0-28-.59974c-16.177,4.61176-30.9654,12.79951-48,5.29972" fill="none" stroke="#f9d56e" stroke-dasharray="16 4"/>
+  <path d="M922.2,479.6c-22.29487-12.26639-39.33759,6.91112-60.00011,12.6003-9.028,2.77818-19.169,3.226-27.99989,6.69975-14.57493,5.84292-25.79678,18.18348-40,24.7-18.24213,8.55688-37.19024-4.73423-56.00013-2.49991-7.97031.76745-16.25062,3.21651-23.9999,5.09988-16.33917,4.37808-32.71726-1.71534-48-7.10072-31.16118-11.07073-50.98465,13.46935-80.00006,6.90134-13.95076-3.40987-25.88756-13.24855-40-16.20055-11.83565-2.79605-24.16654.28647-36,1.40017-18.13759,2.24744-34.99354-6.86584-51.99994-11.50052-13.24365-3.819-27.33116-.96947-40,3.60083-20.49279,7.03705-41.86343,16.57739-64,13.99972-13.13256-1.96212-26.83557-5.12264-40-1.49969-22.0515,5.71185-33.68752,6.02091-51.99986-9.3014-10.87821-8.66488-21.63961-20.178-36.0001-22.39932-15.44921-1.90945-29.42825,7.47614-44.00006,10.9-16.91155,3.403-34.95112,2.38047-52,.5007-13.83256-1.74715-27.31762-6.90026-39.99993-12.5008C77.7339,477.5693,64.0982,471.682,50.2,473.80005c-20.1073,3.52784-34.57219,18.733-56,8.39977" fill="none" stroke="#e8505b" stroke-dasharray="6 2"/>
+  <path d="M922.2,495.9c-21.89144-15.35213-38.03068-2.00838-60.00015,3.70051-36.77613,7.22722-36.803,14.06689-63.99952,35.40026-16.59028,12.53654-30.22569,5.92807-48.00045,1.39871-20.06611-5.26207-33.27173,4.50087-51.99985,5.50138-17.00421.23975-31.94134-9.77881-48-13.80075-29.81983-6.67925-48.97251,11.87078-79.99988-.80047-44.09471-18.27547-51.48044,13.53293-92.00017-3.39929-35.87337-15.922-42.30677-14.64325-80-6.5995-11.76107,2.08543-24.02433,4.128-35.99991,4.19918-14.62231-.33493-29.98437-3.69823-43.99991,2.20076-9.045,3.284-18.21844,8.4261-28.00013,9.09915-23.57863.58812-36.25428-24.70351-56.00022-33.59922-20.4037-9.79725-40.02655,7.86834-59.99971,10.59918-18.62808,2.77116-38.56661,2.72039-55.99995-5.20009-18.6699-7.6576-35.59906-21.26164-55.99994-24.00016C37.15774,477.68556,19.62321,504.85967-5.8,491.7" fill="none" stroke="#f9d56e" stroke-dasharray="28 4"/>
+  <path d="M922.2,511.6c-21.53923-17.43958-35.938-11.09444-60.00017-5.09947-30.82048,6.65386-38.82186,17.57216-59.99945,38.30012-14.574,13.707-25.45729,16.32132-44.00046,8.69859-15.062-6.40585-28.55674-7.89069-43.99994-1.89866-37.31019,15.51353-56.93712-17.92116-92-19.301-13.25485-.6424-26.73655,2.92581-39.99993,1.8003-9.186-.5249-18.78164-2.48484-28-2.49985-27.91752-.08951-42.63844,22.77319-72,11.19963-9.46063-3.36911-18.825-8.46031-28-12.49965-22.792-11.17955-47.59671-7.84308-72.00011-6.69942-9.0046.50758-18.95856.91725-27.99994.79935-6.425-.20835-13.68207-.27534-19.99992,1.10027-10.08307,2.00929-19.17407,8.25553-28,13.19988-41.01319,25.76442-53.86731-35.06149-92-29.90061-12.28343,1.841-23.92675,7.79218-36,10.50054-16.95934,3.18035-35.66181,5.47743-52-1.39968C101.28752,507.8918,79.24021,481.74572,50.2,488.4995,31.41714,494.12637,14.66811,511.39267-5.8,500.5" fill="none" stroke="#f9d56e" stroke-dasharray="28 2"/>
+  <path d="M922.2,526c-8.87737-8.10806-19.5582-16.03077-32.0002-16.69971-17.92667-.32772-36.35655,4.84038-51.9999,13.49912-10.77223,6.4889-19.78159,16.42881-27.99983,25.8006-10.1665,11.30037-22.8672,27.26115-40,23.09976-13.42619-3.54931-25.56871-13.453-40.0001-12.79957-11.14419.41683-21.25337,6.76161-32,8.9-12.64528,2.38695-25.48274-2.54884-36-9.30054-36.38527-24.76358-39.15583-29.03836-84.00012-23.29893-12.14621,1.25218-24.63522,3.61652-35.99985,8.19957-10.83917,4.26311-21.00012,11.22992-32,15.09984-21.42558,7.7233-41.84681-6.79861-60-16.50029-19.42008-11.25666-41.62022-16.5733-64.0002-16.49915-15.85242.15755-32.43839.15429-47.99985,3.3987-16.69359,4.04168-28.54265,18.31265-43.9998,24.90073-27.59856,10.58178-43.49119-26.03958-68.00047-31.79965-16.01707-3.88292-32.23571,2.93106-47.99969,5.19911-11.78042,1.53114-24.09733,3.30736-36,3.00068-9.89279-.55909-19.72-4.84545-28-10.10052-24.10617-15.30107-46.83513-34.9667-76-17.79911C24.43464,509.95972,10.00693,517.57848-5.8,510.19994" fill="none" stroke="#f9d56e" stroke-dasharray="19 2"/>
+  <path d="M922.2,538.9c-8.885-9.07112-19.075-18.84481-32.00015-21.29978-19.92581-3.5035-40.48259,4.93627-55.99989,17.09959-10.56191,8.48035-19.39429,19.839-27.99987,30.20029-10.02844,11.82479-23.01589,26.43207-40.0002,18.89921-14.01619-5.7546-27.90941-17.42642-43.9999-13.09869-8.06094,1.89311-15.94264,6.30534-24,8.19936-12.50182,3.31825-25.77121-1.20473-35.99994-8.50034-25.17093-18.69771-40.158-44.74917-76.00017-36.29883-26.58411,5.38352-48.11281,23.5378-71.99981,35.19944-36.28444,17.05974-67.82326-23.444-100.00033-35.19951-20.15168-8.10942-42.93957-8.5294-63.99972-4.00042-33.28824,4.67376-48.932,42.95688-75.9998,35.00052-14.97164-5.2603-25.894-18.46409-40.00036-25.40019-13.45135-7.01655-29.31582-5.90539-43.99985-5.5001-9.14414.304-18.87457.24289-28,.99956-9.11415.85989-18.8504,2.34642-28,1.1-31.62172-5.21931-51.66955-40.71383-88.00019-26.09934C29.48768,517.27094,13.09828,529.85025-5.8,522.00029" fill="none" stroke="#14b1ab" stroke-dasharray="22 4"/>
+  <path d="M922.2,550.3c-8.94734-10.06834-18.74671-21.31035-32.00009-25.49983-22.3972-6.79782-44.38237,7.62826-60,22.49986-8.56236,8.43722-16.49377,18.73913-23.99989,28.1001-9.38444,11.82063-23.32077,27.69064-40.00017,20.19928-14.1097-5.97464-27.57012-18.70924-43.99984-15.29894-8.0954,1.54621-16.05595,5.70644-24.00007,7.79959-23.85078,6.55337-41.42774-10.41065-55.99971-26.80066-13.25432-14.89786-29.8539-33.64257-52.00044-28.99875C574.861,535.19654,562.2226,545.815,550.2,555.09991c-15.34566,11.70537-32.27338,24.44164-51.9998,26.70047-48.36031,1.51217-75.21916-58.91115-128.00037-53.99979a97.63229,97.63229,0,0,0-35.9999,11.099c-19.74535,9.8579-36.14094,37.93455-59.99957,34.401-16.06178-3.72757-28.65165-16.29191-44.00056-21.90035-10.09905-4.07982-21.36472-6.07995-31.99978-8.20035-10.41138-2.10733-21.34551-4.45261-32-4.8-11.94088-.34427-24.05212,3.453-36,2.8-11.4616-.5661-22.17978-6.446-31.99994-11.90015-22.83485-12.907-40.08684-14.61917-63.99994-2.39911C21.95937,532.84205,7.70533,537.67685-5.8,533.19988" fill="none" stroke="#14b1ab" stroke-dasharray="9 2"/>
+  <path d="M922.2,560.6c-8.86964-11.04682-18.45164-23.48185-32-28.9-25.24762-9.059-47.83356,12.73465-64.00016,29.49962-15.502,14.84328-34.8733,55.35139-59.99936,45.90079-24.38455-10.53124-31.1263-23.31738-60.00054-12.29948-40.07131,14.732-57.28326-18.24992-79.99965-43.80134-8.22409-9.04117-19.0655-18.36184-32.00033-18.09916-24.00275,1.7834-37.89008,25.15894-56.00031,38.09934-35.69743,26.05559-67.643,18.57747-99.99941-8.09987-19.74507-15.482-40.92976-36.12209-68.00022-33.59949-17.63944,2.50681-34.18816,11.63862-48.00006,22.59968-14.54567,11.09954-28.10443,28.72542-47.99978,28.50062-14.14059-.60448-27.0355-8.20021-40.00016-13.10016-10.43844-4.23986-21.66358-7.902-32-12.40007-10.37235-4.35825-20.92873-9.89415-32-12.29993-25.26976-4.54913-40.87739,12.99875-68,1.49932-15.0165-6.46536-31.41508-12.66353-48.00015-9.19855C34.2535,539.07693,15.27547,551.96842-5.8,547.30065" fill="none" stroke="#e8505b" stroke-dasharray="10 2"/>
+  <path d="M922.2,570.5c-34.2366-50.7533-58.75645-38.53765-96.00038.40032-9.6848,10.24149-18.40557,22.38423-27.99957,32.69978-9.33094,10.15289-21.90917,18.96775-36.00023,12.79927-14.04359-6.24008-27.64646-17.57417-43.99991-14.89859-7.88949,1.01144-16.07065,3.84494-23.99994,4.59934-31.653,3.84107-46.82944-19.71512-63.99975-41.6005-9.35744-11.57117-20.19374-25.668-36.00012-27.5995-23.226-.813-38.55488,27.4448-56.00051,39.69937-29.67121,21.37947-72.73806,15.76231-99.99927-7.09956-20.50586-15.08491-39.9873-40.14723-68.00018-37.70033-20.953,3.67979-39.55662,18.53834-56.00045,31.3-17.2389,14.2643-32.298,25.53354-55.99984,22.39992-18.28956-1.9058-36.22224-8.44791-51.99984-17.79924-14.20742-8.11769-27.17484-21.11249-43.99981-23.20031-19.719-1.28929-36.08529,15.45847-56.0003,13.3999C98.25368,557.12845,89.9978,554.3,82.2,552.70043a90.01494,90.01494,0,0,0-24-1.69991c-21.52647,1.87731-42.00025,12.97-64,9.99977" fill="none" stroke="#14b1ab" stroke-dasharray="9 3"/>
+  <path d="M922.2,580.3c-34.621-54.0506-57.25044-39.024-96.0004.10031-15.82841,14.539-36.26631,50.44275-59.99916,46.90017C754.83056,625.231,745.03321,617.6162,734.19995,614c-10.24085-3.57023-21.49608-2.15839-32-.79973-13.36043,1.12548-27.99945.89954-39.99987-5.80023-26.42143-15.30234-36.36545-49.77067-63.99958-63.30046-23.63756-8.62091-39.57005,20.71217-56.00083,32.80008-13.12231,11.44817-31.34345,12.83836-47.99982,13.20023-19.44873.36764-39.92195-2.70466-55.99963-14.40019-21.61157-14.04824-43.29287-45.531-71.99986-38.70029C356.09019,539.62111,346.90907,546.074,338.2,551.6c-14.78006,9.34612-28.76993,20.66619-43.99987,29.3001C283.17265,586.83971,270.463,590.03576,258.2,592.2a58.01174,58.01174,0,0,1-43.99984-8.70064c-9.97085-6.18967-19.05575-14.76516-28.00015-22.29941-9.66318-8.47312-22.67466-17.18077-36.0001-12.39937C134.58586,554.11484,122.60971,568.00512,106.2,571.4c-10.47378,2.11106-21.511-.74093-31.99995-1.3-26.8301-2.32853-53.19788,6.7836-80,5.4" fill="none" stroke="#e8505b" stroke-dasharray="6 4"/>
+  <path d="M922.2,590.2c-10.14641-13.95692-20.97111-33.4085-39.99954-35.10048-13.91379-.36638-25.72054,9.13232-36.00053,17.40042-9.45,8.03968-19.26025,16.78842-28,25.59991-14.74926,13.75537-30.02317,37.946-51.99948,38.60068C752.113,635.783,739.97,626.389,726.19993,624c-15.74193-2.64043-32.1744-.95244-47.99987-3.10085-34.75676-2.66028-48.48136-39.70341-72.00015-59.89954-16.07153-14.074-29.39856-9.49845-43.99986,3.60086-8.70161,7.66166-17.42331,16.71482-28,21.79918-12.80537,6.76647-49.80529,2.97542-64.00044,3.90084-25.58265.67232-41.85506-12.99052-59.99928-28.90161-17.42-14.96529-34.08213-25.13991-56.00026-11.29853-14.56845,8.93437-28.62847,19.49942-44.00019,27.09894-13.90589,7.4456-29.38231,12.13842-43.99993,17.9-8.83485,3.6324-18.28483,8.18073-27.99985,8.50024-18.17879-.06846-32.09155-14.62119-44.00006-26.7-11.03619-10.51224-22.85356-27.07531-39.99991-24.50046-14.61141,3.5226-24.66588,16.63934-36.00027,25.60008C111.51127,583.605,102.94164,588.367,94.2,589.59924c-5.95728,1.21117-92.82477.36417-100,.60027" fill="none" stroke="#e8505b" stroke-dasharray="25 4"/>
+  <path d="M922.2,600c-13.40526-19.21662-29.63172-44.20547-56.00013-29.39923-17.16286,10.09667-32.64249,23.505-48.00018,36.09889-18.718,15.04812-36.46883,43.75411-63.99935,37.40086C744.901,641.695,735.589,637.48916,726.2,635.4001c-11.73217-2.68914-24.08336-4.38447-35.99994-6.00017-29.85268-1.87056-39.8988-3.21719-59.9998-26.90052-12.2411-13.361-22.63422-31.12835-39.99974-38.29988-24.49728-6.72372-39.89331,25.46738-64.00068,26.89968-13.2274.66657-26.73364-2.48108-39.9998-1.49866-14.56193.20474-29.5896,5.17341-44,1.19938-27.03893-6.52271-46.56814-45.39691-75.99976-36.30058-17.1858,6.45739-30.58877,20.81047-48.00064,26.99992-18.34463,7.239-39.19894,8.34079-55.99945,19.401-13.715,8.69666-28.49,17.34778-44.00012,6.899-20.24523-12.87689-30.88325-37.4006-51.9996-48.99976-22.78263-9.9484-40.39731,25.413-56.001,37.49994A48.87012,48.87012,0,0,1,90.2,607.09974a122.34694,122.34694,0,0,1-19.99994,2.20031c-25.59649,1.69248-50.51357-7.40724-76.00007-7.3" fill="none" stroke="#14b1ab" stroke-dasharray="10 3"/>
+  <path d="M922.2,609.8c-11.07743-14.98055-26.33023-38.078-48-29.39964-10.0291,3.70224-19.15593,10.54766-28.00006,16.39945-7.7243,5.25685-16.2811,10.54331-24,15.8-25.91352,16.63284-44.83851,49.93572-79.99983,38.29973-14.53125-4.00129-29.436-7.928-44.00008-11.79968-15.34309-4.61681-32.92492.47611-48.00008-5.19949-31.03466-11.91867-48.183-72.06794-83.99962-54.60061-13.82649,6.84794-27.60414,17.891-44.00046,15.09961-7.81252-1.09841-16.07763-3.41691-23.99992-3.69911a92.467,92.467,0,0,0-28,3.29991c-32.92232,11.10613-41.84221,4.95325-68-15.40071-11.964-9.28092-25.21952-15.7997-40-8.39874-15.86193,8.086-29.53183,22.13-48.0002,24.09877-10.46711,1.29289-21.62371.06744-31.99978,2.20051-19.65639,3.305-31.89465,25.44437-51.99969,26.1009-27.34182-3.88106-40.43425-43.62264-64.00056-55.90038-28.97855-13.69-46.90444,48.80053-76.00025,58.3989-16.54425,6.10185-35.292,5.49648-51.99943.30053C23.89927,620.82408,9.46441,614.27751-5.8,614.1" fill="none" stroke="#e8505b" stroke-dasharray="26 3"/>
+  <path d="M922.2,619.6c-10.73443-13.079-24.5078-32.7496-43.99994-26.49974-9.87783,3.09324-19.04048,9.18011-28.0001,14.19969-7.60062,4.31382-16.11073,8.27042-24,12-24.5134,10.46165-41.01808,36.2945-67.99955,41.30076-10.69,1.47936-21.72029-1.35009-32.0004-4.00076-13.45337-3.066-26.05194-10.86031-39.99991-11.70007-15.92059-.50369-33.5481,7.58714-47.99984-2.50055-24.088-14.32159-39.37441-60.43333-71.99982-50.99973-11.74608,3.34714-23.40693,9.95449-36.00044,8.80017-6.63016-.50552-13.62906-2.97936-20-4.69976-14.52435-4.39541-30.43186-2.28392-44,4.20066-11.10381,5.24859-23.30036,11.99651-36,9.49929-16.62607-3.83753-28.38623-18.322-44-24.39979-24.38528-9.04419-41.13842,19.458-64,21.79972-12.12312,1.31511-23.976-4.35611-35.99994-4.49992-14.45508-.404-25.61525,10.73034-35.99988,19.30051C243.5641,626.72416,235.18391,632.73077,226.2,631.4c-16.20411-4.05738-25.84962-20.38384-36.00045-32.39928-8.599-10.14024-17.63009-24.21584-31.99933-25.70091-15.03.86045-23.86893,16.57133-32.00058,27.39992-7.28062,10.53581-14.91424,22.29635-23.99961,31.40041C90.85713,643.38682,73.89518,648.00589,58.2,646.29989c-23.05374-2.40513-40.82132-21.54914-64-23.39976" fill="none" stroke="#14b1ab" stroke-dasharray="27 2"/>
+  <path d="M922.2,629c-18.4853-20.04236-29.357-30.20739-56-15.89939-13.83416,7.617-29.00036,12.78317-44.00033,17.49871-14.9252,5.03527-27.18255,15.95829-39.99971,24.70074-25.08917,18.1983-49.39132,15.60259-76.00008,2.4994-27.26272-13.211-35.74706,2.9443-59.99988,2.60142-32.92642-5.23635-42.72939-59.58868-80.00011-55.50046-32.5216,5.4906-29.51875,4.73763-59.99981-5.70108-38.59454-9.5863-54.37578,30.8872-84,22.10141-15.5209-4.88525-27.22894-19.70105-44.00007-21.00071-22.05056-.00535-37.11934,25.33715-60.00016,20.79964-14.664-2.69062-28.52378-14.86381-44-9.69943C260.18457,616.59661,250.93458,630.00654,238.2,637.3c-14.0859,8.39137-27.16772-3.21772-35.99982-13.70073-10.42971-11.72291-19.24341-26.16419-32-35.59945-16.6921-12.42413-30.75672,4.17151-40,17.30075-8.975,12.69464-17.37229,27.066-28.00008,38.49943-10.99362,11.78257-27.79428,19.14632-44.0001,16.9-24.18844-3.257-39.97267-26.933-64-30.7" fill="none" stroke="#e8505b" stroke-dasharray="16 2"/>
+  <path d="M922.2,637.3c-25.47782-22.67442-35.22112-19.16569-64-5.9994-12.61323,5.51242-26.8453,5.77017-40.00018,9.19894-27.78484,8.52968-48.90157,36.28336-80,34.09952-11.23571-.32959-22.10608-4.92612-31.9998-9.89962-9.891-5.23984-21.64333-6.88724-32.0001-1.999-10.23085,4.26944-20.42084,11.88114-31.99991,11.19934-29.89178-5.03926-40.5075-53.71834-76.00032-54.79929-13.45161-.327-27.421.54721-39.99957-5.30158C516.13836,609.453,505.49451,603.93959,494.2,604.7c-32.16627.9061-47.92824,43.449-79.99973,29.20011-13.93545-6.17608-27.674-19.41433-44.00026-14.20008-13.997,4.07672-25.18166,16.232-39.99988,17.79979-22.90863,1.87784-40.72158-27.9651-64.00007-13.59953-12.53328,7.10779-21.59555,20.94914-35.9998,24.59961-26.71261,3.26683-42.82891-45.62282-68.00047-52.69976-16.38788-3.41315-27.29789,14.05458-35.99988,25.19917-8.62082,11.88617-17.17184,25.155-27.99978,35.20042-17.272,15.17458-40.12818,21.41111-59.99985,6.79932C23.82556,653.45031,11.43181,639.2166-5.8,634.79973" fill="none" stroke="#f9d56e" stroke-dasharray="4 3"/>
+</svg>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/color-wave/dist/script.js b/color-wave/dist/script.js
new file mode 100644
index 0000000..b1f3dad
--- /dev/null
+++ b/color-wave/dist/script.js
@@ -0,0 +1,33 @@
+console.clear();
+
+const paths = document.querySelectorAll('path');
+const defs = document.querySelector('defs');
+const xmlns = "http://www.w3.org/2000/svg";
+
+paths.forEach((p, i) => {
+  const clone = p.cloneNode();
+  clone.setAttribute('stroke-dasharray', '');
+  const mask = document.createElementNS(xmlns, 'mask');
+  mask.setAttribute('id', `id-${i}`);
+  mask.appendChild(clone);
+  defs.appendChild(mask);
+  p.setAttribute('mask', `url(#id-${i})`);
+  gsap.set(clone, {
+    strokeDasharray: () => clone.getTotalLength(),
+    strokeDashoffset: () => clone.getTotalLength()
+  });
+  gsap.to(clone, {
+    duration: 10,
+    delay: i * 0.1,
+    repeat: -1,
+    strokeDashoffset: clone.getTotalLength() * 3,
+    ease: 'power1.inOut'
+  });
+  gsap.to(p, {
+    duration: 10,
+    repeat: -1,
+    strokeDashoffset: clone.getTotalLength() * 0.4,
+    ease: 'none'
+  });
+});
+document.querySelector('svg').style.opacity = 1;
\ No newline at end of file
diff --git a/color-wave/dist/style.css b/color-wave/dist/style.css
new file mode 100644
index 0000000..05b0ef8
--- /dev/null
+++ b/color-wave/dist/style.css
@@ -0,0 +1,16 @@
+body {
+  background: black;
+  overflow: hidden;
+  margin: 0;
+}
+
+svg {
+  width: 100vw;
+  height: 100vh;
+  opacity: 0;
+}
+
+defs path {
+  stroke: white;
+  stroke-width: 2px;
+}
\ No newline at end of file
diff --git a/color-wave/license.txt b/color-wave/license.txt
new file mode 100644
index 0000000..38311ab
--- /dev/null
+++ b/color-wave/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Louis Hoebregts (https://codepen.io/Mamboleoo/pen/dypZQGo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/color-wave/src/index.html b/color-wave/src/index.html
new file mode 100644
index 0000000..667ee42
--- /dev/null
+++ b/color-wave/src/index.html
@@ -0,0 +1,73 @@
+<svg viewBox="0 0 921.5 600" preserveAspectRatio="xMidYMid slice">
+  <defs></defs>
+  <path d="M922.2-71.4c-13.43656-.412-26.48915,5.62324-35.99986,14.90046-14.855,13.16536-29.04824,42.71862-47.9996,46.90013-17.572,1.75686-29.56248-18.48017-40.00091-29.9-29.18831-35.737-40.50058-23.80184-63.99953,7.89994C717.36217-9.113,702.9969-3.10112,678.1999-18.80068c-9.80071-5.794-20.17021-13.15093-31.99991-13.29919-21.53446.34057-37.32314,19.99687-60,8.99916-23.38951-10.14357-39.21427-55.75048-67.99964-38.69961C498.937-51.89154,479.02251-12.143,458.20042-16.39949c-11.45371-3.33172-19.31009-13.99176-28.00056-21.50037C413.92368-52.97929,402.31529-44.67435,390.2-29.99949c-9.99742,11.65631-18.84148,25.89031-31.99977,34.29966-18.84346,10.84032-34.29633-12.23026-52.00044-15.59961-9.15219-2.33868-18.91.39229-27.99975,1.69967-13.97887,2.1049-26.77544-5.99233-40-8.90051-25.62086-6.35959-41.05658,16.23289-64,12.60093-25.66962-6.55755-37.99794-30.49476-68.00018-15.79995-11.469,5.43541-23.12182,12.3855-36,13.69907C38.95149-5.59716,16.01128-31.37117-5.8-49.9" fill="none" stroke="#e8505b" stroke-dasharray="8 5"/>
+  <path d="M922.2-56.3a56.94513,56.94513,0,0,0-36,12.60012c-14.53055,10.97908-29.409,37.51327-47.99959,38.70049-17.535-1.107-28.95878-21.385-40.00088-33.1-34.37177-42.28981-48.22773-1.69194-71.99957,23.8-15.17058,16.46925-30.61237,13.269-48.00013,2.49878C669.6424-16.81079,660.42445-23.07,650.2-23.5c-22.089-.35286-37.08827,26.6514-60,20.6-26.02393-7.27763-40.04983-64.55317-67.99962-53.8006-23.35574,11.24147-32.78865,42.10628-56,52.80116-15.69881,4.14511-25.8689-13.21158-36.00068-22.2-13.07129-13.02322-23.6025-12.90669-35.99967.90009C383.38367-13.56468,374.59275.985,362.20014,11.1001c-16.20165,13.09869-30.341-2.107-44.00021-10.90058-6.9496-4.44042-15.65447-7.58087-24-6.79922C287.71877-6.15244,280.66752-4.103,274.2-3.50006c-9.34789.98225-18.92261-2.18495-28-3.90008-20.23839-3.97656-34.479,6.7327-51.99982,14.10089C164.92935,19.50593,146.38282-18.809,118.2-17.10041c-12.61817.69626-23.98422,8.03261-36,11.20034C48.334,4.54672,20.14637-19.465-5.8-37.6" fill="none" stroke="#e8505b" stroke-dasharray="23 2"/>
+  <path d="M922.2-39.1c-14.04.007-28.65536,3.55258-39.99989,12.10028-15.13446,10.18256-31.53287,34.08971-51.99971,23-20.18208-10.4688-36.22226-50.58582-60-45.90088-24.44324,8.54316-32.33009,41.53223-56.0006,51.8003C691.84,10.00314,674.946-13.38164,654.20006-16.40042c-30.30464-2.485-50.05055,53.57238-80.00013,18.59989-12.61224-13.14236-28.55912-54.67817-47.99936-52.39994-21.39506,5.4936-35.01355,39.4101-52.0011,53.59978C445.478,28.28,433.26837-31.16834,406.20014-24.10063c-6.21795,2.33463-11.72848,8.10152-16,13.00081-8.98756,10.157-17.10208,22.42577-28,30.69989C345.88745,32.10033,330.93281,14.17158,318.2,5.09948,311.424.2022,302.69562-3.39677,294.2-2.49964c-10.55386,1.20262-21.23322,5.32248-32,4.39928-21.92555-2.15679-32.92833-.09792-51.99983,11.601-22.17142,13.86705-34.99359,13.9364-56.00005-2.50139C144.42533,3.7228,134.2838-4.7949,122.2-7.7999,110.18133-10.72681,97.77227-6.35379,86.2001-3.39974,73.25632-.18466,59.24117.43781,46.2-2.60024,27.78866-6.61468,11.108-16.39235-5.8-24.3" fill="none" stroke="#e8505b" stroke-dasharray="24 4"/>
+  <path d="M922.2-20c-13.47139.34546-27.77378,1.31331-39.99994,7.5001C869.3-6.75364,857.17355,4.80441,842.2002,3.60023c-32.05478-4.4394-48.32175-70.92042-84.00009-35.1995C741.7454-16.71348,728.32642,13.8032,702.20044,9.70061,686.0963,7.05175,673.82923-5.93151,658.2001-9.80031c-27.63938-4.53285-39.38884,31.47642-64.00025,36.89987-19.35218,1.91811-30.909-27.83129-40.0004-41.399-6.81777-10.14123-14.00345-26.14263-27.999-26.5011C508.5262-37.75549,493.90032-6.7464,482.19939,6.49932c-18.848,24.05407-30.18763,18.04535-47.99931-2.69994-6.48068-6.89065-13.84507-16.19935-24-16.89947C388.17237-11.05484,376.9236,25.904,354.1998,30.09958c-16.68629.90652-26.77985-16.40443-40.00012-23.89889A30.425,30.425,0,0,0,290.2,2.20054c-6.42219,1.68687-13.47888,4.18337-20,5.49942-6.34586,1.11247-13.60428,1.28065-20,2C233.76256,11.14753,219.69388,20.957,206.2002,29.60041c-14.98621,9.584-28.91052,10.919-44.00011.29889C143.543,17.35719,126.7344-3.37813,102.19981-1.99967,88.97134-1.261,75.51055,1.58574,62.2,1.09958,39.06822,1.05377,16.5136-5.58293-5.8-10.9" fill="none" stroke="#e8505b" stroke-dasharray="11 3"/>
+  <path d="M922.2,0c-14.06338.09731-30.64875-.88817-44.00129,3.10029-17.22254,5.03642-31.89948,11.14245-47.99864-.701-15.48757-9.81861-28.75382-35.19743-47.99964-35.29993-20.19241,3.19023-32.85851,27.04845-48.00086,39.2-15.14448,13.47626-31.46469,11.1713-47.99968,1.8C677.24652,3.15963,668.319-3.56059,658.2-5.9c-12.735-2.85113-23.69833,6.67925-32,15.10034-21.26136,21.9151-37.79119,45.50129-59.99972,8.69916-9.27461-12.65925-25.35869-55.04228-43.99977-48.79975-23.47008,10.80186-35.676,55.27641-60.00034,63.10053-11.96526,1.63545-20.587-9.72368-28.00027-17.4002C425.05632,4.62081,412.4924-9.21739,398.2.90066c-18.51621,12.87577-34.59938,46.18428-60,25.29869-10.35065-7.73741-19.22265-19.25883-32-23.09945-11.02464-2.809-21.92276,3.44256-32.0001,7.1C265.31047,13.40761,255.29442,14.54174,246.2,17c-20.787,5.17216-35.49059,23.5758-55.99966,29.10075-9.65377,2.25489-19.9811-1.32713-28.0002-6.70112C147.10587,29.3159,134.4417,15.094,118.2,6.7a61.37693,61.37693,0,0,0-20-5.79977C91.28146-.24289,3.3368.49577-5.8.3" fill="none" stroke="#f9d56e" stroke-dasharray="11 4"/>
+  <path d="M922.2,20c-18.63657-.37017-37.295-4.61473-56-3.19941-46.60907,4.571-57.07375-49.42844-88-36.30128C754.7686-7.69627,740.58087,27.43639,710.20014,21.59991c-14.65832-2.89374-27.302-11.76184-40-19.10024-29.50795-17.76954-45.44331,14.88327-64.00031,32.10063-23.52751,23.97605-35.67186,1.61463-48-18.90072C550.70834,4.359,538.83215-24.55594,522.20051-20.40054c-18.75053,7.88236-31.805,40.1063-48.00114,54.59986-29.90017,28.12966-43.25461-33.14483-71.99926-25.4C384.36845,15.36168,371.86555,41.69481,350.19983,33.7c-18.64965-7.26758-29.77446-32.55847-51.99969-29.90043C289.80867,5.28922,281.86545,10.22493,274.2,13.7c-7.53853,3.435-16.13347,6.04715-24,8.59993-17.72292,5.02747-32.15706,17.32635-47.99967,26.10068C161.799,70.177,136.18782,11.76556,98.19968,3.00062,80.06308-1.57714,60.68572-1.80475,42.2.5998,26.10838,2.83513,10.11178,7.31916-5.8,10.5" fill="none" stroke="#14b1ab" stroke-dasharray="31 4"/>
+  <path d="M922.2,39.1c-15.1026.205-29.61665-5.37535-44-9.20017-11.89183-3.141-24.73976-4.71587-36-9.89983C832.06856,15.33269,822.91079,7.84,814.20007.99986,800.58225-9.81393,788.598-13.08595,774.2-1.59932c-20.53381,16.2535-34.17858,39.72743-64,28.19855-15.76877-4.82134-29.45365-14.81476-43.9997-22.19971-27.686-14.3263-43.48389,16.823-60.00048,33.50056C599.19868,45.11772,588.93,55.17024,578.2,49.49963,558.24573,36.04308,552.65945,8.76968,534.19966-6.29969c-10.57749-7.8317-21.08441,1.40357-27.99959,9.50028C499.32146,11.2012,492.624,20.93918,486.2,29.3c-7.2605,8.75629-15.7601,20.00659-27.99989,21.00008-21.50458-1.4501-30.35452-30.044-52.00013-31.3-15.15707.7778-25.26842,15.81944-40.00011,18.29951-23.52,2.44434-35.3237-25.14494-55.99992-31.19921-8.24867-2.34657-17.00469,1.24353-23.9998,5.50007-7.63222,4.45783-15.83369,9.4544-24.00018,12.89939-11.96538,5.075-24.77145,9.4403-35.99983,16.10037C213.645,47.6876,201.02189,57.08237,186.2,58.29992c-28.09309.60456-46.88251-24.68906-68.00016-39.49943C98.18473,3.06792,71.14066-3.74266,46.19991,2.00029,28.13225,6.17622,11.511,15.45064-5.8,21.8" fill="none" stroke="#e8505b" stroke-dasharray="27 5"/>
+  <path d="M922.2,56.2c-15.82593.39858-30.116-7.786-44-14.30022C865.12474,35.8,850.89583,31.31134,838.2,24.4c-24.36434-12.81246-37.48636-32.67017-63.99987-9.69945C753.56039,32.17923,742.36256,46.976,714.20005,32.69929c-9.24171-4.21113-19.19176-8.3108-28-13.39936-9.04328-4.79375-18.068-11.1503-28-13.99995C636.62856-1.28894,622.384,21.12684,610.19989,35.1,593.92243,54.243,580.9482,66.88709,562.20015,41.69943c-9.997-11.473-22.48283-40.73649-39.99962-38.3-17.55132,5.74726-30.16033,30.92673-44.0011,43.39985-8.47443,8.59566-20.34134,14.86009-31.99951,8.4C427.48908,44.59117,414.58541,21.128,390.2,33.70072c-9.76262,4.72467-21.28905,9.31859-32,4.89865-20.3319-7.72454-35.77863-38.76241-59.9997-30C286.86194,13.51354,277.1,22.34371,266.19984,28.09967,254.83273,34.37767,241.961,38.47342,230.2,43.89989c-16.41814,7.52552-33.11753,18.67172-52.00007,16.29977-27.23123-3.60356-46.39864-26.11166-68-40.89935-19.19253-14.05423-45.19935-22.40588-68-12.29969C25.39948,13.84812,10.57831,25.28748-5.8,33" fill="none" stroke="#f9d56e" stroke-dasharray="23 2"/>
+  <path d="M922.2,70.5c-13.14042.40658-25.27278-6.20721-36-13.10028a280.72044,280.72044,0,0,0-28.0001-15.99963c-9.19564-4.521-18.99254-9.11048-27.99985-14.00024-9.70314-5.208-20.46462-12.38055-32-10.39982-24.23341,5.09917-40.25886,41.67285-68,28.99962-6.656-2.99282-13.47229-7.45723-20.00013-10.69958-9.10545-4.5635-18.94261-8.94225-27.9999-13.60015-16.14734-8.47976-35.378-20.45663-51.9999-6.29929-14.87924,11.95044-24.46989,30.08728-40,41.2995-12.78478,8.93679-23.85752-.88366-32-10.80074-9.5201-10.35572-19.90222-30.15681-35.99964-28.69994-18.73593,5.33462-31.945,29.74048-48.00093,41.09989-9.62451,7.56086-20.97158,9.771-31.99956,3.7-13.97767-7.62224-26.64687-22.22058-44-19.999-6.46617.81187-13.496,2.92092-19.99992,3.49962-11.98686,1.277-23.25433-5.31622-31.99983-12.90034-8.7646-7.18906-17.32115-16.26329-28.00009-20.59966-11.32309-4.81514-23.17717,1.99317-31.99991,8.90059-8.79976,6.60881-18.06857,13.843-28.0002,18.69939C246.87812,45.3034,234.043,48.41251,222.2,52.80005c-12.79415,4.5817-26.20213,9.57705-40.00007,9.29966-41.37069-.24379-66.56542-40.15807-103.99981-51.5C45.23186-.84338,20.85029,31.39911-5.8,44.8" fill="none" stroke="#e8505b" stroke-dasharray="15 2"/>
+  <path d="M922.2,81.4c-20.388.972-35.71863-15.18207-52.00023-24.99978C858.92246,49.18555,846.35514,43.343,834.2,37.8c-9.95434-4.316-20.76686-10.49463-31.99993-8.59994-15.959,3.45579-26.24162,18.31056-40.00027,25.99968-21.875,12.74038-37.56329-9.637-55.99986-17.80008C695.8212,32.6428,684.55,28.72381,674.2,23.8999c-11.12753-4.7459-23.59139-11.44417-35.99994-8.2-25.33731,6.32514-44.77261,62.65907-71.99974,46.00067-13.99-8.5463-22.92112-26.62111-40-29.60106-17.48176-.61115-33.98228,21.75978-48.00072,31.19985-10.06026,7.74251-23.72326,12.63032-35.9997,7.29991-13.33614-5.34059-25.18149-15.75841-40-16.89887-11.95185-.64218-24.93765,1.47833-35.99979-4.30085-19.75342-8.42374-37.89447-39.74185-59.99979-34.2C297.20343,17.83449,289.41114,24.585,282.2,30.3,272.50487,38.12961,262.06421,46.35475,250.2,50.59985,241.34935,53.88331,231.41651,55.50747,222.2,57.4c-7.76847,1.50582-16.15435,3.41054-24,4.5a106.79816,106.79816,0,0,1-52-5.1C130.70188,50.83658,116.44127,41.40154,102.2,33c-16.56518-9.52-36.91323-21.068-56.00009-11.89983C27.33935,30.47007,12.84337,47.18459-5.8,57" fill="none" stroke="#e8505b" stroke-dasharray="9 2"/>
+  <path d="M922.2,88.8c-20.39424,1.5871-35.82676-14.45168-52.00018-24.29993-9.90109-6.42566-21.13143-11.48215-31.99989-16-8.92986-3.42906-18.3288-7.95187-27.99991-8.60016-14.5738-.3103-25.28746,11.48377-36.00012,19.70018C748.8784,80.64033,735.0278,59.02833,714.2,45.49937c-10.854-6.80969-24.02638-9.222-36-13.29938-11.846-3.45735-23.49259-9.95451-35.99989-10.60023-20.97548.66645-33.50482,24.59037-48.00053,37.09958-33.12073,32.31207-44.68372-16.92709-75.99955-10.1-22.68633,7.22143-39.35852,29.22977-64.00009,31.30039-12.664.85582-24.44682-5.48931-35.99988-9.69994-10.11894-3.85813-21.43448-4.41167-32.00009-6.19943-30.24945-4.56347-46.83453-41.32566-71.99955-43.80117-12.65684-.06-22.84376,9.81922-32.00044,17.40069-25.15676,22.25-35.25733,23.99512-68.00012,25.19935-23.84957,1.98272-48.3415,3.40886-71.99982-1.09937-13.82689-2.45978-27.41335-7.657-39.99995-13.8C91.83238,42.77932,81.32715,36.47747,70.2,33.1c-16.66562-5.74-31.50941,3.48406-43.99976,13.90071C16.20607,55.02432,5.72913,63.64428-5.8,69.4" fill="none" stroke="#f9d56e" stroke-dasharray="28 3"/>
+  <path d="M922.2,93.2c-19.7465,2.514-35.77481-11.96076-52.00014-20.8a213.89251,213.89251,0,0,0-31.99992-14.2c-7.67909-2.80146-15.867-6.30993-24-7.5001-24.58122-3.15986-37.0781,28.12528-59.99979,25.70078-16.02294-3.91094-26.19476-19.09274-40.00045-27.10038-10.75733-6.59488-23.92714-6.97336-35.99988-9.20015C667.3952,38.25745,656.81315,33.76878,646.2,31.19982c-10.05133-2.46268-20.41757,1.62611-27.99991,8.20081-13.42159,11.07389-24.08854,26.604-40,34.39951-12.123,5.76375-24.86479-.83672-36.00015-5.80079-11.439-5.57414-24.57961-4.7402-36,.40138-13.28435,5.16148-26.21927,12.35477-40,16.1992C448.89163,90.0995,431.18463,85.65308,414.2,81.29922c-11.94319-2.83882-24.89249-4.00926-36-9.59935-21.22832-10.54046-34.46655-32.944-55.9996-42.80055-25.28644-8.90183-44.87864,27.98908-68.00083,36-12.69561,4.92166-26.83,2.24557-39.9996,1.40052-19.91955-1.10234-40.1117.65435-60,1.69981-17.25787,1.38984-35.42265,3.413-51.99995-2.90009-13.52317-4.63476-25.95635-13.263-40-16.39977C49.123,45.64076,36.37217,53.11494,26.2002,60.60025,16.15045,68.00287,5.74447,76.11612-5.8,81.1" fill="none" stroke="#14b1ab" stroke-dasharray="21 3"/>
+  <path d="M922.2,95.7c-18.5887,3.18323-35.53859-7.6972-52.00015-14.59989C858.60059,76.04369,846.09192,72.18059,834.2,67.89988c-8.81541-3.21465-18.42539-7.24518-28-6.19988-20.02727,2.16071-34.48275,29.8743-55.99976,20.00029-14.59039-7.52876-24.74035-22.43156-40.00031-28.90023-11.39641-4.42581-24.1481-1.58648-36-2.90015-12.2583-.79771-23.81449-6.92684-35.99989-7.90034-14.56065-.55672-25.84377,11.08832-36.00017,20.00032-17.04446,15.47094-31.68913,27.72255-56,21.09937-8.97782-2.174-18.76612-3.83089-27.99994-2.49909-17.48234,2.74461-34.60691,8.66228-52,11.89955-26.98216,5.95041-63.47955,4.54629-88.0001-8.99924-17.92765-10.88574-30.743-28.75831-47.99973-40.50064-34.897-23.14053-54.38843,34.51736-87.99987,32.59985-12.06589-.367-23.98156-4.82937-36.0003-5.79935-17.37132-1.66036-35.15416,1.261-52,5.39946-16.95587,4.63525-33.91046,14.557-52,10.90013C88.06881,83.46456,75.6808,74.717,62.20009,70.19986,36.76408,61.71149,16.80371,85.97314-5.8,93" fill="none" stroke="#f9d56e" stroke-dasharray="16 3"/>
+  <path d="M922.2,97.8C908.83647,100.41332,895.1149,96.75575,882.2,93.4999,870.29273,90.51668,857.94876,87.5635,846.2,84c-19.253-5.61972-36.17544-18.86095-55.9999-6.89946C775.43156,85.45692,763.004,96.8629,746.2,85.3994c-21.893-15.26622-29.8399-32.46516-60-25.39871-7.7444,1.38579-16.21285,1.93684-24,.599-18.998-3.94857-30.1154-9.79047-47.9999,2.301C595.35505,75.32434,577.95784,93.80649,554.2,95.49984c-11.8664.31658-24.13131-1.39069-36-.39955-24.02254,2.1685-48.29965,4.2691-72,8.89985-23.31322,4.97136-47.24638,5.56071-68-7.90078C364.83827,87.41834,353.9697,74.79256,342.2,64.2c-8.75073-7.87029-19.43966-16.84219-32-15.59983C286.4753,51.936,274.00231,79.21008,250.2,82.4c-10.9595,1.13852-21.68379-3.89277-32-6.8-10.18108-3.09943-21.4518-4.34961-32-2.59974A110.87887,110.87887,0,0,0,146.2001,87.50019c-12.79923,7.08489-24.94233,17.75588-40,19.29993-14.42867,1.2116-27.5922-6.87442-39.99995-13.10031C39.35909,78.94613,19.70427,94.642-5.8,102.3" fill="none" stroke="#14b1ab" stroke-dasharray="20 5"/>
+  <path d="M922.2,100.9c-11.64984,2.02742-24.23766,1.37137-36,1.1-11.92755-.26467-24.36746-.60283-36-3.5-18.73665-4.00756-35.92255-21.27052-55.99978-14.70007-8.22316,2.66047-15.906,8.061-24.00022,11.00024-11.82816,4.54522-22.97609-1.33329-31.99991-8.80076-11.39554-9.13034-24.19171-21.08885-40.00016-18.599-7.90667,1.193-16.09654,4.00664-24,5.19961-13.36624,2.66819-26.68554-2.89575-40-2.60046-11.71779.585-22.23367,7.43633-32,13.30054-11.40621,6.96359-23.47453,13.85235-36,18.59987-11.31368,4.48274-23.98693,4.90684-36,5.09989-20.06426,1.163-43.98263-.4913-63.99994,1.69936-20.22382,2.22614-39.30978,13.73692-59.99994,11.50112-47.55633-3.78357-69.2421-72.93893-107.9999-55.6008-16.472,7.2491-28.86151,24.88749-48.00012,25.30061-11.26705-.2011-21.66207-6.249-32-10.00027-20.25089-8.2578-42.44119-1.952-60,9.70076-9.87378,6.33645-19.1092,14.69235-27.99993,22.2995C121.24205,119.5269,110.44484,127.27665,98.2,127.3998c-20.77695-.31623-36.07058-18.27549-56.00006-21.99939C26.19875,101.71128,9.69811,106.34694-5.8,110.3" fill="none" stroke="#e8505b" stroke-dasharray="26 3"/>
+  <path d="M922.2,106.4c-14.54728,2.05046-29.57366,2.98154-44,5.90037-20.52109,3.917-34.42279.19034-51.99992-10.30108-7.343-4.0706-15.43089-8.69716-24.00022-9.1991-9.89812-.63582-19.2108,4.69942-28,8.49983-32.99138,15.1993-45.38245-30.89869-80.00006-22.49965-10.48993,2.583-21.1041,6.89709-31.99991,7.49941-11.88347.39648-24.412-2.02038-35.9999,1.70062C615.20755,91.30418,604.70606,97.18408,594.2,101.7c-17.82824,7.37567-36.6357,14.0872-55.9999,15.60021a287.91014,287.91014,0,0,1-36.00007.29991c-10.50033-.47874-21.49011-1.94224-32-.9-15.578,1.22865-29.61856,9.36311-44,14.70015-23.35383,9.294-46.93519-2.53888-63.99978-18.601-23.01093-19.36184-43.56864-48.82213-76-28.199-11.98309,7.12382-25.38259,16.17672-40.00043,12.29924-16.19435-4.45879-30.52335-16.62111-48-15.99907-28.91159,1.72532-48.8236,26.3909-67.99989,45.29947-37.20764,37.81187-50.63377,14.32858-87.99987-4.50046A71.07779,71.07779,0,0,0-5.8,116.4" fill="none" stroke="#14b1ab" stroke-dasharray="14 4"/>
+  <path d="M922.2,115c-9.22446.89984-18.9951,1.70385-28,4.00015-9.25007,2.37394-18.62811,6.20192-28,8.09984-31.70141,6.3598-45.19552-25.46695-71.99981-22.40067C783.19548,106.58506,773.38587,114.00255,762.2,115.1c-12.23658.82955-22.486-7.9255-32.00011-14.40006C707.06775,84.6744,694.85654,89.404,670.2,96.90071c-11.64107,3.28353-24.28279,3.303-36,6.19921-12.2499,3.08048-23.83611,9.4412-36,12.8-10.26532,3.0566-21.4155,4.15909-32,5.5a259.81044,259.81044,0,0,1-56,3.79964c-24.19749-1.19619-41.52768-4.81383-63.99983,7.80112-10.26312,5.26258-20.5347,12.15665-32.00017,14.4992-28.82211,5.13284-51.18786-18.57-71.9999-34.69985C330.748,103.80846,317.54271,93.7451,302.2,94.60014c-12.5052.65552-23.8617,7.76968-35.99992,10.09992-33.30461,5.62805-49.3325-33.27546-88.00011-11.49944-20.90555,12.42915-34.994,33.44689-52,50.29929-18.78246,19.209-36.37027,26.1474-59.99983,9.09943C44.47807,138.55811,22.29692,115.90917-5.8,121.7" fill="none" stroke="#f9d56e" stroke-dasharray="12 5"/>
+  <path d="M922.2,127.1c-9.24639.1941-19.11047.62961-28,3.40011-22.16125,7.42246-37.2,18.85954-60,4.6992-12.26061-7.26407-24.61056-19.16767-39.99994-16.699-8.1733,1.52377-16.155,5.72632-24.00009,8.29976-18.366,6.51129-33.049-9.13322-48-17.00057-19.89367-10.99489-35.5219-8.06358-56-1.29874-7.8132,2.38829-16.31515,4.71929-24,7.49928-7.96271,3.05937-16.23354,7.09377-24,10.60007-25.01054,12.34035-42.44062,3.36282-68.00012,3.89948-23.81815,1.28586-48.2208-1.487-71.99991-.0002-13.07825,1.4255-25.21837,8.129-35.99994,15.30075-12.97182,8.54436-27.67377,18.56889-44.0001,15.99965-21.04505-3.49991-38.59388-17.38928-56-28.79953-9.89749-6.73523-20.342-14.09534-31.99994-17.40011-15.61009-4.9765-32.11431,1.00437-47.99995-.59991-12.98815-1.24057-24.59449-8.48129-35.99988-14.20049-25.21542-13.59014-45.28094-4.24766-64,14.90089-19.82513,18.75876-42.71254,58.80355-71.99964,59.70014-15.61808-.43717-28.27774-11.90242-40.00049-21.0006C33.9876,141.61541,16.6766,123.637-5.8,126.8" fill="none" stroke="#f9d56e" stroke-dasharray="17 4"/>
+  <path d="M922.2,142c-39.23927-5.51627-51.59659,20.91691-80,10.90062-15.75667-6.1504-29.64577-22.10543-47.99993-18.30028-8.1201,1.668-16.04434,5.91785-24,8.09975-20.04221,5.64395-35.50131-11.87624-52.00019-20.0001-22.471-12.44457-41.43666-11.096-63.99983.00072-15.18605,7.06752-28.26024,18.86488-43.99988,24.79944-18.08145,6.6935-35.10565-5.1891-52.00011-10.00073-8.94073-2.58327-18.77765-3.01792-28-3.69932a243.26037,243.26037,0,0,0-36,.2c-30.12186.68921-44.79388,17.124-67.9997,32.50056-14.15111,9.27047-28.23353,10.02953-44.00036,4.49856-22.733-6.85775-42.79384-20.43059-63.99982-30.69951-18.71142-9.48015-40.34472-10.1722-60.00024-16.69938-12.4713-4.2178-23.87421-11.9065-35.99978-16.9006-23.20256-10.575-43.89835,1.91741-59.99991,18.70088-20.457,19.74755-44.3568,60.40037-75.99978,58.00007-15.61586-2.21808-28.30707-13.54453-40.00049-23.30054C31.08738,147.56747,15.65618,129.47174-5.8,131" fill="none" stroke="#f9d56e" stroke-dasharray="26 3"/>
+  <path d="M922.2,158.7c-40.41887-10.95072-50.3275,15.41223-80.00007,7.00069-14.33973-5.12712-27.80943-17.1832-43.99992-14.30038-9.545,1.53572-18.58156,6.689-28,8.69962-13.35016,2.83881-25.56508-5.09859-36-12.40043A299.74308,299.74308,0,0,0,706.19993,130.3c-19.89719-10.9914-37.9884-9.83157-55.99986,4.00062-21.09017,15.109-39.88595,43.80425-67.99984,24.799-12.67854-8.1362-24.94042-18.553-40.00035-21.89944-28.06848-6.56929-60.08639-3.20093-84,13.69931-16.97073,11.48264-31.23006,29.32272-51.99971,33.90073C394.282,187.01068,381.832,184.04017,370.2,181.5c-26.78192-6.1587-51.30736-19.29332-75.99992-30.90018-17.36007-8.23376-35.08335-16.47326-52-25.59987-22.74251-12.511-40.37853-18.64-64.00008-3.19925-40.39922,27.17543-68.458,96.33525-123.99984,51.39883C35.21412,159.98407,19.34762,135.24379-5.8,135.2" fill="none" stroke="#14b1ab" stroke-dasharray="8 5"/>
+  <path d="M922.2,176.1c-18.1517-6.05713-29.62913-7.908-48-1.49926-7.61492,2.31883-15.959,4.78535-24,4.39914-15.07082-1.25516-28.48347-12.06226-44-10.4995-23.37366,3.06258-36.05687,18.62794-60,2.69895-12.11363-8.11387-24.03159-17.37856-36-25.69924-12.511-8.69107-28.32775-18.68731-44-12.69979-18.288,7.82658-29.32632,26.19367-44.00031,38.79941-13.84732,12.30964-26.08953,12.23021-39.9997.19973-11.76686-9.98747-21.93647-23.02406-36.00009-29.99925-26.32034-12.98776-56.56886-5.24813-80,10.30019-37.00619,26.55307-43.99409,50.34461-96,43.899-22.27809-1.67866-44.689-7.17575-63.99974-18.69965-30.2274-17.15786-75.73814-60.57315-112-50.2-47.00034,13.72867-75.74754,88.5869-132.00034,56.29985C39.19212,172.1071,20.5352,140.688-5.8,141.20008" fill="none" stroke="#e8505b" stroke-dasharray="16 2"/>
+  <path d="M922.2,193.5c-14.33693-5.84093-28.21519-11.49129-44.00013-8.39924-7.80241,1.29955-16.06757,3.47516-23.99993,3.79912-9.43371.28089-18.814-3.08956-28-4.60014-17.26535-3.48572-31.85821,6.08555-47.99989,9.701-15.29877,3.35852-28.76379-6.52662-40.00005-15.60125-12.03577-9.377-23.80122-19.9363-35.99993-29.09959C669.96,124.56568,654.72166,144.00947,634.2,169.90055c-8.5136,9.89915-17.86007,23.49041-31.99967,24.5998-21.59456-1.00068-38.07592-40.73025-60.00079-51.79972-10.76642-5.90431-23.97423-8.37141-35.99954-5.40048-16.11684,4.20324-31.18117,13.10361-44,23.59966-19.02119,15.45871-35.427,36.60966-59.99994,43.30008-11.58483,3.17816-24.058,3.83921-36,4.4-16.02031.74557-33.05132.44827-48-5.99982-18.39194-7.79216-32.633-22.9143-48.00008-35.2-14.04858-11.42866-30.34015-20.93426-48-25.39994-29.98907-8.15775-57.22258,12.05957-79.9996,29.00024-39.51516,29.6514-70.69762,28.88192-108.00018-4.10123C22.78042,157.48311,9.8975,146.40385-5.8,146.89994" fill="none" stroke="#e8505b" stroke-dasharray="2 3"/>
+  <path d="M922.2,210.4c-15.17973-6.70027-30.81448-15.33507-48.00013-13.69929-9.14891.64872-18.83682,1.74432-27.99989.79925-9.14144-1.0476-18.90283-2.44882-28-.29956-17.199,3.57152-33.75879,17.9085-51.99987,11.49947-9.02922-3.07582-16.87827-9.88536-24.00008-16-10.62952-9.16849-21.4876-19.00183-32-28.3-12.87107-11.23789-30.53731-26.33638-48.00016-15.29918-20.05056,13.53535-29.192,38.51681-48,53.39927-32.62834,23.71142-48.87361-56.81353-88.00025-63.09931-21.00619-4.85485-40.13208,9.334-55.99981,21.2992-18.86205,14.51289-34.46523,34.07516-55.99977,44.90024C401.76856,211.862,387.79,215.33038,374.2,217.99982c-13.05206,2.49456-26.65406,5.06134-40,4.50016-30.84223-1.62251-48.75251-30.65586-72.0001-47-23.71644-17.52549-56.22174-22.67925-83.99984-12.49976-16.623,5.52975-31.83644,15.17872-48,21.7997-21.19545,9.05545-46.39229,13.11317-68,3.1997-9.91565-4.20454-19.3437-10.76329-28-17.09978-11.59306-8.50642-24.77545-18.6088-40-16.9" fill="none" stroke="#f9d56e" stroke-dasharray="17 3"/>
+  <path d="M922.2,226.1c-9.49078-3.77455-18.64535-9.54535-28-13.60007-11.20979-5.03572-23.85318-6.23456-36.00012-6.19959-6.44094-.32249-13.55563-.91782-19.99993-1.00031-24.74333-1.11784-43.551,25.46154-67.99986,16.80054-9.12152-3.56772-16.97833-10.78016-24-17.40076C738.49771,197.31887,730.03087,189.53844,722.2,182.3c-26.418-24.39548-48.588-46.54226-75.9998-8.69941-11.15856,13.20833-25.78869,43.66438-43.99957,45.3-32.61543-2.40753-45.73588-94.22662-100.00089-72.70027C473.302,160.40122,453.02249,187.3276,426.2,204.59984,410.29844,214.52429,392.00288,220.41433,374.2,225.9c-14.22142,4.14378-29.02215,9.041-44,8.7001-30.54486-1.927-47.038-33.47063-72.00048-47.29953-24.88016-13.54163-56.88912-11.83179-83.99949-7.10121-31.52911,6.52829-63.369,18.269-96.00017,13.60035C63.89955,191.23316,50.49567,184.08,38.2,176.59987c-13.12069-8.15193-27.73665-18.49417-44-15.5" fill="none" stroke="#e8505b" stroke-dasharray="21 5"/>
+  <path d="M922.2,240.1c-15.39194-5.54192-28.50239-16.62817-44-21.90008-14.03242-4.02162-29.43045-6.79886-44-4.60043-21.65471,4.07621-40.74263,30.76689-63.99991,17.90025C759.32182,225.45957,750.88276,215.07779,742.2,206.4c-8.78021-8.87378-18.42984-17.88774-28-25.9-11.24451-9.09364-24.54108-20.40831-39.99982-18.40018-24.85513,4.55721-38.53964,41.83769-56.00072,58.69951-35.41182,36.24426-52.17856-55.42425-87.99988-67.99885-19.40843-8.75966-38.07575,6.00317-51.99937,18.30009C463.96206,183.181,450.05208,196.4988,434.2,206.5c-16.08462,9.79361-34.54281,15.50344-51.99987,22.30029-23.91048,8.25681-52.06011,24.3515-76.00006,7.99955-23.57277-15.74247-40.738-40.54005-72.00029-39.999-10.15162-.48841-139.47947.54592-147.99972-.60053a87.49024,87.49024,0,0,1-23.99994-6.10043c-10.755-4.46952-21.57583-10.11714-32.00008-15.2998-10.98039-5.43174-23.75978-9.60107-36-6.2" fill="none" stroke="#14b1ab" stroke-dasharray="14 5"/>
+  <path d="M922.2,251.9c-21.38226-6.87-37.72-25.00976-60.00017-29.79955-10.2576-2.90819-21.91475-4.41059-31.99982-.10018-17.73131,7.57348-35.085,30.45249-55.99986,18.79932C763.04127,234.65209,754.637,223.77293,746.19993,214.5a204.7057,204.7057,0,0,0-24-22.9c-12.70744-9.72092-27.1277-21.19756-43.99982-20.50016-26.735,3.22149-39.473,36.78405-56.00067,54.7995-17.04363,20.34491-30.18973,14.9671-43.99941-4.8-12.95637-17.76035-22.248-39.77724-39.99973-53.49958-21.22592-15.55145-39.30987-3.62126-56.0002,11.70088-12.46944,11.2245-25.122,23.2818-40.00017,31.29926-17.6299,9.21831-37.70128,13.22346-55.99968,20.90073-14.631,5.54857-28.95381,12.98692-44.00018,17.39954a44.05442,44.05442,0,0,1-35.99994-4.20078c-10.981-6.40588-21.09139-15.17143-32.00016-21.69929-19.08658-11.926-35.12772-8.2765-56-6.29934-29.816,2.13508-59.01632-6.4753-87.9999-12.10083-18.3858-3.91784-37.78222-2.69256-56.00008-7.39944C47.93131,189.992,22.61091,167.872-5.8,177.7" fill="none" stroke="#e8505b" stroke-dasharray="21 2"/>
+  <path d="M922.2,261.1c-19.56092-4.65551-34.05082-20.33111-52.00012-28.49984-13.50591-6.59781-30.4541-11.25431-43.9998-2.29943-14.37741,8.39454-29.88933,26.71773-47.99991,17.399-9.48625-4.9451-17.07189-13.96155-24.0002-21.8997-8.34075-9.94687-17.44572-20.33583-28.00016-27.99986C713.46161,188.744,698.22334,180.80758,682.2,181.29992c-29.63688,2.09073-42.00178,34.04186-60.00042,53.09964-19.91993,22.43867-33.62835,11.85881-47.99961-8.90009-10.03252-14.34435-18.83887-30.87659-32-42.69951-30.9848-27.1528-52.85612,5.70736-75.99995,24.50057a75.40392,75.40392,0,0,1-32.00018,15.89923c-11.87357,2.38224-24.36916,3.91062-35.99986,7.40036-13.64482,3.872-26.96576,9.88519-40,15.39989-25.91157,11.70449-39.53686,11.92523-63.99989-3.40076-9.8053-5.98911-20.4782-12.12228-32.00018-13.89907-12.07921-1.86389-24.33595,1.94842-35.99991,4.6-21.52918,5.32861-43.69452-.9423-64-8.20058-13.11318-4.83457-26.46194-10.3338-40-13.89964-10.317-2.859-21.47591-4.08114-32-5.89981a120.52036,120.52036,0,0,1-27.99993-8.80033C40.38111,186.30456,18.24068,174.84082-5.8,186" fill="none" stroke="#f9d56e" stroke-dasharray="21 5"/>
+  <path d="M922.2,268.1c-31.35425-4.69586-63.94541-51.5014-95.9999-31.70034-13.14518,7.98045-27.108,24.53064-43.99991,17.20017-21.761-11.2251-31.75344-36.70847-52.00057-49.99937C717.46721,195.0832,701.40558,191.40771,686.2,192.5c-38.31639,2.67835-47.77671,42.20743-75.99951,60.00086-17.02134,9.52763-31.00041-8.83455-40.00035-21.10125C561.66473,219.90815,553.35154,206.88365,542.2,197.7c-28.04231-22.98086-47.38057,1.2552-67.99994,19.90055-9.8527,9.06422-22.32229,16.41132-36.00026,16.89891-10.38224.6248-21.6614-.52279-31.99978.80062a122.87843,122.87843,0,0,0-28,6.89988c-17.01763,5.72843-33.5935,15.77441-51.99991,15.70032-14.24727-.30062-27.059-7.97094-40-13.00051-25.64205-10.85724-40.13876.02248-64,6.90094-23.62426,6.00712-46.96123-5.7569-68.00017-15.30053C142.63819,230.99052,130.57693,225.247,118.2,221.8c-13.10631-3.79687-27.18317-5.47716-40-10.3001C48.48869,199.97113,27.00312,180.10234-5.8,198" fill="none" stroke="#f9d56e" stroke-dasharray="3 3"/>
+  <path d="M922.2,273.6c-29.69686-4.44455-58.47224-37.84566-83.99978-35.90079-12.22628,2.02628-21.53492,11.67527-32.0003,17.5008-13.70507,8.4901-25.87464,1.88178-35.99989-8.40064-24.83755-26.29495-33.96443-50.997-76.00029-43.79861-14.13889,2.16324-28.664,6.56443-39.99962,15.59952-17.38488,12.61359-36.02237,47.92209-59.9997,43.10047-17.70519-6.01025-27.34578-24.90122-40.001-37.50006-37.01688-38.40207-52.83131-12.24945-83.99906,13.69978-28.70072,21.96934-47.63584-3.68052-88.00039,7.20012-14.73481,3.54972-29.06478,9.9261-44,12.69947-21.30214,4.15968-39.596-7.02644-59.99992-9.60079-15.84228-1.69848-30.26735,7.00556-44,13.601-28.17557,14.98739-54.18018-.64431-80.00023-12.70073-9.00821-4.31681-18.57457-8.94272-27.9999-12.29949-10.30029-3.55922-21.51788-5.76754-32-8.70005-36.99494-10.40233-60.10866-43.54032-100-18.60008" fill="none" stroke="#14b1ab" stroke-dasharray="7 2"/>
+  <path d="M922.2,278.2c-13.95131-2.9211-27.49257-8.76936-40-15.50006-11.7185-6.10025-23.10165-14.47853-35.99985-17.90029-15.34655-3.58973-27.27947,9.15524-40.00029,15.30055-14.1674,7.34808-26.29181-.99884-35.99983-11.20084-15.05166-14.72442-27.68023-40.54185-51.99963-38.69974-9.47383.7571-19.00373,4.24973-28.00046,7.10028-9.28913,3.0348-19.25207,5.97022-27.99993,10.40018-13.73774,6.85151-24.34839,18.92154-36,28.6-39.00473,34.28477-53.74531-6.134-84.00008-25.80066-12.80073-8.58635-27.07224-10.0997-39.99991-.8987C489.56063,237.96023,479.52754,250.60621,466.2,258c-28.05379,14.8567-48.34425-15.75118-92-5.59933-13.16637,2.59589-26.51964,6.58633-40,7.19916-10.58921.53971-21.62087-.761-32-2.80009-13.171-2.92193-27.63318-3.49211-40,2.70081-14.78648,6.82417-27.63189,19.01618-44,22.09949-15.31172,2.66828-30.21218-4.82631-44-10.5-19.374-8.84578-39.0534-18.03271-60.0001-22.4997-13.79652-2.78728-27.81614-6.993-39.99977-14.20066C45.97113,217.49558,26.11091,201.93348-5.8,223.5" fill="none" stroke="#f9d56e" stroke-dasharray="17 2"/>
+  <path d="M922.2,283a235.74827,235.74827,0,0,1-59.99971-23.80073c-26.19076-14.87586-32.59032-5.02979-56.00017,5.80147-11.84089,5.32141-23.65187-1.44162-32-9.8014-15.936-14.02657-31.0082-44.01555-55.99971-36.69972-9.6043,2.88887-18.82653,8.24858-28.00044,12.20031-14.66974,6.452-30.91879,10.692-43.99986,20.30021-22.36262,15.71172-44.56928,36.87251-72,17.69913-18.65-11.82472-39.97511-34.99063-63.99984-25.99982C482.405,255.658,469.9856,288.07925,434.2,271.79918c-18.2022-7.73939-35.63935-15.857-56.0001-14.69851-18.535,1.16729-37.368,4.00919-55.99986,3.09876-15.90187-.30612-32.79491-4.17869-47.99993,2.20051-17.39,7.01918-30.39545,22.44512-48,29-17.95338,6.65724-35.84877-4.57262-52.00009-11.40006-17.82973-7.80317-36.688-13.96008-56.00009-16.69965-13.87331-1.78063-27.95032-5.62108-39.99976-12.90078C48.07583,231.07108,29.96582,211.83315-5.8,235.79984" fill="none" stroke="#14b1ab" stroke-dasharray="7 5"/>
+  <path d="M922.2,288.5c-18.67991-6.41418-38.57643-10.34076-55.99985-20.00034-29.29018-15.51874-32.62-8.54052-60,2.301-16.33417,5.30741-29.64735-9.02508-40.00025-19.60086-26.53221-27.88465-34.6864-32.57917-67.99971-10.59921-13.50126,8.93284-29.47719,13.39554-44.00045,20.19883-40.29991,22.15127-56.3395,35.08792-99.99958,9.49988-14.636-7.46354-31.9305-16.41689-48.00011-7.69862-16.37905,8.18917-28.89457,25.49493-47.99992,27.59956-12.85874.96635-24.86028-5.88743-36.00012-11.40023-12.47172-6.56405-25.92162-12.41633-40.00009-14.29965-19.46411-2.35044-40.3821-2.15554-59.99994-2.00076-11.88943.49131-24.50213-.29861-36,3.30036-18.71879,5.91151-31.931,21.987-48,32.4-18.858,12.99577-33.58,6.12462-52-3.30064-12.49529-6.4723-26.08327-11.8912-40-14.2992-21.30543-3.63194-44.53293-.09578-63.99987-11.30063C48.51515,248.98457,35.97076,225.01061-5.8,251.1" fill="none" stroke="#e8505b" stroke-dasharray="27 5"/>
+  <path d="M922.2,295.1c-14.13067-6.04834-29.66052-8.72882-44.0002-14.0995-11.79739-4.351-23.26651-11.667-35.99975-12.90063-15.51539-1.65651-28.60611,11.13794-44,9.90044-23.08615-3.92474-34.96482-30.01312-56.00034-38.69968-19.96095-7.483-36.11271,11.30618-51.99988,20.29914-9.92578,6.05862-21.32526,10.22156-31.99989,14.7001-6.45821,2.85166-13.457,6.44808-20,9.10007-28.9233,12.51758-58.91788,12.64856-87.99985.69929-19.19068-7.51752-32.98973-13.57741-52-1.19853-14.46762,9.104-29.568,23.10232-48.0001,19.59912-11.452-2.23054-22.0179-8.64941-31.99994-14.39977-10.11625-5.71726-20.94074-11.3374-32.00006-14.99989-30.8234-10.2756-80.18287-12.75365-108.00006,5.89941-22.19873,13.79873-42.025,48.2889-72.00008,35.2008-14.88342-6.43187-28.25646-17.01575-43.99988-21.50007-24.8152-7.48848-51.802,5.07591-75.99992-5.60018-38.79589-19.26766-42.87272-48.11462-92-20.1" fill="none" stroke="#14b1ab" stroke-dasharray="19 2"/>
+  <path d="M922.2,302.8c-13.78764-7.13225-29.35749-9.9873-44.00024-14.69948-11.71064-3.87352-23.46823-9.97523-35.99974-10.50056-15.24726-.85931-28.69783,11.08527-44,8.60034-23.41242-5.23023-35.74189-32.65212-60.00009-36.00013-18.82843-1.28717-32.96811,14.26805-48.00019,23.19949-8.67127,5.65586-18.532,10.3707-27.99987,14.50021-8.99218,4.01493-18.38,8.67614-28,11-12.95426,3.22494-26.73622,3.26185-40,3.6001-11.771.2797-24.3867.971-36-1.4-17.14611-3.15307-34.2456-14.11263-51.99994-8.1996-18.72143,6.15355-34.87658,23.676-56.00015,20.0993-10.00654-1.77306-19.43307-7.16835-27.99987-12.3997-9.11716-5.48392-18.63547-11.53911-28-16.59985-31.47492-17.49315-67.51729-22.68087-100-4.59941-11.89337,6.40216-22.358,15.96179-31.99988,25.29955-12.92875,11.85911-28.78571,28.16225-48.00027,22.19959-14.50033-4.91005-26.48313-15.78457-40-22.69948-27.45167-15.52865-52.05006,2.29507-79.99995-1.59951C82.23857,300.79048,71.57419,293.44193,62.20011,286.2c-26.074-21.325-38.984-18.64719-68.0001-4.09984" fill="none" stroke="#f9d56e" stroke-dasharray="10 3"/>
+  <path d="M922.2,311.2c-13.6982-7.4787-29.00224-11.5758-44.00026-15.49946C866.52594,292.42168,854.53911,287.4328,842.2,288c-14.992.4099-28.7652,11.54365-43.99993,8.1-22.32687-6.18532-35.59372-32.24807-60-32.90009-16.89648.11628-30.48558,12.159-44.0002,20.8A350.27929,350.27929,0,0,1,662.2,303.2c-8.619,4.87132-18.12776,9.63884-28,11.19991-14.49671,2.05675-29.45268-1.14324-43.99993-.09976-27.19955,2.96323-33.32437,4.2547-59.99994-4.80095-8.88164-2.76631-18.93373-4.01617-28.00006-1.39892C484.97885,313.11151,469.09868,326.862,450.2,323.79974c-18.06241-3.38169-32.87872-16.05621-48.00018-25.69933-32.2459-22.201-63.74271-36.56344-99.99967-12.99979-13.23652,8.44473-24.79083,19.91481-36,30.79946-12.817,12.18205-28.48337,29.314-48.00014,24.2-15.07839-4.58-26.89324-16.46423-40.00014-24.69981-25.65482-17.61384-45.00659-5.61575-71.99994-1.09971-33.19939,5.76943-45.179-21.59749-71.99961-26.90137C20.23524,285.78754,6.89149,292.90021-5.8,297.7" fill="none" stroke="#f9d56e" stroke-dasharray="15 2"/>
+  <path d="M922.2,320.3c-12.30263-7.2366-26.11539-11.71079-40.00031-14.69937-10.47564-2.39769-21.19052-6.27339-31.99969-6.80071-15.33673-.75285-28.84728,9.46271-44,9.70038-26.19509-1.6817-40.57541-34.12155-68.00015-31.99968-21.90567,1.797-45.62051,21.18968-64.00014,32.89878C661.799,317.48268,649.5293,328.42121,634.2,329.9c-13.37318,1.17129-26.64278-4.05823-40.00006-3.79978-13.392-.19481-26.56452,5.74869-40,4.3998-16.38586-1.34644-31.339-11.49042-48-10.80007-19.27119,1.21161-36.17292,16.24812-56,12.99985-19.91427-4.26194-35.88815-18.70815-52.00022-30.29938-29.96977-22.40943-58.483-36.89557-91.99961-11.19976-23.27324,15.93422-51.56773,62.02494-79.99974,60.8-15.79184-1.51489-27.90916-14.11518-40.00064-23.20018-16.02368-13.08311-30.86611-20.85947-51.99985-14.79972-14.56824,3.23142-28.85209,10.17735-43.99989,10.09951-11.42242-.17775-22.26763-5.69427-31.99994-11.20038C33.6697,297.61854,19.84056,303.02239-5.8,311.80007" fill="none" stroke="#e8505b" stroke-dasharray="20 2"/>
+  <path d="M922.2,329.7c-12.3262-6.85888-26.2867-10.406-40.00022-13.19952-11.72779-2.40306-23.86305-6.94055-35.99977-5.10031-14.75711,2.165-28.58377,13.44092-43.99992,9.59978-24.562-7.3238-39.11417-37.27048-68.00029-31.49919-20.62276,4.33669-39.396,16.20664-56.00009,28.7986-14.51588,10.77092-28.19408,28.2952-47.99953,27.20078-13.4104-1.15815-26.32418-7.92589-40.00022-7.09972-10.80394.60864-21.25773,5.52626-32,6.49964-15.48074,1.4738-29.43713-6.94524-43.99993-10.50053-21.92784-5.84332-42.13488,11.959-64.00007,7.40084-20.26547-4.77177-35.91236-20.3199-52.00024-32.6-28.12527-22.1656-56.25744-38.675-87.99959-11.79981C285.923,315.66149,258.99155,365.931,226.20045,363.0007c-15.8753-2.80444-27.95455-15.53184-40.00063-25.30036-13.15086-11.69162-29.43474-23.34269-47.99993-19.39963C127.33669,320.21055,116.5928,324.53842,106.2,328.1c-37.06618,13.18036-45.07171-6.35736-75.9999-9.30089C18.12783,318.53524,5.7768,321.30279-5.8,324.4999" fill="none" stroke="#e8505b" stroke-dasharray="4 2"/>
+  <path d="M922.2,339.4c-12.66074-5.365-26.528-7.5256-40.00017-9.69955-10.46-1.85992-21.23922-5.83565-31.99982-4.80041-13.88893,1.25684-25.87712,11.39677-40,11.30009-27.82979-2.24337-41.99941-38.281-72.00025-35.29926-18.84461,1.87469-36.78066,11.101-52,21.9987-17.25907,11.97831-33.16307,40.05236-55.99941,38.101-9.63461-1.00406-18.7439-6.01647-28.00041-8.50049-16.60154-5.03153-28.44495,2.4958-43.99992,5.7007-15.36839,2.94739-29.72665-5.17381-44-9.40115-23.8566-7.22137-44.72132,9.82569-68,1.40065-18.5286-7.1108-32.65693-22.37108-48.00021-34.3999-28.94718-23.08415-56.5479-38.40986-87.99956-9.19977-23.18834,20.07174-44.248,60.76849-75.99972,65.70034-11.93017,1.19451-22.96939-5.88807-32.00042-12.901-16.745-12.47909-30.83181-31.2628-51.99983-36.20023-24.294-4.43872-45.12554,13.7204-68.0002,18.30034-14.77124,3.42229-29.656-2.55948-44-5.4-14.3302-2.21074-29.76564-2.31262-44.00009.60024" fill="none" stroke="#14b1ab" stroke-dasharray="26 2"/>
+  <path d="M922.2,349.4c-12.97272-3.41841-26.80073-2.68107-40.00007-4.39977-15.59255-2.45519-28.30608-8.01427-43.99991-1.59946-7.70216,2.75523-15.71377,6.91554-24.00007,7.49916-21.84265-.02758-35.00081-22.38195-52.00025-32.99928-22.97319-15.29172-51.79175-2.07976-71.99988,11.99924-18.73342,12.04994-37.25844,49.159-59.99942,45.90052C620.36959,374.26648,611.40928,368.40049,602.2,365c-16.31926-6.62984-28.75449.89664-43.99993,5.60069-12.01448,3.22593-24.53221-.73738-36-4.301-34.46076-12.607-51.85589,6.78511-80.00008-7.59926-17.882-10.098-31.57578-26.49178-48.0001-38.60027-32.68564-24.63472-57.04777-30.90007-87.9996.60031-21.1,19.94231-44.0094,59.77455-75.99978,59.30019C216.36045,378.9071,204.54266,369.61146,194.2,361.1c-15.95657-12.68037-30.3522-31.63769-51.99985-33.70034-27.04207-1.08078-46.835,21.95746-71.99987,27.7007-10.49129,2.12814-21.6326-.02372-32.00018-1.90063C23.77023,351.19768,8.80988,347.29852-5.8,349.39992" fill="none" stroke="#e8505b" stroke-dasharray="7 5"/>
+  <path d="M922.2,359.2c-14.59393-.54261-29.44762,3.847-44,1.60012-28.68587-6.14948-28.82677-5.12989-56,3.4006-29.71284,6.39586-44.08769-30.83016-68.00035-41.3-21.939-10.14218-46.55818,2.16852-63.99981,15.89905-8.85769,7.35083-16.79258,16.97737-23.99981,25.90025-8.5871,9.8401-17.96294,23.04172-31.99984,24.40019-20.21953-.467-33.65932-22.645-56.00035-15.6996-14.05273,4.6789-24.24969,11.85883-40,9.59856-14.63775-1.55152-29.182-6.39556-43.99988-6.29913-14.59048-.0715-30.10089,3.1885-43.99991-2.80046-18.9792-8.57032-32.24966-25.97772-48.00027-38.99936-11.712-9.81475-25.34436-18.41709-39.99975-23.00031-25.05841-8.6181-47.89414,9.49657-63.99982,26.90075-38.2849,40.447-61.86427,68.35517-112,22.49882-14.05252-11.9332-28.08661-28.92063-48.00017-29.09977-28.81326.25406-46.50877,27.79138-71.99977,36.8007C51.91365,373.61618,36.35821,370.21051,22.2,366.7c-8.93214-2.55777-18.60053-5.32851-28-4.6" fill="none" stroke="#14b1ab" stroke-dasharray="2 2"/>
+  <path d="M922.2,368.4c-14.54283,3.09661-28.777,10.93828-43.99994,9.50006-7.85546-.8217-16.10221-3.10208-24.0001-3.50011-14.77415-1.3756-29.30462,7.094-43.99994,3.90034-22.63066-7.32738-32.971-32.3647-52.00048-45.09976-35.16-23.25857-72.15387,15.18-91.99935,41.89922-9.70668,11.70626-22.47571,30.1857-40,24.10029-8.53607-3.21537-16.12747-9.64845-24.00022-14.10011-8.34848-5.00357-18.90177-6.59872-28-2.69935-11.81942,5.076-22.64224,11.18888-36.00011,10.99866-11.89526.16579-24.13605-1.31-35.99981-1.89937-9.15718-.44385-18.84268.08268-28,.10025-31.65233.759-49.90282-28.85414-71.99991-46.70048-11.60324-9.52725-25.43762-17.34116-40-21.19981-24.27223-6.87627-46.99655,8.83744-63.99978,24.60071-27.91316,25.95686-56.77949,54.94759-96.00035,29.99874-22.21267-12.08723-40.78836-43.17532-67.99959-40.6998-30.29772,3.44047-45.33665,35.59566-72.00019,46.60074-11.36326,4.66874-24.59084,3.18787-36.00008-.60034C15.86321,380.14958,5.40126,374.46807-5.8,374.9" fill="none" stroke="#f9d56e" stroke-dasharray="22 2"/>
+  <path d="M922.2,376.6c-16.45262,7.66654-32.71,20.9689-52,17.09936-9.09607-1.43776-18.77376-2.87439-28-2.09917-13.25748.96879-28.26766,4.52275-39.99977-3.8007-14.45636-10.31254-23.78113-26.69536-36.00043-39.29929-18.02191-19.73116-39.05352-20.06912-59.99988-4.59957C694.24216,352.5648,683.47466,363.7522,674.20008,375.2c-10.8283,12.21206-22.44515,33.83743-39.99956,35.80055-15.86994-.6617-25.95793-16.18409-40.00074-21.70013-15.64154-6.81638-29.68444,6.23433-43.99984,10.59987-18.08384,5.14921-37.373,4.948-55.99991,6.1-43.13057,3.26327-51.41505-10.05841-79.99991-38.10076C398.2068,351.84112,377.05468,339.52686,354.19994,337.4c-17.24908-1.00721-34.00853,6.357-47.99984,15.90029-34.5816,24.19249-64.80489,52.09953-108.00023,26.29907-20.18087-11.13759-35.27151-34.92056-59.99957-35.70011-30.34118,1.72806-45.70826,33.65592-68.00071,50.00017C55.65681,405.58425,38.84578,406.52679,22.2,398.29933c-8.71974-4.13787-18.117-9.19253-28-9.39923" fill="none" stroke="#e8505b" stroke-dasharray="3 5"/>
+  <path d="M922.2,383.5c-15.26175,9.26788-28.7651,25.73189-47.99983,25.50008-10.55385-.17165-21.43311-2.23225-32.0002-2.19985-15.73337.29752-31.90136,1.51327-43.99972-10.50088-21.48142-18.932-36.66578-65.08826-71.99982-55.09991-17.67178,6.27838-31.383,20.68209-44.00064,34.0004-8.1909,8.91649-15.99176,19.42995-23.99976,28.50031-9.535,10.72991-21.74719,20.38658-36.00012,11.4993-10.81616-6.49919-19.71736-17.269-31.99989-21.19939-12.92068-3.757-24.75526,5.09707-36.00009,10.10014-13.93923,5.88785-29.15635,9.1516-43.99993,11.79988-48.87116,8.78633-58.13333,2.25941-91.9997-31.90061-12.30439-11.95788-27.007-22.56564-44.00051-26.39892-21.19861-6.30583-44.11495-3.16933-63.99972,6.0003-14.70256,6.41593-28.91747,14.85667-44,20.39935-19.004,6.83391-41.08666,9.42268-60,.9999-9.86024-4.16469-19.45079-10.29848-27.99993-16.70008-11.74424-8.46938-24.70022-18.83886-40.00012-17.99982-27.8,2.83152-44.87372,35.095-64.0005,52.59927-13.14029,13.09806-30.12277,20.29119-47.99948,11.6-10.24183-4.69292-20.36408-11.95237-32-12.39925" fill="none" stroke="#f9d56e" stroke-dasharray="14 3"/>
+  <path d="M922.2,389.1c-8.35564,6.16895-16.133,14.25746-24,21.00007-6.71508,5.79388-15.02974,10.78463-24.00028,11.69964-13.19954,1.03924-26.79671-.7329-39.99973-1.09937-19.67637-.03384-32.217-6.43862-43.99968-22.001-14.27135-16.99617-27.43323-47.77425-51.99973-50-15.75674-.23139-28.72425,11.3173-40.00072,21.00049A324.417,324.417,0,0,0,670.2,398.6c-7.27218,8.21106-14.71356,17.75787-24,23.8-26.38584,16.40937-41.84642-27.5282-68-22.49988-8.35325,1.50912-16.31664,6.23509-24,9.5998a291.31986,291.31986,0,0,1-28,10.19991c-20.50011,5.89793-42.46721,14.97754-63.99988,9.70072-21.14261-6.8104-34.7311-26.35749-52.00035-39.20037C380.29263,366.14113,332.997,372.692,298.2,381.29946c-28.69972,7.047-63.50792,16.47021-92,5.1009-11.14813-4.41642-21.93041-10.84539-31.99991-17.30069-11.70159-7.48615-25.80736-14.53432-40.0002-10.59932-25.23088,7.83626-41.25867,38.06646-60.0005,55.69883-12.954,13.4912-29.78635,22.16861-47.9994,12.69988-10.14625-4.98584-20.3055-12.259-32-12.69927" fill="none" stroke="#e8505b" stroke-dasharray="31 5"/>
+  <path d="M922.2,393.4c-16.05258,12.478-27.33273,33.32689-47.99964,38.80037-9.0227,2.11284-18.81311,1.7684-28.00042,1.4995-12.09732-.47154-25.00414-1.22114-35.99988-6.80011-26.55012-14.90643-34.05171-49.98264-59.99986-65.5-15.56709-8.40545-31.9667,2.58513-44.00024,12.30069A404.24948,404.24948,0,0,0,674.2,402.89992c-17.62489,17.70924-34.32431,41.65-59.99988,20.49936-18.56029-14.4512-28.28812-23.03378-52.00021-12.19866-21.02055,8.6552-42.693,16.38153-63.99978,24.29973-17.95822,6.48474-35.91587,8.33621-52-3.80114C429.04509,419.8588,414.80923,402.137,394.2,396.09993c-25.55575-6.65835-145.84144.58993-172-3.90073C209.56064,389.97935,197.61872,383.797,186.2,378.2c-46.13408-25.90479-60.25894-13.99026-92.00011,23.70046-14.11225,15.53014-29.27787,37.33-51.99946,38.70022C24.69629,440.90216,11.63942,424.62655-5.8,424.5" fill="none" stroke="#e8505b" stroke-dasharray="30 3"/>
+  <path d="M922.2,396.7c-16.76927,13.26186-27.592,34.78237-47.99975,43.2002C856.24889,446.1,827.14937,445.39491,810.2,436.20045c-26.34181-14.65573-34.07859-49.30386-59.99969-64.30091-17.67473-8.10375-34.59687,6.66583-48.00049,16.70028-7.89627,6.077-16.31579,12.75986-23.99986,19.10014-7.875,6.73523-15.77257,14.68455-24,21-28.75549,22.46-42.3649-7.24241-67.99982-14.60073-9.33281-1.98215-19.2163.85179-28.00013,3.90086-7.85355,2.515-16.28075,5.40008-24,8.29977-12.05,4.4101-24.08853,10.046-36,14.80015-11.27436,4.37736-23.83335,8.64906-36,5.69963-13.58146-3.529-24.75856-13.29483-36-21.19964-14.85735-10.76683-29.4321-16.434-48.0001-13.89928-15.81577,2.0784-32.168,2.72082-47.99986.39893-18.84865-2.18255-37.40349-7.52407-56-11.09967-15.69634-3.48051-32.14772-3.17311-48.00008-5.29931-11.11523-1.61448-21.86289-6.59037-31.99988-11.20076-34.61954-16.24018-55.5417-22.27834-83.99984,9.10078-18.46874,18.95345-39.74972,51.62963-67.99976,53.5999C24.896,447.92313,11.50582,432.3576-5.8,432.89992" fill="none" stroke="#f9d56e" stroke-dasharray="3 4"/>
+  <path d="M922.2,399.3c-16.46133,12.49924-26.55687,32.43155-44,43.8-19.17147,11.59546-48.16412,11.32122-67.99994,1.30053-17.59649-9.64814-27.6941-28.42344-40.00016-43.5005-5.42645-6.6264-11.94369-14.013-20.0001-17.3999-14.418-5.63871-28.35326,4.53917-39.99991,12-11.72121,8.09334-24.36242,15.68721-36,23.89985-7.76148,5.67392-15.58652,12.58059-24,17.3-29.10578,17.1998-44.80208-13.38006-72-14.90053-28.1343.39129-54.58628,12.15894-79.99994,23.10069-38.20055,17.09277-47.60134.34586-79.99993-14.80078-16.02178-7.25871-31.78133-3.67336-48.00013.50145-33.60262,9.02271-65.26784-9.34919-95.9999-20.30142-14.00847-5.25434-29.24617-6.57427-44.00019-8.09873-11.08055-1.4428-21.96689-5.73083-31.99979-10.50086-40.41552-19.66056-61.61857-18.35036-91.99976,16.60091-17.27437,18.24366-37.19064,42.66818-64,44.40005C25.26559,453.488,11.199,439.65831-5.8,440.9" fill="none" stroke="#f9d56e" stroke-dasharray="11 2"/>
+  <path d="M922.2,401.8c-18.51838,12.77243-28.838,35.08181-48,47.1-21.47844,13.02006-51.33018,12.3959-72-1.99955-19.41707-12.89475-33.301-47.66761-55.99949-51.30112-14.91335-1.00443-27.461,9.669-40.00075,16.20024-8.87423,5.05873-18.91987,9.05347-27.99981,13.70037-6.70169,3.33276-13.64325,7.97562-20,11.9-33.7211,21.57921-44.48455,3.69007-75.99984-4.90068-21.39754-3.99767-43.77535-.61493-64.00008,7.00091-13.14955,4.7457-26.17328,11.407-40,13.99992-15.39262,2.9159-30.37495-3.82874-44-10.20053-22.831-10.749-37.60718-6.94014-60,1.80114-17.39539,6.625-35.10452,5.4593-52-2.1015-21.81163-8.79754-41.45265-23.06123-64-30.09945C249.288,410.12729,239.38214,409.39208,230.2,408a104.81292,104.81292,0,0,1-27.99991-8.40039c-19.60681-9.60024-42.76115-19.52741-64.00015-8.899-15.88124,7.78681-27.55064,22.273-40,34.39919-16.01651,15.71059-36.566,30.57233-60,29.8-15.04083-.69319-28.66294-10.77457-43.99994-8.9" fill="none" stroke="#f9d56e" stroke-dasharray="18 4"/>
+  <path d="M922.2,404.9c-18.12451,10.32758-28.044,30.56795-44.00028,43.49976-19.54272,16.49185-49.17792,18.96434-71.99978,8.10048-22.48076-10.10835-35.98516-44.83954-59.99949-46.40093-11.59819.34834-21.93875,7.37846-32.00054,12.40063-9.95588,5.212-21.18157,8.38826-32.00006,11.19979-19.295,5.2452-35.50616,20.27254-55.99983,21.4003-12.42466.6207-24.41434-4.444-36-8.20011a180.74261,180.74261,0,0,0-40-7.7c-35.26409-2.06033-64.13807,24.71546-100,13.19956-14.11729-4.20029-29.11279-9.94988-44-6.39916-21.79049,5.14553-40.1944,23.00272-64.0001,17.49887-30.82973-7.25348-54.73437-30.79082-84-41.89884-15.40436-5.57-32.48246-5.27513-47.99989-10.4003-15.90393-5.35467-30.8474-15.25971-48.00008-16.1998-45.74147-1.50924-57.45991,52.68708-112.0002,59.899a70.40732,70.40732,0,0,1-23.99965-.69931C15.83975,451.86594,4.95391,448.16891-5.8,449.9" fill="none" stroke="#e8505b" stroke-dasharray="9 3"/>
+  <path d="M922.2,409.2c-18.64047,8.23582-28.84571,28.12711-44.00048,40.89948-20.111,18.12807-51.466,21.34906-75.99964,11.00091-21.00551-8.84973-35.00545-40.72391-59.99955-35.501-12.53145,3.13313-23.50208,11.47129-36.00048,14.80021C694.569,443.699,681.75063,442.61243,670.2,446.3c-18.59216,5.69656-35.792,18.62529-56,17.59966-30.03782-1.33655-57.35857-21.37317-88-16.69943-16.02026,2.15739-31.79181,7.70923-48,8.59955-36.7114,2.276-52.10588-16.18446-87.99979,7.00065-20.78015,12.67926-36.254,19.68488-60.00028,8.5987-23.82791-10.49083-44.80616-26.74667-67.99971-38.39965-11.08824-5.53578-23.8357-7.708-36.00024-9.39946a125.74016,125.74016,0,0,1-31.99987-8.20046c-12.62534-5.08489-26.05879-11.12822-40.00013-9.69949-22.5464,2.40312-38.60929,20.663-55.99992,33.29983C80.19266,452.80421,56.41692,456.83442,34.2,456.2c-13.23618-.65768-26.70835-5.018-40-2.70009" fill="none" stroke="#e8505b" stroke-dasharray="11 5"/>
+  <path d="M922.2,415.5c-9.59207,2.18046-17.32366,9.82486-24,16.60015-21.80189,23.89826-33.77823,37.11908-68.0004,38.59917-29.56316,2.24838-38.07437-5.90973-59.99933-22.7-11.58569-8.56352-22.98165-10.02045-36.00036-3.79865-12.37334,6.15582-25.816,12.39-40,11.19879-7.7961-.35751-16.24694-1.16835-23.9999.10056-16.92712,2.70278-31.612,13.04157-48,17.4999-16.02409,4.43814-33.06974.655-48-5.80041-42.59937-19.7498-48.9032-12.35867-92.0001-10.299-17.26867.85753-34.75768-2.22179-51.99989-1.50129-13.05715,1.072-25.2942,7.51448-36,14.70066-14.12548,9.33891-30.15561,20.65085-48.00016,16.59935-9.75865-2.13488-19.20034-7.12335-27.99992-11.69945-10.60283-5.53732-21.69172-11.32243-31.99992-17.40015-26.99254-16.58236-39.45589-23.83937-72.00024-25.79911-17.96622-1.33627-34.27166-10.86394-51.9997-13.20119-29.85513-3.52111-50.20566,23.73088-75.99988,33.40081-17.84609,5.81861-37.42316,5.24025-56.0002,5.60033-11.85154-.16788-24.17339-1.87377-36-.40071" fill="none" stroke="#14b1ab" stroke-dasharray="30 3"/>
+  <path d="M922.2,424.1c-23.77288,3.05736-37.70928,33.947-60.00039,43.19923-12.44064,5.66695-26.62647,6.60323-39.99964,8.40085-20.41716,3.36238-31.14431-.58915-47.99982-11.50078-31.76587-20.63122-42.22015,5.47-72.0002,5.50135-7.88151-.39114-16.17364-2.352-24-3.20073-18.83571-2.64115-35.599,7.893-51.99989,15.4006-13.71344,6.31537-29.91853,7.57945-44.00011,1.69884-41.34543-18.7099-39.87423-23.25343-88.0002-22.09849-22.52717-.25323-45.83063-4.45459-67.9998,1.09852-22.21447,6.17281-38.12448,25.52131-59.99977,32.30091-19.90541,5.68853-38.34937-7.665-56.00027-14.90018-12.07162-5.39013-24.64266-10.88271-35.99986-17.70028-11.4564-6.444-23.08423-14.14032-36-17.29986-11.6168-3.01979-24.1526-1.91431-36-2.99993-10.75866-.99561-21.58042-4.32732-31.99994-7.00026-14.68259-3.71327-30.56633-1.13845-44,5.60065-15.42291,7.2166-30.48024,17.50464-48.00022,18.39926-10.39044.63936-21.60123-.09357-31.99994.4005-16.88524,1.07386-35.0692,1.50708-51.99995,1.49994" fill="none" stroke="#f9d56e" stroke-dasharray="17 4"/>
+  <path d="M922.2,435.2c-22.9712-.67009-36.65734,25.94486-56.00034,35.19928-9.785,5.2153-21.29456,6.48143-31.99979,8.60054-9.25853,1.65375-18.71555,4.80825-27.99988,6.30026-15.83808,3.1241-29.57907-6.88218-44-11.40065-21.642-7.01181-38.678,12.419-60,10.00087-11.98894-1.23687-23.86615-5.89667-36-6.00016-17.653-.1337-32.27345,11.48683-48,17.8-30.42354,14.02569-52.9295-13.20972-80-21.80068-16.68587-5.43545-34.84334-3.19867-52-5.89979-28.01144-4.202-50.93906-5.69014-75.99991,10.10107-18.41206,10.86732-36.943,28.78781-60.0001,24.69929-16.40443-3.8567-31.725-12.18173-48.00027-16.59924a142.07363,142.07363,0,0,1-27.99965-11.601c-7.93236-4.38661-15.99666-10.036-24-14.29981-18.702-10.85554-35.83625-6.57768-56.00015-6.49927-17.30107-.82667-34.56767-7.17641-51.99993-3.90008-35.6573,7.15382-38.10616,17.98169-80,12.09857-14.64151-1.532-29.54182,1.3554-43.99988,3.30109-7.76306.80415-16.258.25608-24.00006-.60025" fill="none" stroke="#f9d56e" stroke-dasharray="3 5"/>
+  <path d="M922.2,448.5c-23.02672-4.52366-37.10471,19.61638-56.00034,27.99952-9.9386,4.66224-21.46911,5.31127-31.99973,7.90047-9.50095,2.35351-18.82925,6.88347-28,10.2-17.40591,6.85388-31.31542-1.83243-48-5.20068-18.15842-3.78779-34.18783,9.39039-52,9.20124-18.8319-.32119-37.005-12.19087-55.99993-6.90028C633.60235,496.09537,619.56851,508.60484,602.2,510.5c-28.62589,2.15009-45.68793-27.30578-80.00018-28.59913-11.909-.57184-24.32682-.6728-35.99979-3.401-21.18235-4.60778-39.26278-8.444-60,.901C415.21647,484.22294,404.47475,490.747,394.2,496.9c-10.851,6.42786-23.05385,12.719-36,12.39982-15.14868-.68-29.112-8.55749-44-10.79943-31.60748-4.11977-38.2204-8.77538-63.99961-26.50111C232.24713,460.4,218.06955,462.46022,198.2,466.60083c-18.50138,3.43561-37.38777-2.10087-55.99994-.30037-30.53444,3.69421-39.52558,8.69868-72,.89889-32.78211-7.674-47.07833,10.89234-76,2.80079" fill="none" stroke="#e8505b" stroke-dasharray="5 2"/>
+  <path d="M922.2,463.5c-23.13449-9.01583-39.59493,15.44195-60.00031,21.39988-11.75361,3.53881-24.84041,3.67515-35.9996,9.20039-14.021,6.673-27.51034,18.39779-44.00008,16.79944-6.56675-.58615-13.59694-2.56779-20-3.99985-15.23809-4.159-29.4797.14257-43.99994,4.60092-9.00706,2.4926-19.00681,1.97514-28.00008-.30092-15.55473-3.90653-31.94089-11.2173-47.99993-5.39915-12.17878,3.67166-23.51634,10.87226-36,13.5994-33.55669,5.91088-47.00764-27.78639-88.00013-23.99932-9.19775.4-18.99409.35371-27.99988-1.801-11.89849-2.59781-23.81493-7.20013-36-8.39971-37.17269-2.792-66.20452,35.59108-104.00006,27.79954-10.46013-2.14508-21.21734-5.62482-32-5.69933-17.61408-.04588-32.38,2.25673-47.99978-8.501C259.50559,491.91367,249.86013,482.34725,238.2,477c-15.53244-7.835-32.52123-.2262-47.99986,3.70064-11.65838,2.84167-24.1272,1.85636-36.00011,1.59912-13.59876-.47175-34.54884.81834-47.99912-1.59976-12.15236-1.92647-24.1525-6.42461-36.00087-9.60014a57.66663,57.66663,0,0,0-28-.59974c-16.177,4.61176-30.9654,12.79951-48,5.29972" fill="none" stroke="#f9d56e" stroke-dasharray="16 4"/>
+  <path d="M922.2,479.6c-22.29487-12.26639-39.33759,6.91112-60.00011,12.6003-9.028,2.77818-19.169,3.226-27.99989,6.69975-14.57493,5.84292-25.79678,18.18348-40,24.7-18.24213,8.55688-37.19024-4.73423-56.00013-2.49991-7.97031.76745-16.25062,3.21651-23.9999,5.09988-16.33917,4.37808-32.71726-1.71534-48-7.10072-31.16118-11.07073-50.98465,13.46935-80.00006,6.90134-13.95076-3.40987-25.88756-13.24855-40-16.20055-11.83565-2.79605-24.16654.28647-36,1.40017-18.13759,2.24744-34.99354-6.86584-51.99994-11.50052-13.24365-3.819-27.33116-.96947-40,3.60083-20.49279,7.03705-41.86343,16.57739-64,13.99972-13.13256-1.96212-26.83557-5.12264-40-1.49969-22.0515,5.71185-33.68752,6.02091-51.99986-9.3014-10.87821-8.66488-21.63961-20.178-36.0001-22.39932-15.44921-1.90945-29.42825,7.47614-44.00006,10.9-16.91155,3.403-34.95112,2.38047-52,.5007-13.83256-1.74715-27.31762-6.90026-39.99993-12.5008C77.7339,477.5693,64.0982,471.682,50.2,473.80005c-20.1073,3.52784-34.57219,18.733-56,8.39977" fill="none" stroke="#e8505b" stroke-dasharray="6 2"/>
+  <path d="M922.2,495.9c-21.89144-15.35213-38.03068-2.00838-60.00015,3.70051-36.77613,7.22722-36.803,14.06689-63.99952,35.40026-16.59028,12.53654-30.22569,5.92807-48.00045,1.39871-20.06611-5.26207-33.27173,4.50087-51.99985,5.50138-17.00421.23975-31.94134-9.77881-48-13.80075-29.81983-6.67925-48.97251,11.87078-79.99988-.80047-44.09471-18.27547-51.48044,13.53293-92.00017-3.39929-35.87337-15.922-42.30677-14.64325-80-6.5995-11.76107,2.08543-24.02433,4.128-35.99991,4.19918-14.62231-.33493-29.98437-3.69823-43.99991,2.20076-9.045,3.284-18.21844,8.4261-28.00013,9.09915-23.57863.58812-36.25428-24.70351-56.00022-33.59922-20.4037-9.79725-40.02655,7.86834-59.99971,10.59918-18.62808,2.77116-38.56661,2.72039-55.99995-5.20009-18.6699-7.6576-35.59906-21.26164-55.99994-24.00016C37.15774,477.68556,19.62321,504.85967-5.8,491.7" fill="none" stroke="#f9d56e" stroke-dasharray="28 4"/>
+  <path d="M922.2,511.6c-21.53923-17.43958-35.938-11.09444-60.00017-5.09947-30.82048,6.65386-38.82186,17.57216-59.99945,38.30012-14.574,13.707-25.45729,16.32132-44.00046,8.69859-15.062-6.40585-28.55674-7.89069-43.99994-1.89866-37.31019,15.51353-56.93712-17.92116-92-19.301-13.25485-.6424-26.73655,2.92581-39.99993,1.8003-9.186-.5249-18.78164-2.48484-28-2.49985-27.91752-.08951-42.63844,22.77319-72,11.19963-9.46063-3.36911-18.825-8.46031-28-12.49965-22.792-11.17955-47.59671-7.84308-72.00011-6.69942-9.0046.50758-18.95856.91725-27.99994.79935-6.425-.20835-13.68207-.27534-19.99992,1.10027-10.08307,2.00929-19.17407,8.25553-28,13.19988-41.01319,25.76442-53.86731-35.06149-92-29.90061-12.28343,1.841-23.92675,7.79218-36,10.50054-16.95934,3.18035-35.66181,5.47743-52-1.39968C101.28752,507.8918,79.24021,481.74572,50.2,488.4995,31.41714,494.12637,14.66811,511.39267-5.8,500.5" fill="none" stroke="#f9d56e" stroke-dasharray="28 2"/>
+  <path d="M922.2,526c-8.87737-8.10806-19.5582-16.03077-32.0002-16.69971-17.92667-.32772-36.35655,4.84038-51.9999,13.49912-10.77223,6.4889-19.78159,16.42881-27.99983,25.8006-10.1665,11.30037-22.8672,27.26115-40,23.09976-13.42619-3.54931-25.56871-13.453-40.0001-12.79957-11.14419.41683-21.25337,6.76161-32,8.9-12.64528,2.38695-25.48274-2.54884-36-9.30054-36.38527-24.76358-39.15583-29.03836-84.00012-23.29893-12.14621,1.25218-24.63522,3.61652-35.99985,8.19957-10.83917,4.26311-21.00012,11.22992-32,15.09984-21.42558,7.7233-41.84681-6.79861-60-16.50029-19.42008-11.25666-41.62022-16.5733-64.0002-16.49915-15.85242.15755-32.43839.15429-47.99985,3.3987-16.69359,4.04168-28.54265,18.31265-43.9998,24.90073-27.59856,10.58178-43.49119-26.03958-68.00047-31.79965-16.01707-3.88292-32.23571,2.93106-47.99969,5.19911-11.78042,1.53114-24.09733,3.30736-36,3.00068-9.89279-.55909-19.72-4.84545-28-10.10052-24.10617-15.30107-46.83513-34.9667-76-17.79911C24.43464,509.95972,10.00693,517.57848-5.8,510.19994" fill="none" stroke="#f9d56e" stroke-dasharray="19 2"/>
+  <path d="M922.2,538.9c-8.885-9.07112-19.075-18.84481-32.00015-21.29978-19.92581-3.5035-40.48259,4.93627-55.99989,17.09959-10.56191,8.48035-19.39429,19.839-27.99987,30.20029-10.02844,11.82479-23.01589,26.43207-40.0002,18.89921-14.01619-5.7546-27.90941-17.42642-43.9999-13.09869-8.06094,1.89311-15.94264,6.30534-24,8.19936-12.50182,3.31825-25.77121-1.20473-35.99994-8.50034-25.17093-18.69771-40.158-44.74917-76.00017-36.29883-26.58411,5.38352-48.11281,23.5378-71.99981,35.19944-36.28444,17.05974-67.82326-23.444-100.00033-35.19951-20.15168-8.10942-42.93957-8.5294-63.99972-4.00042-33.28824,4.67376-48.932,42.95688-75.9998,35.00052-14.97164-5.2603-25.894-18.46409-40.00036-25.40019-13.45135-7.01655-29.31582-5.90539-43.99985-5.5001-9.14414.304-18.87457.24289-28,.99956-9.11415.85989-18.8504,2.34642-28,1.1-31.62172-5.21931-51.66955-40.71383-88.00019-26.09934C29.48768,517.27094,13.09828,529.85025-5.8,522.00029" fill="none" stroke="#14b1ab" stroke-dasharray="22 4"/>
+  <path d="M922.2,550.3c-8.94734-10.06834-18.74671-21.31035-32.00009-25.49983-22.3972-6.79782-44.38237,7.62826-60,22.49986-8.56236,8.43722-16.49377,18.73913-23.99989,28.1001-9.38444,11.82063-23.32077,27.69064-40.00017,20.19928-14.1097-5.97464-27.57012-18.70924-43.99984-15.29894-8.0954,1.54621-16.05595,5.70644-24.00007,7.79959-23.85078,6.55337-41.42774-10.41065-55.99971-26.80066-13.25432-14.89786-29.8539-33.64257-52.00044-28.99875C574.861,535.19654,562.2226,545.815,550.2,555.09991c-15.34566,11.70537-32.27338,24.44164-51.9998,26.70047-48.36031,1.51217-75.21916-58.91115-128.00037-53.99979a97.63229,97.63229,0,0,0-35.9999,11.099c-19.74535,9.8579-36.14094,37.93455-59.99957,34.401-16.06178-3.72757-28.65165-16.29191-44.00056-21.90035-10.09905-4.07982-21.36472-6.07995-31.99978-8.20035-10.41138-2.10733-21.34551-4.45261-32-4.8-11.94088-.34427-24.05212,3.453-36,2.8-11.4616-.5661-22.17978-6.446-31.99994-11.90015-22.83485-12.907-40.08684-14.61917-63.99994-2.39911C21.95937,532.84205,7.70533,537.67685-5.8,533.19988" fill="none" stroke="#14b1ab" stroke-dasharray="9 2"/>
+  <path d="M922.2,560.6c-8.86964-11.04682-18.45164-23.48185-32-28.9-25.24762-9.059-47.83356,12.73465-64.00016,29.49962-15.502,14.84328-34.8733,55.35139-59.99936,45.90079-24.38455-10.53124-31.1263-23.31738-60.00054-12.29948-40.07131,14.732-57.28326-18.24992-79.99965-43.80134-8.22409-9.04117-19.0655-18.36184-32.00033-18.09916-24.00275,1.7834-37.89008,25.15894-56.00031,38.09934-35.69743,26.05559-67.643,18.57747-99.99941-8.09987-19.74507-15.482-40.92976-36.12209-68.00022-33.59949-17.63944,2.50681-34.18816,11.63862-48.00006,22.59968-14.54567,11.09954-28.10443,28.72542-47.99978,28.50062-14.14059-.60448-27.0355-8.20021-40.00016-13.10016-10.43844-4.23986-21.66358-7.902-32-12.40007-10.37235-4.35825-20.92873-9.89415-32-12.29993-25.26976-4.54913-40.87739,12.99875-68,1.49932-15.0165-6.46536-31.41508-12.66353-48.00015-9.19855C34.2535,539.07693,15.27547,551.96842-5.8,547.30065" fill="none" stroke="#e8505b" stroke-dasharray="10 2"/>
+  <path d="M922.2,570.5c-34.2366-50.7533-58.75645-38.53765-96.00038.40032-9.6848,10.24149-18.40557,22.38423-27.99957,32.69978-9.33094,10.15289-21.90917,18.96775-36.00023,12.79927-14.04359-6.24008-27.64646-17.57417-43.99991-14.89859-7.88949,1.01144-16.07065,3.84494-23.99994,4.59934-31.653,3.84107-46.82944-19.71512-63.99975-41.6005-9.35744-11.57117-20.19374-25.668-36.00012-27.5995-23.226-.813-38.55488,27.4448-56.00051,39.69937-29.67121,21.37947-72.73806,15.76231-99.99927-7.09956-20.50586-15.08491-39.9873-40.14723-68.00018-37.70033-20.953,3.67979-39.55662,18.53834-56.00045,31.3-17.2389,14.2643-32.298,25.53354-55.99984,22.39992-18.28956-1.9058-36.22224-8.44791-51.99984-17.79924-14.20742-8.11769-27.17484-21.11249-43.99981-23.20031-19.719-1.28929-36.08529,15.45847-56.0003,13.3999C98.25368,557.12845,89.9978,554.3,82.2,552.70043a90.01494,90.01494,0,0,0-24-1.69991c-21.52647,1.87731-42.00025,12.97-64,9.99977" fill="none" stroke="#14b1ab" stroke-dasharray="9 3"/>
+  <path d="M922.2,580.3c-34.621-54.0506-57.25044-39.024-96.0004.10031-15.82841,14.539-36.26631,50.44275-59.99916,46.90017C754.83056,625.231,745.03321,617.6162,734.19995,614c-10.24085-3.57023-21.49608-2.15839-32-.79973-13.36043,1.12548-27.99945.89954-39.99987-5.80023-26.42143-15.30234-36.36545-49.77067-63.99958-63.30046-23.63756-8.62091-39.57005,20.71217-56.00083,32.80008-13.12231,11.44817-31.34345,12.83836-47.99982,13.20023-19.44873.36764-39.92195-2.70466-55.99963-14.40019-21.61157-14.04824-43.29287-45.531-71.99986-38.70029C356.09019,539.62111,346.90907,546.074,338.2,551.6c-14.78006,9.34612-28.76993,20.66619-43.99987,29.3001C283.17265,586.83971,270.463,590.03576,258.2,592.2a58.01174,58.01174,0,0,1-43.99984-8.70064c-9.97085-6.18967-19.05575-14.76516-28.00015-22.29941-9.66318-8.47312-22.67466-17.18077-36.0001-12.39937C134.58586,554.11484,122.60971,568.00512,106.2,571.4c-10.47378,2.11106-21.511-.74093-31.99995-1.3-26.8301-2.32853-53.19788,6.7836-80,5.4" fill="none" stroke="#e8505b" stroke-dasharray="6 4"/>
+  <path d="M922.2,590.2c-10.14641-13.95692-20.97111-33.4085-39.99954-35.10048-13.91379-.36638-25.72054,9.13232-36.00053,17.40042-9.45,8.03968-19.26025,16.78842-28,25.59991-14.74926,13.75537-30.02317,37.946-51.99948,38.60068C752.113,635.783,739.97,626.389,726.19993,624c-15.74193-2.64043-32.1744-.95244-47.99987-3.10085-34.75676-2.66028-48.48136-39.70341-72.00015-59.89954-16.07153-14.074-29.39856-9.49845-43.99986,3.60086-8.70161,7.66166-17.42331,16.71482-28,21.79918-12.80537,6.76647-49.80529,2.97542-64.00044,3.90084-25.58265.67232-41.85506-12.99052-59.99928-28.90161-17.42-14.96529-34.08213-25.13991-56.00026-11.29853-14.56845,8.93437-28.62847,19.49942-44.00019,27.09894-13.90589,7.4456-29.38231,12.13842-43.99993,17.9-8.83485,3.6324-18.28483,8.18073-27.99985,8.50024-18.17879-.06846-32.09155-14.62119-44.00006-26.7-11.03619-10.51224-22.85356-27.07531-39.99991-24.50046-14.61141,3.5226-24.66588,16.63934-36.00027,25.60008C111.51127,583.605,102.94164,588.367,94.2,589.59924c-5.95728,1.21117-92.82477.36417-100,.60027" fill="none" stroke="#e8505b" stroke-dasharray="25 4"/>
+  <path d="M922.2,600c-13.40526-19.21662-29.63172-44.20547-56.00013-29.39923-17.16286,10.09667-32.64249,23.505-48.00018,36.09889-18.718,15.04812-36.46883,43.75411-63.99935,37.40086C744.901,641.695,735.589,637.48916,726.2,635.4001c-11.73217-2.68914-24.08336-4.38447-35.99994-6.00017-29.85268-1.87056-39.8988-3.21719-59.9998-26.90052-12.2411-13.361-22.63422-31.12835-39.99974-38.29988-24.49728-6.72372-39.89331,25.46738-64.00068,26.89968-13.2274.66657-26.73364-2.48108-39.9998-1.49866-14.56193.20474-29.5896,5.17341-44,1.19938-27.03893-6.52271-46.56814-45.39691-75.99976-36.30058-17.1858,6.45739-30.58877,20.81047-48.00064,26.99992-18.34463,7.239-39.19894,8.34079-55.99945,19.401-13.715,8.69666-28.49,17.34778-44.00012,6.899-20.24523-12.87689-30.88325-37.4006-51.9996-48.99976-22.78263-9.9484-40.39731,25.413-56.001,37.49994A48.87012,48.87012,0,0,1,90.2,607.09974a122.34694,122.34694,0,0,1-19.99994,2.20031c-25.59649,1.69248-50.51357-7.40724-76.00007-7.3" fill="none" stroke="#14b1ab" stroke-dasharray="10 3"/>
+  <path d="M922.2,609.8c-11.07743-14.98055-26.33023-38.078-48-29.39964-10.0291,3.70224-19.15593,10.54766-28.00006,16.39945-7.7243,5.25685-16.2811,10.54331-24,15.8-25.91352,16.63284-44.83851,49.93572-79.99983,38.29973-14.53125-4.00129-29.436-7.928-44.00008-11.79968-15.34309-4.61681-32.92492.47611-48.00008-5.19949-31.03466-11.91867-48.183-72.06794-83.99962-54.60061-13.82649,6.84794-27.60414,17.891-44.00046,15.09961-7.81252-1.09841-16.07763-3.41691-23.99992-3.69911a92.467,92.467,0,0,0-28,3.29991c-32.92232,11.10613-41.84221,4.95325-68-15.40071-11.964-9.28092-25.21952-15.7997-40-8.39874-15.86193,8.086-29.53183,22.13-48.0002,24.09877-10.46711,1.29289-21.62371.06744-31.99978,2.20051-19.65639,3.305-31.89465,25.44437-51.99969,26.1009-27.34182-3.88106-40.43425-43.62264-64.00056-55.90038-28.97855-13.69-46.90444,48.80053-76.00025,58.3989-16.54425,6.10185-35.292,5.49648-51.99943.30053C23.89927,620.82408,9.46441,614.27751-5.8,614.1" fill="none" stroke="#e8505b" stroke-dasharray="26 3"/>
+  <path d="M922.2,619.6c-10.73443-13.079-24.5078-32.7496-43.99994-26.49974-9.87783,3.09324-19.04048,9.18011-28.0001,14.19969-7.60062,4.31382-16.11073,8.27042-24,12-24.5134,10.46165-41.01808,36.2945-67.99955,41.30076-10.69,1.47936-21.72029-1.35009-32.0004-4.00076-13.45337-3.066-26.05194-10.86031-39.99991-11.70007-15.92059-.50369-33.5481,7.58714-47.99984-2.50055-24.088-14.32159-39.37441-60.43333-71.99982-50.99973-11.74608,3.34714-23.40693,9.95449-36.00044,8.80017-6.63016-.50552-13.62906-2.97936-20-4.69976-14.52435-4.39541-30.43186-2.28392-44,4.20066-11.10381,5.24859-23.30036,11.99651-36,9.49929-16.62607-3.83753-28.38623-18.322-44-24.39979-24.38528-9.04419-41.13842,19.458-64,21.79972-12.12312,1.31511-23.976-4.35611-35.99994-4.49992-14.45508-.404-25.61525,10.73034-35.99988,19.30051C243.5641,626.72416,235.18391,632.73077,226.2,631.4c-16.20411-4.05738-25.84962-20.38384-36.00045-32.39928-8.599-10.14024-17.63009-24.21584-31.99933-25.70091-15.03.86045-23.86893,16.57133-32.00058,27.39992-7.28062,10.53581-14.91424,22.29635-23.99961,31.40041C90.85713,643.38682,73.89518,648.00589,58.2,646.29989c-23.05374-2.40513-40.82132-21.54914-64-23.39976" fill="none" stroke="#14b1ab" stroke-dasharray="27 2"/>
+  <path d="M922.2,629c-18.4853-20.04236-29.357-30.20739-56-15.89939-13.83416,7.617-29.00036,12.78317-44.00033,17.49871-14.9252,5.03527-27.18255,15.95829-39.99971,24.70074-25.08917,18.1983-49.39132,15.60259-76.00008,2.4994-27.26272-13.211-35.74706,2.9443-59.99988,2.60142-32.92642-5.23635-42.72939-59.58868-80.00011-55.50046-32.5216,5.4906-29.51875,4.73763-59.99981-5.70108-38.59454-9.5863-54.37578,30.8872-84,22.10141-15.5209-4.88525-27.22894-19.70105-44.00007-21.00071-22.05056-.00535-37.11934,25.33715-60.00016,20.79964-14.664-2.69062-28.52378-14.86381-44-9.69943C260.18457,616.59661,250.93458,630.00654,238.2,637.3c-14.0859,8.39137-27.16772-3.21772-35.99982-13.70073-10.42971-11.72291-19.24341-26.16419-32-35.59945-16.6921-12.42413-30.75672,4.17151-40,17.30075-8.975,12.69464-17.37229,27.066-28.00008,38.49943-10.99362,11.78257-27.79428,19.14632-44.0001,16.9-24.18844-3.257-39.97267-26.933-64-30.7" fill="none" stroke="#e8505b" stroke-dasharray="16 2"/>
+  <path d="M922.2,637.3c-25.47782-22.67442-35.22112-19.16569-64-5.9994-12.61323,5.51242-26.8453,5.77017-40.00018,9.19894-27.78484,8.52968-48.90157,36.28336-80,34.09952-11.23571-.32959-22.10608-4.92612-31.9998-9.89962-9.891-5.23984-21.64333-6.88724-32.0001-1.999-10.23085,4.26944-20.42084,11.88114-31.99991,11.19934-29.89178-5.03926-40.5075-53.71834-76.00032-54.79929-13.45161-.327-27.421.54721-39.99957-5.30158C516.13836,609.453,505.49451,603.93959,494.2,604.7c-32.16627.9061-47.92824,43.449-79.99973,29.20011-13.93545-6.17608-27.674-19.41433-44.00026-14.20008-13.997,4.07672-25.18166,16.232-39.99988,17.79979-22.90863,1.87784-40.72158-27.9651-64.00007-13.59953-12.53328,7.10779-21.59555,20.94914-35.9998,24.59961-26.71261,3.26683-42.82891-45.62282-68.00047-52.69976-16.38788-3.41315-27.29789,14.05458-35.99988,25.19917-8.62082,11.88617-17.17184,25.155-27.99978,35.20042-17.272,15.17458-40.12818,21.41111-59.99985,6.79932C23.82556,653.45031,11.43181,639.2166-5.8,634.79973" fill="none" stroke="#f9d56e" stroke-dasharray="4 3"/>
+</svg>
diff --git a/color-wave/src/script.js b/color-wave/src/script.js
new file mode 100644
index 0000000..b1f3dad
--- /dev/null
+++ b/color-wave/src/script.js
@@ -0,0 +1,33 @@
+console.clear();
+
+const paths = document.querySelectorAll('path');
+const defs = document.querySelector('defs');
+const xmlns = "http://www.w3.org/2000/svg";
+
+paths.forEach((p, i) => {
+  const clone = p.cloneNode();
+  clone.setAttribute('stroke-dasharray', '');
+  const mask = document.createElementNS(xmlns, 'mask');
+  mask.setAttribute('id', `id-${i}`);
+  mask.appendChild(clone);
+  defs.appendChild(mask);
+  p.setAttribute('mask', `url(#id-${i})`);
+  gsap.set(clone, {
+    strokeDasharray: () => clone.getTotalLength(),
+    strokeDashoffset: () => clone.getTotalLength()
+  });
+  gsap.to(clone, {
+    duration: 10,
+    delay: i * 0.1,
+    repeat: -1,
+    strokeDashoffset: clone.getTotalLength() * 3,
+    ease: 'power1.inOut'
+  });
+  gsap.to(p, {
+    duration: 10,
+    repeat: -1,
+    strokeDashoffset: clone.getTotalLength() * 0.4,
+    ease: 'none'
+  });
+});
+document.querySelector('svg').style.opacity = 1;
\ No newline at end of file
diff --git a/color-wave/src/style.scss b/color-wave/src/style.scss
new file mode 100644
index 0000000..98f2879
--- /dev/null
+++ b/color-wave/src/style.scss
@@ -0,0 +1,14 @@
+body {
+  background: black;
+  overflow: hidden;
+  margin: 0;
+}
+svg {
+  width: 100vw;
+  height: 100vh;
+  opacity: 0;
+}
+defs path {
+  stroke: white;
+  stroke-width: 2px;
+}
\ No newline at end of file
diff --git a/colorful-distance-field-shaderanydayshaders-13/README.markdown b/colorful-distance-field-shaderanydayshaders-13/README.markdown
new file mode 100644
index 0000000..6153a48
--- /dev/null
+++ b/colorful-distance-field-shaderanydayshaders-13/README.markdown
@@ -0,0 +1,5 @@
+# Colorful Distance Field Shader - #anydayshaders 13
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/terabaud/pen/bGeBzBL](https://codepen.io/terabaud/pen/bGeBzBL).
+
+
diff --git a/colorful-distance-field-shaderanydayshaders-13/dist/index.html b/colorful-distance-field-shaderanydayshaders-13/dist/index.html
new file mode 100644
index 0000000..f79c48d
--- /dev/null
+++ b/colorful-distance-field-shaderanydayshaders-13/dist/index.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Colorful Distance Field Shader - #anydayshaders 13</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<digital-art dpr="auto" aria-hidden="true">
+  <script type="buffer" name="position" data-size="2">
+    [-1, -1, -1, 1, 1, -1, 1, -1, 1, 1, -1, 1]
+  </script>
+  <script type="vert">
+    precision highp float;
+    uniform float time;
+    uniform vec2 resolution;
+    varying vec4 vPos;
+    attribute vec4 position;
+    
+    void main() {
+      vPos = position;
+      gl_Position = position;
+    }
+  </script>
+  <script type="frag">
+    precision highp float;
+    uniform float time;
+    uniform vec2 resolution;
+    varying vec4 vPos;
+
+    const int NUM_CIRCLES = 25;
+    
+    vec2 rotate(vec2 p, float a) {
+      return vec2(p.x * cos(a) - p.y * sin(a),
+                  p.x * sin(a) + p.y * cos(a));
+    }
+    
+    vec3 background(vec2 p) {
+      return vec3(.2);
+    }
+    
+    // 2D Random
+    float random (in vec2 st) {
+        return fract(sin(dot(st.xy,
+                             vec2(12.9898,78.233)))
+                     * 43758.5453123);
+    }
+    
+    vec2 sdCircle(vec2 p, float r, int i) {
+      return vec2(length(p) - r, float(i));
+    }
+    
+    // cosine based palette, 4 vec3 params
+    vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d )
+    {
+        return a + b*cos( 6.28318*(c*t+d) );
+    }
+    
+    vec3 twilight(float t) {
+      vec3 a = vec3(0.5, 0.5, 0.5);
+      vec3 b = vec3(0.5, 0.5, 0.5);
+      vec3 c = vec3(2.0, 1.0, 0.0);
+      vec3 d = vec3(0.50, 0.20, 0.25);
+      return palette(t, a, b, c, d);
+    }
+    
+    vec2 minV(vec2 a, vec2 b) {
+      return mix(a, b, step(b.x,a.x));
+    }
+    
+    vec2 maxV(vec2 a, vec2 b) {
+      return mix(a, b, step(a.x,b.x));
+    }
+    
+    vec2 diffV(vec2 a, vec2 b) {
+      return maxV(minV(a, b), -maxV(a, b));
+    }
+        
+    float subtract(float a, float b)
+    {
+        return max(-a, b);
+    }
+    
+    float symmetricDiff(float a, float b)
+    {
+        // (A ∪ B) \ (A ∩ B)
+        return max(min(a, b), -max(a, b));
+    }
+
+    vec2 scene(vec2 p) {
+      vec2 d = vec2(999., -1.);
+      float zoom = 20.;
+      float t = time * 1e-3 * .25;
+      vec2 p0 = p * zoom;
+      for (int i = 0; i < NUM_CIRCLES; i++) {
+        vec2 c1 = vec2(
+          sin(float(i) + t * .2) + 
+          sin(1. + float(i) + t * .3), 
+          cos(float(i) + t * .1) + 
+          cos(1. + float(i) + t * .2) +
+          cos(1.5 + float(i) + t * .7)
+        ) * 5.;
+        vec2 c = vec2(random(vec2(float(i * 2) * .2, .1)), random(vec2(float(i * 2 + 1) * .2, .2))) - .5;
+        c *= zoom;
+        float r = random(vec2(float(i * 2) * .2, .1));
+        d = diffV(d, 
+            sdCircle(p0 - c - c1, 5.5 + 1. * r, i)
+        );
+      }
+      return d;
+    }
+
+    
+    
+    void main() {
+      vec2 p0 = gl_FragCoord.xy / resolution - .5;
+      float aspect = resolution.x / resolution.y;
+      p0.x *= aspect;
+      float t = time * 1e-3;
+      vec2 p = rotate(p0, t * .05);
+      vec2 s = scene(p);
+      float d = s.x;
+      float x = smoothstep(0., 0.1, d);
+      vec3 bg = background(p);
+      vec3 fg = twilight(mod(s.y * .1, 1.)) + .2 * sin(-d * .5);
+      vec3 color = mix(fg, bg, x);
+      gl_FragColor = vec4(color, 1.);
+    }
+  </script>
+</digital-art>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/colorful-distance-field-shaderanydayshaders-13/dist/script.js b/colorful-distance-field-shaderanydayshaders-13/dist/script.js
new file mode 100644
index 0000000..c609de4
--- /dev/null
+++ b/colorful-distance-field-shaderanydayshaders-13/dist/script.js
@@ -0,0 +1,152 @@
+console.clear();
+
+class DigitalArt extends HTMLElement {
+  
+  constructor() {
+    super();
+    this.canvas = null;
+    this.gl = null;
+    this.onResize = this.onResize.bind(this);
+    this.loop = this.loop.bind(this);
+  }
+  
+  static register() {
+    customElements.define("digital-art", DigitalArt);
+  }
+  
+  connectedCallback() {
+    if (! this.gl) {
+      this.setup();      
+    }
+  }
+  
+  disconnectedCallback() {
+    this.dispose();
+  }
+  
+  get devicePixelRatio() {
+    return parseFloat(this.getAttribute('dpr')) || window.devicePixelRatio;
+  }
+  
+  
+  onResize() {
+    const { canvas, gl, program } = this;
+    const width = this.clientWidth;
+    const height = this.clientHeight;
+    const dpr = this.devicePixelRatio;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+    const uResolution = gl.getUniformLocation(program, "resolution");
+    gl.uniform2fv(uResolution, [gl.drawingBufferWidth, gl.drawingBufferHeight]);
+  }
+  
+  createShader(type, code) {
+    const { gl } = this;
+    const sh = gl.createShader(type, code);
+    gl.shaderSource(sh, code);
+    gl.compileShader(sh);
+    if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+      throw gl.getShaderInfoLog(sh);
+    }
+    return sh;
+  }
+  
+  createBuffers() {
+    const { gl, program } = this;
+    const bufferScripts = [...this.querySelectorAll('[type=buffer]')];
+    this.buffers = {};
+    let count = -1;
+    bufferScripts.forEach(container => {
+      const name = container.getAttribute('name') || 'position';
+      const recordSize = parseInt(container.getAttribute('data-size'), 10) || 1;
+      const data = new Float32Array(JSON.parse(container.textContent.trim()));
+      const buffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+      gl.bufferData(
+        gl.ARRAY_BUFFER,
+        data,
+        gl.STATIC_DRAW
+      );
+      const attribLoc = gl.getAttribLocation(program, name);
+      this.buffers[name] = { buffer, data, attribLoc, recordSize };
+      count = Math.max(count, (data.length / recordSize)|0);
+      gl.enableVertexAttribArray(attribLoc);
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+      gl.vertexAttribPointer(attribLoc, recordSize, gl.FLOAT, false, 0, 0);
+    });
+    this.count = count;
+  }
+  
+  loop(time = 0) {
+    const { gl, program } = this;
+    const uTime = gl.getUniformLocation(program, "time");
+    gl.uniform1f(uTime, time);
+    gl.drawArrays(gl.TRIANGLES, 0, this.count);
+    this.frame = requestAnimationFrame(this.loop);
+  }
+  
+  createPrograms() {
+    const { gl } = this;
+    const fragScript = this.querySelector('[type=frag]');
+    const vertScript = this.querySelector('[type=vert]');
+    const HEADER = 'precision highp float;';
+    const DEFAULT_VERT = HEADER + 'attribute vec4 position;void main(){gl_Position=position;}';
+    const DEFAULT_FRAG = HEADER + 'void main(){gl_FragColor=vec4(1.,0,0,1.);}';
+    
+    this.fragCode = fragScript?.textContent || DEFAULT_FRAG;
+    this.vertCode = vertScript?.textContent || DEFAULT_VERT;
+    
+    const program = gl.createProgram();
+    this.program = program;
+    this.gl = gl;
+    
+    this.fragShader = this.createShader(gl.FRAGMENT_SHADER, this.fragCode);
+    this.vertShader = this.createShader(gl.VERTEX_SHADER, this.vertCode);
+    
+    gl.attachShader(program, this.fragShader);
+    gl.attachShader(program, this.vertShader);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      throw gl.getProgramInfoLog(program);
+    }
+  }
+
+  setup() {
+    this.canvas = document.createElement('canvas');
+    this.dpr = window.devicePixelRatio;
+    this.appendChild(this.canvas);
+    this.gl = this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl');
+    this.createPrograms();
+    
+    const { program, gl } = this;
+
+    gl.useProgram(program);
+    this.createBuffers();
+    gl.clearColor(0, 0, 0, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    this.onResize();
+    window.addEventListener('resize', this.onResize, false);
+    this.frame = requestAnimationFrame(this.loop);
+  }
+  
+  dispose() {
+    cancelAnimationFrame(this.loop);
+    this.frame = -1;
+    window.removeEventListener('resize', this.onResize, false);
+    Object.entries(this.buffers).forEach(([name, buf]) => {
+      this.gl.deleteBuffer(buf.buffer);
+    });
+    this.gl.deleteProgram(this.program);
+    const loseCtx = this.gl.getExtension('WEBGL_lose_context');
+    if (loseCtx && typeof loseCtx.loseContext === 'function') {
+      loseCtx.loseContext();
+    }
+    this.removeChild(this.canvas);
+    this.gl = null;
+    this.canvas = null;
+    this.buffers = {}
+  }
+}
+
+DigitalArt.register();
\ No newline at end of file
diff --git a/colorful-distance-field-shaderanydayshaders-13/dist/style.css b/colorful-distance-field-shaderanydayshaders-13/dist/style.css
new file mode 100644
index 0000000..fa285ff
--- /dev/null
+++ b/colorful-distance-field-shaderanydayshaders-13/dist/style.css
@@ -0,0 +1,15 @@
+body { margin: 0; }
+
+digital-art {
+  display: block;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+}
+
+digital-art canvas {
+  display: block;
+  width: 100%;
+  image-rendering: pixelated;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/colorful-distance-field-shaderanydayshaders-13/license.txt b/colorful-distance-field-shaderanydayshaders-13/license.txt
new file mode 100644
index 0000000..8f63c21
--- /dev/null
+++ b/colorful-distance-field-shaderanydayshaders-13/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Lea Rosema (https://codepen.io/terabaud/pen/bGeBzBL)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/colorful-distance-field-shaderanydayshaders-13/src/index.html b/colorful-distance-field-shaderanydayshaders-13/src/index.html
new file mode 100644
index 0000000..0eb0443
--- /dev/null
+++ b/colorful-distance-field-shaderanydayshaders-13/src/index.html
@@ -0,0 +1,122 @@
+<digital-art dpr="auto" aria-hidden="true">
+  <script type="buffer" name="position" data-size="2">
+    [-1, -1, -1, 1, 1, -1, 1, -1, 1, 1, -1, 1]
+  </script>
+  <script type="vert">
+    precision highp float;
+    uniform float time;
+    uniform vec2 resolution;
+    varying vec4 vPos;
+    attribute vec4 position;
+    
+    void main() {
+      vPos = position;
+      gl_Position = position;
+    }
+  </script>
+  <script type="frag">
+    precision highp float;
+    uniform float time;
+    uniform vec2 resolution;
+    varying vec4 vPos;
+
+    const int NUM_CIRCLES = 25;
+    
+    vec2 rotate(vec2 p, float a) {
+      return vec2(p.x * cos(a) - p.y * sin(a),
+                  p.x * sin(a) + p.y * cos(a));
+    }
+    
+    vec3 background(vec2 p) {
+      return vec3(.2);
+    }
+    
+    // 2D Random
+    float random (in vec2 st) {
+        return fract(sin(dot(st.xy,
+                             vec2(12.9898,78.233)))
+                     * 43758.5453123);
+    }
+    
+    vec2 sdCircle(vec2 p, float r, int i) {
+      return vec2(length(p) - r, float(i));
+    }
+    
+    // cosine based palette, 4 vec3 params
+    vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d )
+    {
+        return a + b*cos( 6.28318*(c*t+d) );
+    }
+    
+    vec3 twilight(float t) {
+      vec3 a = vec3(0.5, 0.5, 0.5);
+      vec3 b = vec3(0.5, 0.5, 0.5);
+      vec3 c = vec3(2.0, 1.0, 0.0);
+      vec3 d = vec3(0.50, 0.20, 0.25);
+      return palette(t, a, b, c, d);
+    }
+    
+    vec2 minV(vec2 a, vec2 b) {
+      return mix(a, b, step(b.x,a.x));
+    }
+    
+    vec2 maxV(vec2 a, vec2 b) {
+      return mix(a, b, step(a.x,b.x));
+    }
+    
+    vec2 diffV(vec2 a, vec2 b) {
+      return maxV(minV(a, b), -maxV(a, b));
+    }
+        
+    float subtract(float a, float b)
+    {
+        return max(-a, b);
+    }
+    
+    float symmetricDiff(float a, float b)
+    {
+        // (A ∪ B) \ (A ∩ B)
+        return max(min(a, b), -max(a, b));
+    }
+
+    vec2 scene(vec2 p) {
+      vec2 d = vec2(999., -1.);
+      float zoom = 20.;
+      float t = time * 1e-3 * .25;
+      vec2 p0 = p * zoom;
+      for (int i = 0; i < NUM_CIRCLES; i++) {
+        vec2 c1 = vec2(
+          sin(float(i) + t * .2) + 
+          sin(1. + float(i) + t * .3), 
+          cos(float(i) + t * .1) + 
+          cos(1. + float(i) + t * .2) +
+          cos(1.5 + float(i) + t * .7)
+        ) * 5.;
+        vec2 c = vec2(random(vec2(float(i * 2) * .2, .1)), random(vec2(float(i * 2 + 1) * .2, .2))) - .5;
+        c *= zoom;
+        float r = random(vec2(float(i * 2) * .2, .1));
+        d = diffV(d, 
+            sdCircle(p0 - c - c1, 5.5 + 1. * r, i)
+        );
+      }
+      return d;
+    }
+
+    
+    
+    void main() {
+      vec2 p0 = gl_FragCoord.xy / resolution - .5;
+      float aspect = resolution.x / resolution.y;
+      p0.x *= aspect;
+      float t = time * 1e-3;
+      vec2 p = rotate(p0, t * .05);
+      vec2 s = scene(p);
+      float d = s.x;
+      float x = smoothstep(0., 0.1, d);
+      vec3 bg = background(p);
+      vec3 fg = twilight(mod(s.y * .1, 1.)) + .2 * sin(-d * .5);
+      vec3 color = mix(fg, bg, x);
+      gl_FragColor = vec4(color, 1.);
+    }
+  </script>
+</digital-art>
\ No newline at end of file
diff --git a/colorful-distance-field-shaderanydayshaders-13/src/script.js b/colorful-distance-field-shaderanydayshaders-13/src/script.js
new file mode 100644
index 0000000..209db7d
--- /dev/null
+++ b/colorful-distance-field-shaderanydayshaders-13/src/script.js
@@ -0,0 +1,152 @@
+console.clear();
+
+class DigitalArt extends HTMLElement {
+  
+  constructor() {
+    super();
+    this.canvas = null;
+    this.gl = null;
+    this.onResize = this.onResize.bind(this);
+    this.loop = this.loop.bind(this);
+  }
+  
+  static register() {
+    customElements.define("digital-art", DigitalArt);
+  }
+  
+  connectedCallback() {
+    if (! this.gl) {
+      this.setup();      
+    }
+  }
+  
+  disconnectedCallback() {
+    this.dispose();
+  }
+  
+  get devicePixelRatio() {
+    return parseFloat(this.getAttribute('dpr')) || window.devicePixelRatio;
+  }
+  
+  
+  onResize() {
+    const { canvas, gl, program } = this;
+    const width = this.clientWidth;
+    const height = this.clientHeight;
+    const dpr = this.devicePixelRatio;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+    const uResolution = gl.getUniformLocation(program, "resolution");
+    gl.uniform2fv(uResolution, [gl.drawingBufferWidth, gl.drawingBufferHeight]);
+  }
+  
+  createShader(type, code) {
+    const { gl } = this;
+    const sh = gl.createShader(type, code);
+    gl.shaderSource(sh, code);
+    gl.compileShader(sh);
+    if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+      throw gl.getShaderInfoLog(sh);
+    }
+    return sh;
+  }
+  
+  createBuffers() {
+    const { gl, program } = this;
+    const bufferScripts = [...this.querySelectorAll('[type=buffer]')];
+    this.buffers = {};
+    let count = -1;
+    bufferScripts.forEach(container => {
+      const name = container.getAttribute('name') || 'position';
+      const recordSize = parseInt(container.getAttribute('data-size'), 10) || 1;
+      const data = new Float32Array(JSON.parse(container.textContent.trim()));
+      const buffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+      gl.bufferData(
+        gl.ARRAY_BUFFER,
+        data,
+        gl.STATIC_DRAW
+      );
+      const attribLoc = gl.getAttribLocation(program, name);
+      this.buffers[name] = { buffer, data, attribLoc, recordSize };
+      count = Math.max(count, (data.length / recordSize)|0);
+      gl.enableVertexAttribArray(attribLoc);
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+      gl.vertexAttribPointer(attribLoc, recordSize, gl.FLOAT, false, 0, 0);
+    });
+    this.count = count;
+  }
+  
+  loop(time = 0) {
+    const { gl, program } = this;
+    const uTime = gl.getUniformLocation(program, "time");
+    gl.uniform1f(uTime, time);
+    gl.drawArrays(gl.TRIANGLES, 0, this.count);
+    this.frame = requestAnimationFrame(this.loop);
+  }
+  
+  createPrograms() {
+    const { gl } = this;
+    const fragScript = this.querySelector('[type=frag]');
+    const vertScript = this.querySelector('[type=vert]');
+    const HEADER = 'precision highp float;';
+    const DEFAULT_VERT = HEADER + 'attribute vec4 position;void main(){gl_Position=position;}';
+    const DEFAULT_FRAG = HEADER + 'void main(){gl_FragColor=vec4(1.,0,0,1.);}';
+    
+    this.fragCode = fragScript?.textContent || DEFAULT_FRAG;
+    this.vertCode = vertScript?.textContent || DEFAULT_VERT;
+    
+    const program = gl.createProgram();
+    this.program = program;
+    this.gl = gl;
+    
+    this.fragShader = this.createShader(gl.FRAGMENT_SHADER, this.fragCode);
+    this.vertShader = this.createShader(gl.VERTEX_SHADER, this.vertCode);
+    
+    gl.attachShader(program, this.fragShader);
+    gl.attachShader(program, this.vertShader);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      throw gl.getProgramInfoLog(program);
+    }
+  }
+
+  setup() {
+    this.canvas = document.createElement('canvas');
+    this.dpr = window.devicePixelRatio;
+    this.appendChild(this.canvas);
+    this.gl = this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl');
+    this.createPrograms();
+    
+    const { program, gl } = this;
+
+    gl.useProgram(program);
+    this.createBuffers();
+    gl.clearColor(0, 0, 0, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    this.onResize();
+    window.addEventListener('resize', this.onResize, false);
+    this.frame = requestAnimationFrame(this.loop);
+  }
+  
+  dispose() {
+    cancelAnimationFrame(this.loop);
+    this.frame = -1;
+    window.removeEventListener('resize', this.onResize, false);
+    Object.entries(this.buffers).forEach(([name, buf]) => {
+      this.gl.deleteBuffer(buf.buffer);
+    });
+    this.gl.deleteProgram(this.program);
+    const loseCtx = this.gl.getExtension('WEBGL_lose_context');
+    if (loseCtx && typeof loseCtx.loseContext === 'function') {
+      loseCtx.loseContext();
+    }
+    this.removeChild(this.canvas);
+    this.gl = null;
+    this.canvas = null;
+    this.buffers = {}
+  }
+}
+
+DigitalArt.register();
diff --git a/colorful-distance-field-shaderanydayshaders-13/src/style.css b/colorful-distance-field-shaderanydayshaders-13/src/style.css
new file mode 100644
index 0000000..fa285ff
--- /dev/null
+++ b/colorful-distance-field-shaderanydayshaders-13/src/style.css
@@ -0,0 +1,15 @@
+body { margin: 0; }
+
+digital-art {
+  display: block;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+}
+
+digital-art canvas {
+  display: block;
+  width: 100%;
+  image-rendering: pixelated;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/colorpencilscss-doodle/README.markdown b/colorpencilscss-doodle/README.markdown
new file mode 100644
index 0000000..874b02a
--- /dev/null
+++ b/colorpencilscss-doodle/README.markdown
@@ -0,0 +1,4 @@
+# Colorpencils - CSS Doodle
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/aragakey/pen/pmWwbx](https://codepen.io/aragakey/pen/pmWwbx).
+
+ 
\ No newline at end of file
diff --git a/colorpencilscss-doodle/dist/index.html b/colorpencilscss-doodle/dist/index.html
new file mode 100644
index 0000000..00d2dcf
--- /dev/null
+++ b/colorpencilscss-doodle/dist/index.html
@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Colorpencils - CSS Doodle</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Kaushan+Script&amp;display=swap'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="title">Colorpencils</div>
+  <div class="wrapper">
+    <svg width="0" height="0" style="position: absolute;" viewBox="-10 -30 200 200">
+      <filter id="chalk" height="2" width="1.6" color-interpolation-filters="sRGB" y="-0.5" x="-0.3" filterUnits="objectBoundingBox">
+        <feTurbulence baseFrequency="0.9" seed="100" result="result1" numOctaves="2" type="turbulence"/>
+        <feDisplacementMap scale="4" yChannelSelector="G" in2="result1" xChannelSelector="R" in="SourceGraphic"/>
+      </filter>  
+    </svg>
+    <svg width="0" height="0" style="position: absolute;" viewBox="-10 -30 200 200">
+      <filter id="chalk_2" height="2" width="1.6" color-interpolation-filters="sRGB" y="-0.5" x="-0.3" filterUnits="objectBoundingBox">
+        <feTurbulence baseFrequency="0.9" seed="115" result="result1" numOctaves="2" type="turbulence"/>
+        <feDisplacementMap scale="1" yChannelSelector="G" in2="result1" xChannelSelector="R" in="SourceGraphic"/>
+      </filter>  
+    </svg>
+    <css-doodle>
+      :doodle {
+        @grid: 70x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      :container {
+        transform: scale(1.1);
+      }
+      background-color: #EF524B;
+      transform-origin: 0 0;
+      transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
+      border-radius: @r(100%);
+      ::after {
+        content: "";
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        left: @r(0, 50)%;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+        transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
+        background-color: #f9f5ed;
+        opacity: @r(.6, .8);
+      }
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 70x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      :container {
+        transform: scale(1.1);
+      }
+      background-color: #539cd4;
+      transform-origin: 0 0;
+      transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
+      border-radius: @r(100%);
+      ::after {
+        content: "";
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        left: @r(0, 50)%;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+        transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
+        background-color: #f9f5ed;
+        opacity: @r(.6, .8);
+      }
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 70x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      :container {
+        transform: scale(1.1);
+      }
+      background-color: #f1ca56;
+      transform-origin: 0 0;
+      transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
+      border-radius: @r(100%);
+      ::after {
+        content: "";
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        left: @r(0, 50)%;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+        transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
+        background-color: #f9f5ed;
+        opacity: @r(.6, .8);
+      }
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 70x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      :container {
+        transform: scale(1.1);
+      }
+      background-color: #44ad64;
+      transform-origin: 0 0;
+      transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
+      border-radius: @r(100%);
+      ::after {
+        content: "";
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        left: @r(0, 50)%;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+        transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
+        background-color: #f9f5ed;
+        opacity: @r(.6, .8);
+      }
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 70x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      :container {
+        transform: scale(1.1);
+      }
+      background-color: #f17f84;
+      transform-origin: 0 0;
+      transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
+      border-radius: @r(100%);
+      ::after {
+        content: "";
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        left: @r(0, 50)%;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+        transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
+        background-color: #f9f5ed;
+        opacity: @r(.6, .8);
+      }
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 160x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk_2);
+      }
+      transform: translate(@r(-60%, 60%), @r(-100%, 100%)) rotate(@r(-100, 100)deg);
+      width: @r(300, 600)%;
+      height: @r(4000, 8000)%;
+      border-left: @r(3)px solid @p(rgba(230, 75, 77, @r(.6, 1)), rgba(212, 150, 53, @r(.6, 1)));
+      border-bottom: @r(3)px solid @p(rgba(230, 75, 77, @r(.6, 1)), rgba(212, 150, 53, @r(.6, 1)));
+      border-radius: @r(50, 100)%;
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 40x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk_2);
+      }
+      transform: translate(@r(-60%, 60%), @r(-100%, 100%)) rotate(@r(-100, 100)deg);
+      width: @r(300, 600)%;
+      height: @r(1000, 2000)%;
+      border-left: @r(3)px solid @p(rgba(230, 75, 77, @r(.6, 1)), rgba(112, 175, 202, @r(.6, 1)));
+      border-bottom: @r(3)px solid @p(rgba(230, 75, 77, @r(.6, 1)), rgba(112, 175, 202, @r(.6, 1)));
+      border-radius: @r(50, 100)%;
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 1x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      background-image: repeating-linear-gradient(
+        45deg,
+        transparent @r(.45, .55)vmin,
+        #f7e63d @lr()vmin,
+        #f7e63d @r(.65, .75)vmin,
+        transparent @lr()vmin,
+        transparent 2.5vmin
+      ), repeating-linear-gradient(
+        -35deg,
+        transparent @r(.45, .55)vmin,
+        #70afca @lr()vmin,
+        #70afca @r(.65, .75)vmin,
+        transparent @lr()vmin,
+        transparent 2.5vmin
+      );
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 1x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      background-image: repeating-linear-gradient(
+        30deg,
+        transparent @r(.45, .55)vmin,
+        rgba(230, 75, 77, .8) @lr()vmin,
+        rgba(230, 75, 77, .8) @r(.75, .85)vmin,
+        transparent @lr()vmin,
+        transparent 3.5vmin
+      ), repeating-linear-gradient(
+        -30deg,
+        transparent @r(.55, .65)vmin,
+        #70afca @lr()vmin,
+        #70afca @r(.95, 1.05)vmin,
+        transparent @lr()vmin,
+        transparent 3.8vmin
+      );
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 90x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      :container {
+        transform: scale(1.1);
+      }
+      background-color: hsla(
+        calc(330 - @i() * 1), 80%, 68%, @r(.99)
+      );
+      transform-origin: 0 0;
+      transform: rotate(-30deg) scaleY(@r(.95, 1));
+      border-radius: @r(100%);
+      ::after {
+        content: "";
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        left: @r(0, 50)%;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+        transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
+        background-color: #f9f5ed;
+        opacity: @r(.6, .8);
+      }
+    </css-doodle>
+  </div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.7.0/css-doodle.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/colorpencilscss-doodle/dist/script.js b/colorpencilscss-doodle/dist/script.js
new file mode 100644
index 0000000..1b354cc
--- /dev/null
+++ b/colorpencilscss-doodle/dist/script.js
@@ -0,0 +1,6 @@
+document.addEventListener('click', function () {
+  document.querySelectorAll('css-doodle').forEach(function (o) {o.update();});
+});
+document.addEventListener('touchstart', function () {
+  document.querySelectorAll('css-doodle').forEach(function (o) {o.update();});
+});
\ No newline at end of file
diff --git a/colorpencilscss-doodle/dist/style.css b/colorpencilscss-doodle/dist/style.css
new file mode 100644
index 0000000..1fc86cf
--- /dev/null
+++ b/colorpencilscss-doodle/dist/style.css
@@ -0,0 +1,33 @@
+html {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  background-color: #f9f5ed;
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  margin: 0;
+  padding: 1.5vmin;
+  border: .2vmin solid transparent;
+  -o-border-image: linear-gradient(to right, #EF524B 0, #817EE6 100%) 1;
+     border-image: linear-gradient(to right, #EF524B 0, #817EE6 100%) 1;
+  -webkit-filter: url("#chalk_2");
+          filter: url("#chalk_2");
+}
+
+.wrapper > *:not(:last-of-type) {
+  margin-right: 2vmin;
+}
+
+.title {
+  margin-bottom: 1.5vmin;
+  padding-left: 1.5vmin;
+  font-family: 'Kaushan Script', cursive;
+  font-size: 4vmin;
+  color: rgba(0, 0, 0, 0.7);
+}
diff --git a/colorpencilscss-doodle/license.txt b/colorpencilscss-doodle/license.txt
new file mode 100644
index 0000000..7a5b3c3
--- /dev/null
+++ b/colorpencilscss-doodle/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Aragakey (https://codepen.io/aragakey/pen/pmWwbx)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/colorpencilscss-doodle/src/index.html b/colorpencilscss-doodle/src/index.html
new file mode 100644
index 0000000..a9ae5e0
--- /dev/null
+++ b/colorpencilscss-doodle/src/index.html
@@ -0,0 +1,249 @@
+<div class="title">Colorpencils</div>
+  <div class="wrapper">
+    <svg width="0" height="0" style="position: absolute;" viewBox="-10 -30 200 200">
+      <filter id="chalk" height="2" width="1.6" color-interpolation-filters="sRGB" y="-0.5" x="-0.3" filterUnits="objectBoundingBox">
+        <feTurbulence baseFrequency="0.9" seed="100" result="result1" numOctaves="2" type="turbulence"/>
+        <feDisplacementMap scale="4" yChannelSelector="G" in2="result1" xChannelSelector="R" in="SourceGraphic"/>
+      </filter>  
+    </svg>
+    <svg width="0" height="0" style="position: absolute;" viewBox="-10 -30 200 200">
+      <filter id="chalk_2" height="2" width="1.6" color-interpolation-filters="sRGB" y="-0.5" x="-0.3" filterUnits="objectBoundingBox">
+        <feTurbulence baseFrequency="0.9" seed="115" result="result1" numOctaves="2" type="turbulence"/>
+        <feDisplacementMap scale="1" yChannelSelector="G" in2="result1" xChannelSelector="R" in="SourceGraphic"/>
+      </filter>  
+    </svg>
+    <css-doodle>
+      :doodle {
+        @grid: 70x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      :container {
+        transform: scale(1.1);
+      }
+      background-color: #EF524B;
+      transform-origin: 0 0;
+      transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
+      border-radius: @r(100%);
+      ::after {
+        content: "";
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        left: @r(0, 50)%;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+        transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
+        background-color: #f9f5ed;
+        opacity: @r(.6, .8);
+      }
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 70x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      :container {
+        transform: scale(1.1);
+      }
+      background-color: #539cd4;
+      transform-origin: 0 0;
+      transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
+      border-radius: @r(100%);
+      ::after {
+        content: "";
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        left: @r(0, 50)%;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+        transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
+        background-color: #f9f5ed;
+        opacity: @r(.6, .8);
+      }
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 70x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      :container {
+        transform: scale(1.1);
+      }
+      background-color: #f1ca56;
+      transform-origin: 0 0;
+      transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
+      border-radius: @r(100%);
+      ::after {
+        content: "";
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        left: @r(0, 50)%;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+        transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
+        background-color: #f9f5ed;
+        opacity: @r(.6, .8);
+      }
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 70x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      :container {
+        transform: scale(1.1);
+      }
+      background-color: #44ad64;
+      transform-origin: 0 0;
+      transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
+      border-radius: @r(100%);
+      ::after {
+        content: "";
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        left: @r(0, 50)%;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+        transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
+        background-color: #f9f5ed;
+        opacity: @r(.6, .8);
+      }
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 70x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      :container {
+        transform: scale(1.1);
+      }
+      background-color: #f17f84;
+      transform-origin: 0 0;
+      transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
+      border-radius: @r(100%);
+      ::after {
+        content: "";
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        left: @r(0, 50)%;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+        transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
+        background-color: #f9f5ed;
+        opacity: @r(.6, .8);
+      }
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 160x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk_2);
+      }
+      transform: translate(@r(-60%, 60%), @r(-100%, 100%)) rotate(@r(-100, 100)deg);
+      width: @r(300, 600)%;
+      height: @r(4000, 8000)%;
+      border-left: @r(3)px solid @p(rgba(230, 75, 77, @r(.6, 1)), rgba(212, 150, 53, @r(.6, 1)));
+      border-bottom: @r(3)px solid @p(rgba(230, 75, 77, @r(.6, 1)), rgba(212, 150, 53, @r(.6, 1)));
+      border-radius: @r(50, 100)%;
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 40x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk_2);
+      }
+      transform: translate(@r(-60%, 60%), @r(-100%, 100%)) rotate(@r(-100, 100)deg);
+      width: @r(300, 600)%;
+      height: @r(1000, 2000)%;
+      border-left: @r(3)px solid @p(rgba(230, 75, 77, @r(.6, 1)), rgba(112, 175, 202, @r(.6, 1)));
+      border-bottom: @r(3)px solid @p(rgba(230, 75, 77, @r(.6, 1)), rgba(112, 175, 202, @r(.6, 1)));
+      border-radius: @r(50, 100)%;
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 1x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      background-image: repeating-linear-gradient(
+        45deg,
+        transparent @r(.45, .55)vmin,
+        #f7e63d @lr()vmin,
+        #f7e63d @r(.65, .75)vmin,
+        transparent @lr()vmin,
+        transparent 2.5vmin
+      ), repeating-linear-gradient(
+        -35deg,
+        transparent @r(.45, .55)vmin,
+        #70afca @lr()vmin,
+        #70afca @r(.65, .75)vmin,
+        transparent @lr()vmin,
+        transparent 2.5vmin
+      );
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 1x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      background-image: repeating-linear-gradient(
+        30deg,
+        transparent @r(.45, .55)vmin,
+        rgba(230, 75, 77, .8) @lr()vmin,
+        rgba(230, 75, 77, .8) @r(.75, .85)vmin,
+        transparent @lr()vmin,
+        transparent 3.5vmin
+      ), repeating-linear-gradient(
+        -30deg,
+        transparent @r(.55, .65)vmin,
+        #70afca @lr()vmin,
+        #70afca @r(.95, 1.05)vmin,
+        transparent @lr()vmin,
+        transparent 3.8vmin
+      );
+    </css-doodle>
+    <css-doodle>
+      :doodle {
+        @grid: 90x1 / 10vmin 80vmin;
+        overflow: hidden;
+        filter: url(#chalk);
+      }
+      :container {
+        transform: scale(1.1);
+      }
+      background-color: hsla(
+        calc(330 - @i() * 1), 80%, 68%, @r(.99)
+      );
+      transform-origin: 0 0;
+      transform: rotate(-30deg) scaleY(@r(.95, 1));
+      border-radius: @r(100%);
+      ::after {
+        content: "";
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        left: @r(0, 50)%;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+        transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
+        background-color: #f9f5ed;
+        opacity: @r(.6, .8);
+      }
+    </css-doodle>
+  </div>
\ No newline at end of file
diff --git a/colorpencilscss-doodle/src/script.babel b/colorpencilscss-doodle/src/script.babel
new file mode 100644
index 0000000..1252222
--- /dev/null
+++ b/colorpencilscss-doodle/src/script.babel
@@ -0,0 +1,6 @@
+document.addEventListener('click', function() {
+	document.querySelectorAll('css-doodle').forEach(function(o){ o.update() })
+})
+document.addEventListener('touchstart', function() {
+	document.querySelectorAll('css-doodle').forEach(function(o){ o.update() })
+})
\ No newline at end of file
diff --git a/colorpencilscss-doodle/src/style.scss b/colorpencilscss-doodle/src/style.scss
new file mode 100644
index 0000000..2eb3bfc
--- /dev/null
+++ b/colorpencilscss-doodle/src/style.scss
@@ -0,0 +1,28 @@
+html {
+	display: flex; 
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	background-color: #f9f5ed;
+}
+.wrapper {
+	display: flex; 
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	margin: 0;
+	padding: 1.5vmin;
+	border: .2vmin solid transparent;
+	border-image: linear-gradient(to right, #EF524B 0, #817EE6 100%) 1;
+	filter: url("#chalk_2");
+}
+.wrapper > *:not(:last-of-type) {
+	margin-right: 2vmin;
+}
+.title {
+	margin-bottom: 1.5vmin;
+	padding-left: 1.5vmin;
+	font-family: 'Kaushan Script', cursive;
+	font-size: 4vmin;
+	color: rgba(0, 0, 0, .7);
+}
\ No newline at end of file
diff --git a/commodore-logo-original-design-sketch-reproduction/README.markdown b/commodore-logo-original-design-sketch-reproduction/README.markdown
new file mode 100644
index 0000000..e08b67b
--- /dev/null
+++ b/commodore-logo-original-design-sketch-reproduction/README.markdown
@@ -0,0 +1,4 @@
+# Commodore Logo Original design sketch reproduction
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/2pxsolidblack/pen/RqBmej](https://codepen.io/2pxsolidblack/pen/RqBmej).
+
+ 
\ No newline at end of file
diff --git a/commodore-logo-original-design-sketch-reproduction/dist/index.html b/commodore-logo-original-design-sketch-reproduction/dist/index.html
new file mode 100644
index 0000000..df7a6b8
--- /dev/null
+++ b/commodore-logo-original-design-sketch-reproduction/dist/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Commodore Logo Original design sketch reproduction</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<section class="main">
+  <div class="info">
+    <p>DESIGNER<br>Chris Yaneff</p>
+    <p>CONTRACTOR<br>Commodore</p>
+    <p>DATE<br>1965</p>
+  </div>
+  
+  <section class="logoBigContainer">
+    <div class="below"></div>
+    <div class="above"></div>
+    <div class="lips"></div>
+    <div class="diagonal"><i class="j"></i></div>    
+  </section>
+  
+  <i class="hlE"><span></span></i>
+  <i class="hlG"><span></span></i>
+  <i class="hl10"><span></span></i>
+  <i class="hlH"><span></span></i>
+  <i class="vlC1"><span></span></i>
+  <i class="vlC2"><span></span></i>
+  <i class="vlD1"><span></span></i>
+  <i class="vlD2"><span></span></i>
+  <i class="vlB"><span></span></i>
+  <i class="vlF"><span></span></i>
+  <i class="vlI"><span></span></i>
+  
+  <div class="reference">
+    <h2 class="reference__title">REFERENCE</h2>
+    <div class="reference__col">
+      <p>B = 0.034 x A</p>
+      <p>C = 0.166 x A</p>
+      <p>D = 0.30 x A</p>
+    </div>
+    <div class="reference__col">
+      <p>E = 0.364 x A</p>
+      <p>F = 0.52 x A</p>
+      <p>G = 0.53 x A</p>
+    </div>
+    <div class="reference__col">
+      <p>H = 0.636 x A</p>
+      <p>I = 0.97 x A</p>
+      <p>J = 90 &deg;</p>
+    </div>
+  </div>
+  
+  <div class="logoSmall">
+    <div class="lips"></div>
+  </div>
+</setion>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/commodore-logo-original-design-sketch-reproduction/dist/style.css b/commodore-logo-original-design-sketch-reproduction/dist/style.css
new file mode 100644
index 0000000..a3018ce
--- /dev/null
+++ b/commodore-logo-original-design-sketch-reproduction/dist/style.css
@@ -0,0 +1,834 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
+body, html {
+  width: 100%;
+  height: 100%;
+  background-color: #e7e7e7;
+  color: #303030;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Roboto", sans-serif;
+  font-weight: 600;
+}
+
+.main {
+  max-height: 656px;
+  max-width: 656px;
+  border: 2px solid #303030;
+  box-sizing: border-box;
+  flex: 0 0 80vw;
+  height: 80vw;
+  position: relative;
+  background-color: #e7e7e7;
+}
+
+.logoBigContainer {
+  width: 55.2%;
+  height: 54%;
+  top: 22%;
+  right: auto;
+  bottom: auto;
+  left: 22%;
+  position: absolute;
+  border: 2px solid #303030;
+  overflow: hidden;
+}
+.logoBigContainer:before, .logoBigContainer:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 16.6%;
+  top: 30.6%;
+  right: auto;
+  bottom: auto;
+  left: 0;
+  position: absolute;
+  border-style: solid;
+  border-color: #303030;
+  border-width: 2px 0 2px 0;
+  z-index: 9;
+}
+.logoBigContainer:after {
+  top: 51.5%;
+  right: auto;
+  bottom: auto;
+  left: 0;
+  position: absolute;
+}
+.logoBigContainer > .below {
+  font-size: 5em;
+}
+.logoBigContainer > .below:before {
+  content: "";
+  position: absolute;
+  width: 98%;
+  height: 99.5%;
+  top: -1px;
+  right: auto;
+  bottom: auto;
+  left: -1px;
+  position: absolute;
+  border-radius: 100%;
+  border: 2px solid #303030;
+  box-shadow: inset 0 0 0 0.98em #e7e7e7, inset 0 0 0 calc(.98em + 2px) #303030, inset 0 0 0 2px #303030;
+  background-color: #e7e7e7;
+}
+.logoBigContainer > .above {
+  width: 63.5%;
+  height: 100%;
+  top: 0;
+  right: auto;
+  bottom: auto;
+  left: 0;
+  position: absolute;
+  border-right: 2px solid #303030;
+  overflow: hidden;
+  z-index: 5;
+  font-size: 5em;
+}
+.logoBigContainer > .above:before {
+  content: "";
+  position: absolute;
+  width: 154%;
+  height: 99.5%;
+  top: -1px;
+  right: auto;
+  bottom: auto;
+  left: -1px;
+  position: absolute;
+  border-radius: 100%;
+  border: 2px solid transparent;
+  box-shadow: inset 0 0 0 0.98em rgba(231, 231, 231, 0.5), inset 0 0 0 calc(.98em + 2px) #303030, inset 0 0 0 2px #303030;
+}
+.logoBigContainer > .lips {
+  width: 36%;
+  height: 38%;
+  top: 31%;
+  right: auto;
+  bottom: auto;
+  left: 64%;
+  position: absolute;
+  z-index: 0;
+  overflow: hidden;
+}
+.logoBigContainer > .lips:before, .logoBigContainer > .lips:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 50%;
+  top: auto;
+  right: auto;
+  bottom: 55%;
+  left: -20%;
+  position: absolute;
+  background-color: rgba(48, 48, 48, 0.45);
+  -webkit-transform: skewX(-45deg);
+          transform: skewX(-45deg);
+}
+.logoBigContainer > .lips:after {
+  top: auto;
+  right: auto;
+  bottom: -5%;
+  left: -20%;
+  position: absolute;
+  -webkit-transform: skewX(45deg);
+          transform: skewX(45deg);
+}
+.logoBigContainer > .diagonal {
+  width: 10%;
+  height: 10%;
+  top: 39.5%;
+  right: auto;
+  bottom: auto;
+  left: 81%;
+  position: absolute;
+  background-color: transparent;
+  -webkit-transform-origin: left bottom;
+          transform-origin: left bottom;
+  border-style: solid;
+  border-color: #303030;
+  border-width: 2px 2px 0 0;
+  border-top-right-radius: 100%;
+  z-index: 99;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+.logoBigContainer > .diagonal:before, .logoBigContainer > .diagonal:after {
+  content: "";
+  position: absolute;
+  top: -800px;
+  right: auto;
+  bottom: auto;
+  left: 0;
+  position: absolute;
+  width: 2px;
+  height: 1600px;
+  background-color: #303030;
+}
+.logoBigContainer > .diagonal:after {
+  top: auto;
+  right: auto;
+  bottom: 0;
+  left: -800px;
+  position: absolute;
+  width: 1600px;
+  height: 2px;
+}
+
+.info {
+  width: 100%;
+  height: 58px;
+  display: table;
+  font-size: 12px;
+  letter-spacing: .5px;
+  border-bottom: 2px solid #303030;
+}
+.info > * + * {
+  border-left: 2px solid #636363;
+}
+.info > * {
+  display: table-cell;
+  vertical-align: middle;
+  padding-left: 22px;
+  line-height: 1.8;
+}
+.info > *:first-child {
+  width: 41%;
+}
+.info > *:nth-child(2) {
+  width: 40%;
+}
+.info > *:last-child {
+  width: 19%;
+  padding-left: 8%;
+}
+
+.reference {
+  top: auto;
+  right: auto;
+  bottom: 2%;
+  left: 5%;
+  position: absolute;
+  display: table;
+  position: absolute;
+  font-size: 13px;
+}
+.reference__title {
+  display: table-row;
+  letter-spacing: .5px;
+  font-size: 12px;
+  height: 22px;
+}
+.reference__col {
+  display: table-cell;
+  line-height: 1.6;
+  padding-right: 15px;
+}
+
+i {
+  position: absolute;
+  background-color: #303030;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  content: 'C';
+}
+
+.j {
+  top: auto;
+  right: auto;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  width: 42%;
+  height: 43%;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #303030;
+  border-width: 2px 2px 0 0;
+}
+.j:before {
+  top: -40%;
+  right: auto;
+  bottom: auto;
+  left: -80%;
+  position: absolute;
+  content: 'J';
+  font-size: 12px;
+  -webkit-transform-origin: left bottom;
+          transform-origin: left bottom;
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+}
+
+.hlE {
+  top: 15%;
+  right: auto;
+  bottom: auto;
+  left: 58%;
+  position: absolute;
+  width: 20%;
+  height: 2px;
+}
+.hlE:before, .hlE:after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 8px;
+  background-color: #303030;
+}
+.hlE:before {
+  top: -3px;
+  right: auto;
+  bottom: auto;
+  left: -2px;
+  position: absolute;
+}
+.hlE:after {
+  top: -3px;
+  right: -2px;
+  bottom: auto;
+  left: auto;
+  position: absolute;
+}
+.hlE > span:before {
+  content: "E";
+  font-size: 12px;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: -15px;
+}
+
+.hlG {
+  top: 18%;
+  right: auto;
+  bottom: auto;
+  left: 35%;
+  position: absolute;
+  width: 29%;
+  height: 2px;
+}
+.hlG:before, .hlG:after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 8px;
+  background-color: #303030;
+}
+.hlG:before {
+  top: -3px;
+  right: auto;
+  bottom: auto;
+  left: -2px;
+  position: absolute;
+}
+.hlG:after {
+  top: -3px;
+  right: -2px;
+  bottom: auto;
+  left: auto;
+  position: absolute;
+}
+.hlG > span:before {
+  content: "G";
+  font-size: 12px;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: -15px;
+}
+
+.hl10 {
+  top: 79.5%;
+  right: auto;
+  bottom: auto;
+  left: 22.5%;
+  position: absolute;
+  width: 56%;
+  height: 2px;
+}
+.hl10:before, .hl10:after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 8px;
+  background-color: #303030;
+}
+.hl10:before {
+  top: -3px;
+  right: auto;
+  bottom: auto;
+  left: -2px;
+  position: absolute;
+}
+.hl10:after {
+  top: -3px;
+  right: -2px;
+  bottom: auto;
+  left: auto;
+  position: absolute;
+}
+.hl10 > span:before {
+  content: "10";
+  font-size: 12px;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: 5px;
+}
+
+.hlH {
+  top: 83%;
+  right: auto;
+  bottom: auto;
+  left: 22.5%;
+  position: absolute;
+  width: 35%;
+  height: 2px;
+}
+.hlH:before, .hlH:after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 8px;
+  background-color: #303030;
+}
+.hlH:before {
+  top: -3px;
+  right: auto;
+  bottom: auto;
+  left: -2px;
+  position: absolute;
+}
+.hlH:after {
+  top: -3px;
+  right: -2px;
+  bottom: auto;
+  left: auto;
+  position: absolute;
+}
+.hlH > span:before {
+  content: "H";
+  font-size: 12px;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: 5px;
+}
+
+.vlC1 {
+  top: 39%;
+  right: auto;
+  bottom: auto;
+  left: 13.5%;
+  position: absolute;
+  width: 9%;
+  height: 2px;
+  -webkit-transform-origin: left center;
+          transform-origin: left center;
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.vlC1:before, .vlC1:after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 8px;
+  background-color: #303030;
+}
+.vlC1:before {
+  top: -3px;
+  right: auto;
+  bottom: auto;
+  left: -2px;
+  position: absolute;
+}
+.vlC1:after {
+  top: -3px;
+  right: -2px;
+  bottom: auto;
+  left: auto;
+  position: absolute;
+}
+.vlC1 > span:before {
+  content: "C";
+  font-size: 12px;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: 5px;
+}
+.vlC1 > span:before {
+  -webkit-transform: rotate(-90deg) translateY(-33%);
+          transform: rotate(-90deg) translateY(-33%);
+}
+
+.vlC2 {
+  top: 50.5%;
+  right: auto;
+  bottom: auto;
+  left: 13.5%;
+  position: absolute;
+  width: 9%;
+  height: 2px;
+  -webkit-transform-origin: left center;
+          transform-origin: left center;
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.vlC2:before, .vlC2:after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 8px;
+  background-color: #303030;
+}
+.vlC2:before {
+  top: -3px;
+  right: auto;
+  bottom: auto;
+  left: -2px;
+  position: absolute;
+}
+.vlC2:after {
+  top: -3px;
+  right: -2px;
+  bottom: auto;
+  left: auto;
+  position: absolute;
+}
+.vlC2 > span:before {
+  content: "C";
+  font-size: 12px;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: 5px;
+}
+.vlC2 > span:before {
+  -webkit-transform: rotate(-90deg) translateY(-33%);
+          transform: rotate(-90deg) translateY(-33%);
+}
+
+.vlD1 {
+  top: 22.5%;
+  right: auto;
+  bottom: auto;
+  left: 81%;
+  position: absolute;
+  width: 16.5%;
+  height: 2px;
+  -webkit-transform-origin: left center;
+          transform-origin: left center;
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.vlD1:before, .vlD1:after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 8px;
+  background-color: #303030;
+}
+.vlD1:before {
+  top: -3px;
+  right: auto;
+  bottom: auto;
+  left: -2px;
+  position: absolute;
+}
+.vlD1:after {
+  top: -3px;
+  right: -2px;
+  bottom: auto;
+  left: auto;
+  position: absolute;
+}
+.vlD1 > span:before {
+  content: "D";
+  font-size: 12px;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: -15px;
+}
+.vlD1 > span:before {
+  -webkit-transform: rotate(-90deg) translateY(-33%);
+          transform: rotate(-90deg) translateY(-33%);
+}
+
+.vlD2 {
+  top: 59.5%;
+  right: auto;
+  bottom: auto;
+  left: 81%;
+  position: absolute;
+  width: 16.5%;
+  height: 2px;
+  -webkit-transform-origin: left center;
+          transform-origin: left center;
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.vlD2:before, .vlD2:after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 8px;
+  background-color: #303030;
+}
+.vlD2:before {
+  top: -3px;
+  right: auto;
+  bottom: auto;
+  left: -2px;
+  position: absolute;
+}
+.vlD2:after {
+  top: -3px;
+  right: -2px;
+  bottom: auto;
+  left: auto;
+  position: absolute;
+}
+.vlD2 > span:before {
+  content: "D";
+  font-size: 12px;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: -15px;
+}
+.vlD2 > span:before {
+  -webkit-transform: rotate(-90deg) translateY(-33%);
+          transform: rotate(-90deg) translateY(-33%);
+}
+
+.vlB {
+  top: 48.5%;
+  right: auto;
+  bottom: auto;
+  left: 81%;
+  position: absolute;
+  width: 1.5%;
+  height: 2px;
+  -webkit-transform-origin: left center;
+          transform-origin: left center;
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.vlB:before, .vlB:after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 8px;
+  background-color: #303030;
+}
+.vlB:before {
+  top: -3px;
+  right: auto;
+  bottom: auto;
+  left: -2px;
+  position: absolute;
+}
+.vlB:after {
+  top: -3px;
+  right: -2px;
+  bottom: auto;
+  left: auto;
+  position: absolute;
+}
+.vlB > span:before {
+  content: "B";
+  font-size: 12px;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: -15px;
+}
+.vlB > span:before {
+  -webkit-transform: rotate(-90deg) translateY(-33%);
+          transform: rotate(-90deg) translateY(-33%);
+}
+
+.vlF {
+  top: 35%;
+  right: auto;
+  bottom: auto;
+  left: 86.5%;
+  position: absolute;
+  width: 28.5%;
+  height: 2px;
+  -webkit-transform-origin: left center;
+          transform-origin: left center;
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.vlF:before, .vlF:after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 8px;
+  background-color: #303030;
+}
+.vlF:before {
+  top: -3px;
+  right: auto;
+  bottom: auto;
+  left: -2px;
+  position: absolute;
+}
+.vlF:after {
+  top: -3px;
+  right: -2px;
+  bottom: auto;
+  left: auto;
+  position: absolute;
+}
+.vlF > span:before {
+  content: "F";
+  font-size: 12px;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: -15px;
+}
+.vlF > span:before {
+  -webkit-transform: rotate(-90deg) translateY(-33%);
+          transform: rotate(-90deg) translateY(-33%);
+}
+
+.vlI {
+  top: 22.5%;
+  right: auto;
+  bottom: auto;
+  left: 18.5%;
+  position: absolute;
+  width: 53.5%;
+  height: 2px;
+  -webkit-transform-origin: left center;
+          transform-origin: left center;
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.vlI:before, .vlI:after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 8px;
+  background-color: #303030;
+}
+.vlI:before {
+  top: -3px;
+  right: auto;
+  bottom: auto;
+  left: -2px;
+  position: absolute;
+}
+.vlI:after {
+  top: -3px;
+  right: -2px;
+  bottom: auto;
+  left: auto;
+  position: absolute;
+}
+.vlI > span:before {
+  content: "I";
+  font-size: 12px;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: 5px;
+}
+.vlI > span:before {
+  -webkit-transform: rotate(-90deg) translateY(-33%);
+          transform: rotate(-90deg) translateY(-33%);
+}
+
+.logoSmall {
+  top: auto;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  position: absolute;
+  width: 22%;
+  height: 22%;
+  border-style: solid;
+  border-width: 2px 0 0 2px;
+  border-color: #303030;
+  background: #e7e7e7;
+  font-size: 1em;
+}
+.logoSmall:before {
+  content: "";
+  position: absolute;
+  width: 61%;
+  height: 61%;
+  top: 19%;
+  right: auto;
+  bottom: auto;
+  left: 18%;
+  position: absolute;
+  border-radius: 100%;
+  box-shadow: inset 0 0 0 1.2em #303030;
+}
+.logoSmall:after {
+  content: "";
+  position: absolute;
+  width: 42%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: auto;
+  left: auto;
+  position: absolute;
+  background-color: #e7e7e7;
+}
+.logoSmall > .lips {
+  width: 25%;
+  height: 24%;
+  top: 37%;
+  right: auto;
+  bottom: auto;
+  left: 58%;
+  position: absolute;
+  z-index: 0;
+  overflow: hidden;
+  z-index: 999;
+}
+.logoSmall > .lips:before, .logoSmall > .lips:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 50%;
+  top: auto;
+  right: auto;
+  bottom: 55%;
+  left: -20%;
+  position: absolute;
+  background-color: #303030;
+  -webkit-transform: skewX(-45deg);
+          transform: skewX(-45deg);
+}
+.logoSmall > .lips:after {
+  top: auto;
+  right: auto;
+  bottom: -5%;
+  left: -20%;
+  position: absolute;
+  -webkit-transform: skewX(45deg);
+          transform: skewX(45deg);
+}
diff --git a/commodore-logo-original-design-sketch-reproduction/license.txt b/commodore-logo-original-design-sketch-reproduction/license.txt
new file mode 100644
index 0000000..e8b0698
--- /dev/null
+++ b/commodore-logo-original-design-sketch-reproduction/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by 2pxSolidBlack (https://codepen.io/2pxsolidblack/pen/RqBmej)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/commodore-logo-original-design-sketch-reproduction/src/index.html b/commodore-logo-original-design-sketch-reproduction/src/index.html
new file mode 100644
index 0000000..c1d451a
--- /dev/null
+++ b/commodore-logo-original-design-sketch-reproduction/src/index.html
@@ -0,0 +1,49 @@
+<section class="main">
+  <div class="info">
+    <p>DESIGNER<br>Chris Yaneff</p>
+    <p>CONTRACTOR<br>Commodore</p>
+    <p>DATE<br>1965</p>
+  </div>
+  
+  <section class="logoBigContainer">
+    <div class="below"></div>
+    <div class="above"></div>
+    <div class="lips"></div>
+    <div class="diagonal"><i class="j"></i></div>    
+  </section>
+  
+  <i class="hlE"><span></span></i>
+  <i class="hlG"><span></span></i>
+  <i class="hl10"><span></span></i>
+  <i class="hlH"><span></span></i>
+  <i class="vlC1"><span></span></i>
+  <i class="vlC2"><span></span></i>
+  <i class="vlD1"><span></span></i>
+  <i class="vlD2"><span></span></i>
+  <i class="vlB"><span></span></i>
+  <i class="vlF"><span></span></i>
+  <i class="vlI"><span></span></i>
+  
+  <div class="reference">
+    <h2 class="reference__title">REFERENCE</h2>
+    <div class="reference__col">
+      <p>B = 0.034 x A</p>
+      <p>C = 0.166 x A</p>
+      <p>D = 0.30 x A</p>
+    </div>
+    <div class="reference__col">
+      <p>E = 0.364 x A</p>
+      <p>F = 0.52 x A</p>
+      <p>G = 0.53 x A</p>
+    </div>
+    <div class="reference__col">
+      <p>H = 0.636 x A</p>
+      <p>I = 0.97 x A</p>
+      <p>J = 90 &deg;</p>
+    </div>
+  </div>
+  
+  <div class="logoSmall">
+    <div class="lips"></div>
+  </div>
+</setion>
\ No newline at end of file
diff --git a/commodore-logo-original-design-sketch-reproduction/src/style.scss b/commodore-logo-original-design-sketch-reproduction/src/style.scss
new file mode 100644
index 0000000..6ebed4d
--- /dev/null
+++ b/commodore-logo-original-design-sketch-reproduction/src/style.scss
@@ -0,0 +1,335 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
+
+$sand: #e7e7e7;
+$mine: #303030;
+
+$b: 2px solid $mine;
+
+@mixin limitTo($value) {
+  max-height: $value;
+  max-width: $value;
+}
+
+@mixin colorize($bg: transparent, $fg: transparent) {
+  background-color: $bg;
+  color: $fg;
+}
+
+@mixin size($w, $h) {
+  width: $w;
+  height: $h;
+}
+
+@mixin pos($t: auto, $r: auto, $b: auto, $l: auto) {
+  top: $t;
+  right: $r;
+  bottom: $b;
+  left: $l;
+  position: absolute;
+}
+
+@mixin circle($w, $h, $top, $left) {
+  @include size($w, $h);
+  @include pos($t: $top, $l: $left);
+  border-radius: 100%;
+}
+
+@mixin show-pseudo {
+  content: "";
+  position: absolute;
+}
+
+@mixin line($x, $y, $l, $label, $labelPos, $dir: 'horizontal') {
+  @include pos($t: $y, $l: $x);
+  @include size($l, 2px);
+  
+  &:before,
+  &:after {
+    @include show-pseudo;
+    @include size(2px, 8px);
+    background-color: $mine;
+  }
+  
+  &:before {
+    @include pos($t: -3px, $l: -2px);
+  }
+    
+  &:after {
+    @include pos($t: -3px, $r: -2px);
+  }
+  
+  > span:before {
+    content: $label;
+    font-size: 12px;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    
+    @if $labelPos == 'above' {
+      top: -15px;
+    } @elseif $labelPos == 'below' {
+      top: 5px;
+    }
+  }
+  
+  @if $dir == 'vertical' {
+    transform-origin: left center;
+    transform: rotate(90deg);
+    
+    > span:before {
+      transform: rotate(-90deg) translateY(-33%);
+    }
+  }
+}
+
+body, html {
+  @include size(100%, 100%);
+  @include colorize($sand, $mine);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Roboto", sans-serif;
+  font-weight: 600;
+}
+
+.main {
+  @include limitTo(656px);
+  border: $b;
+  box-sizing: border-box; 
+  flex: 0 0 80vw;
+  height: 80vw;
+  position: relative;
+  background-color: $sand;
+}
+
+.logoBigContainer {
+  @include size(55.2%, 54%);
+  @include pos($t: 22%, $l: 22%);
+  border: $b;
+  overflow: hidden;
+  
+  &:before,
+  &:after {
+    @include show-pseudo;
+    @include size(100%, 16.6%);
+    @include pos($t: 30.6%, $l: 0);
+    border-style: solid;
+    border-color: $mine;
+    border-width: 2px 0 2px 0;
+    z-index: 9;
+  }
+  
+  &:after {
+    @include pos($t: 51.5%, $l: 0);    
+  }
+  
+  > .below {
+    font-size: 5em;
+    
+    &:before {
+      @include show-pseudo;
+      @include circle(98%, 99.5%, -1px, -1px);
+      border: $b;
+      box-shadow: inset 0 0 0 .98em $sand, inset 0 0 0 calc(.98em + 2px) $mine, inset 0 0 0 2px $mine;
+      background-color: $sand;
+    }
+  }
+  
+  > .above {
+    @include size(63.5%, 100%); 
+    @include pos($t: 0, $l: 0);
+    border-right: 2px solid $mine;
+    overflow: hidden;
+    z-index: 5;
+    font-size: 5em;
+
+    &:before {
+      @include show-pseudo;
+      @include circle(56% + 98%, 99.5%, -1px, -1px);
+      border: 2px solid transparent;
+      box-shadow: inset 0 0 0 .98em rgba($sand, .5), inset 0 0 0 calc(.98em + 2px) $mine, inset 0 0 0 2px $mine;
+    } 
+  }
+  
+  > .lips {
+    @include size(36%, 38%);
+    @include pos($t: 31%, $l: 64%);
+    z-index: 0;
+    overflow: hidden;
+    
+    &:before,
+    &:after {
+      @include show-pseudo;
+      @include size(100%, 50%);
+      @include pos($b: 55%, $l: -20%);
+      background-color: rgba($mine, .45);
+      transform: skewX(-45deg)
+    }
+    
+    &:after {
+      @include pos($b: -5%, $l: -20%);
+      transform: skewX(45deg)
+    }
+  }
+
+  > .diagonal {
+    @include size(10%, 10%);
+    @include pos($t: 39.5%, $l: 81%);
+    background-color: transparent;
+    transform-origin: left bottom;
+    border-style: solid;
+    border-color: $mine;
+    border-width: 2px 2px 0 0;
+    border-top-right-radius: 100%;
+    z-index: 99;
+    transform: rotate(45deg);
+    
+    &:before,
+    &:after {
+      @include show-pseudo;
+      @include pos($t: -800px, $l: 0);
+      @include size(2px, 1600px);
+      background-color: $mine;
+    }
+    
+    &:after {
+      @include pos($b: 0, $l: -800px);
+      @include size(1600px, 2px);
+    }
+  }
+}
+
+.info {
+  @include size(100%, 58px);
+  display: table;
+  font-size: 12px;
+  letter-spacing: .5px;
+  border-bottom: 2px solid $mine;
+    
+  > * + * {
+    border-left: 2px solid lighten($mine, 20);
+  }
+    
+  > * {
+    display: table-cell;
+    vertical-align: middle;
+    padding-left: 22px;
+    line-height: 1.8;
+  }
+    
+  > *:first-child {
+    width: 41%;
+  }
+    
+  > *:nth-child(2) {
+    width: 40%;
+  }
+    
+  > *:last-child {
+    width: 19%;
+    padding-left: 8%;
+  }
+}
+  
+.reference {
+  @include pos($b: 2%, $l: 5%);
+  display: table;
+  position: absolute;
+  font-size: 13px;
+  
+  &__title {
+    display: table-row;
+    letter-spacing: .5px;
+    font-size: 12px;
+    height: 22px;
+  }
+  
+  &__col {
+    display: table-cell;
+    line-height: 1.6;
+    padding-right: 15px;
+  }
+}
+
+i {
+  position: absolute;
+  background-color: $mine;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  content: 'C';
+}
+
+.j {
+  @include pos($b: 0, $l: 0);
+  @include size(42%, 43%);
+  background-color: transparent;
+  border-style: solid;
+  border-color: $mine;
+  border-width: 2px 2px 0 0;
+  
+  &:before {
+    @include pos($t: -40%, $l: -80%);
+    content: 'J';
+    font-size: 12px;
+    transform-origin: left bottom;
+    transform: rotate(-45deg);
+  }
+}
+.hlE { @include line(58%, 15%, 20%, 'E', 'above'); }
+.hlG { @include line(35%, 18%, 29%, 'G', 'above'); }
+.hl10 { @include line(22.5%, 79.5%, 56%, '10', 'below'); }
+.hlH { @include line(22.5%, 83%, 35%, 'H', 'below'); }
+.vlC1 { @include line(13.5%, 39%, 9%, 'C', 'below', 'vertical'); }
+.vlC2 { @include line(13.5%, 50.5%, 9%, 'C', 'below', 'vertical'); }
+.vlD1 { @include line(81%, 22.5%, 16.5%, 'D', 'above', 'vertical'); }
+.vlD2 { @include line(81%, 59.5%, 16.5%, 'D', 'above', 'vertical'); }
+.vlB { @include line(81%, 48.5%, 1.5%, 'B', 'above', 'vertical'); }
+.vlF { @include line(86.5%, 35%, 28.5%, 'F', 'above', 'vertical'); }
+.vlI { @include line(18.5%, 22.5%, 53.5%, 'I', 'below', 'vertical'); }
+
+.logoSmall {
+  @include pos($b: 0, $r: 0);
+  @include size(22%, 22%);
+  border-style: solid;
+  border-width: 2px 0 0 2px;
+  border-color: $mine;
+  background: $sand;
+  font-size: 1em;
+  
+  &:before {
+    @include show-pseudo;
+    @include circle(61%, 61%, 19%, 18%);
+    box-shadow: inset 0 0 0 1.2em $mine;
+  }
+  
+  &:after {
+    @include show-pseudo;
+    @include size(42%, 100%);
+    @include pos($t: 0, $r: 0);
+    background-color: $sand;
+  }
+  
+  > .lips {
+    @include size(25%, 24%);
+    @include pos($t: 37%, $l: 58%);
+    z-index: 0;
+    overflow: hidden;
+    z-index: 999;
+    
+    &:before,
+    &:after {
+      @include show-pseudo;
+      @include size(100%, 50%);
+      @include pos($b: 55%, $l: -20%);
+      background-color: $mine;
+      transform: skewX(-45deg)
+    }
+    
+    &:after {
+      @include pos($b: -5%, $l: -20%);
+      transform: skewX(45deg)
+    }
+  }
+}
\ No newline at end of file
diff --git a/confetti-button/README.markdown b/confetti-button/README.markdown
new file mode 100644
index 0000000..942de94
--- /dev/null
+++ b/confetti-button/README.markdown
@@ -0,0 +1,5 @@
+# Confetti Button
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/marcobiedermann/pen/ExvvyLQ](https://codepen.io/marcobiedermann/pen/ExvvyLQ).
+
+Like button shooting confetti using React and confetti-canvas
diff --git a/confetti-button/dist/index.html b/confetti-button/dist/index.html
new file mode 100644
index 0000000..65125cf
--- /dev/null
+++ b/confetti-button/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Confetti Button</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="root"></div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/confetti-button/dist/script.js b/confetti-button/dist/script.js
new file mode 100644
index 0000000..c3eb7d6
--- /dev/null
+++ b/confetti-button/dist/script.js
@@ -0,0 +1,23 @@
+import React, { useCallback } from "https://cdn.skypack.dev/react";
+import { render } from "https://cdn.skypack.dev/react-dom";
+import confetti from "https://cdn.skypack.dev/canvas-confetti";
+
+function App() {
+  const onClick = useCallback(() => {
+    confetti({
+      particleCount: 150,
+      spread: 60 });
+
+  }, []);
+
+  return /*#__PURE__*/(
+    React.createElement(React.Fragment, null, /*#__PURE__*/
+    React.createElement("button", { className: "button", onClick: onClick }, /*#__PURE__*/
+    React.createElement("span", null, "\uD83C\uDF89"), /*#__PURE__*/
+    React.createElement("span", null, "Like"))));
+
+
+
+}
+
+render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));
\ No newline at end of file
diff --git a/confetti-button/dist/style.css b/confetti-button/dist/style.css
new file mode 100644
index 0000000..4803d54
--- /dev/null
+++ b/confetti-button/dist/style.css
@@ -0,0 +1,44 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #f5f8ff;
+  font-family: 'Roboto', sans-serif;
+  line-height: 1.5;
+  min-block-size: 100vh;
+  display: grid;
+  place-items: center;
+}
+
+button {
+  cursor: pointer;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.button {
+  background-color: #404663;
+  color: #fff;
+  border: 0;
+  font-size: 2rem;
+  font-weight: 400;
+  padding: 0.5em 1.25em;
+  border-radius: 0.5em;
+  z-index: 999;
+  position: relative;
+  display: flex;
+  gap: 0.5em;
+  box-shadow:
+    0px 1.7px 2.2px rgba(0, 0, 0, 0.02),
+    0px 4px 5.3px rgba(0, 0, 0, 0.028),
+    0px 7.5px 10px rgba(0, 0, 0, 0.035),
+    0px 13.4px 17.9px rgba(0, 0, 0, 0.042),
+    0px 25.1px 33.4px rgba(0, 0, 0, 0.05),
+    0px 60px 80px rgba(0, 0, 0, 0.07);
+}
+
+.button:active {
+  transform: scale(1.01);
+}
\ No newline at end of file
diff --git a/confetti-button/license.txt b/confetti-button/license.txt
new file mode 100644
index 0000000..d7730f5
--- /dev/null
+++ b/confetti-button/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Marco Biedermann (https://codepen.io/marcobiedermann/pen/ExvvyLQ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/confetti-button/src/index.html b/confetti-button/src/index.html
new file mode 100644
index 0000000..98499e9
--- /dev/null
+++ b/confetti-button/src/index.html
@@ -0,0 +1 @@
+<div id="root"></div>
\ No newline at end of file
diff --git a/confetti-button/src/script.babel b/confetti-button/src/script.babel
new file mode 100644
index 0000000..2840acb
--- /dev/null
+++ b/confetti-button/src/script.babel
@@ -0,0 +1,23 @@
+import React, { useCallback } from "https://cdn.skypack.dev/react";
+import { render } from "https://cdn.skypack.dev/react-dom";
+import confetti from "https://cdn.skypack.dev/canvas-confetti";
+
+function App() {
+  const onClick = useCallback(() => {
+    confetti({
+      particleCount: 150,
+      spread: 60
+    });
+  }, []);
+
+  return (
+    <>
+      <button className="button" onClick={onClick}>
+        <span>🎉</span>
+        <span>Like</span>
+      </button>
+    </>
+  );
+}
+
+render(<App />, document.getElementById("root"));
diff --git a/confetti-button/src/style.css b/confetti-button/src/style.css
new file mode 100644
index 0000000..4803d54
--- /dev/null
+++ b/confetti-button/src/style.css
@@ -0,0 +1,44 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #f5f8ff;
+  font-family: 'Roboto', sans-serif;
+  line-height: 1.5;
+  min-block-size: 100vh;
+  display: grid;
+  place-items: center;
+}
+
+button {
+  cursor: pointer;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.button {
+  background-color: #404663;
+  color: #fff;
+  border: 0;
+  font-size: 2rem;
+  font-weight: 400;
+  padding: 0.5em 1.25em;
+  border-radius: 0.5em;
+  z-index: 999;
+  position: relative;
+  display: flex;
+  gap: 0.5em;
+  box-shadow:
+    0px 1.7px 2.2px rgba(0, 0, 0, 0.02),
+    0px 4px 5.3px rgba(0, 0, 0, 0.028),
+    0px 7.5px 10px rgba(0, 0, 0, 0.035),
+    0px 13.4px 17.9px rgba(0, 0, 0, 0.042),
+    0px 25.1px 33.4px rgba(0, 0, 0, 0.05),
+    0px 60px 80px rgba(0, 0, 0, 0.07);
+}
+
+.button:active {
+  transform: scale(1.01);
+}
\ No newline at end of file
diff --git a/confluent-flow/README.markdown b/confluent-flow/README.markdown
new file mode 100644
index 0000000..464ea45
--- /dev/null
+++ b/confluent-flow/README.markdown
@@ -0,0 +1,5 @@
+# Confluent flow
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shubniggurath/pen/oNZLQJW](https://codepen.io/shubniggurath/pen/oNZLQJW).
+
+Click to regenerate
diff --git a/confluent-flow/dist/index.html b/confluent-flow/dist/index.html
new file mode 100644
index 0000000..5bdba81
--- /dev/null
+++ b/confluent-flow/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Confluent flow</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="container"></div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/confluent-flow/dist/script.js b/confluent-flow/dist/script.js
new file mode 100644
index 0000000..f343315
--- /dev/null
+++ b/confluent-flow/dist/script.js
@@ -0,0 +1,1361 @@
+import { SVG } from 'https://cdn.skypack.dev/@svgdotjs/svg.js'
+import { Vec2 } from 'https://cdn.skypack.dev/wtc-math';
+import fitCurve from 'https://cdn.skypack.dev/fit-curves';
+console.clear();
+
+const config = {
+  seed: 1337,
+  drawingType: 1,
+  dimensions: new Vec2(700, 700),
+  nscale: .00125,
+  sscale: 20,
+  stepSize: 25,
+  num: 1,
+  r: 5,
+  rigidity: 0,
+  k: 8,
+  testGridSize: 1,
+  offset: new Vec2(10,-200),
+  sneks: 200
+};
+const vars = {
+  noise: null,
+  grid: null,
+  drawing: null
+}
+const setup = () => {
+  const container = document.querySelector('#container');
+  
+  config.offset.x = floatRandomBetween(-1000, 1000);
+  config.offset.y = floatRandomBetween(-1000, 1000);
+  config.nscale = floatRandomBetween(.000005, .002);
+  
+  container.innerHTML = '';
+  
+  vars.drawing = new Drawing(config.drawingType).addTo('#container').size(config.dimensions);
+  
+  const t = document.createElement('div')
+  t.className = 'tracer';
+  container.appendChild(t)
+  
+  vars.bluenoise = new BlueNoise({
+    size: config.dimensions.addNew(new Vec2(config.r*-1, config.r*-1)),
+    offset: new Vec2(config.r*1, config.r*1),
+    r: config.r,
+    k: config.k,
+    rigidity: config.rigidity
+  });
+  vars.noise = new SimplexNoise(config.seed);
+  vars.grid = new Grid({ cellSize: new Vec2(config.testGridSize,config.testGridSize), fill: -1 });
+  
+   /// Create the download button
+  // const dl = document.createElement('button');
+  // dl.innerText = 'download';
+  // dl.addEventListener('click', () => { 
+  //   vars.drawing.download();
+  // });
+  // container.appendChild(dl);
+  
+  document.body.querySelector('#container>:first-child').addEventListener('click', () => {
+    setup();
+  });
+  
+  draw(); drawStep();
+}
+
+let sneki = 0;
+const drawStep = () => {
+  const sneks = [];
+  if(vars.bluenoise.news.length > 0) {
+    requestAnimationFrame(drawStep)
+    for(let i = 0; i < config.sneks; i++) {
+      const [p] = vars.bluenoise.news.splice(Math.floor(Math.random() * vars.bluenoise.news.length), 1.);
+      if(!p) continue;
+      if(p.subtractNew(config.dimensions.scaleNew(.5)).length > 200) continue;
+      const pos = p;
+
+      const dir = new Vec2(1,0);
+      const f = field(pos, 1., sneki+1);
+      dir.angle = f.noise;
+
+      // vars.drawing.stroke = '#ff0000AA';
+      // vars.drawing.circle(pos, 1);
+      
+      const distancebreak = 3;
+      let cont = false;
+      for(let x = -distancebreak*.5; x <= distancebreak*.5; x++) {
+        for(let y = -distancebreak*.5; y <= distancebreak*.5; y++) {
+          const offset = new Vec2(x, y);
+          const t = vars.grid.getChildAtPosition(pos.addNew(offset));
+          if(t !== -1) cont = true;
+        }
+      }
+      if(cont) continue;
+      
+      // vars.drawing.circle(pos, .5);
+
+      const s = new Snek(pos, {
+        direction: dir, 
+        maxLength: 1000, 
+        id: sneki++, 
+        distanceProjection: 5, 
+        distanceBreak: distancebreak,
+        projectionBreakMultiplier: 0
+      });
+      sneks.push(s);
+//        projectionBreakMultiplier: 2
+      // 
+    }
+  }
+  
+  // for(let j = 0; j < config.lineLength; j++) {
+    for(let i = 0; i < sneks.length; i++) {
+      sneks[i].walkOut();
+    }
+  // }
+  
+  // document.querySelector('.tracer').innerHTML = vars.bluenoise.news.length;
+  for(let i = 0; i < sneks.length; i++) {
+    vars.drawing.path(sneks[i].bezier);
+  }
+}
+let interval;
+const draw = () => {
+  
+  vars.drawing.stroke = '#AAA';
+  vars.drawing.c.fillStyle = "#111122";
+  vars.drawing.c.fillRect(0,0, config.dimensions.x, config.dimensions.y);
+  
+  vars.drawing.rect(new Vec2(0,0), config.dimensions);
+  vars.drawing.c.lineWidth = 1.5;
+  
+  while(vars.bluenoise.active.length > 0) {
+    vars.bluenoise.step();
+  }
+}
+
+setTimeout(() => {
+  setup();
+}, 500);
+
+const ngon = (pos, r, nsides) => {
+  const a = Math.atan2(pos.y, pos.x) + Math.PI*.5;
+  const split = (Math.PI*2) / nsides;
+  return pos.length * Math.cos(split * Math.floor(.5 + a / split) - a) - r;
+}
+
+const field = (pos, id = 1, instanceID = 0)=> {
+  const normpos = pos.subtractNew(config.dimensions.scaleNew(.5));
+  const mask1 = ngon(normpos, 200, 40) < Math.random()*10;
+  const mask2 = ngon(normpos.addNew(new Vec2(0, 50)), 250, 3) < 0.;
+  let mask;
+  if(!id) {
+    if(mask2) {
+      id = 2.;
+    } else if(mask1) {
+      id = 1.;
+    }
+  }
+  
+  let n;
+  
+  if(id == 1.) {
+    n = vars.noise.noise2D(pos.addNew(config.offset).scale(config.nscale).array)*Math.PI;
+    // const a = Math.atan2(normpos.y, normpos.x);
+    // n = a - .5;
+  } else if(id == 2.) {
+    // const a = Math.atan2(normpos.y, normpos.x) + Math.PI * .5;
+    // n = a + .8;
+    
+    const a = Math.atan2(normpos.y, normpos.x);
+    n = a + .5;
+    
+    // n = noise.noise2D(pos.addNew(config.offset).scale(config.nscale).array)*Math.PI;
+  }
+  
+  // let apos = pos.subtractNew(dimensions.scaleNew(.5));
+  // let a = Math.atan2(apos.y, apos.x) + Math.PI * .5;
+  
+  // const n = noise.noise2D(pos.addNew(config.offset).scale(config.nscale).array)*Math.PI;
+  
+  // const n = a + .8;
+  
+  // const mask = pos.subtractNew(dimensions.scaleNew(.5)).length < 350;
+  // const mask = ngon(normpos, 150, 3) < 0.;
+  return {noise: n, mask: instanceID % 3 == 0 ? true : mask1, id: id};
+}
+
+class Snek {
+  static #defaults = {
+    grid: vars.grid,
+    head: true,
+    tail: true,
+    direction: new Vec2(1,0),
+    maxLength: 1000,
+    stepSize: 1,
+    fieldID: 1,
+    distanceBreak: 5,
+    distanceProjection: 5,
+    minLength: 10,
+    id: 0,
+    bailout: 10000,
+    projectionBreakMultiplier: .5
+  };
+  #alive = [true, true];            /* Two alive directions per snek */
+  #directions = [0,0];              /* The direction of the head and tail */
+  #positions = [0,0];               /* The position of the head and tail */
+  #maxLength = 1000;                 /* The maximum length of the whole snake */
+  #stepSize = 1;                    
+  #fieldID = 1;
+  #distanceBreak = 5;
+  #distanceProjection = 5;
+  #minLength = 5;
+  #points = [];
+  #id = 0;
+  #bailout = 10000;
+  #projectionBreakMultiplier = .5;
+
+  constructor(pos, settings) {
+    settings = Object.assign({}, Snek.#defaults, settings);
+    this.#alive[0] = settings.head === true;
+    this.#alive[1] = settings.tail === true;
+    this.directionHead = settings.direction.clone();
+    this.directionTail = settings.direction.rotateNew(Math.PI);
+    this.#positions[0] = pos.clone();
+    this.#positions[1] = pos.clone();
+    this.#fieldID = settings.fieldID;
+    this.#distanceBreak = settings.distanceBreak;
+    this.#distanceProjection = settings.distanceProjection;
+    this.#maxLength = settings.maxLength;
+    this.#minLength = settings.minLength;
+    this.#id = settings.id;
+    this.#bailout = settings.bailout;
+    this.#projectionBreakMultiplier = settings.projectionBreakMultiplier;
+  }
+  walkOut() {
+    // console.log(this.length, this.#maxLength)
+    let i = 0;
+    while(this.length < this.#maxLength) {
+      if(i++ > this.#bailout) break;
+      if(this.dead) break;
+      this.walk(this.#stepSize);
+    }
+    this.dead = true;
+  }
+  walk(distance, topTail = 0) {
+    if(this.#alive[topTail]) {
+      
+      const dir = this.#directions[topTail];
+      const pos = this.#positions[topTail].addNew(dir.scaleNew(distance));
+      const f = field(pos, this.#fieldID, this.#id);
+      
+      const t = vars.grid.getChildAtPosition(pos);
+      
+      let draw = true;
+      
+      let i = -this.#distanceBreak;
+      let a = dir.clone();
+      a.angle -= Math.PI * .5;
+      while(i <= this.#distanceBreak) {
+        const p = pos.addNew(a.scaleNew(i));
+        const t = vars.grid.getChildAtPosition(p);
+        if(t === -1 || t === this) {
+        } else {
+          draw = false;
+          break;
+        }
+        i += config.testGridSize;
+      }
+      
+      const dp = this.#distanceProjection;
+      let np = pos.clone();
+      const ndir = dir.clone();
+      for(let i = 0; i < dp; i++) {
+        if(draw === false) break;
+        np.add(ndir.scaleNew(distance));
+        const nf = field(np, this.#fieldID, this.#id);
+        ndir.angle = nf.noise;
+        let j = -this.#distanceBreak*this.#projectionBreakMultiplier;
+        let a = ndir.clone();
+        a.angle -= Math.PI * .5;
+        while(j <= this.#distanceBreak*this.#projectionBreakMultiplier) {
+          const p = np.addNew(a.scaleNew(j));
+          const t = vars.grid.getChildAtPosition(p);
+          if(t === -1 || t === this) {
+          } else {
+            draw = false;
+            break;
+          }
+          j += config.testGridSize;
+        }
+      }
+      
+      if(!f.mask) draw = false;
+      
+      if(draw) {
+        if(topTail === 0) {
+          this.#points.push(pos.clone());
+        } else {
+          this.#points.splice(0, 0, pos.clone());
+        }
+        vars.grid.addChildAtPosition(this, pos);
+        this.#positions[topTail] = pos.clone();
+      } else {
+        this.#alive[topTail] = false;
+      }
+      
+      dir.angle = f.noise;
+      if(topTail === 1) dir.rotate(Math.PI);
+      
+    }
+    if(topTail === 0 && this.#alive[1]) {
+      this.walk(distance, 1)
+    }
+  }
+
+  get length() {
+    return this.#points.length * this.#stepSize;
+  }
+  set dead(v) {
+    if(v === false) {
+      this.#alive[0] = false;
+      this.#alive[1] = false;
+    } else if(v === true) {
+      this.#alive[0] = true;
+    }
+  }
+  get dead() {
+    return !this.#alive[0] && !this.#alive[1];
+  }
+  get points() {
+    let points = this.#points;
+    if(points.length * this.#stepSize < this.#minLength) {
+      points.forEach((p) => {
+        vars.grid.addChildAtPosition(-1, p);
+      });
+      return null;
+    }
+    return points.map(p => p.array);
+  }
+  get bezier() {
+    const points = this.points;
+    if(!points?.length || points.length <= 1) return;
+    const bezierCurves = fitCurve(this.points, 1);
+    let str = "";
+    bezierCurves.map(function(bezier, i) {
+      if (i == 0) {
+          str += "M " + bezier[0][0] + " " + bezier[0][1];
+      }
+      str += "C " + bezier[1][0] + " " + bezier[1][1] + ", " +
+          bezier[2][0] + " " + bezier[2][1] + ", " +
+          bezier[3][0] + " " + bezier[3][1] + " ";
+    });
+
+    return str;
+  }
+  get id() {
+    return this.#fieldID;
+  }
+  set directionHead(v) {
+    if(v instanceof Vec2) this.#directions[0] = v;
+  }
+  get directionHead() {
+    return this.#directions[0];
+  }
+  set directionTail(v) {
+    if(v instanceof Vec2) this.#directions[1] = v;
+  }
+  get directionTail() {
+    return this.#directions[1];
+  }
+}
+
+
+class Drawing {
+  static DT_CANVAS = 1;
+  static DT_SVG = 2;
+  #drawing;
+  #ctx;
+  #mode;
+  #instructions = [];
+  
+  constructor(mode = Drawing.DT_CANVAS) {
+    this.mode = mode;
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.#drawing = document.createElement('canvas');
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.#drawing = SVG();
+    }
+    
+    this.stroke = '#333';
+  }
+  clear() {
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.clearRect(0,0,...this.dimensions.array);
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.clear();
+    }
+  }
+  rect(position, dimensions) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'rect',
+        args: [position, dimensions]
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      this.c.rect(...position.array, ...dimensions.array);
+      this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.rect(dimensions.width, dimensions.height).move(...position.array).fill("none").stroke('#f06');
+    }
+  }
+  circle(position, radius) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'circle',
+        args: [position, radius]
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      this.c.arc(position.x, position.y, radius, 0, 2 * Math.PI);
+      if(this.stroke) this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.circle(radius*2).fill("none").stroke(this.stroke).move(...position.subtractScalarNew(radius).array);
+    }
+  }
+  line(a, b) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'line',
+        args: [a, b]
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      this.c.moveTo(a.x, a.y);
+      this.c.lineTo(b.x, b.y);
+      if(this.stroke) this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.line(...a.array, ...b.array).stroke(this.stroke);
+    }
+  }
+  polyline(points) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'polyline',
+        args: points
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      points.forEach((p, i) => {
+        if(i === 0) this.c.moveTo(p.x, p.y);
+        else this.c.lineTo(p.x, p.y);
+      })
+      if(this.stroke) this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.polyline(points.map(p => p.array)).fill('none').stroke(this.stroke);
+    }
+  }
+  path(path) {
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      const p = new Path2D(path);
+      if(this.stroke) this.c.stroke(p);
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.path(path).fill('none').stroke(this.stroke);
+    }
+  }
+  polygon(points) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'polygon',
+        args: [points]
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      points.forEach((p, i) => {
+        if(i === 0) this.c.moveTo(p.x, p.y);
+        else this.c.lineTo(p.x, p.y);
+      })
+      if(this.stroke) this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.polygon(points.map(p => p.array)).fill('none').stroke(this.stroke);
+    }
+  }
+  
+  download() {
+    let d;
+    if(this.mode & Drawing.DT_CANVAS) {
+      d = new Drawing(Drawing.DT_SVG).size(this.dimensions);
+      this.#instructions.forEach((i) => {
+        d[i.f](...i.args);
+      });
+    } else if(this.mode & Drawing.DT_SVG) {
+      d = this;
+    }
+    
+    const fileName = "untitled.svg"
+    const url = "data:image/svg+xml;utf8," + encodeURIComponent(d.drawing.svg());
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = url;
+    link.click();
+  }
+  
+  addTo(element) {
+    if(typeof(element) === 'string') {
+      if(this.mode & Drawing.DT_CANVAS) {
+        document.body.querySelector(element).appendChild(this.drawing);
+      } else if(this.mode & Drawing.DT_SVG) {
+        this.drawing.addTo('#container');
+      }
+    }
+    return this;
+  }
+  
+  size(d) {
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.drawing.width = d.width;
+      this.drawing.height = d.height;
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.size(...d.array);
+    }
+    this.#dimensions = d;
+    return this;
+  }
+  
+  #dimensions
+  set dimensions(v) {
+    if(v instanceof Vec2) {
+      this.#dimensions = v;
+      this.size(v);
+    }
+  }
+  get dimensions() {
+    return this.#dimensions;
+  }
+  
+  get drawing() {
+    return this.#drawing;
+  }
+  get c() {
+    if(this.mode & Drawing.DT_CANVAS) {
+      if(this.#ctx) return this.#ctx;
+      this.#ctx = this.drawing.getContext('2d');
+      return this.#ctx;
+    }
+  }
+  #stroke;
+  set stroke(v) {
+    this.#stroke = v;
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.strokeStyle = v;
+    }
+  }
+  get stroke() {
+    return this.#stroke;
+  }
+  set mode(v) {
+    if(v & (Drawing.DT_CANVAS | Drawing.DT_SVG)) {
+      this.#mode = v;
+    }
+  }
+  get mode() {
+    return this.#mode || Drawing.DT_CANVAS;
+  }
+  #saving = false
+  set saving(v) {
+    this.#saving = v === true;
+  }
+  get saving() {
+    return this.#saving;
+  }
+}
+
+// vars.drawing = SVG().addTo('#container').size(config.dimensions.x, config.dimensions.y);
+
+
+class Grid {
+  static #defaults = {
+    size: config.dimensions.clone(),
+    cellSize: new Vec2(50,50),
+    fill: null
+  };
+  #grid = [];
+  #size;
+  #cellSize;
+  
+  constructor(settings) {
+    settings = Object.assign({}, Grid.#defaults, settings);
+    this.#size = Vec2.interpolate(settings.size) || Grid.#defaults.size;
+    this.#cellSize = Vec2.interpolate(settings.cellSize) || Grid.#defaults.cellSize;
+    this.#grid.length = this.gridSize.area;
+    this.#grid.fill(settings.fill || Grid.#defaults.fill);
+  }
+
+  addChild(child, i) {
+    this.#grid[i] = child;
+  }
+  addChildAtPosition(child, pos) {
+    this.#grid[this.getArrayPosition(pos)] = child;
+  }
+  addChildAtGridPosition(child, gridPos) {
+    this.#grid[this.getArrayPositionFromGridPos(gridPos)] = child;
+  }
+
+  getChild(i) {
+    return this.#grid[i];
+  }
+  getChildAtPosition(pos) {
+    return this.#grid[this.getArrayPosition(pos)];
+  }
+  getChildAtGridPosition(gridPos) {
+    return this.#grid[this.getArrayPositionFromGridPos(gridPos)];
+  }
+
+  getGridPositionForIndex(i) {
+    const gsize = this.gridSize;
+    return new Vec2(i%gsize.x, Math.floor(i/gsize.x));
+  }
+
+  getArrayPositionFromGridPos(gpos) {
+    const gsize = this.gridSize;
+    if(
+      gpos.x < 0 || gpos.x >= gsize.x ||
+      gpos.y < 0 || gpos.y >= gsize.y )
+      return null;
+    
+    gpos.x = gpos.x % gsize.x;
+    const arraypos = (gpos.x) + (gpos.y*gsize.x);
+    return arraypos;
+  }
+
+  getArrayPosition(realPos) {
+    const gpos = this.getGridPos(realPos);
+    return this.getArrayPositionFromGridPos(gpos);
+  }
+
+  getGridPos(realPos) {
+    if(realPos instanceof Vec2) {
+      return realPos.divideNew(this.#cellSize).floor();
+    }
+    // Throw an error
+  }
+  getSubPos(realPos) {
+    if(realPos instanceof Vec2) {
+      return realPos.modNew(this.#cellSize);
+    }
+    // Throw an error
+  }
+  getRealPos(gridPos) {
+    if(gridPos instanceof Vec2) {
+      return gridPos.multiplyNew(this.#cellSize);
+    }
+    // Throw an error
+  }
+
+  get size() {
+    return this.#size;
+  }
+  get gridSize() {
+    return this.#size.divideNew(this.#cellSize).floor();
+  }
+  get cellSize() {
+    return this.#cellSize;
+  }
+  get length() {
+    return this.#grid.length;
+  }
+}
+
+
+class BlueNoise {
+  static #defaults = {
+    size: config.dimensions.clone(),
+    offset: new Vec2(0,0),
+    r: 100,
+    k: 32,
+    d: 5,
+    initialList: [new Vec2(375,250)],
+    rigidity: 0
+  };
+  #activeList = [];
+  #newPositions = [];
+  #grid;
+  #r;
+  #k;
+  #d;
+  #size;
+  #offset;
+  #rigidity;
+
+  constructor(settings) {
+    settings = Object.assign({}, BlueNoise.#defaults, settings);
+    this.#r = settings.r;
+    this.#k = settings.k;
+    this.#d = settings.d;
+    this.#size = settings.size;
+    this.#offset = settings.offset;
+    this.#rigidity = settings.rigidity;
+    this.#grid = new Grid({
+      size: this.#size,
+      cellSize: this.#r / Math.SQRT2,
+      // cellSize: 1. / Math.SQRT2 / this.#r,
+      fill: -1
+    });
+    this.addElementAtPosition(...settings.initialList);
+  }
+  addElementAtPosition(...positions) {
+    positions.forEach((pos) => {
+      this.#grid.addChildAtPosition(pos, pos);
+      this.#activeList.push(pos);
+      this.#newPositions.push(pos);
+    });
+  }
+  draw(purge = true) {
+    this.news.forEach((newPos, i) => {
+      const r = 3;
+      const pos = newPos.addNew(this.#offset);
+      vars.drawing.circle(pos, r);
+      if(purge) this.news[i] = null;
+    });
+    this.#newPositions = this.news.filter(v => v !== null);
+    // this.news.length = 0;
+  }
+  step() {
+    const loopL = Math.min(this.active.length, this.#d);
+    for(let l = 0; l < loopL; l++) {
+      const ri = Math.floor(0, floatRandomBetween(this.active.length));
+      const c = this.active[ri];
+      let numfound = 0;
+      for(var i = 0; i < this.#k; i++) {
+        const a = floatRandomBetween(0, Math.PI*2);
+        const l = floatRandomBetween(this.#r, this.#r*2);
+        let pos = new Vec2(Math.cos(a)*l, Math.sin(a)*l).add(c);
+        // console.log(this.grid.getChildAtPosition(pos));
+        if(this.grid.getChildAtPosition(pos) === -1) {
+          const gridPos = this.grid.getGridPos(pos);
+          let tooClose = false;
+          for (var i = -1; i <= 1; i++) {
+            for (var j = -1; j <= 1; j++) {
+              if(i == 0 && j == 0) continue;
+              const p = this.grid.getChildAtGridPosition(gridPos.addNew(new Vec2(i, j)));
+              if(p !== -1 && p instanceof Vec2) {
+                const d = pos.distance(p);
+                if(d < this.#r*.5) tooClose = true;
+              }
+            }
+          }
+          if(!tooClose) {
+            const gridPosition = this.grid.getRealPos(this.grid.getGridPos(pos)).addNew(this.grid.cellSize.scaleNew(.5));
+            pos = Vec2.lerp(pos, gridPosition, this.#rigidity);
+            this.grid.addChildAtPosition(pos, pos);
+            this.active.push(pos);
+            this.news.push(pos);
+            numfound++;
+            break;
+          }
+        }
+      }
+      if(numfound === 0) {
+        this.active.splice(ri, 1);
+      }
+    }
+  }
+
+  get active() {
+    return this.#activeList;
+  }
+  get news() {
+    return this.#newPositions;
+  }
+  get grid() {
+    return this.#grid;
+  }
+  get offset() {
+    return this.#offset;
+  }
+}
+
+
+
+const floatRandomBetween = (min, max) => {
+  return Math.random() * (max - min) + min;
+};
+const clamp = function(a, b, v) {
+  return Math.min(b, Math.max(a, v));
+}
+const lerp = function(a, b, progress) {
+  return a + progress * (b - a);
+}
+const hash21 = (p) => {
+  const o = p.dot(new Vec2(27.609, 57.583));
+  return fract(Math.sin(o)*config.seed);
+}
+const precisionRound = (n, p) => {
+  const ip = Math.pow(10, p);
+  return Math.round(n*ip)/ip;
+}
+const fract = (n, p = 6) => {
+  const ip = Math.pow(10, p);
+  const _n = Math.abs(Math.floor(n*ip)/ip);
+  if(_n < 1) return _n;
+  return Math.floor(_n % Math.floor(_n)*ip)/ip;
+}
+const pal = ( t, a, b, c, d ) => {
+  const mp = c.scaleNew(t).add(d).scale(6.28318);
+  mp.x = Math.cos(mp.x);
+  mp.y = Math.cos(mp.y);
+  mp.z = Math.cos(mp.z);
+  return a.addNew(b.multiplyNew(mp));
+}
+const getColour = (d) => {
+  const col = pal( 
+    d/70+.65, 
+    new Vec3(0.5,0.5,0.5),
+    new Vec3(0.5,0.5,0.5),
+    new Vec3(1.0,1.0,1.0),
+    new Vec3(0.0,0.1,0.2) );
+
+  const colour = Math.floor(col.x * 255).toString(16) + Math.floor(col.y * 255).toString(16) + Math.floor(col.z * 255).toString(16);
+  const a = Math.floor((1.-d/30)*255).toString(16);
+  return colour+a;
+}
+
+
+
+////////////////////////////////////////////////////////////////
+// Simplex Noise utility code. Created by Reinder Nijhoff 2020
+// https://turtletoy.net/turtle/6e4e06d42e
+// Based on: http://webstaff.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
+////////////////////////////////////////////////////////////////
+function SimplexNoise(seed = 1) {
+	const grad = [  [1, 1, 0], [-1, 1, 0], [1, -1, 0], [-1, -1, 0],
+	            	[1, 0, 1], [-1, 0, 1], [1, 0, -1], [-1, 0, -1],
+            		[0, 1, 1], [0, -1, 1], [0, 1, -1], [0, -1, -1] ];
+	const perm = new Uint8Array(512);
+            		
+	const F2 = (Math.sqrt(3) - 1) / 2, F3 = 1/3;
+	const G2 = (3 - Math.sqrt(3)) / 6, G3 = 1/6;
+
+	const dot2 = (a, b) => a[0] * b[0] + a[1] * b[1];
+	const sub2 = (a, b) => [a[0] - b[0], a[1] - b[1]];
+	const dot3 = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+	const sub3 = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+
+	class SimplexNoise {
+		constructor(seed = 1) {
+			for (let i = 0; i < 512; i++) {
+				perm[i] = i & 255;
+			}
+			for (let i = 0; i < 255; i++) {
+				const r = (seed = this.hash(i+seed)) % (256 - i)  + i;
+				const swp = perm[i];
+				perm[i + 256] = perm[i] = perm[r];
+				perm[r + 256] = perm[r] = swp;
+			}
+		}
+		noise2D(p) {
+			const s = dot2(p, [F2, F2]);
+			const c = [Math.floor(p[0] + s), Math.floor(p[1] + s)];
+			const i = c[0] & 255, j = c[1] & 255;
+			const t = dot2(c, [G2, G2]);
+
+			const p0 = sub2(p, sub2(c, [t, t]));
+			const o  = p0[0] > p0[1] ? [1, 0] : [0, 1];
+			const p1 = sub2(sub2(p0, o), [-G2, -G2]);
+			const p2 = sub2(p0, [1-2*G2, 1-2*G2]);
+			
+			let n =  Math.max(0, 0.5-dot2(p0, p0))**4 * dot2(grad[perm[i+perm[j]] % 12], p0);
+			    n += Math.max(0, 0.5-dot2(p1, p1))**4 * dot2(grad[perm[i+o[0]+perm[j+o[1]]] % 12], p1);
+		    	n += Math.max(0, 0.5-dot2(p2, p2))**4 * dot2(grad[perm[i+1+perm[j+1]] % 12], p2);
+			
+			return 70 * n;
+		}
+		hash(i) {
+            i = 1103515245 * ((i >> 1) ^ i);
+            const h32 = 1103515245 * (i ^ (i>>3));
+            return h32 ^ (h32 >> 16);
+		}
+	}
+	return new SimplexNoise(seed);
+}
+
+
+
+
+
+
+
+// https://github.com/mapbox/delaunator
+//
+// ISC License
+//
+// Copyright (c) 2017, Mapbox
+//
+// Permission to use, copy, modify, and/or distribute this software for any purpose
+// with or without fee is hereby granted, provided that the above copyright notice
+// and this permission notice appear in all copies.
+//
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+// FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+// OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+// TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+// THIS SOFTWARE.
+//
+
+const EPSILON = Math.pow(2, -52);
+const EDGE_STACK = new Uint32Array(512);
+
+class Delaunator {
+    static from(points) {
+        const n = points.length;
+        const coords = new Float64Array(n * 2);
+
+        for (let i = 0; i < n; i++) {
+            const p = points[i];
+            coords[2 * i] = p[0];
+            coords[2 * i + 1] = p[1];
+        }
+
+        return new Delaunator(coords);
+    }
+
+    constructor(coords) {
+        const n = coords.length >> 1;
+        if (n > 0 && typeof coords[0] !== 'number') throw new Error('Expected coords to contain numbers.');
+
+        this.coords = coords;
+
+        // arrays that will store the triangulation graph
+        const maxTriangles = 2 * n - 5;
+        const triangles = this.triangles = new Uint32Array(maxTriangles * 3);
+        const halfedges = this.halfedges = new Int32Array(maxTriangles * 3);
+
+        // temporary arrays for tracking the edges of the advancing convex hull
+        this._hashSize = Math.ceil(Math.sqrt(n));
+        const hullPrev = this.hullPrev = new Uint32Array(n); // edge to prev edge
+        const hullNext = this.hullNext = new Uint32Array(n); // edge to next edge
+        const hullTri = this.hullTri = new Uint32Array(n); // edge to adjacent triangle
+        const hullHash = new Int32Array(this._hashSize).fill(-1); // angular edge hash
+
+        // populate an array of point indices; calculate input data bbox
+        const ids = new Uint32Array(n);
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+
+        for (let i = 0; i < n; i++) {
+            const x = coords[2 * i];
+            const y = coords[2 * i + 1];
+            if (x < minX) minX = x;
+            if (y < minY) minY = y;
+            if (x > maxX) maxX = x;
+            if (y > maxY) maxY = y;
+            ids[i] = i;
+        }
+        const cx = (minX + maxX) / 2;
+        const cy = (minY + maxY) / 2;
+
+        let minDist = Infinity;
+        let i0, i1, i2;
+
+        // pick a seed point close to the center
+        for (let i = 0; i < n; i++) {
+            const d = dist(cx, cy, coords[2 * i], coords[2 * i + 1]);
+            if (d < minDist) {
+                i0 = i;
+                minDist = d;
+            }
+        }
+        const i0x = coords[2 * i0];
+        const i0y = coords[2 * i0 + 1];
+
+        minDist = Infinity;
+
+        // find the point closest to the seed
+        for (let i = 0; i < n; i++) {
+            if (i === i0) continue;
+            const d = dist(i0x, i0y, coords[2 * i], coords[2 * i + 1]);
+            if (d < minDist && d > 0) {
+                i1 = i;
+                minDist = d;
+            }
+        }
+        let i1x = coords[2 * i1];
+        let i1y = coords[2 * i1 + 1];
+
+        let minRadius = Infinity;
+
+        // find the third point which forms the smallest circumcircle with the first two
+        for (let i = 0; i < n; i++) {
+            if (i === i0 || i === i1) continue;
+            const r = circumradius(i0x, i0y, i1x, i1y, coords[2 * i], coords[2 * i + 1]);
+            if (r < minRadius) {
+                i2 = i;
+                minRadius = r;
+            }
+        }
+        let i2x = coords[2 * i2];
+        let i2y = coords[2 * i2 + 1];
+
+        if (minRadius === Infinity) {
+            throw new Error('No Delaunay triangulation exists for this input.');
+        }
+
+        // swap the order of the seed points for counter-clockwise orientation
+        if (orient(i0x, i0y, i1x, i1y, i2x, i2y)) {
+            const i = i1;
+            const x = i1x;
+            const y = i1y;
+            i1 = i2;
+            i1x = i2x;
+            i1y = i2y;
+            i2 = i;
+            i2x = x;
+            i2y = y;
+        }
+
+        const center = circumcenter(i0x, i0y, i1x, i1y, i2x, i2y);
+        this._cx = center.x;
+        this._cy = center.y;
+
+        const dists = new Float64Array(n);
+        for (let i = 0; i < n; i++) {
+            dists[i] = dist(coords[2 * i], coords[2 * i + 1], center.x, center.y);
+        }
+
+        // sort the points by distance from the seed triangle circumcenter
+        quicksort(ids, dists, 0, n - 1);
+
+        // set up the seed triangle as the starting hull
+        this.hullStart = i0;
+        let hullSize = 3;
+
+        hullNext[i0] = hullPrev[i2] = i1;
+        hullNext[i1] = hullPrev[i0] = i2;
+        hullNext[i2] = hullPrev[i1] = i0;
+
+        hullTri[i0] = 0;
+        hullTri[i1] = 1;
+        hullTri[i2] = 2;
+
+        hullHash[this._hashKey(i0x, i0y)] = i0;
+        hullHash[this._hashKey(i1x, i1y)] = i1;
+        hullHash[this._hashKey(i2x, i2y)] = i2;
+
+        this.trianglesLen = 0;
+        this._addTriangle(i0, i1, i2, -1, -1, -1);
+
+        for (let k = 0, xp, yp; k < ids.length; k++) {
+            const i = ids[k];
+            const x = coords[2 * i];
+            const y = coords[2 * i + 1];
+
+            // skip near-duplicate points
+            if (k > 0 && Math.abs(x - xp) <= EPSILON && Math.abs(y - yp) <= EPSILON) continue;
+            xp = x;
+            yp = y;
+
+            // skip seed triangle points
+            if (i === i0 || i === i1 || i === i2) continue;
+
+            // find a visible edge on the convex hull using edge hash
+            let start = 0;
+            for (let j = 0, key = this._hashKey(x, y); j < this._hashSize; j++) {
+                start = hullHash[(key + j) % this._hashSize];
+                if (start !== -1 && start !== hullNext[start]) break;
+            }
+
+            start = hullPrev[start];
+            let e = start, q;
+            while (q = hullNext[e], !orient(x, y, coords[2 * e], coords[2 * e + 1], coords[2 * q], coords[2 * q + 1])) {
+                e = q;
+                if (e === start) {
+                    e = -1;
+                    break;
+                }
+            }
+            if (e === -1) continue; // likely a near-duplicate point; skip it
+
+            // add the first triangle from the point
+            let t = this._addTriangle(e, i, hullNext[e], -1, -1, hullTri[e]);
+
+            // recursively flip triangles from the point until they satisfy the Delaunay condition
+            hullTri[i] = this._legalize(t + 2);
+            hullTri[e] = t; // keep track of boundary triangles on the hull
+            hullSize++;
+
+            // walk forward through the hull, adding more triangles and flipping recursively
+            let n = hullNext[e];
+            while (q = hullNext[n], orient(x, y, coords[2 * n], coords[2 * n + 1], coords[2 * q], coords[2 * q + 1])) {
+                t = this._addTriangle(n, i, q, hullTri[i], -1, hullTri[n]);
+                hullTri[i] = this._legalize(t + 2);
+                hullNext[n] = n; // mark as removed
+                hullSize--;
+                n = q;
+            }
+
+            // walk backward from the other side, adding more triangles and flipping
+            if (e === start) {
+                while (q = hullPrev[e], orient(x, y, coords[2 * q], coords[2 * q + 1], coords[2 * e], coords[2 * e + 1])) {
+                    t = this._addTriangle(q, i, e, -1, hullTri[e], hullTri[q]);
+                    this._legalize(t + 2);
+                    hullTri[q] = t;
+                    hullNext[e] = e; // mark as removed
+                    hullSize--;
+                    e = q;
+                }
+            }
+
+            // update the hull indices
+            this.hullStart = hullPrev[i] = e;
+            hullNext[e] = hullPrev[n] = i;
+            hullNext[i] = n;
+
+            // save the two new edges in the hash table
+            hullHash[this._hashKey(x, y)] = i;
+            hullHash[this._hashKey(coords[2 * e], coords[2 * e + 1])] = e;
+        }
+
+        this.hull = new Uint32Array(hullSize);
+        for (let i = 0, e = this.hullStart; i < hullSize; i++) {
+            this.hull[i] = e;
+            e = hullNext[e];
+        }
+        this.hullPrev = this.hullNext = this.hullTri = null; // get rid of temporary arrays
+
+        // trim typed triangle mesh arrays
+        this.triangles = triangles.subarray(0, this.trianglesLen);
+        this.halfedges = halfedges.subarray(0, this.trianglesLen);
+    }
+
+    _hashKey(x, y) {
+        return Math.floor(pseudoAngle(x - this._cx, y - this._cy) * this._hashSize) % this._hashSize;
+    }
+
+    _legalize(a) {
+        const {triangles, coords, halfedges} = this;
+
+        let i = 0;
+        let ar = 0;
+
+        // recursion eliminated with a fixed-size stack
+        while (true) {
+            const b = halfedges[a];
+
+            /* if the pair of triangles doesn't satisfy the Delaunay condition
+             * (p1 is inside the circumcircle of [p0, pl, pr]), flip them,
+             * then do the same check/flip recursively for the new pair of triangles
+             *
+             *           pl                    pl
+             *          /||\                  /  \
+             *       al/ || \bl            al/    \a
+             *        /  ||  \              /      \
+             *       /  a||b  \    flip    /___ar___\
+             *     p0\   ||   /p1   =>   p0\---bl---/p1
+             *        \  ||  /              \      /
+             *       ar\ || /br             b\    /br
+             *          \||/                  \  /
+             *           pr                    pr
+             */
+            const a0 = a - a % 3;
+            ar = a0 + (a + 2) % 3;
+
+            if (b === -1) { // convex hull edge
+                if (i === 0) break;
+                a = EDGE_STACK[--i];
+                continue;
+            }
+
+            const b0 = b - b % 3;
+            const al = a0 + (a + 1) % 3;
+            const bl = b0 + (b + 2) % 3;
+
+            const p0 = triangles[ar];
+            const pr = triangles[a];
+            const pl = triangles[al];
+            const p1 = triangles[bl];
+
+            const illegal = inCircle(
+                coords[2 * p0], coords[2 * p0 + 1],
+                coords[2 * pr], coords[2 * pr + 1],
+                coords[2 * pl], coords[2 * pl + 1],
+                coords[2 * p1], coords[2 * p1 + 1]);
+
+            if (illegal) {
+                triangles[a] = p1;
+                triangles[b] = p0;
+
+                const hbl = halfedges[bl];
+
+                // edge swapped on the other side of the hull (rare); fix the halfedge reference
+                if (hbl === -1) {
+                    let e = this.hullStart;
+                    do {
+                        if (this.hullTri[e] === bl) {
+                            this.hullTri[e] = a;
+                            break;
+                        }
+                        e = this.hullNext[e];
+                    } while (e !== this.hullStart);
+                }
+                this._link(a, hbl);
+                this._link(b, halfedges[ar]);
+                this._link(ar, bl);
+
+                const br = b0 + (b + 1) % 3;
+
+                // don't worry about hitting the cap: it can only happen on extremely degenerate input
+                if (i < EDGE_STACK.length) {
+                    EDGE_STACK[i++] = br;
+                }
+            } else {
+                if (i === 0) break;
+                a = EDGE_STACK[--i];
+            }
+        }
+
+        return ar;
+    }
+
+    _link(a, b) {
+        this.halfedges[a] = b;
+        if (b !== -1) this.halfedges[b] = a;
+    }
+
+    // add a new triangle given vertex indices and adjacent half-edge ids
+    _addTriangle(i0, i1, i2, a, b, c) {
+        const t = this.trianglesLen;
+
+        this.triangles[t] = i0;
+        this.triangles[t + 1] = i1;
+        this.triangles[t + 2] = i2;
+
+        this._link(t, a);
+        this._link(t + 1, b);
+        this._link(t + 2, c);
+
+        this.trianglesLen += 3;
+
+        return t;
+    }
+}
+
+// monotonically increases with real angle, but doesn't need expensive trigonometry
+function pseudoAngle(dx, dy) {
+    const p = dx / (Math.abs(dx) + Math.abs(dy));
+    return (dy > 0 ? 3 - p : 1 + p) / 4; // [0..1]
+}
+
+function dist(ax, ay, bx, by) {
+    const dx = ax - bx;
+    const dy = ay - by;
+    return dx * dx + dy * dy;
+}
+
+function orient(px, py, qx, qy, rx, ry) {
+    return (qy - py) * (rx - qx) - (qx - px) * (ry - qy) < 0;
+}
+
+function inCircle(ax, ay, bx, by, cx, cy, px, py) {
+    const dx = ax - px;
+    const dy = ay - py;
+    const ex = bx - px;
+    const ey = by - py;
+    const fx = cx - px;
+    const fy = cy - py;
+
+    const ap = dx * dx + dy * dy;
+    const bp = ex * ex + ey * ey;
+    const cp = fx * fx + fy * fy;
+
+    return dx * (ey * cp - bp * fy) -
+           dy * (ex * cp - bp * fx) +
+           ap * (ex * fy - ey * fx) < 0;
+}
+
+function circumradius(ax, ay, bx, by, cx, cy) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const ex = cx - ax;
+    const ey = cy - ay;
+
+    const bl = dx * dx + dy * dy;
+    const cl = ex * ex + ey * ey;
+    const d = 0.5 / (dx * ey - dy * ex);
+
+    const x = (ey * bl - dy * cl) * d;
+    const y = (dx * cl - ex * bl) * d;
+
+    return x * x + y * y;
+}
+
+function circumcenter(ax, ay, bx, by, cx, cy) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const ex = cx - ax;
+    const ey = cy - ay;
+
+    const bl = dx * dx + dy * dy;
+    const cl = ex * ex + ey * ey;
+    const d = 0.5 / (dx * ey - dy * ex);
+
+    const x = ax + (ey * bl - dy * cl) * d;
+    const y = ay + (dx * cl - ex * bl) * d;
+
+    return {x, y};
+}
+
+function quicksort(ids, dists, left, right) {
+    if (right - left <= 20) {
+        for (let i = left + 1; i <= right; i++) {
+            const temp = ids[i];
+            const tempDist = dists[temp];
+            let j = i - 1;
+            while (j >= left && dists[ids[j]] > tempDist) ids[j + 1] = ids[j--];
+            ids[j + 1] = temp;
+        }
+    } else {
+        const median = (left + right) >> 1;
+        let i = left + 1;
+        let j = right;
+        swap(ids, median, i);
+        if (dists[ids[left]] > dists[ids[right]]) swap(ids, left, right);
+        if (dists[ids[i]] > dists[ids[right]]) swap(ids, i, right);
+        if (dists[ids[left]] > dists[ids[i]]) swap(ids, left, i);
+
+        const temp = ids[i];
+        const tempDist = dists[temp];
+        while (true) {
+            do i++; while (dists[ids[i]] < tempDist);
+            do j--; while (dists[ids[j]] > tempDist);
+            if (j < i) break;
+            swap(ids, i, j);
+        }
+        ids[left + 1] = ids[j];
+        ids[j] = temp;
+
+        if (right - i + 1 >= j - left) {
+            quicksort(ids, dists, i, right);
+            quicksort(ids, dists, left, j - 1);
+        } else {
+            quicksort(ids, dists, left, j - 1);
+            quicksort(ids, dists, i, right);
+        }
+    }
+}
+
+function swap(arr, i, j) {
+    const tmp = arr[i];
+    arr[i] = arr[j];
+    arr[j] = tmp;
+}
\ No newline at end of file
diff --git a/confluent-flow/dist/style.css b/confluent-flow/dist/style.css
new file mode 100644
index 0000000..619f82c
--- /dev/null
+++ b/confluent-flow/dist/style.css
@@ -0,0 +1,30 @@
+document, body {
+  background: #111122;
+  margin: 0;
+  min-height: 100vh;
+}
+
+body {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+#container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+
+#container > :first-child {
+  cursor: pointer;
+}
+
+button {
+  max-width: 200px;
+  margin-top: 10px;
+}
+
+.tracer {
+  color: #fff;
+}
\ No newline at end of file
diff --git a/confluent-flow/license.txt b/confluent-flow/license.txt
new file mode 100644
index 0000000..ba1479b
--- /dev/null
+++ b/confluent-flow/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Liam Egan (https://codepen.io/shubniggurath/pen/oNZLQJW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/confluent-flow/src/index.pug b/confluent-flow/src/index.pug
new file mode 100644
index 0000000..dce8f5f
--- /dev/null
+++ b/confluent-flow/src/index.pug
@@ -0,0 +1 @@
+#container
\ No newline at end of file
diff --git a/confluent-flow/src/script.js b/confluent-flow/src/script.js
new file mode 100644
index 0000000..f343315
--- /dev/null
+++ b/confluent-flow/src/script.js
@@ -0,0 +1,1361 @@
+import { SVG } from 'https://cdn.skypack.dev/@svgdotjs/svg.js'
+import { Vec2 } from 'https://cdn.skypack.dev/wtc-math';
+import fitCurve from 'https://cdn.skypack.dev/fit-curves';
+console.clear();
+
+const config = {
+  seed: 1337,
+  drawingType: 1,
+  dimensions: new Vec2(700, 700),
+  nscale: .00125,
+  sscale: 20,
+  stepSize: 25,
+  num: 1,
+  r: 5,
+  rigidity: 0,
+  k: 8,
+  testGridSize: 1,
+  offset: new Vec2(10,-200),
+  sneks: 200
+};
+const vars = {
+  noise: null,
+  grid: null,
+  drawing: null
+}
+const setup = () => {
+  const container = document.querySelector('#container');
+  
+  config.offset.x = floatRandomBetween(-1000, 1000);
+  config.offset.y = floatRandomBetween(-1000, 1000);
+  config.nscale = floatRandomBetween(.000005, .002);
+  
+  container.innerHTML = '';
+  
+  vars.drawing = new Drawing(config.drawingType).addTo('#container').size(config.dimensions);
+  
+  const t = document.createElement('div')
+  t.className = 'tracer';
+  container.appendChild(t)
+  
+  vars.bluenoise = new BlueNoise({
+    size: config.dimensions.addNew(new Vec2(config.r*-1, config.r*-1)),
+    offset: new Vec2(config.r*1, config.r*1),
+    r: config.r,
+    k: config.k,
+    rigidity: config.rigidity
+  });
+  vars.noise = new SimplexNoise(config.seed);
+  vars.grid = new Grid({ cellSize: new Vec2(config.testGridSize,config.testGridSize), fill: -1 });
+  
+   /// Create the download button
+  // const dl = document.createElement('button');
+  // dl.innerText = 'download';
+  // dl.addEventListener('click', () => { 
+  //   vars.drawing.download();
+  // });
+  // container.appendChild(dl);
+  
+  document.body.querySelector('#container>:first-child').addEventListener('click', () => {
+    setup();
+  });
+  
+  draw(); drawStep();
+}
+
+let sneki = 0;
+const drawStep = () => {
+  const sneks = [];
+  if(vars.bluenoise.news.length > 0) {
+    requestAnimationFrame(drawStep)
+    for(let i = 0; i < config.sneks; i++) {
+      const [p] = vars.bluenoise.news.splice(Math.floor(Math.random() * vars.bluenoise.news.length), 1.);
+      if(!p) continue;
+      if(p.subtractNew(config.dimensions.scaleNew(.5)).length > 200) continue;
+      const pos = p;
+
+      const dir = new Vec2(1,0);
+      const f = field(pos, 1., sneki+1);
+      dir.angle = f.noise;
+
+      // vars.drawing.stroke = '#ff0000AA';
+      // vars.drawing.circle(pos, 1);
+      
+      const distancebreak = 3;
+      let cont = false;
+      for(let x = -distancebreak*.5; x <= distancebreak*.5; x++) {
+        for(let y = -distancebreak*.5; y <= distancebreak*.5; y++) {
+          const offset = new Vec2(x, y);
+          const t = vars.grid.getChildAtPosition(pos.addNew(offset));
+          if(t !== -1) cont = true;
+        }
+      }
+      if(cont) continue;
+      
+      // vars.drawing.circle(pos, .5);
+
+      const s = new Snek(pos, {
+        direction: dir, 
+        maxLength: 1000, 
+        id: sneki++, 
+        distanceProjection: 5, 
+        distanceBreak: distancebreak,
+        projectionBreakMultiplier: 0
+      });
+      sneks.push(s);
+//        projectionBreakMultiplier: 2
+      // 
+    }
+  }
+  
+  // for(let j = 0; j < config.lineLength; j++) {
+    for(let i = 0; i < sneks.length; i++) {
+      sneks[i].walkOut();
+    }
+  // }
+  
+  // document.querySelector('.tracer').innerHTML = vars.bluenoise.news.length;
+  for(let i = 0; i < sneks.length; i++) {
+    vars.drawing.path(sneks[i].bezier);
+  }
+}
+let interval;
+const draw = () => {
+  
+  vars.drawing.stroke = '#AAA';
+  vars.drawing.c.fillStyle = "#111122";
+  vars.drawing.c.fillRect(0,0, config.dimensions.x, config.dimensions.y);
+  
+  vars.drawing.rect(new Vec2(0,0), config.dimensions);
+  vars.drawing.c.lineWidth = 1.5;
+  
+  while(vars.bluenoise.active.length > 0) {
+    vars.bluenoise.step();
+  }
+}
+
+setTimeout(() => {
+  setup();
+}, 500);
+
+const ngon = (pos, r, nsides) => {
+  const a = Math.atan2(pos.y, pos.x) + Math.PI*.5;
+  const split = (Math.PI*2) / nsides;
+  return pos.length * Math.cos(split * Math.floor(.5 + a / split) - a) - r;
+}
+
+const field = (pos, id = 1, instanceID = 0)=> {
+  const normpos = pos.subtractNew(config.dimensions.scaleNew(.5));
+  const mask1 = ngon(normpos, 200, 40) < Math.random()*10;
+  const mask2 = ngon(normpos.addNew(new Vec2(0, 50)), 250, 3) < 0.;
+  let mask;
+  if(!id) {
+    if(mask2) {
+      id = 2.;
+    } else if(mask1) {
+      id = 1.;
+    }
+  }
+  
+  let n;
+  
+  if(id == 1.) {
+    n = vars.noise.noise2D(pos.addNew(config.offset).scale(config.nscale).array)*Math.PI;
+    // const a = Math.atan2(normpos.y, normpos.x);
+    // n = a - .5;
+  } else if(id == 2.) {
+    // const a = Math.atan2(normpos.y, normpos.x) + Math.PI * .5;
+    // n = a + .8;
+    
+    const a = Math.atan2(normpos.y, normpos.x);
+    n = a + .5;
+    
+    // n = noise.noise2D(pos.addNew(config.offset).scale(config.nscale).array)*Math.PI;
+  }
+  
+  // let apos = pos.subtractNew(dimensions.scaleNew(.5));
+  // let a = Math.atan2(apos.y, apos.x) + Math.PI * .5;
+  
+  // const n = noise.noise2D(pos.addNew(config.offset).scale(config.nscale).array)*Math.PI;
+  
+  // const n = a + .8;
+  
+  // const mask = pos.subtractNew(dimensions.scaleNew(.5)).length < 350;
+  // const mask = ngon(normpos, 150, 3) < 0.;
+  return {noise: n, mask: instanceID % 3 == 0 ? true : mask1, id: id};
+}
+
+class Snek {
+  static #defaults = {
+    grid: vars.grid,
+    head: true,
+    tail: true,
+    direction: new Vec2(1,0),
+    maxLength: 1000,
+    stepSize: 1,
+    fieldID: 1,
+    distanceBreak: 5,
+    distanceProjection: 5,
+    minLength: 10,
+    id: 0,
+    bailout: 10000,
+    projectionBreakMultiplier: .5
+  };
+  #alive = [true, true];            /* Two alive directions per snek */
+  #directions = [0,0];              /* The direction of the head and tail */
+  #positions = [0,0];               /* The position of the head and tail */
+  #maxLength = 1000;                 /* The maximum length of the whole snake */
+  #stepSize = 1;                    
+  #fieldID = 1;
+  #distanceBreak = 5;
+  #distanceProjection = 5;
+  #minLength = 5;
+  #points = [];
+  #id = 0;
+  #bailout = 10000;
+  #projectionBreakMultiplier = .5;
+
+  constructor(pos, settings) {
+    settings = Object.assign({}, Snek.#defaults, settings);
+    this.#alive[0] = settings.head === true;
+    this.#alive[1] = settings.tail === true;
+    this.directionHead = settings.direction.clone();
+    this.directionTail = settings.direction.rotateNew(Math.PI);
+    this.#positions[0] = pos.clone();
+    this.#positions[1] = pos.clone();
+    this.#fieldID = settings.fieldID;
+    this.#distanceBreak = settings.distanceBreak;
+    this.#distanceProjection = settings.distanceProjection;
+    this.#maxLength = settings.maxLength;
+    this.#minLength = settings.minLength;
+    this.#id = settings.id;
+    this.#bailout = settings.bailout;
+    this.#projectionBreakMultiplier = settings.projectionBreakMultiplier;
+  }
+  walkOut() {
+    // console.log(this.length, this.#maxLength)
+    let i = 0;
+    while(this.length < this.#maxLength) {
+      if(i++ > this.#bailout) break;
+      if(this.dead) break;
+      this.walk(this.#stepSize);
+    }
+    this.dead = true;
+  }
+  walk(distance, topTail = 0) {
+    if(this.#alive[topTail]) {
+      
+      const dir = this.#directions[topTail];
+      const pos = this.#positions[topTail].addNew(dir.scaleNew(distance));
+      const f = field(pos, this.#fieldID, this.#id);
+      
+      const t = vars.grid.getChildAtPosition(pos);
+      
+      let draw = true;
+      
+      let i = -this.#distanceBreak;
+      let a = dir.clone();
+      a.angle -= Math.PI * .5;
+      while(i <= this.#distanceBreak) {
+        const p = pos.addNew(a.scaleNew(i));
+        const t = vars.grid.getChildAtPosition(p);
+        if(t === -1 || t === this) {
+        } else {
+          draw = false;
+          break;
+        }
+        i += config.testGridSize;
+      }
+      
+      const dp = this.#distanceProjection;
+      let np = pos.clone();
+      const ndir = dir.clone();
+      for(let i = 0; i < dp; i++) {
+        if(draw === false) break;
+        np.add(ndir.scaleNew(distance));
+        const nf = field(np, this.#fieldID, this.#id);
+        ndir.angle = nf.noise;
+        let j = -this.#distanceBreak*this.#projectionBreakMultiplier;
+        let a = ndir.clone();
+        a.angle -= Math.PI * .5;
+        while(j <= this.#distanceBreak*this.#projectionBreakMultiplier) {
+          const p = np.addNew(a.scaleNew(j));
+          const t = vars.grid.getChildAtPosition(p);
+          if(t === -1 || t === this) {
+          } else {
+            draw = false;
+            break;
+          }
+          j += config.testGridSize;
+        }
+      }
+      
+      if(!f.mask) draw = false;
+      
+      if(draw) {
+        if(topTail === 0) {
+          this.#points.push(pos.clone());
+        } else {
+          this.#points.splice(0, 0, pos.clone());
+        }
+        vars.grid.addChildAtPosition(this, pos);
+        this.#positions[topTail] = pos.clone();
+      } else {
+        this.#alive[topTail] = false;
+      }
+      
+      dir.angle = f.noise;
+      if(topTail === 1) dir.rotate(Math.PI);
+      
+    }
+    if(topTail === 0 && this.#alive[1]) {
+      this.walk(distance, 1)
+    }
+  }
+
+  get length() {
+    return this.#points.length * this.#stepSize;
+  }
+  set dead(v) {
+    if(v === false) {
+      this.#alive[0] = false;
+      this.#alive[1] = false;
+    } else if(v === true) {
+      this.#alive[0] = true;
+    }
+  }
+  get dead() {
+    return !this.#alive[0] && !this.#alive[1];
+  }
+  get points() {
+    let points = this.#points;
+    if(points.length * this.#stepSize < this.#minLength) {
+      points.forEach((p) => {
+        vars.grid.addChildAtPosition(-1, p);
+      });
+      return null;
+    }
+    return points.map(p => p.array);
+  }
+  get bezier() {
+    const points = this.points;
+    if(!points?.length || points.length <= 1) return;
+    const bezierCurves = fitCurve(this.points, 1);
+    let str = "";
+    bezierCurves.map(function(bezier, i) {
+      if (i == 0) {
+          str += "M " + bezier[0][0] + " " + bezier[0][1];
+      }
+      str += "C " + bezier[1][0] + " " + bezier[1][1] + ", " +
+          bezier[2][0] + " " + bezier[2][1] + ", " +
+          bezier[3][0] + " " + bezier[3][1] + " ";
+    });
+
+    return str;
+  }
+  get id() {
+    return this.#fieldID;
+  }
+  set directionHead(v) {
+    if(v instanceof Vec2) this.#directions[0] = v;
+  }
+  get directionHead() {
+    return this.#directions[0];
+  }
+  set directionTail(v) {
+    if(v instanceof Vec2) this.#directions[1] = v;
+  }
+  get directionTail() {
+    return this.#directions[1];
+  }
+}
+
+
+class Drawing {
+  static DT_CANVAS = 1;
+  static DT_SVG = 2;
+  #drawing;
+  #ctx;
+  #mode;
+  #instructions = [];
+  
+  constructor(mode = Drawing.DT_CANVAS) {
+    this.mode = mode;
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.#drawing = document.createElement('canvas');
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.#drawing = SVG();
+    }
+    
+    this.stroke = '#333';
+  }
+  clear() {
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.clearRect(0,0,...this.dimensions.array);
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.clear();
+    }
+  }
+  rect(position, dimensions) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'rect',
+        args: [position, dimensions]
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      this.c.rect(...position.array, ...dimensions.array);
+      this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.rect(dimensions.width, dimensions.height).move(...position.array).fill("none").stroke('#f06');
+    }
+  }
+  circle(position, radius) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'circle',
+        args: [position, radius]
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      this.c.arc(position.x, position.y, radius, 0, 2 * Math.PI);
+      if(this.stroke) this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.circle(radius*2).fill("none").stroke(this.stroke).move(...position.subtractScalarNew(radius).array);
+    }
+  }
+  line(a, b) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'line',
+        args: [a, b]
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      this.c.moveTo(a.x, a.y);
+      this.c.lineTo(b.x, b.y);
+      if(this.stroke) this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.line(...a.array, ...b.array).stroke(this.stroke);
+    }
+  }
+  polyline(points) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'polyline',
+        args: points
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      points.forEach((p, i) => {
+        if(i === 0) this.c.moveTo(p.x, p.y);
+        else this.c.lineTo(p.x, p.y);
+      })
+      if(this.stroke) this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.polyline(points.map(p => p.array)).fill('none').stroke(this.stroke);
+    }
+  }
+  path(path) {
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      const p = new Path2D(path);
+      if(this.stroke) this.c.stroke(p);
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.path(path).fill('none').stroke(this.stroke);
+    }
+  }
+  polygon(points) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'polygon',
+        args: [points]
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      points.forEach((p, i) => {
+        if(i === 0) this.c.moveTo(p.x, p.y);
+        else this.c.lineTo(p.x, p.y);
+      })
+      if(this.stroke) this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.polygon(points.map(p => p.array)).fill('none').stroke(this.stroke);
+    }
+  }
+  
+  download() {
+    let d;
+    if(this.mode & Drawing.DT_CANVAS) {
+      d = new Drawing(Drawing.DT_SVG).size(this.dimensions);
+      this.#instructions.forEach((i) => {
+        d[i.f](...i.args);
+      });
+    } else if(this.mode & Drawing.DT_SVG) {
+      d = this;
+    }
+    
+    const fileName = "untitled.svg"
+    const url = "data:image/svg+xml;utf8," + encodeURIComponent(d.drawing.svg());
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = url;
+    link.click();
+  }
+  
+  addTo(element) {
+    if(typeof(element) === 'string') {
+      if(this.mode & Drawing.DT_CANVAS) {
+        document.body.querySelector(element).appendChild(this.drawing);
+      } else if(this.mode & Drawing.DT_SVG) {
+        this.drawing.addTo('#container');
+      }
+    }
+    return this;
+  }
+  
+  size(d) {
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.drawing.width = d.width;
+      this.drawing.height = d.height;
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.size(...d.array);
+    }
+    this.#dimensions = d;
+    return this;
+  }
+  
+  #dimensions
+  set dimensions(v) {
+    if(v instanceof Vec2) {
+      this.#dimensions = v;
+      this.size(v);
+    }
+  }
+  get dimensions() {
+    return this.#dimensions;
+  }
+  
+  get drawing() {
+    return this.#drawing;
+  }
+  get c() {
+    if(this.mode & Drawing.DT_CANVAS) {
+      if(this.#ctx) return this.#ctx;
+      this.#ctx = this.drawing.getContext('2d');
+      return this.#ctx;
+    }
+  }
+  #stroke;
+  set stroke(v) {
+    this.#stroke = v;
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.strokeStyle = v;
+    }
+  }
+  get stroke() {
+    return this.#stroke;
+  }
+  set mode(v) {
+    if(v & (Drawing.DT_CANVAS | Drawing.DT_SVG)) {
+      this.#mode = v;
+    }
+  }
+  get mode() {
+    return this.#mode || Drawing.DT_CANVAS;
+  }
+  #saving = false
+  set saving(v) {
+    this.#saving = v === true;
+  }
+  get saving() {
+    return this.#saving;
+  }
+}
+
+// vars.drawing = SVG().addTo('#container').size(config.dimensions.x, config.dimensions.y);
+
+
+class Grid {
+  static #defaults = {
+    size: config.dimensions.clone(),
+    cellSize: new Vec2(50,50),
+    fill: null
+  };
+  #grid = [];
+  #size;
+  #cellSize;
+  
+  constructor(settings) {
+    settings = Object.assign({}, Grid.#defaults, settings);
+    this.#size = Vec2.interpolate(settings.size) || Grid.#defaults.size;
+    this.#cellSize = Vec2.interpolate(settings.cellSize) || Grid.#defaults.cellSize;
+    this.#grid.length = this.gridSize.area;
+    this.#grid.fill(settings.fill || Grid.#defaults.fill);
+  }
+
+  addChild(child, i) {
+    this.#grid[i] = child;
+  }
+  addChildAtPosition(child, pos) {
+    this.#grid[this.getArrayPosition(pos)] = child;
+  }
+  addChildAtGridPosition(child, gridPos) {
+    this.#grid[this.getArrayPositionFromGridPos(gridPos)] = child;
+  }
+
+  getChild(i) {
+    return this.#grid[i];
+  }
+  getChildAtPosition(pos) {
+    return this.#grid[this.getArrayPosition(pos)];
+  }
+  getChildAtGridPosition(gridPos) {
+    return this.#grid[this.getArrayPositionFromGridPos(gridPos)];
+  }
+
+  getGridPositionForIndex(i) {
+    const gsize = this.gridSize;
+    return new Vec2(i%gsize.x, Math.floor(i/gsize.x));
+  }
+
+  getArrayPositionFromGridPos(gpos) {
+    const gsize = this.gridSize;
+    if(
+      gpos.x < 0 || gpos.x >= gsize.x ||
+      gpos.y < 0 || gpos.y >= gsize.y )
+      return null;
+    
+    gpos.x = gpos.x % gsize.x;
+    const arraypos = (gpos.x) + (gpos.y*gsize.x);
+    return arraypos;
+  }
+
+  getArrayPosition(realPos) {
+    const gpos = this.getGridPos(realPos);
+    return this.getArrayPositionFromGridPos(gpos);
+  }
+
+  getGridPos(realPos) {
+    if(realPos instanceof Vec2) {
+      return realPos.divideNew(this.#cellSize).floor();
+    }
+    // Throw an error
+  }
+  getSubPos(realPos) {
+    if(realPos instanceof Vec2) {
+      return realPos.modNew(this.#cellSize);
+    }
+    // Throw an error
+  }
+  getRealPos(gridPos) {
+    if(gridPos instanceof Vec2) {
+      return gridPos.multiplyNew(this.#cellSize);
+    }
+    // Throw an error
+  }
+
+  get size() {
+    return this.#size;
+  }
+  get gridSize() {
+    return this.#size.divideNew(this.#cellSize).floor();
+  }
+  get cellSize() {
+    return this.#cellSize;
+  }
+  get length() {
+    return this.#grid.length;
+  }
+}
+
+
+class BlueNoise {
+  static #defaults = {
+    size: config.dimensions.clone(),
+    offset: new Vec2(0,0),
+    r: 100,
+    k: 32,
+    d: 5,
+    initialList: [new Vec2(375,250)],
+    rigidity: 0
+  };
+  #activeList = [];
+  #newPositions = [];
+  #grid;
+  #r;
+  #k;
+  #d;
+  #size;
+  #offset;
+  #rigidity;
+
+  constructor(settings) {
+    settings = Object.assign({}, BlueNoise.#defaults, settings);
+    this.#r = settings.r;
+    this.#k = settings.k;
+    this.#d = settings.d;
+    this.#size = settings.size;
+    this.#offset = settings.offset;
+    this.#rigidity = settings.rigidity;
+    this.#grid = new Grid({
+      size: this.#size,
+      cellSize: this.#r / Math.SQRT2,
+      // cellSize: 1. / Math.SQRT2 / this.#r,
+      fill: -1
+    });
+    this.addElementAtPosition(...settings.initialList);
+  }
+  addElementAtPosition(...positions) {
+    positions.forEach((pos) => {
+      this.#grid.addChildAtPosition(pos, pos);
+      this.#activeList.push(pos);
+      this.#newPositions.push(pos);
+    });
+  }
+  draw(purge = true) {
+    this.news.forEach((newPos, i) => {
+      const r = 3;
+      const pos = newPos.addNew(this.#offset);
+      vars.drawing.circle(pos, r);
+      if(purge) this.news[i] = null;
+    });
+    this.#newPositions = this.news.filter(v => v !== null);
+    // this.news.length = 0;
+  }
+  step() {
+    const loopL = Math.min(this.active.length, this.#d);
+    for(let l = 0; l < loopL; l++) {
+      const ri = Math.floor(0, floatRandomBetween(this.active.length));
+      const c = this.active[ri];
+      let numfound = 0;
+      for(var i = 0; i < this.#k; i++) {
+        const a = floatRandomBetween(0, Math.PI*2);
+        const l = floatRandomBetween(this.#r, this.#r*2);
+        let pos = new Vec2(Math.cos(a)*l, Math.sin(a)*l).add(c);
+        // console.log(this.grid.getChildAtPosition(pos));
+        if(this.grid.getChildAtPosition(pos) === -1) {
+          const gridPos = this.grid.getGridPos(pos);
+          let tooClose = false;
+          for (var i = -1; i <= 1; i++) {
+            for (var j = -1; j <= 1; j++) {
+              if(i == 0 && j == 0) continue;
+              const p = this.grid.getChildAtGridPosition(gridPos.addNew(new Vec2(i, j)));
+              if(p !== -1 && p instanceof Vec2) {
+                const d = pos.distance(p);
+                if(d < this.#r*.5) tooClose = true;
+              }
+            }
+          }
+          if(!tooClose) {
+            const gridPosition = this.grid.getRealPos(this.grid.getGridPos(pos)).addNew(this.grid.cellSize.scaleNew(.5));
+            pos = Vec2.lerp(pos, gridPosition, this.#rigidity);
+            this.grid.addChildAtPosition(pos, pos);
+            this.active.push(pos);
+            this.news.push(pos);
+            numfound++;
+            break;
+          }
+        }
+      }
+      if(numfound === 0) {
+        this.active.splice(ri, 1);
+      }
+    }
+  }
+
+  get active() {
+    return this.#activeList;
+  }
+  get news() {
+    return this.#newPositions;
+  }
+  get grid() {
+    return this.#grid;
+  }
+  get offset() {
+    return this.#offset;
+  }
+}
+
+
+
+const floatRandomBetween = (min, max) => {
+  return Math.random() * (max - min) + min;
+};
+const clamp = function(a, b, v) {
+  return Math.min(b, Math.max(a, v));
+}
+const lerp = function(a, b, progress) {
+  return a + progress * (b - a);
+}
+const hash21 = (p) => {
+  const o = p.dot(new Vec2(27.609, 57.583));
+  return fract(Math.sin(o)*config.seed);
+}
+const precisionRound = (n, p) => {
+  const ip = Math.pow(10, p);
+  return Math.round(n*ip)/ip;
+}
+const fract = (n, p = 6) => {
+  const ip = Math.pow(10, p);
+  const _n = Math.abs(Math.floor(n*ip)/ip);
+  if(_n < 1) return _n;
+  return Math.floor(_n % Math.floor(_n)*ip)/ip;
+}
+const pal = ( t, a, b, c, d ) => {
+  const mp = c.scaleNew(t).add(d).scale(6.28318);
+  mp.x = Math.cos(mp.x);
+  mp.y = Math.cos(mp.y);
+  mp.z = Math.cos(mp.z);
+  return a.addNew(b.multiplyNew(mp));
+}
+const getColour = (d) => {
+  const col = pal( 
+    d/70+.65, 
+    new Vec3(0.5,0.5,0.5),
+    new Vec3(0.5,0.5,0.5),
+    new Vec3(1.0,1.0,1.0),
+    new Vec3(0.0,0.1,0.2) );
+
+  const colour = Math.floor(col.x * 255).toString(16) + Math.floor(col.y * 255).toString(16) + Math.floor(col.z * 255).toString(16);
+  const a = Math.floor((1.-d/30)*255).toString(16);
+  return colour+a;
+}
+
+
+
+////////////////////////////////////////////////////////////////
+// Simplex Noise utility code. Created by Reinder Nijhoff 2020
+// https://turtletoy.net/turtle/6e4e06d42e
+// Based on: http://webstaff.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
+////////////////////////////////////////////////////////////////
+function SimplexNoise(seed = 1) {
+	const grad = [  [1, 1, 0], [-1, 1, 0], [1, -1, 0], [-1, -1, 0],
+	            	[1, 0, 1], [-1, 0, 1], [1, 0, -1], [-1, 0, -1],
+            		[0, 1, 1], [0, -1, 1], [0, 1, -1], [0, -1, -1] ];
+	const perm = new Uint8Array(512);
+            		
+	const F2 = (Math.sqrt(3) - 1) / 2, F3 = 1/3;
+	const G2 = (3 - Math.sqrt(3)) / 6, G3 = 1/6;
+
+	const dot2 = (a, b) => a[0] * b[0] + a[1] * b[1];
+	const sub2 = (a, b) => [a[0] - b[0], a[1] - b[1]];
+	const dot3 = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+	const sub3 = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+
+	class SimplexNoise {
+		constructor(seed = 1) {
+			for (let i = 0; i < 512; i++) {
+				perm[i] = i & 255;
+			}
+			for (let i = 0; i < 255; i++) {
+				const r = (seed = this.hash(i+seed)) % (256 - i)  + i;
+				const swp = perm[i];
+				perm[i + 256] = perm[i] = perm[r];
+				perm[r + 256] = perm[r] = swp;
+			}
+		}
+		noise2D(p) {
+			const s = dot2(p, [F2, F2]);
+			const c = [Math.floor(p[0] + s), Math.floor(p[1] + s)];
+			const i = c[0] & 255, j = c[1] & 255;
+			const t = dot2(c, [G2, G2]);
+
+			const p0 = sub2(p, sub2(c, [t, t]));
+			const o  = p0[0] > p0[1] ? [1, 0] : [0, 1];
+			const p1 = sub2(sub2(p0, o), [-G2, -G2]);
+			const p2 = sub2(p0, [1-2*G2, 1-2*G2]);
+			
+			let n =  Math.max(0, 0.5-dot2(p0, p0))**4 * dot2(grad[perm[i+perm[j]] % 12], p0);
+			    n += Math.max(0, 0.5-dot2(p1, p1))**4 * dot2(grad[perm[i+o[0]+perm[j+o[1]]] % 12], p1);
+		    	n += Math.max(0, 0.5-dot2(p2, p2))**4 * dot2(grad[perm[i+1+perm[j+1]] % 12], p2);
+			
+			return 70 * n;
+		}
+		hash(i) {
+            i = 1103515245 * ((i >> 1) ^ i);
+            const h32 = 1103515245 * (i ^ (i>>3));
+            return h32 ^ (h32 >> 16);
+		}
+	}
+	return new SimplexNoise(seed);
+}
+
+
+
+
+
+
+
+// https://github.com/mapbox/delaunator
+//
+// ISC License
+//
+// Copyright (c) 2017, Mapbox
+//
+// Permission to use, copy, modify, and/or distribute this software for any purpose
+// with or without fee is hereby granted, provided that the above copyright notice
+// and this permission notice appear in all copies.
+//
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+// FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+// OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+// TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+// THIS SOFTWARE.
+//
+
+const EPSILON = Math.pow(2, -52);
+const EDGE_STACK = new Uint32Array(512);
+
+class Delaunator {
+    static from(points) {
+        const n = points.length;
+        const coords = new Float64Array(n * 2);
+
+        for (let i = 0; i < n; i++) {
+            const p = points[i];
+            coords[2 * i] = p[0];
+            coords[2 * i + 1] = p[1];
+        }
+
+        return new Delaunator(coords);
+    }
+
+    constructor(coords) {
+        const n = coords.length >> 1;
+        if (n > 0 && typeof coords[0] !== 'number') throw new Error('Expected coords to contain numbers.');
+
+        this.coords = coords;
+
+        // arrays that will store the triangulation graph
+        const maxTriangles = 2 * n - 5;
+        const triangles = this.triangles = new Uint32Array(maxTriangles * 3);
+        const halfedges = this.halfedges = new Int32Array(maxTriangles * 3);
+
+        // temporary arrays for tracking the edges of the advancing convex hull
+        this._hashSize = Math.ceil(Math.sqrt(n));
+        const hullPrev = this.hullPrev = new Uint32Array(n); // edge to prev edge
+        const hullNext = this.hullNext = new Uint32Array(n); // edge to next edge
+        const hullTri = this.hullTri = new Uint32Array(n); // edge to adjacent triangle
+        const hullHash = new Int32Array(this._hashSize).fill(-1); // angular edge hash
+
+        // populate an array of point indices; calculate input data bbox
+        const ids = new Uint32Array(n);
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+
+        for (let i = 0; i < n; i++) {
+            const x = coords[2 * i];
+            const y = coords[2 * i + 1];
+            if (x < minX) minX = x;
+            if (y < minY) minY = y;
+            if (x > maxX) maxX = x;
+            if (y > maxY) maxY = y;
+            ids[i] = i;
+        }
+        const cx = (minX + maxX) / 2;
+        const cy = (minY + maxY) / 2;
+
+        let minDist = Infinity;
+        let i0, i1, i2;
+
+        // pick a seed point close to the center
+        for (let i = 0; i < n; i++) {
+            const d = dist(cx, cy, coords[2 * i], coords[2 * i + 1]);
+            if (d < minDist) {
+                i0 = i;
+                minDist = d;
+            }
+        }
+        const i0x = coords[2 * i0];
+        const i0y = coords[2 * i0 + 1];
+
+        minDist = Infinity;
+
+        // find the point closest to the seed
+        for (let i = 0; i < n; i++) {
+            if (i === i0) continue;
+            const d = dist(i0x, i0y, coords[2 * i], coords[2 * i + 1]);
+            if (d < minDist && d > 0) {
+                i1 = i;
+                minDist = d;
+            }
+        }
+        let i1x = coords[2 * i1];
+        let i1y = coords[2 * i1 + 1];
+
+        let minRadius = Infinity;
+
+        // find the third point which forms the smallest circumcircle with the first two
+        for (let i = 0; i < n; i++) {
+            if (i === i0 || i === i1) continue;
+            const r = circumradius(i0x, i0y, i1x, i1y, coords[2 * i], coords[2 * i + 1]);
+            if (r < minRadius) {
+                i2 = i;
+                minRadius = r;
+            }
+        }
+        let i2x = coords[2 * i2];
+        let i2y = coords[2 * i2 + 1];
+
+        if (minRadius === Infinity) {
+            throw new Error('No Delaunay triangulation exists for this input.');
+        }
+
+        // swap the order of the seed points for counter-clockwise orientation
+        if (orient(i0x, i0y, i1x, i1y, i2x, i2y)) {
+            const i = i1;
+            const x = i1x;
+            const y = i1y;
+            i1 = i2;
+            i1x = i2x;
+            i1y = i2y;
+            i2 = i;
+            i2x = x;
+            i2y = y;
+        }
+
+        const center = circumcenter(i0x, i0y, i1x, i1y, i2x, i2y);
+        this._cx = center.x;
+        this._cy = center.y;
+
+        const dists = new Float64Array(n);
+        for (let i = 0; i < n; i++) {
+            dists[i] = dist(coords[2 * i], coords[2 * i + 1], center.x, center.y);
+        }
+
+        // sort the points by distance from the seed triangle circumcenter
+        quicksort(ids, dists, 0, n - 1);
+
+        // set up the seed triangle as the starting hull
+        this.hullStart = i0;
+        let hullSize = 3;
+
+        hullNext[i0] = hullPrev[i2] = i1;
+        hullNext[i1] = hullPrev[i0] = i2;
+        hullNext[i2] = hullPrev[i1] = i0;
+
+        hullTri[i0] = 0;
+        hullTri[i1] = 1;
+        hullTri[i2] = 2;
+
+        hullHash[this._hashKey(i0x, i0y)] = i0;
+        hullHash[this._hashKey(i1x, i1y)] = i1;
+        hullHash[this._hashKey(i2x, i2y)] = i2;
+
+        this.trianglesLen = 0;
+        this._addTriangle(i0, i1, i2, -1, -1, -1);
+
+        for (let k = 0, xp, yp; k < ids.length; k++) {
+            const i = ids[k];
+            const x = coords[2 * i];
+            const y = coords[2 * i + 1];
+
+            // skip near-duplicate points
+            if (k > 0 && Math.abs(x - xp) <= EPSILON && Math.abs(y - yp) <= EPSILON) continue;
+            xp = x;
+            yp = y;
+
+            // skip seed triangle points
+            if (i === i0 || i === i1 || i === i2) continue;
+
+            // find a visible edge on the convex hull using edge hash
+            let start = 0;
+            for (let j = 0, key = this._hashKey(x, y); j < this._hashSize; j++) {
+                start = hullHash[(key + j) % this._hashSize];
+                if (start !== -1 && start !== hullNext[start]) break;
+            }
+
+            start = hullPrev[start];
+            let e = start, q;
+            while (q = hullNext[e], !orient(x, y, coords[2 * e], coords[2 * e + 1], coords[2 * q], coords[2 * q + 1])) {
+                e = q;
+                if (e === start) {
+                    e = -1;
+                    break;
+                }
+            }
+            if (e === -1) continue; // likely a near-duplicate point; skip it
+
+            // add the first triangle from the point
+            let t = this._addTriangle(e, i, hullNext[e], -1, -1, hullTri[e]);
+
+            // recursively flip triangles from the point until they satisfy the Delaunay condition
+            hullTri[i] = this._legalize(t + 2);
+            hullTri[e] = t; // keep track of boundary triangles on the hull
+            hullSize++;
+
+            // walk forward through the hull, adding more triangles and flipping recursively
+            let n = hullNext[e];
+            while (q = hullNext[n], orient(x, y, coords[2 * n], coords[2 * n + 1], coords[2 * q], coords[2 * q + 1])) {
+                t = this._addTriangle(n, i, q, hullTri[i], -1, hullTri[n]);
+                hullTri[i] = this._legalize(t + 2);
+                hullNext[n] = n; // mark as removed
+                hullSize--;
+                n = q;
+            }
+
+            // walk backward from the other side, adding more triangles and flipping
+            if (e === start) {
+                while (q = hullPrev[e], orient(x, y, coords[2 * q], coords[2 * q + 1], coords[2 * e], coords[2 * e + 1])) {
+                    t = this._addTriangle(q, i, e, -1, hullTri[e], hullTri[q]);
+                    this._legalize(t + 2);
+                    hullTri[q] = t;
+                    hullNext[e] = e; // mark as removed
+                    hullSize--;
+                    e = q;
+                }
+            }
+
+            // update the hull indices
+            this.hullStart = hullPrev[i] = e;
+            hullNext[e] = hullPrev[n] = i;
+            hullNext[i] = n;
+
+            // save the two new edges in the hash table
+            hullHash[this._hashKey(x, y)] = i;
+            hullHash[this._hashKey(coords[2 * e], coords[2 * e + 1])] = e;
+        }
+
+        this.hull = new Uint32Array(hullSize);
+        for (let i = 0, e = this.hullStart; i < hullSize; i++) {
+            this.hull[i] = e;
+            e = hullNext[e];
+        }
+        this.hullPrev = this.hullNext = this.hullTri = null; // get rid of temporary arrays
+
+        // trim typed triangle mesh arrays
+        this.triangles = triangles.subarray(0, this.trianglesLen);
+        this.halfedges = halfedges.subarray(0, this.trianglesLen);
+    }
+
+    _hashKey(x, y) {
+        return Math.floor(pseudoAngle(x - this._cx, y - this._cy) * this._hashSize) % this._hashSize;
+    }
+
+    _legalize(a) {
+        const {triangles, coords, halfedges} = this;
+
+        let i = 0;
+        let ar = 0;
+
+        // recursion eliminated with a fixed-size stack
+        while (true) {
+            const b = halfedges[a];
+
+            /* if the pair of triangles doesn't satisfy the Delaunay condition
+             * (p1 is inside the circumcircle of [p0, pl, pr]), flip them,
+             * then do the same check/flip recursively for the new pair of triangles
+             *
+             *           pl                    pl
+             *          /||\                  /  \
+             *       al/ || \bl            al/    \a
+             *        /  ||  \              /      \
+             *       /  a||b  \    flip    /___ar___\
+             *     p0\   ||   /p1   =>   p0\---bl---/p1
+             *        \  ||  /              \      /
+             *       ar\ || /br             b\    /br
+             *          \||/                  \  /
+             *           pr                    pr
+             */
+            const a0 = a - a % 3;
+            ar = a0 + (a + 2) % 3;
+
+            if (b === -1) { // convex hull edge
+                if (i === 0) break;
+                a = EDGE_STACK[--i];
+                continue;
+            }
+
+            const b0 = b - b % 3;
+            const al = a0 + (a + 1) % 3;
+            const bl = b0 + (b + 2) % 3;
+
+            const p0 = triangles[ar];
+            const pr = triangles[a];
+            const pl = triangles[al];
+            const p1 = triangles[bl];
+
+            const illegal = inCircle(
+                coords[2 * p0], coords[2 * p0 + 1],
+                coords[2 * pr], coords[2 * pr + 1],
+                coords[2 * pl], coords[2 * pl + 1],
+                coords[2 * p1], coords[2 * p1 + 1]);
+
+            if (illegal) {
+                triangles[a] = p1;
+                triangles[b] = p0;
+
+                const hbl = halfedges[bl];
+
+                // edge swapped on the other side of the hull (rare); fix the halfedge reference
+                if (hbl === -1) {
+                    let e = this.hullStart;
+                    do {
+                        if (this.hullTri[e] === bl) {
+                            this.hullTri[e] = a;
+                            break;
+                        }
+                        e = this.hullNext[e];
+                    } while (e !== this.hullStart);
+                }
+                this._link(a, hbl);
+                this._link(b, halfedges[ar]);
+                this._link(ar, bl);
+
+                const br = b0 + (b + 1) % 3;
+
+                // don't worry about hitting the cap: it can only happen on extremely degenerate input
+                if (i < EDGE_STACK.length) {
+                    EDGE_STACK[i++] = br;
+                }
+            } else {
+                if (i === 0) break;
+                a = EDGE_STACK[--i];
+            }
+        }
+
+        return ar;
+    }
+
+    _link(a, b) {
+        this.halfedges[a] = b;
+        if (b !== -1) this.halfedges[b] = a;
+    }
+
+    // add a new triangle given vertex indices and adjacent half-edge ids
+    _addTriangle(i0, i1, i2, a, b, c) {
+        const t = this.trianglesLen;
+
+        this.triangles[t] = i0;
+        this.triangles[t + 1] = i1;
+        this.triangles[t + 2] = i2;
+
+        this._link(t, a);
+        this._link(t + 1, b);
+        this._link(t + 2, c);
+
+        this.trianglesLen += 3;
+
+        return t;
+    }
+}
+
+// monotonically increases with real angle, but doesn't need expensive trigonometry
+function pseudoAngle(dx, dy) {
+    const p = dx / (Math.abs(dx) + Math.abs(dy));
+    return (dy > 0 ? 3 - p : 1 + p) / 4; // [0..1]
+}
+
+function dist(ax, ay, bx, by) {
+    const dx = ax - bx;
+    const dy = ay - by;
+    return dx * dx + dy * dy;
+}
+
+function orient(px, py, qx, qy, rx, ry) {
+    return (qy - py) * (rx - qx) - (qx - px) * (ry - qy) < 0;
+}
+
+function inCircle(ax, ay, bx, by, cx, cy, px, py) {
+    const dx = ax - px;
+    const dy = ay - py;
+    const ex = bx - px;
+    const ey = by - py;
+    const fx = cx - px;
+    const fy = cy - py;
+
+    const ap = dx * dx + dy * dy;
+    const bp = ex * ex + ey * ey;
+    const cp = fx * fx + fy * fy;
+
+    return dx * (ey * cp - bp * fy) -
+           dy * (ex * cp - bp * fx) +
+           ap * (ex * fy - ey * fx) < 0;
+}
+
+function circumradius(ax, ay, bx, by, cx, cy) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const ex = cx - ax;
+    const ey = cy - ay;
+
+    const bl = dx * dx + dy * dy;
+    const cl = ex * ex + ey * ey;
+    const d = 0.5 / (dx * ey - dy * ex);
+
+    const x = (ey * bl - dy * cl) * d;
+    const y = (dx * cl - ex * bl) * d;
+
+    return x * x + y * y;
+}
+
+function circumcenter(ax, ay, bx, by, cx, cy) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const ex = cx - ax;
+    const ey = cy - ay;
+
+    const bl = dx * dx + dy * dy;
+    const cl = ex * ex + ey * ey;
+    const d = 0.5 / (dx * ey - dy * ex);
+
+    const x = ax + (ey * bl - dy * cl) * d;
+    const y = ay + (dx * cl - ex * bl) * d;
+
+    return {x, y};
+}
+
+function quicksort(ids, dists, left, right) {
+    if (right - left <= 20) {
+        for (let i = left + 1; i <= right; i++) {
+            const temp = ids[i];
+            const tempDist = dists[temp];
+            let j = i - 1;
+            while (j >= left && dists[ids[j]] > tempDist) ids[j + 1] = ids[j--];
+            ids[j + 1] = temp;
+        }
+    } else {
+        const median = (left + right) >> 1;
+        let i = left + 1;
+        let j = right;
+        swap(ids, median, i);
+        if (dists[ids[left]] > dists[ids[right]]) swap(ids, left, right);
+        if (dists[ids[i]] > dists[ids[right]]) swap(ids, i, right);
+        if (dists[ids[left]] > dists[ids[i]]) swap(ids, left, i);
+
+        const temp = ids[i];
+        const tempDist = dists[temp];
+        while (true) {
+            do i++; while (dists[ids[i]] < tempDist);
+            do j--; while (dists[ids[j]] > tempDist);
+            if (j < i) break;
+            swap(ids, i, j);
+        }
+        ids[left + 1] = ids[j];
+        ids[j] = temp;
+
+        if (right - i + 1 >= j - left) {
+            quicksort(ids, dists, i, right);
+            quicksort(ids, dists, left, j - 1);
+        } else {
+            quicksort(ids, dists, left, j - 1);
+            quicksort(ids, dists, i, right);
+        }
+    }
+}
+
+function swap(arr, i, j) {
+    const tmp = arr[i];
+    arr[i] = arr[j];
+    arr[j] = tmp;
+}
\ No newline at end of file
diff --git a/confluent-flow/src/style.scss b/confluent-flow/src/style.scss
new file mode 100644
index 0000000..9476006
--- /dev/null
+++ b/confluent-flow/src/style.scss
@@ -0,0 +1,27 @@
+document, body {
+  background: #111122;
+  margin: 0;
+  min-height: 100vh;
+}
+body {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+#container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+#container>:first-child {
+  cursor: pointer;
+}
+
+button {
+  max-width: 200px;
+  margin-top: 10px;
+}
+.tracer {
+  color: #fff;
+}
\ No newline at end of file
diff --git a/conic-gradient-in-svg/LICENSE.txt b/conic-gradient-in-svg/LICENSE.txt
new file mode 100644
index 0000000..67b5683
--- /dev/null
+++ b/conic-gradient-in-svg/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 by Eastonium (https://codepen.io/eastonium/pen/abOpdEm)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/conic-gradient-in-svg/README.md b/conic-gradient-in-svg/README.md
new file mode 100644
index 0000000..6703406
--- /dev/null
+++ b/conic-gradient-in-svg/README.md
@@ -0,0 +1,4 @@
+# Conic Gradient in SVG
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/eastonium/pen/abOpdEm](https://codepen.io/eastonium/pen/abOpdEm).
+
diff --git a/conic-gradient-in-svg/dist/index.html b/conic-gradient-in-svg/dist/index.html
new file mode 100644
index 0000000..0c59626
--- /dev/null
+++ b/conic-gradient-in-svg/dist/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Conic Gradient in SVG</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg>
+  <clipPath id="clip">
+    <path d="M 65,29 C 59,19 49,12 37,12 20,12 7,25 7,42 7,75 25,80 65,118 105,80 123,75 123,42 123,25 110,12 93,12 81,12 71,19 65,29 z" />
+  </clipPath>
+  <foreignObject width="128" height="128" clip-path="url(#clip)">
+    <div />
+  </foreignObjct>
+</svg>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/conic-gradient-in-svg/dist/style.css b/conic-gradient-in-svg/dist/style.css
new file mode 100644
index 0000000..6b9a28a
--- /dev/null
+++ b/conic-gradient-in-svg/dist/style.css
@@ -0,0 +1,5 @@
+div {
+  width: 100%;
+  height: 100%;
+  background: conic-gradient(darkorange, hotpink, mediumaquamarine);
+}
\ No newline at end of file
diff --git a/conic-gradient-in-svg/src/index.html b/conic-gradient-in-svg/src/index.html
new file mode 100644
index 0000000..64a6bec
--- /dev/null
+++ b/conic-gradient-in-svg/src/index.html
@@ -0,0 +1,8 @@
+<svg>
+  <clipPath id="clip">
+    <path d="M 65,29 C 59,19 49,12 37,12 20,12 7,25 7,42 7,75 25,80 65,118 105,80 123,75 123,42 123,25 110,12 93,12 81,12 71,19 65,29 z" />
+  </clipPath>
+  <foreignObject width="128" height="128" clip-path="url(#clip)">
+    <div />
+  </foreignObjct>
+</svg>
\ No newline at end of file
diff --git a/conic-gradient-in-svg/src/style.css b/conic-gradient-in-svg/src/style.css
new file mode 100644
index 0000000..6b9a28a
--- /dev/null
+++ b/conic-gradient-in-svg/src/style.css
@@ -0,0 +1,5 @@
+div {
+  width: 100%;
+  height: 100%;
+  background: conic-gradient(darkorange, hotpink, mediumaquamarine);
+}
\ No newline at end of file
diff --git a/conic-gradients-css-masks-no-ff/README.markdown b/conic-gradients-css-masks-no-ff/README.markdown
new file mode 100644
index 0000000..c6ea6cd
--- /dev/null
+++ b/conic-gradients-css-masks-no-ff/README.markdown
@@ -0,0 +1,4 @@
+# Conic gradients + CSS masks (no FF)
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/yoksel/pen/xxGJOPj](https://codepen.io/yoksel/pen/xxGJOPj).
+
+ Demo doesn't work in FF because FF hasn't conic gradients support
\ No newline at end of file
diff --git a/conic-gradients-css-masks-no-ff/dist/index.html b/conic-gradients-css-masks-no-ff/dist/index.html
new file mode 100644
index 0000000..127f28e
--- /dev/null
+++ b/conic-gradients-css-masks-no-ff/dist/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Conic gradients + CSS masks (no FF)</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="back side"></div>
+  <div class="left side"></div>
+  <div class="right side"></div>
+  <div class="top side"></div>
+  <div class="bottom side"></div>
+  <div class="front side"></div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/conic-gradients-css-masks-no-ff/dist/style.css b/conic-gradients-css-masks-no-ff/dist/style.css
new file mode 100644
index 0000000..9f4295b
--- /dev/null
+++ b/conic-gradients-css-masks-no-ff/dist/style.css
@@ -0,0 +1,97 @@
+:root {
+  --step: calc(100% / 7.5);
+  --side: 30vmin;
+  --offset: 15vmin;
+  --offset-neg: -15vmin;
+  font-size: 16px;
+}
+
+body {
+  min-height: 100vh;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-perspective: 300px;
+          perspective: 300px;
+  -webkit-perspective-origin: center center;
+          perspective-origin: center center;
+  overflow: hidden;
+  background: #000;
+}
+
+.side,
+.container {
+  width: var(--side);
+  height: var(--side);
+}
+
+.container {
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-animation: rotate 10s infinite linear;
+          animation: rotate 10s infinite linear;
+}
+.container:hover {
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+
+.side {
+  position: absolute;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  background: conic-gradient(teal, purple, crimson, tomato, gold, yellowgreen, mediumaquamarine, teal);
+  -webkit-mask-image: repeating-radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--step) * 1), black 0, black calc(var(--step) * 1.5), rgba(0, 0, 0, 0) 0);
+          mask-image: repeating-radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--step) * 1), black 0, black calc(var(--step) * 1.5), rgba(0, 0, 0, 0) 0);
+  -webkit-mask-size: 50% 50%;
+          mask-size: 50% 50%;
+  -webkit-mask-position: center center;
+          mask-position: center center;
+}
+
+.back {
+  -webkit-transform: translateZ(var(--offset-neg)) rotateY(180deg);
+          transform: translateZ(var(--offset-neg)) rotateY(180deg);
+}
+
+.left {
+  -webkit-transform: translateX(var(--offset-neg)) rotateY(90deg);
+          transform: translateX(var(--offset-neg)) rotateY(90deg);
+}
+
+.right {
+  -webkit-transform: translateX(var(--offset)) rotateY(-90deg) rotateZ(90deg);
+          transform: translateX(var(--offset)) rotateY(-90deg) rotateZ(90deg);
+}
+
+.top {
+  -webkit-transform: translateY(var(--offset-neg)) rotateX(90deg) rotateZ(-90deg);
+          transform: translateY(var(--offset-neg)) rotateX(90deg) rotateZ(-90deg);
+}
+
+.bottom {
+  -webkit-transform: translateY(var(--offset)) rotateX(90deg) rotateZ(90deg);
+          transform: translateY(var(--offset)) rotateX(90deg) rotateZ(90deg);
+}
+
+.front {
+  -webkit-transform: translateZ(var(--offset)) rotateZ(90deg);
+          transform: translateZ(var(--offset)) rotateZ(90deg);
+}
+
+@-webkit-keyframes rotate {
+  100% {
+    -webkit-transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg);
+            transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg);
+  }
+}
+
+@keyframes rotate {
+  100% {
+    -webkit-transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg);
+            transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg);
+  }
+}
\ No newline at end of file
diff --git a/conic-gradients-css-masks-no-ff/license.txt b/conic-gradients-css-masks-no-ff/license.txt
new file mode 100644
index 0000000..1cfe27a
--- /dev/null
+++ b/conic-gradients-css-masks-no-ff/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by yoksel (https://codepen.io/yoksel/pen/xxGJOPj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/conic-gradients-css-masks-no-ff/src/index.html b/conic-gradients-css-masks-no-ff/src/index.html
new file mode 100644
index 0000000..5a89dc8
--- /dev/null
+++ b/conic-gradients-css-masks-no-ff/src/index.html
@@ -0,0 +1,8 @@
+<div class="container">
+  <div class="back side"></div>
+  <div class="left side"></div>
+  <div class="right side"></div>
+  <div class="top side"></div>
+  <div class="bottom side"></div>
+  <div class="front side"></div>
+</div>
\ No newline at end of file
diff --git a/conic-gradients-css-masks-no-ff/src/style.scss b/conic-gradients-css-masks-no-ff/src/style.scss
new file mode 100644
index 0000000..2275d61
--- /dev/null
+++ b/conic-gradients-css-masks-no-ff/src/style.scss
@@ -0,0 +1,88 @@
+:root {
+  --step: calc(100% / 7.5);
+  --side: 30vmin;
+  --offset: 15vmin;
+  --offset-neg: -15vmin;
+  font-size: 16px;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  perspective: 300px;
+  perspective-origin: center center;
+  overflow: hidden;
+  background: #000;
+}
+
+.side,
+.container {
+  width: var(--side);
+  height: var(--side);
+}
+
+.container {
+  transform-style: preserve-3d;
+  animation: rotate 10s infinite linear;
+
+  &:hover {
+    animation-play-state: paused;
+  }
+}
+
+.side {
+  position: absolute;
+  transform-style: preserve-3d;
+  background: conic-gradient(
+    teal,
+    purple,
+    crimson,
+    tomato,
+    gold,
+    yellowgreen,
+    mediumaquamarine,
+    teal
+  );
+
+  mask-image: repeating-radial-gradient(
+    rgba(0, 0, 0, 0) 0,
+    rgba(0, 0, 0, 0) calc(var(--step) * 1),
+    black 0,
+    black calc(var(--step) * 1.5),
+    rgba(0, 0, 0, 0) 0
+  );
+  mask-size: 50% 50%;
+  mask-position: center center;
+}
+
+.back {
+  transform: translateZ(var(--offset-neg)) rotateY(180deg);
+}
+
+.left {
+  transform: translateX(var(--offset-neg)) rotateY(90deg);
+}
+
+.right {
+  transform: translateX(var(--offset)) rotateY(-90deg) rotateZ(90deg);
+}
+
+.top {
+  transform: translateY(var(--offset-neg)) rotateX(90deg) rotateZ(-90deg);
+}
+
+.bottom {
+  transform: translateY(var(--offset)) rotateX(90deg) rotateZ(90deg);
+}
+
+.front {
+  transform: translateZ(var(--offset)) rotateZ(90deg);
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg);
+  }
+}
diff --git a/container-query-bookstore/README.markdown b/container-query-bookstore/README.markdown
new file mode 100644
index 0000000..85c1479
--- /dev/null
+++ b/container-query-bookstore/README.markdown
@@ -0,0 +1,5 @@
+# Container Query Bookstore
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/mxbck/pen/XWMrMOp](https://codepen.io/mxbck/pen/XWMrMOp).
+
+A Container Query Drag-and-Drop Interface. Demo works only in Chrome Canary with Container Queries enabled in chrome://flags
diff --git a/container-query-bookstore/dist/index.html b/container-query-bookstore/dist/index.html
new file mode 100644
index 0000000..ceb071d
--- /dev/null
+++ b/container-query-bookstore/dist/index.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Container Query Bookstore</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Merriweather&amp;display=swap'>
+<link rel='stylesheet' href='https://unpkg.com/dragula@3.7.2/dist/dragula.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- BOOK TEMPLATE -->
+<template id="book-template">
+  <style>
+    /* Layout Container */
+    :host {
+      display: block;
+      contain: layout inline-size;
+      perspective:1000px;
+      cursor: grab;
+    }
+    
+    /* Base Styles */
+    ::slotted(img) {
+      display:block;
+      width:100%;
+      height: auto;
+      border-radius: 0px 2px 2px 0px;
+      background-color: var(--cover-color);
+    }
+    .book {
+      font-size: var(--font-size, 1rem);
+      font-weight: 400;
+    }
+    .meta {
+      padding-top: 1em;
+      line-height: 1.3;
+    }
+    .title {
+      font-size: 1.25em;
+      font-family: "Merriweather", serif;
+      margin:0 0 .5rem 0;
+    }
+    .author {
+      font-size: .875em;
+      font-family: sans-serif;
+      margin:0;
+    }
+    
+    /* Small Variant */
+    @container (max-width: 200px) {
+      .book {
+        --font-size: .5rem;
+      }
+      .author {
+        display: none;
+      }
+    }
+    
+    /* Medium Variant */
+    @container (min-width: 201px) and (max-width: 399px) {
+      .book {
+        --font-size: 1rem;
+        display: grid;
+        align-items: start;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+      }
+    }
+    
+    /* Large Variant */
+    @container (min-width: 400px) {
+      ::slotted(img) {
+        transform: translateZ(40px);
+        box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
+      }
+      .book {
+        --font-size: 1.5rem;
+        padding:1rem;
+      }
+      .front {
+        position: relative;
+        transform-style: preserve-3d;
+        transform: rotateY(-25deg);
+        transition: transform .5s ease;
+      }
+      .front::before {
+        position: absolute;
+        content: ' ';
+        left: 100%;
+        top: 1%;
+        width: 80px;
+        height: 98%;
+        transform: translate(-55%,0) rotateY(
+    90deg
+    );
+        background: linear-gradient(
+    90deg
+    , #fff 0%, #f9f9f9 5%, #fff 10%, #f9f9f9 15%, #fff 20%, #f9f9f9 25%, #fff 30%, #f9f9f9 35%, #fff 40%, #f9f9f9 45%, #fff 50%, #f9f9f9 55%, #fff 60%, #f9f9f9 65%, #fff 70%, #f9f9f9 75%, #fff 80%, #f9f9f9 85%, #fff 90%, #f9f9f9 95%, #fff 100% );
+      }
+      .front::after {
+        position: absolute;
+        top: 0;
+        left: 1%;
+        content: ' ';
+        width: 100%;
+        height: 100%;
+        transform: translateZ(-40px);
+        background-color: var(--cover-color, #000);
+        border-radius: 0 2px 2px 0;
+        box-shadow: -10px 0 50px 10px rgba(0,0,0,0.3);
+      }
+    }
+  </style>
+  <article class="book">
+    <div class="front">
+      <slot name="cover"></slot>
+    </div>
+    <div class="meta">
+      <h2 class="title"><slot name="title"></slot></h2>
+      <p class="author"><slot name="author"></slot></p>
+    </div>
+  </article>
+</template>
+<!-- END BOOK TEMPLATE -->
+
+
+
+<div class="layout">
+  <!-- HEADER -->
+  <header class="header">
+    <h1 class="logo">CQ Bookstore</h1>
+    <p class="by">by <a href="https://mxb.dev">MXB</a></p>
+  </header>
+
+  <!-- FEATURED STAGE -->
+  <div class="stage js-drag-container">
+    <h2 class="capitals">Featured</h2>
+    
+      <book-element color="#52947c">
+        <img slot="cover" src="https://assets.codepen.io/1256430/oz.avif" alt="" />
+        <span slot="title">The Wizard of Oz</span>
+        <span slot="author">L. Frank Baum</span>
+      </book-element>
+
+  </div>
+
+  <!-- MAIN CONTENT AREA -->
+  <main class="content">
+    <h2 class="capitals">Bestsellers</h2>
+
+    <div class="support-notice">
+      ⚠️ Your browser does not support Container Queries - Enable them in Chrome Canary at chrome://flags to see this demo.
+    </div>
+
+    <div class="booklist js-drag-container">
+      
+      <book-element color="#BA423D">
+        <img slot="cover" src="https://assets.codepen.io/1256430/1984.avif" alt="" />
+        <span slot="title">1984</span>
+        <span slot="author">George Orwell</span>
+      </book-element>
+
+      <book-element color="#d2d5dc">
+        <img slot="cover" src="https://assets.codepen.io/1256430/little-women.avif" alt="" />
+        <span slot="title">Little Women</span>
+        <span slot="author">Louisa May Alcott</span>
+      </book-element>
+
+      <book-element color="#fefef2">
+        <img slot="cover" src="https://assets.codepen.io/1256430/fahrenheit-451.avif" alt="" />
+        <span slot="title">Fahrenheit 451</span>
+        <span slot="author">Ray Bradbury</span>
+      </book-element>
+      
+      <book-element color="#0c0d12">
+        <img slot="cover" src="https://assets.codepen.io/1256430/moby-dick.avif" alt="" />
+        <span slot="title">Moby Dick</span>
+        <span slot="author">Herman Melville</span>
+      </book-element>
+      
+      <book-element color="#1480a8"> 
+        <img slot="cover" src="https://assets.codepen.io/1256430/pride.avif" alt="" />
+        <span slot="title">Pride and Prejudice</span>
+        <span slot="author">Jane Austen</span>
+      </book-element>
+      
+      <book-element color="#cb0f2d">
+        <img slot="cover" src="https://assets.codepen.io/1256430/sputnik-sweetheart.avif" alt="" />
+        <span slot="title">Sputnik Sweetheart</span>
+        <span slot="author">Haruki Murakami</span>
+      </book-element>
+
+    </div>
+  </main>
+
+
+  <!-- SHOPPING CART -->
+  <div class="cart js-drag-container">
+    <h2 class="capitals">Cart</h2>
+    
+    <book-element color="#067682">
+      <img slot="cover" src="https://assets.codepen.io/1256430/don-quixote.avif" alt="" />
+      <span slot="title">Don Quixote</span>
+      <span slot="author">Miguel de Cervantes</span>
+    </book-element>
+
+  </div>
+</div>
+
+<!-- INCLUDE DRAGULA.JS -->
+<script src="https://unpkg.com/dragula@3.7.2/dist/dragula.min.js"></script>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/container-query-bookstore/dist/script.js b/container-query-bookstore/dist/script.js
new file mode 100644
index 0000000..62ea4e9
--- /dev/null
+++ b/container-query-bookstore/dist/script.js
@@ -0,0 +1,51 @@
+// Init Dragula
+if (dragula) {
+  const drg = dragula(Array.from(document.querySelectorAll('.js-drag-container')))
+  drg.on('drop', (el, target, source, sibling) => {
+    if (target.classList.contains('stage')) {
+      const color = el.getAttribute('color')
+      target.style.setProperty('--bg-color', color)
+      
+      if (sibling && sibling.tagName.toLowerCase() === 'book-element') {
+        source.appendChild(sibling)
+      }
+    }
+  })
+}
+
+// Custom Element Definition
+class BookElement extends HTMLElement {
+  constructor() {
+    super()
+    this.template = document.getElementById('book-template')
+    
+    if (this.template) {
+      this.attachShadow({ mode: "open" }).appendChild(this.template.content.cloneNode(true))
+    }
+  }
+  
+  static get observedAttributes() {
+    return ['color'];
+  }
+  
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (newValue !== oldValue) {
+      this[attrName] = this.getAttribute(attrName);
+      this.update();
+    }
+  }
+  
+  connectedCallback() {
+    this.update();
+  }
+  
+  update() {
+    if (this.color) {
+      this.style.setProperty('--cover-color', this.color)
+    }
+  }
+}
+
+if ('customElements' in window) {
+    customElements.define('book-element', BookElement)
+}
\ No newline at end of file
diff --git a/container-query-bookstore/dist/style.css b/container-query-bookstore/dist/style.css
new file mode 100644
index 0000000..107ff76
--- /dev/null
+++ b/container-query-bookstore/dist/style.css
@@ -0,0 +1,119 @@
+:root {
+  --spacing: 1rem;
+  --highlight-color: #52947c;
+}
+
+body {
+  font-family: sans-serif;
+}
+
+/* Basic Layout Sections */
+
+.layout {
+  min-height: 100vh;
+}
+
+.header {
+  display:flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 3.5rem;
+  padding: 0 var(--spacing);
+  box-shadow:0 2px 16px rgba(0,0,0,0.1);
+  position:relative;
+  z-index: 1;
+}
+
+.stage,
+.content,
+.cart {
+  padding: var(--spacing);
+  overflow-y: auto;
+}
+
+.stage {
+  position:relative;
+}
+.stage::after {
+  content: "";
+  position:absolute;
+  z-index:-1;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  background-color: var(--bg-color, var(--highlight-color));
+  filter: brightness(1.5);
+  transition: background-color .5s linear;
+  opacity:0.25;
+}
+
+.booklist {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(201px, 1fr));
+  gap: var(--spacing);
+}
+
+.cart {
+  background-color: #f5f3f3;
+}
+.cart > * + * {
+  margin-top: 1rem;
+}
+
+/* Desktop Layout */
+
+@media (min-width: 1260px) {
+  .layout {
+    --spacing: 2rem;
+    
+    display:grid;
+    height: 100vh;
+    grid-template-rows: 3.5rem auto;
+    grid-template-columns: 480px 1fr 130px;
+    overflow-y: hidden;
+  }
+  .header {
+    grid-column: 1 / -1;
+  }
+}
+
+/* No-CQ Support Notice */
+
+.support-notice {
+  padding: 1rem;
+  border-radius: .25rem;
+  margin-bottom: var(--spacing);
+  border: 2px solid salmon;
+  background-color: rgba(salmon, .1);
+  line-height: 1.4;
+}
+
+@supports (contain: layout inline-size) {
+	.support-notice {
+		display: none;
+	}
+}
+
+/* Misc Helper Classes */
+
+.gu-mirror {
+  width: 180px !important;
+}
+
+.capitals {
+  font-size: .75rem;
+  font-weight: bold;
+  letter-spacing:.25em;
+  text-transform: uppercase;
+  margin-bottom: var(--spacing);
+}
+
+.logo {
+  font-family: "Merriweather", serif;
+}
+
+.by a {
+  color: inherit;
+  text-decoration:underline;
+}
\ No newline at end of file
diff --git a/container-query-bookstore/license.txt b/container-query-bookstore/license.txt
new file mode 100644
index 0000000..8f18a1c
--- /dev/null
+++ b/container-query-bookstore/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Max Böck (https://codepen.io/mxbck/pen/XWMrMOp)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/container-query-bookstore/src/index.html b/container-query-bookstore/src/index.html
new file mode 100644
index 0000000..aa76867
--- /dev/null
+++ b/container-query-bookstore/src/index.html
@@ -0,0 +1,201 @@
+<!-- BOOK TEMPLATE -->
+<template id="book-template">
+  <style>
+    /* Layout Container */
+    :host {
+      display: block;
+      contain: layout inline-size;
+      perspective:1000px;
+      cursor: grab;
+    }
+    
+    /* Base Styles */
+    ::slotted(img) {
+      display:block;
+      width:100%;
+      height: auto;
+      border-radius: 0px 2px 2px 0px;
+      background-color: var(--cover-color);
+    }
+    .book {
+      font-size: var(--font-size, 1rem);
+      font-weight: 400;
+    }
+    .meta {
+      padding-top: 1em;
+      line-height: 1.3;
+    }
+    .title {
+      font-size: 1.25em;
+      font-family: "Merriweather", serif;
+      margin:0 0 .5rem 0;
+    }
+    .author {
+      font-size: .875em;
+      font-family: sans-serif;
+      margin:0;
+    }
+    
+    /* Small Variant */
+    @container (max-width: 200px) {
+      .book {
+        --font-size: .5rem;
+      }
+      .author {
+        display: none;
+      }
+    }
+    
+    /* Medium Variant */
+    @container (min-width: 201px) and (max-width: 399px) {
+      .book {
+        --font-size: 1rem;
+        display: grid;
+        align-items: start;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+      }
+    }
+    
+    /* Large Variant */
+    @container (min-width: 400px) {
+      ::slotted(img) {
+        transform: translateZ(40px);
+        box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
+      }
+      .book {
+        --font-size: 1.5rem;
+        padding:1rem;
+      }
+      .front {
+        position: relative;
+        transform-style: preserve-3d;
+        transform: rotateY(-25deg);
+        transition: transform .5s ease;
+      }
+      .front::before {
+        position: absolute;
+        content: ' ';
+        left: 100%;
+        top: 1%;
+        width: 80px;
+        height: 98%;
+        transform: translate(-55%,0) rotateY(
+    90deg
+    );
+        background: linear-gradient(
+    90deg
+    , #fff 0%, #f9f9f9 5%, #fff 10%, #f9f9f9 15%, #fff 20%, #f9f9f9 25%, #fff 30%, #f9f9f9 35%, #fff 40%, #f9f9f9 45%, #fff 50%, #f9f9f9 55%, #fff 60%, #f9f9f9 65%, #fff 70%, #f9f9f9 75%, #fff 80%, #f9f9f9 85%, #fff 90%, #f9f9f9 95%, #fff 100% );
+      }
+      .front::after {
+        position: absolute;
+        top: 0;
+        left: 1%;
+        content: ' ';
+        width: 100%;
+        height: 100%;
+        transform: translateZ(-40px);
+        background-color: var(--cover-color, #000);
+        border-radius: 0 2px 2px 0;
+        box-shadow: -10px 0 50px 10px rgba(0,0,0,0.3);
+      }
+    }
+  </style>
+  <article class="book">
+    <div class="front">
+      <slot name="cover"></slot>
+    </div>
+    <div class="meta">
+      <h2 class="title"><slot name="title"></slot></h2>
+      <p class="author"><slot name="author"></slot></p>
+    </div>
+  </article>
+</template>
+<!-- END BOOK TEMPLATE -->
+
+
+
+<div class="layout">
+  <!-- HEADER -->
+  <header class="header">
+    <h1 class="logo">CQ Bookstore</h1>
+    <p class="by">by <a href="https://mxb.dev">MXB</a></p>
+  </header>
+
+  <!-- FEATURED STAGE -->
+  <div class="stage js-drag-container">
+    <h2 class="capitals">Featured</h2>
+    
+      <book-element color="#52947c">
+        <img slot="cover" src="https://assets.codepen.io/1256430/oz.avif" alt="" />
+        <span slot="title">The Wizard of Oz</span>
+        <span slot="author">L. Frank Baum</span>
+      </book-element>
+
+  </div>
+
+  <!-- MAIN CONTENT AREA -->
+  <main class="content">
+    <h2 class="capitals">Bestsellers</h2>
+
+    <div class="support-notice">
+      ⚠️ Your browser does not support Container Queries - Enable them in Chrome Canary at chrome://flags to see this demo.
+    </div>
+
+    <div class="booklist js-drag-container">
+      
+      <book-element color="#BA423D">
+        <img slot="cover" src="https://assets.codepen.io/1256430/1984.avif" alt="" />
+        <span slot="title">1984</span>
+        <span slot="author">George Orwell</span>
+      </book-element>
+
+      <book-element color="#d2d5dc">
+        <img slot="cover" src="https://assets.codepen.io/1256430/little-women.avif" alt="" />
+        <span slot="title">Little Women</span>
+        <span slot="author">Louisa May Alcott</span>
+      </book-element>
+
+      <book-element color="#fefef2">
+        <img slot="cover" src="https://assets.codepen.io/1256430/fahrenheit-451.avif" alt="" />
+        <span slot="title">Fahrenheit 451</span>
+        <span slot="author">Ray Bradbury</span>
+      </book-element>
+      
+      <book-element color="#0c0d12">
+        <img slot="cover" src="https://assets.codepen.io/1256430/moby-dick.avif" alt="" />
+        <span slot="title">Moby Dick</span>
+        <span slot="author">Herman Melville</span>
+      </book-element>
+      
+      <book-element color="#1480a8"> 
+        <img slot="cover" src="https://assets.codepen.io/1256430/pride.avif" alt="" />
+        <span slot="title">Pride and Prejudice</span>
+        <span slot="author">Jane Austen</span>
+      </book-element>
+      
+      <book-element color="#cb0f2d">
+        <img slot="cover" src="https://assets.codepen.io/1256430/sputnik-sweetheart.avif" alt="" />
+        <span slot="title">Sputnik Sweetheart</span>
+        <span slot="author">Haruki Murakami</span>
+      </book-element>
+
+    </div>
+  </main>
+
+
+  <!-- SHOPPING CART -->
+  <div class="cart js-drag-container">
+    <h2 class="capitals">Cart</h2>
+    
+    <book-element color="#067682">
+      <img slot="cover" src="https://assets.codepen.io/1256430/don-quixote.avif" alt="" />
+      <span slot="title">Don Quixote</span>
+      <span slot="author">Miguel de Cervantes</span>
+    </book-element>
+
+  </div>
+</div>
+
+<!-- INCLUDE DRAGULA.JS -->
+<script src="https://unpkg.com/dragula@3.7.2/dist/dragula.min.js"></script>
\ No newline at end of file
diff --git a/container-query-bookstore/src/script.js b/container-query-bookstore/src/script.js
new file mode 100644
index 0000000..62ea4e9
--- /dev/null
+++ b/container-query-bookstore/src/script.js
@@ -0,0 +1,51 @@
+// Init Dragula
+if (dragula) {
+  const drg = dragula(Array.from(document.querySelectorAll('.js-drag-container')))
+  drg.on('drop', (el, target, source, sibling) => {
+    if (target.classList.contains('stage')) {
+      const color = el.getAttribute('color')
+      target.style.setProperty('--bg-color', color)
+      
+      if (sibling && sibling.tagName.toLowerCase() === 'book-element') {
+        source.appendChild(sibling)
+      }
+    }
+  })
+}
+
+// Custom Element Definition
+class BookElement extends HTMLElement {
+  constructor() {
+    super()
+    this.template = document.getElementById('book-template')
+    
+    if (this.template) {
+      this.attachShadow({ mode: "open" }).appendChild(this.template.content.cloneNode(true))
+    }
+  }
+  
+  static get observedAttributes() {
+    return ['color'];
+  }
+  
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (newValue !== oldValue) {
+      this[attrName] = this.getAttribute(attrName);
+      this.update();
+    }
+  }
+  
+  connectedCallback() {
+    this.update();
+  }
+  
+  update() {
+    if (this.color) {
+      this.style.setProperty('--cover-color', this.color)
+    }
+  }
+}
+
+if ('customElements' in window) {
+    customElements.define('book-element', BookElement)
+}
\ No newline at end of file
diff --git a/container-query-bookstore/src/style.css b/container-query-bookstore/src/style.css
new file mode 100644
index 0000000..107ff76
--- /dev/null
+++ b/container-query-bookstore/src/style.css
@@ -0,0 +1,119 @@
+:root {
+  --spacing: 1rem;
+  --highlight-color: #52947c;
+}
+
+body {
+  font-family: sans-serif;
+}
+
+/* Basic Layout Sections */
+
+.layout {
+  min-height: 100vh;
+}
+
+.header {
+  display:flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 3.5rem;
+  padding: 0 var(--spacing);
+  box-shadow:0 2px 16px rgba(0,0,0,0.1);
+  position:relative;
+  z-index: 1;
+}
+
+.stage,
+.content,
+.cart {
+  padding: var(--spacing);
+  overflow-y: auto;
+}
+
+.stage {
+  position:relative;
+}
+.stage::after {
+  content: "";
+  position:absolute;
+  z-index:-1;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  background-color: var(--bg-color, var(--highlight-color));
+  filter: brightness(1.5);
+  transition: background-color .5s linear;
+  opacity:0.25;
+}
+
+.booklist {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(201px, 1fr));
+  gap: var(--spacing);
+}
+
+.cart {
+  background-color: #f5f3f3;
+}
+.cart > * + * {
+  margin-top: 1rem;
+}
+
+/* Desktop Layout */
+
+@media (min-width: 1260px) {
+  .layout {
+    --spacing: 2rem;
+    
+    display:grid;
+    height: 100vh;
+    grid-template-rows: 3.5rem auto;
+    grid-template-columns: 480px 1fr 130px;
+    overflow-y: hidden;
+  }
+  .header {
+    grid-column: 1 / -1;
+  }
+}
+
+/* No-CQ Support Notice */
+
+.support-notice {
+  padding: 1rem;
+  border-radius: .25rem;
+  margin-bottom: var(--spacing);
+  border: 2px solid salmon;
+  background-color: rgba(salmon, .1);
+  line-height: 1.4;
+}
+
+@supports (contain: layout inline-size) {
+	.support-notice {
+		display: none;
+	}
+}
+
+/* Misc Helper Classes */
+
+.gu-mirror {
+  width: 180px !important;
+}
+
+.capitals {
+  font-size: .75rem;
+  font-weight: bold;
+  letter-spacing:.25em;
+  text-transform: uppercase;
+  margin-bottom: var(--spacing);
+}
+
+.logo {
+  font-family: "Merriweather", serif;
+}
+
+.by a {
+  color: inherit;
+  text-decoration:underline;
+}
\ No newline at end of file
diff --git a/context-menu-with-feather-icons/README.markdown b/context-menu-with-feather-icons/README.markdown
new file mode 100644
index 0000000..a435693
--- /dev/null
+++ b/context-menu-with-feather-icons/README.markdown
@@ -0,0 +1,7 @@
+# Context menu with Feather icons
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/havardob/pen/YzwzQgm](https://codepen.io/havardob/pen/YzwzQgm).
+
+Inspired by https://dribbble.com/shots/11117547-Popover-components
+
+Icons from https://feathericons.com/
diff --git a/context-menu-with-feather-icons/dist/index.html b/context-menu-with-feather-icons/dist/index.html
new file mode 100644
index 0000000..d054e75
--- /dev/null
+++ b/context-menu-with-feather-icons/dist/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Context menu with Feather icons</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <!-- code here -->
+  <div class="menu">
+    <ul class="menu-list">
+      <li class="menu-item"><button class="menu-button"><i data-feather="corner-up-right"></i>Share</button></li>
+      <li class="menu-item"><button class="menu-button"><i data-feather="edit-2"></i>Rename</button></li>
+    </ul>
+    <ul class="menu-list">
+      <li class="menu-item"><button class="menu-button menu-button--black"><i data-feather="circle"></i>No status<i data-feather="chevron-right"></i></button>
+      <ul class="menu-sub-list">
+        <li class="menu-item"><button class="menu-button menu-button--orange"><i data-feather="square"></i>Needs review</button></li>
+                <li class="menu-item"><button class="menu-button menu-button--purple"><i data-feather="octagon"></i>In progress</button></li>
+                <li class="menu-item"><button class="menu-button menu-button--green"><i data-feather="triangle"></i>Approved</button></li>
+                <li class="menu-item"><button class="menu-button menu-button--black menu-button--checked"><i data-feather="circle"></i>No status<i data-feather="check"></i></button></li>
+      </ul>
+      </li>
+      <li class="menu-item"><button class="menu-button"><i data-feather="link"></i>Copy Link Address</button></li>
+      <li class="menu-item"><button class="menu-button"><i data-feather="folder-plus"></i>Move to</button></li>
+      <li class="menu-item"><button class="menu-button"><i data-feather="copy"></i>Copy to</button></li>
+      <li class="menu-item"><button class="menu-button"><i data-feather="lock"></i>Make Private</button></li>
+      <li class="menu-item"><button class="menu-button"><i data-feather="download"></i>Download</button></li>
+    </ul>
+    <ul class="menu-list">
+      <li class="menu-item"><button class="menu-button menu-button--delete"><i data-feather="trash-2"></i>Delete</button></li>
+    </ul>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.com/feather-icons'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/context-menu-with-feather-icons/dist/script.js b/context-menu-with-feather-icons/dist/script.js
new file mode 100644
index 0000000..3974f01
--- /dev/null
+++ b/context-menu-with-feather-icons/dist/script.js
@@ -0,0 +1 @@
+feather.replace()
\ No newline at end of file
diff --git a/context-menu-with-feather-icons/dist/style.css b/context-menu-with-feather-icons/dist/style.css
new file mode 100644
index 0000000..a69ed39
--- /dev/null
+++ b/context-menu-with-feather-icons/dist/style.css
@@ -0,0 +1,142 @@
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+:root {
+  --color-bg-primary: #d0d6df;
+  --color-bg-primary-offset: #f1f3f7;
+  --color-bg-secondary: #fff;
+  --color-text-primary: #3a3c42;
+  --color-text-primary-offset: #898c94;
+  --color-orange: #dc9960;
+  --color-green: #1eb8b1;
+  --color-purple: #657cc4;
+  --color-black: var(--color-text-primary);
+  --color-red: #d92027;
+}
+
+body {
+  font-family: "Inter", sans-serif;
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+}
+
+.menu {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  background-color: var(--color-bg-secondary);
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgba(64, 64, 64, 0.15);
+}
+
+.menu-list {
+  margin: 0;
+  display: block;
+  width: 100%;
+  padding: 8px;
+}
+.menu-list + .menu-list {
+  border-top: 1px solid #ddd;
+}
+
+.menu-sub-list {
+  display: none;
+  padding: 8px;
+  background-color: var(--color-bg-secondary);
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgba(64, 64, 64, 0.15);
+  position: absolute;
+  left: 100%;
+  right: 0;
+  z-index: 100;
+  width: 100%;
+  top: 0;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+}
+.menu-sub-list:hover {
+  display: -webkit-box;
+  display: flex;
+}
+
+.menu-item {
+  position: relative;
+}
+
+.menu-button {
+  font: inherit;
+  border: 0;
+  padding: 8px 8px;
+  padding-right: 36px;
+  width: 100%;
+  border-radius: 8px;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  position: relative;
+  background-color: var(--color-bg-secondary);
+}
+.menu-button:hover {
+  background-color: var(--color-bg-primary-offset);
+}
+.menu-button:hover + .menu-sub-list {
+  display: -webkit-box;
+  display: flex;
+}
+.menu-button:hover svg {
+  stroke: var(--color-text-primary);
+}
+.menu-button svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  stroke: var(--color-text-primary-offset);
+}
+.menu-button svg:nth-of-type(2) {
+  margin-right: 0;
+  position: absolute;
+  right: 8px;
+}
+.menu-button--delete:hover {
+  color: var(--color-red);
+}
+.menu-button--delete:hover svg:first-of-type {
+  stroke: var(--color-red);
+}
+.menu-button--orange svg:first-of-type {
+  stroke: var(--color-orange);
+}
+.menu-button--green svg:first-of-type {
+  stroke: var(--color-green);
+}
+.menu-button--purple svg:first-of-type {
+  stroke: var(--color-purple);
+}
+.menu-button--black svg:first-of-type {
+  stroke: var(--color-black);
+}
+.menu-button--checked svg:nth-of-type(2) {
+  stroke: var(--color-purple);
+}
+
+.container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+}
\ No newline at end of file
diff --git a/context-menu-with-feather-icons/license.txt b/context-menu-with-feather-icons/license.txt
new file mode 100644
index 0000000..01a8173
--- /dev/null
+++ b/context-menu-with-feather-icons/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Håvard Brynjulfsen (https://codepen.io/havardob/pen/YzwzQgm)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/context-menu-with-feather-icons/src/index.html b/context-menu-with-feather-icons/src/index.html
new file mode 100644
index 0000000..203416b
--- /dev/null
+++ b/context-menu-with-feather-icons/src/index.html
@@ -0,0 +1,27 @@
+<div class="container">
+  <!-- code here -->
+  <div class="menu">
+    <ul class="menu-list">
+      <li class="menu-item"><button class="menu-button"><i data-feather="corner-up-right"></i>Share</button></li>
+      <li class="menu-item"><button class="menu-button"><i data-feather="edit-2"></i>Rename</button></li>
+    </ul>
+    <ul class="menu-list">
+      <li class="menu-item"><button class="menu-button menu-button--black"><i data-feather="circle"></i>No status<i data-feather="chevron-right"></i></button>
+      <ul class="menu-sub-list">
+        <li class="menu-item"><button class="menu-button menu-button--orange"><i data-feather="square"></i>Needs review</button></li>
+                <li class="menu-item"><button class="menu-button menu-button--purple"><i data-feather="octagon"></i>In progress</button></li>
+                <li class="menu-item"><button class="menu-button menu-button--green"><i data-feather="triangle"></i>Approved</button></li>
+                <li class="menu-item"><button class="menu-button menu-button--black menu-button--checked"><i data-feather="circle"></i>No status<i data-feather="check"></i></button></li>
+      </ul>
+      </li>
+      <li class="menu-item"><button class="menu-button"><i data-feather="link"></i>Copy Link Address</button></li>
+      <li class="menu-item"><button class="menu-button"><i data-feather="folder-plus"></i>Move to</button></li>
+      <li class="menu-item"><button class="menu-button"><i data-feather="copy"></i>Copy to</button></li>
+      <li class="menu-item"><button class="menu-button"><i data-feather="lock"></i>Make Private</button></li>
+      <li class="menu-item"><button class="menu-button"><i data-feather="download"></i>Download</button></li>
+    </ul>
+    <ul class="menu-list">
+      <li class="menu-item"><button class="menu-button menu-button--delete"><i data-feather="trash-2"></i>Delete</button></li>
+    </ul>
+  </div>
+</div>
\ No newline at end of file
diff --git a/context-menu-with-feather-icons/src/script.js b/context-menu-with-feather-icons/src/script.js
new file mode 100644
index 0000000..3974f01
--- /dev/null
+++ b/context-menu-with-feather-icons/src/script.js
@@ -0,0 +1 @@
+feather.replace()
\ No newline at end of file
diff --git a/context-menu-with-feather-icons/src/style.scss b/context-menu-with-feather-icons/src/style.scss
new file mode 100644
index 0000000..c1200a2
--- /dev/null
+++ b/context-menu-with-feather-icons/src/style.scss
@@ -0,0 +1,157 @@
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+:root {
+  --color-bg-primary: #d0d6df;
+  --color-bg-primary-offset: #f1f3f7;
+  --color-bg-secondary: #fff;
+  --color-text-primary: #3a3c42;
+  --color-text-primary-offset: #898c94;
+  --color-orange: #dc9960;
+  --color-green: #1eb8b1;
+  --color-purple: #657cc4;
+  --color-black: var(--color-text-primary);
+  --color-red: #d92027;
+}
+
+body {
+  font-family: "Inter", sans-serif;
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-bg-secondary);
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgba(#404040, 0.15);
+}
+
+.menu-list {
+  margin: 0;
+  display: block;
+  width: 100%;
+  padding: 8px;
+  & + .menu-list {
+    border-top: 1px solid #ddd;
+  }
+}
+.menu-sub-list {
+  display: none;
+  padding: 8px;
+  background-color: var(--color-bg-secondary);
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgba(#404040, 0.15);
+  position: absolute;
+  left: 100%;
+  right: 0;
+  z-index: 100;
+  width: 100%;
+  top: 0;
+  flex-direction: column;
+  // &:after {
+  //   content: "";
+  //   position: absolute;
+  //   left: -12px;
+  //   top: 0;
+  //   right: 0;
+  //   bottom: 0;
+  //   display: block;
+  //   outline: 2px solid hotpink;
+  // }
+  &:hover {
+    display: flex;
+  }
+}
+
+.menu-item {
+  position: relative;
+}
+
+.menu-button {
+  font: inherit;
+  border: 0;
+  padding: 8px 8px;
+  padding-right: 36px;
+  width: 100%;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  background-color: var(--color-bg-secondary);
+  &:hover {
+    background-color: var(--color-bg-primary-offset);
+    & + .menu-sub-list {
+      display: flex;
+    }
+    svg {
+      stroke: var(--color-text-primary);
+    }
+  }
+  svg {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+    stroke: var(--color-text-primary-offset);
+    &:nth-of-type(2) {
+      margin-right: 0;
+      position: absolute;
+      right: 8px;
+    }
+  }
+
+  &--delete {
+    &:hover {
+      color: var(--color-red);
+      svg:first-of-type {
+        stroke: var(--color-red);
+      }
+    }
+  }
+
+  &--orange {
+    svg:first-of-type {
+      stroke: var(--color-orange);
+    }
+  }
+
+  &--green {
+    svg:first-of-type {
+      stroke: var(--color-green);
+    }
+  }
+  &--purple {
+    svg:first-of-type {
+      stroke: var(--color-purple);
+    }
+  }
+  &--black {
+    svg:first-of-type {
+      stroke: var(--color-black);
+    }
+  }
+  
+  &--checked {
+    svg:nth-of-type(2) {
+      stroke: var(--color-purple);
+    }
+  }
+}
+
+// Codepen spesific styling - only to center the elements in the pen preview and viewport
+.container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+// End Codepen spesific styling
diff --git a/copy-table-as-csv-web-component/README.markdown b/copy-table-as-csv-web-component/README.markdown
new file mode 100644
index 0000000..188a3ad
--- /dev/null
+++ b/copy-table-as-csv-web-component/README.markdown
@@ -0,0 +1,5 @@
+# <copy-table> as CSV web component
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/davatron5000/pen/YzEYKwR](https://codepen.io/davatron5000/pen/YzEYKwR).
+
+
diff --git a/copy-table-as-csv-web-component/dist/index.html b/copy-table-as-csv-web-component/dist/index.html
new file mode 100644
index 0000000..6a2e896
--- /dev/null
+++ b/copy-table-as-csv-web-component/dist/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - &lt;copy-table&gt; as CSV web component</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<copy-table>
+  <table>
+    <tr>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+    </tr>
+    <tr>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+    </tr>
+    <tr>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+    </tr>
+    <tr>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+    </tr>
+    <tr>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+    </tr>
+  </table>
+</copy-table>
+
+<br>
+
+<copy-table>
+  <table>
+    <tr>
+      <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure similique quisquam incidunt dignissimos minus magni sunt et autem rem omnis quos exercitationem saepe aut excepturi quas, aperiam deserunt ullam non?</td>
+      <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure similique quisquam incidunt dignissimos minus magni sunt et autem rem omnis quos exercitationem saepe aut excepturi quas, aperiam deserunt ullam non?</td>
+      <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure similique quisquam incidunt dignissimos minus magni sunt et autem rem omnis quos exercitationem saepe aut excepturi quas, aperiam deserunt ullam non?</td>
+    </tr>
+    <tr>
+      <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure similique quisquam incidunt dignissimos minus magni sunt et autem rem omnis quos exercitationem saepe aut excepturi quas, aperiam deserunt ullam non?</td>
+      <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure similique quisquam incidunt dignissimos minus magni sunt et autem rem omnis quos exercitationem saepe aut excepturi quas, aperiam deserunt ullam non?</td>
+      <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure similique quisquam incidunt dignissimos minus magni sunt et autem rem omnis quos exercitationem saepe aut excepturi quas, aperiam deserunt ullam non?</td>
+    </tr>
+  </table>
+</copy-table>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/copy-table-as-csv-web-component/dist/script.js b/copy-table-as-csv-web-component/dist/script.js
new file mode 100644
index 0000000..62c4529
--- /dev/null
+++ b/copy-table-as-csv-web-component/dist/script.js
@@ -0,0 +1,142 @@
+import {
+  LitElement,
+  html,
+  css
+} from "https://unpkg.com/lit@2.1.4/index.js?module";
+
+class CopyTable extends LitElement {
+  static styles = css`
+    :host {
+      display: grid;
+      grid-template-columns: minmax(auto, max-content) max-content;
+      gap: 0.5rem;
+      width: 100%;
+      overflow: hidden;
+    }
+    .actions {
+      display: flex;
+      flex-direction: column;
+      justify-content: start;
+      align-items: start;
+      gap: 0.5rem;
+    }
+    button {
+      appearance: none;
+      border: none;
+      background: transparent;
+      padding: 0;
+    }
+    a {
+      color: currentColor;
+    }
+    .overflow {
+      max-width: 100%;
+      overflow-x: auto;
+    }
+  `;
+
+  static properties = {
+    _success: { state: false }
+  };
+
+  constructor() {
+    super();
+    const trs = this.querySelectorAll("tr");
+
+    this.CSV = (function () {
+      let returnString = [];
+      trs.forEach((tr) => {
+        let tds = tr.querySelectorAll("td,th");
+        let tdContent = [...tds].map((td) =>
+          td.textContent.match(",") ? `"${td.textContent}"` : td.textContent
+        );
+        returnString.push(tdContent.join(","));
+      });
+      return returnString.join("\n");
+    })();
+  }
+
+  copyToClipboard(event) {
+    var type = "text/plain";
+    var blob = new Blob([this.CSV], { type });
+    var data = [new ClipboardItem({ [type]: blob })];
+
+    navigator.clipboard.write(data).then(() => {
+      this._success = true;
+      setTimeout(() => {
+        this._success = false;
+      }, 1000);
+    });
+  }
+
+  render() {
+    return html`
+      <div class="overflow">
+        <slot></slot>
+      </div>
+
+      <div class="actions">
+        <button aria-label="Copy as CSV" @click="${this.copyToClipboard}">
+          ${this._success
+            ? html`
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  height="24"
+                  width="24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+                  />
+                </svg>
+              `
+            : html`
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  height="24"
+                  width="24"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                  />
+                </svg>
+              `}
+        </button>
+        <a
+          aria-label="Download CSV"
+          download="table.csv"
+          href="data:,${encodeURIComponent(this.CSV)}"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            width="24"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+            />
+          </svg>
+        </a>
+      </div>
+    `;
+  }
+}
+
+customElements.define("copy-table", CopyTable);
\ No newline at end of file
diff --git a/copy-table-as-csv-web-component/dist/style.css b/copy-table-as-csv-web-component/dist/style.css
new file mode 100644
index 0000000..f566253
--- /dev/null
+++ b/copy-table-as-csv-web-component/dist/style.css
@@ -0,0 +1,12 @@
+body {
+  padding: 2rem;
+}
+
+table {
+  border-collapse: collapse;
+}
+table td,
+table th {
+  outline: 1px solid graytext;
+  padding: 0.5rem;
+}
\ No newline at end of file
diff --git a/copy-table-as-csv-web-component/license.txt b/copy-table-as-csv-web-component/license.txt
new file mode 100644
index 0000000..d303548
--- /dev/null
+++ b/copy-table-as-csv-web-component/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Dave Rupert (https://codepen.io/davatron5000/pen/YzEYKwR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/copy-table-as-csv-web-component/src/index.html b/copy-table-as-csv-web-component/src/index.html
new file mode 100644
index 0000000..f1d1cd9
--- /dev/null
+++ b/copy-table-as-csv-web-component/src/index.html
@@ -0,0 +1,56 @@
+<copy-table>
+  <table>
+    <tr>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+    </tr>
+    <tr>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+    </tr>
+    <tr>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+    </tr>
+    <tr>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+    </tr>
+    <tr>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+      <td>item</td>
+    </tr>
+  </table>
+</copy-table>
+
+<br>
+
+<copy-table>
+  <table>
+    <tr>
+      <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure similique quisquam incidunt dignissimos minus magni sunt et autem rem omnis quos exercitationem saepe aut excepturi quas, aperiam deserunt ullam non?</td>
+      <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure similique quisquam incidunt dignissimos minus magni sunt et autem rem omnis quos exercitationem saepe aut excepturi quas, aperiam deserunt ullam non?</td>
+      <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure similique quisquam incidunt dignissimos minus magni sunt et autem rem omnis quos exercitationem saepe aut excepturi quas, aperiam deserunt ullam non?</td>
+    </tr>
+    <tr>
+      <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure similique quisquam incidunt dignissimos minus magni sunt et autem rem omnis quos exercitationem saepe aut excepturi quas, aperiam deserunt ullam non?</td>
+      <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure similique quisquam incidunt dignissimos minus magni sunt et autem rem omnis quos exercitationem saepe aut excepturi quas, aperiam deserunt ullam non?</td>
+      <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure similique quisquam incidunt dignissimos minus magni sunt et autem rem omnis quos exercitationem saepe aut excepturi quas, aperiam deserunt ullam non?</td>
+    </tr>
+  </table>
+</copy-table>
\ No newline at end of file
diff --git a/copy-table-as-csv-web-component/src/script.js b/copy-table-as-csv-web-component/src/script.js
new file mode 100644
index 0000000..fb9804e
--- /dev/null
+++ b/copy-table-as-csv-web-component/src/script.js
@@ -0,0 +1,142 @@
+import {
+  LitElement,
+  html,
+  css
+} from "https://unpkg.com/lit@2.1.4/index.js?module";
+
+class CopyTable extends LitElement {
+  static styles = css`
+    :host {
+      display: grid;
+      grid-template-columns: minmax(auto, max-content) max-content;
+      gap: 0.5rem;
+      width: 100%;
+      overflow: hidden;
+    }
+    .actions {
+      display: flex;
+      flex-direction: column;
+      justify-content: start;
+      align-items: start;
+      gap: 0.5rem;
+    }
+    button {
+      appearance: none;
+      border: none;
+      background: transparent;
+      padding: 0;
+    }
+    a {
+      color: currentColor;
+    }
+    .overflow {
+      max-width: 100%;
+      overflow-x: auto;
+    }
+  `;
+
+  static properties = {
+    _success: { state: false }
+  };
+
+  constructor() {
+    super();
+    const trs = this.querySelectorAll("tr");
+
+    this.CSV = (function () {
+      let returnString = [];
+      trs.forEach((tr) => {
+        let tds = tr.querySelectorAll("td,th");
+        let tdContent = [...tds].map((td) =>
+          td.textContent.match(",") ? `"${td.textContent}"` : td.textContent
+        );
+        returnString.push(tdContent.join(","));
+      });
+      return returnString.join("\n");
+    })();
+  }
+
+  copyToClipboard(event) {
+    var type = "text/plain";
+    var blob = new Blob([this.CSV], { type });
+    var data = [new ClipboardItem({ [type]: blob })];
+
+    navigator.clipboard.write(data).then(() => {
+      this._success = true;
+      setTimeout(() => {
+        this._success = false;
+      }, 1000);
+    });
+  }
+
+  render() {
+    return html`
+      <div class="overflow">
+        <slot></slot>
+      </div>
+
+      <div class="actions">
+        <button aria-label="Copy as CSV" @click="${this.copyToClipboard}">
+          ${this._success
+            ? html`
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  height="24"
+                  width="24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+                  />
+                </svg>
+              `
+            : html`
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  height="24"
+                  width="24"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                  />
+                </svg>
+              `}
+        </button>
+        <a
+          aria-label="Download CSV"
+          download="table.csv"
+          href="data:,${encodeURIComponent(this.CSV)}"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            width="24"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+            />
+          </svg>
+        </a>
+      </div>
+    `;
+  }
+}
+
+customElements.define("copy-table", CopyTable);
diff --git a/copy-table-as-csv-web-component/src/style.scss b/copy-table-as-csv-web-component/src/style.scss
new file mode 100644
index 0000000..0b4a931
--- /dev/null
+++ b/copy-table-as-csv-web-component/src/style.scss
@@ -0,0 +1,13 @@
+body {
+  padding: 2rem;
+}
+
+table {
+  border-collapse: collapse;
+
+  td,
+  th {
+    outline: 1px solid graytext;
+    padding: 0.5rem;
+  }
+}
diff --git a/countdown-to-new-year/README.markdown b/countdown-to-new-year/README.markdown
new file mode 100644
index 0000000..6817c6e
--- /dev/null
+++ b/countdown-to-new-year/README.markdown
@@ -0,0 +1,5 @@
+# Countdown to New Year 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/josetxu/pen/MWjJjBd](https://codepen.io/josetxu/pen/MWjJjBd).
+
+
diff --git a/countdown-to-new-year/dist/index.html b/countdown-to-new-year/dist/index.html
new file mode 100644
index 0000000..cc77e3f
--- /dev/null
+++ b/countdown-to-new-year/dist/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Countdown to New Year </title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="solar-system">
+<div class="orbit orbit-sun"></div>
+<div class="orbit orbit-mercury" id="position-mercury">
+<div class="planet planet-mercury" id="opacity-mercury">
+<img src="https://josetxu.com/demos/img/mercury.png" alt="mercury">
+</div>
+</div>
+<div class="orbit orbit-venus" id="position-venus">
+<div class="planet planet-venus" id="opacity-venus">
+<img src="https://josetxu.com/demos/img/venus.png" alt="venus">
+</div>
+</div>
+<div class="orbit orbit-earth" id="position-earth">
+<div class="planet planet-earth" id="opacity-earth">
+<img src="https://josetxu.com/demos/img/earth.png" alt="earth">
+</div>
+</div>
+<div class="orbit orbit-mars" id="position-mars">
+<div class="planet planet-mars" id="opacity-mars">
+<img src="https://josetxu.com/demos/img/mars.png" alt="mars">
+</div>
+</div>
+<div class="orbit orbit-asteroids" id="position-asteroids">
+<div class="planet planet-asteroids" id="opacity-asteroids">
+<img src="https://josetxu.com/demos/img/asteroids-belt.png" alt="asteroids">
+</div>
+</div>
+<div class="new-year-line">NEW YEAR <span id='cronoNewYear'></span></div>
+<div class="winter-solstice-line">WINTER SOLSTICE <span id="cronoWinterSolstice"></span></div>
+</div>
+<div id="warning"><p>it seems that the earth has gone out of its orbit... <button id="reload" onclick="location.reload()">RE-ORBIT</button></p></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/countdown-to-new-year/dist/script.js b/countdown-to-new-year/dist/script.js
new file mode 100644
index 0000000..29ecf99
--- /dev/null
+++ b/countdown-to-new-year/dist/script.js
@@ -0,0 +1,56 @@
+//prevent loading error
+	document.getElementById('warning').remove();
+
+	//short getElementById
+	elem = function (id){ return document.getElementById(id); }
+	
+	//count until date
+	var newYearDate = new Date("Jan 1, 2021 00:00:00").getTime();
+	
+	//title angles
+	var todayDate = new Date().getTime();
+	var todaySecondsLeft = (newYearDate - todayDate) / 1000;
+	var todayDays = parseInt(todaySecondsLeft / 86400);
+	var randMer = Math.floor(Math.random() * (4 - 1 + 1)) + 1;
+	var randVen = Math.floor(Math.random() * (10 - 4 + 1)) + 4;
+	var randMar = Math.floor(Math.random() * (16 - 8 + 1)) + 8;
+	var style = document.createElement('style'); style.innerHTML = '.orbit-mercury {transform: translate(-50%, -50%) rotate('+randMer+'deg)} .orbit-venus {transform: translate(-50%, -50%) rotate('+randVen+'deg)} .orbit-mars {transform: translate(-50%, -50%) rotate('+randMar+'deg)} .planet-mercury {transform:rotate(-'+randMer+'deg)} .planet-venus {transform:rotate(-'+randVen+'deg)} .planet-mars {transform:rotate(-'+randMar+'deg)} .planet-earth {transform:rotate('+todayDays+'deg)} .planet-venus {transform:rotate(-'+randVen+'deg)} '; document.head.appendChild(style);
+	
+	//countdown vars
+	var days, hours, minutes, seconds;
+	
+	//countdown 
+	var countDown = setInterval(function() {
+
+		var rightNow = new Date().getTime();
+		var timeTo = newYearDate - rightNow;
+		
+		days = Math.floor(timeTo / (1000 * 60 * 60 * 24));
+		hours = Math.floor((timeTo % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+		minutes = Math.floor((timeTo % (1000 * 60 * 60)) / (1000 * 60));
+		seconds = Math.floor((timeTo % (1000 * 60)) / 1000);
+		
+		if(hours<10)hours="0"+hours; 
+        if(minutes<10)minutes="0"+minutes; 
+        if(seconds<10)seconds="0"+seconds; 
+		
+		elem("cronoNewYear").innerHTML = days + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";
+		var newDays;		
+		if (days<0){ elem("cronoNewYear").style.display='none';	newDays = days.toString().substr(1); } else { newDays="-"+days; }
+		elem("position-earth").style.transform = 'translate(-50%, -50%) rotate('+newDays+'deg';
+		
+		var solsDays;
+		var cDays=days-11;			
+		if (cDays<0){ elem("cronoWinterSolstice").style.display='none';	} else { solsDays=cDays	}
+		elem("cronoWinterSolstice").innerHTML = solsDays + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";
+		
+		var opacityList = document.querySelectorAll('.planet');
+		for(i=0;i<opacityList.length;i++){
+			opacityList[i].style.opacity = '1';
+		}
+		
+		if (timeTo < 0) {
+			clearInterval(countDown);
+		}
+		
+	}, 1000);
\ No newline at end of file
diff --git a/countdown-to-new-year/dist/style.css b/countdown-to-new-year/dist/style.css
new file mode 100644
index 0000000..ddd2feb
--- /dev/null
+++ b/countdown-to-new-year/dist/style.css
@@ -0,0 +1,363 @@
+html {
+  box-sizing: border-box;
+}
+html *,
+html *:before,
+html *:after {
+  box-sizing: inherit;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  font-size: 62.5%;
+  background-color: #121212;
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.solar-system {
+  position: relative;
+  width: 100%;
+  max-width: 700px;
+  padding-top: 100%;
+  right: -50%;
+}
+
+@media (min-width: 700px) {
+  .solar-system {
+    padding-top: 700px;
+  }
+}
+
+
+/*** ORBITS ***/
+
+.orbit {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border: 2px dotted rgba(84 84 84 / 15%);
+  border-radius: 100%;
+  transform: translate(-50%, -50%);
+}
+.orbit-sun {
+    width: calc(50%);
+    height: calc(50%);
+	border: 1px dotted #ff6600;
+    background: #ffcc00;
+}
+.orbit-sun:before {
+    content: "";
+    background: #ff660017;
+    width: 99%;
+    height: 99%;
+    display: block;
+    margin-left: 0.5%;
+    margin-top: 0.5%;
+    border-radius: 100%;
+    box-shadow: 0 0 10em 5em #ff66006b, 0 0 100px 50px #ff66006b inset, 0 0 10px 5px #ffcc00f2;
+}
+.orbit.orbit-sun:after {
+    content: "SUN";
+    color: #ffa200;
+    top: 50%;
+    position: absolute;
+    left: -3.5em;
+}
+.orbit-mercury {
+	width: calc(100%);
+    height: calc(100%);
+	transform: translate(-50%, -50%);
+}
+.orbit-venus {
+	width: calc(150%);
+    height: calc(150%);
+	transform: translate(-50%, -50%);
+}
+.orbit-earth {
+	width: calc(200%);
+    height: calc(200%);
+}
+.orbit-earth:after {
+    content: "";
+    border: 2px solid red;
+    width: 1em;
+    height: 1em;
+    display: block;
+    position: relative;
+    border-color: #54cbeb #54cbeb transparent transparent;
+    transform: rotate(-50deg);
+    border-width: 2px 2px 0 0;
+    top: 52.75%;
+    left: -0.5em; 	
+	-webkit-animation: blinker 2s linear infinite; 	
+	        animation: blinker 2s linear infinite;
+}
+.orbit-mars {
+	width: calc(280%);
+    height: calc(280%);
+	transform: translate(-50%, -50%);
+}
+.orbit-asteroids {
+	width: calc(380%);
+    height: calc(380%);
+	transform: translate(-50%, -50%) rotate(0deg);
+}
+
+
+
+/*** PLANETS ***/
+
+.planet {
+  position: absolute;
+  top: 50%;
+  border-radius: 100%;
+  opacity: 0;
+  transform: translateY(-50%);
+  transition: opacity 0s ease 0s;
+}
+.planet-mercury {
+    left: -6px;
+    width: 10px;
+    height: 10px;
+    transition-duration: 1s;
+	background: #bcc1c9;
+}
+.planet-venus {
+    left: -8px;
+    width: 14px;
+    height: 14px;
+    transition-duration: 2s;
+    background: #ec5f24
+}
+.planet-earth {
+    left: -13px;
+    width: 24px;
+    height: 24px;
+	transition-duration: 3s;
+	z-index: 1;
+}
+.planet-mars {
+    left: -9px;
+    width: 18px;
+    height: 18px;
+    transition-duration: 4s;
+    background: #d83e3c;
+}
+.planet-asteroids {
+    left: -38px;
+    width: 308px;
+    height: 1500px;
+	  transition: all 5s ease 0s;
+}
+.planet-mercury:before {
+    content: "MERCURY";
+    color: #bcc1c9;
+    margin-left: 15px;
+    top: 0px;
+    position: absolute;
+    height: 10px;
+    line-height: 10px;
+}
+.planet-venus:before {
+    content: "VENUS";
+    color: #ec5f24;
+    margin-left: 21px;
+    top: 1px;
+    position: absolute;
+    height: 14px;
+    line-height: 14px;
+}
+.planet-earth:before {
+    content: "EARTH";
+    color: #54cbeb;
+    margin-left: 29px;
+    top: 1px;
+    position: absolute;
+    height: 24px;
+    line-height: 24px;
+}
+.planet-mars:before {
+    content: "MARS";
+    color: #d83e3c;
+    margin-left: 23px;
+    top: 1px;
+    position: absolute;
+    height: 18px;
+    line-height: 18px;
+}
+.planet-asteroids:before {
+    content: "ASTEROID BELT";
+    color: #666666;
+    margin-left: 8em;
+    top: 36.75%;
+    position: absolute;
+}
+.planet-mars:after, .planet-venus:after, .planet-mercury:after, .planet-earth:after {
+    content: "";
+    background: linear-gradient(105deg, rgba(0,0,0,1), rgba(0,0,0,0.6), transparent, transparent);
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    box-shadow: 0 0 3px 2px #ffffff26;
+	opacity: 0.8;
+	position: absolute;
+    top: 0;
+    left: 0;
+}
+.planet-earth:after {
+    box-shadow: 0 0 5px 3px #54cbeb5c;
+}
+.planet img {
+    width: 100%;
+}
+
+
+
+/*** SELECTED DAYS ***/
+
+.new-year-line, .winter-solstice-line {
+    width: 12em;
+    border-bottom: 2px dotted white;
+    position: absolute;
+    left: -13.35em;
+    top: 50%;
+    z-index: -1;
+    color: white;
+    margin-top: -13px;
+    margin-left: -50%;
+    height: 14px;
+	line-height: 1em;
+}
+.new-year-line:after, .winter-solstice-line:after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    display: block;
+    float: right;
+    position: absolute;
+    background: #ffffff00;
+    right: -28px;
+    top: -1px;
+    border: 2px dotted #fff;
+    border-radius: 100%;
+}
+.winter-solstice-line {
+	margin-top: 120px;
+    left: -12.05em;
+}
+#cronoNewYear, #cronoWinterSolstice {
+    left: 0;
+    position: absolute;
+    color: #fff;
+    width: 100%;
+    bottom: -17px;
+	font-size: 1.1em;
+}
+#cronoNewYear span, #cronoWinterSolstice span {
+	font-size: 0.75em;
+	color: #666;
+}
+
+
+
+/*** WARNING ***/
+
+#warning {
+    position: fixed;
+    left: 2em;
+    bottom: 2em;
+    background: rgb(0 0 0 / 0.75);
+    height: 5em;
+    width: 45em;
+    font-size: 1.35em;
+    color: #ffa200;
+    z-index: 3;
+    text-transform: uppercase;
+    padding: 0;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#warning:before {
+	content: " ! ";
+	z-index: 2;
+	font-size: 1.9em;
+	margin-left: 1.15em;
+	color: #ffa200;
+	font-weight: bold;
+	margin-top: 5px;
+}
+#warning:after {
+	content: "";
+	background: #ffa200;
+	position: absolute;
+	left: 0;
+	width: 5em;
+	height: 5em;
+	z-index: 0;
+}
+#warning p {
+    display: block !important;
+    float: left;
+    width: 100%;
+    margin: 0 !important;
+    padding-left: 2.5em;
+}
+#warning p:before {
+	content: "";
+	position: absolute;
+	z-index: 1;
+	border: 1.75em solid transparent;
+	border-bottom: 2.85em solid #040404;
+	left: 0.775em;
+	top: -0.75em;
+}
+#reload {
+    background: rgb(255 162 0);
+    border: 0;
+    border-radius: 1px;
+    padding: 0.5em 0.75em;
+    margin-left: 1.5em;
+	cursor: pointer;
+	outline: none;
+}
+#reload:hover {
+    background: #54cbeb;
+}
+
+
+
+/* ANIMATIONS */
+
+@-webkit-keyframes blinker {
+	0%   { opacity:0;   top:52.85%;}
+	40%  { opacity:1;   top:51%;   }
+	50%  { opacity:0;   top:51%;   }
+	60%  { opacity:1;   top:51%; }
+	100% { opacity:0;   top:48.25%;}
+}
+
+@keyframes blinker {
+	0%   { opacity:0;   top:52.85%;}
+	40%  { opacity:1;   top:51%;   }
+	50%  { opacity:0;   top:51%;   }
+	60%  { opacity:1;   top:51%; }
+	100% { opacity:0;   top:48.25%;}
+}
+@-webkit-keyframes spin {
+	from {transform: rotate(0deg) }
+	to {transform: rotate(-360deg);}
+}
+@keyframes spin {
+	from {transform: rotate(0deg) }
+	to {transform: rotate(-360deg);}
+}
\ No newline at end of file
diff --git a/countdown-to-new-year/license.txt b/countdown-to-new-year/license.txt
new file mode 100644
index 0000000..af704c8
--- /dev/null
+++ b/countdown-to-new-year/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Josetxu  (https://codepen.io/josetxu/pen/MWjJjBd)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/countdown-to-new-year/src/index.pug b/countdown-to-new-year/src/index.pug
new file mode 100644
index 0000000..52e72ab
--- /dev/null
+++ b/countdown-to-new-year/src/index.pug
@@ -0,0 +1,40 @@
+<div class="solar-system">
+
+	<div class="orbit orbit-sun"></div>
+	
+	<div class="orbit orbit-mercury" id="position-mercury">
+		<div class="planet planet-mercury" id="opacity-mercury">
+			<img src="https://josetxu.com/demos/img/mercury.png" alt="mercury">
+		</div>
+	</div>
+	
+	<div class="orbit orbit-venus" id="position-venus">
+		<div class="planet planet-venus" id="opacity-venus">
+			<img src="https://josetxu.com/demos/img/venus.png" alt="venus">
+		</div>
+	</div>
+	
+	<div class="orbit orbit-earth" id="position-earth">
+		<div class="planet planet-earth" id="opacity-earth">
+			<img src="https://josetxu.com/demos/img/earth.png" alt="earth">
+		</div>
+	</div>
+	
+	<div class="orbit orbit-mars" id="position-mars">
+		<div class="planet planet-mars" id="opacity-mars">
+			<img src="https://josetxu.com/demos/img/mars.png" alt="mars">
+		</div>
+	</div>
+	
+	<div class="orbit orbit-asteroids" id="position-asteroids">
+		<div class="planet planet-asteroids" id="opacity-asteroids">
+			<img src="https://josetxu.com/demos/img/asteroids-belt.png" alt="asteroids">
+		</div>
+	</div>
+	
+	<div class="new-year-line">NEW YEAR <span id='cronoNewYear'></span></div>
+	<div class="winter-solstice-line">WINTER SOLSTICE <span id="cronoWinterSolstice"></span></div>
+	
+</div>
+
+<div id="warning"><p>it seems that the earth has gone out of its orbit... <button id="reload" onclick="location.reload()">RE-ORBIT</button></p></div>
\ No newline at end of file
diff --git a/countdown-to-new-year/src/script.js b/countdown-to-new-year/src/script.js
new file mode 100644
index 0000000..29ecf99
--- /dev/null
+++ b/countdown-to-new-year/src/script.js
@@ -0,0 +1,56 @@
+//prevent loading error
+	document.getElementById('warning').remove();
+
+	//short getElementById
+	elem = function (id){ return document.getElementById(id); }
+	
+	//count until date
+	var newYearDate = new Date("Jan 1, 2021 00:00:00").getTime();
+	
+	//title angles
+	var todayDate = new Date().getTime();
+	var todaySecondsLeft = (newYearDate - todayDate) / 1000;
+	var todayDays = parseInt(todaySecondsLeft / 86400);
+	var randMer = Math.floor(Math.random() * (4 - 1 + 1)) + 1;
+	var randVen = Math.floor(Math.random() * (10 - 4 + 1)) + 4;
+	var randMar = Math.floor(Math.random() * (16 - 8 + 1)) + 8;
+	var style = document.createElement('style'); style.innerHTML = '.orbit-mercury {transform: translate(-50%, -50%) rotate('+randMer+'deg)} .orbit-venus {transform: translate(-50%, -50%) rotate('+randVen+'deg)} .orbit-mars {transform: translate(-50%, -50%) rotate('+randMar+'deg)} .planet-mercury {transform:rotate(-'+randMer+'deg)} .planet-venus {transform:rotate(-'+randVen+'deg)} .planet-mars {transform:rotate(-'+randMar+'deg)} .planet-earth {transform:rotate('+todayDays+'deg)} .planet-venus {transform:rotate(-'+randVen+'deg)} '; document.head.appendChild(style);
+	
+	//countdown vars
+	var days, hours, minutes, seconds;
+	
+	//countdown 
+	var countDown = setInterval(function() {
+
+		var rightNow = new Date().getTime();
+		var timeTo = newYearDate - rightNow;
+		
+		days = Math.floor(timeTo / (1000 * 60 * 60 * 24));
+		hours = Math.floor((timeTo % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+		minutes = Math.floor((timeTo % (1000 * 60 * 60)) / (1000 * 60));
+		seconds = Math.floor((timeTo % (1000 * 60)) / 1000);
+		
+		if(hours<10)hours="0"+hours; 
+        if(minutes<10)minutes="0"+minutes; 
+        if(seconds<10)seconds="0"+seconds; 
+		
+		elem("cronoNewYear").innerHTML = days + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";
+		var newDays;		
+		if (days<0){ elem("cronoNewYear").style.display='none';	newDays = days.toString().substr(1); } else { newDays="-"+days; }
+		elem("position-earth").style.transform = 'translate(-50%, -50%) rotate('+newDays+'deg';
+		
+		var solsDays;
+		var cDays=days-11;			
+		if (cDays<0){ elem("cronoWinterSolstice").style.display='none';	} else { solsDays=cDays	}
+		elem("cronoWinterSolstice").innerHTML = solsDays + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";
+		
+		var opacityList = document.querySelectorAll('.planet');
+		for(i=0;i<opacityList.length;i++){
+			opacityList[i].style.opacity = '1';
+		}
+		
+		if (timeTo < 0) {
+			clearInterval(countDown);
+		}
+		
+	}, 1000);
\ No newline at end of file
diff --git a/countdown-to-new-year/src/style.css b/countdown-to-new-year/src/style.css
new file mode 100644
index 0000000..efc529b
--- /dev/null
+++ b/countdown-to-new-year/src/style.css
@@ -0,0 +1,350 @@
+html {
+  box-sizing: border-box;
+}
+html *,
+html *:before,
+html *:after {
+  box-sizing: inherit;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  font-size: 62.5%;
+  background-color: #121212;
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.solar-system {
+  position: relative;
+  width: 100%;
+  max-width: 700px;
+  padding-top: 100%;
+  right: -50%;
+}
+
+@media (min-width: 700px) {
+  .solar-system {
+    padding-top: 700px;
+  }
+}
+
+
+/*** ORBITS ***/
+
+.orbit {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border: 2px dotted rgba(84 84 84 / 15%);
+  border-radius: 100%;
+  transform: translate(-50%, -50%);
+}
+.orbit-sun {
+    width: calc(50%);
+    height: calc(50%);
+	border: 1px dotted #ff6600;
+    background: #ffcc00;
+}
+.orbit-sun:before {
+    content: "";
+    background: #ff660017;
+    width: 99%;
+    height: 99%;
+    display: block;
+    margin-left: 0.5%;
+    margin-top: 0.5%;
+    border-radius: 100%;
+    box-shadow: 0 0 10em 5em #ff66006b, 0 0 100px 50px #ff66006b inset, 0 0 10px 5px #ffcc00f2;
+}
+.orbit.orbit-sun:after {
+    content: "SUN";
+    color: #ffa200;
+    top: 50%;
+    position: absolute;
+    left: -3.5em;
+}
+.orbit-mercury {
+	width: calc(100%);
+    height: calc(100%);
+	transform: translate(-50%, -50%);
+}
+.orbit-venus {
+	width: calc(150%);
+    height: calc(150%);
+	transform: translate(-50%, -50%);
+}
+.orbit-earth {
+	width: calc(200%);
+    height: calc(200%);
+}
+.orbit-earth:after {
+    content: "";
+    border: 2px solid red;
+    width: 1em;
+    height: 1em;
+    display: block;
+    position: relative;
+    border-color: #54cbeb #54cbeb transparent transparent;
+    transform: rotate(-50deg);
+    border-width: 2px 2px 0 0;
+    top: 52.75%;
+    left: -0.5em; 	
+	animation: blinker 2s linear infinite;
+}
+.orbit-mars {
+	width: calc(280%);
+    height: calc(280%);
+	transform: translate(-50%, -50%);
+}
+.orbit-asteroids {
+	width: calc(380%);
+    height: calc(380%);
+	transform: translate(-50%, -50%) rotate(0deg);
+}
+
+
+
+/*** PLANETS ***/
+
+.planet {
+  position: absolute;
+  top: 50%;
+  border-radius: 100%;
+  opacity: 0;
+  transform: translateY(-50%);
+  transition: opacity 0s ease 0s;
+}
+.planet-mercury {
+    left: -6px;
+    width: 10px;
+    height: 10px;
+    transition-duration: 1s;
+	background: #bcc1c9;
+}
+.planet-venus {
+    left: -8px;
+    width: 14px;
+    height: 14px;
+    transition-duration: 2s;
+    background: #ec5f24
+}
+.planet-earth {
+    left: -13px;
+    width: 24px;
+    height: 24px;
+	transition-duration: 3s;
+	z-index: 1;
+}
+.planet-mars {
+    left: -9px;
+    width: 18px;
+    height: 18px;
+    transition-duration: 4s;
+    background: #d83e3c;
+}
+.planet-asteroids {
+    left: -38px;
+    width: 308px;
+    height: 1500px;
+	  transition: all 5s ease 0s;
+}
+.planet-mercury:before {
+    content: "MERCURY";
+    color: #bcc1c9;
+    margin-left: 15px;
+    top: 0px;
+    position: absolute;
+    height: 10px;
+    line-height: 10px;
+}
+.planet-venus:before {
+    content: "VENUS";
+    color: #ec5f24;
+    margin-left: 21px;
+    top: 1px;
+    position: absolute;
+    height: 14px;
+    line-height: 14px;
+}
+.planet-earth:before {
+    content: "EARTH";
+    color: #54cbeb;
+    margin-left: 29px;
+    top: 1px;
+    position: absolute;
+    height: 24px;
+    line-height: 24px;
+}
+.planet-mars:before {
+    content: "MARS";
+    color: #d83e3c;
+    margin-left: 23px;
+    top: 1px;
+    position: absolute;
+    height: 18px;
+    line-height: 18px;
+}
+.planet-asteroids:before {
+    content: "ASTEROID BELT";
+    color: #666666;
+    margin-left: 8em;
+    top: 36.75%;
+    position: absolute;
+}
+.planet-mars:after, .planet-venus:after, .planet-mercury:after, .planet-earth:after {
+    content: "";
+    background: linear-gradient(105deg, rgba(0,0,0,1), rgba(0,0,0,0.6), transparent, transparent);
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    box-shadow: 0 0 3px 2px #ffffff26;
+	opacity: 0.8;
+	position: absolute;
+    top: 0;
+    left: 0;
+}
+.planet-earth:after {
+    box-shadow: 0 0 5px 3px #54cbeb5c;
+}
+.planet img {
+    width: 100%;
+}
+
+
+
+/*** SELECTED DAYS ***/
+
+.new-year-line, .winter-solstice-line {
+    width: 12em;
+    border-bottom: 2px dotted white;
+    position: absolute;
+    left: -13.35em;
+    top: 50%;
+    z-index: -1;
+    color: white;
+    margin-top: -13px;
+    margin-left: -50%;
+    height: 14px;
+	line-height: 1em;
+}
+.new-year-line:after, .winter-solstice-line:after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    display: block;
+    float: right;
+    position: absolute;
+    background: #ffffff00;
+    right: -28px;
+    top: -1px;
+    border: 2px dotted #fff;
+    border-radius: 100%;
+}
+.winter-solstice-line {
+	margin-top: 120px;
+    left: -12.05em;
+}
+#cronoNewYear, #cronoWinterSolstice {
+    left: 0;
+    position: absolute;
+    color: #fff;
+    width: 100%;
+    bottom: -17px;
+	font-size: 1.1em;
+}
+#cronoNewYear span, #cronoWinterSolstice span {
+	font-size: 0.75em;
+	color: #666;
+}
+
+
+
+/*** WARNING ***/
+
+#warning {
+    position: fixed;
+    left: 2em;
+    bottom: 2em;
+    background: rgb(0 0 0 / 0.75);
+    height: 5em;
+    width: 45em;
+    font-size: 1.35em;
+    color: #ffa200;
+    z-index: 3;
+    text-transform: uppercase;
+    padding: 0;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#warning:before {
+	content: " ! ";
+	z-index: 2;
+	font-size: 1.9em;
+	margin-left: 1.15em;
+	color: #ffa200;
+	font-weight: bold;
+	margin-top: 5px;
+}
+#warning:after {
+	content: "";
+	background: #ffa200;
+	position: absolute;
+	left: 0;
+	width: 5em;
+	height: 5em;
+	z-index: 0;
+}
+#warning p {
+    display: block !important;
+    float: left;
+    width: 100%;
+    margin: 0 !important;
+    padding-left: 2.5em;
+}
+#warning p:before {
+	content: "";
+	position: absolute;
+	z-index: 1;
+	border: 1.75em solid transparent;
+	border-bottom: 2.85em solid #040404;
+	left: 0.775em;
+	top: -0.75em;
+}
+#reload {
+    background: rgb(255 162 0);
+    border: 0;
+    border-radius: 1px;
+    padding: 0.5em 0.75em;
+    margin-left: 1.5em;
+	cursor: pointer;
+	outline: none;
+}
+#reload:hover {
+    background: #54cbeb;
+}
+
+
+
+/* ANIMATIONS */
+
+@keyframes blinker {
+	0%   { opacity:0;   top:52.85%;}
+	40%  { opacity:1;   top:51%;   }
+	50%  { opacity:0;   top:51%;   }
+	60%  { opacity:1;   top:51%; }
+	100% { opacity:0;   top:48.25%;}
+}
+@keyframes spin {
+	from {transform: rotate(0deg) }
+	to {transform: rotate(-360deg);}
+}
diff --git a/cpc-dropdown-slots/README.markdown b/cpc-dropdown-slots/README.markdown
new file mode 100644
index 0000000..a67008e
--- /dev/null
+++ b/cpc-dropdown-slots/README.markdown
@@ -0,0 +1,5 @@
+# [CPC] Dropdown Slots
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/z-/pen/ZEydQPx](https://codepen.io/z-/pen/ZEydQPx).
+
+It slightly stretches the definition of a dropdown, but it's a single input with a finite number of known valid options, that just require a click to get. It's closer to a dropdown than any other input.
diff --git a/cpc-dropdown-slots/dist/index.html b/cpc-dropdown-slots/dist/index.html
new file mode 100644
index 0000000..31f812a
--- /dev/null
+++ b/cpc-dropdown-slots/dist/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - [CPC] Dropdown Slots</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div>
+  <h1>Pick a Monster</h1>
+  <div id="dropdown">
+    <div class="dropdown">
+      <div class="wheel wheel1"></div>
+      <div class="wheel wheel2"></div>
+      <div class="wheel wheel3"></div>
+    </div>
+    <div class="tag">
+      <div class="arrow"></div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://codepen.io/z-/pen/jvReOb.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/cpc-dropdown-slots/dist/script.js b/cpc-dropdown-slots/dist/script.js
new file mode 100644
index 0000000..df2f0fe
--- /dev/null
+++ b/cpc-dropdown-slots/dist/script.js
@@ -0,0 +1,64 @@
+"use strict";
+//1 in 81 chance to get any valid option, 1 in 729 to get a particular option
+//16 in 81 chance to get only 2 in a row, 17 in 81 to get at least 2 in a row, 8 in 27 to get just 2 matching
+//56 in 81 all different
+//The tweet video was definitely faked, but can be seen winning here
+//https://twitter.com/Osorpenke/status/1445191696715821058
+let enabled = true;
+const items = 9;
+const wheels = [1, 2, 3].map((x) => document.querySelector(`#dropdown .dropdown .wheel${x}`));
+const tag = document.querySelector(`#dropdown .tag`);
+const dropdown = document.querySelector(`#dropdown .dropdown`);
+const dropdown_wrapper = document.getElementById(`dropdown`);
+const all_equal = ([head, ...tail] = []) => tail.every((x) => x == head);
+const round_and_modulus_numbers = (numbers, mod) => numbers.map((x) => Math.round(x) % items);
+const minimum_spins = 3;
+const state_increment = (current, index) => (minimum_spins + Math.random()) * items //minimum spins with 0-1 extra
+    * ((index + 2) / 3)
+    //Increases spins for wheels that also take longer spinning
+    + current;
+const row_height = 60; //Each row is 48 pixels with 12 pixel transition
+const background_position_value = (position) => Math.round(position) * row_height;
+const background_position = (position) => `${background_position_value(position)}px`;
+const before_every_spin = () => {
+    dropdown.classList.add(`show-gap`);
+    dropdown_wrapper.classList.remove(`valid`);
+    tag.classList.add(`disabled`);
+};
+const after_every_spin = (fn = () => { }) => {
+    fn();
+    tag.classList.remove(`disabled`);
+    enabled = true;
+};
+const run_after_spinning = (fn) => setTimeout(() => after_every_spin(fn), 5000);
+const run_after_shaking = (fn) => setTimeout(fn, 500);
+const spin = (state) => {
+    before_every_spin();
+    const next_state = state.map(state_increment);
+    wheels.forEach((el, i) => {
+        el.style.backgroundPositionY =
+            background_position(next_state[i]);
+    });
+    if (all_equal(round_and_modulus_numbers(next_state, items))) {
+        run_after_spinning(() => {
+            dropdown.classList.remove(`show-gap`);
+            dropdown_wrapper.classList.add(`valid`);
+        });
+    }
+    else {
+        run_after_spinning(() => {
+            dropdown_wrapper.classList.add(`shake`);
+            run_after_shaking(() => {
+                dropdown_wrapper.classList.remove(`shake`);
+            });
+        });
+    }
+    return next_state;
+};
+let state = [0, 0, 0];
+tag.addEventListener(`click`, () => {
+    if (!enabled)
+        return;
+    enabled = false;
+    state = spin(state);
+});
\ No newline at end of file
diff --git a/cpc-dropdown-slots/dist/style.css b/cpc-dropdown-slots/dist/style.css
new file mode 100644
index 0000000..bdec236
--- /dev/null
+++ b/cpc-dropdown-slots/dist/style.css
@@ -0,0 +1,164 @@
+body {
+  display: grid;
+  place-items: center;
+  height: 100vh;
+  font-family: "Poppins", sans-serif;
+}
+body h1 {
+  text-align: center;
+}
+body #dropdown {
+  display: flex;
+  --border-radius: 0.35rem;
+  --frame: #8e9094;
+  --border-thickness: 2px;
+  background: var(--frame);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  transition: 0.25s -0.1s;
+}
+body #dropdown.shake {
+  --frame: #d8334a;
+  -webkit-animation: shake 0.5s;
+          animation: shake 0.5s;
+}
+@-webkit-keyframes shake {
+  10% {
+    transform: translateX(0.5rem);
+  }
+  25% {
+    transform: translateX(-0.4rem);
+  }
+  40% {
+    transform: translateX(0.3rem);
+  }
+  65% {
+    transform: translateX(-0.2rem);
+  }
+  80% {
+    transform: translateX(0.1rem);
+  }
+  100% {
+    transform: translateX(0rem);
+  }
+}
+@keyframes shake {
+  10% {
+    transform: translateX(0.5rem);
+  }
+  25% {
+    transform: translateX(-0.4rem);
+  }
+  40% {
+    transform: translateX(0.3rem);
+  }
+  65% {
+    transform: translateX(-0.2rem);
+  }
+  80% {
+    transform: translateX(0.1rem);
+  }
+  100% {
+    transform: translateX(0rem);
+  }
+}
+body #dropdown:hover {
+  --frame: #717272;
+}
+body #dropdown.valid {
+  --frame: #a0d468;
+}
+body #dropdown.valid:hover {
+  --frame: #8cc152;
+}
+body #dropdown .tag {
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  position: relative;
+  width: 32px;
+  background: var(--frame);
+  transition: background 0.25s -0.1s;
+}
+body #dropdown .tag .arrow {
+  border: 0.5rem solid transparent;
+  border-top-color: white;
+  border-width: 0.8rem 0.4rem 0 0.4rem;
+  transform: translateY(0.1rem);
+}
+body #dropdown .tag.disabled {
+  cursor: wait;
+}
+body #dropdown .tag.disabled .arrow {
+  opacity: 0.25;
+}
+body #dropdown .dropdown {
+  display: flex;
+  width: 224px;
+  height: 48px;
+  border: 2px solid var(--frame);
+  transition: border-color 0.25s -0.1s;
+  border-radius: calc(var(--border-radius) - var(--border-thickness));
+  overflow: hidden;
+  pointer-events: none;
+}
+body #dropdown .dropdown .gap {
+  position: relative;
+  width: 0px;
+  transition: 0.05s;
+}
+body #dropdown .dropdown .wheel {
+  flex-grow: 20;
+  flex-basis: 0;
+  overflow: hidden;
+  border-radius: 0;
+  transition: 0.25s;
+  background: url(https://i.koya.io/codepen-dropdown.svg) white;
+}
+body #dropdown .dropdown .wheel .container {
+  position: relative;
+  width: 224px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+body #dropdown .dropdown .wheel .container > div {
+  display: grid;
+  place-items: center;
+  height: 48px;
+  width: 100%;
+  font-size: 2rem;
+  letter-spacing: 0.2rem;
+}
+body #dropdown .dropdown .wheel.wheel1 {
+  border-radius: calc(var(--border-radius) - var(--border-thickness)) 0 0 calc(var(--border-radius) - var(--border-thickness));
+  transition: background-position 3s cubic-bezier(0.3, 0, 0.1, 1), 0.25s border-radius;
+}
+body #dropdown .dropdown .wheel.wheel2 {
+  background-position-x: -74.6666666667px;
+  transition: background-position 4s cubic-bezier(0.3, 0, 0.1, 1), 0.25s border-radius, 0.25s box-shadow;
+}
+body #dropdown .dropdown .wheel.wheel3 {
+  background-position-x: -149.3333333333px;
+  border-radius: 0 calc(var(--border-radius) - var(--border-thickness)) calc(var(--border-radius) - var(--border-thickness)) 0;
+  transition: background-position 5s cubic-bezier(0.3, 0, 0.1, 1), 0.25s border-radius;
+}
+body #dropdown .dropdown.show-gap .wheel {
+  border-radius: calc(var(--border-radius) - var(--border-thickness));
+}
+body #dropdown .dropdown.show-gap .wheel.wheel1 {
+  box-shadow: inset -1px 0 var(--frame);
+}
+body #dropdown .dropdown.show-gap .wheel.wheel2 {
+  box-shadow: inset 1px 0 var(--frame), inset -1px 0 var(--frame);
+}
+body #dropdown .dropdown.show-gap .wheel.wheel2 .container {
+  left: -74.9966666667px;
+}
+body #dropdown .dropdown.show-gap .wheel.wheel3 {
+  box-shadow: inset 1px 0 var(--frame);
+}
+body #dropdown .dropdown.show-gap .wheel.wheel3 .container {
+  left: -149.9933333333px;
+}
\ No newline at end of file
diff --git a/cpc-dropdown-slots/license.txt b/cpc-dropdown-slots/license.txt
new file mode 100644
index 0000000..ad4e3bd
--- /dev/null
+++ b/cpc-dropdown-slots/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Zed Dash (https://codepen.io/z-/pen/ZEydQPx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/cpc-dropdown-slots/src/index.pug b/cpc-dropdown-slots/src/index.pug
new file mode 100644
index 0000000..ecd4ac4
--- /dev/null
+++ b/cpc-dropdown-slots/src/index.pug
@@ -0,0 +1,9 @@
+div
+  h1 Pick a Monster
+  #dropdown
+    .dropdown
+      .wheel.wheel1
+      .wheel.wheel2
+      .wheel.wheel3
+    .tag
+      .arrow
diff --git a/cpc-dropdown-slots/src/script.ts b/cpc-dropdown-slots/src/script.ts
new file mode 100644
index 0000000..f2874ea
--- /dev/null
+++ b/cpc-dropdown-slots/src/script.ts
@@ -0,0 +1,86 @@
+//1 in 81 chance to get any valid option, 1 in 729 to get a particular option
+//16 in 81 chance to get only 2 in a row, 17 in 81 to get at least 2 in a row, 8 in 27 to get just 2 matching
+//56 in 81 all different
+
+//The tweet video was definitely faked, but can be seen winning here
+//https://twitter.com/Osorpenke/status/1445191696715821058
+
+let enabled = true;
+
+const items = 9;
+const wheels: Element[] = [1, 2, 3].map((x) =>
+  document.querySelector(`#dropdown .dropdown .wheel${x}`)
+);
+const tag = document.querySelector(`#dropdown .tag`);
+const dropdown = document.querySelector(`#dropdown .dropdown`);
+const dropdown_wrapper = document.getElementById(`dropdown`);
+
+const all_equal = ([head, ...tail]: number[] = []) =>
+  tail.every((x) => x == head);
+const round_and_modulus_numbers =
+  (numbers: number[], mod:number) =>
+    numbers.map((x) => Math.round(x) % items);
+
+const minimum_spins = 3;
+const state_increment =
+  (current: number, index: number) =>
+    (minimum_spins + Math.random()) * items //minimum spins with 0-1 extra
+    * ((index + 2) / 3)
+      //Increases spins for wheels that also take longer spinning
+    + current;
+
+const row_height = 60; //Each row is 48 pixels with 12 pixel transition
+const background_position_value = (position: number) =>
+  Math.round(position) * row_height;
+const background_position = (position: number) =>
+  `${background_position_value(position)}px`;
+
+const before_every_spin = () => {
+  dropdown.classList.add(`show-gap`);
+  dropdown_wrapper.classList.remove(`valid`);
+  tag.classList.add(`disabled`);
+};
+const after_every_spin = (fn: function=()=>{}) => {
+  fn();
+  tag.classList.remove(`disabled`);
+  enabled = true;
+};
+const run_after_spinning = (fn: function) =>
+  setTimeout(() => after_every_spin(fn), 5000);
+const run_after_shaking = (fn: function) =>
+  setTimeout(fn, 500);
+
+const spin = (state: number[]) => {
+  before_every_spin();
+
+  const next_state =
+    state.map(state_increment);
+
+  wheels.forEach((el, i) => {
+    el.style.backgroundPositionY =
+      background_position(next_state[i]);
+  });
+
+  if (all_equal(round_and_modulus_numbers(next_state, items))) {
+    run_after_spinning(() => {
+      dropdown.classList.remove(`show-gap`);
+      dropdown_wrapper.classList.add(`valid`);
+    });
+  } else {
+    run_after_spinning(() => {
+      dropdown_wrapper.classList.add(`shake`);
+      run_after_shaking(() => {
+        dropdown_wrapper.classList.remove(`shake`);
+      });
+    });
+  }
+
+  return next_state;
+};
+
+let state = [0, 0, 0];
+tag.addEventListener(`click`, () => {
+  if (!enabled) return;
+  enabled = false;
+  state = spin(state);
+});
diff --git a/cpc-dropdown-slots/src/style.scss b/cpc-dropdown-slots/src/style.scss
new file mode 100644
index 0000000..3087040
--- /dev/null
+++ b/cpc-dropdown-slots/src/style.scss
@@ -0,0 +1,163 @@
+body {
+  display: grid;
+  place-items: center;
+  height: 100vh;
+  font-family: "Poppins", sans-serif;
+  h1 {
+    text-align: center;
+  }
+  #dropdown {
+    display: flex;
+    $width: 224px; //These aren't CSS variables because the wheel images require this size
+    $height: 48px;
+    --border-radius: 0.35rem;
+    --frame: #8e9094;
+    --border-thickness: 2px;
+    background: var(--frame);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    transition:.25s -.1s;
+    &.shake {
+      --frame: #d8334a;
+      animation: shake 0.5s;
+    }
+    @keyframes shake {
+      10% {
+        transform: translateX(0.5rem);
+      }
+      25% {
+        transform: translateX(-0.4rem);
+      }
+      40% {
+        transform: translateX(0.3rem);
+      }
+      65% {
+        transform: translateX(-0.2rem);
+      }
+      80% {
+        transform: translateX(0.1rem);
+      }
+      100% {
+        transform: translateX(0rem);
+      }
+    }
+    &:hover {
+      --frame: #717272;
+    }
+    &.valid {
+      --frame: #a0d468;
+      &:hover {
+        --frame: #8cc152;
+      }
+    }
+    .tag {
+      display: grid;
+      place-items: center;
+      cursor: pointer;
+      position: relative;
+      width: $height / 1.5;
+      background: var(--frame);
+      transition: background 0.25s -.1s;
+      .arrow {
+        //position: absolute;
+        border: 0.5rem solid transparent;
+        border-top-color: white;
+        border-width: 0.8rem 0.4rem 0 0.4rem;
+        transform: translateY(0.1rem);
+      }
+      &.disabled {
+        cursor: wait;
+        .arrow {
+          opacity: 0.25;
+        }
+      }
+    }
+    .dropdown {
+      display: flex;
+      width: $width;
+      height: $height;
+      border: 2px solid var(--frame);
+      transition: border-color 0.25s -.1s;
+      border-radius: calc(var(--border-radius) - var(--border-thickness));
+      overflow: hidden;
+      pointer-events: none;
+      .gap {
+        position: relative;
+        width: 0px;
+        transition: 0.05s;
+      }
+      .wheel {
+        flex-grow: 20;
+        flex-basis: 0;
+        overflow: hidden;
+        border-radius: 0;
+        transition: 0.25s;
+        background: url(https://i.koya.io/codepen-dropdown.svg) white;
+          //I disagree about this being cheating. The wheels spinning just move the background image which wraps.
+          //You can zoom into the page and it's still crisp due to it being an SVG
+        .container {
+          position: relative;
+          width: $width;
+          user-select: none;
+          > div {
+            display: grid;
+            place-items: center;
+            height: $height;
+            width: 100%;
+            font-size: 2rem;
+            letter-spacing: 0.2rem;
+          }
+        }
+        $spin-easing: cubic-bezier(0.3, 0, 0.1, 1);
+        &.wheel1 {
+          border-radius: 
+            calc(var(--border-radius) - var(--border-thickness))
+            0
+            0
+            calc(var(--border-radius) - var(--border-thickness));
+          transition:
+            background-position 3s $spin-easing,
+            0.25s border-radius;
+        }
+        &.wheel2 {
+          background-position-x: $width / -3;
+          transition:
+            background-position 4s $spin-easing,
+            0.25s border-radius,
+            0.25s box-shadow;
+        }
+        &.wheel3 {
+          background-position-x: $width / -1.5;
+          border-radius:
+            0
+            calc(var(--border-radius) - var(--border-thickness))
+            calc(var(--border-radius) - var(--border-thickness))
+            0;
+          transition:
+            background-position 5s $spin-easing,
+            0.25s border-radius;
+        }
+      }
+      &.show-gap {
+        .wheel {
+          border-radius: calc(var(--border-radius) - var(--border-thickness));
+          &.wheel1 {
+            box-shadow: inset -1px 0 var(--frame);
+          }
+          &.wheel2 {
+            box-shadow: inset 1px 0 var(--frame), inset -1px 0 var(--frame);
+            .container {
+              left: ($width / -3) - 0.33px;
+            }
+          }
+          &.wheel3 {
+            box-shadow: inset 1px 0 var(--frame);
+            .container {
+              left: ($width / -1.5) - 0.66px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/cqw-font-sizes/LICENSE.txt b/cqw-font-sizes/LICENSE.txt
new file mode 100644
index 0000000..53a7152
--- /dev/null
+++ b/cqw-font-sizes/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Jake Archibald (https://codepen.io/jaffathecake/pen/BaGLPGv)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/cqw-font-sizes/README.md b/cqw-font-sizes/README.md
new file mode 100644
index 0000000..9b5e94f
--- /dev/null
+++ b/cqw-font-sizes/README.md
@@ -0,0 +1,4 @@
+# CQW font sizes
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jaffathecake/pen/BaGLPGv](https://codepen.io/jaffathecake/pen/BaGLPGv).
+
diff --git a/cqw-font-sizes/dist/index.html b/cqw-font-sizes/dist/index.html
new file mode 100644
index 0000000..f474464
--- /dev/null
+++ b/cqw-font-sizes/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CQW font sizes</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="demo">
+  <div class="text">Hello!</div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/cqw-font-sizes/dist/style.css b/cqw-font-sizes/dist/style.css
new file mode 100644
index 0000000..87838af
--- /dev/null
+++ b/cqw-font-sizes/dist/style.css
@@ -0,0 +1,19 @@
+.demo {
+  container-type: inline-size; 
+}
+
+.text {
+  font-size: 35cqw;
+}
+
+html {
+  background: #ccc;
+}
+
+.demo {
+  background: #fff;
+  padding: 10px;
+  resize: both;
+  overflow: hidden;
+  width: 200px;
+}
\ No newline at end of file
diff --git a/cqw-font-sizes/src/index.html b/cqw-font-sizes/src/index.html
new file mode 100644
index 0000000..8fb5ef5
--- /dev/null
+++ b/cqw-font-sizes/src/index.html
@@ -0,0 +1,3 @@
+<div class="demo">
+  <div class="text">Hello!</div>
+</div>
\ No newline at end of file
diff --git a/cqw-font-sizes/src/style.css b/cqw-font-sizes/src/style.css
new file mode 100644
index 0000000..87838af
--- /dev/null
+++ b/cqw-font-sizes/src/style.css
@@ -0,0 +1,19 @@
+.demo {
+  container-type: inline-size; 
+}
+
+.text {
+  font-size: 35cqw;
+}
+
+html {
+  background: #ccc;
+}
+
+.demo {
+  background: #fff;
+  padding: 10px;
+  resize: both;
+  overflow: hidden;
+  width: 200px;
+}
\ No newline at end of file
diff --git a/crazy-4/README.markdown b/crazy-4/README.markdown
new file mode 100644
index 0000000..c1e6bbb
--- /dev/null
+++ b/crazy-4/README.markdown
@@ -0,0 +1,4 @@
+# Crazy 4
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/Mamboleoo/pen/BWMyZr](https://codepen.io/Mamboleoo/pen/BWMyZr).
+
+ 
\ No newline at end of file
diff --git a/crazy-4/dist/index.html b/crazy-4/dist/index.html
new file mode 100644
index 0000000..af7a7c4
--- /dev/null
+++ b/crazy-4/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Crazy 4</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas></canvas>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/crazy-4/dist/script.js b/crazy-4/dist/script.js
new file mode 100644
index 0000000..dd27ce1
--- /dev/null
+++ b/crazy-4/dist/script.js
@@ -0,0 +1,125 @@
+//Get window size
+var ww = window.innerWidth,
+  wh = window.innerHeight;
+
+//Create a WebGL renderer
+var renderer = new THREE.WebGLRenderer({
+  canvas: document.querySelector("canvas")
+});
+renderer.setSize(ww, wh);
+
+//Create an empty scene
+var scene = new THREE.Scene();
+scene.fog = new THREE.Fog(0x000000, 30, 150);
+
+//Create a perpsective camera
+var camera = new THREE.PerspectiveCamera(45, ww / wh, 0.1, 150);
+camera.position.y = 400;
+camera.position.z = 400;
+
+//Array of points
+var points = [
+  [68.5, 185.5],
+  [1, 262.5],
+  [270.9, 281.9],
+  [345.5, 212.8],
+  [178, 155.7],
+  [240.3, 72.3],
+  [153.4, 0.6],
+  [52.6, 53.3],
+  [68.5, 185.5]
+];
+
+//Convert the array of points into vertices
+for (var i = 0; i < points.length; i++) {
+  var x = points[i][0];
+  var y = Math.random() * 100;
+  var z = points[i][1];
+  points[i] = new THREE.Vector3(x, y, z);
+}
+//Create a path from the points
+var path = new THREE.CatmullRomCurve3(points);
+path.closed = true;
+
+// Define the precision of the finale tube, the amount of divisions
+var tubeDetail = 1600;
+// Define the precision of the circles
+var circlesDetail = 40;
+
+// Define the radius of the finale tube
+var radius = 4;
+// Get all the circles that will compose the tube
+var frames = path.computeFrenetFrames(tubeDetail, true);
+
+// Create an empty Geometry where we will put the particles
+var geometry = new THREE.Geometry();
+
+// Define a basic color
+var color = new THREE.Color(0x000000);
+
+// First loop through all the circles
+for (var i = 0; i < tubeDetail; i++) {
+  // Get the normal values for each circle
+  var normal = frames.normals[i];
+  // Get the binormal values
+  var binormal = frames.binormals[i];
+
+  // Calculate the index of the circle (from 0 to 1)
+  var index = i / tubeDetail;
+  // Get the coordinates of the point in the center of the circle
+  var p = path.getPointAt(index);
+
+  // Loop for the amount of particles we want along each circle
+  for (var j = 0; j < circlesDetail; j++) {
+    // Clone the position of the point in the center
+    var position = p.clone();
+
+    // Calculate the angle for each particle along the circle (from 0 to Pi*2)
+    var angle = (j / circlesDetail) * Math.PI * 2 + (index * Math.PI * 5);
+    // Calculate the sine of the angle
+    var sin = Math.sin(angle);
+    // Calculate the cosine from the angle
+    var cos = -Math.cos(angle);
+
+    // Calculate the normal of each point based on its angle
+    var normalPoint = new THREE.Vector3(0, 0, 0);
+    normalPoint.x = (cos * normal.x + sin * binormal.x);
+    normalPoint.y = (cos * normal.y + sin * binormal.y);
+    normalPoint.z = (cos * normal.z + sin * binormal.z);
+    // Multiple the normal by the radius
+    normalPoint.multiplyScalar(radius);
+
+    // We add the normal values for each point
+    position.add(normalPoint);
+    var color = new THREE.Color("hsl(" + (index * 360 * 4) + ", 100%, 50%)");
+    geometry.colors.push(color);
+    geometry.vertices.push(position);
+  }
+}
+
+// Material for the points
+var material = new THREE.PointsMaterial({
+  size: 0.2,
+  vertexColors: THREE.VertexColors
+});
+
+var tube = new THREE.Points(geometry, material);
+//Add tube into the scene
+scene.add(tube);
+
+var percentage = 0;
+
+function render() {
+
+  percentage += 0.0005;
+  var p1 = path.getPointAt(percentage % 1);
+  var p2 = path.getPointAt((percentage + 0.01) % 1);
+  camera.position.set(p1.x, p1.y, p1.z);
+  camera.lookAt(p2);
+
+  //Render the scene
+  renderer.render(scene, camera);
+
+  requestAnimationFrame(render);
+}
+requestAnimationFrame(render);
\ No newline at end of file
diff --git a/crazy-4/dist/style.css b/crazy-4/dist/style.css
new file mode 100644
index 0000000..413c2ed
--- /dev/null
+++ b/crazy-4/dist/style.css
@@ -0,0 +1,11 @@
+body{
+  overflow: hidden;
+  margin:0;
+}
+canvas{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height:100%;
+}
\ No newline at end of file
diff --git a/crazy-4/license.txt b/crazy-4/license.txt
new file mode 100644
index 0000000..f2f2368
--- /dev/null
+++ b/crazy-4/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Louis Hoebregts (https://codepen.io/Mamboleoo/pen/BWMyZr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/crazy-4/src/index.html b/crazy-4/src/index.html
new file mode 100644
index 0000000..c733673
--- /dev/null
+++ b/crazy-4/src/index.html
@@ -0,0 +1 @@
+<canvas></canvas>
\ No newline at end of file
diff --git a/crazy-4/src/script.js b/crazy-4/src/script.js
new file mode 100644
index 0000000..dd27ce1
--- /dev/null
+++ b/crazy-4/src/script.js
@@ -0,0 +1,125 @@
+//Get window size
+var ww = window.innerWidth,
+  wh = window.innerHeight;
+
+//Create a WebGL renderer
+var renderer = new THREE.WebGLRenderer({
+  canvas: document.querySelector("canvas")
+});
+renderer.setSize(ww, wh);
+
+//Create an empty scene
+var scene = new THREE.Scene();
+scene.fog = new THREE.Fog(0x000000, 30, 150);
+
+//Create a perpsective camera
+var camera = new THREE.PerspectiveCamera(45, ww / wh, 0.1, 150);
+camera.position.y = 400;
+camera.position.z = 400;
+
+//Array of points
+var points = [
+  [68.5, 185.5],
+  [1, 262.5],
+  [270.9, 281.9],
+  [345.5, 212.8],
+  [178, 155.7],
+  [240.3, 72.3],
+  [153.4, 0.6],
+  [52.6, 53.3],
+  [68.5, 185.5]
+];
+
+//Convert the array of points into vertices
+for (var i = 0; i < points.length; i++) {
+  var x = points[i][0];
+  var y = Math.random() * 100;
+  var z = points[i][1];
+  points[i] = new THREE.Vector3(x, y, z);
+}
+//Create a path from the points
+var path = new THREE.CatmullRomCurve3(points);
+path.closed = true;
+
+// Define the precision of the finale tube, the amount of divisions
+var tubeDetail = 1600;
+// Define the precision of the circles
+var circlesDetail = 40;
+
+// Define the radius of the finale tube
+var radius = 4;
+// Get all the circles that will compose the tube
+var frames = path.computeFrenetFrames(tubeDetail, true);
+
+// Create an empty Geometry where we will put the particles
+var geometry = new THREE.Geometry();
+
+// Define a basic color
+var color = new THREE.Color(0x000000);
+
+// First loop through all the circles
+for (var i = 0; i < tubeDetail; i++) {
+  // Get the normal values for each circle
+  var normal = frames.normals[i];
+  // Get the binormal values
+  var binormal = frames.binormals[i];
+
+  // Calculate the index of the circle (from 0 to 1)
+  var index = i / tubeDetail;
+  // Get the coordinates of the point in the center of the circle
+  var p = path.getPointAt(index);
+
+  // Loop for the amount of particles we want along each circle
+  for (var j = 0; j < circlesDetail; j++) {
+    // Clone the position of the point in the center
+    var position = p.clone();
+
+    // Calculate the angle for each particle along the circle (from 0 to Pi*2)
+    var angle = (j / circlesDetail) * Math.PI * 2 + (index * Math.PI * 5);
+    // Calculate the sine of the angle
+    var sin = Math.sin(angle);
+    // Calculate the cosine from the angle
+    var cos = -Math.cos(angle);
+
+    // Calculate the normal of each point based on its angle
+    var normalPoint = new THREE.Vector3(0, 0, 0);
+    normalPoint.x = (cos * normal.x + sin * binormal.x);
+    normalPoint.y = (cos * normal.y + sin * binormal.y);
+    normalPoint.z = (cos * normal.z + sin * binormal.z);
+    // Multiple the normal by the radius
+    normalPoint.multiplyScalar(radius);
+
+    // We add the normal values for each point
+    position.add(normalPoint);
+    var color = new THREE.Color("hsl(" + (index * 360 * 4) + ", 100%, 50%)");
+    geometry.colors.push(color);
+    geometry.vertices.push(position);
+  }
+}
+
+// Material for the points
+var material = new THREE.PointsMaterial({
+  size: 0.2,
+  vertexColors: THREE.VertexColors
+});
+
+var tube = new THREE.Points(geometry, material);
+//Add tube into the scene
+scene.add(tube);
+
+var percentage = 0;
+
+function render() {
+
+  percentage += 0.0005;
+  var p1 = path.getPointAt(percentage % 1);
+  var p2 = path.getPointAt((percentage + 0.01) % 1);
+  camera.position.set(p1.x, p1.y, p1.z);
+  camera.lookAt(p2);
+
+  //Render the scene
+  renderer.render(scene, camera);
+
+  requestAnimationFrame(render);
+}
+requestAnimationFrame(render);
\ No newline at end of file
diff --git a/crazy-4/src/style.css b/crazy-4/src/style.css
new file mode 100644
index 0000000..413c2ed
--- /dev/null
+++ b/crazy-4/src/style.css
@@ -0,0 +1,11 @@
+body{
+  overflow: hidden;
+  margin:0;
+}
+canvas{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height:100%;
+}
\ No newline at end of file
diff --git a/crossing-walls/README.markdown b/crossing-walls/README.markdown
new file mode 100644
index 0000000..3ddeed8
--- /dev/null
+++ b/crossing-walls/README.markdown
@@ -0,0 +1,7 @@
+# Crossing walls
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Dillo/pen/abvxwGN](https://codepen.io/Dillo/pen/abvxwGN).
+
+Maybe my most pointless pen.  
+The idea seemed funny and rather easy to do, so I did it.  
+
diff --git a/crossing-walls/dist/index.html b/crossing-walls/dist/index.html
new file mode 100644
index 0000000..14ffce9
--- /dev/null
+++ b/crossing-walls/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Crossing walls</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- click to restart -->
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/crossing-walls/dist/script.js b/crossing-walls/dist/script.js
new file mode 100644
index 0000000..cc5fef4
--- /dev/null
+++ b/crossing-walls/dist/script.js
@@ -0,0 +1,519 @@
+"use strict";
+
+window.addEventListener("load",function() {
+
+  const nbCells = 5 ; // min number of cells in height or width
+  const bgColor = '#004';
+  const rayBallMin = 0.3; // relative to apoHex
+  const rayBallMax = 0.8; // relative to apoHex (< 1)
+  const speed = 0.03;
+
+  let canv, ctx;   // canvas and context : global variables (I know :( )
+  let ctxGrid, canvGrid;
+  let maxx, maxy;  // canvas sizes (in pixels)
+  let nbx, nby;    // number of columns / rows
+  let grid;
+  let rayHex;       // Hexagon side
+  let apoHex;       // apothem
+  let nbBalls;
+  let balls;
+
+// for animation
+  let events = [];
+  let mouse = {x:0, y:0};
+  let explorers; // array of alive Explorers
+
+// shortcuts for Math.
+
+  const mrandom = Math.random;
+  const mfloor = Math.floor;
+  const mround = Math.round;
+  const mceil = Math.ceil;
+  const mabs = Math.abs;
+  const mmin = Math.min;
+  const mmax = Math.max;
+
+  const mPI = Math.PI;
+  const mPIS2 = Math.PI / 2;
+  const m2PI = Math.PI * 2;
+  const msin = Math.sin;
+  const mcos = Math.cos;
+  const matan2 = Math.atan2;
+  const mtan = Math.tan;
+
+  const mhypot = Math.hypot;
+  const msqrt = Math.sqrt;
+
+  const rac3   = msqrt(3);
+  const rac3s2 = rac3 / 2;
+  const mPIS3 = Math.PI / 3;
+
+//-----------------------------------------------------------------------------
+  function alea (min, max) {
+// random number [min..max[ . If no max is provided, [0..min[
+
+    if (typeof max == 'undefined') return min * mrandom();
+    return min + (max - min) * mrandom();
+  }
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+  function intAlea (min, max) {
+// random integer number [min..max[ . If no max is provided, [0..min[
+
+    if (typeof max == 'undefined') {
+      max = min; min = 0;
+    }
+    return mfloor(min + (max - min) * mrandom());
+  } // intAlea
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+function Noise1DOneShot (period, min = 0, max = 1, random) {
+/* returns a 1D single-shot noise generator.
+   the (optional) random function must return a value between 0 and 1
+  the returned function has no parameter, and will return a new number every tiime it is called.
+  If the random function provides reproductible values (and is not used elsewhere), this
+  one will return reproductible values too.
+  period should be > 1. The bigger period is, the smoother output noise is
+*/
+  random = random || Math.random;
+  let currx = random(); // start with random offset
+  let y0 = min + (max - min) * random(); // 'previous' value
+  let y1 = min + (max - min) * random(); // 'next' value
+  let dx = 1 / period;
+
+  return function() {
+    currx += dx;
+    if (currx > 1) {
+      currx -= 1;
+      y0 = y1;
+      y1 = min + (max - min) * random();
+    }
+    let z = (3 - 2 * currx) * currx * currx;
+    return z * y1 + (1 - z) * y0;
+  }
+} // Noise1DOneShot
+
+//------------------------------------------------------------------------
+// class Hexagon
+let Hexagon;
+{ // scope for Hexagon
+
+let vertices;
+let orgx, orgy;
+
+Hexagon = function (kx, ky) {
+
+  this.kx = kx;
+  this.ky = ky;
+  this.neighbours = [];
+
+} // function Hexagon
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/* static method */
+
+Hexagon.dimensions = function () {
+// coordinates of center of hexagon [0][0]
+  orgx = (maxx - rayHex * (1.5 * nbx + 0.5)) / 2  + rayHex; // obvious, no ?
+  orgy = (maxy - (rayHex * rac3 * (nby + 0.5))) / 2 + rayHex * rac3; // yet more obvious
+
+/* position of hexagon vertices, relative to its center */
+  vertices = [[],[],[],[],[],[]] ;
+// x coordinates, from left to right
+  vertices[3][0] = - (rayHex + 0.5);
+  vertices[2][0] = vertices[4][0] = - (rayHex + 0.5) / 2;
+  vertices[1][0] = vertices[5][0] = + (rayHex + 0.5) / 2;
+  vertices[0][0] = (rayHex + 0.5);
+// y coordinates, from top to bottom
+  vertices[4][1] = vertices[5][1] = - (rayHex + 0.5) * rac3s2;
+  vertices[0][1] = vertices[3][1] = 0;
+  vertices[1][1] = vertices[2][1] = (rayHex + 0.5) * rac3s2;
+
+  Hexagon.dirx = [rac3s2, 0, - rac3s2, - rac3s2, 0, rac3s2];
+  Hexagon.diry = [0.5, 1, 0.5, - 0.5, -1, - 0.5];
+} // Hexagon.dimensions
+
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.size = function() {
+/* computes screen sizes / positions
+*/
+// centre
+  this.xc = orgx + this.kx * 1.5 * rayHex;
+  this.yc = orgy + this.ky * rayHex * rac3;
+  if (this.kx & 1) this.yc -= rayHex * rac3s2; // odd columns
+
+  this.vertices = [[],[],[],[],[],[]] ;
+  this.middles = [[],[],[],[],[],[]];
+
+// x coordinates of this hexagon vertices
+  this.vertices[3][0] = this.xc + vertices[3][0];
+  this.vertices[2][0] = this.vertices[4][0] = this.xc + vertices[2][0];
+  this.vertices[1][0] = this.vertices[5][0] = this.xc + vertices[1][0];;
+  this.vertices[0][0] = this.xc + vertices[0][0];;
+// y coordinates of this hexagon vertices
+  this.vertices[4][1] = this.vertices[5][1] = this.yc + vertices[4][1];
+  this.vertices[0][1] = this.vertices[3][1] = this.yc + vertices[0][1];
+  this.vertices[1][1] = this.vertices[2][1] = this.yc + vertices[1][1];
+
+  for (let k = 0; k < 6; ++k) {
+    this.middles[k] = [(this.vertices[k][0] + this.vertices[(k + 1) % 6][0]) / 2,
+                       (this.vertices[k][1] + this.vertices[(k + 1) % 6][1]) / 2];
+  } // for k
+
+} // Hexagon.prototype.size
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawHexagon = function(fill, stroke, width = 1) {
+
+  if (! this.vertices) this.size();
+
+  ctxGrid.globalCompositeOperation = 'source-over'; // normal
+  ctxGrid.beginPath();
+  ctxGrid.moveTo (this.vertices[0][0], this.vertices[0][1]);
+  ctxGrid.lineTo (this.vertices[1][0], this.vertices[1][1]);
+  ctxGrid.lineTo (this.vertices[2][0], this.vertices[2][1]);
+  ctxGrid.lineTo (this.vertices[3][0], this.vertices[3][1]);
+  ctxGrid.lineTo (this.vertices[4][0], this.vertices[4][1]);
+  ctxGrid.lineTo (this.vertices[5][0], this.vertices[5][1]);
+  ctxGrid.lineTo (this.vertices[0][0], this.vertices[0][1]);
+  if (fill) {
+    ctxGrid.fillStyle = fill;
+    ctxGrid.fill();
+  }
+  if (stroke) {
+    ctxGrid.strokeStyle = stroke;
+    ctxGrid.lineWidth = 2;
+    ctxGrid.stroke();
+  }
+  ctxGrid.globalCompositeOperation = 'destination-out';
+  for (let side = 0; side < 6 ; ++side) {
+    if (this.neighbour(side)) {
+      ctxGrid.beginPath();
+      ctxGrid.fillStyle = 'rgba(0,0,0,1)'; // seems to not matter
+      ctxGrid.arc(this.middles[side][0], this.middles[side][1], 3,0, m2PI);
+      ctxGrid.fill();
+    }
+  }
+} // Hexagon.prototype.drawHexagon
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawSide = function(side, hue) {
+
+let s2 = (side + 1) % 6;
+
+  if (! this.vertices) this.size();
+
+  let ctxGrid = ctx;
+    ctxGrid.beginPath();
+
+    ctxGrid.moveTo (this.vertices[side][0], this.vertices[side][1]);
+    ctxGrid.lineTo (this.vertices[s2][0], this.vertices[s2][1]);
+    ctxGrid.strokeStyle = `hsl(${hue},100%,60%)`;
+    ctxGrid.lineWidth = 1;
+//    ctxGrid.fillStyle = `hsl(${hue},100%,60%)`;
+    ctxGrid.stroke();
+} // Hexagon.prototype.drawHexagon
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+/* returns a cell's neighbour
+  keep track of it for future request
+  defines itself as its neighbour's neighbour to reduce calculations
+
+  returns false if no neighbour
+*/
+
+Hexagon.prototype.neighbour = function(side) {
+
+  let neigh = this.neighbours[side];
+  if (neigh instanceof(Hexagon)) return neigh; // known neighbour
+  if (neigh === false) return false; // known for no neighbour
+//  do not know yet
+
+  if (this.kx & 1) {
+    neigh =  {kx: this.kx + [1, 0, -1, -1, 0, 1][side],
+              ky: this.ky + [0, 1, 0, -1, -1, -1][side]};
+  } else {
+    neigh = {kx: this.kx + [1, 0, -1, -1, 0, 1][side],
+             ky: this.ky + [1, 1, 1, 0, -1, 0][side]};
+  }
+  if (neigh.kx < 0 || neigh.ky <0 || neigh.kx >= nbx || neigh.ky >= nby) {
+    this.neighbours[side] = false;
+    return false;
+  }
+  neigh = grid[neigh.ky][neigh.kx];
+  this.neighbours[side] = neigh;
+  neigh.neighbours[(side + 3) % 6] = this;
+  return neigh;
+
+} // Hexagon.prototype.neighbour
+
+} // scope for Hexagon
+
+//------------------------------------------------------------------------
+//------------------------------------------------------------------------
+
+function Ball() {
+/* creates a random ball */
+  this.radius = apoHex * alea(rayBallMin, rayBallMax);
+  do {
+    this.kx = intAlea(nbx);
+    this.ky = intAlea(nby);
+    this.cell = grid[this.ky][this.kx];
+    this.comesFrom = intAlea(6); // takes a random 'comesFrom' side
+  } while (this.cell.neighbour(this.comesFrom) === false || this.cell.occupied);
+  this.state = 0; // initial state : center of cell, not chosen direction yet
+  this.retries = 0;
+  this.cell.occupied = true;
+  this.hue = intAlea(360);
+  this.hueNoise = Noise1DOneShot(1000, -1, 1);
+} //
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Ball.prototype.move = function() {
+
+  let dir, neigh, nTries;
+  let xc, yc;
+  let r1, r2;
+
+  this.hue += this.hueNoise();
+  this.hue = (this.hue + 360) % 360;
+  
+  ctx.fillStyle = `hsl(${this.hue},100%,50%)`;
+
+  switch (this.state) {
+    case 0:
+
+      ctx.beginPath();
+      ctx.arc(this.cell.xc, this.cell.yc, this.radius, 0, m2PI);
+      ctx.fill();
+
+      nTries = 0;
+      do {
+        dir = (this.comesFrom + 3 + [-2, -1, -1, 0, 0, 0, 1, 1, 2][intAlea(9)]) % 6;
+        neigh = this.cell.neighbour(dir);
+        if (neigh.occupied) neigh = false; // not acceptable
+        ++ nTries;
+      } while (neigh === false && nTries < 30);
+      if (neigh === false) {
+        dir = this.comesFrom;
+        neigh = this.cell.neighbour(dir);
+        if (neigh.occupied) break;
+      }
+      this.state++;
+      this.dC = 0;      // distance to center of hexagon
+      this.dir = dir;
+      neigh.occupied = true;
+      break;
+
+    case 1:
+      this.dC += rayHex * speed; // movement
+      if (this.dC + this.radius >= apoHex) {
+        this.dC = (apoHex - this.radius);
+        this.state = 2;
+        this.alphaCross = 0;
+      }
+      xc = this.cell.xc + Hexagon.dirx[this.dir] * this.dC;
+      yc = this.cell.yc + Hexagon.diry[this.dir] * this.dC;
+      ctx.beginPath();
+      ctx.arc(xc, yc, this.radius, 0, m2PI);
+      ctx.fill();
+      break;
+
+    case 2:         // crossing side
+      this.alphaCross += speed / 2; // more slowly !
+      if (this.alphaCross >= 1) {
+        this.state = 3;
+        this.alphaCross = 1;
+        this.dC = apoHex + this.radius;
+      }
+      r1 = this.radius * msqrt(1 - this.alphaCross * this.alphaCross);
+      r2 = this.radius * this.alphaCross;
+      ctx.beginPath();
+      if (r1 > 0.5) {
+        xc = this.cell.middles[this.dir][0] - r1 * Hexagon.dirx[this.dir];
+        yc = this.cell.middles[this.dir][1] - r1 * Hexagon.diry[this.dir];
+        ctx.arc(xc, yc, r1, 0, m2PI);
+      }
+      if (r2 > 0.5) {
+        xc = this.cell.middles[this.dir][0] + r2 * Hexagon.dirx[this.dir];
+        yc = this.cell.middles[this.dir][1] + r2 * Hexagon.diry[this.dir];
+        ctx.arc(xc, yc, r2, 0, m2PI);
+      }
+      ctx.fill();
+      break;
+    case 3: // move towards center of next cell
+      this.dC += rayHex * speed; // movement
+      if (this.dC >= 2 * apoHex) {
+        this.dC = (2 * apoHex);
+      }
+      xc = this.cell.xc + Hexagon.dirx[this.dir] * this.dC;
+      yc = this.cell.yc + Hexagon.diry[this.dir] * this.dC;
+      ctx.beginPath();
+      ctx.arc(xc, yc, this.radius, 0, m2PI);
+      ctx.fill();
+      if (this.dC >= 2 * apoHex) {
+        this.cell.occupied = false;
+        this.cell = this.cell.neighbour(this.dir);
+        this.kx = this.cell.kx;
+        this.ky = this.cell.ky;
+        this.comesFrom = (this.dir + 3) % 6;
+        this.state = 0;
+      }
+      break;
+
+  } // switch (this.state)
+} // move
+
+//------------------------------------------------------------------------
+//------------------------------------------------------------------------
+
+function createGrid() {
+/* create the grid of Hexagons
+  and defines the number of dots on each side of the hexagons
+  but does NOT define the crossings between dots inside an hexagon
+*/
+  let hexa;
+  grid = [];
+
+  for (let ky = 0; ky < nby; ++ky) {
+    grid[ky] = []
+    for (let kx = 0; kx < nbx; ++kx) {
+      hexa = new Hexagon(kx, ky);
+      grid[ky][kx] = hexa;
+    } // for kx
+  } // for ky
+} // createGrid
+
+//------------------------------------------------------------------------
+//-----------------------------------------------------------------------------
+// returns false if nothing can be done, true if preparation done
+
+function startOver() {
+
+  let rayHexX, rayHexY;
+
+  maxx = window.innerWidth;
+  maxy = window.innerHeight;
+
+  let orgLeft = mmax (((window.innerWidth ) - maxx) / 2, 0);
+  let orgTop = mmax (((window.innerHeight ) - maxy) / 2, 0);
+  canvGrid.style.left = canv.style.left = orgLeft + 'px';
+  canvGrid.style.top = canv.style.top = orgTop + 'px';
+
+  canvGrid.width = canv.width = maxx;
+  canvGrid.height = canv.height = maxy;
+  ctxGrid.lineCap = ctx.lineCap = 'round';   // placed here because reset when canvas resized
+
+// number of columns / rows
+// computed to have (0,0) in top leftmost corner
+// and for all hexagons to be fully contained in canvas
+
+  rayHexX = mfloor((maxx - 6) / (nbCells + mfloor((nbCells + 1) / 2)));
+  rayHexY = mfloor((maxy - 6) / rac3s2 / (nbCells * 2 + 1));
+
+  rayHex = mmin(rayHexX, rayHexY);
+  apoHex = rayHex * rac3s2; // apothem
+
+  nbx = mfloor(((maxx / rayHex) - 0.5) / 1.5);
+  nby = mfloor(maxy / rayHex / rac3 - 0.5); //
+
+  if (nbx <= 2 || nby <= 2) return false; // nothing to do
+
+  nbBalls = mfloor(nbx * nby / 3);
+
+  if (nbBalls < 1 ) return false;
+
+  Hexagon.dimensions();
+
+  createGrid();
+
+  ctxGrid.clearRect(0, 0, maxx, maxy);
+  grid.forEach(line => {
+    line.forEach(cell => {
+      cell.drawHexagon(false, '#fff',5);
+    }); // line.forEach
+  }) // grid.forEach
+
+  balls = [];
+  for (let k = 0; k < nbBalls; ++k) {
+    balls[k] = new Ball();
+  }
+
+  return true; // ok
+
+} // startOver
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+function clickCanvas(event) {
+  if (event.target.tagName == 'CANVAS') {
+    events.push({event: 'click'});
+    mouse.x = event.clientX;
+    mouse.y = event.clientY;
+  }
+}
+//------------------------------------------------------------------------
+let animate;
+{
+  let animState = 0;
+  let ball;
+
+  animate = function(tStamp) {
+
+    const event = events.shift();
+
+    window.requestAnimationFrame(animate);
+
+    switch (animState) {
+      case 0 :
+        if (startOver()) {
+          ++animState;
+          mouse.x = maxx/2; mouse.y = maxy / 2;
+        }
+
+        break;
+
+      case 1 :
+        ctx.clearRect(0, 0, maxx, maxy);
+        balls.forEach ( ball => {
+          ball.move();
+        });
+        if (!event || event.event !== 'click') break; // waiting for click
+        animState = 0;
+        break;
+    } // switch animState
+  } // animate
+} // scope for animate
+
+//------------------------------------------------------------------------
+// beginning of execution
+
+  {
+    canv = document.createElement('canvas');
+    canv.style.position = "absolute";
+    document.body.appendChild(canv);
+    ctx = canv.getContext('2d');
+    canv.setAttribute('title','click me');
+  } // canvas creation
+  {
+    canvGrid = document.createElement('canvas');
+    canvGrid.style.position = "absolute";
+    document.body.appendChild(canvGrid);
+    ctxGrid = canvGrid.getContext('2d');
+    canvGrid.style.zIndex = 1;
+  } // canvas creation
+
+  window.addEventListener('click',clickCanvas);
+
+// launch animation
+
+  window.requestAnimationFrame(animate);
+}); // window load listener
\ No newline at end of file
diff --git a/crossing-walls/dist/style.css b/crossing-walls/dist/style.css
new file mode 100644
index 0000000..7600a9d
--- /dev/null
+++ b/crossing-walls/dist/style.css
@@ -0,0 +1,8 @@
+body {
+  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
+  background-color: #044;
+  margin:0;
+  padding:0;
+  border-width:0;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/crossing-walls/license.txt b/crossing-walls/license.txt
new file mode 100644
index 0000000..fb00134
--- /dev/null
+++ b/crossing-walls/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Dillon (https://codepen.io/Dillo/pen/abvxwGN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/crossing-walls/src/index.html b/crossing-walls/src/index.html
new file mode 100644
index 0000000..8f76a07
--- /dev/null
+++ b/crossing-walls/src/index.html
@@ -0,0 +1 @@
+<!-- click to restart -->
\ No newline at end of file
diff --git a/crossing-walls/src/script.js b/crossing-walls/src/script.js
new file mode 100644
index 0000000..4298bf4
--- /dev/null
+++ b/crossing-walls/src/script.js
@@ -0,0 +1,519 @@
+"use strict";
+
+window.addEventListener("load",function() {
+
+  const nbCells = 5 ; // min number of cells in height or width
+  const bgColor = '#004';
+  const rayBallMin = 0.3; // relative to apoHex
+  const rayBallMax = 0.8; // relative to apoHex (< 1)
+  const speed = 0.03;
+
+  let canv, ctx;   // canvas and context : global variables (I know :( )
+  let ctxGrid, canvGrid;
+  let maxx, maxy;  // canvas sizes (in pixels)
+  let nbx, nby;    // number of columns / rows
+  let grid;
+  let rayHex;       // Hexagon side
+  let apoHex;       // apothem
+  let nbBalls;
+  let balls;
+
+// for animation
+  let events = [];
+  let mouse = {x:0, y:0};
+  let explorers; // array of alive Explorers
+
+// shortcuts for Math.
+
+  const mrandom = Math.random;
+  const mfloor = Math.floor;
+  const mround = Math.round;
+  const mceil = Math.ceil;
+  const mabs = Math.abs;
+  const mmin = Math.min;
+  const mmax = Math.max;
+
+  const mPI = Math.PI;
+  const mPIS2 = Math.PI / 2;
+  const m2PI = Math.PI * 2;
+  const msin = Math.sin;
+  const mcos = Math.cos;
+  const matan2 = Math.atan2;
+  const mtan = Math.tan;
+
+  const mhypot = Math.hypot;
+  const msqrt = Math.sqrt;
+
+  const rac3   = msqrt(3);
+  const rac3s2 = rac3 / 2;
+  const mPIS3 = Math.PI / 3;
+
+//-----------------------------------------------------------------------------
+  function alea (min, max) {
+// random number [min..max[ . If no max is provided, [0..min[
+
+    if (typeof max == 'undefined') return min * mrandom();
+    return min + (max - min) * mrandom();
+  }
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+  function intAlea (min, max) {
+// random integer number [min..max[ . If no max is provided, [0..min[
+
+    if (typeof max == 'undefined') {
+      max = min; min = 0;
+    }
+    return mfloor(min + (max - min) * mrandom());
+  } // intAlea
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+function Noise1DOneShot (period, min = 0, max = 1, random) {
+/* returns a 1D single-shot noise generator.
+   the (optional) random function must return a value between 0 and 1
+  the returned function has no parameter, and will return a new number every tiime it is called.
+  If the random function provides reproductible values (and is not used elsewhere), this
+  one will return reproductible values too.
+  period should be > 1. The bigger period is, the smoother output noise is
+*/
+  random = random || Math.random;
+  let currx = random(); // start with random offset
+  let y0 = min + (max - min) * random(); // 'previous' value
+  let y1 = min + (max - min) * random(); // 'next' value
+  let dx = 1 / period;
+
+  return function() {
+    currx += dx;
+    if (currx > 1) {
+      currx -= 1;
+      y0 = y1;
+      y1 = min + (max - min) * random();
+    }
+    let z = (3 - 2 * currx) * currx * currx;
+    return z * y1 + (1 - z) * y0;
+  }
+} // Noise1DOneShot
+
+//------------------------------------------------------------------------
+// class Hexagon
+let Hexagon;
+{ // scope for Hexagon
+
+let vertices;
+let orgx, orgy;
+
+Hexagon = function (kx, ky) {
+
+  this.kx = kx;
+  this.ky = ky;
+  this.neighbours = [];
+
+} // function Hexagon
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/* static method */
+
+Hexagon.dimensions = function () {
+// coordinates of center of hexagon [0][0]
+  orgx = (maxx - rayHex * (1.5 * nbx + 0.5)) / 2  + rayHex; // obvious, no ?
+  orgy = (maxy - (rayHex * rac3 * (nby + 0.5))) / 2 + rayHex * rac3; // yet more obvious
+
+/* position of hexagon vertices, relative to its center */
+  vertices = [[],[],[],[],[],[]] ;
+// x coordinates, from left to right
+  vertices[3][0] = - (rayHex + 0.5);
+  vertices[2][0] = vertices[4][0] = - (rayHex + 0.5) / 2;
+  vertices[1][0] = vertices[5][0] = + (rayHex + 0.5) / 2;
+  vertices[0][0] = (rayHex + 0.5);
+// y coordinates, from top to bottom
+  vertices[4][1] = vertices[5][1] = - (rayHex + 0.5) * rac3s2;
+  vertices[0][1] = vertices[3][1] = 0;
+  vertices[1][1] = vertices[2][1] = (rayHex + 0.5) * rac3s2;
+
+  Hexagon.dirx = [rac3s2, 0, - rac3s2, - rac3s2, 0, rac3s2];
+  Hexagon.diry = [0.5, 1, 0.5, - 0.5, -1, - 0.5];
+} // Hexagon.dimensions
+
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.size = function() {
+/* computes screen sizes / positions
+*/
+// centre
+  this.xc = orgx + this.kx * 1.5 * rayHex;
+  this.yc = orgy + this.ky * rayHex * rac3;
+  if (this.kx & 1) this.yc -= rayHex * rac3s2; // odd columns
+
+  this.vertices = [[],[],[],[],[],[]] ;
+  this.middles = [[],[],[],[],[],[]];
+
+// x coordinates of this hexagon vertices
+  this.vertices[3][0] = this.xc + vertices[3][0];
+  this.vertices[2][0] = this.vertices[4][0] = this.xc + vertices[2][0];
+  this.vertices[1][0] = this.vertices[5][0] = this.xc + vertices[1][0];;
+  this.vertices[0][0] = this.xc + vertices[0][0];;
+// y coordinates of this hexagon vertices
+  this.vertices[4][1] = this.vertices[5][1] = this.yc + vertices[4][1];
+  this.vertices[0][1] = this.vertices[3][1] = this.yc + vertices[0][1];
+  this.vertices[1][1] = this.vertices[2][1] = this.yc + vertices[1][1];
+
+  for (let k = 0; k < 6; ++k) {
+    this.middles[k] = [(this.vertices[k][0] + this.vertices[(k + 1) % 6][0]) / 2,
+                       (this.vertices[k][1] + this.vertices[(k + 1) % 6][1]) / 2];
+  } // for k
+
+} // Hexagon.prototype.size
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawHexagon = function(fill, stroke, width = 1) {
+
+  if (! this.vertices) this.size();
+
+  ctxGrid.globalCompositeOperation = 'source-over'; // normal
+  ctxGrid.beginPath();
+  ctxGrid.moveTo (this.vertices[0][0], this.vertices[0][1]);
+  ctxGrid.lineTo (this.vertices[1][0], this.vertices[1][1]);
+  ctxGrid.lineTo (this.vertices[2][0], this.vertices[2][1]);
+  ctxGrid.lineTo (this.vertices[3][0], this.vertices[3][1]);
+  ctxGrid.lineTo (this.vertices[4][0], this.vertices[4][1]);
+  ctxGrid.lineTo (this.vertices[5][0], this.vertices[5][1]);
+  ctxGrid.lineTo (this.vertices[0][0], this.vertices[0][1]);
+  if (fill) {
+    ctxGrid.fillStyle = fill;
+    ctxGrid.fill();
+  }
+  if (stroke) {
+    ctxGrid.strokeStyle = stroke;
+    ctxGrid.lineWidth = 2;
+    ctxGrid.stroke();
+  }
+  ctxGrid.globalCompositeOperation = 'destination-out';
+  for (let side = 0; side < 6 ; ++side) {
+    if (this.neighbour(side)) {
+      ctxGrid.beginPath();
+      ctxGrid.fillStyle = 'rgba(0,0,0,1)'; // seems to not matter
+      ctxGrid.arc(this.middles[side][0], this.middles[side][1], 3,0, m2PI);
+      ctxGrid.fill();
+    }
+  }
+} // Hexagon.prototype.drawHexagon
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawSide = function(side, hue) {
+
+let s2 = (side + 1) % 6;
+
+  if (! this.vertices) this.size();
+
+  let ctxGrid = ctx;
+    ctxGrid.beginPath();
+
+    ctxGrid.moveTo (this.vertices[side][0], this.vertices[side][1]);
+    ctxGrid.lineTo (this.vertices[s2][0], this.vertices[s2][1]);
+    ctxGrid.strokeStyle = `hsl(${hue},100%,60%)`;
+    ctxGrid.lineWidth = 1;
+//    ctxGrid.fillStyle = `hsl(${hue},100%,60%)`;
+    ctxGrid.stroke();
+} // Hexagon.prototype.drawHexagon
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+/* returns a cell's neighbour
+  keep track of it for future request
+  defines itself as its neighbour's neighbour to reduce calculations
+
+  returns false if no neighbour
+*/
+
+Hexagon.prototype.neighbour = function(side) {
+
+  let neigh = this.neighbours[side];
+  if (neigh instanceof(Hexagon)) return neigh; // known neighbour
+  if (neigh === false) return false; // known for no neighbour
+//  do not know yet
+
+  if (this.kx & 1) {
+    neigh =  {kx: this.kx + [1, 0, -1, -1, 0, 1][side],
+              ky: this.ky + [0, 1, 0, -1, -1, -1][side]};
+  } else {
+    neigh = {kx: this.kx + [1, 0, -1, -1, 0, 1][side],
+             ky: this.ky + [1, 1, 1, 0, -1, 0][side]};
+  }
+  if (neigh.kx < 0 || neigh.ky <0 || neigh.kx >= nbx || neigh.ky >= nby) {
+    this.neighbours[side] = false;
+    return false;
+  }
+  neigh = grid[neigh.ky][neigh.kx];
+  this.neighbours[side] = neigh;
+  neigh.neighbours[(side + 3) % 6] = this;
+  return neigh;
+
+} // Hexagon.prototype.neighbour
+
+} // scope for Hexagon
+
+//------------------------------------------------------------------------
+//------------------------------------------------------------------------
+
+function Ball() {
+/* creates a random ball */
+  this.radius = apoHex * alea(rayBallMin, rayBallMax);
+  do {
+    this.kx = intAlea(nbx);
+    this.ky = intAlea(nby);
+    this.cell = grid[this.ky][this.kx];
+    this.comesFrom = intAlea(6); // takes a random 'comesFrom' side
+  } while (this.cell.neighbour(this.comesFrom) === false || this.cell.occupied);
+  this.state = 0; // initial state : center of cell, not chosen direction yet
+  this.retries = 0;
+  this.cell.occupied = true;
+  this.hue = intAlea(360);
+  this.hueNoise = Noise1DOneShot(1000, -1, 1);
+} //
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Ball.prototype.move = function() {
+
+  let dir, neigh, nTries;
+  let xc, yc;
+  let r1, r2;
+
+  this.hue += this.hueNoise();
+  this.hue = (this.hue + 360) % 360;
+  
+  ctx.fillStyle = `hsl(${this.hue},100%,50%)`;
+
+  switch (this.state) {
+    case 0:
+
+      ctx.beginPath();
+      ctx.arc(this.cell.xc, this.cell.yc, this.radius, 0, m2PI);
+      ctx.fill();
+
+      nTries = 0;
+      do {
+        dir = (this.comesFrom + 3 + [-2, -1, -1, 0, 0, 0, 1, 1, 2][intAlea(9)]) % 6;
+        neigh = this.cell.neighbour(dir);
+        if (neigh.occupied) neigh = false; // not acceptable
+        ++ nTries;
+      } while (neigh === false && nTries < 30);
+      if (neigh === false) {
+        dir = this.comesFrom;
+        neigh = this.cell.neighbour(dir);
+        if (neigh.occupied) break;
+      }
+      this.state++;
+      this.dC = 0;      // distance to center of hexagon
+      this.dir = dir;
+      neigh.occupied = true;
+      break;
+
+    case 1:
+      this.dC += rayHex * speed; // movement
+      if (this.dC + this.radius >= apoHex) {
+        this.dC = (apoHex - this.radius);
+        this.state = 2;
+        this.alphaCross = 0;
+      }
+      xc = this.cell.xc + Hexagon.dirx[this.dir] * this.dC;
+      yc = this.cell.yc + Hexagon.diry[this.dir] * this.dC;
+      ctx.beginPath();
+      ctx.arc(xc, yc, this.radius, 0, m2PI);
+      ctx.fill();
+      break;
+
+    case 2:         // crossing side
+      this.alphaCross += speed / 2; // more slowly !
+      if (this.alphaCross >= 1) {
+        this.state = 3;
+        this.alphaCross = 1;
+        this.dC = apoHex + this.radius;
+      }
+      r1 = this.radius * msqrt(1 - this.alphaCross * this.alphaCross);
+      r2 = this.radius * this.alphaCross;
+      ctx.beginPath();
+      if (r1 > 0.5) {
+        xc = this.cell.middles[this.dir][0] - r1 * Hexagon.dirx[this.dir];
+        yc = this.cell.middles[this.dir][1] - r1 * Hexagon.diry[this.dir];
+        ctx.arc(xc, yc, r1, 0, m2PI);
+      }
+      if (r2 > 0.5) {
+        xc = this.cell.middles[this.dir][0] + r2 * Hexagon.dirx[this.dir];
+        yc = this.cell.middles[this.dir][1] + r2 * Hexagon.diry[this.dir];
+        ctx.arc(xc, yc, r2, 0, m2PI);
+      }
+      ctx.fill();
+      break;
+    case 3: // move towards center of next cell
+      this.dC += rayHex * speed; // movement
+      if (this.dC >= 2 * apoHex) {
+        this.dC = (2 * apoHex);
+      }
+      xc = this.cell.xc + Hexagon.dirx[this.dir] * this.dC;
+      yc = this.cell.yc + Hexagon.diry[this.dir] * this.dC;
+      ctx.beginPath();
+      ctx.arc(xc, yc, this.radius, 0, m2PI);
+      ctx.fill();
+      if (this.dC >= 2 * apoHex) {
+        this.cell.occupied = false;
+        this.cell = this.cell.neighbour(this.dir);
+        this.kx = this.cell.kx;
+        this.ky = this.cell.ky;
+        this.comesFrom = (this.dir + 3) % 6;
+        this.state = 0;
+      }
+      break;
+
+  } // switch (this.state)
+} // move
+
+//------------------------------------------------------------------------
+//------------------------------------------------------------------------
+
+function createGrid() {
+/* create the grid of Hexagons
+  and defines the number of dots on each side of the hexagons
+  but does NOT define the crossings between dots inside an hexagon
+*/
+  let hexa;
+  grid = [];
+
+  for (let ky = 0; ky < nby; ++ky) {
+    grid[ky] = []
+    for (let kx = 0; kx < nbx; ++kx) {
+      hexa = new Hexagon(kx, ky);
+      grid[ky][kx] = hexa;
+    } // for kx
+  } // for ky
+} // createGrid
+
+//------------------------------------------------------------------------
+//-----------------------------------------------------------------------------
+// returns false if nothing can be done, true if preparation done
+
+function startOver() {
+
+  let rayHexX, rayHexY;
+
+  maxx = window.innerWidth;
+  maxy = window.innerHeight;
+
+  let orgLeft = mmax (((window.innerWidth ) - maxx) / 2, 0);
+  let orgTop = mmax (((window.innerHeight ) - maxy) / 2, 0);
+  canvGrid.style.left = canv.style.left = orgLeft + 'px';
+  canvGrid.style.top = canv.style.top = orgTop + 'px';
+
+  canvGrid.width = canv.width = maxx;
+  canvGrid.height = canv.height = maxy;
+  ctxGrid.lineCap = ctx.lineCap = 'round';   // placed here because reset when canvas resized
+
+// number of columns / rows
+// computed to have (0,0) in top leftmost corner
+// and for all hexagons to be fully contained in canvas
+
+  rayHexX = mfloor((maxx - 6) / (nbCells + mfloor((nbCells + 1) / 2)));
+  rayHexY = mfloor((maxy - 6) / rac3s2 / (nbCells * 2 + 1));
+
+  rayHex = mmin(rayHexX, rayHexY);
+  apoHex = rayHex * rac3s2; // apothem
+
+  nbx = mfloor(((maxx / rayHex) - 0.5) / 1.5);
+  nby = mfloor(maxy / rayHex / rac3 - 0.5); //
+
+  if (nbx <= 2 || nby <= 2) return false; // nothing to do
+
+  nbBalls = mfloor(nbx * nby / 3);
+
+  if (nbBalls < 1 ) return false;
+
+  Hexagon.dimensions();
+
+  createGrid();
+
+  ctxGrid.clearRect(0, 0, maxx, maxy);
+  grid.forEach(line => {
+    line.forEach(cell => {
+      cell.drawHexagon(false, '#fff',5);
+    }); // line.forEach
+  }) // grid.forEach
+
+  balls = [];
+  for (let k = 0; k < nbBalls; ++k) {
+    balls[k] = new Ball();
+  }
+
+  return true; // ok
+
+} // startOver
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+function clickCanvas(event) {
+  if (event.target.tagName == 'CANVAS') {
+    events.push({event: 'click'});
+    mouse.x = event.clientX;
+    mouse.y = event.clientY;
+  }
+}
+//------------------------------------------------------------------------
+let animate;
+{
+  let animState = 0;
+  let ball;
+
+  animate = function(tStamp) {
+
+    const event = events.shift();
+
+    window.requestAnimationFrame(animate);
+
+    switch (animState) {
+      case 0 :
+        if (startOver()) {
+          ++animState;
+          mouse.x = maxx/2; mouse.y = maxy / 2;
+        }
+
+        break;
+
+      case 1 :
+        ctx.clearRect(0, 0, maxx, maxy);
+        balls.forEach ( ball => {
+          ball.move();
+        });
+        if (!event || event.event !== 'click') break; // waiting for click
+        animState = 0;
+        break;
+    } // switch animState
+  } // animate
+} // scope for animate
+
+//------------------------------------------------------------------------
+// beginning of execution
+
+  {
+    canv = document.createElement('canvas');
+    canv.style.position = "absolute";
+    document.body.appendChild(canv);
+    ctx = canv.getContext('2d');
+    canv.setAttribute('title','click me');
+  } // canvas creation
+  {
+    canvGrid = document.createElement('canvas');
+    canvGrid.style.position = "absolute";
+    document.body.appendChild(canvGrid);
+    ctxGrid = canvGrid.getContext('2d');
+    canvGrid.style.zIndex = 1;
+  } // canvas creation
+
+  window.addEventListener('click',clickCanvas);
+
+// launch animation
+
+  window.requestAnimationFrame(animate);
+}); // window load listener
diff --git a/crossing-walls/src/style.css b/crossing-walls/src/style.css
new file mode 100644
index 0000000..7600a9d
--- /dev/null
+++ b/crossing-walls/src/style.css
@@ -0,0 +1,8 @@
+body {
+  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
+  background-color: #044;
+  margin:0;
+  padding:0;
+  border-width:0;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/crystal-mountains/README.markdown b/crystal-mountains/README.markdown
new file mode 100644
index 0000000..edaafb3
--- /dev/null
+++ b/crystal-mountains/README.markdown
@@ -0,0 +1,5 @@
+# Crystal Mountains
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/MananTank/pen/VweNZZm](https://codepen.io/MananTank/pen/VweNZZm).
+
+
diff --git a/crystal-mountains/dist/index.html b/crystal-mountains/dist/index.html
new file mode 100644
index 0000000..4e27126
--- /dev/null
+++ b/crystal-mountains/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Crystal Mountains</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<a class="download">Download Image</a>
+<div class="instruction">Generate New Mountain </div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/crystal-mountains/dist/script.js b/crystal-mountains/dist/script.js
new file mode 100644
index 0000000..3abc840
--- /dev/null
+++ b/crystal-mountains/dist/script.js
@@ -0,0 +1,97 @@
+let limit;
+let count;
+let space;
+let min;
+let anchorHue;
+let hueRange;
+let smoothness;
+let mappingDirection;
+
+function setup() {
+	createCanvas(innerWidth, innerHeight, WEBGL);
+	noLoop();
+	noStroke();
+	angleMode(DEGREES);
+	reset();
+	colorMode(HSB, 360, 100, 100);
+}
+
+function reset() {
+	min = innerWidth < innerHeight ? innerWidth : innerHeight;
+	limit = min / random(1.3, 2);
+	count = random(100, 150); // resolution
+	space = innerWidth / count;
+	hueRange = random(160, 300);
+	anchorHue = random(360);
+	smoothness = random(10, 15);
+	mappingDirection = random([true, false]);
+}
+
+const getNoise = (i, j) => {
+	const value = noise(i / smoothness, j / smoothness);
+	return map(value, 0, 1, -limit / 3, limit);
+};
+
+function mountainMaker() {
+	for (let i = 0; i < count; i += 1) {
+		for (let j = 0; j < count; j += 1) {
+			let from, to;
+			if (mappingDirection) {
+				from = -limit / 3;
+				to = limit;
+			} else {
+				from = limit;
+				to = -limit / 3;
+			}
+			const hue = map(
+				getNoise(i, j),
+				from,
+				to,
+				anchorHue - hueRange,
+				anchorHue + hueRange
+			);
+
+			fill(hue, 100, 100);
+			beginShape();
+			vertex((i + 1) * space, (j + 1) * space, getNoise(i + 1, j + 1));
+			vertex((i + 1) * space, (j - 1) * space, getNoise(i + 1, j - 1));
+			vertex((i - 1) * space, (j - 1) * space, getNoise(i - 1, j - 1));
+			vertex((i - 1) * space, (j + 1) * space, getNoise(i - 1, j + 1));
+			endShape();
+		}
+	}
+}
+
+function draw() {
+	background(0);
+	push();
+	translate(-innerWidth / 2, min / 10);
+	rotateX(random(50, 65));
+	mountainMaker();
+
+	pop();
+}
+
+function windowResized() {
+	resizeCanvas(innerWidth, innerHeight);
+	reset();
+}
+
+document.querySelector(".download").addEventListener("click", function () {
+	this.download = "crystal-mountain.png";
+	this.href = document.querySelector("canvas").toDataURL();
+});
+
+document.querySelector(".instruction").addEventListener("click", (e) => {
+	if (e.target.classList.contains("generating")) return;
+	const original = e.target.textContent;
+	e.target.classList.add("generating");
+	e.target.textContent = "Generating ...";
+	setTimeout(() => {
+		reset();
+		clear();
+		draw();
+		e.target.textContent = original;
+		e.target.classList.remove("generating");
+	}, 0);
+});
\ No newline at end of file
diff --git a/crystal-mountains/dist/style.css b/crystal-mountains/dist/style.css
new file mode 100644
index 0000000..86944a7
--- /dev/null
+++ b/crystal-mountains/dist/style.css
@@ -0,0 +1,42 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  overflow: hidden;
+  height: 100%;
+  font-family: Arial;
+  background: #000;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+}
+.download,
+.instruction {
+  position: absolute;
+  top: 0;
+  background: #222;
+  padding: 1vw;
+  border-radius: 3px;
+  margin: 1vw;
+  cursor: pointer;
+  opacity: 0.5;
+  color: #fff;
+  font-size: 1vw;
+  text-decoration: none;
+}
+.download:hover,
+.instruction:hover {
+  opacity: 1;
+}
+.instruction {
+  left: 0;
+}
+.instruction.generating {
+  background: #fff;
+  color: #000;
+  pointer-events: none;
+}
+.download {
+  right: 0;
+}
\ No newline at end of file
diff --git a/crystal-mountains/license.txt b/crystal-mountains/license.txt
new file mode 100644
index 0000000..3ebb03c
--- /dev/null
+++ b/crystal-mountains/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Manan Tank ⚡️ (https://codepen.io/MananTank/pen/VweNZZm)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/crystal-mountains/src/index.pug b/crystal-mountains/src/index.pug
new file mode 100644
index 0000000..ec04de7
--- /dev/null
+++ b/crystal-mountains/src/index.pug
@@ -0,0 +1,2 @@
+a.download Download Image
+.instruction Generate New Mountain 
\ No newline at end of file
diff --git a/crystal-mountains/src/script.js b/crystal-mountains/src/script.js
new file mode 100644
index 0000000..d66c0af
--- /dev/null
+++ b/crystal-mountains/src/script.js
@@ -0,0 +1,97 @@
+let limit;
+let count;
+let space;
+let min;
+let anchorHue;
+let hueRange;
+let smoothness;
+let mappingDirection;
+
+function setup() {
+	createCanvas(innerWidth, innerHeight, WEBGL);
+	noLoop();
+	noStroke();
+	angleMode(DEGREES);
+	reset();
+	colorMode(HSB, 360, 100, 100);
+}
+
+function reset() {
+	min = innerWidth < innerHeight ? innerWidth : innerHeight;
+	limit = min / random(1.3, 2);
+	count = random(100, 150); // resolution
+	space = innerWidth / count;
+	hueRange = random(160, 300);
+	anchorHue = random(360);
+	smoothness = random(10, 15);
+	mappingDirection = random([true, false]);
+}
+
+const getNoise = (i, j) => {
+	const value = noise(i / smoothness, j / smoothness);
+	return map(value, 0, 1, -limit / 3, limit);
+};
+
+function mountainMaker() {
+	for (let i = 0; i < count; i += 1) {
+		for (let j = 0; j < count; j += 1) {
+			let from, to;
+			if (mappingDirection) {
+				from = -limit / 3;
+				to = limit;
+			} else {
+				from = limit;
+				to = -limit / 3;
+			}
+			const hue = map(
+				getNoise(i, j),
+				from,
+				to,
+				anchorHue - hueRange,
+				anchorHue + hueRange
+			);
+
+			fill(hue, 100, 100);
+			beginShape();
+			vertex((i + 1) * space, (j + 1) * space, getNoise(i + 1, j + 1));
+			vertex((i + 1) * space, (j - 1) * space, getNoise(i + 1, j - 1));
+			vertex((i - 1) * space, (j - 1) * space, getNoise(i - 1, j - 1));
+			vertex((i - 1) * space, (j + 1) * space, getNoise(i - 1, j + 1));
+			endShape();
+		}
+	}
+}
+
+function draw() {
+	background(0);
+	push();
+	translate(-innerWidth / 2, min / 10);
+	rotateX(random(50, 65));
+	mountainMaker();
+
+	pop();
+}
+
+function windowResized() {
+	resizeCanvas(innerWidth, innerHeight);
+	reset();
+}
+
+document.querySelector(".download").addEventListener("click", function () {
+	this.download = "crystal-mountain.png";
+	this.href = document.querySelector("canvas").toDataURL();
+});
+
+document.querySelector(".instruction").addEventListener("click", (e) => {
+	if (e.target.classList.contains("generating")) return;
+	const original = e.target.textContent;
+	e.target.classList.add("generating");
+	e.target.textContent = "Generating ...";
+	setTimeout(() => {
+		reset();
+		clear();
+		draw();
+		e.target.textContent = original;
+		e.target.classList.remove("generating");
+	}, 0);
+});
diff --git a/crystal-mountains/src/style.styl b/crystal-mountains/src/style.styl
new file mode 100644
index 0000000..716e873
--- /dev/null
+++ b/crystal-mountains/src/style.styl
@@ -0,0 +1,38 @@
+*
+	margin 0
+	padding 0
+	box-sizing border-box
+
+body
+	overflow hidden
+	height 100%
+	font-family Arial
+	background black
+	letter-spacing 0.15em
+	text-transform uppercase
+	
+.download, .instruction
+	position absolute 
+	top 0
+	background #222
+	padding 1vw
+	border-radius 3px
+	margin 1vw
+	cursor pointer 
+	opacity 0.5
+	color white
+	font-size 1vw
+	text-decoration none
+	&:hover
+		opacity 1
+	
+		
+.instruction
+	left 0
+	&.generating
+		background white 
+		color black 
+		pointer-events none
+	
+.download
+	right 0
\ No newline at end of file
diff --git a/css-artsphere/README.markdown b/css-artsphere/README.markdown
new file mode 100644
index 0000000..d6926df
--- /dev/null
+++ b/css-artsphere/README.markdown
@@ -0,0 +1,5 @@
+# CSS Art - Sphere -
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shunyadezain/pen/mdEJjJR](https://codepen.io/shunyadezain/pen/mdEJjJR).
+
+
diff --git a/css-artsphere/dist/index.html b/css-artsphere/dist/index.html
new file mode 100644
index 0000000..923f37d
--- /dev/null
+++ b/css-artsphere/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS Art - Sphere -</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="box">
+  <div class="sphere"></div>
+
+  <div class="cy">
+    <div class="cy__cy top"></div>
+    <div class="cy__lec mid"></div>
+    <div class="cy__cy btm"></div>
+    <div class="sphare-shadow"></div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/css-artsphere/dist/style.css b/css-artsphere/dist/style.css
new file mode 100644
index 0000000..2cd2911
--- /dev/null
+++ b/css-artsphere/dist/style.css
@@ -0,0 +1,171 @@
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(#e18c7e 54%, #b27175 54% 54.2%, #cbcbcb 54.2%);
+}
+
+.box {
+  position: relative;
+}
+
+.sphere {
+  position: absolute;
+  top: -80%;
+  left: 50%;
+  transform: translate(-50%, -80%);
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle at 10px 10px, #eabdb7, #f1c0bb, #efbebd, #e4a79f, #d2928a, #e0a098);
+  border-radius: 50%;
+  animation: up-and-down 5s ease-in-out infinite alternate;
+}
+.sphere:before {
+  content: "";
+  position: absolute;
+  background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 70%);
+  border-radius: 50%;
+  bottom: 2.5%;
+  left: 5%;
+  opacity: 0.6;
+  height: 100%;
+  width: 90%;
+  filter: blur(5px);
+  z-index: 2;
+}
+.sphere:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 5%;
+  left: 10%;
+  border-radius: 50%;
+  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
+  transform: translateX(-80px) translateY(-90px) skewX(-20deg);
+  filter: blur(15px);
+}
+
+.cy {
+  width: 300px;
+  position: relative;
+  top: 200%;
+  left: 50%;
+  transform: translate(-50%, 200%);
+}
+.cy__cy {
+  width: 100%;
+  height: 40px;
+  border-radius: 100%;
+}
+.cy .top {
+  background: linear-gradient(to right, #efd8d9 0 50%, #cf9697);
+  position: relative;
+  overflow: hidden;
+}
+.cy .top::before {
+  position: absolute;
+  top: -80%;
+  left: 50%;
+  content: "";
+  width: 200%;
+  height: 150%;
+  border-radius: 100%;
+  background: rgba(30, 30, 30, 0.1);
+  filter: blur(5px);
+  z-index: 2;
+  animation: small-shadow 5s ease-in-out infinite alternate;
+}
+.cy .top::after {
+  position: absolute;
+  top: 0%;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  content: "";
+  width: 99%;
+  height: 95%;
+  border-radius: 100%;
+  background: linear-gradient(to right, #f2d0cd, #f3caca, #eecdc5);
+}
+.cy .btm {
+  background: linear-gradient(to right, #eabdb7, #f1c0bb, #efbebd, #e4a79f, #d2928a, #e0a098);
+  position: relative;
+}
+.cy .btm::before {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, 5%);
+  content: "";
+  width: 99%;
+  height: 95%;
+  border-radius: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: -2;
+}
+.cy .btm::after {
+  position: absolute;
+  top: -20%;
+  left: 50%;
+  transform: translate(-50%, -20%);
+  content: "";
+  width: 80%;
+  height: 160%;
+  border-radius: 100%;
+  box-shadow: 60px -10px 10px rgba(0, 0, 0, 0.2);
+  z-index: -2;
+}
+.cy__lec {
+  position: absolute;
+  transform: translateY(-50%);
+  width: 100%;
+  height: 40px;
+  background: linear-gradient(to right, #eabdb7, #f1c0bb, #efbebd, #e4a79f, #d2928a, #e0a098);
+  z-index: -1;
+}
+.cy .sphare-shadow {
+  position: absolute;
+  top: -20%;
+  left: 30%;
+  width: 320px;
+  height: 90px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.05);
+  transform: skewX(10deg);
+  filter: blur(5px);
+  z-index: -2;
+  animation: big-shadow 5s ease-in-out infinite alternate;
+}
+
+@keyframes up-and-down {
+  0% {
+    transform: translate(-50%, -80%);
+  }
+  100% {
+    transform: translate(-50%, -40%);
+  }
+}
+@keyframes big-shadow {
+  0% {
+    top: -20%;
+    left: 30%;
+  }
+  100% {
+    top: 0%;
+    left: 0%;
+  }
+}
+@keyframes small-shadow {
+  0% {
+    top: -80%;
+    left: 50%;
+  }
+  100% {
+    top: -30%;
+    left: 20%;
+  }
+}
\ No newline at end of file
diff --git a/css-artsphere/license.txt b/css-artsphere/license.txt
new file mode 100644
index 0000000..175af09
--- /dev/null
+++ b/css-artsphere/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Shunya Koide (https://codepen.io/shunyadezain/pen/mdEJjJR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-artsphere/src/index.html b/css-artsphere/src/index.html
new file mode 100644
index 0000000..33ec539
--- /dev/null
+++ b/css-artsphere/src/index.html
@@ -0,0 +1,10 @@
+<div class="box">
+  <div class="sphere"></div>
+
+  <div class="cy">
+    <div class="cy__cy top"></div>
+    <div class="cy__lec mid"></div>
+    <div class="cy__cy btm"></div>
+    <div class="sphare-shadow"></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/css-artsphere/src/style.scss b/css-artsphere/src/style.scss
new file mode 100644
index 0000000..a46b7e0
--- /dev/null
+++ b/css-artsphere/src/style.scss
@@ -0,0 +1,215 @@
+$gradation: linear-gradient(
+  to right,
+  #eabdb7,
+  #f1c0bb,
+  #efbebd,
+  #e4a79f,
+  #d2928a,
+  #e0a098
+);
+
+$gradation-sphere: radial-gradient(
+  circle at 10px 10px,
+  #eabdb7,
+  #f1c0bb,
+  #efbebd,
+  #e4a79f,
+  #d2928a,
+  #e0a098
+);
+
+$gradation-top: linear-gradient(to right, #f2d0cd, #f3caca, #eecdc5);
+
+$height: 40px;
+
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(#e18c7e 54%, #b27175 54% 54.2%, #cbcbcb 54.2%);
+}
+
+.box {
+  position: relative;
+}
+.sphere {
+  position: absolute;
+  top: -80%;
+  left: 50%;
+  transform: translate(-50%, -80%);
+  width: 300px;
+  height: 300px;
+  background: $gradation-sphere;
+  border-radius: 50%;
+  animation: up-and-down 5s ease-in-out infinite alternate;
+
+  &:before {
+    content: "";
+    position: absolute;
+    background: radial-gradient(
+      circle at 50% 120%,
+      rgba(255, 255, 255, 0.2),
+      rgba(255, 255, 255, 0) 70%
+    );
+    border-radius: 50%;
+    bottom: 2.5%;
+    left: 5%;
+    opacity: 0.6;
+    height: 100%;
+    width: 90%;
+    filter: blur(5px);
+    z-index: 2;
+  }
+  &:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 5%;
+    left: 10%;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle at 50% 50%,
+      rgba(255, 255, 255, 0.1),
+      rgba(255, 255, 255, 0.8) 14%,
+      rgba(255, 255, 255, 0) 24%
+    );
+    transform: translateX(-80px) translateY(-90px) skewX(-20deg);
+    filter: blur(15px);
+  }
+}
+
+.cy {
+  width: 300px;
+  position: relative;
+  top: 200%;
+  left: 50%;
+  transform: translate(-50%, 200%);
+
+  &__cy {
+    width: 100%;
+    height: $height;
+
+    border-radius: 100%;
+  }
+
+  .top {
+    background: linear-gradient(to right, #efd8d9 0 50%, #cf9697);
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      position: absolute;
+      top: -80%;
+      left: 50%;
+      content: "";
+      width: 200%;
+      height: 150%;
+      border-radius: 100%;
+      background: rgba(30, 30, 30, 0.1);
+      filter: blur(5px);
+      z-index: 2;
+      animation: small-shadow 5s ease-in-out infinite alternate;
+    }
+    &::after {
+      position: absolute;
+      top: 0%;
+      left: 50%;
+      transform: translate(-50%, 0%);
+      content: "";
+      width: 99%;
+      height: 95%;
+      border-radius: 100%;
+      background: $gradation-top;
+    }
+  }
+
+  .btm {
+    background: $gradation;
+    position: relative;
+
+    &::before {
+      position: absolute;
+      top: 5%;
+      left: 50%;
+      transform: translate(-50%, 5%);
+      content: "";
+      width: 99%;
+      height: 95%;
+      border-radius: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: -2;
+    }
+
+    &::after {
+      position: absolute;
+      top: -20%;
+      left: 50%;
+      transform: translate(-50%, -20%);
+      content: "";
+      width: 80%;
+      height: 160%;
+      border-radius: 100%;
+      box-shadow: 60px -10px 10px rgba(0, 0, 0, 0.2);
+      z-index: -2;
+    }
+  }
+
+  &__lec {
+    position: absolute;
+    transform: translateY(-50%);
+    width: 100%;
+    height: $height;
+    background: $gradation;
+    z-index: -1;
+  }
+
+  .sphare-shadow {
+    position: absolute;
+    top: -20%;
+    left: 30%;
+    width: 320px;
+    height: 90px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.05);
+    transform: skewX(10deg);
+    filter: blur(5px);
+    z-index: -2;
+    animation: big-shadow 5s ease-in-out infinite alternate;
+  }
+}
+
+@keyframes up-and-down {
+  0% {
+    transform: translate(-50%, -80%);
+  }
+  100% {
+    transform: translate(-50%, -40%);
+  }
+}
+
+@keyframes big-shadow {
+  0% {
+    top: -20%;
+    left: 30%;
+  }
+  100% {
+    top: 0%;
+    left: 0%;
+  }
+}
+
+@keyframes small-shadow {
+  0% {
+    top: -80%;
+    left: 50%;
+  }
+  100% {
+    top: -30%;
+    left: 20%;
+  }
+}
diff --git a/css-clip-path-editor/README.markdown b/css-clip-path-editor/README.markdown
new file mode 100644
index 0000000..c942417
--- /dev/null
+++ b/css-clip-path-editor/README.markdown
@@ -0,0 +1,5 @@
+# CSS clip-path Editor
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/stoumann/pen/abZxoOM](https://codepen.io/stoumann/pen/abZxoOM).
+
+
diff --git a/css-clip-path-editor/dist/index.html b/css-clip-path-editor/dist/index.html
new file mode 100644
index 0000000..508572d
--- /dev/null
+++ b/css-clip-path-editor/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS clip-path Editor</title>
+  <link rel='stylesheet' href='https://elements.stoumann.dk/assets/css/app-clippath.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div
+  data-js="clippath"
+	data-lbl-app-header="CSS &lt;code&gt;clip-path&lt;/code&gt; Editor"
+  data-preview-image="https://elements.stoumann.dk/assets/img/clippath-demo.jpg">
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/css-clip-path-editor/dist/script.js b/css-clip-path-editor/dist/script.js
new file mode 100644
index 0000000..fc32077
--- /dev/null
+++ b/css-clip-path-editor/dist/script.js
@@ -0,0 +1,418 @@
+/* The main module for this is external. The editor is work-in-progress and has some issues when resizing the browser. The arrow-keys works best, if you want to "fine-tune" a point. The final version will work with an API, see how the JSON is under "Preset Code". For this version, localStorage is used, when saving a preset.
+NOTE: url()-presets can NOT be edited!
+*/
+const elements = document.querySelectorAll('[data-js="clippath"]');
+if (elements.length) {
+  import('https://elements.stoumann.dk/assets/js/css-clippath.mjs')
+    .then(module => {
+    const jsClass = module.default;
+    elements.forEach(element => {
+      new jsClass(element, element.dataset, presets);
+    });
+  })
+}
+
+/* Default presets for localhost demo / or when REST API fails */
+const presets = [
+  {
+    "name": "triangle",
+    "description": "",
+    "value": "polygon(50% 0%, 0% 100%, 100% 100%)",
+    "values": [
+      {
+        "coords":  [[50, 0], [0, 100], [100, 100]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "trapezoid",
+    "description": "",
+    "value": "polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)",
+    "values": [
+      {
+        "coords":  [[20, 0], [80, 0], [100, 100], [0, 100]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "parallel",
+    "description": "",
+    "value": "polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)",
+    "values": [
+      {
+        "coords":  [[25, 0], [100, 0], [75, 100], [0, 100]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "rhombus",
+    "description": "",
+    "value": "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
+    "values": [
+      {
+        "coords":  [[50, 0], [100, 50], [50, 100], [0, 50]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "inset",
+    "description": "",
+    "value": "polygon(10% 10%,90% 10%,90% 90%,10% 90%)",
+    "values": [
+      {
+        "coords": [[10,10],[90,10],[90,90],[10,90]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "pentagon",
+    "description": "",
+    "value": "polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)",
+    "values": [
+      {
+        "coords":  [[50, 0], [100, 38], [82, 100], [18, 100], [0, 38]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "hexagon",
+    "description": "",
+    "value": "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
+    "values": [
+      {
+        "coords": [[50, 0], [100, 25], [100, 75], [50, 100], [0, 75], [0, 25]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "heptagon",
+    "description": "",
+    "value": "polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%)",
+    "values": [
+      {
+        "coords": [[50, 0], [90, 20], [100, 60], [75, 100], [25, 100], [0, 60],	[10, 20]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "octagon",
+    "description": "",
+    "value": "polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)",
+    "values": [
+      {
+        "coords":[[30, 0],[70, 0], [100, 30], [100, 70], [70, 100], [30, 100], [0, 70], [0, 30]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "nonagon",
+    "description": "",
+    "value": "polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%)",
+    "values": [
+      {
+        "coords": [[50, 0], [83, 12], [100, 43], [94, 78], [68, 100], [32, 100], [6, 78], [0, 43], [17, 12]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "decagon",
+    "description": "",
+    "value": "polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%)",
+    "values": [
+      {
+        "coords": [[50, 0], [80, 10], [100, 35], [100, 70], [80, 90], [50, 100], [20, 90], [0, 70], [0, 35], [20, 10]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "bevel",
+    "description": "",
+    "value": "polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%)",
+    "values": [
+      {
+        "coords": [[20, 0], [80, 0], [100, 20], [100, 80], [80, 100], [20, 100], [0, 80], [0, 20]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "rabbet",
+    "description": "",
+    "value": "polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%)",
+    "values": [
+      {
+        "coords":  [[0, 15], [15, 15], [15, 0], [85, 0], [85, 15], [100, 15], [100, 85], [85, 85], [85, 100], [15, 100], [15, 85], [0, 85]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "left arrow",
+    "description": "",
+    "value": "polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%)",
+    "values": [
+      {
+        "coords": [[40, 0], [40, 20], [100, 20], [100, 80], [40, 80], [40, 100], [0, 50]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "right arrow",
+    "description": "",
+    "value": "polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)",
+    "values": [
+      {
+        "coords": [[0, 20], [60, 20], [60, 0], [100, 50], [60, 100], [60, 80], [0, 80]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "left point",
+    "description": "",
+    "value": "polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%)",
+    "values": [
+      {
+        "coords":  [[25, 0], [100, 1], [100, 100], [25, 100], [0, 50]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "right point",
+    "description": "",
+    "value": "polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%)",
+    "values": [
+      {
+        "coords": [[0, 0], [75, 0], [100, 50], [75, 100], [0, 100]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "left chev",
+    "description": "",
+    "value": "polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%)",
+    "values": [
+      {
+        "coords": [[100, 0], [75, 50], [100, 100], [25, 100], [0, 50], [25, 0]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "right chev",
+    "description": "",
+    "value": "polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)",
+    "values": [
+      {
+        "coords": [[75, 0], [100, 50], [75, 100], [0, 100], [25, 50], [0, 0]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "star",
+    "description": "",
+    "value": "polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)",
+    "values": [
+      {
+        "coords": [[50, 0], [61, 35], [98, 35], [68, 57], [79, 91], [50, 70], [21, 91], [32, 57], [2, 35], [39, 35]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "plus",
+    "description": "",
+    "value": "polygon(35% 0%,65% 0%,65% 35%,100% 35%,100% 60%,65% 60%,65% 100%,35% 100%,35% 60%,0% 60%,0% 35%,35% 35%)",
+    "values": [
+      {
+        "coords": [[35,0],[65,0],[65,35],[100,35],[100,60],[65,60],[65,100],[35,100],[35,60],[0,60],[0,35],[35,35]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "minus",
+    "description": "",
+    "value": "polygon(100% 35%,100% 60%,0% 60%,0% 35%)",
+    "values": [
+      {
+        "coords": [[100,35],[100,60],[0,60],[0,35]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "message",
+    "description": "",
+    "value": "polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)",
+    "values": [
+      {
+        "coords": [[0, 0], [100, 0], [100, 75], [75, 75], [75, 100], [50, 75], [0, 75]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "close",
+    "description": "",
+    "value": "polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%)",
+    "values": [
+      {
+        "coords": [[20, 0], [0, 20], [30, 50], [0, 80], [20, 100], [50, 70], [80, 100], [100, 80], [70, 50], [100, 20], [80, 0], [50, 30] ],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "frame",
+    "description": "",
+    "value": "polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%)",
+    "values": [
+      {
+        "coords": [[0, 0], [0, 100], [25, 100], [25, 25], [75, 25], [75, 75], [25, 75], [25, 100], [100, 100], [100, 0]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "lightning",
+    "description": "",
+    "value": "polygon(25% 0%,70% 0%,40% 35%,95% 35%,20% 100%,40% 55%,0% 55%)",
+    "values": [
+      {
+        "coords": [[25,0],[70,0],[40,35],[95,35],[20,100],[40,55],[0,55]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {"name":"blinds","deletable":false,"value":"polygon(0% 5%,100% 5%,100% 25%,0% 25%,0% 40%,100% 40%,100% 60%,0% 60%,0% 75%,100% 75%,100% 95%,0% 95%)","values":[{"coords":[[0,5],[100,5],[100,25],[0,25],[0,40],[100,40],[100,60],[0,60],[0,75],[100,75],[100,95],[0,95]],"type":"polygon"}]},
+  {"name":"house","deletable":false,"value":"polygon(50% 0%,70% 15%,70% 2%,90% 2%,90% 30%,100% 40%,100% 100%,65% 100%,65% 65%,35% 65%,35% 100%,0% 100%,0% 40%)","values":[{"coords":[[50,0],[70,15],[70,2],[90,2],[90,30],[100,40],[100,100],[65,100],[65,65],[35,65],[35,100],[0,100],[0,40]],"type":"polygon"}]},
+  {
+    "name": "circle",
+    "description": "",
+    "value": "ellipse(45% 45% at 50% 50%)",
+    "values": [
+      {
+        "coords": [[50, 50], [50, 5], [95, 50]],
+        "type": "ellipse"
+      }
+    ]
+  },
+  {
+    "name": "ellipse",
+    "description": "",
+    "value": "ellipse(25% 45% at 50% 50%)",
+    "values": [
+      {
+        "coords": [[50, 50], [50, 5], [75, 50]],
+        "type": "ellipse"
+      }
+    ]
+  },
+  {
+    "name": "heart",
+    "description": "",
+    "value": "url(#heart)",
+    "values": [
+      {
+        "data": "<path d='M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z'>",
+        "height": 100,
+        "type": "url",
+        "width": 100
+      }
+    ]
+  },
+  {
+    "name": "leave",
+    "description": "",
+    "value": "url(#leave)",
+    "values": [
+      {
+        "data": "<path d='M0.989,0.131 c-0.108,-0.082,-0.275,-0.131,-0.446,-0.131 c-0.211,0,-0.384,0.074,-0.473,0.202 c-0.042,0.06,-0.065,0.132,-0.069,0.212 c-0.003,0.072,0.009,0.151,0.036,0.237 c0.093,-0.278,0.352,-0.495,0.651,-0.495 c0,0,-0.28,0.074,-0.455,0.301 c0,0,-0.002,0.003,-0.006,0.009 c-0.035,0.047,-0.066,0.101,-0.089,0.162 c-0.039,0.093,-0.075,0.22,-0.075,0.373 h0.125 c0,0,-0.019,-0.119,0.014,-0.257 c0.055,0.007,0.104,0.011,0.148,0.011 c0.115,0,0.197,-0.025,0.258,-0.078 c0.054,-0.048,0.084,-0.112,0.116,-0.18 c0.048,-0.104,0.103,-0.222,0.263,-0.313 c0.009,-0.005,0.015,-0.015,0.016,-0.025 s-0.004,-0.021,-0.012,-0.027'>",
+        "height": 1,
+        "type": "url",
+        "width": 1
+      }
+    ]
+  },
+  {
+    "name": "baloon",
+    "description": "",
+    "value": "url(#baloon)",
+    "values": [
+      {
+        "data": "<path d='M0.417,0 v0 c0.23,0,0.417,0.17,0.417,0.379 s-0.187,0.379,-0.417,0.379 c-0.022,0,-0.044,-0.002,-0.065,-0.005 c-0.089,0.1,-0.193,0.118,-0.296,0.121 v-0.025 c0.056,-0.031,0.101,-0.086,0.101,-0.15 c0,-0.009,-0.001,-0.018,-0.002,-0.026 c-0.094,-0.07,-0.154,-0.176,-0.154,-0.295 c0,-0.209,0.187,-0.379,0.417,-0.379 M0.865,0.85 c0,0.055,0.032,0.102,0.08,0.129 v0.021 c-0.09,-0.002,-0.172,-0.018,-0.249,-0.104 c-0.018,0.003,-0.037,0.004,-0.056,0.004 c-0.083,0,-0.159,-0.025,-0.22,-0.067 c0.126,0,0.244,-0.046,0.334,-0.128 c0.045,-0.041,0.081,-0.09,0.106,-0.144 c0.027,-0.057,0.04,-0.119,0.04,-0.182 c0,-0.01,0,-0.02,-0.001,-0.03 c0.063,0.059,0.102,0.138,0.102,0.226 c0,0.102,-0.052,0.193,-0.134,0.253 c-0.001,0.007,-0.002,0.015,-0.002,0.022'>",
+        "height": 1,
+        "type": "url",
+        "width": 1
+      }
+    ]
+  },
+  {
+    "name": "marker",
+    "description": "",
+    "value": "url(#marker)",
+    "values": [
+      {
+        "data": "<path d='M0,0.8v9c0,0.4,0.3,1,0.8,1.3l6.5,4.4c0.4,0.3,1.1,0.3,1.5,0l6.5-4.4c0.4-0.3,0.8-0.9,0.8-1.3v-9C16,0.3,15.5,0,14.9,0H1.1 C0.5,0,0,0.3,0,0.8L0,0.8z'>",
+        "height": 16,
+        "type": "url",
+        "width": 16
+      }
+    ]
+  },
+  {
+    "name": "checkmark",
+    "description": "",
+    "value": "url(#checkmark)",
+    "values": [
+      {
+        "data": "<path d='M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z'>",
+        "height": 46,
+        "type": "url",
+        "width": 46
+      }
+    ]
+  },
+  {
+    "name": "cog",
+    "description": "",
+    "value": "url(#cog)",
+    "values": [
+      {
+        "data": "<path d='M43.454,18.443h-2.437c-0.453-1.766-1.16-3.42-2.082-4.933l1.752-1.756c0.473-0.473,0.733-1.104,0.733-1.774 c0-0.669-0.262-1.301-0.733-1.773l-2.92-2.917c-0.947-0.948-2.602-0.947-3.545-0.001l-1.826,1.815 C30.9,6.232,29.296,5.56,27.529,5.128V2.52c0-1.383-1.105-2.52-2.488-2.52h-4.128c-1.383,0-2.471,1.137-2.471,2.52v2.607 c-1.766,0.431-3.38,1.104-4.878,1.977l-1.825-1.815c-0.946-0.948-2.602-0.947-3.551-0.001L5.27,8.205 C4.802,8.672,4.535,9.318,4.535,9.978c0,0.669,0.259,1.299,0.733,1.772l1.752,1.76c-0.921,1.513-1.629,3.167-2.081,4.933H2.501 C1.117,18.443,0,19.555,0,20.935v4.125c0,1.384,1.117,2.471,2.501,2.471h2.438c0.452,1.766,1.159,3.43,2.079,4.943l-1.752,1.763 c-0.474,0.473-0.734,1.106-0.734,1.776s0.261,1.303,0.734,1.776l2.92,2.919c0.474,0.473,1.103,0.733,1.772,0.733 s1.299-0.261,1.773-0.733l1.833-1.816c1.498,0.873,3.112,1.545,4.878,1.978v2.604c0,1.383,1.088,2.498,2.471,2.498h4.128 c1.383,0,2.488-1.115,2.488-2.498v-2.605c1.767-0.432,3.371-1.104,4.869-1.977l1.817,1.812c0.474,0.475,1.104,0.735,1.775,0.735 c0.67,0,1.301-0.261,1.774-0.733l2.92-2.917c0.473-0.472,0.732-1.103,0.734-1.772c0-0.67-0.262-1.299-0.734-1.773l-1.75-1.77 c0.92-1.514,1.627-3.179,2.08-4.943h2.438c1.383,0,2.52-1.087,2.52-2.471v-4.125C45.973,19.555,44.837,18.443,43.454,18.443z M22.976,30.85c-4.378,0-7.928-3.517-7.928-7.852c0-4.338,3.55-7.85,7.928-7.85c4.379,0,7.931,3.512,7.931,7.85 C30.906,27.334,27.355,30.85,22.976,30.85z'>",
+        "height": 46,
+        "type": "url",
+        "width": 46
+      }
+    ]
+  },
+  {
+    "name": "user",
+    "description": "",
+    "value": "url(#user)",
+    "values": [
+      {
+        "data": "<path d='M22.766,0.001C10.194,0.001,0,10.193,0,22.766s10.193,22.765,22.766,22.765c12.574,0,22.766-10.192,22.766-22.765 S35.34,0.001,22.766,0.001z M22.766,6.808c4.16,0,7.531,3.372,7.531,7.53c0,4.159-3.371,7.53-7.531,7.53 c-4.158,0-7.529-3.371-7.529-7.53C15.237,10.18,18.608,6.808,22.766,6.808z M22.761,39.579c-4.149,0-7.949-1.511-10.88-4.012 c-0.714-0.609-1.126-1.502-1.126-2.439c0-4.217,3.413-7.592,7.631-7.592h8.762c4.219,0,7.619,3.375,7.619,7.592 c0,0.938-0.41,1.829-1.125,2.438C30.712,38.068,26.911,39.579,22.761,39.579z'>",
+        "height": 46,
+        "type": "url",
+        "width": 46
+      }
+    ]
+  }
+];
\ No newline at end of file
diff --git a/css-clip-path-editor/dist/style.css b/css-clip-path-editor/dist/style.css
new file mode 100644
index 0000000..82b0036
--- /dev/null
+++ b/css-clip-path-editor/dist/style.css
@@ -0,0 +1,3 @@
+/*
+The CSS for this is external.
+*/
\ No newline at end of file
diff --git a/css-clip-path-editor/license.txt b/css-clip-path-editor/license.txt
new file mode 100644
index 0000000..1b14a5d
--- /dev/null
+++ b/css-clip-path-editor/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Mads Stoumann (https://codepen.io/stoumann/pen/abZxoOM)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-clip-path-editor/src/index.html b/css-clip-path-editor/src/index.html
new file mode 100644
index 0000000..28e1b4d
--- /dev/null
+++ b/css-clip-path-editor/src/index.html
@@ -0,0 +1,5 @@
+<div
+  data-js="clippath"
+	data-lbl-app-header="CSS &lt;code&gt;clip-path&lt;/code&gt; Editor"
+  data-preview-image="https://elements.stoumann.dk/assets/img/clippath-demo.jpg">
+</div>
\ No newline at end of file
diff --git a/css-clip-path-editor/src/script.js b/css-clip-path-editor/src/script.js
new file mode 100644
index 0000000..fc32077
--- /dev/null
+++ b/css-clip-path-editor/src/script.js
@@ -0,0 +1,418 @@
+/* The main module for this is external. The editor is work-in-progress and has some issues when resizing the browser. The arrow-keys works best, if you want to "fine-tune" a point. The final version will work with an API, see how the JSON is under "Preset Code". For this version, localStorage is used, when saving a preset.
+NOTE: url()-presets can NOT be edited!
+*/
+const elements = document.querySelectorAll('[data-js="clippath"]');
+if (elements.length) {
+  import('https://elements.stoumann.dk/assets/js/css-clippath.mjs')
+    .then(module => {
+    const jsClass = module.default;
+    elements.forEach(element => {
+      new jsClass(element, element.dataset, presets);
+    });
+  })
+}
+
+/* Default presets for localhost demo / or when REST API fails */
+const presets = [
+  {
+    "name": "triangle",
+    "description": "",
+    "value": "polygon(50% 0%, 0% 100%, 100% 100%)",
+    "values": [
+      {
+        "coords":  [[50, 0], [0, 100], [100, 100]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "trapezoid",
+    "description": "",
+    "value": "polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)",
+    "values": [
+      {
+        "coords":  [[20, 0], [80, 0], [100, 100], [0, 100]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "parallel",
+    "description": "",
+    "value": "polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)",
+    "values": [
+      {
+        "coords":  [[25, 0], [100, 0], [75, 100], [0, 100]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "rhombus",
+    "description": "",
+    "value": "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
+    "values": [
+      {
+        "coords":  [[50, 0], [100, 50], [50, 100], [0, 50]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "inset",
+    "description": "",
+    "value": "polygon(10% 10%,90% 10%,90% 90%,10% 90%)",
+    "values": [
+      {
+        "coords": [[10,10],[90,10],[90,90],[10,90]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "pentagon",
+    "description": "",
+    "value": "polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)",
+    "values": [
+      {
+        "coords":  [[50, 0], [100, 38], [82, 100], [18, 100], [0, 38]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "hexagon",
+    "description": "",
+    "value": "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
+    "values": [
+      {
+        "coords": [[50, 0], [100, 25], [100, 75], [50, 100], [0, 75], [0, 25]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "heptagon",
+    "description": "",
+    "value": "polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%)",
+    "values": [
+      {
+        "coords": [[50, 0], [90, 20], [100, 60], [75, 100], [25, 100], [0, 60],	[10, 20]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "octagon",
+    "description": "",
+    "value": "polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)",
+    "values": [
+      {
+        "coords":[[30, 0],[70, 0], [100, 30], [100, 70], [70, 100], [30, 100], [0, 70], [0, 30]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "nonagon",
+    "description": "",
+    "value": "polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%)",
+    "values": [
+      {
+        "coords": [[50, 0], [83, 12], [100, 43], [94, 78], [68, 100], [32, 100], [6, 78], [0, 43], [17, 12]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "decagon",
+    "description": "",
+    "value": "polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%)",
+    "values": [
+      {
+        "coords": [[50, 0], [80, 10], [100, 35], [100, 70], [80, 90], [50, 100], [20, 90], [0, 70], [0, 35], [20, 10]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "bevel",
+    "description": "",
+    "value": "polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%)",
+    "values": [
+      {
+        "coords": [[20, 0], [80, 0], [100, 20], [100, 80], [80, 100], [20, 100], [0, 80], [0, 20]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "rabbet",
+    "description": "",
+    "value": "polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%)",
+    "values": [
+      {
+        "coords":  [[0, 15], [15, 15], [15, 0], [85, 0], [85, 15], [100, 15], [100, 85], [85, 85], [85, 100], [15, 100], [15, 85], [0, 85]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "left arrow",
+    "description": "",
+    "value": "polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%)",
+    "values": [
+      {
+        "coords": [[40, 0], [40, 20], [100, 20], [100, 80], [40, 80], [40, 100], [0, 50]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "right arrow",
+    "description": "",
+    "value": "polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)",
+    "values": [
+      {
+        "coords": [[0, 20], [60, 20], [60, 0], [100, 50], [60, 100], [60, 80], [0, 80]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "left point",
+    "description": "",
+    "value": "polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%)",
+    "values": [
+      {
+        "coords":  [[25, 0], [100, 1], [100, 100], [25, 100], [0, 50]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "right point",
+    "description": "",
+    "value": "polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%)",
+    "values": [
+      {
+        "coords": [[0, 0], [75, 0], [100, 50], [75, 100], [0, 100]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "left chev",
+    "description": "",
+    "value": "polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%)",
+    "values": [
+      {
+        "coords": [[100, 0], [75, 50], [100, 100], [25, 100], [0, 50], [25, 0]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "right chev",
+    "description": "",
+    "value": "polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)",
+    "values": [
+      {
+        "coords": [[75, 0], [100, 50], [75, 100], [0, 100], [25, 50], [0, 0]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "star",
+    "description": "",
+    "value": "polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)",
+    "values": [
+      {
+        "coords": [[50, 0], [61, 35], [98, 35], [68, 57], [79, 91], [50, 70], [21, 91], [32, 57], [2, 35], [39, 35]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "plus",
+    "description": "",
+    "value": "polygon(35% 0%,65% 0%,65% 35%,100% 35%,100% 60%,65% 60%,65% 100%,35% 100%,35% 60%,0% 60%,0% 35%,35% 35%)",
+    "values": [
+      {
+        "coords": [[35,0],[65,0],[65,35],[100,35],[100,60],[65,60],[65,100],[35,100],[35,60],[0,60],[0,35],[35,35]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "minus",
+    "description": "",
+    "value": "polygon(100% 35%,100% 60%,0% 60%,0% 35%)",
+    "values": [
+      {
+        "coords": [[100,35],[100,60],[0,60],[0,35]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "message",
+    "description": "",
+    "value": "polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)",
+    "values": [
+      {
+        "coords": [[0, 0], [100, 0], [100, 75], [75, 75], [75, 100], [50, 75], [0, 75]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "close",
+    "description": "",
+    "value": "polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%)",
+    "values": [
+      {
+        "coords": [[20, 0], [0, 20], [30, 50], [0, 80], [20, 100], [50, 70], [80, 100], [100, 80], [70, 50], [100, 20], [80, 0], [50, 30] ],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "frame",
+    "description": "",
+    "value": "polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%)",
+    "values": [
+      {
+        "coords": [[0, 0], [0, 100], [25, 100], [25, 25], [75, 25], [75, 75], [25, 75], [25, 100], [100, 100], [100, 0]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {
+    "name": "lightning",
+    "description": "",
+    "value": "polygon(25% 0%,70% 0%,40% 35%,95% 35%,20% 100%,40% 55%,0% 55%)",
+    "values": [
+      {
+        "coords": [[25,0],[70,0],[40,35],[95,35],[20,100],[40,55],[0,55]],
+        "type": "polygon"
+      }
+    ]
+  },
+  {"name":"blinds","deletable":false,"value":"polygon(0% 5%,100% 5%,100% 25%,0% 25%,0% 40%,100% 40%,100% 60%,0% 60%,0% 75%,100% 75%,100% 95%,0% 95%)","values":[{"coords":[[0,5],[100,5],[100,25],[0,25],[0,40],[100,40],[100,60],[0,60],[0,75],[100,75],[100,95],[0,95]],"type":"polygon"}]},
+  {"name":"house","deletable":false,"value":"polygon(50% 0%,70% 15%,70% 2%,90% 2%,90% 30%,100% 40%,100% 100%,65% 100%,65% 65%,35% 65%,35% 100%,0% 100%,0% 40%)","values":[{"coords":[[50,0],[70,15],[70,2],[90,2],[90,30],[100,40],[100,100],[65,100],[65,65],[35,65],[35,100],[0,100],[0,40]],"type":"polygon"}]},
+  {
+    "name": "circle",
+    "description": "",
+    "value": "ellipse(45% 45% at 50% 50%)",
+    "values": [
+      {
+        "coords": [[50, 50], [50, 5], [95, 50]],
+        "type": "ellipse"
+      }
+    ]
+  },
+  {
+    "name": "ellipse",
+    "description": "",
+    "value": "ellipse(25% 45% at 50% 50%)",
+    "values": [
+      {
+        "coords": [[50, 50], [50, 5], [75, 50]],
+        "type": "ellipse"
+      }
+    ]
+  },
+  {
+    "name": "heart",
+    "description": "",
+    "value": "url(#heart)",
+    "values": [
+      {
+        "data": "<path d='M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z'>",
+        "height": 100,
+        "type": "url",
+        "width": 100
+      }
+    ]
+  },
+  {
+    "name": "leave",
+    "description": "",
+    "value": "url(#leave)",
+    "values": [
+      {
+        "data": "<path d='M0.989,0.131 c-0.108,-0.082,-0.275,-0.131,-0.446,-0.131 c-0.211,0,-0.384,0.074,-0.473,0.202 c-0.042,0.06,-0.065,0.132,-0.069,0.212 c-0.003,0.072,0.009,0.151,0.036,0.237 c0.093,-0.278,0.352,-0.495,0.651,-0.495 c0,0,-0.28,0.074,-0.455,0.301 c0,0,-0.002,0.003,-0.006,0.009 c-0.035,0.047,-0.066,0.101,-0.089,0.162 c-0.039,0.093,-0.075,0.22,-0.075,0.373 h0.125 c0,0,-0.019,-0.119,0.014,-0.257 c0.055,0.007,0.104,0.011,0.148,0.011 c0.115,0,0.197,-0.025,0.258,-0.078 c0.054,-0.048,0.084,-0.112,0.116,-0.18 c0.048,-0.104,0.103,-0.222,0.263,-0.313 c0.009,-0.005,0.015,-0.015,0.016,-0.025 s-0.004,-0.021,-0.012,-0.027'>",
+        "height": 1,
+        "type": "url",
+        "width": 1
+      }
+    ]
+  },
+  {
+    "name": "baloon",
+    "description": "",
+    "value": "url(#baloon)",
+    "values": [
+      {
+        "data": "<path d='M0.417,0 v0 c0.23,0,0.417,0.17,0.417,0.379 s-0.187,0.379,-0.417,0.379 c-0.022,0,-0.044,-0.002,-0.065,-0.005 c-0.089,0.1,-0.193,0.118,-0.296,0.121 v-0.025 c0.056,-0.031,0.101,-0.086,0.101,-0.15 c0,-0.009,-0.001,-0.018,-0.002,-0.026 c-0.094,-0.07,-0.154,-0.176,-0.154,-0.295 c0,-0.209,0.187,-0.379,0.417,-0.379 M0.865,0.85 c0,0.055,0.032,0.102,0.08,0.129 v0.021 c-0.09,-0.002,-0.172,-0.018,-0.249,-0.104 c-0.018,0.003,-0.037,0.004,-0.056,0.004 c-0.083,0,-0.159,-0.025,-0.22,-0.067 c0.126,0,0.244,-0.046,0.334,-0.128 c0.045,-0.041,0.081,-0.09,0.106,-0.144 c0.027,-0.057,0.04,-0.119,0.04,-0.182 c0,-0.01,0,-0.02,-0.001,-0.03 c0.063,0.059,0.102,0.138,0.102,0.226 c0,0.102,-0.052,0.193,-0.134,0.253 c-0.001,0.007,-0.002,0.015,-0.002,0.022'>",
+        "height": 1,
+        "type": "url",
+        "width": 1
+      }
+    ]
+  },
+  {
+    "name": "marker",
+    "description": "",
+    "value": "url(#marker)",
+    "values": [
+      {
+        "data": "<path d='M0,0.8v9c0,0.4,0.3,1,0.8,1.3l6.5,4.4c0.4,0.3,1.1,0.3,1.5,0l6.5-4.4c0.4-0.3,0.8-0.9,0.8-1.3v-9C16,0.3,15.5,0,14.9,0H1.1 C0.5,0,0,0.3,0,0.8L0,0.8z'>",
+        "height": 16,
+        "type": "url",
+        "width": 16
+      }
+    ]
+  },
+  {
+    "name": "checkmark",
+    "description": "",
+    "value": "url(#checkmark)",
+    "values": [
+      {
+        "data": "<path d='M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z'>",
+        "height": 46,
+        "type": "url",
+        "width": 46
+      }
+    ]
+  },
+  {
+    "name": "cog",
+    "description": "",
+    "value": "url(#cog)",
+    "values": [
+      {
+        "data": "<path d='M43.454,18.443h-2.437c-0.453-1.766-1.16-3.42-2.082-4.933l1.752-1.756c0.473-0.473,0.733-1.104,0.733-1.774 c0-0.669-0.262-1.301-0.733-1.773l-2.92-2.917c-0.947-0.948-2.602-0.947-3.545-0.001l-1.826,1.815 C30.9,6.232,29.296,5.56,27.529,5.128V2.52c0-1.383-1.105-2.52-2.488-2.52h-4.128c-1.383,0-2.471,1.137-2.471,2.52v2.607 c-1.766,0.431-3.38,1.104-4.878,1.977l-1.825-1.815c-0.946-0.948-2.602-0.947-3.551-0.001L5.27,8.205 C4.802,8.672,4.535,9.318,4.535,9.978c0,0.669,0.259,1.299,0.733,1.772l1.752,1.76c-0.921,1.513-1.629,3.167-2.081,4.933H2.501 C1.117,18.443,0,19.555,0,20.935v4.125c0,1.384,1.117,2.471,2.501,2.471h2.438c0.452,1.766,1.159,3.43,2.079,4.943l-1.752,1.763 c-0.474,0.473-0.734,1.106-0.734,1.776s0.261,1.303,0.734,1.776l2.92,2.919c0.474,0.473,1.103,0.733,1.772,0.733 s1.299-0.261,1.773-0.733l1.833-1.816c1.498,0.873,3.112,1.545,4.878,1.978v2.604c0,1.383,1.088,2.498,2.471,2.498h4.128 c1.383,0,2.488-1.115,2.488-2.498v-2.605c1.767-0.432,3.371-1.104,4.869-1.977l1.817,1.812c0.474,0.475,1.104,0.735,1.775,0.735 c0.67,0,1.301-0.261,1.774-0.733l2.92-2.917c0.473-0.472,0.732-1.103,0.734-1.772c0-0.67-0.262-1.299-0.734-1.773l-1.75-1.77 c0.92-1.514,1.627-3.179,2.08-4.943h2.438c1.383,0,2.52-1.087,2.52-2.471v-4.125C45.973,19.555,44.837,18.443,43.454,18.443z M22.976,30.85c-4.378,0-7.928-3.517-7.928-7.852c0-4.338,3.55-7.85,7.928-7.85c4.379,0,7.931,3.512,7.931,7.85 C30.906,27.334,27.355,30.85,22.976,30.85z'>",
+        "height": 46,
+        "type": "url",
+        "width": 46
+      }
+    ]
+  },
+  {
+    "name": "user",
+    "description": "",
+    "value": "url(#user)",
+    "values": [
+      {
+        "data": "<path d='M22.766,0.001C10.194,0.001,0,10.193,0,22.766s10.193,22.765,22.766,22.765c12.574,0,22.766-10.192,22.766-22.765 S35.34,0.001,22.766,0.001z M22.766,6.808c4.16,0,7.531,3.372,7.531,7.53c0,4.159-3.371,7.53-7.531,7.53 c-4.158,0-7.529-3.371-7.529-7.53C15.237,10.18,18.608,6.808,22.766,6.808z M22.761,39.579c-4.149,0-7.949-1.511-10.88-4.012 c-0.714-0.609-1.126-1.502-1.126-2.439c0-4.217,3.413-7.592,7.631-7.592h8.762c4.219,0,7.619,3.375,7.619,7.592 c0,0.938-0.41,1.829-1.125,2.438C30.712,38.068,26.911,39.579,22.761,39.579z'>",
+        "height": 46,
+        "type": "url",
+        "width": 46
+      }
+    ]
+  }
+];
\ No newline at end of file
diff --git a/css-clip-path-editor/src/style.css b/css-clip-path-editor/src/style.css
new file mode 100644
index 0000000..82b0036
--- /dev/null
+++ b/css-clip-path-editor/src/style.css
@@ -0,0 +1,3 @@
+/*
+The CSS for this is external.
+*/
\ No newline at end of file
diff --git a/css-color-rings/README.markdown b/css-color-rings/README.markdown
new file mode 100644
index 0000000..deeb487
--- /dev/null
+++ b/css-color-rings/README.markdown
@@ -0,0 +1,5 @@
+# CSS Color Rings (🐝💣)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jh3y/pen/GRrPPJq](https://codepen.io/jh3y/pen/GRrPPJq).
+
+
diff --git a/css-color-rings/dist/index.html b/css-color-rings/dist/index.html
new file mode 100644
index 0000000..4adf14c
--- /dev/null
+++ b/css-color-rings/dist/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS Color Rings (🐝💣)</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="row" style="--count: 14; --delay: 0;">
+  <div class="row__circle circle" style="--index: 0;"></div>
+  <div class="row__circle circle" style="--index: 1;"></div>
+  <div class="row__circle circle" style="--index: 2;"></div>
+  <div class="row__circle circle" style="--index: 3;"></div>
+  <div class="row__circle circle" style="--index: 4;"></div>
+  <div class="row__circle circle" style="--index: 5;"></div>
+  <div class="row__circle circle" style="--index: 6;"></div>
+  <div class="row__circle circle" style="--index: 7;"></div>
+  <div class="row__circle circle" style="--index: 8;"></div>
+  <div class="row__circle circle" style="--index: 9;"></div>
+  <div class="row__circle circle" style="--index: 10;"></div>
+  <div class="row__circle circle" style="--index: 11;"></div>
+  <div class="row__circle circle" style="--index: 12;"></div>
+  <div class="row__circle circle" style="--index: 13;"></div>
+</div>
+<div class="row" style="--count: 14; --delay: 1;">
+  <div class="row__circle circle" style="--index: 0;"></div>
+  <div class="row__circle circle" style="--index: 1;"></div>
+  <div class="row__circle circle" style="--index: 2;"></div>
+  <div class="row__circle circle" style="--index: 3;"></div>
+  <div class="row__circle circle" style="--index: 4;"></div>
+  <div class="row__circle circle" style="--index: 5;"></div>
+  <div class="row__circle circle" style="--index: 6;"></div>
+  <div class="row__circle circle" style="--index: 7;"></div>
+  <div class="row__circle circle" style="--index: 8;"></div>
+  <div class="row__circle circle" style="--index: 9;"></div>
+  <div class="row__circle circle" style="--index: 10;"></div>
+  <div class="row__circle circle" style="--index: 11;"></div>
+  <div class="row__circle circle" style="--index: 12;"></div>
+  <div class="row__circle circle" style="--index: 13;"></div>
+</div>
+<div class="row" style="--count: 14; --delay: 2;">
+  <div class="row__circle circle" style="--index: 0;"></div>
+  <div class="row__circle circle" style="--index: 1;"></div>
+  <div class="row__circle circle" style="--index: 2;"></div>
+  <div class="row__circle circle" style="--index: 3;"></div>
+  <div class="row__circle circle" style="--index: 4;"></div>
+  <div class="row__circle circle" style="--index: 5;"></div>
+  <div class="row__circle circle" style="--index: 6;"></div>
+  <div class="row__circle circle" style="--index: 7;"></div>
+  <div class="row__circle circle" style="--index: 8;"></div>
+  <div class="row__circle circle" style="--index: 9;"></div>
+  <div class="row__circle circle" style="--index: 10;"></div>
+  <div class="row__circle circle" style="--index: 11;"></div>
+  <div class="row__circle circle" style="--index: 12;"></div>
+  <div class="row__circle circle" style="--index: 13;"></div>
+</div>
+<div class="row" style="--count: 14; --delay: 3;">
+  <div class="row__circle circle" style="--index: 0;"></div>
+  <div class="row__circle circle" style="--index: 1;"></div>
+  <div class="row__circle circle" style="--index: 2;"></div>
+  <div class="row__circle circle" style="--index: 3;"></div>
+  <div class="row__circle circle" style="--index: 4;"></div>
+  <div class="row__circle circle" style="--index: 5;"></div>
+  <div class="row__circle circle" style="--index: 6;"></div>
+  <div class="row__circle circle" style="--index: 7;"></div>
+  <div class="row__circle circle" style="--index: 8;"></div>
+  <div class="row__circle circle" style="--index: 9;"></div>
+  <div class="row__circle circle" style="--index: 10;"></div>
+  <div class="row__circle circle" style="--index: 11;"></div>
+  <div class="row__circle circle" style="--index: 12;"></div>
+  <div class="row__circle circle" style="--index: 13;"></div>
+</div>
+<div class="row" style="--count: 14; --delay: 4;">
+  <div class="row__circle circle" style="--index: 0;"></div>
+  <div class="row__circle circle" style="--index: 1;"></div>
+  <div class="row__circle circle" style="--index: 2;"></div>
+  <div class="row__circle circle" style="--index: 3;"></div>
+  <div class="row__circle circle" style="--index: 4;"></div>
+  <div class="row__circle circle" style="--index: 5;"></div>
+  <div class="row__circle circle" style="--index: 6;"></div>
+  <div class="row__circle circle" style="--index: 7;"></div>
+  <div class="row__circle circle" style="--index: 8;"></div>
+  <div class="row__circle circle" style="--index: 9;"></div>
+  <div class="row__circle circle" style="--index: 10;"></div>
+  <div class="row__circle circle" style="--index: 11;"></div>
+  <div class="row__circle circle" style="--index: 12;"></div>
+  <div class="row__circle circle" style="--index: 13;"></div>
+</div>
+<div class="row" style="--count: 14; --delay: 5;">
+  <div class="row__circle circle" style="--index: 0;"></div>
+  <div class="row__circle circle" style="--index: 1;"></div>
+  <div class="row__circle circle" style="--index: 2;"></div>
+  <div class="row__circle circle" style="--index: 3;"></div>
+  <div class="row__circle circle" style="--index: 4;"></div>
+  <div class="row__circle circle" style="--index: 5;"></div>
+  <div class="row__circle circle" style="--index: 6;"></div>
+  <div class="row__circle circle" style="--index: 7;"></div>
+  <div class="row__circle circle" style="--index: 8;"></div>
+  <div class="row__circle circle" style="--index: 9;"></div>
+  <div class="row__circle circle" style="--index: 10;"></div>
+  <div class="row__circle circle" style="--index: 11;"></div>
+  <div class="row__circle circle" style="--index: 12;"></div>
+  <div class="row__circle circle" style="--index: 13;"></div>
+</div>
+<div class="row" style="--count: 14; --delay: 6;">
+  <div class="row__circle circle" style="--index: 0;"></div>
+  <div class="row__circle circle" style="--index: 1;"></div>
+  <div class="row__circle circle" style="--index: 2;"></div>
+  <div class="row__circle circle" style="--index: 3;"></div>
+  <div class="row__circle circle" style="--index: 4;"></div>
+  <div class="row__circle circle" style="--index: 5;"></div>
+  <div class="row__circle circle" style="--index: 6;"></div>
+  <div class="row__circle circle" style="--index: 7;"></div>
+  <div class="row__circle circle" style="--index: 8;"></div>
+  <div class="row__circle circle" style="--index: 9;"></div>
+  <div class="row__circle circle" style="--index: 10;"></div>
+  <div class="row__circle circle" style="--index: 11;"></div>
+  <div class="row__circle circle" style="--index: 12;"></div>
+  <div class="row__circle circle" style="--index: 13;"></div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/css-color-rings/dist/style.css b/css-color-rings/dist/style.css
new file mode 100644
index 0000000..7a6d06e
--- /dev/null
+++ b/css-color-rings/dist/style.css
@@ -0,0 +1,54 @@
+* {
+  box-sizing: border-box;
+}
+:root {
+  --delay-bump: 0.2;
+  --stagger: 0.15;
+  --transition: 2.5;
+  --size: 6vmin;
+  --coefficient: 8;
+  --border: 0.5vmin;
+  --width: calc(var(--coefficient) * var(--size));
+  --lower-bound: 0;
+  --upper-bound: 200;
+  --margin: 1rem;
+}
+body {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: #091116;
+}
+body > .row + .row {
+  margin-top: var(--margin);
+}
+.row {
+  display: flex;
+  width: var(--width);
+  position: relative;
+  height: var(--size);
+}
+.circle {
+  --color: hsl(calc((var(--lower-bound, 0) + ((var(--upper-bound, 200) - var(--lower-bound, 0)) / var(--count, 0)) * (var(--count) - var(--index, 0)))), 75%, 45%);
+  height: var(--size);
+  width: var(--size);
+  border-radius: 50%;
+  opacity: 0.7;
+  filter: brightness(1.3) drop-shadow(0 0 1vmin var(--color));
+  border: var(--border) solid var(--color);
+  position: absolute;
+  -webkit-animation: traverse calc(var(--transition) * 1s) calc(((var(--delay) * var(--delay-bump)) + (var(--index, 0) * var(--stagger))) * -1s) infinite alternate ease-in-out;
+          animation: traverse calc(var(--transition) * 1s) calc(((var(--delay) * var(--delay-bump)) + (var(--index, 0) * var(--stagger))) * -1s) infinite alternate ease-in-out;
+}
+@-webkit-keyframes traverse {
+  to {
+    transform: translate(calc((var(--coefficient) - 1) * 100%), 0);
+  }
+}
+@keyframes traverse {
+  to {
+    transform: translate(calc((var(--coefficient) - 1) * 100%), 0);
+  }
+}
\ No newline at end of file
diff --git a/css-color-rings/license.txt b/css-color-rings/license.txt
new file mode 100644
index 0000000..2ee146a
--- /dev/null
+++ b/css-color-rings/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Jhey (https://codepen.io/jh3y/pen/GRrPPJq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-color-rings/src/index.pug b/css-color-rings/src/index.pug
new file mode 100644
index 0000000..1edf133
--- /dev/null
+++ b/css-color-rings/src/index.pug
@@ -0,0 +1,10 @@
+- const ROWS = 7
+- const CIRCLES = 14
+- let r = 0
+while r < ROWS
+  .row(style=`--count: ${CIRCLES}; --delay: ${r};`)
+    - let c = 0
+    while c < CIRCLES
+      .row__circle.circle(style=`--index: ${c};`)
+      - c++
+  - r++
\ No newline at end of file
diff --git a/css-color-rings/src/style.styl b/css-color-rings/src/style.styl
new file mode 100644
index 0000000..7e13115
--- /dev/null
+++ b/css-color-rings/src/style.styl
@@ -0,0 +1,46 @@
+*
+  box-sizing border-box
+
+:root
+  --delay-bump 0.2
+  --stagger 0.15
+  --transition 2.5
+  --size 6vmin
+  --coefficient 8
+  --border 0.5vmin
+  --width calc(var(--coefficient) * var(--size))
+  --lower-bound 0
+  --upper-bound 200
+  --margin 1rem
+
+body
+  min-height 100vh
+  display flex
+  align-items center
+  justify-content center
+  flex-direction column
+  background hsl(202, 44%, 6%)
+
+body > .row + .row
+  margin-top var(--margin)
+
+.row
+  display flex
+  width var(--width)
+  position relative
+  height var(--size)
+
+.circle
+  --color 'hsl(%s, 75%, 45%)' % calc((var(--lower-bound, 0) + ((var(--upper-bound, 200) - var(--lower-bound, 0)) / var(--count, 0)) * (var(--count) - var(--index, 0))))
+  height var(--size)
+  width var(--size)
+  border-radius 50%
+  opacity 0.7
+  filter  brightness(1.3) drop-shadow(0 0 1vmin var(--color))
+  border var(--border) solid var(--color)
+  position absolute
+  animation traverse calc(var(--transition) * 1s) calc(((var(--delay) * var(--delay-bump)) + (var(--index, 0) * var(--stagger))) * -1s) infinite alternate ease-in-out
+
+@keyframes traverse
+  to
+    transform translate(calc((var(--coefficient) - 1) * 100%), 0)
\ No newline at end of file
diff --git a/css-dna/README.markdown b/css-dna/README.markdown
new file mode 100644
index 0000000..06397f7
--- /dev/null
+++ b/css-dna/README.markdown
@@ -0,0 +1,11 @@
+# CSS DNA 🧬
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shadow-scientist/pen/eYgPjxX](https://codepen.io/shadow-scientist/pen/eYgPjxX).
+
+I already did a similar concept last year. Found that the code was horrible! 😅
+
+The infinite double-helix loop is created by adding a slight delay on every div element in the DNA container. The deoxyribose sugar is painted in white as two circles. Also, nitrogenous bases are shown as colored lines that join the sugar circles.
+
+It is not a standard replication of actual DNA. It's a minimal illustration of an animated DNA made with HTML (pug) and CSS. Plus, it's responsive!
+
+Today I recreate the project because 22nd April is my Biology exam 😄
diff --git a/css-dna/dist/index.html b/css-dna/dist/index.html
new file mode 100644
index 0000000..fce8e88
--- /dev/null
+++ b/css-dna/dist/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS DNA 🧬</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="wrapper">
+  <div class="dna">
+    <div style="--i: 0">0</div>
+    <div style="--i: 1">1</div>
+    <div style="--i: 2">2</div>
+    <div style="--i: 3">3</div>
+    <div style="--i: 4">4</div>
+    <div style="--i: 5">5</div>
+    <div style="--i: 6">6</div>
+    <div style="--i: 7">7</div>
+    <div style="--i: 8">8</div>
+    <div style="--i: 9">9</div>
+    <div style="--i: 10">10</div>
+    <div style="--i: 11">11</div>
+    <div style="--i: 12">12</div>
+    <div style="--i: 13">13</div>
+    <div style="--i: 14">14</div>
+    <div style="--i: 15">15</div>
+    <div style="--i: 16">16</div>
+    <div style="--i: 17">17</div>
+    <div style="--i: 18">18</div>
+    <div style="--i: 19">19</div>
+    <div style="--i: 20">20</div>
+    <div style="--i: 21">21</div>
+    <div style="--i: 22">22</div>
+    <div style="--i: 23">23</div>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/css-dna/dist/script.js b/css-dna/dist/script.js
new file mode 100644
index 0000000..0060895
--- /dev/null
+++ b/css-dna/dist/script.js
@@ -0,0 +1 @@
+// CSS is a programming language
\ No newline at end of file
diff --git a/css-dna/dist/style.css b/css-dna/dist/style.css
new file mode 100644
index 0000000..456f12d
--- /dev/null
+++ b/css-dna/dist/style.css
@@ -0,0 +1,125 @@
+:root{
+	--rotate: -26deg;
+
+	/* to make it responsive */
+	--unit: 1vmin;
+	--zoom: 160;
+	--workspace-min: 768; /* device screen height = 768px */
+	--upx: calc(var(--zoom) * (var(--unit) / var(--workspace-min))); /* upx = units per pixel */
+
+	/* DNA Helix loop */
+	--animation-speed: 1;
+	--helix-duration: 0.5s;
+	--helix-iteration-factor: 0.05s;
+	
+	/* DNA model */
+	--dna-max-height: calc(140 * var(--upx));
+	--dna-nitrogenous-base-width: calc(6 * var(--upx));
+	--dna-nitrogenous-base-margin: calc(8 * var(--upx));
+	--dna-sugar-diameter: calc(15 * var(--upx));
+	--dna-sugar-border-size: calc(6 * var(--upx));
+
+	/* colors */
+	--color-background: #151515;
+	--color-sugar: #f2f1d5;
+	--color-A: #ffba36;
+	--color-T: #26f826;
+	--color-C: #439AD9;
+	--color-G: #E96451;
+}
+
+/* rotate the dna container for smart mobile devices */
+@media (orientation: portrait){
+	:root{
+		--rotate: -58deg;
+	}
+}
+
+/* to make things look pretty */
+html, body{
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+body{
+	background: var(--color-background);
+	overflow: auto;
+}
+
+html{
+	scrollbar-width: thin;
+	scrollbar-color: rgba(255,255,255,0.4) rgba(0,0,0,0);
+}
+
+/* align the DNA to middle */
+.wrapper{
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%) rotate(var(--rotate));
+	transform-origin: 50% 50%;
+}
+
+/* DNA is a flex container with n-double helix */
+.dna{
+	display: flex;
+	align-items: center;
+	position: relative;
+	height: var(--dna-max-height);
+}
+
+/* helix (nitrogenous base) */
+.dna > div{
+	font-size: 0;
+	position: relative;
+	width: var(--dna-nitrogenous-base-width);
+	height: 0;
+	background: linear-gradient(0deg, var(--color-G) 50%, var(--color-C) 50%);
+	display: inline-block;
+	margin: 0 var(--dna-nitrogenous-base-margin);
+	animation: 
+		double-helix 
+		ease 
+		calc(var(--helix-duration) / var(--animation-speed)) 
+		calc((var(--i) * var(--helix-iteration-factor)) / var(--animation-speed)) 
+		alternate 
+		infinite;
+}
+
+.dna > div:nth-child(2n){
+	background: linear-gradient(0deg, var(--color-A) 50%, var(--color-T) 50%);
+}
+
+@keyframes double-helix{
+	to{
+		height: var(--dna-max-height);
+	}
+}
+
+/* sugar */
+.dna > div::before, 
+.dna > div::after{
+	content: "";
+	position: absolute;
+	left: 50%;
+	width: var(--dna-sugar-diameter);
+	height: var(--dna-sugar-diameter);
+	display: block;
+	border-radius: 50%;
+	background: var(--color-sugar);
+	border: var(--dna-sugar-border-size) solid var(--color-background);
+	box-sizing: content-box;
+}
+	
+.dna > div::before{
+	top: 0;
+	transform: translate(-50%, -50%);
+}
+
+.dna > div::after{
+	bottom:	0;
+	transform: translate(-50%, 50%);
+}
\ No newline at end of file
diff --git a/css-dna/license.txt b/css-dna/license.txt
new file mode 100644
index 0000000..a0a8240
--- /dev/null
+++ b/css-dna/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Shadow Scientist (https://codepen.io/shadow-scientist/pen/eYgPjxX)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-dna/src/index.pug b/css-dna/src/index.pug
new file mode 100644
index 0000000..32f1fc0
--- /dev/null
+++ b/css-dna/src/index.pug
@@ -0,0 +1,6 @@
+- var n = 0;
+- var iteration = 24;
+.wrapper
+ .dna
+  while n < iteration
+   div(style="--i: "+n)= n++
\ No newline at end of file
diff --git a/css-dna/src/script.js b/css-dna/src/script.js
new file mode 100644
index 0000000..0060895
--- /dev/null
+++ b/css-dna/src/script.js
@@ -0,0 +1 @@
+// CSS is a programming language
\ No newline at end of file
diff --git a/css-dna/src/style.css b/css-dna/src/style.css
new file mode 100644
index 0000000..456f12d
--- /dev/null
+++ b/css-dna/src/style.css
@@ -0,0 +1,125 @@
+:root{
+	--rotate: -26deg;
+
+	/* to make it responsive */
+	--unit: 1vmin;
+	--zoom: 160;
+	--workspace-min: 768; /* device screen height = 768px */
+	--upx: calc(var(--zoom) * (var(--unit) / var(--workspace-min))); /* upx = units per pixel */
+
+	/* DNA Helix loop */
+	--animation-speed: 1;
+	--helix-duration: 0.5s;
+	--helix-iteration-factor: 0.05s;
+	
+	/* DNA model */
+	--dna-max-height: calc(140 * var(--upx));
+	--dna-nitrogenous-base-width: calc(6 * var(--upx));
+	--dna-nitrogenous-base-margin: calc(8 * var(--upx));
+	--dna-sugar-diameter: calc(15 * var(--upx));
+	--dna-sugar-border-size: calc(6 * var(--upx));
+
+	/* colors */
+	--color-background: #151515;
+	--color-sugar: #f2f1d5;
+	--color-A: #ffba36;
+	--color-T: #26f826;
+	--color-C: #439AD9;
+	--color-G: #E96451;
+}
+
+/* rotate the dna container for smart mobile devices */
+@media (orientation: portrait){
+	:root{
+		--rotate: -58deg;
+	}
+}
+
+/* to make things look pretty */
+html, body{
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+body{
+	background: var(--color-background);
+	overflow: auto;
+}
+
+html{
+	scrollbar-width: thin;
+	scrollbar-color: rgba(255,255,255,0.4) rgba(0,0,0,0);
+}
+
+/* align the DNA to middle */
+.wrapper{
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%) rotate(var(--rotate));
+	transform-origin: 50% 50%;
+}
+
+/* DNA is a flex container with n-double helix */
+.dna{
+	display: flex;
+	align-items: center;
+	position: relative;
+	height: var(--dna-max-height);
+}
+
+/* helix (nitrogenous base) */
+.dna > div{
+	font-size: 0;
+	position: relative;
+	width: var(--dna-nitrogenous-base-width);
+	height: 0;
+	background: linear-gradient(0deg, var(--color-G) 50%, var(--color-C) 50%);
+	display: inline-block;
+	margin: 0 var(--dna-nitrogenous-base-margin);
+	animation: 
+		double-helix 
+		ease 
+		calc(var(--helix-duration) / var(--animation-speed)) 
+		calc((var(--i) * var(--helix-iteration-factor)) / var(--animation-speed)) 
+		alternate 
+		infinite;
+}
+
+.dna > div:nth-child(2n){
+	background: linear-gradient(0deg, var(--color-A) 50%, var(--color-T) 50%);
+}
+
+@keyframes double-helix{
+	to{
+		height: var(--dna-max-height);
+	}
+}
+
+/* sugar */
+.dna > div::before, 
+.dna > div::after{
+	content: "";
+	position: absolute;
+	left: 50%;
+	width: var(--dna-sugar-diameter);
+	height: var(--dna-sugar-diameter);
+	display: block;
+	border-radius: 50%;
+	background: var(--color-sugar);
+	border: var(--dna-sugar-border-size) solid var(--color-background);
+	box-sizing: content-box;
+}
+	
+.dna > div::before{
+	top: 0;
+	transform: translate(-50%, -50%);
+}
+
+.dna > div::after{
+	bottom:	0;
+	transform: translate(-50%, 50%);
+}
\ No newline at end of file
diff --git a/css-dominoes/README.markdown b/css-dominoes/README.markdown
new file mode 100644
index 0000000..96bb3dd
--- /dev/null
+++ b/css-dominoes/README.markdown
@@ -0,0 +1,5 @@
+# CSS Dominoes
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/amit_sheen/pen/qBaJpPo](https://codepen.io/amit_sheen/pen/qBaJpPo).
+
+
diff --git a/css-dominoes/dist/index.html b/css-dominoes/dist/index.html
new file mode 100644
index 0000000..233f35b
--- /dev/null
+++ b/css-dominoes/dist/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS Dominoes</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+
+  <h1>CSS Dominoes</h1>
+
+  <div class="floors">
+    <div class="floor"></div>
+    <div class="floor"></div>
+    <div class="floor"></div>
+    <div class="floor"></div>
+    <div class="floor"></div>
+    <div class="floor"></div>
+    <div class="floor"></div>
+    <div class="floor"></div>
+  </div>
+
+  <div class="shadows">
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+  </div>
+
+  <div class="dominos">
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+  </div>
+
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/css-dominoes/dist/style.css b/css-dominoes/dist/style.css
new file mode 100644
index 0000000..93bc6de
--- /dev/null
+++ b/css-dominoes/dist/style.css
@@ -0,0 +1,458 @@
+@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");
+*, *::before, *::after {
+  padding: 0;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Indie Flower", cursive;
+  background-color: #333;
+  color: #fff;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  position: relative;
+  width: 900px;
+  height: 600px;
+  border: 2px solid #fff;
+  background-image: linear-gradient(#456, #333 75%, #444 75%, #222);
+  perspective: 400px;
+  overflow: hidden;
+}
+.container h1 {
+  font-size: 60px;
+  font-weight: normal;
+  text-align: center;
+  padding: 2em 0.5em;
+  line-height: 0.75;
+}
+
+.floor {
+  position: absolute;
+  bottom: 0px;
+  width: 200px;
+  height: 400px;
+  background-color: #0003;
+  transform: rotateX(90deg);
+  transform-origin: bottom;
+  -webkit-animation: floors 16s infinite linear;
+          animation: floors 16s infinite linear;
+}
+.floor:nth-child(1) {
+  -webkit-animation-delay: -2.31s;
+          animation-delay: -2.31s;
+}
+.floor:nth-child(2) {
+  -webkit-animation-delay: -4.31s;
+          animation-delay: -4.31s;
+}
+.floor:nth-child(3) {
+  -webkit-animation-delay: -6.31s;
+          animation-delay: -6.31s;
+}
+.floor:nth-child(4) {
+  -webkit-animation-delay: -8.31s;
+          animation-delay: -8.31s;
+}
+.floor:nth-child(5) {
+  -webkit-animation-delay: -10.31s;
+          animation-delay: -10.31s;
+}
+.floor:nth-child(6) {
+  -webkit-animation-delay: -12.31s;
+          animation-delay: -12.31s;
+}
+.floor:nth-child(7) {
+  -webkit-animation-delay: -14.31s;
+          animation-delay: -14.31s;
+}
+.floor:nth-child(8) {
+  -webkit-animation-delay: -16.31s;
+          animation-delay: -16.31s;
+}
+@-webkit-keyframes floors {
+  from {
+    left: calc(50% - 1500px);
+  }
+  to {
+    left: calc(50% + 1700px);
+  }
+}
+@keyframes floors {
+  from {
+    left: calc(50% - 1500px);
+  }
+  to {
+    left: calc(50% + 1700px);
+  }
+}
+
+.shadow {
+  position: absolute;
+  bottom: 0px;
+  width: 60px;
+  height: 400px;
+  background-image: radial-gradient(#222, transparent 60%);
+  transform: rotateX(90deg) translateX(40px) scaleX(-1);
+  transform-origin: bottom left;
+  -webkit-animation: shadows 8s infinite linear;
+          animation: shadows 8s infinite linear;
+}
+.shadow:nth-child(1) {
+  -webkit-animation-delay: -0.5s;
+          animation-delay: -0.5s;
+}
+.shadow:nth-child(2) {
+  -webkit-animation-delay: -1s;
+          animation-delay: -1s;
+}
+.shadow:nth-child(3) {
+  -webkit-animation-delay: -1.5s;
+          animation-delay: -1.5s;
+}
+.shadow:nth-child(4) {
+  -webkit-animation-delay: -2s;
+          animation-delay: -2s;
+}
+.shadow:nth-child(5) {
+  -webkit-animation-delay: -2.5s;
+          animation-delay: -2.5s;
+}
+.shadow:nth-child(6) {
+  -webkit-animation-delay: -3s;
+          animation-delay: -3s;
+}
+.shadow:nth-child(7) {
+  -webkit-animation-delay: -3.5s;
+          animation-delay: -3.5s;
+}
+.shadow:nth-child(8) {
+  -webkit-animation-delay: -4s;
+          animation-delay: -4s;
+}
+.shadow:nth-child(9) {
+  -webkit-animation-delay: -4.5s;
+          animation-delay: -4.5s;
+}
+.shadow:nth-child(10) {
+  -webkit-animation-delay: -5s;
+          animation-delay: -5s;
+}
+.shadow:nth-child(11) {
+  -webkit-animation-delay: -5.5s;
+          animation-delay: -5.5s;
+}
+.shadow:nth-child(12) {
+  -webkit-animation-delay: -6s;
+          animation-delay: -6s;
+}
+.shadow:nth-child(13) {
+  -webkit-animation-delay: -6.5s;
+          animation-delay: -6.5s;
+}
+.shadow:nth-child(14) {
+  -webkit-animation-delay: -7s;
+          animation-delay: -7s;
+}
+.shadow:nth-child(15) {
+  -webkit-animation-delay: -7.5s;
+          animation-delay: -7.5s;
+}
+.shadow:nth-child(16) {
+  -webkit-animation-delay: -8s;
+          animation-delay: -8s;
+}
+@-webkit-keyframes shadows {
+  from {
+    left: calc(50% - 700px);
+  }
+  to {
+    left: calc(50% + 900px);
+  }
+  0%, 43.75% {
+    transform: rotateX(90deg) translateX(40px) scaleX(-1);
+  }
+  100% {
+    transform: rotateX(90deg) translateX(40px) scaleX(-7);
+  }
+}
+@keyframes shadows {
+  from {
+    left: calc(50% - 700px);
+  }
+  to {
+    left: calc(50% + 900px);
+  }
+  0%, 43.75% {
+    transform: rotateX(90deg) translateX(40px) scaleX(-1);
+  }
+  100% {
+    transform: rotateX(90deg) translateX(40px) scaleX(-7);
+  }
+}
+
+.domino {
+  position: absolute;
+  bottom: 0px;
+  width: 20px;
+  height: 400px;
+  transform: rotateX(90deg);
+  transform-origin: bottom left;
+  transform-style: preserve-3d;
+  -webkit-animation: domino 8s infinite linear;
+          animation: domino 8s infinite linear;
+}
+.domino:nth-child(1) {
+  -webkit-animation-delay: -0.5s;
+          animation-delay: -0.5s;
+}
+.domino:nth-child(1) * {
+  position: absolute;
+  background-color: #E57373;
+}
+.domino:nth-child(2) {
+  -webkit-animation-delay: -1s;
+          animation-delay: -1s;
+}
+.domino:nth-child(2) * {
+  position: absolute;
+  background-color: #F06292;
+}
+.domino:nth-child(3) {
+  -webkit-animation-delay: -1.5s;
+          animation-delay: -1.5s;
+}
+.domino:nth-child(3) * {
+  position: absolute;
+  background-color: #BA68C8;
+}
+.domino:nth-child(4) {
+  -webkit-animation-delay: -2s;
+          animation-delay: -2s;
+}
+.domino:nth-child(4) * {
+  position: absolute;
+  background-color: #9575CD;
+}
+.domino:nth-child(5) {
+  -webkit-animation-delay: -2.5s;
+          animation-delay: -2.5s;
+}
+.domino:nth-child(5) * {
+  position: absolute;
+  background-color: #7986CB;
+}
+.domino:nth-child(6) {
+  -webkit-animation-delay: -3s;
+          animation-delay: -3s;
+}
+.domino:nth-child(6) * {
+  position: absolute;
+  background-color: #64B5F6;
+}
+.domino:nth-child(7) {
+  -webkit-animation-delay: -3.5s;
+          animation-delay: -3.5s;
+}
+.domino:nth-child(7) * {
+  position: absolute;
+  background-color: #4FC3F7;
+}
+.domino:nth-child(8) {
+  -webkit-animation-delay: -4s;
+          animation-delay: -4s;
+}
+.domino:nth-child(8) * {
+  position: absolute;
+  background-color: #4DD0E1;
+}
+.domino:nth-child(9) {
+  -webkit-animation-delay: -4.5s;
+          animation-delay: -4.5s;
+}
+.domino:nth-child(9) * {
+  position: absolute;
+  background-color: #4DB6AC;
+}
+.domino:nth-child(10) {
+  -webkit-animation-delay: -5s;
+          animation-delay: -5s;
+}
+.domino:nth-child(10) * {
+  position: absolute;
+  background-color: #81C784;
+}
+.domino:nth-child(11) {
+  -webkit-animation-delay: -5.5s;
+          animation-delay: -5.5s;
+}
+.domino:nth-child(11) * {
+  position: absolute;
+  background-color: #AED581;
+}
+.domino:nth-child(12) {
+  -webkit-animation-delay: -6s;
+          animation-delay: -6s;
+}
+.domino:nth-child(12) * {
+  position: absolute;
+  background-color: #DCE775;
+}
+.domino:nth-child(13) {
+  -webkit-animation-delay: -6.5s;
+          animation-delay: -6.5s;
+}
+.domino:nth-child(13) * {
+  position: absolute;
+  background-color: #FFF176;
+}
+.domino:nth-child(14) {
+  -webkit-animation-delay: -7s;
+          animation-delay: -7s;
+}
+.domino:nth-child(14) * {
+  position: absolute;
+  background-color: #FFB74D;
+}
+.domino:nth-child(15) {
+  -webkit-animation-delay: -7.5s;
+          animation-delay: -7.5s;
+}
+.domino:nth-child(15) * {
+  position: absolute;
+  background-color: #FFB74D;
+}
+.domino:nth-child(16) {
+  -webkit-animation-delay: -8s;
+          animation-delay: -8s;
+}
+.domino:nth-child(16) * {
+  position: absolute;
+  background-color: #FF8A65;
+}
+.domino .side {
+  bottom: 100px;
+  left: 0;
+  width: 20px;
+  height: 200px;
+  background-image: linear-gradient(45deg, #0005, #fff5);
+  transform: rotateX(-90deg);
+  transform-origin: bottom;
+}
+.domino .front {
+  bottom: 100px;
+  right: 0;
+  width: 200px;
+  height: 100px;
+  background-image: linear-gradient(45deg, #fff5, #0005);
+  transform: rotateY(90deg);
+  transform-origin: right;
+}
+.domino .top {
+  bottom: 100px;
+  left: 0;
+  width: 20px;
+  height: 100px;
+  background-image: linear-gradient(45deg, #fff5, #0005);
+  transform: translateZ(200px);
+  transform-origin: right;
+}
+@-webkit-keyframes domino {
+  from {
+    left: calc(50% - 700px);
+  }
+  to {
+    left: calc(50% + 900px);
+  }
+  0% {
+    z-index: 0;
+  }
+  43.75% {
+    z-index: 32;
+  }
+  50% {
+    z-index: 0;
+  }
+  100% {
+    z-index: 32;
+  }
+  0%, 43.75% {
+    transform: rotateX(90deg) rotateY(0deg);
+  }
+  50% {
+    transform: rotateX(90deg) rotateY(-24deg);
+  }
+  56.25% {
+    transform: rotateX(90deg) rotateY(-45deg);
+  }
+  62.5% {
+    transform: rotateX(90deg) rotateY(-60deg);
+  }
+  68.75% {
+    transform: rotateX(90deg) rotateY(-68.5deg);
+  }
+  75% {
+    transform: rotateX(90deg) rotateY(-73deg);
+  }
+  81.25% {
+    transform: rotateX(90deg) rotateY(-75.5deg);
+  }
+  87.5% {
+    transform: rotateX(90deg) rotateY(-77deg);
+  }
+  100% {
+    transform: rotateX(90deg) rotateY(-78deg);
+  }
+}
+@keyframes domino {
+  from {
+    left: calc(50% - 700px);
+  }
+  to {
+    left: calc(50% + 900px);
+  }
+  0% {
+    z-index: 0;
+  }
+  43.75% {
+    z-index: 32;
+  }
+  50% {
+    z-index: 0;
+  }
+  100% {
+    z-index: 32;
+  }
+  0%, 43.75% {
+    transform: rotateX(90deg) rotateY(0deg);
+  }
+  50% {
+    transform: rotateX(90deg) rotateY(-24deg);
+  }
+  56.25% {
+    transform: rotateX(90deg) rotateY(-45deg);
+  }
+  62.5% {
+    transform: rotateX(90deg) rotateY(-60deg);
+  }
+  68.75% {
+    transform: rotateX(90deg) rotateY(-68.5deg);
+  }
+  75% {
+    transform: rotateX(90deg) rotateY(-73deg);
+  }
+  81.25% {
+    transform: rotateX(90deg) rotateY(-75.5deg);
+  }
+  87.5% {
+    transform: rotateX(90deg) rotateY(-77deg);
+  }
+  100% {
+    transform: rotateX(90deg) rotateY(-78deg);
+  }
+}
\ No newline at end of file
diff --git a/css-dominoes/license.txt b/css-dominoes/license.txt
new file mode 100644
index 0000000..0a0daf1
--- /dev/null
+++ b/css-dominoes/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Amit Sheen (https://codepen.io/amit_sheen/pen/qBaJpPo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-dominoes/src/index.html b/css-dominoes/src/index.html
new file mode 100644
index 0000000..27b3955
--- /dev/null
+++ b/css-dominoes/src/index.html
@@ -0,0 +1,54 @@
+<div class="container">
+
+  <h1>CSS Dominoes</h1>
+
+  <div class="floors">
+    <div class="floor"></div>
+    <div class="floor"></div>
+    <div class="floor"></div>
+    <div class="floor"></div>
+    <div class="floor"></div>
+    <div class="floor"></div>
+    <div class="floor"></div>
+    <div class="floor"></div>
+  </div>
+
+  <div class="shadows">
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+    <div class="shadow"></div>
+  </div>
+
+  <div class="dominos">
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/css-dominoes/src/style.scss b/css-dominoes/src/style.scss
new file mode 100644
index 0000000..afd7e69
--- /dev/null
+++ b/css-dominoes/src/style.scss
@@ -0,0 +1,174 @@
+@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
+
+*, *::before, *::after {
+    padding: 0;
+    margin: 0 auto;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Indie Flower', cursive;
+    background-color: #333;
+    color: #fff;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container {
+    position: relative;
+    width: 900px;
+    height: 600px;
+    border: 2px solid #fff;
+    background-image: linear-gradient(#456, #333 75%, #444 75%, #222);
+    perspective: 400px;
+    overflow: hidden;
+
+    h1 {
+        font-size: 60px;
+        font-weight: normal;
+        text-align: center;
+        padding: 2em 0.5em;
+        line-height: 0.75;
+    }
+}
+
+$speed: 8s;
+$colors: [#E57373, #F06292, #BA68C8, #9575CD, #7986CB, #64B5F6, #4FC3F7, #4DD0E1, #4DB6AC, #81C784, #AED581, #DCE775, #FFF176, #FFB74D, #FFB74D, #FF8A65];
+
+.floor {
+    position: absolute;
+    bottom: 0px;
+    width: 200px;
+    height: 400px;
+    background-color: #0003;
+    transform: rotateX(90deg);
+    transform-origin: bottom;
+    animation: floors $speed*2 infinite linear;
+
+    @for $i from 1 to 9 {
+        &:nth-child(#{$i}) {
+            animation-delay: ($speed / -4) * ($i + 0.155);
+        }
+    }
+
+    @keyframes floors {
+        from { left: calc(50% - 1500px); }
+        to { left: calc(50% + 1700px); }
+    }
+}
+
+.shadow {
+    position: absolute;
+    bottom: 0px;
+    width: 60px;
+    height: 400px;
+    background-image: radial-gradient(#222, transparent 60%);
+    transform: rotateX(90deg) translateX(40px) scaleX(-1);
+    transform-origin: bottom left;
+    animation: shadows $speed infinite linear;
+
+    @for $i from 1 to 17 {
+        &:nth-child(#{$i}) {
+            animation-delay: ($speed / -16) * $i;
+        }
+    }
+
+    @keyframes shadows {
+
+        from { left: calc(50% - 700px); }
+        to { left: calc(50% + 900px); }
+
+        0%, 43.75% { transform: rotateX(90deg) translateX(40px) scaleX(-1); }
+        100% { transform: rotateX(90deg) translateX(40px) scaleX(-7); }
+    }
+}
+
+.domino {
+    position: absolute;
+    bottom: 0px;
+    width: 20px;
+    height: 400px;
+    transform: rotateX(90deg);
+    transform-origin: bottom left;
+    transform-style: preserve-3d;
+    animation: domino $speed infinite linear;
+
+    @for $i from 1 to 17 {
+        &:nth-child(#{$i}) {
+            animation-delay: ($speed / -16) * $i;
+
+            & * {
+                position: absolute;
+                background-color: nth($colors, $i);
+            }
+        }
+    }
+
+    & .side {
+        bottom: 100px; left: 0;
+        width: 20px;
+        height: 200px;
+        background-image: linear-gradient(45deg, #0005, #fff5);
+        transform: rotateX(-90deg);
+        transform-origin: bottom;
+    }
+
+    & .front {
+        bottom: 100px; right: 0;
+        width: 200px;
+        height: 100px;
+        background-image: linear-gradient(45deg, #fff5, #0005);
+        transform: rotateY(90deg);
+        transform-origin: right;
+    }
+
+    & .top {
+        bottom: 100px; left: 0;
+        width: 20px;
+        height: 100px;
+        background-image: linear-gradient(45deg, #fff5, #0005);
+        transform: translateZ(200px);
+        transform-origin: right;
+    }
+
+    @keyframes domino {
+
+        from { left: calc(50% - 700px); }
+        to { left: calc(50% + 900px); }
+
+        0% { z-index: 0; }
+        43.75% { z-index: 32; }
+        50% { z-index: 0; }
+        100% { z-index: 32; }
+
+        0%, 43.75% {
+            transform: rotateX(90deg) rotateY(0deg);
+        }
+        50% {
+            transform: rotateX(90deg) rotateY(-24deg);
+        }
+        56.25% {
+            transform: rotateX(90deg) rotateY(-45deg);
+        }
+        62.5% {
+            transform: rotateX(90deg) rotateY(-60deg);
+        }
+        68.75% {
+            transform: rotateX(90deg) rotateY(-68.5deg);
+        }
+        75% {
+            transform: rotateX(90deg) rotateY(-73deg);
+        }
+        81.25% {
+            transform: rotateX(90deg) rotateY(-75.5deg);
+        }
+        87.5% {
+            transform: rotateX(90deg) rotateY(-77deg);
+        }
+        100% {
+            transform: rotateX(90deg) rotateY(-78deg);
+        }
+    }
+}
\ No newline at end of file
diff --git a/css-filter-cards/README.markdown b/css-filter-cards/README.markdown
new file mode 100644
index 0000000..7cdb322
--- /dev/null
+++ b/css-filter-cards/README.markdown
@@ -0,0 +1,5 @@
+# CSS Filter Cards
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/steveeeie/pen/NVWMEM](https://codepen.io/steveeeie/pen/NVWMEM).
+
+
diff --git a/css-filter-cards/dist/index.html b/css-filter-cards/dist/index.html
new file mode 100644
index 0000000..9d9a711
--- /dev/null
+++ b/css-filter-cards/dist/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS Filter Cards</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
+
+<section class="hero-section">
+  <div class="card-grid">
+    <a class="card" href="#">
+      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557177324-56c542165309?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)"></div>
+      <div class="card__content">
+        <p class="card__category">Category</p>
+        <h3 class="card__heading">Example Card Heading</h3>
+      </div>
+    </a>
+    <a class="card" href="#">
+      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557187666-4fd70cf76254?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
+      <div class="card__content">
+        <p class="card__category">Category</p>
+        <h3 class="card__heading">Example Card Heading</h3>
+      </div>
+    </a>
+    <a class="card" href="#">
+      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1556680262-9990363a3e6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
+      <div class="card__content">
+        <p class="card__category">Category</p>
+        <h3 class="card__heading">Example Card Heading</h3>
+      </div>
+    </li>
+    <a class="card" href="#">
+      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
+      <div class="card__content">
+        <p class="card__category">Category</p>
+        <h3 class="card__heading">Example Card Heading</h3>
+      </div>
+    </a>
+  <div>
+</section>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/css-filter-cards/dist/style.css b/css-filter-cards/dist/style.css
new file mode 100644
index 0000000..7ba66f5
--- /dev/null
+++ b/css-filter-cards/dist/style.css
@@ -0,0 +1,117 @@
+:root{
+  --background-dark: #2d3548;
+  --text-light: rgba(255,255,255,0.6);
+  --text-lighter: rgba(255,255,255,0.9);
+  --spacing-s: 8px;
+  --spacing-m: 16px;
+  --spacing-l: 24px;
+  --spacing-xl: 32px;
+  --spacing-xxl: 64px;
+  --width-container: 1200px;
+}
+
+*{
+  border: 0;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html{
+  height: 100%;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 14px;
+}
+
+body{
+  height: 100%;
+}
+
+.hero-section{
+  align-items: flex-start;
+  background-image: linear-gradient(15deg, #0f4667 0%, #2a6973 150%);
+  display: flex;
+  min-height: 100%;
+  justify-content: center;
+  padding: var(--spacing-xxl) var(--spacing-l);
+}
+
+.card-grid{
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-column-gap: var(--spacing-l);
+  grid-row-gap: var(--spacing-l);
+  max-width: var(--width-container);
+  width: 100%;
+}
+
+@media(min-width: 540px){
+  .card-grid{
+    grid-template-columns: repeat(2, 1fr); 
+  }
+}
+
+@media(min-width: 960px){
+  .card-grid{
+    grid-template-columns: repeat(4, 1fr); 
+  }
+}
+
+.card{
+  list-style: none;
+  position: relative;
+}
+
+.card:before{
+  content: '';
+  display: block;
+  padding-bottom: 150%;
+  width: 100%;
+}
+
+.card__background{
+  background-size: cover;
+  background-position: center;
+  border-radius: var(--spacing-l);
+  bottom: 0;
+  filter: brightness(0.75) saturate(1.2) contrast(0.85);
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform-origin: center;
+  trsnsform: scale(1) translateZ(0);
+  transition: 
+    filter 200ms linear,
+    transform 200ms linear;
+}
+
+.card:hover .card__background{
+  transform: scale(1.05) translateZ(0);
+}
+
+.card-grid:hover > .card:not(:hover) .card__background{
+  filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
+}
+
+.card__content{
+  left: 0;
+  padding: var(--spacing-l);
+  position: absolute;
+  top: 0;
+}
+
+.card__category{
+  color: var(--text-light);
+  font-size: 0.9rem;
+  margin-bottom: var(--spacing-s);
+  text-transform: uppercase;
+}
+
+.card__heading{
+  color: var(--text-lighter);
+  font-size: 1.9rem;
+  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
+  line-height: 1.4;
+  word-spacing: 100vw;
+}
\ No newline at end of file
diff --git a/css-filter-cards/license.txt b/css-filter-cards/license.txt
new file mode 100644
index 0000000..82fd732
--- /dev/null
+++ b/css-filter-cards/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Steve Meredith (https://codepen.io/steveeeie/pen/NVWMEM)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-filter-cards/src/index.html b/css-filter-cards/src/index.html
new file mode 100644
index 0000000..c1ab7ed
--- /dev/null
+++ b/css-filter-cards/src/index.html
@@ -0,0 +1,34 @@
+<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
+
+<section class="hero-section">
+  <div class="card-grid">
+    <a class="card" href="#">
+      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557177324-56c542165309?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)"></div>
+      <div class="card__content">
+        <p class="card__category">Category</p>
+        <h3 class="card__heading">Example Card Heading</h3>
+      </div>
+    </a>
+    <a class="card" href="#">
+      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557187666-4fd70cf76254?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
+      <div class="card__content">
+        <p class="card__category">Category</p>
+        <h3 class="card__heading">Example Card Heading</h3>
+      </div>
+    </a>
+    <a class="card" href="#">
+      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1556680262-9990363a3e6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
+      <div class="card__content">
+        <p class="card__category">Category</p>
+        <h3 class="card__heading">Example Card Heading</h3>
+      </div>
+    </li>
+    <a class="card" href="#">
+      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
+      <div class="card__content">
+        <p class="card__category">Category</p>
+        <h3 class="card__heading">Example Card Heading</h3>
+      </div>
+    </a>
+  <div>
+</section>
\ No newline at end of file
diff --git a/css-filter-cards/src/style.css b/css-filter-cards/src/style.css
new file mode 100644
index 0000000..7ba66f5
--- /dev/null
+++ b/css-filter-cards/src/style.css
@@ -0,0 +1,117 @@
+:root{
+  --background-dark: #2d3548;
+  --text-light: rgba(255,255,255,0.6);
+  --text-lighter: rgba(255,255,255,0.9);
+  --spacing-s: 8px;
+  --spacing-m: 16px;
+  --spacing-l: 24px;
+  --spacing-xl: 32px;
+  --spacing-xxl: 64px;
+  --width-container: 1200px;
+}
+
+*{
+  border: 0;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html{
+  height: 100%;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 14px;
+}
+
+body{
+  height: 100%;
+}
+
+.hero-section{
+  align-items: flex-start;
+  background-image: linear-gradient(15deg, #0f4667 0%, #2a6973 150%);
+  display: flex;
+  min-height: 100%;
+  justify-content: center;
+  padding: var(--spacing-xxl) var(--spacing-l);
+}
+
+.card-grid{
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-column-gap: var(--spacing-l);
+  grid-row-gap: var(--spacing-l);
+  max-width: var(--width-container);
+  width: 100%;
+}
+
+@media(min-width: 540px){
+  .card-grid{
+    grid-template-columns: repeat(2, 1fr); 
+  }
+}
+
+@media(min-width: 960px){
+  .card-grid{
+    grid-template-columns: repeat(4, 1fr); 
+  }
+}
+
+.card{
+  list-style: none;
+  position: relative;
+}
+
+.card:before{
+  content: '';
+  display: block;
+  padding-bottom: 150%;
+  width: 100%;
+}
+
+.card__background{
+  background-size: cover;
+  background-position: center;
+  border-radius: var(--spacing-l);
+  bottom: 0;
+  filter: brightness(0.75) saturate(1.2) contrast(0.85);
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform-origin: center;
+  trsnsform: scale(1) translateZ(0);
+  transition: 
+    filter 200ms linear,
+    transform 200ms linear;
+}
+
+.card:hover .card__background{
+  transform: scale(1.05) translateZ(0);
+}
+
+.card-grid:hover > .card:not(:hover) .card__background{
+  filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
+}
+
+.card__content{
+  left: 0;
+  padding: var(--spacing-l);
+  position: absolute;
+  top: 0;
+}
+
+.card__category{
+  color: var(--text-light);
+  font-size: 0.9rem;
+  margin-bottom: var(--spacing-s);
+  text-transform: uppercase;
+}
+
+.card__heading{
+  color: var(--text-lighter);
+  font-size: 1.9rem;
+  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
+  line-height: 1.4;
+  word-spacing: 100vw;
+}
\ No newline at end of file
diff --git a/css-filter-glitch/README.markdown b/css-filter-glitch/README.markdown
new file mode 100644
index 0000000..734eb23
--- /dev/null
+++ b/css-filter-glitch/README.markdown
@@ -0,0 +1,5 @@
+# css filter glitch
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/bldng/pen/xVxrEy](https://codepen.io/bldng/pen/xVxrEy).
+
+
diff --git a/css-filter-glitch/dist/index.html b/css-filter-glitch/dist/index.html
new file mode 100644
index 0000000..4a1c6a8
--- /dev/null
+++ b/css-filter-glitch/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - css filter glitch</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="block"></div>
+<div class="block"></div>
+<div class="block"></div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/css-filter-glitch/dist/style.css b/css-filter-glitch/dist/style.css
new file mode 100644
index 0000000..bb36ee9
--- /dev/null
+++ b/css-filter-glitch/dist/style.css
@@ -0,0 +1,80 @@
+@charset "UTF-8";
+body {
+  margin: 0;
+  font-size: 35vw;
+  font-family: Arial;
+  background: tomato;
+  color: purple;
+}
+
+.block:after {
+  -webkit-animation: block-scroll 5s linear infinite alternate;
+          animation: block-scroll 5s linear infinite alternate;
+  content: '░▒▓█';
+}
+
+@-webkit-keyframes block-scroll {
+  0% {
+    content: '░▒▓█';
+    -webkit-filter: blur(15px) contrast(90);
+            filter: blur(15px) contrast(90);
+  }
+  24.99% {
+    content: '░▒▓█';
+    -webkit-filter: blur(20px) contrast(90);
+            filter: blur(20px) contrast(90);
+  }
+  25% {
+    content: '█░▒▓';
+    -webkit-filter: blur(25px) contrast(90);
+            filter: blur(25px) contrast(90);
+  }
+  49.99% {
+    content: '█░▒▓';
+    -webkit-filter: blur(30px) contrast(90);
+            filter: blur(30px) contrast(90);
+  }
+  50% {
+    content: '▓█░▒';
+    -webkit-filter: blur(35px) contrast(90);
+            filter: blur(35px) contrast(90);
+  }
+  100% {
+    content: '▒▓█░';
+    -webkit-filter: blur(40px) contrast(90);
+            filter: blur(40px) contrast(90);
+  }
+}
+
+@keyframes block-scroll {
+  0% {
+    content: '░▒▓█';
+    -webkit-filter: blur(15px) contrast(90);
+            filter: blur(15px) contrast(90);
+  }
+  24.99% {
+    content: '░▒▓█';
+    -webkit-filter: blur(20px) contrast(90);
+            filter: blur(20px) contrast(90);
+  }
+  25% {
+    content: '█░▒▓';
+    -webkit-filter: blur(25px) contrast(90);
+            filter: blur(25px) contrast(90);
+  }
+  49.99% {
+    content: '█░▒▓';
+    -webkit-filter: blur(30px) contrast(90);
+            filter: blur(30px) contrast(90);
+  }
+  50% {
+    content: '▓█░▒';
+    -webkit-filter: blur(35px) contrast(90);
+            filter: blur(35px) contrast(90);
+  }
+  100% {
+    content: '▒▓█░';
+    -webkit-filter: blur(40px) contrast(90);
+            filter: blur(40px) contrast(90);
+  }
+}
\ No newline at end of file
diff --git a/css-filter-glitch/license.txt b/css-filter-glitch/license.txt
new file mode 100644
index 0000000..4c493a8
--- /dev/null
+++ b/css-filter-glitch/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Gerhard Bliedung (https://codepen.io/bldng/pen/xVxrEy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-filter-glitch/src/index.html b/css-filter-glitch/src/index.html
new file mode 100644
index 0000000..0af5884
--- /dev/null
+++ b/css-filter-glitch/src/index.html
@@ -0,0 +1,3 @@
+<div class="block"></div>
+<div class="block"></div>
+<div class="block"></div>
diff --git a/css-filter-glitch/src/style.scss b/css-filter-glitch/src/style.scss
new file mode 100644
index 0000000..2d04bba
--- /dev/null
+++ b/css-filter-glitch/src/style.scss
@@ -0,0 +1,24 @@
+body {
+ margin: 0;
+ font-size: 35vw;
+ font-family: Arial;
+ background: tomato;
+ color: purple;
+}
+
+.block:after {
+  animation: block-scroll 5s linear infinite alternate;
+  content: '░▒▓█';
+}
+
+
+// the content animation is chrome only
+
+@keyframes block-scroll {
+ 0% {content: '░▒▓█'; filter:  blur(15px) contrast(90)}
+ 24.99% {content: '░▒▓█'; filter:  blur(20px) contrast(90)}
+ 25% {content: '█░▒▓'; filter:  blur(25px) contrast(90)}
+ 49.99% {content: '█░▒▓'; filter:  blur(30px) contrast(90)}
+ 50% {content: '▓█░▒'; filter:  blur(35px) contrast(90)}
+ 100% {content: '▒▓█░'; filter:  blur(40px) contrast(90)}
+} 
\ No newline at end of file
diff --git a/css-filter-text-animation/README.markdown b/css-filter-text-animation/README.markdown
new file mode 100644
index 0000000..6644d18
--- /dev/null
+++ b/css-filter-text-animation/README.markdown
@@ -0,0 +1,5 @@
+# CSS filter text animation
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/elwinvdhazel/pen/EWBdPr](https://codepen.io/elwinvdhazel/pen/EWBdPr).
+
+Experiment with css filters and text animation
diff --git a/css-filter-text-animation/dist/index.html b/css-filter-text-animation/dist/index.html
new file mode 100644
index 0000000..30a516b
--- /dev/null
+++ b/css-filter-text-animation/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS filter text animation</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <h1>Awesome!</h1>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/css-filter-text-animation/dist/style.css b/css-filter-text-animation/dist/style.css
new file mode 100644
index 0000000..47d25d9
--- /dev/null
+++ b/css-filter-text-animation/dist/style.css
@@ -0,0 +1,80 @@
+@font-face {
+  font-family: hkgrotesk;
+  src: url(data:application/font-woff2;charset=utf-8;base64,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) format("woff2"), url(data:application/font-woff;charset=utf-8;base64,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) format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  font-family: hkgrotesk;
+  background-color: black;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding: 4em;
+  -webkit-filter: contrast(20);
+          filter: contrast(20);
+  background-color: black;
+  overflow: hidden;
+}
+
+h1 {
+  color: white;
+  font-size: 8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1;
+  -webkit-filter: blur(0.5rem);
+          filter: blur(0.5rem);
+  -webkit-animation: letterspacing 10s infinite alternate cubic-bezier(0.2, 0, 0, 1);
+          animation: letterspacing 10s infinite alternate cubic-bezier(0.2, 0, 0, 1);
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate3d(-50%, -50%, 0);
+          transform: translate3d(-50%, -50%, 0);
+}
+
+@-webkit-keyframes letterspacing {
+  0% {
+    letter-spacing: -5rem;
+    -webkit-filter: blur(0.5rem);
+            filter: blur(0.5rem);
+  }
+  50% {
+    -webkit-filter: blur(0.5rem);
+            filter: blur(0.5rem);
+  }
+  100% {
+    letter-spacing: 1rem;
+    -webkit-filter: blur(1.5rem);
+            filter: blur(1.5rem);
+  }
+}
+
+@keyframes letterspacing {
+  0% {
+    letter-spacing: -5rem;
+    -webkit-filter: blur(0.5rem);
+            filter: blur(0.5rem);
+  }
+  50% {
+    -webkit-filter: blur(0.5rem);
+            filter: blur(0.5rem);
+  }
+  100% {
+    letter-spacing: 1rem;
+    -webkit-filter: blur(1.5rem);
+            filter: blur(1.5rem);
+  }
+}
\ No newline at end of file
diff --git a/css-filter-text-animation/license.txt b/css-filter-text-animation/license.txt
new file mode 100644
index 0000000..86b4674
--- /dev/null
+++ b/css-filter-text-animation/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Elwin van den Hazel (https://codepen.io/elwinvdhazel/pen/EWBdPr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-filter-text-animation/src/index.html b/css-filter-text-animation/src/index.html
new file mode 100644
index 0000000..cae6f46
--- /dev/null
+++ b/css-filter-text-animation/src/index.html
@@ -0,0 +1,3 @@
+<div class="container">
+  <h1>Awesome!</h1>
+</div>
\ No newline at end of file
diff --git a/css-filter-text-animation/src/style.scss b/css-filter-text-animation/src/style.scss
new file mode 100644
index 0000000..a7ad082
--- /dev/null
+++ b/css-filter-text-animation/src/style.scss
@@ -0,0 +1,59 @@
+@font-face {
+    font-family: hkgrotesk;
+    src: url(data:application/font-woff2;charset=utf-8;base64,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) format("woff2"), url(data:application/font-woff;charset=utf-8;base64,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) format("woff");
+    font-weight: 700;
+    font-style: normal
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  font-family: hkgrotesk;
+  background-color: black;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding: 4em;
+  filter: contrast(20);
+  background-color: black;
+  overflow: hidden;
+}
+
+h1 {
+  color: white;
+  font-size: 8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1;
+  filter: blur(0.5rem);
+  animation: letterspacing 10s infinite alternate cubic-bezier(.2, 0, 0, 1);
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+@keyframes letterspacing {
+  0% {
+    letter-spacing: -5rem;
+    filter: blur(0.5rem);
+  }
+  
+  50% {
+    filter: blur(0.5rem);
+  }
+  
+  100% {
+    letter-spacing: 1rem;
+    filter: blur(1.5rem);
+  }
+}
\ No newline at end of file
diff --git a/css-grid-card-variations/README.markdown b/css-grid-card-variations/README.markdown
new file mode 100644
index 0000000..e3452ce
--- /dev/null
+++ b/css-grid-card-variations/README.markdown
@@ -0,0 +1,6 @@
+# CSS Grid: Card Variations
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/oliviale/pen/WqwOzv](https://codepen.io/oliviale/pen/WqwOzv).
+
+ Cards have the same HTML structure, altered with CSS Grid.
+
+Image from pexels.com
\ No newline at end of file
diff --git a/css-grid-card-variations/dist/index.html b/css-grid-card-variations/dist/index.html
new file mode 100644
index 0000000..1e5ff17
--- /dev/null
+++ b/css-grid-card-variations/dist/index.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Grid: Card Variations</title>
+  <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,500,500i,700" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<input class="variation" id="bluepurple" type="radio" value="1" name="color" checked="checked"/>
+<label for="bluepurple"></label>
+<input class="variation" id="sunset" type="radio" value="2" name="color"/>
+<label for="sunset"></label>
+<input class="variation" id="godiva" type="radio" value="3" name="color"/>
+<label for="godiva"></label>
+<input class="variation" id="dark" type="radio" value="4" name="color"/>
+<label for="dark"></label>
+<input class="variation" id="pinkaru" type="radio" value="5" name="color"/>
+<label for="pinkaru"></label>
+<main>
+  <section>
+    <div class="profile profile-imgonly">
+      <div class="profile__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo"/></div>
+      <div class="profile__info">
+        <h3>Doggo Dogg</h3>
+        <p class="profile__info__extra">A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain.</p>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Type</p>
+        <h5 class="profile__stats__info">Puppy</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Size</p>
+        <h5>Medium</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Weight</p>
+        <h5 class="profile__stats__info">45.85 lbs</h5>
+      </div>
+      <div class="profile__cta"><a class="button">Adopt Doggo!</a></div>
+    </div>
+  </section>
+  <section>
+    <div class="profile profile-default">
+      <div class="profile__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo"/></div>
+      <div class="profile__info">
+        <h3>Doggo Dogg</h3>
+        <p class="profile__info__extra">A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain.</p>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Type</p>
+        <h5 class="profile__stats__info">Puppy</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Size</p>
+        <h5>Medium</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Weight</p>
+        <h5 class="profile__stats__info">45.85 lbs</h5>
+      </div>
+      <div class="profile__cta"><a class="button">Adopt Doggo!</a></div>
+    </div>
+  </section>
+  <section>
+    <div class="profile profile-smallimg">
+      <div class="profile__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo"/></div>
+      <div class="profile__info">
+        <h3>Doggo Dogg</h3>
+        <p class="profile__info__extra">A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain.</p>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Type</p>
+        <h5 class="profile__stats__info">Puppy</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Size</p>
+        <h5>Medium</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Weight</p>
+        <h5 class="profile__stats__info">45.85 lbs</h5>
+      </div>
+      <div class="profile__cta"><a class="button">Adopt Doggo!</a></div>
+    </div>
+  </section>
+  <section>
+    <div class="profile profile-table">
+      <div class="profile__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo"/></div>
+      <div class="profile__info">
+        <h3>Doggo Dogg</h3>
+        <p class="profile__info__extra">A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain.</p>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Type</p>
+        <h5 class="profile__stats__info">Puppy</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Size</p>
+        <h5>Medium</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Weight</p>
+        <h5 class="profile__stats__info">45.85 lbs</h5>
+      </div>
+      <div class="profile__cta"><a class="button">Adopt Doggo!</a></div>
+    </div>
+  </section>
+  <section>
+    <div class="profile profile-wide">
+      <div class="profile__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo"/></div>
+      <div class="profile__info">
+        <h3>Doggo Dogg</h3>
+        <p class="profile__info__extra">A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain.</p>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Type</p>
+        <h5 class="profile__stats__info">Puppy</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Size</p>
+        <h5>Medium</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Weight</p>
+        <h5 class="profile__stats__info">45.85 lbs</h5>
+      </div>
+      <div class="profile__cta"><a class="button">Adopt Doggo!</a></div>
+    </div>
+  </section>
+  <section>
+    <div class="profile profile-long">
+      <div class="profile__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo"/></div>
+      <div class="profile__info">
+        <h3>Doggo Dogg</h3>
+        <p class="profile__info__extra">A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain.</p>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Type</p>
+        <h5 class="profile__stats__info">Puppy</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Size</p>
+        <h5>Medium</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Weight</p>
+        <h5 class="profile__stats__info">45.85 lbs</h5>
+      </div>
+      <div class="profile__cta"><a class="button">Adopt Doggo!</a></div>
+    </div>
+  </section>
+  <section>
+    <div class="profile profile-bigimg">
+      <div class="profile__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo"/></div>
+      <div class="profile__info">
+        <h3>Doggo Dogg</h3>
+        <p class="profile__info__extra">A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain.</p>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Type</p>
+        <h5 class="profile__stats__info">Puppy</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Size</p>
+        <h5>Medium</h5>
+      </div>
+      <div class="profile__stats">
+        <p class="profile__stats__title">Weight</p>
+        <h5 class="profile__stats__info">45.85 lbs</h5>
+      </div>
+      <div class="profile__cta"><a class="button">Adopt Doggo!</a></div>
+    </div>
+  </section>
+</main>
+<footer>
+  <div class="explanation">A continuation of  <a href="https://codepen.io/oliviale/full/mgWjpq" target="_blank">this style guide</a>. Also part of the <a href="https://codepen.io/collection/DQvYpQ" target="_blank">CSS Grid collection</a>.</div>
+  <div class="social"><a href="https://twitter.com/meowlivia_" target="_blank"><i class="icon-social-twitter icons"></i></a><a href="https://github.com/oliviale" target="_blank"><i class="icon-social-github icons"></i></a><a href="https://dribbble.com/oliviale" target="_blank"><i class="icon-social-dribbble icons"></i></a></div>
+</footer>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/css-grid-card-variations/dist/style.css b/css-grid-card-variations/dist/style.css
new file mode 100644
index 0000000..b0ab76d
--- /dev/null
+++ b/css-grid-card-variations/dist/style.css
@@ -0,0 +1,865 @@
+:root {
+  --canvasColor: #f9f9f9;
+}
+
+body {
+  background: var(--canvasColor);
+  font-family: "Poppins", sans-serif;
+  font-weight: 300;
+  line-height: 1.5;
+  font-size: 16px;
+  text-align: center;
+  transition: all .3s ease;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+main {
+  --neutralShade1: #f2f2f2;
+  --neutralShade2: #e8e9e9;
+  --neutralShade3: #d1d3d4;
+  --neutralShade4: #babdbf;
+  --neutralShade5: #808488;
+  --neutralShade6: #666a6d;
+  --neutralShade7: #4d5052;
+  --neutralShade8: #212122;
+  --grayColor: #999;
+  --lightGrayColor: #ddd;
+  --borderRadius: 6px;
+  --boxShadow: 0 2px 5px rgba(#333, 0.2);
+}
+
+/*overall layout*/
+main {
+  margin: 3em auto 8em;
+  color: var(--foregroundColor);
+  text-align: left;
+}
+
+/*colors*/
+.palette {
+  display: grid;
+  grid: 80px 45px min-content/repeat(5, minmax(50px, 1fr));
+  margin-bottom: 1em;
+}
+.palette__main {
+  grid-column: span 5;
+}
+.palette h5 {
+  grid-column: span 5;
+  text-align: left;
+  padding: 10px 0;
+}
+.palette.main div:nth-child(1) {
+  background: var(--primaryColor);
+}
+.palette.main div:nth-child(2) {
+  background: var(--primaryShade1);
+}
+.palette.main div:nth-child(3) {
+  background: var(--primaryShade2);
+}
+.palette.main div:nth-child(4) {
+  background: var(--primaryShade3);
+}
+.palette.main div:nth-child(5) {
+  background: var(--primaryShade4);
+}
+.palette.main div:nth-child(6) {
+  background: var(--primaryShade5);
+}
+.palette.secondary div:nth-child(1) {
+  background: var(--secondaryColor);
+}
+.palette.secondary div:nth-child(2) {
+  background: var(--secondaryShade1);
+}
+.palette.secondary div:nth-child(3) {
+  background: var(--secondaryShade2);
+}
+.palette.secondary div:nth-child(4) {
+  background: var(--secondaryShade3);
+}
+.palette.secondary div:nth-child(5) {
+  background: var(--secondaryShade4);
+}
+.palette.secondary div:nth-child(6) {
+  background: var(--secondaryShade5);
+}
+.palette.accent1 div:nth-child(1) {
+  background: var(--accentColor);
+}
+.palette.accent1 div:nth-child(2) {
+  background: var(--accentShade1);
+}
+.palette.accent1 div:nth-child(3) {
+  background: var(--accentShade2);
+}
+.palette.accent1 div:nth-child(4) {
+  background: var(--accentShade3);
+}
+.palette.accent1 div:nth-child(5) {
+  background: var(--accentShade4);
+}
+.palette.accent1 div:nth-child(6) {
+  background: var(--accentShade5);
+}
+.palette.accent2 div:nth-child(1) {
+  background: var(--accent2Color);
+}
+.palette.accent2 div:nth-child(2) {
+  background: var(--accent2Shade1);
+}
+.palette.accent2 div:nth-child(3) {
+  background: var(--accent2Shade2);
+}
+.palette.accent2 div:nth-child(4) {
+  background: var(--accent2Shade3);
+}
+.palette.accent2 div:nth-child(5) {
+  background: var(--accent2Shade4);
+}
+.palette.accent2 div:nth-child(6) {
+  background: var(--accent2Shade5);
+}
+.palette.accent3 div:nth-child(1) {
+  background: var(--accent3Color);
+}
+.palette.accent3 div:nth-child(2) {
+  background: var(--accent3Shade1);
+}
+.palette.accent3 div:nth-child(3) {
+  background: var(--accent3Shade2);
+}
+.palette.accent3 div:nth-child(4) {
+  background: var(--accent3Shade3);
+}
+.palette.accent3 div:nth-child(5) {
+  background: var(--accent3Shade4);
+}
+.palette.accent3 div:nth-child(6) {
+  background: var(--accent3Shade5);
+}
+.palette.neutrals {
+  grid-template-rows: repeat(2, 50px) min-content;
+  grid-template-columns: repeat(4, 1fr);
+}
+.palette.neutrals div:nth-child(1) {
+  background: var(--neutralShade1);
+}
+.palette.neutrals div:nth-child(2) {
+  background: var(--neutralShade2);
+}
+.palette.neutrals div:nth-child(3) {
+  background: var(--neutralShade3);
+}
+.palette.neutrals div:nth-child(4) {
+  background: var(--neutralShade4);
+}
+.palette.neutrals div:nth-child(5) {
+  background: var(--neutralShade5);
+  grid-row: 2;
+}
+.palette.neutrals div:nth-child(6) {
+  background: var(--neutralShade6);
+  grid-row: 2;
+}
+.palette.neutrals div:nth-child(7) {
+  background: var(--neutralShade7);
+  grid-row: 2;
+}
+.palette.neutrals div:nth-child(8) {
+  background: var(--neutralShade8);
+  grid-row: 2;
+}
+
+/*typography*/
+strong {
+  font-weight: 500;
+}
+
+em {
+  font-style: italic;
+}
+
+h1 {
+  font: 700 48px/1.2 "Poppins", sans-serif;
+  margin-bottom: 10px;
+}
+
+h2 {
+  font: 700 32px/1.2 "Poppins", sans-serif;
+  margin-bottom: 10px;
+}
+
+h3 {
+  font: 700 24px/1.2 "Poppins", sans-serif;
+  margin-bottom: 10px;
+}
+
+h4 {
+  font: 700 20px/1.2 "Poppins", sans-serif;
+  margin-bottom: 10px;
+}
+
+h5 {
+  font: 500 18px/1.2 "Poppins", sans-serif;
+  margin-bottom: 10px;
+}
+
+h6 {
+  font: 500 16px/1.2 "Poppins", sans-serif;
+  text-transform: uppercase;
+}
+
+/*buttons & links*/
+a.button {
+  outline: none;
+  width: 100%;
+  text-align: center;
+  display: inline-block;
+  border: none;
+  font: 500 16px/1 "Poppins", sans-serif;
+  padding: 20px;
+  cursor: pointer;
+  border-radius: var(--borderRadius);
+  background: var(--primaryColor);
+  color: var(--backgroundColor);
+  position: relative;
+  top: 0;
+  transition: 0.2s ease;
+}
+a.button:hover, a.button.hover {
+  top: -3px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+}
+a.button:active, a.button.active {
+  background: var(--primaryShade4);
+  outline: none;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  top: 0;
+}
+a.button.disabled {
+  opacity: 0.4;
+  user-select: none;
+  pointer-events: none;
+}
+a.button.medium {
+  padding: 15px 18px;
+  width: auto;
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+a.button.small {
+  padding: 10px 12px;
+  width: auto;
+  font-size: 14px;
+  font-weight: 500;
+}
+a.button.secondary {
+  background: var(--secondaryColor);
+}
+a.button.secondary:active, a.button.secondary:focus, a.button.secondary.active {
+  background: var(--secondaryShade4);
+  outline: none;
+}
+a.button.accent {
+  background: var(--accentColor);
+}
+a.button.accent:active, a.button.accent:focus, a.button.accent.active {
+  background: var(--accentShade4);
+}
+a.button.accent2 {
+  background: var(--accent2Color);
+}
+a.button.accent2:active, a.button.accent2:focus, a.button.accent2.active {
+  background: var(--accent2Shade4);
+}
+a.button.accent3 {
+  background: var(--accent3Color);
+}
+a.button.accent3:active, a.button.accent3:focus, a.button.accent3.active {
+  background: var(--accent3Shade4);
+}
+
+/*variations*/
+input.variation {
+  display: none;
+}
+input.variation + label {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  margin: 70px 20px 20px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 6px solid #fff;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+#bluepurple + label {
+  background: linear-gradient(to left, #673ab7 50%, #03a9f4 50%);
+}
+#bluepurple:checked ~ main {
+  --backgroundColor: #fff;
+  --foregroundColor: #111;
+  --primaryColor: #03a9f4;
+  --primaryShade1: #e1f5fe;
+  --primaryShade2: #b3e5fc;
+  --primaryShade3: #4fc3f7;
+  --primaryShade4: #0288d1;
+  --primaryShade5: #0277bd;
+  --secondaryColor: #673ab7;
+  --secondaryShade1: #ede7f6;
+  --secondaryShade2: #d1c4e9;
+  --secondaryShade3: #9575cd;
+  --secondaryShade4: #512da8;
+  --secondaryShade5: #311b92;
+  --accentColor: #009688;
+  --accentShade1: #e0f2f1;
+  --accentShade2: #b2dfdb;
+  --accentShade3: #4db6ac;
+  --accentShade4: #00796b;
+  --accentShade5: #004d40;
+  --accent2Color: #8bc34a;
+  --accent2Shade1: #e7f6d5;
+  --accent2Shade2: #c5e1a5;
+  --accent2Shade3: #aed581;
+  --accent2Shade4: #689f38;
+  --accent2Shade5: #558b2f;
+  --accent3Color: #f44336;
+  --accent3Shade1: #ffdde0;
+  --accent3Shade2: #ffcdd2;
+  --accent3Shade3: #ef9a9a;
+  --accent3Shade4: #d32f2f;
+  --accent3Shade5: #b71c1c;
+}
+
+#sunset + label {
+  background: linear-gradient(to right, #ff9557 50%, #ffcc67 50%);
+}
+#sunset:checked ~ main {
+  --canvasColor: #f9f9f9;
+  --backgroundColor: #fff;
+  --foregroundColor: #111;
+  --primaryColor: #ff9557;
+  --primaryShade1: #ffe2d1;
+  --primaryShade2: #ffceb2;
+  --primaryShade3: #ffb184;
+  --primaryShade4: #e88850;
+  --primaryShade5: #d17a48;
+  --secondaryColor: #ffcc67;
+  --secondaryShade1: #fff1d5;
+  --secondaryShade2: #ffde9e;
+  --secondaryShade3: #ffd074;
+  --secondaryShade4: #e8ba5e;
+  --secondaryShade5: #ba954b;
+  --accentColor: #4e5166;
+  --accentShade1: #cecfd5;
+  --accentShade2: #aeafb9;
+  --accentShade3: #8e909d;
+  --accentShade4: #6e7081;
+  --accentShade5: #404354;
+  --accent2Color: #588b8b;
+  --accent2Shade1: #c2d4d4;
+  --accent2Shade2: #a3bfbf;
+  --accent2Shade3: #85aaaa;
+  --accent2Shade4: #507f7f;
+  --accent2Shade5: #497272;
+  --accent3Color: #fe5f55;
+  --accent3Shade1: #fec4c1;
+  --accent3Shade2: #fea7a2;
+  --accent3Shade3: #fe7c73;
+  --accent3Shade4: #e7574e;
+  --accent3Shade5: #b9463e;
+}
+
+#godiva + label {
+  background: linear-gradient(to right, #a05793 50%, #a3d858 50%);
+}
+#godiva:checked ~ main {
+  --canvasColor: #f9f9f9;
+  --backgroundColor: #fff;
+  --foregroundColor: #111;
+  --primaryColor: #a05793;
+  --primaryShade1: #e5d1e1;
+  --primaryShade2: #d3b2cd;
+  --primaryShade3: #b984b0;
+  --primaryShade4: #925086;
+  --primaryShade5: #834879;
+  --secondaryColor: #a3d858;
+  --secondaryShade1: #e5f4d1;
+  --secondaryShade2: #cce9a3;
+  --secondaryShade3: #bce285;
+  --secondaryShade4: #95c550;
+  --secondaryShade5: #779e41;
+  --accentColor: #245e71;
+  --accentShade1: #d7e1e5;
+  --accentShade2: #afc4cb;
+  --accentShade3: #7398a4;
+  --accentShade4: #4b7b8a;
+  --accentShade5: #1e4d5d;
+  --accent2Color: #2aa5a1;
+  --accent2Shade1: #d8eeed;
+  --accent2Shade2: #9ed6d4;
+  --accent2Shade3: #64bdba;
+  --accent2Shade4: #279693;
+  --accent2Shade5: #1f7976;
+  --accent3Color: #92374d;
+  --accent3Shade1: #ebdad3;
+  --accent3Shade2: #cda4ae;
+  --accent3Shade3: #af6d7d;
+  --accent3Shade4: #853246;
+  --accent3Shade5: #6b2939;
+}
+
+#dark + label {
+  background: linear-gradient(to right, #367bc3 50%, #38bfa7 50%);
+}
+#dark:checked ~ main {
+  --canvasColor: #2a313b;
+  --backgroundColor: #2a313b;
+  --foregroundColor: #ebe8d8;
+  --primaryColor: #367bc3;
+  --primaryShade5: #b5cfe9;
+  --primaryShade4: #91b7de;
+  --primaryShade3: #5a93cd;
+  --primaryShade2: #3270b2;
+  --primaryShade1: #285a8e;
+  --secondaryColor: #38bfa7;
+  --secondaryShade5: #c8ede7;
+  --secondaryShade4: #92dccf;
+  --secondaryShade3: #6ed0be;
+  --secondaryShade2: #33ae98;
+  --secondaryShade1: #2e9d89;
+  --accentColor: #586994;
+  --accentShade5: #d1d6e1;
+  --accentShade4: #a3adc4;
+  --accentShade3: #7684a7;
+  --accentShade2: #49567a;
+  --accentShade1: #39435f;
+  --accent2Color: #8fe1a2;
+  --accent2Shade5: #d6f4dd;
+  --accent2Shade4: #c1eecc;
+  --accent2Shade3: #a3e6b2;
+  --accent2Shade2: #82cd94;
+  --accent2Shade1: #76b985;
+  --accent3Color: #fe938c;
+  --accent3Shade5: #fee1df;
+  --accent3Shade4: #fec4c0;
+  --accent3Shade3: #fea6a0;
+  --accent3Shade2: #e78680;
+  --accent3Shade1: #b96b66;
+  color: #f1f2eb;
+  border-color: #f1f2eb;
+}
+#dark:checked ~ main > section {
+  border-color: #f1f2eb;
+}
+#dark:checked ~ main > section > h6 {
+  color: #f1f2eb;
+}
+
+#pinkaru + label {
+  background: linear-gradient(to right, #f95794 50%, #323da5 50%);
+}
+#pinkaru:checked ~ main {
+  border-color: #fff;
+  --canvasColor: #2a313b;
+  --backgroundColor: #2a313b;
+  --foregroundColor: #e3f2fd;
+  --primaryColor: #f95794;
+  --primaryShade5: #fdd1e1;
+  --primaryShade4: #fba3c4;
+  --primaryShade3: #fa75a7;
+  --primaryShade2: #e35087;
+  --primaryShade1: #b6406c;
+  --secondaryColor: #323da5;
+  --secondaryShade5: #c7cae6;
+  --secondaryShade4: #8f95cd;
+  --secondaryShade3: #6971bd;
+  --secondaryShade2: #2e3896;
+  --secondaryShade1: #293288;
+  --accentColor: #FFC729;
+  --accentShade5: #ffefc4;
+  --accentShade4: #ffe08a;
+  --accentShade3: #ffd14f;
+  --accentShade2: #e8b526;
+  --accentShade1: #d1a322;
+  --accent2Color: #53dd6c;
+  --accent2Shade5: #d0f5d6;
+  --accent2Shade4: #a1ecae;
+  --accent2Shade3: #72e386;
+  --accent2Shade2: #4cc963;
+  --accent2Shade1: #3da14f;
+  --accent3Color: #f52f57;
+  --accent3Shade5: #fcc6d1;
+  --accent3Shade4: #f98da3;
+  --accent3Shade3: #f65475;
+  --accent3Shade2: #df2b50;
+  --accent3Shade1: #b32340;
+}
+#pinkaru:checked ~ main > section {
+  border-color: #fff;
+}
+#pinkaru:checked ~ main > section > h6 {
+  color: #fff;
+}
+
+footer {
+  display: grid;
+  text-align: center;
+  width: 90%;
+  margin: 1em auto 4em;
+  max-width: 800px;
+  align-items: center;
+}
+footer a {
+  text-decoration: none;
+  color: #333;
+  padding: 3px 0;
+  border-bottom: 1px dashed;
+}
+footer a:hover {
+  border-bottom: 1px solid;
+}
+footer .social a {
+  text-decoration: none !important;
+  margin-top: 20px;
+  margin-left: 10px;
+  border-bottom: 0;
+  display: inline-block;
+}
+footer .social a:hover {
+  color: #666;
+}
+footer .social a .icons {
+  display: inline-block;
+  font-size: 20px;
+}
+footer.dark, footer.dark a {
+  color: #f9f9f9;
+}
+
+.profile {
+  position: relative;
+  background: var(--backgroundColor);
+  color: var(--foregroundColor);
+  box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2);
+  border-radius: 10px;
+  transition: .2s ease;
+}
+.profile__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.profile__stats__title {
+  color: var(--grayColor);
+  text-transform: uppercase;
+  font-size: 16px;
+}
+.profile a:hover {
+  top: 0;
+  box-shadow: none;
+  background: var(--primaryShade4);
+}
+.profile a:active, .profile a:focus {
+  top: 0;
+  box-shadow: none;
+  background: var(--primaryShade5);
+}
+
+.profile-default {
+  min-width: 400px;
+  max-width: 450px;
+  margin: auto;
+  overflow: hidden;
+  display: grid;
+  grid: 340px auto auto/repeat(3, minmax(80px, 1fr));
+  grid-gap: 10px;
+}
+.profile-default .profile__image {
+  grid-column: span 3;
+}
+.profile-default .profile__image img {
+  border-bottom: 7px solid var(--secondaryColor);
+}
+.profile-default .profile__info {
+  grid-column: span 3;
+  margin: 20px 25px 0;
+}
+.profile-default .profile__stats {
+  margin: 5px 25px;
+}
+.profile-default .profile__cta {
+  grid-column: span 3;
+  margin: 0 25px 25px;
+}
+
+.profile-smallimg {
+  width: 300px;
+  border-radius: 10px;
+  text-align: center;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+  text-align: center;
+}
+.profile-smallimg .profile__image {
+  margin-top: -40px;
+}
+.profile-smallimg .profile__image img {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  border: 5px solid var(--backgroundColor);
+  box-shadow: 0 0 0 7px var(--secondaryColor);
+}
+.profile-smallimg .profile__info {
+  margin: 10px 30px 15px;
+}
+.profile-smallimg .profile__stats {
+  margin: 0 30px 10px;
+}
+.profile-smallimg .profile__stats:nth-of-type(n+4) {
+  display: none;
+}
+.profile-smallimg .profile__cta a {
+  border-radius: 0 0 10px 10px;
+}
+
+.profile-long {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr) 100px;
+  padding: 20px 20px 15px;
+  min-width: 570px;
+}
+.profile-long .profile__image {
+  grid-column: 5 / 6;
+  margin-bottom: 10px;
+}
+.profile-long .profile__image img {
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+}
+.profile-long .profile__info {
+  grid-column: 1 / 5;
+  grid-row: 1;
+  padding: 5px 20px 20px 0;
+}
+.profile-long .profile__stats {
+  min-width: 100px;
+  padding-top: 20px;
+  border-top: 0.5px solid var(--grayColor);
+}
+.profile-long .profile__cta {
+  grid-column: span 2;
+  border-top: 0.5px solid var(--grayColor);
+  padding-top: 15px;
+}
+
+.profile-table {
+  display: grid;
+  max-width: 780px;
+  grid-template-columns: 100px 1fr auto;
+  grid-auto-flow: dense;
+  overflow: hidden;
+}
+.profile-table .profile__image {
+  grid-column: 1;
+}
+.profile-table .profile__stats {
+  display: none;
+}
+.profile-table .profile__info {
+  grid-column: 2 / 5;
+  padding: 20px 15px 20px 20px;
+}
+.profile-table .profile__cta {
+  grid-column: 5 / 6;
+  align-self: center;
+  padding-right: 25px;
+}
+
+.profile-wide {
+  display: grid;
+  grid-template-columns: auto repeat(3, 1fr);
+  grid-auto-flow: dense;
+  min-width: 500px;
+  max-width: 590px;
+}
+.profile-wide .profile__image {
+  padding: 30px 20px 20px;
+  grid-row: 1 / 3;
+}
+.profile-wide .profile__image img {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  border: 3px solid var(--backgroundColor);
+  box-shadow: 0 0 0 4px var(--secondaryColor);
+}
+.profile-wide .profile__stats {
+  margin-bottom: 12px;
+}
+.profile-wide .profile__info {
+  grid-column: span 3;
+  padding: 25px 25px 15px 0;
+}
+.profile-wide .profile__cta {
+  grid-column: span 4;
+}
+.profile-wide .profile__cta a {
+  border-radius: 0 0 10px 10px;
+}
+
+.profile-imgonly {
+  border-radius: 10px;
+  overflow: hidden;
+  width: 300px;
+  display: grid;
+  grid: 390px 0px / 100%;
+}
+.profile-imgonly:hover {
+  grid: 334px 56px / 100%;
+}
+.profile-imgonly .profile__image, .profile-imgonly .profile__info {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+}
+.profile-imgonly .profile__image {
+  position: relative;
+}
+.profile-imgonly .profile__image:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 30%;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
+}
+.profile-imgonly .profile__stats {
+  display: none;
+}
+.profile-imgonly .profile__info {
+  z-index: 5;
+  grid-row: 1 / 2;
+  align-self: end;
+  margin: 10px 20px;
+  color: #fff;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+.profile-imgonly .profile__info p {
+  display: none;
+}
+.profile-imgonly .profile__cta a {
+  border-radius: 0;
+}
+
+.profile-bigimg {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 400px auto 0px;
+  border-radius: 10px;
+  width: 650px;
+  overflow: hidden;
+  margin: auto;
+}
+.profile-bigimg .profile__image {
+  grid-column: span 3;
+}
+.profile-bigimg .profile__info {
+  grid-column: span 2;
+  align-self: center;
+  padding: 20px 10px 20px 25px;
+}
+.profile-bigimg .profile__info h3 {
+  margin-bottom: 0;
+}
+.profile-bigimg .profile__info__extra {
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: max-height .3s ease, opacity .3s ease .3s, margin .3s ease;
+}
+.profile-bigimg .profile__stats {
+  display: none;
+}
+.profile-bigimg .profile__cta {
+  padding: 20px 20px 20px 0;
+  align-self: center;
+}
+.profile-bigimg:hover .profile__info__extra {
+  display: block;
+  max-height: 200px;
+  margin: 10px 0 0;
+  opacity: 1;
+}
+
+main {
+  display: grid;
+  grid-gap: 30px;
+  grid-template-columns: repeat(6, auto);
+  grid-template-rows: repeat(4, auto);
+  width: 550px;
+  justify-content: center;
+}
+
+section:nth-child(1) {
+  grid-column: 1 / 3;
+  justify-self: end;
+  align-self: end;
+}
+section:nth-child(2) {
+  grid-column: 3 / 5;
+}
+section:nth-child(3) {
+  grid-column: 5 / 7;
+  align-self: end;
+}
+section:nth-child(4) {
+  grid-column: 1 / 7;
+  justify-self: center;
+}
+section:nth-child(5) {
+  grid-column: 1 / 4;
+  justify-self: end;
+}
+section:nth-child(6) {
+  grid-column: 4 / 7;
+  align-self: center;
+}
+section:nth-child(7) {
+  grid-column: 1 / 7;
+}
+
+#dark:checked ~ main a.button,
+#pinkaru:checked ~ main a.button {
+  color: var(--foregroundColor);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+#dark:checked ~ main .button:hover,
+#pinkaru:checked ~ main .button:hover {
+  background: var(--primaryShade2);
+}
+#dark:checked ~ main .button:active,
+#pinkaru:checked ~ main .button:active {
+  background: var(--primaryShade1);
+}
+#dark:checked ~ main .profile-default img,
+#pinkaru:checked ~ main .profile-default img {
+  border-bottom: 7px solid var(--secondaryShade5);
+}
+#dark:checked ~ main .profile-smallimg img,
+#pinkaru:checked ~ main .profile-smallimg img {
+  box-shadow: 0 0 0 7px var(--secondaryShade5);
+}
+#dark:checked ~ main .profile-wide img,
+#pinkaru:checked ~ main .profile-wide img {
+  box-shadow: 0 0 0 4px var(--secondaryShade5);
+}
diff --git a/css-grid-card-variations/license.txt b/css-grid-card-variations/license.txt
new file mode 100644
index 0000000..c24af30
--- /dev/null
+++ b/css-grid-card-variations/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Olivia Ng (https://codepen.io/oliviale/pen/WqwOzv)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/css-grid-card-variations/src/index.pug b/css-grid-card-variations/src/index.pug
new file mode 100644
index 0000000..d9af485
--- /dev/null
+++ b/css-grid-card-variations/src/index.pug
@@ -0,0 +1,53 @@
+input#bluepurple.variation(type="radio" value="1" name="color" checked)
+label(for="bluepurple")
+
+input#sunset.variation(type="radio" value="2" name="color")
+label(for="sunset")
+
+input#godiva.variation(type="radio" value="3" name="color")
+label(for="godiva")
+
+input#dark.variation(type="radio" value="4" name="color")
+label(for="dark")
+
+input#pinkaru.variation(type="radio" value="5" name="color")
+label(for="pinkaru")
+
+
+main
+	each val in ['profile-imgonly','profile-default','profile-smallimg','profile-table','profile-wide','profile-long', 'profile-bigimg']
+		section
+			.profile(class= val)
+				.profile__image
+					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo")
+				.profile__info
+					h3 Doggo Dogg
+					p.profile__info__extra A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain.
+				.profile__stats
+					p.profile__stats__title Type
+					h5.profile__stats__info Puppy
+				.profile__stats
+					p.profile__stats__title Size
+					h5 Medium
+				.profile__stats
+					p.profile__stats__title Weight
+					h5.profile__stats__info 45.85 lbs
+				.profile__cta
+					a.button Adopt Doggo!
+					
+						
+
+footer
+	.explanation
+		| A continuation of  
+		a(href="https://codepen.io/oliviale/full/mgWjpq" target="_blank") this style guide
+		| . Also part of the 
+		a(href="https://codepen.io/collection/DQvYpQ" target="_blank") CSS Grid collection
+		| .
+	.social
+		a(href="https://twitter.com/meowlivia_" target="_blank")
+			i.icon-social-twitter.icons
+		a(href="https://github.com/oliviale" target="_blank")
+			i.icon-social-github.icons
+		a(href="https://dribbble.com/oliviale" target="_blank")
+			i.icon-social-dribbble.icons
\ No newline at end of file
diff --git a/css-grid-card-variations/src/style.scss b/css-grid-card-variations/src/style.scss
new file mode 100644
index 0000000..4c2f848
--- /dev/null
+++ b/css-grid-card-variations/src/style.scss
@@ -0,0 +1,930 @@
+:root {
+	--canvasColor: #f9f9f9;
+}
+
+body {
+	background: var(--canvasColor);
+	font-family: "Poppins", sans-serif;
+	font-weight: 300;
+	line-height: 1.5;
+	font-size: 16px;
+	text-align: center;
+	transition: all .3s ease;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+main {
+	--neutralShade1: #f2f2f2;
+	--neutralShade2: #e8e9e9;
+	--neutralShade3: #d1d3d4;
+	--neutralShade4: #babdbf;
+	--neutralShade5: #808488;
+	--neutralShade6: #666a6d;
+	--neutralShade7: #4d5052;
+	--neutralShade8: #212122;
+
+	--grayColor: #999;
+	--lightGrayColor: #ddd;
+
+	--borderRadius: 6px;
+	--boxShadow: 0 2px 5px rgba(#333, 0.2);
+}
+
+/*overall layout*/
+
+main {
+	margin: 3em auto 8em;
+	color: var(--foregroundColor);
+	text-align: left;
+}
+
+/*colors*/
+.palette {
+	display: grid;
+	grid: 80px 45px min-content / repeat(5, minmax(50px, 1fr));
+	margin-bottom: 1em;
+	&__main {
+		grid-column: span 5;
+	}
+	h5 {
+		grid-column: span 5;
+		text-align: left;
+		padding: 10px 0;
+	}
+	&.main {
+		div:nth-child(1) {
+			background: var(--primaryColor);
+		}
+		div:nth-child(2) {
+			background: var(--primaryShade1);
+		}
+		div:nth-child(3) {
+			background: var(--primaryShade2);
+		}
+		div:nth-child(4) {
+			background: var(--primaryShade3);
+		}
+		div:nth-child(5) {
+			background: var(--primaryShade4);
+		}
+		div:nth-child(6) {
+			background: var(--primaryShade5);
+		}
+	}
+	&.secondary {
+		div:nth-child(1) {
+			background: var(--secondaryColor);
+		}
+		div:nth-child(2) {
+			background: var(--secondaryShade1);
+		}
+		div:nth-child(3) {
+			background: var(--secondaryShade2);
+		}
+		div:nth-child(4) {
+			background: var(--secondaryShade3);
+		}
+		div:nth-child(5) {
+			background: var(--secondaryShade4);
+		}
+		div:nth-child(6) {
+			background: var(--secondaryShade5);
+		}
+	}
+	&.accent1 {
+		div:nth-child(1) {
+			background: var(--accentColor);
+		}
+		div:nth-child(2) {
+			background: var(--accentShade1);
+		}
+		div:nth-child(3) {
+			background: var(--accentShade2);
+		}
+		div:nth-child(4) {
+			background: var(--accentShade3);
+		}
+		div:nth-child(5) {
+			background: var(--accentShade4);
+		}
+		div:nth-child(6) {
+			background: var(--accentShade5);
+		}
+	}
+	&.accent2 {
+		div:nth-child(1) {
+			background: var(--accent2Color);
+		}
+		div:nth-child(2) {
+			background: var(--accent2Shade1);
+		}
+		div:nth-child(3) {
+			background: var(--accent2Shade2);
+		}
+		div:nth-child(4) {
+			background: var(--accent2Shade3);
+		}
+		div:nth-child(5) {
+			background: var(--accent2Shade4);
+		}
+		div:nth-child(6) {
+			background: var(--accent2Shade5);
+		}
+	}
+	&.accent3 {
+		div:nth-child(1) {
+			background: var(--accent3Color);
+		}
+		div:nth-child(2) {
+			background: var(--accent3Shade1);
+		}
+		div:nth-child(3) {
+			background: var(--accent3Shade2);
+		}
+		div:nth-child(4) {
+			background: var(--accent3Shade3);
+		}
+		div:nth-child(5) {
+			background: var(--accent3Shade4);
+		}
+		div:nth-child(6) {
+			background: var(--accent3Shade5);
+		}
+	}
+	&.neutrals {
+		grid-template-rows: repeat(2, 50px) min-content;
+		grid-template-columns: repeat(4, 1fr);
+		div:nth-child(1) {
+			background: var(--neutralShade1);
+		}
+		div:nth-child(2) {
+			background: var(--neutralShade2);
+		}
+		div:nth-child(3) {
+			background: var(--neutralShade3);
+		}
+		div:nth-child(4) {
+			background: var(--neutralShade4);
+		}
+		div:nth-child(5) {
+			background: var(--neutralShade5);
+			grid-row: 2;
+		}
+		div:nth-child(6) {
+			background: var(--neutralShade6);
+			grid-row: 2;
+		}
+		div:nth-child(7) {
+			background: var(--neutralShade7);
+			grid-row: 2;
+		}
+		div:nth-child(8) {
+			background: var(--neutralShade8);
+			grid-row: 2;
+		}
+	}
+}
+
+/*typography*/
+strong {
+	font-weight: 500;
+}
+
+em {
+	font-style: italic;
+}
+
+h1 {
+	font: 700 48px/1.2 "Poppins", sans-serif;
+	margin-bottom: 10px;
+}
+
+h2 {
+	font: 700 32px/1.2 "Poppins", sans-serif;
+	margin-bottom: 10px;
+}
+
+h3 {
+	font: 700 24px/1.2 "Poppins", sans-serif;
+	margin-bottom: 10px;
+}
+
+h4 {
+	font: 700 20px/1.2 "Poppins", sans-serif;
+	margin-bottom: 10px;
+}
+
+h5 {
+	font: 500 18px/1.2 "Poppins", sans-serif;
+	margin-bottom: 10px;
+}
+
+h6 {
+	font: 500 16px/1.2 "Poppins", sans-serif;
+	text-transform: uppercase;
+}
+
+/*buttons & links*/
+
+a.button {
+	outline: none;
+	width: 100%;
+	text-align: center;
+	display: inline-block;
+	border: none;
+	font: 500 16px/1 "Poppins", sans-serif;
+	padding: 20px;
+	cursor: pointer;
+	border-radius: var(--borderRadius);
+	background: var(--primaryColor);
+	color: var(--backgroundColor);
+	position: relative;
+	top: 0;
+	transition: 0.2s ease;
+	&:hover,
+	&.hover {
+		top: -3px;
+		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+	}
+	&:active,
+	&.active {
+		background: var(--primaryShade4);
+		outline: none;
+		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+		top: 0;
+	}
+	&.disabled {
+		opacity: 0.4;
+		user-select: none;
+		pointer-events: none;
+	}
+	&.medium {
+		padding: 15px 18px;
+		width: auto;
+		margin-right: 20px;
+		margin-bottom: 20px;
+	}
+	&.small {
+		padding: 10px 12px;
+		width: auto;
+		font-size: 14px;
+		font-weight: 500;
+	}
+	&.secondary {
+		background: var(--secondaryColor);
+		&:active,
+		&:focus,
+		&.active {
+			background: var(--secondaryShade4);
+			outline: none;
+		}
+	}
+	&.accent {
+		background: var(--accentColor);
+		&:active,
+		&:focus,
+		&.active {
+			background: var(--accentShade4);
+		}
+	}
+	&.accent2 {
+		background: var(--accent2Color);
+		&:active,
+		&:focus,
+		&.active {
+			background: var(--accent2Shade4);
+		}
+	}
+	&.accent3 {
+		background: var(--accent3Color);
+		&:active,
+		&:focus,
+		&.active {
+			background: var(--accent3Shade4);
+		}
+	}
+}
+
+/*variations*/
+input.variation {
+	display: none;
+	+ label {
+		display: inline-block;
+		width: 50px;
+		height: 50px;
+		margin: 70px 20px 20px;
+		border-radius: 50%;
+		cursor: pointer;
+		border: 6px solid #fff;
+		box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
+	}
+}
+
+#bluepurple {
+	+ label {
+		background: linear-gradient(to left, #673ab7 50%, #03a9f4 50%);
+	}
+	&:checked ~ main {
+		--backgroundColor: #fff;
+		--foregroundColor: #111;
+		--primaryColor: #03a9f4;
+		--primaryShade1: #e1f5fe;
+		--primaryShade2: #b3e5fc;
+		--primaryShade3: #4fc3f7;
+		--primaryShade4: #0288d1;
+		--primaryShade5: #0277bd;
+		--secondaryColor: #673ab7;
+		--secondaryShade1: #ede7f6;
+		--secondaryShade2: #d1c4e9;
+		--secondaryShade3: #9575cd;
+		--secondaryShade4: #512da8;
+		--secondaryShade5: #311b92;
+		--accentColor: #009688;
+		--accentShade1: #e0f2f1;
+		--accentShade2: #b2dfdb;
+		--accentShade3: #4db6ac;
+		--accentShade4: #00796b;
+		--accentShade5: #004d40;
+		--accent2Color: #8bc34a;
+		--accent2Shade1: #e7f6d5;
+		--accent2Shade2: #c5e1a5;
+		--accent2Shade3: #aed581;
+		--accent2Shade4: #689f38;
+		--accent2Shade5: #558b2f;
+		--accent3Color: #f44336;
+		--accent3Shade1: #ffdde0;
+		--accent3Shade2: #ffcdd2;
+		--accent3Shade3: #ef9a9a;
+		--accent3Shade4: #d32f2f;
+		--accent3Shade5: #b71c1c;
+	}
+}
+
+#sunset {
+	+ label {
+		background: linear-gradient(to right, #ff9557 50%, #ffcc67 50%);
+	}
+	&:checked ~ main {
+		--canvasColor: #f9f9f9;
+		--backgroundColor: #fff;
+		--foregroundColor: #111;
+		--primaryColor: #ff9557;
+		--primaryShade1: #ffe2d1;
+		--primaryShade2: #ffceb2;
+		--primaryShade3: #ffb184;
+		--primaryShade4: #e88850;
+		--primaryShade5: #d17a48;
+		--secondaryColor: #ffcc67;
+		--secondaryShade1: #fff1d5;
+		--secondaryShade2: #ffde9e;
+		--secondaryShade3: #ffd074;
+		--secondaryShade4: #e8ba5e;
+		--secondaryShade5: #ba954b;
+		--accentColor: #4e5166;
+		--accentShade1: #cecfd5;
+		--accentShade2: #aeafb9;
+		--accentShade3: #8e909d;
+		--accentShade4: #6e7081;
+		--accentShade5: #404354;
+		--accent2Color: #588b8b;
+		--accent2Shade1: #c2d4d4;
+		--accent2Shade2: #a3bfbf;
+		--accent2Shade3: #85aaaa;
+		--accent2Shade4: #507f7f;
+		--accent2Shade5: #497272;
+		--accent3Color: #fe5f55;
+		--accent3Shade1: #fec4c1;
+		--accent3Shade2: #fea7a2;
+		--accent3Shade3: #fe7c73;
+		--accent3Shade4: #e7574e;
+		--accent3Shade5: #b9463e;
+	}
+}
+
+#godiva {
+	+ label {
+		background: linear-gradient(to right, #a05793 50%, #a3d858 50%);
+	}
+	&:checked ~ main {
+		--canvasColor: #f9f9f9;
+		--backgroundColor: #fff;
+		--foregroundColor: #111;
+
+		--primaryColor: #a05793;
+		--primaryShade1: #e5d1e1;
+		--primaryShade2: #d3b2cd;
+		--primaryShade3: #b984b0;
+		--primaryShade4: #925086;
+		--primaryShade5: #834879;
+
+		--secondaryColor: #a3d858;
+		--secondaryShade1: #e5f4d1;
+		--secondaryShade2: #cce9a3;
+		--secondaryShade3: #bce285;
+		--secondaryShade4: #95c550;
+		--secondaryShade5: #779e41;
+
+		--accentColor: #245e71;
+		--accentShade1: #d7e1e5;
+		--accentShade2: #afc4cb;
+		--accentShade3: #7398a4;
+		--accentShade4: #4b7b8a;
+		--accentShade5: #1e4d5d;
+
+		--accent2Color: #2aa5a1;
+		--accent2Shade1: #d8eeed;
+		--accent2Shade2: #9ed6d4;
+		--accent2Shade3: #64bdba;
+		--accent2Shade4: #279693;
+		--accent2Shade5: #1f7976;
+
+		--accent3Color: #92374d;
+		--accent3Shade1: #ebdad3;
+		--accent3Shade2: #cda4ae;
+		--accent3Shade3: #af6d7d;
+		--accent3Shade4: #853246;
+		--accent3Shade5: #6b2939;
+	}
+}
+
+#dark {
+	+ label {
+		background: linear-gradient(to right, #367bc3 50%, #38bfa7 50%);
+	}
+	&:checked ~ main {
+		--canvasColor: #2a313b;
+		--backgroundColor: #2a313b;
+		--foregroundColor: #ebe8d8;
+
+		--primaryColor: #367bc3;
+		--primaryShade5: #b5cfe9;
+		--primaryShade4: #91b7de;
+		--primaryShade3: #5a93cd;
+		--primaryShade2: #3270b2;
+		--primaryShade1: #285a8e;
+
+		--secondaryColor: #38bfa7;
+		--secondaryShade5: #c8ede7;
+		--secondaryShade4: #92dccf;
+		--secondaryShade3: #6ed0be;
+		--secondaryShade2: #33ae98;
+		--secondaryShade1: #2e9d89;
+
+		--accentColor: #586994;
+		--accentShade5: #d1d6e1;
+		--accentShade4: #a3adc4;
+		--accentShade3: #7684a7;
+		--accentShade2: #49567a;
+		--accentShade1: #39435f;
+
+		--accent2Color: #8fe1a2;
+		--accent2Shade5: #d6f4dd;
+		--accent2Shade4: #c1eecc;
+		--accent2Shade3: #a3e6b2;
+		--accent2Shade2: #82cd94;
+		--accent2Shade1: #76b985;
+
+		--accent3Color: #fe938c;
+		--accent3Shade5: #fee1df;
+		--accent3Shade4: #fec4c0;
+		--accent3Shade3: #fea6a0;
+		--accent3Shade2: #e78680;
+		--accent3Shade1: #b96b66;
+		color: #f1f2eb;
+		border-color: #f1f2eb;
+		> section {
+			border-color: #f1f2eb;
+			> h6 {
+				color: #f1f2eb;
+			}
+		}
+	}
+}
+
+#pinkaru {
+	+ label {
+		background: linear-gradient(to right, #f95794 50%, #323da5 50%);
+	}
+	&:checked ~ main {
+		border-color: #fff;
+		> section {
+			border-color: #fff;
+			> h6 {
+				color: #fff;
+			}
+		}
+		--canvasColor: #2a313b;
+		--backgroundColor: #2a313b;
+		--foregroundColor: #e3f2fd;
+
+		--primaryColor: #f95794;
+		--primaryShade5: #fdd1e1;
+		--primaryShade4: #fba3c4;
+		--primaryShade3: #fa75a7;
+		--primaryShade2: #e35087;
+		--primaryShade1: #b6406c;
+
+		--secondaryColor: #323da5;
+		--secondaryShade5: #c7cae6;
+		--secondaryShade4: #8f95cd;
+		--secondaryShade3: #6971bd;
+		--secondaryShade2: #2e3896;
+		--secondaryShade1: #293288;
+
+		--accentColor: #FFC729;
+		--accentShade5: #ffefc4;
+		--accentShade4: #ffe08a;
+		--accentShade3: #ffd14f;
+		--accentShade2: #e8b526;
+		--accentShade1: #d1a322;
+
+		--accent2Color: #53dd6c;
+		--accent2Shade5: #d0f5d6;
+		--accent2Shade4: #a1ecae;
+		--accent2Shade3: #72e386;
+		--accent2Shade2: #4cc963;
+		--accent2Shade1: #3da14f;
+
+		--accent3Color: #f52f57;
+		--accent3Shade5: #fcc6d1;
+		--accent3Shade4: #f98da3;
+		--accent3Shade3: #f65475;
+		--accent3Shade2: #df2b50;
+		--accent3Shade1: #b32340;
+	}
+}
+
+
+footer {
+	display: grid;
+	text-align: center;
+	width: 90%;
+	margin: 1em auto 4em;
+	max-width: 800px;
+	align-items: center;
+	a {
+		text-decoration: none;
+		color: #333;
+		padding: 3px 0;
+		border-bottom: 1px dashed;
+		&:hover {
+			border-bottom: 1px solid;
+		}
+	}
+	.social a {
+		text-decoration: none !important;
+		margin-top: 20px;
+		margin-left: 10px;
+		border-bottom: 0;
+		display: inline-block;
+		&:hover {
+			color: #666;
+		}
+		.icons {
+			display: inline-block;
+			font-size: 20px;
+		}
+	}
+	&.dark, &.dark a {
+		color: #f9f9f9;
+	}
+}
+
+
+
+
+.profile {
+	position: relative;
+	background: var(--backgroundColor);
+	color: var(--foregroundColor);
+	box-shadow: 0 3px 15px rgba(#333,0.2);
+	border-radius: 10px;
+	transition: .2s ease;
+	&__image {
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+	}
+	&__stats {
+		&__title {
+			color: var(--grayColor);
+			text-transform: uppercase;
+			font-size: 16px;
+		}
+	}
+	a {
+		&:hover {
+			top: 0;
+			box-shadow: none;
+			background: var(--primaryShade4);
+		}
+		&:active, &:focus {
+			top: 0;
+			box-shadow: none;
+			background: var(--primaryShade5);
+		}
+	}
+}
+
+.profile-default {
+	min-width: 400px;
+	max-width: 450px;
+	margin: auto;
+	overflow: hidden;
+	display: grid;
+	grid: 340px auto auto / repeat(3,minmax(80px,1fr));
+	grid-gap: 10px;
+	.profile__image {
+		grid-column: span 3;
+		img {
+			border-bottom: 7px solid var(--secondaryColor);
+		}
+	}
+	.profile__info {
+		grid-column: span 3;
+		margin: 20px 25px 0;
+	}
+	.profile__stats {
+		margin: 5px 25px;
+	}
+	.profile__cta {
+		grid-column: span 3;
+		margin: 0 25px 25px;
+	}
+}
+
+.profile-smallimg {
+	width: 300px;
+	border-radius: 10px;
+	text-align: center;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-gap: 10px;
+	text-align: center;
+	.profile__image {
+		margin-top: -40px;
+		img {
+			width: 120px;
+			height: 120px;
+			border-radius: 50%;
+			border: 5px solid var(--backgroundColor);
+			box-shadow: 0 0 0 7px var(--secondaryColor);
+		}
+	}
+	.profile__info {
+		margin: 10px 30px 15px;
+	}
+	.profile__stats {
+		margin: 0 30px 10px;
+		&:nth-of-type(n+4) {
+			display: none;
+		}
+	}
+	.profile__cta {
+		a {
+			border-radius: 0 0 10px 10px;
+		}
+	}
+}
+
+.profile-long {
+	display: grid;
+	grid-template-columns: repeat(4,1fr) 100px;
+	padding: 20px 20px 15px;
+	min-width: 570px;
+	.profile__image {
+		grid-column: 5 / 6;
+		margin-bottom: 10px;
+		img {
+			border-radius: 50%;
+			width: 100px;
+			height: 100px;
+		}
+	}
+	.profile__info {
+		grid-column: 1 / 5;
+		grid-row: 1;
+		padding: 5px 20px 20px 0;
+	}
+	.profile__stats {
+		min-width: 100px;
+		padding-top: 20px;
+		border-top: .5px solid var(--grayColor);
+	}
+	.profile__cta {
+		grid-column: span 2;
+		border-top: .5px solid var(--grayColor);
+		padding-top: 15px;
+	}
+}
+
+.profile-table {
+	display: grid;
+	max-width: 780px;
+	grid-template-columns: 100px 1fr auto;
+	grid-auto-flow: dense;
+	overflow: hidden;
+	.profile__image {
+		grid-column: 1;
+	}
+	.profile__stats {
+		display: none;
+	}
+	.profile__info {
+		grid-column: 2 / 5;
+		padding: 20px 15px 20px 20px;
+	}
+	.profile__cta {
+		grid-column: 5 / 6;
+		align-self: center;
+		padding-right: 25px;
+	}
+}
+
+.profile-wide {
+	display: grid;
+	grid-template-columns: auto repeat(3,1fr);
+	grid-auto-flow: dense;
+	min-width: 500px;
+	max-width: 590px;
+	.profile__image {
+		padding: 30px 20px 20px;
+		grid-row: 1 / 3;
+		img {
+			width: 120px;
+			height: 120px;
+			border-radius: 50%;
+			border: 3px solid var(--backgroundColor);
+			box-shadow: 0 0 0 4px var(--secondaryColor);
+		}
+	}
+	.profile__stats {
+		margin-bottom: 12px;
+	}
+	.profile__info {
+		grid-column: span 3;
+		padding: 25px 25px 15px 0;
+	}
+	.profile__cta {
+		grid-column: span 4;
+		a {
+			border-radius: 0 0 10px 10px;
+		}
+	}
+}
+
+.profile-imgonly {
+	border-radius: 10px;
+	overflow: hidden;
+	width: 300px;
+	display: grid;
+	grid: 390px 0px / 100%;
+	&:hover {
+		grid: 334px 56px / 100%;
+	}
+	.profile__image, .profile__info {
+		grid-row: 1 / 2;
+		grid-column: 1 / 2;
+	}
+	.profile__image {
+		position: relative;
+		&:after {
+			content: '';
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 30%;
+			background: linear-gradient(to top, rgba(0,0,0,0.65),rgba(0,0,0,0));
+		}
+	}
+	.profile__stats {
+		display: none;
+	}
+	.profile__info {
+		z-index: 5;
+		grid-row: 1 / 2;
+		align-self: end;
+		margin: 10px 20px;
+		color: #fff;
+		text-shadow: 0 1px 4px rgba(0,0,0,0.2);
+		p {
+			display: none;
+		}
+	}
+	.profile__cta a {
+		border-radius: 0;
+	}
+}
+
+.profile-bigimg {
+	display: grid;
+	grid-template-columns: repeat(3,1fr);
+	grid-template-rows: 400px auto 0px;
+	border-radius: 10px;
+	width: 650px;
+	overflow: hidden;
+	margin: auto;
+	.profile__image {
+		grid-column: span 3;
+	}
+	.profile__info {
+		grid-column: span 2;
+		align-self: center;
+		padding: 20px 10px 20px 25px;
+		h3 {
+			margin-bottom: 0;
+		}
+		&__extra {
+			max-height: 0;
+			overflow: hidden;
+			opacity: 0;
+			transition: max-height .3s ease, opacity .3s ease .3s, margin .3s ease;
+		}
+	}
+	.profile__stats {
+		display: none;
+	}
+	.profile__cta { 
+		padding: 20px 20px 20px 0;
+		align-self: center;
+	}
+	&:hover {
+		.profile__info__extra {
+			display: block;
+			max-height: 200px;
+			margin: 10px 0 0;
+			opacity: 1;
+		}
+	}
+}
+
+main {
+	display: grid;
+	grid-gap: 30px;
+	grid-template-columns: repeat(6,auto);
+	grid-template-rows: repeat(4,auto);
+	width: 550px;
+	justify-content: center;
+}
+
+section {
+	&:nth-child(1) {
+		grid-column: 1 / 3;
+		justify-self: end;
+		align-self: end;
+	}
+	&:nth-child(2) {
+		grid-column: 3 / 5;
+	}
+	&:nth-child(3) {
+		grid-column: 5 / 7;
+		align-self: end;
+	}
+	&:nth-child(4) {
+		grid-column: 1 / 7;
+		justify-self: center;
+	}
+	&:nth-child(5) {
+		grid-column: 1 / 4;
+		justify-self: end;
+	}
+	&:nth-child(6) {
+		grid-column: 4 / 7;
+		align-self: center;
+	}
+	&:nth-child(7) {
+		grid-column: 1 / 7;
+	}
+	
+}
+
+#dark,
+#pinkaru {
+	&:checked ~ main {
+		a.button {
+			color: var(--foregroundColor);
+			text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+		}
+		.button:hover {
+			background: var(--primaryShade2);
+		}
+		.button:active {
+			background: var(--primaryShade1);
+		}
+		.profile-default img {
+			border-bottom: 7px solid var(--secondaryShade5);
+		}
+		.profile-smallimg img {
+			box-shadow: 0 0 0 7px var(--secondaryShade5);
+		}
+		.profile-wide img {
+			box-shadow: 0 0 0 4px var(--secondaryShade5);
+		}
+	}
+}
\ No newline at end of file
diff --git a/css-grid-newspaper-layout/README.markdown b/css-grid-newspaper-layout/README.markdown
new file mode 100644
index 0000000..d575c03
--- /dev/null
+++ b/css-grid-newspaper-layout/README.markdown
@@ -0,0 +1,7 @@
+# CSS Grid: Newspaper Layout
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/oliviale/pen/BaoXOOP](https://codepen.io/oliviale/pen/BaoXOOP).
+
+"Young" front-end designer lmao.
+
+Background from [Subtle Patterns](https://www.toptal.com/designers/subtlepatterns/)
diff --git a/css-grid-newspaper-layout/dist/index.html b/css-grid-newspaper-layout/dist/index.html
new file mode 100644
index 0000000..121b748
--- /dev/null
+++ b/css-grid-newspaper-layout/dist/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS Grid: Newspaper Layout</title>
+  <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital@0;1&family=Playfair+Display+SC:wght@900&family=Playfair+Display:ital,wght@0,800;1,800&family=Manrope:wght@800&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="main__wrapper">
+  <main>
+    <h1>The Codepen Times</h1>
+    <aside> 
+      <div>
+        <div class="issue">Issue #1 </div>
+        <div class="date">Tuesday, 26 May, 2020</div>
+        <div class="edition">Two memes Edition</div>
+      </div>
+    </aside>
+    <h2 class="title--large main-title">Woman spends too much time on Codepens despite advice; no plans to stop</h2>
+    <div class="main-text multi-column">
+      <p>Sometimes, Internet users land themselves in an uncommon situation where an app or website can be used for both work and personal situations. Well, a young front-end designer was spending up to 13 hours on the site, Codepen for work and her hobby, which unfortunately, is also coding. </p>
+      <p>The designer, whose work includes a  <em>To-Do Terrarium</em>, clarified, "Well, I didn't  <em> have  </em>to use it for work but it was already part of my workflow. It just made sense as it was more efficient."   The biggest issue, she said, is that she would hop on Codepen for work, but would get distracted by pens made by others in the community for unexpectedly long periods of time, which then causes her to spend even more time on the site.</p>
+      <p> "I mean, that's terrible right?" she asked. Codepen, which brands itself as the best place to build, test, and discover front-end code, has declined to comment at this time.</p>
+    </div><a class="terrarium" href="https://codepen.io/oliviale/full/oNXJgEM" target="_blank">
+      <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-terrarium.jpg"/>
+        <figcaption>A to-do list that grows succulents when you've completed a task</figcaption>
+      </figure></a><a class="item-with-image plan span--2 long--2" href="https://codepen.io/oliviale/full/moLrBq" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-floorplan.jpg"/>
+      <h4>Can you get inspired to make your own floor plans?</h4>
+      <div class="multi-column">
+        <p>Making a floor Plan with CSS Grid? Talk about using the wrong tool for the job. But I guess this is what happens when someone isn't happy with any of the floor plans found on Pinterest; she'll start making her own for the eventual home that she will never own. Nevertheless, there's a home office with a large window to look out of pensively during rainy days and a ton of "white space" for the cats to run around.</p>
+      </div></a><a class="hogwarts" href="https://codepen.io/oliviale/full/MZZYyO" target="_blank">
+      <div class="hogwarts__title">50% Off Hogwarts Express tickets</div>
+      <div class="hogwarts__image"> <span>Limited time offer</span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-hogwarts.svg"/></div></a><a class="item-with-image pasta with-border" href="https://codepen.io/oliviale/full/zYvxXWw" target="_blank">
+      <h4>A pasta menu</h4>
+      <p>Everybody loves pasta. It's impossible to not love them, so here are 15 recipes, served with GSAP. Note the easter egg — the menu icon changes according to the pasta that you choose.</p></a><a class="item-with-image magazine with-border" href="https://codepen.io/oliviale/full/GRKQoKM" target="_blank">
+      <h4>Marvel at a magazine</h4>
+      <p>A tribute of sorts to an era of cool superhero movies, this is a Marvel-themed magazine! Recommended, because it took 45 hours, so you know some serious dedication has been poured into this.</p></a><a class="item-with-image style" href="https://codepen.io/collection/XJyNPm" target="_blank">
+      <h4>Let's adopt, don't shop.</h4>
+      <p>Explore a style guide and various page layouts for a pet adoption site in the  <em>Style Guide</em> collection. Inspired by the <em>Atomic Design</em> principle, this 8-pen collection includes a 404 page concept, an admin dashboard and what a Twitter user calls a 'media card zen garden'. Each pen comes with five (yes, five) color themes, including the  precious dark mode.</p></a><a class="item-with-image toggles" href="https://codepen.io/oliviale/full/xxboXzo" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-toggle.gif"/>
+      <h4>Toggles</h4>
+      <p>Eight playful toggles to toggle on and off for your amusement. Is it possible to use these on your site and still adhere to assessibility rules? No. But there's a really cute dog one you <em>have  </em>to see.</p></a><a class="menu" href="https://codepen.io/oliviale/full/LYYrKMV" target="_blank">
+      <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-menu.jpg"/>
+        <figcaption>See the new and improved menu for Toasty!</figcaption>
+      </figure></a><a class="social" href="https://codepen.io/oliviale/full/QWjjrZX" tagrget="_blank"><img class="social__image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-social.gif"/>
+      <div class="social__subtitle">World News</div>
+      <div class="social__content">Looks like Covid-19 is gonna be around for a while so here is another friendly reminder to practice social distancing. Oh, and wear a mask! </div></a>
+    <div class="item-with-image cssgrid-collection"><a class="cssgrid-collection__image" href="https://codepen.io/collection/DQvYpQ" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-co-grid.jpg"/></a>
+      <div class="cssgrid-collection__content">
+        <h4> <a href="https://codepen.io/collection/DQvYpQ" target="_blank">More CSS Grid things like this one. Shelves, coupons and more!  </a></h4>
+        <div class="multi-column-3">
+          <p>Get your fill of more CSS Grid items in this collection. There are a total of 32 pens to date... well, 33, if you count this one too. What can you expect in this collection? The hidden gems, in my totally  unbiased opinion, are <a href="https://codepen.io/oliviale/full/wbyVWr" target="_blank">the recreation of the Pac-Man layout</a> and  <a href="https://codepen.io/oliviale/pen/wbyVWr" target="_blank">coupons inspired by junk mail</a>. A lot of joke items of things that shouldn't be done in CSS Grid, such as <a href="https://codepen.io/oliviale/full/PXGgMG" target="_blank">a shelf</a>?   <a href="https://codepen.io/oliviale/full/qggOog" target="_blank">Bathroom tiles wtf</a>? and  <a href="https://codepen.io/oliviale/full/bOWqbj" target="_blank">makeup palettes </a>. If you are a cultured person, you will have a chance to enjoy a couple of pens inspired by <a href="https://codepen.io/oliviale/full/JxVZpX" target="_blank">Harry Potter  </a>and  <a href="https://codepen.io/oliviale/full/RwNdeeQ" target="_blank">Pokemon.</a> On the rare occasion that you are looking at this profile for something you can use in production, you really shouldn't. But, there are <em> some   </em>real-world applications, such as <a href="https://codepen.io/oliviale/full/GPXozx" target="_blank">the recipe layout</a>,   <a href="https://codepen.io/oliviale/full/pqoEoJ" target="_blank">the product catalog</a>, and  <a href="https://codepen.io/oliviale/full/XyqQYL" target="_blank">color palettes for a style guide</a>.</p>
+        </div>
+      </div>
+    </div>
+    <div class="sidebar">
+      <h3 class="title--big">Hot this month</h3><a class="codepen-item pie" href="https://codepen.io/oliviale/full/BaovGmg" target="_blank"><img class="pie__image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-pie.jpg"/>
+        <div class="pie__subtitle">Food </div>
+        <div class="pie__content">
+          <h4>Pies for everyone!</h4>
+          <p>No man is left behind. There's infinite pie with this one div and a repeating background.</p>
+        </div></a><a class="sidebar-item captcha" href="https://codepen.io/oliviale/full/RwWdNRd" target="_blank">
+        <h5>Frustrated designer runs amok with Captcha ideas</h5>
+        <p>From Tic Tac Toe to solving meme-based questions, this is a different take on how web captchas should be. "I have not successfully picked out all photos of a truck on the first try. Something's gotta change," says the designer, who has requested to remain anonymous.</p></a><a class="sidebar-item slack-ui with-border" href="https://codepen.io/oliviale/full/GRpvNBa" target="_blank">
+        <h5>Slack UI gets reverse engineered</h5>
+        <p>Another valiant effort to reverse engineer a web app. However, the UI is repurposed to showcase Codepens instead of mock conversations. This is a codepen showcase inception situation.</p></a><a class="workout" href="https://codepen.io/oliviale/full/RwWKybY" target="_blank">
+        <div class="workout__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-workout.jpg" alt="Workout"/></div>
+        <div class="workout__blurb">Always failing to keep track of your workouts? </div>
+        <div class="workout__title">Use this tool!</div></a>
+    </div>
+  </main>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/css-grid-newspaper-layout/dist/script.js b/css-grid-newspaper-layout/dist/script.js
new file mode 100644
index 0000000..5824fe5
--- /dev/null
+++ b/css-grid-newspaper-layout/dist/script.js
@@ -0,0 +1 @@
+// 🦝 trash panda 🦝
\ No newline at end of file
diff --git a/css-grid-newspaper-layout/dist/style.css b/css-grid-newspaper-layout/dist/style.css
new file mode 100644
index 0000000..f10f6bf
--- /dev/null
+++ b/css-grid-newspaper-layout/dist/style.css
@@ -0,0 +1,599 @@
+:root {
+  --font: "EB Garamond", serif;
+  --font-title: "Playfair Display", serif;
+  --font-sans-serif: "Manrope", sans-serif;
+  --black: #1c1f33;
+  --gray: #eee;
+  --gray-1: #ededed;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-size: 1.1rem;
+  background: var(--preview-bg);
+  font-family: var(--font);
+  color: var(--black);
+  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/paper_fibers.png) repeat;
+  padding: 4rem 2rem;
+  line-height: 1.3;
+  text-align: justify;
+  column-break-inside: avoid;
+}
+
+a {
+  text-decoration: none;
+  display: block;
+  color: var(--black);
+}
+a:hover, a:focus, a:active, a:visited {
+  color: var(--black);
+}
+
+.main__wrapper {
+  max-width: 1135px;
+  margin: auto;
+}
+
+h1 {
+  font: 50px/1 "Playfair Display SC";
+  text-align: center;
+}
+@media (min-width: 700px) {
+  h1 {
+    font: 70px/1 "Playfair Display SC";
+  }
+}
+
+h3 {
+  font: italic 20px var(--font-title);
+  margin-bottom: 1rem;
+}
+
+h4 {
+  font: 20px/1.2 var(--font-title);
+}
+
+h5 {
+  font: 700 20px/1 var(--font);
+  transition: 0.3s ease;
+}
+
+p {
+  line-height: 1.3;
+}
+p a {
+  display: inline;
+}
+
+em {
+  font-style: italic;
+}
+
+.title--large {
+  font-family: var(--font-title);
+  font-size: 32px;
+  font-style: italic;
+  text-align: left;
+  margin-bottom: 0.8rem;
+}
+@media (min-width: 700px) {
+  .title--large {
+    font-size: 42px;
+    margin: 0;
+  }
+}
+
+@media (min-width: 700px) {
+  main {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr) 23%;
+    grid-template-rows: repeat(5, auto);
+    grid-gap: 1.2rem;
+  }
+}
+main h1,
+main aside {
+  grid-column: 1 / -1;
+}
+@media (min-width: 700px) {
+  main .main-title {
+    grid-column: 1 / -1;
+  }
+}
+@media (min-width: 1024px) {
+  main .main-title {
+    grid-column: 1 / -2;
+  }
+}
+@media (min-width: 700px) {
+  main .terrarium {
+    grid-column: 1 / -1;
+  }
+}
+@media (min-width: 1024px) {
+  main .terrarium {
+    grid-column: 3 / span 2;
+  }
+}
+@media (min-width: 700px) {
+  main .main-text {
+    grid-column: span 5;
+  }
+}
+@media (min-width: 1024px) {
+  main .main-text {
+    grid-column: span 2;
+  }
+}
+@media (min-width: 700px) {
+  main .sidebar {
+    grid-column: 1 / -1;
+  }
+}
+@media (min-width: 1024px) {
+  main .sidebar {
+    grid-row: 3 / 9;
+    grid-column: 5 / 6;
+  }
+}
+main .social {
+  grid-column: 1 / -2;
+  grid-row: 8 / 9;
+}
+main .article-bar-1 {
+  grid-row: span 4;
+}
+@media (min-width: 700px) {
+  main .hogwarts {
+    grid-row: span 3;
+  }
+}
+@media (min-width: 1024px) {
+  main .hogwarts {
+    grid-column: 3;
+    grid-row: span 2;
+  }
+}
+@media (min-width: 700px) {
+  main .menu {
+    grid-column: 1 / -1;
+    grid-row: 13;
+  }
+}
+@media (min-width: 1024px) {
+  main .menu {
+    grid-row: 7 / 8;
+    grid-column: 2 / 4;
+  }
+}
+@media (min-width: 700px) and (max-width: 1024px) {
+  main .toggles {
+    grid-column: 3 / 6;
+    grid-row: 10 / 13;
+  }
+}
+@media (min-width: 700px) and (max-width: 1024px) {
+  main .plan {
+    grid-column: span 4;
+  }
+}
+@media (min-width: 700px) and (max-width: 1024px) {
+  main .style,
+  main .magazine,
+  main .pasta {
+    grid-column: 1 / 3;
+  }
+}
+main .cssgrid-collection {
+  grid-column: 1 / -1;
+  grid-row: 9;
+}
+
+.span--2 {
+  grid-column: span 2;
+}
+
+.long--2 {
+  grid-row: span 2;
+}
+
+.long--4 {
+  grid-row: span 4;
+}
+
+.with-border {
+  border-top: 1px solid;
+  padding-top: 0.6rem;
+}
+
+img {
+  width: 100%;
+  filter: grayscale(95%);
+  margin-bottom: 0.5rem;
+  border: 1px solid var(--black);
+  transition: 0.3s ease;
+}
+
+figcaption {
+  font-style: italic;
+  font-size: 90%;
+}
+
+aside {
+  text-align: center;
+  padding: 3px 0;
+  border: solid var(--black);
+  border-width: 2px 0;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin: 1.5rem 0;
+}
+@media (min-width: 700px) {
+  aside {
+    margin: 0;
+  }
+}
+aside > div {
+  display: flex;
+  align-items: center;
+  border: solid var(--black);
+  border-width: 1px 0;
+}
+aside > div > div {
+  flex: 1;
+  padding: 8px;
+}
+
+@media (min-width: 700px) {
+  .multi-column {
+    column-count: 2;
+    column-gap: 1.3rem;
+    margin-top: 0.75rem;
+  }
+  .multi-column-3 {
+    column-count: 3;
+  }
+}
+.sidebar {
+  margin-top: 3rem;
+}
+@media (min-width: 700px) and (max-width: 1024px) {
+  .sidebar {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin: 0;
+  }
+  .sidebar h3 {
+    width: 100%;
+    text-align: center;
+  }
+  .sidebar > a {
+    flex: 0 1 48%;
+    margin: 1.5rem 0;
+    padding: 0;
+  }
+  .sidebar .slack-ui {
+    border-top: 0;
+  }
+  .sidebar .pie {
+    order: 3;
+  }
+}
+@media (min-width: 1024px) {
+  .sidebar {
+    display: block;
+    border-left: 1px solid;
+    padding-left: 1.2rem;
+    margin: 0;
+  }
+}
+
+.main-text.multi-column {
+  margin: 0;
+}
+.main-text.multi-column p {
+  margin-bottom: 0.8rem;
+}
+
+.hogwarts {
+  text-align: center;
+  height: 100%;
+  border: 2px solid transparent;
+  outline: 3px solid var(--black);
+  box-shadow: inset 0 0 0 1px var(--black);
+  width: calc(100% - 4px);
+  margin: 1.5rem auto;
+  overflow: hidden;
+}
+@media (min-width: 700px) {
+  .hogwarts {
+    margin: 0;
+  }
+}
+.hogwarts__title {
+  font: 800 24px/1 var(--font-sans-serif);
+  text-transform: uppercase;
+  background: var(--black);
+  color: var(--gray);
+  padding: 0.8rem 0.8rem 0.9rem;
+  transition: 0.2s ease;
+}
+@media (min-width: 700px) and (max-width: 1024px) {
+  .hogwarts__title {
+    font: 800 21px/1.2 var(--font-sans-serif);
+    padding: 1.5rem 0.5rem;
+  }
+}
+.hogwarts__image {
+  height: 100%;
+  position: relative;
+}
+.hogwarts__image img {
+  transform: rotate(60deg);
+  height: 150%;
+  position: absolute;
+  border: 0;
+  width: 250%;
+  left: -70%;
+  bottom: -35%;
+}
+@media (min-width: 700px) and (max-width: 1024px) {
+  .hogwarts__image img {
+    bottom: -20%;
+  }
+}
+.hogwarts__image span {
+  font-style: italic;
+  max-width: 110px;
+  position: absolute;
+  top: 7%;
+  left: 18%;
+  font-size: 22px;
+  line-height: 0.9;
+  transform: rotate(-5deg);
+}
+
+.terrarium {
+  margin: 1.5rem 0;
+}
+@media (min-width: 700px) {
+  .terrarium {
+    margin: 0 0 1.5rem;
+  }
+}
+.terrarium figure {
+  height: 100%;
+}
+.terrarium img {
+  height: 96%;
+  object-fit: cover;
+  object-position: right;
+}
+
+.pie {
+  line-height: 0;
+  color: var(--gray);
+  text-align: left;
+}
+.pie__image {
+  margin: 0;
+  border: 0;
+  max-height: 15rem;
+  object-fit: cover;
+}
+.pie__subtitle {
+  background: #999;
+  text-transform: uppercase;
+  line-height: 1;
+  padding: 0.4rem 1rem;
+  font: 14px var(--font-sans-serif);
+  color: var(--gray);
+}
+.pie__content {
+  background: #666;
+  padding: 1rem 1rem 1.2rem;
+  color: var(--gray);
+}
+.pie__content p {
+  margin-top: 0.5rem;
+}
+
+.sidebar-item {
+  margin: 2rem 0;
+  padding: 2rem 0 0;
+}
+.sidebar-item h5 {
+  text-align: center;
+  width: 100%;
+  padding: .5rem;
+  margin: auto;
+}
+.sidebar-item p {
+  margin-top: 1rem;
+}
+.sidebar-item:hover h5 {
+  transition: 0.3s ease;
+  background: var(--black);
+  color: #fff;
+}
+
+.item-with-image {
+  margin-top: 1.5rem;
+}
+.item-with-image h4 {
+  font-size: 24px;
+  text-align: left;
+  margin-bottom: 0.5rem;
+  transition: 0.2s ease;
+}
+@media (min-width: 700px) {
+  .item-with-image {
+    margin: 0;
+  }
+}
+.item-with-image:not(.cssgrid-collection):hover h4 {
+  color: white !important;
+  background: var(--black);
+}
+
+.magazine {
+  border: 1px solid;
+  border-width: 1px 0;
+  padding-bottom: 1rem;
+}
+
+.menu {
+  margin: 1.5rem 0;
+}
+@media (min-width: 1024px) {
+  .menu {
+    margin: 0;
+  }
+}
+.menu figure {
+  height: 100%;
+}
+.menu img {
+  height: 90%;
+  object-fit: cover;
+  object-position: left;
+}
+
+.cssgrid-collection {
+  display: flex;
+  align-content: stretch;
+  border-top: 1px solid;
+  padding-top: 1rem;
+}
+.cssgrid-collection h4 {
+  margin: 0 0 0.8rem;
+}
+.cssgrid-collection__image {
+  flex: 0 0 32%;
+  margin-right: 1.5rem;
+}
+.cssgrid-collection img {
+  height: 100%;
+  object-fit: cover;
+  object-position: left;
+}
+.cssgrid-collection p a {
+  border-bottom: 1px dashed;
+}
+.cssgrid-collection p a:hover {
+  border-bottom: 1px solid;
+}
+
+@media (min-width: 1024px) {
+  .captcha {
+    margin-top: 0;
+  }
+}
+
+.workout {
+  border: 2px solid transparent;
+  outline: 3px solid var(--black);
+  box-shadow: inset 0 0 0 1px var(--black);
+  width: calc(100% - 4px);
+  margin: 3rem auto 0.2rem;
+}
+.workout__image {
+  padding: 2px;
+}
+.workout__image img {
+  height: 16rem;
+  object-fit: cover;
+  object-position: left;
+  border: none;
+}
+@media (min-width: 1024px) {
+  .workout__image img {
+    height: 25rem;
+  }
+}
+.workout__blurb {
+  font: 22px/1.1 var(--font-sans-serif);
+  text-align: center;
+  padding: 0.5rem;
+  color: var(--black);
+  margin: -1rem 0.5rem 0.3rem;
+}
+.workout__title {
+  font: 18px/1.1 var(--font-sans-serif);
+  text-transform: uppercase;
+  text-align: center;
+  padding: 1rem;
+  background: var(--black);
+  color: var(--gray);
+  transition: 0.2s ease;
+}
+
+.social {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-rows: max-content auto;
+  color: var(--gray);
+  text-align: left;
+}
+.social__image {
+  margin: 0;
+  border: 0;
+  grid-row: span 2;
+  height: 100%;
+  object-fit: cover;
+}
+.social__subtitle {
+  background: #999;
+  text-transform: uppercase;
+  line-height: 1;
+  padding: 0.4rem 1rem;
+  color: var(--gray);
+  font: 14px var(--font-sans-serif);
+}
+.social__content {
+  background: #666;
+  padding: 1rem;
+  color: var(--gray);
+  grid-column: 2;
+}
+
+.plan {
+  padding-bottom: 1rem;
+}
+@media (min-width: 700px) and (max-width: 1024px) {
+  .plan {
+    grid-column: span 3;
+    margin: 0 0 1.5rem;
+  }
+}
+@media (min-width: 1024px) {
+  .plan {
+    border-bottom: 1px solid;
+  }
+}
+
+.pie:hover img,
+.social:hover img,
+.menu:hover img,
+.terrarium:hover img,
+.plan:hover img,
+.toggles:hover img,
+.workout:hover img,
+.cssgrid-collection__image:hover img {
+  filter: grayscale(0);
+}
+
+.workout:hover .workout__title {
+  background: transparent;
+  color: var(--black);
+}
+
+.hogwarts:hover .hogwarts__title {
+  background: transparent;
+  color: var(--black);
+}
\ No newline at end of file
diff --git a/css-grid-newspaper-layout/license.txt b/css-grid-newspaper-layout/license.txt
new file mode 100644
index 0000000..659b397
--- /dev/null
+++ b/css-grid-newspaper-layout/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Olivia Ng (https://codepen.io/oliviale/pen/BaoXOOP)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-grid-newspaper-layout/src/index.pug b/css-grid-newspaper-layout/src/index.pug
new file mode 100644
index 0000000..e1978c9
--- /dev/null
+++ b/css-grid-newspaper-layout/src/index.pug
@@ -0,0 +1,134 @@
+.main__wrapper
+	main
+		h1 The Codepen Times
+		aside 
+			div
+				.issue Issue #1 
+				.date Tuesday, 26 May, 2020
+				.edition Two memes Edition
+
+		h2.title--large.main-title Woman spends too much time on Codepens despite advice; no plans to stop
+		.main-text.multi-column
+				p Sometimes, Internet users land themselves in an uncommon situation where an app or website can be used for both work and personal situations. Well, a young front-end designer was spending up to 13 hours on the site, Codepen for work and her hobby, which unfortunately, is also coding. 
+				p The designer, whose work includes a  
+					em To-Do Terrarium
+					| , clarified, "Well, I didn't  
+					em  have  
+					| to use it for work but it was already part of my workflow. It just made sense as it was more efficient."   The biggest issue, she said, is that she would hop on Codepen for work, but would get distracted by pens made by others in the community for unexpectedly long periods of time, which then causes her to spend even more time on the site.
+				p  "I mean, that's terrible right?" she asked. Codepen, which brands itself as the best place to build, test, and discover front-end code, has declined to comment at this time.
+
+		a(href="https://codepen.io/oliviale/full/oNXJgEM" target="_blank").terrarium
+			figure
+				img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-terrarium.jpg")
+				figcaption A to-do list that grows succulents when you've completed a task
+
+		a(href="https://codepen.io/oliviale/full/moLrBq" target="_blank").item-with-image.plan.span--2.long--2
+			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-floorplan.jpg")
+			h4 Can you get inspired to make your own floor plans?
+			div.multi-column
+				p Making a floor Plan with CSS Grid? Talk about using the wrong tool for the job. But I guess this is what happens when someone isn't happy with any of the floor plans found on Pinterest; she'll start making her own for the eventual home that she will never own. Nevertheless, there's a home office with a large window to look out of pensively during rainy days and a ton of "white space" for the cats to run around.
+		
+		a(href="https://codepen.io/oliviale/full/MZZYyO" target="_blank").hogwarts
+			.hogwarts__title 50% Off Hogwarts Express tickets
+			.hogwarts__image 
+				span Limited time offer
+				img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-hogwarts.svg")
+		
+		a(href="https://codepen.io/oliviale/full/zYvxXWw" target="_blank").item-with-image.pasta.with-border
+				h4 A pasta menu
+				p Everybody loves pasta. It's impossible to not love them, so here are 15 recipes, served with GSAP. Note the easter egg — the menu icon changes according to the pasta that you choose.
+		
+				
+		a(href="https://codepen.io/oliviale/full/GRKQoKM" target="_blank").item-with-image.magazine.with-border
+				h4 Marvel at a magazine
+				p A tribute of sorts to an era of cool superhero movies, this is a Marvel-themed magazine! Recommended, because it took 45 hours, so you know some serious dedication has been poured into this.
+		
+		
+		a(href="https://codepen.io/collection/XJyNPm" target="_blank").item-with-image.style
+				h4 Let's adopt, don't shop.
+				p Explore a style guide and various page layouts for a pet adoption site in the  
+					em Style Guide
+					|  collection. Inspired by the 
+					em Atomic Design
+					|  principle, this 8-pen collection includes a 404 page concept, an admin dashboard and what a Twitter user calls a 'media card zen garden'. Each pen comes with five (yes, five) color themes, including the  precious dark mode.
+		
+		a(href="https://codepen.io/oliviale/full/xxboXzo" target="_blank").item-with-image.toggles
+				img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-toggle.gif")
+				h4 Toggles
+				p Eight playful toggles to toggle on and off for your amusement. Is it possible to use these on your site and still adhere to assessibility rules? No. But there's a really cute dog one you 
+					em have  
+					| to see.
+				
+		
+		
+		a(href="https://codepen.io/oliviale/full/LYYrKMV" target="_blank").menu
+			figure
+				img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-menu.jpg")
+				figcaption See the new and improved menu for Toasty!
+		
+		
+		a(href="https://codepen.io/oliviale/full/QWjjrZX" tagrget="_blank").social
+			img.social__image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-social.gif")
+			.social__subtitle World News
+			.social__content Looks like Covid-19 is gonna be around for a while so here is another friendly reminder to practice social distancing. Oh, and wear a mask! 
+		
+		.item-with-image.cssgrid-collection
+			a(href="https://codepen.io/collection/DQvYpQ" target="_blank").cssgrid-collection__image
+				img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-co-grid.jpg")
+			.cssgrid-collection__content
+				h4 
+					a(href="https://codepen.io/collection/DQvYpQ" target="_blank") More CSS Grid things like this one. Shelves, coupons and more!  
+				div.multi-column-3
+					p Get your fill of more CSS Grid items in this collection. There are a total of 32 pens to date... well, 33, if you count this one too. What can you expect in this collection? The hidden gems, in my totally  unbiased opinion, are 
+						a(href="https://codepen.io/oliviale/full/wbyVWr" target="_blank") the recreation of the Pac-Man layout
+						|  and  
+						a(href="https://codepen.io/oliviale/pen/wbyVWr" target="_blank") coupons inspired by junk mail
+						|. A lot of joke items of things that shouldn't be done in CSS Grid, such as 
+						a(href="https://codepen.io/oliviale/full/PXGgMG" target="_blank") a shelf
+						| ?   
+						a(href="https://codepen.io/oliviale/full/qggOog" target="_blank") Bathroom tiles wtf
+						| ? and  
+						a(href="https://codepen.io/oliviale/full/bOWqbj" target="_blank") makeup palettes 
+						| . If you are a cultured person, you will have a chance to enjoy a couple of pens inspired by 
+						a(href="https://codepen.io/oliviale/full/JxVZpX" target="_blank") Harry Potter  
+						| and  
+						a(href="https://codepen.io/oliviale/full/RwNdeeQ" target="_blank") Pokemon.
+						|  On the rare occasion that you are looking at this profile for something you can use in production, you really shouldn't. But, there are 
+						em  some   
+						| real-world applications, such as 
+						a(href="https://codepen.io/oliviale/full/GPXozx" target="_blank") the recipe layout
+						| ,   
+						a(href="https://codepen.io/oliviale/full/pqoEoJ" target="_blank") the product catalog
+						|, and  
+						a(href="https://codepen.io/oliviale/full/XyqQYL" target="_blank") color palettes for a style guide
+						| .
+			
+			
+		
+		
+		.sidebar
+			h3.title--big Hot this month
+			
+			a(href="https://codepen.io/oliviale/full/BaovGmg" target="_blank").codepen-item.pie
+				img.pie__image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-pie.jpg")
+				.pie__subtitle Food 
+				.pie__content
+					h4 Pies for everyone!
+					p No man is left behind. There's infinite pie with this one div and a repeating background.
+			
+			a(href="https://codepen.io/oliviale/full/RwWdNRd" target="_blank").sidebar-item.captcha
+				h5 Frustrated designer runs amok with Captcha ideas
+				p From Tic Tac Toe to solving meme-based questions, this is a different take on how web captchas should be. "I have not successfully picked out all photos of a truck on the first try. Something's gotta change," says the designer, who has requested to remain anonymous.
+
+			a(href="https://codepen.io/oliviale/full/GRpvNBa" target="_blank").sidebar-item.slack-ui.with-border
+				h5 Slack UI gets reverse engineered
+				p Another valiant effort to reverse engineer a web app. However, the UI is repurposed to showcase Codepens instead of mock conversations. This is a codepen showcase inception situation.
+
+			
+				
+			a(href="https://codepen.io/oliviale/full/RwWKybY" target="_blank").workout
+				.workout__image
+					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-workout.jpg" alt="Workout")
+				.workout__blurb Always failing to keep track of your workouts? 
+				.workout__title Use this tool!
+			
diff --git a/css-grid-newspaper-layout/src/script.js b/css-grid-newspaper-layout/src/script.js
new file mode 100644
index 0000000..5824fe5
--- /dev/null
+++ b/css-grid-newspaper-layout/src/script.js
@@ -0,0 +1 @@
+// 🦝 trash panda 🦝
\ No newline at end of file
diff --git a/css-grid-newspaper-layout/src/style.scss b/css-grid-newspaper-layout/src/style.scss
new file mode 100644
index 0000000..7bbda36
--- /dev/null
+++ b/css-grid-newspaper-layout/src/style.scss
@@ -0,0 +1,581 @@
+:root {
+	--font: "EB Garamond", serif;
+	--font-title: "Playfair Display", serif;
+	--font-sans-serif: "Manrope", sans-serif;
+	--black: #1c1f33;
+	--gray: #eee;
+	--gray-1: #ededed;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+@mixin double-border {
+	border: 2px solid transparent;
+	outline: 3px solid var(--black);
+	box-shadow: inset 0 0 0 1px var(--black);
+}
+
+body {
+	font-size: 1.1rem;
+	background: var(--preview-bg);
+	font-family: var(--font);
+	color: var(--black);
+	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/paper_fibers.png)
+		repeat;
+	padding: 4rem 2rem;
+	line-height: 1.3;
+	text-align: justify;
+	column-break-inside: avoid;
+}
+
+a {
+	text-decoration: none;
+	display: block;
+	color: var(--black);
+	&:hover,
+	&:focus,
+	&:active,
+	&:visited {
+		color: var(--black);
+	}
+}
+
+.main__wrapper {
+	max-width: 1135px;
+	margin: auto;
+}
+
+h1 {
+	font: 50px/1 "Playfair Display SC";
+	text-align: center;
+	@media (min-width: 700px) {
+		font: 70px/1 "Playfair Display SC";
+	}
+}
+
+h3 {
+	font: italic 20px var(--font-title);
+	margin-bottom: 1rem;
+}
+
+h4 {
+	font: 20px/1.2 var(--font-title);
+}
+
+h5 {
+	font: 700 20px/1 var(--font);
+	transition: 0.3s ease;
+}
+
+p {
+	line-height: 1.3;
+	a {
+		display: inline;
+	}
+}
+
+em {
+	font-style: italic;
+}
+
+.title--large {
+	font-family: var(--font-title);
+	font-size: 32px;
+	font-style: italic;
+	text-align: left;
+	margin-bottom: 0.8rem;
+	@media (min-width: 700px) {
+		font-size: 42px;
+		margin: 0;
+	}
+}
+
+main {
+	@media (min-width: 700px) {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr) 23%;
+		grid-template-rows: repeat(5, auto);
+		grid-gap: 1.2rem;
+	}
+
+	h1,
+	aside {
+		grid-column: 1 / -1;
+	}
+	.main-title {
+		@media (min-width: 700px) {
+			grid-column: 1 / -1;
+		}
+		@media (min-width: 1024px) {
+			grid-column: 1 / -2;
+		}
+	}
+	.terrarium {
+		@media (min-width: 700px) {
+			grid-column: 1 / -1;
+		}
+		@media (min-width: 1024px) {
+			grid-column: 3 / span 2;
+		}
+	}
+	.main-text {
+		@media (min-width: 700px) {
+			grid-column: span 5;
+		}
+		@media (min-width: 1024px) {
+			grid-column: span 2;
+		}
+	}
+	.sidebar {
+		@media (min-width: 700px) {
+			grid-column: 1 / -1;
+		}
+		@media (min-width: 1024px) {
+			grid-row: 3 / 9;
+			grid-column: 5 / 6;
+		}
+	}
+	.social {
+		grid-column: 1 / -2;
+		grid-row: 8 / 9;
+	}
+	.article-bar-1 {
+		grid-row: span 4;
+	}
+	.hogwarts {
+		@media (min-width: 700px) {
+			grid-row: span 3;
+		}
+		@media (min-width: 1024px) {
+			grid-column: 3;
+			grid-row: span 2;
+		}
+	}
+	.menu {
+		@media (min-width: 700px) {
+			grid-column: 1 / -1;
+			grid-row: 13;
+		}
+		@media (min-width: 1024px) {
+			grid-row: 7 / 8;
+			grid-column: 2 / 4;
+		}
+	}
+	.toggles {
+		@media (min-width: 700px) and (max-width: 1024px) {
+			grid-column: 3 / 6;
+			grid-row: 10 / 13;
+		}
+	}
+	.plan {
+		@media (min-width: 700px) and (max-width: 1024px) {
+			grid-column: span 4;
+		}
+	}
+	.style,
+	.magazine,
+	.pasta {
+		@media (min-width: 700px) and (max-width: 1024px) {
+			grid-column: 1 / 3;
+		}
+	}
+	.cssgrid-collection {
+		grid-column: 1 / -1;
+		grid-row: 9;
+	}
+}
+
+.span--2 {
+	grid-column: span 2;
+}
+
+.long--2 {
+	grid-row: span 2;
+}
+
+.long--4 {
+	grid-row: span 4;
+}
+
+.with-border {
+	border-top: 1px solid;
+	padding-top: 0.6rem;
+}
+
+img {
+	width: 100%;
+	filter: grayscale(95%);
+	margin-bottom: 0.5rem;
+	border: 1px solid var(--black);
+	transition: 0.3s ease;
+}
+
+figcaption {
+	font-style: italic;
+	font-size: 90%;
+}
+
+aside {
+	text-align: center;
+	padding: 3px 0;
+	border: solid var(--black);
+	border-width: 2px 0;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	margin: 1.5rem 0;
+	@media (min-width: 700px) {
+		margin: 0;
+	}
+	> div {
+		display: flex;
+		align-items: center;
+		border: solid var(--black);
+		border-width: 1px 0;
+		> div {
+			flex: 1;
+			padding: 8px;
+		}
+	}
+}
+
+@media (min-width: 700px) {
+	.multi-column {
+		column-count: 2;
+		column-gap: 1.3rem;
+		margin-top: 0.75rem;
+		&-3 {
+			column-count: 3;
+		}
+	}
+}
+.sidebar {
+	margin-top: 3rem;
+	@media (min-width: 700px) and (max-width: 1024px) {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-items: flex-start;
+		margin: 0;
+		h3 {
+			width: 100%;
+			text-align: center;
+		}
+		> a {
+			flex: 0 1 48%;
+			margin: 1.5rem 0;
+			padding: 0;
+		}
+		.slack-ui {
+			border-top: 0;
+		}
+		.pie {
+			order: 3;
+		}
+	}
+	@media (min-width: 1024px) {
+		display: block;
+		border-left: 1px solid;
+		padding-left: 1.2rem;
+		margin: 0;
+	}
+}
+
+.main-text.multi-column {
+	margin: 0;
+	p {
+		margin-bottom: 0.8rem;
+	}
+}
+
+.hogwarts {
+	text-align: center;
+	height: 100%;
+	@include double-border;
+	width: calc(100% - 4px);
+	margin: 1.5rem auto;
+	overflow: hidden;
+	@media (min-width: 700px) {
+		margin: 0;
+	}
+	&__title {
+		font: 800 24px/1 var(--font-sans-serif);
+		text-transform: uppercase;
+		background: var(--black);
+		color: var(--gray);
+		padding: 0.8rem 0.8rem 0.9rem;
+		transition: 0.2s ease;
+		@media (min-width: 700px) and (max-width: 1024px) {
+			font: 800 21px/1.2 var(--font-sans-serif);
+			padding: 1.5rem 0.5rem;
+		}
+	}
+	&__image {
+		height: 100%;
+		position: relative;
+
+		img {
+			transform: rotate(60deg);
+			height: 150%;
+			position: absolute;
+			border: 0;
+			width: 250%;
+			left: -70%;
+			bottom: -35%;
+			@media (min-width: 700px) and (max-width: 1024px) {
+				bottom: -20%;
+			}
+		}
+		span {
+			font-style: italic;
+			max-width: 110px;
+			position: absolute;
+			top: 7%;
+			left: 18%;
+			font-size: 22px;
+			line-height: 0.9;
+			transform: rotate(-5deg);
+		}
+	}
+}
+
+.terrarium {
+	margin: 1.5rem 0;
+	@media (min-width: 700px) {
+		margin: 0 0 1.5rem;
+	}
+	figure {
+		height: 100%;
+	}
+	img {
+		height: 96%;
+		object-fit: cover;
+		object-position: right;
+	}
+}
+
+.pie {
+	line-height: 0;
+	color: var(--gray);
+	text-align: left;
+	&__image {
+		margin: 0;
+		border: 0;
+		max-height: 15rem;
+		object-fit: cover;
+	}
+	&__subtitle {
+		background: #999;
+		text-transform: uppercase;
+		line-height: 1;
+		padding: 0.4rem 1rem;
+		font: 14px var(--font-sans-serif);
+		color: var(--gray);
+	}
+	&__content {
+		background: #666;
+		padding: 1rem 1rem 1.2rem;
+		color: var(--gray);
+		p {
+			margin-top: 0.5rem;
+		}
+	}
+}
+
+.sidebar-item {
+	margin: 2rem 0;
+	padding: 2rem 0 0;
+	h5 {
+		text-align: center;
+		width: 100%;
+padding: .5rem;
+		margin: auto;
+	}
+	p {
+		margin-top: 1rem;
+	}
+	&:hover {
+		h5 {
+			transition: 0.3s ease;
+			background: var(--black);
+			color: #fff;
+		}
+	}
+}
+
+.item-with-image {
+	margin-top: 1.5rem;
+	h4 {
+		font-size: 24px;
+		text-align: left;
+		margin-bottom: 0.5rem;
+		transition: 0.2s ease;
+	}
+	@media (min-width: 700px) {
+		margin: 0;
+	}
+	&:not(.cssgrid-collection):hover {
+		h4 {
+			color: white !important;
+			background: var(--black);
+		}
+	}
+	p {
+	}
+	img {
+	}
+}
+
+.magazine {
+	border: 1px solid;
+	border-width: 1px 0;
+	padding-bottom: 1rem;
+}
+
+.menu {
+	margin: 1.5rem 0;
+	@media (min-width: 1024px) {
+		margin: 0;
+	}
+	figure {
+		height: 100%;
+	}
+	img {
+		height: 90%;
+		object-fit: cover;
+		object-position: left;
+	}
+}
+
+.cssgrid-collection {
+	display: flex;
+	align-content: stretch;
+	border-top: 1px solid;
+	padding-top: 1rem;
+	h4 {
+		margin: 0 0 0.8rem;
+	}
+	&__image {
+		flex: 0 0 32%;
+		margin-right: 1.5rem;
+	}
+	img {
+		height: 100%;
+		object-fit: cover;
+		object-position: left;
+	}
+	p a {
+		border-bottom: 1px dashed;
+		&:hover {
+			border-bottom: 1px solid;
+		}
+	}
+}
+
+.captcha {
+	@media (min-width: 1024px) {
+		margin-top: 0;
+	}
+}
+
+.workout {
+	@include double-border;
+	width: calc(100% - 4px);
+	margin: 3rem auto 0.2rem;
+	&__image {
+		padding: 2px;
+		img {
+			height: 16rem;
+			object-fit: cover;
+			object-position: left;
+			border: none;
+			@media (min-width: 1024px) {
+				height: 25rem;
+			}
+		}
+	}
+	&__blurb {
+		font: 22px/1.1 var(--font-sans-serif);
+		text-align: center;
+		padding: 0.5rem;
+		color: var(--black);
+		margin: -1rem 0.5rem 0.3rem;
+	}
+	&__title {
+		font: 18px/1.1 var(--font-sans-serif);
+		text-transform: uppercase;
+		text-align: center;
+		padding: 1rem;
+		background: var(--black);
+		color: var(--gray);
+		transition: 0.2s ease;
+	}
+}
+
+.social {
+	display: grid;
+	grid-template-columns: 1fr 3fr;
+	grid-template-rows: max-content auto;
+	color: var(--gray);
+	text-align: left;
+	&__image {
+		margin: 0;
+		border: 0;
+		grid-row: span 2;
+		height: 100%;
+		object-fit: cover;
+	}
+	&__subtitle {
+		background: #999;
+		text-transform: uppercase;
+		line-height: 1;
+		padding: 0.4rem 1rem;
+		color: var(--gray);
+		font: 14px var(--font-sans-serif);
+	}
+	&__content {
+		background: #666;
+		padding: 1rem;
+		color: var(--gray);
+		grid-column: 2;
+	}
+}
+
+.plan {
+	padding-bottom: 1rem;
+	@media (min-width: 700px) and (max-width: 1024px) {
+		grid-column: span 3;
+		margin: 0 0 1.5rem;
+	}
+	@media (min-width: 1024px) {
+		border-bottom: 1px solid;
+	}
+}
+
+.pie,
+.social,
+.menu,
+.terrarium,
+.plan,
+.toggles,
+.workout,
+.cssgrid-collection__image {
+	&:hover img {
+		filter: grayscale(0);
+	}
+}
+
+.workout {
+	&:hover .workout__title {
+		background: transparent;
+		color: var(--black);
+	}
+}
+
+.hogwarts {
+	&:hover .hogwarts__title {
+		background: transparent;
+		color: var(--black);
+	}
+}
diff --git a/css-grid-swiss-style-typography-poster-07/README.markdown b/css-grid-swiss-style-typography-poster-07/README.markdown
new file mode 100644
index 0000000..70e834b
--- /dev/null
+++ b/css-grid-swiss-style-typography-poster-07/README.markdown
@@ -0,0 +1,4 @@
+# [CSS Grid] Swiss-Style Typography Poster 07
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/xdesro/pen/gOOeVzE](https://codepen.io/xdesro/pen/gOOeVzE).
+
+ 
\ No newline at end of file
diff --git a/css-grid-swiss-style-typography-poster-07/dist/index.html b/css-grid-swiss-style-typography-poster-07/dist/index.html
new file mode 100644
index 0000000..01e2287
--- /dev/null
+++ b/css-grid-swiss-style-typography-poster-07/dist/index.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - [CSS Grid] Swiss-Style Typography Poster 07</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main class="poster">
+  <div class="poster__inner">
+    <section class="poster__row">
+      <p class="poster__subheader">Juni-Festwochen Zürich 1959</p>
+    </section>
+    <header class="poster__row">
+      <h1 class="poster__header">Stadttheater</h1>
+    </header>
+    <section class="poster__row">
+      <div class="poster__date">
+        <p>Schweizerische Erstaufführung</p>
+        <p>
+          Mittwoch, 3.Juni<br /> 20.00 Uhr
+        </p>
+      </div>
+      <h2 class="poster__subheader">Der Sturm</h2>
+      <ul class="poster__list">
+        <li>Oper von Frank Martin Leitung:</li>
+        <li>Christian Vöchting</li>
+        <li>Hans Zimmermann</li>
+        <li>Max Röthlisberger</li>
+      </ul>
+      <ul class="poster__list">
+        <li>In den Hauptrollen:</li>
+        <li>Ingeborg Friedrich</li>
+        <li>Heinz Borst</li>
+        <li>Jean-Pierre Genet</li>
+        <li>Hermann Winkler</li>
+      </ul>
+    </section>
+    <section class="poster__row">
+      <div class="poster__date">
+        <p>
+          Gastspiel<br /> Städtische Oper Berlin
+        </p>
+        <p>
+          Freitag, 5.Juni<br /> Sonntag, 7.Juni<br /> 20.00 Uhr
+        </p>
+      </div>
+      <h2 class="poster__subheader">Cosi fan tutte</h2>
+      <ul class="poster__list">
+        <li>Komische Oper von W.A.Mozart Leitung:</li>
+        <li>Artur Rother</li>
+        <li>Carl Ebert</li>
+        <li>Jean Pierre Ponnelle</li>
+      </ul>
+      <ul class="poster__list">
+        <li>Elisabeth Grümmer</li>
+        <li>Lisa Otto</li>
+        <li>Sieglinde Wagner</li>
+        <li>Herbert Brauer</li>
+        <li>Josef Greindl</li>
+        <li>Ernst Häfliger</li>
+      </ul>
+    </section>
+    <section class="poster__row">
+      <div class="poster__date">
+        <p>
+          Samstag 6.Juni<br /> Mittwoch, 17.Juni<br /> 20.00 Uhr
+        </p>
+      </div>
+      <h2 class="poster__subheader">
+        Lucia<br /> di Lammermoor
+      </h2>
+      <ul class="poster__list">
+        <li>Oper von G. Donizetti Leitung:</li>
+        <li>Nello Santi</li>
+        <li>Ettore Celia</li>
+        <li>Max Röthlisberger</li>
+      </ul>
+      <ul class="poster__list">
+        <li>In den Hauptrollen:</li>
+        <li>Amelia Benvenuti</li>
+        <li>Lorenzo Sabatucci</li>
+        <li>Lorenzo Gaetani</li>
+        <li>Mario Zanasi</li>
+      </ul>
+    </section>
+    <section class="poster__row">
+      <div class="poster__date">
+        <p>
+          I. Programm<br /> 11.Juni, 20.00 Uhr<br /> 14.Juni, 20.00 Uhr
+        </p>
+        <p>
+          II. Programm<br /> 12.Juni, 20.00 Uhr<br /> 14.Juni, 15.00 Uhr
+        </p>
+        <p>
+          III. Programm<br /> 13.Juni, 20.00 Uhr
+        </p>
+      </div>
+      <h2 class="poster__subheader">London’s Festival Ballet</h2>
+      <ul class="poster__list">
+        <li>
+          I. Programm<br /> Vision de Chopin<br /> Petruschka Etudes
+        </li>
+        <li>
+          II. Programm<br /> Concerti
+          <br /> Giselle
+        </li>
+        <li>
+          III. Programm<br /> Schwanensee II.Akt<br /> Le Pas de Quatre<br /> Variations for Four<br /> Don Quixote<br /> Polowetzer Tänze
+        </li>
+      </ul>
+      <ul class="poster__list">
+        <li>Leitung:</li>
+        <li>Julian Braunsweg</li>
+        <li>Anton Dolin</li>
+        <li>Geoffrey Corbett</li>
+        <li>mit</li>
+        <li>Tamara Toumanova</li>
+        <li>Natalie Krassovska</li>
+        <li>Toni Lander</li>
+        <li>Marilyn Burr</li>
+        <li>Anton Dolin</li>
+        <li>John Gilpin</li>
+        <li>
+          &nbsp;
+          <br /> Corps de Ballet
+        </li>
+      </ul>
+    </section>
+    <section class="poster__row">
+      <div class="poster__date">
+        <p>
+          21.Juni, 20.00 Uhr<br /> Das Rheingold
+        </p>
+        <p>
+          23.Juni, 19.00 Uhr<br /> Die Walküre
+        </p>
+        <p>
+          24.Juni, 18.00 Uhr<br /> Siegfried
+        </p>
+        <p>
+          28.Juni, 18.00 Uhr<br /> Götterdämmerung
+        </p>
+      </div>
+      <h2 class="poster__subheader">
+        Der Ring<br /> des Nibelungen
+      </h2>
+      <ul class="poster__list">
+        <li>Bühnenfestspiel von Richard Vagner<br />Leitung:</li>
+        <li>Robert F. Denzler</li>
+        <li>Karl Heinz Krahl</li>
+        <li>Philipp Blessing</li>
+        <li>&nbsp;<br />In den Hauptrollen:</li>
+        <li>Elsa Cavelti</li>
+        <li>Birgit Nilsson</li>
+        <li>Astrid Varnay</li>
+      </ul>
+      <ul class="poster__list">
+        <li>Mary Davenport</li>
+        <li>Hilde Koch</li>
+        <li>Bernd Aldenhoff</li>
+        <li>Kurt Böhme</li>
+        <li>Tomislav Neralic</li>
+        <li>Alois Pernerstorfer</li>
+        <li>Heinz BorstErwin Deblitz</li>
+        <li>Hans-Bert Dick</li>
+        <li>Charles Gillig</li>
+        <li>Franz Lechleitner</li>
+      </ul>
+    </section>
+  </div>
+</main>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/css-grid-swiss-style-typography-poster-07/dist/script.js b/css-grid-swiss-style-typography-poster-07/dist/script.js
new file mode 100644
index 0000000..39c7515
--- /dev/null
+++ b/css-grid-swiss-style-typography-poster-07/dist/script.js
@@ -0,0 +1 @@
+// 💫 http://i.ncredibly.online
\ No newline at end of file
diff --git a/css-grid-swiss-style-typography-poster-07/dist/style.css b/css-grid-swiss-style-typography-poster-07/dist/style.css
new file mode 100644
index 0000000..ac9da48
--- /dev/null
+++ b/css-grid-swiss-style-typography-poster-07/dist/style.css
@@ -0,0 +1,66 @@
+@import url("https://rsms.me/inter/inter.css");
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+html {
+  --poster-size: 95vmin;
+  --ratio: 1 / 1.41;
+  --color--background: hsl(358, 72%, 43%);
+  --color--neutral: hsl(340, 43%, 1%);
+  --color--contrast: hsl(46, 86%, 94%);
+  font-family: "Inter var", sans-serif;
+  font-size: calc(var(--poster-size) / 100);
+}
+
+body {
+  display: grid;
+  min-height: 100vh;
+  background: #030303;
+  place-items: center;
+}
+
+p {
+  line-height: 1.2;
+}
+p:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.poster {
+  display: grid;
+  width: calc(var(--poster-size) * var(--ratio));
+  height: var(--poster-size);
+  color: var(--color--neutral);
+  background-color: var(--color--background);
+}
+.poster__inner {
+  padding-left: 5rem;
+  padding-top: 3rem;
+  padding-right: 3rem;
+  max-width: 100%;
+}
+.poster__row {
+  display: grid;
+  grid-template-columns: 1fr 1.7fr 1fr 1fr;
+  grid-column-gap: 1rem;
+  border-top: 0.2rem solid var(--color--neutral);
+  padding: 1.5rem 0;
+  align-items: end;
+}
+.poster__row:last-child {
+  border-bottom: 0.2rem solid var(--color--neutral);
+}
+.poster__header {
+  color: var(--color--contrast);
+  font-size: 10rem;
+  margin: 2rem 0 0;
+  font-weight: 550;
+}
+.poster__subheader {
+  grid-column: 2;
+  font-weight: 500;
+  font-size: 3rem;
+}
\ No newline at end of file
diff --git a/css-grid-swiss-style-typography-poster-07/license.txt b/css-grid-swiss-style-typography-poster-07/license.txt
new file mode 100644
index 0000000..62fb088
--- /dev/null
+++ b/css-grid-swiss-style-typography-poster-07/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Henry Desroches (https://codepen.io/xdesro/pen/gOOeVzE)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-grid-swiss-style-typography-poster-07/src/index.html b/css-grid-swiss-style-typography-poster-07/src/index.html
new file mode 100644
index 0000000..26ad7cb
--- /dev/null
+++ b/css-grid-swiss-style-typography-poster-07/src/index.html
@@ -0,0 +1,164 @@
+<main class="poster">
+  <div class="poster__inner">
+    <section class="poster__row">
+      <p class="poster__subheader">Juni-Festwochen Zürich 1959</p>
+    </section>
+    <header class="poster__row">
+      <h1 class="poster__header">Stadttheater</h1>
+    </header>
+    <section class="poster__row">
+      <div class="poster__date">
+        <p>Schweizerische Erstaufführung</p>
+        <p>
+          Mittwoch, 3.Juni<br /> 20.00 Uhr
+        </p>
+      </div>
+      <h2 class="poster__subheader">Der Sturm</h2>
+      <ul class="poster__list">
+        <li>Oper von Frank Martin Leitung:</li>
+        <li>Christian Vöchting</li>
+        <li>Hans Zimmermann</li>
+        <li>Max Röthlisberger</li>
+      </ul>
+      <ul class="poster__list">
+        <li>In den Hauptrollen:</li>
+        <li>Ingeborg Friedrich</li>
+        <li>Heinz Borst</li>
+        <li>Jean-Pierre Genet</li>
+        <li>Hermann Winkler</li>
+      </ul>
+    </section>
+    <section class="poster__row">
+      <div class="poster__date">
+        <p>
+          Gastspiel<br /> Städtische Oper Berlin
+        </p>
+        <p>
+          Freitag, 5.Juni<br /> Sonntag, 7.Juni<br /> 20.00 Uhr
+        </p>
+      </div>
+      <h2 class="poster__subheader">Cosi fan tutte</h2>
+      <ul class="poster__list">
+        <li>Komische Oper von W.A.Mozart Leitung:</li>
+        <li>Artur Rother</li>
+        <li>Carl Ebert</li>
+        <li>Jean Pierre Ponnelle</li>
+      </ul>
+      <ul class="poster__list">
+        <li>Elisabeth Grümmer</li>
+        <li>Lisa Otto</li>
+        <li>Sieglinde Wagner</li>
+        <li>Herbert Brauer</li>
+        <li>Josef Greindl</li>
+        <li>Ernst Häfliger</li>
+      </ul>
+    </section>
+    <section class="poster__row">
+      <div class="poster__date">
+        <p>
+          Samstag 6.Juni<br /> Mittwoch, 17.Juni<br /> 20.00 Uhr
+        </p>
+      </div>
+      <h2 class="poster__subheader">
+        Lucia<br /> di Lammermoor
+      </h2>
+      <ul class="poster__list">
+        <li>Oper von G. Donizetti Leitung:</li>
+        <li>Nello Santi</li>
+        <li>Ettore Celia</li>
+        <li>Max Röthlisberger</li>
+      </ul>
+      <ul class="poster__list">
+        <li>In den Hauptrollen:</li>
+        <li>Amelia Benvenuti</li>
+        <li>Lorenzo Sabatucci</li>
+        <li>Lorenzo Gaetani</li>
+        <li>Mario Zanasi</li>
+      </ul>
+    </section>
+    <section class="poster__row">
+      <div class="poster__date">
+        <p>
+          I. Programm<br /> 11.Juni, 20.00 Uhr<br /> 14.Juni, 20.00 Uhr
+        </p>
+        <p>
+          II. Programm<br /> 12.Juni, 20.00 Uhr<br /> 14.Juni, 15.00 Uhr
+        </p>
+        <p>
+          III. Programm<br /> 13.Juni, 20.00 Uhr
+        </p>
+      </div>
+      <h2 class="poster__subheader">London’s Festival Ballet</h2>
+      <ul class="poster__list">
+        <li>
+          I. Programm<br /> Vision de Chopin<br /> Petruschka Etudes
+        </li>
+        <li>
+          II. Programm<br /> Concerti
+          <br /> Giselle
+        </li>
+        <li>
+          III. Programm<br /> Schwanensee II.Akt<br /> Le Pas de Quatre<br /> Variations for Four<br /> Don Quixote<br /> Polowetzer Tänze
+        </li>
+      </ul>
+      <ul class="poster__list">
+        <li>Leitung:</li>
+        <li>Julian Braunsweg</li>
+        <li>Anton Dolin</li>
+        <li>Geoffrey Corbett</li>
+        <li>mit</li>
+        <li>Tamara Toumanova</li>
+        <li>Natalie Krassovska</li>
+        <li>Toni Lander</li>
+        <li>Marilyn Burr</li>
+        <li>Anton Dolin</li>
+        <li>John Gilpin</li>
+        <li>
+          &nbsp;
+          <br /> Corps de Ballet
+        </li>
+      </ul>
+    </section>
+    <section class="poster__row">
+      <div class="poster__date">
+        <p>
+          21.Juni, 20.00 Uhr<br /> Das Rheingold
+        </p>
+        <p>
+          23.Juni, 19.00 Uhr<br /> Die Walküre
+        </p>
+        <p>
+          24.Juni, 18.00 Uhr<br /> Siegfried
+        </p>
+        <p>
+          28.Juni, 18.00 Uhr<br /> Götterdämmerung
+        </p>
+      </div>
+      <h2 class="poster__subheader">
+        Der Ring<br /> des Nibelungen
+      </h2>
+      <ul class="poster__list">
+        <li>Bühnenfestspiel von Richard Vagner<br />Leitung:</li>
+        <li>Robert F. Denzler</li>
+        <li>Karl Heinz Krahl</li>
+        <li>Philipp Blessing</li>
+        <li>&nbsp;<br />In den Hauptrollen:</li>
+        <li>Elsa Cavelti</li>
+        <li>Birgit Nilsson</li>
+        <li>Astrid Varnay</li>
+      </ul>
+      <ul class="poster__list">
+        <li>Mary Davenport</li>
+        <li>Hilde Koch</li>
+        <li>Bernd Aldenhoff</li>
+        <li>Kurt Böhme</li>
+        <li>Tomislav Neralic</li>
+        <li>Alois Pernerstorfer</li>
+        <li>Heinz BorstErwin Deblitz</li>
+        <li>Hans-Bert Dick</li>
+        <li>Charles Gillig</li>
+        <li>Franz Lechleitner</li>
+      </ul>
+    </section>
+  </div>
+</main>
\ No newline at end of file
diff --git a/css-grid-swiss-style-typography-poster-07/src/script.js b/css-grid-swiss-style-typography-poster-07/src/script.js
new file mode 100644
index 0000000..39c7515
--- /dev/null
+++ b/css-grid-swiss-style-typography-poster-07/src/script.js
@@ -0,0 +1 @@
+// 💫 http://i.ncredibly.online
\ No newline at end of file
diff --git a/css-grid-swiss-style-typography-poster-07/src/style.scss b/css-grid-swiss-style-typography-poster-07/src/style.scss
new file mode 100644
index 0000000..75c7b4e
--- /dev/null
+++ b/css-grid-swiss-style-typography-poster-07/src/style.scss
@@ -0,0 +1,65 @@
+@import url("https://rsms.me/inter/inter.css");
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+html {
+  --poster-size: 95vmin;
+  --ratio: 1 / 1.41; // A3
+  --color--background: hsl(358, 72%, 43%);
+  --color--neutral: hsl(340, 43%, 1%);
+  --color--contrast: hsl(46, 86%, 94%);
+  font-family: "Inter var", sans-serif;
+  font-size: calc(var(--poster-size) / 100);
+}
+body {
+  display: grid;
+  min-height: 100vh;
+  background: hsl(0, 0%, 1%);
+  place-items: center;
+}
+p {
+  line-height: 1.2;
+  &:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+}
+.poster {
+  display: grid;
+  width: calc(var(--poster-size) * var(--ratio));
+  height: var(--poster-size);
+  color: var(--color--neutral);
+  background-color: var(--color--background);
+
+  &__inner {
+    padding-left: 5rem;
+    padding-top: 3rem;
+    padding-right: 3rem;
+    max-width: 100%;
+  }
+  &__row {
+    $border: 0.2rem solid var(--color--neutral);
+    display: grid;
+    grid-template-columns: 1fr 1.7fr 1fr 1fr;
+    grid-column-gap: 1rem;
+    border-top: $border;
+    padding: 1.5rem 0;
+    align-items: end;
+    &:last-child {
+      border-bottom: $border;
+    }
+  }
+  &__header {
+    color: var(--color--contrast);
+    font-size: 10rem;
+    margin: 2rem 0 0;
+    font-weight: 550;
+  }
+  &__subheader {
+    grid-column: 2;
+    font-weight: 500;
+    font-size: 3rem;
+  }
+}
diff --git a/css-grid-template-builder/README.markdown b/css-grid-template-builder/README.markdown
new file mode 100644
index 0000000..fc757bc
--- /dev/null
+++ b/css-grid-template-builder/README.markdown
@@ -0,0 +1,7 @@
+# CSS Grid Template Builder
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/anthonydugois/pen/RpYBmy](https://codepen.io/anthonydugois/pen/RpYBmy).
+
+A simple tool to build complex CSS Grid templates.
+
+CSS Grid support: [http://caniuse.com/#feat=css-grid](http://caniuse.com/#feat=css-grid)
diff --git a/css-grid-template-builder/dist/index.html b/css-grid-template-builder/dist/index.html
new file mode 100644
index 0000000..a676c59
--- /dev/null
+++ b/css-grid-template-builder/dist/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS Grid Template Builder</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="root"></div>
+<!-- partial -->
+  <script src='https://unpkg.com/react@15.4.2/dist/react.min.js'></script>
+<script src='https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js'></script>
+<script src='https://unpkg.com/styled-components@1.4.4/dist/styled-components.min.js'></script>
+<script src='https://unpkg.com/polished@1.0.0/dist/polished.min.js'></script>
+<script src='https://unpkg.com/grid-template-parser@0.3.2/dist/grid-template-parser.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/css-grid-template-builder/dist/script.js b/css-grid-template-builder/dist/script.js
new file mode 100644
index 0000000..2a4d383
--- /dev/null
+++ b/css-grid-template-builder/dist/script.js
@@ -0,0 +1,813 @@
+function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const { render } = ReactDOM;
+const { Component, PropTypes } = React;
+const { h1, h2, div, input, textarea, a, svg, g, line, text } = styled.default;
+const { darken, lighten, transparentize } = polished;
+const { grid, template } = GridTemplateParser;
+
+// helpers
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
+// styles
+const colors = {
+  primary: '#263238',
+  secondary: '#1DE9B6' };
+
+
+const StyledApp = div`
+  display: grid;
+  grid-template-columns: 25rem auto;
+  grid-template-rows: auto;
+  grid-template-areas: "sidebar main";
+  width: 100%;
+  height: 100vh;
+`;
+
+const StyledSidebar = div`
+  display: flex;
+  flex-direction: column;
+  grid-area: sidebar;
+  background: ${darken(.1, colors.primary)};
+  overflow: hidden;
+`;
+
+const StyledMain = div`
+  display: flex;
+  flex-direction: column;
+  grid-area: main;
+  padding: 2rem;
+  background: ${darken(.05, colors.primary)};
+`;
+
+const StyledMainInner = div`
+  flex: 1;
+  position: relative;
+`;
+
+const StyledGrid = svg`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;
+
+const StyledGridText = text`
+  font-family: 'Roboto Mono', monospace;
+  font-weight: 500;
+  font-size: 1rem;
+  text-anchor: middle;
+  alignment-baseline: middle;
+  fill: ${transparentize(.75, colors.secondary)};
+`;
+
+const StyledGridLine = line`
+  stroke: ${darken(.01, colors.primary)};
+  stroke-width: 1px;
+`;
+
+const StyledPreview = div`
+  z-index: 5;
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(${props => props.width}, 1fr);
+  grid-template-rows: repeat(${props => props.height}, 1fr);
+  grid-template-areas: ${props => props.tpl};
+  width: 100%;
+  height: 100%;
+`;
+
+const StyledTrack = div`
+  position: relative;
+  grid-area: ${props => props.area};
+  cursor: ${(props) =>
+props.grabbing ? 'grabbing' : 'grab'};
+  background: ${transparentize(.97, colors.secondary)};
+`;
+
+const StyledHandler = div`
+  position: absolute;
+  top: ${({ position }) =>
+position === 'bottom' ? 'auto' : 0};
+  right: ${({ position }) =>
+position === 'left' ? 'auto' : 0};
+  bottom: ${({ position }) =>
+position === 'top' ? 'auto' : 0};
+  left: ${({ position }) =>
+position === 'right' ? 'auto' : 0};
+  width: ${({ position, size }) =>
+position === 'left' || position === 'right' ? size : '100%'};
+  height: ${({ position, size }) =>
+position === 'top' || position === 'bottom' ? size : '100%'};
+  cursor: ${({ position }) =>
+position === 'left' || position === 'right' ? 'col-resize' : 'row-resize'};
+  background: ${colors.secondary};
+`;
+
+const StyledHint = div`
+  padding: 2rem;
+`;
+
+const StyledHintTitle = h1`
+  padding-bottom: 1rem;
+  font-weight: 500;
+  font-size: 1.5rem;
+  color: ${colors.secondary};
+`;
+
+const StyledHintDescription = div`
+  line-height: 1.6;
+  font-size: 1rem;
+  color: ${lighten(.6, colors.primary)};
+`;
+
+const StyledTemplate = div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+`;
+
+const StyledTemplateTitle = h2`
+  padding-bottom: 1.5rem;
+  text-transform: uppercase;
+  font-size: .85rem;
+  font-weight: 500;
+  color: ${colors.secondary};
+  letter-spacing: .1rem;
+`;
+
+const StyledTemplateControl = div`
+  flex: 1;
+`;
+
+const StyledTemplateInput = textarea`
+  width: 100%;
+  height: 100%;
+  padding: 2rem;
+  background: ${darken(.125, colors.primary)};
+  border-radius: 2px;
+  border: none;
+  resize: none;
+  line-height: 1.5;
+  font-family: 'Roboto Mono', monospace;
+  font-size: .85rem;
+  color: #fff;
+  transition: background .2s;
+
+  &:focus {
+    outline: 0;
+    background: ${darken(.15, colors.primary)};
+  }
+`;
+
+const StyledSettings = div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 2rem;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    display: block;
+    height: 1px;
+    background: ${colors.primary};
+  }
+`;
+
+const StyledSettingDivider = div`
+  text-align: center;
+  font-family: 'Roboto Mono';
+  font-weight: 500;
+  font-size: 1.05rem;
+  color: ${lighten(.05, colors.primary)};
+`;
+
+const StyledSettingInput = input`
+  width: 4rem;
+  padding: .4rem .6rem;
+  margin: 0 .75rem;
+  background: ${darken(.1, colors.primary)};
+  border: none;
+  border-radius: 2px;
+  text-align: center;
+  font-family: 'Roboto Mono';
+  font-size: .8rem;
+  color: #fff;
+  transition: background .2s;
+
+  &:focus {
+    outline: 0;
+    background: ${darken(.125, colors.primary)};
+  }
+`;
+
+const StyledFoot = div`
+  padding: 0 2rem 2rem;
+`;
+
+const StyledLink = a`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: .8rem;
+  color: ${colors.secondary};
+  transition: color .2s;
+
+  &:hover {
+    color: #fff;
+  }
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    display: block;
+    height: 1px;
+    background: ${colors.primary};
+  }
+  &::before {
+    margin-right: .75rem;
+  }
+  &::after {
+    margin-left: .75rem;
+  }
+`;
+
+function Sidebar(props) {
+  return /*#__PURE__*/(
+    React.createElement(StyledSidebar, null, /*#__PURE__*/
+    React.createElement(Hint, null), /*#__PURE__*/
+    React.createElement(Template, props), /*#__PURE__*/
+    React.createElement(Foot, null)));
+
+
+}
+
+function Hint() {
+  return /*#__PURE__*/(
+    React.createElement(StyledHint, null, /*#__PURE__*/
+    React.createElement(StyledHintTitle, null, "CSS Grid Template Builder"), /*#__PURE__*/
+
+
+    React.createElement(StyledHintDescription, null, "A simple tool to build complex CSS Grid templates. Edit the template string below or drag the areas in the preview. The changes will reflect in both sides.")));
+
+
+
+
+
+
+}
+
+function Foot() {
+  return /*#__PURE__*/(
+    React.createElement(StyledFoot, null, /*#__PURE__*/
+    React.createElement(StyledLink, { href: "https://twitter.com/a_dugois", target: "_blank" }, "Follow me on Twitter!")));
+
+
+
+
+}
+
+function Template({ tpl, setTracks }) {
+  return /*#__PURE__*/(
+    React.createElement(StyledTemplate, null, /*#__PURE__*/
+    React.createElement(StyledTemplateTitle, null, "Template areas"), /*#__PURE__*/
+
+
+    React.createElement(StyledTemplateControl, null, /*#__PURE__*/
+    React.createElement(Text, { value: tpl, onBlur: setTracks },
+    props => /*#__PURE__*/React.createElement(StyledTemplateInput, props)))));
+
+
+
+
+}
+
+function Main({ tpl, width, height, areas, setArea, setWidth, setHeight }) {
+  return /*#__PURE__*/(
+    React.createElement(StyledMain, null, /*#__PURE__*/
+    React.createElement(Settings, {
+      width: width,
+      height: height,
+      setWidth: setWidth,
+      setHeight: setHeight }), /*#__PURE__*/
+    React.createElement(StyledMainInner, null, /*#__PURE__*/
+    React.createElement(Grid, {
+      width: width,
+      height: height,
+      areas: areas }), /*#__PURE__*/
+    React.createElement(Preview, {
+      tpl: tpl,
+      width: width,
+      height: height,
+      areas: areas,
+      setArea: setArea }))));
+
+
+
+}
+
+function Settings({ width, height, setWidth, setHeight }) {
+  return /*#__PURE__*/(
+    React.createElement(StyledSettings, null, /*#__PURE__*/
+    React.createElement(Text, { value: width, onBlur: setWidth },
+    props => /*#__PURE__*/React.createElement(StyledSettingInput, props)), /*#__PURE__*/
+
+    React.createElement(StyledSettingDivider, null, "x"), /*#__PURE__*/
+    React.createElement(Text, { value: height, onBlur: setHeight },
+    props => /*#__PURE__*/React.createElement(StyledSettingInput, props))));
+
+
+
+}
+
+function Track({ area, column, row, grabbing, onMouseDown, onHandlerMouseDown }) {
+  return /*#__PURE__*/(
+    React.createElement(StyledTrack, {
+      area: area,
+      grabbing: grabbing,
+      onMouseDown: onMouseDown }, /*#__PURE__*/
+    React.createElement(Handler, { position: "top", onMouseDown: onHandlerMouseDown('top') }), /*#__PURE__*/
+    React.createElement(Handler, { position: "right", onMouseDown: onHandlerMouseDown('right') }), /*#__PURE__*/
+    React.createElement(Handler, { position: "bottom", onMouseDown: onHandlerMouseDown('bottom') }), /*#__PURE__*/
+    React.createElement(Handler, { position: "left", onMouseDown: onHandlerMouseDown('left') })));
+
+
+}
+
+function Handler({ position, onMouseDown }) {
+  return /*#__PURE__*/(
+    React.createElement(StyledHandler, {
+      size: "6px",
+      position: position,
+      onMouseDown: onMouseDown }));
+
+}
+
+class App extends Component {constructor(...args) {super(...args);_defineProperty(this, "state",
+    {
+      tracks: {
+        width: 4,
+        height: 6,
+        areas: {
+          head: {
+            column: { start: 1, end: 5, span: 4 },
+            row: { start: 1, end: 2, span: 1 } },
+
+          aside: {
+            column: { start: 1, end: 2, span: 1 },
+            row: { start: 2, end: 4, span: 2 } },
+
+          main: {
+            column: { start: 2, end: 5, span: 3 },
+            row: { start: 2, end: 6, span: 4 } },
+
+          foot: {
+            column: { start: 1, end: 5, span: 4 },
+            row: { start: 6, end: 7, span: 1 } } } } });_defineProperty(this, "setTracks",
+
+
+
+
+
+    evt => {
+      this.setState(() => ({ tracks: grid(evt.target.value) }));
+    });_defineProperty(this, "integer",
+
+    (value, previous, min, max) => {
+      const int = parseInt(value);
+      const safe = isNaN(int) ? previous : clamp(int, min, max);
+
+      return safe;
+    });_defineProperty(this, "setWidth",
+
+    evt => {
+      this.setState(({ tracks }) => ({
+        tracks: {
+          ...tracks,
+          width: this.integer(evt.target.value, tracks.width, 1, 100) } }));
+
+
+    });_defineProperty(this, "setHeight",
+
+    evt => {
+      this.setState(({ tracks }) => ({
+        tracks: {
+          ...tracks,
+          height: this.integer(evt.target.value, tracks.height, 1, 100) } }));
+
+
+    });_defineProperty(this, "setArea",
+
+    (key, value) => {
+      this.setState(({ tracks }) => ({
+        tracks: {
+          ...tracks,
+          areas: {
+            ...tracks.areas,
+            [key]: value } } }));
+
+
+
+    });}
+
+  render() {
+    const { tracks } = this.state;
+    const { width, height, areas } = tracks;
+    const tpl = template(tracks);
+
+    return /*#__PURE__*/(
+      React.createElement(StyledApp, null, /*#__PURE__*/
+      React.createElement(Sidebar, {
+        tpl: tpl,
+        setTracks: this.setTracks }), /*#__PURE__*/
+      React.createElement(Main, {
+        tpl: tpl,
+        width: width,
+        height: height,
+        areas: areas,
+        setArea: this.setArea,
+        setWidth: this.setWidth,
+        setHeight: this.setHeight })));
+
+
+  }}
+
+
+class Text extends Component {constructor(...args) {super(...args);_defineProperty(this, "state",
+
+
+
+
+
+
+
+    {
+      isFocused: false,
+      value: this.props.value });_defineProperty(this, "handleFocus",
+
+
+
+
+
+
+    evt => {
+      evt.persist();
+
+      this.props.onFocus(evt);
+      this.setState(() => ({ isFocused: true }));
+    });_defineProperty(this, "handleBlur",
+
+    evt => {
+      evt.persist();
+
+      this.props.onBlur(evt);
+      this.setState(() => ({ isFocused: false }));
+    });_defineProperty(this, "handleChange",
+
+    evt => {
+      evt.persist();
+
+      const { value } = evt.target;
+
+      this.props.onChange(evt);
+      this.setState(() => ({ value }));
+    });}componentWillReceiveProps({ value }) {this.setState(() => ({ value }));}
+
+  render() {
+    const { isFocused } = this.state;
+    const value = isFocused ? this.state.value : this.props.value;
+
+    return this.props.children({
+      value,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onChange: this.handleChange });
+
+  }}_defineProperty(Text, "defaultProps", { value: '', onFocus: () => {}, onBlur: () => {}, onChange: () => {} });
+
+
+class Preview extends Component {
+  constructor() {
+    super();_defineProperty(this, "state",
+
+
+
+
+
+    {
+      isDragging: false,
+      draggedArea: null,
+      draggedPosition: null });_defineProperty(this, "handleMouseUp",
+
+
+
+
+
+
+
+
+
+
+
+
+    evt => {
+      if (this.state.isDragging) {
+        this.setState(() => ({
+          isDragging: false,
+          draggedArea: null,
+          draggedPosition: null }));
+
+      }
+    });_defineProperty(this, "handleMouseMove",
+
+    evt => {
+      const { width, height } = this.props;
+      const { isDragging, draggedArea, draggedPosition } = this.state;
+
+      if (isDragging) {
+        const rect = this.node.getBoundingClientRect();
+        const x = Math.round((evt.clientX - rect.left) / rect.width * width);
+        const y = Math.round((evt.clientY - rect.top) / rect.height * height);
+
+        switch (true) {
+          case typeof draggedPosition === 'string':
+            return this.moveHandler(x, y);
+          case typeof draggedArea === 'string':
+            return this.moveTrack(x, y);}
+
+      }
+    });_defineProperty(this, "makeTrackMouseDown",
+
+    draggedArea => evt => {
+      evt.preventDefault();
+
+      const { width, height, areas } = this.props;
+      const area = areas[draggedArea];
+      const rect = this.node.getBoundingClientRect();
+
+      const x = Math.round((evt.clientX - rect.left) / rect.width * width);
+      const y = Math.round((evt.clientY - rect.top) / rect.height * height);
+
+      this.dx = x - area.column.start + 1;
+      this.dy = y - area.row.start + 1;
+
+      this.setState(() => ({ isDragging: true, draggedArea }));
+    });_defineProperty(this, "makeHandlerMouseDown",
+
+    draggedArea => draggedPosition => evt => {
+      evt.preventDefault();
+      this.setState(() => ({ isDragging: true, draggedArea, draggedPosition }));
+    });_defineProperty(this, "moveTrack",
+
+    (x, y) => {
+      const { width, height, areas, setArea } = this.props;
+      const { draggedArea } = this.state;
+      const area = areas[draggedArea];
+
+      const top = this.findAdjacentArea('top', draggedArea);
+      const right = this.findAdjacentArea('right', draggedArea);
+      const bottom = this.findAdjacentArea('bottom', draggedArea);
+      const left = this.findAdjacentArea('left', draggedArea);
+
+      const columnStart = clamp(
+      x - this.dx + 1,
+      typeof left === 'string' ? areas[left].column.end : 1,
+      (typeof right === 'string' ? areas[right].column.start : width + 1) - area.column.span);
+
+
+      const rowStart = clamp(
+      y - this.dy + 1,
+      typeof top === 'string' ? areas[top].row.end : 1,
+      (typeof bottom === 'string' ? areas[bottom].row.start : height + 1) - area.row.span);
+
+
+      if (columnStart !== area.column.start || rowStart !== area.row.start) {
+        const columnEnd = columnStart + area.column.span;
+        const rowEnd = rowStart + area.row.span;
+
+        return setArea(draggedArea, {
+          column: {
+            ...area.column,
+            start: columnStart,
+            end: columnEnd },
+
+          row: {
+            ...area.row,
+            start: rowStart,
+            end: rowEnd } });
+
+
+      }
+    });_defineProperty(this, "moveHandler",
+
+    (x, y) => {
+      const { width, height, areas, setArea } = this.props;
+      const { draggedPosition, draggedArea } = this.state;
+      const area = areas[draggedArea];
+      const adj = this.findAdjacentArea(draggedPosition, draggedArea);
+
+      if (draggedPosition === 'top') {
+        const start = clamp(
+        y + 1,
+        typeof adj === 'string' ? areas[adj].row.end : 1,
+        area.row.end - 1);
+
+
+        return setArea(draggedArea, {
+          ...area,
+          row: {
+            ...area.row,
+            span: area.row.end - start,
+            start } });
+
+
+      }
+
+      if (draggedPosition === 'right') {
+        const end = clamp(
+        x + 1,
+        area.column.start + 1,
+        typeof adj === 'string' ? areas[adj].column.start : width + 1);
+
+
+        return setArea(draggedArea, {
+          ...area,
+          column: {
+            ...area.column,
+            span: end - area.column.start,
+            end } });
+
+
+      }
+
+      if (draggedPosition === 'bottom') {
+        const end = clamp(
+        y + 1,
+        area.row.start + 1,
+        typeof adj === 'string' ? areas[adj].row.start : height + 1);
+
+
+        return setArea(draggedArea, {
+          ...area,
+          row: {
+            ...area.row,
+            span: end - area.row.start,
+            end } });
+
+
+      }
+
+      if (draggedPosition === 'left') {
+        const start = clamp(
+        x + 1,
+        typeof adj === 'string' ? areas[adj].column.end : 1,
+        area.column.end - 1);
+
+
+        return setArea(draggedArea, {
+          ...area,
+          column: {
+            ...area.column,
+            span: area.column.end - start,
+            start } });
+
+
+      }
+    });_defineProperty(this, "findAdjacentArea",
+
+    (direction, area) => {
+      const { areas } = this.props;
+      const { column, row } = areas[area];
+      const keys = Object.keys(areas);
+
+      if (direction === 'top') {
+        return keys.find((key) =>
+        areas[key].row.end === row.start &&
+        areas[key].column.start < column.end &&
+        areas[key].column.end > column.start);
+
+      }
+
+      if (direction === 'right') {
+        return keys.find((key) =>
+        areas[key].column.start === column.end &&
+        areas[key].row.start < row.end &&
+        areas[key].row.end > row.start);
+
+      }
+
+      if (direction === 'bottom') {
+        return keys.find((key) =>
+        areas[key].row.start === row.end &&
+        areas[key].column.start < column.end &&
+        areas[key].column.end > column.start);
+
+      }
+
+      if (direction === 'left') {
+        return keys.find((key) =>
+        areas[key].column.end === column.start &&
+        areas[key].row.start < row.end &&
+        areas[key].row.end > row.start);
+
+      }
+    });this.dx = 0;this.dy = 0;}componentDidMount() {document.addEventListener('mouseup', this.handleMouseUp);document.addEventListener('mousemove', this.handleMouseMove);}componentWillUnmount() {document.removeEventListener('mouseup', this.handleMouseUp);document.removeEventListener('mousemove', this.handleMouseMove);}
+
+  render() {
+    const { tpl, width, height, areas } = this.props;
+    const { isDragging, draggedArea, draggedPosition } = this.state;
+
+    return /*#__PURE__*/(
+      React.createElement(StyledPreview, {
+        innerRef: node => this.node = node,
+        tpl: tpl,
+        width: width,
+        height: height },
+      Object.keys(areas).map((area) => /*#__PURE__*/
+      React.createElement(Track, {
+        key: area,
+        area: area,
+        column: areas[area].column,
+        row: areas[area].row,
+        grabbing: isDragging && draggedArea === area && typeof draggedPosition !== 'string',
+        onMouseDown: this.makeTrackMouseDown(area),
+        onHandlerMouseDown: this.makeHandlerMouseDown(area) }))));
+
+
+
+  }}
+
+
+class Grid extends Component {constructor(...args) {super(...args);_defineProperty(this, "renderArea",
+    area => {
+      const { width, height, areas } = this.props;
+      const { row, column } = areas[area];
+
+      return Array.from(
+      { length: row.span },
+      (_, r) => Array.from(
+      { length: column.span },
+      (_, c) => /*#__PURE__*/
+      React.createElement(StyledGridText, {
+        key: `area${r}${c}`,
+        x: `${(column.start + c - .5) / width * 100}%`,
+        y: `${(row.start + r - .5) / height * 100}%` },
+      area)));
+
+
+
+
+    });_defineProperty(this, "renderCols",
+
+    (_, index) => {
+      const { width } = this.props;
+
+      return /*#__PURE__*/(
+        React.createElement(StyledGridLine, {
+          key: index,
+          x1: `${(index + 1) / width * 100}%`,
+          y1: "0%",
+          x2: `${(index + 1) / width * 100}%`,
+          y2: "100%" }));
+
+    });_defineProperty(this, "renderRows",
+
+    (_, index) => {
+      const { height } = this.props;
+
+      return /*#__PURE__*/(
+        React.createElement(StyledGridLine, {
+          key: index,
+          x1: "0%",
+          y1: `${(index + 1) / height * 100}%`,
+          x2: "100%",
+          y2: `${(index + 1) / height * 100}%` }));
+
+    });}
+
+  render() {
+    const {
+      width,
+      height,
+      areas } =
+    this.props;
+
+    return /*#__PURE__*/(
+      React.createElement(StyledGrid, null, /*#__PURE__*/
+      React.createElement("g", null, Object.keys(areas).map(this.renderArea)), /*#__PURE__*/
+      React.createElement("g", null, Array.from({ length: width - 1 }, this.renderCols)), /*#__PURE__*/
+      React.createElement("g", null, Array.from({ length: height - 1 }, this.renderRows))));
+
+
+  }}
+
+
+render( /*#__PURE__*/
+React.createElement(App, null),
+document.querySelector('#root'));
\ No newline at end of file
diff --git a/css-grid-template-builder/dist/style.css b/css-grid-template-builder/dist/style.css
new file mode 100644
index 0000000..0b52eb6
--- /dev/null
+++ b/css-grid-template-builder/dist/style.css
@@ -0,0 +1,23 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500|Roboto+Mono:400,500');
+
+*,
+*::after,
+*::before {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background: #fff;
+  line-height: 1;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  color: #000;
+}
\ No newline at end of file
diff --git a/css-grid-template-builder/license.txt b/css-grid-template-builder/license.txt
new file mode 100644
index 0000000..8ee26f2
--- /dev/null
+++ b/css-grid-template-builder/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Anthony Dugois (https://codepen.io/anthonydugois/pen/RpYBmy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-grid-template-builder/src/index.html b/css-grid-template-builder/src/index.html
new file mode 100644
index 0000000..98499e9
--- /dev/null
+++ b/css-grid-template-builder/src/index.html
@@ -0,0 +1 @@
+<div id="root"></div>
\ No newline at end of file
diff --git a/css-grid-template-builder/src/script.babel b/css-grid-template-builder/src/script.babel
new file mode 100644
index 0000000..d893088
--- /dev/null
+++ b/css-grid-template-builder/src/script.babel
@@ -0,0 +1,814 @@
+const {render} = ReactDOM;
+const {Component, PropTypes} = React;
+const {h1, h2, div, input, textarea, a, svg, g, line, text} = styled.default;
+const {darken, lighten, transparentize} = polished;
+const {grid, template} = GridTemplateParser;
+
+// helpers
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
+// styles
+const colors = {
+  primary: '#263238',
+  secondary: '#1DE9B6',
+};
+
+const StyledApp = div`
+  display: grid;
+  grid-template-columns: 25rem auto;
+  grid-template-rows: auto;
+  grid-template-areas: "sidebar main";
+  width: 100%;
+  height: 100vh;
+`;
+
+const StyledSidebar = div`
+  display: flex;
+  flex-direction: column;
+  grid-area: sidebar;
+  background: ${darken(.1, colors.primary)};
+  overflow: hidden;
+`;
+
+const StyledMain = div`
+  display: flex;
+  flex-direction: column;
+  grid-area: main;
+  padding: 2rem;
+  background: ${darken(.05, colors.primary)};
+`;
+
+const StyledMainInner = div`
+  flex: 1;
+  position: relative;
+`;
+
+const StyledGrid = svg`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;
+
+const StyledGridText = text`
+  font-family: 'Roboto Mono', monospace;
+  font-weight: 500;
+  font-size: 1rem;
+  text-anchor: middle;
+  alignment-baseline: middle;
+  fill: ${transparentize(.75, colors.secondary)};
+`;
+
+const StyledGridLine = line`
+  stroke: ${darken(.01, colors.primary)};
+  stroke-width: 1px;
+`;
+
+const StyledPreview = div`
+  z-index: 5;
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(${props => props.width}, 1fr);
+  grid-template-rows: repeat(${props => props.height}, 1fr);
+  grid-template-areas: ${props => props.tpl};
+  width: 100%;
+  height: 100%;
+`;
+
+const StyledTrack = div`
+  position: relative;
+  grid-area: ${props => props.area};
+  cursor: ${props =>
+    props.grabbing ? 'grabbing' : 'grab'};
+  background: ${transparentize(.97, colors.secondary)};
+`;
+
+const StyledHandler = div`
+  position: absolute;
+  top: ${({position}) =>
+    position === 'bottom' ? 'auto' : 0};
+  right: ${({position}) =>
+    position === 'left' ? 'auto' : 0};
+  bottom: ${({position}) =>
+    position === 'top' ? 'auto' : 0};
+  left: ${({position}) =>
+    position === 'right' ? 'auto' : 0};
+  width: ${({position, size}) =>
+    position === 'left' || position === 'right' ? size : '100%'};
+  height: ${({position, size}) =>
+    position === 'top' || position === 'bottom' ? size : '100%'};
+  cursor: ${({position}) =>
+    position === 'left' || position === 'right' ? 'col-resize' : 'row-resize'};
+  background: ${colors.secondary};
+`;
+
+const StyledHint = div`
+  padding: 2rem;
+`;
+
+const StyledHintTitle = h1`
+  padding-bottom: 1rem;
+  font-weight: 500;
+  font-size: 1.5rem;
+  color: ${colors.secondary};
+`;
+
+const StyledHintDescription = div`
+  line-height: 1.6;
+  font-size: 1rem;
+  color: ${lighten(.6, colors.primary)};
+`;
+
+const StyledTemplate = div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+`;
+
+const StyledTemplateTitle = h2`
+  padding-bottom: 1.5rem;
+  text-transform: uppercase;
+  font-size: .85rem;
+  font-weight: 500;
+  color: ${colors.secondary};
+  letter-spacing: .1rem;
+`;
+
+const StyledTemplateControl = div`
+  flex: 1;
+`;
+
+const StyledTemplateInput = textarea`
+  width: 100%;
+  height: 100%;
+  padding: 2rem;
+  background: ${darken(.125, colors.primary)};
+  border-radius: 2px;
+  border: none;
+  resize: none;
+  line-height: 1.5;
+  font-family: 'Roboto Mono', monospace;
+  font-size: .85rem;
+  color: #fff;
+  transition: background .2s;
+
+  &:focus {
+    outline: 0;
+    background: ${darken(.15, colors.primary)};
+  }
+`;
+
+const StyledSettings = div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 2rem;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    display: block;
+    height: 1px;
+    background: ${colors.primary};
+  }
+`;
+
+const StyledSettingDivider = div`
+  text-align: center;
+  font-family: 'Roboto Mono';
+  font-weight: 500;
+  font-size: 1.05rem;
+  color: ${lighten(.05, colors.primary)};
+`;
+
+const StyledSettingInput = input`
+  width: 4rem;
+  padding: .4rem .6rem;
+  margin: 0 .75rem;
+  background: ${darken(.1, colors.primary)};
+  border: none;
+  border-radius: 2px;
+  text-align: center;
+  font-family: 'Roboto Mono';
+  font-size: .8rem;
+  color: #fff;
+  transition: background .2s;
+
+  &:focus {
+    outline: 0;
+    background: ${darken(.125, colors.primary)};
+  }
+`;
+
+const StyledFoot = div`
+  padding: 0 2rem 2rem;
+`;
+
+const StyledLink = a`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: .8rem;
+  color: ${colors.secondary};
+  transition: color .2s;
+
+  &:hover {
+    color: #fff;
+  }
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    display: block;
+    height: 1px;
+    background: ${colors.primary};
+  }
+  &::before {
+    margin-right: .75rem;
+  }
+  &::after {
+    margin-left: .75rem;
+  }
+`;
+
+function Sidebar(props) {
+  return (
+    <StyledSidebar>
+      <Hint />
+      <Template {...props} />
+      <Foot />
+    </StyledSidebar>
+  );
+}
+
+function Hint() {
+  return (
+    <StyledHint>
+      <StyledHintTitle>
+        CSS Grid Template Builder
+      </StyledHintTitle>
+      <StyledHintDescription>
+        A simple tool to build complex CSS Grid templates.
+        Edit the template string below or drag the areas in the preview.
+        The changes will reflect in both sides.
+      </StyledHintDescription>
+    </StyledHint>
+  );
+}
+
+function Foot() {
+  return (
+    <StyledFoot>
+      <StyledLink href="https://twitter.com/a_dugois" target="_blank">
+        Follow me on Twitter!
+      </StyledLink>
+    </StyledFoot>
+  );
+}
+
+function Template({tpl, setTracks}) {
+  return (
+    <StyledTemplate>
+      <StyledTemplateTitle>
+        Template areas
+      </StyledTemplateTitle>
+      <StyledTemplateControl>
+        <Text value={tpl} onBlur={setTracks}>
+          {props => <StyledTemplateInput {...props} />}
+        </Text>
+      </StyledTemplateControl>
+    </StyledTemplate>
+  );
+}
+
+function Main({tpl, width, height, areas, setArea, setWidth, setHeight}) {
+  return (
+    <StyledMain>
+      <Settings
+        width={width}
+        height={height}
+        setWidth={setWidth}
+        setHeight={setHeight} />
+      <StyledMainInner>
+        <Grid
+          width={width}
+          height={height}
+          areas={areas} />
+        <Preview
+          tpl={tpl}
+          width={width}
+          height={height}
+          areas={areas}
+          setArea={setArea} />
+      </StyledMainInner>
+    </StyledMain>
+  );
+}
+
+function Settings({width, height, setWidth, setHeight}) {
+  return (
+    <StyledSettings>
+      <Text value={width} onBlur={setWidth}>
+        {props => <StyledSettingInput {...props} />}
+      </Text>
+      <StyledSettingDivider>x</StyledSettingDivider>
+      <Text value={height} onBlur={setHeight}>
+        {props => <StyledSettingInput {...props} />}
+      </Text>
+    </StyledSettings>
+  );
+}
+
+function Track({area, column, row, grabbing, onMouseDown, onHandlerMouseDown}) {
+  return (
+    <StyledTrack
+      area={area}
+      grabbing={grabbing}
+      onMouseDown={onMouseDown}>
+      <Handler position="top" onMouseDown={onHandlerMouseDown('top')} />
+      <Handler position="right" onMouseDown={onHandlerMouseDown('right')} />
+      <Handler position="bottom" onMouseDown={onHandlerMouseDown('bottom')} />
+      <Handler position="left" onMouseDown={onHandlerMouseDown('left')} />
+    </StyledTrack>
+  );
+}
+
+function Handler({position, onMouseDown}) {
+  return (
+    <StyledHandler
+      size="6px"
+      position={position}
+      onMouseDown={onMouseDown} />
+  );
+}
+
+class App extends Component {
+  state = {
+    tracks: {
+      width: 4,
+      height: 6,
+      areas: {
+        head: {
+          column: { start: 1, end: 5, span: 4 },
+          row: { start: 1, end: 2, span: 1 },
+        },
+        aside: {
+          column: { start: 1, end: 2, span: 1 },
+          row: { start: 2, end: 4, span: 2 },
+        },
+        main: {
+          column: { start: 2, end: 5, span: 3 },
+          row: { start: 2, end: 6, span: 4 },
+        },
+        foot: {
+          column: { start: 1, end: 5, span: 4 },
+          row: { start: 6, end: 7, span: 1 },
+        },
+      },
+    },
+  };
+
+  setTracks = evt => {
+    this.setState(() => ({tracks: grid(evt.target.value)}));
+  };
+
+  integer = (value, previous, min, max) => {
+    const int = parseInt(value);
+    const safe = isNaN(int) ? previous : clamp(int, min, max);
+    
+    return safe;
+  };
+
+  setWidth = evt => {
+    this.setState(({tracks}) => ({
+      tracks: {
+        ...tracks,
+        width: this.integer(evt.target.value, tracks.width, 1, 100),
+      },
+    }));
+  };
+
+  setHeight = evt => {
+    this.setState(({tracks}) => ({
+      tracks: {
+        ...tracks,
+        height: this.integer(evt.target.value, tracks.height, 1, 100),
+      },
+    }));
+  };
+
+  setArea = (key, value) => {
+    this.setState(({tracks}) => ({
+      tracks: {
+        ...tracks,
+        areas: {
+          ...tracks.areas,
+          [key]: value,
+        },
+      },
+    }));
+  };
+
+  render() {
+    const {tracks} = this.state;
+    const {width, height, areas} = tracks;
+    const tpl = template(tracks);
+
+    return (
+      <StyledApp>
+        <Sidebar
+          tpl={tpl}
+          setTracks={this.setTracks} />
+        <Main
+          tpl={tpl}
+          width={width}
+          height={height}
+          areas={areas}
+          setArea={this.setArea}
+          setWidth={this.setWidth}
+          setHeight={this.setHeight} />
+      </StyledApp>
+    );
+  }
+}
+
+class Text extends Component {
+  static defaultProps = {
+    value: '',
+    onFocus: () => {},
+    onBlur: () => {},
+    onChange: () => {},
+  };
+
+  state = {
+    isFocused: false,
+    value: this.props.value,
+  };
+
+  componentWillReceiveProps({value}) {
+    this.setState(() => ({value}));
+  }
+
+  handleFocus = evt => {
+    evt.persist();
+    
+    this.props.onFocus(evt);
+    this.setState(() => ({isFocused: true}));
+  };
+
+  handleBlur = evt => {
+    evt.persist();
+    
+    this.props.onBlur(evt);
+    this.setState(() => ({isFocused: false}));
+  };
+
+  handleChange = evt => {
+    evt.persist();
+    
+    const {value} = evt.target;
+    
+    this.props.onChange(evt);
+    this.setState(() => ({value}));
+  };
+
+  render() {
+    const {isFocused} = this.state;
+    const value = isFocused ? this.state.value : this.props.value;
+    
+    return this.props.children({
+      value,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onChange: this.handleChange,
+    });
+  }
+}
+
+class Preview extends Component {
+  constructor() {
+    super();
+        
+    this.dx = 0;
+    this.dy = 0;
+  }
+  
+  state = {
+    isDragging: false,
+    draggedArea: null,
+    draggedPosition: null,
+  };
+
+  componentDidMount() {
+    document.addEventListener('mouseup', this.handleMouseUp);
+    document.addEventListener('mousemove', this.handleMouseMove);
+  }
+  
+  componentWillUnmount() {
+    document.removeEventListener('mouseup', this.handleMouseUp);
+    document.removeEventListener('mousemove', this.handleMouseMove);
+  }
+  
+  handleMouseUp = evt => {
+    if (this.state.isDragging) {
+      this.setState(() => ({
+        isDragging: false,
+        draggedArea: null,
+        draggedPosition: null,
+      }));
+    }
+  };
+  
+  handleMouseMove = evt => {
+    const {width, height} = this.props;
+    const {isDragging, draggedArea, draggedPosition} = this.state;
+    
+    if (isDragging) {
+      const rect = this.node.getBoundingClientRect();     
+      const x = Math.round((evt.clientX - rect.left) / rect.width * width);
+      const y = Math.round((evt.clientY - rect.top) / rect.height * height);
+      
+      switch (true) {
+        case typeof draggedPosition === 'string':
+          return this.moveHandler(x, y);
+        case typeof draggedArea === 'string':
+          return this.moveTrack(x, y);
+      }
+    }
+  };
+
+  makeTrackMouseDown = draggedArea => evt => {
+    evt.preventDefault();
+    
+    const {width, height, areas} = this.props;
+    const area = areas[draggedArea];
+    const rect = this.node.getBoundingClientRect();
+    
+    const x = Math.round((evt.clientX - rect.left) / rect.width * width);
+    const y = Math.round((evt.clientY - rect.top) / rect.height * height);
+    
+    this.dx = x - area.column.start + 1;
+    this.dy = y - area.row.start + 1;
+    
+    this.setState(() => ({isDragging: true, draggedArea}));
+  };
+
+  makeHandlerMouseDown = draggedArea => draggedPosition => evt => {
+    evt.preventDefault();
+    this.setState(() => ({isDragging: true, draggedArea, draggedPosition}));
+  };
+
+  moveTrack = (x, y) => {
+    const {width, height, areas, setArea} = this.props;
+    const {draggedArea} = this.state;
+    const area = areas[draggedArea];
+    
+    const top = this.findAdjacentArea('top', draggedArea);
+    const right = this.findAdjacentArea('right', draggedArea);
+    const bottom = this.findAdjacentArea('bottom', draggedArea);
+    const left = this.findAdjacentArea('left', draggedArea);
+    
+    const columnStart = clamp(
+      x - this.dx + 1,
+      typeof left === 'string' ? areas[left].column.end : 1,
+      (typeof right === 'string' ? areas[right].column.start : width + 1) - area.column.span,
+    );
+    
+    const rowStart = clamp(
+      y - this.dy + 1,
+      typeof top === 'string' ? areas[top].row.end : 1,
+      (typeof bottom === 'string' ? areas[bottom].row.start : height + 1) - area.row.span,
+    );
+    
+    if (columnStart !== area.column.start || rowStart !== area.row.start) {
+      const columnEnd = columnStart + area.column.span;
+      const rowEnd = rowStart + area.row.span;
+      
+      return setArea(draggedArea, {
+        column: {
+          ...area.column,
+          start: columnStart,
+          end: columnEnd,
+        },
+        row: {
+          ...area.row,
+          start: rowStart,
+          end: rowEnd,
+        },
+      });
+    }
+  };
+
+  moveHandler = (x, y) => {
+    const {width, height, areas, setArea} = this.props;
+    const {draggedPosition, draggedArea} = this.state;
+    const area = areas[draggedArea];
+    const adj = this.findAdjacentArea(draggedPosition, draggedArea);
+    
+    if (draggedPosition === 'top') {
+      const start = clamp(
+        y + 1,
+        typeof adj === 'string' ? areas[adj].row.end : 1,
+        area.row.end - 1,
+      );
+      
+      return setArea(draggedArea, {
+        ...area,
+        row: {
+          ...area.row,
+          span: area.row.end - start,
+          start,
+        },
+      });
+    }
+    
+    if (draggedPosition === 'right') {
+      const end = clamp(
+        x + 1,
+        area.column.start + 1,
+        typeof adj === 'string' ? areas[adj].column.start : width + 1,
+      );
+      
+      return setArea(draggedArea, {
+        ...area,
+        column: {
+          ...area.column,
+          span: end - area.column.start,
+          end,
+        },
+      });
+    }
+    
+    if (draggedPosition === 'bottom') {
+      const end = clamp(
+        y + 1,
+        area.row.start + 1,
+        typeof adj === 'string' ? areas[adj].row.start : height + 1,
+      );
+      
+      return setArea(draggedArea, {
+        ...area,
+        row: {
+          ...area.row,
+          span: end - area.row.start,
+          end,
+        },
+      });
+    }
+    
+    if (draggedPosition === 'left') {
+      const start = clamp(
+        x + 1,
+        typeof adj === 'string' ? areas[adj].column.end : 1,
+        area.column.end - 1,
+      );
+      
+      return setArea(draggedArea, {
+        ...area,
+        column: {
+          ...area.column,
+          span: area.column.end - start,
+          start,
+        },
+      });
+    }
+  };
+ 
+  findAdjacentArea = (direction, area) => {
+    const {areas} = this.props;
+    const {column, row} = areas[area];
+    const keys = Object.keys(areas);
+    
+    if (direction === 'top') {
+      return keys.find(key =>
+        areas[key].row.end === row.start &&
+        areas[key].column.start < column.end &&
+        areas[key].column.end > column.start
+      );
+    }
+    
+    if (direction === 'right') {
+      return keys.find(key =>
+        areas[key].column.start === column.end &&
+        areas[key].row.start < row.end &&
+        areas[key].row.end > row.start
+      );
+    }
+    
+    if (direction === 'bottom') {
+      return keys.find(key =>
+        areas[key].row.start === row.end &&
+        areas[key].column.start < column.end &&
+        areas[key].column.end > column.start
+      );
+    }
+    
+    if (direction === 'left') {
+      return keys.find(key =>
+        areas[key].column.end === column.start &&
+        areas[key].row.start < row.end &&
+        areas[key].row.end > row.start
+      );
+    }
+  };
+
+  render() {
+    const {tpl, width, height, areas} = this.props;
+    const {isDragging, draggedArea, draggedPosition} = this.state;
+    
+    return (
+      <StyledPreview
+        innerRef={node => this.node = node}
+        tpl={tpl}
+        width={width}
+        height={height}>
+        {Object.keys(areas).map(area => (
+          <Track
+            key={area}
+            area={area}
+            column={areas[area].column}
+            row={areas[area].row}
+            grabbing={isDragging && draggedArea === area && typeof draggedPosition !== 'string'}
+            onMouseDown={this.makeTrackMouseDown(area)}
+            onHandlerMouseDown={this.makeHandlerMouseDown(area)} />
+        ))}
+      </StyledPreview>
+    );
+  }
+}
+
+class Grid extends Component {
+  renderArea = area => {
+    const {width, height, areas} = this.props;
+    const {row, column} = areas[area];
+
+    return Array.from(
+      {length: row.span},
+      (_, r) => Array.from(
+        {length: column.span},
+        (_, c) => (
+          <StyledGridText
+            key={`area${r}${c}`}
+            x={`${(column.start + c - .5) / width * 100}%`}
+            y={`${(row.start + r - .5) / height * 100}%`}>
+            {area}
+          </StyledGridText>
+        ),
+      ),
+    );
+  };
+  
+  renderCols = (_, index) => {
+    const {width} = this.props;
+    
+    return (
+      <StyledGridLine
+        key={index}
+        x1={`${(index + 1) / width * 100}%`}
+        y1="0%"
+        x2={`${(index + 1) / width * 100}%`}
+        y2="100%" />
+    );
+  };
+  
+  renderRows = (_, index) => {
+    const {height} = this.props;
+    
+    return (
+      <StyledGridLine
+        key={index}
+        x1="0%"
+        y1={`${(index + 1) / height * 100}%`}
+        x2="100%"
+        y2={`${(index + 1) / height * 100}%`} />
+    );
+  };
+  
+  render() {
+    const {
+      width,
+      height,
+      areas,
+    } = this.props;
+    
+    return (
+      <StyledGrid>
+        <g>{Object.keys(areas).map(this.renderArea)}</g>
+        <g>{Array.from({length: width - 1}, this.renderCols)}</g>
+        <g>{Array.from({length: height - 1}, this.renderRows)}</g>
+      </StyledGrid>
+    );
+  }
+}
+
+render(
+  <App />,
+  document.querySelector('#root'),
+);
\ No newline at end of file
diff --git a/css-grid-template-builder/src/style.css b/css-grid-template-builder/src/style.css
new file mode 100644
index 0000000..0e18707
--- /dev/null
+++ b/css-grid-template-builder/src/style.css
@@ -0,0 +1,23 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500|Roboto+Mono:400,500');
+
+*,
+*::after,
+*::before {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background: #fff;
+  line-height: 1;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  color: #000;
+}
diff --git a/css-hexagon-grid/README.markdown b/css-hexagon-grid/README.markdown
new file mode 100644
index 0000000..89b8ba7
--- /dev/null
+++ b/css-hexagon-grid/README.markdown
@@ -0,0 +1,4 @@
+# CSS Hexagon Grid
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/ericornelissen/pen/vWbWKv](https://codepen.io/ericornelissen/pen/vWbWKv).
+
+ CSS based implementation of a hexagon grid using CSS grid and CSS variables. Size of the hexagons can be changed using only a single variable
\ No newline at end of file
diff --git a/css-hexagon-grid/dist/index.html b/css-hexagon-grid/dist/index.html
new file mode 100644
index 0000000..67a1f47
--- /dev/null
+++ b/css-hexagon-grid/dist/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Hexagon Grid</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main class="hexagon-container">
+  <div class="hexagon color-sass">
+    <svg aria-labelledby="simpleicons-sass-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-sass-icon">Sass icon</title><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zM9.615 15.998c.175.645.156 1.248-.024 1.792l-.065.18c-.024.061-.052.12-.078.176-.14.29-.326.56-.555.81-.698.759-1.672 1.047-2.09.805-.45-.262-.226-1.335.584-2.19.871-.918 2.12-1.509 2.12-1.509v-.003l.108-.061zm9.911-10.861c-.542-2.133-4.077-2.834-7.422-1.645-1.989.707-4.144 1.818-5.693 3.267C4.568 8.48 4.275 9.98 4.396 10.607c.427 2.211 3.457 3.657 4.703 4.73v.006c-.367.18-3.056 1.529-3.686 2.925-.675 1.47.105 2.521.615 2.655 1.575.436 3.195-.36 4.065-1.649.84-1.261.766-2.881.404-3.676.496-.135 1.08-.195 1.83-.104 2.101.24 2.521 1.56 2.43 2.1-.09.539-.523.854-.674.944-.15.091-.195.12-.181.181.015.09.091.09.21.075.165-.03 1.096-.45 1.141-1.471.045-1.29-1.186-2.729-3.375-2.7-.9.016-1.471.091-1.875.256-.03-.045-.061-.075-.105-.105-1.35-1.455-3.855-2.475-3.75-4.41.03-.705.285-2.564 4.8-4.814 3.705-1.846 6.661-1.335 7.171-.21.733 1.604-1.576 4.59-5.431 5.024-1.47.165-2.235-.404-2.431-.615-.209-.225-.239-.24-.314-.194-.12.06-.045.255 0 .375.12.3.585.825 1.396 1.095.704.225 2.43.359 4.5-.45 2.324-.899 4.139-3.405 3.614-5.505l.073.067z"/></svg>
+  </div>
+  <div class="hexagon color-angular">
+    <svg aria-labelledby="simpleicons-angular-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-angular-icon">Angular icon</title><path d="M9.93 12.645h4.134L11.996 7.74"/><path d="M11.996.009L.686 3.988l1.725 14.76 9.585 5.243 9.588-5.238L23.308 3.99 11.996.01zm7.058 18.297h-2.636l-1.42-3.501H8.995l-1.42 3.501H4.937l7.06-15.648 7.057 15.648z"/></svg>
+  </div>
+  <div class="hexagon color-gulp">
+    <svg aria-labelledby="simpleicons-gulp-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-gulp-icon">Gulp icon</title><path d="M15.156 19.432l.636-1.084s-1.444.591-3.86.591c-2.418 0-3.84-.568-3.84-.568l.711 1.183.252 3.729c0 .403 1.314.718 2.936.718 1.623 0 2.938-.314 2.938-.718l.229-3.835v-.016zm.615-7.046c-.769.046-1.153.903-1.539 1.805-.143.33-.63 1.737-.948 1.563-.318-.173.413-1.329.619-2.017-.237.174-1.105.849-1.329.215-.358.314-1.129.48-1.042-.329-.191.345-.621.823-1.139.614-.673-.255.395-2.411.66-2.307.266.121-.053.6-.136.794-.186.419-.398.958-.255 1.063.24.194.904-.703.919-.719.124-.165.479-1.229.763-1.107.285.134-.711 1.541-.34 1.826.076.06.383-.03.569-.239.12-.12.078-.42.479-1.378.404-.959.764-2.156 1.039-2.066s.049.703-.051.943c-.464 1.078-1.268 2.844-.89 2.71.374-.135.569-.135.943-.569.374-.434.345-1.152.599-1.137.24.014.21.254.15.418.24-.27 1.152-.868 1.363-.284.254.688-1.304 1.692-.914 1.632.375-.045.988-.434 1.258-.793l.719-6.5s-.734.6-5.361.6-5.284-.584-5.284-.584l.613 5.93c.33-.928 1.108-2.814 2.322-2.74.554.03 1.303 1.109.658 1.139-.27.015-.3-.539-.614-.614-.239-.046-.554.135-.763.345-.404.404-1.304 2.006-1.184 2.801.15 1.018 1.407-.346 1.617-.75.149-.283.254-1.138.568-1.048.33.09-.029.974-.27 1.737-.27.869-.404 1.781-.732 1.676-.33-.104.209-1.227.178-1.422-.313.299-.883 1.02-1.631.659l.374 3.699s1.019.793 4.073.793 4.118-.793 4.118-.793l.479-4.283c-.389.39-1.617 1.063-1.692.3-.059-.614 1.333-1.498.974-1.514l.06-.069zM17.346.669l-2.659 2.8-.486 1.901c1.881.12 3.189.386 3.189.694 0 .419-2.414.757-5.391.757s-5.39-.343-5.39-.763c0-.419 2.414-.764 5.391-.764.423 0 .844 0 1.264.016l.561-2.276L16.65.039c.068-.09.28-.015.474.15.194.149.299.344.239.434v.03l-.017.016zm-3.834 5.795s-.523 0-.61-.08c-.022-.025-.036-.058-.036-.09 0-.058.039-.091.09-.11l.044.075c-.021.006-.029.015-.033.023 0 .041.314.069.555.066.239-.003.531-.023.533-.064 0-.012-.023-.023-.061-.033l.045-.072c.063.02.117.058.117.121 0 .11-.141.128-.23.141-.107.015-.412.023-.412.023h-.002z"/></svg>
+  </div>
+  <div class="hexagon color-html">
+    <svg aria-labelledby="simpleicons-html5-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-html5-icon">HTML5 icon</title><path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z"/></svg>
+  </div>
+  
+  <div class="hexagon color-git">
+    <svg aria-labelledby="simpleicons-git-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-git-icon">Git icon</title><path d="M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477c.604.604 1.582.604 2.186 0l10.43-10.43c.605-.603.605-1.582 0-2.187"/></svg>
+  </div>
+  <div class="hexagon color-javascript">
+    <svg aria-labelledby="simpleicons-javascript-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-javascript-icon">JavaScript icon</title><path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/></svg>
+  </div>
+  <div class="hexagon color-vuejs">
+    <svg aria-labelledby="simpleicons-vuejs-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-vuejs-icon">Vue.js icon</title><path d="M19.197 1.608l.003-.006h-4.425L12 6.4v.002l-2.772-4.8H4.803v.005H0l12 20.786L24 1.608"/></svg>
+  </div>
+  <div class="hexagon color-rails">
+    <svg aria-labelledby="simpleicons-rails-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title id="simpleicons-rails-icon">Rails icon</title><path d="M20.8848485 15.8107143v1.1635714h1.9818182c.4060606 0 1.1030303-.315 1.1272727-1.19571427v-.45c0-.75214286-.5818182-1.1957143-1.1272727-1.1957143h-.9878788v-.54h1.9575757v-1.17h-1.8787878c-.4848485 0-1.1333334.42428573-1.1333334 1.215v.405c0 .7907143.6424243 1.1957143 1.1333334 1.1957143 1.3636363.00642857-.3272728 0 .9333333 0v.56571428l-2.0060606.0064286zm-10.6181818-.28285716s1.060606-.09642857 1.060606-1.5492857c0-1.45285715-1.2848485-1.58785715-1.2848485-1.58785715H7.72727273v4.5835714H8.8909091v-1.1057143l1.0060606 1.1057142h1.7212121l-1.3515151-1.4464286zm-.44848488-.93857143H8.8909091v-1.0478571h.93333332s.26060608.1028572.26060608.5207143c0 .4178572-.26666668.5271429-.26666668.5271429zM14.2 12.4228572h-1.1818182c-.8424242 0-1.1272727.81-1.1272727 1.1957143v3.35571427h1.1818182v-.8035714h1.1090909v.8035714h1.1454545V13.6185715c0-.97714286-.8363636-1.1957143-1.1272727-1.1957143zm-.0181818 2.44928572h-1.1151515V13.76s0-.2507143.3696969-.2507143h.4060606c.3272728 0 .3333334.2507143.3333334.2507143v1.11214286h.0060606zm1.6848485-2.44928573h1.230303v4.5514285h-1.230303v-4.5514285zm2.9575757 3.375v-3.375H17.6v4.5514285h2.8787879v-1.1764285h-1.6545455z"/><path d="M.42424242 16.9742857h4.7878788S4.2969697 12.545 7.3272727 10.75142858c.66060607-.34071428 2.76363638-1.61357143 6.20606058 1.08642857.1090909-.09642857.2121212-.17357143.2121212-.17357143s-3.1515151-3.33642856-6.66060602-2.9635714c-1.76363636.16714284-3.93333333 1.87071427-5.2060606 4.12071427-1.27272726 2.25-1.45454546 4.1528571-1.45454546 4.1528571z"/><path d="M.42424242 16.9742857h4.7878788S4.2969697 12.545 7.3272727 10.75142858c.66060607-.34071428 2.76363638-1.61357143 6.20606058 1.08642857.1090909-.09642857.2121212-.17357143.2121212-.17357143s-3.1515151-3.33642856-6.66060602-2.9635714c-1.76363636.16714284-3.93333333 1.87071427-5.2060606 4.12071427-1.27272726 2.25-1.45454546 4.1528571-1.45454546 4.1528571z"/><path d="M.42424242 16.9742857h4.7878788S4.2969697 12.545 7.3272727 10.75142858c.66060607-.34071428 2.76363638-1.61357143 6.20606058 1.08642857.1090909-.09642857.2121212-.17357143.2121212-.17357143s-3.1515151-3.33642856-6.66060602-2.9635714c-1.76969696.16714284-3.93939393 1.87071427-5.2121212 4.12071427C.6 15.0714285.4242424 16.9742857.4242424 16.9742857zM10.4 9.0607143L10.4242424 8.63c-.0545454-.03214286-.2060606-.1092857-.58787876-.225l-.02424243.4242857c.2.0707143.3939394.14785716.5878788.2314286z"/><path d="M9.82424242 10.42357143l-.02424242.405c.2.00642857.4.03214286.6.07714286l.0242424-.3985715c-.2060606-.045-.4060606-.0707143-.59999998-.0835715zm-2.24242424-2.0057143h.06060606l-.12121212-.39214284c-.1878788 0-.38181818.0128571-.58181818.0385714l.1151515.3792857c.1757576-.0192857.35151517-.0257143.52727274-.0257143zm.2909091 2.3657143l.13939393.44357143c.1757576-.09.3515152-.16714286.5272728-.225l-.1333333-.42428572c-.2060606.06428572-.3818182.135-.5333333.2057143zM5.1212121 9.09285713l-.27272727-.44357142c-.15151515.0835715-.3090909.1735715-.47272727.2764286l.27878787.45c.15757576-.1028571.3090909-.1992857.46666667-.2828571zm1.24242424 2.89285716l.2909091.4628571c.1030303-.1607143.22424242-.3085715.35757575-.4564286L6.7393939 11.555c-.13939394.135-.26666667.28285714-.37575758.4307143zm-.87878788 2.07l.4909091.4114285C6 14.2164285 6.04242424 13.9657143 6.1030303 13.715l-.43636363-.36642857c-.07878788.23785714-.13333334.47571428-.1818182.70714286zM2.830303 11.0021428L2.4 10.60357142c-.15757576.1607143-.3090909.32142858-.44848485.48214287L2.41818182 11.51c.12727273-.17357143.26666666-.34714286.4121212-.50785714zM1 13.8757143l-.6969697-.27c-.1151515.27642856-.24242424.59785713-.3030303.77142856l.6969697.27C.77575758 14.42857143.9030303 14.11357143 1 13.8757143zm4.3939394 1.81285713c.0121212.34071428.04242424.61714286.07272727.81L6.1939394 16.775c-.05454546-.2507143-.10909092-.53357143-.14545455-.8357143l-.65454546-.25071427z"/></svg>
+  </div>
+  
+  <div class="hexagon color-circleci">
+    <svg aria-labelledby="simpleicons-circleci-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-circleci-icon">CircleCI icon</title><path d="M8.963 12c0-1.584 1.284-2.855 2.855-2.855 1.572 0 2.856 1.284 2.856 2.855 0 1.572-1.284 2.856-2.856 2.856-1.57 0-2.855-1.284-2.855-2.856zm2.855-12C6.215 0 1.522 3.84.19 9.025c-.01.036-.01.07-.01.12 0 .313.252.576.575.576H5.59c.23 0 .433-.13.517-.333.997-2.16 3.18-3.672 5.712-3.672 3.466 0 6.286 2.82 6.286 6.287 0 3.47-2.82 6.29-6.29 6.29-2.53 0-4.714-1.5-5.71-3.673-.097-.19-.29-.336-.517-.336H.755c-.312 0-.575.253-.575.576 0 .037.014.072.014.12C1.514 20.16 6.214 24 11.818 24c6.624 0 12-5.375 12-12 0-6.623-5.376-12-12-12z"/></svg>
+  </div>
+  <div class="hexagon color-webpack">
+    <svg aria-labelledby="simpleicons-webpack-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-webpack-icon">Webpack icon</title><path d="M21.0157 18.1202L12.351 23v-3.8007l5.3986-2.9567 3.266 1.8776zm.5927-.5344V7.3805l-3.1708 1.822v6.5593l3.1708 1.824zm-18.6827.5344L11.5904 23v-3.8007l-5.3986-2.9567-3.266 1.8776zm-.5927-.5344V7.3805l3.1707 1.822v6.5593l-3.1707 1.824zm.371-10.8656l8.8864-5.0056v3.6748L5.8974 8.507l-.0434.0248-3.15-1.8116zm18.5335 0L12.351 1.7146v3.6748l5.693 3.1177.0434.0248 3.15-1.8116zm-9.647 11.6146l-5.3262-2.9155V9.642l5.326 3.062v5.6308zm.7605 0l5.326-2.9155V9.642l-5.326 3.062v5.6308zM6.625 8.9734l5.3467-2.928 5.3468 2.928-5.3468 3.0744L6.625 8.9734z"/></svg>
+  </div>
+  <div class="hexagon color-bootstrap">
+    <svg aria-labelledby="simpleicons-bootstrap-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-bootstrap-icon">Bootstrap icon</title><path d="M20 0H4C1.793.006.006 1.793 0 4v16c0 2.2 1.8 4 4 4h16c2.2 0 4-1.8 4-4V4c0-2.2-1.8-4-4-4zm-2.187 16.855c-.2.482-.517.907-.923 1.234-.42.34-.952.62-1.607.82-.654.203-1.432.305-2.333.305H6.518v-14h6.802c1.258 0 2.266.283 3.02.86.76.58 1.138 1.444 1.138 2.61 0 .705-.172 1.31-.518 1.81-.344.497-.84.886-1.48 1.156v.046c.854.18 1.515.585 1.95 1.215s.658 1.426.658 2.387c0 .538-.104 1.05-.3 1.528l.025.027zm-2.776-3.45c-.41-.375-.986-.558-1.73-.558H8.985v4.368h4.334c.74 0 1.32-.192 1.73-.58.41-.385.62-.934.62-1.64-.007-.69-.21-1.224-.62-1.59h-.017zm-.6-2.823c.396-.336.59-.817.59-1.444 0-.704-.175-1.204-.53-1.49-.352-.285-.86-.433-1.528-.433h-4v3.863h4c.583 0 1.08-.17 1.464-.496z"/></svg>
+  </div>
+  <div class="hexagon color-python">
+    <svg viewBox="0 0 24 24" aria-labelledby="simpleicons-python-icon" xmlns="http://www.w3.org/2000/svg" role="img"><title id="simpleicons-python-icon">Python icon</title><path d="M14.31.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.83l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.23l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05L0 11.97l.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.24l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05 1.07.13zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09-.33.22z"/><path d="M21.1 6.11l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01.21.03zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08-.33.23z"/></svg>
+  </div>
+  
+  <div class="hexagon color-haskell">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="simpleicons-haskell-icon" role="img"><title id="simpleicons-haskell-icon">Haskell icon</title><path class="a" d="M.006 20.47L5.649 12 .006 3.531h4.235l5.674 8.47-5.674 8.468zm5.643 0L11.29 12 5.65 3.531h4.266l11.253 16.938h-4.224l-3.535-5.34-3.495 5.34zM19.3 15.525l-1.877-2.827h6.571v2.826zm-2.826-4.235l-1.877-2.827h9.387v2.827z"/></svg>
+  </div>
+  <div class="hexagon color-meteor">
+    <svg aria-labelledby="simpleicons-meteor-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-meteor-icon">Meteor icon</title><path d="M0 .234l21.912 20.537s.412.575-.124 1.151c-.535.576-1.236.083-1.236.083L0 .234zm6.508 2.058l17.01 15.638s.413.576-.123 1.152c-.534.576-1.235.083-1.235.083L6.508 2.292zM1.936 6.696l17.01 15.638s.412.576-.123 1.152-1.235.082-1.235.082L1.936 6.696zm10.073-2.635l11.886 10.927s.287.401-.087.805-.863.058-.863.058L12.009 4.061zm-8.567 7.737l11.886 10.926s.285.4-.088.803c-.375.403-.863.059-.863.059L3.442 11.798zm14.187-5.185l5.426 4.955s.142.188-.044.377c-.185.188-.428.027-.428.027l-4.954-5.358v-.001zM6.178 17.231l5.425 4.956s.144.188-.042.377-.427.026-.427.026l-4.956-5.359z"/></svg>
+  </div>
+  <div class="hexagon color-css">
+    <svg aria-labelledby="simpleicons-css3-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-css3-icon">CSS3 icon</title><path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z"/></svg>
+  </div>
+  <div class="hexagon color-atom">
+    <svg aria-labelledby="simpleicons-atom-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-atom-icon">Atom icon</title><path d="M20.496 9.026c-2.183-.93-5.116-1.53-8.25-1.695-.5-.03-.987-.04-1.45-.04 2.318-2.83 4.802-4.73 6.437-4.79.322-.013.595.055.813.196.706.458.905 1.768.545 3.59-.04.25.12.493.36.54.25.05.49-.11.54-.36.45-2.28.12-3.846-.94-4.538-.38-.248-.84-.365-1.35-.346-2.05.077-4.94 2.3-7.59 5.72-1.154.035-2.24.13-3.232.287-.646-2.897-.39-4.977.594-5.477.138-.073.285-.11.457-.124.697-.054 1.66.395 2.71 1.27.194.16.486.14.646-.06.163-.195.134-.48-.06-.645C9.466 1.51 8.304 1 7.354 1.07c-.286.025-.556.098-.803.22-1.19.607-1.67 2.327-1.37 4.838.07.52.16 1.062.29 1.62C2.19 8.404.1 9.718.01 11.372c-.06 1.17.865 2.284 2.68 3.222.224.115.502.03.62-.2.114-.224.03-.5-.2-.616C1.66 13.032.88 12.19.927 11.42c.05-1.08 1.772-2.19 4.76-2.78.27.994.62 2.032 1.05 3.09-1.018 1.888-1.756 3.747-2.137 5.4-.56 2.465-.26 4.22.86 4.948.36.234.78.35 1.247.35.935 0 2.067-.46 3.347-1.372.21-.15.256-.435.11-.64-.147-.206-.433-.256-.64-.106-1.544 1.103-2.844 1.472-3.562 1.003-.76-.495-.926-1.943-.46-3.976.32-1.386.907-2.93 1.708-4.52.2.438.41.876.63 1.313 1.425 2.796 3.17 5.227 4.91 6.845 1.386 1.29 2.674 1.963 3.735 1.963.35 0 .68-.075.976-.223 1.145-.585 1.64-2.21 1.398-4.575-.224-2.213-1.06-4.91-2.354-7.6-.11-.227-.384-.323-.61-.216-.23.11-.33.385-.22.612 2.69 5.602 2.88 10.19 1.37 10.96-1.59.813-5.424-2.355-8.39-8.18-.34-.655-.637-1.3-.9-1.93.34-.608.7-1.22 1.095-1.83.395-.604.806-1.188 1.224-1.745h.394c.54 0 1.126.01 1.734.048 6.53.343 10.975 2.56 10.884 4.334-.04.765-.924 1.538-2.425 2.12-.234.096-.352.36-.26.596.07.18.24.292.426.292.058 0 .114-.01.167-.03 1.905-.74 2.95-1.756 3.01-2.93.07-1.33-1.17-2.61-3.5-3.6v-.01zM8.08 9.45c-.27.415-.52.827-.764 1.244-.292-.768-.532-1.51-.723-2.215.713-.11 1.485-.19 2.31-.24-.28.39-.554.794-.82 1.21v-.01z"/><circle cx="12.005" cy="12" r="1.375"/></svg>
+  </div>
+</main>
+
+<footer>
+  <p>Thanks to <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS-Tricks</a>, <a href="http://csshexagon.com/">CSS Hexagon, Please</a> and <a href="https://simpleicons.org/">Simple Icons</a>.</p>
+</footer>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/css-hexagon-grid/dist/style.css b/css-hexagon-grid/dist/style.css
new file mode 100644
index 0000000..602ec15
--- /dev/null
+++ b/css-hexagon-grid/dist/style.css
@@ -0,0 +1,287 @@
+:root {
+  /* Change this to change the appearance of the hexaons */
+  --hex-width: 100px; 
+  --hex-between: 10px;
+  
+  /* Other hexagon dimentions */
+  --hex-height: calc(var(--hex-width) / 1.73 /* sqrt(3) */);
+  --hex-margin: calc(var(--hex-width) / 2);
+  --hex-border: calc(var(--hex-margin) / 1.73 /* sqrt(3) */);
+  --hex-transition: all .2s ease;
+  
+  /* Colors */
+  --color-hex-default: #000000;
+  --color-hex-hover:   #FFFFFF;
+  --color-angular:     #DD0031;
+  --color-atom:        #66595C;
+  --color-bootstrap:   #563D7C;
+  --color-circleci:    #343434;
+  --color-css:         #1572B6;
+  --color-git:         #F14E32;
+  --color-gulp:        #DA4648;
+  --color-haskell:     #5D4F85;
+  --color-html:        #E34F26;
+  --color-javascript:  #F7DF1E;
+  --color-meteor:      #DE4F4F;
+  --color-python:      #3776AB;
+  --color-rails:       #CC0000;
+  --color-sass:        #CC6699;
+  --color-vuejs:       #4FC08D;
+  --color-webpack:     #8DD6F9;
+}
+
+/* Hexagons */
+.hexagon-container {
+  display: grid;
+  grid-template-columns: var(--hex-width) var(--hex-width) var(--hex-width) var(--hex-width);
+  grid-auto-rows: calc(var(--hex-width) - 28.87px/2);
+  grid-gap: var(--hex-between) var(--hex-between);
+  padding-bottom: var(--hex-border);
+}
+.hexagon {
+  align-items: center;
+  background-color: var(--color-hex-default);
+  cursor: pointer;
+  display: flex;
+  fill: white;
+  height: var(--hex-height);
+  justify-content: center;
+  margin: var(--hex-border) 0;
+  position: relative;
+  transition: var(--hex-transition);
+  width: var(--hex-width);
+}
+
+.hexagon::after,
+.hexagon::before {
+  border-left: var(--hex-margin) solid transparent;
+  border-right: var(--hex-margin) solid transparent;
+  content: "";
+  left: 0;
+  position: absolute;
+  transition: var(--hex-transition);
+  width: 0;
+}
+.hexagon::after {
+  border-top: var(--hex-border) solid var(--color-hex-default);
+  top: 100%;
+  width: 0;
+}
+.hexagon::before {
+  border-bottom: var(--hex-border) solid var(--color-hex-default);
+  bottom: 100%;
+}
+  
+.hexagon:hover {
+  background-color: var(--color-hex-hover);
+}
+.hexagon:hover::after,
+.hexagon:hover::before {
+  border-top-color: var(--color-hex-hover);
+  border-bottom-color: var(--color-hex-hover);
+  }
+ 
+.hexagon:nth-child(8n + 5),
+.hexagon:nth-child(8n + 6),
+.hexagon:nth-child(8n + 7),
+.hexagon:nth-child(8n + 8) {
+  margin-left: calc(var(--hex-width) / 2 + var(--hex-between) / 2);
+}
+
+.hexagon > svg {
+  height: 75%;
+  transition: var(--hex-transition);
+}
+
+/* Colors */
+.color-sass {
+  background-color: var(--color-sass);
+}
+.color-sass::after,
+.color-sass::before {
+  border-top-color: var(--color-sass);
+  border-bottom-color: var(--color-sass);
+}
+.color-sass:hover {
+  fill: var(--color-sass);
+}
+
+.color-angular {
+  background-color: var(--color-angular);
+}
+.color-angular::after,
+.color-angular::before {
+  border-top-color: var(--color-angular);
+  border-bottom-color: var(--color-angular);
+}
+.color-angular:hover {
+  fill: var(--color-angular);
+}
+
+.color-gulp {
+  background-color: var(--color-gulp);
+} 
+.color-gulp::after,
+.color-gulp::before {
+  border-top-color: var(--color-gulp);
+  border-bottom-color: var(--color-gulp);
+}
+.color-gulp:hover {
+  fill: var(--color-gulp);
+}
+
+.color-rails {
+  background-color: var(--color-rails);
+}
+.color-rails::after,
+.color-rails::before {
+  border-top-color: var(--color-rails);
+  border-bottom-color: var(--color-rails);
+}
+.color-rails:hover {
+  fill: var(--color-rails);
+}
+
+.color-git {
+  background-color: var(--color-git);
+}
+.color-git::after,
+.color-git::before {
+  border-top-color: var(--color-git);
+  border-bottom-color: var(--color-git);
+}
+.color-git:hover {
+  fill: var(--color-git);
+}
+
+.color-html {
+  background-color: var(--color-html);
+}
+.color-html::after,
+.color-html::before {
+  border-top-color: var(--color-html);
+  border-bottom-color: var(--color-html);
+}
+.color-html:hover {
+  fill: var(--color-html);
+}
+
+.color-javascript {
+  background-color: var(--color-javascript);
+}
+.color-javascript::after,
+.color-javascript::before {
+  border-top-color: var(--color-javascript);
+  border-bottom-color: var(--color-javascript);
+}
+.color-javascript:hover {
+  fill: var(--color-javascript);
+}
+
+.color-vuejs {
+  background-color: var(--color-vuejs);
+}
+.color-vuejs::after,
+.color-vuejs::before {
+  border-top-color: var(--color-vuejs);
+  border-bottom-color: var(--color-vuejs);
+}
+.color-vuejs:hover {
+  fill: var(--color-vuejs);
+}
+
+.color-circleci {
+  background-color: var(--color-circleci);
+}
+.color-circleci::after,
+.color-circleci::before {
+  border-top-color: var(--color-circleci);
+  border-bottom-color: var(--color-circleci);
+}
+.color-circleci:hover {
+  fill: var(--color-circleci);
+}
+
+.color-webpack {
+  background-color: var(--color-webpack);
+}
+.color-webpack::after,
+.color-webpack::before {
+  border-top-color: var(--color-webpack);
+  border-bottom-color: var(--color-webpack);
+}
+.color-webpack:hover {
+  fill: var(--color-webpack);
+}
+
+.color-css {
+  background-color: var(--color-css);
+}
+.color-css::after,
+.color-css::before {
+  border-top-color: var(--color-css);
+  border-bottom-color: var(--color-css);
+}
+.color-css:hover {
+  fill: var(--color-css);
+}
+
+.color-python {
+  background-color: var(--color-python);
+}
+.color-python::after,
+.color-python::before {
+  border-top-color: var(--color-python);
+  border-bottom-color: var(--color-python);
+}
+.color-python:hover {
+  fill: var(--color-python);
+}
+
+.color-haskell {
+  background-color: var(--color-haskell);
+}
+.color-haskell::after,
+.color-haskell::before {
+  border-top-color: var(--color-haskell);
+  border-bottom-color: var(--color-haskell);
+}
+.color-haskell:hover {
+  fill: var(--color-haskell);
+}
+
+.color-bootstrap {
+  background-color: var(--color-bootstrap);
+}
+.color-bootstrap::after,
+.color-bootstrap::before {
+  border-top-color: var(--color-bootstrap);
+  border-bottom-color: var(--color-bootstrap);
+}
+.color-bootstrap:hover {
+  fill: var(--color-bootstrap);
+}
+
+.color-atom {
+  background-color: var(--color-atom);
+}
+.color-atom::after,
+.color-atom::before {
+  border-top-color: var(--color-atom);
+  border-bottom-color: var(--color-atom);
+}
+.color-atom:hover {
+  fill: var(--color-atom);
+}
+
+.color-meteor {
+  background-color: var(--color-meteor);
+}
+.color-meteor::after,
+.color-meteor::before {
+  border-top-color: var(--color-meteor);
+  border-bottom-color: var(--color-meteor);
+}
+.color-meteor:hover {
+  fill: var(--color-meteor);
+}
\ No newline at end of file
diff --git a/css-hexagon-grid/license.txt b/css-hexagon-grid/license.txt
new file mode 100644
index 0000000..4d853c8
--- /dev/null
+++ b/css-hexagon-grid/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Eric Cornelissen (https://codepen.io/ericornelissen/pen/vWbWKv)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/css-hexagon-grid/src/index.html b/css-hexagon-grid/src/index.html
new file mode 100644
index 0000000..9084c7e
--- /dev/null
+++ b/css-hexagon-grid/src/index.html
@@ -0,0 +1,57 @@
+<main class="hexagon-container">
+  <div class="hexagon color-sass">
+    <svg aria-labelledby="simpleicons-sass-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-sass-icon">Sass icon</title><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zM9.615 15.998c.175.645.156 1.248-.024 1.792l-.065.18c-.024.061-.052.12-.078.176-.14.29-.326.56-.555.81-.698.759-1.672 1.047-2.09.805-.45-.262-.226-1.335.584-2.19.871-.918 2.12-1.509 2.12-1.509v-.003l.108-.061zm9.911-10.861c-.542-2.133-4.077-2.834-7.422-1.645-1.989.707-4.144 1.818-5.693 3.267C4.568 8.48 4.275 9.98 4.396 10.607c.427 2.211 3.457 3.657 4.703 4.73v.006c-.367.18-3.056 1.529-3.686 2.925-.675 1.47.105 2.521.615 2.655 1.575.436 3.195-.36 4.065-1.649.84-1.261.766-2.881.404-3.676.496-.135 1.08-.195 1.83-.104 2.101.24 2.521 1.56 2.43 2.1-.09.539-.523.854-.674.944-.15.091-.195.12-.181.181.015.09.091.09.21.075.165-.03 1.096-.45 1.141-1.471.045-1.29-1.186-2.729-3.375-2.7-.9.016-1.471.091-1.875.256-.03-.045-.061-.075-.105-.105-1.35-1.455-3.855-2.475-3.75-4.41.03-.705.285-2.564 4.8-4.814 3.705-1.846 6.661-1.335 7.171-.21.733 1.604-1.576 4.59-5.431 5.024-1.47.165-2.235-.404-2.431-.615-.209-.225-.239-.24-.314-.194-.12.06-.045.255 0 .375.12.3.585.825 1.396 1.095.704.225 2.43.359 4.5-.45 2.324-.899 4.139-3.405 3.614-5.505l.073.067z"/></svg>
+  </div>
+  <div class="hexagon color-angular">
+    <svg aria-labelledby="simpleicons-angular-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-angular-icon">Angular icon</title><path d="M9.93 12.645h4.134L11.996 7.74"/><path d="M11.996.009L.686 3.988l1.725 14.76 9.585 5.243 9.588-5.238L23.308 3.99 11.996.01zm7.058 18.297h-2.636l-1.42-3.501H8.995l-1.42 3.501H4.937l7.06-15.648 7.057 15.648z"/></svg>
+  </div>
+  <div class="hexagon color-gulp">
+    <svg aria-labelledby="simpleicons-gulp-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-gulp-icon">Gulp icon</title><path d="M15.156 19.432l.636-1.084s-1.444.591-3.86.591c-2.418 0-3.84-.568-3.84-.568l.711 1.183.252 3.729c0 .403 1.314.718 2.936.718 1.623 0 2.938-.314 2.938-.718l.229-3.835v-.016zm.615-7.046c-.769.046-1.153.903-1.539 1.805-.143.33-.63 1.737-.948 1.563-.318-.173.413-1.329.619-2.017-.237.174-1.105.849-1.329.215-.358.314-1.129.48-1.042-.329-.191.345-.621.823-1.139.614-.673-.255.395-2.411.66-2.307.266.121-.053.6-.136.794-.186.419-.398.958-.255 1.063.24.194.904-.703.919-.719.124-.165.479-1.229.763-1.107.285.134-.711 1.541-.34 1.826.076.06.383-.03.569-.239.12-.12.078-.42.479-1.378.404-.959.764-2.156 1.039-2.066s.049.703-.051.943c-.464 1.078-1.268 2.844-.89 2.71.374-.135.569-.135.943-.569.374-.434.345-1.152.599-1.137.24.014.21.254.15.418.24-.27 1.152-.868 1.363-.284.254.688-1.304 1.692-.914 1.632.375-.045.988-.434 1.258-.793l.719-6.5s-.734.6-5.361.6-5.284-.584-5.284-.584l.613 5.93c.33-.928 1.108-2.814 2.322-2.74.554.03 1.303 1.109.658 1.139-.27.015-.3-.539-.614-.614-.239-.046-.554.135-.763.345-.404.404-1.304 2.006-1.184 2.801.15 1.018 1.407-.346 1.617-.75.149-.283.254-1.138.568-1.048.33.09-.029.974-.27 1.737-.27.869-.404 1.781-.732 1.676-.33-.104.209-1.227.178-1.422-.313.299-.883 1.02-1.631.659l.374 3.699s1.019.793 4.073.793 4.118-.793 4.118-.793l.479-4.283c-.389.39-1.617 1.063-1.692.3-.059-.614 1.333-1.498.974-1.514l.06-.069zM17.346.669l-2.659 2.8-.486 1.901c1.881.12 3.189.386 3.189.694 0 .419-2.414.757-5.391.757s-5.39-.343-5.39-.763c0-.419 2.414-.764 5.391-.764.423 0 .844 0 1.264.016l.561-2.276L16.65.039c.068-.09.28-.015.474.15.194.149.299.344.239.434v.03l-.017.016zm-3.834 5.795s-.523 0-.61-.08c-.022-.025-.036-.058-.036-.09 0-.058.039-.091.09-.11l.044.075c-.021.006-.029.015-.033.023 0 .041.314.069.555.066.239-.003.531-.023.533-.064 0-.012-.023-.023-.061-.033l.045-.072c.063.02.117.058.117.121 0 .11-.141.128-.23.141-.107.015-.412.023-.412.023h-.002z"/></svg>
+  </div>
+  <div class="hexagon color-html">
+    <svg aria-labelledby="simpleicons-html5-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-html5-icon">HTML5 icon</title><path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z"/></svg>
+  </div>
+  
+  <div class="hexagon color-git">
+    <svg aria-labelledby="simpleicons-git-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-git-icon">Git icon</title><path d="M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477c.604.604 1.582.604 2.186 0l10.43-10.43c.605-.603.605-1.582 0-2.187"/></svg>
+  </div>
+  <div class="hexagon color-javascript">
+    <svg aria-labelledby="simpleicons-javascript-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-javascript-icon">JavaScript icon</title><path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/></svg>
+  </div>
+  <div class="hexagon color-vuejs">
+    <svg aria-labelledby="simpleicons-vuejs-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-vuejs-icon">Vue.js icon</title><path d="M19.197 1.608l.003-.006h-4.425L12 6.4v.002l-2.772-4.8H4.803v.005H0l12 20.786L24 1.608"/></svg>
+  </div>
+  <div class="hexagon color-rails">
+    <svg aria-labelledby="simpleicons-rails-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title id="simpleicons-rails-icon">Rails icon</title><path d="M20.8848485 15.8107143v1.1635714h1.9818182c.4060606 0 1.1030303-.315 1.1272727-1.19571427v-.45c0-.75214286-.5818182-1.1957143-1.1272727-1.1957143h-.9878788v-.54h1.9575757v-1.17h-1.8787878c-.4848485 0-1.1333334.42428573-1.1333334 1.215v.405c0 .7907143.6424243 1.1957143 1.1333334 1.1957143 1.3636363.00642857-.3272728 0 .9333333 0v.56571428l-2.0060606.0064286zm-10.6181818-.28285716s1.060606-.09642857 1.060606-1.5492857c0-1.45285715-1.2848485-1.58785715-1.2848485-1.58785715H7.72727273v4.5835714H8.8909091v-1.1057143l1.0060606 1.1057142h1.7212121l-1.3515151-1.4464286zm-.44848488-.93857143H8.8909091v-1.0478571h.93333332s.26060608.1028572.26060608.5207143c0 .4178572-.26666668.5271429-.26666668.5271429zM14.2 12.4228572h-1.1818182c-.8424242 0-1.1272727.81-1.1272727 1.1957143v3.35571427h1.1818182v-.8035714h1.1090909v.8035714h1.1454545V13.6185715c0-.97714286-.8363636-1.1957143-1.1272727-1.1957143zm-.0181818 2.44928572h-1.1151515V13.76s0-.2507143.3696969-.2507143h.4060606c.3272728 0 .3333334.2507143.3333334.2507143v1.11214286h.0060606zm1.6848485-2.44928573h1.230303v4.5514285h-1.230303v-4.5514285zm2.9575757 3.375v-3.375H17.6v4.5514285h2.8787879v-1.1764285h-1.6545455z"/><path d="M.42424242 16.9742857h4.7878788S4.2969697 12.545 7.3272727 10.75142858c.66060607-.34071428 2.76363638-1.61357143 6.20606058 1.08642857.1090909-.09642857.2121212-.17357143.2121212-.17357143s-3.1515151-3.33642856-6.66060602-2.9635714c-1.76363636.16714284-3.93333333 1.87071427-5.2060606 4.12071427-1.27272726 2.25-1.45454546 4.1528571-1.45454546 4.1528571z"/><path d="M.42424242 16.9742857h4.7878788S4.2969697 12.545 7.3272727 10.75142858c.66060607-.34071428 2.76363638-1.61357143 6.20606058 1.08642857.1090909-.09642857.2121212-.17357143.2121212-.17357143s-3.1515151-3.33642856-6.66060602-2.9635714c-1.76363636.16714284-3.93333333 1.87071427-5.2060606 4.12071427-1.27272726 2.25-1.45454546 4.1528571-1.45454546 4.1528571z"/><path d="M.42424242 16.9742857h4.7878788S4.2969697 12.545 7.3272727 10.75142858c.66060607-.34071428 2.76363638-1.61357143 6.20606058 1.08642857.1090909-.09642857.2121212-.17357143.2121212-.17357143s-3.1515151-3.33642856-6.66060602-2.9635714c-1.76969696.16714284-3.93939393 1.87071427-5.2121212 4.12071427C.6 15.0714285.4242424 16.9742857.4242424 16.9742857zM10.4 9.0607143L10.4242424 8.63c-.0545454-.03214286-.2060606-.1092857-.58787876-.225l-.02424243.4242857c.2.0707143.3939394.14785716.5878788.2314286z"/><path d="M9.82424242 10.42357143l-.02424242.405c.2.00642857.4.03214286.6.07714286l.0242424-.3985715c-.2060606-.045-.4060606-.0707143-.59999998-.0835715zm-2.24242424-2.0057143h.06060606l-.12121212-.39214284c-.1878788 0-.38181818.0128571-.58181818.0385714l.1151515.3792857c.1757576-.0192857.35151517-.0257143.52727274-.0257143zm.2909091 2.3657143l.13939393.44357143c.1757576-.09.3515152-.16714286.5272728-.225l-.1333333-.42428572c-.2060606.06428572-.3818182.135-.5333333.2057143zM5.1212121 9.09285713l-.27272727-.44357142c-.15151515.0835715-.3090909.1735715-.47272727.2764286l.27878787.45c.15757576-.1028571.3090909-.1992857.46666667-.2828571zm1.24242424 2.89285716l.2909091.4628571c.1030303-.1607143.22424242-.3085715.35757575-.4564286L6.7393939 11.555c-.13939394.135-.26666667.28285714-.37575758.4307143zm-.87878788 2.07l.4909091.4114285C6 14.2164285 6.04242424 13.9657143 6.1030303 13.715l-.43636363-.36642857c-.07878788.23785714-.13333334.47571428-.1818182.70714286zM2.830303 11.0021428L2.4 10.60357142c-.15757576.1607143-.3090909.32142858-.44848485.48214287L2.41818182 11.51c.12727273-.17357143.26666666-.34714286.4121212-.50785714zM1 13.8757143l-.6969697-.27c-.1151515.27642856-.24242424.59785713-.3030303.77142856l.6969697.27C.77575758 14.42857143.9030303 14.11357143 1 13.8757143zm4.3939394 1.81285713c.0121212.34071428.04242424.61714286.07272727.81L6.1939394 16.775c-.05454546-.2507143-.10909092-.53357143-.14545455-.8357143l-.65454546-.25071427z"/></svg>
+  </div>
+  
+  <div class="hexagon color-circleci">
+    <svg aria-labelledby="simpleicons-circleci-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-circleci-icon">CircleCI icon</title><path d="M8.963 12c0-1.584 1.284-2.855 2.855-2.855 1.572 0 2.856 1.284 2.856 2.855 0 1.572-1.284 2.856-2.856 2.856-1.57 0-2.855-1.284-2.855-2.856zm2.855-12C6.215 0 1.522 3.84.19 9.025c-.01.036-.01.07-.01.12 0 .313.252.576.575.576H5.59c.23 0 .433-.13.517-.333.997-2.16 3.18-3.672 5.712-3.672 3.466 0 6.286 2.82 6.286 6.287 0 3.47-2.82 6.29-6.29 6.29-2.53 0-4.714-1.5-5.71-3.673-.097-.19-.29-.336-.517-.336H.755c-.312 0-.575.253-.575.576 0 .037.014.072.014.12C1.514 20.16 6.214 24 11.818 24c6.624 0 12-5.375 12-12 0-6.623-5.376-12-12-12z"/></svg>
+  </div>
+  <div class="hexagon color-webpack">
+    <svg aria-labelledby="simpleicons-webpack-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-webpack-icon">Webpack icon</title><path d="M21.0157 18.1202L12.351 23v-3.8007l5.3986-2.9567 3.266 1.8776zm.5927-.5344V7.3805l-3.1708 1.822v6.5593l3.1708 1.824zm-18.6827.5344L11.5904 23v-3.8007l-5.3986-2.9567-3.266 1.8776zm-.5927-.5344V7.3805l3.1707 1.822v6.5593l-3.1707 1.824zm.371-10.8656l8.8864-5.0056v3.6748L5.8974 8.507l-.0434.0248-3.15-1.8116zm18.5335 0L12.351 1.7146v3.6748l5.693 3.1177.0434.0248 3.15-1.8116zm-9.647 11.6146l-5.3262-2.9155V9.642l5.326 3.062v5.6308zm.7605 0l5.326-2.9155V9.642l-5.326 3.062v5.6308zM6.625 8.9734l5.3467-2.928 5.3468 2.928-5.3468 3.0744L6.625 8.9734z"/></svg>
+  </div>
+  <div class="hexagon color-bootstrap">
+    <svg aria-labelledby="simpleicons-bootstrap-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-bootstrap-icon">Bootstrap icon</title><path d="M20 0H4C1.793.006.006 1.793 0 4v16c0 2.2 1.8 4 4 4h16c2.2 0 4-1.8 4-4V4c0-2.2-1.8-4-4-4zm-2.187 16.855c-.2.482-.517.907-.923 1.234-.42.34-.952.62-1.607.82-.654.203-1.432.305-2.333.305H6.518v-14h6.802c1.258 0 2.266.283 3.02.86.76.58 1.138 1.444 1.138 2.61 0 .705-.172 1.31-.518 1.81-.344.497-.84.886-1.48 1.156v.046c.854.18 1.515.585 1.95 1.215s.658 1.426.658 2.387c0 .538-.104 1.05-.3 1.528l.025.027zm-2.776-3.45c-.41-.375-.986-.558-1.73-.558H8.985v4.368h4.334c.74 0 1.32-.192 1.73-.58.41-.385.62-.934.62-1.64-.007-.69-.21-1.224-.62-1.59h-.017zm-.6-2.823c.396-.336.59-.817.59-1.444 0-.704-.175-1.204-.53-1.49-.352-.285-.86-.433-1.528-.433h-4v3.863h4c.583 0 1.08-.17 1.464-.496z"/></svg>
+  </div>
+  <div class="hexagon color-python">
+    <svg viewBox="0 0 24 24" aria-labelledby="simpleicons-python-icon" xmlns="http://www.w3.org/2000/svg" role="img"><title id="simpleicons-python-icon">Python icon</title><path d="M14.31.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.83l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.23l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05L0 11.97l.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.24l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05 1.07.13zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09-.33.22z"/><path d="M21.1 6.11l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01.21.03zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08-.33.23z"/></svg>
+  </div>
+  
+  <div class="hexagon color-haskell">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="simpleicons-haskell-icon" role="img"><title id="simpleicons-haskell-icon">Haskell icon</title><path class="a" d="M.006 20.47L5.649 12 .006 3.531h4.235l5.674 8.47-5.674 8.468zm5.643 0L11.29 12 5.65 3.531h4.266l11.253 16.938h-4.224l-3.535-5.34-3.495 5.34zM19.3 15.525l-1.877-2.827h6.571v2.826zm-2.826-4.235l-1.877-2.827h9.387v2.827z"/></svg>
+  </div>
+  <div class="hexagon color-meteor">
+    <svg aria-labelledby="simpleicons-meteor-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-meteor-icon">Meteor icon</title><path d="M0 .234l21.912 20.537s.412.575-.124 1.151c-.535.576-1.236.083-1.236.083L0 .234zm6.508 2.058l17.01 15.638s.413.576-.123 1.152c-.534.576-1.235.083-1.235.083L6.508 2.292zM1.936 6.696l17.01 15.638s.412.576-.123 1.152-1.235.082-1.235.082L1.936 6.696zm10.073-2.635l11.886 10.927s.287.401-.087.805-.863.058-.863.058L12.009 4.061zm-8.567 7.737l11.886 10.926s.285.4-.088.803c-.375.403-.863.059-.863.059L3.442 11.798zm14.187-5.185l5.426 4.955s.142.188-.044.377c-.185.188-.428.027-.428.027l-4.954-5.358v-.001zM6.178 17.231l5.425 4.956s.144.188-.042.377-.427.026-.427.026l-4.956-5.359z"/></svg>
+  </div>
+  <div class="hexagon color-css">
+    <svg aria-labelledby="simpleicons-css3-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-css3-icon">CSS3 icon</title><path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z"/></svg>
+  </div>
+  <div class="hexagon color-atom">
+    <svg aria-labelledby="simpleicons-atom-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-atom-icon">Atom icon</title><path d="M20.496 9.026c-2.183-.93-5.116-1.53-8.25-1.695-.5-.03-.987-.04-1.45-.04 2.318-2.83 4.802-4.73 6.437-4.79.322-.013.595.055.813.196.706.458.905 1.768.545 3.59-.04.25.12.493.36.54.25.05.49-.11.54-.36.45-2.28.12-3.846-.94-4.538-.38-.248-.84-.365-1.35-.346-2.05.077-4.94 2.3-7.59 5.72-1.154.035-2.24.13-3.232.287-.646-2.897-.39-4.977.594-5.477.138-.073.285-.11.457-.124.697-.054 1.66.395 2.71 1.27.194.16.486.14.646-.06.163-.195.134-.48-.06-.645C9.466 1.51 8.304 1 7.354 1.07c-.286.025-.556.098-.803.22-1.19.607-1.67 2.327-1.37 4.838.07.52.16 1.062.29 1.62C2.19 8.404.1 9.718.01 11.372c-.06 1.17.865 2.284 2.68 3.222.224.115.502.03.62-.2.114-.224.03-.5-.2-.616C1.66 13.032.88 12.19.927 11.42c.05-1.08 1.772-2.19 4.76-2.78.27.994.62 2.032 1.05 3.09-1.018 1.888-1.756 3.747-2.137 5.4-.56 2.465-.26 4.22.86 4.948.36.234.78.35 1.247.35.935 0 2.067-.46 3.347-1.372.21-.15.256-.435.11-.64-.147-.206-.433-.256-.64-.106-1.544 1.103-2.844 1.472-3.562 1.003-.76-.495-.926-1.943-.46-3.976.32-1.386.907-2.93 1.708-4.52.2.438.41.876.63 1.313 1.425 2.796 3.17 5.227 4.91 6.845 1.386 1.29 2.674 1.963 3.735 1.963.35 0 .68-.075.976-.223 1.145-.585 1.64-2.21 1.398-4.575-.224-2.213-1.06-4.91-2.354-7.6-.11-.227-.384-.323-.61-.216-.23.11-.33.385-.22.612 2.69 5.602 2.88 10.19 1.37 10.96-1.59.813-5.424-2.355-8.39-8.18-.34-.655-.637-1.3-.9-1.93.34-.608.7-1.22 1.095-1.83.395-.604.806-1.188 1.224-1.745h.394c.54 0 1.126.01 1.734.048 6.53.343 10.975 2.56 10.884 4.334-.04.765-.924 1.538-2.425 2.12-.234.096-.352.36-.26.596.07.18.24.292.426.292.058 0 .114-.01.167-.03 1.905-.74 2.95-1.756 3.01-2.93.07-1.33-1.17-2.61-3.5-3.6v-.01zM8.08 9.45c-.27.415-.52.827-.764 1.244-.292-.768-.532-1.51-.723-2.215.713-.11 1.485-.19 2.31-.24-.28.39-.554.794-.82 1.21v-.01z"/><circle cx="12.005" cy="12" r="1.375"/></svg>
+  </div>
+</main>
+
+<footer>
+  <p>Thanks to <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS-Tricks</a>, <a href="http://csshexagon.com/">CSS Hexagon, Please</a> and <a href="https://simpleicons.org/">Simple Icons</a>.</p>
+</footer>
\ No newline at end of file
diff --git a/css-hexagon-grid/src/style.css b/css-hexagon-grid/src/style.css
new file mode 100644
index 0000000..602ec15
--- /dev/null
+++ b/css-hexagon-grid/src/style.css
@@ -0,0 +1,287 @@
+:root {
+  /* Change this to change the appearance of the hexaons */
+  --hex-width: 100px; 
+  --hex-between: 10px;
+  
+  /* Other hexagon dimentions */
+  --hex-height: calc(var(--hex-width) / 1.73 /* sqrt(3) */);
+  --hex-margin: calc(var(--hex-width) / 2);
+  --hex-border: calc(var(--hex-margin) / 1.73 /* sqrt(3) */);
+  --hex-transition: all .2s ease;
+  
+  /* Colors */
+  --color-hex-default: #000000;
+  --color-hex-hover:   #FFFFFF;
+  --color-angular:     #DD0031;
+  --color-atom:        #66595C;
+  --color-bootstrap:   #563D7C;
+  --color-circleci:    #343434;
+  --color-css:         #1572B6;
+  --color-git:         #F14E32;
+  --color-gulp:        #DA4648;
+  --color-haskell:     #5D4F85;
+  --color-html:        #E34F26;
+  --color-javascript:  #F7DF1E;
+  --color-meteor:      #DE4F4F;
+  --color-python:      #3776AB;
+  --color-rails:       #CC0000;
+  --color-sass:        #CC6699;
+  --color-vuejs:       #4FC08D;
+  --color-webpack:     #8DD6F9;
+}
+
+/* Hexagons */
+.hexagon-container {
+  display: grid;
+  grid-template-columns: var(--hex-width) var(--hex-width) var(--hex-width) var(--hex-width);
+  grid-auto-rows: calc(var(--hex-width) - 28.87px/2);
+  grid-gap: var(--hex-between) var(--hex-between);
+  padding-bottom: var(--hex-border);
+}
+.hexagon {
+  align-items: center;
+  background-color: var(--color-hex-default);
+  cursor: pointer;
+  display: flex;
+  fill: white;
+  height: var(--hex-height);
+  justify-content: center;
+  margin: var(--hex-border) 0;
+  position: relative;
+  transition: var(--hex-transition);
+  width: var(--hex-width);
+}
+
+.hexagon::after,
+.hexagon::before {
+  border-left: var(--hex-margin) solid transparent;
+  border-right: var(--hex-margin) solid transparent;
+  content: "";
+  left: 0;
+  position: absolute;
+  transition: var(--hex-transition);
+  width: 0;
+}
+.hexagon::after {
+  border-top: var(--hex-border) solid var(--color-hex-default);
+  top: 100%;
+  width: 0;
+}
+.hexagon::before {
+  border-bottom: var(--hex-border) solid var(--color-hex-default);
+  bottom: 100%;
+}
+  
+.hexagon:hover {
+  background-color: var(--color-hex-hover);
+}
+.hexagon:hover::after,
+.hexagon:hover::before {
+  border-top-color: var(--color-hex-hover);
+  border-bottom-color: var(--color-hex-hover);
+  }
+ 
+.hexagon:nth-child(8n + 5),
+.hexagon:nth-child(8n + 6),
+.hexagon:nth-child(8n + 7),
+.hexagon:nth-child(8n + 8) {
+  margin-left: calc(var(--hex-width) / 2 + var(--hex-between) / 2);
+}
+
+.hexagon > svg {
+  height: 75%;
+  transition: var(--hex-transition);
+}
+
+/* Colors */
+.color-sass {
+  background-color: var(--color-sass);
+}
+.color-sass::after,
+.color-sass::before {
+  border-top-color: var(--color-sass);
+  border-bottom-color: var(--color-sass);
+}
+.color-sass:hover {
+  fill: var(--color-sass);
+}
+
+.color-angular {
+  background-color: var(--color-angular);
+}
+.color-angular::after,
+.color-angular::before {
+  border-top-color: var(--color-angular);
+  border-bottom-color: var(--color-angular);
+}
+.color-angular:hover {
+  fill: var(--color-angular);
+}
+
+.color-gulp {
+  background-color: var(--color-gulp);
+} 
+.color-gulp::after,
+.color-gulp::before {
+  border-top-color: var(--color-gulp);
+  border-bottom-color: var(--color-gulp);
+}
+.color-gulp:hover {
+  fill: var(--color-gulp);
+}
+
+.color-rails {
+  background-color: var(--color-rails);
+}
+.color-rails::after,
+.color-rails::before {
+  border-top-color: var(--color-rails);
+  border-bottom-color: var(--color-rails);
+}
+.color-rails:hover {
+  fill: var(--color-rails);
+}
+
+.color-git {
+  background-color: var(--color-git);
+}
+.color-git::after,
+.color-git::before {
+  border-top-color: var(--color-git);
+  border-bottom-color: var(--color-git);
+}
+.color-git:hover {
+  fill: var(--color-git);
+}
+
+.color-html {
+  background-color: var(--color-html);
+}
+.color-html::after,
+.color-html::before {
+  border-top-color: var(--color-html);
+  border-bottom-color: var(--color-html);
+}
+.color-html:hover {
+  fill: var(--color-html);
+}
+
+.color-javascript {
+  background-color: var(--color-javascript);
+}
+.color-javascript::after,
+.color-javascript::before {
+  border-top-color: var(--color-javascript);
+  border-bottom-color: var(--color-javascript);
+}
+.color-javascript:hover {
+  fill: var(--color-javascript);
+}
+
+.color-vuejs {
+  background-color: var(--color-vuejs);
+}
+.color-vuejs::after,
+.color-vuejs::before {
+  border-top-color: var(--color-vuejs);
+  border-bottom-color: var(--color-vuejs);
+}
+.color-vuejs:hover {
+  fill: var(--color-vuejs);
+}
+
+.color-circleci {
+  background-color: var(--color-circleci);
+}
+.color-circleci::after,
+.color-circleci::before {
+  border-top-color: var(--color-circleci);
+  border-bottom-color: var(--color-circleci);
+}
+.color-circleci:hover {
+  fill: var(--color-circleci);
+}
+
+.color-webpack {
+  background-color: var(--color-webpack);
+}
+.color-webpack::after,
+.color-webpack::before {
+  border-top-color: var(--color-webpack);
+  border-bottom-color: var(--color-webpack);
+}
+.color-webpack:hover {
+  fill: var(--color-webpack);
+}
+
+.color-css {
+  background-color: var(--color-css);
+}
+.color-css::after,
+.color-css::before {
+  border-top-color: var(--color-css);
+  border-bottom-color: var(--color-css);
+}
+.color-css:hover {
+  fill: var(--color-css);
+}
+
+.color-python {
+  background-color: var(--color-python);
+}
+.color-python::after,
+.color-python::before {
+  border-top-color: var(--color-python);
+  border-bottom-color: var(--color-python);
+}
+.color-python:hover {
+  fill: var(--color-python);
+}
+
+.color-haskell {
+  background-color: var(--color-haskell);
+}
+.color-haskell::after,
+.color-haskell::before {
+  border-top-color: var(--color-haskell);
+  border-bottom-color: var(--color-haskell);
+}
+.color-haskell:hover {
+  fill: var(--color-haskell);
+}
+
+.color-bootstrap {
+  background-color: var(--color-bootstrap);
+}
+.color-bootstrap::after,
+.color-bootstrap::before {
+  border-top-color: var(--color-bootstrap);
+  border-bottom-color: var(--color-bootstrap);
+}
+.color-bootstrap:hover {
+  fill: var(--color-bootstrap);
+}
+
+.color-atom {
+  background-color: var(--color-atom);
+}
+.color-atom::after,
+.color-atom::before {
+  border-top-color: var(--color-atom);
+  border-bottom-color: var(--color-atom);
+}
+.color-atom:hover {
+  fill: var(--color-atom);
+}
+
+.color-meteor {
+  background-color: var(--color-meteor);
+}
+.color-meteor::after,
+.color-meteor::before {
+  border-top-color: var(--color-meteor);
+  border-bottom-color: var(--color-meteor);
+}
+.color-meteor:hover {
+  fill: var(--color-meteor);
+}
\ No newline at end of file
diff --git a/css-houdinipaint-api-generative-fleck-patterns/README.markdown b/css-houdinipaint-api-generative-fleck-patterns/README.markdown
new file mode 100644
index 0000000..dc5e45c
--- /dev/null
+++ b/css-houdinipaint-api-generative-fleck-patterns/README.markdown
@@ -0,0 +1,5 @@
+# CSS Houdini - Paint API Generative “Fleck“ Patterns! ✨
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/georgedoescode/pen/eYvjOMN](https://codepen.io/georgedoescode/pen/eYvjOMN).
+
+I spotted this pattern on a notebook, and thought “Hey... this would be great for a generative Paint API worklet!” 
diff --git a/css-houdinipaint-api-generative-fleck-patterns/dist/index.html b/css-houdinipaint-api-generative-fleck-patterns/dist/index.html
new file mode 100644
index 0000000..87a4b58
--- /dev/null
+++ b/css-houdinipaint-api-generative-fleck-patterns/dist/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS Houdini - Paint API Generative “Fleck“ Patterns! ✨</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="wrapper">
+  <div class="fleck-demos stack">
+    <div class="fleck-demo-wrapper">
+      <div class="fleck-demo center-xy" data-theme="pink"></div>
+      <p class="fleck-demo-title">“Pink + White”</p>
+    </div>
+    <div class="fleck-demo-wrapper">
+      <div class="fleck-demo center-xy" data-theme="gold"></div>
+      <p class="fleck-demo-title">“24k Magic”</p>
+    </div>
+    <div class="fleck-demo-wrapper">
+      <div class="fleck-demo center-xy" data-theme="red"></div>
+      <p class="fleck-demo-title">“One For You, One For Me”</p>
+    </div>
+    <div class="fleck-demo-wrapper">
+      <div class="fleck-demo center-xy" data-theme="green"></div>
+      <p class="fleck-demo-title">“Canyon In The Rain”</p>
+    </div>
+    <div class="fleck-demo-wrapper">
+      <div class="fleck-demo center-xy" data-theme="blue"></div>
+      <p class="fleck-demo-title">“Ship Of Fools”</p>
+    </div>
+    <div class="fleck-demo-wrapper">
+      <div class="fleck-demo center-xy" data-theme="grunge"></div>
+      <p class="fleck-demo-title">“The Bos”</p>
+    </div>
+
+  </div>
+</div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/css-houdinipaint-api-generative-fleck-patterns/dist/script.js b/css-houdinipaint-api-generative-fleck-patterns/dist/script.js
new file mode 100644
index 0000000..183420d
--- /dev/null
+++ b/css-houdinipaint-api-generative-fleck-patterns/dist/script.js
@@ -0,0 +1,15 @@
+(async function () {
+  if (CSS["paintWorklet"] === undefined) {
+    await import("https://unpkg.com/css-paint-polyfill");
+  }
+
+  // The code for this worklet can be found here: https://github.com/georgedoescode/houdini-fleck-patterns/blob/main/fleck-worklet.js
+  CSS.paintWorklet.addModule("https://unpkg.com/@georgedoescode/houdini-fleck");
+
+  // Fix a weird Safari/Firefox polyfill issue...
+  setTimeout(() => {
+    document.querySelectorAll(".fleck-demo").forEach((el) => {
+      el.style.width = "100%";
+    });
+  }, 250);
+})();
\ No newline at end of file
diff --git a/css-houdinipaint-api-generative-fleck-patterns/dist/style.css b/css-houdinipaint-api-generative-fleck-patterns/dist/style.css
new file mode 100644
index 0000000..f4fe25a
--- /dev/null
+++ b/css-houdinipaint-api-generative-fleck-patterns/dist/style.css
@@ -0,0 +1,146 @@
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;700;800&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  padding: 3rem 1.5rem;
+  font-family: "Fraunces", Georgia, serif;
+  line-height: 1.5;
+}
+
+h1,
+h2 {
+  letter-spacing: -0.025em;
+  line-height: 1.25;
+}
+
+.wrapper {
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+.center-xy {
+  display: grid;
+  place-items: center;
+}
+
+.title {
+  text-align: center;
+  font-size: 2.25rem;
+}
+
+.fleck-demos {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  grid-gap: 4rem;
+}
+
+.fleck-demo {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  background: red;
+  border-radius: 50%;
+
+  background-color: var(--background-color);
+  background-image: paint(fleck);
+}
+
+@supports not (aspect-ratio: 1 / 1) {
+  .fleck-demo {
+    position: relative;
+    overflow: hidden;
+    height: 0;
+    padding-top: 100%;
+  }
+}
+
+.fleck-demo[data-theme="pink"] {
+  --fleck-seed: 123456;
+  --fleck-count: 500;
+  --fleck-size-base: 5px;
+  --fleck-color-1: #ffb5d7;
+  --fleck-color-2: #a6bfeb;
+  --fleck-color-3: #cce0ee;
+  --fleck-color-4: #ebaedc;
+
+  --background-color: hsl(213, 48%, 97%);
+}
+
+.fleck-demo[data-theme="gold"] {
+  --fleck-seed: 123453;
+  --fleck-count: 680;
+  --fleck-size-base: 4px;
+  --fleck-color-1: #e8ad3c;
+  --fleck-color-2: #a96c1a;
+  --fleck-color-3: #d7b54e;
+  --fleck-color-4: #e2b84b;
+  --fleck-color-5: #d6cdc4;
+
+  --background-color: #1b1918;
+}
+
+.fleck-demo[data-theme="green"] {
+  --fleck-seed: 123450;
+  --fleck-count: 540;
+  --fleck-size-base: 4px;
+  --fleck-color-1: #58835c;
+  --fleck-color-2: #abb16b;
+  --fleck-color-3: #4a6539;
+  --fleck-color-4: #074a41;
+
+  --background-color: #102222;
+}
+
+.fleck-demo[data-theme="blue"] {
+  --fleck-seed: 123449;
+  --fleck-count: 580;
+  --fleck-size-base: 4px;
+  --fleck-color-1: #0193c1;
+  --fleck-color-2: #74d8e6;
+  --fleck-color-3: #0bc0e0;
+  --fleck-color-4: #3ddaf5;
+  --fleck-color-5: #e2f9fe;
+  --fleck-color-6: #02313f;
+
+  --background-color: #84dce2;
+}
+
+.fleck-demo[data-theme="grunge"] {
+  --fleck-seed: 123448;
+  --fleck-count: 580;
+  --fleck-size-base: 4px;
+  --fleck-color-1: #000001;
+  --fleck-color-2: #171920;
+  --fleck-color-3: #f9be41;
+  --fleck-color-4: #fff;
+
+  --background-color: #fec536;
+}
+
+.fleck-demo[data-theme="red"] {
+  --fleck-seed: 123447;
+  --fleck-count: 540;
+  --fleck-size-base: 4px;
+
+  --fleck-color-1: #fe9f00;
+  --fleck-color-2: #100b10;
+  --fleck-color-3: #bd0700;
+  --fleck-color-4: #ffe2e0;
+
+  --background-color: #ff380c;
+}
+
+.fleck-demo-title {
+  margin-top: 1.5rem;
+  text-align: center;
+  font-size: clamp(1.125rem, 5vw, 1.25rem);
+}
\ No newline at end of file
diff --git a/css-houdinipaint-api-generative-fleck-patterns/license.txt b/css-houdinipaint-api-generative-fleck-patterns/license.txt
new file mode 100644
index 0000000..7c9746f
--- /dev/null
+++ b/css-houdinipaint-api-generative-fleck-patterns/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by George Francis (https://codepen.io/georgedoescode/pen/eYvjOMN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-houdinipaint-api-generative-fleck-patterns/src/index.html b/css-houdinipaint-api-generative-fleck-patterns/src/index.html
new file mode 100644
index 0000000..02f6c2c
--- /dev/null
+++ b/css-houdinipaint-api-generative-fleck-patterns/src/index.html
@@ -0,0 +1,29 @@
+<div class="wrapper">
+  <div class="fleck-demos stack">
+    <div class="fleck-demo-wrapper">
+      <div class="fleck-demo center-xy" data-theme="pink"></div>
+      <p class="fleck-demo-title">“Pink + White”</p>
+    </div>
+    <div class="fleck-demo-wrapper">
+      <div class="fleck-demo center-xy" data-theme="gold"></div>
+      <p class="fleck-demo-title">“24k Magic”</p>
+    </div>
+    <div class="fleck-demo-wrapper">
+      <div class="fleck-demo center-xy" data-theme="red"></div>
+      <p class="fleck-demo-title">“One For You, One For Me”</p>
+    </div>
+    <div class="fleck-demo-wrapper">
+      <div class="fleck-demo center-xy" data-theme="green"></div>
+      <p class="fleck-demo-title">“Canyon In The Rain”</p>
+    </div>
+    <div class="fleck-demo-wrapper">
+      <div class="fleck-demo center-xy" data-theme="blue"></div>
+      <p class="fleck-demo-title">“Ship Of Fools”</p>
+    </div>
+    <div class="fleck-demo-wrapper">
+      <div class="fleck-demo center-xy" data-theme="grunge"></div>
+      <p class="fleck-demo-title">“The Bos”</p>
+    </div>
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/css-houdinipaint-api-generative-fleck-patterns/src/script.js b/css-houdinipaint-api-generative-fleck-patterns/src/script.js
new file mode 100644
index 0000000..2045ed1
--- /dev/null
+++ b/css-houdinipaint-api-generative-fleck-patterns/src/script.js
@@ -0,0 +1,15 @@
+(async function () {
+  if (CSS["paintWorklet"] === undefined) {
+    await import("https://unpkg.com/css-paint-polyfill");
+  }
+
+  // The code for this worklet can be found here: https://github.com/georgedoescode/houdini-fleck-patterns/blob/main/fleck-worklet.js
+  CSS.paintWorklet.addModule("https://unpkg.com/@georgedoescode/houdini-fleck");
+
+  // Fix a weird Safari/Firefox polyfill issue...
+  setTimeout(() => {
+    document.querySelectorAll(".fleck-demo").forEach((el) => {
+      el.style.width = "100%";
+    });
+  }, 250);
+})();
diff --git a/css-houdinipaint-api-generative-fleck-patterns/src/style.css b/css-houdinipaint-api-generative-fleck-patterns/src/style.css
new file mode 100644
index 0000000..abcd8db
--- /dev/null
+++ b/css-houdinipaint-api-generative-fleck-patterns/src/style.css
@@ -0,0 +1,146 @@
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;700;800&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  padding: 3rem 1.5rem;
+  font-family: "Fraunces", Georgia, serif;
+  line-height: 1.5;
+}
+
+h1,
+h2 {
+  letter-spacing: -0.025em;
+  line-height: 1.25;
+}
+
+.wrapper {
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+.center-xy {
+  display: grid;
+  place-items: center;
+}
+
+.title {
+  text-align: center;
+  font-size: 2.25rem;
+}
+
+.fleck-demos {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  grid-gap: 4rem;
+}
+
+.fleck-demo {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  background: red;
+  border-radius: 50%;
+
+  background-color: var(--background-color);
+  background-image: paint(fleck);
+}
+
+@supports not (aspect-ratio: 1 / 1) {
+  .fleck-demo {
+    position: relative;
+    overflow: hidden;
+    height: 0;
+    padding-top: 100%;
+  }
+}
+
+.fleck-demo[data-theme="pink"] {
+  --fleck-seed: 123456;
+  --fleck-count: 500;
+  --fleck-size-base: 5px;
+  --fleck-color-1: #ffb5d7;
+  --fleck-color-2: #a6bfeb;
+  --fleck-color-3: #cce0ee;
+  --fleck-color-4: #ebaedc;
+
+  --background-color: hsl(213, 48%, 97%);
+}
+
+.fleck-demo[data-theme="gold"] {
+  --fleck-seed: 123453;
+  --fleck-count: 680;
+  --fleck-size-base: 4px;
+  --fleck-color-1: #e8ad3c;
+  --fleck-color-2: #a96c1a;
+  --fleck-color-3: #d7b54e;
+  --fleck-color-4: #e2b84b;
+  --fleck-color-5: #d6cdc4;
+
+  --background-color: #1b1918;
+}
+
+.fleck-demo[data-theme="green"] {
+  --fleck-seed: 123450;
+  --fleck-count: 540;
+  --fleck-size-base: 4px;
+  --fleck-color-1: #58835c;
+  --fleck-color-2: #abb16b;
+  --fleck-color-3: #4a6539;
+  --fleck-color-4: #074a41;
+
+  --background-color: #102222;
+}
+
+.fleck-demo[data-theme="blue"] {
+  --fleck-seed: 123449;
+  --fleck-count: 580;
+  --fleck-size-base: 4px;
+  --fleck-color-1: #0193c1;
+  --fleck-color-2: #74d8e6;
+  --fleck-color-3: #0bc0e0;
+  --fleck-color-4: #3ddaf5;
+  --fleck-color-5: #e2f9fe;
+  --fleck-color-6: #02313f;
+
+  --background-color: #84dce2;
+}
+
+.fleck-demo[data-theme="grunge"] {
+  --fleck-seed: 123448;
+  --fleck-count: 580;
+  --fleck-size-base: 4px;
+  --fleck-color-1: #000001;
+  --fleck-color-2: #171920;
+  --fleck-color-3: #f9be41;
+  --fleck-color-4: #fff;
+
+  --background-color: #fec536;
+}
+
+.fleck-demo[data-theme="red"] {
+  --fleck-seed: 123447;
+  --fleck-count: 540;
+  --fleck-size-base: 4px;
+
+  --fleck-color-1: #fe9f00;
+  --fleck-color-2: #100b10;
+  --fleck-color-3: #bd0700;
+  --fleck-color-4: #ffe2e0;
+
+  --background-color: #ff380c;
+}
+
+.fleck-demo-title {
+  margin-top: 1.5rem;
+  text-align: center;
+  font-size: clamp(1.125rem, 5vw, 1.25rem);
+}
diff --git a/css-is-awesome-css-motion-path/README.markdown b/css-is-awesome-css-motion-path/README.markdown
new file mode 100644
index 0000000..274b8d0
--- /dev/null
+++ b/css-is-awesome-css-motion-path/README.markdown
@@ -0,0 +1,5 @@
+# CSS is Awesome (CSS Motion Path)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/yuanchuan/pen/OJPvRRR](https://codepen.io/yuanchuan/pen/OJPvRRR).
+
+
diff --git a/css-is-awesome-css-motion-path/dist/index.html b/css-is-awesome-css-motion-path/dist/index.html
new file mode 100644
index 0000000..17f7684
--- /dev/null
+++ b/css-is-awesome-css-motion-path/dist/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS is Awesome (CSS Motion Path)</title>
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=PT+Mono&amp;display=swap'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Nanum+Gothic&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<graph>
+  <text split>CSS is Awesome</text>
+  <belt split="21"></belt>
+  <tree split="13"></tree>
+  <tree split="13" outer></tree>
+  <star split="21"></star>
+  <circle></circle>
+  <arrow></arrow>
+</graph>
+
+
+<warning>
+  Your browser doesn't support 
+  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Motion_Path">CSS Motion Path</a>
+</warning>
+
+
+<script>
+  /* You may want to use splitting.js */ 
+ Array.from(document.querySelectorAll('[split]') || []).forEach(el => {
+   let text = el.innerHTML.trim();
+   let total = text.length || Number(el.getAttribute('split')) || 0;
+   el.style.setProperty('--total', total);
+   el.innerHTML = Array(total).fill(0)
+     .map((n, i) => `<span style="--n:${i}">${text[i]||''}</span>`)
+     .join('');
+ });
+</script>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/css-is-awesome-css-motion-path/dist/style.css b/css-is-awesome-css-motion-path/dist/style.css
new file mode 100644
index 0000000..b79374e
--- /dev/null
+++ b/css-is-awesome-css-motion-path/dist/style.css
@@ -0,0 +1,182 @@
+@charset "UTF-8";
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  display: grid;
+  place-content: center;
+}
+
+graph {
+  width: 400px;
+  height: 400px;
+  border: 10px double #000;
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) 50%/100% 2px no-repeat;
+  background: linear-gradient(#000, #000) 50%/100% 2px no-repeat;
+  font-family: 'PT Mono', monospace;
+  text-transform: uppercase;
+  line-height: 1;
+  --circle-up-path: path('M 0 200 A 200 200 0 0 1 400 200');
+  --circle-down-path: path('M 0 200 A 200 200 0 0 0 400 200');
+}
+graph:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 58%;
+  height: 58%;
+  -webkit-transform: translate(-50%, -50%) rotate(-135deg);
+          transform: translate(-50%, -50%) rotate(-135deg);
+  border: 6px double;
+  border-radius: 50%;
+  border-color: #000 transparent transparent #000;
+}
+graph:after {
+  content: '♥';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  font-family: 'Nanum Gothic', sans-serif;
+  font-size: 80px;
+  color: transparent;
+  text-shadow: 0 0 #000;
+}
+
+[split] > * {
+  position: absolute;
+}
+
+text > * {
+  font-size: 50px;
+  -webkit-transform: translateY(75%);
+          transform: translateY(75%);
+  offset-path: var(--circle-up-path);
+  offset-distance: calc(8% + var(--n) * 89.5% / var(--total));
+}
+
+belt > * {
+  -webkit-transform: translateY(-40px);
+          transform: translateY(-40px);
+  offset-path: var(--circle-down-path);
+  offset-distance: calc(7% + var(--n) * 91% / var(--total));
+  width: 18px;
+  height: 16px;
+  background: #000;
+  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+          clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+}
+belt > *:nth-child(even) {
+  -webkit-clip-path: circle(30%);
+          clip-path: circle(30%);
+}
+
+tree > * {
+  width: 2px;
+  height: 30px;
+  -webkit-transform: translateY(-98px);
+          transform: translateY(-98px);
+  background: #000;
+  offset-path: var(--circle-down-path);
+  offset-distance: calc(5% + var(--n) * 98% / var(--total));
+}
+tree > *:after {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: calc(50% - 4px);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #000;
+}
+tree > *:nth-child(even) {
+  height: 15px;
+  -webkit-transform: translateY(-90px);
+          transform: translateY(-90px);
+}
+
+tree[outer] > * {
+  offset-path: var(--circle-up-path);
+  -webkit-transform: translateY(128px);
+          transform: translateY(128px);
+  height: 60px;
+}
+tree[outer] > *:nth-child(odd) {
+  height: 30px;
+}
+
+star > * {
+  offset-path: var(--circle-down-path);
+  offset-distance: calc(6% + var(--n) * 93% / var(--total));
+  -webkit-transform: translateY(-15px);
+          transform: translateY(-15px);
+}
+star > *:after {
+  content: '***';
+  font-family: verdana;
+  color: #000;
+  font-size: 13px;
+}
+
+circle {
+  position: absolute;
+  width: 30%;
+  height: 30%;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(45deg);
+          transform: translate(-50%, -50%) rotate(45deg);
+  border: 6px solid #000;
+  border-style: double solid solid double;
+  border-radius: 50%;
+  background: #fff;
+}
+
+arrow:after, arrow:before {
+  content: '';
+  position: absolute;
+  top: calc(50% - 11px);
+  width: 20px;
+  height: 20px;
+  -webkit-transform: rotateX(45deg) rotate(45deg);
+          transform: rotateX(45deg) rotate(45deg);
+  border: 2px solid #000;
+  background: #fff;
+}
+
+arrow:before {
+  left: -13px;
+}
+
+arrow:after {
+  right: -13px;
+}
+
+@media screen and (max-width: 440px) {
+  graph {
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5);
+  }
+}
+warning {
+  background: yellow;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  padding: .5em 0;
+}
+
+@supports (offset-path: path("M 0 0 z")) {
+  warning {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/css-is-awesome-css-motion-path/license.txt b/css-is-awesome-css-motion-path/license.txt
new file mode 100644
index 0000000..10f8a51
--- /dev/null
+++ b/css-is-awesome-css-motion-path/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by yuanchuan (https://codepen.io/yuanchuan/pen/OJPvRRR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-is-awesome-css-motion-path/src/index.html b/css-is-awesome-css-motion-path/src/index.html
new file mode 100644
index 0000000..a428cf6
--- /dev/null
+++ b/css-is-awesome-css-motion-path/src/index.html
@@ -0,0 +1,28 @@
+<graph>
+  <text split>CSS is Awesome</text>
+  <belt split="21"></belt>
+  <tree split="13"></tree>
+  <tree split="13" outer></tree>
+  <star split="21"></star>
+  <circle></circle>
+  <arrow></arrow>
+</graph>
+
+
+<warning>
+  Your browser doesn't support 
+  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Motion_Path">CSS Motion Path</a>
+</warning>
+
+
+<script>
+  /* You may want to use splitting.js */ 
+ Array.from(document.querySelectorAll('[split]') || []).forEach(el => {
+   let text = el.innerHTML.trim();
+   let total = text.length || Number(el.getAttribute('split')) || 0;
+   el.style.setProperty('--total', total);
+   el.innerHTML = Array(total).fill(0)
+     .map((n, i) => `<span style="--n:${i}">${text[i]||''}</span>`)
+     .join('');
+ });
+</script>
\ No newline at end of file
diff --git a/css-is-awesome-css-motion-path/src/style.scss b/css-is-awesome-css-motion-path/src/style.scss
new file mode 100644
index 0000000..e94185a
--- /dev/null
+++ b/css-is-awesome-css-motion-path/src/style.scss
@@ -0,0 +1,159 @@
+html, body {
+  height: 100%;
+  margin: 0;
+}
+body { 
+  display: grid; 
+  place-content: center;  
+}
+
+graph {
+  width: 400px; height: 400px;
+  border: 10px double #000; 
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(#000, #000) 50% / 100% 2px no-repeat;
+  font-family: 'PT Mono', monospace;
+  text-transform: uppercase;
+  line-height: 1;
+  
+  &:before {
+    content: '';
+    position: absolute;
+    top: 50%; left: 50%;
+    width: 58%; height: 58%;
+    transform: translate(-50%, -50%) rotate(-135deg);
+    border: 6px double;
+    border-radius: 50%;
+    border-color: #000 transparent transparent #000;
+  }
+  
+  &:after {
+    content: '♥';
+    position: absolute;
+    left: 50%; top: 50%;
+    transform: translate(-50%, -50%);
+    font-family: 'Nanum Gothic', sans-serif;
+    font-size: 80px;
+    color: transparent;
+    text-shadow: 0 0 #000;
+  }
+  
+  --circle-up-path: path('M 0 200 A 200 200 0 0 1 400 200');
+  --circle-down-path: path('M 0 200 A 200 200 0 0 0 400 200');
+}
+
+[split] > * {
+  position: absolute;
+}
+
+text > * {
+  font-size: 50px;
+  transform: translateY(75%);
+  offset-path: var(--circle-up-path); 
+  offset-distance: calc(8% + var(--n) * 89.5% / var(--total));
+}
+
+belt > * {
+  transform: translateY(-40px);
+  offset-path: var(--circle-down-path); 
+  offset-distance: calc(7% + var(--n) * 91% / var(--total));
+  width: 18px; height: 16px;
+  background: #000;
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+  &:nth-child(even) {
+    clip-path: circle(30%);
+  }
+}
+
+tree > * {
+  width: 2px; height: 30px;
+  transform: translateY(-98px);
+  background: #000;
+  offset-path: var(--circle-down-path); 
+  offset-distance: calc(5% + var(--n) * 98% / var(--total));
+  
+  &:after {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: calc(50% - 4px);
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    background: #000;
+  }
+  
+  &:nth-child(even) {
+    height: 15px;
+    transform: translateY(-90px);
+  }
+}
+
+tree[outer] > * {
+  offset-path: var(--circle-up-path); 
+  transform: translateY(128px);
+  height: 60px;
+  &:nth-child(odd) {
+    height: 30px;
+  }
+}
+
+star > * {
+  offset-path: var(--circle-down-path); 
+  offset-distance: calc(6% + var(--n) * 93% / var(--total));
+  transform: translateY(-15px);
+  &:after {
+    content: '***';
+    font-family: verdana;
+    color: #000;
+    font-size: 13px;
+  }
+}
+
+circle {
+  position: absolute;
+  width: 30%; height: 30%;
+  left: 50%; top: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  border: 6px solid #000;
+  border-style: double solid solid double;
+  border-radius: 50%;
+  background: #fff;
+}
+
+arrow:after, arrow:before {
+  content: '';
+  position: absolute;
+  top: calc(50% - 11px);
+  width: 20px; height: 20px;
+  transform: rotateX(45deg) rotate(45deg);
+  border: 2px solid #000;
+  background: #fff;   
+}
+arrow:before {
+  left: -13px;
+}
+arrow:after {
+  right: -13px;
+}
+
+
+@media screen and (max-width: 440px) {
+  graph {
+    transform: scale(.5);
+  }
+}
+
+warning {
+  background: yellow;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  padding: .5em 0;
+}
+
+@supports (offset-path: path('M 0 0 z')) {
+  warning { display: none }
+}
\ No newline at end of file
diff --git a/css-is-awesomevariable-fonts-edition/README.markdown b/css-is-awesomevariable-fonts-edition/README.markdown
new file mode 100644
index 0000000..3b31267
--- /dev/null
+++ b/css-is-awesomevariable-fonts-edition/README.markdown
@@ -0,0 +1,4 @@
+# CSS is Awesome - Variable fonts Edition.
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/dym/pen/eYYZrxX](https://codepen.io/dym/pen/eYYZrxX).
+
+ CSS is just awesome. Okay!
\ No newline at end of file
diff --git a/css-is-awesomevariable-fonts-edition/dist/BarlowGX.ttf b/css-is-awesomevariable-fonts-edition/dist/BarlowGX.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..222e638921510864c03ec52b18488919629a54af
GIT binary patch
literal 338376
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

literal 0
HcmV?d00001

diff --git a/css-is-awesomevariable-fonts-edition/dist/index.html b/css-is-awesomevariable-fonts-edition/dist/index.html
new file mode 100644
index 0000000..6bec587
--- /dev/null
+++ b/css-is-awesomevariable-fonts-edition/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CSS is Awesome - Variable fonts Edition.</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<pre>CSS
+is
+Awesome
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/css-is-awesomevariable-fonts-edition/dist/style.css b/css-is-awesomevariable-fonts-edition/dist/style.css
new file mode 100644
index 0000000..07a62d5
--- /dev/null
+++ b/css-is-awesomevariable-fonts-edition/dist/style.css
@@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'Barlow GX';
+  src: url("BarlowGX.ttf") format("woff-variations");
+  font-style: normal;
+  font-weight: 22 188;
+  font-stretch: 300% 500%;
+}
+pre {
+  text-transform: uppercase;
+  transition: all 250ms linear;
+  margin: 25% auto;
+  border: 4px solid black;
+  width: 15.5rem;
+  height: 15.5rem;
+  padding: 0.5rem;
+  font-family: 'Barlow GX';
+  font-size: 5rem;
+  line-height: 1;
+  font-weight: 50;
+  font-variation-settings: 'wght' 50, 'wdth' 500;
+}
+
+pre:hover {
+  font-variation-settings: 'wght' 50, 'wdth' 300;
+}
diff --git a/css-is-awesomevariable-fonts-edition/license.txt b/css-is-awesomevariable-fonts-edition/license.txt
new file mode 100644
index 0000000..971ef98
--- /dev/null
+++ b/css-is-awesomevariable-fonts-edition/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by DYM (https://codepen.io/dym/pen/eYYZrxX)
+
+
+Fork of an original work that is now private.
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/css-is-awesomevariable-fonts-edition/src/BarlowGX.ttf b/css-is-awesomevariable-fonts-edition/src/BarlowGX.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..222e638921510864c03ec52b18488919629a54af
GIT binary patch
literal 338376
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

literal 0
HcmV?d00001

diff --git a/css-is-awesomevariable-fonts-edition/src/index.html b/css-is-awesomevariable-fonts-edition/src/index.html
new file mode 100644
index 0000000..77bca36
--- /dev/null
+++ b/css-is-awesomevariable-fonts-edition/src/index.html
@@ -0,0 +1,3 @@
+<pre>CSS
+is
+Awesome
\ No newline at end of file
diff --git a/css-is-awesomevariable-fonts-edition/src/style.scss b/css-is-awesomevariable-fonts-edition/src/style.scss
new file mode 100644
index 0000000..836238d
--- /dev/null
+++ b/css-is-awesomevariable-fonts-edition/src/style.scss
@@ -0,0 +1,28 @@
+@font-face {
+	font-family:'Barlow GX';
+	src: url('BarlowGX.ttf') format('woff-variations');
+	font-style: normal;
+	font-weight: 22 188;
+	font-stretch: 300% 500%;
+}
+
+pre {
+	text-transform: uppercase;
+	transition: all 250ms linear;
+
+	margin: 25% auto;
+	border: 4px solid black;
+	width: 15.5rem;
+	height: 15.5rem;
+	padding: 0.5rem;
+
+	font-family:'Barlow GX';
+	font-size: 5rem;
+	line-height: 1;
+	font-weight: 50;
+	font-variation-settings: 'wght' 50, 'wdth' 500;
+}
+
+pre:hover {
+	font-variation-settings: 'wght' 50, 'wdth' 300;
+}
diff --git a/css-neon-button-makerwith-css-variables/README.markdown b/css-neon-button-makerwith-css-variables/README.markdown
new file mode 100644
index 0000000..e64de55
--- /dev/null
+++ b/css-neon-button-makerwith-css-variables/README.markdown
@@ -0,0 +1,5 @@
+# CSS Neon Button maker - with css variables 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/LukyVj/pen/KKNjYKR](https://codepen.io/LukyVj/pen/KKNjYKR).
+
+
diff --git a/css-neon-button-makerwith-css-variables/dist/index.html b/css-neon-button-makerwith-css-variables/dist/index.html
new file mode 100644
index 0000000..10d25a5
--- /dev/null
+++ b/css-neon-button-makerwith-css-variables/dist/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS Neon Button maker - with css variables </title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="neons">
+  <button contenteditable>Neon Love</button>
+</div>
+
+<div class="panel">
+
+  <div class="controls">
+    <header>
+      <h3>Controls</h3>
+    </header>
+    <div>
+      <label for="hue">Hue</label>
+      <input type="range" min="0" max="360" value="180" step="1" id="hue" oninput="this.nextElementSibling.value = this.value">
+      <output>0</output>
+    </div>
+
+    <div>
+      <label for="saturation">Saturation</label>
+      <input type="range" min="0" max="100" value="50" step="1" id="saturation" oninput="this.nextElementSibling.value = this.value + '%'">
+      <output>0%</output>
+    </div>
+
+    <div>
+      <label for="light">Light</label>
+      <input type="range" min="0" max="100" value="50" step="1" id="light" oninput="this.nextElementSibling.value = this.value + '%'">
+      <output>0%</output>
+    </div>
+    
+    <div style="display:none" id="grad-section">
+      <label for="gradient-light">Gradient Light</label>
+      <input type="range" min="0" max="100" value="50" step="1" id="gradient-light" oninput="this.nextElementSibling.value = this.value + '%'">
+      <output>0%</output>
+    </div>
+    
+    <div>
+      <label for="gradient">gradient</label>
+      <input type="checkbox" id="gradient">
+    </div>
+    
+    <div>
+      <label for="animate">animate</label>
+      <input type="checkbox" id="animate">
+    </div>
+  </div>
+
+  <div class="result">
+    <pre>
+    <code>
+appearance: none;
+border: 0px none rgb(51, 153, 153);
+-webkit-font-smoothing: antialiased;
+border-radius: 4px;
+display: flex;
+padding: 8px 16px;
+justify-content: center;
+cursor: pointer;
+font-weight: 700;
+font-size: 18px;
+letter-spacing: 1.5px;
+text-align: center;
+text-transform: uppercase;
+font-family: Helvetica;
+
+/* Color */
+color: rgb(51, 153, 153);
+text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0px, rgba(255, 255, 255, 0.15) 0px 1px 0px;
+
+/* Background */
+background: rgba(0, 0, 0, 0) linear-gradient(rgb(64, 191, 191), rgb(57, 172, 172)) repeat scroll 0% 0% / auto padding-box border-box;
+
+box-shadow: rgba(68, 193, 193, 0.3) 0px 5px 10px 0px, rgba(68, 193, 193, 0.25) 0px 10px 40px 0px, rgba(68, 193, 193, 0.25) 0px 15px 80px 0px, rgba(0, 0, 0, 0.05) 0px 2px 1px 0px, rgba(0, 0, 0, 0.05) 0px 4px 2px 0px, rgba(0, 0, 0, 0.05) 0px 8px 4px 0px, rgba(0, 0, 0, 0.05) 0px 16px 8px 0px, rgba(0, 0, 0, 0.05) 0px 32px 16px 0px, rgba(0, 0, 0, 0.6) 0px -1px 0px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset;
+
+transition: box-shadow 0.2s ease 0s, background 0.2s ease 0s;
+will-change: box-shadow, background;
+    </code>
+  </pre>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/css-neon-button-makerwith-css-variables/dist/script.js b/css-neon-button-makerwith-css-variables/dist/script.js
new file mode 100644
index 0000000..aa907fc
--- /dev/null
+++ b/css-neon-button-makerwith-css-variables/dist/script.js
@@ -0,0 +1,87 @@
+const outputCSS = () => {
+  const button = document.querySelector('.neons button:first-of-type');
+  const buttonCss = getComputedStyle(button);
+
+  document.querySelector('.result pre code').innerHTML = `
+appearance: ${buttonCss.appearance};
+border: ${buttonCss.border};
+-webkit-font-smoothing: ${buttonCss.webkitFontSmoothing};
+border-radius: ${buttonCss.borderRadius};
+display: ${buttonCss.display};
+padding: ${buttonCss.padding};
+justify-content: ${buttonCss.justifyContent};
+cursor: ${buttonCss.cursor};
+font-weight: ${buttonCss.fontWeight};
+font-size: ${buttonCss.fontSize};
+letter-spacing: ${buttonCss.letterSpacing};
+text-align: ${buttonCss.textAlign};
+text-transform: ${buttonCss.textTransform};
+font-family: ${buttonCss.fontFamily};
+
+/* Color */
+color: ${buttonCss.color};
+text-shadow: ${buttonCss.textShadow};
+
+/* Background */
+background: ${buttonCss.background};
+
+box-shadow: ${buttonCss.boxShadow};
+
+transition: ${buttonCss.transition};
+will-change: ${buttonCss.willChange};
+    `;
+};
+
+const controls = ["hue", "saturation", "light", "gradient-light"];
+
+controls.map(control => {
+  document.querySelector(`input#${control}`).addEventListener("input", e => {
+    if (control !== "hue") {
+      document.documentElement.style.setProperty(
+      `--${control}`,
+      `${e.target.value}%`);
+
+    } else {
+      document.documentElement.style.setProperty(
+      `--${control}`,
+      e.target.value);
+
+    }
+
+    outputCSS();
+  });
+});
+
+
+document.getElementById('gradient').addEventListener('click', e => {
+  if (e.target.checked) {
+    document.getElementById('grad-section').style.display = "block";
+  } else {
+    document.getElementById('grad-section').style.display = "none";
+    document.documentElement.style.removeProperty('--gradient-light');
+  }
+});
+/* 
+- them: Nooooo don't do this you can't do this it's not allowed >:'( 
+- me: lol, background-color go brr brr :D :p 
+*/
+
+document.getElementById('animate').addEventListener('click', e => {
+  if (e.target.checked) {
+    var i = 0;
+    setInterval(() => {
+      if (i <= 359) {
+        i++;
+        document.documentElement.style.setProperty(
+        `--hue`,
+        i);
+
+        document.getElementById('hue').value = i;
+        document.getElementById('hue').nextElementSibling.value = i;
+        outputCSS();
+      } else {
+        i = 0;
+      }
+    }, 100);
+  }
+});
\ No newline at end of file
diff --git a/css-neon-button-makerwith-css-variables/dist/style.css b/css-neon-button-makerwith-css-variables/dist/style.css
new file mode 100644
index 0000000..c08f5d4
--- /dev/null
+++ b/css-neon-button-makerwith-css-variables/dist/style.css
@@ -0,0 +1,132 @@
+:root {
+  --raven: #2c343b;
+  --lilia: #f1f3f4;
+  --base-font-size: 18px;
+  --base-font-weight: 300;
+  
+  /* Theme */
+  --hue: 180;
+  --saturation: 50%;
+  --light: 50%;
+  --theme-hsl: var(--hue), var(--saturation), var(--light);
+  
+  /* uncomment if you want a gradient 
+    
+  --gradient-light: 50%;
+  */
+}
+
+html {
+  background: var(--raven);
+  color: var(--lilia);
+  padding: 1em;
+  font-family: arial;
+}
+
+.neons {
+  padding: 1em;
+  min-height: 180px;
+}
+
+/* Panel */
+.panel {
+  display: flex;
+  justify-content: space-between;
+}
+
+/* Controls */
+.controls,
+.result {
+  background: var(--lilia);
+  color: var(--raven);
+  padding: 1em;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  border-radius: 4px;
+}
+
+.controls label {
+  display: block;
+}
+
+/* Result ( code ) */
+
+.result {
+  padding: 1em;
+  color: white;
+  text-shadow: 0 2px 10px hsl(var(--theme-hsl));
+  overflow: hidden;
+  margin-left: 16px
+}
+.result pre {
+  padding: 0 1em;
+  margin: 0;
+  background: var(--raven);
+  overflow: auto;
+}
+.result code {
+  padding: 1em;
+  margin: 0;
+}
+
+input {
+  /* Canary: 
+   * Enable the "Experimental Web Platform Features" flag in about:flags
+   */
+  accent-color: hsl(var(--theme-hsl))
+}
+
+.neons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.neons button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: 0;
+  -webkit-font-smoothing: antialiased;
+  border-radius: 4px;
+  display: flex;
+  padding: 8px 16px;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: var(--base-font-size);
+  letter-spacing: 1.5px;
+  text-align: center;
+  text-transform: uppercase;
+  font-family: Helvetica;
+  
+  /* Color */
+  color: hsl(var(--hue), var(--saturation), 40%);
+  text-shadow: 0 -1px  0 rgb(0 0 0 / 30%),
+    0 1px  0 rgb(255 255 255 / 15%);
+  
+  /* Background */
+  background: linear-gradient(
+    hsl(var(--theme-hsl)), 
+    hsl(var(--hue), var(--saturation), var(--gradient-light, var(--light))));
+  
+  box-shadow: 
+    /* Color */
+    0 5px 10px  hsla(var(--theme-hsl), 0.30),
+    0 10px 40px hsla(var(--theme-hsl), 0.25),
+    0 15px 80px hsla(var(--theme-hsl), 0.25),
+    
+    /* Shadow */ 
+    0 2px 1px rgba(0, 0, 0, 0.05), 
+    0 4px 2px rgba(0, 0, 0, 0.05),
+    0 8px 4px rgba(0, 0, 0, 0.05), 
+    0 16px 8px rgba(0, 0, 0, 0.05),
+    0 32px 16px rgba(0, 0, 0, 0.05), 
+    /* Borders */
+    inset 0 -1px  0 rgb(0 0 0 / 60%),
+    inset 0 1px  0 rgb(255 255 255 / 30%);
+    
+  transition: box-shadow 0.2s ease, background 0.2s ease;
+  will-change: box-shadow, background;
+}
\ No newline at end of file
diff --git a/css-neon-button-makerwith-css-variables/license.txt b/css-neon-button-makerwith-css-variables/license.txt
new file mode 100644
index 0000000..3238c2b
--- /dev/null
+++ b/css-neon-button-makerwith-css-variables/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by LukyVJ (https://codepen.io/LukyVj/pen/KKNjYKR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-neon-button-makerwith-css-variables/src/index.html b/css-neon-button-makerwith-css-variables/src/index.html
new file mode 100644
index 0000000..38e95dc
--- /dev/null
+++ b/css-neon-button-makerwith-css-variables/src/index.html
@@ -0,0 +1,78 @@
+<div class="neons">
+  <button contenteditable>Neon Love</button>
+</div>
+
+<div class="panel">
+
+  <div class="controls">
+    <header>
+      <h3>Controls</h3>
+    </header>
+    <div>
+      <label for="hue">Hue</label>
+      <input type="range" min="0" max="360" value="180" step="1" id="hue" oninput="this.nextElementSibling.value = this.value">
+      <output>0</output>
+    </div>
+
+    <div>
+      <label for="saturation">Saturation</label>
+      <input type="range" min="0" max="100" value="50" step="1" id="saturation" oninput="this.nextElementSibling.value = this.value + '%'">
+      <output>0%</output>
+    </div>
+
+    <div>
+      <label for="light">Light</label>
+      <input type="range" min="0" max="100" value="50" step="1" id="light" oninput="this.nextElementSibling.value = this.value + '%'">
+      <output>0%</output>
+    </div>
+    
+    <div style="display:none" id="grad-section">
+      <label for="gradient-light">Gradient Light</label>
+      <input type="range" min="0" max="100" value="50" step="1" id="gradient-light" oninput="this.nextElementSibling.value = this.value + '%'">
+      <output>0%</output>
+    </div>
+    
+    <div>
+      <label for="gradient">gradient</label>
+      <input type="checkbox" id="gradient">
+    </div>
+    
+    <div>
+      <label for="animate">animate</label>
+      <input type="checkbox" id="animate">
+    </div>
+  </div>
+
+  <div class="result">
+    <pre>
+    <code>
+appearance: none;
+border: 0px none rgb(51, 153, 153);
+-webkit-font-smoothing: antialiased;
+border-radius: 4px;
+display: flex;
+padding: 8px 16px;
+justify-content: center;
+cursor: pointer;
+font-weight: 700;
+font-size: 18px;
+letter-spacing: 1.5px;
+text-align: center;
+text-transform: uppercase;
+font-family: Helvetica;
+
+/* Color */
+color: rgb(51, 153, 153);
+text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0px, rgba(255, 255, 255, 0.15) 0px 1px 0px;
+
+/* Background */
+background: rgba(0, 0, 0, 0) linear-gradient(rgb(64, 191, 191), rgb(57, 172, 172)) repeat scroll 0% 0% / auto padding-box border-box;
+
+box-shadow: rgba(68, 193, 193, 0.3) 0px 5px 10px 0px, rgba(68, 193, 193, 0.25) 0px 10px 40px 0px, rgba(68, 193, 193, 0.25) 0px 15px 80px 0px, rgba(0, 0, 0, 0.05) 0px 2px 1px 0px, rgba(0, 0, 0, 0.05) 0px 4px 2px 0px, rgba(0, 0, 0, 0.05) 0px 8px 4px 0px, rgba(0, 0, 0, 0.05) 0px 16px 8px 0px, rgba(0, 0, 0, 0.05) 0px 32px 16px 0px, rgba(0, 0, 0, 0.6) 0px -1px 0px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset;
+
+transition: box-shadow 0.2s ease 0s, background 0.2s ease 0s;
+will-change: box-shadow, background;
+    </code>
+  </pre>
+  </div>
+</div>
\ No newline at end of file
diff --git a/css-neon-button-makerwith-css-variables/src/script.babel b/css-neon-button-makerwith-css-variables/src/script.babel
new file mode 100644
index 0000000..e3a8234
--- /dev/null
+++ b/css-neon-button-makerwith-css-variables/src/script.babel
@@ -0,0 +1,87 @@
+const outputCSS = () => {
+  const button = document.querySelector('.neons button:first-of-type');
+    const buttonCss = getComputedStyle(button);
+        
+    document.querySelector('.result pre code').innerHTML = `
+appearance: ${buttonCss.appearance};
+border: ${buttonCss.border};
+-webkit-font-smoothing: ${buttonCss.webkitFontSmoothing};
+border-radius: ${buttonCss.borderRadius};
+display: ${buttonCss.display};
+padding: ${buttonCss.padding};
+justify-content: ${buttonCss.justifyContent};
+cursor: ${buttonCss.cursor};
+font-weight: ${buttonCss.fontWeight};
+font-size: ${buttonCss.fontSize};
+letter-spacing: ${buttonCss.letterSpacing};
+text-align: ${buttonCss.textAlign};
+text-transform: ${buttonCss.textTransform};
+font-family: ${buttonCss.fontFamily};
+
+/* Color */
+color: ${buttonCss.color};
+text-shadow: ${buttonCss.textShadow};
+
+/* Background */
+background: ${buttonCss.background};
+
+box-shadow: ${buttonCss.boxShadow};
+
+transition: ${buttonCss.transition};
+will-change: ${buttonCss.willChange};
+    `
+}
+
+const controls = ["hue", "saturation", "light", "gradient-light"];
+
+controls.map((control) => {
+  document.querySelector(`input#${control}`).addEventListener("input", (e) => {
+    if (control !== "hue") {
+      document.documentElement.style.setProperty(
+        `--${control}`,
+        `${e.target.value}%`
+      );
+    } else {
+      document.documentElement.style.setProperty(
+        `--${control}`,
+        e.target.value
+      );
+    }
+    
+    outputCSS();
+  });
+});
+
+
+document.getElementById('gradient').addEventListener('click', e => {
+  if (e.target.checked) {
+    document.getElementById('grad-section').style.display="block"
+  } else {
+    document.getElementById('grad-section').style.display="none";
+    document.documentElement.style.removeProperty('--gradient-light')
+  }
+});
+/* 
+- them: Nooooo don't do this you can't do this it's not allowed >:'( 
+- me: lol, background-color go brr brr :D :p 
+*/
+
+document.getElementById('animate').addEventListener('click', e => {
+  if (e.target.checked) {
+    var i = 0;
+    setInterval(() => {
+      if (i <= 359) {
+        i++;
+        document.documentElement.style.setProperty(
+          `--hue`,
+          i
+        );
+        document.getElementById('hue').value=i;
+        document.getElementById('hue').nextElementSibling.value=i;
+        outputCSS();
+      } else {
+        i = 0
+      }
+    }, 100)
+  }
+})
\ No newline at end of file
diff --git a/css-neon-button-makerwith-css-variables/src/style.css b/css-neon-button-makerwith-css-variables/src/style.css
new file mode 100644
index 0000000..340d612
--- /dev/null
+++ b/css-neon-button-makerwith-css-variables/src/style.css
@@ -0,0 +1,128 @@
+:root {
+  --raven: #2c343b;
+  --lilia: #f1f3f4;
+  --base-font-size: 18px;
+  --base-font-weight: 300;
+  
+  /* Theme */
+  --hue: 180;
+  --saturation: 50%;
+  --light: 50%;
+  --theme-hsl: var(--hue), var(--saturation), var(--light);
+  
+  /* uncomment if you want a gradient 
+    
+  --gradient-light: 50%;
+  */
+}
+
+html {
+  background: var(--raven);
+  color: var(--lilia);
+  padding: 1em;
+  font-family: arial;
+}
+
+.neons {
+  padding: 1em;
+  min-height: 180px;
+}
+
+/* Panel */
+.panel {
+  display: flex;
+  justify-content: space-between;
+}
+
+/* Controls */
+.controls,
+.result {
+  background: var(--lilia);
+  color: var(--raven);
+  padding: 1em;
+  width: max-content;
+  border-radius: 4px;
+}
+
+.controls label {
+  display: block;
+}
+
+/* Result ( code ) */
+
+.result {
+  padding: 1em;
+  color: white;
+  text-shadow: 0 2px 10px hsl(var(--theme-hsl));
+  overflow: hidden;
+  margin-left: 16px
+}
+.result pre {
+  padding: 0 1em;
+  margin: 0;
+  background: var(--raven);
+  overflow: auto;
+}
+.result code {
+  padding: 1em;
+  margin: 0;
+}
+
+input {
+  /* Canary: 
+   * Enable the "Experimental Web Platform Features" flag in about:flags
+   */
+  accent-color: hsl(var(--theme-hsl))
+}
+
+.neons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.neons button {
+  appearance: none;
+  border: 0;
+  -webkit-font-smoothing: antialiased;
+  border-radius: 4px;
+  display: flex;
+  padding: 8px 16px;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: var(--base-font-size);
+  letter-spacing: 1.5px;
+  text-align: center;
+  text-transform: uppercase;
+  font-family: Helvetica;
+  
+  /* Color */
+  color: hsl(var(--hue), var(--saturation), 40%);
+  text-shadow: 0 -1px  0 rgb(0 0 0 / 30%),
+    0 1px  0 rgb(255 255 255 / 15%);
+  
+  /* Background */
+  background: linear-gradient(
+    hsl(var(--theme-hsl)), 
+    hsl(var(--hue), var(--saturation), var(--gradient-light, var(--light))));
+  
+  box-shadow: 
+    /* Color */
+    0 5px 10px  hsla(var(--theme-hsl), 0.30),
+    0 10px 40px hsla(var(--theme-hsl), 0.25),
+    0 15px 80px hsla(var(--theme-hsl), 0.25),
+    
+    /* Shadow */ 
+    0 2px 1px rgba(0, 0, 0, 0.05), 
+    0 4px 2px rgba(0, 0, 0, 0.05),
+    0 8px 4px rgba(0, 0, 0, 0.05), 
+    0 16px 8px rgba(0, 0, 0, 0.05),
+    0 32px 16px rgba(0, 0, 0, 0.05), 
+    /* Borders */
+    inset 0 -1px  0 rgb(0 0 0 / 60%),
+    inset 0 1px  0 rgb(255 255 255 / 30%);
+    
+  transition: box-shadow 0.2s ease, background 0.2s ease;
+  will-change: box-shadow, background;
+}
diff --git a/css-only-direction-aware-box/README.markdown b/css-only-direction-aware-box/README.markdown
new file mode 100644
index 0000000..15d6ddd
--- /dev/null
+++ b/css-only-direction-aware-box/README.markdown
@@ -0,0 +1,5 @@
+# CSS-only direction aware box
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ainalem/pen/zYwLJzG](https://codepen.io/ainalem/pen/zYwLJzG).
+
+A CSS-only implementation of a box with direction-aware hover.  N, NE, E, SE, S, SW, W NW
diff --git a/css-only-direction-aware-box/dist/index.html b/css-only-direction-aware-box/dist/index.html
new file mode 100644
index 0000000..b91c802
--- /dev/null
+++ b/css-only-direction-aware-box/dist/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS-only direction aware box</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="box">
+  <div class="drop"></div>
+  <div class="activator northwest"></div>
+  <div class="activator north"></div>
+  <div class="activator northeast"></div>
+  <div class="activator east"></div>
+  <div class="activator southeast"></div>
+  <div class="activator south"></div>
+  <div class="activator southwest"></div>
+  <div class="activator west"></div>
+  <div class="overlay northwest">Northwest</div>
+  <div class="overlay north">North</div>
+  <div class="overlay northeast">Northeast</div>
+  <div class="overlay east">East</div>
+  <div class="overlay southeast">Southeast</div>
+  <div class="overlay south">South</div>
+  <div class="overlay southwest">Southwest</div>
+  <div class="overlay west">West</div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/css-only-direction-aware-box/dist/script.js b/css-only-direction-aware-box/dist/script.js
new file mode 100644
index 0000000..639772f
--- /dev/null
+++ b/css-only-direction-aware-box/dist/script.js
@@ -0,0 +1 @@
+// So peaceful, so quiet, so empty
\ No newline at end of file
diff --git a/css-only-direction-aware-box/dist/style.css b/css-only-direction-aware-box/dist/style.css
new file mode 100644
index 0000000..36875f9
--- /dev/null
+++ b/css-only-direction-aware-box/dist/style.css
@@ -0,0 +1,227 @@
+body {
+  align-items: center;
+  background-color: #e1fee2;
+  display: flex;
+  font-family: sans-serif;
+  font-weight: 900;
+  height: 100vh;
+  justify-content: center;
+  margin: 0;
+}
+
+.box {
+  --box-width: 300px;
+  border-radius: 16px;
+  box-shadow: 0 2.2px 2.2px rgba(0, 0, 0, 0.068),
+    0 5.3px 5.3px rgba(0, 0, 0, 0.093), 0 10px 10px rgba(0, 0, 0, 0.103),
+    0 17.9px 17.9px rgba(0, 0, 0, 0.11), 0 33.4px 33.4px rgba(0, 0, 0, 0.115),
+    0 80px 80px rgba(0, 0, 0, 0.12);
+  height: var(--box-width);
+  overflow: hidden;
+  position: relative;
+  width: var(--box-width);
+}
+
+.drop {
+  background: linear-gradient(#37854f, #173620);
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: -1;
+}
+
+.activator {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.activator.northwest {
+  /* background-color: #fff; */
+  clip-path: polygon(50% 50%, 0% 25%, 0% 0%, 25% 0%);
+}
+
+.activator.north {
+  /* background-color: #f9f; */
+  clip-path: polygon(50% 50%, 25% 0%, 75% 0%);
+}
+
+.activator.northeast {
+  /* background-color: #ff9; */
+  clip-path: polygon(50% 50%, 75% 0%, 100% 0%, 100% 25%);
+}
+
+.activator.east {
+  /* background-color: #9ff; */
+  clip-path: polygon(50% 50%, 100% 25%, 100% 75%);
+}
+
+.activator.southeast {
+  /* background-color: #99f; */
+  clip-path: polygon(50% 50%, 100% 75%, 100% 100%, 75% 100%);
+}
+
+.activator.south {
+  /* background-color: #f99; */
+  clip-path: polygon(50% 50%, 25% 100%, 75% 100%);
+}
+
+.activator.southwest {
+  /* background-color: #999; */
+  clip-path: polygon(50% 50%, 0% 75%, 0% 100%, 25% 100%);
+}
+
+.activator.west {
+  /* background-color: #9f9; */
+  clip-path: polygon(50% 50%, 0% 25%, 0% 75%);
+}
+
+.activator:hover {
+  left: 0;
+  height: 100%;
+  top: 0;
+  clip-path: none;
+  width: 100%;
+  z-index: 1;
+}
+
+.overlay {
+  align-items: center;
+  display: flex;
+  font-size: 52px;
+  height: 100%;
+  justify-content: center;
+  position: absolute;
+  transition: clip-path 500ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+}
+
+.overlay.northwest {
+  background: conic-gradient(from -0.125turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.north {
+  background: conic-gradient(from 0turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.northeast {
+  background: conic-gradient(from 0.125turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.east {
+  background: conic-gradient(from 0.25turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.southeast {
+  background: conic-gradient(from 0.375turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.south {
+  background: conic-gradient(from 0.5turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.southwest {
+  background: conic-gradient(from 0.625turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.west {
+  background: conic-gradient(from 0.75turn, #ffe000, #799f0c 1turn);
+}
+
+.activator.northwest:not(:hover) ~ .overlay.northwest {
+  clip-path: path(
+    "M -657.60889,-233.34482 -162.63415,261.62992 -91.923471,-91.923469 -70.710261,-70.71026 -141.42094,282.84313 -113.13667,311.1274 -42.425991,-42.42599 -10.606191,-10.60619 -81.316871,342.9472 -70.710261,353.5538 4.0845702e-4,4.0973178e-4 353.5538,-70.71026 342.9472,-81.316869 -10.606191,-10.60619 -42.425991,-42.42599 311.1274,-113.13667 282.84313,-141.42094 -70.710261,-70.71026 -91.923471,-91.923469 261.62992,-162.63415 -233.34483,-657.60889 Z"
+  );
+}
+
+.activator.northwest:hover ~ .overlay.northwest {
+  clip-path: path(
+    "M -265.68589,158.57818 229.28885,653.55292 299.99953,299.99953 321.21274,321.21274 250.50206,674.76613 278.78633,703.0504 349.49701,349.49701 381.31681,381.31681 310.60613,734.8702 321.21274,745.4768 391.92341,391.92341 745.4768,321.21274 734.8702,310.60613 381.31681,381.31681 349.49701,349.49701 703.0504,278.78633 674.76613,250.50206 321.21274,321.21274 299.99953,299.99953 653.55292,229.28885 158.57817,-265.68589 Z"
+  );
+}
+
+.activator.north:not(:hover) ~ .overlay.north {
+  clip-path: path(
+    "M 0,-530 V -130 L 150,-230 V -200 L 0,-100 V -60 L 150,-160 V -115 L 0,-15 V 0 L 150,-100 300,0 V -15 L 150,-115 V -160 L 300,-60 V -100 L 150,-200 V -230 L 300,-130 V -530 Z"
+  );
+}
+
+.activator.north:hover ~ .overlay.north {
+  clip-path: path(
+    "M 0,0 V 400 L 150,300 V 330 L 0,430 V 470 L 150,370 V 415 L 0,515 V 530 L 150,430 300,530 V 515 L 150,415 V 370 L 300,470 V 430 L 150,330 V 300 L 300,400 V 0 Z"
+  );
+}
+
+.activator.northeast:not(:hover) ~ .overlay.northeast {
+  clip-path: path(
+    "M 533.34481,-657.60889 38.370072,-162.63418 391.92348,-91.923523 370.71027,-70.710311 17.156862,-141.42097 -11.127417,-113.1367 342.42599,-42.426041 310.60619,-10.606244 -42.947227,-81.316921 -53.553827,-70.710311 299.99959,3.5836464e-4 370.71027,353.5538 381.31688,342.9472 310.60619,-10.606244 342.42599,-42.426041 413.13666,311.1274 441.42093,282.84313 370.71027,-70.710311 391.92348,-91.923523 462.63414,261.62992 957.60887,-233.34482 Z"
+  );
+}
+
+.activator.northeast:hover ~ .overlay.northeast {
+  clip-path: path(
+    "M 141.4218,-265.68589 -353.55295,229.28884 4.7145283e-4,299.99951 -21.21274,321.21272 -374.76616,250.50205 -403.05043,278.78632 -49.497012,349.49699 -81.316812,381.31679 -434.87023,310.60611 -445.47683,321.21272 -91.923412,391.92339 -21.21274,745.4768 -10.606129,734.8702 -81.316812,381.31679 -49.497012,349.49699 21.21365,703.0504 49.49792,674.76613 -21.21274,321.21272 4.7145283e-4,299.99951 70.711135,653.55292 565.68586,158.57817 Z"
+  );
+}
+
+.activator.east:not(:hover) ~ .overlay.east {
+  clip-path: path(
+    "M 830.00026,300 H 430.00026 L 530.00026,150 H 500.00026 L 400.00026,300 H 360.00026 L 460.00026,150 H 415.00027 L 315.00026,300 H 300.00026 L 400.00026,150 300.00026,-1.05e-6 H 315.00026 L 415.00027,150 H 460.00026 L 360.00026,-1.05e-6 H 400.00026 L 500.00026,150 H 530.00026 L 430.00026,-1.05e-6 H 830.00026 Z"
+  );
+}
+
+.activator.east:hover ~ .overlay.east {
+  clip-path: path(
+    "M 300.00026,300 H -99.999742 L 2.5709591e-4,150 H -29.999742 L -129.99974,300 H -169.99974 L -69.999742,150 H -114.99973 L -214.99974,300 H -229.99974 L -129.99974,150 -229.99974,-1.05e-6 H -214.99974 L -114.99973,150 H -69.999742 L -169.99974,-1.05e-6 H -129.99974 L -29.999742,150 H 2.5709591e-4 L -99.999742,-1.05e-6 H 300.00026 Z"
+  );
+}
+
+.activator.southeast:not(:hover) ~ .overlay.southeast {
+  clip-path: path(
+    "M 957.60886,533.34479 462.63412,38.370053 391.92344,391.92344 370.71023,370.71023 441.42091,17.156843 413.13664,-11.127426 342.42596,342.42597 310.60616,310.60617 381.31684,-42.947227 370.71023,-53.553827 299.99956,299.99957 -53.553827,370.71023 -42.947227,381.31684 310.60616,310.60617 342.42596,342.42597 -11.127426,413.13664 17.156844,441.42091 370.71023,370.71023 391.92344,391.92344 38.370054,462.63412 533.3448,957.60886 Z"
+  );
+}
+
+.activator.southeast:hover ~ .overlay.southeast {
+  clip-path: path(
+    "M 565.68586,141.42179 70.711126,-353.55295 4.4388203e-4,4.4188117e-4 -21.212767,-21.212769 49.497913,-374.76616 21.213643,-403.05043 -49.497037,-49.497039 -81.316837,-81.316839 -10.606157,-434.87023 -21.212767,-445.47683 -91.923437,-91.923439 -445.47683,-21.212769 -434.87023,-10.606159 -81.316837,-81.316839 -49.497037,-49.497039 -403.05043,21.213641 -374.76616,49.497911 -21.212767,-21.212769 4.4388203e-4,4.4188117e-4 -353.55295,70.711126 141.4218,565.68586 Z"
+  );
+}
+
+.activator.south:not(:hover) ~ .overlay.south {
+  clip-path: path(
+    "M 300,830.00026 V 430.00025 L 150,530.00024 V 500.00024 L 300,400.00026 V 360.00026 L 150,460.00025 V 415.00026 L 300,315.00026 V 300.00026 L 150,400.00026 0,300.00026 V 315.00026 L 150,415.00026 V 460.00025 L 0,360.00026 V 400.00026 L 150,500.00024 V 530.00024 L 0,430.00025 V 830.00026 Z"
+  );
+}
+
+.activator.south:hover ~ .overlay.south {
+  clip-path: path(
+    "M 300,300.00026 V -99.999744 L 150,2.4619591e-4 V -29.999752 L 300,-129.99974 V -169.99974 L 150,-69.999748 V -114.99974 L 300,-214.99974 V -229.99974 L 150,-129.99974 0,-229.99974 V -214.99974 L 150,-114.99974 V -69.999748 L 0,-169.99974 V -129.99974 L 150,-29.999752 V 2.4619591e-4 L 0,-99.999744 V 300.00026 Z"
+  );
+}
+
+.activator.southwest:not(:hover) ~ .overlay.southwest {
+  clip-path: path(
+    "M -232.88396,956.31126 261.11342,462.31387 -91.74186,391.74282 -70.570531,370.57149 282.28474,441.14255 310.51317,412.91413 -42.342125,342.34307 -10.585155,310.5861 342.27014,381.15716 352.85579,370.57149 4.952425e-4,300.00045 -70.570531,-52.85483 -81.156201,-42.269173 -10.585155,310.5861 -42.342125,342.34307 -112.91317,-10.512202 -141.14159,17.716219 -70.570531,370.57149 -91.74186,391.74282 -162.31291,38.887542 -656.31029,532.88493 Z"
+  );
+}
+
+.activator.southwest:hover ~ .overlay.southwest {
+  clip-path: path(
+    "M 158.57818,565.68586 653.55292,70.71112 299.99953,4.3666483e-4 321.21274,-21.212773 674.76613,49.497907 703.0504,21.213637 349.49701,-49.497043 381.31681,-81.316843 734.8702,-10.606163 745.4768,-21.212773 391.92341,-91.923443 321.21274,-445.47683 310.60613,-434.87023 381.31681,-81.316843 349.49701,-49.497043 278.78633,-403.05043 250.50206,-374.76616 321.21274,-21.212773 299.99953,4.3666483e-4 229.28884,-353.55295 -265.68589,141.42179 Z"
+  );
+}
+
+.activator.west:not(:hover) ~ .overlay.west {
+  clip-path: path(
+    "M -530,300 H -130 L -230,150 H -200 L -100,300 H -60 L -160,150 H -115 L -15,300 H 0 L -100,150 0,0 H -15 L -115,150 H -160 L -60,0 H -100 L -200,150 H -230 L -130,0 H -530 Z"
+  );
+}
+
+.activator.west:hover ~ .overlay.west {
+  clip-path: path(
+    "M 0,300 H 400 L 300,150 H 330 L 430,300 H 470 L 370,150 H 415 L 515,300 H 530 L 430,150 530,0 H 515 L 415,150 H 370 L 470,0 H 430 L 330,150 H 300 L 400,0 H 0 Z"
+  );
+}
\ No newline at end of file
diff --git a/css-only-direction-aware-box/license.txt b/css-only-direction-aware-box/license.txt
new file mode 100644
index 0000000..5a2b4ee
--- /dev/null
+++ b/css-only-direction-aware-box/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Mikael Ainalem (https://codepen.io/ainalem/pen/zYwLJzG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-only-direction-aware-box/src/index.html b/css-only-direction-aware-box/src/index.html
new file mode 100644
index 0000000..785f751
--- /dev/null
+++ b/css-only-direction-aware-box/src/index.html
@@ -0,0 +1,19 @@
+<div class="box">
+  <div class="drop"></div>
+  <div class="activator northwest"></div>
+  <div class="activator north"></div>
+  <div class="activator northeast"></div>
+  <div class="activator east"></div>
+  <div class="activator southeast"></div>
+  <div class="activator south"></div>
+  <div class="activator southwest"></div>
+  <div class="activator west"></div>
+  <div class="overlay northwest">Northwest</div>
+  <div class="overlay north">North</div>
+  <div class="overlay northeast">Northeast</div>
+  <div class="overlay east">East</div>
+  <div class="overlay southeast">Southeast</div>
+  <div class="overlay south">South</div>
+  <div class="overlay southwest">Southwest</div>
+  <div class="overlay west">West</div>
+</div>
\ No newline at end of file
diff --git a/css-only-direction-aware-box/src/script.js b/css-only-direction-aware-box/src/script.js
new file mode 100644
index 0000000..639772f
--- /dev/null
+++ b/css-only-direction-aware-box/src/script.js
@@ -0,0 +1 @@
+// So peaceful, so quiet, so empty
\ No newline at end of file
diff --git a/css-only-direction-aware-box/src/style.css b/css-only-direction-aware-box/src/style.css
new file mode 100644
index 0000000..f6018b3
--- /dev/null
+++ b/css-only-direction-aware-box/src/style.css
@@ -0,0 +1,227 @@
+body {
+  align-items: center;
+  background-color: #e1fee2;
+  display: flex;
+  font-family: sans-serif;
+  font-weight: 900;
+  height: 100vh;
+  justify-content: center;
+  margin: 0;
+}
+
+.box {
+  --box-width: 300px;
+  border-radius: 16px;
+  box-shadow: 0 2.2px 2.2px rgba(0, 0, 0, 0.068),
+    0 5.3px 5.3px rgba(0, 0, 0, 0.093), 0 10px 10px rgba(0, 0, 0, 0.103),
+    0 17.9px 17.9px rgba(0, 0, 0, 0.11), 0 33.4px 33.4px rgba(0, 0, 0, 0.115),
+    0 80px 80px rgba(0, 0, 0, 0.12);
+  height: var(--box-width);
+  overflow: hidden;
+  position: relative;
+  width: var(--box-width);
+}
+
+.drop {
+  background: linear-gradient(#37854f, #173620);
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: -1;
+}
+
+.activator {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.activator.northwest {
+  /* background-color: #fff; */
+  clip-path: polygon(50% 50%, 0% 25%, 0% 0%, 25% 0%);
+}
+
+.activator.north {
+  /* background-color: #f9f; */
+  clip-path: polygon(50% 50%, 25% 0%, 75% 0%);
+}
+
+.activator.northeast {
+  /* background-color: #ff9; */
+  clip-path: polygon(50% 50%, 75% 0%, 100% 0%, 100% 25%);
+}
+
+.activator.east {
+  /* background-color: #9ff; */
+  clip-path: polygon(50% 50%, 100% 25%, 100% 75%);
+}
+
+.activator.southeast {
+  /* background-color: #99f; */
+  clip-path: polygon(50% 50%, 100% 75%, 100% 100%, 75% 100%);
+}
+
+.activator.south {
+  /* background-color: #f99; */
+  clip-path: polygon(50% 50%, 25% 100%, 75% 100%);
+}
+
+.activator.southwest {
+  /* background-color: #999; */
+  clip-path: polygon(50% 50%, 0% 75%, 0% 100%, 25% 100%);
+}
+
+.activator.west {
+  /* background-color: #9f9; */
+  clip-path: polygon(50% 50%, 0% 25%, 0% 75%);
+}
+
+.activator:hover {
+  left: 0;
+  height: 100%;
+  top: 0;
+  clip-path: none;
+  width: 100%;
+  z-index: 1;
+}
+
+.overlay {
+  align-items: center;
+  display: flex;
+  font-size: 52px;
+  height: 100%;
+  justify-content: center;
+  position: absolute;
+  transition: clip-path 500ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+}
+
+.overlay.northwest {
+  background: conic-gradient(from -0.125turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.north {
+  background: conic-gradient(from 0turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.northeast {
+  background: conic-gradient(from 0.125turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.east {
+  background: conic-gradient(from 0.25turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.southeast {
+  background: conic-gradient(from 0.375turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.south {
+  background: conic-gradient(from 0.5turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.southwest {
+  background: conic-gradient(from 0.625turn, #ffe000, #799f0c 1turn);
+}
+
+.overlay.west {
+  background: conic-gradient(from 0.75turn, #ffe000, #799f0c 1turn);
+}
+
+.activator.northwest:not(:hover) ~ .overlay.northwest {
+  clip-path: path(
+    "M -657.60889,-233.34482 -162.63415,261.62992 -91.923471,-91.923469 -70.710261,-70.71026 -141.42094,282.84313 -113.13667,311.1274 -42.425991,-42.42599 -10.606191,-10.60619 -81.316871,342.9472 -70.710261,353.5538 4.0845702e-4,4.0973178e-4 353.5538,-70.71026 342.9472,-81.316869 -10.606191,-10.60619 -42.425991,-42.42599 311.1274,-113.13667 282.84313,-141.42094 -70.710261,-70.71026 -91.923471,-91.923469 261.62992,-162.63415 -233.34483,-657.60889 Z"
+  );
+}
+
+.activator.northwest:hover ~ .overlay.northwest {
+  clip-path: path(
+    "M -265.68589,158.57818 229.28885,653.55292 299.99953,299.99953 321.21274,321.21274 250.50206,674.76613 278.78633,703.0504 349.49701,349.49701 381.31681,381.31681 310.60613,734.8702 321.21274,745.4768 391.92341,391.92341 745.4768,321.21274 734.8702,310.60613 381.31681,381.31681 349.49701,349.49701 703.0504,278.78633 674.76613,250.50206 321.21274,321.21274 299.99953,299.99953 653.55292,229.28885 158.57817,-265.68589 Z"
+  );
+}
+
+.activator.north:not(:hover) ~ .overlay.north {
+  clip-path: path(
+    "M 0,-530 V -130 L 150,-230 V -200 L 0,-100 V -60 L 150,-160 V -115 L 0,-15 V 0 L 150,-100 300,0 V -15 L 150,-115 V -160 L 300,-60 V -100 L 150,-200 V -230 L 300,-130 V -530 Z"
+  );
+}
+
+.activator.north:hover ~ .overlay.north {
+  clip-path: path(
+    "M 0,0 V 400 L 150,300 V 330 L 0,430 V 470 L 150,370 V 415 L 0,515 V 530 L 150,430 300,530 V 515 L 150,415 V 370 L 300,470 V 430 L 150,330 V 300 L 300,400 V 0 Z"
+  );
+}
+
+.activator.northeast:not(:hover) ~ .overlay.northeast {
+  clip-path: path(
+    "M 533.34481,-657.60889 38.370072,-162.63418 391.92348,-91.923523 370.71027,-70.710311 17.156862,-141.42097 -11.127417,-113.1367 342.42599,-42.426041 310.60619,-10.606244 -42.947227,-81.316921 -53.553827,-70.710311 299.99959,3.5836464e-4 370.71027,353.5538 381.31688,342.9472 310.60619,-10.606244 342.42599,-42.426041 413.13666,311.1274 441.42093,282.84313 370.71027,-70.710311 391.92348,-91.923523 462.63414,261.62992 957.60887,-233.34482 Z"
+  );
+}
+
+.activator.northeast:hover ~ .overlay.northeast {
+  clip-path: path(
+    "M 141.4218,-265.68589 -353.55295,229.28884 4.7145283e-4,299.99951 -21.21274,321.21272 -374.76616,250.50205 -403.05043,278.78632 -49.497012,349.49699 -81.316812,381.31679 -434.87023,310.60611 -445.47683,321.21272 -91.923412,391.92339 -21.21274,745.4768 -10.606129,734.8702 -81.316812,381.31679 -49.497012,349.49699 21.21365,703.0504 49.49792,674.76613 -21.21274,321.21272 4.7145283e-4,299.99951 70.711135,653.55292 565.68586,158.57817 Z"
+  );
+}
+
+.activator.east:not(:hover) ~ .overlay.east {
+  clip-path: path(
+    "M 830.00026,300 H 430.00026 L 530.00026,150 H 500.00026 L 400.00026,300 H 360.00026 L 460.00026,150 H 415.00027 L 315.00026,300 H 300.00026 L 400.00026,150 300.00026,-1.05e-6 H 315.00026 L 415.00027,150 H 460.00026 L 360.00026,-1.05e-6 H 400.00026 L 500.00026,150 H 530.00026 L 430.00026,-1.05e-6 H 830.00026 Z"
+  );
+}
+
+.activator.east:hover ~ .overlay.east {
+  clip-path: path(
+    "M 300.00026,300 H -99.999742 L 2.5709591e-4,150 H -29.999742 L -129.99974,300 H -169.99974 L -69.999742,150 H -114.99973 L -214.99974,300 H -229.99974 L -129.99974,150 -229.99974,-1.05e-6 H -214.99974 L -114.99973,150 H -69.999742 L -169.99974,-1.05e-6 H -129.99974 L -29.999742,150 H 2.5709591e-4 L -99.999742,-1.05e-6 H 300.00026 Z"
+  );
+}
+
+.activator.southeast:not(:hover) ~ .overlay.southeast {
+  clip-path: path(
+    "M 957.60886,533.34479 462.63412,38.370053 391.92344,391.92344 370.71023,370.71023 441.42091,17.156843 413.13664,-11.127426 342.42596,342.42597 310.60616,310.60617 381.31684,-42.947227 370.71023,-53.553827 299.99956,299.99957 -53.553827,370.71023 -42.947227,381.31684 310.60616,310.60617 342.42596,342.42597 -11.127426,413.13664 17.156844,441.42091 370.71023,370.71023 391.92344,391.92344 38.370054,462.63412 533.3448,957.60886 Z"
+  );
+}
+
+.activator.southeast:hover ~ .overlay.southeast {
+  clip-path: path(
+    "M 565.68586,141.42179 70.711126,-353.55295 4.4388203e-4,4.4188117e-4 -21.212767,-21.212769 49.497913,-374.76616 21.213643,-403.05043 -49.497037,-49.497039 -81.316837,-81.316839 -10.606157,-434.87023 -21.212767,-445.47683 -91.923437,-91.923439 -445.47683,-21.212769 -434.87023,-10.606159 -81.316837,-81.316839 -49.497037,-49.497039 -403.05043,21.213641 -374.76616,49.497911 -21.212767,-21.212769 4.4388203e-4,4.4188117e-4 -353.55295,70.711126 141.4218,565.68586 Z"
+  );
+}
+
+.activator.south:not(:hover) ~ .overlay.south {
+  clip-path: path(
+    "M 300,830.00026 V 430.00025 L 150,530.00024 V 500.00024 L 300,400.00026 V 360.00026 L 150,460.00025 V 415.00026 L 300,315.00026 V 300.00026 L 150,400.00026 0,300.00026 V 315.00026 L 150,415.00026 V 460.00025 L 0,360.00026 V 400.00026 L 150,500.00024 V 530.00024 L 0,430.00025 V 830.00026 Z"
+  );
+}
+
+.activator.south:hover ~ .overlay.south {
+  clip-path: path(
+    "M 300,300.00026 V -99.999744 L 150,2.4619591e-4 V -29.999752 L 300,-129.99974 V -169.99974 L 150,-69.999748 V -114.99974 L 300,-214.99974 V -229.99974 L 150,-129.99974 0,-229.99974 V -214.99974 L 150,-114.99974 V -69.999748 L 0,-169.99974 V -129.99974 L 150,-29.999752 V 2.4619591e-4 L 0,-99.999744 V 300.00026 Z"
+  );
+}
+
+.activator.southwest:not(:hover) ~ .overlay.southwest {
+  clip-path: path(
+    "M -232.88396,956.31126 261.11342,462.31387 -91.74186,391.74282 -70.570531,370.57149 282.28474,441.14255 310.51317,412.91413 -42.342125,342.34307 -10.585155,310.5861 342.27014,381.15716 352.85579,370.57149 4.952425e-4,300.00045 -70.570531,-52.85483 -81.156201,-42.269173 -10.585155,310.5861 -42.342125,342.34307 -112.91317,-10.512202 -141.14159,17.716219 -70.570531,370.57149 -91.74186,391.74282 -162.31291,38.887542 -656.31029,532.88493 Z"
+  );
+}
+
+.activator.southwest:hover ~ .overlay.southwest {
+  clip-path: path(
+    "M 158.57818,565.68586 653.55292,70.71112 299.99953,4.3666483e-4 321.21274,-21.212773 674.76613,49.497907 703.0504,21.213637 349.49701,-49.497043 381.31681,-81.316843 734.8702,-10.606163 745.4768,-21.212773 391.92341,-91.923443 321.21274,-445.47683 310.60613,-434.87023 381.31681,-81.316843 349.49701,-49.497043 278.78633,-403.05043 250.50206,-374.76616 321.21274,-21.212773 299.99953,4.3666483e-4 229.28884,-353.55295 -265.68589,141.42179 Z"
+  );
+}
+
+.activator.west:not(:hover) ~ .overlay.west {
+  clip-path: path(
+    "M -530,300 H -130 L -230,150 H -200 L -100,300 H -60 L -160,150 H -115 L -15,300 H 0 L -100,150 0,0 H -15 L -115,150 H -160 L -60,0 H -100 L -200,150 H -230 L -130,0 H -530 Z"
+  );
+}
+
+.activator.west:hover ~ .overlay.west {
+  clip-path: path(
+    "M 0,300 H 400 L 300,150 H 330 L 430,300 H 470 L 370,150 H 415 L 515,300 H 530 L 430,150 530,0 H 515 L 415,150 H 370 L 470,0 H 430 L 330,150 H 300 L 400,0 H 0 Z"
+  );
+}
diff --git a/css-only-harry-potter-game-basilisks-and-brooms/README.markdown b/css-only-harry-potter-game-basilisks-and-brooms/README.markdown
new file mode 100644
index 0000000..b7f0e15
--- /dev/null
+++ b/css-only-harry-potter-game-basilisks-and-brooms/README.markdown
@@ -0,0 +1,11 @@
+# CSS only Harry Potter Game: Basilisks and Brooms
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/alvaromontoro/pen/RwLbKwM](https://codepen.io/alvaromontoro/pen/RwLbKwM).
+
+Snakes and Ladders is an ancient Indian board game regarded today as a worldwide classic.
+
+This is a multiplayer version (1-4 players) developed using HTML and CSS without any JavaScript. It is based on the idea of using radio-buttons, and labels to activate the radios, making the pieces move only using CSS positioning.
+
+Older versions:
+- One-player version: https://codepen.io/alvaromontoro/pen/ejzJBJ
+- Simplified two-player version: https://codepen.io/alvaromontoro/details/zLNdZQ/
diff --git a/css-only-harry-potter-game-basilisks-and-brooms/dist/index.html b/css-only-harry-potter-game-basilisks-and-brooms/dist/index.html
new file mode 100644
index 0000000..504965c
--- /dev/null
+++ b/css-only-harry-potter-game-basilisks-and-brooms/dist/index.html
@@ -0,0 +1,1252 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS only Harry Potter Game: Basilisks and Brooms</title>
+  <meta name="monetization" content="$ilp.uphold.com/WUdKN2pAgLAG" />
+<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- checkboxes to control states and variables-->
+<input type="radio" name="players" id="players1" checked="checked" value="1"/>
+<input type="radio" name="players" id="players2" value="2"/>
+<input type="radio" name="players" id="players3" value="3"/>
+<input type="radio" name="players" id="players4" value="4"/>
+<input type="radio" name="turn" id="turn1" checked="checked" value="1"/>
+<input type="radio" name="turn" id="turn2" value="2"/>
+<input type="radio" name="turn" id="turn3" value="3"/>
+<input type="radio" name="turn" id="turn4" value="4"/>
+<input type="radio" name="colors" checked="checked" id="colors1"/>
+<input type="radio" name="colors" id="colors2"/>
+<input type="radio" name="colors" id="colors3"/>
+<input type="radio" name="colors" id="colors4"/>
+<input class="game-time" type="checkbox" id="game-time" name="game-time"/>
+<input type="checkbox" name="show-info" id="show-info"/>
+<input class="game-time" type="radio" id="show-instructions-1" name="show-instructions"/>
+<input class="game-time" type="radio" id="show-instructions-2" name="show-instructions"/>
+<input class="game-time" type="radio" id="show-instructions-3" name="show-instructions"/>
+<input class="game-time" type="radio" id="show-instructions-4" name="show-instructions"/>
+<input class="game-time" type="radio" id="show-instructions-5" name="show-instructions"/>
+<!-- inputs and labels that control the piece position for player 1-->
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-0" checked="checked"/>
+<label class="dice" for="cb-pl1-0"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-1"/>
+<label class="dice" for="cb-pl1-1"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-2"/>
+<label class="dice" for="cb-pl1-2"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-3"/>
+<label class="dice" for="cb-pl1-3"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-4"/>
+<label class="dice" for="cb-pl1-4"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-5"/>
+<label class="dice" for="cb-pl1-5"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-6"/>
+<label class="dice" for="cb-pl1-6"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-7"/>
+<label class="dice" for="cb-pl1-7"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-8"/>
+<label class="dice" for="cb-pl1-8"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-9"/>
+<label class="dice" for="cb-pl1-9"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-10"/>
+<label class="dice" for="cb-pl1-10"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-11"/>
+<label class="dice" for="cb-pl1-11"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-12"/>
+<label class="dice" for="cb-pl1-12"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-13"/>
+<label class="dice" for="cb-pl1-13"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-14"/>
+<label class="dice" for="cb-pl1-14"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-15"/>
+<label class="dice" for="cb-pl1-15"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-16"/>
+<label class="dice" for="cb-pl1-16"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-17"/>
+<label class="dice" for="cb-pl1-17"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-18"/>
+<label class="dice" for="cb-pl1-18"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-19"/>
+<label class="dice" for="cb-pl1-19"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-20"/>
+<label class="dice" for="cb-pl1-20"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-21"/>
+<label class="dice" for="cb-pl1-21"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-22"/>
+<label class="dice" for="cb-pl1-22"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-23"/>
+<label class="dice" for="cb-pl1-23"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-24"/>
+<label class="dice" for="cb-pl1-24"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-25"/>
+<label class="dice" for="cb-pl1-25"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-26"/>
+<label class="dice" for="cb-pl1-26"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-27"/>
+<label class="dice" for="cb-pl1-27"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-28"/>
+<label class="dice" for="cb-pl1-28"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-29"/>
+<label class="dice" for="cb-pl1-29"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-30"/>
+<label class="dice" for="cb-pl1-30"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-31"/>
+<label class="dice" for="cb-pl1-31"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-32"/>
+<label class="dice" for="cb-pl1-32"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-33"/>
+<label class="dice" for="cb-pl1-33"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-34"/>
+<label class="dice" for="cb-pl1-34"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-35"/>
+<label class="dice" for="cb-pl1-35"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-36"/>
+<label class="dice" for="cb-pl1-36"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-37"/>
+<label class="dice" for="cb-pl1-37"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-38"/>
+<label class="dice" for="cb-pl1-38"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-39"/>
+<label class="dice" for="cb-pl1-39"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-40"/>
+<label class="dice" for="cb-pl1-40"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-41"/>
+<label class="dice" for="cb-pl1-41"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-42"/>
+<label class="dice" for="cb-pl1-42"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-43"/>
+<label class="dice" for="cb-pl1-43"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-44"/>
+<label class="dice" for="cb-pl1-44"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-45"/>
+<label class="dice" for="cb-pl1-45"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-46"/>
+<label class="dice" for="cb-pl1-46"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-47"/>
+<label class="dice" for="cb-pl1-47"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-48"/>
+<label class="dice" for="cb-pl1-48"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-49"/>
+<label class="dice" for="cb-pl1-49"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-50"/>
+<label class="dice" for="cb-pl1-50"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-51"/>
+<label class="dice" for="cb-pl1-51"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-52"/>
+<label class="dice" for="cb-pl1-52"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-53"/>
+<label class="dice" for="cb-pl1-53"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-54"/>
+<label class="dice" for="cb-pl1-54"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-55"/>
+<label class="dice" for="cb-pl1-55"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-56"/>
+<label class="dice" for="cb-pl1-56"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-57"/>
+<label class="dice" for="cb-pl1-57"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-58"/>
+<label class="dice" for="cb-pl1-58"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-59"/>
+<label class="dice" for="cb-pl1-59"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-60"/>
+<label class="dice" for="cb-pl1-60"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-61"/>
+<label class="dice" for="cb-pl1-61"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-62"/>
+<label class="dice" for="cb-pl1-62"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-63"/>
+<label class="dice" for="cb-pl1-63"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-64"/>
+<label class="dice" for="cb-pl1-64"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-65"/>
+<label class="dice" for="cb-pl1-65"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-66"/>
+<label class="dice" for="cb-pl1-66"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-67"/>
+<label class="dice" for="cb-pl1-67"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-68"/>
+<label class="dice" for="cb-pl1-68"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-69"/>
+<label class="dice" for="cb-pl1-69"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-70"/>
+<label class="dice" for="cb-pl1-70"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-71"/>
+<label class="dice" for="cb-pl1-71"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-72"/>
+<label class="dice" for="cb-pl1-72"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-73"/>
+<label class="dice" for="cb-pl1-73"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-74"/>
+<label class="dice" for="cb-pl1-74"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-75"/>
+<label class="dice" for="cb-pl1-75"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-76"/>
+<label class="dice" for="cb-pl1-76"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-77"/>
+<label class="dice" for="cb-pl1-77"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-78"/>
+<label class="dice" for="cb-pl1-78"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-79"/>
+<label class="dice" for="cb-pl1-79"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-80"/>
+<label class="dice" for="cb-pl1-80"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-81"/>
+<label class="dice" for="cb-pl1-81"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-82"/>
+<label class="dice" for="cb-pl1-82"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-83"/>
+<label class="dice" for="cb-pl1-83"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-84"/>
+<label class="dice" for="cb-pl1-84"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-85"/>
+<label class="dice" for="cb-pl1-85"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-86"/>
+<label class="dice" for="cb-pl1-86"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-87"/>
+<label class="dice" for="cb-pl1-87"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-88"/>
+<label class="dice" for="cb-pl1-88"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-89"/>
+<label class="dice" for="cb-pl1-89"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-90"/>
+<label class="dice" for="cb-pl1-90"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-91"/>
+<label class="dice" for="cb-pl1-91"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-92"/>
+<label class="dice" for="cb-pl1-92"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-93"/>
+<label class="dice" for="cb-pl1-93"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-94"/>
+<label class="dice" for="cb-pl1-94"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-95"/>
+<label class="dice" for="cb-pl1-95"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-96"/>
+<label class="dice" for="cb-pl1-96"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-97"/>
+<label class="dice" for="cb-pl1-97"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-98"/>
+<label class="dice" for="cb-pl1-98"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-99"/>
+<label class="dice" for="cb-pl1-99"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-100"/>
+<label class="dice" for="cb-pl1-100"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-101"/>
+<label class="dice" for="cb-pl1-101"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-102"/>
+<label class="dice" for="cb-pl1-102"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-103"/>
+<label class="dice" for="cb-pl1-103"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-104"/>
+<label class="dice" for="cb-pl1-104"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-105"/>
+<label class="dice" for="cb-pl1-105"></label>
+<input class="cb" type="radio" name="cb-player1" id="cb-pl1-106"/>
+<label class="dice" for="cb-pl1-106"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-0" checked="checked"/>
+<label class="dice" for="cb-pl2-0"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-1"/>
+<label class="dice" for="cb-pl2-1"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-2"/>
+<label class="dice" for="cb-pl2-2"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-3"/>
+<label class="dice" for="cb-pl2-3"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-4"/>
+<label class="dice" for="cb-pl2-4"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-5"/>
+<label class="dice" for="cb-pl2-5"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-6"/>
+<label class="dice" for="cb-pl2-6"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-7"/>
+<label class="dice" for="cb-pl2-7"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-8"/>
+<label class="dice" for="cb-pl2-8"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-9"/>
+<label class="dice" for="cb-pl2-9"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-10"/>
+<label class="dice" for="cb-pl2-10"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-11"/>
+<label class="dice" for="cb-pl2-11"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-12"/>
+<label class="dice" for="cb-pl2-12"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-13"/>
+<label class="dice" for="cb-pl2-13"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-14"/>
+<label class="dice" for="cb-pl2-14"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-15"/>
+<label class="dice" for="cb-pl2-15"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-16"/>
+<label class="dice" for="cb-pl2-16"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-17"/>
+<label class="dice" for="cb-pl2-17"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-18"/>
+<label class="dice" for="cb-pl2-18"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-19"/>
+<label class="dice" for="cb-pl2-19"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-20"/>
+<label class="dice" for="cb-pl2-20"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-21"/>
+<label class="dice" for="cb-pl2-21"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-22"/>
+<label class="dice" for="cb-pl2-22"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-23"/>
+<label class="dice" for="cb-pl2-23"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-24"/>
+<label class="dice" for="cb-pl2-24"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-25"/>
+<label class="dice" for="cb-pl2-25"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-26"/>
+<label class="dice" for="cb-pl2-26"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-27"/>
+<label class="dice" for="cb-pl2-27"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-28"/>
+<label class="dice" for="cb-pl2-28"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-29"/>
+<label class="dice" for="cb-pl2-29"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-30"/>
+<label class="dice" for="cb-pl2-30"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-31"/>
+<label class="dice" for="cb-pl2-31"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-32"/>
+<label class="dice" for="cb-pl2-32"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-33"/>
+<label class="dice" for="cb-pl2-33"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-34"/>
+<label class="dice" for="cb-pl2-34"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-35"/>
+<label class="dice" for="cb-pl2-35"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-36"/>
+<label class="dice" for="cb-pl2-36"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-37"/>
+<label class="dice" for="cb-pl2-37"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-38"/>
+<label class="dice" for="cb-pl2-38"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-39"/>
+<label class="dice" for="cb-pl2-39"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-40"/>
+<label class="dice" for="cb-pl2-40"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-41"/>
+<label class="dice" for="cb-pl2-41"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-42"/>
+<label class="dice" for="cb-pl2-42"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-43"/>
+<label class="dice" for="cb-pl2-43"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-44"/>
+<label class="dice" for="cb-pl2-44"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-45"/>
+<label class="dice" for="cb-pl2-45"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-46"/>
+<label class="dice" for="cb-pl2-46"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-47"/>
+<label class="dice" for="cb-pl2-47"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-48"/>
+<label class="dice" for="cb-pl2-48"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-49"/>
+<label class="dice" for="cb-pl2-49"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-50"/>
+<label class="dice" for="cb-pl2-50"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-51"/>
+<label class="dice" for="cb-pl2-51"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-52"/>
+<label class="dice" for="cb-pl2-52"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-53"/>
+<label class="dice" for="cb-pl2-53"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-54"/>
+<label class="dice" for="cb-pl2-54"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-55"/>
+<label class="dice" for="cb-pl2-55"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-56"/>
+<label class="dice" for="cb-pl2-56"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-57"/>
+<label class="dice" for="cb-pl2-57"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-58"/>
+<label class="dice" for="cb-pl2-58"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-59"/>
+<label class="dice" for="cb-pl2-59"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-60"/>
+<label class="dice" for="cb-pl2-60"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-61"/>
+<label class="dice" for="cb-pl2-61"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-62"/>
+<label class="dice" for="cb-pl2-62"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-63"/>
+<label class="dice" for="cb-pl2-63"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-64"/>
+<label class="dice" for="cb-pl2-64"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-65"/>
+<label class="dice" for="cb-pl2-65"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-66"/>
+<label class="dice" for="cb-pl2-66"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-67"/>
+<label class="dice" for="cb-pl2-67"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-68"/>
+<label class="dice" for="cb-pl2-68"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-69"/>
+<label class="dice" for="cb-pl2-69"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-70"/>
+<label class="dice" for="cb-pl2-70"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-71"/>
+<label class="dice" for="cb-pl2-71"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-72"/>
+<label class="dice" for="cb-pl2-72"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-73"/>
+<label class="dice" for="cb-pl2-73"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-74"/>
+<label class="dice" for="cb-pl2-74"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-75"/>
+<label class="dice" for="cb-pl2-75"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-76"/>
+<label class="dice" for="cb-pl2-76"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-77"/>
+<label class="dice" for="cb-pl2-77"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-78"/>
+<label class="dice" for="cb-pl2-78"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-79"/>
+<label class="dice" for="cb-pl2-79"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-80"/>
+<label class="dice" for="cb-pl2-80"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-81"/>
+<label class="dice" for="cb-pl2-81"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-82"/>
+<label class="dice" for="cb-pl2-82"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-83"/>
+<label class="dice" for="cb-pl2-83"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-84"/>
+<label class="dice" for="cb-pl2-84"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-85"/>
+<label class="dice" for="cb-pl2-85"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-86"/>
+<label class="dice" for="cb-pl2-86"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-87"/>
+<label class="dice" for="cb-pl2-87"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-88"/>
+<label class="dice" for="cb-pl2-88"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-89"/>
+<label class="dice" for="cb-pl2-89"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-90"/>
+<label class="dice" for="cb-pl2-90"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-91"/>
+<label class="dice" for="cb-pl2-91"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-92"/>
+<label class="dice" for="cb-pl2-92"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-93"/>
+<label class="dice" for="cb-pl2-93"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-94"/>
+<label class="dice" for="cb-pl2-94"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-95"/>
+<label class="dice" for="cb-pl2-95"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-96"/>
+<label class="dice" for="cb-pl2-96"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-97"/>
+<label class="dice" for="cb-pl2-97"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-98"/>
+<label class="dice" for="cb-pl2-98"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-99"/>
+<label class="dice" for="cb-pl2-99"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-100"/>
+<label class="dice" for="cb-pl2-100"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-101"/>
+<label class="dice" for="cb-pl2-101"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-102"/>
+<label class="dice" for="cb-pl2-102"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-103"/>
+<label class="dice" for="cb-pl2-103"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-104"/>
+<label class="dice" for="cb-pl2-104"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-105"/>
+<label class="dice" for="cb-pl2-105"></label>
+<input class="cb" type="radio" name="cb-player2" id="cb-pl2-106"/>
+<label class="dice" for="cb-pl2-106"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-0" checked="checked"/>
+<label class="dice" for="cb-pl3-0"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-1"/>
+<label class="dice" for="cb-pl3-1"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-2"/>
+<label class="dice" for="cb-pl3-2"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-3"/>
+<label class="dice" for="cb-pl3-3"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-4"/>
+<label class="dice" for="cb-pl3-4"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-5"/>
+<label class="dice" for="cb-pl3-5"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-6"/>
+<label class="dice" for="cb-pl3-6"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-7"/>
+<label class="dice" for="cb-pl3-7"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-8"/>
+<label class="dice" for="cb-pl3-8"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-9"/>
+<label class="dice" for="cb-pl3-9"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-10"/>
+<label class="dice" for="cb-pl3-10"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-11"/>
+<label class="dice" for="cb-pl3-11"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-12"/>
+<label class="dice" for="cb-pl3-12"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-13"/>
+<label class="dice" for="cb-pl3-13"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-14"/>
+<label class="dice" for="cb-pl3-14"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-15"/>
+<label class="dice" for="cb-pl3-15"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-16"/>
+<label class="dice" for="cb-pl3-16"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-17"/>
+<label class="dice" for="cb-pl3-17"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-18"/>
+<label class="dice" for="cb-pl3-18"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-19"/>
+<label class="dice" for="cb-pl3-19"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-20"/>
+<label class="dice" for="cb-pl3-20"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-21"/>
+<label class="dice" for="cb-pl3-21"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-22"/>
+<label class="dice" for="cb-pl3-22"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-23"/>
+<label class="dice" for="cb-pl3-23"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-24"/>
+<label class="dice" for="cb-pl3-24"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-25"/>
+<label class="dice" for="cb-pl3-25"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-26"/>
+<label class="dice" for="cb-pl3-26"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-27"/>
+<label class="dice" for="cb-pl3-27"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-28"/>
+<label class="dice" for="cb-pl3-28"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-29"/>
+<label class="dice" for="cb-pl3-29"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-30"/>
+<label class="dice" for="cb-pl3-30"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-31"/>
+<label class="dice" for="cb-pl3-31"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-32"/>
+<label class="dice" for="cb-pl3-32"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-33"/>
+<label class="dice" for="cb-pl3-33"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-34"/>
+<label class="dice" for="cb-pl3-34"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-35"/>
+<label class="dice" for="cb-pl3-35"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-36"/>
+<label class="dice" for="cb-pl3-36"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-37"/>
+<label class="dice" for="cb-pl3-37"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-38"/>
+<label class="dice" for="cb-pl3-38"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-39"/>
+<label class="dice" for="cb-pl3-39"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-40"/>
+<label class="dice" for="cb-pl3-40"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-41"/>
+<label class="dice" for="cb-pl3-41"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-42"/>
+<label class="dice" for="cb-pl3-42"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-43"/>
+<label class="dice" for="cb-pl3-43"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-44"/>
+<label class="dice" for="cb-pl3-44"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-45"/>
+<label class="dice" for="cb-pl3-45"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-46"/>
+<label class="dice" for="cb-pl3-46"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-47"/>
+<label class="dice" for="cb-pl3-47"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-48"/>
+<label class="dice" for="cb-pl3-48"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-49"/>
+<label class="dice" for="cb-pl3-49"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-50"/>
+<label class="dice" for="cb-pl3-50"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-51"/>
+<label class="dice" for="cb-pl3-51"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-52"/>
+<label class="dice" for="cb-pl3-52"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-53"/>
+<label class="dice" for="cb-pl3-53"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-54"/>
+<label class="dice" for="cb-pl3-54"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-55"/>
+<label class="dice" for="cb-pl3-55"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-56"/>
+<label class="dice" for="cb-pl3-56"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-57"/>
+<label class="dice" for="cb-pl3-57"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-58"/>
+<label class="dice" for="cb-pl3-58"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-59"/>
+<label class="dice" for="cb-pl3-59"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-60"/>
+<label class="dice" for="cb-pl3-60"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-61"/>
+<label class="dice" for="cb-pl3-61"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-62"/>
+<label class="dice" for="cb-pl3-62"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-63"/>
+<label class="dice" for="cb-pl3-63"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-64"/>
+<label class="dice" for="cb-pl3-64"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-65"/>
+<label class="dice" for="cb-pl3-65"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-66"/>
+<label class="dice" for="cb-pl3-66"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-67"/>
+<label class="dice" for="cb-pl3-67"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-68"/>
+<label class="dice" for="cb-pl3-68"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-69"/>
+<label class="dice" for="cb-pl3-69"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-70"/>
+<label class="dice" for="cb-pl3-70"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-71"/>
+<label class="dice" for="cb-pl3-71"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-72"/>
+<label class="dice" for="cb-pl3-72"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-73"/>
+<label class="dice" for="cb-pl3-73"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-74"/>
+<label class="dice" for="cb-pl3-74"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-75"/>
+<label class="dice" for="cb-pl3-75"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-76"/>
+<label class="dice" for="cb-pl3-76"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-77"/>
+<label class="dice" for="cb-pl3-77"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-78"/>
+<label class="dice" for="cb-pl3-78"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-79"/>
+<label class="dice" for="cb-pl3-79"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-80"/>
+<label class="dice" for="cb-pl3-80"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-81"/>
+<label class="dice" for="cb-pl3-81"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-82"/>
+<label class="dice" for="cb-pl3-82"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-83"/>
+<label class="dice" for="cb-pl3-83"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-84"/>
+<label class="dice" for="cb-pl3-84"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-85"/>
+<label class="dice" for="cb-pl3-85"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-86"/>
+<label class="dice" for="cb-pl3-86"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-87"/>
+<label class="dice" for="cb-pl3-87"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-88"/>
+<label class="dice" for="cb-pl3-88"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-89"/>
+<label class="dice" for="cb-pl3-89"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-90"/>
+<label class="dice" for="cb-pl3-90"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-91"/>
+<label class="dice" for="cb-pl3-91"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-92"/>
+<label class="dice" for="cb-pl3-92"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-93"/>
+<label class="dice" for="cb-pl3-93"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-94"/>
+<label class="dice" for="cb-pl3-94"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-95"/>
+<label class="dice" for="cb-pl3-95"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-96"/>
+<label class="dice" for="cb-pl3-96"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-97"/>
+<label class="dice" for="cb-pl3-97"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-98"/>
+<label class="dice" for="cb-pl3-98"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-99"/>
+<label class="dice" for="cb-pl3-99"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-100"/>
+<label class="dice" for="cb-pl3-100"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-101"/>
+<label class="dice" for="cb-pl3-101"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-102"/>
+<label class="dice" for="cb-pl3-102"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-103"/>
+<label class="dice" for="cb-pl3-103"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-104"/>
+<label class="dice" for="cb-pl3-104"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-105"/>
+<label class="dice" for="cb-pl3-105"></label>
+<input class="cb" type="radio" name="cb-player3" id="cb-pl3-106"/>
+<label class="dice" for="cb-pl3-106"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-0" checked="checked"/>
+<label class="dice" for="cb-pl4-0"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-1"/>
+<label class="dice" for="cb-pl4-1"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-2"/>
+<label class="dice" for="cb-pl4-2"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-3"/>
+<label class="dice" for="cb-pl4-3"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-4"/>
+<label class="dice" for="cb-pl4-4"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-5"/>
+<label class="dice" for="cb-pl4-5"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-6"/>
+<label class="dice" for="cb-pl4-6"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-7"/>
+<label class="dice" for="cb-pl4-7"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-8"/>
+<label class="dice" for="cb-pl4-8"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-9"/>
+<label class="dice" for="cb-pl4-9"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-10"/>
+<label class="dice" for="cb-pl4-10"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-11"/>
+<label class="dice" for="cb-pl4-11"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-12"/>
+<label class="dice" for="cb-pl4-12"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-13"/>
+<label class="dice" for="cb-pl4-13"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-14"/>
+<label class="dice" for="cb-pl4-14"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-15"/>
+<label class="dice" for="cb-pl4-15"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-16"/>
+<label class="dice" for="cb-pl4-16"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-17"/>
+<label class="dice" for="cb-pl4-17"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-18"/>
+<label class="dice" for="cb-pl4-18"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-19"/>
+<label class="dice" for="cb-pl4-19"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-20"/>
+<label class="dice" for="cb-pl4-20"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-21"/>
+<label class="dice" for="cb-pl4-21"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-22"/>
+<label class="dice" for="cb-pl4-22"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-23"/>
+<label class="dice" for="cb-pl4-23"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-24"/>
+<label class="dice" for="cb-pl4-24"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-25"/>
+<label class="dice" for="cb-pl4-25"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-26"/>
+<label class="dice" for="cb-pl4-26"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-27"/>
+<label class="dice" for="cb-pl4-27"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-28"/>
+<label class="dice" for="cb-pl4-28"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-29"/>
+<label class="dice" for="cb-pl4-29"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-30"/>
+<label class="dice" for="cb-pl4-30"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-31"/>
+<label class="dice" for="cb-pl4-31"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-32"/>
+<label class="dice" for="cb-pl4-32"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-33"/>
+<label class="dice" for="cb-pl4-33"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-34"/>
+<label class="dice" for="cb-pl4-34"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-35"/>
+<label class="dice" for="cb-pl4-35"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-36"/>
+<label class="dice" for="cb-pl4-36"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-37"/>
+<label class="dice" for="cb-pl4-37"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-38"/>
+<label class="dice" for="cb-pl4-38"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-39"/>
+<label class="dice" for="cb-pl4-39"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-40"/>
+<label class="dice" for="cb-pl4-40"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-41"/>
+<label class="dice" for="cb-pl4-41"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-42"/>
+<label class="dice" for="cb-pl4-42"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-43"/>
+<label class="dice" for="cb-pl4-43"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-44"/>
+<label class="dice" for="cb-pl4-44"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-45"/>
+<label class="dice" for="cb-pl4-45"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-46"/>
+<label class="dice" for="cb-pl4-46"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-47"/>
+<label class="dice" for="cb-pl4-47"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-48"/>
+<label class="dice" for="cb-pl4-48"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-49"/>
+<label class="dice" for="cb-pl4-49"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-50"/>
+<label class="dice" for="cb-pl4-50"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-51"/>
+<label class="dice" for="cb-pl4-51"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-52"/>
+<label class="dice" for="cb-pl4-52"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-53"/>
+<label class="dice" for="cb-pl4-53"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-54"/>
+<label class="dice" for="cb-pl4-54"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-55"/>
+<label class="dice" for="cb-pl4-55"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-56"/>
+<label class="dice" for="cb-pl4-56"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-57"/>
+<label class="dice" for="cb-pl4-57"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-58"/>
+<label class="dice" for="cb-pl4-58"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-59"/>
+<label class="dice" for="cb-pl4-59"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-60"/>
+<label class="dice" for="cb-pl4-60"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-61"/>
+<label class="dice" for="cb-pl4-61"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-62"/>
+<label class="dice" for="cb-pl4-62"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-63"/>
+<label class="dice" for="cb-pl4-63"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-64"/>
+<label class="dice" for="cb-pl4-64"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-65"/>
+<label class="dice" for="cb-pl4-65"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-66"/>
+<label class="dice" for="cb-pl4-66"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-67"/>
+<label class="dice" for="cb-pl4-67"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-68"/>
+<label class="dice" for="cb-pl4-68"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-69"/>
+<label class="dice" for="cb-pl4-69"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-70"/>
+<label class="dice" for="cb-pl4-70"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-71"/>
+<label class="dice" for="cb-pl4-71"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-72"/>
+<label class="dice" for="cb-pl4-72"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-73"/>
+<label class="dice" for="cb-pl4-73"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-74"/>
+<label class="dice" for="cb-pl4-74"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-75"/>
+<label class="dice" for="cb-pl4-75"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-76"/>
+<label class="dice" for="cb-pl4-76"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-77"/>
+<label class="dice" for="cb-pl4-77"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-78"/>
+<label class="dice" for="cb-pl4-78"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-79"/>
+<label class="dice" for="cb-pl4-79"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-80"/>
+<label class="dice" for="cb-pl4-80"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-81"/>
+<label class="dice" for="cb-pl4-81"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-82"/>
+<label class="dice" for="cb-pl4-82"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-83"/>
+<label class="dice" for="cb-pl4-83"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-84"/>
+<label class="dice" for="cb-pl4-84"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-85"/>
+<label class="dice" for="cb-pl4-85"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-86"/>
+<label class="dice" for="cb-pl4-86"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-87"/>
+<label class="dice" for="cb-pl4-87"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-88"/>
+<label class="dice" for="cb-pl4-88"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-89"/>
+<label class="dice" for="cb-pl4-89"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-90"/>
+<label class="dice" for="cb-pl4-90"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-91"/>
+<label class="dice" for="cb-pl4-91"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-92"/>
+<label class="dice" for="cb-pl4-92"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-93"/>
+<label class="dice" for="cb-pl4-93"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-94"/>
+<label class="dice" for="cb-pl4-94"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-95"/>
+<label class="dice" for="cb-pl4-95"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-96"/>
+<label class="dice" for="cb-pl4-96"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-97"/>
+<label class="dice" for="cb-pl4-97"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-98"/>
+<label class="dice" for="cb-pl4-98"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-99"/>
+<label class="dice" for="cb-pl4-99"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-100"/>
+<label class="dice" for="cb-pl4-100"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-101"/>
+<label class="dice" for="cb-pl4-101"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-102"/>
+<label class="dice" for="cb-pl4-102"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-103"/>
+<label class="dice" for="cb-pl4-103"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-104"/>
+<label class="dice" for="cb-pl4-104"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-105"/>
+<label class="dice" for="cb-pl4-105"></label>
+<input class="cb" type="radio" name="cb-player4" id="cb-pl4-106"/>
+<label class="dice" for="cb-pl4-106"></label>
+<!-- game settings menu (# of players, colors) -->
+<div class="scrim" id="options">
+  <div class="box">
+    <h1>Harry Potter CSS Game</h1>
+    <div>
+      <h2>Number of players</h2>
+      <div class="flex option-players">
+        <label for="players1">1</label>
+        <label for="players2">2</label>
+        <label for="players3">3</label>
+        <label for="players4">4</label>
+      </div>
+      <h2>Characters</h2>
+      <div class="option-colors">
+        <label class="flex" for="colors1"><span></span><span></span><span></span><span></span><span></span></label>
+        <label class="flex" for="colors2"><span></span><span></span><span></span><span></span><span></span></label>
+        <label class="flex" for="colors3"><span></span><span></span><span></span><span></span><span></span></label>
+        <label class="flex" for="colors4"><span></span><span></span><span></span><span></span><span></span></label>
+      </div>
+      <div>
+        <label class="option-start" for="show-instructions-1">START GAME</label>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- pop-up with information about the game and the author-->
+<div class="scrim" id="info">
+  <div class="box">
+    <h1>About</h1>
+    <div>
+      <p>This Harry Potter game is based on Snakes and Ladders, an ancient Indian board game regarded today as a worldwide classic. The ladders have been replaced with flying brooms and the snakes are basilisks. The object of the game is to navigate one's game piece, according to die rolls, from the start (bottom square) to the finish (top square), helped or hindered by brooms and basilisks respectively.<sup><a href="https://en.wikipedia.org/wiki/Snakes_and_Ladders" target="_blank">[1]</a></sup></p>
+      <p>This version was developed by <a href="https://alvaromontoro.com" target="_blank">Alvaro Montoro </a>using HTML and CSS, to practice Pug and Sass (for simplicity, they compile to standard HTML and CSS), and without any line of JavaScript code.</p>
+      <p>The idea behind this project is that many classic board games are actually Finite-State Machines (FSM), so they can be recreated simulating the states of the automaton with radio buttons, labels, and some CSS styling.</p>
+      <p>
+        <label id="close-button" for="show-info">Close</label>
+      </p>
+    </div>
+  </div>
+</div>
+<!-- animated instructions section-->
+<div id="instructions">
+  <label id="go-to-game" for="game-time">SKIP INSTRUCTIONS &rsaquo;</label>
+  <div id="step">
+    <div> 
+      <label for="show-instructions-2"></label>
+      <label for="show-instructions-3"></label>
+      <label for="show-instructions-4"></label>
+      <label for="show-instructions-5"></label>
+      <label for="game-time">PLAY &rsaquo;</label>
+    </div>
+  </div>
+</div>
+<!-- the game section: board, dice, snakes, ladders, and all that jazz...-->
+<div id="game">
+  <div class="tab" id="player-info"><span>Player</span></div>
+  <div class="tab" id="action">
+    <label id="turn-changer1" for="turn1"></label>
+    <label id="turn-changer2" for="turn2"></label>
+    <label id="turn-changer3" for="turn3"></label>
+    <label id="turn-changer4" for="turn4"></label>
+  </div>
+  <label class="tab" id="more-info" for="show-info"></label>
+  <!-- Board based on the one from codewars: https://www.codewars.com/kata/snakes-and-ladders-1 -->
+  <div id="board">
+    <div class="tile tile100" data-index="100"></div>
+    <div class="tile tile99" data-index="99"></div>
+    <div class="tile tile98" data-index="98"></div>
+    <div class="tile tile97" data-index="97"></div>
+    <div class="tile tile96" data-index="96"></div>
+    <div class="tile tile95" data-index="95"></div>
+    <div class="tile tile94" data-index="94"></div>
+    <div class="tile tile93" data-index="93"></div>
+    <div class="tile tile92" data-index="92"></div>
+    <div class="tile tile91" data-index="91"></div>
+    <div class="tile tile81" data-index="81"></div>
+    <div class="tile tile82" data-index="82"></div>
+    <div class="tile tile83" data-index="83"></div>
+    <div class="tile tile84" data-index="84"></div>
+    <div class="tile tile85" data-index="85"></div>
+    <div class="tile tile86" data-index="86"></div>
+    <div class="tile tile87" data-index="87"></div>
+    <div class="tile tile88" data-index="88"></div>
+    <div class="tile tile89" data-index="89"></div>
+    <div class="tile tile90" data-index="90"></div>
+    <div class="tile tile80" data-index="80"></div>
+    <div class="tile tile79" data-index="79"></div>
+    <div class="tile tile78" data-index="78"></div>
+    <div class="tile tile77" data-index="77"></div>
+    <div class="tile tile76" data-index="76"></div>
+    <div class="tile tile75" data-index="75"></div>
+    <div class="tile tile74" data-index="74"></div>
+    <div class="tile tile73" data-index="73"></div>
+    <div class="tile tile72" data-index="72"></div>
+    <div class="tile tile71" data-index="71"></div>
+    <div class="tile tile61" data-index="61"></div>
+    <div class="tile tile62" data-index="62"></div>
+    <div class="tile tile63" data-index="63"></div>
+    <div class="tile tile64" data-index="64"></div>
+    <div class="tile tile65" data-index="65"></div>
+    <div class="tile tile66" data-index="66"></div>
+    <div class="tile tile67" data-index="67"></div>
+    <div class="tile tile68" data-index="68"></div>
+    <div class="tile tile69" data-index="69"></div>
+    <div class="tile tile70" data-index="70"></div>
+    <div class="tile tile60" data-index="60"></div>
+    <div class="tile tile59" data-index="59"></div>
+    <div class="tile tile58" data-index="58"></div>
+    <div class="tile tile57" data-index="57"></div>
+    <div class="tile tile56" data-index="56"></div>
+    <div class="tile tile55" data-index="55"></div>
+    <div class="tile tile54" data-index="54"></div>
+    <div class="tile tile53" data-index="53"></div>
+    <div class="tile tile52" data-index="52"></div>
+    <div class="tile tile51" data-index="51"></div>
+    <div class="tile tile41" data-index="41"></div>
+    <div class="tile tile42" data-index="42"></div>
+    <div class="tile tile43" data-index="43"></div>
+    <div class="tile tile44" data-index="44"></div>
+    <div class="tile tile45" data-index="45"></div>
+    <div class="tile tile46" data-index="46"></div>
+    <div class="tile tile47" data-index="47"></div>
+    <div class="tile tile48" data-index="48"></div>
+    <div class="tile tile49" data-index="49"></div>
+    <div class="tile tile50" data-index="50"></div>
+    <div class="tile tile40" data-index="40"></div>
+    <div class="tile tile39" data-index="39"></div>
+    <div class="tile tile38" data-index="38"></div>
+    <div class="tile tile37" data-index="37"></div>
+    <div class="tile tile36" data-index="36"></div>
+    <div class="tile tile35" data-index="35"></div>
+    <div class="tile tile34" data-index="34"></div>
+    <div class="tile tile33" data-index="33"></div>
+    <div class="tile tile32" data-index="32"></div>
+    <div class="tile tile31" data-index="31"></div>
+    <div class="tile tile21" data-index="21"></div>
+    <div class="tile tile22" data-index="22"></div>
+    <div class="tile tile23" data-index="23"></div>
+    <div class="tile tile24" data-index="24"></div>
+    <div class="tile tile25" data-index="25"></div>
+    <div class="tile tile26" data-index="26"></div>
+    <div class="tile tile27" data-index="27"></div>
+    <div class="tile tile28" data-index="28"></div>
+    <div class="tile tile29" data-index="29"></div>
+    <div class="tile tile30" data-index="30"></div>
+    <div class="tile tile20" data-index="20"></div>
+    <div class="tile tile19" data-index="19"></div>
+    <div class="tile tile18" data-index="18"></div>
+    <div class="tile tile17" data-index="17"></div>
+    <div class="tile tile16" data-index="16"></div>
+    <div class="tile tile15" data-index="15"></div>
+    <div class="tile tile14" data-index="14"></div>
+    <div class="tile tile13" data-index="13"></div>
+    <div class="tile tile12" data-index="12"></div>
+    <div class="tile tile11" data-index="11"></div>
+    <div class="tile tile1" data-index="1"></div>
+    <div class="tile tile2" data-index="2"></div>
+    <div class="tile tile3" data-index="3"></div>
+    <div class="tile tile4" data-index="4"></div>
+    <div class="tile tile5" data-index="5"></div>
+    <div class="tile tile6" data-index="6"></div>
+    <div class="tile tile7" data-index="7"></div>
+    <div class="tile tile8" data-index="8"></div>
+    <div class="tile tile9" data-index="9"></div>
+    <div class="tile tile10" data-index="10"></div>
+    <svg id="snakeladders" viewBox="0 0 600 600" preserveAspectRatio="none">
+      <g class="ladders-big">
+        <path d="M89,574 140,392 M388,581 385,508 M449,552 554,395 M320,516 333,444 M24,436 74,329 M430,458 210,99  M264,393 214,339  M563,284 391,203 M570,149 559,31 M142,158 155,40 M397,101 379,30"></path>
+      </g>
+      <g class="ladders-small">
+        <path d="M88,567 94,585 M91.5,568 87,584 M90,569 80,584 M94,568 77,583 M90,569 83,586 M90,569 91,587         M384,575 396,589 M388,575 391.5,590 M388,575 388,592 M387,575 385,591 M392,575 381,590         M450,546 450,565 M452,546 446,564 M452,546 442,562 M455,546 438,561 M456,548 436,558         M318,510 325,528 M322,510 320,529 M322,510 316,529 M322,510 312,528 M325,510 308,527         M263,387 266,405 M259,388 273,407 M259,388 278,406 M257,392 287,405         M24,430 27,456 M27,430 23,455 M26,430 18,456 M27,431 12,454 M30,431 8,451 M26,431 15,453         M423,454 444,467 M427,453 438,470 M427,453 443,471 M427,453 436,472 M431,453 432,473         M140,152 150,170 M143,152 145,171 M143,152 141,170 M142,152 137,171 M146,152 133,170         M393,95 408,112 M396,95 404,113 M396,95 400,115 M396,95 396,114.5 M399,95 393,112         M567,143 580,162 M570,143 576,164 M569,143 572,163 M569,143 569,165 M572,143 565,164         M555,283 577,280 M556,282 579,284 M556,282 576,288 M555,282 577,292 M556,277 571.6,295"></path>
+      </g>
+      <path d="M20,42 28,42 28,35 32,35 32,42 40,42 40,32 45,32 30,20 15,32 20,32 Z M20,578 30,578 30,583 40,570 30,557 30,562 20, 562Z" fill="rgba(0,0,0,0.25)"></path>
+      <path class="snake" d="M 90,226 C 98,257 69,322 128,332 187,342 181,381 120,382 59,383 53,425 54,433 56,450 87,467 87,481 87,495 76,506 76,512 84,505 95,496 96,480 97,464 60,447 64,425 68,403 99,392 134,391 169,390 219,344 131,322 94,313 100,279 101,256 102,233 101,229 100,225 105,223.62 106,214 96,210 86,205 65.75,211 83,223 85.88,225 88,226 90,226 Z" fill="#73880A"></path>
+      <circle class="eye" cx="97" cy="212" r="5"></circle>
+      <path class="snake" d="M 22,282 C 35,271 58,266 81,273 104,280 144,278 145,253 146,228 175,208 193,213 204,198 220,210 220,216 220,222 201,229 193,221 182,222 157,229 156,252 155,275 139,297 86,281 33,268 22,283 22,283 Z" fill="#D15600"></path>
+      <circle class="eye" cx="203" cy="210" r="5"></circle>
+      <path class="snake" d="M 453,271 C 433,285 396,289 400,261 405,233 394,223 369,223 343,224 319,167 376,161 379,168 401,168 402,156 403,143 376,143 375,152 300,162 333,233 366,233 402,233 388,258 389,266 390,281 414,309 453,272 Z" fill="#6BBA70"></path>
+      <circle class="eye" cx="387" cy="148" r="5"></circle>
+      <path class="snake" d="M 457,199 C 429,161 465,134 489,158 512,182 542,159 540,129 538,99 523,98 522,98 528,91 505,75 495,97 503,113 518,105 519,105 519,105 530,110 531,130 532,150 513,169 492,149 471,129 445,143 443,159 442,174 449,194 457,200 Z" fill="#C79810"></path>
+      <circle class="eye" cx="512" cy="90" r="5"></circle>
+      <path class="snake" d="M 441,95 C 457,93 479,72 445,52 415,33 434,16 451,16 468,16 489,39 492,40 495,28 521,33 521,43 521,54 496,54 490,48 490,48 466,23 450,25 434,27 439,43 459,51 479,61 473,101 441,96 Z" fill="#356AA0"></path>
+      <circle class="eye" cx="504" cy="35" r="5"></circle>
+      <path class="snake" d="M 278,457 C 291,438 262,428 247,444 230,464 193,450 231,420 256,400 300,425 335,395 349,381 334,338 334,338 334,338 348,325 325,324 301,322 306,341 326,340 334,358 346,401 285,401 231,401 205,416 205,446 206,472 244,462 250,452 258,441 281,435 278,458 Z" fill="#3F4C6B"></path>
+      <circle class="eye" cx="327" cy="325" r="5"></circle>
+      <path class="snake" d="M 343,584 C 352,567 344,553 320,553 296,553 286,562 279,568 272,573 238,592 238,558 237,524 253,517 253,517 253,517 270,517 270,509 270,498 238,501 247,514 227,537 230,556 230,561 229,567 239,605 281,575 324,544 349,562 343,585 Z" fill="#008C00"></path>
+      <circle class="eye" cx="257" cy="503" r="5"></circle>
+      <path class="snake" d="M 572,506 C 555,514 511,516 518,456 526,396 518,380 490,388 457,397 436,346 492,335 507,341 518,334 518,326 518,317 494,313 489,326 422,337 448,410 489,398 525,384 510,449 510,456 510,462 502,547 572,508 Z" fill="#D01F3C"></path>
+      <circle class="eye" cx="503" cy="320" r="5"></circle>
+      <path class="snake" d="M 19,138 C 45,154 84,152 63,119 43,87 59,85 79,84 99,83 103,77 94,40 85,46 73,39 72,32 72,25 109,13 102,35 117,69 108,100 79,94 52,88 70,114 73,118 82,127 83,190 18,138 Z" fill="#2096cE"></path>
+      <circle class="eye" cx="89" cy="27" r="5"></circle>
+      <path class="snake" d="M 322,152 C 302,168 282,153 285,137 287,120 287,121 275,110 263,99 295,79 291,62 287,45 297,30 318,38 324,51 346,48 346,39 347,30 327,20 320,31 295,18 274,33 280,57 286,82 252,86 262,111 265,118 280,122 275,137 271,148 291,185 322,154 Z" fill="#CC4444"></path>
+      <circle class="eye" cx="330" cy="30" r="5"></circle>
+    </svg>
+    <div class="piece" id="piece-player-1" viewBox="0 0 100 100"></div>
+    <div class="piece" id="piece-player-2" viewBox="0 0 100 100"></div>
+    <div class="piece" id="piece-player-3" viewBox="0 0 100 100"></div>
+    <div class="piece" id="piece-player-4" viewBox="0 0 100 100"></div>
+  </div>
+</div>
+<div class="scrim" id="snake-popup"> 
+  <div class="box">
+    <h1>Basilisk!</h1>
+    <div>Oh no! You were attacked by a monster from the Chamber of Secrets! You'll have to move your piece to the basilisk's tail.
+      <div>
+        <label id="snake-pl1-16" for="cb-pl1-6">Move Down</label>
+        <label id="snake-pl1-46" for="cb-pl1-25">Move Down</label>
+        <label id="snake-pl1-49" for="cb-pl1-11">Move Down</label>
+        <label id="snake-pl1-62" for="cb-pl1-19">Move Down</label>
+        <label id="snake-pl1-64" for="cb-pl1-60">Move Down</label>
+        <label id="snake-pl1-74" for="cb-pl1-53">Move Down</label>
+        <label id="snake-pl1-89" for="cb-pl1-68">Move Down</label>
+        <label id="snake-pl1-92" for="cb-pl1-88">Move Down</label>
+        <label id="snake-pl1-95" for="cb-pl1-75">Move Down</label>
+        <label id="snake-pl1-99" for="cb-pl1-80">Move Down</label>
+        <label id="snake-pl2-16" for="cb-pl2-6">Move Down</label>
+        <label id="snake-pl2-46" for="cb-pl2-25">Move Down</label>
+        <label id="snake-pl2-49" for="cb-pl2-11">Move Down</label>
+        <label id="snake-pl2-62" for="cb-pl2-19">Move Down</label>
+        <label id="snake-pl2-64" for="cb-pl2-60">Move Down</label>
+        <label id="snake-pl2-74" for="cb-pl2-53">Move Down</label>
+        <label id="snake-pl2-89" for="cb-pl2-68">Move Down</label>
+        <label id="snake-pl2-92" for="cb-pl2-88">Move Down</label>
+        <label id="snake-pl2-95" for="cb-pl2-75">Move Down</label>
+        <label id="snake-pl2-99" for="cb-pl2-80">Move Down</label>
+        <label id="snake-pl3-16" for="cb-pl3-6">Move Down</label>
+        <label id="snake-pl3-46" for="cb-pl3-25">Move Down</label>
+        <label id="snake-pl3-49" for="cb-pl3-11">Move Down</label>
+        <label id="snake-pl3-62" for="cb-pl3-19">Move Down</label>
+        <label id="snake-pl3-64" for="cb-pl3-60">Move Down</label>
+        <label id="snake-pl3-74" for="cb-pl3-53">Move Down</label>
+        <label id="snake-pl3-89" for="cb-pl3-68">Move Down</label>
+        <label id="snake-pl3-92" for="cb-pl3-88">Move Down</label>
+        <label id="snake-pl3-95" for="cb-pl3-75">Move Down</label>
+        <label id="snake-pl3-99" for="cb-pl3-80">Move Down</label>
+        <label id="snake-pl4-16" for="cb-pl4-6">Move Down</label>
+        <label id="snake-pl4-46" for="cb-pl4-25">Move Down</label>
+        <label id="snake-pl4-49" for="cb-pl4-11">Move Down</label>
+        <label id="snake-pl4-62" for="cb-pl4-19">Move Down</label>
+        <label id="snake-pl4-64" for="cb-pl4-60">Move Down</label>
+        <label id="snake-pl4-74" for="cb-pl4-53">Move Down</label>
+        <label id="snake-pl4-89" for="cb-pl4-68">Move Down</label>
+        <label id="snake-pl4-92" for="cb-pl4-88">Move Down</label>
+        <label id="snake-pl4-95" for="cb-pl4-75">Move Down</label>
+        <label id="snake-pl4-99" for="cb-pl4-80">Move Down</label>
+      </div>
+    </div>
+    <svg viewBox="0 0 100 100">
+      <path d="M1,32 4,32 M6,34 4,32 M4,32 10,20" stroke="black" stroke-width="1"></path>
+      <path d="M 30,70 C 49,56 60,84 33,92 -17,103 0,50 24,45 32,44 37,41 29,27 26,33 5,35 3,24 4,13 26,3 37,16 49,30 49,52 28,55 8,59 0,94 33,82 56,72 35,66 30,71 Z" fill="#73B80A" stroke-width="0"></path>
+      <circle cx="18" cy="15" r="5" fill="black" stroke="white" stroke-width="6"></circle>
+    </svg>
+  </div>
+</div>
+<div class="scrim" id="ladder-popup">
+  <div class="box">
+    <h1>Broom!</h1>
+    <div>Yay! You found a flying broom! Hop on and fly to the next tile now.
+      <div>
+        <label id="ladder-pl1-2" for="cb-pl1-38">Move Up</label>
+        <label id="ladder-pl1-7" for="cb-pl1-14">Move Up</label>
+        <label id="ladder-pl1-8" for="cb-pl1-31">Move Up</label>
+        <label id="ladder-pl1-15" for="cb-pl1-26">Move Up</label>
+        <label id="ladder-pl1-21" for="cb-pl1-42">Move Up</label>
+        <label id="ladder-pl1-28" for="cb-pl1-84">Move Up</label>
+        <label id="ladder-pl1-36" for="cb-pl1-44">Move Up</label>
+        <label id="ladder-pl1-51" for="cb-pl1-67">Move Up</label>
+        <label id="ladder-pl1-71" for="cb-pl1-91">Move Up</label>
+        <label id="ladder-pl1-78" for="cb-pl1-98">Move Up</label>
+        <label id="ladder-pl1-87" for="cb-pl1-94">Move Up</label>
+        <label id="ladder-pl2-2" for="cb-pl2-38">Move Up</label>
+        <label id="ladder-pl2-7" for="cb-pl2-14">Move Up</label>
+        <label id="ladder-pl2-8" for="cb-pl2-31">Move Up</label>
+        <label id="ladder-pl2-15" for="cb-pl2-26">Move Up</label>
+        <label id="ladder-pl2-21" for="cb-pl2-42">Move Up</label>
+        <label id="ladder-pl2-28" for="cb-pl2-84">Move Up</label>
+        <label id="ladder-pl2-36" for="cb-pl2-44">Move Up</label>
+        <label id="ladder-pl2-51" for="cb-pl2-67">Move Up</label>
+        <label id="ladder-pl2-71" for="cb-pl2-91">Move Up</label>
+        <label id="ladder-pl2-78" for="cb-pl2-98">Move Up</label>
+        <label id="ladder-pl2-87" for="cb-pl2-94">Move Up</label>
+        <label id="ladder-pl3-2" for="cb-pl3-38">Move Up</label>
+        <label id="ladder-pl3-7" for="cb-pl3-14">Move Up</label>
+        <label id="ladder-pl3-8" for="cb-pl3-31">Move Up</label>
+        <label id="ladder-pl3-15" for="cb-pl3-26">Move Up</label>
+        <label id="ladder-pl3-21" for="cb-pl3-42">Move Up</label>
+        <label id="ladder-pl3-28" for="cb-pl3-84">Move Up</label>
+        <label id="ladder-pl3-36" for="cb-pl3-44">Move Up</label>
+        <label id="ladder-pl3-51" for="cb-pl3-67">Move Up</label>
+        <label id="ladder-pl3-71" for="cb-pl3-91">Move Up</label>
+        <label id="ladder-pl3-78" for="cb-pl3-98">Move Up</label>
+        <label id="ladder-pl3-87" for="cb-pl3-94">Move Up</label>
+        <label id="ladder-pl4-2" for="cb-pl4-38">Move Up</label>
+        <label id="ladder-pl4-7" for="cb-pl4-14">Move Up</label>
+        <label id="ladder-pl4-8" for="cb-pl4-31">Move Up</label>
+        <label id="ladder-pl4-15" for="cb-pl4-26">Move Up</label>
+        <label id="ladder-pl4-21" for="cb-pl4-42">Move Up</label>
+        <label id="ladder-pl4-28" for="cb-pl4-84">Move Up</label>
+        <label id="ladder-pl4-36" for="cb-pl4-44">Move Up</label>
+        <label id="ladder-pl4-51" for="cb-pl4-67">Move Up</label>
+        <label id="ladder-pl4-71" for="cb-pl4-91">Move Up</label>
+        <label id="ladder-pl4-78" for="cb-pl4-98">Move Up</label>
+        <label id="ladder-pl4-87" for="cb-pl4-94">Move Up</label>
+      </div>
+    </div>
+    <svg viewBox="0 0 100 100">
+      <path d="M13,80 28,10" stroke="#8B4513" stroke-width="10" stroke-linecap="round"></path>
+      <path d="M16,80 18,100 M15,80 13,100 M14,78 9,99 M13,79 3,100 M10,80 -2,99" stroke="#aB6533" stroke-width="3" stroke-linecap="round"></path>
+      <path d="M8,81 17,82" stroke="#aB8533" stroke-width="3" stroke-linecap="round"></path>
+    </svg>
+  </div>
+</div>
+<div class="scrim" id="home-popup">
+  <div class="box">
+    <h1>Home</h1>
+    <div>You made it to the end of the maze, but you didn't do it in an exact jump so you will bounce back the remaining tiles.
+      <div>
+        <label id="home-pl1-101" for="cb-pl1-99">Bounce back</label>
+        <label id="home-pl1-102" for="cb-pl1-98">Bounce back</label>
+        <label id="home-pl1-103" for="cb-pl1-97">Bounce back</label>
+        <label id="home-pl1-104" for="cb-pl1-96">Bounce back</label>
+        <label id="home-pl1-105" for="cb-pl1-95">Bounce back</label>
+        <label id="home-pl1-106" for="cb-pl1-94">Bounce back</label>
+        <label id="home-pl2-101" for="cb-pl2-99">Bounce back</label>
+        <label id="home-pl2-102" for="cb-pl2-98">Bounce back</label>
+        <label id="home-pl2-103" for="cb-pl2-97">Bounce back</label>
+        <label id="home-pl2-104" for="cb-pl2-96">Bounce back</label>
+        <label id="home-pl2-105" for="cb-pl2-95">Bounce back</label>
+        <label id="home-pl2-106" for="cb-pl2-94">Bounce back</label>
+        <label id="home-pl3-101" for="cb-pl3-99">Bounce back</label>
+        <label id="home-pl3-102" for="cb-pl3-98">Bounce back</label>
+        <label id="home-pl3-103" for="cb-pl3-97">Bounce back</label>
+        <label id="home-pl3-104" for="cb-pl3-96">Bounce back</label>
+        <label id="home-pl3-105" for="cb-pl3-95">Bounce back</label>
+        <label id="home-pl3-106" for="cb-pl3-94">Bounce back</label>
+        <label id="home-pl4-101" for="cb-pl4-99">Bounce back</label>
+        <label id="home-pl4-102" for="cb-pl4-98">Bounce back</label>
+        <label id="home-pl4-103" for="cb-pl4-97">Bounce back</label>
+        <label id="home-pl4-104" for="cb-pl4-96">Bounce back</label>
+        <label id="home-pl4-105" for="cb-pl4-95">Bounce back</label>
+        <label id="home-pl4-106" for="cb-pl4-94">Bounce back</label>
+      </div>
+    </div>
+    <svg viewBox="0 0 100 100">
+      <path d="M12,85 12,40 5,40 30,5 55,40 48,40 48,85 35,85 35,60 25,60 25,85 Z" fill="#8Ba5f3"></path>
+      <path d="M30,65 C 30,60 25,55 20,55 15,55 10,60 10,65 10,70 15,75 20,75 20,75 20,75 50,75 M40,65 50,75 40,85" stroke="#eeee60" stroke-width="6" fill="none"></path>
+    </svg>
+  </div>
+</div>
+<div class="scrim" id="congratulations">
+  <div class="box">
+    <h1>Congratulations!</h1>
+    <div>You made it to the end of the maze! You won the TriWizard Cup!</div>
+    <div>Reload the page to play again.</div>
+    <svg viewBox="0 0 100 100">
+      <path d="M5,10 C 5,10 65,10 65,10 65,10 65,40 65,40 65,50 55,70 35,70 15,70 5,50 5,40 Z" fill="#fede60"></path>
+      <path d="M35,40 35,85 M20,85 50,85" stroke="#fede60" stroke-width="12" fill="none" stroke-linecap="round"></path>
+    </svg>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/css-only-harry-potter-game-basilisks-and-brooms/dist/script.js b/css-only-harry-potter-game-basilisks-and-brooms/dist/script.js
new file mode 100644
index 0000000..e5cca77
--- /dev/null
+++ b/css-only-harry-potter-game-basilisks-and-brooms/dist/script.js
@@ -0,0 +1 @@
+// no JavaScript
\ No newline at end of file
diff --git a/css-only-harry-potter-game-basilisks-and-brooms/dist/style.css b/css-only-harry-potter-game-basilisks-and-brooms/dist/style.css
new file mode 100644
index 0000000..d25f24d
--- /dev/null
+++ b/css-only-harry-potter-game-basilisks-and-brooms/dist/style.css
@@ -0,0 +1,4572 @@
+@charset "UTF-8";
+/***** dice animation */
+@import url("https://fonts.googleapis.com/css?family=Dosis|Roboto");
+@import url("https://fonts.cdnfonts.com/css/harry-potter");
+@keyframes changeOrder {
+  from {
+    z-index: 6;
+  }
+  to {
+    z-index: 1;
+  }
+}
+@-webkit-keyframes changeOrder {
+  from {
+    z-index: 6;
+  }
+  to {
+    z-index: 1;
+  }
+}
+input {
+  display: none;
+}
+
+body {
+  font-size: 16px;
+  font-family: Dosis, Roboto, Arial, Verdana, sans-serif;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: #8526;
+}
+
+.scrim {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  z-index: 999;
+}
+.scrim .box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  background: white;
+  border-radius: 3px;
+  box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
+  width: 70%;
+  max-width: 375px;
+}
+.scrim .box > div {
+  padding: 1rem;
+}
+.scrim .box h1 {
+  font-family: "Harry Potter";
+  text-shadow: 0 -2px #741, 0 -1px #741, -1px -1px #741, 1px -1px #741, -1px -2px #741, 1px -2px #741, -2px -2px #741, 2px -2px #741, -4px -2px #741, 4px -2px #741;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 1.75rem;
+  font-weight: 400;
+  text-align: center;
+  height: 2.5rem;
+  line-height: 2.35rem;
+  background: #741;
+  color: white;
+  border-radius: 3px 3px 0px 0px;
+}
+.scrim .box h2 {
+  margin-top: 1rem;
+  margin-bottom: 0.15rem;
+  font-size: 1.3rem;
+}
+.scrim .box h2:first-child {
+  margin-top: 0;
+}
+.scrim .box p:first-child {
+  margin-top: 0;
+}
+.scrim .box p:last-child {
+  margin-bottom: 0;
+}
+
+.flex {
+  display: flex;
+}
+.flex > label, .flex > div {
+  flex: 1;
+  margin-left: 0.3rem;
+}
+.flex > label:first-child, .flex > div:first-child {
+  margin-left: 0;
+}
+
+/** start screen: configuration **/
+#options {
+  background: rgba(0, 0, 0, 0);
+}
+#options .option-players label, #options label.option-start {
+  display: block;
+  margin-top: 0.5rem;
+  color: white;
+  background: rgba(0, 150, 48, 0.6);
+  text-align: center;
+  padding: 6px;
+  transition: background 0.5s, color 0.5s;
+  box-sizing: border-box;
+  border: 2px solid transparent;
+  border-radius: 3px;
+  cursor: pointer;
+}
+#options .option-players label:hover, #options label.option-start:hover {
+  background: rgba(220, 220, 0, 0.7);
+  color: black;
+}
+#options .option-players label:active, #options label.option-start:active {
+  border: 2px solid rgba(0, 0, 0, 0.1);
+}
+#options .option-players label.option-start, #options label.option-start.option-start {
+  background: #741;
+  color: white;
+  margin-top: 2rem;
+}
+#options .option-players label.option-start:hover, #options label.option-start.option-start:hover {
+  background: #61370e;
+}
+#options .option-colors label {
+  height: 2rem;
+  opacity: 0.6;
+  margin-bottom: 0.3rem;
+  cursor: pointer;
+  transition: opacity 0.5s;
+}
+#options .option-colors label:hover {
+  opacity: 0.8;
+}
+#options .option-colors label span {
+  box-sizing: border-box;
+  width: 2rem;
+  margin-left: 0.3rem;
+  border-radius: 3px;
+  display: inline-block;
+  padding: 3px;
+  font-size: 0.7rem;
+  border: 1px solid #222;
+}
+#options .option-colors label span:first-child {
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+}
+#options .option-colors label span:first-child::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(farthest-side, #0000 40%, #321a 0 50%, #0000 0);
+}
+#options .option-colors label:nth-child(1) span:nth-child(2) {
+  background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
+}
+#options .option-colors label:nth-child(1) span:nth-child(3) {
+  background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
+}
+#options .option-colors label:nth-child(1) span:nth-child(4) {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
+}
+#options .option-colors label:nth-child(1) span:nth-child(5) {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
+}
+#options .option-colors label:nth-child(2) span:nth-child(2) {
+  background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
+}
+#options .option-colors label:nth-child(2) span:nth-child(3) {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
+}
+#options .option-colors label:nth-child(2) span:nth-child(4) {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
+}
+#options .option-colors label:nth-child(2) span:nth-child(5) {
+  background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
+}
+#options .option-colors label:nth-child(3) span:nth-child(2) {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
+}
+#options .option-colors label:nth-child(3) span:nth-child(3) {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
+}
+#options .option-colors label:nth-child(3) span:nth-child(4) {
+  background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
+}
+#options .option-colors label:nth-child(3) span:nth-child(5) {
+  background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
+}
+#options .option-colors label:nth-child(4) span:nth-child(2) {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
+}
+#options .option-colors label:nth-child(4) span:nth-child(3) {
+  background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
+}
+#options .option-colors label:nth-child(4) span:nth-child(4) {
+  background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
+}
+#options .option-colors label:nth-child(4) span:nth-child(5) {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
+}
+
+#game-time:checked ~ #options,
+[name=show-instructions]:checked ~ #options {
+  display: none;
+}
+
+#players1:checked ~ #options label[for=players1] {
+  background: #009630;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  color: white;
+}
+#players1:checked ~ #options label[for^=colors] span:nth-child(3) {
+  display: none;
+}
+#players1:checked ~ #options label[for^=colors] span:nth-child(4) {
+  display: none;
+}
+#players1:checked ~ #options label[for^=colors] span:nth-child(5) {
+  display: none;
+}
+
+#colors1:checked ~ #options label[for=colors1] {
+  opacity: 1;
+  border: 0;
+}
+#colors1:checked ~ #options label[for=colors1] span {
+  border: 1px solid #222;
+}
+#colors1:checked ~ #options label[for=colors1] span:first-child {
+  border: 2px solid transparent;
+}
+#colors1:checked ~ #options label[for=colors1] span:first-child::before {
+  background: radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 35% 60%/15% 15%, radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 65% 60%/15% 15%, radial-gradient(farthest-side at 50% 0, black 99%, #0000 0) no-repeat 50% 80%/20% 10%, conic-gradient(at 50% -20%, #0000 162deg, indianred 0 198deg, #0000 0) no-repeat 50% 0%/100% 85%, radial-gradient(farthest-side, indianred 99%, #0000 0) no-repeat 0% 100%/100% 20%;
+}
+
+#players2:checked ~ #options label[for=players2] {
+  background: #009630;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  color: white;
+}
+#players2:checked ~ #options label[for^=colors] span:nth-child(4) {
+  display: none;
+}
+#players2:checked ~ #options label[for^=colors] span:nth-child(5) {
+  display: none;
+}
+
+#colors2:checked ~ #options label[for=colors2] {
+  opacity: 1;
+  border: 0;
+}
+#colors2:checked ~ #options label[for=colors2] span {
+  border: 1px solid #222;
+}
+#colors2:checked ~ #options label[for=colors2] span:first-child {
+  border: 2px solid transparent;
+}
+#colors2:checked ~ #options label[for=colors2] span:first-child::before {
+  background: radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 35% 60%/15% 15%, radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 65% 60%/15% 15%, radial-gradient(farthest-side at 50% 0, black 99%, #0000 0) no-repeat 50% 80%/20% 10%, conic-gradient(at 50% -20%, #0000 162deg, indianred 0 198deg, #0000 0) no-repeat 50% 0%/100% 85%, radial-gradient(farthest-side, indianred 99%, #0000 0) no-repeat 0% 100%/100% 20%;
+}
+
+#players3:checked ~ #options label[for=players3] {
+  background: #009630;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  color: white;
+}
+#players3:checked ~ #options label[for^=colors] span:nth-child(5) {
+  display: none;
+}
+
+#colors3:checked ~ #options label[for=colors3] {
+  opacity: 1;
+  border: 0;
+}
+#colors3:checked ~ #options label[for=colors3] span {
+  border: 1px solid #222;
+}
+#colors3:checked ~ #options label[for=colors3] span:first-child {
+  border: 2px solid transparent;
+}
+#colors3:checked ~ #options label[for=colors3] span:first-child::before {
+  background: radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 35% 60%/15% 15%, radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 65% 60%/15% 15%, radial-gradient(farthest-side at 50% 0, black 99%, #0000 0) no-repeat 50% 80%/20% 10%, conic-gradient(at 50% -20%, #0000 162deg, indianred 0 198deg, #0000 0) no-repeat 50% 0%/100% 85%, radial-gradient(farthest-side, indianred 99%, #0000 0) no-repeat 0% 100%/100% 20%;
+}
+
+#players4:checked ~ #options label[for=players4] {
+  background: #009630;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  color: white;
+}
+
+#colors4:checked ~ #options label[for=colors4] {
+  opacity: 1;
+  border: 0;
+}
+#colors4:checked ~ #options label[for=colors4] span {
+  border: 1px solid #222;
+}
+#colors4:checked ~ #options label[for=colors4] span:first-child {
+  border: 2px solid transparent;
+}
+#colors4:checked ~ #options label[for=colors4] span:first-child::before {
+  background: radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 35% 60%/15% 15%, radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 65% 60%/15% 15%, radial-gradient(farthest-side at 50% 0, black 99%, #0000 0) no-repeat 50% 80%/20% 10%, conic-gradient(at 50% -20%, #0000 162deg, indianred 0 198deg, #0000 0) no-repeat 50% 0%/100% 85%, radial-gradient(farthest-side, indianred 99%, #0000 0) no-repeat 0% 100%/100% 20%;
+}
+
+#colors1:checked ~ #game #piece-player-1 {
+  background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
+}
+
+#colors1:checked ~ #game #piece-player-2 {
+  background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
+}
+
+#colors1:checked ~ #game #piece-player-3 {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
+}
+
+#colors1:checked ~ #game #piece-player-4 {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
+}
+
+#colors2:checked ~ #game #piece-player-1 {
+  background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
+}
+
+#colors2:checked ~ #game #piece-player-2 {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
+}
+
+#colors2:checked ~ #game #piece-player-3 {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
+}
+
+#colors2:checked ~ #game #piece-player-4 {
+  background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
+}
+
+#colors3:checked ~ #game #piece-player-1 {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
+}
+
+#colors3:checked ~ #game #piece-player-2 {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
+}
+
+#colors3:checked ~ #game #piece-player-3 {
+  background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
+}
+
+#colors3:checked ~ #game #piece-player-4 {
+  background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
+}
+
+#colors4:checked ~ #game #piece-player-1 {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
+}
+
+#colors4:checked ~ #game #piece-player-2 {
+  background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
+}
+
+#colors4:checked ~ #game #piece-player-3 {
+  background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
+}
+
+#colors4:checked ~ #game #piece-player-4 {
+  background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
+}
+
+/** info pop-up **/
+#info {
+  display: none;
+}
+#info .box {
+  width: 75%;
+  max-width: none;
+}
+#info .box p:last-child {
+  text-align: right;
+}
+#info .box #close-button {
+  display: inline-block;
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+}
+#info .box #close-button:hover {
+  background: #2d8659;
+}
+
+#show-info:checked ~ #info {
+  display: block;
+}
+
+/** Instructions **/
+#instructions {
+  position: fixed;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.01);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+#instructions #go-to-game {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  font-size: 1rem;
+  z-index: 3;
+  color: white;
+  cursor: pointer;
+}
+#instructions #step {
+  display: none;
+  position: absolute;
+  box-shadow: 0 0 50px calc(200vmax) rgba(0, 0, 0, 0.85), inset 0 0 4px 0 black;
+  transform: translate(-1rem, -1rem);
+  border-radius: 100%;
+  z-index: 1;
+  top: 0;
+  left: 1rem;
+  width: calc(100px + 2rem);
+  height: calc(6rem);
+  transition: all 0.75s;
+}
+#instructions #step div {
+  position: absolute;
+  bottom: -0.5rem;
+  line-height: 1.1rem;
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.8);
+  left: 1rem;
+  width: 80vmin;
+  transform: translate(0, 100%);
+  -webkit-transform: translate(0, 100%);
+}
+#instructions #step div label {
+  display: none;
+  font-weight: bold;
+  cursor: pointer;
+  text-decoration: underline;
+}
+#instructions #step div label:hover {
+  text-decoration: none;
+}
+#instructions #step div label:not([for=game-time])::before {
+  content: "Next ›";
+}
+
+[name=show-instructions]:checked ~ #instructions, [name=show-instructions]:checked ~ #game, [name=show-instructions]:checked ~ #action, [name=show-instructions]:checked ~ #instructions #step {
+  display: block;
+}
+
+#show-instructions-1:checked ~ #instructions label[for=show-instructions-2] {
+  display: inline-block;
+}
+
+#show-instructions-2:checked ~ #instructions label[for=show-instructions-3] {
+  display: inline-block;
+}
+
+#show-instructions-3:checked ~ #instructions label[for=show-instructions-4] {
+  display: inline-block;
+}
+
+#show-instructions-4:checked ~ #instructions label[for=show-instructions-5] {
+  display: inline-block;
+}
+
+#show-instructions-5:checked ~ #instructions label[for=game-time] {
+  display: inline-block;
+}
+
+#show-instructions-1:checked ~ #instructions #step {
+  top: 0;
+  left: 1rem;
+  width: calc(100px + 2rem);
+  height: calc(6rem);
+}
+#show-instructions-1:checked ~ #instructions #step div::before {
+  content: "This area indicates whose turn it is at any given moment.";
+}
+
+#show-instructions-2:checked ~ #instructions #step {
+  top: 6rem;
+  left: 1rem;
+  width: 5rem;
+  height: 5rem;
+}
+#show-instructions-2:checked ~ #instructions #step div::before {
+  content: "The active player clicks here to roll the dice.";
+}
+
+#show-instructions-3:checked ~ #instructions #step {
+  top: 50%;
+  left: 50%;
+  width: 30vw;
+  height: 30vw;
+  max-width: 500px;
+  max-height: 500px;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+}
+#show-instructions-3:checked ~ #instructions #step div {
+  transform: translate(-20vmin, 100%);
+  -webkit-transform: translate(-20vmin, 100%);
+  left: 0;
+}
+#show-instructions-3:checked ~ #instructions #step div::before {
+  content: "The player's piece will advance on the board once the dice is rolled. If the piece falls on a tile with a basilisk's head, it will fall down to the basilisk's tail. If it falls on a broom's bottom, it will go up to the top.";
+}
+
+#show-instructions-4:checked ~ #instructions #step {
+  top: 0;
+  left: calc(100px + 2rem);
+  width: calc(100px + 2rem);
+  height: calc(6rem);
+}
+#show-instructions-4:checked ~ #instructions #step div::before {
+  content: "After that, click on the button to go to the next player's turn.";
+}
+
+#show-instructions-5:checked ~ #instructions #step {
+  top: 0;
+  left: calc(100vw - 100px - 1rem);
+  width: calc(100px + 2rem);
+  height: calc(6rem);
+}
+#show-instructions-5:checked ~ #instructions #step div {
+  left: auto;
+  right: 0rem;
+}
+#show-instructions-5:checked ~ #instructions #step div::before {
+  content: "If you want more information during the game, click on this button.";
+}
+
+#game-time:checked ~ #instructions {
+  display: none;
+}
+
+/** game screen: board, dice, messages **/
+.dice {
+  position: absolute;
+  display: none;
+  visibility: visible;
+  top: 6rem;
+  left: 1rem;
+  width: 3rem;
+  height: 3rem;
+  background: white;
+  border-radius: 3px;
+  box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.042);
+  z-index: 1;
+}
+.dice::before {
+  content: "";
+  display: block;
+  height: 100%;
+  width: 100%;
+  font-size: 0.8rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  padding-top: 0.5rem;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+#turn1:checked ~ .game-time:checked ~ [name=cb-player1]:checked + label + input + label,
+#turn1:checked ~ .game-time:checked ~ [name=cb-player1]:checked + label + input + label + input + label,
+#turn1:checked ~ .game-time:checked ~ [name=cb-player1]:checked + label + input + label + input + label + input + label,
+#turn1:checked ~ .game-time:checked ~ [name=cb-player1]:checked + label + input + label + input + label + input + label + input + label,
+#turn1:checked ~ .game-time:checked ~ [name=cb-player1]:checked + label + input + label + input + label + input + label + input + label + input + label,
+#turn1:checked ~ .game-time:checked ~ [name=cb-player1]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label {
+  display: block;
+  left: 1rem;
+  text-align: center;
+  animation: changeOrder 0.6s infinite;
+  -webkit-animation: changeOrder 0.6s infinite;
+}
+
+#turn2:checked ~ .game-time:checked ~ [name=cb-player2]:checked + label + input + label,
+#turn2:checked ~ .game-time:checked ~ [name=cb-player2]:checked + label + input + label + input + label,
+#turn2:checked ~ .game-time:checked ~ [name=cb-player2]:checked + label + input + label + input + label + input + label,
+#turn2:checked ~ .game-time:checked ~ [name=cb-player2]:checked + label + input + label + input + label + input + label + input + label,
+#turn2:checked ~ .game-time:checked ~ [name=cb-player2]:checked + label + input + label + input + label + input + label + input + label + input + label,
+#turn2:checked ~ .game-time:checked ~ [name=cb-player2]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label {
+  display: block;
+  left: 1rem;
+  text-align: center;
+  animation: changeOrder 0.6s infinite;
+  -webkit-animation: changeOrder 0.6s infinite;
+}
+
+#turn3:checked ~ .game-time:checked ~ [name=cb-player3]:checked + label + input + label,
+#turn3:checked ~ .game-time:checked ~ [name=cb-player3]:checked + label + input + label + input + label,
+#turn3:checked ~ .game-time:checked ~ [name=cb-player3]:checked + label + input + label + input + label + input + label,
+#turn3:checked ~ .game-time:checked ~ [name=cb-player3]:checked + label + input + label + input + label + input + label + input + label,
+#turn3:checked ~ .game-time:checked ~ [name=cb-player3]:checked + label + input + label + input + label + input + label + input + label + input + label,
+#turn3:checked ~ .game-time:checked ~ [name=cb-player3]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label {
+  display: block;
+  left: 1rem;
+  text-align: center;
+  animation: changeOrder 0.6s infinite;
+  -webkit-animation: changeOrder 0.6s infinite;
+}
+
+#turn4:checked ~ .game-time:checked ~ [name=cb-player4]:checked + label + input + label,
+#turn4:checked ~ .game-time:checked ~ [name=cb-player4]:checked + label + input + label + input + label,
+#turn4:checked ~ .game-time:checked ~ [name=cb-player4]:checked + label + input + label + input + label + input + label,
+#turn4:checked ~ .game-time:checked ~ [name=cb-player4]:checked + label + input + label + input + label + input + label + input + label,
+#turn4:checked ~ .game-time:checked ~ [name=cb-player4]:checked + label + input + label + input + label + input + label + input + label + input + label,
+#turn4:checked ~ .game-time:checked ~ [name=cb-player4]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label {
+  display: block;
+  left: 1rem;
+  text-align: center;
+  animation: changeOrder 0.6s infinite;
+  -webkit-animation: changeOrder 0.6s infinite;
+}
+
+#turn1:checked ~ [name=cb-player1]:checked + label + input + label {
+  animation-delay: 0s !important;
+}
+
+#turn1:checked ~ [name=cb-player1]:checked + label + input + label + input + label {
+  animation-delay: -0.1s !important;
+}
+
+#turn1:checked ~ [name=cb-player1]:checked + label + input + label + input + label + input + label {
+  animation-delay: -0.2s !important;
+}
+
+#turn1:checked ~ [name=cb-player1]:checked + label + input + label + input + label + input + label + input + label {
+  animation-delay: -0.3s !important;
+}
+
+#turn1:checked ~ [name=cb-player1]:checked + label + input + label + input + label + input + label + input + label + input + label {
+  animation-delay: -0.4s !important;
+}
+
+#turn1:checked ~ [name=cb-player1]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label {
+  animation-delay: -0.5s !important;
+}
+
+#turn2:checked ~ [name=cb-player2]:checked + label + input + label {
+  animation-delay: 0s !important;
+}
+
+#turn2:checked ~ [name=cb-player2]:checked + label + input + label + input + label {
+  animation-delay: -0.1s !important;
+}
+
+#turn2:checked ~ [name=cb-player2]:checked + label + input + label + input + label + input + label {
+  animation-delay: -0.2s !important;
+}
+
+#turn2:checked ~ [name=cb-player2]:checked + label + input + label + input + label + input + label + input + label {
+  animation-delay: -0.3s !important;
+}
+
+#turn2:checked ~ [name=cb-player2]:checked + label + input + label + input + label + input + label + input + label + input + label {
+  animation-delay: -0.4s !important;
+}
+
+#turn2:checked ~ [name=cb-player2]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label {
+  animation-delay: -0.5s !important;
+}
+
+#turn3:checked ~ [name=cb-player3]:checked + label + input + label {
+  animation-delay: 0s !important;
+}
+
+#turn3:checked ~ [name=cb-player3]:checked + label + input + label + input + label {
+  animation-delay: -0.1s !important;
+}
+
+#turn3:checked ~ [name=cb-player3]:checked + label + input + label + input + label + input + label {
+  animation-delay: -0.2s !important;
+}
+
+#turn3:checked ~ [name=cb-player3]:checked + label + input + label + input + label + input + label + input + label {
+  animation-delay: -0.3s !important;
+}
+
+#turn3:checked ~ [name=cb-player3]:checked + label + input + label + input + label + input + label + input + label + input + label {
+  animation-delay: -0.4s !important;
+}
+
+#turn3:checked ~ [name=cb-player3]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label {
+  animation-delay: -0.5s !important;
+}
+
+#turn4:checked ~ [name=cb-player4]:checked + label + input + label {
+  animation-delay: 0s !important;
+}
+
+#turn4:checked ~ [name=cb-player4]:checked + label + input + label + input + label {
+  animation-delay: -0.1s !important;
+}
+
+#turn4:checked ~ [name=cb-player4]:checked + label + input + label + input + label + input + label {
+  animation-delay: -0.2s !important;
+}
+
+#turn4:checked ~ [name=cb-player4]:checked + label + input + label + input + label + input + label + input + label {
+  animation-delay: -0.3s !important;
+}
+
+#turn4:checked ~ [name=cb-player4]:checked + label + input + label + input + label + input + label + input + label + input + label {
+  animation-delay: -0.4s !important;
+}
+
+#turn4:checked ~ [name=cb-player4]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label {
+  animation-delay: -0.5s !important;
+}
+
+#turn1:checked ~ [name=cb-player1]:checked + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='8' /></svg>");
+}
+
+#turn1:checked ~ [name=cb-player1]:checked + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='77' r='8' /><circle cx='77' cy='23' r='8' /></svg>");
+}
+
+#turn1:checked ~ [name=cb-player1]:checked + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='77' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='50' cy='50' r='8' /></svg>");
+}
+
+#turn1:checked ~ [name=cb-player1]:checked + label + input + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /></svg>");
+}
+
+#turn1:checked ~ [name=cb-player1]:checked + label + input + label + input + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /><circle cx='50' cy='50' r='8' /></svg>");
+}
+
+#turn1:checked ~ [name=cb-player1]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /><circle cx='23' cy='50' r='8' /><circle cx='77' cy='50' r='8' /></svg>");
+}
+
+#turn2:checked ~ [name=cb-player2]:checked + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='8' /></svg>");
+}
+
+#turn2:checked ~ [name=cb-player2]:checked + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='77' r='8' /><circle cx='77' cy='23' r='8' /></svg>");
+}
+
+#turn2:checked ~ [name=cb-player2]:checked + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='77' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='50' cy='50' r='8' /></svg>");
+}
+
+#turn2:checked ~ [name=cb-player2]:checked + label + input + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /></svg>");
+}
+
+#turn2:checked ~ [name=cb-player2]:checked + label + input + label + input + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /><circle cx='50' cy='50' r='8' /></svg>");
+}
+
+#turn2:checked ~ [name=cb-player2]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /><circle cx='23' cy='50' r='8' /><circle cx='77' cy='50' r='8' /></svg>");
+}
+
+#turn3:checked ~ [name=cb-player3]:checked + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='8' /></svg>");
+}
+
+#turn3:checked ~ [name=cb-player3]:checked + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='77' r='8' /><circle cx='77' cy='23' r='8' /></svg>");
+}
+
+#turn3:checked ~ [name=cb-player3]:checked + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='77' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='50' cy='50' r='8' /></svg>");
+}
+
+#turn3:checked ~ [name=cb-player3]:checked + label + input + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /></svg>");
+}
+
+#turn3:checked ~ [name=cb-player3]:checked + label + input + label + input + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /><circle cx='50' cy='50' r='8' /></svg>");
+}
+
+#turn3:checked ~ [name=cb-player3]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /><circle cx='23' cy='50' r='8' /><circle cx='77' cy='50' r='8' /></svg>");
+}
+
+#turn4:checked ~ [name=cb-player4]:checked + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='8' /></svg>");
+}
+
+#turn4:checked ~ [name=cb-player4]:checked + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='77' r='8' /><circle cx='77' cy='23' r='8' /></svg>");
+}
+
+#turn4:checked ~ [name=cb-player4]:checked + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='77' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='50' cy='50' r='8' /></svg>");
+}
+
+#turn4:checked ~ [name=cb-player4]:checked + label + input + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /></svg>");
+}
+
+#turn4:checked ~ [name=cb-player4]:checked + label + input + label + input + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /><circle cx='50' cy='50' r='8' /></svg>");
+}
+
+#turn4:checked ~ [name=cb-player4]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label::before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /><circle cx='23' cy='50' r='8' /><circle cx='77' cy='50' r='8' /></svg>");
+}
+
+label.dice:active {
+  position: static !important;
+  margin-left: 50px !important;
+  background: none !important;
+  font-size: 0;
+}
+label.dice:active::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -50px;
+  left: 0;
+  bottom: 0;
+  z-index: 200;
+}
+
+#game {
+  display: none;
+}
+#game .tab {
+  position: absolute;
+  top: 0;
+  background: white;
+  border-radius: 0 0 3px 3px;
+  box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
+  z-index: 9;
+  float: left;
+  margin-left: 1rem;
+}
+#game .tab::before {
+  text-align: center;
+  display: block;
+  padding: 6px 16px;
+  color: white;
+  background: #741;
+  height: 0.7rem;
+  line-height: 0.7rem;
+  font-size: 0.75rem;
+  font-weight: bold;
+  white-space: nowrap;
+  text-transform: uppercase;
+  font-size: 0.95rem;
+}
+#game .tab::after, #game .tab#player-info span {
+  display: block;
+  text-align: center;
+  padding: 6px 16px;
+  height: 2rem;
+  line-height: 1.9rem;
+  white-space: nowrap;
+}
+#game .tab#player-info {
+  min-width: 100px;
+}
+#game .tab#player-info::before {
+  content: "Turn";
+}
+#game .tab#player-info span {
+  font-weight: bolder;
+}
+#game .tab#player-info span::before {
+  content: "● ";
+}
+#game .tab#player-info span::after {
+  content: " 1";
+  font-weight: bolder;
+}
+#game .tab#dice {
+  cursor: pointer;
+}
+#game .tab#dice::before {
+  content: "Dice";
+}
+#game .tab#dice::after {
+  content: "Roll";
+}
+#game .tab#more-info {
+  cursor: pointer;
+  left: auto;
+  right: 1rem;
+  width: 100px;
+  z-index: 1;
+}
+#game .tab#more-info::before {
+  content: "About";
+}
+#game .tab#more-info::after {
+  content: "More info";
+}
+#game .tab#action {
+  cursor: pointer;
+  left: calc(100px + 1rem);
+  width: 100px;
+}
+#game .tab#action::before {
+  content: "Action";
+}
+#game .tab#action::after {
+  content: "Next player";
+}
+#game .tab#action label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  cursor: pointer;
+}
+#game #board {
+  width: 70%;
+  max-width: 500px;
+  border: 3px solid #741;
+  border-radius: 6px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  background: white;
+  margin-top: 2.5rem;
+  box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
+}
+#game #board .tile {
+  float: left;
+  width: 10%;
+  position: relative;
+  height: 0;
+  padding-top: 10%;
+  box-sizing: border-box;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  background: #cee8d7;
+}
+#game #board .tile::before {
+  content: attr(data-index);
+  position: absolute;
+  top: 0rem;
+  left: 0.15rem;
+  font-size: 0.66rem;
+}
+#game #board .tile.tile6::before, #game #board .tile.tile12::before, #game #board .tile.tile18::before, #game #board .tile.tile22::before, #game #board .tile.tile23::before, #game #board .tile.tile28::before, #game #board .tile.tile30::before, #game #board .tile.tile34::before, #game #board .tile.tile36::before, #game #board .tile.tile39::before, #game #board .tile.tile55::before, #game #board .tile.tile79::before {
+  left: auto;
+  right: 0.15rem;
+}
+#game #board .tile.tile52::before {
+  top: auto;
+  bottom: 0rem;
+}
+#game #board .tile.tile76::before {
+  left: 0.6rem;
+}
+#game #board .tile1 {
+  border-bottom: 1px solid transparent;
+}
+#game #board .tile91 {
+  border-top: 1px solid transparent;
+}
+#game #board .tile10 {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile11 {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile2 {
+  border-bottom: 1px solid transparent;
+}
+#game #board .tile92 {
+  border-top: 1px solid transparent;
+}
+#game #board .tile20 {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile21 {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile3 {
+  border-bottom: 1px solid transparent;
+}
+#game #board .tile93 {
+  border-top: 1px solid transparent;
+}
+#game #board .tile30 {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile31 {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile4 {
+  border-bottom: 1px solid transparent;
+}
+#game #board .tile94 {
+  border-top: 1px solid transparent;
+}
+#game #board .tile40 {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile41 {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile5 {
+  border-bottom: 1px solid transparent;
+}
+#game #board .tile95 {
+  border-top: 1px solid transparent;
+}
+#game #board .tile50 {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile51 {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile6 {
+  border-bottom: 1px solid transparent;
+}
+#game #board .tile96 {
+  border-top: 1px solid transparent;
+}
+#game #board .tile60 {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile61 {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile7 {
+  border-bottom: 1px solid transparent;
+}
+#game #board .tile97 {
+  border-top: 1px solid transparent;
+}
+#game #board .tile70 {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile71 {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile8 {
+  border-bottom: 1px solid transparent;
+}
+#game #board .tile98 {
+  border-top: 1px solid transparent;
+}
+#game #board .tile80 {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile81 {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile9 {
+  border-bottom: 1px solid transparent;
+}
+#game #board .tile99 {
+  border-top: 1px solid transparent;
+}
+#game #board .tile90 {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile91 {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile10 {
+  border-bottom: 1px solid transparent;
+}
+#game #board .tile100 {
+  border-top: 1px solid transparent;
+}
+#game #board .tile100 {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile101 {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#game #board .tile1, #game #board .tile15, #game #board .tile24, #game #board .tile38, #game #board .tile49, #game #board .tile55, #game #board .tile65, #game #board .tile76, #game #board .tile86, #game #board .tile94 {
+  background: #fadbe5;
+}
+#game #board .tile2, #game #board .tile16, #game #board .tile23, #game #board .tile35, #game #board .tile42, #game #board .tile56, #game #board .tile64, #game #board .tile79, #game #board .tile87, #game #board .tile93 {
+  background: #ecf3ff;
+}
+#game #board .tile3, #game #board .tile18, #game #board .tile26, #game #board .tile33, #game #board .tile41, #game #board .tile58, #game #board .tile68, #game #board .tile78, #game #board .tile81, #game #board .tile96 {
+  background: #feeadb;
+}
+#game #board .tile4, #game #board .tile11, #game #board .tile29, #game #board .tile40, #game #board .tile47, #game #board .tile51, #game #board .tile61, #game #board .tile77, #game #board .tile88, #game #board .tile99 {
+  background: #eee2ef;
+}
+#game #board .tile5, #game #board .tile19, #game #board .tile27, #game #board .tile32, #game #board .tile44, #game #board .tile59, #game #board .tile69, #game #board .tile80, #game #board .tile89, #game #board .tile97 {
+  background: #bbe7f8;
+}
+#game #board .tile6, #game #board .tile20, #game #board .tile28, #game #board .tile31, #game #board .tile45, #game #board .tile60, #game #board .tile70, #game #board .tile75, #game #board .tile85, #game #board .tile98 {
+  background: #fffcdb;
+}
+#game #board .tile7, #game #board .tile13, #game #board .tile21, #game #board .tile36, #game #board .tile50, #game #board .tile53, #game #board .tile63, #game #board .tile74, #game #board .tile84, #game #board .tile91 {
+  background: #d2effe;
+}
+#game #board .tile8, #game #board .tile12, #game #board .tile30, #game #board .tile39, #game #board .tile46, #game #board .tile52, #game #board .tile62, #game #board .tile73, #game #board .tile90, #game #board .tile100 {
+  background: #f3ddb2;
+}
+#game #board .tile9, #game #board .tile14, #game #board .tile22, #game #board .tile37, #game #board .tile48, #game #board .tile54, #game #board .tile66, #game #board .tile72, #game #board .tile83, #game #board .tile96 {
+  background: #fac5b8;
+}
+
+#action label {
+  display: none;
+}
+
+#players1:checked ~ #turn1:checked ~ #game-time:checked ~ #game #action {
+  display: none;
+}
+
+#players1:checked ~ #turn1:checked ~ #game #turn-changer1 {
+  display: block;
+}
+
+#players2:checked ~ #turn1:checked ~ #game #turn-changer2 {
+  display: block;
+}
+
+#players3:checked ~ #turn1:checked ~ #game #turn-changer2 {
+  display: block;
+}
+
+#players4:checked ~ #turn1:checked ~ #game #turn-changer2 {
+  display: block;
+}
+
+#players2:checked ~ #turn2:checked ~ #game #turn-changer1 {
+  display: block;
+}
+
+#players3:checked ~ #turn2:checked ~ #game #turn-changer3 {
+  display: block;
+}
+
+#players4:checked ~ #turn2:checked ~ #game #turn-changer3 {
+  display: block;
+}
+
+#players3:checked ~ #turn3:checked ~ #game #turn-changer1 {
+  display: block;
+}
+
+#players4:checked ~ #turn3:checked ~ #game #turn-changer4 {
+  display: block;
+}
+
+#players4:checked ~ #turn4:checked ~ #game #turn-changer1 {
+  display: block;
+}
+
+#turn1:checked ~ #colors1:checked ~ #game #player-info span::before {
+  color: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
+}
+
+#turn2:checked ~ #colors1:checked ~ #game #player-info span::before {
+  color: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
+}
+
+#turn3:checked ~ #colors1:checked ~ #game #player-info span::before {
+  color: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
+}
+
+#turn4:checked ~ #colors1:checked ~ #game #player-info span::before {
+  color: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
+}
+
+#turn1:checked ~ #colors2:checked ~ #game #player-info span::before {
+  color: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
+}
+
+#turn2:checked ~ #colors2:checked ~ #game #player-info span::before {
+  color: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
+}
+
+#turn3:checked ~ #colors2:checked ~ #game #player-info span::before {
+  color: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
+}
+
+#turn4:checked ~ #colors2:checked ~ #game #player-info span::before {
+  color: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
+}
+
+#turn1:checked ~ #colors3:checked ~ #game #player-info span::before {
+  color: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
+}
+
+#turn2:checked ~ #colors3:checked ~ #game #player-info span::before {
+  color: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
+}
+
+#turn3:checked ~ #colors3:checked ~ #game #player-info span::before {
+  color: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
+}
+
+#turn4:checked ~ #colors3:checked ~ #game #player-info span::before {
+  color: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
+}
+
+#turn1:checked ~ #colors4:checked ~ #game #player-info span::before {
+  color: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
+}
+
+#turn2:checked ~ #colors4:checked ~ #game #player-info span::before {
+  color: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
+}
+
+#turn3:checked ~ #colors4:checked ~ #game #player-info span::before {
+  color: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
+}
+
+#turn4:checked ~ #colors4:checked ~ #game #player-info span::before {
+  color: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
+}
+
+#turn1:checked ~ #game .tab#player-info span::after {
+  content: " 1";
+}
+
+#turn2:checked ~ #game .tab#player-info span::after {
+  content: " 2";
+}
+
+#turn3:checked ~ #game .tab#player-info span::after {
+  content: " 3";
+}
+
+#turn4:checked ~ #game .tab#player-info span::after {
+  content: " 4";
+}
+
+#game-time:checked ~ #game {
+  display: block;
+}
+
+svg#snakeladders {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+svg#snakeladders g.ladders-big {
+  stroke: #8B4513;
+  stroke-width: 4;
+  stroke-linecap: round;
+}
+svg#snakeladders g.ladders-small {
+  stroke: #bB8523;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+svg .snake {
+  stroke: none;
+}
+svg .eye {
+  fill: black;
+  stroke: white;
+  stroke-width: 6;
+}
+
+.piece {
+  position: absolute;
+  border-radius: 12%;
+  box-sizing: border-box;
+  border: 1px solid #222;
+  width: 7%;
+  height: 7%;
+  bottom: 0;
+  left: 0;
+  transform: translate(-2%, -2%);
+  -webkit-transform: translate(-2%, -2%);
+  transition: bottom 0.5s, left 0.5s;
+  box-shadow: 0 0.25rem 0.5rem #0004;
+}
+.piece#piece-player-1 {
+  transform: translate(-5%, -3%);
+  -webkit-transform: translate(-5%, -3%);
+  z-index: 44;
+}
+.piece#piece-player-2 {
+  transform: translate(40%, -40%);
+  -webkit-transform: translate(40%, -40%);
+  z-index: 41;
+}
+.piece#piece-player-3 {
+  transform: translate(42%, -7%);
+  -webkit-transform: translate(42%, -7%);
+  z-index: 43;
+}
+.piece#piece-player-4 {
+  transform: translate(-3%, -41%);
+  -webkit-transform: translate(-3%, -41%);
+  z-index: 42;
+}
+
+#cb-pl1-0:checked ~ #game #piece-player-1 {
+  left: -10%;
+  bottom: 0;
+}
+
+#cb-pl1-1:checked ~ #game #piece-player-1 {
+  left: 0%;
+  bottom: 0%;
+}
+
+#cb-pl1-2:checked ~ #game #piece-player-1 {
+  left: 10%;
+  bottom: 0%;
+}
+
+#cb-pl1-3:checked ~ #game #piece-player-1 {
+  left: 20%;
+  bottom: 0%;
+}
+
+#cb-pl1-4:checked ~ #game #piece-player-1 {
+  left: 30%;
+  bottom: 0%;
+}
+
+#cb-pl1-5:checked ~ #game #piece-player-1 {
+  left: 40%;
+  bottom: 0%;
+}
+
+#cb-pl1-6:checked ~ #game #piece-player-1 {
+  left: 50%;
+  bottom: 0%;
+}
+
+#cb-pl1-7:checked ~ #game #piece-player-1 {
+  left: 60%;
+  bottom: 0%;
+}
+
+#cb-pl1-8:checked ~ #game #piece-player-1 {
+  left: 70%;
+  bottom: 0%;
+}
+
+#cb-pl1-9:checked ~ #game #piece-player-1 {
+  left: 80%;
+  bottom: 0%;
+}
+
+#cb-pl1-10:checked ~ #game #piece-player-1 {
+  left: 90%;
+  bottom: 0%;
+}
+
+#cb-pl1-11:checked ~ #game #piece-player-1 {
+  left: 90%;
+  bottom: 10%;
+}
+
+#cb-pl1-12:checked ~ #game #piece-player-1 {
+  left: 80%;
+  bottom: 10%;
+}
+
+#cb-pl1-13:checked ~ #game #piece-player-1 {
+  left: 70%;
+  bottom: 10%;
+}
+
+#cb-pl1-14:checked ~ #game #piece-player-1 {
+  left: 60%;
+  bottom: 10%;
+}
+
+#cb-pl1-15:checked ~ #game #piece-player-1 {
+  left: 50%;
+  bottom: 10%;
+}
+
+#cb-pl1-16:checked ~ #game #piece-player-1 {
+  left: 40%;
+  bottom: 10%;
+}
+
+#cb-pl1-17:checked ~ #game #piece-player-1 {
+  left: 30%;
+  bottom: 10%;
+}
+
+#cb-pl1-18:checked ~ #game #piece-player-1 {
+  left: 20%;
+  bottom: 10%;
+}
+
+#cb-pl1-19:checked ~ #game #piece-player-1 {
+  left: 10%;
+  bottom: 10%;
+}
+
+#cb-pl1-20:checked ~ #game #piece-player-1 {
+  left: 0%;
+  bottom: 10%;
+}
+
+#cb-pl1-21:checked ~ #game #piece-player-1 {
+  left: 0%;
+  bottom: 20%;
+}
+
+#cb-pl1-22:checked ~ #game #piece-player-1 {
+  left: 10%;
+  bottom: 20%;
+}
+
+#cb-pl1-23:checked ~ #game #piece-player-1 {
+  left: 20%;
+  bottom: 20%;
+}
+
+#cb-pl1-24:checked ~ #game #piece-player-1 {
+  left: 30%;
+  bottom: 20%;
+}
+
+#cb-pl1-25:checked ~ #game #piece-player-1 {
+  left: 40%;
+  bottom: 20%;
+}
+
+#cb-pl1-26:checked ~ #game #piece-player-1 {
+  left: 50%;
+  bottom: 20%;
+}
+
+#cb-pl1-27:checked ~ #game #piece-player-1 {
+  left: 60%;
+  bottom: 20%;
+}
+
+#cb-pl1-28:checked ~ #game #piece-player-1 {
+  left: 70%;
+  bottom: 20%;
+}
+
+#cb-pl1-29:checked ~ #game #piece-player-1 {
+  left: 80%;
+  bottom: 20%;
+}
+
+#cb-pl1-30:checked ~ #game #piece-player-1 {
+  left: 90%;
+  bottom: 20%;
+}
+
+#cb-pl1-31:checked ~ #game #piece-player-1 {
+  left: 90%;
+  bottom: 30%;
+}
+
+#cb-pl1-32:checked ~ #game #piece-player-1 {
+  left: 80%;
+  bottom: 30%;
+}
+
+#cb-pl1-33:checked ~ #game #piece-player-1 {
+  left: 70%;
+  bottom: 30%;
+}
+
+#cb-pl1-34:checked ~ #game #piece-player-1 {
+  left: 60%;
+  bottom: 30%;
+}
+
+#cb-pl1-35:checked ~ #game #piece-player-1 {
+  left: 50%;
+  bottom: 30%;
+}
+
+#cb-pl1-36:checked ~ #game #piece-player-1 {
+  left: 40%;
+  bottom: 30%;
+}
+
+#cb-pl1-37:checked ~ #game #piece-player-1 {
+  left: 30%;
+  bottom: 30%;
+}
+
+#cb-pl1-38:checked ~ #game #piece-player-1 {
+  left: 20%;
+  bottom: 30%;
+}
+
+#cb-pl1-39:checked ~ #game #piece-player-1 {
+  left: 10%;
+  bottom: 30%;
+}
+
+#cb-pl1-40:checked ~ #game #piece-player-1 {
+  left: 0%;
+  bottom: 30%;
+}
+
+#cb-pl1-41:checked ~ #game #piece-player-1 {
+  left: 0%;
+  bottom: 40%;
+}
+
+#cb-pl1-42:checked ~ #game #piece-player-1 {
+  left: 10%;
+  bottom: 40%;
+}
+
+#cb-pl1-43:checked ~ #game #piece-player-1 {
+  left: 20%;
+  bottom: 40%;
+}
+
+#cb-pl1-44:checked ~ #game #piece-player-1 {
+  left: 30%;
+  bottom: 40%;
+}
+
+#cb-pl1-45:checked ~ #game #piece-player-1 {
+  left: 40%;
+  bottom: 40%;
+}
+
+#cb-pl1-46:checked ~ #game #piece-player-1 {
+  left: 50%;
+  bottom: 40%;
+}
+
+#cb-pl1-47:checked ~ #game #piece-player-1 {
+  left: 60%;
+  bottom: 40%;
+}
+
+#cb-pl1-48:checked ~ #game #piece-player-1 {
+  left: 70%;
+  bottom: 40%;
+}
+
+#cb-pl1-49:checked ~ #game #piece-player-1 {
+  left: 80%;
+  bottom: 40%;
+}
+
+#cb-pl1-50:checked ~ #game #piece-player-1 {
+  left: 90%;
+  bottom: 40%;
+}
+
+#cb-pl1-51:checked ~ #game #piece-player-1 {
+  left: 90%;
+  bottom: 50%;
+}
+
+#cb-pl1-52:checked ~ #game #piece-player-1 {
+  left: 80%;
+  bottom: 50%;
+}
+
+#cb-pl1-53:checked ~ #game #piece-player-1 {
+  left: 70%;
+  bottom: 50%;
+}
+
+#cb-pl1-54:checked ~ #game #piece-player-1 {
+  left: 60%;
+  bottom: 50%;
+}
+
+#cb-pl1-55:checked ~ #game #piece-player-1 {
+  left: 50%;
+  bottom: 50%;
+}
+
+#cb-pl1-56:checked ~ #game #piece-player-1 {
+  left: 40%;
+  bottom: 50%;
+}
+
+#cb-pl1-57:checked ~ #game #piece-player-1 {
+  left: 30%;
+  bottom: 50%;
+}
+
+#cb-pl1-58:checked ~ #game #piece-player-1 {
+  left: 20%;
+  bottom: 50%;
+}
+
+#cb-pl1-59:checked ~ #game #piece-player-1 {
+  left: 10%;
+  bottom: 50%;
+}
+
+#cb-pl1-60:checked ~ #game #piece-player-1 {
+  left: 0%;
+  bottom: 50%;
+}
+
+#cb-pl1-61:checked ~ #game #piece-player-1 {
+  left: 0%;
+  bottom: 60%;
+}
+
+#cb-pl1-62:checked ~ #game #piece-player-1 {
+  left: 10%;
+  bottom: 60%;
+}
+
+#cb-pl1-63:checked ~ #game #piece-player-1 {
+  left: 20%;
+  bottom: 60%;
+}
+
+#cb-pl1-64:checked ~ #game #piece-player-1 {
+  left: 30%;
+  bottom: 60%;
+}
+
+#cb-pl1-65:checked ~ #game #piece-player-1 {
+  left: 40%;
+  bottom: 60%;
+}
+
+#cb-pl1-66:checked ~ #game #piece-player-1 {
+  left: 50%;
+  bottom: 60%;
+}
+
+#cb-pl1-67:checked ~ #game #piece-player-1 {
+  left: 60%;
+  bottom: 60%;
+}
+
+#cb-pl1-68:checked ~ #game #piece-player-1 {
+  left: 70%;
+  bottom: 60%;
+}
+
+#cb-pl1-69:checked ~ #game #piece-player-1 {
+  left: 80%;
+  bottom: 60%;
+}
+
+#cb-pl1-70:checked ~ #game #piece-player-1 {
+  left: 90%;
+  bottom: 60%;
+}
+
+#cb-pl1-71:checked ~ #game #piece-player-1 {
+  left: 90%;
+  bottom: 70%;
+}
+
+#cb-pl1-72:checked ~ #game #piece-player-1 {
+  left: 80%;
+  bottom: 70%;
+}
+
+#cb-pl1-73:checked ~ #game #piece-player-1 {
+  left: 70%;
+  bottom: 70%;
+}
+
+#cb-pl1-74:checked ~ #game #piece-player-1 {
+  left: 60%;
+  bottom: 70%;
+}
+
+#cb-pl1-75:checked ~ #game #piece-player-1 {
+  left: 50%;
+  bottom: 70%;
+}
+
+#cb-pl1-76:checked ~ #game #piece-player-1 {
+  left: 40%;
+  bottom: 70%;
+}
+
+#cb-pl1-77:checked ~ #game #piece-player-1 {
+  left: 30%;
+  bottom: 70%;
+}
+
+#cb-pl1-78:checked ~ #game #piece-player-1 {
+  left: 20%;
+  bottom: 70%;
+}
+
+#cb-pl1-79:checked ~ #game #piece-player-1 {
+  left: 10%;
+  bottom: 70%;
+}
+
+#cb-pl1-80:checked ~ #game #piece-player-1 {
+  left: 0%;
+  bottom: 70%;
+}
+
+#cb-pl1-81:checked ~ #game #piece-player-1 {
+  left: 0%;
+  bottom: 80%;
+}
+
+#cb-pl1-82:checked ~ #game #piece-player-1 {
+  left: 10%;
+  bottom: 80%;
+}
+
+#cb-pl1-83:checked ~ #game #piece-player-1 {
+  left: 20%;
+  bottom: 80%;
+}
+
+#cb-pl1-84:checked ~ #game #piece-player-1 {
+  left: 30%;
+  bottom: 80%;
+}
+
+#cb-pl1-85:checked ~ #game #piece-player-1 {
+  left: 40%;
+  bottom: 80%;
+}
+
+#cb-pl1-86:checked ~ #game #piece-player-1 {
+  left: 50%;
+  bottom: 80%;
+}
+
+#cb-pl1-87:checked ~ #game #piece-player-1 {
+  left: 60%;
+  bottom: 80%;
+}
+
+#cb-pl1-88:checked ~ #game #piece-player-1 {
+  left: 70%;
+  bottom: 80%;
+}
+
+#cb-pl1-89:checked ~ #game #piece-player-1 {
+  left: 80%;
+  bottom: 80%;
+}
+
+#cb-pl1-90:checked ~ #game #piece-player-1 {
+  left: 90%;
+  bottom: 80%;
+}
+
+#cb-pl1-91:checked ~ #game #piece-player-1 {
+  left: 90%;
+  bottom: 90%;
+}
+
+#cb-pl1-92:checked ~ #game #piece-player-1 {
+  left: 80%;
+  bottom: 90%;
+}
+
+#cb-pl1-93:checked ~ #game #piece-player-1 {
+  left: 70%;
+  bottom: 90%;
+}
+
+#cb-pl1-94:checked ~ #game #piece-player-1 {
+  left: 60%;
+  bottom: 90%;
+}
+
+#cb-pl1-95:checked ~ #game #piece-player-1 {
+  left: 50%;
+  bottom: 90%;
+}
+
+#cb-pl1-96:checked ~ #game #piece-player-1 {
+  left: 40%;
+  bottom: 90%;
+}
+
+#cb-pl1-97:checked ~ #game #piece-player-1 {
+  left: 30%;
+  bottom: 90%;
+}
+
+#cb-pl1-98:checked ~ #game #piece-player-1 {
+  left: 20%;
+  bottom: 90%;
+}
+
+#cb-pl1-99:checked ~ #game #piece-player-1 {
+  left: 10%;
+  bottom: 90%;
+}
+
+#cb-pl1-100:checked ~ #game #piece-player-1 {
+  left: 0%;
+  bottom: 90%;
+}
+
+#cb-pl1-101:checked ~ #game #piece-player-1 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl1-102:checked ~ #game #piece-player-1 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl1-103:checked ~ #game #piece-player-1 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl1-104:checked ~ #game #piece-player-1 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl1-105:checked ~ #game #piece-player-1 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl1-106:checked ~ #game #piece-player-1 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl2-0:checked ~ #game #piece-player-2 {
+  left: -10%;
+  bottom: 0;
+}
+
+#cb-pl2-1:checked ~ #game #piece-player-2 {
+  left: 0%;
+  bottom: 0%;
+}
+
+#cb-pl2-2:checked ~ #game #piece-player-2 {
+  left: 10%;
+  bottom: 0%;
+}
+
+#cb-pl2-3:checked ~ #game #piece-player-2 {
+  left: 20%;
+  bottom: 0%;
+}
+
+#cb-pl2-4:checked ~ #game #piece-player-2 {
+  left: 30%;
+  bottom: 0%;
+}
+
+#cb-pl2-5:checked ~ #game #piece-player-2 {
+  left: 40%;
+  bottom: 0%;
+}
+
+#cb-pl2-6:checked ~ #game #piece-player-2 {
+  left: 50%;
+  bottom: 0%;
+}
+
+#cb-pl2-7:checked ~ #game #piece-player-2 {
+  left: 60%;
+  bottom: 0%;
+}
+
+#cb-pl2-8:checked ~ #game #piece-player-2 {
+  left: 70%;
+  bottom: 0%;
+}
+
+#cb-pl2-9:checked ~ #game #piece-player-2 {
+  left: 80%;
+  bottom: 0%;
+}
+
+#cb-pl2-10:checked ~ #game #piece-player-2 {
+  left: 90%;
+  bottom: 0%;
+}
+
+#cb-pl2-11:checked ~ #game #piece-player-2 {
+  left: 90%;
+  bottom: 10%;
+}
+
+#cb-pl2-12:checked ~ #game #piece-player-2 {
+  left: 80%;
+  bottom: 10%;
+}
+
+#cb-pl2-13:checked ~ #game #piece-player-2 {
+  left: 70%;
+  bottom: 10%;
+}
+
+#cb-pl2-14:checked ~ #game #piece-player-2 {
+  left: 60%;
+  bottom: 10%;
+}
+
+#cb-pl2-15:checked ~ #game #piece-player-2 {
+  left: 50%;
+  bottom: 10%;
+}
+
+#cb-pl2-16:checked ~ #game #piece-player-2 {
+  left: 40%;
+  bottom: 10%;
+}
+
+#cb-pl2-17:checked ~ #game #piece-player-2 {
+  left: 30%;
+  bottom: 10%;
+}
+
+#cb-pl2-18:checked ~ #game #piece-player-2 {
+  left: 20%;
+  bottom: 10%;
+}
+
+#cb-pl2-19:checked ~ #game #piece-player-2 {
+  left: 10%;
+  bottom: 10%;
+}
+
+#cb-pl2-20:checked ~ #game #piece-player-2 {
+  left: 0%;
+  bottom: 10%;
+}
+
+#cb-pl2-21:checked ~ #game #piece-player-2 {
+  left: 0%;
+  bottom: 20%;
+}
+
+#cb-pl2-22:checked ~ #game #piece-player-2 {
+  left: 10%;
+  bottom: 20%;
+}
+
+#cb-pl2-23:checked ~ #game #piece-player-2 {
+  left: 20%;
+  bottom: 20%;
+}
+
+#cb-pl2-24:checked ~ #game #piece-player-2 {
+  left: 30%;
+  bottom: 20%;
+}
+
+#cb-pl2-25:checked ~ #game #piece-player-2 {
+  left: 40%;
+  bottom: 20%;
+}
+
+#cb-pl2-26:checked ~ #game #piece-player-2 {
+  left: 50%;
+  bottom: 20%;
+}
+
+#cb-pl2-27:checked ~ #game #piece-player-2 {
+  left: 60%;
+  bottom: 20%;
+}
+
+#cb-pl2-28:checked ~ #game #piece-player-2 {
+  left: 70%;
+  bottom: 20%;
+}
+
+#cb-pl2-29:checked ~ #game #piece-player-2 {
+  left: 80%;
+  bottom: 20%;
+}
+
+#cb-pl2-30:checked ~ #game #piece-player-2 {
+  left: 90%;
+  bottom: 20%;
+}
+
+#cb-pl2-31:checked ~ #game #piece-player-2 {
+  left: 90%;
+  bottom: 30%;
+}
+
+#cb-pl2-32:checked ~ #game #piece-player-2 {
+  left: 80%;
+  bottom: 30%;
+}
+
+#cb-pl2-33:checked ~ #game #piece-player-2 {
+  left: 70%;
+  bottom: 30%;
+}
+
+#cb-pl2-34:checked ~ #game #piece-player-2 {
+  left: 60%;
+  bottom: 30%;
+}
+
+#cb-pl2-35:checked ~ #game #piece-player-2 {
+  left: 50%;
+  bottom: 30%;
+}
+
+#cb-pl2-36:checked ~ #game #piece-player-2 {
+  left: 40%;
+  bottom: 30%;
+}
+
+#cb-pl2-37:checked ~ #game #piece-player-2 {
+  left: 30%;
+  bottom: 30%;
+}
+
+#cb-pl2-38:checked ~ #game #piece-player-2 {
+  left: 20%;
+  bottom: 30%;
+}
+
+#cb-pl2-39:checked ~ #game #piece-player-2 {
+  left: 10%;
+  bottom: 30%;
+}
+
+#cb-pl2-40:checked ~ #game #piece-player-2 {
+  left: 0%;
+  bottom: 30%;
+}
+
+#cb-pl2-41:checked ~ #game #piece-player-2 {
+  left: 0%;
+  bottom: 40%;
+}
+
+#cb-pl2-42:checked ~ #game #piece-player-2 {
+  left: 10%;
+  bottom: 40%;
+}
+
+#cb-pl2-43:checked ~ #game #piece-player-2 {
+  left: 20%;
+  bottom: 40%;
+}
+
+#cb-pl2-44:checked ~ #game #piece-player-2 {
+  left: 30%;
+  bottom: 40%;
+}
+
+#cb-pl2-45:checked ~ #game #piece-player-2 {
+  left: 40%;
+  bottom: 40%;
+}
+
+#cb-pl2-46:checked ~ #game #piece-player-2 {
+  left: 50%;
+  bottom: 40%;
+}
+
+#cb-pl2-47:checked ~ #game #piece-player-2 {
+  left: 60%;
+  bottom: 40%;
+}
+
+#cb-pl2-48:checked ~ #game #piece-player-2 {
+  left: 70%;
+  bottom: 40%;
+}
+
+#cb-pl2-49:checked ~ #game #piece-player-2 {
+  left: 80%;
+  bottom: 40%;
+}
+
+#cb-pl2-50:checked ~ #game #piece-player-2 {
+  left: 90%;
+  bottom: 40%;
+}
+
+#cb-pl2-51:checked ~ #game #piece-player-2 {
+  left: 90%;
+  bottom: 50%;
+}
+
+#cb-pl2-52:checked ~ #game #piece-player-2 {
+  left: 80%;
+  bottom: 50%;
+}
+
+#cb-pl2-53:checked ~ #game #piece-player-2 {
+  left: 70%;
+  bottom: 50%;
+}
+
+#cb-pl2-54:checked ~ #game #piece-player-2 {
+  left: 60%;
+  bottom: 50%;
+}
+
+#cb-pl2-55:checked ~ #game #piece-player-2 {
+  left: 50%;
+  bottom: 50%;
+}
+
+#cb-pl2-56:checked ~ #game #piece-player-2 {
+  left: 40%;
+  bottom: 50%;
+}
+
+#cb-pl2-57:checked ~ #game #piece-player-2 {
+  left: 30%;
+  bottom: 50%;
+}
+
+#cb-pl2-58:checked ~ #game #piece-player-2 {
+  left: 20%;
+  bottom: 50%;
+}
+
+#cb-pl2-59:checked ~ #game #piece-player-2 {
+  left: 10%;
+  bottom: 50%;
+}
+
+#cb-pl2-60:checked ~ #game #piece-player-2 {
+  left: 0%;
+  bottom: 50%;
+}
+
+#cb-pl2-61:checked ~ #game #piece-player-2 {
+  left: 0%;
+  bottom: 60%;
+}
+
+#cb-pl2-62:checked ~ #game #piece-player-2 {
+  left: 10%;
+  bottom: 60%;
+}
+
+#cb-pl2-63:checked ~ #game #piece-player-2 {
+  left: 20%;
+  bottom: 60%;
+}
+
+#cb-pl2-64:checked ~ #game #piece-player-2 {
+  left: 30%;
+  bottom: 60%;
+}
+
+#cb-pl2-65:checked ~ #game #piece-player-2 {
+  left: 40%;
+  bottom: 60%;
+}
+
+#cb-pl2-66:checked ~ #game #piece-player-2 {
+  left: 50%;
+  bottom: 60%;
+}
+
+#cb-pl2-67:checked ~ #game #piece-player-2 {
+  left: 60%;
+  bottom: 60%;
+}
+
+#cb-pl2-68:checked ~ #game #piece-player-2 {
+  left: 70%;
+  bottom: 60%;
+}
+
+#cb-pl2-69:checked ~ #game #piece-player-2 {
+  left: 80%;
+  bottom: 60%;
+}
+
+#cb-pl2-70:checked ~ #game #piece-player-2 {
+  left: 90%;
+  bottom: 60%;
+}
+
+#cb-pl2-71:checked ~ #game #piece-player-2 {
+  left: 90%;
+  bottom: 70%;
+}
+
+#cb-pl2-72:checked ~ #game #piece-player-2 {
+  left: 80%;
+  bottom: 70%;
+}
+
+#cb-pl2-73:checked ~ #game #piece-player-2 {
+  left: 70%;
+  bottom: 70%;
+}
+
+#cb-pl2-74:checked ~ #game #piece-player-2 {
+  left: 60%;
+  bottom: 70%;
+}
+
+#cb-pl2-75:checked ~ #game #piece-player-2 {
+  left: 50%;
+  bottom: 70%;
+}
+
+#cb-pl2-76:checked ~ #game #piece-player-2 {
+  left: 40%;
+  bottom: 70%;
+}
+
+#cb-pl2-77:checked ~ #game #piece-player-2 {
+  left: 30%;
+  bottom: 70%;
+}
+
+#cb-pl2-78:checked ~ #game #piece-player-2 {
+  left: 20%;
+  bottom: 70%;
+}
+
+#cb-pl2-79:checked ~ #game #piece-player-2 {
+  left: 10%;
+  bottom: 70%;
+}
+
+#cb-pl2-80:checked ~ #game #piece-player-2 {
+  left: 0%;
+  bottom: 70%;
+}
+
+#cb-pl2-81:checked ~ #game #piece-player-2 {
+  left: 0%;
+  bottom: 80%;
+}
+
+#cb-pl2-82:checked ~ #game #piece-player-2 {
+  left: 10%;
+  bottom: 80%;
+}
+
+#cb-pl2-83:checked ~ #game #piece-player-2 {
+  left: 20%;
+  bottom: 80%;
+}
+
+#cb-pl2-84:checked ~ #game #piece-player-2 {
+  left: 30%;
+  bottom: 80%;
+}
+
+#cb-pl2-85:checked ~ #game #piece-player-2 {
+  left: 40%;
+  bottom: 80%;
+}
+
+#cb-pl2-86:checked ~ #game #piece-player-2 {
+  left: 50%;
+  bottom: 80%;
+}
+
+#cb-pl2-87:checked ~ #game #piece-player-2 {
+  left: 60%;
+  bottom: 80%;
+}
+
+#cb-pl2-88:checked ~ #game #piece-player-2 {
+  left: 70%;
+  bottom: 80%;
+}
+
+#cb-pl2-89:checked ~ #game #piece-player-2 {
+  left: 80%;
+  bottom: 80%;
+}
+
+#cb-pl2-90:checked ~ #game #piece-player-2 {
+  left: 90%;
+  bottom: 80%;
+}
+
+#cb-pl2-91:checked ~ #game #piece-player-2 {
+  left: 90%;
+  bottom: 90%;
+}
+
+#cb-pl2-92:checked ~ #game #piece-player-2 {
+  left: 80%;
+  bottom: 90%;
+}
+
+#cb-pl2-93:checked ~ #game #piece-player-2 {
+  left: 70%;
+  bottom: 90%;
+}
+
+#cb-pl2-94:checked ~ #game #piece-player-2 {
+  left: 60%;
+  bottom: 90%;
+}
+
+#cb-pl2-95:checked ~ #game #piece-player-2 {
+  left: 50%;
+  bottom: 90%;
+}
+
+#cb-pl2-96:checked ~ #game #piece-player-2 {
+  left: 40%;
+  bottom: 90%;
+}
+
+#cb-pl2-97:checked ~ #game #piece-player-2 {
+  left: 30%;
+  bottom: 90%;
+}
+
+#cb-pl2-98:checked ~ #game #piece-player-2 {
+  left: 20%;
+  bottom: 90%;
+}
+
+#cb-pl2-99:checked ~ #game #piece-player-2 {
+  left: 10%;
+  bottom: 90%;
+}
+
+#cb-pl2-100:checked ~ #game #piece-player-2 {
+  left: 0%;
+  bottom: 90%;
+}
+
+#cb-pl2-101:checked ~ #game #piece-player-2 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl2-102:checked ~ #game #piece-player-2 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl2-103:checked ~ #game #piece-player-2 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl2-104:checked ~ #game #piece-player-2 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl2-105:checked ~ #game #piece-player-2 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl2-106:checked ~ #game #piece-player-2 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl3-0:checked ~ #game #piece-player-3 {
+  left: -10%;
+  bottom: 0;
+}
+
+#cb-pl3-1:checked ~ #game #piece-player-3 {
+  left: 0%;
+  bottom: 0%;
+}
+
+#cb-pl3-2:checked ~ #game #piece-player-3 {
+  left: 10%;
+  bottom: 0%;
+}
+
+#cb-pl3-3:checked ~ #game #piece-player-3 {
+  left: 20%;
+  bottom: 0%;
+}
+
+#cb-pl3-4:checked ~ #game #piece-player-3 {
+  left: 30%;
+  bottom: 0%;
+}
+
+#cb-pl3-5:checked ~ #game #piece-player-3 {
+  left: 40%;
+  bottom: 0%;
+}
+
+#cb-pl3-6:checked ~ #game #piece-player-3 {
+  left: 50%;
+  bottom: 0%;
+}
+
+#cb-pl3-7:checked ~ #game #piece-player-3 {
+  left: 60%;
+  bottom: 0%;
+}
+
+#cb-pl3-8:checked ~ #game #piece-player-3 {
+  left: 70%;
+  bottom: 0%;
+}
+
+#cb-pl3-9:checked ~ #game #piece-player-3 {
+  left: 80%;
+  bottom: 0%;
+}
+
+#cb-pl3-10:checked ~ #game #piece-player-3 {
+  left: 90%;
+  bottom: 0%;
+}
+
+#cb-pl3-11:checked ~ #game #piece-player-3 {
+  left: 90%;
+  bottom: 10%;
+}
+
+#cb-pl3-12:checked ~ #game #piece-player-3 {
+  left: 80%;
+  bottom: 10%;
+}
+
+#cb-pl3-13:checked ~ #game #piece-player-3 {
+  left: 70%;
+  bottom: 10%;
+}
+
+#cb-pl3-14:checked ~ #game #piece-player-3 {
+  left: 60%;
+  bottom: 10%;
+}
+
+#cb-pl3-15:checked ~ #game #piece-player-3 {
+  left: 50%;
+  bottom: 10%;
+}
+
+#cb-pl3-16:checked ~ #game #piece-player-3 {
+  left: 40%;
+  bottom: 10%;
+}
+
+#cb-pl3-17:checked ~ #game #piece-player-3 {
+  left: 30%;
+  bottom: 10%;
+}
+
+#cb-pl3-18:checked ~ #game #piece-player-3 {
+  left: 20%;
+  bottom: 10%;
+}
+
+#cb-pl3-19:checked ~ #game #piece-player-3 {
+  left: 10%;
+  bottom: 10%;
+}
+
+#cb-pl3-20:checked ~ #game #piece-player-3 {
+  left: 0%;
+  bottom: 10%;
+}
+
+#cb-pl3-21:checked ~ #game #piece-player-3 {
+  left: 0%;
+  bottom: 20%;
+}
+
+#cb-pl3-22:checked ~ #game #piece-player-3 {
+  left: 10%;
+  bottom: 20%;
+}
+
+#cb-pl3-23:checked ~ #game #piece-player-3 {
+  left: 20%;
+  bottom: 20%;
+}
+
+#cb-pl3-24:checked ~ #game #piece-player-3 {
+  left: 30%;
+  bottom: 20%;
+}
+
+#cb-pl3-25:checked ~ #game #piece-player-3 {
+  left: 40%;
+  bottom: 20%;
+}
+
+#cb-pl3-26:checked ~ #game #piece-player-3 {
+  left: 50%;
+  bottom: 20%;
+}
+
+#cb-pl3-27:checked ~ #game #piece-player-3 {
+  left: 60%;
+  bottom: 20%;
+}
+
+#cb-pl3-28:checked ~ #game #piece-player-3 {
+  left: 70%;
+  bottom: 20%;
+}
+
+#cb-pl3-29:checked ~ #game #piece-player-3 {
+  left: 80%;
+  bottom: 20%;
+}
+
+#cb-pl3-30:checked ~ #game #piece-player-3 {
+  left: 90%;
+  bottom: 20%;
+}
+
+#cb-pl3-31:checked ~ #game #piece-player-3 {
+  left: 90%;
+  bottom: 30%;
+}
+
+#cb-pl3-32:checked ~ #game #piece-player-3 {
+  left: 80%;
+  bottom: 30%;
+}
+
+#cb-pl3-33:checked ~ #game #piece-player-3 {
+  left: 70%;
+  bottom: 30%;
+}
+
+#cb-pl3-34:checked ~ #game #piece-player-3 {
+  left: 60%;
+  bottom: 30%;
+}
+
+#cb-pl3-35:checked ~ #game #piece-player-3 {
+  left: 50%;
+  bottom: 30%;
+}
+
+#cb-pl3-36:checked ~ #game #piece-player-3 {
+  left: 40%;
+  bottom: 30%;
+}
+
+#cb-pl3-37:checked ~ #game #piece-player-3 {
+  left: 30%;
+  bottom: 30%;
+}
+
+#cb-pl3-38:checked ~ #game #piece-player-3 {
+  left: 20%;
+  bottom: 30%;
+}
+
+#cb-pl3-39:checked ~ #game #piece-player-3 {
+  left: 10%;
+  bottom: 30%;
+}
+
+#cb-pl3-40:checked ~ #game #piece-player-3 {
+  left: 0%;
+  bottom: 30%;
+}
+
+#cb-pl3-41:checked ~ #game #piece-player-3 {
+  left: 0%;
+  bottom: 40%;
+}
+
+#cb-pl3-42:checked ~ #game #piece-player-3 {
+  left: 10%;
+  bottom: 40%;
+}
+
+#cb-pl3-43:checked ~ #game #piece-player-3 {
+  left: 20%;
+  bottom: 40%;
+}
+
+#cb-pl3-44:checked ~ #game #piece-player-3 {
+  left: 30%;
+  bottom: 40%;
+}
+
+#cb-pl3-45:checked ~ #game #piece-player-3 {
+  left: 40%;
+  bottom: 40%;
+}
+
+#cb-pl3-46:checked ~ #game #piece-player-3 {
+  left: 50%;
+  bottom: 40%;
+}
+
+#cb-pl3-47:checked ~ #game #piece-player-3 {
+  left: 60%;
+  bottom: 40%;
+}
+
+#cb-pl3-48:checked ~ #game #piece-player-3 {
+  left: 70%;
+  bottom: 40%;
+}
+
+#cb-pl3-49:checked ~ #game #piece-player-3 {
+  left: 80%;
+  bottom: 40%;
+}
+
+#cb-pl3-50:checked ~ #game #piece-player-3 {
+  left: 90%;
+  bottom: 40%;
+}
+
+#cb-pl3-51:checked ~ #game #piece-player-3 {
+  left: 90%;
+  bottom: 50%;
+}
+
+#cb-pl3-52:checked ~ #game #piece-player-3 {
+  left: 80%;
+  bottom: 50%;
+}
+
+#cb-pl3-53:checked ~ #game #piece-player-3 {
+  left: 70%;
+  bottom: 50%;
+}
+
+#cb-pl3-54:checked ~ #game #piece-player-3 {
+  left: 60%;
+  bottom: 50%;
+}
+
+#cb-pl3-55:checked ~ #game #piece-player-3 {
+  left: 50%;
+  bottom: 50%;
+}
+
+#cb-pl3-56:checked ~ #game #piece-player-3 {
+  left: 40%;
+  bottom: 50%;
+}
+
+#cb-pl3-57:checked ~ #game #piece-player-3 {
+  left: 30%;
+  bottom: 50%;
+}
+
+#cb-pl3-58:checked ~ #game #piece-player-3 {
+  left: 20%;
+  bottom: 50%;
+}
+
+#cb-pl3-59:checked ~ #game #piece-player-3 {
+  left: 10%;
+  bottom: 50%;
+}
+
+#cb-pl3-60:checked ~ #game #piece-player-3 {
+  left: 0%;
+  bottom: 50%;
+}
+
+#cb-pl3-61:checked ~ #game #piece-player-3 {
+  left: 0%;
+  bottom: 60%;
+}
+
+#cb-pl3-62:checked ~ #game #piece-player-3 {
+  left: 10%;
+  bottom: 60%;
+}
+
+#cb-pl3-63:checked ~ #game #piece-player-3 {
+  left: 20%;
+  bottom: 60%;
+}
+
+#cb-pl3-64:checked ~ #game #piece-player-3 {
+  left: 30%;
+  bottom: 60%;
+}
+
+#cb-pl3-65:checked ~ #game #piece-player-3 {
+  left: 40%;
+  bottom: 60%;
+}
+
+#cb-pl3-66:checked ~ #game #piece-player-3 {
+  left: 50%;
+  bottom: 60%;
+}
+
+#cb-pl3-67:checked ~ #game #piece-player-3 {
+  left: 60%;
+  bottom: 60%;
+}
+
+#cb-pl3-68:checked ~ #game #piece-player-3 {
+  left: 70%;
+  bottom: 60%;
+}
+
+#cb-pl3-69:checked ~ #game #piece-player-3 {
+  left: 80%;
+  bottom: 60%;
+}
+
+#cb-pl3-70:checked ~ #game #piece-player-3 {
+  left: 90%;
+  bottom: 60%;
+}
+
+#cb-pl3-71:checked ~ #game #piece-player-3 {
+  left: 90%;
+  bottom: 70%;
+}
+
+#cb-pl3-72:checked ~ #game #piece-player-3 {
+  left: 80%;
+  bottom: 70%;
+}
+
+#cb-pl3-73:checked ~ #game #piece-player-3 {
+  left: 70%;
+  bottom: 70%;
+}
+
+#cb-pl3-74:checked ~ #game #piece-player-3 {
+  left: 60%;
+  bottom: 70%;
+}
+
+#cb-pl3-75:checked ~ #game #piece-player-3 {
+  left: 50%;
+  bottom: 70%;
+}
+
+#cb-pl3-76:checked ~ #game #piece-player-3 {
+  left: 40%;
+  bottom: 70%;
+}
+
+#cb-pl3-77:checked ~ #game #piece-player-3 {
+  left: 30%;
+  bottom: 70%;
+}
+
+#cb-pl3-78:checked ~ #game #piece-player-3 {
+  left: 20%;
+  bottom: 70%;
+}
+
+#cb-pl3-79:checked ~ #game #piece-player-3 {
+  left: 10%;
+  bottom: 70%;
+}
+
+#cb-pl3-80:checked ~ #game #piece-player-3 {
+  left: 0%;
+  bottom: 70%;
+}
+
+#cb-pl3-81:checked ~ #game #piece-player-3 {
+  left: 0%;
+  bottom: 80%;
+}
+
+#cb-pl3-82:checked ~ #game #piece-player-3 {
+  left: 10%;
+  bottom: 80%;
+}
+
+#cb-pl3-83:checked ~ #game #piece-player-3 {
+  left: 20%;
+  bottom: 80%;
+}
+
+#cb-pl3-84:checked ~ #game #piece-player-3 {
+  left: 30%;
+  bottom: 80%;
+}
+
+#cb-pl3-85:checked ~ #game #piece-player-3 {
+  left: 40%;
+  bottom: 80%;
+}
+
+#cb-pl3-86:checked ~ #game #piece-player-3 {
+  left: 50%;
+  bottom: 80%;
+}
+
+#cb-pl3-87:checked ~ #game #piece-player-3 {
+  left: 60%;
+  bottom: 80%;
+}
+
+#cb-pl3-88:checked ~ #game #piece-player-3 {
+  left: 70%;
+  bottom: 80%;
+}
+
+#cb-pl3-89:checked ~ #game #piece-player-3 {
+  left: 80%;
+  bottom: 80%;
+}
+
+#cb-pl3-90:checked ~ #game #piece-player-3 {
+  left: 90%;
+  bottom: 80%;
+}
+
+#cb-pl3-91:checked ~ #game #piece-player-3 {
+  left: 90%;
+  bottom: 90%;
+}
+
+#cb-pl3-92:checked ~ #game #piece-player-3 {
+  left: 80%;
+  bottom: 90%;
+}
+
+#cb-pl3-93:checked ~ #game #piece-player-3 {
+  left: 70%;
+  bottom: 90%;
+}
+
+#cb-pl3-94:checked ~ #game #piece-player-3 {
+  left: 60%;
+  bottom: 90%;
+}
+
+#cb-pl3-95:checked ~ #game #piece-player-3 {
+  left: 50%;
+  bottom: 90%;
+}
+
+#cb-pl3-96:checked ~ #game #piece-player-3 {
+  left: 40%;
+  bottom: 90%;
+}
+
+#cb-pl3-97:checked ~ #game #piece-player-3 {
+  left: 30%;
+  bottom: 90%;
+}
+
+#cb-pl3-98:checked ~ #game #piece-player-3 {
+  left: 20%;
+  bottom: 90%;
+}
+
+#cb-pl3-99:checked ~ #game #piece-player-3 {
+  left: 10%;
+  bottom: 90%;
+}
+
+#cb-pl3-100:checked ~ #game #piece-player-3 {
+  left: 0%;
+  bottom: 90%;
+}
+
+#cb-pl3-101:checked ~ #game #piece-player-3 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl3-102:checked ~ #game #piece-player-3 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl3-103:checked ~ #game #piece-player-3 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl3-104:checked ~ #game #piece-player-3 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl3-105:checked ~ #game #piece-player-3 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl3-106:checked ~ #game #piece-player-3 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl4-0:checked ~ #game #piece-player-4 {
+  left: -10%;
+  bottom: 0;
+}
+
+#cb-pl4-1:checked ~ #game #piece-player-4 {
+  left: 0%;
+  bottom: 0%;
+}
+
+#cb-pl4-2:checked ~ #game #piece-player-4 {
+  left: 10%;
+  bottom: 0%;
+}
+
+#cb-pl4-3:checked ~ #game #piece-player-4 {
+  left: 20%;
+  bottom: 0%;
+}
+
+#cb-pl4-4:checked ~ #game #piece-player-4 {
+  left: 30%;
+  bottom: 0%;
+}
+
+#cb-pl4-5:checked ~ #game #piece-player-4 {
+  left: 40%;
+  bottom: 0%;
+}
+
+#cb-pl4-6:checked ~ #game #piece-player-4 {
+  left: 50%;
+  bottom: 0%;
+}
+
+#cb-pl4-7:checked ~ #game #piece-player-4 {
+  left: 60%;
+  bottom: 0%;
+}
+
+#cb-pl4-8:checked ~ #game #piece-player-4 {
+  left: 70%;
+  bottom: 0%;
+}
+
+#cb-pl4-9:checked ~ #game #piece-player-4 {
+  left: 80%;
+  bottom: 0%;
+}
+
+#cb-pl4-10:checked ~ #game #piece-player-4 {
+  left: 90%;
+  bottom: 0%;
+}
+
+#cb-pl4-11:checked ~ #game #piece-player-4 {
+  left: 90%;
+  bottom: 10%;
+}
+
+#cb-pl4-12:checked ~ #game #piece-player-4 {
+  left: 80%;
+  bottom: 10%;
+}
+
+#cb-pl4-13:checked ~ #game #piece-player-4 {
+  left: 70%;
+  bottom: 10%;
+}
+
+#cb-pl4-14:checked ~ #game #piece-player-4 {
+  left: 60%;
+  bottom: 10%;
+}
+
+#cb-pl4-15:checked ~ #game #piece-player-4 {
+  left: 50%;
+  bottom: 10%;
+}
+
+#cb-pl4-16:checked ~ #game #piece-player-4 {
+  left: 40%;
+  bottom: 10%;
+}
+
+#cb-pl4-17:checked ~ #game #piece-player-4 {
+  left: 30%;
+  bottom: 10%;
+}
+
+#cb-pl4-18:checked ~ #game #piece-player-4 {
+  left: 20%;
+  bottom: 10%;
+}
+
+#cb-pl4-19:checked ~ #game #piece-player-4 {
+  left: 10%;
+  bottom: 10%;
+}
+
+#cb-pl4-20:checked ~ #game #piece-player-4 {
+  left: 0%;
+  bottom: 10%;
+}
+
+#cb-pl4-21:checked ~ #game #piece-player-4 {
+  left: 0%;
+  bottom: 20%;
+}
+
+#cb-pl4-22:checked ~ #game #piece-player-4 {
+  left: 10%;
+  bottom: 20%;
+}
+
+#cb-pl4-23:checked ~ #game #piece-player-4 {
+  left: 20%;
+  bottom: 20%;
+}
+
+#cb-pl4-24:checked ~ #game #piece-player-4 {
+  left: 30%;
+  bottom: 20%;
+}
+
+#cb-pl4-25:checked ~ #game #piece-player-4 {
+  left: 40%;
+  bottom: 20%;
+}
+
+#cb-pl4-26:checked ~ #game #piece-player-4 {
+  left: 50%;
+  bottom: 20%;
+}
+
+#cb-pl4-27:checked ~ #game #piece-player-4 {
+  left: 60%;
+  bottom: 20%;
+}
+
+#cb-pl4-28:checked ~ #game #piece-player-4 {
+  left: 70%;
+  bottom: 20%;
+}
+
+#cb-pl4-29:checked ~ #game #piece-player-4 {
+  left: 80%;
+  bottom: 20%;
+}
+
+#cb-pl4-30:checked ~ #game #piece-player-4 {
+  left: 90%;
+  bottom: 20%;
+}
+
+#cb-pl4-31:checked ~ #game #piece-player-4 {
+  left: 90%;
+  bottom: 30%;
+}
+
+#cb-pl4-32:checked ~ #game #piece-player-4 {
+  left: 80%;
+  bottom: 30%;
+}
+
+#cb-pl4-33:checked ~ #game #piece-player-4 {
+  left: 70%;
+  bottom: 30%;
+}
+
+#cb-pl4-34:checked ~ #game #piece-player-4 {
+  left: 60%;
+  bottom: 30%;
+}
+
+#cb-pl4-35:checked ~ #game #piece-player-4 {
+  left: 50%;
+  bottom: 30%;
+}
+
+#cb-pl4-36:checked ~ #game #piece-player-4 {
+  left: 40%;
+  bottom: 30%;
+}
+
+#cb-pl4-37:checked ~ #game #piece-player-4 {
+  left: 30%;
+  bottom: 30%;
+}
+
+#cb-pl4-38:checked ~ #game #piece-player-4 {
+  left: 20%;
+  bottom: 30%;
+}
+
+#cb-pl4-39:checked ~ #game #piece-player-4 {
+  left: 10%;
+  bottom: 30%;
+}
+
+#cb-pl4-40:checked ~ #game #piece-player-4 {
+  left: 0%;
+  bottom: 30%;
+}
+
+#cb-pl4-41:checked ~ #game #piece-player-4 {
+  left: 0%;
+  bottom: 40%;
+}
+
+#cb-pl4-42:checked ~ #game #piece-player-4 {
+  left: 10%;
+  bottom: 40%;
+}
+
+#cb-pl4-43:checked ~ #game #piece-player-4 {
+  left: 20%;
+  bottom: 40%;
+}
+
+#cb-pl4-44:checked ~ #game #piece-player-4 {
+  left: 30%;
+  bottom: 40%;
+}
+
+#cb-pl4-45:checked ~ #game #piece-player-4 {
+  left: 40%;
+  bottom: 40%;
+}
+
+#cb-pl4-46:checked ~ #game #piece-player-4 {
+  left: 50%;
+  bottom: 40%;
+}
+
+#cb-pl4-47:checked ~ #game #piece-player-4 {
+  left: 60%;
+  bottom: 40%;
+}
+
+#cb-pl4-48:checked ~ #game #piece-player-4 {
+  left: 70%;
+  bottom: 40%;
+}
+
+#cb-pl4-49:checked ~ #game #piece-player-4 {
+  left: 80%;
+  bottom: 40%;
+}
+
+#cb-pl4-50:checked ~ #game #piece-player-4 {
+  left: 90%;
+  bottom: 40%;
+}
+
+#cb-pl4-51:checked ~ #game #piece-player-4 {
+  left: 90%;
+  bottom: 50%;
+}
+
+#cb-pl4-52:checked ~ #game #piece-player-4 {
+  left: 80%;
+  bottom: 50%;
+}
+
+#cb-pl4-53:checked ~ #game #piece-player-4 {
+  left: 70%;
+  bottom: 50%;
+}
+
+#cb-pl4-54:checked ~ #game #piece-player-4 {
+  left: 60%;
+  bottom: 50%;
+}
+
+#cb-pl4-55:checked ~ #game #piece-player-4 {
+  left: 50%;
+  bottom: 50%;
+}
+
+#cb-pl4-56:checked ~ #game #piece-player-4 {
+  left: 40%;
+  bottom: 50%;
+}
+
+#cb-pl4-57:checked ~ #game #piece-player-4 {
+  left: 30%;
+  bottom: 50%;
+}
+
+#cb-pl4-58:checked ~ #game #piece-player-4 {
+  left: 20%;
+  bottom: 50%;
+}
+
+#cb-pl4-59:checked ~ #game #piece-player-4 {
+  left: 10%;
+  bottom: 50%;
+}
+
+#cb-pl4-60:checked ~ #game #piece-player-4 {
+  left: 0%;
+  bottom: 50%;
+}
+
+#cb-pl4-61:checked ~ #game #piece-player-4 {
+  left: 0%;
+  bottom: 60%;
+}
+
+#cb-pl4-62:checked ~ #game #piece-player-4 {
+  left: 10%;
+  bottom: 60%;
+}
+
+#cb-pl4-63:checked ~ #game #piece-player-4 {
+  left: 20%;
+  bottom: 60%;
+}
+
+#cb-pl4-64:checked ~ #game #piece-player-4 {
+  left: 30%;
+  bottom: 60%;
+}
+
+#cb-pl4-65:checked ~ #game #piece-player-4 {
+  left: 40%;
+  bottom: 60%;
+}
+
+#cb-pl4-66:checked ~ #game #piece-player-4 {
+  left: 50%;
+  bottom: 60%;
+}
+
+#cb-pl4-67:checked ~ #game #piece-player-4 {
+  left: 60%;
+  bottom: 60%;
+}
+
+#cb-pl4-68:checked ~ #game #piece-player-4 {
+  left: 70%;
+  bottom: 60%;
+}
+
+#cb-pl4-69:checked ~ #game #piece-player-4 {
+  left: 80%;
+  bottom: 60%;
+}
+
+#cb-pl4-70:checked ~ #game #piece-player-4 {
+  left: 90%;
+  bottom: 60%;
+}
+
+#cb-pl4-71:checked ~ #game #piece-player-4 {
+  left: 90%;
+  bottom: 70%;
+}
+
+#cb-pl4-72:checked ~ #game #piece-player-4 {
+  left: 80%;
+  bottom: 70%;
+}
+
+#cb-pl4-73:checked ~ #game #piece-player-4 {
+  left: 70%;
+  bottom: 70%;
+}
+
+#cb-pl4-74:checked ~ #game #piece-player-4 {
+  left: 60%;
+  bottom: 70%;
+}
+
+#cb-pl4-75:checked ~ #game #piece-player-4 {
+  left: 50%;
+  bottom: 70%;
+}
+
+#cb-pl4-76:checked ~ #game #piece-player-4 {
+  left: 40%;
+  bottom: 70%;
+}
+
+#cb-pl4-77:checked ~ #game #piece-player-4 {
+  left: 30%;
+  bottom: 70%;
+}
+
+#cb-pl4-78:checked ~ #game #piece-player-4 {
+  left: 20%;
+  bottom: 70%;
+}
+
+#cb-pl4-79:checked ~ #game #piece-player-4 {
+  left: 10%;
+  bottom: 70%;
+}
+
+#cb-pl4-80:checked ~ #game #piece-player-4 {
+  left: 0%;
+  bottom: 70%;
+}
+
+#cb-pl4-81:checked ~ #game #piece-player-4 {
+  left: 0%;
+  bottom: 80%;
+}
+
+#cb-pl4-82:checked ~ #game #piece-player-4 {
+  left: 10%;
+  bottom: 80%;
+}
+
+#cb-pl4-83:checked ~ #game #piece-player-4 {
+  left: 20%;
+  bottom: 80%;
+}
+
+#cb-pl4-84:checked ~ #game #piece-player-4 {
+  left: 30%;
+  bottom: 80%;
+}
+
+#cb-pl4-85:checked ~ #game #piece-player-4 {
+  left: 40%;
+  bottom: 80%;
+}
+
+#cb-pl4-86:checked ~ #game #piece-player-4 {
+  left: 50%;
+  bottom: 80%;
+}
+
+#cb-pl4-87:checked ~ #game #piece-player-4 {
+  left: 60%;
+  bottom: 80%;
+}
+
+#cb-pl4-88:checked ~ #game #piece-player-4 {
+  left: 70%;
+  bottom: 80%;
+}
+
+#cb-pl4-89:checked ~ #game #piece-player-4 {
+  left: 80%;
+  bottom: 80%;
+}
+
+#cb-pl4-90:checked ~ #game #piece-player-4 {
+  left: 90%;
+  bottom: 80%;
+}
+
+#cb-pl4-91:checked ~ #game #piece-player-4 {
+  left: 90%;
+  bottom: 90%;
+}
+
+#cb-pl4-92:checked ~ #game #piece-player-4 {
+  left: 80%;
+  bottom: 90%;
+}
+
+#cb-pl4-93:checked ~ #game #piece-player-4 {
+  left: 70%;
+  bottom: 90%;
+}
+
+#cb-pl4-94:checked ~ #game #piece-player-4 {
+  left: 60%;
+  bottom: 90%;
+}
+
+#cb-pl4-95:checked ~ #game #piece-player-4 {
+  left: 50%;
+  bottom: 90%;
+}
+
+#cb-pl4-96:checked ~ #game #piece-player-4 {
+  left: 40%;
+  bottom: 90%;
+}
+
+#cb-pl4-97:checked ~ #game #piece-player-4 {
+  left: 30%;
+  bottom: 90%;
+}
+
+#cb-pl4-98:checked ~ #game #piece-player-4 {
+  left: 20%;
+  bottom: 90%;
+}
+
+#cb-pl4-99:checked ~ #game #piece-player-4 {
+  left: 10%;
+  bottom: 90%;
+}
+
+#cb-pl4-100:checked ~ #game #piece-player-4 {
+  left: 0%;
+  bottom: 90%;
+}
+
+#cb-pl4-101:checked ~ #game #piece-player-4 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl4-102:checked ~ #game #piece-player-4 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl4-103:checked ~ #game #piece-player-4 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl4-104:checked ~ #game #piece-player-4 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl4-105:checked ~ #game #piece-player-4 {
+  left: 0;
+  bottom: 90%;
+}
+
+#cb-pl4-106:checked ~ #game #piece-player-4 {
+  left: 0;
+  bottom: 90%;
+}
+
+#players1:checked ~ #game #piece-player-2 {
+  display: none !important;
+}
+
+#players1:checked ~ #game #piece-player-3 {
+  display: none !important;
+}
+
+#players1:checked ~ #game #piece-player-4 {
+  display: none !important;
+}
+
+#players2:checked ~ #game #piece-player-3 {
+  display: none !important;
+}
+
+#players2:checked ~ #game #piece-player-4 {
+  display: none !important;
+}
+
+#players3:checked ~ #game #piece-player-4 {
+  display: none !important;
+}
+
+#snake-popup, #ladder-popup, #home-popup, #congratulations {
+  opacity: 0;
+  z-index: -1;
+  transition: opacity 0s;
+}
+#snake-popup label, #ladder-popup label, #home-popup label, #congratulations label {
+  display: none;
+}
+#snake-popup svg, #ladder-popup svg, #home-popup svg, #congratulations svg {
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translate(80%, 0);
+}
+
+.cb[id$="-2"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-2"]:checked ~ #ladder-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-2"]:checked ~ #ladder-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-2"]:checked ~ #ladder-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-7"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-7"]:checked ~ #ladder-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-7"]:checked ~ #ladder-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-7"]:checked ~ #ladder-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-8"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-8"]:checked ~ #ladder-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-8"]:checked ~ #ladder-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-8"]:checked ~ #ladder-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-15"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-15"]:checked ~ #ladder-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-15"]:checked ~ #ladder-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-15"]:checked ~ #ladder-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-21"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-21"]:checked ~ #ladder-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-21"]:checked ~ #ladder-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-21"]:checked ~ #ladder-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-28"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-28"]:checked ~ #ladder-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-28"]:checked ~ #ladder-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-28"]:checked ~ #ladder-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-36"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-36"]:checked ~ #ladder-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-36"]:checked ~ #ladder-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-36"]:checked ~ #ladder-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-51"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-51"]:checked ~ #ladder-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-51"]:checked ~ #ladder-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-51"]:checked ~ #ladder-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-71"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-71"]:checked ~ #ladder-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-71"]:checked ~ #ladder-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-71"]:checked ~ #ladder-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-78"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-78"]:checked ~ #ladder-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-78"]:checked ~ #ladder-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-78"]:checked ~ #ladder-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-87"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-87"]:checked ~ #ladder-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-87"]:checked ~ #ladder-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-87"]:checked ~ #ladder-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-16"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-16"]:checked ~ #snake-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-16"]:checked ~ #snake-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-16"]:checked ~ #snake-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-46"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-46"]:checked ~ #snake-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-46"]:checked ~ #snake-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-46"]:checked ~ #snake-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-49"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-49"]:checked ~ #snake-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-49"]:checked ~ #snake-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-49"]:checked ~ #snake-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-62"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-62"]:checked ~ #snake-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-62"]:checked ~ #snake-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-62"]:checked ~ #snake-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-64"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-64"]:checked ~ #snake-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-64"]:checked ~ #snake-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-64"]:checked ~ #snake-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-74"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-74"]:checked ~ #snake-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-74"]:checked ~ #snake-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-74"]:checked ~ #snake-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-89"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-89"]:checked ~ #snake-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-89"]:checked ~ #snake-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-89"]:checked ~ #snake-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-92"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-92"]:checked ~ #snake-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-92"]:checked ~ #snake-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-92"]:checked ~ #snake-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-95"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-95"]:checked ~ #snake-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-95"]:checked ~ #snake-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-95"]:checked ~ #snake-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-99"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-99"]:checked ~ #snake-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-99"]:checked ~ #snake-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-99"]:checked ~ #snake-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-101"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-101"]:checked ~ #home-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-101"]:checked ~ #home-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-101"]:checked ~ #home-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-102"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-102"]:checked ~ #home-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-102"]:checked ~ #home-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-102"]:checked ~ #home-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-103"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-103"]:checked ~ #home-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-103"]:checked ~ #home-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-103"]:checked ~ #home-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-104"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-104"]:checked ~ #home-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-104"]:checked ~ #home-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-104"]:checked ~ #home-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-105"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-105"]:checked ~ #home-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-105"]:checked ~ #home-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-105"]:checked ~ #home-popup label:hover {
+  background: #2d8659;
+}
+
+.cb[id$="-106"]:checked ~ .dice {
+  display: none !important;
+}
+.cb[id$="-106"]:checked ~ #home-popup {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.cb[id$="-106"]:checked ~ #home-popup label {
+  background: #396;
+  border-radius: 3px;
+  color: white;
+  padding: 6px 1rem;
+  cursor: pointer;
+  transition: background 0.5s;
+  margin-top: 1rem;
+}
+.cb[id$="-106"]:checked ~ #home-popup label:hover {
+  background: #2d8659;
+}
+
+#cb-pl1-2:checked ~ #ladder-popup #ladder-pl1-2 {
+  display: inline-block;
+}
+
+#cb-pl1-7:checked ~ #ladder-popup #ladder-pl1-7 {
+  display: inline-block;
+}
+
+#cb-pl1-8:checked ~ #ladder-popup #ladder-pl1-8 {
+  display: inline-block;
+}
+
+#cb-pl1-15:checked ~ #ladder-popup #ladder-pl1-15 {
+  display: inline-block;
+}
+
+#cb-pl1-21:checked ~ #ladder-popup #ladder-pl1-21 {
+  display: inline-block;
+}
+
+#cb-pl1-28:checked ~ #ladder-popup #ladder-pl1-28 {
+  display: inline-block;
+}
+
+#cb-pl1-36:checked ~ #ladder-popup #ladder-pl1-36 {
+  display: inline-block;
+}
+
+#cb-pl1-51:checked ~ #ladder-popup #ladder-pl1-51 {
+  display: inline-block;
+}
+
+#cb-pl1-71:checked ~ #ladder-popup #ladder-pl1-71 {
+  display: inline-block;
+}
+
+#cb-pl1-78:checked ~ #ladder-popup #ladder-pl1-78 {
+  display: inline-block;
+}
+
+#cb-pl1-87:checked ~ #ladder-popup #ladder-pl1-87 {
+  display: inline-block;
+}
+
+#cb-pl1-16:checked ~ #snake-popup #snake-pl1-16 {
+  display: inline-block;
+}
+
+#cb-pl1-46:checked ~ #snake-popup #snake-pl1-46 {
+  display: inline-block;
+}
+
+#cb-pl1-49:checked ~ #snake-popup #snake-pl1-49 {
+  display: inline-block;
+}
+
+#cb-pl1-62:checked ~ #snake-popup #snake-pl1-62 {
+  display: inline-block;
+}
+
+#cb-pl1-64:checked ~ #snake-popup #snake-pl1-64 {
+  display: inline-block;
+}
+
+#cb-pl1-74:checked ~ #snake-popup #snake-pl1-74 {
+  display: inline-block;
+}
+
+#cb-pl1-89:checked ~ #snake-popup #snake-pl1-89 {
+  display: inline-block;
+}
+
+#cb-pl1-92:checked ~ #snake-popup #snake-pl1-92 {
+  display: inline-block;
+}
+
+#cb-pl1-95:checked ~ #snake-popup #snake-pl1-95 {
+  display: inline-block;
+}
+
+#cb-pl1-99:checked ~ #snake-popup #snake-pl1-99 {
+  display: inline-block;
+}
+
+#cb-pl1-101:checked ~ #home-popup #home-pl1-101 {
+  display: inline-block;
+}
+
+#cb-pl1-102:checked ~ #home-popup #home-pl1-102 {
+  display: inline-block;
+}
+
+#cb-pl1-103:checked ~ #home-popup #home-pl1-103 {
+  display: inline-block;
+}
+
+#cb-pl1-104:checked ~ #home-popup #home-pl1-104 {
+  display: inline-block;
+}
+
+#cb-pl1-105:checked ~ #home-popup #home-pl1-105 {
+  display: inline-block;
+}
+
+#cb-pl1-106:checked ~ #home-popup #home-pl1-106 {
+  display: inline-block;
+}
+
+#cb-pl2-2:checked ~ #ladder-popup #ladder-pl2-2 {
+  display: inline-block;
+}
+
+#cb-pl2-7:checked ~ #ladder-popup #ladder-pl2-7 {
+  display: inline-block;
+}
+
+#cb-pl2-8:checked ~ #ladder-popup #ladder-pl2-8 {
+  display: inline-block;
+}
+
+#cb-pl2-15:checked ~ #ladder-popup #ladder-pl2-15 {
+  display: inline-block;
+}
+
+#cb-pl2-21:checked ~ #ladder-popup #ladder-pl2-21 {
+  display: inline-block;
+}
+
+#cb-pl2-28:checked ~ #ladder-popup #ladder-pl2-28 {
+  display: inline-block;
+}
+
+#cb-pl2-36:checked ~ #ladder-popup #ladder-pl2-36 {
+  display: inline-block;
+}
+
+#cb-pl2-51:checked ~ #ladder-popup #ladder-pl2-51 {
+  display: inline-block;
+}
+
+#cb-pl2-71:checked ~ #ladder-popup #ladder-pl2-71 {
+  display: inline-block;
+}
+
+#cb-pl2-78:checked ~ #ladder-popup #ladder-pl2-78 {
+  display: inline-block;
+}
+
+#cb-pl2-87:checked ~ #ladder-popup #ladder-pl2-87 {
+  display: inline-block;
+}
+
+#cb-pl2-16:checked ~ #snake-popup #snake-pl2-16 {
+  display: inline-block;
+}
+
+#cb-pl2-46:checked ~ #snake-popup #snake-pl2-46 {
+  display: inline-block;
+}
+
+#cb-pl2-49:checked ~ #snake-popup #snake-pl2-49 {
+  display: inline-block;
+}
+
+#cb-pl2-62:checked ~ #snake-popup #snake-pl2-62 {
+  display: inline-block;
+}
+
+#cb-pl2-64:checked ~ #snake-popup #snake-pl2-64 {
+  display: inline-block;
+}
+
+#cb-pl2-74:checked ~ #snake-popup #snake-pl2-74 {
+  display: inline-block;
+}
+
+#cb-pl2-89:checked ~ #snake-popup #snake-pl2-89 {
+  display: inline-block;
+}
+
+#cb-pl2-92:checked ~ #snake-popup #snake-pl2-92 {
+  display: inline-block;
+}
+
+#cb-pl2-95:checked ~ #snake-popup #snake-pl2-95 {
+  display: inline-block;
+}
+
+#cb-pl2-99:checked ~ #snake-popup #snake-pl2-99 {
+  display: inline-block;
+}
+
+#cb-pl2-101:checked ~ #home-popup #home-pl2-101 {
+  display: inline-block;
+}
+
+#cb-pl2-102:checked ~ #home-popup #home-pl2-102 {
+  display: inline-block;
+}
+
+#cb-pl2-103:checked ~ #home-popup #home-pl2-103 {
+  display: inline-block;
+}
+
+#cb-pl2-104:checked ~ #home-popup #home-pl2-104 {
+  display: inline-block;
+}
+
+#cb-pl2-105:checked ~ #home-popup #home-pl2-105 {
+  display: inline-block;
+}
+
+#cb-pl2-106:checked ~ #home-popup #home-pl2-106 {
+  display: inline-block;
+}
+
+#cb-pl3-2:checked ~ #ladder-popup #ladder-pl3-2 {
+  display: inline-block;
+}
+
+#cb-pl3-7:checked ~ #ladder-popup #ladder-pl3-7 {
+  display: inline-block;
+}
+
+#cb-pl3-8:checked ~ #ladder-popup #ladder-pl3-8 {
+  display: inline-block;
+}
+
+#cb-pl3-15:checked ~ #ladder-popup #ladder-pl3-15 {
+  display: inline-block;
+}
+
+#cb-pl3-21:checked ~ #ladder-popup #ladder-pl3-21 {
+  display: inline-block;
+}
+
+#cb-pl3-28:checked ~ #ladder-popup #ladder-pl3-28 {
+  display: inline-block;
+}
+
+#cb-pl3-36:checked ~ #ladder-popup #ladder-pl3-36 {
+  display: inline-block;
+}
+
+#cb-pl3-51:checked ~ #ladder-popup #ladder-pl3-51 {
+  display: inline-block;
+}
+
+#cb-pl3-71:checked ~ #ladder-popup #ladder-pl3-71 {
+  display: inline-block;
+}
+
+#cb-pl3-78:checked ~ #ladder-popup #ladder-pl3-78 {
+  display: inline-block;
+}
+
+#cb-pl3-87:checked ~ #ladder-popup #ladder-pl3-87 {
+  display: inline-block;
+}
+
+#cb-pl3-16:checked ~ #snake-popup #snake-pl3-16 {
+  display: inline-block;
+}
+
+#cb-pl3-46:checked ~ #snake-popup #snake-pl3-46 {
+  display: inline-block;
+}
+
+#cb-pl3-49:checked ~ #snake-popup #snake-pl3-49 {
+  display: inline-block;
+}
+
+#cb-pl3-62:checked ~ #snake-popup #snake-pl3-62 {
+  display: inline-block;
+}
+
+#cb-pl3-64:checked ~ #snake-popup #snake-pl3-64 {
+  display: inline-block;
+}
+
+#cb-pl3-74:checked ~ #snake-popup #snake-pl3-74 {
+  display: inline-block;
+}
+
+#cb-pl3-89:checked ~ #snake-popup #snake-pl3-89 {
+  display: inline-block;
+}
+
+#cb-pl3-92:checked ~ #snake-popup #snake-pl3-92 {
+  display: inline-block;
+}
+
+#cb-pl3-95:checked ~ #snake-popup #snake-pl3-95 {
+  display: inline-block;
+}
+
+#cb-pl3-99:checked ~ #snake-popup #snake-pl3-99 {
+  display: inline-block;
+}
+
+#cb-pl3-101:checked ~ #home-popup #home-pl3-101 {
+  display: inline-block;
+}
+
+#cb-pl3-102:checked ~ #home-popup #home-pl3-102 {
+  display: inline-block;
+}
+
+#cb-pl3-103:checked ~ #home-popup #home-pl3-103 {
+  display: inline-block;
+}
+
+#cb-pl3-104:checked ~ #home-popup #home-pl3-104 {
+  display: inline-block;
+}
+
+#cb-pl3-105:checked ~ #home-popup #home-pl3-105 {
+  display: inline-block;
+}
+
+#cb-pl3-106:checked ~ #home-popup #home-pl3-106 {
+  display: inline-block;
+}
+
+#cb-pl4-2:checked ~ #ladder-popup #ladder-pl4-2 {
+  display: inline-block;
+}
+
+#cb-pl4-7:checked ~ #ladder-popup #ladder-pl4-7 {
+  display: inline-block;
+}
+
+#cb-pl4-8:checked ~ #ladder-popup #ladder-pl4-8 {
+  display: inline-block;
+}
+
+#cb-pl4-15:checked ~ #ladder-popup #ladder-pl4-15 {
+  display: inline-block;
+}
+
+#cb-pl4-21:checked ~ #ladder-popup #ladder-pl4-21 {
+  display: inline-block;
+}
+
+#cb-pl4-28:checked ~ #ladder-popup #ladder-pl4-28 {
+  display: inline-block;
+}
+
+#cb-pl4-36:checked ~ #ladder-popup #ladder-pl4-36 {
+  display: inline-block;
+}
+
+#cb-pl4-51:checked ~ #ladder-popup #ladder-pl4-51 {
+  display: inline-block;
+}
+
+#cb-pl4-71:checked ~ #ladder-popup #ladder-pl4-71 {
+  display: inline-block;
+}
+
+#cb-pl4-78:checked ~ #ladder-popup #ladder-pl4-78 {
+  display: inline-block;
+}
+
+#cb-pl4-87:checked ~ #ladder-popup #ladder-pl4-87 {
+  display: inline-block;
+}
+
+#cb-pl4-16:checked ~ #snake-popup #snake-pl4-16 {
+  display: inline-block;
+}
+
+#cb-pl4-46:checked ~ #snake-popup #snake-pl4-46 {
+  display: inline-block;
+}
+
+#cb-pl4-49:checked ~ #snake-popup #snake-pl4-49 {
+  display: inline-block;
+}
+
+#cb-pl4-62:checked ~ #snake-popup #snake-pl4-62 {
+  display: inline-block;
+}
+
+#cb-pl4-64:checked ~ #snake-popup #snake-pl4-64 {
+  display: inline-block;
+}
+
+#cb-pl4-74:checked ~ #snake-popup #snake-pl4-74 {
+  display: inline-block;
+}
+
+#cb-pl4-89:checked ~ #snake-popup #snake-pl4-89 {
+  display: inline-block;
+}
+
+#cb-pl4-92:checked ~ #snake-popup #snake-pl4-92 {
+  display: inline-block;
+}
+
+#cb-pl4-95:checked ~ #snake-popup #snake-pl4-95 {
+  display: inline-block;
+}
+
+#cb-pl4-99:checked ~ #snake-popup #snake-pl4-99 {
+  display: inline-block;
+}
+
+#cb-pl4-101:checked ~ #home-popup #home-pl4-101 {
+  display: inline-block;
+}
+
+#cb-pl4-102:checked ~ #home-popup #home-pl4-102 {
+  display: inline-block;
+}
+
+#cb-pl4-103:checked ~ #home-popup #home-pl4-103 {
+  display: inline-block;
+}
+
+#cb-pl4-104:checked ~ #home-popup #home-pl4-104 {
+  display: inline-block;
+}
+
+#cb-pl4-105:checked ~ #home-popup #home-pl4-105 {
+  display: inline-block;
+}
+
+#cb-pl4-106:checked ~ #home-popup #home-pl4-106 {
+  display: inline-block;
+}
+
+.cb[id$="-100"]:checked ~ #congratulations {
+  opacity: 1;
+  z-index: 99999;
+  transition: opacity 0.15s;
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+
+@media (max-width: 400px) {
+  #game #board .tile::before {
+    font-size: 0.4rem;
+  }
+  #game .tab::before {
+    font-size: 0.65rem;
+  }
+  #game .tab::after, #game .tab#player-info span {
+    font-size: 0.9rem;
+    height: 1.5rem;
+    line-height: 1.4rem;
+  }
+}
\ No newline at end of file
diff --git a/css-only-harry-potter-game-basilisks-and-brooms/license.txt b/css-only-harry-potter-game-basilisks-and-brooms/license.txt
new file mode 100644
index 0000000..6f37b37
--- /dev/null
+++ b/css-only-harry-potter-game-basilisks-and-brooms/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Alvaro Montoro (https://codepen.io/alvaromontoro/pen/RwLbKwM)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-only-harry-potter-game-basilisks-and-brooms/src/index.pug b/css-only-harry-potter-game-basilisks-and-brooms/src/index.pug
new file mode 100644
index 0000000..371ccb7
--- /dev/null
+++ b/css-only-harry-potter-game-basilisks-and-brooms/src/index.pug
@@ -0,0 +1,173 @@
+// checkboxes to control states and variables
+- var n = 1;
+  while n < 5
+    input(type="radio", name="players", id="players"+n, checked=(n == 1), value=(n++))
+- var n = 1;
+  while n < 5
+    input(type="radio", name="turn", id="turn"+n, checked=(n==1), value=(n++))
+- var n = 1;
+  while n < 5
+    input(type="radio", name="colors", checked=(n == 1), id="colors"+(n++))
+input(type="checkbox", id="game-time", class="game-time", name="game-time")
+input(type="checkbox", name="show-info", id="show-info")
+- var n = 1;
+  while n < 6
+    input(type="radio", id="show-instructions-"+(n++), class="game-time", name="show-instructions")
+
+// inputs and labels that control the piece position for player 1
+each players in [1,2,3,4]
+  - var n = 0;
+  while n < 107
+    input(type="radio", name="cb-player"+players, id="cb-pl"+players+"-"+n, class="cb", checked=(n==0))
+    label.dice(for="cb-pl"+players+"-"+(n++))
+  
+// game settings menu (# of players, colors) 
+#options.scrim
+  .box
+    h1 Harry Potter CSS Game
+    div
+      h2 Number of players
+      div.flex.option-players
+        - var n = 1;
+        while n < 5
+          label(for="players"+n) #{n++}
+      h2 Characters
+      div.option-colors
+        - var n = 1;
+        while n < 5
+          label.flex(for="colors"+(n++))
+            span
+            span
+            span
+            span
+            span
+      div
+        label.option-start(for="show-instructions-1") START GAME
+        
+// pop-up with information about the game and the author
+#info.scrim
+  .box
+    h1 About
+    div
+      p This Harry Potter game is based on Snakes and Ladders, an ancient Indian board game regarded today as a worldwide classic. The ladders have been replaced with flying brooms and the snakes are basilisks. The object of the game is to navigate one's game piece, according to die rolls, from the start (bottom square) to the finish (top square), helped or hindered by brooms and basilisks respectively.
+        sup
+          a(href="https://en.wikipedia.org/wiki/Snakes_and_Ladders", target="_blank") [1]
+      p This version was developed by 
+        a(href="https://alvaromontoro.com", target="_blank") Alvaro Montoro 
+        | using HTML and CSS, to practice Pug and Sass (for simplicity, they compile to standard HTML and CSS), and without any line of JavaScript code.
+      p The idea behind this project is that many classic board games are actually Finite-State Machines (FSM), so they can be recreated simulating the states of the automaton with radio buttons, labels, and some CSS styling.
+      p
+        label#close-button(for="show-info") Close
+
+// animated instructions section
+#instructions
+  label#go-to-game(for="game-time") SKIP INSTRUCTIONS &rsaquo;
+  #step
+    div 
+      label(for="show-instructions-2")
+      label(for="show-instructions-3")
+      label(for="show-instructions-4")
+      label(for="show-instructions-5")
+      label(for="game-time") PLAY &rsaquo;
+      
+// the game section: board, dice, snakes, ladders, and all that jazz...
+#game
+  #player-info.tab
+    span Player
+  div#action.tab
+    label#turn-changer1(for="turn1")
+    label#turn-changer2(for="turn2")
+    label#turn-changer3(for="turn3")
+    label#turn-changer4(for="turn4")
+  label#more-info.tab(for="show-info")
+  // Board based on the one from codewars: https://www.codewars.com/kata/snakes-and-ladders-1 
+  #board
+    each val in [100,99,98,97,96,95,94,93,92,91,81,82,83,84,85,86,87,88,89,90,80,79,78,77,76,75,74,73,72,71,61,62,63,64,65,66,67,68,69,70,60,59,58,57,56,55,54,53,52,51,41,42,43,44,45,46,47,48,49,50,40,39,38,37,36,35,34,33,32,31,21,22,23,24,25,26,27,28,29,30,20,19,18,17,16,15,14,13,12,11,1,2,3,4,5,6,7,8,9,10]
+      div(class="tile tile"+val, data-index=val)
+    svg#snakeladders(viewBox="0 0 600 600", preserveAspectRatio="none")
+      g.ladders-big
+        path(d="M89,574 140,392 M388,581 385,508 M449,552 554,395 M320,516 333,444 M24,436 74,329 M430,458 210,99  M264,393 214,339  M563,284 391,203 M570,149 559,31 M142,158 155,40 M397,101 379,30")
+      g.ladders-small
+        path(d="M88,567 94,585 M91.5,568 87,584 M90,569 80,584 M94,568 77,583 M90,569 83,586 M90,569 91,587 \
+        M384,575 396,589 M388,575 391.5,590 M388,575 388,592 M387,575 385,591 M392,575 381,590 \
+        M450,546 450,565 M452,546 446,564 M452,546 442,562 M455,546 438,561 M456,548 436,558 \
+        M318,510 325,528 M322,510 320,529 M322,510 316,529 M322,510 312,528 M325,510 308,527 \
+        M263,387 266,405 M259,388 273,407 M259,388 278,406 M257,392 287,405 \
+        M24,430 27,456 M27,430 23,455 M26,430 18,456 M27,431 12,454 M30,431 8,451 M26,431 15,453 \
+        M423,454 444,467 M427,453 438,470 M427,453 443,471 M427,453 436,472 M431,453 432,473 \
+        M140,152 150,170 M143,152 145,171 M143,152 141,170 M142,152 137,171 M146,152 133,170 \
+        M393,95 408,112 M396,95 404,113 M396,95 400,115 M396,95 396,114.5 M399,95 393,112 \
+        M567,143 580,162 M570,143 576,164 M569,143 572,163 M569,143 569,165 M572,143 565,164 \
+        M555,283 577,280 M556,282 579,284 M556,282 576,288 M555,282 577,292 M556,277 571.6,295")
+      path(d="M20,42 28,42 28,35 32,35 32,42 40,42 40,32 45,32 30,20 15,32 20,32 Z M20,578 30,578 30,583 40,570 30,557 30,562 20, 562Z", fill="rgba(0,0,0,0.25)")
+      path.snake(d="M 90,226 C 98,257 69,322 128,332 187,342 181,381 120,382 59,383 53,425 54,433 56,450 87,467 87,481 87,495 76,506 76,512 84,505 95,496 96,480 97,464 60,447 64,425 68,403 99,392 134,391 169,390 219,344 131,322 94,313 100,279 101,256 102,233 101,229 100,225 105,223.62 106,214 96,210 86,205 65.75,211 83,223 85.88,225 88,226 90,226 Z", fill="#73880A")
+      circle.eye(cx=97, cy=212, r=5)
+      path.snake(d="M 22,282 C 35,271 58,266 81,273 104,280 144,278 145,253 146,228 175,208 193,213 204,198 220,210 220,216 220,222 201,229 193,221 182,222 157,229 156,252 155,275 139,297 86,281 33,268 22,283 22,283 Z", fill="#D15600")
+      circle.eye(cx=203, cy=210, r=5)
+      path.snake(d="M 453,271 C 433,285 396,289 400,261 405,233 394,223 369,223 343,224 319,167 376,161 379,168 401,168 402,156 403,143 376,143 375,152 300,162 333,233 366,233 402,233 388,258 389,266 390,281 414,309 453,272 Z", fill="#6BBA70")
+      circle.eye(cx=387, cy=148, r=5)
+      path.snake(d="M 457,199 C 429,161 465,134 489,158 512,182 542,159 540,129 538,99 523,98 522,98 528,91 505,75 495,97 503,113 518,105 519,105 519,105 530,110 531,130 532,150 513,169 492,149 471,129 445,143 443,159 442,174 449,194 457,200 Z", fill="#C79810")
+      circle.eye(cx=512, cy=90, r=5)
+      path.snake(d="M 441,95 C 457,93 479,72 445,52 415,33 434,16 451,16 468,16 489,39 492,40 495,28 521,33 521,43 521,54 496,54 490,48 490,48 466,23 450,25 434,27 439,43 459,51 479,61 473,101 441,96 Z", fill="#356AA0")
+      circle.eye(cx=504, cy=35, r=5)
+      path.snake(d="M 278,457 C 291,438 262,428 247,444 230,464 193,450 231,420 256,400 300,425 335,395 349,381 334,338 334,338 334,338 348,325 325,324 301,322 306,341 326,340 334,358 346,401 285,401 231,401 205,416 205,446 206,472 244,462 250,452 258,441 281,435 278,458 Z", fill="#3F4C6B")
+      circle.eye(cx=327, cy=325, r=5)
+      path.snake(d="M 343,584 C 352,567 344,553 320,553 296,553 286,562 279,568 272,573 238,592 238,558 237,524 253,517 253,517 253,517 270,517 270,509 270,498 238,501 247,514 227,537 230,556 230,561 229,567 239,605 281,575 324,544 349,562 343,585 Z", fill="#008C00")
+      circle.eye(cx=257, cy=503, r=5)
+      path.snake(d="M 572,506 C 555,514 511,516 518,456 526,396 518,380 490,388 457,397 436,346 492,335 507,341 518,334 518,326 518,317 494,313 489,326 422,337 448,410 489,398 525,384 510,449 510,456 510,462 502,547 572,508 Z", fill="#D01F3C")
+      circle.eye(cx=503, cy=320, r=5)
+      path.snake(d="M 19,138 C 45,154 84,152 63,119 43,87 59,85 79,84 99,83 103,77 94,40 85,46 73,39 72,32 72,25 109,13 102,35 117,69 108,100 79,94 52,88 70,114 73,118 82,127 83,190 18,138 Z", fill="#2096cE")
+      circle.eye(cx=89, cy=27, r=5)
+      path.snake(d="M 322,152 C 302,168 282,153 285,137 287,120 287,121 275,110 263,99 295,79 291,62 287,45 297,30 318,38 324,51 346,48 346,39 347,30 327,20 320,31 295,18 274,33 280,57 286,82 252,86 262,111 265,118 280,122 275,137 271,148 291,185 322,154 Z", fill="#CC4444")
+      circle.eye(cx=330, cy=30, r=5)
+    each player in [1,2,3,4]
+      div.piece(id="piece-player-"+player, viewBox="0 0 100 100")
+
+#snake-popup.scrim 
+  div.box
+    h1 Basilisk!
+    div Oh no! You were attacked by a monster from the Chamber of Secrets! You'll have to move your piece to the basilisk's tail.
+      div
+        each players in [1,2,3,4]
+          each val, index in {16:6, 46:25, 49:11, 62:19, 64:60, 74:53, 89:68, 92:88, 95:75, 99:80}
+            label(id="snake-pl"+players+"-"+index, for="cb-pl"+players+"-"+val) Move Down
+    svg(viewBox="0 0 100 100")
+      path(d="M1,32 4,32 M6,34 4,32 M4,32 10,20", stroke="black", stroke-width="1")
+      path(d="M 30,70 C 49,56 60,84 33,92 -17,103 0,50 24,45 32,44 37,41 29,27 26,33 5,35 3,24 4,13 26,3 37,16 49,30 49,52 28,55 8,59 0,94 33,82 56,72 35,66 30,71 Z", fill="#73B80A", stroke-width="0")
+      circle(cx=18, cy=15, r=5, fill="black", stroke="white", stroke-width=6)
+      
+    
+#ladder-popup.scrim
+  div.box
+    h1 Broom!
+    div Yay! You found a flying broom! Hop on and fly to the next tile now.
+      div
+        each players in [1,2,3,4]
+          each val, index in {2:38, 7:14, 8:31, 15:26, 21:42, 28:84, 36:44, 51:67, 71:91, 78:98, 87:94}
+            label(id="ladder-pl"+players+"-"+index, for="cb-pl"+players+"-"+val) Move Up
+    svg(viewBox="0 0 100 100")
+      path(d="M13,80 28,10", stroke="#8B4513", stroke-width="10", "stroke-linecap"="round")
+      path(d="M16,80 18,100 M15,80 13,100 M14,78 9,99 M13,79 3,100 M10,80 -2,99", stroke="#aB6533", stroke-width="3", "stroke-linecap"="round")
+      path(d="M8,81 17,82", stroke="#aB8533", stroke-width="3", "stroke-linecap"="round")
+      
+#home-popup.scrim
+  div.box
+    h1 Home
+    div You made it to the end of the maze, but you didn't do it in an exact jump so you will bounce back the remaining tiles.
+      div
+        each players in [1,2,3,4]
+          each val, index in {101:99, 102:98, 103:97, 104:96, 105:95, 106:94}
+            label(id="home-pl"+players+"-"+index, for="cb-pl"+players+"-"+val) Bounce back
+    svg(viewBox="0 0 100 100")
+      path(d="M12,85 12,40 5,40 30,5 55,40 48,40 48,85 35,85 35,60 25,60 25,85 Z", fill="#8Ba5f3")
+      path(d="M30,65 C 30,60 25,55 20,55 15,55 10,60 10,65 10,70 15,75 20,75 20,75 20,75 50,75 M40,65 50,75 40,85", stroke="#eeee60", stroke-width=6, fill="none")
+      
+#congratulations.scrim
+  div.box
+    h1 Congratulations!
+    div You made it to the end of the maze! You won the TriWizard Cup!
+    div Reload the page to play again.
+    svg(viewBox="0 0 100 100")
+      path(d="M5,10 C 5,10 65,10 65,10 65,10 65,40 65,40 65,50 55,70 35,70 15,70 5,50 5,40 Z", fill="#fede60")
+      path(d="M35,40 35,85 M20,85 50,85", stroke="#fede60", stroke-width=12, fill="none", stroke-linecap="round")
+    
diff --git a/css-only-harry-potter-game-basilisks-and-brooms/src/script.js b/css-only-harry-potter-game-basilisks-and-brooms/src/script.js
new file mode 100644
index 0000000..e5cca77
--- /dev/null
+++ b/css-only-harry-potter-game-basilisks-and-brooms/src/script.js
@@ -0,0 +1 @@
+// no JavaScript
\ No newline at end of file
diff --git a/css-only-harry-potter-game-basilisks-and-brooms/src/style.scss b/css-only-harry-potter-game-basilisks-and-brooms/src/style.scss
new file mode 100644
index 0000000..9e6b923
--- /dev/null
+++ b/css-only-harry-potter-game-basilisks-and-brooms/src/style.scss
@@ -0,0 +1,1041 @@
+// variables
+$border-radius: 3px;
+$bg-blue: #741;
+$bg-green: #396;
+$color-blue:
+  linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30% / 30% 5%,
+  linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30% / 30% 5%,
+  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45% / 5% 5%,
+  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45% / 5% 5%,
+  radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50% / 20% 20%,
+  radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50% / 20% 20%,
+  repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100% / 100% 25%,
+  linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat,
+  radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70% / 90% 50%,
+  radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70% / 90% 50%,
+  linear-gradient(#f8d8b8 0 0)
+  ;
+$color-red: 
+  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45% / 5% 5%,
+  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45% / 5% 5%,
+  radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50% / 20% 20%,
+  radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50% / 20% 20%,
+  repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100% / 100% 25%,
+  linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat ,
+  radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70% / 90% 50%,
+  radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70% / 90% 50%,
+  radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65% / 90% 50%,
+  radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65% / 90% 50%,
+  radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55% / 80% 48%,
+  radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55% / 86% 47%,
+  radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45% / 20% 10%,
+  radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45% / 20% 10%,
+  linear-gradient(#ffe8b8 0 0)
+  ;
+$color-green:
+  linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20% / 10% 7%,
+  conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27% / 10% 7%,
+  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50% / 5% 5%,
+  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50% / 5% 5%,
+  radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55% / 20% 20%,
+  radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55% / 20% 20%,
+  linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52% / 100% 2.5%,
+  radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52% / 100% 40%,
+  radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52% / 100% 40%,
+  repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100% / 100% 25%,
+  linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat ,
+  radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60% / 52% 60%,
+  radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58% / 90% 56%,
+  radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50% / 90% 55%,
+  radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52% / 95% 55%,
+  linear-gradient(#fca 0 0)
+  
+  ;
+$color-yellow: 
+  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48% / 5% 5%,
+    radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48% / 5% 5%,
+    radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53% / 20% 20%,
+    radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53% / 20% 20%,
+    repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100% / 100% 25%,
+    linear-gradient(#0000 73%, #000 0 90%, #0000 0),
+    radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70% / 90% 50%,
+    radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70% / 90% 50%,
+    radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65% / 90% 50%,
+    radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65% / 90% 50%,
+    radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55% / 80% 48%,
+    radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55% / 86% 47%,
+    radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32% / 30% 10%,
+    radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32% / 30% 10%,
+    linear-gradient(#963 0 0)
+  ;
+$animation-time: 0.6s;
+$ladders: (2, 7, 8, 15, 21, 28, 36, 51, 71, 78, 87);
+$snakes: (16, 46, 49, 62, 64, 74, 89, 92, 95, 99);
+
+/***** dice animation */
+@keyframes changeOrder {
+  from { z-index: 6;}
+  to { z-index: 1; }
+}
+
+@-webkit-keyframes changeOrder {
+  from { z-index: 6; }
+  to { z-index: 1; }
+}
+
+// coment for testing 
+input { display: none; }
+
+// presentation
+@import url('https://fonts.googleapis.com/css?family=Dosis|Roboto');
+@import url('https://fonts.cdnfonts.com/css/harry-potter');
+
+body {
+  font-size: 16px;
+  font-family: Dosis, Roboto, Arial, Verdana, sans-serif;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: #8526; // rgba(128,200,255,0.8) /*rgba(128,200,255,0.8)*/;
+}
+
+.scrim {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.75);
+  z-index: 999;
+  .box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    background: white;
+    border-radius: $border-radius;
+    box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
+    width: 70%;
+    max-width: 375px;
+    > div {
+      padding:1rem;
+    }
+    h1 {
+      font-family: 'Harry Potter';
+      text-shadow: 
+        0 -2px $bg-blue, 
+        0 -1px $bg-blue,
+        -1px -1px $bg-blue,
+        1px -1px $bg-blue,
+        -1px -2px $bg-blue, 
+        1px -2px $bg-blue, 
+        -2px -2px $bg-blue, 
+        2px -2px $bg-blue,
+        -4px -2px $bg-blue, 
+        4px -2px $bg-blue;
+      margin-top: 0;
+      margin-bottom: 0;
+      font-size: 1.75rem;
+      font-weight: 400;
+      text-align: center;
+      height: 2.5rem;
+      line-height: 2.35rem;
+      background: $bg-blue;
+      color: white;
+      border-radius: $border-radius $border-radius 0px 0px;
+    }
+    h2 {
+      margin-top: 1rem;
+      margin-bottom: 0.15rem;
+      font-size: 1.3rem;
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+    p:first-child {
+      margin-top: 0;
+    }
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.flex {
+  display: flex;
+  > label, > div {
+    flex: 1;
+    margin-left: 0.3rem;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+/** start screen: configuration **/
+#options {
+  background: rgba(0,0,0,0);
+  .option-players label, label.option-start {
+    display: block;
+    margin-top: 0.5rem;
+    color: white;
+    background: rgba(0,150,48,0.6);
+    text-align: center;
+    padding: 6px;
+    transition: background 0.5s, color 0.5s;
+    box-sizing: border-box;
+    border: 2px solid transparent;
+    border-radius: $border-radius;
+    cursor: pointer;
+    &:hover {
+      background: rgba(220,220,0,0.7);
+      color: black;
+    }
+    &:active {
+      border: 2px solid rgba(0,0,0,0.1);
+    }
+    &.option-start {
+      background: $bg-blue;
+      color: white;
+      margin-top: 2rem;
+      &:hover {
+        background: darken($bg-blue, 5%);
+      }
+    }
+  }
+  .option-colors label {
+    height: 2rem;
+    opacity: 0.6;
+    margin-bottom: 0.3rem;
+    cursor: pointer;
+    transition: opacity 0.5s;
+    &:hover {
+      opacity: 0.8;
+    }
+    span {
+      box-sizing: border-box;
+      width: 2rem;
+      margin-left: 0.3rem;
+      border-radius: $border-radius;
+      display: inline-block;
+      padding: 3px;
+      font-size: 0.7rem;
+      border: 1px solid #222;
+      &:first-child {
+        width: 2rem;
+        height: 2rem;
+        border: 0;
+        &::before {
+          content: "";
+          display: block;
+          width: 100%;
+          height: 100%;
+          background: radial-gradient(farthest-side, #0000 40%, #321a 0 50%, #0000 0);
+        }
+      }
+    }
+    &:nth-child(1) span {
+      &:nth-child(2) { background: $color-green; }
+      &:nth-child(3) { background: $color-blue; }
+      &:nth-child(4) { background: $color-red; }
+      &:nth-child(5) { background: $color-yellow; }
+    }
+    &:nth-child(2) span {
+      &:nth-child(2) { background: $color-blue; }
+      &:nth-child(3) { background: $color-red; }
+      &:nth-child(4) { background: $color-yellow; }
+      &:nth-child(5) { background: $color-green; }
+    }
+    &:nth-child(3) span {
+      &:nth-child(2) { background: $color-red; }
+      &:nth-child(3) { background: $color-yellow; }
+      &:nth-child(4) { background: $color-green; }
+      &:nth-child(5) { background: $color-blue; }
+    }
+    &:nth-child(4) span {
+      &:nth-child(2) { background: $color-yellow; }
+      &:nth-child(3) { background: $color-green; }
+      &:nth-child(4) { background: $color-blue; }
+      &:nth-child(5) { background: $color-red; }
+    }
+  }
+}
+
+// hide the game settings when Start is pressed
+#game-time:checked ~ #options,
+[name=show-instructions]:checked ~ #options { display: none; }
+
+// control active # of players and colors
+@for $i from 1 to 5 {
+  #players#{$i}:checked {
+    ~ #options {
+      label[for=players#{$i}] {
+        background: rgba(0,150,48,1);
+        border: 2px solid rgba(0,0,0,0.1);
+        color: white;
+      }
+      @for $j from $i+1 to 5 {
+        label[for^=colors] span:nth-child(#{$j+1}){
+          display: none;
+        }
+      }
+    }
+  }
+  #colors#{$i}:checked {
+    ~ #options {
+      label[for=colors#{$i}] {
+        opacity: 1;
+        border: 0;
+        span {
+          border: 1px solid #222;
+          &:first-child {
+            border: 2px solid transparent;
+            &::before {
+              background: 
+                radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 35% 60% / 15% 15%,
+                radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 65% 60% / 15% 15%,
+                radial-gradient(farthest-side at 50% 0, black 99%, #0000 0) no-repeat 50% 80% / 20% 10%,
+                conic-gradient(at 50% -20%, #0000 162deg, indianred 0 198deg, #0000 0) no-repeat 50% 0% / 100% 85%,
+                radial-gradient(farthest-side, indianred 99%, #0000 0) no-repeat 0% 100% / 100% 20%,
+                // radial-gradient(farthest-side, #0000 60%, #321 0 75%, #0000 0) no-repeat 0 0 / 100% 90%
+                ;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// assign colors to the game pieces according to the color scheme selected
+// TODO: this probably can be reduced with SASS as well as the code above
+#colors1:checked ~ #game #piece-player-1 { background: $color-green; }
+#colors1:checked ~ #game #piece-player-2 { background: $color-blue; }
+#colors1:checked ~ #game #piece-player-3 { background: $color-red; }
+#colors1:checked ~ #game #piece-player-4 { background: $color-yellow; }
+#colors2:checked ~ #game #piece-player-1 { background: $color-blue; }
+#colors2:checked ~ #game #piece-player-2 { background: $color-red; }
+#colors2:checked ~ #game #piece-player-3 { background: $color-yellow; }
+#colors2:checked ~ #game #piece-player-4 { background: $color-green; }
+#colors3:checked ~ #game #piece-player-1 { background: $color-red; }
+#colors3:checked ~ #game #piece-player-2 { background: $color-yellow; }
+#colors3:checked ~ #game #piece-player-3 { background: $color-green; }
+#colors3:checked ~ #game #piece-player-4 { background: $color-blue; }
+#colors4:checked ~ #game #piece-player-1 { background: $color-yellow; }
+#colors4:checked ~ #game #piece-player-2 { background: $color-green; }
+#colors4:checked ~ #game #piece-player-3 { background: $color-blue; }
+#colors4:checked ~ #game #piece-player-4 { background: $color-red; }
+
+/** info pop-up **/
+#info { 
+  display: none;
+  .box {
+    width: 75%;
+    max-width: none;
+    p:last-child {
+      text-align: right;
+    }
+    #close-button {
+      display: inline-block;
+      background: $bg-green;
+      border-radius: $border-radius;
+      color: white;
+      padding: 6px 1rem;
+      cursor: pointer;
+      transition: background 0.5s;
+      &:hover {
+        background: darken($bg-green, 5%);
+      }
+    }
+  }
+}
+#show-info:checked {
+  ~ #info { display: block; }
+}
+
+
+/** Instructions **/
+#instructions {
+  position: fixed;
+  z-index: 9999;
+  background-color: rgba(0,0,0,0.01);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+  #go-to-game {
+    position: absolute;
+    bottom: 1rem;
+    right: 1rem;
+    font-size: 1rem;
+    z-index: 3;
+    color: white;
+    cursor: pointer;
+  }
+  #step {
+    display: none;
+    position: absolute;
+    box-shadow: 0 0 50px calc(200vmax) rgba(0,0,0,0.85), inset 0 0 4px 0 rgba(0,0,0,1);
+    transform: translate(-1rem, -1rem);
+    border-radius: 100%;
+    z-index: 1;
+    top: 0;
+    left: 1rem;
+    width: calc(100px + 2rem);
+    height: calc(6rem);
+    transition: all 0.75s;
+    div {
+      position: absolute;
+      bottom: -0.5rem;
+      line-height: 1.1rem;
+      font-size: 1rem;
+      color: rgba(255,255,255,0.8);
+      left: 1rem;
+      width: 80vmin;
+      transform: translate(0, 100%);
+      -webkit-transform: translate(0, 100%);
+      label {
+        display: none;
+        font-weight: bold;
+        cursor: pointer;
+        text-decoration: underline;
+        &:hover {
+          text-decoration: none;
+        }
+        &:not([for=game-time])::before {
+          content: "Next \203A"
+        }
+      }
+    }
+  }
+}
+
+[name=show-instructions] {
+  &:checked ~ {
+    #instructions, #game, #action, #instructions #step {
+      display: block;
+    }
+  }
+}
+
+@for $i from 1 to 5 {
+  #show-instructions-#{$i}:checked ~ #instructions label[for=show-instructions-#{$i+1}] {
+    display: inline-block;
+  }
+}
+#show-instructions-5:checked ~ #instructions label[for=game-time] {
+  display: inline-block;
+}
+
+#show-instructions-1:checked ~ #instructions #step {
+  top: 0;
+  left: 1rem;
+  width: calc(100px + 2rem);
+  height: calc(6rem);
+  div::before {
+    content: "This area indicates whose turn it is at any given moment.";
+  }
+}
+#show-instructions-2:checked ~ #instructions #step {
+  top:6rem;
+  left: 1rem;
+  width: 5rem;
+  height: 5rem;
+  div::before {
+    content: "The active player clicks here to roll the dice.";
+  }
+}
+#show-instructions-3:checked ~ #instructions #step {
+  top: 50%;
+  left: 50%;
+  width: 30vw;
+  height: 30vw;
+  max-width: 500px;
+  max-height: 500px;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  div {
+    transform: translate(-20vmin, 100%);
+    -webkit-transform: translate(-20vmin, 100%);
+    left: 0;
+    &::before {
+      content: "The player's piece will advance on the board once the dice is rolled. If the piece falls on a tile with a basilisk's head, it will fall down to the basilisk's tail. If it falls on a broom's bottom, it will go up to the top.";
+    }
+  }
+}
+#show-instructions-4:checked ~ #instructions #step {
+  top: 0;
+  left: calc(100px + 2rem);
+  width: calc(100px + 2rem);
+  height: calc(6rem);
+  div::before {
+    content: "After that, click on the button to go to the next player's turn.";
+  }
+}
+#show-instructions-5:checked ~ #instructions #step {
+  top: 0;
+  left: calc(100vw - 100px - 1rem);
+  width: calc(100px + 2rem);
+  height: calc(6rem);
+  div {
+    left: auto;
+    right: 0rem;
+    &::before {
+      content: "If you want more information during the game, click on this button."
+    }
+  }
+}
+
+#game-time:checked ~ #instructions {
+  display: none;
+}
+
+/** game screen: board, dice, messages **/
+.dice {
+  position: absolute;
+  display: none;
+  visibility: visible;
+  top: 6rem;
+  left: 1rem;
+  width: 3rem;
+  height: 3rem;
+  background: white;
+  border-radius: $border-radius;
+  box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.042);
+  z-index:1;
+  &::before {
+    content: "";
+    display: block; 
+    height: 100%; 
+    width: 100%;
+    font-size: 0.8rem;
+    box-sizing: border-box;
+    cursor: pointer;
+    padding-top: 0.5rem;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+}
+
+
+@for $i from 1 to 5 {
+  #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label,
+  #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label, 
+  #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label,
+  #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label,
+  #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label,
+  #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label {
+    display: block;
+    left: 1rem;
+    text-align: center;
+    animation: changeOrder $animation-time infinite;
+    -webkit-animation: changeOrder $animation-time infinite;
+  }
+}
+
+@for $i from 1 to 5 {
+  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label { animation-delay: 0s !important; }
+  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label { animation-delay: -$animation-time/6 !important; }
+  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label { animation-delay: -2*$animation-time/6 !important; }
+  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label { animation-delay: -3*$animation-time/6 !important; }
+  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label { animation-delay: -4*$animation-time/6 !important; }
+  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label { animation-delay: -5*$animation-time/6 !important; }
+}
+
+@for $i from 1 to 5 {
+  
+  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label::before { background-image: 
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='8' /></svg>");
+       }
+  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label::before { background-image: 
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='77' r='8' /><circle cx='77' cy='23' r='8' /></svg>"); }
+  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label::before { background-image: 
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='77' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='50' cy='50' r='8' /></svg>"); }
+  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label::before { background-image: 
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /></svg>"); }
+  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label::before { background-image: 
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /><circle cx='50' cy='50' r='8' /></svg>"); }
+  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label::before { background-image: 
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /><circle cx='23' cy='50' r='8' /><circle cx='77' cy='50' r='8' /></svg>"); }
+  
+}
+
+
+// label:active adapted from solution by Temani Afif. Ref: https://stackoverflow.com/a/51451218/3695983 
+label.dice:active {
+  position:static !important; 
+  margin-left: 50px !important;
+  background: none !important;
+  font-size: 0;
+  &::before {
+    content:"";
+    position:absolute;
+    top:0;
+    right:-50px;
+    left:0;
+    bottom:0;
+    z-index:200;
+  }
+}
+  
+#game {
+  display: none;
+  .tab {
+    position: absolute;
+    top: 0;
+    background: white;
+    border-radius: 0 0 3px 3px;
+    box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
+    z-index: 9;
+    float:left;
+    margin-left: 1rem;
+    &::before {
+      text-align: center;
+      display: block;
+      padding: 6px 16px;
+      color: white;
+      background: $bg-blue;
+      height: 0.7rem;
+      line-height: 0.7rem;
+      font-size: 0.75rem;
+      font-weight: bold;
+      white-space: nowrap;
+      text-transform: uppercase;
+      font-size: 0.95rem; 
+    }
+    &::after, &#player-info span {
+      display: block;
+      text-align: center;
+      padding: 6px 16px;
+      height: 2rem;
+      line-height: 1.9rem;
+      white-space: nowrap;
+    }
+    &#player-info {
+      min-width: 100px;
+      &::before { content: "Turn"; }
+      span { 
+        font-weight: bolder;
+        &::before {
+          content: "\25CF\00A0";
+        }
+        &::after {
+          content: " 1"; 
+          font-weight: bolder; 
+        }
+      }
+    }
+    &#dice {
+      cursor: pointer;
+      &::before { content: "Dice"; }
+      &::after { 
+        content: "Roll"; 
+      }
+    }
+    &#more-info {
+      cursor: pointer;
+      left: auto;
+      right: 1rem;
+      width: 100px;
+      z-index: 1;
+      &::before { content: "About"; }
+      &::after { content: "More info" }
+    }
+    &#action {
+      cursor: pointer;
+      left: calc(100px + 1rem);
+      width: 100px;
+      &::before { content: "Action"; }
+      &::after { content: "Next player" }
+      label {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        cursor: pointer;
+      }
+    }
+  }
+  #board {
+    width: 70%;
+    max-width: 500px;
+    border: 3px solid $bg-blue;
+    border-radius: $border-radius * 2;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    background: white;
+    margin-top: 2.5rem;
+    box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
+    .tile {
+      float: left;
+      width: 10%;
+      position: relative;
+      height: 0;
+      padding-top: 10%;
+      box-sizing: border-box;
+      border-left: 1px solid rgba(0,0,0,0.1);
+      border-right: 1px solid rgba(0,0,0,0.1);
+      border-top: 1px solid rgba(0,0,0,1);
+      border-bottom: 1px solid rgba(0,0,0,1);
+      background: lighten(#9ad0ac,15%);
+      &::before {
+        content: attr(data-index);
+        position: absolute;
+        top: 0rem;
+        left: 0.15rem;
+        font-size: 0.66rem;
+      }
+      &.tile6, &.tile12, &.tile18, &.tile22, &.tile23, &.tile28, &.tile30, &.tile34, &.tile36, &.tile39, &.tile55, &.tile79 {
+        &::before {
+          left: auto;
+          right: 0.15rem;
+        }
+      }
+      &.tile52::before {
+        top:auto;
+        bottom:0rem;
+      }
+      &.tile76::before {
+        left: 0.6rem;
+      }
+    }
+    @for $i from 1 to 11 {
+      .tile#{$i} { border-bottom: 1px solid transparent; }
+      .tile#{$i+90} { border-top: 1px solid transparent; }
+      .tile#{$i*10} { border-top: 1px solid rgba(0,0,0,0.1); }
+      .tile#{$i*10+1} { border-bottom: 1px solid rgba(0,0,0,0.1); }
+    }
+    .tile1, .tile15, .tile24, .tile38, .tile49, .tile55, .tile65, .tile76, .tile86, .tile94 {
+      background: lighten(#f198b4, 15%);
+    }
+
+    .tile2, .tile16, .tile23, .tile35, .tile42, .tile56, .tile64, .tile79, .tile87, .tile93 {
+      background: lighten(#C3D9FF, 8%);
+    }
+
+    .tile3, .tile18, .tile26, .tile33, .tile41, .tile58, .tile68, .tile78, .tile81, .tile96 {
+      background: lighten(#f89448, 30%);
+    }
+
+    .tile4, .tile11, .tile29, .tile40, .tile47, .tile51, .tile61, .tile77, .tile88, .tile99 {
+      background: lighten(#c297c5, 23%);
+    }
+
+    .tile5, .tile19, .tile27, .tile32, .tile44, .tile59, .tile69, .tile80, .tile89, .tile97 {
+      background: lighten(#68caef, 18%);
+    }
+
+    .tile6, .tile20, .tile28, .tile31, .tile45, .tile60, .tile70, .tile75, .tile85, .tile98 {
+      background: lighten(#fef471, 21%);
+    }
+
+    .tile7, .tile13, .tile21, .tile36, .tile50, .tile53, .tile63, .tile74, .tile84, .tile91 {
+      background: lighten(#b9e6fd, 5%);
+    }
+
+    .tile8, .tile12, .tile30, .tile39, .tile46, .tile52, .tile62, .tile73, .tile90, .tile100 {
+      background: lighten(#e5b75f,19%);
+    }
+
+    .tile9, .tile14, .tile22, .tile37, .tile48, .tile54, .tile66, .tile72, .tile83, .tile96 {
+      background: lighten(#f37859,20%);
+    }
+  }
+}
+
+#action label { display: none; }
+#players1:checked ~ #turn1:checked ~ #game-time:checked ~ #game #action { display:none; }
+#players1:checked ~ #turn1:checked ~ #game #turn-changer1 { display: block; }
+#players2:checked ~ #turn1:checked ~ #game #turn-changer2 { display: block; }
+#players3:checked ~ #turn1:checked ~ #game #turn-changer2 { display: block; }
+#players4:checked ~ #turn1:checked ~ #game #turn-changer2 { display: block; }
+#players2:checked ~ #turn2:checked ~ #game #turn-changer1 { display: block; }
+#players3:checked ~ #turn2:checked ~ #game #turn-changer3 { display: block; }
+#players4:checked ~ #turn2:checked ~ #game #turn-changer3 { display: block; }
+#players3:checked ~ #turn3:checked ~ #game #turn-changer1 { display: block; }
+#players4:checked ~ #turn3:checked ~ #game #turn-changer4 { display: block; }
+#players4:checked ~ #turn4:checked ~ #game #turn-changer1 { display: block; }
+
+// assign colors to the game pieces according to the color scheme selected
+// TODO: this probably can be reduced with SASS as well as the code above for piece colors
+#turn1:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-green; }
+#turn2:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-blue; }
+#turn3:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-red; }
+#turn4:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-yellow; }
+#turn1:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-blue; }
+#turn2:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-red; }
+#turn3:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-yellow; }
+#turn4:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-green; }
+#turn1:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-red; }
+#turn2:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-yellow; }
+#turn3:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-green; }
+#turn4:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-blue; }
+#turn1:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-yellow; }
+#turn2:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-green; }
+#turn3:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-blue; }
+#turn4:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-red; }
+
+@for $i from 1 to 5 {
+  #turn#{$i}:checked ~ #game .tab#player-info span::after{
+    content: " #{$i}";
+  }
+}
+
+// show the game board when Start is pressed
+#game-time:checked ~ #game {
+  display: block;
+}
+
+svg {
+  &#snakeladders{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    g {
+      &.ladders-big {
+        stroke: #8B4513;
+        stroke-width: 4;
+        stroke-linecap: round;
+      }
+      &.ladders-small {
+        stroke: #bB8523;
+        stroke-width: 2;
+        stroke-linecap: round;
+      }
+    }
+  }
+  .snake {
+    stroke: none;
+  }
+  .eye {
+    fill: black;
+    stroke: white;
+    stroke-width: 6;
+  }
+}
+
+.piece {
+  position: absolute;
+  border-radius: 12%;
+  box-sizing: border-box;
+  border: 1px solid #222;
+  width: 7%;
+  height: 7%;
+  bottom: 0;
+  left: 0;
+  transform: translate(-2%, -2%);
+  -webkit-transform: translate(-2%, -2%);
+  transition: bottom 0.5s, left 0.5s;
+  box-shadow: 0 0.25rem 0.5rem #0004;
+  &#piece-player-1 {
+    transform: translate(-5%, -3%);
+    -webkit-transform: translate(-5%, -3%);
+    z-index:44;
+  }
+  &#piece-player-2 {
+    transform: translate(40%, -40%);
+    -webkit-transform: translate(40%, -40%);
+    z-index: 41;
+  }
+  &#piece-player-3 {
+    transform: translate(42%, -7%);
+    -webkit-transform: translate(42%, -7%);
+    z-index: 43;
+  }
+  &#piece-player-4 {
+    transform: translate(-3%, -41%);
+    -webkit-transform: translate(-3%, -41%);
+    z-index: 42;
+  }
+}
+
+// generate the different positions on each tile
+$positions: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0;
+@for $i from 1 through 4 {
+  #cb-pl#{$i+"-0"}:checked ~ #game #piece-player-#{$i} {
+    left: -10%;
+    bottom: 0;
+  }
+  @for $j from 1 to 101 {
+    #cb-pl#{$i}-#{$j}:checked {
+      ~ #game #piece-player-#{$i} { 
+        left: nth($positions, (($j - 1) % 20) + 1) * 1%; 
+        bottom: nth($positions, floor(($j - 1) / 10) + 1) * 1%; 
+      }  
+    }
+  }
+  @for $j from 101 to 107 {
+    #cb-pl#{$i}-#{$j}:checked {
+      ~ #game #piece-player-#{$i} { 
+        left: 0;
+        bottom: 90%;
+      }
+    }
+  }
+}
+
+// hide the players that are not active
+@for $i from 1 to 5 {
+  @for $j from $i+1 to 5 {
+    #players#{$i}:checked ~ #game #piece-player-#{$j} { 
+      display: none !important; 
+    }
+  }
+}
+
+
+// all these popups have a similar code below that could be reduced with a mixin (TODO)
+#snake-popup, #ladder-popup, #home-popup, #congratulations {
+  opacity: 0;
+  z-index: -1;
+  transition: opacity 0s;
+  label {
+    display: none;
+  }
+  svg {
+    height:100%;
+    position:absolute;
+    right:0;
+    top:0;
+    transform:translate(80%, 0);
+  }
+}
+
+// when we fall in a ladder, show the ladder popup
+@each $l in $ladders {
+  .cb[id$='-#{$l}'] {
+    &:checked {
+      ~ .dice { 
+        display: none !important; 
+      }
+      ~ #ladder-popup {
+        opacity: 1;
+        z-index: 99999;
+        transition: opacity 0.15s;
+        transition-delay: 0.5s;
+        -webkit-transition-delay: 0.5s;
+        label {
+          background: $bg-green;
+          border-radius: $border-radius;
+          color: white;
+          padding: 6px 1rem;
+          cursor: pointer;
+          transition: background 0.5s;
+          margin-top: 1rem;
+          &:hover {
+            background: darken($bg-green, 5%);
+          }
+        }
+      }
+    }
+  }
+}
+
+// when we fall in a ladder, show the ladder popup
+@each $s in $snakes {
+  .cb[id$='-#{$s}'] {
+    &:checked {
+      ~ .dice { 
+        display: none !important; 
+      }
+      ~ #snake-popup {
+        opacity: 1;
+        z-index: 99999;
+        transition: opacity 0.15s;
+        transition-delay: 0.5s;
+        -webkit-transition-delay: 0.5s;
+        label {
+          background: $bg-green;
+          border-radius: $border-radius;
+          color: white;
+          padding: 6px 1rem;
+          cursor: pointer;
+          transition: background 0.5s;
+          margin-top: 1rem;
+          &:hover {
+            background: darken($bg-green, 5%);
+          }
+        }
+      }
+    }
+  }
+}
+
+// when we fall in a ladder, show the ladder popup
+@for $s from 101 to 107 {
+  .cb[id$='-#{$s}'] {
+    &:checked {
+      ~ .dice { 
+        display: none !important; 
+      }
+      ~ #home-popup {
+        opacity: 1;
+        z-index: 99999;
+        transition: opacity 0.15s;
+        transition-delay: 0.5s;
+        -webkit-transition-delay: 0.5s;
+        label {
+          background: $bg-green;
+          border-radius: $border-radius;
+          color: white;
+          padding: 6px 1rem;
+          cursor: pointer;
+          transition: background 0.5s;
+          margin-top: 1rem;
+          &:hover {
+            background: darken($bg-green, 5%);
+          }
+        }
+      }
+    }
+  }
+}
+
+// show the right button in the ladder/snake popup
+@for $i from 1 to 5 {
+  @each $l in $ladders {
+    #cb-pl#{$i}-#{$l}:checked ~ #ladder-popup #ladder-pl#{$i}-#{$l} { display: inline-block; }
+  }
+  @each $s in $snakes {
+    #cb-pl#{$i}-#{$s}:checked ~ #snake-popup #snake-pl#{$i}-#{$s} { display: inline-block; }
+  }
+  @for $j from 101 to 107 {
+    #cb-pl#{$i}-#{$j}:checked ~ #home-popup #home-pl#{$i}-#{$j} { display: inline-block; }
+  }
+}
+
+.cb[id$='-100']:checked {
+  ~ #congratulations {
+    opacity: 1;
+    z-index: 99999;
+    transition: opacity 0.15s;
+    transition-delay: 0.5s;
+    -webkit-transition-delay: 0.5s;
+  }
+}
+
+@media (max-width: 400px) {
+  #game {
+    #board .tile::before {
+      font-size: 0.4rem;
+    }
+    .tab {
+      &::before {
+        font-size: 0.65rem;
+      }
+      &::after, &#player-info span {
+        font-size: 0.9rem;
+        height: 1.5rem;
+        line-height: 1.4rem;
+      }
+    }
+  }
+}
diff --git a/css-only-interactive-3d-dice/README.markdown b/css-only-interactive-3d-dice/README.markdown
new file mode 100644
index 0000000..28f74f6
--- /dev/null
+++ b/css-only-interactive-3d-dice/README.markdown
@@ -0,0 +1,141 @@
+# CSS only interactive 3D dice
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/HunorMarton/pen/mdERrLy](https://codepen.io/HunorMarton/pen/mdERrLy).
+
+Find me @ https://twitter.com/HunorBorbely
+
+A few ideas that I used in this pen:
+
+# Interaction
+You can write CSS statements that depend on the state of a radio button. Under each "button" there's a set of radio buttons each representing a turn (0°, 90°, 180°, 270°). With CSS I make sure that in every case the radio button leading to the next step is on top.
+
+By default only the first radio buttons is visible (according with the default state). Then on top I show the one leading to the next state.
+
+- 0° checkbox checked -> Display the checkbox for 90°
+- 90° checkbox checked -> Display the checkbox for 180°
+- 180° checkbox checked -> Display the checkbox for 270°
+- 270° checkbox checked -> Do not display next checkbox but as the 0° is always in the background that will show
+
+```css
+.radio {
+  display: none;
+}
+
+.x-radio[value="1"],
+.x-radio[value="1"]:checked ~ .x-radio[value="2"],
+.x-radio[value="2"]:checked ~ .x-radio[value="3"],
+.x-radio[value="3"]:checked ~ .x-radio[value="4"] {
+  display: block;
+}
+
+....
+```
+
+Then the rotation of the dice is derived based on the value of these checkboxes by recreating every possible combination like this:
+
+```css
+.y-radio[value="1"]:checked
+  ~ .z-radio[value="1"]:checked
+  ~ .x-radio[value="1"]:checked
+  ~ .dice {
+  transform: rotateY(0deg)
+    rotateZ(0deg)
+    rotateX(0deg);
+}
+
+.y-radio[value="1"]:checked
+  ~ .z-radio[value="1"]:checked
+  ~ .x-radio[value="2"]:checked
+  ~ .dice {
+  transform: rotateY(0deg)
+    rotateZ(0deg)
+    rotateX(90deg);
+}
+
+....
+```
+
+# A 3D dice
+Making a 3D dice is essentially just 6 divs representing the 6 sides then rotating them in 3D space:
+
+```css
+.dice {
+  transform-origin: center center;
+  transform-style: preserve-3d;
+
+  .box {
+    width: 150px;
+    height: 150px;
+    position: relative;
+
+    & > * {
+      position: absolute;
+      width: 150px;
+      height: 150px;
+    }
+
+    .front {
+      transform: translateX(-$size / 2) translateZ($size / 2);
+    }
+    .back {
+      transform: translateX(-$size / 2) rotateX(180deg) translateZ($size / 2);
+    }
+    .right {
+      transform: translateX(-$size / 2) rotateY(90deg) translateZ($size / 2);
+    }
+    .left {
+      transform: translateX(-$size / 2) rotateY(-90deg) translateZ($size / 2);
+    }
+    .top {
+      transform: translateX(-$size / 2) rotateX(90deg) translateZ($size / 2);
+    }
+    .bottom {
+      transform: translateX(-$size / 2) rotateX(-90deg) translateZ($size / 2);
+    }
+  }
+}
+```
+
+# A circular arrow
+The arrow consists of an arrow head and a bunch of tail parts that are individually rotated and spaced with CSS to make it look like a continous circle.
+
+The pug code generating the arrow head and tail parts:
+
+```pug
+.arrow
+  .head
+  - var n = 0;
+  while n++ < 30
+    .tail-part
+```
+
+The CSS code putting the peaces together:
+
+```css
+.arrow {
+  position: relative;
+  transform-origin: center center;
+  transform-style: preserve-3d;
+
+  .head {
+    position: absolute;
+    transform: translateZ($radius);
+
+    ...
+  }
+
+  .tail-part {
+    position: absolute;
+
+    &:nth-of-type(1) {
+      transform: rotateX(1 * -10deg) translateZ(40px);
+    }
+
+    &:nth-of-type(2) {
+      transform: rotateX(2 * -10deg) translateZ(40px);
+    }
+
+    ...
+  }
+}
+```
diff --git a/css-only-interactive-3d-dice/dist/index.html b/css-only-interactive-3d-dice/dist/index.html
new file mode 100644
index 0000000..f63a850
--- /dev/null
+++ b/css-only-interactive-3d-dice/dist/index.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS only interactive 3D dice</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="center">
+  <div class="grid">
+    <!-- The three selectors below the dice-->
+        <!-- A set of radio buttons each representing a turn (0°, 90°, 180°, 270°)-->
+        <!-- With CSS we'll always show on top the one that leads to the next state-->
+        <input class="radio y-radio" type="radio" name="y" value="1" checked="checked"/>
+        <input class="radio y-radio" type="radio" name="y" value="2"/>
+        <input class="radio y-radio" type="radio" name="y" value="3"/>
+        <input class="radio y-radio" type="radio" name="y" value="4"/>
+        <!-- A graphical indicator for the direction of the rotation-->
+        <!-- Consists of an arrow head and a bunch of tail parts-->
+        <!-- The 3D shape is made by CSS-->
+        <div class="arrow y-arrow">
+          <div class="head"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+        </div>
+        <!-- The label showing up on hover indicating the current degree of the turn-->
+        <div class="degree y-degree" id="y1">0°</div>
+        <div class="degree y-degree" id="y2">90°</div>
+        <div class="degree y-degree" id="y3">180°</div>
+        <div class="degree y-degree" id="y4">270°</div>
+        <!-- A set of radio buttons each representing a turn (0°, 90°, 180°, 270°)-->
+        <!-- With CSS we'll always show on top the one that leads to the next state-->
+        <input class="radio z-radio" type="radio" name="z" value="1" checked="checked"/>
+        <input class="radio z-radio" type="radio" name="z" value="2"/>
+        <input class="radio z-radio" type="radio" name="z" value="3"/>
+        <input class="radio z-radio" type="radio" name="z" value="4"/>
+        <!-- A graphical indicator for the direction of the rotation-->
+        <!-- Consists of an arrow head and a bunch of tail parts-->
+        <!-- The 3D shape is made by CSS-->
+        <div class="arrow z-arrow">
+          <div class="head"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+        </div>
+        <!-- The label showing up on hover indicating the current degree of the turn-->
+        <div class="degree z-degree" id="z1">0°</div>
+        <div class="degree z-degree" id="z2">90°</div>
+        <div class="degree z-degree" id="z3">180°</div>
+        <div class="degree z-degree" id="z4">270°</div>
+        <!-- A set of radio buttons each representing a turn (0°, 90°, 180°, 270°)-->
+        <!-- With CSS we'll always show on top the one that leads to the next state-->
+        <input class="radio x-radio" type="radio" name="x" value="1" checked="checked"/>
+        <input class="radio x-radio" type="radio" name="x" value="2"/>
+        <input class="radio x-radio" type="radio" name="x" value="3"/>
+        <input class="radio x-radio" type="radio" name="x" value="4"/>
+        <!-- A graphical indicator for the direction of the rotation-->
+        <!-- Consists of an arrow head and a bunch of tail parts-->
+        <!-- The 3D shape is made by CSS-->
+        <div class="arrow x-arrow">
+          <div class="head"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+          <div class="tail-part"></div>
+        </div>
+        <!-- The label showing up on hover indicating the current degree of the turn-->
+        <div class="degree x-degree" id="x1">0°</div>
+        <div class="degree x-degree" id="x2">90°</div>
+        <div class="degree x-degree" id="x3">180°</div>
+        <div class="degree x-degree" id="x4">270°</div>
+    <!-- The dice with each side-->
+    <!-- The 2D graphics of sides are defined here in SVGs-->
+    <!-- The overall 3D shape is made with CSS-->
+    <div class="dice">
+      <div class="box">
+        <svg class="front">
+          <circle cx="30" cy="30" r="20"></circle>
+          <circle cx="75" cy="30" r="20"></circle>
+          <circle cx="120" cy="30" r="20"></circle>
+          <circle cx="30" cy="120" r="20"></circle>
+          <circle cx="75" cy="120" r="20"></circle>
+          <circle cx="120" cy="120" r="20"></circle>
+        </svg>
+        <svg class="back">
+          <circle cx="75" cy="75" r="20"></circle>
+        </svg>
+        <svg class="left">
+          <circle cx="30" cy="30" r="20"></circle>
+          <circle cx="120" cy="120" r="20"></circle>
+        </svg>
+        <svg class="right">
+          <circle cx="30" cy="30" r="20"></circle>
+          <circle cx="120" cy="30" r="20"></circle>
+          <circle cx="30" cy="120" r="20"></circle>
+          <circle cx="120" cy="120" r="20"></circle>
+          <circle cx="75" cy="75" r="20"></circle>
+        </svg>
+        <svg class="top">
+          <circle cx="30" cy="30" r="20"></circle>
+          <circle cx="120" cy="30" r="20"></circle>
+          <circle cx="30" cy="120" r="20"></circle>
+          <circle cx="120" cy="120" r="20"></circle>
+        </svg>
+        <svg class="bottom">
+          <circle cx="30" cy="30" r="20"></circle>
+          <circle cx="75" cy="75" r="20"></circle>
+          <circle cx="120" cy="120" r="20"></circle>
+        </svg>
+      </div>
+    </div>
+    <div class="label">Click an axis to rotate</div>
+  </div>
+</div>
+<footer><a href="https://twitter.com/HunorBorbely" target="_blank">@HunorBorbely</a></footer>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/css-only-interactive-3d-dice/dist/style.css b/css-only-interactive-3d-dice/dist/style.css
new file mode 100644
index 0000000..e1fe7ef
--- /dev/null
+++ b/css-only-interactive-3d-dice/dist/style.css
@@ -0,0 +1,1075 @@
+/* 
+You can find some of the ideas I used in this pen on the detail page and in the code: https://codepen.io/HunorMarton/details/mdERrLy
+
+Follow me on twitter: https://twitter.com/HunorBorbely
+*/
+body {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  background-color: #ececec;
+  margin: 0;
+}
+
+.center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -180px;
+  margin-top: -230px;
+}
+
+.grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: 100px 100px 100px;
+  grid-template-rows: 280px 100px 20px;
+  grid-column-gap: 20px;
+  grid-row-gap: 30px;
+  border-radius: 10px;
+}
+.grid .dice {
+  grid-row: 1;
+  grid-column: 1 / -1;
+}
+.grid .y-radio,
+.grid .y-degree,
+.grid .y-arrow {
+  grid-row: 2;
+  grid-column: 1;
+}
+.grid .z-radio,
+.grid .z-degree,
+.grid .z-arrow {
+  grid-row: 2;
+  grid-column: 2;
+}
+.grid .x-radio,
+.grid .x-degree,
+.grid .x-arrow {
+  grid-row: 2;
+  grid-column: 3;
+}
+.grid .radio {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  z-index: 5;
+  cursor: pointer;
+}
+.grid .degree {
+  border-radius: 10px;
+  color: #6f9ceb;
+  font-weight: 900;
+  font-size: 1.5em;
+  width: 100%;
+  height: 100%;
+  z-index: 3;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+}
+.grid .label {
+  text-align: center;
+  grid-column: 1 / -1;
+}
+
+.degree,
+.radio {
+  display: none;
+}
+
+.y-radio[value="1"],
+.y-radio[value="1"]:checked ~ .y-radio[value="2"],
+.y-radio[value="2"]:checked ~ .y-radio[value="3"],
+.y-radio[value="3"]:checked ~ .y-radio[value="4"] {
+  display: block;
+}
+
+.z-radio[value="1"],
+.z-radio[value="1"]:checked ~ .z-radio[value="2"],
+.z-radio[value="2"]:checked ~ .z-radio[value="3"],
+.z-radio[value="3"]:checked ~ .z-radio[value="4"] {
+  display: block;
+}
+
+.x-radio[value="1"],
+.x-radio[value="1"]:checked ~ .x-radio[value="2"],
+.x-radio[value="2"]:checked ~ .x-radio[value="3"],
+.x-radio[value="3"]:checked ~ .x-radio[value="4"] {
+  display: block;
+}
+
+.y-radio[value="1"]:checked ~ .y-radio:hover ~ #y1,
+.y-radio:hover ~ .y-radio[value="1"]:checked ~ #y1 {
+  display: flex;
+}
+
+.y-radio[value="2"]:checked ~ .y-radio:hover ~ #y2,
+.y-radio:hover ~ .y-radio[value="2"]:checked ~ #y2 {
+  display: flex;
+}
+
+.y-radio[value="3"]:checked ~ .y-radio:hover ~ #y3,
+.y-radio:hover ~ .y-radio[value="3"]:checked ~ #y3 {
+  display: flex;
+}
+
+.y-radio[value="4"]:checked ~ .y-radio:hover ~ #y4,
+.y-radio:hover ~ .y-radio[value="4"]:checked ~ #y4 {
+  display: flex;
+}
+
+.z-radio[value="1"]:checked ~ .z-radio:hover ~ #z1,
+.z-radio:hover ~ .z-radio[value="1"]:checked ~ #z1 {
+  display: flex;
+}
+
+.z-radio[value="2"]:checked ~ .z-radio:hover ~ #z2,
+.z-radio:hover ~ .z-radio[value="2"]:checked ~ #z2 {
+  display: flex;
+}
+
+.z-radio[value="3"]:checked ~ .z-radio:hover ~ #z3,
+.z-radio:hover ~ .z-radio[value="3"]:checked ~ #z3 {
+  display: flex;
+}
+
+.z-radio[value="4"]:checked ~ .z-radio:hover ~ #z4,
+.z-radio:hover ~ .z-radio[value="4"]:checked ~ #z4 {
+  display: flex;
+}
+
+.x-radio[value="1"]:checked ~ .x-radio:hover ~ #x1,
+.x-radio:hover ~ .x-radio[value="1"]:checked ~ #x1 {
+  display: flex;
+}
+
+.x-radio[value="2"]:checked ~ .x-radio:hover ~ #x2,
+.x-radio:hover ~ .x-radio[value="2"]:checked ~ #x2 {
+  display: flex;
+}
+
+.x-radio[value="3"]:checked ~ .x-radio:hover ~ #x3,
+.x-radio:hover ~ .x-radio[value="3"]:checked ~ #x3 {
+  display: flex;
+}
+
+.x-radio[value="4"]:checked ~ .x-radio:hover ~ #x4,
+.x-radio:hover ~ .x-radio[value="4"]:checked ~ #x4 {
+  display: flex;
+}
+
+.dice {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform-origin: center center;
+  transform-style: preserve-3d;
+  transition: transform 1s;
+}
+.dice .box {
+  transform-style: preserve-3d;
+  width: 150px;
+  height: 150px;
+  position: relative;
+}
+.dice .box svg {
+  background-color: white;
+  border: 2px solid #0059b3;
+  fill: #003366;
+  position: absolute;
+  border-radius: 10px;
+  width: 150px;
+  height: 150px;
+}
+.dice .box .front {
+  transform: translateX(-75px) translateZ(75px);
+}
+.dice .box .back {
+  transform: translateX(-75px) rotateX(180deg) translateZ(75px);
+}
+.dice .box .right {
+  transform: translateX(-75px) rotateY(90deg) translateZ(75px);
+}
+.dice .box .left {
+  transform: translateX(-75px) rotateY(-90deg) translateZ(75px);
+}
+.dice .box .top {
+  transform: translateX(-75px) rotateX(90deg) translateZ(75px);
+}
+.dice .box .bottom {
+  transform: translateX(-75px) rotateX(-90deg) translateZ(75px);
+}
+
+.arrow {
+  position: relative;
+  transform-origin: center center;
+  transform-style: preserve-3d;
+  transition: transform 1s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+.arrow .head {
+  position: absolute;
+  transform: translateZ(40px);
+  width: 0;
+  height: 0;
+  border-left: 25px solid transparent;
+  border-right: 25px solid transparent;
+  border-bottom: 25px solid #004d99;
+}
+.arrow .tail-part {
+  position: absolute;
+  width: 30px;
+  height: 8px;
+}
+.arrow .tail-part:nth-of-type(2) {
+  transform: rotateX(-20deg) translateZ(40px);
+  background-color: #0052a3;
+}
+.arrow .tail-part:nth-of-type(3) {
+  transform: rotateX(-30deg) translateZ(40px);
+  background-color: #0054a8;
+}
+.arrow .tail-part:nth-of-type(4) {
+  transform: rotateX(-40deg) translateZ(40px);
+  background-color: #0057ad;
+}
+.arrow .tail-part:nth-of-type(5) {
+  transform: rotateX(-50deg) translateZ(40px);
+  background-color: #0059b3;
+}
+.arrow .tail-part:nth-of-type(6) {
+  transform: rotateX(-60deg) translateZ(40px);
+  background-color: #005cb8;
+}
+.arrow .tail-part:nth-of-type(7) {
+  transform: rotateX(-70deg) translateZ(40px);
+  background-color: #005ebd;
+}
+.arrow .tail-part:nth-of-type(8) {
+  transform: rotateX(-80deg) translateZ(40px);
+  background-color: #0061c2;
+}
+.arrow .tail-part:nth-of-type(9) {
+  transform: rotateX(-90deg) translateZ(40px);
+  background-color: #0063c7;
+}
+.arrow .tail-part:nth-of-type(10) {
+  transform: rotateX(-100deg) translateZ(40px);
+  background-color: #0066cc;
+}
+.arrow .tail-part:nth-of-type(11) {
+  transform: rotateX(-110deg) translateZ(40px);
+  background-color: #0069d1;
+}
+.arrow .tail-part:nth-of-type(12) {
+  transform: rotateX(-120deg) translateZ(40px);
+  background-color: #006bd6;
+}
+.arrow .tail-part:nth-of-type(13) {
+  transform: rotateX(-130deg) translateZ(40px);
+  background-color: #006edb;
+}
+.arrow .tail-part:nth-of-type(14) {
+  transform: rotateX(-140deg) translateZ(40px);
+  background-color: #0070e0;
+}
+.arrow .tail-part:nth-of-type(15) {
+  transform: rotateX(-150deg) translateZ(40px);
+  background-color: #0073e6;
+}
+.arrow .tail-part:nth-of-type(16) {
+  transform: rotateX(-160deg) translateZ(40px);
+  background-color: #0075eb;
+}
+.arrow .tail-part:nth-of-type(17) {
+  transform: rotateX(-170deg) translateZ(40px);
+  background-color: #0078f0;
+}
+.arrow .tail-part:nth-of-type(18) {
+  transform: rotateX(-180deg) translateZ(40px);
+  background-color: #007af5;
+}
+.arrow .tail-part:nth-of-type(19) {
+  transform: rotateX(-190deg) translateZ(40px);
+  background-color: #007dfa;
+}
+.arrow .tail-part:nth-of-type(20) {
+  transform: rotateX(-200deg) translateZ(40px);
+  background-color: #0080ff;
+}
+.arrow .tail-part:nth-of-type(21) {
+  transform: rotateX(-210deg) translateZ(40px);
+  background-color: #0582ff;
+}
+.arrow .tail-part:nth-of-type(22) {
+  transform: rotateX(-220deg) translateZ(40px);
+  background-color: #0a85ff;
+}
+.arrow .tail-part:nth-of-type(23) {
+  transform: rotateX(-230deg) translateZ(40px);
+  background-color: #0f87ff;
+}
+.arrow .tail-part:nth-of-type(24) {
+  transform: rotateX(-240deg) translateZ(40px);
+  background-color: #148aff;
+}
+.arrow .tail-part:nth-of-type(25) {
+  transform: rotateX(-250deg) translateZ(40px);
+  background-color: #1a8cff;
+}
+.arrow .tail-part:nth-of-type(26) {
+  transform: rotateX(-260deg) translateZ(40px);
+  background-color: #1f8fff;
+}
+.arrow .tail-part:nth-of-type(27) {
+  transform: rotateX(-270deg) translateZ(40px);
+  background-color: #2491ff;
+}
+.arrow .tail-part:nth-of-type(28) {
+  transform: rotateX(-280deg) translateZ(40px);
+  background-color: #2994ff;
+}
+.arrow .tail-part:nth-of-type(29) {
+  transform: rotateX(-290deg) translateZ(40px);
+  background-color: #2e96ff;
+}
+.arrow .tail-part:nth-of-type(30) {
+  transform: rotateX(-300deg) translateZ(40px);
+  background-color: #3399ff;
+}
+.arrow .tail-part:nth-of-type(31) {
+  transform: rotateX(-310deg) translateZ(40px);
+  background-color: #389cff;
+}
+
+.y-radio[value="1"]:checked ~ .y-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(-90deg) rotateX(0deg);
+}
+
+.y-radio[value="2"]:checked ~ .y-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(-90deg) rotateX(90deg);
+}
+
+.y-radio[value="3"]:checked ~ .y-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(-90deg) rotateX(180deg);
+}
+
+.y-radio[value="4"]:checked ~ .y-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(-90deg) rotateX(270deg);
+}
+
+.y-radio[value="1"]:checked ~ .z-radio[value="1"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="2"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(-90deg) rotateX(90deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="3"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(-90deg) rotateX(180deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="4"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(-90deg) rotateX(270deg);
+}
+
+.y-radio[value="2"]:checked ~ .z-radio[value="1"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(0deg) rotateX(0deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="2"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(0deg) rotateX(90deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="3"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(0deg) rotateX(180deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="4"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(0deg) rotateX(270deg);
+}
+
+.y-radio[value="3"]:checked ~ .z-radio[value="1"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(90deg) rotateX(0deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="2"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(90deg) rotateX(90deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="3"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(90deg) rotateX(180deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="4"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(90deg) rotateX(270deg);
+}
+
+.y-radio[value="4"]:checked ~ .z-radio[value="1"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(180deg) rotateX(0deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="2"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(180deg) rotateX(90deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="3"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(180deg) rotateX(180deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="4"]:checked ~ .z-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateZ(180deg) rotateY(180deg) rotateX(270deg);
+}
+
+.y-radio[value="1"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(0deg) rotateX(0deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(0deg) rotateX(90deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(0deg) rotateX(180deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(0deg) rotateX(270deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(90deg) rotateX(0deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(90deg) rotateX(90deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(90deg) rotateX(180deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(90deg) rotateX(270deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(180deg) rotateX(0deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(180deg) rotateX(90deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(180deg) rotateX(180deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(180deg) rotateX(270deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(270deg) rotateX(0deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(270deg) rotateX(90deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(270deg) rotateX(180deg);
+}
+.y-radio[value="1"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(270deg) rotateX(270deg);
+}
+
+.y-radio[value="2"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(0deg) rotateX(0deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(0deg) rotateX(90deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(0deg) rotateX(180deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(0deg) rotateX(270deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(90deg) rotateX(0deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(90deg) rotateX(90deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(90deg) rotateX(180deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(90deg) rotateX(270deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(180deg) rotateX(0deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(180deg) rotateX(90deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(180deg) rotateX(180deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(180deg) rotateX(270deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(270deg) rotateX(0deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(270deg) rotateX(90deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(270deg) rotateX(180deg);
+}
+.y-radio[value="2"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(270deg) rotateX(270deg);
+}
+
+.y-radio[value="3"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(0deg) rotateX(0deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(0deg) rotateX(90deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(0deg) rotateX(180deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(0deg) rotateX(270deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(90deg) rotateX(0deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(90deg) rotateX(90deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(90deg) rotateX(180deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(90deg) rotateX(270deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(180deg) rotateX(0deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(180deg) rotateX(90deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(180deg) rotateX(180deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(180deg) rotateX(270deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(270deg) rotateX(0deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(270deg) rotateX(90deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(270deg) rotateX(180deg);
+}
+.y-radio[value="3"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(270deg) rotateX(270deg);
+}
+
+.y-radio[value="4"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(0deg) rotateX(0deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(0deg) rotateX(90deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(0deg) rotateX(180deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="1"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(0deg) rotateX(270deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(90deg) rotateX(0deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(90deg) rotateX(90deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(90deg) rotateX(180deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="2"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(90deg) rotateX(270deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(180deg) rotateX(0deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(180deg) rotateX(90deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(180deg) rotateX(180deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="3"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(180deg) rotateX(270deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="1"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(270deg) rotateX(0deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="2"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(270deg) rotateX(90deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="3"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(270deg) rotateX(180deg);
+}
+.y-radio[value="4"]:checked ~ .z-radio[value="4"]:checked ~ .x-radio[value="4"]:checked ~ .x-arrow {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(270deg) rotateX(270deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(0deg) rotateX(0deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(0deg) rotateX(90deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(0deg) rotateX(180deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(0deg) rotateX(270deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(90deg) rotateX(0deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(90deg) rotateX(90deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(90deg) rotateX(180deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(90deg) rotateX(270deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(180deg) rotateX(0deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(180deg) rotateX(90deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(180deg) rotateX(180deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(180deg) rotateX(270deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(270deg) rotateX(0deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(270deg) rotateX(90deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(270deg) rotateX(180deg);
+}
+
+.y-radio[value="1"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(0deg) rotateZ(270deg) rotateX(270deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(0deg) rotateX(0deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(0deg) rotateX(90deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(0deg) rotateX(180deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(0deg) rotateX(270deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(90deg) rotateX(0deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(90deg) rotateX(90deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(90deg) rotateX(180deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(90deg) rotateX(270deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(180deg) rotateX(0deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(180deg) rotateX(90deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(180deg) rotateX(180deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(180deg) rotateX(270deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(270deg) rotateX(0deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(270deg) rotateX(90deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(270deg) rotateX(180deg);
+}
+
+.y-radio[value="2"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-90deg) rotateZ(270deg) rotateX(270deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(0deg) rotateX(0deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(0deg) rotateX(90deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(0deg) rotateX(180deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(0deg) rotateX(270deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(90deg) rotateX(0deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(90deg) rotateX(90deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(90deg) rotateX(180deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(90deg) rotateX(270deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(180deg) rotateX(0deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(180deg) rotateX(90deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(180deg) rotateX(180deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(180deg) rotateX(270deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(270deg) rotateX(0deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(270deg) rotateX(90deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(270deg) rotateX(180deg);
+}
+
+.y-radio[value="3"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-180deg) rotateZ(270deg) rotateX(270deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(0deg) rotateX(0deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(0deg) rotateX(90deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(0deg) rotateX(180deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="1"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(0deg) rotateX(270deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(90deg) rotateX(0deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(90deg) rotateX(90deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(90deg) rotateX(180deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="2"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(90deg) rotateX(270deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(180deg) rotateX(0deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(180deg) rotateX(90deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(180deg) rotateX(180deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="3"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(180deg) rotateX(270deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="1"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(270deg) rotateX(0deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="2"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(270deg) rotateX(90deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="3"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(270deg) rotateX(180deg);
+}
+
+.y-radio[value="4"]:checked
+~ .z-radio[value="4"]:checked
+~ .x-radio[value="4"]:checked
+~ .dice {
+  transform: rotateX(-20deg) rotateY(-40deg) rotateY(-270deg) rotateZ(270deg) rotateX(270deg);
+}
+
+footer {
+  position: absolute;
+  bottom: 20px;
+  font-size: 0.8em;
+  text-align: center;
+  width: 100%;
+}
+footer a:visited {
+  color: inherit;
+}
\ No newline at end of file
diff --git a/css-only-interactive-3d-dice/license.txt b/css-only-interactive-3d-dice/license.txt
new file mode 100644
index 0000000..59b515d
--- /dev/null
+++ b/css-only-interactive-3d-dice/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Hunor Marton Borbely (https://codepen.io/HunorMarton/pen/mdERrLy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-only-interactive-3d-dice/src/index.pug b/css-only-interactive-3d-dice/src/index.pug
new file mode 100644
index 0000000..18529e3
--- /dev/null
+++ b/css-only-interactive-3d-dice/src/index.pug
@@ -0,0 +1,70 @@
+.center
+  .grid
+    mixin selector(name)
+      - var radioClass = name + '-radio';
+      - var degreeClass = name + '-degree';
+      - var arrowClass = name + '-arrow';
+
+      // A set of radio buttons each representing a turn (0°, 90°, 180°, 270°)
+      // With CSS we'll always show on top the one that leads to the next state
+      input.radio(class=radioClass, type="radio", name=name, value="1", checked)
+      input.radio(class=radioClass, type="radio", name=name, value="2")
+      input.radio(class=radioClass, type="radio", name=name, value="3")
+      input.radio(class=radioClass, type="radio", name=name, value="4")
+
+      // A graphical indicator for the direction of the rotation
+      // Consists of an arrow head and a bunch of tail parts
+      // The 3D shape is made by CSS
+      .arrow(class=arrowClass)
+        .head
+        - var n = 0;
+        while n++ < 30
+          .tail-part
+
+      // The label showing up on hover indicating the current degree of the turn
+      each val in [1, 2, 3, 4]
+        - var id = name + val;
+        .degree(id=id, class=degreeClass) #{val * 90 - 90}°
+
+    // The three selectors below the dice
+    +selector("y")
+    +selector("z")
+    +selector("x")
+
+    // The dice with each side
+    // The 2D graphics of sides are defined here in SVGs
+    // The overall 3D shape is made with CSS
+    .dice
+      .box
+        svg.front
+          circle(cx="30", cy="30", r="20")
+          circle(cx="75", cy="30", r="20")
+          circle(cx="120", cy="30", r="20")
+          circle(cx="30", cy="120", r="20")
+          circle(cx="75", cy="120", r="20")
+          circle(cx="120", cy="120", r="20")
+        svg.back
+          circle(cx="75", cy="75", r="20")
+        svg.left
+          circle(cx="30", cy="30", r="20")
+          circle(cx="120", cy="120", r="20")
+        svg.right
+          circle(cx="30", cy="30", r="20")
+          circle(cx="120", cy="30", r="20")
+          circle(cx="30", cy="120", r="20")
+          circle(cx="120", cy="120", r="20")
+          circle(cx="75", cy="75", r="20")
+        svg.top
+          circle(cx="30", cy="30", r="20")
+          circle(cx="120", cy="30", r="20")
+          circle(cx="30", cy="120", r="20")
+          circle(cx="120", cy="120", r="20")
+        svg.bottom
+          circle(cx="30", cy="30", r="20")
+          circle(cx="75", cy="75", r="20")
+          circle(cx="120", cy="120", r="20")
+
+    .label Click an axis to rotate
+
+footer
+  a(href="https://twitter.com/HunorBorbely", target="_blank") @HunorBorbely
diff --git a/css-only-interactive-3d-dice/src/style.scss b/css-only-interactive-3d-dice/src/style.scss
new file mode 100644
index 0000000..9d048dc
--- /dev/null
+++ b/css-only-interactive-3d-dice/src/style.scss
@@ -0,0 +1,305 @@
+/* 
+You can find some of the ideas I used in this pen on the detail page and in the code: https://codepen.io/HunorMarton/details/mdERrLy
+
+Follow me on twitter: https://twitter.com/HunorBorbely
+*/
+
+$x-rotation: -20deg;
+$y-rotation: -40deg;
+$base-color: lighten(#036, 10%);
+$font-color: #6f9ceb;
+
+body {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  background-color: #ececec;
+  margin: 0;
+}
+
+.center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -180px;
+  margin-top: -230px;
+}
+
+.grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: 100px 100px 100px;
+  grid-template-rows: 280px 100px 20px;
+  grid-column-gap: 20px;
+  grid-row-gap: 30px;
+  border-radius: 10px;
+
+  .dice {
+    grid-row: 1;
+    grid-column: 1 / -1;
+  }
+
+  .y-radio,
+  .y-degree,
+  .y-arrow {
+    grid-row: 2;
+    grid-column: 1;
+  }
+
+  .z-radio,
+  .z-degree,
+  .z-arrow {
+    grid-row: 2;
+    grid-column: 2;
+  }
+
+  .x-radio,
+  .x-degree,
+  .x-arrow {
+    grid-row: 2;
+    grid-column: 3;
+  }
+
+  .radio {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0; // The radio button should be invisible
+    z-index: 5; // The radio button must be on top
+    cursor: pointer;
+  }
+
+  .degree {
+    border-radius: 10px;
+    color: $font-color;
+    font-weight: 900;
+    font-size: 1.5em;
+    width: 100%;
+    height: 100%;
+    z-index: 3;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .label {
+    text-align: center;
+    grid-column: 1 / -1;
+  }
+}
+
+$axis: "y", "z", "x";
+
+// The buttons use a series of checkboxes on top of each other
+// In every case the checkbox leading to the next step is visible
+
+// By default all radio buttons are hidden
+.degree,
+.radio {
+  display: none;
+}
+
+// Always show the first radio button in the background
+// then show the radio button leading for the next state on top of it
+
+// 0° checkbox checked -> Display the checkbox for 90°
+// 90° checkbox checked -> Display the checkbox for 180°
+// 180° checkbox checked -> Display the checkbox for 270°
+// 270° checkbox checked -> Do not display next checkbox but as the 0° is always in the background that will show
+@each $a in $axis {
+  .#{$a}-radio[value="1"],
+  .#{$a}-radio[value="1"]:checked ~ .#{$a}-radio[value="2"],
+  .#{$a}-radio[value="2"]:checked ~ .#{$a}-radio[value="3"],
+  .#{$a}-radio[value="3"]:checked ~ .#{$a}-radio[value="4"] {
+    display: block;
+  }
+}
+
+// Show the degree on top of the degree in percentage
+@each $a in $axis {
+  @for $i from 1 through 4 {
+    .#{$a}-radio[value="#{$i}"]:checked ~ .#{$a}-radio:hover ~ ##{$a}#{$i},
+    .#{$a}-radio:hover ~ .#{$a}-radio[value="#{$i}"]:checked ~ ##{$a}#{$i} {
+      display: flex;
+    }
+  }
+}
+
+// Making the dice look 3D
+// The rotation of the dice is at the bottom of CSS
+.dice {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  transform-origin: center center;
+  transform-style: preserve-3d;
+  transition: transform 1s;
+
+  .box {
+    transform-style: preserve-3d;
+
+    $size: 150px;
+
+    width: $size;
+    height: $size;
+    position: relative;
+
+    svg {
+      background-color: white;
+      border: 2px solid lighten($base-color, 5%);
+      fill: darken($base-color, 10%);
+      position: absolute;
+      border-radius: 10px;
+
+      width: $size;
+      height: $size;
+    }
+
+    // Put the sides of the dice in place
+    .front {
+      transform: translateX(-$size / 2) translateZ($size / 2);
+    }
+    .back {
+      transform: translateX(-$size / 2) rotateX(180deg) translateZ($size / 2);
+    }
+    .right {
+      transform: translateX(-$size / 2) rotateY(90deg) translateZ($size / 2);
+    }
+    .left {
+      transform: translateX(-$size / 2) rotateY(-90deg) translateZ($size / 2);
+    }
+    .top {
+      transform: translateX(-$size / 2) rotateX(90deg) translateZ($size / 2);
+    }
+    .bottom {
+      transform: translateX(-$size / 2) rotateX(-90deg) translateZ($size / 2);
+    }
+  }
+}
+
+.arrow {
+  position: relative;
+  transform-origin: center center;
+  transform-style: preserve-3d;
+  transition: transform 1s;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  $radius: 40px;
+  $width: 30px; // Width of the tail
+
+  .head {
+    position: absolute;
+    transform: translateZ($radius);
+
+    // Make a thriangle shape
+    // https://css-tricks.com/the-shapes-of-css/
+    width: 0;
+    height: 0;
+    border-left: $width/2 + 10 solid transparent;
+    border-right: $width/2 + 10 solid transparent;
+    border-bottom: $width/2 + 10 solid $base-color;
+  }
+
+  .tail-part {
+    position: absolute;
+    width: $width;
+    height: $radius/5;
+
+    // Make the arrow tail look circular
+    @for $i from 2 through 31 {
+      &:nth-of-type(#{$i}) {
+        // Rotate each by a different angle then translate it by circle radius
+        transform: rotateX($i * -10deg) translateZ($radius);
+        background-color: lighten($base-color, $i * 1%);
+      }
+    }
+  }
+}
+
+// Arrow 1
+@for $y from 1 through 4 {
+  .y-radio[value="#{$y}"]:checked {
+    ~ .y-arrow {
+      transform: rotateX($x-rotation)
+        rotateY($y-rotation)
+        rotateZ(-90deg)
+        rotateX(($y - 1) * 90deg);
+    }
+  }
+}
+
+// Arrow 2
+@for $y from 1 through 4 {
+  .y-radio[value="#{$y}"]:checked {
+    @for $z from 1 through 4 {
+      ~ .z-radio[value="#{$z}"]:checked {
+        ~ .z-arrow {
+          transform: rotateX($x-rotation)
+            rotateY($y-rotation)
+            rotateZ(180deg)
+            rotateY(($y - 1) * 90deg - 90deg)
+            rotateX(($z - 1) * 90deg);
+        }
+      }
+    }
+  }
+}
+
+// Arrow 3
+@for $y from 1 through 4 {
+  .y-radio[value="#{$y}"]:checked {
+    @for $z from 1 through 4 {
+      ~ .z-radio[value="#{$z}"]:checked {
+        @for $x from 1 through 4 {
+          ~ .x-radio[value="#{$x}"]:checked {
+            ~ .x-arrow {
+              transform: rotateX($x-rotation)
+                rotateY($y-rotation)
+                rotateY(($y - 1) * -90deg)
+                rotateZ(($z - 1) * 90deg)
+                rotateX(($x - 1) * 90deg);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// Rotate the dice
+@for $y from 1 through 4 {
+  @for $z from 1 through 4 {
+    @for $x from 1 through 4 {
+      .y-radio[value="#{$y}"]:checked
+        ~ .z-radio[value="#{$z}"]:checked
+        ~ .x-radio[value="#{$x}"]:checked
+        ~ .dice {
+        transform: rotateX($x-rotation)
+          rotateY($y-rotation)
+          rotateY(($y - 1) * -90deg)
+          rotateZ(($z - 1) * 90deg)
+          rotateX(($x - 1) * 90deg);
+      }
+    }
+  }
+}
+
+footer {
+  position: absolute;
+  bottom: 20px;
+  font-size: 0.8em;
+  text-align: center;
+  width: 100%;
+
+  a:visited {
+    color: inherit;
+  }
+}
diff --git a/css-only-switch-checkboxes/README.markdown b/css-only-switch-checkboxes/README.markdown
new file mode 100644
index 0000000..1217e66
--- /dev/null
+++ b/css-only-switch-checkboxes/README.markdown
@@ -0,0 +1,5 @@
+# CSS-only <switch> checkboxes
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/developit/pen/wvJKGqx](https://codepen.io/developit/pen/wvJKGqx).
+
+
diff --git a/css-only-switch-checkboxes/dist/index.html b/css-only-switch-checkboxes/dist/index.html
new file mode 100644
index 0000000..a2c107b
--- /dev/null
+++ b/css-only-switch-checkboxes/dist/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS-only &lt;switch&gt; checkboxes</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<fieldset>
+	<legend>Thrusters</legend>
+	<center>
+		<label>
+			<input type="checkbox" class="switch">
+			Bow
+		</label>
+	</center>
+	<label>
+		<input type="checkbox" class="switch" style="--bg-checked: rgb(240,70,110);">
+		Port
+	</label>
+	<label>
+		<input type="checkbox" class="switch" checked  style="--bg-checked: rgb(50,240,130);">
+		Starboard
+	</label>
+	<center>
+		<label>
+			<input type="checkbox" class="switch">
+			Stern
+		</label>
+	</center>
+</fieldset>
+
+<label style="position:fixed; right:0;">
+	<input type="checkbox" class="switch" onclick="document.documentElement.classList.toggle('dark',this.checked)">
+	Dark Mode
+</label>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/css-only-switch-checkboxes/dist/style.css b/css-only-switch-checkboxes/dist/style.css
new file mode 100644
index 0000000..f49d25f
--- /dev/null
+++ b/css-only-switch-checkboxes/dist/style.css
@@ -0,0 +1,80 @@
+/*
+ * <input type=checkbox class=switch>
+ * License: MIT
+ */
+input.switch {
+	appearance: none;
+	-webkit-appearance: none;
+	position: relative;
+	display: inline-block;
+	width: 2.4em;
+	height: 1.4em;
+	margin: -.2em 0;
+	box-sizing: content-box;
+	padding: 0;
+	border: none;
+	border-radius: .9em;
+	background: rgba(160,160,160,0.7);
+	box-shadow: 0 .15em .3em rgba(0,0,0,0.6) inset, 0 -.5px 0 rgba(255,255,255,0.2) inset;
+	transition: background-color 250ms ease, box-shadow 250ms ease;
+	user-select: none;
+	outline: none;
+}
+input.switch::before {
+	content: '';
+	display: block;
+	position: absolute;
+	width: 1em;
+	height: .97em;
+	left: 0;
+	top: 0;
+	background: rgba(240,240,240,0.9);
+	box-shadow: 0 1px 1px #fff inset, 0 .2em .5em rgba(255,255,255,0.7) inset, 0 -.2em .3em rgba(0,0,0,0.2) inset, 0 .08em .2em rgba(0,0,0,0.5);
+	border-radius: 50%;
+	transform: translate(20%, 20%);
+	transition: transform 250ms ease;
+}
+input.switch:focus::before {
+	background: rgba(255,255,255,0.9);
+}
+input.switch:checked {
+	background-color: var(--bg-checked, var(--bg, rgb(60,130,250)));
+}
+input.switch:focus-visible {
+	box-shadow: 0 .15em .3em rgba(0,0,0,0.6) inset, 0 -.5px 0 rgba(255,255,255,0.2) inset, 0 0 0 2px rgba(255,255,255,0.8), 0 0 0 4px var(--bg-checked, var(--bg, rgb(60,130,250)));
+}
+input.switch:checked::before {
+	transform: translate(120%, 20%);
+}
+
+
+
+/* Demo Styles */
+html {
+	font: 100%/1.3 system-ui,sans-serif;
+	color: #222;
+	transition: background-color 250ms ease, color 250ms ease;
+}
+html.dark {
+	background: #22292f;
+	color: #eee;
+}
+fieldset {
+	border: 1px solid rgba(150,150,150,0.5);
+	border-radius: 5px;
+	padding: 10px;
+	display: inline-block;
+}
+legend {
+	opacity: 0.7;
+}
+label {
+	padding: 20px;
+	display: inline-flex;
+	align-items: center;
+	gap: 10px;
+	user-select: none;
+}
+center {
+	padding: 1em 0;
+}
\ No newline at end of file
diff --git a/css-only-switch-checkboxes/license.txt b/css-only-switch-checkboxes/license.txt
new file mode 100644
index 0000000..484db6f
--- /dev/null
+++ b/css-only-switch-checkboxes/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Jason Miller (https://codepen.io/developit/pen/wvJKGqx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-only-switch-checkboxes/src/index.html b/css-only-switch-checkboxes/src/index.html
new file mode 100644
index 0000000..2c4325d
--- /dev/null
+++ b/css-only-switch-checkboxes/src/index.html
@@ -0,0 +1,28 @@
+<fieldset>
+	<legend>Thrusters</legend>
+	<center>
+		<label>
+			<input type="checkbox" class="switch">
+			Bow
+		</label>
+	</center>
+	<label>
+		<input type="checkbox" class="switch" style="--bg-checked: rgb(240,70,110);">
+		Port
+	</label>
+	<label>
+		<input type="checkbox" class="switch" checked  style="--bg-checked: rgb(50,240,130);">
+		Starboard
+	</label>
+	<center>
+		<label>
+			<input type="checkbox" class="switch">
+			Stern
+		</label>
+	</center>
+</fieldset>
+
+<label style="position:fixed; right:0;">
+	<input type="checkbox" class="switch" onclick="document.documentElement.classList.toggle('dark',this.checked)">
+	Dark Mode
+</label>
diff --git a/css-only-switch-checkboxes/src/style.css b/css-only-switch-checkboxes/src/style.css
new file mode 100644
index 0000000..867bf13
--- /dev/null
+++ b/css-only-switch-checkboxes/src/style.css
@@ -0,0 +1,80 @@
+/*
+ * <input type=checkbox class=switch>
+ * License: MIT
+ */
+input.switch {
+	appearance: none;
+	-webkit-appearance: none;
+	position: relative;
+	display: inline-block;
+	width: 2.4em;
+	height: 1.4em;
+	margin: -.2em 0;
+	box-sizing: content-box;
+	padding: 0;
+	border: none;
+	border-radius: .9em;
+	background: rgba(160,160,160,0.7);
+	box-shadow: 0 .15em .3em rgba(0,0,0,0.6) inset, 0 -.5px 0 rgba(255,255,255,0.2) inset;
+	transition: background-color 250ms ease, box-shadow 250ms ease;
+	user-select: none;
+	outline: none;
+}
+input.switch::before {
+	content: '';
+	display: block;
+	position: absolute;
+	width: 1em;
+	height: .97em;
+	left: 0;
+	top: 0;
+	background: rgba(240,240,240,0.9);
+	box-shadow: 0 1px 1px #fff inset, 0 .2em .5em rgba(255,255,255,0.7) inset, 0 -.2em .3em rgba(0,0,0,0.2) inset, 0 .08em .2em rgba(0,0,0,0.5);
+	border-radius: 50%;
+	transform: translate(20%, 20%);
+	transition: transform 250ms ease;
+}
+input.switch:focus::before {
+	background: rgba(255,255,255,0.9);
+}
+input.switch:checked {
+	background-color: var(--bg-checked, var(--bg, rgb(60,130,250)));
+}
+input.switch:focus-visible {
+	box-shadow: 0 .15em .3em rgba(0,0,0,0.6) inset, 0 -.5px 0 rgba(255,255,255,0.2) inset, 0 0 0 2px rgba(255,255,255,0.8), 0 0 0 4px var(--bg-checked, var(--bg, rgb(60,130,250)));
+}
+input.switch:checked::before {
+	transform: translate(120%, 20%);
+}
+
+
+
+/* Demo Styles */
+html {
+	font: 100%/1.3 system-ui,sans-serif;
+	color: #222;
+	transition: background-color 250ms ease, color 250ms ease;
+}
+html.dark {
+	background: #22292f;
+	color: #eee;
+}
+fieldset {
+	border: 1px solid rgba(150,150,150,0.5);
+	border-radius: 5px;
+	padding: 10px;
+	display: inline-block;
+}
+legend {
+	opacity: 0.7;
+}
+label {
+	padding: 20px;
+	display: inline-flex;
+	align-items: center;
+	gap: 10px;
+	user-select: none;
+}
+center {
+	padding: 1em 0;
+}
diff --git a/css-panning-perspective-plane/README.markdown b/css-panning-perspective-plane/README.markdown
new file mode 100644
index 0000000..1cffb0c
--- /dev/null
+++ b/css-panning-perspective-plane/README.markdown
@@ -0,0 +1,4 @@
+# CSS Panning Perspective Plane
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/zschaffter/pen/BxWWNY](https://codepen.io/zschaffter/pen/BxWWNY).
+
+ 
\ No newline at end of file
diff --git a/css-panning-perspective-plane/dist/index.html b/css-panning-perspective-plane/dist/index.html
new file mode 100644
index 0000000..67dab61
--- /dev/null
+++ b/css-panning-perspective-plane/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Panning Perspective Plane</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class='viewport'>
+  <div class='field'></div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/css-panning-perspective-plane/dist/style.css b/css-panning-perspective-plane/dist/style.css
new file mode 100644
index 0000000..5afd9f6
--- /dev/null
+++ b/css-panning-perspective-plane/dist/style.css
@@ -0,0 +1,38 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #383838;
+}
+
+.viewport {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  perspective: 600px;
+  overflow: hidden;
+}
+
+.field {
+  transform-origin: 50% 0;
+  top: 50%;
+  left: 50%;
+  height: 400%;
+  width: 1000%;
+  position: absolute;
+  transform: translateX(-50%) rotateX(85deg);
+  background-image: linear-gradient(to right, transparent 50%, #dbd9da 50%, #dbd9da 100%, transparent 100%);
+  background-size: 1% 100%;
+  border-top: 30px solid #dbd9da;
+  animation: panRight 30s linear infinite;
+}
+
+@keyframes panRight {
+  0% {
+    transform: translateX(-50%) rotateX(85deg);
+  }
+  100% {
+    transform: translateX(-75%) rotateX(85deg);
+  }
+}
diff --git a/css-panning-perspective-plane/license.txt b/css-panning-perspective-plane/license.txt
new file mode 100644
index 0000000..f7af58f
--- /dev/null
+++ b/css-panning-perspective-plane/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Zack Schaffter (https://codepen.io/zschaffter/pen/BxWWNY)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/css-panning-perspective-plane/src/index.haml b/css-panning-perspective-plane/src/index.haml
new file mode 100644
index 0000000..36d8bf2
--- /dev/null
+++ b/css-panning-perspective-plane/src/index.haml
@@ -0,0 +1,3 @@
+.viewport
+  .field
+  
\ No newline at end of file
diff --git a/css-panning-perspective-plane/src/style.scss b/css-panning-perspective-plane/src/style.scss
new file mode 100644
index 0000000..89944e7
--- /dev/null
+++ b/css-panning-perspective-plane/src/style.scss
@@ -0,0 +1,44 @@
+$color : #dbd9da;
+
+html, 
+body {
+  width:100%;
+  height:100%;
+  position:relative;
+  background-color:#383838;
+}
+
+.viewport {
+  width:100%;
+  height:100%;
+  position:absolute;
+  perspective: 600px;
+  overflow:hidden;
+}
+
+.field {
+  transform-origin:50% 0;
+  top:50%;
+  left:50%;
+  height:400%;
+  width:1000%;
+  position:absolute;
+  transform:translateX(-50%) rotateX(85deg);
+  background-image:
+    linear-gradient(to right, transparent 50%, $color 50%, $color 100%, transparent 100%);
+  background-size:1% 100%;
+   border-top:30px solid $color;
+  animation: panRight 30s linear infinite;
+  
+  
+}
+
+@keyframes panRight {
+  0% {
+    transform:translateX(-50%) rotateX(85deg);
+  }
+  
+  100% {
+    transform:translateX(-75%) rotateX(85deg);
+  }
+}
\ No newline at end of file
diff --git a/css-position-sticky-with-top-0-and-bottom-0/README.markdown b/css-position-sticky-with-top-0-and-bottom-0/README.markdown
new file mode 100644
index 0000000..1c4e704
--- /dev/null
+++ b/css-position-sticky-with-top-0-and-bottom-0/README.markdown
@@ -0,0 +1,7 @@
+# CSS Position:Sticky; with top:0; and bottom:0;
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/elad2412/pen/ExNKLbr](https://codepen.io/elad2412/pen/ExNKLbr).
+
+🤓 Did you know? 
+
+That there is an excellent reason to use CSS Position Sticky with top and bottom combined, if the sticky element is stacked in the middle
diff --git a/css-position-sticky-with-top-0-and-bottom-0/dist/index.html b/css-position-sticky-with-top-0-and-bottom-0/dist/index.html
new file mode 100644
index 0000000..c078b7c
--- /dev/null
+++ b/css-position-sticky-with-top-0-and-bottom-0/dist/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS Position:Sticky; with top:0; and bottom:0;</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input type="checkbox" id="layers"><label for="layers">Show Layers</label>
+<div class="sticky-container case-1">
+  <div class="content">
+    <h2>z-index: 2</h2>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+  <div class="sticky-item">
+    <h2>z-index: 1</h2>
+    <img src="https://i1.wp.com/eladsc.com/wp-content/uploads/2019/11/1_vv_brCwJNVFsBHQEfYC7zQ.png" alt="">
+  </div>
+  <div class="content">
+    <h2>z-index: auto</h2>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+</div>
+
+<div class="sticky-container case-2">
+  <div class="content">
+    <h2>z-index: auto</h2>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+  <div class="sticky-item">
+    <h2>z-index: 2</h2>
+    <img src="https://i1.wp.com/eladsc.com/wp-content/uploads/2019/11/1_vv_brCwJNVFsBHQEfYC7zQ.png" alt="">
+  </div>
+  <div class="content">
+    <h2>z-index: auto</h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+</div>
+
+<div class="sticky-container case-3">
+  <div class="content">
+    <h2>z-index: 2</h2>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+  <div class="sticky-item">
+    <h2>z-index: 1</h2>
+    <img src="https://i1.wp.com/eladsc.com/wp-content/uploads/2019/11/1_vv_brCwJNVFsBHQEfYC7zQ.png" alt="">
+  </div>
+  <div class="content">
+    <h2>z-index: 2</h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+</div>
+
+<div class="sticky-container case-4">
+  <div class="content">
+    <h2>z-index: auto</h2>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+  <div class="sticky-item">
+    <h2>z-index: auto</h2>
+    <img src="https://i1.wp.com/eladsc.com/wp-content/uploads/2019/11/1_vv_brCwJNVFsBHQEfYC7zQ.png" alt="">
+  </div>
+  <div class="content">
+    <h2>z-index: auto</h2>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+</div>
+
+
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/css-position-sticky-with-top-0-and-bottom-0/dist/style.css b/css-position-sticky-with-top-0-and-bottom-0/dist/style.css
new file mode 100644
index 0000000..a4a384c
--- /dev/null
+++ b/css-position-sticky-with-top-0-and-bottom-0/dist/style.css
@@ -0,0 +1,126 @@
+body {
+  display: grid;
+  grid-gap: 30px;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.sticky-container {
+  box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);
+}
+
+.content {
+  position: relative;
+  background-color: #fff;
+  padding: 25px;
+}
+
+.sticky-item {
+  position: sticky;
+  top: 0;
+  bottom: 0;
+  background-color: #fff;
+}
+.sticky-item img {
+  max-width: 100%;
+}
+
+.case-1 .content:first-child {
+  z-index: 2;
+}
+.case-1 .sticky-item {
+  z-index: 1;
+}
+.case-1 .content {
+  background-color: #56bcf9;
+}
+
+.case-2 .sticky-item {
+  z-index: 2;
+}
+.case-2 .content {
+  background-color: #47cf73;
+}
+
+.case-3 .content {
+  z-index: 2;
+  background-color: #b9f;
+}
+.case-3 .sticky-item {
+  z-index: 1;
+}
+
+.case-4 .content {
+  background-color: #ffdd40;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: roboto;
+}
+
+body {
+  margin: 30px;
+}
+
+h2 {
+  position: sticky;
+  top: 0;
+  background-color: inherit;
+  padding: 10px 0 10px 0;
+  font-weight: 400;
+  text-align: center;
+}
+
+p {
+  font-size: 20px;
+  color: #323232;
+  font-weight: 300;
+}
+
+p + p {
+  margin-top: 20px;
+}
+
+p, h2 {
+  margin: 0;
+}
+
+img {
+  display: block;
+}
+
+input {
+  position: fixed;
+  top: 20px;
+  left: 15px;
+  z-index: 11;
+  display: block;
+  padding: 5px;
+  border: solid 1px rgba(136, 136, 136, 0.7);
+  border-radius: 4px;
+  background-color: rgba(255, 221, 64, 0.8);
+  margin-right: 5px;
+}
+
+label {
+  position: fixed;
+  z-index: 10;
+  left: 10px;
+  top: 10px;
+  display: block;
+  padding: 10px;
+  padding-left: 30px;
+  border-radius: 4px;
+  background-color: rgba(255, 221, 64, 0.8);
+}
+
+:checked ~ .sticky-container {
+  position: relative;
+  box-shadow: 0 0 0 2px #000;
+}
+:checked ~ .sticky-container > * {
+  opacity: 0.8;
+}
\ No newline at end of file
diff --git a/css-position-sticky-with-top-0-and-bottom-0/license.txt b/css-position-sticky-with-top-0-and-bottom-0/license.txt
new file mode 100644
index 0000000..d32cfaa
--- /dev/null
+++ b/css-position-sticky-with-top-0-and-bottom-0/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Elad Shechter (https://codepen.io/elad2412/pen/ExNKLbr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-position-sticky-with-top-0-and-bottom-0/src/index.html b/css-position-sticky-with-top-0-and-bottom-0/src/index.html
new file mode 100644
index 0000000..c60b529
--- /dev/null
+++ b/css-position-sticky-with-top-0-and-bottom-0/src/index.html
@@ -0,0 +1,73 @@
+<input type="checkbox" id="layers"><label for="layers">Show Layers</label>
+<div class="sticky-container case-1">
+  <div class="content">
+    <h2>z-index: 2</h2>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+  <div class="sticky-item">
+    <h2>z-index: 1</h2>
+    <img src="https://i1.wp.com/eladsc.com/wp-content/uploads/2019/11/1_vv_brCwJNVFsBHQEfYC7zQ.png" alt="">
+  </div>
+  <div class="content">
+    <h2>z-index: auto</h2>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+</div>
+
+<div class="sticky-container case-2">
+  <div class="content">
+    <h2>z-index: auto</h2>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+  <div class="sticky-item">
+    <h2>z-index: 2</h2>
+    <img src="https://i1.wp.com/eladsc.com/wp-content/uploads/2019/11/1_vv_brCwJNVFsBHQEfYC7zQ.png" alt="">
+  </div>
+  <div class="content">
+    <h2>z-index: auto</h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+</div>
+
+<div class="sticky-container case-3">
+  <div class="content">
+    <h2>z-index: 2</h2>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+  <div class="sticky-item">
+    <h2>z-index: 1</h2>
+    <img src="https://i1.wp.com/eladsc.com/wp-content/uploads/2019/11/1_vv_brCwJNVFsBHQEfYC7zQ.png" alt="">
+  </div>
+  <div class="content">
+    <h2>z-index: 2</h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+</div>
+
+<div class="sticky-container case-4">
+  <div class="content">
+    <h2>z-index: auto</h2>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+  <div class="sticky-item">
+    <h2>z-index: auto</h2>
+    <img src="https://i1.wp.com/eladsc.com/wp-content/uploads/2019/11/1_vv_brCwJNVFsBHQEfYC7zQ.png" alt="">
+  </div>
+  <div class="content">
+    <h2>z-index: auto</h2>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
+  </div>
+</div>
+
+
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
diff --git a/css-position-sticky-with-top-0-and-bottom-0/src/style.scss b/css-position-sticky-with-top-0-and-bottom-0/src/style.scss
new file mode 100644
index 0000000..5fd6f85
--- /dev/null
+++ b/css-position-sticky-with-top-0-and-bottom-0/src/style.scss
@@ -0,0 +1,72 @@
+body{
+  display:grid; 
+  grid-gap:30px;
+  grid-template-columns:repeat(4, 1fr);
+}
+
+.sticky-container{
+      box-shadow:0 1px 1px 0 rgb(66 66 66 / 8%), 
+                 0 1px 3px 1px rgb(66 66 66 / 16%);
+}
+.content{
+  position:relative;
+  background-color:#fff;
+  padding:25px;
+}
+.sticky-item{
+  position:sticky;
+  top:0; 
+  bottom:0; 
+  background-color:#fff;
+  img{max-width:100%;}
+}
+
+.case-1{
+  .content:first-child{z-index:2;}
+  .sticky-item{z-index:1;}
+  .content{background-color:#56bcf9;}
+}
+.case-2{
+  .sticky-item{z-index:2;}
+  .content{background-color:#47cf73;}
+}
+.case-3{
+  .content{
+    z-index:2;
+    background-color:#b9f;
+  }
+  .sticky-item{z-index:1;}
+}
+.case-4{
+  .content{background-color:#ffdd40;}
+}
+
+
+*{box-sizing:border-box;}
+html{font-family:roboto;}
+body{margin:30px;}
+h2{
+  position:sticky; top:0; background-color:inherit;
+  padding:10px 0 10px 0; font-weight:400; text-align:center;
+}
+p{font-size:20px; color:rgb(50 ,50, 50); font-weight:300;}
+p + p{margin-top:20px;}
+p, h2{margin:0;}
+img{display:block;}
+input{
+  position:fixed; top:20px; left:15px; z-index:11;
+  display:block; padding:5px; border:solid 1px rgb(136 136 136 / 0.7); border-radius:4px;
+  background-color:rgb(255 221 64 / 0.8);
+  margin-right:5px;
+}
+label{
+  position:fixed; z-index:10; left:10px; top:10px;
+  display:block; padding:10px; padding-left:30px; border-radius:4px;
+  background-color:rgb(255 221 64 / 0.8);
+}
+
+
+:checked ~.sticky-container{
+  position:relative; box-shadow:0 0 0 2px #000;
+  > *{opacity:0.8;}
+}
\ No newline at end of file
diff --git a/css-preloader/README.markdown b/css-preloader/README.markdown
new file mode 100644
index 0000000..5a7f791
--- /dev/null
+++ b/css-preloader/README.markdown
@@ -0,0 +1,5 @@
+# CSS preloader!
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Maseone/pen/rGapf](https://codepen.io/Maseone/pen/rGapf).
+
+
diff --git a/css-preloader/dist/index.html b/css-preloader/dist/index.html
new file mode 100644
index 0000000..4d0874f
--- /dev/null
+++ b/css-preloader/dist/index.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS preloader!</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<body>
+	<div class="wrapper">
+		<div class="line line1">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line2">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line3">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line4">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line5">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line6">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line7">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line8">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line9">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line10">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line11">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+	</div>
+	<footer>
+		<p style="color: #fff">Inspired by <a href="https://dribbble.com/shots/1763719-DNA-GIF">Handel Eugene <img src="https://d13yacurqjgara.cloudfront.net/assets/dribbble-ball-dnld-5992b20594860fdfef86a503773447ae.png" alt="dribble"></a></p>
+	</footer>
+</body>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/css-preloader/dist/script.js b/css-preloader/dist/script.js
new file mode 100644
index 0000000..bb2612a
--- /dev/null
+++ b/css-preloader/dist/script.js
@@ -0,0 +1,5 @@
+/*Only CSS amazing preloader (fix 27.10.2014)*/
+
+/*Inspired by Handel Eugene --> (dribbble GIF link) */
+
+/*by Troshkin Pavel troshkin.pavel@yandex.ru*/
\ No newline at end of file
diff --git a/css-preloader/dist/style.css b/css-preloader/dist/style.css
new file mode 100644
index 0000000..2711e61
--- /dev/null
+++ b/css-preloader/dist/style.css
@@ -0,0 +1,495 @@
+body{
+			background-color: #1E0731;
+		}
+		footer{
+			position: absolute;
+			margin-top: 300px;
+		}
+		footer a{
+			color: #F5E53A;
+		}
+		footer img{
+			width: 32px;
+			height: 32px;
+			vertical-align: middle;
+		}
+
+		.wrapper{
+			position: absolute;
+			float: left;
+			margin: 140px 100px;
+		}
+
+		.line{
+			position: absolute;
+			top: 0px;
+			width: 2px;
+			height: 8px;
+			background-color: red;
+		}
+
+		.circle{
+			position: absolute;
+			display: block;
+			width: 8px;
+			height: 8px;
+			border-radius: 50%;
+			background-color: blue;
+		}
+		.circle-top{
+			top: 0px;
+			left: -3.5px;
+		}
+		.circle-bottom{
+			bottom: 0px;
+			left: -3.5px;
+		}
+
+		.dot{
+			position: absolute;
+			display: block;
+			width: 4px;
+			height: 4px;
+			border-radius: 50%;
+			left: -1.5px;
+		}
+
+		.line1{
+			margin-left: 0px;
+			background-color: #2410CB;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+		}
+		.line1 > span{
+			background-color: #D4141E;
+		}
+		.line1 > .dotted > .dot{
+			background-color: #D4141E;
+		}
+		.line1 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+		}
+		.line1 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+		}
+		.line1 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+		}
+		.line1 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+		}
+
+		.line2{
+			margin-left: 35px;
+			background-color: #852DF4;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+		}
+		.line2 > span{
+			background-color: #FC7E48;
+		}
+		.line2 > .dotted > .dot{
+			background-color: #FC7E48;
+		}
+		.line2 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+		}
+		.line2 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+		}
+		.line2 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+		}
+		.line2 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+		}
+
+		.line3{
+			margin-left: 70px;
+			background-color: #F42DF1;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+		}
+		.line3 > span{
+			background-color: #EDEB29;
+		}
+		.line3 > .dotted > .dot{
+			background-color: #EDEB29;
+		}
+		.line3 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+		}
+		.line3 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+		}
+		.line3 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+		}
+		.line3 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+		}
+
+		.line4{
+			margin-left: 105px;
+			background-color: #F91396;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+		}
+		.line4 > span{
+			background-color: #ACED29;
+		}
+		.line4 > .dotted > .dot{
+			background-color: #ACED29;
+		}
+		.line4 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+		}
+		.line4 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+		}
+		.line4 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+		}
+		.line4 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+		}
+
+		.line5{
+			margin-left: 140px;
+			background-color: #D4141E;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+		}
+		.line5 > span{
+			background-color: #4EF02B;
+		}
+		.line5 > .dotted > .dot{
+			background-color: #4EF02B;
+		}
+		.line5 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+		}
+		.line5 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+		}
+		.line5 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+		}
+		.line5 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+		}
+
+		.line6{
+			margin-left: 175px;
+			background-color: #FC7E48;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+		}
+		.line6 > span{
+			background-color: #38E790;
+		}
+		.line6 > .dotted > .dot{
+			background-color: #38E790;
+		}
+		.line6 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+		}
+		.line6 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+		}
+		.line6 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+		}
+		.line6 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+		}
+
+		.line7{
+			margin-left: 210px;
+			background-color: #EDEB29;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+		}
+		.line7 > span{
+			background-color: #25EACC;
+		}
+		.line7 > .dotted > .dot{
+			background-color: #25EACC;
+		}
+		.line7 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+		}
+		.line7 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+		}
+		.line7 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+		}
+		.line7 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+		}
+
+		.line8{
+			margin-left: 245px;
+			background-color: #ACED29;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+		}
+		.line8 > span{
+			background-color: #309CDF;
+		}
+		.line8 > .dotted > .dot{
+			background-color: #309CDF;
+		}
+		.line8 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+		}
+		.line8 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+		}
+		.line8 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+		}
+		.line8 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+		}
+
+		.line9{
+			margin-left: 280px;
+			background-color: #4EF02B;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+		}
+		.line9 > span{
+			background-color: #2544E7;
+		}
+		.line9 > .dotted > .dot{
+			background-color: #2544E7;
+		}
+		.line9 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+		}
+		.line9 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+		}
+		.line9 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+		}
+		.line9 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+		}
+
+		.line10{
+			margin-left: 315px;
+			background-color: #38E790;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+		}
+		.line10 > span{
+			background-color: #852DF4;
+		}
+		.line10 > .dotted > .dot{
+			background-color: #852DF4;
+		}
+		.line10 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+		}
+		.line10 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+		}
+		.line10 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+		}
+		.line10 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+		}
+
+		.line11{
+			margin-left: 350px;
+			background-color: #25EACC;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+		}
+		.line11 > span{
+			background-color: #F42DF1;
+		}
+		.line11 > .dotted > .dot{
+			background-color: #F42DF1;
+		}
+		.line11 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+
+		}
+		.line11 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+		}
+		.line11 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+		}
+		.line11 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+		}
+
+		@-webkit-keyframes line{
+			0%{height: 4px; top: 0px; left: 0px; -webkit-transform: rotate(-65deg)}
+			10%{height: 220px; top: -110px; left: 15px;}
+			45%{height: 200px; top: -100px; left: 25px;}
+			70%{height: 8px; top: 0px; left: 25px; -webkit-transform: rotate(0deg);}
+			100%{height: 8px; top: 0px; left: 15px; -webkit-transform: rotate(0deg);}
+		}
+		@-webkit-keyframes dot-top{
+			0%{top: -30px}
+			10%{top: -30px;}
+			45%{top: -25px;}
+			60%{top: 0px;}
+			100%{top: 0px;}
+		}
+		@-webkit-keyframes dot-bottom{
+			0%{bottom: -30px}
+			10%{bottom: -30px;}
+			45%{bottom: -25px;}
+			60%{bottom: 0px;}
+			100%{bottom: 0px;}
+		}
+		@-webkit-keyframes dot-middle-top{
+			0%{}
+			10%{}
+			45%{top: 98px;}
+			70%{top: -50px;}
+			85%{top: 0px;}
+			100%{top: 0px;}
+		}
+		@-webkit-keyframes dot-middle-bottom{
+			0%{}
+			10%{}
+			45%{bottom: 98px;}
+			70%{bottom: -50px;}
+			85%{bottom: 0px;}
+			100%{bottom: 0px;}
+		}
+		
+		@keyframes line{
+			0%{height: 4px; top: 0px; left: 0px; transform: rotate(-65deg)}
+			10%{height: 220px; top: -110px; left: 15px;}
+			45%{height: 200px; top: -100px; left: 25px;}
+			70%{height: 8px; top: 0px; left: 25px; transform: rotate(0deg);}
+			100%{height: 8px; top: 0px; left: 15px; transform: rotate(0deg);}
+		}
+		@keyframes dot-top{
+			0%{top: -30px}
+			10%{top: -30px;}
+			45%{top: -25px;}
+			60%{top: 0px;}
+			100%{top: 0px;}
+		}
+		@keyframes dot-bottom{
+			0%{bottom: -30px}
+			10%{bottom: -30px;}
+			45%{bottom: -25px;}
+			60%{bottom: 0px;}
+			100%{bottom: 0px;}
+		}
+		@keyframes dot-middle-top{
+			0%{}
+			10%{}
+			45%{top: 78px;}
+			70%{top: -50px;}
+			85%{top: 0px;}
+			100%{top: 0px;}
+		}
+		@keyframes dot-middle-bottom{
+			0%{}
+			10%{}
+			45%{bottom: 78px;}
+			70%{bottom: -50px;}
+			85%{bottom: 0px;}
+			100%{bottom: 0px;}
+		}
\ No newline at end of file
diff --git a/css-preloader/license.txt b/css-preloader/license.txt
new file mode 100644
index 0000000..c314c39
--- /dev/null
+++ b/css-preloader/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Paul (https://codepen.io/Maseone/pen/rGapf)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-preloader/src/index.html b/css-preloader/src/index.html
new file mode 100644
index 0000000..1e6596f
--- /dev/null
+++ b/css-preloader/src/index.html
@@ -0,0 +1,117 @@
+<body>
+	<div class="wrapper">
+		<div class="line line1">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line2">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line3">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line4">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line5">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line6">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line7">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line8">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line9">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line10">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+		<div class="line line11">
+			<span class="circle circle-top"></span>
+			<div class="dotted">
+				<span class="dot dot-top"></span>
+				<span class="dot dot-middle-top"></span>
+				<span class="dot dot-middle-bottom"></span>
+				<span class="dot dot-bottom"></span>
+			</div>
+			<span class="circle circle-bottom"></span>
+		</div>
+	</div>
+	<footer>
+		<p style="color: #fff">Inspired by <a href="https://dribbble.com/shots/1763719-DNA-GIF">Handel Eugene <img src="https://d13yacurqjgara.cloudfront.net/assets/dribbble-ball-dnld-5992b20594860fdfef86a503773447ae.png" alt="dribble"></a></p>
+	</footer>
+</body>
\ No newline at end of file
diff --git a/css-preloader/src/script.js b/css-preloader/src/script.js
new file mode 100644
index 0000000..bb2612a
--- /dev/null
+++ b/css-preloader/src/script.js
@@ -0,0 +1,5 @@
+/*Only CSS amazing preloader (fix 27.10.2014)*/
+
+/*Inspired by Handel Eugene --> (dribbble GIF link) */
+
+/*by Troshkin Pavel troshkin.pavel@yandex.ru*/
\ No newline at end of file
diff --git a/css-preloader/src/style.css b/css-preloader/src/style.css
new file mode 100644
index 0000000..fecb35f
--- /dev/null
+++ b/css-preloader/src/style.css
@@ -0,0 +1,495 @@
+		body{
+			background-color: #1E0731;
+		}
+		footer{
+			position: absolute;
+			margin-top: 300px;
+		}
+		footer a{
+			color: #F5E53A;
+		}
+		footer img{
+			width: 32px;
+			height: 32px;
+			vertical-align: middle;
+		}
+
+		.wrapper{
+			position: absolute;
+			float: left;
+			margin: 140px 100px;
+		}
+
+		.line{
+			position: absolute;
+			top: 0px;
+			width: 2px;
+			height: 8px;
+			background-color: red;
+		}
+
+		.circle{
+			position: absolute;
+			display: block;
+			width: 8px;
+			height: 8px;
+			border-radius: 50%;
+			background-color: blue;
+		}
+		.circle-top{
+			top: 0px;
+			left: -3.5px;
+		}
+		.circle-bottom{
+			bottom: 0px;
+			left: -3.5px;
+		}
+
+		.dot{
+			position: absolute;
+			display: block;
+			width: 4px;
+			height: 4px;
+			border-radius: 50%;
+			left: -1.5px;
+		}
+
+		.line1{
+			margin-left: 0px;
+			background-color: #2410CB;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+		}
+		.line1 > span{
+			background-color: #D4141E;
+		}
+		.line1 > .dotted > .dot{
+			background-color: #D4141E;
+		}
+		.line1 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+		}
+		.line1 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+		}
+		.line1 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+		}
+		.line1 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
+		}
+
+		.line2{
+			margin-left: 35px;
+			background-color: #852DF4;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+		}
+		.line2 > span{
+			background-color: #FC7E48;
+		}
+		.line2 > .dotted > .dot{
+			background-color: #FC7E48;
+		}
+		.line2 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+		}
+		.line2 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+		}
+		.line2 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+		}
+		.line2 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
+		}
+
+		.line3{
+			margin-left: 70px;
+			background-color: #F42DF1;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+		}
+		.line3 > span{
+			background-color: #EDEB29;
+		}
+		.line3 > .dotted > .dot{
+			background-color: #EDEB29;
+		}
+		.line3 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+		}
+		.line3 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+		}
+		.line3 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+		}
+		.line3 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
+		}
+
+		.line4{
+			margin-left: 105px;
+			background-color: #F91396;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+		}
+		.line4 > span{
+			background-color: #ACED29;
+		}
+		.line4 > .dotted > .dot{
+			background-color: #ACED29;
+		}
+		.line4 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+		}
+		.line4 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+		}
+		.line4 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+		}
+		.line4 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
+		}
+
+		.line5{
+			margin-left: 140px;
+			background-color: #D4141E;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+		}
+		.line5 > span{
+			background-color: #4EF02B;
+		}
+		.line5 > .dotted > .dot{
+			background-color: #4EF02B;
+		}
+		.line5 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+		}
+		.line5 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+		}
+		.line5 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+		}
+		.line5 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
+		}
+
+		.line6{
+			margin-left: 175px;
+			background-color: #FC7E48;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+		}
+		.line6 > span{
+			background-color: #38E790;
+		}
+		.line6 > .dotted > .dot{
+			background-color: #38E790;
+		}
+		.line6 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+		}
+		.line6 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+		}
+		.line6 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+		}
+		.line6 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
+		}
+
+		.line7{
+			margin-left: 210px;
+			background-color: #EDEB29;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+		}
+		.line7 > span{
+			background-color: #25EACC;
+		}
+		.line7 > .dotted > .dot{
+			background-color: #25EACC;
+		}
+		.line7 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+		}
+		.line7 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+		}
+		.line7 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+		}
+		.line7 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
+		}
+
+		.line8{
+			margin-left: 245px;
+			background-color: #ACED29;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+		}
+		.line8 > span{
+			background-color: #309CDF;
+		}
+		.line8 > .dotted > .dot{
+			background-color: #309CDF;
+		}
+		.line8 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+		}
+		.line8 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+		}
+		.line8 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+		}
+		.line8 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
+		}
+
+		.line9{
+			margin-left: 280px;
+			background-color: #4EF02B;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+		}
+		.line9 > span{
+			background-color: #2544E7;
+		}
+		.line9 > .dotted > .dot{
+			background-color: #2544E7;
+		}
+		.line9 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+		}
+		.line9 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+		}
+		.line9 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+		}
+		.line9 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
+		}
+
+		.line10{
+			margin-left: 315px;
+			background-color: #38E790;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+		}
+		.line10 > span{
+			background-color: #852DF4;
+		}
+		.line10 > .dotted > .dot{
+			background-color: #852DF4;
+		}
+		.line10 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+		}
+		.line10 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+		}
+		.line10 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+		}
+		.line10 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
+		}
+
+		.line11{
+			margin-left: 350px;
+			background-color: #25EACC;
+			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+		}
+		.line11 > span{
+			background-color: #F42DF1;
+		}
+		.line11 > .dotted > .dot{
+			background-color: #F42DF1;
+		}
+		.line11 > .dotted > .dot-top{
+			top: 0px;
+			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+
+		}
+		.line11 > .dotted > .dot-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+		}
+		.line11 > .dotted > .dot-middle-top{
+			top: 0px;
+			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+		}
+		.line11 > .dotted > .dot-middle-bottom{
+			bottom: 0px;
+			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
+		}
+
+		@-webkit-keyframes line{
+			0%{height: 4px; top: 0px; left: 0px; -webkit-transform: rotate(-65deg)}
+			10%{height: 220px; top: -110px; left: 15px;}
+			45%{height: 200px; top: -100px; left: 25px;}
+			70%{height: 8px; top: 0px; left: 25px; -webkit-transform: rotate(0deg);}
+			100%{height: 8px; top: 0px; left: 15px; -webkit-transform: rotate(0deg);}
+		}
+		@-webkit-keyframes dot-top{
+			0%{top: -30px}
+			10%{top: -30px;}
+			45%{top: -25px;}
+			60%{top: 0px;}
+			100%{top: 0px;}
+		}
+		@-webkit-keyframes dot-bottom{
+			0%{bottom: -30px}
+			10%{bottom: -30px;}
+			45%{bottom: -25px;}
+			60%{bottom: 0px;}
+			100%{bottom: 0px;}
+		}
+		@-webkit-keyframes dot-middle-top{
+			0%{}
+			10%{}
+			45%{top: 98px;}
+			70%{top: -50px;}
+			85%{top: 0px;}
+			100%{top: 0px;}
+		}
+		@-webkit-keyframes dot-middle-bottom{
+			0%{}
+			10%{}
+			45%{bottom: 98px;}
+			70%{bottom: -50px;}
+			85%{bottom: 0px;}
+			100%{bottom: 0px;}
+		}
+		
+		@keyframes line{
+			0%{height: 4px; top: 0px; left: 0px; transform: rotate(-65deg)}
+			10%{height: 220px; top: -110px; left: 15px;}
+			45%{height: 200px; top: -100px; left: 25px;}
+			70%{height: 8px; top: 0px; left: 25px; transform: rotate(0deg);}
+			100%{height: 8px; top: 0px; left: 15px; transform: rotate(0deg);}
+		}
+		@keyframes dot-top{
+			0%{top: -30px}
+			10%{top: -30px;}
+			45%{top: -25px;}
+			60%{top: 0px;}
+			100%{top: 0px;}
+		}
+		@keyframes dot-bottom{
+			0%{bottom: -30px}
+			10%{bottom: -30px;}
+			45%{bottom: -25px;}
+			60%{bottom: 0px;}
+			100%{bottom: 0px;}
+		}
+		@keyframes dot-middle-top{
+			0%{}
+			10%{}
+			45%{top: 78px;}
+			70%{top: -50px;}
+			85%{top: 0px;}
+			100%{top: 0px;}
+		}
+		@keyframes dot-middle-bottom{
+			0%{}
+			10%{}
+			45%{bottom: 78px;}
+			70%{bottom: -50px;}
+			85%{bottom: 0px;}
+			100%{bottom: 0px;}
+		}
\ No newline at end of file
diff --git a/css-sceneindustrialization-and-climate-change/README.markdown b/css-sceneindustrialization-and-climate-change/README.markdown
new file mode 100644
index 0000000..b6211d2
--- /dev/null
+++ b/css-sceneindustrialization-and-climate-change/README.markdown
@@ -0,0 +1,13 @@
+# CSS Scene - Industrialization and Climate Change
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shadow-scientist/pen/PoGvrQv](https://codepen.io/shadow-scientist/pen/PoGvrQv).
+
+With the increasing amount of CO2 in the atmosphere, every year we experience record-breaking disasters. It's no surprise situation will become worse every time. If it continues like this, the world will become inappropriate for living. We have to reduce the usage of CO2 for growth and industrialization as much as possible to control climate change.
+
+It won't happen overnight, nor the next day, but we all can make a difference if we want to 💯
+
+This design is a CSS-JS recreation of [Kurzgesagt youtube videos](https://www.youtube.com/c/inanutshell/) (these two segments [8:04](https://youtu.be/wbR-5mHI6bo?t=483), [0:55](https://youtu.be/ipVxxxqwBQw?t=55)). Thank you so much for the inspiration. I enjoyed this project a lot 😊
+
+First I created the smoke with CSS, but it won't work as intended. So I wrote a little JavaScript for the simulation. The animation is resource-intensive for continuous reflow and repaint, it will be paused through the `window.blur` event if it's running in the background.
+
+This project was created for the CodePen challenge held in January 2021. It took me a while to make it responsive (kinda 😅)
diff --git a/css-sceneindustrialization-and-climate-change/dist/index.html b/css-sceneindustrialization-and-climate-change/dist/index.html
new file mode 100644
index 0000000..7f69662
--- /dev/null
+++ b/css-sceneindustrialization-and-climate-change/dist/index.html
@@ -0,0 +1,377 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS Scene - Industrialization and Climate Change</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main>
+<div class="split split-1 industrialization">
+
+	<div class="A">
+		<div class="bgmask a0"></div>
+		<div class="bgmask a1"></div>
+	</div>
+
+	<div class="Clouds">
+		<div class="cloud type-1"></div>
+		<div class="cloud type-1"></div>
+		<div class="cloud type-1"></div>
+		<div class="cloud type-2"></div>
+		<div class="cloud type-2"></div>
+	</div>
+
+	<div class="B">
+		<div class="bgmask xb1"></div>
+		<div class="bgmask b2"></div>
+		<div class="bgmask b3"></div>
+		<div class="bgmask b4"></div>
+		<div class="bgmask b5"></div>
+		<div class="bgmask b6"></div>
+
+		<div class="smoke-2 smoke-2-pre"></div>
+		<div class="smoke-1 smoke-1-pre"></div>
+		<div class="smoke-2 smoke-2-rest"></div>
+		<div class="smoke-1 smoke-1-rest"></div>
+
+		<div class="stove-1">
+			<div class="side-2">
+				<div class="ss-1"></div>
+				<div class="ss-2"></div>
+			</div>
+			<div class="side-1"></div>
+			<div class="head"></div>
+		</div>
+
+		<div class="stove-1 stove-clone">
+			<div class="side-2">
+				<div class="ss-1"></div>
+				<div class="ss-2"></div>
+			</div>
+			<div class="side-1"></div>
+			<div class="head"></div>
+		</div>
+		
+		<div class="thing-1">
+			<div class="x1"></div>
+			<div class="x2"></div>
+			<div class="x3"></div>
+			<div class="x4"></div>
+			<div class="x5"></div>
+
+			<div class="x8"></div>
+			<div class="x7"></div>
+			<div class="x6"></div>
+
+			<div class="clone-1">
+				<div class="x8"></div>
+				<div class="x7"></div>
+				<div class="x6"></div>
+			</div>
+
+			<div class="x9"></div>
+			<div class="x10"></div>
+		</div>
+
+		<div class="green"></div>
+
+		<div class="shadows">
+			<div class="s1"></div>
+			<div class="s2"></div>
+		</div>	
+
+		<div class="tower-1">
+			<div class="x1"></div>
+			<div class="cap"></div>
+			<div class="x2"></div>
+		</div>
+
+		<div class="tower-1 clone">
+			<div class="x1"></div>
+			<div class="cap"></div>
+			<div class="x2"></div>
+		</div>
+
+		<div class="nuclear-energy-processor">
+			<div class="top-shield"></div>
+			<div class="top-shield clone-layer"></div>
+			<div class="nphook">
+				<div class="np2"></div>
+				<div class="np1"></div>
+			</div>
+			<div class="wiring"></div>
+		</div>
+
+		<div class="energy-processing-unit">
+			<div class="edge"></div>
+			<div class="clamp"></div>
+		</div>
+
+		<div class="a9"></div>
+		<div class="a7"></div>
+		<div class="a6"></div>
+		<div class="a8"></div>
+		<div class="a5"></div>
+		<div class="a4"></div>
+	</div>
+
+	<div class="B1">
+		<div class="wire"></div>
+		<div class="wire clone-1"></div>
+		<div class="wire clone-2"></div>
+		<div class="wire clone-3"></div>
+	</div>
+
+	<div class="E">
+		<div class="tank">
+			<div class="top-outline"></div>
+			<div class="disc"></div>
+			<div class="cap"></div>
+			<div class="hook"></div>
+		</div>
+	</div>
+
+	<div class="C">
+		<div class="power-post clone-2">
+			<div class="x1"></div>
+			<div class="x2"></div>
+			<div class="x3"></div>
+		</div>
+
+		<div class="power-post clone-1">
+			<div class="x1"></div>
+			<div class="x2"></div>
+			<div class="x3"></div>
+		</div>
+
+		<div class="power-post">
+			<div class="x1"></div>
+			<div class="x2"></div>
+			<div class="x3"></div>
+		</div>
+
+		<div class="power-post clone-3">
+			<div class="x1"></div>
+			<div class="x2"></div>
+			<div class="x3"></div>
+		</div>
+	</div>
+
+	<div class="D">
+		<div class="wire"></div>
+		<div class="wire clone-1"></div>
+		<div class="wire clone-2"></div>
+		<div class="wire clone-3"></div>
+	</div>
+
+	<div class="F">
+		<div class="tank tank-clone">
+			<div class="top-outline"></div>
+			<div class="disc"></div>
+			<div class="cap"></div>
+			<div class="hook"></div>
+		</div>
+	</div>
+
+	<div class="G"></div>
+</div>
+<div class="split split-2 climate-change">
+
+	<div class="cclouds">
+		<div class="cloud-1"></div>
+		<div class="cloud-2"></div>
+	</div>
+
+	<div class="mountain">
+		<div class="ice">
+			<div class="clip-2"></div>
+			<div class="clip-4"></div>
+			<div class="clip-3"></div>
+			<div class="clip-1"></div>
+		</div>
+		<div class="grading">
+			<div class="grader g1"></div>
+			<div class="grader g2"></div>
+			<div class="grader g3"></div>
+			<div class="grader g4"></div>
+			<div class="grader g5"></div>
+			<div class="grader g6"></div>
+			<div class="grader g7"></div>
+			<div class="grader g8"></div>
+			<div class="grader g9"></div>
+			<div class="grader g10"></div>
+		</div>
+	</div>
+
+	<div class="hills">
+		<div class="hill-2"></div>
+		<div class="hill-7"></div>
+		<div class="hill-4"></div>
+		<div class="hill-3"></div>
+		<div class="hill-5"></div>
+		<div class="hill-6"></div>
+		<div class="hill-1">
+			<div class="hill-taken"></div>
+			<div class="hill-taken-2"></div>
+		</div>
+
+		<div class="hill-12"></div>
+		<div class="hill-11"></div>
+		<div class="hill-10"></div>
+		<div class="hill-9"></div>
+		<div class="hill-8"></div>
+	</div>
+
+	<div class="trees">
+		<div class="tree tree-4">
+			<div class="branch"></div>
+		</div>
+
+		<div class="tree tree-5">
+			<div class="branch"></div>
+		</div>
+
+		<div class="tree tree-6">
+			<div class="branch"></div>
+		</div>
+
+		<div class="tree tree-7">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+			<div class="lines t-l-1"></div>
+			<div class="lines t-l-2"></div>
+		</div>
+
+		<div class="tree tree-10">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-12">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-13">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-11">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-9">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+			<div class="lines t-l-1"></div>
+			<div class="lines t-l-2"></div>
+		</div>
+
+		<div class="tree tree-8">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+			<div class="lines t-l-1"></div>
+			<div class="lines t-l-2"></div>
+			<div class="lines t-l-3"></div>
+			<div class="lines t-l-4"></div>
+			<div class="lines t-l-5"></div>
+		</div>
+
+		<div class="tree tree-2">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+			<div class="lines t-l-1"></div>
+			<div class="lines t-l-2"></div>
+		</div>
+
+		<div class="tree tree-3">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+			<div class="lines t-l-1"></div>
+			<div class="lines t-l-2"></div>
+		</div>
+
+		<div class="tree tree-17">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-19">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-18">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-14">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-15">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-16">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+			<div class="lines t-l-1"></div>
+			<div class="lines t-l-2"></div>
+			<div class="lines t-l-3"></div>
+			<div class="lines t-l-4"></div>
+			<div class="lines t-l-5"></div>
+		</div>
+	</div>	
+
+	<div class="home home-2">
+		<div class="sides"></div>
+		<div class="front"></div>
+		<div class="shader"></div>
+		<div class="h-edge"></div>
+	</div>
+
+	<div class="home">
+		<div class="sides"></div>
+		<div class="front"></div>
+		<div class="shader"></div>
+		<div class="h-edge"></div>
+	</div>
+
+	<div class="ground"></div>
+</div>
+</main>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/css-sceneindustrialization-and-climate-change/dist/script.js b/css-sceneindustrialization-and-climate-change/dist/script.js
new file mode 100644
index 0000000..509ab22
--- /dev/null
+++ b/css-sceneindustrialization-and-climate-change/dist/script.js
@@ -0,0 +1,97 @@
+var container1, container2, timeout, docelem;
+
+function addSmoke(){
+	if(docelem.style.getPropertyValue("--playing") == "running"){
+		spreadSmoke();
+	}
+	else{
+		console.log("paused");
+	}
+	timeout = setTimeout(addSmoke, random(180, 200));
+}
+
+function spreadSmoke(){
+		var p = new Point(
+			random(10, 130), 
+			random(-110, -10), 
+			random(20, 130), 
+			random(1, 100), 
+			random(-60, 70), "smoke-pre");
+
+		var q = new Point(
+			random(10, 130), 
+			random(-110, -10), 
+			random(40, 80), 
+			random(1, 100), 
+			random(-60, 70), "smoke-pre");
+
+		var r = new Point(
+			random(30, 90), 
+			random(-110, -10), 
+			random(40, 60), 
+			random(1, 90), 
+			random(-50, 50), "smoke-rest");
+	
+		var s = new Point(
+			random(30, 90), 
+			random(-110, -10), 
+			random(20, 40), 
+			random(1, 90), 
+			random(-55, 55), "smoke-rest");
+
+		container1.appendChild(p.create());
+		container2.appendChild(q.create());
+		container3.appendChild(r.create());
+		container4.appendChild(s.create());
+}
+
+function random(min, max){
+	return int = min + Math.random() * (max - min), Math.round(int);
+}
+
+class Point{
+	constructor(cx, cy, sizemax, delay, shift, cls){
+		this.x = cx;
+		this.y = cy;
+		this.sizeMax = sizemax;
+		this.class = cls;
+		this.delay = delay;
+		this.shift = shift;
+		this.element;
+	}
+
+	create(){
+		var elem = document.createElement("div");
+		elem.className = this.class;
+		elem.style.setProperty("--x", this.x);
+		elem.style.setProperty("--y", this.y);
+		elem.style.setProperty("--d", this.delay);
+		elem.style.setProperty("--size", this.sizeMax);
+		elem.style.setProperty("--shift", this.shift);
+		elem.addEventListener("animationend", function(){
+			this.parentElement.removeChild(this);
+		});
+		this.element = elem;
+		return elem;
+	}
+}
+
+window.addEventListener("load", () => {
+	container1 = document.querySelector(".smoke-1-pre"),
+	container2 = document.querySelector(".smoke-2-pre"),
+	container3 = document.querySelector(".smoke-1-rest"),
+	container4 = document.querySelector(".smoke-2-rest"),
+	docelem = document.documentElement;
+
+	if(timeout) clearTimeout(timeout);
+	docelem.style.setProperty("--playing", "running");
+	addSmoke();
+});
+
+window.addEventListener("focus", () => {
+	if(docelem) docelem.style.setProperty("--playing", "running");
+});
+
+window.addEventListener("blur", () => {
+	if(docelem) docelem.style.setProperty("--playing", "paused");
+});
\ No newline at end of file
diff --git a/css-sceneindustrialization-and-climate-change/dist/style.css b/css-sceneindustrialization-and-climate-change/dist/style.css
new file mode 100644
index 0000000..93df00f
--- /dev/null
+++ b/css-sceneindustrialization-and-climate-change/dist/style.css
@@ -0,0 +1,2824 @@
+/*
+	CSS Scene - Industrialization and Climate Change
+	Best viewed in Full mode.
+
+	Tested on the latest versions of Firefox, Chrome, and Edge,
+	Best performance on Chrome.
+*/
+
+/*
+div{
+	box-shadow:0 0 0 1px red;
+}
+*/
+
+:root{
+	--playing:running;
+	--split-expansion:54%; /* 56.5, 60% */
+	--split-tilt:12%; /* 17, 28% */
+
+	/* responsiveness */
+	--size: 15;
+	--upp: 1vmin;
+	--unit: calc((var(--size) / 100) * var(--upp));
+
+	--box-zoom:7.8; /* 7.5? */
+	--box-width:calc(24 * var(--box-zoom) * var(--upp));
+	--box-height:calc(12 * var(--box-zoom) * var(--upp));
+}
+
+/* reset */
+*, *::before, *::after{
+	box-sizing: border-box;
+}
+
+*::before, *::after{
+	content:"";
+	position:absolute;
+	background-repeat: no-repeat;
+	display: block;
+}
+
+.isolate{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.split > div > div{
+	position: absolute;
+	display: block;
+	background-repeat: no-repeat;
+}
+
+.split > div > div > div,
+.split > div > div > div > div{
+	position: absolute;
+	display: block;
+	background-repeat: no-repeat;
+}
+
+html, body{
+	position:relative;
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+	padding:0;
+	margin:0;
+	overflow:hidden;
+}
+
+body::before{
+	content:"";
+	position:fixed;
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+	background-image:linear-gradient(55deg, #03080D 40%, #010407);
+	background-size: 100% 100%;
+	display: block;
+}
+
+main{
+	position:absolute;
+	left:50%;
+	top:50%;
+	width:var(--box-width);
+	height:var(--box-height);
+	transform:translate(-50%, -50%);
+	border-radius:calc(7 * var(--unit));
+	overflow: hidden;
+	display: block;
+	box-shadow:0 0 0 2px rgba(0,0,0,0);
+	opacity:0;
+	animation:show ease 0.4s 0.5s forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes show{
+	to{
+		opacity:1;
+	}
+}
+
+.split{
+	position: absolute;
+	top:0;
+	width:var(--split-expansion);
+	height:100%;
+	display:block;
+	overflow:hidden;
+}
+
+.split > div{
+	position:absolute;
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+	display: block;
+	background-repeat: no-repeat;
+}
+
+.split-1{
+	left:0;
+	clip-path: polygon(0 0, 99% 0, calc(99% - var(--split-tilt)) 100%, 0 100%);
+}
+
+.split-1::before{
+	content:"";
+	position:absolute;
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+
+	background-image:linear-gradient(#FDD6BE 0%, #ef9af1 50%, #A75BBC 67%);
+	background-position:0 0;
+	background-size:100% 100%;
+	background-repeat: no-repeat;
+	display:block;
+}
+
+.split-2{
+	right:0;
+	clip-path: polygon(calc(var(--split-tilt) + 0.4%) 0, 100% 0, 100% 100%, 0 100%);
+	width:52%;
+}
+
+/* Industrialization */
+
+.industrialization .bgmask{
+	left:0;
+	top:0;
+	width:100%
+}
+
+.industrialization .A > .a0::before{
+	left:calc(4 * var(--unit));
+	top:calc(266 * var(--unit));
+	width:calc(42 * var(--unit));
+	height:calc(123 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(4 * var(--unit));
+}
+
+.industrialization .A > .a0::after{
+	left:calc(8 * var(--unit));
+	top:calc(369 * var(--unit));
+	width:calc(34 * var(--unit));
+	height:calc(14 * var(--unit));
+	background-color:#7A7BFE;
+	border-radius:calc(6 * var(--unit));
+}
+
+.industrialization .A > .a1::before{
+	left:calc(22 * var(--unit));
+	top:calc(369 * var(--unit));
+	width:calc(34 * var(--unit));
+	height:calc(14 * var(--unit));
+	background-color:#4D51FB;
+	border-radius:calc(6 * var(--unit));
+}
+
+.industrialization .A > .a1::after{
+	left:calc(50 * var(--unit));
+	top:calc(369 * var(--unit));
+	width:calc(56 * var(--unit));
+	height:calc(14 * var(--unit));
+	background-color:#7A7BFF;
+	border-radius:0 calc(6 * var(--unit)) 0 0;
+}
+
+.industrialization .B > .xb1::before{
+	left:calc(66 * var(--unit));
+	top:calc(378 * var(--unit));
+	width:calc(13 * var(--unit));
+	height:calc(62 * var(--unit));
+	background-color:#D2CAFE;
+	border-radius:0 calc(6 * var(--unit)) 0 0;
+}
+
+.industrialization .B > .xb1::after{
+	left:calc(77 * var(--unit));
+	top:calc(239 * var(--unit));
+	width:calc(28 * var(--unit));
+	height:calc(44 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(5 * var(--unit));
+}
+
+.industrialization .B > .b2::before{
+	left:calc(65 * var(--unit));
+	top:calc(276 * var(--unit));
+	width:calc(55 * var(--unit));
+	height:calc(67 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(5 * var(--unit));
+}
+
+.industrialization .B > .b2::after{
+	left:calc(301 * var(--unit));
+	top:calc(276 * var(--unit));
+	width:calc(33 * var(--unit));
+	height:calc(37 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(5 * var(--unit));
+}
+
+.industrialization .B > .b3::before{
+	left:calc(467 * var(--unit));
+	top:calc(326 * var(--unit));
+	width:calc(33 * var(--unit));
+	height:calc(36 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(5 * var(--unit));
+}
+
+.industrialization .B > .b3::after{
+	left:calc(482 * var(--unit));
+	top:calc(309 * var(--unit));
+	width:calc(10 * var(--unit));
+	height:calc(24 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(5 * var(--unit));
+}
+
+.industrialization .B > .b4::before{
+	left:calc(511 * var(--unit));
+	top:calc(335 * var(--unit));
+	width:calc(15 * var(--unit));
+	height:calc(32 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(7 * var(--unit));
+}
+
+.industrialization .B > .b4::after{
+	left:calc(523 * var(--unit));
+	top:calc(273 * var(--unit));
+	width:calc(38 * var(--unit));
+	height:calc(81 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(5 * var(--unit));
+}
+
+.industrialization .B > .b5::before{
+	left:calc(466 * var(--unit));
+	top:calc(365 * var(--unit));
+	width:calc(79 * var(--unit));
+	height:calc(44 * var(--unit));
+	background-color:#9D9CFC;
+}
+
+.industrialization .B > .b5::after{
+	left:calc(518 * var(--unit));
+	top:calc(364 * var(--unit));
+	width:calc(48 * var(--unit));
+	height:calc(45 * var(--unit));
+	background-color:#EAE5FC;
+	border-radius:calc(6 * var(--unit)) calc(6 * var(--unit)) 0 0;
+}
+
+.industrialization .B > .b6::before{
+	left:calc(518 * var(--unit));
+	top:calc(364 * var(--unit));
+	width:calc(11 * var(--unit));
+	height:calc(45 * var(--unit));
+	background-color:#D1CCFB;
+	border-radius:calc(6 * var(--unit)) calc(6 * var(--unit)) 0 0;
+}
+
+.industrialization .B > .b6::after{
+	left:calc(466 * var(--unit));
+	top:calc(355 * var(--unit));
+	width:calc(51 * var(--unit));
+	height:calc(10 * var(--unit));
+	background-color:#4D52FD;
+	border-radius:0 calc(6 * var(--unit)) 0 0;
+	box-shadow:calc(36 * var(--unit)) 0 0 0 #787CFD;
+}
+
+.industrialization .B > .thing-1{
+	left:calc(262 * var(--unit));
+	top:calc(335 * var(--unit));
+	width:calc(212 * var(--unit));
+	height:calc(123 * var(--unit));
+	background-image:linear-gradient(#FA379E,#FA379E);
+	background-position:calc(29 * var(--unit)) calc(52 * var(--unit));
+	background-size:calc(178 * var(--unit)) calc(70 * var(--unit));
+	overflow:hidden;
+}
+
+.thing-1 .x1{
+	left:0;
+	top:0;
+	width:calc(195 * var(--unit));
+	height:calc(7 * var(--unit));
+	background-color:#340994;
+	border-radius:0 calc(4 * var(--unit)) 0 0;
+}
+
+.thing-1 .x2{
+	left:0;
+	top:calc(7 * var(--unit));
+	width:calc(200 * var(--unit));
+	height:calc(46 * var(--unit));
+	background-color:#4082FD;
+	border-radius:0 calc(5 * var(--unit)) 0 0;
+}
+
+.thing-1 .x3{
+	left:calc(191 * var(--unit));
+	top:calc(7 * var(--unit));
+	width:calc(10 * var(--unit));
+	height:calc(46 * var(--unit));
+	background-color:#6C9FFF;
+	border-radius:calc(4 * var(--unit)) calc(6 * var(--unit)) 0 0;
+}
+
+.thing-1 .x4{
+	left:calc(202 * var(--unit));
+	top:calc(47 * var(--unit));
+	width:calc(9 * var(--unit));
+	height:calc(46 * var(--unit));
+	background-color:#FF6CA6;
+	border-radius:calc(4 * var(--unit));
+}
+
+.thing-1 .x5{
+	left:0;
+	top:calc(47 * var(--unit));
+	width:calc(211 * var(--unit));
+	height:calc(9 * var(--unit));
+	background-color:#FEAAD3;
+	border-radius:calc(4 * var(--unit));
+}
+
+.thing-1 .x6{
+	left:calc(75 * var(--unit));
+	top:calc(14 * var(--unit));
+	width:calc(90 * var(--unit));
+	height:calc(14 * var(--unit));
+	background-color:#42ACFF;
+	border-radius:calc(8 * var(--unit)) calc(2 * var(--unit)) calc(8 * var(--unit)) calc(2 * var(--unit));
+	transform:skewX(40deg);
+}
+
+.thing-1 .x7{
+	left:calc(76 * var(--unit));
+	top:calc(17 * var(--unit));
+	width:calc(84 * var(--unit));
+	height:calc(18 * var(--unit));
+	background-color:rgba(0,0,0,0.23);
+	border-radius:calc(4 * var(--unit));
+}
+
+.thing-1 .x8{
+	left:calc(76 * var(--unit));
+	top:calc(20 * var(--unit));
+	width:calc(7.6 * var(--unit));
+	height:calc(19 * var(--unit));
+	color:#1B56CA;
+	background-color:currentColor;
+	border-radius:calc(4 * var(--unit));
+	box-shadow:
+		calc(75 * var(--unit)) 0 0 0 currentColor,
+		calc(60 * var(--unit)) 0 0 0 currentColor,
+		calc(45 * var(--unit)) 0 0 0 currentColor,
+		calc(30 * var(--unit)) 0 0 0 currentColor,
+		calc(15 * var(--unit)) 0 0 0 currentColor;
+}
+
+.thing-1 .clone-1{
+	left:calc(-114 * var(--unit));
+	top:0;
+}
+
+.thing-1 .x9{
+	left:calc(56 * var(--unit));
+	top:calc(70 * var(--unit));
+	width:calc(135 * var(--unit));
+	height:calc(9 * var(--unit));
+	background-color:#E5207D;
+	border-radius:calc(5 * var(--unit));
+	box-shadow:0 calc(17 * var(--unit)) 0 0 #E5207D;
+}
+
+.thing-1 .x10{
+	left:calc(61 * var(--unit));
+	top:calc(70 * var(--unit));
+	width:calc(13 * var(--unit));
+	height:calc(9 * var(--unit));
+	color:rgba(0,0,0,0.23); 
+	background-color:currentColor;
+	border-radius:calc(5 * var(--unit));
+	box-shadow:
+		calc(112 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(96 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(80 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(64 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(48 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(32 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(16 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(0 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+
+		calc(112 * var(--unit)) 0 0 0 currentColor,
+		calc(96 * var(--unit)) 0 0 0 currentColor,
+		calc(80 * var(--unit)) 0 0 0 currentColor,
+		calc(64 * var(--unit)) 0 0 0 currentColor,
+		calc(48 * var(--unit)) 0 0 0 currentColor,
+		calc(32 * var(--unit)) 0 0 0 currentColor,
+		calc(16 * var(--unit)) 0 0 0 currentColor;
+}
+
+.tower-1{
+	left:calc(39 * var(--unit));
+	top:calc(98 * var(--unit));
+	width:calc(32 * var(--unit));
+	height:calc(391 * var(--unit));
+	background-image:
+		linear-gradient(#A9BCFD, #A9BCFD),
+		linear-gradient(#C6DDFB, #C6DDFB),
+		linear-gradient(#E5ECF8, #E5ECF8);
+	background-size: 
+		calc(14 * var(--unit)) 100%,
+		calc(22 * var(--unit)) 100%,
+		calc(32 * var(--unit)) 100%;
+	background-position: 0 calc(5 * var(--unit));
+	overflow: visible;
+}
+
+.tower-1::before{
+	left:0;
+	top:10%;
+	width:100%;
+	height:90%;
+	background-image: 
+		linear-gradient(#D83470, #D83470),
+		linear-gradient(#FB6D69, #FB6D69),
+		linear-gradient(#FBB6B0, #FBB6B0),
+
+		linear-gradient(#D83470, #D83470),
+		linear-gradient(#FB6D69, #FB6D69),
+		linear-gradient(#FBB6B0, #FBB6B0),
+
+		linear-gradient(#A9BCFD, #A9BCFD),
+		linear-gradient(#C6DDFB, #C6DDFB),
+		linear-gradient(#E5ECF8, #E5ECF8);
+	
+	background-size:
+		calc(14 * var(--unit)) calc(80 * var(--unit)),
+		calc(22 * var(--unit)) calc(80 * var(--unit)),
+		calc(32 * var(--unit)) calc(80 * var(--unit)),
+
+		calc(14 * var(--unit)) calc(80 * var(--unit)),
+		calc(22 * var(--unit)) calc(80 * var(--unit)),
+		calc(32 * var(--unit)) calc(80 * var(--unit)),
+
+		calc(14 * var(--unit)) 100%,
+		calc(22 * var(--unit)) 100%,
+		calc(32 * var(--unit)) 100%;
+
+	background-position:
+		0 calc(25 * var(--unit)),
+		0 calc(25 * var(--unit)),
+		0 calc(25 * var(--unit)),
+		
+		0 calc(185 * var(--unit)),
+		0 calc(185 * var(--unit)),
+		0 calc(185 * var(--unit)),
+
+		0 0,
+		0 0,
+		0 0;
+}
+
+.tower-1::after{
+	left:calc(-4 * var(--unit));
+	top:calc(143 * var(--unit));
+	width:calc(28 * var(--unit));
+	height:calc(9 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	color:#350995;
+	--shadow:#2361C9;
+	background-color:currentColor;
+	box-shadow:
+	0 calc(-80 * var(--unit)) 0 0 currentColor,
+	calc(12 * var(--unit)) calc(-80 * var(--unit)) 0 0 var(--shadow),
+
+	0 calc(160 * var(--unit)) 0 0 currentColor,
+	calc(12 * var(--unit)) calc(160 * var(--unit)) 0 0 var(--shadow),
+
+	0 calc(80 * var(--unit)) 0 0 currentColor,
+	calc(12 * var(--unit)) calc(80 * var(--unit)) 0 0 var(--shadow),
+
+	0 0 0 0 currentColor,
+	calc(12 * var(--unit)) 0 0 0 var(--shadow);
+}
+
+.tower-1 .cap{
+	position:absolute;
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+	overflow: hidden;
+}
+
+.tower-1 .cap::before{
+	left:50%;
+	bottom:0;
+	width:calc(50 * var(--unit));
+	height:calc(35 * var(--unit));
+	transform: translateX(-50%);
+	background-color:#CBDBF8;
+	border-radius:50%;
+}
+
+.tower-1 .cap::after{
+	left:0;
+	top:0;
+	width:calc(32 * var(--unit));
+	height:calc(13 * var(--unit));
+	background-color:#A6BDFC;
+	border-radius:50%;
+}
+
+.tower-1 .x1{
+	left:50%;
+	top:calc(379 * var(--unit));
+	width:calc(50 * var(--unit));
+	height:calc(16 * var(--unit));
+	background-color: #2361C9;
+	border-radius:50%;
+	transform: translateX(-50%);
+	box-shadow:0 calc(5 * var(--unit)) 0 0 #083397;
+}
+
+.tower-1.clone{
+	left:calc(259 * var(--unit));
+	top:calc(169 * var(--unit));
+	transform: scale(0.74);
+	transform-origin: left top;
+}
+
+.tower-1 .x2{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+	overflow: hidden;
+	border-radius:0 calc(7 * var(--unit)) 0 0;
+}
+
+.tower-1 .x2::before{
+	left:calc(14 * var(--unit));
+	top:calc(0 * var(--unit));
+	width:calc(23 * var(--unit));
+	height:calc(16 * var(--unit));
+	background-color:#C7DBFA;
+	border-radius:40% 0 0 15%;
+}
+
+.tower-1 .x2::after{
+	right:0;
+	top:calc(7 * var(--unit));
+	width:calc(10 * var(--unit));
+	height:calc(19 * var(--unit));
+	background-color:#E3EDFB;
+	border-radius:calc(10 * var(--unit));
+}
+
+.green{
+	left:calc(281 * var(--unit));
+	top:calc(457 * var(--unit));
+	width:calc(336 * var(--unit));
+	height:calc(61 * var(--unit));
+	background-color:#39D278;
+
+	background-image: 
+		radial-gradient(ellipse at center, #D54B97 50%, transparent calc(50% + 1px)),
+		radial-gradient(ellipse at center, #04AD95 72%, transparent calc(72% + 1px)),
+		linear-gradient(44deg, transparent 50%, #04AD95 calc(50% + 1px)),
+		linear-gradient(20deg, #04AD95 50%, transparent calc(50% + 1px));
+
+	background-size: 
+		calc(184 * var(--unit)) calc(52 * var(--unit)),
+		calc(175 * var(--unit)) calc(52 * var(--unit)), 
+		calc(163 * var(--unit)) calc(33 * var(--unit)), 
+		calc(163 * var(--unit)) calc(33 * var(--unit));
+	
+	background-position: 
+		calc(16 * var(--unit)) calc(36 * var(--unit)),
+		calc(16 * var(--unit)) calc(36 * var(--unit)),
+		calc(26 * var(--unit)) 0,
+		calc(126 * var(--unit)) 0;
+}
+
+.power-post{
+	left:calc(204 * var(--unit));
+	top:calc(425 * var(--unit));
+	width:calc(171 * var(--unit));
+	height:calc(210 * var(--unit));
+}
+
+.power-post .x1{
+	left:0;
+	top:calc(9 * var(--unit));
+	width:calc(171 * var(--unit));
+	height:calc(11 * var(--unit));
+	background:#FD824A;
+	border-radius:calc(6 * var(--unit));
+}
+
+.power-post .x1::before{
+	left:0;
+	top:0;
+	width:calc(91 * var(--unit));
+	height:calc(11 * var(--unit));
+	background:#f77336;
+	transform:rotate(22deg);
+	transform-origin: left top;
+	border-radius:calc(6 * var(--unit));
+}
+
+.power-post .x1::after{
+	right:0;
+	top:0;
+	width:calc(91 * var(--unit));
+	height:calc(11 * var(--unit));
+	background:#FFA449;
+	background-image: linear-gradient(22deg, transparent 50%,#FD824A calc(50% + 1px));
+	background-size:calc(35 * var(--unit)) 100%;
+	background-position:top right;
+	background-repeat: no-repeat;
+	transform:rotate(-22deg);
+	transform-origin: right top;
+	border-radius:calc(6 * var(--unit));
+}
+
+.power-post::before{
+	left:calc(44 * var(--unit));
+	top:calc(1 * var(--unit));
+	width:calc(31 * var(--unit));
+	height:calc(10 * var(--unit));
+	color:#3632C1;
+	--shadow:#1F178B;
+	background-color: currentColor;
+	border-radius:calc(6 * var(--unit));
+	box-shadow: 
+		calc(73 * var(--unit)) 0 0 0 currentColor,
+		calc(65 * var(--unit)) 0 0 0 var(--shadow),
+		0 0 0 0 currentColor,
+		calc(-8 * var(--unit)) 0 0 0 var(--shadow);
+}
+
+.power-post::after{
+	left:calc(68 * var(--unit));
+	top:calc(41 * var(--unit));
+	width:calc(21 * var(--unit));
+	height:calc(14 * var(--unit));
+	color:#1F178B;
+	--shadow:#3632C1;
+	background-color: currentColor;
+	border-radius:calc(11 * var(--unit));
+	box-shadow: calc(10 * var(--unit)) 0 0 0 var(--shadow);
+}
+
+.power-post .x2{
+	left:calc(56 * var(--unit));
+	top:calc(50 * var(--unit));
+	width:calc(37 * var(--unit));
+	height:calc(20 * var(--unit));
+	border-radius:calc(12 * var(--unit));
+	background-color:#787CFF;
+	box-shadow: calc(18 * var(--unit)) 0 0 0 #9F9BFF;
+	z-index:5;
+}
+
+.power-post .x2::before{
+	left: calc(10 * var(--unit));
+	top: calc(56 * var(--unit));
+	width: calc(19 * var(--unit));
+	height: calc(10 * var(--unit));
+	border-radius: calc(13 * var(--unit));
+	color:#1F178B;
+	background-color: currentColor;
+	transform: rotate(10deg);
+	box-shadow:
+		calc(9 * var(--unit)) calc(84 * var(--unit)) 0 0 currentColor,
+		calc(5 * var(--unit)) calc(56 * var(--unit)) 0 0 currentColor,
+		calc(1 * var(--unit)) calc(28 * var(--unit)) 0 0 currentColor;
+}
+
+.power-post .x2::after{
+	right: calc(-4 * var(--unit));
+	top: calc(56 * var(--unit));
+	width: calc(19 * var(--unit));
+	height: calc(10 * var(--unit));
+	border-radius: calc(13 * var(--unit));
+	color:#1F178B;
+	background-color: currentColor;
+	transform: rotate(-10deg);
+	box-shadow:
+		calc(-11 * var(--unit)) calc(84 * var(--unit)) 0 0 currentColor,
+		calc(-7 * var(--unit)) calc(56 * var(--unit)) 0 0 currentColor,
+		calc(-3 * var(--unit)) calc(28 * var(--unit)) 0 0 currentColor;
+}
+
+.power-post .x3{
+	left:calc(62 * var(--unit));
+	top:calc(60 * var(--unit));
+	width:calc(9 * var(--unit));
+	height:calc(158 * var(--unit));
+	border-radius:calc(6 * var(--unit));
+	background-color:#1F178B;
+	transform: rotate(4deg);
+}
+
+.power-post .x3::before{
+	left:calc(11 * var(--unit));
+	top:0;
+	width:100%;
+	height:105%;
+	border-radius: inherit;
+	background-color: inherit;
+	transform: rotate(-3deg);
+	transform-origin: top center;
+}
+
+.power-post .x3::after{
+	left:calc(21 * var(--unit));
+	top:0;
+	width:100%;
+	height:105%;
+	border-radius: inherit;
+	background-color: #3630C1;
+	transform: rotate(-7deg);
+	transform-origin: top center;
+}
+
+.power-post.clone-1{
+	left:calc(91 * var(--unit));
+	top:calc(429 * var(--unit));
+	transform:scale(0.686);
+	transform-origin:left top;
+}
+
+.power-post.clone-1 .x3{
+	width:calc(10 * var(--unit));
+}
+
+.power-post.clone-2{
+	left:calc(17 * var(--unit));
+	top:calc(433 * var(--unit));
+	transform:scale(0.45);
+	transform-origin:left top;
+}
+
+.power-post.clone-2 .x3{
+	width:calc(11 * var(--unit));
+}
+
+.power-post.clone-3{
+	left:calc(392 * var(--unit));
+	top:calc(419 * var(--unit));
+	transform:scale(1.5);
+	transform-origin:left top;
+}
+
+.power-post.clone-3 .x3{
+	width:calc(11 * var(--unit));
+}
+
+.D, .B1{
+	clip-path: polygon(0% calc(441 * var(--unit)), 100% calc(441 * var(--unit)), 100% 100%, 0% 100%);
+	--wire-color:#5B11C7;
+	z-index:5;
+}
+
+.B1{
+	--wire-color:#712CEF;
+	z-index:0;
+}
+
+.wire{
+	left: calc(195 * var(--unit));
+	top: calc(206 * var(--unit));
+	width: calc(227 * var(--unit));
+	height: calc(313 * var(--unit));
+	border-radius:50%;
+	border:calc(8 * var(--unit)) solid var(--wire-color);
+	box-shadow: 0 0 0 10px rgba(0,0,0,0);
+}
+
+.wire.clone-1{
+	left: calc(78 * var(--unit));
+	top: calc(205 * var(--unit));
+	width: calc(160 * var(--unit));
+	height: calc(288 * var(--unit));
+	border-width:calc(6 * var(--unit));
+}
+
+.B1 .wire.clone-1{
+	left: calc(155 * var(--unit));
+	top: calc(188 * var(--unit));
+	width: calc(251 * var(--unit));
+	height: calc(309 * var(--unit));
+}
+
+.wire.clone-2{
+	left: calc(4 * var(--unit));
+	top: calc(202 * var(--unit));
+	width: calc(118 * var(--unit));
+	height: calc(276 * var(--unit));
+	border-width: calc(5 * var(--unit));
+}
+
+.B1 .wire.clone-2{
+	left: calc(59 * var(--unit));
+	top: calc(202 * var(--unit));
+	width: calc(165 * var(--unit));
+	height: calc(276 * var(--unit));
+}
+
+.wire.clone-3{
+	left: calc(385 * var(--unit));
+	top: calc(205 * var(--unit));
+	width: calc(337 * var(--unit));
+	height: calc(346 * var(--unit));
+	border-width: calc(11 * var(--unit));
+}
+
+.B1 .wire.clone-3{
+	left: calc(324 * var(--unit));
+	top: calc(196 * var(--unit));
+	width: calc(405 * var(--unit));
+	height: calc(317 * var(--unit));
+}
+
+.shadows,
+.shadows > div{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.shadows{
+	background-image: linear-gradient(#D54B97,#D54B97);
+	background-size:calc(123 * var(--unit)) calc(14 * var(--unit));
+	background-position:calc(325 * var(--unit)) calc(509 * var(--unit));
+}
+
+.shadows::before{
+	left: calc(11 * var(--unit));
+	top: calc(474 * var(--unit));
+	width: calc(59 * var(--unit));
+	height: calc(26 * var(--unit));
+	background-color:#B52A74;
+	border-radius: 46%;
+}
+
+.shadows::after{
+	left: calc(26 * var(--unit));
+	top: calc(476 * var(--unit));
+	width: calc(280 * var(--unit));
+	height: calc(72 * var(--unit));
+	background-color:#B52A74;
+	border-radius: 50%;
+}
+
+.s1::before{
+	left: calc(230 * var(--unit));
+	top: calc(506 * var(--unit));
+	width: calc(73 * var(--unit));
+	height: calc(43 * var(--unit));
+	background-color:#B52A74;
+	border-radius: 50%;
+}
+
+.s1::after{
+    left: calc(267 * var(--unit));
+    top: calc(506 * var(--unit));
+    width: calc(67 * var(--unit));
+    height: calc(26 * var(--unit));
+    background-color: #B52A74;
+    border-radius: 0 calc(28 * var(--unit)) calc(42 * var(--unit)) 0;
+    transform: rotate(-11deg);
+}
+
+.s2::before{
+	left: calc(0 * var(--unit));
+	top: calc(524 * var(--unit));
+	width: calc(54 * var(--unit));
+	height: calc(6 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	transform: rotate(-4deg);
+	transform-origin: right center;
+	background-color: #B52A74;
+	box-shadow: calc(1 * var(--unit)) calc(7 * var(--unit)) 0 0 #B52A74;
+}
+
+.s2::after{
+    left: calc(25 * var(--unit));
+    top: calc(529 * var(--unit));
+    width: calc(12 * var(--unit));
+    height: calc(4 * var(--unit));
+    border-radius: calc(6 * var(--unit));
+    transform: rotate(48deg);
+    transform-origin: center;
+	background-color: #b52a74;
+	box-shadow:calc(-6 * var(--unit)) calc(10 * var(--unit)) 0 0 #B52A74;
+}
+
+.E{
+	z-index:0;
+}
+
+.tank{
+    left: calc(231 * var(--unit));
+    top: calc(532 * var(--unit));
+    width: calc(264 * var(--unit));
+	height: calc(119 * var(--unit));
+	
+	background-image:
+		linear-gradient(-65deg, transparent 50%, #1451B9 50%), 
+		linear-gradient(#2261CA,#2261CA), 
+		linear-gradient(#4082FD,#4082FD);
+
+	background-size:
+		calc(60 * var(--unit)) calc(65 * var(--unit)),
+		calc(173 * var(--unit)) calc(65 * var(--unit)),
+		calc(264 * var(--unit)) calc(65 * var(--unit));
+
+	background-position:
+		calc(0 * var(--unit)) calc(42 * var(--unit)),
+		calc(0 * var(--unit)) calc(42 * var(--unit)),
+		calc(0 * var(--unit)) calc(42 * var(--unit));
+}
+
+.tank .top-outline{
+    left: 0;
+    top: 0;
+    width: calc(264 * var(--unit));
+    height: calc(79 * var(--unit));
+	border-radius:50%;
+	background-color:#007398;
+	border:10px solid #0E349C;
+	border-right-color: #2261CA;
+	overflow:hidden;
+}
+
+.tank .top-outline::before{
+	left:50%;
+	top:calc(7 * var(--unit));
+	width:99%;
+	height:100%;
+	border-radius:inherit;
+	transform:translateX(-50%);
+	background-color:#00BD99;
+}
+
+.tank .disc{
+	left: calc(82 * var(--unit));
+    top: calc(24 * var(--unit));
+    width: calc(103 * var(--unit));
+	height: calc(31 * var(--unit));
+	border-radius: 50%;
+	background-color:#9E9CFD;
+	box-shadow: 0 calc(7 * var(--unit)) 0 0 #017399;
+	overflow:hidden;
+}
+
+.tank .disc::before{
+	width:100%;
+	height:100%;
+	left:0;
+	top:calc(-9 * var(--unit));
+	border-radius: 40%;
+	background-color:#D1CCFC;
+}
+
+.tank .disc::after{
+	width:calc(21 * var(--unit));
+	height:calc(8 * var(--unit));
+	left:calc(38 * var(--unit));
+	top:calc(5 * var(--unit));
+	border-radius:calc(4 * var(--unit));
+	background-color:#9E9CFD;
+}
+
+.tank::before{
+	width:calc(19 * var(--unit));
+	height:calc(66 * var(--unit));
+	left:calc(-19 * var(--unit));
+	top:calc(32 * var(--unit));
+	background-color:#1F178B;
+}
+
+.tank .hook,
+.tank .cap{
+	left:calc(4 * var(--unit));
+	top:calc(-6 * var(--unit));
+}
+
+.tank .hook::before,
+.tank .cap::after{
+	width: calc(152 * var(--unit));
+	height: calc(18 * var(--unit));
+	left: calc(-14 * var(--unit));
+	background-color: #3F39E1;
+	border-radius: calc(12 * var(--unit)) calc(12 * var(--unit)) calc(32 * var(--unit)) 0;
+}
+
+.tank .hook::before{
+	top: calc(21 * var(--unit));
+	transform: rotate(-9deg) skewX(51deg);
+}
+
+.tank .cap::after{
+	top: calc(25 * var(--unit));
+	transform: rotate(-11deg) skewX(51deg);
+}
+
+.tank .hook::after{
+	width: calc(29 * var(--unit));
+	height: calc(11 * var(--unit));
+	left: calc(-26 * var(--unit));
+	top: calc(39 * var(--unit));
+	background-color: #2C26C1;
+	transform: rotate(34deg);
+	border-radius: calc(7 * var(--unit));
+}
+
+.tank .cap::before{
+	width: calc(18 * var(--unit));
+	height: calc(18 * var(--unit));
+	left: calc(116 * var(--unit));
+	top: calc(21 * var(--unit));
+	background-color: #1F1788;
+	border-radius: calc(7 * var(--unit));
+}
+
+.tank.tank-clone{
+	left: calc(-109 * var(--unit));
+	top: calc(570 * var(--unit));
+	transform: scale(1.2);
+	transform-origin: left top;
+}
+
+.B > .a4, .B > .a5, .B > .a6, .B > .a7, .B > .a8, .B > .a9{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.a9::after {
+    right: calc(129 * var(--unit));
+    top: calc(415 * var(--unit));
+    width: calc(71 * var(--unit));
+    height: calc(44 * var(--unit));
+    background-color: #518DFE;
+}
+
+.a9::before {
+    right: calc(129 * var(--unit));
+    top: calc(412 * var(--unit));
+    width: calc(60 * var(--unit));
+    height: calc(44 * var(--unit));
+    background-color: #518DFE;
+}
+
+.a7::after {
+    right: calc(58 * var(--unit));
+    top: calc(393 * var(--unit));
+    width: calc(79 * var(--unit));
+    height: calc(42 * var(--unit));
+    background-color: #4082FD;
+    transform: skewX(55deg);
+}
+
+.a7::before {
+    right: calc(118 * var(--unit));
+    top: calc(400 * var(--unit));
+    width: calc(60 * var(--unit));
+    height: calc(44 * var(--unit));
+    background-color: #518DFE;
+}
+
+.a6::after {
+    right: calc(126 * var(--unit));
+    top: calc(426 * var(--unit));
+    width: calc(79 * var(--unit));
+    height: calc(55 * var(--unit));
+    background-color: #518DFE;
+}
+
+.a6::before {
+    right: calc(119 * var(--unit));
+    top: calc(426 * var(--unit));
+    width: calc(8 * var(--unit));
+    height: calc(46 * var(--unit));
+    background-color: #77BAFF;
+}
+
+.a8::after {
+    right: calc(159 * var(--unit));
+    top: calc(407 * var(--unit));
+    width: calc(59 * var(--unit));
+    height: calc(9 * var(--unit));
+    border-radius: calc(12 * var(--unit));
+    transform: rotate(-33deg);
+    transform-origin: top center;
+    background-color: #0D329A;
+}
+
+.a8::before {
+    right: calc(112 * var(--unit));
+    top: calc(406 * var(--unit));
+    width: calc(59 * var(--unit));
+    height: calc(9 * var(--unit));
+    border-radius: calc(12 * var(--unit));
+    transform: rotate(30deg);
+    transform-origin: top center;
+    background-color: #0D329A;
+}
+
+.a5::after {
+    right: calc(2 * var(--unit));
+    top: calc(426 * var(--unit));
+    width: calc(117 * var(--unit));
+    height: calc(46 * var(--unit));
+    background-color: #9DC8FD;
+}
+
+.a5::before {
+    right: calc(71 * var(--unit));
+    top: calc(472 * var(--unit));
+    width: calc(117 * var(--unit));
+    height: calc(46 * var(--unit));
+    background-color: #4F52FF;
+    border-radius: calc(12 * var(--unit));
+    transform: skewX(27deg);
+}
+
+.a4::after {
+    right: calc(173 * var(--unit));
+    top: calc(497 * var(--unit));
+    width: calc(90 * var(--unit));
+    height: calc(99 * var(--unit));
+    transform: skewY(19deg);
+    background-color: #777BFE;
+    border-radius: calc(5 * var(--unit));
+}
+
+.a4::before {
+	right: calc(172 * var(--unit));
+	top: calc(483 * var(--unit));
+	width: calc(90 * var(--unit));
+	height: calc(99 * var(--unit));
+	background-color: white;
+    border-radius: calc(5 * var(--unit));
+}
+
+.industrialization .B{
+	background-image:
+		linear-gradient(#D1CCFC,#D1CCFC),
+
+		linear-gradient(#D37CFC, #D37CFC),
+		linear-gradient(#D37CFC, #D37CFC),
+		linear-gradient(#D37CFC, #D37CFC),
+		linear-gradient(#D37CFC, #D37CFC),
+		linear-gradient(#D37CFC, #D37CFC),
+
+		linear-gradient(#D54B97, #D54B97),
+		linear-gradient(#38D376, #38D376),
+		linear-gradient(#EAE5FE, #EAE5FE),
+		linear-gradient(#9E9CFD, #9E9CFD);
+
+	background-position:
+		calc(509 * var(--unit)) calc(512 * var(--unit)),
+
+		calc(530 * var(--unit)) calc(309 * var(--unit)),
+		calc(490 * var(--unit)) calc(352 * var(--unit)),
+		calc(255 * var(--unit)) calc(304 * var(--unit)),
+		calc(17 * var(--unit)) calc(296 * var(--unit)),
+		calc(59 * var(--unit)) calc(251 * var(--unit)),
+
+		0 calc(451 * var(--unit)), /* 457 => 451 */
+		0 calc(440 * var(--unit)),
+		calc(72 * var(--unit)) calc(378 * var(--unit)),
+		0 calc(378 * var(--unit));
+	
+	background-size:
+		calc(129 * var(--unit)) calc(99 * var(--unit)),
+
+		calc(117 * var(--unit)) calc(100 * var(--unit)),
+		calc(40 * var(--unit)) calc(27 * var(--unit)),
+		calc(83 * var(--unit)) calc(44 * var(--unit)),
+		calc(146 * var(--unit)) calc(66 * var(--unit)),
+		calc(25 * var(--unit)) calc(66 * var(--unit)),
+
+		100% 50%,
+		28% 50%,
+		30% 50%,
+		30% 50%;
+}
+
+.energy-processing-unit{
+	left: calc(226 * var(--unit));
+	top: calc(442 * var(--unit));
+	width: calc(104 * var(--unit));
+	height: calc(90 * var(--unit));
+	display: none;
+}
+
+.nuclear-energy-processor{
+	left: calc(93 * var(--unit));
+	top: calc(286 * var(--unit));
+	width: calc(204 * var(--unit));
+	height: calc(227 * var(--unit));
+}
+
+.nuclear-energy-processor::before{
+	left: 50%;
+	top: calc(196 * var(--unit));
+	width: calc(225 * var(--unit));
+	height: calc(44 * var(--unit));
+	border-radius: 50%;
+	background-color: #0A329A;
+	transform: translateX(-50%);
+}
+
+.nuclear-energy-processor::after{
+	left: 0;
+	bottom: 0;
+	width: calc(204 * var(--unit));
+	height: calc(142 * var(--unit));
+	border-radius: 0% 0% 50% 50% / 0% 0% 12% 12%;
+	background-image:
+		linear-gradient(#6D9FFD,#6D9FFD),
+
+		linear-gradient(#2261CA,#2261CA),
+		linear-gradient(#4082FD,#4082FD),
+		linear-gradient(#6D9FFD,#6D9FFD),
+		linear-gradient(#7BB9FA,#7BB9FA),
+		linear-gradient(#9DC8FD,#9DC8FD);
+
+	background-size:
+		calc(58 * var(--unit)) 100%,
+
+		calc(48 * var(--unit)) 100%,
+		calc(72 * var(--unit)) 100%,
+		calc(112 * var(--unit)) 100%,
+		calc(123 * var(--unit)) 46%,
+		100% 100%;
+
+	background-position: 
+		calc(108 * var(--unit)) calc(70 * var(--unit)),
+
+		0 0,
+		0 0,
+		0 0,
+		0 0,
+		0 0;
+}
+
+.top-shield{
+	left: calc(5 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(194 * var(--unit));
+	height: calc(194 * var(--unit));
+	background-color:#46AEFD;
+	border-radius:50%;
+	border:calc(8 * var(--unit)) solid #44C5F9;
+	border-right-color: #98F2FF;
+	transform:rotate(-44deg);
+}
+
+.top-shield.clone-layer{
+	background-color:transparent;
+	border-color:transparent;
+	border-right-color: transparent;
+	transform:none;
+	overflow:hidden;
+}
+
+.top-shield.clone-layer::before{
+	left: calc(34 * var(--unit));
+	top: calc(-8 * var(--unit));
+	width: calc(167 * var(--unit));
+	height: calc(161 * var(--unit));
+	background-color: #56D8FB;
+	border-radius: 50%;
+}
+
+.top-shield.clone-layer::after{
+	left: calc(71 * var(--unit));
+	top: calc(27 * var(--unit));
+	width: calc(87 * var(--unit));
+	height: calc(82 * var(--unit));
+	background-color: white;
+	border-radius: 44% 50%;
+}
+
+.nuclear-energy-processor .nphook{
+	left: 50%;
+	top: calc(74 * var(--unit));
+	width: calc(210 * var(--unit));
+	height: calc(11 * var(--unit));
+	transform: translateX(-50%);
+}
+
+.nphook > div{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.nphook > div::before,
+.nphook > div::after{
+	border-radius: calc(7 * var(--unit));
+	top: calc(0 * var(--unit));
+	height:100%;
+}
+
+.nphook .np1::before{
+	left: calc(0 * var(--unit));
+	width: calc(50 * var(--unit));
+	background-color:#0D339B;
+}
+
+.nphook .np1::after{
+	left: calc(39 * var(--unit));
+	width: calc(42 * var(--unit));
+	background-color:#2261CA;
+}
+
+.nphook .np2::before{
+	left: calc(70 * var(--unit));
+	width: calc(67 * var(--unit));
+	background-color:#4082FD;
+}
+
+.nphook .np2::after{
+	left: calc(112 * var(--unit));
+	width: calc(98 * var(--unit));
+	background-color:#6D9FFD;
+}
+
+.energy-processing-unit .edge{
+	left: calc(-10 * var(--unit));
+	top: calc(-7 * var(--unit));
+	width: calc(114 * var(--unit));
+	height: calc(69 * var(--unit));
+	border-radius: 0 0 0 36%;
+	background-color: #9BC8FE;	
+}
+
+.nuclear-energy-processor .wiring{
+	left: calc(162 * var(--unit));
+	top: calc(100 * var(--unit));
+	width: calc(10 * var(--unit));
+	height: calc(18 * var(--unit));
+	border-radius: calc(9 * var(--unit));
+	background-color: #215EC7;
+	z-index: 1;
+	box-shadow: 
+		calc(5 * var(--unit)) calc(12 * var(--unit)) 0 0 #3B81FF,
+		calc(5 * var(--unit)) calc(21 * var(--unit)) 0 0 #3B81FF;
+}
+
+.energy-processing-unit .edge::after{
+	left: calc(17 * var(--unit));
+	top: calc(28 * var(--unit));
+	width: calc(58 * var(--unit));
+	height: calc(69 * var(--unit));
+	background-color: #4082FD;
+	border-radius: calc(9 * var(--unit));
+	transform: skewY(24deg);
+}
+
+.energy-processing-unit .clamp{
+	left: calc(60 * var(--unit));
+	top: calc(17 * var(--unit));
+	width: calc(45 * var(--unit));
+	height: calc(69 * var(--unit));
+	transform: skewY(-24deg);
+	background-color: #9CC7F8;
+	border-radius: calc(9 * var(--unit));
+}
+
+.stove-1{
+	left: calc(298 * var(--unit));
+	top: calc(201 * var(--unit));
+	width: calc(217 * var(--unit));
+	height: calc(264 * var(--unit));
+}
+
+.stove-2{
+	left: calc(138 * var(--unit));
+	top: calc(238 * var(--unit));
+	width: calc(134 * var(--unit));
+	height: calc(119 * var(--unit));
+}
+
+.stove-1 .head,
+.stove-1 .side-1,
+.stove-1 .side-2{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.stove-1 .head::before,
+.stove-1 .head::after{
+    left: calc(-5 * var(--unit));
+    top: calc(6 * var(--unit));
+    width: calc(180 * var(--unit));
+    height: calc(22 * var(--unit));
+	border-radius: 49% 49% 30% 30% / 92% 92% 20% 20%;
+	--color:#EAE5FE;
+	--clip:100%;
+    box-shadow: 0 calc(-12 * var(--unit)) 0 0 var(--color);
+    transform: rotate(0.6deg);
+}
+
+.stove-1 .head::after{
+	--color:#D1CBFE;
+	--clip:70%;
+	clip-path: polygon(0 -107%, var(--clip) -107%, calc(var(--clip) - 5%) 128%, 0% 128%);
+}
+
+.stove-1 .side-1::before{
+	right: calc(-81 * var(--unit));
+	top: calc(14 * var(--unit));
+	width: calc(150 * var(--unit));
+	height: calc(246 * var(--unit));
+	border-radius: 20% 0% 0% 60% / 35% 6% 0% 65%;
+	box-shadow: 
+		calc(-12 * var(--unit)) 0 0 0 #D3CAFD,
+		calc(-24 * var(--unit)) calc(-2 * var(--unit)) 0 0 var(--stove-color-4,white);
+	transform: rotate(-10deg);
+	transform-origin: left top;
+	clip-path:polygon(-44.22% -1.1%, 12.15% -4.04%, 76.69% 91.91%, 0% 100%);
+}
+
+.stove-1 .side-1::after{
+	left: calc(-114 * var(--unit));
+	top: calc(14 * var(--unit));
+	width: calc(150 * var(--unit));
+	height: calc(246 * var(--unit));
+	border-radius: 66% 34% 89% 11% / 0% 46% 54% 100%;
+	box-shadow: 
+		calc(24 * var(--unit)) calc(-12 * var(--unit)) 0 0 var(--stove-color-1, #4D52FD),
+		calc(12 * var(--unit)) 0 0 0 var(--stove-color-1, #4D52FD);
+	transform: rotate(16deg);
+	transform-origin: right top;
+	clip-path: polygon(calc(123 * var(--unit)) calc(-7 * var(--unit)), 127.45% 4.26%, 131.18% 84.74%, 68.39% 84.03%);
+}
+
+.stove-1::after{
+	left: calc(30 * var(--unit));
+	top: calc(58 * var(--unit));
+	width: calc(7 * var(--unit));
+	height: calc(13 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	color:#2413CF;
+	background-color: currentColor;
+	box-shadow:
+		calc(105 * var(--unit)) 0 0 0 currentColor, 
+		calc(91 * var(--unit)) 0 0 0 currentColor, 
+		calc(76 * var(--unit)) 0 0 0 currentColor, 
+		calc(61 * var(--unit)) 0 0 0 currentColor, 
+		calc(46 * var(--unit)) 0 0 0 currentColor, 
+		calc(31 * var(--unit)) 0 0 0 currentColor, 
+		calc(16 * var(--unit)) 0 0 0 currentColor;
+}
+
+.stove-1 .side-2{
+	clip-path:polygon(84.55% 67.5%, 70.46% 29.9%, 75.91% 4.44%, 42.28% calc(2 * var(--unit)), 4.09% calc(10 * var(--unit)), calc(20 * var(--unit)) 26%, 1.18% 55.63%, 0% 86%, 56.91% 83.56%);
+	background-color:var(--stove-color-3, #9D9CFD);
+	background-image: 
+		linear-gradient(var(--stove-color-4, #CECDFE),var(--stove-color-4, #CECDFE)),
+		linear-gradient(var(--stove-color-2, #787CFE),var(--stove-color-2, #787CFE));
+	background-size:
+	calc(123 * var(--unit)) 100%,
+	calc(80 * var(--unit)) 100%;
+	background-position:
+	right top,
+	0 0;
+}
+
+.stove-1 .side-2 .ss-1{
+	left: calc(121 * var(--unit));
+	top: calc(82 * var(--unit));
+	width: calc(55 * var(--unit));
+	height: calc(82 * var(--unit));
+	border-radius: 50%;
+	background-color:white;	
+}
+
+.stove-1 .side-2 .ss-2{
+	left: calc(121 * var(--unit));
+	top: calc(82 * var(--unit));
+	width: calc(55 * var(--unit));
+	height: calc(82 * var(--unit));
+}
+
+.stove-1 .side-2 .ss-1::before{
+	left: calc(-83 * var(--unit));
+	top: calc(-76 * var(--unit));
+	width: calc(33 * var(--unit));
+	height: calc(49 * var(--unit));
+	border-radius: calc(55 * var(--unit));
+	box-shadow: calc(-18 * var(--unit)) calc(-8 * var(--unit)) 0 0 var(--stove-color-1, #4D52FD);
+}
+
+.stove-1 .side-2 .ss-1::after{
+	left: calc(-27 * var(--unit));
+	top: calc(-78 * var(--unit));
+	width: calc(63 * var(--unit));
+	height: calc(54 * var(--unit));
+	border-radius: calc(76 * var(--unit));
+	box-shadow: calc(-3 * var(--unit)) calc(-11 * var(--unit)) 0 0 var(--stove-color-3, #9D9CFD);
+}
+
+.stove-1 .side-2 .ss-2::after{
+	left: calc(-104 * var(--unit));
+	top: calc(-78 * var(--unit));
+	width: calc(63 * var(--unit));
+	height: calc(54 * var(--unit));
+	border-radius: calc(76 * var(--unit));
+	box-shadow: calc(3 * var(--unit)) calc(-11 * var(--unit)) 0 0 var(--stove-color-3, #9D9CFD);
+}
+
+.stove-1.stove-clone{
+	left: calc(140 * var(--unit));
+	top: calc(238 * var(--unit));
+	transform:scale(0.8);
+	transform-origin:left top;
+	--stove-color-1:#2757CA;
+	--stove-color-2:#4977FD;
+	--stove-color-3:#7397FC;
+	--stove-color-4:#97ABFC;
+}
+
+.stove-1.stove-clone::after{
+	color:transparent;
+}
+
+.stove-1.stove-clone .head::after{
+	--color:#99AAFC;
+}
+
+.stove-1.stove-clone .head::before{
+	--color:#7495FD;
+}
+
+/* Clouds */
+.Clouds{
+	animation:clouds-move linear 64s forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes clouds-move{
+	to{
+		transform:translateX(100%);
+	}
+}
+
+.cloud{
+	opacity:0.2;	
+	color: white;
+	transform:scale(1);
+}
+
+.cloud.type-1{
+	width: calc(138 * var(--unit));
+	height: calc(21 * var(--unit));
+	background-color: currentColor;
+	border-radius: calc(27 * var(--unit));
+}
+
+.cloud.type-1::before{
+	left: calc(19 * var(--unit));
+	top: calc(-36 * var(--unit));
+	width: calc(70 * var(--unit));
+	height: calc(56 * var(--unit));
+	background-color: currentColor;
+	border-radius: 50%;
+}
+
+.cloud.type-1::after{
+	left: calc(58 * var(--unit));
+	top: calc(-17 * var(--unit));
+	width: calc(63 * var(--unit));
+	height: calc(33 * var(--unit));
+	background-color: currentColor;
+	border-radius: 50%;
+}
+
+.cloud.type-2{
+	width: calc(125 * var(--unit));
+	height: calc(15 * var(--unit));
+	background-color: currentColor;
+	border-radius: calc(27 * var(--unit));
+}
+
+.cloud.type-2::before{
+	left: calc(0 * var(--unit));
+	top: calc(-31 * var(--unit));
+	width: calc(70 * var(--unit));
+	height: calc(46 * var(--unit));
+	background-color: currentColor;
+	border-radius: 50%;
+}
+
+.cloud.type-2::after{
+	left: calc(46 * var(--unit));
+	top: calc(-18 * var(--unit));
+	width: calc(63 * var(--unit));
+	height: calc(33 * var(--unit));
+	background-color: currentColor;
+	border-radius: 50%;
+}
+
+.cloud:nth-child(1){
+	left: calc(460 * var(--unit));
+	top: calc(66 * var(--unit));
+}
+
+.cloud:nth-child(2){
+	left: calc(-28 * var(--unit));
+	top: calc(58 * var(--unit));
+}
+
+.cloud:nth-child(3){
+	left: calc(546 * var(--unit));
+	top: calc(212 * var(--unit));
+}
+
+.cloud:nth-child(4){
+	left: calc(34 * var(--unit));
+	top: calc(166 * var(--unit));
+}
+
+.cloud:nth-child(5){
+	left: calc(428 * var(--unit));
+	top: calc(243 * var(--unit));
+}
+
+/* Smoke */
+.smoke-1{
+	left: calc(305 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(162 * var(--unit));
+	height: calc(211 * var(--unit));
+}
+
+.smoke-2{
+	left: calc(144 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(134 * var(--unit));
+	height: calc(242 * var(--unit));
+}
+
+/* Quick Fixes */
+.tank::before,
+.tank .top-outline{
+	box-shadow: 0 0 0 2px rgba(0,0,0,0);
+}
+
+.stove-1{
+	box-shadow: 0 0 0 20px rgba(0,0,0,0);	
+}
+
+.G::after{
+	left: calc(22 * var(--unit));
+	top: calc(438 * var(--unit));
+	width: calc(5 * var(--unit));
+	height: calc(4 * var(--unit));
+	color:#5b11c7;
+	background-color: currentColor;
+	border-radius: calc(100 * var(--unit)) calc(100 * var(--unit)) 0 0;
+	transform: rotate(-6deg);
+	box-shadow:
+		calc(375 * var(--unit)) calc(44 * var(--unit)) 0 calc(4 * var(--unit)) currentColor,
+		calc(190 * var(--unit)) calc(22 * var(--unit)) 0 calc(2 * var(--unit)) currentColor,
+		calc(75 * var(--unit)) calc(9 * var(--unit)) 0 calc(1 * var(--unit)) currentColor;
+}
+/* Climate Change */
+
+.split-2{
+	background-image: linear-gradient(#007AFC,#007AFC);
+	background-size:100% 100%;
+	background-position:0 0;
+	background-repeat: no-repeat;
+}
+
+.split-2::before{
+	left: calc(299 * var(--unit));
+	top: calc(89 * var(--unit));
+	width: calc(50 * var(--unit));
+	height: calc(50 * var(--unit));
+	border-radius:50%;
+	background-color:white;
+	box-shadow:0 0 calc(59 * var(--unit)) calc(31 * var(--unit)) white;
+	transform:rotate(0deg);
+	transform-origin:calc(250 * var(--unit)) calc(250 * var(--unit));
+	animation:sun-down ease-out 10s 1s forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes sun-down{
+	to{
+		transform:rotate(-30deg);
+		box-shadow:0 0 calc(159 * var(--unit)) calc(71 * var(--unit)) white;
+	}
+}
+
+.mountain{
+	box-shadow:0 0 0 2px rgba(0,0,0,0);
+	transform:scaleY(1);
+	transform-origin:left bottom;
+	animation:melting ease-out 13s 1s forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes melting{
+	to{
+		transform:scaleY(0.85);
+	}
+}
+
+.split > .ground{
+	left: calc(-127 * var(--unit));
+	top: calc(443 * var(--unit));
+	width: calc(911 * var(--unit));
+	height: calc(800 * var(--unit));
+	border-radius: 33% 72% 17% 57% / 10% 18% 73% 76%;
+	background-color: #00C899;
+	transform: rotate(-3deg);
+}
+
+.split > .ground::before{
+	--cx:120;
+	--cy:-590;
+	left: calc(35 * var(--unit));
+	top: calc(145 * var(--unit));
+	width: calc(24 * var(--unit));
+	height: calc(22 * var(--unit));
+	color:#00B5A5;
+	background-color:currentColor;
+	border-radius:50%;
+	box-shadow:
+	calc((545 + var(--cx)) * var(--unit)) calc((528 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((548 + var(--cx)) * var(--unit)) calc((500 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((485 + var(--cx)) * var(--unit)) calc((555 + var(--cy)) * var(--unit)) 0 0 currentColor,
+
+	calc((484 + var(--cx)) * var(--unit)) calc((516 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((456 + var(--cx)) * var(--unit)) calc((535 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((434 + var(--cx)) * var(--unit)) calc((539 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((429 + var(--cx)) * var(--unit)) calc((503 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((410 + var(--cx)) * var(--unit)) calc((531 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((380 + var(--cx)) * var(--unit)) calc((556 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((350 + var(--cx)) * var(--unit)) calc((587 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((362 + var(--cx)) * var(--unit)) calc((514 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((325 + var(--cx)) * var(--unit)) calc((545 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((298 + var(--cx)) * var(--unit)) calc((563 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((395 + var(--cx)) * var(--unit)) calc((501 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((286 + var(--cx)) * var(--unit)) calc((509 + var(--cy)) * var(--unit)) 0 0 currentColor,
+
+	calc((292 + var(--cx)) * var(--unit)) calc((476 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((226 + var(--cx)) * var(--unit)) calc((536 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((225 + var(--cx)) * var(--unit)) calc((497 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((197 + var(--cx)) * var(--unit)) calc((518 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((183 + var(--cx)) * var(--unit)) calc((508 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((174 + var(--cx)) * var(--unit)) calc((523 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((149 + var(--cx)) * var(--unit)) calc((513 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((166 + var(--cx)) * var(--unit)) calc((486 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((127 + var(--cx)) * var(--unit)) calc((488 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((119 + var(--cx)) * var(--unit)) calc((535 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((88 + var(--cx)) * var(--unit)) calc((569 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((98 + var(--cx)) * var(--unit)) calc((496 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((60 + var(--cx)) * var(--unit)) calc((529 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((36 + var(--cx)) * var(--unit)) calc((543 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	0 0 0 0 currentColor;
+}
+
+.tree{
+	left: calc(202 * var(--unit));
+	top: calc(303 * var(--unit));
+	width: calc(87 * var(--unit));
+	height: calc(151 * var(--unit));
+	transform:scale(var(--scale, 1));
+	transform-origin: left top;
+	--color-1:#009B80;
+	--color-2: #00B18B;
+	--color-3:#00877B;
+}
+
+.tree-2{
+	left: calc(248 * var(--unit));
+	top: calc(321 * var(--unit));
+	--color-1:#007B89;
+	--color-2: #058781;
+}
+
+.tree-3{
+	left: calc(288 * var(--unit));
+	top: calc(318 * var(--unit));
+	--color-1:#00897F;
+	--color-2: #009582;
+}
+
+.tree-4{
+	left: calc(339 * var(--unit));
+	top: calc(359 * var(--unit));
+	--color-1:#00A8BC;
+}
+
+.tree-5{
+	left: calc(390 * var(--unit));
+	top: calc(363 * var(--unit));
+	--color-1:#00A8BC;
+}
+
+.tree-6{
+	left: calc(418 * var(--unit));
+	top: calc(374 * var(--unit));
+	--color-1:#00A8BC;
+}
+
+.tree-7{
+	left: calc(440 * var(--unit));
+	top: calc(341 * var(--unit));
+	--color-1:#00897F;
+	--color-2: #009981;
+}
+
+.tree-8{
+	left: calc(489 * var(--unit));
+	top: calc(321 * var(--unit));
+	--color-1:#009B80;
+	--color-2: #03AF8E;
+	--color-3: #008A7F;
+}
+
+.tree-9{
+	left: calc(538 * var(--unit));
+	top: calc(361 * var(--unit));
+	--color-1:#00897F;
+	--color-2: #009880;
+}
+
+.tree-10{
+	left: calc(553 * var(--unit));
+	top: calc(369 * var(--unit));
+	--color-1:#00A8BC;
+}
+
+.tree-11{
+	left: calc(577 * var(--unit));
+	top: calc(375 * var(--unit));
+	--color-1:#007B89;
+	--scale:0.9;
+}
+
+.tree-12{
+	left: calc(588 * var(--unit));
+	top: calc(360 * var(--unit));
+	--color-1:#008B9A;
+}
+
+.tree-13{
+	left: calc(610 * var(--unit));
+	top: calc(358 * var(--unit));
+	--color-1:#00A9BC;
+}
+
+.tree-14{
+	left: calc(159 * var(--unit));
+	top: calc(326 * var(--unit));
+	--color-1:#00897F;
+}
+
+.tree-15{
+	left: calc(124 * var(--unit));
+	top: calc(352 * var(--unit));
+	--color-1:#00897F;
+}
+
+.tree-16{
+	left: calc(72 * var(--unit));
+	top: calc(321 * var(--unit));
+	--color-1:#00897F;
+}
+
+.tree-17{
+	left: calc(99 * var(--unit));
+	top: calc(328 * var(--unit));
+	--color-1:#007B89;
+}
+
+.tree-18{
+	left: calc(-7 * var(--unit));
+	top: calc(328 * var(--unit));
+	--color-1:#007B89;
+}
+
+.tree-19{
+	left: calc(33 * var(--unit));
+	top: calc(344 * var(--unit));
+	--color-1:#008A7E;
+}
+
+.tree > .branch{
+	--c:7%;
+	--tl:95%;
+	--ts:4%;
+	left: 50%;
+	top: calc(0 * var(--unit));
+	width: calc(67 * var(--unit));
+	height: calc(70 * var(--unit));
+	transform:translateX(-50%);
+}
+
+.tree > .branch.t-b-2{
+	top: calc(43 * var(--unit));
+	width: calc(87 * var(--unit));
+}
+
+.tree > .branch.t-b-3{
+	top: calc((43 + 34) * var(--unit));
+	width: calc(90 * var(--unit));
+}
+
+.tree > .branch::before{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+	clip-path: polygon(calc(50% - var(--c)) 0, calc(100% - (50% - var(--c))) 0, 100% var(--tl), calc(100% - var(--ts)) 100%, var(--ts) 100%, 0 var(--tl));
+	background:var(--color-1);
+}
+
+.tree > .branch::after{
+	left: 50%;
+	top: calc(-3 * var(--unit));
+	width: calc(10 * var(--unit));
+	height: calc(10 * var(--unit));
+	border-radius: 50%;
+	background-color: var(--color-1);
+	transform: translateX(-50%);
+}
+
+.tree > .lines{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.t-l-1::before{
+	left: calc(36 * var(--unit));
+	top: calc(20 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(11 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-2);
+	transform: rotate(22deg);
+}
+
+.t-l-1::after{
+	left: calc(26 * var(--unit));
+	top: calc(38 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(15 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-2);
+	transform: rotate(19deg);
+}
+
+.t-l-2::before{
+	left: calc(38 * var(--unit));
+	top: calc(43 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(9 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-2);
+	transform: rotate(10deg);
+}
+
+.t-l-2::after{
+	left: calc(21 * var(--unit));
+	top: calc(79 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(13 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-2);
+	transform: rotate(23deg);
+}
+
+.t-l-3::before{
+	left: calc(55 * var(--unit));
+	top: calc(43 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(15 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-3);
+	transform: rotate(-19deg);
+}
+
+.t-l-3::after{
+	left: calc(60 * var(--unit));
+	top: calc(72 * var(--unit));
+	width: calc(5 * var(--unit));
+	height: calc(16 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-3);
+	transform: rotate(-18deg);
+}
+
+.t-l-4::before{
+	left: calc(46 * var(--unit));
+	top: calc(97 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(13 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-3);
+	transform: rotate(-15deg);
+}
+
+.t-l-4::after{
+	left: calc(32 * var(--unit));
+	top: calc(122 * var(--unit));
+	width: calc(5 * var(--unit));
+	height: calc(10 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-3);
+	transform: rotate(18deg);
+}
+
+.t-l-5::before{
+	left: calc(54 * var(--unit));
+	top: calc(113 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(11 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-3);
+	transform: rotate(-15deg);
+}
+
+.t-l-5::after{
+	left: calc(69 * var(--unit));
+	top: calc(125 * var(--unit));
+	width: calc(5 * var(--unit));
+	height: calc(13 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-3);
+	transform: rotate(-28deg);
+}
+
+/* Mountains */
+
+.ice, .grading{
+	left: calc(174 * var(--unit));
+	top: calc(153 * var(--unit));
+	width: calc(474 * var(--unit));
+	height: calc(281 * var(--unit));
+}
+
+.ice{
+	clip-path:polygon(99.41% 24.76%, 99.81% 97%, 13.99% 97.35%, 14.38% 17.09%, 24.55% -0.41%, 39.55% 22%, 44.66% 14%, 48.77% 20.85%, 61.05% 1.88%, 63.34% 6.13%, 65.67% 3.76%, 69.58% 9.61%, 76.82% 9.95%, 83.7% 21.04%, 88.46% 13.92%, 91.14% 17.98%, 93.15% 15.23%);
+	background:#5ABEF3;
+}
+
+.grading > .grader{
+	left:0;
+	top:0;
+	width:100%;
+	height: 100%;
+}
+
+.g1::before{
+	left: calc(118 * var(--unit));
+	top: calc(-3 * var(--unit));
+	width: calc(105 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E9F4F6;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(42deg);
+	transform-origin: top left;
+}
+
+.g1::after{
+	left: calc(139 * var(--unit));
+	top: calc(56 * var(--unit));
+	width: calc(42 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E9F4F6;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(137deg);
+	transform-origin: right bottom;
+}
+
+.g2::before{
+	left: calc(212 * var(--unit));
+	top: calc(39 * var(--unit));
+	width: calc(36 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E9F4F6;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(42deg);
+	transform-origin: top left;
+}
+
+.g2::after{
+	left: calc(174 * var(--unit));
+	top: calc(39 * var(--unit));
+	width: calc(66 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B1E1FB;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(136deg);
+	transform-origin: right bottom;
+}
+
+.g3::before{
+	left: calc(215 * var(--unit));
+	top: calc(22 * var(--unit));
+	width: calc(43 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E5F2FF;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(136deg);
+	transform-origin: right bottom;
+}
+
+.g3::after{
+	left: calc(290 * var(--unit));
+	top: calc(4 * var(--unit));
+	width: calc(29 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E6F2FD;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(46deg);
+	transform-origin: top left;
+}
+
+.g4::before{
+	left: calc(280 * var(--unit));
+	top: calc(10 * var(--unit));
+	width: calc(17 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E5F4FC;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(132deg);
+	transform-origin: right bottom;
+}
+
+.g4::after{
+	left: calc(311 * var(--unit));
+	top: calc(10 * var(--unit));
+	width: calc(93 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B1E3FD;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(44deg);
+	transform-origin: top left;
+}
+
+.g5::before{
+	left: calc(311 * var(--unit));
+	top: calc(10 * var(--unit));
+	width: calc(35 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E3F5F8;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(44deg);
+	transform-origin: top left;
+}
+
+.g5::after{
+	left: calc(362 * var(--unit));
+	top: calc(26 * var(--unit));
+	width: calc(45 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B0E2FC;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(44deg);
+	transform-origin: top left;
+}
+
+.g6::before{
+	left: calc(362 * var(--unit));
+	top: calc(26 * var(--unit));
+	width: calc(33 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E7F2FB;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(44deg);
+	transform-origin: top left;
+}
+
+.g6::after{
+	left: calc(418 * var(--unit));
+	top: calc(79 * var(--unit));
+	width: calc(41 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B0E2FD;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(47deg);
+	transform-origin: top left;
+}
+
+.g7::before{
+	left: calc(420 * var(--unit));
+	top: calc(37 * var(--unit));
+	width: calc(26 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E6F5FA;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(44deg);
+	transform-origin: top left;
+}
+
+.g7::after{
+	left: calc(411 * var(--unit));
+	top: calc(41 * var(--unit));
+	width: calc(17 * var(--unit));
+	height: calc(10 * var(--unit));
+	background-color: #E1F5FF;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(135deg);
+	transform-origin: right bottom;
+}
+
+.g8::before{
+	left: calc(441 * var(--unit));
+	top: calc(39 * var(--unit));
+	width: calc(51 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E8F2FA;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(43deg);
+	transform-origin: top left;
+}
+
+.g8::after{
+	left: calc(154 * var(--unit));
+	top: calc(99 * var(--unit));
+	width: calc(54 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E6F5FA;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(40deg);
+	transform-origin: top left;
+}
+
+.g9::before{
+	left: calc(222 * var(--unit));
+	top: calc(75 * var(--unit));
+	width: calc(32 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B1E3FC;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(47deg);
+	transform-origin: top left;
+}
+
+.g9::after{
+	left: calc(238 * var(--unit));
+	top: calc(117 * var(--unit));
+	width: calc(58 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B1E3FD;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(49deg);
+	transform-origin: top left;
+}
+
+.g10::before{
+	left: calc(307 * var(--unit));
+	top: calc(65 * var(--unit));
+	width: calc(26 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B3E3FE;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(129deg);
+	transform-origin: top left;
+}
+
+.g10::after{
+	left: calc(293 * var(--unit));
+	top: calc(60 * var(--unit));
+	width: calc(26 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E4F4FB;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(1deg);
+	transform-origin: top left;
+}
+
+.ice > .clip-1{
+	left: calc(35 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(221 * var(--unit));
+	height: calc(197 * var(--unit));
+	background-color:#B1E3FD;
+	clip-path: polygon(93.55% 60.57%, 83.34% 61.58%, 74.8% 69.59%, 53.55% 52.06%, 47.6% 57.07%, 29.37% 56.57%, 40.59% 43.05%, 39.93% 0.47%, 10.14% -2.06%, 3% 66%, 8% 82%, 26% 90%, 65.14% 94%, 83.8% 94.01%, 100.58% 76.51%);
+}
+
+.ice > .clip-2{
+	left: calc(0 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(471 * var(--unit));
+	height: calc(153 * var(--unit));
+	background-color:#97D8FB;
+	clip-path: polygon(0px 100%, 76.92% 99%, 71.55% 68.62%, 81.43% 64.69%, 89.82% 90.91%, 100% 100%, 100% 0px, 0px 0px);
+}
+
+.ice > .clip-3{
+	right: calc(30 * var(--unit));
+	top: calc(39 * var(--unit));
+	width: calc(168 * var(--unit));
+	height: calc(137 * var(--unit));
+	background-color:#78CEFB;
+	clip-path: polygon(28% 99.28%, 26.24% 78.28%, 13.5% 61.8%, 13.5% 43.6%, 6.46% 30.08%, 15.85% 23.88%, 28.39% 20.88%, 32.41% 4.6%, 57.22% 28.07%, 54.78% 17.28%, 66.74% 17.28%, 73.04% 4.6%, 74.17% 29.4%, 73.58% 14.92%, 98.83% 47.48%, 84.74% 76.44%, 61.84% 51.84%, 43.65% 52.29%, 58.95% 77.68%, 42.82% 100.72%);
+}
+
+.ice > .clip-4{
+	right: calc(0 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(143 * var(--unit));
+	height: calc(106 * var(--unit));
+	background-color:#B1E3FD;
+}
+
+/* Hills */
+
+.hill-1{
+	left: calc(38 * var(--unit));
+	top: calc(102 * var(--unit));
+	width: calc(213 * var(--unit));
+	height: calc(357 * var(--unit));
+	background-color:#6E4CDD;
+	clip-path: polygon(0 2.22%, 28.87% 0.3%, 35.26% 1%, 50.82% 4.88%, 58.60% 9.78%, 108% 100%, 0 100%);
+}
+
+.hill-2{
+	left: calc(71 * var(--unit));
+	top: calc(166 * var(--unit));
+	width: calc(201 * var(--unit));
+	height: calc(291 * var(--unit));
+	background-color:#7966E9;
+	clip-path:polygon(0px 2.22%, 49.48% 0.3%, 56.36% -0.02%, 75.35% 4.88%, 84.61% 10.12%, 145.79% 98.65%, 0px 100%);
+}
+
+.hill-3{
+	left: calc(140 * var(--unit));
+	top: calc(201 * var(--unit));
+	width: calc(143 * var(--unit));
+	height: calc(251 * var(--unit));
+	background-color: #613CDE;
+	border-radius: calc(15 * var(--unit));
+	transform: skewX(23deg);
+}
+
+.hill-4{
+	left: calc(223 * var(--unit));
+	top: calc(261 * var(--unit));
+	width: calc(94 * var(--unit));
+	height: calc(130 * var(--unit));
+	background-color:#6E4CDD;
+	border-radius: calc(9 * var(--unit));
+	transform: skewX(26deg);
+}
+
+.hill-5{
+	left: calc(152 * var(--unit));
+	top: calc(261 * var(--unit));
+	width: calc(94 * var(--unit));
+	height: calc(130 * var(--unit));
+	background-color:#4E31C3;
+	border-radius: calc(12 * var(--unit));
+	transform: skewX(23deg);
+}
+
+.hill-6{
+	left: calc(209 * var(--unit));
+	top: calc(321 * var(--unit));
+	width: calc(94 * var(--unit));
+	height: calc(94 * var(--unit));
+	background-color:#4D31C3;
+	border-radius: 50%;
+}
+
+.hill-7{
+	left: calc(283 * var(--unit));
+	top: calc(303 * var(--unit));
+	width: calc(94 * var(--unit));
+	height: calc(130 * var(--unit));
+	background-color: #6D4CDA;
+	border-radius: calc(10 * var(--unit));
+	transform: skewX(34deg);
+	border: calc(15 * var(--unit)) solid #613CDE;
+}
+
+.hill-8{
+	right: calc(-15 * var(--unit));
+	top: calc(307 * var(--unit));
+	width: calc(71 * var(--unit));
+	height: calc(148 * var(--unit));
+	background-color: #4E31C3;
+	border-radius: calc(9 * var(--unit));
+	transform: skewX(-29deg);
+}
+
+.hill-9{
+	right: calc(-33 * var(--unit));
+	top: calc(255 * var(--unit));
+	width: calc(71 * var(--unit));
+	height: calc(148 * var(--unit));
+	background-color: #462F9A;
+	transform: skewX(-29deg);
+}
+
+.hill-10{
+	right: calc(-31 * var(--unit));
+	top: calc(183 * var(--unit));
+	width: calc(71 * var(--unit));
+	height: calc(193 * var(--unit));
+	background-color: #4E31C3;
+	transform: skewX(-31deg);
+}
+
+.hill-11{
+	right: calc(31 * var(--unit));
+	top: calc(258 * var(--unit));
+	width: calc(71 * var(--unit));
+	height: calc(148 * var(--unit));
+	background-color: #7966E9;
+	border-radius: calc(9 * var(--unit));
+	transform: skewX(-36deg);
+}
+
+.hill-12{
+	right: calc(91 * var(--unit));
+	top: calc(314 * var(--unit));
+	width: calc(71 * var(--unit));
+	height: calc(148 * var(--unit));
+	background-color: #7966E9;
+	border-radius: calc(9 * var(--unit));
+	transform: skewX(-36deg);
+}
+
+.hill-taken,
+.hill-taken-2,
+.cclouds{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.hill-taken-2::before{
+	left: calc(69 * var(--unit));
+	top: calc(89 * var(--unit));
+	width: calc(38 * var(--unit));
+	height: calc(268 * var(--unit));
+	background-color: #4F2FC3;
+	border-radius: calc(15 * var(--unit));
+	transform: skewX(6deg);
+}
+
+.hill-taken::before{
+	left: calc(120 * var(--unit));
+	top: calc(134 * var(--unit));
+	width: calc(38 * var(--unit));
+	height: calc(268 * var(--unit));
+	background-color: #4528ad;
+	border-radius: calc(12 * var(--unit));
+	transform: skewX(15deg);
+}
+
+.hill-taken-2::after{
+	left: calc(103 * var(--unit));
+	top: calc(196 * var(--unit));
+	width: calc(38 * var(--unit));
+	height: calc(268 * var(--unit));
+	background-color: #462F9A;
+	border-radius: calc(12 * var(--unit));
+	transform: skewX(11deg);
+}
+
+.hill-taken::after{
+	left: calc(0 * var(--unit));
+	top: calc(176 * var(--unit));
+	width: calc(60 * var(--unit));
+	height: calc(268 * var(--unit));
+	background-color: #4B34A0;
+	border-radius: calc(12 * var(--unit));
+	transform: skewX(-10deg);
+}
+
+/* Clouds */
+.cclouds{
+	animation:clouds-fly ease-out 20s 1s forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes clouds-fly{
+	to{
+		transform:translateX(50%);
+	}
+}
+
+.cclouds div{
+	color:white;
+	height: calc(13 * var(--unit));
+	background-color:currentColor;
+}
+
+.cclouds .cloud-1{
+	right: calc(83 * var(--unit));
+	top: calc(111 * var(--unit));
+	width: calc(114 * var(--unit));
+	border-radius: calc(12 * var(--unit));
+}
+
+.cclouds .cloud-1::before{
+	left: calc(17 * var(--unit));
+	top: calc(-16 * var(--unit));
+	width: calc(44 * var(--unit));
+	height: calc(22 * var(--unit));
+	background-color: currentColor;
+	border-radius: calc(25 * var(--unit)) calc(25 * var(--unit)) 0 0;
+}
+
+.cclouds .cloud-1::after{
+	left: calc(41 * var(--unit));
+	top: calc(-28 * var(--unit));
+	width: calc(61 * var(--unit));
+	height: calc(33 * var(--unit));
+	background-color: currentColor;
+	border-radius: calc(55 * var(--unit)) calc(55 * var(--unit)) 0 0;
+}
+
+.cclouds .cloud-2{
+	right: calc(-5 * var(--unit));
+	top: calc(49 * var(--unit));
+	width: calc(128 * var(--unit));
+	border-radius: calc(12 * var(--unit));
+}
+
+.cclouds .cloud-2::before{
+	left: calc(75 * var(--unit));
+	top: calc(-15 * var(--unit));
+	width: calc(44 * var(--unit));
+	height: calc(22 * var(--unit));
+	background-color: currentColor;
+	border-radius: calc(25 * var(--unit)) calc(25 * var(--unit)) 0 0;
+}
+
+.cclouds .cloud-2::after{
+	left: calc(30 * var(--unit));
+	top: calc(-28 * var(--unit));
+	width: calc(61 * var(--unit));
+	height: calc(33 * var(--unit));
+	background-color: currentColor;
+	border-radius: calc(55 * var(--unit)) calc(55 * var(--unit)) 0 0;
+}
+
+/* Home */
+.split > div.home{
+	left: calc(279 * var(--unit));
+	top: calc(372 * var(--unit));
+	width: calc(240 * var(--unit));
+	height: calc(102 * var(--unit));
+}
+
+.home{
+	--color-1:#E86600;
+	--color-2:#84391E;
+	--color-3:#EF8B1E;
+	--color-4:#E66700;
+	--color-5:#F58721;
+	--color-6:#9E5036;
+	--color-7:#F0B67A;
+	--color-8:#E66600;
+	--color-9:#9A4F36;
+}
+
+.home > .sides, .home > .front, .home > .shader, .home > .h-edge{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.home > .sides::before{
+	left: calc(14 * var(--unit));
+	top: calc(60 * var(--unit));
+	width: calc(73 * var(--unit));
+	height: calc(41 * var(--unit));
+	background-color:var(--color-1);
+}
+
+.home > .sides::after{
+	left: calc(40 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(76 * var(--unit));
+	height: calc(64 * var(--unit));
+	background-color: var(--color-2);
+	transform: skewX(-55deg);
+	border-radius: calc(2 * var(--unit)) 0 0 calc(8 * var(--unit));
+}
+
+.home > .front::before{
+	left: calc(82 * var(--unit));
+	top: calc(8 * var(--unit));
+	width: calc(148 * var(--unit));
+	height: calc(80 * var(--unit));
+	clip-path: polygon(50% 0%, 100% 65%, 100% 100%, 0 100%, 0% 68%);
+	background-color: var(--color-3);
+	background-image: 
+	linear-gradient(var(--color-4),var(--color-4)),
+	linear-gradient(var(--color-5),var(--color-5)),
+		linear-gradient(var(--color-6),var(--color-6)),
+		linear-gradient(var(--color-6),var(--color-6)),
+		linear-gradient(var(--color-7),var(--color-7));
+	background-size: 
+		calc(15 * var(--unit)) calc(18 * var(--unit)),
+		calc(31 * var(--unit)) calc(18 * var(--unit)),
+		calc(22 * var(--unit)) calc(33 * var(--unit)),
+		calc(17 * var(--unit)) calc(24 * var(--unit)),
+		calc(102 * var(--unit)) calc(44 * var(--unit));
+	background-position: 
+		calc(108 * var(--unit)) calc(46 * var(--unit)),
+		calc(100 * var(--unit)) calc(46 * var(--unit)),
+		calc(63 * var(--unit)) calc(44 * var(--unit)),
+		calc(29 * var(--unit)) calc(52 * var(--unit)),
+		calc(45 * var(--unit)) calc(41 * var(--unit));
+}
+
+.home > .front::after{
+	left: calc(123 * var(--unit));
+	top: calc(24 * var(--unit));
+	width: calc(10 * var(--unit));
+	height: calc(37 * var(--unit));
+	border-radius: calc(20 * var(--unit));
+	background-color:var(--color-8);
+}
+
+.home > .shader::before{
+	left: calc(157 * var(--unit));
+	top: calc(-2 * var(--unit));
+	width: calc(105 * var(--unit));
+	height: calc(10 * var(--unit));
+	background-color: var(--color-9);
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(36deg);
+	transform-origin: top left;
+}
+
+.home > .shader::after{
+	left: calc(164 * var(--unit));
+	top: calc(6 * var(--unit));
+	width: calc(109 * var(--unit));
+	height: calc(10 * var(--unit));
+	background-color: var(--color-9);
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(145deg);
+	transform-origin: top left;
+}
+
+.home > .h-edge::after{
+	left: calc(136 * var(--unit));
+	top: calc(44 * var(--unit));
+	width: calc(41 * var(--unit));
+	height: calc(10 * var(--unit));
+	border-radius: calc(20 * var(--unit));
+	background-color: var(--color-8);
+}
+
+.home > .h-edge::before{
+	left: calc(106 * var(--unit));
+	top: calc(51 * var(--unit));
+	width: calc(26 * var(--unit));
+	height: calc(10 * var(--unit));
+	border-radius: calc(20 * var(--unit));
+	background-color: var(--color-8);
+}
+
+.home::after{
+	left: calc(148 * var(--unit));
+	top: calc(19 * var(--unit));
+	width: calc(17 * var(--unit));
+	height: calc(17 * var(--unit));
+	background-color: var(--color-8);
+	border-radius:50%
+}
+
+.split > div.home.home-2{
+	left: calc(162 * var(--unit));
+	top: calc(371 * var(--unit));
+	transform: scale(0.81) rotateY(-180deg);
+	transform-origin:50% 50%;
+	filter: saturate(77%);
+}
+
+.split-2{
+	animation:day-progress ease-in-out 10s 1s forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes day-progress{
+	from{
+		filter:sepia(0%);
+	}
+	to{
+		filter:sepia(100%);
+	}
+}
+
+.smoke-1{
+	clip-path: polygon(-100% 0%, 200% 0%, 200% 112%, 75% 100%, 25% 100%, -100.61% 102.86%);
+}
+
+.smoke-2{
+	clip-path: polygon(96.97% 99.82%, 2.60% 100.89%, -110.29% 106.09%, -112.8% -0.3%, 162.23% -2.23%, 155.53% 68.01%, 100.1% 72.48%);
+}
+
+.smoke-pre{
+	position: absolute;
+	left:calc(var(--x) * var(--unit));
+	bottom:calc(var(--y) * var(--unit));
+	width:calc(10 * var(--unit));
+	height:calc(10 * var(--unit));
+	background-color:#FCD7F7;
+	border-radius: 50%;
+	transform:translate(-50%, 0);
+	transform-origin:bottom center;
+	animation:spread ease-out 5.6s calc(var(--d) * 0.014s) forwards;
+	animation-play-state: var(--playing, running);
+}
+
+.smoke-rest{
+	position: absolute;
+	left:calc(var(--x) * var(--unit));
+	bottom:calc(var(--y) * var(--unit));
+	width:calc(10 * var(--unit));
+	height:calc(10 * var(--unit));
+	background-color:white;
+	border-radius: 50%;
+	transform:translate(-50%, 0);
+	transform-origin:bottom center;
+	animation:spread-fade ease 4.8s calc(var(--d) * 0.009s) forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes spread{
+	20%{
+		width:calc(var(--size) * var(--unit));
+		height:calc(var(--size) * var(--unit));
+	}
+
+	to{
+		width:calc(var(--size) * var(--unit));
+		height:calc(var(--size) * var(--unit));
+		transform:translate(calc(-50% + var(--shift) * 1%), calc(-350 * var(--unit)));
+	}
+}
+
+@keyframes spread-fade{
+	20%{
+		width:calc(var(--size) * var(--unit));
+		height:calc(var(--size) * var(--unit));
+	}
+
+	40%{
+		width:calc(var(--size) * var(--unit));
+		height:calc(var(--size) * var(--unit));
+	}
+
+	67%{
+		width: 0;
+		height:0;
+	}
+
+	to{
+		width: 0;
+		height:0;
+		transform:translate(calc(-50% + var(--shift) * 1%), calc(-250 * var(--unit)));
+	}
+}
\ No newline at end of file
diff --git a/css-sceneindustrialization-and-climate-change/license.txt b/css-sceneindustrialization-and-climate-change/license.txt
new file mode 100644
index 0000000..0570e46
--- /dev/null
+++ b/css-sceneindustrialization-and-climate-change/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Shadow Scientist (https://codepen.io/shadow-scientist/pen/PoGvrQv)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-sceneindustrialization-and-climate-change/src/index.html b/css-sceneindustrialization-and-climate-change/src/index.html
new file mode 100644
index 0000000..edcd7c3
--- /dev/null
+++ b/css-sceneindustrialization-and-climate-change/src/index.html
@@ -0,0 +1,362 @@
+<main>
+<div class="split split-1 industrialization">
+
+	<div class="A">
+		<div class="bgmask a0"></div>
+		<div class="bgmask a1"></div>
+	</div>
+
+	<div class="Clouds">
+		<div class="cloud type-1"></div>
+		<div class="cloud type-1"></div>
+		<div class="cloud type-1"></div>
+		<div class="cloud type-2"></div>
+		<div class="cloud type-2"></div>
+	</div>
+
+	<div class="B">
+		<div class="bgmask xb1"></div>
+		<div class="bgmask b2"></div>
+		<div class="bgmask b3"></div>
+		<div class="bgmask b4"></div>
+		<div class="bgmask b5"></div>
+		<div class="bgmask b6"></div>
+
+		<div class="smoke-2 smoke-2-pre"></div>
+		<div class="smoke-1 smoke-1-pre"></div>
+		<div class="smoke-2 smoke-2-rest"></div>
+		<div class="smoke-1 smoke-1-rest"></div>
+
+		<div class="stove-1">
+			<div class="side-2">
+				<div class="ss-1"></div>
+				<div class="ss-2"></div>
+			</div>
+			<div class="side-1"></div>
+			<div class="head"></div>
+		</div>
+
+		<div class="stove-1 stove-clone">
+			<div class="side-2">
+				<div class="ss-1"></div>
+				<div class="ss-2"></div>
+			</div>
+			<div class="side-1"></div>
+			<div class="head"></div>
+		</div>
+		
+		<div class="thing-1">
+			<div class="x1"></div>
+			<div class="x2"></div>
+			<div class="x3"></div>
+			<div class="x4"></div>
+			<div class="x5"></div>
+
+			<div class="x8"></div>
+			<div class="x7"></div>
+			<div class="x6"></div>
+
+			<div class="clone-1">
+				<div class="x8"></div>
+				<div class="x7"></div>
+				<div class="x6"></div>
+			</div>
+
+			<div class="x9"></div>
+			<div class="x10"></div>
+		</div>
+
+		<div class="green"></div>
+
+		<div class="shadows">
+			<div class="s1"></div>
+			<div class="s2"></div>
+		</div>	
+
+		<div class="tower-1">
+			<div class="x1"></div>
+			<div class="cap"></div>
+			<div class="x2"></div>
+		</div>
+
+		<div class="tower-1 clone">
+			<div class="x1"></div>
+			<div class="cap"></div>
+			<div class="x2"></div>
+		</div>
+
+		<div class="nuclear-energy-processor">
+			<div class="top-shield"></div>
+			<div class="top-shield clone-layer"></div>
+			<div class="nphook">
+				<div class="np2"></div>
+				<div class="np1"></div>
+			</div>
+			<div class="wiring"></div>
+		</div>
+
+		<div class="energy-processing-unit">
+			<div class="edge"></div>
+			<div class="clamp"></div>
+		</div>
+
+		<div class="a9"></div>
+		<div class="a7"></div>
+		<div class="a6"></div>
+		<div class="a8"></div>
+		<div class="a5"></div>
+		<div class="a4"></div>
+	</div>
+
+	<div class="B1">
+		<div class="wire"></div>
+		<div class="wire clone-1"></div>
+		<div class="wire clone-2"></div>
+		<div class="wire clone-3"></div>
+	</div>
+
+	<div class="E">
+		<div class="tank">
+			<div class="top-outline"></div>
+			<div class="disc"></div>
+			<div class="cap"></div>
+			<div class="hook"></div>
+		</div>
+	</div>
+
+	<div class="C">
+		<div class="power-post clone-2">
+			<div class="x1"></div>
+			<div class="x2"></div>
+			<div class="x3"></div>
+		</div>
+
+		<div class="power-post clone-1">
+			<div class="x1"></div>
+			<div class="x2"></div>
+			<div class="x3"></div>
+		</div>
+
+		<div class="power-post">
+			<div class="x1"></div>
+			<div class="x2"></div>
+			<div class="x3"></div>
+		</div>
+
+		<div class="power-post clone-3">
+			<div class="x1"></div>
+			<div class="x2"></div>
+			<div class="x3"></div>
+		</div>
+	</div>
+
+	<div class="D">
+		<div class="wire"></div>
+		<div class="wire clone-1"></div>
+		<div class="wire clone-2"></div>
+		<div class="wire clone-3"></div>
+	</div>
+
+	<div class="F">
+		<div class="tank tank-clone">
+			<div class="top-outline"></div>
+			<div class="disc"></div>
+			<div class="cap"></div>
+			<div class="hook"></div>
+		</div>
+	</div>
+
+	<div class="G"></div>
+</div>
+<div class="split split-2 climate-change">
+
+	<div class="cclouds">
+		<div class="cloud-1"></div>
+		<div class="cloud-2"></div>
+	</div>
+
+	<div class="mountain">
+		<div class="ice">
+			<div class="clip-2"></div>
+			<div class="clip-4"></div>
+			<div class="clip-3"></div>
+			<div class="clip-1"></div>
+		</div>
+		<div class="grading">
+			<div class="grader g1"></div>
+			<div class="grader g2"></div>
+			<div class="grader g3"></div>
+			<div class="grader g4"></div>
+			<div class="grader g5"></div>
+			<div class="grader g6"></div>
+			<div class="grader g7"></div>
+			<div class="grader g8"></div>
+			<div class="grader g9"></div>
+			<div class="grader g10"></div>
+		</div>
+	</div>
+
+	<div class="hills">
+		<div class="hill-2"></div>
+		<div class="hill-7"></div>
+		<div class="hill-4"></div>
+		<div class="hill-3"></div>
+		<div class="hill-5"></div>
+		<div class="hill-6"></div>
+		<div class="hill-1">
+			<div class="hill-taken"></div>
+			<div class="hill-taken-2"></div>
+		</div>
+
+		<div class="hill-12"></div>
+		<div class="hill-11"></div>
+		<div class="hill-10"></div>
+		<div class="hill-9"></div>
+		<div class="hill-8"></div>
+	</div>
+
+	<div class="trees">
+		<div class="tree tree-4">
+			<div class="branch"></div>
+		</div>
+
+		<div class="tree tree-5">
+			<div class="branch"></div>
+		</div>
+
+		<div class="tree tree-6">
+			<div class="branch"></div>
+		</div>
+
+		<div class="tree tree-7">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+			<div class="lines t-l-1"></div>
+			<div class="lines t-l-2"></div>
+		</div>
+
+		<div class="tree tree-10">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-12">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-13">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-11">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-9">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+			<div class="lines t-l-1"></div>
+			<div class="lines t-l-2"></div>
+		</div>
+
+		<div class="tree tree-8">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+			<div class="lines t-l-1"></div>
+			<div class="lines t-l-2"></div>
+			<div class="lines t-l-3"></div>
+			<div class="lines t-l-4"></div>
+			<div class="lines t-l-5"></div>
+		</div>
+
+		<div class="tree tree-2">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+			<div class="lines t-l-1"></div>
+			<div class="lines t-l-2"></div>
+		</div>
+
+		<div class="tree tree-3">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+			<div class="lines t-l-1"></div>
+			<div class="lines t-l-2"></div>
+		</div>
+
+		<div class="tree tree-17">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-19">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-18">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-14">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-15">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree tree-16">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+		</div>
+
+		<div class="tree">
+			<div class="branch"></div>
+			<div class="branch t-b-2"></div>
+			<div class="branch t-b-3"></div>
+			<div class="lines t-l-1"></div>
+			<div class="lines t-l-2"></div>
+			<div class="lines t-l-3"></div>
+			<div class="lines t-l-4"></div>
+			<div class="lines t-l-5"></div>
+		</div>
+	</div>	
+
+	<div class="home home-2">
+		<div class="sides"></div>
+		<div class="front"></div>
+		<div class="shader"></div>
+		<div class="h-edge"></div>
+	</div>
+
+	<div class="home">
+		<div class="sides"></div>
+		<div class="front"></div>
+		<div class="shader"></div>
+		<div class="h-edge"></div>
+	</div>
+
+	<div class="ground"></div>
+</div>
+</main>
\ No newline at end of file
diff --git a/css-sceneindustrialization-and-climate-change/src/script.js b/css-sceneindustrialization-and-climate-change/src/script.js
new file mode 100644
index 0000000..509ab22
--- /dev/null
+++ b/css-sceneindustrialization-and-climate-change/src/script.js
@@ -0,0 +1,97 @@
+var container1, container2, timeout, docelem;
+
+function addSmoke(){
+	if(docelem.style.getPropertyValue("--playing") == "running"){
+		spreadSmoke();
+	}
+	else{
+		console.log("paused");
+	}
+	timeout = setTimeout(addSmoke, random(180, 200));
+}
+
+function spreadSmoke(){
+		var p = new Point(
+			random(10, 130), 
+			random(-110, -10), 
+			random(20, 130), 
+			random(1, 100), 
+			random(-60, 70), "smoke-pre");
+
+		var q = new Point(
+			random(10, 130), 
+			random(-110, -10), 
+			random(40, 80), 
+			random(1, 100), 
+			random(-60, 70), "smoke-pre");
+
+		var r = new Point(
+			random(30, 90), 
+			random(-110, -10), 
+			random(40, 60), 
+			random(1, 90), 
+			random(-50, 50), "smoke-rest");
+	
+		var s = new Point(
+			random(30, 90), 
+			random(-110, -10), 
+			random(20, 40), 
+			random(1, 90), 
+			random(-55, 55), "smoke-rest");
+
+		container1.appendChild(p.create());
+		container2.appendChild(q.create());
+		container3.appendChild(r.create());
+		container4.appendChild(s.create());
+}
+
+function random(min, max){
+	return int = min + Math.random() * (max - min), Math.round(int);
+}
+
+class Point{
+	constructor(cx, cy, sizemax, delay, shift, cls){
+		this.x = cx;
+		this.y = cy;
+		this.sizeMax = sizemax;
+		this.class = cls;
+		this.delay = delay;
+		this.shift = shift;
+		this.element;
+	}
+
+	create(){
+		var elem = document.createElement("div");
+		elem.className = this.class;
+		elem.style.setProperty("--x", this.x);
+		elem.style.setProperty("--y", this.y);
+		elem.style.setProperty("--d", this.delay);
+		elem.style.setProperty("--size", this.sizeMax);
+		elem.style.setProperty("--shift", this.shift);
+		elem.addEventListener("animationend", function(){
+			this.parentElement.removeChild(this);
+		});
+		this.element = elem;
+		return elem;
+	}
+}
+
+window.addEventListener("load", () => {
+	container1 = document.querySelector(".smoke-1-pre"),
+	container2 = document.querySelector(".smoke-2-pre"),
+	container3 = document.querySelector(".smoke-1-rest"),
+	container4 = document.querySelector(".smoke-2-rest"),
+	docelem = document.documentElement;
+
+	if(timeout) clearTimeout(timeout);
+	docelem.style.setProperty("--playing", "running");
+	addSmoke();
+});
+
+window.addEventListener("focus", () => {
+	if(docelem) docelem.style.setProperty("--playing", "running");
+});
+
+window.addEventListener("blur", () => {
+	if(docelem) docelem.style.setProperty("--playing", "paused");
+});
\ No newline at end of file
diff --git a/css-sceneindustrialization-and-climate-change/src/style.css b/css-sceneindustrialization-and-climate-change/src/style.css
new file mode 100644
index 0000000..93df00f
--- /dev/null
+++ b/css-sceneindustrialization-and-climate-change/src/style.css
@@ -0,0 +1,2824 @@
+/*
+	CSS Scene - Industrialization and Climate Change
+	Best viewed in Full mode.
+
+	Tested on the latest versions of Firefox, Chrome, and Edge,
+	Best performance on Chrome.
+*/
+
+/*
+div{
+	box-shadow:0 0 0 1px red;
+}
+*/
+
+:root{
+	--playing:running;
+	--split-expansion:54%; /* 56.5, 60% */
+	--split-tilt:12%; /* 17, 28% */
+
+	/* responsiveness */
+	--size: 15;
+	--upp: 1vmin;
+	--unit: calc((var(--size) / 100) * var(--upp));
+
+	--box-zoom:7.8; /* 7.5? */
+	--box-width:calc(24 * var(--box-zoom) * var(--upp));
+	--box-height:calc(12 * var(--box-zoom) * var(--upp));
+}
+
+/* reset */
+*, *::before, *::after{
+	box-sizing: border-box;
+}
+
+*::before, *::after{
+	content:"";
+	position:absolute;
+	background-repeat: no-repeat;
+	display: block;
+}
+
+.isolate{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.split > div > div{
+	position: absolute;
+	display: block;
+	background-repeat: no-repeat;
+}
+
+.split > div > div > div,
+.split > div > div > div > div{
+	position: absolute;
+	display: block;
+	background-repeat: no-repeat;
+}
+
+html, body{
+	position:relative;
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+	padding:0;
+	margin:0;
+	overflow:hidden;
+}
+
+body::before{
+	content:"";
+	position:fixed;
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+	background-image:linear-gradient(55deg, #03080D 40%, #010407);
+	background-size: 100% 100%;
+	display: block;
+}
+
+main{
+	position:absolute;
+	left:50%;
+	top:50%;
+	width:var(--box-width);
+	height:var(--box-height);
+	transform:translate(-50%, -50%);
+	border-radius:calc(7 * var(--unit));
+	overflow: hidden;
+	display: block;
+	box-shadow:0 0 0 2px rgba(0,0,0,0);
+	opacity:0;
+	animation:show ease 0.4s 0.5s forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes show{
+	to{
+		opacity:1;
+	}
+}
+
+.split{
+	position: absolute;
+	top:0;
+	width:var(--split-expansion);
+	height:100%;
+	display:block;
+	overflow:hidden;
+}
+
+.split > div{
+	position:absolute;
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+	display: block;
+	background-repeat: no-repeat;
+}
+
+.split-1{
+	left:0;
+	clip-path: polygon(0 0, 99% 0, calc(99% - var(--split-tilt)) 100%, 0 100%);
+}
+
+.split-1::before{
+	content:"";
+	position:absolute;
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+
+	background-image:linear-gradient(#FDD6BE 0%, #ef9af1 50%, #A75BBC 67%);
+	background-position:0 0;
+	background-size:100% 100%;
+	background-repeat: no-repeat;
+	display:block;
+}
+
+.split-2{
+	right:0;
+	clip-path: polygon(calc(var(--split-tilt) + 0.4%) 0, 100% 0, 100% 100%, 0 100%);
+	width:52%;
+}
+
+/* Industrialization */
+
+.industrialization .bgmask{
+	left:0;
+	top:0;
+	width:100%
+}
+
+.industrialization .A > .a0::before{
+	left:calc(4 * var(--unit));
+	top:calc(266 * var(--unit));
+	width:calc(42 * var(--unit));
+	height:calc(123 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(4 * var(--unit));
+}
+
+.industrialization .A > .a0::after{
+	left:calc(8 * var(--unit));
+	top:calc(369 * var(--unit));
+	width:calc(34 * var(--unit));
+	height:calc(14 * var(--unit));
+	background-color:#7A7BFE;
+	border-radius:calc(6 * var(--unit));
+}
+
+.industrialization .A > .a1::before{
+	left:calc(22 * var(--unit));
+	top:calc(369 * var(--unit));
+	width:calc(34 * var(--unit));
+	height:calc(14 * var(--unit));
+	background-color:#4D51FB;
+	border-radius:calc(6 * var(--unit));
+}
+
+.industrialization .A > .a1::after{
+	left:calc(50 * var(--unit));
+	top:calc(369 * var(--unit));
+	width:calc(56 * var(--unit));
+	height:calc(14 * var(--unit));
+	background-color:#7A7BFF;
+	border-radius:0 calc(6 * var(--unit)) 0 0;
+}
+
+.industrialization .B > .xb1::before{
+	left:calc(66 * var(--unit));
+	top:calc(378 * var(--unit));
+	width:calc(13 * var(--unit));
+	height:calc(62 * var(--unit));
+	background-color:#D2CAFE;
+	border-radius:0 calc(6 * var(--unit)) 0 0;
+}
+
+.industrialization .B > .xb1::after{
+	left:calc(77 * var(--unit));
+	top:calc(239 * var(--unit));
+	width:calc(28 * var(--unit));
+	height:calc(44 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(5 * var(--unit));
+}
+
+.industrialization .B > .b2::before{
+	left:calc(65 * var(--unit));
+	top:calc(276 * var(--unit));
+	width:calc(55 * var(--unit));
+	height:calc(67 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(5 * var(--unit));
+}
+
+.industrialization .B > .b2::after{
+	left:calc(301 * var(--unit));
+	top:calc(276 * var(--unit));
+	width:calc(33 * var(--unit));
+	height:calc(37 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(5 * var(--unit));
+}
+
+.industrialization .B > .b3::before{
+	left:calc(467 * var(--unit));
+	top:calc(326 * var(--unit));
+	width:calc(33 * var(--unit));
+	height:calc(36 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(5 * var(--unit));
+}
+
+.industrialization .B > .b3::after{
+	left:calc(482 * var(--unit));
+	top:calc(309 * var(--unit));
+	width:calc(10 * var(--unit));
+	height:calc(24 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(5 * var(--unit));
+}
+
+.industrialization .B > .b4::before{
+	left:calc(511 * var(--unit));
+	top:calc(335 * var(--unit));
+	width:calc(15 * var(--unit));
+	height:calc(32 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(7 * var(--unit));
+}
+
+.industrialization .B > .b4::after{
+	left:calc(523 * var(--unit));
+	top:calc(273 * var(--unit));
+	width:calc(38 * var(--unit));
+	height:calc(81 * var(--unit));
+	background-color:#D37CFC;
+	border-radius:calc(5 * var(--unit));
+}
+
+.industrialization .B > .b5::before{
+	left:calc(466 * var(--unit));
+	top:calc(365 * var(--unit));
+	width:calc(79 * var(--unit));
+	height:calc(44 * var(--unit));
+	background-color:#9D9CFC;
+}
+
+.industrialization .B > .b5::after{
+	left:calc(518 * var(--unit));
+	top:calc(364 * var(--unit));
+	width:calc(48 * var(--unit));
+	height:calc(45 * var(--unit));
+	background-color:#EAE5FC;
+	border-radius:calc(6 * var(--unit)) calc(6 * var(--unit)) 0 0;
+}
+
+.industrialization .B > .b6::before{
+	left:calc(518 * var(--unit));
+	top:calc(364 * var(--unit));
+	width:calc(11 * var(--unit));
+	height:calc(45 * var(--unit));
+	background-color:#D1CCFB;
+	border-radius:calc(6 * var(--unit)) calc(6 * var(--unit)) 0 0;
+}
+
+.industrialization .B > .b6::after{
+	left:calc(466 * var(--unit));
+	top:calc(355 * var(--unit));
+	width:calc(51 * var(--unit));
+	height:calc(10 * var(--unit));
+	background-color:#4D52FD;
+	border-radius:0 calc(6 * var(--unit)) 0 0;
+	box-shadow:calc(36 * var(--unit)) 0 0 0 #787CFD;
+}
+
+.industrialization .B > .thing-1{
+	left:calc(262 * var(--unit));
+	top:calc(335 * var(--unit));
+	width:calc(212 * var(--unit));
+	height:calc(123 * var(--unit));
+	background-image:linear-gradient(#FA379E,#FA379E);
+	background-position:calc(29 * var(--unit)) calc(52 * var(--unit));
+	background-size:calc(178 * var(--unit)) calc(70 * var(--unit));
+	overflow:hidden;
+}
+
+.thing-1 .x1{
+	left:0;
+	top:0;
+	width:calc(195 * var(--unit));
+	height:calc(7 * var(--unit));
+	background-color:#340994;
+	border-radius:0 calc(4 * var(--unit)) 0 0;
+}
+
+.thing-1 .x2{
+	left:0;
+	top:calc(7 * var(--unit));
+	width:calc(200 * var(--unit));
+	height:calc(46 * var(--unit));
+	background-color:#4082FD;
+	border-radius:0 calc(5 * var(--unit)) 0 0;
+}
+
+.thing-1 .x3{
+	left:calc(191 * var(--unit));
+	top:calc(7 * var(--unit));
+	width:calc(10 * var(--unit));
+	height:calc(46 * var(--unit));
+	background-color:#6C9FFF;
+	border-radius:calc(4 * var(--unit)) calc(6 * var(--unit)) 0 0;
+}
+
+.thing-1 .x4{
+	left:calc(202 * var(--unit));
+	top:calc(47 * var(--unit));
+	width:calc(9 * var(--unit));
+	height:calc(46 * var(--unit));
+	background-color:#FF6CA6;
+	border-radius:calc(4 * var(--unit));
+}
+
+.thing-1 .x5{
+	left:0;
+	top:calc(47 * var(--unit));
+	width:calc(211 * var(--unit));
+	height:calc(9 * var(--unit));
+	background-color:#FEAAD3;
+	border-radius:calc(4 * var(--unit));
+}
+
+.thing-1 .x6{
+	left:calc(75 * var(--unit));
+	top:calc(14 * var(--unit));
+	width:calc(90 * var(--unit));
+	height:calc(14 * var(--unit));
+	background-color:#42ACFF;
+	border-radius:calc(8 * var(--unit)) calc(2 * var(--unit)) calc(8 * var(--unit)) calc(2 * var(--unit));
+	transform:skewX(40deg);
+}
+
+.thing-1 .x7{
+	left:calc(76 * var(--unit));
+	top:calc(17 * var(--unit));
+	width:calc(84 * var(--unit));
+	height:calc(18 * var(--unit));
+	background-color:rgba(0,0,0,0.23);
+	border-radius:calc(4 * var(--unit));
+}
+
+.thing-1 .x8{
+	left:calc(76 * var(--unit));
+	top:calc(20 * var(--unit));
+	width:calc(7.6 * var(--unit));
+	height:calc(19 * var(--unit));
+	color:#1B56CA;
+	background-color:currentColor;
+	border-radius:calc(4 * var(--unit));
+	box-shadow:
+		calc(75 * var(--unit)) 0 0 0 currentColor,
+		calc(60 * var(--unit)) 0 0 0 currentColor,
+		calc(45 * var(--unit)) 0 0 0 currentColor,
+		calc(30 * var(--unit)) 0 0 0 currentColor,
+		calc(15 * var(--unit)) 0 0 0 currentColor;
+}
+
+.thing-1 .clone-1{
+	left:calc(-114 * var(--unit));
+	top:0;
+}
+
+.thing-1 .x9{
+	left:calc(56 * var(--unit));
+	top:calc(70 * var(--unit));
+	width:calc(135 * var(--unit));
+	height:calc(9 * var(--unit));
+	background-color:#E5207D;
+	border-radius:calc(5 * var(--unit));
+	box-shadow:0 calc(17 * var(--unit)) 0 0 #E5207D;
+}
+
+.thing-1 .x10{
+	left:calc(61 * var(--unit));
+	top:calc(70 * var(--unit));
+	width:calc(13 * var(--unit));
+	height:calc(9 * var(--unit));
+	color:rgba(0,0,0,0.23); 
+	background-color:currentColor;
+	border-radius:calc(5 * var(--unit));
+	box-shadow:
+		calc(112 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(96 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(80 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(64 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(48 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(32 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(16 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+		calc(0 * var(--unit)) calc(17 * var(--unit)) 0 0 currentColor,
+
+		calc(112 * var(--unit)) 0 0 0 currentColor,
+		calc(96 * var(--unit)) 0 0 0 currentColor,
+		calc(80 * var(--unit)) 0 0 0 currentColor,
+		calc(64 * var(--unit)) 0 0 0 currentColor,
+		calc(48 * var(--unit)) 0 0 0 currentColor,
+		calc(32 * var(--unit)) 0 0 0 currentColor,
+		calc(16 * var(--unit)) 0 0 0 currentColor;
+}
+
+.tower-1{
+	left:calc(39 * var(--unit));
+	top:calc(98 * var(--unit));
+	width:calc(32 * var(--unit));
+	height:calc(391 * var(--unit));
+	background-image:
+		linear-gradient(#A9BCFD, #A9BCFD),
+		linear-gradient(#C6DDFB, #C6DDFB),
+		linear-gradient(#E5ECF8, #E5ECF8);
+	background-size: 
+		calc(14 * var(--unit)) 100%,
+		calc(22 * var(--unit)) 100%,
+		calc(32 * var(--unit)) 100%;
+	background-position: 0 calc(5 * var(--unit));
+	overflow: visible;
+}
+
+.tower-1::before{
+	left:0;
+	top:10%;
+	width:100%;
+	height:90%;
+	background-image: 
+		linear-gradient(#D83470, #D83470),
+		linear-gradient(#FB6D69, #FB6D69),
+		linear-gradient(#FBB6B0, #FBB6B0),
+
+		linear-gradient(#D83470, #D83470),
+		linear-gradient(#FB6D69, #FB6D69),
+		linear-gradient(#FBB6B0, #FBB6B0),
+
+		linear-gradient(#A9BCFD, #A9BCFD),
+		linear-gradient(#C6DDFB, #C6DDFB),
+		linear-gradient(#E5ECF8, #E5ECF8);
+	
+	background-size:
+		calc(14 * var(--unit)) calc(80 * var(--unit)),
+		calc(22 * var(--unit)) calc(80 * var(--unit)),
+		calc(32 * var(--unit)) calc(80 * var(--unit)),
+
+		calc(14 * var(--unit)) calc(80 * var(--unit)),
+		calc(22 * var(--unit)) calc(80 * var(--unit)),
+		calc(32 * var(--unit)) calc(80 * var(--unit)),
+
+		calc(14 * var(--unit)) 100%,
+		calc(22 * var(--unit)) 100%,
+		calc(32 * var(--unit)) 100%;
+
+	background-position:
+		0 calc(25 * var(--unit)),
+		0 calc(25 * var(--unit)),
+		0 calc(25 * var(--unit)),
+		
+		0 calc(185 * var(--unit)),
+		0 calc(185 * var(--unit)),
+		0 calc(185 * var(--unit)),
+
+		0 0,
+		0 0,
+		0 0;
+}
+
+.tower-1::after{
+	left:calc(-4 * var(--unit));
+	top:calc(143 * var(--unit));
+	width:calc(28 * var(--unit));
+	height:calc(9 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	color:#350995;
+	--shadow:#2361C9;
+	background-color:currentColor;
+	box-shadow:
+	0 calc(-80 * var(--unit)) 0 0 currentColor,
+	calc(12 * var(--unit)) calc(-80 * var(--unit)) 0 0 var(--shadow),
+
+	0 calc(160 * var(--unit)) 0 0 currentColor,
+	calc(12 * var(--unit)) calc(160 * var(--unit)) 0 0 var(--shadow),
+
+	0 calc(80 * var(--unit)) 0 0 currentColor,
+	calc(12 * var(--unit)) calc(80 * var(--unit)) 0 0 var(--shadow),
+
+	0 0 0 0 currentColor,
+	calc(12 * var(--unit)) 0 0 0 var(--shadow);
+}
+
+.tower-1 .cap{
+	position:absolute;
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+	overflow: hidden;
+}
+
+.tower-1 .cap::before{
+	left:50%;
+	bottom:0;
+	width:calc(50 * var(--unit));
+	height:calc(35 * var(--unit));
+	transform: translateX(-50%);
+	background-color:#CBDBF8;
+	border-radius:50%;
+}
+
+.tower-1 .cap::after{
+	left:0;
+	top:0;
+	width:calc(32 * var(--unit));
+	height:calc(13 * var(--unit));
+	background-color:#A6BDFC;
+	border-radius:50%;
+}
+
+.tower-1 .x1{
+	left:50%;
+	top:calc(379 * var(--unit));
+	width:calc(50 * var(--unit));
+	height:calc(16 * var(--unit));
+	background-color: #2361C9;
+	border-radius:50%;
+	transform: translateX(-50%);
+	box-shadow:0 calc(5 * var(--unit)) 0 0 #083397;
+}
+
+.tower-1.clone{
+	left:calc(259 * var(--unit));
+	top:calc(169 * var(--unit));
+	transform: scale(0.74);
+	transform-origin: left top;
+}
+
+.tower-1 .x2{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+	overflow: hidden;
+	border-radius:0 calc(7 * var(--unit)) 0 0;
+}
+
+.tower-1 .x2::before{
+	left:calc(14 * var(--unit));
+	top:calc(0 * var(--unit));
+	width:calc(23 * var(--unit));
+	height:calc(16 * var(--unit));
+	background-color:#C7DBFA;
+	border-radius:40% 0 0 15%;
+}
+
+.tower-1 .x2::after{
+	right:0;
+	top:calc(7 * var(--unit));
+	width:calc(10 * var(--unit));
+	height:calc(19 * var(--unit));
+	background-color:#E3EDFB;
+	border-radius:calc(10 * var(--unit));
+}
+
+.green{
+	left:calc(281 * var(--unit));
+	top:calc(457 * var(--unit));
+	width:calc(336 * var(--unit));
+	height:calc(61 * var(--unit));
+	background-color:#39D278;
+
+	background-image: 
+		radial-gradient(ellipse at center, #D54B97 50%, transparent calc(50% + 1px)),
+		radial-gradient(ellipse at center, #04AD95 72%, transparent calc(72% + 1px)),
+		linear-gradient(44deg, transparent 50%, #04AD95 calc(50% + 1px)),
+		linear-gradient(20deg, #04AD95 50%, transparent calc(50% + 1px));
+
+	background-size: 
+		calc(184 * var(--unit)) calc(52 * var(--unit)),
+		calc(175 * var(--unit)) calc(52 * var(--unit)), 
+		calc(163 * var(--unit)) calc(33 * var(--unit)), 
+		calc(163 * var(--unit)) calc(33 * var(--unit));
+	
+	background-position: 
+		calc(16 * var(--unit)) calc(36 * var(--unit)),
+		calc(16 * var(--unit)) calc(36 * var(--unit)),
+		calc(26 * var(--unit)) 0,
+		calc(126 * var(--unit)) 0;
+}
+
+.power-post{
+	left:calc(204 * var(--unit));
+	top:calc(425 * var(--unit));
+	width:calc(171 * var(--unit));
+	height:calc(210 * var(--unit));
+}
+
+.power-post .x1{
+	left:0;
+	top:calc(9 * var(--unit));
+	width:calc(171 * var(--unit));
+	height:calc(11 * var(--unit));
+	background:#FD824A;
+	border-radius:calc(6 * var(--unit));
+}
+
+.power-post .x1::before{
+	left:0;
+	top:0;
+	width:calc(91 * var(--unit));
+	height:calc(11 * var(--unit));
+	background:#f77336;
+	transform:rotate(22deg);
+	transform-origin: left top;
+	border-radius:calc(6 * var(--unit));
+}
+
+.power-post .x1::after{
+	right:0;
+	top:0;
+	width:calc(91 * var(--unit));
+	height:calc(11 * var(--unit));
+	background:#FFA449;
+	background-image: linear-gradient(22deg, transparent 50%,#FD824A calc(50% + 1px));
+	background-size:calc(35 * var(--unit)) 100%;
+	background-position:top right;
+	background-repeat: no-repeat;
+	transform:rotate(-22deg);
+	transform-origin: right top;
+	border-radius:calc(6 * var(--unit));
+}
+
+.power-post::before{
+	left:calc(44 * var(--unit));
+	top:calc(1 * var(--unit));
+	width:calc(31 * var(--unit));
+	height:calc(10 * var(--unit));
+	color:#3632C1;
+	--shadow:#1F178B;
+	background-color: currentColor;
+	border-radius:calc(6 * var(--unit));
+	box-shadow: 
+		calc(73 * var(--unit)) 0 0 0 currentColor,
+		calc(65 * var(--unit)) 0 0 0 var(--shadow),
+		0 0 0 0 currentColor,
+		calc(-8 * var(--unit)) 0 0 0 var(--shadow);
+}
+
+.power-post::after{
+	left:calc(68 * var(--unit));
+	top:calc(41 * var(--unit));
+	width:calc(21 * var(--unit));
+	height:calc(14 * var(--unit));
+	color:#1F178B;
+	--shadow:#3632C1;
+	background-color: currentColor;
+	border-radius:calc(11 * var(--unit));
+	box-shadow: calc(10 * var(--unit)) 0 0 0 var(--shadow);
+}
+
+.power-post .x2{
+	left:calc(56 * var(--unit));
+	top:calc(50 * var(--unit));
+	width:calc(37 * var(--unit));
+	height:calc(20 * var(--unit));
+	border-radius:calc(12 * var(--unit));
+	background-color:#787CFF;
+	box-shadow: calc(18 * var(--unit)) 0 0 0 #9F9BFF;
+	z-index:5;
+}
+
+.power-post .x2::before{
+	left: calc(10 * var(--unit));
+	top: calc(56 * var(--unit));
+	width: calc(19 * var(--unit));
+	height: calc(10 * var(--unit));
+	border-radius: calc(13 * var(--unit));
+	color:#1F178B;
+	background-color: currentColor;
+	transform: rotate(10deg);
+	box-shadow:
+		calc(9 * var(--unit)) calc(84 * var(--unit)) 0 0 currentColor,
+		calc(5 * var(--unit)) calc(56 * var(--unit)) 0 0 currentColor,
+		calc(1 * var(--unit)) calc(28 * var(--unit)) 0 0 currentColor;
+}
+
+.power-post .x2::after{
+	right: calc(-4 * var(--unit));
+	top: calc(56 * var(--unit));
+	width: calc(19 * var(--unit));
+	height: calc(10 * var(--unit));
+	border-radius: calc(13 * var(--unit));
+	color:#1F178B;
+	background-color: currentColor;
+	transform: rotate(-10deg);
+	box-shadow:
+		calc(-11 * var(--unit)) calc(84 * var(--unit)) 0 0 currentColor,
+		calc(-7 * var(--unit)) calc(56 * var(--unit)) 0 0 currentColor,
+		calc(-3 * var(--unit)) calc(28 * var(--unit)) 0 0 currentColor;
+}
+
+.power-post .x3{
+	left:calc(62 * var(--unit));
+	top:calc(60 * var(--unit));
+	width:calc(9 * var(--unit));
+	height:calc(158 * var(--unit));
+	border-radius:calc(6 * var(--unit));
+	background-color:#1F178B;
+	transform: rotate(4deg);
+}
+
+.power-post .x3::before{
+	left:calc(11 * var(--unit));
+	top:0;
+	width:100%;
+	height:105%;
+	border-radius: inherit;
+	background-color: inherit;
+	transform: rotate(-3deg);
+	transform-origin: top center;
+}
+
+.power-post .x3::after{
+	left:calc(21 * var(--unit));
+	top:0;
+	width:100%;
+	height:105%;
+	border-radius: inherit;
+	background-color: #3630C1;
+	transform: rotate(-7deg);
+	transform-origin: top center;
+}
+
+.power-post.clone-1{
+	left:calc(91 * var(--unit));
+	top:calc(429 * var(--unit));
+	transform:scale(0.686);
+	transform-origin:left top;
+}
+
+.power-post.clone-1 .x3{
+	width:calc(10 * var(--unit));
+}
+
+.power-post.clone-2{
+	left:calc(17 * var(--unit));
+	top:calc(433 * var(--unit));
+	transform:scale(0.45);
+	transform-origin:left top;
+}
+
+.power-post.clone-2 .x3{
+	width:calc(11 * var(--unit));
+}
+
+.power-post.clone-3{
+	left:calc(392 * var(--unit));
+	top:calc(419 * var(--unit));
+	transform:scale(1.5);
+	transform-origin:left top;
+}
+
+.power-post.clone-3 .x3{
+	width:calc(11 * var(--unit));
+}
+
+.D, .B1{
+	clip-path: polygon(0% calc(441 * var(--unit)), 100% calc(441 * var(--unit)), 100% 100%, 0% 100%);
+	--wire-color:#5B11C7;
+	z-index:5;
+}
+
+.B1{
+	--wire-color:#712CEF;
+	z-index:0;
+}
+
+.wire{
+	left: calc(195 * var(--unit));
+	top: calc(206 * var(--unit));
+	width: calc(227 * var(--unit));
+	height: calc(313 * var(--unit));
+	border-radius:50%;
+	border:calc(8 * var(--unit)) solid var(--wire-color);
+	box-shadow: 0 0 0 10px rgba(0,0,0,0);
+}
+
+.wire.clone-1{
+	left: calc(78 * var(--unit));
+	top: calc(205 * var(--unit));
+	width: calc(160 * var(--unit));
+	height: calc(288 * var(--unit));
+	border-width:calc(6 * var(--unit));
+}
+
+.B1 .wire.clone-1{
+	left: calc(155 * var(--unit));
+	top: calc(188 * var(--unit));
+	width: calc(251 * var(--unit));
+	height: calc(309 * var(--unit));
+}
+
+.wire.clone-2{
+	left: calc(4 * var(--unit));
+	top: calc(202 * var(--unit));
+	width: calc(118 * var(--unit));
+	height: calc(276 * var(--unit));
+	border-width: calc(5 * var(--unit));
+}
+
+.B1 .wire.clone-2{
+	left: calc(59 * var(--unit));
+	top: calc(202 * var(--unit));
+	width: calc(165 * var(--unit));
+	height: calc(276 * var(--unit));
+}
+
+.wire.clone-3{
+	left: calc(385 * var(--unit));
+	top: calc(205 * var(--unit));
+	width: calc(337 * var(--unit));
+	height: calc(346 * var(--unit));
+	border-width: calc(11 * var(--unit));
+}
+
+.B1 .wire.clone-3{
+	left: calc(324 * var(--unit));
+	top: calc(196 * var(--unit));
+	width: calc(405 * var(--unit));
+	height: calc(317 * var(--unit));
+}
+
+.shadows,
+.shadows > div{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.shadows{
+	background-image: linear-gradient(#D54B97,#D54B97);
+	background-size:calc(123 * var(--unit)) calc(14 * var(--unit));
+	background-position:calc(325 * var(--unit)) calc(509 * var(--unit));
+}
+
+.shadows::before{
+	left: calc(11 * var(--unit));
+	top: calc(474 * var(--unit));
+	width: calc(59 * var(--unit));
+	height: calc(26 * var(--unit));
+	background-color:#B52A74;
+	border-radius: 46%;
+}
+
+.shadows::after{
+	left: calc(26 * var(--unit));
+	top: calc(476 * var(--unit));
+	width: calc(280 * var(--unit));
+	height: calc(72 * var(--unit));
+	background-color:#B52A74;
+	border-radius: 50%;
+}
+
+.s1::before{
+	left: calc(230 * var(--unit));
+	top: calc(506 * var(--unit));
+	width: calc(73 * var(--unit));
+	height: calc(43 * var(--unit));
+	background-color:#B52A74;
+	border-radius: 50%;
+}
+
+.s1::after{
+    left: calc(267 * var(--unit));
+    top: calc(506 * var(--unit));
+    width: calc(67 * var(--unit));
+    height: calc(26 * var(--unit));
+    background-color: #B52A74;
+    border-radius: 0 calc(28 * var(--unit)) calc(42 * var(--unit)) 0;
+    transform: rotate(-11deg);
+}
+
+.s2::before{
+	left: calc(0 * var(--unit));
+	top: calc(524 * var(--unit));
+	width: calc(54 * var(--unit));
+	height: calc(6 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	transform: rotate(-4deg);
+	transform-origin: right center;
+	background-color: #B52A74;
+	box-shadow: calc(1 * var(--unit)) calc(7 * var(--unit)) 0 0 #B52A74;
+}
+
+.s2::after{
+    left: calc(25 * var(--unit));
+    top: calc(529 * var(--unit));
+    width: calc(12 * var(--unit));
+    height: calc(4 * var(--unit));
+    border-radius: calc(6 * var(--unit));
+    transform: rotate(48deg);
+    transform-origin: center;
+	background-color: #b52a74;
+	box-shadow:calc(-6 * var(--unit)) calc(10 * var(--unit)) 0 0 #B52A74;
+}
+
+.E{
+	z-index:0;
+}
+
+.tank{
+    left: calc(231 * var(--unit));
+    top: calc(532 * var(--unit));
+    width: calc(264 * var(--unit));
+	height: calc(119 * var(--unit));
+	
+	background-image:
+		linear-gradient(-65deg, transparent 50%, #1451B9 50%), 
+		linear-gradient(#2261CA,#2261CA), 
+		linear-gradient(#4082FD,#4082FD);
+
+	background-size:
+		calc(60 * var(--unit)) calc(65 * var(--unit)),
+		calc(173 * var(--unit)) calc(65 * var(--unit)),
+		calc(264 * var(--unit)) calc(65 * var(--unit));
+
+	background-position:
+		calc(0 * var(--unit)) calc(42 * var(--unit)),
+		calc(0 * var(--unit)) calc(42 * var(--unit)),
+		calc(0 * var(--unit)) calc(42 * var(--unit));
+}
+
+.tank .top-outline{
+    left: 0;
+    top: 0;
+    width: calc(264 * var(--unit));
+    height: calc(79 * var(--unit));
+	border-radius:50%;
+	background-color:#007398;
+	border:10px solid #0E349C;
+	border-right-color: #2261CA;
+	overflow:hidden;
+}
+
+.tank .top-outline::before{
+	left:50%;
+	top:calc(7 * var(--unit));
+	width:99%;
+	height:100%;
+	border-radius:inherit;
+	transform:translateX(-50%);
+	background-color:#00BD99;
+}
+
+.tank .disc{
+	left: calc(82 * var(--unit));
+    top: calc(24 * var(--unit));
+    width: calc(103 * var(--unit));
+	height: calc(31 * var(--unit));
+	border-radius: 50%;
+	background-color:#9E9CFD;
+	box-shadow: 0 calc(7 * var(--unit)) 0 0 #017399;
+	overflow:hidden;
+}
+
+.tank .disc::before{
+	width:100%;
+	height:100%;
+	left:0;
+	top:calc(-9 * var(--unit));
+	border-radius: 40%;
+	background-color:#D1CCFC;
+}
+
+.tank .disc::after{
+	width:calc(21 * var(--unit));
+	height:calc(8 * var(--unit));
+	left:calc(38 * var(--unit));
+	top:calc(5 * var(--unit));
+	border-radius:calc(4 * var(--unit));
+	background-color:#9E9CFD;
+}
+
+.tank::before{
+	width:calc(19 * var(--unit));
+	height:calc(66 * var(--unit));
+	left:calc(-19 * var(--unit));
+	top:calc(32 * var(--unit));
+	background-color:#1F178B;
+}
+
+.tank .hook,
+.tank .cap{
+	left:calc(4 * var(--unit));
+	top:calc(-6 * var(--unit));
+}
+
+.tank .hook::before,
+.tank .cap::after{
+	width: calc(152 * var(--unit));
+	height: calc(18 * var(--unit));
+	left: calc(-14 * var(--unit));
+	background-color: #3F39E1;
+	border-radius: calc(12 * var(--unit)) calc(12 * var(--unit)) calc(32 * var(--unit)) 0;
+}
+
+.tank .hook::before{
+	top: calc(21 * var(--unit));
+	transform: rotate(-9deg) skewX(51deg);
+}
+
+.tank .cap::after{
+	top: calc(25 * var(--unit));
+	transform: rotate(-11deg) skewX(51deg);
+}
+
+.tank .hook::after{
+	width: calc(29 * var(--unit));
+	height: calc(11 * var(--unit));
+	left: calc(-26 * var(--unit));
+	top: calc(39 * var(--unit));
+	background-color: #2C26C1;
+	transform: rotate(34deg);
+	border-radius: calc(7 * var(--unit));
+}
+
+.tank .cap::before{
+	width: calc(18 * var(--unit));
+	height: calc(18 * var(--unit));
+	left: calc(116 * var(--unit));
+	top: calc(21 * var(--unit));
+	background-color: #1F1788;
+	border-radius: calc(7 * var(--unit));
+}
+
+.tank.tank-clone{
+	left: calc(-109 * var(--unit));
+	top: calc(570 * var(--unit));
+	transform: scale(1.2);
+	transform-origin: left top;
+}
+
+.B > .a4, .B > .a5, .B > .a6, .B > .a7, .B > .a8, .B > .a9{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.a9::after {
+    right: calc(129 * var(--unit));
+    top: calc(415 * var(--unit));
+    width: calc(71 * var(--unit));
+    height: calc(44 * var(--unit));
+    background-color: #518DFE;
+}
+
+.a9::before {
+    right: calc(129 * var(--unit));
+    top: calc(412 * var(--unit));
+    width: calc(60 * var(--unit));
+    height: calc(44 * var(--unit));
+    background-color: #518DFE;
+}
+
+.a7::after {
+    right: calc(58 * var(--unit));
+    top: calc(393 * var(--unit));
+    width: calc(79 * var(--unit));
+    height: calc(42 * var(--unit));
+    background-color: #4082FD;
+    transform: skewX(55deg);
+}
+
+.a7::before {
+    right: calc(118 * var(--unit));
+    top: calc(400 * var(--unit));
+    width: calc(60 * var(--unit));
+    height: calc(44 * var(--unit));
+    background-color: #518DFE;
+}
+
+.a6::after {
+    right: calc(126 * var(--unit));
+    top: calc(426 * var(--unit));
+    width: calc(79 * var(--unit));
+    height: calc(55 * var(--unit));
+    background-color: #518DFE;
+}
+
+.a6::before {
+    right: calc(119 * var(--unit));
+    top: calc(426 * var(--unit));
+    width: calc(8 * var(--unit));
+    height: calc(46 * var(--unit));
+    background-color: #77BAFF;
+}
+
+.a8::after {
+    right: calc(159 * var(--unit));
+    top: calc(407 * var(--unit));
+    width: calc(59 * var(--unit));
+    height: calc(9 * var(--unit));
+    border-radius: calc(12 * var(--unit));
+    transform: rotate(-33deg);
+    transform-origin: top center;
+    background-color: #0D329A;
+}
+
+.a8::before {
+    right: calc(112 * var(--unit));
+    top: calc(406 * var(--unit));
+    width: calc(59 * var(--unit));
+    height: calc(9 * var(--unit));
+    border-radius: calc(12 * var(--unit));
+    transform: rotate(30deg);
+    transform-origin: top center;
+    background-color: #0D329A;
+}
+
+.a5::after {
+    right: calc(2 * var(--unit));
+    top: calc(426 * var(--unit));
+    width: calc(117 * var(--unit));
+    height: calc(46 * var(--unit));
+    background-color: #9DC8FD;
+}
+
+.a5::before {
+    right: calc(71 * var(--unit));
+    top: calc(472 * var(--unit));
+    width: calc(117 * var(--unit));
+    height: calc(46 * var(--unit));
+    background-color: #4F52FF;
+    border-radius: calc(12 * var(--unit));
+    transform: skewX(27deg);
+}
+
+.a4::after {
+    right: calc(173 * var(--unit));
+    top: calc(497 * var(--unit));
+    width: calc(90 * var(--unit));
+    height: calc(99 * var(--unit));
+    transform: skewY(19deg);
+    background-color: #777BFE;
+    border-radius: calc(5 * var(--unit));
+}
+
+.a4::before {
+	right: calc(172 * var(--unit));
+	top: calc(483 * var(--unit));
+	width: calc(90 * var(--unit));
+	height: calc(99 * var(--unit));
+	background-color: white;
+    border-radius: calc(5 * var(--unit));
+}
+
+.industrialization .B{
+	background-image:
+		linear-gradient(#D1CCFC,#D1CCFC),
+
+		linear-gradient(#D37CFC, #D37CFC),
+		linear-gradient(#D37CFC, #D37CFC),
+		linear-gradient(#D37CFC, #D37CFC),
+		linear-gradient(#D37CFC, #D37CFC),
+		linear-gradient(#D37CFC, #D37CFC),
+
+		linear-gradient(#D54B97, #D54B97),
+		linear-gradient(#38D376, #38D376),
+		linear-gradient(#EAE5FE, #EAE5FE),
+		linear-gradient(#9E9CFD, #9E9CFD);
+
+	background-position:
+		calc(509 * var(--unit)) calc(512 * var(--unit)),
+
+		calc(530 * var(--unit)) calc(309 * var(--unit)),
+		calc(490 * var(--unit)) calc(352 * var(--unit)),
+		calc(255 * var(--unit)) calc(304 * var(--unit)),
+		calc(17 * var(--unit)) calc(296 * var(--unit)),
+		calc(59 * var(--unit)) calc(251 * var(--unit)),
+
+		0 calc(451 * var(--unit)), /* 457 => 451 */
+		0 calc(440 * var(--unit)),
+		calc(72 * var(--unit)) calc(378 * var(--unit)),
+		0 calc(378 * var(--unit));
+	
+	background-size:
+		calc(129 * var(--unit)) calc(99 * var(--unit)),
+
+		calc(117 * var(--unit)) calc(100 * var(--unit)),
+		calc(40 * var(--unit)) calc(27 * var(--unit)),
+		calc(83 * var(--unit)) calc(44 * var(--unit)),
+		calc(146 * var(--unit)) calc(66 * var(--unit)),
+		calc(25 * var(--unit)) calc(66 * var(--unit)),
+
+		100% 50%,
+		28% 50%,
+		30% 50%,
+		30% 50%;
+}
+
+.energy-processing-unit{
+	left: calc(226 * var(--unit));
+	top: calc(442 * var(--unit));
+	width: calc(104 * var(--unit));
+	height: calc(90 * var(--unit));
+	display: none;
+}
+
+.nuclear-energy-processor{
+	left: calc(93 * var(--unit));
+	top: calc(286 * var(--unit));
+	width: calc(204 * var(--unit));
+	height: calc(227 * var(--unit));
+}
+
+.nuclear-energy-processor::before{
+	left: 50%;
+	top: calc(196 * var(--unit));
+	width: calc(225 * var(--unit));
+	height: calc(44 * var(--unit));
+	border-radius: 50%;
+	background-color: #0A329A;
+	transform: translateX(-50%);
+}
+
+.nuclear-energy-processor::after{
+	left: 0;
+	bottom: 0;
+	width: calc(204 * var(--unit));
+	height: calc(142 * var(--unit));
+	border-radius: 0% 0% 50% 50% / 0% 0% 12% 12%;
+	background-image:
+		linear-gradient(#6D9FFD,#6D9FFD),
+
+		linear-gradient(#2261CA,#2261CA),
+		linear-gradient(#4082FD,#4082FD),
+		linear-gradient(#6D9FFD,#6D9FFD),
+		linear-gradient(#7BB9FA,#7BB9FA),
+		linear-gradient(#9DC8FD,#9DC8FD);
+
+	background-size:
+		calc(58 * var(--unit)) 100%,
+
+		calc(48 * var(--unit)) 100%,
+		calc(72 * var(--unit)) 100%,
+		calc(112 * var(--unit)) 100%,
+		calc(123 * var(--unit)) 46%,
+		100% 100%;
+
+	background-position: 
+		calc(108 * var(--unit)) calc(70 * var(--unit)),
+
+		0 0,
+		0 0,
+		0 0,
+		0 0,
+		0 0;
+}
+
+.top-shield{
+	left: calc(5 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(194 * var(--unit));
+	height: calc(194 * var(--unit));
+	background-color:#46AEFD;
+	border-radius:50%;
+	border:calc(8 * var(--unit)) solid #44C5F9;
+	border-right-color: #98F2FF;
+	transform:rotate(-44deg);
+}
+
+.top-shield.clone-layer{
+	background-color:transparent;
+	border-color:transparent;
+	border-right-color: transparent;
+	transform:none;
+	overflow:hidden;
+}
+
+.top-shield.clone-layer::before{
+	left: calc(34 * var(--unit));
+	top: calc(-8 * var(--unit));
+	width: calc(167 * var(--unit));
+	height: calc(161 * var(--unit));
+	background-color: #56D8FB;
+	border-radius: 50%;
+}
+
+.top-shield.clone-layer::after{
+	left: calc(71 * var(--unit));
+	top: calc(27 * var(--unit));
+	width: calc(87 * var(--unit));
+	height: calc(82 * var(--unit));
+	background-color: white;
+	border-radius: 44% 50%;
+}
+
+.nuclear-energy-processor .nphook{
+	left: 50%;
+	top: calc(74 * var(--unit));
+	width: calc(210 * var(--unit));
+	height: calc(11 * var(--unit));
+	transform: translateX(-50%);
+}
+
+.nphook > div{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.nphook > div::before,
+.nphook > div::after{
+	border-radius: calc(7 * var(--unit));
+	top: calc(0 * var(--unit));
+	height:100%;
+}
+
+.nphook .np1::before{
+	left: calc(0 * var(--unit));
+	width: calc(50 * var(--unit));
+	background-color:#0D339B;
+}
+
+.nphook .np1::after{
+	left: calc(39 * var(--unit));
+	width: calc(42 * var(--unit));
+	background-color:#2261CA;
+}
+
+.nphook .np2::before{
+	left: calc(70 * var(--unit));
+	width: calc(67 * var(--unit));
+	background-color:#4082FD;
+}
+
+.nphook .np2::after{
+	left: calc(112 * var(--unit));
+	width: calc(98 * var(--unit));
+	background-color:#6D9FFD;
+}
+
+.energy-processing-unit .edge{
+	left: calc(-10 * var(--unit));
+	top: calc(-7 * var(--unit));
+	width: calc(114 * var(--unit));
+	height: calc(69 * var(--unit));
+	border-radius: 0 0 0 36%;
+	background-color: #9BC8FE;	
+}
+
+.nuclear-energy-processor .wiring{
+	left: calc(162 * var(--unit));
+	top: calc(100 * var(--unit));
+	width: calc(10 * var(--unit));
+	height: calc(18 * var(--unit));
+	border-radius: calc(9 * var(--unit));
+	background-color: #215EC7;
+	z-index: 1;
+	box-shadow: 
+		calc(5 * var(--unit)) calc(12 * var(--unit)) 0 0 #3B81FF,
+		calc(5 * var(--unit)) calc(21 * var(--unit)) 0 0 #3B81FF;
+}
+
+.energy-processing-unit .edge::after{
+	left: calc(17 * var(--unit));
+	top: calc(28 * var(--unit));
+	width: calc(58 * var(--unit));
+	height: calc(69 * var(--unit));
+	background-color: #4082FD;
+	border-radius: calc(9 * var(--unit));
+	transform: skewY(24deg);
+}
+
+.energy-processing-unit .clamp{
+	left: calc(60 * var(--unit));
+	top: calc(17 * var(--unit));
+	width: calc(45 * var(--unit));
+	height: calc(69 * var(--unit));
+	transform: skewY(-24deg);
+	background-color: #9CC7F8;
+	border-radius: calc(9 * var(--unit));
+}
+
+.stove-1{
+	left: calc(298 * var(--unit));
+	top: calc(201 * var(--unit));
+	width: calc(217 * var(--unit));
+	height: calc(264 * var(--unit));
+}
+
+.stove-2{
+	left: calc(138 * var(--unit));
+	top: calc(238 * var(--unit));
+	width: calc(134 * var(--unit));
+	height: calc(119 * var(--unit));
+}
+
+.stove-1 .head,
+.stove-1 .side-1,
+.stove-1 .side-2{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.stove-1 .head::before,
+.stove-1 .head::after{
+    left: calc(-5 * var(--unit));
+    top: calc(6 * var(--unit));
+    width: calc(180 * var(--unit));
+    height: calc(22 * var(--unit));
+	border-radius: 49% 49% 30% 30% / 92% 92% 20% 20%;
+	--color:#EAE5FE;
+	--clip:100%;
+    box-shadow: 0 calc(-12 * var(--unit)) 0 0 var(--color);
+    transform: rotate(0.6deg);
+}
+
+.stove-1 .head::after{
+	--color:#D1CBFE;
+	--clip:70%;
+	clip-path: polygon(0 -107%, var(--clip) -107%, calc(var(--clip) - 5%) 128%, 0% 128%);
+}
+
+.stove-1 .side-1::before{
+	right: calc(-81 * var(--unit));
+	top: calc(14 * var(--unit));
+	width: calc(150 * var(--unit));
+	height: calc(246 * var(--unit));
+	border-radius: 20% 0% 0% 60% / 35% 6% 0% 65%;
+	box-shadow: 
+		calc(-12 * var(--unit)) 0 0 0 #D3CAFD,
+		calc(-24 * var(--unit)) calc(-2 * var(--unit)) 0 0 var(--stove-color-4,white);
+	transform: rotate(-10deg);
+	transform-origin: left top;
+	clip-path:polygon(-44.22% -1.1%, 12.15% -4.04%, 76.69% 91.91%, 0% 100%);
+}
+
+.stove-1 .side-1::after{
+	left: calc(-114 * var(--unit));
+	top: calc(14 * var(--unit));
+	width: calc(150 * var(--unit));
+	height: calc(246 * var(--unit));
+	border-radius: 66% 34% 89% 11% / 0% 46% 54% 100%;
+	box-shadow: 
+		calc(24 * var(--unit)) calc(-12 * var(--unit)) 0 0 var(--stove-color-1, #4D52FD),
+		calc(12 * var(--unit)) 0 0 0 var(--stove-color-1, #4D52FD);
+	transform: rotate(16deg);
+	transform-origin: right top;
+	clip-path: polygon(calc(123 * var(--unit)) calc(-7 * var(--unit)), 127.45% 4.26%, 131.18% 84.74%, 68.39% 84.03%);
+}
+
+.stove-1::after{
+	left: calc(30 * var(--unit));
+	top: calc(58 * var(--unit));
+	width: calc(7 * var(--unit));
+	height: calc(13 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	color:#2413CF;
+	background-color: currentColor;
+	box-shadow:
+		calc(105 * var(--unit)) 0 0 0 currentColor, 
+		calc(91 * var(--unit)) 0 0 0 currentColor, 
+		calc(76 * var(--unit)) 0 0 0 currentColor, 
+		calc(61 * var(--unit)) 0 0 0 currentColor, 
+		calc(46 * var(--unit)) 0 0 0 currentColor, 
+		calc(31 * var(--unit)) 0 0 0 currentColor, 
+		calc(16 * var(--unit)) 0 0 0 currentColor;
+}
+
+.stove-1 .side-2{
+	clip-path:polygon(84.55% 67.5%, 70.46% 29.9%, 75.91% 4.44%, 42.28% calc(2 * var(--unit)), 4.09% calc(10 * var(--unit)), calc(20 * var(--unit)) 26%, 1.18% 55.63%, 0% 86%, 56.91% 83.56%);
+	background-color:var(--stove-color-3, #9D9CFD);
+	background-image: 
+		linear-gradient(var(--stove-color-4, #CECDFE),var(--stove-color-4, #CECDFE)),
+		linear-gradient(var(--stove-color-2, #787CFE),var(--stove-color-2, #787CFE));
+	background-size:
+	calc(123 * var(--unit)) 100%,
+	calc(80 * var(--unit)) 100%;
+	background-position:
+	right top,
+	0 0;
+}
+
+.stove-1 .side-2 .ss-1{
+	left: calc(121 * var(--unit));
+	top: calc(82 * var(--unit));
+	width: calc(55 * var(--unit));
+	height: calc(82 * var(--unit));
+	border-radius: 50%;
+	background-color:white;	
+}
+
+.stove-1 .side-2 .ss-2{
+	left: calc(121 * var(--unit));
+	top: calc(82 * var(--unit));
+	width: calc(55 * var(--unit));
+	height: calc(82 * var(--unit));
+}
+
+.stove-1 .side-2 .ss-1::before{
+	left: calc(-83 * var(--unit));
+	top: calc(-76 * var(--unit));
+	width: calc(33 * var(--unit));
+	height: calc(49 * var(--unit));
+	border-radius: calc(55 * var(--unit));
+	box-shadow: calc(-18 * var(--unit)) calc(-8 * var(--unit)) 0 0 var(--stove-color-1, #4D52FD);
+}
+
+.stove-1 .side-2 .ss-1::after{
+	left: calc(-27 * var(--unit));
+	top: calc(-78 * var(--unit));
+	width: calc(63 * var(--unit));
+	height: calc(54 * var(--unit));
+	border-radius: calc(76 * var(--unit));
+	box-shadow: calc(-3 * var(--unit)) calc(-11 * var(--unit)) 0 0 var(--stove-color-3, #9D9CFD);
+}
+
+.stove-1 .side-2 .ss-2::after{
+	left: calc(-104 * var(--unit));
+	top: calc(-78 * var(--unit));
+	width: calc(63 * var(--unit));
+	height: calc(54 * var(--unit));
+	border-radius: calc(76 * var(--unit));
+	box-shadow: calc(3 * var(--unit)) calc(-11 * var(--unit)) 0 0 var(--stove-color-3, #9D9CFD);
+}
+
+.stove-1.stove-clone{
+	left: calc(140 * var(--unit));
+	top: calc(238 * var(--unit));
+	transform:scale(0.8);
+	transform-origin:left top;
+	--stove-color-1:#2757CA;
+	--stove-color-2:#4977FD;
+	--stove-color-3:#7397FC;
+	--stove-color-4:#97ABFC;
+}
+
+.stove-1.stove-clone::after{
+	color:transparent;
+}
+
+.stove-1.stove-clone .head::after{
+	--color:#99AAFC;
+}
+
+.stove-1.stove-clone .head::before{
+	--color:#7495FD;
+}
+
+/* Clouds */
+.Clouds{
+	animation:clouds-move linear 64s forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes clouds-move{
+	to{
+		transform:translateX(100%);
+	}
+}
+
+.cloud{
+	opacity:0.2;	
+	color: white;
+	transform:scale(1);
+}
+
+.cloud.type-1{
+	width: calc(138 * var(--unit));
+	height: calc(21 * var(--unit));
+	background-color: currentColor;
+	border-radius: calc(27 * var(--unit));
+}
+
+.cloud.type-1::before{
+	left: calc(19 * var(--unit));
+	top: calc(-36 * var(--unit));
+	width: calc(70 * var(--unit));
+	height: calc(56 * var(--unit));
+	background-color: currentColor;
+	border-radius: 50%;
+}
+
+.cloud.type-1::after{
+	left: calc(58 * var(--unit));
+	top: calc(-17 * var(--unit));
+	width: calc(63 * var(--unit));
+	height: calc(33 * var(--unit));
+	background-color: currentColor;
+	border-radius: 50%;
+}
+
+.cloud.type-2{
+	width: calc(125 * var(--unit));
+	height: calc(15 * var(--unit));
+	background-color: currentColor;
+	border-radius: calc(27 * var(--unit));
+}
+
+.cloud.type-2::before{
+	left: calc(0 * var(--unit));
+	top: calc(-31 * var(--unit));
+	width: calc(70 * var(--unit));
+	height: calc(46 * var(--unit));
+	background-color: currentColor;
+	border-radius: 50%;
+}
+
+.cloud.type-2::after{
+	left: calc(46 * var(--unit));
+	top: calc(-18 * var(--unit));
+	width: calc(63 * var(--unit));
+	height: calc(33 * var(--unit));
+	background-color: currentColor;
+	border-radius: 50%;
+}
+
+.cloud:nth-child(1){
+	left: calc(460 * var(--unit));
+	top: calc(66 * var(--unit));
+}
+
+.cloud:nth-child(2){
+	left: calc(-28 * var(--unit));
+	top: calc(58 * var(--unit));
+}
+
+.cloud:nth-child(3){
+	left: calc(546 * var(--unit));
+	top: calc(212 * var(--unit));
+}
+
+.cloud:nth-child(4){
+	left: calc(34 * var(--unit));
+	top: calc(166 * var(--unit));
+}
+
+.cloud:nth-child(5){
+	left: calc(428 * var(--unit));
+	top: calc(243 * var(--unit));
+}
+
+/* Smoke */
+.smoke-1{
+	left: calc(305 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(162 * var(--unit));
+	height: calc(211 * var(--unit));
+}
+
+.smoke-2{
+	left: calc(144 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(134 * var(--unit));
+	height: calc(242 * var(--unit));
+}
+
+/* Quick Fixes */
+.tank::before,
+.tank .top-outline{
+	box-shadow: 0 0 0 2px rgba(0,0,0,0);
+}
+
+.stove-1{
+	box-shadow: 0 0 0 20px rgba(0,0,0,0);	
+}
+
+.G::after{
+	left: calc(22 * var(--unit));
+	top: calc(438 * var(--unit));
+	width: calc(5 * var(--unit));
+	height: calc(4 * var(--unit));
+	color:#5b11c7;
+	background-color: currentColor;
+	border-radius: calc(100 * var(--unit)) calc(100 * var(--unit)) 0 0;
+	transform: rotate(-6deg);
+	box-shadow:
+		calc(375 * var(--unit)) calc(44 * var(--unit)) 0 calc(4 * var(--unit)) currentColor,
+		calc(190 * var(--unit)) calc(22 * var(--unit)) 0 calc(2 * var(--unit)) currentColor,
+		calc(75 * var(--unit)) calc(9 * var(--unit)) 0 calc(1 * var(--unit)) currentColor;
+}
+/* Climate Change */
+
+.split-2{
+	background-image: linear-gradient(#007AFC,#007AFC);
+	background-size:100% 100%;
+	background-position:0 0;
+	background-repeat: no-repeat;
+}
+
+.split-2::before{
+	left: calc(299 * var(--unit));
+	top: calc(89 * var(--unit));
+	width: calc(50 * var(--unit));
+	height: calc(50 * var(--unit));
+	border-radius:50%;
+	background-color:white;
+	box-shadow:0 0 calc(59 * var(--unit)) calc(31 * var(--unit)) white;
+	transform:rotate(0deg);
+	transform-origin:calc(250 * var(--unit)) calc(250 * var(--unit));
+	animation:sun-down ease-out 10s 1s forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes sun-down{
+	to{
+		transform:rotate(-30deg);
+		box-shadow:0 0 calc(159 * var(--unit)) calc(71 * var(--unit)) white;
+	}
+}
+
+.mountain{
+	box-shadow:0 0 0 2px rgba(0,0,0,0);
+	transform:scaleY(1);
+	transform-origin:left bottom;
+	animation:melting ease-out 13s 1s forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes melting{
+	to{
+		transform:scaleY(0.85);
+	}
+}
+
+.split > .ground{
+	left: calc(-127 * var(--unit));
+	top: calc(443 * var(--unit));
+	width: calc(911 * var(--unit));
+	height: calc(800 * var(--unit));
+	border-radius: 33% 72% 17% 57% / 10% 18% 73% 76%;
+	background-color: #00C899;
+	transform: rotate(-3deg);
+}
+
+.split > .ground::before{
+	--cx:120;
+	--cy:-590;
+	left: calc(35 * var(--unit));
+	top: calc(145 * var(--unit));
+	width: calc(24 * var(--unit));
+	height: calc(22 * var(--unit));
+	color:#00B5A5;
+	background-color:currentColor;
+	border-radius:50%;
+	box-shadow:
+	calc((545 + var(--cx)) * var(--unit)) calc((528 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((548 + var(--cx)) * var(--unit)) calc((500 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((485 + var(--cx)) * var(--unit)) calc((555 + var(--cy)) * var(--unit)) 0 0 currentColor,
+
+	calc((484 + var(--cx)) * var(--unit)) calc((516 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((456 + var(--cx)) * var(--unit)) calc((535 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((434 + var(--cx)) * var(--unit)) calc((539 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((429 + var(--cx)) * var(--unit)) calc((503 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((410 + var(--cx)) * var(--unit)) calc((531 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((380 + var(--cx)) * var(--unit)) calc((556 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((350 + var(--cx)) * var(--unit)) calc((587 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((362 + var(--cx)) * var(--unit)) calc((514 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((325 + var(--cx)) * var(--unit)) calc((545 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((298 + var(--cx)) * var(--unit)) calc((563 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((395 + var(--cx)) * var(--unit)) calc((501 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((286 + var(--cx)) * var(--unit)) calc((509 + var(--cy)) * var(--unit)) 0 0 currentColor,
+
+	calc((292 + var(--cx)) * var(--unit)) calc((476 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((226 + var(--cx)) * var(--unit)) calc((536 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((225 + var(--cx)) * var(--unit)) calc((497 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((197 + var(--cx)) * var(--unit)) calc((518 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((183 + var(--cx)) * var(--unit)) calc((508 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((174 + var(--cx)) * var(--unit)) calc((523 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((149 + var(--cx)) * var(--unit)) calc((513 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((166 + var(--cx)) * var(--unit)) calc((486 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((127 + var(--cx)) * var(--unit)) calc((488 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((119 + var(--cx)) * var(--unit)) calc((535 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((88 + var(--cx)) * var(--unit)) calc((569 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((98 + var(--cx)) * var(--unit)) calc((496 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((60 + var(--cx)) * var(--unit)) calc((529 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	calc((36 + var(--cx)) * var(--unit)) calc((543 + var(--cy)) * var(--unit)) 0 0 currentColor,
+	0 0 0 0 currentColor;
+}
+
+.tree{
+	left: calc(202 * var(--unit));
+	top: calc(303 * var(--unit));
+	width: calc(87 * var(--unit));
+	height: calc(151 * var(--unit));
+	transform:scale(var(--scale, 1));
+	transform-origin: left top;
+	--color-1:#009B80;
+	--color-2: #00B18B;
+	--color-3:#00877B;
+}
+
+.tree-2{
+	left: calc(248 * var(--unit));
+	top: calc(321 * var(--unit));
+	--color-1:#007B89;
+	--color-2: #058781;
+}
+
+.tree-3{
+	left: calc(288 * var(--unit));
+	top: calc(318 * var(--unit));
+	--color-1:#00897F;
+	--color-2: #009582;
+}
+
+.tree-4{
+	left: calc(339 * var(--unit));
+	top: calc(359 * var(--unit));
+	--color-1:#00A8BC;
+}
+
+.tree-5{
+	left: calc(390 * var(--unit));
+	top: calc(363 * var(--unit));
+	--color-1:#00A8BC;
+}
+
+.tree-6{
+	left: calc(418 * var(--unit));
+	top: calc(374 * var(--unit));
+	--color-1:#00A8BC;
+}
+
+.tree-7{
+	left: calc(440 * var(--unit));
+	top: calc(341 * var(--unit));
+	--color-1:#00897F;
+	--color-2: #009981;
+}
+
+.tree-8{
+	left: calc(489 * var(--unit));
+	top: calc(321 * var(--unit));
+	--color-1:#009B80;
+	--color-2: #03AF8E;
+	--color-3: #008A7F;
+}
+
+.tree-9{
+	left: calc(538 * var(--unit));
+	top: calc(361 * var(--unit));
+	--color-1:#00897F;
+	--color-2: #009880;
+}
+
+.tree-10{
+	left: calc(553 * var(--unit));
+	top: calc(369 * var(--unit));
+	--color-1:#00A8BC;
+}
+
+.tree-11{
+	left: calc(577 * var(--unit));
+	top: calc(375 * var(--unit));
+	--color-1:#007B89;
+	--scale:0.9;
+}
+
+.tree-12{
+	left: calc(588 * var(--unit));
+	top: calc(360 * var(--unit));
+	--color-1:#008B9A;
+}
+
+.tree-13{
+	left: calc(610 * var(--unit));
+	top: calc(358 * var(--unit));
+	--color-1:#00A9BC;
+}
+
+.tree-14{
+	left: calc(159 * var(--unit));
+	top: calc(326 * var(--unit));
+	--color-1:#00897F;
+}
+
+.tree-15{
+	left: calc(124 * var(--unit));
+	top: calc(352 * var(--unit));
+	--color-1:#00897F;
+}
+
+.tree-16{
+	left: calc(72 * var(--unit));
+	top: calc(321 * var(--unit));
+	--color-1:#00897F;
+}
+
+.tree-17{
+	left: calc(99 * var(--unit));
+	top: calc(328 * var(--unit));
+	--color-1:#007B89;
+}
+
+.tree-18{
+	left: calc(-7 * var(--unit));
+	top: calc(328 * var(--unit));
+	--color-1:#007B89;
+}
+
+.tree-19{
+	left: calc(33 * var(--unit));
+	top: calc(344 * var(--unit));
+	--color-1:#008A7E;
+}
+
+.tree > .branch{
+	--c:7%;
+	--tl:95%;
+	--ts:4%;
+	left: 50%;
+	top: calc(0 * var(--unit));
+	width: calc(67 * var(--unit));
+	height: calc(70 * var(--unit));
+	transform:translateX(-50%);
+}
+
+.tree > .branch.t-b-2{
+	top: calc(43 * var(--unit));
+	width: calc(87 * var(--unit));
+}
+
+.tree > .branch.t-b-3{
+	top: calc((43 + 34) * var(--unit));
+	width: calc(90 * var(--unit));
+}
+
+.tree > .branch::before{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+	clip-path: polygon(calc(50% - var(--c)) 0, calc(100% - (50% - var(--c))) 0, 100% var(--tl), calc(100% - var(--ts)) 100%, var(--ts) 100%, 0 var(--tl));
+	background:var(--color-1);
+}
+
+.tree > .branch::after{
+	left: 50%;
+	top: calc(-3 * var(--unit));
+	width: calc(10 * var(--unit));
+	height: calc(10 * var(--unit));
+	border-radius: 50%;
+	background-color: var(--color-1);
+	transform: translateX(-50%);
+}
+
+.tree > .lines{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.t-l-1::before{
+	left: calc(36 * var(--unit));
+	top: calc(20 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(11 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-2);
+	transform: rotate(22deg);
+}
+
+.t-l-1::after{
+	left: calc(26 * var(--unit));
+	top: calc(38 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(15 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-2);
+	transform: rotate(19deg);
+}
+
+.t-l-2::before{
+	left: calc(38 * var(--unit));
+	top: calc(43 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(9 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-2);
+	transform: rotate(10deg);
+}
+
+.t-l-2::after{
+	left: calc(21 * var(--unit));
+	top: calc(79 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(13 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-2);
+	transform: rotate(23deg);
+}
+
+.t-l-3::before{
+	left: calc(55 * var(--unit));
+	top: calc(43 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(15 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-3);
+	transform: rotate(-19deg);
+}
+
+.t-l-3::after{
+	left: calc(60 * var(--unit));
+	top: calc(72 * var(--unit));
+	width: calc(5 * var(--unit));
+	height: calc(16 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-3);
+	transform: rotate(-18deg);
+}
+
+.t-l-4::before{
+	left: calc(46 * var(--unit));
+	top: calc(97 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(13 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-3);
+	transform: rotate(-15deg);
+}
+
+.t-l-4::after{
+	left: calc(32 * var(--unit));
+	top: calc(122 * var(--unit));
+	width: calc(5 * var(--unit));
+	height: calc(10 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-3);
+	transform: rotate(18deg);
+}
+
+.t-l-5::before{
+	left: calc(54 * var(--unit));
+	top: calc(113 * var(--unit));
+	width: calc(6 * var(--unit));
+	height: calc(11 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-3);
+	transform: rotate(-15deg);
+}
+
+.t-l-5::after{
+	left: calc(69 * var(--unit));
+	top: calc(125 * var(--unit));
+	width: calc(5 * var(--unit));
+	height: calc(13 * var(--unit));
+	border-radius: calc(6 * var(--unit));
+	background-color: var(--color-3);
+	transform: rotate(-28deg);
+}
+
+/* Mountains */
+
+.ice, .grading{
+	left: calc(174 * var(--unit));
+	top: calc(153 * var(--unit));
+	width: calc(474 * var(--unit));
+	height: calc(281 * var(--unit));
+}
+
+.ice{
+	clip-path:polygon(99.41% 24.76%, 99.81% 97%, 13.99% 97.35%, 14.38% 17.09%, 24.55% -0.41%, 39.55% 22%, 44.66% 14%, 48.77% 20.85%, 61.05% 1.88%, 63.34% 6.13%, 65.67% 3.76%, 69.58% 9.61%, 76.82% 9.95%, 83.7% 21.04%, 88.46% 13.92%, 91.14% 17.98%, 93.15% 15.23%);
+	background:#5ABEF3;
+}
+
+.grading > .grader{
+	left:0;
+	top:0;
+	width:100%;
+	height: 100%;
+}
+
+.g1::before{
+	left: calc(118 * var(--unit));
+	top: calc(-3 * var(--unit));
+	width: calc(105 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E9F4F6;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(42deg);
+	transform-origin: top left;
+}
+
+.g1::after{
+	left: calc(139 * var(--unit));
+	top: calc(56 * var(--unit));
+	width: calc(42 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E9F4F6;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(137deg);
+	transform-origin: right bottom;
+}
+
+.g2::before{
+	left: calc(212 * var(--unit));
+	top: calc(39 * var(--unit));
+	width: calc(36 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E9F4F6;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(42deg);
+	transform-origin: top left;
+}
+
+.g2::after{
+	left: calc(174 * var(--unit));
+	top: calc(39 * var(--unit));
+	width: calc(66 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B1E1FB;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(136deg);
+	transform-origin: right bottom;
+}
+
+.g3::before{
+	left: calc(215 * var(--unit));
+	top: calc(22 * var(--unit));
+	width: calc(43 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E5F2FF;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(136deg);
+	transform-origin: right bottom;
+}
+
+.g3::after{
+	left: calc(290 * var(--unit));
+	top: calc(4 * var(--unit));
+	width: calc(29 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E6F2FD;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(46deg);
+	transform-origin: top left;
+}
+
+.g4::before{
+	left: calc(280 * var(--unit));
+	top: calc(10 * var(--unit));
+	width: calc(17 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E5F4FC;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(132deg);
+	transform-origin: right bottom;
+}
+
+.g4::after{
+	left: calc(311 * var(--unit));
+	top: calc(10 * var(--unit));
+	width: calc(93 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B1E3FD;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(44deg);
+	transform-origin: top left;
+}
+
+.g5::before{
+	left: calc(311 * var(--unit));
+	top: calc(10 * var(--unit));
+	width: calc(35 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E3F5F8;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(44deg);
+	transform-origin: top left;
+}
+
+.g5::after{
+	left: calc(362 * var(--unit));
+	top: calc(26 * var(--unit));
+	width: calc(45 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B0E2FC;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(44deg);
+	transform-origin: top left;
+}
+
+.g6::before{
+	left: calc(362 * var(--unit));
+	top: calc(26 * var(--unit));
+	width: calc(33 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E7F2FB;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(44deg);
+	transform-origin: top left;
+}
+
+.g6::after{
+	left: calc(418 * var(--unit));
+	top: calc(79 * var(--unit));
+	width: calc(41 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B0E2FD;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(47deg);
+	transform-origin: top left;
+}
+
+.g7::before{
+	left: calc(420 * var(--unit));
+	top: calc(37 * var(--unit));
+	width: calc(26 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E6F5FA;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(44deg);
+	transform-origin: top left;
+}
+
+.g7::after{
+	left: calc(411 * var(--unit));
+	top: calc(41 * var(--unit));
+	width: calc(17 * var(--unit));
+	height: calc(10 * var(--unit));
+	background-color: #E1F5FF;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(135deg);
+	transform-origin: right bottom;
+}
+
+.g8::before{
+	left: calc(441 * var(--unit));
+	top: calc(39 * var(--unit));
+	width: calc(51 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E8F2FA;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(43deg);
+	transform-origin: top left;
+}
+
+.g8::after{
+	left: calc(154 * var(--unit));
+	top: calc(99 * var(--unit));
+	width: calc(54 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E6F5FA;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(40deg);
+	transform-origin: top left;
+}
+
+.g9::before{
+	left: calc(222 * var(--unit));
+	top: calc(75 * var(--unit));
+	width: calc(32 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B1E3FC;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(47deg);
+	transform-origin: top left;
+}
+
+.g9::after{
+	left: calc(238 * var(--unit));
+	top: calc(117 * var(--unit));
+	width: calc(58 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B1E3FD;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(49deg);
+	transform-origin: top left;
+}
+
+.g10::before{
+	left: calc(307 * var(--unit));
+	top: calc(65 * var(--unit));
+	width: calc(26 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #B3E3FE;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(129deg);
+	transform-origin: top left;
+}
+
+.g10::after{
+	left: calc(293 * var(--unit));
+	top: calc(60 * var(--unit));
+	width: calc(26 * var(--unit));
+	height: calc(11 * var(--unit));
+	background-color: #E4F4FB;
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(1deg);
+	transform-origin: top left;
+}
+
+.ice > .clip-1{
+	left: calc(35 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(221 * var(--unit));
+	height: calc(197 * var(--unit));
+	background-color:#B1E3FD;
+	clip-path: polygon(93.55% 60.57%, 83.34% 61.58%, 74.8% 69.59%, 53.55% 52.06%, 47.6% 57.07%, 29.37% 56.57%, 40.59% 43.05%, 39.93% 0.47%, 10.14% -2.06%, 3% 66%, 8% 82%, 26% 90%, 65.14% 94%, 83.8% 94.01%, 100.58% 76.51%);
+}
+
+.ice > .clip-2{
+	left: calc(0 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(471 * var(--unit));
+	height: calc(153 * var(--unit));
+	background-color:#97D8FB;
+	clip-path: polygon(0px 100%, 76.92% 99%, 71.55% 68.62%, 81.43% 64.69%, 89.82% 90.91%, 100% 100%, 100% 0px, 0px 0px);
+}
+
+.ice > .clip-3{
+	right: calc(30 * var(--unit));
+	top: calc(39 * var(--unit));
+	width: calc(168 * var(--unit));
+	height: calc(137 * var(--unit));
+	background-color:#78CEFB;
+	clip-path: polygon(28% 99.28%, 26.24% 78.28%, 13.5% 61.8%, 13.5% 43.6%, 6.46% 30.08%, 15.85% 23.88%, 28.39% 20.88%, 32.41% 4.6%, 57.22% 28.07%, 54.78% 17.28%, 66.74% 17.28%, 73.04% 4.6%, 74.17% 29.4%, 73.58% 14.92%, 98.83% 47.48%, 84.74% 76.44%, 61.84% 51.84%, 43.65% 52.29%, 58.95% 77.68%, 42.82% 100.72%);
+}
+
+.ice > .clip-4{
+	right: calc(0 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(143 * var(--unit));
+	height: calc(106 * var(--unit));
+	background-color:#B1E3FD;
+}
+
+/* Hills */
+
+.hill-1{
+	left: calc(38 * var(--unit));
+	top: calc(102 * var(--unit));
+	width: calc(213 * var(--unit));
+	height: calc(357 * var(--unit));
+	background-color:#6E4CDD;
+	clip-path: polygon(0 2.22%, 28.87% 0.3%, 35.26% 1%, 50.82% 4.88%, 58.60% 9.78%, 108% 100%, 0 100%);
+}
+
+.hill-2{
+	left: calc(71 * var(--unit));
+	top: calc(166 * var(--unit));
+	width: calc(201 * var(--unit));
+	height: calc(291 * var(--unit));
+	background-color:#7966E9;
+	clip-path:polygon(0px 2.22%, 49.48% 0.3%, 56.36% -0.02%, 75.35% 4.88%, 84.61% 10.12%, 145.79% 98.65%, 0px 100%);
+}
+
+.hill-3{
+	left: calc(140 * var(--unit));
+	top: calc(201 * var(--unit));
+	width: calc(143 * var(--unit));
+	height: calc(251 * var(--unit));
+	background-color: #613CDE;
+	border-radius: calc(15 * var(--unit));
+	transform: skewX(23deg);
+}
+
+.hill-4{
+	left: calc(223 * var(--unit));
+	top: calc(261 * var(--unit));
+	width: calc(94 * var(--unit));
+	height: calc(130 * var(--unit));
+	background-color:#6E4CDD;
+	border-radius: calc(9 * var(--unit));
+	transform: skewX(26deg);
+}
+
+.hill-5{
+	left: calc(152 * var(--unit));
+	top: calc(261 * var(--unit));
+	width: calc(94 * var(--unit));
+	height: calc(130 * var(--unit));
+	background-color:#4E31C3;
+	border-radius: calc(12 * var(--unit));
+	transform: skewX(23deg);
+}
+
+.hill-6{
+	left: calc(209 * var(--unit));
+	top: calc(321 * var(--unit));
+	width: calc(94 * var(--unit));
+	height: calc(94 * var(--unit));
+	background-color:#4D31C3;
+	border-radius: 50%;
+}
+
+.hill-7{
+	left: calc(283 * var(--unit));
+	top: calc(303 * var(--unit));
+	width: calc(94 * var(--unit));
+	height: calc(130 * var(--unit));
+	background-color: #6D4CDA;
+	border-radius: calc(10 * var(--unit));
+	transform: skewX(34deg);
+	border: calc(15 * var(--unit)) solid #613CDE;
+}
+
+.hill-8{
+	right: calc(-15 * var(--unit));
+	top: calc(307 * var(--unit));
+	width: calc(71 * var(--unit));
+	height: calc(148 * var(--unit));
+	background-color: #4E31C3;
+	border-radius: calc(9 * var(--unit));
+	transform: skewX(-29deg);
+}
+
+.hill-9{
+	right: calc(-33 * var(--unit));
+	top: calc(255 * var(--unit));
+	width: calc(71 * var(--unit));
+	height: calc(148 * var(--unit));
+	background-color: #462F9A;
+	transform: skewX(-29deg);
+}
+
+.hill-10{
+	right: calc(-31 * var(--unit));
+	top: calc(183 * var(--unit));
+	width: calc(71 * var(--unit));
+	height: calc(193 * var(--unit));
+	background-color: #4E31C3;
+	transform: skewX(-31deg);
+}
+
+.hill-11{
+	right: calc(31 * var(--unit));
+	top: calc(258 * var(--unit));
+	width: calc(71 * var(--unit));
+	height: calc(148 * var(--unit));
+	background-color: #7966E9;
+	border-radius: calc(9 * var(--unit));
+	transform: skewX(-36deg);
+}
+
+.hill-12{
+	right: calc(91 * var(--unit));
+	top: calc(314 * var(--unit));
+	width: calc(71 * var(--unit));
+	height: calc(148 * var(--unit));
+	background-color: #7966E9;
+	border-radius: calc(9 * var(--unit));
+	transform: skewX(-36deg);
+}
+
+.hill-taken,
+.hill-taken-2,
+.cclouds{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.hill-taken-2::before{
+	left: calc(69 * var(--unit));
+	top: calc(89 * var(--unit));
+	width: calc(38 * var(--unit));
+	height: calc(268 * var(--unit));
+	background-color: #4F2FC3;
+	border-radius: calc(15 * var(--unit));
+	transform: skewX(6deg);
+}
+
+.hill-taken::before{
+	left: calc(120 * var(--unit));
+	top: calc(134 * var(--unit));
+	width: calc(38 * var(--unit));
+	height: calc(268 * var(--unit));
+	background-color: #4528ad;
+	border-radius: calc(12 * var(--unit));
+	transform: skewX(15deg);
+}
+
+.hill-taken-2::after{
+	left: calc(103 * var(--unit));
+	top: calc(196 * var(--unit));
+	width: calc(38 * var(--unit));
+	height: calc(268 * var(--unit));
+	background-color: #462F9A;
+	border-radius: calc(12 * var(--unit));
+	transform: skewX(11deg);
+}
+
+.hill-taken::after{
+	left: calc(0 * var(--unit));
+	top: calc(176 * var(--unit));
+	width: calc(60 * var(--unit));
+	height: calc(268 * var(--unit));
+	background-color: #4B34A0;
+	border-radius: calc(12 * var(--unit));
+	transform: skewX(-10deg);
+}
+
+/* Clouds */
+.cclouds{
+	animation:clouds-fly ease-out 20s 1s forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes clouds-fly{
+	to{
+		transform:translateX(50%);
+	}
+}
+
+.cclouds div{
+	color:white;
+	height: calc(13 * var(--unit));
+	background-color:currentColor;
+}
+
+.cclouds .cloud-1{
+	right: calc(83 * var(--unit));
+	top: calc(111 * var(--unit));
+	width: calc(114 * var(--unit));
+	border-radius: calc(12 * var(--unit));
+}
+
+.cclouds .cloud-1::before{
+	left: calc(17 * var(--unit));
+	top: calc(-16 * var(--unit));
+	width: calc(44 * var(--unit));
+	height: calc(22 * var(--unit));
+	background-color: currentColor;
+	border-radius: calc(25 * var(--unit)) calc(25 * var(--unit)) 0 0;
+}
+
+.cclouds .cloud-1::after{
+	left: calc(41 * var(--unit));
+	top: calc(-28 * var(--unit));
+	width: calc(61 * var(--unit));
+	height: calc(33 * var(--unit));
+	background-color: currentColor;
+	border-radius: calc(55 * var(--unit)) calc(55 * var(--unit)) 0 0;
+}
+
+.cclouds .cloud-2{
+	right: calc(-5 * var(--unit));
+	top: calc(49 * var(--unit));
+	width: calc(128 * var(--unit));
+	border-radius: calc(12 * var(--unit));
+}
+
+.cclouds .cloud-2::before{
+	left: calc(75 * var(--unit));
+	top: calc(-15 * var(--unit));
+	width: calc(44 * var(--unit));
+	height: calc(22 * var(--unit));
+	background-color: currentColor;
+	border-radius: calc(25 * var(--unit)) calc(25 * var(--unit)) 0 0;
+}
+
+.cclouds .cloud-2::after{
+	left: calc(30 * var(--unit));
+	top: calc(-28 * var(--unit));
+	width: calc(61 * var(--unit));
+	height: calc(33 * var(--unit));
+	background-color: currentColor;
+	border-radius: calc(55 * var(--unit)) calc(55 * var(--unit)) 0 0;
+}
+
+/* Home */
+.split > div.home{
+	left: calc(279 * var(--unit));
+	top: calc(372 * var(--unit));
+	width: calc(240 * var(--unit));
+	height: calc(102 * var(--unit));
+}
+
+.home{
+	--color-1:#E86600;
+	--color-2:#84391E;
+	--color-3:#EF8B1E;
+	--color-4:#E66700;
+	--color-5:#F58721;
+	--color-6:#9E5036;
+	--color-7:#F0B67A;
+	--color-8:#E66600;
+	--color-9:#9A4F36;
+}
+
+.home > .sides, .home > .front, .home > .shader, .home > .h-edge{
+	left:0;
+	top:0;
+	width:100%;
+	height:100%;
+}
+
+.home > .sides::before{
+	left: calc(14 * var(--unit));
+	top: calc(60 * var(--unit));
+	width: calc(73 * var(--unit));
+	height: calc(41 * var(--unit));
+	background-color:var(--color-1);
+}
+
+.home > .sides::after{
+	left: calc(40 * var(--unit));
+	top: calc(0 * var(--unit));
+	width: calc(76 * var(--unit));
+	height: calc(64 * var(--unit));
+	background-color: var(--color-2);
+	transform: skewX(-55deg);
+	border-radius: calc(2 * var(--unit)) 0 0 calc(8 * var(--unit));
+}
+
+.home > .front::before{
+	left: calc(82 * var(--unit));
+	top: calc(8 * var(--unit));
+	width: calc(148 * var(--unit));
+	height: calc(80 * var(--unit));
+	clip-path: polygon(50% 0%, 100% 65%, 100% 100%, 0 100%, 0% 68%);
+	background-color: var(--color-3);
+	background-image: 
+	linear-gradient(var(--color-4),var(--color-4)),
+	linear-gradient(var(--color-5),var(--color-5)),
+		linear-gradient(var(--color-6),var(--color-6)),
+		linear-gradient(var(--color-6),var(--color-6)),
+		linear-gradient(var(--color-7),var(--color-7));
+	background-size: 
+		calc(15 * var(--unit)) calc(18 * var(--unit)),
+		calc(31 * var(--unit)) calc(18 * var(--unit)),
+		calc(22 * var(--unit)) calc(33 * var(--unit)),
+		calc(17 * var(--unit)) calc(24 * var(--unit)),
+		calc(102 * var(--unit)) calc(44 * var(--unit));
+	background-position: 
+		calc(108 * var(--unit)) calc(46 * var(--unit)),
+		calc(100 * var(--unit)) calc(46 * var(--unit)),
+		calc(63 * var(--unit)) calc(44 * var(--unit)),
+		calc(29 * var(--unit)) calc(52 * var(--unit)),
+		calc(45 * var(--unit)) calc(41 * var(--unit));
+}
+
+.home > .front::after{
+	left: calc(123 * var(--unit));
+	top: calc(24 * var(--unit));
+	width: calc(10 * var(--unit));
+	height: calc(37 * var(--unit));
+	border-radius: calc(20 * var(--unit));
+	background-color:var(--color-8);
+}
+
+.home > .shader::before{
+	left: calc(157 * var(--unit));
+	top: calc(-2 * var(--unit));
+	width: calc(105 * var(--unit));
+	height: calc(10 * var(--unit));
+	background-color: var(--color-9);
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(36deg);
+	transform-origin: top left;
+}
+
+.home > .shader::after{
+	left: calc(164 * var(--unit));
+	top: calc(6 * var(--unit));
+	width: calc(109 * var(--unit));
+	height: calc(10 * var(--unit));
+	background-color: var(--color-9);
+	border-radius: calc(20 * var(--unit));
+	transform: rotate(145deg);
+	transform-origin: top left;
+}
+
+.home > .h-edge::after{
+	left: calc(136 * var(--unit));
+	top: calc(44 * var(--unit));
+	width: calc(41 * var(--unit));
+	height: calc(10 * var(--unit));
+	border-radius: calc(20 * var(--unit));
+	background-color: var(--color-8);
+}
+
+.home > .h-edge::before{
+	left: calc(106 * var(--unit));
+	top: calc(51 * var(--unit));
+	width: calc(26 * var(--unit));
+	height: calc(10 * var(--unit));
+	border-radius: calc(20 * var(--unit));
+	background-color: var(--color-8);
+}
+
+.home::after{
+	left: calc(148 * var(--unit));
+	top: calc(19 * var(--unit));
+	width: calc(17 * var(--unit));
+	height: calc(17 * var(--unit));
+	background-color: var(--color-8);
+	border-radius:50%
+}
+
+.split > div.home.home-2{
+	left: calc(162 * var(--unit));
+	top: calc(371 * var(--unit));
+	transform: scale(0.81) rotateY(-180deg);
+	transform-origin:50% 50%;
+	filter: saturate(77%);
+}
+
+.split-2{
+	animation:day-progress ease-in-out 10s 1s forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes day-progress{
+	from{
+		filter:sepia(0%);
+	}
+	to{
+		filter:sepia(100%);
+	}
+}
+
+.smoke-1{
+	clip-path: polygon(-100% 0%, 200% 0%, 200% 112%, 75% 100%, 25% 100%, -100.61% 102.86%);
+}
+
+.smoke-2{
+	clip-path: polygon(96.97% 99.82%, 2.60% 100.89%, -110.29% 106.09%, -112.8% -0.3%, 162.23% -2.23%, 155.53% 68.01%, 100.1% 72.48%);
+}
+
+.smoke-pre{
+	position: absolute;
+	left:calc(var(--x) * var(--unit));
+	bottom:calc(var(--y) * var(--unit));
+	width:calc(10 * var(--unit));
+	height:calc(10 * var(--unit));
+	background-color:#FCD7F7;
+	border-radius: 50%;
+	transform:translate(-50%, 0);
+	transform-origin:bottom center;
+	animation:spread ease-out 5.6s calc(var(--d) * 0.014s) forwards;
+	animation-play-state: var(--playing, running);
+}
+
+.smoke-rest{
+	position: absolute;
+	left:calc(var(--x) * var(--unit));
+	bottom:calc(var(--y) * var(--unit));
+	width:calc(10 * var(--unit));
+	height:calc(10 * var(--unit));
+	background-color:white;
+	border-radius: 50%;
+	transform:translate(-50%, 0);
+	transform-origin:bottom center;
+	animation:spread-fade ease 4.8s calc(var(--d) * 0.009s) forwards;
+	animation-play-state: var(--playing, running);
+}
+
+@keyframes spread{
+	20%{
+		width:calc(var(--size) * var(--unit));
+		height:calc(var(--size) * var(--unit));
+	}
+
+	to{
+		width:calc(var(--size) * var(--unit));
+		height:calc(var(--size) * var(--unit));
+		transform:translate(calc(-50% + var(--shift) * 1%), calc(-350 * var(--unit)));
+	}
+}
+
+@keyframes spread-fade{
+	20%{
+		width:calc(var(--size) * var(--unit));
+		height:calc(var(--size) * var(--unit));
+	}
+
+	40%{
+		width:calc(var(--size) * var(--unit));
+		height:calc(var(--size) * var(--unit));
+	}
+
+	67%{
+		width: 0;
+		height:0;
+	}
+
+	to{
+		width: 0;
+		height:0;
+		transform:translate(calc(-50% + var(--shift) * 1%), calc(-250 * var(--unit)));
+	}
+}
\ No newline at end of file
diff --git a/css-shapes-columns-and-clipping/README.markdown b/css-shapes-columns-and-clipping/README.markdown
new file mode 100644
index 0000000..99b4455
--- /dev/null
+++ b/css-shapes-columns-and-clipping/README.markdown
@@ -0,0 +1,4 @@
+# CSS Shapes, Columns and Clipping
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/mandymichael/pen/xzyrGa](https://codepen.io/mandymichael/pen/xzyrGa).
+
+ An experimentation with CSS columns, CSS Shapes, Clip Path and Background Clip.
\ No newline at end of file
diff --git a/css-shapes-columns-and-clipping/dist/index.html b/css-shapes-columns-and-clipping/dist/index.html
new file mode 100644
index 0000000..b3e6662
--- /dev/null
+++ b/css-shapes-columns-and-clipping/dist/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Shapes, Columns and Clipping</title>
+  <link href="https://fonts.googleapis.com/css?family=PT+Serif:400,700,700i|Spirax" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div>
+	<h1>Elit Bibendum</h1>
+	<p class="position">Etiam</p>
+
+	<p class="question">Vestibulum id ligula porta felis euismod semper?</p>
+	<div class="questions">
+		<div class="triangle-left">
+			<div class="inner"></div>
+			<div class="inner inner2"></div>
+		</div>
+
+		<div class="inner inner2"></div>
+		<p>
+			Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+
+		<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+
+		<p>Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+
+		<blockquote>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</blockquote>
+		<p>
+			Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+
+		<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus.</p>
+
+		<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.</p>
+
+		<p>Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+	</div>
+
+	<div class="questions full">
+
+		<p class="question full">Cras mattis consectetur purus sit amet fermentum.</p>
+		<div class="triangle-right">
+			<div class="inner"></div>
+			<div class="inner inner2"></div>
+		</div>
+		<p>Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+			ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+		<div class="triangle-left locked">
+			<div class="inner inner2"></div>
+		</div>
+		<p>Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+			Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
+
+		<p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
+
+		<blockquote> Amet Condimentum Ornare, Fusce dapibus, tellus ac cursus commodos.</blockquote>
+
+	</div>
+
+	<div class="questions three-col">
+
+		<p class="question wide">Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare veo?</p>
+
+		<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent
+			commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.</p>
+	<div class="overlay"></div>
+	<div class="overlay offset"></div>
+
+		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in,
+			egestas eget quam. Aenean lacinia bibendum nulla sed consectetur.</p>
+		<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
+	</div>
+	
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/css-shapes-columns-and-clipping/dist/style.css b/css-shapes-columns-and-clipping/dist/style.css
new file mode 100644
index 0000000..6defd7a
--- /dev/null
+++ b/css-shapes-columns-and-clipping/dist/style.css
@@ -0,0 +1,188 @@
+body {
+  background: #ce6f75;
+  font-family: 'PT Serif', serif;
+  padding: 2rem;
+}
+
+h1 {
+  background: #ca66ac url(https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2ff8b46004acf88415bb98bb42238e9c);
+  background-size: 50% 200%;
+  background-position: bottom;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-family: 'Spirax', cursive;
+  font-size: 15vw;
+  position: relative;
+  text-align: left;
+  margin: 0;
+  line-height: 1.2;
+}
+h1::before {
+  content: 'Kylie Timpani';
+  text-align: center;
+  position: absolute;
+  z-index: -1;
+}
+
+.position {
+  font-size: 7vw;
+  text-align: right;
+  margin: 0 0 1rem 0;
+  color: #f6d6b5;
+  text-transform: uppercase;
+}
+
+div {
+  max-width: 800px;
+  margin: 0 auto;
+  color: #313157;
+}
+
+.question {
+  width: 50%;
+  font-weight: bold;
+  font-size: 1.5rem;
+  color: #663a70;
+  border-bottom: 5px solid #663a70;
+}
+.question.full {
+  width: 55%;
+}
+.question.wide {
+  width: 100%;
+}
+
+.questions {
+  border-bottom: dotted 2px #663a70;
+  margin-bottom: 2rem;
+}
+@media screen and (min-width: 768px) {
+  .questions {
+    -webkit-columns: 2;
+            columns: 2;
+    height: 510px;
+  }
+}
+.questions.full {
+  -webkit-columns: unset;
+          columns: unset;
+  width: 90%;
+  margin: 0;
+  border-bottom: none;
+}
+.questions.three-col {
+  -webkit-columns: unset;
+          columns: unset;
+  height: auto;
+  margin-top: 6rem;
+  border-bottom: none;
+  position: relative;
+}
+@media screen and (min-width: 768px) {
+  .questions.three-col {
+    -webkit-columns: 3;
+            columns: 3;
+  }
+}
+
+.triangle-left {
+  width: 280px;
+  height: 280px;
+  shape-outside: polygon(55% 0, 0 105%, 105% 100%);
+  float: left;
+  -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
+          clip-path: polygon(50% 0, 0 100%, 100% 100%);
+  background: #ca66ac url(https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2ff8b46004acf88415bb98bb42238e9c);
+  background-size: cover;
+}
+.triangle-left.locked {
+  position: relative;
+  -webkit-clip-path: polygon(1% 0px, -1px 100.36%, 98.21% 100.36%);
+          clip-path: polygon(1% 0px, -1px 100.36%, 98.21% 100.36%);
+  shape-outside: polygon(4.93% -9px, 0px 103.93%, 105.72% 102.5%);
+}
+.triangle-left.locked .inner {
+  -webkit-clip-path: polygon(5% 21px, 12px 100.4%, 98.41% 100.79%);
+          clip-path: polygon(5% 21px, 12px 100.4%, 98.41% 100.79%);
+}
+
+.overlay {
+  bottom: 0;
+  left: 0;
+  -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
+          clip-path: polygon(50% 0, 0 100%, 100% 100%);
+  width: 100%;
+  height: 200%;
+  background: #de8f87;
+  position: absolute;
+  mix-blend-mode: overlay;
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.overlay.offset {
+  -webkit-transform: rotate(0);
+          transform: rotate(0);
+  bottom: 200%;
+  z-index: -1;
+}
+
+.inner {
+  -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
+          clip-path: polygon(50% 0, 0 100%, 100% 100%);
+  width: 90%;
+  height: 90%;
+  background: #ce6f75;
+  top: 50%;
+  position: relative;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+.inner2 {
+  background: #cbc2a3;
+  position: absolute;
+  mix-blend-mode: overlay;
+}
+
+.inner3 {
+  background: #cbc2a3;
+  position: absolute;
+  mix-blend-mode: overlay;
+  bottom: 0;
+  top: 100%;
+}
+
+.triangle-right {
+  width: 300px;
+  height: 250px;
+  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
+          clip-path: polygon(50% 100%, 0 0, 100% 0);
+  shape-outside: polygon(50% 100%, 0 0, 100% 0);
+  float: right;
+  background: #ca66ac url(https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2ff8b46004acf88415bb98bb42238e9c);
+  background-size: cover;
+  position: relative;
+}
+
+blockquote {
+  font-size: 1.2em;
+  font-weight: 700;
+  font-style: italic;
+  margin-left: 1rem;
+  -webkit-column-break-inside: avoid;
+  page-break-inside: avoid;
+  break-inside: avoid;
+  display: block;
+}
+blockquote::before {
+  content: "\201C";
+  font-size: 5em;
+  -webkit-transform: translate(-55px, -20px);
+          transform: translate(-55px, -20px);
+  position: absolute;
+}
+
+p {
+  margin: 0 0 20px 0;
+  line-height: 1.35;
+}
diff --git a/css-shapes-columns-and-clipping/license.txt b/css-shapes-columns-and-clipping/license.txt
new file mode 100644
index 0000000..9acd29c
--- /dev/null
+++ b/css-shapes-columns-and-clipping/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Mandy Michael (https://codepen.io/mandymichael/pen/xzyrGa)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/css-shapes-columns-and-clipping/src/index.html b/css-shapes-columns-and-clipping/src/index.html
new file mode 100644
index 0000000..9a0c4b9
--- /dev/null
+++ b/css-shapes-columns-and-clipping/src/index.html
@@ -0,0 +1,66 @@
+<div>
+	<h1>Elit Bibendum</h1>
+	<p class="position">Etiam</p>
+
+	<p class="question">Vestibulum id ligula porta felis euismod semper?</p>
+	<div class="questions">
+		<div class="triangle-left">
+			<div class="inner"></div>
+			<div class="inner inner2"></div>
+		</div>
+
+		<div class="inner inner2"></div>
+		<p>
+			Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+
+		<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+
+		<p>Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+
+		<blockquote>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</blockquote>
+		<p>
+			Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+
+		<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus.</p>
+
+		<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.</p>
+
+		<p>Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+	</div>
+
+	<div class="questions full">
+
+		<p class="question full">Cras mattis consectetur purus sit amet fermentum.</p>
+		<div class="triangle-right">
+			<div class="inner"></div>
+			<div class="inner inner2"></div>
+		</div>
+		<p>Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+			ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+		<div class="triangle-left locked">
+			<div class="inner inner2"></div>
+		</div>
+		<p>Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+			Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
+
+		<p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
+
+		<blockquote> Amet Condimentum Ornare, Fusce dapibus, tellus ac cursus commodos.</blockquote>
+
+	</div>
+
+	<div class="questions three-col">
+
+		<p class="question wide">Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare veo?</p>
+
+		<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent
+			commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.</p>
+	<div class="overlay"></div>
+	<div class="overlay offset"></div>
+
+		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in,
+			egestas eget quam. Aenean lacinia bibendum nulla sed consectetur.</p>
+		<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
+	</div>
+	
+</div>
\ No newline at end of file
diff --git a/css-shapes-columns-and-clipping/src/style.scss b/css-shapes-columns-and-clipping/src/style.scss
new file mode 100644
index 0000000..46b4f3d
--- /dev/null
+++ b/css-shapes-columns-and-clipping/src/style.scss
@@ -0,0 +1,183 @@
+body {
+	background: #ce6f75;
+	font-family: 'PT Serif', serif;
+	padding: 2rem;
+}
+
+
+h1 {
+	background: #ca66ac url(https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2ff8b46004acf88415bb98bb42238e9c);
+	background-size: 50% 200%;
+	background-position: bottom;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+font-family: 'Spirax', cursive;
+	font-size: 15vw;
+	position: relative;
+	text-align: left;
+	margin: 0;
+	line-height: 1.2;
+
+	&::before {
+		content:'Kylie Timpani';
+		text-align: center;
+		position: absolute;
+		z-index: -1;
+	}
+}
+
+.position{
+	font-size: 7vw;
+	text-align: right;
+	margin: 0 0 1rem 0;
+	color: #f6d6b5;
+	text-transform: uppercase;	
+}
+	
+div {
+	max-width: 800px;
+	margin: 0 auto;
+	color: #313157;
+
+}
+
+.question {
+	width: 50%;
+	font-weight: bold;
+	font-size: 1.5rem;
+	color: #663a70;
+	border-bottom: 5px solid #663a70;
+	
+	&.full {
+		width: 55%;
+	}
+	
+	&.wide {
+		width: 100%;
+	}
+}
+
+.questions {
+	border-bottom: dotted 2px #663a70;
+	margin-bottom: 2rem;
+	
+	@media screen and (min-width: 768px) {
+		columns: 2;
+		height: 510px;
+	}
+	
+	&.full {
+		columns: unset;
+		width: 90%;
+		margin: 0;
+		border-bottom: none;
+	}
+	
+	&.three-col {
+		columns: unset;
+		height: auto;
+		margin-top: 6rem;
+		border-bottom: none;
+		position: relative;
+		
+		@media screen and (min-width: 768px) {
+			columns: 3
+		}
+	}
+}
+
+.triangle-left {
+	width: 280px;
+	height: 280px;
+	shape-outside: polygon(55% 0, 0 105%, 105% 100%);
+	float: left;
+	clip-path: polygon(50% 0, 0 100%, 100% 100%);
+	background: #ca66ac url(https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2ff8b46004acf88415bb98bb42238e9c);
+	background-size: cover;
+	
+	&.locked {
+		position: relative;
+		clip-path: polygon(1% 0px, -1px 100.36%, 98.21% 100.36%);
+		shape-outside: polygon(4.93% -9px, 0px 103.93%, 105.72% 102.50%);
+		
+		.inner {
+			clip-path: polygon(5% 21px, 12px 100.4%, 98.41% 100.79%);
+		}
+	}
+}
+
+.overlay {
+	bottom: 0;
+	left:0;
+	clip-path: polygon(50% 0, 0 100%, 100% 100%);
+	width: 100%;
+	height: 200%;
+	background: #de8f87;
+	position: absolute;
+	mix-blend-mode: overlay;
+	transform: rotate(180deg);
+	
+	&.offset {
+		transform: rotate(0);
+    	bottom: 200%;
+		z-index:-1;
+	}
+}
+
+.inner {
+	clip-path: polygon(50% 0, 0 100%, 100% 100%);
+	width: 90%;
+	height: 90%;
+	background: #ce6f75;
+	top: 50%; 
+	position: relative;
+	transform: translateY(-50%);
+}
+
+.inner2 {
+	background: #cbc2a3;
+	position: absolute;
+	mix-blend-mode: overlay;
+}
+
+.inner3 {
+	background: #cbc2a3;
+	position: absolute;
+	mix-blend-mode: overlay;
+	bottom: 0;
+	top: 100%;
+}
+
+.triangle-right {
+	width: 300px;
+	height: 250px;
+	clip-path: polygon(50% 100%, 0 0, 100% 0);
+	shape-outside: polygon(50% 100%, 0 0, 100% 0);
+	float: right;
+	background: #ca66ac url(https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2ff8b46004acf88415bb98bb42238e9c);
+	background-size: cover;
+	position: relative;
+}
+
+blockquote {
+	font-size: 1.2em;
+	font-weight: 700;
+	font-style: italic;
+	margin-left: 1rem;
+	-webkit-column-break-inside: avoid;
+	page-break-inside: avoid;
+	break-inside: avoid;
+	display: block;
+	
+	&::before {
+		content: "\201C";
+		font-size: 5em;
+		transform: translate(-55px, -20px);
+    	position: absolute;
+	}
+}
+
+p {
+	margin: 0 0 20px 0;
+	line-height: 1.35;
+}
\ No newline at end of file
diff --git a/css-squircle/README.markdown b/css-squircle/README.markdown
new file mode 100644
index 0000000..36abd86
--- /dev/null
+++ b/css-squircle/README.markdown
@@ -0,0 +1,4 @@
+# CSS Squircle
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/rogie/pen/alBcH](https://codepen.io/rogie/pen/alBcH).
+
+ 
\ No newline at end of file
diff --git a/css-squircle/dist/index.html b/css-squircle/dist/index.html
new file mode 100644
index 0000000..e034a51
--- /dev/null
+++ b/css-squircle/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Squircle</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<span class="squircle">
+  <span>I'm a squircle!</span>
+</span>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/css-squircle/dist/style.css b/css-squircle/dist/style.css
new file mode 100644
index 0000000..4fb00e2
--- /dev/null
+++ b/css-squircle/dist/style.css
@@ -0,0 +1,81 @@
+.squircle {
+  width: 52.1em;
+  height: 52.1em;
+  position: relative;
+  display: inline-block;
+  margin: 1em auto;
+  vertical-align: middle;
+  -webkit-transform: scale(0.5);
+  -webkit-transform-origin: 50% 0;
+}
+.squircle > * {
+  position: absolute;
+  width: 100%;
+  display: inline-block;
+  height: 100%;
+  background: 50% 50% no-repeat;
+  z-index: 5;
+}
+.squircle:before,
+.squircle:after,
+.squircle > *:before,
+.squircle > *:after {
+  position: absolute;
+  background: #00aeef;
+}
+.squircle:before {
+  top: 0;
+  left: 4em;
+  border-top-left-radius: 20em 10em;
+  width: 50%;
+  bottom: 0;
+  border-bottom-left-radius: 20em 10em;
+  content: "";
+}
+.squircle:before {
+  top: 0;
+  left: 4em;
+  border-top-left-radius: 80% 10em;
+  width: 50%;
+  bottom: 0;
+  border-bottom-left-radius: 80% 10em;
+  content: "";
+}
+.squircle:after {
+  top: 0;
+  bottom: 0;
+  right: 4em;
+  border-top-right-radius: 80% 20%;
+  border-bottom-right-radius: 80% 20%;
+  width: 25em;
+  content: "";
+}
+.squircle > *:before {
+  top: 4em;
+  bottom: 4em;
+  border-top-left-radius: 100% 50%;
+  border-bottom-left-radius: 100% 50%;
+  width: 10em;
+  content: "";
+}
+.squircle > *:after {
+  top: 4em;
+  bottom: 4em;
+  right: 0;
+  border-top-right-radius: 100% 50%;
+  border-bottom-right-radius: 100% 50%;
+  width: 10em;
+  content: "";
+  z-index: 4;
+}
+body {
+  background: #1F1A1D;
+}
+body::before {
+  height: 100%;
+  content: '';
+  width: 0;
+  background: red;
+  vertical-align: middle;
+  display: inline-block;
+}
diff --git a/css-squircle/license.txt b/css-squircle/license.txt
new file mode 100644
index 0000000..b884945
--- /dev/null
+++ b/css-squircle/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Rogie (https://codepen.io/rogie/pen/alBcH)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/css-squircle/src/index.html b/css-squircle/src/index.html
new file mode 100644
index 0000000..ec0be04
--- /dev/null
+++ b/css-squircle/src/index.html
@@ -0,0 +1,3 @@
+<span class="squircle">
+  <span>I'm a squircle!</span>
+</span>
\ No newline at end of file
diff --git a/css-squircle/src/style.less b/css-squircle/src/style.less
new file mode 100644
index 0000000..7660e85
--- /dev/null
+++ b/css-squircle/src/style.less
@@ -0,0 +1,88 @@
+.squircle {
+ 	width: 52.1em;
+	height: 52.1em;
+	position: relative;
+  display: inline-block;
+	margin:1em auto;
+  vertical-align: middle;
+  -webkit-transform: scale(0.5);
+  -webkit-transform-origin: 50% 0;
+  &>* {
+	  position: absolute;
+	  width: 100%;
+	  display: inline-block;
+	  height: 100%;
+	  background: 50% 50% no-repeat;
+	  z-index:5;
+  }
+  &:before,
+  &:after,
+  >*:before,
+  >*:after{
+    position: absolute;
+ 	  background: #00aeef;
+  }
+  &:before{
+    top: 0;
+    left: 4em;
+    border-top-left-radius: 20em 10em;
+    width: 50%;
+    bottom: 0;
+    border-bottom-left-radius: 20em 10em;
+    content: "";  
+  }
+  &:before {
+    top: 0;
+    left: 4em;
+    border-top-left-radius: 80% 10em;
+    width: 50%;
+    bottom: 0;
+    border-bottom-left-radius: 80% 10em;
+    content: "";
+  }
+  &:after {
+    top: 0;
+    bottom: 0;
+    right: 4em;
+    border-top-right-radius: 80% 20%;
+    border-bottom-right-radius: 80% 20%;
+    width: 25em;
+    content: "";
+  }
+  >*:before {
+    top: 4em;
+    bottom: 4em;
+    border-top-left-radius: 100% 50%;
+    border-bottom-left-radius: 100% 50%;
+    width: 10em;
+    content: "";
+  }
+  >*:after {
+    top: 4em;
+    bottom: 4em;
+    right: 0;
+    border-top-right-radius: 100% 50%;
+    border-bottom-right-radius: 100% 50%;
+    width: 10em;
+    content: "";
+    z-index:4;
+  }
+}
+
+//background
+body{
+  background: #1F1A1D;
+}
+
+//reset, center n shiz
+body{
+  &::before{
+    height: 100%;
+    content:'';
+    width:0;
+    background:red;
+    vertical-align: middle;
+    display:inline-block;
+  }
+}
+
diff --git a/css-user-avatars/README.markdown b/css-user-avatars/README.markdown
new file mode 100644
index 0000000..62c9045
--- /dev/null
+++ b/css-user-avatars/README.markdown
@@ -0,0 +1,5 @@
+# CSS User Avatars
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shadeed/pen/QwvmXo](https://codepen.io/shadeed/pen/QwvmXo).
+
+A practise on drawing user avatars using only CSS
diff --git a/css-user-avatars/dist/index.html b/css-user-avatars/dist/index.html
new file mode 100644
index 0000000..7eccfa5
--- /dev/null
+++ b/css-user-avatars/dist/index.html
@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS User Avatars</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="smile smile-happy">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile tired">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile bored">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile replete">
+  <div class="star"><span></span></div>
+  <div class="eyes cf">
+    <div class="eye eye-left"></div>
+    <div class="eye eye-right"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"><span></span></div>
+</div>
+
+<div class="smile funny">
+  <div class="eyebrow"></div>
+  <div class="eyes cf">
+    <div class="eye eye-left"></div>
+    <div class="eye eye-right"></div>
+  </div>
+  <div class="nose"></div>
+  <div class="angry">
+    <div class="right"></div>
+    <div class="left"></div>
+  </div>
+  <div class="circles">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="smile polite">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile sick">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="ring"></div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile stupid">
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="top">
+    <div class="box"></div>
+    <div class="box2"><span></span></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile brat">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth">
+    <span class="circle"></span>
+    <span class="border"></span>
+  </div>
+</div>
+
+<div class="smile masked">
+  <div class="ring"></div>
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth">
+    <div class="inside"><span></span></div>
+  </div>
+</div>
+
+<div class="smile summer">
+  <div class="eyes">
+    <div class="eye eye-left"></div>
+    <div class="eye eye-right"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"><span></span></div>
+</div>
+
+<div class="smile sad">
+  <div class="eyes cf">
+    <div class="eye eye-left"></div>
+    <div class="eye eye-right"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile suprised">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"><span></span>
+  </div>
+</div>
+
+<div class="smile crazy">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"><span></span></div>
+</div>
+
+<div class="smile pixel">
+     <div class="eyes cf">
+         <div class="eye eye-right">
+              <span class="bottom-left"></span>
+              <span class="bottom-right"></span>
+              <span class="top-left"></span>
+              <span class="top-right"></span>
+         </div>
+         <div class="eye eye-left">
+              <span class="bottom-left"></span>
+              <span class="bottom-right"></span>
+              <span class="top-left"></span>
+              <span class="top-right"></span>
+         </div>
+     </div>
+     <div class="shy-circles cf">
+         <div class="shy shy-left"></div>
+         <div class="shy shy-right"></div>
+     </div>
+     <div class="mouth">
+          <span class="left"></span>
+          <span class="right"></span>
+     </div>
+</div>
+
+<div class="smile ring-eyes">
+     <div class="eyes-wrapper cf">
+         <div class="eyes">
+              <div class="eye eye-right"></div>
+              <div class="eye eye-left"></div>
+         </div>
+       </div>
+       <div class="shy-circles cf">
+         <div class="shy shy-left"></div>
+         <div class="shy shy-right"></div>
+       </div>
+     <div class="mouth"></div>
+</div>
+
+<div class="smile crying">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth">
+       <span class="left"></span>
+       <span class="right"></span>
+  </div>
+</div>
+
+<div class="smile music">
+     <div class="eyes cf">
+         <div class="eye eye-right"></div>
+         <div class="eye eye-left"></div>
+     </div>
+     <div class="music-note cf">
+          <span class="left"></span>
+          <span class="right"></span>
+     </div>
+     <div class="mouth"></div>
+</div>
+
+<div class="smile nerd">
+     <div class="eyes cf">
+          <div class="eye eye-right"></div>
+          <div class="eye eye-left"></div>
+     </div>
+     <div class="shy cf">
+          <div class="shy-left"></div>
+          <div class="shy-right"></div>
+     </div>
+     <div class="mouth"></div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/css-user-avatars/dist/script.js b/css-user-avatars/dist/script.js
new file mode 100644
index 0000000..8a786e4
--- /dev/null
+++ b/css-user-avatars/dist/script.js
@@ -0,0 +1,11 @@
+/*
+This is part of my front-end development practise. I'm practising since 204 days and counting :) my goal is to reach 300 days of continuous practise.
+
+The faces by the amazing @JustinMezzell -> http://drbl.in/maCB
+
+My website:
+www.ishadeed.com
+
+Follow Me on twitter: @shadeed9
+
+*/
\ No newline at end of file
diff --git a/css-user-avatars/dist/style.css b/css-user-avatars/dist/style.css
new file mode 100644
index 0000000..396cf5e
--- /dev/null
+++ b/css-user-avatars/dist/style.css
@@ -0,0 +1,1915 @@
+.cf:after {
+  content: "";
+  clear: both;
+  display: table;
+}
+/* Mixins */
+.smile {
+  width: 100px;
+  height: 100px;
+  background: #fabc24;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  -webkit-box-shadow: inset -11px -9px 0 0 #f3ad22;
+  -moz-box-shadow: inset -11px -9px 0 0 #f3ad22;
+  box-shadow: inset -11px -9px 0 0 #f3ad22;
+  position: relative;
+  margin: 0 20px 20px 0;
+  float: left;
+}
+/* Happy */
+.smile-happy .eyes {
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  top: 25px;
+}
+.smile-happy .eyes .eye {
+  width: 16px;
+  height: 16px;
+  background: #edeab6;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  -webkit-animation-name: openEyes;
+  -webkit-animation-duration: 0.75s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: ease-in-out;
+  -webkit-animation-direction: alternate;
+  -webkit-animation-delay: 1s;
+}
+.smile-happy .eyes .eye-left {
+  float: left;
+}
+.smile-happy .eyes .eye-right {
+  float: right;
+}
+@-webkit-keyframes openEyes1 {
+  from {
+    transform: rotateX(0);
+  }
+  to {
+    transform: rotateX(85deg);
+  }
+}
+.smile-happy .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 30px;
+}
+.smile-happy .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.smile-happy .shy-circles .shy-right {
+  float: right;
+}
+.smile-happy .shy-circles .shy-left {
+  float: left;
+}
+.smile-happy .mouth {
+  width: 54px;
+  height: 30px;
+  background: #ce801f;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  bottom: 13px;
+  border-bottom-left-radius: 100px;
+  border-bottom-right-radius: 100px;
+  overflow: hidden;
+}
+.smile-happy .mouth:after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: #ec9f21;
+  position: absolute;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  bottom: -8px;
+}
+/* Tired */
+.tired .eyes {
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  top: 30px;
+}
+.tired .eyes .eye {
+  width: 18px;
+  height: 4px;
+  background: #edeab6;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+}
+.tired .eyes .eye:after {
+  content: "";
+  width: 18px;
+  position: absolute;
+  height: 4px;
+  background: #edeab6;
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+}
+.tired .eyes .eye-left {
+  float: left;
+}
+.tired .eyes .eye-right {
+  float: right;
+}
+.tired .mouth {
+  width: 41px;
+  height: 20px;
+  background: #ce801f;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%) scaleY(-1);
+  -moz-transform: translateX(-50%) scaleY(-1);
+  -ms-transform: translateX(-50%) scaleY(-1);
+  -o-transform: translateX(-50%) scaleY(-1);
+  bottom: 27px;
+  border-bottom-left-radius: 100px;
+  border-bottom-right-radius: 100px;
+}
+.tired .mouth:after {
+  content: "";
+  width: 20px;
+  height: 17px;
+  background: #ec9f21;
+  position: absolute;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  z-index: 5;
+  top: -10px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+.bored .eyes {
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  top: 25px;
+}
+.bored .eyes .eye {
+  width: 16px;
+  height: 16px;
+  background: #edeab6;
+  border-radius: 50%;
+}
+.bored .eyes .eye-left {
+  float: left;
+}
+.bored .eyes .eye-right {
+  float: right;
+}
+.bored .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 30px;
+}
+.bored .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.bored .shy-circles .shy-right {
+  float: right;
+}
+.bored .shy-circles .shy-left {
+  float: left;
+}
+.bored .mouth {
+  width: 20px;
+  height: 4px;
+  background: #ce801f;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  bottom: 37px;
+}
+.replete .star {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 50%;
+  top: 12px;
+  -webkit-transform: translateX(-50%) scaleY(-1) rotateX(20deg);
+  -moz-transform: translateX(-50%) scaleY(-1) rotateX(20deg);
+  -ms-transform: translateX(-50%) scaleY(-1) rotateX(20deg);
+  -o-transform: translateX(-50%) scaleY(-1) rotateX(20deg);
+  border-left: 11px solid transparent;
+  border-right: 11px solid transparent;
+  border-bottom: 10px solid #edeab6;
+}
+.replete .star:after {
+  content: "";
+  position: absolute;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 6px solid #edeab6;
+  left: -10px;
+  top: -1px;
+  -webkit-transform: rotate(-135deg) rotateX(45deg) scale(1.15);
+  -moz-transform: rotate(-135deg) rotateX(45deg) scale(1.15);
+  -ms-transform: rotate(-135deg) rotateX(45deg) scale(1.15);
+  -o-transform: rotate(-135deg) rotateX(45deg) scale(1.15);
+}
+.replete .star:before {
+  content: "";
+  position: absolute;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 6px solid #edeab6;
+  left: -6px;
+  top: 0px;
+  -webkit-transform: rotate(135deg) rotateX(45deg) scale(1.15);
+  -moz-transform: rotate(135deg) rotateX(45deg) scale(1.15);
+  -ms-transform: rotate(135deg) rotateX(45deg) scale(1.15);
+  -o-transform: rotate(135deg) rotateX(45deg) scale(1.15);
+}
+.replete .star span {
+  position: absolute;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid #edeab6;
+  top: 9px;
+  left: 50%;
+  -webkit-transform: translateX(-50%) rotateY(65deg);
+  -moz-transform: translateX(-50%) rotateY(65deg);
+  -ms-transform: translateX(-50%) rotateY(65deg);
+  -o-transform: translateX(-50%) rotateY(65deg);
+}
+.replete .eyes {
+  width: 45%;
+  margin: 0 auto;
+  position: relative;
+  top: 28px;
+}
+.replete .eyes .eye {
+  width: 16px;
+  height: 16px;
+  background: #edeab6;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  -webkit-transform: scaleY(-1);
+  -moz-transform: scaleY(-1);
+  -ms-transform: scaleY(-1);
+  -o-transform: scaleY(-1);
+  overflow: hidden;
+  position: relative;
+}
+.replete .eyes .eye:after {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 25px;
+  background: #fabc24;
+  top: 8px;
+}
+.replete .eyes .eye-left {
+  float: left;
+}
+.replete .eyes .eye-right {
+  float: right;
+}
+.replete .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 34px;
+}
+.replete .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.replete .shy-circles .shy-right {
+  float: right;
+}
+.replete .shy-circles .shy-left {
+  float: left;
+}
+.replete .mouth {
+  width: 30px;
+  height: 14px;
+  background: transparent;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  top: 55px;
+  overflow: hidden;
+  z-index: 15;
+}
+.replete .mouth:before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  background: #fabc24;
+  position: absolute;
+  left: -6px;
+  top: 1px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  border: 3px solid #ce801f;
+  z-index: 20;
+}
+.replete .mouth:after {
+  content: "";
+  width: 7px;
+  height: 7px;
+  background: #fabc24;
+  position: absolute;
+  right: -6px;
+  top: 1px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  border: 3px solid #ce801f;
+  z-index: 20;
+}
+.replete .mouth span {
+  background: #ce801f;
+  display: block;
+  height: 4px;
+  width: 100%;
+  position: absolute;
+  top: 5px;
+}
+.funny {
+  background: #edeab6;
+  -webkit-box-shadow: inset -11px -9px 0 0 #f4d36d;
+  -moz-box-shadow: inset -11px -9px 0 0 #f4d36d;
+  box-shadow: inset -11px -9px 0 0 #f4d36d;
+}
+.funny .eyebrow {
+  width: 0px;
+  height: 0px;
+  border-left: 18px solid transparent;
+  border-right: 18px solid transparent;
+  border-top: 8px solid #fabc24;
+  position: absolute;
+  left: 50%;
+  top: 20px;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+.funny .eyes {
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  top: 28px;
+}
+.funny .eyes .eye {
+  width: 18px;
+  height: 18px;
+  background: #ce801f;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+.funny .eyes .eye-left {
+  float: left;
+}
+.funny .eyes .eye-right {
+  float: right;
+}
+.funny .nose {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  top: 50px;
+}
+.funny .nose:after {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+  left: 30px;
+}
+.funny .nose:before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+  left: -30px;
+}
+.funny .angry {
+  width: 75%;
+  margin: 0 auto;
+  position: absolute;
+  top: 60px;
+  left: 15px;
+}
+.funny .angry div {
+  width: 0;
+  height: 0;
+  border-left: 20px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 8px solid #fabc24;
+  position: relative;
+  -webkit-transform: rotate(55deg);
+  -moz-transform: rotate(55deg);
+  -ms-transform: rotate(55deg);
+  -o-transform: rotate(55deg);
+}
+.funny .angry .right {
+  float: right;
+  right: 4px;
+}
+.funny .angry .left {
+  float: left;
+  -webkit-transform: rotate(-55deg) scaleX(-1);
+  -moz-transform: rotate(-55deg) scaleX(-1);
+  -ms-transform: rotate(-55deg) scaleX(-1);
+  -o-transform: rotate(-55deg) scaleX(-1);
+}
+.funny .circles div {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+  position: relative;
+  left: 35px;
+  top: 44px;
+  margin-bottom: 2px;
+}
+.funny .circles div:after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+  position: absolute;
+  left: 22px;
+}
+.polite .eyes {
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  top: 25px;
+}
+.polite .eyes .eye {
+  width: 16px;
+  height: 16px;
+  background: #edeab6;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+.polite .eyes .eye-left {
+  float: left;
+}
+.polite .eyes .eye-right {
+  float: right;
+}
+.polite .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 30px;
+}
+.polite .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.polite .shy-circles .shy-right {
+  float: right;
+}
+.polite .shy-circles .shy-left {
+  float: left;
+}
+.polite .mouth {
+  width: 55px;
+  height: 55px;
+  border-radius: 50%;
+  background: transparent;
+  border: 6px solid #ce801f;
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  position: absolute;
+  left: 50%;
+  top: 5px;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+.sick {
+  overflow: hidden;
+}
+.sick .eyes {
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  top: 25px;
+}
+.sick .eyes .eye {
+  width: 16px;
+  height: 16px;
+  background: #edeab6;
+  border-radius: 50%;
+}
+.sick .eyes .eye-left {
+  float: left;
+}
+.sick .eyes .eye-right {
+  float: right;
+}
+.sick .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 30px;
+  overflow: hidden;
+}
+.sick .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.sick .shy-circles .shy-right {
+  float: right;
+}
+.sick .shy-circles .shy-left {
+  float: left;
+}
+.sick .mouth {
+  width: 44px;
+  height: 55px;
+  background: #ce801f;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  bottom: -10px;
+}
+zo .sick .mouth:before {
+  content: "";
+  width: 43px;
+  height: 25px;
+  background: #FABC24;
+  position: absolute;
+  z-index: 500;
+  left: -23px;
+  top: 9px;
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 15px;
+  -webkit-transform: rotateY(30deg) rotate(90deg);
+  -moz-transform: rotateY(30deg) rotate(90deg);
+  -ms-transform: rotateY(30deg) rotate(90deg);
+  -o-transform: rotateY(30deg) rotate(90deg);
+}
+.sick .ring {
+  position: absolute;
+  width: 120px;
+  height: 16px;
+  background: #e99d21;
+  top: 13px;
+}
+.stupid {
+  overflow: hidden;
+  -webkit-box-shadow: inset 0 0px 0px 0 transparent;
+  -moz-box-shadow: inset 0 0px 0px 0 transparent;
+  box-shadow: inset 0 0px 0px 0 transparent;
+  background: #FABC24;
+}
+.stupid:after {
+  content: "";
+  width: 100px;
+  height: 100px;
+  background: transparent;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  z-index: 200;
+  -webkit-box-shadow: inset -11px -9px 0 0 rgba(230, 164, 32, 0.8);
+  -moz-box-shadow: inset -11px -9px 0 0 rgba(230, 164, 32, 0.8);
+  box-shadow: inset -11px -9px 0 0 rgba(230, 164, 32, 0.8);
+}
+.stupid .top {
+  width: 107px;
+  height: 55px;
+  background: #edeab6;
+  position: absolute;
+  z-index: 100;
+  border-bottom: 4px solid rgba(230, 164, 32, 0.9);
+}
+.stupid .top .box {
+  width: 120px;
+  height: 6px;
+  background: #edeab6;
+  position: absolute;
+  top: 17px;
+  border-top: 2px solid #fabc24;
+  border-bottom: 2px solid #fabc24;
+}
+.stupid .top .box2 {
+  width: 75px;
+  height: 15px;
+  background: #ce801f;
+  position: absolute;
+  left: 12px;
+  top: 33px;
+  border-radius: 7px;
+  overflow: hidden;
+}
+.stupid .top .box2 span {
+  width: 10px;
+  height: 13px;
+  background: #ec9f21;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  bottom: 0;
+  z-index: 55;
+}
+.stupid .top .box2 span:before {
+  content: "";
+  width: 4px;
+  height: 13px;
+  background: #ec9f21;
+  position: absolute;
+  left: -25px;
+}
+.stupid .top .box2 span:after {
+  content: "";
+  width: 4px;
+  height: 13px;
+  background: #ec9f21;
+  position: absolute;
+  left: 30px;
+}
+.stupid .shy-circles {
+  width: 63%;
+  position: absolute;
+  top: 63px;
+  left: 17px;
+}
+.stupid .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.stupid .shy-circles .shy-right {
+  float: right;
+}
+.stupid .shy-circles .shy-left {
+  float: left;
+}
+.stupid .mouth {
+  width: 35px;
+  height: 20px;
+  background: #ce801f;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  bottom: 13px;
+  border-bottom-left-radius: 100px;
+  border-bottom-right-radius: 100px;
+  overflow: hidden;
+}
+.stupid .mouth:after {
+  content: "";
+  width: 18px;
+  height: 18px;
+  background: #ec9f21;
+  position: absolute;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -8px;
+}
+.brat .eyes {
+  width: 45%;
+  margin: 0 auto;
+  position: relative;
+  top: 22px;
+}
+.brat .eyes .eye {
+  width: 16px;
+  height: 16px;
+  background: #edeab6;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+}
+.brat .eyes .eye-left {
+  float: left;
+}
+.brat .eyes .eye-right {
+  float: right;
+}
+.brat .eyes .eye-right:after {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 25px;
+  background: #fabc24;
+  top: 8px;
+}
+.brat .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 25px;
+}
+.brat .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.brat .shy-circles .shy-right {
+  float: right;
+}
+.brat .shy-circles .shy-left {
+  float: left;
+}
+.brat .mouth {
+  width: 52px;
+  height: 16px;
+  background: #ce801f;
+  position: absolute;
+  left: 50%;
+  top: 54px;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.brat .mouth:after {
+  content: "";
+  width: 57px;
+  height: 10px;
+  background: #fabc24;
+  position: absolute;
+  right: -3px;
+  bottom: -5px;
+  -webkit-transform: rotate(-8deg);
+  -moz-transform: rotate(-8deg);
+  -ms-transform: rotate(-8deg);
+  -o-transform: rotate(-8deg);
+}
+.brat .mouth .border {
+  width: 60px;
+  height: 4px;
+  background: #edeab6;
+  position: absolute;
+  bottom: 0;
+}
+.brat .mouth .circle {
+  width: 20px;
+  height: 20px;
+  background: #ec9f21;
+  position: absolute;
+  top: 3px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+.masked {
+  overflow: hidden;
+}
+.masked .ring {
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border-radius: 50%;
+  border: 2px dotted #ec9f21;
+  position: relative;
+  left: 27px;
+  top: -25px;
+}
+.masked .eyes {
+  width: 80%;
+  margin: 0 auto;
+  position: relative;
+  top: -20px;
+}
+.masked .eyes:after {
+  content: "";
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 8px solid #ec9f21;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  left: 50%;
+  top: 25px;
+}
+.masked .eyes .eye {
+  width: 37px;
+  height: 29px;
+  background: #ce801f;
+  position: relative;
+  border-radius: 0 15px 15px 15px;
+}
+.masked .eyes .eye:after {
+  content: "";
+  width: 30px;
+  height: 22px;
+  background: #ec9f21;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  position: absolute;
+  left: 3px;
+  top: 3px;
+}
+.masked .eyes .eye:before {
+  content: "";
+  width: 15px;
+  height: 15px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  background: #edeab6;
+  position: absolute;
+  left: 50%;
+  top: 7px;
+  z-index: 25;
+}
+.masked .eyes .eye-left {
+  float: left;
+}
+.masked .eyes .eye-right {
+  float: right;
+  -webkit-transform: scaleX(-1);
+  -moz-transform: scaleX(-1);
+  -ms-transform: scaleX(-1);
+  -o-transform: scaleX(-1);
+}
+.masked .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: -18px;
+}
+.masked .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.masked .shy-circles .shy-right {
+  float: right;
+}
+.masked .shy-circles .shy-left {
+  float: left;
+}
+.masked .mouth {
+  width: 56px;
+  height: 31px;
+  background: #ec9f21;
+  border: 5px solid #ce801f;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  border-radius: 15px;
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  bottom: 8px;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+.masked .mouth .inside {
+  width: 32px;
+  height: 16px;
+  background: #ce801f;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  bottom: 2px;
+  border-bottom-left-radius: 100px;
+  border-bottom-right-radius: 100px;
+  overflow: hidden;
+}
+.masked .mouth .inside:after {
+  content: "";
+  width: 14px;
+  height: 14px;
+  background: #ec9f21;
+  position: absolute;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -4px;
+}
+.masked .mouth .inside span {
+  position: absolute;
+  width: 40px;
+  height: 3px;
+  background: #edeab6;
+}
+.masked .mouth .inside span:after {
+  content: "";
+  width: 40px;
+  height: 3px;
+  background: #edeab6;
+  position: absolute;
+  bottom: -12px;
+  z-index: 35;
+}
+.summer {
+  overflow: hidden;
+}
+.summer .eyes {
+  width: 70%;
+  margin: 0 auto;
+  height: 4px;
+  background: #ce801f;
+  position: relative;
+  top: 24px;
+}
+.summer .eyes .eye {
+  width: 32px;
+  height: 16px;
+  background: #ce801f;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  top: 0;
+  border-bottom-left-radius: 100px;
+  border-bottom-right-radius: 100px;
+  overflow: hidden;
+}
+.summer .eyes .eye-left {
+  left: 18px;
+}
+.summer .eyes .eye-left:after {
+  content: "";
+  width: 60px;
+  height: 25px;
+  background: #ce801f;
+  position: absolute;
+  left: -23px;
+  z-index: 40;
+  box-sizing: border-box;
+  border-top: 3px solid #ec9f21;
+  border-bottom: 7px solid #ec9f21;
+  -webkit-transform: rotate(-37deg);
+  -moz-transform: rotate(-37deg);
+  -ms-transform: rotate(-37deg);
+  -o-transform: rotate(-37deg);
+}
+.summer .eyes .eye-right {
+  right: -14px;
+}
+.summer .eyes .eye-right:after {
+  content: "";
+  width: 60px;
+  height: 25px;
+  background: #ce801f;
+  position: absolute;
+  left: -30px;
+  top: -5px;
+  z-index: 40;
+  box-sizing: border-box;
+  border-bottom: 7px solid #ec9f21;
+  -webkit-transform: rotate(-37deg);
+  -moz-transform: rotate(-37deg);
+  -ms-transform: rotate(-37deg);
+  -o-transform: rotate(-37deg);
+}
+.summer .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 38px;
+}
+.summer .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.summer .shy-circles .shy-right {
+  float: right;
+}
+.summer .shy-circles .shy-left {
+  float: left;
+}
+.summer .mouth {
+  width: 54px;
+  height: 30px;
+  background: #ce801f;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  bottom: 13px;
+  border-bottom-left-radius: 100px;
+  border-bottom-right-radius: 100px;
+  overflow: hidden;
+}
+.summer .mouth span {
+  position: absolute;
+  height: 4px;
+  background: #edeab6;
+  width: 120px;
+  top: 0;
+}
+.summer .mouth:after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: #ec9f21;
+  position: absolute;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  bottom: -13px;
+}
+.sad .eyes {
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  top: 25px;
+}
+.sad .eyes .eye {
+  width: 16px;
+  height: 16px;
+  background: #edeab6;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+.sad .eyes .eye-left {
+  float: left;
+}
+.sad .eyes .eye-right {
+  float: right;
+}
+.sad .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 30px;
+}
+.sad .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.sad .shy-circles .shy-right {
+  float: right;
+}
+.sad .shy-circles .shy-left {
+  float: left;
+}
+.sad .mouth {
+  width: 30px;
+  height: 30px;
+  border: 5px solid #ce801f;
+  border-color: #ce801f #ce801f transparent transparent;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  top: 47px;
+  -webkit-transform: translateX(-50%) rotate(-45deg);
+  -moz-transform: translateX(-50%) rotate(-45deg);
+  -ms-transform: translateX(-50%) rotate(-45deg);
+  -o-transform: translateX(-50%) rotate(-45deg);
+}
+.suprised .eyes {
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  top: 25px;
+}
+.suprised .eyes .eye {
+  width: 16px;
+  height: 16px;
+  background: #edeab6;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+.suprised .eyes .eye-left {
+  float: left;
+}
+.suprised .eyes .eye-right {
+  float: right;
+}
+.suprised .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 30px;
+}
+.suprised .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.suprised .shy-circles .shy-right {
+  float: right;
+}
+.suprised .shy-circles .shy-left {
+  float: left;
+}
+.suprised .mouth {
+  width: 36px;
+  height: 36px;
+  background: #ce801f;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  bottom: 13px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.suprised .mouth:after {
+  content: "";
+  width: 20px;
+  height: 20px;
+  background: #ec9f21;
+  position: absolute;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  bottom: -5px;
+}
+.suprised .mouth span {
+  width: 42px;
+  height: 4px;
+  background: #edeab6;
+  position: absolute;
+}
+.suprised .mouth span:after {
+  content: "";
+  width: 42px;
+  height: 4px;
+  bottom: -32px;
+  background: #edeab6;
+  position: absolute;
+  z-index: 45;
+}
+.crazy .eyes {
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  top: 25px;
+}
+.crazy .eyes .eye {
+  width: 16px;
+  height: 16px;
+  background: #fabc24;
+  border: 2px solid #ec9f21;
+  box-shadow: 0 0 0 3px #edeab6, 2px 2px 0 3px #ec9f21;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+.crazy .eyes .eye:after {
+  content: "::";
+  position: absolute;
+  color: #eea422;
+  letter-spacing: 2px;
+}
+.crazy .eyes .eye-left {
+  float: left;
+}
+.crazy .eyes .eye-left:after {
+  left: 4px;
+  top: 0;
+}
+.crazy .eyes .eye-right {
+  float: right;
+}
+.crazy .eyes .eye-right:after {
+  right: 3px;
+  top: 0;
+}
+.crazy .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 30px;
+}
+.crazy .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.crazy .shy-circles .shy-right {
+  float: right;
+}
+.crazy .shy-circles .shy-left {
+  float: left;
+}
+.crazy .mouth {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  background: transparent;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: 4px solid #ce801f;
+  border-color: transparent transparent #ce801f #ce801f;
+  -webkit-transform: rotate(-45deg) translateX(-50%);
+  -moz-transform: rotate(-45deg) translateX(-50%);
+  -ms-transform: rotate(-45deg) translateX(-50%);
+  -o-transform: rotate(-45deg) translateX(-50%);
+  left: 43%;
+  top: -10px;
+}
+.crazy .mouth span {
+  position: absolute;
+  width: 3px;
+  height: 12px;
+  border-radius: 1px;
+  background: #edeab6;
+  -webkit-transform: rotate(44deg);
+  -moz-transform: rotate(44deg);
+  -ms-transform: rotate(44deg);
+  -o-transform: rotate(44deg);
+  left: 4px;
+  top: 30px;
+}
+.crazy .mouth span:after {
+  content: "";
+  position: absolute;
+  width: 3px;
+  height: 12px;
+  border-radius: 1px;
+  background: #edeab6;
+  left: -20px;
+  -webkit-transform: rotate(48deg);
+  -moz-transform: rotate(48deg);
+  -ms-transform: rotate(48deg);
+  -o-transform: rotate(48deg);
+  top: -11px;
+}
+.crazy .mouth span:before {
+  content: "";
+  position: absolute;
+  width: 3px;
+  height: 12px;
+  border-radius: 1px;
+  background: #edeab6;
+  right: -20px;
+  -webkit-transform: rotate(-56deg);
+  -moz-transform: rotate(-56deg);
+  -ms-transform: rotate(-56deg);
+  -o-transform: rotate(-56deg);
+  top: -11px;
+}
+.pixel .eyes {
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  top: 25px;
+}
+.pixel .eyes .eye {
+  width: 20px;
+  height: 24px;
+  background: #edeab6;
+  position: relative;
+}
+.pixel .eyes .eye:after {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 9px;
+  left: 4px;
+  bottom: 4px;
+  background: #ec9f21;
+}
+.pixel .eyes .eye span {
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  background: #fabc24;
+}
+.pixel .eyes .eye .top-left {
+  left: 0;
+  top: 0;
+}
+.pixel .eyes .eye .top-right {
+  right: 0;
+  top: 0;
+}
+.pixel .eyes .eye .bottom-left {
+  left: 0;
+  bottom: 0;
+}
+.pixel .eyes .eye .bottom-right {
+  right: 0;
+  bottom: 0;
+}
+.pixel .eyes .eye-left {
+  float: left;
+}
+.pixel .eyes .eye-right {
+  float: right;
+}
+.pixel .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 30px;
+}
+.pixel .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  background: #ec9f21;
+}
+.pixel .shy-circles .shy-right {
+  float: right;
+}
+.pixel .shy-circles .shy-left {
+  float: left;
+}
+.pixel .mouth {
+  width: 36px;
+  height: 24px;
+  background: #ce801f;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate(-50%);
+  -moz-transform: translate(-50%);
+  -ms-transform: translate(-50%);
+  -o-transform: translate(-50%);
+  top: 57px;
+}
+.pixel .mouth span {
+  position: absolute;
+  width: 4px;
+  height: 12px;
+  background: #fabc24;
+  bottom: 0;
+}
+.pixel .mouth span:after {
+  content: "";
+  position: absolute;
+  width: 4px;
+  height: 8px;
+  background: #fabc24;
+  left: 4px;
+  bottom: 0;
+}
+.pixel .mouth span:before {
+  content: "";
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: #fabc24;
+  left: 8px;
+  bottom: 0;
+}
+.pixel .mouth .right {
+  right: 0;
+  -webkit-transform: scaleX(-1);
+  -moz-transform: scaleX(-1);
+  -ms-transform: scaleX(-1);
+  -o-transform: scaleX(-1);
+}
+.pixel .mouth .left {
+  left: 0;
+}
+.ring-eyes {
+  overflow: hidden;
+}
+.ring-eyes .eyes-wrapper {
+  background: #ce801f;
+  position: relative;
+  top: 15px;
+  padding: 4px 0;
+}
+.ring-eyes .eyes-wrapper .eyes {
+  width: 50%;
+  margin: 0 auto;
+}
+.ring-eyes .eyes-wrapper .eyes .eye {
+  width: 16px;
+  height: 16px;
+  background: #edeab6;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+.ring-eyes .eyes-wrapper .eyes .eye-left {
+  float: left;
+}
+.ring-eyes .eyes-wrapper .eyes .eye-right {
+  float: right;
+}
+.ring-eyes .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 22px;
+}
+.ring-eyes .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.ring-eyes .shy-circles .shy-right {
+  float: right;
+}
+.ring-eyes .shy-circles .shy-left {
+  float: left;
+}
+.ring-eyes .mouth {
+  width: 44px;
+  height: 20px;
+  background: #ce801f;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  bottom: 24px;
+  border-bottom-left-radius: 100px;
+  border-bottom-right-radius: 100px;
+  overflow: hidden;
+}
+.ring-eyes .mouth:after {
+  content: "";
+  width: 22px;
+  height: 22px;
+  background: #ec9f21;
+  position: absolute;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  bottom: -8px;
+}
+.crying .eyes {
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  top: 25px;
+}
+.crying .eyes .eye {
+  width: 16px;
+  height: 16px;
+  background: #edeab6;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+.crying .eyes .eye-left {
+  float: left;
+}
+.crying .eyes .eye-right {
+  float: right;
+}
+.crying .shy-circles {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 30px;
+}
+.crying .shy-circles .shy {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #ec9f21;
+}
+.crying .shy-circles .shy-right {
+  float: right;
+}
+.crying .shy-circles .shy-left {
+  float: left;
+}
+.crying .mouth {
+  width: 46px;
+  height: 20px;
+  background: transparent;
+  position: relative;
+  left: 50%;
+  top: 34px;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  -webkit-border-radius: 35px;
+  -moz-border-radius: 35px;
+  border-radius: 35px;
+}
+.crying .mouth:after {
+  content: "";
+  position: absolute;
+  width: 15px;
+  height: 8px;
+  background: #ce801f;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  left: 50%;
+  top: 6px;
+}
+.crying .mouth span {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: #ce801f;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+.crying .mouth .left {
+  left: 0;
+}
+.crying .mouth .right {
+  right: 0;
+}
+.music .eyes {
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  top: 25px;
+}
+.music .eyes .eye {
+  width: 20px;
+  height: 20px;
+  background: #fabc24;
+  box-sizing: border-box;
+  border: 4px solid transparent;
+  border-color: #edeab6 #edeab6 transparent transparent;
+  border-radius: 50%;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+}
+.music .eyes .eye-left {
+  float: left;
+}
+.music .eyes .eye-right {
+  float: right;
+}
+.music .music-note {
+  width: 20px;
+  height: 13px;
+  background: #ec9f21;
+  position: absolute;
+  -webkit-transform: scale(0.8) skewX(-7deg);
+  -moz-transform: scale(0.8) skewX(-7deg);
+  -ms-transform: scale(0.8) skewX(-7deg);
+  -o-transform: scale(0.8) skewX(-7deg);
+  left: 15px;
+  top: 45px;
+}
+.music .music-note span {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #ec9f21;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+.music .music-note .right {
+  left: 12px;
+  top: 20px;
+}
+.music .music-note .left {
+  left: -5px;
+  top: 20px;
+}
+.music .music-note:after {
+  content: "";
+  width: 2px;
+  height: 12px;
+  background: #ec9f21;
+  position: absolute;
+  left: 0;
+  bottom: -12px;
+}
+.music .music-note:before {
+  content: "";
+  width: 2px;
+  height: 12px;
+  background: #ec9f21;
+  position: absolute;
+  right: 0;
+  bottom: -12px;
+}
+.music .mouth {
+  width: 16px;
+  height: 16px;
+  background: #ce801f;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  position: absolute;
+  left: 35px;
+  top: 61px;
+}
+.music .mouth:after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  background: #ec9f21;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  position: absolute;
+  right: -31px;
+  top: -12px;
+}
+.nerd .eyes {
+  width: 60%;
+  margin: 0 auto;
+  position: relative;
+  top: 25px;
+}
+.nerd .eyes:after {
+  content: "";
+  width: 4px;
+  height: 8px;
+  background: #edeab6;
+  position: absolute;
+  left: 50%;
+  top: -1px;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+.nerd .eyes .eye {
+  width: 28px;
+  height: 20px;
+  background: #fabc24;
+  box-sizing: border-box;
+  border: 4px solid #ce801f;
+  border-radius: 10px;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+.nerd .eyes .eye:before {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 4px;
+  top: 0;
+  background: #ce801f;
+}
+.nerd .eyes .eye:after {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  top: 6px;
+  background: #edeab6;
+}
+.nerd .eyes .eye-left {
+  float: left;
+}
+.nerd .eyes .eye-left:before {
+  left: -2px;
+}
+.nerd .eyes .eye-left:after {
+  left: 9px;
+}
+.nerd .eyes .eye-right {
+  float: right;
+}
+.nerd .eyes .eye-right:before {
+  right: -2px;
+}
+.nerd .eyes .eye-right:after {
+  right: 9px;
+}
+.nerd .shy div {
+  width: 4px;
+  height: 4px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  background: #ec9f21;
+  position: absolute;
+  top: 50px;
+}
+.nerd .shy div:after {
+  content: "";
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  background: #ec9f21;
+  top: 5px;
+  left: -2px;
+}
+.nerd .shy div:before {
+  content: "";
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  background: #ec9f21;
+  top: 5px;
+  right: -3px;
+}
+.nerd .shy .shy-left {
+  left: 22px;
+  -webkit-transform: rotate(-15deg);
+  -moz-transform: rotate(-15deg);
+  -ms-transform: rotate(-15deg);
+  -o-transform: rotate(-15deg);
+}
+.nerd .shy .shy-right {
+  right: 22px;
+  -webkit-transform: rotate(15deg);
+  -moz-transform: rotate(15deg);
+  -ms-transform: rotate(15deg);
+  -o-transform: rotate(15deg);
+}
+.nerd .mouth {
+  width: 28px;
+  height: 4px;
+  background: #ce801f;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  left: 50%;
+  top: 60px;
+}
+.nerd .mouth:after {
+  content: "";
+  width: 8px;
+  height: 6px;
+  background: #edeab6;
+  position: absolute;
+  left: 8px;
+  top: 4px;
+}
\ No newline at end of file
diff --git a/css-user-avatars/license.txt b/css-user-avatars/license.txt
new file mode 100644
index 0000000..d1347ea
--- /dev/null
+++ b/css-user-avatars/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Ahmad Shadeed (https://codepen.io/shadeed/pen/QwvmXo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css-user-avatars/src/index.html b/css-user-avatars/src/index.html
new file mode 100644
index 0000000..4bc5eb0
--- /dev/null
+++ b/css-user-avatars/src/index.html
@@ -0,0 +1,256 @@
+<div class="smile smile-happy">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile tired">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile bored">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile replete">
+  <div class="star"><span></span></div>
+  <div class="eyes cf">
+    <div class="eye eye-left"></div>
+    <div class="eye eye-right"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"><span></span></div>
+</div>
+
+<div class="smile funny">
+  <div class="eyebrow"></div>
+  <div class="eyes cf">
+    <div class="eye eye-left"></div>
+    <div class="eye eye-right"></div>
+  </div>
+  <div class="nose"></div>
+  <div class="angry">
+    <div class="right"></div>
+    <div class="left"></div>
+  </div>
+  <div class="circles">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="smile polite">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile sick">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="ring"></div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile stupid">
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="top">
+    <div class="box"></div>
+    <div class="box2"><span></span></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile brat">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth">
+    <span class="circle"></span>
+    <span class="border"></span>
+  </div>
+</div>
+
+<div class="smile masked">
+  <div class="ring"></div>
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth">
+    <div class="inside"><span></span></div>
+  </div>
+</div>
+
+<div class="smile summer">
+  <div class="eyes">
+    <div class="eye eye-left"></div>
+    <div class="eye eye-right"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"><span></span></div>
+</div>
+
+<div class="smile sad">
+  <div class="eyes cf">
+    <div class="eye eye-left"></div>
+    <div class="eye eye-right"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"></div>
+</div>
+
+<div class="smile suprised">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"><span></span>
+  </div>
+</div>
+
+<div class="smile crazy">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth"><span></span></div>
+</div>
+
+<div class="smile pixel">
+     <div class="eyes cf">
+         <div class="eye eye-right">
+              <span class="bottom-left"></span>
+              <span class="bottom-right"></span>
+              <span class="top-left"></span>
+              <span class="top-right"></span>
+         </div>
+         <div class="eye eye-left">
+              <span class="bottom-left"></span>
+              <span class="bottom-right"></span>
+              <span class="top-left"></span>
+              <span class="top-right"></span>
+         </div>
+     </div>
+     <div class="shy-circles cf">
+         <div class="shy shy-left"></div>
+         <div class="shy shy-right"></div>
+     </div>
+     <div class="mouth">
+          <span class="left"></span>
+          <span class="right"></span>
+     </div>
+</div>
+
+<div class="smile ring-eyes">
+     <div class="eyes-wrapper cf">
+         <div class="eyes">
+              <div class="eye eye-right"></div>
+              <div class="eye eye-left"></div>
+         </div>
+       </div>
+       <div class="shy-circles cf">
+         <div class="shy shy-left"></div>
+         <div class="shy shy-right"></div>
+       </div>
+     <div class="mouth"></div>
+</div>
+
+<div class="smile crying">
+  <div class="eyes cf">
+    <div class="eye eye-right"></div>
+    <div class="eye eye-left"></div>
+  </div>
+  <div class="shy-circles cf">
+    <div class="shy shy-left"></div>
+    <div class="shy shy-right"></div>
+  </div>
+  <div class="mouth">
+       <span class="left"></span>
+       <span class="right"></span>
+  </div>
+</div>
+
+<div class="smile music">
+     <div class="eyes cf">
+         <div class="eye eye-right"></div>
+         <div class="eye eye-left"></div>
+     </div>
+     <div class="music-note cf">
+          <span class="left"></span>
+          <span class="right"></span>
+     </div>
+     <div class="mouth"></div>
+</div>
+
+<div class="smile nerd">
+     <div class="eyes cf">
+          <div class="eye eye-right"></div>
+          <div class="eye eye-left"></div>
+     </div>
+     <div class="shy cf">
+          <div class="shy-left"></div>
+          <div class="shy-right"></div>
+     </div>
+     <div class="mouth"></div>
+</div>
\ No newline at end of file
diff --git a/css-user-avatars/src/script.js b/css-user-avatars/src/script.js
new file mode 100644
index 0000000..8a786e4
--- /dev/null
+++ b/css-user-avatars/src/script.js
@@ -0,0 +1,11 @@
+/*
+This is part of my front-end development practise. I'm practising since 204 days and counting :) my goal is to reach 300 days of continuous practise.
+
+The faces by the amazing @JustinMezzell -> http://drbl.in/maCB
+
+My website:
+www.ishadeed.com
+
+Follow Me on twitter: @shadeed9
+
+*/
\ No newline at end of file
diff --git a/css-user-avatars/src/style.less b/css-user-avatars/src/style.less
new file mode 100644
index 0000000..5dfb53d
--- /dev/null
+++ b/css-user-avatars/src/style.less
@@ -0,0 +1,1795 @@
+.cf:after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+/* Mixins */
+.inner-shadow (@x: 0, @y: 0px, @blur: 0px, @spread: 0, @color: transparent) {
+    -webkit-box-shadow: inset @x @y @blur @spread @color;
+    -moz-box-shadow:    inset @x @y @blur @spread @color;
+    box-shadow:         inset @x @y @blur @spread @color;
+}
+
+.border-radius (@radius: 5px) {
+    -webkit-border-radius: @radius;
+    -moz-border-radius:    @radius;
+    border-radius:         @radius;
+}
+
+.transform(@string){
+    -webkit-transform: @string;
+    -moz-transform:      @string;
+    -ms-transform:       @string;
+    -o-transform:        @string;
+}
+
+.smile {
+  width: 100px;
+  height: 100px;
+  background: #fabc24;
+  .border-radius(50%);
+  .inner-shadow(-11px, -9px, 0, 0, #f3ad22);
+  position: relative;
+  margin: 0 20px 20px 0;
+  float: left;
+}
+
+/* Happy */
+
+.smile-happy {
+  .eyes {
+    width: 50%;
+    margin: 0 auto;
+    position: relative;
+    top: 25px;
+    
+    .eye {
+      width: 16px;
+      height: 16px;
+      background: #edeab6;
+      .border-radius(50%);
+      -webkit-animation-name: openEyes;
+  -webkit-animation-duration: .75s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: ease-in-out;
+  -webkit-animation-direction: alternate;
+      -webkit-animation-delay: 1s;
+    }
+    
+    .eye-left {float: left;}
+    .eye-right {float: right;}
+  }
+  
+  @-webkit-keyframes openEyes1 {
+    from {
+      transform: rotateX(0);
+    }
+    to {
+      transform: rotateX(85deg);
+    }
+  }
+  
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: 30px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    width: 54px;
+    height: 30px;
+    background: #ce801f;
+    position: absolute;
+    left: 50%;
+    .transform(translateX(-50%));
+    bottom: 13px;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;
+    overflow: hidden;
+    
+    &:after {
+      content: "";
+      width: 28px;
+      height: 28px;
+      background: #ec9f21;
+      position: absolute;
+      .border-radius(50%);
+      left: 50%;
+      .transform(translateX(-50%));
+      bottom: -8px;
+    }
+  }
+}
+
+/* Tired */
+.tired {
+  .eyes {
+    width: 50%;
+    margin: 0 auto;
+    position: relative;
+    top: 30px;
+    
+    .eye {
+      width: 18px;
+      height: 4px;
+      background: #edeab6;
+      .transform(rotate(45deg));
+
+      &:after {
+        content: "";
+        width: 18px;
+        position: absolute;
+        height: 4px;
+        background: #edeab6;
+        .transform(rotate(90deg));
+      }
+    }
+    
+    .eye-left {float: left;}
+    .eye-right {float: right;}
+  }
+  
+  .mouth {
+    width: 41px;
+    height: 20px;
+    background: #ce801f;
+    position: absolute;
+    left: 50%;
+    .transform(translateX(-50%) scaleY(-1));
+    bottom: 27px;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;
+    
+    &:after {
+      content: "";
+      width: 20px;
+      height: 17px;
+      background: #ec9f21;
+      position: absolute;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 3px;
+      border-bottom-left-radius: 3px;
+      z-index: 5;
+      top: -10px;
+      left: 50%;
+      .transform(translateX(-50%));
+    }
+  }
+}
+
+.bored {
+  .eyes {
+    width: 50%;
+    margin: 0 auto;
+    position: relative;
+    top: 25px;
+    
+    .eye {
+      width: 16px;
+      height: 16px;
+      background: #edeab6;
+      border-radius: 50%;
+    }
+    
+    .eye-left {float: left;}
+    .eye-right {float: right;}
+  }
+  
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: 30px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    width: 20px;
+    height: 4px;
+    background: #ce801f;
+    position: absolute;
+    left: 50%;
+    .transform(translateX(-50%));
+    bottom: 37px;
+  }
+}
+
+.replete {
+  .star {
+    width: 0;
+    height: 0;
+    position: absolute;
+    left: 50%;
+    top: 12px;
+    .transform(translateX(-50%) scaleY(-1) rotateX(20deg));
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    border-bottom: 10px solid #edeab6;
+    
+    &:after {
+      content: "";
+      position: absolute;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-bottom: 6px solid #edeab6;
+      left: -10px;
+      top: -1px;
+      .transform(rotate(-135deg) rotateX(45deg) scale(1.15));
+    }
+    
+    &:before {
+      content: "";
+      position: absolute;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-bottom: 6px solid #edeab6;
+      left: -6px;
+      top: 0px;
+      .transform(rotate(135deg) rotateX(45deg) scale(1.15));
+    }
+    
+    span {
+      position: absolute;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 8px solid #edeab6;
+      top: 9px;
+      left: 50%;
+      .transform(translateX(-50%) rotateY(65deg));
+    }
+  }
+  
+  .eyes {
+    width: 45%;
+    margin: 0 auto;
+    position: relative;
+    top: 28px;
+    
+    .eye {
+      width: 16px;
+      height: 16px;
+      background: #edeab6;
+      .border-radius(50%);
+      .transform(scaleY(-1));
+      overflow: hidden;
+      position: relative;
+      
+      &:after {
+        content: "";
+        position: absolute;
+        width: 20px;
+        height: 25px;
+        background: #fabc24;
+        top: 8px;
+      }
+    }
+    
+    .eye-left {float: left;}
+    .eye-right {float: right}
+  }
+  
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: 34px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    width: 30px;
+    height: 14px;
+    background: transparent;
+    position: absolute;
+    left: 50%;
+    .transform(translateX(-50%));
+    top: 55px;
+    overflow: hidden;
+    z-index: 15;
+    
+    &:before {
+      content: "";
+      width: 7px;
+      height: 7px;
+      background: #fabc24;
+      position: absolute;
+      left: -6px;
+      top: 1px;
+      .border-radius(50%);
+      border: 3px solid #ce801f;
+      z-index: 20;
+    }
+    
+    &:after {
+      content: "";
+      width: 7px;
+      height: 7px;
+      background: #fabc24;
+      position: absolute;
+      right: -6px;
+      top: 1px;
+      .border-radius(50%);
+      border: 3px solid #ce801f;
+      z-index: 20;
+    }
+    
+    span {
+      background: #ce801f;
+      display: block;
+      height: 4px;
+      width: 100%;
+      position: absolute;
+      top: 5px;
+    }
+  }
+}
+
+.funny {
+  background: #edeab6;
+  .inner-shadow(-11px, -9px, 0, 0, #f4d36d);
+  
+  .eyebrow {
+    width: 0px;
+    height: 0px;
+    border-left: 18px solid transparent;
+    border-right: 18px solid transparent;
+    border-top: 8px solid #fabc24;
+    position: absolute;
+    left: 50%;
+    top: 20px;
+    .transform(translateX(-50%));
+  }
+  
+  .eyes {
+    width: 50%;
+    margin: 0 auto;
+    position: relative;
+    top: 28px;
+    
+    .eye {
+      width: 18px;
+      height: 18px;
+      background: #ce801f;
+      .border-radius(50%);
+    }
+    
+    .eye-left {float: left;}
+    .eye-right {float: right}
+  }
+  
+  .nose {
+    width: 8px;
+    height: 8px;
+    .border-radius(50%);
+    background: #ec9f21;
+    position: absolute;
+    left: 50%;
+    .transform(translateX(-50%));
+    top: 50px;
+    
+    &:after {
+      content: "";
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+      left: 30px;
+    }
+    
+    &:before {
+      content: "";
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+      left: -30px;
+    }
+  }
+  
+  .angry {
+    width: 75%;
+    margin: 0 auto;
+    position: absolute;
+    top: 60px;
+    left: 15px;
+    
+    div {
+      width: 0;
+      height: 0;
+      border-left: 20px solid transparent;
+      border-right: 6px solid transparent;
+      border-top: 8px solid #fabc24;
+      position: relative;
+      .transform(rotate(55deg));
+    }
+    
+    .right { 
+      float: right;
+      right: 4px;
+    }
+    .left { 
+      float: left; 
+      .transform(rotate(-55deg) scaleX(-1));
+    }
+    
+  }
+  
+  .circles {
+    div {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+      position: relative;
+      left: 35px;
+      top: 44px;
+      margin-bottom: 2px;
+      
+      &:after {
+        content: "";
+        width: 8px;
+        height: 8px;
+        .border-radius(50%);
+        background: #ec9f21;
+        position: absolute;
+        left: 22px;
+      }
+    }
+  }
+}
+
+.polite {
+  .eyes {
+    width: 50%;
+    margin: 0 auto;
+    position: relative;
+    top: 25px;
+    
+    .eye {
+      width: 16px;
+      height: 16px;
+      background: #edeab6;
+      .border-radius(50%);
+    }
+    
+    .eye-left {float: left;}
+    .eye-right {float: right;}
+  }
+  
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: 30px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    background: transparent;
+    border: 6px solid #ce801f;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    border-right-color: transparent;
+    position: absolute;
+    left: 50%;
+    top: 5px;
+    .transform(translateX(-50%)); 
+  }
+}
+
+.sick {
+  overflow: hidden;
+  .eyes {
+    width: 50%;
+    margin: 0 auto;
+    position: relative;
+    top: 25px;
+    
+    .eye {
+      width: 16px;
+      height: 16px;
+      background: #edeab6;
+      border-radius: 50%;
+    }
+    
+    .eye-left {float: left;}
+    .eye-right {float: right;}
+  }
+  
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: 30px;
+    overflow: hidden;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    width: 44px;
+    height: 55px;
+    background: #ce801f;
+    position: absolute;
+    left: 50%;
+    .transform(translateX(-50%));
+    .border-radius(4px);
+    bottom: -10px;
+    zo
+    
+    &:before {
+      content: "";
+      width: 43px;
+      height: 25px;
+      background: #FABC24;
+      position: absolute;
+      z-index: 500;
+      left: -23px;
+      top: 9px;
+      border-top-right-radius: 30px;
+      border-bottom-right-radius: 15px;
+      .transform(rotateY(30deg) rotate(90deg));
+    }
+    
+  }
+  
+  .ring {
+    position: absolute;
+    width: 120px;
+    height: 16px;
+    background: #e99d21;
+    top: 13px;
+  }
+ 
+}
+
+.stupid {
+  overflow: hidden;
+  .inner-shadow(0);
+  background: #FABC24;
+  
+  &:after {
+    content: "";
+    width: 100px;
+    height: 100px;
+    background: transparent;
+    .border-radius(50%);
+    position: absolute;
+    right: 0px; top: 0px;
+    z-index: 200;
+    .inner-shadow(-11px, -9px, 0, 0, rgba(230,164,32,0.8));
+  }
+  
+  .top {
+    width: 107px;
+    height: 55px;
+    background: #edeab6;
+    position: absolute;
+    z-index: 100;
+    border-bottom: 4px solid rgba(230,164,32,0.9);
+    
+    .box {
+      width: 120px;
+      height: 6px;
+      background: #edeab6;
+      position: absolute;
+      top: 17px;
+      border-top: 2px solid #fabc24;
+      border-bottom: 2px solid #fabc24;
+    }
+    
+    .box2 {
+      width: 75px;
+      height: 15px;
+      background: #ce801f;
+      position: absolute;
+      left: 12px;
+      top: 33px;
+      border-radius: 7px;
+      overflow: hidden;
+      
+      span {
+        width: 10px;
+        height: 13px;
+        background: #ec9f21;
+        position: absolute;
+        left: 50%;
+        .transform(translateX(-50%));
+        bottom: 0;
+        z-index: 55;
+        
+        &:before {
+          content: "";
+          width: 4px;
+          height: 13px;
+          background: #ec9f21;
+          position: absolute;
+          left: -25px;
+        }
+        
+        &:after {
+          content: "";
+          width: 4px;
+          height: 13px;
+          background: #ec9f21;
+          position: absolute;
+          left: 30px;
+        }
+      }
+    }
+  }
+  
+  .shy-circles {
+    width: 63%;
+    position: absolute;
+    top: 63px;
+    left: 17px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    width: 35px;
+    height: 20px;
+    background: #ce801f;
+    position: absolute;
+    left: 50%;
+    .transform(translateX(-50%));
+    bottom: 13px;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;
+    overflow: hidden;
+    
+    &:after {
+      content: "";
+      width: 18px;
+      height: 18px;
+      background: #ec9f21;
+      position: absolute;
+      .border-radius(50%);
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -8px;
+    }
+  }
+}
+
+.brat {
+  .eyes {
+    width: 45%;
+    margin: 0 auto;
+    position: relative;
+    top: 22px;
+    
+    .eye {
+      width: 16px;
+      height: 16px;
+      background: #edeab6;
+      .border-radius(50%);
+      overflow: hidden;
+      position: relative;
+    }
+    
+    .eye-left {
+      float: left;
+    }
+    .eye-right {
+      float: right;
+      
+      &:after {
+        content: "";
+        position: absolute;
+        width: 20px;
+        height: 25px;
+        background: #fabc24;
+        top: 8px;
+      }
+    }
+  }
+  
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: 25px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    width: 52px;
+    height: 16px;
+    background: #ce801f;
+    position: absolute;
+    left: 50%;
+    top: 54px;
+    .transform(translateX(-50%));
+    .border-radius(6px);
+    overflow: hidden;
+    
+    &:after {
+      content: "";
+      width: 57px;
+      height: 10px;
+      background: #fabc24;
+      position: absolute;
+      right: -3px;
+      bottom: -5px;
+      .transform(rotate(-8deg));
+    }
+    
+    .border {
+      width: 60px;
+      height: 4px;
+      background: #edeab6;
+      position: absolute;
+      bottom: 0;
+    }
+    
+    .circle {
+      width: 20px;
+      height: 20px;
+      background: #ec9f21;
+      position: absolute;
+      top: 3px;
+      .border-radius(50%);
+      left: 50%;
+      .transform(translateX(-50%));
+    }
+  }
+}
+
+.masked {
+  overflow: hidden;
+  
+  .ring {
+    width: 40px;
+    height: 40px;
+    background: transparent;
+    border-radius: 50%;
+    border: 2px dotted #ec9f21;
+    position: relative;
+    left: 27px;
+    top: -25px;
+  }
+  
+  .eyes {
+    width: 80%;
+    margin: 0 auto;
+    position: relative;
+    top: -20px;
+    
+    &:after {
+      content: "";
+      width: 0;
+      height: 0;
+      position: absolute;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-bottom: 8px solid #ec9f21;
+      .transform(translateX(-50%));
+      left: 50%;
+      top: 25px;
+    }
+    
+    .eye {
+      width: 37px;
+      height: 29px;
+      background: #ce801f;
+      position: relative;
+      border-radius: 0 15px 15px 15px;
+      
+      &:after {
+        content: "";
+        width: 30px;
+        height: 22px;
+        background: #ec9f21;
+        .border-radius(10px);
+        position: absolute;
+        left: 3px;
+        top: 3px;
+      }
+      
+      &:before {
+        content: "";
+        width: 15px;
+        height: 15px;
+        .border-radius(50%);
+        .transform(translateX(-50%));
+        background: #edeab6;
+        position: absolute;
+        left: 50%;
+        top: 7px;
+        z-index: 25;
+      }
+    }
+    
+    .eye-left {float: left;}
+    .eye-right {float: right; .transform(scaleX(-1));}
+  }
+  
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: -18px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    width: 56px;
+    height: 31px;
+    background: #ec9f21;
+    border: 5px solid #ce801f;
+    .border-radius(15px);
+    box-sizing: border-box;
+    position: absolute;
+    left: 50%;
+    bottom: 8px;
+    .transform(translateX(-50%));
+    
+    .inside {
+      width: 32px;
+      height: 16px;
+      background: #ce801f;
+      position: absolute;
+      left: 50%;
+      .transform(translateX(-50%));
+      bottom: 2px;
+      border-bottom-left-radius: 100px;
+      border-bottom-right-radius: 100px;
+      overflow: hidden;
+
+      &:after {
+        content: "";
+        width: 14px;
+        height: 14px;
+        background: #ec9f21;
+        position: absolute;
+        .border-radius(50%);
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: -4px;
+      }
+      
+      span {
+        position: absolute;
+        width: 40px;
+        height: 3px;
+        background: #edeab6;
+        
+        &:after {
+          content: "";
+          width: 40px;
+          height: 3px;
+          background: #edeab6;
+          position: absolute;
+          bottom: -12px;
+          z-index: 35;
+        }
+      }
+    }
+  }
+}
+
+.summer {
+  overflow: hidden;
+  
+  .eyes {
+    width: 70%;
+    margin: 0 auto;
+    height: 4px;
+    background: #ce801f;
+    position: relative;
+    top: 24px;
+    
+    .eye {
+      width: 32px;
+      height: 16px;
+      background: #ce801f;
+      position: absolute;
+      .transform(translateX(-50%));
+      top: 0;
+      border-bottom-left-radius: 100px;
+      border-bottom-right-radius: 100px;
+      overflow: hidden;
+    }
+    
+    .eye-left { 
+      left: 18px;
+      
+      &:after {
+        content: "";
+        width: 60px;
+        height: 25px;
+        background: #ce801f;
+        position: absolute;
+        left: -23px;
+        z-index: 40;
+        box-sizing: border-box;
+        border-top: 3px solid #ec9f21;
+        border-bottom: 7px solid #ec9f21;
+        .transform(rotate(-37deg));
+      }
+    }
+    .eye-right {
+      right: -14px;
+      
+      &:after {
+        content: "";
+        width: 60px;
+        height: 25px;
+        background: #ce801f;
+        position: absolute;
+        left: -30px;
+        top: -5px;
+        z-index: 40;
+        box-sizing: border-box;
+        border-bottom: 7px solid #ec9f21;
+        .transform(rotate(-37deg));
+      }
+    }
+  }
+  
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: 38px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    width: 54px;
+    height: 30px;
+    background: #ce801f;
+    position: absolute;
+    left: 50%;
+    .transform(translateX(-50%));
+    bottom: 13px;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;
+    overflow: hidden;
+    
+    span {
+      position: absolute;
+      height: 4px;
+      background: #edeab6;
+      width: 120px;
+      top: 0;
+    }
+    
+    &:after {
+      content: "";
+      width: 28px;
+      height: 28px;
+      background: #ec9f21;
+      position: absolute;
+      .border-radius(50%);
+      left: 50%;
+      .transform(translateX(-50%));
+      bottom: -13px;
+    }
+  }
+}
+
+.sad {
+  .eyes {
+    width: 50%;
+    margin: 0 auto;
+    position: relative;
+    top: 25px;
+    
+    .eye {
+      width: 16px;
+      height: 16px;
+      background: #edeab6;
+      .border-radius(50%);
+    }
+    
+    .eye-left {float: left;}
+    .eye-right {float: right;}
+  }
+  
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: 30px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    width: 30px;
+    height: 30px;
+    border: 5px solid #ce801f;
+    border-color: #ce801f #ce801f  transparent transparent;
+    .border-radius(50%);
+    position: absolute;
+    left: 50%;
+    top: 47px;
+    .transform(translateX(-50%) rotate(-45deg));
+  }
+}
+
+.suprised {
+  .eyes {
+    width: 50%;
+    margin: 0 auto;
+    position: relative;
+    top: 25px;
+    
+    .eye {
+      width: 16px;
+      height: 16px;
+      background: #edeab6;
+      .border-radius(50%);
+    }
+    
+    .eye-left {float: left;}
+    .eye-right {float: right;}
+  }
+  
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: 30px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    width: 36px;
+    height: 36px;
+    background: #ce801f;
+    position: absolute;
+    left: 50%;
+    .transform(translateX(-50%));
+    bottom: 13px;
+    .border-radius(50%);
+    overflow: hidden;
+    
+    &:after {
+      content: "";
+      width: 20px;
+      height: 20px;
+      background: #ec9f21;
+      position: absolute;
+      .border-radius(50%);
+      left: 50%;
+      .transform(translateX(-50%));
+      bottom: -5px;
+    }
+    
+    span {
+      width: 42px;
+      height: 4px;
+      background: #edeab6;
+      position: absolute;
+      
+      &:after {
+        content: "";
+        width: 42px;
+        height: 4px;
+        bottom: -32px;
+        background: #edeab6;
+        position: absolute;
+        z-index: 45;
+      }
+    }
+  }
+}
+
+.crazy {
+  .eyes {
+    width: 50%;
+    margin: 0 auto;
+    position: relative;
+    top: 25px;
+    
+    .eye {
+      width: 16px;
+      height: 16px;
+      background: #fabc24;
+      border: 2px solid #ec9f21;
+      box-shadow: 0 0 0 3px #edeab6, 2px 2px 0 3px #ec9f21;
+      .border-radius(50%);
+      
+      &:after {
+        content: "::";
+        position: absolute;
+        color: #eea422;
+        letter-spacing: 2px;
+      }
+    }
+    
+    .eye-left { 
+      float: left;
+      
+      &:after {
+        left: 4px; 
+        top: 0;
+      }
+    }
+    .eye-right {
+      float: right;
+      
+      &:after {
+        right: 3px; 
+        top: 0;
+      }
+    }
+  }
+  
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: 30px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    position: relative;
+    width: 50px;
+    height: 50px;
+    background: transparent;
+    .border-radius(50%);
+    box-sizing: border-box;
+    border: 4px solid #ce801f;
+    border-color: transparent transparent #ce801f #ce801f;
+    .transform(rotate(-45deg) translateX(-50%));
+    left: 43%;
+    top: -10px;
+    
+    span {
+      position: absolute;
+      width: 3px;
+      height: 12px;
+      border-radius: 1px;
+      background: #edeab6;
+      .transform(rotate(44deg));
+      left: 4px;
+      top: 30px;
+      
+      &:after {
+         content: "";
+         position: absolute;
+         width: 3px;
+         height: 12px;
+         border-radius: 1px;
+         background: #edeab6;
+         left: -20px;
+         .transform(rotate(48deg));
+         top: -11px;
+      }
+      
+      &:before {
+         content: "";
+         position: absolute;
+         width: 3px;
+         height: 12px;
+         border-radius: 1px;
+         background: #edeab6;
+         right: -20px;
+         .transform(rotate(-56deg));
+         top: -11px;
+      }
+    }
+  }
+}
+
+.pixel {
+    .eyes {
+    width: 50%;
+    margin: 0 auto;
+    position: relative;
+    top: 25px;
+    
+    .eye {
+      width: 20px;
+      height: 24px;
+      background: #edeab6;
+      position: relative;
+
+      &:after {
+        content: "";
+        position: absolute;
+        width: 8px;
+        height: 9px;
+        left: 4px;
+        bottom: 4px;
+        background: #ec9f21;
+      }
+
+      span {
+        width: 4px;
+        height: 4px;
+        position: absolute;
+        background: #fabc24;
+      }
+      
+      .top-left {
+        left: 0;
+        top: 0;
+      }
+
+      .top-right {
+        right: 0;
+        top: 0;
+      }
+
+      .bottom-left {
+        left: 0;
+        bottom: 0;
+      }
+
+      .bottom-right {
+        right: 0;
+        bottom: 0;
+      }
+    }
+    
+    .eye-left { 
+      float: left;
+     
+    }
+    .eye-right {
+      float: right;
+      
+    }
+  }
+
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: 30px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+
+  .mouth {
+    width: 36px;
+    height: 24px;
+    background: #ce801f;
+    position: absolute;
+    left: 50%;
+    .transform(translate(-50%));
+    top: 57px;
+
+    span {
+        position: absolute;
+        width: 4px;
+        height: 12px;
+        background: #fabc24;
+        bottom: 0;
+
+        &:after {
+            content: "";
+            position: absolute;
+            width: 4px;
+            height: 8px;
+            background: #fabc24;
+            left: 4px;
+            bottom: 0;
+        }
+
+        &:before {
+            content: "";
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            background: #fabc24;
+            left: 8px;
+            bottom: 0;
+        }
+    }
+
+    .right {
+        right: 0;
+        .transform(scaleX(-1));
+    }
+
+    .left {
+        left: 0;
+    }
+  }
+}
+
+.ring-eyes {
+    overflow: hidden;
+
+    .eyes-wrapper {
+        background: #ce801f;
+        position: relative;
+        top: 15px;
+        padding: 4px 0;
+
+        .eyes {
+        width: 50%;
+        margin: 0 auto;
+        
+        .eye {
+          width: 16px;
+          height: 16px;
+          background: #edeab6;
+          .border-radius(50%);
+        }
+        
+        .eye-left {float: left;}
+        .eye-right {float: right;}
+      }
+    }
+  
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: 22px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    width: 44px;
+    height: 20px;
+    background: #ce801f;
+    position: absolute;
+    left: 50%;
+    .transform(translateX(-50%));
+    bottom: 24px;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;
+    overflow: hidden;
+    
+    &:after {
+      content: "";
+      width: 22px;
+      height: 22px;
+      background: #ec9f21;
+      position: absolute;
+      .border-radius(50%);
+      left: 50%;
+      .transform(translateX(-50%));
+      bottom: -8px;
+    }
+  }
+}
+
+.crying {
+    .eyes {
+    width: 50%;
+    margin: 0 auto;
+    position: relative;
+    top: 25px;
+    
+    .eye {
+      width: 16px;
+      height: 16px;
+      background: #edeab6;
+      .border-radius(50%);
+    }
+    
+    .eye-left {float: left;}
+    .eye-right {float: right;}
+  }
+  
+  .shy-circles {
+    width: 70%;
+    margin: 0 auto;
+    position: relative;
+    top: 30px;
+    
+    .shy {
+      width: 8px;
+      height: 8px;
+      .border-radius(50%);
+      background: #ec9f21;
+    }
+    
+    .shy-right {float: right;}
+    .shy-left {float: left;}
+  }
+  
+  .mouth {
+    width: 46px;
+    height: 20px;
+    background: transparent;
+    position: relative;
+    left: 50%;
+    top: 34px;
+    .transform(translateX(-50%));
+    .border-radius(35px);
+
+    &:after {
+        content: "";
+        position: absolute;
+        width: 15px;
+        height: 8px;
+        background: #ce801f;
+        .transform(translateX(-50%));
+        left: 50%;
+        top: 6px;
+    }
+
+    span {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        background: #ce801f;
+        .border-radius(50%);
+    }
+
+    .left {
+        left: 0;
+    }
+
+    .right {
+        right: 0;
+    }
+  }
+}
+
+.music {
+    .eyes {
+        width: 50%;
+        margin: 0 auto;
+        position: relative;
+        top: 25px;
+
+        .eye {
+            width: 20px;
+            height: 20px;
+            background: #fabc24;
+            box-sizing: border-box;
+            border: 4px solid transparent;
+            border-color: #edeab6 #edeab6 transparent transparent;
+            border-radius: 50%;
+            .transform(rotate(-45deg));
+        }
+
+        .eye-left {
+            float: left;
+        }
+
+        .eye-right {
+            float: right;
+        }
+    }
+
+    .music-note {
+        width: 20px;
+        height: 13px;
+        background: #ec9f21;
+        position: absolute;
+        .transform(scale(0.8) skewX(-7deg));
+        left: 15px;
+        top: 45px;
+
+        span {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background: #ec9f21;
+            .border-radius(50%);
+        }
+
+        .right {
+            left: 12px;
+            top: 20px;
+        }
+
+        .left {
+            left: -5px;
+            top: 20px;
+        }
+
+        &:after {
+            content: "";
+            width: 2px;
+            height: 12px;
+            background: #ec9f21;
+            position: absolute;
+            left: 0;
+            bottom: -12px;
+        }
+
+        &:before {
+            content: "";
+            width: 2px;
+            height: 12px;
+            background: #ec9f21;
+            position: absolute;
+            right: 0;
+            bottom: -12px;
+        }
+    }
+
+    .mouth {
+        width: 16px;
+        height: 16px;
+        background: #ce801f;
+        .border-radius(50%);
+        position: absolute;
+        left: 35px;
+        top: 61px;
+
+        &:after {
+            content: "";
+            width: 8px;
+            height: 8px;
+            background: #ec9f21;
+            .border-radius(50%);
+            position: absolute;
+            right: -31px;
+            top: -12px;
+        }
+    }
+}
+
+.nerd {
+    .eyes {
+        width: 60%;
+        margin: 0 auto;
+        position: relative;
+        top: 25px;
+
+        &:after {
+            content: "";
+            width: 4px;
+            height: 8px;
+            background: #edeab6;
+            position: absolute;
+            left: 50%;
+            top: -1px;
+            .transform(translateX(-50%));
+        }
+
+        .eye {
+            width: 28px;
+            height: 20px;
+            background: #fabc24;
+            box-sizing: border-box;
+            border: 4px solid #ce801f;
+            border-radius: 10px;
+            border-top-right-radius: 0;
+            border-top-left-radius: 0;
+
+            &:before {
+                content: "";
+                position: absolute;
+                width: 2px;
+                height: 4px;
+                top: 0;
+                background: #ce801f;
+            }
+
+            &:after {
+                content: "";
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                .border-radius(50%);
+                top: 6px;
+                background: #edeab6;
+            }
+        }
+
+        .eye-left {
+            float: left;
+
+            &:before {
+                left: -2px;
+            }
+
+            &:after {
+                left: 9px;
+            }
+        }
+
+        .eye-right {
+            float: right;
+
+            &:before {
+                right: -2px;
+            }
+
+            &:after {
+                right: 9px;
+            }
+        }
+    }
+
+    .shy {
+        div {
+            width: 4px;
+            height: 4px;
+            .border-radius(2px);
+            background: #ec9f21;
+            position: absolute;
+            top: 50px;
+
+            &:after {
+                content: "";
+                position: absolute;
+                width: 4px;
+                height: 4px;
+                .border-radius(2px);
+                background: #ec9f21;
+                top: 5px;
+                left: -2px;
+            }
+
+            &:before {
+                content: "";
+                position: absolute;
+                width: 4px;
+                height: 4px;
+                .border-radius(2px);
+                background: #ec9f21;
+                top: 5px;
+                right: -3px;
+            }
+        }
+
+        .shy-left {
+            left: 22px;
+             .transform(rotate(-15deg));
+        }
+
+        .shy-right {
+            right: 22px;
+            .transform(rotate(15deg));
+        }
+    }
+
+    .mouth {
+        width: 28px;
+        height: 4px;
+        background: #ce801f;
+        position: absolute;
+        .transform(translateX(-50%));
+        left: 50%;
+        top: 60px;
+
+        &:after {
+            content: "";
+            width: 8px;
+            height: 6px;
+            background: #edeab6;
+            position: absolute;
+            left: 8px;
+            top: 4px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/css3-loader-spinners/README.markdown b/css3-loader-spinners/README.markdown
new file mode 100644
index 0000000..c924f23
--- /dev/null
+++ b/css3-loader-spinners/README.markdown
@@ -0,0 +1,5 @@
+# CSS3 Loader & Spinners
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/vineethtrv/pen/NWxZqMM](https://codepen.io/vineethtrv/pen/NWxZqMM).
+
+This is a collection of different types of loaders, spinners. There are no image dependencies in this. It's is done using CSS. Hence it is easily customization too.
diff --git a/css3-loader-spinners/dist/index.html b/css3-loader-spinners/dist/index.html
new file mode 100644
index 0000000..38ddf88
--- /dev/null
+++ b/css3-loader-spinners/dist/index.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS3 Loader &amp; Spinners</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<header><a class="brand" href="https://vineethtrv.github.io/loader/">L &nbsp; ader</a><a class="nav-btn" href="https://vineethtrv.github.io/loader/">Github Page</a></header>
+<section><span class="loader-1"> </span></section>
+<section><span class="loader-2"> </span></section>
+<section><span class="loader-3"> </span></section>
+<section><span class="loader-4"> </span></section>
+<section><span class="loader-5"> </span></section>
+<section><span class="loader-6"> </span></section>
+<section><span class="loader-7"> </span></section>
+<section><span class="loader-8"> </span></section>
+<section><span class="loader-9"> </span></section>
+<section><span class="loader-10"> </span></section>
+<section><span class="loader-11"> </span></section>
+<section><span class="loader-12"> </span></section>
+<section><span class="loader-13"> </span></section>
+<section><span class="loader-14"> </span></section>
+<section><span class="loader-15"> </span></section>
+<section><span class="loader-16"> </span></section>
+<section><span class="loader-17"> </span></section>
+<section><span class="loader-18"> </span></section>
+<section><span class="loader-19"> </span></section>
+<section><span class="loader-20"> </span></section>
+<section><span class="loader-21"> </span></section>
+<section><span class="loader-22"> </span></section>
+<section><span class="loader-23"> </span></section>
+<section><span class="loader-24"> </span></section>
+<section><span class="loader-25"> </span></section>
+<section><span class="loader-26"> </span></section>
+<section><span class="loader-27"> </span></section>
+<section><span class="loader-28"> </span></section>
+<section><span class="loader-29"> </span></section>
+<section><span class="loader-30"> </span></section>
+<section><span class="loader-31"> </span></section>
+<section><span class="loader-32"> </span></section>
+<section><span class="loader-33"> </span></section>
+<section><span class="loader-34"> </span></section>
+<section><span class="loader-35"> </span></section>
+<section><span class="loader-36"> </span></section>
+<section><span class="loader-37"> </span></section>
+<section><span class="loader-38"> </span></section>
+<section><span class="loader-39"> </span></section>
+<section><span class="loader-40"> </span></section>
+<section><span class="loader-41"> </span></section>
+<section><span class="loader-42"> </span></section>
+<section><span class="loader-43"> </span></section>
+<section><span class="loader-44"> </span></section>
+<section><span class="loader-45"> </span></section>
+<section><span class="loader-46"> </span></section>
+<section><span class="loader-47"> </span></section>
+<section><span class="loader-48"> </span></section>
+<section><span class="loader-49"> </span></section>
+<section><span class="loader-50"> </span></section>
+<section><span class="loader-51"> </span></section>
+<section><span class="loader-52"> </span></section>
+<section><span class="loader-53"> </span></section>
+<section><span class="loader-54"> </span></section>
+<section><span class="loader-55"> </span></section>
+<section><span class="loader-56"> </span></section>
+<section><span class="loader-57"> </span></section>
+<section><span class="loader-58"> </span></section>
+<section><span class="loader-59"> </span></section>
+<section><span class="loader-60"> </span></section>
+<section><span class="loader-61"> </span></section>
+<section><span class="loader-62"> </span></section>
+<section><span class="loader-63"> </span></section>
+<section><span class="loader-64"> </span></section>
+<section><span class="loader-65"> </span></section>
+<section><span class="loader-66"> </span></section>
+<section><span class="loader-67"> </span></section>
+<section><span class="loader-68"> </span></section>
+<section><span class="loader-69"> </span></section>
+<section><span class="loader-70"> </span></section>
+<section><span class="loader-71"> </span></section>
+<section><span class="loader-72"> </span></section>
+<section><span class="loader-73"> </span></section>
+<section><span class="loader-74"> </span></section>
+<section><span class="loader-75"> </span></section>
+<section><span class="loader-76"> </span></section>
+<section><span class="loader-77"> </span></section>
+<section><span class="loader-78"> </span></section>
+<section><span class="loader-79"> </span></section>
+<section><span class="loader-80"> </span></section>
+<section><span class="loader-81"> </span></section>
+<section><span class="loader-82"> </span></section>
+<section><span class="loader-83"> </span></section>
+<section><span class="loader-84"> </span></section>
+<section><span class="loader-85"> </span></section>
+<section><span class="loader-86"> </span></section>
+<section><span class="loader-87"> </span></section>
+<section><span class="loader-88"> </span></section>
+<section><span class="loader-89"> </span></section>
+<section><span class="loader-90"> </span></section>
+<section><span class="loader-91"> </span></section>
+<section><span class="loader-92"> </span></section>
+<section><span class="loader-93"> </span></section>
+<section><span class="loader-94"> </span></section>
+<section><span class="loader-95"> </span></section>
+<section><span class="loader-96"> </span></section>
+<section><span class="loader-97"> </span></section>
+<section><span class="loader-98"> </span></section>
+<section><span class="loader-99"> </span></section>
+<section><span class="loader-100"> </span></section>
+<section><span class="loader-101"> </span></section>
+<section><span class="loader-102"> </span></section>
+<section><span class="loader-103"> </span></section>
+<section><span class="loader-104"> </span></section>
+<section><span class="loader-105"> </span></section>
+<section><span class="loader-106"> </span></section>
+<section><span class="loader-107"> </span></section>
+<section><span class="loader-108"> </span></section>
+<section><span class="loader-109">Loading       </span></section>
+<section><span class="loader-110">Loading      </span></section>
+<section><span class="loader-111">Loading      </span></section>
+<section><span class="loader-112">L &nbsp; ading      </span></section>
+<section><span class="loader-113">Load&nbsp;ng      </span></section>
+<section><span class="loader-114">Load&nbsp;ng      </span></section>
+<section><span class="loader-115">Loading      </span></section>
+<section><span class="loader-116">Load&nbsp;ng      </span></section>
+<section><span class="loader-117">Load&nbsp;ng      </span></section>
+<section><span class="loader-118">     </span></section>
+<section><span class="loader-119">Loading      </span></section>
+<section><span class="loader-120">Loading</span></section>
+<section><span class="loader-121"> </span></section>
+<section><span class="loader-122"> </span></section>
+<section><span class="loader-123"> </span></section>
+<section><span class="loader-124"> </span></section>
+<section><span class="loader-125"> </span></section>
+<section><span class="loader-126"> </span></section>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/css3-loader-spinners/dist/style.css b/css3-loader-spinners/dist/style.css
new file mode 100644
index 0000000..bfe96d7
--- /dev/null
+++ b/css3-loader-spinners/dist/style.css
@@ -0,0 +1,5130 @@
+*, *:after, *:before {
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #263238;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #FF3D00;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #fff;
+}
+
+body {
+  margin: 0;
+  padding-top: 50px;
+  display: -webkit-box;
+  display: flex;
+  flex-wrap: wrap;
+  background: #263238;
+  font-family: Arial, Helvetica, sans-serif;
+}
+body.pop {
+  overflow: hidden;
+}
+
+section {
+  min-width: 200px;
+  width: 33.33%;
+  height: 200px;
+  padding: 10px;
+  position: relative;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+  color: #ccc;
+  cursor: pointer;
+  -webkit-transition: 0.3s linear;
+  transition: 0.3s linear;
+}
+section:nth-child(2n + 1) {
+  background: rgba(0, 0, 0, 0.1);
+}
+section:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+@media (max-width: 768px) {
+  section {
+    width: 50%;
+  }
+}
+@media (max-width: 480px) {
+  section {
+    width: 100%;
+  }
+}
+
+header {
+  background: #0d161b;
+  padding: 10px 20px;
+  min-height: 50px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  z-index: 2000;
+  -webkit-box-pack: justify;
+          justify-content: space-between;
+}
+
+.brand {
+  color: #fff;
+  font-size: 32px;
+  display: inline-block;
+  position: relative;
+  text-decoration: none;
+}
+.brand::after {
+  content: '';
+  position: absolute;
+  left: 20px;
+  bottom: 5px;
+  border: 3px solid #FFF;
+  border-bottom-color: #FF3D00;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  -webkit-animation: rotation 0.6s linear infinite;
+          animation: rotation 0.6s linear infinite;
+}
+
+.nav-btn {
+  color: #fff;
+  text-decoration: none;
+}
+
+.loader-1 {
+  width: 48px;
+  height: 48px;
+  border: 5px solid #FFF;
+  border-bottom-color: #FF3D00;
+  border-radius: 50%;
+  display: inline-block;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+
+.loader-2 {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #FFF;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-2:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-bottom-color: #FF3D00;
+}
+
+.loader-3 {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #FFF;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-3:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-bottom-color: #FF3D00;
+}
+
+.loader-4 {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #FFF;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-4:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 3px solid;
+  border-color: #FF3D00 transparent;
+}
+
+.loader-5 {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #FFF;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-5:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: 3px solid;
+  border-color: #FF3D00 transparent;
+}
+
+.loader-6 {
+  width: 48px;
+  height: 48px;
+  border: 2px solid #FFF;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-6:after, .loader-6:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #FF3D00;
+  width: 6px;
+  height: 6px;
+  -webkit-transform: translate(150%, 150%);
+          transform: translate(150%, 150%);
+  border-radius: 50%;
+}
+.loader-6:before {
+  left: auto;
+  top: auto;
+  right: 0;
+  bottom: 0;
+  -webkit-transform: translate(-150%, -150%);
+          transform: translate(-150%, -150%);
+}
+
+.loader-7 {
+  width: 48px;
+  height: 48px;
+  border: 2px solid #FFF;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-7:after, .loader-7:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #FF3D00;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+.loader-7:before {
+  left: auto;
+  top: auto;
+  right: 0;
+  bottom: 0;
+}
+
+.loader-8 {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #FFF;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-8:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #FF3D00;
+  width: 16px;
+  height: 16px;
+  -webkit-transform: translate(-50%, 50%);
+          transform: translate(-50%, 50%);
+  border-radius: 50%;
+}
+
+.loader-9 {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  border: 2px solid #FF3D00;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-9:after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  border: 2px solid #FFF;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.loader-10 {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  border: 3px solid;
+  border-color: #FFF #FFF transparent;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-10:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  border: 3px solid;
+  border-color: transparent #FF3D00 #FF3D00;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  -webkit-animation: rotationBack 0.5s linear infinite;
+          animation: rotationBack 0.5s linear infinite;
+  -webkit-transform-origin: center center;
+          transform-origin: center center;
+}
+
+.loader-11 {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  border: 3px solid;
+  border-color: #FFF #FFF transparent transparent;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-11:after, .loader-11:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  border: 3px solid;
+  border-color: transparent transparent #FF3D00 #FF3D00;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  -webkit-animation: rotationBack 0.5s linear infinite;
+          animation: rotationBack 0.5s linear infinite;
+  -webkit-transform-origin: center center;
+          transform-origin: center center;
+}
+.loader-11:before {
+  width: 32px;
+  height: 32px;
+  border-color: #FFF #FFF transparent transparent;
+  -webkit-animation: rotation 1.5s linear infinite;
+          animation: rotation 1.5s linear infinite;
+}
+
+.loader-12 {
+  width: 48px;
+  height: 48px;
+  border: 3px dotted #FFF;
+  border-style: solid solid dotted dotted;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 2s linear infinite;
+          animation: rotation 2s linear infinite;
+}
+.loader-12:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  border: 3px dotted #FF3D00;
+  border-style: solid solid dotted;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  -webkit-animation: rotationBack 1s linear infinite;
+          animation: rotationBack 1s linear infinite;
+  -webkit-transform-origin: center center;
+          transform-origin: center center;
+}
+
+.loader-13 {
+  width: 48px;
+  height: 48px;
+  border: 2px solid #FFF;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-13:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  background: #FF3D00;
+  width: 3px;
+  height: 24px;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+
+.loader-14 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader-14::after, .loader-14::before {
+  content: '';
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 2px solid #FFF;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-animation: animloader14 2s linear infinite;
+          animation: animloader14 2s linear infinite;
+}
+.loader-14::after {
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+
+.loader-15 {
+  width: 48px;
+  height: 48px;
+  border: 5px dotted #FFF;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 2s linear infinite;
+          animation: rotation 2s linear infinite;
+}
+
+.loader-16 {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(33%, rgba(255, 61, 0, 0.2)), to(#ff3d00));
+  background: linear-gradient(0deg, rgba(255, 61, 0, 0.2) 33%, #ff3d00 100%);
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-16:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: #263238;
+}
+
+.loader-17 {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 3px solid #FFF;
+  border-right: 3px solid transparent;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+
+.loader-18 {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 4px solid #FFF;
+  border-right: 4px solid transparent;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-18:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border-bottom: 4px solid #FF3D00;
+  border-left: 4px solid transparent;
+}
+
+.loader-19 {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 4px solid #FFF;
+  border-right: 4px solid transparent;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-19:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border-left: 4px solid #FF3D00;
+  border-bottom: 4px solid transparent;
+  animation: rotation 0.5s linear infinite reverse;
+}
+
+.loader-20 {
+  width: 48px;
+  height: 48px;
+  border: 5px solid;
+  border-color: #FF3D00 transparent;
+  border-radius: 50%;
+  display: inline-block;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+
+.loader-21 {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  border: 10px solid;
+  border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+
+.loader-22 {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  border: 10px solid;
+  -webkit-animation: animloader51 1s linear infinite alternate;
+          animation: animloader51 1s linear infinite alternate;
+}
+
+.loader-23 {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #FFF;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-23:after {
+  content: '';
+  position: absolute;
+  left: 20px;
+  top: 31px;
+  border: 10px solid transparent;
+  border-right-color: #FFF;
+  -webkit-transform: rotate(-40deg);
+          transform: rotate(-40deg);
+}
+
+.loader-24 {
+  width: 48px;
+  height: 48px;
+  border-width: 3px;
+  border-style: dashed solid  solid dotted;
+  border-color: #FF3D00 #FF3D00 transparent #FF3D00;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-24:after {
+  content: '';
+  position: absolute;
+  left: 20px;
+  top: 31px;
+  border: 10px solid transparent;
+  border-right-color: #FF3D00;
+  -webkit-transform: rotate(-40deg);
+          transform: rotate(-40deg);
+}
+
+.loader-25 {
+  width: 48px;
+  height: 48px;
+  background: #FFF;
+  display: inline-block;
+  border-radius: 50%;
+  -webkit-animation: animloader14 1s ease-in infinite;
+          animation: animloader14 1s ease-in infinite;
+}
+
+.loader-26 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader-26::after, .loader-26::before {
+  content: '';
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #FFF;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-animation: animloader14 2s linear infinite;
+          animation: animloader14 2s linear infinite;
+}
+.loader-26::after {
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+
+.loader-27 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader-27::after, .loader-27::before {
+  content: '';
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #FFF;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-animation: animloader27 2s ease-in-out infinite;
+          animation: animloader27 2s ease-in-out infinite;
+}
+.loader-27::after {
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+
+.loader-28 {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  -webkit-animation: animloader28 1s linear infinite;
+          animation: animloader28 1s linear infinite;
+}
+
+.loader-29 {
+  border: 24px solid #FFF;
+  border-bottom-color: #FF3D00;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+
+.loader-30 {
+  border: 2px solid #FFF;
+  width: 48px;
+  height: 48px;
+  background: #FF3D00;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 2s linear infinite;
+          animation: rotation 2s linear infinite;
+}
+.loader-30:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border: 24px solid;
+  border-color: transparent #FFF;
+  border-radius: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+.loader-31 {
+  width: 48px;
+  height: 48px;
+  background: #FFF;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-31:after {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 10px;
+  width: 12px;
+  height: 12px;
+  color: #FF3D00;
+  background: currentColor;
+  border-radius: 50%;
+  box-shadow: 25px 2px, 10px 22px;
+}
+
+.loader-32 {
+  width: 48px;
+  height: 48px;
+  border: 4px solid;
+  background: rgba(255, 255, 255, 0.2);
+  border-color: transparent #FFF #FFF transparent;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s ease-in-out infinite;
+          animation: rotation 1s ease-in-out infinite;
+}
+.loader-32:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border: 12px solid;
+  border-color: transparent #FF3D00 #FF3D00 transparent;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  border-radius: 50%;
+}
+
+.loader-33 {
+  border: 2px solid;
+  border-color: transparent #FFF;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 2s linear infinite;
+          animation: rotation 2s linear infinite;
+}
+.loader-33:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border: 24px solid;
+  border-color: transparent rgba(255, 255, 255, 0.15);
+  border-radius: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+.loader-34 {
+  border: 24px solid;
+  border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  display: inline-block;
+  -webkit-animation: animloader34 1s linear infinite;
+          animation: animloader34 1s linear infinite;
+}
+
+.loader-35 {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-35:after, .loader-35:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #FF3D00;
+  width: 16px;
+  height: 16px;
+  -webkit-transform: translate(-50%, 50%);
+          transform: translate(-50%, 50%);
+  border-radius: 50%;
+}
+.loader-35:before {
+  left: auto;
+  right: 0;
+  background: #FFF;
+  -webkit-transform: translate(50%, 100%);
+          transform: translate(50%, 100%);
+}
+
+.loader-36 {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: zeroRotation 1s linear infinite alternate;
+          animation: zeroRotation 1s linear infinite alternate;
+}
+.loader-36:after, .loader-36:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #FF3D00;
+  width: 16px;
+  height: 16px;
+  -webkit-transform: translate(-50%, 50%);
+          transform: translate(-50%, 50%);
+  border-radius: 50%;
+}
+.loader-36:before {
+  left: auto;
+  right: 0;
+  -webkit-transform: translate(50%, 100%);
+          transform: translate(50%, 100%);
+}
+
+.loader-37 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  color: #FFF;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-37:after, .loader-37:before {
+  content: '';
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 0;
+  background-color: #FFF;
+  border-radius: 50%;
+  -webkit-animation: scale50 1s infinite ease-in-out;
+          animation: scale50 1s infinite ease-in-out;
+}
+.loader-37:before {
+  top: auto;
+  bottom: 0;
+  background-color: #FF3D00;
+  -webkit-animation-delay: 0.5s;
+          animation-delay: 0.5s;
+}
+
+.loader-38 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  color: #FFF;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+.loader-38:after, .loader-38:before {
+  content: '';
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: scale(0.5) translate(0, 0);
+          transform: scale(0.5) translate(0, 0);
+  background-color: #FFF;
+  border-radius: 50%;
+  -webkit-animation: animloader38 1s infinite ease-in-out;
+          animation: animloader38 1s infinite ease-in-out;
+}
+.loader-38:before {
+  background-color: #FF3D00;
+  -webkit-transform: scale(0.5) translate(-48px, -48px);
+          transform: scale(0.5) translate(-48px, -48px);
+}
+
+.loader-39 {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  background: #FFF;
+  -webkit-animation: shadowExpandX 2s linear infinite alternate;
+          animation: shadowExpandX 2s linear infinite alternate;
+}
+
+.loader-40 {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  background: #FFF;
+  box-shadow: -24px 0 #FFF, 24px 0 #FFF;
+  -webkit-animation: shadowPulse 2s linear infinite;
+          animation: shadowPulse 2s linear infinite;
+}
+
+.loader-41 {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  background: #FF3D00;
+  color: #FFF;
+  box-shadow: -24px 0, 24px 0;
+  -webkit-animation: rotation 2s ease-in-out infinite;
+          animation: rotation 2s ease-in-out infinite;
+}
+
+.loader-42 {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  color: #FFF;
+  -webkit-animation: animloader42 1s linear infinite alternate;
+          animation: animloader42 1s linear infinite alternate;
+}
+
+.loader-43 {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  color: #FFF;
+  left: -100px;
+  -webkit-animation: shadowRolling 2s linear infinite;
+          animation: shadowRolling 2s linear infinite;
+}
+
+.loader-44 {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  color: #FFF;
+  -webkit-animation: animloader44 2s linear infinite;
+          animation: animloader44 2s linear infinite;
+}
+
+.loader-45 {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  color: #FFF;
+  -webkit-animation: animloader45 1s linear infinite alternate;
+          animation: animloader45 1s linear infinite alternate;
+}
+
+.loader-46 {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+}
+.loader-46::after {
+  content: '';
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  position: absolute;
+  left: 0;
+  -webkit-transform: translate(-50%, 100%);
+          transform: translate(-50%, 100%);
+  -webkit-animation: animloader46 1s linear infinite;
+          animation: animloader46 1s linear infinite;
+  top: 0;
+}
+
+.loader-47 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader-47::after, .loader-47::before {
+  content: '';
+  width: 48px;
+  height: 48px;
+  border: 2px solid #FFF;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-animation: rotation 2s ease-in-out infinite;
+          animation: rotation 2s ease-in-out infinite;
+}
+.loader-47::after {
+  border-color: #FF3D00;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+
+.loader-48 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader-48::after, .loader-48::before {
+  content: '';
+  width: 48px;
+  height: 48px;
+  border: 4px solid #FFF;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-animation: animloader14 2s ease-in-out infinite;
+          animation: animloader14 2s ease-in-out infinite;
+}
+.loader-48::after {
+  border-color: #FF3D00;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+
+.loader-49 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader-49::after, .loader-49::before {
+  content: '';
+  width: 48px;
+  height: 48px;
+  border: 2px solid #FFF;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-animation: rotation 2s ease-in-out infinite alternate;
+          animation: rotation 2s ease-in-out infinite alternate;
+}
+.loader-49::after {
+  border-color: #FF3D00;
+  animation-direction: alternate-reverse;
+}
+
+.loader-50 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader-50::after, .loader-50::before {
+  content: '';
+  width: 48px;
+  height: 48px;
+  border: 2px solid #FFF;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-animation: scaleOut 2s ease-in-out infinite;
+          animation: scaleOut 2s ease-in-out infinite;
+}
+.loader-50::after {
+  border-color: #FF3D00;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+
+.loader-51 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader-51::after, .loader-51::before {
+  content: '';
+  width: 48px;
+  height: 48px;
+  border: 2px solid #FFF;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-animation: rotationBreak 3s ease-in-out infinite alternate;
+          animation: rotationBreak 3s ease-in-out infinite alternate;
+}
+.loader-51::after {
+  border-color: #FF3D00;
+  animation-direction: alternate-reverse;
+}
+
+.loader-52 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  border: 2px solid #FFF;
+  -webkit-animation: rotation 2s linear infinite;
+          animation: rotation 2s linear infinite;
+}
+.loader-52:after, .loader-52:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  border: 2px solid #FF3D00;
+  width: 38px;
+  height: 38px;
+  -webkit-animation: rotationBack 1.5s linear infinite;
+          animation: rotationBack 1.5s linear infinite;
+  -webkit-transform-origin: center center;
+          transform-origin: center center;
+}
+.loader-52:before {
+  width: 28px;
+  height: 28px;
+  border-color: #FFF;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+
+.loader-53 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  background: #FFF;
+  -webkit-animation: flipX 1s linear infinite;
+          animation: flipX 1s linear infinite;
+}
+
+.loader-54 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  color: #FFF;
+  border: 1px solid;
+  -webkit-animation: fill 2s linear infinite alternate;
+          animation: fill 2s linear infinite alternate;
+}
+
+.loader-55 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  background: #FFF;
+  animation: zeroRotation 1s ease infinite alternate-reverse;
+}
+
+.loader-56 {
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  position: relative;
+  background: #FFF;
+  -webkit-animation: animloader56 2s linear infinite;
+          animation: animloader56 2s linear infinite;
+}
+
+.loader-57 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader-57::after {
+  content: '';
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #FFF;
+  color: #FFF;
+  -webkit-animation: animloader57 2s linear infinite alternate;
+          animation: animloader57 2s linear infinite alternate;
+}
+
+.loader-58 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader-58::before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  left: 0;
+  top: -24px;
+  -webkit-animation: animloader58 2s linear infinite alternate;
+          animation: animloader58 2s linear infinite alternate;
+}
+.loader-58::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 24px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.85);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-animation: animloader58m 2s linear infinite alternate;
+          animation: animloader58m 2s linear infinite alternate;
+}
+
+.loader-59 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+.loader-59::before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  left: 0;
+  top: -24px;
+  -webkit-animation: animloader59 4s ease infinite;
+          animation: animloader59 4s ease infinite;
+}
+.loader-59::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 24px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.85);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-animation: animloader56 2s ease infinite;
+          animation: animloader56 2s ease infinite;
+}
+
+.loader-60 {
+  width: 16px;
+  height: 16px;
+  box-shadow: 0 30px, 0 -30px;
+  border-radius: 4px;
+  background: currentColor;
+  display: inline-block;
+  position: relative;
+  color: #FFF;
+  left: -30px;
+  -webkit-animation: animloader60 2s ease infinite;
+          animation: animloader60 2s ease infinite;
+}
+.loader-60::after, .loader-60::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  box-shadow: 0 30px, 0 -30px;
+  border-radius: 4px;
+  background: currentColor;
+  color: #FFF;
+  position: absolute;
+  left: 30px;
+  top: 0;
+  -webkit-animation: animloader60 2s 0.2s ease infinite;
+          animation: animloader60 2s 0.2s ease infinite;
+}
+.loader-60::before {
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+  left: 60px;
+}
+
+[data-index="61"] {
+  -webkit-box-align: normal;
+          align-items: normal;
+  padding-top: 75px;
+}
+
+.loader-61 {
+  width: 8px;
+  height: 40px;
+  border-radius: 4px;
+  display: inline-block;
+  position: relative;
+  background: currentColor;
+  color: #FFF;
+  -webkit-animation: animloader61m 0.3s 0.3s linear infinite alternate;
+          animation: animloader61m 0.3s 0.3s linear infinite alternate;
+}
+.loader-61::after, .loader-61::before {
+  content: '';
+  width: 8px;
+  height: 40px;
+  border-radius: 4px;
+  background: currentColor;
+  position: absolute;
+  bottom: 0;
+  left: 20px;
+  -webkit-animation: animloader61 0.3s  0.45s  linear infinite alternate;
+          animation: animloader61 0.3s  0.45s  linear infinite alternate;
+}
+.loader-61::before {
+  left: -20px;
+  -webkit-animation-delay: 0s;
+          animation-delay: 0s;
+}
+
+.loader-62 {
+  width: 8px;
+  height: 40px;
+  border-radius: 4px;
+  display: inline-block;
+  position: relative;
+  background: currentColor;
+  color: #FFF;
+  -webkit-animation: animloader61 0.3s 0.3s linear infinite alternate;
+          animation: animloader61 0.3s 0.3s linear infinite alternate;
+}
+.loader-62::after, .loader-62::before {
+  content: '';
+  width: 8px;
+  height: 40px;
+  border-radius: 4px;
+  background: currentColor;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  left: 20px;
+  -webkit-animation: animloader61 0.3s  0.45s  linear infinite alternate;
+          animation: animloader61 0.3s  0.45s  linear infinite alternate;
+}
+.loader-62::before {
+  left: -20px;
+  -webkit-animation-delay: 0s;
+          animation-delay: 0s;
+}
+
+.loader-63 {
+  width: 8px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  border-radius: 4px;
+  left: -40px;
+  -webkit-animation: animloader63 1s linear infinite alternate;
+          animation: animloader63 1s linear infinite alternate;
+}
+
+.loader-64 {
+  width: 8px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  border-radius: 4px;
+  left: -60px;
+  color: #FFF;
+  -webkit-animation: animloader64 0.6s linear infinite;
+          animation: animloader64 0.6s linear infinite;
+}
+
+.loader-65 {
+  width: 48px;
+  height: 6px;
+  display: inline-block;
+  position: relative;
+  border-radius: 4px;
+  top: -50px;
+  color: #FFF;
+  -webkit-animation: animloader65 0.6s linear infinite;
+          animation: animloader65 0.6s linear infinite;
+}
+
+[data-index="66"] {
+  -webkit-box-pack: normal;
+          justify-content: normal;
+  padding-left: 15%;
+}
+
+.loader-66 {
+  width: 4.8px;
+  height: 4.8px;
+  display: inline-block;
+  position: relative;
+  border-radius: 4px;
+  color: #FFF;
+  background: currentColor;
+  -webkit-animation: animloader66 0.3s 0.3s linear infinite alternate;
+          animation: animloader66 0.3s 0.3s linear infinite alternate;
+}
+.loader-66::after, .loader-66::before {
+  content: '';
+  width: 4.8px;
+  height: 4.8px;
+  border-radius: 4px;
+  background: currentColor;
+  position: absolute;
+  left: 0;
+  top: 15px;
+  -webkit-animation: animloader66 0.3s 0.45s linear infinite alternate;
+          animation: animloader66 0.3s 0.45s linear infinite alternate;
+}
+.loader-66::after {
+  top: -15px;
+  -webkit-animation-delay: 0s;
+          animation-delay: 0s;
+}
+
+.loader-67 {
+  width: 4.8px;
+  height: 4.8px;
+  display: inline-block;
+  position: relative;
+  border-radius: 4px;
+  color: #FFF;
+  background: currentColor;
+  -webkit-animation: animloader66 0.3s 0.3s linear infinite alternate;
+          animation: animloader66 0.3s 0.3s linear infinite alternate;
+}
+.loader-67::after, .loader-67::before {
+  content: '';
+  width: 4.8px;
+  height: 4.8px;
+  border-radius: 4px;
+  background: currentColor;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: 15px;
+  -webkit-animation: animloader66 0.3s 0.45s linear infinite alternate;
+          animation: animloader66 0.3s 0.45s linear infinite alternate;
+}
+.loader-67::after {
+  top: -15px;
+  -webkit-animation-delay: 0s;
+          animation-delay: 0s;
+}
+
+.loader-68 {
+  width: 8px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  border-radius: 4px;
+  left: -100px;
+  -webkit-animation: animloader68 1s linear infinite alternate;
+          animation: animloader68 1s linear infinite alternate;
+}
+
+.loader-69 {
+  width: 20px;
+  height: 12px;
+  display: inline-block;
+  position: relative;
+  border-radius: 4px;
+  color: #FFF;
+  background: currentColor;
+  -webkit-animation: animloader69 0.6s 0.3s ease infinite alternate;
+          animation: animloader69 0.6s 0.3s ease infinite alternate;
+}
+.loader-69::after, .loader-69::before {
+  content: '';
+  width: 20px;
+  height: 12px;
+  background: currentColor;
+  position: absolute;
+  border-radius: 4px;
+  top: 0;
+  right: 110%;
+  -webkit-animation: animloader69  0.6s ease infinite alternate;
+          animation: animloader69  0.6s ease infinite alternate;
+}
+.loader-69::after {
+  left: 110%;
+  right: auto;
+  -webkit-animation-delay: 0.6s;
+          animation-delay: 0.6s;
+}
+
+.loader-70 {
+  width: 100%;
+  height: 4.8px;
+  display: inline-block;
+  position: relative;
+  background: rgba(255, 255, 255, 0.15);
+  overflow: hidden;
+}
+.loader-70::after {
+  content: '';
+  width: 96px;
+  height: 4.8px;
+  background: #FFF;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-animation: hitZak 1s linear infinite alternate;
+          animation: hitZak 1s linear infinite alternate;
+}
+
+.loader-71 {
+  width: 100%;
+  height: 4.8px;
+  display: inline-block;
+  position: relative;
+  background: rgba(255, 255, 255, 0.15);
+  overflow: hidden;
+}
+.loader-71::after {
+  content: '';
+  width: 192px;
+  height: 4.8px;
+  background: #FFF;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-animation: animloader71 2s linear infinite;
+          animation: animloader71 2s linear infinite;
+}
+
+.loader-72 {
+  width: 100%;
+  height: 4.8px;
+  display: inline-block;
+  position: relative;
+  background: rgba(255, 255, 255, 0.15);
+  overflow: hidden;
+}
+.loader-72::after {
+  content: '';
+  width: 0;
+  height: 4.8px;
+  background: #FFF;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-animation: animFw 10s linear infinite;
+          animation: animFw 10s linear infinite;
+}
+
+[data-index="73"] {
+  -webkit-box-pack: normal;
+          justify-content: normal;
+}
+
+.loader-73 {
+  width: 0;
+  height: 4.8px;
+  display: inline-block;
+  position: relative;
+  background: #FFF;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  -webkit-animation: animFw 8s linear infinite;
+          animation: animFw 8s linear infinite;
+}
+.loader-73::after, .loader-73::before {
+  content: '';
+  width: 10px;
+  height: 1px;
+  background: #FFF;
+  position: absolute;
+  top: 9px;
+  right: -2px;
+  opacity: 0;
+  -webkit-transform: rotate(-45deg) translateX(0px);
+          transform: rotate(-45deg) translateX(0px);
+  -webkit-animation: coli1 0.3s linear infinite;
+          animation: coli1 0.3s linear infinite;
+}
+.loader-73::before {
+  top: -4px;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  -webkit-animation: coli2 0.3s linear infinite;
+          animation: coli2 0.3s linear infinite;
+}
+
+.loader-74 {
+  width: 100%;
+  height: 4.8px;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+}
+.loader-74::after {
+  content: '';
+  width: 96px;
+  height: 4.8px;
+  background: #FFF;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-animation: hitZak 0.6s ease-in-out infinite alternate;
+          animation: hitZak 0.6s ease-in-out infinite alternate;
+}
+
+.loader-75 {
+  width: 100%;
+  height: 4.8px;
+  display: inline-block;
+  background: rgba(255, 255, 255, 0.15);
+  position: relative;
+  overflow: hidden;
+}
+.loader-75::after {
+  content: '';
+  width: 0%;
+  height: 4.8px;
+  background-color: #FFF;
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
+  background-size: 15px 15px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-animation: animFw 6s ease-in infinite;
+          animation: animFw 6s ease-in infinite;
+}
+
+.loader-76 {
+  width: 100%;
+  height: 4.8px;
+  display: inline-block;
+  background: rgba(255, 255, 255, 0.15);
+  position: relative;
+  overflow: hidden;
+}
+.loader-76::after {
+  content: '';
+  width: 0%;
+  height: 4.8px;
+  background-color: #FFF;
+  font-size: 15px;
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
+  background-size: 1em 1em;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-animation: animFw 10s ease-in infinite,  barStripe 1s linear infinite;
+          animation: animFw 10s ease-in infinite,  barStripe 1s linear infinite;
+}
+
+.loader-77 {
+  width: 100%;
+  height: 8px;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+}
+.loader-77::before {
+  content: '';
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.15);
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
+  background-size: 15px 15px;
+  z-index: 10;
+}
+.loader-77::after {
+  content: '';
+  width: 0%;
+  height: 100%;
+  background-color: #FFF;
+  position: absolute;
+  border-radius: 0 4px 4px 0;
+  top: 0;
+  left: 0;
+  -webkit-animation: animFw 10s ease-in infinite;
+          animation: animFw 10s ease-in infinite;
+}
+
+.loader-78 {
+  width: 100%;
+  height: 12px;
+  display: inline-block;
+  background-color: #FFF;
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
+  font-size: 30px;
+  background-size: 1em 1em;
+  -webkit-animation: barStripe 1s linear infinite;
+          animation: barStripe 1s linear infinite;
+}
+
+.loader-79 {
+  width: 96px;
+  height: 16px;
+  display: inline-block;
+  background-color: #FFF;
+  border: 1px solid #FFF;
+  border-radius: 4px;
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
+  font-size: 30px;
+  background-size: 1em 1em;
+  -webkit-animation: barStripe 1s linear infinite;
+          animation: barStripe 1s linear infinite;
+}
+
+.loader-80 {
+  width: 96px;
+  height: 24px;
+  display: inline-block;
+  background-color: #FFF;
+  border: 1px solid #FFF;
+  border-radius: 4px;
+  background: linear-gradient(45deg, transparent 49%, #FFF 50%, #FFF 50%, transparent 51%, transparent), linear-gradient(-45deg, transparent 49%, #FFF 50%, #FFF 50%, transparent 51%, transparent);
+  font-size: 15px;
+  background-size: 1em 1em;
+  -webkit-animation: barStripe 0.6s linear infinite;
+          animation: barStripe 0.6s linear infinite;
+}
+
+.loader-81 {
+  width: 130px;
+  height: 48px;
+  display: inline-block;
+  background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000 100%), linear-gradient(45deg, #000 25%, white 25%, white 75%, #000 75%, #000 100%);
+  font-size: 10px;
+  background-size: 32px 32px;
+  -webkit-animation: raceBoard 0.6s linear infinite;
+          animation: raceBoard 0.6s linear infinite;
+  background-position: 0 0, 16px 16px;
+}
+
+.loader-82 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  background-color: #FFF;
+  background: radial-gradient(ellipse at center, #FF3D00 0%, #FF3D00 14%, #FFF 15%, #FFF 100%);
+  background-size: cover;
+  background-position: center;
+  border-radius: 50%;
+}
+.loader-82::after, .loader-82::before {
+  content: '';
+  position: absolute;
+  height: 16px;
+  width: 4px;
+  background: #FF3D00;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translateX(-50%) rotate(0deg);
+          transform: translateX(-50%) rotate(0deg);
+  -webkit-transform-origin: 25% 0;
+          transform-origin: 25% 0;
+  -webkit-animation: rotation 10s linear infinite;
+          animation: rotation 10s linear infinite;
+}
+.loader-82::before {
+  height: 22px;
+  width: 2px;
+  -webkit-transform: translateX(-50%) rotate(0deg);
+          transform: translateX(-50%) rotate(0deg);
+  -webkit-animation-duration: 1s;
+          animation-duration: 1s;
+}
+
+.loader-83 {
+  width: 175px;
+  height: 80px;
+  position: relative;
+}
+.loader-83::before {
+  content: '';
+  left: 60px;
+  bottom: 18px;
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: #FFF;
+  background-image: radial-gradient(circle 8px at 18px 18px, #263238 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, #263238 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, #263238 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, #263238 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, #263238 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #263238 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #263238 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, #263238 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, #263238 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, #263238 100%, transparent 0);
+  background-repeat: no-repeat;
+  -webkit-animation: rotationBack 3s linear infinite;
+          animation: rotationBack 3s linear infinite;
+}
+.loader-83::after {
+  content: '';
+  left: 94px;
+  bottom: 15px;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #FFF;
+  background-image: radial-gradient(circle 5px at 12px 12px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, #263238 100%, transparent 0);
+  background-repeat: no-repeat;
+  animation: rotationBack 4s linear infinite reverse;
+}
+
+.loader-84 {
+  width: 15px;
+  height: 20px;
+  background: #FFF;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: bump 0.4s ease-in infinite alternate;
+          animation: bump 0.4s ease-in infinite alternate;
+}
+.loader-84::after {
+  content: '';
+  left: 50%;
+  top: 100%;
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
+  position: absolute;
+  border: 15px solid transparent;
+  border-top-color: #FFF;
+}
+
+.loader-85 {
+  width: 15px;
+  height: 20px;
+  background: #FFF;
+  display: inline-block;
+  position: relative;
+  -webkit-animation: bump 0.4s linear infinite alternate;
+          animation: bump 0.4s linear infinite alternate;
+}
+.loader-85::after {
+  content: '';
+  left: 50%;
+  bottom: 100%;
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
+  position: absolute;
+  border: 15px solid transparent;
+  border-bottom-color: #FFF;
+}
+
+.loader-86 {
+  width: 48px;
+  height: 12px;
+  background: #FFF;
+  display: inline-block;
+  position: relative;
+}
+.loader-86::after {
+  content: '';
+  left: 50%;
+  bottom: 0;
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
+  position: absolute;
+  border: 15px solid transparent;
+  border-top-color: #FFF;
+  -webkit-animation: bump 0.4s ease-in-out infinite alternate;
+          animation: bump 0.4s ease-in-out infinite alternate;
+}
+.loader-86::before {
+  content: '';
+  left: 50%;
+  bottom: 25px;
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
+  position: absolute;
+  width: 15px;
+  height: 20px;
+  background: #FFF;
+  -webkit-animation: bump 0.4s ease-in-out infinite alternate;
+          animation: bump 0.4s ease-in-out infinite alternate;
+}
+
+.loader-87 {
+  width: 48px;
+  height: 12px;
+  background: #FFF;
+  display: inline-block;
+  position: relative;
+}
+.loader-87::after {
+  content: '';
+  left: 50%;
+  top: -47px;
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
+  position: absolute;
+  border: 15px solid transparent;
+  border-bottom-color: #FFF;
+  -webkit-animation: bump 0.4s ease-in-out infinite alternate;
+          animation: bump 0.4s ease-in-out infinite alternate;
+}
+.loader-87::before {
+  content: '';
+  left: 50%;
+  bottom: 15px;
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
+  position: absolute;
+  width: 15px;
+  height: 20px;
+  background: #FFF;
+  -webkit-animation: bump 0.4s ease-in-out infinite alternate;
+          animation: bump 0.4s ease-in-out infinite alternate;
+}
+
+.loader-88 {
+  width: 48px;
+  height: 24px;
+  display: inline-block;
+  position: relative;
+  color: #FFF;
+  border: 1px solid;
+  -webkit-animation: fillX 2s linear infinite;
+          animation: fillX 2s linear infinite;
+}
+.loader-88::after {
+  content: '';
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  background: #FFF;
+  width: 5px;
+  height: 12px;
+}
+
+.loader-89 {
+  width: 48px;
+  height: 24px;
+  display: inline-block;
+  position: relative;
+  border: 1px solid #FFF;
+}
+.loader-89::after {
+  content: '';
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  border: 1px solid #FFF;
+  width: 5px;
+  height: 12px;
+}
+.loader-89::before {
+  content: '';
+  position: absolute;
+  left: -8px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  height: 80%;
+  width: 6px;
+  -webkit-animation: animloader89  2s linear infinite;
+          animation: animloader89  2s linear infinite;
+}
+
+.loader-90 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  border: 4px solid #FFF;
+  -webkit-animation: fill 2s linear infinite alternate;
+          animation: fill 2s linear infinite alternate;
+  color: rgba(255, 61, 0, 0.9);
+  border-radius: 0 0 4px 4px;
+}
+.loader-90::after {
+  content: '';
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  border: 4px solid #FFF;
+  width: 20px;
+  height: 25px;
+  border-radius: 0 4px 4px 0;
+}
+
+.loader-91 {
+  width: 32px;
+  height: 72px;
+  display: inline-block;
+  position: relative;
+  border: 2px solid #FFF;
+  -webkit-animation: animloader91 2s linear infinite alternate;
+          animation: animloader91 2s linear infinite alternate;
+  color: #FF3D00;
+  border-radius: 0 0 4px 4px;
+  -webkit-transform: perspective(140px) rotateX(-45deg);
+          transform: perspective(140px) rotateX(-45deg);
+}
+
+.loader-92 {
+  width: 48px;
+  height: 40px;
+  display: inline-block;
+  position: relative;
+  background: #FFF;
+  border-radius: 15% 15% 35% 35%;
+}
+.loader-92::after {
+  content: '';
+  position: absolute;
+  left: 45px;
+  top: 8px;
+  border: 4px solid #FFF;
+  width: 16px;
+  height: 20px;
+  border-radius: 0 4px 4px 0;
+}
+.loader-92::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 10px;
+  color: #FFF;
+  top: -15px;
+  left: 11px;
+  -webkit-animation: animloader92 1s ease infinite;
+          animation: animloader92 1s ease infinite;
+}
+
+.loader-93 {
+  width: 96px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  background: #FFF;
+  border-radius: 48px 48px 0 0;
+  overflow: hidden;
+}
+.loader-93::after {
+  content: '';
+  position: absolute;
+  width: 24px;
+  height: 12px;
+  border-radius: 24px 24px 0 0;
+  background: #FF3D00;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  bottom: 0;
+}
+.loader-93::before {
+  content: '';
+  position: absolute;
+  width: 4px;
+  height: 32px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  bottom: 0;
+  background: #FF3D00;
+  -webkit-transform-origin: 50% 100%;
+          transform-origin: 50% 100%;
+  -webkit-animation: animloader93 2s linear infinite alternate;
+          animation: animloader93 2s linear infinite alternate;
+}
+
+.loader-94 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  border: 3px solid #FFF;
+  border-radius: 50%;
+  -webkit-animation: animloader94 2s linear infinite;
+          animation: animloader94 2s linear infinite;
+}
+.loader-94::after {
+  content: '';
+  width: 6px;
+  height: 24px;
+  background: #FFF;
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+  position: absolute;
+  bottom: -20px;
+  left: 46px;
+}
+
+.loader-95 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader-95::after {
+  content: '';
+  width: 48px;
+  height: 48px;
+  left: 0;
+  bottom: 0;
+  position: absolute;
+  border-radius: 50% 50% 0;
+  border: 15px solid #FFF;
+  -webkit-transform: rotate(45deg) translate(0, 0);
+          transform: rotate(45deg) translate(0, 0);
+  -webkit-animation: animMarker 0.4s ease-in-out infinite alternate;
+          animation: animMarker 0.4s ease-in-out infinite alternate;
+}
+.loader-95::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  top: 150%;
+  width: 24px;
+  height: 4px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.2);
+  -webkit-animation: animShadow 0.4s ease-in-out infinite alternate;
+          animation: animShadow 0.4s ease-in-out infinite alternate;
+}
+
+.loader-96 {
+  width: 48px;
+  height: 48px;
+  background: #FF3D00;
+  display: inline-block;
+  position: relative;
+  animation: rotationBack 1s ease-in-out infinite reverse;
+}
+.loader-96::before {
+  content: '';
+  left: 0;
+  top: 0;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  background: #FF3D00;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
+}
+.loader-96::after {
+  content: '';
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  background: #FFF;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
+}
+
+.loader-97 {
+  width: 60px;
+  height: 60px;
+  display: inline-block;
+  position: relative;
+  background: radial-gradient(ellipse at center, #FFF 69%, rgba(0, 0, 0, 0) 70%), -webkit-gradient(linear, left top, right top, color-stop(47%, rgba(0, 0, 0, 0)), color-stop(48%, #FFF), color-stop(52%, #FFF), color-stop(53%, rgba(0, 0, 0, 0)));
+  background: radial-gradient(ellipse at center, #FFF 69%, rgba(0, 0, 0, 0) 70%), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #FFF 48%, #FFF 52%, rgba(0, 0, 0, 0) 53%);
+  background-size: 20px 20px , 20px auto;
+  background-repeat: repeat-x;
+  background-position: center bottom, center -5px;
+}
+.loader-97::before, .loader-97::after {
+  content: '';
+  position: absolute;
+  left: -20px;
+  top: 0;
+  width: 20px;
+  height: 60px;
+  background: radial-gradient(ellipse at center, #FFF 69%, rgba(0, 0, 0, 0) 70%), -webkit-gradient(linear, left top, right top, color-stop(47%, rgba(0, 0, 0, 0)), color-stop(48%, #FFF), color-stop(52%, #FFF), color-stop(53%, rgba(0, 0, 0, 0)));
+  background: radial-gradient(ellipse at center, #FFF 69%, rgba(0, 0, 0, 0) 70%), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #FFF 48%, #FFF 52%, rgba(0, 0, 0, 0) 53%);
+  background-size: 20px 20px , 20px auto;
+  background-repeat: no-repeat;
+  background-position: center bottom, center -5px;
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transform-origin: 50% 0%;
+          transform-origin: 50% 0%;
+  -webkit-animation: animPend 1s linear infinite alternate;
+          animation: animPend 1s linear infinite alternate;
+}
+.loader-97::after {
+  -webkit-animation: animPend2 1s linear infinite alternate;
+          animation: animPend2 1s linear infinite alternate;
+  left: 100%;
+}
+
+.loader-98 {
+  width: 24px;
+  height: 80px;
+  border: 1px solid #FFF;
+  border-radius: 0 0 50px 50px;
+  position: relative;
+  box-shadow: 0px 0px #FF3D00 inset;
+  background-image: linear-gradient(#FF3D00 100px, transparent 0);
+  background-position: 0px 0px;
+  background-size: 22px 80px;
+  background-repeat: no-repeat;
+  -webkit-animation: animloader98 6s linear infinite;
+          animation: animloader98 6s linear infinite;
+}
+.loader-98::after {
+  content: '';
+  top: -6px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  position: absolute;
+  border: 1px solid #FFF;
+  border-radius: 50%;
+  width: 28px;
+  height: 6px;
+}
+.loader-98::before {
+  content: '';
+  left: 0;
+  bottom: -4px;
+  border-radius: 50%;
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  -webkit-animation: animloader98s 6s linear infinite;
+          animation: animloader98s 6s linear infinite;
+}
+
+.loader-99 {
+  width: 20px;
+  height: 20px;
+  margin-top: 80px;
+  border-radius: 50%;
+  background: #FF3D00;
+  border: 5px solid #FFF;
+  position: relative;
+}
+.loader-99::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: 10px;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 8px;
+  height: 80px;
+  border: 2px solid #FFF;
+  border-bottom: none;
+  background: #FFF;
+  color: #FF3D00;
+  border-radius: 50px 50px 0 0;
+  box-shadow: 0px 0px  inset;
+  -webkit-animation: animloader99 6s linear infinite;
+          animation: animloader99 6s linear infinite;
+}
+
+.loader-100 {
+  width: 180px;
+  height: 140px;
+  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 15px at 15px 15px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
+  background-size: 50px 50px, 100px 75px, 50px 50px, 30px 32px, 136px 20px;
+  background-repeat: no-repeat;
+  background-position: 0px 30px, 30px 0px, 113px 29px, 147px 50px, 23px 60px;
+  position: relative;
+}
+.loader-100::after {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 65px;
+  width: 2px;
+  height: 6px;
+  color: #FFF;
+  -webkit-animation: animloader100 0.6s linear infinite;
+          animation: animloader100 0.6s linear infinite;
+}
+
+.loader-101 {
+  width: 175px;
+  height: 80px;
+  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
+  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
+  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
+  background-repeat: no-repeat;
+  position: relative;
+}
+.loader-101::after {
+  content: '';
+  left: 50%;
+  bottom: 0;
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
+  position: absolute;
+  border: 15px solid transparent;
+  border-top-color: #FF3D00;
+  -webkit-animation: fadePush 1s linear infinite;
+          animation: fadePush 1s linear infinite;
+}
+.loader-101::before {
+  content: '';
+  left: 50%;
+  bottom: 30px;
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  background: #FF3D00;
+  -webkit-animation: fadePush 1s linear infinite;
+          animation: fadePush 1s linear infinite;
+}
+
+.loader-102 {
+  width: 175px;
+  height: 80px;
+  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
+  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
+  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
+  background-repeat: no-repeat;
+  position: relative;
+}
+.loader-102::after {
+  content: '';
+  left: 50%;
+  bottom: 30px;
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
+  position: absolute;
+  border: 15px solid transparent;
+  border-bottom-color: #FF3D00;
+  -webkit-animation: fadePull 1s linear infinite;
+          animation: fadePull 1s linear infinite;
+}
+.loader-102::before {
+  content: '';
+  left: 50%;
+  bottom: 15px;
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  background: #FF3D00;
+  -webkit-animation: fadePull 1s linear infinite;
+          animation: fadePull 1s linear infinite;
+}
+
+.loader-103 {
+  width: 175px;
+  height: 80px;
+  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
+  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
+  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
+  background-repeat: no-repeat;
+  position: relative;
+}
+.loader-103::after {
+  content: '';
+  left: 0;
+  right: 0;
+  margin: auto;
+  bottom: 20px;
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 5px solid transparent;
+  border-color: #FF3D00 transparent;
+  -webkit-animation: rotation 1s linear infinite;
+          animation: rotation 1s linear infinite;
+}
+
+.loader-104 {
+  width: 175px;
+  height: 80px;
+  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
+  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
+  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
+  background-repeat: no-repeat;
+  position: relative;
+}
+.loader-104::before {
+  content: '';
+  left: 60px;
+  bottom: 18px;
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: #FF3D00;
+  background-image: radial-gradient(circle 8px at 18px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, #FFF 100%, transparent 0);
+  background-repeat: no-repeat;
+  -webkit-animation: rotationBack 3s linear infinite;
+          animation: rotationBack 3s linear infinite;
+}
+.loader-104::after {
+  content: '';
+  left: 94px;
+  bottom: 15px;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #FF3D00;
+  background-image: radial-gradient(circle 5px at 12px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, #FFF 100%, transparent 0);
+  background-repeat: no-repeat;
+  animation: rotationBack 4s linear infinite reverse;
+}
+
+.loader-105 {
+  width: 175px;
+  height: 80px;
+  background-image: linear-gradient(#263238 50px, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
+  background-size: 64px 6px, 50px 50px, 100px 76px, 50px 50px, 120px 40px;
+  background-position: 55px 60px, 0px 30px, 37px 0px, 122px 30px, 25px 40px;
+  background-repeat: no-repeat;
+  position: relative;
+}
+.loader-105::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%) rotate(-180deg);
+          transform: translateX(-50%) rotate(-180deg);
+  top: 62px;
+  height: 64px;
+  width: 60px;
+  background-color: #FFF;
+  background-image: linear-gradient(#DDD 20px, transparent 0), linear-gradient(#DDD 5px, transparent 0), linear-gradient(#DDD 10px, transparent 0), linear-gradient(#DDD 10px, transparent 0);
+  background-size: 50px 20px;
+  background-position: 5px 36px, 5px 25px, 5px 10px;
+  background-repeat: no-repeat;
+  border-radius: 2px 2px 4px 4px;
+  z-index: 10;
+  box-shadow: 0px -4px 7px rgba(0, 0, 0, 0.5);
+  -webkit-animation: animloader105 4s linear infinite;
+          animation: animloader105 4s linear infinite;
+}
+
+.loader-106 {
+  width: 32px;
+  height: 90px;
+  margin-bottom: 20px;
+  position: relative;
+  border-radius: 50% 50% 0 0;
+  border-bottom: 10px solid #FF3D00;
+  background-color: #FFF;
+  background-image: radial-gradient(ellipse at center, #FFF 34%, #FF3D00 35%, #FF3D00 54%, #FFF 55%), linear-gradient(#FF3D00 10px, transparent 0);
+  background-size: 28px 28px;
+  background-position: center 20px , center 2px;
+  background-repeat: no-repeat;
+  -webkit-animation: animloader106back 1s linear infinite alternate;
+          animation: animloader106back 1s linear infinite alternate;
+}
+.loader-106::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 64px;
+  height: 44px;
+  border-radius: 50%;
+  box-shadow: 0px 15px #FF3D00 inset;
+  top: 67px;
+}
+.loader-106::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%) rotate(45deg);
+          transform: translateX(-50%) rotate(45deg);
+  width: 34px;
+  height: 34px;
+  top: 112%;
+  background: radial-gradient(ellipse at center, #ffdf00 8%, rgba(249, 62, 0, 0.6) 24%, rgba(0, 0, 0, 0) 100%);
+  border-radius: 50% 50% 0;
+  background-repeat: no-repeat;
+  background-position: -44px -44px;
+  background-size: 100px 100px;
+  box-shadow: 4px 4px 12px 0px rgba(255, 61, 0, 0.5);
+  -webkit-animation: animloader106 1s linear infinite alternate;
+          animation: animloader106 1s linear infinite alternate;
+}
+
+.loader-107 {
+  width: 106px;
+  height: 56px;
+  background-image: linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), radial-gradient(circle 14px, #FFF 100%, transparent 0);
+  background-size: 48px 15px , 15px 35px, 15px 35px, 25px 15px, 28px 28px;
+  background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
+  background-repeat: no-repeat;
+  position: relative;
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+}
+.loader-107::after, .loader-107::before {
+  content: '';
+  position: absolute;
+  width: 56px;
+  height: 56px;
+  border: 6px solid #FFF;
+  border-radius: 50%;
+  left: -45px;
+  top: -10px;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(#FFF 64px, transparent 0), linear-gradient(#FFF 66px, transparent 0), radial-gradient(circle 4px, #FFF 100%, transparent 0);
+  background-size: 40px 1px , 1px 40px, 8px 8px;
+  background-position: center center;
+  -webkit-animation: rotation 0.3s linear infinite;
+          animation: rotation 0.3s linear infinite;
+}
+.loader-107::before {
+  left: 25px;
+  top: 60px;
+}
+
+.loader-108 {
+  width: 48px;
+  height: 24px;
+  color: #FFF;
+  background: currentColor;
+  border-radius: 50% 50% 0 0;
+  position: relative;
+  margin-top: 36px;
+  -webkit-animation: animloader108 4s linear infinite;
+          animation: animloader108 4s linear infinite;
+}
+.loader-108::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: currentColor;
+  top: -34px;
+  -webkit-animation: animloader108s 4s linear infinite;
+          animation: animloader108s 4s linear infinite;
+}
+
+.loader-109 {
+  font-size: 48px;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  color: #FF3D00;
+  letter-spacing: 2px;
+  position: relative;
+}
+.loader-109::after {
+  content: 'Loading';
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #FFF;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  -webkit-animation: animloader110 6s linear infinite;
+          animation: animloader110 6s linear infinite;
+}
+
+.loader-110 {
+  font-size: 48px;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  color: #FFF;
+  letter-spacing: 2px;
+  position: relative;
+}
+.loader-110::after {
+  content: 'Loading';
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #263238;
+  text-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 1px #FFF;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  -webkit-animation: animloader110 6s linear infinite;
+          animation: animloader110 6s linear infinite;
+}
+
+.loader-111 {
+  font-size: 48px;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  color: #263238;
+  text-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 1px #FFF;
+  letter-spacing: 2px;
+  position: relative;
+}
+.loader-111::after {
+  content: 'Loading';
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #FFF;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  -webkit-animation: animloader111 6s linear infinite;
+          animation: animloader111 6s linear infinite;
+}
+
+.loader-112 {
+  font-size: 48px;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  color: #FFF;
+  position: relative;
+}
+.loader-112::before {
+  content: '';
+  position: absolute;
+  left: 34px;
+  bottom: 8px;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 5px solid #FFF;
+  border-bottom-color: #FF3D00;
+  -webkit-animation: rotation 0.6s linear infinite;
+          animation: rotation 0.6s linear infinite;
+}
+
+.loader-113 {
+  color: #FFF;
+  position: relative;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 48px;
+  letter-spacing: 4px;
+}
+.loader-113::before {
+  content: '';
+  position: absolute;
+  right: 70px;
+  bottom: 10px;
+  height: 28px;
+  width: 5.15px;
+  background: currentColor;
+  -webkit-animation: animloader113L 1s linear infinite alternate;
+          animation: animloader113L 1s linear infinite alternate;
+}
+.loader-113::after {
+  content: '';
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  left: 125px;
+  top: 2px;
+  border-radius: 50%;
+  background: red;
+  -webkit-animation: animloader113 1s linear infinite alternate;
+          animation: animloader113 1s linear infinite alternate;
+}
+
+.loader-114 {
+  color: #FFF;
+  position: relative;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 48px;
+  letter-spacing: 4px;
+}
+.loader-114::before {
+  content: '';
+  position: absolute;
+  right: 70px;
+  bottom: 10px;
+  height: 28px;
+  width: 5.15px;
+  background: currentColor;
+}
+.loader-114::after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  left: 125px;
+  top: 2px;
+  border-radius: 50%;
+  background: red;
+  -webkit-animation: animloader114 1s ease-in infinite;
+          animation: animloader114 1s ease-in infinite;
+}
+
+.loader-115 {
+  color: #FFF;
+  position: relative;
+  font-size: 48px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+.loader-115::after {
+  content: '';
+  width: 5px;
+  height: 5px;
+  background: currentColor;
+  position: absolute;
+  bottom: 10px;
+  right: -5px;
+  -webkit-animation: animloader115 1s linear infinite;
+          animation: animloader115 1s linear infinite;
+}
+
+.loader-116 {
+  color: #FFF;
+  position: relative;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 48px;
+  letter-spacing: 4px;
+}
+.loader-116::before {
+  content: '';
+  position: absolute;
+  right: 70px;
+  bottom: 10px;
+  height: 28px;
+  width: 5px;
+  background: currentColor;
+}
+.loader-116::after {
+  content: '';
+  width: 4px;
+  height: 4px;
+  background: currentColor;
+  position: absolute;
+  right: 70px;
+  top: 8px;
+  -webkit-animation: animloader116 0.6s ease-out infinite alternate;
+          animation: animloader116 0.6s ease-out infinite alternate;
+}
+
+.loader-117 {
+  color: #FFF;
+  position: relative;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 48px;
+  letter-spacing: 4px;
+}
+.loader-117::before {
+  content: '';
+  position: absolute;
+  right: 68px;
+  bottom: 10px;
+  height: 28px;
+  width: 7px;
+  outline: 1px solid #FFF;
+  color: #FF3D00;
+  -webkit-animation: animloader117 1s linear infinite alternate;
+          animation: animloader117 1s linear infinite alternate;
+}
+.loader-117::after {
+  content: '';
+  width: 4px;
+  height: 4px;
+  background: #FF3D00;
+  position: absolute;
+  right: 70px;
+  top: 8px;
+  -webkit-animation: animloader116 1s ease-out infinite alternate;
+          animation: animloader116 1s ease-out infinite alternate;
+}
+
+.loader-118 {
+  position: relative;
+}
+.loader-118::before {
+  content: 'Loading';
+  color: #FFF;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 48px;
+  letter-spacing: 2px;
+  display: inline-block;
+  -webkit-animation: floating 1s ease-out infinite alternate;
+          animation: floating 1s ease-out infinite alternate;
+}
+.loader-118::after {
+  content: '';
+  width: 100%;
+  height: 10px;
+  background: rgba(0, 0, 0, 0.15);
+  position: absolute;
+  left: 0;
+  top: 100%;
+  -webkit-filter: blur(4px);
+          filter: blur(4px);
+  border-radius: 50%;
+  -webkit-animation: animloader118 1s ease-out infinite alternate;
+          animation: animloader118 1s ease-out infinite alternate;
+}
+
+.loader-119 {
+  font-size: 48px;
+  letter-spacing: 2px;
+  font-family: Arial, Helvetica, sans-serif;
+  color: #FFF;
+  -webkit-animation: animloader119 1s ease-in infinite alternate;
+          animation: animloader119 1s ease-in infinite alternate;
+}
+
+.loader-120 {
+  font-size: 48px;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  color: #FF3D00;
+  letter-spacing: 2px;
+  position: relative;
+}
+.loader-120::after {
+  content: 'Loading';
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #FFF;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  -webkit-animation: animloader111 10s ease-in infinite;
+          animation: animloader111 10s ease-in infinite;
+}
+
+.loader-121 {
+  width: 95%;
+  height: 100px;
+  background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), radial-gradient(circle 50px at 50px 50px, #FFF 99%, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0);
+  background-repeat: no-repeat;
+  background-size: 75px 100px, 100px 100px, 125px 20px, 260px 20px, 260px 20px;
+  background-position: -50% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
+  -webkit-animation: animloader121 1s linear infinite;
+          animation: animloader121 1s linear infinite;
+}
+
+.loader-122 {
+  width: 95%;
+  height: 100px;
+  background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), linear-gradient(#FFF 100px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0);
+  background-repeat: no-repeat;
+  background-size: 75px 100px, 100px 100px, 125px 20px, 260px 20px, 260px 20px;
+  background-position: -50% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
+  -webkit-animation: animloader121 1s linear infinite;
+          animation: animloader121 1s linear infinite;
+}
+
+.loader-123 {
+  width: 95%;
+  height: 100px;
+  position: relative;
+  background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0);
+  background-repeat: no-repeat;
+  background-size: 75px 100px,  125px 20px, 260px 20px, 260px 20px;
+  background-position: 0% 0, 120px 0, 120px 40px, 120px 80px;
+  -webkit-animation: animloader123 1s linear infinite;
+          animation: animloader123 1s linear infinite;
+}
+.loader-123::after {
+  content: '';
+  width: 100px;
+  height: 100px;
+  border-radius: 8px;
+  background: #FFF;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.loader-124 {
+  width: 320px;
+  height: 150px;
+  position: relative;
+  background: #FFF;
+}
+.loader-124::after {
+  content: '';
+  width: calc(100% - 30px);
+  height: calc(100% - 30px);
+  top: 15px;
+  left: 15px;
+  position: absolute;
+  background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%), linear-gradient(#DDD 56px, transparent 0), linear-gradient(#DDD 24px, transparent 0), linear-gradient(#DDD 18px, transparent 0), linear-gradient(#DDD 66px, transparent 0);
+  background-repeat: no-repeat;
+  background-size: 75px 130px, 55px 56px, 160px 30px, 260px 20px, 290px 56px;
+  background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
+  -webkit-animation: animloader124 1s linear infinite;
+          animation: animloader124 1s linear infinite;
+}
+
+.loader-125 {
+  width: 320px;
+  height: 150px;
+  position: relative;
+  background: #FFF;
+}
+.loader-125::after {
+  content: '';
+  width: calc(100% - 30px);
+  height: calc(100% - 30px);
+  top: 15px;
+  left: 15px;
+  position: absolute;
+  background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%), radial-gradient(circle 28px at 28px 28px, #DDD 99%, transparent 0), linear-gradient(#DDD 24px, transparent 0), linear-gradient(#DDD 18px, transparent 0), linear-gradient(#DDD 66px, transparent 0);
+  background-repeat: no-repeat;
+  background-size: 75px 130px, 55px 56px, 160px 30px, 260px 20px, 290px 56px;
+  background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
+  -webkit-animation: animloader124 1s linear infinite;
+          animation: animloader124 1s linear infinite;
+}
+
+.loader-126 {
+  width: 164px;
+  height: 170px;
+  position: relative;
+  background: #FFF;
+}
+.loader-126::after {
+  content: '';
+  width: calc(100% - 30px);
+  height: calc(100% - 30px);
+  top: 15px;
+  left: 15px;
+  position: absolute;
+  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 100%), linear-gradient(#DDD 74px, transparent 0), linear-gradient(#DDD 16px, transparent 0), linear-gradient(#DDD 24px, transparent 0);
+  background-repeat: no-repeat;
+  background-size: 50px 170px, 100% 74px, 100% 16px, 100% 32px;
+  background-position: 0 0, 0 0, 0px 85px, 0px 110px;
+  -webkit-animation: animloader126 1s linear infinite;
+          animation: animloader126 1s linear infinite;
+}
+
+/* keyFrames */
+@-webkit-keyframes rotation {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes rotation {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes rotationBack {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(-360deg);
+            transform: rotate(-360deg);
+  }
+}
+@keyframes rotationBack {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(-360deg);
+            transform: rotate(-360deg);
+  }
+}
+@-webkit-keyframes rotationBreak {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  25% {
+    -webkit-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  50% {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  75% {
+    -webkit-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes rotationBreak {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  25% {
+    -webkit-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  50% {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  75% {
+    -webkit-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes zeroRotation {
+  0% {
+    -webkit-transform: scale(1) rotate(0deg);
+            transform: scale(1) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: scale(0) rotate(360deg);
+            transform: scale(0) rotate(360deg);
+  }
+}
+@keyframes zeroRotation {
+  0% {
+    -webkit-transform: scale(1) rotate(0deg);
+            transform: scale(1) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: scale(0) rotate(360deg);
+            transform: scale(0) rotate(360deg);
+  }
+}
+@-webkit-keyframes shadowExpandX {
+  0% {
+    box-shadow: 0 0, 0 0;
+    color: rgba(255, 255, 255, 0.2);
+  }
+  100% {
+    box-shadow: -24px 0, 24px 0;
+    color: rgba(255, 255, 255, 0.8);
+  }
+}
+@keyframes shadowExpandX {
+  0% {
+    box-shadow: 0 0, 0 0;
+    color: rgba(255, 255, 255, 0.2);
+  }
+  100% {
+    box-shadow: -24px 0, 24px 0;
+    color: rgba(255, 255, 255, 0.8);
+  }
+}
+@-webkit-keyframes shadowPulse {
+  33% {
+    background: #FFF;
+    box-shadow: -24px 0 #FF3D00, 24px 0 #FFF;
+  }
+  66% {
+    background: #FF3D00;
+    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
+  }
+  100% {
+    background: #FFF;
+    box-shadow: -24px 0 #FFF, 24px 0 #FF3D00;
+  }
+}
+@keyframes shadowPulse {
+  33% {
+    background: #FFF;
+    box-shadow: -24px 0 #FF3D00, 24px 0 #FFF;
+  }
+  66% {
+    background: #FF3D00;
+    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
+  }
+  100% {
+    background: #FFF;
+    box-shadow: -24px 0 #FFF, 24px 0 #FF3D00;
+  }
+}
+@-webkit-keyframes shadowRolling {
+  0% {
+    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+  }
+  12% {
+    box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+  }
+  25% {
+    box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+  }
+  36% {
+    box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
+  }
+  62% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
+  }
+  75% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
+  }
+  87% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
+  }
+  100% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
+  }
+}
+@keyframes shadowRolling {
+  0% {
+    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+  }
+  12% {
+    box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+  }
+  25% {
+    box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+  }
+  36% {
+    box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
+  }
+  62% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
+  }
+  75% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
+  }
+  87% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
+  }
+  100% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
+  }
+}
+@-webkit-keyframes animloader14 {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0;
+  }
+}
+@keyframes animloader14 {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes scale50 {
+  0%, 100% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes scale50 {
+  0%, 100% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@-webkit-keyframes scaleOut {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes scaleOut {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@-webkit-keyframes animloader27 {
+  0% , 100% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+    opacity: 1;
+  }
+  50% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0;
+  }
+}
+@keyframes animloader27 {
+  0% , 100% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+    opacity: 1;
+  }
+  50% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes animloader28 {
+  0% {
+    box-shadow: -72px 0 #FFF inset;
+  }
+  100% {
+    box-shadow: 48px 0 #FFF inset;
+  }
+}
+@keyframes animloader28 {
+  0% {
+    box-shadow: -72px 0 #FFF inset;
+  }
+  100% {
+    box-shadow: 48px 0 #FFF inset;
+  }
+}
+@-webkit-keyframes animloader38 {
+  50% {
+    -webkit-transform: scale(1) translate(-50%, -50%);
+            transform: scale(1) translate(-50%, -50%);
+  }
+}
+@keyframes animloader38 {
+  50% {
+    -webkit-transform: scale(1) translate(-50%, -50%);
+            transform: scale(1) translate(-50%, -50%);
+  }
+}
+@-webkit-keyframes animloader42 {
+  0% {
+    box-shadow: -38px -6px, -14px 6px,  14px -6px;
+  }
+  33% {
+    box-shadow: -38px 6px, -14px -6px,  14px 6px;
+  }
+  66% {
+    box-shadow: -38px -6px, -14px 6px, 14px -6px;
+  }
+  100% {
+    box-shadow: -38px 6px, -14px -6px, 14px 6px;
+  }
+}
+@keyframes animloader42 {
+  0% {
+    box-shadow: -38px -6px, -14px 6px,  14px -6px;
+  }
+  33% {
+    box-shadow: -38px 6px, -14px -6px,  14px 6px;
+  }
+  66% {
+    box-shadow: -38px -6px, -14px 6px, 14px -6px;
+  }
+  100% {
+    box-shadow: -38px 6px, -14px -6px, 14px 6px;
+  }
+}
+@-webkit-keyframes animloader44 {
+  0% {
+    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
+  }
+  25% {
+    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
+  }
+  50% {
+    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
+  }
+  75% {
+    box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
+  }
+  100% {
+    box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
+  }
+}
+@keyframes animloader44 {
+  0% {
+    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
+  }
+  25% {
+    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
+  }
+  50% {
+    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
+  }
+  75% {
+    box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
+  }
+  100% {
+    box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
+  }
+}
+@-webkit-keyframes animloader45 {
+  0% {
+    box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
+  }
+  33% {
+    box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
+  }
+  66% {
+    box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
+  }
+  100% {
+    box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
+  }
+}
+@keyframes animloader45 {
+  0% {
+    box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
+  }
+  33% {
+    box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
+  }
+  66% {
+    box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
+  }
+  100% {
+    box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
+  }
+}
+@-webkit-keyframes animloader46 {
+  0% {
+    background: white;
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+  14% {
+    background: rgba(255, 255, 255, 0);
+    box-shadow: 9px -19px 0 -1px white, 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+  28% {
+    background: rgba(255, 255, 255, 0);
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px white, 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+  42% {
+    background: rgba(255, 255, 255, 0);
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px white, 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+  57% {
+    background: rgba(255, 255, 255, 0);
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px white, 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+  71% {
+    background: rgba(255, 255, 255, 0);
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px white, 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+  85% {
+    background: rgba(255, 255, 255, 0);
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px white;
+  }
+  100% {
+    background: rgba(255, 255, 255, 0.5);
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+}
+@keyframes animloader46 {
+  0% {
+    background: white;
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+  14% {
+    background: rgba(255, 255, 255, 0);
+    box-shadow: 9px -19px 0 -1px white, 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+  28% {
+    background: rgba(255, 255, 255, 0);
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px white, 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+  42% {
+    background: rgba(255, 255, 255, 0);
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px white, 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+  57% {
+    background: rgba(255, 255, 255, 0);
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px white, 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+  71% {
+    background: rgba(255, 255, 255, 0);
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px white, 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+  85% {
+    background: rgba(255, 255, 255, 0);
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px white;
+  }
+  100% {
+    background: rgba(255, 255, 255, 0.5);
+    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
+  }
+}
+@-webkit-keyframes animloader34 {
+  0% {
+    border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75);
+  }
+  33% {
+    border-color: rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35);
+  }
+  66% {
+    border-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25);
+  }
+  100% {
+    border-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15);
+  }
+}
+@keyframes animloader34 {
+  0% {
+    border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75);
+  }
+  33% {
+    border-color: rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35);
+  }
+  66% {
+    border-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25);
+  }
+  100% {
+    border-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15);
+  }
+}
+@-webkit-keyframes animloader51 {
+  0% {
+    border-color: white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
+  }
+  33% {
+    border-color: white white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
+  }
+  66% {
+    border-color: white white white rgba(255, 255, 255, 0);
+  }
+  100% {
+    border-color: white white white white;
+  }
+}
+@keyframes animloader51 {
+  0% {
+    border-color: white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
+  }
+  33% {
+    border-color: white white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
+  }
+  66% {
+    border-color: white white white rgba(255, 255, 255, 0);
+  }
+  100% {
+    border-color: white white white white;
+  }
+}
+@-webkit-keyframes animloader57 {
+  0% {
+    box-shadow: 0 0, 0 0, 0 0;
+  }
+  33% {
+    box-shadow: 24px 0px, 24px 0px, 24px 0px;
+  }
+  66% {
+    box-shadow: 24px 24px, 24px 24px, 24px 0px;
+  }
+  100% {
+    box-shadow: 0px 24px, 24px 24px, 24px 0px;
+  }
+}
+@keyframes animloader57 {
+  0% {
+    box-shadow: 0 0, 0 0, 0 0;
+  }
+  33% {
+    box-shadow: 24px 0px, 24px 0px, 24px 0px;
+  }
+  66% {
+    box-shadow: 24px 24px, 24px 24px, 24px 0px;
+  }
+  100% {
+    box-shadow: 0px 24px, 24px 24px, 24px 0px;
+  }
+}
+@-webkit-keyframes animloader58 {
+  0% , 32% {
+    box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
+  }
+  33% , 65% {
+    box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
+  }
+  66% , 99% {
+    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
+  }
+}
+@keyframes animloader58 {
+  0% , 32% {
+    box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
+  }
+  33% , 65% {
+    box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
+  }
+  66% , 99% {
+    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
+  }
+}
+@-webkit-keyframes animloader58m {
+  0% {
+    -webkit-transform: translate(0, 0) rotateX(0) rotateY(0);
+            transform: translate(0, 0) rotateX(0) rotateY(0);
+  }
+  33% {
+    -webkit-transform: translate(100%, 0) rotateX(0) rotateY(180deg);
+            transform: translate(100%, 0) rotateX(0) rotateY(180deg);
+  }
+  66% {
+    -webkit-transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
+            transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
+  }
+  100% {
+    -webkit-transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
+            transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
+  }
+}
+@keyframes animloader58m {
+  0% {
+    -webkit-transform: translate(0, 0) rotateX(0) rotateY(0);
+            transform: translate(0, 0) rotateX(0) rotateY(0);
+  }
+  33% {
+    -webkit-transform: translate(100%, 0) rotateX(0) rotateY(180deg);
+            transform: translate(100%, 0) rotateX(0) rotateY(180deg);
+  }
+  66% {
+    -webkit-transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
+            transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
+  }
+  100% {
+    -webkit-transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
+            transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
+  }
+}
+@-webkit-keyframes flipX {
+  0% {
+    -webkit-transform: perspective(200px) rotateX(0deg) rotateY(0deg);
+            transform: perspective(200px) rotateX(0deg) rotateY(0deg);
+  }
+  50% {
+    -webkit-transform: perspective(200px) rotateX(-180deg) rotateY(0deg);
+            transform: perspective(200px) rotateX(-180deg) rotateY(0deg);
+  }
+  100% {
+    -webkit-transform: perspective(200px) rotateX(-180deg) rotateY(-180deg);
+            transform: perspective(200px) rotateX(-180deg) rotateY(-180deg);
+  }
+}
+@keyframes flipX {
+  0% {
+    -webkit-transform: perspective(200px) rotateX(0deg) rotateY(0deg);
+            transform: perspective(200px) rotateX(0deg) rotateY(0deg);
+  }
+  50% {
+    -webkit-transform: perspective(200px) rotateX(-180deg) rotateY(0deg);
+            transform: perspective(200px) rotateX(-180deg) rotateY(0deg);
+  }
+  100% {
+    -webkit-transform: perspective(200px) rotateX(-180deg) rotateY(-180deg);
+            transform: perspective(200px) rotateX(-180deg) rotateY(-180deg);
+  }
+}
+@-webkit-keyframes fill {
+  0% {
+    box-shadow: 0 0 inset;
+  }
+  100% {
+    box-shadow: 0 -48px inset;
+  }
+}
+@keyframes fill {
+  0% {
+    box-shadow: 0 0 inset;
+  }
+  100% {
+    box-shadow: 0 -48px inset;
+  }
+}
+@-webkit-keyframes fillX {
+  0% {
+    box-shadow: 0 0 inset;
+  }
+  100% {
+    box-shadow: 48px 0 inset;
+  }
+}
+@keyframes fillX {
+  0% {
+    box-shadow: 0 0 inset;
+  }
+  100% {
+    box-shadow: 48px 0 inset;
+  }
+}
+@-webkit-keyframes animloader56 {
+  0% {
+    -webkit-transform: translate(0, 0) rotateX(0) rotateY(0);
+            transform: translate(0, 0) rotateX(0) rotateY(0);
+  }
+  25% {
+    -webkit-transform: translate(100%, 0) rotateX(0) rotateY(180deg);
+            transform: translate(100%, 0) rotateX(0) rotateY(180deg);
+  }
+  50% {
+    -webkit-transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
+            transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
+  }
+  75% {
+    -webkit-transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
+            transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
+  }
+  100% {
+    -webkit-transform: translate(0, 0) rotateX(0) rotateY(360deg);
+            transform: translate(0, 0) rotateX(0) rotateY(360deg);
+  }
+}
+@keyframes animloader56 {
+  0% {
+    -webkit-transform: translate(0, 0) rotateX(0) rotateY(0);
+            transform: translate(0, 0) rotateX(0) rotateY(0);
+  }
+  25% {
+    -webkit-transform: translate(100%, 0) rotateX(0) rotateY(180deg);
+            transform: translate(100%, 0) rotateX(0) rotateY(180deg);
+  }
+  50% {
+    -webkit-transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
+            transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
+  }
+  75% {
+    -webkit-transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
+            transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
+  }
+  100% {
+    -webkit-transform: translate(0, 0) rotateX(0) rotateY(360deg);
+            transform: translate(0, 0) rotateX(0) rotateY(360deg);
+  }
+}
+@-webkit-keyframes animloader59 {
+  0% {
+    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
+  }
+  12% {
+    box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
+  }
+  25% {
+    box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
+  }
+  37% {
+    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
+  }
+  62% {
+    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px white, 24px 48px white, 0px 48px white;
+  }
+  75% {
+    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px white, 0px 48px white;
+  }
+  87% {
+    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px white;
+  }
+  100% {
+    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
+  }
+}
+@keyframes animloader59 {
+  0% {
+    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
+  }
+  12% {
+    box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
+  }
+  25% {
+    box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
+  }
+  37% {
+    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
+  }
+  62% {
+    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px white, 24px 48px white, 0px 48px white;
+  }
+  75% {
+    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px white, 0px 48px white;
+  }
+  87% {
+    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px white;
+  }
+  100% {
+    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
+  }
+}
+@-webkit-keyframes animloader60 {
+  0% {
+    top: 0;
+    color: white;
+  }
+  50% {
+    top: 30px;
+    color: rgba(255, 255, 255, 0.2);
+  }
+  100% {
+    top: 0;
+    color: white;
+  }
+}
+@keyframes animloader60 {
+  0% {
+    top: 0;
+    color: white;
+  }
+  50% {
+    top: 30px;
+    color: rgba(255, 255, 255, 0.2);
+  }
+  100% {
+    top: 0;
+    color: white;
+  }
+}
+@-webkit-keyframes animloader61 {
+  0% {
+    height: 48px;
+  }
+  100% {
+    height: 4.8px;
+  }
+}
+@keyframes animloader61 {
+  0% {
+    height: 48px;
+  }
+  100% {
+    height: 4.8px;
+  }
+}
+@-webkit-keyframes animloader61m {
+  0% {
+    height: 40px;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+  100% {
+    height: 10px;
+    -webkit-transform: translateY(30px);
+            transform: translateY(30px);
+  }
+}
+@keyframes animloader61m {
+  0% {
+    height: 40px;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+  100% {
+    height: 10px;
+    -webkit-transform: translateY(30px);
+            transform: translateY(30px);
+  }
+}
+@-webkit-keyframes animloader63 {
+  0% {
+    box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 white, 60px 0 white;
+  }
+  50% {
+    box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0.25), 60px 0 white;
+  }
+  100% {
+    box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0.25);
+  }
+}
+@keyframes animloader63 {
+  0% {
+    box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 white, 60px 0 white;
+  }
+  50% {
+    box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0.25), 60px 0 white;
+  }
+  100% {
+    box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0.25);
+  }
+}
+@-webkit-keyframes animloader64 {
+  0% {
+    box-shadow: 20px -10px, 40px 10px, 60px 0px;
+  }
+  25% {
+    box-shadow: 20px 0px, 40px  0px, 60px 10px;
+  }
+  50% {
+    box-shadow: 20px 10px, 40px -10px, 60px 0px;
+  }
+  75% {
+    box-shadow: 20px 0px, 40px 0px, 60px -10px;
+  }
+  100% {
+    box-shadow: 20px -10px, 40px 10px, 60px 0px;
+  }
+}
+@keyframes animloader64 {
+  0% {
+    box-shadow: 20px -10px, 40px 10px, 60px 0px;
+  }
+  25% {
+    box-shadow: 20px 0px, 40px  0px, 60px 10px;
+  }
+  50% {
+    box-shadow: 20px 10px, 40px -10px, 60px 0px;
+  }
+  75% {
+    box-shadow: 20px 0px, 40px 0px, 60px -10px;
+  }
+  100% {
+    box-shadow: 20px -10px, 40px 10px, 60px 0px;
+  }
+}
+@-webkit-keyframes animloader65 {
+  0% {
+    box-shadow: -10px 20px, 10px 35px , 0px 50px;
+  }
+  25% {
+    box-shadow: 0px 20px ,  0px 35px, 10px 50px;
+  }
+  50% {
+    box-shadow: 10px 20px, -10px 35px, 0px 50px;
+  }
+  75% {
+    box-shadow: 0px 20px, 0px  35px, -10px 50px;
+  }
+  100% {
+    box-shadow: -10px 20px, 10px  35px, 0px 50px;
+  }
+}
+@keyframes animloader65 {
+  0% {
+    box-shadow: -10px 20px, 10px 35px , 0px 50px;
+  }
+  25% {
+    box-shadow: 0px 20px ,  0px 35px, 10px 50px;
+  }
+  50% {
+    box-shadow: 10px 20px, -10px 35px, 0px 50px;
+  }
+  75% {
+    box-shadow: 0px 20px, 0px  35px, -10px 50px;
+  }
+  100% {
+    box-shadow: -10px 20px, 10px  35px, 0px 50px;
+  }
+}
+@-webkit-keyframes animloader66 {
+  0% {
+    width: 4.8px;
+  }
+  100% {
+    width: 48px;
+  }
+}
+@keyframes animloader66 {
+  0% {
+    width: 4.8px;
+  }
+  100% {
+    width: 48px;
+  }
+}
+@-webkit-keyframes animloader68 {
+  0% {
+    box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
+  }
+  20% {
+    box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
+  }
+  40% {
+    box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
+  }
+  60% {
+    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
+  }
+  80% {
+    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 white;
+  }
+}
+@keyframes animloader68 {
+  0% {
+    box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
+  }
+  20% {
+    box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
+  }
+  40% {
+    box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
+  }
+  60% {
+    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
+  }
+  80% {
+    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 white;
+  }
+}
+@-webkit-keyframes animloader69 {
+  0% {
+    width: 20px;
+  }
+  100% {
+    width: 48px;
+  }
+}
+@keyframes animloader69 {
+  0% {
+    width: 20px;
+  }
+  100% {
+    width: 48px;
+  }
+}
+@-webkit-keyframes animloader71 {
+  0% {
+    left: 0;
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+  100% {
+    left: 100%;
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+}
+@keyframes animloader71 {
+  0% {
+    left: 0;
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+  100% {
+    left: 100%;
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+}
+@-webkit-keyframes animloader89 {
+  0% {
+    box-shadow: 11px 0 rgba(255, 255, 255, 0), 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
+  }
+  25% {
+    box-shadow: 11px 0 white, 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow: 11px 0 white, 22px 0 white, 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
+  }
+  75% {
+    box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 white;
+  }
+}
+@keyframes animloader89 {
+  0% {
+    box-shadow: 11px 0 rgba(255, 255, 255, 0), 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
+  }
+  25% {
+    box-shadow: 11px 0 white, 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow: 11px 0 white, 22px 0 white, 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
+  }
+  75% {
+    box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 white;
+  }
+}
+@-webkit-keyframes animloader91 {
+  0% {
+    box-shadow: 0 0 inset;
+  }
+  100% {
+    box-shadow: 0 -70px inset;
+  }
+}
+@keyframes animloader91 {
+  0% {
+    box-shadow: 0 0 inset;
+  }
+  100% {
+    box-shadow: 0 -70px inset;
+  }
+}
+@-webkit-keyframes animloader92 {
+  0% {
+    box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
+  }
+  100% {
+    box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
+  }
+}
+@keyframes animloader92 {
+  0% {
+    box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
+  }
+  100% {
+    box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
+  }
+}
+@-webkit-keyframes animloader93 {
+  0% {
+    -webkit-transform: rotate(-70deg);
+            transform: rotate(-70deg);
+  }
+  10% {
+    -webkit-transform: rotate(-40deg);
+            transform: rotate(-40deg);
+  }
+  20% , 45% , 35% {
+    -webkit-transform: rotate(-10deg);
+            transform: rotate(-10deg);
+  }
+  40% , 30% {
+    -webkit-transform: rotate(-30deg);
+            transform: rotate(-30deg);
+  }
+  50% , 60% {
+    -webkit-transform: rotate(20deg);
+            transform: rotate(20deg);
+  }
+  55% , 65% , 75% {
+    -webkit-transform: rotate(40deg);
+            transform: rotate(40deg);
+  }
+  70% {
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+  }
+  85%, 90% {
+    -webkit-transform: rotate(50deg);
+            transform: rotate(50deg);
+  }
+  95% {
+    -webkit-transform: rotate(75deg);
+            transform: rotate(75deg);
+  }
+  100% , 93% {
+    -webkit-transform: rotate(70deg);
+            transform: rotate(70deg);
+  }
+}
+@keyframes animloader93 {
+  0% {
+    -webkit-transform: rotate(-70deg);
+            transform: rotate(-70deg);
+  }
+  10% {
+    -webkit-transform: rotate(-40deg);
+            transform: rotate(-40deg);
+  }
+  20% , 45% , 35% {
+    -webkit-transform: rotate(-10deg);
+            transform: rotate(-10deg);
+  }
+  40% , 30% {
+    -webkit-transform: rotate(-30deg);
+            transform: rotate(-30deg);
+  }
+  50% , 60% {
+    -webkit-transform: rotate(20deg);
+            transform: rotate(20deg);
+  }
+  55% , 65% , 75% {
+    -webkit-transform: rotate(40deg);
+            transform: rotate(40deg);
+  }
+  70% {
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+  }
+  85%, 90% {
+    -webkit-transform: rotate(50deg);
+            transform: rotate(50deg);
+  }
+  95% {
+    -webkit-transform: rotate(75deg);
+            transform: rotate(75deg);
+  }
+  100% , 93% {
+    -webkit-transform: rotate(70deg);
+            transform: rotate(70deg);
+  }
+}
+@-webkit-keyframes animloader94 {
+  0% {
+    -webkit-transform: translate(-10px, -10px);
+            transform: translate(-10px, -10px);
+  }
+  25% {
+    -webkit-transform: translate(-10px, 10px);
+            transform: translate(-10px, 10px);
+  }
+  50% {
+    -webkit-transform: translate(10px, 10px);
+            transform: translate(10px, 10px);
+  }
+  75% {
+    -webkit-transform: translate(10px, -10px);
+            transform: translate(10px, -10px);
+  }
+  100% {
+    -webkit-transform: translate(-10px, -10px);
+            transform: translate(-10px, -10px);
+  }
+}
+@keyframes animloader94 {
+  0% {
+    -webkit-transform: translate(-10px, -10px);
+            transform: translate(-10px, -10px);
+  }
+  25% {
+    -webkit-transform: translate(-10px, 10px);
+            transform: translate(-10px, 10px);
+  }
+  50% {
+    -webkit-transform: translate(10px, 10px);
+            transform: translate(10px, 10px);
+  }
+  75% {
+    -webkit-transform: translate(10px, -10px);
+            transform: translate(10px, -10px);
+  }
+  100% {
+    -webkit-transform: translate(-10px, -10px);
+            transform: translate(-10px, -10px);
+  }
+}
+@-webkit-keyframes animloader98 {
+  0% {
+    background-position: 0px 80px;
+  }
+  100% {
+    background-position: 0px 0px;
+  }
+}
+@keyframes animloader98 {
+  0% {
+    background-position: 0px 80px;
+  }
+  100% {
+    background-position: 0px 0px;
+  }
+}
+@-webkit-keyframes animloader98s {
+  0% {
+    box-shadow: 4px -10px rgba(255, 255, 255, 0), 6px 0px rgba(255, 255, 255, 0), 8px -15px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0);
+  }
+  20% {
+    box-shadow: 4px -20px rgba(255, 255, 255, 0), 8px -10px rgba(255, 255, 255, 0), 10px -30px rgba(255, 255, 255, 0.5), 15px -5px rgba(255, 255, 255, 0);
+  }
+  40% {
+    box-shadow: 2px -40px rgba(255, 255, 255, 0.5), 8px -30px rgba(255, 255, 255, 0.4), 8px -60px rgba(255, 255, 255, 0.5), 12px -15px rgba(255, 255, 255, 0.5);
+  }
+  60% {
+    box-shadow: 4px -60px rgba(255, 255, 255, 0.5), 6px -50px rgba(255, 255, 255, 0.4), 10px -90px rgba(255, 255, 255, 0.5), 15px -25px rgba(255, 255, 255, 0.5);
+  }
+  80% {
+    box-shadow: 2px -80px rgba(255, 255, 255, 0.5), 4px -70px rgba(255, 255, 255, 0.4), 8px -120px rgba(255, 255, 255, 0), 12px -35px rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    box-shadow: 4px -100px rgba(255, 255, 255, 0), 8px -90px rgba(255, 255, 255, 0), 10px -120px rgba(255, 255, 255, 0), 15px -45px rgba(255, 255, 255, 0);
+  }
+}
+@keyframes animloader98s {
+  0% {
+    box-shadow: 4px -10px rgba(255, 255, 255, 0), 6px 0px rgba(255, 255, 255, 0), 8px -15px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0);
+  }
+  20% {
+    box-shadow: 4px -20px rgba(255, 255, 255, 0), 8px -10px rgba(255, 255, 255, 0), 10px -30px rgba(255, 255, 255, 0.5), 15px -5px rgba(255, 255, 255, 0);
+  }
+  40% {
+    box-shadow: 2px -40px rgba(255, 255, 255, 0.5), 8px -30px rgba(255, 255, 255, 0.4), 8px -60px rgba(255, 255, 255, 0.5), 12px -15px rgba(255, 255, 255, 0.5);
+  }
+  60% {
+    box-shadow: 4px -60px rgba(255, 255, 255, 0.5), 6px -50px rgba(255, 255, 255, 0.4), 10px -90px rgba(255, 255, 255, 0.5), 15px -25px rgba(255, 255, 255, 0.5);
+  }
+  80% {
+    box-shadow: 2px -80px rgba(255, 255, 255, 0.5), 4px -70px rgba(255, 255, 255, 0.4), 8px -120px rgba(255, 255, 255, 0), 12px -35px rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    box-shadow: 4px -100px rgba(255, 255, 255, 0), 8px -90px rgba(255, 255, 255, 0), 10px -120px rgba(255, 255, 255, 0), 15px -45px rgba(255, 255, 255, 0);
+  }
+}
+@-webkit-keyframes animloader99 {
+  0% {
+    box-shadow: 0px 0px  inset;
+  }
+  100% {
+    box-shadow: 0px -80px  inset;
+  }
+}
+@keyframes animloader99 {
+  0% {
+    box-shadow: 0px 0px  inset;
+  }
+  100% {
+    box-shadow: 0px -80px  inset;
+  }
+}
+@-webkit-keyframes animloader100 {
+  0% {
+    box-shadow: 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white, 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white;
+  }
+  50% {
+    box-shadow: 25px 20px white, 50px 60px rgba(255, 255, 255, 0), 75px 30px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 40px white, 150px 60px rgba(255, 255, 255, 0), 25px 20px white, 50px 30px white, 75px 10px white, 100px 30px white, 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 25px 60px rgba(255, 255, 255, 0), 50px 60px rgba(255, 255, 255, 0), 75px 50px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 70px rgba(255, 255, 255, 0), 150px 60px rgba(255, 255, 255, 0), 25px 80px rgba(255, 255, 255, 0), 50px 80px rgba(255, 255, 255, 0), 75px 70px rgba(255, 255, 255, 0), 100px 60px rgba(255, 255, 255, 0), 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
+  }
+}
+@keyframes animloader100 {
+  0% {
+    box-shadow: 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white, 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white;
+  }
+  50% {
+    box-shadow: 25px 20px white, 50px 60px rgba(255, 255, 255, 0), 75px 30px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 40px white, 150px 60px rgba(255, 255, 255, 0), 25px 20px white, 50px 30px white, 75px 10px white, 100px 30px white, 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 25px 60px rgba(255, 255, 255, 0), 50px 60px rgba(255, 255, 255, 0), 75px 50px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 70px rgba(255, 255, 255, 0), 150px 60px rgba(255, 255, 255, 0), 25px 80px rgba(255, 255, 255, 0), 50px 80px rgba(255, 255, 255, 0), 75px 70px rgba(255, 255, 255, 0), 100px 60px rgba(255, 255, 255, 0), 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
+  }
+}
+@-webkit-keyframes animloader105 {
+  0% {
+    height: 64px;
+  }
+  90%, 100% {
+    height: 0px;
+  }
+}
+@keyframes animloader105 {
+  0% {
+    height: 64px;
+  }
+  90%, 100% {
+    height: 0px;
+  }
+}
+@-webkit-keyframes animloader106back {
+  0% , 30%, 70% {
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
+  }
+  20%, 40%,  100% {
+    -webkit-transform: translateY(-5px);
+            transform: translateY(-5px);
+  }
+}
+@keyframes animloader106back {
+  0% , 30%, 70% {
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
+  }
+  20%, 40%,  100% {
+    -webkit-transform: translateY(-5px);
+            transform: translateY(-5px);
+  }
+}
+@-webkit-keyframes animloader106 {
+  0% {
+    box-shadow: 4px 4px 12px 2px rgba(255, 61, 0, 0.75);
+    width: 34px;
+    height: 34px;
+    background-position: -44px -44px;
+    background-size: 100px 100px;
+  }
+  100% {
+    box-shadow: 2px 2px 8px 0px rgba(255, 61, 0, 0.5);
+    width: 30px;
+    height: 28px;
+    background-position: -36px -36px;
+    background-size: 80px 80px;
+  }
+}
+@keyframes animloader106 {
+  0% {
+    box-shadow: 4px 4px 12px 2px rgba(255, 61, 0, 0.75);
+    width: 34px;
+    height: 34px;
+    background-position: -44px -44px;
+    background-size: 100px 100px;
+  }
+  100% {
+    box-shadow: 2px 2px 8px 0px rgba(255, 61, 0, 0.5);
+    width: 30px;
+    height: 28px;
+    background-position: -36px -36px;
+    background-size: 80px 80px;
+  }
+}
+@-webkit-keyframes animloader108 {
+  0% {
+    box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px;
+  }
+  20% {
+    box-shadow: 40px -1px 0 -2px , 0 0 0 -2px , 40px -1px 0 -5px , 0 0 0 -5px;
+  }
+  40% {
+    box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px ,  40px -1px 0 -5px ,-40px -1px 0 -5px;
+  }
+  60% {
+    box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px ,   23px -29px 0 -5px ,-40px -1px 0 -5px;
+  }
+  80% , 95% {
+    box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px ,   23px -29px 0 -5px , -23px -29px 0 -5px;
+  }
+  100% {
+    box-shadow: 40px -1px 0 -2px rgba(255, 255, 255, 0), -40px -1px 0 -2px rgba(255, 255, 255, 0), 23px -29px 0 -5px rgba(255, 255, 255, 0), -23px -29px 0 -5px rgba(255, 255, 255, 0);
+  }
+}
+@keyframes animloader108 {
+  0% {
+    box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px;
+  }
+  20% {
+    box-shadow: 40px -1px 0 -2px , 0 0 0 -2px , 40px -1px 0 -5px , 0 0 0 -5px;
+  }
+  40% {
+    box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px ,  40px -1px 0 -5px ,-40px -1px 0 -5px;
+  }
+  60% {
+    box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px ,   23px -29px 0 -5px ,-40px -1px 0 -5px;
+  }
+  80% , 95% {
+    box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px ,   23px -29px 0 -5px , -23px -29px 0 -5px;
+  }
+  100% {
+    box-shadow: 40px -1px 0 -2px rgba(255, 255, 255, 0), -40px -1px 0 -2px rgba(255, 255, 255, 0), 23px -29px 0 -5px rgba(255, 255, 255, 0), -23px -29px 0 -5px rgba(255, 255, 255, 0);
+  }
+}
+@-webkit-keyframes animloader108s {
+  0% {
+    box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px;
+  }
+  20% {
+    box-shadow: 40px 2px 0 -2px, 0 0 0 -2px, 40px 2px 0 -5px, 0 0 0 -5px;
+  }
+  40% {
+    box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 40px 2px 0 -5px, -40px 2px 0 -5px;
+  }
+  60% {
+    box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 23px -23px 0 -5px, -40px 2px 0 -5px;
+  }
+  80%, 95% {
+    box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 23px -23px 0 -5px, -23px -23px 0 -5px;
+  }
+  100% {
+    box-shadow: 40px 2px 0 -2px rgba(255, 255, 255, 0), -40px 2px 0 -2px rgba(255, 255, 255, 0), 23px -23px 0 -5px rgba(255, 255, 255, 0), -23px -23px 0 -5px rgba(255, 255, 255, 0);
+  }
+}
+@keyframes animloader108s {
+  0% {
+    box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px;
+  }
+  20% {
+    box-shadow: 40px 2px 0 -2px, 0 0 0 -2px, 40px 2px 0 -5px, 0 0 0 -5px;
+  }
+  40% {
+    box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 40px 2px 0 -5px, -40px 2px 0 -5px;
+  }
+  60% {
+    box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 23px -23px 0 -5px, -40px 2px 0 -5px;
+  }
+  80%, 95% {
+    box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 23px -23px 0 -5px, -23px -23px 0 -5px;
+  }
+  100% {
+    box-shadow: 40px 2px 0 -2px rgba(255, 255, 255, 0), -40px 2px 0 -2px rgba(255, 255, 255, 0), 23px -23px 0 -5px rgba(255, 255, 255, 0), -23px -23px 0 -5px rgba(255, 255, 255, 0);
+  }
+}
+@-webkit-keyframes animloader115 {
+  0% {
+    box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow: 10px 0 white, 20px 0 rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 10px 0 white, 20px 0 white;
+  }
+}
+@keyframes animloader115 {
+  0% {
+    box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow: 10px 0 white, 20px 0 rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 10px 0 white, 20px 0 white;
+  }
+}
+@-webkit-keyframes animloader116 {
+  0% {
+    top: 8px;
+    -webkit-transform: rotate(0deg) scale(1);
+            transform: rotate(0deg) scale(1);
+  }
+  100% {
+    top: 0px;
+    -webkit-transform: rotate(180deg) scale(1.5);
+            transform: rotate(180deg) scale(1.5);
+  }
+}
+@keyframes animloader116 {
+  0% {
+    top: 8px;
+    -webkit-transform: rotate(0deg) scale(1);
+            transform: rotate(0deg) scale(1);
+  }
+  100% {
+    top: 0px;
+    -webkit-transform: rotate(180deg) scale(1.5);
+            transform: rotate(180deg) scale(1.5);
+  }
+}
+@-webkit-keyframes animloader117 {
+  0% {
+    box-shadow: 0 0 inset;
+  }
+  100% {
+    box-shadow: 0 -28px inset;
+  }
+}
+@keyframes animloader117 {
+  0% {
+    box-shadow: 0 0 inset;
+  }
+  100% {
+    box-shadow: 0 -28px inset;
+  }
+}
+@-webkit-keyframes animMarker {
+  0% {
+    -webkit-transform: rotate(45deg) translate(5px, 5px);
+            transform: rotate(45deg) translate(5px, 5px);
+  }
+  100% {
+    -webkit-transform: rotate(45deg) translate(-5px, -5px);
+            transform: rotate(45deg) translate(-5px, -5px);
+  }
+}
+@keyframes animMarker {
+  0% {
+    -webkit-transform: rotate(45deg) translate(5px, 5px);
+            transform: rotate(45deg) translate(5px, 5px);
+  }
+  100% {
+    -webkit-transform: rotate(45deg) translate(-5px, -5px);
+            transform: rotate(45deg) translate(-5px, -5px);
+  }
+}
+@-webkit-keyframes animShadow {
+  0% {
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes animShadow {
+  0% {
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@-webkit-keyframes bump {
+  0% {
+    -webkit-transform: translate(-50%, 5px);
+            transform: translate(-50%, 5px);
+  }
+  100% {
+    -webkit-transform: translate(-50%, -5px);
+            transform: translate(-50%, -5px);
+  }
+}
+@keyframes bump {
+  0% {
+    -webkit-transform: translate(-50%, 5px);
+            transform: translate(-50%, 5px);
+  }
+  100% {
+    -webkit-transform: translate(-50%, -5px);
+            transform: translate(-50%, -5px);
+  }
+}
+@-webkit-keyframes animPend {
+  0% {
+    -webkit-transform: rotate(22deg);
+            transform: rotate(22deg);
+  }
+  50% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+}
+@keyframes animPend {
+  0% {
+    -webkit-transform: rotate(22deg);
+            transform: rotate(22deg);
+  }
+  50% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+}
+@-webkit-keyframes animPend2 {
+  0% , 55% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(-22deg);
+            transform: rotate(-22deg);
+  }
+}
+@keyframes animPend2 {
+  0% , 55% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(-22deg);
+            transform: rotate(-22deg);
+  }
+}
+@-webkit-keyframes animloader85 {
+  0% , 100% {
+    -webkit-transform: translateX(-150%);
+            transform: translateX(-150%);
+  }
+  50% {
+    -webkit-transform: translateX(150%);
+            transform: translateX(150%);
+  }
+}
+@keyframes animloader85 {
+  0% , 100% {
+    -webkit-transform: translateX(-150%);
+            transform: translateX(-150%);
+  }
+  50% {
+    -webkit-transform: translateX(150%);
+            transform: translateX(150%);
+  }
+}
+@-webkit-keyframes barStripe {
+  0% {
+    background-position: 1em 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+@keyframes barStripe {
+  0% {
+    background-position: 1em 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+@-webkit-keyframes raceBoard {
+  0% {
+    background-position: 0 0, 16px 16px;
+  }
+  100% {
+    background-position: 32px 0px, 48px 16px;
+  }
+}
+@keyframes raceBoard {
+  0% {
+    background-position: 0 0, 16px 16px;
+  }
+  100% {
+    background-position: 32px 0px, 48px 16px;
+  }
+}
+@-webkit-keyframes fadePush {
+  0% {
+    -webkit-transform: translate(-50%, -15px);
+            transform: translate(-50%, -15px);
+    opacity: 0;
+  }
+  50% {
+    -webkit-transform: translate(-50%, 0px);
+            transform: translate(-50%, 0px);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translate(-50%, 15px);
+            transform: translate(-50%, 15px);
+    opacity: 0;
+  }
+}
+@keyframes fadePush {
+  0% {
+    -webkit-transform: translate(-50%, -15px);
+            transform: translate(-50%, -15px);
+    opacity: 0;
+  }
+  50% {
+    -webkit-transform: translate(-50%, 0px);
+            transform: translate(-50%, 0px);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translate(-50%, 15px);
+            transform: translate(-50%, 15px);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes fadePull {
+  0% {
+    -webkit-transform: translate(-50%, 15px);
+            transform: translate(-50%, 15px);
+    opacity: 0;
+  }
+  50% {
+    -webkit-transform: translate(-50%, 0px);
+            transform: translate(-50%, 0px);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translate(-50%, -15px);
+            transform: translate(-50%, -15px);
+    opacity: 0;
+  }
+}
+@keyframes fadePull {
+  0% {
+    -webkit-transform: translate(-50%, 15px);
+            transform: translate(-50%, 15px);
+    opacity: 0;
+  }
+  50% {
+    -webkit-transform: translate(-50%, 0px);
+            transform: translate(-50%, 0px);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translate(-50%, -15px);
+            transform: translate(-50%, -15px);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes hitZak {
+  0% {
+    left: 0;
+    -webkit-transform: translateX(-1%);
+            transform: translateX(-1%);
+  }
+  100% {
+    left: 100%;
+    -webkit-transform: translateX(-99%);
+            transform: translateX(-99%);
+  }
+}
+@keyframes hitZak {
+  0% {
+    left: 0;
+    -webkit-transform: translateX(-1%);
+            transform: translateX(-1%);
+  }
+  100% {
+    left: 100%;
+    -webkit-transform: translateX(-99%);
+            transform: translateX(-99%);
+  }
+}
+@-webkit-keyframes animFw {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes animFw {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-webkit-keyframes coli1 {
+  0% {
+    -webkit-transform: rotate(-45deg) translateX(0px);
+            transform: rotate(-45deg) translateX(0px);
+    opacity: 0.7;
+  }
+  100% {
+    -webkit-transform: rotate(-45deg) translateX(-45px);
+            transform: rotate(-45deg) translateX(-45px);
+    opacity: 0;
+  }
+}
+@keyframes coli1 {
+  0% {
+    -webkit-transform: rotate(-45deg) translateX(0px);
+            transform: rotate(-45deg) translateX(0px);
+    opacity: 0.7;
+  }
+  100% {
+    -webkit-transform: rotate(-45deg) translateX(-45px);
+            transform: rotate(-45deg) translateX(-45px);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes coli2 {
+  0% {
+    -webkit-transform: rotate(45deg) translateX(0px);
+            transform: rotate(45deg) translateX(0px);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: rotate(45deg) translateX(-45px);
+            transform: rotate(45deg) translateX(-45px);
+    opacity: 0.7;
+  }
+}
+@keyframes coli2 {
+  0% {
+    -webkit-transform: rotate(45deg) translateX(0px);
+            transform: rotate(45deg) translateX(0px);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: rotate(45deg) translateX(-45px);
+            transform: rotate(45deg) translateX(-45px);
+    opacity: 0.7;
+  }
+}
+@-webkit-keyframes animloader121 {
+  0% {
+    background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
+  }
+  100% {
+    background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
+  }
+}
+@keyframes animloader121 {
+  0% {
+    background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
+  }
+  100% {
+    background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
+  }
+}
+@-webkit-keyframes animloader123 {
+  0% {
+    background-position: 0% 0, 120px 0, 120px 40px, 120px 80px;
+  }
+  100% {
+    background-position: 100% 0, 120px 0, 120px 40px, 120px 80px;
+  }
+}
+@keyframes animloader123 {
+  0% {
+    background-position: 0% 0, 120px 0, 120px 40px, 120px 80px;
+  }
+  100% {
+    background-position: 100% 0, 120px 0, 120px 40px, 120px 80px;
+  }
+}
+@-webkit-keyframes animloader124 {
+  0% {
+    background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
+  }
+  100% {
+    background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
+  }
+}
+@keyframes animloader124 {
+  0% {
+    background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
+  }
+  100% {
+    background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
+  }
+}
+@-webkit-keyframes animloader126 {
+  0% {
+    background-position: 0 0, 0 0, 0px 85px, 0px 110px;
+  }
+  100% {
+    background-position: 150% 0, 0 0, 0px 85px, 0px 110px;
+  }
+}
+@keyframes animloader126 {
+  0% {
+    background-position: 0 0, 0 0, 0px 85px, 0px 110px;
+  }
+  100% {
+    background-position: 150% 0, 0 0, 0px 85px, 0px 110px;
+  }
+}
+@-webkit-keyframes floating {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+  100% {
+    -webkit-transform: translateY(-25px);
+            transform: translateY(-25px);
+  }
+}
+@keyframes floating {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+  100% {
+    -webkit-transform: translateY(-25px);
+            transform: translateY(-25px);
+  }
+}
+@-webkit-keyframes animloader110 {
+  0% {
+    height: 100%;
+  }
+  100% {
+    height: 0%;
+  }
+}
+@keyframes animloader110 {
+  0% {
+    height: 100%;
+  }
+  100% {
+    height: 0%;
+  }
+}
+@-webkit-keyframes animloader111 {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes animloader111 {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-webkit-keyframes animloader113 {
+  0% {
+    -webkit-transform: translate(0px, 0px) scaleX(1);
+            transform: translate(0px, 0px) scaleX(1);
+  }
+  14% {
+    -webkit-transform: translate(-12px, -16px) scaleX(1.05);
+            transform: translate(-12px, -16px) scaleX(1.05);
+  }
+  28% {
+    -webkit-transform: translate(-27px, -28px) scaleX(1.07);
+            transform: translate(-27px, -28px) scaleX(1.07);
+  }
+  42% {
+    -webkit-transform: translate(-46px, -35px) scaleX(1.1);
+            transform: translate(-46px, -35px) scaleX(1.1);
+  }
+  57% {
+    -webkit-transform: translate(-70px, -37px) scaleX(1.1);
+            transform: translate(-70px, -37px) scaleX(1.1);
+  }
+  71% {
+    -webkit-transform: translate(-94px, -32px) scaleX(1.07);
+            transform: translate(-94px, -32px) scaleX(1.07);
+  }
+  85% {
+    -webkit-transform: translate(-111px, -22px) scaleX(1.05);
+            transform: translate(-111px, -22px) scaleX(1.05);
+  }
+  100% {
+    -webkit-transform: translate(-125px, -9px) scaleX(1);
+            transform: translate(-125px, -9px) scaleX(1);
+  }
+}
+@keyframes animloader113 {
+  0% {
+    -webkit-transform: translate(0px, 0px) scaleX(1);
+            transform: translate(0px, 0px) scaleX(1);
+  }
+  14% {
+    -webkit-transform: translate(-12px, -16px) scaleX(1.05);
+            transform: translate(-12px, -16px) scaleX(1.05);
+  }
+  28% {
+    -webkit-transform: translate(-27px, -28px) scaleX(1.07);
+            transform: translate(-27px, -28px) scaleX(1.07);
+  }
+  42% {
+    -webkit-transform: translate(-46px, -35px) scaleX(1.1);
+            transform: translate(-46px, -35px) scaleX(1.1);
+  }
+  57% {
+    -webkit-transform: translate(-70px, -37px) scaleX(1.1);
+            transform: translate(-70px, -37px) scaleX(1.1);
+  }
+  71% {
+    -webkit-transform: translate(-94px, -32px) scaleX(1.07);
+            transform: translate(-94px, -32px) scaleX(1.07);
+  }
+  85% {
+    -webkit-transform: translate(-111px, -22px) scaleX(1.05);
+            transform: translate(-111px, -22px) scaleX(1.05);
+  }
+  100% {
+    -webkit-transform: translate(-125px, -9px) scaleX(1);
+            transform: translate(-125px, -9px) scaleX(1);
+  }
+}
+@-webkit-keyframes animloader113L {
+  0% {
+    box-shadow: 0 -6px, -122.9px -8px;
+  }
+  25%, 75% {
+    box-shadow: 0 0px, -122.9px -8px;
+  }
+  100% {
+    box-shadow: 0 0px, -122.9px -16px;
+  }
+}
+@keyframes animloader113L {
+  0% {
+    box-shadow: 0 -6px, -122.9px -8px;
+  }
+  25%, 75% {
+    box-shadow: 0 0px, -122.9px -8px;
+  }
+  100% {
+    box-shadow: 0 0px, -122.9px -16px;
+  }
+}
+@-webkit-keyframes animloader114 {
+  0% {
+    -webkit-transform: translateY(8px) scaleY(1) scaleX(1.25);
+            transform: translateY(8px) scaleY(1) scaleX(1.25);
+  }
+  25%, 75% {
+    -webkit-transform: translateY(-5px) scaleY(1.2) scaleX(1);
+            transform: translateY(-5px) scaleY(1.2) scaleX(1);
+  }
+  50% {
+    -webkit-transform: translateY(-10px) scaleY(1) scaleX(1);
+            transform: translateY(-10px) scaleY(1) scaleX(1);
+  }
+  100% {
+    -webkit-transform: translateY(8px) scaleY(0.8) scaleX(0.8);
+            transform: translateY(8px) scaleY(0.8) scaleX(0.8);
+  }
+}
+@keyframes animloader114 {
+  0% {
+    -webkit-transform: translateY(8px) scaleY(1) scaleX(1.25);
+            transform: translateY(8px) scaleY(1) scaleX(1.25);
+  }
+  25%, 75% {
+    -webkit-transform: translateY(-5px) scaleY(1.2) scaleX(1);
+            transform: translateY(-5px) scaleY(1.2) scaleX(1);
+  }
+  50% {
+    -webkit-transform: translateY(-10px) scaleY(1) scaleX(1);
+            transform: translateY(-10px) scaleY(1) scaleX(1);
+  }
+  100% {
+    -webkit-transform: translateY(8px) scaleY(0.8) scaleX(0.8);
+            transform: translateY(8px) scaleY(0.8) scaleX(0.8);
+  }
+}
+@-webkit-keyframes animloader118 {
+  0% {
+    -webkit-transform: scale(0.8);
+            transform: scale(0.8);
+  }
+  100% {
+    -webkit-transform: scale(1.2);
+            transform: scale(1.2);
+  }
+}
+@keyframes animloader118 {
+  0% {
+    -webkit-transform: scale(0.8);
+            transform: scale(0.8);
+  }
+  100% {
+    -webkit-transform: scale(1.2);
+            transform: scale(1.2);
+  }
+}
+@-webkit-keyframes animloader119 {
+  0% {
+    -webkit-filter: blur(0px);
+            filter: blur(0px);
+    -webkit-transform: skew(0deg);
+            transform: skew(0deg);
+  }
+  100% {
+    -webkit-filter: blur(3px);
+            filter: blur(3px);
+    -webkit-transform: skew(-4deg);
+            transform: skew(-4deg);
+  }
+}
+@keyframes animloader119 {
+  0% {
+    -webkit-filter: blur(0px);
+            filter: blur(0px);
+    -webkit-transform: skew(0deg);
+            transform: skew(0deg);
+  }
+  100% {
+    -webkit-filter: blur(3px);
+            filter: blur(3px);
+    -webkit-transform: skew(-4deg);
+            transform: skew(-4deg);
+  }
+}
\ No newline at end of file
diff --git a/css3-loader-spinners/license.txt b/css3-loader-spinners/license.txt
new file mode 100644
index 0000000..a3470f4
--- /dev/null
+++ b/css3-loader-spinners/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Vineeth.TR (https://codepen.io/vineethtrv/pen/NWxZqMM)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/css3-loader-spinners/src/index.pug b/css3-loader-spinners/src/index.pug
new file mode 100644
index 0000000..70a51f7
--- /dev/null
+++ b/css3-loader-spinners/src/index.pug
@@ -0,0 +1,36 @@
+header
+  a.brand(href="https://vineethtrv.github.io/loader/") L &nbsp; ader
+  a.nav-btn(href="https://vineethtrv.github.io/loader/") Github Page
+
+- for(var i = 1; i < 109; i++)
+    section
+      span(class='loader-' + i) 
+      
+section
+  span(class="loader-109") Loading       
+section
+  span(class="loader-110") Loading      
+section
+  span(class="loader-111") Loading      
+section
+  span(class="loader-112") L &nbsp; ading      
+section
+  span(class="loader-113") Load&nbsp;ng      
+section
+  span(class="loader-114") Load&nbsp;ng      
+section
+  span(class="loader-115") Loading      
+section
+  span(class="loader-116") Load&nbsp;ng      
+section
+  span(class="loader-117") Load&nbsp;ng      
+section
+  span(class="loader-118")      
+section
+  span(class="loader-119") Loading      
+section
+  span(class="loader-120") Loading
+  
+- for(var i = 121; i < 127; i++)
+    section
+      span(class='loader-' + i) 
\ No newline at end of file
diff --git a/css3-loader-spinners/src/style.scss b/css3-loader-spinners/src/style.scss
new file mode 100644
index 0000000..1cc50bc
--- /dev/null
+++ b/css3-loader-spinners/src/style.scss
@@ -0,0 +1,3566 @@
+$base: #263238;
+$lite:  #FFF;
+$brand: #FF3D00;
+$size: 48px;
+
+*, *:after, *:before {
+      box-sizing: border-box;
+    }
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: $base; 
+}
+ 
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: $brand; 
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #fff; 
+}
+    body {
+      margin: 0;
+      padding-top: 50px;
+      display: flex;
+      flex-wrap: wrap;
+      background: $base;
+      font-family: Arial, Helvetica, sans-serif;
+      &.pop {
+        overflow: hidden;
+      }
+    }
+    section {
+      min-width: 200px;
+      width: 33.33%;
+      height: 200px;
+      padding: 10px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #ccc;
+      cursor: pointer;
+      transition: 0.3s linear;
+      &:nth-child(2n + 1){
+        background: rgba(#000,0.1);
+      }
+      &:hover {
+          background: rgba(#000,0.3) ;
+      }
+
+      @media (max-width: 768px ) {
+         width: 50%;
+      }
+      @media (max-width: 480px) {
+        width: 100%;
+      }
+
+    }
+
+header {
+  background : #0d161b;
+  padding:10px 20px;
+  min-height: 50px;
+  position: fixed;
+  top:0;
+  left:0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  z-index: 2000;
+  justify-content: space-between;
+}
+
+.brand {
+  color: #fff;
+  font-size: 32px;
+  display: inline-block;
+  position: relative;
+  text-decoration:none;
+  &::after{
+    content: '';
+    position: absolute;
+    left: 20px;
+    bottom: 5px;
+    border: 3px solid $lite;
+    border-bottom-color: $brand;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    animation: rotation 0.6s linear infinite;
+  }
+}
+.nav-btn{
+  color: #fff;
+  text-decoration:none;
+}
+// Loaders
+
+.loader-1 {
+    width : $size;
+    height: $size;
+    border: 5px solid $lite;
+    border-bottom-color: $brand;
+    border-radius: 50%;
+    display: inline-block;
+    animation: rotation 1s linear infinite;
+  }
+  
+  .loader-2{
+    width : $size;
+    height: $size;
+    border: 3px solid $lite;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50% , -50%);
+      width:  $size - 8px;
+      height:  $size - 8px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-bottom-color: $brand;
+    }
+  }
+
+
+
+  .loader-3{
+    width : $size;
+    height: $size;
+    border: 3px solid $lite;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50% , -50%);
+      width:  $size + 8px;
+      height:  $size + 8px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-bottom-color: $brand;
+    }
+  }
+  .loader-4{
+    width : $size;
+    height: $size;
+    border: 3px solid $lite;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50% , -50%);
+      width:  $size - 8px;
+      height:  $size - 8px;
+      border-radius: 50%;
+      border: 3px solid ;
+      border-color: $brand transparent;
+    }
+  }
+  
+  .loader-5{
+    width : $size;
+    height: $size;
+    border: 3px solid $lite;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50% , -50%);
+      width:  $size + 8px;
+      height:  $size + 8px;
+      border-radius: 50%;
+      border: 3px solid ;
+      border-color: $brand transparent;
+    }
+  }
+  
+
+ .loader-6 {
+    width : $size;
+    height: $size;
+    border: 2px solid $lite;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s linear infinite;
+    &:after, &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: $brand;
+      width:  $size/8;
+      height:  $size/8;
+      transform: translate(150%, 150%);
+      border-radius: 50%;
+    }
+    &:before {
+      left: auto;
+      top: auto;
+      right: 0;
+      bottom: 0;
+      transform: translate(-150%, -150%);
+    }
+  }
+  
+
+  .loader-7{
+    width : $size;
+    height: $size;
+    border: 2px solid $lite;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s linear infinite;
+    &:after, &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: $brand;
+      width:  $size/8;
+      height:  $size/8;
+      border-radius: 50%;
+    }
+    &:before {
+      left: auto;
+      top: auto;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  
+  .loader-8 {
+    width : $size;
+    height: $size;
+    border: 3px solid $lite;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: $brand;
+      width:  $size/3;
+      height:  $size/3;
+      transform: translate(-50%, 50%);
+      border-radius: 50%;
+    }
+  }
+  
+  
+  .loader-9 {
+    width : $size;
+    height: $size;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    border: 2px solid $brand;
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 4px;
+      top: 4px;
+      border: 2px solid $lite;
+      width:  $size/4;
+      height:  $size/4;
+      border-radius: 50%;
+    }
+  }
+
+
+  
+  .loader-10 {
+    width : $size;
+    height: $size;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    border: 3px solid;
+    border-color: $lite  $lite transparent;
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      border: 3px solid;
+      border-color: transparent $brand $brand;
+      width:  $size/2;
+      height:  $size/2;
+      border-radius: 50%;
+      animation: rotationBack 0.5s linear infinite;
+      transform-origin: center center;
+    }
+  }
+  
+  .loader-11 {
+    width : $size;
+    height: $size;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    border: 3px solid;
+    border-color: $lite $lite transparent transparent;
+    animation: rotation 1s linear infinite;
+    &:after , &:before{
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      border: 3px solid;
+      border-color: transparent transparent $brand $brand;
+      width:  $size - 8px;
+      height:  $size - 8px;
+      border-radius: 50%;
+      animation: rotationBack 0.5s linear infinite;
+      transform-origin: center center;
+    }
+    &:before{
+      width:  $size - 16px;
+      height:  $size - 16px;
+      border-color:$lite $lite transparent transparent;
+       animation: rotation 1.5s linear infinite;
+    }
+  }
+  
+  
+  .loader-12 {
+    width : $size;
+    height: $size;
+    border: 3px dotted $lite;
+    border-style: solid solid dotted dotted;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 2s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      border: 3px dotted $brand;
+      border-style: solid solid dotted;
+      width:  $size/2;
+      height:  $size/2;
+      border-radius: 50%;
+      animation: rotationBack 1s linear infinite;
+      transform-origin: center center;
+    }
+  }
+  
+  .loader-13 {
+    width : $size;
+    height: $size;
+    border: 2px solid $lite;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 0;
+      background: $brand;
+      width:  3px;
+      height:  $size/2;
+     transform: translateX(-50%);
+    }
+  }
+
+
+.loader-14 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    &::after , &::before {
+      content: '';
+      width : $size;
+      height: $size;
+      border-radius: 50%;
+      border:2px solid $lite;
+      position: absolute;
+      left:0;
+      top: 0;
+      animation: animloader14 2s linear infinite;
+    }
+    &::after {
+      animation-delay: 1s;
+    }
+  }
+  
+  .loader-15 {
+    width : $size;
+    height: $size;
+    border: 5px dotted $lite;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 2s linear infinite;
+  }
+
+
+
+  
+  .loader-16{
+    width : $size;
+    height: $size;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    background: linear-gradient(0deg, rgba($brand,0.2) 33%, rgba($brand,1) 100%);
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50% , -50%);
+      width : $size - 4px;
+      height: $size - 4px;
+      border-radius: 50%;
+      background: $base
+    }
+  }
+
+
+  .loader-17{
+    width : $size;
+    height: $size;
+    border-radius: 50%;
+    display: inline-block;
+    border-top:3px solid $lite;
+    border-right:3px solid transparent;
+    animation: rotation 1s linear infinite;
+  }
+
+
+
+  .loader-18{
+    width : $size;
+    height: $size;
+    border-radius: 50%;
+    display: inline-block;
+    border-top:4px solid $lite;
+    border-right:4px solid transparent;
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width : $size;
+      height: $size;
+      border-radius: 50%;
+      border-bottom:4px solid $brand;
+      border-left:4px solid transparent;
+    }
+  }
+
+  .loader-19{
+    width : $size;
+    height: $size;
+    border-radius: 50%;
+    display: inline-block;
+    border-top:4px solid $lite;
+    border-right:4px solid transparent;
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width : $size;
+      height: $size;
+      border-radius: 50%;
+      border-left:4px solid $brand;
+      border-bottom:4px solid transparent;
+      animation: rotation 0.5s linear infinite reverse;
+    }
+  }
+
+  .loader-20 {
+    width : $size;
+    height: $size;
+    border: 5px solid;
+    border-color: $brand transparent;
+    border-radius: 50%;
+    display: inline-block;
+    animation: rotation 1s linear infinite;
+  }
+
+    .loader-21 {
+    width : $size;
+    height: $size;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    border: 10px solid ;
+    border-color: rgba($lite, 0.15)  rgba($lite, 0.25)  rgba($lite, 0.35)  rgba($lite, 0.5);
+    animation: rotation 1s linear infinite;
+  }
+
+  .loader-22 {
+    width : $size;
+    height: $size;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    border: 10px solid ;
+    animation: animloader51 1s linear infinite alternate;
+  }
+
+  
+  .loader-23 {
+    width : $size;
+    height: $size;
+    border: 3px solid $lite;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 20px;
+      top: 31px;
+      border: 10px solid transparent;
+      border-right-color: $lite;
+      transform: rotate(-40deg);
+    }
+  }
+  
+  .loader-24 {
+    width : $size;
+    height: $size;
+    border-width: 3px;
+    border-style: dashed solid  solid dotted;
+    border-color: $brand $brand transparent $brand;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 20px;
+      top: 31px;
+      border: 10px solid transparent;
+      border-right-color: $brand;
+      transform: rotate(-40deg);
+    }
+  }
+
+  .loader-25 {
+    width : $size;
+    height: $size;
+    background: $lite;
+    display: inline-block;
+    border-radius: 50%;
+    animation: animloader14 1s ease-in infinite;
+  }
+
+  .loader-26 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    &::after , &::before {
+      content: '';
+      width : $size;
+      height: $size;
+      border-radius: 50%;
+      background: $lite;
+      position: absolute;
+      left:0;
+      top: 0;
+      animation: animloader14 2s linear infinite;
+    }
+    &::after {
+      animation-delay: 1s;
+    }
+  }
+
+  .loader-27 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    &::after , &::before {
+      content: '';
+      width : $size;
+      height: $size;
+      border-radius: 50%;
+      background: $lite;
+      position: absolute;
+      left:0;
+      top: 0;
+      animation: animloader27 2s ease-in-out infinite;
+    }
+    &::after {
+      animation-delay: 1s;
+    }
+  }
+  .loader-28 {
+    width : $size;
+    height: $size;
+    border-radius: 50%;
+    display: inline-block;
+    animation: animloader28 1s linear infinite;
+  }
+
+.loader-29 {
+    border:$size/2 solid $lite;
+    border-bottom-color: $brand;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s linear infinite;
+  }
+
+.loader-30 {
+    border:2px solid $lite;
+    width : $size;
+    height: $size;
+    background: $brand;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 2s linear infinite;
+     &:after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      border: $size/2 solid;
+      border-color: transparent $lite;
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+
+.loader-31 {
+    width : $size;
+    height: $size;
+    background: $lite;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s linear infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 6px;
+      top: 10px;
+      width : $size/4;
+      height: $size/4;
+      color: $brand;
+      background: currentColor;
+      border-radius: 50%;
+      box-shadow: 25px 2px, 10px 22px;
+    }
+  }
+  
+  .loader-32 {
+    width : $size;
+    height: $size;
+    border: 4px solid ;
+    background:rgba($lite, 0.2) ;
+    border-color: transparent  $lite $lite transparent;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s ease-in-out infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      border : $size/4 solid;
+      border-color: transparent $brand $brand transparent;
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+    }
+  }
+
+.loader-33 {
+    border:2px solid;
+    border-color: transparent $lite;
+    width : $size;
+    height: $size;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 2s linear infinite;
+     &:after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      border: $size/2 solid;
+      border-color: transparent rgba($lite, 0.15);
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+.loader-34 {
+    border: $size/2 solid ;
+    border-color: rgba($lite, 0.15)  rgba($lite, 0.25)  rgba($lite, 0.35)  rgba($lite, 0.5);
+    border-radius: 50%;
+    display: inline-block;
+    animation: animloader34 1s linear infinite;
+  }
+
+  .loader-35 {
+    width : $size;
+    height: $size;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: rotation 1s linear infinite;
+    &:after , &:before{
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: $brand;
+      width:  $size/3;
+      height:  $size/3;
+      transform: translate(-50%, 50%);
+      border-radius: 50%;
+    }
+    &:before{
+      left: auto;
+      right: 0;
+      background: $lite;
+      transform: translate(50%, 100%);
+    }
+  }
+
+  .loader-36 {
+    width : $size;
+    height: $size;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    animation: zeroRotation 1s linear infinite alternate;
+    &:after , &:before{
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: $brand;
+      width:  $size/3;
+      height:  $size/3;
+      transform: translate(-50%, 50%);
+      border-radius: 50%;
+    }
+    &:before{
+      left: auto;
+      right: 0;
+      transform: translate(50%, 100%);
+    }
+  }
+
+
+  .loader-37 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    color: $lite;
+    animation: rotation 1s linear infinite;
+    &:after, &:before {
+      content: '';
+      position: absolute;
+      width: $size / 2;
+      height: $size / 2;
+      top: 0;
+      background-color: $lite;
+      border-radius: 50%;
+      animation: scale50 1s infinite ease-in-out;
+    }
+    &:before {
+      top: auto;
+      bottom: 0;
+      background-color: $brand;
+      animation-delay: 0.5s;
+    }
+  }
+  
+  .loader-38 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    color: $lite;
+    animation: rotation 1s linear infinite;
+    &:after, &:before {
+      content: '';
+      position: absolute;
+      width: $size / 2;
+      height: $size / 2;
+      top: 50%;
+      left: 50%;
+      transform: scale(0.5) translate(0 , 0);
+      background-color: $lite;
+      border-radius: 50%;
+      animation: animloader38 1s infinite ease-in-out;
+    }
+    &:before {
+      background-color: $brand;
+      transform: scale(0.5) translate( -$size , -$size);
+    }
+  }
+  
+
+  .loader-39 {
+    width : $size/3;
+    height: $size/3;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    background: $lite;
+    animation: shadowExpandX 2s linear infinite alternate;
+  }
+
+
+  .loader-40 {
+    width : $size/3;
+    height: $size/3;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    background: $lite;
+    box-shadow:  -$size/2 0 $lite, $size/2 0 $lite;
+    animation: shadowPulse 2s linear infinite;
+  }
+
+
+  .loader-41 {
+    width : $size/3;
+    height: $size/3;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    background: $brand;
+    color:$lite; 
+    box-shadow: -$size/2 0, $size/2 0;
+    animation: rotation 2s ease-in-out infinite;
+  }
+
+  .loader-42 {
+    width : $size/4;
+    height: $size/4;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    color: $lite;
+    animation: animloader42 1s linear infinite alternate;
+  }
+
+
+
+  .loader-43 {
+    width : 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    color: $lite;
+    left: -100px;
+    animation: shadowRolling 2s linear infinite;
+  }
+  
+  .loader-44 {
+    width : $size/4;
+    height: $size/4;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    color: $lite;
+    animation: animloader44 2s linear infinite;
+  }
+  
+  .loader-45 {
+    width : $size/4;
+    height: $size/4;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    color: $lite;
+    animation: animloader45 1s linear infinite alternate;
+  }
+
+  .loader-46 {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    &::after {
+      content: '';
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      position: absolute;
+      left: 0;
+      transform: translate(-50%, 100%);
+      animation: animloader46 1s linear infinite ;
+      top: 0;
+    }
+  }
+
+
+  
+  .loader-47 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    &::after , &::before {
+      content: '';
+      width : $size;
+      height: $size;
+      border:2px solid $lite;
+      position: absolute;
+      left:0;
+      top: 0;
+      animation: rotation 2s ease-in-out infinite;
+    }
+    &::after {
+      border-color: $brand;
+      animation-delay: 1s;
+    }
+  }
+  .loader-48 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    &::after , &::before {
+      content: '';
+      width : $size;
+      height: $size;
+      border:4px solid $lite;
+      position: absolute;
+      left:0;
+      top: 0;
+      animation: animloader14 2s ease-in-out infinite;
+    }
+    &::after {
+      border-color: $brand;
+      animation-delay: 1s;
+    }
+  }
+  .loader-49 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    &::after , &::before {
+      content: '';
+      width : $size;
+      height: $size;
+      border:2px solid $lite;
+      position: absolute;
+      left:0;
+      top: 0;
+      animation: rotation 2s ease-in-out infinite alternate;
+    }
+    &::after {
+      border-color: $brand;
+      animation-direction: alternate-reverse;
+    }
+  }
+
+  .loader-50 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    &::after , &::before {
+      content: '';
+      width : $size;
+      height: $size;
+      border:2px solid $lite;
+      position: absolute;
+      left:0;
+      top: 0;
+      animation: scaleOut 2s ease-in-out infinite;
+    }
+    &::after {
+      border-color: $brand;
+      animation-delay: 1s;
+    }
+  }
+  .loader-51 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    &::after , &::before {
+      content: '';
+      width : $size;
+      height: $size;
+      border:2px solid $lite;
+      position: absolute;
+      left:0;
+      top: 0;
+      animation: rotationBreak 3s ease-in-out infinite alternate;
+    }
+    &::after {
+      border-color: $brand;
+      animation-direction: alternate-reverse;
+    }
+  }
+
+
+  .loader-52{
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    border: 2px solid $lite;
+    animation: rotation 2s linear infinite;
+    &:after , &:before{
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      border: 2px solid $brand;
+      width:  $size - 10px;
+      height:  $size - 10px;
+      animation: rotationBack 1.5s linear infinite ;
+      transform-origin: center center;
+    }
+    &:before{
+      width:  $size - 20px;
+      height:  $size - 20px;
+      border-color:$lite;
+       animation: rotation 1s linear infinite;
+    }
+  }
+
+  .loader-53 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    background: $lite;
+    animation: flipX 1s linear infinite;
+  }
+  .loader-54 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    color: $lite;
+    border: 1px solid;
+    animation: fill 2s linear infinite alternate;
+  }
+  .loader-55 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    background: $lite;
+    animation: zeroRotation 1s ease infinite alternate-reverse;
+  }
+  .loader-56 {
+    width : $size/2;
+    height: $size/2;
+    display: inline-block;
+    position: relative;
+    background: $lite;
+    animation: animloader56 2s linear infinite;
+  }
+
+  .loader-57 {
+    width: $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    &::after {
+        content: '';
+        width: $size/2;
+        height: $size/2;
+        position: absolute;
+        left: 0;
+        top: 0;
+        background: $lite;
+        color: $lite;
+        animation: animloader57 2s linear infinite alternate;
+    }
+  }
+
+  
+  .loader-58 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    &::before {
+      content: '';
+      width : $size/2;
+      height: $size/2;
+      position: absolute;
+      left: 0;
+      top: -($size/2);
+      animation: animloader58 2s linear infinite alternate;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width : $size/2;
+      height: $size/2;
+      background: rgba($lite, 0.85);
+      box-shadow:0 0 10px rgba(0, 0, 0, 0.15);
+      animation: animloader58m 2s linear infinite alternate;
+    }
+  }
+  .loader-59 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    transform: rotate(45deg);
+    &::before {
+      content: '';
+      width : $size/2;
+      height: $size/2;
+      position: absolute;
+      left: 0;
+      top: -($size/2);
+      animation: animloader59 4s ease infinite;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width : $size/2;
+      height: $size/2;
+      background: rgba($lite, 0.85);
+      box-shadow:0 0 10px rgba(0, 0, 0, 0.15);
+      animation: animloader56 2s ease infinite;
+    }
+  }
+
+
+  .loader-60 {
+    width: $size/3;
+    height: $size/3;
+    box-shadow: 0 30px, 0 -30px;
+    border-radius: 4px;
+    background:  currentColor;
+    display: inline-block;
+    position: relative;
+    color: $lite;
+    left: -30px;
+    animation: animloader60 2s ease infinite;
+     &::after , &::before {
+      content: '';
+      width: $size/3;
+      height: $size/3;
+      box-shadow: 0 30px, 0 -30px;
+      border-radius: 4px;
+      background:  currentColor;
+      color: $lite;
+      position: absolute;
+      left: 30px;
+      top: 0;
+      animation: animloader60 2s 0.2s ease infinite;
+    }
+    &::before {
+      animation-delay: 0.4s;
+      left: 60px;
+    }
+  }
+
+
+[data-index="61"]{
+    align-items: normal;
+    padding-top: 75px;
+}
+
+.loader-61 {
+    width: $size / 6;
+    height: 40px;
+    border-radius: 4px;
+    display: inline-block;
+    position: relative;
+    background: currentColor;
+    color: $lite;
+    animation: animloader61m 0.3s 0.3s linear infinite alternate;
+    &::after , &::before {
+        content: '';
+        width: $size / 6;
+        height: 40px;
+        border-radius: 4px;
+        background: currentColor;
+        position: absolute;
+        bottom: 0;
+        left: 20px;
+        animation: animloader61 0.3s  0.45s  linear infinite alternate;
+    }
+    &::before {
+        left: -20px;
+        animation-delay: 0s;
+    }
+  }
+
+
+.loader-62 {
+    width: $size / 6;
+    height: 40px;
+    border-radius: 4px;
+    display: inline-block;
+    position: relative;
+    background: currentColor;
+    color: $lite;
+    animation: animloader61 0.3s 0.3s linear infinite alternate;
+    &::after , &::before {
+        content: '';
+        width: $size / 6;
+        height: 40px;
+        border-radius: 4px;
+        background: currentColor;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 20px;
+        animation: animloader61 0.3s  0.45s  linear infinite alternate;
+    }
+    &::before {
+        left: -20px;
+        animation-delay: 0s;
+    }
+  }
+
+  .loader-63 {
+    width: $size / 6;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    border-radius: 4px;
+    left: -40px;
+    animation: animloader63 1s linear infinite alternate;
+  }
+   .loader-64 {
+      width: $size / 6;
+      height: $size;
+      display: inline-block;
+      position: relative;
+      border-radius: 4px;
+      left: -60px;
+      color: $lite;
+      animation: animloader64 0.6s linear infinite ;
+    }
+    .loader-65 {
+      width: $size;
+      height: $size / 8;
+      display: inline-block;
+      position: relative;
+      border-radius: 4px;
+      top: -50px;
+      color: $lite;
+      animation: animloader65 0.6s linear infinite ;
+    }
+
+
+
+[data-index="66"]  {
+    justify-content: normal;
+    padding-left: 15%;
+}
+
+  .loader-66 {
+    width: $size/10;
+    height: $size / 10;
+    display: inline-block;
+    position: relative;
+    border-radius: 4px;
+    color: $lite;
+    background:  currentColor;
+    animation: animloader66 0.3s 0.3s linear infinite alternate;
+    &::after , &::before {
+      content: '';
+      width: $size/10;
+      height: $size / 10;
+      border-radius: 4px;
+      background:  currentColor;
+      position: absolute;
+      left: 0;
+      top: 15px;
+      animation: animloader66 0.3s 0.45s linear infinite alternate;
+    }
+     &::after {
+       top: -15px;
+       animation-delay: 0s;
+     }
+  }
+
+
+  .loader-67 {
+    width: $size/10;
+    height: $size/10;
+    display: inline-block;
+    position: relative;
+    border-radius: 4px;
+    color: $lite;
+    background:  currentColor;
+     animation: animloader66 0.3s 0.3s linear infinite alternate;
+    &::after , &::before {
+      content: '';
+      width: $size/10;
+      height: $size / 10;
+      border-radius: 4px;
+      background:  currentColor;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 15px;
+      animation: animloader66 0.3s 0.45s linear infinite alternate;
+    }
+     &::after {
+       top: -15px;
+       animation-delay: 0s;
+     }
+  }
+
+
+  .loader-68 {
+    width: $size / 6;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    border-radius: 4px;
+    left: -100px;
+    animation: animloader68 1s linear infinite alternate;
+  }
+
+
+  .loader-69 {
+      width: 20px;
+      height: $size / 4;
+      display: inline-block;
+      position: relative;
+      border-radius: 4px;
+      color: $lite;
+      background: currentColor;
+      animation: animloader69 0.6s 0.3s ease infinite alternate;
+
+      &::after, &::before {
+        content: '';
+        width: 20px;
+        height: $size / 4;
+        background: currentColor;
+        position: absolute;
+        border-radius: 4px;
+        top: 0;
+        right: 110%;
+         animation: animloader69  0.6s ease infinite alternate;
+      }
+      &::after {
+        left: 110%;
+        right: auto;
+        animation-delay: 0.6s;
+      }
+    }
+
+
+
+
+
+
+
+    
+  .loader-70 {
+      width: 100%;
+      height: $size / 10;
+      display: inline-block;
+      position: relative;
+      background: rgba($lite, 0.15);
+      overflow: hidden;
+      &::after {
+        content: '';
+        width: $size * 2;
+        height: $size / 10;
+        background: $lite;
+        position: absolute;
+        top: 0;
+        left: 0;
+        animation: hitZak 1s linear infinite alternate;
+        
+      }
+  }
+
+  .loader-71 {
+      width: 100%;
+      height: $size / 10;
+      display: inline-block;
+      position: relative;
+      background: rgba($lite, 0.15);
+      overflow: hidden;
+      &::after {
+        content: '';
+        width: $size * 4;
+        height: $size / 10;
+        background: $lite;
+        position: absolute;
+        top: 0;
+        left: 0;
+        animation: animloader71 2s linear infinite;
+        
+      }
+  }
+  .loader-72 {
+      width: 100%;
+      height: $size / 10;
+      display: inline-block;
+      position: relative;
+      background: rgba($lite, 0.15);
+      overflow: hidden;
+      &::after {
+        content: '';
+        width: 0;
+        height: $size / 10;
+        background: $lite;
+        position: absolute;
+        top: 0;
+        left: 0;
+        animation: animFw 10s linear infinite;
+        
+      }
+  }
+[data-index="73"]{
+    justify-content: normal;
+  }
+  .loader-73 {
+      width:0;
+      height: $size / 10;
+      display: inline-block;
+      position: relative;
+      background: $lite;
+      box-shadow: 0 0 10px rgba($lite, 0.5);
+      animation: animFw 8s linear infinite;
+      &::after , &::before {
+        content: '';
+        width: 10px;
+        height: 1px;
+        background: $lite;
+        position: absolute;
+        top: 9px;
+        right: -2px;
+        opacity: 0;
+        transform: rotate(-45deg)  translateX(0px);
+        animation: coli1 0.3s linear infinite;
+      }
+      &::before {
+        top: -4px;
+        transform: rotate(45deg);
+        animation: coli2 0.3s linear infinite;
+      }
+  }
+  
+  .loader-74 {
+      width: 100%;
+      height: $size / 10;
+      display: inline-block;
+      position: relative;
+      overflow: hidden;
+      &::after {
+        content: '';
+        width: $size * 2;
+        height: $size / 10;
+        background: $lite;
+        position: absolute;
+        top: 0;
+        left: 0;
+        animation: hitZak 0.6s ease-in-out infinite alternate;
+        
+      }
+  }
+  
+  .loader-75 {
+      width: 100%;
+      height: $size / 10;
+      display: inline-block;
+      background: rgba($lite, 0.15);
+      position: relative;
+      overflow: hidden;
+      &::after {
+        content: '';
+        width: 0%;
+        height: $size / 10;
+        background-color: $lite;
+        background-image: linear-gradient(45deg,rgba(black,0.25) 25%,
+                            transparent 25%,transparent 50%,rgba(black,0.25) 50%,
+                            rgba(black,0.25) 75%,transparent 75%,transparent);
+        background-size: 15px 15px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        animation: animFw 6s ease-in infinite;
+        
+      }
+}
+  .loader-76 {
+      width: 100%;
+      height: $size / 10;
+      display: inline-block;
+      background: rgba($lite, 0.15);
+      position: relative;
+      overflow: hidden;
+      &::after {
+        content: '';
+        width: 0%;
+        height: $size / 10;
+        background-color: $lite;
+        font-size: 15px;
+        background-image: linear-gradient(45deg,rgba(black,0.25) 25%,
+                            transparent 25%,transparent 50%,rgba(black,0.25) 50%,
+                            rgba(black,0.25) 75%,transparent 75%,transparent);
+        background-size: 1em 1em ;
+        position: absolute;
+        top: 0;
+        left: 0;
+        animation: animFw 10s ease-in infinite,  barStripe 1s linear infinite;
+        
+      }
+  }
+  .loader-77 {
+      width: 100%;
+      height: $size / 6;
+      display: inline-block;
+      position: relative;
+      overflow: hidden;
+      &::before {
+        content: '';
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        background-color: rgba($lite, 0.15);
+        background-image: linear-gradient(45deg,rgba(black,0.25) 25%,
+                          transparent 25%,transparent 50%,rgba(black,0.25) 50%,
+                          rgba(black,0.25) 75%,transparent 75%,transparent);
+        background-size: 15px 15px;
+        z-index: 10;
+      }
+      &::after {
+        content: '';
+        width: 0%;
+        height:100%;
+        background-color: $lite;
+        position: absolute;
+        border-radius: 0 4px 4px 0;
+        top: 0;
+        left: 0;
+        animation: animFw 10s ease-in infinite;
+        
+      }
+  }
+
+.loader-78 {
+  width: 100%;
+  height: $size / 4;
+  display: inline-block;
+  background-color: $lite;
+  background-image: linear-gradient(45deg,rgba(black,0.25) 25%,
+                      transparent 25%,transparent 50%,rgba(black,0.25) 50%,
+                      rgba(black,0.25) 75%,transparent 75%,transparent);
+  font-size: 30px;
+  background-size: 1em 1em;
+  animation:  barStripe 1s linear infinite;
+}
+
+.loader-79 {
+  width:  $size * 2;
+  height: $size / 3;
+  display: inline-block;
+  background-color: $lite;
+  border: 1px solid  $lite;
+  border-radius: 4px;
+  background-image: linear-gradient(45deg,rgba(black,0.25) 25%,
+                      transparent 25%,transparent 50%,rgba(black,0.25) 50%,
+                      rgba(black,0.25) 75%,transparent 75%,transparent);
+  font-size: 30px;
+  background-size: 1em 1em;
+  animation:  barStripe 1s linear infinite;
+}
+
+.loader-80 {
+  width:  $size * 2;
+  height: $size / 2;
+  display: inline-block;
+  background-color: $lite;
+  border: 1px solid  $lite;
+  border-radius: 4px;
+  background: linear-gradient(45deg, transparent 49%, 
+                                $lite 50%, $lite 50%, transparent 51%, 
+                                transparent),
+                                linear-gradient(-45deg, transparent 49%,
+                                $lite 50%, $lite 50%, transparent 51%, transparent);
+  font-size: 15px;
+  background-size: 1em 1em;
+  animation:  barStripe 0.6s linear infinite;
+}
+.loader-81 {
+    width: 130px;
+    height: 48px;
+    display: inline-block;
+    background: linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%), linear-gradient(45deg, #000 25%, white 25%,white 75%, #000 75%, #000 100%);
+    font-size: 10px;
+    background-size: 32px 32px;
+    animation:  raceBoard 0.6s linear infinite;
+    background-position: 0 0, 16px 16px;
+}
+
+
+  .loader-82 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    background-color: $lite;
+    background: radial-gradient(ellipse at center, $brand 0%,$brand 14%,$lite 15%, $lite 100%);
+    background-size: cover;
+    background-position: center;
+    border-radius: 50%;
+    &::after, &::before {
+      content: '';
+      position: absolute;
+      height: 16px;
+      width: 4px;
+      background: $brand;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) rotate(0deg);
+      transform-origin: 25% 0 ;
+      animation: rotation 10s linear infinite ;
+    }
+    &::before {
+      height: 22px;
+      width: 2px;
+      transform: translateX(-50%) rotate(0deg);
+      animation-duration: 1s;
+    }
+  }
+
+  
+.loader-83 {
+    width: 175px;
+    height: 80px;
+    position: relative;
+
+     &::before  {
+      content: '';
+      left: 60px;
+      bottom: 18px;
+      position: absolute;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background-color: $lite;
+      background-image: 
+            radial-gradient(circle 8px at 18px 18px,  $base 100%, transparent 0), 
+            radial-gradient(circle 4px at 18px 0px,  $base 100%, transparent 0),
+            radial-gradient(circle 4px at 0px 18px,  $base 100%, transparent 0),
+            radial-gradient(circle 4px at 36px 18px,  $base 100%, transparent 0),
+            radial-gradient(circle 4px at 18px 36px,  $base 100%, transparent 0),
+            radial-gradient(circle 4px at 30px 5px,  $base 100%, transparent 0),
+            radial-gradient(circle 4px at 30px 5px,  $base 100%, transparent 0),
+            radial-gradient(circle 4px at 30px 30px,  $base 100%, transparent 0),
+            radial-gradient(circle 4px at 5px 30px,  $base 100%, transparent 0),
+            radial-gradient(circle 4px at 5px 5px,  $base 100%, transparent 0);
+      background-repeat: no-repeat;
+      animation: rotationBack 3s linear infinite;
+    }
+     &::after {
+      content: '';
+      left: 94px;
+      bottom: 15px;
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background-color:  $lite;
+      background-image: 
+            radial-gradient(circle 5px at 12px 12px,  $base 100%, transparent 0), 
+            radial-gradient(circle 2.5px at 12px 0px,  $base 100%, transparent 0),
+            radial-gradient(circle 2.5px at 0px 12px,  $base 100%, transparent 0),
+            radial-gradient(circle 2.5px at 24px 12px,  $base 100%, transparent 0),
+            radial-gradient(circle 2.5px at 12px 24px,  $base 100%, transparent 0),
+            radial-gradient(circle 2.5px at 20px 3px,  $base 100%, transparent 0),
+            radial-gradient(circle 2.5px at 20px 3px,  $base 100%, transparent 0),
+            radial-gradient(circle 2.5px at 20px 20px,  $base 100%, transparent 0),
+            radial-gradient(circle 2.5px at 3px 20px,  $base 100%, transparent 0),
+            radial-gradient(circle 2.5px at 3px 3px,  $base 100%, transparent 0);
+      background-repeat: no-repeat;
+      animation: rotationBack 4s linear infinite reverse;
+    }
+}
+
+.loader-84 {
+    width: 15px;
+    height: 20px;
+    background: $lite;
+    display: inline-block;
+    position: relative;
+    animation: bump 0.4s ease-in infinite alternate;
+    &::after {
+        content: '';
+        left: 50%;
+        top: 100%;
+        transform: translate(-50%, 0);
+        position: absolute;
+        border: 15px solid transparent;
+        border-top-color: $lite;
+    }
+  }
+  .loader-85 {
+    width: 15px;
+    height: 20px;
+    background: $lite;
+    display: inline-block;
+    position: relative;
+    animation: bump 0.4s linear infinite alternate;
+    &::after {
+        content: '';
+        left: 50%;
+        bottom: 100%;
+        transform: translate(-50%, 0);
+        position: absolute;
+        border: 15px solid transparent;
+        border-bottom-color: $lite;
+    }
+  }
+
+
+  .loader-86 {
+    width: $size;
+    height: $size/4;
+    background: $lite;
+    display: inline-block;
+    position: relative;
+    &::after {
+        content: '';
+        left: 50%;
+        bottom: 0;
+        transform: translate(-50%, 0);
+        position: absolute;
+        border: 15px solid transparent;
+        border-top-color: $lite;
+        animation: bump 0.4s ease-in-out infinite alternate;
+    }
+    &::before {
+        content: '';
+        left: 50%;
+        bottom: 25px;
+        transform: translate(-50%, 0);
+        position: absolute;
+        width: 15px;
+        height: 20px;
+        background: $lite;
+        animation: bump 0.4s ease-in-out infinite alternate;
+    
+    }
+  }
+
+  .loader-87 {
+    width: $size;
+    height: $size/4;
+    background: $lite;
+    display: inline-block;
+    position: relative;
+    &::after {
+        content: '';
+        left: 50%;
+        top: -47px;
+        transform: translate(-50%, 0);
+        position: absolute;
+        border: 15px solid transparent;
+        border-bottom-color: $lite;
+        animation: bump 0.4s ease-in-out infinite alternate;
+    }
+    &::before {
+        content: '';
+        left: 50%;
+        bottom: 15px;
+        transform: translate(-50%, 0);
+        position: absolute;
+        width: 15px;
+        height: 20px;
+        background: $lite;
+        animation: bump 0.4s ease-in-out infinite alternate;
+    
+    }
+  }
+
+
+  .loader-88 {
+    width : $size;
+    height: $size/2;
+    display: inline-block;
+    position: relative;
+    color: $lite;
+    border:1px solid;
+    animation: fillX 2s linear infinite;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      background: $lite;
+      width: 5px;
+      height: 12px;
+    }
+  }
+  .loader-89 {
+    width : $size;
+    height: $size/2;
+    display: inline-block;
+    position: relative;
+    border:1px solid $lite;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border:1px solid $lite;
+      width: 5px;
+      height: 12px;
+    }
+    &::before {
+      content: '';
+      position: absolute;
+      left: -8px;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 80%;
+      width: 6px;
+      animation: animloader89  2s linear infinite;
+    }
+  }
+
+  .loader-90 {
+    width : $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    border: 4px solid $lite;
+    animation: fill 2s linear infinite alternate;
+    color: rgba($brand, 0.9);
+    border-radius: 0 0 4px 4px;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border: 4px solid $lite;
+      width: 20px;
+      height: 25px;
+      border-radius: 0 4px 4px 0;
+    }
+  }
+
+  .loader-91 {
+    width : $size/ 1.5;
+    height: $size * 1.5;
+    display: inline-block;
+    position: relative;
+    border: 2px solid $lite;
+    animation: animloader91 2s linear infinite alternate;
+    color: $brand;
+    border-radius: 0 0 4px 4px;
+    transform: perspective(140px) rotateX(-45deg);
+  }
+
+  .loader-92 {
+    width: 48px;
+    height: 40px;
+    display: inline-block;
+    position: relative;
+    background: $lite;
+    border-radius: 15% 15% 35% 35%;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 45px;
+      top: 8px;
+      border: 4px solid $lite;
+      width: 16px;
+      height: 20px;
+      border-radius: 0 4px 4px 0;
+    }
+    &::before {
+      content: '';
+      position: absolute;
+      width: 1px;
+      height: 10px;
+      color: $lite;
+      top: -15px;
+      left: 11px;
+      animation: animloader92 1s ease infinite;
+    }
+  }
+  .loader-93 {
+    width: $size * 2;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    background: $lite;
+    border-radius: $size $size 0 0;
+    overflow: hidden;
+    &::after {
+      content: '';
+      position: absolute;
+      width: $size /2;
+      height: $size /4;
+      border-radius: $size/2 $size/2 0 0;
+      background: $brand;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 0;
+    }
+    &::before {
+      content: '';
+      position: absolute;
+      width: 4px;
+      height: $size / 1.5;
+      left: 0;
+      right: 0;
+      margin: auto;
+      bottom: 0;
+      background: $brand;
+      transform-origin: 50% 100%;
+      animation: animloader93 2s linear infinite alternate;
+    }
+  }
+  .loader-94 {
+    width: $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    border:3px solid $lite;
+    border-radius: 50%;
+    animation: animloader94 2s linear infinite;
+    &::after {
+        content: '';
+        width: 6px;
+        height: 24px;
+        background:$lite;
+        transform: rotate(-45deg);
+        position: absolute;
+        bottom: -20px;
+        left: 46px;
+    }
+  }
+  .loader-95 {
+    width: $size;
+    height: $size;
+    display: inline-block;
+    position: relative;
+    &::after {
+        content: '';
+        width: $size;
+        height: $size;
+        left: 0;
+        bottom: 0;
+        position: absolute;
+        border-radius: 50% 50% 0;
+        border: 15px solid $lite;
+        transform: rotate(45deg) translate(0 , 0);
+        animation: animMarker 0.4s ease-in-out infinite alternate;
+    }
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin: auto;
+        top: 150%;
+        width: $size / 2;
+        height: 4px;
+        border-radius: 50%;
+        background: rgba(0, 0,0,0.2);
+        animation: animShadow 0.4s ease-in-out infinite alternate;
+    
+    }
+  }
+
+
+  
+  .loader-96 {
+    width: $size;
+    height: $size;
+    background: $brand;
+    display: inline-block;
+    position: relative;
+    animation: rotationBack 1s ease-in-out infinite reverse;
+    &::before  {
+        content: '';
+        left: 0;
+        top: 0;
+        transform: rotate(45deg);
+        position: absolute;
+        width: $size;
+        height: $size;
+        background: $brand;
+        box-shadow: 0 0 5px rgba(0, 0,0,0.15);
+    }
+    &::after {
+        content: '';
+        width : $size/1.5;
+        height: $size/1.5;
+        border-radius: 50%;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        background: $lite;
+        transform: translate(-50%, -50%);
+        box-shadow: 0 0 5px rgba(0, 0,0,0.15);
+    }
+  }
+
+
+  .loader-97 {
+    width: $size *1.25;
+    height:  $size *1.25;
+    display: inline-block;
+    position: relative;
+    background: radial-gradient(ellipse at center, $lite 69%, rgba(0, 0, 0, 0) 70%),
+    linear-gradient(to right, rgba(0,0,0,0) 47%,$lite 48%, $lite 52%,rgba(0,0,0,0) 53%);
+    background-size: 20px 20px , 20px auto;
+    background-repeat: repeat-x;
+    background-position: center bottom, center -5px;
+
+    &::before, &::after {
+        content: '';
+        position: absolute;
+        left: -20px;
+        top: 0;
+        width:20px;
+        height:  $size *1.25;
+        background: radial-gradient(ellipse at center, $lite 69%, rgba(0, 0, 0, 0) 70%),
+        linear-gradient(to right, rgba(0,0,0,0) 47%,$lite 48%, $lite 52%,rgba(0,0,0,0) 53%);
+        background-size: 20px 20px , 20px auto;
+        background-repeat: no-repeat;
+        background-position: center bottom, center -5px;
+        transform: rotate(0deg);
+        transform-origin: 50% 0%;
+        animation: animPend 1s linear infinite alternate;
+    }
+    &::after {
+        animation: animPend2 1s linear infinite alternate;
+        left: 100%;
+    }
+  }
+
+
+.loader-98 {
+    width: 24px;
+    height: 80px;
+    border: 1px solid $lite;
+    border-radius: 0 0 50px 50px;
+    position: relative;
+    box-shadow: 0px 0px $brand inset;
+    background-image:  linear-gradient($brand 100px, transparent 0);
+    background-position: 0px 0px;
+    background-size: 22px 80px;
+    background-repeat: no-repeat;
+    animation: animloader98 6s linear infinite;
+    &::after {
+      content: '';
+      top: -6px;
+      left: 50%;
+      transform: translateX(-50%);
+      position: absolute;
+      border: 1px solid $lite;
+      border-radius: 50%;
+      width: 28px;
+      height: 6px;
+    }
+    &::before {
+      content: '';
+      left: 0;
+      bottom: -4px;
+      border-radius: 50%;
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      animation: animloader98s 6s linear infinite;
+    }
+}
+.loader-99 {
+  width: 20px;
+  height: 20px;
+  margin-top: 80px;
+  border-radius: 50%;
+  background: $brand;
+  border: 5px solid $lite;
+  position: relative;
+  &::before{
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: 10px;
+    transform: translateX(-50%);
+    width: 8px;
+    height: 80px;
+    border: 2px solid $lite;
+    border-bottom: none;
+    background: $lite;
+    color:  $brand;
+    border-radius: 50px 50px 0 0;
+    box-shadow: 0px 0px  inset;
+    animation: animloader99 6s linear infinite;
+  }
+}
+
+
+
+
+.loader-100 {
+    width: 180px;
+    height: 140px;
+    background-image: radial-gradient(circle 25px at 25px 25px, $lite 100%, transparent 0), 
+                      radial-gradient(circle 50px at 50px 50px, $lite 100%, transparent 0),
+                      radial-gradient(circle 25px at 25px 25px, $lite 100%, transparent 0), 
+                      radial-gradient(circle 15px at 15px 15px, $lite 100%, transparent 0),
+                      linear-gradient($lite 50px, transparent 0);
+    background-size: 50px 50px, 100px 75px, 50px 50px, 30px 32px, 136px 20px;
+    background-repeat: no-repeat;
+    background-position: 0px 30px, 30px 0px, 113px 29px, 147px 50px, 23px 60px;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 2px;
+      top: 65px;
+      width: 2px;
+      height: 6px;
+      color: $lite;
+      animation: animloader100 0.6s linear infinite ;
+    }
+}
+
+.loader-101 {
+    width: 175px;
+    height: 80px;
+    background-image: radial-gradient(circle 25px at 25px 25px, $lite 100%, transparent 0), 
+                      radial-gradient(circle 50px at 50px 50px, $lite 100%, transparent 0), 
+                      radial-gradient(circle 25px at 25px 25px, $lite 100%, transparent 0), 
+                      linear-gradient($lite 50px, transparent 0);
+    background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
+    background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
+    background-repeat: no-repeat;
+    position: relative;
+
+    &::after {
+      content: '';
+      left: 50%;
+      bottom: 0;
+      transform: translate(-50%, 0);
+      position: absolute;
+      border: 15px solid transparent;
+      border-top-color: $brand;
+      animation: fadePush 1s linear infinite ;
+    }
+    &::before {
+      content: '';
+      left: 50%;
+      bottom: 30px;
+      transform: translate(-50%, 0);
+      position: absolute;
+      width: 15px;
+      height: 15px;
+      background: $brand;
+      animation: fadePush 1s linear infinite ;
+    }
+}
+
+.loader-102 {
+    width: 175px;
+    height: 80px;
+    background-image: radial-gradient(circle 25px at 25px 25px, $lite 100%, transparent 0), 
+                      radial-gradient(circle 50px at 50px 50px, $lite 100%, transparent 0), 
+                      radial-gradient(circle 25px at 25px 25px, $lite 100%, transparent 0), 
+                      linear-gradient($lite 50px, transparent 0);
+    background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
+    background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
+    background-repeat: no-repeat;
+    position: relative;
+
+    &::after {
+      content: '';
+      left: 50%;
+      bottom: 30px;
+      transform: translate(-50%, 0);
+      position: absolute;
+      border: 15px solid transparent;
+      border-bottom-color: $brand;
+      animation: fadePull 1s linear infinite;
+    }
+    &::before {
+      content: '';
+      left: 50%;
+      bottom: 15px;
+      transform: translate(-50%, 0);
+      position: absolute;
+      width: 15px;
+      height: 15px;
+      background: $brand;
+      animation: fadePull 1s linear infinite;
+    }
+}
+
+.loader-103 {
+    width: 175px;
+    height: 80px;
+    background-image: radial-gradient(circle 25px at 25px 25px, $lite 100%, transparent 0), 
+                      radial-gradient(circle 50px at 50px 50px, $lite 100%, transparent 0), 
+                      radial-gradient(circle 25px at 25px 25px, $lite 100%, transparent 0), 
+                      linear-gradient($lite 50px, transparent 0);
+    background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
+    background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
+    background-repeat: no-repeat;
+    position: relative;
+
+    &::after {
+      content: '';
+      left: 0;
+      right: 0;
+      margin: auto;
+      bottom: 20px;
+      position: absolute;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      border: 5px solid transparent;
+      border-color: $brand transparent;
+      animation: rotation 1s linear infinite;
+    }
+}
+.loader-104 {
+    width: 175px;
+    height: 80px;
+    background-image: radial-gradient(circle 25px at 25px 25px, $lite 100%, transparent 0), 
+                      radial-gradient(circle 50px at 50px 50px, $lite 100%, transparent 0), 
+                      radial-gradient(circle 25px at 25px 25px, $lite 100%, transparent 0), 
+                      linear-gradient($lite 50px, transparent 0);
+    background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
+    background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
+    background-repeat: no-repeat;
+    position: relative;
+
+     &::before  {
+      content: '';
+      left: 60px;
+      bottom: 18px;
+      position: absolute;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background-color: $brand;
+      background-image: 
+            radial-gradient(circle 8px at 18px 18px,  $lite 100%, transparent 0), 
+            radial-gradient(circle 4px at 18px 0px,  $lite 100%, transparent 0),
+            radial-gradient(circle 4px at 0px 18px,  $lite 100%, transparent 0),
+            radial-gradient(circle 4px at 36px 18px,  $lite 100%, transparent 0),
+            radial-gradient(circle 4px at 18px 36px,  $lite 100%, transparent 0),
+            radial-gradient(circle 4px at 30px 5px,  $lite 100%, transparent 0),
+            radial-gradient(circle 4px at 30px 5px,  $lite 100%, transparent 0),
+            radial-gradient(circle 4px at 30px 30px,  $lite 100%, transparent 0),
+            radial-gradient(circle 4px at 5px 30px,  $lite 100%, transparent 0),
+            radial-gradient(circle 4px at 5px 5px,  $lite 100%, transparent 0);
+      background-repeat: no-repeat;
+      animation: rotationBack 3s linear infinite;
+    }
+     &::after {
+      content: '';
+      left: 94px;
+      bottom: 15px;
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background-color: $brand;
+      background-image: 
+            radial-gradient(circle 5px at 12px 12px,  $lite 100%, transparent 0), 
+            radial-gradient(circle 2.5px at 12px 0px,  $lite 100%, transparent 0),
+            radial-gradient(circle 2.5px at 0px 12px,  $lite 100%, transparent 0),
+            radial-gradient(circle 2.5px at 24px 12px,  $lite 100%, transparent 0),
+            radial-gradient(circle 2.5px at 12px 24px,  $lite 100%, transparent 0),
+            radial-gradient(circle 2.5px at 20px 3px,  $lite 100%, transparent 0),
+            radial-gradient(circle 2.5px at 20px 3px,  $lite 100%, transparent 0),
+            radial-gradient(circle 2.5px at 20px 20px,  $lite 100%, transparent 0),
+            radial-gradient(circle 2.5px at 3px 20px,  $lite 100%, transparent 0),
+            radial-gradient(circle 2.5px at 3px 3px,  $lite 100%, transparent 0);
+      background-repeat: no-repeat;
+      animation: rotationBack 4s linear infinite reverse;
+    }
+}
+
+
+.loader-105 {
+    width: 175px;
+    height: 80px;
+    background-image: linear-gradient($base 50px, transparent 0),
+                      radial-gradient(circle 25px at 25px 25px, $lite 100%, transparent 0), 
+                      radial-gradient(circle 50px at 50px 50px, $lite 100%, transparent 0), 
+                      radial-gradient(circle 25px at 25px 25px, $lite 100%, transparent 0), 
+                      linear-gradient($lite 50px, transparent 0);
+    background-size: 64px 6px, 50px 50px, 100px 76px, 50px 50px, 120px 40px;
+    background-position: 55px 60px, 0px 30px, 37px 0px, 122px 30px, 25px 40px;
+    background-repeat: no-repeat;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%) rotate(-180deg);
+      top: 62px;
+      height: 64px;
+      width: 60px;
+      background-color:  $lite;
+      background-image: linear-gradient(#DDD 20px, transparent 0), 
+                        linear-gradient(#DDD 5px, transparent 0), 
+                        linear-gradient(#DDD 10px, transparent 0), 
+                        linear-gradient(#DDD 10px, transparent 0);
+      background-size: 50px 20px;
+      background-position: 5px 36px, 5px 25px, 5px 10px;
+      background-repeat: no-repeat;
+      border-radius: 2px 2px 4px 4px;
+      z-index: 10;
+      box-shadow: 0px -4px 7px rgba(#000, 0.5);
+      animation: animloader105 4s linear infinite;
+    }
+}
+
+
+
+.loader-106 {
+    width: 32px;
+    height: 90px;
+    margin-bottom: 20px;
+    position: relative;
+    border-radius: 50% 50% 0 0;
+    border-bottom: 10px solid $brand;
+    background-color: $lite;
+    background-image: radial-gradient(ellipse at center, $lite 34%, $brand 35%, $brand 54%, $lite 55%),
+                linear-gradient($brand 10px, transparent 0);
+    background-size: 28px 28px;
+    background-position: center 20px , center 2px;
+    background-repeat: no-repeat;
+    animation: animloader106back 1s linear infinite alternate;
+    &::before{
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 64px;
+      height: 44px;
+      border-radius: 50%;
+      box-shadow: 0px 15px $brand inset;
+      top: 67px;
+    }
+
+     &::after{
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+      width: 34px;
+      height: 34px;
+      top: 112%;
+      background: radial-gradient(ellipse at center, rgba(255,223,0,1) 8%,rgba(249,62,0,0.6) 24%, rgba(0,0,0,0) 100%);
+      border-radius: 50% 50% 0;
+      background-repeat: no-repeat;
+      background-position: -44px -44px;
+      background-size: 100px 100px;
+      box-shadow: 4px 4px 12px 0px rgba($brand, 0.5);
+      animation: animloader106 1s linear infinite alternate;
+    }
+}
+
+.loader-107 {
+  width: 106px;
+  height: 56px;
+  background-image: linear-gradient($lite 50px, transparent 0), 
+                    linear-gradient($lite 50px, transparent 0), 
+                    linear-gradient($lite 50px, transparent 0), 
+                    linear-gradient($lite 50px, transparent 0), 
+  radial-gradient(circle 14px , $lite 100%, transparent 0);
+  background-size: 48px 15px , 15px 35px, 15px 35px, 25px 15px, 28px 28px;
+  background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
+  background-repeat: no-repeat;
+  position: relative;
+  transform: rotate(-45deg);
+
+  &::after , &::before {
+    content: '';
+    position: absolute;
+    width: 56px;
+    height: 56px;
+    border: 6px solid $lite;
+    border-radius: 50%;
+    left: -45px;
+    top: -10px;
+    background-repeat: no-repeat;
+    background-image: linear-gradient($lite 64px, transparent 0), 
+    linear-gradient($lite 66px, transparent 0), 
+    radial-gradient(circle 4px, $lite 100%, transparent 0);
+    background-size: 40px 1px , 1px 40px, 8px 8px;
+    background-position: center center;
+    animation: rotation 0.3s linear infinite;
+  }
+  &::before {
+      left: 25px;
+      top: 60px;
+  }
+}
+
+.loader-108 {
+    width: 48px;
+    height: 24px;
+    color: $lite;
+    background: currentColor;
+    border-radius: 50% 50% 0 0;
+    position: relative;
+    margin-top: 36px;
+    animation: animloader108 4s linear infinite ;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: currentColor;
+      top: -34px;
+      animation: animloader108s 4s linear infinite;
+  }
+}
+
+
+
+.loader-109 {
+    font-size: $size;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    color: $brand;
+    letter-spacing: 2px;
+    position: relative;
+    &::after {
+      content: 'Loading';
+      position: absolute;
+      left: 0;
+      top: 0;
+      color: $lite;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      animation: animloader110 6s linear infinite;
+    }
+}
+
+.loader-110 {
+    font-size: $size;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    color: $lite;
+    letter-spacing: 2px;
+    position: relative;
+    &::after {
+      content: 'Loading';
+      position: absolute;
+      left: 0;
+      top: 0;
+      color: $base;
+      text-shadow: 0 0 2px $lite, 0 0 1px $lite, 0 0 1px $lite;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      animation: animloader110 6s linear infinite;
+    }
+}
+
+.loader-111 {
+    font-size: $size;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    color: $base;
+    text-shadow: 0 0 2px $lite, 0 0 1px $lite, 0 0 1px $lite;
+    letter-spacing: 2px;
+    position: relative;
+    &::after {
+      content: 'Loading';
+      position: absolute;
+      left: 0;
+      top: 0;
+      color: $lite;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      animation: animloader111 6s linear infinite;
+    }
+}
+.loader-112 {
+    font-size: $size;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    color: $lite;
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 34px;
+      bottom: 8px;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      border: 5px solid $lite;
+      border-bottom-color: $brand;
+      animation: rotation 0.6s linear infinite;
+    }
+}
+
+.loader-113{
+  color: $lite;
+  position: relative;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: $size;
+  letter-spacing: 4px;
+  &::before {
+    content: '';
+    position: absolute;
+    right: 70px;
+    bottom: 10px;
+    height: 28px;
+    width: 5.15px;
+    background: currentColor;
+    animation: animloader113L 1s linear infinite alternate;
+  }
+  &::after {
+    content: '';
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    left: 125px;
+    top: 2px;
+    border-radius: 50%;
+    background: red;
+    animation: animloader113 1s linear infinite alternate;
+  }
+}
+
+.loader-114{
+  color: $lite;
+  position: relative;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: $size;
+  letter-spacing: 4px;
+  &::before {
+    content: '';
+    position: absolute;
+    right: 70px;
+    bottom: 10px;
+    height: 28px;
+    width: 5.15px;
+    background: currentColor;
+  }
+  &::after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    position: absolute;
+    left: 125px;
+    top: 2px;
+    border-radius: 50%;
+    background: red;
+    animation: animloader114 1s ease-in infinite ;
+  }
+}
+
+.loader-115{
+  color: $lite;
+  position: relative;
+  font-size: $size;
+  font-family: Arial, Helvetica, sans-serif;
+  &::after {
+    content: '';
+    width: 5px;
+    height: 5px;
+    background: currentColor;
+    position: absolute;
+    bottom: 10px;
+    right: -5px;
+    animation: animloader115 1s linear infinite;
+  }
+}
+.loader-116{
+  color: $lite;
+  position: relative;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: $size;
+  letter-spacing: 4px;
+  &::before {
+    content: '';
+    position: absolute;
+    right: 70px;
+    bottom: 10px;
+    height: 28px;
+    width: 5px;
+    background: currentColor;
+  }
+  &::after {
+    content: '';
+    width: 4px;
+    height: 4px;
+    background: currentColor;
+    position: absolute;
+    right: 70px;
+    top: 8px;
+    animation: animloader116 0.6s ease-out infinite alternate;
+  }
+}
+.loader-117{
+  color: $lite;
+  position: relative;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: $size;
+  letter-spacing: 4px;
+  &::before {
+    content: '';
+    position: absolute;
+    right: 68px;
+    bottom: 10px;
+    height: 28px;
+    width: 7px;
+    outline: 1px solid $lite;
+    color:$brand;
+    animation: animloader117 1s linear infinite alternate;
+  }
+  &::after {
+    content: '';
+    width: 4px;
+    height: 4px;
+    background: $brand;
+    position: absolute;
+    right: 70px;
+    top: 8px;
+    animation: animloader116 1s ease-out infinite alternate;
+  }
+}
+
+
+.loader-118{
+  position: relative;
+  &::before {
+    content: 'Loading';
+    color: $lite;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: $size;
+    letter-spacing: 2px;
+    display: inline-block;
+    animation: floating 1s ease-out infinite alternate;
+  }
+  &::after {
+    content: '';
+    width: 100%;
+    height: 10px;
+    background: rgba(0, 0,0,0.15);
+    position: absolute;
+    left: 0;
+    top: 100%;
+    filter: blur(4px);
+    border-radius: 50%;
+    animation: animloader118 1s ease-out infinite alternate;
+  }
+}
+.loader-119 {
+    font-size: $size;
+    letter-spacing: 2px;
+    font-family: Arial, Helvetica, sans-serif;
+    color:$lite;
+    animation: animloader119 1s ease-in infinite alternate;
+}
+
+.loader-120 {
+    font-size: $size;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    color: $brand;
+    letter-spacing: 2px;
+    position: relative;
+    &::after {
+      content: 'Loading';
+      position: absolute;
+      left: 0;
+      top: 0;
+      color: $lite;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      animation: animloader111 10s ease-in infinite;
+    }
+}
+
+.loader-121 {
+    width: 95%;
+    height: 100px;
+    background-image: 
+        linear-gradient(100deg, transparent, rgba($base, 0.5) 50%, transparent 80%),
+        radial-gradient(circle 50px at 50px 50px, $lite 99%, transparent 0), 
+        linear-gradient($lite 20px, transparent 0), 
+        linear-gradient($lite 20px, transparent 0), 
+        linear-gradient($lite 20px, transparent 0);
+    background-repeat: no-repeat;
+    background-size: 75px 100px, 100px 100px, 125px 20px, 260px 20px, 260px 20px;
+    background-position: -50% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
+    animation: animloader121 1s linear infinite;
+}
+
+.loader-122 {
+    width: 95%;
+    height: 100px;
+    background-image: 
+        linear-gradient(100deg, transparent, rgba($base, 0.5) 50%, transparent 80%),
+        linear-gradient($lite 100px, transparent 0), 
+        linear-gradient($lite 20px, transparent 0), 
+        linear-gradient($lite 20px, transparent 0), 
+        linear-gradient($lite 20px, transparent 0);
+    background-repeat: no-repeat;
+    background-size: 75px 100px, 100px 100px, 125px 20px, 260px 20px, 260px 20px;
+    background-position: -50% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
+    animation: animloader121 1s linear infinite;
+}
+.loader-123 {
+    width: 95%;
+    height: 100px;
+    position: relative;
+    background-image: 
+        linear-gradient(100deg, transparent, rgba($base, 0.5) 50%, transparent 80%),
+        linear-gradient($lite 20px, transparent 0), 
+        linear-gradient($lite 20px, transparent 0), 
+        linear-gradient($lite 20px, transparent 0);
+    background-repeat: no-repeat;
+    background-size: 75px 100px,  125px 20px, 260px 20px, 260px 20px;
+    background-position: 0% 0, 120px 0, 120px 40px, 120px 80px;
+    animation: animloader123 1s linear infinite;
+    &::after{
+      content: '';
+      width: 100px;
+      height: 100px;
+      border-radius: 8px;
+      background: $lite;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+}
+.loader-124 {
+    width: 320px;
+    height: 150px;
+    position: relative;
+    background: $lite;
+    &::after{
+      content: '';
+      width: calc(100% - 30px);
+      height: calc(100% - 30px);
+      top: 15px;
+      left: 15px;
+      position: absolute;
+      background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%),
+                        linear-gradient(#DDD 56px, transparent 0),
+                        linear-gradient(#DDD 24px, transparent 0),
+                        linear-gradient(#DDD 18px, transparent 0), 
+                        linear-gradient(#DDD 66px, transparent 0);
+      background-repeat: no-repeat;
+      background-size: 75px 130px, 55px 56px, 160px 30px, 260px 20px, 290px 56px;
+      background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
+      animation: animloader124 1s linear infinite;
+    }
+}
+.loader-125 {
+    width: 320px;
+    height: 150px;
+    position: relative;
+    background: $lite;
+    &::after{
+      content: '';
+      width: calc(100% - 30px);
+      height: calc(100% - 30px);
+      top: 15px;
+      left: 15px;
+      position: absolute;
+      background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%),
+                        radial-gradient(circle 28px at 28px 28px, #DDD 99%, transparent 0), 
+                        linear-gradient(#DDD 24px, transparent 0),
+                        linear-gradient(#DDD 18px, transparent 0), 
+                        linear-gradient(#DDD 66px, transparent 0);
+      background-repeat: no-repeat;
+      background-size: 75px 130px, 55px 56px, 160px 30px, 260px 20px, 290px 56px;
+      background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
+      animation: animloader124 1s linear infinite;
+    }
+}
+
+.loader-126 {
+    width: 164px;
+    height: 170px;
+    position: relative;
+    background: $lite;
+    &::after{
+      content: '';
+      width: calc(100% - 30px);
+      height: calc(100% - 30px);
+      top: 15px;
+      left: 15px;
+      position: absolute;
+      background-image: linear-gradient(90deg, transparent, rgba($lite, 0.5) 50%, transparent 100%),
+                        linear-gradient(#DDD 74px, transparent 0), 
+                        linear-gradient(#DDD 16px, transparent 0), 
+                        linear-gradient(#DDD 24px, transparent 0);
+      background-repeat: no-repeat;
+      background-size: 50px 170px, 100% 74px, 100% 16px, 100% 32px;
+      background-position: 0 0, 0 0, 0px 85px, 0px 110px;
+      animation: animloader126 1s linear infinite;
+    }
+}
+
+
+  /* keyFrames */ 
+  
+  @keyframes rotation {
+    0% { transform: rotate(0deg) }
+    100% { transform: rotate(360deg) }
+  }
+  @keyframes rotationBack {
+    0% { transform: rotate(0deg) }
+    100% { transform: rotate(-360deg) }
+  }
+  @keyframes rotationBreak {
+    0% { transform: rotate(0) }
+    25% { transform: rotate(90deg)}
+    50% { transform: rotate(180deg) }
+    75% { transform: rotate(270deg)}
+    100% { transform: rotate(360deg) }
+  }
+  
+  @keyframes zeroRotation {
+    0% { transform: scale(1) rotate(0deg) }
+    100% { transform: scale(0) rotate(360deg)}
+  }
+  
+  @keyframes shadowExpandX {
+    0% { 
+      box-shadow: 0 0, 0 0;  
+      color: rgba($lite, 0.2)
+    }
+    100% { 
+      box-shadow: -$size/2 0, $size/2 0; 
+      color: rgba($lite, .8) 
+    }
+  }
+  
+  @keyframes shadowPulse {
+    33% {   
+      background: $lite;
+      box-shadow:  -$size/2 0 $brand, $size/2 0 $lite;
+    } 
+    
+    66% {   
+      background: $brand;
+      box-shadow:  -$size/2 0 $lite, $size/2 0 $lite;
+    }  
+    100% {   
+      background: $lite;
+      box-shadow:  -$size/2 0 $lite, $size/2 0 $brand;
+    }
+    
+  }
+  
+  @keyframes shadowRolling {
+    0% {  box-shadow: 0px 0 rgba($lite, 0), 
+                      0px 0 rgba($lite, 0), 
+                      0px 0 rgba($lite, 0), 
+                      0px 0 rgba($lite, 0); 
+    }
+    12% {  box-shadow: 100px 0 rgba($lite, 1),
+                        0px 0 rgba($lite, 0),
+                        0px 0 rgba($lite, 0), 
+                        0px 0 rgba($lite, 0); 
+    }
+    25% {  box-shadow: 110px 0 rgba($lite, 1), 
+                        100px 0 rgba($lite, 1), 
+                        0px 0 rgba($lite, 0), 
+                        0px 0 rgba($lite, 0); 
+    }
+    36% {  box-shadow: 120px 0 rgba($lite, 1), 
+                        110px 0 rgba($lite, 1), 
+                        100px 0 rgba($lite, 1), 
+                        0px 0 rgba($lite, 0); 
+    }
+    50% {  box-shadow: 130px 0 rgba($lite, 1), 
+                        120px 0 rgba($lite, 1), 
+                        110px 0 rgba($lite, 1), 
+                        100px 0 rgba($lite, 1); 
+    }
+    62% {  box-shadow: 200px 0 rgba($lite, 0), 
+                        130px 0 rgba($lite, 1), 
+                        120px 0 rgba($lite, 1), 
+                        110px 0 rgba($lite, 1); 
+    }
+    75% {  box-shadow: 200px 0 rgba($lite, 0), 
+                        200px 0 rgba($lite, 0), 
+                        130px 0 rgba($lite, 1), 
+                        120px 0 rgba($lite, 1); 
+    }
+    87% {  box-shadow: 200px 0 rgba($lite, 0),
+                        200px 0 rgba($lite, 0), 
+                        200px 0 rgba($lite, 0), 
+                        130px 0 rgba($lite, 1); 
+    }
+    100% {  box-shadow: 200px 0 rgba($lite, 0), 
+                        200px 0 rgba($lite, 0), 
+                        200px 0 rgba($lite, 0), 
+                        200px 0 rgba($lite, 0); 
+    }
+    
+  }
+
+  @keyframes animloader14 {
+    0% { transform: scale(0); opacity: 1;}
+    100% { transform: scale(1); opacity: 0;}
+  }
+  
+
+  
+
+
+  
+  @keyframes scale50 {
+    0%, 100% { transform: scale(0)}
+    50% { transform: scale(1)}
+  }
+
+  @keyframes scaleOut {
+    0% { transform: scale(0);}
+    100% { transform: scale(1)}
+  }
+  
+  @keyframes animloader27 {
+    0% , 100%{ transform: scale(0); opacity: 1;}
+    50% { transform: scale(1); opacity: 0;}
+  }
+  @keyframes animloader28 {
+    0% { box-shadow: -($size*1.5) 0 $lite inset;}
+    100% { box-shadow: $size 0 $lite inset;}
+  }
+
+  @keyframes animloader38 {
+    50% { transform: scale(1) translate(-50% , -50%)}
+  }
+
+  @keyframes animloader42 { 
+    0% { box-shadow:-38px -6px, -14px 6px,  14px -6px}   
+    33% { box-shadow: -38px 6px, -14px -6px,  14px 6px}   
+    66% {box-shadow: -38px -6px, -14px 6px, 14px -6px} 
+    100% { box-shadow: -38px 6px, -14px -6px, 14px 6px}   
+  }
+  @keyframes animloader44 {
+    0% {  box-shadow:   14px 0 0 -2px,  38px 0 0 -2px, 
+                        -14px 0 0 -2px,  -38px 0 0 -2px
+    }   
+    
+    25% {  box-shadow:   14px 0 0 -2px,  38px 0 0 -2px, 
+                        -14px 0 0 -2px,  -38px 0 0 2px
+    }    
+    
+    50% {  box-shadow:   14px 0 0 -2px,  38px 0 0 -2px, 
+                        -14px 0 0 2px,  -38px 0 0 -2px
+    }  
+    75% {  box-shadow:   14px 0 0 2px,  38px 0 0 -2px, 
+                        -14px 0 0 -2px,  -38px 0 0 -2px
+    }  
+    100% {  box-shadow:   14px 0 0 -2px,  38px 0 0 2px, 
+                        -14px 0 0 -2px,  -38px 0 0 -2px
+    }   
+  }
+
+  @keyframes animloader45 { 
+    0% { box-shadow: -38px -12px ,  -14px 0,  14px 0, 38px 0 }   
+    33% { box-shadow: -38px 0px, -14px -12px,  14px 0, 38px 0 }   
+    66% { box-shadow: -38px 0px , -14px 0, 14px -12px, 38px 0 }   
+    100% { box-shadow: -38px 0 , -14px 0, 14px 0 , 38px -12px }   
+  }
+
+
+  @keyframes animloader46 {
+    0% { 
+      background: rgba($lite, 1);
+      box-shadow: 9px -19px 0 -1px rgba($lite, 0),
+       28px -19px 0 -2px rgba($lite, 0), 
+       39px -5px 0 -3px rgba($lite, 0), 
+       34px 10px 0 -4px rgba($lite, 0), 
+       22px 17px 0 -5px rgba($lite, 0), 
+       9px 16px 0 -6px rgba($lite, 0);
+     }
+    14% { 
+      background: rgba($lite, 0);
+      box-shadow: 9px -19px 0 -1px rgba($lite, 1),
+       28px -19px 0 -2px rgba($lite, 0), 
+       39px -5px 0 -3px rgba($lite, 0), 
+       34px 10px 0 -4px rgba($lite, 0), 
+       22px 17px 0 -5px rgba($lite, 0), 
+       9px 16px 0 -6px rgba($lite, 0);
+     }
+    28% { 
+      background: rgba($lite, 0);
+      box-shadow: 9px -19px 0 -1px rgba($lite, 0),
+       28px -19px 0 -2px rgba($lite, 1), 
+       39px -5px 0 -3px rgba($lite, 0), 
+       34px 10px 0 -4px rgba($lite, 0), 
+       22px 17px 0 -5px rgba($lite, 0), 
+       9px 16px 0 -6px rgba($lite, 0);
+     }
+    42% { 
+      background: rgba($lite, 0);
+      box-shadow: 9px -19px 0 -1px rgba($lite, 0),
+       28px -19px 0 -2px rgba($lite, 0), 
+       39px -5px 0 -3px rgba($lite, 1), 
+       34px 10px 0 -4px rgba($lite, 0), 
+       22px 17px 0 -5px rgba($lite, 0), 
+       9px 16px 0 -6px rgba($lite, 0);
+     }
+    57% { 
+      background: rgba($lite, 0);
+      box-shadow: 9px -19px 0 -1px rgba($lite, 0),
+       28px -19px 0 -2px rgba($lite, 0), 
+       39px -5px 0 -3px rgba($lite, 0), 
+       34px 10px 0 -4px rgba($lite, 1), 
+       22px 17px 0 -5px rgba($lite, 0), 
+       9px 16px 0 -6px rgba($lite, 0);
+     }
+    71% { 
+      background: rgba($lite, 0);
+      box-shadow: 9px -19px 0 -1px rgba($lite, 0),
+       28px -19px 0 -2px rgba($lite, 0), 
+       39px -5px 0 -3px rgba($lite, 0), 
+       34px 10px 0 -4px rgba($lite, 0), 
+       22px 17px 0 -5px rgba($lite, 1), 
+       9px 16px 0 -6px rgba($lite, 0);
+     }
+    85% { 
+      background: rgba($lite, 0);
+      box-shadow: 9px -19px 0 -1px rgba($lite, 0),
+       28px -19px 0 -2px rgba($lite, 0), 
+       39px -5px 0 -3px rgba($lite, 0), 
+       34px 10px 0 -4px rgba($lite, 0), 
+       22px 17px 0 -5px rgba($lite, 0), 
+       9px 16px 0 -6px rgba($lite, 1);
+     }
+    100% { 
+      background: rgba($lite, 0.5);
+      box-shadow: 9px -19px 0 -1px rgba($lite, 0),
+       28px -19px 0 -2px rgba($lite, 0), 
+       39px -5px 0 -3px rgba($lite, 0), 
+       34px 10px 0 -4px rgba($lite, 0), 
+       22px 17px 0 -5px rgba($lite, 0), 
+       9px 16px 0 -6px rgba($lite, 0);
+     }
+
+  }
+
+  @keyframes animloader34 {
+    0% { border-color: rgba($lite, 0.15)  rgba($lite, 0.25)  rgba($lite, 0.35)  rgba($lite, 0.75);}
+    33% { border-color: rgba($lite, 0.75)  rgba($lite, 0.15)  rgba($lite, 0.25)  rgba($lite, 0.35);}
+    66% { border-color: rgba($lite, 0.35)  rgba($lite, 0.75)  rgba($lite, 0.15)  rgba($lite, 0.25);}
+    100% { border-color: rgba($lite, 0.25)  rgba($lite, 0.35)  rgba($lite, 0.75)  rgba($lite, 0.15);}
+  }
+
+
+
+  
+  @keyframes animloader51 {
+    0% { border-color: rgba($lite, 1)  rgba($lite, 0)  rgba($lite, 0)  rgba($lite, 0);}
+    33% { border-color: rgba($lite, 1)  rgba($lite, 1)  rgba($lite, 0)  rgba($lite, 0);}
+    66% { border-color: rgba($lite, 1)  rgba($lite, 1)  rgba($lite, 1)  rgba($lite, 0);}
+    100% { border-color: rgba($lite, 1)  rgba($lite, 1)  rgba($lite, 1)  rgba($lite, 1);}
+  }
+
+
+  @keyframes animloader57 {
+    0% {  box-shadow: 0 0, 0 0, 0 0}
+    33% {  box-shadow: 24px 0px, 24px 0px, 24px 0px}
+    66% {  box-shadow: 24px 24px, 24px 24px, 24px 0px}
+    100% {  box-shadow: 0px 24px, 24px 24px, 24px 0px}
+  }
+  
+  @keyframes animloader58 {
+    0% , 32%  { box-shadow: 0 24px rgba($lite, 1), 24px 24px rgba($lite, 0), 24px 48px rgba($lite, 0), 0px 48px rgba($lite, 0) }
+    33% , 65%  { box-shadow: 0 24px rgba($lite, 1), 24px 24px rgba($lite, 1), 24px 48px rgba($lite, 0), 0px 48px rgba($lite, 0) }
+    66% , 99%  { box-shadow: 0 24px rgba($lite, 1), 24px 24px rgba($lite, 1), 24px 48px rgba($lite, 1), 0px 48px rgba($lite, 0) }
+    100%   { box-shadow: 0 24px rgba($lite, 1), 24px 24px rgba($lite, 1), 24px 48px rgba($lite, 1), 0px 48px rgba($lite, 1) }
+  }
+  @keyframes animloader58m{
+    0%{ transform: translate(0, 0) rotateX(0) rotateY(0)}
+    33%{ transform: translate(100%, 0) rotateX(0) rotateY(180deg)}
+    66%{ transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)}
+    100%{ transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)}
+  }
+
+  
+  @keyframes flipX {
+    0%{ transform: perspective(200px) rotateX(0deg) rotateY(0deg); }
+    50%{ transform: perspective(200px) rotateX(-180deg) rotateY(0deg); }
+    100%{ transform: perspective(200px) rotateX(-180deg) rotateY(-180deg) }
+  }
+  @keyframes fill {
+    0%{ box-shadow: 0 0  inset }
+    100%{ box-shadow: 0 -48px inset }
+  }
+
+  @keyframes fillX {
+    0%{ box-shadow: 0 0 inset }
+    100%{ box-shadow: 48px 0 inset }
+  }
+
+  @keyframes animloader56{
+    0%{ transform: translate(0, 0) rotateX(0) rotateY(0)}
+    25%{ transform: translate(100%, 0) rotateX(0) rotateY(180deg)}
+    50%{ transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)}
+    75%{ transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)}
+    100%{ transform:  translate(0, 0) rotateX(0) rotateY(360deg) }
+  }
+
+
+  @keyframes animloader59 {
+    0%  { box-shadow: 0 24px rgba($lite, 0), 24px 24px rgba($lite, 0), 24px 48px rgba($lite, 0), 0px 48px rgba($lite, 0) }
+    12%  { box-shadow: 0 24px rgba($lite, 1), 24px 24px rgba($lite, 0), 24px 48px rgba($lite, 0), 0px 48px rgba($lite, 0) }
+    25% { box-shadow: 0 24px rgba($lite, 1), 24px 24px rgba($lite, 1), 24px 48px rgba($lite, 0), 0px 48px rgba($lite, 0) }
+    37% { box-shadow: 0 24px rgba($lite, 1), 24px 24px rgba($lite, 1), 24px 48px rgba($lite, 1), 0px 48px rgba($lite, 0) }
+    50% { box-shadow: 0 24px rgba($lite, 1), 24px 24px rgba($lite, 1), 24px 48px rgba($lite, 1), 0px 48px rgba($lite, 1) }
+    62% { box-shadow: 0 24px rgba($lite, 0), 24px 24px rgba($lite, 1), 24px 48px rgba($lite, 1), 0px 48px rgba($lite, 1) }
+    75% { box-shadow: 0 24px rgba($lite, 0), 24px 24px rgba($lite, 0), 24px 48px rgba($lite, 1), 0px 48px rgba($lite, 1) }
+    87%{ box-shadow: 0 24px rgba($lite, 0), 24px 24px rgba($lite, 0), 24px 48px rgba($lite, 0), 0px 48px rgba($lite, 1) }
+    100%{ box-shadow: 0 24px rgba($lite, 0), 24px 24px rgba($lite, 0), 24px 48px rgba($lite, 0), 0px 48px rgba($lite, 0) }
+}
+
+@keyframes animloader60 {
+  0%   { top: 0;   color: rgba($lite, 1) }
+  50%  { top: 30px;   color: rgba($lite, 0.2) }
+  100% { top: 0;    color: rgba($lite, 1)}
+}
+
+  @keyframes animloader61 {
+    0% { height: $size;}
+    100% { height: $size / 10;}
+  }
+  @keyframes animloader61m {
+    0% { height: 40px; transform: translateY(0);}
+    100% { height: 10px; transform: translateY(30px)}
+  }
+
+  @keyframes animloader63 {
+  0% { box-shadow: 20px 0 rgba($lite, 0.25), 40px 0 rgba($lite, 1), 60px 0 rgba($lite, 1),}
+  50% { box-shadow: 20px 0 rgba($lite, 1), 40px 0 rgba($lite, 0.25), 60px 0 rgba($lite, 1),}
+  100% { box-shadow: 20px 0 rgba($lite, 1), 40px 0 rgba($lite, 1), 60px 0 rgba($lite, 0.25),}
+  }
+@keyframes animloader64 {
+  0% { box-shadow: 20px -10px, 40px 10px, 60px 0px}
+  25% { box-shadow: 20px 0px, 40px  0px, 60px 10px}
+  50% { box-shadow: 20px 10px, 40px -10px, 60px 0px}
+  75% { box-shadow: 20px 0px, 40px 0px, 60px -10px}
+  100% { box-shadow: 20px -10px, 40px 10px, 60px 0px}
+ }
+
+@keyframes animloader65 {
+  0% { box-shadow:  -10px 20px, 10px 35px , 0px 50px}
+  25% { box-shadow: 0px 20px ,  0px 35px, 10px 50px}
+  50% { box-shadow: 10px 20px, -10px 35px, 0px 50px}
+  75% { box-shadow: 0px 20px, 0px  35px, -10px 50px}
+  100% { box-shadow:-10px 20px, 10px  35px, 0px 50px}
+ }
+@keyframes animloader66 {
+  0% { width: $size/10;}
+  100% { width: $size;}
+}
+
+
+@keyframes animloader68 {
+  0% { box-shadow: 20px 0 rgba($lite, 0), 40px 0 rgba($lite, 0), 60px 0 rgba($lite, 0), 80px 0 rgba($lite, 0), 100px 0 rgba($lite, 0)}
+  20% { box-shadow: 20px 0 rgba($lite, 1), 40px 0 rgba($lite, 0), 60px 0 rgba($lite, 0), 80px 0 rgba($lite, 0), 100px 0 rgba($lite, 0)}
+  40% { box-shadow: 20px 0 rgba($lite, 1), 40px 0 rgba($lite, 1), 60px 0 rgba($lite, 0), 80px 0 rgba($lite, 0), 100px 0 rgba($lite, 0)}
+  60% { box-shadow: 20px 0 rgba($lite, 1), 40px 0 rgba($lite, 1), 60px 0 rgba($lite, 1), 80px 0 rgba($lite, 0), 100px 0 rgba($lite, 0)}
+  80% { box-shadow: 20px 0 rgba($lite, 1), 40px 0 rgba($lite, 1), 60px 0 rgba($lite, 1), 80px 0 rgba($lite, 1), 100px 0 rgba($lite, 0)}
+  100% { box-shadow: 20px 0 rgba($lite, 1), 40px 0 rgba($lite, 1), 60px 0 rgba($lite, 1), 80px 0 rgba($lite, 1), 100px 0 rgba($lite, 1)}
+}
+
+@keyframes animloader69 {
+  0% {   width: 20px; }
+  100% { width: $size;}
+ }
+
+
+ @keyframes animloader71 {
+  0% { left:0 ;  transform: translateX(-100%)}
+  100% { left:100% ;  transform: translateX(0%)}
+ }
+
+
+   @keyframes animloader89{
+    0%{ box-shadow: 11px 0 rgba($lite, 0), 22px 0 rgba($lite, 0), 33px 0 rgba($lite, 0), 44px 0 rgba($lite, 0)}
+    25%{ box-shadow: 11px 0 rgba($lite, 1), 22px 0 rgba($lite, 0), 33px 0 rgba($lite, 0), 44px 0 rgba($lite, 0)}
+    50%{ box-shadow: 11px 0 rgba($lite, 1), 22px 0 rgba($lite, 1), 33px 0 rgba($lite, 0), 44px 0 rgba($lite, 0)}
+    75%{ box-shadow: 11px 0 rgba($lite, 1), 22px 0 rgba($lite, 1), 33px 0 rgba($lite, 1), 44px 0 rgba($lite, 0)}
+    100%{ box-shadow: 11px 0 rgba($lite, 1), 22px 0 rgba($lite, 1), 33px 0 rgba($lite, 1), 44px 0 rgba($lite, 1)}
+
+  }
+  @keyframes animloader91 {
+    0%{ box-shadow: 0 0  inset }
+    100%{ box-shadow: 0 -70px inset }
+  }
+
+  @keyframes animloader92 {
+    0%{ box-shadow: 2px 0px rgba($lite, 0), 12px 0px rgba($lite , 0.3), 20px 0px rgba($lite, 0) }
+    50%{ box-shadow: 2px -5px rgba($lite, 0.5), 12px -3px rgba($lite, 0.5), 20px -2px rgba($lite, 0.6) }
+    100%{ box-shadow: 2px -8px rgba($lite, 0), 12px -5px rgba($lite, 0), 20px -5px rgba($lite, 0) }
+
+  }
+  @keyframes animloader93 {
+    0% { transform: rotate(-70deg) }
+    10% { transform: rotate(-40deg)}
+    20% , 45% , 35%  { transform: rotate(-10deg) }
+    40% , 30%{ transform: rotate(-30deg) }
+    50% , 60%{ transform: rotate(20deg); }
+    55% , 65% , 75% { transform: rotate(40deg); }
+    70% { transform: rotate(45deg); }
+    85%, 90% { transform: rotate(50deg); }
+    95% { transform: rotate(75deg); }
+    100% , 93%{ transform: rotate(70deg); }
+  }
+
+  @keyframes animloader94 {
+    0% { transform: translate(-10px , -10px) }
+    25% { transform: translate(-10px , 10px) }
+    50% { transform: translate(10px , 10px) }
+    75% { transform: translate(10px , -10px) }
+    100% { transform: translate(-10px , -10px) }
+  }
+
+
+  @keyframes animloader98 {
+    0% { background-position: 0px 80px}
+    100% { background-position: 0px 0px}
+  }
+  @keyframes animloader98s {
+    0%  { box-shadow: 4px -10px rgba($lite, 0),   6px -0px rgba($lite, 0),      8px -15px rgba($lite, 0),     12px -0px rgba($lite, 0)   }
+    20% { box-shadow: 4px -20px rgba($lite, 0),   8px -10px rgba($lite, 0),     10px -30px rgba($lite, 0.5),  15px -5px rgba($lite, 0)   }
+    40% { box-shadow: 2px -40px rgba($lite, 0.5), 8px -30px rgba($lite, 0.4),   8px -60px rgba($lite, 0.5),   12px -15px rgba($lite, 0.5)}
+    60% { box-shadow: 4px -60px rgba($lite, 0.5), 6px -50px rgba($lite, 0.4),   10px -90px rgba($lite, 0.5),  15px -25px rgba($lite, 0.5)}
+    80% { box-shadow: 2px -80px rgba($lite, 0.5), 4px -70px rgba($lite, 0.4),   8px -120px rgba($lite, 0),    12px -35px rgba($lite, 0.5)}
+    100%{ box-shadow: 4px -100px rgba($lite, 0),  8px -90px rgba($lite, 0),     10px -120px rgba($lite, 0),   15px -45px rgba($lite, 0)  }
+  }
+@keyframes animloader99{
+  0% { box-shadow:  0px 0px  inset}
+  100% { box-shadow:  0px -80px  inset}
+}
+
+@keyframes animloader100 {
+  0%  {  box-shadow: 
+          25px 0 rgba($lite, 1),
+          50px 0 rgba($lite, 1),
+          75px 0 rgba($lite, 1), 
+         100px 0 rgba($lite, 1), 
+         125px 0 rgba($lite, 1), 
+         150px 0 rgba($lite, 1),
+          25px 0 rgba($lite, 1),
+          50px 0 rgba($lite, 1),
+          75px 0 rgba($lite, 1), 
+         100px 0 rgba($lite, 1), 
+         125px 0 rgba($lite, 1), 
+         150px 0 rgba($lite, 1)
+      }
+  50%  {  box-shadow: 
+          25px 20px rgba($lite, 1),
+          50px 60px rgba($lite, 0),
+          75px 30px rgba($lite, 0), 
+         100px 70px rgba($lite, 0), 
+         125px 40px rgba($lite, 1), 
+         150px 60px rgba($lite, 0),
+          25px 20px rgba($lite, 1),
+          50px 30px rgba($lite, 1),
+          75px 10px rgba($lite, 1), 
+         100px 30px rgba($lite, 1), 
+         125px 30px rgba($lite, 0), 
+         150px 30px rgba($lite, 0)
+      }
+  100%  {  box-shadow: 
+          25px 60px rgba($lite, 0),
+          50px 60px rgba($lite, 0),
+          75px 50px rgba($lite, 0), 
+         100px 70px rgba($lite, 0), 
+         125px 70px rgba($lite, 0), 
+         150px 60px rgba($lite, 0),
+          25px 80px rgba($lite, 0),
+          50px 80px rgba($lite, 0),
+          75px 70px rgba($lite, 0), 
+         100px 60px rgba($lite, 0), 
+         125px 30px rgba($lite, 0), 
+         150px 30px rgba($lite, 0)
+      }
+  }
+
+  @keyframes animloader105 {
+    0%{ height: 64px; }
+    90%, 100% {  height: 0px; }
+  }
+
+@keyframes animloader106back {
+  0% , 30%, 70%  { transform: translateY(0px)}
+ 20%, 40%,  100% { transform: translateY(-5px)}
+}
+
+@keyframes animloader106 {
+  0% {  
+    box-shadow: 4px 4px 12px 2px rgba($brand, 0.75);
+    width: 34px;
+    height: 34px;
+    background-position: -44px -44px;
+    background-size: 100px 100px;}
+  100% { 
+    box-shadow: 2px 2px 8px 0px rgba($brand, 0.5);
+    width: 30px;
+    height: 28px;  
+    background-position: -36px -36px; 
+    background-size: 80px 80px;
+  }
+}
+
+@keyframes animloader108 {
+  0% {  box-shadow: 0 0 0 -2px , 0 0 0 -2px , 0 0 0 -5px , 0 0 0 -5px }
+  20% {  box-shadow: 40px -1px 0 -2px , 0 0 0 -2px , 40px -1px 0 -5px , 0 0 0 -5px}
+  40% {  box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px ,  40px -1px 0 -5px ,-40px -1px 0 -5px}
+  60% {  box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px ,   23px -29px 0 -5px ,-40px -1px 0 -5px}
+  80% , 95% {  box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px ,   23px -29px 0 -5px , -23px -29px 0 -5px}
+  100% {  box-shadow: 40px -1px 0 -2px rgba($lite, 0), -40px -1px 0 -2px rgba($lite, 0),   23px -29px 0 -5px rgba($lite, 0), -23px -29px 0 -5px rgba($lite, 0)}
+}
+
+@keyframes animloader108s {
+  0% {  box-shadow: 0 0 0 -2px , 0 0 0 -2px , 0 0 0 -5px , 0 0 0 -5px }
+  20% {  box-shadow: 40px 2px 0 -2px  , 0 0 0 -2px , 40px 2px 0 -5px , 0 0 0 -5px }
+  40% {  box-shadow: 40px 2px 0 -2px  , -40px 2px 0 -2px , 40px 2px 0 -5px , -40px 2px 0 -5px }
+  60% {  box-shadow: 40px 2px 0 -2px  , -40px 2px 0 -2px , 23px -23px 0 -5px , -40px 2px 0 -5px }
+  80%, 95% {  box-shadow: 40px 2px 0 -2px  , -40px 2px 0 -2px , 23px -23px 0 -5px , -23px -23px 0 -5px }
+  100% {  box-shadow: 40px 2px 0 -2px  rgba($lite, 0), -40px 2px 0 -2px rgba($lite, 0), 23px -23px 0 -5px rgba($lite, 0), -23px -23px 0 -5px rgba($lite, 0)}
+}
+
+@keyframes animloader115 {
+    0% { box-shadow: 10px 0 rgba($lite, 0), 20px 0 rgba($lite, 0);}
+    50% { box-shadow: 10px 0 rgba($lite, 1), 20px 0 rgba($lite, 0);}
+    100% { box-shadow: 10px 0 rgba($lite, 1), 20px 0 rgba($lite, 1);}
+}
+
+
+@keyframes animloader116 {
+    0%  { top: 8px; transform: rotate(0deg) scale(1);}
+    100% { top: 0px; transform: rotate(180deg) scale(1.5);}
+}
+@keyframes animloader117 {
+    0%  { box-shadow: 0 0 inset;}
+    100%  { box-shadow: 0 -28px inset;}
+}
+
+  @keyframes animMarker {
+    0% { transform: rotate(45deg) translate(5px , 5px) }
+    100% { transform: rotate(45deg) translate(-5px , -5px) }
+  }
+  @keyframes animShadow {
+    0% { transform: scale(0.5) }
+    100% { transform: scale(1) }
+  }
+
+@keyframes bump {
+    0% {  transform: translate(-50%, 5px) }
+    100% {  transform: translate(-50% , -5px ) }
+  }
+
+
+@keyframes animPend {
+    0% {  transform: rotate(22deg);}
+    50% {  transform: rotate(0deg);}
+  }
+@keyframes animPend2 {
+    0% , 55%{  transform: rotate(0deg);}
+    100% {  transform: rotate(-22deg);}
+  }
+
+
+@keyframes animloader85 {
+  0% , 100% {   transform: translateX(-150%)}
+  50% {   transform: translateX(150%)}
+ }
+
+@keyframes barStripe {
+    0% { background-position: 1em 0; }
+    100% { background-position: 0 0; }
+}
+@keyframes raceBoard {
+    0% { background-position: 0 0, 16px 16px}
+    100% { background-position: 32px 0px, 48px 16px;}
+}
+@keyframes fadePush {
+  0% {  transform: translate(-50% , -15px ); opacity: 0; }
+  50% {  transform: translate(-50% , 0px ); opacity: 1; }
+  100%{  transform: translate(-50%, 15px); opacity: 0; }
+}
+@keyframes fadePull {
+  0%{  transform: translate(-50%, 15px); opacity: 0; }
+  50% {  transform: translate(-50% , 0px ); opacity: 1; }
+  100% {  transform: translate(-50% , -15px ); opacity: 0; }
+}
+ 
+@keyframes hitZak {
+  0% { left:0 ;  transform: translateX(-1%)}
+  100% { left:100% ;  transform: translateX(-99%)}
+ }
+
+@keyframes animFw {
+  0% { width: 0}
+  100% { width:100%}
+ }
+@keyframes coli1 {
+  0% { transform: rotate(-45deg) translateX(0px); opacity: 0.7;}
+  100% { transform: rotate(-45deg) translateX(-45px); opacity: 0;}
+ }
+@keyframes coli2 {
+  0% { transform: rotate(45deg) translateX(0px); opacity: 1;}
+  100% { transform: rotate(45deg) translateX(-45px); opacity: 0.7;}
+ }
+
+
+@keyframes animloader121 {
+    0% { background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;}
+    100% { background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;}
+}
+@keyframes animloader123 {
+    0% { background-position: 0% 0, 120px 0, 120px 40px, 120px 80px}
+    100% { background-position: 100% 0, 120px 0, 120px 40px, 120px 80px}
+}
+@keyframes animloader124 {
+    0% { background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px}
+    100% { background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px}
+}
+@keyframes animloader126 {
+    0% { background-position:  0 0, 0 0, 0px 85px, 0px 110px}
+    100% { background-position:  150% 0, 0 0, 0px 85px, 0px 110px}
+}
+
+@keyframes floating {
+    0%  { transform: translateY(0);}
+    100%  { transform: translateY(-25px);}
+}
+
+@keyframes animloader110 {
+    0%  { height: 100% }
+    100%  { height: 0% }
+}
+
+@keyframes animloader111 {
+  0%  { width: 0% }
+  100%  { width: 100% }
+}
+@keyframes animloader113 {
+  0%  { transform: translate(0px, 0px) scaleX(1) }
+  14%  { transform: translate(-12px, -16px) scaleX(1.05) }
+  28%  { transform: translate(-27px, -28px) scaleX(1.07) }
+  42%  { transform: translate(-46px, -35px) scaleX(1.1) }
+  57%  { transform: translate(-70px, -37px) scaleX(1.1) }
+  71%  { transform: translate(-94px, -32px) scaleX(1.07) }
+  85%  { transform: translate(-111px, -22px) scaleX(1.05) }
+  100%  { transform: translate(-125px, -9px) scaleX(1) }  
+  }
+  
+  @keyframes animloader113L {
+      0%   { box-shadow: 0 -6px, -122.9px -8px}
+     25%, 75%  { box-shadow: 0 0px, -122.9px -8px}
+      100%   { box-shadow: 0 0px, -122.9px -16px}
+  }
+@keyframes animloader114 {
+  0%  { transform: translateY(8px) scaleY(1) scaleX(1.25)}
+  25%, 75% { transform: translateY(-5px) scaleY(1.2) scaleX(1)}
+  50%  { transform: translateY(-10px) scaleY(1) scaleX(1)}
+  100% { transform: translateY(8px) scaleY(0.8) scaleX(0.8)}
+  }
+  
+@keyframes animloader118 {
+    0%  { transform: scale(0.8);}
+    100%  { transform: scale(1.2);}
+}
+  
+@keyframes animloader119 {
+    0%  { filter: blur(0px); transform: skew(0deg);}
+    100%  { filter: blur(3px); transform: skew(-4deg);}
+}
diff --git a/cssfrosted-glass/README.markdown b/cssfrosted-glass/README.markdown
new file mode 100644
index 0000000..9bfa08a
--- /dev/null
+++ b/cssfrosted-glass/README.markdown
@@ -0,0 +1,4 @@
+# CSS - Frosted Glass
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/kylewetton/pen/bGbaazX](https://codepen.io/kylewetton/pen/bGbaazX).
+
+ 
\ No newline at end of file
diff --git a/cssfrosted-glass/dist/index.html b/cssfrosted-glass/dist/index.html
new file mode 100644
index 0000000..35f0757
--- /dev/null
+++ b/cssfrosted-glass/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CSS - Frosted Glass</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="drop-shadow">
+<div class="glass"></div>
+  <span>GLASS</span>
+  </div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/cssfrosted-glass/dist/style.css b/cssfrosted-glass/dist/style.css
new file mode 100644
index 0000000..e8e4bca
--- /dev/null
+++ b/cssfrosted-glass/dist/style.css
@@ -0,0 +1,81 @@
+@import url("https://fonts.googleapis.com/css?family=Rajdhani:300&display=swap");
+body, html {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/jess-harding-lqT6NAmTaiY-unsplash.jpg");
+  background-size: cover;
+  background-position: center;
+  font-family: 'Rajdhani', sans-serif;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+.glass {
+  height: 100%;
+  width: 100%;
+  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/jess-harding-lqT6NAmTaiY-unsplash.jpg");
+  background-size: cover;
+  background-position: center;
+  clip-path: inset(10em);
+  filter: blur(20px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.drop-shadow {
+  height: 100%;
+  width: 100%;
+  filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.3));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.drop-shadow:before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 10em;
+  height: calc(100% - 20em);
+  width: calc(100% - 20em);
+  border-top: 2px solid rgba(225, 225, 225, 0.2);
+  border-left: 1px solid rgba(225, 225, 225, 0.1);
+  border-right: 1px solid rgba(225, 225, 225, 0.3);
+  z-index: 2;
+}
+.drop-shadow > span {
+  position: absolute;
+  z-index: 5;
+  color: white;
+  font-size: 4em;
+  letter-spacing: 0.75em;
+  padding-left: 0.375em;
+}
+
+@media (max-width: 980px) {
+  .glass {
+    clip-path: inset(5em);
+  }
+
+  .drop-shadow:before {
+    top: 5em;
+    width: calc(100% - 10em);
+  }
+  .drop-shadow > span {
+    font-size: 4em;
+  }
+}
+@media (max-width: 640px) {
+  .drop-shadow > span {
+    font-size: 2em;
+  }
+}
diff --git a/cssfrosted-glass/license.txt b/cssfrosted-glass/license.txt
new file mode 100644
index 0000000..36dbbd2
--- /dev/null
+++ b/cssfrosted-glass/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Kyle Wetton (https://codepen.io/kylewetton/pen/bGbaazX)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/cssfrosted-glass/src/index.html b/cssfrosted-glass/src/index.html
new file mode 100644
index 0000000..6f7ea01
--- /dev/null
+++ b/cssfrosted-glass/src/index.html
@@ -0,0 +1,4 @@
+<div class="drop-shadow">
+<div class="glass"></div>
+  <span>GLASS</span>
+  </div>
\ No newline at end of file
diff --git a/cssfrosted-glass/src/style.scss b/cssfrosted-glass/src/style.scss
new file mode 100644
index 0000000..2decbca
--- /dev/null
+++ b/cssfrosted-glass/src/style.scss
@@ -0,0 +1,97 @@
+@import url('https://fonts.googleapis.com/css?family=Rajdhani:300&display=swap');
+
+$blur: 20px;
+$shadow-opacity: 0.30;
+$image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/jess-harding-lqT6NAmTaiY-unsplash.jpg';
+
+
+body, html {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+
+body {
+   display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url($image);
+  background-size: cover;
+  background-position: center;
+font-family: 'Rajdhani', sans-serif;
+
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+.glass {
+  height: 100%;
+  width: 100%;
+   background-image: url($image);
+  background-size: cover;
+  background-position: center;
+  clip-path: inset(10em);
+  filter: blur($blur);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.drop-shadow {
+  height: 100%;
+  width: 100%;
+filter:  drop-shadow(0px 20px 10px rgba(0, 0, 0, $shadow-opacity));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+   &:before {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 10em;
+     height: calc(100% - 20em);
+    width: calc(100% - 20em);
+     border-top: 2px solid rgba(225,225,225, 0.2);
+    border-left: 1px solid rgba(225,225,225, 0.1);
+     border-right: 1px solid rgba(225,225,225, 0.3);
+     z-index: 2;
+   //  filter: blur(1px);
+  }
+    
+  
+  > span {
+    position: absolute;
+    z-index: 5;
+    color: white;
+    font-size: 4em;
+    letter-spacing: 0.75em;
+    padding-left: 0.375em;
+  }
+}
+
+@media (max-width: 980px) {
+  .glass {
+     clip-path: inset(5em);
+  }
+  .drop-shadow {
+    &:before {
+      top: 5em;
+      width: calc(100% - 10em);
+    }
+    > span {
+      font-size: 4em;
+    }
+  }
+}
+
+@media (max-width: 640px) {
+  
+  .drop-shadow {
+    > span {
+      font-size: 2em;
+    }
+  }
+}
\ No newline at end of file
diff --git a/csspotlight/README.markdown b/csspotlight/README.markdown
new file mode 100644
index 0000000..6a6a8c3
--- /dev/null
+++ b/csspotlight/README.markdown
@@ -0,0 +1,5 @@
+# CSSpotlight
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/qBjpRrv](https://codepen.io/cobra_winfrey/pen/qBjpRrv).
+
+CSS spotlight using cursor-positioned mask & clip-path
diff --git a/csspotlight/dist/index.html b/csspotlight/dist/index.html
new file mode 100644
index 0000000..16cbeb7
--- /dev/null
+++ b/csspotlight/dist/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSSpotlight</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="light">
+  <strong><span>CRUSH</span><span>KILL</span><span>DESTROY<span></strong>
+</div>
+<div id="dark">
+  <strong><span>Live</span><span>Laugh</span><span>Love</span></strong>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/csspotlight/dist/script.js b/csspotlight/dist/script.js
new file mode 100644
index 0000000..3877b85
--- /dev/null
+++ b/csspotlight/dist/script.js
@@ -0,0 +1,23 @@
+var pointerX = 0;
+var pointerY = 0;
+var width = window.innerWidth / 2;
+var height = window.innerHeight / 2;
+var body = document.body;
+var light = document.getElementById("light");
+
+window.addEventListener(
+  "resize",
+  function (event) {
+    width = window.innerWidth / 2;
+    height = window.innerHeight / 2;
+  },
+  true
+);
+
+document.onmousemove = function (event) {
+  pointerX = (width - event.pageX) * -1;
+  pointerY = (height - event.pageY) * -1;
+  body.style.setProperty("--x", pointerX + "px");
+
+  body.style.setProperty("--y", pointerY + "px");
+};
\ No newline at end of file
diff --git a/csspotlight/dist/style.css b/csspotlight/dist/style.css
new file mode 100644
index 0000000..8ef7bc9
--- /dev/null
+++ b/csspotlight/dist/style.css
@@ -0,0 +1,80 @@
+@import url("https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap");
+@font-face {
+  font-family: "Crass";
+  src: url("https://assets.codepen.io/383755/Crass.woff2") format("woff2");
+  font-display: swap;
+}
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: #000;
+  flex-wrap: wrap;
+  font-family: "Berkshire Swash";
+  overflow: hidden;
+  --x: 0px;
+  --y: 0px;
+}
+body:hover div#light {
+  transition: opacity 1s ease-in-out, filter 1s ease-in-out;
+  opacity: 1;
+  filter: blur(0px);
+}
+body p {
+  color: #000;
+  position: relative;
+  z-index: 9;
+}
+body div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  flex-wrap: wrap;
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  z-index: 0;
+}
+body div strong {
+  font-size: 13vw;
+  width: 32.5vw;
+  text-align: left;
+  line-height: 0.8;
+}
+body div strong span {
+  display: block;
+}
+body div strong span:nth-of-type(odd) {
+  transform: translateX(-5vw);
+}
+body div strong span:last-of-type {
+  transform: translate(-5vw, -1.5vw);
+}
+body div#dark {
+  background: radial-gradient(circle at calc(50% + var(--x)) calc(50% + var(--y)), rgba(0, 0, 0, 0.75) 5vw, rgba(0, 0, 0, 0.85) 75vw), url("https://static.vecteezy.com/system/resources/previews/001/211/723/non_2x/floral-repeating-pattern-with-rose-flower-in-watercolor-style-vector.jpg");
+}
+body div#dark strong {
+  color: #ceb2b4;
+  text-shadow: clamp(-5px, calc((var(--x) / -100)), 5px) clamp(-5px, calc((var(--y) / -100)), 5px) 0px #a67477;
+}
+body div#light {
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
+  filter: blur(5px);
+  z-index: 2;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), white), url("https://wallpaperaccess.com/full/215335.jpg");
+  -webkit-mask: radial-gradient(circle at calc(50% + var(--x)) calc(50% + var(--y) - 2.25vw), #000 9vw, transparent 9vw), linear-gradient(to bottom, transparent calc(50% + var(--y)), #000 calc(50% + var(--y)), #000 calc(57.5% + var(--y)), rgba(0, 0, 0, 0.15));
+  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(50% + var(--y)), calc(58.75% + var(--x)) calc(50% + var(--y)), 50% 110%, calc(41.25% + var(--x)) calc(50% + var(--y)), 0 calc(50% + var(--y)));
+          clip-path: polygon(0 0, 100% 0, 100% calc(50% + var(--y)), calc(58.75% + var(--x)) calc(50% + var(--y)), 50% 110%, calc(41.25% + var(--x)) calc(50% + var(--y)), 0 calc(50% + var(--y)));
+}
+body div#light strong {
+  font-family: "Crass";
+  font-size: 10vw;
+  line-height: 1;
+  margin: 2.5vw 0 0;
+}
+body div#light strong span:last-of-type {
+  transform: translate(-5vw, -1vw);
+}
\ No newline at end of file
diff --git a/csspotlight/license.txt b/csspotlight/license.txt
new file mode 100644
index 0000000..27e4629
--- /dev/null
+++ b/csspotlight/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/qBjpRrv)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/csspotlight/src/index.html b/csspotlight/src/index.html
new file mode 100644
index 0000000..7c80355
--- /dev/null
+++ b/csspotlight/src/index.html
@@ -0,0 +1,6 @@
+<div id="light">
+  <strong><span>CRUSH</span><span>KILL</span><span>DESTROY<span></strong>
+</div>
+<div id="dark">
+  <strong><span>Live</span><span>Laugh</span><span>Love</span></strong>
+</div>
\ No newline at end of file
diff --git a/csspotlight/src/script.js b/csspotlight/src/script.js
new file mode 100644
index 0000000..bb56245
--- /dev/null
+++ b/csspotlight/src/script.js
@@ -0,0 +1,23 @@
+var pointerX = 0;
+var pointerY = 0;
+var width = window.innerWidth / 2;
+var height = window.innerHeight / 2;
+var body = document.body;
+var light = document.getElementById("light");
+
+window.addEventListener(
+  "resize",
+  function (event) {
+    width = window.innerWidth / 2;
+    height = window.innerHeight / 2;
+  },
+  true
+);
+
+document.onmousemove = function (event) {
+  pointerX = (width - event.pageX) * -1;
+  pointerY = (height - event.pageY) * -1;
+  body.style.setProperty("--x", pointerX + "px");
+
+  body.style.setProperty("--y", pointerY + "px");
+};
diff --git a/csspotlight/src/style.scss b/csspotlight/src/style.scss
new file mode 100644
index 0000000..e2b5135
--- /dev/null
+++ b/csspotlight/src/style.scss
@@ -0,0 +1,115 @@
+@import url("https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap");
+
+@font-face {
+  font-family: "Crass";
+  src: url("https://assets.codepen.io/383755/Crass.woff2") format("woff2");
+  font-display: swap;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: #000;
+  flex-wrap: wrap;
+  font-family: "Berkshire Swash";
+  overflow: hidden;
+  --x: 0px;
+  --y: 0px;
+  &:hover {
+    div#light {
+      transition: opacity 1s ease-in-out, filter 1s ease-in-out;
+      opacity: 1;
+      filter: blur(0px);
+    }
+  }
+  p {
+    color: #000;
+    position: relative;
+    z-index: 9;
+  }
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    flex-wrap: wrap;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    z-index: 0;
+    strong {
+      font-size: 13vw;
+      width: 32.5vw;
+      text-align: left;
+      line-height: 0.8;
+      span {
+        display: block;
+        &:nth-of-type(odd) {
+          transform: translateX(-5vw);
+        }
+        &:last-of-type {
+          transform: translate(-5vw, -1.5vw);
+        }
+      }
+    }
+    &#dark {
+      background: radial-gradient(
+          circle at calc(50% + var(--x)) calc(50% + var(--y)),
+          rgba(0, 0, 0, 0.75) 5vw,
+          rgba(0, 0, 0, 0.85) 75vw
+        ),
+        url("https://static.vecteezy.com/system/resources/previews/001/211/723/non_2x/floral-repeating-pattern-with-rose-flower-in-watercolor-style-vector.jpg");
+      strong {
+        color: #ceb2b4;
+        text-shadow: clamp(-5px, calc((var(--x) / -100)), 5px)
+          clamp(-5px, calc((var(--y) / -100)), 5px) 0px darken(#ceb2b4, 20%);
+      }
+    }
+  }
+  div#light {
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
+    filter: blur(5px);
+    z-index: 2;
+    background: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.75),
+        rgba(255, 255, 255, 1)
+      ),
+      url("https://wallpaperaccess.com/full/215335.jpg");
+    -webkit-mask: radial-gradient(
+        circle at calc(50% + var(--x)) calc(50% + var(--y) - 2.25vw),
+        #000 9vw,
+        transparent 9vw
+      ),
+      linear-gradient(
+        to bottom,
+        transparent calc(50% + var(--y)),
+        #000 calc(50% + var(--y)),
+        #000 calc(57.5% + var(--y)),
+        rgba(0, 0, 0, 0.15)
+      );
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% calc(50% + var(--y)),
+      calc(58.75% + var(--x)) calc(50% + var(--y)),
+      50% 110%,
+      calc(41.25% + var(--x)) calc(50% + var(--y)),
+      0 calc(50% + var(--y))
+    );
+    strong {
+      font-family: "Crass";
+      font-size: 10vw;
+      line-height: 1;
+      margin: 2.5vw 0 0;
+      span {
+        &:last-of-type {
+          transform: translate(-5vw, -1vw);
+        }
+      }
+    }
+  }
+}
diff --git a/cups-pattern/README.markdown b/cups-pattern/README.markdown
new file mode 100644
index 0000000..c17bd81
--- /dev/null
+++ b/cups-pattern/README.markdown
@@ -0,0 +1,7 @@
+# Cups Pattern
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ilithya/pen/QWGEqeP](https://codepen.io/ilithya/pen/QWGEqeP).
+
+Pure CSS animated pattern.  
+Resizable with just 1 CSS edit.  
+Enjoy! <3
diff --git a/cups-pattern/dist/index.html b/cups-pattern/dist/index.html
new file mode 100644
index 0000000..b7db916
--- /dev/null
+++ b/cups-pattern/dist/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Cups Pattern</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="cups">
+  <ul class="cups__pattern"> 	
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+    <li class="item"></li>
+  </ul>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/cups-pattern/dist/script.js b/cups-pattern/dist/script.js
new file mode 100644
index 0000000..ec293f9
--- /dev/null
+++ b/cups-pattern/dist/script.js
@@ -0,0 +1,11 @@
+/* 
+ * PURE CSS CUPS PATTERN
+ * Resizable pattern with just 1 CSS edit.
+ *
+ * Created by tweaking an old pen of mine: https://codepen.io/ilithya/pen/LBBXGW
+ *
+ * #065 - #100DaysOfCode
+ * By ilithya | 2021
+ * https://www.ilithya.rocks/
+ * https://twitter.com/ilithya_rocks
+ */
\ No newline at end of file
diff --git a/cups-pattern/dist/style.css b/cups-pattern/dist/style.css
new file mode 100644
index 0000000..8f4f0c4
--- /dev/null
+++ b/cups-pattern/dist/style.css
@@ -0,0 +1,123 @@
+:root {
+  --color_base: hotpink;
+  --color_pen: #191919;
+  --size: 2.5em;
+  --size_half: calc(var(--size) / 2);
+  --size_2x: calc(var(--size) * 2);
+  --size_quarter: calc(var(--size) / 4);
+  --margin: var(--size_half);
+  --cups: calc(var(--size) * 10);
+  --duration: 9s;
+  --timing: linear;
+  --delay: 0.5s;
+  --fill_mode: infinite;
+  --anim_top: slide_top var(--duration) var(--timing) var(--delay) var(--fill_mode);
+  --anim_bottom: slide_bottom var(--duration) var(--timing) var(--delay) var(--fill_mode);
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background-color: var(--color_base);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.cups {
+  width: var(--cups);
+  height: var(--cups);
+  position: relative;
+  overflow: hidden;
+  transform: rotateZ(45deg);
+}
+.cups__pattern {
+  --hidden_margin: calc(var(--size) * -2.25);
+  width: calc(var(--cups) * 1.5);
+  height: calc(var(--cups) * 1.5);
+  position: absolute;
+  top: var(--hidden_margin);
+  left: var(--hidden_margin);
+  display: flex;
+  align-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.item {
+  width: var(--size);
+  height: var(--size);
+  margin: var(--margin);
+  padding: 0;
+}
+.item:before, .item:after {
+  width: var(--size);
+  height: var(--size_half);
+  content: "";
+  background-color: var(--color_pen);
+  display: block;
+}
+.item:before {
+  -webkit-animation: var(--anim_top);
+          animation: var(--anim_top);
+  border-top-right-radius: var(--size);
+}
+.item:after {
+  -webkit-animation: var(--anim_bottom);
+          animation: var(--anim_bottom);
+  border-bottom-right-radius: var(--size);
+}
+
+@-webkit-keyframes slide_top {
+  14.285714285714286%, 18%, 71.428571428571429%, 75% {
+    transform: translate(var(--size_2x), 1px);
+  }
+  28.571428571428571%, 35%, 57.142857142857143%, 64% {
+    transform: rotate(180deg) translate(var(--size_quarter), calc(var(--size_quarter) * -1));
+  }
+  42.857142857142857%, 50% {
+    transform: rotate(90deg) translate(calc(var(--size) * -1.75), calc(var(--size) / -3.75));
+  }
+  93% {
+    transform: translate(0, 1px);
+  }
+}
+
+@keyframes slide_top {
+  14.285714285714286%, 18%, 71.428571428571429%, 75% {
+    transform: translate(var(--size_2x), 1px);
+  }
+  28.571428571428571%, 35%, 57.142857142857143%, 64% {
+    transform: rotate(180deg) translate(var(--size_quarter), calc(var(--size_quarter) * -1));
+  }
+  42.857142857142857%, 50% {
+    transform: rotate(90deg) translate(calc(var(--size) * -1.75), calc(var(--size) / -3.75));
+  }
+  93% {
+    transform: translate(0, 1px);
+  }
+}
+@-webkit-keyframes slide_bottom {
+  14.285714285714286%, 18%, 71.428571428571429%, 75% {
+    transform: translate(calc(var(--size_2x) * -1));
+  }
+  93% {
+    transform: translate(0);
+  }
+}
+@keyframes slide_bottom {
+  14.285714285714286%, 18%, 71.428571428571429%, 75% {
+    transform: translate(calc(var(--size_2x) * -1));
+  }
+  93% {
+    transform: translate(0);
+  }
+}
\ No newline at end of file
diff --git a/cups-pattern/license.txt b/cups-pattern/license.txt
new file mode 100644
index 0000000..828cd78
--- /dev/null
+++ b/cups-pattern/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by ilithya (https://codepen.io/ilithya/pen/QWGEqeP)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/cups-pattern/src/index.pug b/cups-pattern/src/index.pug
new file mode 100644
index 0000000..2113115
--- /dev/null
+++ b/cups-pattern/src/index.pug
@@ -0,0 +1,4 @@
+.cups
+	ul.cups__pattern  	
+		each i in new Array(48)
+			li.item
diff --git a/cups-pattern/src/script.js b/cups-pattern/src/script.js
new file mode 100644
index 0000000..ec293f9
--- /dev/null
+++ b/cups-pattern/src/script.js
@@ -0,0 +1,11 @@
+/* 
+ * PURE CSS CUPS PATTERN
+ * Resizable pattern with just 1 CSS edit.
+ *
+ * Created by tweaking an old pen of mine: https://codepen.io/ilithya/pen/LBBXGW
+ *
+ * #065 - #100DaysOfCode
+ * By ilithya | 2021
+ * https://www.ilithya.rocks/
+ * https://twitter.com/ilithya_rocks
+ */
\ No newline at end of file
diff --git a/cups-pattern/src/style.scss b/cups-pattern/src/style.scss
new file mode 100644
index 0000000..8ee1715
--- /dev/null
+++ b/cups-pattern/src/style.scss
@@ -0,0 +1,124 @@
+:root { 
+	// COLOR CSS VARIABLES
+	--color_base: hotpink; 
+	--color_pen: #191919; // Black
+	
+	// SIZE VARIABLES
+	--size: 2.5em; // Resize pattern by only editing this variable	
+	--size_half: calc(var(--size) / 2);
+	--size_2x: calc(var(--size) * 2);
+	--size_quarter: calc(var(--size) / 4);
+	--margin: var(--size_half);
+	--cups: calc(var(--size) * 10);
+	
+	// ANIMATION VARIABLES
+	--duration: 9s;
+	--timing: linear;
+	--delay: 0.5s;
+	--fill_mode: infinite;
+	
+	--anim_top: slide_top var(--duration) var(--timing) var(--delay) var(--fill_mode);
+	--anim_bottom: slide_bottom var(--duration) var(--timing)  var(--delay) var(--fill_mode);
+}
+
+// MIXINS
+@mixin size($w, $h: $w) {
+	width: $w;
+	height: $h;
+}
+
+// LAYOUT
+html, body {
+	height: 100%;
+}
+
+body {
+	background-color: var(--color_base);
+	margin: 0;
+	
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+// PATTERN ILLUSTRATION
+.cups {
+	@include size(var(--cups));
+	position: relative;
+	overflow: hidden;
+	transform: rotateZ(45deg);
+
+	&__pattern {
+		--hidden_margin: calc(var(--size) * -2.25);
+
+		@include size(calc(var(--cups) * 1.5));
+		position: absolute;
+		top: var(--hidden_margin);
+		left: var(--hidden_margin); 
+		
+		display: flex;
+		align-content: flex-start;
+		flex-wrap: wrap;
+	}
+}
+
+.item {
+	@include size(var(--size));
+	margin: var(--margin);
+	padding: 0;
+	
+	// Half Item
+	&:before,
+	&:after {
+		@include size(var(--size), var(--size_half));
+		content: '';
+		background-color: var(--color_pen);
+		display: block;
+	}
+	
+	// Item's Top
+	&:before {
+		animation: var(--anim_top);	
+		border-top-right-radius: var(--size);
+	}
+	
+	// Item's Bottom
+	&:after {
+		animation: var(--anim_bottom);
+		border-bottom-right-radius: var(--size);
+	}
+}
+
+// ANIMATIONS
+@keyframes slide_top {	
+	14.285714285714286%, 18%,
+	71.428571428571429%, 75% {
+		transform: translate(var(--size_2x), 1px); 
+	}
+	28.571428571428571%, 35%,
+	57.142857142857143%, 64% {
+		transform: rotate(180deg) translate(var(--size_quarter), calc(var(--size_quarter) * -1));		
+	}
+	42.857142857142857%, 50% {
+		transform: rotate(90deg) translate(calc(var(--size) * -1.75), calc(var(--size) / -3.75));
+	}
+	93% {
+		transform: translate(0, 1px);
+	}
+}
+
+@keyframes slide_bottom {
+	14.285714285714286%, 18%,
+	71.428571428571429%, 75% {
+		transform: translate(calc(var(--size_2x) * -1)); 
+	}
+	93% {
+		transform: translate(0);
+	}
+}
diff --git a/curiouslyminded-with-flopine/README.markdown b/curiouslyminded-with-flopine/README.markdown
new file mode 100644
index 0000000..1c73c0e
--- /dev/null
+++ b/curiouslyminded-with-flopine/README.markdown
@@ -0,0 +1,17 @@
+# #curiouslyminded with Flopine
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ilithya/pen/abWopXy](https://codepen.io/ilithya/pen/abWopXy).
+
+🔮 curiouslyminded      
+Fourteenth live coding session with Flopine.
+
+Find Flopine:
+
+- https://twitter.com/FlopineYeah
+- https://www.instagram.com/flopine_makes_shaders/
+
+Find Eliza and I:
+
+- https://www.curiouslyminded.xyz
+- https://www.twitch.tv/curiouslyminded
+- https://www.youtube.com/curiouslyminded
diff --git a/curiouslyminded-with-flopine/dist/index.html b/curiouslyminded-with-flopine/dist/index.html
new file mode 100644
index 0000000..9d05e55
--- /dev/null
+++ b/curiouslyminded-with-flopine/dist/index.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - #curiouslyminded with Flopine</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- Shader Session with Flopine | 2021
+ *
+ * Flopine: 
+ * https://twitter.com/FlopineYeah
+ * https://www.instagram.com/flopine_makes_shaders/
+ *
+ * We're curiouslyminded (eliza & ilithya):
+ * https://www.curiouslyminded.xyz
+ * https://www.twitch.tv/curiouslyminded
+ * https://www.youtube.com/curiouslyminded -->
+
+<div id="shadercollab"></div>
+<script id="vertex" type="x-shader/x-vertex">
+	void main() { gl_Position = vec4(position, 1.0); }
+</script>
+
+<script id="fragment" type="x-shader/x-fragment">
+precision highp float;
+
+#define PI 3.14159265359
+// pos, period of repition and limit
+#define clamprepetition(p,per,l) p=p-per*clamp(floor(p/per + 0.5), -l, l)
+
+uniform vec2 u_resolution;
+uniform float u_time;
+	
+const int RAYMARCH_MAX_STEPS = 200;
+const float RAYMARCH_MAX_DIST = 50.;
+const float EPSILON = 0.0001;
+
+mat2 rot (float a) {
+	return mat2(cos(a),sin(a),-sin(a),cos(a));
+}
+	
+// p: position c: corner
+float sdBox(vec3 p, vec3 c) {
+  vec3 q = abs(p) - c;
+  return length(max(q,0.0)) + min(max(q.x,max(q.y,q.z)),0.0);
+}
+	
+float scene(vec3 pos) {
+	pos.yz *= rot(atan(1./sqrt(2.)));
+	pos.xz *= rot(PI/4.); 
+	
+	float period = 4.+(sin(u_time*5.)*0.5+0.5);
+	vec2 id = floor(pos.xz/period + 0.5); // floor +0.5 instead of round which is supported as of openGL 4.0
+	clamprepetition(pos.xz, period, 2.); // Keep the last float as an int not a decimal float
+	pos.xz *= rot(u_time*length(id+2.));
+	float box = sdBox(pos, vec3(1.));
+	
+	return box;
+}
+
+vec3 getnormalsmall(vec3 p) {
+	vec2 epsilon = vec2(0.001, 0.);
+	
+	return normalize(
+		scene(p) - vec3(scene(p-epsilon.xyy),
+		scene(p-epsilon.yxy),
+		scene(p-epsilon.yyx))
+	);
+}
+	
+vec4 raymarch(vec3 rayDir, vec3 pos) {
+	// Define the start state
+	// reset to 0 steps
+	float currentDist = 0.0; // signed distance
+	float rayDepth = 0.0;
+	vec3 rayLength = vec3(0.0);
+	
+	vec3 light = normalize(vec3(1.,2.,2.));
+	vec4 bgColor = vec4(0., 0., 0., 1.);
+	
+	// shooting the ray
+ 	for (int i=0; i < RAYMARCH_MAX_STEPS; i++) {
+     	// steps traveled
+		vec3 new_p = pos + rayDir * rayDepth;
+		currentDist = scene(new_p);
+		rayDepth += currentDist;
+		
+		vec3 normals = getnormalsmall(new_p);
+		float lighting = max(0.,dot(normals,light));
+ 		vec4 shapeColor = mix(
+			vec4(0.2,0.,0.3, 1.0),
+			vec4(0.4,0.8,0.9, 1.0),
+			lighting
+		);
+		
+ 	    if (currentDist < EPSILON) return shapeColor; // We're inside the scene - magic happens here
+ 		if (rayDepth > RAYMARCH_MAX_DIST) return bgColor; // We've gone too far
+	}
+	
+	return bgColor;
+}
+	
+void main() {
+	vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy; 
+	
+	vec3 camPos = vec3(uv*10., 30.); // x, y, z axis	
+	vec3 rayDir = normalize(vec3(0.,0., -1.0)); // DOF
+	
+    gl_FragColor = vec4(raymarch(rayDir, camPos));
+}
+</script>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/curiouslyminded-with-flopine/dist/script.js b/curiouslyminded-with-flopine/dist/script.js
new file mode 100644
index 0000000..a8153e5
--- /dev/null
+++ b/curiouslyminded-with-flopine/dist/script.js
@@ -0,0 +1,70 @@
+/* 
+ * SHADER SESSION WITH FLOPINE
+ * JUNE 2021
+ *
+ * Flopine:
+ * https://twitter.com/FlopineYeah
+ * https://www.instagram.com/flopine_makes_shaders/
+ *
+ * We're curiouslyminded (eliza & ilithya):
+ * https://www.curiouslyminded.xyz
+ * https://www.twitch.tv/curiouslyminded
+ * https://www.youtube.com/curiouslyminded
+ *
+ */
+
+let camera, scene, renderer, clock;
+let uniforms;
+
+function init() {
+	const container = document.getElementById("shadercollab");
+
+	clock = new THREE.Clock();
+	camera = new THREE.Camera();
+	camera.position.z = 1;
+
+	scene = new THREE.Scene();
+
+	const geometry = new THREE.PlaneBufferGeometry(2, 2);
+
+	uniforms = {
+		u_time: { type: "f", value: 1.0 },
+		u_resolution: { type: "v2", value: new THREE.Vector2() },
+	};
+
+	const material = new THREE.ShaderMaterial({
+		uniforms,
+		vertexShader: document.getElementById("vertex").textContent,
+		fragmentShader: document.getElementById("fragment").textContent
+	});
+
+	const mesh = new THREE.Mesh(geometry, material);
+	scene.add(mesh);
+
+	renderer = new THREE.WebGLRenderer();
+	renderer.setPixelRatio(window.devicePixelRatio);
+
+	container.appendChild(renderer.domElement);
+
+	onWindowResize();
+	window.addEventListener("resize", onWindowResize);
+}
+
+function onWindowResize() {
+	renderer.setSize(window.innerWidth, window.innerHeight);
+	uniforms.u_resolution.value.x = renderer.domElement.width;
+	uniforms.u_resolution.value.y = renderer.domElement.height;
+}
+
+function render() {
+	uniforms.u_time.value = clock.getElapsedTime();
+	renderer.render(scene, camera);
+}
+
+function animate() {
+	render();
+	requestAnimationFrame(animate);
+}
+
+init();
+animate();
\ No newline at end of file
diff --git a/curiouslyminded-with-flopine/dist/style.css b/curiouslyminded-with-flopine/dist/style.css
new file mode 100644
index 0000000..f219144
--- /dev/null
+++ b/curiouslyminded-with-flopine/dist/style.css
@@ -0,0 +1,15 @@
+* {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+body {
+  height: 100vh;
+  background-color: #000;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+}
\ No newline at end of file
diff --git a/curiouslyminded-with-flopine/license.txt b/curiouslyminded-with-flopine/license.txt
new file mode 100644
index 0000000..dd7f7f0
--- /dev/null
+++ b/curiouslyminded-with-flopine/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by ilithya (https://codepen.io/ilithya/pen/abWopXy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/curiouslyminded-with-flopine/src/index.html b/curiouslyminded-with-flopine/src/index.html
new file mode 100644
index 0000000..8d0af56
--- /dev/null
+++ b/curiouslyminded-with-flopine/src/index.html
@@ -0,0 +1,104 @@
+<!-- Shader Session with Flopine | 2021
+ *
+ * Flopine: 
+ * https://twitter.com/FlopineYeah
+ * https://www.instagram.com/flopine_makes_shaders/
+ *
+ * We're curiouslyminded (eliza & ilithya):
+ * https://www.curiouslyminded.xyz
+ * https://www.twitch.tv/curiouslyminded
+ * https://www.youtube.com/curiouslyminded -->
+
+<div id="shadercollab"></div>
+<script id="vertex" type="x-shader/x-vertex">
+	void main() { gl_Position = vec4(position, 1.0); }
+</script>
+
+<script id="fragment" type="x-shader/x-fragment">
+precision highp float;
+
+#define PI 3.14159265359
+// pos, period of repition and limit
+#define clamprepetition(p,per,l) p=p-per*clamp(floor(p/per + 0.5), -l, l)
+
+uniform vec2 u_resolution;
+uniform float u_time;
+	
+const int RAYMARCH_MAX_STEPS = 200;
+const float RAYMARCH_MAX_DIST = 50.;
+const float EPSILON = 0.0001;
+
+mat2 rot (float a) {
+	return mat2(cos(a),sin(a),-sin(a),cos(a));
+}
+	
+// p: position c: corner
+float sdBox(vec3 p, vec3 c) {
+  vec3 q = abs(p) - c;
+  return length(max(q,0.0)) + min(max(q.x,max(q.y,q.z)),0.0);
+}
+	
+float scene(vec3 pos) {
+	pos.yz *= rot(atan(1./sqrt(2.)));
+	pos.xz *= rot(PI/4.); 
+	
+	float period = 4.+(sin(u_time*5.)*0.5+0.5);
+	vec2 id = floor(pos.xz/period + 0.5); // floor +0.5 instead of round which is supported as of openGL 4.0
+	clamprepetition(pos.xz, period, 2.); // Keep the last float as an int not a decimal float
+	pos.xz *= rot(u_time*length(id+2.));
+	float box = sdBox(pos, vec3(1.));
+	
+	return box;
+}
+
+vec3 getnormalsmall(vec3 p) {
+	vec2 epsilon = vec2(0.001, 0.);
+	
+	return normalize(
+		scene(p) - vec3(scene(p-epsilon.xyy),
+		scene(p-epsilon.yxy),
+		scene(p-epsilon.yyx))
+	);
+}
+	
+vec4 raymarch(vec3 rayDir, vec3 pos) {
+	// Define the start state
+	// reset to 0 steps
+	float currentDist = 0.0; // signed distance
+	float rayDepth = 0.0;
+	vec3 rayLength = vec3(0.0);
+	
+	vec3 light = normalize(vec3(1.,2.,2.));
+	vec4 bgColor = vec4(0., 0., 0., 1.);
+	
+	// shooting the ray
+ 	for (int i=0; i < RAYMARCH_MAX_STEPS; i++) {
+     	// steps traveled
+		vec3 new_p = pos + rayDir * rayDepth;
+		currentDist = scene(new_p);
+		rayDepth += currentDist;
+		
+		vec3 normals = getnormalsmall(new_p);
+		float lighting = max(0.,dot(normals,light));
+ 		vec4 shapeColor = mix(
+			vec4(0.2,0.,0.3, 1.0),
+			vec4(0.4,0.8,0.9, 1.0),
+			lighting
+		);
+		
+ 	    if (currentDist < EPSILON) return shapeColor; // We're inside the scene - magic happens here
+ 		if (rayDepth > RAYMARCH_MAX_DIST) return bgColor; // We've gone too far
+	}
+	
+	return bgColor;
+}
+	
+void main() {
+	vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy; 
+	
+	vec3 camPos = vec3(uv*10., 30.); // x, y, z axis	
+	vec3 rayDir = normalize(vec3(0.,0., -1.0)); // DOF
+	
+    gl_FragColor = vec4(raymarch(rayDir, camPos));
+}
+</script>
\ No newline at end of file
diff --git a/curiouslyminded-with-flopine/src/script.js b/curiouslyminded-with-flopine/src/script.js
new file mode 100644
index 0000000..a8153e5
--- /dev/null
+++ b/curiouslyminded-with-flopine/src/script.js
@@ -0,0 +1,70 @@
+/* 
+ * SHADER SESSION WITH FLOPINE
+ * JUNE 2021
+ *
+ * Flopine:
+ * https://twitter.com/FlopineYeah
+ * https://www.instagram.com/flopine_makes_shaders/
+ *
+ * We're curiouslyminded (eliza & ilithya):
+ * https://www.curiouslyminded.xyz
+ * https://www.twitch.tv/curiouslyminded
+ * https://www.youtube.com/curiouslyminded
+ *
+ */
+
+let camera, scene, renderer, clock;
+let uniforms;
+
+function init() {
+	const container = document.getElementById("shadercollab");
+
+	clock = new THREE.Clock();
+	camera = new THREE.Camera();
+	camera.position.z = 1;
+
+	scene = new THREE.Scene();
+
+	const geometry = new THREE.PlaneBufferGeometry(2, 2);
+
+	uniforms = {
+		u_time: { type: "f", value: 1.0 },
+		u_resolution: { type: "v2", value: new THREE.Vector2() },
+	};
+
+	const material = new THREE.ShaderMaterial({
+		uniforms,
+		vertexShader: document.getElementById("vertex").textContent,
+		fragmentShader: document.getElementById("fragment").textContent
+	});
+
+	const mesh = new THREE.Mesh(geometry, material);
+	scene.add(mesh);
+
+	renderer = new THREE.WebGLRenderer();
+	renderer.setPixelRatio(window.devicePixelRatio);
+
+	container.appendChild(renderer.domElement);
+
+	onWindowResize();
+	window.addEventListener("resize", onWindowResize);
+}
+
+function onWindowResize() {
+	renderer.setSize(window.innerWidth, window.innerHeight);
+	uniforms.u_resolution.value.x = renderer.domElement.width;
+	uniforms.u_resolution.value.y = renderer.domElement.height;
+}
+
+function render() {
+	uniforms.u_time.value = clock.getElapsedTime();
+	renderer.render(scene, camera);
+}
+
+function animate() {
+	render();
+	requestAnimationFrame(animate);
+}
+
+init();
+animate();
\ No newline at end of file
diff --git a/curiouslyminded-with-flopine/src/style.scss b/curiouslyminded-with-flopine/src/style.scss
new file mode 100644
index 0000000..37b7012
--- /dev/null
+++ b/curiouslyminded-with-flopine/src/style.scss
@@ -0,0 +1,14 @@
+$c1: #000; // black
+
+* {
+	user-select: none;
+}
+
+body {
+	height: 100vh;
+	background-color: $c1;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	position: relative;
+}
\ No newline at end of file
diff --git a/curl-noise/README.markdown b/curl-noise/README.markdown
new file mode 100644
index 0000000..4c5c76e
--- /dev/null
+++ b/curl-noise/README.markdown
@@ -0,0 +1,8 @@
+# Curl Noise
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/mnmxmx/pen/rzqoeW](https://codepen.io/mnmxmx/pen/rzqoeW).
+
+//  curl noise
+// https://petewerner.blogspot.jp/2015/02/intro-to-curl-noise.html
+
+// inspired by https://www.clicktorelease.com/code/polygon-shredder/
diff --git a/curl-noise/dist/index.html b/curl-noise/dist/index.html
new file mode 100644
index 0000000..663ed42
--- /dev/null
+++ b/curl-noise/dist/index.html
@@ -0,0 +1,452 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Curl Noise</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="wrapper" id="wrapper">
+</div>
+
+<script id="simulation_vel" type="x-shader/x-fragment">
+
+//
+// Description : Array and textureless GLSL 2D/3D/4D simplex
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : ijm
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//
+
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+  return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r){
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v) {
+
+  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  // First corner
+  vec3 i  = floor(v + dot(v, C.yyy) );
+  vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+  // Other corners
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min( g.xyz, l.zxy );
+  vec3 i2 = max( g.xyz, l.zxy );
+
+  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+  //   x1 = x0 - i1  + 1.0 * C.xxx;
+  //   x2 = x0 - i2  + 2.0 * C.xxx;
+  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+  // Permutations
+  i = mod289(i);
+  vec4 p = permute( permute( permute(
+      i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+    + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+    + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+  // Gradients: 7x7 points over a square, mapped onto an octahedron.
+  // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+  float n_ = 0.142857142857; // 1.0/7.0
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+  vec4 x = x_ *ns.x + ns.yyyy;
+  vec4 y = y_ *ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4( x.xy, y.xy );
+  vec4 b1 = vec4( x.zw, y.zw );
+
+  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+  vec4 s0 = floor(b0)*2.0 + 1.0;
+  vec4 s1 = floor(b1)*2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+  vec3 p0 = vec3(a0.xy,h.x);
+  vec3 p1 = vec3(a0.zw,h.y);
+  vec3 p2 = vec3(a1.xy,h.z);
+  vec3 p3 = vec3(a1.zw,h.w);
+
+  //Normalise gradients
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  // Mix final noise value
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );
+
+}
+
+
+// via: https://petewerner.blogspot.jp/2015/02/intro-to-curl-noise.html
+vec3 curlNoise( vec3 p ){
+
+  const float e = 0.1;
+
+  float  n1 = snoise(vec3(p.x, p.y + e, p.z));
+  float  n2 = snoise(vec3(p.x, p.y - e, p.z));
+  float  n3 = snoise(vec3(p.x, p.y, p.z + e));
+  float  n4 = snoise(vec3(p.x, p.y, p.z - e));
+  float  n5 = snoise(vec3(p.x + e, p.y, p.z));
+  float  n6 = snoise(vec3(p.x - e, p.y, p.z));
+
+  float x = n2 - n1 - n4 + n3;
+  float y = n4 - n3 - n6 + n5;
+  float z = n6 - n5 - n2 + n1;
+
+
+  const float divisor = 1.0 / ( 2.0 * e );
+  return normalize( vec3( x , y , z ) * divisor );
+}
+
+
+uniform float timer;
+uniform float delta;
+uniform float speed;
+uniform float factor;
+uniform float evolution;
+uniform float radius;
+
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution.xy;
+  vec4 c = texture2D( posTex, uv );
+  vec4 oldVel = texture2D( velTex, uv );
+
+  vec3 pos = c.xyz;
+  float life = oldVel.a;
+
+  float s = life / 100.0;
+  float speedInc = 1.0;
+
+  vec3 v = factor * speedInc * delta * speed * ( curlNoise( .2 * pos) );
+
+  pos += v;
+  life -= 0.3;
+
+  if( life <= 0.0) {
+
+    pos = texture2D( defTex, uv ).xyz;
+    life = 100.0;
+
+  }
+
+
+  gl_FragColor = vec4( pos - c.xyz, life );
+}
+
+
+</script>
+
+<script id="simulation_pos" type="x-shader/x-fragment">
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution.xy;
+  vec4 tmpPos = texture2D( posTex, uv );
+  vec3 pos = tmpPos.xyz;
+  vec4 tmpVel = texture2D( velTex, uv );
+
+  vec3 vel = tmpVel.xyz;
+
+  pos += vel;
+  gl_FragColor = vec4( pos, 0.0 );
+}
+</script>
+
+<script id="simulation_def" type="x-shader/x-fragment">
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution.xy;
+  vec4 tmpPos = texture2D( defTex, uv );
+  gl_FragColor = vec4( tmpPos.rgb, 0.0 );
+}
+</script>
+
+
+<script id="vs-particles" type="x-shader/x-vertex">
+
+attribute float aNum;
+attribute float aRandom;
+// attribute vec2 aPosUv
+
+attribute vec3 aColor;
+
+
+uniform sampler2D posMap;
+uniform sampler2D velMap;
+
+uniform float size;
+
+uniform float timer;
+uniform vec3 boxScale;
+uniform float meshScale;
+
+uniform mat4 shadowMatrix;
+
+varying vec3 vPosition;
+varying vec3 vColor;
+
+varying vec4 vShadowCoord;
+
+
+mat3 calcLookAtMatrix(vec3 vector, float roll) {
+  vec3 rr = vec3(sin(roll), cos(roll), 0.0);
+  vec3 ww = normalize(vector);
+  vec3 uu = normalize(cross(ww, rr));
+  vec3 vv = normalize(cross(uu, ww));
+
+  return mat3(uu, ww, vv);
+}
+
+void main() {
+  vec2 posUv;
+  posUv.x = mod(aNum, (size - 1.0));
+  posUv.y = float(aNum / (size - 1.0));
+  posUv /= vec2(size);
+  vec4 cubePosition = texture2D( posMap, posUv );
+  vec4 cubeVelocity = texture2D( velMap, posUv );
+  float alpha = cubeVelocity.a / 100.0;
+  float scale = 0.025 * 4.0 * (1.0 - alpha) * alpha;
+
+  mat4 localRotationMat = mat4( calcLookAtMatrix( cubeVelocity.xyz, 0.0 ) );
+
+  vec3 modifiedVertex =  (localRotationMat * vec4( position * scale * aRandom * (vec3(1.0))  * boxScale * meshScale, 1.0 ) ).xyz;
+  vec3 modifiedPosition = modifiedVertex + cubePosition.xyz;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4( modifiedPosition, 1.0 );
+  vPosition = modifiedPosition;
+
+  // via: line 7 in https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmap_vertex.glsl
+  vShadowCoord = shadowMatrix * modelMatrix * vec4( modifiedPosition, 1.0 );
+
+  vColor = aColor;
+}
+
+</script>
+
+<script id="fs-particles" type="x-shader/x-fragment">
+varying vec3 vPosition;
+varying vec3 vColor;
+
+varying vec4 vShadowCoord;
+uniform sampler2D shadowMap;
+uniform vec2 shadowMapSize;
+uniform float shadowBias;
+uniform float shadowRadius;
+
+// uniform sampler2D projector;
+
+uniform vec3 lightPosition;
+
+uniform vec2 resolution;
+
+float bias;
+
+
+// via: https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/packing.glsl
+const float UnpackDownscale = 255. / 256.; // 0..1 -> fraction (excluding 1)
+const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256.,  256. );
+const vec4 UnpackFactors = UnpackDownscale / vec4( PackFactors, 1. );
+
+float unpackRGBAToDepth( const in vec4 v ) {
+  return dot( v, UnpackFactors );
+}
+
+  
+// via:
+// https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmap_pars_fragment.glsl#L32
+float texture2DCompare( sampler2D depths, vec2 uv, float compare ) {
+  return step( compare, unpackRGBAToDepth( texture2D( depths, uv ) ) );
+}
+
+  
+// via:
+// https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmap_pars_fragment.glsl#L60
+float getShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowBias, float shadowRadius, vec4 shadowCoord ) {
+
+  float shadow = 1.0;
+
+  shadowCoord.xyz /= shadowCoord.w;
+  shadowCoord.z += shadowBias;
+
+  // if ( something && something ) breaks ATI OpenGL shader compiler
+  // if ( all( something, something ) ) using this instead
+
+  bvec4 inFrustumVec = bvec4 ( shadowCoord.x >= 0.0, shadowCoord.x <= 1.0, shadowCoord.y >= 0.0, shadowCoord.y <= 1.0 );
+  bool inFrustum = all( inFrustumVec );
+
+  bvec2 frustumTestVec = bvec2( inFrustum, shadowCoord.z <= 1.0 );
+  bool frustumTest = all( frustumTestVec );
+
+  if ( frustumTest ) {
+
+    vec2 texelSize = vec2( 1.0 ) / shadowMapSize;
+
+    float dx0 = - texelSize.x * shadowRadius;
+    float dy0 = - texelSize.y * shadowRadius;
+    float dx1 = + texelSize.x * shadowRadius;
+    float dy1 = + texelSize.y * shadowRadius;
+
+    shadow = (
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy0 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy0 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy0 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, 0.0 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy, shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, 0.0 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy1 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy1 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy1 ), shadowCoord.z )
+    ) * ( 1.0 / 9.0 );
+  }
+
+  return shadow;
+}
+
+mat2 rotationMatrix( float a ) {
+  return mat2( cos( a ), sin( a ),
+          -sin( a ), cos( a ) );
+}
+
+
+vec3 calcIrradiance_hemi(vec3 newNormal, vec3 lightPos, vec3 grd, vec3 sky){
+  float dotNL = dot(newNormal, normalize(lightPos));
+  float hemiDiffuseWeight = 0.5 * dotNL + 0.5;
+
+  return mix(grd, sky, hemiDiffuseWeight);
+}
+
+vec3 calcIrradiance_dir(vec3 newNormal, vec3 lightPos, vec3 light){
+  float dotNL = dot(newNormal, normalize(lightPos));
+
+  return light * max(0.0, dotNL);
+}
+
+
+const float PI = 3.14159265358979323846264;
+
+// hemisphere ground color
+const vec3 hemiLight_g = vec3(256.0, 246.0, 191.0) / vec3(256.0);
+
+// hemisphere sky color
+const vec3 hemiLight_s_1 = vec3(0.5882352941176471,0.8274509803921568,0.8823529411764706);
+const vec3 hemiLight_s_2 = vec3(0.9686274509803922,0.8509803921568627,0.6666666666666666);
+const vec3 hemiLight_s_3 = vec3(0.8784313725490196,0.5882352941176471,0.7647058823529411);
+
+// directional light color
+const vec3 dirLight = vec3(0.4);
+const vec3 dirLight_2 = vec3(0.1);
+
+
+
+
+
+const vec3 hemiLightPos_1 = vec3(1.0, 1.0, -1.0);
+const vec3 hemiLightPos_2 = vec3(-1.0, -1.0, 1.0);
+const vec3 hemiLightPos_3 = vec3(-1.0, 1.0, 1.0);
+
+void main() {
+  vec3 fdx = dFdx( vPosition );
+  vec3 fdy = dFdy( vPosition );
+  vec3 n = normalize(cross(fdx, fdy));
+
+  float diffuse = max(0.0, dot(n, normalize(lightPosition)));
+
+  float theta = clamp( -diffuse, 0., 1. );
+  bias = 0.005 * tan( acos( theta ) );
+  bias = clamp( bias, 0., 0.01 );
+
+  // shadow gradient
+  // float mask = sqrt(pow((vShadowCoord.x - 0.5) * 2.0, 2.0) + pow((vShadowCoord.y - 0.5) * 2.0, 2.0));
+
+  // mask = 1.0 - smoothstep(0.5, 1.0, mask);
+
+  vec3 hemiColor = vec3(0.0);
+  hemiColor += calcIrradiance_hemi(n, hemiLightPos_1, hemiLight_g, hemiLight_s_1) * 0.43;
+  hemiColor += calcIrradiance_hemi(n, hemiLightPos_2, hemiLight_g, hemiLight_s_2) * 0.33;
+  hemiColor += calcIrradiance_hemi(n, hemiLightPos_3, hemiLight_g, hemiLight_s_3) * 0.38;
+  
+  vec3 dirColor = vec3(0.0);
+  dirColor += calcIrradiance_dir(n, lightPosition, dirLight);
+
+  vec3 dirLightPos2 = vec3(-lightPosition.x, -lightPosition.y, -lightPosition.z);
+  dirColor += calcIrradiance_dir(n, dirLightPos2, dirLight_2);
+  
+
+  float shadow = 1.0;
+  shadow *= getShadow(shadowMap, shadowMapSize, bias, shadowRadius, vShadowCoord);
+
+  vec3 color = vColor * hemiColor;
+  color += dirColor * shadow;
+
+
+  gl_FragColor = vec4(color, 0.0);
+}
+
+</script>
+
+<script id="fs-particles-shadow" type="x-shader/x-fragment">
+
+// via: https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/packing.glsl
+
+const float PackUpscale = 256. / 255.; // fraction -> 0..1 (including 1)
+const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256.,  256. );
+const float ShiftRight8 = 1. / 256.;
+
+vec4 packDepthToRGBA( const in float v ) {
+  vec4 r = vec4( fract( v * PackFactors ), v );
+  r.yzw -= r.xyz * ShiftRight8; // tidy overflow
+  return r * PackUpscale;
+}
+
+void main() {
+
+  gl_FragColor = packDepthToRGBA( gl_FragCoord.z );
+
+}
+
+</script>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/593507/OrbitControls.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/593507/GPUComputationRenderer.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/curl-noise/dist/script.js b/curl-noise/dist/script.js
new file mode 100644
index 0000000..9ffd0d5
--- /dev/null
+++ b/curl-noise/dist/script.js
@@ -0,0 +1,279 @@
+//　curl noise
+// https://petewerner.blogspot.jp/2015/02/intro-to-curl-noise.html
+
+// inspired by
+// https://www.clicktorelease.com/code/polygon-shredder/
+
+window.onload = () => {
+  var webgl = new Webgl();
+  window.onresize = () => {
+    webgl.resize();
+  };
+};
+
+class Webgl {
+  constructor() {
+    this.size = 128;
+    this.widthW = document.body.clientWidth;
+    this.heightW = window.innerHeight;
+    this.init();
+  }
+
+  init() {
+    this.container = document.getElementById("wrapper");
+    this.renderer = new THREE.WebGLRenderer({ antialias: true });
+    // renderer.setPixelRatio( window.devicePixelRatio );
+    this.renderer.setSize(this.widthW, this.heightW);
+    this.container.appendChild(this.renderer.domElement);
+
+    this.scene = new THREE.Scene();
+
+    this.colorPallete = [
+    new THREE.Color(0x0d0232),
+    new THREE.Color(0xe50061),
+    new THREE.Color(0x1cafc0),
+    new THREE.Color(0xefcb03)];
+
+
+    this.camera = new THREE.PerspectiveCamera(45, this.widthW / this.heightW, .01, 10000);
+    this.scene.add(this.camera);
+    this.camera.position.set(-0.1, 4.0, 0.1);
+
+    var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
+
+    this.sim = new Simulation(this.renderer, this.size);
+
+    this.setLight();
+    this.createObj();
+
+    this.time = new THREE.Clock();
+    this.render();
+  }
+
+  setLight() {
+    this.light = new THREE.DirectionalLight(0xFFAA55);
+    this.light.position.set(-4, -6, 10);
+    this.light.castShadow = true;
+    this.shadowCamera = this.light.shadow.camera;
+    // this.shadowCamera.position.set(-4, -6, 10);
+    this.shadowCamera.lookAt(this.scene.position);
+
+    this.light.shadow.matrix.set(
+    0.5, 0.0, 0.0, 0.5,
+    0.0, 0.5, 0.0, 0.5,
+    0.0, 0.0, 0.5, 0.5,
+    0.0, 0.0, 0.0, 1.0);
+
+
+    this.light.shadow.matrix.multiply(this.shadowCamera.projectionMatrix);
+    this.light.shadow.matrix.multiply(this.shadowCamera.matrixWorldInverse);
+
+    if (this.light.shadow.map === null) {
+      this.light.shadow.mapSize.x = 2048;
+      this.light.shadow.mapSize.y = 2048;
+
+      var pars = { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
+
+      this.light.shadow.map = new THREE.WebGLRenderTarget(this.light.shadow.mapSize.x, this.light.shadow.mapSize.y, pars);
+      // light.shadow.map.texture.name = light.name + ".shadowMap";
+    }
+
+    console.log(this.light);
+  }
+
+  createObj() {
+    // var originalG = new THREE.BoxBufferGeometry(1, 1, 1);
+    var originalG = new THREE.OctahedronBufferGeometry(1, 0);
+
+
+    var geometry = new THREE.InstancedBufferGeometry();
+
+    // vertex
+    var vertices = originalG.attributes.position.clone();
+
+    geometry.addAttribute("position", vertices);
+
+    var normals = originalG.attributes.normal.clone();
+    geometry.addAttribute("normal", normals);
+
+    // uv
+    var uvs = originalG.attributes.uv.clone();
+    geometry.addAttribute("uv", uvs);
+
+    // index
+    // var indices = originalG.index.clone();
+    // geometry.setIndex(indices);
+
+
+    geometry.maxInstancedCount = this.sim.size * this.sim.size;
+
+    var nums = new THREE.InstancedBufferAttribute(new Float32Array(this.sim.size * this.sim.size * 1), 1, 1);
+    var randoms = new THREE.InstancedBufferAttribute(new Float32Array(this.sim.size * this.sim.size * 1), 1, 1);
+    var colors = new THREE.InstancedBufferAttribute(new Float32Array(this.sim.size * this.sim.size * 3), 3, 1);
+
+    for (var i = 0; i < nums.count; i++) {
+      var _color = this.colorPallete[Math.floor(Math.random() * this.colorPallete.length)];
+
+      nums.setX(i, i);
+      randoms.setX(i, Math.random() * 0.5 + 1);
+      colors.setXYZ(i, _color.r, _color.g, _color.b);
+    }
+
+    geometry.addAttribute("aNum", nums);
+    geometry.addAttribute("aRandom", randoms);
+    geometry.addAttribute("aColor", colors);
+
+    var scale = {
+      x: 2,
+      y: 8,
+      z: 2 };
+
+
+
+    this.material = new THREE.ShaderMaterial({
+      uniforms: {
+        posMap: { type: "t", value: this.sim.gpuCompute.getCurrentRenderTarget(this.sim.pos).texture },
+        velMap: { type: "t", value: this.sim.gpuCompute.getCurrentRenderTarget(this.sim.vel).texture },
+        size: { type: "f", value: this.sim.size },
+
+        timer: { type: 'f', value: 0 },
+        boxScale: { type: 'v3', value: new THREE.Vector3(scale.x, scale.y, scale.z) },
+        meshScale: { type: 'f', value: 0.7 },
+
+        shadowMap: { type: 't', value: this.light.shadow.map },
+        shadowMapSize: { type: "v2", value: this.light.shadow.mapSize },
+        shadowBias: { type: "f", value: this.light.shadow.bias },
+        shadowRadius: { type: "f", value: this.light.shadow.radius },
+
+        // Line 217 in https://github.com/mrdoob/three.js/blob/dev/src/renderers/webgl/WebGLShadowMap.js 
+        shadowMatrix: { type: 'm4', value: this.light.shadow.matrix },
+        lightPosition: { type: 'v3', value: this.light.position } },
+
+
+      vertexShader: document.getElementById('vs-particles').textContent,
+      fragmentShader: document.getElementById('fs-particles').textContent,
+      side: THREE.DoubleSide,
+      shading: THREE.FlatShading });
+
+
+    this.mesh = new THREE.Mesh(geometry, this.material);
+    this.scene.add(this.mesh);
+
+    this.shadowMaterial = new THREE.ShaderMaterial({
+      uniforms: {
+        posMap: { type: "t", value: this.sim.gpuCompute.getCurrentRenderTarget(this.sim.pos).texture },
+        velMap: { type: "t", value: this.sim.gpuCompute.getCurrentRenderTarget(this.sim.vel).texture },
+        size: { type: "f", value: this.sim.size },
+
+        timer: { type: 'f', value: 0 },
+        boxScale: { type: 'v3', value: new THREE.Vector3(scale.x, scale.y, scale.z) },
+        meshScale: { type: 'f', value: 0.7 },
+
+        shadowMatrix: { type: 'm4', value: this.light.shadow.matrix },
+        lightPosition: { type: 'v3', value: this.light.position } },
+
+      vertexShader: document.getElementById('vs-particles').textContent,
+      fragmentShader: document.getElementById('fs-particles-shadow').textContent,
+      side: THREE.DoubleSide });
+
+
+
+  }
+
+  render() {
+    var delta = this.time.getDelta() * 4;
+    var time = this.time.elapsedTime;
+
+    this.sim.velUniforms.timer.value = time;
+    this.sim.velUniforms.delta.value = delta;
+
+    this.sim.gpuCompute.compute();
+
+    this.material.uniforms.posMap.value = this.sim.gpuCompute.getCurrentRenderTarget(this.sim.pos).texture;
+    this.material.uniforms.velMap.value = this.sim.gpuCompute.getCurrentRenderTarget(this.sim.vel).texture;
+
+    this.shadowMaterial.uniforms.posMap.value = this.sim.gpuCompute.getCurrentRenderTarget(this.sim.pos).texture;
+    this.shadowMaterial.uniforms.velMap.value = this.sim.gpuCompute.getCurrentRenderTarget(this.sim.vel).texture;
+
+    this.material.uniforms.timer.value = this.shadowMaterial.uniforms.timer.value = time;
+
+
+
+    this.mesh.material = this.shadowMaterial;
+    this.renderer.render(this.scene, this.shadowCamera, this.light.shadow.map);
+
+    this.renderer.setClearColor(0x2e0232);
+    this.mesh.material = this.material;
+    this.renderer.render(this.scene, this.camera);
+
+    requestAnimationFrame(this.render.bind(this));
+  }
+
+  resize() {
+    this.widthW = document.body.clientWidth;
+    this.heightW = window.innerHeight;
+
+    this.camera.aspect = this.widthW / this.heightW;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(this.widthW, this.heightW);
+  }}
+
+
+class Simulation {
+  constructor(renderer, size) {
+    this.renderer = renderer;
+    this.size = size;
+    this.init();
+  }
+
+  init() {
+    this.gpuCompute = new GPUComputationRenderer(this.size, this.size, this.renderer);
+
+    this.dataPos = this.gpuCompute.createTexture();
+    this.dataVel = this.gpuCompute.createTexture();
+    this.dataDef = this.gpuCompute.createTexture();
+
+
+    var posArray = this.dataPos.image.data;
+    var velArray = this.dataVel.image.data;
+    var defArray = this.dataDef.image.data;
+
+
+    for (var i = 0, il = posArray.length; i < il; i += 4) {
+
+      var phi = Math.random() * 2 * Math.PI;
+      var theta = Math.random() * Math.PI;
+      var r = 0.8 + Math.random() * 2;
+
+      defArray[i + 0] = posArray[i + 0] = r * Math.sin(theta) * Math.cos(phi);
+      defArray[i + 1] = posArray[i + 1] = r * Math.sin(theta) * Math.sin(phi);
+      defArray[i + 2] = posArray[i + 2] = r * Math.cos(theta);
+
+      velArray[i + 3] = Math.random() * 100; // frames life
+      // if(i < 50) console.log(velArray[ i + 3 ])
+    }
+
+    this.def = this.gpuCompute.addVariable("defTex", document.getElementById('simulation_def').textContent, this.dataDef);
+    this.vel = this.gpuCompute.addVariable("velTex", document.getElementById('simulation_vel').textContent, this.dataVel);
+    this.pos = this.gpuCompute.addVariable("posTex", document.getElementById('simulation_pos').textContent, this.dataPos);
+
+    this.gpuCompute.setVariableDependencies(this.def, [this.pos, this.vel, this.def]);
+    this.gpuCompute.setVariableDependencies(this.vel, [this.pos, this.vel, this.def]);
+    this.gpuCompute.setVariableDependencies(this.pos, [this.pos, this.vel, this.def]);
+
+
+    // var posUniforms = this.pos.material.uniforms;
+    this.velUniforms = this.vel.material.uniforms;
+
+    this.velUniforms.timer = { value: 0.0 };
+    this.velUniforms.delta = { value: 0.0 };
+    this.velUniforms.speed = { value: 0.5 };
+    this.velUniforms.factor = { value: 0.5 };
+    this.velUniforms.evolution = { value: 0.5 };
+    this.velUniforms.radius = { value: 2.0 };
+
+    var error = this.gpuCompute.init();
+    if (error !== null) {
+      console.error(error);
+    }
+  }}
\ No newline at end of file
diff --git a/curl-noise/dist/style.css b/curl-noise/dist/style.css
new file mode 100644
index 0000000..952313a
--- /dev/null
+++ b/curl-noise/dist/style.css
@@ -0,0 +1,5 @@
+body{
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/curl-noise/license.txt b/curl-noise/license.txt
new file mode 100644
index 0000000..be2f109
--- /dev/null
+++ b/curl-noise/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Misaki Nakano (https://codepen.io/mnmxmx/pen/rzqoeW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/curl-noise/src/index.html b/curl-noise/src/index.html
new file mode 100644
index 0000000..e4804e9
--- /dev/null
+++ b/curl-noise/src/index.html
@@ -0,0 +1,435 @@
+<div class="wrapper" id="wrapper">
+</div>
+
+<script id="simulation_vel" type="x-shader/x-fragment">
+
+//
+// Description : Array and textureless GLSL 2D/3D/4D simplex
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : ijm
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//
+
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+  return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r){
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v) {
+
+  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  // First corner
+  vec3 i  = floor(v + dot(v, C.yyy) );
+  vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+  // Other corners
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min( g.xyz, l.zxy );
+  vec3 i2 = max( g.xyz, l.zxy );
+
+  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+  //   x1 = x0 - i1  + 1.0 * C.xxx;
+  //   x2 = x0 - i2  + 2.0 * C.xxx;
+  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+  // Permutations
+  i = mod289(i);
+  vec4 p = permute( permute( permute(
+      i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+    + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+    + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+  // Gradients: 7x7 points over a square, mapped onto an octahedron.
+  // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+  float n_ = 0.142857142857; // 1.0/7.0
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+  vec4 x = x_ *ns.x + ns.yyyy;
+  vec4 y = y_ *ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4( x.xy, y.xy );
+  vec4 b1 = vec4( x.zw, y.zw );
+
+  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+  vec4 s0 = floor(b0)*2.0 + 1.0;
+  vec4 s1 = floor(b1)*2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+  vec3 p0 = vec3(a0.xy,h.x);
+  vec3 p1 = vec3(a0.zw,h.y);
+  vec3 p2 = vec3(a1.xy,h.z);
+  vec3 p3 = vec3(a1.zw,h.w);
+
+  //Normalise gradients
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  // Mix final noise value
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );
+
+}
+
+
+// via: https://petewerner.blogspot.jp/2015/02/intro-to-curl-noise.html
+vec3 curlNoise( vec3 p ){
+
+  const float e = 0.1;
+
+  float  n1 = snoise(vec3(p.x, p.y + e, p.z));
+  float  n2 = snoise(vec3(p.x, p.y - e, p.z));
+  float  n3 = snoise(vec3(p.x, p.y, p.z + e));
+  float  n4 = snoise(vec3(p.x, p.y, p.z - e));
+  float  n5 = snoise(vec3(p.x + e, p.y, p.z));
+  float  n6 = snoise(vec3(p.x - e, p.y, p.z));
+
+  float x = n2 - n1 - n4 + n3;
+  float y = n4 - n3 - n6 + n5;
+  float z = n6 - n5 - n2 + n1;
+
+
+  const float divisor = 1.0 / ( 2.0 * e );
+  return normalize( vec3( x , y , z ) * divisor );
+}
+
+
+uniform float timer;
+uniform float delta;
+uniform float speed;
+uniform float factor;
+uniform float evolution;
+uniform float radius;
+
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution.xy;
+  vec4 c = texture2D( posTex, uv );
+  vec4 oldVel = texture2D( velTex, uv );
+
+  vec3 pos = c.xyz;
+  float life = oldVel.a;
+
+  float s = life / 100.0;
+  float speedInc = 1.0;
+
+  vec3 v = factor * speedInc * delta * speed * ( curlNoise( .2 * pos) );
+
+  pos += v;
+  life -= 0.3;
+
+  if( life <= 0.0) {
+
+    pos = texture2D( defTex, uv ).xyz;
+    life = 100.0;
+
+  }
+
+
+  gl_FragColor = vec4( pos - c.xyz, life );
+}
+
+
+</script>
+
+<script id="simulation_pos" type="x-shader/x-fragment">
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution.xy;
+  vec4 tmpPos = texture2D( posTex, uv );
+  vec3 pos = tmpPos.xyz;
+  vec4 tmpVel = texture2D( velTex, uv );
+
+  vec3 vel = tmpVel.xyz;
+
+  pos += vel;
+  gl_FragColor = vec4( pos, 0.0 );
+}
+</script>
+
+<script id="simulation_def" type="x-shader/x-fragment">
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution.xy;
+  vec4 tmpPos = texture2D( defTex, uv );
+  gl_FragColor = vec4( tmpPos.rgb, 0.0 );
+}
+</script>
+
+
+<script id="vs-particles" type="x-shader/x-vertex">
+
+attribute float aNum;
+attribute float aRandom;
+// attribute vec2 aPosUv
+
+attribute vec3 aColor;
+
+
+uniform sampler2D posMap;
+uniform sampler2D velMap;
+
+uniform float size;
+
+uniform float timer;
+uniform vec3 boxScale;
+uniform float meshScale;
+
+uniform mat4 shadowMatrix;
+
+varying vec3 vPosition;
+varying vec3 vColor;
+
+varying vec4 vShadowCoord;
+
+
+mat3 calcLookAtMatrix(vec3 vector, float roll) {
+  vec3 rr = vec3(sin(roll), cos(roll), 0.0);
+  vec3 ww = normalize(vector);
+  vec3 uu = normalize(cross(ww, rr));
+  vec3 vv = normalize(cross(uu, ww));
+
+  return mat3(uu, ww, vv);
+}
+
+void main() {
+  vec2 posUv;
+  posUv.x = mod(aNum, (size - 1.0));
+  posUv.y = float(aNum / (size - 1.0));
+  posUv /= vec2(size);
+  vec4 cubePosition = texture2D( posMap, posUv );
+  vec4 cubeVelocity = texture2D( velMap, posUv );
+  float alpha = cubeVelocity.a / 100.0;
+  float scale = 0.025 * 4.0 * (1.0 - alpha) * alpha;
+
+  mat4 localRotationMat = mat4( calcLookAtMatrix( cubeVelocity.xyz, 0.0 ) );
+
+  vec3 modifiedVertex =  (localRotationMat * vec4( position * scale * aRandom * (vec3(1.0))  * boxScale * meshScale, 1.0 ) ).xyz;
+  vec3 modifiedPosition = modifiedVertex + cubePosition.xyz;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4( modifiedPosition, 1.0 );
+  vPosition = modifiedPosition;
+
+  // via: line 7 in https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmap_vertex.glsl
+  vShadowCoord = shadowMatrix * modelMatrix * vec4( modifiedPosition, 1.0 );
+
+  vColor = aColor;
+}
+
+</script>
+
+<script id="fs-particles" type="x-shader/x-fragment">
+varying vec3 vPosition;
+varying vec3 vColor;
+
+varying vec4 vShadowCoord;
+uniform sampler2D shadowMap;
+uniform vec2 shadowMapSize;
+uniform float shadowBias;
+uniform float shadowRadius;
+
+// uniform sampler2D projector;
+
+uniform vec3 lightPosition;
+
+uniform vec2 resolution;
+
+float bias;
+
+
+// via: https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/packing.glsl
+const float UnpackDownscale = 255. / 256.; // 0..1 -> fraction (excluding 1)
+const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256.,  256. );
+const vec4 UnpackFactors = UnpackDownscale / vec4( PackFactors, 1. );
+
+float unpackRGBAToDepth( const in vec4 v ) {
+  return dot( v, UnpackFactors );
+}
+
+  
+// via:
+// https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmap_pars_fragment.glsl#L32
+float texture2DCompare( sampler2D depths, vec2 uv, float compare ) {
+  return step( compare, unpackRGBAToDepth( texture2D( depths, uv ) ) );
+}
+
+  
+// via:
+// https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmap_pars_fragment.glsl#L60
+float getShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowBias, float shadowRadius, vec4 shadowCoord ) {
+
+  float shadow = 1.0;
+
+  shadowCoord.xyz /= shadowCoord.w;
+  shadowCoord.z += shadowBias;
+
+  // if ( something && something ) breaks ATI OpenGL shader compiler
+  // if ( all( something, something ) ) using this instead
+
+  bvec4 inFrustumVec = bvec4 ( shadowCoord.x >= 0.0, shadowCoord.x <= 1.0, shadowCoord.y >= 0.0, shadowCoord.y <= 1.0 );
+  bool inFrustum = all( inFrustumVec );
+
+  bvec2 frustumTestVec = bvec2( inFrustum, shadowCoord.z <= 1.0 );
+  bool frustumTest = all( frustumTestVec );
+
+  if ( frustumTest ) {
+
+    vec2 texelSize = vec2( 1.0 ) / shadowMapSize;
+
+    float dx0 = - texelSize.x * shadowRadius;
+    float dy0 = - texelSize.y * shadowRadius;
+    float dx1 = + texelSize.x * shadowRadius;
+    float dy1 = + texelSize.y * shadowRadius;
+
+    shadow = (
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy0 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy0 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy0 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, 0.0 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy, shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, 0.0 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy1 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy1 ), shadowCoord.z ) +
+      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy1 ), shadowCoord.z )
+    ) * ( 1.0 / 9.0 );
+  }
+
+  return shadow;
+}
+
+mat2 rotationMatrix( float a ) {
+  return mat2( cos( a ), sin( a ),
+          -sin( a ), cos( a ) );
+}
+
+
+vec3 calcIrradiance_hemi(vec3 newNormal, vec3 lightPos, vec3 grd, vec3 sky){
+  float dotNL = dot(newNormal, normalize(lightPos));
+  float hemiDiffuseWeight = 0.5 * dotNL + 0.5;
+
+  return mix(grd, sky, hemiDiffuseWeight);
+}
+
+vec3 calcIrradiance_dir(vec3 newNormal, vec3 lightPos, vec3 light){
+  float dotNL = dot(newNormal, normalize(lightPos));
+
+  return light * max(0.0, dotNL);
+}
+
+
+const float PI = 3.14159265358979323846264;
+
+// hemisphere ground color
+const vec3 hemiLight_g = vec3(256.0, 246.0, 191.0) / vec3(256.0);
+
+// hemisphere sky color
+const vec3 hemiLight_s_1 = vec3(0.5882352941176471,0.8274509803921568,0.8823529411764706);
+const vec3 hemiLight_s_2 = vec3(0.9686274509803922,0.8509803921568627,0.6666666666666666);
+const vec3 hemiLight_s_3 = vec3(0.8784313725490196,0.5882352941176471,0.7647058823529411);
+
+// directional light color
+const vec3 dirLight = vec3(0.4);
+const vec3 dirLight_2 = vec3(0.1);
+
+
+
+
+
+const vec3 hemiLightPos_1 = vec3(1.0, 1.0, -1.0);
+const vec3 hemiLightPos_2 = vec3(-1.0, -1.0, 1.0);
+const vec3 hemiLightPos_3 = vec3(-1.0, 1.0, 1.0);
+
+void main() {
+  vec3 fdx = dFdx( vPosition );
+  vec3 fdy = dFdy( vPosition );
+  vec3 n = normalize(cross(fdx, fdy));
+
+  float diffuse = max(0.0, dot(n, normalize(lightPosition)));
+
+  float theta = clamp( -diffuse, 0., 1. );
+  bias = 0.005 * tan( acos( theta ) );
+  bias = clamp( bias, 0., 0.01 );
+
+  // shadow gradient
+  // float mask = sqrt(pow((vShadowCoord.x - 0.5) * 2.0, 2.0) + pow((vShadowCoord.y - 0.5) * 2.0, 2.0));
+
+  // mask = 1.0 - smoothstep(0.5, 1.0, mask);
+
+  vec3 hemiColor = vec3(0.0);
+  hemiColor += calcIrradiance_hemi(n, hemiLightPos_1, hemiLight_g, hemiLight_s_1) * 0.43;
+  hemiColor += calcIrradiance_hemi(n, hemiLightPos_2, hemiLight_g, hemiLight_s_2) * 0.33;
+  hemiColor += calcIrradiance_hemi(n, hemiLightPos_3, hemiLight_g, hemiLight_s_3) * 0.38;
+  
+  vec3 dirColor = vec3(0.0);
+  dirColor += calcIrradiance_dir(n, lightPosition, dirLight);
+
+  vec3 dirLightPos2 = vec3(-lightPosition.x, -lightPosition.y, -lightPosition.z);
+  dirColor += calcIrradiance_dir(n, dirLightPos2, dirLight_2);
+  
+
+  float shadow = 1.0;
+  shadow *= getShadow(shadowMap, shadowMapSize, bias, shadowRadius, vShadowCoord);
+
+  vec3 color = vColor * hemiColor;
+  color += dirColor * shadow;
+
+
+  gl_FragColor = vec4(color, 0.0);
+}
+
+</script>
+
+<script id="fs-particles-shadow" type="x-shader/x-fragment">
+
+// via: https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/packing.glsl
+
+const float PackUpscale = 256. / 255.; // fraction -> 0..1 (including 1)
+const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256.,  256. );
+const float ShiftRight8 = 1. / 256.;
+
+vec4 packDepthToRGBA( const in float v ) {
+  vec4 r = vec4( fract( v * PackFactors ), v );
+  r.yzw -= r.xyz * ShiftRight8; // tidy overflow
+  return r * PackUpscale;
+}
+
+void main() {
+
+  gl_FragColor = packDepthToRGBA( gl_FragCoord.z );
+
+}
+
+</script>
\ No newline at end of file
diff --git a/curl-noise/src/script.babel b/curl-noise/src/script.babel
new file mode 100644
index 0000000..d543712
--- /dev/null
+++ b/curl-noise/src/script.babel
@@ -0,0 +1,280 @@
+//　curl noise
+// https://petewerner.blogspot.jp/2015/02/intro-to-curl-noise.html
+
+// inspired by
+// https://www.clicktorelease.com/code/polygon-shredder/
+
+window.onload = () =>{
+  var webgl = new Webgl();
+  window.onresize = () => {
+    webgl.resize();
+  }
+}
+
+class Webgl{
+  constructor(){
+    this.size = 128;
+    this.widthW = document.body.clientWidth;
+    this.heightW = window.innerHeight;
+		this.init();
+  }
+  
+  init(){
+		this.container = document.getElementById( "wrapper" );
+		this.renderer = new THREE.WebGLRenderer( { antialias: true } );
+		// renderer.setPixelRatio( window.devicePixelRatio );
+		this.renderer.setSize( this.widthW, this.heightW );
+		this.container.appendChild( this.renderer.domElement );
+
+		this.scene = new THREE.Scene();
+
+		this.colorPallete = [
+		  new THREE.Color(0x0d0232),
+		  new THREE.Color(0xe50061),
+		  new THREE.Color(0x1cafc0),
+		  new THREE.Color(0xefcb03)
+		];
+
+		this.camera = new THREE.PerspectiveCamera( 45, this.widthW / this.heightW, .01, 10000 );
+		this.scene.add( this.camera );
+		this.camera.position.set(-0.1, 4.0, 0.1);
+
+		var controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
+
+		this.sim = new Simulation(this.renderer, this.size);
+
+		this.setLight();
+		this.createObj();
+
+		this.time = new THREE.Clock();
+		this.render();
+  }
+  
+  setLight(){
+  	this.light = new THREE.DirectionalLight( 0xFFAA55 );
+		this.light.position.set(-4, -6, 10);
+		this.light.castShadow = true;
+		this.shadowCamera = this.light.shadow.camera;
+    // this.shadowCamera.position.set(-4, -6, 10);
+		this.shadowCamera.lookAt( this.scene.position );
+
+		this.light.shadow.matrix.set(
+			0.5, 0.0, 0.0, 0.5,
+			0.0, 0.5, 0.0, 0.5,
+			0.0, 0.0, 0.5, 0.5,
+			0.0, 0.0, 0.0, 1.0
+		);
+
+		this.light.shadow.matrix.multiply( this.shadowCamera.projectionMatrix );
+		this.light.shadow.matrix.multiply( this.shadowCamera.matrixWorldInverse );
+
+		if(this.light.shadow.map === null){
+			this.light.shadow.mapSize.x = 2048;
+			this.light.shadow.mapSize.y = 2048;
+
+			var pars = { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
+
+			this.light.shadow.map = new THREE.WebGLRenderTarget( this.light.shadow.mapSize.x,this.light.shadow.mapSize.y, pars );
+			// light.shadow.map.texture.name = light.name + ".shadowMap";
+		}
+    
+    console.log(this.light);
+  }
+  
+  createObj(){
+  	// var originalG = new THREE.BoxBufferGeometry(1, 1, 1);
+  	var originalG = new THREE.OctahedronBufferGeometry(1, 0);
+    
+    
+		var geometry = new THREE.InstancedBufferGeometry();
+
+		// vertex
+		var vertices = originalG.attributes.position.clone();
+
+		geometry.addAttribute("position", vertices);
+
+		var normals = originalG.attributes.normal.clone();
+		geometry.addAttribute("normal", normals);
+
+	    // uv
+		var uvs = originalG.attributes.uv.clone();
+		geometry.addAttribute("uv", uvs);
+
+	    // index
+		// var indices = originalG.index.clone();
+		// geometry.setIndex(indices);
+
+
+		geometry.maxInstancedCount = this.sim.size * this.sim.size;
+
+		var nums = new THREE.InstancedBufferAttribute(new Float32Array(this.sim.size * this.sim.size * 1), 1, 1);
+		var randoms = new THREE.InstancedBufferAttribute(new Float32Array(this.sim.size * this.sim.size * 1), 1, 1);
+		var colors = new THREE.InstancedBufferAttribute(new Float32Array(this.sim.size * this.sim.size * 3), 3, 1);
+
+		for(var i = 0; i < nums.count; i++){
+			var _color = this.colorPallete[Math.floor(Math.random() * this.colorPallete.length)];
+
+			nums.setX(i, i);
+			randoms.setX(i, Math.random() * 0.5 + 1);
+			colors.setXYZ(i, _color.r, _color.g, _color.b);
+		}
+
+		geometry.addAttribute("aNum", nums);
+		geometry.addAttribute("aRandom", randoms);
+		geometry.addAttribute("aColor", colors);
+
+		var scale = {
+			x: 2, 
+			y: 8,
+			z: 2
+		}
+
+
+		this.material = new THREE.ShaderMaterial( {
+			uniforms: {
+				posMap: { type: "t", value: this.sim.gpuCompute.getCurrentRenderTarget(this.sim.pos).texture },
+				velMap: { type: "t", value: this.sim.gpuCompute.getCurrentRenderTarget(this.sim.vel).texture },
+				size: { type: "f", value: this.sim.size },
+
+				timer: { type: 'f', value: 0 },
+				boxScale: { type: 'v3', value: new THREE.Vector3(scale.x, scale.y, scale.z) },
+				meshScale: { type: 'f', value: 0.7 },
+
+				shadowMap: { type: 't', value: this.light.shadow.map },
+				shadowMapSize: {type: "v2", value: this.light.shadow.mapSize},
+				shadowBias: {type: "f", value: this.light.shadow.bias},
+				shadowRadius: {type: "f", value: this.light.shadow.radius},
+
+				// Line 217 in https://github.com/mrdoob/three.js/blob/dev/src/renderers/webgl/WebGLShadowMap.js 
+				shadowMatrix: { type: 'm4', value: this.light.shadow.matrix},
+				lightPosition: { type: 'v3', value: this.light.position }
+			},
+
+			vertexShader: document.getElementById( 'vs-particles' ).textContent,
+			fragmentShader: document.getElementById( 'fs-particles' ).textContent,
+			side: THREE.DoubleSide,
+			shading: THREE.FlatShading
+		} );
+
+		this.mesh = new THREE.Mesh( geometry, this.material );
+		this.scene.add( this.mesh );
+
+		this.shadowMaterial = new THREE.ShaderMaterial( {
+			uniforms: {
+				posMap: { type: "t", value: this.sim.gpuCompute.getCurrentRenderTarget(this.sim.pos).texture },
+				velMap: { type: "t", value: this.sim.gpuCompute.getCurrentRenderTarget(this.sim.vel).texture },
+				size: { type: "f", value: this.sim.size },
+
+				timer: { type: 'f', value: 0 },
+				boxScale: { type: 'v3', value: new THREE.Vector3(scale.x, scale.y, scale.z) },
+				meshScale: { type: 'f', value: 0.7 },
+
+				shadowMatrix: { type: 'm4', value: this.light.shadow.matrix},
+				lightPosition: { type: 'v3', value: this.light.position }
+			},
+			vertexShader: document.getElementById( 'vs-particles' ).textContent,
+			fragmentShader: document.getElementById( 'fs-particles-shadow' ).textContent,
+		  side: THREE.DoubleSide
+
+		} );
+
+  }
+  
+  render(){
+  	var delta = this.time.getDelta() * 4;
+		var time = this.time.elapsedTime;
+
+		this.sim.velUniforms.timer.value = time;
+		this.sim.velUniforms.delta.value = delta;
+
+		this.sim.gpuCompute.compute();
+
+		this.material.uniforms.posMap.value = this.sim.gpuCompute.getCurrentRenderTarget(this.sim.pos).texture;
+		this.material.uniforms.velMap.value = this.sim.gpuCompute.getCurrentRenderTarget(this.sim.vel).texture;
+
+		this.shadowMaterial.uniforms.posMap.value = this.sim.gpuCompute.getCurrentRenderTarget(this.sim.pos).texture;
+		this.shadowMaterial.uniforms.velMap.value = this.sim.gpuCompute.getCurrentRenderTarget(this.sim.vel).texture;
+
+		this.material.uniforms.timer.value = this.shadowMaterial.uniforms.timer.value = time;
+
+
+
+		this.mesh.material = this.shadowMaterial;
+		this.renderer.render( this.scene, this.shadowCamera, this.light.shadow.map);
+
+		this.renderer.setClearColor( 0x2e0232 );
+		this.mesh.material = this.material;
+		this.renderer.render( this.scene, this.camera );
+
+  	requestAnimationFrame(this.render.bind(this));
+  }
+  
+  resize(){
+    this.widthW = document.body.clientWidth;
+    this.heightW = window.innerHeight;
+    
+  	this.camera.aspect = this.widthW / this.heightW;
+		this.camera.updateProjectionMatrix();
+		this.renderer.setSize( this.widthW, this.heightW);
+  }
+}
+
+class Simulation{
+  constructor(renderer, size){
+    this.renderer = renderer;
+    this.size = size;
+    this.init();
+  }
+  
+  init(){
+    this.gpuCompute = new GPUComputationRenderer( this.size, this.size, this.renderer );
+
+    this.dataPos = this.gpuCompute.createTexture();
+    this.dataVel = this.gpuCompute.createTexture();
+    this.dataDef = this.gpuCompute.createTexture();
+
+
+    var posArray = this.dataPos.image.data;
+    var velArray = this.dataVel.image.data;
+    var defArray = this.dataDef.image.data;
+
+
+    for ( var i = 0, il = posArray.length; i < il; i += 4 ) {
+
+      var phi = Math.random() * 2 * Math.PI;
+      var theta = Math.random() * Math.PI;
+      var r = 0.8 + Math.random() * 2;
+
+      defArray[ i + 0 ] = posArray[ i + 0 ] = r * Math.sin( theta) * Math.cos( phi );
+      defArray[ i + 1 ] = posArray[ i + 1 ] = r * Math.sin( theta) * Math.sin( phi );
+      defArray[ i + 2 ] = posArray[ i + 2 ] = r * Math.cos( theta );
+
+      velArray[ i + 3 ] = Math.random() * 100; // frames life
+      // if(i < 50) console.log(velArray[ i + 3 ])
+    }
+
+    this.def = this.gpuCompute.addVariable( "defTex", document.getElementById( 'simulation_def' ).textContent, this.dataDef );
+    this.vel = this.gpuCompute.addVariable( "velTex", document.getElementById( 'simulation_vel' ).textContent, this.dataVel );
+    this.pos = this.gpuCompute.addVariable( "posTex", document.getElementById( 'simulation_pos' ).textContent, this.dataPos );
+
+    this.gpuCompute.setVariableDependencies( this.def, [ this.pos, this.vel, this.def ] );
+    this.gpuCompute.setVariableDependencies( this.vel, [ this.pos, this.vel, this.def ] );
+    this.gpuCompute.setVariableDependencies( this.pos, [ this.pos, this.vel, this.def ] );
+
+
+    // var posUniforms = this.pos.material.uniforms;
+    this.velUniforms = this.vel.material.uniforms;
+
+    this.velUniforms.timer = { value: 0.0 };
+    this.velUniforms.delta = { value: 0.0 };
+    this.velUniforms.speed = { value: 0.5 };
+    this.velUniforms.factor = { value: 0.5 };
+    this.velUniforms.evolution = { value: 0.5 };
+    this.velUniforms.radius = { value: 2.0 };
+
+    var error = this.gpuCompute.init();
+    if ( error !== null ) {
+        console.error( error );
+    }
+  }
+}
\ No newline at end of file
diff --git a/curl-noise/src/style.css b/curl-noise/src/style.css
new file mode 100644
index 0000000..952313a
--- /dev/null
+++ b/curl-noise/src/style.css
@@ -0,0 +1,5 @@
+body{
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/custom-right-click-context-menu/README.markdown b/custom-right-click-context-menu/README.markdown
new file mode 100644
index 0000000..c7461e5
--- /dev/null
+++ b/custom-right-click-context-menu/README.markdown
@@ -0,0 +1,5 @@
+# Custom Right-Click (Context) Menu
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/knyttneve/pen/YzxEBew](https://codepen.io/knyttneve/pen/YzxEBew).
+
+
diff --git a/custom-right-click-context-menu/dist/index.html b/custom-right-click-context-menu/dist/index.html
new file mode 100644
index 0000000..d2626d4
--- /dev/null
+++ b/custom-right-click-context-menu/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Custom Right-Click (Context) Menu</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="video-bg">
+  <video width="100%" height="100%" muted autoplay loop>
+    <source src="https://assets.codepen.io/344846/cm.mp4" type="video/mp4">
+  </video>
+</div>
+<div class="right-click">Right-click anywhere</div>
+<div class="target-light target">Light Menu</div>
+<div class="target-dark target">Dark Menu</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/custom-right-click-context-menu/dist/script.js b/custom-right-click-context-menu/dist/script.js
new file mode 100644
index 0000000..83fe9fb
--- /dev/null
+++ b/custom-right-click-context-menu/dist/script.js
@@ -0,0 +1,173 @@
+class ContextMenu {
+  constructor({ target = null, menuItems = [], mode = "dark" }) {
+    this.target = target;
+    this.menuItems = menuItems;
+    this.mode = mode;
+    this.targetNode = this.getTargetNode();
+    this.menuItemsNode = this.getMenuItemsNode();
+    this.isOpened = false;
+  }
+
+  getTargetNode() {
+    const nodes = document.querySelectorAll(this.target);
+
+    if (nodes && nodes.length !== 0) {
+      return nodes;
+    } else {
+      console.error(`getTargetNode :: "${this.target}" target not found`);
+      return [];
+    }
+  }
+
+  getMenuItemsNode() {
+    const nodes = [];
+
+    if (!this.menuItems) {
+      console.error("getMenuItemsNode :: Please enter menu items");
+      return [];
+    }
+
+    this.menuItems.forEach((data, index) => {
+      const item = this.createItemMarkup(data);
+      item.firstChild.setAttribute(
+      "style",
+      `animation-delay: ${index * 0.08}s`);
+
+      nodes.push(item);
+    });
+
+    return nodes;
+  }
+
+  createItemMarkup(data) {
+    const button = document.createElement("BUTTON");
+    const item = document.createElement("LI");
+
+    button.innerHTML = data.content;
+    button.classList.add("contextMenu-button");
+    item.classList.add("contextMenu-item");
+
+    if (data.divider) item.setAttribute("data-divider", data.divider);
+    item.appendChild(button);
+
+    if (data.events && data.events.length !== 0) {
+      Object.entries(data.events).forEach(event => {
+        const [key, value] = event;
+        button.addEventListener(key, value);
+      });
+    }
+
+    return item;
+  }
+
+  renderMenu() {
+    const menuContainer = document.createElement("UL");
+
+    menuContainer.classList.add("contextMenu");
+    menuContainer.setAttribute("data-theme", this.mode);
+
+    this.menuItemsNode.forEach(item => menuContainer.appendChild(item));
+
+    return menuContainer;
+  }
+
+  closeMenu(menu) {
+    if (this.isOpened) {
+      this.isOpened = false;
+      menu.remove();
+    }
+  }
+
+  init() {
+    const contextMenu = this.renderMenu();
+    document.addEventListener("click", () => this.closeMenu(contextMenu));
+    window.addEventListener("blur", () => this.closeMenu(contextMenu));
+    document.addEventListener("contextmenu", e => {
+      this.targetNode.forEach(target => {
+        if (!e.target.contains(target)) {
+          contextMenu.remove();
+        }
+      });
+    });
+
+    this.targetNode.forEach(target => {
+      target.addEventListener("contextmenu", e => {
+        e.preventDefault();
+        this.isOpened = true;
+
+        const { clientX, clientY } = e;
+        document.body.appendChild(contextMenu);
+
+        const positionY =
+        clientY + contextMenu.scrollHeight >= window.innerHeight ?
+        window.innerHeight - contextMenu.scrollHeight - 20 :
+        clientY;
+        const positionX =
+        clientX + contextMenu.scrollWidth >= window.innerWidth ?
+        window.innerWidth - contextMenu.scrollWidth - 20 :
+        clientX;
+
+        contextMenu.setAttribute(
+        "style",
+        `--width: ${contextMenu.scrollWidth}px;
+          --height: ${contextMenu.scrollHeight}px;
+          --top: ${positionY}px;
+          --left: ${positionX}px;`);
+
+      });
+    });
+  }}
+
+
+const copyIcon = `<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" style="margin-right: 7px" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
+
+const cutIcon = `<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" style="margin-right: 7px" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="6" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><line x1="20" y1="4" x2="8.12" y2="15.88"></line><line x1="14.47" y1="14.48" x2="20" y2="20"></line><line x1="8.12" y1="8.12" x2="12" y2="12"></line></svg>`;
+
+const pasteIcon = `<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" style="margin-right: 7px; position: relative; top: -1px" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>`;
+
+const downloadIcon = `<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" style="margin-right: 7px; position: relative; top: -1px" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`;
+
+const deleteIcon = `<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" fill="none" style="margin-right: 7px" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>`;
+
+const menuItems = [
+{
+  content: `${copyIcon}Copy`,
+  events: {
+    click: e => console.log(e, "Copy Button Click")
+    // mouseover: () => console.log("Copy Button Mouseover")
+    // You can use any event listener from here
+  } },
+
+{ content: `${pasteIcon}Paste` },
+{ content: `${cutIcon}Cut` },
+{ content: `${downloadIcon}Download` },
+{
+  content: `${deleteIcon}Delete`,
+  divider: "top" // top, bottom, top-bottom
+}];
+
+
+const light = new ContextMenu({
+  target: ".target-light",
+  mode: "light", // default: "dark"
+  menuItems });
+
+
+light.init();
+
+const dark = new ContextMenu({
+  target: ".target-dark",
+  menuItems });
+
+
+dark.init();
+
+// remove message
+
+function removeMessage() {
+  const message = document.querySelector(".right-click");
+  if (message) message.remove();
+}
+
+window.addEventListener("click", removeMessage);
+window.addEventListener("contextmenu", removeMessage);
\ No newline at end of file
diff --git a/custom-right-click-context-menu/dist/style.css b/custom-right-click-context-menu/dist/style.css
new file mode 100644
index 0000000..014ba89
--- /dev/null
+++ b/custom-right-click-context-menu/dist/style.css
@@ -0,0 +1,190 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
+* {
+  box-sizing: border-box;
+  font-family: "Inter", sans-serif;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.video-bg {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.video-bg video {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.target {
+  width: 50%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 2vw;
+}
+
+.target-light {
+  left: 0;
+}
+
+.target-dark {
+  right: 0;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  overflow: hidden;
+}
+
+.right-click {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  pointer-events: none;
+  padding: 2vw;
+  border-radius: 1vw;
+  font-size: 2.4vw;
+  background-color: #fff;
+}
+
+/* Context Menu */
+.contextMenu {
+  --menu-border: rgba(255, 255, 255, 0.08);
+  --menu-bg: linear-gradient(
+    45deg,
+    rgba(10, 20, 28, 0.2) 0%,
+    rgba(10, 20, 28, 0.7) 100%
+  );
+  --item-border: rgba(255, 255, 255, 0.1);
+  --item-color: #fff;
+  --item-bg-hover: rgba(255, 255, 255, 0.1);
+  height: 0;
+  overflow: hidden;
+  background: var(--menu-bg);
+  -webkit-backdrop-filter: blur(5px);
+          backdrop-filter: blur(5px);
+  position: fixed;
+  top: var(--top);
+  left: var(--left);
+  -webkit-animation: menuAnimation 0.4s 0s both;
+          animation: menuAnimation 0.4s 0s both;
+  transform-origin: left;
+  list-style: none;
+  margin: 4px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  z-index: 999999999;
+  box-shadow: 0 0 0 1px var(--menu-border), 0 2px 2px rgba(0, 0, 0, 0.03), 0 4px 4px rgba(0, 0, 0, 0.04), 0 10px 8px rgba(0, 0, 0, 0.05), 0 15px 15px rgba(0, 0, 0, 0.06), 0 30px 30px rgba(0, 0, 0, 0.07), 0 70px 65px rgba(0, 0, 0, 0.09);
+}
+.contextMenu-item {
+  padding: 4px;
+}
+.contextMenu-item[data-divider=top] {
+  border-top: 1px solid;
+}
+.contextMenu-item[data-divider=bottom] {
+  border-bottom: 1px solid;
+}
+.contextMenu-item[data-divider=top-bottom] {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+}
+.contextMenu-item[data-divider] {
+  border-color: var(--item-border);
+}
+.contextMenu-button {
+  color: var(--item-color);
+  background: 0;
+  border: 0;
+  white-space: nowrap;
+  width: 100%;
+  border-radius: 4px;
+  padding: 6px 24px 6px 7px;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  width: 100%;
+  -webkit-animation: menuItemAnimation 0.2s 0s both;
+          animation: menuItemAnimation 0.2s 0s both;
+  font-family: "Inter", sans-serif;
+  cursor: pointer;
+}
+.contextMenu-button:hover {
+  background-color: var(--item-bg-hover);
+}
+.contextMenu[data-theme=light] {
+  --menu-bg: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.45) 0%,
+    rgba(255, 255, 255, 0.85) 100%
+  );
+  --menu-border: rgba(0, 0, 0, 0.08);
+  --item-border: rgba(0, 0, 0, 0.1);
+  --item-color: rgb(10, 20, 28);
+  --item-bg-hover: rgba(10, 20, 28, 0.09);
+}
+
+@-webkit-keyframes menuAnimation {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    height: var(--height);
+    opacity: 1;
+    border-radius: 8px;
+    transform: scale(1);
+  }
+}
+
+@keyframes menuAnimation {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    height: var(--height);
+    opacity: 1;
+    border-radius: 8px;
+    transform: scale(1);
+  }
+}
+@-webkit-keyframes menuItemAnimation {
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes menuItemAnimation {
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
\ No newline at end of file
diff --git a/custom-right-click-context-menu/license.txt b/custom-right-click-context-menu/license.txt
new file mode 100644
index 0000000..6739230
--- /dev/null
+++ b/custom-right-click-context-menu/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Mert Cukuren (https://codepen.io/knyttneve/pen/YzxEBew)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/custom-right-click-context-menu/src/index.html b/custom-right-click-context-menu/src/index.html
new file mode 100644
index 0000000..d697296
--- /dev/null
+++ b/custom-right-click-context-menu/src/index.html
@@ -0,0 +1,8 @@
+<div class="video-bg">
+  <video width="100%" height="100%" muted autoplay loop>
+    <source src="https://assets.codepen.io/344846/cm.mp4" type="video/mp4">
+  </video>
+</div>
+<div class="right-click">Right-click anywhere</div>
+<div class="target-light target">Light Menu</div>
+<div class="target-dark target">Dark Menu</div>
\ No newline at end of file
diff --git a/custom-right-click-context-menu/src/script.babel b/custom-right-click-context-menu/src/script.babel
new file mode 100644
index 0000000..0ee6efd
--- /dev/null
+++ b/custom-right-click-context-menu/src/script.babel
@@ -0,0 +1,173 @@
+class ContextMenu {
+  constructor({ target = null, menuItems = [], mode = "dark" }) {
+    this.target = target;
+    this.menuItems = menuItems;
+    this.mode = mode;
+    this.targetNode = this.getTargetNode();
+    this.menuItemsNode = this.getMenuItemsNode();
+    this.isOpened = false;
+  }
+
+  getTargetNode() {
+    const nodes = document.querySelectorAll(this.target);
+
+    if (nodes && nodes.length !== 0) {
+      return nodes;
+    } else {
+      console.error(`getTargetNode :: "${this.target}" target not found`);
+      return [];
+    }
+  }
+
+  getMenuItemsNode() {
+    const nodes = [];
+
+    if (!this.menuItems) {
+      console.error("getMenuItemsNode :: Please enter menu items");
+      return [];
+    }
+
+    this.menuItems.forEach((data, index) => {
+      const item = this.createItemMarkup(data);
+      item.firstChild.setAttribute(
+        "style",
+        `animation-delay: ${index * 0.08}s`
+      );
+      nodes.push(item);
+    });
+
+    return nodes;
+  }
+
+  createItemMarkup(data) {
+    const button = document.createElement("BUTTON");
+    const item = document.createElement("LI");
+
+    button.innerHTML = data.content;
+    button.classList.add("contextMenu-button");
+    item.classList.add("contextMenu-item");
+
+    if (data.divider) item.setAttribute("data-divider", data.divider);
+    item.appendChild(button);
+
+    if (data.events && data.events.length !== 0) {
+      Object.entries(data.events).forEach((event) => {
+        const [key, value] = event;
+        button.addEventListener(key, value);
+      });
+    }
+
+    return item;
+  }
+
+  renderMenu() {
+    const menuContainer = document.createElement("UL");
+
+    menuContainer.classList.add("contextMenu");
+    menuContainer.setAttribute("data-theme", this.mode);
+
+    this.menuItemsNode.forEach((item) => menuContainer.appendChild(item));
+
+    return menuContainer;
+  }
+
+  closeMenu(menu) {
+    if (this.isOpened) {
+      this.isOpened = false;
+      menu.remove();
+    }
+  }
+
+  init() {
+    const contextMenu = this.renderMenu();
+    document.addEventListener("click", () => this.closeMenu(contextMenu));
+    window.addEventListener("blur", () => this.closeMenu(contextMenu));
+    document.addEventListener("contextmenu", (e) => {
+      this.targetNode.forEach((target) => {
+        if (!e.target.contains(target)) {
+          contextMenu.remove();
+        }
+      });
+    });
+
+    this.targetNode.forEach((target) => {
+      target.addEventListener("contextmenu", (e) => {
+        e.preventDefault();
+        this.isOpened = true;
+
+        const { clientX, clientY } = e;
+        document.body.appendChild(contextMenu);
+
+        const positionY =
+          clientY + contextMenu.scrollHeight >= window.innerHeight
+            ? window.innerHeight - contextMenu.scrollHeight - 20
+            : clientY;
+        const positionX =
+          clientX + contextMenu.scrollWidth >= window.innerWidth
+            ? window.innerWidth - contextMenu.scrollWidth - 20
+            : clientX;
+
+        contextMenu.setAttribute(
+          "style",
+          `--width: ${contextMenu.scrollWidth}px;
+          --height: ${contextMenu.scrollHeight}px;
+          --top: ${positionY}px;
+          --left: ${positionX}px;`
+        );
+      });
+    });
+  }
+}
+
+const copyIcon = `<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" style="margin-right: 7px" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
+
+const cutIcon = `<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" style="margin-right: 7px" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="6" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><line x1="20" y1="4" x2="8.12" y2="15.88"></line><line x1="14.47" y1="14.48" x2="20" y2="20"></line><line x1="8.12" y1="8.12" x2="12" y2="12"></line></svg>`;
+
+const pasteIcon = `<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" style="margin-right: 7px; position: relative; top: -1px" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>`;
+
+const downloadIcon = `<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" style="margin-right: 7px; position: relative; top: -1px" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`;
+
+const deleteIcon = `<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" fill="none" style="margin-right: 7px" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>`;
+
+const menuItems = [
+  {
+    content: `${copyIcon}Copy`,
+    events: {
+      click: (e) => console.log(e, "Copy Button Click")
+      // mouseover: () => console.log("Copy Button Mouseover")
+      // You can use any event listener from here
+    }
+  },
+  { content: `${pasteIcon}Paste` },
+  { content: `${cutIcon}Cut` },
+  { content: `${downloadIcon}Download` },
+  {
+    content: `${deleteIcon}Delete`,
+    divider: "top" // top, bottom, top-bottom
+  }
+];
+
+const light = new ContextMenu({
+  target: ".target-light",
+  mode: "light", // default: "dark"
+  menuItems
+});
+
+light.init();
+
+const dark = new ContextMenu({
+  target: ".target-dark",
+  menuItems
+});
+
+dark.init();
+
+// remove message
+
+function removeMessage() {
+  const message = document.querySelector(".right-click");
+  if (message) message.remove();
+}
+
+window.addEventListener("click", removeMessage);
+window.addEventListener("contextmenu", removeMessage);
diff --git a/custom-right-click-context-menu/src/style.scss b/custom-right-click-context-menu/src/style.scss
new file mode 100644
index 0000000..b73da3a
--- /dev/null
+++ b/custom-right-click-context-menu/src/style.scss
@@ -0,0 +1,180 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
+
+* {
+  box-sizing: border-box;
+  font-family: "Inter", sans-serif;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.video-bg {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.target {
+  width: 50%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(#fff, 0.5);
+  font-size: 2vw;
+}
+
+.target-light {
+  left: 0;
+}
+
+.target-dark {
+  right: 0;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  overflow: hidden;
+}
+
+.right-click {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  pointer-events: none;
+  padding: 2vw;
+  border-radius: 1vw;
+  font-size: 2.4vw;
+  background-color: #fff;
+}
+
+/* Context Menu */
+
+.contextMenu {
+  --menu-border: rgba(255, 255, 255, 0.08);
+  --menu-bg: linear-gradient(
+    45deg,
+    rgba(10, 20, 28, 0.2) 0%,
+    rgba(10, 20, 28, 0.7) 100%
+  );
+  --item-border: rgba(255, 255, 255, 0.1);
+  --item-color: #fff;
+  --item-bg-hover: rgba(255, 255, 255, 0.1);
+
+  height: 0;
+  overflow: hidden;
+  background: var(--menu-bg);
+  backdrop-filter: blur(5px);
+  position: fixed;
+  top: var(--top);
+  left: var(--left);
+  animation: menuAnimation 0.4s 0s both;
+  transform-origin: left;
+  list-style: none;
+  margin: 4px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  z-index: 999999999;
+  box-shadow: 0 0 0 1px var(--menu-border), 0 2px 2px rgb(0 0 0 / 3%),
+    0 4px 4px rgb(0 0 0 / 4%), 0 10px 8px rgb(0 0 0 / 5%),
+    0 15px 15px rgb(0 0 0 / 6%), 0 30px 30px rgb(0 0 0 / 7%),
+    0 70px 65px rgb(0 0 0 / 9%);
+
+  &-item {
+    padding: 4px;
+  }
+
+  &-item[data-divider="top"] {
+    border-top: 1px solid;
+  }
+
+  &-item[data-divider="bottom"] {
+    border-bottom: 1px solid;
+  }
+
+  &-item[data-divider="top-bottom"] {
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+  }
+
+  &-item[data-divider] {
+    border-color: var(--item-border);
+  }
+
+  &-button {
+    color: var(--item-color);
+    background: 0;
+    border: 0;
+    white-space: nowrap;
+    width: 100%;
+    border-radius: 4px;
+    padding: 6px 24px 6px 7px;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    width: 100%;
+    animation: menuItemAnimation 0.2s 0s both;
+    font-family: "Inter", sans-serif;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--item-bg-hover);
+    }
+  }
+
+  &[data-theme="light"] {
+    --menu-bg: linear-gradient(
+      45deg,
+      rgba(255, 255, 255, 0.45) 0%,
+      rgba(255, 255, 255, 0.85) 100%
+    );
+    --menu-border: rgba(0, 0, 0, 0.08);
+    --item-border: rgba(0, 0, 0, 0.1);
+    --item-color: rgb(10, 20, 28);
+    --item-bg-hover: rgba(10, 20, 28, 0.09);
+  }
+}
+
+@keyframes menuAnimation {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  100% {
+    height: var(--height);
+    opacity: 1;
+    border-radius: 8px;
+    transform: scale(1);
+  }
+}
+
+@keyframes menuItemAnimation {
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
diff --git a/customer-management-ui/README.markdown b/customer-management-ui/README.markdown
new file mode 100644
index 0000000..cb472b2
--- /dev/null
+++ b/customer-management-ui/README.markdown
@@ -0,0 +1,6 @@
+# Customer Management UI
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/TurkAysenur/pen/NWRqoyL](https://codepen.io/TurkAysenur/pen/NWRqoyL).
+
+Inspired by  Shuvo Cold
+"https://dribbble.com/shots/14673441-Transport-Service-Dashboard"
diff --git a/customer-management-ui/dist/index.html b/customer-management-ui/dist/index.html
new file mode 100644
index 0000000..6f24f9f
--- /dev/null
+++ b/customer-management-ui/dist/index.html
@@ -0,0 +1,499 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Customer Management UI</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="wrapper">
+ <div class="left-side">
+  <svg viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="active">
+   <path d="M197.3 170.7h-160A37.4 37.4 0 010 133.3v-96A37.4 37.4 0 0137.3 0h160a37.4 37.4 0 0137.4 37.3v96a37.4 37.4 0 01-37.4 37.4zM37.3 32c-3 0-5.3 2.4-5.3 5.3v96c0 3 2.4 5.4 5.3 5.4h160c3 0 5.4-2.4 5.4-5.4v-96c0-3-2.4-5.3-5.4-5.3zm0 0M197.3 512h-160A37.4 37.4 0 010 474.7v-224a37.4 37.4 0 0137.3-37.4h160a37.4 37.4 0 0137.4 37.4v224a37.4 37.4 0 01-37.4 37.3zm-160-266.7c-3 0-5.3 2.4-5.3 5.4v224c0 3 2.4 5.3 5.3 5.3h160c3 0 5.4-2.4 5.4-5.3v-224c0-3-2.4-5.4-5.4-5.4zm0 0M474.7 512h-160a37.4 37.4 0 01-37.4-37.3v-96a37.4 37.4 0 0137.4-37.4h160a37.4 37.4 0 0137.3 37.4v96a37.4 37.4 0 01-37.3 37.3zm-160-138.7c-3 0-5.4 2.4-5.4 5.4v96c0 3 2.4 5.3 5.4 5.3h160c3 0 5.3-2.4 5.3-5.3v-96c0-3-2.4-5.4-5.3-5.4zm0 0M474.7 298.7h-160a37.4 37.4 0 01-37.4-37.4v-224A37.4 37.4 0 01314.7 0h160A37.4 37.4 0 01512 37.3v224a37.4 37.4 0 01-37.3 37.4zM314.7 32c-3 0-5.4 2.4-5.4 5.3v224c0 3 2.4 5.4 5.4 5.4h160c3 0 5.3-2.4 5.3-5.4v-224c0-3-2.4-5.3-5.3-5.3zm0 0" /></svg>
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+   <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" /></svg>
+  <svg viewBox="0 1 511 512" fill="currentColor">
+   <path d="M498.7 222.7L289.8 13.8a46.8 46.8 0 00-66.7 0L14.4 222.6l-.2.2A47.2 47.2 0 0047 303h8.3v153.7a55.2 55.2 0 0055.2 55.2h81.7a15 15 0 0015-15V376.5a25.2 25.2 0 0125.2-25.2h48.2a25.2 25.2 0 0125.1 25.2V497a15 15 0 0015 15h81.8a55.2 55.2 0 0055.1-55.2V303.1h7.7a47.2 47.2 0 0033.4-80.4zm-21.2 45.4a17 17 0 01-12.2 5h-22.7a15 15 0 00-15 15v168.7a25.2 25.2 0 01-25.1 25.2h-66.8V376.5a55.2 55.2 0 00-55.1-55.2h-48.2a55.2 55.2 0 00-55.2 55.2V482h-66.7a25.2 25.2 0 01-25.2-25.2V288.1a15 15 0 00-15-15h-23A17.2 17.2 0 0135.5 244L244.4 35a17 17 0 0124.2 0l208.8 208.8v.1a17.2 17.2 0 010 24.2zm0 0" /></svg>
+  <svg viewBox="0 0 512 512" fill="currentColor">
+   <path d="M467 76H45a45 45 0 00-45 45v270a45 45 0 0045 45h422a45 45 0 0045-45V121a45 45 0 00-45-45zm-6.3 30L287.8 278a44.7 44.7 0 01-63.6 0L51.3 106h409.4zM30 384.9V127l129.6 129L30 384.9zM51.3 406L181 277.2l22 22c14.2 14.1 33 22 53.1 22 20 0 38.9-7.9 53-22l22-22L460.8 406H51.3zM482 384.9L352.4 256 482 127V385z" /></svg>
+  <svg viewBox="0 0 512 512" fill="currentColor">
+   <path d="M272 512h-32c-26 0-47.2-21.1-47.2-47.1V454c-11-3.5-21.8-8-32.1-13.3l-7.7 7.7a47.1 47.1 0 01-66.7 0l-22.7-22.7a47.1 47.1 0 010-66.7l7.7-7.7c-5.3-10.3-9.8-21-13.3-32.1H47.1c-26 0-47.1-21.1-47.1-47.1v-32.2c0-26 21.1-47.1 47.1-47.1H58c3.5-11 8-21.8 13.3-32.1l-7.7-7.7a47.1 47.1 0 010-66.7l22.7-22.7a47.1 47.1 0 0166.7 0l7.7 7.7c10.3-5.3 21-9.8 32.1-13.3V47.1c0-26 21.1-47.1 47.1-47.1h32.2c26 0 47.1 21.1 47.1 47.1V58c11 3.5 21.8 8 32.1 13.3l7.7-7.7a47.1 47.1 0 0166.7 0l22.7 22.7a47.1 47.1 0 010 66.7l-7.7 7.7c5.3 10.3 9.8 21 13.3 32.1h10.9c26 0 47.1 21.1 47.1 47.1v32.2c0 26-21.1 47.1-47.1 47.1H454c-3.5 11-8 21.8-13.3 32.1l7.7 7.7a47.1 47.1 0 010 66.7l-22.7 22.7a47.1 47.1 0 01-66.7 0l-7.7-7.7c-10.3 5.3-21 9.8-32.1 13.3v10.9c0 26-21.1 47.1-47.1 47.1zM165.8 409.2a176.8 176.8 0 0045.8 19 15 15 0 0111.3 14.5V465c0 9.4 7.7 17.1 17.1 17.1h32.2c9.4 0 17.1-7.7 17.1-17.1v-22.2a15 15 0 0111.3-14.5c16-4.2 31.5-10.6 45.8-19a15 15 0 0118.2 2.3l15.7 15.7a17.1 17.1 0 0024.2 0l22.8-22.8a17.1 17.1 0 000-24.2l-15.7-15.7a15 15 0 01-2.3-18.2 176.8 176.8 0 0019-45.8 15 15 0 0114.5-11.3H465c9.4 0 17.1-7.7 17.1-17.1v-32.2c0-9.4-7.7-17.1-17.1-17.1h-22.2a15 15 0 01-14.5-11.2c-4.2-16.1-10.6-31.6-19-45.9a15 15 0 012.3-18.2l15.7-15.7a17.1 17.1 0 000-24.2l-22.8-22.8a17.1 17.1 0 00-24.2 0l-15.7 15.7a15 15 0 01-18.2 2.3 176.8 176.8 0 00-45.8-19 15 15 0 01-11.3-14.5V47c0-9.4-7.7-17.1-17.1-17.1h-32.2c-9.4 0-17.1 7.7-17.1 17.1v22.2a15 15 0 01-11.3 14.5c-16 4.2-31.5 10.6-45.8 19a15 15 0 01-18.2-2.3l-15.7-15.7a17.1 17.1 0 00-24.2 0l-22.8 22.8a17.1 17.1 0 000 24.2l15.7 15.7a15 15 0 012.3 18.2 176.8 176.8 0 00-19 45.8 15 15 0 01-14.5 11.3H47c-9.4 0-17.1 7.7-17.1 17.1v32.2c0 9.4 7.7 17.1 17.1 17.1h22.2a15 15 0 0114.5 11.3c4.2 16 10.6 31.5 19 45.8a15 15 0 01-2.3 18.2l-15.7 15.7a17.1 17.1 0 000 24.2l22.8 22.8a17.1 17.1 0 0024.2 0l15.7-15.7a15 15 0 0118.2-2.3z" />
+   <path d="M256 367.4c-61.4 0-111.4-50-111.4-111.4s50-111.4 111.4-111.4 111.4 50 111.4 111.4-50 111.4-111.4 111.4zm0-192.8a81.5 81.5 0 000 162.8 81.5 81.5 0 000-162.8z" /></svg>
+  <svg viewBox="0 0 512 512" fill="currentColor">
+   <path d="M255.2 468.6H63.8a21.3 21.3 0 01-21.3-21.2V64.6c0-11.7 9.6-21.2 21.3-21.2h191.4a21.2 21.2 0 100-42.5H63.8A63.9 63.9 0 000 64.6v382.8A63.9 63.9 0 0063.8 511H255a21.2 21.2 0 100-42.5z" />
+   <path d="M505.7 240.9L376.4 113.3a21.3 21.3 0 10-29.9 30.3l92.4 91.1H191.4a21.2 21.2 0 100 42.6h247.5l-92.4 91.1a21.3 21.3 0 1029.9 30.3l129.3-127.6a21.3 21.3 0 000-30.2z" /></svg>
+ </div>
+ <div class="main-container">
+  <div class="header">
+   <div class="logo">Rent
+    <span class=logo-det>Cr</span></div>
+   <a class="header-link active" href="#"><svg viewBox="-6 0 512 512" fill="currentColor">
+     <path d="M227.7 357.5a15.1 15.1 0 0021.3 0l54-54a15.1 15.1 0 10-21.4-21.3l-43.3 43.2-19.7-19.7a15.1 15.1 0 00-21.4 21.4zm0 0" />
+     <path d="M250.1 439.8a120.1 120.1 0 10-120-120c0 66.2 53.8 120 120 120zm0-209.7a89.9 89.9 0 010 179.5 89.9 89.9 0 010-179.5zm0 0" />
+     <path d="M451.3 32.2h-27.5v-17a15.1 15.1 0 00-30.3 0v17h-29.7v-17a15.1 15.1 0 00-30.2 0v17h-167v-17a15.1 15.1 0 00-30.2 0v17h-29.7v-17a15.1 15.1 0 00-30.2 0v17H48.9A49 49 0 000 81v382A49 49 0 0048.9 512h402.4a49 49 0 0049-48.9v-382a49 49 0 00-49-49zm18.7 431c0 10.2-8.4 18.6-18.7 18.6H49A18.7 18.7 0 0130.2 463V158H470zM30.2 81c0-10.3 8.4-18.7 18.7-18.7h27.6v17.1a15.1 15.1 0 0030.2 0v-17h29.7v17a15.1 15.1 0 0030.3 0v-17h166.9v17a15.1 15.1 0 0030.2 0v-17h29.7v17a15.1 15.1 0 0030.3 0v-17h27.5c10.3 0 18.7 8.3 18.7 18.6v46.6H30.2zm0 0" />
+    </svg>
+    Bookings
+   </a>
+   <a class="header-link" href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+     <path d="M10 13a2 2 0 110-4 2 2 0 010 4zm0-2.5a.5.5 0 100 1 .5.5 0 000-1z" />
+     <path d="M20.3 11.8h-8.8a.8.8 0 010-1.6h8.8a.8.8 0 010 1.6zM8.5 11.8H3.7a.8.8 0 010-1.6h4.8a.8.8 0 010 1.6zM15 19a2 2 0 110-4 2 2 0 010 4zm0-2.5a.5.5 0 100 1 .5.5 0 000-1z" />
+     <path d="M20.3 17.8h-3.8a.8.8 0 010-1.6h3.8a.8.8 0 010 1.6zM13.5 17.8H3.7a.8.8 0 010-1.6h9.8a.8.8 0 010 1.6z" />
+     <path d="M21.3 23H2.6A2.8 2.8 0 010 20.2V3.9C0 2.1 1.2 1 2.8 1h18.4C22.9 1 24 2.2 24 3.8v16.4c0 1.6-1.2 2.8-2.8 2.8zM2.6 2.5c-.6 0-1.2.6-1.2 1.3v16.4c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3V3.9c0-.7-.6-1.3-1.3-1.3z" />
+     <path d="M23.3 6H.6a.8.8 0 010-1.5h22.6a.8.8 0 010 1.5z" />
+    </svg>
+    Controller
+   </a>
+   <a class="header-link" href="#"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+     <path d="M500 113.3C326.1 78.7 337.4 80.5 333.4 81.2L281 91.7A111.2 111.2 0 00176 17c-48.6 0-90 31.3-105 74.8L18 81.3A15 15 0 000 96v352a15 15 0 0012 14.7l162.2 32.2c3.6.4-7.6 2.3 161.8-31.6l158 31.4a15 15 0 0018-14.7V128a15 15 0 00-12-14.7zM176 47a81 81 0 0181 81c0 37.7-60.3 133.3-81 165-20.7-31.6-81-127.3-81-165a81 81 0 0181-81zM30 114.2l35.2 7a112 112 0 00-.2 6.8c0 25 16.4 65.4 50 123.4 19.7 33.9 39 63 46 73.2v137.1l-131-26zm161 210.4c7-10.2 26.3-39.3 46-73.2 33.6-58 50-98.4 50-123.4 0-2.3 0-4.6-.2-6.9l34.2-6.8v321.4l-130 26zm291 137.1l-131-26V114.3l131 26z" />
+     <path d="M176 175a47 47 0 10-.1-94.1 47 47 0 00.1 94zm0-64a17 17 0 110 34 17 17 0 010-34z" /></svg>
+    Map
+   </a>
+   <a class="header-link" href="#"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+     <path d="M76 240c12.1 0 23.1-4.8 31.2-12.6l44.2 22A44.9 44.9 0 00196 300a45 45 0 0040.6-64.4l60-60a45 45 0 0062.3-54l52.2-39.2a45 45 0 10-18-24l-52.2 39.2a45 45 0 00-65.5 56.8l-60 60a44.7 44.7 0 00-50.6 8.2l-44.2-22A44.9 44.9 0 0076 150a45 45 0 000 90zM436 30a15 15 0 110 30 15 15 0 010-30zm-120 90a15 15 0 110 30 15 15 0 010-30zM196 240a15 15 0 110 30 15 15 0 010-30zM76 180a15 15 0 110 30 15 15 0 010-30zm0 0" />
+     <path d="M497 482h-16V165a15 15 0 00-15-15h-60a15 15 0 00-15 15v317h-30V255a15 15 0 00-15-15h-60a15 15 0 00-15 15v227h-30V375a15 15 0 00-15-15h-60a15 15 0 00-15 15v107h-30V315a15 15 0 00-15-15H46a15 15 0 00-15 15v167H15a15 15 0 100 30h482a15 15 0 100-30zm-76-302h30v302h-30zm-120 90h30v212h-30zM181 390h30v92h-30zM61 330h30v152H61zm0 0" />
+    </svg>
+    Reports
+   </a>
+   <div class="user-info">
+    <button class="button">All
+     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
+      <path d="M6 9l6 6 6-6" /></svg>
+    </button>
+    <div class="user-name">Mike J</div>
+    <svg class="profile" viewBox="-42 0 512 512" fill="currentColor">
+     <path d="M210.4 246.6c33.8 0 63.2-12.1 87.1-36.1 24-24 36.2-53.3 36.2-87.2 0-33.9-12.2-63.2-36.2-87.2-24-24-53.3-36.1-87.1-36.1-34 0-63.3 12.2-87.2 36.1S87 89.4 87 123.3c0 33.9 12.2 63.2 36.2 87.2 24 24 53.3 36.1 87.2 36.1zm-66-189.3a89.1 89.1 0 0166-27.3c26 0 47.5 9 66 27.3a89.2 89.2 0 0127.3 66c0 26-9 47.6-27.4 66a89.1 89.1 0 01-66 27.3c-26 0-47.5-9-66-27.3a89.1 89.1 0 01-27.3-66c0-26 9-47.6 27.4-66zm0 0M426.1 393.7a304.6 304.6 0 00-12-64.9 160.7 160.7 0 00-13.5-30.3c-5.7-10.2-12.5-19-20.1-26.3a88.9 88.9 0 00-29-18.2 100.1 100.1 0 00-37-6.7c-5.2 0-10.2 2.2-20 8.5-6 4-13 8.5-20.9 13.5-6.7 4.3-15.8 8.3-27 11.9a107.3 107.3 0 01-66 0 119.3 119.3 0 01-27-12l-21-13.4c-9.7-6.3-14.8-8.5-20-8.5a100 100 0 00-37 6.7 88.8 88.8 0 00-29 18.2 114.4 114.4 0 00-20.1 26.3 161 161 0 00-13.4 30.3A302.5 302.5 0 001 393.7c-.7 9.8-1 20-1 30.2 0 26.8 8.5 48.4 25.3 64.4C41.8 504 63.6 512 90.3 512h246.5c26.7 0 48.6-8 65.1-23.7 16.8-16 25.3-37.6 25.3-64.4a437 437 0 00-1-30.2zm-44.9 72.8c-11 10.4-25.4 15.5-44.4 15.5H90.3c-19 0-33.4-5-44.4-15.5C35.2 456.3 30 442.4 30 424c0-9.5.3-19 1-28.1A272.9 272.9 0 0141.7 338a131 131 0 0110.9-24.7A84.8 84.8 0 0167.4 294a59 59 0 0119.3-12 69 69 0 0123.6-4.5c1 .5 3 1.6 6 3.6l21 13.6c9 5.6 20.4 10.7 34 15.1a137.3 137.3 0 0084.5 0c13.7-4.4 25.1-9.5 34-15.1a2721 2721 0 0027-17.2 69 69 0 0123.7 4.5 59 59 0 0119.2 12 84.5 84.5 0 0114.9 19.4c4.5 8 8.2 16.3 10.8 24.7a275.2 275.2 0 0110.8 57.8c.6 9 1 18.5 1 28.1 0 18.5-5.3 32.4-16 42.6zm0 0" /></svg>
+    <div class="hour">08.20 pm</div>
+   </div>
+  </div>
+  <div class="user-box first-box">
+   <div class="activity card" style="--delay: .2s">
+    <div class="title">User Activities</div>
+    <div class="subtitle">Hoo - is an adaptive Online Courses Application with a wide range of course directions. The students will have a great possibility to study.</div>
+    <div class="activity-links">
+     <div class="activity-link active">Current User</div>
+     <div class="activity-link notify">User Request</div>
+    </div>
+    <div class="destination">
+     <div class="destination-card">
+      <div class="destination-profile">
+       <img class="profile-img" src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" alt="" />
+       <div class="destination-length">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin">
+         <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+         <circle cx="12" cy="10" r="3" />
+        </svg>
+        45.4m
+       </div>
+      </div>
+      <div class="destination-points">
+       <div class="point">Traffic Point</div>
+       <div class="sub-point">Brooklyn St, NY</div>
+      </div>
+     </div>
+     <div class="destination-card">
+      <div class="destination-profile">
+       <img class="profile-img" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" alt="" />
+       <div class="destination-length">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin">
+         <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+         <circle cx="12" cy="10" r="3" />
+        </svg>
+        42.8m
+       </div>
+      </div>
+      <div class="destination-points">
+       <div class="point">Pickup Point</div>
+       <div class="sub-point">Maryland 17, NY</div>
+      </div>
+     </div>
+    </div>
+   </div>
+   <div class="discount card" style="--delay: .4s">
+    <div class="title">Discount Offers</div>
+    <div class="discount-wrapper">
+     <div class="discount-info">
+      <div class="subtitle">The Best Offer is:</div>
+      <div class="subtitle-count">$5</div>
+      <div class="subtitle">Distance:</div>
+      <div class="subtitle-count dist">4.5 Km</div>
+     </div>
+     <div class="discount-chart">
+      <div class="circle">
+       <div class="pie">
+        <svg>
+         <circle cx="60" cy="60" r="50"></circle>
+        </svg>
+       </div>
+       <div class="counter">0</div>
+      </div>
+     </div>
+    </div>
+    <div class="discount-profile">
+     <span class="by">By:</span>
+     <img class="discount-img" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" alt="">
+     <div class="discount-detail">
+      <div class="discount-name">Johnny Cauld</div>
+      <div class="discount-type">Micro bus & Travel Bus</div>
+     </div>
+    </div>
+    <div class="button offer-button">Get Offer</div>
+   </div>
+   <div class="cards-wrapper" style="--delay: .6s">
+    <div class="cards-header">
+     <div class="cards-header-date">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left">
+       <path d="M15 18l-6-6 6-6" /></svg>
+      <div class="title">January 2020</div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
+       <path d="M9 18l6-6-6-6" /></svg>
+     </div>
+    </div>
+    <div class="cards card">
+     <div class="cards-head">
+      <div class="cards-info">
+       <div class="calendar-hour">08.20 <span class="am-pm">pm</span></div>
+       <div class="degree">
+        <svg viewBox="0 0 512 512">
+         <circle cx="330.2" cy="240.1" fill="#feb137" r="78.9" />
+         <g fill="#ffd15b">
+          <path d="M320.5 130c-7.4.6-14-5-14.6-12.3l-4.1-47a13.5 13.5 0 0126.9-2.4l4 47c.7 7.4-4.8 14-12.2 14.6z" />
+          <path d="M320.5 130c-7.4.6-14-5-14.6-12.3l-4.1-47a13.5 13.5 0 0126.9-2.4l4 47c.7 7.4-4.8 14-12.2 14.6zM438 228.5c-.6-7.4 4.9-14 12.3-14.6l47-4a13.5 13.5 0 012.4 26.8l-47 4.1c-7.5.7-14-4.8-14.7-12.3zM413 307.7a13.5 13.5 0 0119-1.6l36.2 30.3a13.5 13.5 0 01-17.3 20.7l-36.2-30.4a13.5 13.5 0 01-1.6-19z" />
+          <path d="M413 307.7a13.5 13.5 0 0119-1.6l36.2 30.3a13.5 13.5 0 01-17.3 20.7l-36.2-30.4a13.5 13.5 0 01-1.6-19zM190 120.6a13.5 13.5 0 0119-1.7l36.2 30.4a13.5 13.5 0 01-17.3 20.6l-36.2-30.3a13.5 13.5 0 01-1.7-19zM447.4 98a13.5 13.5 0 011.7 19l-30.4 36.2A13.5 13.5 0 01398 136l30.4-36.2a13.5 13.5 0 0119-1.6z" />
+         </g>
+         <path d="M360 335.4a70.8 70.8 0 00-87.4-74A95 95 0 0085 286a85 85 0 00-3.4 170h273a60.4 60.4 0 005.2-120.6z" fill="#d8ecfe" />
+         <path d="M360 335.4a70.8 70.8 0 00-87.4-74 95 95 0 00-125.7-68.3 95 95 0 0190.6 74.2 70.8 70.8 0 0187.4 74A60.4 60.4 0 01345.6 456h9.2a60.4 60.4 0 005.1-120.6z" fill="#c4e2ff" />
+        </svg>
+        81.2° F in Sylhet
+       </div>
+      </div>
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M272 512h-32c-26 0-47.2-21.1-47.2-47.1V454c-11-3.5-21.8-8-32.1-13.3l-7.7 7.7a47.1 47.1 0 01-66.7 0l-22.7-22.7a47.1 47.1 0 010-66.7l7.7-7.7c-5.3-10.3-9.8-21-13.3-32.1H47.1c-26 0-47.1-21.1-47.1-47.1v-32.2c0-26 21.1-47.1 47.1-47.1H58c3.5-11 8-21.8 13.3-32.1l-7.7-7.7a47.1 47.1 0 010-66.7l22.7-22.7a47.1 47.1 0 0166.7 0l7.7 7.7c10.3-5.3 21-9.8 32.1-13.3V47.1c0-26 21.1-47.1 47.1-47.1h32.2c26 0 47.1 21.1 47.1 47.1V58c11 3.5 21.8 8 32.1 13.3l7.7-7.7a47.1 47.1 0 0166.7 0l22.7 22.7a47.1 47.1 0 010 66.7l-7.7 7.7c5.3 10.3 9.8 21 13.3 32.1h10.9c26 0 47.1 21.1 47.1 47.1v32.2c0 26-21.1 47.1-47.1 47.1H454c-3.5 11-8 21.8-13.3 32.1l7.7 7.7a47.1 47.1 0 010 66.7l-22.7 22.7a47.1 47.1 0 01-66.7 0l-7.7-7.7c-10.3 5.3-21 9.8-32.1 13.3v10.9c0 26-21.1 47.1-47.1 47.1zM165.8 409.2a176.8 176.8 0 0045.8 19 15 15 0 0111.3 14.5V465c0 9.4 7.7 17.1 17.1 17.1h32.2c9.4 0 17.1-7.7 17.1-17.1v-22.2a15 15 0 0111.3-14.5c16-4.2 31.5-10.6 45.8-19a15 15 0 0118.2 2.3l15.7 15.7a17.1 17.1 0 0024.2 0l22.8-22.8a17.1 17.1 0 000-24.2l-15.7-15.7a15 15 0 01-2.3-18.2 176.8 176.8 0 0019-45.8 15 15 0 0114.5-11.3H465c9.4 0 17.1-7.7 17.1-17.1v-32.2c0-9.4-7.7-17.1-17.1-17.1h-22.2a15 15 0 01-14.5-11.2c-4.2-16.1-10.6-31.6-19-45.9a15 15 0 012.3-18.2l15.7-15.7a17.1 17.1 0 000-24.2l-22.8-22.8a17.1 17.1 0 00-24.2 0l-15.7 15.7a15 15 0 01-18.2 2.3 176.8 176.8 0 00-45.8-19 15 15 0 01-11.3-14.5V47c0-9.4-7.7-17.1-17.1-17.1h-32.2c-9.4 0-17.1 7.7-17.1 17.1v22.2a15 15 0 01-11.3 14.5c-16 4.2-31.5 10.6-45.8 19a15 15 0 01-18.2-2.3l-15.7-15.7a17.1 17.1 0 00-24.2 0l-22.8 22.8a17.1 17.1 0 000 24.2l15.7 15.7a15 15 0 012.3 18.2 176.8 176.8 0 00-19 45.8 15 15 0 01-14.5 11.3H47c-9.4 0-17.1 7.7-17.1 17.1v32.2c0 9.4 7.7 17.1 17.1 17.1h22.2a15 15 0 0114.5 11.3c4.2 16 10.6 31.5 19 45.8a15 15 0 01-2.3 18.2l-15.7 15.7a17.1 17.1 0 000 24.2l22.8 22.8a17.1 17.1 0 0024.2 0l15.7-15.7a15 15 0 0118.2-2.3z"></path>
+       <path d="M256 367.4c-61.4 0-111.4-50-111.4-111.4s50-111.4 111.4-111.4 111.4 50 111.4 111.4-50 111.4-111.4 111.4zm0-192.8a81.5 81.5 0 000 162.8 81.5 81.5 0 000-162.8z"></path>
+      </svg>
+     </div>
+     <div class="items days">
+      <div class="item">Mon</div>
+      <div class="item">Tue</div>
+      <div class="item">Wed</div>
+      <div class="item">Thu</div>
+      <div class="item">Fri</div>
+      <div class="item">Sat</div>
+      <div class="item">Sun</div>
+     </div>
+     <div class="items numbers">
+      <div class="item">1</div>
+      <div class="item">2</div>
+      <div class="item">3</div>
+      <div class="item">4</div>
+      <div class="item">5</div>
+      <div class="item">6</div>
+      <div class="item">7</div>
+      <div class="item">8</div>
+      <div class="item">9</div>
+      <div class="item">10</div>
+      <div class="item">11</div>
+      <div class="item">12</div>
+      <div class="item">13</div>
+      <div class="item">14</div>
+      <div class="item">15</div>
+      <div class="item">16</div>
+      <div class="item is-active">17</div>
+      <div class="item">18</div>
+      <div class="item">19</div>
+      <div class="item">20</div>
+      <div class="item">21</div>
+      <div class="item">22</div>
+      <div class="item">23</div>
+      <div class="item">24</div>
+      <div class="item">25</div>
+      <div class="item">26</div>
+      <div class="item">27</div>
+      <div class="item">28</div>
+      <div class="item">29</div>
+      <div class="item">30</div>
+      <div class="item">31</div>
+      <div class="item disable">1</div>
+      <div class="item disable">2</div>
+      <div class="item disable">3</div>
+     </div>
+    </div>
+   </div>
+   <div class="account-wrapper" style="--delay: .8s">
+    <div class="account-profile">
+     <img src="https://images.unsplash.com/photo-1550314124-301ca0b773ae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2215&q=80" alt="">
+     <div class="blob-wrap">
+      <div class="blob"></div>
+      <div class="blob"></div>
+      <div class="blob"></div>
+     </div>
+     <div class="account-name">Mike J Morgan</div>
+     <div class="account-title">Taxi Driver</div>
+    </div>
+    <div class="account card">
+     <div class="account-cash">$ 5637.04</div>
+     <div class="account-income">Total Income</div>
+     <div class="account-iban">**** **** **** 3060</div>
+    </div>
+   </div>
+  </div>
+  <div class="user-box second-box">
+   <div class="cards-wrapper" style="--delay: 1s">
+    <div class="cards-header">
+     <div class="cards-view">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
+       <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+       <path d="M16 2v4M8 2v4M3 10h18" />
+      </svg>
+      Calendar View
+      <span class="today">Today</span>
+     </div>
+     <div class="cards-header-date">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left">
+       <path d="M15 18l-6-6 6-6" /></svg>
+      <div class="title">Sat, Nov 25 2020</div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
+       <path d="M9 18l6-6-6-6" /></svg>
+     </div>
+     <div class="cards-button button">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+       <path d="M12 5v14M5 12h14" />
+      </svg>
+      Create
+     </div>
+    </div>
+    <div class="cards card">
+     <table class="table">
+      <thead>
+       <tr>
+        <th>T</th>
+        <th>Name</th>
+        <th>From</th>
+        <th>To</th>
+        <th>V</th>
+        <th>B</th>
+        <th>C</th>
+        <th>A</th>
+        <th>W</th>
+        <th>Status</th>
+       </tr>
+      </thead>
+      <tbody>
+       <tr>
+        <td>
+         <input type="checkbox" id="row1" class="table-row">
+         <span class="time">17.00</span>
+        </td>
+        <td>John D</td>
+        <td>Sudbury Station</td>
+        <td>Center Plaza</td>
+        <td>N</td>
+        <td></td>
+        <td>€</td>
+        <td></td>
+        <td><svg viewBox="-22 0 134 134.06032" fill="currentColor">
+          <path d="M23.347656 134.058594C8.445312 84.953125 39.933594 67.023438 39.933594 67.023438c-2.203125 26.203124 12.6875 46.617187 12.6875 46.617187 5.476562-1.652344 15.929687-9.375 15.929687-9.375 0 9.375-5.515625 29.78125-5.515625 29.78125s19.308594-14.929687 25.386719-39.726563c6.070313-24.796874-11.5625-49.691406-11.5625-49.691406 1.0625 17.550782-4.875 34.8125-16.507813 48 .582032-.671875 1.070313-1.417968 1.445313-2.226562 2.089844-4.179688 5.445313-15.042969 3.480469-40.199219C62.511719 14.890625 30.515625 0 30.515625 0c2.757813 21.515625-5.511719 26.472656-24.882813 67.3125-19.371093 40.832031 17.714844 66.746094 17.714844 66.746094zm0 0" />
+         </svg></td>
+        <td>
+         <div class="status is-green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+           <path d="M20 6L9 17l-5-5" />
+          </svg>
+          Active
+         </div>
+        </td>
+       </tr>
+       <tr>
+        <td>
+         <input type="checkbox" id="row2" class="table-row">
+         <span class="time">17.00</span>
+        </td>
+        <td>Rufi</td>
+        <td>One Beacon</td>
+        <td>Los Angeles</td>
+        <td>N</td>
+        <td></td>
+        <td>€</td>
+        <td></td>
+        <td><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity">
+          <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+         </svg></td>
+        <td>
+         <div class="status is-red">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+           <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+          Rejected
+         </div>
+        </td>
+       </tr>
+       <tr>
+        <td>
+         <input type="checkbox" id="row3" class="table-row">
+         <span class="time is-wait">17.00</span>
+        </td>
+        <td>Alfred</td>
+        <td>5 Main High</td>
+        <td>Center Plaza</td>
+        <td>N</td>
+        <td></td>
+        <td>€</td>
+        <td></td>
+        <td><svg viewBox="-22 0 134 134.06032" fill="currentColor">
+          <path d="M23.347656 134.058594C8.445312 84.953125 39.933594 67.023438 39.933594 67.023438c-2.203125 26.203124 12.6875 46.617187 12.6875 46.617187 5.476562-1.652344 15.929687-9.375 15.929687-9.375 0 9.375-5.515625 29.78125-5.515625 29.78125s19.308594-14.929687 25.386719-39.726563c6.070313-24.796874-11.5625-49.691406-11.5625-49.691406 1.0625 17.550782-4.875 34.8125-16.507813 48 .582032-.671875 1.070313-1.417968 1.445313-2.226562 2.089844-4.179688 5.445313-15.042969 3.480469-40.199219C62.511719 14.890625 30.515625 0 30.515625 0c2.757813 21.515625-5.511719 26.472656-24.882813 67.3125-19.371093 40.832031 17.714844 66.746094 17.714844 66.746094zm0 0" />
+         </svg></td>
+        <td>
+         <div class="status is-wait"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader">
+           <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
+          </svg>
+          Waiting
+         </div>
+        </td>
+       </tr>
+       <tr>
+        <td>
+         <input type="checkbox" id="row4" class="table-row">
+         <span class="time is-wait">17.00</span>
+        </td>
+        <td>Mike J.</td>
+        <td>Brooklyn 99</td>
+        <td>Park, NY</td>
+        <td>N</td>
+        <td></td>
+        <td>€</td>
+        <td></td>
+        <td><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity">
+          <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+         </svg></td>
+        <td>
+         <div class="status is-wait"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader">
+           <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
+          </svg>
+          Waiting
+         </div>
+        </td>
+       </tr>
+       <tr>
+        <td>
+         <input type="checkbox" id="row5" class="table-row">
+         <span class="time">17.00</span>
+        </td>
+        <td>Hermann B.</td>
+        <td>Janburg Station</td>
+        <td>Center Park</td>
+        <td>N</td>
+        <td></td>
+        <td>€</td>
+        <td></td>
+        <td><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity">
+          <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+         </svg></td>
+        <td>
+         <div class="status is-green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+           <path d="M20 6L9 17l-5-5" />
+          </svg>
+          Active
+         </div>
+        </td>
+       </tr>
+      </tbody>
+     </table>
+    </div>
+   </div>
+   
+   <div class="card transection" style="--delay: 1.2s">
+    <div class="transection-header">
+     <div class="head">Transections</div>
+     <div class="head is-wait">View All</div>
+    </div>
+    <div class="credit-wrapper">
+     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291.764 291.764"  style="background-color:#292c6d">
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path d="M119.259 100.23l-14.643 91.122h23.405l14.634-91.122h-23.396zm70.598 37.118c-8.179-4.039-13.193-6.765-13.193-10.896.1-3.756 4.24-7.604 13.485-7.604 7.604-.191 13.193 1.596 17.433 3.374l2.124.948 3.182-19.065c-4.623-1.787-11.953-3.756-21.007-3.756-23.113 0-39.388 12.017-39.489 29.204-.191 12.683 11.652 19.721 20.515 23.943 9.054 4.331 12.136 7.139 12.136 10.987-.1 5.908-7.321 8.634-14.059 8.634-9.336 0-14.351-1.404-21.964-4.696l-3.082-1.404-3.273 19.813c5.498 2.444 15.609 4.595 26.104 4.705 24.563 0 40.546-11.835 40.747-30.152.08-10.048-6.165-17.744-19.659-24.035zm83.034-36.836h-18.108c-5.58 0-9.82 1.605-12.236 7.331l-34.766 83.509h24.563l6.765-18.08h27.481l3.51 18.153h21.664l-18.873-90.913zm-26.97 54.514c.474.046 9.428-29.514 9.428-29.514l7.13 29.514h-16.558zM85.059 100.23l-22.931 61.909-2.498-12.209c-4.24-14.087-17.533-29.395-32.368-36.999l20.998 78.33h24.764l36.799-91.021H85.059v-.01z" fill="#fff" data-original="#2394bc"/>
+    <path d="M51.916 111.982c-1.787-6.948-7.486-11.634-15.226-11.734H.374L0 101.934c28.329 6.984 52.107 28.474 59.821 48.688l-7.905-38.64z" fill="#fffffe" data-original="#efc75e"/>
+  </g>
+</svg>
+     <div class="credit-name">
+      <div class="credit-type">Visa</div>
+      <div class="credit-status">Payment Received</div>
+     </div>
+     <div class="credit-money is-active">+$3.945</div>
+    </div>
+    <div class="credit-wrapper">
+     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="background-color:#1f2755">
+  <path xmlns="http://www.w3.org/2000/svg" d="M488.727 66.494H23.273C10.42 66.494 0 76.914 0 89.767v332.466c0 12.853 10.42 23.273 23.273 23.273h465.454c12.853 0 23.273-10.42 23.273-23.273V89.767c0-12.853-10.42-23.273-23.273-23.273z" fill="#1f2755" data-original="#5286f9"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M273.776 189.773c5.115 5.86 9.57 12.31 13.236 19.242 7.427 14.041 11.655 30.026 11.655 46.986s-4.228 32.943-11.655 46.986c-3.666 6.932-8.121 13.38-13.236 19.24-5.264 6.031-11.23 11.427-17.776 16.069 16.454 11.664 36.523 18.553 58.182 18.553 55.608 0 100.849-45.241 100.849-100.848S369.79 155.152 314.182 155.152c-21.659 0-41.728 6.886-58.182 18.553 6.544 4.642 12.51 10.039 17.776 16.068z" fill="#f0425c" data-original="#ffb655"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M287.012 209.016c-3.666-6.934-8.121-13.382-13.236-19.242-5.267-6.031-11.231-11.425-17.776-16.066-16.452-11.667-36.523-18.553-58.182-18.553-55.608 0-100.848 45.241-100.848 100.848s45.241 100.848 100.848 100.848c21.659 0 41.73-6.887 58.182-18.553 6.546-4.641 12.51-10.038 17.776-16.067 5.115-5.86 9.57-12.31 13.236-19.24 7.427-14.043 11.655-30.028 11.655-46.986 0-16.964-4.228-32.948-11.655-46.989z" fill="#ef8641" data-original="#d8143a"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M197.818 356.851c-55.608 0-100.848-45.241-100.848-100.848s45.241-100.848 100.848-100.848c21.659 0 41.728 6.886 58.182 18.553V66.494H23.273C10.42 66.494 0 76.914 0 89.767v332.466c0 12.853 10.42 23.273 23.273 23.273H256v-107.21c-16.454 11.666-36.523 18.555-58.182 18.555z" fill="#1f2755" data-original="#3d6deb"/>
+</svg>
+     <div class="credit-name">
+      <div class="credit-type">MasterCard</div>
+      <div class="credit-status">Account Deposit</div>
+     </div>
+     <div class="credit-money is-active">+$3.00</div>
+    </div>
+    <div class="credit-wrapper">
+     <svg viewBox="0 0 504 504" style="background-color: #046fcf">
+  <path xmlns="http://www.w3.org/2000/svg" fill="#fff" data-original="#2fabf7" d="M43.2 207.6h17.6L52 185.2z"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M261.6 188.4c-1.6-.8-4-.8-6.4-.8h-16v12.8h16c2.4 0 4.8 0 6.4-.8s2.4-3.2 2.4-5.6c.8-3.2-.8-4.8-2.4-5.6z" fill="#fff" data-original="#228fe0"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M432.8 164.4v9.6l-4.8-9.6h-37.6v9.6l-4.8-9.6h-51.2c-8.8 0-16 1.6-22.4 4.8v-4.8h-36v4.8c-4-3.2-8.8-4.8-15.2-4.8H132l-8.8 20-8.8-20H73.6v9.6l-4.8-9.6H34.4l-16 37.6L0 243.6h40.8l4.8-12.8h11.2l4.8 12.8H108V234l4 9.6h23.2l4-9.6v9.6h111.2v-20.8h1.6c1.6 0 1.6 0 1.6 2.4v17.6h57.6V238c4.8 2.4 12 4.8 21.6 4.8h24l4.8-12.8h11.2l4.8 12.8H424v-12l7.2 12h37.6v-78.4h-36zm-270.4 67.2h-13.6v-44l-19.2 44h-12l-19.2-44v44H71.2l-5.6-12H38.4l-4.8 12.8H18.4l24-56.8h20l22.4 53.6v-53.6h21.6L124 214l16-38.4h22.4v56zm54.4-44h-31.2V198H216v11.2h-30.4v11.2h31.2v12H172v-56.8h44.8v12zm60 23.2c1.6 3.2 2.4 5.6 2.4 10.4v11.2h-13.6v-7.2c0-3.2 0-8-2.4-11.2-2.4-2.4-4.8-2.4-9.6-2.4h-14.4v20.8h-13.6v-56.8H256c7.2 0 12 0 16 2.4s6.4 6.4 6.4 12.8c0 8.8-5.6 13.6-9.6 15.2 4 .8 6.4 3.2 8 4.8zm24 20.8h-13.6v-56.8h13.6v56.8zm157.6 0h-19.2l-25.6-42.4v42.4h-27.2l-4.8-12h-28l-4.8 12.8h-15.2c-6.4 0-14.4-1.6-19.2-6.4-4.8-4.8-7.2-11.2-7.2-21.6 0-8 1.6-16 7.2-22.4 4-4.8 11.2-6.4 20-6.4h12.8v12h-12.8c-4.8 0-7.2.8-10.4 3.2-2.4 2.4-4 7.2-4 12.8 0 6.4.8 10.4 4 13.6 2.4 2.4 5.6 3.2 9.6 3.2h5.6l18.4-44h20L400 230v-53.6h20l23.2 39.2v-39.2h13.6v55.2h1.6z" fill="#fbfbfb" data-original="#0571c1"/>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path fill="#fff" data-original="#228fe0" d="M358.4 207.6h18.4l-8.8-22.4zM222.4 322.8v-45.6l-20.8 22.4z"/>
+  </g>
+  <path xmlns="http://www.w3.org/2000/svg" fill="#fff" data-original="#2fabf7" d="M136.8 282.8v10.4h29.6v11.2h-29.6v12h32.8l15.2-16.8-14.4-16.8z"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M252.8 282.8H236v14.4h17.6c4.8 0 8-2.4 8-7.2-.8-4.8-4-7.2-8.8-7.2z" fill="#fff" data-original="#228fe0"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M500 296.4v-36h-33.6c-7.2 0-12.8 1.6-16.8 4.8v-4.8h-36.8c-5.6 0-12.8 1.6-16 4.8v-4.8H332v4.8c-4.8-4-13.6-4.8-17.6-4.8h-43.2v4.8c-4-4-13.6-4.8-18.4-4.8h-48l-11.2 12-10.4-12h-72v78.4h70.4l11.2-12 10.4 12h43.2v-18.4h5.6c5.6 0 12.8 0 18.4-2.4v21.6h36v-20.8h1.6c2.4 0 2.4 0 2.4 2.4v18.4h108.8c7.2 0 14.4-1.6 18.4-4.8v4.8H472c7.2 0 14.4-.8 19.2-4 8-4.8 12.8-13.6 12.8-24 0-5.6-1.6-11.2-4-15.2zm-248 12.8h-16v19.2h-25.6l-16-18.4-16.8 18.4h-52.8v-56.8h53.6l16 18.4 16.8-18.4h42.4c10.4 0 22.4 3.2 22.4 18.4-.8 16-12 19.2-24 19.2zm80-3.2c1.6 2.4 2.4 5.6 2.4 10.4v11.2h-13.6v-7.2c0-3.2 0-8.8-2.4-11.2-1.6-2.4-4.8-2.4-9.6-2.4h-14.4v20.8h-13.6v-56.8h30.4c6.4 0 12 0 16 2.4s7.2 6.4 7.2 12.8c0 8.8-5.6 13.6-9.6 15.2 4 1.6 6.4 3.2 7.2 4.8zm55.2-23.2H356v10.4h30.4v11.2H356v11.2h31.2v12h-44.8v-56.8h44.8v12zm33.6 44.8h-25.6v-12h25.6c2.4 0 4 0 5.6-1.6.8-.8 1.6-2.4 1.6-4s-.8-3.2-1.6-4c-.8-.8-2.4-1.6-4.8-1.6-12.8-.8-28 0-28-17.6 0-8 4.8-16.8 19.2-16.8h26.4v13.6h-24.8c-2.4 0-4 0-5.6.8s-1.6 2.4-1.6 4c0 2.4 1.6 3.2 3.2 4s3.2.8 4.8.8h7.2c7.2 0 12 1.6 15.2 4.8 2.4 2.4 4 6.4 4 12 0 12-7.2 17.6-20.8 17.6zm68.8-5.6c-3.2 3.2-8.8 5.6-16.8 5.6h-25.6v-12h25.6c2.4 0 4 0 5.6-1.6.8-.8 1.6-2.4 1.6-4s-.8-3.2-1.6-4c-.8-.8-2.4-1.6-4.8-1.6-12.8-.8-28 0-28-17.6 0-8 4.8-16.8 19.2-16.8h26.4v13.6h-24c-2.4 0-4 0-5.6.8s-1.6 2.4-1.6 4c0 2.4.8 3.2 3.2 4 1.6.8 3.2.8 4.8.8h7.2c7.2 0 12 1.6 15.2 4.8.8 0 .8.8.8.8 2.4 3.2 3.2 7.2 3.2 11.2 0 4.8-1.6 8.8-4.8 12z" fill="#fbfbfb" data-original="#0571c1"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M317.6 284.4c-1.6-.8-4-.8-6.4-.8h-16v12.8h16c2.4 0 4.8 0 6.4-.8s2.4-3.2 2.4-5.6c.8-3.2-.8-4.8-2.4-5.6z" fill="#fff" data-original="#228fe0"/>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path d="M261.6 188.4c-1.6-.8-4-.8-6.4-.8h-16v12.8h16c2.4 0 4.8 0 6.4-.8s2.4-3.2 2.4-5.6c.8-3.2-.8-4.8-2.4-5.6zM358.4 207.6h18.4l-8.8-22.4zM222.4 322.8v-45.6l-20.8 22.4z" fill="#fff" data-original="#228fe0"/>
+  </g>
+  <path d="M252.8 282.8H236v14.4h17.6c4.8 0 8-2.4 8-7.2-.8-4.8-4-7.2-8.8-7.2zM317.6 284.4c-1.6-.8-4-.8-6.4-.8h-16v12.8h16c2.4 0 4.8 0 6.4-.8s2.4-3.2 2.4-5.6c.8-3.2-.8-4.8-2.4-5.6z" fill="#fff" data-original="#228fe0" xmlns="http://www.w3.org/2000/svg"/>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path fill="#fff" data-original="#2fabf7" d="M247.2 326L236 314v13.6h-26.4l-16-18.4-17.6 18.4h-52.8v-56h53.6l16.8 18.4 8-9.6-20-20h-70.4v78.4h70.4l12-12 10.4 12h43.2zM164 242.8l-10.4-11.2h-4.8v-4.8l-12-12-8 16.8h-11.2l-19.2-44v44H71.2l-5.6-12H38.4l-5.6 12H18.4l24-56h20l22.4 53.6v-53.6h12l-11.2-11.2h-12v9.6l-4-9.6H34.4l-16 37.6L0 242.8H41.6l4.8-12h11.2l5.6 12H108v-9.6l4 9.6h23.2l4-9.6v9.6z"/>
+    <path fill="#fff" data-original="#2fabf7" d="M127.2 206l-12.8-12.8L124 214z"/>
+  </g>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path d="M491.2 334.8c7.2-4.8 12-12.8 12.8-21.6L492.8 302c.8 2.4 1.6 4.8 1.6 8 0 4.8-1.6 8.8-4.8 12-3.2 3.2-8.8 5.6-16.8 5.6h-25.6v-12h25.6c2.4 0 4 0 5.6-1.6.8-.8 1.6-2.4 1.6-4s-.8-3.2-1.6-4c-.8-.8-2.4-1.6-4.8-1.6-12.8-.8-28 0-28-17.6 0-8 4.8-15.2 16.8-16.8l-8.8-8.8c-1.6.8-2.4 1.6-3.2 1.6V258h-36.8c-5.6 0-12.8 1.6-16 4.8V258H332v4.8c-4.8-4-13.6-4.8-17.6-4.8h-43.2v4.8c-4-4-13.6-4.8-18.4-4.8h-48l-11.2 12-10.4-12h-8.8l24 24 12-12.8h42.4c10.4 0 22.4 3.2 22.4 18.4 0 16-11.2 19.2-23.2 19.2h-16v12l12 12v-12h4c5.6 0 12.8 0 18.4-2.4V338h36v-20.8h1.6c2.4 0 2.4 0 2.4 2.4V338h108.8c7.2 0 14.4-1.6 18.4-4.8v4.8H472c6.4.8 13.6 0 19.2-3.2zM332 306c1.6 2.4 2.4 5.6 2.4 10.4v11.2h-13.6v-7.2c0-3.2 0-8.8-2.4-11.2-1.6-2.4-4.8-2.4-9.6-2.4h-14.4v20.8h-13.6v-56.8h30.4c6.4 0 12 0 16 2.4s7.2 6.4 7.2 12.8c0 8.8-5.6 13.6-9.6 15.2 4 1.6 6.4 3.2 7.2 4.8zm55.2-23.2H356v10.4h30.4v11.2H356v11.2h31.2v12h-44.8v-56.8h44.8v12zm33.6 44.8h-25.6v-12h25.6c2.4 0 4 0 5.6-1.6.8-.8 1.6-2.4 1.6-4s-.8-3.2-1.6-4c-.8-.8-2.4-1.6-4.8-1.6-12.8-.8-28 0-28-17.6 0-8 4.8-16.8 19.2-16.8h26.4v13.6h-24.8c-2.4 0-4 0-5.6.8s-1.6 2.4-1.6 4c0 2.4 1.6 3.2 3.2 4s3.2.8 4.8.8h7.2c7.2 0 12 1.6 15.2 4.8 2.4 2.4 4 6.4 4 12 0 12-7.2 17.6-20.8 17.6z" fill="#fff" data-original="#228fe0"/>
+    <path d="M459.2 288.4c0 2.4.8 3.2 3.2 4 1.6.8 3.2.8 4.8.8h7.2c4.8 0 8 .8 11.2 2.4l-12-12h-7.2c-2.4 0-4 0-5.6.8-.8.8-1.6 2.4-1.6 4zM431.2 240.4l1.6 2.4h.8zM387.2 196.4l13.6 32.8V210z" fill="#fff" data-original="#228fe0"/>
+    <path d="M250.4 222.8h1.6c1.6 0 1.6 0 1.6 2.4v17.6h57.6V238c4.8 2.4 12 4.8 21.6 4.8h24l4.8-12.8h11.2l4.8 12.8H424v-8l-11.2-11.2v8.8h-27.2l-4-12.8h-28l-4.8 12.8h-15.2c-6.4 0-14.4-1.6-19.2-6.4-4.8-4.8-7.2-11.2-7.2-21.6 0-8 1.6-16 7.2-22.4 4-4.8 11.2-6.4 20-6.4h12.8v12h-12.8c-4.8 0-7.2.8-10.4 3.2-2.4 2.4-4 7.2-4 12.8 0 6.4.8 10.4 4 13.6 2.4 2.4 5.6 3.2 9.6 3.2h5.6l18.4-44h8l-11.2-11.2h-20.8c-8.8 0-16 1.6-22.4 4.8v-4.8H276v4.8c-4-3.2-8.8-4.8-15.2-4.8H132l-8.8 20-8.8-20H79.2l11.2 11.2h16L120 206l4.8 4.8 14.4-35.2h22.4v56.8H148v-44l-13.6 32 23.2 23.2h92l.8-20.8zm36.8-47.2h13.6v56.8h-13.6v-56.8zm-70.4 12h-31.2V198H216v11.2h-30.4v11.2h31.2v12H172v-56.8h44.8v12zm22.4 44h-13.6v-56.8H256c7.2 0 12 0 16 2.4s6.4 6.4 6.4 12.8c0 8.8-5.6 13.6-9.6 15.2 3.2.8 5.6 3.2 6.4 4.8 1.6 3.2 2.4 5.6 2.4 10.4v11.2H264v-7.2c0-3.2 0-8-2.4-11.2-.8-1.6-3.2-1.6-8-1.6h-14.4v20z" fill="#fff" data-original="#228fe0"/>
+  </g>
+</svg>
+     <div class="credit-name">
+      <div class="credit-type">American Express</div>
+      <div class="credit-status">Payment Waiting</div>
+     </div>
+     <div class="credit-money is-wait">+$53.25</div>
+    </div>
+    <div class="credit-wrapper">
+     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.351 469.351" style="background-color: #0365b3">
+  <path xmlns="http://www.w3.org/2000/svg" d="M356.626 85.086a37.887 37.887 0 00-38.763-8.277 10.668 10.668 0 00-7.168 8.533l-2.987 20.523c-4.529 30.998-31.052 54.019-62.379 54.144h-42.667a10.666 10.666 0 00-10.347 8.085l-32 128a10.667 10.667 0 0010.346 13.248h53.333a10.666 10.666 0 0010.347-8.085l19.307-77.248h41.6c31.934.106 59.792-21.66 67.413-52.672l7.872-31.552a56.099 56.099 0 00-13.907-54.699z" fill="#e6f0f9" data-original="#03a9f4"/>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.664 437.342C4.773 437.341-.002 432.564 0 426.673c0-.869.107-1.735.317-2.578l10.667-42.453v-.448l10.667-42.432a10.666 10.666 0 0110.347-8.085h27.136c14.728-.003 26.669 11.933 26.673 26.661 0 2.181-.267 4.354-.795 6.47l-2.667 10.667c-2.967 11.875-13.637 20.205-25.877 20.203H29.672l-8.64 34.581a10.667 10.667 0 01-10.368 8.083zm24.341-64h21.461a5.335 5.335 0 005.163-4.053l2.667-10.667a5.311 5.311 0 00-5.163-6.634H40.338l-5.333 21.354zM124.733 437.342h-15.189c-16.33.004-29.571-13.231-29.575-29.561a29.56 29.56 0 01.882-7.175l1.408-5.675c3.157-12.736 14.612-21.662 27.733-21.611h15.189c16.33.028 29.545 13.289 29.517 29.619a29.561 29.561 0 01-.887 7.138l-1.408 5.675c-3.16 12.705-14.579 21.614-27.67 21.59zm-23.168-31.552a8.234 8.234 0 007.979 10.219h15.189a7.147 7.147 0 006.955-5.419l1.408-5.675a8.234 8.234 0 00-7.979-10.219h-15.189a7.147 7.147 0 00-6.955 5.419l-1.408 5.675z" fill="#fff" data-original="#283593"/>
+    <path d="M138.664 437.342a10.667 10.667 0 01-10.347-13.248l10.667-42.667c1.426-5.72 7.218-9.202 12.939-7.776 5.72 1.426 9.202 7.218 7.776 12.939l-10.667 42.667a10.666 10.666 0 01-10.368 8.085z" fill="#fff" data-original="#283593"/>
+  </g>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path d="M266.664 437.342a10.667 10.667 0 01-10.347-13.248l10.667-42.453v-.448l10.667-42.432a10.666 10.666 0 0110.347-8.085h27.136c14.728-.003 26.669 11.933 26.673 26.661 0 2.181-.267 4.354-.795 6.47l-2.667 10.667c-2.967 11.875-13.637 20.205-25.877 20.203h-26.795l-8.64 34.581a10.669 10.669 0 01-10.369 8.084zm24.341-64h21.483a5.335 5.335 0 005.163-4.053l2.667-10.667a5.312 5.312 0 00-5.163-6.634h-18.816l-5.334 21.354zM380.733 437.342h-15.189c-16.33.004-29.571-13.231-29.575-29.561a29.56 29.56 0 01.882-7.175l1.408-5.675c3.157-12.736 14.612-21.662 27.733-21.611h15.189c16.33-.004 29.571 13.231 29.575 29.561a29.56 29.56 0 01-.882 7.175l-1.408 5.675c-3.157 12.736-14.612 21.662-27.733 21.611zm-23.168-31.552a8.234 8.234 0 007.979 10.219h15.189a7.147 7.147 0 006.955-5.419l1.408-5.675a8.234 8.234 0 00-7.979-10.219h-15.189a7.147 7.147 0 00-6.955 5.419l-1.408 5.675z" fill="#e6f0f9" data-original="#03a9f4"/>
+    <path d="M394.664 437.342a10.667 10.667 0 01-10.347-13.248l10.667-42.667c1.426-5.72 7.218-9.202 12.939-7.776 5.72 1.426 9.202 7.218 7.776 12.939l-10.667 42.667a10.666 10.666 0 01-10.368 8.085z" fill="#e6f0f9" data-original="#03a9f4"/>
+  </g>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path d="M202.664 426.676a10.668 10.668 0 01-8.875-4.757l-21.333-32c-3.27-4.901-1.947-11.525 2.955-14.795s11.525-1.947 14.795 2.955l21.333 32c3.275 4.897 1.961 11.521-2.935 14.797a10.681 10.681 0 01-5.94 1.8z" fill="#fff" data-original="#283593"/>
+    <path d="M181.33 458.676c-5.891-.002-10.665-4.78-10.663-10.671a10.667 10.667 0 012.471-6.823l53.333-64c3.776-4.524 10.505-5.131 15.029-1.355 4.524 3.776 5.131 10.505 1.355 15.029l-53.333 64a10.663 10.663 0 01-8.192 3.82z" fill="#fff" data-original="#283593"/>
+  </g>
+  <path xmlns="http://www.w3.org/2000/svg" d="M437.33 437.342a10.667 10.667 0 01-10.347-13.248l21.333-85.333c1.426-5.72 7.218-9.202 12.939-7.776 5.72 1.426 9.202 7.218 7.776 12.939l-21.333 85.333a10.665 10.665 0 01-10.368 8.085z" fill="#e6f0f9" data-original="#03a9f4"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M321.405 29.129a53.908 53.908 0 00-40.661-18.453H159.997a10.666 10.666 0 00-10.496 8.768L106.834 254.11c-1.049 5.797 2.801 11.346 8.598 12.395.626.113 1.262.17 1.898.17h64a10.666 10.666 0 0010.347-8.085l19.328-77.248h34.325c41.958-.165 77.478-31.012 83.52-72.533l5.333-36.459a54.332 54.332 0 00-12.778-43.221z" fill="#fff" data-original="#283593"/>
+</svg>
+     <div class="credit-name">
+      <div class="credit-type">Paypal</div>
+      <div class="credit-status">Payment Cancelled</div>
+     </div>
+     <div class="credit-money is-cancel">+$3.945</div>
+    </div>
+   </div>
+  </div>
+ </div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/customer-management-ui/dist/script.js b/customer-management-ui/dist/script.js
new file mode 100644
index 0000000..21f6590
--- /dev/null
+++ b/customer-management-ui/dist/script.js
@@ -0,0 +1,10 @@
+const counter = document.querySelector(".counter");
+let count = 0;
+setInterval(() => {
+ if(count == 92) {
+  clearInterval(count);
+ }else {
+  count+=1;
+  counter.textContent = count + "%";
+ }
+}, 42);
\ No newline at end of file
diff --git a/customer-management-ui/dist/style.css b/customer-management-ui/dist/style.css
new file mode 100644
index 0000000..6477809
--- /dev/null
+++ b/customer-management-ui/dist/style.css
@@ -0,0 +1,1057 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap");
+:root {
+  --delay: 0s;
+}
+
+* {
+  outline: none;
+  box-sizing: border-box;
+}
+
+.hidden {
+  display: none !important;
+}
+
+html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+
+img {
+  max-width: 100%;
+}
+
+body {
+  font-family: "Inter", sans-serif;
+  background-color: #252954;
+  color: #9b9ca7;
+}
+
+.wrapper {
+  max-width: 1600px;
+  background-color: #0e0e23;
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0 auto;
+}
+
+.left-side {
+  width: 6rem;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 117px 0 40px;
+  -webkit-animation: left 1s var(--delay) both;
+          animation: left 1s var(--delay) both;
+}
+.left-side svg {
+  width: 24px;
+  cursor: pointer;
+}
+.left-side svg + svg {
+  margin-top: 34px;
+}
+.left-side svg:last-child {
+  margin-top: auto;
+}
+.left-side svg.active, .left-side svg:hover {
+  color: #4255d4;
+}
+
+@-webkit-keyframes left {
+  0% {
+    transform: translateX(-30px);
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes left {
+  0% {
+    transform: translateX(-30px);
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+@-webkit-keyframes top {
+  0% {
+    transform: translateY(-30px);
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes top {
+  0% {
+    transform: translateY(-30px);
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.main-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 25px;
+  overflow: auto;
+  padding-left: 0;
+}
+
+.header {
+  background: #141834;
+  background: radial-gradient(circle, #141834 0%, #13162f 100%);
+  box-shadow: 0 16px 12px #0e0e23;
+  width: 100%;
+  padding: 0 30px;
+  -webkit-animation: top 1s both;
+          animation: top 1s both;
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  font-size: 15px;
+  white-space: nowrap;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+.header:before {
+  content: "";
+  width: 100%;
+  height: 25px;
+  position: absolute;
+  top: -25px;
+  left: 0;
+  background-color: #0e0e23;
+}
+.header-link {
+  color: #9b9ca7;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  transition: 0.3s;
+  border-bottom: 3px solid transparent;
+  transition: 0.3s;
+}
+.header-link svg {
+  width: 20px;
+  margin-right: 14px;
+}
+.header-link.active, .header-link:hover {
+  background: #11132c;
+  border-bottom: 3px solid #4255d4;
+}
+
+.logo {
+  padding: 20px 50px 20px 0;
+  font-size: 16px;
+  color: #e7e8ea;
+}
+.logo-det {
+  background: #4255d4;
+  padding: 8px;
+  margin-left: -2px;
+  border-radius: 50%;
+  font-size: 15px;
+}
+
+.user-info {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+.user-info svg {
+  width: 20px;
+}
+.user-info .profile {
+  margin: 0 20px 0 12px;
+  width: 18px;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  color: #9b9ca7;
+  background: #1a1b3c;
+  border: none;
+  padding: 2px 12px;
+  border-radius: 4px;
+  margin-right: 20px;
+}
+.button svg {
+  margin-left: 10px;
+  width: 16px;
+}
+
+.user-box {
+  margin-top: 25px;
+  display: flex;
+}
+.user-box + .user-box {
+  margin-top: 20px;
+}
+.user-box + .user-box .cards-wrapper {
+  margin-left: 0;
+  flex-grow: 1;
+  max-width: none;
+}
+.user-box + .user-box .today {
+  margin-left: 30px;
+}
+.user-box + .user-box .cards-header {
+  padding: 20px 30px;
+  justify-content: space-between;
+}
+.user-box .cards-header,
+.user-box .cards-view {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.user-box .cards-header svg,
+.user-box .cards-view svg {
+  width: 24px;
+}
+.user-box .cards-header .title,
+.user-box .cards-view .title {
+  margin: 0 16px;
+  font-size: 15px;
+}
+.user-box .cards-header-date svg,
+.user-box .cards-view-date svg {
+  width: 30px;
+}
+.user-box .cards-header .cards-button,
+.user-box .cards-view .cards-button {
+  background: #15193c;
+  padding: 10px 16px;
+  margin-right: 0;
+}
+.user-box .cards-header .cards-button svg,
+.user-box .cards-view .cards-button svg {
+  width: 16px;
+  margin: 0 2px 0 0;
+}
+.user-box .cards-header .date-wrapper,
+.user-box .cards-view .date-wrapper {
+  display: flex;
+  align-items: center;
+  margin: auto;
+}
+.user-box .cards-header .date-wrapper .title,
+.user-box .cards-view .date-wrapper .title {
+  margin: 0 16px;
+}
+
+.cards-view > svg {
+  margin-right: 12px;
+}
+
+.today {
+  position: relative;
+}
+.today:before {
+  content: "";
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  background-color: #ef415c;
+  bottom: -8px;
+  right: 50%;
+  border-radius: 50%;
+}
+
+.card {
+  background: #1a2049;
+  background: radial-gradient(circle, #1a2049 0%, #13162f 100%);
+  padding: 40px 30px;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  max-height: 430px;
+  width: 100%;
+}
+.card .title {
+  font-size: 16px;
+  font-weight: 500;
+}
+.card .subtitle {
+  font-size: 13px;
+  line-height: 1.6em;
+}
+.card + .card {
+  margin-left: 20px;
+}
+
+.activity {
+  max-width: 480px;
+}
+.activity .title {
+  margin-bottom: 20px;
+}
+.activity-links {
+  display: flex;
+  align-items: center;
+  margin-top: auto;
+  font-size: 15px;
+}
+.activity-link {
+  padding-bottom: 10px;
+  position: relative;
+  cursor: pointer;
+  transition: 0.3s;
+}
+.activity-link + .activity-link {
+  margin-left: 25px;
+}
+.activity-link + .activity-link:before {
+  content: "";
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  background-color: #ef415c;
+  top: -2px;
+  right: -8px;
+  border-radius: 50%;
+}
+.activity-link + .activity-link:hover:after {
+  content: "";
+  position: absolute;
+  width: 22px;
+  height: 2px;
+  background: #4255d4;
+  left: 0;
+  bottom: 0;
+}
+.activity-link + .activity-link:hover {
+  color: #bebec4;
+  -webkit-text-stroke: 0.3px;
+}
+.activity-link.active {
+  color: #bebec4;
+  font-weight: 500;
+}
+.activity-link.active:before {
+  content: "";
+  position: absolute;
+  width: 22px;
+  height: 2px;
+  background: #4255d4;
+  left: 0;
+  bottom: 0;
+}
+
+.destination {
+  display: flex;
+  align-items: center;
+  margin-top: auto;
+}
+.destination-card {
+  background: #1a1d3a;
+  background: linear-gradient(45deg, #1a1d3a 0%, #212752 100%);
+  padding: 20px;
+  width: 100%;
+  border-radius: 6px;
+}
+.destination-card + .destination-card {
+  margin-left: 20px;
+  background: #1a1d3a;
+  background: linear-gradient(325deg, #1a1d3a 0%, #212752 100%);
+}
+.destination-profile {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+.destination-profile svg {
+  width: 18px;
+  flex-shrink: 0;
+  margin-right: 8px;
+}
+.destination-length {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+}
+.destination-points {
+  margin-top: 30px;
+}
+
+.profile-img {
+  width: 46px;
+  height: 46px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 50%;
+  padding: 2px;
+  border: 1px solid #bebec4;
+  flex-shrink: 0;
+}
+
+.point {
+  font-size: 14px;
+  color: #bebec4;
+  font-weight: 500;
+}
+
+.sub-point {
+  font-size: 13px;
+  margin-top: 4px;
+}
+
+.discount {
+  max-width: 320px;
+  width: 100%;
+}
+.discount .title {
+  margin-bottom: 30px;
+}
+.discount .subtitle {
+  margin-bottom: 8px;
+}
+.discount .subtitle-count {
+  font-size: 17px;
+  color: #17a98a;
+  font-weight: 500;
+}
+.discount .subtitle-count + .subtitle {
+  margin-top: 20px;
+}
+.discount .subtitle-count.dist {
+  color: #e85471;
+}
+.discount-wrapper {
+  display: flex;
+}
+.discount-chart {
+  margin-left: auto;
+}
+.discount-profile {
+  display: flex;
+  align-items: center;
+  margin-top: 40px;
+}
+.discount-img {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  margin: 0 16px 0 12px;
+}
+.discount-name {
+  font-weight: 500;
+  font-size: 15px;
+}
+.discount-type {
+  font-size: 13px;
+  margin-top: 4px;
+}
+
+.circle {
+  width: 100px;
+  height: 100px;
+  border: 3px solid #5b5f78;
+  border-radius: 50%;
+  position: relative;
+}
+
+.pie {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) rotate(-90deg);
+}
+.pie svg circle {
+  fill: transparent;
+  stroke: #4356d6;
+  stroke-width: 14;
+  stroke-dasharray: 275;
+  stroke-dashoffset: 235;
+  -webkit-animation: pieChart 3.8s linear forwards;
+          animation: pieChart 3.8s linear forwards;
+}
+
+@-webkit-keyframes pieChart {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes pieChart {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+.counter {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: #3e50c5;
+  font-weight: 500;
+}
+
+.offer-button {
+  background: #4255d4;
+  padding: 14px;
+  text-align: center;
+  justify-content: center;
+  margin-top: auto;
+  margin-right: 0;
+  color: #fff;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.cards-header {
+  background: #10122b;
+  border-radius: 6px 6px 0 0;
+  padding: 20px 45px;
+  font-size: 14px;
+  font-weight: 500;
+}
+.cards-header-date {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.cards-header-date svg {
+  color: #4154d1;
+  background: #14183c;
+  border-radius: 50%;
+  padding: 5px;
+  width: 30px;
+}
+.cards-wrapper {
+  margin-left: 20px;
+  max-width: 305px;
+  width: 100%;
+}
+.cards-hour {
+  font-size: 26px;
+}
+.cards-hour .am-pm {
+  font-size: 15px;
+  font-weight: 500;
+}
+.cards.card {
+  border-radius: 0 0 6px 6px;
+  padding: 30px 20px;
+}
+.cards.card svg {
+  width: 24px;
+  margin-left: auto;
+  color: #818394;
+}
+.cards-head {
+  display: flex;
+  align-items: center;
+}
+
+.degree {
+  margin-top: 10px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  color: #818394;
+  font-weight: 500;
+}
+.degree svg {
+  width: 24px;
+  margin-right: 12px;
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 16px;
+  font-size: 13px;
+  font-weight: 500;
+}
+.items.numbers {
+  margin-top: 0;
+}
+
+.item {
+  flex: 0 1 calc(100% / 7);
+  padding: 10px 5px;
+  text-align: center;
+}
+.item.is-active {
+  background: #4255d4;
+  border-radius: 50%;
+  color: #fff;
+}
+.item.disable {
+  color: #595b5b;
+}
+
+.account {
+  width: 100%;
+  height: 180px;
+  margin-top: auto;
+  flex-grow: 0;
+  position: relative;
+  transition: 0.3s;
+  cursor: pointer;
+  transition: 0.3s;
+}
+.account:hover {
+  transform: scale(1.02);
+}
+.account:before {
+  content: "";
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  box-shadow: -15px 0 0 0 #ef8741;
+  background: #ef415c;
+  top: 20px;
+  left: 42px;
+  border-radius: 50%;
+}
+.account-wrapper {
+  max-width: 310px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-left: 20px;
+  align-items: center;
+}
+.account-profile {
+  margin: auto;
+  position: relative;
+  text-align: center;
+  position: relative;
+}
+.account-profile img {
+  width: 84px;
+  height: 84px;
+  border-radius: 50%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: left;
+     object-position: left;
+  border: 3px solid #4255d3;
+  padding: 5px;
+}
+.account-profile .blob {
+  position: absolute;
+  border-radius: 50%;
+  -webkit-animation: fly 5.8s linear infinite alternate;
+          animation: fly 5.8s linear infinite alternate;
+}
+.account-profile .blob:nth-child(1) {
+  width: 14px;
+  height: 14px;
+  top: 25px;
+  left: -20px;
+  background: #28327a;
+  -webkit-animation-delay: 0.9s;
+          animation-delay: 0.9s;
+}
+.account-profile .blob:nth-child(2) {
+  width: 18px;
+  height: 18px;
+  background: #87344c;
+  right: -20px;
+  top: -20px;
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s;
+}
+.account-profile .blob:nth-child(3) {
+  width: 12px;
+  height: 12px;
+  background: #13645b;
+  right: -35px;
+  top: 50%;
+  -webkit-animation-delay: 1.8s;
+          animation-delay: 1.8s;
+}
+.account-name {
+  margin: 20px 0 10px;
+}
+.account-title {
+  font-size: 14px;
+}
+.account-cash {
+  font-size: 22px;
+  font-weight: 500;
+  margin-bottom: 6px;
+  padding-top: 16px;
+  position: relative;
+}
+.account-cash:before {
+  content: "";
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  background: #9b9ca7;
+  right: 10px;
+  border-radius: 50%;
+  box-shadow: -10px 0 0 0 #9b9ca7, 10px 0 0 0 #9b9ca7;
+  top: 24px;
+}
+.account-income {
+  font-size: 14px;
+}
+.account-iban {
+  margin-top: auto;
+  font-weight: 500;
+}
+
+.time {
+  height: 24px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background-color: #9e5924;
+  font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.time.is-wait {
+  background: #4255d3;
+}
+
+.table .status {
+  color: #1aa385;
+  display: inline-flex;
+  align-items: center;
+}
+.table .status svg {
+  margin-right: 6px;
+  width: 22px;
+  height: 22px;
+  padding: 3px;
+  border-radius: 4px;
+  background-color: #142940;
+  color: currentColor;
+}
+.table .status.is-red {
+  color: #d14b69;
+}
+.table .status.is-red svg {
+  background: #2e2142;
+  color: currentcolor;
+}
+.table .status.is-wait {
+  color: #3E4EC2;
+  position: relative;
+}
+.table .status.is-wait:before {
+  width: 22px;
+  height: 22px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  content: "";
+  background: #1a214d;
+  border-radius: 4px;
+}
+.table .status.is-wait svg {
+  background-color: transparent;
+  color: currentcolor;
+  -webkit-animation: turn 2s linear infinite both;
+          animation: turn 2s linear infinite both;
+}
+
+@-webkit-keyframes turn {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes turn {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+.table {
+  text-align: left;
+  padding: 0;
+}
+.table th {
+  font-size: 14px;
+  font-weight: normal;
+  padding-bottom: 16px;
+}
+.table th:nth-child(n+5) {
+  padding: 0 10px 16px;
+}
+.table th:first-child {
+  padding-left: 36px;
+}
+.table td {
+  font-size: 15px;
+  vertical-align: middle;
+  padding: 8px 0;
+}
+.table td:last-of-type {
+  width: 100px;
+}
+.table td:nth-child(n+5) {
+  padding: 0 10px;
+}
+.table td:nth-last-of-type(2) svg {
+  width: 16px;
+}
+.table input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #9b9ca7;
+  vertical-align: middle;
+  background-color: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 16px;
+  transition: 0.25s;
+  background-size: 0;
+  background-position: center;
+}
+.table input:checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  background-color: #252954;
+  background-size: 12px;
+  background-repeat: no-repeat;
+}
+
+@-webkit-keyframes fly {
+  40% {
+    transform: translate(-6px, -6px);
+  }
+  60% {
+    transform: translate(-12px, -2px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+@keyframes fly {
+  40% {
+    transform: translate(-6px, -6px);
+  }
+  60% {
+    transform: translate(-12px, -2px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+.transection {
+  flex-shrink: 0;
+  max-width: 310px;
+  width: 100%;
+  margin-left: 20px;
+}
+.transection-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: 500;
+}
+.transection .is-wait {
+  color: #3E4EC2;
+}
+
+.credit-wrapper {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+}
+.credit-wrapper svg {
+  width: 38px;
+  padding: 3px;
+  border-radius: 6px;
+  margin-right: 12px;
+}
+.credit-wrapper path {
+  width: 24px;
+}
+.credit-money {
+  margin-left: auto;
+}
+.credit-money.is-active {
+  color: #1aa385;
+}
+.credit-money.is-cancel {
+  color: #d14b69;
+}
+.credit-money .is-wait {
+  color: #3E4EC2;
+}
+.credit-status {
+  font-size: 13px;
+  font-weight: normal;
+}
+.credit-type {
+  color: #e7e8ea;
+  margin-bottom: 6px;
+}
+
+@media screen and (max-width: 1500px) {
+  .wrapper {
+    max-width: 1200px;
+  }
+
+  .activity {
+    width: 49%;
+    max-width: none;
+  }
+
+  .discount {
+    width: 48%;
+    max-width: none;
+    height: 100%;
+  }
+
+  .first-box {
+    flex-wrap: wrap;
+  }
+  .first-box .cards-wrapper {
+    width: 67%;
+    max-width: none;
+    margin: 20px 0;
+  }
+  .first-box .cards-wrapper .item.is-active {
+    background: none;
+    color: inherit;
+  }
+  .first-box .account-wrapper {
+    max-width: none;
+    width: calc(33% - 20px);
+    margin: 20px 0 20px 20px;
+  }
+
+  .second-box {
+    flex-wrap: wrap;
+  }
+  .second-box .cards-wrapper {
+    margin-top: 40px;
+    width: 66%;
+  }
+
+  .transection {
+    margin-top: 40px;
+    max-width: none;
+    width: 30%;
+  }
+}
+@media screen and (max-width: 1200px) {
+  .time {
+    display: none;
+  }
+}
+@media screen and (max-width: 1060px) {
+  .user-info .button,
+.user-info .hour {
+    display: none;
+  }
+}
+@media screen and (max-width: 1020px) {
+  .user-box .cards-view {
+    display: none;
+  }
+
+  .user-box .cards-header .cards-button {
+    display: none;
+  }
+
+  .cards-header-date {
+    margin: auto;
+  }
+}
+@media screen and (max-width: 930px) {
+  .second-box .cards-wrapper {
+    width: 100%;
+  }
+
+  .transection {
+    width: 100%;
+    margin-left: 0;
+    height: 100%;
+    margin-top: 20px;
+  }
+
+  .header-link {
+    display: none;
+  }
+
+  .user-info .profile {
+    margin-right: 0;
+  }
+}
+@media screen and (max-width: 850px) {
+  .activity-card,
+.discount {
+    width: 100%;
+  }
+
+  .user-box .discount {
+    margin-left: 0;
+    margin-top: 20px;
+  }
+
+  .left-side {
+    display: none;
+  }
+
+  .main-container {
+    padding-left: 25px;
+  }
+
+  .activity-links,
+.destination {
+    margin-top: 20px;
+  }
+}
+@media screen and (max-width: 720px) {
+  .first-box .account-wrapper {
+    display: none;
+  }
+
+  .first-box .cards-wrapper {
+    width: 100%;
+  }
+
+  .second-box .cards.card {
+    overflow-y: auto;
+  }
+}
+@media screen and (max-width: 420px) {
+  .destination-card + .destination-card {
+    display: none;
+  }
+}
+.user-box > * {
+  -webkit-animation: top 1s var(--delay) both;
+          animation: top 1s var(--delay) both;
+}
\ No newline at end of file
diff --git a/customer-management-ui/license.txt b/customer-management-ui/license.txt
new file mode 100644
index 0000000..a607d34
--- /dev/null
+++ b/customer-management-ui/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Aysenur Turk (https://codepen.io/TurkAysenur/pen/NWRqoyL)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/customer-management-ui/src/index.html b/customer-management-ui/src/index.html
new file mode 100644
index 0000000..e004dad
--- /dev/null
+++ b/customer-management-ui/src/index.html
@@ -0,0 +1,483 @@
+<div class="wrapper">
+ <div class="left-side">
+  <svg viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="active">
+   <path d="M197.3 170.7h-160A37.4 37.4 0 010 133.3v-96A37.4 37.4 0 0137.3 0h160a37.4 37.4 0 0137.4 37.3v96a37.4 37.4 0 01-37.4 37.4zM37.3 32c-3 0-5.3 2.4-5.3 5.3v96c0 3 2.4 5.4 5.3 5.4h160c3 0 5.4-2.4 5.4-5.4v-96c0-3-2.4-5.3-5.4-5.3zm0 0M197.3 512h-160A37.4 37.4 0 010 474.7v-224a37.4 37.4 0 0137.3-37.4h160a37.4 37.4 0 0137.4 37.4v224a37.4 37.4 0 01-37.4 37.3zm-160-266.7c-3 0-5.3 2.4-5.3 5.4v224c0 3 2.4 5.3 5.3 5.3h160c3 0 5.4-2.4 5.4-5.3v-224c0-3-2.4-5.4-5.4-5.4zm0 0M474.7 512h-160a37.4 37.4 0 01-37.4-37.3v-96a37.4 37.4 0 0137.4-37.4h160a37.4 37.4 0 0137.3 37.4v96a37.4 37.4 0 01-37.3 37.3zm-160-138.7c-3 0-5.4 2.4-5.4 5.4v96c0 3 2.4 5.3 5.4 5.3h160c3 0 5.3-2.4 5.3-5.3v-96c0-3-2.4-5.4-5.3-5.4zm0 0M474.7 298.7h-160a37.4 37.4 0 01-37.4-37.4v-224A37.4 37.4 0 01314.7 0h160A37.4 37.4 0 01512 37.3v224a37.4 37.4 0 01-37.3 37.4zM314.7 32c-3 0-5.4 2.4-5.4 5.3v224c0 3 2.4 5.4 5.4 5.4h160c3 0 5.3-2.4 5.3-5.4v-224c0-3-2.4-5.3-5.3-5.3zm0 0" /></svg>
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+   <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" /></svg>
+  <svg viewBox="0 1 511 512" fill="currentColor">
+   <path d="M498.7 222.7L289.8 13.8a46.8 46.8 0 00-66.7 0L14.4 222.6l-.2.2A47.2 47.2 0 0047 303h8.3v153.7a55.2 55.2 0 0055.2 55.2h81.7a15 15 0 0015-15V376.5a25.2 25.2 0 0125.2-25.2h48.2a25.2 25.2 0 0125.1 25.2V497a15 15 0 0015 15h81.8a55.2 55.2 0 0055.1-55.2V303.1h7.7a47.2 47.2 0 0033.4-80.4zm-21.2 45.4a17 17 0 01-12.2 5h-22.7a15 15 0 00-15 15v168.7a25.2 25.2 0 01-25.1 25.2h-66.8V376.5a55.2 55.2 0 00-55.1-55.2h-48.2a55.2 55.2 0 00-55.2 55.2V482h-66.7a25.2 25.2 0 01-25.2-25.2V288.1a15 15 0 00-15-15h-23A17.2 17.2 0 0135.5 244L244.4 35a17 17 0 0124.2 0l208.8 208.8v.1a17.2 17.2 0 010 24.2zm0 0" /></svg>
+  <svg viewBox="0 0 512 512" fill="currentColor">
+   <path d="M467 76H45a45 45 0 00-45 45v270a45 45 0 0045 45h422a45 45 0 0045-45V121a45 45 0 00-45-45zm-6.3 30L287.8 278a44.7 44.7 0 01-63.6 0L51.3 106h409.4zM30 384.9V127l129.6 129L30 384.9zM51.3 406L181 277.2l22 22c14.2 14.1 33 22 53.1 22 20 0 38.9-7.9 53-22l22-22L460.8 406H51.3zM482 384.9L352.4 256 482 127V385z" /></svg>
+  <svg viewBox="0 0 512 512" fill="currentColor">
+   <path d="M272 512h-32c-26 0-47.2-21.1-47.2-47.1V454c-11-3.5-21.8-8-32.1-13.3l-7.7 7.7a47.1 47.1 0 01-66.7 0l-22.7-22.7a47.1 47.1 0 010-66.7l7.7-7.7c-5.3-10.3-9.8-21-13.3-32.1H47.1c-26 0-47.1-21.1-47.1-47.1v-32.2c0-26 21.1-47.1 47.1-47.1H58c3.5-11 8-21.8 13.3-32.1l-7.7-7.7a47.1 47.1 0 010-66.7l22.7-22.7a47.1 47.1 0 0166.7 0l7.7 7.7c10.3-5.3 21-9.8 32.1-13.3V47.1c0-26 21.1-47.1 47.1-47.1h32.2c26 0 47.1 21.1 47.1 47.1V58c11 3.5 21.8 8 32.1 13.3l7.7-7.7a47.1 47.1 0 0166.7 0l22.7 22.7a47.1 47.1 0 010 66.7l-7.7 7.7c5.3 10.3 9.8 21 13.3 32.1h10.9c26 0 47.1 21.1 47.1 47.1v32.2c0 26-21.1 47.1-47.1 47.1H454c-3.5 11-8 21.8-13.3 32.1l7.7 7.7a47.1 47.1 0 010 66.7l-22.7 22.7a47.1 47.1 0 01-66.7 0l-7.7-7.7c-10.3 5.3-21 9.8-32.1 13.3v10.9c0 26-21.1 47.1-47.1 47.1zM165.8 409.2a176.8 176.8 0 0045.8 19 15 15 0 0111.3 14.5V465c0 9.4 7.7 17.1 17.1 17.1h32.2c9.4 0 17.1-7.7 17.1-17.1v-22.2a15 15 0 0111.3-14.5c16-4.2 31.5-10.6 45.8-19a15 15 0 0118.2 2.3l15.7 15.7a17.1 17.1 0 0024.2 0l22.8-22.8a17.1 17.1 0 000-24.2l-15.7-15.7a15 15 0 01-2.3-18.2 176.8 176.8 0 0019-45.8 15 15 0 0114.5-11.3H465c9.4 0 17.1-7.7 17.1-17.1v-32.2c0-9.4-7.7-17.1-17.1-17.1h-22.2a15 15 0 01-14.5-11.2c-4.2-16.1-10.6-31.6-19-45.9a15 15 0 012.3-18.2l15.7-15.7a17.1 17.1 0 000-24.2l-22.8-22.8a17.1 17.1 0 00-24.2 0l-15.7 15.7a15 15 0 01-18.2 2.3 176.8 176.8 0 00-45.8-19 15 15 0 01-11.3-14.5V47c0-9.4-7.7-17.1-17.1-17.1h-32.2c-9.4 0-17.1 7.7-17.1 17.1v22.2a15 15 0 01-11.3 14.5c-16 4.2-31.5 10.6-45.8 19a15 15 0 01-18.2-2.3l-15.7-15.7a17.1 17.1 0 00-24.2 0l-22.8 22.8a17.1 17.1 0 000 24.2l15.7 15.7a15 15 0 012.3 18.2 176.8 176.8 0 00-19 45.8 15 15 0 01-14.5 11.3H47c-9.4 0-17.1 7.7-17.1 17.1v32.2c0 9.4 7.7 17.1 17.1 17.1h22.2a15 15 0 0114.5 11.3c4.2 16 10.6 31.5 19 45.8a15 15 0 01-2.3 18.2l-15.7 15.7a17.1 17.1 0 000 24.2l22.8 22.8a17.1 17.1 0 0024.2 0l15.7-15.7a15 15 0 0118.2-2.3z" />
+   <path d="M256 367.4c-61.4 0-111.4-50-111.4-111.4s50-111.4 111.4-111.4 111.4 50 111.4 111.4-50 111.4-111.4 111.4zm0-192.8a81.5 81.5 0 000 162.8 81.5 81.5 0 000-162.8z" /></svg>
+  <svg viewBox="0 0 512 512" fill="currentColor">
+   <path d="M255.2 468.6H63.8a21.3 21.3 0 01-21.3-21.2V64.6c0-11.7 9.6-21.2 21.3-21.2h191.4a21.2 21.2 0 100-42.5H63.8A63.9 63.9 0 000 64.6v382.8A63.9 63.9 0 0063.8 511H255a21.2 21.2 0 100-42.5z" />
+   <path d="M505.7 240.9L376.4 113.3a21.3 21.3 0 10-29.9 30.3l92.4 91.1H191.4a21.2 21.2 0 100 42.6h247.5l-92.4 91.1a21.3 21.3 0 1029.9 30.3l129.3-127.6a21.3 21.3 0 000-30.2z" /></svg>
+ </div>
+ <div class="main-container">
+  <div class="header">
+   <div class="logo">Rent
+    <span class=logo-det>Cr</span></div>
+   <a class="header-link active" href="#"><svg viewBox="-6 0 512 512" fill="currentColor">
+     <path d="M227.7 357.5a15.1 15.1 0 0021.3 0l54-54a15.1 15.1 0 10-21.4-21.3l-43.3 43.2-19.7-19.7a15.1 15.1 0 00-21.4 21.4zm0 0" />
+     <path d="M250.1 439.8a120.1 120.1 0 10-120-120c0 66.2 53.8 120 120 120zm0-209.7a89.9 89.9 0 010 179.5 89.9 89.9 0 010-179.5zm0 0" />
+     <path d="M451.3 32.2h-27.5v-17a15.1 15.1 0 00-30.3 0v17h-29.7v-17a15.1 15.1 0 00-30.2 0v17h-167v-17a15.1 15.1 0 00-30.2 0v17h-29.7v-17a15.1 15.1 0 00-30.2 0v17H48.9A49 49 0 000 81v382A49 49 0 0048.9 512h402.4a49 49 0 0049-48.9v-382a49 49 0 00-49-49zm18.7 431c0 10.2-8.4 18.6-18.7 18.6H49A18.7 18.7 0 0130.2 463V158H470zM30.2 81c0-10.3 8.4-18.7 18.7-18.7h27.6v17.1a15.1 15.1 0 0030.2 0v-17h29.7v17a15.1 15.1 0 0030.3 0v-17h166.9v17a15.1 15.1 0 0030.2 0v-17h29.7v17a15.1 15.1 0 0030.3 0v-17h27.5c10.3 0 18.7 8.3 18.7 18.6v46.6H30.2zm0 0" />
+    </svg>
+    Bookings
+   </a>
+   <a class="header-link" href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+     <path d="M10 13a2 2 0 110-4 2 2 0 010 4zm0-2.5a.5.5 0 100 1 .5.5 0 000-1z" />
+     <path d="M20.3 11.8h-8.8a.8.8 0 010-1.6h8.8a.8.8 0 010 1.6zM8.5 11.8H3.7a.8.8 0 010-1.6h4.8a.8.8 0 010 1.6zM15 19a2 2 0 110-4 2 2 0 010 4zm0-2.5a.5.5 0 100 1 .5.5 0 000-1z" />
+     <path d="M20.3 17.8h-3.8a.8.8 0 010-1.6h3.8a.8.8 0 010 1.6zM13.5 17.8H3.7a.8.8 0 010-1.6h9.8a.8.8 0 010 1.6z" />
+     <path d="M21.3 23H2.6A2.8 2.8 0 010 20.2V3.9C0 2.1 1.2 1 2.8 1h18.4C22.9 1 24 2.2 24 3.8v16.4c0 1.6-1.2 2.8-2.8 2.8zM2.6 2.5c-.6 0-1.2.6-1.2 1.3v16.4c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3V3.9c0-.7-.6-1.3-1.3-1.3z" />
+     <path d="M23.3 6H.6a.8.8 0 010-1.5h22.6a.8.8 0 010 1.5z" />
+    </svg>
+    Controller
+   </a>
+   <a class="header-link" href="#"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+     <path d="M500 113.3C326.1 78.7 337.4 80.5 333.4 81.2L281 91.7A111.2 111.2 0 00176 17c-48.6 0-90 31.3-105 74.8L18 81.3A15 15 0 000 96v352a15 15 0 0012 14.7l162.2 32.2c3.6.4-7.6 2.3 161.8-31.6l158 31.4a15 15 0 0018-14.7V128a15 15 0 00-12-14.7zM176 47a81 81 0 0181 81c0 37.7-60.3 133.3-81 165-20.7-31.6-81-127.3-81-165a81 81 0 0181-81zM30 114.2l35.2 7a112 112 0 00-.2 6.8c0 25 16.4 65.4 50 123.4 19.7 33.9 39 63 46 73.2v137.1l-131-26zm161 210.4c7-10.2 26.3-39.3 46-73.2 33.6-58 50-98.4 50-123.4 0-2.3 0-4.6-.2-6.9l34.2-6.8v321.4l-130 26zm291 137.1l-131-26V114.3l131 26z" />
+     <path d="M176 175a47 47 0 10-.1-94.1 47 47 0 00.1 94zm0-64a17 17 0 110 34 17 17 0 010-34z" /></svg>
+    Map
+   </a>
+   <a class="header-link" href="#"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+     <path d="M76 240c12.1 0 23.1-4.8 31.2-12.6l44.2 22A44.9 44.9 0 00196 300a45 45 0 0040.6-64.4l60-60a45 45 0 0062.3-54l52.2-39.2a45 45 0 10-18-24l-52.2 39.2a45 45 0 00-65.5 56.8l-60 60a44.7 44.7 0 00-50.6 8.2l-44.2-22A44.9 44.9 0 0076 150a45 45 0 000 90zM436 30a15 15 0 110 30 15 15 0 010-30zm-120 90a15 15 0 110 30 15 15 0 010-30zM196 240a15 15 0 110 30 15 15 0 010-30zM76 180a15 15 0 110 30 15 15 0 010-30zm0 0" />
+     <path d="M497 482h-16V165a15 15 0 00-15-15h-60a15 15 0 00-15 15v317h-30V255a15 15 0 00-15-15h-60a15 15 0 00-15 15v227h-30V375a15 15 0 00-15-15h-60a15 15 0 00-15 15v107h-30V315a15 15 0 00-15-15H46a15 15 0 00-15 15v167H15a15 15 0 100 30h482a15 15 0 100-30zm-76-302h30v302h-30zm-120 90h30v212h-30zM181 390h30v92h-30zM61 330h30v152H61zm0 0" />
+    </svg>
+    Reports
+   </a>
+   <div class="user-info">
+    <button class="button">All
+     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
+      <path d="M6 9l6 6 6-6" /></svg>
+    </button>
+    <div class="user-name">Mike J</div>
+    <svg class="profile" viewBox="-42 0 512 512" fill="currentColor">
+     <path d="M210.4 246.6c33.8 0 63.2-12.1 87.1-36.1 24-24 36.2-53.3 36.2-87.2 0-33.9-12.2-63.2-36.2-87.2-24-24-53.3-36.1-87.1-36.1-34 0-63.3 12.2-87.2 36.1S87 89.4 87 123.3c0 33.9 12.2 63.2 36.2 87.2 24 24 53.3 36.1 87.2 36.1zm-66-189.3a89.1 89.1 0 0166-27.3c26 0 47.5 9 66 27.3a89.2 89.2 0 0127.3 66c0 26-9 47.6-27.4 66a89.1 89.1 0 01-66 27.3c-26 0-47.5-9-66-27.3a89.1 89.1 0 01-27.3-66c0-26 9-47.6 27.4-66zm0 0M426.1 393.7a304.6 304.6 0 00-12-64.9 160.7 160.7 0 00-13.5-30.3c-5.7-10.2-12.5-19-20.1-26.3a88.9 88.9 0 00-29-18.2 100.1 100.1 0 00-37-6.7c-5.2 0-10.2 2.2-20 8.5-6 4-13 8.5-20.9 13.5-6.7 4.3-15.8 8.3-27 11.9a107.3 107.3 0 01-66 0 119.3 119.3 0 01-27-12l-21-13.4c-9.7-6.3-14.8-8.5-20-8.5a100 100 0 00-37 6.7 88.8 88.8 0 00-29 18.2 114.4 114.4 0 00-20.1 26.3 161 161 0 00-13.4 30.3A302.5 302.5 0 001 393.7c-.7 9.8-1 20-1 30.2 0 26.8 8.5 48.4 25.3 64.4C41.8 504 63.6 512 90.3 512h246.5c26.7 0 48.6-8 65.1-23.7 16.8-16 25.3-37.6 25.3-64.4a437 437 0 00-1-30.2zm-44.9 72.8c-11 10.4-25.4 15.5-44.4 15.5H90.3c-19 0-33.4-5-44.4-15.5C35.2 456.3 30 442.4 30 424c0-9.5.3-19 1-28.1A272.9 272.9 0 0141.7 338a131 131 0 0110.9-24.7A84.8 84.8 0 0167.4 294a59 59 0 0119.3-12 69 69 0 0123.6-4.5c1 .5 3 1.6 6 3.6l21 13.6c9 5.6 20.4 10.7 34 15.1a137.3 137.3 0 0084.5 0c13.7-4.4 25.1-9.5 34-15.1a2721 2721 0 0027-17.2 69 69 0 0123.7 4.5 59 59 0 0119.2 12 84.5 84.5 0 0114.9 19.4c4.5 8 8.2 16.3 10.8 24.7a275.2 275.2 0 0110.8 57.8c.6 9 1 18.5 1 28.1 0 18.5-5.3 32.4-16 42.6zm0 0" /></svg>
+    <div class="hour">08.20 pm</div>
+   </div>
+  </div>
+  <div class="user-box first-box">
+   <div class="activity card" style="--delay: .2s">
+    <div class="title">User Activities</div>
+    <div class="subtitle">Hoo - is an adaptive Online Courses Application with a wide range of course directions. The students will have a great possibility to study.</div>
+    <div class="activity-links">
+     <div class="activity-link active">Current User</div>
+     <div class="activity-link notify">User Request</div>
+    </div>
+    <div class="destination">
+     <div class="destination-card">
+      <div class="destination-profile">
+       <img class="profile-img" src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" alt="" />
+       <div class="destination-length">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin">
+         <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+         <circle cx="12" cy="10" r="3" />
+        </svg>
+        45.4m
+       </div>
+      </div>
+      <div class="destination-points">
+       <div class="point">Traffic Point</div>
+       <div class="sub-point">Brooklyn St, NY</div>
+      </div>
+     </div>
+     <div class="destination-card">
+      <div class="destination-profile">
+       <img class="profile-img" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" alt="" />
+       <div class="destination-length">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin">
+         <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+         <circle cx="12" cy="10" r="3" />
+        </svg>
+        42.8m
+       </div>
+      </div>
+      <div class="destination-points">
+       <div class="point">Pickup Point</div>
+       <div class="sub-point">Maryland 17, NY</div>
+      </div>
+     </div>
+    </div>
+   </div>
+   <div class="discount card" style="--delay: .4s">
+    <div class="title">Discount Offers</div>
+    <div class="discount-wrapper">
+     <div class="discount-info">
+      <div class="subtitle">The Best Offer is:</div>
+      <div class="subtitle-count">$5</div>
+      <div class="subtitle">Distance:</div>
+      <div class="subtitle-count dist">4.5 Km</div>
+     </div>
+     <div class="discount-chart">
+      <div class="circle">
+       <div class="pie">
+        <svg>
+         <circle cx="60" cy="60" r="50"></circle>
+        </svg>
+       </div>
+       <div class="counter">0</div>
+      </div>
+     </div>
+    </div>
+    <div class="discount-profile">
+     <span class="by">By:</span>
+     <img class="discount-img" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" alt="">
+     <div class="discount-detail">
+      <div class="discount-name">Johnny Cauld</div>
+      <div class="discount-type">Micro bus & Travel Bus</div>
+     </div>
+    </div>
+    <div class="button offer-button">Get Offer</div>
+   </div>
+   <div class="cards-wrapper" style="--delay: .6s">
+    <div class="cards-header">
+     <div class="cards-header-date">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left">
+       <path d="M15 18l-6-6 6-6" /></svg>
+      <div class="title">January 2020</div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
+       <path d="M9 18l6-6-6-6" /></svg>
+     </div>
+    </div>
+    <div class="cards card">
+     <div class="cards-head">
+      <div class="cards-info">
+       <div class="calendar-hour">08.20 <span class="am-pm">pm</span></div>
+       <div class="degree">
+        <svg viewBox="0 0 512 512">
+         <circle cx="330.2" cy="240.1" fill="#feb137" r="78.9" />
+         <g fill="#ffd15b">
+          <path d="M320.5 130c-7.4.6-14-5-14.6-12.3l-4.1-47a13.5 13.5 0 0126.9-2.4l4 47c.7 7.4-4.8 14-12.2 14.6z" />
+          <path d="M320.5 130c-7.4.6-14-5-14.6-12.3l-4.1-47a13.5 13.5 0 0126.9-2.4l4 47c.7 7.4-4.8 14-12.2 14.6zM438 228.5c-.6-7.4 4.9-14 12.3-14.6l47-4a13.5 13.5 0 012.4 26.8l-47 4.1c-7.5.7-14-4.8-14.7-12.3zM413 307.7a13.5 13.5 0 0119-1.6l36.2 30.3a13.5 13.5 0 01-17.3 20.7l-36.2-30.4a13.5 13.5 0 01-1.6-19z" />
+          <path d="M413 307.7a13.5 13.5 0 0119-1.6l36.2 30.3a13.5 13.5 0 01-17.3 20.7l-36.2-30.4a13.5 13.5 0 01-1.6-19zM190 120.6a13.5 13.5 0 0119-1.7l36.2 30.4a13.5 13.5 0 01-17.3 20.6l-36.2-30.3a13.5 13.5 0 01-1.7-19zM447.4 98a13.5 13.5 0 011.7 19l-30.4 36.2A13.5 13.5 0 01398 136l30.4-36.2a13.5 13.5 0 0119-1.6z" />
+         </g>
+         <path d="M360 335.4a70.8 70.8 0 00-87.4-74A95 95 0 0085 286a85 85 0 00-3.4 170h273a60.4 60.4 0 005.2-120.6z" fill="#d8ecfe" />
+         <path d="M360 335.4a70.8 70.8 0 00-87.4-74 95 95 0 00-125.7-68.3 95 95 0 0190.6 74.2 70.8 70.8 0 0187.4 74A60.4 60.4 0 01345.6 456h9.2a60.4 60.4 0 005.1-120.6z" fill="#c4e2ff" />
+        </svg>
+        81.2° F in Sylhet
+       </div>
+      </div>
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M272 512h-32c-26 0-47.2-21.1-47.2-47.1V454c-11-3.5-21.8-8-32.1-13.3l-7.7 7.7a47.1 47.1 0 01-66.7 0l-22.7-22.7a47.1 47.1 0 010-66.7l7.7-7.7c-5.3-10.3-9.8-21-13.3-32.1H47.1c-26 0-47.1-21.1-47.1-47.1v-32.2c0-26 21.1-47.1 47.1-47.1H58c3.5-11 8-21.8 13.3-32.1l-7.7-7.7a47.1 47.1 0 010-66.7l22.7-22.7a47.1 47.1 0 0166.7 0l7.7 7.7c10.3-5.3 21-9.8 32.1-13.3V47.1c0-26 21.1-47.1 47.1-47.1h32.2c26 0 47.1 21.1 47.1 47.1V58c11 3.5 21.8 8 32.1 13.3l7.7-7.7a47.1 47.1 0 0166.7 0l22.7 22.7a47.1 47.1 0 010 66.7l-7.7 7.7c5.3 10.3 9.8 21 13.3 32.1h10.9c26 0 47.1 21.1 47.1 47.1v32.2c0 26-21.1 47.1-47.1 47.1H454c-3.5 11-8 21.8-13.3 32.1l7.7 7.7a47.1 47.1 0 010 66.7l-22.7 22.7a47.1 47.1 0 01-66.7 0l-7.7-7.7c-10.3 5.3-21 9.8-32.1 13.3v10.9c0 26-21.1 47.1-47.1 47.1zM165.8 409.2a176.8 176.8 0 0045.8 19 15 15 0 0111.3 14.5V465c0 9.4 7.7 17.1 17.1 17.1h32.2c9.4 0 17.1-7.7 17.1-17.1v-22.2a15 15 0 0111.3-14.5c16-4.2 31.5-10.6 45.8-19a15 15 0 0118.2 2.3l15.7 15.7a17.1 17.1 0 0024.2 0l22.8-22.8a17.1 17.1 0 000-24.2l-15.7-15.7a15 15 0 01-2.3-18.2 176.8 176.8 0 0019-45.8 15 15 0 0114.5-11.3H465c9.4 0 17.1-7.7 17.1-17.1v-32.2c0-9.4-7.7-17.1-17.1-17.1h-22.2a15 15 0 01-14.5-11.2c-4.2-16.1-10.6-31.6-19-45.9a15 15 0 012.3-18.2l15.7-15.7a17.1 17.1 0 000-24.2l-22.8-22.8a17.1 17.1 0 00-24.2 0l-15.7 15.7a15 15 0 01-18.2 2.3 176.8 176.8 0 00-45.8-19 15 15 0 01-11.3-14.5V47c0-9.4-7.7-17.1-17.1-17.1h-32.2c-9.4 0-17.1 7.7-17.1 17.1v22.2a15 15 0 01-11.3 14.5c-16 4.2-31.5 10.6-45.8 19a15 15 0 01-18.2-2.3l-15.7-15.7a17.1 17.1 0 00-24.2 0l-22.8 22.8a17.1 17.1 0 000 24.2l15.7 15.7a15 15 0 012.3 18.2 176.8 176.8 0 00-19 45.8 15 15 0 01-14.5 11.3H47c-9.4 0-17.1 7.7-17.1 17.1v32.2c0 9.4 7.7 17.1 17.1 17.1h22.2a15 15 0 0114.5 11.3c4.2 16 10.6 31.5 19 45.8a15 15 0 01-2.3 18.2l-15.7 15.7a17.1 17.1 0 000 24.2l22.8 22.8a17.1 17.1 0 0024.2 0l15.7-15.7a15 15 0 0118.2-2.3z"></path>
+       <path d="M256 367.4c-61.4 0-111.4-50-111.4-111.4s50-111.4 111.4-111.4 111.4 50 111.4 111.4-50 111.4-111.4 111.4zm0-192.8a81.5 81.5 0 000 162.8 81.5 81.5 0 000-162.8z"></path>
+      </svg>
+     </div>
+     <div class="items days">
+      <div class="item">Mon</div>
+      <div class="item">Tue</div>
+      <div class="item">Wed</div>
+      <div class="item">Thu</div>
+      <div class="item">Fri</div>
+      <div class="item">Sat</div>
+      <div class="item">Sun</div>
+     </div>
+     <div class="items numbers">
+      <div class="item">1</div>
+      <div class="item">2</div>
+      <div class="item">3</div>
+      <div class="item">4</div>
+      <div class="item">5</div>
+      <div class="item">6</div>
+      <div class="item">7</div>
+      <div class="item">8</div>
+      <div class="item">9</div>
+      <div class="item">10</div>
+      <div class="item">11</div>
+      <div class="item">12</div>
+      <div class="item">13</div>
+      <div class="item">14</div>
+      <div class="item">15</div>
+      <div class="item">16</div>
+      <div class="item is-active">17</div>
+      <div class="item">18</div>
+      <div class="item">19</div>
+      <div class="item">20</div>
+      <div class="item">21</div>
+      <div class="item">22</div>
+      <div class="item">23</div>
+      <div class="item">24</div>
+      <div class="item">25</div>
+      <div class="item">26</div>
+      <div class="item">27</div>
+      <div class="item">28</div>
+      <div class="item">29</div>
+      <div class="item">30</div>
+      <div class="item">31</div>
+      <div class="item disable">1</div>
+      <div class="item disable">2</div>
+      <div class="item disable">3</div>
+     </div>
+    </div>
+   </div>
+   <div class="account-wrapper" style="--delay: .8s">
+    <div class="account-profile">
+     <img src="https://images.unsplash.com/photo-1550314124-301ca0b773ae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2215&q=80" alt="">
+     <div class="blob-wrap">
+      <div class="blob"></div>
+      <div class="blob"></div>
+      <div class="blob"></div>
+     </div>
+     <div class="account-name">Mike J Morgan</div>
+     <div class="account-title">Taxi Driver</div>
+    </div>
+    <div class="account card">
+     <div class="account-cash">$ 5637.04</div>
+     <div class="account-income">Total Income</div>
+     <div class="account-iban">**** **** **** 3060</div>
+    </div>
+   </div>
+  </div>
+  <div class="user-box second-box">
+   <div class="cards-wrapper" style="--delay: 1s">
+    <div class="cards-header">
+     <div class="cards-view">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
+       <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+       <path d="M16 2v4M8 2v4M3 10h18" />
+      </svg>
+      Calendar View
+      <span class="today">Today</span>
+     </div>
+     <div class="cards-header-date">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left">
+       <path d="M15 18l-6-6 6-6" /></svg>
+      <div class="title">Sat, Nov 25 2020</div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
+       <path d="M9 18l6-6-6-6" /></svg>
+     </div>
+     <div class="cards-button button">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+       <path d="M12 5v14M5 12h14" />
+      </svg>
+      Create
+     </div>
+    </div>
+    <div class="cards card">
+     <table class="table">
+      <thead>
+       <tr>
+        <th>T</th>
+        <th>Name</th>
+        <th>From</th>
+        <th>To</th>
+        <th>V</th>
+        <th>B</th>
+        <th>C</th>
+        <th>A</th>
+        <th>W</th>
+        <th>Status</th>
+       </tr>
+      </thead>
+      <tbody>
+       <tr>
+        <td>
+         <input type="checkbox" id="row1" class="table-row">
+         <span class="time">17.00</span>
+        </td>
+        <td>John D</td>
+        <td>Sudbury Station</td>
+        <td>Center Plaza</td>
+        <td>N</td>
+        <td></td>
+        <td>€</td>
+        <td></td>
+        <td><svg viewBox="-22 0 134 134.06032" fill="currentColor">
+          <path d="M23.347656 134.058594C8.445312 84.953125 39.933594 67.023438 39.933594 67.023438c-2.203125 26.203124 12.6875 46.617187 12.6875 46.617187 5.476562-1.652344 15.929687-9.375 15.929687-9.375 0 9.375-5.515625 29.78125-5.515625 29.78125s19.308594-14.929687 25.386719-39.726563c6.070313-24.796874-11.5625-49.691406-11.5625-49.691406 1.0625 17.550782-4.875 34.8125-16.507813 48 .582032-.671875 1.070313-1.417968 1.445313-2.226562 2.089844-4.179688 5.445313-15.042969 3.480469-40.199219C62.511719 14.890625 30.515625 0 30.515625 0c2.757813 21.515625-5.511719 26.472656-24.882813 67.3125-19.371093 40.832031 17.714844 66.746094 17.714844 66.746094zm0 0" />
+         </svg></td>
+        <td>
+         <div class="status is-green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+           <path d="M20 6L9 17l-5-5" />
+          </svg>
+          Active
+         </div>
+        </td>
+       </tr>
+       <tr>
+        <td>
+         <input type="checkbox" id="row2" class="table-row">
+         <span class="time">17.00</span>
+        </td>
+        <td>Rufi</td>
+        <td>One Beacon</td>
+        <td>Los Angeles</td>
+        <td>N</td>
+        <td></td>
+        <td>€</td>
+        <td></td>
+        <td><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity">
+          <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+         </svg></td>
+        <td>
+         <div class="status is-red">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+           <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+          Rejected
+         </div>
+        </td>
+       </tr>
+       <tr>
+        <td>
+         <input type="checkbox" id="row3" class="table-row">
+         <span class="time is-wait">17.00</span>
+        </td>
+        <td>Alfred</td>
+        <td>5 Main High</td>
+        <td>Center Plaza</td>
+        <td>N</td>
+        <td></td>
+        <td>€</td>
+        <td></td>
+        <td><svg viewBox="-22 0 134 134.06032" fill="currentColor">
+          <path d="M23.347656 134.058594C8.445312 84.953125 39.933594 67.023438 39.933594 67.023438c-2.203125 26.203124 12.6875 46.617187 12.6875 46.617187 5.476562-1.652344 15.929687-9.375 15.929687-9.375 0 9.375-5.515625 29.78125-5.515625 29.78125s19.308594-14.929687 25.386719-39.726563c6.070313-24.796874-11.5625-49.691406-11.5625-49.691406 1.0625 17.550782-4.875 34.8125-16.507813 48 .582032-.671875 1.070313-1.417968 1.445313-2.226562 2.089844-4.179688 5.445313-15.042969 3.480469-40.199219C62.511719 14.890625 30.515625 0 30.515625 0c2.757813 21.515625-5.511719 26.472656-24.882813 67.3125-19.371093 40.832031 17.714844 66.746094 17.714844 66.746094zm0 0" />
+         </svg></td>
+        <td>
+         <div class="status is-wait"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader">
+           <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
+          </svg>
+          Waiting
+         </div>
+        </td>
+       </tr>
+       <tr>
+        <td>
+         <input type="checkbox" id="row4" class="table-row">
+         <span class="time is-wait">17.00</span>
+        </td>
+        <td>Mike J.</td>
+        <td>Brooklyn 99</td>
+        <td>Park, NY</td>
+        <td>N</td>
+        <td></td>
+        <td>€</td>
+        <td></td>
+        <td><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity">
+          <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+         </svg></td>
+        <td>
+         <div class="status is-wait"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader">
+           <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
+          </svg>
+          Waiting
+         </div>
+        </td>
+       </tr>
+       <tr>
+        <td>
+         <input type="checkbox" id="row5" class="table-row">
+         <span class="time">17.00</span>
+        </td>
+        <td>Hermann B.</td>
+        <td>Janburg Station</td>
+        <td>Center Park</td>
+        <td>N</td>
+        <td></td>
+        <td>€</td>
+        <td></td>
+        <td><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity">
+          <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+         </svg></td>
+        <td>
+         <div class="status is-green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+           <path d="M20 6L9 17l-5-5" />
+          </svg>
+          Active
+         </div>
+        </td>
+       </tr>
+      </tbody>
+     </table>
+    </div>
+   </div>
+   
+   <div class="card transection" style="--delay: 1.2s">
+    <div class="transection-header">
+     <div class="head">Transections</div>
+     <div class="head is-wait">View All</div>
+    </div>
+    <div class="credit-wrapper">
+     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291.764 291.764"  style="background-color:#292c6d">
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path d="M119.259 100.23l-14.643 91.122h23.405l14.634-91.122h-23.396zm70.598 37.118c-8.179-4.039-13.193-6.765-13.193-10.896.1-3.756 4.24-7.604 13.485-7.604 7.604-.191 13.193 1.596 17.433 3.374l2.124.948 3.182-19.065c-4.623-1.787-11.953-3.756-21.007-3.756-23.113 0-39.388 12.017-39.489 29.204-.191 12.683 11.652 19.721 20.515 23.943 9.054 4.331 12.136 7.139 12.136 10.987-.1 5.908-7.321 8.634-14.059 8.634-9.336 0-14.351-1.404-21.964-4.696l-3.082-1.404-3.273 19.813c5.498 2.444 15.609 4.595 26.104 4.705 24.563 0 40.546-11.835 40.747-30.152.08-10.048-6.165-17.744-19.659-24.035zm83.034-36.836h-18.108c-5.58 0-9.82 1.605-12.236 7.331l-34.766 83.509h24.563l6.765-18.08h27.481l3.51 18.153h21.664l-18.873-90.913zm-26.97 54.514c.474.046 9.428-29.514 9.428-29.514l7.13 29.514h-16.558zM85.059 100.23l-22.931 61.909-2.498-12.209c-4.24-14.087-17.533-29.395-32.368-36.999l20.998 78.33h24.764l36.799-91.021H85.059v-.01z" fill="#fff" data-original="#2394bc"/>
+    <path d="M51.916 111.982c-1.787-6.948-7.486-11.634-15.226-11.734H.374L0 101.934c28.329 6.984 52.107 28.474 59.821 48.688l-7.905-38.64z" fill="#fffffe" data-original="#efc75e"/>
+  </g>
+</svg>
+     <div class="credit-name">
+      <div class="credit-type">Visa</div>
+      <div class="credit-status">Payment Received</div>
+     </div>
+     <div class="credit-money is-active">+$3.945</div>
+    </div>
+    <div class="credit-wrapper">
+     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="background-color:#1f2755">
+  <path xmlns="http://www.w3.org/2000/svg" d="M488.727 66.494H23.273C10.42 66.494 0 76.914 0 89.767v332.466c0 12.853 10.42 23.273 23.273 23.273h465.454c12.853 0 23.273-10.42 23.273-23.273V89.767c0-12.853-10.42-23.273-23.273-23.273z" fill="#1f2755" data-original="#5286f9"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M273.776 189.773c5.115 5.86 9.57 12.31 13.236 19.242 7.427 14.041 11.655 30.026 11.655 46.986s-4.228 32.943-11.655 46.986c-3.666 6.932-8.121 13.38-13.236 19.24-5.264 6.031-11.23 11.427-17.776 16.069 16.454 11.664 36.523 18.553 58.182 18.553 55.608 0 100.849-45.241 100.849-100.848S369.79 155.152 314.182 155.152c-21.659 0-41.728 6.886-58.182 18.553 6.544 4.642 12.51 10.039 17.776 16.068z" fill="#f0425c" data-original="#ffb655"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M287.012 209.016c-3.666-6.934-8.121-13.382-13.236-19.242-5.267-6.031-11.231-11.425-17.776-16.066-16.452-11.667-36.523-18.553-58.182-18.553-55.608 0-100.848 45.241-100.848 100.848s45.241 100.848 100.848 100.848c21.659 0 41.73-6.887 58.182-18.553 6.546-4.641 12.51-10.038 17.776-16.067 5.115-5.86 9.57-12.31 13.236-19.24 7.427-14.043 11.655-30.028 11.655-46.986 0-16.964-4.228-32.948-11.655-46.989z" fill="#ef8641" data-original="#d8143a"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M197.818 356.851c-55.608 0-100.848-45.241-100.848-100.848s45.241-100.848 100.848-100.848c21.659 0 41.728 6.886 58.182 18.553V66.494H23.273C10.42 66.494 0 76.914 0 89.767v332.466c0 12.853 10.42 23.273 23.273 23.273H256v-107.21c-16.454 11.666-36.523 18.555-58.182 18.555z" fill="#1f2755" data-original="#3d6deb"/>
+</svg>
+     <div class="credit-name">
+      <div class="credit-type">MasterCard</div>
+      <div class="credit-status">Account Deposit</div>
+     </div>
+     <div class="credit-money is-active">+$3.00</div>
+    </div>
+    <div class="credit-wrapper">
+     <svg viewBox="0 0 504 504" style="background-color: #046fcf">
+  <path xmlns="http://www.w3.org/2000/svg" fill="#fff" data-original="#2fabf7" d="M43.2 207.6h17.6L52 185.2z"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M261.6 188.4c-1.6-.8-4-.8-6.4-.8h-16v12.8h16c2.4 0 4.8 0 6.4-.8s2.4-3.2 2.4-5.6c.8-3.2-.8-4.8-2.4-5.6z" fill="#fff" data-original="#228fe0"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M432.8 164.4v9.6l-4.8-9.6h-37.6v9.6l-4.8-9.6h-51.2c-8.8 0-16 1.6-22.4 4.8v-4.8h-36v4.8c-4-3.2-8.8-4.8-15.2-4.8H132l-8.8 20-8.8-20H73.6v9.6l-4.8-9.6H34.4l-16 37.6L0 243.6h40.8l4.8-12.8h11.2l4.8 12.8H108V234l4 9.6h23.2l4-9.6v9.6h111.2v-20.8h1.6c1.6 0 1.6 0 1.6 2.4v17.6h57.6V238c4.8 2.4 12 4.8 21.6 4.8h24l4.8-12.8h11.2l4.8 12.8H424v-12l7.2 12h37.6v-78.4h-36zm-270.4 67.2h-13.6v-44l-19.2 44h-12l-19.2-44v44H71.2l-5.6-12H38.4l-4.8 12.8H18.4l24-56.8h20l22.4 53.6v-53.6h21.6L124 214l16-38.4h22.4v56zm54.4-44h-31.2V198H216v11.2h-30.4v11.2h31.2v12H172v-56.8h44.8v12zm60 23.2c1.6 3.2 2.4 5.6 2.4 10.4v11.2h-13.6v-7.2c0-3.2 0-8-2.4-11.2-2.4-2.4-4.8-2.4-9.6-2.4h-14.4v20.8h-13.6v-56.8H256c7.2 0 12 0 16 2.4s6.4 6.4 6.4 12.8c0 8.8-5.6 13.6-9.6 15.2 4 .8 6.4 3.2 8 4.8zm24 20.8h-13.6v-56.8h13.6v56.8zm157.6 0h-19.2l-25.6-42.4v42.4h-27.2l-4.8-12h-28l-4.8 12.8h-15.2c-6.4 0-14.4-1.6-19.2-6.4-4.8-4.8-7.2-11.2-7.2-21.6 0-8 1.6-16 7.2-22.4 4-4.8 11.2-6.4 20-6.4h12.8v12h-12.8c-4.8 0-7.2.8-10.4 3.2-2.4 2.4-4 7.2-4 12.8 0 6.4.8 10.4 4 13.6 2.4 2.4 5.6 3.2 9.6 3.2h5.6l18.4-44h20L400 230v-53.6h20l23.2 39.2v-39.2h13.6v55.2h1.6z" fill="#fbfbfb" data-original="#0571c1"/>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path fill="#fff" data-original="#228fe0" d="M358.4 207.6h18.4l-8.8-22.4zM222.4 322.8v-45.6l-20.8 22.4z"/>
+  </g>
+  <path xmlns="http://www.w3.org/2000/svg" fill="#fff" data-original="#2fabf7" d="M136.8 282.8v10.4h29.6v11.2h-29.6v12h32.8l15.2-16.8-14.4-16.8z"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M252.8 282.8H236v14.4h17.6c4.8 0 8-2.4 8-7.2-.8-4.8-4-7.2-8.8-7.2z" fill="#fff" data-original="#228fe0"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M500 296.4v-36h-33.6c-7.2 0-12.8 1.6-16.8 4.8v-4.8h-36.8c-5.6 0-12.8 1.6-16 4.8v-4.8H332v4.8c-4.8-4-13.6-4.8-17.6-4.8h-43.2v4.8c-4-4-13.6-4.8-18.4-4.8h-48l-11.2 12-10.4-12h-72v78.4h70.4l11.2-12 10.4 12h43.2v-18.4h5.6c5.6 0 12.8 0 18.4-2.4v21.6h36v-20.8h1.6c2.4 0 2.4 0 2.4 2.4v18.4h108.8c7.2 0 14.4-1.6 18.4-4.8v4.8H472c7.2 0 14.4-.8 19.2-4 8-4.8 12.8-13.6 12.8-24 0-5.6-1.6-11.2-4-15.2zm-248 12.8h-16v19.2h-25.6l-16-18.4-16.8 18.4h-52.8v-56.8h53.6l16 18.4 16.8-18.4h42.4c10.4 0 22.4 3.2 22.4 18.4-.8 16-12 19.2-24 19.2zm80-3.2c1.6 2.4 2.4 5.6 2.4 10.4v11.2h-13.6v-7.2c0-3.2 0-8.8-2.4-11.2-1.6-2.4-4.8-2.4-9.6-2.4h-14.4v20.8h-13.6v-56.8h30.4c6.4 0 12 0 16 2.4s7.2 6.4 7.2 12.8c0 8.8-5.6 13.6-9.6 15.2 4 1.6 6.4 3.2 7.2 4.8zm55.2-23.2H356v10.4h30.4v11.2H356v11.2h31.2v12h-44.8v-56.8h44.8v12zm33.6 44.8h-25.6v-12h25.6c2.4 0 4 0 5.6-1.6.8-.8 1.6-2.4 1.6-4s-.8-3.2-1.6-4c-.8-.8-2.4-1.6-4.8-1.6-12.8-.8-28 0-28-17.6 0-8 4.8-16.8 19.2-16.8h26.4v13.6h-24.8c-2.4 0-4 0-5.6.8s-1.6 2.4-1.6 4c0 2.4 1.6 3.2 3.2 4s3.2.8 4.8.8h7.2c7.2 0 12 1.6 15.2 4.8 2.4 2.4 4 6.4 4 12 0 12-7.2 17.6-20.8 17.6zm68.8-5.6c-3.2 3.2-8.8 5.6-16.8 5.6h-25.6v-12h25.6c2.4 0 4 0 5.6-1.6.8-.8 1.6-2.4 1.6-4s-.8-3.2-1.6-4c-.8-.8-2.4-1.6-4.8-1.6-12.8-.8-28 0-28-17.6 0-8 4.8-16.8 19.2-16.8h26.4v13.6h-24c-2.4 0-4 0-5.6.8s-1.6 2.4-1.6 4c0 2.4.8 3.2 3.2 4 1.6.8 3.2.8 4.8.8h7.2c7.2 0 12 1.6 15.2 4.8.8 0 .8.8.8.8 2.4 3.2 3.2 7.2 3.2 11.2 0 4.8-1.6 8.8-4.8 12z" fill="#fbfbfb" data-original="#0571c1"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M317.6 284.4c-1.6-.8-4-.8-6.4-.8h-16v12.8h16c2.4 0 4.8 0 6.4-.8s2.4-3.2 2.4-5.6c.8-3.2-.8-4.8-2.4-5.6z" fill="#fff" data-original="#228fe0"/>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path d="M261.6 188.4c-1.6-.8-4-.8-6.4-.8h-16v12.8h16c2.4 0 4.8 0 6.4-.8s2.4-3.2 2.4-5.6c.8-3.2-.8-4.8-2.4-5.6zM358.4 207.6h18.4l-8.8-22.4zM222.4 322.8v-45.6l-20.8 22.4z" fill="#fff" data-original="#228fe0"/>
+  </g>
+  <path d="M252.8 282.8H236v14.4h17.6c4.8 0 8-2.4 8-7.2-.8-4.8-4-7.2-8.8-7.2zM317.6 284.4c-1.6-.8-4-.8-6.4-.8h-16v12.8h16c2.4 0 4.8 0 6.4-.8s2.4-3.2 2.4-5.6c.8-3.2-.8-4.8-2.4-5.6z" fill="#fff" data-original="#228fe0" xmlns="http://www.w3.org/2000/svg"/>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path fill="#fff" data-original="#2fabf7" d="M247.2 326L236 314v13.6h-26.4l-16-18.4-17.6 18.4h-52.8v-56h53.6l16.8 18.4 8-9.6-20-20h-70.4v78.4h70.4l12-12 10.4 12h43.2zM164 242.8l-10.4-11.2h-4.8v-4.8l-12-12-8 16.8h-11.2l-19.2-44v44H71.2l-5.6-12H38.4l-5.6 12H18.4l24-56h20l22.4 53.6v-53.6h12l-11.2-11.2h-12v9.6l-4-9.6H34.4l-16 37.6L0 242.8H41.6l4.8-12h11.2l5.6 12H108v-9.6l4 9.6h23.2l4-9.6v9.6z"/>
+    <path fill="#fff" data-original="#2fabf7" d="M127.2 206l-12.8-12.8L124 214z"/>
+  </g>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path d="M491.2 334.8c7.2-4.8 12-12.8 12.8-21.6L492.8 302c.8 2.4 1.6 4.8 1.6 8 0 4.8-1.6 8.8-4.8 12-3.2 3.2-8.8 5.6-16.8 5.6h-25.6v-12h25.6c2.4 0 4 0 5.6-1.6.8-.8 1.6-2.4 1.6-4s-.8-3.2-1.6-4c-.8-.8-2.4-1.6-4.8-1.6-12.8-.8-28 0-28-17.6 0-8 4.8-15.2 16.8-16.8l-8.8-8.8c-1.6.8-2.4 1.6-3.2 1.6V258h-36.8c-5.6 0-12.8 1.6-16 4.8V258H332v4.8c-4.8-4-13.6-4.8-17.6-4.8h-43.2v4.8c-4-4-13.6-4.8-18.4-4.8h-48l-11.2 12-10.4-12h-8.8l24 24 12-12.8h42.4c10.4 0 22.4 3.2 22.4 18.4 0 16-11.2 19.2-23.2 19.2h-16v12l12 12v-12h4c5.6 0 12.8 0 18.4-2.4V338h36v-20.8h1.6c2.4 0 2.4 0 2.4 2.4V338h108.8c7.2 0 14.4-1.6 18.4-4.8v4.8H472c6.4.8 13.6 0 19.2-3.2zM332 306c1.6 2.4 2.4 5.6 2.4 10.4v11.2h-13.6v-7.2c0-3.2 0-8.8-2.4-11.2-1.6-2.4-4.8-2.4-9.6-2.4h-14.4v20.8h-13.6v-56.8h30.4c6.4 0 12 0 16 2.4s7.2 6.4 7.2 12.8c0 8.8-5.6 13.6-9.6 15.2 4 1.6 6.4 3.2 7.2 4.8zm55.2-23.2H356v10.4h30.4v11.2H356v11.2h31.2v12h-44.8v-56.8h44.8v12zm33.6 44.8h-25.6v-12h25.6c2.4 0 4 0 5.6-1.6.8-.8 1.6-2.4 1.6-4s-.8-3.2-1.6-4c-.8-.8-2.4-1.6-4.8-1.6-12.8-.8-28 0-28-17.6 0-8 4.8-16.8 19.2-16.8h26.4v13.6h-24.8c-2.4 0-4 0-5.6.8s-1.6 2.4-1.6 4c0 2.4 1.6 3.2 3.2 4s3.2.8 4.8.8h7.2c7.2 0 12 1.6 15.2 4.8 2.4 2.4 4 6.4 4 12 0 12-7.2 17.6-20.8 17.6z" fill="#fff" data-original="#228fe0"/>
+    <path d="M459.2 288.4c0 2.4.8 3.2 3.2 4 1.6.8 3.2.8 4.8.8h7.2c4.8 0 8 .8 11.2 2.4l-12-12h-7.2c-2.4 0-4 0-5.6.8-.8.8-1.6 2.4-1.6 4zM431.2 240.4l1.6 2.4h.8zM387.2 196.4l13.6 32.8V210z" fill="#fff" data-original="#228fe0"/>
+    <path d="M250.4 222.8h1.6c1.6 0 1.6 0 1.6 2.4v17.6h57.6V238c4.8 2.4 12 4.8 21.6 4.8h24l4.8-12.8h11.2l4.8 12.8H424v-8l-11.2-11.2v8.8h-27.2l-4-12.8h-28l-4.8 12.8h-15.2c-6.4 0-14.4-1.6-19.2-6.4-4.8-4.8-7.2-11.2-7.2-21.6 0-8 1.6-16 7.2-22.4 4-4.8 11.2-6.4 20-6.4h12.8v12h-12.8c-4.8 0-7.2.8-10.4 3.2-2.4 2.4-4 7.2-4 12.8 0 6.4.8 10.4 4 13.6 2.4 2.4 5.6 3.2 9.6 3.2h5.6l18.4-44h8l-11.2-11.2h-20.8c-8.8 0-16 1.6-22.4 4.8v-4.8H276v4.8c-4-3.2-8.8-4.8-15.2-4.8H132l-8.8 20-8.8-20H79.2l11.2 11.2h16L120 206l4.8 4.8 14.4-35.2h22.4v56.8H148v-44l-13.6 32 23.2 23.2h92l.8-20.8zm36.8-47.2h13.6v56.8h-13.6v-56.8zm-70.4 12h-31.2V198H216v11.2h-30.4v11.2h31.2v12H172v-56.8h44.8v12zm22.4 44h-13.6v-56.8H256c7.2 0 12 0 16 2.4s6.4 6.4 6.4 12.8c0 8.8-5.6 13.6-9.6 15.2 3.2.8 5.6 3.2 6.4 4.8 1.6 3.2 2.4 5.6 2.4 10.4v11.2H264v-7.2c0-3.2 0-8-2.4-11.2-.8-1.6-3.2-1.6-8-1.6h-14.4v20z" fill="#fff" data-original="#228fe0"/>
+  </g>
+</svg>
+     <div class="credit-name">
+      <div class="credit-type">American Express</div>
+      <div class="credit-status">Payment Waiting</div>
+     </div>
+     <div class="credit-money is-wait">+$53.25</div>
+    </div>
+    <div class="credit-wrapper">
+     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.351 469.351" style="background-color: #0365b3">
+  <path xmlns="http://www.w3.org/2000/svg" d="M356.626 85.086a37.887 37.887 0 00-38.763-8.277 10.668 10.668 0 00-7.168 8.533l-2.987 20.523c-4.529 30.998-31.052 54.019-62.379 54.144h-42.667a10.666 10.666 0 00-10.347 8.085l-32 128a10.667 10.667 0 0010.346 13.248h53.333a10.666 10.666 0 0010.347-8.085l19.307-77.248h41.6c31.934.106 59.792-21.66 67.413-52.672l7.872-31.552a56.099 56.099 0 00-13.907-54.699z" fill="#e6f0f9" data-original="#03a9f4"/>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.664 437.342C4.773 437.341-.002 432.564 0 426.673c0-.869.107-1.735.317-2.578l10.667-42.453v-.448l10.667-42.432a10.666 10.666 0 0110.347-8.085h27.136c14.728-.003 26.669 11.933 26.673 26.661 0 2.181-.267 4.354-.795 6.47l-2.667 10.667c-2.967 11.875-13.637 20.205-25.877 20.203H29.672l-8.64 34.581a10.667 10.667 0 01-10.368 8.083zm24.341-64h21.461a5.335 5.335 0 005.163-4.053l2.667-10.667a5.311 5.311 0 00-5.163-6.634H40.338l-5.333 21.354zM124.733 437.342h-15.189c-16.33.004-29.571-13.231-29.575-29.561a29.56 29.56 0 01.882-7.175l1.408-5.675c3.157-12.736 14.612-21.662 27.733-21.611h15.189c16.33.028 29.545 13.289 29.517 29.619a29.561 29.561 0 01-.887 7.138l-1.408 5.675c-3.16 12.705-14.579 21.614-27.67 21.59zm-23.168-31.552a8.234 8.234 0 007.979 10.219h15.189a7.147 7.147 0 006.955-5.419l1.408-5.675a8.234 8.234 0 00-7.979-10.219h-15.189a7.147 7.147 0 00-6.955 5.419l-1.408 5.675z" fill="#fff" data-original="#283593"/>
+    <path d="M138.664 437.342a10.667 10.667 0 01-10.347-13.248l10.667-42.667c1.426-5.72 7.218-9.202 12.939-7.776 5.72 1.426 9.202 7.218 7.776 12.939l-10.667 42.667a10.666 10.666 0 01-10.368 8.085z" fill="#fff" data-original="#283593"/>
+  </g>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path d="M266.664 437.342a10.667 10.667 0 01-10.347-13.248l10.667-42.453v-.448l10.667-42.432a10.666 10.666 0 0110.347-8.085h27.136c14.728-.003 26.669 11.933 26.673 26.661 0 2.181-.267 4.354-.795 6.47l-2.667 10.667c-2.967 11.875-13.637 20.205-25.877 20.203h-26.795l-8.64 34.581a10.669 10.669 0 01-10.369 8.084zm24.341-64h21.483a5.335 5.335 0 005.163-4.053l2.667-10.667a5.312 5.312 0 00-5.163-6.634h-18.816l-5.334 21.354zM380.733 437.342h-15.189c-16.33.004-29.571-13.231-29.575-29.561a29.56 29.56 0 01.882-7.175l1.408-5.675c3.157-12.736 14.612-21.662 27.733-21.611h15.189c16.33-.004 29.571 13.231 29.575 29.561a29.56 29.56 0 01-.882 7.175l-1.408 5.675c-3.157 12.736-14.612 21.662-27.733 21.611zm-23.168-31.552a8.234 8.234 0 007.979 10.219h15.189a7.147 7.147 0 006.955-5.419l1.408-5.675a8.234 8.234 0 00-7.979-10.219h-15.189a7.147 7.147 0 00-6.955 5.419l-1.408 5.675z" fill="#e6f0f9" data-original="#03a9f4"/>
+    <path d="M394.664 437.342a10.667 10.667 0 01-10.347-13.248l10.667-42.667c1.426-5.72 7.218-9.202 12.939-7.776 5.72 1.426 9.202 7.218 7.776 12.939l-10.667 42.667a10.666 10.666 0 01-10.368 8.085z" fill="#e6f0f9" data-original="#03a9f4"/>
+  </g>
+  <g xmlns="http://www.w3.org/2000/svg">
+    <path d="M202.664 426.676a10.668 10.668 0 01-8.875-4.757l-21.333-32c-3.27-4.901-1.947-11.525 2.955-14.795s11.525-1.947 14.795 2.955l21.333 32c3.275 4.897 1.961 11.521-2.935 14.797a10.681 10.681 0 01-5.94 1.8z" fill="#fff" data-original="#283593"/>
+    <path d="M181.33 458.676c-5.891-.002-10.665-4.78-10.663-10.671a10.667 10.667 0 012.471-6.823l53.333-64c3.776-4.524 10.505-5.131 15.029-1.355 4.524 3.776 5.131 10.505 1.355 15.029l-53.333 64a10.663 10.663 0 01-8.192 3.82z" fill="#fff" data-original="#283593"/>
+  </g>
+  <path xmlns="http://www.w3.org/2000/svg" d="M437.33 437.342a10.667 10.667 0 01-10.347-13.248l21.333-85.333c1.426-5.72 7.218-9.202 12.939-7.776 5.72 1.426 9.202 7.218 7.776 12.939l-21.333 85.333a10.665 10.665 0 01-10.368 8.085z" fill="#e6f0f9" data-original="#03a9f4"/>
+  <path xmlns="http://www.w3.org/2000/svg" d="M321.405 29.129a53.908 53.908 0 00-40.661-18.453H159.997a10.666 10.666 0 00-10.496 8.768L106.834 254.11c-1.049 5.797 2.801 11.346 8.598 12.395.626.113 1.262.17 1.898.17h64a10.666 10.666 0 0010.347-8.085l19.328-77.248h34.325c41.958-.165 77.478-31.012 83.52-72.533l5.333-36.459a54.332 54.332 0 00-12.778-43.221z" fill="#fff" data-original="#283593"/>
+</svg>
+     <div class="credit-name">
+      <div class="credit-type">Paypal</div>
+      <div class="credit-status">Payment Cancelled</div>
+     </div>
+     <div class="credit-money is-cancel">+$3.945</div>
+    </div>
+   </div>
+  </div>
+ </div>
\ No newline at end of file
diff --git a/customer-management-ui/src/script.js b/customer-management-ui/src/script.js
new file mode 100644
index 0000000..3af169f
--- /dev/null
+++ b/customer-management-ui/src/script.js
@@ -0,0 +1,10 @@
+const counter = document.querySelector(".counter");
+let count = 0;
+setInterval(() => {
+ if(count == 92) {
+  clearInterval(count);
+ }else {
+  count+=1;
+  counter.textContent = count + "%";
+ }
+}, 42);
diff --git a/customer-management-ui/src/style.scss b/customer-management-ui/src/style.scss
new file mode 100644
index 0000000..dbf3fa9
--- /dev/null
+++ b/customer-management-ui/src/style.scss
@@ -0,0 +1,1018 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap");
+
+$font-family: "Inter", sans-serif;
+$bg-color: #252954;
+$body-color: #9b9ca7;
+$main-bg: #0e0e23;
+:root {
+ --delay: 0s;
+}
+
+* {
+ outline: none;
+ box-sizing: border-box;
+}
+
+.hidden {
+ display: none !important;
+}
+
+html {
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+}
+
+img {
+ max-width: 100%;
+}
+
+body {
+ font-family: $font-family;
+ background-color: $bg-color;
+ color: $body-color;
+}
+
+.wrapper {
+ max-width: 1600px;
+ background-color: $main-bg;
+ display: flex;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0 auto;
+}
+
+.left-side {
+ width: 6rem;
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ align-items: center;
+ padding: 117px 0 40px;
+ animation: left 1s var(--delay) both;
+ svg {
+  width: 24px;
+  cursor: pointer;
+  & + svg {
+   margin-top: 34px;
+  }
+  &:last-child {
+   margin-top: auto;
+  }
+  &.active,
+  &:hover {
+   color: #4255d4;
+  }
+ }
+}
+
+@keyframes left {
+ 0% {
+  transform: translateX(-30px);
+  opacity: 0;
+ }
+ 
+ 100% {
+  opacity: 1;
+  transform: none;
+ }
+}
+
+@keyframes top {
+ 0% {
+  transform: translateY(-30px);
+  opacity: 0;
+ }
+ 
+ 100% {
+  opacity: 1;
+  transform: none;
+ }
+}
+
+.main-container {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ padding: 25px;
+ overflow: auto;
+ padding-left: 0;
+}
+
+.header {
+ background: rgb(20, 24, 52);
+ background: radial-gradient(
+  circle,
+  rgba(20, 24, 52, 1) 0%,
+  rgba(19, 22, 47, 1) 100%
+ );
+ box-shadow: 0 16px 12px $main-bg;
+ width: 100%;
+ padding: 0 30px;
+ animation: top 1s both;
+ display: flex;
+ align-items: center;
+ border-radius: 6px;
+ font-size: 15px;
+ white-space: nowrap;
+ position: sticky;
+ top: 0;
+ left: 0;
+ z-index: 10;
+ &:before {
+  content: "";
+  width: 100%;
+  height: 25px;
+  position: absolute;
+  top: -25px;
+  left: 0;
+  background-color: $main-bg;
+ }
+ &-link {
+  color: $body-color;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  transition: 0.3s;
+  border-bottom: 3px solid transparent;
+  transition: 0.3s;
+  svg {
+   width: 20px;
+   margin-right: 14px;
+  }
+  &.active,
+  &:hover {
+   background: #11132c;
+   border-bottom: 3px solid #4255d4;
+  }
+ }
+}
+
+.logo {
+ padding: 20px 50px 20px 0;
+ font-size: 16px;
+ color: #e7e8ea;
+ &-det {
+  background: #4255d4;
+  padding: 8px;
+  margin-left: -2px;
+  border-radius: 50%;
+  font-size: 15px;
+ }
+}
+
+.user-info {
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ svg {
+  width: 20px;
+ }
+ .profile {
+  margin: 0 20px 0 12px;
+  width: 18px;
+ }
+}
+.button {
+ display: flex;
+ align-items: center;
+ color: $body-color;
+ background: #1a1b3c;
+ border: none;
+ padding: 2px 12px;
+ border-radius: 4px;
+ margin-right: 20px;
+ svg {
+  margin-left: 10px;
+  width: 16px;
+ }
+}
+
+.user-box {
+ margin-top: 25px;
+ display: flex;
+ & + & {
+  margin-top: 20px;
+  .cards-wrapper {
+   margin-left: 0;
+   flex-grow: 1;
+   max-width: none;
+  }
+  .today {
+   margin-left: 30px;
+  }
+  .cards-header {
+   padding: 20px 30px;
+   justify-content: space-between;
+  }
+ }
+ .cards-header,
+ .cards-view {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+   width: 24px;
+  }
+  .title {
+   margin: 0 16px;
+   font-size: 15px;
+  }
+  &-date svg {
+   width: 30px;
+  }
+  .cards-button {
+   background: #15193c;
+   padding: 10px 16px;
+   margin-right: 0;
+   svg {
+    width: 16px;
+    margin: 0 2px 0 0;
+   }
+  }
+  .date-wrapper {
+   display: flex;
+   align-items: center;
+   margin: auto;
+   .title {
+    margin: 0 16px;
+   }
+  }
+ }
+}
+
+.cards-view > svg {
+ margin-right: 12px;
+}
+
+.today {
+ position: relative;
+ &:before {
+  content: "";
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  background-color: #ef415c;
+  bottom: -8px;
+  right: 50%;
+  border-radius: 50%;
+ }
+}
+.card {
+ background: rgb(26, 32, 73);
+ background: radial-gradient(
+  circle,
+  rgba(26, 32, 73, 1) 0%,
+  rgba(19, 22, 47, 1) 100%
+ );
+ padding: 40px 30px;
+ border-radius: 6px;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ max-height: 430px;
+ width: 100%;
+ .title {
+  font-size: 16px;
+  font-weight: 500;
+ }
+ .subtitle {
+  font-size: 13px;
+  line-height: 1.6em;
+ }
+ & + & {
+  margin-left: 20px;
+ }
+}
+
+.activity {
+ max-width: 480px;
+ .title {
+  margin-bottom: 20px;
+ }
+ &-links {
+  display: flex;
+  align-items: center;
+  margin-top: auto;
+  font-size: 15px;
+ }
+ &-link {
+  padding-bottom: 10px;
+  position: relative;
+  cursor: pointer;
+  transition: 0.3s;
+  + .activity-link {
+   margin-left: 25px;
+   &:before {
+    content: "";
+    position: absolute;
+    width: 5px;
+    height: 5px;
+    background-color: #ef415c;
+    top: -2px;
+    right: -8px;
+    border-radius: 50%;
+   }
+   &:hover:after {
+    content: "";
+    position: absolute;
+    width: 22px;
+    height: 2px;
+    background: #4255d4;
+    left: 0;
+    bottom: 0;
+   }
+   &:hover {
+    color: #bebec4;
+    -webkit-text-stroke: 0.3px;
+   }
+  }
+  &.active {
+   color: #bebec4;
+   font-weight: 500;
+   &:before {
+    content: "";
+    position: absolute;
+    width: 22px;
+    height: 2px;
+    background: #4255d4;
+    left: 0;
+    bottom: 0;
+   }
+  }
+ }
+}
+
+.destination {
+ display: flex;
+ align-items: center;
+ margin-top: auto;
+ &-card {
+  background: rgb(26, 29, 58);
+  background: linear-gradient(
+   45deg,
+   rgba(26, 29, 58, 1) 0%,
+   rgba(33, 39, 82, 1) 100%
+  );
+  padding: 20px;
+  width: 100%;
+  border-radius: 6px;
+  & + & {
+   margin-left: 20px;
+   background: rgb(26, 29, 58);
+   background: linear-gradient(
+    325deg,
+    rgba(26, 29, 58, 1) 0%,
+    rgba(33, 39, 82, 1) 100%
+   );
+  }
+ }
+ &-profile {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  svg {
+   width: 18px;
+   flex-shrink: 0;
+   margin-right: 8px;
+  }
+ }
+ &-length {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+ }
+ &-points {
+  margin-top: 30px;
+ }
+}
+
+.profile-img {
+ width: 46px;
+ height: 46px;
+ object-fit: cover;
+ border-radius: 50%;
+ padding: 2px;
+ border: 1px solid #bebec4;
+ flex-shrink: 0;
+}
+
+.point {
+ font-size: 14px;
+ color: #bebec4;
+ font-weight: 500;
+}
+
+.sub-point {
+ font-size: 13px;
+ margin-top: 4px;
+}
+
+.discount {
+ max-width: 320px;
+ width: 100%;
+ .title {
+  margin-bottom: 30px;
+ }
+ .subtitle {
+  margin-bottom: 8px;
+  &-count {
+   font-size: 17px;
+   color: #17a98a;
+   font-weight: 500;
+   & + .subtitle {
+    margin-top: 20px;
+   }
+   &.dist {
+    color: #e85471;
+   }
+  }
+ }
+ &-wrapper {
+  display: flex;
+ }
+ &-chart {
+  margin-left: auto;
+ }
+ &-profile {
+  display: flex;
+  align-items: center;
+  margin-top: 40px;
+ }
+ &-img {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin: 0 16px 0 12px;
+ }
+ &-name {
+  font-weight: 500;
+  font-size: 15px;
+ }
+ &-type {
+  font-size: 13px;
+  margin-top: 4px;
+ }
+}
+
+.circle {
+ width: 100px;
+ height: 100px;
+ border: 3px solid #5b5f78;
+ border-radius: 50%;
+ position: relative;
+}
+
+.pie {
+ position: relative;
+ width: 120px;
+ height: 120px;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%) rotate(-90deg);
+ svg circle {
+  fill: transparent;
+  stroke: #4356d6;
+  stroke-width: 14;
+  stroke-dasharray: 275;
+  stroke-dashoffset: 235;
+  animation: pieChart 3.8s linear forwards;
+ }
+}
+
+@keyframes pieChart {
+ 100% {
+  stroke-dashoffset: 0;
+ }
+}
+
+.counter {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ color: #3e50c5;
+ font-weight: 500;
+}
+
+.offer-button {
+ background: #4255d4;
+ padding: 14px;
+ text-align: center;
+ justify-content: center;
+ margin-top: auto;
+ margin-right: 0;
+ color: #fff;
+ font-size: 13px;
+ cursor: pointer;
+}
+
+.cards {
+ &-header {
+  background: #10122b;
+  border-radius: 6px 6px 0 0;
+  padding: 20px 45px;
+  font-size: 14px;
+  font-weight: 500;
+  &-date {
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   svg {
+    color: #4154d1;
+    background: #14183c;
+    border-radius: 50%;
+    padding: 5px;
+    width: 30px;
+   }
+  }
+ }
+ &-wrapper {
+  margin-left: 20px;
+  max-width: 305px;
+  width: 100%;
+ }
+ &-hour {
+  font-size: 26px;
+  .am-pm {
+   font-size: 15px;
+   font-weight: 500;
+  }
+ }
+ &.card {
+  border-radius: 0 0 6px 6px;
+  padding: 30px 20px;
+  svg {
+   width: 24px;
+   margin-left: auto;
+   color: #818394;
+  }
+ }
+ &-head {
+  display: flex;
+  align-items: center;
+ }
+}
+
+.degree {
+ margin-top: 10px;
+ font-size: 13px;
+ display: flex;
+ align-items: center;
+ color: #818394;
+ font-weight: 500;
+ svg {
+  width: 24px;
+  margin-right: 12px;
+ }
+}
+
+.items {
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: 16px;
+ font-size: 13px;
+ font-weight: 500;
+ &.numbers {
+  margin-top: 0;
+ }
+}
+
+.item {
+ flex: 0 1 calc(100% / 7);
+ padding: 10px 5px;
+ text-align: center;
+ &.is-active {
+  background: #4255d4;
+  border-radius: 50%;
+  color: #fff;
+ }
+ &.disable {
+  color: #595b5b;
+ }
+}
+
+.account {
+ width: 100%;
+ height: 180px;
+ margin-top: auto;
+ flex-grow: 0;
+ position: relative;
+ transition: 0.3s;
+ cursor: pointer;
+ transition: .3s;
+  &:hover {
+  transform: scale(1.02);
+ }
+ &:before {
+  content: "";
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  box-shadow: -15px 0 0 0 #ef8741;
+  background: #ef415c;
+  top: 20px;
+  left: 42px;
+  border-radius: 50%;
+ }
+ &-wrapper {
+  max-width: 310px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-left: 20px;
+  align-items: center;
+
+ }
+ &-profile {
+  margin: auto;
+  position: relative;
+  text-align: center;
+  position: relative;
+  img {
+   width: 84px;
+   height: 84px;
+   border-radius: 50%;
+   object-fit: cover;
+   object-position: left;
+   border: 3px solid #4255d3;
+   padding: 5px;
+  }
+  .blob {
+   position: absolute;
+   border-radius: 50%;
+   animation: fly 5.8s linear infinite alternate;
+   &:nth-child(1) {
+    width: 14px;
+    height: 14px;
+    top: 25px;
+    left: -20px;
+    background: #28327a;
+    animation-delay: 0.9s;
+   }
+   &:nth-child(2) {
+    width: 18px;
+    height: 18px;
+    background: #87344c;
+    right: -20px;
+    top: -20px;
+    animation-delay: 0.2s;
+   }
+   &:nth-child(3) {
+    width: 12px;
+    height: 12px;
+    background: #13645b;
+    right: -35px;
+    top: 50%;
+    animation-delay: 1.8s;
+   }
+  }
+ }
+ &-name {
+  margin: 20px 0 10px;
+ }
+ &-title {
+  font-size: 14px;
+ }
+ &-cash {
+  font-size: 22px;
+  font-weight: 500;
+  margin-bottom: 6px;
+  padding-top: 16px;
+  position: relative;
+  &:before {
+   content: "";
+   position: absolute;
+   width: 5px;
+   height: 5px;
+   background: $body-color;
+   right: 10px;
+   border-radius: 50%;
+   box-shadow: -10px 0 0 0 $body-color, 10px 0 0 0 $body-color;
+   top: 24px;
+  }
+ }
+ &-income {
+  font-size: 14px;
+ }
+ &-iban {
+  margin-top: auto;
+  font-weight: 500;
+ }
+}
+
+.time {
+ height: 24px;
+ padding: 4px 8px;
+ border-radius: 4px;
+ background-color: #9e5924;
+ font-size: 13px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ &.is-wait {
+  background: #4255d3;
+ }
+}
+
+.table .status {
+ color: #1aa385;
+ display: inline-flex;
+ align-items: center;
+ svg {
+  margin-right: 6px;
+  width: 22px;
+  height: 22px;
+  padding: 3px;
+  border-radius: 4px;
+  background-color: #142940;
+  color: currentColor;
+ }
+ &.is-red  {
+  color: #d14b69;
+   svg {
+   background: #2e2142;
+   color: currentcolor;
+  }
+ }
+ &.is-wait  {
+  color: #3E4EC2;
+  position: relative;
+  &:before {
+   width: 22px;
+   height: 22px;
+   position: absolute;
+   left:0;
+   top: 0;
+   content: "";
+   background: #1a214d;
+   border-radius: 4px;
+  }
+   svg {
+    background-color: transparent;
+   color: currentcolor;
+   animation: turn 2s linear infinite both;
+  }
+ }
+}
+@keyframes turn {
+ 100% {
+  transform: rotate(1turn);
+ }
+}
+
+.table {
+ text-align: left;
+ padding: 0;
+
+ th {
+  font-size: 14px;
+  font-weight: normal;
+  padding-bottom: 16px;
+  &:nth-child(n+5) {
+   padding: 0 10px 16px;
+  }
+  &:first-child {
+   padding-left: 36px;
+  }
+ }
+
+ td {
+  font-size: 15px;
+  vertical-align: middle;
+  padding: 8px 0;
+  &:last-of-type {
+   width: 100px;
+  }
+  &:nth-child(n+5) {
+   padding: 0 10px;
+  }
+  &:nth-last-of-type(2) svg {
+   width: 16px;
+  }
+ }
+ input {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1px solid $body-color;
+  vertical-align: middle;
+  background-color: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 16px;
+  transition: .25s;
+  background-size: 0;
+  background-position: center;
+  &:checked {
+   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+   background-color: $bg-color;
+   background-size: 12px;
+   background-repeat: no-repeat;
+  }
+ }
+}
+
+@keyframes fly {
+ 40% {
+  transform: translate(-6px, -6px);
+ }
+ 60% {
+  transform: translate(-12px, -2px);
+ }
+ 100% {
+  transform: translate(0px, 0px);
+ }
+}
+
+.transection {
+ flex-shrink: 0;
+ max-width: 310px;
+ width: 100%;
+ margin-left: 20px;
+ &-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: 500;
+ }
+ .is-wait {
+  color: #3E4EC2;
+ }
+}
+
+.credit {
+ &-wrapper {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  svg {
+   width: 38px;
+   padding: 3px;
+   border-radius: 6px;
+   margin-right: 12px;
+  }
+  path {
+   width: 24px;
+  }
+ }
+ &-money {
+  margin-left: auto;
+   &.is-active {
+   color: #1aa385;
+  }
+  &.is-cancel {
+   color: #d14b69;
+  }
+  .is-wait {
+  color: #3E4EC2;
+ }
+ }
+ &-status {
+  font-size: 13px;
+  font-weight: normal;
+ }
+ &-type {
+  color: #e7e8ea;
+  margin-bottom: 6px;
+ }
+}
+
+@media screen and (max-width: 1500px) {
+ .wrapper {
+  max-width: 1200px;
+ }
+ .activity {
+  width: 49%;
+  max-width: none;
+ }
+ .discount {
+  width: 48%;
+  max-width: none;
+  height: 100%;
+ } 
+ .first-box {
+  flex-wrap: wrap;
+  .cards-wrapper {
+   width: 67%;
+   max-width: none;
+   margin: 20px 0;
+   .item.is-active {
+    background: none;
+    color: inherit;
+   }
+  }
+  .account-wrapper {
+   max-width: none;
+   width: calc(33% - 20px);
+   margin: 20px 0 20px 20px;
+  }
+ }
+ .second-box {
+  flex-wrap: wrap;
+  .cards-wrapper {
+   margin-top: 40px;
+   width: 66%;
+  }
+ }
+ .transection {
+  margin-top: 40px;
+  max-width: none;
+  width: 30%;
+ }
+}
+
+@media screen and (max-width: 1200px) {
+ .time {
+  display: none;
+ }
+} 
+
+@media screen and (max-width: 1060px) {
+ .user-info {
+  .button,
+  .hour {
+  display: none;
+ }
+}
+}
+
+@media screen and (max-width: 1020px) {
+ .user-box .cards-view {
+  display: none;
+ }
+ .user-box .cards-header .cards-button {
+  display: none;
+ }
+ .cards-header-date {
+  margin: auto;
+ }
+}
+
+@media screen and (max-width: 930px) {
+ .second-box .cards-wrapper {
+  width: 100%;
+ }
+ .transection {
+  width: 100%;
+  margin-left: 0;
+  height: 100%;
+  margin-top: 20px;
+ }
+ .header-link {
+  display: none;
+ }
+ .user-info .profile {
+  margin-right: 0;
+ }
+}
+
+@media screen and (max-width: 850px) {
+ .activity-card,
+ .discount {
+  width: 100%;
+ }
+ .user-box .discount {
+  margin-left: 0;
+  margin-top: 20px;
+ }
+ .left-side {
+  display: none;
+ }
+ .main-container {
+  padding-left: 25px;
+ }
+ .activity-links,
+ .destination {
+  margin-top: 20px;
+ }
+}
+
+@media screen and (max-width: 720px) {
+ .first-box .account-wrapper {
+  display: none;
+ }
+ .first-box .cards-wrapper {
+  width: 100%;
+ }
+ .second-box .cards.card {
+  overflow-y: auto;
+ }
+}
+
+@media screen and (max-width: 420px) {
+ .destination-card + .destination-card {
+  display: none;
+ }
+}
+
+
+.user-box > * {
+ animation: top 1s var(--delay) both;
+}
diff --git a/d3-map-projections/README.markdown b/d3-map-projections/README.markdown
new file mode 100644
index 0000000..df9b846
--- /dev/null
+++ b/d3-map-projections/README.markdown
@@ -0,0 +1,4 @@
+# D3 Map Projections
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jwasilgeo/pen/QxGewN](https://codepen.io/jwasilgeo/pen/QxGewN).
+
+ 
\ No newline at end of file
diff --git a/d3-map-projections/dist/index.html b/d3-map-projections/dist/index.html
new file mode 100644
index 0000000..036f644
--- /dev/null
+++ b/d3-map-projections/dist/index.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>D3 Map Projections</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>
+  D3 Map Projections
+</h1>
+
+<p>
+  geoOrthographic vs.
+  <select id="projectionChoice">
+    <option value="geoAiry">geoAiry</option>
+    <option value="geoAirocean">geoAirocean</option>
+    <option value="geoAitoff">geoAitoff</option>
+    <option value="geoAlbers">geoAlbers</option>
+    <option value="geoArmadillo">geoArmadillo</option>
+    <option value="geoAugust">geoAugust</option>
+    <option value="geoAzimuthalEqualArea">geoAzimuthalEqualArea</option>
+    <option value="geoAzimuthalEquidistant">geoAzimuthalEquidistant</option>
+    <option value="geoBaker">geoBaker</option>
+    <option value="geoBerghaus">geoBerghaus</option>
+    <option value="geoBoggs">geoBoggs</option>
+    <option value="geoBonne">geoBonne</option>
+    <option value="geoBottomley">geoBottomley</option>
+    <option value="geoBromley">geoBromley</option>
+    <option value="geoCahillKeyes">geoCahillKeyes</option>
+    <option value="geoCollignon">geoCollignon</option>
+    <option value="geoConicEqualArea">geoConicEqualArea</option>
+    <option value="geoConicEquidistant">geoConicEquidistant</option>
+    <option value="geoCox">geoCox</option>
+    <option value="geoCraig">geoCraig</option>
+    <option value="geoCraster">geoCraster</option>
+    <option value="geoCubic">geoCubic</option>
+    <option value="geoCylindricalEqualArea">geoCylindricalEqualArea</option>
+    <option value="geoCylindricalStereographic">geoCylindricalStereographic</option>
+    <option value="geoDodecahedral">geoDodecahedral</option>
+    <option value="geoEckert1">geoEckert1</option>
+    <option value="geoEckert2">geoEckert2</option>
+    <option value="geoEckert3">geoEckert3</option>
+    <option value="geoEckert4">geoEckert4</option>
+    <option value="geoEckert5">geoEckert5</option>
+    <option value="geoEckert6">geoEckert6</option>
+    <option value="geoEisenlohr">geoEisenlohr</option>
+    <option value="geoEqualEarth">geoEqualEarth</option>
+    <option value="geoEquirectangular">geoEquirectangular</option>
+    <option value="geoFahey">geoFahey</option>
+    <option value="geoFoucaut">geoFoucaut</option>
+    <option value="geoGingery">geoGingery</option>
+    <option value="geoGinzburg4">geoGinzburg4</option>
+    <option value="geoGinzburg5">geoGinzburg5</option>
+    <option value="geoGinzburg6">geoGinzburg6</option>
+    <option value="geoGinzburg8">geoGinzburg8</option>
+    <option value="geoGinzburg9">geoGinzburg9</option>
+    <option value="geoGnomonic">geoGnomonic</option>
+    <option value="geoGringorten">geoGringorten</option>
+    <option value="geoGringortenQuincuncial">geoGringortenQuincuncial</option>
+    <option value="geoGuyou">geoGuyou</option>
+    <option value="geoHammer">geoHammer</option>
+    <option value="geoHammerRetroazimuthal">geoHammerRetroazimuthal</option>
+    <option value="geoHealpix">geoHealpix</option>
+    <option value="geoHill">geoHill</option>
+    <option value="geoHomolosine">geoHomolosine</option>
+    <option value="geoHyperelliptical">geoHyperelliptical</option>
+    <option value="geoIcosahedral">geoIcosahedral</option>
+    <option value="geoInterruptedBoggs">geoInterruptedBoggs</option>
+    <option value="geoInterruptedHomolosine">geoInterruptedHomolosine</option>
+    <option value="geoInterruptedMollweide">geoInterruptedMollweide</option>
+    <option value="geoInterruptedMollweideHemispheres">geoInterruptedMollweideHemispheres</option>
+    <option value="geoInterruptedSinuMollweide">geoInterruptedSinuMollweide</option>
+    <option value="geoInterruptedSinusoidal">geoInterruptedSinusoidal</option>
+    <option value="geoKavrayskiy7">geoKavrayskiy7</option>
+    <option value="geoLagrange">geoLagrange</option>
+    <option value="geoLarrivee">geoLarrivee</option>
+    <option value="geoLaskowski">geoLaskowski</option>
+    <option value="geoLoximuthal">geoLoximuthal</option>
+    <option value="geoMercator" selected>geoMercator</option>
+    <option value="geoMiller">geoMiller</option>
+    <option value="geoMollweide">geoMollweide</option>
+    <option value="geoMtFlatPolarParabolic">geoMtFlatPolarParabolic</option>
+    <option value="geoMtFlatPolarQuartic">geoMtFlatPolarQuartic</option>
+    <option value="geoMtFlatPolarSinusoidal">geoMtFlatPolarSinusoidal</option>
+    <option value="geoNaturalEarth1">geoNaturalEarth1</option>
+    <option value="geoNaturalEarth2">geoNaturalEarth2</option>
+    <option value="geoNellHammer">geoNellHammer</option>
+    <option value="geoPatterson">geoPatterson</option>
+    <option value="geoPeirceQuincuncial">geoPeirceQuincuncial</option>
+    <option value="geoPolyconic">geoPolyconic</option>
+    <option value="geoPolyhedralButterfly">geoPolyhedralButterfly</option>
+    <option value="geoPolyhedralCollignon">geoPolyhedralCollignon</option>
+    <option value="geoPolyhedralWaterman">geoPolyhedralWaterman</option>
+    <option value="geoPolyhedralVoronoi">geoPolyhedralVoronoi</option>
+    <option value="geoRectangularPolyconic">geoRectangularPolyconic</option>
+    <option value="geoRobinson">geoRobinson</option>
+    <option value="geoSatellite">geoSatellite</option>
+    <option value="geoSinuMollweide">geoSinuMollweide</option>
+    <option value="geoSinusoidal">geoSinusoidal</option>
+    <option value="geoStereographic">geoStereographic</option>
+    <option value="geoTetrahedralLee">geoTetrahedralLee</option>
+    <option value="geoTimes">geoTimes</option>
+    <option value="geoTransverseMercator">geoTransverseMercator</option>
+    <option value="geoVanDerGrinten">geoVanDerGrinten</option>
+    <option value="geoVanDerGrinten2">geoVanDerGrinten2</option>
+    <option value="geoVanDerGrinten3">geoVanDerGrinten3</option>
+    <option value="geoVanDerGrinten4">geoVanDerGrinten4</option>
+    <option value="geoWagner4">geoWagner4</option>
+    <option value="geoWagner6">geoWagner6</option>
+    <option value="geoWagner7">geoWagner7</option>
+    <option value="geoWiechel">geoWiechel</option>
+    <option value="geoWinkel3">geoWinkel3</option>
+  </select>
+</p>
+
+<p>
+  <label>
+    <input id="axialTilt" type="checkbox" checked/>
+    Keep it real! Use Earth's axial tilt of ~23.4°.
+  </label>
+</p>
+
+<canvas id="ortho" width="960" height="600"></canvas>
+<canvas id="any" width="960" height="600"></canvas>
+
+<p>
+  Blog post:
+  <a href="https://petrichor.studio/2018/06/29/map-projections-in-the-web/" target="_blank">
+    "Map Projections on the Web"
+  </a>
+</p>
+
+<script src="https://d3js.org/d3.v5.min.js"></script>
+<script src="https://unpkg.com/d3-geo-projection@2.4.1/dist/d3-geo-projection.min.js"></script>
+<script src="https://unpkg.com/d3-geo-polygon@1.4.2/build/d3-geo-polygon.min.js"></script>
+<script src="https://unpkg.com/topojson-client@3.0.0/dist/topojson-client.min.js"></script>
+<script src="https://unpkg.com/topojson-simplify@3.0.2/dist/topojson-simplify.min.js"></script>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/d3-map-projections/dist/script.js b/d3-map-projections/dist/script.js
new file mode 100644
index 0000000..2792587
--- /dev/null
+++ b/d3-map-projections/dist/script.js
@@ -0,0 +1,171 @@
+var canvasAny = d3.select("canvas#any"),
+  ctxAny = canvasAny.node().getContext("2d"),
+  canvasAnyWidth = +canvasAny.attr("width"),
+  canvasAnyHeight = +canvasAny.attr("height");
+
+var projectionAny = d3
+  .geoMercator()
+  .rotate([-160, 0, -23.4])
+  .fitSize([canvasAnyWidth, canvasAnyHeight], {
+    type: "Sphere"
+  });
+
+var geoPathGeneratorAny = d3
+  .geoPath()
+  .projection(projectionAny)
+  .context(ctxAny);
+
+var canvasOrtho = d3.select("canvas#ortho"),
+  ctxOrtho = canvasOrtho.node().getContext("2d"),
+  canvasOrthoWidth = +canvasOrtho.attr("width"),
+  canvasOrthoHeight = +canvasOrtho.attr("height");
+
+var projectionOrtho = d3
+  .geoOrthographic()
+  .rotate([-160, 0, -23.4])
+  .fitSize([canvasOrthoWidth, canvasOrthoHeight], {
+    type: "Sphere"
+  });
+
+var geoPathGeneratorOrtho = d3
+  .geoPath()
+  .projection(projectionOrtho)
+  .context(ctxOrtho);
+
+var selectElement = document.querySelector("select#projectionChoice");
+selectElement.addEventListener("change", function(evt) {
+  changeProjection(evt.target.value);
+});
+
+var axialTilt = -23.4;
+
+var axialTiltElement = document.querySelector("input#axialTilt");
+axialTiltElement.addEventListener("change", function(evt) {
+  changeAxialTilt(evt.target.checked);
+});
+
+var geoCircles = {
+  type: "GeometryCollection",
+  geometries: []
+};
+
+for (var longitude = -180; longitude < 180; longitude += 15) {
+  for (var latitude = -90; latitude <= 90; latitude += 15) {
+    geoCircles.geometries.push(
+      d3
+        .geoCircle()
+        .center([longitude, latitude])
+        .radius(1)()
+    );
+  }
+}
+
+drawSphereAndCircles(geoCircles);
+
+d3
+  .json("https://unpkg.com/world-atlas@1.1.4/world/110m.json")
+  .then(function(loadedTopoJson) {
+    var topology = topojson.presimplify(loadedTopoJson);
+    topology = topojson.simplify(topology, 1.1);
+    var worldGeoJson = topojson.feature(
+      topology,
+      topology.objects.land
+    );
+
+    d3.timer(function(elapsed) {
+      geoPathGeneratorAny
+        .projection()
+        .rotate([elapsed * 0.005 - 160, 0, axialTilt]);
+
+      geoPathGeneratorOrtho
+        .projection()
+        .rotate([elapsed * 0.005 - 160, 0, axialTilt]);
+
+      ctxOrtho.clearRect(0, 0, canvasOrthoWidth, canvasOrthoHeight);
+      ctxAny.clearRect(0, 0, canvasAnyWidth, canvasAnyHeight);
+
+      drawWorld(worldGeoJson);
+
+      drawSphereAndCircles(geoCircles);
+    });
+
+    var totalOptions = selectElement.options.length;
+    var intervalTimer = d3.interval(function() {
+      if (selectElement.selectedIndex === totalOptions - 1) {
+        selectElement.selectedIndex = 1;
+      } else {
+        selectElement.selectedIndex++;
+      }
+      selectElement.dispatchEvent(new Event("change"));
+    }, 2500);
+
+    selectElement.addEventListener("focus", function() {
+      intervalTimer.stop();
+    });
+  });
+
+function drawWorld(worldGeoJson) {
+  ctxOrtho.beginPath();
+  ctxOrtho.fillStyle = "#b2df8a";
+  geoPathGeneratorOrtho(worldGeoJson);
+  ctxOrtho.fill();
+  ctxOrtho.closePath();
+
+  ctxAny.beginPath();
+  ctxAny.fillStyle = "#b2df8a";
+  geoPathGeneratorAny(worldGeoJson);
+  ctxAny.fill();
+  ctxAny.closePath();
+}
+
+function drawSphereAndCircles(geoCircles) {
+  ctxOrtho.beginPath();
+  ctxOrtho.fillStyle = "#1f78b4";
+  geoPathGeneratorOrtho(geoCircles);
+  ctxOrtho.fill();
+  ctxOrtho.closePath();
+
+  ctxOrtho.beginPath();
+  ctxOrtho.strokeStyle = "#1f78b4";
+  geoPathGeneratorOrtho({ type: "Sphere" });
+  ctxOrtho.stroke();
+  ctxOrtho.closePath();
+
+  ctxAny.beginPath();
+  ctxAny.fillStyle = "#1f78b4";
+  geoPathGeneratorAny(geoCircles);
+  ctxAny.fill();
+  ctxAny.closePath();
+
+  ctxAny.beginPath();
+  ctxAny.strokeStyle = "#1f78b4";
+  geoPathGeneratorAny({ type: "Sphere" });
+  ctxAny.stroke();
+  ctxAny.closePath();
+}
+
+function changeProjection(d3ProjectionName) {
+  var newProjection = d3[d3ProjectionName]().fitSize(
+    [canvasAnyWidth, canvasAnyHeight],
+    {
+      type: "Sphere"
+    }
+  );
+
+  geoPathGeneratorAny.projection(newProjection);
+}
+
+function changeAxialTilt(checked) {
+  var newAxialTilt = checked ? -23.4 : 0;
+
+  d3
+    .select({})
+    .transition()
+    .duration(1250)
+    .tween(null, function() {
+      var interpolator = d3.interpolate(axialTilt, newAxialTilt);
+      return function(t) {
+        axialTilt = interpolator(t);
+      };
+    });
+}
\ No newline at end of file
diff --git a/d3-map-projections/dist/style.css b/d3-map-projections/dist/style.css
new file mode 100644
index 0000000..11c3a67
--- /dev/null
+++ b/d3-map-projections/dist/style.css
@@ -0,0 +1,36 @@
+body {
+  margin: 5px;
+  text-align: center;
+  font-family: sans-serif;
+}
+
+h1 {
+  font-size: 1.25rem;
+  margin: 7px 0;
+}
+
+p {
+  font-size: 0.8rem;
+}
+
+p:first-of-type {
+  font-weight: bold;
+}
+
+select#projectionChoice {
+  max-width: 50vw;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+label {
+  cursor: pointer;
+}
+
+input#axialTilt {
+  vertical-align: middle;
+}
+
+canvas {
+  max-width: calc(50vw - 20px);
+}
diff --git a/d3-map-projections/license.txt b/d3-map-projections/license.txt
new file mode 100644
index 0000000..b08ad7d
--- /dev/null
+++ b/d3-map-projections/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Jacob Wasilkowski (https://codepen.io/jwasilgeo/pen/QxGewN)
+
+
+Fork of an original work by Jacob Wasilkowski (https://codepen.io/jwasilgeo/pen/JvrERJ)
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/d3-map-projections/src/index.html b/d3-map-projections/src/index.html
new file mode 100644
index 0000000..eb1baa3
--- /dev/null
+++ b/d3-map-projections/src/index.html
@@ -0,0 +1,130 @@
+<h1>
+  D3 Map Projections
+</h1>
+
+<p>
+  geoOrthographic vs.
+  <select id="projectionChoice">
+    <option value="geoAiry">geoAiry</option>
+    <option value="geoAirocean">geoAirocean</option>
+    <option value="geoAitoff">geoAitoff</option>
+    <option value="geoAlbers">geoAlbers</option>
+    <option value="geoArmadillo">geoArmadillo</option>
+    <option value="geoAugust">geoAugust</option>
+    <option value="geoAzimuthalEqualArea">geoAzimuthalEqualArea</option>
+    <option value="geoAzimuthalEquidistant">geoAzimuthalEquidistant</option>
+    <option value="geoBaker">geoBaker</option>
+    <option value="geoBerghaus">geoBerghaus</option>
+    <option value="geoBoggs">geoBoggs</option>
+    <option value="geoBonne">geoBonne</option>
+    <option value="geoBottomley">geoBottomley</option>
+    <option value="geoBromley">geoBromley</option>
+    <option value="geoCahillKeyes">geoCahillKeyes</option>
+    <option value="geoCollignon">geoCollignon</option>
+    <option value="geoConicEqualArea">geoConicEqualArea</option>
+    <option value="geoConicEquidistant">geoConicEquidistant</option>
+    <option value="geoCox">geoCox</option>
+    <option value="geoCraig">geoCraig</option>
+    <option value="geoCraster">geoCraster</option>
+    <option value="geoCubic">geoCubic</option>
+    <option value="geoCylindricalEqualArea">geoCylindricalEqualArea</option>
+    <option value="geoCylindricalStereographic">geoCylindricalStereographic</option>
+    <option value="geoDodecahedral">geoDodecahedral</option>
+    <option value="geoEckert1">geoEckert1</option>
+    <option value="geoEckert2">geoEckert2</option>
+    <option value="geoEckert3">geoEckert3</option>
+    <option value="geoEckert4">geoEckert4</option>
+    <option value="geoEckert5">geoEckert5</option>
+    <option value="geoEckert6">geoEckert6</option>
+    <option value="geoEisenlohr">geoEisenlohr</option>
+    <option value="geoEqualEarth">geoEqualEarth</option>
+    <option value="geoEquirectangular">geoEquirectangular</option>
+    <option value="geoFahey">geoFahey</option>
+    <option value="geoFoucaut">geoFoucaut</option>
+    <option value="geoGingery">geoGingery</option>
+    <option value="geoGinzburg4">geoGinzburg4</option>
+    <option value="geoGinzburg5">geoGinzburg5</option>
+    <option value="geoGinzburg6">geoGinzburg6</option>
+    <option value="geoGinzburg8">geoGinzburg8</option>
+    <option value="geoGinzburg9">geoGinzburg9</option>
+    <option value="geoGnomonic">geoGnomonic</option>
+    <option value="geoGringorten">geoGringorten</option>
+    <option value="geoGringortenQuincuncial">geoGringortenQuincuncial</option>
+    <option value="geoGuyou">geoGuyou</option>
+    <option value="geoHammer">geoHammer</option>
+    <option value="geoHammerRetroazimuthal">geoHammerRetroazimuthal</option>
+    <option value="geoHealpix">geoHealpix</option>
+    <option value="geoHill">geoHill</option>
+    <option value="geoHomolosine">geoHomolosine</option>
+    <option value="geoHyperelliptical">geoHyperelliptical</option>
+    <option value="geoIcosahedral">geoIcosahedral</option>
+    <option value="geoInterruptedBoggs">geoInterruptedBoggs</option>
+    <option value="geoInterruptedHomolosine">geoInterruptedHomolosine</option>
+    <option value="geoInterruptedMollweide">geoInterruptedMollweide</option>
+    <option value="geoInterruptedMollweideHemispheres">geoInterruptedMollweideHemispheres</option>
+    <option value="geoInterruptedSinuMollweide">geoInterruptedSinuMollweide</option>
+    <option value="geoInterruptedSinusoidal">geoInterruptedSinusoidal</option>
+    <option value="geoKavrayskiy7">geoKavrayskiy7</option>
+    <option value="geoLagrange">geoLagrange</option>
+    <option value="geoLarrivee">geoLarrivee</option>
+    <option value="geoLaskowski">geoLaskowski</option>
+    <option value="geoLoximuthal">geoLoximuthal</option>
+    <option value="geoMercator" selected>geoMercator</option>
+    <option value="geoMiller">geoMiller</option>
+    <option value="geoMollweide">geoMollweide</option>
+    <option value="geoMtFlatPolarParabolic">geoMtFlatPolarParabolic</option>
+    <option value="geoMtFlatPolarQuartic">geoMtFlatPolarQuartic</option>
+    <option value="geoMtFlatPolarSinusoidal">geoMtFlatPolarSinusoidal</option>
+    <option value="geoNaturalEarth1">geoNaturalEarth1</option>
+    <option value="geoNaturalEarth2">geoNaturalEarth2</option>
+    <option value="geoNellHammer">geoNellHammer</option>
+    <option value="geoPatterson">geoPatterson</option>
+    <option value="geoPeirceQuincuncial">geoPeirceQuincuncial</option>
+    <option value="geoPolyconic">geoPolyconic</option>
+    <option value="geoPolyhedralButterfly">geoPolyhedralButterfly</option>
+    <option value="geoPolyhedralCollignon">geoPolyhedralCollignon</option>
+    <option value="geoPolyhedralWaterman">geoPolyhedralWaterman</option>
+    <option value="geoPolyhedralVoronoi">geoPolyhedralVoronoi</option>
+    <option value="geoRectangularPolyconic">geoRectangularPolyconic</option>
+    <option value="geoRobinson">geoRobinson</option>
+    <option value="geoSatellite">geoSatellite</option>
+    <option value="geoSinuMollweide">geoSinuMollweide</option>
+    <option value="geoSinusoidal">geoSinusoidal</option>
+    <option value="geoStereographic">geoStereographic</option>
+    <option value="geoTetrahedralLee">geoTetrahedralLee</option>
+    <option value="geoTimes">geoTimes</option>
+    <option value="geoTransverseMercator">geoTransverseMercator</option>
+    <option value="geoVanDerGrinten">geoVanDerGrinten</option>
+    <option value="geoVanDerGrinten2">geoVanDerGrinten2</option>
+    <option value="geoVanDerGrinten3">geoVanDerGrinten3</option>
+    <option value="geoVanDerGrinten4">geoVanDerGrinten4</option>
+    <option value="geoWagner4">geoWagner4</option>
+    <option value="geoWagner6">geoWagner6</option>
+    <option value="geoWagner7">geoWagner7</option>
+    <option value="geoWiechel">geoWiechel</option>
+    <option value="geoWinkel3">geoWinkel3</option>
+  </select>
+</p>
+
+<p>
+  <label>
+    <input id="axialTilt" type="checkbox" checked/>
+    Keep it real! Use Earth's axial tilt of ~23.4°.
+  </label>
+</p>
+
+<canvas id="ortho" width="960" height="600"></canvas>
+<canvas id="any" width="960" height="600"></canvas>
+
+<p>
+  Blog post:
+  <a href="https://petrichor.studio/2018/06/29/map-projections-in-the-web/" target="_blank">
+    "Map Projections on the Web"
+  </a>
+</p>
+
+<script src="https://d3js.org/d3.v5.min.js"></script>
+<script src="https://unpkg.com/d3-geo-projection@2.4.1/dist/d3-geo-projection.min.js"></script>
+<script src="https://unpkg.com/d3-geo-polygon@1.4.2/build/d3-geo-polygon.min.js"></script>
+<script src="https://unpkg.com/topojson-client@3.0.0/dist/topojson-client.min.js"></script>
+<script src="https://unpkg.com/topojson-simplify@3.0.2/dist/topojson-simplify.min.js"></script>
diff --git a/d3-map-projections/src/script.js b/d3-map-projections/src/script.js
new file mode 100644
index 0000000..137c50e
--- /dev/null
+++ b/d3-map-projections/src/script.js
@@ -0,0 +1,171 @@
+var canvasAny = d3.select("canvas#any"),
+  ctxAny = canvasAny.node().getContext("2d"),
+  canvasAnyWidth = +canvasAny.attr("width"),
+  canvasAnyHeight = +canvasAny.attr("height");
+
+var projectionAny = d3
+  .geoMercator()
+  .rotate([-160, 0, -23.4])
+  .fitSize([canvasAnyWidth, canvasAnyHeight], {
+    type: "Sphere"
+  });
+
+var geoPathGeneratorAny = d3
+  .geoPath()
+  .projection(projectionAny)
+  .context(ctxAny);
+
+var canvasOrtho = d3.select("canvas#ortho"),
+  ctxOrtho = canvasOrtho.node().getContext("2d"),
+  canvasOrthoWidth = +canvasOrtho.attr("width"),
+  canvasOrthoHeight = +canvasOrtho.attr("height");
+
+var projectionOrtho = d3
+  .geoOrthographic()
+  .rotate([-160, 0, -23.4])
+  .fitSize([canvasOrthoWidth, canvasOrthoHeight], {
+    type: "Sphere"
+  });
+
+var geoPathGeneratorOrtho = d3
+  .geoPath()
+  .projection(projectionOrtho)
+  .context(ctxOrtho);
+
+var selectElement = document.querySelector("select#projectionChoice");
+selectElement.addEventListener("change", function(evt) {
+  changeProjection(evt.target.value);
+});
+
+var axialTilt = -23.4;
+
+var axialTiltElement = document.querySelector("input#axialTilt");
+axialTiltElement.addEventListener("change", function(evt) {
+  changeAxialTilt(evt.target.checked);
+});
+
+var geoCircles = {
+  type: "GeometryCollection",
+  geometries: []
+};
+
+for (var longitude = -180; longitude < 180; longitude += 15) {
+  for (var latitude = -90; latitude <= 90; latitude += 15) {
+    geoCircles.geometries.push(
+      d3
+        .geoCircle()
+        .center([longitude, latitude])
+        .radius(1)()
+    );
+  }
+}
+
+drawSphereAndCircles(geoCircles);
+
+d3
+  .json("https://unpkg.com/world-atlas@1.1.4/world/110m.json")
+  .then(function(loadedTopoJson) {
+    var topology = topojson.presimplify(loadedTopoJson);
+    topology = topojson.simplify(topology, 1.1);
+    var worldGeoJson = topojson.feature(
+      topology,
+      topology.objects.land
+    );
+
+    d3.timer(function(elapsed) {
+      geoPathGeneratorAny
+        .projection()
+        .rotate([elapsed * 0.005 - 160, 0, axialTilt]);
+
+      geoPathGeneratorOrtho
+        .projection()
+        .rotate([elapsed * 0.005 - 160, 0, axialTilt]);
+
+      ctxOrtho.clearRect(0, 0, canvasOrthoWidth, canvasOrthoHeight);
+      ctxAny.clearRect(0, 0, canvasAnyWidth, canvasAnyHeight);
+
+      drawWorld(worldGeoJson);
+
+      drawSphereAndCircles(geoCircles);
+    });
+
+    var totalOptions = selectElement.options.length;
+    var intervalTimer = d3.interval(function() {
+      if (selectElement.selectedIndex === totalOptions - 1) {
+        selectElement.selectedIndex = 1;
+      } else {
+        selectElement.selectedIndex++;
+      }
+      selectElement.dispatchEvent(new Event("change"));
+    }, 2500);
+
+    selectElement.addEventListener("focus", function() {
+      intervalTimer.stop();
+    });
+  });
+
+function drawWorld(worldGeoJson) {
+  ctxOrtho.beginPath();
+  ctxOrtho.fillStyle = "#b2df8a";
+  geoPathGeneratorOrtho(worldGeoJson);
+  ctxOrtho.fill();
+  ctxOrtho.closePath();
+
+  ctxAny.beginPath();
+  ctxAny.fillStyle = "#b2df8a";
+  geoPathGeneratorAny(worldGeoJson);
+  ctxAny.fill();
+  ctxAny.closePath();
+}
+
+function drawSphereAndCircles(geoCircles) {
+  ctxOrtho.beginPath();
+  ctxOrtho.fillStyle = "#1f78b4";
+  geoPathGeneratorOrtho(geoCircles);
+  ctxOrtho.fill();
+  ctxOrtho.closePath();
+
+  ctxOrtho.beginPath();
+  ctxOrtho.strokeStyle = "#1f78b4";
+  geoPathGeneratorOrtho({ type: "Sphere" });
+  ctxOrtho.stroke();
+  ctxOrtho.closePath();
+
+  ctxAny.beginPath();
+  ctxAny.fillStyle = "#1f78b4";
+  geoPathGeneratorAny(geoCircles);
+  ctxAny.fill();
+  ctxAny.closePath();
+
+  ctxAny.beginPath();
+  ctxAny.strokeStyle = "#1f78b4";
+  geoPathGeneratorAny({ type: "Sphere" });
+  ctxAny.stroke();
+  ctxAny.closePath();
+}
+
+function changeProjection(d3ProjectionName) {
+  var newProjection = d3[d3ProjectionName]().fitSize(
+    [canvasAnyWidth, canvasAnyHeight],
+    {
+      type: "Sphere"
+    }
+  );
+
+  geoPathGeneratorAny.projection(newProjection);
+}
+
+function changeAxialTilt(checked) {
+  var newAxialTilt = checked ? -23.4 : 0;
+
+  d3
+    .select({})
+    .transition()
+    .duration(1250)
+    .tween(null, function() {
+      var interpolator = d3.interpolate(axialTilt, newAxialTilt);
+      return function(t) {
+        axialTilt = interpolator(t);
+      };
+    });
+}
diff --git a/d3-map-projections/src/style.css b/d3-map-projections/src/style.css
new file mode 100644
index 0000000..11c3a67
--- /dev/null
+++ b/d3-map-projections/src/style.css
@@ -0,0 +1,36 @@
+body {
+  margin: 5px;
+  text-align: center;
+  font-family: sans-serif;
+}
+
+h1 {
+  font-size: 1.25rem;
+  margin: 7px 0;
+}
+
+p {
+  font-size: 0.8rem;
+}
+
+p:first-of-type {
+  font-weight: bold;
+}
+
+select#projectionChoice {
+  max-width: 50vw;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+label {
+  cursor: pointer;
+}
+
+input#axialTilt {
+  vertical-align: middle;
+}
+
+canvas {
+  max-width: calc(50vw - 20px);
+}
diff --git a/daily-pen-3disco/README.markdown b/daily-pen-3disco/README.markdown
new file mode 100644
index 0000000..646f1b0
--- /dev/null
+++ b/daily-pen-3disco/README.markdown
@@ -0,0 +1,4 @@
+# Daily Pen #3 - Disco
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/kelvinh111/pen/VQawZV](https://codepen.io/kelvinh111/pen/VQawZV).
+
+ 
\ No newline at end of file
diff --git a/daily-pen-3disco/dist/index.html b/daily-pen-3disco/dist/index.html
new file mode 100644
index 0000000..7ad078e
--- /dev/null
+++ b/daily-pen-3disco/dist/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Daily Pen #3 - Disco</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<div id="container"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js'></script>
+<script src='https://public.kelvinh.studio/cdn/js/kelvin_util.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/victor/1.1.0/victor.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/konva/1.7.6/konva.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/daily-pen-3disco/dist/script.js b/daily-pen-3disco/dist/script.js
new file mode 100644
index 0000000..fe1ff7c
--- /dev/null
+++ b/daily-pen-3disco/dist/script.js
@@ -0,0 +1,132 @@
+const km = kelvinUtil.math;
+const width = 600;
+const height = 600;
+const bgColor = 'black';
+const bgOpacity = .4;
+const color = {
+  red1: '#E74C3C',
+  red2: '#C0392B',
+  orange1: '#E67E22',
+  orange2: '#D35400',
+  yellow1: '#F1C40F',
+  yellow2: '#F39C12',
+  green1: '#2ECC71',
+  green2: '#27AE60',
+  mint1: '#1ABC9C',
+  mint2: '#16A085',
+  blue1: '#3498DB',
+  blue2: '#2980B9',
+  purple1: '#9B59B6',
+  purple2: '#8E44AD',
+  light1: '#ECF0F1',
+  light2: '#BDC3C7',
+  grey1: '#95A5A6',
+  grey2: '#7F8C8D',
+  dark1: '#34495E',
+  dark2: '#2C3E50' };
+
+
+let mouseX = 0;
+let mouseY = 0;
+let frameCount = 0;
+let ss = [];
+let ss2 = [];
+
+let stage = new Konva.Stage({
+  container: 'container',
+  width: width,
+  height: height });
+
+
+let layer = new Konva.FastLayer({
+  clearBeforeDraw: false });
+
+stage.add(layer);
+
+let bg = new Konva.Rect({
+  x: 0,
+  y: 0,
+  width: width,
+  height: height,
+  fill: bgColor,
+  opacity: bgOpacity });
+
+layer.add(bg);
+bg.moveToBottom();
+
+// stats
+let stats = new Stats();
+stats.showPanel(0);
+stats.domElement.className += ' stats';
+document.body.appendChild(stats.domElement);
+
+new Konva.Animation(frame => {
+  stats.begin();
+
+  let z = 0;
+
+  for (let x = -100; x <= 100; x += 10) {
+    for (let y = -100; y <= 100; y += 10) {
+
+      let s1;
+      let s2;
+
+      if (typeof ss[z] === 'undefined') {
+        s1 = new Konva.Line({
+          points: [0, 0, 10, 10],
+          stroke: 'rgb(0,150,255)',
+          strokeWidth: 2,
+          globalCompositeOperation: 'lighter' });
+
+        ss.push(s1);
+        layer.add(s1);
+      } else
+      {
+        s1 = ss[z];
+      }
+
+      if (typeof ss2[z] === 'undefined') {
+        s2 = new Konva.Line({
+          points: [0, 0, 10, 10],
+          stroke: 'rgb(0,150,255)',
+          strokeWidth: 2,
+          globalCompositeOperation: 'lighter' });
+
+        ss2.push(s2);
+        layer.add(s2);
+      } else
+      {
+        s2 = ss2[z];
+      }
+
+      let d = km.dist(x, y, 0, 0);
+      let op = km.map(d, 0, 150, 1, 0);
+      let r = km.floor(km.map(d, 0, 150, 255, 0));
+      let g = 50;
+      let b = km.floor(km.map(d, 0, 150, 0, 255));
+      let c = `rgb(${r},${g},${b})`;
+      let tx = x * 2 + width / 2;
+      let ty = y * 2 + height / 2;
+
+      s1.opacity(op);
+      s1.x(tx);
+      s1.y(ty);
+      s1.points([x * 2, y * 2, 0, 0]);
+      s1.rotation(frameCount * 1.5);
+      s1.stroke(c);
+
+      s2.opacity(op);
+      s2.x(tx);
+      s2.y(ty);
+      s2.points([x / 2, y / 2, 0, 0]);
+      s2.rotation(-frameCount * 2);
+      s2.stroke(c);
+
+      z++;
+    }
+  }
+
+  frameCount++;
+
+  stats.end();
+}, layer).start();
\ No newline at end of file
diff --git a/daily-pen-3disco/dist/style.css b/daily-pen-3disco/dist/style.css
new file mode 100644
index 0000000..367a5aa
--- /dev/null
+++ b/daily-pen-3disco/dist/style.css
@@ -0,0 +1,26 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: #333;
+}
+#container {
+  padding: 50px;
+}
+.konvajs-content {
+  margin: 0 auto;
+  box-shadow: 0 0 50px black;
+  background: black;
+}
+.stats {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  opacity: 0.3 !important;
+}
+.stats:hover {
+  opacity: 1 !important;
+}
diff --git a/daily-pen-3disco/license.txt b/daily-pen-3disco/license.txt
new file mode 100644
index 0000000..0f4ef4d
--- /dev/null
+++ b/daily-pen-3disco/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Kelvin Hung (https://codepen.io/kelvinh111/pen/VQawZV)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/daily-pen-3disco/src/index.pug b/daily-pen-3disco/src/index.pug
new file mode 100644
index 0000000..dce8f5f
--- /dev/null
+++ b/daily-pen-3disco/src/index.pug
@@ -0,0 +1 @@
+#container
\ No newline at end of file
diff --git a/daily-pen-3disco/src/script.babel b/daily-pen-3disco/src/script.babel
new file mode 100644
index 0000000..3c41cfb
--- /dev/null
+++ b/daily-pen-3disco/src/script.babel
@@ -0,0 +1,132 @@
+const km = kelvinUtil.math
+const width = 600
+const height = 600
+const bgColor = 'black'
+const bgOpacity = .4
+const color = {
+  red1: '#E74C3C',
+  red2: '#C0392B',
+  orange1: '#E67E22',
+  orange2: '#D35400',
+  yellow1: '#F1C40F',
+  yellow2: '#F39C12',
+  green1: '#2ECC71',
+  green2: '#27AE60',
+  mint1: '#1ABC9C',
+  mint2: '#16A085',
+  blue1: '#3498DB',
+  blue2: '#2980B9',
+  purple1: '#9B59B6',
+  purple2: '#8E44AD',
+  light1: '#ECF0F1',
+  light2: '#BDC3C7',
+  grey1: '#95A5A6',
+  grey2: '#7F8C8D',
+  dark1: '#34495E',
+  dark2: '#2C3E50',
+}
+
+let mouseX = 0
+let mouseY = 0
+let frameCount = 0
+let ss = []
+let ss2 = []
+
+let stage = new Konva.Stage({
+  container: 'container',
+  width: width,
+  height: height
+})
+
+let layer = new Konva.FastLayer({
+  clearBeforeDraw: false
+});
+stage.add(layer)
+
+let bg = new Konva.Rect({
+  x: 0,
+  y: 0,
+  width: width,
+  height: height,
+  fill: bgColor,
+  opacity: bgOpacity
+})
+layer.add(bg)
+bg.moveToBottom()
+
+// stats
+let stats = new Stats()
+stats.showPanel(0)
+stats.domElement.className += ' stats'
+document.body.appendChild(stats.domElement)
+
+new Konva.Animation(frame => {
+  stats.begin()
+
+  let z = 0
+
+  for (let x = -100; x <= 100; x += 10) {
+    for (let y = -100; y <= 100; y += 10) {
+
+      let s1
+      let s2
+
+      if (typeof ss[z] === 'undefined') {
+        s1 = new Konva.Line({
+          points: [0, 0, 10, 10],
+          stroke: 'rgb(0,150,255)',
+          strokeWidth: 2,
+          globalCompositeOperation: 'lighter'
+        });
+        ss.push(s1)
+        layer.add(s1)
+      }
+      else {
+        s1 = ss[z]
+      }
+
+      if (typeof ss2[z] === 'undefined') {
+        s2 = new Konva.Line({
+          points: [0, 0, 10, 10],
+          stroke: 'rgb(0,150,255)',
+          strokeWidth: 2,
+          globalCompositeOperation: 'lighter'
+        });
+        ss2.push(s2)
+        layer.add(s2)
+      }
+      else {
+        s2 = ss2[z]
+      }
+
+      let d = km.dist(x, y, 0, 0);
+      let op = km.map(d, 0, 150, 1, 0)
+      let r = km.floor(km.map(d, 0, 150, 255, 0))
+      let g = 50 
+      let b = km.floor(km.map(d, 0, 150, 0, 255))
+      let c = `rgb(${r},${g},${b})`
+      let tx = x * 2 + width / 2
+      let ty = y * 2 + height / 2
+
+      s1.opacity(op)
+      s1.x(tx)
+      s1.y(ty)
+      s1.points([x * 2, y * 2, 0, 0])
+      s1.rotation(frameCount * 1.5)
+      s1.stroke(c)
+
+      s2.opacity(op)
+      s2.x(tx)
+      s2.y(ty)
+      s2.points([x / 2, y / 2, 0, 0])
+      s2.rotation((-frameCount * 2))
+      s2.stroke(c)
+
+      z++;
+    }
+  }
+
+  frameCount++;
+
+  stats.end()
+}, layer).start()
diff --git a/daily-pen-3disco/src/style.less b/daily-pen-3disco/src/style.less
new file mode 100644
index 0000000..73a788e
--- /dev/null
+++ b/daily-pen-3disco/src/style.less
@@ -0,0 +1,30 @@
+html,
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background: #333;
+}
+
+#container {
+    padding: 50px;
+}
+
+.konvajs-content {
+    margin: 0 auto;
+    box-shadow: 0 0 50px black;
+    background: black;
+}
+
+.stats {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    opacity: 0.3 !important;
+}
+
+.stats:hover {
+    opacity: 1 !important;
+}
diff --git a/daily-ui-006-user-profile/README.markdown b/daily-ui-006-user-profile/README.markdown
new file mode 100644
index 0000000..2c5a2f6
--- /dev/null
+++ b/daily-ui-006-user-profile/README.markdown
@@ -0,0 +1,4 @@
+# Daily UI #006 User Profile
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/xichen/pen/ZpgdGq](https://codepen.io/xichen/pen/ZpgdGq).
+
+ 
\ No newline at end of file
diff --git a/daily-ui-006-user-profile/dist/index.html b/daily-ui-006-user-profile/dist/index.html
new file mode 100644
index 0000000..4b7ab55
--- /dev/null
+++ b/daily-ui-006-user-profile/dist/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Daily UI #006 User Profile</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<div class="profile">
+  <div class="photo"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/764024/profile/profile-512.jpg"/></div>
+  <div class="content">
+    <div class="text">
+      <h3>Kelly Chen</h3>
+      <h6>Front-end Web Designer</h6>
+    </div>
+    <div class="btn"><span></span></div>
+  </div>
+  <div class="box"><i class="fa fa-codepen"></i><i class="fa fa-facebook"></i><i class="fa fa-github"></i><i class="fa fa-tumblr"></i><i class="fa fa-twitter"></i></div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/daily-ui-006-user-profile/dist/script.js b/daily-ui-006-user-profile/dist/script.js
new file mode 100644
index 0000000..e8a0bc6
--- /dev/null
+++ b/daily-ui-006-user-profile/dist/script.js
@@ -0,0 +1,10 @@
+(function() {
+  $('.btn').click(function() {
+    $(this).toggleClass('active');
+    return $('.box').toggleClass('open');
+  });
+
+}).call(this);
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQSxDQUFBLENBQUUsTUFBRixDQUFTLENBQUMsS0FBVixDQUFnQixRQUFBLENBQUEsQ0FBQTtJQUNmLENBQUEsQ0FBRSxJQUFGLENBQU8sQ0FBQyxXQUFSLENBQW9CLFFBQXBCO1dBQ0EsQ0FBQSxDQUFFLE1BQUYsQ0FBUyxDQUFDLFdBQVYsQ0FBc0IsTUFBdEI7RUFGZSxDQUFoQjtBQUFBIiwic291cmNlc0NvbnRlbnQiOlsiJCgnLmJ0bicpLmNsaWNrIC0+XG5cdCQodGhpcykudG9nZ2xlQ2xhc3MgJ2FjdGl2ZSdcblx0JCgnLmJveCcpLnRvZ2dsZUNsYXNzICdvcGVuJyJdfQ==
+//# sourceURL=coffeescript
\ No newline at end of file
diff --git a/daily-ui-006-user-profile/dist/style.css b/daily-ui-006-user-profile/dist/style.css
new file mode 100644
index 0000000..c3ac8e3
--- /dev/null
+++ b/daily-ui-006-user-profile/dist/style.css
@@ -0,0 +1,220 @@
+@import 'https://fonts.googleapis.com/css?family=Raleway';
+* {
+  outline: none;
+  user-select: none;
+}
+
+body, html {
+  margin: 0;
+  background: #ddd;
+  color: #7a7b7c;
+}
+
+body {
+  font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
+}
+
+.profile {
+  width: 330px;
+  height: 100px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 5px;
+  background-color: #fafafa;
+  box-shadow: 0 0 2rem #babbbc;
+  animation: show-profile 0.5s forwards ease-in-out;
+}
+@keyframes show-profile {
+  0% {
+    width: 0;
+  }
+}
+.profile .photo, .profile .content {
+  box-sizing: border-box;
+}
+.profile .photo {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 5px solid #fafafa;
+  background-color: #fafafa;
+  margin-left: -50px;
+  box-shadow: 0 0 0.5rem #babbbc;
+  animation: rotate-photo 0.5s forwards ease-in-out;
+}
+@keyframes rotate-photo {
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+.profile .photo img {
+  width: 100%;
+}
+.profile .content {
+  padding: 10px;
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.profile .content::before {
+  content: "";
+  position: absolute;
+  width: 230px;
+  height: 150px;
+  background-color: #e9f3e6;
+  left: 0;
+  top: -20px;
+  z-index: -1;
+  transform: rotate(-8deg);
+}
+.profile .content .text {
+  margin-top: 20px;
+  margin-left: 50px;
+}
+.profile .content .text h3, .profile .content .text h6 {
+  font-weight: normal;
+  margin: 3px 0;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+.profile .content .btn {
+  background-color: #abc;
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  right: 25px;
+  top: 25px;
+  border-radius: 50%;
+  z-index: 1;
+  cursor: pointer;
+  transition-duration: 0.3s;
+  animation: pop-btn 0.3s both ease-in-out 0.5s;
+}
+@keyframes pop-btn {
+  0% {
+    transform: scale(0);
+  }
+  80% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.profile .content .btn:hover {
+  box-shadow: 0 0 0 5px rgba(170, 187, 204, 0.5);
+}
+.profile .content .btn span {
+  width: 60%;
+  height: 2px;
+  position: absolute;
+  background-color: white;
+  top: 50%;
+  left: 20%;
+  transform: translateY(-50%);
+  animation: to-hamburger 0.3s forwards ease-in-out;
+}
+.profile .content .btn span::before, .profile .content .btn span::after {
+  content: "";
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  background-color: white;
+  transition-duration: 0.3s;
+  transform: rotate(0deg);
+  right: 0;
+}
+.profile .content .btn span::before {
+  margin-top: -7px;
+}
+.profile .content .btn span::after {
+  margin-top: 7px;
+}
+.profile .content .btn.active span {
+  animation: to-arrow 0.3s forwards ease-in-out;
+}
+.profile .content .btn.active span::before, .profile .content .btn.active span::after {
+  width: 60%;
+  right: -1px;
+}
+.profile .content .btn.active span::before {
+  transform: rotate(45deg);
+}
+.profile .content .btn.active span::after {
+  transform: rotate(-45deg);
+}
+@keyframes to-hamburger {
+  from {
+    transform: translateY(-50%) rotate(-180deg);
+  }
+}
+@keyframes to-arrow {
+  from {
+    transform: translateY(-50%) rotate(0deg);
+  }
+  to {
+    transform: translateY(-50%) rotate(180deg);
+  }
+}
+.profile .box {
+  width: 150px;
+  height: 150px;
+  opacity: 0;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.7);
+  position: absolute;
+  top: 50%;
+  right: -40%;
+  transform: translate(-50%, -50%);
+  transition-duration: 0.3s;
+}
+.profile .box i {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #ececec;
+  font-size: 26px;
+  text-align: center;
+  line-height: 50px;
+  position: absolute;
+  left: 18px;
+  top: calc(75px - 50px/2);
+  box-shadow: 0 0 0.5rem #babbbc;
+  transition-duration: 0.3s;
+}
+.profile .box i:hover {
+  transition-delay: initial !important;
+  box-shadow: 0 0 0 5px #babbbc;
+}
+.profile .box.open {
+  opacity: 1;
+}
+.profile .box.open i {
+  left: 60px;
+}
+.profile .box.open i:nth-of-type(1) {
+  transform: rotate(-90deg) translateX(120px) rotate(90deg);
+  transition-delay: 0s;
+}
+.profile .box.open i:nth-of-type(2) {
+  transform: rotate(-45deg) translateX(120px) rotate(45deg);
+  transition-delay: 0.1s;
+}
+.profile .box.open i:nth-of-type(3) {
+  transform: rotate(0deg) translateX(120px) rotate(0deg);
+  transition-delay: 0.2s;
+}
+.profile .box.open i:nth-of-type(4) {
+  transform: rotate(45deg) translateX(120px) rotate(-45deg);
+  transition-delay: 0.3s;
+}
+.profile .box.open i:nth-of-type(5) {
+  transform: rotate(90deg) translateX(120px) rotate(-90deg);
+  transition-delay: 0.4s;
+}
diff --git a/daily-ui-006-user-profile/license.txt b/daily-ui-006-user-profile/license.txt
new file mode 100644
index 0000000..c031455
--- /dev/null
+++ b/daily-ui-006-user-profile/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by XiChen (https://codepen.io/xichen/pen/ZpgdGq)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/daily-ui-006-user-profile/src/index.pug b/daily-ui-006-user-profile/src/index.pug
new file mode 100644
index 0000000..d593065
--- /dev/null
+++ b/daily-ui-006-user-profile/src/index.pug
@@ -0,0 +1,18 @@
+//- Daily UI #006 User Profile
+.profile
+	.photo
+		img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/764024/profile/profile-512.jpg")
+	.content
+		.text
+			h3 Kelly Chen
+			h6 Front-end Web Designer
+		.btn
+			span
+	.box
+		i.fa.fa-codepen
+		i.fa.fa-facebook
+		i.fa.fa-github
+		i.fa.fa-tumblr
+		i.fa.fa-twitter
+		
+		
\ No newline at end of file
diff --git a/daily-ui-006-user-profile/src/script.coffee b/daily-ui-006-user-profile/src/script.coffee
new file mode 100644
index 0000000..a961676
--- /dev/null
+++ b/daily-ui-006-user-profile/src/script.coffee
@@ -0,0 +1,3 @@
+$('.btn').click ->
+	$(this).toggleClass 'active'
+	$('.box').toggleClass 'open'
\ No newline at end of file
diff --git a/daily-ui-006-user-profile/src/style.sass b/daily-ui-006-user-profile/src/style.sass
new file mode 100644
index 0000000..8341701
--- /dev/null
+++ b/daily-ui-006-user-profile/src/style.sass
@@ -0,0 +1,161 @@
+@import 'https://fonts.googleapis.com/css?family=Raleway'
+=size($w, $h)
+	width: $w
+	height: $h
+=bdrs($bdrs)
+	border-radius: $bdrs
+*
+	outline: none
+	user-select: none
+body, html
+	margin: 0
+	background: #ddd
+	color: #7a7b7c
+body
+	font-family: 'Raleway', 'Microsoft JhengHei', Arial, sans-serif
+.profile
+	+size(330px, 100px)
+	position: absolute
+	top: 50%
+	left: 50%
+	transform: translate(-50%, -50%)
+	+bdrs(5px)
+	background-color: #fafafa
+	box-shadow: 0 0 2rem #babbbc
+	animation: show-profile .5s forwards ease-in-out
+	@keyframes show-profile
+		0%
+			width: 0
+	.photo, .content
+		box-sizing: border-box
+	.photo
+		+size(100px, 100px)
+		+bdrs(50%)
+		overflow: hidden
+		border: 5px solid #fafafa
+		background-color: #fafafa
+		margin-left: -50px
+		box-shadow: 0 0 .5rem #babbbc
+		animation: rotate-photo .5s forwards ease-in-out
+		@keyframes rotate-photo
+			100%
+				transform: rotate(-360deg)
+		img
+			width: 100%
+	.content
+		padding: 10px
+		overflow: hidden
+		position: absolute
+		+size(100%, 100%)
+		top: 0
+		left: 0
+		&::before
+			content: ''
+			position: absolute
+			+size(230px, 150px)
+			background-color: #e9f3e6
+			left: 0
+			top: -20px
+			z-index: -1
+			transform: rotate(-8deg)
+		.text
+			margin-top: 20px
+			margin-left: 50px
+			h3, h6
+				font-weight: normal
+				margin: 3px 0
+				letter-spacing: .5px
+				white-space: nowrap
+		.btn
+			background-color: #abc
+			+size(50px, 50px)
+			position: absolute
+			right: 25px
+			top: 25px
+			+bdrs(50%)
+			z-index: 1
+			cursor: pointer
+			transition-duration: .3s
+			animation: pop-btn .3s both ease-in-out .5s
+			@keyframes pop-btn
+				0%
+					transform: scale(0)
+				80%
+					transform: scale(1.2)
+				100%
+					transform: scale(1)
+			&:hover
+				box-shadow: 0 0 0 5px rgba(#abc, .5)
+			span
+				+size(60%, 2px)
+				position: absolute
+				background-color: white
+				top: 50%
+				left: 20%
+				transform: translateY(-50%)
+				animation: to-hamburger .3s forwards ease-in-out
+				&::before, &::after
+					content: ''
+					+size(100%, 2px)
+					position: absolute
+					background-color: white
+					transition-duration: .3s
+					transform: rotate(0deg)
+					right: 0
+				&::before
+					margin-top: -7px
+				&::after
+					margin-top: 7px
+			&.active
+				span
+					animation: to-arrow .3s forwards ease-in-out
+					&::before, &::after
+						width: 60%
+						right: -1px
+					&::before
+						transform: rotate(45deg)
+					&::after
+						transform: rotate(-45deg)
+		@keyframes to-hamburger
+			from
+				transform: translateY(-50%) rotate(-180deg)
+		@keyframes to-arrow
+			from
+				transform: translateY(-50%) rotate(0deg)
+			to
+				transform: translateY(-50%) rotate(180deg)
+	.box
+		+size(150px, 150px)
+		opacity: 0
+		+bdrs(50%)
+		background-color: rgba(white, .7)
+		position: absolute
+		top: 50%
+		right: -40%
+		transform: translate(-50%, -50%)
+		transition-duration: .3s
+		i
+			+size(50px, 50px)
+			+bdrs(50%)
+			background-color: #ececec
+			font-size: 26px
+			text-align: center
+			line-height: 50px
+			position: absolute
+			left: 18px
+			top: calc(75px - 50px/2)
+			box-shadow: 0 0 .5rem #babbbc
+			transition-duration: .3s
+			&:hover
+				transition-delay: initial !important
+				box-shadow: 0 0 0 5px #babbbc
+		&.open
+			opacity: 1
+			i
+				left: 60px
+				$item: 5
+				@for $i from 0 through ($item - 1)
+					$deg: 180deg / ($item - 1) //因圍繞半圓，為頭尾垂直對齊使item-1
+					&:nth-of-type(#{$i + 1})
+						transform: rotate($deg * $i - 90 ) translateX(120px) rotate(-$deg * $i + 90 )
+						transition-delay: .1s * $i
\ No newline at end of file
diff --git a/dan-flashes-complicated-shirt-generator/README.markdown b/dan-flashes-complicated-shirt-generator/README.markdown
new file mode 100644
index 0000000..65333a8
--- /dev/null
+++ b/dan-flashes-complicated-shirt-generator/README.markdown
@@ -0,0 +1,5 @@
+# Dan Flashes Complicated Shirt Generator
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/ExXWdxz](https://codepen.io/cobra_winfrey/pen/ExXWdxz).
+
+p5.js + html2canvas procedural shirt generator based on the very complicated, understandably pricey shirts from "I Think You Should Leave"
diff --git a/dan-flashes-complicated-shirt-generator/dist/index.html b/dan-flashes-complicated-shirt-generator/dist/index.html
new file mode 100644
index 0000000..1a6cbfb
--- /dev/null
+++ b/dan-flashes-complicated-shirt-generator/dist/index.html
@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Dan Flashes Complicated Shirt Generator</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>DAN <br>FLASHES<span>Complicated Shirts <br>for Complicated Gentlemen</span></h1>
+<span>fetching new shirts</span>
+<strong>click for new shirt</strong>
+<div id='pattern'>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+  <div class='cell'>
+    <svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='cellsvg1' fill='transparent' stroke='#FF0066'></path>
+      <path class='cellsvg2' fill='transparent' stroke='#FF0066'></path>
+    </svg>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/dan-flashes-complicated-shirt-generator/dist/script.js b/dan-flashes-complicated-shirt-generator/dist/script.js
new file mode 100644
index 0000000..cd8ae2d
--- /dev/null
+++ b/dan-flashes-complicated-shirt-generator/dist/script.js
@@ -0,0 +1,143 @@
+var imageURL;
+var shirt;
+var colors = ["", "", "", "", "", "", "", "", ""];
+var img = "";
+var paths1 = [
+  "M 200 400 C 200 310 190 280 260 200 C 330 140 310 210 400 200 ",
+  "M 200 400 C 200 310 190 280 290 310 C 390 340 310 190 400 200 ",
+  "M 200 400 C 200 330 150 330 230 290 C 370 220 210 80 130 160 Q 30 260 160 310 C 290 390 210 190 400 200 "
+];
+var paths2 = [
+  "M 0 200 C 180 190 190 280 230 230 C 260 180 190 150 200 0 ",
+  "M 0 200 C 90 210 60 160 160 200 C 310 250 210 100 200 0 ",
+  "M 0 200 C 90 210 60 160 30 120 C 0 60 210 100 200 0 ",
+  "M 0 200 C 90 210 20 310 100 280 C 310 250 210 100 130 160 Q 40 240 160 310 C 290 390 380 230 200 0 "
+];
+var pattern = document.getElementById("pattern");
+document.body.classList.add("loading");
+drawShirt();
+
+function preload() {
+  shirt = loadModel("https://assets.codepen.io/383755/shirt.obj", true);
+}
+
+function setup() {
+  reset();
+}
+
+function reset() {
+  createCanvas(windowWidth, windowHeight, WEBGL);
+  img = loadImage(imageURL);
+}
+
+function draw() {
+  background(255, 255, 255, 0);
+  ambientLight(180);
+  directionalLight(255, 255, 255, width / 2, height / 2, 0);
+  rotateY(frameCount / 40);
+  noStroke();
+  rotateX(15.6);
+  scale(2, 2, 2);
+  model(shirt);
+  texture(img);
+  textureMode(IMAGE);
+  textureWrap(CLAMP);
+}
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
+
+function drawShirt() {
+  document.body.style.setProperty("--contrast", Math.floor(Math.random() * 10));
+  pattern.style.setProperty("--cellcount", Math.floor(Math.random() * 3) + 7);
+  pattern.style.setProperty("--stroke", Math.floor(Math.random() * 25) + 5);
+  pattern.style.setProperty(
+    "--color1",
+    "rgba(" +
+      Math.floor(Math.random() * 255) +
+      "," +
+      Math.floor(Math.random() * 255) +
+      "," +
+      Math.floor(Math.random() * 255) +
+      "," +
+      1 / (Math.floor(Math.random() * 5) + 1) +
+      ")"
+  );
+  pattern.style.setProperty(
+    "--color2",
+    "rgba(" +
+      Math.floor(Math.random() * 255) +
+      "," +
+      Math.floor(Math.random() * 255) +
+      "," +
+      Math.floor(Math.random() * 255) +
+      "," +
+      1 / (Math.floor(Math.random() * 5) + 1) +
+      ")"
+  );
+  colors.forEach(function (part, index) {
+    this[index] =
+      "rgba(" +
+      Math.floor(Math.random() * 255) +
+      "," +
+      Math.floor(Math.random() * 255) +
+      "," +
+      Math.floor(Math.random() * 255) +
+      "," +
+      1 / (Math.floor(Math.random() * 5) + 1) +
+      ")";
+  }, colors);
+  document.querySelectorAll(".cell").forEach((cell) => {
+    for (let i = 0; i < colors.length; i++) {
+      cell.style.setProperty("--color" + i, colors[i]);
+    }
+    cell.style.setProperty("--rotate", Math.floor(Math.random() * 360) + 1);
+    cell.style.setProperty(
+      "--rotate2",
+      Math.floor(Math.random() * 360) + 1 + "deg"
+    );
+    cell.style.setProperty("--scale", Math.floor(Math.random() * 5) + 1);
+    cell.style.setProperty("--scale2", Math.floor(Math.random() * 5) + 1);
+    cell.style.setProperty("--distance", Math.floor(Math.random() * 25) + 10);
+    cell.style.setProperty("--distance2", Math.floor(Math.random() * 25) + 10);
+  });
+
+  document.querySelectorAll(".cellsvg1").forEach((svg) => {
+    svg.setAttribute("d", paths1[Math.floor(Math.random() * 3) + 0]);
+  });
+
+  document.querySelectorAll(".cellsvg2").forEach((svg) => {
+    svg.setAttribute("d", paths2[Math.floor(Math.random() * 4) + 0]);
+  });
+  html2canvas(document.getElementById("pattern"), {
+    useCORS: true
+  }).then(function (canvas) {
+    imageURL = canvas.toDataURL("image/jpg");
+  });
+}
+
+document.addEventListener(
+  "click",
+  function (event) {
+    document.body.classList.add("loading");
+    drawShirt();
+    setTimeout(() => {
+      reset();
+      document.body.classList.remove("loading");
+    }, 1000);
+  },
+  false
+);
+
+window.addEventListener(
+  "load",
+  function (event) {
+    drawShirt();
+    setTimeout(() => {
+      reset();
+      document.body.classList.remove("loading");
+    }, 5000);
+  },
+  false
+);
\ No newline at end of file
diff --git a/dan-flashes-complicated-shirt-generator/dist/style.css b/dan-flashes-complicated-shirt-generator/dist/style.css
new file mode 100644
index 0000000..7505cd8
--- /dev/null
+++ b/dan-flashes-complicated-shirt-generator/dist/style.css
@@ -0,0 +1,178 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap");
+body {
+  font-family: "Playfair Display", serif;
+  background: #fff;
+  height: 100vh;
+  --cellcount: 10;
+  overflow: hidden;
+  cursor: pointer;
+  transform: scale(0.75);
+}
+body * {
+  cursor: pointer;
+}
+@media (max-width: 1000px) {
+  body {
+    transform: scale(0.5);
+  }
+}
+body:before, body:after {
+  content: "";
+  position: absolute;
+  width: 900px;
+  height: 900px;
+  left: calc(50% - 450px);
+  top: calc(50% - 450px);
+  box-shadow: inset 0 0 0 25px #f0e6d2, inset 0 0 0 26px #fff, 0 40px 60px -40px rgba(0, 0, 0, 0.25);
+  background: radial-gradient(circle at center, #f6f1e5, #f0e6d2 90%);
+}
+body:after {
+  background: transparent;
+  z-index: 999;
+  box-shadow: 0 40px 60px -40px rgba(0, 0, 0, 0.25), 0 0 0 125vw #fff;
+}
+body h1 {
+  position: absolute;
+  z-index: 1;
+  color: #222;
+  font-weight: 900;
+  font-size: 40px;
+  display: inline-block;
+  left: calc(50% - 250px);
+  top: calc(50% - 350px);
+  transform: translate(-50%, -50%);
+  transition: 1s ease-in-out;
+  transition-delay: 0.5s;
+}
+body h1 span {
+  font-size: 20px;
+  color: #666;
+  display: block;
+  margin-top: 0.15rem;
+}
+body > span {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: #222;
+  font-size: 12px;
+  transition: opacity 0.5s ease-in-out;
+  opacity: 0;
+}
+body > span:before {
+  content: "(complicated shirts take time)";
+  position: absolute;
+  left: 50%;
+  top: 125%;
+  transform: translateX(-50%);
+  width: 300px;
+  text-align: center;
+  opacity: 0.5;
+}
+body > span:after {
+  content: ".....";
+  -webkit-animation: loading 2s linear infinite;
+          animation: loading 2s linear infinite;
+  position: absolute;
+  left: 100%;
+  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
+          clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
+}
+@-webkit-keyframes loading {
+  100% {
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+  }
+}
+@keyframes loading {
+  100% {
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+  }
+}
+body > strong {
+  position: absolute;
+  z-index: 10;
+  top: calc(50% + 400px);
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 1;
+  transition: 0.5s ease-in-out;
+  transition-delay: 2s;
+}
+body.loading > strong {
+  opacity: 0;
+  transition-delay: 0s;
+}
+body.loading > span {
+  opacity: 1;
+}
+body.loading canvas {
+  transform: translateY(clamp(800px, 100vh, 90000px));
+}
+body canvas {
+  z-index: 2;
+  position: relative;
+  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.075);
+  filter: contrast(calc(1 + (var(--contrast)/7)));
+}
+body #pattern {
+  overflow: hidden;
+  position: absolute;
+  width: 1200px;
+  height: 1200px;
+  left: -2400px;
+  top: 0;
+  z-index: 999;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: repeat(8, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  z-index: -1;
+}
+body #pattern:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  background: linear-gradient(to left, var(--color1), transparent, var(--color1)), linear-gradient(to bottom, var(--color2), transparent, var(--color2));
+}
+body #pattern .cell {
+  background: transparent;
+  position: relative;
+  z-index: -1;
+  background: radial-gradient(circle at center, var(--color1) 15px, transparent 5px), linear-gradient(var(--rotate2), transparent 50%, var(--color0) 50%, var(--color4) 100%), linear-gradient(var(--rotate2), var(--color2), transparent);
+  background-position: calc(var(--rotate) * 0.5px) calc(var(--rotate) * 0.5px), calc(var(--rotate) * 2px) calc(var(--rotate) * 2px);
+}
+body #pattern .cell:before, body #pattern .cell:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  background: linear-gradient(45deg, var(--color6), var(--color7));
+  transform: scale(calc(1 - (var(--scale) / 4)));
+}
+body #pattern .cell:after {
+  background: radial-gradient(circle at bottom, transparent 25%, var(--color8) 25%, var(--color8) 35%, transparent 35%);
+  border-radius: 0px;
+  transform: scale(calc(var(--scale) / 10)) rotate(var(--rotate2));
+}
+body #pattern .cell svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  background: radial-gradient(circle at center, var(--color1) 2px, transparent 2px, transparent) 50% 50%/calc(var(--distance2) * 1px) calc(var(--distance2) * 1px), repeating-linear-gradient(var(--rotate2), var(--color5) 1px, transparent 1px, transparent calc(var(--distance) * 1px), var(--color5) calc(var(--distance) * 1px), var(--color5) calc((var(--distance) * 1px) + 1px)), repeating-linear-gradient(calc(var(--rotate2) * 90), var(--color5) 1px, transparent 1px, transparent 5px, var(--color5) 5px, var(--color5) 6px);
+}
+body #pattern .cell svg path {
+  stroke-width: var(--stroke);
+  stroke: var(--color3);
+}
\ No newline at end of file
diff --git a/dan-flashes-complicated-shirt-generator/license.txt b/dan-flashes-complicated-shirt-generator/license.txt
new file mode 100644
index 0000000..eb82fda
--- /dev/null
+++ b/dan-flashes-complicated-shirt-generator/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/ExXWdxz)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/dan-flashes-complicated-shirt-generator/src/index.haml b/dan-flashes-complicated-shirt-generator/src/index.haml
new file mode 100644
index 0000000..ae3f8b3
--- /dev/null
+++ b/dan-flashes-complicated-shirt-generator/src/index.haml
@@ -0,0 +1,9 @@
+%h1 DAN <br>FLASHES<span>Complicated Shirts <br>for Complicated Gentlemen</span>
+%span fetching new shirts
+%strong click for new shirt
+#pattern
+ -64.times do
+  .cell
+   %svg{:viewbox => "0 0 400 400", :xmlns => "http://www.w3.org/2000/svg"}
+    %path.cellsvg1{ :stroke => "#FF0066", :fill => "transparent"}
+    %path.cellsvg2{ :stroke => "#FF0066", :fill => "transparent"}
\ No newline at end of file
diff --git a/dan-flashes-complicated-shirt-generator/src/script.js b/dan-flashes-complicated-shirt-generator/src/script.js
new file mode 100644
index 0000000..f38d45b
--- /dev/null
+++ b/dan-flashes-complicated-shirt-generator/src/script.js
@@ -0,0 +1,143 @@
+var imageURL;
+var shirt;
+var colors = ["", "", "", "", "", "", "", "", ""];
+var img = "";
+var paths1 = [
+  "M 200 400 C 200 310 190 280 260 200 C 330 140 310 210 400 200 ",
+  "M 200 400 C 200 310 190 280 290 310 C 390 340 310 190 400 200 ",
+  "M 200 400 C 200 330 150 330 230 290 C 370 220 210 80 130 160 Q 30 260 160 310 C 290 390 210 190 400 200 "
+];
+var paths2 = [
+  "M 0 200 C 180 190 190 280 230 230 C 260 180 190 150 200 0 ",
+  "M 0 200 C 90 210 60 160 160 200 C 310 250 210 100 200 0 ",
+  "M 0 200 C 90 210 60 160 30 120 C 0 60 210 100 200 0 ",
+  "M 0 200 C 90 210 20 310 100 280 C 310 250 210 100 130 160 Q 40 240 160 310 C 290 390 380 230 200 0 "
+];
+var pattern = document.getElementById("pattern");
+document.body.classList.add("loading");
+drawShirt();
+
+function preload() {
+  shirt = loadModel("https://assets.codepen.io/383755/shirt.obj", true);
+}
+
+function setup() {
+  reset();
+}
+
+function reset() {
+  createCanvas(windowWidth, windowHeight, WEBGL);
+  img = loadImage(imageURL);
+}
+
+function draw() {
+  background(255, 255, 255, 0);
+  ambientLight(180);
+  directionalLight(255, 255, 255, width / 2, height / 2, 0);
+  rotateY(frameCount / 40);
+  noStroke();
+  rotateX(15.6);
+  scale(2, 2, 2);
+  model(shirt);
+  texture(img);
+  textureMode(IMAGE);
+  textureWrap(CLAMP);
+}
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
+
+function drawShirt() {
+  document.body.style.setProperty("--contrast", Math.floor(Math.random() * 10));
+  pattern.style.setProperty("--cellcount", Math.floor(Math.random() * 3) + 7);
+  pattern.style.setProperty("--stroke", Math.floor(Math.random() * 25) + 5);
+  pattern.style.setProperty(
+    "--color1",
+    "rgba(" +
+      Math.floor(Math.random() * 255) +
+      "," +
+      Math.floor(Math.random() * 255) +
+      "," +
+      Math.floor(Math.random() * 255) +
+      "," +
+      1 / (Math.floor(Math.random() * 5) + 1) +
+      ")"
+  );
+  pattern.style.setProperty(
+    "--color2",
+    "rgba(" +
+      Math.floor(Math.random() * 255) +
+      "," +
+      Math.floor(Math.random() * 255) +
+      "," +
+      Math.floor(Math.random() * 255) +
+      "," +
+      1 / (Math.floor(Math.random() * 5) + 1) +
+      ")"
+  );
+  colors.forEach(function (part, index) {
+    this[index] =
+      "rgba(" +
+      Math.floor(Math.random() * 255) +
+      "," +
+      Math.floor(Math.random() * 255) +
+      "," +
+      Math.floor(Math.random() * 255) +
+      "," +
+      1 / (Math.floor(Math.random() * 5) + 1) +
+      ")";
+  }, colors);
+  document.querySelectorAll(".cell").forEach((cell) => {
+    for (let i = 0; i < colors.length; i++) {
+      cell.style.setProperty("--color" + i, colors[i]);
+    }
+    cell.style.setProperty("--rotate", Math.floor(Math.random() * 360) + 1);
+    cell.style.setProperty(
+      "--rotate2",
+      Math.floor(Math.random() * 360) + 1 + "deg"
+    );
+    cell.style.setProperty("--scale", Math.floor(Math.random() * 5) + 1);
+    cell.style.setProperty("--scale2", Math.floor(Math.random() * 5) + 1);
+    cell.style.setProperty("--distance", Math.floor(Math.random() * 25) + 10);
+    cell.style.setProperty("--distance2", Math.floor(Math.random() * 25) + 10);
+  });
+
+  document.querySelectorAll(".cellsvg1").forEach((svg) => {
+    svg.setAttribute("d", paths1[Math.floor(Math.random() * 3) + 0]);
+  });
+
+  document.querySelectorAll(".cellsvg2").forEach((svg) => {
+    svg.setAttribute("d", paths2[Math.floor(Math.random() * 4) + 0]);
+  });
+  html2canvas(document.getElementById("pattern"), {
+    useCORS: true
+  }).then(function (canvas) {
+    imageURL = canvas.toDataURL("image/jpg");
+  });
+}
+
+document.addEventListener(
+  "click",
+  function (event) {
+    document.body.classList.add("loading");
+    drawShirt();
+    setTimeout(() => {
+      reset();
+      document.body.classList.remove("loading");
+    }, 1000);
+  },
+  false
+);
+
+window.addEventListener(
+  "load",
+  function (event) {
+    drawShirt();
+    setTimeout(() => {
+      reset();
+      document.body.classList.remove("loading");
+    }, 5000);
+  },
+  false
+);
diff --git a/dan-flashes-complicated-shirt-generator/src/style.scss b/dan-flashes-complicated-shirt-generator/src/style.scss
new file mode 100644
index 0000000..3c839ff
--- /dev/null
+++ b/dan-flashes-complicated-shirt-generator/src/style.scss
@@ -0,0 +1,224 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap");
+
+body {
+  font-family: "Playfair Display", serif;
+  background: #fff;
+  height: 100vh;
+  --cellcount: 10;
+  overflow: hidden;
+  cursor: pointer;
+  * {
+    cursor: pointer;
+  }
+  transform: scale(0.75);
+  @media (max-width: 1000px) {
+    transform: scale(0.5);
+  }
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    width: 900px;
+    height: 900px;
+    left: calc(50% - 450px);
+    top: calc(50% - 450px);
+    box-shadow: inset 0 0 0 25px #f0e6d2, inset 0 0 0 26px #fff,
+      0 40px 60px -40px rgba(0, 0, 0, 0.25);
+    background: radial-gradient(
+      circle at center,
+      lighten(#f0e6d2, 5%),
+      #f0e6d2 90%
+    );
+  }
+  &:after {
+    background: transparent;
+    z-index: 999;
+    box-shadow: 0 40px 60px -40px rgba(0, 0, 0, 0.25), 0 0 0 125vw #fff;
+  }
+  h1 {
+    position: absolute;
+    z-index: 1;
+    color: #222;
+    font-weight: 900;
+    font-size: 40px;
+    display: inline-block;
+    left: calc(50% - 250px);
+    top: calc(50% - 350px);
+    transform: translate(-50%, -50%);
+    transition: 1s ease-in-out;
+    transition-delay: 0.5s;
+    span {
+      font-size: 20px;
+      color: #666;
+      display: block;
+      margin-top: 0.15rem;
+    }
+  }
+  > span {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #222;
+    font-size: 12px;
+    transition: opacity 0.5s ease-in-out;
+    opacity: 0;
+    &:before {
+      content: "(complicated shirts take time)";
+      position: absolute;
+      left: 50%;
+      top: 125%;
+      transform: translateX(-50%);
+      width: 300px;
+      text-align: center;
+      opacity: 0.5;
+    }
+    &:after {
+      content: ".....";
+      animation: loading 2s linear infinite;
+      position: absolute;
+      left: 100%;
+      clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
+      @keyframes loading {
+        100% {
+          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+        }
+      }
+    }
+  }
+  > strong {
+    position: absolute;
+    z-index: 10;
+    top: calc(50% + 400px);
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 1;
+    transition: 0.5s ease-in-out;
+    transition-delay: 2s;
+  }
+  &.loading {
+    > strong {
+      opacity: 0;
+      transition-delay: 0s;
+    }
+    > span {
+      opacity: 1;
+    }
+    canvas {
+      transform: translateY(clamp(800px, 100vh, 90000px));
+    }
+  }
+  canvas {
+    z-index: 2;
+    position: relative;
+    transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.075);
+    filter:contrast(calc(1 + (var(--contrast)/7)));
+  }
+  #pattern {
+    overflow: hidden;
+    position: absolute;
+    width: 1200px;
+    height: 1200px;
+    left: -2400px;
+    top: 0;
+    z-index: 999;
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-template-rows: repeat(8, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    z-index: -1;
+    &:before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 10;
+      background: linear-gradient(
+          to left,
+          var(--color1),
+          transparent,
+          var(--color1)
+        ),
+        linear-gradient(to bottom, var(--color2), transparent, var(--color2));
+    }
+    .cell {
+      background: transparent;
+      position: relative;
+      z-index: -1;
+      background: radial-gradient(
+          circle at center,
+          var(--color1) 15px,
+          transparent 5px
+        ),
+        linear-gradient(
+          var(--rotate2),
+          transparent 50%,
+          var(--color0) 50%,
+          var(--color4) 100%
+        ),
+        linear-gradient(var(--rotate2), var(--color2), transparent);
+      background-position: calc(var(--rotate) * 0.5px)
+          calc(var(--rotate) * 0.5px),
+        calc(var(--rotate) * 2px) calc(var(--rotate) * 2px);
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+        background: linear-gradient(45deg, var(--color6), var(--color7));
+        transform: scale(calc(1 - (var(--scale) / 4)));
+      }
+      &:after {
+        background: radial-gradient(
+          circle at bottom,
+          transparent 25%,
+          var(--color8) 25%,
+          var(--color8) 35%,
+          transparent 35%
+        );
+        border-radius: 0px;
+        transform: scale(calc(var(--scale) / 10)) rotate(var(--rotate2));
+      }
+      svg {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        z-index: 2;
+        background: radial-gradient(
+              circle at center,
+              var(--color1) 2px,
+              transparent 2px,
+              transparent
+            )
+            50% 50% / calc(var(--distance2) * 1px) calc(var(--distance2) * 1px),
+          repeating-linear-gradient(
+            var(--rotate2),
+            var(--color5) 1px,
+            transparent 1px,
+            transparent calc(var(--distance) * 1px),
+            var(--color5) calc(var(--distance) * 1px),
+            var(--color5) calc((var(--distance) * 1px) + 1px)
+          ),
+          repeating-linear-gradient(
+            calc(var(--rotate2) * 90),
+            var(--color5) 1px,
+            transparent 1px,
+            transparent 5px,
+            var(--color5) 5px,
+            var(--color5) 6px
+          );
+        path {
+          stroke-width: var(--stroke);
+          stroke: var(--color3);
+        }
+      }
+    }
+  }
+}
diff --git a/day-and-night-toggle/README.markdown b/day-and-night-toggle/README.markdown
new file mode 100644
index 0000000..c19b6ca
--- /dev/null
+++ b/day-and-night-toggle/README.markdown
@@ -0,0 +1,4 @@
+# Day And Night Toggle
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/chrisgannon/pen/eezVOJ](https://codepen.io/chrisgannon/pen/eezVOJ).
+
+ I'm having a break from food-based toggles!
\ No newline at end of file
diff --git a/day-and-night-toggle/dist/index.html b/day-and-night-toggle/dist/index.html
new file mode 100644
index 0000000..3b323a4
--- /dev/null
+++ b/day-and-night-toggle/dist/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Day And Night Toggle</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
+  <title>Day And Night Toggle</title>
+ <description>A user interface toggle with two options - a sun with a cloud that animates to a crescent moon with stars</description>
+  <defs>
+      <filter id="shadow" x="-100%" y="-100%" width="250%" height="250%">
+        <feGaussianBlur stdDeviation="4" result="coloredBlur" />
+        <feOffset dx="0" dy="0" result="offsetblur"></feOffset>
+        <feFlood id="glowAlpha" flood-color="#000" flood-opacity="0.07"></feFlood>
+        <feComposite in2="offsetblur" operator="in"></feComposite>
+        <feMerge>
+          <feMergeNode/>          
+          <feMergeNode in="SourceGraphic"></feMergeNode>
+        </feMerge>
+      </filter>   
+  	<mask id="moonMask">
+<rect id="outlineFill"  x="225" y="215" width="350" height="170" rx="86" ry="86" fill="#FFF" stroke="#000" stroke-width="0"/>
+<circle class="moonMask" cx="487" cy="300" r="66" fill="#06070B"/>
+  	</mask>
+   <clipPath id="outlineMask">
+    <use xlink:href="#outlineFill"/>
+   </clipPath>
+   
+<path id="cloud" d="M20.67,42.52h39c22,0,18-16.52,11.19-17.51,1.93-7.5-1.94-25-23.19-25s-24,18-24,18S12.75,13.2,5,18.83C-3.8,25.15-2.33,42.52,20.67,42.52Z"/>   
+  </defs>
+  
+    <g class="whole" >
+      
+      <rect class="outline" x="220" y="210" width="360" height="180" rx="90" ry="90" fill="#85E8FE" stroke="#FCFDFE" stroke-width="10"/>
+      <g class="starGroup" fill="#FFF" clip-path="url(#outlineMask)">
+        <polygon points="405 248.25 406.58 254.42 412.75 256 406.58 257.58 405 263.75 403.42 257.58 397.25 256 403.42 254.42 405 248.25"/>
+        <path d="M427.33,301.9a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
+        <path d="M402.59,367.21a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
+        <polygon points="447 325.5 450.17 337.83 462.5 341 450.17 344.17 447 356.5 443.83 344.17 431.5 341 443.83 337.83 447 325.5"/>
+        <path d="M464,241.53a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
+        <polygon points="496 274.25 497.58 280.42 503.75 282 497.58 283.58 496 289.75 494.42 283.58 488.25 282 494.42 280.42 496 274.25"/>
+        <path d="M503.53,351.38a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
+        <path d="M537.18,249.45a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
+        <path d="M553,322.68a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
+      </g>     
+      <circle class="sun" cx="486" cy="300" r="66" fill="#FEC100"/>
+<g mask="url(#moonMask)">
+      <circle class="moon" cx="403" cy="300" r="66" fill="#FFF" opacity="0"/>
+  </g>
+     
+      <g class="planeGroup" fill="#FFF" clip-path="url(#outlineMask)" opacity="1">
+      
+        <path class="plane" d="M611.12,262.15l-7.16,0-6.48-5.43-1.06.58,1.93,4.88-3.67.06-3.48-3.37-.78.36,1.26,3.05h-.58a27.07,27.07,0,0,0,4.6,2.24s8.57,0,12.37,0H611c.65,0,2.19,0,2.19-1.25C613.19,262.26,612.05,262.15,611.12,262.15Z"  fill="#fff"/>
+        <line class="contrail" x1="590.17" y1="264" x2="246.51" y2="264" fill="none" stroke="#fff" stroke-width="1"/>
+             
+     </g>
+      <g class="cloudGroup" fill="#FFF" clip-path="url(#outlineMask)">
+        <g class="cloud" filter="url(#shadow)">
+          <rect x="515.79" y="314.92" width="47.15" height="10.37" rx="5.19" ry="5.19"/>
+          <circle cx="521.45" cy="313.98" r="11.32"/>
+          <circle cx="540.84" cy="305.91" r="15.61"/>
+          <circle cx="556.82" cy="316.34" r="8.96"/>
+        </g>       
+        <g class="cloud"  filter="url(#shadow)">
+         <rect x="397.85" y="349.02" width="92.34" height="10.37" rx="5.19" ry="5.19" transform="translate(888.03 708.41) rotate(180)"/>
+          <circle cx="484.53" cy="348.08" r="11.32"/>
+          <circle cx="432.65" cy="332.46" r="24.66"/>
+          <circle cx="464.35" cy="338.11" r="17.51"/>
+          <circle cx="404.21" cy="348.19" r="11.32"/>
+        </g>
+     </g>
+     
+    </g>
+   <rect class="hit" x="220" y="210" width="360" height="180" rx="90" ry="90" fill="transparent" stroke="none" stroke-width="0"/>
+ 
+</svg>
+<!-- partial -->
+  <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/day-and-night-toggle/dist/script.js b/day-and-night-toggle/dist/script.js
new file mode 100644
index 0000000..6e715eb
--- /dev/null
+++ b/day-and-night-toggle/dist/script.js
@@ -0,0 +1,118 @@
+var select = function(s) {
+    return document.querySelector(s);
+  },
+  selectAll = function(s) {
+    return document.querySelectorAll(s);
+  },
+    hit = select('.hit'),
+    allStars = selectAll('.starGroup *'),
+    allClouds = selectAll('.cloud'),
+    allCloudPuffs = selectAll('.cloud circle')
+    
+  
+
+TweenMax.set('svg', {
+  visibility: 'visible'
+})
+TweenMax.set(allStars, {
+ transformOrigin:'50% 50%'
+})
+TweenLite.defaultEase = Elastic.easeOut.config(0.58,0.8);
+var tl = new TimelineMax({paused:true});
+tl.staggerTo(['.sun', '.moonMask', '.moon'], 1, {
+ cycle:{
+  attr:[{cx:'-=140', cy:'-=20'}, {cx:'-=140', cy:'-=20'}, {cx:'-=90',  cy:'-=0'}]
+ }
+},0)
+
+.staggerTo(['.moon', '.sun'], 1, {
+ cycle:{
+  alpha:[1, 0]
+ }
+},0,'-=1')
+.to('body', 1, {
+ //backgroundColor:'#2C3E7B'
+},'-=1')
+.to('.outline', 1, {
+ stroke:'#6172AD',
+ fill:'#45568D'
+},'-=1')
+
+.staggerFrom(allStars, 0.9, {
+ cycle:{
+  x:[-20, 30, 40, -30, 60, -40, 80, 90, 100, 110, 120]
+ },
+ alpha:0
+},0.005,'-=1')
+
+.staggerTo(allClouds,1, {
+ cycle:{
+  x:[40, 20]
+ },
+ alpha:0
+},0,'-=1')
+
+.addPause()
+
+
+.staggerTo(['.sun', '.moonMask', '.moon'], 1, {
+ cycle:{
+  attr:[{cx:'+=140', cy:'+=20'}, {cx:'+=140', cy:'+=20'}, {cx:'+=90',  cy:'+=0'}]
+ }
+},0)
+.staggerTo(['.moon', '.sun'], 1, {
+ cycle:{
+  alpha:[0, 1]
+ }
+},0,'-=1')
+.to('body', 1, {
+ //backgroundColor:'#26D6FE',
+ ease:Linear.easeNone
+},'-=1')
+.to('.outline', 1, {
+ stroke:'#FCFDFE',
+ fill:'#85E8FE'
+},'-=1')
+.staggerTo(allStars, 1, {
+ alpha:0
+},0,'-=1')
+.staggerFromTo(allClouds, 0.6, {
+ cycle:{
+  y:[120, 160],
+  x:[0]
+ }
+},
+{ cycle:{
+  y:[0],
+ x:[0]
+ },
+ alpha:1,
+ immediateRender:false
+},0.06,'-=1')
+
+
+.from(['.plane', '.contrail'], 0.7, {
+ x:-400,
+ ease:Linear.easeNone
+},'-=1')
+
+.to('.contrail',0.5, {
+ alpha:0,
+ ease:Sine.easeOut
+})
+
+
+
+//ScrubGSAPTimeline(tl);
+
+function clickToggle(e){
+if(tl.time() > 0 && tl.time() < tl.duration()){
+ tl.play()
+} else{
+ tl.play(0)
+}
+}
+
+tl.timeScale(1);
+hit.onclick = clickToggle;
+TweenMax.globalTimeScale(1.3);
\ No newline at end of file
diff --git a/day-and-night-toggle/dist/style.css b/day-and-night-toggle/dist/style.css
new file mode 100644
index 0000000..e52c27c
--- /dev/null
+++ b/day-and-night-toggle/dist/style.css
@@ -0,0 +1,26 @@
+body {
+  background-color:#f3f3f3;
+  overflow: hidden;
+  text-align:center;
+}
+
+body,
+html {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+
+svg{
+  width:100%;
+  height:100%;
+  visibility:hidden;
+}
+
+.hit{
+ cursor:pointer;
+ -webkit-tap-highlight-color:transparent;
+}
+
diff --git a/day-and-night-toggle/license.txt b/day-and-night-toggle/license.txt
new file mode 100644
index 0000000..a720ac0
--- /dev/null
+++ b/day-and-night-toggle/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Chris Gannon (https://codepen.io/chrisgannon/pen/eezVOJ)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/day-and-night-toggle/src/index.html b/day-and-night-toggle/src/index.html
new file mode 100644
index 0000000..481a508
--- /dev/null
+++ b/day-and-night-toggle/src/index.html
@@ -0,0 +1,70 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
+  <title>Day And Night Toggle</title>
+ <description>A user interface toggle with two options - a sun with a cloud that animates to a crescent moon with stars</description>
+  <defs>
+      <filter id="shadow" x="-100%" y="-100%" width="250%" height="250%">
+        <feGaussianBlur stdDeviation="4" result="coloredBlur" />
+        <feOffset dx="0" dy="0" result="offsetblur"></feOffset>
+        <feFlood id="glowAlpha" flood-color="#000" flood-opacity="0.07"></feFlood>
+        <feComposite in2="offsetblur" operator="in"></feComposite>
+        <feMerge>
+          <feMergeNode/>          
+          <feMergeNode in="SourceGraphic"></feMergeNode>
+        </feMerge>
+      </filter>   
+  	<mask id="moonMask">
+<rect id="outlineFill"  x="225" y="215" width="350" height="170" rx="86" ry="86" fill="#FFF" stroke="#000" stroke-width="0"/>
+<circle class="moonMask" cx="487" cy="300" r="66" fill="#06070B"/>
+  	</mask>
+   <clipPath id="outlineMask">
+    <use xlink:href="#outlineFill"/>
+   </clipPath>
+   
+<path id="cloud" d="M20.67,42.52h39c22,0,18-16.52,11.19-17.51,1.93-7.5-1.94-25-23.19-25s-24,18-24,18S12.75,13.2,5,18.83C-3.8,25.15-2.33,42.52,20.67,42.52Z"/>   
+  </defs>
+  
+    <g class="whole" >
+      
+      <rect class="outline" x="220" y="210" width="360" height="180" rx="90" ry="90" fill="#85E8FE" stroke="#FCFDFE" stroke-width="10"/>
+      <g class="starGroup" fill="#FFF" clip-path="url(#outlineMask)">
+        <polygon points="405 248.25 406.58 254.42 412.75 256 406.58 257.58 405 263.75 403.42 257.58 397.25 256 403.42 254.42 405 248.25"/>
+        <path d="M427.33,301.9a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
+        <path d="M402.59,367.21a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
+        <polygon points="447 325.5 450.17 337.83 462.5 341 450.17 344.17 447 356.5 443.83 344.17 431.5 341 443.83 337.83 447 325.5"/>
+        <path d="M464,241.53a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
+        <polygon points="496 274.25 497.58 280.42 503.75 282 497.58 283.58 496 289.75 494.42 283.58 488.25 282 494.42 280.42 496 274.25"/>
+        <path d="M503.53,351.38a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
+        <path d="M537.18,249.45a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
+        <path d="M553,322.68a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
+      </g>     
+      <circle class="sun" cx="486" cy="300" r="66" fill="#FEC100"/>
+<g mask="url(#moonMask)">
+      <circle class="moon" cx="403" cy="300" r="66" fill="#FFF" opacity="0"/>
+  </g>
+     
+      <g class="planeGroup" fill="#FFF" clip-path="url(#outlineMask)" opacity="1">
+      
+        <path class="plane" d="M611.12,262.15l-7.16,0-6.48-5.43-1.06.58,1.93,4.88-3.67.06-3.48-3.37-.78.36,1.26,3.05h-.58a27.07,27.07,0,0,0,4.6,2.24s8.57,0,12.37,0H611c.65,0,2.19,0,2.19-1.25C613.19,262.26,612.05,262.15,611.12,262.15Z"  fill="#fff"/>
+        <line class="contrail" x1="590.17" y1="264" x2="246.51" y2="264" fill="none" stroke="#fff" stroke-width="1"/>
+             
+     </g>
+      <g class="cloudGroup" fill="#FFF" clip-path="url(#outlineMask)">
+        <g class="cloud" filter="url(#shadow)">
+          <rect x="515.79" y="314.92" width="47.15" height="10.37" rx="5.19" ry="5.19"/>
+          <circle cx="521.45" cy="313.98" r="11.32"/>
+          <circle cx="540.84" cy="305.91" r="15.61"/>
+          <circle cx="556.82" cy="316.34" r="8.96"/>
+        </g>       
+        <g class="cloud"  filter="url(#shadow)">
+         <rect x="397.85" y="349.02" width="92.34" height="10.37" rx="5.19" ry="5.19" transform="translate(888.03 708.41) rotate(180)"/>
+          <circle cx="484.53" cy="348.08" r="11.32"/>
+          <circle cx="432.65" cy="332.46" r="24.66"/>
+          <circle cx="464.35" cy="338.11" r="17.51"/>
+          <circle cx="404.21" cy="348.19" r="11.32"/>
+        </g>
+     </g>
+     
+    </g>
+   <rect class="hit" x="220" y="210" width="360" height="180" rx="90" ry="90" fill="transparent" stroke="none" stroke-width="0"/>
+ 
+</svg>
diff --git a/day-and-night-toggle/src/script.js b/day-and-night-toggle/src/script.js
new file mode 100644
index 0000000..6e715eb
--- /dev/null
+++ b/day-and-night-toggle/src/script.js
@@ -0,0 +1,118 @@
+var select = function(s) {
+    return document.querySelector(s);
+  },
+  selectAll = function(s) {
+    return document.querySelectorAll(s);
+  },
+    hit = select('.hit'),
+    allStars = selectAll('.starGroup *'),
+    allClouds = selectAll('.cloud'),
+    allCloudPuffs = selectAll('.cloud circle')
+    
+  
+
+TweenMax.set('svg', {
+  visibility: 'visible'
+})
+TweenMax.set(allStars, {
+ transformOrigin:'50% 50%'
+})
+TweenLite.defaultEase = Elastic.easeOut.config(0.58,0.8);
+var tl = new TimelineMax({paused:true});
+tl.staggerTo(['.sun', '.moonMask', '.moon'], 1, {
+ cycle:{
+  attr:[{cx:'-=140', cy:'-=20'}, {cx:'-=140', cy:'-=20'}, {cx:'-=90',  cy:'-=0'}]
+ }
+},0)
+
+.staggerTo(['.moon', '.sun'], 1, {
+ cycle:{
+  alpha:[1, 0]
+ }
+},0,'-=1')
+.to('body', 1, {
+ //backgroundColor:'#2C3E7B'
+},'-=1')
+.to('.outline', 1, {
+ stroke:'#6172AD',
+ fill:'#45568D'
+},'-=1')
+
+.staggerFrom(allStars, 0.9, {
+ cycle:{
+  x:[-20, 30, 40, -30, 60, -40, 80, 90, 100, 110, 120]
+ },
+ alpha:0
+},0.005,'-=1')
+
+.staggerTo(allClouds,1, {
+ cycle:{
+  x:[40, 20]
+ },
+ alpha:0
+},0,'-=1')
+
+.addPause()
+
+
+.staggerTo(['.sun', '.moonMask', '.moon'], 1, {
+ cycle:{
+  attr:[{cx:'+=140', cy:'+=20'}, {cx:'+=140', cy:'+=20'}, {cx:'+=90',  cy:'+=0'}]
+ }
+},0)
+.staggerTo(['.moon', '.sun'], 1, {
+ cycle:{
+  alpha:[0, 1]
+ }
+},0,'-=1')
+.to('body', 1, {
+ //backgroundColor:'#26D6FE',
+ ease:Linear.easeNone
+},'-=1')
+.to('.outline', 1, {
+ stroke:'#FCFDFE',
+ fill:'#85E8FE'
+},'-=1')
+.staggerTo(allStars, 1, {
+ alpha:0
+},0,'-=1')
+.staggerFromTo(allClouds, 0.6, {
+ cycle:{
+  y:[120, 160],
+  x:[0]
+ }
+},
+{ cycle:{
+  y:[0],
+ x:[0]
+ },
+ alpha:1,
+ immediateRender:false
+},0.06,'-=1')
+
+
+.from(['.plane', '.contrail'], 0.7, {
+ x:-400,
+ ease:Linear.easeNone
+},'-=1')
+
+.to('.contrail',0.5, {
+ alpha:0,
+ ease:Sine.easeOut
+})
+
+
+
+//ScrubGSAPTimeline(tl);
+
+function clickToggle(e){
+if(tl.time() > 0 && tl.time() < tl.duration()){
+ tl.play()
+} else{
+ tl.play(0)
+}
+}
+
+tl.timeScale(1);
+hit.onclick = clickToggle;
+TweenMax.globalTimeScale(1.3);
\ No newline at end of file
diff --git a/day-and-night-toggle/src/style.css b/day-and-night-toggle/src/style.css
new file mode 100644
index 0000000..e52c27c
--- /dev/null
+++ b/day-and-night-toggle/src/style.css
@@ -0,0 +1,26 @@
+body {
+  background-color:#f3f3f3;
+  overflow: hidden;
+  text-align:center;
+}
+
+body,
+html {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+
+svg{
+  width:100%;
+  height:100%;
+  visibility:hidden;
+}
+
+.hit{
+ cursor:pointer;
+ -webkit-tap-highlight-color:transparent;
+}
+
diff --git a/daylight-cycles-of-earth/README.markdown b/daylight-cycles-of-earth/README.markdown
new file mode 100644
index 0000000..005c235
--- /dev/null
+++ b/daylight-cycles-of-earth/README.markdown
@@ -0,0 +1,5 @@
+# Daylight Cycles of Earth
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/niallains/pen/QWqNjOM](https://codepen.io/niallains/pen/QWqNjOM).
+
+I'm due to get out of covid isolation on the winter solstice, so I've spent my time inside making this demonstration of how daylights hours change over the course of the year
diff --git a/daylight-cycles-of-earth/dist/index.html b/daylight-cycles-of-earth/dist/index.html
new file mode 100644
index 0000000..b74f8a9
--- /dev/null
+++ b/daylight-cycles-of-earth/dist/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Daylight Cycles of Earth</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>
+  <span>
+    Daylight Cycles
+    <i>of</i>
+    <b>Earth</b>
+  </span>
+</h1>
+  
+<div class="earth-container">
+  <div
+    class="globe"
+    onmouseover="isHover = true"
+    onmousemove="hoverOrbit(event)"
+    onmouseout="isHover = false"
+  >
+    <div
+      id="northLabel"
+      class="day-label north-label"
+    ></div>
+    <div
+      id="southLabel"
+      class="day-label south-label"
+    ></div>
+  </div>
+  <div class="shadow">
+    <span
+      id="label"
+      class="label"
+    ></span>
+  </div>
+</div>
+
+<div
+  class="orbit-container"
+  onmouseover="isHover = true"
+  onmousemove="hoverOrbit(event)"
+  onmouseout="isHover = false"
+>
+  <div class="sun"></div>
+  <div class="earth"></div>
+  <div class="labels">
+    <div>
+      <span> Solstice </span>
+      <span> Equinox </span>
+      <span> Solstice </span>
+    </div>
+    <div>
+      <span> Dec 21<small>st</small> </span>
+      <span>
+        Mar 20<small>th</small>
+        <br/>
+        Sep 23<small>rd</small>
+      </span>
+      <span> Jun 21<small>st</small> </span>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/daylight-cycles-of-earth/dist/script.js b/daylight-cycles-of-earth/dist/script.js
new file mode 100644
index 0000000..c471431
--- /dev/null
+++ b/daylight-cycles-of-earth/dist/script.js
@@ -0,0 +1,51 @@
+let
+  isHover = false,
+  frame = 0;
+
+const
+  MAX_ANG = 23.4,
+  MONTHS = ['December', 'January', 'Feburary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November'];
+
+const
+  label = document.getElementById('label'),
+  northLabel = document.getElementById('northLabel'),
+  southLabel = document.getElementById('southLabel'),
+  angleCss = document.createElement('style');
+document.head.prepend(angleCss);
+
+function setAngle(angValue) {
+  let ang = easeAng(angValue);
+  angleCss.innerText =
+    `body {
+      --ang: ${ang};
+      --ang-full: ${angValue};
+      --ang-z: ${10 - Math.floor((angValue) * 10)};
+    }`;
+  
+  label.innerHTML =
+    Math.abs(ang * MAX_ANG).toFixed(1) +
+    '&deg<br/>' +
+    MONTHS[Math.floor(((angValue * 12) + 0.7) % 12)];
+  
+  const hrs = Math.round(7 + (5 * (1 + ang)));
+  northLabel.innerText = hrs + ' hrs';
+  southLabel.innerText = (24 - hrs) + ' hrs';
+}
+
+function easeAng(angValue) {
+  let eased = (angValue > 0.5 ? 1 - angValue : angValue) * 2;
+  eased = -0.5 * (Math.cos(Math.PI * eased) - 1);
+  return (2 * eased) - 1;
+}
+
+function hoverOrbit(e) {
+  frame = 125 * (e.offsetX / e.target.offsetWidth);
+}
+
+setInterval(() => {
+  if (!isHover) {
+    frame += 1;
+    frame %= 250;
+  }
+  setAngle(frame / 250);
+}, 50);
\ No newline at end of file
diff --git a/daylight-cycles-of-earth/dist/style.css b/daylight-cycles-of-earth/dist/style.css
new file mode 100644
index 0000000..a0f5185
--- /dev/null
+++ b/daylight-cycles-of-earth/dist/style.css
@@ -0,0 +1,263 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-size: 16px;
+  font-family: "Times New Roman";
+  font-weight: 100;
+  font-style: italic;
+  background: #222;
+}
+
+h1 {
+  margin-top: 5vh;
+  color: #fff;
+  text-align: center;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 100;
+  letter-spacing: 2px;
+}
+h1 i {
+  font-size: 14px;
+  vertical-align: 35%;
+}
+h1 b {
+  font-family: Helvetica;
+}
+h1 span {
+  display: inline-block;
+  border-bottom: 1px solid #fff8;
+  height: 33px;
+  padding: 0 6px;
+}
+
+.earth-container {
+  position: relative;
+  margin: 80px 0 120px calc(50% - 190px);
+  height: 380px;
+  background: linear-gradient(90deg, #222 190px, #0000 190px), linear-gradient(#0000 0, #111 0.5%, #111 98.5%, #0000 100%);
+  cursor: pointer;
+}
+@keyframes rotate {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 950px 0;
+  }
+}
+.earth-container .globe {
+  position: absolute;
+  width: 380px;
+  height: 100%;
+  border-radius: 100%;
+  background: url("https://upload.wikimedia.org/wikipedia/commons/6/69/Peters_projection%2C_white_%26_grey.png") 0 0/250% 100%, #008;
+  animation: rotate 40s infinite linear;
+  transform: rotate(calc(-23.4deg * var(--ang)));
+}
+.earth-container .globe:before, .earth-container .globe:after {
+  content: "";
+  position: absolute;
+  inset: 100% 50% -80px;
+  width: 1px;
+  border-left: 2px solid #fff8;
+}
+.earth-container .globe:after {
+  inset: -40px 50% 100%;
+}
+.earth-container .day-label {
+  position: absolute;
+  left: 0;
+  z-index: 10;
+  width: 50px;
+  text-align: right;
+  color: #fff;
+  pointer-events: none;
+}
+.earth-container .day-label:after {
+  content: "";
+  position: absolute;
+  inset: 50% -258.4px 50% 145%;
+  border-bottom: 2px dotted #fff;
+  border-top: 2px dotted #383977;
+  z-index: 10;
+}
+.earth-container .day-label.north-label {
+  top: 8%;
+}
+.earth-container .day-label.south-label {
+  bottom: 10%;
+}
+.earth-container .shadow {
+  position: absolute;
+  width: 380px;
+  height: 100%;
+  z-index: 20;
+  pointer-events: none;
+}
+.earth-container .shadow:before {
+  content: "";
+  position: absolute;
+  inset: -200px 0;
+  clip-path: circle(191px);
+  box-shadow: inset -180px 0 20px 0 #000d;
+  border-radius: 100%;
+}
+.earth-container .shadow:after {
+  content: "";
+  position: absolute;
+  inset: 100% 50% -80px;
+  width: 1px;
+  border-left: 2px solid #fff8;
+}
+.earth-container .shadow .label {
+  position: absolute;
+  height: 16px;
+  width: fit-content;
+  bottom: -55px;
+  left: calc(50% + 8px);
+  color: #fff;
+}
+.earth-container .shadow .label:before {
+  content: "";
+  position: absolute;
+  bottom: 22px;
+  left: -237.5px;
+  padding: 228px;
+  border: 2px dotted #fff8;
+  border-radius: 100%;
+  clip-path: circle(calc( 46.8px * max(var(--ang), -1 * var(--ang)) ) at calc( 50% + ( 46.8px * var(--ang) ) ) 100%);
+}
+
+.orbit-container {
+  position: relative;
+  width: 650px;
+  margin: 0 auto;
+  max-width: calc(100vw - 80px);
+  cursor: pointer;
+}
+.orbit-container:before, .orbit-container:after {
+  content: "";
+  position: absolute;
+  inset: 37px 0 auto 0;
+  height: 8px;
+  border-radius: 100%;
+  border: 2px dashed #fff8;
+}
+.orbit-container:before {
+  border-bottom-width: 0;
+  z-index: -10;
+}
+.orbit-container:after {
+  border-top-width: 0;
+  z-index: 5;
+}
+.orbit-container .earth {
+  position: absolute;
+  top: 10px;
+  left: calc((var(--ang) * 50%) + 50% - 30px);
+  z-index: var(--ang-z);
+  border-radius: 100%;
+  padding: 30px;
+  animation: earthBg linear infinite;
+  animation-duration: 1s;
+  animation-delay: calc((1s * var(--ang-full)) - 1.75s);
+  animation-play-state: paused;
+  pointer-events: none;
+}
+@keyframes earthBg {
+  0% {
+    background: linear-gradient(90deg, #8686bd 50%, #393877 50%);
+  }
+  49.9% {
+    background: linear-gradient(90deg, #8686bd 50%, #393877 50%);
+  }
+  50% {
+    background: linear-gradient(-90deg, #8686bd 50%, #393877 50%);
+  }
+  100% {
+    background: linear-gradient(-90deg, #8686bd 50%, #393877 50%);
+  }
+}
+@keyframes earthFg {
+  0% {
+    transform: scale(1, 1);
+    background: #8686bd;
+  }
+  24.9% {
+    transform: scale(0, 1);
+    background: #8686bd;
+  }
+  25% {
+    transform: scale(0, 1);
+    background: #393877;
+  }
+  49.9% {
+    transform: scale(-1, 1);
+    background: #393877;
+  }
+  50% {
+    transform: scale(1, 1);
+    background: #393877;
+  }
+  74.9% {
+    transform: scale(0, 1);
+    background: #393877;
+  }
+  75% {
+    transform: scale(0, 1);
+    background: #8686bd;
+  }
+  100% {
+    transform: scale(-1, 1);
+    background: #8686bd;
+  }
+}
+.orbit-container .earth:before {
+  content: "";
+  position: absolute;
+  inset: -15px 50%;
+  width: 1px;
+  transform: rotate(-23.4deg);
+  border-left: 1px solid #fff8;
+  z-index: 20;
+}
+.orbit-container .earth:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  animation: earthFg linear infinite;
+  animation-duration: inherit;
+  animation-delay: inherit;
+  animation-play-state: inherit;
+}
+.orbit-container .sun {
+  position: absolute;
+  top: 0;
+  z-index: 5;
+  left: calc(50% - 40px);
+  border-radius: 100%;
+  background-color: #dbae2d;
+  padding: 40px;
+  pointer-events: none;
+}
+.orbit-container .labels {
+  padding: 120px 0 40px;
+}
+.orbit-container .labels div {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.orbit-container .labels div:first-child span {
+  display: inline-block;
+  font-style: normal;
+  border-bottom: 1px solid #fff8;
+  padding: 0 3px;
+  height: 16px;
+}
+.orbit-container .labels div:last-child {
+  padding: 4px;
+  font-size: 14px;
+}
\ No newline at end of file
diff --git a/daylight-cycles-of-earth/license.txt b/daylight-cycles-of-earth/license.txt
new file mode 100644
index 0000000..ff73765
--- /dev/null
+++ b/daylight-cycles-of-earth/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Niall (https://codepen.io/niallains/pen/QWqNjOM)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/daylight-cycles-of-earth/src/index.html b/daylight-cycles-of-earth/src/index.html
new file mode 100644
index 0000000..b4ee14f
--- /dev/null
+++ b/daylight-cycles-of-earth/src/index.html
@@ -0,0 +1,58 @@
+
+<h1>
+  <span>
+    Daylight Cycles
+    <i>of</i>
+    <b>Earth</b>
+  </span>
+</h1>
+  
+<div class="earth-container">
+  <div
+    class="globe"
+    onmouseover="isHover = true"
+    onmousemove="hoverOrbit(event)"
+    onmouseout="isHover = false"
+  >
+    <div
+      id="northLabel"
+      class="day-label north-label"
+    ></div>
+    <div
+      id="southLabel"
+      class="day-label south-label"
+    ></div>
+  </div>
+  <div class="shadow">
+    <span
+      id="label"
+      class="label"
+    ></span>
+  </div>
+</div>
+
+<div
+  class="orbit-container"
+  onmouseover="isHover = true"
+  onmousemove="hoverOrbit(event)"
+  onmouseout="isHover = false"
+>
+  <div class="sun"></div>
+  <div class="earth"></div>
+  <div class="labels">
+    <div>
+      <span> Solstice </span>
+      <span> Equinox </span>
+      <span> Solstice </span>
+    </div>
+    <div>
+      <span> Dec 21<small>st</small> </span>
+      <span>
+        Mar 20<small>th</small>
+        <br/>
+        Sep 23<small>rd</small>
+      </span>
+      <span> Jun 21<small>st</small> </span>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/daylight-cycles-of-earth/src/script.js b/daylight-cycles-of-earth/src/script.js
new file mode 100644
index 0000000..c471431
--- /dev/null
+++ b/daylight-cycles-of-earth/src/script.js
@@ -0,0 +1,51 @@
+let
+  isHover = false,
+  frame = 0;
+
+const
+  MAX_ANG = 23.4,
+  MONTHS = ['December', 'January', 'Feburary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November'];
+
+const
+  label = document.getElementById('label'),
+  northLabel = document.getElementById('northLabel'),
+  southLabel = document.getElementById('southLabel'),
+  angleCss = document.createElement('style');
+document.head.prepend(angleCss);
+
+function setAngle(angValue) {
+  let ang = easeAng(angValue);
+  angleCss.innerText =
+    `body {
+      --ang: ${ang};
+      --ang-full: ${angValue};
+      --ang-z: ${10 - Math.floor((angValue) * 10)};
+    }`;
+  
+  label.innerHTML =
+    Math.abs(ang * MAX_ANG).toFixed(1) +
+    '&deg<br/>' +
+    MONTHS[Math.floor(((angValue * 12) + 0.7) % 12)];
+  
+  const hrs = Math.round(7 + (5 * (1 + ang)));
+  northLabel.innerText = hrs + ' hrs';
+  southLabel.innerText = (24 - hrs) + ' hrs';
+}
+
+function easeAng(angValue) {
+  let eased = (angValue > 0.5 ? 1 - angValue : angValue) * 2;
+  eased = -0.5 * (Math.cos(Math.PI * eased) - 1);
+  return (2 * eased) - 1;
+}
+
+function hoverOrbit(e) {
+  frame = 125 * (e.offsetX / e.target.offsetWidth);
+}
+
+setInterval(() => {
+  if (!isHover) {
+    frame += 1;
+    frame %= 250;
+  }
+  setAngle(frame / 250);
+}, 50);
\ No newline at end of file
diff --git a/daylight-cycles-of-earth/src/style.scss b/daylight-cycles-of-earth/src/style.scss
new file mode 100644
index 0000000..9fe6372
--- /dev/null
+++ b/daylight-cycles-of-earth/src/style.scss
@@ -0,0 +1,312 @@
+$angMax: 23.4;
+
+body {
+  margin: 0;
+  color: #fff;
+  font-size: 16px;
+  font-family: 'Times New Roman';
+  font-weight: 100;
+  font-style: italic;
+  background: #222;
+}
+
+h1 {
+  margin-top: 5vh;
+  color: #fff;
+  text-align: center;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 100;
+  letter-spacing: 2px;
+  
+  i {
+    font-size: 14px;
+    vertical-align: 35%;
+  }
+  
+  b {
+    font-family: Helvetica;
+  }
+  
+  span {
+    display: inline-block;
+    border-bottom: 1px solid #fff8;
+    height: 33px;
+    padding: 0 6px;
+  }
+}
+
+.earth-container {
+  $earthWidth: 380px;
+  @keyframes rotate {
+    from {
+      background-position: 0 0;
+    }
+    to {
+      background-position: #{$earthWidth * 2.5} 0;
+    }
+  }
+  
+  position: relative;
+  margin: 80px 0 120px calc(50% - #{$earthWidth / 2});
+  height: $earthWidth;
+  background:
+    linear-gradient(
+      90deg,
+      #222 #{$earthWidth / 2},
+      #0000 #{$earthWidth / 2}
+    ),
+    linear-gradient(#0000 0, #111 0.5%, #111 98.5%, #0000 100%);
+  cursor: pointer;
+  
+  .globe {
+    position: absolute;
+    width: $earthWidth;
+    height: 100%;
+    border-radius: 100%;
+    background: url('https://upload.wikimedia.org/wikipedia/commons/6/69/Peters_projection%2C_white_%26_grey.png') 0 0 / 250% 100%, #008;
+    animation: rotate 40s infinite linear;
+    transform: rotate(
+      calc(#{-$angMax}deg * var(--ang))
+    );
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 100% 50% -80px;
+      width: 1px;
+      border-left: 2px solid #fff8;
+    }
+    
+    &:after {
+      inset: -40px 50% 100%;
+    }
+  }
+  
+  .day-label {
+    position: absolute;
+    left: 0;
+    z-index: 10;
+    width: 50px;
+    text-align: right;
+    color: #fff;
+    pointer-events: none;
+
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 50% -#{$earthWidth * 0.68} 50% 145%;
+      border-bottom: 2px dotted #fff;
+      border-top: 2px dotted #383977;
+      z-index: 10;
+    }
+
+    &.north-label {
+      top: 8%;
+    }
+
+    &.south-label {
+      bottom: 10%;
+    }
+  }
+
+  .shadow {
+    position: absolute;
+    width: $earthWidth;
+    height: 100%;
+    z-index: 20;
+    pointer-events: none;
+
+    &:before {
+      content: '';
+      position: absolute;
+      inset: -200px 0;
+      clip-path: circle(#{($earthWidth / 2) + 1px});
+      box-shadow: inset -180px 0 20px 0 #000d;
+      border-radius: 100%;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 100% 50% -80px;
+      width: 1px;
+      border-left: 2px solid #fff8;
+    }
+
+    .label {
+      position: absolute;
+      height: 16px;
+      width: fit-content;
+      bottom: -55px;
+      left: calc(50% + 8px);
+      color: #fff;
+
+      &:before {
+        content: '';
+        position: absolute;
+        bottom: 22px;
+        left: $earthWidth * -0.625;
+        padding: $earthWidth * 0.6;
+        border: 2px dotted #fff8;
+        border-radius: 100%;
+        clip-path: circle(
+          calc(
+            #{2 * $angMax}px *
+            max(var(--ang), -1 * var(--ang))
+          ) at
+          calc(
+            50% + (
+              #{2 * $angMax}px * var(--ang)
+            )
+          ) 100%
+        );
+      }
+    }
+  }
+}
+
+.orbit-container {
+  position: relative;
+  width: 650px;
+  margin: 0 auto;
+  max-width: calc(100vw - 80px);
+  cursor: pointer;
+  
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    inset: 37px 0 auto 0;
+    height: 8px;
+    border-radius: 100%;
+    border: 2px dashed #fff8;
+  }
+  
+  &:before {
+    border-bottom-width: 0;
+    z-index: -10;
+  }
+  
+  &:after {
+    border-top-width: 0;
+    z-index: 5;
+  }
+  
+  .earth {
+    $c-earth: #8686bd;
+    $c-earth-d: #393877;
+    
+    @keyframes earthBg {
+      0%    { background: linear-gradient(90deg, $c-earth 50%, $c-earth-d 50%);  }
+      49.9% { background: linear-gradient(90deg, $c-earth 50%, $c-earth-d 50%);  }
+      50%   { background: linear-gradient(-90deg, $c-earth 50%, $c-earth-d 50%); }
+      100%  { background: linear-gradient(-90deg, $c-earth 50%, $c-earth-d 50%); }
+    }
+	
+    @keyframes earthFg {
+      0% {
+        transform: scale(1, 1);
+        background: $c-earth;
+      }
+      24.9% {
+        transform: scale(0, 1);
+        background: $c-earth;
+      }
+      25% {
+        transform: scale(0, 1);
+        background: $c-earth-d;
+      }
+      49.9% {
+        transform: scale(-1, 1);
+        background: $c-earth-d;
+      }
+      50% {
+        transform: scale(1, 1);
+        background: $c-earth-d;
+      }
+      74.9% {
+        transform: scale(0, 1);
+        background: $c-earth-d;
+      }
+      75% {
+        transform: scale(0, 1);
+        background: $c-earth;
+      }
+      100% {
+        transform: scale(-1, 1);
+        background: $c-earth;
+      }
+    }
+    
+    position: absolute;
+    top: 10px;
+    left: calc((var(--ang) * 50%) + 50% - 30px);
+    z-index: var(--ang-z);
+    border-radius: 100%;
+    padding: 30px;
+    animation: earthBg linear infinite;
+    animation-duration: 1s;
+    animation-delay: calc((1s * var(--ang-full)) - 1.75s);
+    animation-play-state: paused;
+    pointer-events: none;
+    
+    &:before {
+      content: '';
+      position: absolute;
+      inset: -15px 50%;
+      width: 1px;
+      transform: rotate(-23.4deg);
+      border-left: 1px solid #fff8;
+      z-index: 20;
+    }
+    
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      animation: earthFg linear infinite;
+      animation-duration: inherit;
+      animation-delay: inherit;
+      animation-play-state: inherit;
+    }
+  }
+  
+  .sun {
+    position: absolute;
+    top: 0;
+    z-index: 5;
+    left: calc(50% - 40px);
+    border-radius: 100%;
+    background-color: #dbae2d;
+    padding: 40px;
+    pointer-events: none;
+  }
+  
+  .labels {
+    padding: 120px 0 40px;
+    
+    div {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      
+      &:first-child {    
+        span {
+          display: inline-block;
+          font-style: normal;
+          border-bottom: 1px solid #fff8;
+          padding: 0 3px;
+          height: 16px;
+        }
+      }
+      
+      &:last-child {
+        padding: 4px;
+        font-size: 14px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/dendritic-rabbit/README.markdown b/dendritic-rabbit/README.markdown
new file mode 100644
index 0000000..eaaaa1f
--- /dev/null
+++ b/dendritic-rabbit/README.markdown
@@ -0,0 +1,4 @@
+# Dendritic Rabbit
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/brainjam/pen/LmrRzZ](https://codepen.io/brainjam/pen/LmrRzZ).
+
+ 
\ No newline at end of file
diff --git a/dendritic-rabbit/dist/index.html b/dendritic-rabbit/dist/index.html
new file mode 100644
index 0000000..514f059
--- /dev/null
+++ b/dendritic-rabbit/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Dendritic Rabbit</title>
+  
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='http://cdn.jsdelivr.net/npm/gl-matrix@2/dist/gl-matrix-min.js'></script>
+<script src='http://cdn.jsdelivr.net/npm/regl@1/dist/regl.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/dendritic-rabbit/dist/script.js b/dendritic-rabbit/dist/script.js
new file mode 100644
index 0000000..29f7a0e
--- /dev/null
+++ b/dendritic-rabbit/dist/script.js
@@ -0,0 +1,61 @@
+const regl = createREGL();
+const draw = regl({
+  frag: `
+    #ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+    #else
+      precision mediump float;
+    #endif
+    
+    float julia(vec2 z, vec2 c) {
+      for(float i = 0.0; i < 200.0; i++) {
+        float xx = z.x*z.x, yy = z.y*z.y, zz = xx + yy;
+        if(zz > 256.0){
+           float rc = i - log2(log2(zz)) + 4.0 ;
+           if (/*z.x>0.0 &&*/ abs(atan(z.y,z.x))<1.0/5.0){
+              rc = 0.0 ;
+           }
+           return rc;
+        }
+        if (zz>200.0){return 0.0;}
+        z = vec2(xx - yy, z.x*z.y*2.0) + c;
+      }
+      return 0.0 ;
+    }
+    
+    uniform vec2 c;
+    varying vec2 z;
+    void main() {
+      float m = julia(z, c);
+      vec3 rgb = 0.5 + 0.5*cos(3.0 + 0.15*m + vec3(0.0, 0.6, 1.0));
+      gl_FragColor = vec4(rgb, 1.0);
+    }
+  `,
+  vert: `
+    attribute vec2 position;
+    uniform mat2 transform;
+    varying vec2 z;
+    void main() {
+      z = transform * position;
+      gl_Position = vec4(position, 0.0, 1.0);
+    }
+  `,
+  uniforms: {
+    transform: ({ viewportWidth: w, viewportHeight: h }) => {
+      return mat2.fromScaling([], [0.1*w/h, 0.1*1]);
+    },
+    c: ({ time: t }) => {
+      let a = [-0.153941, 1.0377];
+          //a = [-0.0, 1.0];
+      const b = [Math.sin(0.1*t), Math.cos(0.1*t)];
+      return vec2.scaleAndAdd([], a, b, 5e-4);
+    }
+  },
+  attributes: {
+    position: [1, 1, -1, 1, 1, -1, -1, -1]
+  },
+  primitive: 'triangle strip',
+  count: 4
+});
+
+regl.frame(draw);
\ No newline at end of file
diff --git a/dendritic-rabbit/license.txt b/dendritic-rabbit/license.txt
new file mode 100644
index 0000000..79ed9ee
--- /dev/null
+++ b/dendritic-rabbit/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Peter Liepa (https://codepen.io/brainjam/pen/LmrRzZ)
+
+
+Fork of an original work by Jake Weary (https://codepen.io/thepheer/pen/mqGZPE)
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/dendritic-rabbit/src/index.html b/dendritic-rabbit/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/dendritic-rabbit/src/script.js b/dendritic-rabbit/src/script.js
new file mode 100644
index 0000000..2f09d39
--- /dev/null
+++ b/dendritic-rabbit/src/script.js
@@ -0,0 +1,61 @@
+const regl = createREGL();
+const draw = regl({
+  frag: `
+    #ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+    #else
+      precision mediump float;
+    #endif
+    
+    float julia(vec2 z, vec2 c) {
+      for(float i = 0.0; i < 200.0; i++) {
+        float xx = z.x*z.x, yy = z.y*z.y, zz = xx + yy;
+        if(zz > 256.0){
+           float rc = i - log2(log2(zz)) + 4.0 ;
+           if (/*z.x>0.0 &&*/ abs(atan(z.y,z.x))<1.0/5.0){
+              rc = 0.0 ;
+           }
+           return rc;
+        }
+        if (zz>200.0){return 0.0;}
+        z = vec2(xx - yy, z.x*z.y*2.0) + c;
+      }
+      return 0.0 ;
+    }
+    
+    uniform vec2 c;
+    varying vec2 z;
+    void main() {
+      float m = julia(z, c);
+      vec3 rgb = 0.5 + 0.5*cos(3.0 + 0.15*m + vec3(0.0, 0.6, 1.0));
+      gl_FragColor = vec4(rgb, 1.0);
+    }
+  `,
+  vert: `
+    attribute vec2 position;
+    uniform mat2 transform;
+    varying vec2 z;
+    void main() {
+      z = transform * position;
+      gl_Position = vec4(position, 0.0, 1.0);
+    }
+  `,
+  uniforms: {
+    transform: ({ viewportWidth: w, viewportHeight: h }) => {
+      return mat2.fromScaling([], [0.1*w/h, 0.1*1]);
+    },
+    c: ({ time: t }) => {
+      let a = [-0.153941, 1.0377];
+          //a = [-0.0, 1.0];
+      const b = [Math.sin(0.1*t), Math.cos(0.1*t)];
+      return vec2.scaleAndAdd([], a, b, 5e-4);
+    }
+  },
+  attributes: {
+    position: [1, 1, -1, 1, 1, -1, -1, -1]
+  },
+  primitive: 'triangle strip',
+  count: 4
+});
+
+regl.frame(draw);
diff --git a/design-your-week/README.markdown b/design-your-week/README.markdown
new file mode 100644
index 0000000..142ea34
--- /dev/null
+++ b/design-your-week/README.markdown
@@ -0,0 +1,4 @@
+# Design Your Week
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/davidkpiano/pen/zWrRye](https://codepen.io/davidkpiano/pen/zWrRye).
+
+ Based on a [Dribbble by Gal Shir](https://dribbble.com/shots/3986782-Design-Your-Week).
\ No newline at end of file
diff --git a/design-your-week/dist/index.html b/design-your-week/dist/index.html
new file mode 100644
index 0000000..37a6595
--- /dev/null
+++ b/design-your-week/dist/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Design Your Week</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="ui-week">
+  <div class="ui-day" data-day="sun">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-sun"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="sun"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+  <div class="ui-day" data-day="mon">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-mon"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="mon"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+  <div class="ui-day" data-day="tue">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-tue"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="tue"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+  <div class="ui-day" data-day="wed">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-wed"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="wed"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+  <div class="ui-day" data-day="thu">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-thu"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="thu"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+  <div class="ui-day" data-day="fri">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-fri"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="fri"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+  <div class="ui-day" data-day="sat">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-sat"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="sat"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+</div>
+
+<div class="ui-alert"><span class="ui-alert-days"></span><span> days removed</span></div>
+<div class="ui-trash">
+  <div class="ui-trash-lid"></div>
+  <div class="ui-ridges"></div>
+  <div class="ui-sparks">
+    <div class="ui-spark"></div>
+    <div class="ui-spark"></div>
+    <div class="ui-spark"></div>
+  </div>
+</div>
+
+<div class="ui-selection"></div>
+<!-- partial -->
+  <script src='https://unpkg.com/flipping@0.10.0/dist/flipping.web.js'></script>
+<script src='https://unpkg.com/xstate@3/dist/xstate.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/design-your-week/dist/script.js b/design-your-week/dist/script.js
new file mode 100644
index 0000000..6816c04
--- /dev/null
+++ b/design-your-week/dist/script.js
@@ -0,0 +1,333 @@
+console.clear();
+
+// safarIE
+if (!('animate' in Element.prototype)) {
+  Element.prototype.animate = () => {};
+}
+
+const dayEls = Array.from(document.querySelectorAll(".ui-day"));
+const trashEl = document.querySelector(".ui-trash");
+const rect = el => el.getBoundingClientRect();
+const trashRect = rect(trashEl);
+const center = el => {
+  const elRect = rect(el);
+  return [elRect.left + elRect.width / 2, elRect.top + elRect.height / 2];
+};
+const styleVars = (vars, el = document.documentElement) => {
+  Object.keys(vars).forEach(key => {
+    el.style.setProperty(`--${key}`, vars[key]);
+  });
+};
+
+styleVars({
+  "trash-x": trashRect.left,
+  "trash-y": trashRect.top });
+
+
+// pretend it's redux, okay?
+const extState = {
+  selected: [],
+  x1: 0,
+  y1: 0,
+  x2: 0,
+  y2: 0,
+  drag: {
+    x1: 0,
+    y1: 0,
+    x2: 0,
+    y2: 0 },
+
+  grabIndex: undefined,
+  stretch: {},
+  centers: dayEls.map(center) };
+
+
+const startSelection = (s, e) => ({
+  x1: event.clientX,
+  y1: event.clientY,
+  x2: event.clientX,
+  y2: event.clientY,
+  selected: [] });
+
+
+const updateSelection = (s, e) => {
+  const mx1 = Math.min(s.x1, e.clientX);
+  const mx2 = Math.max(s.x1, e.clientX);
+  const my1 = Math.min(s.y1, e.clientY);
+  const my2 = Math.max(s.y1, e.clientY);
+
+  return {
+    mx1,
+    mx2,
+    my1,
+    my2,
+    x2: e.clientX,
+    y2: e.clientY,
+    selected: extState.centers.
+    map((center, i) => ({
+      center,
+      i })).
+
+    filter(({ center: [x, y], i }) => {
+      return x > mx1 && x < mx2 && y > my1 && y < my2;
+    }).
+    map(({ i }) => i) };
+
+};
+
+const startDrag = (s, e) => ({
+  drag: {
+    type: e.type,
+    index: e.index,
+    x1: e.clientX,
+    y1: e.clientY,
+    x2: e.clientX,
+    y2: e.clientY } });
+
+
+
+const drag = (s, e) => ({
+  drag: {
+    ...s.drag,
+    x2: e.clientX,
+    y2: e.clientY } });
+
+
+
+const isNotTrashElement = (s, e) => e.target !== trashEl;
+const initGrab = (s, e) => ({
+  grabIndex: e.index,
+  stretchIndex: e.index });
+
+const updateGrab = (s, e) => {
+  const { clientX } = e;
+  const stretchIndexes = s.centers.
+  map((c, i) => ({ c, index: i })).
+  filter(({ c: [x] }, i) => {
+    return (
+      s.selected.includes(i) && (
+      s.grabIndex < i && clientX > x ||
+      s.grabIndex > i && clientX < x) &&
+      Object.keys(s.stretch).every(key => {
+        if (+key === +s.grabIndex) return true;
+
+        const [min, max] = s.stretch[key];
+        return key < s.grabIndex ? i > max : i < min;
+      }));
+
+  }).
+  map(stretch => stretch.index);
+
+  const start = Math.min(s.grabIndex, ...stretchIndexes);
+  const end = Math.max(s.grabIndex, ...stretchIndexes);
+
+  const prevRange = s.stretch[s.grabIndex];
+
+  if (prevRange && prevRange[0] === start && prevRange[1] === end) {
+    return;
+  }
+
+  flippingStyleVars(
+  {
+    start: start + 1,
+    end: end + 2 },
+
+  dayEls[s.grabIndex]);
+
+
+  return {
+    stretch: {
+      ...s.stretch,
+      [s.grabIndex]: [start, end] } };
+
+
+};
+const showDaysRemoved = (s, e) => {
+  const { selected } = s;
+  const numDays = selected.length;
+
+  document.querySelector('.ui-alert-days').innerHTML = numDays;
+};
+
+const resetGrab = () => ({ grabIndex: undefined });
+
+const machine = xstate.Machine({
+  initial: "start",
+  states: {
+    start: {
+      on: {
+        mousedown: {
+          selecting: {
+            actions: [startSelection] } } } },
+
+
+
+
+    selecting: {
+      on: {
+        mouseup: "selected",
+        mousemove: {
+          selecting: {
+            actions: [updateSelection] } } } },
+
+
+
+
+    selected: {
+      on: {
+        mousedown: { selecting: { actions: [startSelection] } },
+        drag: {
+          dragging: {
+            actions: [startDrag] } } } },
+
+
+
+
+    dragging: {
+      on: {
+        mousemove: {
+          dragging: {
+            actions: [drag] } },
+
+
+        mouseup: [
+        { target: "selected", cond: isNotTrashElement },
+        { target: "disposed", actions: [showDaysRemoved] }] } },
+
+
+
+    disposed: {
+      on: {
+        startGrab: {
+          grabbing: {
+            actions: [initGrab] } } } },
+
+
+
+
+    grabbing: {
+      on: {
+        mousemove: {
+          grabbing: {
+            actions: [updateGrab] } },
+
+
+        mouseup: {
+          disposed: {
+            actions: [resetGrab] } } } } } });
+
+
+
+
+
+
+
+let currentState = machine.initialState;
+
+const flipping = new Flipping({
+  activeSelector: el => el.matches('[data-state="grabbed"] *') });
+
+
+const flippingStyleVars = flipping.wrap(styleVars);
+
+const send = event => {
+  const state = machine.transition(currentState, event, extState);
+
+  if (state.value !== currentState.value) {
+    document.body.setAttribute("data-prev-state", currentState.value);
+  }
+
+  currentState = state;
+
+  if (state.actions) {
+    state.actions.reduce((extState, action) => {
+      Object.assign(extState, action(extState, event) || {});
+      return extState;
+    }, extState);
+  }
+
+  document.body.setAttribute("data-state", currentState.value);
+  const { mx1, my1, mx2, my2, drag, grabIndex, stretchIndex } = extState;
+
+  styleVars({
+    mx1,
+    my1,
+    mx2,
+    my2,
+    "drag-index": drag.index,
+    "drag-x1": drag.x1,
+    "drag-y1": drag.y1,
+    "drag-x2": drag.x2,
+    "drag-y2": drag.y2 });
+
+
+  dayEls.forEach((el, i) =>
+  el.setAttribute(
+  "data-state",
+  extState.selected.includes(i) ? "selected" : ""));
+
+
+
+  if (extState.grabIndex !== undefined) {
+    dayEls[extState.grabIndex].setAttribute("data-state", "grabbed");
+  }
+};
+
+document.body.setAttribute("data-state", machine.initial);
+
+document.body.addEventListener("mousedown", e => {
+  send(e);
+});
+
+document.body.addEventListener("mouseup", e => {
+  send(e);
+});
+
+document.body.addEventListener("mousemove", e => {
+  send(e);
+});
+
+dayEls.forEach((el, i) => {
+  styleVars({ yc: Math.abs(3 - i) }, el);
+  el.addEventListener("mousedown", e => {
+    if (e.target.matches('[data-state="selected"]')) {
+      send({
+        type: "drag",
+        index: i,
+        clientX: e.clientX,
+        clientY: e.clientY });
+
+    }
+  });
+
+  el.addEventListener("mouseover", e => {
+    send({
+      type: "mouseover",
+      index: i });
+
+  });
+
+  Array.from(el.querySelectorAll(".ui-grab")).forEach(grabEl => {
+    grabEl.addEventListener("mousedown", e => {
+      send({
+        type: "startGrab",
+        index: i });
+
+    });
+  });
+});
+
+trashEl.addEventListener("mouseover", e => {
+  send({ type: "prepareDispose" });
+});
+trashEl.addEventListener("mouseup", e => {
+  send("dispose");
+});
+trashEl.addEventListener("mouseout", e => {
+  send("cancelDispose");
+});
+
+// because someone will inevitably resize their screen
+window.addEventListener('resize', e => {
+  extState.centers = dayEls.map(center);
+});
\ No newline at end of file
diff --git a/design-your-week/dist/style.css b/design-your-week/dist/style.css
new file mode 100644
index 0000000..0cc52c1
--- /dev/null
+++ b/design-your-week/dist/style.css
@@ -0,0 +1,401 @@
+*, *:before, *:after {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F2F5F7;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-perspective: 1000px;
+          perspective: 1000px;
+  -webkit-perspective-origin: calc(var(--trash-x) * 1px) calc(var(--trash-y) * 1px);
+          perspective-origin: calc(var(--trash-x) * 1px) calc(var(--trash-y) * 1px);
+}
+
+.ui-week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  width: 70vw;
+  height: 15vw;
+  grid-column-gap: 1vw;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 10vh;
+}
+
+.ui-day[data-state="selected"] > .ui-day-box, [data-state="disposed"] .ui-day:hover .ui-day-box, [data-state="disposed"] .ui-day[data-state="grabbed"] > .ui-day-box,
+[data-state="grabbing"] .ui-day[data-state="grabbed"] > .ui-day-box {
+  color: #9153FF;
+  background: transparent;
+}
+.ui-day[data-state="selected"] > .ui-day-box > .ui-bg, [data-state="disposed"] .ui-day:hover .ui-day-box > .ui-bg, [data-state="disposed"] .ui-day[data-state="grabbed"] > .ui-day-box > .ui-bg,
+[data-state="grabbing"] .ui-day[data-state="grabbed"] > .ui-day-box > .ui-bg {
+  border-color: #9153FF;
+  background-color: #F7E3FF;
+}
+
+.ui-day {
+  justify-self: stretch;
+  align-self: stretch;
+  background-color: #EAEDF4;
+  border-radius: .25rem;
+  grid-row: 1 / 2;
+}
+.ui-day:nth-child(1) {
+  grid-column: var(--start, 1)/var(--end, span 1);
+}
+.ui-day:nth-child(2) {
+  grid-column: var(--start, 2)/var(--end, span 1);
+}
+.ui-day:nth-child(3) {
+  grid-column: var(--start, 3)/var(--end, span 1);
+}
+.ui-day:nth-child(4) {
+  grid-column: var(--start, 4)/var(--end, span 1);
+}
+.ui-day:nth-child(5) {
+  grid-column: var(--start, 5)/var(--end, span 1);
+}
+.ui-day:nth-child(6) {
+  grid-column: var(--start, 6)/var(--end, span 1);
+}
+.ui-day:nth-child(7) {
+  grid-column: var(--start, 7)/var(--end, span 1);
+}
+.ui-day .ui-day-name {
+  color: #7960A7;
+}
+.ui-day .ui-day-name:before {
+  content: attr(data-flip-key);
+}
+.ui-day[data-state="selected"] > .ui-day-box {
+  -webkit-animation: selected 0.6s cubic-bezier(0.5, 0, 0.5, 1);
+          animation: selected 0.6s cubic-bezier(0.5, 0, 0.5, 1);
+}
+@-webkit-keyframes selected {
+  50% {
+    -webkit-transform: rotate(2deg);
+            transform: rotate(2deg);
+  }
+}
+@keyframes selected {
+  50% {
+    -webkit-transform: rotate(2deg);
+            transform: rotate(2deg);
+  }
+}
+[data-state="dragging"] .ui-day[data-state="selected"] > .ui-day-box, [data-state="disposed"] .ui-day[data-state="selected"] > .ui-day-box {
+  z-index: 2;
+  transition-duration: 0s;
+  -webkit-transform: translateX(calc((var(--drag-x2) - var(--drag-x1)) * 1px)) translateY(calc((var(--drag-y2) - var(--drag-y1)) * 1px + (3px - var(--yc) * 3px)));
+          transform: translateX(calc((var(--drag-x2) - var(--drag-x1)) * 1px)) translateY(calc((var(--drag-y2) - var(--drag-y1)) * 1px + (3px - var(--yc) * 3px)));
+}
+[data-state="disposed"] .ui-day[data-state="selected"] > .ui-day-box {
+  transition-duration: .3s;
+  -webkit-transform: translateX(calc((var(--drag-x2) - var(--drag-x1)) * 1px)) translateY(calc((var(--drag-y2) - var(--drag-y1)) * 1px)) translateZ(-1000px);
+          transform: translateX(calc((var(--drag-x2) - var(--drag-x1)) * 1px)) translateY(calc((var(--drag-y2) - var(--drag-y1)) * 1px)) translateZ(-1000px);
+}
+
+.ui-day-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+  font-weight: bold;
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition-duration: .3s;
+  z-index: 1;
+  pointer-events: none;
+}
+.ui-day-box > .ui-bg {
+  background-color: #fff;
+  border: 4px solid white;
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition-duration: .3s;
+  transition-property: border-color, background-color;
+}
+.ui-day-box > .ui-bg:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 0.5rem 1.5rem rgba(145, 83, 255, 0.2);
+  z-index: -1;
+}
+
+[data-state="disposed"] .ui-day[data-state="selected"] > .ui-day-box,
+[data-state="grabbing"] .ui-day[data-state="selected"] > .ui-day-box {
+  opacity: 0;
+  pointer-events: none;
+}
+[data-state="disposed"] .ui-day-box,
+[data-state="grabbing"] .ui-day-box {
+  pointer-events: auto;
+}
+
+.ui-grab {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 1vw;
+}
+.ui-grab.-left {
+  left: 0;
+}
+.ui-grab.-right {
+  right: 0;
+}
+
+.ui-grab, [data-state="grabbing"] {
+  cursor: ew-resize;
+}
+
+.ui-selection {
+  color: #7DDAFC;
+  background: rgba(125, 218, 252, 0.3);
+  border: 2px solid currentColor;
+  position: absolute;
+  left: calc(var(--mx1) * 1px);
+  top: calc(var(--my1) * 1px);
+  width: calc((var(--mx2) - var(--mx1)) * 1px);
+  height: calc((var(--my2) - var(--my1)) * 1px);
+  transition: opacity .3s ease-in-out;
+  pointer-events: none;
+  z-index: 3;
+}
+[data-state]:not([data-state="selecting"]) .ui-selection {
+  opacity: 0;
+}
+
+.ui-alert {
+  color: #FF62A3;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 1rem;
+  white-space: nowrap;
+  text-align: center;
+  opacity: 0;
+}
+[data-state="disposed"][data-prev-state="dragging"] .ui-alert {
+  -webkit-animation: alert 1s cubic-bezier(0, 0.5, 0, 1) both;
+          animation: alert 1s cubic-bezier(0, 0.5, 0, 1) both;
+}
+@-webkit-keyframes alert {
+  from {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translateY(-200%);
+            transform: translateY(-200%);
+    opacity: 0;
+  }
+}
+@keyframes alert {
+  from {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translateY(-200%);
+            transform: translateY(-200%);
+    opacity: 0;
+  }
+}
+.ui-trash {
+  width: 5vw;
+  height: 6vw;
+  border: 2px solid #7960A7;
+  border-bottom: none;
+  border-top: none;
+  background-image: linear-gradient(to right, white, white 60%, #f6f4f9 61%, #f6f4f9);
+  opacity: 0;
+  -webkit-transform: translateY(1vw);
+          transform: translateY(1vw);
+  z-index: 10;
+}
+.ui-trash, .ui-trash > * {
+  transition-property: opacity, -webkit-transform;
+  transition-property: opacity, transform;
+  transition-property: opacity, transform, -webkit-transform;
+  transition-duration: .6s;
+  trasition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
+}
+[data-state="dragging"] .ui-trash {
+  opacity: 1;
+  -webkit-transform: none;
+          transform: none;
+}
+[data-state="dragging"] .ui-trash:hover {
+  -webkit-transform: rotate(-10deg);
+          transform: rotate(-10deg);
+}
+[data-state="dragging"] .ui-trash:hover > .ui-trash-lid {
+  -webkit-transform: rotate(25deg);
+          transform: rotate(25deg);
+}
+[data-state="disposed"] .ui-trash {
+  transition-duration: 1s;
+  opacity: 0;
+}
+.ui-trash:before, .ui-trash:after {
+  content: '';
+  position: absolute;
+  width: calc(100% + 4px);
+  left: -2px;
+  height: 1vw;
+  border: 2px solid #7960A7;
+  border-bottom-left-radius: 100% 100%;
+  border-bottom-right-radius: 100% 100%;
+  background-image: inherit;
+}
+.ui-trash:before {
+  top: 100%;
+  border-top: none;
+  border-bottom-left-radius: 100% 100%;
+  border-bottom-right-radius: 100% 100%;
+}
+.ui-trash:after {
+  bottom: calc(100% - .5vw);
+  border-top-left-radius: 100% 100%;
+  border-top-right-radius: 100% 100%;
+}
+.ui-trash > .ui-ridges {
+  height: 70%;
+  width: 2px;
+  background-color: #7960A7;
+  position: absolute;
+  left: calc(50% - 1px);
+  top: 25%;
+  pointer-events: none;
+}
+.ui-trash > .ui-ridges:before, .ui-trash > .ui-ridges:after {
+  content: '';
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  background-color: inherit;
+}
+.ui-trash > .ui-ridges:before {
+  left: -1.5vw;
+  -webkit-transform: rotate(-2deg);
+          transform: rotate(-2deg);
+}
+.ui-trash > .ui-ridges:after {
+  left: 1.5vw;
+  -webkit-transform: rotate(2deg);
+          transform: rotate(2deg);
+}
+.ui-trash .ui-spark {
+  height: 6px;
+  width: 6px;
+  border-radius: 50%;
+  background-color: #7960A7;
+  position: absolute;
+  top: -1vw;
+  left: -1vw;
+  opacity: 0;
+  transition: opacity .1s, -webkit-transform 1s;
+  transition: transform 1s, opacity .1s;
+  transition: transform 1s, opacity .1s, -webkit-transform 1s;
+}
+[data-state="dragging"] .ui-trash .ui-spark {
+  opacity: 0;
+}
+[data-state="disposed"] .ui-trash .ui-spark {
+  opacity: 1;
+  -webkit-transform: translate(-2vw, -1vw) scale(0);
+          transform: translate(-2vw, -1vw) scale(0);
+}
+[data-state="disposed"] .ui-trash .ui-spark:nth-child(2) {
+  -webkit-transform: translate(-2vw, -3vw) scale(0);
+          transform: translate(-2vw, -3vw) scale(0);
+}
+[data-state="disposed"] .ui-trash .ui-spark:nth-child(3) {
+  -webkit-transform: translate(2vw, -1vw) scale(0);
+          transform: translate(2vw, -1vw) scale(0);
+}
+.ui-trash .ui-spark:nth-child(2) {
+  top: -1vw;
+  left: 1vw;
+}
+.ui-trash .ui-spark:nth-child(3) {
+  top: -.5vw;
+  left: 5vw;
+}
+
+.ui-trash-lid {
+  position: absolute;
+  bottom: calc(100% - .5vw);
+  height: 1vw;
+  width: 120%;
+  left: -10%;
+  border: 2px solid #7960A7;
+  border-bottom-left-radius: 100% 100%;
+  border-bottom-right-radius: 100% 100%;
+  border-top-left-radius: 100% 100%;
+  border-top-right-radius: 100% 100%;
+  background-color: white;
+  z-index: 1;
+  -webkit-transform-origin: 120% center;
+          transform-origin: 120% center;
+}
+.ui-trash-lid:before, .ui-trash-lid:after {
+  content: '';
+  position: absolute;
+  border: inherit;
+  background-color: inherit;
+}
+.ui-trash-lid:before {
+  width: 80%;
+  height: 1vw;
+  left: 10%;
+  bottom: calc(100% - .4vw);
+  border-radius: inherit;
+}
+.ui-trash-lid:after {
+  width: 50%;
+  left: 25%;
+  height: 1.2vw;
+  border-top-left-radius: 50% 100%;
+  border-top-right-radius: 50% 100%;
+  bottom: 107%;
+  border-bottom: none;
+  background-color: transparent;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  position: relative;
+}
diff --git a/design-your-week/license.txt b/design-your-week/license.txt
new file mode 100644
index 0000000..fc793e6
--- /dev/null
+++ b/design-your-week/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by David Khourshid (https://codepen.io/davidkpiano/pen/zWrRye)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/design-your-week/src/index.html b/design-your-week/src/index.html
new file mode 100644
index 0000000..ced3e07
--- /dev/null
+++ b/design-your-week/src/index.html
@@ -0,0 +1,71 @@
+<div class="ui-week">
+  <div class="ui-day" data-day="sun">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-sun"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="sun"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+  <div class="ui-day" data-day="mon">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-mon"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="mon"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+  <div class="ui-day" data-day="tue">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-tue"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="tue"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+  <div class="ui-day" data-day="wed">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-wed"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="wed"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+  <div class="ui-day" data-day="thu">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-thu"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="thu"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+  <div class="ui-day" data-day="fri">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-fri"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="fri"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+  <div class="ui-day" data-day="sat">
+    <div class="ui-day-box">
+      <div class="ui-bg" data-flip-key="bg-sat"></div>
+      <div class="ui-grab -left"></div>
+      <div class="ui-day-name" data-flip-key="sat"></div>
+      <div class="ui-grab -right"></div>
+    </div>
+  </div>
+</div>
+
+<div class="ui-alert"><span class="ui-alert-days"></span><span> days removed</span></div>
+<div class="ui-trash">
+  <div class="ui-trash-lid"></div>
+  <div class="ui-ridges"></div>
+  <div class="ui-sparks">
+    <div class="ui-spark"></div>
+    <div class="ui-spark"></div>
+    <div class="ui-spark"></div>
+  </div>
+</div>
+
+<div class="ui-selection"></div>
\ No newline at end of file
diff --git a/design-your-week/src/script.babel b/design-your-week/src/script.babel
new file mode 100644
index 0000000..997dd7e
--- /dev/null
+++ b/design-your-week/src/script.babel
@@ -0,0 +1,333 @@
+console.clear();
+
+// safarIE
+if (!('animate' in Element.prototype)) {
+  Element.prototype.animate = () => {};
+}
+
+const dayEls = Array.from(document.querySelectorAll(".ui-day"));
+const trashEl = document.querySelector(".ui-trash");
+const rect = el => el.getBoundingClientRect();
+const trashRect = rect(trashEl);
+const center = el => {
+  const elRect = rect(el);
+  return [elRect.left + elRect.width / 2, elRect.top + elRect.height / 2];
+};
+const styleVars = (vars, el = document.documentElement) => {
+  Object.keys(vars).forEach(key => {
+    el.style.setProperty(`--${key}`, vars[key]);
+  });
+};
+
+styleVars({
+  "trash-x": trashRect.left,
+  "trash-y": trashRect.top
+});
+
+// pretend it's redux, okay?
+const extState = {
+  selected: [],
+  x1: 0,
+  y1: 0,
+  x2: 0,
+  y2: 0,
+  drag: {
+    x1: 0,
+    y1: 0,
+    x2: 0,
+    y2: 0
+  },
+  grabIndex: undefined,
+  stretch: {},
+  centers: dayEls.map(center)
+};
+
+const startSelection = (s, e) => ({
+  x1: event.clientX,
+  y1: event.clientY,
+  x2: event.clientX,
+  y2: event.clientY,
+  selected: []
+});
+
+const updateSelection = (s, e) => {
+  const mx1 = Math.min(s.x1, e.clientX);
+  const mx2 = Math.max(s.x1, e.clientX);
+  const my1 = Math.min(s.y1, e.clientY);
+  const my2 = Math.max(s.y1, e.clientY);
+
+  return {
+    mx1,
+    mx2,
+    my1,
+    my2,
+    x2: e.clientX,
+    y2: e.clientY,
+    selected: extState.centers
+      .map((center, i) => ({
+        center,
+        i
+      }))
+      .filter(({ center: [x, y], i }) => {
+        return x > mx1 && x < mx2 && y > my1 && y < my2;
+      })
+      .map(({ i }) => i)
+  };
+};
+ 
+const startDrag = (s, e) => ({
+  drag: {
+    type: e.type,
+    index: e.index,
+    x1: e.clientX,
+    y1: e.clientY,
+    x2: e.clientX,
+    y2: e.clientY
+  }
+});
+
+const drag = (s, e) => ({
+  drag: {
+    ...s.drag,
+    x2: e.clientX,
+    y2: e.clientY
+  }
+});
+
+const isNotTrashElement = (s, e) => e.target !== trashEl;
+const initGrab = (s, e) => ({
+  grabIndex: e.index,
+  stretchIndex: e.index
+});
+const updateGrab = (s, e) => {
+  const { clientX } = e;
+  const stretchIndexes = s.centers
+    .map((c, i) => ({ c, index: i }))
+    .filter(({ c: [x] }, i) => {
+      return (
+        s.selected.includes(i) &&
+        ((s.grabIndex < i && clientX > x) ||
+          (s.grabIndex > i && clientX < x)) &&
+        Object.keys(s.stretch).every(key => {
+          if (+key === +s.grabIndex) return true;
+
+          const [min, max] = s.stretch[key];
+          return key < s.grabIndex ? i > max : i < min;
+        })
+      );
+    })
+    .map(stretch => stretch.index);
+
+  const start = Math.min(s.grabIndex, ...stretchIndexes);
+  const end = Math.max(s.grabIndex, ...stretchIndexes);
+
+  const prevRange = s.stretch[s.grabIndex];
+
+  if (prevRange && prevRange[0] === start && prevRange[1] === end) {
+    return;
+  }
+
+  flippingStyleVars(
+    {
+      start: start + 1,
+      end: end + 2
+    },
+    dayEls[s.grabIndex]
+  );
+
+  return {
+    stretch: {
+      ...s.stretch,
+      [s.grabIndex]: [start, end]
+    }
+  };
+};
+const showDaysRemoved = (s, e) => {
+  const {selected} = s;
+  const numDays = selected.length;
+  
+  document.querySelector('.ui-alert-days').innerHTML = numDays;
+}
+
+const resetGrab = () => ({ grabIndex: undefined });
+
+const machine = xstate.Machine({
+  initial: "start",
+  states: {
+    start: {
+      on: {
+        mousedown: {
+          selecting: {
+            actions: [startSelection]
+          }
+        }
+      }
+    },
+    selecting: {
+      on: {
+        mouseup: "selected",
+        mousemove: {
+          selecting: {
+            actions: [updateSelection]
+          }
+        }
+      }
+    },
+    selected: {
+      on: {
+        mousedown: { selecting: { actions: [startSelection] } },
+        drag: {
+          dragging: {
+            actions: [startDrag]
+          }
+        }
+      }
+    },
+    dragging: {
+      on: {
+        mousemove: {
+          dragging: {
+            actions: [drag]
+          }
+        },
+        mouseup: [
+          { target: "selected", cond: isNotTrashElement },
+          { target: "disposed", actions: [showDaysRemoved] }
+        ]
+      }
+    },
+    disposed: {
+      on: {
+        startGrab: {
+          grabbing: {
+            actions: [initGrab]
+          }
+        }
+      }
+    },
+    grabbing: {
+      on: {
+        mousemove: {
+          grabbing: {
+            actions: [updateGrab]
+          }
+        },
+        mouseup: {
+          disposed: {
+            actions: [resetGrab]
+          }
+        }
+      }
+    }
+  }
+});
+
+let currentState = machine.initialState;
+
+const flipping = new Flipping({
+  activeSelector: el => el.matches('[data-state="grabbed"] *')
+});
+
+const flippingStyleVars = flipping.wrap(styleVars);
+
+const send = event => {
+  const state = machine.transition(currentState, event, extState);
+  
+  if (state.value !== currentState.value) {
+    document.body.setAttribute("data-prev-state", currentState.value);
+  }
+  
+  currentState = state;
+
+  if (state.actions) {
+    state.actions.reduce((extState, action) => {
+      Object.assign(extState, action(extState, event) || {});
+      return extState;
+    }, extState);
+  }
+
+  document.body.setAttribute("data-state", currentState.value);
+  const { mx1, my1, mx2, my2, drag, grabIndex, stretchIndex } = extState;
+
+  styleVars({
+    mx1,
+    my1,
+    mx2,
+    my2,
+    "drag-index": drag.index,
+    "drag-x1": drag.x1,
+    "drag-y1": drag.y1,
+    "drag-x2": drag.x2,
+    "drag-y2": drag.y2
+  });
+
+  dayEls.forEach((el, i) =>
+    el.setAttribute(
+      "data-state",
+      extState.selected.includes(i) ? "selected" : ""
+    )
+  );
+
+  if (extState.grabIndex !== undefined) {
+    dayEls[extState.grabIndex].setAttribute("data-state", "grabbed");
+  }
+};
+
+document.body.setAttribute("data-state", machine.initial);
+
+document.body.addEventListener("mousedown", e => {
+  send(e);
+});
+
+document.body.addEventListener("mouseup", e => {
+  send(e);
+});
+
+document.body.addEventListener("mousemove", e => {
+  send(e);
+});
+
+dayEls.forEach((el, i) => {
+  styleVars({ yc: Math.abs(3 - i) }, el);
+  el.addEventListener("mousedown", e => {
+    if (e.target.matches('[data-state="selected"]')) {
+      send({
+        type: "drag",
+        index: i,
+        clientX: e.clientX,
+        clientY: e.clientY
+      });
+    }
+  });
+
+  el.addEventListener("mouseover", e => {
+    send({
+      type: "mouseover",
+      index: i
+    });
+  });
+
+  Array.from(el.querySelectorAll(".ui-grab")).forEach(grabEl => {
+    grabEl.addEventListener("mousedown", e => {
+      send({
+        type: "startGrab",
+        index: i
+      });
+    });
+  });
+});
+
+trashEl.addEventListener("mouseover", e => {
+  send({ type: "prepareDispose" });
+});
+trashEl.addEventListener("mouseup", e => {
+  send("dispose");
+});
+trashEl.addEventListener("mouseout", e => {
+  send("cancelDispose");
+});
+
+// because someone will inevitably resize their screen
+window.addEventListener('resize', e => {
+  extState.centers = dayEls.map(center);
+});
diff --git a/design-your-week/src/style.scss b/design-your-week/src/style.scss
new file mode 100644
index 0000000..80af6c7
--- /dev/null
+++ b/design-your-week/src/style.scss
@@ -0,0 +1,400 @@
+$color-border: #9153FF;
+$color-purple: #7960A7;
+$color-box: #F7E3FF;
+$color-text-dark: #7A61A7;
+
+*, *:before, *:after {
+  user-select: none;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F2F5F7;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+  perspective-origin: calc(var(--trash-x) * 1px) calc(var(--trash-y) * 1px);
+  
+  // &:before {
+  //   content: attr(data-prev-state)' ➡ 'attr(data-state);
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  // }
+}
+
+.ui-week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  width: 70vw;
+  height: 15vw;
+  grid-column-gap: 1vw;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 10vh;
+}
+
+%selected {
+  color: $color-border;
+  background: transparent;
+  
+  > .ui-bg {
+    border-color: $color-border;
+    background-color: $color-box;
+  }
+}
+
+.ui-day {
+  justify-self: stretch;
+  align-self: stretch;
+  background-color: #EAEDF4;
+  border-radius: .25rem;
+  grid-row: 1 / 2;
+  
+  @for $i from 1 through 7 {
+    &:nth-child(#{$i}) {
+      grid-column: var(--start, #{$i}) / var(--end, span 1);
+    }
+  }
+  
+  .ui-day-name {
+    color: $color-purple;
+    &:before {
+      content: attr(data-flip-key);
+    }
+  }
+  
+  &[data-state="selected"] > .ui-day-box,
+  [data-state="disposed"] &:hover .ui-day-box {
+    @extend %selected;
+  }
+  
+  &[data-state="selected"] > .ui-day-box {
+    animation: selected .6s cubic-bezier(.5, 0, .5, 1);
+
+    @keyframes selected {
+      50% {
+        transform: rotate(2deg);
+      }
+    }
+  }
+  
+  [data-state="dragging"] &[data-state="selected"],
+  [data-state="disposed"] &[data-state="selected"] {    
+    > .ui-day-box {
+      z-index: 2;
+      transition-duration: 0s;
+      transform:
+        translateX(calc((var(--drag-x2) - var(--drag-x1)) * 1px))
+        translateY(calc((var(--drag-y2) - var(--drag-y1)) * 1px + (3px - var(--yc) * 3px)));
+    }
+  }
+  
+  [data-state="disposed"] &[data-state="selected"] > .ui-day-box {
+    transition-duration: .3s;
+    transform:
+        translateX(calc((var(--drag-x2) - var(--drag-x1)) * 1px))
+        translateY(calc((var(--drag-y2) - var(--drag-y1)) * 1px))
+      translateZ(-1000px);
+  }
+}
+
+.ui-day-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+  font-weight: bold;
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition-duration: .3s;
+  z-index: 1;
+  pointer-events: none;
+  
+  > .ui-bg {
+    background-color: #fff;
+    border: 4px solid white;
+    border-radius: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition-duration: .3s;
+    transition-property: border-color, background-color;
+    
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-shadow: 0 .5rem 1.5rem rgba($color-border, 0.2);
+      z-index: -1;
+    }
+  }
+}
+
+[data-state="disposed"],
+[data-state="grabbing"] {
+  .ui-day[data-state="selected"] > .ui-day-box {
+    opacity: 0;
+    pointer-events: none;
+  }
+  
+  .ui-day[data-state="grabbed"] > .ui-day-box {
+    @extend %selected;
+  }
+  
+  .ui-day-box {
+    pointer-events: auto;
+  }
+}
+
+.ui-grab {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 1vw;
+  
+  &.-left {
+    left: 0;
+  }
+  
+  &.-right {
+    right: 0;
+  }
+}
+
+.ui-grab, [data-state="grabbing"] {
+  cursor: ew-resize;
+}
+
+.ui-selection {
+  color: #7DDAFC;
+  background: rgba(#7DDAFC, 0.3);
+  border: 2px solid currentColor;
+  position: absolute;
+  left: calc(var(--mx1) * 1px);
+  top: calc(var(--my1) * 1px);
+  width: calc((var(--mx2) - var(--mx1)) * 1px);
+  height: calc((var(--my2) - var(--my1)) * 1px);
+  transition: opacity .3s ease-in-out;
+  pointer-events: none;
+  z-index: 3;
+  
+  [data-state]:not([data-state="selecting"]) & {
+    opacity: 0;
+  }
+}
+
+.ui-alert {
+  color: #FF62A3;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 1rem;
+  white-space: nowrap;
+  text-align: center;
+  opacity: 0;
+  
+  [data-state="disposed"][data-prev-state="dragging"] &  {
+    animation: alert 1s cubic-bezier(0, .5, 0, 1) both;
+  }
+  @keyframes alert {
+    from {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    to {
+      transform: translateY(-200%);
+      opacity: 0;
+    }
+  }
+}
+
+.ui-trash {
+  width: 5vw;
+  height: 6vw;
+  border: 2px solid $color-purple;
+  border-bottom: none;
+  border-top: none;
+  background-image: linear-gradient(to right, white, white 60%, lighten($color-purple, 45%) 61%, lighten($color-purple, 45%));
+  opacity: 0;
+  transform: translateY(1vw);
+  
+  &, > * {
+    transition-property: opacity, transform;
+    transition-duration: .6s;
+    trasition-timing-function: cubic-bezier(.5, 0, .5, 1);
+  }
+  
+  z-index: 10;
+  
+  [data-state="dragging"] & {
+    opacity: 1;
+    transform: none;
+    
+    &:hover {
+      transform: rotate(-10deg);
+      
+      > .ui-trash-lid {
+        transform: rotate(25deg);
+      }
+    }
+  }
+  
+  [data-state="disposed"] & {
+    transition-duration: 1s;
+    opacity: 0;
+  }
+  
+  &:before, &:after {
+    content: '';
+    position: absolute;
+    width: calc(100% + 4px);
+    left: -2px;
+    height: 1vw;
+    border: 2px solid $color-purple;
+    border-bottom-left-radius: 100% 100%;
+    border-bottom-right-radius: 100% 100%;
+    background-image: inherit;
+  }
+  
+  &:before {
+    top: 100%;
+    border-top: none;
+    border-bottom-left-radius: 100% 100%;
+    border-bottom-right-radius: 100% 100%;
+  }
+  &:after {
+    bottom: calc(100% - .5vw);
+    border-top-left-radius: 100% 100%;
+    border-top-right-radius: 100% 100%;
+  }
+  
+  > .ui-ridges {
+    height: 70%;
+    width: 2px;
+    background-color: $color-purple;
+    position: absolute;
+    left: calc(50% - 1px);
+    top: 25%;
+    pointer-events: none;
+    
+    &:before, &:after {
+      content: '';
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      background-color: inherit;
+    }
+    &:before {
+      left: -1.5vw;
+      transform: rotate(-2deg);
+    }
+    &:after {
+      left: 1.5vw;
+      transform: rotate(2deg);
+    }
+  }
+  
+  .ui-spark {
+    height: 6px;
+    width: 6px;
+    border-radius: 50%;
+    background-color: $color-purple;
+    position: absolute;
+    top: -1vw;
+    left: -1vw;
+    opacity: 0;
+    transition: transform 1s, opacity .1s;
+    
+    [data-state="dragging"] & {
+      opacity: 0;
+    }
+    [data-state="disposed"] & {
+      opacity: 1;
+      transform: translate(-2vw, -1vw) scale(0);
+      
+      &:nth-child(2) {
+        transform: translate(-2vw, -3vw) scale(0);
+      }
+      &:nth-child(3) {
+        transform: translate(2vw, -1vw) scale(0);
+      }
+    }
+    
+    &:nth-child(2) {
+      top: -1vw;
+      left: 1vw;
+    }
+    &:nth-child(3) {
+      top: -.5vw;
+      left: 5vw;
+    }
+  }
+}
+
+.ui-trash-lid {
+  position: absolute;
+  bottom: calc(100% - .5vw);
+  height: 1vw;
+  width: 120%;
+  left: -10%;
+  border: 2px solid $color-purple;
+  border-bottom-left-radius: 100% 100%;
+  border-bottom-right-radius: 100% 100%;
+  border-top-left-radius: 100% 100%;
+  border-top-right-radius: 100% 100%;
+  background-color: white;
+  z-index: 1;
+  transform-origin: 120% center;
+  
+  &:before, &:after {
+    content: '';
+    position: absolute;
+    border: inherit;
+    background-color: inherit;
+  }
+  
+  &:before {
+    width: 80%;
+    height: 1vw;
+    left: 10%;
+    bottom: calc(100% - .4vw);
+    border-radius: inherit;
+  }
+  
+  &:after {
+    width: 50%;
+    left: 25%;
+    height: 1.2vw;
+    border-top-left-radius: 50% 100%;
+    border-top-right-radius: 50% 100%;
+    bottom: 107%;
+    border-bottom: none;
+    background-color: transparent;
+  }
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  position: relative;
+}
\ No newline at end of file
diff --git a/details-element-for-help-text/README.markdown b/details-element-for-help-text/README.markdown
new file mode 100644
index 0000000..35b5e9c
--- /dev/null
+++ b/details-element-for-help-text/README.markdown
@@ -0,0 +1,5 @@
+# Details element for help text
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/NielsVoogt/pen/PoZqzGx](https://codepen.io/NielsVoogt/pen/PoZqzGx).
+
+Use the details element to show help texts on form fields
diff --git a/details-element-for-help-text/dist/index.html b/details-element-for-help-text/dist/index.html
new file mode 100644
index 0000000..b33d1cf
--- /dev/null
+++ b/details-element-for-help-text/dist/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Details element for help text</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="panel">
+  <h1>Use of &lt;details&gt; for help text</h1>
+  <p>You can use the details element to provide additional information on fields that new users might need help with.</p>
+  <p>Click on the help icon to toggle the help text.</p>
+  <hr>
+  <form>
+    <div class="form-group">
+      <label for="participants" class="form-group-label">Name</label>
+      <div class="form-group-input-container">
+        <input type="text" id="participants" class="form-control" placeholder="e.g. Harry Potter">
+        <details>
+          <summary><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle">
+              <circle cx="12" cy="12" r="10" />
+              <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+              <line x1="12" y1="17" x2="12.01" y2="17" /></svg></summary>
+          <small class="form-group-help">
+            The name that will be displayed in your public profile.
+          </small>
+        </details>
+      </div>
+    </div>
+  </form>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/details-element-for-help-text/dist/style.css b/details-element-for-help-text/dist/style.css
new file mode 100644
index 0000000..6621be4
--- /dev/null
+++ b/details-element-for-help-text/dist/style.css
@@ -0,0 +1,119 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap");
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  background: #edf2f7;
+  font-size: 16px;
+  font-family: "Source Sans Pro", sans-serif;
+  color: #4a5568;
+  line-height: 1.45;
+}
+
+h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+p {
+  margin-bottom: 16px;
+}
+
+hr {
+  background: #edf2f7;
+  height: 1px;
+  border: 0;
+  margin: 24px 0 16px;
+}
+
+.panel {
+  width: 400px;
+  max-width: 90%;
+  margin: 100px auto 0;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  padding: 24px;
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.form-group + .form-group {
+  margin-top: 16px;
+}
+.form-group .form-group-input-container {
+  position: relative;
+}
+.form-group .form-control {
+  height: 40px;
+  width: 100%;
+  border-radius: 5px;
+  padding: 0 10px;
+  border: 1px solid #a0aec0;
+  font-size: 0.9rem;
+  color: #4a5568;
+  font-family: inherit;
+}
+.form-group .form-control::-webkit-input-placeholder {
+  color: #a0aec0;
+}
+.form-group .form-control::-moz-placeholder {
+  color: #a0aec0;
+}
+.form-group .form-control:-ms-input-placeholder {
+  color: #a0aec0;
+}
+.form-group .form-control:-moz-placeholder {
+  color: #a0aec0;
+}
+.form-group .form-group-label {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 8px;
+}
+.form-group .form-group-help {
+  font-size: 0.875rem;
+  margin-top: 8px;
+  display: block;
+  color: #718096;
+}
+.form-group details summary {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  outline: none;
+  color: #718096;
+  opacity: 0.5;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+}
+.form-group details summary:hover {
+  cursor: pointer;
+  opacity: 1;
+}
+.form-group details summary svg {
+  width: 20px;
+  height: 20px;
+}
+.form-group details summary::-webkit-details-marker {
+  display: none;
+}
\ No newline at end of file
diff --git a/details-element-for-help-text/license.txt b/details-element-for-help-text/license.txt
new file mode 100644
index 0000000..2cbb125
--- /dev/null
+++ b/details-element-for-help-text/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Niels Voogt (https://codepen.io/NielsVoogt/pen/PoZqzGx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/details-element-for-help-text/src/index.html b/details-element-for-help-text/src/index.html
new file mode 100644
index 0000000..1690bd4
--- /dev/null
+++ b/details-element-for-help-text/src/index.html
@@ -0,0 +1,23 @@
+<div class="panel">
+  <h1>Use of &lt;details&gt; for help text</h1>
+  <p>You can use the details element to provide additional information on fields that new users might need help with.</p>
+  <p>Click on the help icon to toggle the help text.</p>
+  <hr>
+  <form>
+    <div class="form-group">
+      <label for="participants" class="form-group-label">Name</label>
+      <div class="form-group-input-container">
+        <input type="text" id="participants" class="form-control" placeholder="e.g. Harry Potter">
+        <details>
+          <summary><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle">
+              <circle cx="12" cy="12" r="10" />
+              <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+              <line x1="12" y1="17" x2="12.01" y2="17" /></svg></summary>
+          <small class="form-group-help">
+            The name that will be displayed in your public profile.
+          </small>
+        </details>
+      </div>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/details-element-for-help-text/src/style.scss b/details-element-for-help-text/src/style.scss
new file mode 100644
index 0000000..7c1d875
--- /dev/null
+++ b/details-element-for-help-text/src/style.scss
@@ -0,0 +1,133 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap");
+
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  background: #edf2f7;
+  font-size: 16px;
+  font-family: "Source Sans Pro", sans-serif;
+  color: #4a5568;
+  line-height: 1.45;
+}
+
+h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+p {
+  margin-bottom: 16px;
+}
+
+hr {
+  background: #edf2f7;
+  height: 1px;
+  border: 0;
+  margin: 24px 0 16px;
+}
+
+.panel {
+  width: 400px;
+  max-width: 90%;
+  margin: 100px auto 0;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  padding: 24px;
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.form-group {
+  $summary-icon-size: 20px;
+  $form-control-height: 40px;
+  
+  + #{&} {
+    margin-top: 16px;
+  }
+
+  .form-group-input-container {
+    position: relative;
+  }
+
+  .form-control {
+    height: $form-control-height;
+    width: 100%;
+    border-radius: 5px;
+    padding: 0 10px;
+    border: 1px solid #a0aec0;
+    font-size: 0.9rem;
+    color: #4a5568;
+    font-family: inherit;
+
+    &::-webkit-input-placeholder {
+      color: #a0aec0;
+    }
+    &::-moz-placeholder {
+      color: #a0aec0;
+    }
+    &:-ms-input-placeholder {
+      color: #a0aec0;
+    }
+    &:-moz-placeholder {
+      color: #a0aec0;
+    }
+  }
+
+  .form-group-label {
+    font-weight: bold;
+    display: block;
+    margin-bottom: 8px;
+  }
+
+  .form-group-help {
+    font-size: 0.875rem;
+    margin-top: 8px;
+    display: block;
+    color: #718096;
+  }
+
+  details {
+    summary {
+      width: $form-control-height;
+      height: $form-control-height;
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: block;
+      outline: none;
+      color: #718096;
+      opacity: 0.5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        cursor: pointer;
+        opacity: 1;
+      }
+
+      svg {
+        width: $summary-icon-size;
+        height: $summary-icon-size;
+      }
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/diagonal-page-transitions/README.markdown b/diagonal-page-transitions/README.markdown
new file mode 100644
index 0000000..abc9f04
--- /dev/null
+++ b/diagonal-page-transitions/README.markdown
@@ -0,0 +1,5 @@
+# Diagonal Page Transitions
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/chriscoyier/pen/oNePEyW](https://codepen.io/chriscoyier/pen/oNePEyW).
+
+
diff --git a/diagonal-page-transitions/dist/index.html b/diagonal-page-transitions/dist/index.html
new file mode 100644
index 0000000..a23a951
--- /dev/null
+++ b/diagonal-page-transitions/dist/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Diagonal Page Transitions</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="overlay">
+
+</div>
+
+<button id="toggle">
+  Toggle Transition
+</button>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/diagonal-page-transitions/dist/script.js b/diagonal-page-transitions/dist/script.js
new file mode 100644
index 0000000..5d64af9
--- /dev/null
+++ b/diagonal-page-transitions/dist/script.js
@@ -0,0 +1,64 @@
+import Knobs from "https://cdn.skypack.dev/@yaireo/knobs";
+
+let ANIMATION_LENGTH = 2000;
+
+toggle.onclick = () => {
+  overlay.classList.add("woosh");
+
+  setTimeout(() => {
+    document.body.classList.toggle("has-background");
+  }, ANIMATION_LENGTH / 2);
+};
+overlay.onanimationend = () => {
+  overlay.classList.remove("woosh");
+};
+
+var settings = {
+  knobsToggle: true,
+  visible: 0,
+  CSSVarTarget: document.querySelector("#overlay"),
+
+  knobs: [
+    {
+      cssVar: ["speed", "s"],
+      label: "Speed",
+      type: "range",
+      value: 2,
+      min: 0.1,
+      max: 5,
+      step: 0.1,
+      onChange: (e, speedData) => {
+        ANIMATION_LENGTH = speedData.value * 1000;
+      }
+    },
+    {
+      cssVar: ["color"],
+      label: "Color",
+      type: "color",
+      value: "#f06d06",
+      swatches: ["red", "gold"]
+    },
+    {
+      cssVar: ["end", "px"],
+      label: "Width",
+      type: "range",
+      value: 100,
+      min: 20,
+      max: 300,
+      step: 5
+    },
+    ,
+    {
+      cssVar: ["angle", "deg"],
+      label: "Angle",
+      type: "range",
+      value: 45,
+      min: 0,
+      max: 90,
+      step: 1
+    }
+  ]
+};
+
+var myKnobs = new Knobs(settings);
+myKnobs.render();
\ No newline at end of file
diff --git a/diagonal-page-transitions/dist/style.css b/diagonal-page-transitions/dist/style.css
new file mode 100644
index 0000000..4358550
--- /dev/null
+++ b/diagonal-page-transitions/dist/style.css
@@ -0,0 +1,57 @@
+@property --start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 100px;
+}
+@property --angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 45deg;
+}
+#overlay {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(var(--angle, 45deg), var(--color, black), var(--color, black) var(--start), transparent var(--start), transparent var(--end));
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  #overlay.woosh {
+    animation: woosh var(--speed, 2s);
+  }
+}
+
+@keyframes woosh {
+  50%, 75% {
+    --start: var(--end);
+  }
+  100% {
+    --start: 0px;
+  }
+}
+body {
+  height: 100vh;
+  margin: 0;
+  display: grid;
+  place-items: center;
+}
+body.has-background {
+  background-color: red;
+  background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="white" fill-rule="evenodd"/%3E%3C/svg%3E');
+}
+
+#toggle {
+  background: black;
+  color: white;
+  padding: 1rem 2rem;
+  font: 150% system-ui;
+  border-radius: 100px;
+  border: 0;
+}
\ No newline at end of file
diff --git a/diagonal-page-transitions/license.txt b/diagonal-page-transitions/license.txt
new file mode 100644
index 0000000..9990020
--- /dev/null
+++ b/diagonal-page-transitions/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Chris Coyier  (https://codepen.io/chriscoyier/pen/oNePEyW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/diagonal-page-transitions/src/index.html b/diagonal-page-transitions/src/index.html
new file mode 100644
index 0000000..7c5710e
--- /dev/null
+++ b/diagonal-page-transitions/src/index.html
@@ -0,0 +1,7 @@
+<div id="overlay">
+
+</div>
+
+<button id="toggle">
+  Toggle Transition
+</button>
\ No newline at end of file
diff --git a/diagonal-page-transitions/src/script.js b/diagonal-page-transitions/src/script.js
new file mode 100644
index 0000000..58021fb
--- /dev/null
+++ b/diagonal-page-transitions/src/script.js
@@ -0,0 +1,64 @@
+import Knobs from "https://cdn.skypack.dev/@yaireo/knobs";
+
+let ANIMATION_LENGTH = 2000;
+
+toggle.onclick = () => {
+  overlay.classList.add("woosh");
+
+  setTimeout(() => {
+    document.body.classList.toggle("has-background");
+  }, ANIMATION_LENGTH / 2);
+};
+overlay.onanimationend = () => {
+  overlay.classList.remove("woosh");
+};
+
+var settings = {
+  knobsToggle: true,
+  visible: 0,
+  CSSVarTarget: document.querySelector("#overlay"),
+
+  knobs: [
+    {
+      cssVar: ["speed", "s"],
+      label: "Speed",
+      type: "range",
+      value: 2,
+      min: 0.1,
+      max: 5,
+      step: 0.1,
+      onChange: (e, speedData) => {
+        ANIMATION_LENGTH = speedData.value * 1000;
+      }
+    },
+    {
+      cssVar: ["color"],
+      label: "Color",
+      type: "color",
+      value: "#f06d06",
+      swatches: ["red", "gold"]
+    },
+    {
+      cssVar: ["end", "px"],
+      label: "Width",
+      type: "range",
+      value: 100,
+      min: 20,
+      max: 300,
+      step: 5
+    },
+    ,
+    {
+      cssVar: ["angle", "deg"],
+      label: "Angle",
+      type: "range",
+      value: 45,
+      min: 0,
+      max: 90,
+      step: 1
+    }
+  ]
+};
+
+var myKnobs = new Knobs(settings);
+myKnobs.render();
diff --git a/diagonal-page-transitions/src/style.scss b/diagonal-page-transitions/src/style.scss
new file mode 100644
index 0000000..e5c9483
--- /dev/null
+++ b/diagonal-page-transitions/src/style.scss
@@ -0,0 +1,69 @@
+@property --start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 100px;
+}
+@property --angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 45deg;
+}
+
+#overlay {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+
+  background: repeating-linear-gradient(
+    var(--angle, 45deg),
+    var(--color, black),
+    var(--color, black) var(--start),
+    transparent var(--start),
+    transparent var(--end)
+  );
+
+  &.woosh {
+    @media screen and (prefers-reduced-motion: no-preference) {
+      animation: woosh var(--speed, 2s);
+    }
+  }
+}
+
+@keyframes woosh {
+  50%,
+  75% {
+    --start: var(--end);
+  }
+  100% {
+    --start: 0px;
+  }
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  display: grid;
+  place-items: center;
+
+  &.has-background {
+    background-color: red;
+    background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="white" fill-rule="evenodd"/%3E%3C/svg%3E');
+  }
+}
+
+#toggle {
+  background: black;
+  color: white;
+  padding: 1rem 2rem;
+  font: 150% system-ui;
+  border-radius: 100px;
+  border: 0;
+}
diff --git a/digital-walls/README.markdown b/digital-walls/README.markdown
new file mode 100644
index 0000000..2b73c5d
--- /dev/null
+++ b/digital-walls/README.markdown
@@ -0,0 +1,5 @@
+# Digital Walls
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/mxbck/pen/ERNwBy](https://codepen.io/mxbck/pen/ERNwBy).
+
+Inspired by an augmented-reality design I saw on dribbble, I tried to build this screen with modern CSS. It includes CSS grid, Smooth Scrolling and  CSS-only-parallax for 60fps. 
diff --git a/digital-walls/dist/index.html b/digital-walls/dist/index.html
new file mode 100644
index 0000000..168637d
--- /dev/null
+++ b/digital-walls/dist/index.html
@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Digital Walls</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<link href="https://fonts.googleapis.com/css?family=Montserrat:200,400" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="app">
+  <header class="header">
+    <div class="header__left">
+      <span>Digital Walls</span>
+    </div>
+    <div class="header__right">
+      <p>Thu, 14 Jun | 16:20</p>
+    </div>
+  </header>
+  
+  <nav class="nav">
+    <ul class="nav__menu">
+      <li class="nav__item">
+        <a href="#vienna" class="nav__link" data-scroll-to>
+          <div class="media">
+            <img src="https://lonelyplanetimages.imgix.net/mastheads/stock-photo-st-stephens-church-112868985.jpg?sharp=10&vib=20&w=2000" alt="" class="media__img">
+            <p class="media__content">
+              <strong>Vienna</strong><br />
+              Austria
+            </p>
+          </div>
+        </a>
+      </li>
+      <li class="nav__item">
+        <a href="#lisbon" class="nav__link" data-scroll-to>
+          <div class="media">
+            <img src="https://lonelyplanetimages.imgix.net/mastheads/54989636.jpg?sharp=10&vib=20&w=2000" alt="" class="media__img">
+            <p class="media__content">
+              <strong>Lisbon</strong><br />
+              Portugal
+            </p>
+          </div>
+        </a>
+      </li>
+      <li class="nav__item">
+        <a href="#newyork" class="nav__link" data-scroll-to>
+          <div class="media">
+            <img src="https://lonelyplanetimages.imgix.net/mastheads/GettyImages-538096543_medium.jpg?sharp=10&vib=20&w=2000" alt="" class="media__img">
+            <p class="media__content">
+              <strong>New York</strong><br />
+              USA
+            </p>
+          </div>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  
+  <main class="main">
+    <article class="section" id="vienna" data-section>
+      <header class="section__header" style="background-image: url('https://lonelyplanetimages.imgix.net/mastheads/stock-photo-st-stephens-church-112868985.jpg?sharp=10&w=2000');">
+        <h1 class="section__title">Vienna</h1>
+        <p class="section__subtitle">48.21°N, 16.36°E</p>
+        <div class="section__controls">
+          <button class="btn btn--prev" title="Previous">
+            <span class="arrow arrow--left"></span>
+          </button>
+          <button class="btn btn--next" title="Next">
+            <span class="arrow arrow--right"></span>
+          </button>
+          <div class="user">
+            <img src="https://source.unsplash.com/200x200/?people" class="user__img" alt="" />
+            <span class="user__name">Jamie</span>
+          </div>
+        </div>
+      </header>
+      <div class="section__content">
+        <ul class="boxgrid">
+          <li class="boxgrid__item">
+            <a href="#" class="box box--weather">
+              <p><span class="text--large">27°C</span><br />Cloudy</p>
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--wide">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/600x400/?nature" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/300x300/?people" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--cost">
+              <p><span class="text--large">120€</span><br />Daily cost</p>
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--video">
+              <img src="https://source.unsplash.com/300x300/?art" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--locations">
+              <p><span class="text--large">189</span><br />Locations</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </article>
+
+    <article class="section" id="lisbon" data-section>
+      <header class="section__header" style="background-image: url('https://lonelyplanetimages.imgix.net/mastheads/54989636.jpg?sharp=10&w=2000');">
+        <h1 class="section__title">Lisbon</h1>
+        <p class="section__subtitle">38.44°N, 09.82°W</p>
+        <div class="section__controls">
+          <button class="btn btn--prev" title="Previous">
+            <span class="arrow arrow--left"></span>
+          </button>
+          <button class="btn btn--next" title="Next">
+            <span class="arrow arrow--right"></span>
+          </button>
+          <div class="user">
+            <img src="https://source.unsplash.com/200x200/?people" class="user__img" alt="" />
+            <span class="user__name">Jamie</span>
+          </div>
+        </div>
+      </header>
+      <div class="section__content">
+        <ul class="boxgrid">
+          <li class="boxgrid__item">
+            <a href="#" class="box box--weather">
+              <p><span class="text--large">22°C</span><br />Rain</p>
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/300x300/?nature" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--video">
+              <img src="https://source.unsplash.com/300x300/?art" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--wide">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/600x400/?technology" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--locations">
+              <p><span class="text--large">272</span><br />Locations</p>
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--cost">
+              <p><span class="text--large">80€</span><br />Daily cost</p>
+            </a>
+          </li>
+          
+        </ul>
+      </div>
+    </article>
+
+    <article class="section" id="newyork" data-section>
+      <header class="section__header" style="background-image: url('https://lonelyplanetimages.imgix.net/mastheads/GettyImages-538096543_medium.jpg?sharp=10&vib=20&w=2000');">
+        <h1 class="section__title">New York</h1>
+        <p class="section__subtitle">40.42°N, 74.02°W</p>
+        <div class="section__controls">
+          <button class="btn btn--prev" title="Previous">
+            <span class="arrow arrow--left"></span>
+          </button>
+          <button class="btn btn--next" title="Next">
+            <span class="arrow arrow--right"></span>
+          </button>
+          <div class="user">
+            <img src="https://source.unsplash.com/200x200/?nature" class="user__img" alt="" />
+            <span class="user__name">Jamie</span>
+          </div>
+        </div>
+      </header>
+      <div class="section__content">
+        <ul class="boxgrid">
+          <li class="boxgrid__item boxgrid__item--wide">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/600x400/?art" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--weather">
+              <p><span class="text--large">30°C</span><br />Sunny</p>
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--video">
+              <img src="https://source.unsplash.com/300x300/?art" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/300x300/?people" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--locations">
+              <p><span class="text--large">1.366</span><br />Locations</p>
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--cost">
+              <p><span class="text--large">150$</span><br />Daily cost</p>
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/300x300/?technology" class="box__img" alt="" />
+            </a>
+          </li>
+        </ul>
+      </div>
+    </article>
+  </main>
+  
+  <button class="scrollctrl scrollctrl--prev" data-scroll-dir="prev">
+    <span class="arrow arrow--large arrow--up"></span>
+  </button>
+  <button class="scrollctrl scrollctrl--next" data-scroll-dir="next">
+    <span class="arrow arrow--large arrow--down"></span>
+  </button>
+  
+  <footer class="footer">
+    <p>a pen by <a href="https://twitter.com/mxbck">@mxbck</a></p>
+    <p>design by <a href="https://dribbble.com/shots/2652364-Digital-Walls">Cosmin Capitanu</a></p>
+    
+    <p class="footer__more">
+      <a href="https://codepen.io/mxbck/pen/81020404c9d5fd873a717c4612c914dd?editors=1000" target="_blank" rel="noopener noreferrer">View Source</a>
+      &nbsp;&middot;&nbsp;
+      <a href="https://mxb.at/blog/layouts-of-tomorrow/">Read More</a>
+    </p>
+  </footer>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/digital-walls/dist/script.js b/digital-walls/dist/script.js
new file mode 100644
index 0000000..29934d2
--- /dev/null
+++ b/digital-walls/dist/script.js
@@ -0,0 +1,50 @@
+const SELECTORS = {
+  section: '[data-section]',
+  scrollTo: '[data-scroll-to]',
+  scrollDir: '[data-scroll-dir]' };
+
+const sectionsArray = Array.from(document.querySelectorAll(SELECTORS.section));
+const scrollToElements = document.querySelectorAll(SELECTORS.scrollTo);
+const scrollDirElements = document.querySelectorAll(SELECTORS.scrollDir);
+
+let currentSectionIndex = 0;
+
+const getScrollTarget = dir => {
+  if (dir === 'prev' && currentSectionIndex > 0) {
+    currentSectionIndex--;
+    return sectionsArray[currentSectionIndex];
+  }
+  if (dir === 'next' && currentSectionIndex < sectionsArray.length - 1) {
+    currentSectionIndex++;
+    return sectionsArray[currentSectionIndex];
+  }
+  return false;
+};
+
+scrollDirElements.forEach(el => {
+  el.addEventListener('click', () => {
+    const direction = el.dataset.scrollDir;
+    const target = getScrollTarget(direction);
+
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth' });
+    }
+  });
+});
+
+scrollToElements.forEach(el => {
+  el.addEventListener('click', e => {
+    e.preventDefault();
+    const targetId = el.getAttribute('href');
+    const target = document.querySelector(targetId);
+
+    if (target) {
+      sectionsArray.forEach((section, index) => {
+        if (section.id === targetId.replace('#', '')) {
+          currentSectionIndex = index;
+        }
+      });
+      target.scrollIntoView({ behavior: 'smooth' });
+    }
+  });
+});
\ No newline at end of file
diff --git a/digital-walls/dist/style.css b/digital-walls/dist/style.css
new file mode 100644
index 0000000..7b83919
--- /dev/null
+++ b/digital-walls/dist/style.css
@@ -0,0 +1,401 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  height: 100%;
+  overflow: hidden;
+  color: #FFF;
+  background-color: #121519;
+  font-family: "Montserrat", "Roboto", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+ul, ol {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+p {
+  margin: 1rem 0;
+}
+
+.app {
+  display: grid;
+  grid-template-rows: 4rem 1fr 4rem;
+  grid-template-columns: 20% 1fr;
+  height: 100vh;
+}
+
+.header,
+.footer {
+  font-size: 0.75rem;
+  font-weight: 200;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #a0a0a0;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  grid-column: 1/-1;
+  padding: 0 2rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+.header__left, .header__right {
+  display: flex;
+  align-items: center;
+}
+
+.main {
+  grid-column: 1/-1;
+  padding: 2rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  perspective: 1px;
+  -ms-scroll-snap-type: block proximity;
+      scroll-snap-type: block proximity;
+  -ms-scroll-snap-destination: 0% 100%;
+      scroll-snap-destination: 0% 100%;
+  -ms-scroll-snap-points-y: repeat(100%);
+      scroll-snap-points-y: repeat(100%);
+}
+@media screen and (min-width: 1024px) {
+  .main {
+    grid-column: 2/-1;
+  }
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  grid-column: 1/-1;
+  padding: 0 2rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+.footer p {
+  margin-right: 1rem;
+}
+.footer a {
+  color: #FFF;
+}
+.footer a:hover, .footer a:focus {
+  text-decoration: underline;
+}
+.footer__more {
+  display: none;
+  margin-left: auto;
+  margin-right: 0;
+}
+@media screen and (min-width: 768px) {
+  .footer__more {
+    display: block;
+  }
+}
+
+.nav {
+  display: none;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.nav__item:not(:last-child) {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+.nav__link {
+  display: block;
+  color: #FFF;
+  font-weight: 200;
+}
+.nav__link:hover, .nav__link:focus {
+  background-color: rgba(255, 255, 255, 0.035);
+}
+@media screen and (min-width: 1024px) {
+  .nav {
+    display: block;
+    grid-column: 1/2;
+  }
+}
+
+.section {
+  min-height: 500px;
+  min-height: calc(100vh - 4rem - 4rem);
+  padding-top: 300px;
+  margin-bottom: 250px;
+  position: relative;
+  transform-style: preserve-3d;
+  scroll-snap-align: start;
+}
+.section__header {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  right: 0;
+  height: 500px;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  text-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
+}
+.section__header::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
+}
+.section__title {
+  font-size: 3.5rem;
+  font-weight: 200;
+  margin-bottom: 0.5rem;
+  line-height: 1;
+}
+.section__subtitle {
+  font-size: 1.5rem;
+}
+.section__controls {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  padding: 0 2rem;
+  top: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+}
+.section__content {
+  position: relative;
+  z-index: 1;
+  padding: 0 1rem;
+}
+@media screen and (min-width: 1024px) {
+  .section {
+    margin-bottom: 750px;
+  }
+  .section__header {
+    transform: translateZ(-1px) scale(1.9);
+  }
+  .section__content {
+    padding: 0;
+    transform: translateZ(0);
+  }
+}
+
+.boxgrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  grid-auto-rows: minmax(150px, auto);
+  grid-gap: 2rem 0.5rem;
+}
+.boxgrid__item {
+  display: flex;
+}
+.boxgrid__item--wide {
+  grid-column: span 2;
+}
+@media screen and (min-width: 1280px) {
+  .boxgrid__item--push {
+    grid-column: span 2;
+    padding-left: 50%;
+  }
+}
+
+.box {
+  display: flex;
+  flex: 1 0 0;
+  position: relative;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  color: #FFF;
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+  transform: scale(1);
+  transition: all 0.25s ease;
+  filter: brightness(100%);
+}
+.box:hover, .box:focus {
+  transform: scale(1.07);
+  filter: brightness(110%);
+  z-index: 10;
+}
+.box--weather {
+  background-color: #89CDCE;
+}
+.box--cost {
+  background-color: #66AEE5;
+}
+.box--locations {
+  background-color: #6C73DC;
+}
+.box--image, .box--video {
+  padding: 0;
+}
+.box--video::before, .box--video::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 10;
+  transform: translate(-50%, -50%);
+}
+.box--video::before {
+  width: 50px;
+  height: 50px;
+  background-color: #FFF;
+  border-radius: 50%;
+  box-shadow: 0 0 38px rgba(0, 0, 0, 0.3);
+}
+.box--video::after {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 10px 0 10px 15px;
+  border-color: transparent transparent transparent #121519;
+  margin-left: 2px;
+}
+.box__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+  border-radius: 0.5rem;
+}
+
+.scrollctrl {
+  display: none;
+  justify-content: center;
+  width: 50vw;
+  height: 50vw;
+  padding: 0;
+  position: fixed;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.7);
+  background-color: transparent;
+  left: 50%;
+  margin-left: -25%;
+}
+.scrollctrl:hover, .scrollctrl:focus {
+  background-color: rgba(255, 255, 255, 0.035);
+}
+.scrollctrl--prev {
+  top: 0;
+  padding-top: 44%;
+  align-items: flex-end;
+  transform: translateY(-42vw);
+}
+.scrollctrl--next {
+  bottom: 0;
+  padding-bottom: 44%;
+  transform: translateY(42vw);
+}
+@media screen and (min-width: 1024px) {
+  .scrollctrl {
+    display: flex;
+  }
+}
+
+.text--large {
+  font-size: 2rem;
+  font-weight: 200;
+}
+
+.arrow {
+  display: inline-block;
+  padding: 3px;
+  border-style: solid;
+  border-width: 0 2px 2px 0;
+}
+.arrow--large {
+  padding: 8px;
+  border-width: 0 1px 1px 0;
+}
+.arrow--right {
+  transform: rotate(-45deg);
+}
+.arrow--left {
+  transform: rotate(135deg);
+}
+.arrow--up {
+  transform: rotate(-135deg);
+}
+.arrow--down {
+  transform: rotate(45deg);
+}
+
+.media {
+  display: flex;
+  align-items: center;
+  padding: 2rem;
+}
+.media__img {
+  width: 60px;
+  height: 60px;
+  margin-right: 1rem;
+  border-radius: 0.25rem;
+  -o-object-position: center center;
+     object-position: center center;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.media__content {
+  margin: 0;
+}
+
+.user {
+  margin-left: auto;
+  text-align: center;
+  padding-top: 2rem;
+}
+.user__name {
+  display: block;
+  font-size: 1.5rem;
+  font-weight: 200;
+}
+.user__img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin-bottom: 0.5rem;
+  box-shadow: 0 0 38px rgba(0, 0, 0, 0.3);
+}
+
+.btn {
+  display: flex;
+  flex: 0 0 50px;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+  border: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 50%;
+  background-color: #FFF;
+  margin: 0 0.5rem;
+}
+
+button:focus {
+  outline: 0;
+  border-color: #66AEE5;
+  box-shadow: 0 0 0 1px #66AEE5;
+}
\ No newline at end of file
diff --git a/digital-walls/license.txt b/digital-walls/license.txt
new file mode 100644
index 0000000..4008a22
--- /dev/null
+++ b/digital-walls/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Max Böck (https://codepen.io/mxbck/pen/ERNwBy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/digital-walls/src/index.html b/digital-walls/src/index.html
new file mode 100644
index 0000000..90a9034
--- /dev/null
+++ b/digital-walls/src/index.html
@@ -0,0 +1,233 @@
+<div class="app">
+  <header class="header">
+    <div class="header__left">
+      <span>Digital Walls</span>
+    </div>
+    <div class="header__right">
+      <p>Thu, 14 Jun | 16:20</p>
+    </div>
+  </header>
+  
+  <nav class="nav">
+    <ul class="nav__menu">
+      <li class="nav__item">
+        <a href="#vienna" class="nav__link" data-scroll-to>
+          <div class="media">
+            <img src="https://lonelyplanetimages.imgix.net/mastheads/stock-photo-st-stephens-church-112868985.jpg?sharp=10&vib=20&w=2000" alt="" class="media__img">
+            <p class="media__content">
+              <strong>Vienna</strong><br />
+              Austria
+            </p>
+          </div>
+        </a>
+      </li>
+      <li class="nav__item">
+        <a href="#lisbon" class="nav__link" data-scroll-to>
+          <div class="media">
+            <img src="https://lonelyplanetimages.imgix.net/mastheads/54989636.jpg?sharp=10&vib=20&w=2000" alt="" class="media__img">
+            <p class="media__content">
+              <strong>Lisbon</strong><br />
+              Portugal
+            </p>
+          </div>
+        </a>
+      </li>
+      <li class="nav__item">
+        <a href="#newyork" class="nav__link" data-scroll-to>
+          <div class="media">
+            <img src="https://lonelyplanetimages.imgix.net/mastheads/GettyImages-538096543_medium.jpg?sharp=10&vib=20&w=2000" alt="" class="media__img">
+            <p class="media__content">
+              <strong>New York</strong><br />
+              USA
+            </p>
+          </div>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  
+  <main class="main">
+    <article class="section" id="vienna" data-section>
+      <header class="section__header" style="background-image: url('https://lonelyplanetimages.imgix.net/mastheads/stock-photo-st-stephens-church-112868985.jpg?sharp=10&w=2000');">
+        <h1 class="section__title">Vienna</h1>
+        <p class="section__subtitle">48.21°N, 16.36°E</p>
+        <div class="section__controls">
+          <button class="btn btn--prev" title="Previous">
+            <span class="arrow arrow--left"></span>
+          </button>
+          <button class="btn btn--next" title="Next">
+            <span class="arrow arrow--right"></span>
+          </button>
+          <div class="user">
+            <img src="https://source.unsplash.com/200x200/?people" class="user__img" alt="" />
+            <span class="user__name">Jamie</span>
+          </div>
+        </div>
+      </header>
+      <div class="section__content">
+        <ul class="boxgrid">
+          <li class="boxgrid__item">
+            <a href="#" class="box box--weather">
+              <p><span class="text--large">27°C</span><br />Cloudy</p>
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--wide">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/600x400/?nature" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/300x300/?people" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--cost">
+              <p><span class="text--large">120€</span><br />Daily cost</p>
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--video">
+              <img src="https://source.unsplash.com/300x300/?art" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--locations">
+              <p><span class="text--large">189</span><br />Locations</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </article>
+
+    <article class="section" id="lisbon" data-section>
+      <header class="section__header" style="background-image: url('https://lonelyplanetimages.imgix.net/mastheads/54989636.jpg?sharp=10&w=2000');">
+        <h1 class="section__title">Lisbon</h1>
+        <p class="section__subtitle">38.44°N, 09.82°W</p>
+        <div class="section__controls">
+          <button class="btn btn--prev" title="Previous">
+            <span class="arrow arrow--left"></span>
+          </button>
+          <button class="btn btn--next" title="Next">
+            <span class="arrow arrow--right"></span>
+          </button>
+          <div class="user">
+            <img src="https://source.unsplash.com/200x200/?people" class="user__img" alt="" />
+            <span class="user__name">Jamie</span>
+          </div>
+        </div>
+      </header>
+      <div class="section__content">
+        <ul class="boxgrid">
+          <li class="boxgrid__item">
+            <a href="#" class="box box--weather">
+              <p><span class="text--large">22°C</span><br />Rain</p>
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/300x300/?nature" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--video">
+              <img src="https://source.unsplash.com/300x300/?art" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--wide">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/600x400/?technology" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--locations">
+              <p><span class="text--large">272</span><br />Locations</p>
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--cost">
+              <p><span class="text--large">80€</span><br />Daily cost</p>
+            </a>
+          </li>
+          
+        </ul>
+      </div>
+    </article>
+
+    <article class="section" id="newyork" data-section>
+      <header class="section__header" style="background-image: url('https://lonelyplanetimages.imgix.net/mastheads/GettyImages-538096543_medium.jpg?sharp=10&vib=20&w=2000');">
+        <h1 class="section__title">New York</h1>
+        <p class="section__subtitle">40.42°N, 74.02°W</p>
+        <div class="section__controls">
+          <button class="btn btn--prev" title="Previous">
+            <span class="arrow arrow--left"></span>
+          </button>
+          <button class="btn btn--next" title="Next">
+            <span class="arrow arrow--right"></span>
+          </button>
+          <div class="user">
+            <img src="https://source.unsplash.com/200x200/?nature" class="user__img" alt="" />
+            <span class="user__name">Jamie</span>
+          </div>
+        </div>
+      </header>
+      <div class="section__content">
+        <ul class="boxgrid">
+          <li class="boxgrid__item boxgrid__item--wide">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/600x400/?art" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--weather">
+              <p><span class="text--large">30°C</span><br />Sunny</p>
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--video">
+              <img src="https://source.unsplash.com/300x300/?art" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/300x300/?people" class="box__img" alt="" />
+            </a>
+          </li>
+          <li class="boxgrid__item boxgrid__item--push">
+            <a href="#" class="box box--locations">
+              <p><span class="text--large">1.366</span><br />Locations</p>
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--cost">
+              <p><span class="text--large">150$</span><br />Daily cost</p>
+            </a>
+          </li>
+          <li class="boxgrid__item">
+            <a href="#" class="box box--image">
+              <img src="https://source.unsplash.com/300x300/?technology" class="box__img" alt="" />
+            </a>
+          </li>
+        </ul>
+      </div>
+    </article>
+  </main>
+  
+  <button class="scrollctrl scrollctrl--prev" data-scroll-dir="prev">
+    <span class="arrow arrow--large arrow--up"></span>
+  </button>
+  <button class="scrollctrl scrollctrl--next" data-scroll-dir="next">
+    <span class="arrow arrow--large arrow--down"></span>
+  </button>
+  
+  <footer class="footer">
+    <p>a pen by <a href="https://twitter.com/mxbck">@mxbck</a></p>
+    <p>design by <a href="https://dribbble.com/shots/2652364-Digital-Walls">Cosmin Capitanu</a></p>
+    
+    <p class="footer__more">
+      <a href="https://codepen.io/mxbck/pen/81020404c9d5fd873a717c4612c914dd?editors=1000" target="_blank" rel="noopener noreferrer">View Source</a>
+      &nbsp;&middot;&nbsp;
+      <a href="https://mxb.at/blog/layouts-of-tomorrow/">Read More</a>
+    </p>
+  </footer>
+</div>
\ No newline at end of file
diff --git a/digital-walls/src/script.babel b/digital-walls/src/script.babel
new file mode 100644
index 0000000..6a7b5a7
--- /dev/null
+++ b/digital-walls/src/script.babel
@@ -0,0 +1,50 @@
+const SELECTORS = {
+  section: '[data-section]',
+  scrollTo: '[data-scroll-to]',
+  scrollDir: '[data-scroll-dir]'
+}
+const sectionsArray = Array.from(document.querySelectorAll(SELECTORS.section))
+const scrollToElements = document.querySelectorAll(SELECTORS.scrollTo)
+const scrollDirElements = document.querySelectorAll(SELECTORS.scrollDir)
+
+let currentSectionIndex = 0
+
+const getScrollTarget = dir => {
+  if (dir === 'prev' && currentSectionIndex > 0) {
+    currentSectionIndex--
+    return sectionsArray[currentSectionIndex]
+  }
+  if (dir === 'next' && currentSectionIndex < sectionsArray.length-1) {
+    currentSectionIndex++
+    return sectionsArray[currentSectionIndex]
+  }
+  return false
+}
+
+scrollDirElements.forEach(el => {
+  el.addEventListener('click', () => {
+    const direction = el.dataset.scrollDir
+    const target = getScrollTarget(direction)
+    
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth' });
+    }
+  })
+})
+
+scrollToElements.forEach(el => {
+  el.addEventListener('click', e => {
+    e.preventDefault()
+    const targetId = el.getAttribute('href')
+    const target = document.querySelector(targetId)
+    
+    if (target) {
+      sectionsArray.forEach((section, index) => {
+        if (section.id === targetId.replace('#','')) {
+          currentSectionIndex = index
+        }
+      })
+      target.scrollIntoView({ behavior: 'smooth' });
+    }
+  })
+})
\ No newline at end of file
diff --git a/digital-walls/src/style.scss b/digital-walls/src/style.scss
new file mode 100644
index 0000000..5884083
--- /dev/null
+++ b/digital-walls/src/style.scss
@@ -0,0 +1,454 @@
+$header-height: 4rem;
+$section-height: 500px;
+$nav-width: 20%;
+$footer-height: 4rem;
+$border-radius: .5rem;
+$default-spacing: 2rem;
+
+$gray-dark: #121519;
+$gray: #a0a0a0;
+$gray-light: #F3F3F3;
+
+$indigo: #6C73DC;
+$teal: #89CDCE;
+$lightblue: #66AEE5;
+
+// ============= GENERAL CSS ==============
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  min-height:100vh;
+  height: 100%;
+  overflow: hidden;
+  color: #FFF;
+  background-color: $gray-dark;
+  font-family: 'Montserrat', 'Roboto', 'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
+ul, ol {
+  list-style-type:none;
+  padding:0;
+  margin:0;
+}
+
+a {
+  text-decoration:none;
+}
+
+p {
+  margin:1rem 0;
+}
+
+// ============= MAIN LAYOUT ==============
+
+.app {
+  display:grid;
+  grid-template-rows:     $header-height 1fr $footer-height;
+  grid-template-columns:  $nav-width 1fr;
+  height: 100vh;
+}
+
+.header,
+.footer {
+  font-size: .75rem;
+  font-weight:200;
+  text-transform:uppercase;
+  letter-spacing:1px;
+  color: $gray;
+}
+
+.header {
+  display:flex;
+  justify-content:space-between;
+  grid-column: 1 / -1;
+  padding:0 $default-spacing;
+  border-bottom: 1px solid rgba(#FFF, .1);
+  
+  &__left,
+  &__right {
+    display:flex;
+    align-items: center;
+  }
+}
+
+.main {
+  grid-column: 1 / -1;
+  padding: $default-spacing;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  perspective: 1px;
+  
+  scroll-snap-type: block proximity;
+  scroll-snap-destination: 0% 100%;
+  scroll-snap-points-y: repeat(100%);
+  
+  @media screen and (min-width:1024px) {
+    grid-column: 2 / -1;
+  }
+}
+
+.footer {
+  display:flex;
+  align-items:center;
+  grid-column: 1 / -1;
+  padding:0 $default-spacing;
+  border-top: 1px solid rgba(#FFF, .1);
+  
+  p {
+    margin-right:1rem;
+  }
+  
+  a {
+    color:#FFF;
+    &:hover, &:focus {
+      text-decoration:underline;
+    }
+  }
+  
+  &__more {
+    display:none;
+    margin-left: auto;
+    margin-right:0;
+    
+    @media screen and (min-width: 768px) {
+      display:block;
+    }
+  }
+}
+
+// ============= NAVIGATION ==============
+
+.nav {
+  display:none;
+  border-right: 1px solid rgba(#FFF, .1);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  
+  &__item:not(:last-child) {
+    border-bottom: 1px solid rgba(#FFF, .1);
+  }
+  
+  &__link {
+    display:block;
+    color: #FFF;
+    font-weight:200;
+    
+    &:hover,
+    &:focus {
+      background-color:rgba(#FFF, .035);
+    }
+  }
+  
+  @media screen and (min-width:1024px) {
+    display:block;
+    grid-column: 1 / 2;
+  }
+}
+
+// ============= PAGE SECTIONS ==============
+
+.section {
+  min-height: $section-height;
+  min-height: calc(100vh - #{$header-height} - #{$footer-height});
+  padding-top:($section-height / 2) + 50;
+  margin-bottom:$section-height / 2;
+  position:relative;
+  transform-style: preserve-3d;
+  scroll-snap-align: start;
+
+  &__header {
+    position:absolute;
+    top:50px;
+    left:0;
+    right:0;
+    height:500px;
+    padding: $default-spacing;
+    border-radius: $border-radius;
+    background-size:cover;
+    background-repeat:no-repeat;
+    background-position: center center;
+    text-shadow:0 0 20px rgba(0,0,0,0.25);
+    
+    &::after {
+      content:"";
+      display:block;
+      position:absolute;
+      top:50%;
+      left:0;
+      right:0;
+      bottom:0;
+      background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
+    }
+  }
+  &__title {
+    font-size: 3.5rem;
+    font-weight:200;
+    margin-bottom:.5rem;
+    line-height:1;
+  }
+  &__subtitle {
+    font-size: 1.5rem;
+  }
+  &__controls {
+    display:flex;
+    align-items:center;
+    position:absolute;
+    padding: 0 $default-spacing;
+    top:0;
+    left:0;
+    right: 0;
+    transform: translateY(-50%);
+  }
+  &__content {
+    position:relative;
+    z-index:1;
+    padding:0 $default-spacing / 2;
+  }
+  
+  @media screen and (min-width: 1024px) {
+    margin-bottom:$section-height * 1.5;
+
+    &__header {
+     transform: translateZ(-1px) scale(1.9);
+    }
+    &__content {
+      padding:0;
+      transform: translateZ(0);
+    }
+  }
+}
+
+// ============= CONTENT BOX GRID ==============
+
+.boxgrid {
+  display:grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  grid-auto-rows: minmax(150px, auto);
+  grid-gap: 2rem .5rem;
+  
+  &__item {
+    display:flex;
+    
+    &--wide {
+      grid-column: span 2;
+    }
+    &--push {
+      @media screen and (min-width: 1280px) {
+        grid-column: span 2;
+        padding-left: 50%;
+      }
+    }
+  }
+}
+
+// ============= CONTENT BOX ==============
+
+.box {
+  display:flex;
+  flex: 1 0 0;
+  position:relative;
+  padding: $default-spacing;
+  border-radius: $border-radius;
+  font-size:.875rem;
+  color: #FFF;
+  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
+  transform: scale(1);
+  transition: all .25s ease;
+  filter: brightness(100%);
+  
+  &:hover,
+  &:focus {
+    transform: scale(1.07);
+    filter: brightness(110%);
+    z-index:10;
+  }
+  
+  &--weather {
+    background-color: $teal;
+  }
+  &--cost {
+    background-color: $lightblue;
+  }
+  &--locations {
+    background-color: $indigo;
+  }
+  &--image,
+  &--video {
+    padding:0;
+  }
+  &--video {
+    // fake a video play button
+    &::before,
+    &::after {
+      content: "";
+      display:block;
+      position:absolute;
+      top:50%;
+      left:50%;
+      z-index:10;
+      transform: translate(-50%, -50%);
+    }
+    &::before {
+      width: 50px;
+      height:50px;
+      background-color: #FFF;
+      border-radius:50%;
+      box-shadow: 0 0 38px rgba(0,0,0,0.30);
+    }
+    &::after {
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 10px 0 10px 15px;
+      border-color: transparent transparent transparent $gray-dark;
+      margin-left:2px;
+    }
+  }
+  
+  &__img {
+    display:block;
+    width:100%;
+    height:100%;
+    position:absolute;
+    object-fit: cover;
+    object-position: center;
+    border-radius: $border-radius;
+  }
+}
+
+// ============= TOP/BOTTOM SCROLL CONTROLS ==============
+
+.scrollctrl {
+  display:none;
+  justify-content:center;
+  width:50vw;
+  height:50vw;
+  padding:0;
+  position:fixed;
+  border-radius:50%;
+  border: 1px solid rgba(#FFF, .1);
+  color:rgba(#FFF, .7);
+  background-color:transparent;
+  left:50%;
+  margin-left:-25%;
+  
+  &:hover,
+  &:focus {
+    background-color:rgba(#FFF, .035);
+  }
+  
+  &--prev {
+    top:0;
+    padding-top:44%;
+    align-items:flex-end;
+    transform:translateY(-42vw);
+  }
+  &--next {
+    bottom:0;
+    padding-bottom:44%;
+    transform:translateY(42vw);
+  }
+  
+  @media screen and (min-width: 1024px) {
+    display:flex;
+  }
+}
+
+// ============= MISC UTILITIES ==============
+
+.text--large {
+  font-size: 2rem;
+  font-weight: 200;
+}
+
+.arrow {
+  display: inline-block;
+  padding: 3px;
+  border-style:solid;
+  border-width: 0 2px 2px 0;
+
+  &--large {
+    padding:8px;
+    border-width: 0 1px 1px 0;
+  }
+  &--right {
+    transform: rotate(-45deg);
+  }
+
+  &--left {
+      transform: rotate(135deg);
+  }
+
+  &--up {
+      transform: rotate(-135deg);
+  }
+
+  &--down {
+      transform: rotate(45deg);
+  }
+}
+
+.media {
+  display:flex;
+  align-items:center;
+  padding: $default-spacing;
+  
+  &__img {
+    width: 60px;
+    height:60px;
+    margin-right: $default-spacing / 2;
+    border-radius: $border-radius / 2;
+    object-position: center center;
+    object-fit:cover;
+  }
+  &__content {
+    margin:0;
+  }
+}
+
+.user {
+  margin-left:auto;
+  text-align:center;
+  padding-top:2rem;
+  
+  &__name {
+    display:block;
+    font-size:1.5rem;
+    font-weight:200;
+  }
+  
+  &__img {
+    width:100px;
+    height:100px;
+    border-radius:50%;
+    margin-bottom:.5rem;
+    box-shadow: 0 0 38px rgba(0,0,0,0.30);
+  }
+}
+
+.btn {
+  display:flex;
+  flex:0 0 50px;
+  justify-content:center;
+  align-items:center;
+  width:50px;
+  height:50px;
+  border:0;
+  padding:0;
+  border:1px solid transparent;
+  border-radius:50%;
+  background-color:#FFF;
+  margin:0 .5rem;
+}
+
+button:focus {
+  outline:0;
+  border-color: $lightblue;
+  box-shadow:0 0 0 1px $lightblue;
+}
\ No newline at end of file
diff --git a/draggable-blend-generator/README.markdown b/draggable-blend-generator/README.markdown
new file mode 100644
index 0000000..7b62f14
--- /dev/null
+++ b/draggable-blend-generator/README.markdown
@@ -0,0 +1,9 @@
+# Draggable Blend Generator
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/petegarvin1/pen/rNLZjjQ](https://codepen.io/petegarvin1/pen/rNLZjjQ).
+
+Generator to let you experiment with background-blend-mode and mix-blend-mode css properties together easily.
+
+Set background color and image on the left, and select blend effect to blend background and color.
+
+On the right you can set the mix blend mode, and drag the filter section over the background as far as you like to create different effects.
diff --git a/draggable-blend-generator/dist/index.html b/draggable-blend-generator/dist/index.html
new file mode 100644
index 0000000..21e9a22
--- /dev/null
+++ b/draggable-blend-generator/dist/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Draggable Blend Generator</title>
+  <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="bannerContainer">
+    <div class="banner banner1">
+      <div class="dragMe">^</div>
+    </div>
+  </div>
+  <div class="input colorInput">
+    <div><input class="colorUpdateInput" placeholder="enter custom background color" /></div>
+    <div><button class="colorUpdate">go</button></div>
+  </div>
+  <h1 class="backgroundTitle">background-blend-mode</h1>
+  <div class="buttonContainer backgroundButtons">
+    <button class="background multiply">multiply</button>
+    <button class="background screen">screen</button>
+    <button class="background overlay">overlay</button>
+    <button class="background darken">darken</button>
+    <button class="background lighten">lighten</button>
+    <button class="background color-dodge">color-dodge</button>
+    <button class="background color-burn">color-burn</button>
+    <button class="background hard-light  active">hard-light</button>
+    <button class="background soft-light">soft-light</button>
+    <button class="background difference">difference</button>
+    <button class="background exclusion">exclusion</button>
+    <button class="background hue">hue</button>
+    <button class="background color">color</button>
+  </div>
+
+  <div class="input backgroundInput">
+    <div><input class="backgroundUpdateInput" placeholder="enter custom background url" /></div>
+    <div><button class="urlUpdate">go</button></div>
+  </div>
+
+  <h1 class="mixTitle">mix-blend-mode</h1>
+  <div class="buttonContainer mixButtons">
+    <button class="mix multiply">multiply</button>
+    <button class="mix screen">screen</button>
+    <button class="mix overlay">overlay</button>
+    <button class="mix darken">darken</button>
+    <button class="mix lighten">lighten</button>
+    <button class="mix color-dodge">color-dodge</button>
+    <button class="mix color-burn">color-burn</button>
+    <button class="mix hard-light">hard-light</button>
+    <button class="mix soft-light">soft-light</button>
+    <button class="mix difference">difference</button>
+    <button class="mix exclusion">exclusion</button>
+    <button class="mix hue active">hue</button>
+    <button class="mix color">color</button>
+  </div>
+</div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/draggable-blend-generator/dist/script.js b/draggable-blend-generator/dist/script.js
new file mode 100644
index 0000000..912195f
--- /dev/null
+++ b/draggable-blend-generator/dist/script.js
@@ -0,0 +1,73 @@
+const filter = document.querySelector(".banner");
+const filterContainer = document.querySelector(".container");
+
+const bannerX = document.querySelector(".banner").offsetLeft;
+
+interact(filter)
+  .resizable({
+    edges: {
+      top: false,
+      bottom: false,
+      left: true,
+      right: false
+    }
+  })
+  .on("resizemove", (event) => {
+    let { x, y } = event.target.dataset;
+    x = parseFloat(x) || 0;
+    y = parseFloat(y) || 0;
+
+    Object.assign(event.target.style, {
+      width: `${event.rect.width}px`,
+      height: `${event.rect.height}px`,
+      transform: `translate(${event.deltaRect.left}px, ${event.deltaRect.top}px)`
+    });
+
+    Object.assign(event.target.dataset, { x, y });
+  });
+
+const backgroundButtons = document.querySelectorAll(".background");
+
+backgroundButtons.forEach((button) => {
+  button.addEventListener("click", function (e) {
+    e.preventDefault();
+
+    filterContainer.style.backgroundBlendMode = button.classList[1];
+    backgroundButtons.forEach((backgroundButton) =>
+      backgroundButton.classList.remove("active")
+    );
+    button.classList.add("active");
+  });
+});
+
+const mixButtons = document.querySelectorAll(".mix");
+
+mixButtons.forEach((button) => {
+  button.addEventListener("click", function (e) {
+    e.preventDefault();
+
+    filter.style.mixBlendMode = button.classList[1];
+    mixButtons.forEach((mixButton) => mixButton.classList.remove("active"));
+    button.classList.add("active");
+  });
+});
+
+const colorUpdateButton = document.querySelector(".colorUpdate");
+const colorUpdateInput = document.querySelector(".colorUpdateInput");
+
+colorUpdateButton.addEventListener("click", function (e) {
+  e.preventDefault();
+  console.log(colorUpdateInput.value);
+  filterContainer.style.backgroundColor = colorUpdateInput.value;
+  colorUpdateInput.value = "";
+});
+
+const backgroundUpdateButton = document.querySelector(".urlUpdate");
+const backgroundUpdateInput = document.querySelector(".backgroundUpdateInput");
+
+backgroundUpdateButton.addEventListener("click", function (e) {
+  e.preventDefault();
+
+  filterContainer.style.background = `url(${backgroundUpdateInput.value})`;
+  backgroundUpdateInput.value = "";
+});
\ No newline at end of file
diff --git a/draggable-blend-generator/dist/style.css b/draggable-blend-generator/dist/style.css
new file mode 100644
index 0000000..b88b139
--- /dev/null
+++ b/draggable-blend-generator/dist/style.css
@@ -0,0 +1,174 @@
+html {
+  background-color: white;
+}
+
+body {
+  margin: 0;
+}
+
+.container {
+  background: url(https://assets.codepen.io/489403/deniro.jpeg) no-repeat center center fixed;
+  background-color: red;
+  background-blend-mode: hard-light;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  color: white;
+}
+
+.bannerContainer {
+  width: 100%;
+  height: 100%;
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+}
+
+.banner {
+  border: 1px solid yellow;
+  justify-content: flex-start;
+  align-items: right;
+  display: flex;
+  flex-direction: column;
+  width: 20%;
+  height: 100%;
+  background: #002b65;
+  font-family: "Lato", sans-serif;
+  font-size: 0.9em;
+  position: relative;
+}
+
+.banner1 {
+  align-items: flex-end;
+  mix-blend-mode: hue;
+}
+
+h1 {
+  font-family: "Roboto";
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 50%;
+  width: 150px;
+  position: absolute;
+}
+
+.mixButtons {
+  right: 20px;
+}
+
+.backgroundButtons {
+  left: 20px;
+  align-items: flex-end;
+}
+
+button {
+  height: 25px;
+  width: 100px;
+  border-radius: 11px;
+  box-shadow: 2px 2px 10px;
+  font-family: "Roboto";
+  background: white;
+  color: #0e1111;
+}
+
+input {
+  font-family: "Roboto";
+}
+
+.active {
+  background: #0e1111;
+  color: white;
+  border: 2px solid #0e1111;
+  outline: none;
+}
+
+.dragMe {
+  color: red;
+  position: absolute;
+  top: 45%;
+  left: -62px;
+  text-align: center;
+  border-radius: 5px;
+  font-size: 1vw;
+  transform: rotate(-90deg);
+  background: grey;
+  z-index: 100;
+  width: 120px;
+  height: 20px;
+}
+
+.input {
+  box-shadow: 2px 2px 10px black;
+  position: absolute;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 20px;
+  width: 220px;
+  left: 20px;
+  border-radius: 20px;
+  padding: 10px;
+  background: white;
+}
+.input div {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.input input {
+  width: 170px;
+  border: none;
+  border-bottom: 1px solid black;
+  margin-left: 10px;
+}
+.input input:active, .input input:focus {
+  outline: none;
+}
+
+.colorInput {
+  top: 20px;
+}
+
+.colorUpdate,
+.urlUpdate {
+  width: 30px;
+  cursor: pointer;
+}
+.colorUpdate:active, .colorUpdate:focus,
+.urlUpdate:active,
+.urlUpdate:focus {
+  outline: none;
+}
+
+.backgroundInput {
+  top: 80px;
+}
+
+input {
+  margin-right: 10px;
+}
+input:active {
+  outline: none;
+}
+
+.backgroundTitle {
+  color: white;
+  position: absolute;
+  left: 30px;
+  transform: rotate(-90deg);
+}
+
+.mixTitle {
+  color: white;
+  position: absolute;
+  right: 90px;
+  transform: rotate(90deg);
+}
\ No newline at end of file
diff --git a/draggable-blend-generator/license.txt b/draggable-blend-generator/license.txt
new file mode 100644
index 0000000..07ddf00
--- /dev/null
+++ b/draggable-blend-generator/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by P (https://codepen.io/petegarvin1/pen/rNLZjjQ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/draggable-blend-generator/src/index.html b/draggable-blend-generator/src/index.html
new file mode 100644
index 0000000..f6c54e3
--- /dev/null
+++ b/draggable-blend-generator/src/index.html
@@ -0,0 +1,50 @@
+<div class="container">
+  <div class="bannerContainer">
+    <div class="banner banner1">
+      <div class="dragMe">^</div>
+    </div>
+  </div>
+  <div class="input colorInput">
+    <div><input class="colorUpdateInput" placeholder="enter custom background color" /></div>
+    <div><button class="colorUpdate">go</button></div>
+  </div>
+  <h1 class="backgroundTitle">background-blend-mode</h1>
+  <div class="buttonContainer backgroundButtons">
+    <button class="background multiply">multiply</button>
+    <button class="background screen">screen</button>
+    <button class="background overlay">overlay</button>
+    <button class="background darken">darken</button>
+    <button class="background lighten">lighten</button>
+    <button class="background color-dodge">color-dodge</button>
+    <button class="background color-burn">color-burn</button>
+    <button class="background hard-light  active">hard-light</button>
+    <button class="background soft-light">soft-light</button>
+    <button class="background difference">difference</button>
+    <button class="background exclusion">exclusion</button>
+    <button class="background hue">hue</button>
+    <button class="background color">color</button>
+  </div>
+
+  <div class="input backgroundInput">
+    <div><input class="backgroundUpdateInput" placeholder="enter custom background url" /></div>
+    <div><button class="urlUpdate">go</button></div>
+  </div>
+
+  <h1 class="mixTitle">mix-blend-mode</h1>
+  <div class="buttonContainer mixButtons">
+    <button class="mix multiply">multiply</button>
+    <button class="mix screen">screen</button>
+    <button class="mix overlay">overlay</button>
+    <button class="mix darken">darken</button>
+    <button class="mix lighten">lighten</button>
+    <button class="mix color-dodge">color-dodge</button>
+    <button class="mix color-burn">color-burn</button>
+    <button class="mix hard-light">hard-light</button>
+    <button class="mix soft-light">soft-light</button>
+    <button class="mix difference">difference</button>
+    <button class="mix exclusion">exclusion</button>
+    <button class="mix hue active">hue</button>
+    <button class="mix color">color</button>
+  </div>
+</div>
+</div>
\ No newline at end of file
diff --git a/draggable-blend-generator/src/script.js b/draggable-blend-generator/src/script.js
new file mode 100644
index 0000000..c621e27
--- /dev/null
+++ b/draggable-blend-generator/src/script.js
@@ -0,0 +1,73 @@
+const filter = document.querySelector(".banner");
+const filterContainer = document.querySelector(".container");
+
+const bannerX = document.querySelector(".banner").offsetLeft;
+
+interact(filter)
+  .resizable({
+    edges: {
+      top: false,
+      bottom: false,
+      left: true,
+      right: false
+    }
+  })
+  .on("resizemove", (event) => {
+    let { x, y } = event.target.dataset;
+    x = parseFloat(x) || 0;
+    y = parseFloat(y) || 0;
+
+    Object.assign(event.target.style, {
+      width: `${event.rect.width}px`,
+      height: `${event.rect.height}px`,
+      transform: `translate(${event.deltaRect.left}px, ${event.deltaRect.top}px)`
+    });
+
+    Object.assign(event.target.dataset, { x, y });
+  });
+
+const backgroundButtons = document.querySelectorAll(".background");
+
+backgroundButtons.forEach((button) => {
+  button.addEventListener("click", function (e) {
+    e.preventDefault();
+
+    filterContainer.style.backgroundBlendMode = button.classList[1];
+    backgroundButtons.forEach((backgroundButton) =>
+      backgroundButton.classList.remove("active")
+    );
+    button.classList.add("active");
+  });
+});
+
+const mixButtons = document.querySelectorAll(".mix");
+
+mixButtons.forEach((button) => {
+  button.addEventListener("click", function (e) {
+    e.preventDefault();
+
+    filter.style.mixBlendMode = button.classList[1];
+    mixButtons.forEach((mixButton) => mixButton.classList.remove("active"));
+    button.classList.add("active");
+  });
+});
+
+const colorUpdateButton = document.querySelector(".colorUpdate");
+const colorUpdateInput = document.querySelector(".colorUpdateInput");
+
+colorUpdateButton.addEventListener("click", function (e) {
+  e.preventDefault();
+  console.log(colorUpdateInput.value);
+  filterContainer.style.backgroundColor = colorUpdateInput.value;
+  colorUpdateInput.value = "";
+});
+
+const backgroundUpdateButton = document.querySelector(".urlUpdate");
+const backgroundUpdateInput = document.querySelector(".backgroundUpdateInput");
+
+backgroundUpdateButton.addEventListener("click", function (e) {
+  e.preventDefault();
+
+  filterContainer.style.background = `url(${backgroundUpdateInput.value})`;
+  backgroundUpdateInput.value = "";
+});
diff --git a/draggable-blend-generator/src/style.scss b/draggable-blend-generator/src/style.scss
new file mode 100644
index 0000000..3bad74e
--- /dev/null
+++ b/draggable-blend-generator/src/style.scss
@@ -0,0 +1,181 @@
+html {
+  background-color: white;
+}
+
+body {
+  margin: 0;
+}
+
+.container {
+  background: url(https://assets.codepen.io/489403/deniro.jpeg) no-repeat center
+    center fixed;
+  background-color: red;
+  background-blend-mode: hard-light;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  color: white;
+}
+
+.bannerContainer {
+  width: 100%;
+  height: 100%;
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+}
+
+.banner {
+  border: 1px solid yellow;
+  justify-content: flex-start;
+  align-items: right;
+  display: flex;
+  flex-direction: column;
+  width: 20%;
+  height: 100%;
+  background: #002b65;
+  font-family: "Lato", sans-serif;
+  font-size: 0.9em;
+  position: relative;
+}
+
+.banner1 {
+  align-items: flex-end;
+  mix-blend-mode: hue;
+}
+
+h1 {
+  font-family: "Roboto";
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  // border: 2px solid red;
+  height: 50%;
+  width: 150px;
+  position: absolute;
+}
+
+.mixButtons {
+  right: 20px;
+}
+
+.backgroundButtons {
+  left: 20px;
+  align-items: flex-end;
+}
+
+button {
+  height: 25px;
+  width: 100px;
+  border-radius: 11px;
+  box-shadow: 2px 2px 10px;
+  font-family: "Roboto";
+  background: white;
+  color: #0e1111;
+}
+
+input {
+  font-family: "Roboto";
+}
+
+.active {
+  background: #0e1111;
+  color: white;
+  border: 2px solid #0e1111;
+  outline: none;
+}
+
+.dragMe {
+  color: red;
+  position: absolute;
+  top: 45%;
+  left: -62px;
+  text-align: center;
+  border-radius: 5px;
+  font-size: 1vw;
+  transform: rotate(-90deg);
+  background: grey;
+  z-index: 100;
+  width: 120px;
+  height: 20px;
+}
+
+.input {
+  box-shadow: 2px 2px 10px black;
+  position: absolute;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 20px;
+  width: 220px;
+  left: 20px;
+  border-radius: 20px;
+  padding: 10px;
+  background: white;
+
+  div {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  input {
+    width: 170px;
+    border: none;
+    border-bottom: 1px solid black;
+    margin-left: 10px;
+
+    &:active,
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.colorInput {
+  top: 20px;
+}
+
+.colorUpdate,
+.urlUpdate {
+  width: 30px;
+  cursor: pointer;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+
+.backgroundInput {
+  top: 80px;
+}
+
+input {
+  margin-right: 10px;
+
+  &:active {
+    outline: none;
+  }
+}
+
+.backgroundTitle {
+  color: white;
+  position: absolute;
+  left: 30px;
+  transform: rotate(-90deg);
+}
+
+.mixTitle {
+  color: white;
+  position: absolute;
+  right: 90px;
+  transform: rotate(90deg);
+}
diff --git a/draggable-plugin-hello-kitty/README.markdown b/draggable-plugin-hello-kitty/README.markdown
new file mode 100644
index 0000000..61ea65d
--- /dev/null
+++ b/draggable-plugin-hello-kitty/README.markdown
@@ -0,0 +1,5 @@
+# Draggable plugin Hello Kitty
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/cgorton/pen/XQLeBq](https://codepen.io/cgorton/pen/XQLeBq).
+
+ Created for a blog post I put on Dev.to on how to get started with the GSAP draggable plugin
+https://dev.to/coffeecraftcode/have-fun-with-greensock-s-draggable-and-hello-kitty-996
\ No newline at end of file
diff --git a/draggable-plugin-hello-kitty/dist/index.html b/draggable-plugin-hello-kitty/dist/index.html
new file mode 100644
index 0000000..e6cd0a0
--- /dev/null
+++ b/draggable-plugin-hello-kitty/dist/index.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Draggable plugin Hello Kitty</title>
+  <link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet"> <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>Drag the accessories around to dress Hello Kitty</h1>
+
+<svg viewBox="0 0 1280 798" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
+  <g transform="translate(0 -2.018)">
+    <g id="kitty" transform="translate(-205.251 -179.567)">
+      <path d="M814.599 537.236s-26.83 59.85-18.082 73.419c9.546 14.806 9.927 13.154 17.792 14.774 12.676 2.61 34.064-1.645 33.937-1.67l.233-30.656-.233 30.656s33.545 3.472 38.742 1.327c2.786-1.149 9.194-6.648 12.343-14.317 2.957-7.204 2.808-16.437 1.012-22.379-3.707-12.268-17.73-50.045-17.73-50.045-23.768 3.302-46.47 3.035-68.014-1.109z" fill="#fff" stroke="#000" stroke-width="4.5"/>
+      <path d="M808.064 536.983s-10.107 12.462-16.013 13.65c-4.637.934-13.232-.875-14.938 5.026-.894 3.094 3.616 9.767 3.616 9.767-3.21.379-7.131 13.458-1.674 16.504 3.612 2.017 13.059 7.317 16.407 3.226 5.849-7.148 18.688-46.109 18.688-46.109l-6.086-2.064zM888.706 536.316s10.107 12.462 16.013 13.65c4.637.934 13.232-.875 14.938 5.026.894 3.094-3.616 9.767-3.616 9.767 3.21.379 7.131 13.458 1.674 16.504-3.612 2.017-13.059 7.317-16.407 3.226-5.849-7.148-18.688-46.11-18.688-46.11l6.086-2.063z" fill="#fff" stroke="#000" stroke-width="4.5"/>
+      <path d="M846.419 421.648c50.704 0 91.873 23.194 91.873 60.536 0 37.341-42.137 56.376-92.84 56.376-50.704 0-90.897-19.035-90.897-56.376 0-37.342 41.16-60.536 91.864-60.536z" fill="#fff" stroke="#060000" stroke-width="3.65" transform="matrix(.89619 0 0 1.01801 90.55 -8.824)"/>
+      <path id="ear-2" d="M775.94 452.914s-5.537-35.201 5.516-39.335c11.052-4.134 36.772 12.865 36.772 12.865.671 34.623-14.452 41.64-42.288 26.47z" fill="#fff" stroke="#060000" stroke-width="3.5"/>
+      <ellipse cx="801.684" cy="446.328" rx="23.033" ry="22.78" fill="#fff"/>
+      <path d="M922.7 451.887s5.537-35.201-5.516-39.335c-11.052-4.134-36.772 12.865-36.772 12.865-1.584 29.525 14.696 35.464 42.288 26.47z" fill="#fff" stroke="#060000" stroke-width="3.5" id="ear-1"/>
+      <ellipse cx="808.458" cy="495.715" rx="5.086" ry="7.1" class="iris" id="eye-2" transform="translate(.94 1.992)"/>
+      <ellipse id="nose" cx="849.266" cy="512.63" rx="9.543" ry="6.942" fill="#fad426" stroke="#000" stroke-width="2"/>
+      <ellipse cx="808.458" cy="495.715" rx="5.086" ry="7.1" class="iris" id="eye-1" transform="translate(80.154 2.088)"/>
+      <path d="M780.71 489.032s-16.438-1.742-20.263-.524M915.46 486.213s16.438-1.742 20.263-.524M780.351 504.308s-16.438-1.742-20.263-.524M915.82 501.49s16.438-1.742 20.263-.524M784.296 517.187s-16.438-1.742-20.263-.524M911.88 514.369s16.438-1.742 20.263-.524" fill="none" stroke="#000" stroke-width="4.5"/>
+      <ellipse cx="801.684" cy="446.328" rx="23.033" ry="22.78" fill="#fff" transform="translate(94.738 -2.024)"/>
+    </g>
+    <g id="p-bow" class="drag" transform="translate(626.641 319.982)">
+      <path d="M317.256 22.06c9.305 0 32.569 34.262 27.916 41.114-4.653 6.853-51.179 6.853-55.832 0-4.653-6.852 18.611-41.114 27.916-41.114z" fill="#f61d71" stroke="#000" stroke-width="3.27" transform="matrix(.36744 -.77303 -.88136 -.41893 140.592 321.208)"/>
+      <ellipse cx="226.982" cy="57.606" rx="7.76" ry="7.989" fill="#f61d71" stroke="#000" stroke-width="1.5" transform="translate(-2.858 .016)"/>
+      <path d="M317.256 22.06c9.305 0 32.569 34.262 27.916 41.114-4.653 6.853-51.179 6.853-55.832 0-4.653-6.852 18.611-41.114 27.916-41.114z" fill="#f61d71" stroke="#000" stroke-width="3.27" transform="matrix(.5009 .69404 -.7913 .57109 151.09 -173.539)"/>
+      <ellipse cx="226.982" cy="57.606" rx="7.76" ry="7.989" fill="#f61d71" stroke="#000" stroke-width="1.5" transform="translate(35.653 14.287)"/>
+      <path d="M263.878 53.56a7.457 7.457 0 0 0-7.454-7.453h-14.907a7.457 7.457 0 0 0-7.453 7.453v15.693a7.457 7.457 0 0 0 7.453 7.454h14.907a7.457 7.457 0 0 0 7.454-7.454V53.56z" fill="#f61d71" stroke="#000" stroke-width="2.83" transform="matrix(1.00418 .38434 -.37315 .97496 15.604 -90.95)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(-1.253 25.855)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(24.243 15.007)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(33.4 30.708)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(52.228 46.651)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(67.205 37.47)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(66.269 23.155)"/>
+    </g>
+    <g id="b-bow" class="drag">
+      <path d="M317.256 22.06c9.305 0 32.569 34.262 27.916 41.114-4.653 6.853-51.179 6.853-55.832 0-4.653-6.852 18.611-41.114 27.916-41.114z" fill="#3ba2f7" stroke="#000" stroke-width="3.27" transform="matrix(.36744 -.77303 -.88136 -.41893 765.243 753.101)"/>
+      <ellipse cx="226.982" cy="57.606" rx="7.76" ry="7.989" fill="#3ba2f7" stroke="#000" stroke-width="1.5" transform="translate(621.793 431.91)"/>
+      <path d="M317.256 22.06c9.305 0 32.569 34.262 27.916 41.114-4.653 6.853-51.179 6.853-55.832 0-4.653-6.852 18.611-41.114 27.916-41.114z" fill="#3ba2f7" stroke="#000" stroke-width="3.27" transform="matrix(.5009 .69404 -.7913 .57109 775.741 258.354)"/>
+      <ellipse cx="226.982" cy="57.606" rx="7.76" ry="7.989" fill="#3ba2f7" stroke="#000" stroke-width="1.5" transform="translate(660.304 446.18)"/>
+      <path d="M263.878 53.56a7.457 7.457 0 0 0-7.454-7.453h-14.907a7.457 7.457 0 0 0-7.453 7.453v15.693a7.457 7.457 0 0 0 7.453 7.454h14.907a7.457 7.457 0 0 0 7.454-7.454V53.56z" fill="#3ba2f7" stroke="#000" stroke-width="2.83" transform="matrix(1.00418 .38434 -.37315 .97496 640.255 340.943)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(624.651 431.893)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(623.398 457.748)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(648.894 446.9)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(658.05 462.601)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(676.879 478.544)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(691.856 469.363)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(690.92 455.048)"/>
+    </g>
+    <g id="s-shirt" class="drag">
+      <path d="M391.354 276.786l-24.48 8.268s10.269 21.015 13.981 16.99c3.757-4.073 10.499-25.258 10.499-25.258zM461.21 281.247l9.278 20.314 18.654-15.626s-27.683-7.905-27.932-4.688" fill="#fbfbfb" stroke="#060000" stroke-width="2.5"/>
+      <path d="M391.828 276.814s-15.017 39.539-14.734 39.653c3.341 1.338 13.032.044 25.343 1.278 31.553 3.16 83.845 2.986 74.945-1.905l-16.797-35.711-26.965-.804-6.543 10.048-11.671-10.202-23.578-2.357z" fill="#fbfbfb" stroke="#060000" stroke-width="2.5"/>
+      <path d="M266.636 427.142l22.116.7 1.005-16.466-23.121 15.766 10.335-7.047s-17.915-6.399-2.648-14.934c8.058-4.505 15.493 5.373 15.434 6.215" fill="#f84e4a" stroke="#060000" stroke-width="2.36" transform="matrix(1.11656 0 0 1 101.859 -117.76)"/>
+      <path d="M266.636 427.142l22.116.7 1.005-16.466-23.121 15.766 10.335-7.047s-17.915-6.399-2.648-14.934c8.058-4.505 15.493 5.373 15.434 6.215" fill="#f84e4a" stroke="#060000" stroke-width="2.37" transform="matrix(-1.10851 0 0 1 748.246 -117.388)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#f84e4a" stroke="#060000" stroke-width="2" transform="translate(133.041 -120.88)"/>
+      <path d="M390.904 279.25l30.792 12.314.434-6.432-6.21-6.153-25.095-2.032M460.585 281.064l-30.953 11.903-.348-6.437 6.29-6.07 25.01.604z" fill="#020168" stroke="#060000" stroke-width="2.5"/>
+    </g>
+    <g id="r-shirt" class="drag">
+      <path d="M387.077 216.698l-24.48 8.268s10.269 21.015 13.981 16.99c3.757-4.073 10.499-25.258 10.499-25.258zM456.933 221.159l9.278 20.314 18.654-15.626s-27.683-7.905-27.932-4.688" fill="#f90803" stroke="#060000" stroke-width="2.5"/>
+      <path d="M387.551 216.726s-15.017 39.539-14.734 39.653c3.341 1.338 13.032.044 25.343 1.278 31.553 3.16 83.845 2.986 74.945-1.905l-16.797-35.711-26.655.26-9.062-.066-11.027-1.084-22.013-2.425z" fill="#f90803" stroke="#060000" stroke-width="2.5"/>
+      <path d="M388.921 216.877c-.085.775 26.257 15.194 26.257 15.194l6.217-10.906s-32.388-5.064-32.474-4.288z" fill="#fff" stroke="#060000" stroke-width="2"/>
+      <path d="M210.706 528.536c-.085.775 26.257 15.194 26.257 15.194l6.217-10.906s-32.388-5.064-32.474-4.288z" fill="#fff" stroke="#060000" stroke-width="1.94" transform="matrix(-1.00513 -.15349 -.1575 1.03142 751.49 -291.768)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#fff" transform="matrix(.706 0 0 .706 214.653 -52.483)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#fff" transform="matrix(.706 0 0 .706 214.532 -45.784)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#fff" transform="matrix(.706 0 0 .706 214.412 -39.086)"/>
+      <path d="M486.745 229.679a1.734 1.734 0 0 0 .218-2.442l-2.221-2.66a1.734 1.734 0 0 0-2.441-.22l-15.809 13.205a1.734 1.734 0 0 0-.219 2.44l2.222 2.66a1.735 1.735 0 0 0 2.442.22l15.808-13.203zM366.844 223.02a1.734 1.734 0 0 0-2.387-.559l-2.945 1.828a1.734 1.734 0 0 0-.558 2.386l10.86 17.5a1.734 1.734 0 0 0 2.387.56l2.945-1.828a1.735 1.735 0 0 0 .56-2.387l-10.862-17.5z" fill="#fff" stroke="#060000" stroke-width="2"/>
+    </g>
+    <g id="w-shirt" class="drag">
+      <path d="M386.877 337.785l-24.48 8.268s10.269 21.015 13.981 16.991c3.757-4.074 10.499-25.259 10.499-25.259zM456.733 342.246l9.278 20.314 18.654-15.626s-27.683-7.905-27.932-4.688" fill="#fbfbfb" stroke="#060000" stroke-width="2.5"/>
+      <path d="M387.351 337.813s-15.017 39.54-14.734 39.653c3.341 1.338 13.032.044 25.343 1.278 31.553 3.161 83.845 2.986 74.945-1.905l-16.797-35.71-26.655.26-9.062-.067-11.027-1.084-22.013-2.425z" fill="#fbfbfb" stroke="#060000" stroke-width="2.5"/>
+      <path d="M454.284 356.19a2.328 2.328 0 0 0-2.327-2.326h-7.713a2.328 2.328 0 0 0-2.327 2.326v4.653a2.328 2.328 0 0 0 2.327 2.326h7.713a2.328 2.328 0 0 0 2.327-2.326v-4.653z" fill="#fbfbfb" stroke="#060000" stroke-width="2"/>
+      <path d="M388.721 337.964c-.085.775 26.257 15.194 26.257 15.194l6.217-10.906s-32.388-5.064-32.474-4.288z" fill="#fff" stroke="#060000" stroke-width="2"/>
+      <path d="M210.706 528.536c-.085.775 26.257 15.194 26.257 15.194l6.217-10.906s-32.388-5.064-32.474-4.288z" fill="#fff" stroke="#060000" stroke-width="1.94" transform="matrix(-1.00513 -.15349 -.1575 1.03142 751.29 -170.68)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#060000" transform="matrix(.706 0 0 .706 214.453 68.604)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#060000" transform="matrix(.706 0 0 .706 214.332 75.303)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#060000" transform="matrix(.706 0 0 .706 214.212 82.001)"/>
+    </g>
+    <g id="r-bow" class="drag">
+      <path d="M853.662 264.874s-12.629-19.103-17.797-16.888c-5.167 2.215-4.069 6.173-4.142 11.51-.048 3.513-8.591-1.474-10.907 3.305-2.319 4.786.356 10.345 2.86 12.612 2.505 2.268-8.811 1.76-6.536 8.173 2.118 5.97 10.875 7.698 27.734 2.364 16.858-5.334 8.788-21.076 8.788-21.076zM885.441 275.099s22.279-5.3 24.534-.149c2.255 5.15-1.253 7.287-4.85 11.23-2.368 2.596 7.276 4.8 5.697 9.87-1.582 5.078-7.335 7.304-10.713 7.246-3.378-.059 5.225 7.31-.821 10.433-5.628 2.906-13.199-1.822-21.85-17.244-8.65-15.421 8.003-21.386 8.003-21.386z" fill="#f81f02" stroke="#060000" stroke-width="2.5"/>
+      <ellipse cx="289.895" cy="328.517" rx="15.687" ry="17.93" fill="#f74203" stroke="#060000" stroke-width="2.22" transform="matrix(1.23802 0 0 1 505.827 -49.519)"/>
+    </g>
+    <g id="mermaid" class="drag">
+      <path d="M477.91 575.404s-.049 14.281 9.447 17.963c4.171 1.617 16.81 5.56 27.117 7.566 13.157 2.56 20.902 6.608 24.43 6.006 3.338-.57-2.5-2.467-3.269-9.62-1.097-10.212 1.393-21.288-1.558-26.655-4.24-7.714-25.277-18.479-25.277-18.479-.542 4.067 21.851-5.626 27.545-17.865 2.813-6.049.473-14.489 1.872-19.925 1.186-4.606 11.261-12.296 6.521-12.69-5.268-.439-29.116 7.26-38.132 10.058-16.217 5.673-22.696 20.115-24.249 38.993l-4.447 24.649M431.277 516.036a3.063 3.063 0 0 0-2.583-3.476s-41.679-6.661-50.71-7.477c-1.438-.13-2.825 1.295-3.476 2.582-.728 1.44-1.175 4.47-.894 6.059.253 1.42 1.17 3.185 2.583 3.476 8.883 1.825 50.71 7.477 50.71 7.477a3.063 3.063 0 0 0 3.477-2.583l.893-6.058z" fill="#83f9dc" stroke="#000" stroke-width="3.5"/>
+      <path d="M419.163 527.588c0-1.69-1.531-3.062-3.416-3.062 0 0-41.556-.51-50.551 0-1.527.087-2.883 1.629-3.416 3.062-.569 1.531-.569 4.593 0 6.124.533 1.433 1.889 2.975 3.416 3.062 8.995.51 50.551 0 50.551 0 1.885 0 3.416-1.372 3.416-3.062v-6.124z" fill="#83f9dc" stroke="#000" stroke-width="3.69" transform="matrix(-.87994 .1712 .19098 .9816 698.17 -73.688)"/>
+      <path d="M376.415 517.524s-20.657 43.41 28.207 61.073c48.864 17.663 76.494-5.99 77.791-5.73 1.298.26 14.437-3.683 12.394-19.548-.62-4.82-.968.627-3.162-1.621-2.213-2.268-6.846.83-6.846.83l-3.175 2.644s1.262-40.127-3.22-41.445c-2.159-.635-21.848 2.944-45.867 4.004-25.872 1.14-56.122-.207-56.122-.207z" fill="#3bd0a2" stroke="#000" stroke-width="4.5"/>
+      <path d="M375.642 551.504c0 .5.359 1.205.459 1.729.523 2.74 2.521 2.126 4.435.85.236-.157 1.188-1.22 1.3-1.163.793.396.397 2.45 1.54 2.842.926.318 2.45.194 3.165-.532.146-.149.97-1.352 1.152-1.17.503.504.848 1.735 1.462 2.042 1.104.552 4.588.5 4.588-1.113" fill="none" stroke="#39a890" stroke-opacity=".38" stroke-width="1.74" transform="matrix(1.39967 0 0 .82315 -144.373 79.089)"/>
+      <path d="M375.642 551.504c0 .5.359 1.205.459 1.729.523 2.74 2.521 2.126 4.435.85.236-.157 1.188-1.22 1.3-1.163.793.396.397 2.45 1.54 2.842.926.318 2.45.194 3.165-.532.146-.149.97-1.352 1.152-1.17.503.504.848 1.735 1.462 2.042 1.104.552 4.588.5 4.588-1.113" fill="none" stroke="#39a890" stroke-opacity=".38" stroke-width="1.74" transform="matrix(1.39967 0 0 .82315 -127.88 98.793)"/>
+      <path d="M375.642 551.504c0 .5.359 1.205.459 1.729.523 2.74 2.521 2.126 4.435.85.236-.157 1.188-1.22 1.3-1.163.793.396.397 2.45 1.54 2.842.926.318 2.45.194 3.165-.532.146-.149.97-1.352 1.152-1.17.503.504.848 1.735 1.462 2.042 1.104.552 4.588.5 4.588-1.113" fill="none" stroke="#39a890" stroke-opacity=".38" stroke-width="1.74" transform="matrix(1.39967 0 0 .82315 -94.835 80.375)"/>
+      <path d="M375.642 551.504c0 .5.359 1.205.459 1.729.523 2.74 2.521 2.126 4.435.85.236-.157 1.188-1.22 1.3-1.163.793.396.397 2.45 1.54 2.842.926.318 2.45.194 3.165-.532.146-.149.97-1.352 1.152-1.17.503.504.848 1.735 1.462 2.042 1.104.552 4.588.5 4.588-1.113" fill="none" stroke="#39a890" stroke-opacity=".38" stroke-width="1.74" transform="matrix(1.39967 0 0 .82315 -78.765 102.623)"/>
+    </g>
+    <g id="glasses" class="drag">
+      <path fill="none" stroke="#000" stroke-width="2.5" d="M801.506 581.416h34.278v23.688h-34.278zM879.22 581.497h34.278v23.688H879.22z"/>
+      <path d="M836.993 319.949l41.57.278" fill="none" stroke="#000" stroke-width="2.86" transform="matrix(.9674 0 0 .77007 28.133 345.95)"/>
+    </g>
+    <g id="dress" class="drag">
+      <g transform="translate(-464.944 153.649)">
+        <ellipse cx="872.165" cy="253.122" rx="20.43" ry="12.773" fill="#f33a7a" stroke="#000" stroke-width="2.5" transform="translate(1.048 -1.609)"/>
+        <ellipse cx="872.165" cy="253.122" rx="20.43" ry="12.773" fill="#f33a7a" stroke="#000" stroke-width="2.5" transform="translate(41.97 .202)"/>
+        <path d="M850.01 252.697s8.596-16.15 6.564-19.777c-2.032-3.628-12.192-4.01-18.756-1.988-2.312 8.723 2.208 15.873 12.192 21.765zM935.94 254.858s-8.596-16.15-6.564-19.777c2.032-3.628 12.192-4.01 18.756-1.988 2.312 8.723-2.208 15.873-12.192 21.765z" fill="#f33a7a" stroke="#000" stroke-width="2.5"/>
+        <path d="M839.017 242.361s-9.33-1.303-9.299 1.528c.032 2.831 3.939 10.202 9.489 15.461l10.173-6.408-10.363-10.581zM946.933 244.522s9.33-1.303 9.299 1.528c-.032 2.83-3.939 10.202-9.489 15.46l-10.173-6.407 10.363-10.581z" fill="#f8a3a5" stroke="#000" stroke-width="2.5"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(9.972 1.684)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(19.944 3.368)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(29.747 4.215)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(63.281 6.402)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(74.149 6.692)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(84.774 6.49)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(95.398 6.288)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(106.023 6.086)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(116.648 5.884)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(127.273 5.682)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.38" transform="matrix(1.22671 .26367 -.16652 .77472 3.417 -143.04)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(41.171 4.912)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(51.614 5.788)"/>
+        <path d="M847.512 253.083l91.025 1.586 26.877 67.04c-52.068 7.885-101.721 5.562-149.644-4.066l31.742-64.56z" fill="#f8a3a5" stroke="#000" stroke-width="2.5"/>
+        <path d="M821.474 306.04s.447-20.091 4.844-28.763c4.4-8.677 14.883-19.501 21.556-23.299 5.356-3.049 22.246-.082 22.246-.082l-48.646 52.144zM962.471 312.37s3.688-24.862-.709-33.534c-4.4-8.677-14.883-19.501-21.556-23.3-5.356-3.048-22.44-.616-22.44-.616l44.705 57.45z" fill="#f33a7a" stroke="#000" stroke-width="2.5"/>
+      </g>
+      <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="matrix(1.28315 .04212 -.09373 .72264 -681.355 206.68)"/>
+      <path d="M405.632 407.868s-9.43 14.356-17.683 32.236c-6.921 14.992-13.266 34.001-10.967 35.45 11.574 7.299 108.351 5.448 101.749 1.796 1.142.218-5.705-18.96-11.386-36.807-5.114-16.063-13.48-30.639-15.476-31.817-1.986-1.173-46.237-.858-46.237-.858z" fill="#fff" stroke="#000" stroke-width="2.5"/>
+      <path d="M396.648 425.467c6.335 4.559 13.804 4.594 22.211.881 7.412 4.113 14.779 5.162 22.06.47 7.652 3.758 14.32 3.803 19.713-.965" fill="none" stroke="#000" stroke-width="2.5"/>
+      <path d="M861.592 271.818c6.335 4.559 13.804 4.594 22.211.881 7.412 4.113 14.779 5.162 22.06.47 7.652 3.758 14.32 3.803 19.713-.965" fill="none" stroke="#000" stroke-width="2.29" transform="matrix(1.17678 0 0 1 -623.935 168.444)"/>
+      <path d="M861.592 271.818c6.335 4.559 13.804 4.594 22.211.881 7.412 4.113 14.779 5.162 22.06.47 7.652 3.758 14.32 3.803 19.713-.965" fill="none" stroke="#000" stroke-width="2.01" transform="matrix(1.44275 0 0 1 -862.375 189.372)"/>
+    </g>
+  </g>
+</svg>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/draggable-plugin-hello-kitty/dist/script.js b/draggable-plugin-hello-kitty/dist/script.js
new file mode 100644
index 0000000..ecd320d
--- /dev/null
+++ b/draggable-plugin-hello-kitty/dist/script.js
@@ -0,0 +1,15 @@
+
+var eyeTl = TweenMax.to(".iris", 0.1, {
+  scaleY: 0,
+  transformOrigin: "center bottom",
+  repeat: 1,
+  yoyo: true,
+  onComplete: function () {
+    this.delay(Math.random() + 0.8).restart(true);
+  } });
+
+
+
+let draggable = Draggable.create(".drag", {
+  type: "x,y" });
+//draggable plugin code
\ No newline at end of file
diff --git a/draggable-plugin-hello-kitty/dist/style.css b/draggable-plugin-hello-kitty/dist/style.css
new file mode 100644
index 0000000..a9ecfe4
--- /dev/null
+++ b/draggable-plugin-hello-kitty/dist/style.css
@@ -0,0 +1,13 @@
+body {
+  background: #ee9ca7;
+  background: linear-gradient(to bottom, #ee9ca7, #ffdde1);
+  font-family: 'Bubblegum Sans', cursive;
+}
+
+h1 {
+  text-align: center;
+  background-image: linear-gradient(to right, #b01455, #5C2A79, #BC353E);
+  -webkit-background-clip: text;
+  color: transparent;
+  padding-top: 2rem;
+}
diff --git a/draggable-plugin-hello-kitty/license.txt b/draggable-plugin-hello-kitty/license.txt
new file mode 100644
index 0000000..7f45170
--- /dev/null
+++ b/draggable-plugin-hello-kitty/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Christina Gorton (https://codepen.io/cgorton/pen/XQLeBq)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/draggable-plugin-hello-kitty/src/index.html b/draggable-plugin-hello-kitty/src/index.html
new file mode 100644
index 0000000..ac8818c
--- /dev/null
+++ b/draggable-plugin-hello-kitty/src/index.html
@@ -0,0 +1,121 @@
+<h1>Drag the accessories around to dress Hello Kitty</h1>
+
+<svg viewBox="0 0 1280 798" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
+  <g transform="translate(0 -2.018)">
+    <g id="kitty" transform="translate(-205.251 -179.567)">
+      <path d="M814.599 537.236s-26.83 59.85-18.082 73.419c9.546 14.806 9.927 13.154 17.792 14.774 12.676 2.61 34.064-1.645 33.937-1.67l.233-30.656-.233 30.656s33.545 3.472 38.742 1.327c2.786-1.149 9.194-6.648 12.343-14.317 2.957-7.204 2.808-16.437 1.012-22.379-3.707-12.268-17.73-50.045-17.73-50.045-23.768 3.302-46.47 3.035-68.014-1.109z" fill="#fff" stroke="#000" stroke-width="4.5"/>
+      <path d="M808.064 536.983s-10.107 12.462-16.013 13.65c-4.637.934-13.232-.875-14.938 5.026-.894 3.094 3.616 9.767 3.616 9.767-3.21.379-7.131 13.458-1.674 16.504 3.612 2.017 13.059 7.317 16.407 3.226 5.849-7.148 18.688-46.109 18.688-46.109l-6.086-2.064zM888.706 536.316s10.107 12.462 16.013 13.65c4.637.934 13.232-.875 14.938 5.026.894 3.094-3.616 9.767-3.616 9.767 3.21.379 7.131 13.458 1.674 16.504-3.612 2.017-13.059 7.317-16.407 3.226-5.849-7.148-18.688-46.11-18.688-46.11l6.086-2.063z" fill="#fff" stroke="#000" stroke-width="4.5"/>
+      <path d="M846.419 421.648c50.704 0 91.873 23.194 91.873 60.536 0 37.341-42.137 56.376-92.84 56.376-50.704 0-90.897-19.035-90.897-56.376 0-37.342 41.16-60.536 91.864-60.536z" fill="#fff" stroke="#060000" stroke-width="3.65" transform="matrix(.89619 0 0 1.01801 90.55 -8.824)"/>
+      <path id="ear-2" d="M775.94 452.914s-5.537-35.201 5.516-39.335c11.052-4.134 36.772 12.865 36.772 12.865.671 34.623-14.452 41.64-42.288 26.47z" fill="#fff" stroke="#060000" stroke-width="3.5"/>
+      <ellipse cx="801.684" cy="446.328" rx="23.033" ry="22.78" fill="#fff"/>
+      <path d="M922.7 451.887s5.537-35.201-5.516-39.335c-11.052-4.134-36.772 12.865-36.772 12.865-1.584 29.525 14.696 35.464 42.288 26.47z" fill="#fff" stroke="#060000" stroke-width="3.5" id="ear-1"/>
+      <ellipse cx="808.458" cy="495.715" rx="5.086" ry="7.1" class="iris" id="eye-2" transform="translate(.94 1.992)"/>
+      <ellipse id="nose" cx="849.266" cy="512.63" rx="9.543" ry="6.942" fill="#fad426" stroke="#000" stroke-width="2"/>
+      <ellipse cx="808.458" cy="495.715" rx="5.086" ry="7.1" class="iris" id="eye-1" transform="translate(80.154 2.088)"/>
+      <path d="M780.71 489.032s-16.438-1.742-20.263-.524M915.46 486.213s16.438-1.742 20.263-.524M780.351 504.308s-16.438-1.742-20.263-.524M915.82 501.49s16.438-1.742 20.263-.524M784.296 517.187s-16.438-1.742-20.263-.524M911.88 514.369s16.438-1.742 20.263-.524" fill="none" stroke="#000" stroke-width="4.5"/>
+      <ellipse cx="801.684" cy="446.328" rx="23.033" ry="22.78" fill="#fff" transform="translate(94.738 -2.024)"/>
+    </g>
+    <g id="p-bow" class="drag" transform="translate(626.641 319.982)">
+      <path d="M317.256 22.06c9.305 0 32.569 34.262 27.916 41.114-4.653 6.853-51.179 6.853-55.832 0-4.653-6.852 18.611-41.114 27.916-41.114z" fill="#f61d71" stroke="#000" stroke-width="3.27" transform="matrix(.36744 -.77303 -.88136 -.41893 140.592 321.208)"/>
+      <ellipse cx="226.982" cy="57.606" rx="7.76" ry="7.989" fill="#f61d71" stroke="#000" stroke-width="1.5" transform="translate(-2.858 .016)"/>
+      <path d="M317.256 22.06c9.305 0 32.569 34.262 27.916 41.114-4.653 6.853-51.179 6.853-55.832 0-4.653-6.852 18.611-41.114 27.916-41.114z" fill="#f61d71" stroke="#000" stroke-width="3.27" transform="matrix(.5009 .69404 -.7913 .57109 151.09 -173.539)"/>
+      <ellipse cx="226.982" cy="57.606" rx="7.76" ry="7.989" fill="#f61d71" stroke="#000" stroke-width="1.5" transform="translate(35.653 14.287)"/>
+      <path d="M263.878 53.56a7.457 7.457 0 0 0-7.454-7.453h-14.907a7.457 7.457 0 0 0-7.453 7.453v15.693a7.457 7.457 0 0 0 7.453 7.454h14.907a7.457 7.457 0 0 0 7.454-7.454V53.56z" fill="#f61d71" stroke="#000" stroke-width="2.83" transform="matrix(1.00418 .38434 -.37315 .97496 15.604 -90.95)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(-1.253 25.855)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(24.243 15.007)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(33.4 30.708)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(52.228 46.651)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(67.205 37.47)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(66.269 23.155)"/>
+    </g>
+    <g id="b-bow" class="drag">
+      <path d="M317.256 22.06c9.305 0 32.569 34.262 27.916 41.114-4.653 6.853-51.179 6.853-55.832 0-4.653-6.852 18.611-41.114 27.916-41.114z" fill="#3ba2f7" stroke="#000" stroke-width="3.27" transform="matrix(.36744 -.77303 -.88136 -.41893 765.243 753.101)"/>
+      <ellipse cx="226.982" cy="57.606" rx="7.76" ry="7.989" fill="#3ba2f7" stroke="#000" stroke-width="1.5" transform="translate(621.793 431.91)"/>
+      <path d="M317.256 22.06c9.305 0 32.569 34.262 27.916 41.114-4.653 6.853-51.179 6.853-55.832 0-4.653-6.852 18.611-41.114 27.916-41.114z" fill="#3ba2f7" stroke="#000" stroke-width="3.27" transform="matrix(.5009 .69404 -.7913 .57109 775.741 258.354)"/>
+      <ellipse cx="226.982" cy="57.606" rx="7.76" ry="7.989" fill="#3ba2f7" stroke="#000" stroke-width="1.5" transform="translate(660.304 446.18)"/>
+      <path d="M263.878 53.56a7.457 7.457 0 0 0-7.454-7.453h-14.907a7.457 7.457 0 0 0-7.453 7.453v15.693a7.457 7.457 0 0 0 7.453 7.454h14.907a7.457 7.457 0 0 0 7.454-7.454V53.56z" fill="#3ba2f7" stroke="#000" stroke-width="2.83" transform="matrix(1.00418 .38434 -.37315 .97496 640.255 340.943)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(624.651 431.893)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(623.398 457.748)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(648.894 446.9)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(658.05 462.601)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(676.879 478.544)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(691.856 469.363)"/>
+      <ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(690.92 455.048)"/>
+    </g>
+    <g id="s-shirt" class="drag">
+      <path d="M391.354 276.786l-24.48 8.268s10.269 21.015 13.981 16.99c3.757-4.073 10.499-25.258 10.499-25.258zM461.21 281.247l9.278 20.314 18.654-15.626s-27.683-7.905-27.932-4.688" fill="#fbfbfb" stroke="#060000" stroke-width="2.5"/>
+      <path d="M391.828 276.814s-15.017 39.539-14.734 39.653c3.341 1.338 13.032.044 25.343 1.278 31.553 3.16 83.845 2.986 74.945-1.905l-16.797-35.711-26.965-.804-6.543 10.048-11.671-10.202-23.578-2.357z" fill="#fbfbfb" stroke="#060000" stroke-width="2.5"/>
+      <path d="M266.636 427.142l22.116.7 1.005-16.466-23.121 15.766 10.335-7.047s-17.915-6.399-2.648-14.934c8.058-4.505 15.493 5.373 15.434 6.215" fill="#f84e4a" stroke="#060000" stroke-width="2.36" transform="matrix(1.11656 0 0 1 101.859 -117.76)"/>
+      <path d="M266.636 427.142l22.116.7 1.005-16.466-23.121 15.766 10.335-7.047s-17.915-6.399-2.648-14.934c8.058-4.505 15.493 5.373 15.434 6.215" fill="#f84e4a" stroke="#060000" stroke-width="2.37" transform="matrix(-1.10851 0 0 1 748.246 -117.388)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#f84e4a" stroke="#060000" stroke-width="2" transform="translate(133.041 -120.88)"/>
+      <path d="M390.904 279.25l30.792 12.314.434-6.432-6.21-6.153-25.095-2.032M460.585 281.064l-30.953 11.903-.348-6.437 6.29-6.07 25.01.604z" fill="#020168" stroke="#060000" stroke-width="2.5"/>
+    </g>
+    <g id="r-shirt" class="drag">
+      <path d="M387.077 216.698l-24.48 8.268s10.269 21.015 13.981 16.99c3.757-4.073 10.499-25.258 10.499-25.258zM456.933 221.159l9.278 20.314 18.654-15.626s-27.683-7.905-27.932-4.688" fill="#f90803" stroke="#060000" stroke-width="2.5"/>
+      <path d="M387.551 216.726s-15.017 39.539-14.734 39.653c3.341 1.338 13.032.044 25.343 1.278 31.553 3.16 83.845 2.986 74.945-1.905l-16.797-35.711-26.655.26-9.062-.066-11.027-1.084-22.013-2.425z" fill="#f90803" stroke="#060000" stroke-width="2.5"/>
+      <path d="M388.921 216.877c-.085.775 26.257 15.194 26.257 15.194l6.217-10.906s-32.388-5.064-32.474-4.288z" fill="#fff" stroke="#060000" stroke-width="2"/>
+      <path d="M210.706 528.536c-.085.775 26.257 15.194 26.257 15.194l6.217-10.906s-32.388-5.064-32.474-4.288z" fill="#fff" stroke="#060000" stroke-width="1.94" transform="matrix(-1.00513 -.15349 -.1575 1.03142 751.49 -291.768)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#fff" transform="matrix(.706 0 0 .706 214.653 -52.483)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#fff" transform="matrix(.706 0 0 .706 214.532 -45.784)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#fff" transform="matrix(.706 0 0 .706 214.412 -39.086)"/>
+      <path d="M486.745 229.679a1.734 1.734 0 0 0 .218-2.442l-2.221-2.66a1.734 1.734 0 0 0-2.441-.22l-15.809 13.205a1.734 1.734 0 0 0-.219 2.44l2.222 2.66a1.735 1.735 0 0 0 2.442.22l15.808-13.203zM366.844 223.02a1.734 1.734 0 0 0-2.387-.559l-2.945 1.828a1.734 1.734 0 0 0-.558 2.386l10.86 17.5a1.734 1.734 0 0 0 2.387.56l2.945-1.828a1.735 1.735 0 0 0 .56-2.387l-10.862-17.5z" fill="#fff" stroke="#060000" stroke-width="2"/>
+    </g>
+    <g id="w-shirt" class="drag">
+      <path d="M386.877 337.785l-24.48 8.268s10.269 21.015 13.981 16.991c3.757-4.074 10.499-25.259 10.499-25.259zM456.733 342.246l9.278 20.314 18.654-15.626s-27.683-7.905-27.932-4.688" fill="#fbfbfb" stroke="#060000" stroke-width="2.5"/>
+      <path d="M387.351 337.813s-15.017 39.54-14.734 39.653c3.341 1.338 13.032.044 25.343 1.278 31.553 3.161 83.845 2.986 74.945-1.905l-16.797-35.71-26.655.26-9.062-.067-11.027-1.084-22.013-2.425z" fill="#fbfbfb" stroke="#060000" stroke-width="2.5"/>
+      <path d="M454.284 356.19a2.328 2.328 0 0 0-2.327-2.326h-7.713a2.328 2.328 0 0 0-2.327 2.326v4.653a2.328 2.328 0 0 0 2.327 2.326h7.713a2.328 2.328 0 0 0 2.327-2.326v-4.653z" fill="#fbfbfb" stroke="#060000" stroke-width="2"/>
+      <path d="M388.721 337.964c-.085.775 26.257 15.194 26.257 15.194l6.217-10.906s-32.388-5.064-32.474-4.288z" fill="#fff" stroke="#060000" stroke-width="2"/>
+      <path d="M210.706 528.536c-.085.775 26.257 15.194 26.257 15.194l6.217-10.906s-32.388-5.064-32.474-4.288z" fill="#fff" stroke="#060000" stroke-width="1.94" transform="matrix(-1.00513 -.15349 -.1575 1.03142 751.29 -170.68)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#060000" transform="matrix(.706 0 0 .706 214.453 68.604)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#060000" transform="matrix(.706 0 0 .706 214.332 75.303)"/>
+      <ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#060000" transform="matrix(.706 0 0 .706 214.212 82.001)"/>
+    </g>
+    <g id="r-bow" class="drag">
+      <path d="M853.662 264.874s-12.629-19.103-17.797-16.888c-5.167 2.215-4.069 6.173-4.142 11.51-.048 3.513-8.591-1.474-10.907 3.305-2.319 4.786.356 10.345 2.86 12.612 2.505 2.268-8.811 1.76-6.536 8.173 2.118 5.97 10.875 7.698 27.734 2.364 16.858-5.334 8.788-21.076 8.788-21.076zM885.441 275.099s22.279-5.3 24.534-.149c2.255 5.15-1.253 7.287-4.85 11.23-2.368 2.596 7.276 4.8 5.697 9.87-1.582 5.078-7.335 7.304-10.713 7.246-3.378-.059 5.225 7.31-.821 10.433-5.628 2.906-13.199-1.822-21.85-17.244-8.65-15.421 8.003-21.386 8.003-21.386z" fill="#f81f02" stroke="#060000" stroke-width="2.5"/>
+      <ellipse cx="289.895" cy="328.517" rx="15.687" ry="17.93" fill="#f74203" stroke="#060000" stroke-width="2.22" transform="matrix(1.23802 0 0 1 505.827 -49.519)"/>
+    </g>
+    <g id="mermaid" class="drag">
+      <path d="M477.91 575.404s-.049 14.281 9.447 17.963c4.171 1.617 16.81 5.56 27.117 7.566 13.157 2.56 20.902 6.608 24.43 6.006 3.338-.57-2.5-2.467-3.269-9.62-1.097-10.212 1.393-21.288-1.558-26.655-4.24-7.714-25.277-18.479-25.277-18.479-.542 4.067 21.851-5.626 27.545-17.865 2.813-6.049.473-14.489 1.872-19.925 1.186-4.606 11.261-12.296 6.521-12.69-5.268-.439-29.116 7.26-38.132 10.058-16.217 5.673-22.696 20.115-24.249 38.993l-4.447 24.649M431.277 516.036a3.063 3.063 0 0 0-2.583-3.476s-41.679-6.661-50.71-7.477c-1.438-.13-2.825 1.295-3.476 2.582-.728 1.44-1.175 4.47-.894 6.059.253 1.42 1.17 3.185 2.583 3.476 8.883 1.825 50.71 7.477 50.71 7.477a3.063 3.063 0 0 0 3.477-2.583l.893-6.058z" fill="#83f9dc" stroke="#000" stroke-width="3.5"/>
+      <path d="M419.163 527.588c0-1.69-1.531-3.062-3.416-3.062 0 0-41.556-.51-50.551 0-1.527.087-2.883 1.629-3.416 3.062-.569 1.531-.569 4.593 0 6.124.533 1.433 1.889 2.975 3.416 3.062 8.995.51 50.551 0 50.551 0 1.885 0 3.416-1.372 3.416-3.062v-6.124z" fill="#83f9dc" stroke="#000" stroke-width="3.69" transform="matrix(-.87994 .1712 .19098 .9816 698.17 -73.688)"/>
+      <path d="M376.415 517.524s-20.657 43.41 28.207 61.073c48.864 17.663 76.494-5.99 77.791-5.73 1.298.26 14.437-3.683 12.394-19.548-.62-4.82-.968.627-3.162-1.621-2.213-2.268-6.846.83-6.846.83l-3.175 2.644s1.262-40.127-3.22-41.445c-2.159-.635-21.848 2.944-45.867 4.004-25.872 1.14-56.122-.207-56.122-.207z" fill="#3bd0a2" stroke="#000" stroke-width="4.5"/>
+      <path d="M375.642 551.504c0 .5.359 1.205.459 1.729.523 2.74 2.521 2.126 4.435.85.236-.157 1.188-1.22 1.3-1.163.793.396.397 2.45 1.54 2.842.926.318 2.45.194 3.165-.532.146-.149.97-1.352 1.152-1.17.503.504.848 1.735 1.462 2.042 1.104.552 4.588.5 4.588-1.113" fill="none" stroke="#39a890" stroke-opacity=".38" stroke-width="1.74" transform="matrix(1.39967 0 0 .82315 -144.373 79.089)"/>
+      <path d="M375.642 551.504c0 .5.359 1.205.459 1.729.523 2.74 2.521 2.126 4.435.85.236-.157 1.188-1.22 1.3-1.163.793.396.397 2.45 1.54 2.842.926.318 2.45.194 3.165-.532.146-.149.97-1.352 1.152-1.17.503.504.848 1.735 1.462 2.042 1.104.552 4.588.5 4.588-1.113" fill="none" stroke="#39a890" stroke-opacity=".38" stroke-width="1.74" transform="matrix(1.39967 0 0 .82315 -127.88 98.793)"/>
+      <path d="M375.642 551.504c0 .5.359 1.205.459 1.729.523 2.74 2.521 2.126 4.435.85.236-.157 1.188-1.22 1.3-1.163.793.396.397 2.45 1.54 2.842.926.318 2.45.194 3.165-.532.146-.149.97-1.352 1.152-1.17.503.504.848 1.735 1.462 2.042 1.104.552 4.588.5 4.588-1.113" fill="none" stroke="#39a890" stroke-opacity=".38" stroke-width="1.74" transform="matrix(1.39967 0 0 .82315 -94.835 80.375)"/>
+      <path d="M375.642 551.504c0 .5.359 1.205.459 1.729.523 2.74 2.521 2.126 4.435.85.236-.157 1.188-1.22 1.3-1.163.793.396.397 2.45 1.54 2.842.926.318 2.45.194 3.165-.532.146-.149.97-1.352 1.152-1.17.503.504.848 1.735 1.462 2.042 1.104.552 4.588.5 4.588-1.113" fill="none" stroke="#39a890" stroke-opacity=".38" stroke-width="1.74" transform="matrix(1.39967 0 0 .82315 -78.765 102.623)"/>
+    </g>
+    <g id="glasses" class="drag">
+      <path fill="none" stroke="#000" stroke-width="2.5" d="M801.506 581.416h34.278v23.688h-34.278zM879.22 581.497h34.278v23.688H879.22z"/>
+      <path d="M836.993 319.949l41.57.278" fill="none" stroke="#000" stroke-width="2.86" transform="matrix(.9674 0 0 .77007 28.133 345.95)"/>
+    </g>
+    <g id="dress" class="drag">
+      <g transform="translate(-464.944 153.649)">
+        <ellipse cx="872.165" cy="253.122" rx="20.43" ry="12.773" fill="#f33a7a" stroke="#000" stroke-width="2.5" transform="translate(1.048 -1.609)"/>
+        <ellipse cx="872.165" cy="253.122" rx="20.43" ry="12.773" fill="#f33a7a" stroke="#000" stroke-width="2.5" transform="translate(41.97 .202)"/>
+        <path d="M850.01 252.697s8.596-16.15 6.564-19.777c-2.032-3.628-12.192-4.01-18.756-1.988-2.312 8.723 2.208 15.873 12.192 21.765zM935.94 254.858s-8.596-16.15-6.564-19.777c2.032-3.628 12.192-4.01 18.756-1.988 2.312 8.723-2.208 15.873-12.192 21.765z" fill="#f33a7a" stroke="#000" stroke-width="2.5"/>
+        <path d="M839.017 242.361s-9.33-1.303-9.299 1.528c.032 2.831 3.939 10.202 9.489 15.461l10.173-6.408-10.363-10.581zM946.933 244.522s9.33-1.303 9.299 1.528c-.032 2.83-3.939 10.202-9.489 15.46l-10.173-6.407 10.363-10.581z" fill="#f8a3a5" stroke="#000" stroke-width="2.5"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(9.972 1.684)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(19.944 3.368)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(29.747 4.215)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(63.281 6.402)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(74.149 6.692)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(84.774 6.49)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(95.398 6.288)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(106.023 6.086)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(116.648 5.884)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(127.273 5.682)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.38" transform="matrix(1.22671 .26367 -.16652 .77472 3.417 -143.04)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(41.171 4.912)"/>
+        <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(51.614 5.788)"/>
+        <path d="M847.512 253.083l91.025 1.586 26.877 67.04c-52.068 7.885-101.721 5.562-149.644-4.066l31.742-64.56z" fill="#f8a3a5" stroke="#000" stroke-width="2.5"/>
+        <path d="M821.474 306.04s.447-20.091 4.844-28.763c4.4-8.677 14.883-19.501 21.556-23.299 5.356-3.049 22.246-.082 22.246-.082l-48.646 52.144zM962.471 312.37s3.688-24.862-.709-33.534c-4.4-8.677-14.883-19.501-21.556-23.3-5.356-3.048-22.44-.616-22.44-.616l44.705 57.45z" fill="#f33a7a" stroke="#000" stroke-width="2.5"/>
+      </g>
+      <ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="matrix(1.28315 .04212 -.09373 .72264 -681.355 206.68)"/>
+      <path d="M405.632 407.868s-9.43 14.356-17.683 32.236c-6.921 14.992-13.266 34.001-10.967 35.45 11.574 7.299 108.351 5.448 101.749 1.796 1.142.218-5.705-18.96-11.386-36.807-5.114-16.063-13.48-30.639-15.476-31.817-1.986-1.173-46.237-.858-46.237-.858z" fill="#fff" stroke="#000" stroke-width="2.5"/>
+      <path d="M396.648 425.467c6.335 4.559 13.804 4.594 22.211.881 7.412 4.113 14.779 5.162 22.06.47 7.652 3.758 14.32 3.803 19.713-.965" fill="none" stroke="#000" stroke-width="2.5"/>
+      <path d="M861.592 271.818c6.335 4.559 13.804 4.594 22.211.881 7.412 4.113 14.779 5.162 22.06.47 7.652 3.758 14.32 3.803 19.713-.965" fill="none" stroke="#000" stroke-width="2.29" transform="matrix(1.17678 0 0 1 -623.935 168.444)"/>
+      <path d="M861.592 271.818c6.335 4.559 13.804 4.594 22.211.881 7.412 4.113 14.779 5.162 22.06.47 7.652 3.758 14.32 3.803 19.713-.965" fill="none" stroke="#000" stroke-width="2.01" transform="matrix(1.44275 0 0 1 -862.375 189.372)"/>
+    </g>
+  </g>
+</svg>
diff --git a/draggable-plugin-hello-kitty/src/script.babel b/draggable-plugin-hello-kitty/src/script.babel
new file mode 100644
index 0000000..3ad1446
--- /dev/null
+++ b/draggable-plugin-hello-kitty/src/script.babel
@@ -0,0 +1,15 @@
+
+var eyeTl = TweenMax.to(".iris", 0.1, {
+  scaleY: 0,
+  transformOrigin: "center bottom",
+  repeat:1, 
+  yoyo:true,
+  onComplete:function() {
+      this.delay(Math.random() + 0.8).restart(true);
+  }
+});
+
+
+let draggable = Draggable.create(".drag", {
+  type:"x,y"
+});//draggable plugin code
\ No newline at end of file
diff --git a/draggable-plugin-hello-kitty/src/style.scss b/draggable-plugin-hello-kitty/src/style.scss
new file mode 100644
index 0000000..f233fb1
--- /dev/null
+++ b/draggable-plugin-hello-kitty/src/style.scss
@@ -0,0 +1,13 @@
+body {
+  background: #ee9ca7; 
+  background: linear-gradient(to bottom, #ee9ca7, #ffdde1); 
+  font-family: 'Bubblegum Sans', cursive;
+}
+
+h1 {
+  text-align: center;
+  background-image: linear-gradient(to right, #b01455, #5C2A79, #BC353E);
+  -webkit-background-clip: text;
+  color: transparent;
+  padding-top: 2rem;
+}
\ No newline at end of file
diff --git a/dragon/README.markdown b/dragon/README.markdown
new file mode 100644
index 0000000..a2d9d12
--- /dev/null
+++ b/dragon/README.markdown
@@ -0,0 +1,10 @@
+# dragon
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ge1doot/pen/pobXmMa](https://codepen.io/ge1doot/pen/pobXmMa).
+
+Ported from flash
+
+credits: https://www.deviantart.com/gifhaas/art/Dragon-8681899 
+
+dragon by GifHaas on DeviantArt
+
diff --git a/dragon/dist/index.html b/dragon/dist/index.html
new file mode 100644
index 0000000..59f0f87
--- /dev/null
+++ b/dragon/dist/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - dragon</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg>
+	<defs>
+		<g id="Cabeza" transform="matrix(1, 0, 0, 1, 0, 0)">
+			<path style="fill:#FFFFFF;fill-opacity:1" d="M-28.9,-1.1L-28.55 -1.95Q-28.1 -3.1 -27.25 -2.95L-26.7 -2.95Q-27.7 -1.65 -28.9 -1.1M-18.35,-1.8Q-15.1 -10.3 -9.6 -6.05Q-15.1 -6.2 -18.35 -1.8M-18.35,1.1Q-15.1 5.45 -9.6 5.35Q-15.1 9.55 -18.35 1.1M-26.7,2.2L-27.25 2.25Q-28.1 2.4 -28.55 1.2L-28.9 0.35Q-27.7 0.9 -26.7 2.2" />
+			<path style="fill:#000000;fill-opacity:1" d="M-21.05,-8.25Q-13.6 -15.95 -1.3 -12.1Q-7.85 -8.5 -5.85 -4.35Q-2.3 -4.85 10.5 0.15Q0 4.35 -5.85 3.65Q-7.85 7.75 -1.25 12.45Q-13.6 15.2 -21.05 7.5Q-29.55 4.05 -30.2 -0.35Q-29.55 -4.8 -21.05 -8.25M-26.7,-2.95L-27.25 -2.95Q-28.1 -3.1 -28.55 -1.95L-28.9 -1.1Q-27.7 -1.65 -26.7 -2.95M-9.6,-6.05Q-15.1 -10.3 -18.35 -1.8Q-15.1 -6.2 -9.6 -6.05M-9.6,5.35Q-15.1 5.45 -18.35 1.1Q-15.1 9.55 -9.6 5.35M-28.9,0.35L-28.55 1.2Q-28.1 2.4 -27.25 2.25L-26.7 2.2Q-27.7 0.9 -28.9 0.35" />
+		</g>
+		<g id="Aletas" transform="matrix(1, 0, 0, 1, 0, 0)">
+			<linearGradient id="LinearGradID_1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0935974, 0, 0, 0.188782, -20.55, 0)" spreadMethod="pad" x1="-819.2" y1="0" x2="819.2" y2="0">
+				<stop offset="0" style="stop-color:#CCCCCC;stop-opacity:1" />
+				<stop offset="1" style="stop-color:#000000;stop-opacity:1" />
+			</linearGradient>
+			<path style="fill:url(#LinearGradID_1) " d="M29.75,-36.85Q-17.75 -61.45 -42.05 -40.95L-45.35 -38.35L-53.7 -41.15L-51.15 -44.85Q-34.85 -68.4 21 -57.8Q-32.2 -72.1 -50.25 -50Q-53.85 -45.65 -56.05 -41.95L-64.7 -43.35L-60.6 -50.3Q-45.9 -75.55 5.1 -79.35Q-2.2 -79.8 -9.45 -79.15Q-16.2 -78.55 -22.85 -77.15Q-29.85 -75.65 -36.5 -73Q-43.05 -70.4 -48.8 -66.85Q-54.55 -63.35 -56.8 -60.3L-60.5 -55.4Q-62.95 -52.1 -67 -43.55L-70.55 -43.55L-76.35 -42.95Q-74.6 -49.1 -71.85 -54.85Q-68.9 -61.25 -64.8 -67.1Q-60.8 -73 -55.45 -77.55Q-49.9 -82.35 -43.65 -85.85L-30.6 -92.7Q-24.05 -95.95 -17 -98.25Q-63.75 -86.35 -73.65 -57.1Q-75.75 -50.75 -77.45 -42.75Q-82.9 -41.75 -88 -39.65Q-87.65 -46.65 -86.3 -53.05Q-79.8 -89.8 -36.65 -117.2Q-80.65 -94.5 -87.55 -59.55Q-88.65 -54.15 -88.95 -39.4L-89.8 -38.85L-92.7 -37.6Q-93.75 -44.35 -94.1 -51.15Q-94.4 -58.2 -93.25 -65.1Q-92.15 -72.5 -90.05 -79.65Q-88.05 -86.55 -85 -93Q-82.1 -99.3 -78.45 -105.15Q-74.6 -111.35 -70.25 -117.25Q-65.95 -123.1 -61.1 -128.55Q-70.3 -119.35 -77.9 -108.7Q-86 -97.3 -90.8 -84.05Q-95.8 -70.5 -96 -56.15Q-96.1 -46 -94.05 -36.05L-93.25 -31.55Q-93.5 -35.65 -92.35 -36Q-79.85 -42 -66.6 -40.45Q-52.45 -38.85 -39.2 -33.25Q-28.3 -29.9 -21.25 -24.15Q-17.8 -23.3 -8.6 -15.6Q-12.1 -20.75 -16.75 -24.5Q-24.55 -30.7 -34.25 -34.05L-42.55 -37Q-38.9 -41.25 -31.5 -43.25Q-24.05 -45.3 -16.2 -46.3Q-8.35 -47.35 -1 -46Q5.95 -44.75 12.75 -42.85Q19.85 -40.9 29.75 -36.85M-92.45,-27.35L-94.95 -36.25Q-109.7 -105 -27.95 -154.65Q-98.65 -103.8 -91.75 -39.4L-89.95 -40.2Q-92.2 -105.25 -5.6 -130.9Q-78.8 -99.95 -87.45 -40.9Q-83.15 -42.95 -78.45 -43.95Q-70 -101.3 17.65 -103.8Q-56.9 -93.4 -74.5 -44.55L-67.4 -45.45Q-49.1 -94.95 39.25 -75.65Q-36.75 -84.35 -62.25 -44.25L-57.3 -43.6Q-31.65 -86.5 56.15 -46.05Q-20.3 -73.35 -51.35 -41.7L-45.95 -39.75Q-17.85 -71.35 51.85 -24.8Q-8.7 -56.4 -39.75 -37.05Q-28.15 -34.05 -14.25 -24.45Q-8.6 -19.85 -5.8 -16.95Q5.95 -2.4 20 0Q5.95 2.4 -5.8 16.95Q-8.6 19.85 -14.25 24.45Q-28.15 34.05 -39.75 37.05Q-8.7 56.4 51.85 24.8Q-17.85 71.35 -45.95 39.75L-51.35 41.7Q-20.3 73.35 56.15 46.1Q-31.65 86.5 -57.3 43.65L-62.25 44.3Q-36.75 84.35 39.25 75.7Q-49.1 94.95 -67.4 45.5L-74.5 44.6Q-56.9 93.4 17.65 103.85Q-70 101.3 -78.45 43.95Q-83.15 42.95 -87.45 40.9Q-78.8 99.95 -5.6 130.9Q-92.2 105.25 -89.95 40.25L-91.75 39.4Q-98.65 103.8 -27.95 154.65Q-109.7 105 -94.95 36.3L-92.45 27.35Q-93.05 33.9 -92.05 34.75Q-91.1 35.55 -88.95 36.7L-87.95 37Q-83.7 38.25 -79.05 38.8L-77.25 38.95Q-72.55 39.3 -67.5 38.85L-65.45 38.65Q-44.4 36.05 -17.8 19.6Q-9.9 12.8 -15.15 4.4Q-18.15 3.15 -19 0Q-18.15 -3.15 -15.15 -4.4Q-9.9 -12.8 -17.8 -19.6L-17.8 -19.55Q-44.4 -36.05 -65.45 -38.6L-67.5 -38.8Q-72.55 -39.3 -77.25 -38.95L-79.05 -38.75Q-83.7 -38.25 -87.95 -36.95L-88.95 -36.65Q-91.1 -35.55 -92.05 -34.7Q-93.05 -33.9 -92.45 -27.35M-8.6,15.6Q-17.8 23.3 -21.25 24.2Q-28.3 29.9 -39.2 33.3Q-52.45 38.85 -66.6 40.5Q-79.85 42 -92.35 36Q-93.5 35.65 -93.25 31.55L-94.05 36.1Q-96.1 46.05 -96 56.15Q-95.8 70.5 -90.8 84.1Q-86 97.3 -77.9 108.75Q-70.3 119.35 -61.1 128.6Q-65.95 123.1 -70.25 117.25Q-74.6 111.35 -78.45 105.15Q-82.1 99.3 -85 93Q-88.05 86.55 -90.05 79.7Q-92.15 72.5 -93.25 65.1Q-94.4 58.2 -94.1 51.2Q-93.75 44.35 -92.7 37.6L-89.8 38.9L-88.95 39.45Q-88.65 54.15 -87.55 59.55Q-80.65 94.5 -36.65 117.25Q-79.8 89.8 -86.3 53.1Q-87.65 46.65 -88 39.65Q-82.9 41.75 -77.45 42.75Q-75.75 50.75 -73.65 57.15Q-63.75 86.35 -17 98.3Q-24.05 95.95 -30.6 92.75L-43.65 85.9Q-49.9 82.35 -55.45 77.6Q-60.8 73 -64.8 67.15Q-68.9 61.25 -71.85 54.85Q-74.6 49.1 -76.35 42.95L-70.55 43.6L-67 43.6Q-62.95 52.1 -60.5 55.4L-56.8 60.35Q-54.55 63.35 -48.8 66.9Q-43.05 70.4 -36.5 73Q-29.85 75.65 -22.85 77.15Q-16.2 78.55 -9.45 79.15Q-2.2 79.8 5.1 79.35Q-45.9 75.55 -60.6 50.3L-64.7 43.4L-56.05 41.95Q-53.85 45.65 -50.25 50Q-32.2 72.1 21 57.85Q-34.85 68.4 -51.15 44.85L-53.7 41.2L-45.35 38.35L-42.05 40.95Q-17.75 61.45 29.75 36.85Q19.85 40.9 12.75 42.9Q5.95 44.75 -1 46Q-8.35 47.35 -16.2 46.35Q-24.05 45.3 -31.5 43.3Q-38.9 41.25 -42.55 37.05L-34.25 34.05Q-24.55 30.7 -16.75 24.5Q-12.1 20.75 -8.6 15.6" />
+		</g>
+		<g id="Espina" transform="matrix(1, 0, 0, 1, 0, 0)">
+			<linearGradient id="LinearGradID_2" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0229492, 0, 0, -0.0152893, 0, 0.05)" spreadMethod="pad" x1="-819.2" y1="0" x2="819.2" y2="0">
+				<stop offset="0" style="stop-color:#CCCCCC;stop-opacity:1" />
+				<stop offset="1" style="stop-color:#333333;stop-opacity:1" />
+			</linearGradient>
+			<path style="fill:url(#LinearGradID_2) " d="M-18.8,0Q-17.85 -5.7 -12.3 -9.6Q-11.2 -5.35 -6.5 -8.25L-6.45 -8.2L-6.2 -8.3Q1.25 -16.25 6.65 -12.4Q0.05 -12.55 0 -5.95Q2.7 -2.4 7.75 -4.1Q18 -1.45 18.8 0L-18.8 0" />
+			<linearGradient id="LinearGradID_3" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0229492, 0, 0, 0.0152893, 0, -0.05)" spreadMethod="pad" x1="-819.2" y1="0" x2="819.2" y2="0">
+				<stop offset="0" style="stop-color:#CCCCCC;stop-opacity:1" />
+				<stop offset="1" style="stop-color:#333333;stop-opacity:1" />
+			</linearGradient>
+			<path style="fill:url(#LinearGradID_3) " d="M18.8,0Q18 1.45 7.75 4.1Q2.7 2.4 0 5.95Q0.05 12.55 6.65 12.4Q1.25 16.25 -6.2 8.35Q-6.35 8.25 -6.45 8.25L-6.5 8.25Q-11.2 5.35 -12.3 9.6Q-17.85 5.7 -18.8 0L18.8 0" />
+		</g>
+	</defs>
+	<g id="screen" />
+</svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/dragon/dist/script.js b/dragon/dist/script.js
new file mode 100644
index 0000000..88bd708
--- /dev/null
+++ b/dragon/dist/script.js
@@ -0,0 +1,80 @@
+"use strict";
+// Ported from flash
+// credits https://www.deviantart.com/gifhaas/art/Dragon-8681899 dragon by GifHaas on DeviantArt
+
+const screen = document.getElementById("screen");
+const xmlns = "http://www.w3.org/2000/svg";
+const xlinkns = "http://www.w3.org/1999/xlink";
+
+window.addEventListener(
+	"pointermove",
+	(e) => {
+		pointer.x = e.clientX;
+		pointer.y = e.clientY;
+		rad = 0;
+	},
+	false
+);
+
+const resize = () => {
+	width = window.innerWidth;
+	height = window.innerHeight;
+};
+
+let width, height;
+window.addEventListener("resize", () => resize(), false);
+resize();
+
+const prepend = (use, i) => {
+	const elem = document.createElementNS(xmlns, "use");
+	elems[i].use = elem;
+	elem.setAttributeNS(xlinkns, "xlink:href", "#" + use);
+	screen.prepend(elem);
+};
+	
+const N = 40;
+
+const elems = [];
+for (let i = 0; i < N; i++) elems[i] = { use: null, x: width / 2, y: 0 };
+const pointer = { x: width / 2, y: height / 2 };
+const radm = Math.min(pointer.x, pointer.y) - 20;
+let frm = Math.random();
+let rad = 0;
+
+for (let i = 1; i < N; i++) {
+	if (i === 1) prepend("Cabeza", i);
+	else if (i === 8 || i === 14) prepend("Aletas", i);
+	else prepend("Espina", i);
+}
+
+const run = () => {
+	requestAnimationFrame(run);
+	let e = elems[0];
+	const ax = Math.cos(3 * frm) * rad * width / height;
+	const ay = Math.sin(4 * frm) * rad * height / width;
+	e.x += (ax + pointer.x - e.x) / 10;
+	e.y += (ay + pointer.y - e.y) / 10;
+	for (let i = 1; i < N; i++) {
+		let e = elems[i];
+		let ep = elems[i - 1];
+		const a = Math.atan2(e.y - ep.y, e.x - ep.x);
+		e.x += (ep.x - e.x + (Math.cos(a) * (100 - i)) / 5) / 4;
+		e.y += (ep.y - e.y + (Math.sin(a) * (100 - i)) / 5) / 4;
+		const s = (162 + 4 * (1 - i)) / 50;
+		e.use.setAttributeNS(
+			null,
+			"transform",
+			`translate(${(ep.x + e.x) / 2},${(ep.y + e.y) / 2}) rotate(${
+				(180 / Math.PI) * a
+			}) translate(${0},${0}) scale(${s},${s})`
+		);
+	}
+	if (rad < radm) rad++;
+	frm += 0.003;
+	if (rad > 60) {
+		pointer.x += (width / 2 - pointer.x) * 0.05;
+		pointer.y += (height / 2 - pointer.y) * 0.05;
+	}
+};
+
+run();
\ No newline at end of file
diff --git a/dragon/dist/style.css b/dragon/dist/style.css
new file mode 100644
index 0000000..e1cb04d
--- /dev/null
+++ b/dragon/dist/style.css
@@ -0,0 +1,19 @@
+body, html {
+	position: absolute;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	background: #fff;
+	touch-action: none;
+}
+
+svg {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background: #fff;
+	cursor: pointer;
+	filter:sepia(20%);
+}
\ No newline at end of file
diff --git a/dragon/license.txt b/dragon/license.txt
new file mode 100644
index 0000000..6eea7f5
--- /dev/null
+++ b/dragon/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Gerard Ferrandez (https://codepen.io/ge1doot/pen/pobXmMa)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/dragon/src/index.html b/dragon/src/index.html
new file mode 100644
index 0000000..d5da604
--- /dev/null
+++ b/dragon/src/index.html
@@ -0,0 +1,28 @@
+<svg>
+	<defs>
+		<g id="Cabeza" transform="matrix(1, 0, 0, 1, 0, 0)">
+			<path style="fill:#FFFFFF;fill-opacity:1" d="M-28.9,-1.1L-28.55 -1.95Q-28.1 -3.1 -27.25 -2.95L-26.7 -2.95Q-27.7 -1.65 -28.9 -1.1M-18.35,-1.8Q-15.1 -10.3 -9.6 -6.05Q-15.1 -6.2 -18.35 -1.8M-18.35,1.1Q-15.1 5.45 -9.6 5.35Q-15.1 9.55 -18.35 1.1M-26.7,2.2L-27.25 2.25Q-28.1 2.4 -28.55 1.2L-28.9 0.35Q-27.7 0.9 -26.7 2.2" />
+			<path style="fill:#000000;fill-opacity:1" d="M-21.05,-8.25Q-13.6 -15.95 -1.3 -12.1Q-7.85 -8.5 -5.85 -4.35Q-2.3 -4.85 10.5 0.15Q0 4.35 -5.85 3.65Q-7.85 7.75 -1.25 12.45Q-13.6 15.2 -21.05 7.5Q-29.55 4.05 -30.2 -0.35Q-29.55 -4.8 -21.05 -8.25M-26.7,-2.95L-27.25 -2.95Q-28.1 -3.1 -28.55 -1.95L-28.9 -1.1Q-27.7 -1.65 -26.7 -2.95M-9.6,-6.05Q-15.1 -10.3 -18.35 -1.8Q-15.1 -6.2 -9.6 -6.05M-9.6,5.35Q-15.1 5.45 -18.35 1.1Q-15.1 9.55 -9.6 5.35M-28.9,0.35L-28.55 1.2Q-28.1 2.4 -27.25 2.25L-26.7 2.2Q-27.7 0.9 -28.9 0.35" />
+		</g>
+		<g id="Aletas" transform="matrix(1, 0, 0, 1, 0, 0)">
+			<linearGradient id="LinearGradID_1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0935974, 0, 0, 0.188782, -20.55, 0)" spreadMethod="pad" x1="-819.2" y1="0" x2="819.2" y2="0">
+				<stop offset="0" style="stop-color:#CCCCCC;stop-opacity:1" />
+				<stop offset="1" style="stop-color:#000000;stop-opacity:1" />
+			</linearGradient>
+			<path style="fill:url(#LinearGradID_1) " d="M29.75,-36.85Q-17.75 -61.45 -42.05 -40.95L-45.35 -38.35L-53.7 -41.15L-51.15 -44.85Q-34.85 -68.4 21 -57.8Q-32.2 -72.1 -50.25 -50Q-53.85 -45.65 -56.05 -41.95L-64.7 -43.35L-60.6 -50.3Q-45.9 -75.55 5.1 -79.35Q-2.2 -79.8 -9.45 -79.15Q-16.2 -78.55 -22.85 -77.15Q-29.85 -75.65 -36.5 -73Q-43.05 -70.4 -48.8 -66.85Q-54.55 -63.35 -56.8 -60.3L-60.5 -55.4Q-62.95 -52.1 -67 -43.55L-70.55 -43.55L-76.35 -42.95Q-74.6 -49.1 -71.85 -54.85Q-68.9 -61.25 -64.8 -67.1Q-60.8 -73 -55.45 -77.55Q-49.9 -82.35 -43.65 -85.85L-30.6 -92.7Q-24.05 -95.95 -17 -98.25Q-63.75 -86.35 -73.65 -57.1Q-75.75 -50.75 -77.45 -42.75Q-82.9 -41.75 -88 -39.65Q-87.65 -46.65 -86.3 -53.05Q-79.8 -89.8 -36.65 -117.2Q-80.65 -94.5 -87.55 -59.55Q-88.65 -54.15 -88.95 -39.4L-89.8 -38.85L-92.7 -37.6Q-93.75 -44.35 -94.1 -51.15Q-94.4 -58.2 -93.25 -65.1Q-92.15 -72.5 -90.05 -79.65Q-88.05 -86.55 -85 -93Q-82.1 -99.3 -78.45 -105.15Q-74.6 -111.35 -70.25 -117.25Q-65.95 -123.1 -61.1 -128.55Q-70.3 -119.35 -77.9 -108.7Q-86 -97.3 -90.8 -84.05Q-95.8 -70.5 -96 -56.15Q-96.1 -46 -94.05 -36.05L-93.25 -31.55Q-93.5 -35.65 -92.35 -36Q-79.85 -42 -66.6 -40.45Q-52.45 -38.85 -39.2 -33.25Q-28.3 -29.9 -21.25 -24.15Q-17.8 -23.3 -8.6 -15.6Q-12.1 -20.75 -16.75 -24.5Q-24.55 -30.7 -34.25 -34.05L-42.55 -37Q-38.9 -41.25 -31.5 -43.25Q-24.05 -45.3 -16.2 -46.3Q-8.35 -47.35 -1 -46Q5.95 -44.75 12.75 -42.85Q19.85 -40.9 29.75 -36.85M-92.45,-27.35L-94.95 -36.25Q-109.7 -105 -27.95 -154.65Q-98.65 -103.8 -91.75 -39.4L-89.95 -40.2Q-92.2 -105.25 -5.6 -130.9Q-78.8 -99.95 -87.45 -40.9Q-83.15 -42.95 -78.45 -43.95Q-70 -101.3 17.65 -103.8Q-56.9 -93.4 -74.5 -44.55L-67.4 -45.45Q-49.1 -94.95 39.25 -75.65Q-36.75 -84.35 -62.25 -44.25L-57.3 -43.6Q-31.65 -86.5 56.15 -46.05Q-20.3 -73.35 -51.35 -41.7L-45.95 -39.75Q-17.85 -71.35 51.85 -24.8Q-8.7 -56.4 -39.75 -37.05Q-28.15 -34.05 -14.25 -24.45Q-8.6 -19.85 -5.8 -16.95Q5.95 -2.4 20 0Q5.95 2.4 -5.8 16.95Q-8.6 19.85 -14.25 24.45Q-28.15 34.05 -39.75 37.05Q-8.7 56.4 51.85 24.8Q-17.85 71.35 -45.95 39.75L-51.35 41.7Q-20.3 73.35 56.15 46.1Q-31.65 86.5 -57.3 43.65L-62.25 44.3Q-36.75 84.35 39.25 75.7Q-49.1 94.95 -67.4 45.5L-74.5 44.6Q-56.9 93.4 17.65 103.85Q-70 101.3 -78.45 43.95Q-83.15 42.95 -87.45 40.9Q-78.8 99.95 -5.6 130.9Q-92.2 105.25 -89.95 40.25L-91.75 39.4Q-98.65 103.8 -27.95 154.65Q-109.7 105 -94.95 36.3L-92.45 27.35Q-93.05 33.9 -92.05 34.75Q-91.1 35.55 -88.95 36.7L-87.95 37Q-83.7 38.25 -79.05 38.8L-77.25 38.95Q-72.55 39.3 -67.5 38.85L-65.45 38.65Q-44.4 36.05 -17.8 19.6Q-9.9 12.8 -15.15 4.4Q-18.15 3.15 -19 0Q-18.15 -3.15 -15.15 -4.4Q-9.9 -12.8 -17.8 -19.6L-17.8 -19.55Q-44.4 -36.05 -65.45 -38.6L-67.5 -38.8Q-72.55 -39.3 -77.25 -38.95L-79.05 -38.75Q-83.7 -38.25 -87.95 -36.95L-88.95 -36.65Q-91.1 -35.55 -92.05 -34.7Q-93.05 -33.9 -92.45 -27.35M-8.6,15.6Q-17.8 23.3 -21.25 24.2Q-28.3 29.9 -39.2 33.3Q-52.45 38.85 -66.6 40.5Q-79.85 42 -92.35 36Q-93.5 35.65 -93.25 31.55L-94.05 36.1Q-96.1 46.05 -96 56.15Q-95.8 70.5 -90.8 84.1Q-86 97.3 -77.9 108.75Q-70.3 119.35 -61.1 128.6Q-65.95 123.1 -70.25 117.25Q-74.6 111.35 -78.45 105.15Q-82.1 99.3 -85 93Q-88.05 86.55 -90.05 79.7Q-92.15 72.5 -93.25 65.1Q-94.4 58.2 -94.1 51.2Q-93.75 44.35 -92.7 37.6L-89.8 38.9L-88.95 39.45Q-88.65 54.15 -87.55 59.55Q-80.65 94.5 -36.65 117.25Q-79.8 89.8 -86.3 53.1Q-87.65 46.65 -88 39.65Q-82.9 41.75 -77.45 42.75Q-75.75 50.75 -73.65 57.15Q-63.75 86.35 -17 98.3Q-24.05 95.95 -30.6 92.75L-43.65 85.9Q-49.9 82.35 -55.45 77.6Q-60.8 73 -64.8 67.15Q-68.9 61.25 -71.85 54.85Q-74.6 49.1 -76.35 42.95L-70.55 43.6L-67 43.6Q-62.95 52.1 -60.5 55.4L-56.8 60.35Q-54.55 63.35 -48.8 66.9Q-43.05 70.4 -36.5 73Q-29.85 75.65 -22.85 77.15Q-16.2 78.55 -9.45 79.15Q-2.2 79.8 5.1 79.35Q-45.9 75.55 -60.6 50.3L-64.7 43.4L-56.05 41.95Q-53.85 45.65 -50.25 50Q-32.2 72.1 21 57.85Q-34.85 68.4 -51.15 44.85L-53.7 41.2L-45.35 38.35L-42.05 40.95Q-17.75 61.45 29.75 36.85Q19.85 40.9 12.75 42.9Q5.95 44.75 -1 46Q-8.35 47.35 -16.2 46.35Q-24.05 45.3 -31.5 43.3Q-38.9 41.25 -42.55 37.05L-34.25 34.05Q-24.55 30.7 -16.75 24.5Q-12.1 20.75 -8.6 15.6" />
+		</g>
+		<g id="Espina" transform="matrix(1, 0, 0, 1, 0, 0)">
+			<linearGradient id="LinearGradID_2" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0229492, 0, 0, -0.0152893, 0, 0.05)" spreadMethod="pad" x1="-819.2" y1="0" x2="819.2" y2="0">
+				<stop offset="0" style="stop-color:#CCCCCC;stop-opacity:1" />
+				<stop offset="1" style="stop-color:#333333;stop-opacity:1" />
+			</linearGradient>
+			<path style="fill:url(#LinearGradID_2) " d="M-18.8,0Q-17.85 -5.7 -12.3 -9.6Q-11.2 -5.35 -6.5 -8.25L-6.45 -8.2L-6.2 -8.3Q1.25 -16.25 6.65 -12.4Q0.05 -12.55 0 -5.95Q2.7 -2.4 7.75 -4.1Q18 -1.45 18.8 0L-18.8 0" />
+			<linearGradient id="LinearGradID_3" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0229492, 0, 0, 0.0152893, 0, -0.05)" spreadMethod="pad" x1="-819.2" y1="0" x2="819.2" y2="0">
+				<stop offset="0" style="stop-color:#CCCCCC;stop-opacity:1" />
+				<stop offset="1" style="stop-color:#333333;stop-opacity:1" />
+			</linearGradient>
+			<path style="fill:url(#LinearGradID_3) " d="M18.8,0Q18 1.45 7.75 4.1Q2.7 2.4 0 5.95Q0.05 12.55 6.65 12.4Q1.25 16.25 -6.2 8.35Q-6.35 8.25 -6.45 8.25L-6.5 8.25Q-11.2 5.35 -12.3 9.6Q-17.85 5.7 -18.8 0L18.8 0" />
+		</g>
+	</defs>
+	<g id="screen" />
+</svg>
\ No newline at end of file
diff --git a/dragon/src/script.js b/dragon/src/script.js
new file mode 100644
index 0000000..ba5562a
--- /dev/null
+++ b/dragon/src/script.js
@@ -0,0 +1,80 @@
+"use strict";
+// Ported from flash
+// credits https://www.deviantart.com/gifhaas/art/Dragon-8681899 dragon by GifHaas on DeviantArt
+
+const screen = document.getElementById("screen");
+const xmlns = "http://www.w3.org/2000/svg";
+const xlinkns = "http://www.w3.org/1999/xlink";
+
+window.addEventListener(
+	"pointermove",
+	(e) => {
+		pointer.x = e.clientX;
+		pointer.y = e.clientY;
+		rad = 0;
+	},
+	false
+);
+
+const resize = () => {
+	width = window.innerWidth;
+	height = window.innerHeight;
+};
+
+let width, height;
+window.addEventListener("resize", () => resize(), false);
+resize();
+
+const prepend = (use, i) => {
+	const elem = document.createElementNS(xmlns, "use");
+	elems[i].use = elem;
+	elem.setAttributeNS(xlinkns, "xlink:href", "#" + use);
+	screen.prepend(elem);
+};
+	
+const N = 40;
+
+const elems = [];
+for (let i = 0; i < N; i++) elems[i] = { use: null, x: width / 2, y: 0 };
+const pointer = { x: width / 2, y: height / 2 };
+const radm = Math.min(pointer.x, pointer.y) - 20;
+let frm = Math.random();
+let rad = 0;
+
+for (let i = 1; i < N; i++) {
+	if (i === 1) prepend("Cabeza", i);
+	else if (i === 8 || i === 14) prepend("Aletas", i);
+	else prepend("Espina", i);
+}
+
+const run = () => {
+	requestAnimationFrame(run);
+	let e = elems[0];
+	const ax = Math.cos(3 * frm) * rad * width / height;
+	const ay = Math.sin(4 * frm) * rad * height / width;
+	e.x += (ax + pointer.x - e.x) / 10;
+	e.y += (ay + pointer.y - e.y) / 10;
+	for (let i = 1; i < N; i++) {
+		let e = elems[i];
+		let ep = elems[i - 1];
+		const a = Math.atan2(e.y - ep.y, e.x - ep.x);
+		e.x += (ep.x - e.x + (Math.cos(a) * (100 - i)) / 5) / 4;
+		e.y += (ep.y - e.y + (Math.sin(a) * (100 - i)) / 5) / 4;
+		const s = (162 + 4 * (1 - i)) / 50;
+		e.use.setAttributeNS(
+			null,
+			"transform",
+			`translate(${(ep.x + e.x) / 2},${(ep.y + e.y) / 2}) rotate(${
+				(180 / Math.PI) * a
+			}) translate(${0},${0}) scale(${s},${s})`
+		);
+	}
+	if (rad < radm) rad++;
+	frm += 0.003;
+	if (rad > 60) {
+		pointer.x += (width / 2 - pointer.x) * 0.05;
+		pointer.y += (height / 2 - pointer.y) * 0.05;
+	}
+};
+
+run();
diff --git a/dragon/src/style.css b/dragon/src/style.css
new file mode 100644
index 0000000..e1cb04d
--- /dev/null
+++ b/dragon/src/style.css
@@ -0,0 +1,19 @@
+body, html {
+	position: absolute;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	background: #fff;
+	touch-action: none;
+}
+
+svg {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background: #fff;
+	cursor: pointer;
+	filter:sepia(20%);
+}
\ No newline at end of file
diff --git a/dreaming-of-jupiterthree-js/README.markdown b/dreaming-of-jupiterthree-js/README.markdown
new file mode 100644
index 0000000..1c5cf33
--- /dev/null
+++ b/dreaming-of-jupiterthree-js/README.markdown
@@ -0,0 +1,5 @@
+# Dreaming of Jupiter - Three.js
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/isladjan/pen/zYqLxeG](https://codepen.io/isladjan/pen/zYqLxeG).
+
+According to Vanga’s dreambook, seeing Jupiter in the sky promises a future disaster, when a fiery rain spills on Earth, which will kill all life and bring terrible destruction.
diff --git a/dreaming-of-jupiterthree-js/dist/index.html b/dreaming-of-jupiterthree-js/dist/index.html
new file mode 100644
index 0000000..a9da3f2
--- /dev/null
+++ b/dreaming-of-jupiterthree-js/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Dreaming of Jupiter - Three.js</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="canvas_container"></div>
+<button id="fullscr">Go Fullscreen</button>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/dreaming-of-jupiterthree-js/dist/script.js b/dreaming-of-jupiterthree-js/dist/script.js
new file mode 100644
index 0000000..9fd6a50
--- /dev/null
+++ b/dreaming-of-jupiterthree-js/dist/script.js
@@ -0,0 +1,245 @@
+let renderer,
+    camera,
+    planet,
+    moon,
+    sphereBg,
+    terrainGeometry,
+    container = document.getElementById("canvas_container"),
+    timeout_Debounce,
+    frame = 0,
+    cameraDx = 0.05,
+    count = 0,
+    t = 0;
+
+/*   Lines values  */
+let lineTotal = 1000;
+let linesGeometry = new THREE.BufferGeometry();
+linesGeometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(6 * lineTotal), 3));
+linesGeometry.setAttribute("velocity", new THREE.BufferAttribute(new Float32Array(2 * lineTotal), 1));
+let l_positionAttr = linesGeometry.getAttribute("position");
+let l_vertex_Array = linesGeometry.getAttribute("position").array;
+let l_velocity_Array = linesGeometry.getAttribute("velocity").array;
+
+
+init();
+animate();
+
+
+function init() {
+    scene = new THREE.Scene();
+    scene.background = new THREE.Color("#000000");
+    scene.fog = new THREE.Fog("#3c1e02", 0.5, 50);
+
+    camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 1000)
+    camera.position.set(0, 1, 32)
+
+    pointLight1 = new THREE.PointLight("#ffffff", 1, 0);
+    pointLight1.position.set(0, 30, 30);
+    scene.add(pointLight1);
+
+    renderer = new THREE.WebGLRenderer({
+        antialias: true,
+        alpha: true
+    });
+    renderer.setSize(container.clientWidth, container.clientHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    container.appendChild(renderer.domElement);
+
+    const loader = new THREE.TextureLoader();
+
+
+    // Planet
+    const texturePlanet = loader.load('https://res.cloudinary.com/dtvy1jqj0/image/upload/v1600159868/misc/saturn3.jpg');
+    texturePlanet.anisotropy = 16;
+    const planetGeometry = new THREE.SphereBufferGeometry(10, 50, 50);
+    const planetMaterial = new THREE.MeshLambertMaterial({
+        map: texturePlanet,
+        fog: false
+    });
+    planet = new THREE.Mesh(planetGeometry, planetMaterial);
+    planet.position.set(0, 8, -30);
+    scene.add(planet);
+
+
+    //Moon
+    const textureMoon = loader.load('https://res.cloudinary.com/dtvy1jqj0/image/upload/v1600159866/misc/moon.jpg');
+    textureMoon.anisotropy = 16;
+    let moonGeometry = new THREE.SphereBufferGeometry(2, 32, 32);
+    let moonMaterial = new THREE.MeshPhongMaterial({
+        map: textureMoon,
+        fog: false
+    });
+    moon = new THREE.Mesh(moonGeometry, moonMaterial);
+    moon.position.set(0, 8, 0);
+    scene.add(moon);
+
+
+    // Sphere Background 
+    const textureSphereBg = loader.load('https://res.cloudinary.com/dtvy1jqj0/image/upload/v1600121398/misc/stars2.jpg');
+    textureSphereBg.anisotropy = 16;
+    const geometrySphereBg = new THREE.SphereBufferGeometry(150, 32, 32);
+    const materialSphereBg = new THREE.MeshBasicMaterial({
+        side: THREE.BackSide,
+        map: textureSphereBg,
+        fog: false
+    });
+    sphereBg = new THREE.Mesh(geometrySphereBg, materialSphereBg);
+    sphereBg.position.set(0, 50, 0);
+    scene.add(sphereBg);
+
+
+    // Terrain
+    const textureTerrain = loader.load();
+    textureTerrain.rotation = THREE.MathUtils.degToRad(5);
+    terrainGeometry = new THREE.PlaneBufferGeometry(70, 70, 20, 20);
+    const terrainMaterial = new THREE.MeshBasicMaterial({
+        map: textureTerrain,
+        fog: true
+    });
+    terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
+    terrain.rotation.x = -0.47 * Math.PI;
+    terrain.rotation.z = THREE.Math.degToRad(90);
+    scene.add(terrain);
+
+    let t_vertex_Array = terrainGeometry.getAttribute("position").array;
+    terrainGeometry.getAttribute("position").setUsage(THREE.DynamicDrawUsage);
+
+    terrainGeometry.setAttribute("myZ", new THREE.BufferAttribute(new Float32Array(t_vertex_Array.length / 3), 1));
+    let t_myZ_Array = terrainGeometry.getAttribute("myZ").array;
+
+    for (let i = 0; i < t_vertex_Array.length; i++) {
+        t_myZ_Array[i] = THREE.MathUtils.randInt(0, 5);
+    }
+
+    //Terain Lines
+    const terrain_line = new THREE.LineSegments(
+        terrainGeometry,
+        new THREE.LineBasicMaterial({
+            color: "#fff",
+            fog: false
+        })
+    );
+    terrain_line.rotation.x = -0.47 * Math.PI;
+    terrain_line.rotation.z = THREE.Math.degToRad(90);
+    scene.add(terrain_line);
+
+
+
+    //  Stars
+    for (let i = 0; i < lineTotal; i++) {
+        let x = THREE.MathUtils.randInt(-100, 100);
+        let y = THREE.MathUtils.randInt(10, 40);
+        if (x < 7 && x > -7 && y < 20) x += 14;
+        let z = THREE.MathUtils.randInt(0, -300);
+
+        l_vertex_Array[6 * i + 0] = l_vertex_Array[6 * i + 3] = x;
+        l_vertex_Array[6 * i + 1] = l_vertex_Array[6 * i + 4] = y;
+        l_vertex_Array[6 * i + 2] = l_vertex_Array[6 * i + 5] = z;
+
+        l_velocity_Array[2 * i] = l_velocity_Array[2 * i + 1] = 0;
+    }
+    let starsMaterial = new THREE.LineBasicMaterial({
+        color: "#ffffff",
+        transparent: true,
+        opacity: 0.5,
+        fog: false
+    });
+    let lines = new THREE.LineSegments(linesGeometry, starsMaterial);
+    linesGeometry.getAttribute("position").setUsage(THREE.DynamicDrawUsage);
+    scene.add(lines);
+}
+
+
+
+
+function animate() {
+    planet.rotation.y += 0.002;
+    sphereBg.rotation.x += 0.002;
+    sphereBg.rotation.y += 0.002;
+    sphereBg.rotation.z += 0.002;
+
+
+    // Moon Animation
+    moon.rotation.y -= 0.007;
+    moon.rotation.x -= 0.007;
+    moon.position.x = 15 * Math.cos(t) + 0;
+    moon.position.z = 20 * Math.sin(t) - 35;
+    t += 0.015;
+
+
+    // Terrain Animation  
+    let t_vertex_Array = terrainGeometry.getAttribute("position").array;
+    let t_myZ_Array = terrainGeometry.getAttribute("myZ").array;
+
+    for (let i = 0; i < t_vertex_Array.length; i++) {
+        if (i >= 210 && i <= 250) t_vertex_Array[i * 3 + 2] = 0;
+        else {
+            t_vertex_Array[i * 3 + 2] = Math.sin((i + count * 0.0003)) * (t_myZ_Array[i] - (t_myZ_Array[i] * 0.5));
+            count += 0.1;
+        }
+    }
+
+    //   Stars Animation  
+    for (let i = 0; i < lineTotal; i++) {
+        l_velocity_Array[2 * i] += 0.0049;
+        l_velocity_Array[2 * i + 1] += 0.005;
+
+        l_vertex_Array[6 * i + 2] += l_velocity_Array[2 * i];
+        l_vertex_Array[6 * i + 5] += l_velocity_Array[2 * i + 1];
+
+        if (l_vertex_Array[6 * i + 2] > 50) {
+            l_vertex_Array[6 * i + 2] = l_vertex_Array[6 * i + 5] = THREE.MathUtils.randInt(-200, 10);
+            l_velocity_Array[2 * i] = 0;
+            l_velocity_Array[2 * i + 1] = 0;
+        }
+    }
+
+
+    //Camera Movement
+    camera.position.x += cameraDx;
+    camera.position.y = -1.2 * (1 - Math.abs(frame / 2000 - 0.5) / 0.5);
+    camera.lookAt(0, 0, 0);
+    frame += 8;
+    if (frame > 2000) frame = 0;
+    if (camera.position.x > 18) cameraDx = -cameraDx;
+    if (camera.position.x < -18) cameraDx = Math.abs(cameraDx);
+
+
+    l_positionAttr.needsUpdate = true;
+    terrainGeometry.attributes.position.needsUpdate = true;
+    renderer.render(scene, camera);
+    requestAnimationFrame(animate);
+}
+
+
+
+
+/*     Resize     */
+window.addEventListener("resize", () => {
+    clearTimeout(timeout_Debounce);
+    timeout_Debounce = setTimeout(onWindowResize, 80);
+});
+function onWindowResize() {
+    camera.aspect = container.clientWidth / container.clientHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(container.clientWidth, container.clientHeight);
+}
+
+
+
+/*     Fullscreen btn     */
+let fullscreen;
+let fsEnter = document.getElementById('fullscr');
+fsEnter.addEventListener('click', function (e) {
+    e.preventDefault();
+    if (!fullscreen) {
+        fullscreen = true;
+        document.documentElement.requestFullscreen();
+        fsEnter.innerHTML = "Exit Fullscreen";
+    }
+    else {
+        fullscreen = false;
+        document.exitFullscreen();
+        fsEnter.innerHTML = "Go Fullscreen";
+    }
+});
\ No newline at end of file
diff --git a/dreaming-of-jupiterthree-js/dist/style.css b/dreaming-of-jupiterthree-js/dist/style.css
new file mode 100644
index 0000000..a0ac324
--- /dev/null
+++ b/dreaming-of-jupiterthree-js/dist/style.css
@@ -0,0 +1,40 @@
+body {
+    margin: 0;
+    overflow: hidden;
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    background-image: url("https://res.cloudinary.com/dtvy1jqj0/image/upload/v1600121402/misc/sky2.jpg");
+    background-size: cover;
+}
+
+canvas {
+    display: block;
+}
+
+#canvas_container {
+    width: 100%;
+    height: 100vh;
+}
+
+button {
+    position: absolute;
+    bottom: 5%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 1px solid white;
+    border-radius: 5px;
+    font-size: 0.9rem;
+    padding: 0.5rem 0.9em;
+    background: #000000;
+    color: white;
+    -webkit-font-smoothing: antialiased;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all .5s;
+}
+
+button:hover {
+    background: #ffffff;
+    color: #000000;
+}
\ No newline at end of file
diff --git a/dreaming-of-jupiterthree-js/license.txt b/dreaming-of-jupiterthree-js/license.txt
new file mode 100644
index 0000000..68e230a
--- /dev/null
+++ b/dreaming-of-jupiterthree-js/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by isladjan (https://codepen.io/isladjan/pen/zYqLxeG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/dreaming-of-jupiterthree-js/src/index.html b/dreaming-of-jupiterthree-js/src/index.html
new file mode 100644
index 0000000..de462a5
--- /dev/null
+++ b/dreaming-of-jupiterthree-js/src/index.html
@@ -0,0 +1,2 @@
+<div id="canvas_container"></div>
+<button id="fullscr">Go Fullscreen</button>
\ No newline at end of file
diff --git a/dreaming-of-jupiterthree-js/src/script.js b/dreaming-of-jupiterthree-js/src/script.js
new file mode 100644
index 0000000..9fd6a50
--- /dev/null
+++ b/dreaming-of-jupiterthree-js/src/script.js
@@ -0,0 +1,245 @@
+let renderer,
+    camera,
+    planet,
+    moon,
+    sphereBg,
+    terrainGeometry,
+    container = document.getElementById("canvas_container"),
+    timeout_Debounce,
+    frame = 0,
+    cameraDx = 0.05,
+    count = 0,
+    t = 0;
+
+/*   Lines values  */
+let lineTotal = 1000;
+let linesGeometry = new THREE.BufferGeometry();
+linesGeometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(6 * lineTotal), 3));
+linesGeometry.setAttribute("velocity", new THREE.BufferAttribute(new Float32Array(2 * lineTotal), 1));
+let l_positionAttr = linesGeometry.getAttribute("position");
+let l_vertex_Array = linesGeometry.getAttribute("position").array;
+let l_velocity_Array = linesGeometry.getAttribute("velocity").array;
+
+
+init();
+animate();
+
+
+function init() {
+    scene = new THREE.Scene();
+    scene.background = new THREE.Color("#000000");
+    scene.fog = new THREE.Fog("#3c1e02", 0.5, 50);
+
+    camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 1000)
+    camera.position.set(0, 1, 32)
+
+    pointLight1 = new THREE.PointLight("#ffffff", 1, 0);
+    pointLight1.position.set(0, 30, 30);
+    scene.add(pointLight1);
+
+    renderer = new THREE.WebGLRenderer({
+        antialias: true,
+        alpha: true
+    });
+    renderer.setSize(container.clientWidth, container.clientHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    container.appendChild(renderer.domElement);
+
+    const loader = new THREE.TextureLoader();
+
+
+    // Planet
+    const texturePlanet = loader.load('https://res.cloudinary.com/dtvy1jqj0/image/upload/v1600159868/misc/saturn3.jpg');
+    texturePlanet.anisotropy = 16;
+    const planetGeometry = new THREE.SphereBufferGeometry(10, 50, 50);
+    const planetMaterial = new THREE.MeshLambertMaterial({
+        map: texturePlanet,
+        fog: false
+    });
+    planet = new THREE.Mesh(planetGeometry, planetMaterial);
+    planet.position.set(0, 8, -30);
+    scene.add(planet);
+
+
+    //Moon
+    const textureMoon = loader.load('https://res.cloudinary.com/dtvy1jqj0/image/upload/v1600159866/misc/moon.jpg');
+    textureMoon.anisotropy = 16;
+    let moonGeometry = new THREE.SphereBufferGeometry(2, 32, 32);
+    let moonMaterial = new THREE.MeshPhongMaterial({
+        map: textureMoon,
+        fog: false
+    });
+    moon = new THREE.Mesh(moonGeometry, moonMaterial);
+    moon.position.set(0, 8, 0);
+    scene.add(moon);
+
+
+    // Sphere Background 
+    const textureSphereBg = loader.load('https://res.cloudinary.com/dtvy1jqj0/image/upload/v1600121398/misc/stars2.jpg');
+    textureSphereBg.anisotropy = 16;
+    const geometrySphereBg = new THREE.SphereBufferGeometry(150, 32, 32);
+    const materialSphereBg = new THREE.MeshBasicMaterial({
+        side: THREE.BackSide,
+        map: textureSphereBg,
+        fog: false
+    });
+    sphereBg = new THREE.Mesh(geometrySphereBg, materialSphereBg);
+    sphereBg.position.set(0, 50, 0);
+    scene.add(sphereBg);
+
+
+    // Terrain
+    const textureTerrain = loader.load();
+    textureTerrain.rotation = THREE.MathUtils.degToRad(5);
+    terrainGeometry = new THREE.PlaneBufferGeometry(70, 70, 20, 20);
+    const terrainMaterial = new THREE.MeshBasicMaterial({
+        map: textureTerrain,
+        fog: true
+    });
+    terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
+    terrain.rotation.x = -0.47 * Math.PI;
+    terrain.rotation.z = THREE.Math.degToRad(90);
+    scene.add(terrain);
+
+    let t_vertex_Array = terrainGeometry.getAttribute("position").array;
+    terrainGeometry.getAttribute("position").setUsage(THREE.DynamicDrawUsage);
+
+    terrainGeometry.setAttribute("myZ", new THREE.BufferAttribute(new Float32Array(t_vertex_Array.length / 3), 1));
+    let t_myZ_Array = terrainGeometry.getAttribute("myZ").array;
+
+    for (let i = 0; i < t_vertex_Array.length; i++) {
+        t_myZ_Array[i] = THREE.MathUtils.randInt(0, 5);
+    }
+
+    //Terain Lines
+    const terrain_line = new THREE.LineSegments(
+        terrainGeometry,
+        new THREE.LineBasicMaterial({
+            color: "#fff",
+            fog: false
+        })
+    );
+    terrain_line.rotation.x = -0.47 * Math.PI;
+    terrain_line.rotation.z = THREE.Math.degToRad(90);
+    scene.add(terrain_line);
+
+
+
+    //  Stars
+    for (let i = 0; i < lineTotal; i++) {
+        let x = THREE.MathUtils.randInt(-100, 100);
+        let y = THREE.MathUtils.randInt(10, 40);
+        if (x < 7 && x > -7 && y < 20) x += 14;
+        let z = THREE.MathUtils.randInt(0, -300);
+
+        l_vertex_Array[6 * i + 0] = l_vertex_Array[6 * i + 3] = x;
+        l_vertex_Array[6 * i + 1] = l_vertex_Array[6 * i + 4] = y;
+        l_vertex_Array[6 * i + 2] = l_vertex_Array[6 * i + 5] = z;
+
+        l_velocity_Array[2 * i] = l_velocity_Array[2 * i + 1] = 0;
+    }
+    let starsMaterial = new THREE.LineBasicMaterial({
+        color: "#ffffff",
+        transparent: true,
+        opacity: 0.5,
+        fog: false
+    });
+    let lines = new THREE.LineSegments(linesGeometry, starsMaterial);
+    linesGeometry.getAttribute("position").setUsage(THREE.DynamicDrawUsage);
+    scene.add(lines);
+}
+
+
+
+
+function animate() {
+    planet.rotation.y += 0.002;
+    sphereBg.rotation.x += 0.002;
+    sphereBg.rotation.y += 0.002;
+    sphereBg.rotation.z += 0.002;
+
+
+    // Moon Animation
+    moon.rotation.y -= 0.007;
+    moon.rotation.x -= 0.007;
+    moon.position.x = 15 * Math.cos(t) + 0;
+    moon.position.z = 20 * Math.sin(t) - 35;
+    t += 0.015;
+
+
+    // Terrain Animation  
+    let t_vertex_Array = terrainGeometry.getAttribute("position").array;
+    let t_myZ_Array = terrainGeometry.getAttribute("myZ").array;
+
+    for (let i = 0; i < t_vertex_Array.length; i++) {
+        if (i >= 210 && i <= 250) t_vertex_Array[i * 3 + 2] = 0;
+        else {
+            t_vertex_Array[i * 3 + 2] = Math.sin((i + count * 0.0003)) * (t_myZ_Array[i] - (t_myZ_Array[i] * 0.5));
+            count += 0.1;
+        }
+    }
+
+    //   Stars Animation  
+    for (let i = 0; i < lineTotal; i++) {
+        l_velocity_Array[2 * i] += 0.0049;
+        l_velocity_Array[2 * i + 1] += 0.005;
+
+        l_vertex_Array[6 * i + 2] += l_velocity_Array[2 * i];
+        l_vertex_Array[6 * i + 5] += l_velocity_Array[2 * i + 1];
+
+        if (l_vertex_Array[6 * i + 2] > 50) {
+            l_vertex_Array[6 * i + 2] = l_vertex_Array[6 * i + 5] = THREE.MathUtils.randInt(-200, 10);
+            l_velocity_Array[2 * i] = 0;
+            l_velocity_Array[2 * i + 1] = 0;
+        }
+    }
+
+
+    //Camera Movement
+    camera.position.x += cameraDx;
+    camera.position.y = -1.2 * (1 - Math.abs(frame / 2000 - 0.5) / 0.5);
+    camera.lookAt(0, 0, 0);
+    frame += 8;
+    if (frame > 2000) frame = 0;
+    if (camera.position.x > 18) cameraDx = -cameraDx;
+    if (camera.position.x < -18) cameraDx = Math.abs(cameraDx);
+
+
+    l_positionAttr.needsUpdate = true;
+    terrainGeometry.attributes.position.needsUpdate = true;
+    renderer.render(scene, camera);
+    requestAnimationFrame(animate);
+}
+
+
+
+
+/*     Resize     */
+window.addEventListener("resize", () => {
+    clearTimeout(timeout_Debounce);
+    timeout_Debounce = setTimeout(onWindowResize, 80);
+});
+function onWindowResize() {
+    camera.aspect = container.clientWidth / container.clientHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(container.clientWidth, container.clientHeight);
+}
+
+
+
+/*     Fullscreen btn     */
+let fullscreen;
+let fsEnter = document.getElementById('fullscr');
+fsEnter.addEventListener('click', function (e) {
+    e.preventDefault();
+    if (!fullscreen) {
+        fullscreen = true;
+        document.documentElement.requestFullscreen();
+        fsEnter.innerHTML = "Exit Fullscreen";
+    }
+    else {
+        fullscreen = false;
+        document.exitFullscreen();
+        fsEnter.innerHTML = "Go Fullscreen";
+    }
+});
\ No newline at end of file
diff --git a/dreaming-of-jupiterthree-js/src/style.css b/dreaming-of-jupiterthree-js/src/style.css
new file mode 100644
index 0000000..a0ac324
--- /dev/null
+++ b/dreaming-of-jupiterthree-js/src/style.css
@@ -0,0 +1,40 @@
+body {
+    margin: 0;
+    overflow: hidden;
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    background-image: url("https://res.cloudinary.com/dtvy1jqj0/image/upload/v1600121402/misc/sky2.jpg");
+    background-size: cover;
+}
+
+canvas {
+    display: block;
+}
+
+#canvas_container {
+    width: 100%;
+    height: 100vh;
+}
+
+button {
+    position: absolute;
+    bottom: 5%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 1px solid white;
+    border-radius: 5px;
+    font-size: 0.9rem;
+    padding: 0.5rem 0.9em;
+    background: #000000;
+    color: white;
+    -webkit-font-smoothing: antialiased;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all .5s;
+}
+
+button:hover {
+    background: #ffffff;
+    color: #000000;
+}
\ No newline at end of file
diff --git a/drum-sequencer-w-sample-pad/README.markdown b/drum-sequencer-w-sample-pad/README.markdown
new file mode 100644
index 0000000..67fe41c
--- /dev/null
+++ b/drum-sequencer-w-sample-pad/README.markdown
@@ -0,0 +1,5 @@
+# DRUM SEQUENCER w/ SAMPLE PAD
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/kucerajacob/pen/GRqBQNV](https://codepen.io/kucerajacob/pen/GRqBQNV).
+
+Just lay out your beat and press "Q, W, E or R" for live sample playback!
diff --git a/drum-sequencer-w-sample-pad/dist/index.html b/drum-sequencer-w-sample-pad/dist/index.html
new file mode 100644
index 0000000..9b900c1
--- /dev/null
+++ b/drum-sequencer-w-sample-pad/dist/index.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - DRUM SEQUENCER w/ SAMPLE PAD</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Drum Sequencer</title>
+	<link rel="stylesheet" href="./style.css">
+	<link rel="icon" type="image/png" href="./favicon.png">
+</head>
+<body>
+	<div class="container">
+		<div id="p0">
+			<p class="drum-name">KICK</p>
+			<p class="drum-name">CLAP</p>
+			<p class="drum-name">HIHAT</p>
+			<p class="drum-name">RIM</p>
+		</div>
+
+		<div id="controls">
+			<div id="controls-left-side">
+				<div class="sampler" id="sampler1">Q</div>
+				<div class="sampler" id="sampler2">W</div>
+				<div class="sampler" id="sampler3">E</div>
+				<div class="sampler" id="sampler4">R</div>
+			</div>
+
+			<div id="controls-right-side">
+				<p id="bpm">130 BPM</p>
+				<input type="range" min="30" max="200" value="130" id="bpm-slider">
+	
+				<p id="clear-track">CLEAR</p>
+			</div>
+		</div>
+
+		<div class="sequencer">
+			<div class="d1">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+
+			<div class="d2">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d3">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d4" id="d-split">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d5">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d6">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d7">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d8" id="d-split">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d9">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d10">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d11">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d12" id="d-split">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d13">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d14">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d15">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d16">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+		</div>
+	</div>
+
+	<script src="./app.js"></script>
+</body>
+</html>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/drum-sequencer-w-sample-pad/dist/script.js b/drum-sequencer-w-sample-pad/dist/script.js
new file mode 100644
index 0000000..842d7a3
--- /dev/null
+++ b/drum-sequencer-w-sample-pad/dist/script.js
@@ -0,0 +1,151 @@
+const rows = document.querySelector(".sequencer").children;
+
+const kick = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/kick.mp3"),
+	clap = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/clap.mp3"),
+	hihat = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/hihat.mp3"),
+	rim = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/rim.mp3"),
+	Q = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/Q.mp3"),
+	W = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/W.mp3"),
+	E = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/E.mp3"),
+	R = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/R.mp3");
+
+const item = document.querySelectorAll(".sample");
+
+// Checkbox toggle functionality
+item.forEach(function (el) {
+	el.onclick = function () {
+		if (el.classList.contains("item-selected")) {
+			el.classList.remove("item-selected");
+		} else {
+			el.classList.add("item-selected");
+		}
+	}
+});
+
+// Clear button functionality
+document.getElementById("clear-track").onclick = function () {
+	[].forEach.call(item, function (el) {
+		el.classList.remove("item-selected");
+	});
+}
+
+// Sample pad key press functionality
+document.onkeydown = function (e) {
+	e = e || window.event;
+
+	switch (e.key) {
+		case "q":
+			Q.load();
+			Q.play();
+			document.getElementById("sampler1").classList.add("pressed");
+			break;
+		case "w":
+			W.load();
+			W.play();
+			document.getElementById("sampler2").classList.add("pressed");
+			break;
+		case "e":
+			E.load();
+			E.play();
+			document.getElementById("sampler3").classList.add("pressed");
+			break;
+		case "r":
+			R.load();
+			R.play();
+			document.getElementById("sampler4").classList.add("pressed");
+			break;	
+	}
+}
+
+document.onkeyup = function (e) {
+	e = e || window.event;
+
+	switch (e.key) {
+		case "q":
+			// Q.pause();
+			// Q.currentTime = 0;
+			document.getElementById("sampler1").classList.remove("pressed");
+			break;
+		case "w":
+			// W.pause();
+			// W.currentTime = 0;
+			document.getElementById("sampler2").classList.remove("pressed");
+			break;
+		case "e":
+			// E.pause();
+			// E.currentTime = 0;
+			document.getElementById("sampler3").classList.remove("pressed");
+			break;
+		case "r":
+			// R.pause();
+			// R.currentTime = 0;
+			document.getElementById("sampler4").classList.remove("pressed");
+			break;	
+	}
+}
+
+// BPM slider
+const bpmSlider = document.getElementById("bpm-slider");
+const bpmText = document.getElementById("bpm");
+var BPM = bpmSlider.value;
+
+bpmText.innerHTML = bpmSlider.value + " BPM";
+
+bpmSlider.oninput = function () {
+	bpmText.innerHTML = this.value + " BPM";
+	BPM = parseInt(((60 / bpmSlider.value) * 1000) / 4);
+}
+
+let i = -1;
+rowLoop = () => {
+	setTimeout(function () {
+		i++;
+
+		if (i === rows.length) {
+			i = 0;
+			document.querySelector(".d16").childNodes[1].classList.remove("row-highlight");
+			document.querySelector(".d16").childNodes[3].classList.remove("row-highlight");
+			document.querySelector(".d16").childNodes[5].classList.remove("row-highlight");
+			document.querySelector(".d16").childNodes[7].classList.remove("row-highlight");
+		}
+
+		document.querySelector(".d" + (i + 1)).childNodes[1].classList.add("row-highlight");
+		document.querySelector(".d" + (i + 1)).childNodes[3].classList.add("row-highlight");
+		document.querySelector(".d" + (i + 1)).childNodes[5].classList.add("row-highlight");
+		document.querySelector(".d" + (i + 1)).childNodes[7].classList.add("row-highlight");
+
+		if (i > 0) {
+			document.querySelector(".d" + i).childNodes[1].classList.remove("row-highlight");
+			document.querySelector(".d" + i).childNodes[3].classList.remove("row-highlight");
+			document.querySelector(".d" + i).childNodes[5].classList.remove("row-highlight");
+			document.querySelector(".d" + i).childNodes[7].classList.remove("row-highlight");
+		}
+
+		document.querySelectorAll(".d" + (i + 1)).forEach(function (bruh) {
+			if (bruh.childNodes[1].classList.contains("row-highlight") && bruh.childNodes[1].classList.contains("item-selected")) {
+				kick.load();
+				kick.play();
+			}
+
+			if (bruh.childNodes[3].classList.contains("row-highlight") && bruh.childNodes[3].classList.contains("item-selected")) {
+				clap.load();
+				clap.play();
+			}
+
+			if (bruh.childNodes[5].classList.contains("row-highlight") && bruh.childNodes[5].classList.contains("item-selected")) {
+				hihat.load();
+				hihat.play();
+			}
+
+			if (bruh.childNodes[7].classList.contains("row-highlight") && bruh.childNodes[7].classList.contains("item-selected")) {
+				rim.load();
+				rim.play();
+			}
+		});
+
+		rowLoop();
+	}, BPM);
+}
+
+// Call rowLoop() function
+rowLoop();
\ No newline at end of file
diff --git a/drum-sequencer-w-sample-pad/dist/style.css b/drum-sequencer-w-sample-pad/dist/style.css
new file mode 100644
index 0000000..168db5c
--- /dev/null
+++ b/drum-sequencer-w-sample-pad/dist/style.css
@@ -0,0 +1,334 @@
+@import url('https://fonts.googleapis.com/css2?family=Lexend+Zetta&display=swap');
+
+* {
+	margin: 0;
+	padding: 0;
+	user-select: none;
+}
+
+html {
+	font-family: 'Lexend Zetta', sans-serif;
+	background-color: rgb(248, 248, 248);
+}
+
+.container {
+	background-color: rgb(255, 255, 255);
+	/* box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.07); */
+	height: 370px;
+	width: 950px;
+	border-radius: 11px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	padding: 12px 20px;
+	display: flex;
+	border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.sequencer {
+	display: flex;
+	height: 270px;
+	width: 840px;
+	margin-top: 100px;
+}
+
+#p0 {
+	margin-top: 109px;
+	width: 160px;
+	padding-left: 2px;
+	padding-right: 26px;
+}
+
+.drum-name {
+	font-weight: bold;
+	font-size: 12px;
+	letter-spacing: -0.5px;
+	line-height: 58px;
+	padding: 0px 36px 0px 16px;
+	border-radius: 6px;
+	margin-bottom: 4px;
+	background-color: #fff;
+	color: rgba(0, 0, 0, 0.6);
+	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
+	border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+#controls {
+	position: absolute;
+	left: 20px;
+	right: 20px;
+	top: 0px;
+	height: 120px;
+}
+
+#controls-left-side {
+	float: left;
+	height: 100%;
+}
+
+#controls-right-side {
+	float: right;
+	height: 100%;
+}
+
+.sampler {
+	display: inline;
+	padding: 30px 48px;
+	border-radius: 6px;
+	line-height: 120px;
+	text-align: center;
+	background-color: #fff;
+	color: rgba(0, 0, 0, 0.6);
+	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
+	border: 1px solid rgba(0, 0, 0, 0.2);
+	position: relative;
+}
+
+.pressed {
+	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
+	top: 2px;
+	background-color: rgba(0, 0, 0, 0.1);
+}
+
+#bpm {
+	font-weight: bold;
+	color: rgba(0, 0, 0, 0.6);
+	line-height: 120px;
+	position: absolute;
+	top: 25px;
+	right: 200px;
+}
+
+#bpm-slider {
+	position: absolute;
+	top: 24px;
+	right: 150px;
+	width: 180px;
+}
+
+#bpm-slider:hover {
+	cursor: pointer;
+}
+
+#controls p {
+	display: inline;
+	font-size: 12px;
+	position: relative;
+	top: -1px;
+}
+
+#clear-track {
+	font-weight: bold;
+	color: rgba(0, 0, 0, 0.6);
+	padding: 16px 24px;
+	border-radius: 6px;
+	box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.05);
+	border: 1px solid rgba(0, 0, 0, 0.2);
+	margin-left: 36px;
+	margin-right: 2px;
+	position: relative;
+	-webkit-user-select: none;
+}
+
+#clear-track:hover {
+	cursor: pointer;
+	border: 1px solid rgba(0, 0, 0, 0.4);
+	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
+}
+
+#clear-track:active {
+	top: 0px;
+	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
+}
+
+.d1,
+.d2,
+.d3,
+.d4,
+.d5,
+.d6,
+.d7,
+.d8,
+.d9,
+.d10,
+.d11,
+.d12,
+.d13,
+.d14,
+.d15,
+.d16 {
+	background-color: rgba(0, 0, 0, 0);
+	height: 100%;
+	width: 50%;
+	margin: 5px 2px;
+	display: inline-block;
+}
+
+.sample {
+	background-color: rgba(0, 0, 0, 0.1);
+	margin: 4px 0px;
+	display: block;
+	height: 60px;
+	border-radius: 6px;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	box-sizing: border-box;
+}
+
+.sample:hover {
+	cursor: pointer;
+}
+
+.row-highlight {
+	background-color: rgba(28, 29, 28, 0.2);
+}
+
+.item-selected {
+	background-color: rgba(0, 0, 0, 0.8);
+}
+
+#d-split {
+	margin-right: 20px;
+}
+
+input[type=range] {
+	height: 50px;
+	-webkit-appearance: none;
+	margin: 10px 0;
+	width: 100%;
+}
+
+input[type=range]:focus {
+	outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+	width: 100%;
+	height: 10px;
+	cursor: pointer;
+	box-shadow: 0px 0px 0px #000000;
+	background: #EDEDED;
+	border-radius: 5px;
+	border: 1px solid #C2C2C2;
+}
+
+input[type=range]::-webkit-slider-thumb {
+	box-shadow: 0px 0px 0px #707070;
+	border: 1px solid #A3A3A3;
+	height: 42px;
+	width: 15px;
+	border-radius: 17px;
+	background: #FFFFFF;
+	cursor: pointer;
+	-webkit-appearance: none;
+	margin-top: -17px;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+	background: #EDEDED;
+}
+
+input[type=range]::-moz-range-track {
+	width: 100%;
+	height: 7px;
+	cursor: pointer;
+	background: #EDEDED;
+	border-radius: 50px;
+	border: 1px solid #C2C2C2;
+}
+
+input[type=range]::-moz-range-thumb {
+	border: 1px solid #A3A3A3;
+	height: 42px;
+	width: 13px;
+	border-radius: 17px;
+	background: #FFFFFF;
+	cursor: pointer;
+}
+
+input[type=range]::-ms-track {
+	width: 100%;
+	height: 10px;
+	cursor: pointer;
+	animate: 0.2s;
+	background: transparent;
+	border-color: transparent;
+	color: transparent;
+}
+
+input[type=range]::-ms-fill-lower {
+	background: #EDEDED;
+	border: 1px solid #C2C2C2;
+	border-radius: 10px;
+}
+
+input[type=range]::-ms-fill-upper {
+	background: #EDEDED;
+	border: 1px solid #C2C2C2;
+	border-radius: 10px;
+}
+
+input[type=range]::-ms-thumb {
+	margin-top: 1px;
+	border: 1px solid #A3A3A3;
+	height: 43px;
+	width: 15px;
+	border-radius: 50px;
+	background: #FFFFFF;
+	cursor: pointer;
+}
+
+input[type=range]:focus::-ms-fill-lower {
+	background: #EDEDED;
+}
+
+input[type=range]:focus::-ms-fill-upper {
+	background: #EDEDED;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* .parent, .parent2 {
+	margin-top: 10px;
+	display: flex;
+	flex-wrap: no-wrap;
+}
+
+.kick, .clap {
+	width: 50%;
+	height: 40px;
+	background-color: rgba(0, 0, 0, 0.1);
+	margin: 0px 2px;
+	line-height: 50px;
+	text-align: center;
+	font-weight: bold;
+	font-family: "Courier New";
+	font-size: 12px;
+	border-radius: 12px;
+	box-sizing: border-box;
+}
+
+.kick:hover, .clap:hover {
+	cursor: pointer;
+}
+
+.item-selected {
+	background-color: salmon;
+}
+
+.row {
+	background-color: rgba(0, 0, 0, 0.25);
+} */
\ No newline at end of file
diff --git a/drum-sequencer-w-sample-pad/license.txt b/drum-sequencer-w-sample-pad/license.txt
new file mode 100644
index 0000000..d02cb48
--- /dev/null
+++ b/drum-sequencer-w-sample-pad/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Jacob Kucera (https://codepen.io/kucerajacob/pen/GRqBQNV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/drum-sequencer-w-sample-pad/src/index.html b/drum-sequencer-w-sample-pad/src/index.html
new file mode 100644
index 0000000..0e954d9
--- /dev/null
+++ b/drum-sequencer-w-sample-pad/src/index.html
@@ -0,0 +1,151 @@
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Drum Sequencer</title>
+	<link rel="stylesheet" href="./style.css">
+	<link rel="icon" type="image/png" href="./favicon.png">
+</head>
+<body>
+	<div class="container">
+		<div id="p0">
+			<p class="drum-name">KICK</p>
+			<p class="drum-name">CLAP</p>
+			<p class="drum-name">HIHAT</p>
+			<p class="drum-name">RIM</p>
+		</div>
+
+		<div id="controls">
+			<div id="controls-left-side">
+				<div class="sampler" id="sampler1">Q</div>
+				<div class="sampler" id="sampler2">W</div>
+				<div class="sampler" id="sampler3">E</div>
+				<div class="sampler" id="sampler4">R</div>
+			</div>
+
+			<div id="controls-right-side">
+				<p id="bpm">130 BPM</p>
+				<input type="range" min="30" max="200" value="130" id="bpm-slider">
+	
+				<p id="clear-track">CLEAR</p>
+			</div>
+		</div>
+
+		<div class="sequencer">
+			<div class="d1">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+
+			<div class="d2">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d3">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d4" id="d-split">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d5">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d6">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d7">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d8" id="d-split">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d9">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d10">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d11">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d12" id="d-split">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d13">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d14">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d15">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+	
+			<div class="d16">
+				<div class="sample" data-sample="kick.wav"></div>
+				<div class="sample" data-sample="clap.wav"></div>
+				<div class="sample" data-sample="hihat.wav"></div>
+				<div class="sample" data-sample="rim.wav"></div>
+			</div>
+		</div>
+	</div>
+
+	<script src="./app.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/drum-sequencer-w-sample-pad/src/script.js b/drum-sequencer-w-sample-pad/src/script.js
new file mode 100644
index 0000000..842d7a3
--- /dev/null
+++ b/drum-sequencer-w-sample-pad/src/script.js
@@ -0,0 +1,151 @@
+const rows = document.querySelector(".sequencer").children;
+
+const kick = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/kick.mp3"),
+	clap = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/clap.mp3"),
+	hihat = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/hihat.mp3"),
+	rim = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/rim.mp3"),
+	Q = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/Q.mp3"),
+	W = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/W.mp3"),
+	E = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/E.mp3"),
+	R = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/R.mp3");
+
+const item = document.querySelectorAll(".sample");
+
+// Checkbox toggle functionality
+item.forEach(function (el) {
+	el.onclick = function () {
+		if (el.classList.contains("item-selected")) {
+			el.classList.remove("item-selected");
+		} else {
+			el.classList.add("item-selected");
+		}
+	}
+});
+
+// Clear button functionality
+document.getElementById("clear-track").onclick = function () {
+	[].forEach.call(item, function (el) {
+		el.classList.remove("item-selected");
+	});
+}
+
+// Sample pad key press functionality
+document.onkeydown = function (e) {
+	e = e || window.event;
+
+	switch (e.key) {
+		case "q":
+			Q.load();
+			Q.play();
+			document.getElementById("sampler1").classList.add("pressed");
+			break;
+		case "w":
+			W.load();
+			W.play();
+			document.getElementById("sampler2").classList.add("pressed");
+			break;
+		case "e":
+			E.load();
+			E.play();
+			document.getElementById("sampler3").classList.add("pressed");
+			break;
+		case "r":
+			R.load();
+			R.play();
+			document.getElementById("sampler4").classList.add("pressed");
+			break;	
+	}
+}
+
+document.onkeyup = function (e) {
+	e = e || window.event;
+
+	switch (e.key) {
+		case "q":
+			// Q.pause();
+			// Q.currentTime = 0;
+			document.getElementById("sampler1").classList.remove("pressed");
+			break;
+		case "w":
+			// W.pause();
+			// W.currentTime = 0;
+			document.getElementById("sampler2").classList.remove("pressed");
+			break;
+		case "e":
+			// E.pause();
+			// E.currentTime = 0;
+			document.getElementById("sampler3").classList.remove("pressed");
+			break;
+		case "r":
+			// R.pause();
+			// R.currentTime = 0;
+			document.getElementById("sampler4").classList.remove("pressed");
+			break;	
+	}
+}
+
+// BPM slider
+const bpmSlider = document.getElementById("bpm-slider");
+const bpmText = document.getElementById("bpm");
+var BPM = bpmSlider.value;
+
+bpmText.innerHTML = bpmSlider.value + " BPM";
+
+bpmSlider.oninput = function () {
+	bpmText.innerHTML = this.value + " BPM";
+	BPM = parseInt(((60 / bpmSlider.value) * 1000) / 4);
+}
+
+let i = -1;
+rowLoop = () => {
+	setTimeout(function () {
+		i++;
+
+		if (i === rows.length) {
+			i = 0;
+			document.querySelector(".d16").childNodes[1].classList.remove("row-highlight");
+			document.querySelector(".d16").childNodes[3].classList.remove("row-highlight");
+			document.querySelector(".d16").childNodes[5].classList.remove("row-highlight");
+			document.querySelector(".d16").childNodes[7].classList.remove("row-highlight");
+		}
+
+		document.querySelector(".d" + (i + 1)).childNodes[1].classList.add("row-highlight");
+		document.querySelector(".d" + (i + 1)).childNodes[3].classList.add("row-highlight");
+		document.querySelector(".d" + (i + 1)).childNodes[5].classList.add("row-highlight");
+		document.querySelector(".d" + (i + 1)).childNodes[7].classList.add("row-highlight");
+
+		if (i > 0) {
+			document.querySelector(".d" + i).childNodes[1].classList.remove("row-highlight");
+			document.querySelector(".d" + i).childNodes[3].classList.remove("row-highlight");
+			document.querySelector(".d" + i).childNodes[5].classList.remove("row-highlight");
+			document.querySelector(".d" + i).childNodes[7].classList.remove("row-highlight");
+		}
+
+		document.querySelectorAll(".d" + (i + 1)).forEach(function (bruh) {
+			if (bruh.childNodes[1].classList.contains("row-highlight") && bruh.childNodes[1].classList.contains("item-selected")) {
+				kick.load();
+				kick.play();
+			}
+
+			if (bruh.childNodes[3].classList.contains("row-highlight") && bruh.childNodes[3].classList.contains("item-selected")) {
+				clap.load();
+				clap.play();
+			}
+
+			if (bruh.childNodes[5].classList.contains("row-highlight") && bruh.childNodes[5].classList.contains("item-selected")) {
+				hihat.load();
+				hihat.play();
+			}
+
+			if (bruh.childNodes[7].classList.contains("row-highlight") && bruh.childNodes[7].classList.contains("item-selected")) {
+				rim.load();
+				rim.play();
+			}
+		});
+
+		rowLoop();
+	}, BPM);
+}
+
+// Call rowLoop() function
+rowLoop();
\ No newline at end of file
diff --git a/drum-sequencer-w-sample-pad/src/style.css b/drum-sequencer-w-sample-pad/src/style.css
new file mode 100644
index 0000000..168db5c
--- /dev/null
+++ b/drum-sequencer-w-sample-pad/src/style.css
@@ -0,0 +1,334 @@
+@import url('https://fonts.googleapis.com/css2?family=Lexend+Zetta&display=swap');
+
+* {
+	margin: 0;
+	padding: 0;
+	user-select: none;
+}
+
+html {
+	font-family: 'Lexend Zetta', sans-serif;
+	background-color: rgb(248, 248, 248);
+}
+
+.container {
+	background-color: rgb(255, 255, 255);
+	/* box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.07); */
+	height: 370px;
+	width: 950px;
+	border-radius: 11px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	padding: 12px 20px;
+	display: flex;
+	border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.sequencer {
+	display: flex;
+	height: 270px;
+	width: 840px;
+	margin-top: 100px;
+}
+
+#p0 {
+	margin-top: 109px;
+	width: 160px;
+	padding-left: 2px;
+	padding-right: 26px;
+}
+
+.drum-name {
+	font-weight: bold;
+	font-size: 12px;
+	letter-spacing: -0.5px;
+	line-height: 58px;
+	padding: 0px 36px 0px 16px;
+	border-radius: 6px;
+	margin-bottom: 4px;
+	background-color: #fff;
+	color: rgba(0, 0, 0, 0.6);
+	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
+	border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+#controls {
+	position: absolute;
+	left: 20px;
+	right: 20px;
+	top: 0px;
+	height: 120px;
+}
+
+#controls-left-side {
+	float: left;
+	height: 100%;
+}
+
+#controls-right-side {
+	float: right;
+	height: 100%;
+}
+
+.sampler {
+	display: inline;
+	padding: 30px 48px;
+	border-radius: 6px;
+	line-height: 120px;
+	text-align: center;
+	background-color: #fff;
+	color: rgba(0, 0, 0, 0.6);
+	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
+	border: 1px solid rgba(0, 0, 0, 0.2);
+	position: relative;
+}
+
+.pressed {
+	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
+	top: 2px;
+	background-color: rgba(0, 0, 0, 0.1);
+}
+
+#bpm {
+	font-weight: bold;
+	color: rgba(0, 0, 0, 0.6);
+	line-height: 120px;
+	position: absolute;
+	top: 25px;
+	right: 200px;
+}
+
+#bpm-slider {
+	position: absolute;
+	top: 24px;
+	right: 150px;
+	width: 180px;
+}
+
+#bpm-slider:hover {
+	cursor: pointer;
+}
+
+#controls p {
+	display: inline;
+	font-size: 12px;
+	position: relative;
+	top: -1px;
+}
+
+#clear-track {
+	font-weight: bold;
+	color: rgba(0, 0, 0, 0.6);
+	padding: 16px 24px;
+	border-radius: 6px;
+	box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.05);
+	border: 1px solid rgba(0, 0, 0, 0.2);
+	margin-left: 36px;
+	margin-right: 2px;
+	position: relative;
+	-webkit-user-select: none;
+}
+
+#clear-track:hover {
+	cursor: pointer;
+	border: 1px solid rgba(0, 0, 0, 0.4);
+	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
+}
+
+#clear-track:active {
+	top: 0px;
+	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
+}
+
+.d1,
+.d2,
+.d3,
+.d4,
+.d5,
+.d6,
+.d7,
+.d8,
+.d9,
+.d10,
+.d11,
+.d12,
+.d13,
+.d14,
+.d15,
+.d16 {
+	background-color: rgba(0, 0, 0, 0);
+	height: 100%;
+	width: 50%;
+	margin: 5px 2px;
+	display: inline-block;
+}
+
+.sample {
+	background-color: rgba(0, 0, 0, 0.1);
+	margin: 4px 0px;
+	display: block;
+	height: 60px;
+	border-radius: 6px;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	box-sizing: border-box;
+}
+
+.sample:hover {
+	cursor: pointer;
+}
+
+.row-highlight {
+	background-color: rgba(28, 29, 28, 0.2);
+}
+
+.item-selected {
+	background-color: rgba(0, 0, 0, 0.8);
+}
+
+#d-split {
+	margin-right: 20px;
+}
+
+input[type=range] {
+	height: 50px;
+	-webkit-appearance: none;
+	margin: 10px 0;
+	width: 100%;
+}
+
+input[type=range]:focus {
+	outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+	width: 100%;
+	height: 10px;
+	cursor: pointer;
+	box-shadow: 0px 0px 0px #000000;
+	background: #EDEDED;
+	border-radius: 5px;
+	border: 1px solid #C2C2C2;
+}
+
+input[type=range]::-webkit-slider-thumb {
+	box-shadow: 0px 0px 0px #707070;
+	border: 1px solid #A3A3A3;
+	height: 42px;
+	width: 15px;
+	border-radius: 17px;
+	background: #FFFFFF;
+	cursor: pointer;
+	-webkit-appearance: none;
+	margin-top: -17px;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+	background: #EDEDED;
+}
+
+input[type=range]::-moz-range-track {
+	width: 100%;
+	height: 7px;
+	cursor: pointer;
+	background: #EDEDED;
+	border-radius: 50px;
+	border: 1px solid #C2C2C2;
+}
+
+input[type=range]::-moz-range-thumb {
+	border: 1px solid #A3A3A3;
+	height: 42px;
+	width: 13px;
+	border-radius: 17px;
+	background: #FFFFFF;
+	cursor: pointer;
+}
+
+input[type=range]::-ms-track {
+	width: 100%;
+	height: 10px;
+	cursor: pointer;
+	animate: 0.2s;
+	background: transparent;
+	border-color: transparent;
+	color: transparent;
+}
+
+input[type=range]::-ms-fill-lower {
+	background: #EDEDED;
+	border: 1px solid #C2C2C2;
+	border-radius: 10px;
+}
+
+input[type=range]::-ms-fill-upper {
+	background: #EDEDED;
+	border: 1px solid #C2C2C2;
+	border-radius: 10px;
+}
+
+input[type=range]::-ms-thumb {
+	margin-top: 1px;
+	border: 1px solid #A3A3A3;
+	height: 43px;
+	width: 15px;
+	border-radius: 50px;
+	background: #FFFFFF;
+	cursor: pointer;
+}
+
+input[type=range]:focus::-ms-fill-lower {
+	background: #EDEDED;
+}
+
+input[type=range]:focus::-ms-fill-upper {
+	background: #EDEDED;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* .parent, .parent2 {
+	margin-top: 10px;
+	display: flex;
+	flex-wrap: no-wrap;
+}
+
+.kick, .clap {
+	width: 50%;
+	height: 40px;
+	background-color: rgba(0, 0, 0, 0.1);
+	margin: 0px 2px;
+	line-height: 50px;
+	text-align: center;
+	font-weight: bold;
+	font-family: "Courier New";
+	font-size: 12px;
+	border-radius: 12px;
+	box-sizing: border-box;
+}
+
+.kick:hover, .clap:hover {
+	cursor: pointer;
+}
+
+.item-selected {
+	background-color: salmon;
+}
+
+.row {
+	background-color: rgba(0, 0, 0, 0.25);
+} */
\ No newline at end of file
diff --git a/dualitypure-css/README.markdown b/dualitypure-css/README.markdown
new file mode 100644
index 0000000..bc50085
--- /dev/null
+++ b/dualitypure-css/README.markdown
@@ -0,0 +1,5 @@
+# DUALITY - PURE CSS
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/MananTank/pen/zYvYrrd](https://codepen.io/MananTank/pen/zYvYrrd).
+
+
diff --git a/dualitypure-css/dist/index.html b/dualitypure-css/dist/index.html
new file mode 100644
index 0000000..0f13ce5
--- /dev/null
+++ b/dualitypure-css/dist/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - DUALITY - PURE CSS</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="c1">
+  <div class="c2"> 
+    <div class="c1"> 
+      <div class="c2">
+        <div class="c1">
+          <div class="c2"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/dualitypure-css/dist/style.css b/dualitypure-css/dist/style.css
new file mode 100644
index 0000000..22f1da9
--- /dev/null
+++ b/dualitypure-css/dist/style.css
@@ -0,0 +1,52 @@
+body,
+.c1,
+.c2 {
+  display: grid;
+  place-items: center;
+  background-color: #000;
+}
+body {
+  min-height: 100vh;
+  overflow: hidden;
+}
+.c1,
+.c2 {
+  min-width: 16vmin;
+  min-height: 16vmin;
+  border-radius: 50%;
+  padding: 6vmin;
+  background-size: 4vmin 4vmin;
+  background-position: calc(50% + 0vmin) calc(50% + 0vmin);
+}
+.c1 {
+  background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #fff), color-stop(0, transparent));
+  background-image: linear-gradient(to left, #fff 0 0.4vmin, transparent 0);
+  -webkit-animation: c1 0.3s infinite linear;
+          animation: c1 0.3s infinite linear;
+}
+.c2 {
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0, transparent));
+  background-image: linear-gradient(to top, #fff 0 0.4vmin, transparent 0);
+  -webkit-animation: c2 0.3s infinite linear;
+          animation: c2 0.3s infinite linear;
+}
+@-webkit-keyframes c1 {
+  to {
+    background-position: calc(50% + 4vmin) calc(50% + 0vmin);
+  }
+}
+@keyframes c1 {
+  to {
+    background-position: calc(50% + 4vmin) calc(50% + 0vmin);
+  }
+}
+@-webkit-keyframes c2 {
+  to {
+    background-position: calc(50% + 0vmin) calc(50% + 4vmin);
+  }
+}
+@keyframes c2 {
+  to {
+    background-position: calc(50% + 0vmin) calc(50% + 4vmin);
+  }
+}
\ No newline at end of file
diff --git a/dualitypure-css/license.txt b/dualitypure-css/license.txt
new file mode 100644
index 0000000..0ffaff4
--- /dev/null
+++ b/dualitypure-css/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Manan Tank ⚡ (https://codepen.io/MananTank/pen/zYvYrrd)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/dualitypure-css/src/index.pug b/dualitypure-css/src/index.pug
new file mode 100644
index 0000000..8385821
--- /dev/null
+++ b/dualitypure-css/src/index.pug
@@ -0,0 +1,6 @@
+.c1
+  .c2 
+    .c1 
+      .c2
+        .c1
+          .c2
\ No newline at end of file
diff --git a/dualitypure-css/src/style.styl b/dualitypure-css/src/style.styl
new file mode 100644
index 0000000..38e1ae0
--- /dev/null
+++ b/dualitypure-css/src/style.styl
@@ -0,0 +1,49 @@
+
+// configurable
+size        = 4vmin
+color       = white
+bg          = black
+lineWeight = size/10
+duration    = 0.3     // less is more speed
+
+
+line(direction)
+  linear-gradient(to direction, color 0 lineWeight, transparent 0)
+
+offset(x, y)
+  'calc(%s + %s)' % (50% size*x)     'calc(%s + %s)' % (50% size*y)
+  
+  
+body, .c1, .c2
+  display     grid
+  place-items center
+  background-color bg
+   
+body 
+  min-height  100vh
+  overflow    hidden
+  
+.c1, .c2
+  min-width           size*4
+  min-height          size*4
+  border-radius       50%
+  padding             size*1.5
+  background-size     size size
+  background-position offset(0,0)
+
+.c1
+  background-image    line(left)   
+  animation           c1 (duration)s infinite linear
+  
+.c2
+  background-image    line(top)   
+  animation           c2 (duration)s infinite linear
+  
+
+@keyframes c1
+  to
+    background-position offset(1, 0) 
+    
+@keyframes c2
+  to
+    background-position offset(0, 1) 
diff --git a/duo/README.markdown b/duo/README.markdown
new file mode 100644
index 0000000..ca8d3bf
--- /dev/null
+++ b/duo/README.markdown
@@ -0,0 +1,7 @@
+# duo
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ycw/pen/xxVPMwB](https://codepen.io/ycw/pen/xxVPMwB).
+
+photos by [ali abiyar](https://unsplash.com/photos/KtEv9rOCGX0) & [César Rincón](https://unsplash.com/photos/XHVpWcr5grQ)
+
+ref: https://ycwhk.blogspot.com/2020/09/threejs-lenticular.html
diff --git a/duo/dist/index.html b/duo/dist/index.html
new file mode 100644
index 0000000..627104d
--- /dev/null
+++ b/duo/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - duo</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<a href='//twitter.com/ycwhk' target='_blank'>duo</a>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script><script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/duo/dist/script.js b/duo/dist/script.js
new file mode 100644
index 0000000..b478df1
--- /dev/null
+++ b/duo/dist/script.js
@@ -0,0 +1,120 @@
+import * as $ from '//unpkg.com/three@0.120.0/build/three.module.js'
+import { OrbitControls } from '//unpkg.com/three@0.120.0/examples/jsm/controls/OrbitControls.js'
+
+// ----
+// Boot
+// ----
+
+const renderer = new $.WebGLRenderer({ alpha: true });
+const scene = new $.Scene();
+const camera = new $.PerspectiveCamera(75, 2, .1, 100);
+const controls = new OrbitControls(camera, renderer.domElement);
+window.addEventListener('resize', () => {
+    const { clientWidth, clientHeight } = renderer.domElement;
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(clientWidth, clientHeight, false);
+    camera.aspect = clientWidth / clientHeight;
+    camera.updateProjectionMatrix();
+});
+document.body.prepend(renderer.domElement);
+window.dispatchEvent(new Event('resize'));
+renderer.setAnimationLoop(t => {
+    renderer.render(scene, camera);
+    controls.update();
+});
+
+// ----
+// Main
+// ----
+
+const W = 10, H = 10, SW = W * 20, SH = H * 20;
+const IMG_URLS = [
+    "https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60",
+    "https://images.unsplash.com/flagged/photo-1575494539155-6af0f84aa076?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
+];
+
+camera.position.set(0, 0, 8);
+
+for (const { color, intensity, x, y, z } of [
+    { color: 'white', intensity: 1, x: -W, y: 0, z: 0 },
+    { color: 'white', intensity: 1, x: W, y: 0, z: 0 },
+]) {
+    const L = new $.SpotLight(color, intensity, W, Math.PI / 2, 0, 0);
+    L.position.set(x, y, z);
+    scene.add(L);
+}
+
+const vs = [];
+for (let i = 0, I = SH; i < I; ++i) {
+    vs[i] = [];
+    const nY = i / (I - 1);
+    for (let j = 0, J = SW; j < J; ++j) {
+        const nX = j / (J - 1);
+        vs[i][j] = {
+            uv: [nX, nY],
+            xyz: [(nX - 0.5) * W, (nY - 0.5) * H, (i + 1) % 2 * (j % 2) * 0.5 - 0.25]
+        };
+    }
+}
+
+//// Make Geometry - 2 Sets 
+
+const geoms = [];
+for (let k = 0; k <= 1; ++k) {
+    const geom = new $.BufferGeometry();
+    const N = ((SW - k) >> 1) * (SH - 1);
+    const pos = new Float32Array(N * 3 * 6); // six (x,y,z)
+    const uv = new Float32Array(N * 2 * 6); // six (u,v)
+    let n = 0;
+    for (let i = 0, I = SH - 1; i < I; ++i) {
+        for (let j = k, J = SW - 1; j < J; j += 2) {
+            let v = vs[i][j];
+            pos.set(v.xyz, n * 3);
+            uv.set(v.uv, n * 2);
+            ++n;
+            v = vs[i][j + 1];
+            pos.set(v.xyz, n * 3);
+            uv.set(v.uv, n * 2);
+            ++n;
+            v = vs[i + 1][j];
+            pos.set(v.xyz, n * 3);
+            uv.set(v.uv, n * 2);
+            ++n;
+            v = vs[i][j + 1];
+            pos.set(v.xyz, n * 3);
+            uv.set(v.uv, n * 2);
+            ++n;
+            v = vs[i + 1][j + 1];
+            pos.set(v.xyz, n * 3);
+            uv.set(v.uv, n * 2);
+            ++n;
+            v = vs[i + 1][j];
+            pos.set(v.xyz, n * 3);
+            uv.set(v.uv, n * 2);
+            ++n;
+        }
+    }
+    geom.setAttribute('position', new $.Float32BufferAttribute(pos, 3));
+    geom.setAttribute('uv', new $.Float32BufferAttribute(uv, 2));
+    geom.computeVertexNormals();
+    geoms.push(geom);
+}
+
+//// Make Meshes 
+
+const g = new $.Group();
+for (const [i, geom] of geoms.entries()) {
+    const map = new $.TextureLoader().load(IMG_URLS[i]);
+    const mat = new $.MeshLambertMaterial({ map, side: $.DoubleSide });
+    const mesh = new $.Mesh(geoms[i], mat);
+    g.add(mesh);
+}
+scene.add(g);
+
+//// Animate
+
+const k = Math.PI / 5;
+gsap.timeline({ defaults: { duration: .35 }, repeat: 1, yoyo: true })
+    .to(g.rotation, { x: -k/2, y: k })
+    .to(g.rotation, { x: -k/2, y: -k })
+    .to(g.rotation, { x: 0, y: 0 })
\ No newline at end of file
diff --git a/duo/dist/style.css b/duo/dist/style.css
new file mode 100644
index 0000000..c3f34f4
--- /dev/null
+++ b/duo/dist/style.css
@@ -0,0 +1,18 @@
+canvas {
+    width: 100%;
+    height: 100vh;
+    display: block;
+    cursor: -webkit-grab;
+    cursor: grab;
+}
+
+body {
+    height: 100vh;
+}
+
+a {
+    position: fixed;
+    top: 0;
+    left: 0 ;
+    padding: 5vmin;
+}
\ No newline at end of file
diff --git a/duo/license.txt b/duo/license.txt
new file mode 100644
index 0000000..fce1b71
--- /dev/null
+++ b/duo/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by ycw (https://codepen.io/ycw/pen/xxVPMwB)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/duo/src/index.html b/duo/src/index.html
new file mode 100644
index 0000000..8d9e136
--- /dev/null
+++ b/duo/src/index.html
@@ -0,0 +1 @@
+<a href='//twitter.com/ycwhk' target='_blank'>duo</a>
\ No newline at end of file
diff --git a/duo/src/script.js b/duo/src/script.js
new file mode 100644
index 0000000..b478df1
--- /dev/null
+++ b/duo/src/script.js
@@ -0,0 +1,120 @@
+import * as $ from '//unpkg.com/three@0.120.0/build/three.module.js'
+import { OrbitControls } from '//unpkg.com/three@0.120.0/examples/jsm/controls/OrbitControls.js'
+
+// ----
+// Boot
+// ----
+
+const renderer = new $.WebGLRenderer({ alpha: true });
+const scene = new $.Scene();
+const camera = new $.PerspectiveCamera(75, 2, .1, 100);
+const controls = new OrbitControls(camera, renderer.domElement);
+window.addEventListener('resize', () => {
+    const { clientWidth, clientHeight } = renderer.domElement;
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(clientWidth, clientHeight, false);
+    camera.aspect = clientWidth / clientHeight;
+    camera.updateProjectionMatrix();
+});
+document.body.prepend(renderer.domElement);
+window.dispatchEvent(new Event('resize'));
+renderer.setAnimationLoop(t => {
+    renderer.render(scene, camera);
+    controls.update();
+});
+
+// ----
+// Main
+// ----
+
+const W = 10, H = 10, SW = W * 20, SH = H * 20;
+const IMG_URLS = [
+    "https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60",
+    "https://images.unsplash.com/flagged/photo-1575494539155-6af0f84aa076?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
+];
+
+camera.position.set(0, 0, 8);
+
+for (const { color, intensity, x, y, z } of [
+    { color: 'white', intensity: 1, x: -W, y: 0, z: 0 },
+    { color: 'white', intensity: 1, x: W, y: 0, z: 0 },
+]) {
+    const L = new $.SpotLight(color, intensity, W, Math.PI / 2, 0, 0);
+    L.position.set(x, y, z);
+    scene.add(L);
+}
+
+const vs = [];
+for (let i = 0, I = SH; i < I; ++i) {
+    vs[i] = [];
+    const nY = i / (I - 1);
+    for (let j = 0, J = SW; j < J; ++j) {
+        const nX = j / (J - 1);
+        vs[i][j] = {
+            uv: [nX, nY],
+            xyz: [(nX - 0.5) * W, (nY - 0.5) * H, (i + 1) % 2 * (j % 2) * 0.5 - 0.25]
+        };
+    }
+}
+
+//// Make Geometry - 2 Sets 
+
+const geoms = [];
+for (let k = 0; k <= 1; ++k) {
+    const geom = new $.BufferGeometry();
+    const N = ((SW - k) >> 1) * (SH - 1);
+    const pos = new Float32Array(N * 3 * 6); // six (x,y,z)
+    const uv = new Float32Array(N * 2 * 6); // six (u,v)
+    let n = 0;
+    for (let i = 0, I = SH - 1; i < I; ++i) {
+        for (let j = k, J = SW - 1; j < J; j += 2) {
+            let v = vs[i][j];
+            pos.set(v.xyz, n * 3);
+            uv.set(v.uv, n * 2);
+            ++n;
+            v = vs[i][j + 1];
+            pos.set(v.xyz, n * 3);
+            uv.set(v.uv, n * 2);
+            ++n;
+            v = vs[i + 1][j];
+            pos.set(v.xyz, n * 3);
+            uv.set(v.uv, n * 2);
+            ++n;
+            v = vs[i][j + 1];
+            pos.set(v.xyz, n * 3);
+            uv.set(v.uv, n * 2);
+            ++n;
+            v = vs[i + 1][j + 1];
+            pos.set(v.xyz, n * 3);
+            uv.set(v.uv, n * 2);
+            ++n;
+            v = vs[i + 1][j];
+            pos.set(v.xyz, n * 3);
+            uv.set(v.uv, n * 2);
+            ++n;
+        }
+    }
+    geom.setAttribute('position', new $.Float32BufferAttribute(pos, 3));
+    geom.setAttribute('uv', new $.Float32BufferAttribute(uv, 2));
+    geom.computeVertexNormals();
+    geoms.push(geom);
+}
+
+//// Make Meshes 
+
+const g = new $.Group();
+for (const [i, geom] of geoms.entries()) {
+    const map = new $.TextureLoader().load(IMG_URLS[i]);
+    const mat = new $.MeshLambertMaterial({ map, side: $.DoubleSide });
+    const mesh = new $.Mesh(geoms[i], mat);
+    g.add(mesh);
+}
+scene.add(g);
+
+//// Animate
+
+const k = Math.PI / 5;
+gsap.timeline({ defaults: { duration: .35 }, repeat: 1, yoyo: true })
+    .to(g.rotation, { x: -k/2, y: k })
+    .to(g.rotation, { x: -k/2, y: -k })
+    .to(g.rotation, { x: 0, y: 0 })
\ No newline at end of file
diff --git a/duo/src/style.css b/duo/src/style.css
new file mode 100644
index 0000000..2da57bb
--- /dev/null
+++ b/duo/src/style.css
@@ -0,0 +1,18 @@
+canvas {
+    width: 100%;
+    height: 100vh;
+    display: block;
+    cursor: grab;
+}
+
+body {
+    height: 100vh;
+}
+
+a {
+    position: fixed;
+    top: 0;
+    left: 0 ;
+    padding: 5vmin;
+}
+
diff --git a/easings-are-rad/README.markdown b/easings-are-rad/README.markdown
new file mode 100644
index 0000000..1c57cc3
--- /dev/null
+++ b/easings-are-rad/README.markdown
@@ -0,0 +1,5 @@
+# Easings Are Rad
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/argyleink/pen/BajvPLz](https://codepen.io/argyleink/pen/BajvPLz).
+
+
diff --git a/easings-are-rad/dist/index.html b/easings-are-rad/dist/index.html
new file mode 100644
index 0000000..eb21a94
--- /dev/null
+++ b/easings-are-rad/dist/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Easings Are Rad</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel='stylesheet' href='https://gitcdn.xyz/repo/octoshrimpy/blokkfont/master/blokkfont.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>easings are rad</h1>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/easings-are-rad/dist/style.css b/easings-are-rad/dist/style.css
new file mode 100644
index 0000000..8ca617b
--- /dev/null
+++ b/easings-are-rad/dist/style.css
@@ -0,0 +1,54 @@
+:root {
+  --ease-in-quad:       cubic-bezier(.55, .085, .68, .53);
+  --ease-in-cubic:      cubic-bezier(.55, .055, .675, .19);
+  --ease-in-quart:      cubic-bezier(.895, .03, .685, .22);
+  --ease-in-quint:      cubic-bezier(.755, .05, .855, .06);
+  --ease-in-expo:       cubic-bezier(.95, .05, .795, .035);
+  --ease-in-circ:       cubic-bezier(.6, .04, .98, .335);
+  --ease-out-quad:      cubic-bezier(.25, .46, .45, .94);
+  --ease-out-cubic:     cubic-bezier(.215, .61, .355, 1);
+  --ease-out-quart:     cubic-bezier(.165, .84, .44, 1);
+  --ease-out-quint:     cubic-bezier(.23, 1, .32, 1);
+  --ease-out-expo:      cubic-bezier(.19, 1, .22, 1);
+  --ease-out-circ:      cubic-bezier(.075, .82, .165, 1);
+  --ease-in-out-quad:   cubic-bezier(.455, .03, .515, .955);
+  --ease-in-out-cubic:  cubic-bezier(.645, .045, .355, 1);
+  --ease-in-out-quart:  cubic-bezier(.77, 0, .175, 1);
+  --ease-in-out-quint:  cubic-bezier(.86, 0, .07, 1);
+  --ease-in-out-expo:   cubic-bezier(1, 0, 0, 1);
+  --ease-in-out-circ:   cubic-bezier(.785, .135, .15, .86);
+}
+
+h1 {
+  -webkit-animation: pulse 5s var(--ease-in-out-expo) infinite;
+          animation: pulse 5s var(--ease-in-out-expo) infinite
+}
+
+@-webkit-keyframes pulse {
+  50% {
+    -webkit-transform: scale(2);
+            transform: scale(2)
+  }
+}
+
+@keyframes pulse {
+  50% {
+    -webkit-transform: scale(2);
+            transform: scale(2)
+  }
+}
+
+html {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+body {
+  min-block-size: 100%;
+  min-inline-size: 100%;
+  box-sizing: border-box;
+  display: grid;
+  place-content: center;
+  font-family: system-ui;
+  color: deeppink;
+}
\ No newline at end of file
diff --git a/easings-are-rad/license.txt b/easings-are-rad/license.txt
new file mode 100644
index 0000000..a64ac2e
--- /dev/null
+++ b/easings-are-rad/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Adam Argyle (https://codepen.io/argyleink/pen/BajvPLz)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/easings-are-rad/src/index.html b/easings-are-rad/src/index.html
new file mode 100644
index 0000000..3bcf0d3
--- /dev/null
+++ b/easings-are-rad/src/index.html
@@ -0,0 +1 @@
+<h1>easings are rad</h1>
\ No newline at end of file
diff --git a/easings-are-rad/src/style.css b/easings-are-rad/src/style.css
new file mode 100644
index 0000000..db2b785
--- /dev/null
+++ b/easings-are-rad/src/style.css
@@ -0,0 +1,45 @@
+:root {
+  --ease-in-quad:       cubic-bezier(.55, .085, .68, .53);
+  --ease-in-cubic:      cubic-bezier(.55, .055, .675, .19);
+  --ease-in-quart:      cubic-bezier(.895, .03, .685, .22);
+  --ease-in-quint:      cubic-bezier(.755, .05, .855, .06);
+  --ease-in-expo:       cubic-bezier(.95, .05, .795, .035);
+  --ease-in-circ:       cubic-bezier(.6, .04, .98, .335);
+  --ease-out-quad:      cubic-bezier(.25, .46, .45, .94);
+  --ease-out-cubic:     cubic-bezier(.215, .61, .355, 1);
+  --ease-out-quart:     cubic-bezier(.165, .84, .44, 1);
+  --ease-out-quint:     cubic-bezier(.23, 1, .32, 1);
+  --ease-out-expo:      cubic-bezier(.19, 1, .22, 1);
+  --ease-out-circ:      cubic-bezier(.075, .82, .165, 1);
+  --ease-in-out-quad:   cubic-bezier(.455, .03, .515, .955);
+  --ease-in-out-cubic:  cubic-bezier(.645, .045, .355, 1);
+  --ease-in-out-quart:  cubic-bezier(.77, 0, .175, 1);
+  --ease-in-out-quint:  cubic-bezier(.86, 0, .07, 1);
+  --ease-in-out-expo:   cubic-bezier(1, 0, 0, 1);
+  --ease-in-out-circ:   cubic-bezier(.785, .135, .15, .86);
+}
+
+h1 {
+  animation: pulse 5s var(--ease-in-out-expo) infinite
+}
+
+@keyframes pulse {
+  50% {
+    transform: scale(2)
+  }
+}
+
+html {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+body {
+  min-block-size: 100%;
+  min-inline-size: 100%;
+  box-sizing: border-box;
+  display: grid;
+  place-content: center;
+  font-family: system-ui;
+  color: deeppink;
+}
\ No newline at end of file
diff --git a/editorial-design-to-css-grid-summary/README.markdown b/editorial-design-to-css-grid-summary/README.markdown
new file mode 100644
index 0000000..55419c7
--- /dev/null
+++ b/editorial-design-to-css-grid-summary/README.markdown
@@ -0,0 +1,6 @@
+# Editorial design to CSS Grid. Summary
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/ricardpriet/pen/mXPGeV](https://codepen.io/ricardpriet/pen/mXPGeV).
+
+ To illustrate (and celebrate) the approach between editorial design and web design, we have set out to design with CSS Grid some pages of number 3 of the 99U Quarterly Magazine, a very interesting publication for the creative community.
+
+Read the full article <a href="https://www.silocreativo.com/en/editorial-design-and-css-grid-inspiration-and-examples/">here</a>
\ No newline at end of file
diff --git a/editorial-design-to-css-grid-summary/dist/index.html b/editorial-design-to-css-grid-summary/dist/index.html
new file mode 100644
index 0000000..95b6519
--- /dev/null
+++ b/editorial-design-to-css-grid-summary/dist/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Editorial design to CSS Grid. Summary</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,700,700i|Barlow+Condensed:400,500,600,700'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="grid">
+    <header class="header">
+      <h1 class="title">Tip Sheet: <span>Beating Failure</span></h1>
+      <span class="author">silocreativo.com<span>
+    </header>
+    <span class="cat">99U Quarterly</span>
+    <p class="description">Editorial desing to CSS Grid. Read the full article about how it is made <a href="https://www.silocreativo.com/en/editorial-design-and-css-grid-inspiration-and-examples/">here</a></p>
+     <article class="hentry">
+       <span class="number">#01</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article>
+      <article class="hentry">
+       <span class="number">#02</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+      <article class="hentry">
+       <span class="number">#03</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+      <article class="hentry">
+       <span class="number">#04</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+      <article class="hentry">
+       <span class="number">#05</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+      <article class="hentry">
+       <span class="number">#06</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+      <article class="hentry">
+       <span class="number">#07</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+      <article class="hentry">
+       <span class="number">#08</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+    
+  </span>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/editorial-design-to-css-grid-summary/dist/style.css b/editorial-design-to-css-grid-summary/dist/style.css
new file mode 100644
index 0000000..6e5f5d9
--- /dev/null
+++ b/editorial-design-to-css-grid-summary/dist/style.css
@@ -0,0 +1,153 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'EB Garamond', serif;
+  color: #565052;
+}
+p {
+  margin-top: 0;
+}
+.container {
+  background-color: #fff;
+  display: grid;
+  grid-template: minmax(100vh, 1fr) / 1fr;
+}
+.grid {
+  background-color: #fff;
+  padding: 30px;
+  position: relative;
+  text-align: left;
+  display: grid;
+  grid-gap: 30px;
+  grid-template: repeat(3, 1fr) / repeat(6, 1fr);
+}
+.cat {
+  font-family: 'Barlow Condensed', sans-serif;
+  grid-area: 1 / 3 / 2 / 4;
+  justify-self: center;
+  text-transform: uppercase;
+  border: 2px solid #565052;
+  align-self: start;
+  padding: 10px 20px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0px;
+}
+.header {
+  grid-area: 1 / 1 / 2 / 3;
+  align-self: left;
+}
+.header .title {
+  color: #565052;
+  font-weight: 400;
+  font-size: 48px;
+  letter-spacing: 3px;
+  margin: 0;
+  position: relative;
+}
+.header .title span {
+  color: #00D0C0;
+  display: block;
+  font-style: italic;
+}
+.header .title:after {
+  content: "";
+  background-color: #00d0c0;
+  height: 1px;
+  width: 50px;
+  display: block;  
+  margin: 15px 0;
+}
+.header .author {
+  font-size: 18px;
+  font-style: italic;
+}
+.description {
+  grid-area: 2 / 1 / 3 / 4;
+  font-size: 24px;
+  font-style: italic;
+  text-decoration: underline;
+  color: #00D0C0;
+}
+.description a {
+  color: #00D0C0;
+}
+.hentry {
+  border-top: 1px solid #565052;
+  padding-top: 20px;
+}
+.hentry:nth-of-type(1) {
+  grid-area: 3 / 2 / 4 / 3;
+}
+.hentry:nth-of-type(2) {
+  grid-area: 3 / 3 / 4 / 4;
+}
+.hentry:nth-of-type(3) {
+  grid-area: 1 / 5 / 2 / 6;
+}
+.hentry:nth-of-type(4) {
+  grid-area: 1 / 6 / 2 / 7;
+}
+.hentry:nth-of-type(5) {
+  grid-area: 2 / 4 / 3 / 5;
+}
+.hentry:nth-of-type(6) {
+  grid-area: 2 / 5 / 3 / 6;
+}
+.hentry:nth-of-type(7) {
+  grid-area: 3 / 5 / 4 / 6;
+}
+.hentry:nth-of-type(8) {
+  grid-area: 3 / 6 / 4 / 7;
+}
+.hentry .entry-title {
+  text-transform: uppercase;
+  color: #00D0C0;
+  font-family: 'Barlow Condensed', sans-serif;
+  font-size: 30px;
+  font-weight: 500;
+  margin: 5px 0;
+}
+.hentry .entry-content {
+  line-height: 1.25;
+}
+@media (max-width: 1000px) {
+  .grid {
+    grid-gap: 20px;
+    grid-template: auto / repeat(4, 1fr);
+  }
+  .header {
+    grid-area: 1 / 1 / 2 / 4;
+  }
+  .cat {
+    grid-area: 1 / 4 / 2 / 5;
+    justify-self: end;
+    align-self: start;
+  }
+  .description {
+    grid-area: 2 / 1 / 3 / 5;
+  }
+  .hentry:nth-of-type(odd) {
+    grid-area: auto / 1 / auto / 3;
+  }
+  .hentry:nth-of-type(even) {
+    grid-area: auto / 3 / auto / 5;
+  }
+}
+@media (max-width: 450px) {
+  .header {
+    grid-area: 2 / 1 / 3 / 5;
+  }
+  .cat {
+    grid-area: 1 / 1 / 2 / 5;
+    justify-self: start;
+    align-self: start;
+  }
+  .description {
+    grid-area: 3 / 1 / 4 / 5;
+  }
+  .hentry:nth-of-type(odd),
+  .hentry:nth-of-type(even) {
+    grid-area: auto / 1 / auto / 5;
+  }
+}
\ No newline at end of file
diff --git a/editorial-design-to-css-grid-summary/license.txt b/editorial-design-to-css-grid-summary/license.txt
new file mode 100644
index 0000000..f9c8b42
--- /dev/null
+++ b/editorial-design-to-css-grid-summary/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Ricardo Prieto (https://codepen.io/ricardpriet/pen/mXPGeV)
+
+
+Fork of an original work by Ricardo Prieto (https://codepen.io/ricardpriet/pen/zRqzzW)
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/editorial-design-to-css-grid-summary/src/index.html b/editorial-design-to-css-grid-summary/src/index.html
new file mode 100644
index 0000000..b6829ec
--- /dev/null
+++ b/editorial-design-to-css-grid-summary/src/index.html
@@ -0,0 +1,52 @@
+<div class="container">
+  <div class="grid">
+    <header class="header">
+      <h1 class="title">Tip Sheet: <span>Beating Failure</span></h1>
+      <span class="author">silocreativo.com<span>
+    </header>
+    <span class="cat">99U Quarterly</span>
+    <p class="description">Editorial desing to CSS Grid. Read the full article about how it is made <a href="https://www.silocreativo.com/en/editorial-design-and-css-grid-inspiration-and-examples/">here</a></p>
+     <article class="hentry">
+       <span class="number">#01</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article>
+      <article class="hentry">
+       <span class="number">#02</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+      <article class="hentry">
+       <span class="number">#03</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+      <article class="hentry">
+       <span class="number">#04</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+      <article class="hentry">
+       <span class="number">#05</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+      <article class="hentry">
+       <span class="number">#06</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+      <article class="hentry">
+       <span class="number">#07</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+      <article class="hentry">
+       <span class="number">#08</span>
+       <h2 class="entry-title">No one cares (and that's good)</h2>
+       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
+      </article> 
+    
+  </span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/editorial-design-to-css-grid-summary/src/style.css b/editorial-design-to-css-grid-summary/src/style.css
new file mode 100644
index 0000000..6e5f5d9
--- /dev/null
+++ b/editorial-design-to-css-grid-summary/src/style.css
@@ -0,0 +1,153 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'EB Garamond', serif;
+  color: #565052;
+}
+p {
+  margin-top: 0;
+}
+.container {
+  background-color: #fff;
+  display: grid;
+  grid-template: minmax(100vh, 1fr) / 1fr;
+}
+.grid {
+  background-color: #fff;
+  padding: 30px;
+  position: relative;
+  text-align: left;
+  display: grid;
+  grid-gap: 30px;
+  grid-template: repeat(3, 1fr) / repeat(6, 1fr);
+}
+.cat {
+  font-family: 'Barlow Condensed', sans-serif;
+  grid-area: 1 / 3 / 2 / 4;
+  justify-self: center;
+  text-transform: uppercase;
+  border: 2px solid #565052;
+  align-self: start;
+  padding: 10px 20px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0px;
+}
+.header {
+  grid-area: 1 / 1 / 2 / 3;
+  align-self: left;
+}
+.header .title {
+  color: #565052;
+  font-weight: 400;
+  font-size: 48px;
+  letter-spacing: 3px;
+  margin: 0;
+  position: relative;
+}
+.header .title span {
+  color: #00D0C0;
+  display: block;
+  font-style: italic;
+}
+.header .title:after {
+  content: "";
+  background-color: #00d0c0;
+  height: 1px;
+  width: 50px;
+  display: block;  
+  margin: 15px 0;
+}
+.header .author {
+  font-size: 18px;
+  font-style: italic;
+}
+.description {
+  grid-area: 2 / 1 / 3 / 4;
+  font-size: 24px;
+  font-style: italic;
+  text-decoration: underline;
+  color: #00D0C0;
+}
+.description a {
+  color: #00D0C0;
+}
+.hentry {
+  border-top: 1px solid #565052;
+  padding-top: 20px;
+}
+.hentry:nth-of-type(1) {
+  grid-area: 3 / 2 / 4 / 3;
+}
+.hentry:nth-of-type(2) {
+  grid-area: 3 / 3 / 4 / 4;
+}
+.hentry:nth-of-type(3) {
+  grid-area: 1 / 5 / 2 / 6;
+}
+.hentry:nth-of-type(4) {
+  grid-area: 1 / 6 / 2 / 7;
+}
+.hentry:nth-of-type(5) {
+  grid-area: 2 / 4 / 3 / 5;
+}
+.hentry:nth-of-type(6) {
+  grid-area: 2 / 5 / 3 / 6;
+}
+.hentry:nth-of-type(7) {
+  grid-area: 3 / 5 / 4 / 6;
+}
+.hentry:nth-of-type(8) {
+  grid-area: 3 / 6 / 4 / 7;
+}
+.hentry .entry-title {
+  text-transform: uppercase;
+  color: #00D0C0;
+  font-family: 'Barlow Condensed', sans-serif;
+  font-size: 30px;
+  font-weight: 500;
+  margin: 5px 0;
+}
+.hentry .entry-content {
+  line-height: 1.25;
+}
+@media (max-width: 1000px) {
+  .grid {
+    grid-gap: 20px;
+    grid-template: auto / repeat(4, 1fr);
+  }
+  .header {
+    grid-area: 1 / 1 / 2 / 4;
+  }
+  .cat {
+    grid-area: 1 / 4 / 2 / 5;
+    justify-self: end;
+    align-self: start;
+  }
+  .description {
+    grid-area: 2 / 1 / 3 / 5;
+  }
+  .hentry:nth-of-type(odd) {
+    grid-area: auto / 1 / auto / 3;
+  }
+  .hentry:nth-of-type(even) {
+    grid-area: auto / 3 / auto / 5;
+  }
+}
+@media (max-width: 450px) {
+  .header {
+    grid-area: 2 / 1 / 3 / 5;
+  }
+  .cat {
+    grid-area: 1 / 1 / 2 / 5;
+    justify-self: start;
+    align-self: start;
+  }
+  .description {
+    grid-area: 3 / 1 / 4 / 5;
+  }
+  .hentry:nth-of-type(odd),
+  .hentry:nth-of-type(even) {
+    grid-area: auto / 1 / auto / 5;
+  }
+}
\ No newline at end of file
diff --git a/elk/README.markdown b/elk/README.markdown
new file mode 100644
index 0000000..d596781
--- /dev/null
+++ b/elk/README.markdown
@@ -0,0 +1,4 @@
+# Elk
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/hankuro/pen/jxzmPW](https://codepen.io/hankuro/pen/jxzmPW).
+
+ 
\ No newline at end of file
diff --git a/elk/dist/index.html b/elk/dist/index.html
new file mode 100644
index 0000000..cde66ae
--- /dev/null
+++ b/elk/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Elk</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canvas"></canvas>
+<!-- partial -->
+  <script src='https://hankuro.sakura.ne.jp/build/d3.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/elk/dist/script.js b/elk/dist/script.js
new file mode 100644
index 0000000..ff509b2
--- /dev/null
+++ b/elk/dist/script.js
@@ -0,0 +1,62 @@
+	var canvas = document.getElementById("canvas");
+	var width = canvas.width = 450;
+	var height = canvas.height = 450;
+	var ctx = canvas.getContext("2d");
+	var current = 0;
+	var dataNum;
+	var json;
+	var ScrrenPoint;
+	var angle = 0;
+
+	d3.json("https://hankuro.sakura.ne.jp/json/animal/elk.json", function(error, root) {
+		dataNum = root.length;
+		json = root;
+		ScrrenPoint = new vertex();
+		var perv = 0 , m = 0;
+		d3.timer(function(elapsed){
+			m += (elapsed - perv);
+			perv = elapsed;
+			if(m < 30) return;
+			m = 0;
+			current = current + 1 != json.morphTargets.length ?  current : 0;
+			ctx.setTransform(1,0,0,1,0,0);
+		 	ctx.translate(width/2,height/2+50);
+		 	ctx.clearRect(-width/2,-height/2-50,width,height);
+		 	ctx.scale(1.5,-1.5);
+			ctx.fillStyle = "rgba(255,255,255,0.8)";
+			var vecs = json.morphTargets[current].vertices;
+			var sin = Math.sin(angle);
+			var cos = Math.cos(angle);
+			for(var i=0;i<vecs.length;i+=3){
+				var p = [vecs[i+0],vecs[i+1],vecs[i+2]];
+				var po = [0,0,0];
+				po[0] = cos * p[0]  - sin * p[2] ;
+				po[1] = p[1] - 30;
+				po[2] =  cos * p[2]  + sin * p[0];
+				ScrrenPoint.setVertex(po);
+				var s = ScrrenPoint.getScrrenPoint();
+				ctx.fillRect(s.x,s.y,1.5,1.5);
+			}
+			current++;
+			angle += 0.01;
+		});
+	})
+
+	function vertex(){
+		this.x = 0;
+	    this.y = 0;
+	    this.z = 0;
+	    this.fl = 1000;
+	}
+	vertex.prototype.setVertex = function(p){
+		this.x = p[0];
+	    this.y = p[1];
+	    this.z = p[2];
+	}
+	vertex.prototype.getScrrenPoint = function(){
+		var scale_z = this.fl + this.z;
+	    var scale = this.fl / scale_z;
+	    var x = this.x * scale;
+	    var y = this.y * scale;
+	    return {x:x , y:y , scale:scale};
+	}
\ No newline at end of file
diff --git a/elk/dist/style.css b/elk/dist/style.css
new file mode 100644
index 0000000..6c04c2f
--- /dev/null
+++ b/elk/dist/style.css
@@ -0,0 +1 @@
+canvas {position: absolute; top:20px; left:50%; width: 450px; height: 450px; margin-left: -225px; background-color: #222222;}
\ No newline at end of file
diff --git a/elk/license.txt b/elk/license.txt
new file mode 100644
index 0000000..cf4a409
--- /dev/null
+++ b/elk/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by hankuro (https://codepen.io/hankuro/pen/jxzmPW)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/elk/src/index.html b/elk/src/index.html
new file mode 100644
index 0000000..30325df
--- /dev/null
+++ b/elk/src/index.html
@@ -0,0 +1 @@
+<canvas id="canvas"></canvas>
\ No newline at end of file
diff --git a/elk/src/script.js b/elk/src/script.js
new file mode 100644
index 0000000..ff509b2
--- /dev/null
+++ b/elk/src/script.js
@@ -0,0 +1,62 @@
+	var canvas = document.getElementById("canvas");
+	var width = canvas.width = 450;
+	var height = canvas.height = 450;
+	var ctx = canvas.getContext("2d");
+	var current = 0;
+	var dataNum;
+	var json;
+	var ScrrenPoint;
+	var angle = 0;
+
+	d3.json("https://hankuro.sakura.ne.jp/json/animal/elk.json", function(error, root) {
+		dataNum = root.length;
+		json = root;
+		ScrrenPoint = new vertex();
+		var perv = 0 , m = 0;
+		d3.timer(function(elapsed){
+			m += (elapsed - perv);
+			perv = elapsed;
+			if(m < 30) return;
+			m = 0;
+			current = current + 1 != json.morphTargets.length ?  current : 0;
+			ctx.setTransform(1,0,0,1,0,0);
+		 	ctx.translate(width/2,height/2+50);
+		 	ctx.clearRect(-width/2,-height/2-50,width,height);
+		 	ctx.scale(1.5,-1.5);
+			ctx.fillStyle = "rgba(255,255,255,0.8)";
+			var vecs = json.morphTargets[current].vertices;
+			var sin = Math.sin(angle);
+			var cos = Math.cos(angle);
+			for(var i=0;i<vecs.length;i+=3){
+				var p = [vecs[i+0],vecs[i+1],vecs[i+2]];
+				var po = [0,0,0];
+				po[0] = cos * p[0]  - sin * p[2] ;
+				po[1] = p[1] - 30;
+				po[2] =  cos * p[2]  + sin * p[0];
+				ScrrenPoint.setVertex(po);
+				var s = ScrrenPoint.getScrrenPoint();
+				ctx.fillRect(s.x,s.y,1.5,1.5);
+			}
+			current++;
+			angle += 0.01;
+		});
+	})
+
+	function vertex(){
+		this.x = 0;
+	    this.y = 0;
+	    this.z = 0;
+	    this.fl = 1000;
+	}
+	vertex.prototype.setVertex = function(p){
+		this.x = p[0];
+	    this.y = p[1];
+	    this.z = p[2];
+	}
+	vertex.prototype.getScrrenPoint = function(){
+		var scale_z = this.fl + this.z;
+	    var scale = this.fl / scale_z;
+	    var x = this.x * scale;
+	    var y = this.y * scale;
+	    return {x:x , y:y , scale:scale};
+	}
\ No newline at end of file
diff --git a/elk/src/style.css b/elk/src/style.css
new file mode 100644
index 0000000..6c04c2f
--- /dev/null
+++ b/elk/src/style.css
@@ -0,0 +1 @@
+canvas {position: absolute; top:20px; left:50%; width: 450px; height: 450px; margin-left: -225px; background-color: #222222;}
\ No newline at end of file
diff --git a/emoji_cover/README.markdown b/emoji_cover/README.markdown
new file mode 100644
index 0000000..31d2293
--- /dev/null
+++ b/emoji_cover/README.markdown
@@ -0,0 +1,5 @@
+# emoji_cover
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Adir-SL/pen/qBPvgBG](https://codepen.io/Adir-SL/pen/qBPvgBG).
+
+
diff --git a/emoji_cover/dist/index.html b/emoji_cover/dist/index.html
new file mode 100644
index 0000000..c5a4251
--- /dev/null
+++ b/emoji_cover/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - emoji_cover</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="flexDiv">
+  <input type="color" id="bgColor" value="#86F1F8" oninput="setup();" />
+  <input type="text" maxlength="3" id="emojiText" value="😁" oninput="setup();" />
+  <input type="text" maxlength="3" id="emojiTwo" value="😁" oninput="setup();" />
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/emoji_cover/dist/script.js b/emoji_cover/dist/script.js
new file mode 100644
index 0000000..5e8ae31
--- /dev/null
+++ b/emoji_cover/dist/script.js
@@ -0,0 +1,26 @@
+function setup() {
+  canvasX = 600;
+  canvasY = 400;
+  countX = -2;
+  countY = 1;
+  createCanvas(canvasX, canvasY);
+  background(document.getElementById("bgColor").value);
+}
+
+function draw() {
+  textSize(50);
+  textAlign(TOP, CENTER);
+  text(document.getElementById("emojiText").value, countX * 30, countY * 40);
+  text(
+    document.getElementById("emojiTwo").value,
+    countX * 30 + 60,
+    countY * 40 + 60
+  );
+
+  if (countX > 21) {
+    countY += 3;
+    countX = -2;
+  } else {
+    countX += 4;
+  }
+}
\ No newline at end of file
diff --git a/emoji_cover/dist/style.css b/emoji_cover/dist/style.css
new file mode 100644
index 0000000..0483e6b
--- /dev/null
+++ b/emoji_cover/dist/style.css
@@ -0,0 +1,28 @@
+body {
+  background: #ccc;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+}
+canvas {
+  margin-top: 10px;
+  border: 1px solid black;
+}
+.flexDiv {
+  display: flex;
+  width: 604px;
+  gap: 10px;
+}
+.flexDiv input {
+  font-size: 2em;
+  width: 150px;
+  flex-grow: 1;
+}
+.flexDiv input[type="color"] {
+  height: 1.5em;
+  min-width: 1.5em;
+  max-width: 1.5em;
+}
\ No newline at end of file
diff --git a/emoji_cover/license.txt b/emoji_cover/license.txt
new file mode 100644
index 0000000..2b2a7ce
--- /dev/null
+++ b/emoji_cover/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Adir (https://codepen.io/Adir-SL/pen/qBPvgBG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/emoji_cover/src/index.html b/emoji_cover/src/index.html
new file mode 100644
index 0000000..a2ae61d
--- /dev/null
+++ b/emoji_cover/src/index.html
@@ -0,0 +1,5 @@
+<div class="flexDiv">
+  <input type="color" id="bgColor" value="#86F1F8" oninput="setup();" />
+  <input type="text" maxlength="3" id="emojiText" value="😁" oninput="setup();" />
+  <input type="text" maxlength="3" id="emojiTwo" value="😁" oninput="setup();" />
+</div>
\ No newline at end of file
diff --git a/emoji_cover/src/script.js b/emoji_cover/src/script.js
new file mode 100644
index 0000000..26cd9c9
--- /dev/null
+++ b/emoji_cover/src/script.js
@@ -0,0 +1,26 @@
+function setup() {
+  canvasX = 600;
+  canvasY = 400;
+  countX = -2;
+  countY = 1;
+  createCanvas(canvasX, canvasY);
+  background(document.getElementById("bgColor").value);
+}
+
+function draw() {
+  textSize(50);
+  textAlign(TOP, CENTER);
+  text(document.getElementById("emojiText").value, countX * 30, countY * 40);
+  text(
+    document.getElementById("emojiTwo").value,
+    countX * 30 + 60,
+    countY * 40 + 60
+  );
+
+  if (countX > 21) {
+    countY += 3;
+    countX = -2;
+  } else {
+    countX += 4;
+  }
+}
diff --git a/emoji_cover/src/style.css b/emoji_cover/src/style.css
new file mode 100644
index 0000000..6c80216
--- /dev/null
+++ b/emoji_cover/src/style.css
@@ -0,0 +1,28 @@
+body {
+  background: #ccc;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+}
+canvas {
+  margin-top: 10px;
+  border: 1px solid black;
+}
+.flexDiv {
+  display: flex;
+  width: 604px;
+  gap: 10px;
+}
+.flexDiv input {
+  font-size: 2em;
+  width: 150px;
+  flex-grow: 1;
+}
+.flexDiv input[type="color"] {
+  height: 1.5em;
+  min-width: 1.5em;
+  max-width: 1.5em;
+}
diff --git a/emojis-as-mask-images/README.markdown b/emojis-as-mask-images/README.markdown
new file mode 100644
index 0000000..c315143
--- /dev/null
+++ b/emojis-as-mask-images/README.markdown
@@ -0,0 +1,5 @@
+# Emojis as mask images
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/yuanchuan/pen/vYNQVvj](https://codepen.io/yuanchuan/pen/vYNQVvj).
+
+
diff --git a/emojis-as-mask-images/dist/index.html b/emojis-as-mask-images/dist/index.html
new file mode 100644
index 0000000..575487c
--- /dev/null
+++ b/emojis-as-mask-images/dist/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Emojis as mask images</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<ul>
+  <li>
+    <css-doodle click-to-update>
+      :doodle {
+        @grid: 5x1 / 100%;
+        mask-image: @svg(
+          <svg viewBox="0 0 10 10">
+            <text font-size="9" x=".5" y="8.5">🦋</text>
+          </svg>
+        );
+      }
+      @place-cell: center;
+      @size: 100%;
+      @random {
+        filter: drop-shadow(0 0 2px #fff); 
+      }
+      background: @m500(
+        radial-gradient(
+          @p(#481380, #7f78d2, #efb1ff, #ffe2ff) 50%,
+          transparent 0
+        )
+        @r(100%) @r(100%) / @r(5px) @lr
+        no-repeat
+      );
+    </css-doodle> 
+  </li> 
+
+  <li>
+    <css-doodle click-to-update>
+      :doodle {
+        @grid: 50x1 / 100%;
+        mask-image: @svg(
+          <svg viewBox="0 0 10 10">
+            <text font-size="9" x=".5" y="8.5">❤️</text>
+          </svg>
+        );
+      }
+      @place-cell: @r(100%) @r(100%);
+      :after {
+        content: '❤️';
+        font-size: @r(18px);
+        color: transparent;
+        text-shadow: @m10(
+          @r(±50px) @r(±50px) 0 @p(#5fdde5, #f4ea8e, #f37121, #d92027)
+        );
+      }
+    </css-doodle> 
+  </li> 
+
+  <li>
+    <css-doodle>
+      :doodle {
+        @grid: 32 / 100%;
+        mask-image: @svg(
+          <svg viewBox="0 0 10 10">
+            <text font-size="9" x=".5" y="8.5">⛱</text>
+          </svg>
+        );
+      }
+      border-radius: 50%;
+      background: @p(#fff, #ffd31d, #ff427f, transparent);
+      --t: scale(@r(.1, .4)) scaleY(4);
+      transform: @var(--t);
+      @keyframes f {
+        from { transform: var(--t) translateY(-400%); }
+        to { transform: var(--t) translateY(400%); }
+      } 
+      @random(.2) {
+        animation: f @r(3s, 8s) linear infinite;
+        animation-delay: -@r(10s); 
+      }
+    </css-doodle>
+  </li>
+</ul>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.8.5/css-doodle.min.js'></script>
+</body>
+</html>
diff --git a/emojis-as-mask-images/dist/style.css b/emojis-as-mask-images/dist/style.css
new file mode 100644
index 0000000..ad871bf
--- /dev/null
+++ b/emojis-as-mask-images/dist/style.css
@@ -0,0 +1,32 @@
+html, body { 
+  height: 100%; 
+  margin: 0; 
+  background: #000; 
+  display: grid; 
+  place-items: center;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: -webkit-box;
+  display: flex;
+  --s: 30vw;
+}
+
+li {
+  background: #110d15;
+  width: var(--s); height: var(--s);
+  max-height: 400px; max-width: 400px; 
+  margin: .5vmin;
+}
+
+@media screen and (max-width: 400px) {
+  ul {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+            flex-direction: column;
+    --s: 30vh;
+  }
+}
\ No newline at end of file
diff --git a/emojis-as-mask-images/license.txt b/emojis-as-mask-images/license.txt
new file mode 100644
index 0000000..342b7dc
--- /dev/null
+++ b/emojis-as-mask-images/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by yuanchuan (https://codepen.io/yuanchuan/pen/vYNQVvj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/emojis-as-mask-images/src/index.html b/emojis-as-mask-images/src/index.html
new file mode 100644
index 0000000..b623090
--- /dev/null
+++ b/emojis-as-mask-images/src/index.html
@@ -0,0 +1,74 @@
+<ul>
+  <li>
+    <css-doodle click-to-update>
+      :doodle {
+        @grid: 5x1 / 100%;
+        mask-image: @svg(
+          <svg viewBox="0 0 10 10">
+            <text font-size="9" x=".5" y="8.5">🦋</text>
+          </svg>
+        );
+      }
+      @place-cell: center;
+      @size: 100%;
+      @random {
+        filter: drop-shadow(0 0 2px #fff); 
+      }
+      background: @m500(
+        radial-gradient(
+          @p(#481380, #7f78d2, #efb1ff, #ffe2ff) 50%,
+          transparent 0
+        )
+        @r(100%) @r(100%) / @r(5px) @lr
+        no-repeat
+      );
+    </css-doodle> 
+  </li> 
+
+  <li>
+    <css-doodle click-to-update>
+      :doodle {
+        @grid: 50x1 / 100%;
+        mask-image: @svg(
+          <svg viewBox="0 0 10 10">
+            <text font-size="9" x=".5" y="8.5">❤️</text>
+          </svg>
+        );
+      }
+      @place-cell: @r(100%) @r(100%);
+      :after {
+        content: '❤️';
+        font-size: @r(18px);
+        color: transparent;
+        text-shadow: @m10(
+          @r(±50px) @r(±50px) 0 @p(#5fdde5, #f4ea8e, #f37121, #d92027)
+        );
+      }
+    </css-doodle> 
+  </li> 
+
+  <li>
+    <css-doodle>
+      :doodle {
+        @grid: 32 / 100%;
+        mask-image: @svg(
+          <svg viewBox="0 0 10 10">
+            <text font-size="9" x=".5" y="8.5">⛱</text>
+          </svg>
+        );
+      }
+      border-radius: 50%;
+      background: @p(#fff, #ffd31d, #ff427f, transparent);
+      --t: scale(@r(.1, .4)) scaleY(4);
+      transform: @var(--t);
+      @keyframes f {
+        from { transform: var(--t) translateY(-400%); }
+        to { transform: var(--t) translateY(400%); }
+      } 
+      @random(.2) {
+        animation: f @r(3s, 8s) linear infinite;
+        animation-delay: -@r(10s); 
+      }
+    </css-doodle>
+  </li>
+</ul>
diff --git a/emojis-as-mask-images/src/style.css b/emojis-as-mask-images/src/style.css
new file mode 100644
index 0000000..afd1dd7
--- /dev/null
+++ b/emojis-as-mask-images/src/style.css
@@ -0,0 +1,29 @@
+html, body { 
+  height: 100%; 
+  margin: 0; 
+  background: #000; 
+  display: grid; 
+  place-items: center;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  --s: 30vw;
+}
+
+li {
+  background: #110d15;
+  width: var(--s); height: var(--s);
+  max-height: 400px; max-width: 400px; 
+  margin: .5vmin;
+}
+
+@media screen and (max-width: 400px) {
+  ul {
+    flex-direction: column;
+    --s: 30vh;
+  }
+}
\ No newline at end of file
diff --git a/euclidean-algorithm-visualizer/README.markdown b/euclidean-algorithm-visualizer/README.markdown
new file mode 100644
index 0000000..7bc4dba
--- /dev/null
+++ b/euclidean-algorithm-visualizer/README.markdown
@@ -0,0 +1,5 @@
+# Euclidean Algorithm Visualizer
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ky0ju/pen/MWaPbeY](https://codepen.io/ky0ju/pen/MWaPbeY).
+
+
diff --git a/euclidean-algorithm-visualizer/dist/index.html b/euclidean-algorithm-visualizer/dist/index.html
new file mode 100644
index 0000000..90d316d
--- /dev/null
+++ b/euclidean-algorithm-visualizer/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Euclidean Algorithm Visualizer</title>
+  
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script> 
+    <script src="https://unpkg.com/p5.createloop@0.1.3/dist/p5.createloop.js"></script>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/euclidean-algorithm-visualizer/dist/script.js b/euclidean-algorithm-visualizer/dist/script.js
new file mode 100644
index 0000000..410d885
--- /dev/null
+++ b/euclidean-algorithm-visualizer/dist/script.js
@@ -0,0 +1,102 @@
+let numMax = 50;
+let margin = 5;
+let G;
+
+function setup() {
+
+  createCanvas(800, 800);
+  imageMode(CENTER);
+
+  G = createGraphics(width * 0.8, height * 0.8);
+}
+
+function draw(){
+  background(255);
+
+  let numA = int(map(mouseX, 0, width, 2, numMax));
+  let numB = int(map(mouseY, 0, height, 2, numMax));
+
+  let ratio = numB / numA;
+
+  textAlign(LEFT);
+  showText(100, 60, 40,  "numA = " + numA, 0, this);
+  showText(100, 100, 40, "numB = " + numB, 0, this);
+  showText(400, 60, 40,  "ratio = " + nfc(ratio, 2), 0, this);
+
+  Euclidean(ratio, G);
+
+  image(G, width / 2, height / 2 + height / 20);
+}
+
+function Euclidean(ratio, g) {
+
+  let xPos = 0;
+  let yPos = 0;
+  let count = 0;
+  let size = g.width;
+
+  g.rectMode(CENTER);
+  g.noStroke();
+  g.clear();
+
+  while (size > 0.1) {
+    count++;
+
+    //カウントが奇数だった場合、x軸方向に次の四角形を描く
+    if (count % 2 == 1) {
+      let xSize = size * ratio;
+      let ySize = size;
+      while (xPos + xSize < g.width + 0.1) {
+        g.push();
+        g.translate(xPos + xSize / 2, yPos + ySize / 2);
+        g.fill(100);
+        g.textAlign(CENTER, CENTER);
+        myRect(0, 0, xSize - margin, ySize - margin, g);
+        showText(0, 0, min(xSize, ySize) / 2, count, 255, g);
+        g.pop();
+
+        //座標更新（X軸方向に描いた四角形の横の大きさ分だけ＋）
+        xPos += xSize;
+      }
+      //描いた四角形の大きさ分だけ次に描く四角形の大きさを小さくする
+      size = g.width - xPos;
+
+      //カウントが偶数だった場合、y軸方向に次の四角形を描く
+    } else {
+      let xSize = size;
+      let ySize = size / ratio;
+
+      while (yPos + ySize < g.width + 0.1) {
+        g.push();
+        g.translate(xPos + xSize / 2, yPos + ySize / 2);
+        g.fill(0);
+        g.textAlign(CENTER, CENTER);
+        myRect(0, 0, xSize - margin, ySize - margin, g);
+        showText(0, 0, min(xSize, ySize) / 2, count, 255, g);
+        g.pop();
+
+        //座標更新（Y軸方向に描いた四角形の縦の大きさ分だけ＋）
+        yPos += ySize;
+      }
+      //描いた四角形の大きさ分だけ次に描く四角形の大きさを小さくする
+      size = g.width - yPos;
+    }
+  }
+}
+
+function showText(cx, cy, size, value, col, g){
+  g.push();
+  g.translate(cx, cy);
+  g.fill(col);
+  g.textSize(size);
+  g.text(value, 0, 0);
+  g.pop();
+}
+
+function myRect(cx, cy, sx, sy, g) {
+  g.push();
+  g.translate(cx, cy);
+  g.noStroke();
+  g.rect(0, 0, sx, sy);
+  g.pop();
+}
\ No newline at end of file
diff --git a/euclidean-algorithm-visualizer/license.txt b/euclidean-algorithm-visualizer/license.txt
new file mode 100644
index 0000000..f52756b
--- /dev/null
+++ b/euclidean-algorithm-visualizer/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by ky0ju (https://codepen.io/ky0ju/pen/MWaPbeY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/euclidean-algorithm-visualizer/src/index.html b/euclidean-algorithm-visualizer/src/index.html
new file mode 100644
index 0000000..a05032f
--- /dev/null
+++ b/euclidean-algorithm-visualizer/src/index.html
@@ -0,0 +1,2 @@
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script> 
+    <script src="https://unpkg.com/p5.createloop@0.1.3/dist/p5.createloop.js"></script> 
\ No newline at end of file
diff --git a/euclidean-algorithm-visualizer/src/script.js b/euclidean-algorithm-visualizer/src/script.js
new file mode 100644
index 0000000..6726ef1
--- /dev/null
+++ b/euclidean-algorithm-visualizer/src/script.js
@@ -0,0 +1,103 @@
+
+let numMax = 50;
+let margin = 5;
+let G;
+
+function setup() {
+
+  createCanvas(800, 800);
+  imageMode(CENTER);
+
+  G = createGraphics(width * 0.8, height * 0.8);
+}
+
+function draw(){
+  background(255);
+
+  let numA = int(map(mouseX, 0, width, 2, numMax));
+  let numB = int(map(mouseY, 0, height, 2, numMax));
+
+  let ratio = numB / numA;
+
+  textAlign(LEFT);
+  showText(100, 60, 40,  "numA = " + numA, 0, this);
+  showText(100, 100, 40, "numB = " + numB, 0, this);
+  showText(400, 60, 40,  "ratio = " + nfc(ratio, 2), 0, this);
+
+  Euclidean(ratio, G);
+
+  image(G, width / 2, height / 2 + height / 20);
+}
+
+function Euclidean(ratio, g) {
+
+  let xPos = 0;
+  let yPos = 0;
+  let count = 0;
+  let size = g.width;
+
+  g.rectMode(CENTER);
+  g.noStroke();
+  g.clear();
+
+  while (size > 0.1) {
+    count++;
+
+    //カウントが奇数だった場合、x軸方向に次の四角形を描く
+    if (count % 2 == 1) {
+      let xSize = size * ratio;
+      let ySize = size;
+      while (xPos + xSize < g.width + 0.1) {
+        g.push();
+        g.translate(xPos + xSize / 2, yPos + ySize / 2);
+        g.fill(100);
+        g.textAlign(CENTER, CENTER);
+        myRect(0, 0, xSize - margin, ySize - margin, g);
+        showText(0, 0, min(xSize, ySize) / 2, count, 255, g);
+        g.pop();
+
+        //座標更新（X軸方向に描いた四角形の横の大きさ分だけ＋）
+        xPos += xSize;
+      }
+      //描いた四角形の大きさ分だけ次に描く四角形の大きさを小さくする
+      size = g.width - xPos;
+
+      //カウントが偶数だった場合、y軸方向に次の四角形を描く
+    } else {
+      let xSize = size;
+      let ySize = size / ratio;
+
+      while (yPos + ySize < g.width + 0.1) {
+        g.push();
+        g.translate(xPos + xSize / 2, yPos + ySize / 2);
+        g.fill(0);
+        g.textAlign(CENTER, CENTER);
+        myRect(0, 0, xSize - margin, ySize - margin, g);
+        showText(0, 0, min(xSize, ySize) / 2, count, 255, g);
+        g.pop();
+
+        //座標更新（Y軸方向に描いた四角形の縦の大きさ分だけ＋）
+        yPos += ySize;
+      }
+      //描いた四角形の大きさ分だけ次に描く四角形の大きさを小さくする
+      size = g.width - yPos;
+    }
+  }
+}
+
+function showText(cx, cy, size, value, col, g){
+  g.push();
+  g.translate(cx, cy);
+  g.fill(col);
+  g.textSize(size);
+  g.text(value, 0, 0);
+  g.pop();
+}
+
+function myRect(cx, cy, sx, sy, g) {
+  g.push();
+  g.translate(cx, cy);
+  g.noStroke();
+  g.rect(0, 0, sx, sy);
+  g.pop();
+}
\ No newline at end of file
diff --git a/expanding-flex-cards-2019/README.markdown b/expanding-flex-cards-2019/README.markdown
new file mode 100644
index 0000000..98ba742
--- /dev/null
+++ b/expanding-flex-cards-2019/README.markdown
@@ -0,0 +1,4 @@
+# Expanding flex cards
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/z-/pen/OBPJKK](https://codepen.io/z-/pen/OBPJKK).
+
+ ![](https://i.imgur.com/W6mroTN.gif)
\ No newline at end of file
diff --git a/expanding-flex-cards-2019/dist/a8e37caf2a04602ea5815e5ac.css b/expanding-flex-cards-2019/dist/a8e37caf2a04602ea5815e5ac.css
new file mode 100644
index 0000000..ac8c687
--- /dev/null
+++ b/expanding-flex-cards-2019/dist/a8e37caf2a04602ea5815e5ac.css
@@ -0,0 +1,243 @@
+@import url(https://pro.fontawesome.com/releases/v5.11.2/css/all.css);
+:root {
+	//--user-button-main: #EC87C0;
+	//--user-button-background: #FFFFFF;
+	--user-button-circle: rgba(0,0,0,0.025);
+	--user-button-cardborder: rgba(255,255,255,0.25);
+	--user-button-text:#323133;
+	--user-button-shadow:rgba(0,0,0,0.1);
+}
+
+@mixin dark {
+   &.dark {
+      @content;
+   }
+   @media (prefers-color-scheme: dark) {
+      &:not(.light) {
+         @content;
+      }
+   }
+}
+body {
+	#user-button {
+		//position: fixed;
+		z-index:1000;
+		bottom:1rem !important;
+		right:1rem !important;
+		color:var(--user-button-text);
+		transition:1s 0s ease-out;
+		animation:slide 3s ease-out forwards;
+		//display:block !important;
+		@keyframes slide {
+			0%, 50% {
+				opacity:0;
+				display:block !important;
+			}
+			100% {
+				opacity:1;
+				display:block !important;
+			}
+		}
+		.u-card {
+			//background:var(--user-button-background, #FFFFFF);
+			border-radius:100%;
+			box-shadow:0 0 1rem -.25rem var(--user-button-shadow), inset 0 0 1rem -.75rem var(--user-button-shadow);
+		}
+		.u-main {
+			//position: relative;
+			//z-index:1000;
+			//display:grid;
+			//place-items:center;
+			//width:4rem;
+			//height:4rem;
+			cursor: pointer;
+         --user-button-background:var(--user-button-main, #EC87C0);
+			img {
+				//height:50%;
+				//width:50%;
+				height:100%;
+				width:100%;
+			}
+			iframe {
+				position: absolute;
+				top:0;
+				left:0;
+				width:4rem;
+				height:4rem;
+				opacity:1;
+				transition:0s 4s;
+			}
+		}
+		.u-icons {
+         position:relative;
+			z-index:950;
+			//position: absolute;
+			//top:50%;
+			//left:50%;
+			transform:translate(-50%, -50%);
+			//width:0%;
+			//height:0%;
+			background:var(--user-button-circle);
+			box-shadow:0 0 0 0.125rem var(--user-button-cardborder);
+			border-radius:100%;
+			transition:.25s;
+			opacity:1 !important;
+         backdrop-filter: blur(10px);
+         /*&:before {
+            z-index:-1;
+            position:absolute;
+            top:0; right:0; bottom:0; left:0;
+            content:'';
+            
+            backdrop-filter: blur(10px);
+         }*/
+			a {
+				color:inherit;
+				display:grid;
+				place-items:center;
+				width:30px;
+				height:30px;
+				text-decoration:none;
+				div {
+					padding:.5rem;
+					//box-shadow: 0 0 0 0rem transparent;
+					//box-shadow:0 0 .5rem -.25rem var(--user-button-shadow);
+					transition:0s;
+				}
+            &[href="https://twitter.com/Osorpenke"] {
+               position:relative;
+               &:before {
+                  content:'Middle Click';
+                  position:absolute;
+                  top:-1.5rem;
+                  left:50%;
+                  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                  white-space:pre;
+                  transform:translateX(-50%);
+                  opacity:0;
+                  pointer-events:none;
+                  transition:.25s ease-in;
+                  background:#fffc;
+                  padding:.25rem .5rem;
+                  border-radius:.25rem;
+               }
+               &.show {
+                  &:before {
+                     opacity:1;
+                     transition:.25s ease-out;
+                  }
+               }
+               div {
+					   color:#1da1f2;
+               }
+				}
+				&[href="https://codepen.io/z-"] div {
+					background:black;
+					color:white;
+					//--user-button-cardborder:var(--user-button-text);
+				}
+				&:hover {
+					//box-shadow: 0 0 0rem 0.125rem var(--user-button-cardborder);
+				}
+				&.u-random {
+					div {
+                  position:relative;
+                  top:-1px;
+						animation:diespin 2s linear infinite;
+						@keyframes diespin {
+							0% {
+								transform:rotate(0deg);
+							}
+							100% {
+								transform:rotate(360deg);
+							}
+						}
+					}
+					&:not(:hover) div {
+						animation-play-state:paused;
+					}
+				}
+			}
+			>* {
+				position: absolute;
+				width:30px;
+				height:30px;
+				
+				background:var(--singlecolour);
+				border-radius:100%;
+				
+				cursor: pointer;
+				
+				transform:translate(-50%,-50%);
+				transition:.25s -.05s;
+				&:before {
+					position: absolute;
+					top:50%;
+					left:50%;
+					transform:translate(-50%,-50%);
+				}
+				&:hover, &:focus-within {
+					background:var(--hcolour);
+				}
+				&:first-child:nth-last-child(1),
+				&:first-child:nth-last-child(1) ~ * { //If there are 3 children
+					&:nth-child(1) {
+						left:25%;
+						top:25%;
+					}
+				}
+				&:first-child:nth-last-child(2),
+				&:first-child:nth-last-child(2) ~ * { //If there are 4 children
+					&:nth-child(1) {
+						left:37.5%;
+						top:18.75%;
+					}
+					&:nth-child(2) {
+						left:18.75%;
+						top:37.5%;
+					}
+				}
+				&:first-child:nth-last-child(3),
+				&:first-child:nth-last-child(3) ~ * { //If there are 3 children
+					&:nth-child(1) {
+						left:50%;
+						top:15.625%;
+					}
+					&:nth-child(2) {
+						left:25%;
+						top:25%;
+					}
+					&:nth-child(3) {
+						left:15.625%;
+						top:50%;
+					}
+				}
+				&:first-child:nth-last-child(4),
+				&:first-child:nth-last-child(4) ~ * { //If there are 4 children
+					&:nth-child(1) {
+						left:62.5%;
+						top:18.75%;
+					}
+					&:nth-child(2) {
+						left:37.5%;
+						top:18.75%;
+					}
+					&:nth-child(3) {
+						left:18.75%;
+						top:37.5%;
+					}
+					&:nth-child(4) {
+						left:18.75%;
+						top:62.5%;
+					}
+				}
+			}
+		}
+		&:hover, &:focus-within {
+			.u-icons {
+				width:300% !important;
+				height:300% !important;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/expanding-flex-cards-2019/dist/a8e37caf2a04602ea5815e5ac.js b/expanding-flex-cards-2019/dist/a8e37caf2a04602ea5815e5ac.js
new file mode 100644
index 0000000..15caa2f
--- /dev/null
+++ b/expanding-flex-cards-2019/dist/a8e37caf2a04602ea5815e5ac.js
@@ -0,0 +1,7 @@
+if(window.location.href.indexOf("fullcpgrid") == -1) {
+   document.body.innerHTML += '<iframe src="https://codepen.io/z-/posts/popular/" frameborder="0" width="72" height="20" style="position:absolute; top:9px; right:8px; z-index:1000;"></iframe>';
+   /*document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458.css">'
+   document.body.innerHTML += '<iframe src="https://codepen.io/z-/" frameborder="0" width="72" height="20" style="position:absolute; top:9px; right:8px"></iframe>';*/
+}
+
+//fullcpgrid/a8e37caf2a04602ea5815e5acedab458
\ No newline at end of file
diff --git a/expanding-flex-cards-2019/dist/index.html b/expanding-flex-cards-2019/dist/index.html
new file mode 100644
index 0000000..c15f109
--- /dev/null
+++ b/expanding-flex-cards-2019/dist/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Expanding flex cards</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css'>
+<link rel='stylesheet' href='https://static.fontawesome.com/css/fontawesome-app.css'>
+<link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.2.0/css/all.css'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="options">
+   <div class="option active" style="--optionBackground:url(https://66.media.tumblr.com/6fb397d822f4f9f4596dff2085b18f2e/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-walking"></i>
+         </div>
+         <div class="info">
+            <div class="main">Blonkisoaz</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-snowflake"></i>
+         </div>
+         <div class="info">
+            <div class="main">Oretemauw</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5af3f8303456e376ceda1517553ba786/tumblr_o4986gakjh1qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-tree"></i>
+         </div>
+         <div class="info">
+            <div class="main">Iteresuselle</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-tint"></i>
+         </div>
+         <div class="info">
+            <div class="main">Idiefe</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-sun"></i>
+         </div>
+         <div class="info">
+            <div class="main">Inatethi</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+</div>
+
+<a href="http://victorofvalencia-blog.tumblr.com" target="_blank" class="credit">Photos from Victor of Valencia on tumblr</a>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
+<script src='js/a8e37caf2a04602ea5815e5ac.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/expanding-flex-cards-2019/dist/script.js b/expanding-flex-cards-2019/dist/script.js
new file mode 100644
index 0000000..9fabb21
--- /dev/null
+++ b/expanding-flex-cards-2019/dist/script.js
@@ -0,0 +1,4 @@
+$(".option").click(function(){
+   $(".option").removeClass("active");
+   $(this).addClass("active");
+});
\ No newline at end of file
diff --git a/expanding-flex-cards-2019/dist/style.css b/expanding-flex-cards-2019/dist/style.css
new file mode 100644
index 0000000..4d341f3
--- /dev/null
+++ b/expanding-flex-cards-2019/dist/style.css
@@ -0,0 +1,171 @@
+body {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  height: 100vh;
+  font-family: 'Roboto', sans-serif;
+}
+body .credit {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  color: #000;
+}
+body .options {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  overflow: hidden;
+  min-width: 600px;
+  max-width: 900px;
+  width: calc(100% - 100px);
+  height: 400px;
+}
+@media screen and (max-width: 718px) {
+  body .options {
+    min-width: 520px;
+  }
+  body .options .option:nth-child(5) {
+    display: none;
+  }
+}
+@media screen and (max-width: 638px) {
+  body .options {
+    min-width: 440px;
+  }
+  body .options .option:nth-child(4) {
+    display: none;
+  }
+}
+@media screen and (max-width: 558px) {
+  body .options {
+    min-width: 360px;
+  }
+  body .options .option:nth-child(3) {
+    display: none;
+  }
+}
+@media screen and (max-width: 478px) {
+  body .options {
+    min-width: 280px;
+  }
+  body .options .option:nth-child(2) {
+    display: none;
+  }
+}
+body .options .option {
+  position: relative;
+  overflow: hidden;
+  min-width: 60px;
+  margin: 10px;
+  background: var(--optionBackground, var(--defaultBackground, #E6E9ED));
+  background-size: auto 120%;
+  background-position: center;
+  cursor: pointer;
+  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+}
+body .options .option:nth-child(1) {
+  --defaultBackground:#ED5565;
+}
+body .options .option:nth-child(2) {
+  --defaultBackground:#FC6E51;
+}
+body .options .option:nth-child(3) {
+  --defaultBackground:#FFCE54;
+}
+body .options .option:nth-child(4) {
+  --defaultBackground:#2ECC71;
+}
+body .options .option:nth-child(5) {
+  --defaultBackground:#5D9CEC;
+}
+body .options .option:nth-child(6) {
+  --defaultBackground:#AC92EC;
+}
+body .options .option.active {
+  flex-grow: 10000;
+  -webkit-transform: scale(1);
+          transform: scale(1);
+  max-width: 600px;
+  margin: 0px;
+  border-radius: 40px;
+  background-size: auto 100%;
+  /*&:active {
+     transform:scale(0.9);
+  }*/
+}
+body .options .option.active .shadow {
+  box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
+}
+body .options .option.active .label {
+  bottom: 20px;
+  left: 20px;
+}
+body .options .option.active .label .info > div {
+  left: 0px;
+  opacity: 1;
+}
+body .options .option:not(.active) {
+  flex-grow: 1;
+  border-radius: 30px;
+}
+body .options .option:not(.active) .shadow {
+  bottom: -40px;
+  box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
+}
+body .options .option:not(.active) .label {
+  bottom: 10px;
+  left: 10px;
+}
+body .options .option:not(.active) .label .info > div {
+  left: 20px;
+  opacity: 0;
+}
+body .options .option .shadow {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  height: 120px;
+  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+}
+body .options .option .label {
+  display: flex;
+  position: absolute;
+  right: 0px;
+  height: 40px;
+  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+}
+body .options .option .label .icon {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  min-width: 40px;
+  max-width: 40px;
+  height: 40px;
+  border-radius: 100%;
+  background-color: white;
+  color: var(--defaultBackground);
+}
+body .options .option .label .info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 10px;
+  color: white;
+  white-space: pre;
+}
+body .options .option .label .info > div {
+  position: relative;
+  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
+}
+body .options .option .label .info .main {
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+body .options .option .label .info .sub {
+  transition-delay: .1s;
+}
diff --git a/expanding-flex-cards-2019/license.txt b/expanding-flex-cards-2019/license.txt
new file mode 100644
index 0000000..741eb1d
--- /dev/null
+++ b/expanding-flex-cards-2019/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Zed Dash (https://codepen.io/z-/pen/OBPJKK)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/expanding-flex-cards-2019/src/a8e37caf2a04602ea5815e5ac.css b/expanding-flex-cards-2019/src/a8e37caf2a04602ea5815e5ac.css
new file mode 100644
index 0000000..ac8c687
--- /dev/null
+++ b/expanding-flex-cards-2019/src/a8e37caf2a04602ea5815e5ac.css
@@ -0,0 +1,243 @@
+@import url(https://pro.fontawesome.com/releases/v5.11.2/css/all.css);
+:root {
+	//--user-button-main: #EC87C0;
+	//--user-button-background: #FFFFFF;
+	--user-button-circle: rgba(0,0,0,0.025);
+	--user-button-cardborder: rgba(255,255,255,0.25);
+	--user-button-text:#323133;
+	--user-button-shadow:rgba(0,0,0,0.1);
+}
+
+@mixin dark {
+   &.dark {
+      @content;
+   }
+   @media (prefers-color-scheme: dark) {
+      &:not(.light) {
+         @content;
+      }
+   }
+}
+body {
+	#user-button {
+		//position: fixed;
+		z-index:1000;
+		bottom:1rem !important;
+		right:1rem !important;
+		color:var(--user-button-text);
+		transition:1s 0s ease-out;
+		animation:slide 3s ease-out forwards;
+		//display:block !important;
+		@keyframes slide {
+			0%, 50% {
+				opacity:0;
+				display:block !important;
+			}
+			100% {
+				opacity:1;
+				display:block !important;
+			}
+		}
+		.u-card {
+			//background:var(--user-button-background, #FFFFFF);
+			border-radius:100%;
+			box-shadow:0 0 1rem -.25rem var(--user-button-shadow), inset 0 0 1rem -.75rem var(--user-button-shadow);
+		}
+		.u-main {
+			//position: relative;
+			//z-index:1000;
+			//display:grid;
+			//place-items:center;
+			//width:4rem;
+			//height:4rem;
+			cursor: pointer;
+         --user-button-background:var(--user-button-main, #EC87C0);
+			img {
+				//height:50%;
+				//width:50%;
+				height:100%;
+				width:100%;
+			}
+			iframe {
+				position: absolute;
+				top:0;
+				left:0;
+				width:4rem;
+				height:4rem;
+				opacity:1;
+				transition:0s 4s;
+			}
+		}
+		.u-icons {
+         position:relative;
+			z-index:950;
+			//position: absolute;
+			//top:50%;
+			//left:50%;
+			transform:translate(-50%, -50%);
+			//width:0%;
+			//height:0%;
+			background:var(--user-button-circle);
+			box-shadow:0 0 0 0.125rem var(--user-button-cardborder);
+			border-radius:100%;
+			transition:.25s;
+			opacity:1 !important;
+         backdrop-filter: blur(10px);
+         /*&:before {
+            z-index:-1;
+            position:absolute;
+            top:0; right:0; bottom:0; left:0;
+            content:'';
+            
+            backdrop-filter: blur(10px);
+         }*/
+			a {
+				color:inherit;
+				display:grid;
+				place-items:center;
+				width:30px;
+				height:30px;
+				text-decoration:none;
+				div {
+					padding:.5rem;
+					//box-shadow: 0 0 0 0rem transparent;
+					//box-shadow:0 0 .5rem -.25rem var(--user-button-shadow);
+					transition:0s;
+				}
+            &[href="https://twitter.com/Osorpenke"] {
+               position:relative;
+               &:before {
+                  content:'Middle Click';
+                  position:absolute;
+                  top:-1.5rem;
+                  left:50%;
+                  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                  white-space:pre;
+                  transform:translateX(-50%);
+                  opacity:0;
+                  pointer-events:none;
+                  transition:.25s ease-in;
+                  background:#fffc;
+                  padding:.25rem .5rem;
+                  border-radius:.25rem;
+               }
+               &.show {
+                  &:before {
+                     opacity:1;
+                     transition:.25s ease-out;
+                  }
+               }
+               div {
+					   color:#1da1f2;
+               }
+				}
+				&[href="https://codepen.io/z-"] div {
+					background:black;
+					color:white;
+					//--user-button-cardborder:var(--user-button-text);
+				}
+				&:hover {
+					//box-shadow: 0 0 0rem 0.125rem var(--user-button-cardborder);
+				}
+				&.u-random {
+					div {
+                  position:relative;
+                  top:-1px;
+						animation:diespin 2s linear infinite;
+						@keyframes diespin {
+							0% {
+								transform:rotate(0deg);
+							}
+							100% {
+								transform:rotate(360deg);
+							}
+						}
+					}
+					&:not(:hover) div {
+						animation-play-state:paused;
+					}
+				}
+			}
+			>* {
+				position: absolute;
+				width:30px;
+				height:30px;
+				
+				background:var(--singlecolour);
+				border-radius:100%;
+				
+				cursor: pointer;
+				
+				transform:translate(-50%,-50%);
+				transition:.25s -.05s;
+				&:before {
+					position: absolute;
+					top:50%;
+					left:50%;
+					transform:translate(-50%,-50%);
+				}
+				&:hover, &:focus-within {
+					background:var(--hcolour);
+				}
+				&:first-child:nth-last-child(1),
+				&:first-child:nth-last-child(1) ~ * { //If there are 3 children
+					&:nth-child(1) {
+						left:25%;
+						top:25%;
+					}
+				}
+				&:first-child:nth-last-child(2),
+				&:first-child:nth-last-child(2) ~ * { //If there are 4 children
+					&:nth-child(1) {
+						left:37.5%;
+						top:18.75%;
+					}
+					&:nth-child(2) {
+						left:18.75%;
+						top:37.5%;
+					}
+				}
+				&:first-child:nth-last-child(3),
+				&:first-child:nth-last-child(3) ~ * { //If there are 3 children
+					&:nth-child(1) {
+						left:50%;
+						top:15.625%;
+					}
+					&:nth-child(2) {
+						left:25%;
+						top:25%;
+					}
+					&:nth-child(3) {
+						left:15.625%;
+						top:50%;
+					}
+				}
+				&:first-child:nth-last-child(4),
+				&:first-child:nth-last-child(4) ~ * { //If there are 4 children
+					&:nth-child(1) {
+						left:62.5%;
+						top:18.75%;
+					}
+					&:nth-child(2) {
+						left:37.5%;
+						top:18.75%;
+					}
+					&:nth-child(3) {
+						left:18.75%;
+						top:37.5%;
+					}
+					&:nth-child(4) {
+						left:18.75%;
+						top:62.5%;
+					}
+				}
+			}
+		}
+		&:hover, &:focus-within {
+			.u-icons {
+				width:300% !important;
+				height:300% !important;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/expanding-flex-cards-2019/src/a8e37caf2a04602ea5815e5ac.js b/expanding-flex-cards-2019/src/a8e37caf2a04602ea5815e5ac.js
new file mode 100644
index 0000000..15caa2f
--- /dev/null
+++ b/expanding-flex-cards-2019/src/a8e37caf2a04602ea5815e5ac.js
@@ -0,0 +1,7 @@
+if(window.location.href.indexOf("fullcpgrid") == -1) {
+   document.body.innerHTML += '<iframe src="https://codepen.io/z-/posts/popular/" frameborder="0" width="72" height="20" style="position:absolute; top:9px; right:8px; z-index:1000;"></iframe>';
+   /*document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458.css">'
+   document.body.innerHTML += '<iframe src="https://codepen.io/z-/" frameborder="0" width="72" height="20" style="position:absolute; top:9px; right:8px"></iframe>';*/
+}
+
+//fullcpgrid/a8e37caf2a04602ea5815e5acedab458
\ No newline at end of file
diff --git a/expanding-flex-cards-2019/src/index.html b/expanding-flex-cards-2019/src/index.html
new file mode 100644
index 0000000..01fc788
--- /dev/null
+++ b/expanding-flex-cards-2019/src/index.html
@@ -0,0 +1,64 @@
+<div class="options">
+   <div class="option active" style="--optionBackground:url(https://66.media.tumblr.com/6fb397d822f4f9f4596dff2085b18f2e/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-walking"></i>
+         </div>
+         <div class="info">
+            <div class="main">Blonkisoaz</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-snowflake"></i>
+         </div>
+         <div class="info">
+            <div class="main">Oretemauw</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5af3f8303456e376ceda1517553ba786/tumblr_o4986gakjh1qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-tree"></i>
+         </div>
+         <div class="info">
+            <div class="main">Iteresuselle</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-tint"></i>
+         </div>
+         <div class="info">
+            <div class="main">Idiefe</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-sun"></i>
+         </div>
+         <div class="info">
+            <div class="main">Inatethi</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+</div>
+
+<a href="http://victorofvalencia-blog.tumblr.com" target="_blank" class="credit">Photos from Victor of Valencia on tumblr</a>
\ No newline at end of file
diff --git a/expanding-flex-cards-2019/src/script.js b/expanding-flex-cards-2019/src/script.js
new file mode 100644
index 0000000..9fabb21
--- /dev/null
+++ b/expanding-flex-cards-2019/src/script.js
@@ -0,0 +1,4 @@
+$(".option").click(function(){
+   $(".option").removeClass("active");
+   $(this).addClass("active");
+});
\ No newline at end of file
diff --git a/expanding-flex-cards-2019/src/style.scss b/expanding-flex-cards-2019/src/style.scss
new file mode 100644
index 0000000..591475f
--- /dev/null
+++ b/expanding-flex-cards-2019/src/style.scss
@@ -0,0 +1,160 @@
+$optionDefaultColours: #ED5565,#FC6E51,#FFCE54,#2ECC71,#5D9CEC,#AC92EC;
+
+body {
+   display:flex;
+   flex-direction:row;
+   justify-content:center;
+   align-items:center;
+   overflow:hidden;
+   
+   height:100vh;
+   
+   font-family: 'Roboto', sans-serif;
+   .credit {
+      position: absolute;
+      bottom:20px;
+      left:20px;
+      
+      color:#000;
+   }
+   .options {
+      display:flex;
+      flex-direction:row;
+      align-items:stretch;
+      overflow:hidden;
+
+      min-width:600px;
+      max-width:900px;
+      width:calc(100% - 100px);
+      
+      height:400px;
+      
+      @for $i from 1 through 4 {
+         @media screen and (max-width:798px - $i*80) {
+            min-width:600px - $i*80;
+            .option:nth-child(#{6-$i}) {
+               display:none;
+            }
+         }
+      }
+      
+      .option {
+         position: relative;
+         overflow:hidden;
+
+         min-width:60px;
+         margin:10px;
+         //border:0px solid --defaultColor;
+
+         background:var(--optionBackground, var(--defaultBackground, #E6E9ED));
+         background-size:auto 120%;
+         background-position:center;
+
+         cursor: pointer;
+
+         transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+
+         @for $i from 1 through length($optionDefaultColours) {
+            &:nth-child(#{$i}) {
+               --defaultBackground:#{nth($optionDefaultColours, $i)};
+            }
+         }
+         &.active {
+            flex-grow:10000;
+            transform:scale(1);
+            
+            max-width:600px;
+            margin:0px;
+            border-radius:40px;
+            
+            background-size:auto 100%;
+            .shadow {
+               box-shadow:inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
+            }
+            .label {
+               bottom:20px;
+               left:20px;
+               .info >div {
+                  left:0px;
+                  opacity:1;
+               }
+            }
+            /*&:active {
+               transform:scale(0.9);
+            }*/
+         }
+         &:not(.active) {
+            flex-grow:1;
+            
+            border-radius:30px;
+            .shadow {
+               bottom:-40px;
+               box-shadow:inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
+            }
+            .label {
+               bottom:10px;
+               left:10px;
+               .info >div {
+                  left:20px;
+                  opacity:0;
+               }
+            }
+         }
+         .shadow {
+            position: absolute;
+            bottom:0px;
+            left:0px;
+            right:0px;
+            
+            height:120px;
+            
+            transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+         }
+         .label {
+            display:flex;
+            position: absolute;
+            right:0px;
+
+            height:40px;
+            transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+            .icon {
+               display:flex;
+               flex-direction:row;
+               justify-content:center;
+               align-items:center;
+               
+               min-width:40px;
+               max-width:40px;
+               height:40px;
+               border-radius:100%;
+
+               background-color:white;
+               color:var(--defaultBackground);
+            }
+            .info {
+               display:flex;
+               flex-direction:column;
+               justify-content:center;
+               
+               margin-left:10px;
+               
+               color:white;
+               
+               white-space: pre;
+               >div {
+                  position: relative;
+                  
+                  transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity .5s ease-out;
+               }
+               .main {
+                  font-weight:bold;
+                  font-size:1.2rem;
+               }
+               .sub {
+                  transition-delay:.1s;
+               }
+            }
+         }
+      }
+   }
+}
\ No newline at end of file
diff --git a/expanding-flex-cards-2021/README.markdown b/expanding-flex-cards-2021/README.markdown
new file mode 100644
index 0000000..a55995b
--- /dev/null
+++ b/expanding-flex-cards-2021/README.markdown
@@ -0,0 +1,7 @@
+# Expanding flex cards
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/z-/pen/OBPJKK](https://codepen.io/z-/pen/OBPJKK).
+
+![](https://i.imgur.com/W6mroTN.gif)
+
+Edit 9th October 2021: Added theme switcher
diff --git a/expanding-flex-cards-2021/dist/a8e37caf2a04602ea5815e5ac.css b/expanding-flex-cards-2021/dist/a8e37caf2a04602ea5815e5ac.css
new file mode 100644
index 0000000..ac8c687
--- /dev/null
+++ b/expanding-flex-cards-2021/dist/a8e37caf2a04602ea5815e5ac.css
@@ -0,0 +1,243 @@
+@import url(https://pro.fontawesome.com/releases/v5.11.2/css/all.css);
+:root {
+	//--user-button-main: #EC87C0;
+	//--user-button-background: #FFFFFF;
+	--user-button-circle: rgba(0,0,0,0.025);
+	--user-button-cardborder: rgba(255,255,255,0.25);
+	--user-button-text:#323133;
+	--user-button-shadow:rgba(0,0,0,0.1);
+}
+
+@mixin dark {
+   &.dark {
+      @content;
+   }
+   @media (prefers-color-scheme: dark) {
+      &:not(.light) {
+         @content;
+      }
+   }
+}
+body {
+	#user-button {
+		//position: fixed;
+		z-index:1000;
+		bottom:1rem !important;
+		right:1rem !important;
+		color:var(--user-button-text);
+		transition:1s 0s ease-out;
+		animation:slide 3s ease-out forwards;
+		//display:block !important;
+		@keyframes slide {
+			0%, 50% {
+				opacity:0;
+				display:block !important;
+			}
+			100% {
+				opacity:1;
+				display:block !important;
+			}
+		}
+		.u-card {
+			//background:var(--user-button-background, #FFFFFF);
+			border-radius:100%;
+			box-shadow:0 0 1rem -.25rem var(--user-button-shadow), inset 0 0 1rem -.75rem var(--user-button-shadow);
+		}
+		.u-main {
+			//position: relative;
+			//z-index:1000;
+			//display:grid;
+			//place-items:center;
+			//width:4rem;
+			//height:4rem;
+			cursor: pointer;
+         --user-button-background:var(--user-button-main, #EC87C0);
+			img {
+				//height:50%;
+				//width:50%;
+				height:100%;
+				width:100%;
+			}
+			iframe {
+				position: absolute;
+				top:0;
+				left:0;
+				width:4rem;
+				height:4rem;
+				opacity:1;
+				transition:0s 4s;
+			}
+		}
+		.u-icons {
+         position:relative;
+			z-index:950;
+			//position: absolute;
+			//top:50%;
+			//left:50%;
+			transform:translate(-50%, -50%);
+			//width:0%;
+			//height:0%;
+			background:var(--user-button-circle);
+			box-shadow:0 0 0 0.125rem var(--user-button-cardborder);
+			border-radius:100%;
+			transition:.25s;
+			opacity:1 !important;
+         backdrop-filter: blur(10px);
+         /*&:before {
+            z-index:-1;
+            position:absolute;
+            top:0; right:0; bottom:0; left:0;
+            content:'';
+            
+            backdrop-filter: blur(10px);
+         }*/
+			a {
+				color:inherit;
+				display:grid;
+				place-items:center;
+				width:30px;
+				height:30px;
+				text-decoration:none;
+				div {
+					padding:.5rem;
+					//box-shadow: 0 0 0 0rem transparent;
+					//box-shadow:0 0 .5rem -.25rem var(--user-button-shadow);
+					transition:0s;
+				}
+            &[href="https://twitter.com/Osorpenke"] {
+               position:relative;
+               &:before {
+                  content:'Middle Click';
+                  position:absolute;
+                  top:-1.5rem;
+                  left:50%;
+                  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                  white-space:pre;
+                  transform:translateX(-50%);
+                  opacity:0;
+                  pointer-events:none;
+                  transition:.25s ease-in;
+                  background:#fffc;
+                  padding:.25rem .5rem;
+                  border-radius:.25rem;
+               }
+               &.show {
+                  &:before {
+                     opacity:1;
+                     transition:.25s ease-out;
+                  }
+               }
+               div {
+					   color:#1da1f2;
+               }
+				}
+				&[href="https://codepen.io/z-"] div {
+					background:black;
+					color:white;
+					//--user-button-cardborder:var(--user-button-text);
+				}
+				&:hover {
+					//box-shadow: 0 0 0rem 0.125rem var(--user-button-cardborder);
+				}
+				&.u-random {
+					div {
+                  position:relative;
+                  top:-1px;
+						animation:diespin 2s linear infinite;
+						@keyframes diespin {
+							0% {
+								transform:rotate(0deg);
+							}
+							100% {
+								transform:rotate(360deg);
+							}
+						}
+					}
+					&:not(:hover) div {
+						animation-play-state:paused;
+					}
+				}
+			}
+			>* {
+				position: absolute;
+				width:30px;
+				height:30px;
+				
+				background:var(--singlecolour);
+				border-radius:100%;
+				
+				cursor: pointer;
+				
+				transform:translate(-50%,-50%);
+				transition:.25s -.05s;
+				&:before {
+					position: absolute;
+					top:50%;
+					left:50%;
+					transform:translate(-50%,-50%);
+				}
+				&:hover, &:focus-within {
+					background:var(--hcolour);
+				}
+				&:first-child:nth-last-child(1),
+				&:first-child:nth-last-child(1) ~ * { //If there are 3 children
+					&:nth-child(1) {
+						left:25%;
+						top:25%;
+					}
+				}
+				&:first-child:nth-last-child(2),
+				&:first-child:nth-last-child(2) ~ * { //If there are 4 children
+					&:nth-child(1) {
+						left:37.5%;
+						top:18.75%;
+					}
+					&:nth-child(2) {
+						left:18.75%;
+						top:37.5%;
+					}
+				}
+				&:first-child:nth-last-child(3),
+				&:first-child:nth-last-child(3) ~ * { //If there are 3 children
+					&:nth-child(1) {
+						left:50%;
+						top:15.625%;
+					}
+					&:nth-child(2) {
+						left:25%;
+						top:25%;
+					}
+					&:nth-child(3) {
+						left:15.625%;
+						top:50%;
+					}
+				}
+				&:first-child:nth-last-child(4),
+				&:first-child:nth-last-child(4) ~ * { //If there are 4 children
+					&:nth-child(1) {
+						left:62.5%;
+						top:18.75%;
+					}
+					&:nth-child(2) {
+						left:37.5%;
+						top:18.75%;
+					}
+					&:nth-child(3) {
+						left:18.75%;
+						top:37.5%;
+					}
+					&:nth-child(4) {
+						left:18.75%;
+						top:62.5%;
+					}
+				}
+			}
+		}
+		&:hover, &:focus-within {
+			.u-icons {
+				width:300% !important;
+				height:300% !important;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/expanding-flex-cards-2021/dist/index.html b/expanding-flex-cards-2021/dist/index.html
new file mode 100644
index 0000000..1d02bc7
--- /dev/null
+++ b/expanding-flex-cards-2021/dist/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en" class="theme_switchable">
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Expanding flex cards</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css'>
+<link rel='stylesheet' href='https://static.fontawesome.com/css/fontawesome-app.css'>
+<link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.2.0/css/all.css'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="options">
+   <div class="option active" style="--optionBackground:url(https://66.media.tumblr.com/6fb397d822f4f9f4596dff2085b18f2e/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-walking"></i>
+         </div>
+         <div class="info">
+            <div class="main">Blonkisoaz</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-snowflake"></i>
+         </div>
+         <div class="info">
+            <div class="main">Oretemauw</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5af3f8303456e376ceda1517553ba786/tumblr_o4986gakjh1qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-tree"></i>
+         </div>
+         <div class="info">
+            <div class="main">Iteresuselle</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-tint"></i>
+         </div>
+         <div class="info">
+            <div class="main">Idiefe</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-sun"></i>
+         </div>
+         <div class="info">
+            <div class="main">Inatethi</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+</div>
+
+<a href="http://victorofvalencia-blog.tumblr.com" target="_blank" class="credit">Photos from Victor of Valencia on tumblr</a>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
+<script src='https://codepen.io/z-/pen/jvReOb/a8e37caf2a04602ea5815e5acedab458.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/expanding-flex-cards-2021/dist/script.js b/expanding-flex-cards-2021/dist/script.js
new file mode 100644
index 0000000..4f8eaf9
--- /dev/null
+++ b/expanding-flex-cards-2021/dist/script.js
@@ -0,0 +1,5 @@
+$(".option").click(function(){
+   $(".option").removeClass("active");
+   $(this).addClass("active");
+   
+});
\ No newline at end of file
diff --git a/expanding-flex-cards-2021/dist/style.css b/expanding-flex-cards-2021/dist/style.css
new file mode 100644
index 0000000..9c04645
--- /dev/null
+++ b/expanding-flex-cards-2021/dist/style.css
@@ -0,0 +1,390 @@
+@import url(https://pro.fontawesome.com/releases/v5.11.2/css/all.css);
+:root {
+  --user-button-circle: rgba(0,0,0,0.025);
+  --user-button-cardborder: rgba(255,255,255,0.25);
+  --user-button-text:#323133;
+  --user-button-shadow:rgba(0,0,0,0.1);
+}
+
+body #user-button {
+  z-index: 1000;
+  bottom: 1rem !important;
+  right: 1rem !important;
+  color: var(--user-button-text);
+  transition: 1s 0s ease-out;
+  -webkit-animation: slide 3s ease-out forwards;
+          animation: slide 3s ease-out forwards;
+}
+@-webkit-keyframes slide {
+  0%, 50% {
+    opacity: 0;
+    display: block !important;
+  }
+  100% {
+    opacity: 1;
+    display: block !important;
+  }
+}
+@keyframes slide {
+  0%, 50% {
+    opacity: 0;
+    display: block !important;
+  }
+  100% {
+    opacity: 1;
+    display: block !important;
+  }
+}
+body #user-button .u-card {
+  border-radius: 100%;
+  box-shadow: 0 0 1rem -0.25rem var(--user-button-shadow), inset 0 0 1rem -0.75rem var(--user-button-shadow);
+}
+body #user-button .u-main {
+  cursor: pointer;
+  --user-button-background:var(--user-button-main, #EC87C0);
+}
+body #user-button .u-main img {
+  height: 100%;
+  width: 100%;
+}
+body #user-button .u-main iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4rem;
+  height: 4rem;
+  opacity: 1;
+  transition: 0s 4s;
+}
+body #user-button .u-icons {
+  position: relative;
+  z-index: 950;
+  transform: translate(-50%, -50%);
+  background: var(--user-button-circle);
+  box-shadow: 0 0 0 0.125rem var(--user-button-cardborder);
+  border-radius: 100%;
+  transition: 0.25s;
+  opacity: 1 !important;
+  -webkit-backdrop-filter: blur(10px);
+          backdrop-filter: blur(10px);
+  /*&:before {
+     z-index:-1;
+     position:absolute;
+     top:0; right:0; bottom:0; left:0;
+     content:'';
+
+     backdrop-filter: blur(10px);
+  }*/
+}
+body #user-button .u-icons a {
+  color: inherit;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  text-decoration: none;
+}
+body #user-button .u-icons a div {
+  padding: 0.5rem;
+  transition: 0s;
+}
+body #user-button .u-icons a[href="https://twitter.com/Osorpenke"] {
+  position: relative;
+}
+body #user-button .u-icons a[href="https://twitter.com/Osorpenke"]:before {
+  content: "Middle Click";
+  position: absolute;
+  top: -1.5rem;
+  left: 50%;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  white-space: pre;
+  transform: translateX(-50%);
+  opacity: 0;
+  pointer-events: none;
+  transition: 0.25s ease-in;
+  background: #fffc;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+body #user-button .u-icons a[href="https://twitter.com/Osorpenke"].show:before {
+  opacity: 1;
+  transition: 0.25s ease-out;
+}
+body #user-button .u-icons a[href="https://twitter.com/Osorpenke"] div {
+  color: #1da1f2;
+}
+body #user-button .u-icons a[href="https://codepen.io/z-"] div {
+  background: black;
+  color: white;
+}
+body #user-button .u-icons a.u-random div {
+  position: relative;
+  top: -1px;
+  -webkit-animation: diespin 2s linear infinite;
+          animation: diespin 2s linear infinite;
+}
+@-webkit-keyframes diespin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes diespin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+body #user-button .u-icons a.u-random:not(:hover) div {
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+body #user-button .u-icons > * {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  background: var(--singlecolour);
+  border-radius: 100%;
+  cursor: pointer;
+  transform: translate(-50%, -50%);
+  transition: 0.25s -0.05s;
+}
+body #user-button .u-icons > *:before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+body #user-button .u-icons > *:hover, body #user-button .u-icons > *:focus-within {
+  background: var(--hcolour);
+}
+body #user-button .u-icons > *:first-child:nth-last-child(1):nth-child(1), body #user-button .u-icons > *:first-child:nth-last-child(1) ~ *:nth-child(1) {
+  left: 25%;
+  top: 25%;
+}
+body #user-button .u-icons > *:first-child:nth-last-child(2):nth-child(1), body #user-button .u-icons > *:first-child:nth-last-child(2) ~ *:nth-child(1) {
+  left: 37.5%;
+  top: 18.75%;
+}
+body #user-button .u-icons > *:first-child:nth-last-child(2):nth-child(2), body #user-button .u-icons > *:first-child:nth-last-child(2) ~ *:nth-child(2) {
+  left: 18.75%;
+  top: 37.5%;
+}
+body #user-button .u-icons > *:first-child:nth-last-child(3):nth-child(1), body #user-button .u-icons > *:first-child:nth-last-child(3) ~ *:nth-child(1) {
+  left: 50%;
+  top: 15.625%;
+}
+body #user-button .u-icons > *:first-child:nth-last-child(3):nth-child(2), body #user-button .u-icons > *:first-child:nth-last-child(3) ~ *:nth-child(2) {
+  left: 25%;
+  top: 25%;
+}
+body #user-button .u-icons > *:first-child:nth-last-child(3):nth-child(3), body #user-button .u-icons > *:first-child:nth-last-child(3) ~ *:nth-child(3) {
+  left: 15.625%;
+  top: 50%;
+}
+body #user-button .u-icons > *:first-child:nth-last-child(4):nth-child(1), body #user-button .u-icons > *:first-child:nth-last-child(4) ~ *:nth-child(1) {
+  left: 62.5%;
+  top: 18.75%;
+}
+body #user-button .u-icons > *:first-child:nth-last-child(4):nth-child(2), body #user-button .u-icons > *:first-child:nth-last-child(4) ~ *:nth-child(2) {
+  left: 37.5%;
+  top: 18.75%;
+}
+body #user-button .u-icons > *:first-child:nth-last-child(4):nth-child(3), body #user-button .u-icons > *:first-child:nth-last-child(4) ~ *:nth-child(3) {
+  left: 18.75%;
+  top: 37.5%;
+}
+body #user-button .u-icons > *:first-child:nth-last-child(4):nth-child(4), body #user-button .u-icons > *:first-child:nth-last-child(4) ~ *:nth-child(4) {
+  left: 18.75%;
+  top: 62.5%;
+}
+body #user-button:hover .u-icons, body #user-button:focus-within .u-icons {
+  width: 300% !important;
+  height: 300% !important;
+}
+
+body {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  height: 100vh;
+  font-family: "Roboto", sans-serif;
+  transition: 0.25s;
+}
+body.dark {
+  background: #232223;
+  color: white;
+}
+@media (prefers-color-scheme: dark) {
+  body:not(.light) {
+    background: #232223;
+    color: white;
+  }
+}
+body .credit {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  color: inherit;
+}
+body .options {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  overflow: hidden;
+  min-width: 600px;
+  max-width: 900px;
+  width: calc(100% - 100px);
+  height: 400px;
+}
+@media screen and (max-width: 718px) {
+  body .options {
+    min-width: 520px;
+  }
+  body .options .option:nth-child(5) {
+    display: none;
+  }
+}
+@media screen and (max-width: 638px) {
+  body .options {
+    min-width: 440px;
+  }
+  body .options .option:nth-child(4) {
+    display: none;
+  }
+}
+@media screen and (max-width: 558px) {
+  body .options {
+    min-width: 360px;
+  }
+  body .options .option:nth-child(3) {
+    display: none;
+  }
+}
+@media screen and (max-width: 478px) {
+  body .options {
+    min-width: 280px;
+  }
+  body .options .option:nth-child(2) {
+    display: none;
+  }
+}
+body .options .option {
+  position: relative;
+  overflow: hidden;
+  min-width: 60px;
+  margin: 10px;
+  background: var(--optionBackground, var(--defaultBackground, #E6E9ED));
+  background-size: auto 120%;
+  background-position: center;
+  cursor: pointer;
+  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+}
+body .options .option:nth-child(1) {
+  --defaultBackground:#ED5565;
+}
+body .options .option:nth-child(2) {
+  --defaultBackground:#FC6E51;
+}
+body .options .option:nth-child(3) {
+  --defaultBackground:#FFCE54;
+}
+body .options .option:nth-child(4) {
+  --defaultBackground:#2ECC71;
+}
+body .options .option:nth-child(5) {
+  --defaultBackground:#5D9CEC;
+}
+body .options .option:nth-child(6) {
+  --defaultBackground:#AC92EC;
+}
+body .options .option.active {
+  flex-grow: 10000;
+  transform: scale(1);
+  max-width: 600px;
+  margin: 0px;
+  border-radius: 40px;
+  background-size: auto 100%;
+  /*&:active {
+     transform:scale(0.9);
+  }*/
+}
+body .options .option.active .shadow {
+  box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
+}
+body .options .option.active .label {
+  bottom: 20px;
+  left: 20px;
+}
+body .options .option.active .label .info > div {
+  left: 0px;
+  opacity: 1;
+}
+body .options .option:not(.active) {
+  flex-grow: 1;
+  border-radius: 30px;
+}
+body .options .option:not(.active) .shadow {
+  bottom: -40px;
+  box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
+}
+body .options .option:not(.active) .label {
+  bottom: 10px;
+  left: 10px;
+}
+body .options .option:not(.active) .label .info > div {
+  left: 20px;
+  opacity: 0;
+}
+body .options .option .shadow {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  height: 120px;
+  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+}
+body .options .option .label {
+  display: flex;
+  position: absolute;
+  right: 0px;
+  height: 40px;
+  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+}
+body .options .option .label .icon {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  min-width: 40px;
+  max-width: 40px;
+  height: 40px;
+  border-radius: 100%;
+  background-color: white;
+  color: var(--defaultBackground);
+}
+body .options .option .label .info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 10px;
+  color: white;
+  white-space: pre;
+}
+body .options .option .label .info > div {
+  position: relative;
+  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
+}
+body .options .option .label .info .main {
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+body .options .option .label .info .sub {
+  transition-delay: 0.1s;
+}
\ No newline at end of file
diff --git a/expanding-flex-cards-2021/license.txt b/expanding-flex-cards-2021/license.txt
new file mode 100644
index 0000000..bf059ac
--- /dev/null
+++ b/expanding-flex-cards-2021/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Zed Dash (https://codepen.io/z-/pen/OBPJKK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/expanding-flex-cards-2021/src/a8e37caf2a04602ea5815e5ac.css b/expanding-flex-cards-2021/src/a8e37caf2a04602ea5815e5ac.css
new file mode 100644
index 0000000..ac8c687
--- /dev/null
+++ b/expanding-flex-cards-2021/src/a8e37caf2a04602ea5815e5ac.css
@@ -0,0 +1,243 @@
+@import url(https://pro.fontawesome.com/releases/v5.11.2/css/all.css);
+:root {
+	//--user-button-main: #EC87C0;
+	//--user-button-background: #FFFFFF;
+	--user-button-circle: rgba(0,0,0,0.025);
+	--user-button-cardborder: rgba(255,255,255,0.25);
+	--user-button-text:#323133;
+	--user-button-shadow:rgba(0,0,0,0.1);
+}
+
+@mixin dark {
+   &.dark {
+      @content;
+   }
+   @media (prefers-color-scheme: dark) {
+      &:not(.light) {
+         @content;
+      }
+   }
+}
+body {
+	#user-button {
+		//position: fixed;
+		z-index:1000;
+		bottom:1rem !important;
+		right:1rem !important;
+		color:var(--user-button-text);
+		transition:1s 0s ease-out;
+		animation:slide 3s ease-out forwards;
+		//display:block !important;
+		@keyframes slide {
+			0%, 50% {
+				opacity:0;
+				display:block !important;
+			}
+			100% {
+				opacity:1;
+				display:block !important;
+			}
+		}
+		.u-card {
+			//background:var(--user-button-background, #FFFFFF);
+			border-radius:100%;
+			box-shadow:0 0 1rem -.25rem var(--user-button-shadow), inset 0 0 1rem -.75rem var(--user-button-shadow);
+		}
+		.u-main {
+			//position: relative;
+			//z-index:1000;
+			//display:grid;
+			//place-items:center;
+			//width:4rem;
+			//height:4rem;
+			cursor: pointer;
+         --user-button-background:var(--user-button-main, #EC87C0);
+			img {
+				//height:50%;
+				//width:50%;
+				height:100%;
+				width:100%;
+			}
+			iframe {
+				position: absolute;
+				top:0;
+				left:0;
+				width:4rem;
+				height:4rem;
+				opacity:1;
+				transition:0s 4s;
+			}
+		}
+		.u-icons {
+         position:relative;
+			z-index:950;
+			//position: absolute;
+			//top:50%;
+			//left:50%;
+			transform:translate(-50%, -50%);
+			//width:0%;
+			//height:0%;
+			background:var(--user-button-circle);
+			box-shadow:0 0 0 0.125rem var(--user-button-cardborder);
+			border-radius:100%;
+			transition:.25s;
+			opacity:1 !important;
+         backdrop-filter: blur(10px);
+         /*&:before {
+            z-index:-1;
+            position:absolute;
+            top:0; right:0; bottom:0; left:0;
+            content:'';
+            
+            backdrop-filter: blur(10px);
+         }*/
+			a {
+				color:inherit;
+				display:grid;
+				place-items:center;
+				width:30px;
+				height:30px;
+				text-decoration:none;
+				div {
+					padding:.5rem;
+					//box-shadow: 0 0 0 0rem transparent;
+					//box-shadow:0 0 .5rem -.25rem var(--user-button-shadow);
+					transition:0s;
+				}
+            &[href="https://twitter.com/Osorpenke"] {
+               position:relative;
+               &:before {
+                  content:'Middle Click';
+                  position:absolute;
+                  top:-1.5rem;
+                  left:50%;
+                  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                  white-space:pre;
+                  transform:translateX(-50%);
+                  opacity:0;
+                  pointer-events:none;
+                  transition:.25s ease-in;
+                  background:#fffc;
+                  padding:.25rem .5rem;
+                  border-radius:.25rem;
+               }
+               &.show {
+                  &:before {
+                     opacity:1;
+                     transition:.25s ease-out;
+                  }
+               }
+               div {
+					   color:#1da1f2;
+               }
+				}
+				&[href="https://codepen.io/z-"] div {
+					background:black;
+					color:white;
+					//--user-button-cardborder:var(--user-button-text);
+				}
+				&:hover {
+					//box-shadow: 0 0 0rem 0.125rem var(--user-button-cardborder);
+				}
+				&.u-random {
+					div {
+                  position:relative;
+                  top:-1px;
+						animation:diespin 2s linear infinite;
+						@keyframes diespin {
+							0% {
+								transform:rotate(0deg);
+							}
+							100% {
+								transform:rotate(360deg);
+							}
+						}
+					}
+					&:not(:hover) div {
+						animation-play-state:paused;
+					}
+				}
+			}
+			>* {
+				position: absolute;
+				width:30px;
+				height:30px;
+				
+				background:var(--singlecolour);
+				border-radius:100%;
+				
+				cursor: pointer;
+				
+				transform:translate(-50%,-50%);
+				transition:.25s -.05s;
+				&:before {
+					position: absolute;
+					top:50%;
+					left:50%;
+					transform:translate(-50%,-50%);
+				}
+				&:hover, &:focus-within {
+					background:var(--hcolour);
+				}
+				&:first-child:nth-last-child(1),
+				&:first-child:nth-last-child(1) ~ * { //If there are 3 children
+					&:nth-child(1) {
+						left:25%;
+						top:25%;
+					}
+				}
+				&:first-child:nth-last-child(2),
+				&:first-child:nth-last-child(2) ~ * { //If there are 4 children
+					&:nth-child(1) {
+						left:37.5%;
+						top:18.75%;
+					}
+					&:nth-child(2) {
+						left:18.75%;
+						top:37.5%;
+					}
+				}
+				&:first-child:nth-last-child(3),
+				&:first-child:nth-last-child(3) ~ * { //If there are 3 children
+					&:nth-child(1) {
+						left:50%;
+						top:15.625%;
+					}
+					&:nth-child(2) {
+						left:25%;
+						top:25%;
+					}
+					&:nth-child(3) {
+						left:15.625%;
+						top:50%;
+					}
+				}
+				&:first-child:nth-last-child(4),
+				&:first-child:nth-last-child(4) ~ * { //If there are 4 children
+					&:nth-child(1) {
+						left:62.5%;
+						top:18.75%;
+					}
+					&:nth-child(2) {
+						left:37.5%;
+						top:18.75%;
+					}
+					&:nth-child(3) {
+						left:18.75%;
+						top:37.5%;
+					}
+					&:nth-child(4) {
+						left:18.75%;
+						top:62.5%;
+					}
+				}
+			}
+		}
+		&:hover, &:focus-within {
+			.u-icons {
+				width:300% !important;
+				height:300% !important;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/expanding-flex-cards-2021/src/index.html b/expanding-flex-cards-2021/src/index.html
new file mode 100644
index 0000000..01fc788
--- /dev/null
+++ b/expanding-flex-cards-2021/src/index.html
@@ -0,0 +1,64 @@
+<div class="options">
+   <div class="option active" style="--optionBackground:url(https://66.media.tumblr.com/6fb397d822f4f9f4596dff2085b18f2e/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-walking"></i>
+         </div>
+         <div class="info">
+            <div class="main">Blonkisoaz</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-snowflake"></i>
+         </div>
+         <div class="info">
+            <div class="main">Oretemauw</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5af3f8303456e376ceda1517553ba786/tumblr_o4986gakjh1qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-tree"></i>
+         </div>
+         <div class="info">
+            <div class="main">Iteresuselle</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-tint"></i>
+         </div>
+         <div class="info">
+            <div class="main">Idiefe</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg);">
+      <div class="shadow"></div>
+      <div class="label">
+         <div class="icon">
+            <i class="fas fa-sun"></i>
+         </div>
+         <div class="info">
+            <div class="main">Inatethi</div>
+            <div class="sub">Omuke trughte a otufta</div>
+         </div>
+      </div>
+   </div>
+</div>
+
+<a href="http://victorofvalencia-blog.tumblr.com" target="_blank" class="credit">Photos from Victor of Valencia on tumblr</a>
\ No newline at end of file
diff --git a/expanding-flex-cards-2021/src/script.js b/expanding-flex-cards-2021/src/script.js
new file mode 100644
index 0000000..eb82cb6
--- /dev/null
+++ b/expanding-flex-cards-2021/src/script.js
@@ -0,0 +1,5 @@
+$(".option").click(function(){
+   $(".option").removeClass("active");
+   $(this).addClass("active");
+   
+});
diff --git a/expanding-flex-cards-2021/src/style.scss b/expanding-flex-cards-2021/src/style.scss
new file mode 100644
index 0000000..02412ae
--- /dev/null
+++ b/expanding-flex-cards-2021/src/style.scss
@@ -0,0 +1,164 @@
+$optionDefaultColours: #ED5565,#FC6E51,#FFCE54,#2ECC71,#5D9CEC,#AC92EC;
+
+body {
+   display:flex;
+   flex-direction:row;
+   justify-content:center;
+   align-items:center;
+   overflow:hidden;
+   height:100vh;
+   
+   font-family: 'Roboto', sans-serif;
+   transition:.25s;
+   @include dark {
+      background: #232223;
+      color:white;
+   }
+   .credit {
+      position: absolute;
+      bottom:20px;
+      left:20px;
+      
+      color:inherit;
+   }
+   .options {
+      display:flex;
+      flex-direction:row;
+      align-items:stretch;
+      overflow:hidden;
+
+      min-width:600px;
+      max-width:900px;
+      width:calc(100% - 100px);
+      
+      height:400px;
+      
+      @for $i from 1 through 4 {
+         @media screen and (max-width:798px - $i*80) {
+            min-width:600px - $i*80;
+            .option:nth-child(#{6-$i}) {
+               display:none;
+            }
+         }
+      }
+      
+      .option {
+         position: relative;
+         overflow:hidden;
+
+         min-width:60px;
+         margin:10px;
+         //border:0px solid --defaultColor;
+
+         background:var(--optionBackground, var(--defaultBackground, #E6E9ED));
+         background-size:auto 120%;
+         background-position:center;
+
+         cursor: pointer;
+
+         transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+
+         @for $i from 1 through length($optionDefaultColours) {
+            &:nth-child(#{$i}) {
+               --defaultBackground:#{nth($optionDefaultColours, $i)};
+            }
+         }
+         &.active {
+            flex-grow:10000;
+            transform:scale(1);
+            
+            max-width:600px;
+            margin:0px;
+            border-radius:40px;
+            
+            background-size:auto 100%;
+            .shadow {
+               box-shadow:inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
+            }
+            .label {
+               bottom:20px;
+               left:20px;
+               .info >div {
+                  left:0px;
+                  opacity:1;
+               }
+            }
+            /*&:active {
+               transform:scale(0.9);
+            }*/
+         }
+         &:not(.active) {
+            flex-grow:1;
+            
+            border-radius:30px;
+            .shadow {
+               bottom:-40px;
+               box-shadow:inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
+            }
+            .label {
+               bottom:10px;
+               left:10px;
+               .info >div {
+                  left:20px;
+                  opacity:0;
+               }
+            }
+         }
+         .shadow {
+            position: absolute;
+            bottom:0px;
+            left:0px;
+            right:0px;
+            
+            height:120px;
+            
+            transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+         }
+         .label {
+            display:flex;
+            position: absolute;
+            right:0px;
+
+            height:40px;
+            transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+            .icon {
+               display:flex;
+               flex-direction:row;
+               justify-content:center;
+               align-items:center;
+               
+               min-width:40px;
+               max-width:40px;
+               height:40px;
+               border-radius:100%;
+
+               background-color:white;
+               color:var(--defaultBackground);
+            }
+            .info {
+               display:flex;
+               flex-direction:column;
+               justify-content:center;
+               
+               margin-left:10px;
+               
+               color:white;
+               
+               white-space: pre;
+               >div {
+                  position: relative;
+                  
+                  transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity .5s ease-out;
+               }
+               .main {
+                  font-weight:bold;
+                  font-size:1.2rem;
+               }
+               .sub {
+                  transition-delay:.1s;
+               }
+            }
+         }
+      }
+   }
+}
\ No newline at end of file
diff --git a/explode-a-node-3d-box-model/README.markdown b/explode-a-node-3d-box-model/README.markdown
new file mode 100644
index 0000000..1a8ba27
--- /dev/null
+++ b/explode-a-node-3d-box-model/README.markdown
@@ -0,0 +1,5 @@
+# Explode A Node: 3D Box Model
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/argyleink/pen/BaLedvd](https://codepen.io/argyleink/pen/BaLedvd).
+
+
diff --git a/explode-a-node-3d-box-model/dist/index.html b/explode-a-node-3d-box-model/dist/index.html
new file mode 100644
index 0000000..a9606cb
--- /dev/null
+++ b/explode-a-node-3d-box-model/dist/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Explode A Node: 3D Box Model</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="stack">
+  <div class="content card">
+    <p><b><span id="desktop-prompt">Hover</span><span id="mobile-prompt">Tap</span> me!</b></p>
+    <p>I'm just some example text content so there's something inside this box, nothing much to see here.</p>
+  </div>
+  <div class="padding card"></div>
+  <div class="border card"></div>
+  <div class="background card"></div>
+  <div class="box-shadow card"></div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/explode-a-node-3d-box-model/dist/style.css b/explode-a-node-3d-box-model/dist/style.css
new file mode 100644
index 0000000..d28fe67
--- /dev/null
+++ b/explode-a-node-3d-box-model/dist/style.css
@@ -0,0 +1,312 @@
+.stack {
+  display: grid;
+  grid: [stack] / [stack];
+  perspective: 5000
+}
+
+.stack:before {
+    content: "";
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgb(240, 240, 240);
+    transition: background 2s ease;
+    pointer-events: none;
+  }
+
+.stack:hover:before, .stack:active:before {
+      background: rgb(37, 37, 37);
+    }
+
+.stack:hover .card, .stack:active .card {
+    --bg-opacity: 5%;
+    transition-duration: 2s;
+    transition-timing-function: var(--easeInOutCirc);
+    transform: 
+      rotateX(45deg) rotate(45deg) 
+      translateZ(var(--z-offset)) translateY(20vh) translateX(20vh)
+    
+  }
+
+.stack:hover .card:nth-child(1), .stack:active .card:nth-child(1) { --z-offset: 75vh; }
+
+.stack:hover .card:nth-child(2), .stack:active .card:nth-child(2) { --z-offset: 50vh; }
+
+.stack:hover .card:nth-child(3), .stack:active .card:nth-child(3) { --z-offset: 25vh; }
+
+.stack:hover .card:nth-child(4), .stack:active .card:nth-child(4) { --z-offset: 0vh; }
+
+.stack:hover .card:nth-child(5), .stack:active .card:nth-child(5) { --z-offset: -25vh; }
+
+.stack:hover .card:nth-child(1)::after, .stack:active .card:nth-child(1)::after { transition-delay: 1.5s; }
+
+.stack:hover .card:nth-child(2)::after, .stack:active .card:nth-child(2)::after { transition-delay: 1.7s; }
+
+.stack:hover .card:nth-child(3)::after, .stack:active .card:nth-child(3)::after { transition-delay: 1.9s; }
+
+.stack:hover .card:nth-child(4)::after, .stack:active .card:nth-child(4)::after { transition-delay: 2.1s; }
+
+.stack:hover .card:nth-child(5)::after, .stack:active .card:nth-child(5)::after { transition-delay: 2.3s; }
+
+.stack:hover .card::after, .stack:active .card::after {
+      opacity: 1;
+      transform: rotate(-45deg) rotateY(45deg) translateX(0px);
+    }
+
+.stack:hover .card.content, .stack:active .card.content {
+      background: transparent;
+      color: white;
+      border-color: transparent;
+      transition: 
+        border-color 1s var(--easeInOutCirc) 0s,
+        background-color 1s var(--easeInOutCirc) 0s,
+        color 1s var(--easeInOutCirc) 0s,
+        transform 2s var(--easeInOutCirc) 0s;
+    }
+
+.stack:hover .card.padding, .stack:active .card.padding {
+      transition-delay: .1s;
+    }
+
+.stack:hover .card.border, .stack:active .card.border {
+      transition-delay: .2s;
+    }
+
+.stack:hover .card.background, .stack:active .card.background {
+      background: white;
+      transition: 
+        background-color 2s var(--easeInOutCirc) .3s, 
+        transform 2s var(--easeInOutCirc) .2s;
+    }
+
+.stack:hover .card.box-shadow, .stack:active .card.box-shadow {
+      transition-delay: .4s;
+      box-shadow:
+        0 -1px 25px rgba(0, 0, 0, 0.4),
+        0 7.6px 6.1px rgba(0, 0, 0, 0.051),
+        0 14.3px 11.5px rgba(0, 0, 0, 0.059),
+        0 25.5px 20.5px rgba(0, 0, 0, 0.07),
+        0 47.6px 38.4px rgba(0, 0, 0, 0.094),
+        0 114px 92px rgba(0, 0, 0, 0.19)
+      ;
+    }
+
+.card {
+  grid-area: stack;
+  
+  --z-offset: 0;
+  --easeInOutCirc: cubic-bezier(0.85, 0, 0.15, 1);
+  --bg-opacity: 0%;
+  
+  transition: transform 4s ease;
+  
+  width: 40vmin;
+  height: 40vmin;
+  box-sizing: border-box;
+  color: white;
+  box-siing: border-box;
+  background: rgba(255, 255, 254, 0.05);
+  position: relative
+}
+
+@media (orientation: landscape) {
+
+.card {
+    width: 40vh;
+    height: 40vh
+}
+  }
+
+@media (max-width: 540px) {
+
+.card {
+    width: 60vw;
+    height: 60vw
+}
+  }
+
+.card:nth-child(1) {
+    z-index: 3;
+  }
+
+.card:nth-child(2) {
+    z-index: 2;
+  }
+
+.card::after {
+    content: "Box";
+    position: absolute;
+    left: -45%;
+    top: 110%;
+    font-size: 1.25rem;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
+    white-space: nowrap;
+    padding: 1ch 2ch;
+    border-radius: 4ch;
+    opacity: 0;
+    transition: opacity .5s ease 0s, transform .5s ease;
+    transform: rotate(-45deg) rotateY(45deg) translateX(20px);
+    background: rgba(0, 0, 0, 0.7)
+  }
+
+@media (max-width: 540px) {
+
+.card::after {
+      left: -20%;
+      top: 70%
+  }
+    }
+
+.card.content {
+    z-index: 5;
+    transition: 
+      border-color 4s ease,
+      background-color 5s ease 2s,
+      color 4s ease 0s,
+      transform 4s ease 0s;
+    padding: 5vmin;
+    font-size: max(2.5vmin, .9rem);
+    line-height: 1.5;
+    background: rgb(255, 255, 254);
+    border: 5px solid hotpink;
+    color: black
+  }
+
+.card.content::after { 
+      content: "Content Box"; 
+      left: -50%
+    }
+
+@media (max-width: 540px) {
+
+.card.content::after {
+        left: -23%
+    }
+      }
+
+.card.padding {
+    background: transparent;
+    z-index: 4;
+    transition-delay: .1s
+  }
+
+.card.padding::after { content: "Padding Box"; }
+
+.card.padding::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      -webkit-clip-path: polygon(
+        0% 0%, 0% 100%, 
+        5vmin 100%, 5vmin 5vmin, 
+        calc(100% - 5vmin) 5vmin, 
+        calc(100% - 5vmin) calc(100% - 5vmin), 
+        5vmin calc(100% - 5vmin), 5vmin 100%, 
+        100% 100%, 100% 0%
+      );
+              clip-path: polygon(
+        0% 0%, 0% 100%, 
+        5vmin 100%, 5vmin 5vmin, 
+        calc(100% - 5vmin) 5vmin, 
+        calc(100% - 5vmin) calc(100% - 5vmin), 
+        5vmin calc(100% - 5vmin), 5vmin 100%, 
+        100% 100%, 100% 0%
+      );
+      background: repeating-linear-gradient(
+        -45deg, 
+        cyan, cyan 1px, 
+        rgba(255, 255, 254, 0.05) 1px, rgba(255, 255, 254, 0.05) 10px
+      );
+    }
+
+.card.border {
+    z-index: 3;
+    background: transparent;
+    transition-delay: .2s
+  }
+
+.card.border::after { content: "Border Box"; }
+
+.card.border::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      -webkit-clip-path: polygon(
+        0% 0%, 0% 100%, 
+        5px 100%, 5px 5px, 
+        calc(100% - 5px) 5px, 
+        calc(100% - 5px) calc(100% - 5px), 
+        5px calc(100% - 5px), 5px 100%, 
+        100% 100%, 100% 0%
+      );
+              clip-path: polygon(
+        0% 0%, 0% 100%, 
+        5px 100%, 5px 5px, 
+        calc(100% - 5px) 5px, 
+        calc(100% - 5px) calc(100% - 5px), 
+        5px calc(100% - 5px), 5px 100%, 
+        100% 100%, 100% 0%
+      );
+      background: linear-gradient(hotpink, hotpink);
+    }
+
+.card.background {
+    z-index: 2;
+    transition: 
+      background-color 4s ease .3s,
+      transform 4s ease .3s
+  }
+
+.card.background::after { content: "Background Box"; }
+
+.card.box-shadow {
+    z-index: 1;
+    background: transparent;
+    transition: 
+      box-shadow 4s ease .4s,
+      transform 4s ease .4s; 
+    
+    box-shadow:
+      0 2.8px 2.2px rgba(0, 0, 0, 0.02),
+      0 6.7px 5.3px rgba(0, 0, 0, 0.028),
+      0 12.5px 10px rgba(0, 0, 0, 0.035),
+      0 22.3px 17.9px rgba(0, 0, 0, 0.042),
+      0 41.8px 33.4px rgba(0, 0, 0, 0.05),
+      0 100px 80px rgba(0, 0, 0, 0.07)
+    
+  }
+
+.card.box-shadow::after { content: "Shadow Box"; }
+
+body {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
+  background: rgb(70, 70, 70);
+}
+
+p:first-of-type {
+  margin-top: 0;
+}
+
+@media (hover:hover) {
+  #mobile-prompt {
+    display: none;
+  }
+} 
+
+@media (hover:none) {
+  #desktop-prompt {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/explode-a-node-3d-box-model/license.txt b/explode-a-node-3d-box-model/license.txt
new file mode 100644
index 0000000..266ca0e
--- /dev/null
+++ b/explode-a-node-3d-box-model/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Adam Argyle (https://codepen.io/argyleink/pen/BaLedvd)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/explode-a-node-3d-box-model/src/index.html b/explode-a-node-3d-box-model/src/index.html
new file mode 100644
index 0000000..6ee2a94
--- /dev/null
+++ b/explode-a-node-3d-box-model/src/index.html
@@ -0,0 +1,10 @@
+<div class="stack">
+  <div class="content card">
+    <p><b><span id="desktop-prompt">Hover</span><span id="mobile-prompt">Tap</span> me!</b></p>
+    <p>I'm just some example text content so there's something inside this box, nothing much to see here.</p>
+  </div>
+  <div class="padding card"></div>
+  <div class="border card"></div>
+  <div class="background card"></div>
+  <div class="box-shadow card"></div>
+</div>
diff --git a/explode-a-node-3d-box-model/src/style.css b/explode-a-node-3d-box-model/src/style.css
new file mode 100644
index 0000000..814b099
--- /dev/null
+++ b/explode-a-node-3d-box-model/src/style.css
@@ -0,0 +1,272 @@
+@use postcss-preset-env {
+  stage: 0
+}
+
+.stack {
+  display: grid;
+  grid: [stack] / [stack];
+  perspective: 5000;
+  
+  &:before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background: lch(95 0 0);
+    transition: background 2s ease;
+    pointer-events: none;
+  }
+  
+  &:matches(:hover, :active) {
+    &:before {
+      background: lch(15 0 0);
+    }
+  }
+  
+  &:matches(:hover, :active) .card {
+    --bg-opacity: 5%;
+    transition-duration: 2s;
+    transition-timing-function: var(--easeInOutCirc);
+    transform: 
+      rotateX(45deg) rotate(45deg) 
+      translateZ(var(--z-offset)) translateY(20vh) translateX(20vh)
+    ;
+    
+    &:nth-child(1) { --z-offset: 75vh; }
+    &:nth-child(2) { --z-offset: 50vh; }
+    &:nth-child(3) { --z-offset: 25vh; }
+    &:nth-child(4) { --z-offset: 0vh; }
+    &:nth-child(5) { --z-offset: -25vh; }
+    
+    &:nth-child(1)::after { transition-delay: 1.5s; }
+    &:nth-child(2)::after { transition-delay: 1.7s; }
+    &:nth-child(3)::after { transition-delay: 1.9s; }
+    &:nth-child(4)::after { transition-delay: 2.1s; }
+    &:nth-child(5)::after { transition-delay: 2.3s; }
+    
+    &::after {
+      opacity: 1;
+      transform: rotate(-45deg) rotateY(45deg) translateX(0px);
+    }
+    
+    &.content {
+      background: transparent;
+      color: white;
+      border-color: transparent;
+      transition: 
+        border-color 1s var(--easeInOutCirc) 0s,
+        background-color 1s var(--easeInOutCirc) 0s,
+        color 1s var(--easeInOutCirc) 0s,
+        transform 2s var(--easeInOutCirc) 0s;
+    } 
+    
+    &.padding {
+      transition-delay: .1s;
+    }
+    
+    &.border {
+      transition-delay: .2s;
+    }
+    
+    &.background {
+      background: white;
+      transition: 
+        background-color 2s var(--easeInOutCirc) .3s, 
+        transform 2s var(--easeInOutCirc) .2s;
+    }
+    
+    &.box-shadow {
+      transition-delay: .4s;
+      box-shadow:
+        0 -1px 25px rgba(0, 0, 0, 0.4),
+        0 7.6px 6.1px rgba(0, 0, 0, 0.051),
+        0 14.3px 11.5px rgba(0, 0, 0, 0.059),
+        0 25.5px 20.5px rgba(0, 0, 0, 0.07),
+        0 47.6px 38.4px rgba(0, 0, 0, 0.094),
+        0 114px 92px rgba(0, 0, 0, 0.19)
+      ;
+    }
+  }
+}
+
+.card {
+  grid-area: stack;
+  
+  --z-offset: 0;
+  --easeInOutCirc: cubic-bezier(0.85, 0, 0.15, 1);
+  --bg-opacity: 0%;
+  
+  transition: transform 4s ease;
+  
+  inline-size: 40vmin;
+  block-size: 40vmin;
+  box-sizing: border-box;
+  color: white;
+  box-siing: border-box;
+  background: lch(100 0 0 / 5%);
+  position: relative;
+  
+  @media (orientation: landscape) {
+    inline-size: 40vh;
+    block-size: 40vh;
+  }
+  
+  @media (max-width: 540px) {
+    inline-size: 60vw;
+    block-size: 60vw;
+  }
+  
+  &:nth-child(1) {
+    z-index: 3;
+  }
+  
+  &:nth-child(2) {
+    z-index: 2;
+  }
+  
+  &::after {
+    content: "Box";
+    position: absolute;
+    left: -45%;
+    top: 110%;
+    font-size: 1.25rem;
+    text-shadow: 0 1px 3px lch(0 0 0 / 75%);
+    white-space: nowrap;
+    padding: 1ch 2ch;
+    border-radius: 4ch;
+    opacity: 0;
+    transition: opacity .5s ease 0s, transform .5s ease;
+    transform: rotate(-45deg) rotateY(45deg) translateX(20px);
+    background: lch(0 0 0 / 70%);
+    
+    @media (max-width: 540px) {
+      left: -20%;
+      top: 70%;
+    }
+  }
+  
+  &.content {
+    z-index: 5;
+    transition: 
+      border-color 4s ease,
+      background-color 5s ease 2s,
+      color 4s ease 0s,
+      transform 4s ease 0s;
+    padding: 5vmin;
+    font-size: max(2.5vmin, .9rem);
+    line-height: 1.5;
+    background: lch(100 0 0);
+    border: 5px solid hotpink;
+    color: black;
+    
+    &::after { 
+      content: "Content Box"; 
+      left: -50%;
+      
+      @media (max-width: 540px) {
+        left: -23%;
+      }
+    }
+  }
+  
+  &.padding {
+    background: transparent;
+    z-index: 4;
+    transition-delay: .1s;
+    
+    &::after { content: "Padding Box"; }
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      clip-path: polygon(
+        0% 0%, 0% 100%, 
+        5vmin 100%, 5vmin 5vmin, 
+        calc(100% - 5vmin) 5vmin, 
+        calc(100% - 5vmin) calc(100% - 5vmin), 
+        5vmin calc(100% - 5vmin), 5vmin 100%, 
+        100% 100%, 100% 0%
+      );
+      background: repeating-linear-gradient(
+        -45deg, 
+        cyan, cyan 1px, 
+        lch(100 0 0 / 5%) 1px, lch(100 0 0 / 5%) 10px
+      );
+    }
+  }
+  
+  &.border {
+    z-index: 3;
+    background: transparent;
+    transition-delay: .2s;
+    
+    &::after { content: "Border Box"; }
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      clip-path: polygon(
+        0% 0%, 0% 100%, 
+        5px 100%, 5px 5px, 
+        calc(100% - 5px) 5px, 
+        calc(100% - 5px) calc(100% - 5px), 
+        5px calc(100% - 5px), 5px 100%, 
+        100% 100%, 100% 0%
+      );
+      background: linear-gradient(hotpink, hotpink);
+    }
+  }
+  
+  &.background {
+    z-index: 2;
+    transition: 
+      background-color 4s ease .3s,
+      transform 4s ease .3s; 
+
+    &::after { content: "Background Box"; }
+  }
+  
+  &.box-shadow {
+    z-index: 1;
+    background: transparent;
+    transition: 
+      box-shadow 4s ease .4s,
+      transform 4s ease .4s; 
+    
+    box-shadow:
+      0 2.8px 2.2px rgba(0, 0, 0, 0.02),
+      0 6.7px 5.3px rgba(0, 0, 0, 0.028),
+      0 12.5px 10px rgba(0, 0, 0, 0.035),
+      0 22.3px 17.9px rgba(0, 0, 0, 0.042),
+      0 41.8px 33.4px rgba(0, 0, 0, 0.05),
+      0 100px 80px rgba(0, 0, 0, 0.07)
+    ;
+
+    
+    &::after { content: "Shadow Box"; }
+  }
+}
+
+body {
+  min-block-size: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: system-ui;
+  background: lch(30 0 0);
+}
+
+p:first-of-type {
+  margin-block-start: 0;
+}
+
+@media (hover:hover) {
+  #mobile-prompt {
+    display: none;
+  }
+} 
+
+@media (hover:none) {
+  #desktop-prompt {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/faction-toggle-star-wars-ep-iv-vi/README.markdown b/faction-toggle-star-wars-ep-iv-vi/README.markdown
new file mode 100644
index 0000000..c346567
--- /dev/null
+++ b/faction-toggle-star-wars-ep-iv-vi/README.markdown
@@ -0,0 +1,7 @@
+# Faction Toggle: Star Wars Ep. IV–VI
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jkantner/pen/NWRELjV](https://codepen.io/jkantner/pen/NWRELjV).
+
+The next in my series of faction toggles. This time, from the original Star Wars trilogy.
+
+Previous: https://codepen.io/jkantner/details/JjRmyZZ
diff --git a/faction-toggle-star-wars-ep-iv-vi/dist/index.html b/faction-toggle-star-wars-ep-iv-vi/dist/index.html
new file mode 100644
index 0000000..6c5b125
--- /dev/null
+++ b/faction-toggle-star-wars-ep-iv-vi/dist/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Faction Toggle: Star Wars Ep. IV–VI</title>
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Inter&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<label class="f">
+	Rebels
+	<input class="f__input" type="checkbox" name="faction" value="empire">
+	<span class="f__switch">
+		<span class="f__handle">
+			<span class="f__1"></span>
+			<span class="f__2">
+				<span class="f__2a"></span>
+				<span class="f__2b"></span>
+				<span class="f__2c"></span>
+				<span class="f__2d"></span>
+				<span class="f__2e"></span>
+			</span>
+			<span class="f__3"></span>
+			<span class="f__4"></span>
+			<span class="f__5"></span>
+			<span class="f__6"></span>
+			<span class="f__7"></span>
+			<span class="f__8"></span>
+			<span class="f__9"></span>
+			<span class="f__10"></span>
+			<span class="f__11"></span>
+			<span class="f__12"></span>
+			<span class="f__13"></span>
+			<span class="f__14"></span>
+			<span class="f__15"></span>
+			<span class="f__16"></span>
+			<span class="f__17"></span>
+		</span>
+	</span>
+	Empire
+</label>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/faction-toggle-star-wars-ep-iv-vi/dist/style.css b/faction-toggle-star-wars-ep-iv-vi/dist/style.css
new file mode 100644
index 0000000..bfa7111
--- /dev/null
+++ b/faction-toggle-star-wars-ep-iv-vi/dist/style.css
@@ -0,0 +1,309 @@
+* {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+:root {
+	--bg: #e3e4e8;
+	--fg: #17181c;
+	--primary: #255ff4;
+	--switchBg: #c7cad1;
+	font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320));
+}
+body, input {
+	font: 1em/1.5 "Inter", sans-serif;
+}
+body {
+	background: var(--bg);
+	color: var(--fg);
+	display: flex;
+	height: 100vh;
+}
+/* Switch base */
+.f, .f span {
+	display: block;
+}
+.f {
+	display: flex;
+	cursor: pointer;
+	align-items: center;
+	margin: auto;
+	-webkit-tap-highlight-color: transparent;
+}
+.f abbr {
+	text-decoration: none;
+}
+.f__input {
+	position: fixed;
+	top: -1.5em;
+	left: -1.5em;
+}
+.f__handle, .f__handle span {
+	transition-property: all;
+	transition-timing-function: ease-in-out;
+}
+.f__handle, .f__switch {
+	height: 3em;
+}
+.f__handle {
+	clip-path: circle(50% at 50% 50%);
+	position: relative;
+	width: 3em;
+	transition-duration: 0.4s;
+}
+.f__handle span {
+	position: absolute;
+	transition-duration: 0.2s;
+}
+.f__switch {
+	background: var(--switchBg);
+	border-radius: 1.5em;
+	margin: 0 0.75em;
+	width: 6em;
+}
+.f__input:focus {
+	outline: 0;
+}
+.f__input:focus-visible + .f__switch {
+	box-shadow: 0 0 0.25em var(--primary);
+}
+.f__input:checked + .f__switch .f__handle {
+	transform: translateX(100%);
+}
+/* Shapes */
+.f__1, .f__2a, .f__2b, .f__9, .f__10, .f__17 {
+	border-radius: 50%;
+}
+.f__1, .f__handle > span:nth-child(n + 11) {
+	background: #fff0;
+}
+.f__input:checked + .f__switch .f__1, 
+.f__input:checked + .f__switch .f__handle > span:nth-child(n + 11) {
+	background: #fff;
+}
+.f__1, .f__2, .f__2 span,
+.f__input:checked + .f__switch .f__9,
+.f__input:checked + .f__switch .f__handle > span:nth-child(n + 11):nth-child(-n + 17) {
+	transition-delay: 0.4s;
+}
+.f__1 {
+	box-shadow: 0 -0.5em 0 0.4em #fa0012 inset;
+	width: 3em;
+	height: 3em;
+}
+.f__input:checked + .f__switch .f__1 {
+	box-shadow: 0 0 0 0.1em #000 inset;
+}
+.f__2 {
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	transform-origin: 50% 100%;
+}
+.f__input:checked + .f__switch .f__2 {
+	transform: scaleY(0);
+}
+.f__input:checked + .f__switch .f__handle > span:nth-child(-n + 2),
+.f__input:checked + .f__switch .f__2 span {
+	transition-delay: 0s;
+}
+.f__2a, .f__2b {
+	box-shadow: 0 0 0 0.25em #fa0012 inset;
+	top: 0.35em;
+	width: 1.375em;
+	height: 1.65em;
+}
+.f__input:checked + .f__switch .f__2 span:nth-child(-n + 2) {
+	box-shadow: 0 0 0 0.25em #000 inset;
+}
+.f__2a {
+	clip-path: polygon(0% 35%,100% 28%,100% 100%,0% 100%);
+	left: 0.15em;
+	transform: rotate(-45deg) skewX(-13deg);
+}
+.f__2b {
+	clip-path: polygon(0 28%,100% 35%,100% 100%,0 100%);
+	right: 0.15em;
+	transform: rotate(45deg) skewX(13deg);
+}
+.f__input:checked + .f__switch .f__2c, 
+.f__handle > span:nth-child(n + 3):nth-child(-n + 8),
+.f__10 {
+	background-color: #000;
+}
+.f__2c {
+	background-color: #fa0012;
+	clip-path: polygon(50% 0%,80% 14%,61% 22%,60% 75%,100% 90%,100% 100%,0% 100%,0% 90%,40% 75%,39% 22%,20% 14%);
+	top: 0;
+	left: 1em;
+	width: 1em;
+	height: 2.2em;
+}
+.f__2d, .f__2e {
+	top: 0.3em;
+	width: 0.25em;
+	height: 0.55em;
+}
+.f__2d {
+	border-radius: 0% 100% 0% 100% / 100% 100% 0% 0%;
+	box-shadow: -0.1em -0.05em 0 #fa0012 inset;
+	left: 1.2em;
+}
+.f__input:checked + .f__switch .f__2d {
+	box-shadow: -0.1em -0.05em 0 #000 inset;
+}
+.f__2e {
+	border-radius: 100% 0% 0% 100% / 100% 100% 0% 0%;
+	box-shadow: 0.1em -0.05em 0 #fa0012 inset;
+	left: 1.55em;
+}
+.f__input:checked + .f__switch .f__2e {
+	box-shadow: 0.1em -0.05em 0 #000 inset;
+}
+.f__handle > span:nth-child(n + 3):nth-child(-n + 8),
+.f__handle > span:nth-child(n + 11):nth-child(-n + 16) {
+	transform-origin: 50% 0;
+}
+.f__handle > span:nth-child(n + 3):nth-child(-n + 8) {
+	top: 1.5em;
+	left: 1.45em;
+	width: 0.1em;
+	height: 1.4em;
+}
+.f__input:checked + .f__switch .f__handle > span:nth-child(n + 3):nth-child(-n + 8), .f__10 {
+	transition-delay: 0.2s;
+}
+.f__3 {
+	transform: translateY(-100%) scaleY(0);
+}
+.f__input:checked + .f__switch .f__3 {
+	transform: translateY(-100%) scaleY(1);
+}
+.f__4 {
+	transform: rotate(60deg) translateY(-100%) scaleY(0);
+}
+.f__input:checked + .f__switch .f__4 {
+	transform: rotate(60deg) translateY(-100%) scaleY(1);
+}
+.f__5 {
+	transform: rotate(120deg) translateY(-100%) scaleY(0);
+}
+.f__input:checked + .f__switch .f__5 {
+	transform: rotate(120deg) translateY(-100%) scaleY(1);
+}
+.f__6 {
+	transform: rotate(180deg) translateY(-100%) scaleY(0);
+}
+.f__input:checked + .f__switch .f__6 {
+	transform: rotate(180deg) translateY(-100%) scaleY(1);
+}
+.f__7 {
+	transform: rotate(240deg) translateY(-100%) scaleY(0);
+}
+.f__input:checked + .f__switch .f__7 {
+	transform: rotate(240deg) translateY(-100%) scaleY(1);
+}
+.f__8 {
+	transform: rotate(300deg) translateY(-100%) scaleY(0);
+}
+.f__input:checked + .f__switch .f__8 {
+	transform: rotate(300deg) translateY(-100%) scaleY(1);
+}
+.f__9, .f__10, .f__17 {
+	transform: scale(0);
+}
+.f__9 {
+	background-image:
+		conic-gradient( 
+			#000 15deg,
+			#fff 15deg 45deg,
+			#000 45deg 75deg, 
+			#fff 75deg 105deg,
+			#000 105deg 135deg,
+			#fff 135deg 165deg,
+			#000 165deg 195deg,
+			#fff 195deg 225deg,
+			#000 225deg 255deg,
+			#fff 255deg 285deg,
+			#000 285deg 315deg,
+			#fff 315deg 345deg,
+			#000 345deg
+		);
+	top: 0.3em;
+	left: 0.3em;
+	width: 2.4em;
+	height: 2.4em;
+}
+.f__10 {
+	top: 0.5em;
+	left: 0.5em;
+	width: 2em;
+	height: 2em;
+}
+.f__handle > span:nth-child(n + 3):nth-child(-n + 8), .f__input:checked + .f__switch .f__10 {
+	transition-delay: 0.3s;
+}
+.f__input:checked + .f__switch .f__handle > span:nth-child(n + 9):nth-child(-n + 10),
+.f__input:checked + .f__switch .f__17 {
+	transform: scale(1);
+}
+.f__handle > span:nth-child(n + 11):nth-child(-n + 16) {
+	clip-path: polygon(50% 0%,100% 100%,0% 100%);
+	top: 1.5em;
+	left: 1.32em;
+	width: 0.36em;
+	height: 0.9em;
+}
+.f__11 {
+	transform: scaleX(0);
+}
+.f__input:checked + .f__switch .f__11 {
+	transform: scaleX(1);
+}
+.f__12 {
+	transform: rotate(60deg) scaleX(0);
+}
+.f__input:checked + .f__switch .f__12 {
+	transform: rotate(60deg) scaleX(1);
+}
+.f__13 {
+	transform: rotate(120deg) scaleX(0);
+}
+.f__input:checked + .f__switch .f__13 {
+	transform: rotate(120deg) scaleX(1);
+}
+.f__14 {
+	transform: rotate(180deg) scaleX(0);
+}
+.f__input:checked + .f__switch .f__14 {
+	transform: rotate(180deg) scaleX(1);
+}
+.f__15 {
+	transform: rotate(240deg) scaleX(0);
+}
+.f__input:checked + .f__switch .f__15 {
+	transform: rotate(240deg) scaleX(1);
+}
+.f__16 {
+	transform: rotate(300deg) scaleX(0);
+}
+.f__input:checked + .f__switch .f__16 {
+	transform: rotate(300deg) scaleX(1);
+}
+.f__17 {
+	top: 1.06em;
+	left: 1.06em;
+	width: 0.88em;
+	height: 0.88em;
+}
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #2e3138;
+		--fg: #e3e4e8;
+		--primary: #5583f6;
+		--switchBg: #454954;
+	}
+}
\ No newline at end of file
diff --git a/faction-toggle-star-wars-ep-iv-vi/license.txt b/faction-toggle-star-wars-ep-iv-vi/license.txt
new file mode 100644
index 0000000..784474f
--- /dev/null
+++ b/faction-toggle-star-wars-ep-iv-vi/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Jon Kantner (https://codepen.io/jkantner/pen/NWRELjV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/faction-toggle-star-wars-ep-iv-vi/src/index.html b/faction-toggle-star-wars-ep-iv-vi/src/index.html
new file mode 100644
index 0000000..c866d09
--- /dev/null
+++ b/faction-toggle-star-wars-ep-iv-vi/src/index.html
@@ -0,0 +1,32 @@
+<label class="f">
+	Rebels
+	<input class="f__input" type="checkbox" name="faction" value="empire">
+	<span class="f__switch">
+		<span class="f__handle">
+			<span class="f__1"></span>
+			<span class="f__2">
+				<span class="f__2a"></span>
+				<span class="f__2b"></span>
+				<span class="f__2c"></span>
+				<span class="f__2d"></span>
+				<span class="f__2e"></span>
+			</span>
+			<span class="f__3"></span>
+			<span class="f__4"></span>
+			<span class="f__5"></span>
+			<span class="f__6"></span>
+			<span class="f__7"></span>
+			<span class="f__8"></span>
+			<span class="f__9"></span>
+			<span class="f__10"></span>
+			<span class="f__11"></span>
+			<span class="f__12"></span>
+			<span class="f__13"></span>
+			<span class="f__14"></span>
+			<span class="f__15"></span>
+			<span class="f__16"></span>
+			<span class="f__17"></span>
+		</span>
+	</span>
+	Empire
+</label>
\ No newline at end of file
diff --git a/faction-toggle-star-wars-ep-iv-vi/src/style.css b/faction-toggle-star-wars-ep-iv-vi/src/style.css
new file mode 100644
index 0000000..bfa7111
--- /dev/null
+++ b/faction-toggle-star-wars-ep-iv-vi/src/style.css
@@ -0,0 +1,309 @@
+* {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+:root {
+	--bg: #e3e4e8;
+	--fg: #17181c;
+	--primary: #255ff4;
+	--switchBg: #c7cad1;
+	font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320));
+}
+body, input {
+	font: 1em/1.5 "Inter", sans-serif;
+}
+body {
+	background: var(--bg);
+	color: var(--fg);
+	display: flex;
+	height: 100vh;
+}
+/* Switch base */
+.f, .f span {
+	display: block;
+}
+.f {
+	display: flex;
+	cursor: pointer;
+	align-items: center;
+	margin: auto;
+	-webkit-tap-highlight-color: transparent;
+}
+.f abbr {
+	text-decoration: none;
+}
+.f__input {
+	position: fixed;
+	top: -1.5em;
+	left: -1.5em;
+}
+.f__handle, .f__handle span {
+	transition-property: all;
+	transition-timing-function: ease-in-out;
+}
+.f__handle, .f__switch {
+	height: 3em;
+}
+.f__handle {
+	clip-path: circle(50% at 50% 50%);
+	position: relative;
+	width: 3em;
+	transition-duration: 0.4s;
+}
+.f__handle span {
+	position: absolute;
+	transition-duration: 0.2s;
+}
+.f__switch {
+	background: var(--switchBg);
+	border-radius: 1.5em;
+	margin: 0 0.75em;
+	width: 6em;
+}
+.f__input:focus {
+	outline: 0;
+}
+.f__input:focus-visible + .f__switch {
+	box-shadow: 0 0 0.25em var(--primary);
+}
+.f__input:checked + .f__switch .f__handle {
+	transform: translateX(100%);
+}
+/* Shapes */
+.f__1, .f__2a, .f__2b, .f__9, .f__10, .f__17 {
+	border-radius: 50%;
+}
+.f__1, .f__handle > span:nth-child(n + 11) {
+	background: #fff0;
+}
+.f__input:checked + .f__switch .f__1, 
+.f__input:checked + .f__switch .f__handle > span:nth-child(n + 11) {
+	background: #fff;
+}
+.f__1, .f__2, .f__2 span,
+.f__input:checked + .f__switch .f__9,
+.f__input:checked + .f__switch .f__handle > span:nth-child(n + 11):nth-child(-n + 17) {
+	transition-delay: 0.4s;
+}
+.f__1 {
+	box-shadow: 0 -0.5em 0 0.4em #fa0012 inset;
+	width: 3em;
+	height: 3em;
+}
+.f__input:checked + .f__switch .f__1 {
+	box-shadow: 0 0 0 0.1em #000 inset;
+}
+.f__2 {
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	transform-origin: 50% 100%;
+}
+.f__input:checked + .f__switch .f__2 {
+	transform: scaleY(0);
+}
+.f__input:checked + .f__switch .f__handle > span:nth-child(-n + 2),
+.f__input:checked + .f__switch .f__2 span {
+	transition-delay: 0s;
+}
+.f__2a, .f__2b {
+	box-shadow: 0 0 0 0.25em #fa0012 inset;
+	top: 0.35em;
+	width: 1.375em;
+	height: 1.65em;
+}
+.f__input:checked + .f__switch .f__2 span:nth-child(-n + 2) {
+	box-shadow: 0 0 0 0.25em #000 inset;
+}
+.f__2a {
+	clip-path: polygon(0% 35%,100% 28%,100% 100%,0% 100%);
+	left: 0.15em;
+	transform: rotate(-45deg) skewX(-13deg);
+}
+.f__2b {
+	clip-path: polygon(0 28%,100% 35%,100% 100%,0 100%);
+	right: 0.15em;
+	transform: rotate(45deg) skewX(13deg);
+}
+.f__input:checked + .f__switch .f__2c, 
+.f__handle > span:nth-child(n + 3):nth-child(-n + 8),
+.f__10 {
+	background-color: #000;
+}
+.f__2c {
+	background-color: #fa0012;
+	clip-path: polygon(50% 0%,80% 14%,61% 22%,60% 75%,100% 90%,100% 100%,0% 100%,0% 90%,40% 75%,39% 22%,20% 14%);
+	top: 0;
+	left: 1em;
+	width: 1em;
+	height: 2.2em;
+}
+.f__2d, .f__2e {
+	top: 0.3em;
+	width: 0.25em;
+	height: 0.55em;
+}
+.f__2d {
+	border-radius: 0% 100% 0% 100% / 100% 100% 0% 0%;
+	box-shadow: -0.1em -0.05em 0 #fa0012 inset;
+	left: 1.2em;
+}
+.f__input:checked + .f__switch .f__2d {
+	box-shadow: -0.1em -0.05em 0 #000 inset;
+}
+.f__2e {
+	border-radius: 100% 0% 0% 100% / 100% 100% 0% 0%;
+	box-shadow: 0.1em -0.05em 0 #fa0012 inset;
+	left: 1.55em;
+}
+.f__input:checked + .f__switch .f__2e {
+	box-shadow: 0.1em -0.05em 0 #000 inset;
+}
+.f__handle > span:nth-child(n + 3):nth-child(-n + 8),
+.f__handle > span:nth-child(n + 11):nth-child(-n + 16) {
+	transform-origin: 50% 0;
+}
+.f__handle > span:nth-child(n + 3):nth-child(-n + 8) {
+	top: 1.5em;
+	left: 1.45em;
+	width: 0.1em;
+	height: 1.4em;
+}
+.f__input:checked + .f__switch .f__handle > span:nth-child(n + 3):nth-child(-n + 8), .f__10 {
+	transition-delay: 0.2s;
+}
+.f__3 {
+	transform: translateY(-100%) scaleY(0);
+}
+.f__input:checked + .f__switch .f__3 {
+	transform: translateY(-100%) scaleY(1);
+}
+.f__4 {
+	transform: rotate(60deg) translateY(-100%) scaleY(0);
+}
+.f__input:checked + .f__switch .f__4 {
+	transform: rotate(60deg) translateY(-100%) scaleY(1);
+}
+.f__5 {
+	transform: rotate(120deg) translateY(-100%) scaleY(0);
+}
+.f__input:checked + .f__switch .f__5 {
+	transform: rotate(120deg) translateY(-100%) scaleY(1);
+}
+.f__6 {
+	transform: rotate(180deg) translateY(-100%) scaleY(0);
+}
+.f__input:checked + .f__switch .f__6 {
+	transform: rotate(180deg) translateY(-100%) scaleY(1);
+}
+.f__7 {
+	transform: rotate(240deg) translateY(-100%) scaleY(0);
+}
+.f__input:checked + .f__switch .f__7 {
+	transform: rotate(240deg) translateY(-100%) scaleY(1);
+}
+.f__8 {
+	transform: rotate(300deg) translateY(-100%) scaleY(0);
+}
+.f__input:checked + .f__switch .f__8 {
+	transform: rotate(300deg) translateY(-100%) scaleY(1);
+}
+.f__9, .f__10, .f__17 {
+	transform: scale(0);
+}
+.f__9 {
+	background-image:
+		conic-gradient( 
+			#000 15deg,
+			#fff 15deg 45deg,
+			#000 45deg 75deg, 
+			#fff 75deg 105deg,
+			#000 105deg 135deg,
+			#fff 135deg 165deg,
+			#000 165deg 195deg,
+			#fff 195deg 225deg,
+			#000 225deg 255deg,
+			#fff 255deg 285deg,
+			#000 285deg 315deg,
+			#fff 315deg 345deg,
+			#000 345deg
+		);
+	top: 0.3em;
+	left: 0.3em;
+	width: 2.4em;
+	height: 2.4em;
+}
+.f__10 {
+	top: 0.5em;
+	left: 0.5em;
+	width: 2em;
+	height: 2em;
+}
+.f__handle > span:nth-child(n + 3):nth-child(-n + 8), .f__input:checked + .f__switch .f__10 {
+	transition-delay: 0.3s;
+}
+.f__input:checked + .f__switch .f__handle > span:nth-child(n + 9):nth-child(-n + 10),
+.f__input:checked + .f__switch .f__17 {
+	transform: scale(1);
+}
+.f__handle > span:nth-child(n + 11):nth-child(-n + 16) {
+	clip-path: polygon(50% 0%,100% 100%,0% 100%);
+	top: 1.5em;
+	left: 1.32em;
+	width: 0.36em;
+	height: 0.9em;
+}
+.f__11 {
+	transform: scaleX(0);
+}
+.f__input:checked + .f__switch .f__11 {
+	transform: scaleX(1);
+}
+.f__12 {
+	transform: rotate(60deg) scaleX(0);
+}
+.f__input:checked + .f__switch .f__12 {
+	transform: rotate(60deg) scaleX(1);
+}
+.f__13 {
+	transform: rotate(120deg) scaleX(0);
+}
+.f__input:checked + .f__switch .f__13 {
+	transform: rotate(120deg) scaleX(1);
+}
+.f__14 {
+	transform: rotate(180deg) scaleX(0);
+}
+.f__input:checked + .f__switch .f__14 {
+	transform: rotate(180deg) scaleX(1);
+}
+.f__15 {
+	transform: rotate(240deg) scaleX(0);
+}
+.f__input:checked + .f__switch .f__15 {
+	transform: rotate(240deg) scaleX(1);
+}
+.f__16 {
+	transform: rotate(300deg) scaleX(0);
+}
+.f__input:checked + .f__switch .f__16 {
+	transform: rotate(300deg) scaleX(1);
+}
+.f__17 {
+	top: 1.06em;
+	left: 1.06em;
+	width: 0.88em;
+	height: 0.88em;
+}
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #2e3138;
+		--fg: #e3e4e8;
+		--primary: #5583f6;
+		--switchBg: #454954;
+	}
+}
\ No newline at end of file
diff --git a/fiesta/README.markdown b/fiesta/README.markdown
new file mode 100644
index 0000000..77a02fe
--- /dev/null
+++ b/fiesta/README.markdown
@@ -0,0 +1,5 @@
+# Fiesta
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shubniggurath/pen/PoKeeMy](https://codepen.io/shubniggurath/pen/PoKeeMy).
+
+
diff --git a/fiesta/dist/index.html b/fiesta/dist/index.html
new file mode 100644
index 0000000..554d429
--- /dev/null
+++ b/fiesta/dist/index.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Fiesta</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script id="vertexShader_particle" type="x-shader/x-vertex">
+  precision highp float;
+  attribute vec2 reference;
+  attribute vec2 position;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_screen;
+  
+  uniform sampler2D s_data;
+  uniform sampler2D b_position;
+  
+  varying vec3 v_colour;
+  varying float v_fogDepth;
+  varying float pointsize;
+  
+  vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) {
+      return a + b*cos( 6.28318*(c*t+d) );
+  }
+  
+  float rand(vec2 n) { 
+    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+  }
+  
+  void main() {
+    vec2 position = texture2D(b_position, reference).xy;
+    vec4 data = texture2D(s_data, reference);
+    gl_PointSize = 200. * data.x;
+    pointsize = gl_PointSize;
+    vec2 p = position/u_resolution;
+    v_colour = vec3(1,1,1);
+    vec4 pos = vec4(position / u_resolution * 2. - 1., 0., 1.);
+    gl_Position = vec4(pos.xy, 0., 1.);
+    v_colour = pal( data.y*3., vec3(0.9,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.,.5,1.0),vec3(0.2,0.2,0.67).zxy);
+  }
+</script>
+<script id="fragmentShader_particle" type="x-shader/x-fragment">
+  #extension GL_OES_standard_derivatives : enable
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  
+  varying vec3 v_colour;
+  varying float pointsize;
+
+  void main() {
+    vec2 uv = gl_PointCoord.xy - .5;
+    
+    gl_FragColor = vec4(0, 0, 0, 1);
+    
+    float l = length(uv);
+    float aa = 1. / pointsize;
+    float c = smoothstep(.2, 0.2-aa * 2., l);
+    float d = smoothstep(.21, 0.21-aa * 2., l);
+    float s = smoothstep(.2, .2-aa, length(uv-aa*3.)) * .2;
+    float opacity = clamp(s+c, 0., 1.);
+     
+    gl_FragColor = vec4(mix(vec3(0.), v_colour, c), opacity);
+  }
+</script>
+<script id="fragmentShader_position" type="x-shader/x-fragment">
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec4 u_mouse;
+  uniform float u_time;
+  uniform sampler2D s_noise;
+  uniform vec2 u_screen;
+  
+  uniform sampler2D s_data;
+  uniform sampler2D b_position;
+  
+  
+  //	Simplex 3D Noise 
+  //	by Ian McEwan, Ashima Arts
+  //
+  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
+  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
+  
+  float rand(float n){return fract(sin(n) * 43758.5453123);}
+  float rand(vec2 n) { 
+    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+  }
+  float snoise(vec3 v){ 
+    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  // First corner
+    vec3 i  = floor(v + dot(v, C.yyy) );
+    vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+  // Other corners
+    vec3 g = step(x0.yzx, x0.xyz);
+    vec3 l = 1.0 - g;
+    vec3 i1 = min( g.xyz, l.zxy );
+    vec3 i2 = max( g.xyz, l.zxy );
+
+    //  x0 = x0 - 0. + 0.0 * C 
+    vec3 x1 = x0 - i1 + 1.0 * C.xxx;
+    vec3 x2 = x0 - i2 + 2.0 * C.xxx;
+    vec3 x3 = x0 - 1. + 3.0 * C.xxx;
+
+  // Permutations
+    i = mod(i, 289.0 ); 
+    vec4 p = permute( permute( permute( 
+               i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+             + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
+             + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+  // Gradients
+  // ( N*N points uniformly over a square, mapped onto an octahedron.)
+    float n_ = 1.0/7.0; // N=7
+    vec3  ns = n_ * D.wyz - D.xzx;
+
+    vec4 j = p - 49.0 * floor(p * ns.z *ns.z);  //  mod(p,N*N)
+
+    vec4 x_ = floor(j * ns.z);
+    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+    vec4 x = x_ *ns.x + ns.yyyy;
+    vec4 y = y_ *ns.x + ns.yyyy;
+    vec4 h = 1.0 - abs(x) - abs(y);
+
+    vec4 b0 = vec4( x.xy, y.xy );
+    vec4 b1 = vec4( x.zw, y.zw );
+
+    vec4 s0 = floor(b0)*2.0 + 1.0;
+    vec4 s1 = floor(b1)*2.0 + 1.0;
+    vec4 sh = -step(h, vec4(0.0));
+
+    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+    vec3 p0 = vec3(a0.xy,h.x);
+    vec3 p1 = vec3(a0.zw,h.y);
+    vec3 p2 = vec3(a1.xy,h.z);
+    vec3 p3 = vec3(a1.zw,h.w);
+
+  //Normalise gradients
+    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+    p0 *= norm.x;
+    p1 *= norm.y;
+    p2 *= norm.z;
+    p3 *= norm.w;
+
+  // Mix final noise value
+    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+    m = m * m;
+    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
+                                  dot(p2,x2), dot(p3,x3) ) );
+  }
+  vec2 screenSpace(vec2 p) {
+    vec2 uv = (p - 0.5 * u_screen.xy) / min(u_screen.y, u_screen.x);
+    return uv;
+  }
+  
+  float noise21(vec2 n) {
+    const vec2 d = vec2(0.0, 1.0);
+    vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
+    return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
+  }
+  
+  void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    vec4 sample = texture2D(b_position, uv);
+    vec4 data = texture2D(s_data, uv);
+    vec2 position = sample.xy;
+    vec2 velocity = sample.zw;
+    
+    vec2 m = position-u_mouse.xy;
+    m = vec2(length(m), atan(m.y, m.x));
+    
+    float a = snoise(vec3(position*.004, u_time - floor(u_time*5.) * 20.)) * (3.14159 * 2.);
+    
+    // a = mix(atan(position.y, position.x), a, smoothstep(0., .1, length((position - u_screen * .5) * .01)-.2));
+    
+    float str = 1.;
+    
+    // vec2 p = position - u_screen * .5;
+    // vec2 ss = screenSpace(position);
+    // float msk = smoothstep(0.01, 0., length(ss)-.3);
+    // a = mix(a, atan(p.y, p.x), msk);
+    // str = mix(1., 3., msk);
+    
+    float c = cos(a);
+    float s = sin(a);
+    
+    float mass = smoothstep(.0, 1., data.x);
+    
+    velocity = (velocity + vec2(c, s) * str * ((mass + .5) * .2)) * .98 * ((1. -mass * .5) * .05 + .95);
+    
+    // if(length(velocity) > 10.) velocity = normalize(velocity)*10.;
+    
+    if(u_mouse.z == 1.) {
+      // float str = 1./m.x * 1000.;
+      float str = smoothstep(500., 100., m.x);
+      str = pow(str, 20. * (1.-mass));
+      velocity += vec2( cos(m.y) * str, sin(m.y) * str );
+    }
+    
+    vec2 pos = position + velocity;
+    if(pos.x > u_screen.x + 100.) pos.x = -90.;
+    else if(pos.x < -100.) pos.x = u_screen.x + 90.;
+    if(pos.y > u_screen.y + 100.) pos.y = -90.;
+    else if(pos.y < -100.) pos.y = u_screen.y + 90.;
+    
+    gl_FragColor = vec4(pos, velocity);
+  }
+</script>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/fiesta/dist/script.js b/fiesta/dist/script.js
new file mode 100644
index 0000000..7c4cef8
--- /dev/null
+++ b/fiesta/dist/script.js
@@ -0,0 +1,179 @@
+console.clear();
+
+import { Vec2, Vec3, Vec4, Mat2, Mat3, Mat4, Quat } from 'https://cdn.skypack.dev/wtc-math';
+import {
+Camera,
+Renderer,
+Mesh,
+Program,
+Geometry,
+Triangle,
+FragmentShader,
+RenderTarget,
+GeometryAttribute,
+Framebuffer,
+Uniform, Texture,
+ParticleSimulation } from 'https://cdn.skypack.dev/wtc-gl@1.0.0-beta.33';
+
+const setup = function () {
+  // Simulation dimensions
+  const px = Math.min(window.devicePixelRatio, 2);
+  const dimensions = [window.innerWidth, window.innerHeight];
+
+  const t = new ParticleSimulation({
+    rendererProps: {},
+    textureSize: 128,
+    simDimensions: 2,
+    vertex: document.querySelector('#vertexShader_particle').innerText,
+    fragment: document.querySelector('#fragmentShader_particle').innerText,
+    uniforms: {
+      'b_position': new Uniform({
+        name: 'position',
+        value: null,
+        kind: 'texture' }),
+
+      'b_velocity': new Uniform({
+        name: 'velocity',
+        value: null,
+        kind: 'texture' }) },
+
+
+    onBeforeRender: function (t, system) {
+
+      this.uniforms['b_position'].value = positionBuffer.read.texture;
+
+      // this.uniforms['s_data'] = new Uniform({ name: 'data', value: particleTexture, type: 'texture' });
+
+      this.uniforms['u_resolution'].value = [positionBuffer.width, positionBuffer.height];
+      // positionBuffer.read;
+      positionBuffer.render(this.renderer, { scene: positionMesh });
+
+      this.uniforms['u_resolution'].value = this.dimensions.array;
+    } });
+
+
+  t.program.depthTest = false;
+  t.transparent = true;
+  t.program.setBlendFunc(t.gl.SRC_ALPHA, t.gl.ONE_MINUS_SRC_ALPHA);
+
+  window.addEventListener('keyup', e => {
+    if (e.key === " ") {
+      t.playing = !t.playing;
+    }
+  });
+
+  const { gl, textureSize, particles, uniforms, renderer } = t;
+
+  const dpr = renderer.dpr;
+
+  // gl.clearColor(0.08, 0.1, 0.15, 0.);
+  gl.clearColor(0.98, 0.99, 0.35, 1.);
+
+  const positionData = new Float32Array(particles * 4).fill(0);
+  const particleData = new Float32Array(particles * 4).fill(0);
+  for (let i = 0; i < positionData.length; i += 4) {
+    positionData[i] = window.innerWidth * .5 * dpr;
+    positionData[i + 1] = Math.random() * 200 - 100 + window.innerHeight * .5 * dpr;
+    positionData[i + 2] = Math.random() - .5;
+    positionData[i + 3] = Math.random() - .5;
+
+    particleData[i] = Math.random();
+    particleData[i + 1] = 1. - Math.random() * 1.5;
+    particleData[i + 2] = 0;
+    particleData[i + 3] = 0;
+  }
+
+  const particleTexture = new Texture(gl, {
+    data: particleData,
+    width: textureSize,
+    height: textureSize,
+    minFilter: gl.NEAREST,
+    magFilter: gl.NEAREST,
+    generateMipmaps: false,
+    type: gl.FLOAT,
+    internalFormat: gl.RGBA16F });
+
+  uniforms.s_data = new Uniform({ name: 'data', value: particleTexture, kind: 'texture' });
+  const positionBuffer = new Framebuffer(gl, {
+    name: 'position',
+    width: textureSize,
+    height: textureSize,
+    dpr: 1,
+    data: positionData,
+    texdepth: Framebuffer.TEXTYPE_FLOAT,
+    minFilter: gl.NEAREST });
+
+  const defaultShaderV = `
+  attribute vec3 position;
+  attribute vec2 uv;
+  varying vec2 v_uv;
+  void main() {
+  gl_Position = vec4(position, 1.0);
+  v_uv = uv;
+  }`;
+  const geometry = new Triangle(gl);
+  const positionProgram = new Program(gl, {
+    vertex: defaultShaderV,
+    fragment: document.getElementById('fragmentShader_position').innerText,
+    uniforms: uniforms });
+
+  const bufferResolution = new Uniform({
+    name: 'resolution',
+    value: [textureSize, textureSize],
+    kind: "vec2" });
+
+  positionProgram.uniforms.u_resolution = bufferResolution;
+  uniforms.u_screen = new Uniform({
+    name: 'screen',
+    value: [window.innerWidth, window.innerHeight],
+    kind: "vec2" });
+
+  window.addEventListener('resize', e => {
+    uniforms.u_screen.value = [window.innerWidth, window.innerHeight];
+  });
+
+  const positionMesh = new Mesh(gl, { geometry, program: positionProgram });
+
+  // Set up mouse uniforms
+  (function () {
+    const tarmouse = new Vec4(0, 0, 0, 0);
+    const curmouse = tarmouse.clone();
+    let pointerdown = false;
+
+    uniforms.u_mouse = new Uniform({
+      name: 'mouse',
+      value: tarmouse.array,
+      kind: 'vec4' });
+
+    document.body.addEventListener('pointermove', e => {
+      tarmouse.x = e.x;
+      tarmouse.y = window.innerHeight - e.y;
+      if (pointerdown) {
+      }
+    });
+    document.body.addEventListener('pointerdown', e => {
+      pointerdown = true;
+      if (e.button == 0) {
+        curmouse.z = 1.;
+      }
+    });
+    document.body.addEventListener('pointerup', e => {
+      pointerdown = false;
+      if (e.button == 0) {
+        curmouse.z = 0.;
+      }
+    });
+    let oldTime;
+    const animouse = d => {
+      const factor = d - oldTime;
+      oldTime = d;
+      const diff = tarmouse.xy.subtractNew(curmouse.xy);
+      curmouse.xy = curmouse.xy.add(diff.scale(1. / factor * 2.));
+      uniforms.u_mouse.value = curmouse.array;
+      requestAnimationFrame(animouse);
+    };
+    requestAnimationFrame(animouse);
+  })();
+};
+
+setup();
\ No newline at end of file
diff --git a/fiesta/dist/style.css b/fiesta/dist/style.css
new file mode 100644
index 0000000..064675f
--- /dev/null
+++ b/fiesta/dist/style.css
@@ -0,0 +1,60 @@
+body {
+  background: #F9FE88;
+  margin: 0;
+  overflow: hidden;
+}
+canvas {
+  height: 100vh;
+  width: 100vw;
+  touch-action: none;
+}
+.osc {
+  left: 0px;
+  position: fixed;
+  top: 0px;
+}
+
+.button {
+  position: fixed;
+  z-index: 10;
+  right: 0;
+  bottom: 0;
+}
+.controls {
+  position: fixed;
+  z-index: 10;
+  left: 0;
+  bottom: 0;
+}
+.playpause {
+  background: #AAB;
+  padding: 10px;
+}
+.playpause label {
+  display: block;
+  box-sizing: border-box;
+
+  width: 0;
+  height: 20px;
+
+  cursor: pointer;
+
+  border-color: transparent transparent transparent #202020;
+  transition: 100ms all ease;
+  will-change: border-width;
+
+  border-style: double;
+  border-width: 0px 0 0px 20px;
+}
+.playpause input[type='checkbox'] {
+  visibility: hidden;
+}
+.playpause.checked label {
+  border-style: double;
+  border-width: 0px 0 0px 20px;
+}
+.playpause label {
+  border-style: solid;
+  border-width: 10px 0 10px 20px;
+}
+/* } */
\ No newline at end of file
diff --git a/fiesta/license.txt b/fiesta/license.txt
new file mode 100644
index 0000000..44808f0
--- /dev/null
+++ b/fiesta/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Liam Egan (https://codepen.io/shubniggurath/pen/PoKeeMy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/fiesta/src/index.html b/fiesta/src/index.html
new file mode 100644
index 0000000..bd06b51
--- /dev/null
+++ b/fiesta/src/index.html
@@ -0,0 +1,210 @@
+<script id="vertexShader_particle" type="x-shader/x-vertex">
+  precision highp float;
+  attribute vec2 reference;
+  attribute vec2 position;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_screen;
+  
+  uniform sampler2D s_data;
+  uniform sampler2D b_position;
+  
+  varying vec3 v_colour;
+  varying float v_fogDepth;
+  varying float pointsize;
+  
+  vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) {
+      return a + b*cos( 6.28318*(c*t+d) );
+  }
+  
+  float rand(vec2 n) { 
+    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+  }
+  
+  void main() {
+    vec2 position = texture2D(b_position, reference).xy;
+    vec4 data = texture2D(s_data, reference);
+    gl_PointSize = 200. * data.x;
+    pointsize = gl_PointSize;
+    vec2 p = position/u_resolution;
+    v_colour = vec3(1,1,1);
+    vec4 pos = vec4(position / u_resolution * 2. - 1., 0., 1.);
+    gl_Position = vec4(pos.xy, 0., 1.);
+    v_colour = pal( data.y*3., vec3(0.9,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.,.5,1.0),vec3(0.2,0.2,0.67).zxy);
+  }
+</script>
+<script id="fragmentShader_particle" type="x-shader/x-fragment">
+  #extension GL_OES_standard_derivatives : enable
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  
+  varying vec3 v_colour;
+  varying float pointsize;
+
+  void main() {
+    vec2 uv = gl_PointCoord.xy - .5;
+    
+    gl_FragColor = vec4(0, 0, 0, 1);
+    
+    float l = length(uv);
+    float aa = 1. / pointsize;
+    float c = smoothstep(.2, 0.2-aa * 2., l);
+    float d = smoothstep(.21, 0.21-aa * 2., l);
+    float s = smoothstep(.2, .2-aa, length(uv-aa*3.)) * .2;
+    float opacity = clamp(s+c, 0., 1.);
+     
+    gl_FragColor = vec4(mix(vec3(0.), v_colour, c), opacity);
+  }
+</script>
+<script id="fragmentShader_position" type="x-shader/x-fragment">
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec4 u_mouse;
+  uniform float u_time;
+  uniform sampler2D s_noise;
+  uniform vec2 u_screen;
+  
+  uniform sampler2D s_data;
+  uniform sampler2D b_position;
+  
+  
+  //	Simplex 3D Noise 
+  //	by Ian McEwan, Ashima Arts
+  //
+  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
+  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
+  
+  float rand(float n){return fract(sin(n) * 43758.5453123);}
+  float rand(vec2 n) { 
+    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+  }
+  float snoise(vec3 v){ 
+    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  // First corner
+    vec3 i  = floor(v + dot(v, C.yyy) );
+    vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+  // Other corners
+    vec3 g = step(x0.yzx, x0.xyz);
+    vec3 l = 1.0 - g;
+    vec3 i1 = min( g.xyz, l.zxy );
+    vec3 i2 = max( g.xyz, l.zxy );
+
+    //  x0 = x0 - 0. + 0.0 * C 
+    vec3 x1 = x0 - i1 + 1.0 * C.xxx;
+    vec3 x2 = x0 - i2 + 2.0 * C.xxx;
+    vec3 x3 = x0 - 1. + 3.0 * C.xxx;
+
+  // Permutations
+    i = mod(i, 289.0 ); 
+    vec4 p = permute( permute( permute( 
+               i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+             + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
+             + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+  // Gradients
+  // ( N*N points uniformly over a square, mapped onto an octahedron.)
+    float n_ = 1.0/7.0; // N=7
+    vec3  ns = n_ * D.wyz - D.xzx;
+
+    vec4 j = p - 49.0 * floor(p * ns.z *ns.z);  //  mod(p,N*N)
+
+    vec4 x_ = floor(j * ns.z);
+    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+    vec4 x = x_ *ns.x + ns.yyyy;
+    vec4 y = y_ *ns.x + ns.yyyy;
+    vec4 h = 1.0 - abs(x) - abs(y);
+
+    vec4 b0 = vec4( x.xy, y.xy );
+    vec4 b1 = vec4( x.zw, y.zw );
+
+    vec4 s0 = floor(b0)*2.0 + 1.0;
+    vec4 s1 = floor(b1)*2.0 + 1.0;
+    vec4 sh = -step(h, vec4(0.0));
+
+    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+    vec3 p0 = vec3(a0.xy,h.x);
+    vec3 p1 = vec3(a0.zw,h.y);
+    vec3 p2 = vec3(a1.xy,h.z);
+    vec3 p3 = vec3(a1.zw,h.w);
+
+  //Normalise gradients
+    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+    p0 *= norm.x;
+    p1 *= norm.y;
+    p2 *= norm.z;
+    p3 *= norm.w;
+
+  // Mix final noise value
+    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+    m = m * m;
+    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
+                                  dot(p2,x2), dot(p3,x3) ) );
+  }
+  vec2 screenSpace(vec2 p) {
+    vec2 uv = (p - 0.5 * u_screen.xy) / min(u_screen.y, u_screen.x);
+    return uv;
+  }
+  
+  float noise21(vec2 n) {
+    const vec2 d = vec2(0.0, 1.0);
+    vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
+    return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
+  }
+  
+  void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    vec4 sample = texture2D(b_position, uv);
+    vec4 data = texture2D(s_data, uv);
+    vec2 position = sample.xy;
+    vec2 velocity = sample.zw;
+    
+    vec2 m = position-u_mouse.xy;
+    m = vec2(length(m), atan(m.y, m.x));
+    
+    float a = snoise(vec3(position*.004, u_time - floor(u_time*5.) * 20.)) * (3.14159 * 2.);
+    
+    // a = mix(atan(position.y, position.x), a, smoothstep(0., .1, length((position - u_screen * .5) * .01)-.2));
+    
+    float str = 1.;
+    
+    // vec2 p = position - u_screen * .5;
+    // vec2 ss = screenSpace(position);
+    // float msk = smoothstep(0.01, 0., length(ss)-.3);
+    // a = mix(a, atan(p.y, p.x), msk);
+    // str = mix(1., 3., msk);
+    
+    float c = cos(a);
+    float s = sin(a);
+    
+    float mass = smoothstep(.0, 1., data.x);
+    
+    velocity = (velocity + vec2(c, s) * str * ((mass + .5) * .2)) * .98 * ((1. -mass * .5) * .05 + .95);
+    
+    // if(length(velocity) > 10.) velocity = normalize(velocity)*10.;
+    
+    if(u_mouse.z == 1.) {
+      // float str = 1./m.x * 1000.;
+      float str = smoothstep(500., 100., m.x);
+      str = pow(str, 20. * (1.-mass));
+      velocity += vec2( cos(m.y) * str, sin(m.y) * str );
+    }
+    
+    vec2 pos = position + velocity;
+    if(pos.x > u_screen.x + 100.) pos.x = -90.;
+    else if(pos.x < -100.) pos.x = u_screen.x + 90.;
+    if(pos.y > u_screen.y + 100.) pos.y = -90.;
+    else if(pos.y < -100.) pos.y = u_screen.y + 90.;
+    
+    gl_FragColor = vec4(pos, velocity);
+  }
+</script>
\ No newline at end of file
diff --git a/fiesta/src/script.babel b/fiesta/src/script.babel
new file mode 100644
index 0000000..71f5ce6
--- /dev/null
+++ b/fiesta/src/script.babel
@@ -0,0 +1,179 @@
+console.clear();
+
+import { Vec2, Vec3, Vec4, Mat2, Mat3, Mat4, Quat } from 'https://cdn.skypack.dev/wtc-math';
+import { 
+  Camera, 
+  Renderer, 
+  Mesh, 
+  Program, 
+  Geometry, 
+  Triangle, 
+  FragmentShader, 
+  RenderTarget,
+  GeometryAttribute,
+  Framebuffer,
+  Uniform, Texture,
+  ParticleSimulation } from 'https://cdn.skypack.dev/wtc-gl@1.0.0-beta.33';
+
+const setup = function() {
+  // Simulation dimensions
+  const px = Math.min(window.devicePixelRatio, 2);
+  const dimensions = [window.innerWidth, window.innerHeight];
+  
+  const t = new ParticleSimulation({ 
+    rendererProps: {},
+    textureSize: 128,
+    simDimensions: 2,
+    vertex: document.querySelector('#vertexShader_particle').innerText,
+    fragment: document.querySelector('#fragmentShader_particle').innerText,
+    uniforms: {
+      'b_position': new Uniform({
+                      name: 'position',
+                      value: null,
+                      kind: 'texture'
+                    }),
+      'b_velocity': new Uniform({
+                      name: 'velocity',
+                      value: null,
+                      kind: 'texture'
+                    })
+    },
+    onBeforeRender: function(t, system) {
+      
+      this.uniforms['b_position'].value = positionBuffer.read.texture;
+      
+      // this.uniforms['s_data'] = new Uniform({ name: 'data', value: particleTexture, type: 'texture' });
+      
+      this.uniforms['u_resolution'].value = [ positionBuffer.width, positionBuffer.height ];
+      // positionBuffer.read;
+      positionBuffer.render(this.renderer, { scene: positionMesh });
+      
+      this.uniforms['u_resolution'].value = this.dimensions.array;
+    }
+  });
+  
+  t.program.depthTest = false;
+  t.transparent = true;
+  t.program.setBlendFunc(t.gl.SRC_ALPHA, t.gl.ONE_MINUS_SRC_ALPHA);
+  
+  window.addEventListener('keyup', (e) => {
+    if(e.key === " ") {
+      t.playing = !t.playing;
+    }
+  })
+  
+  const { gl, textureSize, particles, uniforms, renderer } = t;
+  
+  const dpr = renderer.dpr;
+  
+  // gl.clearColor(0.08, 0.1, 0.15, 0.);
+  gl.clearColor(0.98, 0.99, 0.35, 1.);
+  
+  const positionData = new Float32Array(particles * 4).fill(0);
+  const particleData = new Float32Array(particles * 4).fill(0);
+  for(let i = 0; i < positionData.length; i += 4) {
+    positionData[i] = window.innerWidth * .5 * dpr;
+    positionData[i + 1] = Math.random() * 200 - 100 + window.innerHeight * .5 * dpr;
+    positionData[i + 2] = Math.random()-.5;
+    positionData[i + 3] = Math.random()-.5;
+    
+    particleData[i] = Math.random();
+    particleData[i + 1] = 1. - Math.random() * 1.5;
+    particleData[i + 2] = 0;
+    particleData[i + 3] = 0;
+  }
+  
+  const particleTexture = new Texture(gl, {
+    data: particleData, 
+    width: textureSize, 
+    height: textureSize, 
+    minFilter: gl.NEAREST, 
+    magFilter: gl.NEAREST,
+    generateMipmaps: false,
+    type: gl.FLOAT,
+    internalFormat: gl.RGBA16F
+  });
+  uniforms.s_data = new Uniform({ name: 'data', value: particleTexture, kind: 'texture' });
+  const positionBuffer = new Framebuffer(gl, {
+    name: 'position',
+    width: textureSize,
+    height: textureSize,
+    dpr: 1,
+    data: positionData,
+    texdepth: Framebuffer.TEXTYPE_FLOAT,
+    minFilter: gl.NEAREST 
+  });
+  const defaultShaderV = `
+  attribute vec3 position;
+  attribute vec2 uv;
+  varying vec2 v_uv;
+  void main() {
+  gl_Position = vec4(position, 1.0);
+  v_uv = uv;
+  }`;
+  const geometry = new Triangle(gl)
+  const positionProgram = new Program(gl, {
+    vertex: defaultShaderV,
+    fragment: document.getElementById('fragmentShader_position').innerText,
+    uniforms: uniforms
+  })
+  const bufferResolution = new Uniform({
+    name: 'resolution',
+   value: [textureSize, textureSize],
+   kind: "vec2"
+  })
+  positionProgram.uniforms.u_resolution = bufferResolution;
+  uniforms.u_screen = new Uniform({ 
+    name: 'screen', 
+    value: [ window.innerWidth, window.innerHeight ],
+    kind: "vec2"});
+  
+  window.addEventListener('resize', (e) => {
+    uniforms.u_screen.value = [ window.innerWidth, window.innerHeight ]
+  });
+  
+  const positionMesh = new Mesh(gl, { geometry, program: positionProgram });
+  
+// Set up mouse uniforms
+(function() {
+  const tarmouse = new Vec4(0,0,0,0);
+  const curmouse = tarmouse.clone();
+  let pointerdown = false;
+  
+  uniforms.u_mouse = new Uniform({
+    name: 'mouse',
+    value: tarmouse.array,
+    kind: 'vec4'
+  });
+  document.body.addEventListener('pointermove', (e) => {
+    tarmouse.x = e.x;
+    tarmouse.y = ( window.innerHeight - e.y );
+    if(pointerdown) {
+    }
+  });
+  document.body.addEventListener('pointerdown', (e) => {
+    pointerdown = true;
+    if(e.button == 0) {
+      curmouse.z = 1.;
+    }
+  });
+  document.body.addEventListener('pointerup', (e) => {
+    pointerdown = false;
+    if(e.button == 0) {
+      curmouse.z = 0.;
+    }
+  });
+  let oldTime;
+  const animouse = (d) => {
+    const factor = d - oldTime;
+    oldTime = d;
+    const diff = tarmouse.xy.subtractNew(curmouse.xy);
+    curmouse.xy = curmouse.xy.add( diff.scale(1./factor*2.) );
+    uniforms.u_mouse.value = curmouse.array;
+    requestAnimationFrame(animouse);
+  }
+  requestAnimationFrame(animouse);
+})();
+}
+
+setup();
\ No newline at end of file
diff --git a/fiesta/src/style.css b/fiesta/src/style.css
new file mode 100644
index 0000000..064675f
--- /dev/null
+++ b/fiesta/src/style.css
@@ -0,0 +1,60 @@
+body {
+  background: #F9FE88;
+  margin: 0;
+  overflow: hidden;
+}
+canvas {
+  height: 100vh;
+  width: 100vw;
+  touch-action: none;
+}
+.osc {
+  left: 0px;
+  position: fixed;
+  top: 0px;
+}
+
+.button {
+  position: fixed;
+  z-index: 10;
+  right: 0;
+  bottom: 0;
+}
+.controls {
+  position: fixed;
+  z-index: 10;
+  left: 0;
+  bottom: 0;
+}
+.playpause {
+  background: #AAB;
+  padding: 10px;
+}
+.playpause label {
+  display: block;
+  box-sizing: border-box;
+
+  width: 0;
+  height: 20px;
+
+  cursor: pointer;
+
+  border-color: transparent transparent transparent #202020;
+  transition: 100ms all ease;
+  will-change: border-width;
+
+  border-style: double;
+  border-width: 0px 0 0px 20px;
+}
+.playpause input[type='checkbox'] {
+  visibility: hidden;
+}
+.playpause.checked label {
+  border-style: double;
+  border-width: 0px 0 0px 20px;
+}
+.playpause label {
+  border-style: solid;
+  border-width: 10px 0 10px 20px;
+}
+/* } */
\ No newline at end of file
diff --git a/file-manager-app-with-accessible-dark-light-mode-switch/README.markdown b/file-manager-app-with-accessible-dark-light-mode-switch/README.markdown
new file mode 100644
index 0000000..021dcaa
--- /dev/null
+++ b/file-manager-app-with-accessible-dark-light-mode-switch/README.markdown
@@ -0,0 +1,5 @@
+# File manager app (with accessible dark/ light mode switch)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/thebabydino/pen/MWjbwjj](https://codepen.io/thebabydino/pen/MWjbwjj).
+
+[Inspiration](https://dribbble.com/shots/14729154-File-Manager-App-UX-UI-Design/attachments/6430473?mode=media).
diff --git a/file-manager-app-with-accessible-dark-light-mode-switch/dist/index.html b/file-manager-app-with-accessible-dark-light-mode-switch/dist/index.html
new file mode 100644
index 0000000..e1ca03e
--- /dev/null
+++ b/file-manager-app-with-accessible-dark-light-mode-switch/dist/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - File manager app (with accessible dark/ light mode switch)</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<body class="ini--bg ini--fg" style="--mode: 0; --ssum: 256; --unit: 'gb'; --used: 154; --perc: 60; --col0: #feb95a; --col1: #f2c8ee; --col2: #20bfa9; --col3: #ee786c">
+  <svg width="0" height="0">
+    <symbol id="f0" viewBox="0 0 90 80" fill="currentcolor" stroke="currentcolor" stroke-linejoin="round">
+      <rect id="r" x="20" y="15" width="50" height="30" rx="5"></rect>
+      <use xlink:href="#r" style="color: rgba(0, 0, 0, .5)"></use>
+      <path d="M20 26v38h50v-26h-25l-10-12z" stroke-width="10"></path>
+    </symbol>
+  </svg>
+  <div id="app">
+    <div class="view view--main sec--bg">
+      <header>
+        <nav class="ctrl">
+          <button aria-label="no fucking idea what this button is supposed to do"></button>
+          <button aria-haspopup="true" aria-expanded="false" aria-controls="pop-opts-main">general options</button>
+          <form class="popup ini--bg" id="pop-opts-main">
+            <ul>
+              <li class="wrap wrap--mode">
+                <input id="mode-dark" type="radio" name="mode" value="0" checked="checked"/>
+                <label for="mode-dark" style="--idx: 0">switch to dark mode</label>
+                <input id="mode-lght" type="radio" name="mode" value="1"/>
+                <label for="mode-lght" style="--idx: 1">switch to light mode</label>
+              </li>
+            </ul>
+          </form>
+        </nav>
+      </header>
+      <div class="main">
+        <div class="wrap wrap--slides">
+          <div class="slide ini--bg dummy">fuck knows what you're supposed to have here</div>
+          <div class="slide ini--bg dummy">fuck knows what you're supposed to have here</div>
+          <div class="slide ini--bg ini--fg">
+            <div class="chart">
+              <div class="arc" style="--cum: 0.1875; --rel: 0.1875; --col: #feb95a"></div>
+              <div class="arc" style="--cum: 0.25; --rel: 0.0625; --col: #f2c8ee"></div>
+              <div class="arc" style="--cum: 0.4625; --rel: 0.2125; --col: #20bfa9"></div>
+              <div class="arc" style="--cum: 0.6; --rel: 0.1375; --col: #ee786c"></div>
+            </div>
+            <div class="total"></div>
+            <div class="used"></div>
+          </div>
+        </div>
+        <div class="wrap wrap--types">
+          <article class="tile ftyp ini--bg songs" style="--col: #feb95a">
+            <header>
+              <svg class="ico">
+                <use xlink:href="#f0"></use>
+              </svg>
+              <h3>songs</h3>
+              <nav class="ctrl">
+                <button class="sec--fg" aria-haspopup="true" aria-expanded="false" aria-controls="pop-opts-songs">songs options</button>
+                <form class="popup sec--bg dummy" id="pop-opts-songs">here you'd have some options to do some stuff</form>
+              </nav>
+            </header>
+            <div class="info">
+              <div class="info__num sec--fg">250</div>
+              <div class="info__rel">75</div>
+              <meter class="sec--bg" max="100" value="75"></meter>
+            </div>
+          </article>
+          <article class="tile ftyp ini--bg photos" style="--col: #f2c8ee">
+            <header>
+              <svg class="ico">
+                <use xlink:href="#f0"></use>
+              </svg>
+              <h3>photos</h3>
+              <nav class="ctrl">
+                <button class="sec--fg" aria-haspopup="true" aria-expanded="false" aria-controls="pop-opts-photos">photos options</button>
+                <form class="popup sec--bg dummy" id="pop-opts-photos">here you'd have some options to do some stuff</form>
+              </nav>
+            </header>
+            <div class="info">
+              <div class="info__num sec--fg">4524</div>
+              <div class="info__rel">25</div>
+              <meter class="sec--bg" max="100" value="25"></meter>
+            </div>
+          </article>
+          <article class="tile ftyp ini--bg videos" style="--col: #20bfa9">
+            <header>
+              <svg class="ico">
+                <use xlink:href="#f0"></use>
+              </svg>
+              <h3>videos</h3>
+              <nav class="ctrl">
+                <button class="sec--fg" aria-haspopup="true" aria-expanded="false" aria-controls="pop-opts-videos">videos options</button>
+                <form class="popup sec--bg dummy" id="pop-opts-videos">here you'd have some options to do some stuff</form>
+              </nav>
+            </header>
+            <div class="info">
+              <div class="info__num sec--fg">320</div>
+              <div class="info__rel">85</div>
+              <meter class="sec--bg" max="100" value="85"></meter>
+            </div>
+          </article>
+          <article class="tile ftyp ini--bg documents" style="--col: #ee786c">
+            <header>
+              <svg class="ico">
+                <use xlink:href="#f0"></use>
+              </svg>
+              <h3>documents</h3>
+              <nav class="ctrl">
+                <button class="sec--fg" aria-haspopup="true" aria-expanded="false" aria-controls="pop-opts-documents">documents options</button>
+                <form class="popup sec--bg dummy" id="pop-opts-documents">here you'd have some options to do some stuff</form>
+              </nav>
+            </header>
+            <div class="info">
+              <div class="info__num sec--fg">1200</div>
+              <div class="info__rel">55</div>
+              <meter class="sec--bg" max="100" value="55"></meter>
+            </div>
+          </article>
+        </div>
+      </div>
+    </div>
+    <!--.view.view--favs.sec--bgheader
+    -->
+  </div>
+</body>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/file-manager-app-with-accessible-dark-light-mode-switch/dist/script.js b/file-manager-app-with-accessible-dark-light-mode-switch/dist/script.js
new file mode 100644
index 0000000..b790da8
--- /dev/null
+++ b/file-manager-app-with-accessible-dark-light-mode-switch/dist/script.js
@@ -0,0 +1,23 @@
+/* no library, this is all the JS needed for accessible interaction */
+const _BODY = document.body;
+
+addEventListener('change', e => {
+  let _t = e.target;
+
+  switch (_t.type) {
+    case 'radio':
+      _BODY.style.setProperty(`--${_t.name}`, +_t.value);
+      break;}
+
+}, false);
+
+addEventListener('click', e => {
+  let _t = e.target,
+  _ae = document.querySelector('[aria-expanded=true]');
+
+  if (_ae) _ae.setAttribute('aria-expanded', 'false');
+  if (_t !== _ae) {
+    if (_t.hasAttribute('aria-haspopup'))
+    _t.setAttribute('aria-expanded', 'true');
+  }
+}, false);
\ No newline at end of file
diff --git a/file-manager-app-with-accessible-dark-light-mode-switch/dist/style.css b/file-manager-app-with-accessible-dark-light-mode-switch/dist/style.css
new file mode 100644
index 0000000..160c4af
--- /dev/null
+++ b/file-manager-app-with-accessible-dark-light-mode-switch/dist/style.css
@@ -0,0 +1,297 @@
+* {
+  box-sizing: inherit;
+  margin: 0;
+  border: none;
+  padding: 0;
+  list-style: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+.ini--bg {
+  background: rgb(calc(var(--not-mode)*44 + var(--mode)*252), calc(var(--not-mode)*44 + var(--mode)*252), calc(var(--not-mode)*52 + var(--mode)*252));
+}
+
+.sec--bg {
+  background: rgb(calc(var(--not-mode)*23 + var(--mode)*241), calc(var(--not-mode)*23 + var(--mode)*245), calc(var(--not-mode)*33 + var(--mode)*254));
+}
+
+.ini--fg {
+  color: rgb(calc(var(--not-mode)*254 + var(--mode)*38), calc(var(--not-mode)*254 + var(--mode)*38), calc(var(--not-mode)*254 + var(--mode)*38));
+}
+
+.sec--fg {
+  color: #9d9d9d;
+}
+
+nav {
+  position: relative;
+}
+
+button {
+  padding: 0.375em;
+  width: 0.875em;
+  height: 0.875em;
+  border-radius: 50%;
+}
+button:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px;
+}
+
+[aria-haspopup] {
+  overflow: hidden;
+  background: radial-gradient(circle, currentcolor 38%, transparent calc(38% + 1px)) 50%/26% 26% no-repeat space content-box;
+  text-indent: 100vmax;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.popup {
+  --exp: 0;
+  --not-exp: calc(1 - var(--exp));
+  position: absolute;
+  top: 100%;
+  right: 0;
+  padding: 0.25em;
+  min-width: 9.1em;
+  border-radius: 5px;
+  transform-origin: 100% 0;
+  transform: perspective(5em) rotatex(calc(var(--not-exp)*-90deg)) scale(var(--exp));
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  transition: transform 0.3s;
+}
+[aria-expanded=true] + .popup {
+  --exp: 1 ;
+}
+
+.dummy {
+  font-family: purisa, segoe script, comic sans ms, cursive;
+  text-align: center;
+}
+
+[type=radio] {
+  position: absolute;
+  opacity: 0;
+  clip-path: inset(50%);
+}
+
+meter {
+  -moz-appearance: none;
+  width: 100%;
+  height: 0.5em;
+  border-radius: 0.5em;
+  --c0: rgb(calc(var(--not-mode)*31 + var(--mode)*65), calc(var(--not-mode)*191 + var(--mode)*170), calc(var(--not-mode)*168 + var(--mode)*26));
+  --c1: rgb(calc(var(--not-mode)*12 + var(--mode)*248), calc(var(--not-mode)*29 + var(--mode)*253), calc(var(--not-mode)*27 + var(--mode)*246));
+}
+meter::-webkit-meter-bar {
+  border: none;
+  height: 0.375em;
+  background: transparent;
+}
+meter::-webkit-meter-optimum-value {
+  border-radius: 0.375em;
+  background: linear-gradient(90deg, var(--c0) 85%, var(--c1));
+}
+meter::-moz-meter-bar {
+  height: 0.375em;
+  border-radius: 0.375em;
+  background: linear-gradient(90deg, var(--c0) 85%, var(--c1));
+}
+
+body {
+  --not-mode: calc(1 - var(--mode));
+  display: grid;
+  place-content: center;
+  min-height: 100vh;
+  font: 1em/1.5 roboto, sans-serif;
+}
+
+#app {
+  display: grid;
+  overflow: hidden;
+  border-radius: 2em;
+  width: 26em;
+}
+
+.view {
+  grid-area: 1/1;
+}
+.view--favs {
+  transform: translate(100%);
+}
+.view > header {
+  z-index: 2;
+  padding: 1em;
+}
+.view > header nav {
+  display: grid;
+  grid-template: max-content/repeat(2, max-content);
+  justify-content: space-between;
+}
+.view > header button {
+  color: #fff;
+  filter: Invert(var(--mode));
+}
+
+.main {
+  z-index: 1;
+}
+
+.wrap {
+  display: grid;
+  padding: 1em;
+}
+.wrap--mode {
+  overflow: hidden;
+  padding: 0;
+}
+.wrap--mode label {
+  grid-area: 1/1;
+  padding: 0.25em;
+  transform: translate(calc((1 - var(--idx) - var(--mode))*100%));
+  transition: transform 0.3s;
+  cursor: pointer;
+}
+.wrap--types {
+  grid-gap: 1em;
+}
+.view--main .wrap--types {
+  grid-template-columns: 1fr 1fr;
+}
+.view--favs .wrap--types {
+  grid-auto-flow: column;
+}
+
+.slide {
+  --ll: rgb(calc(var(--not-mode)*73 + var(--mode)*230), calc(var(--not-mode)*73 + var(--mode)*230), calc(var(--not-mode)*75 + var(--mode)*230));
+  --hl: rgb(calc(var(--not-mode)*44 + var(--mode)*252), calc(var(--not-mode)*44 + var(--mode)*252), calc(var(--not-mode)*52 + var(--mode)*252));
+  display: grid;
+  grid-gap: 0.75em 0;
+  grid-template-columns: 1fr 1fr;
+  grid-area: 1/1;
+  padding: 0.5em;
+  border-radius: 1em;
+}
+.slide > :not(.chart) {
+  --size: calc(2*(0.75em + 2px));
+  display: grid;
+  background-size: var(--size) var(--size);
+}
+.slide > :not(.chart)::before, .slide > :not(.chart)::after {
+  grid-column: 2;
+}
+.slide > :not(.chart)::before {
+  color: #9d9d9d;
+  text-transform: capitalize;
+  content: attr(class) " space";
+}
+.slide > :not(.chart)::after {
+  font-size: 1.75em;
+  font-weight: 900;
+  content: counter(val) "GB";
+}
+
+.chart {
+  grid-column: 1/-1;
+  place-self: center;
+  overflow: hidden;
+  position: relative;
+  padding: 27.5%;
+  border-radius: 50%;
+  box-shadow: inset 0 0 1px 2em var(--ll);
+}
+.chart::before, .chart::after, .chart .arc {
+  position: absolute;
+  right: 0;
+  left: 0;
+  line-height: 1.125;
+  text-align: center;
+}
+.chart::before {
+  bottom: 50%;
+  font-size: 2.125em;
+  font-weight: 700;
+  counter-reset: perc var(--perc);
+  content: counter(perc) "%";
+}
+.chart::after {
+  content: "Used";
+}
+
+.arc {
+  --a: calc(var(--rel)*360deg);
+  display: grid;
+  top: 0;
+  bottom: 0;
+  transform: rotate(calc((var(--cum) - var(--rel))*360deg));
+  background: conic-gradient(var(--col) var(--a), transparent 0%);
+  --mask:
+  	radial-gradient(closest-side,
+  			transparent calc(100% - 2em - 1px), red calc(100% - 2em));
+  -webkit-mask: var(--mask);
+  mask: var(--mask);
+}
+.arc::before, .arc::after {
+  grid-area: 1/1;
+  border-radius: 50%;
+  background: radial-gradient(circle at 50% 1em, var(--col) 1em, transparent calc(1em + 1px));
+  content: "";
+}
+.arc::after {
+  transform: rotate(var(--a));
+}
+
+.total {
+  grid-template-columns: 2.5em 1fr;
+  background: radial-gradient(circle, var(--ll) calc(0.75em - 1px), transparent 0.75em) left 0.5em bottom 0.5em no-repeat;
+  counter-reset: val var(--ssum);
+}
+
+.used {
+  grid-template-columns: 4.75em 1fr;
+  background: radial-gradient(circle, var(--col3) calc(0.75em - 1px), var(--hl) 0.75em calc(0.75em + 1px), transparent calc(0.75em + 2px)) left 0.5em bottom 0.5em, radial-gradient(circle, var(--col2) calc(0.75em - 1px), var(--hl) 0.75em calc(0.75em + 1px), transparent calc(0.75em + 2px)) left 1.25em bottom 0.5em, radial-gradient(circle, var(--col1) calc(0.75em - 1px), var(--hl) 0.75em calc(0.75em + 1px), transparent calc(0.75em + 2px)) left 2em bottom 0.5em, radial-gradient(circle, var(--col0) calc(0.75em - 1px), var(--hl) 0.75em calc(0.75em + 1px), transparent calc(0.75em + 2px)) left 2.75em bottom 0.5em;
+  background-repeat: no-repeat;
+  counter-reset: val var(--used);
+}
+
+.tile {
+  padding: 0.5em;
+  border-radius: 1em;
+  background: rgb(calc(var(--not-mode)*44 + var(--mode)*252), calc(var(--not-mode)*44 + var(--mode)*252), calc(var(--not-mode)*52 + var(--mode)*252));
+}
+.tile header {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  z-index: 2;
+}
+.tile h3 {
+  font-size: 1.375em;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+.tile nav {
+  place-self: start;
+  grid-area: 1/2;
+}
+
+.ico {
+  margin: -0.5em;
+  width: 5em;
+  height: 5em;
+  color: var(--col);
+}
+
+.info__num {
+  padding-bottom: 0.5em;
+}
+.info__num::after {
+  content: " Files";
+}
+.info__rel {
+  font-weight: 500;
+}
+.info__rel::after {
+  content: "%";
+}
\ No newline at end of file
diff --git a/file-manager-app-with-accessible-dark-light-mode-switch/license.txt b/file-manager-app-with-accessible-dark-light-mode-switch/license.txt
new file mode 100644
index 0000000..5cd051a
--- /dev/null
+++ b/file-manager-app-with-accessible-dark-light-mode-switch/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Ana Tudor (https://codepen.io/thebabydino/pen/MWjbwjj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/file-manager-app-with-accessible-dark-light-mode-switch/src/index.pug b/file-manager-app-with-accessible-dark-light-mode-switch/src/index.pug
new file mode 100644
index 0000000..f215a00
--- /dev/null
+++ b/file-manager-app-with-accessible-dark-light-mode-switch/src/index.pug
@@ -0,0 +1,60 @@
+- let data = {
+- 	unit: 'gb', 
+- 	total: 256, 
+- 	types: [
+- 		{ name: 'songs', num: 250, fav: 210, rel: 75, col: '#feb95a' }, 
+- 		{ name: 'photos', num: 4524, fav: 4524, rel: 25, col: '#f2c8ee' }, 
+- 		{ name: 'videos', num: 320, fav: 190, rel: 85, col: '#20bfa9' }, 
+- 		{ name: 'documents', num: 1200, fav: 900, rel: 55, col: '#ee786c' }
+- 	]
+- }
+- data.n = data.types.length;
+- data.types.forEach((c, i) => { c.cum = .01*data.types.map(c => c.rel).slice(0, i + 1).reduce((a, k) => a + k, 0)/data.n });
+
+body.ini--bg.ini--fg(style=`--mode: 0; --ssum: ${data.total}; --unit: '${data.unit}'; --used: ${Math.round(data.types[data.n - 1].cum*data.total)}; --perc: ${Math.round(data.types[data.n - 1].cum*100)}; ${data.types.map((c, i) => `--col${i}: ${c.col}`).join('; ')}`)
+	svg(width='0' height='0')
+		symbol#f0(viewBox='0 0 90 80' fill='currentcolor' stroke='currentcolor' stroke-linejoin='round')
+			rect#r(x='20' y='15' width='50' height='30' rx='5')
+			use(xlink:href='#r' style='color: rgba(0, 0, 0, .5)')
+			path(d='M20 26v38h50v-26h-25l-10-12z' stroke-width='10')
+
+	#app
+		.view.view--main.sec--bg
+			header
+				nav.ctrl
+					button(aria-label='no fucking idea what this button is supposed to do')
+					button(aria-haspopup='true' aria-expanded='false' aria-controls='pop-opts-main') general options
+					form#pop-opts-main.popup.ini--bg
+						ul
+							li.wrap.wrap--mode
+								input#mode-dark(type='radio' name='mode' value='0' checked)
+								label(for='mode-dark' style='--idx: 0') switch to dark mode
+								input#mode-lght(type='radio' name='mode' value='1')
+								label(for='mode-lght' style='--idx: 1') switch to light mode
+			.main
+				.wrap.wrap--slides
+					.slide.ini--bg.dummy fuck knows what you're supposed to have here
+					.slide.ini--bg.dummy fuck knows what you're supposed to have here
+					.slide.ini--bg.ini--fg
+						.chart
+							- for(let i = 0; i < data.n; i++)
+								- let c = data.types[i];
+								.arc(style=`--cum: ${+(c.cum).toFixed(4)}; --rel: ${.01*c.rel/data.n}; --col: ${c.col}`)
+						.total
+						.used
+				.wrap.wrap--types
+					- for(let i = 0; i < data.n; i++)
+						- let c = data.types[i];
+						article.tile.ftyp.ini--bg(class=`${c.name}` style=`--col: ${c.col}`)
+							header
+								svg.ico: use(xlink:href='#f0')
+								h3 #{c.name}
+								nav.ctrl
+									button.sec--fg(aria-haspopup='true' aria-expanded='false' aria-controls=`pop-opts-${c.name}`) #{c.name} options
+									form.popup.sec--bg.dummy(id=`pop-opts-${c.name}`) here you'd have some options to do some stuff
+							.info
+								.info__num.sec--fg #{c.num}
+								.info__rel #{c.rel}
+								meter.sec--bg(max='100' value=c.rel)
+		//.view.view--favs.sec--bg
+			header
\ No newline at end of file
diff --git a/file-manager-app-with-accessible-dark-light-mode-switch/src/script.babel b/file-manager-app-with-accessible-dark-light-mode-switch/src/script.babel
new file mode 100644
index 0000000..c989dc1
--- /dev/null
+++ b/file-manager-app-with-accessible-dark-light-mode-switch/src/script.babel
@@ -0,0 +1,23 @@
+/* no library, this is all the JS needed for accessible interaction */
+const _BODY = document.body;
+
+addEventListener('change', e => {
+	let _t = e.target;
+	
+	switch(_t.type) {
+		case 'radio':
+			_BODY.style.setProperty(`--${_t.name}`, +_t.value);
+			break
+	}
+}, false);
+
+addEventListener('click', e => {
+	let _t = e.target, 
+			_ae = document.querySelector('[aria-expanded=true]');
+	
+	if(_ae) _ae.setAttribute('aria-expanded', 'false');
+	if(_t !== _ae) {
+		if(_t.hasAttribute('aria-haspopup'))
+			_t.setAttribute('aria-expanded', 'true')
+	}
+}, false);
\ No newline at end of file
diff --git a/file-manager-app-with-accessible-dark-light-mode-switch/src/style.scss b/file-manager-app-with-accessible-dark-light-mode-switch/src/style.scss
new file mode 100644
index 0000000..90192da
--- /dev/null
+++ b/file-manager-app-with-accessible-dark-light-mode-switch/src/style.scss
@@ -0,0 +1,358 @@
+$w: 26em;
+
+$ctrl-dm: .875em;
+
+$tile-sp: 1em;
+$icon-dl: 5em;
+
+$sec-bg: #171721 #f1f5fe;
+$ini-bg: #2c2c34 #fcfcfc;
+$ini-fg: #fefefe #262626;
+$sec-fg: #9d9d9d;
+
+$meter0: #1fbfa8 #41aa1a;
+$meter1: #0c1d1b #f8fdf6;
+
+$radius: .75em;
+$offset: .5em;
+
+@function mixx($c, $k, $j) {
+	$c0: nth($c, 1);
+	$c1: nth($c, 2);
+	$r0: red($c0);
+	$g0: green($c0);
+	$b0: blue($c0);
+	$r1: red($c1);
+	$g1: green($c1);
+	$b1: blue($c1);
+	
+	@return rgb(calc(#{$j}*#{$r0} + #{$k}*#{$r1}), 
+							calc(#{$j}*#{$g0} + #{$k}*#{$g1}), 
+							calc(#{$j}*#{$b0} + #{$k}*#{$b1}))
+}
+
+* {
+	box-sizing: inherit;
+	margin: 0;
+	border: none;
+	padding: 0;
+	list-style: none;
+	background: transparent;
+	color: inherit;
+	font:inherit
+}
+
+.ini--bg { background: mixx($ini-bg, var(--mode), var(--not-mode)) }
+
+.sec--bg { background: mixx($sec-bg, var(--mode), var(--not-mode)) }
+
+.ini--fg { color: mixx($ini-fg, var(--mode), var(--not-mode)) }
+
+.sec--fg { color: $sec-fg }
+
+nav { position: relative }
+
+button {
+	padding: .375em;
+	width: $ctrl-dm; height: $ctrl-dm;
+	border-radius: 50%;
+	
+	&:focus {
+		outline: none;
+		box-shadow: inset 0 0 0 2px
+	}
+}
+
+[aria-haspopup] {
+	overflow: hidden;
+	background: 
+		radial-gradient(circle, currentcolor 38%, transparent calc(38% + 1px)) 
+			50%/ 26% 26% no-repeat space content-box;
+	text-indent: 100vmax;
+	white-space: nowrap;
+	cursor: pointer
+}
+
+.popup {
+	--exp: 0;
+	--not-exp: calc(1 - var(--exp));
+	position: absolute;
+	top: 100%; right: 0;
+	padding: .25em;
+	min-width: .35*$w;
+	border-radius: 5px;
+	transform-origin: 100% 0;
+	transform: perspective(5em) 
+		rotatex(calc(var(--not-exp)*-90deg)) scale(var(--exp));
+	box-shadow: 0 0 5px hsla(0, 0%, 0%, .5);
+	transition: transform .3s;
+	
+	[aria-expanded='true'] + & { --exp: 1 }
+}
+
+.dummy {
+	font-family: purisa, segoe script, comic sans ms, cursive;
+	text-align: center
+}
+
+[type='radio'] {
+	position: absolute;
+	opacity: 0;
+	clip-path: inset(50%)
+}
+
+meter {
+	-moz-appearance: none;
+	width: 100%; height: .5em;
+	border-radius: .5em;
+	--c0: #{mixx($meter0, var(--mode), var(--not-mode))};
+	--c1: #{mixx($meter1, var(--mode), var(--not-mode))};
+	
+	&::-webkit-meter-bar {
+		border: none;
+		height: .375em;
+		background: transparent
+	}
+	
+	&::-webkit-meter-optimum-value {
+		border-radius: .375em;
+		background: linear-gradient(90deg, var(--c0) 85%, var(--c1))
+	}
+	
+	&::-moz-meter-bar {
+		height: .375em;
+		border-radius: .375em;
+		background: linear-gradient(90deg, var(--c0) 85%, var(--c1))
+	}
+}
+
+body {
+	--not-mode: calc(1 - var(--mode));
+	display: grid;
+	place-content: center;
+	min-height: 100vh;
+	font: 1em/ 1.5 roboto, sans-serif
+}
+
+#app {
+	display: grid;
+	overflow: hidden;
+	border-radius: 2*$tile-sp;
+	width: $w
+}
+
+.view {
+	grid-area: 1/ 1;
+	
+	&--favs { transform: translate(100%) }
+	
+	> header {
+		z-index: 2;
+		padding: $tile-sp;
+		
+		nav {
+			display: grid;
+			grid-template: max-content/ repeat(2, max-content);
+			justify-content: space-between
+		}
+		
+		button {
+			color: #fff;
+			filter: Invert(var(--mode))
+		}
+	}
+}
+
+.main { z-index: 1 }
+
+.wrap {
+	display: grid;
+	padding: $tile-sp;
+	
+	&--mode {
+		overflow: hidden;
+		padding: 0;
+		
+		label {
+			grid-area: 1/ 1;
+			padding: .25em;
+			transform: translate(calc((1 - var(--idx) - var(--mode))*100%));
+			transition: transform .3s;
+			cursor: pointer
+		}
+	}
+	
+	&--types {
+		grid-gap: $tile-sp;
+		
+		.view--main & {
+			grid-template-columns: 1fr 1fr
+		}
+		
+		.view--favs & {
+			grid-auto-flow: column
+		}
+	}
+}
+
+.slide {
+	--ll: #{mixx(#49494b #e6e6e6, var(--mode), var(--not-mode))};
+	--hl: #{mixx($ini-bg, var(--mode), var(--not-mode))};
+	display: grid;
+	grid-gap: .75em 0;
+	grid-template-columns: 1fr 1fr;
+	grid-area: 1/ 1;
+	padding: .5*$tile-sp;
+	border-radius: $tile-sp;
+	
+	> :not(.chart) {
+		--size: calc(2*(#{$radius} + 2px));
+		display: grid;
+		background-size: var(--size) var(--size);
+		
+		&::before, &::after { grid-column: 2 }
+		
+		&::before {
+			color: $sec-fg;
+			text-transform: capitalize;
+			content: attr(class) ' space'
+		}
+		
+		&::after {
+			font-size: 1.75em;
+			font-weight: 900;
+			content: counter(val) 'GB'
+		}
+	}
+}
+
+.chart {
+	grid-column: 1/ -1;
+	place-self: center;
+	overflow: hidden;
+	position: relative;
+	padding: 27.5%;
+	border-radius: 50%;
+	box-shadow: inset 0 0 1px 2em var(--ll);
+	
+	&::before, &::after, .arc {		
+		position: absolute;
+		right: 0; left: 0;
+		line-height: 1.125;
+		text-align: center
+	}
+	
+	&::before {
+		bottom: 50%;
+		font-size: 2.125em;
+		font-weight: 700;
+		counter-reset: perc var(--perc);
+		content: counter(perc) '%'
+	}
+	
+	&::after { content: 'Used' }
+}
+
+.arc {
+	--a: calc(var(--rel)*360deg);
+	display: grid;
+	top: 0; bottom: 0;
+	transform: rotate(calc((var(--cum) - var(--rel))*360deg));
+	background: 
+		conic-gradient(var(--col) var(--a), transparent 0%);
+	--mask: 
+		radial-gradient(closest-side, 
+				transparent calc(100% - 2em - 1px), red calc(100% - 2em));
+	-webkit-mask: var(--mask);
+					mask: var(--mask);
+	
+	&::before, &::after {
+		grid-area: 1/ 1;
+		border-radius: 50%;
+		background: 
+			radial-gradient(circle at 50% 1em, 
+					var(--col) 1em, transparent calc(1em + 1px));
+		content: ''
+	}
+	
+	&::after { transform: rotate(var(--a)) }
+}
+
+.total {
+	grid-template-columns: 2*($radius + $offset) 1fr;
+	background: 
+		radial-gradient(circle, 
+				var(--ll) calc(#{$radius} - 1px), transparent $radius) 
+			left $offset bottom $offset no-repeat;
+	counter-reset: val var(--ssum)
+}
+
+.used {
+	grid-template-columns: 5*$radius + 2*$offset 1fr;
+	background: 
+		radial-gradient(circle, 
+				var(--col3) calc(#{$radius} - 1px), 
+				var(--hl) $radius calc(#{$radius} + 1px), 
+				transparent calc(#{$radius} + 2px)) 
+			left $offset bottom $offset, 
+		radial-gradient(circle, 
+				var(--col2) calc(#{$radius} - 1px), 
+				var(--hl) $radius calc(#{$radius} + 1px), 
+				transparent calc(#{$radius} + 2px)) 
+			left $offset + $radius bottom $offset, 
+		radial-gradient(circle, 
+				var(--col1) calc(#{$radius} - 1px), 
+				var(--hl) $radius calc(#{$radius} + 1px), 
+				transparent calc(#{$radius} + 2px)) 
+			left $offset + 2*$radius bottom $offset, 
+		radial-gradient(circle, 
+				var(--col0) calc(#{$radius} - 1px), 
+				var(--hl) $radius calc(#{$radius} + 1px), 
+				transparent calc(#{$radius} + 2px)) 
+			left $offset + 3*$radius bottom $offset;
+	background-repeat: no-repeat;
+	counter-reset: val var(--used)
+}
+
+.tile {
+	padding: .5*$tile-sp;
+	border-radius: $tile-sp;
+	background: mixx($ini-bg, var(--mode), var(--not-mode));
+	
+	header {
+		display: grid;
+		grid-template-columns: 1fr max-content;
+		z-index: 2
+	}
+	
+	h3 {
+		font-size: 1.375em;
+		font-weight: 500;
+		text-transform: capitalize
+	}
+	
+	nav {
+		place-self: start;
+		grid-area: 1/ 2
+	}
+}
+
+.ico {
+	margin: -.5*$tile-sp;
+	width: $icon-dl; height: $icon-dl;
+	color: var(--col)
+}
+
+.info {
+	&__num {
+		padding-bottom: .5em;
+		
+		&::after { content: ' Files' }
+	}
+	
+	&__rel {
+		font-weight: 500;
+		
+		&::after { content: '%' }
+	}
+}
\ No newline at end of file
diff --git a/firefly-flow/README.markdown b/firefly-flow/README.markdown
new file mode 100644
index 0000000..9a6c052
--- /dev/null
+++ b/firefly-flow/README.markdown
@@ -0,0 +1,5 @@
+# Firefly flow
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shubniggurath/pen/dyNLREq](https://codepen.io/shubniggurath/pen/dyNLREq).
+
+
diff --git a/firefly-flow/dist/index.html b/firefly-flow/dist/index.html
new file mode 100644
index 0000000..ce2cdeb
--- /dev/null
+++ b/firefly-flow/dist/index.html
@@ -0,0 +1,370 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Firefly flow</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script id="vertexShader_particle" type="x-shader/x-vertex">
+  attribute vec4 a_position;
+  attribute vec3 a_colour;
+  attribute vec2 a_reference;
+  
+  uniform vec2 u_resolution;
+  
+  uniform sampler2D b_velocity;
+  uniform sampler2D b_position;
+  uniform sampler2D b_blur;
+  
+  varying vec3 v_colour;
+  varying float v_fogDepth;
+  
+  float rand(vec2 n) { 
+    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+  }
+  
+  vec3 hsv2rgb(vec3 c) {
+    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+  }
+  
+  void main() {
+    vec2 position = texture2D(b_position, a_reference).xy;
+    vec2 velocity = texture2D(b_velocity, a_reference).xy;
+    float size = texture2D(b_blur, position).r;
+    
+    vec4 pos = vec4(position / u_resolution * 2. - 1., 0., 1.);
+    
+    gl_Position = pos;
+    gl_PointSize = 2.+size*.02;
+    v_colour = vec3(1);
+  }
+</script>
+<script id="vertexShader_buffer" type="x-shader/x-vertex">attribute vec4 a_position;  
+  uniform mat4 u_modelViewMatrix;
+  uniform mat4 u_projectionMatrix;
+  
+  void main() {
+    gl_Position = a_position;
+  }
+</script>
+<script id="fragmentShader_velocity" type="x-shader/x-fragment">
+  #extension GL_OES_standard_derivatives : enable
+  precision highp float;
+  
+  #define PI 3.141592653589793
+  #define HPI 1.5707963267948966
+  #define TAU 6.283185307179586
+  #define G 0.67408
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D s_noise;
+  
+  uniform sampler2D b_velocity;
+  uniform sampler2D b_position;
+  
+  //	Simplex 3D Noise 
+  //	by Ian McEwan, Ashima Arts
+  //
+  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
+  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
+  
+  float rand(float n){return fract(sin(n) * 43758.5453123);}
+  float rand(vec2 n) { 
+    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+  }
+  float snoise(vec3 v){ 
+    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  // First corner
+    vec3 i  = floor(v + dot(v, C.yyy) );
+    vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+  // Other corners
+    vec3 g = step(x0.yzx, x0.xyz);
+    vec3 l = 1.0 - g;
+    vec3 i1 = min( g.xyz, l.zxy );
+    vec3 i2 = max( g.xyz, l.zxy );
+
+    //  x0 = x0 - 0. + 0.0 * C 
+    vec3 x1 = x0 - i1 + 1.0 * C.xxx;
+    vec3 x2 = x0 - i2 + 2.0 * C.xxx;
+    vec3 x3 = x0 - 1. + 3.0 * C.xxx;
+
+  // Permutations
+    i = mod(i, 289.0 ); 
+    vec4 p = permute( permute( permute( 
+               i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+             + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
+             + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+  // Gradients
+  // ( N*N points uniformly over a square, mapped onto an octahedron.)
+    float n_ = 1.0/7.0; // N=7
+    vec3  ns = n_ * D.wyz - D.xzx;
+
+    vec4 j = p - 49.0 * floor(p * ns.z *ns.z);  //  mod(p,N*N)
+
+    vec4 x_ = floor(j * ns.z);
+    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+    vec4 x = x_ *ns.x + ns.yyyy;
+    vec4 y = y_ *ns.x + ns.yyyy;
+    vec4 h = 1.0 - abs(x) - abs(y);
+
+    vec4 b0 = vec4( x.xy, y.xy );
+    vec4 b1 = vec4( x.zw, y.zw );
+
+    vec4 s0 = floor(b0)*2.0 + 1.0;
+    vec4 s1 = floor(b1)*2.0 + 1.0;
+    vec4 sh = -step(h, vec4(0.0));
+
+    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+    vec3 p0 = vec3(a0.xy,h.x);
+    vec3 p1 = vec3(a0.zw,h.y);
+    vec3 p2 = vec3(a1.xy,h.z);
+    vec3 p3 = vec3(a1.zw,h.w);
+
+  //Normalise gradients
+    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+    p0 *= norm.x;
+    p1 *= norm.y;
+    p2 *= norm.z;
+    p3 *= norm.w;
+
+  // Mix final noise value
+    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+    m = m * m;
+    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
+                                  dot(p2,x2), dot(p3,x3) ) );
+  }
+  
+  float noise21(vec2 n) {
+    const vec2 d = vec2(0.0, 1.0);
+    vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
+    return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
+  }
+  
+  void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    vec2 position = texture2D(b_position, uv).xy;
+    vec2 velocity = texture2D(b_velocity, uv).xy;
+    
+    float n = snoise(vec3(position*.002, u_time - floor(u_time) * 20.)) * 3.14159;
+    n = snoise(vec3((position+n)*.002, n));
+    
+    float a = n * (3.14159 * 2.) + noise21(position)*7.;
+    
+    float c = cos(a);
+    float s = sin(a);
+    
+    velocity = velocity + vec2(c, s) * .1;
+    
+    if(length(velocity) > 1.) velocity = normalize(velocity)*1.;
+    
+    gl_FragColor = vec4(velocity, 0., 1.0);
+  }
+</script>
+<script id="fragmentShader_position" type="x-shader/x-fragment">
+  #extension GL_OES_standard_derivatives : enable
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D s_noise;
+  uniform vec2 u_screen;
+  
+  uniform sampler2D b_velocity;
+  uniform sampler2D b_position;
+
+  void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    vec2 position = texture2D(b_position, uv).xy;
+    vec2 velocity = texture2D(b_velocity, uv).xy;
+    
+    vec2 pos = position+velocity*.99;
+    if(pos.x > u_screen.x + 20.) pos.x = -10.;
+    else if(pos.x < -20.) pos.x = u_screen.x + 10.;
+    if(pos.y > u_screen.y + 20.) pos.y = -10.;
+    else if(pos.y < -20.) pos.y = u_screen.y + 10.;
+    
+    gl_FragColor = vec4(pos, 0., 1.0);
+  }
+</script>
+<script id="fragmentShader_particle" type="x-shader/x-fragment">
+  #extension GL_OES_standard_derivatives : enable
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D s_noise;
+  
+  uniform sampler2D b_prime;
+  uniform sampler2D b_position;
+  
+  varying vec3 v_colour;
+  varying float v_fogDepth;
+  
+  vec2 getScreenSpace() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    return uv;
+  }
+
+  void main() {
+    vec2 uv = gl_PointCoord.xy - .5;
+    vec2 s = gl_FragCoord.xy / u_resolution.xy;
+    
+    gl_FragColor = vec4(0, 0, 0, 1);
+    
+    float l = length(uv);
+    float c = smoothstep(.5, 0., l);
+    float fog = smoothstep(-200., -1., v_fogDepth);
+    float opacity = c * fog;
+    
+    gl_FragColor = vec4(v_colour, opacity);
+  }
+  
+</script>
+<script id="fragmentShader_blur" type="x-shader/x-fragment">
+  #extension GL_OES_standard_derivatives : enable
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D s_noise;
+  
+  uniform sampler2D b_prime;
+  uniform sampler2D b_blur;
+  
+  varying vec3 v_colour;
+  
+  const float blurMultiplier = 0.985;
+  const float blurStrength = .3;
+  const int samples = 6;
+  const float sigma = float(samples) * 0.25;
+  
+  #define PI 3.141592653589793
+  #define TAU 6.283185307179586
+  #define pow2(x) (x * x)
+  
+  vec2 getScreenSpace() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    return uv;
+  }
+  
+  float gaussian(vec2 i) {
+    return 1.0 / (2.0 * PI * pow2(sigma)) * exp(-((pow2(i.x) + pow2(i.y)) / (2.0 * pow2(sigma))));
+  }
+  vec4 blur(sampler2D sp, vec2 uv, vec2 scale) {
+      vec4 col = vec4(0.0);
+      float accum = 0.0;
+      float weight;
+      vec2 offset;
+
+      for (int x = -samples / 2; x < samples / 2; ++x) {
+          for (int y = -samples / 2; y < samples / 2; ++y) {
+              offset = vec2(x, y);
+              weight = gaussian(offset);
+              col += texture2D(sp, uv + scale * offset) * weight;
+              accum += weight;
+          }
+      }
+
+      return col / accum;
+  }
+
+  void main() {
+    vec2 s = gl_FragCoord.xy / u_resolution;
+    
+    vec2 ps = vec2(1.0) / u_resolution.xy;
+    
+    vec4 p = texture2D(b_prime, s);
+    vec4 b = blur(b_blur, s, ps*blurStrength);
+    
+    vec4 opt = b * blurMultiplier + p;
+
+    gl_FragColor = opt;
+  }
+  
+</script>
+<script id="fragmentShader_output" type="x-shader/x-fragment">
+  #extension GL_OES_standard_derivatives : enable
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D s_noise;
+  
+  uniform sampler2D b_prime;
+  uniform sampler2D b_blur;
+  
+  varying vec3 v_colour;
+  
+  vec2 getScreenSpace() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    return uv;
+  }
+  
+  const int samples = 8;
+  const float sigma = float(samples) * 0.25;
+  
+  #define PI 3.141592653589793
+  #define TAU 6.283185307179586
+  #define pow2(x) (x * x)
+  
+  float gaussian(vec2 i) {
+    return 1.0 / (2.0 * PI * pow2(sigma)) * exp(-((pow2(i.x) + pow2(i.y)) / (2.0 * pow2(sigma))));
+  }
+  vec4 blur(sampler2D sp, vec2 uv, vec2 scale) {
+      vec4 col = vec4(0.0);
+      float accum = 0.0;
+      float weight;
+      vec2 offset;
+
+      for (int x = -samples / 2; x < samples / 2; ++x) {
+          for (int y = -samples / 2; y < samples / 2; ++y) {
+              offset = vec2(x, y);
+              weight = gaussian(offset);
+              col += texture2D(sp, uv + scale * offset) * weight;
+              accum += weight;
+          }
+      }
+
+      return col / accum;
+  }
+
+  void main() {
+    vec2 s = gl_FragCoord.xy / u_resolution;
+    
+    vec4 p = texture2D(b_prime, s);
+    vec4 b = texture2D(b_blur, s);
+    b.a = clamp(b.a*.001, 0., 1.);
+    p = blur(b_prime, s, (vec2(1)/u_resolution)*.5)*(b.a+.2);
+    vec4 opt = mix(b, p, p.a);
+    
+    gl_FragColor = vec4(mix(vec3(0.05,.1,.1), opt.rgb, opt.a), 1.);
+    // gl_FragColor = opt;
+  }
+  
+</script>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/firefly-flow/dist/script.js b/firefly-flow/dist/script.js
new file mode 100644
index 0000000..756165f
--- /dev/null
+++ b/firefly-flow/dist/script.js
@@ -0,0 +1,1171 @@
+function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}function _classPrivateFieldSet(receiver, privateMap, value) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to set private field on non-instance");}if (descriptor.set) {descriptor.set.call(receiver, value);} else {if (!descriptor.writable) {throw new TypeError("attempted to set read only private field");}descriptor.value = value;}return value;}function _classPrivateFieldGet(receiver, privateMap) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to get private field on non-instance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}function _classStaticPrivateFieldSpecGet(receiver, classConstructor, descriptor) {if (receiver !== classConstructor) {throw new TypeError("Private static access of wrong provenance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}import { Vec2, Vec3, Mat2, Mat3, Mat4, Quat } from 'https://cdn.skypack.dev/wtc-math';
+
+import gifJs from 'https://cdn.skypack.dev/gif.js';
+
+console.clear();
+
+const setup = function () {
+  // Simulation dimensions
+  const px = Math.min(window.devicePixelRatio, 2);
+  const dimensions = [window.innerWidth, window.innerHeight];
+  const texturesize = 128;
+  const particles = Math.pow(texturesize, 2);
+  const textureArraySize = particles * 4;
+
+  const canvas = document.createElement('canvas');
+  document.body.appendChild(canvas);
+
+  const renderer = new Renderer(canvas, { width: dimensions[0], height: dimensions[1], alpha: true, premultipliedAlpha: false, preserveDrawingBuffer: true });
+  const ctx = renderer.ctx;
+
+  let drawing = new Float32Array([-1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0]);
+  const ants = new Float32Array(particles * 2).fill(0);
+  const references = new Float32Array(particles * 2).fill(0);
+  const positionData = new Float32Array(particles * 4).fill(0);
+  const velocityData = new Float32Array(particles * 4).fill(0);
+  for (let i = 0; i < ants.length; i += 2) {
+    const index = i / 2;
+    const tindex = i * 2;
+
+    ants[i] = index % texturesize; // x position
+    ants[i + 1] = Math.floor(index / texturesize); // y position
+
+    references[i] = ants[i] / texturesize; // x position of the texture particle representing this ant
+    references[i + 1] = ants[i + 1] / texturesize; // y position of the texture particle representing this ant
+
+    positionData[tindex] = Math.random() * (window.innerWidth * px + 40);
+    positionData[tindex + 1] = Math.random() * (window.innerHeight * px + 40);
+    positionData[tindex + 2] = 0;
+    positionData[tindex + 3] = 1;
+
+    velocityData[tindex] = Math.random() - .5;
+    velocityData[tindex + 1] = Math.random() - .5;
+    velocityData[tindex + 2] = 0;
+    velocityData[tindex + 3] = 1;
+  }
+  // for (let i = 0; i < textureArraySize; i += 4) {
+  //   positionData[i] = Math.random();
+  //   positionData[i + 1] = Math.random();
+  //   positionData[i + 2] = 0;
+  //   positionData[i + 3] = 1;
+  // }
+
+  const positionBuffer = new FrameBuffer(renderer, 'position', {
+    width: texturesize,
+    height: texturesize,
+    tiling: Texture.IMAGETYPE_TILE,
+    texdepth: FrameBuffer.TEXTYPE_FLOAT,
+    pxRatio: 1,
+    data: positionData });
+
+  const velocityBuffer = new FrameBuffer(renderer, 'velocity', {
+    width: texturesize,
+    height: texturesize,
+    tiling: Texture.IMAGETYPE_TILE,
+    texdepth: FrameBuffer.TEXTYPE_FLOAT,
+    pxRatio: 1,
+    data: velocityData });
+
+  const blurBuffer = new FrameBuffer(renderer, 'blur', {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    tiling: Texture.IMAGETYPE_REGULAR,
+    texdepth: FrameBuffer.TEXTYPE_FLOAT,
+    pxRatio: Math.min(window.devicePixelRatio, 2) });
+
+  const primaryBuffer = new FrameBuffer(renderer, 'prime', {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    tiling: Texture.IMAGETYPE_REGULAR,
+    pxRatio: Math.min(window.devicePixelRatio, 2) });
+
+
+  const drawBuffer = new Buffer(ctx, drawing);
+  const antBuffer = new Buffer(ctx, ants, {
+    attributes: [{
+      name: 'ants',
+      numComponents: 2 }] });
+
+
+  const referenceBuffer = new Buffer(ctx, references, {
+    attributes: [{
+      name: 'reference',
+      numComponents: 2 }] });
+
+
+
+  const vertexShader_buffer = document.getElementById('vertexShader_buffer').innerText;
+  const vertexShader_particle = document.getElementById('vertexShader_particle').innerText;
+
+  const programPosition = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_position').innerText, {
+    renderType: Program.RENDER_STRIP });
+  const programVelocity = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_velocity').innerText, {
+    renderType: Program.RENDER_STRIP });
+  const programBlur = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_blur').innerText, {
+    renderType: Program.RENDER_STRIP });
+  const programMain = new Program(ctx, vertexShader_particle, document.getElementById('fragmentShader_particle').innerText, {
+    // clearColour: [.15,.1,.05, 1.], 
+    clearColour: [.9, .9, .9, 0.],
+    renderType: Program.RENDER_POINTS,
+    blending: Renderer.BLENDING_NORMAL,
+    depthTesting: false,
+    transparent: false,
+    premultiplied: false });
+
+  const programOutput = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_output').innerText, {
+    clearColour: [.0, .0, .0, 1.],
+    renderType: Program.RENDER_STRIP });
+
+  const time = new Uniform(ctx, 'time', Uniform.TYPE_FLOAT, 100);
+  const uDelta = new Uniform(ctx, 'delta', Uniform.TYPE_FLOAT, 100);
+  const mouse = new Uniform(ctx, 'mouse', Uniform.TYPE_V2, [0., 0.]);
+  const screen = new Uniform(ctx, 'screen', Uniform.TYPE_V2, [window.innerWidth * px, window.innerHeight * px]);
+
+  const noise = new Texture(ctx, 'noise', {
+    textureType: Texture.IMAGETYPE_TILE,
+    url: 'https://assets.codepen.io/982762/noise.png' });
+
+
+  noise.preload().then(n => {
+    requestAnimationFrame(run);
+  });
+
+  let pointerdown = false;
+  let lastPos = new Vec2();
+  window.addEventListener('pointerdown', e => {
+    pointerdown = true;
+    lastPos = new Vec2(e.x, e.y);
+  });
+  window.addEventListener('pointerup', e => {
+    pointerdown = false;
+  });
+  window.addEventListener('pointermove', e => {
+    if (pointerdown) {
+      let newPos = new Vec2(e.x, e.y);
+      mouse.value = newPos.array;
+    }
+  });
+
+  let playing = true;
+  const setPlaying = value => {
+    playing = value;
+  };
+
+  let autoTransitionTimer = 0;
+  let timeToTransition = 0;
+  const setupValues = i => {
+    dimensions[0] = window.innerWidth;
+    dimensions[1] = window.innerHeight;
+
+    time.value = -10000;
+  };
+
+  setupValues(0);
+
+  let timeout;
+  window.addEventListener('resize', () => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      dimensions[0] = window.innerWidth;
+      dimensions[1] = window.innerHeight;
+      renderer.resize(dimensions[0], dimensions[1]);
+      blurBuffer.resize(dimensions[0], dimensions[1]);
+      primaryBuffer.resize(dimensions[0], dimensions[1]);
+      screen.value = [dimensions[0] * px, dimensions[1] * px];
+    }, 100);
+  });
+
+  let then = 0;
+  const run = delta => {
+
+    let now = Date.now() / 1000;
+    let _delta = now - then;
+    then = now;
+
+    if (_delta > 1000) {
+      requestAnimationFrame(run);
+      return;
+    }
+
+    if (playing) {
+      uDelta.value = Math.min(_delta, 0.5);
+      time.value += _delta * .05;
+
+      renderer.setViewport([velocityBuffer.width, velocityBuffer.height]);
+      // window.renderer = renderer;
+      // console.log(renderer.uniformResolution.value)
+      renderer.setupProgram(programVelocity, [drawBuffer], [], [time, mouse, velocityBuffer, positionBuffer, uDelta, screen]);
+      velocityBuffer.render(4);
+
+      renderer.setupProgram(programPosition, [drawBuffer], [], [time, mouse, velocityBuffer, positionBuffer, uDelta, screen]);
+      positionBuffer.render(4);
+
+      renderer.setViewport();
+      renderer.setupProgram(programMain, [referenceBuffer], [], [time, mouse, velocityBuffer, positionBuffer, screen, blurBuffer]);
+      primaryBuffer.render(particles);
+
+      renderer.setViewport();
+      renderer.setupProgram(programBlur, [drawBuffer], [], [time, primaryBuffer]);
+      blurBuffer.render(4);
+
+      renderer.setViewport();
+      renderer.setupProgram(programOutput, [drawBuffer], [], [time, primaryBuffer, blurBuffer]);
+      renderer.render(4);
+
+      requestAnimationFrame(run);
+    }
+  };
+};
+
+// Determine whether a number is a power of 2
+function powerOf2(v) {
+  return v && !(v & v - 1);
+}
+// Return the next greatest power of 2
+function nextPow2(v) {
+  v--;
+  v |= v >> 1;
+  v |= v >> 2;
+  v |= v >> 4;
+  v |= v >> 8;
+  v |= v >> 16;
+  v++;
+  return v;
+}
+// Update a provided image to the nearest power of 2 in size.
+const pow2Image = c => {
+  const newWidth = powerOf2(c.width) ? c.width : nextPow2(c.width);
+  const newHeight = powerOf2(c.height) ? c.height : nextPow2(c.height);
+  const _c = document.createElement('canvas');
+  const ctx = _c.getContext('2d');
+  _c.width = newWidth;
+  _c.height = newHeight;
+  ctx.drawImage(c, 0, 0, newWidth, newHeight);
+  return _c;
+};
+const asyncImageLoad = function (img, src) {
+  return new Promise((resolve, reject) => {
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+};
+const glEnumToString = function () {
+  const haveEnumsForType = {};
+  const enums = {};
+
+  function addEnums(gl) {
+    const type = gl.constructor.name;
+    if (!haveEnumsForType[type]) {
+      for (const key in gl) {
+        if (typeof gl[key] === 'number') {
+          const existing = enums[gl[key]];
+          enums[gl[key]] = existing ? `${existing} | ${key}` : key;
+        }
+      }
+      haveEnumsForType[type] = true;
+    }
+  }
+
+  return function glEnumToString(gl, value) {
+    addEnums(gl);
+    return enums[value] || (typeof value === 'number' ? `0x${value.toString(16)}` : value);
+  };
+}();
+const addExtensions = ctx => {
+  // Set up the extensions
+  ctx.getExtension('OES_standard_derivatives');
+  ctx.getExtension('EXT_shader_texture_lod');
+  ctx.getExtension('OES_texture_float');
+  ctx.getExtension('WEBGL_color_buffer_float');
+  ctx.getExtension('OES_texture_float_linear');
+  ctx.getExtension('EXT_color_buffer_float');
+};
+function createContext(c, opt_attribs, params) {
+  const ctx = c.getContext("webgl", params) || this._el.getContext("experimental-webgl", params);
+
+  addExtensions(ctx);
+
+  return ctx;
+}
+
+const quatToMat4 = q => {
+  if (q.array) q = q.array; // This just transforms a provided vector into to an array.
+
+  if (q instanceof Array && q.length >= 4) {
+    const [x, y, z, w] = q;
+    const [x2, y2, z2] = q.map(x => x * 2.);
+
+    const xx = x * x2,
+    yx = y * x2,
+    yy = y * y2,
+    zx = z * x2,
+    zy = z * y2,
+    zz = z * z2,
+    wx = w * x2,
+    wy = w * y2,
+    wz = w * z2;
+
+    return new Mat4(
+    1 - yy - zz, yx - wz, zx + wy, 0,
+    yx + wz, 1 - xx - zz, zy - wx, 0,
+    zx - wy, zy + wx, 1 - xx - yy, 0,
+    0, 0, 0, 1);
+
+  }
+};var _blending = new WeakMap();var _blendingEnabled = new WeakMap();var _buffers = new WeakMap();
+
+class Renderer {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(canvas, options) {_defineProperty(this, "isWebgl2", false);_blending.set(this, { writable: true, value: void 0 });_blendingEnabled.set(this, { writable: true, value: false });_buffers.set(this, { writable: true, value: [] });
+    options = Object.assign({}, _classStaticPrivateFieldSpecGet(Renderer, Renderer, _defaultOptions), options);
+    this.width = options.width;
+    this.height = options.height;
+    this.pxRatio = options.pxRatio;
+    this.clearing = options.clearing;
+    this.depthTesting = options.depthTesting;
+    this.canvas = canvas || document.createElement('canvas');
+    this.canvas.width = this.width * this.pxRatio;
+    this.canvas.height = this.height * this.pxRatio;
+    this.premultipliedAlpha = options.premultipliedAlpha;
+
+    this.ctx = this.canvas.getContext("webgl", options) || this.canvas.getContext("experimental-webgl", options);
+
+    this.ctx.viewportWidth = this.canvas.width;
+    this.ctx.viewportHeight = this.canvas.height;
+
+    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [this.canvas.width, this.canvas.height]);
+
+    this.addExtensions();
+  }
+  resize(w, h, ratio) {
+    this.width = w;
+    this.height = h;
+    this.pxRatio = ratio || this.pxRatio;
+    this.canvas.width = this.width * this.pxRatio;
+    this.canvas.height = this.height * this.pxRatio;
+
+    this.ctx.viewportWidth = this.canvas.width;
+    this.ctx.viewportHeight = this.canvas.height;
+
+    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [this.canvas.width, this.canvas.height]);
+  }
+  setViewport(dimensions) {
+    let w = this.width * this.pxRatio;
+    let h = this.height * this.pxRatio;
+    if (dimensions) {
+      w = dimensions[0];
+      h = dimensions[1];
+    }
+    this.ctx.viewport(0, 0, w, h);
+    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [w, h]);
+  }
+  addExtensions() {
+    this.ctx.getExtension('OES_standard_derivatives');
+    this.ctx.getExtension('EXT_shader_texture_lod');
+    this.ctx.getExtension('OES_texture_float');
+    this.ctx.getExtension('WEBGL_color_buffer_float');
+    this.ctx.getExtension('OES_texture_float_linear');
+    this.ctx.getExtension('EXT_color_buffer_float');
+  }
+  linkBuffer(buffer) {
+    let hasBuffer = false;
+    _classPrivateFieldGet(this, _buffers).forEach(b => {
+      if (buffer === b) hasBuffer = true;
+    });
+    if (!hasBuffer) {
+      this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, buffer.buffer);
+      this.ctx.bufferData(
+      this.ctx.ARRAY_BUFFER,
+      buffer.data,
+      buffer.drawType);
+    }
+    buffer.link(this.currentProgram.program);
+  }
+  setupProgram(program, buffers, attributes, uniforms) {
+    this.currentProgram = program;
+    this.ctx.useProgram(program.program);
+
+    this.premultiplied = program.premultiplied;
+
+    this.depthTesting = program.depthTesting;
+
+
+    if (program.blending === Program.BLENDING_NORMAL && program.transparent === false) {
+      this.blending = Program.BLENDING_OFF;
+    } else {
+      this.blending = program.blending;
+    }
+
+    this.clearColour = program.clearColour;
+    const a = this.clearColour[3];
+    // console.log('prem', this.premultipliedAlpha)
+    if (this.premultipliedAlpha) this.clearColour = this.clearColour.map((c, i) => c * a);
+
+    this.ctx.clearColor(...this.clearColour);
+
+    // TODO: Unlink unused buffers during this setup phase as well.
+    buffers.forEach(buffer => {
+      this.linkBuffer(buffer);
+    });
+
+    // this.ctx.enable(ctx.DEPTH_TEST);
+    if (this.depthTesting) this.ctx.enable(this.ctx.DEPTH_TEST);else
+    this.ctx.disable(this.ctx.DEPTH_TEST);
+
+    uniforms.forEach(uniform => {
+      uniform.bind(program.program);
+    });
+    this.uniformResolution.bind(program.program);
+  }
+  render(points, buffer) {
+    this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, (buffer === null || buffer === void 0 ? void 0 : buffer.fb) || null);
+    if (this.clearing) {
+      this.ctx.clear(this.ctx.COLOR_BUFFER_BIT);
+
+      if (this.depthTesting) this.ctx.clear(this.ctx.DEPTH_BUFFER_BIT);
+    }
+    switch (this.currentProgram.renderType) {
+      case Program.RENDER_TRIANGLES:
+        this.ctx.drawArrays(this.ctx.TRIANGLES, 0, points);
+        break;
+      case Program.RENDER_STRIP:
+        this.ctx.drawArrays(this.ctx.TRIANGLE_STRIP, 0, points);
+        break;
+      case Program.RENDER_LINES:
+        this.ctx.drawArrays(this.ctx.LINE_STRIP, 0, points);
+        break;
+      case Program.RENDER_LINELOOP:
+        this.ctx.drawArrays(this.ctx.LINE_LOOP, 0, points);
+        break;
+      case Program.RENDER_POINTS:
+        this.ctx.drawArrays(this.ctx.POINTS, 0, points);
+        break;}
+
+
+  }
+
+  /* SETTERS AND GETTERS */
+  get blending() {
+    return _classPrivateFieldGet(this, _blending) || Program.BLENDING_NORMAL;
+  }
+  set blending(blending) {
+
+    if (blending === Renderer.BLENDING_DEBUG) {
+
+      if (!this.breakLog) {
+        console.log(blending, Renderer.BLENDING_OFF, this.premultiplied);
+        this.breakLog = true;
+      }
+      _classPrivateFieldSet(this, _blending, blending);
+      this.ctx.enable(this.ctx.BLEND);
+      this.ctx.blendFuncSeparate(this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA, this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA);
+      return;
+    }
+
+    _classPrivateFieldSet(this, _blending, blending);
+    if (blending === Renderer.BLENDING_OFF) {
+      this.ctx.disable(this.ctx.BLEND);
+      _classPrivateFieldSet(this, _blendingEnabled, false);
+      return;
+    }
+    if (_classPrivateFieldGet(this, _blendingEnabled) === false) {
+      this.ctx.enable(this.ctx.BLEND);
+      // this.ctx.alphaFunc(this.ctx.GL_GREATER, 0.5);
+      // this.ctx.enable(this.ctx.GL_ALPHA_TEST);
+      _classPrivateFieldSet(this, _blendingEnabled, true);
+    }
+
+    if (this.premultiplied) {
+      switch (this.blending) {
+        case Renderer.BLENDING_NORMAL:
+          this.ctx.blendFuncSeparate(this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA, this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA);
+          break;
+        case Renderer.BLENDING_ADDITIVE:
+          this.ctx.blendFunc(this.ctx.ONE, this.ctx.ONE);
+          break;
+        case Renderer.BLENDING_SUBTRACTIVE:
+          this.ctx.blendFuncSeparate(this.ctx.ZERO, this.ctx.ZERO, this.ctx.ONE_MINUS_SRC_COLOR, this.ctx.ONE_MINUS_SRC_ALPHA);
+          break;
+        case Renderer.BLENDING_MULTIPLY:
+          this.ctx.blendFuncSeparate(this.ctx.ZERO, this.ctx.SRC_COLOR, this.ctx.ZERO, this.ctx.SRC_ALPHA);
+          break;}
+
+    } else {
+      switch (this.blending) {
+        case Renderer.BLENDING_NORMAL:
+          this.ctx.blendFuncSeparate(this.ctx.SRC_ALPHA, this.ctx.ONE_MINUS_SRC_ALPHA, this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA);
+          break;
+        case Renderer.BLENDING_ADDITIVE:
+          this.ctx.blendFunc(this.ctx.SRC_ALPHA, this.ctx.ONE);
+          break;
+        case Renderer.BLENDING_SUBTRACTIVE:
+          this.ctx.blendFunc(this.ctx.ZERO, this.ctx.ONE_MINUS_SRC_COLOR);
+          break;
+        case Renderer.BLENDING_MULTIPLY:
+          this.ctx.blendFunc(this.ctx.ZERO, this.ctx.SRC_COLOR);
+          break;}
+
+    }
+  }}var _defaultOptions = { writable: true, value: { width: 512, height: 512, pxRatio: Math.min(window.devicePixelRatio, 2), clearing: true, depthTesting: true, premultipliedAlpha: true } };_defineProperty(Renderer, "BLENDING_DEBUG", -1);_defineProperty(Renderer, "BLENDING_NORMAL", 1);_defineProperty(Renderer, "BLENDING_ADDITIVE", 2);_defineProperty(Renderer, "BLENDING_SUBTRACTIVE", 4);_defineProperty(Renderer, "BLENDING_MULTIPLY", 8);_defineProperty(Renderer, "BLENDING_OFF", 16);
+
+class Buffer {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(ctx, data, options) {
+    this.ctx = ctx;
+    this.name = name;
+    options = Object.assign({}, _classStaticPrivateFieldSpecGet(Buffer, Buffer, _defaults), options);
+    this.attributes = options.attributes.map(a => Object.assign({}, _classStaticPrivateFieldSpecGet(Buffer, Buffer, _defaultAttribute), a));
+
+    this.normalized = options.normalized;
+    this.drawType = options.drawType;
+    this.type = options.type;
+    if (data instanceof Array) data = new Float32Array(data);
+    this.data = data;
+    this.buffer = ctx.createBuffer();
+  }
+
+  link(program, hasBuffer = false) {
+    let location = this.ctx.getAttribLocation(program, `a_${this.name}`);
+
+    this.attributes.forEach(attribute => {
+      const location = this.ctx.getAttribLocation(program, `a_${attribute.name}`);
+      this.ctx.vertexAttribPointer(location, attribute.numComponents, this.type, this.normalized, attribute.stride, attribute.offset);
+      this.ctx.enableVertexAttribArray(location);
+    });
+  }
+
+  get length() {
+    return this.data.length;
+  }}var _defaultAttribute = { writable: true, value: { numComponents: 2, offset: 0, stride: 0 } };var _defaults = { writable: true, value: { attributes: [{ name: 'position' }], normalized: false, drawType: window.WebGLRenderingContext.STATIC_DRAW, type: window.WebGLRenderingContext.FLOAT } };var _vShader = new WeakMap();var _fShader = new WeakMap();var _p = new WeakMap();var _renderType = new WeakMap();
+
+class Program {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(ctx, vertexShaderSource, fragmentShaderSource, options = {}) {_vShader.set(this, { writable: true, value: void 0 });_fShader.set(this, { writable: true, value: void 0 });_p.set(this, { writable: true, value: void 0 });_renderType.set(this, { writable: true, value: void 0 });
+    options = Object.assign({}, _classStaticPrivateFieldSpecGet(Program, Program, _defaultOptions2), options);
+
+    this.ctx = ctx;
+
+    this.renderType = options.renderType;
+
+    this.clearColour = options.clearColour;
+    this.blending = options.blending;
+    this.premultiplied = options.premultiplied;
+    this.transparent = options.transparent;
+    this.depthTesting = options.depthTesting;
+
+    // Create the shaders
+    this.vShader = Program.createShaderOfType(this.ctx, this.ctx.VERTEX_SHADER, vertexShaderSource);
+    this.fShader = Program.createShaderOfType(this.ctx, this.ctx.FRAGMENT_SHADER, fragmentShaderSource);
+
+    // Create the program and link the shaders
+    _classPrivateFieldSet(this, _p, this.ctx.createProgram());
+    this.ctx.attachShader(_classPrivateFieldGet(this, _p), this.vShader);
+    this.ctx.attachShader(_classPrivateFieldGet(this, _p), this.fShader);
+
+    this.ctx.linkProgram(_classPrivateFieldGet(this, _p));
+
+    // Check the result of linking
+    var linked = this.ctx.getProgramParameter(_classPrivateFieldGet(this, _p), this.ctx.LINK_STATUS);
+    if (!linked) {
+      var error = this.ctx.getProgramInfoLog(_classPrivateFieldGet(this, _p));
+      console.log('Failed to link program: ' + error);
+      this.ctx.deleteProgram(_classPrivateFieldGet(this, _p));
+      this.ctx.deleteShader(this.fShader);
+      this.ctx.deleteShader(this.vShader);
+    }
+  }
+
+  get program() {
+    return _classPrivateFieldGet(this, _p);
+  }
+
+  /* SETTERS AND GETTERS */
+
+  set renderType(value) {
+    if ([
+    Program.RENDER_TRIANGLES,
+    Program.RENDER_STRIP,
+    Program.RENDER_LINES,
+    Program.RENDER_LINELOOP,
+    Program.RENDER_POINTS].
+    indexOf(value) > -1) _classPrivateFieldSet(this, _renderType, value);
+  }
+  get renderType() {
+    return _classPrivateFieldGet(this, _renderType);
+  }
+
+  /**
+   * Static Methods
+   */
+
+  /**
+   * Create a shader of a given type given a context, type and source.
+   *
+    * @static
+   * @param  {WebGLContext} ctx The context under which to create the shader
+   * @param  {WebGLShaderType} type The shader type, vertex or fragment
+   * @param  {string} source The shader source.
+   * @return {WebGLShader} The created shader
+   */
+  static createShaderOfType(ctx, type, source) {
+    const shader = ctx.createShader(type);
+    ctx.shaderSource(shader, source);
+    ctx.compileShader(shader);
+
+    // Check the compile status
+    const compiled = ctx.getShaderParameter(shader, ctx.COMPILE_STATUS);
+    if (!compiled) {
+      // Something went wrong during compilation; get the error
+      const lastError = ctx.getShaderInfoLog(shader);
+      console.error(`${Program.addLineNumbersWithError(source, lastError)}\nError compiling ${glEnumToString(ctx, type)}: ${lastError}`);
+      ctx.deleteShader(shader);
+      return null;
+    }
+
+    return shader;
+  }
+  static addLineNumbersWithError(src, log = '') {
+    console.log(src);
+    const errorRE = /ERROR:\s*\d+:(\d+)/gi;
+    // Note: Error message formats are not defined by any spec so this may or may not work.
+    const matches = [...log.matchAll(errorRE)];
+    const lineNoToErrorMap = new Map(matches.map((m, ndx) => {
+      const lineNo = parseInt(m[1]);
+      const next = matches[ndx + 1];
+      const end = next ? next.index : log.length;
+      const msg = log.substring(m.index, end);
+      return [lineNo - 1, msg];
+    }));
+    return src.split('\n').map((line, lineNo) => {
+      const err = lineNoToErrorMap.get(lineNo);
+      return `${lineNo + 1}: ${line}${err ? `\n\n^^^ ${err}` : ''}`;
+    }).join('\n');
+  }}_defineProperty(Program, "RENDER_TRIANGLES", 0);_defineProperty(Program, "RENDER_STRIP", 1);_defineProperty(Program, "RENDER_LINES", 2);_defineProperty(Program, "RENDER_LINELOOP", 4);_defineProperty(Program, "RENDER_POINTS", 8);var _defaultOptions2 = { writable: true, value: { renderType: Program.RENDER_TRIANGLES, clearColour: [1.0, 1.0, 1.0, 1.0], blending: Renderer.BLENDING_OFF, premultiplied: true, transparent: false, depthTesting: true } };var _prefix = new WeakMap();
+
+class Uniform {
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(ctx, name, type, value) {_prefix.set(this, { writable: true, value: 'u' });
+    this.ctx = ctx;
+    this.name = name;
+    this.type = type;
+    this.value = value;
+  }
+
+  prebind() {
+
+  }
+
+  bind(program) {
+    this.prebind(program);
+    const location = this.ctx.getUniformLocation(program, `${_classPrivateFieldGet(this, _prefix)}_${this.name}`);
+    switch (this.type) {
+      case Uniform.TYPE_INT:
+        if (!isNaN(this.value)) this.ctx.uniform1i(location, this.value);
+        break;
+      case Uniform.TYPE_FLOAT:
+        if (!isNaN(this.value)) this.ctx.uniform1f(location, this.value);
+        break;
+      case Uniform.TYPE_V2:
+        if (this.value instanceof Array && this.value.length === 2.) this.ctx.uniform2fv(location, this.value);
+        break;
+      case Uniform.TYPE_V3:
+        if (this.value instanceof Array && this.value.length === 3.) this.ctx.uniform3fv(location, this.value);
+        break;
+      case Uniform.TYPE_V4:
+        if (this.value instanceof Array && this.value.length === 4.) this.ctx.uniform4fv(location, this.value);
+        break;
+      case Uniform.TYPE_BOOL:
+        if (!isNaN(this.value)) this.ctx.uniform1i(location, this.value);
+        break;
+      case Uniform.TYPE_M2:
+        if (this.value instanceof Array && this.value.length === 4.) this.ctx.uniformMatrix2fv(location, false, this.value);
+      case Uniform.TYPE_M3:
+        if (this.value instanceof Array && this.value.length === 9.) this.ctx.uniformMatrix3fv(location, false, this.value);
+      case Uniform.TYPE_M4:
+        if (this.value instanceof Array && this.value.length === 16.) this.ctx.uniformMatrix4fv(location, false, this.value);
+        break;}
+
+  }}_defineProperty(Uniform, "TYPE_INT", 0);_defineProperty(Uniform, "TYPE_FLOAT", 1);_defineProperty(Uniform, "TYPE_V2", 2);_defineProperty(Uniform, "TYPE_V3", 3);_defineProperty(Uniform, "TYPE_V4", 4);_defineProperty(Uniform, "TYPE_BOOL", 5);_defineProperty(Uniform, "TYPE_M2", 6);_defineProperty(Uniform, "TYPE_M3", 7);_defineProperty(Uniform, "TYPE_M4", 8);var _prefix2 = new WeakMap();
+
+class Texture extends Uniform {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(ctx, name, options) {
+    super(ctx, name, 0, null);_prefix2.set(this, { writable: true, value: 's' });
+    options = Object.assign({}, _classStaticPrivateFieldSpecGet(Texture, Texture, _defaultOptions3), options);
+    this.textureType = options.textureType;
+    this.minFilter = options.minFilter;
+    this.magFilter = options.magFilter;
+    this.makePowerOf2 = options.makePowerOf2;
+    this.generateMipMap = options.generateMipMap;
+    this.url = options.url;
+    this.data = options.data;
+    this.value = Texture.masteri++;
+  }
+  async preload() {
+    const store = {};
+
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+
+    await asyncImageLoad(img, this.url);
+
+    if (this.makePowerOf2) this.image = pow2Image(img);else
+    this.image = img;
+
+    // this.loadTexture(gl, n, store);
+    return this;
+  }
+
+  prebind(program) {
+    if (!this.image) return;
+
+    this.ctx.activeTexture(this.ctx.TEXTURE0 + this.value);
+
+    const texture = this.ctx.createTexture(); // Create the texture object
+
+    this.ctx.pixelStorei(this.ctx.UNPACK_FLIP_Y_WEBGL, true);
+    this.ctx.bindTexture(this.ctx.TEXTURE_2D, texture);
+
+    // Set the parameters based on the passed type
+    // In WebGL images are wrapped by default, so we don't need to check for that
+    if (this.textureType === Texture.IMAGETYPE_MIRROR) {
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.MIRRORED_REPEAT);
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.MIRRORED_REPEAT);
+    } else if (this.textureType === Texture.IMAGETYPE_REGULAR) {
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+    }
+
+    this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.minFilter);
+    this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.magFilter);
+
+    // Upload the image into the texture.
+    if (this.data) {
+      this.ctx.texImage2D(this.ctx.TEXTURE_2D, 0, this.ctx.RGBA, this.ctx.RGBA, this.ctx.UNSIGNED_BYTE, this.data);
+    } else {
+      this.ctx.texImage2D(this.ctx.TEXTURE_2D, 0, this.ctx.RGBA, this.ctx.RGBA, this.ctx.UNSIGNED_BYTE, this.image);
+    }
+
+    if (this.generateMipMap) this.ctx.generateMipmap(this.ctx.TEXTURE_2D);
+  }}var _defaultOptions3 = { writable: true, value: { textureType: 0, minFilter: window.WebGLRenderingContext.LINEAR, magFilter: window.WebGLRenderingContext.LINEAR, makePowerOf2: false, generateMipMap: false } };_defineProperty(Texture, "masteri", 0);_defineProperty(Texture, "IMAGETYPE_REGULAR", 0);_defineProperty(Texture, "IMAGETYPE_TILE", 1);_defineProperty(Texture, "IMAGETYPE_MIRROR", 2);var _fb = new WeakMap();var _fb2 = new WeakMap();var _activeFB = new WeakMap();var _name = new WeakMap();var _width = new WeakMap();var _height = new WeakMap();var _pxRatio = new WeakMap();var _tiling = new WeakMap();var _texdepth = new WeakMap();var _data = new WeakMap();
+
+class FrameBuffer {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(renderer, name, options) {_fb.set(this, { writable: true, value: void 0 });_fb2.set(this, { writable: true, value: void 0 });_activeFB.set(this, { writable: true, value: void 0 });_name.set(this, { writable: true, value: void 0 });_width.set(this, { writable: true, value: void 0 });_height.set(this, { writable: true, value: void 0 });_pxRatio.set(this, { writable: true, value: void 0 });_tiling.set(this, { writable: true, value: Texture.IMAGETYPE_REGULAR });_texdepth.set(this, { writable: true, value: FrameBuffer.TEXTYPE_HALF_FLOAT_OES });_data.set(this, { writable: true, value: void 0 });
+    options = Object.assign({}, _classStaticPrivateFieldSpecGet(FrameBuffer, FrameBuffer, _defaultOptions4), options);
+
+    this.width = options.width;
+    this.height = options.height;
+    this.pxRatio = options.pxRatio;
+    this.tiling = options.tiling;
+    this.texdepth = options.texdepth;
+    this.depthTesting = options.depthTesting;
+
+    _classPrivateFieldSet(this, _name, name);
+    this.value = Texture.masteri++;
+
+    this.ctx = renderer.ctx;
+    this.renderer = renderer;
+
+    this.data = options.data;
+
+    _classPrivateFieldSet(this, _fb, this.createFrameBuffer());
+    _classPrivateFieldSet(this, _fb2, this.createFrameBuffer());
+    _classPrivateFieldSet(this, _activeFB, _classPrivateFieldGet(this, _fb));
+  }
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+    _classPrivateFieldSet(this, _fb, this.createFrameBuffer());
+    _classPrivateFieldSet(this, _fb2, this.createFrameBuffer());
+    _classPrivateFieldSet(this, _activeFB, _classPrivateFieldGet(this, _fb));
+  }
+  createFrameBuffer() {
+    const targetTexture = this.ctx.createTexture();
+    this.ctx.bindTexture(this.ctx.TEXTURE_2D, targetTexture);
+    {
+      // define size and format of level 0
+      const level = 0;
+      let internalFormat = this.ctx.RGBA;
+      const border = 0;
+      let format = this.ctx.RGBA;
+      let t;
+      if (this.texdepth === FrameBuffer.TEXTYPE_FLOAT) {
+        const e = this.ctx.getExtension('OES_texture_float');
+        t = this.ctx.FLOAT;
+        // internalFormat = this.ctx.FLOAT;
+        // format = this.ctx.FLOAT;
+      } else if (this.texdepth & FrameBuffer.TEXTYPE_HALF_FLOAT_OES) {
+        // t = gl.renderer.isWebgl2 ? e.HALF_FLOAT : e.HALF_FLOAT_OES;
+        //     gl.renderer.extensions['OES_texture_half_float'] ? gl.renderer.extensions['OES_texture_half_float'].HALF_FLOAT_OES : 
+        //     gl.UNSIGNED_BYTE;
+        const e = this.ctx.getExtension('OES_texture_half_float');
+        t = this.renderer.isWebgl2 ? this.ctx.HALF_FLOAT : e.HALF_FLOAT_OES;
+        // format = gl.RGBA;
+        if (this.renderer.isWebgl2) {
+          internalFormat = this.ctx.RGBA16F;
+        }
+        // internalFormat = gl.RGB32F;
+        // format = gl.RGB32F;
+        // window.gl = gl
+        // t = e.HALF_FLOAT_OES;
+      } else {
+        t = this.ctx.UNSIGNED_BYTE;
+      }
+      const type = t;
+      const data = this.data;
+      this.ctx.texImage2D(this.ctx.TEXTURE_2D, level, internalFormat,
+      this.width * this.pxRatio, this.height * this.pxRatio, border,
+      format, type, data);
+      // gl.generateMipmap(gl.TEXTURE_2D);
+
+      // set the filtering so we don't need mips
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.NEAREST);
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.NEAREST);
+
+      // Set the parameters based on the passed type
+      if (this.tiling === Texture.IMAGETYPE_TILE) {
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.REPEAT);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.REPEAT);
+      } else if (this.tiling === Texture.IMAGETYPE_MIRROR) {
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.MIRRORED_REPEAT);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.MIRRORED_REPEAT);
+      } else if (this.tiling === Texture.IMAGETYPE_REGULAR) {
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+      }
+    }
+
+    // Create and bind the framebuffer
+    const fb = this.ctx.createFramebuffer();
+    this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, fb);
+
+    if (this.depthTesting) {
+      var ext = this.ctx.getExtension('WEBGL_depth_texture');
+      let depth = this.ctx.createTexture();
+      this.ctx.bindTexture(this.ctx.TEXTURE_2D, depth);
+      this.ctx.texImage2D(
+      this.ctx.TEXTURE_2D, 0, this.ctx.DEPTH_COMPONENT, this.width * this.pxRatio, this.height * this.pxRatio, 0, this.ctx.DEPTH_COMPONENT, this.ctx.UNSIGNED_SHORT, null);
+      this.ctx.framebufferTexture2D(this.ctx.FRAMEBUFFER, this.ctx.DEPTH_ATTACHMENT, this.ctx.TEXTURE_2D, depth, 0);
+    }
+
+    // attach the texture as the first color attachment
+    const attachmentPoint = this.ctx.COLOR_ATTACHMENT0;
+    const level = 0;
+    this.ctx.framebufferTexture2D(
+    this.ctx.FRAMEBUFFER,
+    attachmentPoint,
+    this.ctx.TEXTURE_2D,
+    targetTexture,
+    level);
+
+    return {
+      fb: fb,
+      frameTexture: targetTexture };
+
+  }
+  bind() {
+    // find the active texture based on the index
+    let uniform = this.ctx.getUniformLocation(this.renderer.currentProgram.program, `b_${_classPrivateFieldGet(this, _name)}`);
+
+    // Set the texture unit to the uniform
+    this.ctx.uniform1i(uniform, this.value);
+    this.ctx.activeTexture(this.ctx.TEXTURE0 + this.value);
+    // Bind the texture
+    this.ctx.bindTexture(this.ctx.TEXTURE_2D, _classPrivateFieldGet(this, _activeFB).frameTexture);
+  }
+  render(n) {
+    this.bind();
+
+    // Finally, ping-pong the texture
+    _classPrivateFieldSet(this, _activeFB, _classPrivateFieldGet(this, _activeFB) === _classPrivateFieldGet(this, _fb) ? _classPrivateFieldGet(this, _fb2) : _classPrivateFieldGet(this, _fb));
+
+    // this.renderer.render(n, this.#activeFB);
+    this.renderer.render(n, _classPrivateFieldGet(this, _activeFB), [this.width, this.height]);
+  }
+
+  set data(value) {
+    if (value instanceof Float32Array) _classPrivateFieldSet(this, _data, value);
+  }
+  get data() {
+    return _classPrivateFieldGet(this, _data) || null;
+  }
+  set width(value) {
+    if (value > 0) _classPrivateFieldSet(this, _width, value);
+  }
+  get width() {
+    return _classPrivateFieldGet(this, _width) || 1;
+  }
+  set height(value) {
+    if (value > 0) _classPrivateFieldSet(this, _height, value);
+  }
+  get height() {
+    return _classPrivateFieldGet(this, _height) || 1;
+  }
+  set pxRatio(value) {
+    if (value > 0) _classPrivateFieldSet(this, _pxRatio, value);
+  }
+  get pxRatio() {
+    return _classPrivateFieldGet(this, _pxRatio) || 1;
+  }
+  set tiling(value) {
+    if ([Texture.IMAGETYPE_REGULAR, Texture.IMAGETYPE_TILE, Texture.IMAGETYPE_MIRROR].indexOf(value) > -1) _classPrivateFieldSet(this, _tiling, value);
+  }
+  get tiling() {
+    return _classPrivateFieldGet(this, _tiling);
+  }
+  set texdepth(value) {
+    if ([FrameBuffer.TEXTYPE_FLOAT, FrameBuffer.TEXTYPE_UNSIGNED_BYTE, FrameBuffer.TEXTYPE_HALF_FLOAT_OES].indexOf(value) > -1) _classPrivateFieldSet(this, _texdepth, value);
+  }
+  get texdepth() {
+    return _classPrivateFieldGet(this, _texdepth);
+  }}var _defaultOptions4 = { writable: true, value: { width: 512, height: 512, pxRatio: Math.min(window.devicePixelRatio, 2), tiling: Texture.IMAGETYPE_REGULAR, texdepth: FrameBuffer.TEXTYPE_HALF_FLOAT_OES, data: null, depthTesting: false } };_defineProperty(FrameBuffer, "TEXTYPE_FLOAT", 0);_defineProperty(FrameBuffer, "TEXTYPE_UNSIGNED_BYTE", 1);_defineProperty(FrameBuffer, "TEXTYPE_HALF_FLOAT_OES", 2);var _fov = new WeakMap();var _aspect = new WeakMap();var _near = new WeakMap();var _far = new WeakMap();var _pos = new WeakMap();var _target = new WeakMap();var _up = new WeakMap();var _updateDebounce = new WeakMap();var _model = new WeakMap();var _view = new WeakMap();var _proj = new WeakMap();var _MVP = new WeakMap();var _u_model = new WeakMap();var _u_view = new WeakMap();var _u_proj = new WeakMap();var _u_MVP = new WeakMap();var _q = new WeakMap();var _name2 = new WeakMap();
+
+class Camera {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(renderer, name, options) {_fov.set(this, { writable: true, value: void 0 });_aspect.set(this, { writable: true, value: void 0 });_near.set(this, { writable: true, value: void 0 });_far.set(this, { writable: true, value: void 0 });_pos.set(this, { writable: true, value: void 0 });_target.set(this, { writable: true, value: void 0 });_up.set(this, { writable: true, value: void 0 });_updateDebounce.set(this, { writable: true, value: void 0 });_model.set(this, { writable: true, value: void 0 });_view.set(this, { writable: true, value: void 0 });_proj.set(this, { writable: true, value: void 0 });_MVP.set(this, { writable: true, value: void 0 });_u_model.set(this, { writable: true, value: void 0 });_u_view.set(this, { writable: true, value: void 0 });_u_proj.set(this, { writable: true, value: void 0 });_u_MVP.set(this, { writable: true, value: void 0 });_q.set(this, { writable: true, value: void 0 });_name2.set(this, { writable: true, value: void 0 });
+    options = Object.assign({}, _classStaticPrivateFieldSpecGet(Camera, Camera, _defaultOptions5), options);
+
+    this.renderer = renderer;
+    this.ctx = renderer.ctx;
+
+    this.fov = options.fov;
+    this.aspect = options.aspect;
+    this.near = options.near;
+    this.far = options.far;
+    this.pos = options.pos;
+    this.target = options.target;
+    this.up = options.up;
+
+    this.q = new Quat();
+
+    this.name = name;
+
+    this.update(true);
+  }
+  set q(value) {
+    if (value instanceof Quat) {
+      _classPrivateFieldSet(this, _q, value);
+      _classPrivateFieldSet(this, _model, quatToMat4(_classPrivateFieldGet(this, _q)));
+      _classPrivateFieldSet(this, _u_model, new Uniform(this.ctx, 'm_model', Uniform.TYPE_M4, _classPrivateFieldGet(this, _model).array));
+    }
+  }
+  get q() {
+    return _classPrivateFieldGet(this, _q) || new Quat();
+  }
+  update(nt = false) {
+    clearTimeout(_classPrivateFieldGet(this, _updateDebounce));
+    // this.#updateDebounce = setTimeout(() => {
+    _classPrivateFieldSet(this, _model, new Mat4());
+    _classPrivateFieldSet(this, _view, Mat4.lookAt(this.pos, this.target, this.up));
+    _classPrivateFieldSet(this, _proj, Mat4.perspective(this.fov, this.aspect, this.near, this.far));
+    _classPrivateFieldSet(this, _MVP, _classPrivateFieldGet(this, _proj).multiplyNew(_classPrivateFieldGet(this, _view)).multiply(_classPrivateFieldGet(this, _model)));
+
+    _classPrivateFieldSet(this, _u_view, new Uniform(this.ctx, 'm_view', Uniform.TYPE_M4, _classPrivateFieldGet(this, _view).array));
+    _classPrivateFieldSet(this, _u_proj, new Uniform(this.ctx, 'm_proj', Uniform.TYPE_M4, _classPrivateFieldGet(this, _proj).array));
+    _classPrivateFieldSet(this, _u_MVP, new Uniform(this.ctx, 'm_MVP', Uniform.TYPE_M4, _classPrivateFieldGet(this, _MVP).array));
+
+    this.setup = true;
+    // }, nt ? 0 : 50);
+  }
+
+  set name(value) {
+    if (typeof value === 'string') _classPrivateFieldSet(this, _name2, value);
+  }
+  get name() {
+    return _classPrivateFieldGet(this, _name2) || 'camera';
+  }
+  set fov(value) {
+    if (!isNaN(value)) _classPrivateFieldSet(this, _fov, value);
+  }
+  get fov() {
+    return _classPrivateFieldGet(this, _fov);
+  }
+  set aspect(value) {
+    if (!isNaN(value)) _classPrivateFieldSet(this, _aspect, value);
+  }
+  get aspect() {
+    return _classPrivateFieldGet(this, _aspect);
+  }
+  set near(value) {
+    if (!isNaN(value)) _classPrivateFieldSet(this, _near, value);
+  }
+  get near() {
+    return _classPrivateFieldGet(this, _near);
+  }
+  set far(value) {
+    if (!isNaN(value)) _classPrivateFieldSet(this, _far, value);
+  }
+  get far() {
+    return _classPrivateFieldGet(this, _far);
+  }
+  set pos(value) {
+    if (value instanceof Vec3) _classPrivateFieldSet(this, _pos, value);
+  }
+  get pos() {
+    return _classPrivateFieldGet(this, _pos);
+  }
+  set target(value) {
+    if (value instanceof Vec3) _classPrivateFieldSet(this, _target, value);
+  }
+  get target() {
+    return _classPrivateFieldGet(this, _target);
+  }
+  set up(value) {
+    if (value instanceof Vec3) _classPrivateFieldSet(this, _up, value);
+  }
+  get up() {
+    return _classPrivateFieldGet(this, _up);
+  }
+  get u_model() {
+    return _classPrivateFieldGet(this, _u_model);
+  }
+  get u_view() {
+    return _classPrivateFieldGet(this, _u_view);
+  }
+  get u_proj() {
+    return _classPrivateFieldGet(this, _u_proj);
+  }
+  get u_MVP() {
+    return _classPrivateFieldGet(this, _u_MVP);
+  }
+  get uniforms() {
+    return [this.u_model, this.u_view, this.u_proj, this.u_MVP];
+  }}var _defaultOptions5 = { writable: true, value: { fov: 30 * Math.PI / 180, aspect: window.innerWidth / window.innerHeight, near: .5, far: 100, pos: new Vec3(3, 1, -5), target: new Vec3(0, 0, 0), up: new Vec3(0, 1, 0) } };
+
+
+setup();
\ No newline at end of file
diff --git a/firefly-flow/dist/style.css b/firefly-flow/dist/style.css
new file mode 100644
index 0000000..a10ea16
--- /dev/null
+++ b/firefly-flow/dist/style.css
@@ -0,0 +1,60 @@
+body {
+  background: #666;
+  margin: 0;
+  overflow: hidden;
+}
+canvas {
+  height: 100vh;
+  width: 100vw;
+  touch-action: none;
+}
+.osc {
+  left: 0px;
+  position: fixed;
+  top: 0px;
+}
+
+.button {
+  position: fixed;
+  z-index: 10;
+  right: 0;
+  bottom: 0;
+}
+.controls {
+  position: fixed;
+  z-index: 10;
+  left: 0;
+  bottom: 0;
+}
+.playpause {
+  background: #AAB;
+  padding: 10px;
+}
+.playpause label {
+  display: block;
+  box-sizing: border-box;
+
+  width: 0;
+  height: 20px;
+
+  cursor: pointer;
+
+  border-color: transparent transparent transparent #202020;
+  transition: 100ms all ease;
+  will-change: border-width;
+
+  border-style: double;
+  border-width: 0px 0 0px 20px;
+}
+.playpause input[type='checkbox'] {
+  visibility: hidden;
+}
+.playpause.checked label {
+  border-style: double;
+  border-width: 0px 0 0px 20px;
+}
+.playpause label {
+  border-style: solid;
+  border-width: 10px 0 10px 20px;
+}
+/* } */
\ No newline at end of file
diff --git a/firefly-flow/license.txt b/firefly-flow/license.txt
new file mode 100644
index 0000000..c5a37db
--- /dev/null
+++ b/firefly-flow/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Liam Egan (https://codepen.io/shubniggurath/pen/dyNLREq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/firefly-flow/src/index.html b/firefly-flow/src/index.html
new file mode 100644
index 0000000..2e48f6b
--- /dev/null
+++ b/firefly-flow/src/index.html
@@ -0,0 +1,355 @@
+<script id="vertexShader_particle" type="x-shader/x-vertex">
+  attribute vec4 a_position;
+  attribute vec3 a_colour;
+  attribute vec2 a_reference;
+  
+  uniform vec2 u_resolution;
+  
+  uniform sampler2D b_velocity;
+  uniform sampler2D b_position;
+  uniform sampler2D b_blur;
+  
+  varying vec3 v_colour;
+  varying float v_fogDepth;
+  
+  float rand(vec2 n) { 
+    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+  }
+  
+  vec3 hsv2rgb(vec3 c) {
+    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+  }
+  
+  void main() {
+    vec2 position = texture2D(b_position, a_reference).xy;
+    vec2 velocity = texture2D(b_velocity, a_reference).xy;
+    float size = texture2D(b_blur, position).r;
+    
+    vec4 pos = vec4(position / u_resolution * 2. - 1., 0., 1.);
+    
+    gl_Position = pos;
+    gl_PointSize = 2.+size*.02;
+    v_colour = vec3(1);
+  }
+</script>
+<script id="vertexShader_buffer" type="x-shader/x-vertex">attribute vec4 a_position;  
+  uniform mat4 u_modelViewMatrix;
+  uniform mat4 u_projectionMatrix;
+  
+  void main() {
+    gl_Position = a_position;
+  }
+</script>
+<script id="fragmentShader_velocity" type="x-shader/x-fragment">
+  #extension GL_OES_standard_derivatives : enable
+  precision highp float;
+  
+  #define PI 3.141592653589793
+  #define HPI 1.5707963267948966
+  #define TAU 6.283185307179586
+  #define G 0.67408
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D s_noise;
+  
+  uniform sampler2D b_velocity;
+  uniform sampler2D b_position;
+  
+  //	Simplex 3D Noise 
+  //	by Ian McEwan, Ashima Arts
+  //
+  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
+  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
+  
+  float rand(float n){return fract(sin(n) * 43758.5453123);}
+  float rand(vec2 n) { 
+    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+  }
+  float snoise(vec3 v){ 
+    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  // First corner
+    vec3 i  = floor(v + dot(v, C.yyy) );
+    vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+  // Other corners
+    vec3 g = step(x0.yzx, x0.xyz);
+    vec3 l = 1.0 - g;
+    vec3 i1 = min( g.xyz, l.zxy );
+    vec3 i2 = max( g.xyz, l.zxy );
+
+    //  x0 = x0 - 0. + 0.0 * C 
+    vec3 x1 = x0 - i1 + 1.0 * C.xxx;
+    vec3 x2 = x0 - i2 + 2.0 * C.xxx;
+    vec3 x3 = x0 - 1. + 3.0 * C.xxx;
+
+  // Permutations
+    i = mod(i, 289.0 ); 
+    vec4 p = permute( permute( permute( 
+               i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+             + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
+             + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+  // Gradients
+  // ( N*N points uniformly over a square, mapped onto an octahedron.)
+    float n_ = 1.0/7.0; // N=7
+    vec3  ns = n_ * D.wyz - D.xzx;
+
+    vec4 j = p - 49.0 * floor(p * ns.z *ns.z);  //  mod(p,N*N)
+
+    vec4 x_ = floor(j * ns.z);
+    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+    vec4 x = x_ *ns.x + ns.yyyy;
+    vec4 y = y_ *ns.x + ns.yyyy;
+    vec4 h = 1.0 - abs(x) - abs(y);
+
+    vec4 b0 = vec4( x.xy, y.xy );
+    vec4 b1 = vec4( x.zw, y.zw );
+
+    vec4 s0 = floor(b0)*2.0 + 1.0;
+    vec4 s1 = floor(b1)*2.0 + 1.0;
+    vec4 sh = -step(h, vec4(0.0));
+
+    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+    vec3 p0 = vec3(a0.xy,h.x);
+    vec3 p1 = vec3(a0.zw,h.y);
+    vec3 p2 = vec3(a1.xy,h.z);
+    vec3 p3 = vec3(a1.zw,h.w);
+
+  //Normalise gradients
+    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+    p0 *= norm.x;
+    p1 *= norm.y;
+    p2 *= norm.z;
+    p3 *= norm.w;
+
+  // Mix final noise value
+    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+    m = m * m;
+    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
+                                  dot(p2,x2), dot(p3,x3) ) );
+  }
+  
+  float noise21(vec2 n) {
+    const vec2 d = vec2(0.0, 1.0);
+    vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
+    return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
+  }
+  
+  void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    vec2 position = texture2D(b_position, uv).xy;
+    vec2 velocity = texture2D(b_velocity, uv).xy;
+    
+    float n = snoise(vec3(position*.002, u_time - floor(u_time) * 20.)) * 3.14159;
+    n = snoise(vec3((position+n)*.002, n));
+    
+    float a = n * (3.14159 * 2.) + noise21(position)*7.;
+    
+    float c = cos(a);
+    float s = sin(a);
+    
+    velocity = velocity + vec2(c, s) * .1;
+    
+    if(length(velocity) > 1.) velocity = normalize(velocity)*1.;
+    
+    gl_FragColor = vec4(velocity, 0., 1.0);
+  }
+</script>
+<script id="fragmentShader_position" type="x-shader/x-fragment">
+  #extension GL_OES_standard_derivatives : enable
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D s_noise;
+  uniform vec2 u_screen;
+  
+  uniform sampler2D b_velocity;
+  uniform sampler2D b_position;
+
+  void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    vec2 position = texture2D(b_position, uv).xy;
+    vec2 velocity = texture2D(b_velocity, uv).xy;
+    
+    vec2 pos = position+velocity*.99;
+    if(pos.x > u_screen.x + 20.) pos.x = -10.;
+    else if(pos.x < -20.) pos.x = u_screen.x + 10.;
+    if(pos.y > u_screen.y + 20.) pos.y = -10.;
+    else if(pos.y < -20.) pos.y = u_screen.y + 10.;
+    
+    gl_FragColor = vec4(pos, 0., 1.0);
+  }
+</script>
+<script id="fragmentShader_particle" type="x-shader/x-fragment">
+  #extension GL_OES_standard_derivatives : enable
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D s_noise;
+  
+  uniform sampler2D b_prime;
+  uniform sampler2D b_position;
+  
+  varying vec3 v_colour;
+  varying float v_fogDepth;
+  
+  vec2 getScreenSpace() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    return uv;
+  }
+
+  void main() {
+    vec2 uv = gl_PointCoord.xy - .5;
+    vec2 s = gl_FragCoord.xy / u_resolution.xy;
+    
+    gl_FragColor = vec4(0, 0, 0, 1);
+    
+    float l = length(uv);
+    float c = smoothstep(.5, 0., l);
+    float fog = smoothstep(-200., -1., v_fogDepth);
+    float opacity = c * fog;
+    
+    gl_FragColor = vec4(v_colour, opacity);
+  }
+  
+</script>
+<script id="fragmentShader_blur" type="x-shader/x-fragment">
+  #extension GL_OES_standard_derivatives : enable
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D s_noise;
+  
+  uniform sampler2D b_prime;
+  uniform sampler2D b_blur;
+  
+  varying vec3 v_colour;
+  
+  const float blurMultiplier = 0.985;
+  const float blurStrength = .3;
+  const int samples = 6;
+  const float sigma = float(samples) * 0.25;
+  
+  #define PI 3.141592653589793
+  #define TAU 6.283185307179586
+  #define pow2(x) (x * x)
+  
+  vec2 getScreenSpace() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    return uv;
+  }
+  
+  float gaussian(vec2 i) {
+    return 1.0 / (2.0 * PI * pow2(sigma)) * exp(-((pow2(i.x) + pow2(i.y)) / (2.0 * pow2(sigma))));
+  }
+  vec4 blur(sampler2D sp, vec2 uv, vec2 scale) {
+      vec4 col = vec4(0.0);
+      float accum = 0.0;
+      float weight;
+      vec2 offset;
+
+      for (int x = -samples / 2; x < samples / 2; ++x) {
+          for (int y = -samples / 2; y < samples / 2; ++y) {
+              offset = vec2(x, y);
+              weight = gaussian(offset);
+              col += texture2D(sp, uv + scale * offset) * weight;
+              accum += weight;
+          }
+      }
+
+      return col / accum;
+  }
+
+  void main() {
+    vec2 s = gl_FragCoord.xy / u_resolution;
+    
+    vec2 ps = vec2(1.0) / u_resolution.xy;
+    
+    vec4 p = texture2D(b_prime, s);
+    vec4 b = blur(b_blur, s, ps*blurStrength);
+    
+    vec4 opt = b * blurMultiplier + p;
+
+    gl_FragColor = opt;
+  }
+  
+</script>
+<script id="fragmentShader_output" type="x-shader/x-fragment">
+  #extension GL_OES_standard_derivatives : enable
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D s_noise;
+  
+  uniform sampler2D b_prime;
+  uniform sampler2D b_blur;
+  
+  varying vec3 v_colour;
+  
+  vec2 getScreenSpace() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    return uv;
+  }
+  
+  const int samples = 8;
+  const float sigma = float(samples) * 0.25;
+  
+  #define PI 3.141592653589793
+  #define TAU 6.283185307179586
+  #define pow2(x) (x * x)
+  
+  float gaussian(vec2 i) {
+    return 1.0 / (2.0 * PI * pow2(sigma)) * exp(-((pow2(i.x) + pow2(i.y)) / (2.0 * pow2(sigma))));
+  }
+  vec4 blur(sampler2D sp, vec2 uv, vec2 scale) {
+      vec4 col = vec4(0.0);
+      float accum = 0.0;
+      float weight;
+      vec2 offset;
+
+      for (int x = -samples / 2; x < samples / 2; ++x) {
+          for (int y = -samples / 2; y < samples / 2; ++y) {
+              offset = vec2(x, y);
+              weight = gaussian(offset);
+              col += texture2D(sp, uv + scale * offset) * weight;
+              accum += weight;
+          }
+      }
+
+      return col / accum;
+  }
+
+  void main() {
+    vec2 s = gl_FragCoord.xy / u_resolution;
+    
+    vec4 p = texture2D(b_prime, s);
+    vec4 b = texture2D(b_blur, s);
+    b.a = clamp(b.a*.001, 0., 1.);
+    p = blur(b_prime, s, (vec2(1)/u_resolution)*.5)*(b.a+.2);
+    vec4 opt = mix(b, p, p.a);
+    
+    gl_FragColor = vec4(mix(vec3(0.05,.1,.1), opt.rgb, opt.a), 1.);
+    // gl_FragColor = opt;
+  }
+  
+</script>
\ No newline at end of file
diff --git a/firefly-flow/src/script.babel b/firefly-flow/src/script.babel
new file mode 100644
index 0000000..bb5911b
--- /dev/null
+++ b/firefly-flow/src/script.babel
@@ -0,0 +1,1171 @@
+import { Vec2, Vec3, Mat2, Mat3, Mat4, Quat } from 'https://cdn.skypack.dev/wtc-math';
+
+import gifJs from 'https://cdn.skypack.dev/gif.js';
+
+console.clear();
+
+const setup = function() {
+  // Simulation dimensions
+  const px = Math.min(window.devicePixelRatio, 2);
+  const dimensions = [window.innerWidth, window.innerHeight];
+  const texturesize = 128;
+  const particles = Math.pow(texturesize, 2);
+  const textureArraySize = particles*4;
+
+  const canvas = document.createElement('canvas');
+  document.body.appendChild(canvas);
+
+  const renderer = new Renderer(canvas, { width: dimensions[0], height: dimensions[1], alpha: true, premultipliedAlpha: false, preserveDrawingBuffer: true });
+  const ctx = renderer.ctx;
+
+  let drawing = new Float32Array([ -1.0,  1.0,   1.0,  1.0,   -1.0, -1.0,   1.0, -1.0]);
+  const ants = new Float32Array(particles * 2).fill(0);
+  const references = new Float32Array(particles * 2).fill(0);
+  const positionData = new Float32Array(particles * 4).fill(0);
+  const velocityData = new Float32Array(particles * 4).fill(0);
+  for(let i = 0; i < ants.length; i += 2) {
+    const index = i / 2;
+    const tindex = i * 2;
+    
+    ants[i] = index%texturesize;                // x position
+    ants[i+1] = Math.floor(index/texturesize);  // y position
+    
+    references[i] = ants[i] / texturesize;    // x position of the texture particle representing this ant
+    references[i+1] = ants[i+1] / texturesize;// y position of the texture particle representing this ant
+    
+    positionData[tindex] = Math.random() * (window.innerWidth * px + 40);
+    positionData[tindex + 1] = Math.random() * (window.innerHeight * px + 40);
+    positionData[tindex + 2] = 0;
+    positionData[tindex + 3] = 1;
+    
+    velocityData[tindex] = Math.random()-.5;
+    velocityData[tindex + 1] = Math.random()-.5;
+    velocityData[tindex + 2] = 0;
+    velocityData[tindex + 3] = 1;
+  }
+  // for (let i = 0; i < textureArraySize; i += 4) {
+  //   positionData[i] = Math.random();
+  //   positionData[i + 1] = Math.random();
+  //   positionData[i + 2] = 0;
+  //   positionData[i + 3] = 1;
+  // }
+  
+  const positionBuffer = new FrameBuffer(renderer, 'position', {
+    width: texturesize,
+    height: texturesize,
+    tiling: Texture.IMAGETYPE_TILE,
+    texdepth: FrameBuffer.TEXTYPE_FLOAT,
+    pxRatio: 1,
+    data: positionData
+  });
+  const velocityBuffer = new FrameBuffer(renderer, 'velocity', {
+    width: texturesize,
+    height: texturesize,
+    tiling: Texture.IMAGETYPE_TILE,
+    texdepth: FrameBuffer.TEXTYPE_FLOAT,
+    pxRatio: 1,
+    data: velocityData
+  });
+  const blurBuffer = new FrameBuffer(renderer, 'blur', {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    tiling: Texture.IMAGETYPE_REGULAR,
+    texdepth: FrameBuffer.TEXTYPE_FLOAT,
+    pxRatio: Math.min(window.devicePixelRatio, 2)
+  });
+  const primaryBuffer = new FrameBuffer(renderer, 'prime', {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    tiling: Texture.IMAGETYPE_REGULAR,
+    pxRatio: Math.min(window.devicePixelRatio, 2)
+  });
+
+  const drawBuffer = new Buffer(ctx, drawing);
+  const antBuffer = new Buffer(ctx, ants, { 
+    attributes: [{
+          name: 'ants',
+          numComponents: 2
+        }]
+  });
+  const referenceBuffer = new Buffer(ctx, references, { 
+    attributes: [{
+          name: 'reference',
+          numComponents: 2
+        }]
+  });
+
+  const vertexShader_buffer = document.getElementById('vertexShader_buffer').innerText;
+  const vertexShader_particle = document.getElementById('vertexShader_particle').innerText;
+
+  const programPosition = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_position').innerText, {  
+    renderType: Program.RENDER_STRIP });
+  const programVelocity = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_velocity').innerText, {  
+    renderType: Program.RENDER_STRIP });
+  const programBlur = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_blur').innerText, {
+    renderType: Program.RENDER_STRIP });
+  const programMain = new Program(ctx, vertexShader_particle, document.getElementById('fragmentShader_particle').innerText, { 
+    // clearColour: [.15,.1,.05, 1.], 
+    clearColour: [.9, .9, .9, 0.], 
+    renderType: Program.RENDER_POINTS, 
+    blending: Renderer.BLENDING_NORMAL, 
+    depthTesting: false, 
+    transparent: false,
+    premultiplied: false
+  });
+  const programOutput = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_output').innerText, {
+    clearColour: [.0, .0, .0, 1.], 
+    renderType: Program.RENDER_STRIP });
+  
+  const time = new Uniform(ctx, 'time', Uniform.TYPE_FLOAT, 100);
+  const uDelta = new Uniform(ctx, 'delta', Uniform.TYPE_FLOAT, 100);
+  const mouse = new Uniform(ctx, 'mouse', Uniform.TYPE_V2, [0.,0.]);
+  const screen = new Uniform(ctx, 'screen', Uniform.TYPE_V2, [window.innerWidth * px, window.innerHeight * px]);
+
+  const noise = new Texture(ctx, 'noise', {
+    textureType: Texture.IMAGETYPE_TILE,
+    url: 'https://assets.codepen.io/982762/noise.png'
+  });
+
+  noise.preload().then((n) => {
+    requestAnimationFrame(run);
+  });
+
+  let pointerdown = false;
+  let lastPos = new Vec2();
+  window.addEventListener('pointerdown', (e) => {
+    pointerdown = true;
+    lastPos = new Vec2(e.x, e.y);
+  });
+  window.addEventListener('pointerup', (e) => {
+    pointerdown = false;
+  });
+  window.addEventListener('pointermove', (e) => {
+    if(pointerdown) {
+      let newPos = new Vec2(e.x, e.y);
+      mouse.value = newPos.array;
+    }
+  });
+
+  let playing = true;
+  const setPlaying = (value) => {
+    playing = value;
+  }
+
+  let autoTransitionTimer = 0;
+  let timeToTransition = 0;
+  const setupValues = (i) => {
+    dimensions[0] = window.innerWidth;
+    dimensions[1] = window.innerHeight;
+
+    time.value = -10000;
+  }
+
+  setupValues(0);
+
+  let timeout;
+  window.addEventListener('resize', () => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      dimensions[0] = window.innerWidth;
+      dimensions[1] = window.innerHeight;
+      renderer.resize(dimensions[0], dimensions[1]);
+      blurBuffer.resize(dimensions[0], dimensions[1]);
+      primaryBuffer.resize(dimensions[0], dimensions[1]);
+      screen.value = [dimensions[0] * px, dimensions[1] * px];
+    }, 100);
+  });
+
+  let then = 0;
+  const run = (delta) => {
+
+    let now = Date.now() / 1000;
+    let _delta = now - then;
+    then = now;
+
+    if(_delta > 1000) {
+      requestAnimationFrame(run);
+      return;
+    }
+
+    if(playing) {
+      uDelta.value = Math.min(_delta, 0.5);
+      time.value += _delta * .05;
+      
+      renderer.setViewport([velocityBuffer.width, velocityBuffer.height]);
+      // window.renderer = renderer;
+      // console.log(renderer.uniformResolution.value)
+      renderer.setupProgram(programVelocity, [drawBuffer], [], [time, mouse, velocityBuffer, positionBuffer, uDelta, screen]);
+      velocityBuffer.render(4);
+
+      renderer.setupProgram(programPosition, [drawBuffer], [], [time, mouse, velocityBuffer, positionBuffer, uDelta, screen]);
+      positionBuffer.render(4);
+
+      renderer.setViewport();
+      renderer.setupProgram(programMain, [referenceBuffer], [], [time, mouse, velocityBuffer, positionBuffer, screen, blurBuffer]);
+      primaryBuffer.render(particles);
+
+      renderer.setViewport();
+      renderer.setupProgram(programBlur, [drawBuffer], [], [time, primaryBuffer]);
+      blurBuffer.render(4);
+
+      renderer.setViewport();
+      renderer.setupProgram(programOutput, [drawBuffer], [], [time, primaryBuffer, blurBuffer]);
+      renderer.render(4);
+      
+      requestAnimationFrame(run);
+    }
+  }
+}
+
+// Determine whether a number is a power of 2
+function powerOf2(v) {
+  return v && !(v & (v - 1));
+}
+// Return the next greatest power of 2
+function nextPow2( v ) {
+  v--;
+  v |= v >> 1;
+  v |= v >> 2;
+  v |= v >> 4;
+  v |= v >> 8;
+  v |= v >> 16;
+  v++;
+  return v;
+}
+// Update a provided image to the nearest power of 2 in size.
+const pow2Image = (c) => {
+  const newWidth = powerOf2(c.width) ? c.width : nextPow2(c.width);
+  const newHeight = powerOf2(c.height) ? c.height : nextPow2(c.height);
+  const _c = document.createElement('canvas');
+  const ctx = _c.getContext('2d');
+  _c.width = newWidth;
+  _c.height = newHeight;
+  ctx.drawImage(c, 0, 0, newWidth, newHeight);
+  return _c;
+}
+const asyncImageLoad = function(img, src) {
+  return new Promise((resolve, reject) => {
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  })
+}
+const glEnumToString = (function() {
+  const haveEnumsForType = {};
+  const enums = {};
+
+  function addEnums(gl) {
+    const type = gl.constructor.name;
+    if (!haveEnumsForType[type]) {
+      for (const key in gl) {
+        if (typeof gl[key] === 'number') {
+          const existing = enums[gl[key]];
+          enums[gl[key]] = existing ? `${existing} | ${key}` : key;
+        }
+      }
+      haveEnumsForType[type] = true;
+    }
+  }
+
+  return function glEnumToString(gl, value) {
+    addEnums(gl);
+    return enums[value] || (typeof value === 'number' ? `0x${value.toString(16)}` : value);
+  };
+}());
+const addExtensions = (ctx) => {
+  // Set up the extensions
+  ctx.getExtension('OES_standard_derivatives');
+  ctx.getExtension('EXT_shader_texture_lod');
+  ctx.getExtension('OES_texture_float');
+  ctx.getExtension('WEBGL_color_buffer_float');
+  ctx.getExtension('OES_texture_float_linear');
+  ctx.getExtension('EXT_color_buffer_float');
+}
+function createContext(c, opt_attribs, params) {
+  const ctx = c.getContext("webgl", params) || this._el.getContext("experimental-webgl", params);
+  
+  addExtensions(ctx);
+  
+  return ctx;
+}
+
+const quatToMat4 = (q) => {
+    if(q.array) q = q.array; // This just transforms a provided vector into to an array.
+    
+    if(q instanceof Array && q.length >= 4) {
+      const [x, y, z, w] = q;
+      const [x2, y2, z2] = q.map(x => x * 2.);
+      
+      const xx = x * x2,
+            yx = y * x2,
+            yy = y * y2,
+            zx = z * x2,
+            zy = z * y2,
+            zz = z * z2,
+            wx = w * x2,
+            wy = w * y2,
+            wz = w * z2;
+      
+      return new Mat4(
+        1 - yy -zz, yx -wz, zx + wy, 0, 
+        yx + wz, 1 - xx - zz, zy - wx, 0, 
+        zx - wy, zy + wx, 1 - xx - yy, 0,
+        0, 0, 0, 1
+      );
+    }
+  }
+
+class Renderer {
+  static #defaultOptions = {
+    width: 512,
+    height: 512,
+    pxRatio: Math.min(window.devicePixelRatio, 2),
+    clearing: true,
+    depthTesting: true,
+    premultipliedAlpha: true
+  }
+    
+  static BLENDING_DEBUG      = -1;
+  static BLENDING_NORMAL      = 1;
+  static BLENDING_ADDITIVE    = 2;
+  static BLENDING_SUBTRACTIVE = 4;
+  static BLENDING_MULTIPLY    = 8;
+  static BLENDING_OFF         = 16;
+
+  isWebgl2 = false;
+
+  #blending;
+  #blendingEnabled = false;
+  #buffers = [];
+
+  constructor(canvas, options) {
+    options = Object.assign({}, Renderer.#defaultOptions, options);
+    this.width = options.width;
+    this.height = options.height;
+    this.pxRatio = options.pxRatio;
+    this.clearing = options.clearing;
+    this.depthTesting = options.depthTesting;
+    this.canvas = canvas || document.createElement('canvas');
+    this.canvas.width = this.width * this.pxRatio;
+    this.canvas.height = this.height * this.pxRatio;
+    this.premultipliedAlpha = options.premultipliedAlpha;
+    
+    this.ctx = this.canvas.getContext("webgl", options) || this.canvas.getContext("experimental-webgl", options);
+    
+    this.ctx.viewportWidth = this.canvas.width;
+    this.ctx.viewportHeight = this.canvas.height;
+    
+    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [this.canvas.width, this.canvas.height]);
+    
+    this.addExtensions();
+  }
+  resize(w, h, ratio) {
+    this.width = w;
+    this.height = h;
+    this.pxRatio = ratio || this.pxRatio;
+    this.canvas.width = this.width * this.pxRatio;
+    this.canvas.height = this.height * this.pxRatio;
+    
+    this.ctx.viewportWidth = this.canvas.width;
+    this.ctx.viewportHeight = this.canvas.height;
+    
+    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [this.canvas.width, this.canvas.height]);
+  }
+  setViewport(dimensions) {
+    let w = this.width*this.pxRatio;
+    let h = this.height*this.pxRatio;
+    if(dimensions) {
+      w = dimensions[0];
+      h = dimensions[1];
+    }
+    this.ctx.viewport(0, 0, w, h);
+    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [w, h]);
+  }
+  addExtensions() {
+    this.ctx.getExtension('OES_standard_derivatives');
+    this.ctx.getExtension('EXT_shader_texture_lod');
+    this.ctx.getExtension('OES_texture_float');
+    this.ctx.getExtension('WEBGL_color_buffer_float');
+    this.ctx.getExtension('OES_texture_float_linear');
+    this.ctx.getExtension('EXT_color_buffer_float');
+  }
+  linkBuffer(buffer) {
+    let hasBuffer = false;
+    this.#buffers.forEach((b) => {
+      if(buffer === b) hasBuffer = true;
+    });
+    if(!hasBuffer) {
+      this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, buffer.buffer);
+      this.ctx.bufferData(
+        this.ctx.ARRAY_BUFFER,
+        buffer.data,
+        buffer.drawType);
+    }
+    buffer.link(this.currentProgram.program);
+  }
+  setupProgram(program, buffers, attributes, uniforms) {
+    this.currentProgram = program;
+    this.ctx.useProgram(program.program);
+    
+    this.premultiplied = program.premultiplied;
+    
+    this.depthTesting = program.depthTesting;
+    
+    
+    if(program.blending === Program.BLENDING_NORMAL && program.transparent === false ) {
+      this.blending = Program.BLENDING_OFF;
+    } else {
+      this.blending = program.blending;
+    }
+    
+    this.clearColour = program.clearColour;
+    const a = this.clearColour[3];
+    // console.log('prem', this.premultipliedAlpha)
+    if(this.premultipliedAlpha) this.clearColour = this.clearColour.map((c, i) => c * a );
+    
+    this.ctx.clearColor(...this.clearColour);
+    
+    // TODO: Unlink unused buffers during this setup phase as well.
+    buffers.forEach(buffer => {
+      this.linkBuffer(buffer);
+    });
+      
+    // this.ctx.enable(ctx.DEPTH_TEST);
+    if(this.depthTesting) this.ctx.enable(this.ctx.DEPTH_TEST);
+    else this.ctx.disable(this.ctx.DEPTH_TEST);
+    
+    uniforms.forEach(uniform => {
+      uniform.bind(program.program);
+    });
+    this.uniformResolution.bind(program.program);
+  }
+  render(points, buffer) {
+    this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, buffer?.fb || null);
+    if(this.clearing) {
+      this.ctx.clear( this.ctx.COLOR_BUFFER_BIT );
+      
+      if(this.depthTesting) this.ctx.clear( this.ctx.DEPTH_BUFFER_BIT );
+    }
+    switch(this.currentProgram.renderType) {
+      case Program.RENDER_TRIANGLES: 
+        this.ctx.drawArrays(this.ctx.TRIANGLES, 0, points);
+        break;
+      case Program.RENDER_STRIP: 
+        this.ctx.drawArrays(this.ctx.TRIANGLE_STRIP, 0, points);
+        break;
+      case Program.RENDER_LINES: 
+        this.ctx.drawArrays(this.ctx.LINE_STRIP, 0, points);
+        break;
+      case Program.RENDER_LINELOOP: 
+        this.ctx.drawArrays(this.ctx.LINE_LOOP, 0, points);
+        break;
+      case Program.RENDER_POINTS: 
+        this.ctx.drawArrays(this.ctx.POINTS, 0, points);
+        break;
+    }
+    
+  }
+
+  /* SETTERS AND GETTERS */
+  get blending() {
+    return this.#blending || Program.BLENDING_NORMAL;
+  }
+  set blending(blending) {
+    
+    if(blending === Renderer.BLENDING_DEBUG) {
+      
+      if(!this.breakLog) {
+        console.log(blending, Renderer.BLENDING_OFF, this.premultiplied)
+        this.breakLog = true;
+      }
+      this.#blending = blending;
+      this.ctx.enable(this.ctx.BLEND);
+        this.ctx.blendFuncSeparate( this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA, this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA );
+      return;
+    }
+    
+    this.#blending = blending;
+    if(blending === Renderer.BLENDING_OFF) {
+      this.ctx.disable(this.ctx.BLEND);
+      this.#blendingEnabled = false;
+      return;
+    }
+		if ( this.#blendingEnabled === false ) {
+      this.ctx.enable(this.ctx.BLEND);
+      // this.ctx.alphaFunc(this.ctx.GL_GREATER, 0.5);
+      // this.ctx.enable(this.ctx.GL_ALPHA_TEST);
+			this.#blendingEnabled = true;
+		}
+    
+		if( this.premultiplied ) {
+      switch (this.blending) {
+        case Renderer.BLENDING_NORMAL:
+          this.ctx.blendFuncSeparate( this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA, this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA );
+          break;
+        case Renderer.BLENDING_ADDITIVE: 
+          this.ctx.blendFunc( this.ctx.ONE, this.ctx.ONE );
+          break;
+        case Renderer.BLENDING_SUBTRACTIVE: 
+          this.ctx.blendFuncSeparate( this.ctx.ZERO, this.ctx.ZERO, this.ctx.ONE_MINUS_SRC_COLOR, this.ctx.ONE_MINUS_SRC_ALPHA );
+          break;
+        case Renderer.BLENDING_MULTIPLY:
+          this.ctx.blendFuncSeparate( this.ctx.ZERO, this.ctx.SRC_COLOR, this.ctx.ZERO, this.ctx.SRC_ALPHA );
+          break;
+      }
+    } else {
+      switch (this.blending) {
+        case Renderer.BLENDING_NORMAL: 
+          this.ctx.blendFuncSeparate( this.ctx.SRC_ALPHA, this.ctx.ONE_MINUS_SRC_ALPHA, this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA );
+          break;
+        case Renderer.BLENDING_ADDITIVE: 
+          this.ctx.blendFunc( this.ctx.SRC_ALPHA, this.ctx.ONE );
+          break;
+        case Renderer.BLENDING_SUBTRACTIVE: 
+          this.ctx.blendFunc( this.ctx.ZERO, this.ctx.ONE_MINUS_SRC_COLOR );
+          break;
+        case Renderer.BLENDING_MULTIPLY:
+          this.ctx.blendFunc( this.ctx.ZERO, this.ctx.SRC_COLOR );
+          break;
+      }
+    }
+  }
+}
+class Buffer {
+  static #defaultAttribute = {
+        numComponents: 2,
+        offset: 0,
+        stride: 0
+      };
+  static #defaults = {
+    attributes: [{
+        name: 'position'
+      }
+    ],
+    normalized: false,
+    drawType: window.WebGLRenderingContext.STATIC_DRAW,
+    type: window.WebGLRenderingContext.FLOAT
+  }
+  constructor(ctx, data, options) {
+    this.ctx = ctx;
+    this.name = name;
+    options = Object.assign({}, Buffer.#defaults, options);
+    this.attributes = options.attributes.map(a => Object.assign({}, Buffer.#defaultAttribute, a));
+    
+    this.normalized = options.normalized;
+    this.drawType = options.drawType;
+    this.type = options.type;
+    if(data instanceof Array) data = new Float32Array(data);
+    this.data = data;
+    this.buffer = ctx.createBuffer();
+  }
+
+  link(program, hasBuffer = false) {
+    let location = this.ctx.getAttribLocation(program, `a_${this.name}`);
+    
+    this.attributes.forEach(attribute => {
+      const location = this.ctx.getAttribLocation(program, `a_${attribute.name}`);
+      this.ctx.vertexAttribPointer(location, attribute.numComponents, this.type, this.normalized, attribute.stride, attribute.offset);
+      this.ctx.enableVertexAttribArray(location);
+    });
+  }
+
+  get length() {
+    return this.data.length;
+  }
+}
+class Program {
+  
+  static RENDER_TRIANGLES     = 0;
+  static RENDER_STRIP         = 1;
+  static RENDER_LINES         = 2;
+  static RENDER_LINELOOP      = 4;
+  static RENDER_POINTS        = 8;
+  
+  static #defaultOptions = {
+    renderType: Program.RENDER_TRIANGLES,
+    clearColour: [1.0, 1.0, 1.0, 1.0],
+    blending: Renderer.BLENDING_OFF,
+    premultiplied: true,
+    transparent: false,
+    depthTesting: true
+  }
+  
+  #vShader
+  #fShader
+  #p
+  #renderType
+  
+  constructor(ctx, vertexShaderSource, fragmentShaderSource, options = {}) {
+    options = Object.assign({}, Program.#defaultOptions, options);
+    
+    this.ctx = ctx;
+    
+    this.renderType = options.renderType;
+    
+    this.clearColour = options.clearColour;
+    this.blending = options.blending;
+    this.premultiplied = options.premultiplied;
+    this.transparent = options.transparent;
+    this.depthTesting = options.depthTesting;
+    
+    // Create the shaders
+    this.vShader = Program.createShaderOfType(this.ctx, this.ctx.VERTEX_SHADER, vertexShaderSource);
+    this.fShader = Program.createShaderOfType(this.ctx, this.ctx.FRAGMENT_SHADER, fragmentShaderSource);
+    
+    // Create the program and link the shaders
+    this.#p = this.ctx.createProgram();
+    this.ctx.attachShader(this.#p, this.vShader);
+    this.ctx.attachShader(this.#p, this.fShader);
+    
+    this.ctx.linkProgram(this.#p);
+    
+    // Check the result of linking
+    var linked = this.ctx.getProgramParameter(this.#p, this.ctx.LINK_STATUS);
+    if (!linked) {
+      var error = this.ctx.getProgramInfoLog(this.#p);
+      console.log('Failed to link program: ' + error);
+      this.ctx.deleteProgram(this.#p);
+      this.ctx.deleteShader(this.fShader);
+      this.ctx.deleteShader(this.vShader);
+    }
+  }
+  
+  get program() {
+    return this.#p;
+  }
+
+  /* SETTERS AND GETTERS */
+
+  set renderType(value) {
+    if([
+      Program.RENDER_TRIANGLES,
+      Program.RENDER_STRIP,
+      Program.RENDER_LINES,
+      Program.RENDER_LINELOOP,
+      Program.RENDER_POINTS
+    ].indexOf(value) > -1) this.#renderType = value;
+  }
+  get renderType() {
+    return this.#renderType;
+  }
+  
+  /**
+   * Static Methods
+   */
+
+	/**
+	 * Create a shader of a given type given a context, type and source.
+	 *
+   * @static
+	 * @param  {WebGLContext} ctx The context under which to create the shader
+	 * @param  {WebGLShaderType} type The shader type, vertex or fragment
+	 * @param  {string} source The shader source.
+	 * @return {WebGLShader} The created shader
+	 */
+  static createShaderOfType(ctx, type, source) {
+    const shader = ctx.createShader(type);
+    ctx.shaderSource(shader, source);
+    ctx.compileShader(shader);
+    
+    // Check the compile status
+    const compiled = ctx.getShaderParameter(shader, ctx.COMPILE_STATUS);
+    if (!compiled) {
+      // Something went wrong during compilation; get the error
+      const lastError = ctx.getShaderInfoLog(shader);
+      console.error(`${Program.addLineNumbersWithError(source, lastError)}\nError compiling ${glEnumToString(ctx, type)}: ${lastError}`);
+      ctx.deleteShader(shader);
+      return null;
+    }
+    
+    return shader;
+  }
+  static addLineNumbersWithError(src, log = '') {
+    console.log(src)
+    const errorRE = /ERROR:\s*\d+:(\d+)/gi;
+    // Note: Error message formats are not defined by any spec so this may or may not work.
+    const matches = [...log.matchAll(errorRE)];
+    const lineNoToErrorMap = new Map(matches.map((m, ndx) => {
+      const lineNo = parseInt(m[1]);
+      const next = matches[ndx + 1];
+      const end = next ? next.index : log.length;
+      const msg = log.substring(m.index, end);
+      return [lineNo - 1, msg];
+    }));
+    return src.split('\n').map((line, lineNo) => {
+      const err = lineNoToErrorMap.get(lineNo);
+      return `${lineNo + 1}: ${line}${err ? `\n\n^^^ ${err}` : ''}`;
+    }).join('\n');
+  }
+}
+class Uniform {
+  static TYPE_INT = 0
+  static TYPE_FLOAT = 1
+  static TYPE_V2 = 2
+  static TYPE_V3 = 3
+  static TYPE_V4 = 4
+  static TYPE_BOOL = 5
+  static TYPE_M2 = 6
+  static TYPE_M3 = 7
+  static TYPE_M4 = 8
+  
+  #prefix = 'u'
+  
+  constructor(ctx, name, type, value) {
+    this.ctx = ctx;
+    this.name = name;
+    this.type = type;
+    this.value = value;
+  }
+  
+  prebind() {
+    
+  }
+  
+  bind(program) {
+    this.prebind(program);
+    const location = this.ctx.getUniformLocation(program, `${this.#prefix}_${this.name}`);
+    switch(this.type) {
+      case Uniform.TYPE_INT : 
+        if(!isNaN(this.value)) this.ctx.uniform1i( location, this.value );
+        break;
+      case Uniform.TYPE_FLOAT : 
+        if(!isNaN(this.value)) this.ctx.uniform1f( location, this.value);
+        break;
+      case Uniform.TYPE_V2 : 
+        if(this.value instanceof Array && this.value.length === 2.) this.ctx.uniform2fv( location, this.value);
+        break;
+      case Uniform.TYPE_V3 : 
+        if(this.value instanceof Array && this.value.length === 3.) this.ctx.uniform3fv( location, this.value);
+        break;
+      case Uniform.TYPE_V4 : 
+        if(this.value instanceof Array && this.value.length === 4.) this.ctx.uniform4fv( location, this.value);
+        break;
+      case Uniform.TYPE_BOOL : 
+        if(!isNaN(this.value)) this.ctx.uniform1i( location, this.value);
+        break;
+      case Uniform.TYPE_M2 : 
+        if(this.value instanceof Array && this.value.length === 4.) this.ctx.uniformMatrix2fv( location, false, this.value);
+      case Uniform.TYPE_M3 : 
+        if(this.value instanceof Array && this.value.length === 9.) this.ctx.uniformMatrix3fv( location, false, this.value);
+      case Uniform.TYPE_M4 : 
+        if(this.value instanceof Array && this.value.length === 16.) this.ctx.uniformMatrix4fv( location, false, this.value);
+        break;
+    }
+  }
+}
+class Texture extends Uniform {
+  #prefix = 's'
+  static #defaultOptions = {
+    textureType: 0,
+    minFilter: window.WebGLRenderingContext.LINEAR,
+    magFilter: window.WebGLRenderingContext.LINEAR,
+    makePowerOf2: false,
+    generateMipMap: false
+  }
+  static masteri = 0
+  
+  static IMAGETYPE_REGULAR = 0
+  static IMAGETYPE_TILE = 1
+  static IMAGETYPE_MIRROR = 2
+  
+  constructor(ctx, name, options) {
+    super(ctx, name, 0, null);
+    options = Object.assign({}, Texture.#defaultOptions, options);
+    this.textureType = options.textureType;
+    this.minFilter = options.minFilter;
+    this.magFilter = options.magFilter;
+    this.makePowerOf2 = options.makePowerOf2;
+    this.generateMipMap = options.generateMipMap;
+    this.url = options.url;
+    this.data = options.data;
+    this.value = Texture.masteri++;
+  }
+  async preload() {
+    const store = {};
+
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+
+    await asyncImageLoad(img, this.url);
+    
+    if(this.makePowerOf2) this.image = pow2Image(img);
+    else this.image = img;
+
+    // this.loadTexture(gl, n, store);
+    return this;
+  }
+  
+  prebind(program) {
+    if(!this.image) return;
+    
+    this.ctx.activeTexture(this.ctx.TEXTURE0 + this.value);
+    
+    const texture = this.ctx.createTexture(); // Create the texture object
+    
+    this.ctx.pixelStorei(this.ctx.UNPACK_FLIP_Y_WEBGL, true);
+    this.ctx.bindTexture(this.ctx.TEXTURE_2D, texture);
+    
+    // Set the parameters based on the passed type
+    // In WebGL images are wrapped by default, so we don't need to check for that
+    if(this.textureType === Texture.IMAGETYPE_MIRROR) {
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.MIRRORED_REPEAT);
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.MIRRORED_REPEAT);
+    } else if(this.textureType === Texture.IMAGETYPE_REGULAR) {
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+    }
+    
+    this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.minFilter);
+    this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.magFilter);
+    
+    // Upload the image into the texture.
+    if(this.data) {
+      this.ctx.texImage2D(this.ctx.TEXTURE_2D, 0, this.ctx.RGBA, this.ctx.RGBA, this.ctx.UNSIGNED_BYTE, this.data);
+    } else {
+      this.ctx.texImage2D(this.ctx.TEXTURE_2D, 0, this.ctx.RGBA, this.ctx.RGBA, this.ctx.UNSIGNED_BYTE, this.image);
+    }
+    
+    if(this.generateMipMap) this.ctx.generateMipmap(this.ctx.TEXTURE_2D);
+  }
+}
+class FrameBuffer {
+  static #defaultOptions = {
+    width: 512,
+    height: 512,
+    pxRatio: Math.min(window.devicePixelRatio, 2),
+    tiling: Texture.IMAGETYPE_REGULAR,
+    texdepth: FrameBuffer.TEXTYPE_HALF_FLOAT_OES,
+    data: null,
+    depthTesting: false
+  }
+  static TEXTYPE_FLOAT = 0
+  static TEXTYPE_UNSIGNED_BYTE = 1
+  static TEXTYPE_HALF_FLOAT_OES = 2
+
+  #fb1
+  #fb2
+  #activeFB
+  #name
+  #width
+  #height
+  #pxRatio
+  #tiling = Texture.IMAGETYPE_REGULAR
+  #texdepth = FrameBuffer.TEXTYPE_HALF_FLOAT_OES
+  #data;
+
+  constructor(renderer, name, options) {
+    options = Object.assign({}, FrameBuffer.#defaultOptions, options);
+    
+    this.width = options.width;
+    this.height = options.height;
+    this.pxRatio = options.pxRatio;
+    this.tiling = options.tiling;
+    this.texdepth = options.texdepth;
+    this.depthTesting = options.depthTesting;
+    
+    this.#name = name;
+    this.value = Texture.masteri++;
+    
+    this.ctx = renderer.ctx;
+    this.renderer = renderer;
+    
+    this.data = options.data;
+    
+    this.#fb1 = this.createFrameBuffer();
+    this.#fb2 = this.createFrameBuffer();
+    this.#activeFB = this.#fb1;
+  }
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+    this.#fb1 = this.createFrameBuffer();
+    this.#fb2 = this.createFrameBuffer();
+    this.#activeFB = this.#fb1;
+  }
+  createFrameBuffer() {
+    const targetTexture = this.ctx.createTexture();
+    this.ctx.bindTexture(this.ctx.TEXTURE_2D, targetTexture);
+    {
+      // define size and format of level 0
+      const level = 0;
+      let internalFormat = this.ctx.RGBA;
+      const border = 0;
+      let format = this.ctx.RGBA;
+      let t;
+      if(this.texdepth === FrameBuffer.TEXTYPE_FLOAT) {
+        const e = this.ctx.getExtension('OES_texture_float');
+        t = this.ctx.FLOAT;
+        // internalFormat = this.ctx.FLOAT;
+        // format = this.ctx.FLOAT;
+      } else if(this.texdepth & FrameBuffer.TEXTYPE_HALF_FLOAT_OES) {
+        // t = gl.renderer.isWebgl2 ? e.HALF_FLOAT : e.HALF_FLOAT_OES;
+        //     gl.renderer.extensions['OES_texture_half_float'] ? gl.renderer.extensions['OES_texture_half_float'].HALF_FLOAT_OES : 
+        //     gl.UNSIGNED_BYTE;
+        const e = this.ctx.getExtension('OES_texture_half_float');
+        t = this.renderer.isWebgl2 ? this.ctx.HALF_FLOAT : e.HALF_FLOAT_OES;
+        // format = gl.RGBA;
+        if(this.renderer.isWebgl2) {
+          internalFormat = this.ctx.RGBA16F;
+        }
+        // internalFormat = gl.RGB32F;
+        // format = gl.RGB32F;
+        // window.gl = gl
+        // t = e.HALF_FLOAT_OES;
+      } else {
+        t = this.ctx.UNSIGNED_BYTE;
+      }
+      const type = t;
+      const data = this.data;
+      this.ctx.texImage2D(this.ctx.TEXTURE_2D, level, internalFormat,
+                    this.width*this.pxRatio, this.height*this.pxRatio, border,
+                    format, type, data);
+      // gl.generateMipmap(gl.TEXTURE_2D);
+
+      // set the filtering so we don't need mips
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.NEAREST);
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.NEAREST);
+      
+      // Set the parameters based on the passed type
+      if(this.tiling === Texture.IMAGETYPE_TILE) {
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.REPEAT);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.REPEAT);
+      } else if(this.tiling === Texture.IMAGETYPE_MIRROR) {
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.MIRRORED_REPEAT);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.MIRRORED_REPEAT);
+      } else if(this.tiling === Texture.IMAGETYPE_REGULAR) {
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+      }
+    }
+    
+    // Create and bind the framebuffer
+    const fb = this.ctx.createFramebuffer();
+    this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, fb);
+    
+    if(this.depthTesting) {
+      var ext = this.ctx.getExtension('WEBGL_depth_texture');
+      let depth = this.ctx.createTexture();
+      this.ctx.bindTexture(this.ctx.TEXTURE_2D, depth);
+      this.ctx.texImage2D(
+        this.ctx.TEXTURE_2D, 0, this.ctx.DEPTH_COMPONENT, this.width*this.pxRatio, this.height*this.pxRatio, 0, this.ctx.DEPTH_COMPONENT, this.ctx.UNSIGNED_SHORT, null);
+      this.ctx.framebufferTexture2D(this.ctx.FRAMEBUFFER, this.ctx.DEPTH_ATTACHMENT, this.ctx.TEXTURE_2D, depth, 0);
+    }
+
+    // attach the texture as the first color attachment
+    const attachmentPoint = this.ctx.COLOR_ATTACHMENT0;
+    const level = 0;
+    this.ctx.framebufferTexture2D(
+      this.ctx.FRAMEBUFFER, 
+      attachmentPoint, 
+      this.ctx.TEXTURE_2D, 
+      targetTexture, 
+      level);
+
+    return {
+      fb: fb,
+      frameTexture: targetTexture
+    };
+  }
+  bind() {
+    // find the active texture based on the index
+    let uniform = this.ctx.getUniformLocation(this.renderer.currentProgram.program, `b_${this.#name}`);
+    
+    // Set the texture unit to the uniform
+    this.ctx.uniform1i(uniform, this.value);
+    this.ctx.activeTexture(this.ctx.TEXTURE0 + this.value);
+    // Bind the texture
+    this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.#activeFB.frameTexture);
+  }
+  render(n) {
+    this.bind();
+    
+    // Finally, ping-pong the texture
+    this.#activeFB = this.#activeFB === this.#fb1 ? this.#fb2 : this.#fb1;
+    
+    // this.renderer.render(n, this.#activeFB);
+    this.renderer.render(n, this.#activeFB, [this.width, this.height]);
+  }
+
+  set data(value) {
+    if(value instanceof Float32Array) this.#data = value;
+  }
+  get data() {
+    return this.#data || null;
+  }
+  set width(value) {
+    if(value > 0) this.#width = value;
+  }
+  get width() {
+    return this.#width || 1;
+  }
+  set height(value) {
+    if(value > 0) this.#height = value;
+  }
+  get height() {
+    return this.#height || 1;
+  }
+  set pxRatio(value) {
+    if(value > 0) this.#pxRatio = value;
+  }
+  get pxRatio() {
+    return this.#pxRatio || 1;
+  }
+  set tiling(value) {
+    if([Texture.IMAGETYPE_REGULAR, Texture.IMAGETYPE_TILE, Texture.IMAGETYPE_MIRROR].indexOf(value) > -1) this.#tiling = value;
+  }
+  get tiling() {
+    return this.#tiling;
+  }
+  set texdepth(value) {
+    if([FrameBuffer.TEXTYPE_FLOAT, FrameBuffer.TEXTYPE_UNSIGNED_BYTE, FrameBuffer.TEXTYPE_HALF_FLOAT_OES].indexOf(value) > -1) this.#texdepth = value;
+  }
+  get texdepth() {
+    return this.#texdepth;
+  }
+}
+class Camera {
+  static #defaultOptions = {
+    fov: 30 * Math.PI / 180,
+    aspect: window.innerWidth / window.innerHeight,
+    near: .5,
+    far: 100,
+    pos: new Vec3(3, 1, -5),
+    target: new Vec3(0, 0, 0),
+    up: new Vec3(0, 1, 0)
+  }
+
+  #fov
+  #aspect
+  #near
+  #far
+  #pos
+  #target
+  #up
+  #updateDebounce
+  
+  #model
+  #view
+  #proj
+  #MVP
+  
+  #u_model
+  #u_view
+  #u_proj
+  #u_MVP
+  
+  #q
+  
+  #name
+  
+  constructor(renderer, name, options) {
+    options = Object.assign({}, Camera.#defaultOptions, options);
+    
+    this.renderer = renderer; 
+    this.ctx = renderer.ctx;
+    
+    this.fov = options.fov;
+    this.aspect = options.aspect;
+    this.near = options.near;
+    this.far = options.far;
+    this.pos = options.pos;
+    this.target = options.target;
+    this.up = options.up;
+    
+    this.q = new Quat();
+    
+    this.name = name;
+    
+    this.update(true);
+  }
+  set q(value) {
+    if(value instanceof Quat) {
+      this.#q = value;
+      this.#model = quatToMat4(this.#q);
+      this.#u_model = new Uniform(this.ctx, 'm_model', Uniform.TYPE_M4, this.#model.array);
+    }
+  }
+  get q() {
+    return this.#q || new Quat();
+  }
+  update(nt = false) {
+    clearTimeout(this.#updateDebounce);
+    // this.#updateDebounce = setTimeout(() => {
+      this.#model = new Mat4();
+      this.#view = Mat4.lookAt(this.pos, this.target, this.up);
+      this.#proj = Mat4.perspective(this.fov, this.aspect, this.near, this.far);
+      this.#MVP = this.#proj.multiplyNew(this.#view).multiply(this.#model);
+      
+      this.#u_view = new Uniform(this.ctx, 'm_view', Uniform.TYPE_M4, this.#view.array);
+      this.#u_proj = new Uniform(this.ctx, 'm_proj', Uniform.TYPE_M4, this.#proj.array);
+      this.#u_MVP = new Uniform(this.ctx, 'm_MVP', Uniform.TYPE_M4, this.#MVP.array);
+      
+      this.setup = true;
+    // }, nt ? 0 : 50);
+  }
+
+  set name(value) {
+    if(typeof value === 'string') this.#name = value;
+  }
+  get name() {
+    return this.#name || 'camera';
+  }
+  set fov(value) {
+    if(!isNaN(value)) this.#fov = value;
+  }
+  get fov() {
+    return this.#fov;
+  }
+  set aspect(value) {
+    if(!isNaN(value)) this.#aspect = value;
+  }
+  get aspect() {
+    return this.#aspect;
+  }
+  set near(value) {
+    if(!isNaN(value)) this.#near = value;
+  }
+  get near() {
+    return this.#near;
+  }
+  set far(value) {
+    if(!isNaN(value)) this.#far = value;
+  }
+  get far() {
+    return this.#far;
+  }
+  set pos(value) {
+    if(value instanceof Vec3) this.#pos = value;
+  }
+  get pos() {
+    return this.#pos;
+  }
+  set target(value) {
+    if(value instanceof Vec3) this.#target = value;
+  }
+  get target() {
+    return this.#target;
+  }
+  set up(value) {
+    if(value instanceof Vec3) this.#up = value;
+  }
+  get up() {
+    return this.#up;
+  }
+  get u_model() {
+    return this.#u_model;
+  }
+  get u_view() {
+    return this.#u_view;
+  }
+  get u_proj() {
+    return this.#u_proj;
+  }
+  get u_MVP() {
+    return this.#u_MVP;
+  }
+  get uniforms() {
+    return [this.u_model, this.u_view, this.u_proj, this.u_MVP];
+  }
+}
+
+setup();
\ No newline at end of file
diff --git a/firefly-flow/src/style.css b/firefly-flow/src/style.css
new file mode 100644
index 0000000..a10ea16
--- /dev/null
+++ b/firefly-flow/src/style.css
@@ -0,0 +1,60 @@
+body {
+  background: #666;
+  margin: 0;
+  overflow: hidden;
+}
+canvas {
+  height: 100vh;
+  width: 100vw;
+  touch-action: none;
+}
+.osc {
+  left: 0px;
+  position: fixed;
+  top: 0px;
+}
+
+.button {
+  position: fixed;
+  z-index: 10;
+  right: 0;
+  bottom: 0;
+}
+.controls {
+  position: fixed;
+  z-index: 10;
+  left: 0;
+  bottom: 0;
+}
+.playpause {
+  background: #AAB;
+  padding: 10px;
+}
+.playpause label {
+  display: block;
+  box-sizing: border-box;
+
+  width: 0;
+  height: 20px;
+
+  cursor: pointer;
+
+  border-color: transparent transparent transparent #202020;
+  transition: 100ms all ease;
+  will-change: border-width;
+
+  border-style: double;
+  border-width: 0px 0 0px 20px;
+}
+.playpause input[type='checkbox'] {
+  visibility: hidden;
+}
+.playpause.checked label {
+  border-style: double;
+  border-width: 0px 0 0px 20px;
+}
+.playpause label {
+  border-style: solid;
+  border-width: 10px 0 10px 20px;
+}
+/* } */
\ No newline at end of file
diff --git a/fishes/README.markdown b/fishes/README.markdown
new file mode 100644
index 0000000..1812cc1
--- /dev/null
+++ b/fishes/README.markdown
@@ -0,0 +1,5 @@
+# Fishes
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pork00chops/pen/vYXmbQW](https://codepen.io/pork00chops/pen/vYXmbQW).
+
+
diff --git a/fishes/dist/index.html b/fishes/dist/index.html
new file mode 100644
index 0000000..f682941
--- /dev/null
+++ b/fishes/dist/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Fishes</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+    <div class="fish1">
+      <div class="fin1"></div>
+      <div class="fin2"></div>
+      <div class="f1">
+      <div class="e1"></div>
+      <div class="nose"></div>
+    </div>
+    </div>
+    <div class="fish2">
+      <div class="fin3"></div>
+      <div class="f2">
+      <div class="e2"></div>
+      <div class="nose1"></div>
+    </div>
+    </div>
+    <div class="fish3">
+      <div class="fin4"></div>
+      <div class="f3">
+      <div class="e3"></div>
+      <div class="nose2"></div>
+    </div>
+    </div>
+    <div class="fish4">
+      <div class="fin5"></div>
+      <div class="fin6"></div>
+      <div class="f4">
+      <div class="e4"></div>
+      <div class="nose3"></div>
+    </div>
+    </div>
+    <div class="fish5">
+      <div class="fin7"></div>
+      <div class="f5"></div>
+      <div class="e5"></div>
+      <div class="nose4"></div>
+    </div>
+    <div class="fish6">
+      <div class="fin8"></div>
+      <div class="fin9"></div>
+      <div class="f6"></div>
+      <div class="e6"></div>
+      <div class="nose5"></div>
+    </div>
+  <div class="b1"></div>
+  <div class="b2"></div>
+  <div class="b3"></div>
+  <div class="b4"></div>
+  <div class="b5"></div>
+  <div class="b6"></div>
+  <div class="b7"></div>
+  <div class="b8"></div>
+  <div class="b9"></div>
+  <div class="b10"></div>
+    </div>
+  <div class="F"></div>
+  <div class="f"></div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/fishes/dist/style.css b/fishes/dist/style.css
new file mode 100644
index 0000000..aa52b6b
--- /dev/null
+++ b/fishes/dist/style.css
@@ -0,0 +1,628 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  background: #006d77;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.container {
+  background: #023047;
+  height: 400px;
+  width: 300px;
+  position: relative;
+  overflow: hidden;
+}
+.container::before {
+  content: '';
+  background: #006d77;
+  height: 190px;
+  width: 500px;
+  top: 260px;
+  left: 120px;
+  position: absolute;
+  border-radius: 50px;
+  z-index: 99;
+}
+.container::after {
+content: '';
+  background: #006d77;
+  height: 60px;
+  width: 500px;
+  top: 110px;
+  left: 120px;
+  position: absolute;
+border-radius: 50px;
+  z-index: 99;
+} 
+.fish1 {
+  position: relative;
+  top: 4px;
+  left: -40px;
+  transform: scale(.7);
+  animation: fish 21s infinite reverse linear;
+}
+.f1 {
+   background: rgb(248,237,235);
+background: linear-gradient(90deg, rgba(248,237,235,1) 0%, rgba(227,100,20,1) 30%, rgba(248,237,235,1) 60%, rgba(227,100,20,1) 90%); 
+  height: 20px;
+  width: 90px;
+  overflow: hidden;
+  border-radius: 50px;
+  position: absolute;
+  top: 20px;
+}
+.fin1 {
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: transparent;
+  border: 1px solid white;
+  height: 20px;
+  width: 20px;
+  top: 8px;
+  left: 30px;
+}
+.fin2 {
+  position: relative;
+  border-radius: 100% 32% 100% 0%;
+  background: transparent;
+  border: 1px solid white;
+  height: 15px;
+  width: 20px;
+  left: 80px;
+  top: 15px;
+}
+.fin2::after {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: transparent;
+  border: 1px solid white;
+  height: 14px;
+  width: 19px;
+  top: 12px;
+  transform: rotate(45deg);
+}
+.e1 {
+  position: relative;
+  background: #e36414;
+  border-radius: 100%;
+  height: 9px;
+  width: 9px;
+  left: 8px;
+  top: 5px;
+}
+.e1::after {
+  content: '';
+  position: absolute;
+  background: #333;
+  border-radius: 100%;
+  height: 5px;
+  width: 5px;
+  left: 2.3px;
+  top: 1.8px;
+}
+.nose {
+  position: absolute;
+  border-radius: 100%;
+  background: #333;
+  height: 3px;
+  width: 3px;
+  left: 2px;
+}
+.fish2 {
+  position: relative;
+  top: 30px;
+  left: -60px;
+  transform: scale(.6);
+  animation: fish 35s infinite reverse linear;
+}
+.f2 {
+   background: rgb(248,237,235);
+background: linear-gradient(180deg, rgba(248,237,235,1) 0%, rgba(237,163,119,1) 32%, rgba(227,100,20,1) 74%); 
+  position: absolute;
+  overflow: hidden;
+  height: 70px;
+  width: 90px;
+  border-radius: 100%;
+}
+.e2 {
+  position: relative;
+  background: #fff;
+  border-radius: 100%;
+  height: 19px;
+  width: 19px;
+  left: 18px;
+  top: 15px;
+}
+.e2::after {
+  content: '';
+  position: absolute;
+  background: #333;
+  border-radius: 100%;
+  height: 12px;
+  width: 12px;
+  left: 3.6px;
+  top: 3.6px;
+}
+.nose1 {
+  position: absolute;
+  border-radius: 100%;
+  background: #333;
+  height: 4px;
+  width: 4px;
+  left: 6px;
+  top: 35px;
+}
+.fin3 {
+  position: relative;
+  border-radius: 100% 32% 100% 0%;
+  background: #028090;
+  height: 20px;
+  width: 30px;
+  left: 80px;
+  top: 35px;
+}
+.fin3::before {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: #028090;
+  height: 20px;
+  width: 30px;
+  top: 15px;
+  left: 0px;
+  transform: rotate(20deg);
+}
+.fin3::after {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: #028090;
+  height: 20px;
+  width: 25px;
+  top: 30px;
+  transform: rotate(45deg);
+}
+.fish3 {
+  position: relative;
+  top: 90px;
+  left: -70px;
+  transform: scale(.7);
+  animation: fish 40s infinite linear;
+}
+.f3 {
+   background: rgb(248,237,235);
+background: linear-gradient(270deg, rgba(248,237,235,1) 16%, rgba(20,69,82,1) 45%); 
+  position: absolute;
+  overflow: hidden;
+  height: 40px;
+  width: 120px;
+  left: 60px;
+border-radius: 85% 100% 100% 85%;
+}
+.e3 {
+  position: relative;
+  background: orange;
+  border-radius: 100%;
+  height: 15px;
+  width: 15px;
+  left: 88px;
+  top: 10px;
+}
+.e3::after {
+  content: '';
+  position: absolute;
+  background: #333;
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+  left: 3.6px;
+  top: 3.6px;
+}
+.nose2 {
+  position: absolute;
+  border-radius: 100%;
+  background: #333;
+  height: 4px;
+  width: 4px;
+  left: 110px;
+  top: 20px;
+}
+.fin4 {
+  position: relative;
+  border-radius: 100% 32% 100% 0%;
+  background: orange;
+  height: 20px;
+  width: 20px;
+  left: 45px;
+  top: 36px;
+  transform: rotate(180deg);
+}
+.fin4::before {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: orange;
+  height: 20px;
+  width: 20px;
+  top: 10px;
+  transform: rotate(85deg);
+}
+.fin4::after {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: transparent;
+  border: 1px solid white;
+  height: 24px;
+  width: 20px;
+  left: -60px;
+  top: 23px;
+  transform: rotate(85deg);
+}
+.fish4 {
+  position: relative;
+  top: 130px;
+  left: -85px;
+  transform: scale(.6);
+  animation: fish 28s infinite linear;
+}
+.f4 {
+    background: rgb(248,237,235);
+background: linear-gradient(0deg, rgba(248,237,235,1) 0%, rgba(20,69,82,1) 98%); 
+  position: absolute;
+  overflow: hidden;
+  height: 50px;
+  width: 130px;
+  left: 60px;
+border-radius: 85% 100% 100% 85%;
+}
+.e4 {
+  position: relative;
+  background: orange;
+  border-radius: 100%;
+  height: 15px;
+  width: 15px;
+  left: 98px;
+  top: 15px;
+}
+.e4::after {
+  content: '';
+  position: absolute;
+  background: #333;
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+  left: 3.6px;
+  top: 3.6px;
+}
+.nose3 {
+  position: absolute;
+  border-radius: 100%;
+  background: #333;
+  height: 4px;
+  width: 4px;
+  left: 118px;
+  top: 25px;
+}
+.fin5 {
+  position: relative;
+  border-radius: 100% 32% 100% 0%;
+  background: orange;
+  height: 10px;
+  width: 20px;
+  left: 45px;
+  top: 36px;
+  transform: rotate(180deg);
+}
+.fin5::before {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: orange;
+  height: 10px;
+  width: 20px;
+  top: 7px;
+  transform: rotate(20deg);
+}
+.fin5::after {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: orange;
+  height: 10px;
+  width: 20px;
+  left: 0px;
+  top: 15px;
+  transform: rotate(35deg);
+}
+.fin6 {
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: orange;
+  height: 24px;
+  width: 30px;
+  left: 100px;
+  top: -5px;
+  transform: rotate(230deg);
+}
+.fish5 {
+  position: relative;
+  top: 160px;
+  left: -85px;
+  transform: scale(.6);
+  animation: fish 20s infinite linear;
+}
+
+.f5 {
+    background: rgb(250,163,7);
+background: linear-gradient(180deg, rgba(250,163,7,1) 52%, rgba(180,171,61,1) 77%, rgba(82,183,136,1) 100%);  
+  position: absolute;
+  overflow: hidden;
+  height: 60px;
+  width: 80px;
+  left: 60px;
+border-radius: 100%;
+}
+.e5 {
+  position: relative;
+  background: white;
+  border-radius: 100%;
+  height: 15px;
+  width: 15px;
+  left: 108px;
+  top: 15px;
+}
+.e5::after {
+  content: '';
+  position: absolute;
+  background: #333;
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+  left: 3.6px;
+  top: 3.6px;
+}
+.nose4 {
+  position: absolute;
+  border-radius: 100%;
+  background: #333;
+  height: 4px;
+  width: 4px;
+  left: 128px;
+  top: 45px;
+}
+.fin7 {
+  position: relative;
+  border-radius: 100% 32% 100% 0%;
+  background: #3f37c9;
+  height: 20px;
+  width: 20px;
+  left: 48px;
+  top: 40px;
+  transform: rotate(220deg);
+}
+.fin7::before {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: #3f37c9;
+  height: 15px;
+  width: 15px;
+  top: -8px;
+  left: -5px;
+  transform: rotate(-20deg);
+}
+.fin7::after {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: #3f37c9;
+  height: 10px;
+  width: 20px;
+  left: 10px;
+  top: 11px;
+  transform: rotate(-15deg);
+}
+.fish6 {
+  position: relative;
+  top: 180px;
+  left: -85px;
+  transform: scale(.6);
+  animation: fish 30s infinite linear;
+}
+.f6 {
+     background: rgb(15,76,92);
+background: linear-gradient(90deg, rgba(15,76,92,1) 4%, rgba(251,133,0,1) 22%, rgba(15,76,92,1) 39%, rgba(251,133,0,1) 57%, rgba(15,76,92,1) 76%, rgba(254,250,224,1) 93%);   
+  position: absolute;
+  overflow: hidden;
+  height: 50px;
+  width: 130px;
+  left: 60px;
+border-radius: 100%;
+}
+.e6 {
+  position: relative;
+  background: white;
+  border-radius: 100%;
+  height: 15px;
+  width: 15px;
+  left: 162px;
+  top: 15px;
+}
+.e6::after {
+  content: '';
+  position: absolute;
+  background: #333;
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+  left: 3.6px;
+  top: 3.6px;
+}
+.nose5 {
+  position: absolute;
+  border-radius: 100%;
+  background: #333;
+  height: 4px;
+  width: 4px;
+  left: 178px;
+  top: 45px;
+}
+.fin8 {
+  position: relative;
+  border-radius: 100% 32% 100% 0%;
+  background: #0f4c5c;
+  height: 20px;
+  width: 20px;
+  left: 48px;
+  top: 43px;
+  transform: rotate(220deg);
+}
+.fin8::after {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: #0f4c5c;
+  height: 20px;
+  width: 20px;
+  left: 10px;
+  top: 11px;
+  transform: rotate(12deg);
+}
+.fin9 {
+  position: absolute;
+  border-radius: 100% 0% 100% 32%;
+  background: transparent;
+  border: 1px solid white;
+  height: 20px;
+  width: 30px;
+  top: 65px;
+  left: 110px;
+  transform: rotate(12deg);
+}
+.b1 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 20px; 
+  border-radius: 100% 30%;
+  left: 230px;
+  top: 210px;
+  opacity: 0.5;
+}
+.b2 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 40px;
+  width: 20px; 
+  border-radius: 100% 30%;
+  left: 250px;
+  top: 220px;
+  opacity: 0.5;
+  transform: rotate(35deg);
+}
+.b3 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 10px; 
+  border-radius: 100% 30%;
+  left: 215px;
+  top: 210px;
+  opacity: 0.5;
+  transform: rotate(-35deg);
+}
+.b4 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 20px; 
+  border-radius: 100% 30%;
+  left: 100px;
+  top: 350px;
+  opacity: 0.5;
+}
+.b5 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 40px;
+  width: 20px; 
+  border-radius: 100% 30%;
+  left: 80px;
+  top: 360px;
+  opacity: 0.5;
+  transform: rotate(5deg);
+}
+.b6 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 10px; 
+  border-radius: 100% 30%;
+  left: 65px;
+  top: 350px;
+  opacity: 0.5;
+  transform: rotate(-35deg);
+}
+.b7 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 10px; 
+  border-radius: 100% 30%;
+  left: 5px;
+  top: 50px;
+  opacity: 0.5;
+  transform: rotate(35deg);
+}
+.b8 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 10px; 
+  border-radius: 100% 30%;
+  left: 5px;
+  top: 37px;
+  opacity: 0.5;
+  transform: rotate(25deg);
+}
+.b9 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 20px;
+  width: 50px; 
+  border-radius: 100% 30%;
+  left: 165px;
+  top: 80px;
+  opacity: 0.5;
+  transform: rotate(-35deg);
+}
+.b10 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 30px; 
+  border-radius: 100% 30%;
+  left: 155px;
+  top: 55px;
+  opacity: 0.5;
+  transform: rotate(-35deg);
+}
+@keyframes fish {
+  from { margin-left: -50%; } 
+  to { margin-left: 150%; }
+}
\ No newline at end of file
diff --git a/fishes/license.txt b/fishes/license.txt
new file mode 100644
index 0000000..19033aa
--- /dev/null
+++ b/fishes/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Łumbini (https://codepen.io/pork00chops/pen/vYXmbQW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/fishes/src/index.html b/fishes/src/index.html
new file mode 100644
index 0000000..e41506b
--- /dev/null
+++ b/fishes/src/index.html
@@ -0,0 +1,57 @@
+<div class="container">
+    <div class="fish1">
+      <div class="fin1"></div>
+      <div class="fin2"></div>
+      <div class="f1">
+      <div class="e1"></div>
+      <div class="nose"></div>
+    </div>
+    </div>
+    <div class="fish2">
+      <div class="fin3"></div>
+      <div class="f2">
+      <div class="e2"></div>
+      <div class="nose1"></div>
+    </div>
+    </div>
+    <div class="fish3">
+      <div class="fin4"></div>
+      <div class="f3">
+      <div class="e3"></div>
+      <div class="nose2"></div>
+    </div>
+    </div>
+    <div class="fish4">
+      <div class="fin5"></div>
+      <div class="fin6"></div>
+      <div class="f4">
+      <div class="e4"></div>
+      <div class="nose3"></div>
+    </div>
+    </div>
+    <div class="fish5">
+      <div class="fin7"></div>
+      <div class="f5"></div>
+      <div class="e5"></div>
+      <div class="nose4"></div>
+    </div>
+    <div class="fish6">
+      <div class="fin8"></div>
+      <div class="fin9"></div>
+      <div class="f6"></div>
+      <div class="e6"></div>
+      <div class="nose5"></div>
+    </div>
+  <div class="b1"></div>
+  <div class="b2"></div>
+  <div class="b3"></div>
+  <div class="b4"></div>
+  <div class="b5"></div>
+  <div class="b6"></div>
+  <div class="b7"></div>
+  <div class="b8"></div>
+  <div class="b9"></div>
+  <div class="b10"></div>
+    </div>
+  <div class="F"></div>
+  <div class="f"></div>
\ No newline at end of file
diff --git a/fishes/src/style.css b/fishes/src/style.css
new file mode 100644
index 0000000..aa52b6b
--- /dev/null
+++ b/fishes/src/style.css
@@ -0,0 +1,628 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  background: #006d77;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.container {
+  background: #023047;
+  height: 400px;
+  width: 300px;
+  position: relative;
+  overflow: hidden;
+}
+.container::before {
+  content: '';
+  background: #006d77;
+  height: 190px;
+  width: 500px;
+  top: 260px;
+  left: 120px;
+  position: absolute;
+  border-radius: 50px;
+  z-index: 99;
+}
+.container::after {
+content: '';
+  background: #006d77;
+  height: 60px;
+  width: 500px;
+  top: 110px;
+  left: 120px;
+  position: absolute;
+border-radius: 50px;
+  z-index: 99;
+} 
+.fish1 {
+  position: relative;
+  top: 4px;
+  left: -40px;
+  transform: scale(.7);
+  animation: fish 21s infinite reverse linear;
+}
+.f1 {
+   background: rgb(248,237,235);
+background: linear-gradient(90deg, rgba(248,237,235,1) 0%, rgba(227,100,20,1) 30%, rgba(248,237,235,1) 60%, rgba(227,100,20,1) 90%); 
+  height: 20px;
+  width: 90px;
+  overflow: hidden;
+  border-radius: 50px;
+  position: absolute;
+  top: 20px;
+}
+.fin1 {
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: transparent;
+  border: 1px solid white;
+  height: 20px;
+  width: 20px;
+  top: 8px;
+  left: 30px;
+}
+.fin2 {
+  position: relative;
+  border-radius: 100% 32% 100% 0%;
+  background: transparent;
+  border: 1px solid white;
+  height: 15px;
+  width: 20px;
+  left: 80px;
+  top: 15px;
+}
+.fin2::after {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: transparent;
+  border: 1px solid white;
+  height: 14px;
+  width: 19px;
+  top: 12px;
+  transform: rotate(45deg);
+}
+.e1 {
+  position: relative;
+  background: #e36414;
+  border-radius: 100%;
+  height: 9px;
+  width: 9px;
+  left: 8px;
+  top: 5px;
+}
+.e1::after {
+  content: '';
+  position: absolute;
+  background: #333;
+  border-radius: 100%;
+  height: 5px;
+  width: 5px;
+  left: 2.3px;
+  top: 1.8px;
+}
+.nose {
+  position: absolute;
+  border-radius: 100%;
+  background: #333;
+  height: 3px;
+  width: 3px;
+  left: 2px;
+}
+.fish2 {
+  position: relative;
+  top: 30px;
+  left: -60px;
+  transform: scale(.6);
+  animation: fish 35s infinite reverse linear;
+}
+.f2 {
+   background: rgb(248,237,235);
+background: linear-gradient(180deg, rgba(248,237,235,1) 0%, rgba(237,163,119,1) 32%, rgba(227,100,20,1) 74%); 
+  position: absolute;
+  overflow: hidden;
+  height: 70px;
+  width: 90px;
+  border-radius: 100%;
+}
+.e2 {
+  position: relative;
+  background: #fff;
+  border-radius: 100%;
+  height: 19px;
+  width: 19px;
+  left: 18px;
+  top: 15px;
+}
+.e2::after {
+  content: '';
+  position: absolute;
+  background: #333;
+  border-radius: 100%;
+  height: 12px;
+  width: 12px;
+  left: 3.6px;
+  top: 3.6px;
+}
+.nose1 {
+  position: absolute;
+  border-radius: 100%;
+  background: #333;
+  height: 4px;
+  width: 4px;
+  left: 6px;
+  top: 35px;
+}
+.fin3 {
+  position: relative;
+  border-radius: 100% 32% 100% 0%;
+  background: #028090;
+  height: 20px;
+  width: 30px;
+  left: 80px;
+  top: 35px;
+}
+.fin3::before {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: #028090;
+  height: 20px;
+  width: 30px;
+  top: 15px;
+  left: 0px;
+  transform: rotate(20deg);
+}
+.fin3::after {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: #028090;
+  height: 20px;
+  width: 25px;
+  top: 30px;
+  transform: rotate(45deg);
+}
+.fish3 {
+  position: relative;
+  top: 90px;
+  left: -70px;
+  transform: scale(.7);
+  animation: fish 40s infinite linear;
+}
+.f3 {
+   background: rgb(248,237,235);
+background: linear-gradient(270deg, rgba(248,237,235,1) 16%, rgba(20,69,82,1) 45%); 
+  position: absolute;
+  overflow: hidden;
+  height: 40px;
+  width: 120px;
+  left: 60px;
+border-radius: 85% 100% 100% 85%;
+}
+.e3 {
+  position: relative;
+  background: orange;
+  border-radius: 100%;
+  height: 15px;
+  width: 15px;
+  left: 88px;
+  top: 10px;
+}
+.e3::after {
+  content: '';
+  position: absolute;
+  background: #333;
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+  left: 3.6px;
+  top: 3.6px;
+}
+.nose2 {
+  position: absolute;
+  border-radius: 100%;
+  background: #333;
+  height: 4px;
+  width: 4px;
+  left: 110px;
+  top: 20px;
+}
+.fin4 {
+  position: relative;
+  border-radius: 100% 32% 100% 0%;
+  background: orange;
+  height: 20px;
+  width: 20px;
+  left: 45px;
+  top: 36px;
+  transform: rotate(180deg);
+}
+.fin4::before {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: orange;
+  height: 20px;
+  width: 20px;
+  top: 10px;
+  transform: rotate(85deg);
+}
+.fin4::after {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: transparent;
+  border: 1px solid white;
+  height: 24px;
+  width: 20px;
+  left: -60px;
+  top: 23px;
+  transform: rotate(85deg);
+}
+.fish4 {
+  position: relative;
+  top: 130px;
+  left: -85px;
+  transform: scale(.6);
+  animation: fish 28s infinite linear;
+}
+.f4 {
+    background: rgb(248,237,235);
+background: linear-gradient(0deg, rgba(248,237,235,1) 0%, rgba(20,69,82,1) 98%); 
+  position: absolute;
+  overflow: hidden;
+  height: 50px;
+  width: 130px;
+  left: 60px;
+border-radius: 85% 100% 100% 85%;
+}
+.e4 {
+  position: relative;
+  background: orange;
+  border-radius: 100%;
+  height: 15px;
+  width: 15px;
+  left: 98px;
+  top: 15px;
+}
+.e4::after {
+  content: '';
+  position: absolute;
+  background: #333;
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+  left: 3.6px;
+  top: 3.6px;
+}
+.nose3 {
+  position: absolute;
+  border-radius: 100%;
+  background: #333;
+  height: 4px;
+  width: 4px;
+  left: 118px;
+  top: 25px;
+}
+.fin5 {
+  position: relative;
+  border-radius: 100% 32% 100% 0%;
+  background: orange;
+  height: 10px;
+  width: 20px;
+  left: 45px;
+  top: 36px;
+  transform: rotate(180deg);
+}
+.fin5::before {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: orange;
+  height: 10px;
+  width: 20px;
+  top: 7px;
+  transform: rotate(20deg);
+}
+.fin5::after {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: orange;
+  height: 10px;
+  width: 20px;
+  left: 0px;
+  top: 15px;
+  transform: rotate(35deg);
+}
+.fin6 {
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: orange;
+  height: 24px;
+  width: 30px;
+  left: 100px;
+  top: -5px;
+  transform: rotate(230deg);
+}
+.fish5 {
+  position: relative;
+  top: 160px;
+  left: -85px;
+  transform: scale(.6);
+  animation: fish 20s infinite linear;
+}
+
+.f5 {
+    background: rgb(250,163,7);
+background: linear-gradient(180deg, rgba(250,163,7,1) 52%, rgba(180,171,61,1) 77%, rgba(82,183,136,1) 100%);  
+  position: absolute;
+  overflow: hidden;
+  height: 60px;
+  width: 80px;
+  left: 60px;
+border-radius: 100%;
+}
+.e5 {
+  position: relative;
+  background: white;
+  border-radius: 100%;
+  height: 15px;
+  width: 15px;
+  left: 108px;
+  top: 15px;
+}
+.e5::after {
+  content: '';
+  position: absolute;
+  background: #333;
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+  left: 3.6px;
+  top: 3.6px;
+}
+.nose4 {
+  position: absolute;
+  border-radius: 100%;
+  background: #333;
+  height: 4px;
+  width: 4px;
+  left: 128px;
+  top: 45px;
+}
+.fin7 {
+  position: relative;
+  border-radius: 100% 32% 100% 0%;
+  background: #3f37c9;
+  height: 20px;
+  width: 20px;
+  left: 48px;
+  top: 40px;
+  transform: rotate(220deg);
+}
+.fin7::before {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: #3f37c9;
+  height: 15px;
+  width: 15px;
+  top: -8px;
+  left: -5px;
+  transform: rotate(-20deg);
+}
+.fin7::after {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: #3f37c9;
+  height: 10px;
+  width: 20px;
+  left: 10px;
+  top: 11px;
+  transform: rotate(-15deg);
+}
+.fish6 {
+  position: relative;
+  top: 180px;
+  left: -85px;
+  transform: scale(.6);
+  animation: fish 30s infinite linear;
+}
+.f6 {
+     background: rgb(15,76,92);
+background: linear-gradient(90deg, rgba(15,76,92,1) 4%, rgba(251,133,0,1) 22%, rgba(15,76,92,1) 39%, rgba(251,133,0,1) 57%, rgba(15,76,92,1) 76%, rgba(254,250,224,1) 93%);   
+  position: absolute;
+  overflow: hidden;
+  height: 50px;
+  width: 130px;
+  left: 60px;
+border-radius: 100%;
+}
+.e6 {
+  position: relative;
+  background: white;
+  border-radius: 100%;
+  height: 15px;
+  width: 15px;
+  left: 162px;
+  top: 15px;
+}
+.e6::after {
+  content: '';
+  position: absolute;
+  background: #333;
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+  left: 3.6px;
+  top: 3.6px;
+}
+.nose5 {
+  position: absolute;
+  border-radius: 100%;
+  background: #333;
+  height: 4px;
+  width: 4px;
+  left: 178px;
+  top: 45px;
+}
+.fin8 {
+  position: relative;
+  border-radius: 100% 32% 100% 0%;
+  background: #0f4c5c;
+  height: 20px;
+  width: 20px;
+  left: 48px;
+  top: 43px;
+  transform: rotate(220deg);
+}
+.fin8::after {
+  content: '';
+  position: absolute;
+  border-radius: 100% 32% 100% 0%;
+  background: #0f4c5c;
+  height: 20px;
+  width: 20px;
+  left: 10px;
+  top: 11px;
+  transform: rotate(12deg);
+}
+.fin9 {
+  position: absolute;
+  border-radius: 100% 0% 100% 32%;
+  background: transparent;
+  border: 1px solid white;
+  height: 20px;
+  width: 30px;
+  top: 65px;
+  left: 110px;
+  transform: rotate(12deg);
+}
+.b1 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 20px; 
+  border-radius: 100% 30%;
+  left: 230px;
+  top: 210px;
+  opacity: 0.5;
+}
+.b2 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 40px;
+  width: 20px; 
+  border-radius: 100% 30%;
+  left: 250px;
+  top: 220px;
+  opacity: 0.5;
+  transform: rotate(35deg);
+}
+.b3 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 10px; 
+  border-radius: 100% 30%;
+  left: 215px;
+  top: 210px;
+  opacity: 0.5;
+  transform: rotate(-35deg);
+}
+.b4 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 20px; 
+  border-radius: 100% 30%;
+  left: 100px;
+  top: 350px;
+  opacity: 0.5;
+}
+.b5 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 40px;
+  width: 20px; 
+  border-radius: 100% 30%;
+  left: 80px;
+  top: 360px;
+  opacity: 0.5;
+  transform: rotate(5deg);
+}
+.b6 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 10px; 
+  border-radius: 100% 30%;
+  left: 65px;
+  top: 350px;
+  opacity: 0.5;
+  transform: rotate(-35deg);
+}
+.b7 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 10px; 
+  border-radius: 100% 30%;
+  left: 5px;
+  top: 50px;
+  opacity: 0.5;
+  transform: rotate(35deg);
+}
+.b8 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 10px; 
+  border-radius: 100% 30%;
+  left: 5px;
+  top: 37px;
+  opacity: 0.5;
+  transform: rotate(25deg);
+}
+.b9 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 20px;
+  width: 50px; 
+  border-radius: 100% 30%;
+  left: 165px;
+  top: 80px;
+  opacity: 0.5;
+  transform: rotate(-35deg);
+}
+.b10 {
+  position: absolute; 
+  background: rgb(77,144,142);
+background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%); 
+  height: 60px;
+  width: 30px; 
+  border-radius: 100% 30%;
+  left: 155px;
+  top: 55px;
+  opacity: 0.5;
+  transform: rotate(-35deg);
+}
+@keyframes fish {
+  from { margin-left: -50%; } 
+  to { margin-left: 150%; }
+}
\ No newline at end of file
diff --git a/fishing-game/README.markdown b/fishing-game/README.markdown
new file mode 100644
index 0000000..d404306
--- /dev/null
+++ b/fishing-game/README.markdown
@@ -0,0 +1,9 @@
+# Fishing Game
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/MarioD/pen/ymzNOO](https://codepen.io/MarioD/pen/ymzNOO).
+
+Click and hold your mouse button, press any key, or tap on your phone to move the anchor.
+
+Fill the bar to catch the fish.
+
+Based on the fishing game from Stardew Valley.
diff --git a/fishing-game/dist/index.html b/fishing-game/dist/index.html
new file mode 100644
index 0000000..801d02d
--- /dev/null
+++ b/fishing-game/dist/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Fishing Game</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="game">
+
+  <!-- /////////// -->
+  <!-- Fishing rod -->
+  <!-- /////////// -->
+
+  <div class="fishing-rod">
+    <img class="fill-container" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-fishing-rod.svg" alt="">
+    <canvas class="reel-line-tension" data-element="reel-line-tension"></canvas>
+    <div class="reel-handle">
+      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-reel-handle.svg" alt="">
+    </div>
+    <div class="reel-line"></div>
+  </div>
+
+  <!-- ///////// -->
+  <!-- Game body -->
+  <!-- ///////// -->
+
+  <div class="game-body">
+    <img class="fill-container" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-game-body-bg.svg" alt="">
+    <canvas class="bubbles" data-element="bubbles"></canvas>
+    <canvas class="seaweed" data-element="seaweed"></canvas>
+    <img class="seafloor fill-container" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-sea-floor.svg" alt="">
+    <div class="fish">
+      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-fish.svg" alt="">
+    </div>
+    <div class="indicator">
+      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-indicator.svg" alt="">
+    </div>
+    <img class="glass fill-container" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-glass.svg" alt="">
+  </div>
+
+  <!-- //////////// -->
+  <!-- Progress bar -->
+  <!-- //////////// -->
+
+  <div class="progress-bar">
+    <img class="fill-container" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-progress-bar-bg.svg" alt="">
+    <div class="progress-gradient-wrapper">
+      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-progress-gradient.svg" class="progress-gradient" alt="">
+    </div>
+  </div>
+
+</div>
+<!-- .game -->
+
+<!-- /////// -->
+<!-- Success -->
+<!-- /////// -->
+
+<div class="success">
+  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-nice-catch.png" alt="" class="nice-catch">
+  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-perfect.png" alt="" class="perfect">
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/fishing-game/dist/script.js b/fishing-game/dist/script.js
new file mode 100644
index 0000000..2bb514d
--- /dev/null
+++ b/fishing-game/dist/script.js
@@ -0,0 +1,435 @@
+// ----
+// Game
+// ----
+
+(function () {
+  let gameOver = false;
+
+  // --------------
+  // Animation loop
+  // --------------
+
+  function animationLoop() {
+    if (!gameOver) {
+      indicator.updatePosition();
+      indicator.detectCollision();
+      progressBar.updateUi();
+      progressBar.detectGameEnd();
+      fish.updateFishPosition();
+      requestAnimationFrame(animationLoop);
+    }
+  }
+
+  // ---------
+  // Indicator
+  // ---------
+
+  class Indicator {
+    constructor() {
+      this.indicator = document.querySelector('.indicator');
+      this.height = this.indicator.clientHeight;
+      this.y = 0;
+      this.velocity = 0;
+      this.acceleration = 0;
+      this.topBounds = gameBody.clientHeight * -1 + 48;
+      this.bottomBounds = 0;
+    }
+
+    applyForce(force) {
+      this.acceleration += force;
+    }
+
+    updatePosition() {
+      this.velocity += this.acceleration;
+      this.y += this.velocity;
+
+      //  Reset acceleration
+      indicator.acceleration = 0;
+
+      // Change direction when hitting the bottom + add friction
+      if (this.y > this.bottomBounds) {
+        this.y = 0;
+        this.velocity *= 0.5;
+        this.velocity *= -1;
+      }
+
+      // Prevent from going beyond the top
+      // Don't apply button forces when beyond the top
+      // console.log(indicator.y, this.topBounds);
+      if (indicator.y < this.topBounds) {
+        indicator.y = this.topBounds;
+        indicator.velocity = 0;
+      } else {
+        if (keyPressed) {
+          indicator.applyForce(-0.5);
+        }
+      }
+
+      // Apply constant force
+      indicator.applyForce(0.3);
+
+      // Update object position
+      this.indicator.style.transform = `translateY(${this.y}px)`;
+    }
+
+    detectCollision() {
+      if (
+      fish.y < this.y && fish.y > this.y - this.height ||
+      fish.y - fish.height < this.y && fish.y - fish.height > this.y - this.height)
+      {
+        progressBar.fill();
+        document.body.classList.add('collision');
+      } else {
+        progressBar.drain();
+        document.body.classList.remove('collision');
+      }
+    }}
+
+
+  // ----
+  // Fish
+  // ----
+
+  class Fish {
+    constructor() {
+      this.fish = document.querySelector('.fish');
+      this.height = this.fish.clientHeight;
+      this.y = 5;
+      this.direction = null;
+      this.randomPosition = null;
+      this.randomCountdown = null;
+      this.speed = 2;
+    }
+
+    resetPosition() {
+      this.y = 5;
+    }
+
+    updateFishPosition() {
+      if (!this.randomPosition || this.randomCountdown < 0) {
+        this.randomPosition = Math.ceil(Math.random() * (gameBody.clientHeight - this.height)) * -1;
+        this.randomCountdown = Math.abs(this.y - this.randomPosition);
+        this.speed = Math.abs(Math.random() * (3 - 1) + 1);
+      };
+
+      if (this.randomPosition < this.y) {
+        this.y -= this.speed;
+      } else {
+        this.y += this.speed;
+      }
+
+      this.fish.style.transform = `translateY(${this.y}px)`;
+      this.randomCountdown -= this.speed;
+    }}
+
+
+  // ------------
+  // Progress bar
+  // ------------
+
+  class ProgressBar {
+    constructor() {
+      this.wrapper = document.querySelector('.progress-bar');
+      this.progressBar = this.wrapper.querySelector('.progress-gradient-wrapper');
+      this.progress = 50;
+    }
+
+    reset() {
+      this.progress = 50;
+    }
+
+    drain() {
+      if (this.progress > 0) this.progress -= 0.4;
+      if (this.progress < 1) this.progress = 0;
+    }
+
+    fill() {
+      if (this.progress < 100) this.progress += 0.3;
+    }
+
+    detectGameEnd() {
+      if (this.progress >= 100) {
+        // successTimeline().play();
+        successTimeline().invalidate().play(0);
+
+        gameOver = true;
+      }
+    }
+
+    updateUi() {
+      this.progressBar.style.height = `${this.progress}%`;
+    }}
+
+
+  // -----------
+  // Application
+  // -----------
+
+  const gameBody = document.querySelector('.game-body');
+  let keyPressed = false;
+  const indicator = new Indicator();
+  const progressBar = new ProgressBar();
+  const fish = new Fish();
+
+  // ------------
+  // Mouse events
+  // ------------
+
+  window.addEventListener('mousedown', indicatorActive);
+  window.addEventListener('mouseup', indicatorInactive);
+  window.addEventListener('keydown', indicatorActive);
+  window.addEventListener('keyup', indicatorInactive);
+  window.addEventListener('touchstart', indicatorActive);
+  window.addEventListener('touchend', indicatorInactive);
+
+  function indicatorActive() {
+    if (!keyPressed) {
+      keyPressed = true;
+      document.body.classList.add('indicator-active');
+    }
+  }
+
+  function indicatorInactive() {
+    if (keyPressed) {
+      keyPressed = false;
+      document.body.classList.remove('indicator-active');
+    }
+  }
+
+  // ----------
+  // Reset game
+  // ----------
+
+  const niceCatch = document.querySelector('.nice-catch');
+  const perfect = document.querySelector('.perfect');
+  const successButton = document.querySelector('.success');
+  const game = document.querySelector('.game');
+  successButton.addEventListener('click', resetGame);
+
+  function resetGame() {
+    progressBar.reset();
+    fish.resetPosition();
+
+    successButton.removeAttribute('style');
+    niceCatch.removeAttribute('style');
+    perfect.removeAttribute('style');
+    game.removeAttribute('style');
+
+    gameOver = false;
+    animationLoop();
+  }
+
+  // ----------------
+  // Success timeline
+  // ----------------
+
+  function successTimeline() {
+    TweenMax.set(".success", { display: 'flex' });
+    TweenMax.set(".nice-catch", { y: 50 });
+    TweenMax.set(".perfect", { perspective: 800 });
+    TweenMax.set(".perfect", { transformStyle: "preserve-3d" });
+    TweenMax.set(".perfect", { rotationX: -90 });
+
+    const tl = new TimelineMax({ paused: true }).
+    to('.game', 0.2, { opacity: 0 }).
+    to('.success', 0.5, { ease: Power3.easeOut, opacity: 1 }, 'ending').
+    to('.nice-catch', 0.5, { ease: Power3.easeOut, y: 0 }, 'ending').
+    to('.perfect', 3, { ease: Elastic.easeOut.config(1, 0.3), rotationX: 0 }, '+=0.2');
+
+    return tl;
+  }
+
+  // -------------
+  // Initiate loop
+  // -------------
+
+  animationLoop();
+
+})();
+
+// -------
+// Seaweed
+// -------
+
+(function () {
+  let seaweed = [];
+  const canvas = document.querySelector('[data-element="seaweed"]');
+  canvas.width = canvas.clientWidth * 2;
+  canvas.height = canvas.clientHeight * 2;
+  const context = canvas.getContext('2d');
+
+  function animationLoop() {
+    clearCanvas();
+    seaweed.forEach(seaweed => seaweed.draw());
+
+    requestAnimationFrame(animationLoop);
+  }
+
+  function clearCanvas() {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+  }
+
+  class Seaweed {
+    constructor(segments, spread, xoff) {
+      this.segments = segments;
+      this.segmentSpread = spread;
+      this.x = 0;
+      this.xoff = xoff;
+      this.y = 0;
+      this.radius = 1;
+      this.sin = Math.random() * 10;
+    }
+
+    draw() {
+      context.beginPath();
+      context.strokeStyle = "#143e5a";
+      context.fillStyle = "#143e5a";
+      context.lineWidth = 2;
+      for (let i = this.segments; i >= 0; i--) {
+        if (i === this.segments) {
+          context.moveTo(
+          Math.sin(this.sin + i) * i / 2.5 + this.xoff,
+          canvas.height + -i * this.segmentSpread);
+
+        } else {
+          context.lineTo(
+          Math.sin(this.sin + i) * i / 2.5 + this.xoff,
+          canvas.height + -i * this.segmentSpread);
+
+        }
+        // context.arc(Math.sin(this.sin + i) * 10 + 30, this.y + (this.segmentSpread * i), this.radius, 0, 2*Math.PI); 
+      }
+      context.stroke();
+
+      this.sin += 0.05;
+    }}
+
+
+  seaweed.push(new Seaweed(6, 8, 25));
+  seaweed.push(new Seaweed(8, 10, 35));
+  seaweed.push(new Seaweed(4, 8, 45));
+
+  animationLoop();
+})();
+
+// -----------------
+// Reel line tension
+// -----------------
+
+(function () {
+  let line = null;
+  const canvas = document.querySelector('[data-element="reel-line-tension"]');
+  canvas.width = canvas.clientWidth * 2;
+  canvas.height = canvas.clientHeight * 2;
+  const context = canvas.getContext('2d');
+
+  function animationLoop() {
+    clearCanvas();
+    line.draw();
+    line.animate();
+
+    requestAnimationFrame(animationLoop);
+  }
+
+  function clearCanvas() {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+  }
+
+  class Line {
+    constructor() {
+      this.tension = 0;
+      this.tensionDirection = 'right';
+    }
+
+    draw() {
+      context.beginPath();
+      context.strokeStyle = "#18343d";
+      context.lineWidth = 1.3;
+      context.moveTo(canvas.width, 0);
+      context.bezierCurveTo(
+      canvas.width, canvas.height / 2 + this.tension,
+      canvas.width / 2, canvas.height + this.tension,
+      0, canvas.height);
+
+      context.stroke();
+    }
+
+    animate() {
+      if (document.body.classList.contains('collision')) {
+        if (this.tension > -30) this.tension -= 8;
+      } else {
+        if (this.tension < 0) this.tension += 4;
+      }
+    }}
+
+
+  line = new Line();
+  animationLoop();
+})();
+
+// -------
+// Bubbles
+// -------
+
+(function () {
+  let bubbles = {};
+  let bubblesCreated = 0;
+  const canvas = document.querySelector('[data-element="bubbles"]');
+  canvas.width = canvas.clientWidth * 2;
+  canvas.height = canvas.clientHeight * 2;
+  const context = canvas.getContext('2d');
+
+  function animationLoop() {
+    clearCanvas();
+    Object.keys(bubbles).forEach(bubble => bubbles[bubble].draw());
+
+    requestAnimationFrame(animationLoop);
+  }
+
+  function clearCanvas() {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+  }
+
+  class Bubble {
+    constructor() {
+      this.index = Object.keys(bubbles).length;
+      this.radius = Math.random() * (6 - 2) + 2;
+      this.y = canvas.height + this.radius;
+      this.x = canvas.width * Math.random() - this.radius;
+      this.sin = this.style > 0.5 ? 0 : 5;
+      this.style = Math.random();
+      this.childAdded = false;
+      this.speed = 1;
+      this.sway = Math.random() * (0.03 - 0.01) + 0.01;
+      this.swayDistance = Math.random() * (canvas.width - canvas.width / 2) + canvas.width / 2;
+    }
+
+    draw() {
+      context.beginPath();
+      context.strokeStyle = "#abe2f9";
+      context.lineWidth = 2;
+      context.arc(this.x + this.radius, this.y + this.radius, this.radius, 0, 2 * Math.PI);
+      context.stroke();
+      this.x = Math.sin(this.sin) * this.swayDistance + this.swayDistance - this.radius;
+      this.sin += this.sway;
+      this.y -= this.speed;
+
+      if (this.y + this.radius < 0) {
+        delete bubbles[this.index];
+      }
+
+      if (this.y < canvas.height * 0.6) {
+        if (!this.childAdded) {
+          bubbles[bubblesCreated] = new Bubble();
+          bubblesCreated++;
+          this.childAdded = true;
+        }
+      }
+    }}
+
+
+  bubbles[bubblesCreated] = new Bubble();
+  bubblesCreated++;
+
+  animationLoop();
+})();
\ No newline at end of file
diff --git a/fishing-game/dist/style.css b/fishing-game/dist/style.css
new file mode 100644
index 0000000..bfbb2e2
--- /dev/null
+++ b/fishing-game/dist/style.css
@@ -0,0 +1,236 @@
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: radial-gradient(ellipse at center, #88c4c2 0%,#56838f 80%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.game {
+  display: flex;
+  align-items: center;
+  opacity: 1;
+}
+
+.fill-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* ----------- */
+/* Fishing rod */
+/* ----------- */
+
+.fishing-rod {
+  width: 46px;
+  height: 352px;
+  position: relative;
+  margin-right: 10px;
+}
+
+.reel-handle {
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  top: 81.2%;
+  left: 1.8%;
+  z-index: 10;
+}
+
+.reel-handle img {
+  animation-name: rotate;
+  animation-iteration-count: infinite;
+  animation-duration: 0.35s;
+  animation-timing-function: linear;
+  transform-origin: 12px 2.5px;
+  animation-play-state: paused;
+}
+
+@keyframes rotate {
+  0% {transform: rotate(0deg)}
+  100% {transform: rotate(360deg)}
+}
+
+.indicator-active .reel-handle img {
+  animation-play-state: running;
+}
+
+.reel-line {
+  width: 18px;
+  height: 16px;
+  position: absolute;
+  top: 265px;
+  left: 4px;
+  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-reel-loop.png') top left repeat-x;
+  background-size: auto 100%;
+  z-index: 5;
+  animation-name: reel;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-play-state: paused;
+  opacity: 0.3;
+}
+
+.indicator-active .reel-line {
+  animation-play-state: running;
+}
+
+@keyframes reel {
+  0% {background-position: 0;}
+  100% {background-position: 139px}
+}
+
+.reel-line-tension {
+  width: 42%;
+  height: 13.5%;
+  position: absolute;
+  bottom: 26.8%;
+  left: 29%;
+  /* background: red;
+  opacity: 0.5; */
+}
+
+/* --------- */
+/* Game body */
+/* --------- */
+
+.game-body {
+  width: 36px;
+  height: 350px;
+  position: relative;
+}
+
+.seafloor {
+  position: relative;
+  z-index: 5;
+}
+
+.seaweed {
+  width: 94.5%;
+  height: 19%;
+  position: absolute;
+  bottom: 4%;
+  left: 3%;
+  z-index: 10;
+}
+
+.bubbles {
+  width: 94.5%;
+  height: 95.2%;
+  position: absolute;
+  bottom: 4%;
+  left: 2.7%;
+  /* background: red;
+  opacity: 0.5; */
+}
+
+.fish {
+  width: 25px;
+  height: 17px;
+  position: absolute;
+  top: calc(100% - 17px);
+  left: 18%;
+  opacity: 0.8;
+  will-change: top;
+}
+
+.indicator {
+  width: 34px;
+  height: 46px;
+  position: absolute;
+  top: calc(100% - 46px);
+  left: 3%;
+  opacity: 0.8;
+  z-index: 30;
+}
+
+.glass {
+  z-index: 20;
+}
+
+/* ------------ */
+/* Progress bar */
+/* ------------ */
+
+.progress-bar {
+  width: 16px;
+  height: 334px;
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-gradient-wrapper {
+  position: absolute;
+  bottom: 1px;
+  left: 0;
+  width: 15px;
+  height: 100%;
+  overflow: hidden;
+  border-top-right-radius: 4px;
+  will-change: height;
+}
+
+.progress-gradient {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 15px;
+  height: 332px;
+  display: block;
+}
+
+/* ------- */
+/* Success */
+/* ------- */
+
+.success {
+  width: 200px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  z-index: 100;
+  opacity: 0;
+  display: none;
+  cursor: pointer;
+}
+
+.nice-catch {
+  width: 100%;
+  position: relative;
+  z-index: 20;
+}
+
+.perfect {
+  width: 46.743295%;
+  margin-top: -4px;
+  transform-origin: top;
+  position: relative;
+  z-index: 10;
+}
\ No newline at end of file
diff --git a/fishing-game/license.txt b/fishing-game/license.txt
new file mode 100644
index 0000000..6195ca2
--- /dev/null
+++ b/fishing-game/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Mariusz Dabrowski (https://codepen.io/MarioD/pen/ymzNOO)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/fishing-game/src/index.html b/fishing-game/src/index.html
new file mode 100644
index 0000000..1494e04
--- /dev/null
+++ b/fishing-game/src/index.html
@@ -0,0 +1,55 @@
+<div class="game">
+
+  <!-- /////////// -->
+  <!-- Fishing rod -->
+  <!-- /////////// -->
+
+  <div class="fishing-rod">
+    <img class="fill-container" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-fishing-rod.svg" alt="">
+    <canvas class="reel-line-tension" data-element="reel-line-tension"></canvas>
+    <div class="reel-handle">
+      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-reel-handle.svg" alt="">
+    </div>
+    <div class="reel-line"></div>
+  </div>
+
+  <!-- ///////// -->
+  <!-- Game body -->
+  <!-- ///////// -->
+
+  <div class="game-body">
+    <img class="fill-container" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-game-body-bg.svg" alt="">
+    <canvas class="bubbles" data-element="bubbles"></canvas>
+    <canvas class="seaweed" data-element="seaweed"></canvas>
+    <img class="seafloor fill-container" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-sea-floor.svg" alt="">
+    <div class="fish">
+      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-fish.svg" alt="">
+    </div>
+    <div class="indicator">
+      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-indicator.svg" alt="">
+    </div>
+    <img class="glass fill-container" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-glass.svg" alt="">
+  </div>
+
+  <!-- //////////// -->
+  <!-- Progress bar -->
+  <!-- //////////// -->
+
+  <div class="progress-bar">
+    <img class="fill-container" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-progress-bar-bg.svg" alt="">
+    <div class="progress-gradient-wrapper">
+      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-progress-gradient.svg" class="progress-gradient" alt="">
+    </div>
+  </div>
+
+</div>
+<!-- .game -->
+
+<!-- /////// -->
+<!-- Success -->
+<!-- /////// -->
+
+<div class="success">
+  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-nice-catch.png" alt="" class="nice-catch">
+  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-perfect.png" alt="" class="perfect">
+</div>
\ No newline at end of file
diff --git a/fishing-game/src/script.babel b/fishing-game/src/script.babel
new file mode 100644
index 0000000..4bddba8
--- /dev/null
+++ b/fishing-game/src/script.babel
@@ -0,0 +1,435 @@
+// ----
+// Game
+// ----
+
+(function() {
+  let gameOver = false;
+
+  // --------------
+  // Animation loop
+  // --------------
+
+  function animationLoop() {
+    if (!gameOver) {
+      indicator.updatePosition();
+      indicator.detectCollision();
+      progressBar.updateUi();
+      progressBar.detectGameEnd();
+      fish.updateFishPosition();
+      requestAnimationFrame(animationLoop);
+    }
+  }
+
+  // ---------
+  // Indicator
+  // ---------
+
+  class Indicator {
+    constructor() {
+      this.indicator = document.querySelector('.indicator');
+      this.height = this.indicator.clientHeight;
+      this.y = 0;
+      this.velocity = 0;
+      this.acceleration = 0;
+      this.topBounds = (gameBody.clientHeight * -1) + 48;
+      this.bottomBounds = 0;
+    }
+
+    applyForce(force) {
+      this.acceleration += force;
+    }
+
+    updatePosition() {
+      this.velocity += this.acceleration;
+      this.y += this.velocity;
+      
+      //  Reset acceleration
+      indicator.acceleration = 0;
+
+      // Change direction when hitting the bottom + add friction
+      if (this.y > this.bottomBounds) {
+        this.y = 0;
+        this.velocity *= 0.5;
+        this.velocity *= -1;
+      }
+
+      // Prevent from going beyond the top
+      // Don't apply button forces when beyond the top
+      // console.log(indicator.y, this.topBounds);
+      if (indicator.y < this.topBounds) {
+        indicator.y = this.topBounds;
+        indicator.velocity = 0;
+      } else {
+        if (keyPressed) {
+          indicator.applyForce(-0.5);
+        }
+      }
+
+      // Apply constant force
+      indicator.applyForce(0.3);
+
+      // Update object position
+      this.indicator.style.transform = `translateY(${this.y}px)`;
+    }
+
+    detectCollision() {
+      if (
+        fish.y < this.y && fish.y > this.y - this.height ||
+        fish.y - fish.height < this.y && fish.y - fish.height > this.y - this.height
+      ) {
+        progressBar.fill();
+        document.body.classList.add('collision');
+      } else {
+        progressBar.drain();
+        document.body.classList.remove('collision');
+      }
+    }
+  }
+
+  // ----
+  // Fish
+  // ----
+
+  class Fish {
+    constructor() {
+      this.fish = document.querySelector('.fish');
+      this.height = this.fish.clientHeight;
+      this.y = 5;
+      this.direction = null;
+      this.randomPosition = null;
+      this.randomCountdown = null;
+      this.speed = 2;
+    }
+
+    resetPosition() {
+      this.y = 5;
+    }
+
+    updateFishPosition() {
+      if (!this.randomPosition || this.randomCountdown < 0) {
+        this.randomPosition = Math.ceil(Math.random() * (gameBody.clientHeight - this.height)) * -1;
+        this.randomCountdown = Math.abs(this.y - this.randomPosition);
+        this.speed = Math.abs(Math.random() * (3 - 1) + 1);
+      };
+
+      if (this.randomPosition < this.y) {
+        this.y -= this.speed;
+      } else {
+        this.y += this.speed;
+      }
+      
+      this.fish.style.transform = `translateY(${this.y}px)`;
+      this.randomCountdown -= this.speed;
+    }
+  }
+
+  // ------------
+  // Progress bar
+  // ------------
+
+  class ProgressBar {
+    constructor() {
+      this.wrapper = document.querySelector('.progress-bar');
+      this.progressBar = this.wrapper.querySelector('.progress-gradient-wrapper');
+      this.progress = 50;
+    }
+
+    reset() {
+      this.progress = 50;
+    }
+
+    drain() {
+      if (this.progress > 0) this.progress -= 0.4;
+      if (this.progress < 1) this.progress = 0;
+    }
+
+    fill() {
+      if (this.progress < 100) this.progress += 0.3;
+    }
+
+    detectGameEnd() {
+      if (this.progress >= 100) {
+        // successTimeline().play();
+        successTimeline().invalidate().play(0);
+
+        gameOver = true;
+      }
+    }
+
+    updateUi() {
+      this.progressBar.style.height = `${this.progress}%`
+    }
+  }
+
+  // -----------
+  // Application
+  // -----------
+
+  const gameBody = document.querySelector('.game-body');
+  let keyPressed = false;
+  const indicator = new Indicator();
+  const progressBar = new ProgressBar();
+  const fish = new Fish();
+
+  // ------------
+  // Mouse events
+  // ------------
+
+  window.addEventListener('mousedown', indicatorActive);
+  window.addEventListener('mouseup', indicatorInactive);
+  window.addEventListener('keydown', indicatorActive);
+  window.addEventListener('keyup', indicatorInactive);
+  window.addEventListener('touchstart', indicatorActive);
+  window.addEventListener('touchend', indicatorInactive);
+
+  function indicatorActive () {
+    if (!keyPressed) {
+      keyPressed = true;
+      document.body.classList.add('indicator-active');
+    }
+  }
+
+  function indicatorInactive () {
+    if (keyPressed) {
+      keyPressed = false;
+      document.body.classList.remove('indicator-active');
+    }
+  }
+
+  // ----------
+  // Reset game
+  // ----------
+
+  const niceCatch = document.querySelector('.nice-catch');
+  const perfect = document.querySelector('.perfect');
+  const successButton = document.querySelector('.success');
+  const game = document.querySelector('.game');
+  successButton.addEventListener('click', resetGame);
+
+  function resetGame() {
+    progressBar.reset();
+    fish.resetPosition();
+
+    successButton.removeAttribute('style');
+    niceCatch.removeAttribute('style');
+    perfect.removeAttribute('style');
+    game.removeAttribute('style');
+
+    gameOver = false;
+    animationLoop();
+  }
+
+  // ----------------
+  // Success timeline
+  // ----------------
+
+  function successTimeline() {
+    TweenMax.set(".success", {display: 'flex'});
+    TweenMax.set(".nice-catch", {y: 50});
+    TweenMax.set(".perfect", {perspective:800});
+    TweenMax.set(".perfect", {transformStyle:"preserve-3d"});
+    TweenMax.set(".perfect", {rotationX:-90});
+
+    const tl = new TimelineMax({paused: true})
+    .to('.game', 0.2, {opacity: 0})
+    .to('.success', 0.5, {ease: Power3.easeOut, opacity: 1}, 'ending')
+    .to('.nice-catch', 0.5, {ease: Power3.easeOut, y: 0}, 'ending')
+    .to('.perfect', 3, {ease: Elastic.easeOut.config(1, 0.3), rotationX: 0}, '+=0.2');
+
+    return tl;
+  }
+
+  // -------------
+  // Initiate loop
+  // -------------
+
+  animationLoop();
+
+})();
+
+// -------
+// Seaweed
+// -------
+
+(function() {
+  let seaweed = [];
+  const canvas = document.querySelector('[data-element="seaweed"]');
+  canvas.width = canvas.clientWidth * 2;
+  canvas.height = canvas.clientHeight * 2;
+  const context = canvas.getContext('2d');
+
+  function animationLoop() {
+    clearCanvas();
+    seaweed.forEach(seaweed => seaweed.draw());
+
+    requestAnimationFrame(animationLoop);
+  }
+
+  function clearCanvas() {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+  }
+
+  class Seaweed {
+    constructor(segments, spread, xoff) {
+      this.segments = segments;
+      this.segmentSpread = spread;
+      this.x = 0;
+      this.xoff = xoff;
+      this.y = 0;
+      this.radius = 1;
+      this.sin = Math.random() * 10;
+    }
+
+    draw() {
+      context.beginPath();
+      context.strokeStyle="#143e5a";
+      context.fillStyle="#143e5a";
+      context.lineWidth=2;
+      for (let i = this.segments; i >= 0; i--) {
+        if (i === this.segments) {
+          context.moveTo(
+            Math.sin(this.sin + i) * i/2.5 + this.xoff,
+            canvas.height + (-i * this.segmentSpread),
+          );
+        } else {
+          context.lineTo(
+            Math.sin(this.sin + i) * i/2.5 + this.xoff,
+            canvas.height + (-i * this.segmentSpread),
+          );
+        }
+        // context.arc(Math.sin(this.sin + i) * 10 + 30, this.y + (this.segmentSpread * i), this.radius, 0, 2*Math.PI); 
+      }
+      context.stroke();
+
+      this.sin += 0.05;
+    }
+  }
+
+  seaweed.push(new Seaweed(6, 8, 25));
+  seaweed.push(new Seaweed(8, 10, 35));
+  seaweed.push(new Seaweed(4, 8, 45));
+
+  animationLoop()
+})();
+
+// -----------------
+// Reel line tension
+// -----------------
+
+(function() {
+  let line = null;
+  const canvas = document.querySelector('[data-element="reel-line-tension"]');
+  canvas.width = canvas.clientWidth * 2;
+  canvas.height = canvas.clientHeight * 2;
+  const context = canvas.getContext('2d');
+
+  function animationLoop() {
+    clearCanvas();
+    line.draw();
+    line.animate();
+
+    requestAnimationFrame(animationLoop);
+  }
+
+  function clearCanvas() {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+  }
+
+  class Line {
+    constructor() {
+      this.tension = 0;
+      this.tensionDirection = 'right';
+    }
+
+    draw() {
+      context.beginPath();
+      context.strokeStyle="#18343d";
+      context.lineWidth=1.3;
+      context.moveTo(canvas.width, 0);
+      context.bezierCurveTo(
+        canvas.width,canvas.height/2 + this.tension,
+        canvas.width/2,canvas.height + this.tension,
+        0,canvas.height
+      );
+      context.stroke();
+    }
+
+    animate() {
+      if (document.body.classList.contains('collision')) {
+        if (this.tension > -30) this.tension -= 8;
+      } else {
+        if (this.tension < 0) this.tension += 4;
+      }
+    }
+  }
+
+  line = new Line();
+  animationLoop()
+})();
+
+// -------
+// Bubbles
+// -------
+
+(function() {
+  let bubbles = {};
+  let bubblesCreated = 0;
+  const canvas = document.querySelector('[data-element="bubbles"]');
+  canvas.width = canvas.clientWidth * 2;
+  canvas.height = canvas.clientHeight * 2;
+  const context = canvas.getContext('2d');
+
+  function animationLoop() {
+    clearCanvas();
+    Object.keys(bubbles).forEach(bubble => bubbles[bubble].draw());
+
+    requestAnimationFrame(animationLoop);
+  }
+
+  function clearCanvas() {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+  }
+
+  class Bubble {
+    constructor() {
+      this.index = Object.keys(bubbles).length;
+      this.radius = Math.random() * (6 - 2) + 2;
+      this.y = canvas.height + this.radius;
+      this.x = canvas.width * Math.random() - this.radius;
+      this.sin = (this.style > 0.5) ? 0 : 5;
+      this.style = Math.random();
+      this.childAdded = false;
+      this.speed = 1;
+      this.sway = Math.random() * (0.03 - 0.01) + 0.01;
+      this.swayDistance = Math.random() * (canvas.width - canvas.width/2) + canvas.width/2;
+    }
+
+    draw() {
+      context.beginPath();
+      context.strokeStyle="#abe2f9";
+      context.lineWidth=2;
+      context.arc(this.x + this.radius, this.y + this.radius, this.radius, 0, 2*Math.PI);
+      context.stroke();
+      this.x = (Math.sin(this.sin) * this.swayDistance) + this.swayDistance - this.radius;
+      this.sin += this.sway;
+      this.y -= this.speed;
+
+      if (this.y + this.radius < 0) {
+        delete bubbles[this.index];
+      }
+
+      if (this.y < canvas.height * 0.6) {
+        if (!this.childAdded) {
+          bubbles[bubblesCreated] = new Bubble();
+          bubblesCreated++;
+          this.childAdded = true;
+        }
+      }
+    }
+  }
+
+  bubbles[bubblesCreated] = new Bubble();
+  bubblesCreated++;
+
+  animationLoop()
+})();
\ No newline at end of file
diff --git a/fishing-game/src/style.css b/fishing-game/src/style.css
new file mode 100644
index 0000000..bfbb2e2
--- /dev/null
+++ b/fishing-game/src/style.css
@@ -0,0 +1,236 @@
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: radial-gradient(ellipse at center, #88c4c2 0%,#56838f 80%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.game {
+  display: flex;
+  align-items: center;
+  opacity: 1;
+}
+
+.fill-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* ----------- */
+/* Fishing rod */
+/* ----------- */
+
+.fishing-rod {
+  width: 46px;
+  height: 352px;
+  position: relative;
+  margin-right: 10px;
+}
+
+.reel-handle {
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  top: 81.2%;
+  left: 1.8%;
+  z-index: 10;
+}
+
+.reel-handle img {
+  animation-name: rotate;
+  animation-iteration-count: infinite;
+  animation-duration: 0.35s;
+  animation-timing-function: linear;
+  transform-origin: 12px 2.5px;
+  animation-play-state: paused;
+}
+
+@keyframes rotate {
+  0% {transform: rotate(0deg)}
+  100% {transform: rotate(360deg)}
+}
+
+.indicator-active .reel-handle img {
+  animation-play-state: running;
+}
+
+.reel-line {
+  width: 18px;
+  height: 16px;
+  position: absolute;
+  top: 265px;
+  left: 4px;
+  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/game-reel-loop.png') top left repeat-x;
+  background-size: auto 100%;
+  z-index: 5;
+  animation-name: reel;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-play-state: paused;
+  opacity: 0.3;
+}
+
+.indicator-active .reel-line {
+  animation-play-state: running;
+}
+
+@keyframes reel {
+  0% {background-position: 0;}
+  100% {background-position: 139px}
+}
+
+.reel-line-tension {
+  width: 42%;
+  height: 13.5%;
+  position: absolute;
+  bottom: 26.8%;
+  left: 29%;
+  /* background: red;
+  opacity: 0.5; */
+}
+
+/* --------- */
+/* Game body */
+/* --------- */
+
+.game-body {
+  width: 36px;
+  height: 350px;
+  position: relative;
+}
+
+.seafloor {
+  position: relative;
+  z-index: 5;
+}
+
+.seaweed {
+  width: 94.5%;
+  height: 19%;
+  position: absolute;
+  bottom: 4%;
+  left: 3%;
+  z-index: 10;
+}
+
+.bubbles {
+  width: 94.5%;
+  height: 95.2%;
+  position: absolute;
+  bottom: 4%;
+  left: 2.7%;
+  /* background: red;
+  opacity: 0.5; */
+}
+
+.fish {
+  width: 25px;
+  height: 17px;
+  position: absolute;
+  top: calc(100% - 17px);
+  left: 18%;
+  opacity: 0.8;
+  will-change: top;
+}
+
+.indicator {
+  width: 34px;
+  height: 46px;
+  position: absolute;
+  top: calc(100% - 46px);
+  left: 3%;
+  opacity: 0.8;
+  z-index: 30;
+}
+
+.glass {
+  z-index: 20;
+}
+
+/* ------------ */
+/* Progress bar */
+/* ------------ */
+
+.progress-bar {
+  width: 16px;
+  height: 334px;
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-gradient-wrapper {
+  position: absolute;
+  bottom: 1px;
+  left: 0;
+  width: 15px;
+  height: 100%;
+  overflow: hidden;
+  border-top-right-radius: 4px;
+  will-change: height;
+}
+
+.progress-gradient {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 15px;
+  height: 332px;
+  display: block;
+}
+
+/* ------- */
+/* Success */
+/* ------- */
+
+.success {
+  width: 200px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  z-index: 100;
+  opacity: 0;
+  display: none;
+  cursor: pointer;
+}
+
+.nice-catch {
+  width: 100%;
+  position: relative;
+  z-index: 20;
+}
+
+.perfect {
+  width: 46.743295%;
+  margin-top: -4px;
+  transform-origin: top;
+  position: relative;
+  z-index: 10;
+}
\ No newline at end of file
diff --git a/flame-animation/README.markdown b/flame-animation/README.markdown
new file mode 100644
index 0000000..e4b4afb
--- /dev/null
+++ b/flame-animation/README.markdown
@@ -0,0 +1,4 @@
+# flame animation
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/uchardon/pen/poJdBLE](https://codepen.io/uchardon/pen/poJdBLE).
+
+ Litte css animation with svg 
\ No newline at end of file
diff --git a/flame-animation/dist/index.html b/flame-animation/dist/index.html
new file mode 100644
index 0000000..8cb767f
--- /dev/null
+++ b/flame-animation/dist/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - flame animation</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg8" version="1.1" viewBox="0 0 95.05 113.63">
+  <defs id="defs2">
+    <linearGradient id="linearGradient857">
+      <stop id="stop853" offset="0" stop-color="#d089ff" stop-opacity="1"/>
+      <stop id="stop855" offset="1" stop-color="#7f00f5" stop-opacity="1"/>
+    </linearGradient>
+    <linearGradient id="linearGradient859" x1="37.47" x2="62.79" y1="9.1" y2="90.19" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient857"/>
+  </defs>
+  <g id="layer1"  transform="translate(.28 -.13)">
+    <path id="rect835" fill="#21034f" fill-opacity="1" stroke-width=".4" d="M-.28.13h95.05v113.63H-.28z" opacity="1"/>
+    <path id="flame" fill="url(#linearGradient859)" fill-opacity="1" stroke-width=".87" d="M76.12 66.56c0 15.63-13.23 28.31-29.54 28.31-16.3 0-29.73-12.68-29.53-28.31.28-21.7 21.5-33.27 22.1-50.09 10.79 2.2 36.97 24.8 36.97 50.09z" opacity="1"/>
+    
+    <circle id="ci1" cx="46.58" cy="66.56" r="1"  />
+    <circle id="ci2" cx="46.58" cy="66.56" r="1"  />
+    <circle id="ci3" cx="46.58" cy="66.56" r="1"  />
+    <circle id="ci4" cx="46.58" cy="66.56" r="1"  />
+    
+    
+    
+    
+    <path id="rect848" fill="#7f00f5" fill-opacity="1" stroke-width=".4" d="M103.06 22.47h16.68v7.2h-13.22c-.67 0-.88.58-.88.58z" opacity="1" transform="rotate(39.18)"/>
+    <path id="circle843" fill="#21034f" fill-opacity="1" stroke-width=".4" d="M50.77 61.02a7 7 0 10-8.78 10.9c3.44 2.77 5.95 1.3 8.68 3.5l25.66 20.66 5.36-6.65L56.45 69.1c-3.21-2.59-1.98-5.1-5.68-8.08z" opacity="1"/>
+    <ellipse id="path851" cx="46.37" cy="63.24" fill="#d594ff" fill-opacity="1" stroke-width=".4" opacity="1" rx="2.01" ry="1.24"/>
+  </g>
+</svg>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/flame-animation/dist/style.css b/flame-animation/dist/style.css
new file mode 100644
index 0000000..9c791c2
--- /dev/null
+++ b/flame-animation/dist/style.css
@@ -0,0 +1,38 @@
+body {
+  font-family: Lato, sans-serif;
+  display: flex;
+  flex-direction:column;
+  justify-content: center;
+  align-items:center;
+  height:100vh;
+  padding:0;
+  margin:0;
+  background: #21034f;
+}
+svg {
+  width:300px;
+  margin-top:60px;
+}
+circle {
+  fill: #fff;
+  animation: flame 2s ease-out infinite;
+}
+#ci2 {
+  animation-delay: -.5s;
+}
+#ci3 {
+  animation-delay: -1s;
+}
+#ci4 {
+  animation-delay: -1.5s;
+}
+@keyframes flame {
+  from {
+    r:1px;
+    opacity:.8;
+  }
+  to {
+    r:28px;
+    opacity:0;
+  }
+}
\ No newline at end of file
diff --git a/flame-animation/license.txt b/flame-animation/license.txt
new file mode 100644
index 0000000..3f68367
--- /dev/null
+++ b/flame-animation/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Uwe Chardon (https://codepen.io/uchardon/pen/poJdBLE)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/flame-animation/src/index.html b/flame-animation/src/index.html
new file mode 100644
index 0000000..fa1bee3
--- /dev/null
+++ b/flame-animation/src/index.html
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg8" version="1.1" viewBox="0 0 95.05 113.63">
+  <defs id="defs2">
+    <linearGradient id="linearGradient857">
+      <stop id="stop853" offset="0" stop-color="#d089ff" stop-opacity="1"/>
+      <stop id="stop855" offset="1" stop-color="#7f00f5" stop-opacity="1"/>
+    </linearGradient>
+    <linearGradient id="linearGradient859" x1="37.47" x2="62.79" y1="9.1" y2="90.19" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient857"/>
+  </defs>
+  <g id="layer1"  transform="translate(.28 -.13)">
+    <path id="rect835" fill="#21034f" fill-opacity="1" stroke-width=".4" d="M-.28.13h95.05v113.63H-.28z" opacity="1"/>
+    <path id="flame" fill="url(#linearGradient859)" fill-opacity="1" stroke-width=".87" d="M76.12 66.56c0 15.63-13.23 28.31-29.54 28.31-16.3 0-29.73-12.68-29.53-28.31.28-21.7 21.5-33.27 22.1-50.09 10.79 2.2 36.97 24.8 36.97 50.09z" opacity="1"/>
+    
+    <circle id="ci1" cx="46.58" cy="66.56" r="1"  />
+    <circle id="ci2" cx="46.58" cy="66.56" r="1"  />
+    <circle id="ci3" cx="46.58" cy="66.56" r="1"  />
+    <circle id="ci4" cx="46.58" cy="66.56" r="1"  />
+    
+    
+    
+    
+    <path id="rect848" fill="#7f00f5" fill-opacity="1" stroke-width=".4" d="M103.06 22.47h16.68v7.2h-13.22c-.67 0-.88.58-.88.58z" opacity="1" transform="rotate(39.18)"/>
+    <path id="circle843" fill="#21034f" fill-opacity="1" stroke-width=".4" d="M50.77 61.02a7 7 0 10-8.78 10.9c3.44 2.77 5.95 1.3 8.68 3.5l25.66 20.66 5.36-6.65L56.45 69.1c-3.21-2.59-1.98-5.1-5.68-8.08z" opacity="1"/>
+    <ellipse id="path851" cx="46.37" cy="63.24" fill="#d594ff" fill-opacity="1" stroke-width=".4" opacity="1" rx="2.01" ry="1.24"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/flame-animation/src/style.css b/flame-animation/src/style.css
new file mode 100644
index 0000000..a2f538c
--- /dev/null
+++ b/flame-animation/src/style.css
@@ -0,0 +1,38 @@
+body {
+  font-family: Lato, sans-serif;
+  display: flex;
+  flex-direction:column;
+  justify-content: center;
+  align-items:center;
+  height:100vh;
+  padding:0;
+  margin:0;
+  background: #21034f;
+}
+svg {
+  width:300px;
+  margin-top:60px;
+}
+circle {
+  fill: #fff;
+  animation: flame 2s ease-out infinite;
+}
+#ci2 {
+  animation-delay: -.5s;
+}
+#ci3 {
+  animation-delay: -1s;
+}
+#ci4 {
+  animation-delay: -1.5s;
+}
+@keyframes flame {
+  from {
+    r:1px;
+    opacity:.8;
+  }
+  to {
+    r:28px;
+    opacity:0;
+  }
+}
diff --git a/flexbox-and-white-space-nowrap-issue/LICENSE.txt b/flexbox-and-white-space-nowrap-issue/LICENSE.txt
new file mode 100644
index 0000000..4f44c73
--- /dev/null
+++ b/flexbox-and-white-space-nowrap-issue/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 by AJ Foster (https://codepen.io/aj-foster/pen/emBYPW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/flexbox-and-white-space-nowrap-issue/README.md b/flexbox-and-white-space-nowrap-issue/README.md
new file mode 100644
index 0000000..c78378e
--- /dev/null
+++ b/flexbox-and-white-space-nowrap-issue/README.md
@@ -0,0 +1,5 @@
+# Flexbox and white-space: nowrap issue
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/aj-foster/pen/emBYPW](https://codepen.io/aj-foster/pen/emBYPW).
+
+I came across an oddity in FireFox using flexbox with white-space: nowrap and overflow: hidden on text. It appears that these properties cause the parent element to disobey flexbox sizing. Compare the resize behavior in Chrome and Firefox to see what I mean.
\ No newline at end of file
diff --git a/flexbox-and-white-space-nowrap-issue/dist/index.html b/flexbox-and-white-space-nowrap-issue/dist/index.html
new file mode 100644
index 0000000..21832fb
--- /dev/null
+++ b/flexbox-and-white-space-nowrap-issue/dist/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Flexbox and white-space: nowrap issue</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<p>Consider a flex container in which one of the children has text that is truncated using white-space: nowrap; overflow: hidden; and text-overflow: ellipsis. Intuitively, we might expect the text to be truncated as the size of the flex container decreases.</p>
+
+<div class="tile">
+  <a class="action" href="#">
+    <div class="subtitle">
+      Some text that will be too long, and should be truncated using CSS for responsiveness.
+    </div>
+  </a>
+  <a class="action action--r" href="#">
+    <div class="sibling">&lt;sibling&gt;</div>
+  </a>
+</div>
+
+<div class="tile" style="max-width: 600px">
+  <a class="action" href="#">
+    <div class="subtitle">
+      Some text that will be too long, and should be truncated using CSS for responsiveness.
+    </div>
+  </a>
+  <a class="action action--r" href="#">
+    <div class="sibling">&lt;sibling&gt;</div>
+  </a>
+</div>
+
+<div class="tile" style="max-width: 100px">
+  <a class="action" href="#">
+    <div class="subtitle">
+      Some text that will be too long, and should be truncated using CSS for responsiveness.
+    </div>
+  </a>
+  <a class="action action--r" href="#">
+    <div class="sibling">&lt;sibling&gt;</div>
+  </a>
+</div>
+
+<p>According to a <a href="http://dev.w3.org/csswg/css-flexbox/#min-size-auto">draft spec</a>, the above text should not fully collapse when the flex container is resized down. Because .subtitle has a width of 100%, the min-width: auto calculation that flexbox makes says that its container should be larger than we want. This behavior has made it to Firefox (as of 34), but not Chrome (as of 39). Note: it's an editor's draft, not a recommendation, at the time of writing.</p>
+
+<p>In order to acheive the desired (arguably, intuitive) behavior, you have to give the text's container min-width: 0 (below).</p>
+
+<div>
+<div class="tile">
+  <a class="action" href="#" style="min-width:0">
+    <div class="subtitle">
+      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
+    </div>
+    <div class="subtitle">
+      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
+    </div>
+  </a>
+  <a class="action action--r" href="#">
+    <div class="sibling">&lt;sibling&gt;</div>
+  </a>
+</div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/flexbox-and-white-space-nowrap-issue/dist/style.css b/flexbox-and-white-space-nowrap-issue/dist/style.css
new file mode 100644
index 0000000..52f01a4
--- /dev/null
+++ b/flexbox-and-white-space-nowrap-issue/dist/style.css
@@ -0,0 +1,28 @@
+.tile {
+  border: 1px solid black;
+  display: flex;
+  margin: 1em 0;
+}
+
+.action {
+  border: 1px dashed black;
+  color: black;
+  flex-shrink: 1;
+  flex-grow: 1;
+  max-width: 100%;
+  padding: 1em;
+  text-decoration: none;
+}
+
+.action--r {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.subtitle {
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/flexbox-and-white-space-nowrap-issue/src/index.html b/flexbox-and-white-space-nowrap-issue/src/index.html
new file mode 100644
index 0000000..4896004
--- /dev/null
+++ b/flexbox-and-white-space-nowrap-issue/src/index.html
@@ -0,0 +1,54 @@
+<p>Consider a flex container in which one of the children has text that is truncated using white-space: nowrap; overflow: hidden; and text-overflow: ellipsis. Intuitively, we might expect the text to be truncated as the size of the flex container decreases.</p>
+
+<div class="tile">
+  <a class="action" href="#">
+    <div class="subtitle">
+      Some text that will be too long, and should be truncated using CSS for responsiveness.
+    </div>
+  </a>
+  <a class="action action--r" href="#">
+    <div class="sibling">&lt;sibling&gt;</div>
+  </a>
+</div>
+
+<div class="tile" style="max-width: 600px">
+  <a class="action" href="#">
+    <div class="subtitle">
+      Some text that will be too long, and should be truncated using CSS for responsiveness.
+    </div>
+  </a>
+  <a class="action action--r" href="#">
+    <div class="sibling">&lt;sibling&gt;</div>
+  </a>
+</div>
+
+<div class="tile" style="max-width: 100px">
+  <a class="action" href="#">
+    <div class="subtitle">
+      Some text that will be too long, and should be truncated using CSS for responsiveness.
+    </div>
+  </a>
+  <a class="action action--r" href="#">
+    <div class="sibling">&lt;sibling&gt;</div>
+  </a>
+</div>
+
+<p>According to a <a href="http://dev.w3.org/csswg/css-flexbox/#min-size-auto">draft spec</a>, the above text should not fully collapse when the flex container is resized down. Because .subtitle has a width of 100%, the min-width: auto calculation that flexbox makes says that its container should be larger than we want. This behavior has made it to Firefox (as of 34), but not Chrome (as of 39). Note: it's an editor's draft, not a recommendation, at the time of writing.</p>
+
+<p>In order to acheive the desired (arguably, intuitive) behavior, you have to give the text's container min-width: 0 (below).</p>
+
+<div>
+<div class="tile">
+  <a class="action" href="#" style="min-width:0">
+    <div class="subtitle">
+      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
+    </div>
+    <div class="subtitle">
+      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
+    </div>
+  </a>
+  <a class="action action--r" href="#">
+    <div class="sibling">&lt;sibling&gt;</div>
+  </a>
+</div>
+</div>
\ No newline at end of file
diff --git a/flexbox-and-white-space-nowrap-issue/src/style.sass b/flexbox-and-white-space-nowrap-issue/src/style.sass
new file mode 100644
index 0000000..c219c32
--- /dev/null
+++ b/flexbox-and-white-space-nowrap-issue/src/style.sass
@@ -0,0 +1,25 @@
+.tile
+  border: 1px solid black
+  display: flex
+  margin: 1em 0
+
+.action
+  border: 1px dashed black
+  color: black
+  flex-shrink: 1
+  flex-grow: 1
+  max-width: 100%
+  padding: 1em
+  text-decoration: none
+
+.action--r
+  flex-grow: 0
+  flex-shrink: 0
+
+.subtitle
+  display: inline-block
+  width: 100%
+  
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis
\ No newline at end of file
diff --git a/flexbox-playground/README.markdown b/flexbox-playground/README.markdown
new file mode 100644
index 0000000..18238d1
--- /dev/null
+++ b/flexbox-playground/README.markdown
@@ -0,0 +1,5 @@
+# Flexbox playground
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/team/CodePenTemplates/pen/YNBBoQ](https://codepen.io/team/CodePenTemplates/pen/YNBBoQ).
+
+
diff --git a/flexbox-playground/dist/index.html b/flexbox-playground/dist/index.html
new file mode 100644
index 0000000..b7d440b
--- /dev/null
+++ b/flexbox-playground/dist/index.html
@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Flexbox playground</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="principal">
+<h2>Properties for the flex container</h2>
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-direction.php">flex-direction</a> <small>( property of the flex container  )</small></h4><!--flex-direction: row | row-reverse | column | column-reverse;-->
+<div class="radio">
+<input name="flex-direction" type="radio"  class="flex-direction" id="R11" value="row" checked><label for="R11">row:</label>
+<input name="flex-direction"  type="radio" class="flex-direction" id="R12" value="row-reverse"><label for="R12">row-reverse:</label>
+<input name="flex-direction"  type="radio" class="flex-direction" id="R13" value="column"><label for="R13">column:</label>
+<input name="flex-direction"  type="radio" class="flex-direction" id="R14" value="column-reverse"><label for="R14">column-reverse:</label>
+</div></div>
+<div class="flex-container" id="direction">
+<div class="item" data-color="2a80b9"><p>1</p></div>
+<div class="item" data-color="8f44ad"><p>2</p></div>
+<div class="item" data-color="16a086"><p>3</p></div>
+<div class="item" data-color="f1c40f"><p>4</p></div>
+<div class="item" data-color="e77e23"><p>5</p></div>
+</div>
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-wrap.php">flex-wrap</a> <small>( property of the flex container  )</small></h4><!--nowrap | wrap | wrap-reverse;-->
+<div class="radio">
+<input name="flex-wrap" type="radio"  class="flex-wrap" id="R21" value="nowrap" checked><label for="R21">nowrap:</label>
+<input name="flex-wrap" type="radio"  class="flex-wrap" id="R22" value="wrap"><label for="R22">wrap:</label>
+<input name="flex-wrap" type="radio"  class="flex-wrap" id="R23" value="wrap-reverse"><label for="R23">wrap-reverse:</label>
+</div></div>
+<div class="flex-container" id="wrap">
+<div class="item" data-color="2a80b9"><p>1</p></div>
+<div class="item" data-color="8f44ad"><p>2</p></div>
+<div class="item" data-color="16a086"><p>3</p></div>
+<div class="item" data-color="f1c40f"><p>4</p></div>
+<div class="item" data-color="e77e23"><p>5</p></div>
+</div>
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-align-items.php">align-items</a> <small>( property of the flex container  )</small></h4><!-- flex-start | flex-end | center | baseline | stretch;-->
+<div class="radio">
+<input name="flex-align-items" type="radio"  class="flex-align-items" id="R31" value="align-items-start" ><label for="R31">flex-start:</label>
+<input name="flex-align-items" type="radio"  class="flex-align-items" id="R32" value="align-items-end"><label for="R32">flex-end:</label>
+<input name="flex-align-items" type="radio"  class="flex-align-items" id="R33" value="align-items-center"><label for="R33">center:</label>
+<input name="flex-align-items" type="radio"  class="flex-align-items" id="R34" value="align-items-baseline"><label for="R34">baseline:</label>
+<input name="flex-align-items" type="radio"  class="flex-align-items" id="R35" value="align-items-stretch" checked><label for="R35">stretch:</label>
+</div></div>
+<div class="flex-container" id="align">
+<div class="item" data-color="2a80b9"><p>1</p></div>
+<div class="item" data-color="8f44ad"><p>2</p></div>
+<div class="item" data-color="16a086"><p style="font-size:50px;">3</p></div>
+<div class="item" data-color="f1c40f"><p>4</p></div>
+<div class="item" data-color="e77e23"><p>5</p></div>
+</div>
+
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-justify-content.php">justify-content</a> <small>( property of the flex container )</small></h4> <!--justify-content: flex-start | flex-end | center | space-between | space-around; -->
+<div class="radio">
+<input name="justify-content" type="radio"  class="justify-content" id="R41" value="justify-start" checked ><label for="R41">flex-start:</label>
+<input name="justify-content" type="radio"  class="justify-content" id="R42" value="justify-end" ><label for="R42">flex-end:</label>
+<input name="justify-content" type="radio"  class="justify-content" id="R43" value="justify-space-between" ><label for="R43">space-between:</label>
+<input name="justify-content" type="radio"  class="justify-content" id="R44" value="justify-center" ><label for="R44">center:</label>
+<input name="justify-content" type="radio"  class="justify-content" id="R45" value="justify-space-around" ><label for="R45">space-around:</label>
+</div></div>
+<div class="flex-container" id="justify">
+<div class="item" data-color="2a80b9"><p>1</p></div>
+<div class="item" data-color="8f44ad"><p>2</p></div>
+<div class="item" data-color="16a086"><p>3</p></div>
+<div class="item" data-color="f1c40f"><p>4</p></div>
+<div class="item" data-color="e77e23"><p>5</p></div>
+
+</div>
+
+<!--<p>En <strong>Google Chrome</strong> y <strong>Opera</strong>: problemas al cambiar dinamicamente entre <code>justify-content:space-between</code> y <code>justify-content:space-around</code> </p>-->
+
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-align-content.php">align-content</a> <small>( property of the flex container  )</small></h4> <!--justify-content: flex-start | flex-end | center | space-between | space-around; -->
+<div class="radio">
+<input name="align-content" type="radio"  class="align-content" id="R51" value="align-content-start" ><label for="R51">flex-start:</label>
+<input name="align-content" type="radio"  class="align-content" id="R52" value="align-content-end" ><label for="R52">flex-end:</label>
+<input name="align-content" type="radio"  class="align-content" id="R53" value="align-content-center" ><label for="R53">center:</label>
+<input name="align-content" type="radio"  class="align-content" id="R54" value="align-content-space-between" ><label for="R54">space-between:</label>
+<input name="align-content" type="radio"  class="align-content" id="R55" value="align-content-space-around" ><label for="R55">space-around:</label>
+<input name="align-content" type="radio"  class="align-content" id="R56" value="align-content-stretch"  checked><label for="R56">stretch:</label>
+</div></div>
+<div class="flex-container" id="alignContent">
+
+<div class="item" data-color="1bbc9d"><p>1</p></div>
+<div class="item" data-color="2fcc71"><p>2</p></div>
+<div class="item" data-color="3598dc"><p>3</p></div>
+<div class="item" data-color="9c59b8"><p>4</p></div>
+<div class="item" data-color="34495e"><p>5</p></div>
+<div class="item" data-color="16a086"><p>6</p></div>
+<div class="item" data-color="27ae61"><p>7</p></div>
+<div class="item" data-color="2a80b9"><p>8</p></div>
+<div class="item" data-color="8f44ad"><p>9</p></div>
+<div class="item" data-color="2d3e50"><p>10</p></div>
+<div class="item" data-color="f1c40f"><p>11</p></div>
+<div class="item" data-color="e77e23"><p>12</p></div>
+<div class="item" data-color="e84c3d"><p>13</p></div>
+<div class="item" data-color="ecf0f1"><p>14</p></div>
+<div class="item" data-color="96a6a6"><p>15</p></div>
+<div class="item" data-color="f49c14"><p>16</p></div>
+<div class="item" data-color="d55401"><p>17</p></div>
+<div class="item" data-color="c1392b"><p>18</p></div>
+<div class="item" data-color="bec3c7"><p>19</p></div>
+<div class="item" data-color="808b8d"><p>20</p></div>
+
+</div>
+
+
+
+</div>
+
+<!-- propiedades de los items -->
+
+<div class="principal">
+<h2>Properties for the flex items </h2>
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-align-self.php">align-self</a> <small>( property for flex items  )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
+<div class="radio">
+<input name="align-self" type="radio"  class="align-self" id="R61" value="align-self-auto"  checked ><label for="R61">auto:</label>
+<input name="align-self" type="radio"  class="align-self" id="R62" value="align-self-start" ><label for="R62">flex-start:</label>
+<input name="align-self" type="radio"  class="align-self" id="R63" value="align-self-end" ><label for="R63">flex-end:</label>
+<input name="align-self" type="radio"  class="align-self" id="R64" value="align-self-center" ><label for="R64">center:</label>
+<input name="align-self" type="radio"  class="align-self" id="R65" value="align-self-baseline" ><label for="R65">baseline:</label>
+<input name="align-self" type="radio"  class="align-self" id="R66" value="align-self-stretch"><label for="R66">stretch:</label>
+</div>
+
+</div>
+<div class="flex-container align-items-center" id="FCI1">
+
+<div class="item" data-color="f49c14"><p>1</p></div>
+<div class="item" data-color="d55401"><p>2</p></div>
+<div class="item" data-color="c1392b"  id="alignSelf"><p style="font-size:50px;">3</p></div>
+<div class="item" data-color="bec3c7"><p>4</p></div>
+<div class="item" data-color="808b8d"><p>5</p></div>
+
+</div>
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-abreviado.php#flexGrow">flex-grow</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
+<div class="radio">
+<span class="nbsp"><label for="R71">elemento 1: </label><input type="number"  class="flex-grow" id="R71" min="0" ></span>
+<span class="nbsp"><label for="R72">elemento 2: </label><input type="number"  class="flex-grow" id="R72" min="0" ></span>
+<span class="nbsp"><label for="R73">elemento 3: </label><input type="number"  class="flex-grow" id="R73" min="0" ></span>
+<span class="nbsp"><label for="R74">elemento 4: </label><input type="number"  class="flex-grow" id="R74" min="0" ></span>
+<span class="nbsp"><label for="R75">elemento 5: </label><input type="number"  class="flex-grow" id="R75" min="0" ></span>
+</div>
+
+</div>
+<div class="flex-container align-items-center" id="FCI2">
+
+<div class="item" id="itemR71" data-color="f49c14"><p>1</p></div>
+<div class="item" id="itemR72" data-color="d55401"><p>2</p></div>
+<div class="item" id="itemR73" data-color="c1392b"><p>3</p></div>
+<div class="item" id="itemR74" data-color="bec3c7"><p>4</p></div>
+<div class="item" id="itemR75" data-color="808b8d"><p>5</p></div>
+
+</div>
+
+
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-abreviado.php#flexShrink">flex-shrink</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
+<div class="radio">
+<span class="nbsp"><label for="R81">elemento 1: </label><input type="number"  class="flex-shrink" id="R81" min="0" ></span>
+<span class="nbsp"><label for="R82">elemento 2: </label><input type="number"  class="flex-shrink" id="R82" min="0" ></span>
+<span class="nbsp"><label for="R83">elemento 3: </label><input type="number"  class="flex-shrink" id="R83" min="0" ></span>
+<span class="nbsp"><label for="R84">elemento 4: </label><input type="number"  class="flex-shrink" id="R84" min="0" ></span>
+<span class="nbsp"><label for="R85">elemento 5: </label><input type="number"  class="flex-shrink" id="R85" min="0" ></span>
+</div>
+
+</div>
+<div class="flex-container align-items-center" id="FCI3">
+
+<div class="item" id="itemR81" data-color="f49c14"><p>1</p></div>
+<div class="item" id="itemR82" data-color="d55401"><p>2</p></div>
+<div class="item" id="itemR83" data-color="c1392b"><p>3</p></div>
+<div class="item" id="itemR84" data-color="bec3c7"><p>4</p></div>
+<div class="item" id="itemR85" data-color="808b8d"><p>5</p></div>
+
+</div>
+
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-abreviado.php">flex</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
+<p>.item { flex: flex-grow [flex-shrink] [flex-basis]; } </p>
+<table id="flexBasis">
+<tr><td>elemento 1</td><td>elemento 2</td></tr>
+<tr><td><input type="number" class="flex-basis" id="B1" min="0" value="50" ><label for="B1">flex-basis %</label></td><td><input type="number" class="flex-basis" id="B2" min="0" value="50" ><label for="B2">flex-basis %</label></td></tr>
+<tr><td><input type="number" class="flex-basis-grow" id="G1" min="0" value="0" ><label for="G1">flex-grow</label></td><td><input type="number" class="flex-basis-grow" id="G2" min="0" value="0" ><label for="G2">flex-grow</label></td></tr>
+<tr><td><input type="number" class="flex-basis-shrink" id="S1" min="0" value="0" ><label for="S1">flex-shrink</label></td><td><input type="number" class="flex-basis-shrink" id="S2" min="0" value="0" ><label for="S2">flex-shrink</label></td></tr>
+</table>
+</div>
+
+
+<div class="flex-container align-items-center" id="FCI4">
+
+<div class="item" id="item1" data-color="f49c14"><p>1</p></div>
+<div class="item" id="item2" data-color="d55401"><p>2</p></div>
+
+</div>
+
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-order.php">order</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
+<div class="radio">
+<span class="nbsp"><label for="R91">elemento 1: </label><input type="number"  class="flex-order" id="R91" min="0" ></span>
+<span class="nbsp"><label for="R92">elemento 2: </label><input type="number"  class="flex-order" id="R92" min="0" ></span>
+<span class="nbsp"><label for="R93">elemento 3: </label><input type="number"  class="flex-order" id="R93" min="0" ></span>
+<span class="nbsp"><label for="R94">elemento 4: </label><input type="number"  class="flex-order" id="R94" min="0" ></span>
+<span class="nbsp"><label for="R95">elemento 5: </label><input type="number"  class="flex-order" id="R95" min="0" ></span>
+</div>
+
+</div>
+<div class="flex-container align-items-center" id="FCI5">
+
+
+<div class="item" id="orderR91" data-color="f49c14"><p>1</p></div>
+<div class="item" id="orderR92" data-color="d55401"><p>2</p></div>
+<div class="item" id="orderR93" data-color="c1392b"><p>3</p></div>
+<div class="item" id="orderR94" data-color="bec3c7"><p>4</p></div>
+<div class="item" id="orderR95" data-color="808b8d"><p>5</p></div>
+
+</div>
+
+
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/flexbox-playground/dist/script.js b/flexbox-playground/dist/script.js
new file mode 100644
index 0000000..d1dff9e
--- /dev/null
+++ b/flexbox-playground/dist/script.js
@@ -0,0 +1,74 @@
+function changeFlex(e, t) { 
+  
+  for (var n = document.querySelectorAll("." + e), l = document.querySelector("#" + t), r = 0; r < n.length; r++) n[r].addEventListener("change", function() {
+    var e = this.value;
+    l.setAttribute("class", "flex-container " + e)
+  }, !1)
+}
+
+function changeItemFlex(e, t) {
+  for (var n = document.querySelectorAll("." + e), l = document.querySelector("#" + t), r = 0; r < n.length; r++) n[r].addEventListener("change", function() {
+    var e = this.value;
+    l.setAttribute("class", "item " + e)
+  }, !1)
+}
+
+function changeFlexBasis(e, t) {
+  var n = isNaN(e.value) ? 0 : e.value;
+  console.log("B: " + n), document.querySelector("#" + t).style.WebkitFlexBasis = n + "%", document.querySelector("#" + t).style.flexBasis = n + "%"
+}
+
+function changeFlexGrow(e, t) {
+  var n = isNaN(e.value) ? 0 : e.value;
+  console.log("G: " + n), document.querySelector("#" + t).style.WebkitFlexGrow = n, document.querySelector("#" + t).style.flexGrow = n
+}
+
+function changeFlexShrink(e, t) {
+  var n = isNaN(e.value) ? 0 : e.value;
+  console.log("S: " + n), document.querySelector("#" + t).style.WebkitFlexShrink = n, document.querySelector("#" + t).style.flexShrink = n
+}
+
+function changeFlexOrder(e, t) {
+  var n = isNaN(e.value) ? 0 : e.value;
+  console.log("O: " + n), document.querySelector("#" + t).style.WebkitOrder = n, document.querySelector("#" + t).style.order = n
+}
+
+function changeAll(e, t, n, l) {
+  changeFlexBasis(e, l), changeFlexGrow(t, l), changeFlexShrink(n, l)
+}
+for (var items = document.querySelectorAll(".item"), i = 0; i < items.length; i++)
+  if (items[i].hasAttribute("data-color")) {
+    var color = items[i].getAttribute("data-color");
+    items[i].style.backgroundColor = "#" + color
+  }
+for (var flexO = document.querySelectorAll(".flex-order"), o = 0; o < flexO.length; o++) flexO[o].addEventListener("change", function() {
+  changeFlexOrder(this, "order" + this.id)
+}, !1);
+changeFlex("flex-direction", "direction"), changeFlex("flex-wrap", "wrap"), changeFlex("flex-align-items", "align"), changeFlex("justify-content", "justify"), changeFlex("align-content", "alignContent"), changeItemFlex("align-self", "alignSelf");
+for (var flexGrow = document.querySelectorAll(".flex-grow"), i = 0; i < flexGrow.length; i++) flexGrow[i].addEventListener("change", function() {
+  var e = "item" + this.id;
+  changeFlexGrow(this, e)
+});
+for (var flexShrink = document.querySelectorAll(".flex-shrink"), j = 0; j < flexShrink.length; j++) flexShrink[j].addEventListener("change", function() {
+  var e = "item" + this.id;
+  changeFlexShrink(this, e)
+});
+var B1 = document.querySelector("#B1"),
+  G1 = document.querySelector("#G1"),
+  S1 = document.querySelector("#S1"),
+  B2 = document.querySelector("#B2"),
+  G2 = document.querySelector("#G2"),
+  S2 = document.querySelector("#S2");
+B1.addEventListener("change", function() {
+  changeAll(B1, G1, S1, "item1")
+}), G1.addEventListener("change", function() {
+  changeAll(B1, G1, S1, "item1")
+}), S1.addEventListener("change", function() {
+  changeAll(B1, G1, S1, "item1")
+}), B2.addEventListener("change", function() {
+  changeAll(B2, G2, S2, "item2")
+}), G2.addEventListener("change", function() {
+  changeAll(B2, G2, S2, "item2")
+}), S2.addEventListener("change", function() {
+  changeAll(B2, G2, S2, "item2")
+});
\ No newline at end of file
diff --git a/flexbox-playground/dist/style.css b/flexbox-playground/dist/style.css
new file mode 100644
index 0000000..9b508a5
--- /dev/null
+++ b/flexbox-playground/dist/style.css
@@ -0,0 +1,267 @@
+/*flex-direction: row | row-reverse | column | column-reverse;*/
+
+.flex-container.row {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.flex-container.row-reverse {
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.flex-container.column {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.flex-container.column-reverse {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column-reverse;
+}
+
+
+/*flex-wrap: nowrap | wrap | wrap-reverse;*/
+
+.flex-container.nowrap {
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.flex-container.wrap {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.flex-container.wrap-reverse {
+  -webkit-flex-wrap: wrap-reverse;
+  -ms-flex-wrap: wrap-reverse;
+  flex-wrap: wrap-reverse;
+}
+
+
+/*align-items: flex-start | flex-end | center | baseline | stretch;*/
+
+.flex-container.align-items-start {
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+
+.flex-container.align-items-end {
+  -webkit-align-items: flex-end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+}
+
+.flex-container.align-items-center {
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.flex-container.align-items-baseline {
+  webkit-align-items: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
+.flex-container.align-items-stretch {
+  webkit-align-items: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+
+/*justify-content: flex-start | flex-end | center | space-between | space-around;*/
+
+.flex-container.justify-start {
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.flex-container.justify-end {
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.flex-container.justify-center {
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.flex-container.justify-space-between {
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.flex-container.justify-space-around {
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: justify;
+  justify-content: space-around;
+}
+
+
+/*align-content: flex-start | flex-end | center | space-between | space-around | stretch;*/
+
+.flex-container.align-content-start {
+  -webkit-align-content: flex-start;
+  -ms-flex-line-pack: start;
+  align-content: flex-start;
+}
+
+.flex-container.align-content-end {
+  -webkit-align-content: flex-end;
+  -ms-flex-line-pack: end;
+  align-content: flex-end;
+}
+
+.flex-container.align-content-center {
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.flex-container.align-content-space-between {
+  -webkit-align-content: space-between;
+  -ms-flex-line-pack: justify;
+  align-content: space-between;
+}
+
+.flex-container.align-content-space-around {
+  -webkit-align-content: space-around;
+  -ms-flex-line-pack: justify;
+  /*distribute;*/
+  align-content: space-around;
+}
+
+.flex-container.align-content-stretch {
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+
+/*align-self: auto | flex-start | flex-end | center | baseline | stretch;*/
+
+.item.align-self-auto {
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
+}
+
+.item.align-self-start {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+}
+
+.item.align-self-end {
+  -webkit-align-self: flex-end;
+  -ms-flex-item-align: end;
+  align-self: flex-end;
+}
+
+.item.align-self-center {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+}
+
+.item.align-self-baseline {
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+}
+
+.item.align-self-stretch {
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.item.flex-grow1 {
+  flex-grow: 1;
+}
+
+.item.flex-grow2 {
+  flex-grow: 2;
+}
+
+.item.flex-grow3 {
+  flex-grow: 3;
+}
+
+.item.flex-grow4 {
+  flex-grow: 4;
+}
+html,body{ width:100%; min-height:100%; margin:0; padding:0; color:#ddd; font-size:14px; font-family:Verdana, Geneva, sans-serif;background-color:#333;}
+*{
+	box-sizing : border-box; 
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale; 
+}
+.principal{ width:calc(50% - 40px); min-width:525px; margin:0 20px 20px 20px; float:left;}
+.radio{ margin-bottom:20px;}
+label{ line-height:200%;}
+input[type=radio] { color:white; }
+input[type=radio]:checked + label { color:orange; }
+input[type=number]{ width:40px; margin-right:.5em;}
+h1{ font-size:200%;margin:20px;}
+h2{ font-size:180%;margin:0px;}
+h4 a{ font-variant:small-caps; font-size:120%; color:#ddd; text-decoration:none;}
+h4 small{font-variant: normal; font-size:80%; font-weight:normal; color:#57bcdb;}
+table{ width:100%; margin-bottom:1em;}
+table td{ width:50%; padding:3px;}
+.principal:last-of-type h4 small{ color:#ff8080;}
+.flex-container {
+ border: 1px solid #555;
+ display : -webkit-flex;
+ display : -ms-flexbox;
+ display : flex;
+ padding:20px;
+ width:100%; 
+ }
+.item{
+	margin:0; 
+    display : inherit;
+	padding:10px; 
+	width:100px; 
+	height:100px;
+	-webkit-align-items: center;
+	-ms-flex-align:center;
+	align-items: center;
+	}
+.item p{width:100%; text-align:center; color:#fff;}
+#direction .item{flex-wrap:wrap;}
+/*#wrap .item{ height:auto;}*/
+#wrap{ width:400px;}
+#align .item{height:auto; height:auto;flex-wrap:wrap;}	
+#align{ height:300px;}
+#justify{ margin:20px 0; padding:20px 0;}
+#alignContent{flex-wrap:wrap; height:600px;}
+#alignContent .item{ height:auto;} 
+#FCI1{ height:300px;}
+#FCI1 .item{ height:auto;}
+#FCI3 .item{ width:25%;}
+#FCI4 .item{ width:50%;}
+#FCI5 .item{ width:20%;}
+.nbsp{white-space: nowrap;}
+
+@media only screen and (max-width:1100px){.principal{ width:calc(100% - 40px);}}
+@media only screen and (max-width:580px) {
+.item{ width:50px;height:50px;}
+.principal{ width:calc(100% - 40px); min-width:initial;}
+.flex-container{width:100%; min-width:initial;}	
+#wrap{ width:200px;}
+}
\ No newline at end of file
diff --git a/flexbox-playground/license.txt b/flexbox-playground/license.txt
new file mode 100644
index 0000000..6dd7ffe
--- /dev/null
+++ b/flexbox-playground/license.txt
@@ -0,0 +1,9 @@
+Copyright (c) 2021 by CodePen Templates Team (https://codepen.io/team/CodePenTemplates/pen/YNBBoQ)
+Fork of an original work Flexbox playground (https://codepen.io/enxaneta/pen/adLPwv
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/flexbox-playground/src/index.html b/flexbox-playground/src/index.html
new file mode 100644
index 0000000..d960286
--- /dev/null
+++ b/flexbox-playground/src/index.html
@@ -0,0 +1,226 @@
+<div class="principal">
+<h2>Properties for the flex container</h2>
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-direction.php">flex-direction</a> <small>( property of the flex container  )</small></h4><!--flex-direction: row | row-reverse | column | column-reverse;-->
+<div class="radio">
+<input name="flex-direction" type="radio"  class="flex-direction" id="R11" value="row" checked><label for="R11">row:</label>
+<input name="flex-direction"  type="radio" class="flex-direction" id="R12" value="row-reverse"><label for="R12">row-reverse:</label>
+<input name="flex-direction"  type="radio" class="flex-direction" id="R13" value="column"><label for="R13">column:</label>
+<input name="flex-direction"  type="radio" class="flex-direction" id="R14" value="column-reverse"><label for="R14">column-reverse:</label>
+</div></div>
+<div class="flex-container" id="direction">
+<div class="item" data-color="2a80b9"><p>1</p></div>
+<div class="item" data-color="8f44ad"><p>2</p></div>
+<div class="item" data-color="16a086"><p>3</p></div>
+<div class="item" data-color="f1c40f"><p>4</p></div>
+<div class="item" data-color="e77e23"><p>5</p></div>
+</div>
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-wrap.php">flex-wrap</a> <small>( property of the flex container  )</small></h4><!--nowrap | wrap | wrap-reverse;-->
+<div class="radio">
+<input name="flex-wrap" type="radio"  class="flex-wrap" id="R21" value="nowrap" checked><label for="R21">nowrap:</label>
+<input name="flex-wrap" type="radio"  class="flex-wrap" id="R22" value="wrap"><label for="R22">wrap:</label>
+<input name="flex-wrap" type="radio"  class="flex-wrap" id="R23" value="wrap-reverse"><label for="R23">wrap-reverse:</label>
+</div></div>
+<div class="flex-container" id="wrap">
+<div class="item" data-color="2a80b9"><p>1</p></div>
+<div class="item" data-color="8f44ad"><p>2</p></div>
+<div class="item" data-color="16a086"><p>3</p></div>
+<div class="item" data-color="f1c40f"><p>4</p></div>
+<div class="item" data-color="e77e23"><p>5</p></div>
+</div>
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-align-items.php">align-items</a> <small>( property of the flex container  )</small></h4><!-- flex-start | flex-end | center | baseline | stretch;-->
+<div class="radio">
+<input name="flex-align-items" type="radio"  class="flex-align-items" id="R31" value="align-items-start" ><label for="R31">flex-start:</label>
+<input name="flex-align-items" type="radio"  class="flex-align-items" id="R32" value="align-items-end"><label for="R32">flex-end:</label>
+<input name="flex-align-items" type="radio"  class="flex-align-items" id="R33" value="align-items-center"><label for="R33">center:</label>
+<input name="flex-align-items" type="radio"  class="flex-align-items" id="R34" value="align-items-baseline"><label for="R34">baseline:</label>
+<input name="flex-align-items" type="radio"  class="flex-align-items" id="R35" value="align-items-stretch" checked><label for="R35">stretch:</label>
+</div></div>
+<div class="flex-container" id="align">
+<div class="item" data-color="2a80b9"><p>1</p></div>
+<div class="item" data-color="8f44ad"><p>2</p></div>
+<div class="item" data-color="16a086"><p style="font-size:50px;">3</p></div>
+<div class="item" data-color="f1c40f"><p>4</p></div>
+<div class="item" data-color="e77e23"><p>5</p></div>
+</div>
+
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-justify-content.php">justify-content</a> <small>( property of the flex container )</small></h4> <!--justify-content: flex-start | flex-end | center | space-between | space-around; -->
+<div class="radio">
+<input name="justify-content" type="radio"  class="justify-content" id="R41" value="justify-start" checked ><label for="R41">flex-start:</label>
+<input name="justify-content" type="radio"  class="justify-content" id="R42" value="justify-end" ><label for="R42">flex-end:</label>
+<input name="justify-content" type="radio"  class="justify-content" id="R43" value="justify-space-between" ><label for="R43">space-between:</label>
+<input name="justify-content" type="radio"  class="justify-content" id="R44" value="justify-center" ><label for="R44">center:</label>
+<input name="justify-content" type="radio"  class="justify-content" id="R45" value="justify-space-around" ><label for="R45">space-around:</label>
+</div></div>
+<div class="flex-container" id="justify">
+<div class="item" data-color="2a80b9"><p>1</p></div>
+<div class="item" data-color="8f44ad"><p>2</p></div>
+<div class="item" data-color="16a086"><p>3</p></div>
+<div class="item" data-color="f1c40f"><p>4</p></div>
+<div class="item" data-color="e77e23"><p>5</p></div>
+
+</div>
+
+<!--<p>En <strong>Google Chrome</strong> y <strong>Opera</strong>: problemas al cambiar dinamicamente entre <code>justify-content:space-between</code> y <code>justify-content:space-around</code> </p>-->
+
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-align-content.php">align-content</a> <small>( property of the flex container  )</small></h4> <!--justify-content: flex-start | flex-end | center | space-between | space-around; -->
+<div class="radio">
+<input name="align-content" type="radio"  class="align-content" id="R51" value="align-content-start" ><label for="R51">flex-start:</label>
+<input name="align-content" type="radio"  class="align-content" id="R52" value="align-content-end" ><label for="R52">flex-end:</label>
+<input name="align-content" type="radio"  class="align-content" id="R53" value="align-content-center" ><label for="R53">center:</label>
+<input name="align-content" type="radio"  class="align-content" id="R54" value="align-content-space-between" ><label for="R54">space-between:</label>
+<input name="align-content" type="radio"  class="align-content" id="R55" value="align-content-space-around" ><label for="R55">space-around:</label>
+<input name="align-content" type="radio"  class="align-content" id="R56" value="align-content-stretch"  checked><label for="R56">stretch:</label>
+</div></div>
+<div class="flex-container" id="alignContent">
+
+<div class="item" data-color="1bbc9d"><p>1</p></div>
+<div class="item" data-color="2fcc71"><p>2</p></div>
+<div class="item" data-color="3598dc"><p>3</p></div>
+<div class="item" data-color="9c59b8"><p>4</p></div>
+<div class="item" data-color="34495e"><p>5</p></div>
+<div class="item" data-color="16a086"><p>6</p></div>
+<div class="item" data-color="27ae61"><p>7</p></div>
+<div class="item" data-color="2a80b9"><p>8</p></div>
+<div class="item" data-color="8f44ad"><p>9</p></div>
+<div class="item" data-color="2d3e50"><p>10</p></div>
+<div class="item" data-color="f1c40f"><p>11</p></div>
+<div class="item" data-color="e77e23"><p>12</p></div>
+<div class="item" data-color="e84c3d"><p>13</p></div>
+<div class="item" data-color="ecf0f1"><p>14</p></div>
+<div class="item" data-color="96a6a6"><p>15</p></div>
+<div class="item" data-color="f49c14"><p>16</p></div>
+<div class="item" data-color="d55401"><p>17</p></div>
+<div class="item" data-color="c1392b"><p>18</p></div>
+<div class="item" data-color="bec3c7"><p>19</p></div>
+<div class="item" data-color="808b8d"><p>20</p></div>
+
+</div>
+
+
+
+</div>
+
+<!-- propiedades de los items -->
+
+<div class="principal">
+<h2>Properties for the flex items </h2>
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-align-self.php">align-self</a> <small>( property for flex items  )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
+<div class="radio">
+<input name="align-self" type="radio"  class="align-self" id="R61" value="align-self-auto"  checked ><label for="R61">auto:</label>
+<input name="align-self" type="radio"  class="align-self" id="R62" value="align-self-start" ><label for="R62">flex-start:</label>
+<input name="align-self" type="radio"  class="align-self" id="R63" value="align-self-end" ><label for="R63">flex-end:</label>
+<input name="align-self" type="radio"  class="align-self" id="R64" value="align-self-center" ><label for="R64">center:</label>
+<input name="align-self" type="radio"  class="align-self" id="R65" value="align-self-baseline" ><label for="R65">baseline:</label>
+<input name="align-self" type="radio"  class="align-self" id="R66" value="align-self-stretch"><label for="R66">stretch:</label>
+</div>
+
+</div>
+<div class="flex-container align-items-center" id="FCI1">
+
+<div class="item" data-color="f49c14"><p>1</p></div>
+<div class="item" data-color="d55401"><p>2</p></div>
+<div class="item" data-color="c1392b"  id="alignSelf"><p style="font-size:50px;">3</p></div>
+<div class="item" data-color="bec3c7"><p>4</p></div>
+<div class="item" data-color="808b8d"><p>5</p></div>
+
+</div>
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-abreviado.php#flexGrow">flex-grow</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
+<div class="radio">
+<span class="nbsp"><label for="R71">elemento 1: </label><input type="number"  class="flex-grow" id="R71" min="0" ></span>
+<span class="nbsp"><label for="R72">elemento 2: </label><input type="number"  class="flex-grow" id="R72" min="0" ></span>
+<span class="nbsp"><label for="R73">elemento 3: </label><input type="number"  class="flex-grow" id="R73" min="0" ></span>
+<span class="nbsp"><label for="R74">elemento 4: </label><input type="number"  class="flex-grow" id="R74" min="0" ></span>
+<span class="nbsp"><label for="R75">elemento 5: </label><input type="number"  class="flex-grow" id="R75" min="0" ></span>
+</div>
+
+</div>
+<div class="flex-container align-items-center" id="FCI2">
+
+<div class="item" id="itemR71" data-color="f49c14"><p>1</p></div>
+<div class="item" id="itemR72" data-color="d55401"><p>2</p></div>
+<div class="item" id="itemR73" data-color="c1392b"><p>3</p></div>
+<div class="item" id="itemR74" data-color="bec3c7"><p>4</p></div>
+<div class="item" id="itemR75" data-color="808b8d"><p>5</p></div>
+
+</div>
+
+
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-abreviado.php#flexShrink">flex-shrink</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
+<div class="radio">
+<span class="nbsp"><label for="R81">elemento 1: </label><input type="number"  class="flex-shrink" id="R81" min="0" ></span>
+<span class="nbsp"><label for="R82">elemento 2: </label><input type="number"  class="flex-shrink" id="R82" min="0" ></span>
+<span class="nbsp"><label for="R83">elemento 3: </label><input type="number"  class="flex-shrink" id="R83" min="0" ></span>
+<span class="nbsp"><label for="R84">elemento 4: </label><input type="number"  class="flex-shrink" id="R84" min="0" ></span>
+<span class="nbsp"><label for="R85">elemento 5: </label><input type="number"  class="flex-shrink" id="R85" min="0" ></span>
+</div>
+
+</div>
+<div class="flex-container align-items-center" id="FCI3">
+
+<div class="item" id="itemR81" data-color="f49c14"><p>1</p></div>
+<div class="item" id="itemR82" data-color="d55401"><p>2</p></div>
+<div class="item" id="itemR83" data-color="c1392b"><p>3</p></div>
+<div class="item" id="itemR84" data-color="bec3c7"><p>4</p></div>
+<div class="item" id="itemR85" data-color="808b8d"><p>5</p></div>
+
+</div>
+
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-abreviado.php">flex</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
+<p>.item { flex: flex-grow [flex-shrink] [flex-basis]; } </p>
+<table id="flexBasis">
+<tr><td>elemento 1</td><td>elemento 2</td></tr>
+<tr><td><input type="number" class="flex-basis" id="B1" min="0" value="50" ><label for="B1">flex-basis %</label></td><td><input type="number" class="flex-basis" id="B2" min="0" value="50" ><label for="B2">flex-basis %</label></td></tr>
+<tr><td><input type="number" class="flex-basis-grow" id="G1" min="0" value="0" ><label for="G1">flex-grow</label></td><td><input type="number" class="flex-basis-grow" id="G2" min="0" value="0" ><label for="G2">flex-grow</label></td></tr>
+<tr><td><input type="number" class="flex-basis-shrink" id="S1" min="0" value="0" ><label for="S1">flex-shrink</label></td><td><input type="number" class="flex-basis-shrink" id="S2" min="0" value="0" ><label for="S2">flex-shrink</label></td></tr>
+</table>
+</div>
+
+
+<div class="flex-container align-items-center" id="FCI4">
+
+<div class="item" id="item1" data-color="f49c14"><p>1</p></div>
+<div class="item" id="item2" data-color="d55401"><p>2</p></div>
+
+</div>
+
+
+<div class="control">
+<h4><a href="http://w3.unpocodetodo.info/css3/flex-order.php">order</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
+<div class="radio">
+<span class="nbsp"><label for="R91">elemento 1: </label><input type="number"  class="flex-order" id="R91" min="0" ></span>
+<span class="nbsp"><label for="R92">elemento 2: </label><input type="number"  class="flex-order" id="R92" min="0" ></span>
+<span class="nbsp"><label for="R93">elemento 3: </label><input type="number"  class="flex-order" id="R93" min="0" ></span>
+<span class="nbsp"><label for="R94">elemento 4: </label><input type="number"  class="flex-order" id="R94" min="0" ></span>
+<span class="nbsp"><label for="R95">elemento 5: </label><input type="number"  class="flex-order" id="R95" min="0" ></span>
+</div>
+
+</div>
+<div class="flex-container align-items-center" id="FCI5">
+
+
+<div class="item" id="orderR91" data-color="f49c14"><p>1</p></div>
+<div class="item" id="orderR92" data-color="d55401"><p>2</p></div>
+<div class="item" id="orderR93" data-color="c1392b"><p>3</p></div>
+<div class="item" id="orderR94" data-color="bec3c7"><p>4</p></div>
+<div class="item" id="orderR95" data-color="808b8d"><p>5</p></div>
+
+</div>
+
+
+</div>
\ No newline at end of file
diff --git a/flexbox-playground/src/script.js b/flexbox-playground/src/script.js
new file mode 100644
index 0000000..d1dff9e
--- /dev/null
+++ b/flexbox-playground/src/script.js
@@ -0,0 +1,74 @@
+function changeFlex(e, t) { 
+  
+  for (var n = document.querySelectorAll("." + e), l = document.querySelector("#" + t), r = 0; r < n.length; r++) n[r].addEventListener("change", function() {
+    var e = this.value;
+    l.setAttribute("class", "flex-container " + e)
+  }, !1)
+}
+
+function changeItemFlex(e, t) {
+  for (var n = document.querySelectorAll("." + e), l = document.querySelector("#" + t), r = 0; r < n.length; r++) n[r].addEventListener("change", function() {
+    var e = this.value;
+    l.setAttribute("class", "item " + e)
+  }, !1)
+}
+
+function changeFlexBasis(e, t) {
+  var n = isNaN(e.value) ? 0 : e.value;
+  console.log("B: " + n), document.querySelector("#" + t).style.WebkitFlexBasis = n + "%", document.querySelector("#" + t).style.flexBasis = n + "%"
+}
+
+function changeFlexGrow(e, t) {
+  var n = isNaN(e.value) ? 0 : e.value;
+  console.log("G: " + n), document.querySelector("#" + t).style.WebkitFlexGrow = n, document.querySelector("#" + t).style.flexGrow = n
+}
+
+function changeFlexShrink(e, t) {
+  var n = isNaN(e.value) ? 0 : e.value;
+  console.log("S: " + n), document.querySelector("#" + t).style.WebkitFlexShrink = n, document.querySelector("#" + t).style.flexShrink = n
+}
+
+function changeFlexOrder(e, t) {
+  var n = isNaN(e.value) ? 0 : e.value;
+  console.log("O: " + n), document.querySelector("#" + t).style.WebkitOrder = n, document.querySelector("#" + t).style.order = n
+}
+
+function changeAll(e, t, n, l) {
+  changeFlexBasis(e, l), changeFlexGrow(t, l), changeFlexShrink(n, l)
+}
+for (var items = document.querySelectorAll(".item"), i = 0; i < items.length; i++)
+  if (items[i].hasAttribute("data-color")) {
+    var color = items[i].getAttribute("data-color");
+    items[i].style.backgroundColor = "#" + color
+  }
+for (var flexO = document.querySelectorAll(".flex-order"), o = 0; o < flexO.length; o++) flexO[o].addEventListener("change", function() {
+  changeFlexOrder(this, "order" + this.id)
+}, !1);
+changeFlex("flex-direction", "direction"), changeFlex("flex-wrap", "wrap"), changeFlex("flex-align-items", "align"), changeFlex("justify-content", "justify"), changeFlex("align-content", "alignContent"), changeItemFlex("align-self", "alignSelf");
+for (var flexGrow = document.querySelectorAll(".flex-grow"), i = 0; i < flexGrow.length; i++) flexGrow[i].addEventListener("change", function() {
+  var e = "item" + this.id;
+  changeFlexGrow(this, e)
+});
+for (var flexShrink = document.querySelectorAll(".flex-shrink"), j = 0; j < flexShrink.length; j++) flexShrink[j].addEventListener("change", function() {
+  var e = "item" + this.id;
+  changeFlexShrink(this, e)
+});
+var B1 = document.querySelector("#B1"),
+  G1 = document.querySelector("#G1"),
+  S1 = document.querySelector("#S1"),
+  B2 = document.querySelector("#B2"),
+  G2 = document.querySelector("#G2"),
+  S2 = document.querySelector("#S2");
+B1.addEventListener("change", function() {
+  changeAll(B1, G1, S1, "item1")
+}), G1.addEventListener("change", function() {
+  changeAll(B1, G1, S1, "item1")
+}), S1.addEventListener("change", function() {
+  changeAll(B1, G1, S1, "item1")
+}), B2.addEventListener("change", function() {
+  changeAll(B2, G2, S2, "item2")
+}), G2.addEventListener("change", function() {
+  changeAll(B2, G2, S2, "item2")
+}), S2.addEventListener("change", function() {
+  changeAll(B2, G2, S2, "item2")
+});
\ No newline at end of file
diff --git a/flexbox-playground/src/style.css b/flexbox-playground/src/style.css
new file mode 100644
index 0000000..407eec2
--- /dev/null
+++ b/flexbox-playground/src/style.css
@@ -0,0 +1,267 @@
+/*flex-direction: row | row-reverse | column | column-reverse;*/
+
+.flex-container.row {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.flex-container.row-reverse {
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.flex-container.column {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.flex-container.column-reverse {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column-reverse;
+}
+
+
+/*flex-wrap: nowrap | wrap | wrap-reverse;*/
+
+.flex-container.nowrap {
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.flex-container.wrap {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.flex-container.wrap-reverse {
+  -webkit-flex-wrap: wrap-reverse;
+  -ms-flex-wrap: wrap-reverse;
+  flex-wrap: wrap-reverse;
+}
+
+
+/*align-items: flex-start | flex-end | center | baseline | stretch;*/
+
+.flex-container.align-items-start {
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+
+.flex-container.align-items-end {
+  -webkit-align-items: flex-end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+}
+
+.flex-container.align-items-center {
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.flex-container.align-items-baseline {
+  webkit-align-items: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
+.flex-container.align-items-stretch {
+  webkit-align-items: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+
+/*justify-content: flex-start | flex-end | center | space-between | space-around;*/
+
+.flex-container.justify-start {
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.flex-container.justify-end {
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.flex-container.justify-center {
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.flex-container.justify-space-between {
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.flex-container.justify-space-around {
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: justify;
+  justify-content: space-around;
+}
+
+
+/*align-content: flex-start | flex-end | center | space-between | space-around | stretch;*/
+
+.flex-container.align-content-start {
+  -webkit-align-content: flex-start;
+  -ms-flex-line-pack: start;
+  align-content: flex-start;
+}
+
+.flex-container.align-content-end {
+  -webkit-align-content: flex-end;
+  -ms-flex-line-pack: end;
+  align-content: flex-end;
+}
+
+.flex-container.align-content-center {
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.flex-container.align-content-space-between {
+  -webkit-align-content: space-between;
+  -ms-flex-line-pack: justify;
+  align-content: space-between;
+}
+
+.flex-container.align-content-space-around {
+  -webkit-align-content: space-around;
+  -ms-flex-line-pack: justify;
+  /*distribute;*/
+  align-content: space-around;
+}
+
+.flex-container.align-content-stretch {
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+
+/*align-self: auto | flex-start | flex-end | center | baseline | stretch;*/
+
+.item.align-self-auto {
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
+}
+
+.item.align-self-start {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+}
+
+.item.align-self-end {
+  -webkit-align-self: flex-end;
+  -ms-flex-item-align: end;
+  align-self: flex-end;
+}
+
+.item.align-self-center {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+}
+
+.item.align-self-baseline {
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+}
+
+.item.align-self-stretch {
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.item.flex-grow1 {
+  flex-grow: 1;
+}
+
+.item.flex-grow2 {
+  flex-grow: 2;
+}
+
+.item.flex-grow3 {
+  flex-grow: 3;
+}
+
+.item.flex-grow4 {
+  flex-grow: 4;
+}
+html,body{ width:100%; min-height:100%; margin:0; padding:0; color:#ddd; font-size:14px; font-family:Verdana, Geneva, sans-serif;background-color:#333;}
+*{
+	box-sizing : border-box; 
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale; 
+}
+.principal{ width:calc(50% - 40px); min-width:525px; margin:0 20px 20px 20px; float:left;}
+.radio{ margin-bottom:20px;}
+label{ line-height:200%;}
+input[type=radio] { color:white; }
+input[type=radio]:checked + label { color:orange; }
+input[type=number]{ width:40px; margin-right:.5em;}
+h1{ font-size:200%;margin:20px;}
+h2{ font-size:180%;margin:0px;}
+h4 a{ font-variant:small-caps; font-size:120%; color:#ddd; text-decoration:none;}
+h4 small{font-variant: normal; font-size:80%; font-weight:normal; color:#57bcdb;}
+table{ width:100%; margin-bottom:1em;}
+table td{ width:50%; padding:3px;}
+.principal:last-of-type h4 small{ color:#ff8080;}
+.flex-container {
+ border: 1px solid #555;
+ display : -webkit-flex;
+ display : -ms-flexbox;
+ display : flex;
+ padding:20px;
+ width:100%; 
+ }
+.item{
+	margin:0; 
+    display : inherit;
+	padding:10px; 
+	width:100px; 
+	height:100px;
+	-webkit-align-items: center;
+	-ms-flex-align:center;
+	align-items: center;
+	}
+.item p{width:100%; text-align:center; color:#fff;}
+#direction .item{flex-wrap:wrap;}
+/*#wrap .item{ height:auto;}*/
+#wrap{ width:400px;}
+#align .item{height:auto; height:auto;flex-wrap:wrap;}	
+#align{ height:300px;}
+#justify{ margin:20px 0; padding:20px 0;}
+#alignContent{flex-wrap:wrap; height:600px;}
+#alignContent .item{ height:auto;} 
+#FCI1{ height:300px;}
+#FCI1 .item{ height:auto;}
+#FCI3 .item{ width:25%;}
+#FCI4 .item{ width:50%;}
+#FCI5 .item{ width:20%;}
+.nbsp{white-space: nowrap;}
+
+@media only screen and (max-width:1100px){.principal{ width:calc(100% - 40px);}}
+@media only screen and (max-width:580px) {
+.item{ width:50px;height:50px;}
+.principal{ width:calc(100% - 40px); min-width:initial;}
+.flex-container{width:100%; min-width:initial;}	
+#wrap{ width:200px;}
+}
diff --git a/flipboxes/README.markdown b/flipboxes/README.markdown
new file mode 100644
index 0000000..8dfcbfe
--- /dev/null
+++ b/flipboxes/README.markdown
@@ -0,0 +1,5 @@
+# FlipBoxes
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/amit_sheen/pen/YzQoMxR](https://codepen.io/amit_sheen/pen/YzQoMxR).
+
+
diff --git a/flipboxes/dist/index.html b/flipboxes/dist/index.html
new file mode 100644
index 0000000..17e7e7c
--- /dev/null
+++ b/flipboxes/dist/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - FlipBoxes</title>
+  <link rel='stylesheet' href='https://assets.codepen.io/1948355/reset_as.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="checkboxes">
+
+  <label class="flipBox">
+    <input type="checkbox" />
+    <span>Checkbox 1</span>
+    <div class="flipBox_boxOuter">
+      <div class="flipBox_box">
+        <div></div><div></div><div></div><div></div><div></div><div></div>
+      </div>
+    </div>
+    <div class="flipBox_shadow"></div>
+  </label>
+
+  <label class="flipBox">
+    <input type="checkbox" />
+    <span>Checkbox 2</span>
+    <div class="flipBox_boxOuter">
+      <div class="flipBox_box">
+        <div></div><div></div><div></div><div></div><div></div><div></div>
+      </div>
+    </div>
+    <div class="flipBox_shadow"></div>
+  </label>
+
+  <label class="flipBox">
+    <input type="checkbox" />
+    <span>Checkbox 3</span>
+    <div class="flipBox_boxOuter">
+      <div class="flipBox_box">
+        <div></div><div></div><div></div><div></div><div></div><div></div>
+      </div>
+    </div>
+    <div class="flipBox_shadow"></div>
+  </label>
+
+  <label class="flipBox">
+    <input type="checkbox" disabled />
+    <span>Disabled checkbox</span>
+    <div class="flipBox_boxOuter">
+      <div class="flipBox_box">
+        <div></div><div></div><div></div><div></div><div></div><div></div>
+      </div>
+    </div>
+    <div class="flipBox_shadow"></div>
+  </label>
+
+  <label class="flipBox">
+    <input type="checkbox" />
+    <span>Checkbox 4</span>
+    <div class="flipBox_boxOuter">
+      <div class="flipBox_box">
+        <div></div><div></div><div></div><div></div><div></div><div></div>
+      </div>
+    </div>
+    <div class="flipBox_shadow"></div>
+  </label>
+
+</div>
+<!-- partial -->
+  <script src='https://assets.codepen.io/1948355/twitterButton-2.1.0.js'></script>
+</body>
+</html>
diff --git a/flipboxes/dist/style.css b/flipboxes/dist/style.css
new file mode 100644
index 0000000..b0eecb2
--- /dev/null
+++ b/flipboxes/dist/style.css
@@ -0,0 +1,301 @@
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap");
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Ubuntu", sans-serif;
+  background-color: #ddd;
+  color: #000;
+  min-height: 100vh;
+  margin: 0;
+  display: grid;
+  place-items: center;
+  perspective: 750px;
+}
+
+*:not(:empty) {
+  transform-style: preserve-3d;
+}
+
+.checkboxes {
+  width: 100%;
+  max-width: 420px;
+}
+
+.flipBox {
+  position: relative;
+  display: block;
+  text-align: left;
+  margin: 1em auto;
+  cursor: pointer;
+}
+.flipBox:active > .flipBox_boxOuter {
+  height: 25%;
+}
+.flipBox span {
+  padding-left: 1.25em;
+}
+.flipBox > input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  position: fixed;
+  left: -100vmax;
+  top: -100vmax;
+}
+.flipBox > input:checked ~ .flipBox_boxOuter {
+  -webkit-animation: flipBox1 1s forwards linear;
+          animation: flipBox1 1s forwards linear;
+}
+.flipBox > input:checked ~ .flipBox_boxOuter .flipBox_box {
+  -webkit-animation: flipBox2 1s forwards ease-in-out;
+          animation: flipBox2 1s forwards ease-in-out;
+}
+.flipBox > input:checked ~ .flipBox_shadow {
+  -webkit-animation: flipBox3 1s forwards ease-in-out;
+          animation: flipBox3 1s forwards ease-in-out;
+}
+.flipBox > input:not(:checked) ~ .flipBox_boxOuter {
+  -webkit-animation: flipBox4 1s forwards linear;
+          animation: flipBox4 1s forwards linear;
+}
+.flipBox > input:not(:checked) ~ .flipBox_boxOuter .flipBox_box {
+  -webkit-animation: flipBox5 1s forwards ease-in-out;
+          animation: flipBox5 1s forwards ease-in-out;
+}
+.flipBox > input:not(:checked) ~ .flipBox_shadow {
+  -webkit-animation: flipBox6 1s forwards ease-in-out;
+          animation: flipBox6 1s forwards ease-in-out;
+}
+.flipBox > input:disabled ~ * {
+  cursor: not-allowed;
+}
+.flipBox > input:disabled ~ .flipBox_boxOuter {
+  height: 0%;
+}
+.flipBox > input:disabled ~ .flipBox_boxOuter .flipBox_box > div:nth-child(6) {
+  background-color: #ccc;
+}
+.flipBox > input:disabled ~ .flipBox_boxOuter .flipBox_box > div:nth-child(-n+5), .flipBox > input:disabled ~ .flipBox_boxOuter ~ .flipBox_shadow {
+  display: none;
+}
+.flipBox > input:focus-visible ~ span {
+  outline: 1px #000 solid;
+  outline-offset: 0.25em;
+}
+.flipBox_boxOuter {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 1em;
+  height: 1em;
+  transform-origin: top;
+  transition: height 0.25s;
+}
+.flipBox_box {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 1em;
+  height: 100%;
+  transform: translate(-50%, -50%);
+}
+.flipBox_box > div {
+  position: absolute;
+  width: 1em;
+  box-shadow: 0 0 0.25em #0007 inset;
+}
+.flipBox_box > div:nth-child(1) {
+  background-image: linear-gradient(green, white);
+  transform: rotateY(0deg) translateX(50%) rotateY(90deg);
+  height: 100%;
+}
+.flipBox_box > div:nth-child(2) {
+  background-image: linear-gradient(green, white);
+  transform: rotateY(90deg) translateX(50%) rotateY(90deg);
+  height: 100%;
+}
+.flipBox_box > div:nth-child(3) {
+  background-image: linear-gradient(green, white);
+  transform: rotateY(180deg) translateX(50%) rotateY(90deg);
+  height: 100%;
+}
+.flipBox_box > div:nth-child(4) {
+  background-image: linear-gradient(green, white);
+  transform: rotateY(270deg) translateX(50%) rotateY(90deg);
+  height: 100%;
+}
+.flipBox_box > div:nth-child(5) {
+  background-color: green;
+  transform: rotateX(90deg) translateY(-0.5em);
+  transform-origin: top;
+  height: 1em;
+}
+.flipBox_box > div:nth-child(5)::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  -webkit-clip-path: polygon(12.5% 56.25%, 25% 43.75%, 37.5% 56.25%, 75% 18.75%, 87.5% 31.25%, 37.5% 81.25%, 12.5% 56.25%);
+          clip-path: polygon(12.5% 56.25%, 25% 43.75%, 37.5% 56.25%, 75% 18.75%, 87.5% 31.25%, 37.5% 81.25%, 12.5% 56.25%);
+}
+.flipBox_box > div:nth-child(6) {
+  bottom: 0;
+  background-color: white;
+  transform: rotateX(90deg) translateY(0.5em);
+  transform-origin: bottom;
+  height: 1em;
+}
+.flipBox_shadow {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 1em;
+  height: 1em;
+  transform: translateY(-50%) translateZ(-1px);
+  background-color: #0007;
+  filter: blur(0.2em);
+}
+@-webkit-keyframes flipBox1 {
+  0%, 100% {
+    transform: rotateX(90deg);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  50% {
+    transform: rotateX(90deg) translateY(2em);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+}
+@keyframes flipBox1 {
+  0%, 100% {
+    transform: rotateX(90deg);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  50% {
+    transform: rotateX(90deg) translateY(2em);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+}
+@-webkit-keyframes flipBox2 {
+  from {
+    transform: translate(-50%, -50%) rotateX(0deg) rotateY(180deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0deg);
+  }
+}
+@keyframes flipBox2 {
+  from {
+    transform: translate(-50%, -50%) rotateX(0deg) rotateY(180deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0deg);
+  }
+}
+@-webkit-keyframes flipBox3 {
+  0%, 100% {
+    transform: translateY(-50%) translateZ(-1px) scale(1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  50% {
+    transform: translateY(-50%) translateZ(-1px) scale(1.5);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+}
+@keyframes flipBox3 {
+  0%, 100% {
+    transform: translateY(-50%) translateZ(-1px) scale(1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  50% {
+    transform: translateY(-50%) translateZ(-1px) scale(1.5);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+}
+@-webkit-keyframes flipBox4 {
+  0%, 100% {
+    transform: rotateX(90deg);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  50% {
+    transform: rotateX(90deg) translateY(2em);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+}
+@keyframes flipBox4 {
+  0%, 100% {
+    transform: rotateX(90deg);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  50% {
+    transform: rotateX(90deg) translateY(2em);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+}
+@-webkit-keyframes flipBox5 {
+  from {
+    transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotateX(-360deg) rotateY(180deg);
+  }
+}
+@keyframes flipBox5 {
+  from {
+    transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotateX(-360deg) rotateY(180deg);
+  }
+}
+@-webkit-keyframes flipBox6 {
+  0%, 100% {
+    transform: translateY(-50%) translateZ(-1px) scale(1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  50% {
+    transform: translateY(-50%) translateZ(-1px) scale(1.5);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+}
+@keyframes flipBox6 {
+  0%, 100% {
+    transform: translateY(-50%) translateZ(-1px) scale(1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  50% {
+    transform: translateY(-50%) translateZ(-1px) scale(1.5);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .flipBox_boxOuter,
+.flipBox_box,
+.flipBox_shadow {
+    -webkit-animation-play-state: paused !important;
+            animation-play-state: paused !important;
+  }
+
+  .flipBox_boxOuter {
+    transition: none;
+  }
+}
\ No newline at end of file
diff --git a/flipboxes/license.txt b/flipboxes/license.txt
new file mode 100644
index 0000000..244aff2
--- /dev/null
+++ b/flipboxes/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Amit Sheen (https://codepen.io/amit_sheen/pen/YzQoMxR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/flipboxes/src/index.html b/flipboxes/src/index.html
new file mode 100644
index 0000000..ebd6e91
--- /dev/null
+++ b/flipboxes/src/index.html
@@ -0,0 +1,58 @@
+<div class="checkboxes">
+
+  <label class="flipBox">
+    <input type="checkbox" />
+    <span>Checkbox 1</span>
+    <div class="flipBox_boxOuter">
+      <div class="flipBox_box">
+        <div></div><div></div><div></div><div></div><div></div><div></div>
+      </div>
+    </div>
+    <div class="flipBox_shadow"></div>
+  </label>
+
+  <label class="flipBox">
+    <input type="checkbox" />
+    <span>Checkbox 2</span>
+    <div class="flipBox_boxOuter">
+      <div class="flipBox_box">
+        <div></div><div></div><div></div><div></div><div></div><div></div>
+      </div>
+    </div>
+    <div class="flipBox_shadow"></div>
+  </label>
+
+  <label class="flipBox">
+    <input type="checkbox" />
+    <span>Checkbox 3</span>
+    <div class="flipBox_boxOuter">
+      <div class="flipBox_box">
+        <div></div><div></div><div></div><div></div><div></div><div></div>
+      </div>
+    </div>
+    <div class="flipBox_shadow"></div>
+  </label>
+
+  <label class="flipBox">
+    <input type="checkbox" disabled />
+    <span>Disabled checkbox</span>
+    <div class="flipBox_boxOuter">
+      <div class="flipBox_box">
+        <div></div><div></div><div></div><div></div><div></div><div></div>
+      </div>
+    </div>
+    <div class="flipBox_shadow"></div>
+  </label>
+
+  <label class="flipBox">
+    <input type="checkbox" />
+    <span>Checkbox 4</span>
+    <div class="flipBox_boxOuter">
+      <div class="flipBox_box">
+        <div></div><div></div><div></div><div></div><div></div><div></div>
+      </div>
+    </div>
+    <div class="flipBox_shadow"></div>
+  </label>
+
+</div>
\ No newline at end of file
diff --git a/flipboxes/src/style.scss b/flipboxes/src/style.scss
new file mode 100644
index 0000000..2f51610
--- /dev/null
+++ b/flipboxes/src/style.scss
@@ -0,0 +1,227 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Ubuntu', sans-serif;
+  background-color: #ddd;
+  color: #000;
+  min-height: 100vh;
+  margin: 0;
+  // padding: 3em 1em;
+  display: grid;
+  place-items: center;
+  perspective: 750px;
+}
+
+*:not(:empty) {
+  transform-style: preserve-3d;
+}
+
+.checkboxes {
+  width: 100%;
+  max-width: 420px;
+}
+
+.flipBox {
+  position: relative;
+  display: block;
+  text-align: left;
+  margin: 1em auto;
+  cursor: pointer;
+
+  $clr1: green;
+  $clr2: white;
+
+  &:active > &_boxOuter {
+    height: 25%;
+  }
+  
+  & span {
+      padding-left: 1.25em;
+  }
+
+  & > input {
+    appearance: none;
+    position: fixed;
+    left: -100vmax; top: -100vmax;
+
+    &:checked {
+      & ~ .flipBox_boxOuter {
+        animation: flipBox1 1s forwards linear;
+        .flipBox_box {
+          animation: flipBox2 1s forwards ease-in-out;
+        }
+      }
+      & ~ .flipBox_shadow {
+        animation: flipBox3 1s forwards ease-in-out;
+      }
+    }
+
+    &:not(:checked) {
+      & ~ .flipBox_boxOuter {
+        animation: flipBox4 1s forwards linear;
+        .flipBox_box {
+          animation: flipBox5 1s forwards ease-in-out;
+        }
+      }
+      & ~ .flipBox_shadow {
+        animation: flipBox6 1s forwards ease-in-out;
+      }
+    }
+
+    &:disabled {
+      & ~ * {
+        cursor: not-allowed;
+      }
+
+      & ~ .flipBox_boxOuter {
+        height: 0%;
+
+        .flipBox_box > div:nth-child(6) {
+          background-color: #ccc;
+        }
+        .flipBox_box > div:nth-child(-n + 5),
+          & ~ .flipBox_shadow {
+            display: none;
+        }
+      }
+    }
+    
+    &:focus-visible {
+      & ~ span {
+        outline: 1px #000 solid;
+        outline-offset: 0.25em;
+      }
+    }
+  }
+
+  &_boxOuter {
+    position: absolute;
+    left: 0; top: 50%;
+    width: 1em; height: 1em;
+    transform-origin: top;
+    transition: height 0.25s;
+  }
+
+  &_box {
+    position: absolute;
+    left: 50%; top: 50%;
+    width: 1em; height: 100%;
+    transform: translate(-50%, -50%);
+
+    & > div {
+      position: absolute;
+      width: 1em;
+      box-shadow: 0 0 0.25em #0007 inset;
+
+      @for $i from 0 to 4 {
+        &:nth-child(#{$i + 1}) {
+          background-image: linear-gradient($clr1, $clr2);
+          transform: rotateY(#{$i * 90}deg) translateX(50%) rotateY(90deg);
+          height: 100%;
+        }
+      }
+
+      &:nth-child(5) {
+        background-color: $clr1;
+        transform: rotateX(90deg) translateY(-0.5em);
+        transform-origin: top;
+        height: 1em;
+
+        &::after {
+          content: '';
+          position: absolute;
+          width: 100%; height: 100%;
+          background-color: $clr2;
+          clip-path: polygon(12.5% 56.25%, 25% 43.75%, 37.5% 56.25%, 75% 18.75%, 87.5% 31.25%, 37.5% 81.25%, 12.5% 56.25%);
+        }
+      }
+
+      &:nth-child(6) {
+        bottom: 0;
+        background-color: $clr2;
+        transform: rotateX(90deg) translateY(0.5em);
+        transform-origin: bottom;
+        height: 1em;
+      }
+    }
+  }
+
+  &_shadow {
+    position: absolute;
+    left: 0; top: 50%;
+    width: 1em; height: 1em;
+    transform: translateY(-50%) translateZ(-1px);
+    background-color: #0007;
+    filter: blur(0.2em);
+  }
+
+  @keyframes flipBox1 {
+    0%, 100%   {
+      transform: rotateX(90deg);
+      animation-timing-function: ease-out;
+    }
+    50%  {
+      transform: rotateX(90deg) translateY(2em);
+      animation-timing-function: ease-in;
+    }
+  }
+
+  @keyframes flipBox2 {
+    from { transform: translate(-50%, -50%) rotateX(0deg) rotateY(180deg); }
+    to   { transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0deg); }
+  }
+
+  @keyframes flipBox3 {
+    0%, 100%   {
+      transform: translateY(-50%) translateZ(-1px) scale(1);
+      animation-timing-function: ease-out;
+    }
+    50%  {
+      transform: translateY(-50%) translateZ(-1px) scale(1.5);
+      animation-timing-function: ease-in;
+    }
+  }
+
+  @keyframes flipBox4 {
+    0%, 100%   {
+      transform: rotateX(90deg);
+      animation-timing-function: ease-out;
+    }
+    50%  {
+      transform: rotateX(90deg) translateY(2em);
+      animation-timing-function: ease-in;
+    }
+  }
+
+  @keyframes flipBox5 {
+    from { transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0deg); }
+    to   { transform: translate(-50%, -50%) rotateX(-360deg) rotateY(180deg); }
+  }
+
+  @keyframes flipBox6 {
+    0%, 100%   {
+      transform: translateY(-50%) translateZ(-1px) scale(1);
+      animation-timing-function: ease-out;
+    }
+    50%  {
+      transform: translateY(-50%) translateZ(-1px) scale(1.5);
+      animation-timing-function: ease-in;
+    }
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .flipBox_boxOuter,
+  .flipBox_box,
+  .flipBox_shadow {
+    animation-play-state: paused !important;
+  }
+  
+  .flipBox_boxOuter {
+    transition: none;
+  }
+}
diff --git a/floating-island-w-threejs-gsap/README.markdown b/floating-island-w-threejs-gsap/README.markdown
new file mode 100644
index 0000000..f0deb6f
--- /dev/null
+++ b/floating-island-w-threejs-gsap/README.markdown
@@ -0,0 +1,5 @@
+# Floating island /w Threejs & GSAP
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/kdbkapsere/pen/PoZVMjj](https://codepen.io/kdbkapsere/pen/PoZVMjj).
+
+
diff --git a/floating-island-w-threejs-gsap/dist/index.html b/floating-island-w-threejs-gsap/dist/index.html
new file mode 100644
index 0000000..395fcf8
--- /dev/null
+++ b/floating-island-w-threejs-gsap/dist/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Floating island /w Threejs &amp; GSAP</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <canvas></canvas>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r118/three.min.js'></script>
+<script src='https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/floating-island-w-threejs-gsap/dist/script.js b/floating-island-w-threejs-gsap/dist/script.js
new file mode 100644
index 0000000..8861060
--- /dev/null
+++ b/floating-island-w-threejs-gsap/dist/script.js
@@ -0,0 +1,542 @@
+console.clear();
+let scene, camera, renderer, controls;
+let canvas = document.querySelector("canvas");
+let width = window.innerWidth;
+let height = window.innerHeight;
+let fov = 75;
+let aspectRatio = width / height;
+let near = 0.001;
+let far = 100;
+let mainGroup = new THREE.Group();
+let colors = {
+  blue: 0x71b6f7,
+  brown: 0x744436,
+  brown2: 0xC88247,
+  red: 0xfd4d50,
+  green: 0xa4d740,
+  green2: 0x66b888,
+  green3: 0x2C9D3E,
+  house: 0xfce3ad,
+  purple: 0x6e5370,
+  gold: 0xFFF09C,
+  grey: 0xB7B398,
+  greyBrown: 0xB7B398 };
+
+
+const setup = () => {
+  // scene
+  scene = new THREE.Scene();
+  scene.fog = new THREE.FogExp2(0x9ac2fe, 0.14);
+  // camera
+  camera = new THREE.PerspectiveCamera(fov, aspectRatio, near, far);
+  scene.add(camera);
+  // renderer
+  renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    canvas: canvas });
+
+  renderer.setSize(width, height);
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setClearColor(0x9ac2fe);
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  renderer.shadowMapSoft = true;
+  // controls
+  controls = new THREE.OrbitControls(camera, renderer.domElement);
+  controls.autoRotate = true;
+  controls.autoRotateSpeed = 1.6;
+  camera.position.set(3.56, 2, 3.4);
+  // lights 
+  let light = new THREE.HemisphereLight(0xffffff, 0x5c9cfe, 1.1);
+  scene.add(light);
+  //
+  let spot = new THREE.SpotLight(0xF6FAFD, 0.06);
+  spot.castShadow = true;
+  spot.shadow.camera.left = -1;
+  spot.shadow.camera.right = -1;
+  spot.shadow.camera.top = -1;
+  spot.shadow.camera.bottom = -1;
+  spot.shadow.camera.near = 1;
+  spot.shadow.camera.far = 100;
+  spot.shadow.mapSize.width = 2048;
+  spot.shadow.mapSize.height = 2048;
+  spot.shadow.camera.fov = 100;
+  spot.position.set(-3, 3, 0);
+  camera.add(spot);
+  // group for all other groups
+  mainGroup = new THREE.Group();
+  scene.add(mainGroup);
+  camera.lookAt(0, 0, 0);
+};
+
+// objects
+let islandGroup = new THREE.Group();
+const createIsland = () => {
+  // earth
+  let coneGeo = new THREE.ConeBufferGeometry(2, 3, 8);
+  let mat = new THREE.MeshLambertMaterial({
+    color: colors.brown });
+
+  let cone = new THREE.Mesh(coneGeo, mat);
+  cone.rotation.x = THREE.Math.degToRad(180);
+  cone.position.set(0, -1.75, 0);
+  islandGroup.add(cone);
+  // grass
+  let boxGeo = new THREE.BoxBufferGeometry();
+  let mat2 = new THREE.MeshLambertMaterial({
+    color: colors.green });
+
+  let grass = new THREE.Mesh(boxGeo, mat2);
+  grass.scale.set(4, 0.5, 4);
+  grass.receiveShadow = true;
+  islandGroup.add(grass);
+  // water
+  let mat3 = new THREE.MeshLambertMaterial({
+    color: colors.blue });
+
+  let water = new THREE.Mesh(boxGeo, mat3);
+  water.receiveShadow = true;
+  islandGroup.add(water);
+  water.scale.set(0.5, 0.5, 4);
+  water.position.set(0.75, 0.005, 0.005);
+  mainGroup.add(islandGroup);
+};
+
+// waterfall particles
+let dropCount = 100;
+let drops = [];
+// water details
+let detailCount = 24;
+let dets = [];
+let detailCount2 = 8;
+let dets2 = [];
+
+// creating particles function
+let particleGeo, particleMat, particle;
+const createParticles = (color, particleAmount, particleArray, scaleX, scaleY, scaleZ, posX, posX2, posY, posY2, posZ, posZ2, opacity, rotX, rotY, rotZ) => {
+  particleGeo = new THREE.BoxBufferGeometry();
+  particleMat = new THREE.MeshLambertMaterial({
+    color: color,
+    transparent: true });
+
+  for (let i = 0; i < particleAmount; i++) {
+    particle = new THREE.Mesh(particleGeo, particleMat);
+    islandGroup.add(particle);
+    particleArray.push(particle);
+    particle.scale.set(scaleX, scaleY, scaleZ);
+    particle.position.set(THREE.Math.randFloat(posX, posX2), THREE.Math.randFloat(posY, posY2), THREE.Math.randFloat(posZ, posZ2));
+    particle.material.opacity = opacity;
+    particle.rotation.set(rotX, THREE.Math.degToRad(rotY), rotZ);
+  }
+};
+
+// function to create various box like shapes of the house and the mailbox
+const createBoxShape = (x, y, z, xPos, yPos, zPos, color, rShadow, cShadow, group) => {
+  let geo = new THREE.BoxBufferGeometry(x, y, z);
+  let mat = new THREE.MeshLambertMaterial({ color: color });
+  let mesh = new THREE.Mesh(geo, mat);
+  mesh.position.set(xPos, yPos, zPos);
+  mesh.receiveShadow = rShadow;
+  mesh.castShadow = cShadow;
+  group.add(mesh);
+};
+
+let treeGroup = new THREE.Group();
+const createTree = (trunkX, trunkY, trunkZ, leavesX, leavesY, leavesZ) => {
+  // trunk
+  let geo = new THREE.CylinderBufferGeometry(0.1, 0.1, 1, 10);
+  let mat = new THREE.MeshLambertMaterial({
+    color: colors.brown });
+
+  let trunk = new THREE.Mesh(geo, mat);
+  treeGroup.add(trunk);
+  trunk.position.set(trunkX, trunkY, trunkZ);
+  trunk.castShadow = true;
+  trunk.receiveShadow = true;
+  // leaves
+  let geo2 = new THREE.SphereBufferGeometry(0.25, 12, 12);
+  let mat2 = new THREE.MeshLambertMaterial({
+    color: colors.green2 });
+
+  let treeLeaves = new THREE.Mesh(geo2, mat2);
+  treeLeaves.position.set(leavesX, leavesY, leavesZ);
+  treeLeaves.castShadow = true;
+  treeLeaves.receiveShadow = true;
+  treeGroup.add(treeLeaves);
+  mainGroup.add(treeGroup);
+};
+
+const createBush = (x, y, z) => {
+  let geo = new THREE.SphereBufferGeometry(0.15, 8, 8);
+  let mat = new THREE.MeshLambertMaterial({ color: colors.green3 });
+  let bush = new THREE.Mesh(geo, mat);
+  bush.position.set(x, y, z);
+  bush.receiveShadow = true;
+  treeGroup.add(bush);
+};
+
+// house
+let houseGroup = new THREE.Group();
+
+// roof window function
+const createRoofWindow = (x, y, z, color, radB, radT, height, segments) => {
+  let geo = new THREE.CylinderBufferGeometry(radB, radT, height, segments);
+  let mat = new THREE.MeshLambertMaterial({ color: color });
+  let window = new THREE.Mesh(geo, mat);
+  window.rotation.z = THREE.Math.degToRad(90);
+  window.position.set(x, y, z);
+  houseGroup.add(window);
+};
+
+const createHouse = () => {
+  let boxGeo = new THREE.BoxBufferGeometry();
+  // house
+  let houseMat = new THREE.MeshLambertMaterial({ color: colors.house });
+  let house = new THREE.Mesh(boxGeo, houseMat);
+  house.position.set(-1, 0.75, 1);
+  house.scale.set(1.2, 1, 1.5);
+  house.receiveShadow = true;
+  house.castShadow = true;
+  houseGroup.add(house);
+  // roof
+  let roofGeo = new THREE.ConeBufferGeometry(1.1, 0.7, 4);
+  let roofMat = new THREE.MeshLambertMaterial({ color: colors.red });
+  let roof = new THREE.Mesh(roofGeo, roofMat);
+  roof.position.set(-1, 1.6, 1);
+  roof.rotation.y = THREE.Math.degToRad(45);
+  roof.castShadow = true;
+  roof.receiveShadow = true;
+  houseGroup.add(roof);
+  // roof chimney
+  let chimneyMat = new THREE.MeshLambertMaterial({ color: colors.house });
+  let chimney = new THREE.Mesh(boxGeo, chimneyMat);
+  chimney.position.set(-1, 1.6, 0.6);
+  chimney.scale.set(0.2, 0.3, 0.2);
+  chimney.receiveShadow = true;
+  houseGroup.add(chimney);
+  // door
+  let doorMat = new THREE.MeshLambertMaterial({ color: colors.purple });
+  let door = new THREE.Mesh(boxGeo, doorMat);
+  door.scale.set(0.2, 0.5, 0.35);
+  door.position.set(-0.49, 0.545, 1);
+  houseGroup.add(door);
+  // doorknob
+  let knobG = new THREE.SphereBufferGeometry(0.025, 8, 8);
+  let knobMat = new THREE.MeshLambertMaterial({ color: colors.gold });
+  let knob = new THREE.Mesh(knobG, knobMat);
+  houseGroup.add(knob);
+  knob.position.set(-0.39, 0.5, 1.14);
+  // doorstep 
+  createBoxShape(0.05, 0.05, 0.35, -0.38, 0.27, 1, colors.grey, false, false, houseGroup);
+  createBoxShape(0.05, 0.05, 0.35, -0.34, 0.25, 1, colors.grey, false, false, houseGroup);
+  // windows 
+  createRoofWindow(-0.65, 1.6, 1, colors.blue, 0.1, 0.1, 0.2, 12);
+  createRoofWindow(-0.67, 1.60, 1, colors.red, 0.12, 0.12, 0.22, 12);
+  // roof window bars
+  createBoxShape(0.02, 0.24, 0.025, -0.55, 1.6, 1, colors.red, false, false, houseGroup);
+  createBoxShape(0.02, 0.02, 0.2, -0.55, 1.62, 1, colors.red, false, false, houseGroup);
+  // left window
+  createBoxShape(0.05, 0.3, 0.3, -0.41, 0.65, 1.45, colors.blue, false, false, houseGroup);
+  // vertical bars
+  createBoxShape(0.05, 0.3, 0.025, -0.40, 0.65, 1.45, colors.brown2, false, false, houseGroup);
+  createBoxShape(0.05, 0.3, 0.025, -0.40, 0.65, 1.60, colors.brown2, false, false, houseGroup);
+  createBoxShape(0.05, 0.3, 0.025, -0.40, 0.65, 1.30, colors.brown2, false, false, houseGroup);
+  // horizontal bars
+  createBoxShape(0.05, 0.025, 0.325, -0.40, 0.8, 1.45, colors.brown2, false, false, houseGroup);
+  createBoxShape(0.05, 0.025, 0.325, -0.40, 0.65, 1.45, colors.brown2, false, false, houseGroup);
+  createBoxShape(0.05, 0.025, 0.325, -0.40, 0.5, 1.45, colors.brown2, false, false, houseGroup);
+  // right window
+  createBoxShape(0.05, 0.3, 0.3, -0.41, 0.65, 0.55, colors.blue, false, false, houseGroup);
+  // vertical bars
+  createBoxShape(0.05, 0.3, 0.025, -0.40, 0.65, 0.55, colors.brown2, false, false, houseGroup);
+  createBoxShape(0.05, 0.3, 0.025, -0.40, 0.65, 0.70, colors.brown2, false, false, houseGroup);
+  createBoxShape(0.05, 0.3, 0.025, -0.40, 0.65, 0.40, colors.brown2, false, false, houseGroup);
+  // horizontal bars
+  createBoxShape(0.05, 0.025, 0.325, -0.40, 0.8, 0.55, colors.brown2, false, false, houseGroup);
+  createBoxShape(0.05, 0.025, 0.325, -0.40, 0.65, 0.55, colors.brown2, false, false, houseGroup);
+  createBoxShape(0.05, 0.025, 0.325, -0.40, 0.5, 0.55, colors.brown2, false, false, houseGroup);
+  mainGroup.add(houseGroup);
+};
+
+// chimney smoke
+const puffCount = 2;
+let puffs = [];
+let puff;
+const createPuffs = () => {
+  for (let i = 0; i < puffCount; i++) {
+    const geo = new THREE.SphereBufferGeometry(0.1, 6, 6);
+    const mat = new THREE.MeshLambertMaterial({ color: 0xffffff, transparent: true });
+    puff = new THREE.Mesh(geo, mat);
+    puffs.push(puff);
+    houseGroup.add(puff);
+    puff.position.set(-1, 1.74, 0.6);
+    puff.scale.set(0, 0, 0);
+  }
+};
+
+// mailbox
+let mailBoxGroup = new THREE.Group();
+
+const createMailBoxRoof = () => {
+  let mailRoofG = new THREE.ConeBufferGeometry(0.16, 0.1, 4);
+  let mailRoofMat = new THREE.MeshLambertMaterial({ color: colors.brown2 });
+  let mailRoofMesh = new THREE.Mesh(mailRoofG, mailRoofMat);
+  mailRoofMesh.position.set(0, 0.34, 0);
+  mailRoofMesh.rotation.y = THREE.Math.degToRad(45);
+  mailRoofMesh.receiveShadow = true;
+  mailRoofMesh.castShadow = true;
+  mailBoxGroup.add(mailRoofMesh);
+};
+
+const createMailbox = () => {
+  createMailBoxRoof();
+  // pole
+  createBoxShape(0.05, 0.3, 0.05, 0, 0, 0, colors.brown2, true, true, mailBoxGroup);
+  // box
+  createBoxShape(0.2, 0.2, 0.2, 0, 0.2, 0, colors.brown2, true, true, mailBoxGroup);
+  // hole
+  createBoxShape(0.05, 0.05, 0.16, 0.085, 0.22, 0, 0x634326, false, false, mailBoxGroup);
+  mainGroup.add(mailBoxGroup);
+  mailBoxGroup.position.set(1.5, 0.4, 1.5);
+};
+
+// Bunny
+let pivot1 = new THREE.Group();
+let pivot2 = new THREE.Group();
+let pivot3 = new THREE.Group();
+let bunnyGroup1 = new THREE.Group();
+let bunnyGroup2 = new THREE.Group();
+let bunnyGroup3 = new THREE.Group();
+const createBunnyShape = (group, x, y, z, color, xPos, yPos, zPos) => {
+  let geo = new THREE.BoxBufferGeometry(x, y, z);
+  let mat = new THREE.MeshLambertMaterial({ color: color, transparent: true });
+  let mesh = new THREE.Mesh(geo, mat);
+  mesh.position.set(xPos, yPos, zPos);
+  mesh.receiveShadow = true;
+  mesh.castShadow = true;
+  group.add(mesh);
+};
+
+const bunnyColors = [0xFFFFFF, 0xEAEAEA, 0xCFAF8E];
+const createBunny = (group, pivotPositionX, pivotPositionY, pivotPositionZ, pivot) => {
+  bunnyColor = bunnyColors[Math.round(Math.random() * 2)];
+  // head
+  createBunnyShape(group, 0.1, 0.1, 0.1, bunnyColor, 0, 0, 0.2);
+  // ears
+  createBunnyShape(group, 0.025, 0.14, 0.025, bunnyColor, 0.025, 0.05, 0.23);
+  createBunnyShape(group, 0.025, 0.14, 0.025, bunnyColor, -0.025, 0.05, 0.23);
+  // eyes
+  createBunnyShape(group, 0.02, 0.02, 0.02, "black", 0.025, 0.02, 0.25);
+  createBunnyShape(group, 0.02, 0.02, 0.02, "black", -0.025, 0.02, 0.25);
+  mainGroup.add(group);
+  // https://stackoverflow.com/questions/28848863/threejs-how-to-rotate-around-objects-own-center-instead-of-world-center
+  let box = new THREE.Box3().setFromObject(group);
+  box.getCenter(group.position); // this re-sets the mesh position
+  group.position.multiplyScalar(-1);
+  pivot.add(group);
+  pivot.position.set(pivotPositionX, pivotPositionY, pivotPositionZ);
+  mainGroup.add(pivot);
+
+};
+
+// GSAP ANIMATIONS 
+// make island floaty
+const animateIsland = () => {
+  gsap.to(mainGroup.position, { y: '+=0.065', repeat: -1, yoyo: true, ease: "sine.in", duration: 2, yoyoEase: "sine.inOut" });
+};
+// animate single waterfall particle
+const animateDrop = drop => {
+  const tl = gsap.timeline({
+    onStart: () => {
+      gsap.set(drop.position, { y: gsap.utils.random(-0.17, 0, 0.01) });
+      gsap.set(drop.scale, { x: 0.1, y: 0.1, z: 0.1 });
+    },
+    onComplete: animateDrop,
+    onCompleteParams: [drop] });
+
+
+  tl.to(drop.position, {
+    y: "-=1",
+    ease: "linear",
+    delay: gsap.utils.random(0, 2, 0.2),
+    duration: 1,
+    onStart: () => {
+      gsap.to(drop.scale, { x: 0, y: 0, z: 0, delay: 0.14, duration: 0.86 });
+    } });
+
+  return tl;
+};
+// animate single water detail
+animateDet = det => {
+  const tl = gsap.timeline(
+  { defaults: { duration: 1, ease: "sine.in" },
+    onStart: () => {
+      gsap.set(det.position, { x: gsap.utils.random(0.60, 0.92), z: gsap.utils.random(-1.8, 1.8) });
+      gsap.set(det.rotation, { y: 0, z: 0 });
+      gsap.set(det.material, { opacity: 0 });
+    },
+    onComplete: animateDet,
+    onCompleteParams: [det] });
+
+  tl.to(det.material, { keyframes: [{ opacity: 0.7 }, { opacity: 0 }] }, 'in').
+  to(det.position, { keyframes: [{ z: "+=0.025" }, { z: "-=0.025" }] }, 'in').
+  to(det.rotation, { keyframes: [{ y: "-=0.2" }, { z: "+=0.2" }] }, 'in');
+
+  return tl;
+};
+
+animateDet2 = det => {
+  const tl = gsap.timeline(
+  { defaults: { duration: 1, ease: "sine.in" },
+    onStart: () => {
+      gsap.set(det.position, { x: gsap.utils.random(0.60, 0.92), y: gsap.utils.random(-0.18, 0.20) });
+      gsap.set(det.rotation, { y: 0, z: 0 });
+      gsap.set(det.material, { opacity: 0 });
+    },
+    onComplete: animateDet2,
+    onCompleteParams: [det] });
+
+  tl.to(det.material, { keyframes: [{ opacity: 0.7 }, { opacity: 0 }] }, 'in').
+  to(det.position, { keyframes: [{ y: "-=0.025" }, { y: "+=0.025" }] }, 'in').
+  to(det.rotation, { keyframes: [{ y: "-=0.2" }, { z: "+=0.2" }] }, 'in');
+
+  return tl;
+};
+
+
+// animate single puff
+const animatePuff = puff => {
+  const tl = gsap.timeline({ onComplete: animatePuff, onCompleteParams: [puff], onStart: () => {
+      gsap.set(puff.material, { opacity: 1 });
+      gsap.set(puff.scale, { x: 0, y: 0, z: 0 });
+      gsap.set(puff.position, { y: 1.74 });
+    } });
+  tl.to(puff.position, { y: '+=0.6', duration: 2, delay: 0.6, ease: "sine.inOut", onStart: () => {
+      gsap.to(puff.scale, { keyframes: [{ x: 1, y: 1.4, z: 1 }, { z: 1.4, duration: 0.24 }, { y: 0.8, delay: -0.44, duration: 0.24 }, { x: 1, y: 1 }] });
+      gsap.to(puff.material, { opacity: 0, duration: 1.32, delay: 0.68 });
+    } });
+};
+// function to loop over particles
+const animateParticles = (fn, array) => {
+  for (let i = 0; i < array.length; i++) {
+    fn(array[i]);
+  }
+};
+
+// animate the bunny
+// eye blink
+const animateBunnyEyes = (group, delay) => {
+  const tl = gsap.timeline({ repeat: -1, repeatDelay: 1, defaults: { duration: 0.2 }, delay: delay });
+  const eyes = [group.children[3].material, group.children[4].material];
+  tl.to(eyes, { keyframes: [{ opacity: 0 }, { opacity: 1 }] }, 'blink');
+  return tl;
+};
+
+// hop and move
+const animateBunny = (pivot, delay) => {
+  const tl = gsap.timeline({ repeat: -1, defaults: { duration: 0.32 }, delay: delay });
+  tl.to(pivot.position, { keyframes: [{ y: '+=0.1', z: '+=0.1' }, { y: '-=0.1' }, { y: '+=0.1', z: '+=0.1' }, { y: '-=0.1' }] }).
+  to(pivot.rotation, { y: 3, duration: 0.6, delay: 0.16 }).
+  to(pivot.position, { keyframes: [{ y: '+=0.1', z: '-=0.1' }, { y: '-=0.1' }, { y: '+=0.1', z: '-=0.1' }, { y: '-=0.1' }] }).
+  to(pivot.rotation, { y: 0, duration: 0.6, delay: 0.16 });
+  return tl;
+};
+
+// render
+render = () => {
+
+  controls.update();
+  requestAnimationFrame(render);
+  renderer.render(scene, camera);
+};
+
+// resize
+const resizeHandler = () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+};
+
+window.addEventListener("resize", () => {
+  resizeHandler();
+});
+
+window.addEventListener('load', () => {
+  setup();
+  createIsland();
+  animateIsland();
+  // waterfall particles creation
+  createParticles(
+  colors.blue,
+  dropCount,
+  drops,
+  0.1, 0.1, 0.1,
+  0.56, 0.95, 0, -0.19, 1.95, 1.95,
+  1,
+  0, 0, 0);
+
+  // animate waterfall particles 
+  animateParticles(animateDrop, drops);
+  // water details creation
+  createParticles(
+  "white",
+  detailCount,
+  dets,
+  0.025, 0.025, 0.025,
+  0.60, 0.92, 0.25, 0.26, 1.8, -1.8,
+  0,
+  0, 0, 0);
+
+  createParticles(
+  "white",
+  detailCount2,
+  dets2,
+  0.025, 0.025, 0.025,
+  0.60, 0.92, -0.2, 0.23, 2, 2,
+  0,
+  0, 0, 0);
+
+  // animate water details
+  animateParticles(animateDet, dets);
+  animateParticles(animateDet2, dets2);
+  // trees
+  // trees next to house
+  createTree(0, 0.75, -0.1, 0, 1.2, -0.1);
+  createTree(-1.50, 0.75, -0.1, -1.50, 1.2, -0.1);
+  createTree(-0.75, 0.75, -0.5, -0.75, 1.2, -0.5);
+  createTree(0, 0.75, -1, 0, 1.2, -1);
+  createTree(-1.50, 0.75, -1, -1.50, 1.2, -1);
+  createTree(-0.75, 0.75, -1.5, -0.75, 1.2, -1.5);
+  // other trees
+  createTree(1.5, 0.75, -1.5, 1.5, 1.2, -1.5);
+  createTree(1.5, 0.75, -0.5, 1.5, 1.2, -0.5);
+  createTree(1.5, 0.75, 0.5, 1.5, 1.2, 0.5);
+  // bushes next to house
+  createBush(-0.7, 0.28, -0.1);
+  createBush(-0.7, 0.28, -1);
+  createBush(-1.55, 0.28, -0.6);
+  createBush(-1.35, 0.28, -1.5);
+  //
+  createBush(1.5, 0.28, 1);
+  createBush(1.5, 0.28, 0);
+  createBush(1.5, 0.28, -1);
+  // house
+  createHouse();
+  // chimney smoke
+  createPuffs();
+  // animate the smoke
+  animateParticles(animatePuff, puffs);
+  // mailbox
+  createMailbox();
+  // bunnies 
+  createBunny(bunnyGroup1, 0, 0.33, 0.2, pivot1);
+  createBunny(bunnyGroup2, -1, 0.33, -1, pivot2);
+  createBunny(bunnyGroup3, -0.2, 0.33, -1.4, pivot3);
+  animateBunny(pivot1, 0);
+  animateBunny(pivot2, gsap.utils.random(0, 3, 0.4));
+  animateBunny(pivot3, gsap.utils.random(0, 3, 0.4));
+  animateBunnyEyes(bunnyGroup1, 0);
+  animateBunnyEyes(bunnyGroup2, gsap.utils.random(0, 3, 0.4));
+  animateBunnyEyes(bunnyGroup3, gsap.utils.random(0, 3, 0.4));
+  render();
+});
\ No newline at end of file
diff --git a/floating-island-w-threejs-gsap/dist/style.css b/floating-island-w-threejs-gsap/dist/style.css
new file mode 100644
index 0000000..3cbca40
--- /dev/null
+++ b/floating-island-w-threejs-gsap/dist/style.css
@@ -0,0 +1,26 @@
+html, body {
+  height: 100%;
+}
+
+body {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+}
+
+svg {
+  width: 100%;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+.container canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/floating-island-w-threejs-gsap/license.txt b/floating-island-w-threejs-gsap/license.txt
new file mode 100644
index 0000000..5ef9ea8
--- /dev/null
+++ b/floating-island-w-threejs-gsap/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Kasper De Bruyne (https://codepen.io/kdbkapsere/pen/PoZVMjj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/floating-island-w-threejs-gsap/src/index.html b/floating-island-w-threejs-gsap/src/index.html
new file mode 100644
index 0000000..f584ba1
--- /dev/null
+++ b/floating-island-w-threejs-gsap/src/index.html
@@ -0,0 +1,3 @@
+<div class="container">
+  <canvas></canvas>
+</div>
\ No newline at end of file
diff --git a/floating-island-w-threejs-gsap/src/script.babel b/floating-island-w-threejs-gsap/src/script.babel
new file mode 100644
index 0000000..82c11e1
--- /dev/null
+++ b/floating-island-w-threejs-gsap/src/script.babel
@@ -0,0 +1,542 @@
+console.clear();
+let scene,camera,renderer,controls;
+let canvas = document.querySelector("canvas");
+let width = window.innerWidth;
+let height = window.innerHeight;
+let fov = 75; 
+let aspectRatio = width / height; 
+let near = 0.001;
+let far = 100;
+let mainGroup = new THREE.Group();
+let colors = {
+  blue: 0x71b6f7,
+  brown: 0x744436,
+  brown2:0xC88247,
+  red : 0xfd4d50,
+  green: 0xa4d740,
+  green2: 0x66b888,
+  green3 : 0x2C9D3E,
+  house : 0xfce3ad,
+  purple : 0x6e5370,
+  gold:0xFFF09C,
+  grey:0xB7B398,
+  greyBrown : 0xB7B398
+};
+
+const setup = () => {
+  // scene
+  scene = new THREE.Scene();
+  scene.fog = new THREE.FogExp2(0x9ac2fe, 0.14);
+  // camera
+  camera = new THREE.PerspectiveCamera(fov, aspectRatio, near, far);
+  scene.add( camera );  
+  // renderer
+  renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    canvas: canvas
+  });
+  renderer.setSize(width, height);
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setClearColor(0x9ac2fe);
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap
+  renderer.shadowMapSoft = true;
+  // controls
+  controls = new THREE.OrbitControls(camera, renderer.domElement);
+  controls.autoRotate = true;
+controls.autoRotateSpeed = 1.6;
+  camera.position.set(3.56, 2, 3.4);
+  // lights 
+  let light = new THREE.HemisphereLight(0xffffff, 0x5c9cfe, 1.1);
+  scene.add(light);
+  //
+  let spot = new THREE.SpotLight(0xF6FAFD,0.06)
+  spot.castShadow = true;
+  spot.shadow.camera.left = -1;
+  spot.shadow.camera.right = -1;
+  spot.shadow.camera.top = -1;
+  spot.shadow.camera.bottom = -1;
+  spot.shadow.camera.near = 1;
+  spot.shadow.camera.far = 100;
+  spot.shadow.mapSize.width = 2048;
+  spot.shadow.mapSize.height = 2048;
+  spot.shadow.camera.fov = 100;
+  spot.position.set(-3,3,0);
+  camera.add(spot);
+  // group for all other groups
+  mainGroup = new THREE.Group();
+  scene.add(mainGroup)
+  camera.lookAt(0,0,0)
+}
+
+// objects
+let islandGroup = new THREE.Group();
+const createIsland = () => {
+  // earth
+  let coneGeo = new THREE.ConeBufferGeometry(2, 3, 8);
+  let mat = new THREE.MeshLambertMaterial({
+    color: colors.brown
+  });
+  let cone = new THREE.Mesh(coneGeo, mat);
+  cone.rotation.x = THREE.Math.degToRad(180)
+  cone.position.set(0, -1.75, 0);
+  islandGroup.add(cone);
+  // grass
+  let boxGeo = new THREE.BoxBufferGeometry();
+  let mat2 = new THREE.MeshLambertMaterial({
+    color: colors.green
+  });
+  let grass = new THREE.Mesh(boxGeo, mat2);
+  grass.scale.set(4, 0.5, 4);
+  grass.receiveShadow = true;
+  islandGroup.add(grass);
+  // water
+  let mat3 = new THREE.MeshLambertMaterial({
+    color: colors.blue
+  });
+  let water = new THREE.Mesh(boxGeo, mat3);
+  water.receiveShadow = true;
+  islandGroup.add(water);
+  water.scale.set(0.5, 0.5, 4);
+  water.position.set(0.75, 0.005, 0.005);
+  mainGroup.add(islandGroup);
+}
+
+// waterfall particles
+let dropCount = 100;
+let drops = [];
+// water details
+let detailCount = 24;
+let dets = [];
+let detailCount2 = 8;
+let dets2 = [];
+
+// creating particles function
+let particleGeo,particleMat,particle;
+const createParticles = (color,particleAmount,particleArray,scaleX,scaleY,scaleZ,posX,posX2,posY,posY2,posZ,posZ2,opacity,rotX,rotY,rotZ) => {
+    particleGeo = new THREE.BoxBufferGeometry();
+    particleMat = new THREE.MeshLambertMaterial({
+        color:color,
+        transparent:true
+    });
+    for (let i = 0; i< particleAmount;i++) {
+        particle = new THREE.Mesh(particleGeo,particleMat);
+        islandGroup.add(particle);
+        particleArray.push(particle);
+        particle.scale.set(scaleX,scaleY,scaleZ);
+        particle.position.set(THREE.Math.randFloat(posX,posX2), THREE.Math.randFloat(posY,posY2),THREE.Math.randFloat(posZ,posZ2))
+        particle.material.opacity = opacity;
+        particle.rotation.set(rotX,THREE.Math.degToRad(rotY),rotZ);
+    }
+}
+
+// function to create various box like shapes of the house and the mailbox
+const createBoxShape =  (x,y,z,xPos,yPos,zPos,color,rShadow,cShadow,group) => {
+  let geo = new THREE.BoxBufferGeometry(x,y,z);
+  let mat = new THREE.MeshLambertMaterial({color:color});
+  let mesh = new THREE.Mesh(geo,mat);
+  mesh.position.set(xPos,yPos,zPos);
+  mesh.receiveShadow = rShadow
+  mesh.castShadow = cShadow
+  group.add(mesh);  
+}
+
+let treeGroup = new THREE.Group();
+const createTree = (trunkX, trunkY, trunkZ, leavesX, leavesY, leavesZ) => {
+  // trunk
+  let geo = new THREE.CylinderBufferGeometry(0.1, 0.1, 1, 10);
+  let mat = new THREE.MeshLambertMaterial({
+    color: colors.brown
+  });
+  let trunk = new THREE.Mesh(geo, mat);
+  treeGroup.add(trunk);
+  trunk.position.set(trunkX, trunkY, trunkZ);
+  trunk.castShadow = true;
+  trunk.receiveShadow = true;
+  // leaves
+  let geo2 = new THREE.SphereBufferGeometry(0.25, 12, 12);
+  let mat2 = new THREE.MeshLambertMaterial({
+    color: colors.green2
+  });
+  let treeLeaves = new THREE.Mesh(geo2, mat2);
+  treeLeaves.position.set(leavesX, leavesY, leavesZ);
+  treeLeaves.castShadow = true;
+  treeLeaves.receiveShadow = true;
+  treeGroup.add(treeLeaves);
+  mainGroup.add(treeGroup);
+};
+
+const createBush = (x,y,z) => {
+  let geo = new THREE.SphereBufferGeometry(0.15,8,8);
+  let mat = new THREE.MeshLambertMaterial({color:colors.green3});
+  let bush = new THREE.Mesh(geo,mat);
+  bush.position.set(x,y,z);
+  bush.receiveShadow = true;
+  treeGroup.add(bush)
+}
+
+// house
+let houseGroup = new THREE.Group();
+
+// roof window function
+const createRoofWindow = (x,y,z,color,radB,radT,height,segments) => {
+  let geo = new THREE.CylinderBufferGeometry(radB,radT,height,segments);
+  let mat = new THREE.MeshLambertMaterial({ color: color });
+  let window = new THREE.Mesh(geo, mat);
+  window.rotation.z = THREE.Math.degToRad(90);
+  window.position.set(x,y,z);
+  houseGroup.add(window);
+}
+
+const createHouse = () => {
+  let boxGeo = new THREE.BoxBufferGeometry();
+  // house
+  let houseMat = new THREE.MeshLambertMaterial({ color: colors.house });
+  let house = new THREE.Mesh(boxGeo, houseMat);
+  house.position.set(-1, 0.75, 1);
+  house.scale.set(1.2,1,1.5);
+  house.receiveShadow = true;
+  house.castShadow = true;
+  houseGroup.add(house);
+  // roof
+  let roofGeo = new THREE.ConeBufferGeometry(1.1, 0.7, 4);
+  let roofMat = new THREE.MeshLambertMaterial({ color: colors.red });
+  let roof = new THREE.Mesh(roofGeo, roofMat);
+  roof.position.set(-1, 1.6, 1);
+  roof.rotation.y = THREE.Math.degToRad(45);
+  roof.castShadow = true;
+  roof.receiveShadow = true
+  houseGroup.add(roof);
+  // roof chimney
+  let chimneyMat = new THREE.MeshLambertMaterial({ color:colors.house });
+  let chimney = new THREE.Mesh(boxGeo,chimneyMat);
+  chimney.position.set(-1,1.6,0.6);
+  chimney.scale.set(0.2,0.3,0.2)
+  chimney.receiveShadow = true;
+  houseGroup.add(chimney);
+  // door
+  let doorMat = new THREE.MeshLambertMaterial({ color: colors.purple });
+  let door = new THREE.Mesh(boxGeo, doorMat);
+  door.scale.set(0.2,0.5,0.35);
+  door.position.set(-0.49, 0.545, 1);
+  houseGroup.add(door);
+  // doorknob
+  let knobG = new THREE.SphereBufferGeometry(0.025,8,8)
+  let knobMat = new THREE.MeshLambertMaterial({color:colors.gold})
+  let knob = new THREE.Mesh(knobG,knobMat);
+  houseGroup.add(knob)
+  knob.position.set(-0.39,0.5,1.14)
+  // doorstep 
+  createBoxShape(0.05,0.05,0.35,-0.38,0.27,1,colors.grey,false,false,houseGroup);
+  createBoxShape(0.05,0.05,0.35,-0.34,0.25,1,colors.grey,false,false,houseGroup);  
+  // windows 
+  createRoofWindow(-0.65,1.6,1,colors.blue,0.1,0.1,0.2,12);
+  createRoofWindow(-0.67,1.60,1,colors.red,0.12,0.12,0.22,12);
+  // roof window bars
+  createBoxShape(0.02,0.24,0.025,-0.55,1.6,1,colors.red,false,false,houseGroup);
+  createBoxShape(0.02,0.02,0.2,-0.55,1.62,1,colors.red,false,false,houseGroup);
+  // left window
+  createBoxShape(0.05,0.3,0.3,-0.41,0.65,1.45,colors.blue,false,false,houseGroup);
+  // vertical bars
+  createBoxShape(0.05,0.3,0.025,-0.40,0.65,1.45,colors.brown2,false,false,houseGroup);
+  createBoxShape(0.05,0.3,0.025,-0.40,0.65,1.60,colors.brown2,false,false,houseGroup);
+  createBoxShape(0.05,0.3,0.025,-0.40,0.65,1.30,colors.brown2,false,false,houseGroup);
+  // horizontal bars
+  createBoxShape(0.05,0.025,0.325,-0.40,0.8,1.45,colors.brown2,false,false,houseGroup);
+  createBoxShape(0.05,0.025,0.325,-0.40,0.65,1.45,colors.brown2,false,false,houseGroup);
+  createBoxShape(0.05,0.025,0.325,-0.40,0.5,1.45,colors.brown2,false,false,houseGroup);
+  // right window
+  createBoxShape(0.05,0.3,0.3,-0.41,0.65,0.55,colors.blue,false,false,houseGroup);  
+  // vertical bars
+  createBoxShape(0.05,0.3,0.025,-0.40,0.65,0.55,colors.brown2,false,false,houseGroup);
+  createBoxShape(0.05,0.3,0.025,-0.40,0.65,0.70,colors.brown2,false,false,houseGroup);
+  createBoxShape(0.05,0.3,0.025,-0.40,0.65,0.40,colors.brown2,false,false,houseGroup);
+  // horizontal bars
+  createBoxShape(0.05,0.025,0.325,-0.40,0.8,0.55,colors.brown2,false,false,houseGroup);
+  createBoxShape(0.05,0.025,0.325,-0.40,0.65,0.55,colors.brown2,false,false,houseGroup);
+  createBoxShape(0.05,0.025,0.325,-0.40,0.5,0.55,colors.brown2,false,false,houseGroup);
+  mainGroup.add(houseGroup);
+}
+
+// chimney smoke
+const puffCount = 2;
+let puffs = [];
+let puff;
+const createPuffs = () => {
+  for (let i = 0; i < puffCount; i++) {
+    const geo = new THREE.SphereBufferGeometry(0.1,6, 6);
+    const mat = new THREE.MeshLambertMaterial({color:0xffffff,transparent:true});
+    puff = new THREE.Mesh(geo,mat);
+    puffs.push(puff);
+    houseGroup.add(puff); 
+    puff.position.set(-1,1.74,0.6);
+    puff.scale.set(0,0,0);
+  }
+}
+
+// mailbox
+let mailBoxGroup = new THREE.Group();
+
+const createMailBoxRoof = () => {
+  let mailRoofG = new THREE.ConeBufferGeometry(0.16, 0.1, 4);
+  let mailRoofMat = new THREE.MeshLambertMaterial({color:colors.brown2});
+  let mailRoofMesh = new THREE.Mesh(mailRoofG,mailRoofMat);
+  mailRoofMesh.position.set(0,0.34,0)
+  mailRoofMesh.rotation.y = THREE.Math.degToRad(45);
+  mailRoofMesh.receiveShadow = true;
+  mailRoofMesh.castShadow = true;
+  mailBoxGroup.add(mailRoofMesh);
+}
+
+const createMailbox = () => {
+  createMailBoxRoof();
+  // pole
+  createBoxShape(0.05,0.3,0.05,0,0,0,colors.brown2,true,true,mailBoxGroup);
+  // box
+  createBoxShape(0.2,0.2,0.2,0,0.2,0,colors.brown2,true,true,mailBoxGroup);
+  // hole
+  createBoxShape(0.05,0.05,0.16,0.085,0.22,0,0x634326,false,false,mailBoxGroup);
+  mainGroup.add(mailBoxGroup);
+  mailBoxGroup.position.set(1.5,0.4,1.5);
+}
+
+// Bunny
+let pivot1 = new THREE.Group();
+let pivot2 = new THREE.Group();
+let pivot3 = new THREE.Group();
+let bunnyGroup1 = new THREE.Group();
+let bunnyGroup2 = new THREE.Group();
+let bunnyGroup3 = new THREE.Group();
+const createBunnyShape = (group,x,y,z,color,xPos,yPos,zPos) => {
+  let geo = new THREE.BoxBufferGeometry(x,y,z);
+  let mat = new THREE.MeshLambertMaterial({color:color,transparent:true});
+  let mesh = new THREE.Mesh(geo,mat);
+  mesh.position.set(xPos,yPos,zPos);
+  mesh.receiveShadow = true;
+  mesh.castShadow = true;
+  group.add(mesh);
+}
+
+const bunnyColors = [0xFFFFFF,0xEAEAEA,0xCFAF8E];
+const createBunny = (group,pivotPositionX,pivotPositionY,pivotPositionZ,pivot) => {
+  bunnyColor = bunnyColors[Math.round(Math.random() * 2)] 
+  // head
+  createBunnyShape(group,0.1,0.1,0.1,bunnyColor,0,0,0.2);
+  // ears
+  createBunnyShape(group,0.025,0.14,0.025,bunnyColor,0.025,0.05,0.23);
+  createBunnyShape(group,0.025,0.14,0.025,bunnyColor,-0.025,0.05,0.23);
+  // eyes
+  createBunnyShape(group,0.02,0.02,0.02,"black",0.025,0.02,0.25);
+  createBunnyShape(group,0.02,0.02,0.02,"black",-0.025,0.02,0.25);
+  mainGroup.add(group); 
+  // https://stackoverflow.com/questions/28848863/threejs-how-to-rotate-around-objects-own-center-instead-of-world-center
+  let box = new THREE.Box3().setFromObject( group );
+  box.getCenter( group.position ); // this re-sets the mesh position
+  group.position.multiplyScalar( - 1 );
+  pivot.add( group );
+  pivot.position.set(pivotPositionX,pivotPositionY,pivotPositionZ);
+  mainGroup.add( pivot );
+  
+}
+
+// GSAP ANIMATIONS 
+// make island floaty
+const animateIsland = () => {
+  gsap.to(mainGroup.position,{y:'+=0.065',repeat:-1,yoyo:true,ease:"sine.in",duration:2,yoyoEase:"sine.inOut"})
+}
+// animate single waterfall particle
+const animateDrop = (drop) => {
+  const tl = gsap.timeline({
+    onStart: () => {
+      gsap.set(drop.position,{ y: gsap.utils.random(-0.17,0,0.01) })
+      gsap.set(drop.scale,{x:0.1,y:0.1,z:0.1})
+    },
+    onComplete: animateDrop,
+    onCompleteParams: [drop]
+  });
+
+  tl.to(drop.position, {
+    y: "-=1",
+    ease: "linear",
+    delay: gsap.utils.random(0, 2, 0.2),
+    duration:1,
+    onStart:() => {
+      gsap.to(drop.scale,{x:0,y:0,z:0,delay:0.14,duration:0.86})
+    }
+  });
+  return tl;
+};
+// animate single water detail
+animateDet = (det) => {
+  const tl = gsap.timeline(
+    {defaults:{duration:1,ease:"sine.in"},
+     onStart:() => {
+       gsap.set(det.position,{x:gsap.utils.random(0.60,0.92),z:gsap.utils.random(-1.8,1.8)});
+       gsap.set(det.rotation,{y:0,z:0});
+       gsap.set(det.material,{opacity:0});
+     },
+     onComplete:animateDet,
+     onCompleteParams:[det]}
+  )
+  tl.to(det.material,{keyframes:[{opacity:0.7},{opacity:0}]},'in')
+  .to(det.position,{keyframes:[{z:"+=0.025"},{z:"-=0.025"}]},'in')
+  .to(det.rotation,{keyframes:[{y:"-=0.2"},{z:"+=0.2"}]},'in')
+
+  return tl;
+}
+
+animateDet2 = (det) => {
+  const tl = gsap.timeline(
+    {defaults:{duration:1,ease:"sine.in"},
+     onStart:() => {
+       gsap.set(det.position,{x:gsap.utils.random(0.60,0.92),y:gsap.utils.random(-0.18,0.20)});
+       gsap.set(det.rotation,{y:0,z:0});
+       gsap.set(det.material,{opacity:0});
+     },
+     onComplete:animateDet2,
+     onCompleteParams:[det]}
+  )
+  tl.to(det.material,{keyframes:[{opacity:0.7},{opacity:0}]},'in')
+  .to(det.position,{keyframes:[{y:"-=0.025"},{y:"+=0.025"}]},'in')
+  .to(det.rotation,{keyframes:[{y:"-=0.2"},{z:"+=0.2"}]},'in')
+
+  return tl;
+}
+
+
+// animate single puff
+const animatePuff = (puff) => {
+  const tl = gsap.timeline({onComplete:animatePuff,onCompleteParams:[puff],onStart:() => {
+    gsap.set(puff.material,{opacity:1})
+    gsap.set(puff.scale,{x:0,y:0,z:0})
+    gsap.set(puff.position,{y:1.74})
+  }})
+  tl.to(puff.position,{y:'+=0.6',duration:2,delay:0.6,ease:"sine.inOut",onStart:() => {
+    gsap.to(puff.scale,{keyframes:[{x:1,y:1.4,z:1},{z:1.4,duration:0.24},{y:0.8,delay:-0.44,duration:0.24},{x:1,y:1}]})
+    gsap.to(puff.material,{opacity:0,duration:1.32,delay:0.68})
+  }})
+}
+// function to loop over particles
+const animateParticles = (fn,array) => {
+  for (let i =0; i < array.length; i++) {
+    fn(array[i])
+  }
+}
+
+// animate the bunny
+// eye blink
+const animateBunnyEyes = (group,delay) => {
+  const tl = gsap.timeline({repeat:-1,repeatDelay:1,defaults:{duration:0.2},delay:delay})
+  const eyes = [group.children[3].material,group.children[4].material]
+  tl.to(eyes,{keyframes:[{opacity:0},{opacity:1}]},'blink')
+  return tl;
+}
+
+// hop and move
+const animateBunny = (pivot,delay) => {
+    const tl = gsap.timeline({repeat:-1,defaults:{duration:0.32},delay:delay})
+  tl.to(pivot.position,{keyframes:[{y:'+=0.1',z:'+=0.1'},{y:'-=0.1'},{y:'+=0.1',z:'+=0.1'},{y:'-=0.1'}]})
+    .to(pivot.rotation,{y:3,duration:0.6,delay:0.16})
+    .to(pivot.position,{keyframes:[{y:'+=0.1',z:'-=0.1'},{y:'-=0.1'},{y:'+=0.1',z:'-=0.1'},{y:'-=0.1'}]})
+    .to(pivot.rotation,{y:0,duration:0.6,delay:0.16})
+  return tl;
+}
+
+// render
+render = () => {
+  
+  controls.update()
+  requestAnimationFrame(render);
+  renderer.render(scene, camera);
+};
+
+// resize
+const resizeHandler = () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+};
+
+window.addEventListener("resize", () => {
+  resizeHandler();
+});
+
+window.addEventListener('load',() => {
+  setup();
+  createIsland();
+  animateIsland();
+  // waterfall particles creation
+  createParticles(
+    colors.blue,
+    dropCount,
+    drops,
+    0.1,0.1,0.1,
+    0.56,0.95,0,-0.19,1.95,1.95,
+    1,
+    0,0,0
+  );
+  // animate waterfall particles 
+  animateParticles(animateDrop,drops);
+  // water details creation
+  createParticles(
+    "white",
+    detailCount,
+    dets,
+    0.025,0.025,0.025,
+    0.60,0.92,0.25,0.26,1.8,-1.8,
+    0,
+    0,0,0
+  );
+  createParticles(
+    "white",
+    detailCount2,
+    dets2,
+    0.025,0.025,0.025,
+    0.60,0.92,-0.2,0.23,2,2,
+    0,
+    0,0,0
+  );
+  // animate water details
+  animateParticles(animateDet,dets);
+  animateParticles(animateDet2,dets2);
+  // trees
+  // trees next to house
+  createTree(0, 0.75, -0.1, 0, 1.2, -0.1);
+  createTree(-1.50, 0.75, -0.1, -1.50, 1.2, -0.1);
+  createTree(-0.75, 0.75, -0.5, -0.75, 1.2, -0.5);
+  createTree(0, 0.75, -1, 0, 1.2, -1);
+  createTree(-1.50, 0.75, -1, -1.50, 1.2, -1);
+  createTree(-0.75, 0.75, -1.5, -0.75, 1.2, -1.5);
+  // other trees
+  createTree(1.5, 0.75, -1.5, 1.5, 1.2, -1.5);
+  createTree(1.5, 0.75, -0.5, 1.5, 1.2, -0.5);
+  createTree(1.5, 0.75, 0.5, 1.5, 1.2, 0.5);
+  // bushes next to house
+  createBush(-0.7,0.28,-0.1);
+  createBush(-0.7,0.28,-1);
+  createBush(-1.55,0.28,-0.6);
+  createBush(-1.35,0.28,-1.5);
+  //
+  createBush(1.5,0.28,1);
+  createBush(1.5,0.28,0);
+  createBush(1.5,0.28,-1);
+  // house
+  createHouse();
+  // chimney smoke
+  createPuffs();
+  // animate the smoke
+  animateParticles(animatePuff,puffs);
+  // mailbox
+  createMailbox();
+  // bunnies 
+  createBunny(bunnyGroup1,0,0.33,0.2,pivot1);
+  createBunny(bunnyGroup2,-1,0.33,-1,pivot2);
+  createBunny(bunnyGroup3,-0.2,0.33,-1.4,pivot3);
+  animateBunny(pivot1,0);
+  animateBunny(pivot2,gsap.utils.random(0,3,0.4));
+  animateBunny(pivot3,gsap.utils.random(0,3,0.4));
+  animateBunnyEyes(bunnyGroup1,0);
+  animateBunnyEyes(bunnyGroup2,gsap.utils.random(0,3,0.4));
+  animateBunnyEyes(bunnyGroup3,gsap.utils.random(0,3,0.4));  
+  render();
+})
\ No newline at end of file
diff --git a/floating-island-w-threejs-gsap/src/style.scss b/floating-island-w-threejs-gsap/src/style.scss
new file mode 100644
index 0000000..07aadc0
--- /dev/null
+++ b/floating-island-w-threejs-gsap/src/style.scss
@@ -0,0 +1,20 @@
+html,body {
+  height:100%;
+}
+body {
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+svg {
+  width:100%;
+}
+.container {
+  width:100%;
+  height:100%;
+  & canvas {
+    display:block;
+    width:100%;
+    height:100%;
+  }
+}
diff --git a/flow/README.markdown b/flow/README.markdown
new file mode 100644
index 0000000..752ff40
--- /dev/null
+++ b/flow/README.markdown
@@ -0,0 +1,7 @@
+# Flow
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/brainjam/pen/NWKNoKR](https://codepen.io/brainjam/pen/NWKNoKR).
+
+ Flow visualization.  The gradient being used is the gradient of a certain angle, but the flow lines themselves form coaxial circles. Dragging with the mouse will seed new particles.
+
+Forked from https://www.openprocessing.org/sketch/742403, which in turn was forked from https://www.openprocessing.org/sketch/494102. 
+
diff --git a/flow/dist/index.html b/flow/dist/index.html
new file mode 100644
index 0000000..f4e8b11
--- /dev/null
+++ b/flow/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Flow</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/flow/dist/script.js b/flow/dist/script.js
new file mode 100644
index 0000000..6b78d0a
--- /dev/null
+++ b/flow/dist/script.js
@@ -0,0 +1,102 @@
+"use strict";
+
+let pos, colors;
+const moveSpeed = 0.4;
+const moveScale = 800;
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  background("#162a25");
+  noStroke();
+
+  colors = [
+    color("#77c39c"),
+    color("#2f5e36"),
+    color("#55aba5"),
+    color("#2d7063"),
+    color("#3f6829"),
+    color("#44a872"),
+    color("#215964"),
+    color("#162a25"),
+    color("#162a25"),
+    color("#162a25"),
+    color("#162a25"),
+    color("#000000"),
+    color("#cdedae")
+  ];
+  pos = [];
+  for (let i = 0; i < 500; i++) {
+    pos.push(newParticle(random(width), random(height)));
+  }
+}
+
+function newParticle(x, y) {
+  return {
+    x,
+    y,
+    c: colors[floor(random(colors.length))],
+    r: floor(random(4)),
+    n: 0
+  };
+}
+
+function draw() {
+  for (let i = 0; i < pos.length; i++) {
+    const p = pos[i];
+    let angle = noise(p.x / moveScale, p.y / moveScale) * TWO_PI * moveScale; //I never understood why end by multiplying by moveScale
+    angle = atan2(p.y - height / 2, p.x - width / 2);
+    angle = -getAngleGrad((p.x - width / 2) / 100, -(p.y - height / 2) / 100);
+    angle += p.r * PI / 2;
+    p.x += cos(angle) * moveSpeed;
+    p.y += sin(angle) * moveSpeed;
+    fill(p.c);
+    ellipse(p.x, p.y, 2, 2);
+    if (
+      p.x > width ||
+      p.x < 0 ||
+      p.y > height ||
+      p.y < 0 ||
+      random(1) < 0.001
+    ) {
+      p.x = random(width);
+      p.y = random(height);
+    }
+  }
+}
+
+function getAngleGrad(x, y) {
+  debugger;
+  let grad = { x: 1, y: 0 };
+  const a = { x: -2, y: -1 };
+  const b = { x: 2, y: -1 };
+  const ap = { x: x - a.x, y: y - a.y };
+  const bp = { x: x - b.x, y: y - b.y };
+  const e1sq = ap.x * ap.x + ap.y * ap.y;
+  const e2sq = bp.x * bp.x + bp.y * bp.y;
+  // const e1 = sqrt(e1sq) ;
+  // const e2 = sqrt(e2sq) ;
+  const cot1 = ap.x / ap.y;
+  const cot2 = -bp.x / bp.y;
+  grad = {
+    x: ap.x * cot1 / e1sq + bp.x * cot2 / e2sq,
+    y: ap.y * cot1 / e1sq + bp.y * cot2 / e2sq
+  };
+
+  return Math.atan2(grad.y, grad.x);
+}
+
+function mousePressed() {
+  for (let i = 0; i < 10; i++) {
+    pos.push(newParticle(
+      mouseX + random(-30, 30),
+      mouseY + random(-30, 30)));
+  }
+}
+
+function mouseDragged() {
+  mousePressed();
+}
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
\ No newline at end of file
diff --git a/flow/dist/style.css b/flow/dist/style.css
new file mode 100644
index 0000000..6ab9be0
--- /dev/null
+++ b/flow/dist/style.css
@@ -0,0 +1,5 @@
+body {
+	background-color: #162a25;
+	margin: 0px;
+	overflow: hidden;
+}
\ No newline at end of file
diff --git a/flow/license.txt b/flow/license.txt
new file mode 100644
index 0000000..22ee6e0
--- /dev/null
+++ b/flow/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2019 by Peter Liepa (https://codepen.io/brainjam/pen/NWKNoKR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/flow/src/index.html b/flow/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/flow/src/script.js b/flow/src/script.js
new file mode 100644
index 0000000..32ed440
--- /dev/null
+++ b/flow/src/script.js
@@ -0,0 +1,102 @@
+"use strict";
+
+let pos, colors;
+const moveSpeed = 0.4;
+const moveScale = 800;
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  background("#162a25");
+  noStroke();
+
+  colors = [
+    color("#77c39c"),
+    color("#2f5e36"),
+    color("#55aba5"),
+    color("#2d7063"),
+    color("#3f6829"),
+    color("#44a872"),
+    color("#215964"),
+    color("#162a25"),
+    color("#162a25"),
+    color("#162a25"),
+    color("#162a25"),
+    color("#000000"),
+    color("#cdedae")
+  ];
+  pos = [];
+  for (let i = 0; i < 500; i++) {
+    pos.push(newParticle(random(width), random(height)));
+  }
+}
+
+function newParticle(x, y) {
+  return {
+    x,
+    y,
+    c: colors[floor(random(colors.length))],
+    r: floor(random(4)),
+    n: 0
+  };
+}
+
+function draw() {
+  for (let i = 0; i < pos.length; i++) {
+    const p = pos[i];
+    let angle = noise(p.x / moveScale, p.y / moveScale) * TWO_PI * moveScale; //I never understood why end by multiplying by moveScale
+    angle = atan2(p.y - height / 2, p.x - width / 2);
+    angle = -getAngleGrad((p.x - width / 2) / 100, -(p.y - height / 2) / 100);
+    angle += p.r * PI / 2;
+    p.x += cos(angle) * moveSpeed;
+    p.y += sin(angle) * moveSpeed;
+    fill(p.c);
+    ellipse(p.x, p.y, 2, 2);
+    if (
+      p.x > width ||
+      p.x < 0 ||
+      p.y > height ||
+      p.y < 0 ||
+      random(1) < 0.001
+    ) {
+      p.x = random(width);
+      p.y = random(height);
+    }
+  }
+}
+
+function getAngleGrad(x, y) {
+  debugger;
+  let grad = { x: 1, y: 0 };
+  const a = { x: -2, y: -1 };
+  const b = { x: 2, y: -1 };
+  const ap = { x: x - a.x, y: y - a.y };
+  const bp = { x: x - b.x, y: y - b.y };
+  const e1sq = ap.x * ap.x + ap.y * ap.y;
+  const e2sq = bp.x * bp.x + bp.y * bp.y;
+  // const e1 = sqrt(e1sq) ;
+  // const e2 = sqrt(e2sq) ;
+  const cot1 = ap.x / ap.y;
+  const cot2 = -bp.x / bp.y;
+  grad = {
+    x: ap.x * cot1 / e1sq + bp.x * cot2 / e2sq,
+    y: ap.y * cot1 / e1sq + bp.y * cot2 / e2sq
+  };
+
+  return Math.atan2(grad.y, grad.x);
+}
+
+function mousePressed() {
+  for (let i = 0; i < 10; i++) {
+    pos.push(newParticle(
+      mouseX + random(-30, 30),
+      mouseY + random(-30, 30)));
+  }
+}
+
+function mouseDragged() {
+  mousePressed();
+}
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
diff --git a/flow/src/style.css b/flow/src/style.css
new file mode 100644
index 0000000..f5c712a
--- /dev/null
+++ b/flow/src/style.css
@@ -0,0 +1,5 @@
+body {
+	background-color: #162a25;
+	margin: 0px;
+	overflow: hidden;
+}
diff --git a/flowing-imagehow-to/README.markdown b/flowing-imagehow-to/README.markdown
new file mode 100644
index 0000000..d4a6639
--- /dev/null
+++ b/flowing-imagehow-to/README.markdown
@@ -0,0 +1,4 @@
+# Flowing Image - How To
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/Mamboleoo/pen/GRJKoBw](https://codepen.io/Mamboleoo/pen/GRJKoBw).
+
+ A demo break down using P5.js
\ No newline at end of file
diff --git a/flowing-imagehow-to/dist/index.html b/flowing-imagehow-to/dist/index.html
new file mode 100644
index 0000000..d8116af
--- /dev/null
+++ b/flowing-imagehow-to/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Flowing Image - How To</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input type="range" min="1" max="6" step="1" id="step" value="1">
+<section>
+  <p>Draw an image and divide it into a grid</p>
+  <p>Get the brightness of every cell</p>
+  <p>Draw particles moving from left to right</p>
+  <p>Update each particle's speed based on the brightness of its position</p>
+  <p>Fade each particle based on its speed</p>
+  <p>Do not clear your scene on each frame, to let the particles fade out</p>
+</section>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/flowing-imagehow-to/dist/script.js b/flowing-imagehow-to/dist/script.js
new file mode 100644
index 0000000..d037dd4
--- /dev/null
+++ b/flowing-imagehow-to/dist/script.js
@@ -0,0 +1,257 @@
+let img;
+const detail = 6;
+let particles = [];
+let grid = [];
+let particleImage;
+let ctx;
+function preload() {
+  img = loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/Meisje_met_de_parel.jpg?3');
+}
+
+class Particle {
+  constructor (x, y) {
+    this.x = x || random(width);
+    this.y = y || random(height);
+    this.prevX = this.x;
+    this.speed = 0;
+    this.v = random(0, 0.7);
+  }
+  
+  update (speed) {
+    if (grid.length) {
+      this.speed = grid[floor(this.y / detail)][floor(this.x / detail)] * 0.97;
+    }
+    this.x += (1 - this.speed) * 3 + this.v;
+    
+    if (this.x > width) {
+      this.x = 0;
+    }
+  }
+  
+  draw () {
+    image(particleImage, this.x, this.y);
+  }
+}
+
+/* ====== STEP 1 ====== */
+function step1 () {
+  clear();
+  noLoop();
+  image(img, 0, 0, width, height);
+  noFill();
+  stroke(120);
+  strokeWeight(1);
+  strokeCap(SQUARE);
+  ctx.globalAlpha = 1;
+  for (let y = 0; y < height; y+=detail) {
+    for (let x = 0; x < width; x+=detail) {
+      rect(x + 0.5, y + 0.5, detail, detail);
+    }
+  }
+}
+
+/* ====== STEP 2 ====== */
+function step2 () {
+  clear();
+  ctx.globalAlpha = 1;
+  noLoop();
+  image(img, 0, 0, width, height);
+  loadPixels();
+  noStroke();
+  for (let y = 0; y < height; y+=detail) {
+    for (let x = 0; x < width; x+=detail) {
+      const r = pixels[(y  * width + x) * 4];
+      const g = pixels[(y  * width + x) * 4 + 1];
+      const b = pixels[(y  * width + x) * 4 + 2];
+      const _color = color(r, g, b);
+      const _brightness = floor(brightness(_color) / 100 * 255);
+      fill(_brightness);
+      rect(x, y, detail, detail);
+    }
+  }
+}
+
+/* ====== STEP 3 ====== */
+function goToStep3 () {
+  ctx.globalAlpha = 1;
+  loop();
+  
+  grid = [];
+  particles = [];
+  for (let i = 0; i < 20; i++) {
+    particles.push(new Particle(null, (i/20) * height));
+  }
+}
+
+function step3 () {
+  clear();
+  particles.forEach(p => {
+    p.update();
+    p.draw();
+  });
+}
+
+/* ====== STEP 4 ====== */
+function goToStep4 () {
+  clear();
+  ctx.globalAlpha = 1;
+  loop();
+  image(img, 0, 0, width, height);
+  loadPixels();
+  clear();
+  noStroke();
+  
+  grid = [];
+  for (let y = 0; y < height; y+=detail) {
+    let row = [];
+    for (let x = 0; x < width; x+=detail) {
+      const r = pixels[(y * width + x) * 4];
+      const g = pixels[(y * width + x) * 4 + 1];
+      const b = pixels[(y * width + x) * 4 + 2];
+      const _color = color(r, g, b);
+      const _brightness = brightness(_color) / 100;
+      fill(_brightness * 255);
+      rect(x, y, detail, detail);
+      row.push(_brightness);
+    }
+    grid.push(row);
+  }
+  
+  particles = [];
+  for (let i = 0; i < 3000; i++) {
+    particles.push(new Particle(null, (i/3000) * height));
+  }
+}
+
+function step4 () {
+  clear();
+  particles.forEach(p => {
+    p.update();
+    p.draw();
+  });
+}
+
+/* ====== STEP 5 ====== */
+function goToStep5 () {
+  clear();
+  ctx.globalAlpha = 1;
+  loop();
+  image(img, 0, 0, width, height);
+  loadPixels();
+  clear();
+  noStroke();
+  
+  grid = [];
+  for (let y = 0; y < height; y+=detail) {
+    let row = [];
+    for (let x = 0; x < width; x+=detail) {
+      const r = pixels[(y * width + x) * 4];
+      const g = pixels[(y * width + x) * 4 + 1];
+      const b = pixels[(y * width + x) * 4 + 2];
+      const _color = color(r, g, b);
+      const _brightness = brightness(_color) / 100;
+      fill(_brightness * 255);
+      rect(x, y, detail, detail);
+      row.push(_brightness);
+    }
+    grid.push(row);
+  }
+  
+  particles = [];
+  for (let i = 0; i < 3000; i++) {
+    particles.push(new Particle(null, (i/3000) * height));
+  }
+}
+
+function step5 () {
+  clear();
+  particles.forEach(p => {
+    p.update();
+    ctx.globalAlpha = p.speed * 0.3;
+    p.draw();
+  });
+}
+
+/* ====== STEP 6 ====== */
+function goToStep6 () {
+  clear();
+  ctx.globalAlpha = 1;
+  loop();
+  image(img, 0, 0, width, height);
+  loadPixels();
+  clear();
+  noStroke();
+  
+  grid = [];
+  for (let y = 0; y < height; y+=detail) {
+    let row = [];
+    for (let x = 0; x < width; x+=detail) {
+      const r = pixels[(y * width + x) * 4];
+      const g = pixels[(y * width + x) * 4 + 1];
+      const b = pixels[(y * width + x) * 4 + 2];
+      const _color = color(r, g, b);
+      const _brightness = brightness(_color) / 100;
+      row.push(_brightness);
+    }
+    grid.push(row);
+  }
+  
+  particles = [];
+  for (let i = 0; i < 3000; i++) {
+    particles.push(new Particle(null, (i/3000) * height));
+  }
+}
+
+function step6 () {
+  ctx.globalAlpha = 0.05;
+  fill(0);
+  rect(0,0,width,height);
+  ctx.globalAlpha = 0.2;
+  particles.forEach(p => {
+    p.update();
+    ctx.globalAlpha = p.speed * 0.3;
+    p.draw();
+  });
+}
+
+function setup () {
+  const canvas = createCanvas(100,100);
+  ctx = canvas.drawingContext;
+  
+  pixelDensity(1);
+  
+  particleImage = createGraphics(8, 8);
+  particleImage.fill(255);
+  particleImage.noStroke();
+  particleImage.circle(4, 4, 4);
+  
+  windowResized();
+  document.querySelector('#step').addEventListener('input', () => {
+    if (window['goToStep' + step.value]) {
+      window['goToStep' + step.value]();
+    }
+    draw();
+  });
+}
+
+function windowResized () {
+  const imgRatio = img.width/img.height;
+  if (windowWidth/windowHeight > imgRatio) {
+    resizeCanvas(floor(windowHeight * imgRatio), floor(windowHeight));
+  } else {
+    resizeCanvas(floor(windowWidth), floor(windowWidth / imgRatio));
+  }
+  noiseSeed(random(100));
+  if (window['goToStep' + step.value]) {
+    window['goToStep' + step.value]();
+  }
+  draw();
+}
+
+const texts = document.querySelectorAll('section p');
+function draw () {
+  window['step' + step.value]();
+  
+  texts.forEach(text => text.style.display = 'none');
+  texts[step.value - 1].style.display = 'block';
+}
\ No newline at end of file
diff --git a/flowing-imagehow-to/dist/style.css b/flowing-imagehow-to/dist/style.css
new file mode 100644
index 0000000..9a0e48f
--- /dev/null
+++ b/flowing-imagehow-to/dist/style.css
@@ -0,0 +1,105 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+  height: 100vh;
+  background: black;
+}
+
+canvas {
+  margin: auto;
+  touch-action: none;
+}
+
+input {
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 34px;
+  max-width: 400px;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+}
+input::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  height: 6px;
+  background: #fff;
+  -webkit-appearance: none;
+  appearance: none;
+}
+input::-moz-range-track {
+  box-sizing: border-box;
+  height: 6px;
+  background: #fff;
+  -webkit-appearance: none;
+  appearance: none;
+}
+input::-ms-track {
+  box-sizing: border-box;
+  height: 6px;
+  background: #fff;
+  -webkit-appearance: none;
+  appearance: none;
+}
+input::-webkit-slider-thumb {
+  margin-top: -12px;
+  box-sizing: border-box;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid black;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+input::-moz-range-thumb {
+  box-sizing: border-box;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid black;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+input::-ms-thumb {
+  margin-top: 0px;
+  box-sizing: border-box;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid black;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+
+section {
+  box-sizing: border-box;
+  font-size: 30px;
+  color: white;
+  position: fixed;
+  left: 0;
+  top: 20px;
+  width: 100%;
+  text-align: center;
+  padding: 10px 10%;
+  z-index: 10;
+  pointer-events: none;
+  text-shadow: 0 0 3px black, 0 0 4px black, 0 0 5px black;
+  background: rgba(0, 0, 0, 0.7);
+}
+section p {
+  margin: 0;
+}
+@media (max-width: 500px) {
+  section {
+    font-size: 24px;
+  }
+}
\ No newline at end of file
diff --git a/flowing-imagehow-to/license.txt b/flowing-imagehow-to/license.txt
new file mode 100644
index 0000000..ccfda37
--- /dev/null
+++ b/flowing-imagehow-to/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Louis Hoebregts (https://codepen.io/Mamboleoo/pen/GRJKoBw)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/flowing-imagehow-to/src/index.html b/flowing-imagehow-to/src/index.html
new file mode 100644
index 0000000..59578e8
--- /dev/null
+++ b/flowing-imagehow-to/src/index.html
@@ -0,0 +1,9 @@
+<input type="range" min="1" max="6" step="1" id="step" value="1">
+<section>
+  <p>Draw an image and divide it into a grid</p>
+  <p>Get the brightness of every cell</p>
+  <p>Draw particles moving from left to right</p>
+  <p>Update each particle's speed based on the brightness of its position</p>
+  <p>Fade each particle based on its speed</p>
+  <p>Do not clear your scene on each frame, to let the particles fade out</p>
+</section>
diff --git a/flowing-imagehow-to/src/script.js b/flowing-imagehow-to/src/script.js
new file mode 100644
index 0000000..6f57a61
--- /dev/null
+++ b/flowing-imagehow-to/src/script.js
@@ -0,0 +1,257 @@
+let img;
+const detail = 6;
+let particles = [];
+let grid = [];
+let particleImage;
+let ctx;
+function preload() {
+  img = loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/Meisje_met_de_parel.jpg?3');
+}
+
+class Particle {
+  constructor (x, y) {
+    this.x = x || random(width);
+    this.y = y || random(height);
+    this.prevX = this.x;
+    this.speed = 0;
+    this.v = random(0, 0.7);
+  }
+  
+  update (speed) {
+    if (grid.length) {
+      this.speed = grid[floor(this.y / detail)][floor(this.x / detail)] * 0.97;
+    }
+    this.x += (1 - this.speed) * 3 + this.v;
+    
+    if (this.x > width) {
+      this.x = 0;
+    }
+  }
+  
+  draw () {
+    image(particleImage, this.x, this.y);
+  }
+}
+
+/* ====== STEP 1 ====== */
+function step1 () {
+  clear();
+  noLoop();
+  image(img, 0, 0, width, height);
+  noFill();
+  stroke(120);
+  strokeWeight(1);
+  strokeCap(SQUARE);
+  ctx.globalAlpha = 1;
+  for (let y = 0; y < height; y+=detail) {
+    for (let x = 0; x < width; x+=detail) {
+      rect(x + 0.5, y + 0.5, detail, detail);
+    }
+  }
+}
+
+/* ====== STEP 2 ====== */
+function step2 () {
+  clear();
+  ctx.globalAlpha = 1;
+  noLoop();
+  image(img, 0, 0, width, height);
+  loadPixels();
+  noStroke();
+  for (let y = 0; y < height; y+=detail) {
+    for (let x = 0; x < width; x+=detail) {
+      const r = pixels[(y  * width + x) * 4];
+      const g = pixels[(y  * width + x) * 4 + 1];
+      const b = pixels[(y  * width + x) * 4 + 2];
+      const _color = color(r, g, b);
+      const _brightness = floor(brightness(_color) / 100 * 255);
+      fill(_brightness);
+      rect(x, y, detail, detail);
+    }
+  }
+}
+
+/* ====== STEP 3 ====== */
+function goToStep3 () {
+  ctx.globalAlpha = 1;
+  loop();
+  
+  grid = [];
+  particles = [];
+  for (let i = 0; i < 20; i++) {
+    particles.push(new Particle(null, (i/20) * height));
+  }
+}
+
+function step3 () {
+  clear();
+  particles.forEach(p => {
+    p.update();
+    p.draw();
+  });
+}
+
+/* ====== STEP 4 ====== */
+function goToStep4 () {
+  clear();
+  ctx.globalAlpha = 1;
+  loop();
+  image(img, 0, 0, width, height);
+  loadPixels();
+  clear();
+  noStroke();
+  
+  grid = [];
+  for (let y = 0; y < height; y+=detail) {
+    let row = [];
+    for (let x = 0; x < width; x+=detail) {
+      const r = pixels[(y * width + x) * 4];
+      const g = pixels[(y * width + x) * 4 + 1];
+      const b = pixels[(y * width + x) * 4 + 2];
+      const _color = color(r, g, b);
+      const _brightness = brightness(_color) / 100;
+      fill(_brightness * 255);
+      rect(x, y, detail, detail);
+      row.push(_brightness);
+    }
+    grid.push(row);
+  }
+  
+  particles = [];
+  for (let i = 0; i < 3000; i++) {
+    particles.push(new Particle(null, (i/3000) * height));
+  }
+}
+
+function step4 () {
+  clear();
+  particles.forEach(p => {
+    p.update();
+    p.draw();
+  });
+}
+
+/* ====== STEP 5 ====== */
+function goToStep5 () {
+  clear();
+  ctx.globalAlpha = 1;
+  loop();
+  image(img, 0, 0, width, height);
+  loadPixels();
+  clear();
+  noStroke();
+  
+  grid = [];
+  for (let y = 0; y < height; y+=detail) {
+    let row = [];
+    for (let x = 0; x < width; x+=detail) {
+      const r = pixels[(y * width + x) * 4];
+      const g = pixels[(y * width + x) * 4 + 1];
+      const b = pixels[(y * width + x) * 4 + 2];
+      const _color = color(r, g, b);
+      const _brightness = brightness(_color) / 100;
+      fill(_brightness * 255);
+      rect(x, y, detail, detail);
+      row.push(_brightness);
+    }
+    grid.push(row);
+  }
+  
+  particles = [];
+  for (let i = 0; i < 3000; i++) {
+    particles.push(new Particle(null, (i/3000) * height));
+  }
+}
+
+function step5 () {
+  clear();
+  particles.forEach(p => {
+    p.update();
+    ctx.globalAlpha = p.speed * 0.3;
+    p.draw();
+  });
+}
+
+/* ====== STEP 6 ====== */
+function goToStep6 () {
+  clear();
+  ctx.globalAlpha = 1;
+  loop();
+  image(img, 0, 0, width, height);
+  loadPixels();
+  clear();
+  noStroke();
+  
+  grid = [];
+  for (let y = 0; y < height; y+=detail) {
+    let row = [];
+    for (let x = 0; x < width; x+=detail) {
+      const r = pixels[(y * width + x) * 4];
+      const g = pixels[(y * width + x) * 4 + 1];
+      const b = pixels[(y * width + x) * 4 + 2];
+      const _color = color(r, g, b);
+      const _brightness = brightness(_color) / 100;
+      row.push(_brightness);
+    }
+    grid.push(row);
+  }
+  
+  particles = [];
+  for (let i = 0; i < 3000; i++) {
+    particles.push(new Particle(null, (i/3000) * height));
+  }
+}
+
+function step6 () {
+  ctx.globalAlpha = 0.05;
+  fill(0);
+  rect(0,0,width,height);
+  ctx.globalAlpha = 0.2;
+  particles.forEach(p => {
+    p.update();
+    ctx.globalAlpha = p.speed * 0.3;
+    p.draw();
+  });
+}
+
+function setup () {
+  const canvas = createCanvas(100,100);
+  ctx = canvas.drawingContext;
+  
+  pixelDensity(1);
+  
+  particleImage = createGraphics(8, 8);
+  particleImage.fill(255);
+  particleImage.noStroke();
+  particleImage.circle(4, 4, 4);
+  
+  windowResized();
+  document.querySelector('#step').addEventListener('input', () => {
+    if (window['goToStep' + step.value]) {
+      window['goToStep' + step.value]();
+    }
+    draw();
+  });
+}
+
+function windowResized () {
+  const imgRatio = img.width/img.height;
+  if (windowWidth/windowHeight > imgRatio) {
+    resizeCanvas(floor(windowHeight * imgRatio), floor(windowHeight));
+  } else {
+    resizeCanvas(floor(windowWidth), floor(windowWidth / imgRatio));
+  }
+  noiseSeed(random(100));
+  if (window['goToStep' + step.value]) {
+    window['goToStep' + step.value]();
+  }
+  draw();
+}
+
+const texts = document.querySelectorAll('section p');
+function draw () {
+  window['step' + step.value]();
+  
+  texts.forEach(text => text.style.display = 'none');
+  texts[step.value - 1].style.display = 'block';
+}
diff --git a/flowing-imagehow-to/src/style.scss b/flowing-imagehow-to/src/style.scss
new file mode 100644
index 0000000..137e0ba
--- /dev/null
+++ b/flowing-imagehow-to/src/style.scss
@@ -0,0 +1,73 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+  height: 100vh;
+  background: black;
+}
+canvas {
+  margin: auto;
+  touch-action: none;
+}
+
+@mixin track {
+  box-sizing: border-box;
+  height: 6px;
+	background: #fff;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+@mixin thumb {
+  box-sizing: border-box;
+	width: 30px;
+  height: 30px;
+	border-radius: 50%;
+	background: #fff;
+  border: 2px solid black;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+
+input {
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 34px;
+  max-width: 400px;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  &::-webkit-slider-runnable-track {@include track }
+	&::-moz-range-track { @include track }
+	&::-ms-track { @include track }
+  
+  &::-webkit-slider-thumb {margin-top: -12px;@include thumb}
+	&::-moz-range-thumb { @include thumb }
+  &::-ms-thumb {margin-top:0px;@include thumb}
+}
+
+section {
+  box-sizing: border-box;
+  font-size: 30px;
+  color: white;
+  position: fixed;
+  left: 0;
+  top: 20px;
+  width: 100%;
+  text-align: center;
+  padding: 10px 10%;
+  z-index: 10;
+  pointer-events: none;
+  text-shadow: 0 0 3px black, 0 0 4px black, 0 0 5px black;
+  background: rgba(0, 0, 0, 0.7);
+  p {
+    margin: 0;
+  }
+  @media (max-width: 500px) {
+    font-size: 24px;
+  }
+}
\ No newline at end of file
diff --git a/flutter-challengelayout/README.markdown b/flutter-challengelayout/README.markdown
new file mode 100644
index 0000000..1cb263a
--- /dev/null
+++ b/flutter-challengelayout/README.markdown
@@ -0,0 +1,5 @@
+# Flutter Challenge - Layout
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/digitaljoni/pen/dyGgRMG](https://codepen.io/digitaljoni/pen/dyGgRMG).
+
+
diff --git a/flutter-challengelayout/dist/index.html b/flutter-challengelayout/dist/index.html
new file mode 100644
index 0000000..b830fbe
--- /dev/null
+++ b/flutter-challengelayout/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Flutter Challenge - Layout</title>
+  
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/flutter-challengelayout/dist/script.js b/flutter-challengelayout/dist/script.js
new file mode 100644
index 0000000..398dad0
--- /dev/null
+++ b/flutter-challengelayout/dist/script.js
@@ -0,0 +1,129 @@
+define('dartpad_main', ['dart_sdk', 'flutter_web'], (function load__dartpad_main(dart_sdk, flutter_web) {
+  'use strict';
+  const core = dart_sdk.core;
+  const ui = dart_sdk.ui;
+  const async = dart_sdk.async;
+  const _interceptors = dart_sdk._interceptors;
+  const dart = dart_sdk.dart;
+  const dartx = dart_sdk.dartx;
+  const scaffold = flutter_web.src__material__scaffold;
+  const app_bar = flutter_web.src__material__app_bar;
+  const icon = flutter_web.src__widgets__icon;
+  const icons = flutter_web.src__material__icons;
+  const text = flutter_web.src__widgets__text;
+  const colors = flutter_web.src__material__colors;
+  const basic = flutter_web.src__widgets__basic;
+  const edge_insets = flutter_web.src__painting__edge_insets;
+  const alignment = flutter_web.src__painting__alignment;
+  const circle_avatar = flutter_web.src__material__circle_avatar;
+  const _network_image_web = flutter_web.src__painting___network_image_web;
+  const framework = flutter_web.src__widgets__framework;
+  const container = flutter_web.src__widgets__container;
+  const flex = flutter_web.src__rendering__flex;
+  const box_decoration = flutter_web.src__painting__box_decoration;
+  const gradient = flutter_web.src__painting__gradient;
+  const decoration_image = flutter_web.src__painting__decoration_image;
+  const media_query = flutter_web.src__widgets__media_query;
+  const card = flutter_web.src__material__card;
+  const rounded_rectangle_border = flutter_web.src__painting__rounded_rectangle_border;
+  const border_radius = flutter_web.src__painting__border_radius;
+  const image = flutter_web.src__widgets__image;
+  const paragraph = flutter_web.src__rendering__paragraph;
+  const theme = flutter_web.src__material__theme;
+  const box_border = flutter_web.src__painting__box_border;
+  const borders = flutter_web.src__painting__borders;
+  const gesture_detector = flutter_web.src__widgets__gesture_detector;
+  const icon_data = flutter_web.src__widgets__icon_data;
+  const binding = flutter_web.src__widgets__binding;
+  const app = flutter_web.src__material__app;
+  const theme_data = flutter_web.src__material__theme_data;
+  var bootstrap = Object.create(dart.library);
+  var main = Object.create(dart.library);
+  var WidgetL = () => (WidgetL = dart.constFn(dart.legacy(framework.Widget)))();
+  var JSArrayOfWidgetL = () => (JSArrayOfWidgetL = dart.constFn(_interceptors.JSArray$(WidgetL())))();
+  var ColorL = () => (ColorL = dart.constFn(dart.legacy(ui.Color)))();
+  var JSArrayOfColorL = () => (JSArrayOfColorL = dart.constFn(_interceptors.JSArray$(ColorL())))();
+  const CT = Object.create(null);
+  var L0 = "file:///tmp/dartpadYDAKTV/main.dart";
+  bootstrap.main = function main$() {
+    return async.async(dart.void, function* main$() {
+      yield ui.webOnlyInitializePlatform();
+      main.main();
+    });
+  };
+  main.MyWidget = class MyWidget extends framework.StatelessWidget {
+    build(context) {
+      return new scaffold.Scaffold.new({appBar: new app_bar.AppBar.new({leading: new icon.Icon.new(icons.Icons.list), title: new text.Text.new("MUSIC"), backgroundColor: colors.Colors.transparent, elevation: 0.0, centerTitle: true, actions: JSArrayOfWidgetL().of([new basic.Padding.new({padding: new edge_insets.EdgeInsets.only({right: 18.0}), child: new basic.Align.new({alignment: alignment.Alignment.center, child: new basic.SizedBox.new({child: new circle_avatar.CircleAvatar.new({radius: 20.0, backgroundImage: new _network_image_web.NetworkImage.new("https://randomuser.me/api/portraits/women/10.jpg")})})})})])}), extendBodyBehindAppBar: true, extendBody: true, bottomNavigationBar: new container.Container.new({child: new basic.Row.new({mainAxisAlignment: flex.MainAxisAlignment.spaceEvenly, children: JSArrayOfWidgetL().of([new main.MusicIcon.new(icons.Icons.shuffle), new main.MusicIcon.new(icons.Icons.fast_rewind), new main.MusicIcon.new(icons.Icons.pause, {isSelected: true}), new main.MusicIcon.new(icons.Icons.fast_forward), new main.MusicIcon.new(icons.Icons.repeat)])})}), body: new container.Container.new({decoration: new box_decoration.BoxDecoration.new({gradient: new gradient.LinearGradient.new({begin: alignment.Alignment.topLeft, end: alignment.Alignment.bottomRight, colors: JSArrayOfColorL().of([new ui.Color.new(4280364606), new ui.Color.new(4279243812)])})}), child: new basic.Column.new({children: JSArrayOfWidgetL().of([new basic.SizedBox.new({height: 100.0}), new basic.Expanded.new({child: new basic.Stack.new({children: JSArrayOfWidgetL().of([new container.Container.new({decoration: new box_decoration.BoxDecoration.new({image: new decoration_image.DecorationImage.new({image: new _network_image_web.NetworkImage.new(main.albumImage)})}), child: new basic.BackdropFilter.new({filter: ui.ImageFilter.blur({sigmaX: 30.0, sigmaY: 30.0}), child: new container.Container.new({decoration: new box_decoration.BoxDecoration.new({color: colors.Colors.white.withOpacity(0.0)})})})}), new basic.Center.new({child: new container.Container.new({width: dart.notNull(media_query.MediaQuery.of(context).size.height) / 2.5, height: dart.notNull(media_query.MediaQuery.of(context).size.height) / 2.5, child: new card.Card.new({color: colors.Colors.transparent, shape: new rounded_rectangle_border.RoundedRectangleBorder.new({borderRadius: new border_radius.BorderRadius.all(new ui.Radius.circular(16.0))}), elevation: 20.0, clipBehavior: ui.Clip.antiAlias, child: new image.Image.new({image: new _network_image_web.NetworkImage.new(main.albumImage)})})})})])})}), new container.Container.new({height: 150.0, padding: new edge_insets.EdgeInsets.symmetric({vertical: 16.0, horizontal: 32.0}), child: new basic.Row.new({mainAxisAlignment: flex.MainAxisAlignment.spaceEvenly, children: JSArrayOfWidgetL().of([new main.MusicIcon.new(icons.Icons.airplay), new basic.Expanded.new({child: new basic.Column.new({mainAxisAlignment: flex.MainAxisAlignment.center, children: JSArrayOfWidgetL().of([new text.Text.new("Believer", {maxLines: 1, overflow: paragraph.TextOverflow.fade, softWrap: false, style: theme.Theme.of(context).textTheme.headline4.copyWith({fontWeight: ui.FontWeight.normal, color: colors.Colors.white})}), new text.Text.new("Imagine Dragons", {style: theme.Theme.of(context).textTheme.subtitle1.copyWith({fontWeight: ui.FontWeight.normal, color: colors.Colors.white54})})])})}), new main.MusicIcon.new(icons.Icons.volume_up)])})}), new container.Container.new({child: new basic.Column.new({children: JSArrayOfWidgetL().of([new container.Container.new({padding: new edge_insets.EdgeInsets.symmetric({horizontal: 16.0, vertical: 8.0}), child: new basic.Row.new({mainAxisAlignment: flex.MainAxisAlignment.spaceBetween, children: JSArrayOfWidgetL().of([new text.Text.new("01:21"), new text.Text.new("-05:23")])})}), new container.Container.new({width: media_query.MediaQuery.of(context).size.width, height: 10.0, decoration: new box_decoration.BoxDecoration.new({border: new box_border.Border.new({top: new borders.BorderSide.new({color: new ui.Color.new(4278783514)}), bottom: new borders.BorderSide.new({color: new ui.Color.new(4280759632)})}), color: new ui.Color.new(4279508776)}), child: new basic.Align.new({alignment: alignment.Alignment.centerLeft, child: new container.Container.new({decoration: new box_decoration.BoxDecoration.new({gradient: new gradient.LinearGradient.new({colors: JSArrayOfColorL().of([new ui.Color.new(4279212779), colors.Colors.white])})}), width: dart.notNull(media_query.MediaQuery.of(context).size.width) / 3})})})])})}), new basic.SizedBox.new({height: 64.0})])})})});
+    }
+  };
+  (main.MyWidget.new = function() {
+    main.MyWidget.__proto__.new.call(this);
+    ;
+  }).prototype = main.MyWidget.prototype;
+  dart.addTypeTests(main.MyWidget);
+  dart.addTypeCaches(main.MyWidget);
+  dart.setMethodSignature(main.MyWidget, () => ({
+    __proto__: dart.getMethods(main.MyWidget.__proto__),
+    build: dart.fnType(dart.legacy(framework.Widget), [dart.legacy(framework.BuildContext)])
+  }));
+  dart.setLibraryUri(main.MyWidget, L0);
+  var iconData$ = dart.privateName(main, "MusicIcon.iconData");
+  var isSelected$ = dart.privateName(main, "MusicIcon.isSelected");
+  main.MusicIcon = class MusicIcon extends framework.StatelessWidget {
+    get iconData() {
+      return this[iconData$];
+    }
+    set iconData(value) {
+      super.iconData = value;
+    }
+    get isSelected() {
+      return this[isSelected$];
+    }
+    set isSelected(value) {
+      super.isSelected = value;
+    }
+    build(context) {
+      return new gesture_detector.GestureDetector.new({child: new container.Container.new({decoration: new box_decoration.BoxDecoration.new({gradient: dart.test(this.isSelected) ? new gradient.RadialGradient.new({colors: JSArrayOfColorL().of([colors.Colors.white38, colors.Colors.transparent])}) : null}), padding: new edge_insets.EdgeInsets.all(16.0), child: new icon.Icon.new(this.iconData, {color: dart.test(this.isSelected) ? colors.Colors.white : theme.Theme.of(context).accentColor, size: 32.0})})});
+    }
+  };
+  (main.MusicIcon.new = function(iconData, opts) {
+    let isSelected = opts && 'isSelected' in opts ? opts.isSelected : false;
+    let key = opts && 'key' in opts ? opts.key : null;
+    this[iconData$] = iconData;
+    this[isSelected$] = isSelected;
+    main.MusicIcon.__proto__.new.call(this, {key: key});
+    ;
+  }).prototype = main.MusicIcon.prototype;
+  dart.addTypeTests(main.MusicIcon);
+  dart.addTypeCaches(main.MusicIcon);
+  dart.setMethodSignature(main.MusicIcon, () => ({
+    __proto__: dart.getMethods(main.MusicIcon.__proto__),
+    build: dart.fnType(dart.legacy(framework.Widget), [dart.legacy(framework.BuildContext)])
+  }));
+  dart.setLibraryUri(main.MusicIcon, L0);
+  dart.setFieldSignature(main.MusicIcon, () => ({
+    __proto__: dart.getFields(main.MusicIcon.__proto__),
+    iconData: dart.finalFieldType(dart.legacy(icon_data.IconData)),
+    isSelected: dart.finalFieldType(dart.legacy(core.bool))
+  }));
+  main.main = function main$0() {
+    binding.runApp(new app.MaterialApp.new({debugShowCheckedModeBanner: false, theme: theme_data.ThemeData.dark().copyWith({accentColor: new ui.Color.new(4284114554)}), home: new main.MyWidget.new()}));
+  };
+  dart.defineLazy(main, {
+    /*main.albumImage*/get albumImage() {
+      return "https://raw.githubusercontent.com/digitaljoni/examples_flutter/master/music_player/images/album.png";
+    }
+  }, true);
+  dart.trackLibraries("dartpad_main", {
+    "file:///tmp/dartpadYDAKTV/bootstrap.dart": bootstrap,
+    "file:///tmp/dartpadYDAKTV/main.dart": main
+  }, {
+  }, null);
+  // Exports:
+  return {
+    tmp__dartpadYDAKTV__bootstrap: bootstrap,
+    tmp__dartpadYDAKTV__main: main
+  };
+}));
+
+//# sourceMappingURL=main.dart.js.map
\ No newline at end of file
diff --git a/flutter-challengelayout/license.txt b/flutter-challengelayout/license.txt
new file mode 100644
index 0000000..a0307dc
--- /dev/null
+++ b/flutter-challengelayout/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by digitaljoni (https://codepen.io/digitaljoni/pen/dyGgRMG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/flutter-challengelayout/src/index.html b/flutter-challengelayout/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/flutter-challengelayout/src/script.js b/flutter-challengelayout/src/script.js
new file mode 100644
index 0000000..5cabef5
--- /dev/null
+++ b/flutter-challengelayout/src/script.js
@@ -0,0 +1,241 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+const albumImage =
+    'https://raw.githubusercontent.com/digitaljoni/examples_flutter/master/music_player/images/album.png';
+
+void main() {
+  runApp(
+    MaterialApp(
+      debugShowCheckedModeBanner: false,
+      theme: ThemeData.dark().copyWith(
+        accentColor: Color(0xFF5a667a),
+      ),
+      home: MyWidget(),
+    ),
+  );
+}
+
+class MyWidget extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        leading: Icon(Icons.list),
+        title: Text('MUSIC'),
+        backgroundColor: Colors.transparent,
+        elevation: 0.0,
+        centerTitle: true,
+        actions: <Widget>[
+          Padding(
+            padding: EdgeInsets.only(
+              right: 18.0,
+            ),
+            child: Align(
+              alignment: Alignment.center,
+              child: SizedBox(
+                child: CircleAvatar(
+                  radius: 20.0,
+                  backgroundImage: NetworkImage(
+                      'https://randomuser.me/api/portraits/women/10.jpg'),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+      extendBodyBehindAppBar: true,
+      extendBody: true,
+      bottomNavigationBar: Container(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: <Widget>[
+            MusicIcon(Icons.shuffle),
+            MusicIcon(Icons.fast_rewind),
+            MusicIcon(Icons.pause, isSelected: true),
+            MusicIcon(Icons.fast_forward),
+            MusicIcon(Icons.repeat),
+          ],
+        ),
+      ),
+      body: Container(
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+              colors: <Color>[
+                Color(0xFF212e3e),
+                Color(0xFF101424),
+              ]),
+        ),
+        child: Column(
+          children: <Widget>[
+            SizedBox(
+              height: 100.0,
+            ),
+            Expanded(
+              child: Stack(
+                children: <Widget>[
+                  Container(
+                    decoration: BoxDecoration(
+                      image: DecorationImage(
+                        image: NetworkImage(albumImage),
+                      ),
+                    ),
+                    child: BackdropFilter(
+                      filter: new ImageFilter.blur(sigmaX: 30.0, sigmaY: 30.0),
+                      child: new Container(
+                        decoration: new BoxDecoration(
+                            color: Colors.white.withOpacity(0.0)),
+                      ),
+                    ),
+                  ),
+                  Center(
+                    child: Container(
+                      width: MediaQuery.of(context).size.height / 2.5,
+                      height: MediaQuery.of(context).size.height / 2.5,
+                      child: Card(
+                        color: Colors.transparent,
+                        shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.all(
+                            Radius.circular(16.0),
+                          ),
+                        ),
+                        elevation: 20.0,
+                        clipBehavior: Clip.antiAlias,
+                        child: Image(
+                          image: NetworkImage(albumImage),
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            Container(
+              height: 150.0,
+              padding: EdgeInsets.symmetric(
+                vertical: 16.0,
+                horizontal: 32.0,
+              ),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                children: <Widget>[
+                  MusicIcon(Icons.airplay),
+                  Expanded(
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: <Widget>[
+                        Text(
+                          'Believer',
+                          maxLines: 1,
+                          overflow: TextOverflow.fade,
+                          softWrap: false,
+                          style: Theme.of(context).textTheme.headline4.copyWith(
+                                fontWeight: FontWeight.normal,
+                                color: Colors.white,
+                              ),
+                        ),
+                        Text(
+                          'Imagine Dragons',
+                          style: Theme.of(context).textTheme.subtitle1.copyWith(
+                                fontWeight: FontWeight.normal,
+                                color: Colors.white54,
+                              ),
+                        ),
+                      ],
+                    ),
+                  ),
+                  MusicIcon(Icons.volume_up),
+                ],
+              ),
+            ),
+            Container(
+                child: Column(
+              children: <Widget>[
+                Container(
+                  padding: EdgeInsets.symmetric(
+                    horizontal: 16.0,
+                    vertical: 8.0,
+                  ),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: <Widget>[
+                      Text('01:21'),
+                      Text('-05:23'),
+                    ],
+                  ),
+                ),
+                Container(
+                  width: MediaQuery.of(context).size.width,
+                  height: 10.0,
+                  decoration: BoxDecoration(
+                    border: Border(
+                      top: BorderSide(
+                        color: Color(0xFF090e1a),
+                      ),
+                      bottom: BorderSide(
+                        color: Color(0xFF273550),
+                      ),
+                    ),
+                    color: Color(0xFF141f28),
+                  ),
+                  child: Align(
+                    alignment: Alignment.centerLeft,
+                    child: Container(
+                      decoration: BoxDecoration(
+                        gradient: LinearGradient(
+                          colors: [Color(0xFF0f9aeb), Colors.white],
+                        ),
+                      ),
+                      width: MediaQuery.of(context).size.width / 3,
+                    ),
+                  ),
+                ),
+              ],
+            )),
+            SizedBox(
+              height: 64.0,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class MusicIcon extends StatelessWidget {
+  const MusicIcon(
+    this.iconData, {
+    this.isSelected = false,
+    Key key,
+  }) : super(key: key);
+
+  final IconData iconData;
+  final bool isSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      child: Container(
+        decoration: BoxDecoration(
+          gradient: isSelected
+              ? RadialGradient(
+                  colors: [
+                    Colors.white38,
+                    Colors.transparent,
+                  ],
+                )
+              : null,
+        ),
+        padding: EdgeInsets.all(16.0),
+        child: Icon(
+          iconData,
+          color: isSelected ? Colors.white : Theme.of(context).accentColor,
+          size: 32.0,
+        ),
+      ),
+    );
+  }
+}
diff --git a/flying-lanterns-and-a-koi-fish-instancing-datatexture/README.markdown b/flying-lanterns-and-a-koi-fish-instancing-datatexture/README.markdown
new file mode 100644
index 0000000..dad668d
--- /dev/null
+++ b/flying-lanterns-and-a-koi-fish-instancing-datatexture/README.markdown
@@ -0,0 +1,5 @@
+# Flying lanterns and a Koi fish (instancing + DataTexture)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/prisoner849/pen/WNQNdpv](https://codepen.io/prisoner849/pen/WNQNdpv).
+
+The idea from Padmini Smith https://codepen.io/psmithux
diff --git a/flying-lanterns-and-a-koi-fish-instancing-datatexture/dist/index.html b/flying-lanterns-and-a-koi-fish-instancing-datatexture/dist/index.html
new file mode 100644
index 0000000..8289a17
--- /dev/null
+++ b/flying-lanterns-and-a-koi-fish-instancing-datatexture/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Flying lanterns and a Koi fish (instancing + DataTexture)</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/utils/BufferGeometryUtils.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/controls/OrbitControls.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/loaders/STLLoader.js"></script>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/flying-lanterns-and-a-koi-fish-instancing-datatexture/dist/script.js b/flying-lanterns-and-a-koi-fish-instancing-datatexture/dist/script.js
new file mode 100644
index 0000000..6fcd564
--- /dev/null
+++ b/flying-lanterns-and-a-koi-fish-instancing-datatexture/dist/script.js
@@ -0,0 +1,251 @@
+var scene = new THREE.Scene();
+var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 500);
+camera.position.set(0, -25, 80);
+var renderer = new THREE.WebGLRenderer({antialias: true});
+renderer.setClearColor(0x181005);
+renderer.setSize(innerWidth, innerHeight);
+document.body.appendChild(renderer.domElement);
+
+var controls = new THREE.OrbitControls(camera, renderer.domElement);
+controls.maxDistance = 150;
+
+// lanterns
+
+let geoms = [];
+let pts = [
+  new THREE.Vector2(0, 1. - 0),
+  new THREE.Vector2(0.25, 1. - 0),
+  new THREE.Vector2(0.25, 1. - 0.125),
+  new THREE.Vector2(0.45, 1. - 0.125),
+  new THREE.Vector2(0.45, 1. - 0.95)
+];
+var geom = new THREE.LatheBufferGeometry(pts, 20);
+geoms.push(geom);
+
+var geomLight = new THREE.CylinderBufferGeometry(0.1, 0.1, 0.05, 20);
+//geomLight.rotateX(Math.PI * 0.5);
+geoms.push(geomLight);
+
+var fullGeom = THREE.BufferGeometryUtils.mergeBufferGeometries(geoms);
+
+var instGeom = new THREE.InstancedBufferGeometry().copy(fullGeom);
+
+var num = 500;
+let instPos = []; //3
+let instSpeed = []; //1
+let instLight = []; // 2 (initial intensity, frequency)
+for (let i = 0; i < num; i++){
+  instPos.push( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 );
+  instSpeed.push( Math.random() * 0.25 + 1);
+  instLight.push( Math.PI + (Math.PI * Math.random()), Math.random() + 5);
+}
+instGeom.setAttribute("instPos", new THREE.InstancedBufferAttribute(new Float32Array(instPos), 3));
+instGeom.setAttribute("instSpeed", new THREE.InstancedBufferAttribute(new Float32Array(instSpeed), 1));
+instGeom.setAttribute("instLight", new THREE.InstancedBufferAttribute(new Float32Array(instPos), 2));
+
+var mat = new THREE.ShaderMaterial({
+  uniforms: {
+    uTime: {value: 0},
+    uLight: {value: new THREE.Color("red").multiplyScalar(1.5)},
+    uColor: {value: new THREE.Color("maroon").multiplyScalar(1)},
+    uFire: {value: new THREE.Color(1, 0.75, 0)}
+  },
+  vertexShader:`
+    uniform float uTime;
+
+    attribute vec3 instPos;
+    attribute float instSpeed;
+    attribute vec2 instLight;
+
+    varying vec2 vInstLight;
+    varying float vY;
+    
+    void main() {
+      
+      vInstLight = instLight;
+      vY = position.y;
+
+      vec3 pos = vec3(position) * 2.;
+      vec3 iPos = instPos * 200.;
+      
+      iPos.xz += vec2(
+        cos(instLight.x + instLight.y * uTime),
+        sin(instLight.x + instLight.y * uTime * fract(sin(instLight.x)))
+      );
+
+      iPos.y = mod(iPos.y + 100. + (uTime * instSpeed), 200.) - 100.;
+      pos += iPos;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
+    }
+`,
+  fragmentShader: `
+    uniform float uTime;
+    uniform vec3 uLight;
+    uniform vec3 uColor;
+    uniform vec3 uFire;
+
+    varying vec2 vInstLight;
+    varying float vY;
+    
+    void main() {
+      
+      vec3 col = vec3(0);
+      float t = vInstLight.x + (vInstLight.y * uTime * 10.);
+      float ts = sin(t * 3.14) * 0.5 + 0.5;
+      float tc = cos(t * 2.7) * 0.5 + 0.5;
+      float f = smoothstep(0.12, 0.12 + (ts + tc) * 0.25, vY);
+      float li = (0.5 + smoothstep(0., 1., ts * ts + tc * tc) * 0.5);
+      col = mix(uLight * li, uColor * (0.75 + li * 0.25), f);
+
+      col = mix(col, uFire, step(vY, 0.05) * (0.75 + li * 0.25));
+
+      gl_FragColor = vec4(col, 1);
+    }
+`,
+  side: THREE.DoubleSide
+});
+
+var lantern = new THREE.Mesh(instGeom, mat);
+scene.add(lantern);
+
+// Koi
+
+let oUs = [];
+
+let loader = new THREE.STLLoader();
+//https://clara.io/view/b47726c8-02cf-4eb5-b275-d9b2be591bad
+loader.load("https://cywarr.github.io/small-shop/fish.stl", objGeom => {
+  console.log(objGeom);
+  //objGeom.rotateX(-MathPI * 0.5);
+
+  // path
+  let baseVector = new THREE.Vector3(40, 0, 0);
+  let axis = new THREE.Vector3(0, 1, 0);
+  let cPts = [];
+  let cSegments = 6;
+  let cStep = Math.PI * 2 / cSegments;
+  for (let i = 0; i < cSegments; i++){
+    cPts.push(
+      new THREE.Vector3().copy(baseVector)
+      //.setLength(35 + (Math.random() - 0.5) * 5)
+      .applyAxisAngle(axis, cStep * i).setY(THREE.MathUtils.randFloat(-10, 10))
+    );
+  }
+  let curve = new THREE.CatmullRomCurve3(cPts);
+  curve.closed = true;
+
+  console.log(curve);
+
+  let numPoints = 511;
+  let cPoints = curve.getSpacedPoints(numPoints);
+  let cObjects = curve.computeFrenetFrames(numPoints, true);
+  console.log(cObjects);
+  let pGeom = new THREE.BufferGeometry().setFromPoints(cPoints);
+  let pMat = new THREE.LineBasicMaterial({color: "yellow"});
+  let pathLine = new THREE.Line(pGeom, pMat);
+  //scene.add(pathLine);
+
+  // data texture
+  let data = [];
+  cPoints.forEach( v => { data.push(v.x, v.y, v.z);} );
+  cObjects.binormals.forEach( v => { data.push(v.x, v.y, v.z);} );
+  cObjects.normals.forEach( v => { data.push(v.x, v.y, v.z);} );
+  cObjects.tangents.forEach( v => { data.push(v.x, v.y, v.z);} );
+
+  let dataArray = new Float32Array(data);
+
+  let tex = new THREE.DataTexture(dataArray, numPoints + 1, 4, THREE.RGBFormat, THREE.FloatType);
+  tex.magFilter = THREE.NearestFilter;
+  console.log(tex);
+  
+  objGeom.center();
+  objGeom.rotateX(-Math.PI * 0.5);
+  objGeom.scale(0.5, 0.5, 0.5);
+  let objBox = new THREE.Box3().setFromBufferAttribute(objGeom.getAttribute("position"));
+  let objSize = new THREE.Vector3();
+  objBox.getSize(objSize);
+  //objGeom.translate(0, 0, objBox.z);
+
+  objUniforms = {
+    uSpatialTexture: {value: tex},
+    uTextureSize: {value: new THREE.Vector2(numPoints + 1, 4)},
+    uTime: {value: 0},
+    uLengthRatio: {value: objSize.z / curve.cacheArcLengths[200]}, // more or less real lenght along the path
+    uObjSize: {value: objSize} // lenght
+  }
+  oUs.push(objUniforms);
+
+  let objMat = new THREE.MeshBasicMaterial({color: 0xff6600, wireframe: true});
+  objMat.onBeforeCompile = shader => {
+    shader.uniforms.uSpatialTexture = objUniforms.uSpatialTexture;
+    shader.uniforms.uTextureSize = objUniforms.uTextureSize;
+    shader.uniforms.uTime = objUniforms.uTime;
+    shader.uniforms.uLengthRatio = objUniforms.uLengthRatio;
+    shader.uniforms.uObjSize = objUniforms.uObjSize;
+
+    shader.vertexShader = `
+      uniform sampler2D uSpatialTexture;
+      uniform vec2 uTextureSize;
+      uniform float uTime;
+      uniform float uLengthRatio;
+      uniform vec3 uObjSize;
+
+      struct splineData {
+        vec3 point;
+        vec3 binormal;
+        vec3 normal;
+      };
+
+      splineData getSplineData(float t){
+        float step = 1. / uTextureSize.y;
+        float halfStep = step * 0.5;
+        splineData sd;
+        sd.point    = texture2D(uSpatialTexture, vec2(t, step * 0. + halfStep)).rgb;
+        sd.binormal = texture2D(uSpatialTexture, vec2(t, step * 1. + halfStep)).rgb;
+        sd.normal   = texture2D(uSpatialTexture, vec2(t, step * 2. + halfStep)).rgb;
+        return sd;
+      }
+  ` + shader.vertexShader;
+    shader.vertexShader = shader.vertexShader.replace(
+      `#include <begin_vertex>`,
+      `#include <begin_vertex>
+
+      vec3 pos = position;
+
+      float wStep = 1. / uTextureSize.x;
+      float hWStep = wStep * 0.5;
+
+      float d = pos.z / uObjSize.z;
+      float t = fract((uTime * 0.1) + (d * uLengthRatio));
+      float numPrev = floor(t / wStep);
+      float numNext = numPrev + 1.;
+      //numNext = numNext > (uTextureSize.x - 1.) ? 0. : numNext;
+      float tPrev = numPrev * wStep + hWStep;
+      float tNext = numNext * wStep + hWStep;
+      //float tDiff = tNext - tPrev;
+      splineData splinePrev = getSplineData(tPrev);
+      splineData splineNext = getSplineData(tNext);
+
+      float f = (t - tPrev) / wStep;
+      vec3 P = mix(splinePrev.point, splineNext.point, f);
+      vec3 B = mix(splinePrev.binormal, splineNext.binormal, f);
+      vec3 N = mix(splinePrev.normal, splineNext.normal, f);
+
+      transformed = P + (N * pos.x) + (B * pos.y);
+  `
+    );
+    //console.log(shader.vertexShader);
+  }
+  let obj = new THREE.Mesh(objGeom, objMat);
+  scene.add(obj);
+});
+
+
+var clock = new THREE.Clock();
+
+renderer.setAnimationLoop(() => {
+  let t = clock.getElapsedTime();
+  mat.uniforms.uTime.value = t;
+  oUs.forEach(ou => {ou.uTime.value = t;});
+  renderer.render(scene, camera);
+});
\ No newline at end of file
diff --git a/flying-lanterns-and-a-koi-fish-instancing-datatexture/dist/style.css b/flying-lanterns-and-a-koi-fish-instancing-datatexture/dist/style.css
new file mode 100644
index 0000000..98640a0
--- /dev/null
+++ b/flying-lanterns-and-a-koi-fish-instancing-datatexture/dist/style.css
@@ -0,0 +1,4 @@
+body {
+  overflow: hidden;
+  margin: 0;
+}
\ No newline at end of file
diff --git a/flying-lanterns-and-a-koi-fish-instancing-datatexture/license.txt b/flying-lanterns-and-a-koi-fish-instancing-datatexture/license.txt
new file mode 100644
index 0000000..ea3ea4d
--- /dev/null
+++ b/flying-lanterns-and-a-koi-fish-instancing-datatexture/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Paul (https://codepen.io/prisoner849/pen/WNQNdpv)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/flying-lanterns-and-a-koi-fish-instancing-datatexture/src/index.html b/flying-lanterns-and-a-koi-fish-instancing-datatexture/src/index.html
new file mode 100644
index 0000000..199e8f3
--- /dev/null
+++ b/flying-lanterns-and-a-koi-fish-instancing-datatexture/src/index.html
@@ -0,0 +1,4 @@
+<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/utils/BufferGeometryUtils.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/controls/OrbitControls.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/loaders/STLLoader.js"></script>
\ No newline at end of file
diff --git a/flying-lanterns-and-a-koi-fish-instancing-datatexture/src/script.js b/flying-lanterns-and-a-koi-fish-instancing-datatexture/src/script.js
new file mode 100644
index 0000000..0f2ae24
--- /dev/null
+++ b/flying-lanterns-and-a-koi-fish-instancing-datatexture/src/script.js
@@ -0,0 +1,251 @@
+var scene = new THREE.Scene();
+var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 500);
+camera.position.set(0, -25, 80);
+var renderer = new THREE.WebGLRenderer({antialias: true});
+renderer.setClearColor(0x181005);
+renderer.setSize(innerWidth, innerHeight);
+document.body.appendChild(renderer.domElement);
+
+var controls = new THREE.OrbitControls(camera, renderer.domElement);
+controls.maxDistance = 150;
+
+// lanterns
+
+let geoms = [];
+let pts = [
+  new THREE.Vector2(0, 1. - 0),
+  new THREE.Vector2(0.25, 1. - 0),
+  new THREE.Vector2(0.25, 1. - 0.125),
+  new THREE.Vector2(0.45, 1. - 0.125),
+  new THREE.Vector2(0.45, 1. - 0.95)
+];
+var geom = new THREE.LatheBufferGeometry(pts, 20);
+geoms.push(geom);
+
+var geomLight = new THREE.CylinderBufferGeometry(0.1, 0.1, 0.05, 20);
+//geomLight.rotateX(Math.PI * 0.5);
+geoms.push(geomLight);
+
+var fullGeom = THREE.BufferGeometryUtils.mergeBufferGeometries(geoms);
+
+var instGeom = new THREE.InstancedBufferGeometry().copy(fullGeom);
+
+var num = 500;
+let instPos = []; //3
+let instSpeed = []; //1
+let instLight = []; // 2 (initial intensity, frequency)
+for (let i = 0; i < num; i++){
+  instPos.push( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 );
+  instSpeed.push( Math.random() * 0.25 + 1);
+  instLight.push( Math.PI + (Math.PI * Math.random()), Math.random() + 5);
+}
+instGeom.setAttribute("instPos", new THREE.InstancedBufferAttribute(new Float32Array(instPos), 3));
+instGeom.setAttribute("instSpeed", new THREE.InstancedBufferAttribute(new Float32Array(instSpeed), 1));
+instGeom.setAttribute("instLight", new THREE.InstancedBufferAttribute(new Float32Array(instPos), 2));
+
+var mat = new THREE.ShaderMaterial({
+  uniforms: {
+    uTime: {value: 0},
+    uLight: {value: new THREE.Color("red").multiplyScalar(1.5)},
+    uColor: {value: new THREE.Color("maroon").multiplyScalar(1)},
+    uFire: {value: new THREE.Color(1, 0.75, 0)}
+  },
+  vertexShader:`
+    uniform float uTime;
+
+    attribute vec3 instPos;
+    attribute float instSpeed;
+    attribute vec2 instLight;
+
+    varying vec2 vInstLight;
+    varying float vY;
+    
+    void main() {
+      
+      vInstLight = instLight;
+      vY = position.y;
+
+      vec3 pos = vec3(position) * 2.;
+      vec3 iPos = instPos * 200.;
+      
+      iPos.xz += vec2(
+        cos(instLight.x + instLight.y * uTime),
+        sin(instLight.x + instLight.y * uTime * fract(sin(instLight.x)))
+      );
+
+      iPos.y = mod(iPos.y + 100. + (uTime * instSpeed), 200.) - 100.;
+      pos += iPos;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
+    }
+`,
+  fragmentShader: `
+    uniform float uTime;
+    uniform vec3 uLight;
+    uniform vec3 uColor;
+    uniform vec3 uFire;
+
+    varying vec2 vInstLight;
+    varying float vY;
+    
+    void main() {
+      
+      vec3 col = vec3(0);
+      float t = vInstLight.x + (vInstLight.y * uTime * 10.);
+      float ts = sin(t * 3.14) * 0.5 + 0.5;
+      float tc = cos(t * 2.7) * 0.5 + 0.5;
+      float f = smoothstep(0.12, 0.12 + (ts + tc) * 0.25, vY);
+      float li = (0.5 + smoothstep(0., 1., ts * ts + tc * tc) * 0.5);
+      col = mix(uLight * li, uColor * (0.75 + li * 0.25), f);
+
+      col = mix(col, uFire, step(vY, 0.05) * (0.75 + li * 0.25));
+
+      gl_FragColor = vec4(col, 1);
+    }
+`,
+  side: THREE.DoubleSide
+});
+
+var lantern = new THREE.Mesh(instGeom, mat);
+scene.add(lantern);
+
+// Koi
+
+let oUs = [];
+
+let loader = new THREE.STLLoader();
+//https://clara.io/view/b47726c8-02cf-4eb5-b275-d9b2be591bad
+loader.load("https://cywarr.github.io/small-shop/fish.stl", objGeom => {
+  console.log(objGeom);
+  //objGeom.rotateX(-MathPI * 0.5);
+
+  // path
+  let baseVector = new THREE.Vector3(40, 0, 0);
+  let axis = new THREE.Vector3(0, 1, 0);
+  let cPts = [];
+  let cSegments = 6;
+  let cStep = Math.PI * 2 / cSegments;
+  for (let i = 0; i < cSegments; i++){
+    cPts.push(
+      new THREE.Vector3().copy(baseVector)
+      //.setLength(35 + (Math.random() - 0.5) * 5)
+      .applyAxisAngle(axis, cStep * i).setY(THREE.MathUtils.randFloat(-10, 10))
+    );
+  }
+  let curve = new THREE.CatmullRomCurve3(cPts);
+  curve.closed = true;
+
+  console.log(curve);
+
+  let numPoints = 511;
+  let cPoints = curve.getSpacedPoints(numPoints);
+  let cObjects = curve.computeFrenetFrames(numPoints, true);
+  console.log(cObjects);
+  let pGeom = new THREE.BufferGeometry().setFromPoints(cPoints);
+  let pMat = new THREE.LineBasicMaterial({color: "yellow"});
+  let pathLine = new THREE.Line(pGeom, pMat);
+  //scene.add(pathLine);
+
+  // data texture
+  let data = [];
+  cPoints.forEach( v => { data.push(v.x, v.y, v.z);} );
+  cObjects.binormals.forEach( v => { data.push(v.x, v.y, v.z);} );
+  cObjects.normals.forEach( v => { data.push(v.x, v.y, v.z);} );
+  cObjects.tangents.forEach( v => { data.push(v.x, v.y, v.z);} );
+
+  let dataArray = new Float32Array(data);
+
+  let tex = new THREE.DataTexture(dataArray, numPoints + 1, 4, THREE.RGBFormat, THREE.FloatType);
+  tex.magFilter = THREE.NearestFilter;
+  console.log(tex);
+  
+  objGeom.center();
+  objGeom.rotateX(-Math.PI * 0.5);
+  objGeom.scale(0.5, 0.5, 0.5);
+  let objBox = new THREE.Box3().setFromBufferAttribute(objGeom.getAttribute("position"));
+  let objSize = new THREE.Vector3();
+  objBox.getSize(objSize);
+  //objGeom.translate(0, 0, objBox.z);
+
+  objUniforms = {
+    uSpatialTexture: {value: tex},
+    uTextureSize: {value: new THREE.Vector2(numPoints + 1, 4)},
+    uTime: {value: 0},
+    uLengthRatio: {value: objSize.z / curve.cacheArcLengths[200]}, // more or less real lenght along the path
+    uObjSize: {value: objSize} // lenght
+  }
+  oUs.push(objUniforms);
+
+  let objMat = new THREE.MeshBasicMaterial({color: 0xff6600, wireframe: true});
+  objMat.onBeforeCompile = shader => {
+    shader.uniforms.uSpatialTexture = objUniforms.uSpatialTexture;
+    shader.uniforms.uTextureSize = objUniforms.uTextureSize;
+    shader.uniforms.uTime = objUniforms.uTime;
+    shader.uniforms.uLengthRatio = objUniforms.uLengthRatio;
+    shader.uniforms.uObjSize = objUniforms.uObjSize;
+
+    shader.vertexShader = `
+      uniform sampler2D uSpatialTexture;
+      uniform vec2 uTextureSize;
+      uniform float uTime;
+      uniform float uLengthRatio;
+      uniform vec3 uObjSize;
+
+      struct splineData {
+        vec3 point;
+        vec3 binormal;
+        vec3 normal;
+      };
+
+      splineData getSplineData(float t){
+        float step = 1. / uTextureSize.y;
+        float halfStep = step * 0.5;
+        splineData sd;
+        sd.point    = texture2D(uSpatialTexture, vec2(t, step * 0. + halfStep)).rgb;
+        sd.binormal = texture2D(uSpatialTexture, vec2(t, step * 1. + halfStep)).rgb;
+        sd.normal   = texture2D(uSpatialTexture, vec2(t, step * 2. + halfStep)).rgb;
+        return sd;
+      }
+  ` + shader.vertexShader;
+    shader.vertexShader = shader.vertexShader.replace(
+      `#include <begin_vertex>`,
+      `#include <begin_vertex>
+
+      vec3 pos = position;
+
+      float wStep = 1. / uTextureSize.x;
+      float hWStep = wStep * 0.5;
+
+      float d = pos.z / uObjSize.z;
+      float t = fract((uTime * 0.1) + (d * uLengthRatio));
+      float numPrev = floor(t / wStep);
+      float numNext = numPrev + 1.;
+      //numNext = numNext > (uTextureSize.x - 1.) ? 0. : numNext;
+      float tPrev = numPrev * wStep + hWStep;
+      float tNext = numNext * wStep + hWStep;
+      //float tDiff = tNext - tPrev;
+      splineData splinePrev = getSplineData(tPrev);
+      splineData splineNext = getSplineData(tNext);
+
+      float f = (t - tPrev) / wStep;
+      vec3 P = mix(splinePrev.point, splineNext.point, f);
+      vec3 B = mix(splinePrev.binormal, splineNext.binormal, f);
+      vec3 N = mix(splinePrev.normal, splineNext.normal, f);
+
+      transformed = P + (N * pos.x) + (B * pos.y);
+  `
+    );
+    //console.log(shader.vertexShader);
+  }
+  let obj = new THREE.Mesh(objGeom, objMat);
+  scene.add(obj);
+});
+
+
+var clock = new THREE.Clock();
+
+renderer.setAnimationLoop(() => {
+  let t = clock.getElapsedTime();
+  mat.uniforms.uTime.value = t;
+  oUs.forEach(ou => {ou.uTime.value = t;});
+  renderer.render(scene, camera);
+});
diff --git a/flying-lanterns-and-a-koi-fish-instancing-datatexture/src/style.css b/flying-lanterns-and-a-koi-fish-instancing-datatexture/src/style.css
new file mode 100644
index 0000000..98640a0
--- /dev/null
+++ b/flying-lanterns-and-a-koi-fish-instancing-datatexture/src/style.css
@@ -0,0 +1,4 @@
+body {
+  overflow: hidden;
+  margin: 0;
+}
\ No newline at end of file
diff --git a/focusss-v2/README.markdown b/focusss-v2/README.markdown
new file mode 100644
index 0000000..9b41b86
--- /dev/null
+++ b/focusss-v2/README.markdown
@@ -0,0 +1,5 @@
+# Focusss v2
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/hakimel/pen/zYzdJvK](https://codepen.io/hakimel/pen/zYzdJvK).
+
+
diff --git a/focusss-v2/dist/index.html b/focusss-v2/dist/index.html
new file mode 100644
index 0000000..48b370d
--- /dev/null
+++ b/focusss-v2/dist/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Focusss v2</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas></canvas>
+
+<div class="form-wrapper">
+  <form onsubmit="return false;">
+    <hgroup>
+      <h1>Focusss</h1>
+      <h3>Form focus without outlines by <a href="https://twitter.com/hakimel">@hakimel</a>.</h3>
+    </hgroup>
+
+    <label for="name">Name</label>
+    <input type="text" id="name">
+    
+    <label for="email">Email</label>
+    <input type="email" id="email">
+    
+    <label for="password">Password</label>
+    <input type="password" id="password">
+    
+    <div class="checkbox">
+      <input type="checkbox" id="check1">
+      <label for="check1">I accept the terms</label><br>
+    </div>
+    
+    <div class="checkbox">
+      <input type="checkbox" id="check2">
+      <label for="check2">Pineapple on pizza is a crime</label><br>
+    </div>
+    
+    <button>Submit</button>
+  </form>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/focusss-v2/dist/script.js b/focusss-v2/dist/script.js
new file mode 100644
index 0000000..bcdd0b4
--- /dev/null
+++ b/focusss-v2/dist/script.js
@@ -0,0 +1,198 @@
+const SPACING = 16;
+const RADIUS = 8;
+const CHECK_RADIUS = RADIUS * 1.8;
+const CHECK_SIZE = 10;
+const CHECK_LENGTH = Math.ceil( 10 * 1.8 );
+const TAIL_LENGTH = 8;
+
+const rootStyles = getComputedStyle( document.documentElement );
+const HEAD_COLOR = rootStyles.getPropertyValue( '--focus-head-color' );
+const TAIL_COLOR = rootStyles.getPropertyValue( '--focus-tail-color' );
+
+const head = { r: RADIUS, tr: RADIUS };
+const tail = [];
+const checkmarks = new Map();
+
+const canvas = document.querySelector( 'canvas' );
+const context = canvas.getContext( '2d' );
+
+let width, height, dpr, currentFocus;
+
+document.body.addEventListener( 'focus', event => focus( event.target ), true );
+document.body.addEventListener( 'input', event => validate( event.target ), true );
+document.querySelectorAll( 'input:not([type="checkbox"])' ).forEach( input => {
+  checkmarks.set( input, { v: 0, tv: 0 } );
+});
+
+function resize() {
+
+  dpr = window.devicePixelRatio || 1;
+
+	width = window.innerWidth;
+	height = window.innerHeight;
+
+	canvas.width = width * dpr;
+	canvas.height = height * dpr;
+
+	context.scale( dpr, dpr );
+
+}
+
+function animate() {
+
+  paint();
+
+  requestAnimationFrame( animate );
+
+}
+
+function paint() {
+
+  context.clearRect( 0, 0, width, height );
+
+  if( currentFocus ) {
+
+    // Add to the tail
+    tail.push( { ...head } );
+    if( tail.length > TAIL_LENGTH ) tail.shift();
+
+    // Paint the tail
+    if( tail.length > 3 ) {
+
+      context.beginPath();
+      context.moveTo( tail[0].x, tail[0].y );
+
+      for( var i = 2; i < tail.length - 2; i++ ) {
+        const p1 = tail[i];
+        const p2 = tail[i+1];
+
+        context.quadraticCurveTo(
+          p1.x, p1.y,
+          ( p1.x + p2.x ) / 2,
+          ( p1.y + p2.y ) / 2
+        );
+      }
+
+      context.quadraticCurveTo(
+        tail[i].x, tail[i].y,
+        tail[i+1].x, tail[i+1].y
+      );
+
+      context.lineWidth = RADIUS;
+      context.lineCap = 'round';
+      context.strokeStyle = TAIL_COLOR;
+      context.stroke();
+    }
+
+    head.tr = currentFocus.classList.contains( 'valid' ) ? CHECK_RADIUS : RADIUS;
+  
+    // Animate the head towards its target values
+    head.x += ( head.tx - head.x ) * 0.2;
+    head.y += ( head.ty - head.y ) * 0.2;
+    head.r += ( head.tr - head.r ) * 0.2;
+
+    head.vx *= 0.8;
+    head.x += head.vx;
+
+    context.beginPath();
+    context.arc( head.x, head.y, head.r, 0, Math.PI*2 );
+    context.fillStyle = HEAD_COLOR;
+    context.fill();
+
+  }
+  
+  // Paint checkmarks
+  for( [inputElement, checkmark] of checkmarks ) {
+    checkmark.v += ( checkmark.tv - checkmark.v ) * 0.2;
+    
+    if( checkmark.v > 0.05 ) {
+      const midX = inputElement.offsetLeft - CHECK_SIZE/2 - SPACING - 3;
+      const midY = inputElement.offsetTop + inputElement.offsetHeight/2 + 1;
+
+      context.save();
+      context.beginPath();
+      
+      context.moveTo( midX + CHECK_SIZE/2, midY - CHECK_SIZE/2 );
+      context.lineTo( midX - 1, midY + CHECK_SIZE/2 - 1 );
+      context.lineTo( midX - CHECK_SIZE/2, midY ); 
+
+      context.lineWidth = 3;
+      context.lineCap = 'round';
+      context.lineJoin = 'round'; 
+      context.setLineDash([CHECK_LENGTH, CHECK_LENGTH]);
+      context.lineDashOffset = CHECK_LENGTH + Math.round( checkmark.v * CHECK_LENGTH );
+  
+      context.globalCompositeOperation = 'lighter';
+      context.strokeStyle = '#555';
+      context.stroke();
+
+      context.globalCompositeOperation = 'overlay';
+      context.strokeStyle = '#fff';
+      context.stroke(); 
+      
+      context.restore();
+      
+    }
+  }
+
+}
+
+function focus( element ) {
+
+  const previousFocus = currentFocus;
+
+  if( element ) currentFocus = element;
+  
+  if( !currentFocus || !currentFocus.matches( 'input, button' ) ) return;
+
+  head.tx = currentFocus.offsetLeft - SPACING - RADIUS;
+  head.ty = currentFocus.offsetTop + currentFocus.offsetHeight/2;
+  
+  // Skip animation on first focus
+  if( typeof head.x !== 'number' ) {
+    head.x = head.tx;
+    head.y = head.ty;
+  }
+  
+  // Bounce leftward when focus changes
+  if( currentFocus !== previousFocus ) {
+    head.vx = -8 - Math.abs( head.tx - head.x ) / 5;
+  }
+
+}
+
+function validate( element ) {
+  
+  let valid = false;
+  
+  switch( element.getAttribute( 'type' ) ) {
+    case 'email': valid = /(.+)@(.+){2,}\.(.+){2,}/.test( element.value ); break;
+    case 'password': valid = element.value.length > 6; break;
+    default: valid = element.value.length > 0; break;
+  }
+
+  element.classList.toggle( 'valid', valid );
+  
+  checkmarks.get( element ).tv = valid ? 1 : 0;   
+  
+}
+
+resize();
+animate();
+
+window.addEventListener( 'resize', () => {
+  requestAnimationFrame( () => {
+    resize();
+    focus();
+    paint();
+  } );
+} );
+
+window.addEventListener( 'scroll', () => {
+  requestAnimationFrame( () => {
+    focus();
+    paint();
+  } );
+} );
+
+// document.querySelectorAll( 'input' )[0].focus();
\ No newline at end of file
diff --git a/focusss-v2/dist/style.css b/focusss-v2/dist/style.css
new file mode 100644
index 0000000..a780bf4
--- /dev/null
+++ b/focusss-v2/dist/style.css
@@ -0,0 +1,95 @@
+* { box-sizing: border-box; }
+
+:root {
+  --focus-head-color: hsl(218deg 92% 57%);
+  --focus-tail-color: hsl(218deg 92% 50%);
+}
+
+html, body {
+  font-size: 20px;
+  height: 100%;
+  margin: 0;
+  background-color: #fff;
+  font-family: Roboto, sans-serif;
+}
+
+.form-wrapper {
+  position: relative;
+  display: grid;
+  height: 100%;
+  margin: 0;
+  place-items: center;
+  max-width: 100%;
+  padding: 2.5rem;
+}
+
+form {
+  margin: auto;
+  width: 100%;
+  max-width: 400px;
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0 0 0.5rem 0;
+}
+h3 {
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0 0 2rem 0;
+}
+a {
+  color: var(--focus-head-color);
+  text-decoration: none;
+}
+
+label {
+  color: #444;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"] {
+  display: block;
+  width: 100%;
+  margin: 0.5rem 0 1rem 0;
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 0;
+  border-radius: 0.125rem 0.25rem;
+  background-color: hsl(222, 20%, 95%);
+}
+
+.checkbox {
+  margin: 0.5rem 0;
+}
+
+input[type="checkbox"] {
+  margin-right: 0.5rem;
+}
+
+button {
+  display: block;
+  padding: 0.5rem 1rem;
+  border: 0;
+  border-radius: 0.125rem 0.25rem;
+  background-color: var(--focus-head-color);
+  color: #fff;
+  margin: 2rem 0 0 auto;
+}
+
+input:focus,
+button:focus{
+  outline: 0;
+}
+
+canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/focusss-v2/license.txt b/focusss-v2/license.txt
new file mode 100644
index 0000000..bedf500
--- /dev/null
+++ b/focusss-v2/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Hakim El Hattab (https://codepen.io/hakimel/pen/zYzdJvK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/focusss-v2/src/index.html b/focusss-v2/src/index.html
new file mode 100644
index 0000000..5939c52
--- /dev/null
+++ b/focusss-v2/src/index.html
@@ -0,0 +1,31 @@
+<canvas></canvas>
+
+<div class="form-wrapper">
+  <form onsubmit="return false;">
+    <hgroup>
+      <h1>Focusss</h1>
+      <h3>Form focus without outlines by <a href="https://twitter.com/hakimel">@hakimel</a>.</h3>
+    </hgroup>
+
+    <label for="name">Name</label>
+    <input type="text" id="name">
+    
+    <label for="email">Email</label>
+    <input type="email" id="email">
+    
+    <label for="password">Password</label>
+    <input type="password" id="password">
+    
+    <div class="checkbox">
+      <input type="checkbox" id="check1">
+      <label for="check1">I accept the terms</label><br>
+    </div>
+    
+    <div class="checkbox">
+      <input type="checkbox" id="check2">
+      <label for="check2">Pineapple on pizza is a crime</label><br>
+    </div>
+    
+    <button>Submit</button>
+  </form>
+</div>
\ No newline at end of file
diff --git a/focusss-v2/src/script.js b/focusss-v2/src/script.js
new file mode 100644
index 0000000..bcdd0b4
--- /dev/null
+++ b/focusss-v2/src/script.js
@@ -0,0 +1,198 @@
+const SPACING = 16;
+const RADIUS = 8;
+const CHECK_RADIUS = RADIUS * 1.8;
+const CHECK_SIZE = 10;
+const CHECK_LENGTH = Math.ceil( 10 * 1.8 );
+const TAIL_LENGTH = 8;
+
+const rootStyles = getComputedStyle( document.documentElement );
+const HEAD_COLOR = rootStyles.getPropertyValue( '--focus-head-color' );
+const TAIL_COLOR = rootStyles.getPropertyValue( '--focus-tail-color' );
+
+const head = { r: RADIUS, tr: RADIUS };
+const tail = [];
+const checkmarks = new Map();
+
+const canvas = document.querySelector( 'canvas' );
+const context = canvas.getContext( '2d' );
+
+let width, height, dpr, currentFocus;
+
+document.body.addEventListener( 'focus', event => focus( event.target ), true );
+document.body.addEventListener( 'input', event => validate( event.target ), true );
+document.querySelectorAll( 'input:not([type="checkbox"])' ).forEach( input => {
+  checkmarks.set( input, { v: 0, tv: 0 } );
+});
+
+function resize() {
+
+  dpr = window.devicePixelRatio || 1;
+
+	width = window.innerWidth;
+	height = window.innerHeight;
+
+	canvas.width = width * dpr;
+	canvas.height = height * dpr;
+
+	context.scale( dpr, dpr );
+
+}
+
+function animate() {
+
+  paint();
+
+  requestAnimationFrame( animate );
+
+}
+
+function paint() {
+
+  context.clearRect( 0, 0, width, height );
+
+  if( currentFocus ) {
+
+    // Add to the tail
+    tail.push( { ...head } );
+    if( tail.length > TAIL_LENGTH ) tail.shift();
+
+    // Paint the tail
+    if( tail.length > 3 ) {
+
+      context.beginPath();
+      context.moveTo( tail[0].x, tail[0].y );
+
+      for( var i = 2; i < tail.length - 2; i++ ) {
+        const p1 = tail[i];
+        const p2 = tail[i+1];
+
+        context.quadraticCurveTo(
+          p1.x, p1.y,
+          ( p1.x + p2.x ) / 2,
+          ( p1.y + p2.y ) / 2
+        );
+      }
+
+      context.quadraticCurveTo(
+        tail[i].x, tail[i].y,
+        tail[i+1].x, tail[i+1].y
+      );
+
+      context.lineWidth = RADIUS;
+      context.lineCap = 'round';
+      context.strokeStyle = TAIL_COLOR;
+      context.stroke();
+    }
+
+    head.tr = currentFocus.classList.contains( 'valid' ) ? CHECK_RADIUS : RADIUS;
+  
+    // Animate the head towards its target values
+    head.x += ( head.tx - head.x ) * 0.2;
+    head.y += ( head.ty - head.y ) * 0.2;
+    head.r += ( head.tr - head.r ) * 0.2;
+
+    head.vx *= 0.8;
+    head.x += head.vx;
+
+    context.beginPath();
+    context.arc( head.x, head.y, head.r, 0, Math.PI*2 );
+    context.fillStyle = HEAD_COLOR;
+    context.fill();
+
+  }
+  
+  // Paint checkmarks
+  for( [inputElement, checkmark] of checkmarks ) {
+    checkmark.v += ( checkmark.tv - checkmark.v ) * 0.2;
+    
+    if( checkmark.v > 0.05 ) {
+      const midX = inputElement.offsetLeft - CHECK_SIZE/2 - SPACING - 3;
+      const midY = inputElement.offsetTop + inputElement.offsetHeight/2 + 1;
+
+      context.save();
+      context.beginPath();
+      
+      context.moveTo( midX + CHECK_SIZE/2, midY - CHECK_SIZE/2 );
+      context.lineTo( midX - 1, midY + CHECK_SIZE/2 - 1 );
+      context.lineTo( midX - CHECK_SIZE/2, midY ); 
+
+      context.lineWidth = 3;
+      context.lineCap = 'round';
+      context.lineJoin = 'round'; 
+      context.setLineDash([CHECK_LENGTH, CHECK_LENGTH]);
+      context.lineDashOffset = CHECK_LENGTH + Math.round( checkmark.v * CHECK_LENGTH );
+  
+      context.globalCompositeOperation = 'lighter';
+      context.strokeStyle = '#555';
+      context.stroke();
+
+      context.globalCompositeOperation = 'overlay';
+      context.strokeStyle = '#fff';
+      context.stroke(); 
+      
+      context.restore();
+      
+    }
+  }
+
+}
+
+function focus( element ) {
+
+  const previousFocus = currentFocus;
+
+  if( element ) currentFocus = element;
+  
+  if( !currentFocus || !currentFocus.matches( 'input, button' ) ) return;
+
+  head.tx = currentFocus.offsetLeft - SPACING - RADIUS;
+  head.ty = currentFocus.offsetTop + currentFocus.offsetHeight/2;
+  
+  // Skip animation on first focus
+  if( typeof head.x !== 'number' ) {
+    head.x = head.tx;
+    head.y = head.ty;
+  }
+  
+  // Bounce leftward when focus changes
+  if( currentFocus !== previousFocus ) {
+    head.vx = -8 - Math.abs( head.tx - head.x ) / 5;
+  }
+
+}
+
+function validate( element ) {
+  
+  let valid = false;
+  
+  switch( element.getAttribute( 'type' ) ) {
+    case 'email': valid = /(.+)@(.+){2,}\.(.+){2,}/.test( element.value ); break;
+    case 'password': valid = element.value.length > 6; break;
+    default: valid = element.value.length > 0; break;
+  }
+
+  element.classList.toggle( 'valid', valid );
+  
+  checkmarks.get( element ).tv = valid ? 1 : 0;   
+  
+}
+
+resize();
+animate();
+
+window.addEventListener( 'resize', () => {
+  requestAnimationFrame( () => {
+    resize();
+    focus();
+    paint();
+  } );
+} );
+
+window.addEventListener( 'scroll', () => {
+  requestAnimationFrame( () => {
+    focus();
+    paint();
+  } );
+} );
+
+// document.querySelectorAll( 'input' )[0].focus();
\ No newline at end of file
diff --git a/focusss-v2/src/style.css b/focusss-v2/src/style.css
new file mode 100644
index 0000000..a780bf4
--- /dev/null
+++ b/focusss-v2/src/style.css
@@ -0,0 +1,95 @@
+* { box-sizing: border-box; }
+
+:root {
+  --focus-head-color: hsl(218deg 92% 57%);
+  --focus-tail-color: hsl(218deg 92% 50%);
+}
+
+html, body {
+  font-size: 20px;
+  height: 100%;
+  margin: 0;
+  background-color: #fff;
+  font-family: Roboto, sans-serif;
+}
+
+.form-wrapper {
+  position: relative;
+  display: grid;
+  height: 100%;
+  margin: 0;
+  place-items: center;
+  max-width: 100%;
+  padding: 2.5rem;
+}
+
+form {
+  margin: auto;
+  width: 100%;
+  max-width: 400px;
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0 0 0.5rem 0;
+}
+h3 {
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0 0 2rem 0;
+}
+a {
+  color: var(--focus-head-color);
+  text-decoration: none;
+}
+
+label {
+  color: #444;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"] {
+  display: block;
+  width: 100%;
+  margin: 0.5rem 0 1rem 0;
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 0;
+  border-radius: 0.125rem 0.25rem;
+  background-color: hsl(222, 20%, 95%);
+}
+
+.checkbox {
+  margin: 0.5rem 0;
+}
+
+input[type="checkbox"] {
+  margin-right: 0.5rem;
+}
+
+button {
+  display: block;
+  padding: 0.5rem 1rem;
+  border: 0;
+  border-radius: 0.125rem 0.25rem;
+  background-color: var(--focus-head-color);
+  color: #fff;
+  margin: 2rem 0 0 auto;
+}
+
+input:focus,
+button:focus{
+  outline: 0;
+}
+
+canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/folder-animation-using-scss-iteration/README.markdown b/folder-animation-using-scss-iteration/README.markdown
new file mode 100644
index 0000000..8069e43
--- /dev/null
+++ b/folder-animation-using-scss-iteration/README.markdown
@@ -0,0 +1,5 @@
+# 📁Folder 📁 Animation using scss iteration
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/thamaragerigr/pen/poyEbmJ](https://codepen.io/thamaragerigr/pen/poyEbmJ).
+
+
diff --git a/folder-animation-using-scss-iteration/dist/index.html b/folder-animation-using-scss-iteration/dist/index.html
new file mode 100644
index 0000000..69edb79
--- /dev/null
+++ b/folder-animation-using-scss-iteration/dist/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 📁Folder 📁 Animation using scss iteration</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="folder">
+  <div class="paper one"></div>
+  <div class="paper two"></div>
+  <div class="paper three"></div>
+  <div class="paper four"></div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/folder-animation-using-scss-iteration/dist/script.js b/folder-animation-using-scss-iteration/dist/script.js
new file mode 100644
index 0000000..846044f
--- /dev/null
+++ b/folder-animation-using-scss-iteration/dist/script.js
@@ -0,0 +1 @@
+/*Nothing to see here :)*/
\ No newline at end of file
diff --git a/folder-animation-using-scss-iteration/dist/style.css b/folder-animation-using-scss-iteration/dist/style.css
new file mode 100644
index 0000000..d86f22a
--- /dev/null
+++ b/folder-animation-using-scss-iteration/dist/style.css
@@ -0,0 +1,74 @@
+body {
+  background-color: #1e1f26;
+}
+body .folder {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  background-color: #FFD485;
+  width: 200px;
+  height: 150px;
+  border-radius: 10px;
+}
+body .folder:before {
+  width: 55px;
+  height: 25px;
+  border-radius: 5px;
+  content: '';
+  background-color: #FFD485;
+  position: absolute;
+  top: -10px;
+  left: 0px;
+}
+body .folder:after {
+  display: block;
+  width: 200px;
+  height: 150px;
+  border-radius: 10px;
+  content: '';
+  transform: skew(0deg);
+  background-color: #ffe1a8;
+  transition: all .2s;
+}
+body .folder .paper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  background-color: whitesmoke;
+  width: 190px;
+  height: 140px;
+  transition: all .2s;
+}
+body .folder .paper.one {
+  background-color: #ffadad;
+}
+body .folder .paper.two {
+  background-color: #ffd6a5;
+}
+body .folder .paper.three {
+  background-color: #fdffb6;
+}
+body .folder .paper.four {
+  background-color: #9bf6ff;
+}
+body .folder:hover:after {
+  transform: skew(-20deg);
+  margin-left: 25px;
+}
+body .folder:hover .paper:nth-child(1) {
+  transform: rotate(10deg) translate(-80px, -80px);
+}
+body .folder:hover .paper:nth-child(2) {
+  transform: rotate(20deg) translate(-80px, -80px);
+}
+body .folder:hover .paper:nth-child(3) {
+  transform: rotate(30deg) translate(-80px, -80px);
+}
+body .folder:hover .paper:nth-child(4) {
+  transform: rotate(40deg) translate(-80px, -80px);
+}
\ No newline at end of file
diff --git a/folder-animation-using-scss-iteration/license.txt b/folder-animation-using-scss-iteration/license.txt
new file mode 100644
index 0000000..f03c378
--- /dev/null
+++ b/folder-animation-using-scss-iteration/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Thamara (https://codepen.io/thamaragerigr/pen/poyEbmJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/folder-animation-using-scss-iteration/src/index.html b/folder-animation-using-scss-iteration/src/index.html
new file mode 100644
index 0000000..8e505f6
--- /dev/null
+++ b/folder-animation-using-scss-iteration/src/index.html
@@ -0,0 +1,6 @@
+<div class="folder">
+  <div class="paper one"></div>
+  <div class="paper two"></div>
+  <div class="paper three"></div>
+  <div class="paper four"></div>
+</div>
\ No newline at end of file
diff --git a/folder-animation-using-scss-iteration/src/script.js b/folder-animation-using-scss-iteration/src/script.js
new file mode 100644
index 0000000..846044f
--- /dev/null
+++ b/folder-animation-using-scss-iteration/src/script.js
@@ -0,0 +1 @@
+/*Nothing to see here :)*/
\ No newline at end of file
diff --git a/folder-animation-using-scss-iteration/src/style.scss b/folder-animation-using-scss-iteration/src/style.scss
new file mode 100644
index 0000000..ef0fa15
--- /dev/null
+++ b/folder-animation-using-scss-iteration/src/style.scss
@@ -0,0 +1,78 @@
+$papers: 4;
+$colors:( 
+  "one":#ffadad,
+  "two":#ffd6a5,
+  "three":#fdffb6,
+  "four": #9bf6ff
+);
+  
+body {
+  background-color: #1e1f26;
+  //back side of the folder
+  .folder{
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-right: -50%;
+    transform: translate(-50%, -50%);
+    background-color: #FFD485;
+    width: 200px;
+    height: 150px;
+    border-radius: 10px;
+    //folder label
+    &:before {
+      width: 55px;
+      height: 25px;
+      border-radius: 5px;
+      content: '';
+      background-color: #FFD485;
+      position: absolute;
+      top: -10px;
+      left: 0px;
+    }
+    //front side of the folder
+    &:after {
+      display: block;
+      width: 200px;
+      height: 150px;
+      border-radius: 10px;
+      content: '';
+      transform: skew(0deg);
+      background-color: #ffe1a8;
+      transition: all .2s;
+    }
+    
+    .paper {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-right: -50%;
+      transform: translate(-50%, -50%);
+      background-color: whitesmoke;
+      width: 190px;
+      height: 140px;
+      transition: all .2s;
+      //adding bg color for each paper div
+      @each $color, $i in $colors {
+         &.#{$color} {
+             background-color: $i;
+         }	
+      }
+    }
+    
+    &:hover{
+      //adding front lapel of folder animation
+      &:after {
+        transform: skew(-20deg);
+        margin-left:25px;
+      }
+      //adding paper animation
+      @for $i from 1 through $papers {
+        .paper:nth-child(#{$i}) {
+            transform: rotate(#{$i}0deg) translate(-80px, -80px);
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/folding-ticket-detail/README.markdown b/folding-ticket-detail/README.markdown
new file mode 100644
index 0000000..5b601c4
--- /dev/null
+++ b/folding-ticket-detail/README.markdown
@@ -0,0 +1,5 @@
+# Folding Ticket Detail
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pizza3/pen/bGVPZvo](https://codepen.io/pizza3/pen/bGVPZvo).
+
+Inspired from https://github.com/Ramotion/folding-cell
diff --git a/folding-ticket-detail/dist/index.html b/folding-ticket-detail/dist/index.html
new file mode 100644
index 0000000..96214cb
--- /dev/null
+++ b/folding-ticket-detail/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Folding Ticket Detail</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id='root'></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/folding-ticket-detail/dist/script.js b/folding-ticket-detail/dist/script.js
new file mode 100644
index 0000000..4cb7e41
--- /dev/null
+++ b/folding-ticket-detail/dist/script.js
@@ -0,0 +1,454 @@
+const { useState } = React;
+const rootElement = document.getElementById("root");
+
+const Flight = [
+{
+  src: "https://beebom.com/wp-content/uploads/2018/12/Lufthansa-Logo.jpg",
+  style: {
+    height: "51px",
+    margin: "22px 12px" },
+
+  label: "rgb(13, 28, 83)" },
+
+{
+  src:
+  "https://beebom.com/wp-content/uploads/2015/02/airline-logos-qatar-e1424574584611.png",
+  style: {
+    height: "26px",
+    margin: "34px 16px" },
+
+  label: "rgb(90, 5, 49)" },
+
+{
+  src:
+  "https://beebom.com/wp-content/uploads/2015/02/airline-logos-swiss.png",
+  style: {
+    height: "23px",
+    margin: "41px 12px" },
+
+  label: "rgb(230, 26, 56)" },
+
+{
+  src:
+  "https://beebom.com/wp-content/uploads/2018/12/Singapore-Airlines-logo.jpg",
+  style: {
+    height: "46px",
+    margin: "22px 15px" },
+
+  label: "rgb(252, 178, 50)" },
+
+{
+  src: "https://beebom.com/wp-content/uploads/2018/12/Lufthansa-Logo.jpg",
+  style: {
+    height: "51px",
+    margin: "22px 12px" },
+
+  label: "rgb(13, 28, 83)" },
+
+{
+  src:
+  "https://beebom.com/wp-content/uploads/2015/02/airline-logos-qatar-e1424574584611.png",
+  style: {
+    height: "26px",
+    margin: "34px 16px" },
+
+  label: "rgb(90, 5, 49)" },
+
+{
+  src:
+  "https://beebom.com/wp-content/uploads/2015/02/airline-logos-swiss.png",
+  style: {
+    height: "23px",
+    margin: "41px 12px" },
+
+  label: "rgb(230, 26, 56)" },
+
+{
+  src:
+  "https://beebom.com/wp-content/uploads/2018/12/Singapore-Airlines-logo.jpg",
+  style: {
+    height: "46px",
+    margin: "22px 15px" },
+
+  label: "rgb(252, 178, 50)" }];
+
+
+
+const Cell = props => {
+  const { index } = props;
+  const [active, handleActive] = useState(false);
+
+  // 	// this for just showcase ignore it.
+  //   const [rendered, handleRender] = useState(false);
+  // 	  setTimeout(()=>{
+  //     if(index===0 && !rendered){
+  // 			handleRender(true)
+  //     	handleActive(true)
+  // 		}
+  //   },1800)
+
+
+
+  return (
+    React.createElement("div", {
+      id: "cardContainer",
+      style: {
+        height: active ? `300px` : `100px`,
+        transition: "0.9s" },
+
+      onClick: () => {
+        handleActive(!active);
+      } },
+
+    React.createElement("div", { id: "firstDisplay" },
+    React.createElement("div", { id: "flightDetail" },
+    React.createElement("div", {
+      id: "detailLabel",
+      style: { fontWeight: "bold", color: Flight[index].label } }, "From"), "BLR",
+
+
+
+
+    React.createElement("div", { id: "detailLabel" }, "Kempegowda International")),
+
+    React.createElement("div", {
+      id: "flightDetail",
+      style: {
+        marginTop: "15px" } },
+
+
+    React.createElement("div", { id: "animContainer" },
+    React.createElement("div", { id: "anim" },
+    React.createElement("div", { id: "circle" }),
+    React.createElement("div", { id: "circle" }),
+    React.createElement("div", { id: "circle" }))),
+
+
+    React.createElement("div", { id: "animContainer", style: { left: "62px" } },
+    React.createElement("div", { id: "anim" },
+    React.createElement("div", { id: "circle" }),
+    React.createElement("div", { id: "circle" }),
+    React.createElement("div", { id: "circle" }))),
+
+
+    React.createElement("img", {
+      style: { width: "30px" },
+      src: "https://github.com/pizza3/asset/blob/master/airplane2.png?raw=true" })),
+
+
+    React.createElement("div", { id: "flightDetail" },
+    React.createElement("div", {
+      id: "detailLabel",
+      style: { fontWeight: "bold", color: Flight[index].label } }, "To"), "DEL",
+
+
+
+
+    React.createElement("div", { id: "detailLabel" }, "Indira Gandhi International"))),
+
+
+    React.createElement("div", {
+      id: "first",
+      style: {
+        transform: active ?
+        `rotate3d(1, 0, 0, -180deg)` :
+        `rotate3d(1, 0, 0, 0deg)`,
+        transitionDelay: active ? "0s" : "0.3s" } },
+
+
+    React.createElement("div", { id: "firstTop" },
+    React.createElement("img", { style: Flight[index].style, src: Flight[index].src }),
+    React.createElement("div", { id: "timecontainer" },
+    React.createElement("div", { id: "detailDate" }, "Bengaluru",
+
+    React.createElement("div", { id: "detailTime" }, "6:20"), "June 12"),
+
+
+    React.createElement("img", {
+      style: {
+        width: "30px",
+        height: "26px",
+        marginTop: "22px",
+        marginLeft: "16px",
+        marginRight: "16px" },
+
+      src: "https://github.com/pizza3/asset/blob/master/airplane2.png?raw=true" }),
+
+    React.createElement("div", { id: "detailDate" }, "New Delhi",
+
+    React.createElement("div", { id: "detailTime" }, "8:45"), "June 12"))),
+
+
+
+
+
+    React.createElement("div", { id: "firstBehind" },
+    React.createElement("div", { id: "firstBehindDisplay" },
+    React.createElement("div", { id: "firstBehindRow" },
+    React.createElement("div", { id: "detail" }, "6:20 - 8:45",
+
+    React.createElement("div", { id: "detailLabel" }, "Flight Time")),
+
+    React.createElement("div", { id: "detail" }, "No",
+
+    React.createElement("div", { id: "detailLabel" }, "Transfer"))),
+
+
+    React.createElement("div", { id: "firstBehindRow" },
+    React.createElement("div", { id: "detail" }, "2h 25 min",
+
+    React.createElement("div", { id: "detailLabel" }, "Duration")),
+
+    React.createElement("div", { id: "detail" }, "8",
+    React.createElement("div", { id: "detailLabel" }, "Gate"))),
+
+
+    React.createElement("div", { id: "firstBehindRow" },
+    React.createElement("div", { id: "detail" }, "5:35",
+
+    React.createElement("div", { id: "detailLabel" }, "Boarding")),
+
+    React.createElement("div", { id: "detail" }, "20A",
+
+    React.createElement("div", { id: "detailLabel" }, "Seat")))),
+
+
+
+    React.createElement("div", {
+      id: "second",
+      style: {
+        transform: active ?
+        `rotate3d(1, 0, 0, -180deg)` :
+        `rotate3d(1, 0, 0, 0deg)`,
+        transitionDelay: active ? "0.2s" : "0.2s" } },
+
+
+    React.createElement("div", { id: "secondTop" }),
+    React.createElement("div", { id: "secondBehind" },
+    React.createElement("div", { id: "secondBehindDisplay" },
+    React.createElement("div", { id: "price" }, "$100",
+
+    React.createElement("div", { id: "priceLabel" }, "Price")),
+
+    React.createElement("div", { id: "price" }, "Economy",
+
+    React.createElement("div", { id: "priceLabel" }, "Class")),
+
+    React.createElement("img", {
+      id: "barCode",
+      src: "https://github.com/pizza3/asset/blob/master/barcode.png?raw=true" })),
+
+
+    React.createElement("div", {
+      id: "third",
+      style: {
+        transform: active ?
+        `rotate3d(1, 0, 0, -180deg)` :
+        `rotate3d(1, 0, 0, 0deg)`,
+        transitionDelay: active ? "0.4s" : "0s" } },
+
+
+    React.createElement("div", { id: "thirdTop" }),
+    React.createElement("div", { id: "secondBehindBottom" },
+    React.createElement("button", {
+      id: "button",
+      style: {
+        color: Flight[index].label,
+        border: `1px solid ${Flight[index].label}` } }, "Pay")))))))));
+
+
+
+
+
+
+
+
+
+
+
+
+};
+
+
+const Header =
+React.createElement("div", null,
+React.createElement("svg", {
+  id: "back",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "512",
+  height: "512",
+  viewBox: "0 0 512 512" },
+
+React.createElement("polyline", {
+  points: "244 400 100 256 244 112",
+  style: {
+    fill: "none",
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "48px" } }),
+
+
+React.createElement("line", {
+  x1: "120",
+  y1: "256",
+  x2: "412",
+  y2: "256",
+  style: {
+    fill: "none",
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "48px" } })),
+
+
+
+React.createElement("div", { id: "headerText" }, "Select Flight"),
+React.createElement("div", { id: "tripDetail" }, "Your Trip",
+
+React.createElement("div", { id: "tripDest" }, "BLR - DEL",
+React.createElement("div", { id: "oneWay" }, "One Way"),
+React.createElement("div", null)), "12th June, 2020"),
+
+
+
+React.createElement("svg", {
+  id: "settings",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "512",
+  height: "512",
+  viewBox: "0 0 512 512" },
+
+React.createElement("line", {
+  x1: "368",
+  y1: "128",
+  x2: "448",
+  y2: "128",
+  style: {
+    fill: "none",
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "32px" } }),
+
+
+React.createElement("line", {
+  x1: "64",
+  y1: "128",
+  x2: "304",
+  y2: "128",
+  style: {
+    fill: "none",
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "32px" } }),
+
+
+React.createElement("line", {
+  x1: "368",
+  y1: "384",
+  x2: "448",
+  y2: "384",
+  style: {
+    fill: "none",
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "32px" } }),
+
+
+React.createElement("line", {
+  x1: "64",
+  y1: "384",
+  x2: "304",
+  y2: "384",
+  style: {
+    fill: "none",
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "32px" } }),
+
+
+React.createElement("line", {
+  x1: "208",
+  y1: "256",
+  x2: "448",
+  y2: "256",
+  style: {
+    fill: "none",
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "32px" } }),
+
+
+React.createElement("line", {
+  x1: "64",
+  y1: "256",
+  x2: "144",
+  y2: "256",
+  style: {
+    fill: "none",
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "32px" } }),
+
+
+React.createElement("circle", {
+  cx: "336",
+  cy: "128",
+  r: "32",
+  style: {
+    fill: "none",
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "32px" } }),
+
+
+React.createElement("circle", {
+  cx: "176",
+  cy: "256",
+  r: "32",
+  style: {
+    fill: "none",
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "32px" } }),
+
+
+React.createElement("circle", {
+  cx: "336",
+  cy: "384",
+  r: "32",
+  style: {
+    fill: "none",
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "32px" } })));
+
+
+
+
+
+
+const DataArr = Array(8).
+fill(0).
+map(Number.call, Number);
+const App = () => {
+  return (
+    React.createElement("div", { className: "App" },
+    Header,
+    DataArr.map((val, i) =>
+    React.createElement(Cell, { key: i, index: i }))));
+
+
+
+};
+
+ReactDOM.render(React.createElement("div", null, React.createElement(App, null)), rootElement);
\ No newline at end of file
diff --git a/folding-ticket-detail/dist/style.css b/folding-ticket-detail/dist/style.css
new file mode 100644
index 0000000..ed655f6
--- /dev/null
+++ b/folding-ticket-detail/dist/style.css
@@ -0,0 +1,396 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  perspective: 700px;
+  font-family: Roboto-Regular, HelveticaNeue, Arial, sans-serif;
+}
+
+#root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+	background: #ededed;
+}
+
+#back {
+  width: 26px;
+  height: 26px;
+  position: absolute;
+  z-index: 10;
+  left: -4px;
+  top: 29px;
+}
+
+#settings {
+  width: 26px;
+  height: 26px;
+  position: absolute;
+  z-index: 10;
+  top: 117px;
+  right: 0px;
+}
+
+.App {
+  font-family: sans-serif;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: #fff;
+  box-shadow: 0px 0px 41px -7px rgba(0, 0, 0, 0.15);
+  width: 400px;
+  height: auto;
+	background: #f3f3f3;
+}
+
+#headerText {
+  color: rgb(34, 34, 34);
+  font-weight: bold;
+  font-size: 20px;
+  width: 340px;
+  height: 46px;
+  text-align: center;
+  margin-top: 30px;
+  word-spacing: 2px;
+  letter-spacing: 1px;
+}
+
+#tripDetail {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  color: #747474;
+  font-size: 10px;
+  margin-top: 26px;
+  letter-spacing: 2px;
+  margin-bottom: 26px;
+}
+
+#tripDest {
+  color: #141414;
+  font-weight: bold;
+  font-size: 28px;
+  letter-spacing: 1px;
+  display: flex;
+}
+
+#oneWay {
+  font-size: 10px;
+  font-weight: 100;
+  background: #498eff;
+  border: 1px solid #0061ff;
+  color: #fff;
+  position: relative;
+  height: 20px;
+  padding: 3px 5px;
+  margin-top: 7px;
+  border-radius: 3px;
+  margin-left: 7px;
+}
+
+#headerInput {
+  width: 340px;
+  height: 40px;
+  border: none;
+  background: #262626;
+  border-radius: 5px;
+  border: 1px solid rgb(81, 81, 81);
+  padding-top: 8px;
+  padding-left: 10px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+::placeholder {
+  color: #c0c0c0;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+#cardContainer {
+  position: relative;
+  width: 340px;
+  height: 100px;
+  /* background: rgb(194, 194, 194); */
+  border-radius: 5px;
+  transform-origin: bottom;
+  margin: 20px;
+}
+
+#first {
+  width: 340px;
+  height: 100px;
+  position: absolute;
+  border-radius: 5px;
+  color: #000;
+  transform-origin: bottom;
+  transform-style: preserve-3d;
+  transition: 0.5s;
+  border-radius: 8px;
+  display: flex;
+  /* backface-visibility: hidden; */
+}
+
+#detailDate {
+  color: #a09a9a;
+  font-size: 9px;
+  padding-top: 11px;
+}
+
+#detailTime {
+  font-weight: bold;
+  font-size: 21px;
+  color: #000;
+}
+
+#detailSub {
+  width: 200px;
+  height: 100px;
+  position: relative;
+  border-radius: 0px 8px 8px 0px;
+  background: #0a0a0a;
+}
+#firstDisplay {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  background: #fff;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 18px 23px;
+  flex-wrap: wrap;
+  backface-visibility: hidden;
+  box-shadow: 0px 0px 25px -1px rgba(0, 0, 0, 0.17);
+}
+
+#info {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  color: #b2b2b2;
+  font-size: 10px;
+}
+
+#flightDetail {
+  font-size: 23px;
+  font-weight: bold;
+  color: #3f3f3f;
+  flex: 0.5;
+}
+
+#animContainer {
+  padding-left: 0px;
+  position: absolute;
+  width: 19px;
+  height: 10px;
+  top: 10px;
+  left: 15px;
+  overflow: hidden;
+}
+
+#anim {
+  width: 54px;
+  position: absolute;
+  display: flex;
+  animation: slidein 1s infinite linear;
+}
+
+@keyframes slidein {
+  to {
+    transform: translateX(-18px);
+  }
+
+  from {
+    transform: translateX(0px);
+  }
+}
+
+#circle {
+  width: 5px;
+  height: 5px;
+  background: #707070;
+  border-radius: 50%;
+  margin-right: 13px;
+}
+#firstTop {
+  width: 340px;
+  height: 100px;
+  position: absolute;
+  background: #ffffff;
+  backface-visibility: hidden;
+  border-radius: 8px;
+  border-radius: 8px;
+  box-shadow: 0px 0px 3px 0px rgba(132, 132, 132, 0.15);
+  display: flex;
+  justify-content: space-around;
+}
+
+#timecontainer {
+  display: flex;
+  padding-right: 10px;
+  padding-top: 14px;
+}
+
+#firstBehind {
+  width: 340px;
+  height: 100px;
+  position: absolute;
+  background: #fff;
+  transform-origin: center;
+  transform: rotate3d(1, 0, 0, -180deg);
+  backface-visibility: hidden;
+  border-radius: 8px;
+  border: 1px dashed #d1d1d1;
+  border-left: none;
+  border-right: none;
+}
+
+#firstBehindDisplay {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px 23px;
+  display: flex;
+  justify-content: space-between;
+  box-shadow: 0px 11px 25px -1px rgba(0, 0, 0, 0.17);
+}
+
+#firstBehindRow {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-top: 7px;
+  text-align: left;
+}
+
+#detail {
+  font-size: 15px;
+  color: rgb(69, 69, 69);
+  font-weight: bold;
+}
+
+#detailLabel {
+  color: #686868;
+  font-size: 10px;
+  font-weight: 100;
+}
+
+#second {
+  width: 340px;
+  height: 50px;
+  position: absolute;
+  bottom: -2px;
+  transform-origin: bottom;
+  transform-style: preserve-3d;
+  transition: 0.2s;
+  border-radius: 8px;
+}
+
+#secondTop {
+  width: 340px;
+  height: 50px;
+  position: absolute;
+  background: rgb(231, 231, 231);
+  backface-visibility: hidden;
+  border-radius: 8px;
+}
+
+#thirdTop {
+  width: 340px;
+  height: 50px;
+  position: absolute;
+  background: rgb(190, 190, 190);
+  backface-visibility: hidden;
+  border-radius: 8px;
+}
+
+#secondBehind {
+  width: 340px;
+  height: 50px;
+  position: absolute;
+  background: #fff;
+  transform-origin: center;
+  transform: rotate3d(1, 0, 0, -180deg);
+  backface-visibility: hidden;
+  border-radius: 8px;
+  border: 1px dashed #d1d1d1;
+  border-left: none;
+  border-right: none;
+}
+
+#secondBehindDisplay {
+  width: 100%;
+  height: 50px;
+  position: absolute;
+  background: #fff;
+  border-radius: 8px;
+  border-bottom: 1px dashed #d1d1d1;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 23px;
+  box-shadow: 0px 11px 25px -1px rgba(0, 0, 0, 0.17);
+}
+
+#secondBehindBottom {
+  width: 340px;
+  height: 50px;
+  position: absolute;
+  background: #fff;
+  transform-origin: center;
+  transform: rotate3d(1, 0, 0, -180deg);
+  backface-visibility: hidden;
+  border-radius: 0px 0px 8px 8px;
+  border-radius: 8px;
+  box-shadow: 0px 11px 25px -1px rgba(0, 0, 0, 0.17);
+}
+
+#third {
+  width: 340px;
+  height: 50px;
+  position: absolute;
+  transform-origin: bottom;
+  transform-style: preserve-3d;
+  transition: 0.2s;
+  border-radius: 8px;
+}
+
+#button {
+  color: #2d2d2d;
+  font-size: 19px;
+  font-weight: bold;
+  padding: 4px 124px;
+  border: 1px solid #2d2d2d;
+  background: #fff;
+  border-radius: 4px;
+  margin-top: 9px;
+}
+
+#price {
+  color: #2d2d2d;
+  font-weight: bold;
+  font-size: 15px;
+  display: flex;
+  flex-direction: column;
+  margin-top: -2px;
+}
+
+#priceLabel {
+  color: #747474;
+  font-weight: 100;
+  font-size: 10px;
+  text-align: left;
+}
+
+#barCode {
+  width: 98px;
+  height: 30px;
+}
\ No newline at end of file
diff --git a/folding-ticket-detail/license.txt b/folding-ticket-detail/license.txt
new file mode 100644
index 0000000..a351231
--- /dev/null
+++ b/folding-ticket-detail/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Yugam (https://codepen.io/pizza3/pen/bGVPZvo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/folding-ticket-detail/src/index.html b/folding-ticket-detail/src/index.html
new file mode 100644
index 0000000..b02261b
--- /dev/null
+++ b/folding-ticket-detail/src/index.html
@@ -0,0 +1 @@
+<div id='root'></div>
\ No newline at end of file
diff --git a/folding-ticket-detail/src/script.babel b/folding-ticket-detail/src/script.babel
new file mode 100644
index 0000000..2d92392
--- /dev/null
+++ b/folding-ticket-detail/src/script.babel
@@ -0,0 +1,454 @@
+const { useState } = React;
+const rootElement = document.getElementById("root");
+
+const Flight = [
+  {
+    src: "https://beebom.com/wp-content/uploads/2018/12/Lufthansa-Logo.jpg",
+    style: {
+      height: "51px",
+      margin: "22px 12px"
+    },
+    label: "rgb(13, 28, 83)"
+  },
+  {
+    src:
+      "https://beebom.com/wp-content/uploads/2015/02/airline-logos-qatar-e1424574584611.png",
+    style: {
+      height: "26px",
+      margin: "34px 16px"
+    },
+    label: "rgb(90, 5, 49)"
+  },
+  {
+    src:
+      "https://beebom.com/wp-content/uploads/2015/02/airline-logos-swiss.png",
+    style: {
+      height: "23px",
+      margin: "41px 12px"
+    },
+    label: "rgb(230, 26, 56)"
+  },
+  {
+    src:
+      "https://beebom.com/wp-content/uploads/2018/12/Singapore-Airlines-logo.jpg",
+    style: {
+      height: "46px",
+      margin: "22px 15px"
+    },
+    label: "rgb(252, 178, 50)"
+  },
+  {
+    src: "https://beebom.com/wp-content/uploads/2018/12/Lufthansa-Logo.jpg",
+    style: {
+      height: "51px",
+      margin: "22px 12px"
+    },
+    label: "rgb(13, 28, 83)"
+  },
+  {
+    src:
+      "https://beebom.com/wp-content/uploads/2015/02/airline-logos-qatar-e1424574584611.png",
+    style: {
+      height: "26px",
+      margin: "34px 16px"
+    },
+    label: "rgb(90, 5, 49)"
+  },
+  {
+    src:
+      "https://beebom.com/wp-content/uploads/2015/02/airline-logos-swiss.png",
+    style: {
+      height: "23px",
+      margin: "41px 12px"
+    },
+    label: "rgb(230, 26, 56)"
+  },
+  {
+    src:
+      "https://beebom.com/wp-content/uploads/2018/12/Singapore-Airlines-logo.jpg",
+    style: {
+      height: "46px",
+      margin: "22px 15px"
+    },
+    label: "rgb(252, 178, 50)"
+  }
+];
+
+const Cell = (props)=> {
+  const { index } = props;
+  const [active, handleActive] = useState(false);
+	
+// 	// this for just showcase ignore it.
+//   const [rendered, handleRender] = useState(false);
+// 	  setTimeout(()=>{
+//     if(index===0 && !rendered){
+// 			handleRender(true)
+//     	handleActive(true)
+// 		}
+//   },1800)
+	
+	
+	
+  return (
+    <div
+      id="cardContainer"
+      style={{
+        height: active ? `300px` : `100px`,
+        transition: "0.9s"
+      }}
+      onClick={() => {
+        handleActive(!active);
+      }}
+    >
+      <div id="firstDisplay">
+        <div id="flightDetail">
+          <div
+            id="detailLabel"
+            style={{ fontWeight: "bold", color: Flight[index].label }}
+          >
+            From
+          </div>
+          BLR
+          <div id="detailLabel">Kempegowda International</div>
+        </div>
+        <div
+          id="flightDetail"
+          style={{
+            marginTop: "15px"
+          }}
+        >
+          <div id="animContainer">
+            <div id="anim">
+              <div id="circle" />
+              <div id="circle" />
+              <div id="circle" />
+            </div>
+          </div>
+          <div id="animContainer" style={{ left: "62px" }}>
+            <div id="anim">
+              <div id="circle" />
+              <div id="circle" />
+              <div id="circle" />
+            </div>
+          </div>
+          <img
+            style={{ width: "30px" }}
+            src="https://github.com/pizza3/asset/blob/master/airplane2.png?raw=true"
+          />
+        </div>
+        <div id="flightDetail">
+          <div
+            id="detailLabel"
+            style={{ fontWeight: "bold", color: Flight[index].label }}
+          >
+            To
+          </div>
+          DEL
+          <div id="detailLabel">Indira Gandhi International</div>
+        </div>
+      </div>
+      <div
+        id="first"
+        style={{
+          transform: active
+            ? `rotate3d(1, 0, 0, -180deg)`
+            : `rotate3d(1, 0, 0, 0deg)`,
+          transitionDelay: active ? "0s" : "0.3s"
+        }}
+      >
+        <div id="firstTop">
+          <img style={Flight[index].style} src={Flight[index].src} />
+          <div id="timecontainer">
+            <div id="detailDate">
+              Bengaluru
+              <div id="detailTime">6:20</div>
+              June 12
+            </div>
+            <img
+              style={{
+                width: "30px",
+                height: "26px",
+                marginTop: "22px",
+                marginLeft: "16px",
+                marginRight: "16px"
+              }}
+              src="https://github.com/pizza3/asset/blob/master/airplane2.png?raw=true"
+            />
+            <div id="detailDate">
+              New Delhi
+              <div id="detailTime">8:45</div>
+              June 12
+            </div>
+          </div>
+          {/* <div>$100</div> */}
+        </div>
+        <div id="firstBehind">
+          <div id="firstBehindDisplay">
+            <div id="firstBehindRow">
+              <div id="detail">
+                6:20 - 8:45
+                <div id="detailLabel">Flight Time</div>
+              </div>
+              <div id="detail">
+                No
+                <div id="detailLabel">Transfer</div>
+              </div>
+            </div>
+            <div id="firstBehindRow">
+              <div id="detail">
+                2h 25 min
+                <div id="detailLabel">Duration</div>
+              </div>
+              <div id="detail">
+                8<div id="detailLabel">Gate</div>
+              </div>
+            </div>
+            <div id="firstBehindRow">
+              <div id="detail">
+                5:35
+                <div id="detailLabel">Boarding</div>
+              </div>
+              <div id="detail">
+                20A
+                <div id="detailLabel">Seat</div>
+              </div>
+            </div>
+          </div>
+          <div
+            id="second"
+            style={{
+              transform: active
+                ? `rotate3d(1, 0, 0, -180deg)`
+                : `rotate3d(1, 0, 0, 0deg)`,
+              transitionDelay: active ? "0.2s" : "0.2s"
+            }}
+          >
+            <div id="secondTop" />
+            <div id="secondBehind">
+              <div id="secondBehindDisplay">
+                <div id="price">
+                  $100
+                  <div id="priceLabel">Price</div>
+                </div>
+                <div id="price">
+                  Economy
+                  <div id="priceLabel">Class</div>
+                </div>
+                <img
+                  id="barCode"
+                  src="https://github.com/pizza3/asset/blob/master/barcode.png?raw=true"
+                />
+              </div>
+              <div
+                id="third"
+                style={{
+                  transform: active
+                    ? `rotate3d(1, 0, 0, -180deg)`
+                    : `rotate3d(1, 0, 0, 0deg)`,
+                  transitionDelay: active ? "0.4s" : "0s"
+                }}
+              >
+                <div id="thirdTop" />
+                <div id="secondBehindBottom">
+                  <button
+                    id="button"
+                    style={{
+                      color: Flight[index].label,
+                      border: `1px solid ${Flight[index].label}`
+                    }}
+                  >
+                    Pay
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
+const Header = (
+  <div>
+    <svg
+      id="back"
+      xmlns="http://www.w3.org/2000/svg"
+      width="512"
+      height="512"
+      viewBox="0 0 512 512"
+    >
+      <polyline
+        points="244 400 100 256 244 112"
+        style={{
+          fill: "none",
+          stroke: "#000",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "48px"
+        }}
+      />
+      <line
+        x1="120"
+        y1="256"
+        x2="412"
+        y2="256"
+        style={{
+          fill: "none",
+          stroke: "#000",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "48px"
+        }}
+      />
+    </svg>
+    <div id="headerText">Select Flight</div>
+    <div id="tripDetail">
+      Your Trip
+      <div id="tripDest">
+        BLR - DEL<div id="oneWay">One Way</div>
+        <div />
+      </div>
+      12th June, 2020
+    </div>
+    <svg
+      id="settings"
+      xmlns="http://www.w3.org/2000/svg"
+      width="512"
+      height="512"
+      viewBox="0 0 512 512"
+    >
+      <line
+        x1="368"
+        y1="128"
+        x2="448"
+        y2="128"
+        style={{
+          fill: "none",
+          stroke: "#000",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "32px"
+        }}
+      />
+      <line
+        x1="64"
+        y1="128"
+        x2="304"
+        y2="128"
+        style={{
+          fill: "none",
+          stroke: "#000",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "32px"
+        }}
+      />
+      <line
+        x1="368"
+        y1="384"
+        x2="448"
+        y2="384"
+        style={{
+          fill: "none",
+          stroke: "#000",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "32px"
+        }}
+      />
+      <line
+        x1="64"
+        y1="384"
+        x2="304"
+        y2="384"
+        style={{
+          fill: "none",
+          stroke: "#000",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "32px"
+        }}
+      />
+      <line
+        x1="208"
+        y1="256"
+        x2="448"
+        y2="256"
+        style={{
+          fill: "none",
+          stroke: "#000",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "32px"
+        }}
+      />
+      <line
+        x1="64"
+        y1="256"
+        x2="144"
+        y2="256"
+        style={{
+          fill: "none",
+          stroke: "#000",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "32px"
+        }}
+      />
+      <circle
+        cx="336"
+        cy="128"
+        r="32"
+        style={{
+          fill: "none",
+          stroke: "#000",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "32px"
+        }}
+      />
+      <circle
+        cx="176"
+        cy="256"
+        r="32"
+        style={{
+          fill: "none",
+          stroke: "#000",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "32px"
+        }}
+      />
+      <circle
+        cx="336"
+        cy="384"
+        r="32"
+        style={{
+          fill: "none",
+          stroke: "#000",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "32px"
+        }}
+      />
+    </svg>
+  </div>
+);
+
+const DataArr = Array(8)
+  .fill(0)
+  .map(Number.call, Number);
+const App = () => {
+  return (
+    <div className="App">
+      {Header}
+     {DataArr.map((val, i) => (
+        <Cell key={i} index={i} />
+      ))}
+    </div>
+  );
+}
+
+ReactDOM.render(<div><App/></div>,rootElement);
\ No newline at end of file
diff --git a/folding-ticket-detail/src/style.css b/folding-ticket-detail/src/style.css
new file mode 100644
index 0000000..8575d70
--- /dev/null
+++ b/folding-ticket-detail/src/style.css
@@ -0,0 +1,396 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  perspective: 700px;
+  font-family: Roboto-Regular, HelveticaNeue, Arial, sans-serif;
+}
+
+#root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+	background: #ededed;
+}
+
+#back {
+  width: 26px;
+  height: 26px;
+  position: absolute;
+  z-index: 10;
+  left: -4px;
+  top: 29px;
+}
+
+#settings {
+  width: 26px;
+  height: 26px;
+  position: absolute;
+  z-index: 10;
+  top: 117px;
+  right: 0px;
+}
+
+.App {
+  font-family: sans-serif;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: #fff;
+  box-shadow: 0px 0px 41px -7px rgba(0, 0, 0, 0.15);
+  width: 400px;
+  height: auto;
+	background: #f3f3f3;
+}
+
+#headerText {
+  color: rgb(34, 34, 34);
+  font-weight: bold;
+  font-size: 20px;
+  width: 340px;
+  height: 46px;
+  text-align: center;
+  margin-top: 30px;
+  word-spacing: 2px;
+  letter-spacing: 1px;
+}
+
+#tripDetail {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  color: #747474;
+  font-size: 10px;
+  margin-top: 26px;
+  letter-spacing: 2px;
+  margin-bottom: 26px;
+}
+
+#tripDest {
+  color: #141414;
+  font-weight: bold;
+  font-size: 28px;
+  letter-spacing: 1px;
+  display: flex;
+}
+
+#oneWay {
+  font-size: 10px;
+  font-weight: 100;
+  background: #498eff;
+  border: 1px solid #0061ff;
+  color: #fff;
+  position: relative;
+  height: 20px;
+  padding: 3px 5px;
+  margin-top: 7px;
+  border-radius: 3px;
+  margin-left: 7px;
+}
+
+#headerInput {
+  width: 340px;
+  height: 40px;
+  border: none;
+  background: #262626;
+  border-radius: 5px;
+  border: 1px solid rgb(81, 81, 81);
+  padding-top: 8px;
+  padding-left: 10px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+::placeholder {
+  color: #c0c0c0;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+#cardContainer {
+  position: relative;
+  width: 340px;
+  height: 100px;
+  /* background: rgb(194, 194, 194); */
+  border-radius: 5px;
+  transform-origin: bottom;
+  margin: 20px;
+}
+
+#first {
+  width: 340px;
+  height: 100px;
+  position: absolute;
+  border-radius: 5px;
+  color: #000;
+  transform-origin: bottom;
+  transform-style: preserve-3d;
+  transition: 0.5s;
+  border-radius: 8px;
+  display: flex;
+  /* backface-visibility: hidden; */
+}
+
+#detailDate {
+  color: #a09a9a;
+  font-size: 9px;
+  padding-top: 11px;
+}
+
+#detailTime {
+  font-weight: bold;
+  font-size: 21px;
+  color: #000;
+}
+
+#detailSub {
+  width: 200px;
+  height: 100px;
+  position: relative;
+  border-radius: 0px 8px 8px 0px;
+  background: #0a0a0a;
+}
+#firstDisplay {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  background: #fff;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 18px 23px;
+  flex-wrap: wrap;
+  backface-visibility: hidden;
+  box-shadow: 0px 0px 25px -1px rgba(0, 0, 0, 0.17);
+}
+
+#info {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  color: #b2b2b2;
+  font-size: 10px;
+}
+
+#flightDetail {
+  font-size: 23px;
+  font-weight: bold;
+  color: #3f3f3f;
+  flex: 0.5;
+}
+
+#animContainer {
+  padding-left: 0px;
+  position: absolute;
+  width: 19px;
+  height: 10px;
+  top: 10px;
+  left: 15px;
+  overflow: hidden;
+}
+
+#anim {
+  width: 54px;
+  position: absolute;
+  display: flex;
+  animation: slidein 1s infinite linear;
+}
+
+@keyframes slidein {
+  to {
+    transform: translateX(-18px);
+  }
+
+  from {
+    transform: translateX(0px);
+  }
+}
+
+#circle {
+  width: 5px;
+  height: 5px;
+  background: #707070;
+  border-radius: 50%;
+  margin-right: 13px;
+}
+#firstTop {
+  width: 340px;
+  height: 100px;
+  position: absolute;
+  background: #ffffff;
+  backface-visibility: hidden;
+  border-radius: 8px;
+  border-radius: 8px;
+  box-shadow: 0px 0px 3px 0px rgba(132, 132, 132, 0.15);
+  display: flex;
+  justify-content: space-around;
+}
+
+#timecontainer {
+  display: flex;
+  padding-right: 10px;
+  padding-top: 14px;
+}
+
+#firstBehind {
+  width: 340px;
+  height: 100px;
+  position: absolute;
+  background: #fff;
+  transform-origin: center;
+  transform: rotate3d(1, 0, 0, -180deg);
+  backface-visibility: hidden;
+  border-radius: 8px;
+  border: 1px dashed #d1d1d1;
+  border-left: none;
+  border-right: none;
+}
+
+#firstBehindDisplay {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px 23px;
+  display: flex;
+  justify-content: space-between;
+  box-shadow: 0px 11px 25px -1px rgba(0, 0, 0, 0.17);
+}
+
+#firstBehindRow {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-top: 7px;
+  text-align: left;
+}
+
+#detail {
+  font-size: 15px;
+  color: rgb(69, 69, 69);
+  font-weight: bold;
+}
+
+#detailLabel {
+  color: #686868;
+  font-size: 10px;
+  font-weight: 100;
+}
+
+#second {
+  width: 340px;
+  height: 50px;
+  position: absolute;
+  bottom: -2px;
+  transform-origin: bottom;
+  transform-style: preserve-3d;
+  transition: 0.2s;
+  border-radius: 8px;
+}
+
+#secondTop {
+  width: 340px;
+  height: 50px;
+  position: absolute;
+  background: rgb(231, 231, 231);
+  backface-visibility: hidden;
+  border-radius: 8px;
+}
+
+#thirdTop {
+  width: 340px;
+  height: 50px;
+  position: absolute;
+  background: rgb(190, 190, 190);
+  backface-visibility: hidden;
+  border-radius: 8px;
+}
+
+#secondBehind {
+  width: 340px;
+  height: 50px;
+  position: absolute;
+  background: #fff;
+  transform-origin: center;
+  transform: rotate3d(1, 0, 0, -180deg);
+  backface-visibility: hidden;
+  border-radius: 8px;
+  border: 1px dashed #d1d1d1;
+  border-left: none;
+  border-right: none;
+}
+
+#secondBehindDisplay {
+  width: 100%;
+  height: 50px;
+  position: absolute;
+  background: #fff;
+  border-radius: 8px;
+  border-bottom: 1px dashed #d1d1d1;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 23px;
+  box-shadow: 0px 11px 25px -1px rgba(0, 0, 0, 0.17);
+}
+
+#secondBehindBottom {
+  width: 340px;
+  height: 50px;
+  position: absolute;
+  background: #fff;
+  transform-origin: center;
+  transform: rotate3d(1, 0, 0, -180deg);
+  backface-visibility: hidden;
+  border-radius: 0px 0px 8px 8px;
+  border-radius: 8px;
+  box-shadow: 0px 11px 25px -1px rgba(0, 0, 0, 0.17);
+}
+
+#third {
+  width: 340px;
+  height: 50px;
+  position: absolute;
+  transform-origin: bottom;
+  transform-style: preserve-3d;
+  transition: 0.2s;
+  border-radius: 8px;
+}
+
+#button {
+  color: #2d2d2d;
+  font-size: 19px;
+  font-weight: bold;
+  padding: 4px 124px;
+  border: 1px solid #2d2d2d;
+  background: #fff;
+  border-radius: 4px;
+  margin-top: 9px;
+}
+
+#price {
+  color: #2d2d2d;
+  font-weight: bold;
+  font-size: 15px;
+  display: flex;
+  flex-direction: column;
+  margin-top: -2px;
+}
+
+#priceLabel {
+  color: #747474;
+  font-weight: 100;
+  font-size: 10px;
+  text-align: left;
+}
+
+#barCode {
+  width: 98px;
+  height: 30px;
+}
diff --git a/fracture/README.markdown b/fracture/README.markdown
new file mode 100644
index 0000000..8d56743
--- /dev/null
+++ b/fracture/README.markdown
@@ -0,0 +1,5 @@
+# Fracture
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shubniggurath/pen/jOBJdRV](https://codepen.io/shubniggurath/pen/jOBJdRV).
+
+
diff --git a/fracture/dist/index.html b/fracture/dist/index.html
new file mode 100644
index 0000000..9f90b44
--- /dev/null
+++ b/fracture/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Fracture</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="container"></div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/fracture/dist/script.js b/fracture/dist/script.js
new file mode 100644
index 0000000..dac53fe
--- /dev/null
+++ b/fracture/dist/script.js
@@ -0,0 +1,590 @@
+import { SVG } from 'https://cdn.skypack.dev/@svgdotjs/svg.js'
+import { Vec2 } from 'https://cdn.skypack.dev/wtc-math';
+console.clear();
+
+const config = {
+  drawingType: 1,
+  dimensions: (new Vec2(window.innerWidth, window.innerHeight)).scale(2),
+  breakRun: 2000,
+  maxDepth: 12,
+  maxPerRun: 100,
+  insertType: 1,
+  randomType: 0
+};
+const vars = {
+  drawing: null,
+  i:0,
+  running: true,
+  triangles: []
+}
+const setup = () => {
+  vars.running = false;
+  setTimeout(() => {
+    vars.running = true;
+    vars.triangles = [];
+    config.insertType = Math.floor(Math.random() * 3);
+    config.randomType = Math.floor(Math.random() * 3);
+    vars.i=0;
+    
+    document.querySelector('#container').innerHTML = '';
+    vars.drawing = new Drawing(config.drawingType).addTo('#container').size(config.dimensions);
+    document.body.querySelector('#container>:first-child').addEventListener('click', () => {
+      setup();
+    });
+    
+    draw();
+  }, 100);
+};
+
+window.addEventListener('resize', () => {
+  config.dimensions = ( new Vec2(window.innerWidth, window.innerHeight)).scale(2)
+  setup();
+});
+
+let depth = 0;
+const ts = [
+  ['a', 'b'],
+  ['b', 'c'],
+  ['c', 'a']
+];
+const drawStep = () => {
+  if(!vars.running) return;
+  if(vars.i > 2000) return;
+  let newTriangles = [];
+  vars.triangles.forEach((triangle,i) => {
+    if(i>config.breakRun) {
+      // newTriangles.splice(0,0,triangle);
+      return;
+    }
+    vars.drawing.polygon(triangle.points);
+    let c = triangle.randomCentroid;
+    if(config.randomType == 0) {
+      c = triangle.centroid;
+    } 
+    
+    // vars.drawing.circle(c, 5);
+    if(triangle.depth < config.maxDepth) {
+      ts.forEach(t => {
+        const tr = new Triangle(triangle[t[0]], triangle[t[1]], c);
+        tr.depth=triangle.depth+1;
+        newTriangles.push(tr); 
+      });
+    }
+  });
+  if(config.insertType === 0) {
+    if(vars.triangles.length>config.breakRun) newTriangles = vars.triangles.splice(config.breakRun).concat(newTriangles);
+  } else if(config.insertType === 1) {
+    if(vars.triangles.length>config.breakRun) newTriangles = vars.triangles.splice(config.breakRun).reverse().concat(newTriangles);
+  } else {
+    newTriangles = newTriangles.concat(vars.triangles.splice(config.breakRun));
+  }
+  
+  vars.triangles = newTriangles;
+  vars.i++;
+  requestAnimationFrame(drawStep);
+}
+let interval;
+const draw = () => {
+  vars.drawing.linewidth = 1;
+  vars.drawing.fill = "#333";
+  vars.drawing.rect(new Vec2(0,0), config.dimensions);
+  vars.drawing.linewidth = 1;
+  vars.drawing.fill = null;
+  vars.drawing.stroke = 'rgba(255,255,255,.02)'
+  
+  const r = Math.min(config.dimensions.x, config.dimensions.y) * .6;
+  const offset = r * 0.2333;
+  const points = [];
+  for(let i = 0.; i < Math.PI * 2; i += Math.PI * 2. / 3.) {
+    points.push( new Vec2(Math.cos(i+Math.PI*.5) * r + config.dimensions.x / 2, Math.sin(i+Math.PI*.5) * r + config.dimensions.y / 2 - offset) );
+  }
+  
+  const t = new Triangle(...points);
+ t.depth=0;
+  vars.triangles.push(t);
+  
+  drawStep();
+}
+
+class Triangle {
+  
+  #points
+  
+  constructor(a, b, c) {
+    this.points = [a, b, c];
+  }
+  
+  set points(p) {
+    if(p.reduce((a, c) => c instanceof Vec2 ? a+1 : 0, 0) === 3) this.#points = p;
+  }
+  get points() {
+    return this.#points || [];
+  }
+  
+  get a() {
+    return this.#points[0];
+  }
+  get b() {
+    return this.#points[1];
+  }
+  get c() {
+    return this.#points[2];
+  }
+  
+  get circumcenter() {
+    const d = this.b.subtractNew(this.a);
+    const e = this.c.subtractNew(this.a);
+
+    const bl = d.x * d.x + d.y * d.y;
+    const cl = e.x * e.x + e.y * e.y;
+    const ds = 0.5 / (d.x * e.y - d.y * e.x);
+    
+    return new Vec2(
+      this.a.x + (e.y * bl - d.y * cl) * ds,
+      this.a.y + (d.x * cl - e.x * bl) * ds
+    );
+  }
+  get randomCentroid() {
+    let a = floatRandomBetween(.2,1.8);
+    let b = floatRandomBetween(.2,1.8);
+    let c = floatRandomBetween(.2,1.8);
+    let abc = a+b+c;
+    const f = (3-abc)/3;
+    a += f;
+    b += f;
+    c += f;
+    return this.a.scaleNew(a).add(this.b.scaleNew(b)).add(this.c.scaleNew(c)).divideScalar(3);
+  }
+  get centroid() {
+    const a = floatRandomBetween(.5,1.5);
+    const b = floatRandomBetween(.5,1.5);
+    const c = floatRandomBetween(.5,1.5);
+    const abc = a+b+c;
+    return this.a.addNew(this.b).add(this.c).divideScalar(3);
+  }
+  
+  get isComplete() {
+    return this.points.reduce((a, c) => c instanceof Vec2 ? a+1 : 0, 0) === 3;
+  }
+  
+  get segments() {
+    return [
+      {
+        a: this.a,
+        b: this.b,
+        c: this.c,
+        segment: this.a.subtractNew(this.b)
+      },
+      {
+        a: this.b,
+        b: this.c,
+        c: this.a,
+        segment: this.b.subtractNew(this.c)
+      },
+      {
+        a: this.c,
+        b: this.a,
+        c: this.b,
+        segment: this.c.subtractNew(this.a)
+      }
+    ];
+  }
+  
+  get angles() {
+    let ab = this.b.subtractNew(this.a).normalise();
+    let ac = this.c.subtractNew(this.a).normalise();
+    
+    let ba = this.a.subtractNew(this.b).normalise();
+    let bc = this.c.subtractNew(this.b).normalise();
+    
+    const ta = (Math.acos(ab.dot(ac)));
+    const tb = (Math.acos(ba.dot(bc)));
+    const tc = (Math.acos(ac.dot(bc)));
+    
+    return [ta,tb,tc];
+  }
+  
+  get isEqualateral() {
+    return this.numEqualSides === 3;
+  }
+  get isIsosceles() {
+    return this.numEqualSides === 2;
+  }
+  get isScalene() {
+    return this.numEqualSides === 1;
+  }
+  get isRightAngle() {
+    return this.angles.reduce((n, s) => n || precisionRound(Math.abs(s * 180 / Math.PI), 3) === 90, false);
+  }
+  get isObtuse() {
+    return this.angles.reduce((n, s) => n || precisionRound(Math.abs(s * 180 / Math.PI), 3) > 90, false);
+  }
+  get isAcute() {
+    return !this.isObtuse;
+  }
+  
+  get numEqualSides() {
+    const ls = this.segments.map(seg => precisionRound(seg.segment.length, 3));
+    const n = ls.map(l => ls.reduce((n, l1) => n + (l1 === l), 0));
+    return n.reduce((a, b) => b > a ? b : a, 0);
+  }
+  
+  get hypot() {
+    const segs = this.segments;
+    let longest = 0;
+    let hypotenuse = {};
+    segs.forEach(seg => {
+      if(seg.segment.length > longest) {
+        longest = seg.segment.length;
+        hypotenuse = seg;
+      }
+    });
+    return hypotenuse;
+  }
+}
+
+setTimeout(() => {
+  setup();
+}, 500);
+
+class Drawing {
+  static #defaults = {
+    stroke: '#333',
+    pxratio: 1
+  }
+  static DT_CANVAS = 1;
+  static DT_SVG = 2;
+  #drawing;
+  #ctx;
+  #mode;
+  #instructions = [];
+  
+  constructor(mode = Drawing.DT_CANVAS, settings) {
+    settings = Object.assign({}, Drawing.#defaults, settings);
+    
+    this.mode = mode;
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.#drawing = document.createElement('canvas');
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.#drawing = SVG();
+    }
+    
+    this.stroke = settings.stroke;
+    this.pxratio = settings.pxratio;
+  }
+  clear() {
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.clearRect(0,0,...this.dimensions.array);
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.clear();
+    }
+  }
+  rect(position, dimensions) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'rect',
+        args: [position, dimensions]
+      });
+    }
+    position = position.scaleNew(this.pxratio);
+    dimensions = dimensions.scaleNew(this.pxratio);
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      this.c.rect(...position.array, ...dimensions.array);
+      if(this.stroke) this.c.stroke();
+      if(this.fill) this.c.fill();
+    } else if(this.mode & Drawing.DT_SVG) {
+      return this.drawing.rect(dimensions.width, dimensions.height).move(...position.array).fill("none").stroke(this.strokeParams);
+    }
+  }
+  circle(position, radius) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'circle',
+        args: [position, radius]
+      });
+    }
+    position = position.scaleNew(this.pxratio);
+    radius *= this.pxratio;
+    if(this.mode & Drawing.DT_CANVAS) {
+      if(!window.trace) {
+        console.log(this.fill)
+        window.trace = true;
+      }
+      if(this.fill) this.c.fillStyle = this.fill;
+      this.c.beginPath();
+      this.c.arc(position.x, position.y, radius, 0, 2 * Math.PI);
+      if(this.stroke) this.c.stroke();
+      if(this.fill) this.c.fill();
+    } else if(this.mode & Drawing.DT_SVG) {
+      return this.drawing.circle(radius*2).fill("none").stroke(this.strokeParams).move(...position.subtractScalarNew(radius).array);
+    }
+  }
+  line(a, b) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'line',
+        args: [a, b]
+      });
+    }
+    a = a.scaleNew(this.pxratio);
+    b = b.scaleNew(this.pxratio);
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      this.c.moveTo(a.x, a.y);
+      this.c.lineTo(b.x, b.y);
+      if(this.stroke) this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      return this.drawing.line(...a.array, ...b.array).stroke(this.strokeParams);
+    }
+  }
+  polyline(points) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'polyline',
+        args: points
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      points.forEach((p, i) => {
+        p = p.scaleNew(this.pxratio);
+        if(i === 0) this.c.moveTo(p.x, p.y);
+        else this.c.lineTo(p.x, p.y);
+      })
+      if(this.stroke) this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      return this.drawing.polyline(points.map(p => p.array)).fill('none').stroke(this.strokeParams);
+    }
+  }
+  path(path) {
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      const p1 = new Path2D(path);
+      const m = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix()
+      const p = new Path2D();
+      const t = m.scale(this.pxratio);
+      p.addPath(p1, t);
+      if(this.stroke) this.c.stroke(p);
+    } else if(this.mode & Drawing.DT_SVG) {
+      const _path = this.drawing.path().fill('none').stroke(this.strokeParams);
+      _path.plot(path);
+      return _path;
+    }
+  }
+  polygon(points) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'polygon',
+        args: [points]
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      points.forEach((p, i) => {
+        p = p.scaleNew(this.pxratio);
+        if(i === 0) this.c.moveTo(p.x, p.y);
+        else this.c.lineTo(p.x, p.y);
+      })
+      if(this.stroke) this.c.stroke();
+      if(this.fill) this.c.fill();
+    } else if(this.mode & Drawing.DT_SVG) {
+      return this.drawing.polygon(points.map(p => p.array)).fill('none').stroke(this.strokeParams);
+    }
+  }
+  
+  download() {
+    let d;
+    if(this.mode & Drawing.DT_CANVAS) {
+      d = new Drawing(Drawing.DT_SVG).size(this.dimensions);
+      this.#instructions.forEach((i) => {
+        d[i.f](...i.args);
+      });
+    } else if(this.mode & Drawing.DT_SVG) {
+      d = this;
+    }
+    
+    const fileName = "untitled.svg"
+    const url = "data:image/svg+xml;utf8," + encodeURIComponent(d.drawing.svg());
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = url;
+    link.click();
+  }
+  
+  addTo(element) {
+    if(typeof(element) === 'string') {
+      if(this.mode & Drawing.DT_CANVAS) {
+        document.body.querySelector(element).appendChild(this.drawing);
+      } else if(this.mode & Drawing.DT_SVG) {
+        this.drawing.addTo('#container');
+      }
+    }
+    return this;
+  }
+  
+  size(d) {
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.drawing.width = d.width * this.#pxratio;
+      this.drawing.height = d.height * this.#pxratio;
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.viewbox(0, 0, d.x, d.y)
+      this.drawing.size(...d.scaleNew(this.#pxratio).array);
+    }
+    this.#dimensions = d;
+    return this;
+  }
+  
+  #dimensions
+  set dimensions(v) {
+    if(v instanceof Vec2) {
+      this.#dimensions = v;
+      this.size(v);
+    }
+  }
+  get dimensions() {
+    return this.#dimensions;
+  }
+  
+  #pxratio = 1;
+  set pxratio(v) {
+    if(v > 0) {
+      this.#pxratio = v;
+    }
+  }
+  get pxratio() {
+    return this.#pxratio || 1;
+  }
+  
+  get drawing() {
+    return this.#drawing;
+  }
+  get c() {
+    if(this.mode & Drawing.DT_CANVAS) {
+      if(this.#ctx) return this.#ctx;
+      this.#ctx = this.drawing.getContext('2d');
+      return this.#ctx;
+    }
+  }
+  #stroke;
+  set stroke(v) {
+    this.#stroke = v;
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.strokeStyle = v;
+    }
+  }
+  get stroke() {
+    return this.#stroke;
+  }
+  #fill = null;
+  set fill(v) {
+    this.#fill = v;
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.fillStyle = v;
+    }
+  }
+  get fill() {
+    return this.#fill;
+  }
+  #linecap = null;
+  set linecap(v) {
+    if(['square', 'butt', 'round'].indexOf(v) > -1) {
+      this.#linecap = v;
+      if(this.mode & Drawing.DT_CANVAS) {
+        this.c.lineCap = v;
+      }
+    }
+  }
+  get linecap() {
+    return this.#linecap;
+  }
+  #lineWidth
+  set linewidth(v) {
+    if(v > 0) {
+      this.#lineWidth = v;
+      if(this.mode & Drawing.DT_CANVAS) {
+        this.c.lineWidth = v*this.pxratio;
+      }
+    }
+  }
+  get linewidth() {
+    return this.#lineWidth;
+  }
+  get strokeParams() {
+    const params = {};
+    if(this.#lineWidth) params.width = this.#lineWidth;
+    if(this.#stroke) params.color = this.#stroke;
+    if(this.#linecap) params.linecap = this.#linecap;
+    return params;
+  }
+  set mode(v) {
+    if(v & (Drawing.DT_CANVAS | Drawing.DT_SVG)) {
+      this.#mode = v;
+    }
+  }
+  get mode() {
+    return this.#mode || Drawing.DT_CANVAS;
+  }
+  #saving = false
+  set saving(v) {
+    this.#saving = v === true;
+  }
+  get saving() {
+    return this.#saving;
+  }
+}
+
+ /// Create the download button/
+/*
+const dl = document.createElement('button');
+dl.innerText = 'download';
+dl.addEventListener('click', () => { 
+  vars.drawing.download();
+});
+document.body.querySelector('#container').appendChild(dl);
+*/
+
+
+
+const floatRandomBetween = (min, max) => {
+  return Math.random() * (max - min) + min;
+};
+const clamp = function(a, b, v) {
+  return Math.min(b, Math.max(a, v));
+}
+const lerp = function(a, b, progress) {
+  return a + progress * (b - a);
+}
+const hash21 = (p) => {
+  const o = p.dot(new Vec2(27.609, 57.583));
+  return fract(Math.sin(o)*config.seed);
+}
+const precisionRound = (n, p) => {
+  const ip = Math.pow(10, p);
+  return Math.round(n*ip)/ip;
+}
+const fract = (n, p = 6) => {
+  const ip = Math.pow(10, p);
+  const _n = Math.abs(Math.floor(n*ip)/ip);
+  if(_n < 1) return _n;
+  return Math.floor(_n % Math.floor(_n)*ip)/ip;
+}
+const pal = ( t, a, b, c, d ) => {
+  const mp = c.scaleNew(t).add(d).scale(6.28318);
+  mp.x = Math.cos(mp.x);
+  mp.y = Math.cos(mp.y);
+  mp.z = Math.cos(mp.z);
+  return a.addNew(b.multiplyNew(mp));
+}
+const getColour = (d) => {
+  const col = pal( 
+    d/70+.65, 
+    new Vec3(0.5,0.5,0.5),
+    new Vec3(0.5,0.5,0.5),
+    new Vec3(1.0,1.0,1.0),
+    new Vec3(0.0,0.1,0.2) );
+
+  const colour = Math.floor(col.x * 255).toString(16) + Math.floor(col.y * 255).toString(16) + Math.floor(col.z * 255).toString(16);
+  const a = Math.floor((1.-d/30)*255).toString(16);
+  return colour+a;
+}
\ No newline at end of file
diff --git a/fracture/dist/style.css b/fracture/dist/style.css
new file mode 100644
index 0000000..f28d806
--- /dev/null
+++ b/fracture/dist/style.css
@@ -0,0 +1,30 @@
+document, body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+body {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+#container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+
+#container > :first-child {
+  cursor: pointer;
+}
+
+button {
+  max-width: 200px;
+  margin-top: 10px;
+}
+
+canvas, svg {
+  width: 100vw;
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/fracture/license.txt b/fracture/license.txt
new file mode 100644
index 0000000..8a4d768
--- /dev/null
+++ b/fracture/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Liam Egan (https://codepen.io/shubniggurath/pen/jOBJdRV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/fracture/src/index.pug b/fracture/src/index.pug
new file mode 100644
index 0000000..dce8f5f
--- /dev/null
+++ b/fracture/src/index.pug
@@ -0,0 +1 @@
+#container
\ No newline at end of file
diff --git a/fracture/src/script.js b/fracture/src/script.js
new file mode 100644
index 0000000..b3d40a6
--- /dev/null
+++ b/fracture/src/script.js
@@ -0,0 +1,591 @@
+import { SVG } from 'https://cdn.skypack.dev/@svgdotjs/svg.js'
+import { Vec2 } from 'https://cdn.skypack.dev/wtc-math';
+console.clear();
+
+const config = {
+  drawingType: 1,
+  dimensions: (new Vec2(window.innerWidth, window.innerHeight)).scale(2),
+  breakRun: 2000,
+  maxDepth: 12,
+  maxPerRun: 100,
+  insertType: 1,
+  randomType: 0
+};
+const vars = {
+  drawing: null,
+  i:0,
+  running: true,
+  triangles: []
+}
+const setup = () => {
+  vars.running = false;
+  setTimeout(() => {
+    vars.running = true;
+    vars.triangles = [];
+    config.insertType = Math.floor(Math.random() * 3);
+    config.randomType = Math.floor(Math.random() * 3);
+    vars.i=0;
+    
+    document.querySelector('#container').innerHTML = '';
+    vars.drawing = new Drawing(config.drawingType).addTo('#container').size(config.dimensions);
+    document.body.querySelector('#container>:first-child').addEventListener('click', () => {
+      setup();
+    });
+    
+    draw();
+  }, 100);
+};
+
+window.addEventListener('resize', () => {
+  config.dimensions = ( new Vec2(window.innerWidth, window.innerHeight)).scale(2)
+  setup();
+});
+
+let depth = 0;
+const ts = [
+  ['a', 'b'],
+  ['b', 'c'],
+  ['c', 'a']
+];
+const drawStep = () => {
+  if(!vars.running) return;
+  if(vars.i > 2000) return;
+  let newTriangles = [];
+  vars.triangles.forEach((triangle,i) => {
+    if(i>config.breakRun) {
+      // newTriangles.splice(0,0,triangle);
+      return;
+    }
+    vars.drawing.polygon(triangle.points);
+    let c = triangle.randomCentroid;
+    if(config.randomType == 0) {
+      c = triangle.centroid;
+    } 
+    
+    // vars.drawing.circle(c, 5);
+    if(triangle.depth < config.maxDepth) {
+      ts.forEach(t => {
+        const tr = new Triangle(triangle[t[0]], triangle[t[1]], c);
+        tr.depth=triangle.depth+1;
+        newTriangles.push(tr); 
+      });
+    }
+  });
+  if(config.insertType === 0) {
+    if(vars.triangles.length>config.breakRun) newTriangles = vars.triangles.splice(config.breakRun).concat(newTriangles);
+  } else if(config.insertType === 1) {
+    if(vars.triangles.length>config.breakRun) newTriangles = vars.triangles.splice(config.breakRun).reverse().concat(newTriangles);
+  } else {
+    newTriangles = newTriangles.concat(vars.triangles.splice(config.breakRun));
+  }
+  
+  vars.triangles = newTriangles;
+  vars.i++;
+  requestAnimationFrame(drawStep);
+}
+let interval;
+const draw = () => {
+  vars.drawing.linewidth = 1;
+  vars.drawing.fill = "#333";
+  vars.drawing.rect(new Vec2(0,0), config.dimensions);
+  vars.drawing.linewidth = 1;
+  vars.drawing.fill = null;
+  vars.drawing.stroke = 'rgba(255,255,255,.02)'
+  
+  const r = Math.min(config.dimensions.x, config.dimensions.y) * .6;
+  const offset = r * 0.2333;
+  const points = [];
+  for(let i = 0.; i < Math.PI * 2; i += Math.PI * 2. / 3.) {
+    points.push( new Vec2(Math.cos(i+Math.PI*.5) * r + config.dimensions.x / 2, Math.sin(i+Math.PI*.5) * r + config.dimensions.y / 2 - offset) );
+  }
+  
+  const t = new Triangle(...points);
+ t.depth=0;
+  vars.triangles.push(t);
+  
+  drawStep();
+}
+
+class Triangle {
+  
+  #points
+  
+  constructor(a, b, c) {
+    this.points = [a, b, c];
+  }
+  
+  set points(p) {
+    if(p.reduce((a, c) => c instanceof Vec2 ? a+1 : 0, 0) === 3) this.#points = p;
+  }
+  get points() {
+    return this.#points || [];
+  }
+  
+  get a() {
+    return this.#points[0];
+  }
+  get b() {
+    return this.#points[1];
+  }
+  get c() {
+    return this.#points[2];
+  }
+  
+  get circumcenter() {
+    const d = this.b.subtractNew(this.a);
+    const e = this.c.subtractNew(this.a);
+
+    const bl = d.x * d.x + d.y * d.y;
+    const cl = e.x * e.x + e.y * e.y;
+    const ds = 0.5 / (d.x * e.y - d.y * e.x);
+    
+    return new Vec2(
+      this.a.x + (e.y * bl - d.y * cl) * ds,
+      this.a.y + (d.x * cl - e.x * bl) * ds
+    );
+  }
+  get randomCentroid() {
+    let a = floatRandomBetween(.2,1.8);
+    let b = floatRandomBetween(.2,1.8);
+    let c = floatRandomBetween(.2,1.8);
+    let abc = a+b+c;
+    const f = (3-abc)/3;
+    a += f;
+    b += f;
+    c += f;
+    return this.a.scaleNew(a).add(this.b.scaleNew(b)).add(this.c.scaleNew(c)).divideScalar(3);
+  }
+  get centroid() {
+    const a = floatRandomBetween(.5,1.5);
+    const b = floatRandomBetween(.5,1.5);
+    const c = floatRandomBetween(.5,1.5);
+    const abc = a+b+c;
+    return this.a.addNew(this.b).add(this.c).divideScalar(3);
+  }
+  
+  get isComplete() {
+    return this.points.reduce((a, c) => c instanceof Vec2 ? a+1 : 0, 0) === 3;
+  }
+  
+  get segments() {
+    return [
+      {
+        a: this.a,
+        b: this.b,
+        c: this.c,
+        segment: this.a.subtractNew(this.b)
+      },
+      {
+        a: this.b,
+        b: this.c,
+        c: this.a,
+        segment: this.b.subtractNew(this.c)
+      },
+      {
+        a: this.c,
+        b: this.a,
+        c: this.b,
+        segment: this.c.subtractNew(this.a)
+      }
+    ];
+  }
+  
+  get angles() {
+    let ab = this.b.subtractNew(this.a).normalise();
+    let ac = this.c.subtractNew(this.a).normalise();
+    
+    let ba = this.a.subtractNew(this.b).normalise();
+    let bc = this.c.subtractNew(this.b).normalise();
+    
+    const ta = (Math.acos(ab.dot(ac)));
+    const tb = (Math.acos(ba.dot(bc)));
+    const tc = (Math.acos(ac.dot(bc)));
+    
+    return [ta,tb,tc];
+  }
+  
+  get isEqualateral() {
+    return this.numEqualSides === 3;
+  }
+  get isIsosceles() {
+    return this.numEqualSides === 2;
+  }
+  get isScalene() {
+    return this.numEqualSides === 1;
+  }
+  get isRightAngle() {
+    return this.angles.reduce((n, s) => n || precisionRound(Math.abs(s * 180 / Math.PI), 3) === 90, false);
+  }
+  get isObtuse() {
+    return this.angles.reduce((n, s) => n || precisionRound(Math.abs(s * 180 / Math.PI), 3) > 90, false);
+  }
+  get isAcute() {
+    return !this.isObtuse;
+  }
+  
+  get numEqualSides() {
+    const ls = this.segments.map(seg => precisionRound(seg.segment.length, 3));
+    const n = ls.map(l => ls.reduce((n, l1) => n + (l1 === l), 0));
+    return n.reduce((a, b) => b > a ? b : a, 0);
+  }
+  
+  get hypot() {
+    const segs = this.segments;
+    let longest = 0;
+    let hypotenuse = {};
+    segs.forEach(seg => {
+      if(seg.segment.length > longest) {
+        longest = seg.segment.length;
+        hypotenuse = seg;
+      }
+    });
+    return hypotenuse;
+  }
+}
+
+setTimeout(() => {
+  setup();
+}, 500);
+
+class Drawing {
+  static #defaults = {
+    stroke: '#333',
+    pxratio: 1
+  }
+  static DT_CANVAS = 1;
+  static DT_SVG = 2;
+  #drawing;
+  #ctx;
+  #mode;
+  #instructions = [];
+  
+  constructor(mode = Drawing.DT_CANVAS, settings) {
+    settings = Object.assign({}, Drawing.#defaults, settings);
+    
+    this.mode = mode;
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.#drawing = document.createElement('canvas');
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.#drawing = SVG();
+    }
+    
+    this.stroke = settings.stroke;
+    this.pxratio = settings.pxratio;
+  }
+  clear() {
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.clearRect(0,0,...this.dimensions.array);
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.clear();
+    }
+  }
+  rect(position, dimensions) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'rect',
+        args: [position, dimensions]
+      });
+    }
+    position = position.scaleNew(this.pxratio);
+    dimensions = dimensions.scaleNew(this.pxratio);
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      this.c.rect(...position.array, ...dimensions.array);
+      if(this.stroke) this.c.stroke();
+      if(this.fill) this.c.fill();
+    } else if(this.mode & Drawing.DT_SVG) {
+      return this.drawing.rect(dimensions.width, dimensions.height).move(...position.array).fill("none").stroke(this.strokeParams);
+    }
+  }
+  circle(position, radius) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'circle',
+        args: [position, radius]
+      });
+    }
+    position = position.scaleNew(this.pxratio);
+    radius *= this.pxratio;
+    if(this.mode & Drawing.DT_CANVAS) {
+      if(!window.trace) {
+        console.log(this.fill)
+        window.trace = true;
+      }
+      if(this.fill) this.c.fillStyle = this.fill;
+      this.c.beginPath();
+      this.c.arc(position.x, position.y, radius, 0, 2 * Math.PI);
+      if(this.stroke) this.c.stroke();
+      if(this.fill) this.c.fill();
+    } else if(this.mode & Drawing.DT_SVG) {
+      return this.drawing.circle(radius*2).fill("none").stroke(this.strokeParams).move(...position.subtractScalarNew(radius).array);
+    }
+  }
+  line(a, b) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'line',
+        args: [a, b]
+      });
+    }
+    a = a.scaleNew(this.pxratio);
+    b = b.scaleNew(this.pxratio);
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      this.c.moveTo(a.x, a.y);
+      this.c.lineTo(b.x, b.y);
+      if(this.stroke) this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      return this.drawing.line(...a.array, ...b.array).stroke(this.strokeParams);
+    }
+  }
+  polyline(points) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'polyline',
+        args: points
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      points.forEach((p, i) => {
+        p = p.scaleNew(this.pxratio);
+        if(i === 0) this.c.moveTo(p.x, p.y);
+        else this.c.lineTo(p.x, p.y);
+      })
+      if(this.stroke) this.c.stroke();
+    } else if(this.mode & Drawing.DT_SVG) {
+      return this.drawing.polyline(points.map(p => p.array)).fill('none').stroke(this.strokeParams);
+    }
+  }
+  path(path) {
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      const p1 = new Path2D(path);
+      const m = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix()
+      const p = new Path2D();
+      const t = m.scale(this.pxratio);
+      p.addPath(p1, t);
+      if(this.stroke) this.c.stroke(p);
+    } else if(this.mode & Drawing.DT_SVG) {
+      const _path = this.drawing.path().fill('none').stroke(this.strokeParams);
+      _path.plot(path);
+      return _path;
+    }
+  }
+  polygon(points) {
+    if(this.saving) {
+      this.#instructions.push({
+        f: 'polygon',
+        args: [points]
+      });
+    }
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.beginPath();
+      points.forEach((p, i) => {
+        p = p.scaleNew(this.pxratio);
+        if(i === 0) this.c.moveTo(p.x, p.y);
+        else this.c.lineTo(p.x, p.y);
+      })
+      if(this.stroke) this.c.stroke();
+      if(this.fill) this.c.fill();
+    } else if(this.mode & Drawing.DT_SVG) {
+      return this.drawing.polygon(points.map(p => p.array)).fill('none').stroke(this.strokeParams);
+    }
+  }
+  
+  download() {
+    let d;
+    if(this.mode & Drawing.DT_CANVAS) {
+      d = new Drawing(Drawing.DT_SVG).size(this.dimensions);
+      this.#instructions.forEach((i) => {
+        d[i.f](...i.args);
+      });
+    } else if(this.mode & Drawing.DT_SVG) {
+      d = this;
+    }
+    
+    const fileName = "untitled.svg"
+    const url = "data:image/svg+xml;utf8," + encodeURIComponent(d.drawing.svg());
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = url;
+    link.click();
+  }
+  
+  addTo(element) {
+    if(typeof(element) === 'string') {
+      if(this.mode & Drawing.DT_CANVAS) {
+        document.body.querySelector(element).appendChild(this.drawing);
+      } else if(this.mode & Drawing.DT_SVG) {
+        this.drawing.addTo('#container');
+      }
+    }
+    return this;
+  }
+  
+  size(d) {
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.drawing.width = d.width * this.#pxratio;
+      this.drawing.height = d.height * this.#pxratio;
+    } else if(this.mode & Drawing.DT_SVG) {
+      this.drawing.viewbox(0, 0, d.x, d.y)
+      this.drawing.size(...d.scaleNew(this.#pxratio).array);
+    }
+    this.#dimensions = d;
+    return this;
+  }
+  
+  #dimensions
+  set dimensions(v) {
+    if(v instanceof Vec2) {
+      this.#dimensions = v;
+      this.size(v);
+    }
+  }
+  get dimensions() {
+    return this.#dimensions;
+  }
+  
+  #pxratio = 1;
+  set pxratio(v) {
+    if(v > 0) {
+      this.#pxratio = v;
+    }
+  }
+  get pxratio() {
+    return this.#pxratio || 1;
+  }
+  
+  get drawing() {
+    return this.#drawing;
+  }
+  get c() {
+    if(this.mode & Drawing.DT_CANVAS) {
+      if(this.#ctx) return this.#ctx;
+      this.#ctx = this.drawing.getContext('2d');
+      return this.#ctx;
+    }
+  }
+  #stroke;
+  set stroke(v) {
+    this.#stroke = v;
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.strokeStyle = v;
+    }
+  }
+  get stroke() {
+    return this.#stroke;
+  }
+  #fill = null;
+  set fill(v) {
+    this.#fill = v;
+    if(this.mode & Drawing.DT_CANVAS) {
+      this.c.fillStyle = v;
+    }
+  }
+  get fill() {
+    return this.#fill;
+  }
+  #linecap = null;
+  set linecap(v) {
+    if(['square', 'butt', 'round'].indexOf(v) > -1) {
+      this.#linecap = v;
+      if(this.mode & Drawing.DT_CANVAS) {
+        this.c.lineCap = v;
+      }
+    }
+  }
+  get linecap() {
+    return this.#linecap;
+  }
+  #lineWidth
+  set linewidth(v) {
+    if(v > 0) {
+      this.#lineWidth = v;
+      if(this.mode & Drawing.DT_CANVAS) {
+        this.c.lineWidth = v*this.pxratio;
+      }
+    }
+  }
+  get linewidth() {
+    return this.#lineWidth;
+  }
+  get strokeParams() {
+    const params = {};
+    if(this.#lineWidth) params.width = this.#lineWidth;
+    if(this.#stroke) params.color = this.#stroke;
+    if(this.#linecap) params.linecap = this.#linecap;
+    return params;
+  }
+  set mode(v) {
+    if(v & (Drawing.DT_CANVAS | Drawing.DT_SVG)) {
+      this.#mode = v;
+    }
+  }
+  get mode() {
+    return this.#mode || Drawing.DT_CANVAS;
+  }
+  #saving = false
+  set saving(v) {
+    this.#saving = v === true;
+  }
+  get saving() {
+    return this.#saving;
+  }
+}
+
+ /// Create the download button/
+/*
+const dl = document.createElement('button');
+dl.innerText = 'download';
+dl.addEventListener('click', () => { 
+  vars.drawing.download();
+});
+document.body.querySelector('#container').appendChild(dl);
+*/
+
+
+
+const floatRandomBetween = (min, max) => {
+  return Math.random() * (max - min) + min;
+};
+const clamp = function(a, b, v) {
+  return Math.min(b, Math.max(a, v));
+}
+const lerp = function(a, b, progress) {
+  return a + progress * (b - a);
+}
+const hash21 = (p) => {
+  const o = p.dot(new Vec2(27.609, 57.583));
+  return fract(Math.sin(o)*config.seed);
+}
+const precisionRound = (n, p) => {
+  const ip = Math.pow(10, p);
+  return Math.round(n*ip)/ip;
+}
+const fract = (n, p = 6) => {
+  const ip = Math.pow(10, p);
+  const _n = Math.abs(Math.floor(n*ip)/ip);
+  if(_n < 1) return _n;
+  return Math.floor(_n % Math.floor(_n)*ip)/ip;
+}
+const pal = ( t, a, b, c, d ) => {
+  const mp = c.scaleNew(t).add(d).scale(6.28318);
+  mp.x = Math.cos(mp.x);
+  mp.y = Math.cos(mp.y);
+  mp.z = Math.cos(mp.z);
+  return a.addNew(b.multiplyNew(mp));
+}
+const getColour = (d) => {
+  const col = pal( 
+    d/70+.65, 
+    new Vec3(0.5,0.5,0.5),
+    new Vec3(0.5,0.5,0.5),
+    new Vec3(1.0,1.0,1.0),
+    new Vec3(0.0,0.1,0.2) );
+
+  const colour = Math.floor(col.x * 255).toString(16) + Math.floor(col.y * 255).toString(16) + Math.floor(col.z * 255).toString(16);
+  const a = Math.floor((1.-d/30)*255).toString(16);
+  return colour+a;
+}
+
diff --git a/fracture/src/style.scss b/fracture/src/style.scss
new file mode 100644
index 0000000..82758e5
--- /dev/null
+++ b/fracture/src/style.scss
@@ -0,0 +1,28 @@
+document, body {
+  margin: 0;
+  min-height: 100vh;
+}
+body {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+#container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+#container>:first-child {
+  cursor: pointer;
+}
+
+button {
+  max-width: 200px;
+  margin-top: 10px;
+}
+
+canvas, svg {
+  width:100vw;
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/fragment-shaders-ex-7/README.markdown b/fragment-shaders-ex-7/README.markdown
new file mode 100644
index 0000000..8a463b5
--- /dev/null
+++ b/fragment-shaders-ex-7/README.markdown
@@ -0,0 +1,4 @@
+# Fragment Shaders Ex.7
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/sfi0zy/pen/mGyVBK](https://codepen.io/sfi0zy/pen/mGyVBK).
+
+ https://habr.com/post/420847/
\ No newline at end of file
diff --git a/fragment-shaders-ex-7/dist/index.html b/fragment-shaders-ex-7/dist/index.html
new file mode 100644
index 0000000..3d0abb3
--- /dev/null
+++ b/fragment-shaders-ex-7/dist/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Fragment Shaders Ex.7</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class='container'>
+    <div class='canvas-wrapper'>
+        <canvas id='canvas'></canvas>
+    </div>
+</div>
+
+
+<script id='vertex-shader' type='x-shader/x-vertex'>
+    precision mediump float;
+
+    attribute vec2 a_position;
+
+    void main() {
+        gl_Position = vec4(a_position, 0, 1);
+    }
+</script>
+
+
+<script id='fragment-shader' type='x-shader/x-fragment'>
+    precision mediump float;
+
+    uniform sampler2D u_texture;
+    uniform float u_time;
+    uniform float u_canvas_size;
+
+
+    float rand(vec2);
+    float noise(vec2);
+
+
+    void main() {
+        vec2 texture_coord = gl_FragCoord.xy / u_canvas_size;
+
+        gl_FragColor = texture2D(u_texture,
+            texture_coord
+            + vec2(
+                noise(texture_coord * 10.0 + sin(u_time + texture_coord.x * 5.0)) / 10.0,
+                noise(texture_coord * 10.0 + cos(u_time + texture_coord.y * 5.0)) / 10.0));
+    }
+
+
+    float rand(vec2 seed) {
+        return fract(sin(dot(seed, vec2(12.9898,78.233))) * 43758.5453123);
+    }
+    
+    
+    float noise(vec2 position) {
+        vec2 block_position = floor(position);
+
+        float top_left_value     = rand(block_position);
+        float top_right_value    = rand(block_position + vec2(1.0, 0.0));
+        float bottom_left_value  = rand(block_position + vec2(0.0, 1.0));
+        float bottom_right_value = rand(block_position + vec2(1.0, 1.0));
+
+        vec2 computed_value = smoothstep(0.0, 1.0, fract(position));
+
+        return computed_value.x;
+    }
+</script>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/fragment-shaders-ex-7/dist/script.js b/fragment-shaders-ex-7/dist/script.js
new file mode 100644
index 0000000..c6c89de
--- /dev/null
+++ b/fragment-shaders-ex-7/dist/script.js
@@ -0,0 +1,142 @@
+const IDs = {
+  canvas: 'canvas',
+  shaders: {
+    vertex: 'vertex-shader',
+    fragment: 'fragment-shader' } };
+
+
+
+
+const CANVAS = document.getElementById(IDs.canvas);
+const GL = canvas.getContext('webgl');
+
+let PROGRAM;
+
+
+main();
+
+
+function main() {
+  clearCanvas();
+  createPlane();
+  createProgram();
+  createTexture();
+  updateCanvasSize();
+  initEventListeners();
+  draw();
+}
+
+
+function clearCanvas() {
+  GL.clearColor(0.26, 1, 0.93, 1.0);
+  GL.clear(GL.COLOR_BUFFER_BIT);
+}
+
+
+function createPlane() {
+  GL.bindBuffer(GL.ARRAY_BUFFER, GL.createBuffer());
+  GL.bufferData(
+  GL.ARRAY_BUFFER,
+  new Float32Array([
+  -1, -1,
+  -1, 1,
+  1, -1,
+  1, 1]),
+
+  GL.STATIC_DRAW);
+
+}
+
+
+function createProgram() {
+  const shaders = getShaders();
+
+  PROGRAM = GL.createProgram();
+
+  GL.attachShader(PROGRAM, shaders.vertex);
+  GL.attachShader(PROGRAM, shaders.fragment);
+  GL.linkProgram(PROGRAM);
+
+  const vertexPositionAttribute = GL.getAttribLocation(PROGRAM, 'a_position');
+
+  GL.enableVertexAttribArray(vertexPositionAttribute);
+  GL.vertexAttribPointer(vertexPositionAttribute, 2, GL.FLOAT, false, 0, 0);
+
+  GL.useProgram(PROGRAM);
+}
+
+
+function getShaders() {
+  return {
+    vertex: compileShader(
+    GL.VERTEX_SHADER,
+    document.getElementById(IDs.shaders.vertex).textContent),
+
+    fragment: compileShader(
+    GL.FRAGMENT_SHADER,
+    document.getElementById(IDs.shaders.fragment).textContent) };
+
+
+}
+
+
+function compileShader(type, source) {
+  const shader = GL.createShader(type);
+
+  GL.shaderSource(shader, source);
+  GL.compileShader(shader);
+
+  console.log(GL.getShaderInfoLog(shader));
+
+  return shader;
+}
+
+
+function createTexture() {
+  const image = new Image();
+
+  image.crossOrigin = 'anonymous';
+
+  image.onload = () => {
+    const texture = GL.createTexture();
+
+    GL.activeTexture(GL.TEXTURE0);
+    GL.bindTexture(GL.TEXTURE_2D, texture);
+    GL.pixelStorei(GL.UNPACK_FLIP_Y_WEBGL, true);
+    GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGB, GL.RGB, GL.UNSIGNED_BYTE, image);
+    GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_S, GL.CLAMP_TO_EDGE);
+    GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_T, GL.CLAMP_TO_EDGE);
+    GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.LINEAR);
+
+    GL.uniform1i(GL.getUniformLocation(PROGRAM, 'u_texture'), 0);
+  };
+
+  image.src = 'https://78.media.tumblr.com/7bd1cd32a3709a8e6821f5ffd3dbcea1/tumblr_pdti2hTKqw1xujoc5o1_540.jpg';
+}
+
+
+
+function updateCanvasSize() {
+  const size = Math.ceil(Math.min(window.innerHeight, window.innerWidth) * .9) - 30;
+
+  CANVAS.height = size;
+  CANVAS.width = size;
+
+  GL.viewport(0, 0, GL.canvas.width, GL.canvas.height);
+  GL.uniform1f(GL.getUniformLocation(PROGRAM, 'u_canvas_size'),
+  Math.max(CANVAS.height, CANVAS.width));
+}
+
+
+function initEventListeners() {
+  window.addEventListener('resize', updateCanvasSize);
+}
+
+
+function draw(timeStamp) {
+  GL.uniform1f(GL.getUniformLocation(PROGRAM, 'u_time'), timeStamp / 1000.0);
+
+  GL.drawArrays(GL.TRIANGLE_STRIP, 0, 4);
+
+  requestAnimationFrame(draw);
+}
\ No newline at end of file
diff --git a/fragment-shaders-ex-7/dist/style.css b/fragment-shaders-ex-7/dist/style.css
new file mode 100644
index 0000000..6f91e1b
--- /dev/null
+++ b/fragment-shaders-ex-7/dist/style.css
@@ -0,0 +1,33 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.container {
+  position: absolute;
+  height: 90vmin;
+  width: 90vmin;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  border-radius: 5px;
+  padding: 15px;
+  background: rgba(255, 255, 255, 0.9);
+}
+.canvas-wrapper {
+  border-radius: 5px;
+  overflow: hidden;
+}
+canvas {
+  display: block;
+}
+body {
+  overflow: hidden;
+  background-color: #ffecc2;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(328,683,336)'%3E%3Cstop offset='0' stop-color='%23ffecc2'/%3E%3Cstop offset='1' stop-color='%23252533'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='776' height='646.7' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.03'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
+}
diff --git a/fragment-shaders-ex-7/license.txt b/fragment-shaders-ex-7/license.txt
new file mode 100644
index 0000000..0b9586e
--- /dev/null
+++ b/fragment-shaders-ex-7/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Ivan Bogachev (https://codepen.io/sfi0zy/pen/mGyVBK)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/fragment-shaders-ex-7/src/index.html b/fragment-shaders-ex-7/src/index.html
new file mode 100644
index 0000000..17d5260
--- /dev/null
+++ b/fragment-shaders-ex-7/src/index.html
@@ -0,0 +1,59 @@
+<div class='container'>
+    <div class='canvas-wrapper'>
+        <canvas id='canvas'></canvas>
+    </div>
+</div>
+
+
+<script id='vertex-shader' type='x-shader/x-vertex'>
+    precision mediump float;
+
+    attribute vec2 a_position;
+
+    void main() {
+        gl_Position = vec4(a_position, 0, 1);
+    }
+</script>
+
+
+<script id='fragment-shader' type='x-shader/x-fragment'>
+    precision mediump float;
+
+    uniform sampler2D u_texture;
+    uniform float u_time;
+    uniform float u_canvas_size;
+
+
+    float rand(vec2);
+    float noise(vec2);
+
+
+    void main() {
+        vec2 texture_coord = gl_FragCoord.xy / u_canvas_size;
+
+        gl_FragColor = texture2D(u_texture,
+            texture_coord
+            + vec2(
+                noise(texture_coord * 10.0 + sin(u_time + texture_coord.x * 5.0)) / 10.0,
+                noise(texture_coord * 10.0 + cos(u_time + texture_coord.y * 5.0)) / 10.0));
+    }
+
+
+    float rand(vec2 seed) {
+        return fract(sin(dot(seed, vec2(12.9898,78.233))) * 43758.5453123);
+    }
+    
+    
+    float noise(vec2 position) {
+        vec2 block_position = floor(position);
+
+        float top_left_value     = rand(block_position);
+        float top_right_value    = rand(block_position + vec2(1.0, 0.0));
+        float bottom_left_value  = rand(block_position + vec2(0.0, 1.0));
+        float bottom_right_value = rand(block_position + vec2(1.0, 1.0));
+
+        vec2 computed_value = smoothstep(0.0, 1.0, fract(position));
+
+        return computed_value.x;
+    }
+</script>
\ No newline at end of file
diff --git a/fragment-shaders-ex-7/src/script.babel b/fragment-shaders-ex-7/src/script.babel
new file mode 100644
index 0000000..36807f7
--- /dev/null
+++ b/fragment-shaders-ex-7/src/script.babel
@@ -0,0 +1,142 @@
+const IDs = {
+    canvas: 'canvas',
+    shaders: {
+        vertex: 'vertex-shader',
+        fragment: 'fragment-shader'
+    }
+};
+
+
+const CANVAS = document.getElementById(IDs.canvas);
+const GL = canvas.getContext('webgl');
+
+let PROGRAM;
+
+
+main();
+
+
+function main() {
+    clearCanvas();
+    createPlane();
+    createProgram();
+    createTexture();
+    updateCanvasSize();
+    initEventListeners();
+    draw();
+}
+
+
+function clearCanvas() {
+    GL.clearColor(0.26, 1, 0.93, 1.0);
+    GL.clear(GL.COLOR_BUFFER_BIT);
+}
+
+
+function createPlane() {
+    GL.bindBuffer(GL.ARRAY_BUFFER, GL.createBuffer());
+    GL.bufferData(
+        GL.ARRAY_BUFFER,
+        new Float32Array([
+            -1, -1,
+            -1,  1,
+             1, -1,
+             1,  1
+        ]),
+        GL.STATIC_DRAW
+    );
+}
+
+
+function createProgram() {
+    const shaders = getShaders();
+
+    PROGRAM = GL.createProgram();
+
+    GL.attachShader(PROGRAM, shaders.vertex);
+    GL.attachShader(PROGRAM, shaders.fragment);
+    GL.linkProgram(PROGRAM);
+    
+    const vertexPositionAttribute = GL.getAttribLocation(PROGRAM, 'a_position');
+    
+    GL.enableVertexAttribArray(vertexPositionAttribute);
+    GL.vertexAttribPointer(vertexPositionAttribute, 2, GL.FLOAT, false, 0, 0);
+
+    GL.useProgram(PROGRAM);
+}
+
+
+function getShaders() {
+    return {
+        vertex: compileShader(
+            GL.VERTEX_SHADER,
+            document.getElementById(IDs.shaders.vertex).textContent
+        ),
+        fragment: compileShader(
+            GL.FRAGMENT_SHADER,
+            document.getElementById(IDs.shaders.fragment).textContent
+        )
+    };
+}
+
+
+function compileShader(type, source) {
+    const shader = GL.createShader(type);
+
+    GL.shaderSource(shader, source);
+    GL.compileShader(shader);
+    
+    console.log(GL.getShaderInfoLog(shader));
+
+    return shader;
+}
+
+
+function createTexture() {
+    const image = new Image();
+
+    image.crossOrigin = 'anonymous';
+
+    image.onload = () => {
+        const texture = GL.createTexture();
+        
+        GL.activeTexture(GL.TEXTURE0);
+        GL.bindTexture(GL.TEXTURE_2D, texture);
+        GL.pixelStorei(GL.UNPACK_FLIP_Y_WEBGL, true);
+        GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGB, GL.RGB, GL.UNSIGNED_BYTE, image);
+        GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_S, GL.CLAMP_TO_EDGE);
+        GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_T, GL.CLAMP_TO_EDGE);
+        GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.LINEAR);
+
+        GL.uniform1i(GL.getUniformLocation(PROGRAM, 'u_texture'), 0);
+    };
+
+    image.src = 'https://78.media.tumblr.com/7bd1cd32a3709a8e6821f5ffd3dbcea1/tumblr_pdti2hTKqw1xujoc5o1_540.jpg';
+}
+
+
+
+function updateCanvasSize() {
+    const size = Math.ceil(Math.min(window.innerHeight, window.innerWidth) * .9) - 30;
+
+    CANVAS.height = size;
+    CANVAS.width = size;
+
+    GL.viewport(0, 0, GL.canvas.width, GL.canvas.height);
+    GL.uniform1f(GL.getUniformLocation(PROGRAM, 'u_canvas_size'),
+            Math.max(CANVAS.height, CANVAS.width));
+}
+
+
+function initEventListeners() {
+    window.addEventListener('resize', updateCanvasSize);
+}
+
+
+function draw(timeStamp) {
+    GL.uniform1f(GL.getUniformLocation(PROGRAM, 'u_time'), timeStamp / 1000.0);
+    
+    GL.drawArrays(GL.TRIANGLE_STRIP, 0, 4);
+
+    requestAnimationFrame(draw);
+}
diff --git a/fragment-shaders-ex-7/src/style.less b/fragment-shaders-ex-7/src/style.less
new file mode 100644
index 0000000..ea850ed
--- /dev/null
+++ b/fragment-shaders-ex-7/src/style.less
@@ -0,0 +1,37 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+.container {
+    position: absolute;
+    height: 90vmin;
+    width: 90vmin;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
+    overflow: hidden;
+    border-radius: 5px;
+    padding: 15px;
+    background: rgba(255, 255, 255, .9);
+}
+
+.canvas-wrapper {
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+canvas {
+    display: block;
+}
+
+body {
+    overflow: hidden;
+    background-color: #ffecc2;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(328,683,336)'%3E%3Cstop offset='0' stop-color='%23ffecc2'/%3E%3Cstop offset='1' stop-color='%23252533'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='776' height='646.7' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.03'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
+    background-attachment: fixed;
+    background-size: cover;
+}
diff --git a/fredrikaflowfield-heart/README.markdown b/fredrikaflowfield-heart/README.markdown
new file mode 100644
index 0000000..0269270
--- /dev/null
+++ b/fredrikaflowfield-heart/README.markdown
@@ -0,0 +1,20 @@
+# Fredrika ❤️❤️❤️❤️❤️ - Flowfield Heart
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/DonKarlssonSan/pen/XGgBae](https://codepen.io/DonKarlssonSan/pen/XGgBae).
+
+ Inspired by Daniel Shiffman's Coding Train episode Coding Challenge #134 Heart Curve:
+https://www.youtube.com/watch?v=oUBAi9xQ2X4
+
+Setup:
+
+* Draw a heart using the sixth curve found on [Wolfram](http://mathworld.wolfram.com/HeartCurve.html)
+* Fill the curve
+* Store the image for future reference
+* Clear the screen
+* Fill the screen with particles
+
+Draw loop:
+
+* Clear the screen with semi transparent black to create particle trails as the particles move around
+* If a particle is inside the heart (checked by referencing the image we stored during setup): affect its motion with a flow field(1), else: let the particle turn in a random direction and move a step.
+
+(1) I have an extensive blog post about [how a flow field works](https://codepen.io/DonKarlssonSan/post/particles-in-simplex-noise-flow-field).
\ No newline at end of file
diff --git a/fredrikaflowfield-heart/dist/blgjlm.js b/fredrikaflowfield-heart/dist/blgjlm.js
new file mode 100644
index 0000000..5a1c681
--- /dev/null
+++ b/fredrikaflowfield-heart/dist/blgjlm.js
@@ -0,0 +1,416 @@
+/*
+ * A fast javascript implementation of simplex noise by Jonas Wagner
+ *
+ * Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.
+ * Which is based on example code by Stefan Gustavson (stegu@itn.liu.se).
+ * With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
+ * Better rank ordering method by Stefan Gustavson in 2012.
+ *
+ *
+ * Copyright (C) 2016 Jonas Wagner
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ */
+(function() {
+'use strict';
+
+var F2 = 0.5 * (Math.sqrt(3.0) - 1.0);
+var G2 = (3.0 - Math.sqrt(3.0)) / 6.0;
+var F3 = 1.0 / 3.0;
+var G3 = 1.0 / 6.0;
+var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;
+var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;
+
+function SimplexNoise(random) {
+  if (!random) random = Math.random;
+  this.p = buildPermutationTable(random);
+  this.perm = new Uint8Array(512);
+  this.permMod12 = new Uint8Array(512);
+  for (var i = 0; i < 512; i++) {
+    this.perm[i] = this.p[i & 255];
+    this.permMod12[i] = this.perm[i] % 12;
+  }
+
+}
+SimplexNoise.prototype = {
+    grad3: new Float32Array([1, 1, 0,
+                            -1, 1, 0,
+                            1, -1, 0,
+
+                            -1, -1, 0,
+                            1, 0, 1,
+                            -1, 0, 1,
+
+                            1, 0, -1,
+                            -1, 0, -1,
+                            0, 1, 1,
+
+                            0, -1, 1,
+                            0, 1, -1,
+                            0, -1, -1]),
+    grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1,
+                            0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1,
+                            1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1,
+                            -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1,
+                            1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1,
+                            -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1,
+                            1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0,
+                            -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]),
+    noise2D: function(xin, yin) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad3 = this.grad3;
+        var n0 = 0; // Noise contributions from the three corners
+        var n1 = 0;
+        var n2 = 0;
+        // Skew the input space to determine which simplex cell we're in
+        var s = (xin + yin) * F2; // Hairy factor for 2D
+        var i = Math.floor(xin + s);
+        var j = Math.floor(yin + s);
+        var t = (i + j) * G2;
+        var X0 = i - t; // Unskew the cell origin back to (x,y) space
+        var Y0 = j - t;
+        var x0 = xin - X0; // The x,y distances from the cell origin
+        var y0 = yin - Y0;
+        // For the 2D case, the simplex shape is an equilateral triangle.
+        // Determine which simplex we are in.
+        var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
+        if (x0 > y0) {
+          i1 = 1;
+          j1 = 0;
+        } // lower triangle, XY order: (0,0)->(1,0)->(1,1)
+        else {
+          i1 = 0;
+          j1 = 1;
+        } // upper triangle, YX order: (0,0)->(0,1)->(1,1)
+        // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
+        // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
+        // c = (3-sqrt(3))/6
+        var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
+        var y1 = y0 - j1 + G2;
+        var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
+        var y2 = y0 - 1.0 + 2.0 * G2;
+        // Work out the hashed gradient indices of the three simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        // Calculate the contribution from the three corners
+        var t0 = 0.5 - x0 * x0 - y0 * y0;
+        if (t0 >= 0) {
+          var gi0 = permMod12[ii + perm[jj]] * 3;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient
+        }
+        var t1 = 0.5 - x1 * x1 - y1 * y1;
+        if (t1 >= 0) {
+          var gi1 = permMod12[ii + i1 + perm[jj + j1]] * 3;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1);
+        }
+        var t2 = 0.5 - x2 * x2 - y2 * y2;
+        if (t2 >= 0) {
+          var gi2 = permMod12[ii + 1 + perm[jj + 1]] * 3;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2);
+        }
+        // Add contributions from each corner to get the final noise value.
+        // The result is scaled to return values in the interval [-1,1].
+        return 70.0 * (n0 + n1 + n2);
+      },
+    // 3D simplex noise
+    noise3D: function(xin, yin, zin) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad3 = this.grad3;
+        var n0, n1, n2, n3; // Noise contributions from the four corners
+        // Skew the input space to determine which simplex cell we're in
+        var s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3D
+        var i = Math.floor(xin + s);
+        var j = Math.floor(yin + s);
+        var k = Math.floor(zin + s);
+        var t = (i + j + k) * G3;
+        var X0 = i - t; // Unskew the cell origin back to (x,y,z) space
+        var Y0 = j - t;
+        var Z0 = k - t;
+        var x0 = xin - X0; // The x,y,z distances from the cell origin
+        var y0 = yin - Y0;
+        var z0 = zin - Z0;
+        // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
+        // Determine which simplex we are in.
+        var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
+        var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
+        if (x0 >= y0) {
+          if (y0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+          } // X Y Z order
+          else if (x0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+          } // X Z Y order
+          else {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+          } // Z X Y order
+        }
+        else { // x0<y0
+          if (y0 < z0) {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+          } // Z Y X order
+          else if (x0 < z0) {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+          } // Y Z X order
+          else {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+          } // Y X Z order
+        }
+        // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
+        // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
+        // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
+        // c = 1/6.
+        var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
+        var y1 = y0 - j1 + G3;
+        var z1 = z0 - k1 + G3;
+        var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords
+        var y2 = y0 - j2 + 2.0 * G3;
+        var z2 = z0 - k2 + 2.0 * G3;
+        var x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords
+        var y3 = y0 - 1.0 + 3.0 * G3;
+        var z3 = z0 - 1.0 + 3.0 * G3;
+        // Work out the hashed gradient indices of the four simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        var kk = k & 255;
+        // Calculate the contribution from the four corners
+        var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
+        if (t0 < 0) n0 = 0.0;
+        else {
+          var gi0 = permMod12[ii + perm[jj + perm[kk]]] * 3;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0 + grad3[gi0 + 2] * z0);
+        }
+        var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
+        if (t1 < 0) n1 = 0.0;
+        else {
+          var gi1 = permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]] * 3;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1 + grad3[gi1 + 2] * z1);
+        }
+        var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
+        if (t2 < 0) n2 = 0.0;
+        else {
+          var gi2 = permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]] * 3;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2 + grad3[gi2 + 2] * z2);
+        }
+        var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
+        if (t3 < 0) n3 = 0.0;
+        else {
+          var gi3 = permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]] * 3;
+          t3 *= t3;
+          n3 = t3 * t3 * (grad3[gi3] * x3 + grad3[gi3 + 1] * y3 + grad3[gi3 + 2] * z3);
+        }
+        // Add contributions from each corner to get the final noise value.
+        // The result is scaled to stay just inside [-1,1]
+        return 32.0 * (n0 + n1 + n2 + n3);
+      },
+    // 4D simplex noise, better simplex rank ordering method 2012-03-09
+    noise4D: function(x, y, z, w) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad4 = this.grad4;
+
+        var n0, n1, n2, n3, n4; // Noise contributions from the five corners
+        // Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
+        var s = (x + y + z + w) * F4; // Factor for 4D skewing
+        var i = Math.floor(x + s);
+        var j = Math.floor(y + s);
+        var k = Math.floor(z + s);
+        var l = Math.floor(w + s);
+        var t = (i + j + k + l) * G4; // Factor for 4D unskewing
+        var X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
+        var Y0 = j - t;
+        var Z0 = k - t;
+        var W0 = l - t;
+        var x0 = x - X0; // The x,y,z,w distances from the cell origin
+        var y0 = y - Y0;
+        var z0 = z - Z0;
+        var w0 = w - W0;
+        // For the 4D case, the simplex is a 4D shape I won't even try to describe.
+        // To find out which of the 24 possible simplices we're in, we need to
+        // determine the magnitude ordering of x0, y0, z0 and w0.
+        // Six pair-wise comparisons are performed between each possible pair
+        // of the four coordinates, and the results are used to rank the numbers.
+        var rankx = 0;
+        var ranky = 0;
+        var rankz = 0;
+        var rankw = 0;
+        if (x0 > y0) rankx++;
+        else ranky++;
+        if (x0 > z0) rankx++;
+        else rankz++;
+        if (x0 > w0) rankx++;
+        else rankw++;
+        if (y0 > z0) ranky++;
+        else rankz++;
+        if (y0 > w0) ranky++;
+        else rankw++;
+        if (z0 > w0) rankz++;
+        else rankw++;
+        var i1, j1, k1, l1; // The integer offsets for the second simplex corner
+        var i2, j2, k2, l2; // The integer offsets for the third simplex corner
+        var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner
+        // simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
+        // Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
+        // impossible. Only the 24 indices which have non-zero entries make any sense.
+        // We use a thresholding to set the coordinates in turn from the largest magnitude.
+        // Rank 3 denotes the largest coordinate.
+        i1 = rankx >= 3 ? 1 : 0;
+        j1 = ranky >= 3 ? 1 : 0;
+        k1 = rankz >= 3 ? 1 : 0;
+        l1 = rankw >= 3 ? 1 : 0;
+        // Rank 2 denotes the second largest coordinate.
+        i2 = rankx >= 2 ? 1 : 0;
+        j2 = ranky >= 2 ? 1 : 0;
+        k2 = rankz >= 2 ? 1 : 0;
+        l2 = rankw >= 2 ? 1 : 0;
+        // Rank 1 denotes the second smallest coordinate.
+        i3 = rankx >= 1 ? 1 : 0;
+        j3 = ranky >= 1 ? 1 : 0;
+        k3 = rankz >= 1 ? 1 : 0;
+        l3 = rankw >= 1 ? 1 : 0;
+        // The fifth corner has all coordinate offsets = 1, so no need to compute that.
+        var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
+        var y1 = y0 - j1 + G4;
+        var z1 = z0 - k1 + G4;
+        var w1 = w0 - l1 + G4;
+        var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
+        var y2 = y0 - j2 + 2.0 * G4;
+        var z2 = z0 - k2 + 2.0 * G4;
+        var w2 = w0 - l2 + 2.0 * G4;
+        var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
+        var y3 = y0 - j3 + 3.0 * G4;
+        var z3 = z0 - k3 + 3.0 * G4;
+        var w3 = w0 - l3 + 3.0 * G4;
+        var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
+        var y4 = y0 - 1.0 + 4.0 * G4;
+        var z4 = z0 - 1.0 + 4.0 * G4;
+        var w4 = w0 - 1.0 + 4.0 * G4;
+        // Work out the hashed gradient indices of the five simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        var kk = k & 255;
+        var ll = l & 255;
+        // Calculate the contribution from the five corners
+        var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
+        if (t0 < 0) n0 = 0.0;
+        else {
+          var gi0 = (perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32) * 4;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad4[gi0] * x0 + grad4[gi0 + 1] * y0 + grad4[gi0 + 2] * z0 + grad4[gi0 + 3] * w0);
+        }
+        var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
+        if (t1 < 0) n1 = 0.0;
+        else {
+          var gi1 = (perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32) * 4;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad4[gi1] * x1 + grad4[gi1 + 1] * y1 + grad4[gi1 + 2] * z1 + grad4[gi1 + 3] * w1);
+        }
+        var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
+        if (t2 < 0) n2 = 0.0;
+        else {
+          var gi2 = (perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32) * 4;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad4[gi2] * x2 + grad4[gi2 + 1] * y2 + grad4[gi2 + 2] * z2 + grad4[gi2 + 3] * w2);
+        }
+        var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
+        if (t3 < 0) n3 = 0.0;
+        else {
+          var gi3 = (perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32) * 4;
+          t3 *= t3;
+          n3 = t3 * t3 * (grad4[gi3] * x3 + grad4[gi3 + 1] * y3 + grad4[gi3 + 2] * z3 + grad4[gi3 + 3] * w3);
+        }
+        var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
+        if (t4 < 0) n4 = 0.0;
+        else {
+          var gi4 = (perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32) * 4;
+          t4 *= t4;
+          n4 = t4 * t4 * (grad4[gi4] * x4 + grad4[gi4 + 1] * y4 + grad4[gi4 + 2] * z4 + grad4[gi4 + 3] * w4);
+        }
+        // Sum up and scale the result to cover the range [-1,1]
+        return 27.0 * (n0 + n1 + n2 + n3 + n4);
+      }
+  };
+
+function buildPermutationTable(random) {
+  var i;
+  var p = new Uint8Array(256);
+  for (i = 0; i < 256; i++) {
+    p[i] = i;
+  }
+  for (i = 0; i < 255; i++) {
+    var r = i + ~~(random() * (256 - i));
+    var aux = p[i];
+    p[i] = p[r];
+    p[r] = aux;
+  }
+  return p;
+}
+SimplexNoise._buildPermutationTable = buildPermutationTable;
+
+// amd
+if (typeof define !== 'undefined' && define.amd) define(function() {return SimplexNoise;});
+// common js
+if (typeof exports !== 'undefined') exports.SimplexNoise = SimplexNoise;
+// browser
+else if (typeof window !== 'undefined') window.SimplexNoise = SimplexNoise;
+// nodejs
+if (typeof module !== 'undefined') {
+  module.exports = SimplexNoise;
+}
+
+})();
\ No newline at end of file
diff --git a/fredrikaflowfield-heart/dist/index.html b/fredrikaflowfield-heart/dist/index.html
new file mode 100644
index 0000000..da79fb8
--- /dev/null
+++ b/fredrikaflowfield-heart/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Fredrika ❤️❤️❤️❤️❤️ - Flowfield Heart</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canvas"></canvas>
+<!-- partial -->
+  <script src='js/blgjlm.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/fredrikaflowfield-heart/dist/script.js b/fredrikaflowfield-heart/dist/script.js
new file mode 100644
index 0000000..262292c
--- /dev/null
+++ b/fredrikaflowfield-heart/dist/script.js
@@ -0,0 +1,110 @@
+/*
+  Johan Karlsson, 2019
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+
+class Particle {
+  constructor() {
+    this.x = Math.random() * w;
+    this.y = Math.random() * h;
+    this.angle = Math.random() * Math.PI * 2;
+  }
+
+  move() {
+    let zoom = 70;
+    let stepSize = 0.5;
+    let x = Math.floor(this.x);
+    let y = Math.floor(this.y);
+    let index = y * w + x;
+    let isInside = index < imageBuffer.length && imageBuffer[index];
+    if (isInside) {
+      // This is cheating in the name of performance.
+      // In a real flow field the strength varies over
+      // the area of the field. Here we hard code it.
+      // The visual result is acceptable
+      //let strength = simplex.noise3D(this.x / zoom, this.y / zoom, ticker) * 4;
+      let strength = 1;
+      let xn = simplex.noise3D(this.x / zoom, this.y / zoom, ticker + 4000) * strength;
+      let yn = simplex.noise3D(this.x / zoom, this.y / zoom, ticker + 8000) * strength;
+      this.x += xn;
+      this.y += yn;
+    } else {
+      this.angle += (Math.random() - 0.5) * 0.5;
+      this.x += Math.cos(this.angle) * stepSize;
+      this.y += Math.sin(this.angle) * stepSize;
+    }
+
+    if (this.x < 0) this.x = w;
+    if (this.x > w) this.x = 0;
+    if (this.y < 0) this.y = h;
+    if (this.y > h) this.y = 0;
+  }
+
+  draw() {
+    ctx.fillRect(this.x, this.y, 1, 1);
+  }}
+
+
+let canvas;
+let ctx;
+let w, h;
+let imageBuffer;
+let particles;
+let ticker;
+let simplex;
+
+function setup() {
+  ticker = 0;
+  simplex = new SimplexNoise();
+  canvas = document.querySelector("#canvas");
+  ctx = canvas.getContext("2d");
+  reset();
+  window.addEventListener("resize", reset);
+}
+
+function setupParticles() {
+  particles = [];
+  let nrOfParticles = w * h / 40;
+  for (let i = 0; i < nrOfParticles; i++) {
+    particles.push(new Particle());
+  }
+}
+
+function reset() {
+  w = canvas.width = window.innerWidth;
+  h = canvas.height = window.innerHeight;
+  storeHeartInBuffer();
+  setupParticles();
+  ctx.fillRect(0, 0, w, h);
+}
+
+function draw() {
+  requestAnimationFrame(draw);
+  ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
+  ctx.fillRect(0, 0, w, h);
+  ctx.fillStyle = "red";
+  particles.forEach(p => {
+    p.move();
+    p.draw();
+  });
+  ticker += 0.014;
+}
+
+function storeHeartInBuffer() {
+  ctx.beginPath();
+  for (let angle = 0; angle < Math.PI * 2; angle += 0.01) {
+    let r = Math.min(w, h) * 0.025;
+    let x = r * 16 * Math.pow(Math.sin(angle), 3);
+    let y = -r * (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle));
+    ctx.lineTo(w / 2 + x, h * 0.45 + y);
+  }
+  ctx.stroke();
+  ctx.fill();
+
+  let image = ctx.getImageData(0, 0, w, h);
+  imageBuffer = new Uint32Array(image.data.buffer);
+}
+
+setup();
+draw();
\ No newline at end of file
diff --git a/fredrikaflowfield-heart/dist/style.css b/fredrikaflowfield-heart/dist/style.css
new file mode 100644
index 0000000..d319ef1
--- /dev/null
+++ b/fredrikaflowfield-heart/dist/style.css
@@ -0,0 +1,7 @@
+body, html {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+}
\ No newline at end of file
diff --git a/fredrikaflowfield-heart/license.txt b/fredrikaflowfield-heart/license.txt
new file mode 100644
index 0000000..57744a9
--- /dev/null
+++ b/fredrikaflowfield-heart/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Johan Karlsson (https://codepen.io/DonKarlssonSan/pen/XGgBae)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/fredrikaflowfield-heart/src/blgjlm.js b/fredrikaflowfield-heart/src/blgjlm.js
new file mode 100644
index 0000000..5a1c681
--- /dev/null
+++ b/fredrikaflowfield-heart/src/blgjlm.js
@@ -0,0 +1,416 @@
+/*
+ * A fast javascript implementation of simplex noise by Jonas Wagner
+ *
+ * Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.
+ * Which is based on example code by Stefan Gustavson (stegu@itn.liu.se).
+ * With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
+ * Better rank ordering method by Stefan Gustavson in 2012.
+ *
+ *
+ * Copyright (C) 2016 Jonas Wagner
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ */
+(function() {
+'use strict';
+
+var F2 = 0.5 * (Math.sqrt(3.0) - 1.0);
+var G2 = (3.0 - Math.sqrt(3.0)) / 6.0;
+var F3 = 1.0 / 3.0;
+var G3 = 1.0 / 6.0;
+var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;
+var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;
+
+function SimplexNoise(random) {
+  if (!random) random = Math.random;
+  this.p = buildPermutationTable(random);
+  this.perm = new Uint8Array(512);
+  this.permMod12 = new Uint8Array(512);
+  for (var i = 0; i < 512; i++) {
+    this.perm[i] = this.p[i & 255];
+    this.permMod12[i] = this.perm[i] % 12;
+  }
+
+}
+SimplexNoise.prototype = {
+    grad3: new Float32Array([1, 1, 0,
+                            -1, 1, 0,
+                            1, -1, 0,
+
+                            -1, -1, 0,
+                            1, 0, 1,
+                            -1, 0, 1,
+
+                            1, 0, -1,
+                            -1, 0, -1,
+                            0, 1, 1,
+
+                            0, -1, 1,
+                            0, 1, -1,
+                            0, -1, -1]),
+    grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1,
+                            0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1,
+                            1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1,
+                            -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1,
+                            1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1,
+                            -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1,
+                            1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0,
+                            -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]),
+    noise2D: function(xin, yin) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad3 = this.grad3;
+        var n0 = 0; // Noise contributions from the three corners
+        var n1 = 0;
+        var n2 = 0;
+        // Skew the input space to determine which simplex cell we're in
+        var s = (xin + yin) * F2; // Hairy factor for 2D
+        var i = Math.floor(xin + s);
+        var j = Math.floor(yin + s);
+        var t = (i + j) * G2;
+        var X0 = i - t; // Unskew the cell origin back to (x,y) space
+        var Y0 = j - t;
+        var x0 = xin - X0; // The x,y distances from the cell origin
+        var y0 = yin - Y0;
+        // For the 2D case, the simplex shape is an equilateral triangle.
+        // Determine which simplex we are in.
+        var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
+        if (x0 > y0) {
+          i1 = 1;
+          j1 = 0;
+        } // lower triangle, XY order: (0,0)->(1,0)->(1,1)
+        else {
+          i1 = 0;
+          j1 = 1;
+        } // upper triangle, YX order: (0,0)->(0,1)->(1,1)
+        // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
+        // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
+        // c = (3-sqrt(3))/6
+        var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
+        var y1 = y0 - j1 + G2;
+        var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
+        var y2 = y0 - 1.0 + 2.0 * G2;
+        // Work out the hashed gradient indices of the three simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        // Calculate the contribution from the three corners
+        var t0 = 0.5 - x0 * x0 - y0 * y0;
+        if (t0 >= 0) {
+          var gi0 = permMod12[ii + perm[jj]] * 3;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient
+        }
+        var t1 = 0.5 - x1 * x1 - y1 * y1;
+        if (t1 >= 0) {
+          var gi1 = permMod12[ii + i1 + perm[jj + j1]] * 3;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1);
+        }
+        var t2 = 0.5 - x2 * x2 - y2 * y2;
+        if (t2 >= 0) {
+          var gi2 = permMod12[ii + 1 + perm[jj + 1]] * 3;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2);
+        }
+        // Add contributions from each corner to get the final noise value.
+        // The result is scaled to return values in the interval [-1,1].
+        return 70.0 * (n0 + n1 + n2);
+      },
+    // 3D simplex noise
+    noise3D: function(xin, yin, zin) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad3 = this.grad3;
+        var n0, n1, n2, n3; // Noise contributions from the four corners
+        // Skew the input space to determine which simplex cell we're in
+        var s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3D
+        var i = Math.floor(xin + s);
+        var j = Math.floor(yin + s);
+        var k = Math.floor(zin + s);
+        var t = (i + j + k) * G3;
+        var X0 = i - t; // Unskew the cell origin back to (x,y,z) space
+        var Y0 = j - t;
+        var Z0 = k - t;
+        var x0 = xin - X0; // The x,y,z distances from the cell origin
+        var y0 = yin - Y0;
+        var z0 = zin - Z0;
+        // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
+        // Determine which simplex we are in.
+        var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
+        var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
+        if (x0 >= y0) {
+          if (y0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+          } // X Y Z order
+          else if (x0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+          } // X Z Y order
+          else {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+          } // Z X Y order
+        }
+        else { // x0<y0
+          if (y0 < z0) {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+          } // Z Y X order
+          else if (x0 < z0) {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+          } // Y Z X order
+          else {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+          } // Y X Z order
+        }
+        // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
+        // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
+        // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
+        // c = 1/6.
+        var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
+        var y1 = y0 - j1 + G3;
+        var z1 = z0 - k1 + G3;
+        var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords
+        var y2 = y0 - j2 + 2.0 * G3;
+        var z2 = z0 - k2 + 2.0 * G3;
+        var x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords
+        var y3 = y0 - 1.0 + 3.0 * G3;
+        var z3 = z0 - 1.0 + 3.0 * G3;
+        // Work out the hashed gradient indices of the four simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        var kk = k & 255;
+        // Calculate the contribution from the four corners
+        var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
+        if (t0 < 0) n0 = 0.0;
+        else {
+          var gi0 = permMod12[ii + perm[jj + perm[kk]]] * 3;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0 + grad3[gi0 + 2] * z0);
+        }
+        var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
+        if (t1 < 0) n1 = 0.0;
+        else {
+          var gi1 = permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]] * 3;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1 + grad3[gi1 + 2] * z1);
+        }
+        var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
+        if (t2 < 0) n2 = 0.0;
+        else {
+          var gi2 = permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]] * 3;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2 + grad3[gi2 + 2] * z2);
+        }
+        var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
+        if (t3 < 0) n3 = 0.0;
+        else {
+          var gi3 = permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]] * 3;
+          t3 *= t3;
+          n3 = t3 * t3 * (grad3[gi3] * x3 + grad3[gi3 + 1] * y3 + grad3[gi3 + 2] * z3);
+        }
+        // Add contributions from each corner to get the final noise value.
+        // The result is scaled to stay just inside [-1,1]
+        return 32.0 * (n0 + n1 + n2 + n3);
+      },
+    // 4D simplex noise, better simplex rank ordering method 2012-03-09
+    noise4D: function(x, y, z, w) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad4 = this.grad4;
+
+        var n0, n1, n2, n3, n4; // Noise contributions from the five corners
+        // Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
+        var s = (x + y + z + w) * F4; // Factor for 4D skewing
+        var i = Math.floor(x + s);
+        var j = Math.floor(y + s);
+        var k = Math.floor(z + s);
+        var l = Math.floor(w + s);
+        var t = (i + j + k + l) * G4; // Factor for 4D unskewing
+        var X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
+        var Y0 = j - t;
+        var Z0 = k - t;
+        var W0 = l - t;
+        var x0 = x - X0; // The x,y,z,w distances from the cell origin
+        var y0 = y - Y0;
+        var z0 = z - Z0;
+        var w0 = w - W0;
+        // For the 4D case, the simplex is a 4D shape I won't even try to describe.
+        // To find out which of the 24 possible simplices we're in, we need to
+        // determine the magnitude ordering of x0, y0, z0 and w0.
+        // Six pair-wise comparisons are performed between each possible pair
+        // of the four coordinates, and the results are used to rank the numbers.
+        var rankx = 0;
+        var ranky = 0;
+        var rankz = 0;
+        var rankw = 0;
+        if (x0 > y0) rankx++;
+        else ranky++;
+        if (x0 > z0) rankx++;
+        else rankz++;
+        if (x0 > w0) rankx++;
+        else rankw++;
+        if (y0 > z0) ranky++;
+        else rankz++;
+        if (y0 > w0) ranky++;
+        else rankw++;
+        if (z0 > w0) rankz++;
+        else rankw++;
+        var i1, j1, k1, l1; // The integer offsets for the second simplex corner
+        var i2, j2, k2, l2; // The integer offsets for the third simplex corner
+        var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner
+        // simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
+        // Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
+        // impossible. Only the 24 indices which have non-zero entries make any sense.
+        // We use a thresholding to set the coordinates in turn from the largest magnitude.
+        // Rank 3 denotes the largest coordinate.
+        i1 = rankx >= 3 ? 1 : 0;
+        j1 = ranky >= 3 ? 1 : 0;
+        k1 = rankz >= 3 ? 1 : 0;
+        l1 = rankw >= 3 ? 1 : 0;
+        // Rank 2 denotes the second largest coordinate.
+        i2 = rankx >= 2 ? 1 : 0;
+        j2 = ranky >= 2 ? 1 : 0;
+        k2 = rankz >= 2 ? 1 : 0;
+        l2 = rankw >= 2 ? 1 : 0;
+        // Rank 1 denotes the second smallest coordinate.
+        i3 = rankx >= 1 ? 1 : 0;
+        j3 = ranky >= 1 ? 1 : 0;
+        k3 = rankz >= 1 ? 1 : 0;
+        l3 = rankw >= 1 ? 1 : 0;
+        // The fifth corner has all coordinate offsets = 1, so no need to compute that.
+        var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
+        var y1 = y0 - j1 + G4;
+        var z1 = z0 - k1 + G4;
+        var w1 = w0 - l1 + G4;
+        var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
+        var y2 = y0 - j2 + 2.0 * G4;
+        var z2 = z0 - k2 + 2.0 * G4;
+        var w2 = w0 - l2 + 2.0 * G4;
+        var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
+        var y3 = y0 - j3 + 3.0 * G4;
+        var z3 = z0 - k3 + 3.0 * G4;
+        var w3 = w0 - l3 + 3.0 * G4;
+        var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
+        var y4 = y0 - 1.0 + 4.0 * G4;
+        var z4 = z0 - 1.0 + 4.0 * G4;
+        var w4 = w0 - 1.0 + 4.0 * G4;
+        // Work out the hashed gradient indices of the five simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        var kk = k & 255;
+        var ll = l & 255;
+        // Calculate the contribution from the five corners
+        var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
+        if (t0 < 0) n0 = 0.0;
+        else {
+          var gi0 = (perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32) * 4;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad4[gi0] * x0 + grad4[gi0 + 1] * y0 + grad4[gi0 + 2] * z0 + grad4[gi0 + 3] * w0);
+        }
+        var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
+        if (t1 < 0) n1 = 0.0;
+        else {
+          var gi1 = (perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32) * 4;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad4[gi1] * x1 + grad4[gi1 + 1] * y1 + grad4[gi1 + 2] * z1 + grad4[gi1 + 3] * w1);
+        }
+        var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
+        if (t2 < 0) n2 = 0.0;
+        else {
+          var gi2 = (perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32) * 4;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad4[gi2] * x2 + grad4[gi2 + 1] * y2 + grad4[gi2 + 2] * z2 + grad4[gi2 + 3] * w2);
+        }
+        var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
+        if (t3 < 0) n3 = 0.0;
+        else {
+          var gi3 = (perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32) * 4;
+          t3 *= t3;
+          n3 = t3 * t3 * (grad4[gi3] * x3 + grad4[gi3 + 1] * y3 + grad4[gi3 + 2] * z3 + grad4[gi3 + 3] * w3);
+        }
+        var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
+        if (t4 < 0) n4 = 0.0;
+        else {
+          var gi4 = (perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32) * 4;
+          t4 *= t4;
+          n4 = t4 * t4 * (grad4[gi4] * x4 + grad4[gi4 + 1] * y4 + grad4[gi4 + 2] * z4 + grad4[gi4 + 3] * w4);
+        }
+        // Sum up and scale the result to cover the range [-1,1]
+        return 27.0 * (n0 + n1 + n2 + n3 + n4);
+      }
+  };
+
+function buildPermutationTable(random) {
+  var i;
+  var p = new Uint8Array(256);
+  for (i = 0; i < 256; i++) {
+    p[i] = i;
+  }
+  for (i = 0; i < 255; i++) {
+    var r = i + ~~(random() * (256 - i));
+    var aux = p[i];
+    p[i] = p[r];
+    p[r] = aux;
+  }
+  return p;
+}
+SimplexNoise._buildPermutationTable = buildPermutationTable;
+
+// amd
+if (typeof define !== 'undefined' && define.amd) define(function() {return SimplexNoise;});
+// common js
+if (typeof exports !== 'undefined') exports.SimplexNoise = SimplexNoise;
+// browser
+else if (typeof window !== 'undefined') window.SimplexNoise = SimplexNoise;
+// nodejs
+if (typeof module !== 'undefined') {
+  module.exports = SimplexNoise;
+}
+
+})();
\ No newline at end of file
diff --git a/fredrikaflowfield-heart/src/index.html b/fredrikaflowfield-heart/src/index.html
new file mode 100644
index 0000000..30325df
--- /dev/null
+++ b/fredrikaflowfield-heart/src/index.html
@@ -0,0 +1 @@
+<canvas id="canvas"></canvas>
\ No newline at end of file
diff --git a/fredrikaflowfield-heart/src/script.babel b/fredrikaflowfield-heart/src/script.babel
new file mode 100644
index 0000000..042fd3d
--- /dev/null
+++ b/fredrikaflowfield-heart/src/script.babel
@@ -0,0 +1,110 @@
+/*
+  Johan Karlsson, 2019
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+
+class Particle {
+  constructor( ) {
+    this.x = Math.random() * w;
+    this.y = Math.random() * h;
+    this.angle = Math.random() * Math.PI * 2;
+  }
+  
+  move() {
+    let zoom = 70;
+    let stepSize = 0.5;
+    let x = Math.floor(this.x);
+    let y = Math.floor(this.y);
+    let index = y * w + x;
+    let isInside = index < imageBuffer.length && imageBuffer[index];
+    if(isInside) {
+      // This is cheating in the name of performance.
+      // In a real flow field the strength varies over
+      // the area of the field. Here we hard code it.
+      // The visual result is acceptable
+      //let strength = simplex.noise3D(this.x / zoom, this.y / zoom, ticker) * 4;
+      let strength = 1;
+      let xn = simplex.noise3D(this.x / zoom, this.y / zoom, ticker + 4000) * strength;
+      let yn = simplex.noise3D(this.x / zoom, this.y / zoom, ticker + 8000) * strength;
+      this.x += xn;
+      this.y += yn;
+    } else {
+      this.angle += (Math.random() -0.5) * 0.5;
+      this.x += Math.cos(this.angle) * stepSize;
+      this.y += Math.sin(this.angle) * stepSize;
+    }
+     
+    if(this.x < 0) this.x = w;
+    if(this.x > w) this.x = 0;
+    if(this.y < 0) this.y = h;
+    if(this.y > h) this.y = 0;
+  }
+  
+  draw() {
+    ctx.fillRect(this.x, this.y, 1, 1);
+  }
+}
+
+let canvas;
+let ctx;
+let w, h;
+let imageBuffer;
+let particles;
+let ticker;
+let simplex;
+
+function setup() {
+  ticker = 0;
+  simplex = new SimplexNoise(); 
+  canvas = document.querySelector("#canvas");
+  ctx = canvas.getContext("2d");
+  reset();
+  window.addEventListener("resize", reset);
+}
+
+function setupParticles() {
+  particles = [];
+  let nrOfParticles = w * h / 40;
+  for(let i = 0; i < nrOfParticles; i++) {
+    particles.push(new Particle());
+  }
+}
+
+function reset() {
+  w = canvas.width = window.innerWidth;
+  h = canvas.height = window.innerHeight;
+  storeHeartInBuffer();
+  setupParticles();
+  ctx.fillRect(0, 0, w, h);
+}
+
+function draw() {
+  requestAnimationFrame(draw);
+  ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
+  ctx.fillRect(0, 0, w, h);
+  ctx.fillStyle = "red";
+  particles.forEach(p => {
+    p.move();
+    p.draw();
+  });
+  ticker += 0.014;
+}
+
+function storeHeartInBuffer() {
+  ctx.beginPath();
+  for(let angle = 0; angle < Math.PI * 2; angle += 0.01) {
+    let r = Math.min(w, h) * 0.025;
+    let x = r * 16 * Math.pow(Math.sin(angle), 3);
+    let y = -r * (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle));
+    ctx.lineTo(w / 2 + x, h * 0.45 + y);
+  }
+  ctx.stroke();
+  ctx.fill();
+
+  let image = ctx.getImageData(0, 0, w, h);
+  imageBuffer = new Uint32Array(image.data.buffer);
+}
+
+setup();
+draw();
\ No newline at end of file
diff --git a/fredrikaflowfield-heart/src/style.css b/fredrikaflowfield-heart/src/style.css
new file mode 100644
index 0000000..d319ef1
--- /dev/null
+++ b/fredrikaflowfield-heart/src/style.css
@@ -0,0 +1,7 @@
+body, html {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+}
\ No newline at end of file
diff --git a/futuristic-card-effect/LICENSE.txt b/futuristic-card-effect/LICENSE.txt
new file mode 100644
index 0000000..909935a
--- /dev/null
+++ b/futuristic-card-effect/LICENSE.txt
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Hyperplexed (https://codepen.io/Hyperplexed/pen/vYzgeYE)
+Fork of an original work Futuristic Card Effect (https://codepen.io/Hyperplexed/pen/vYzgeYE)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/futuristic-card-effect/README.md b/futuristic-card-effect/README.md
new file mode 100644
index 0000000..a727451
--- /dev/null
+++ b/futuristic-card-effect/README.md
@@ -0,0 +1,4 @@
+# Futuristic Card Effect
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Hyperplexed/pen/vYzgeYE](https://codepen.io/Hyperplexed/pen/vYzgeYE).
+
diff --git a/futuristic-card-effect/dist/index.html b/futuristic-card-effect/dist/index.html
new file mode 100644
index 0000000..9a132cb
--- /dev/null
+++ b/futuristic-card-effect/dist/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Futuristic Card Effect</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&family=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="screen">  
+  <div class="screen-image"></div>  
+  <div class="screen-overlay"></div>  
+  <div class="screen-content">
+    <i class="screen-icon fa-brands fa-codepen"></i>
+    <div class="screen-user">
+      <span class="name" data-value="CODEPEN">CODEPEN</span>
+      <a class="link" href="https://youtube.com/@Hyperplexed" target="_blank">@Hyperplexed</a>
+    </div>
+  </div>
+</div>
+
+<div id="blob"></div>
+<div id="blur"></div>
+
+<div id="links">
+  <div class="meta-link">  
+    <span class="label">Futuristic Card Effect</span>
+    <span class="dot">·</span>
+    <a class="source" href="https://www.sprite.com/zerolimits" target="_blank">
+      <i class="fa-solid fa-link"></i>
+    </a>
+    <span class="dot">·</span>
+    <a class="youtube" href="https://youtu.be/jMVhxBB3l0w" target="_blank">
+      <i class="fa-brands fa-youtube"></i>
+    </a>
+  </div>
+  
+  <div class="meta-link">  
+    <span class="label">Glowy Blob Effect</span>
+    <span class="dot">·</span>
+    <a class="source" href="https://www.poppr.be" target="_blank">
+      <i class="fa-solid fa-link"></i>
+    </a>
+    <span class="dot">·</span>
+    <a class="youtube" href="https://youtu.be/kySGqoU7X-s" target="_blank">
+      <i class="fa-brands fa-youtube"></i>
+    </a>
+  </div>
+
+  <div class="meta-link">  
+    <span class="label">Text Effect</span>
+    <span class="dot">·</span>
+    <a class="source" href="https://kprverse.com" target="_blank">
+      <i class="fa-solid fa-link"></i>
+    </a>
+    <span class="dot">·</span>
+    <a class="youtube" href="https://youtu.be/W5oawMJaXbU" target="_blank">
+      <i class="fa-brands fa-youtube"></i>
+    </a>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://codepen.io/Hyperplexed/pen/xxYJYjM/54407644e24173ad6019b766443bf2a6.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/futuristic-card-effect/dist/script.js b/futuristic-card-effect/dist/script.js
new file mode 100644
index 0000000..6fd58da
--- /dev/null
+++ b/futuristic-card-effect/dist/script.js
@@ -0,0 +1,46 @@
+/* -- Glow effect -- */
+
+const blob = document.getElementById("blob");
+
+window.onpointermove = event => { 
+  const { clientX, clientY } = event;
+  
+  blob.animate({
+    left: `${clientX}px`,
+    top: `${clientY}px`
+  }, { duration: 3000, fill: "forwards" });
+}
+
+/* -- Text effect -- */
+
+const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+let interval = null;
+
+const screen = document.querySelector(".screen"),
+      name = document.querySelector(".name");
+
+screen.onmouseenter = event => {  
+  let iteration = 0;
+  
+  clearInterval(interval);
+  
+  interval = setInterval(() => {
+    name.innerText = name.innerText
+      .split("")
+      .map((letter, index) => {
+        if(index < iteration) {
+          return name.dataset.value[index];
+        }
+      
+        return letters[Math.floor(Math.random() * 26)]
+      })
+      .join("");
+    
+    if(iteration >= name.dataset.value.length){ 
+      clearInterval(interval);
+    }
+    
+    iteration += 1 / 3;
+  }, 30);
+}
\ No newline at end of file
diff --git a/futuristic-card-effect/dist/style.css b/futuristic-card-effect/dist/style.css
new file mode 100644
index 0000000..8c27867
--- /dev/null
+++ b/futuristic-card-effect/dist/style.css
@@ -0,0 +1,352 @@
+:root {
+  --background-rgb: 29 30 34;
+  
+  --blue-rgb: 33 150 243;
+  --primary-rgb: var(--blue-rgb);
+  
+  --blob-color-1: rgb(var(--blue-rgb));
+  --blob-color-2: dodgerblue;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  display: grid;
+  place-items: center;
+  background-color: rgb(var(--background-rgb));
+  margin: 0rem;
+  overflow: hidden;
+}
+
+.screen {
+  width: 500px;
+  display: flex;
+  border: 3px solid rgb(var(--primary-rgb) / 80%);
+  aspect-ratio: 10 / 16;
+  border-radius: 1rem;
+  background-color: rgb(var(--primary-rgb) / 15%);
+  overflow: hidden;
+  position: relative;
+  z-index: 10;
+}
+
+.screen:after,
+.screen:before {
+  content: "";
+  height: 5px;
+  position: absolute;
+  z-index: 4;
+  left: 50%;
+  translate: -50% 0%;
+  background-color: white;
+}
+
+.screen:before {
+  width: 15%;
+  top: 0rem;
+  border-bottom-left-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+}
+
+.screen:after {
+  width: 25%;
+  bottom: 0rem;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+
+@keyframes pan-overlay {
+  from {
+    background-position: 0% 0%;
+  }
+  
+  to {
+    background-position: 0% -100%;
+  }
+}
+
+.screen-overlay {    
+  background: linear-gradient(
+    rgb(var(--primary-rgb) / 0.15),
+    rgb(var(--primary-rgb) / 0.15) 3px,
+    transparent 3px,
+    transparent 9px
+  );
+  background-size: 100% 9px;
+  height: 100%;
+  width: 100%;
+  animation: pan-overlay 22s infinite linear;
+  position: absolute;
+  z-index: 2;
+  left: 0px;
+  top: 0px;
+}
+
+@keyframes pan-image {  
+  0% {
+    background-position: 36% 42%;
+    background-size: 200%;
+  }
+  
+  20% {
+    background-position: 30% 35%;
+    background-size: 200%;
+  }
+  
+  20.0001% { /* -- View 2 -- */
+    background-position: 60% 85%;
+    background-size: 500%;
+  }
+  
+  40% {
+    background-position: 49% 81%;
+    background-size: 500%;
+  }
+  
+  40.0001% { /* -- View 3 -- */
+    background-position: 80% 42%;
+    background-size: 300%;
+  }
+  
+  60% {
+    background-position: 84% 33%;
+    background-size: 300%;
+  }
+  
+  60.0001% { /* -- View 4 -- */
+    background-position: 0% 0%;
+    background-size: 300%;
+  }
+  
+  80% {
+    background-position: 15% 4%;
+    background-size: 300%;
+  }
+  
+  80.0001% { /* -- View 5 -- */
+    background-position: 80% 10%;
+    background-size: 300%;
+  }
+  
+  100% {
+    background-position: 72% 14%;
+    background-size: 300%;
+  }
+}
+
+.screen > .screen-image {
+  background-image: url("https://images.unsplash.com/photo-1515266591878-f93e32bc5937?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2574&q=80");
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+  left: 0px;
+  top: 0px;
+  background-size: 300%;
+  background-position: 0% 0%;
+  filter: sepia(100%) hue-rotate(160deg);
+  opacity: 0.6;
+  animation: pan-image 15s linear infinite;
+}
+
+.screen > .screen-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  flex-grow: 1;
+  gap: 4rem;
+  position: relative;
+  z-index: 3;
+  margin: 1rem;
+  padding-bottom: 6rem;
+  border: 1px solid rgb(var(--primary-rgb) / 50%);
+  border-radius: 0.6rem;
+}
+
+.screen > .screen-content > .screen-icon {
+  color: white;
+  font-size: 4rem;
+  text-shadow: 0px 0px 0.5rem white;
+}
+
+.screen > .screen-content > .screen-user{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  position: relative;
+}
+
+.screen > .screen-content > .screen-user:before,
+.screen > .screen-content > .screen-user:after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  background-color: rgb(var(--primary-rgb));
+  border-radius: 1rem;
+  box-shadow: 0px 0px 8px 3px rgb(var(--primary-rgb) / 60%);
+}
+
+.screen > .screen-content > .screen-user:before {
+  height: 2px;
+  width: 50px;
+  translate: -20px -1rem;
+  opacity: 0.75;
+}
+
+.screen > .screen-content > .screen-user:after {
+  height: 3px;
+  width: 30px;
+  translate: 26px calc(-1rem - 0.5px);
+}
+
+.screen > .screen-content > .screen-user > :is(.name, .link) {
+  font-family: "Source Code Pro", monospace;
+  color: white; 
+  text-align: center;
+  text-transform: uppercase; 
+}
+
+.screen > .screen-content > .screen-user > .name {
+  position: relative;
+  font-size: 4.25rem;
+  font-weight: 400;
+}
+
+.screen > .screen-content > .screen-user > .name:before,
+.screen > .screen-content > .screen-user > .name:after {
+  content: "";
+  height: 4px;
+  width: 4px;
+  position: absolute;
+  border: 2px solid white;
+  border-radius: 2px;
+}
+
+.screen > .screen-content > .screen-user > .name:before {
+  top: 55%;
+  right: -1.5rem;
+}
+
+.screen > .screen-content > .screen-user > .name:after {
+  top: 45%;
+  left: -1.5rem;  
+}
+
+.screen > .screen-content > .screen-user > .link {  
+  opacity: 0.8;
+  font-size: 1.5rem;
+  text-shadow: 0px 0px 0.5rem white;
+  font-weight: 400;
+  letter-spacing: 0.3rem;
+  text-decoration: none;
+}
+
+.screen > .screen-content > .screen-user > .link:is(:hover, :focus) {  
+  text-decoration: underline; 
+}
+
+@media(max-width: 700px) {
+  .screen {
+    scale: 0.6;
+    margin-bottom: 0rem;
+  }
+}
+
+/* -- Blob effect -- */
+
+@keyframes rotate {
+  from {
+    rotate: 0deg;
+  }
+  
+  50% {
+    scale: 1 1.5;
+  }
+  
+  to {
+    rotate: 360deg;
+  }
+}
+
+#blob {
+  background-color: white;
+  height: 34vmax;
+  aspect-ratio: 1;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+  border-radius: 50%;
+  background: linear-gradient(to right, var(--blob-color-1), var(--blob-color-2));
+  animation: rotate 20s infinite;
+  opacity: 0.5;
+}
+
+#blur {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 2;
+  backdrop-filter: blur(12vmax);
+}
+
+/* -- Links -- */
+
+#links {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 10;
+  padding: 1rem;
+}
+
+.meta-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.meta-link > :is(span, a) {
+  font-family: "Rubik", sans-serif;
+  font-size: 0.9rem;
+  color: white;
+}
+
+.meta-link > .label {
+  width: 160px; 
+  text-align: right;
+}
+
+.meta-link > a {
+  text-decoration: none;
+  outline: none;
+}
+
+.meta-link > a.source {
+  color: rgb(94, 106, 210);
+}
+
+.meta-link > a:is(:hover, :focus) > i {
+  color: white;  
+}
+
+.meta-link > a.youtube {
+  color: rgb(239, 83, 80);
+}
+
+.meta-link > a.youtube > i {
+  padding-top: 0.2rem; 
+}
+
+.meta-link > a > i {
+  height: 1rem;
+  line-height: 1rem;
+}
\ No newline at end of file
diff --git a/futuristic-card-effect/src/index.html b/futuristic-card-effect/src/index.html
new file mode 100644
index 0000000..b65b17f
--- /dev/null
+++ b/futuristic-card-effect/src/index.html
@@ -0,0 +1,52 @@
+<div class="screen">  
+  <div class="screen-image"></div>  
+  <div class="screen-overlay"></div>  
+  <div class="screen-content">
+    <i class="screen-icon fa-brands fa-codepen"></i>
+    <div class="screen-user">
+      <span class="name" data-value="CODEPEN">CODEPEN</span>
+      <a class="link" href="https://youtube.com/@Hyperplexed" target="_blank">@Hyperplexed</a>
+    </div>
+  </div>
+</div>
+
+<div id="blob"></div>
+<div id="blur"></div>
+
+<div id="links">
+  <div class="meta-link">  
+    <span class="label">Futuristic Card Effect</span>
+    <span class="dot">·</span>
+    <a class="source" href="https://www.sprite.com/zerolimits" target="_blank">
+      <i class="fa-solid fa-link"></i>
+    </a>
+    <span class="dot">·</span>
+    <a class="youtube" href="https://youtu.be/jMVhxBB3l0w" target="_blank">
+      <i class="fa-brands fa-youtube"></i>
+    </a>
+  </div>
+  
+  <div class="meta-link">  
+    <span class="label">Glowy Blob Effect</span>
+    <span class="dot">·</span>
+    <a class="source" href="https://www.poppr.be" target="_blank">
+      <i class="fa-solid fa-link"></i>
+    </a>
+    <span class="dot">·</span>
+    <a class="youtube" href="https://youtu.be/kySGqoU7X-s" target="_blank">
+      <i class="fa-brands fa-youtube"></i>
+    </a>
+  </div>
+
+  <div class="meta-link">  
+    <span class="label">Text Effect</span>
+    <span class="dot">·</span>
+    <a class="source" href="https://kprverse.com" target="_blank">
+      <i class="fa-solid fa-link"></i>
+    </a>
+    <span class="dot">·</span>
+    <a class="youtube" href="https://youtu.be/W5oawMJaXbU" target="_blank">
+      <i class="fa-brands fa-youtube"></i>
+    </a>
+  </div>
+</div>
\ No newline at end of file
diff --git a/futuristic-card-effect/src/script.js b/futuristic-card-effect/src/script.js
new file mode 100644
index 0000000..6fd58da
--- /dev/null
+++ b/futuristic-card-effect/src/script.js
@@ -0,0 +1,46 @@
+/* -- Glow effect -- */
+
+const blob = document.getElementById("blob");
+
+window.onpointermove = event => { 
+  const { clientX, clientY } = event;
+  
+  blob.animate({
+    left: `${clientX}px`,
+    top: `${clientY}px`
+  }, { duration: 3000, fill: "forwards" });
+}
+
+/* -- Text effect -- */
+
+const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+let interval = null;
+
+const screen = document.querySelector(".screen"),
+      name = document.querySelector(".name");
+
+screen.onmouseenter = event => {  
+  let iteration = 0;
+  
+  clearInterval(interval);
+  
+  interval = setInterval(() => {
+    name.innerText = name.innerText
+      .split("")
+      .map((letter, index) => {
+        if(index < iteration) {
+          return name.dataset.value[index];
+        }
+      
+        return letters[Math.floor(Math.random() * 26)]
+      })
+      .join("");
+    
+    if(iteration >= name.dataset.value.length){ 
+      clearInterval(interval);
+    }
+    
+    iteration += 1 / 3;
+  }, 30);
+}
\ No newline at end of file
diff --git a/futuristic-card-effect/src/style.css b/futuristic-card-effect/src/style.css
new file mode 100644
index 0000000..8c27867
--- /dev/null
+++ b/futuristic-card-effect/src/style.css
@@ -0,0 +1,352 @@
+:root {
+  --background-rgb: 29 30 34;
+  
+  --blue-rgb: 33 150 243;
+  --primary-rgb: var(--blue-rgb);
+  
+  --blob-color-1: rgb(var(--blue-rgb));
+  --blob-color-2: dodgerblue;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  display: grid;
+  place-items: center;
+  background-color: rgb(var(--background-rgb));
+  margin: 0rem;
+  overflow: hidden;
+}
+
+.screen {
+  width: 500px;
+  display: flex;
+  border: 3px solid rgb(var(--primary-rgb) / 80%);
+  aspect-ratio: 10 / 16;
+  border-radius: 1rem;
+  background-color: rgb(var(--primary-rgb) / 15%);
+  overflow: hidden;
+  position: relative;
+  z-index: 10;
+}
+
+.screen:after,
+.screen:before {
+  content: "";
+  height: 5px;
+  position: absolute;
+  z-index: 4;
+  left: 50%;
+  translate: -50% 0%;
+  background-color: white;
+}
+
+.screen:before {
+  width: 15%;
+  top: 0rem;
+  border-bottom-left-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+}
+
+.screen:after {
+  width: 25%;
+  bottom: 0rem;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+
+@keyframes pan-overlay {
+  from {
+    background-position: 0% 0%;
+  }
+  
+  to {
+    background-position: 0% -100%;
+  }
+}
+
+.screen-overlay {    
+  background: linear-gradient(
+    rgb(var(--primary-rgb) / 0.15),
+    rgb(var(--primary-rgb) / 0.15) 3px,
+    transparent 3px,
+    transparent 9px
+  );
+  background-size: 100% 9px;
+  height: 100%;
+  width: 100%;
+  animation: pan-overlay 22s infinite linear;
+  position: absolute;
+  z-index: 2;
+  left: 0px;
+  top: 0px;
+}
+
+@keyframes pan-image {  
+  0% {
+    background-position: 36% 42%;
+    background-size: 200%;
+  }
+  
+  20% {
+    background-position: 30% 35%;
+    background-size: 200%;
+  }
+  
+  20.0001% { /* -- View 2 -- */
+    background-position: 60% 85%;
+    background-size: 500%;
+  }
+  
+  40% {
+    background-position: 49% 81%;
+    background-size: 500%;
+  }
+  
+  40.0001% { /* -- View 3 -- */
+    background-position: 80% 42%;
+    background-size: 300%;
+  }
+  
+  60% {
+    background-position: 84% 33%;
+    background-size: 300%;
+  }
+  
+  60.0001% { /* -- View 4 -- */
+    background-position: 0% 0%;
+    background-size: 300%;
+  }
+  
+  80% {
+    background-position: 15% 4%;
+    background-size: 300%;
+  }
+  
+  80.0001% { /* -- View 5 -- */
+    background-position: 80% 10%;
+    background-size: 300%;
+  }
+  
+  100% {
+    background-position: 72% 14%;
+    background-size: 300%;
+  }
+}
+
+.screen > .screen-image {
+  background-image: url("https://images.unsplash.com/photo-1515266591878-f93e32bc5937?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2574&q=80");
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+  left: 0px;
+  top: 0px;
+  background-size: 300%;
+  background-position: 0% 0%;
+  filter: sepia(100%) hue-rotate(160deg);
+  opacity: 0.6;
+  animation: pan-image 15s linear infinite;
+}
+
+.screen > .screen-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  flex-grow: 1;
+  gap: 4rem;
+  position: relative;
+  z-index: 3;
+  margin: 1rem;
+  padding-bottom: 6rem;
+  border: 1px solid rgb(var(--primary-rgb) / 50%);
+  border-radius: 0.6rem;
+}
+
+.screen > .screen-content > .screen-icon {
+  color: white;
+  font-size: 4rem;
+  text-shadow: 0px 0px 0.5rem white;
+}
+
+.screen > .screen-content > .screen-user{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  position: relative;
+}
+
+.screen > .screen-content > .screen-user:before,
+.screen > .screen-content > .screen-user:after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  background-color: rgb(var(--primary-rgb));
+  border-radius: 1rem;
+  box-shadow: 0px 0px 8px 3px rgb(var(--primary-rgb) / 60%);
+}
+
+.screen > .screen-content > .screen-user:before {
+  height: 2px;
+  width: 50px;
+  translate: -20px -1rem;
+  opacity: 0.75;
+}
+
+.screen > .screen-content > .screen-user:after {
+  height: 3px;
+  width: 30px;
+  translate: 26px calc(-1rem - 0.5px);
+}
+
+.screen > .screen-content > .screen-user > :is(.name, .link) {
+  font-family: "Source Code Pro", monospace;
+  color: white; 
+  text-align: center;
+  text-transform: uppercase; 
+}
+
+.screen > .screen-content > .screen-user > .name {
+  position: relative;
+  font-size: 4.25rem;
+  font-weight: 400;
+}
+
+.screen > .screen-content > .screen-user > .name:before,
+.screen > .screen-content > .screen-user > .name:after {
+  content: "";
+  height: 4px;
+  width: 4px;
+  position: absolute;
+  border: 2px solid white;
+  border-radius: 2px;
+}
+
+.screen > .screen-content > .screen-user > .name:before {
+  top: 55%;
+  right: -1.5rem;
+}
+
+.screen > .screen-content > .screen-user > .name:after {
+  top: 45%;
+  left: -1.5rem;  
+}
+
+.screen > .screen-content > .screen-user > .link {  
+  opacity: 0.8;
+  font-size: 1.5rem;
+  text-shadow: 0px 0px 0.5rem white;
+  font-weight: 400;
+  letter-spacing: 0.3rem;
+  text-decoration: none;
+}
+
+.screen > .screen-content > .screen-user > .link:is(:hover, :focus) {  
+  text-decoration: underline; 
+}
+
+@media(max-width: 700px) {
+  .screen {
+    scale: 0.6;
+    margin-bottom: 0rem;
+  }
+}
+
+/* -- Blob effect -- */
+
+@keyframes rotate {
+  from {
+    rotate: 0deg;
+  }
+  
+  50% {
+    scale: 1 1.5;
+  }
+  
+  to {
+    rotate: 360deg;
+  }
+}
+
+#blob {
+  background-color: white;
+  height: 34vmax;
+  aspect-ratio: 1;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+  border-radius: 50%;
+  background: linear-gradient(to right, var(--blob-color-1), var(--blob-color-2));
+  animation: rotate 20s infinite;
+  opacity: 0.5;
+}
+
+#blur {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 2;
+  backdrop-filter: blur(12vmax);
+}
+
+/* -- Links -- */
+
+#links {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 10;
+  padding: 1rem;
+}
+
+.meta-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.meta-link > :is(span, a) {
+  font-family: "Rubik", sans-serif;
+  font-size: 0.9rem;
+  color: white;
+}
+
+.meta-link > .label {
+  width: 160px; 
+  text-align: right;
+}
+
+.meta-link > a {
+  text-decoration: none;
+  outline: none;
+}
+
+.meta-link > a.source {
+  color: rgb(94, 106, 210);
+}
+
+.meta-link > a:is(:hover, :focus) > i {
+  color: white;  
+}
+
+.meta-link > a.youtube {
+  color: rgb(239, 83, 80);
+}
+
+.meta-link > a.youtube > i {
+  padding-top: 0.2rem; 
+}
+
+.meta-link > a > i {
+  height: 1rem;
+  line-height: 1rem;
+}
\ No newline at end of file
diff --git a/fyodor-v2-angled-pointillism/README.markdown b/fyodor-v2-angled-pointillism/README.markdown
new file mode 100644
index 0000000..dd3533d
--- /dev/null
+++ b/fyodor-v2-angled-pointillism/README.markdown
@@ -0,0 +1,5 @@
+# Fyodor V2 angled pointillism
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/trajektorijus/pen/rNxLKGG](https://codepen.io/trajektorijus/pen/rNxLKGG).
+
+Still too slow for my liking...
diff --git a/fyodor-v2-angled-pointillism/dist/index.html b/fyodor-v2-angled-pointillism/dist/index.html
new file mode 100644
index 0000000..ad0c073
--- /dev/null
+++ b/fyodor-v2-angled-pointillism/dist/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Fyodor V2 angled pointillism</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="canvas_wrapper">
+  <canvas id="c"></canvas>
+</div>
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <defs>
+    <filter id="goo">
+        <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="0" />
+        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 10 -5" result="joint" />
+    </filter>
+    </defs>
+</svg>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/victor/1.1.0/victor.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/tweakpane@1.3.2/dist/tweakpane.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/fyodor-v2-angled-pointillism/dist/script.js b/fyodor-v2-angled-pointillism/dist/script.js
new file mode 100644
index 0000000..113faae
--- /dev/null
+++ b/fyodor-v2-angled-pointillism/dist/script.js
@@ -0,0 +1,240 @@
+console.clear()
+
+class Utils {
+  static randomRange(min, max) {
+    return Math.random() * (max - min) + min
+  }
+  
+  static plastic(index) {
+    // Such wow Very performance
+    // https://observablehq.com/@jrus/plastic-sequence
+    // http://extremelearning.com.au/unreasonable-effectiveness-of-quasirandom-sequences/
+    const p1 = 0.7548776662466927
+    const p2 = 0.5698402909980532
+    
+    return [(p1 * index) % 1, (p2 * index) % 1]
+  }
+
+  static mapRange (value, inputMin, inputMax, outputMin, outputMax, clamp) {
+    if (Math.abs(inputMin - inputMax) < Number.EPSILON) {
+      return outputMin;
+    } else {
+      var outVal = ((value - inputMin) / (inputMax - inputMin) * (outputMax - outputMin) + outputMin);
+      if (clamp) {
+        if (outputMax < outputMin) {
+          if (outVal < outputMax) outVal = outputMax;
+          else if (outVal > outputMin) outVal = outputMin;
+        } else {
+          if (outVal > outputMax) outVal = outputMax;
+          else if (outVal < outputMin) outVal = outputMin;
+        }
+      }
+      return outVal;
+    }
+  }
+}
+
+Utils.simplex = new SimplexNoise('seed') 
+
+class App {
+  constructor(imgUri) {
+    this.config = {
+      pointsPerFrame: 500,
+      circleRadius: 3,
+      circleRadiusAmplitude: 2
+    }
+    
+    this.canvas = document.getElementById('c')
+    this.ctx = this.canvas.getContext('2d')
+    
+    this.shadowCanvas = document.createElement('canvas')
+    this.shadowCtx = this.shadowCanvas.getContext('2d')
+    
+    this.timestamp = 0
+    this.fpsHistory = []
+    
+    this.currIndex = 0
+    this.xOffset = 0
+    
+    this.preloadImg(imgUri)
+      .then((image) => {
+        this.imgObj = {}
+        this.imgObj.canvas = document.createElement('canvas')
+        this.imgObj.ctx = this.imgObj.canvas.getContext('2d')
+        this.imgObj.canvas.width = this.imgObj.width = image.naturalWidth
+        this.imgObj.canvas.height = this.imgObj.height = image.naturalHeight
+        this.imgObj.ctx.drawImage(image, 0, 0)
+            
+        this.setUpVars()
+        this.setUpListeners()
+        this.setUpGui()
+        this.update()
+      })
+  }
+  
+  preloadImg(datauri) {
+    const img = new Image()
+    
+    return new Promise((resolve) => {
+      img.onload = (image) => {
+        resolve(image.path[0])
+      }
+      
+      img.src = datauri
+    })
+  }
+
+  getPixelInfo(x, y) {
+    const scale = (this.imgObj.height / this.wHeight)
+    const xOffset = (this.wWidth - (this.imgObj.width /  scale)) / 2
+    const xPos = Utils.mapRange(x, xOffset, this.wWidth - xOffset, 0, 1)
+    const yNorm = (y / this.wHeight)
+    let brightness = 0.1
+    let angle = false
+
+    if (xPos > 0 && xPos < 1) {
+      const imgX = Math.floor(xPos * this.imgObj.width)
+      const imgY = Math.floor(yNorm * this.imgObj.height)
+      const pixel = this.imgObj.ctx.getImageData(imgX, imgY, 1, 1)
+      const data = pixel.data
+      const alpha = ((0.21 * data[0]) + (0.72 * data[1]) + (0.07 * data[2])) / 255
+
+      brightness = ((alpha) * 1.0)
+      angle = this.angleToMostSimilar(imgX, imgY, brightness)
+    }
+
+    return {
+      brightness,
+      angle
+    }
+  }
+  
+  angleToMostSimilar(currX, currY, currBrightness) {
+    let angle = false
+    let currLowest = 1
+    
+    for (let x = -1; x <= 1; x++) {
+      for (let y = -1; y <= 1; y++) {
+        if (!(x === 0 && y === 0)) {
+          const pixel = this.imgObj.ctx.getImageData(currX + x, currY + y, 1, 1)
+          const data = pixel.data
+          const alpha = ((0.21 * data[0]) + (0.72 * data[1]) + (0.07 * data[2])) / 255
+          const brightness = ((alpha) * 1.0)
+          const diff = Math.abs(currBrightness - brightness)
+          
+          if (diff < currLowest) {
+            currLowest = diff
+            angle = Math.atan2(y, x)
+          }
+        }
+      }
+    }
+    
+    return angle
+  }
+
+  setUpGui() {
+    const pane = new Tweakpane()
+    const folder = pane.addFolder({
+      expanded: false,
+      title: 'Settings',
+    })
+    folder.addInput(this.config, 'pointsPerFrame', {
+      min: 1,
+      max: 1000,
+      step: 1
+    }).on('change', () => this.shadowCtx.clearRect(0, 0, this.wWidth, this.wHeight))
+    folder.addInput(this.config, 'circleRadius', {
+      min: 1,
+      max: 10,
+      step: 0.1
+    }).on('change', () => this.shadowCtx.clearRect(0, 0, this.wWidth, this.wHeight))
+    folder.addInput(this.config, 'circleRadiusAmplitude', {
+      min: 0,
+      max: 10,
+      step: 0.01
+    }).on('change', () => this.shadowCtx.clearRect(0, 0, this.wWidth, this.wHeight))
+  }
+  
+  setUpVars() {
+    this.canvas.width = this.shadowCanvas.width = this.wWidth = window.innerWidth
+    this.canvas.height = this.shadowCanvas.height = this.wHeight = window.innerHeight
+    this.wCenterX = this.wWidth / 2
+    this.wCenterY = this.wHeight / 2
+    this.wHypot = Math.hypot(this.wWidth, this.wHeight)
+    this.wMin = Math.min(this.wWidth, this.wHeight)
+  }
+  
+  setUpListeners() {
+    let oldConfig = {}
+    window.addEventListener('resize', this.setUpVars.bind(this))
+    
+    window.addEventListener('mousedown', () => {
+      Object.assign(oldConfig, this.config)
+      
+      this.config.pointsPerFrame = 1000
+      this.config.circleRadius = 3
+      this.config.circleRadiusAmplitude = 0
+    })
+    
+    window.addEventListener('mouseup', () => {
+      Object.assign(this.config, oldConfig)
+    })
+  }
+  
+  draw(ctx) {
+    for (let pixel = 0; pixel < this.config.pointsPerFrame; pixel++,this.currIndex++) {
+      const coords = Utils.plastic(this.currIndex)
+      const xPos = this.wWidth * coords[0]
+      const yPos = this.wHeight * coords[1]
+      const pixelInfo = this.getPixelInfo(xPos + (this.xOffset * 0), yPos)
+      let radius = this.config.circleRadius
+      
+      if (pixelInfo.brightness > 0.1) {
+        radius *= 1 + (((Math.random() * 2) - 1) * this.config.circleRadiusAmplitude)
+        let width = radius
+        let height = radius
+        let xOffset = 0
+        let yOffset = 0
+        
+        ctx.save()
+        ctx.translate(xPos, yPos)
+        if (pixelInfo.angle !== false) {
+          xOffset = radius / -2
+          width *= 2
+          ctx.rotate(pixelInfo.angle)
+        }
+        ctx.beginPath()
+        // ctx.arc(xPos, yPos, Math.abs(radius), 0, Math.PI * 2)
+        ctx.rect(xOffset, yOffset, width, height)
+        ctx.fillStyle = 'hsl(0, 0%, '+(pixelInfo.brightness * 100)+'%)'
+        ctx.fill()
+        ctx.restore()
+      }
+    }
+  }
+  
+  update(t) {
+    const prevTimestamp = this.timestamp * 5000
+    
+    if (t) {
+      this.timestamp = t / 5000
+      this.xOffset = Math.sin(this.timestamp)
+      this.draw(this.shadowCtx)
+    }
+    
+    this.ctx.clearRect(0, 0, this.wWidth, this.wHeight)
+    this.ctx.drawImage(this.shadowCanvas, 0, 0)
+    
+    // show fps
+    const fps = Math.round(1 / (t - prevTimestamp) * 1000)
+    this.fpsHistory.unshift(fps)
+    this.fpsHistory.length = 5
+    this.ctx.font = '16px sans-serif'
+    this.ctx.fillText(this.fpsHistory.reduce((a,b) => a+b) / 5, 50, 50)
+    
+    window.requestAnimationFrame(this.update.bind(this))
+  }
+}
+
+new App('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAAqACAAQAAAABAAABgKADAAQAAAABAAACJgAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/+IReElDQ19QUk9GSUxFAAEBAAARaGFwcGwCAAAAbW50ckdSQVlYWVogB9wACAAXAA8ALgAPYWNzcEFQUEwAAAAAbm9uZQAAAAAAAAAAAAAAAAAAAAAAAPbWAAEAAAAA0y1hcHBsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFZGVzYwAAAMAAAAB5ZHNjbQAAATwAAAfoY3BydAAACSQAAAAjd3RwdAAACUgAAAAUa1RSQwAACVwAAAgMZGVzYwAAAAAAAAAfR2VuZXJpYyBHcmF5IEdhbW1hIDIuMiBQcm9maWxlAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG1sdWMAAAAAAAAAHwAAAAxza1NLAAAALgAAAYRkYURLAAAAOAAAAbJjYUVTAAAAOAAAAep2aVZOAAAAQAAAAiJwdEJSAAAASgAAAmJ1a1VBAAAALAAAAqxmckZVAAAAPgAAAthodUhVAAAANAAAAxZ6aFRXAAAAHgAAA0puYk5PAAAAOgAAA2hjc0NaAAAAKAAAA6JoZUlMAAAAJAAAA8ppdElUAAAATgAAA+5yb1JPAAAAKgAABDxkZURFAAAATgAABGZrb0tSAAAAIgAABLRzdlNFAAAAOAAAAbJ6aENOAAAAHgAABNZqYUpQAAAAJgAABPRlbEdSAAAAKgAABRpwdFBPAAAAUgAABURubE5MAAAAQAAABZZlc0VTAAAATAAABdZ0aFRIAAAAMgAABiJ0clRSAAAAJAAABlRmaUZJAAAARgAABnhockhSAAAAPgAABr5wbFBMAAAASgAABvxydVJVAAAAOgAAB0ZlblVTAAAAPAAAB4BhckVHAAAALAAAB7wAVgFhAGUAbwBiAGUAYwBuAOEAIABzAGkAdgDhACAAZwBhAG0AYQAgADIALAAyAEcAZQBuAGUAcgBpAHMAawAgAGcAcgDlACAAMgAsADIAIABnAGEAbQBtAGEAcAByAG8AZgBpAGwARwBhAG0AbQBhACAAZABlACAAZwByAGkAcwBvAHMAIABnAGUAbgDoAHIAaQBjAGEAIAAyAC4AMgBDHqUAdQAgAGgA7ABuAGgAIABNAOAAdQAgAHgA4QBtACAAQwBoAHUAbgBnACAARwBhAG0AbQBhACAAMgAuADIAUABlAHIAZgBpAGwAIABHAGUAbgDpAHIAaQBjAG8AIABkAGEAIABHAGEAbQBhACAAZABlACAAQwBpAG4AegBhAHMAIAAyACwAMgQXBDAEMwQwBDsETAQ9BDAAIABHAHIAYQB5AC0EMwQwBDwEMAAgADIALgAyAFAAcgBvAGYAaQBsACAAZwDpAG4A6QByAGkAcQB1AGUAIABnAHIAaQBzACAAZwBhAG0AbQBhACAAMgAsADIAwQBsAHQAYQBsAOEAbgBvAHMAIABzAHoA/AByAGsAZQAgAGcAYQBtAG0AYQAgADIALgAykBp1KHBwlo5RSV6mACAAMgAuADIAIIJyX2ljz4/wAEcAZQBuAGUAcgBpAHMAawAgAGcAcgDlACAAZwBhAG0AbQBhACAAMgAsADIALQBwAHIAbwBmAGkAbABPAGIAZQBjAG4A4QAgAWEAZQBkAOEAIABnAGEAbQBhACAAMgAuADIF0gXQBd4F1AAgBdAF5AXVBegAIAXbBdwF3AXZACAAMgAuADIAUAByAG8AZgBpAGwAbwAgAGcAcgBpAGcAaQBvACAAZwBlAG4AZQByAGkAYwBvACAAZABlAGwAbABhACAAZwBhAG0AbQBhACAAMgAsADIARwBhAG0AYQAgAGcAcgBpACAAZwBlAG4AZQByAGkAYwEDACAAMgAsADIAQQBsAGwAZwBlAG0AZQBpAG4AZQBzACAARwByAGEAdQBzAHQAdQBmAGUAbgAtAFAAcgBvAGYAaQBsACAARwBhAG0AbQBhACAAMgAsADLHfLwYACDWjMDJACCsELnIACAAMgAuADIAINUEuFzTDMd8Zm6QGnBwXqZ8+2VwACAAMgAuADIAIGPPj/Blh072TgCCLDCwMOwwpDCsMPMw3gAgADIALgAyACAw1zDtMNUwoTCkMOsDkwO1A70DuQO6A8wAIAOTA7oDwQO5ACADkwOsA7wDvAOxACAAMgAuADIAUABlAHIAZgBpAGwAIABnAGUAbgDpAHIAaQBjAG8AIABkAGUAIABjAGkAbgB6AGUAbgB0AG8AcwAgAGQAYQAgAEcAYQBtAG0AYQAgADIALAAyAEEAbABnAGUAbQBlAGUAbgAgAGcAcgBpAGoAcwAgAGcAYQBtAG0AYQAgADIALAAyAC0AcAByAG8AZgBpAGUAbABQAGUAcgBmAGkAbAAgAGcAZQBuAOkAcgBpAGMAbwAgAGQAZQAgAGcAYQBtAG0AYQAgAGQAZQAgAGcAcgBpAHMAZQBzACAAMgAsADIOIw4xDgcOKg41DkEOAQ4hDiEOMg5ADgEOIw4iDkwOFw4xDkgOJw5EDhsAIAAyAC4AMgBHAGUAbgBlAGwAIABHAHIAaQAgAEcAYQBtAGEAIAAyACwAMgBZAGwAZQBpAG4AZQBuACAAaABhAHIAbQBhAGEAbgAgAGcAYQBtAG0AYQAgADIALAAyACAALQBwAHIAbwBmAGkAaQBsAGkARwBlAG4AZQByAGkBDQBrAGkAIABHAHIAYQB5ACAARwBhAG0AbQBhACAAMgAuADIAIABwAHIAbwBmAGkAbABVAG4AaQB3AGUAcgBzAGEAbABuAHkAIABwAHIAbwBmAGkAbAAgAHMAegBhAHIAbwFbAGMAaQAgAGcAYQBtAG0AYQAgADIALAAyBB4EMQRJBDAETwAgBEEENQRABDAETwAgBDMEMAQ8BDwEMAAgADIALAAyAC0EPwRABD4ERAQ4BDsETABHAGUAbgBlAHIAaQBjACAARwByAGEAeQAgAEcAYQBtAG0AYQAgADIALgAyACAAUAByAG8AZgBpAGwAZQY6BicGRQYnACAAMgAuADIAIAZEBkgGRgAgBjEGRQYnBi8GSgAgBjkGJwZFdGV4dAAAAABDb3B5cmlnaHQgQXBwbGUgSW5jLiwgMjAxMgAAWFlaIAAAAAAAAPNRAAEAAAABFsxjdXJ2AAAAAAAABAAAAAAFAAoADwAUABkAHgAjACgALQAyADcAOwBAAEUASgBPAFQAWQBeAGMAaABtAHIAdwB8AIEAhgCLAJAAlQCaAJ8ApACpAK4AsgC3ALwAwQDGAMsA0ADVANsA4ADlAOsA8AD2APsBAQEHAQ0BEwEZAR8BJQEr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')
\ No newline at end of file
diff --git a/fyodor-v2-angled-pointillism/dist/style.css b/fyodor-v2-angled-pointillism/dist/style.css
new file mode 100644
index 0000000..cc53ce5
--- /dev/null
+++ b/fyodor-v2-angled-pointillism/dist/style.css
@@ -0,0 +1,14 @@
+body {
+  overflow: hidden;
+  background-image: radial-gradient(circle at center, #000, #333);
+}
+body > .canvas_wrapper {
+  width: 100vw;
+  height: 100vh;
+  -webkit-filter: url("#goo");
+  filter: url("#goo");
+}
+body > .canvas_wrapper > canvas {
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/fyodor-v2-angled-pointillism/license.txt b/fyodor-v2-angled-pointillism/license.txt
new file mode 100644
index 0000000..1cb6d79
--- /dev/null
+++ b/fyodor-v2-angled-pointillism/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Tadas Karpavičius (https://codepen.io/trajektorijus/pen/rNxLKGG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/fyodor-v2-angled-pointillism/src/index.html b/fyodor-v2-angled-pointillism/src/index.html
new file mode 100644
index 0000000..1d34615
--- /dev/null
+++ b/fyodor-v2-angled-pointillism/src/index.html
@@ -0,0 +1,12 @@
+<div class="canvas_wrapper">
+  <canvas id="c"></canvas>
+</div>
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <defs>
+    <filter id="goo">
+        <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="0" />
+        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 10 -5" result="joint" />
+    </filter>
+    </defs>
+</svg>
diff --git a/fyodor-v2-angled-pointillism/src/script.js b/fyodor-v2-angled-pointillism/src/script.js
new file mode 100644
index 0000000..aac840f
--- /dev/null
+++ b/fyodor-v2-angled-pointillism/src/script.js
@@ -0,0 +1,240 @@
+console.clear()
+
+class Utils {
+  static randomRange(min, max) {
+    return Math.random() * (max - min) + min
+  }
+  
+  static plastic(index) {
+    // Such wow Very performance
+    // https://observablehq.com/@jrus/plastic-sequence
+    // http://extremelearning.com.au/unreasonable-effectiveness-of-quasirandom-sequences/
+    const p1 = 0.7548776662466927
+    const p2 = 0.5698402909980532
+    
+    return [(p1 * index) % 1, (p2 * index) % 1]
+  }
+
+  static mapRange (value, inputMin, inputMax, outputMin, outputMax, clamp) {
+    if (Math.abs(inputMin - inputMax) < Number.EPSILON) {
+      return outputMin;
+    } else {
+      var outVal = ((value - inputMin) / (inputMax - inputMin) * (outputMax - outputMin) + outputMin);
+      if (clamp) {
+        if (outputMax < outputMin) {
+          if (outVal < outputMax) outVal = outputMax;
+          else if (outVal > outputMin) outVal = outputMin;
+        } else {
+          if (outVal > outputMax) outVal = outputMax;
+          else if (outVal < outputMin) outVal = outputMin;
+        }
+      }
+      return outVal;
+    }
+  }
+}
+
+Utils.simplex = new SimplexNoise('seed') 
+
+class App {
+  constructor(imgUri) {
+    this.config = {
+      pointsPerFrame: 500,
+      circleRadius: 3,
+      circleRadiusAmplitude: 2
+    }
+    
+    this.canvas = document.getElementById('c')
+    this.ctx = this.canvas.getContext('2d')
+    
+    this.shadowCanvas = document.createElement('canvas')
+    this.shadowCtx = this.shadowCanvas.getContext('2d')
+    
+    this.timestamp = 0
+    this.fpsHistory = []
+    
+    this.currIndex = 0
+    this.xOffset = 0
+    
+    this.preloadImg(imgUri)
+      .then((image) => {
+        this.imgObj = {}
+        this.imgObj.canvas = document.createElement('canvas')
+        this.imgObj.ctx = this.imgObj.canvas.getContext('2d')
+        this.imgObj.canvas.width = this.imgObj.width = image.naturalWidth
+        this.imgObj.canvas.height = this.imgObj.height = image.naturalHeight
+        this.imgObj.ctx.drawImage(image, 0, 0)
+            
+        this.setUpVars()
+        this.setUpListeners()
+        this.setUpGui()
+        this.update()
+      })
+  }
+  
+  preloadImg(datauri) {
+    const img = new Image()
+    
+    return new Promise((resolve) => {
+      img.onload = (image) => {
+        resolve(image.path[0])
+      }
+      
+      img.src = datauri
+    })
+  }
+
+  getPixelInfo(x, y) {
+    const scale = (this.imgObj.height / this.wHeight)
+    const xOffset = (this.wWidth - (this.imgObj.width /  scale)) / 2
+    const xPos = Utils.mapRange(x, xOffset, this.wWidth - xOffset, 0, 1)
+    const yNorm = (y / this.wHeight)
+    let brightness = 0.1
+    let angle = false
+
+    if (xPos > 0 && xPos < 1) {
+      const imgX = Math.floor(xPos * this.imgObj.width)
+      const imgY = Math.floor(yNorm * this.imgObj.height)
+      const pixel = this.imgObj.ctx.getImageData(imgX, imgY, 1, 1)
+      const data = pixel.data
+      const alpha = ((0.21 * data[0]) + (0.72 * data[1]) + (0.07 * data[2])) / 255
+
+      brightness = ((alpha) * 1.0)
+      angle = this.angleToMostSimilar(imgX, imgY, brightness)
+    }
+
+    return {
+      brightness,
+      angle
+    }
+  }
+  
+  angleToMostSimilar(currX, currY, currBrightness) {
+    let angle = false
+    let currLowest = 1
+    
+    for (let x = -1; x <= 1; x++) {
+      for (let y = -1; y <= 1; y++) {
+        if (!(x === 0 && y === 0)) {
+          const pixel = this.imgObj.ctx.getImageData(currX + x, currY + y, 1, 1)
+          const data = pixel.data
+          const alpha = ((0.21 * data[0]) + (0.72 * data[1]) + (0.07 * data[2])) / 255
+          const brightness = ((alpha) * 1.0)
+          const diff = Math.abs(currBrightness - brightness)
+          
+          if (diff < currLowest) {
+            currLowest = diff
+            angle = Math.atan2(y, x)
+          }
+        }
+      }
+    }
+    
+    return angle
+  }
+
+  setUpGui() {
+    const pane = new Tweakpane()
+    const folder = pane.addFolder({
+      expanded: false,
+      title: 'Settings',
+    })
+    folder.addInput(this.config, 'pointsPerFrame', {
+      min: 1,
+      max: 1000,
+      step: 1
+    }).on('change', () => this.shadowCtx.clearRect(0, 0, this.wWidth, this.wHeight))
+    folder.addInput(this.config, 'circleRadius', {
+      min: 1,
+      max: 10,
+      step: 0.1
+    }).on('change', () => this.shadowCtx.clearRect(0, 0, this.wWidth, this.wHeight))
+    folder.addInput(this.config, 'circleRadiusAmplitude', {
+      min: 0,
+      max: 10,
+      step: 0.01
+    }).on('change', () => this.shadowCtx.clearRect(0, 0, this.wWidth, this.wHeight))
+  }
+  
+  setUpVars() {
+    this.canvas.width = this.shadowCanvas.width = this.wWidth = window.innerWidth
+    this.canvas.height = this.shadowCanvas.height = this.wHeight = window.innerHeight
+    this.wCenterX = this.wWidth / 2
+    this.wCenterY = this.wHeight / 2
+    this.wHypot = Math.hypot(this.wWidth, this.wHeight)
+    this.wMin = Math.min(this.wWidth, this.wHeight)
+  }
+  
+  setUpListeners() {
+    let oldConfig = {}
+    window.addEventListener('resize', this.setUpVars.bind(this))
+    
+    window.addEventListener('mousedown', () => {
+      Object.assign(oldConfig, this.config)
+      
+      this.config.pointsPerFrame = 1000
+      this.config.circleRadius = 3
+      this.config.circleRadiusAmplitude = 0
+    })
+    
+    window.addEventListener('mouseup', () => {
+      Object.assign(this.config, oldConfig)
+    })
+  }
+  
+  draw(ctx) {
+    for (let pixel = 0; pixel < this.config.pointsPerFrame; pixel++,this.currIndex++) {
+      const coords = Utils.plastic(this.currIndex)
+      const xPos = this.wWidth * coords[0]
+      const yPos = this.wHeight * coords[1]
+      const pixelInfo = this.getPixelInfo(xPos + (this.xOffset * 0), yPos)
+      let radius = this.config.circleRadius
+      
+      if (pixelInfo.brightness > 0.1) {
+        radius *= 1 + (((Math.random() * 2) - 1) * this.config.circleRadiusAmplitude)
+        let width = radius
+        let height = radius
+        let xOffset = 0
+        let yOffset = 0
+        
+        ctx.save()
+        ctx.translate(xPos, yPos)
+        if (pixelInfo.angle !== false) {
+          xOffset = radius / -2
+          width *= 2
+          ctx.rotate(pixelInfo.angle)
+        }
+        ctx.beginPath()
+        // ctx.arc(xPos, yPos, Math.abs(radius), 0, Math.PI * 2)
+        ctx.rect(xOffset, yOffset, width, height)
+        ctx.fillStyle = 'hsl(0, 0%, '+(pixelInfo.brightness * 100)+'%)'
+        ctx.fill()
+        ctx.restore()
+      }
+    }
+  }
+  
+  update(t) {
+    const prevTimestamp = this.timestamp * 5000
+    
+    if (t) {
+      this.timestamp = t / 5000
+      this.xOffset = Math.sin(this.timestamp)
+      this.draw(this.shadowCtx)
+    }
+    
+    this.ctx.clearRect(0, 0, this.wWidth, this.wHeight)
+    this.ctx.drawImage(this.shadowCanvas, 0, 0)
+    
+    // show fps
+    const fps = Math.round(1 / (t - prevTimestamp) * 1000)
+    this.fpsHistory.unshift(fps)
+    this.fpsHistory.length = 5
+    this.ctx.font = '16px sans-serif'
+    this.ctx.fillText(this.fpsHistory.reduce((a,b) => a+b) / 5, 50, 50)
+    
+    window.requestAnimationFrame(this.update.bind(this))
+  }
+}
+
+new App('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAAqACAAQAAAABAAABgKADAAQAAAABAAACJgAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/+IReElDQ19QUk9GSUxFAAEBAAARaGFwcGwCAAAAbW50ckdSQVlYWVogB9wACAAXAA8ALgAPYWNzcEFQUEwAAAAAbm9uZQAAAAAAAAAAAAAAAAAAAAAAAPbWAAEAAAAA0y1hcHBsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFZGVzYwAAAMAAAAB5ZHNjbQAAATwAAAfoY3BydAAACSQAAAAjd3RwdAAACUgAAAAUa1RSQwAACVwAAAgMZGVzYwAAAAAAAAAfR2VuZXJpYyBHcmF5IEdhbW1hIDIuMiBQcm9maWxlAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG1sdWMAAAAAAAAAHwAAAAxza1NLAAAALgAAAYRkYURLAAAAOAAAAbJjYUVTAAAAOAAAAep2aVZOAAAAQAAAAiJwdEJSAAAASgAAAmJ1a1VBAAAALAAAAqxmckZVAAAAPgAAAthodUhVAAAANAAAAxZ6aFRXAAAAHgAAA0puYk5PAAAAOgAAA2hjc0NaAAAAKAAAA6JoZUlMAAAAJAAAA8ppdElUAAAATgAAA+5yb1JPAAAAKgAABDxkZURFAAAATgAABGZrb0tSAAAAIgAABLRzdlNFAAAAOAAAAbJ6aENOAAAAHgAABNZqYUpQAAAAJgAABPRlbEdSAAAAKgAABRpwdFBPAAAAUgAABURubE5MAAAAQAAABZZlc0VTAAAATAAABdZ0aFRIAAAAMgAABiJ0clRSAAAAJAAABlRmaUZJAAAARgAABnhockhSAAAAPgAABr5wbFBMAAAASgAABvxydVJVAAAAOgAAB0ZlblVTAAAAPAAAB4BhckVHAAAALAAAB7wAVgFhAGUAbwBiAGUAYwBuAOEAIABzAGkAdgDhACAAZwBhAG0AYQAgADIALAAyAEcAZQBuAGUAcgBpAHMAawAgAGcAcgDlACAAMgAsADIAIABnAGEAbQBtAGEAcAByAG8AZgBpAGwARwBhAG0AbQBhACAAZABlACAAZwByAGkAcwBvAHMAIABnAGUAbgDoAHIAaQBjAGEAIAAyAC4AMgBDHqUAdQAgAGgA7ABuAGgAIABNAOAAdQAgAHgA4QBtACAAQwBoAHUAbgBnACAARwBhAG0AbQBhACAAMgAuADIAUABlAHIAZgBpAGwAIABHAGUAbgDpAHIAaQBjAG8AIABkAGEAIABHAGEAbQBhACAAZABlACAAQwBpAG4AegBhAHMAIAAyACwAMgQXBDAEMwQwBDsETAQ9BDAAIABHAHIAYQB5AC0EMwQwBDwEMAAgADIALgAyAFAAcgBvAGYAaQBsACAAZwDpAG4A6QByAGkAcQB1AGUAIABnAHIAaQBzACAAZwBhAG0AbQBhACAAMgAsADIAwQBsAHQAYQBsAOEAbgBvAHMAIABzAHoA/AByAGsAZQAgAGcAYQBtAG0AYQAgADIALgAykBp1KHBwlo5RSV6mACAAMgAuADIAIIJyX2ljz4/wAEcAZQBuAGUAcgBpAHMAawAgAGcAcgDlACAAZwBhAG0AbQBhACAAMgAsADIALQBwAHIAbwBmAGkAbABPAGIAZQBjAG4A4QAgAWEAZQBkAOEAIABnAGEAbQBhACAAMgAuADIF0gXQBd4F1AAgBdAF5AXVBegAIAXbBdwF3AXZACAAMgAuADIAUAByAG8AZgBpAGwAbwAgAGcAcgBpAGcAaQBvACAAZwBlAG4AZQByAGkAYwBvACAAZABlAGwAbABhACAAZwBhAG0AbQBhACAAMgAsADIARwBhAG0AYQAgAGcAcgBpACAAZwBlAG4AZQByAGkAYwEDACAAMgAsADIAQQBsAGwAZwBlAG0AZQBpAG4AZQBzACAARwByAGEAdQBzAHQAdQBmAGUAbgAtAFAAcgBvAGYAaQBsACAARwBhAG0AbQBhACAAMgAsADLHfLwYACDWjMDJACCsELnIACAAMgAuADIAINUEuFzTDMd8Zm6QGnBwXqZ8+2VwACAAMgAuADIAIGPPj/Blh072TgCCLDCwMOwwpDCsMPMw3gAgADIALgAyACAw1zDtMNUwoTCkMOsDkwO1A70DuQO6A8wAIAOTA7oDwQO5ACADkwOsA7wDvAOxACAAMgAuADIAUABlAHIAZgBpAGwAIABnAGUAbgDpAHIAaQBjAG8AIABkAGUAIABjAGkAbgB6AGUAbgB0AG8AcwAgAGQAYQAgAEcAYQBtAG0AYQAgADIALAAyAEEAbABnAGUAbQBlAGUAbgAgAGcAcgBpAGoAcwAgAGcAYQBtAG0AYQAgADIALAAyAC0AcAByAG8AZgBpAGUAbABQAGUAcgBmAGkAbAAgAGcAZQBuAOkAcgBpAGMAbwAgAGQAZQAgAGcAYQBtAG0AYQAgAGQAZQAgAGcAcgBpAHMAZQBzACAAMgAsADIOIw4xDgcOKg41DkEOAQ4hDiEOMg5ADgEOIw4iDkwOFw4xDkgOJw5EDhsAIAAyAC4AMgBHAGUAbgBlAGwAIABHAHIAaQAgAEcAYQBtAGEAIAAyACwAMgBZAGwAZQBpAG4AZQBuACAAaABhAHIAbQBhAGEAbgAgAGcAYQBtAG0AYQAgADIALAAyACAALQBwAHIAbwBmAGkAaQBsAGkARwBlAG4AZQByAGkBDQBrAGkAIABHAHIAYQB5ACAARwBhAG0AbQBhACAAMgAuADIAIABwAHIAbwBmAGkAbABVAG4AaQB3AGUAcgBzAGEAbABuAHkAIABwAHIAbwBmAGkAbAAgAHMAegBhAHIAbwFbAGMAaQAgAGcAYQBtAG0AYQAgADIALAAyBB4EMQRJBDAETwAgBEEENQRABDAETwAgBDMEMAQ8BDwEMAAgADIALAAyAC0EPwRABD4ERAQ4BDsETABHAGUAbgBlAHIAaQBjACAARwByAGEAeQAgAEcAYQBtAG0AYQAgADIALgAyACAAUAByAG8AZgBpAGwAZQY6BicGRQYnACAAMgAuADIAIAZEBkgGRgAgBjEGRQYnBi8GSgAgBjkGJwZFdGV4dAAAAABDb3B5cmlnaHQgQXBwbGUgSW5jLiwgMjAxMgAAWFlaIAAAAAAAAPNRAAEAAAABFsxjdXJ2AAAAAAAABAAAAAAFAAoADwAUABkAHgAjACgALQAyADcAOwBAAEUASgBPAFQAWQBeAGMAaABtAHIAdwB8AIEAhgCLAJAAlQCaAJ8ApACpAK4AsgC3ALwAwQDGAMsA0ADVANsA4ADlAOsA8AD2APsBAQEHAQ0BEwEZAR8BJQEr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')
diff --git a/fyodor-v2-angled-pointillism/src/style.scss b/fyodor-v2-angled-pointillism/src/style.scss
new file mode 100644
index 0000000..403827b
--- /dev/null
+++ b/fyodor-v2-angled-pointillism/src/style.scss
@@ -0,0 +1,18 @@
+body {
+  overflow: hidden;
+  background-image: radial-gradient(
+    circle at center,
+    #000,
+    #333
+  );
+  
+  & > .canvas_wrapper {
+    width: 100vw; height: 100vh;
+    -webkit-filter: url("#goo");
+    filter: url("#goo");
+    
+    & > canvas {
+      width: 100%; height: 100%;
+    }
+  }
+}
diff --git a/gate-of-time-svg-css/README.markdown b/gate-of-time-svg-css/README.markdown
new file mode 100644
index 0000000..b8a1b20
--- /dev/null
+++ b/gate-of-time-svg-css/README.markdown
@@ -0,0 +1,4 @@
+# Gate of Time SVG + CSS
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/Coderesting/pen/yLyaJMz](https://codepen.io/Coderesting/pen/yLyaJMz).
+
+ Gate of Time from Zelda Skyward Sword in SVG and CSS.  I recreated it in two steps. At first, I used Affinity Designer to create the shapes and then positioned and animated them by hand using CSS.
\ No newline at end of file
diff --git a/gate-of-time-svg-css/dist/index.html b/gate-of-time-svg-css/dist/index.html
new file mode 100644
index 0000000..7171847
--- /dev/null
+++ b/gate-of-time-svg-css/dist/index.html
@@ -0,0 +1,1078 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Gate of Time SVG + CSS</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="container">
+  <div id="portal">
+    <svg id="mainGear" viewBox="-10 -10 532 532" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+      <filter id="shaddowMain" x="-20%" y="-20%" width="200%" height="200%">
+        <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
+        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"/>
+        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
+      </filter>
+
+      <path filter="url(#shaddowMain)" d="M281.426,1.266c-16.909,-1.688 -33.943,-1.688 -50.852,0l-5.24,47.066c-15.965,2.358 -31.605,6.548 -46.611,12.489l-28.071,-38.14c-15.487,6.992 -30.239,15.51 -44.039,25.426l18.996,43.38c-12.648,10.024 -24.098,21.474 -34.122,34.122l-43.38,-18.996c-9.916,13.8 -18.434,28.552 -25.426,44.039l38.14,28.071c-5.941,15.006 -10.131,30.646 -12.489,46.611l-47.066,5.24c-1.688,16.909 -1.688,33.943 0,50.852l47.066,5.24c2.358,15.965 6.548,31.605 12.489,46.611l-38.14,28.071c6.992,15.487 15.51,30.239 25.426,44.039l43.38,-18.996c10.024,12.648 21.474,24.098 34.122,34.122l-18.996,43.38c13.8,9.916 28.552,18.434 44.039,25.426l28.071,-38.14c15.006,5.941 30.646,10.131 46.611,12.489l5.24,47.066c16.909,1.688 33.943,1.688 50.852,0l5.24,-47.066c15.965,-2.358 31.605,-6.548 46.611,-12.489l28.071,38.14c15.487,-6.992 30.239,-15.51 44.039,-25.426l-18.996,-43.38c12.648,-10.024 24.098,-21.474 34.122,-34.122l43.38,18.996c9.916,-13.8 18.434,-28.552 25.426,-44.039l-38.14,-28.071c5.941,-15.006 10.131,-30.646 12.489,-46.611l47.066,-5.24c1.688,-16.909 1.688,-33.943 0,-50.852l-47.066,-5.24c-2.358,-15.965 -6.548,-31.605 -12.489,-46.611l38.14,-28.071c-6.992,-15.487 -15.51,-30.239 -25.426,-44.039l-43.38,18.996c-10.024,-12.648 -21.474,-24.098 -34.122,-34.122l18.996,-43.38c-13.8,-9.916 -28.552,-18.434 -44.039,-25.426l-28.071,38.14c-15.006,-5.941 -30.646,-10.131 -46.611,-12.489l-5.24,-47.066Zm-25.426,78.094c97.49,0 176.64,79.15 176.64,176.64c0,97.49 -79.15,176.64 -176.64,176.64c-97.49,0 -176.64,-79.15 -176.64,-176.64c0,-97.49 79.15,-176.64 176.64,-176.64Z"/>
+
+      <g class="runes">
+        <g id="_11">
+          <path d="M137.832,47.21c4.022,-2.236 8.751,-1.415 10.556,1.832c1.804,3.246 0.005,7.697 -4.016,9.932c-4.021,2.235 -8.751,1.414 -10.556,-1.832c-1.804,-3.247 -0.005,-7.697 4.016,-9.932Z"/>
+          <path d="M134.525,41.66c8.038,-4.832 17.768,-3.422 21.715,3.145c3.948,6.568 0.626,15.822 -7.412,20.653c-8.039,4.831 -17.769,3.421 -21.716,-3.146c-3.947,-6.567 -0.626,-15.821 7.413,-20.652Z" />
+          <path class="filled" d="M126.278,60.627l-5.502,4.854l7.898,-1.128l-2.396,-3.726Z"/>
+          <path class="filled" d="M154.545,42.628l6.524,-2.141l-4.225,5.464l-2.299,-3.323"/>
+        </g>
+        <g id="_10">
+          <path d="M75.725,131.854l-5.027,15.873l-14.868,-11.133l14.868,11.133l-11.205,12.353" />
+          <path class="filled" d="M78.688,124.503c1.635,0.716 2.306,2.797 1.497,4.644c-0.808,1.847 -2.793,2.765 -4.428,2.049c-1.635,-0.716 -2.306,-2.797 -1.497,-4.644c0.809,-1.847 2.793,-2.765 4.428,-2.049Z"/>
+          <path class="filled" d="M59.452,160.086c1.274,1.386 0.98,3.733 -0.657,5.237c-1.636,1.504 -3.999,1.599 -5.273,0.212c-1.275,-1.386 -0.98,-3.733 0.656,-5.237c1.637,-1.504 4,-1.599 5.274,-0.212Z"/>
+          <path d="M53.279,125.007c3.844,2.696 4.315,8.663 1.051,13.319c-3.264,4.655 -9.035,6.247 -12.879,3.552c-3.844,-2.696 -4.315,-8.663 -1.051,-13.319c3.265,-4.655 9.035,-6.247 12.879,-3.552Z" />
+          <circle cx="46.869" cy="132.749" r="1.309"/>
+        </g>
+        <g id="_9">
+          <path d="M38.054,234.74l0.287,40.868l-27.005,-21.188c0,0 26.646,-19.464 26.718,-19.68" />
+          <path class="filled" d="M31.59,246.088l-9.265,7.757l9.265,8.332l0,-16.089Z"/>
+        </g>
+        <g id="_8">
+          <path d="M54.417,358.926l8.834,4.453l-0.79,9.553c0,0 13.718,7.397 7.901,-1.581" />
+          <path d="M46.445,356.987l7.972,1.939c0,0 0,-15.729 5.674,-5.674" />
+          <path d="M62.461,372.932l-1.867,7.685l-9.265,-3.376c0,0 0.646,14.867 -4.669,6.536" />
+          <path d="M51.329,377.241l-7.364,-2.725l0.828,-8.479c0,0 -11.42,-6.608 -7.47,1.939" />
+          <path d="M54.417,358.926l-7.757,-2.155l-1.867,9.266" />
+          <path class="filled" d="M48.468,361.404l-1.005,10.392l9.983,3.663l1.509,-9.983l-10.487,-4.072Z"/>
+        </g>
+        <g id="_7">
+          <path d="M148.114,441.25l12.625,20.867l-18.5,13.863l-20.254,-11.348l1.221,-23.343l24.908,-0.039Z" />
+          <path d="M144.465,446.388l7.326,12.498l-10.845,9.121l-13.503,-7.254l0.575,-14.293l16.447,-0.072Z" />
+        </g>
+        <path id="_6" d="M242.809,487.823l3.232,1.885l5.836,-6.015l-9.786,-6.913l-8.619,8.619l14.724,11.851l5.925,-6.375l7.991,5.656l14.903,-11.94l-9.786,-8.08l-9.696,7.631l5.566,5.925l3.771,-3.322" />
+        <path id="_5" class="filled" d="M373.909,436.559l-1.706,38.605l15.891,-10.594l-33.129,-18.135l18.944,-9.876Z"/>
+        <g id="_4">
+          <path d="M463.782,359.991l2.411,16.878l-18.411,6.794l-3.069,-18.63l19.069,-5.042Z" />
+          <path class="filled" d="M458.974,364.669c0.269,-0.18 -8.888,3.501 -8.888,3.501l1.257,10.684l10.055,-4.489c0,0 -2.693,-9.517 -2.424,-9.696Z"/>
+          <path class="filled" d="M454.844,362.155l-0.449,-7.631c0,0 -3.681,-7.272 -0.359,-6.913c3.322,0.359 0.359,6.913 0.359,6.913"/>
+          <path class="filled" d="M445.597,374.993l-4.938,2.963c0,0 -6.015,-0.808 -5.387,1.975c0.629,2.783 5.387,-1.975 5.387,-1.975"/>
+        </g>
+        <path id="_3" d="M471.399,247.987l0.877,-13.151l32.001,3.068l-1.096,34.194l-22.138,1.534l0,-22.357l8.987,0" style="stroke-width:4px;"/>
+        <g id="_2">
+          <path d="M436.932,129.458l19.121,32.89l10.343,-7.571l-18.061,-33.146l12.293,-7.471" style="stroke-width:4px;"/>
+          <path d="M466.766,125.315l11.833,21.526" style="stroke-width:4px"/>
+        </g>
+        <path id="_1" d="M362.988,44.27l-4.83,-8.012l8.634,-2.322l7.155,4.499l-1.114,17.195l0.876,9.037l-8.369,-0.319l-1.852,-6.66l9.345,-2.058l11.405,-11.706l7.662,3.433l1.488,9.561l-7.117,0.337" style="stroke-width:3.34px;"/>
+        <g id="_12">
+          <path d="M258.47,33.811l16.609,-15.352l-17.776,-13.916l-16.699,14.904l21.817,18.404l12.569,-10.324" style="stroke-width:2.98px;"/>
+          <path class="filled" d="M257.393,9.885l-10.055,9.158l10.594,9.516l10.773,-9.875l-11.312,-8.799Z" style="stroke-width:1.55px;"/>
+        </g>
+      </g>
+      <g class="decoration">
+        <g>
+          <path d="M213.616,431.669c4.942,12.146 3.883,15.031 13.388,15.845c1.639,0.14 -4.585,-6.266 -5.282,-7.951c-0.617,-1.493 1.187,-5.65 5.843,-1.729c4.191,3.529 12.345,9.82 12.345,9.82l8.599,0l-19.497,-14.603c0,0 -15.698,-2.125 -15.396,-1.382Z"/>
+          <path d="M245.459,434.416l7.973,5.89l0,-5.674l-7.973,-0.216Z"/>
+          <path d="M257.878,434.416l-0.072,5.89l6.615,-5.89l-6.543,0Z"/>
+          <path d="M310.21,444.338l-3.017,-6.194l6.464,4.525l-3.447,1.669Z"/>
+          <path d="M261.114,447.654l20.383,-14.046c0,0 16.387,-2.472 16.232,-2.097c-3.157,7.607 -5.337,15.54 -14.38,16.143c-0.923,0.061 5.962,-7.898 5.761,-9.449c-0.201,-1.551 -2.514,-4.238 -6.967,0.143c-4.453,4.382 -12.21,9.306 -12.21,9.306l-8.819,0"/>
+          <path d="M299.508,444.321l3.017,-6.177l2.421,6.194l-5.438,-0.017Z"/>
+        </g>
+        <g>
+          <path d="M307.129,429.326c10.353,8.047 10.878,11.075 19.517,7.028c1.489,-0.698 -7.104,-3.133 -8.55,-4.244c-1.281,-0.985 -1.797,-5.487 4.196,-4.42c5.393,0.961 15.601,2.332 15.601,2.332l7.446,-4.299l-24.186,-2.898c0,0 -14.657,6.009 -14.024,6.501Z"/>
+          <path d="M336.08,415.783l9.849,1.114l-2.837,-4.913l-7.012,3.799Z"/>
+          <path d="M346.835,409.574l2.882,5.136l2.784,-8.407l-5.666,3.271Z"/>
+          <path d="M397.116,392l-5.709,-3.855l7.86,0.686l-2.151,3.169Z"/>
+          <path d="M356.255,419.42l10.63,-22.355c0,0 12.956,-10.335 13.009,-9.932c1.07,8.166 3.148,16.126 -4.382,21.17c-0.769,0.514 1.214,-9.821 0.264,-11.064c-0.949,-1.243 -4.295,-2.413 -5.961,3.608c-1.666,6.021 -5.922,14.164 -5.922,14.164l-7.638,4.409"/>
+          <path d="M387.84,397.336l-0.476,-6.857l5.193,4.153l-4.717,2.704Z"/>
+        </g>
+        <g>
+          <path d="M386.942,380.54c12.99,1.793 14.958,4.153 20.416,-3.672c0.941,-1.349 -7.719,0.839 -9.526,0.599c-1.602,-0.212 -4.3,-3.853 1.424,-5.925c5.151,-1.864 14.676,-5.781 14.676,-5.781l4.299,-7.446l-22.394,9.583c0,0 -9.69,12.532 -8.895,12.642Z"/>
+          <path d="M405.243,354.336l9.086,-3.959l-4.914,-2.837l-4.172,6.796Z"/>
+          <path d="M411.452,343.581l5.065,3.007l-1.794,-8.673l-3.271,5.666Z"/>
+          <path d="M446.21,303.222l-6.872,-0.485l7.15,-3.335l-0.278,3.82Z"/>
+          <path d="M424.534,347.398l-1.973,-24.675c0,0 6.054,-15.428 6.301,-15.105c5.009,6.536 10.789,12.391 6.789,20.524c-0.408,0.83 -3.859,-9.112 -5.302,-9.714c-1.444,-0.601 -4.927,0.059 -3.359,6.106c1.568,6.047 1.954,15.227 1.954,15.227l-4.41,7.637"/>
+          <path d="M440.845,312.481l-3.841,-5.701l6.574,1.001l-2.733,4.7Z"/>
+        </g>
+        <g>
+          <path d="M431.669,298.384c12.146,-4.942 15.031,-3.883 15.845,-13.388c0.14,-1.639 -6.266,4.585 -7.951,5.282c-1.493,0.617 -5.65,-1.187 -1.729,-5.843c3.529,-4.191 9.82,-12.345 9.82,-12.345l0,-8.599l-14.603,19.497c0,0 -2.125,15.698 -1.382,15.396Z"/>
+          <path d="M434.416,266.541l5.89,-7.973l-5.674,0l-0.216,7.973Z"/>
+          <path d="M434.416,254.122l5.89,0.072l-5.89,-6.615l0,6.543Z"/>
+          <path d="M444.338,201.79l-6.194,3.017l4.525,-6.464l1.669,3.447Z"/>
+          <path d="M447.654,250.886l-14.046,-20.383c0,0 -2.472,-16.387 -2.097,-16.232c7.607,3.157 15.54,5.337 16.143,14.38c0.061,0.923 -7.898,-5.962 -9.449,-5.761c-1.551,0.201 -4.238,2.514 0.143,6.967c4.382,4.453 9.306,12.21 9.306,12.21l0,8.819"/>
+          <path d="M444.321,212.492l-6.177,-3.017l6.194,-2.421l-0.017,5.438Z"/>
+        </g>
+        <g>
+          <path d="M429.326,204.871c8.047,-10.353 11.075,-10.878 7.028,-19.517c-0.698,-1.489 -3.133,7.104 -4.244,8.55c-0.985,1.281 -5.487,1.797 -4.42,-4.196c0.961,-5.393 2.332,-15.601 2.332,-15.601l-4.299,-7.446l-2.898,24.186c0,0 6.009,14.657 6.501,14.024Z"/>
+          <path d="M415.783,175.92l1.114,-9.849l-4.913,2.837l3.799,7.012Z"/>
+          <path d="M409.574,165.165l5.136,-2.882l-8.407,-2.784l3.271,5.666Z"/>
+          <path d="M392,114.884l-3.855,5.709l0.686,-7.86l3.169,2.151Z"/>
+          <path d="M419.42,155.745l-22.355,-10.63c0,0 -10.335,-12.956 -9.932,-13.009c8.166,-1.07 16.126,-3.148 21.17,4.382c0.514,0.769 -9.821,-1.214 -11.064,-0.264c-1.243,0.949 -2.413,4.295 3.608,5.961c6.021,1.666 14.164,5.922 14.164,5.922l4.409,7.638"/>
+          <path d="M397.336,124.16l-6.857,0.476l4.153,-5.193l2.704,4.717Z"/>
+        </g>
+        <g>
+          <path d="M380.54,125.058c1.793,-12.99 4.153,-14.958 -3.672,-20.416c-1.349,-0.941 0.839,7.719 0.599,9.526c-0.212,1.602 -3.853,4.3 -5.925,-1.424c-1.864,-5.151 -5.781,-14.676 -5.781,-14.676l-7.446,-4.299l9.583,22.394c0,0 12.532,9.69 12.642,8.895Z"/>
+          <path d="M354.336,106.757l-3.959,-9.086l-2.837,4.914l6.796,4.172Z"/>
+          <path d="M343.581,100.548l3.007,-5.065l-8.673,1.794l5.666,3.271Z"/>
+          <path d="M303.222,65.79l-0.485,6.872l-3.335,-7.15l3.82,0.278Z"/>
+          <path d="M347.398,87.466l-24.675,1.973c0,0 -15.428,-6.054 -15.105,-6.301c6.536,-5.009 12.391,-10.789 20.524,-6.789c0.83,0.408 -9.112,3.859 -9.714,5.302c-0.601,1.444 0.059,4.927 6.106,3.359c6.047,-1.568 15.227,-1.954 15.227,-1.954l7.637,4.41"/>
+          <path d="M312.481,71.155l-5.701,3.841l1.001,-6.574l4.7,2.733Z"/>
+        </g>
+        <g>
+          <path d="M298.384,80.331c-4.942,-12.146 -3.883,-15.031 -13.388,-15.845c-1.639,-0.14 4.585,6.266 5.282,7.951c0.617,1.493 -1.187,5.65 -5.843,1.729c-4.191,-3.529 -12.345,-9.82 -12.345,-9.82l-8.599,0l19.497,14.603c0,0 15.698,2.125 15.396,1.382Z"/>
+          <path d="M266.541,77.584l-7.973,-5.89l0,5.674l7.973,0.216Z"/>
+          <path d="M254.122,77.584l0.072,-5.89l-6.615,5.89l6.543,0Z"/>
+          <path d="M201.79,67.662l3.017,6.194l-6.464,-4.525l3.447,-1.669Z"/>
+          <path d="M250.886,64.346l-20.383,14.046c0,0 -16.387,2.472 -16.232,2.097c3.157,-7.607 5.337,-15.54 14.38,-16.143c0.923,-0.061 -5.962,7.898 -5.761,9.449c0.201,1.551 2.514,4.238 6.967,-0.143c4.453,-4.382 12.21,-9.306 12.21,-9.306l8.819,0"/>
+          <path d="M212.492,67.679l-3.017,6.177l-2.421,-6.194l5.438,0.017Z"/>
+        </g>
+        <g>
+          <path d="M204.871,82.674c-10.353,-8.047 -10.878,-11.075 -19.517,-7.028c-1.489,0.698 7.104,3.133 8.55,4.244c1.281,0.985 1.797,5.487 -4.196,4.42c-5.393,-0.961 -15.601,-2.332 -15.601,-2.332l-7.446,4.299l24.186,2.898c0,0 14.657,-6.009 14.024,-6.501Z"/>
+          <path d="M175.92,96.217l-9.849,-1.114l2.837,4.913l7.012,-3.799Z"/>
+          <path d="M165.165,102.426l-2.882,-5.136l-2.784,8.407l5.666,-3.271Z"/>
+          <path d="M114.884,120l5.709,3.855l-7.86,-0.686l2.151,-3.169Z"/>
+          <path d="M155.745,92.58l-10.63,22.355c0,0 -12.956,10.335 -13.009,9.932c-1.07,-8.166 -3.148,-16.126 4.382,-21.17c0.769,-0.514 -1.214,9.821 -0.264,11.064c0.949,1.243 4.295,2.413 5.961,-3.608c1.666,-6.021 5.922,-14.164 5.922,-14.164l7.638,-4.409"/>
+          <path d="M124.16,114.664l0.476,6.857l-5.193,-4.153l4.717,-2.704Z"/>
+        </g>
+        <g>
+          <path d="M125.058,131.46c-12.99,-1.793 -14.958,-4.153 -20.416,3.672c-0.941,1.349 7.719,-0.839 9.526,-0.599c1.602,0.212 4.3,3.853 -1.424,5.925c-5.151,1.864 -14.676,5.781 -14.676,5.781l-4.299,7.446l22.394,-9.583c0,0 9.69,-12.532 8.895,-12.642Z"/>
+          <path d="M106.757,157.664l-9.086,3.959l4.914,2.837l4.172,-6.796Z"/>
+          <path d="M100.548,168.419l-5.065,-3.007l1.794,8.673l3.271,-5.666Z"/>
+          <path d="M65.79,208.778l6.872,0.485l-7.15,3.335l0.278,-3.82Z"/>
+          <path d="M87.466,164.602l1.973,24.675c0,0 -6.054,15.428 -6.301,15.105c-5.009,-6.536 -10.789,-12.391 -6.789,-20.524c0.408,-0.83 3.859,9.112 5.302,9.714c1.444,0.601 4.927,-0.059 3.359,-6.106c-1.568,-6.047 -1.954,-15.227 -1.954,-15.227l4.41,-7.637"/>
+          <path d="M71.155,199.519l3.841,5.701l-6.574,-1.001l2.733,-4.7Z"/>
+        </g>
+        <g>
+          <path d="M80.331,213.616c-12.146,4.942 -15.031,3.883 -15.845,13.388c-0.14,1.639 6.266,-4.585 7.951,-5.282c1.493,-0.617 5.65,1.187 1.729,5.843c-3.529,4.191 -9.82,12.345 -9.82,12.345l0,8.599l14.603,-19.497c0,0 2.125,-15.698 1.382,-15.396Z"/>
+          <path d="M77.584,245.459l-5.89,7.973l5.674,0l0.216,-7.973Z"/>
+          <path d="M77.584,257.878l-5.89,-0.072l5.89,6.615l0,-6.543Z"/>
+          <path d="M67.662,310.21l6.194,-3.017l-4.525,6.464l-1.669,-3.447Z"/>
+          <path d="M64.346,261.114l14.046,20.383c0,0 2.472,16.387 2.097,16.232c-7.607,-3.157 -15.54,-5.337 -16.143,-14.38c-0.061,-0.923 7.898,5.962 9.449,5.761c1.551,-0.201 4.238,-2.514 -0.143,-6.967c-4.382,-4.453 -9.306,-12.21 -9.306,-12.21l0,-8.819"/>
+          <path d="M67.679,299.508l6.177,3.017l-6.194,2.421l0.017,-5.438Z"/>
+        </g>
+        <g>
+          <path d="M82.674,307.129c-8.047,10.353 -11.075,10.878 -7.028,19.517c0.698,1.489 3.133,-7.104 4.244,-8.55c0.985,-1.281 5.487,-1.797 4.42,4.196c-0.961,5.393 -2.332,15.601 -2.332,15.601l4.299,7.446l2.898,-24.186c0,0 -6.009,-14.657 -6.501,-14.024Z"/>
+          <path d="M96.217,336.08l-1.114,9.849l4.913,-2.837l-3.799,-7.012Z"/>
+          <path d="M102.426,346.835l-5.136,2.882l8.407,2.784l-3.271,-5.666Z"/>
+          <path d="M120,397.116l3.855,-5.709l-0.686,7.86l-3.169,-2.151Z"/>
+          <path d="M92.58,356.255l22.355,10.63c0,0 10.335,12.956 9.932,13.009c-8.166,1.07 -16.126,3.148 -21.17,-4.382c-0.514,-0.769 9.821,1.214 11.064,0.264c1.243,-0.949 2.413,-4.295 -3.608,-5.961c-6.021,-1.666 -14.164,-5.922 -14.164,-5.922l-4.409,-7.638"/>
+          <path d="M114.664,387.84l6.857,-0.476l-4.153,5.193l-2.704,-4.717Z"/>
+        </g>
+        <g>
+          <path d="M131.46,386.942c-1.793,12.99 -4.153,14.958 3.672,20.416c1.349,0.941 -0.839,-7.719 -0.599,-9.526c0.212,-1.602 3.853,-4.3 5.925,1.424c1.864,5.151 5.781,14.676 5.781,14.676l7.446,4.299l-9.583,-22.394c0,0 -12.532,-9.69 -12.642,-8.895Z"/>
+          <path d="M157.664,405.243l3.959,9.086l2.837,-4.914l-6.796,-4.172Z"/>
+          <path d="M168.419,411.452l-3.007,5.065l8.673,-1.794l-5.666,-3.271Z"/>
+          <path d="M208.778,446.21l0.485,-6.872l3.335,7.15l-3.82,-0.278Z"/>
+          <path d="M164.602,424.534l24.675,-1.973c0,0 15.428,6.054 15.105,6.301c-6.536,5.009 -12.391,10.789 -20.524,6.789c-0.83,-0.408 9.112,-3.859 9.714,-5.302c0.601,-1.444 -0.059,-4.927 -6.106,-3.359c-6.047,1.568 -15.227,1.954 -15.227,1.954l-7.637,-4.41"/>
+          <path d="M199.519,440.845l5.701,-3.841l-1.001,6.574l-4.7,-2.733Z"/>
+        </g>
+      </g>
+    </svg>
+
+    <div id="innerGears">
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-15.5, 256, 256)">	
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <defs>
+          <radialGradient id="radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(256,0,0,256,256,256)">
+            <stop offset="0" style="stop-color:#007e7e;stop-opacity:1"/>
+            <stop offset="0.36" style="stop-color:#027d7d;stop-opacity:1"/>
+            <stop offset="0.46" style="stop-color:#067979;stop-opacity:1"/>
+            <stop offset="0.55" style="stop-color:#0c7575;stop-opacity:1"/>
+            <stop offset="0.77" style="stop-color:#001717;stop-opacity:1"/>
+            <stop offset="0.81" style="stop-color:#000c0c;stop-opacity:1"/>
+            <stop offset="0.85" style="stop-color:#000303;stop-opacity:1"/>
+            <stop offset="1" style="stop-color:#000;stop-opacity:1"/>
+          </radialGradient>
+          <filter id="shaddow" x="0" y="0" width="200%" height="200%">
+            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
+            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"/>
+            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
+          </filter>
+        </defs>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-19, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(5, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+
+
+
+
+
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.1"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-3, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+
+
+
+
+
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-5, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(18, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-15, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+
+
+
+
+
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(13, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(10, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(2, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(0, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-9, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-9, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(5.8, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(3, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/gate-of-time-svg-css/dist/style.css b/gate-of-time-svg-css/dist/style.css
new file mode 100644
index 0000000..4a52e75
--- /dev/null
+++ b/gate-of-time-svg-css/dist/style.css
@@ -0,0 +1,247 @@
+body{
+	background-color: #151515;
+	width: 100%;
+	height: 100%;
+	margin: 0px;
+	overflow: hidden;
+
+	--blue: #3aa8c3;
+	--lightBlue: #0ff;
+	--spinAnimation: spin 23s cubic-bezier(.39,-0.52,.53,.98) 0s infinite;
+}
+
+#container{
+	width: 90vw;
+	height: 90vw;
+	max-width: 90vh;
+	max-height: 90vh;
+  	margin: auto;
+  	position: absolute;
+	top: 0; right: 0; bottom: 0; left: 0;
+}
+
+#portal{
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+#portal > #mainGear{
+	position: absolute;
+	top:0px;
+	left:0px;
+	right: 0px;
+	bottom: 0px;
+	z-index: 1;
+	animation: var(--spinAnimation);
+	will-change: transform;
+	z-index: 100;
+}
+
+#mainGear > path{
+	fill:#735290;
+}
+
+
+#mainGear .decoration{
+	fill: var(--blue);
+	stroke: var(--blue);
+	stroke-width:1px;
+}
+
+#mainGear .runes path, #mainGear .runes circle{
+	fill: none;
+	stroke: var(--blue);
+	stroke-width: 2px;
+}
+
+#mainGear .runes path.filled, #mainGear .runes circle{
+	fill:var(--blue);
+}
+
+#portal > #innerGears{
+	position: absolute;
+	top:14.5%;
+	left:14.5%;
+	right: 14.5%;
+	bottom: 14.5%;
+	border-radius: 50%;
+	-webkit-clip-path: circle(50%);
+	overflow: hidden;
+}
+
+#portal > #innerGears > .innerGear{
+	position: absolute;
+	transform-origin: center;
+	animation: var(--spinAnimation);
+	will-change: transform;
+}
+
+.innerGear:nth-child(1){
+	width: 190%;
+	height: 190%;
+	bottom: -22%;
+	left: -45%;
+	z-index: 99;
+}
+.innerGear:nth-child(2){
+	width: 150%;
+	height: 150%;
+	bottom: -8%;
+	left: -16%;
+	z-index: 98;
+}
+
+.innerGear:nth-child(3){
+	width: 117%;
+	height: 117%;
+	top: -17%;
+	left: 3%;
+	z-index: 97;
+}
+
+.innerGear:nth-child(4){
+	width: 100%;
+	height: 100%;
+	top: -2%;
+	left: 12%;
+	z-index: 96;
+}
+
+.innerGear:nth-child(5){
+	width: 92%;
+	height: 92%;
+	top: 9.5%;
+	left: 15.5%;
+	z-index: 95;
+}
+
+.innerGear:nth-child(6){
+	width: 79.5%;
+	height: 79.5%;
+	top: 19.5%;
+	left: 17%;
+	z-index: 94;
+}
+
+.innerGear:nth-child(7){
+	width: 70%;
+	height: 70%;
+	top: 23.3%;
+	left: 17%;
+	z-index: 93;
+}
+
+.innerGear:nth-child(8){
+	width: 63%;
+	height: 63%;
+	top: 25%;
+	left: 15%;
+	z-index: 92;
+}
+
+.innerGear:nth-child(9){
+	width: 55%;
+	height: 55%;
+	top: 26%;
+	left: 18%;
+	z-index: 91;
+}
+
+.innerGear:nth-child(10){
+	width: 51%;
+	height: 51%;
+	top: 25%;
+	left: 18.5%;
+	z-index: 90;
+}
+
+.innerGear:nth-child(11){
+	width: 48%;
+	height: 48%;
+	top: 23.5%;
+	left: 21%;
+	z-index: 89;
+}
+
+.innerGear:nth-child(12){
+	width: 45%;
+	height: 45%;
+	top: 23%;
+	left: 24%;
+	z-index: 88;
+}
+
+.innerGear:nth-child(13){
+	width: 40%;
+	height: 40%;
+	top: 25.5%;
+	left: 29.2%;
+	z-index: 87;
+}
+
+.innerGear:nth-child(14){
+	width: 35%;
+	height: 35%;
+	top: 32%;
+	left: 34%;
+	z-index: 86;
+}
+
+.innerGear:nth-child(15){
+	width: 32%;
+	height: 32%;
+	top: 31%;
+	left: 35%;
+	z-index: 85;
+}
+
+.innerGear .teeth{
+	fill: url(#radial);
+	stroke-width: 5px;
+	stroke: var(--lightBlue);
+}
+
+.innerGear .runes path{
+	fill: var(--lightBlue);
+}
+
+@keyframes spin{
+	0%{transform: rotate(0deg);}
+
+	8%{transform: rotate(30deg);}
+	9%{transform: rotate(30deg);}
+
+	17%{transform: rotate(60deg);}
+	18%{transform: rotate(60deg);}
+
+	25%{transform: rotate(90deg);}
+	26%{transform: rotate(90deg);}
+
+	33%{transform: rotate(120deg);}
+	34%{transform: rotate(120deg);}
+
+	42%{transform: rotate(150deg);}
+	43%{transform: rotate(150deg);}
+
+	50%{transform: rotate(180deg);}
+	51%{transform: rotate(180deg);}
+
+	58%{transform: rotate(210deg);}
+	59%{transform: rotate(210deg);}
+
+	67%{transform: rotate(240deg);}
+	68%{transform: rotate(240deg);}
+
+	75%{transform: rotate(270deg);}
+	76%{transform: rotate(270deg);}
+
+	83%{transform: rotate(300deg);}
+	84%{transform: rotate(300deg);}
+
+	92%{transform: rotate(330deg);}
+	93%{transform: rotate(330deg);}
+
+	99%{transform: rotate(360deg);}
+	100%{transform: rotate(360deg);}
+}
\ No newline at end of file
diff --git a/gate-of-time-svg-css/license.txt b/gate-of-time-svg-css/license.txt
new file mode 100644
index 0000000..e21adb6
--- /dev/null
+++ b/gate-of-time-svg-css/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2019 by Yannick Brandt (https://codepen.io/Coderesting/pen/yLyaJMz)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/gate-of-time-svg-css/src/index.html b/gate-of-time-svg-css/src/index.html
new file mode 100644
index 0000000..f5a4803
--- /dev/null
+++ b/gate-of-time-svg-css/src/index.html
@@ -0,0 +1,1064 @@
+<div id="container">
+  <div id="portal">
+    <svg id="mainGear" viewBox="-10 -10 532 532" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+      <filter id="shaddowMain" x="-20%" y="-20%" width="200%" height="200%">
+        <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
+        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"/>
+        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
+      </filter>
+
+      <path filter="url(#shaddowMain)" d="M281.426,1.266c-16.909,-1.688 -33.943,-1.688 -50.852,0l-5.24,47.066c-15.965,2.358 -31.605,6.548 -46.611,12.489l-28.071,-38.14c-15.487,6.992 -30.239,15.51 -44.039,25.426l18.996,43.38c-12.648,10.024 -24.098,21.474 -34.122,34.122l-43.38,-18.996c-9.916,13.8 -18.434,28.552 -25.426,44.039l38.14,28.071c-5.941,15.006 -10.131,30.646 -12.489,46.611l-47.066,5.24c-1.688,16.909 -1.688,33.943 0,50.852l47.066,5.24c2.358,15.965 6.548,31.605 12.489,46.611l-38.14,28.071c6.992,15.487 15.51,30.239 25.426,44.039l43.38,-18.996c10.024,12.648 21.474,24.098 34.122,34.122l-18.996,43.38c13.8,9.916 28.552,18.434 44.039,25.426l28.071,-38.14c15.006,5.941 30.646,10.131 46.611,12.489l5.24,47.066c16.909,1.688 33.943,1.688 50.852,0l5.24,-47.066c15.965,-2.358 31.605,-6.548 46.611,-12.489l28.071,38.14c15.487,-6.992 30.239,-15.51 44.039,-25.426l-18.996,-43.38c12.648,-10.024 24.098,-21.474 34.122,-34.122l43.38,18.996c9.916,-13.8 18.434,-28.552 25.426,-44.039l-38.14,-28.071c5.941,-15.006 10.131,-30.646 12.489,-46.611l47.066,-5.24c1.688,-16.909 1.688,-33.943 0,-50.852l-47.066,-5.24c-2.358,-15.965 -6.548,-31.605 -12.489,-46.611l38.14,-28.071c-6.992,-15.487 -15.51,-30.239 -25.426,-44.039l-43.38,18.996c-10.024,-12.648 -21.474,-24.098 -34.122,-34.122l18.996,-43.38c-13.8,-9.916 -28.552,-18.434 -44.039,-25.426l-28.071,38.14c-15.006,-5.941 -30.646,-10.131 -46.611,-12.489l-5.24,-47.066Zm-25.426,78.094c97.49,0 176.64,79.15 176.64,176.64c0,97.49 -79.15,176.64 -176.64,176.64c-97.49,0 -176.64,-79.15 -176.64,-176.64c0,-97.49 79.15,-176.64 176.64,-176.64Z"/>
+
+      <g class="runes">
+        <g id="_11">
+          <path d="M137.832,47.21c4.022,-2.236 8.751,-1.415 10.556,1.832c1.804,3.246 0.005,7.697 -4.016,9.932c-4.021,2.235 -8.751,1.414 -10.556,-1.832c-1.804,-3.247 -0.005,-7.697 4.016,-9.932Z"/>
+          <path d="M134.525,41.66c8.038,-4.832 17.768,-3.422 21.715,3.145c3.948,6.568 0.626,15.822 -7.412,20.653c-8.039,4.831 -17.769,3.421 -21.716,-3.146c-3.947,-6.567 -0.626,-15.821 7.413,-20.652Z" />
+          <path class="filled" d="M126.278,60.627l-5.502,4.854l7.898,-1.128l-2.396,-3.726Z"/>
+          <path class="filled" d="M154.545,42.628l6.524,-2.141l-4.225,5.464l-2.299,-3.323"/>
+        </g>
+        <g id="_10">
+          <path d="M75.725,131.854l-5.027,15.873l-14.868,-11.133l14.868,11.133l-11.205,12.353" />
+          <path class="filled" d="M78.688,124.503c1.635,0.716 2.306,2.797 1.497,4.644c-0.808,1.847 -2.793,2.765 -4.428,2.049c-1.635,-0.716 -2.306,-2.797 -1.497,-4.644c0.809,-1.847 2.793,-2.765 4.428,-2.049Z"/>
+          <path class="filled" d="M59.452,160.086c1.274,1.386 0.98,3.733 -0.657,5.237c-1.636,1.504 -3.999,1.599 -5.273,0.212c-1.275,-1.386 -0.98,-3.733 0.656,-5.237c1.637,-1.504 4,-1.599 5.274,-0.212Z"/>
+          <path d="M53.279,125.007c3.844,2.696 4.315,8.663 1.051,13.319c-3.264,4.655 -9.035,6.247 -12.879,3.552c-3.844,-2.696 -4.315,-8.663 -1.051,-13.319c3.265,-4.655 9.035,-6.247 12.879,-3.552Z" />
+          <circle cx="46.869" cy="132.749" r="1.309"/>
+        </g>
+        <g id="_9">
+          <path d="M38.054,234.74l0.287,40.868l-27.005,-21.188c0,0 26.646,-19.464 26.718,-19.68" />
+          <path class="filled" d="M31.59,246.088l-9.265,7.757l9.265,8.332l0,-16.089Z"/>
+        </g>
+        <g id="_8">
+          <path d="M54.417,358.926l8.834,4.453l-0.79,9.553c0,0 13.718,7.397 7.901,-1.581" />
+          <path d="M46.445,356.987l7.972,1.939c0,0 0,-15.729 5.674,-5.674" />
+          <path d="M62.461,372.932l-1.867,7.685l-9.265,-3.376c0,0 0.646,14.867 -4.669,6.536" />
+          <path d="M51.329,377.241l-7.364,-2.725l0.828,-8.479c0,0 -11.42,-6.608 -7.47,1.939" />
+          <path d="M54.417,358.926l-7.757,-2.155l-1.867,9.266" />
+          <path class="filled" d="M48.468,361.404l-1.005,10.392l9.983,3.663l1.509,-9.983l-10.487,-4.072Z"/>
+        </g>
+        <g id="_7">
+          <path d="M148.114,441.25l12.625,20.867l-18.5,13.863l-20.254,-11.348l1.221,-23.343l24.908,-0.039Z" />
+          <path d="M144.465,446.388l7.326,12.498l-10.845,9.121l-13.503,-7.254l0.575,-14.293l16.447,-0.072Z" />
+        </g>
+        <path id="_6" d="M242.809,487.823l3.232,1.885l5.836,-6.015l-9.786,-6.913l-8.619,8.619l14.724,11.851l5.925,-6.375l7.991,5.656l14.903,-11.94l-9.786,-8.08l-9.696,7.631l5.566,5.925l3.771,-3.322" />
+        <path id="_5" class="filled" d="M373.909,436.559l-1.706,38.605l15.891,-10.594l-33.129,-18.135l18.944,-9.876Z"/>
+        <g id="_4">
+          <path d="M463.782,359.991l2.411,16.878l-18.411,6.794l-3.069,-18.63l19.069,-5.042Z" />
+          <path class="filled" d="M458.974,364.669c0.269,-0.18 -8.888,3.501 -8.888,3.501l1.257,10.684l10.055,-4.489c0,0 -2.693,-9.517 -2.424,-9.696Z"/>
+          <path class="filled" d="M454.844,362.155l-0.449,-7.631c0,0 -3.681,-7.272 -0.359,-6.913c3.322,0.359 0.359,6.913 0.359,6.913"/>
+          <path class="filled" d="M445.597,374.993l-4.938,2.963c0,0 -6.015,-0.808 -5.387,1.975c0.629,2.783 5.387,-1.975 5.387,-1.975"/>
+        </g>
+        <path id="_3" d="M471.399,247.987l0.877,-13.151l32.001,3.068l-1.096,34.194l-22.138,1.534l0,-22.357l8.987,0" style="stroke-width:4px;"/>
+        <g id="_2">
+          <path d="M436.932,129.458l19.121,32.89l10.343,-7.571l-18.061,-33.146l12.293,-7.471" style="stroke-width:4px;"/>
+          <path d="M466.766,125.315l11.833,21.526" style="stroke-width:4px"/>
+        </g>
+        <path id="_1" d="M362.988,44.27l-4.83,-8.012l8.634,-2.322l7.155,4.499l-1.114,17.195l0.876,9.037l-8.369,-0.319l-1.852,-6.66l9.345,-2.058l11.405,-11.706l7.662,3.433l1.488,9.561l-7.117,0.337" style="stroke-width:3.34px;"/>
+        <g id="_12">
+          <path d="M258.47,33.811l16.609,-15.352l-17.776,-13.916l-16.699,14.904l21.817,18.404l12.569,-10.324" style="stroke-width:2.98px;"/>
+          <path class="filled" d="M257.393,9.885l-10.055,9.158l10.594,9.516l10.773,-9.875l-11.312,-8.799Z" style="stroke-width:1.55px;"/>
+        </g>
+      </g>
+      <g class="decoration">
+        <g>
+          <path d="M213.616,431.669c4.942,12.146 3.883,15.031 13.388,15.845c1.639,0.14 -4.585,-6.266 -5.282,-7.951c-0.617,-1.493 1.187,-5.65 5.843,-1.729c4.191,3.529 12.345,9.82 12.345,9.82l8.599,0l-19.497,-14.603c0,0 -15.698,-2.125 -15.396,-1.382Z"/>
+          <path d="M245.459,434.416l7.973,5.89l0,-5.674l-7.973,-0.216Z"/>
+          <path d="M257.878,434.416l-0.072,5.89l6.615,-5.89l-6.543,0Z"/>
+          <path d="M310.21,444.338l-3.017,-6.194l6.464,4.525l-3.447,1.669Z"/>
+          <path d="M261.114,447.654l20.383,-14.046c0,0 16.387,-2.472 16.232,-2.097c-3.157,7.607 -5.337,15.54 -14.38,16.143c-0.923,0.061 5.962,-7.898 5.761,-9.449c-0.201,-1.551 -2.514,-4.238 -6.967,0.143c-4.453,4.382 -12.21,9.306 -12.21,9.306l-8.819,0"/>
+          <path d="M299.508,444.321l3.017,-6.177l2.421,6.194l-5.438,-0.017Z"/>
+        </g>
+        <g>
+          <path d="M307.129,429.326c10.353,8.047 10.878,11.075 19.517,7.028c1.489,-0.698 -7.104,-3.133 -8.55,-4.244c-1.281,-0.985 -1.797,-5.487 4.196,-4.42c5.393,0.961 15.601,2.332 15.601,2.332l7.446,-4.299l-24.186,-2.898c0,0 -14.657,6.009 -14.024,6.501Z"/>
+          <path d="M336.08,415.783l9.849,1.114l-2.837,-4.913l-7.012,3.799Z"/>
+          <path d="M346.835,409.574l2.882,5.136l2.784,-8.407l-5.666,3.271Z"/>
+          <path d="M397.116,392l-5.709,-3.855l7.86,0.686l-2.151,3.169Z"/>
+          <path d="M356.255,419.42l10.63,-22.355c0,0 12.956,-10.335 13.009,-9.932c1.07,8.166 3.148,16.126 -4.382,21.17c-0.769,0.514 1.214,-9.821 0.264,-11.064c-0.949,-1.243 -4.295,-2.413 -5.961,3.608c-1.666,6.021 -5.922,14.164 -5.922,14.164l-7.638,4.409"/>
+          <path d="M387.84,397.336l-0.476,-6.857l5.193,4.153l-4.717,2.704Z"/>
+        </g>
+        <g>
+          <path d="M386.942,380.54c12.99,1.793 14.958,4.153 20.416,-3.672c0.941,-1.349 -7.719,0.839 -9.526,0.599c-1.602,-0.212 -4.3,-3.853 1.424,-5.925c5.151,-1.864 14.676,-5.781 14.676,-5.781l4.299,-7.446l-22.394,9.583c0,0 -9.69,12.532 -8.895,12.642Z"/>
+          <path d="M405.243,354.336l9.086,-3.959l-4.914,-2.837l-4.172,6.796Z"/>
+          <path d="M411.452,343.581l5.065,3.007l-1.794,-8.673l-3.271,5.666Z"/>
+          <path d="M446.21,303.222l-6.872,-0.485l7.15,-3.335l-0.278,3.82Z"/>
+          <path d="M424.534,347.398l-1.973,-24.675c0,0 6.054,-15.428 6.301,-15.105c5.009,6.536 10.789,12.391 6.789,20.524c-0.408,0.83 -3.859,-9.112 -5.302,-9.714c-1.444,-0.601 -4.927,0.059 -3.359,6.106c1.568,6.047 1.954,15.227 1.954,15.227l-4.41,7.637"/>
+          <path d="M440.845,312.481l-3.841,-5.701l6.574,1.001l-2.733,4.7Z"/>
+        </g>
+        <g>
+          <path d="M431.669,298.384c12.146,-4.942 15.031,-3.883 15.845,-13.388c0.14,-1.639 -6.266,4.585 -7.951,5.282c-1.493,0.617 -5.65,-1.187 -1.729,-5.843c3.529,-4.191 9.82,-12.345 9.82,-12.345l0,-8.599l-14.603,19.497c0,0 -2.125,15.698 -1.382,15.396Z"/>
+          <path d="M434.416,266.541l5.89,-7.973l-5.674,0l-0.216,7.973Z"/>
+          <path d="M434.416,254.122l5.89,0.072l-5.89,-6.615l0,6.543Z"/>
+          <path d="M444.338,201.79l-6.194,3.017l4.525,-6.464l1.669,3.447Z"/>
+          <path d="M447.654,250.886l-14.046,-20.383c0,0 -2.472,-16.387 -2.097,-16.232c7.607,3.157 15.54,5.337 16.143,14.38c0.061,0.923 -7.898,-5.962 -9.449,-5.761c-1.551,0.201 -4.238,2.514 0.143,6.967c4.382,4.453 9.306,12.21 9.306,12.21l0,8.819"/>
+          <path d="M444.321,212.492l-6.177,-3.017l6.194,-2.421l-0.017,5.438Z"/>
+        </g>
+        <g>
+          <path d="M429.326,204.871c8.047,-10.353 11.075,-10.878 7.028,-19.517c-0.698,-1.489 -3.133,7.104 -4.244,8.55c-0.985,1.281 -5.487,1.797 -4.42,-4.196c0.961,-5.393 2.332,-15.601 2.332,-15.601l-4.299,-7.446l-2.898,24.186c0,0 6.009,14.657 6.501,14.024Z"/>
+          <path d="M415.783,175.92l1.114,-9.849l-4.913,2.837l3.799,7.012Z"/>
+          <path d="M409.574,165.165l5.136,-2.882l-8.407,-2.784l3.271,5.666Z"/>
+          <path d="M392,114.884l-3.855,5.709l0.686,-7.86l3.169,2.151Z"/>
+          <path d="M419.42,155.745l-22.355,-10.63c0,0 -10.335,-12.956 -9.932,-13.009c8.166,-1.07 16.126,-3.148 21.17,4.382c0.514,0.769 -9.821,-1.214 -11.064,-0.264c-1.243,0.949 -2.413,4.295 3.608,5.961c6.021,1.666 14.164,5.922 14.164,5.922l4.409,7.638"/>
+          <path d="M397.336,124.16l-6.857,0.476l4.153,-5.193l2.704,4.717Z"/>
+        </g>
+        <g>
+          <path d="M380.54,125.058c1.793,-12.99 4.153,-14.958 -3.672,-20.416c-1.349,-0.941 0.839,7.719 0.599,9.526c-0.212,1.602 -3.853,4.3 -5.925,-1.424c-1.864,-5.151 -5.781,-14.676 -5.781,-14.676l-7.446,-4.299l9.583,22.394c0,0 12.532,9.69 12.642,8.895Z"/>
+          <path d="M354.336,106.757l-3.959,-9.086l-2.837,4.914l6.796,4.172Z"/>
+          <path d="M343.581,100.548l3.007,-5.065l-8.673,1.794l5.666,3.271Z"/>
+          <path d="M303.222,65.79l-0.485,6.872l-3.335,-7.15l3.82,0.278Z"/>
+          <path d="M347.398,87.466l-24.675,1.973c0,0 -15.428,-6.054 -15.105,-6.301c6.536,-5.009 12.391,-10.789 20.524,-6.789c0.83,0.408 -9.112,3.859 -9.714,5.302c-0.601,1.444 0.059,4.927 6.106,3.359c6.047,-1.568 15.227,-1.954 15.227,-1.954l7.637,4.41"/>
+          <path d="M312.481,71.155l-5.701,3.841l1.001,-6.574l4.7,2.733Z"/>
+        </g>
+        <g>
+          <path d="M298.384,80.331c-4.942,-12.146 -3.883,-15.031 -13.388,-15.845c-1.639,-0.14 4.585,6.266 5.282,7.951c0.617,1.493 -1.187,5.65 -5.843,1.729c-4.191,-3.529 -12.345,-9.82 -12.345,-9.82l-8.599,0l19.497,14.603c0,0 15.698,2.125 15.396,1.382Z"/>
+          <path d="M266.541,77.584l-7.973,-5.89l0,5.674l7.973,0.216Z"/>
+          <path d="M254.122,77.584l0.072,-5.89l-6.615,5.89l6.543,0Z"/>
+          <path d="M201.79,67.662l3.017,6.194l-6.464,-4.525l3.447,-1.669Z"/>
+          <path d="M250.886,64.346l-20.383,14.046c0,0 -16.387,2.472 -16.232,2.097c3.157,-7.607 5.337,-15.54 14.38,-16.143c0.923,-0.061 -5.962,7.898 -5.761,9.449c0.201,1.551 2.514,4.238 6.967,-0.143c4.453,-4.382 12.21,-9.306 12.21,-9.306l8.819,0"/>
+          <path d="M212.492,67.679l-3.017,6.177l-2.421,-6.194l5.438,0.017Z"/>
+        </g>
+        <g>
+          <path d="M204.871,82.674c-10.353,-8.047 -10.878,-11.075 -19.517,-7.028c-1.489,0.698 7.104,3.133 8.55,4.244c1.281,0.985 1.797,5.487 -4.196,4.42c-5.393,-0.961 -15.601,-2.332 -15.601,-2.332l-7.446,4.299l24.186,2.898c0,0 14.657,-6.009 14.024,-6.501Z"/>
+          <path d="M175.92,96.217l-9.849,-1.114l2.837,4.913l7.012,-3.799Z"/>
+          <path d="M165.165,102.426l-2.882,-5.136l-2.784,8.407l5.666,-3.271Z"/>
+          <path d="M114.884,120l5.709,3.855l-7.86,-0.686l2.151,-3.169Z"/>
+          <path d="M155.745,92.58l-10.63,22.355c0,0 -12.956,10.335 -13.009,9.932c-1.07,-8.166 -3.148,-16.126 4.382,-21.17c0.769,-0.514 -1.214,9.821 -0.264,11.064c0.949,1.243 4.295,2.413 5.961,-3.608c1.666,-6.021 5.922,-14.164 5.922,-14.164l7.638,-4.409"/>
+          <path d="M124.16,114.664l0.476,6.857l-5.193,-4.153l4.717,-2.704Z"/>
+        </g>
+        <g>
+          <path d="M125.058,131.46c-12.99,-1.793 -14.958,-4.153 -20.416,3.672c-0.941,1.349 7.719,-0.839 9.526,-0.599c1.602,0.212 4.3,3.853 -1.424,5.925c-5.151,1.864 -14.676,5.781 -14.676,5.781l-4.299,7.446l22.394,-9.583c0,0 9.69,-12.532 8.895,-12.642Z"/>
+          <path d="M106.757,157.664l-9.086,3.959l4.914,2.837l4.172,-6.796Z"/>
+          <path d="M100.548,168.419l-5.065,-3.007l1.794,8.673l3.271,-5.666Z"/>
+          <path d="M65.79,208.778l6.872,0.485l-7.15,3.335l0.278,-3.82Z"/>
+          <path d="M87.466,164.602l1.973,24.675c0,0 -6.054,15.428 -6.301,15.105c-5.009,-6.536 -10.789,-12.391 -6.789,-20.524c0.408,-0.83 3.859,9.112 5.302,9.714c1.444,0.601 4.927,-0.059 3.359,-6.106c-1.568,-6.047 -1.954,-15.227 -1.954,-15.227l4.41,-7.637"/>
+          <path d="M71.155,199.519l3.841,5.701l-6.574,-1.001l2.733,-4.7Z"/>
+        </g>
+        <g>
+          <path d="M80.331,213.616c-12.146,4.942 -15.031,3.883 -15.845,13.388c-0.14,1.639 6.266,-4.585 7.951,-5.282c1.493,-0.617 5.65,1.187 1.729,5.843c-3.529,4.191 -9.82,12.345 -9.82,12.345l0,8.599l14.603,-19.497c0,0 2.125,-15.698 1.382,-15.396Z"/>
+          <path d="M77.584,245.459l-5.89,7.973l5.674,0l0.216,-7.973Z"/>
+          <path d="M77.584,257.878l-5.89,-0.072l5.89,6.615l0,-6.543Z"/>
+          <path d="M67.662,310.21l6.194,-3.017l-4.525,6.464l-1.669,-3.447Z"/>
+          <path d="M64.346,261.114l14.046,20.383c0,0 2.472,16.387 2.097,16.232c-7.607,-3.157 -15.54,-5.337 -16.143,-14.38c-0.061,-0.923 7.898,5.962 9.449,5.761c1.551,-0.201 4.238,-2.514 -0.143,-6.967c-4.382,-4.453 -9.306,-12.21 -9.306,-12.21l0,-8.819"/>
+          <path d="M67.679,299.508l6.177,3.017l-6.194,2.421l0.017,-5.438Z"/>
+        </g>
+        <g>
+          <path d="M82.674,307.129c-8.047,10.353 -11.075,10.878 -7.028,19.517c0.698,1.489 3.133,-7.104 4.244,-8.55c0.985,-1.281 5.487,-1.797 4.42,4.196c-0.961,5.393 -2.332,15.601 -2.332,15.601l4.299,7.446l2.898,-24.186c0,0 -6.009,-14.657 -6.501,-14.024Z"/>
+          <path d="M96.217,336.08l-1.114,9.849l4.913,-2.837l-3.799,-7.012Z"/>
+          <path d="M102.426,346.835l-5.136,2.882l8.407,2.784l-3.271,-5.666Z"/>
+          <path d="M120,397.116l3.855,-5.709l-0.686,7.86l-3.169,-2.151Z"/>
+          <path d="M92.58,356.255l22.355,10.63c0,0 10.335,12.956 9.932,13.009c-8.166,1.07 -16.126,3.148 -21.17,-4.382c-0.514,-0.769 9.821,1.214 11.064,0.264c1.243,-0.949 2.413,-4.295 -3.608,-5.961c-6.021,-1.666 -14.164,-5.922 -14.164,-5.922l-4.409,-7.638"/>
+          <path d="M114.664,387.84l6.857,-0.476l-4.153,5.193l-2.704,-4.717Z"/>
+        </g>
+        <g>
+          <path d="M131.46,386.942c-1.793,12.99 -4.153,14.958 3.672,20.416c1.349,0.941 -0.839,-7.719 -0.599,-9.526c0.212,-1.602 3.853,-4.3 5.925,1.424c1.864,5.151 5.781,14.676 5.781,14.676l7.446,4.299l-9.583,-22.394c0,0 -12.532,-9.69 -12.642,-8.895Z"/>
+          <path d="M157.664,405.243l3.959,9.086l2.837,-4.914l-6.796,-4.172Z"/>
+          <path d="M168.419,411.452l-3.007,5.065l8.673,-1.794l-5.666,-3.271Z"/>
+          <path d="M208.778,446.21l0.485,-6.872l3.335,7.15l-3.82,-0.278Z"/>
+          <path d="M164.602,424.534l24.675,-1.973c0,0 15.428,6.054 15.105,6.301c-6.536,5.009 -12.391,10.789 -20.524,6.789c-0.83,-0.408 9.112,-3.859 9.714,-5.302c0.601,-1.444 -0.059,-4.927 -6.106,-3.359c-6.047,1.568 -15.227,1.954 -15.227,1.954l-7.637,-4.41"/>
+          <path d="M199.519,440.845l5.701,-3.841l-1.001,6.574l-4.7,-2.733Z"/>
+        </g>
+      </g>
+    </svg>
+
+    <div id="innerGears">
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-15.5, 256, 256)">	
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <defs>
+          <radialGradient id="radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(256,0,0,256,256,256)">
+            <stop offset="0" style="stop-color:#007e7e;stop-opacity:1"/>
+            <stop offset="0.36" style="stop-color:#027d7d;stop-opacity:1"/>
+            <stop offset="0.46" style="stop-color:#067979;stop-opacity:1"/>
+            <stop offset="0.55" style="stop-color:#0c7575;stop-opacity:1"/>
+            <stop offset="0.77" style="stop-color:#001717;stop-opacity:1"/>
+            <stop offset="0.81" style="stop-color:#000c0c;stop-opacity:1"/>
+            <stop offset="0.85" style="stop-color:#000303;stop-opacity:1"/>
+            <stop offset="1" style="stop-color:#000;stop-opacity:1"/>
+          </radialGradient>
+          <filter id="shaddow" x="0" y="0" width="200%" height="200%">
+            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
+            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"/>
+            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
+          </filter>
+        </defs>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-19, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(5, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+
+
+
+
+
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.1"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-3, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+
+
+
+
+
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-5, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(18, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-15, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+
+
+
+
+
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(13, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(10, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(2, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(0, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-9, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(-9, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(5.8, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+
+      <svg class="innerGear" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+        <g transform="rotate(3, 256, 256)">
+          <path filter="url(#shaddow)" class="teeth" d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm55.61,108.518l-30.248,-8.082l-10.597,27.163l-29.711,0.021l-10.635,-27.148l-30.237,8.124l4.405,28.823l-25.72,14.874l-22.785,-18.194l-22.123,22.155l18.225,22.759l-14.837,25.74l-28.829,-4.363l-8.082,30.248l27.163,10.597l0.021,29.711l-27.148,10.635l8.124,30.237l28.823,-4.405l14.874,25.72l-18.194,22.785l22.155,22.123l22.759,-18.225l25.74,14.837l-4.363,28.829l30.248,8.082l10.597,-27.163l29.711,-0.021l10.635,27.148l30.237,-8.124l-4.405,-28.823l25.72,-14.874l22.785,18.194l22.123,-22.155l-18.225,-22.759l14.837,-25.74l28.829,4.363l8.082,-30.248l-27.163,-10.597l-0.021,-29.711l27.148,-10.635l-8.124,-30.237l-28.823,4.405l-14.874,-25.72l18.194,-22.785l-22.155,-22.123l-22.759,18.225l-25.74,-14.837l4.363,-28.829Z"/>
+
+          <g class="runes">
+            <g>
+              <path d="M277.245,418.863l-18.385,0.103l0.325,28.397l-23.612,0.011l0.106,-35.821l7.4,0.022l-0.084,28.396l8.705,-0.004l-0.325,-28.36l25.829,-0.144l0.041,7.4Z"/>
+              <path d="M276.652,447.374l-21.211,-0.009l0.003,-7.4l13.808,0.006l0,-12.457l7.4,0l0,19.86Z"/>
+            </g>
+            <g>
+              <path d="M166.948,384.55l-14.271,24.55l7.541,4.348l13.899,-24.722l22.44,12.79l-3.664,6.429l-15.974,-9.104l-13.917,24.755l-20.454,-11.795l18.002,-30.97l6.398,3.719Z"/>
+              <path d="M188.053,415.14l-9.93,17.2l-18.365,-10.614l3.703,-6.407l11.955,6.909l6.229,-10.788l6.408,3.7Z"/>
+            </g>
+            <g>
+              <path d="M114.529,323.081l-24.634,14.125l4.356,7.536l24.398,-14.461l13.039,22.297l-6.388,3.736l-9.281,-15.871l-24.431,14.48l-11.816,-20.443l31.076,-17.819l3.681,6.42Z"/>
+              <path d="M103.023,359.945l10.789,-6.229l3.7,6.409l-17.2,9.93l-10.597,-18.374l6.41,-3.697l6.898,11.961Z"/>
+            </g>
+            <g>
+              <path d="M99.889,236.237l-0.022,7.4l-28.396,-0.084l0.005,8.704l28.359,-0.324l0.144,25.829l-7.4,0.041l-0.102,-18.385l-28.398,0.325l-0.011,-23.612l35.821,0.106Z"/>
+              <path d="M71.477,256.002l-0.006,13.808l12.458,0l0,7.4l-19.861,0l0.009,-21.212l7.4,0.004Z"/>
+            </g>
+            <g>
+              <path d="M130.611,161.108l-3.719,6.398l-24.55,-14.271l-4.348,7.541l24.722,13.898l-12.79,22.441l-6.429,-3.664l9.104,-15.974l-24.755,-13.917l11.796,-20.454l30.969,18.002Z"/>
+              <path d="M96.123,164.019l-6.909,11.955l10.788,6.229l-3.7,6.408l-17.2,-9.93l10.614,-18.365l6.407,3.703Z"/>
+            </g>
+            <g>
+              <path d="M194.781,111.406l-6.42,3.681l-14.125,-24.634l-7.536,4.356l14.461,24.398l-22.297,13.039l-3.736,-6.388l15.872,-9.281l-14.48,-24.431l20.442,-11.816l17.819,31.076Z"/>
+              <path d="M163.458,96.683l-11.961,6.898l6.229,10.789l-6.409,3.7l-9.93,-17.2l18.374,-10.598l3.697,6.411Z"/>
+            </g>
+            <g>
+              <path d="M275.205,100.447l-7.4,-0.022l0.084,-28.396l-8.704,0.004l0.324,28.36l-25.829,0.144l-0.041,-7.4l18.385,-0.103l-0.324,-28.397l23.611,-0.011l-0.106,35.821Z"/>
+              <path d="M255.444,64.635l-0.003,7.4l-13.808,-0.006l0,12.457l-7.4,0l0,-19.86l21.211,0.009Z"/>
+            </g>
+            <g>
+              <path d="M368.337,100.199l-18.003,30.97l-6.398,-3.719l14.271,-24.55l-7.54,-4.348l-13.899,24.722l-22.441,-12.79l3.665,-6.429l15.973,9.104l13.918,-24.755l20.454,11.795Z"/>
+              <path d="M351.126,90.274l-3.703,6.407l-11.955,-6.909l-6.228,10.788l-6.409,-3.7l9.93,-17.2l18.365,10.614Z"/>
+            </g>
+            <g>
+              <path d="M394.866,171.557l24.43,-14.48l11.816,20.443l-31.075,17.819l-3.681,-6.42l24.633,-14.125l-4.356,-7.536l-24.398,14.461l-13.039,-22.297l6.388,-3.736l9.282,15.871Z"/>
+              <path d="M421.17,160.319l-6.41,3.697l-6.899,-11.961l-10.788,6.229l-3.7,-6.409l17.199,-9.93l10.598,18.374Z"/>
+            </g>
+            <g>
+              <path d="M418.408,252.582l28.397,-0.325l0.012,23.612l-35.822,-0.106l0.022,-7.4l28.396,0.084l-0.004,-8.704l-28.36,0.324l-0.144,-25.829l7.4,-0.041l0.103,18.385Z"/>
+              <path d="M446.807,256.002l-7.4,-0.004l0.006,-13.808l-12.457,0l0,-7.4l19.861,0l-0.01,21.212Z"/>
+            </g>
+            <g>
+              <path d="M407.387,318.549l-9.104,15.974l24.756,13.917l-11.796,20.454l-30.969,-18.002l3.719,-6.398l24.549,14.271l4.349,-7.541l-24.723,-13.898l12.79,-22.441l6.429,3.664Z"/>
+              <path d="M431.782,333.319l-10.614,18.365l-6.407,-3.703l6.91,-11.955l-10.789,-6.229l3.7,-6.408l17.2,9.93Z"/>
+            </g>
+            <g>
+              <path d="M355.756,386.142l-15.871,9.281l14.48,24.431l-20.443,11.816l-17.819,-31.076l6.42,-3.681l14.125,24.634l7.536,-4.356l-14.46,-24.398l22.296,-13.039l3.736,6.388Z"/>
+              <path d="M369.497,411.13l-18.374,10.598l-3.697,-6.411l11.961,-6.898l-6.229,-10.789l6.409,-3.7l9.93,17.2Z"/>
+            </g>
+          </g>
+        </g>
+        <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.05"/>
+      </svg>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/gate-of-time-svg-css/src/style.css b/gate-of-time-svg-css/src/style.css
new file mode 100644
index 0000000..4a52e75
--- /dev/null
+++ b/gate-of-time-svg-css/src/style.css
@@ -0,0 +1,247 @@
+body{
+	background-color: #151515;
+	width: 100%;
+	height: 100%;
+	margin: 0px;
+	overflow: hidden;
+
+	--blue: #3aa8c3;
+	--lightBlue: #0ff;
+	--spinAnimation: spin 23s cubic-bezier(.39,-0.52,.53,.98) 0s infinite;
+}
+
+#container{
+	width: 90vw;
+	height: 90vw;
+	max-width: 90vh;
+	max-height: 90vh;
+  	margin: auto;
+  	position: absolute;
+	top: 0; right: 0; bottom: 0; left: 0;
+}
+
+#portal{
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+#portal > #mainGear{
+	position: absolute;
+	top:0px;
+	left:0px;
+	right: 0px;
+	bottom: 0px;
+	z-index: 1;
+	animation: var(--spinAnimation);
+	will-change: transform;
+	z-index: 100;
+}
+
+#mainGear > path{
+	fill:#735290;
+}
+
+
+#mainGear .decoration{
+	fill: var(--blue);
+	stroke: var(--blue);
+	stroke-width:1px;
+}
+
+#mainGear .runes path, #mainGear .runes circle{
+	fill: none;
+	stroke: var(--blue);
+	stroke-width: 2px;
+}
+
+#mainGear .runes path.filled, #mainGear .runes circle{
+	fill:var(--blue);
+}
+
+#portal > #innerGears{
+	position: absolute;
+	top:14.5%;
+	left:14.5%;
+	right: 14.5%;
+	bottom: 14.5%;
+	border-radius: 50%;
+	-webkit-clip-path: circle(50%);
+	overflow: hidden;
+}
+
+#portal > #innerGears > .innerGear{
+	position: absolute;
+	transform-origin: center;
+	animation: var(--spinAnimation);
+	will-change: transform;
+}
+
+.innerGear:nth-child(1){
+	width: 190%;
+	height: 190%;
+	bottom: -22%;
+	left: -45%;
+	z-index: 99;
+}
+.innerGear:nth-child(2){
+	width: 150%;
+	height: 150%;
+	bottom: -8%;
+	left: -16%;
+	z-index: 98;
+}
+
+.innerGear:nth-child(3){
+	width: 117%;
+	height: 117%;
+	top: -17%;
+	left: 3%;
+	z-index: 97;
+}
+
+.innerGear:nth-child(4){
+	width: 100%;
+	height: 100%;
+	top: -2%;
+	left: 12%;
+	z-index: 96;
+}
+
+.innerGear:nth-child(5){
+	width: 92%;
+	height: 92%;
+	top: 9.5%;
+	left: 15.5%;
+	z-index: 95;
+}
+
+.innerGear:nth-child(6){
+	width: 79.5%;
+	height: 79.5%;
+	top: 19.5%;
+	left: 17%;
+	z-index: 94;
+}
+
+.innerGear:nth-child(7){
+	width: 70%;
+	height: 70%;
+	top: 23.3%;
+	left: 17%;
+	z-index: 93;
+}
+
+.innerGear:nth-child(8){
+	width: 63%;
+	height: 63%;
+	top: 25%;
+	left: 15%;
+	z-index: 92;
+}
+
+.innerGear:nth-child(9){
+	width: 55%;
+	height: 55%;
+	top: 26%;
+	left: 18%;
+	z-index: 91;
+}
+
+.innerGear:nth-child(10){
+	width: 51%;
+	height: 51%;
+	top: 25%;
+	left: 18.5%;
+	z-index: 90;
+}
+
+.innerGear:nth-child(11){
+	width: 48%;
+	height: 48%;
+	top: 23.5%;
+	left: 21%;
+	z-index: 89;
+}
+
+.innerGear:nth-child(12){
+	width: 45%;
+	height: 45%;
+	top: 23%;
+	left: 24%;
+	z-index: 88;
+}
+
+.innerGear:nth-child(13){
+	width: 40%;
+	height: 40%;
+	top: 25.5%;
+	left: 29.2%;
+	z-index: 87;
+}
+
+.innerGear:nth-child(14){
+	width: 35%;
+	height: 35%;
+	top: 32%;
+	left: 34%;
+	z-index: 86;
+}
+
+.innerGear:nth-child(15){
+	width: 32%;
+	height: 32%;
+	top: 31%;
+	left: 35%;
+	z-index: 85;
+}
+
+.innerGear .teeth{
+	fill: url(#radial);
+	stroke-width: 5px;
+	stroke: var(--lightBlue);
+}
+
+.innerGear .runes path{
+	fill: var(--lightBlue);
+}
+
+@keyframes spin{
+	0%{transform: rotate(0deg);}
+
+	8%{transform: rotate(30deg);}
+	9%{transform: rotate(30deg);}
+
+	17%{transform: rotate(60deg);}
+	18%{transform: rotate(60deg);}
+
+	25%{transform: rotate(90deg);}
+	26%{transform: rotate(90deg);}
+
+	33%{transform: rotate(120deg);}
+	34%{transform: rotate(120deg);}
+
+	42%{transform: rotate(150deg);}
+	43%{transform: rotate(150deg);}
+
+	50%{transform: rotate(180deg);}
+	51%{transform: rotate(180deg);}
+
+	58%{transform: rotate(210deg);}
+	59%{transform: rotate(210deg);}
+
+	67%{transform: rotate(240deg);}
+	68%{transform: rotate(240deg);}
+
+	75%{transform: rotate(270deg);}
+	76%{transform: rotate(270deg);}
+
+	83%{transform: rotate(300deg);}
+	84%{transform: rotate(300deg);}
+
+	92%{transform: rotate(330deg);}
+	93%{transform: rotate(330deg);}
+
+	99%{transform: rotate(360deg);}
+	100%{transform: rotate(360deg);}
+}
\ No newline at end of file
diff --git a/generative-canyons/README.markdown b/generative-canyons/README.markdown
new file mode 100644
index 0000000..5bacfae
--- /dev/null
+++ b/generative-canyons/README.markdown
@@ -0,0 +1,5 @@
+# Generative Canyons
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/rNmjPPP](https://codepen.io/cobra_winfrey/pen/rNmjPPP).
+
+
diff --git a/generative-canyons/dist/index.html b/generative-canyons/dist/index.html
new file mode 100644
index 0000000..cc63cf7
--- /dev/null
+++ b/generative-canyons/dist/index.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Generative Canyons</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id='wrap'>
+  <div class='box'>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+  </div>
+  <div class='box'>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+  </div>
+  <div class='box'>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+  </div>
+  <div class='box'>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+  </div>
+  <div class='box'>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+  </div>
+  <div class='box'>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+  </div>
+  <div class='box'>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+  </div>
+  <div class='box'>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+  </div>
+  <div class='box'>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+    <div class='row'>
+      <div class='hill'></div>
+    </div>
+  </div>
+</div>
+<svg version='1.1' xmlns='http://www.w3.org/2000/svg'>
+  <defs>
+    <filter class='filter' id='filter1'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency1' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement1' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter2'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency2' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement2' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter3'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency3' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement3' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter4'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency4' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement4' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter5'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency5' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement5' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter6'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency6' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement6' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter7'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency7' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement7' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter8'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency8' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement8' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter9'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency9' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement9' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter10'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency10' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement10' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter11'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency11' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement11' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter12'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency12' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement12' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter13'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency13' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement13' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter14'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency14' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement14' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter15'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency15' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement15' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter16'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency16' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement16' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter17'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency17' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement17' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter18'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency18' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement18' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter19'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency19' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement19' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter20'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency20' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement20' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter21'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency21' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement21' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter22'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency22' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement22' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter23'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency23' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement23' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter24'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency24' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement24' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+    <filter class='filter' id='filter25'>
+      <feturbulence basefrequency='0.025 0.0015' id='frequency25' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement25' in2='fractalNoise' in='SourceGraphic' scale='300'></fedisplacementmap>
+    </filter>
+  </defs>
+</svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/generative-canyons/dist/script.js b/generative-canyons/dist/script.js
new file mode 100644
index 0000000..9ff7e17
--- /dev/null
+++ b/generative-canyons/dist/script.js
@@ -0,0 +1,47 @@
+const displacement = document.querySelectorAll('fedisplacementmap');
+const frequency = document.querySelectorAll('feturbulence');
+const boxes = document.querySelectorAll('.box');
+let index = -1;
+
+document.addEventListener("DOMContentLoaded", function(){
+updateBlobs();
+document.body.classList.add('loaded');
+});
+
+document.body.addEventListener("click", function(){
+updateBlobs();
+});
+
+
+function updateBlobs(){
+   index = -1;
+   var boxCount = Math.floor(Math.random() * 9);
+   document.querySelectorAll(".filter").forEach(filter => { 
+   index += 1;
+   var displaceVal = displacement[index];
+   var freqVal = frequency[index];
+   displaceVal.setAttribute("scale", Math.max(50, Math.random() * 200));
+    freqVal.setAttribute("baseFrequency", (Math.max(100, Math.random() * 200)/11000)+' '+(Math.max(100, Math.random() * 200)/11000));
+ });
+  document.querySelectorAll(".box").forEach(box => { 
+    box.style.setProperty("--padding", Math.max(10, Math.random() * 120) + 'px');
+    box.style.setProperty("--opacity", 0);
+    box.style.setProperty("--top", Math.max(10, Math.random() * 25) + '%');
+    box.style.setProperty("--left", Math.max(10, Math.random() * 75) + '%');
+  });
+  boxes[boxCount].style.setProperty("--opacity", 1);
+  document.querySelectorAll(".row").forEach(row => { 
+    
+  row.style.setProperty("--colorA","var(--color" + Math.floor(Math.random() * 4) + ")");
+     row.style.setProperty("--colorB","var(--color" + Math.floor(Math.random() * 4) + ")");
+    row.style.setProperty("--colorC","var(--color" + Math.floor(Math.random() * 4) + ")");
+     row.style.setProperty("--colorD","var(--color" + Math.floor(Math.random() * 4) + ")");
+  row.style.setProperty("--angle", Math.floor(Math.random() * 360) + "deg");
+  row.style.setProperty("--angle1", Math.floor(Math.random() * 100)); 
+  row.style.setProperty("--angle2", Math.floor(Math.random() * 100)); 
+     row.style.setProperty("--angle3", Math.floor(Math.random() * 360) + 'deg'); 
+    row.style.setProperty("--scale", (Math.floor(Math.random() * 200) * 0.01) + 0.75);
+     row.style.setProperty("--left", Math.max(1, Math.random() * 100) + "%");
+    row.style.setProperty("--depth", Math.max(10, (Math.random() * 50))); 
+   });
+}
\ No newline at end of file
diff --git a/generative-canyons/dist/style.css b/generative-canyons/dist/style.css
new file mode 100644
index 0000000..9bd4e35
--- /dev/null
+++ b/generative-canyons/dist/style.css
@@ -0,0 +1,293 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  --t: rgba(255,255,255,0.001);
+  --color0: #782036;
+  --color1: #d1662f;
+  --color2: #f4a645;
+  --color3: #ffd383;
+  --colorA: var(--color2);
+  --colorB: var(--color3);
+  --angle1: 25%;
+  --angle2: 50%;
+  --contrast: 1.5;
+  --blur: 0px;
+  --depth:25;
+  background: radial-gradient(circle at center, #fff, #d3cfc0 500px);
+  pointer-events: none;
+}
+body.loaded {
+  pointer-events: all;
+}
+body.loaded #wrap {
+  opacity: 1;
+}
+body svg {
+  position: absolute;
+}
+body:before {
+  content: "click me";
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  bottom: 10px;
+  left: 0;
+  font-family: "Futura", sans-serif;
+  font-size: 10px;
+  color: var(--color1);
+}
+body #wrap {
+  width: clamp(600px, 60vw, 90vh);
+  height: clamp(600px, 60vw, 90vh);
+  box-sizing: border-box;
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  padding: 20px;
+  position: relative;
+  overflow: visible;
+  transition: opacity 1s ease-in-out;
+  opacity: 0;
+}
+body #wrap .box {
+  background: linear-gradient(to bottom, #8fb7c3, #b0ccd5 50%);
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(5, 1fr);
+  background: linear-gradient(to bottom, #52899a, #b0ccd5 50%);
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding-top: var(--padding);
+  box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.95);
+  filter: contrast(var(--contrast));
+}
+body #wrap .box:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 0;
+  background: linear-gradient(to bottom, #406b79, #b0ccd5 50%);
+  -webkit-mask: url("data:image/png;base64,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");
+          mask: url("data:image/png;base64,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");
+}
+body #wrap .box:before {
+  content: "";
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  border-radius: 100%;
+  background: #ffd383;
+  z-index: 1;
+  box-shadow: inset 10px -10px 30px -15px rgba(0, 0, 0, 0.35), 10px -10px 40px 0px #ffd383, 0 0 80px 10px #ffd383;
+  top: var(--top);
+  left: var(--left);
+  opacity: var(--opacity);
+}
+body #wrap .box:nth-of-type(1) .row:nth-of-type(1) {
+  filter: blur(var(--blur)) brightness(0.875) url(#filter2);
+}
+body #wrap .box:nth-of-type(1) .row:nth-of-type(2) {
+  filter: blur(var(--blur)) brightness(0.75) url(#filter3);
+}
+body #wrap .box:nth-of-type(1) .row:nth-of-type(3) {
+  filter: blur(var(--blur)) brightness(0.625) url(#filter4);
+}
+body #wrap .box:nth-of-type(1) .row:nth-of-type(4) {
+  filter: blur(var(--blur)) brightness(0.5) url(#filter5);
+}
+body #wrap .box:nth-of-type(1) .row:nth-of-type(5) {
+  filter: blur(var(--blur)) brightness(0.375) url(#filter6);
+}
+body #wrap .box:nth-of-type(2) .row:nth-of-type(1) {
+  filter: blur(var(--blur)) brightness(0.875) url(#filter3);
+}
+body #wrap .box:nth-of-type(2) .row:nth-of-type(2) {
+  filter: blur(var(--blur)) brightness(0.75) url(#filter4);
+}
+body #wrap .box:nth-of-type(2) .row:nth-of-type(3) {
+  filter: blur(var(--blur)) brightness(0.625) url(#filter5);
+}
+body #wrap .box:nth-of-type(2) .row:nth-of-type(4) {
+  filter: blur(var(--blur)) brightness(0.5) url(#filter6);
+}
+body #wrap .box:nth-of-type(2) .row:nth-of-type(5) {
+  filter: blur(var(--blur)) brightness(0.375) url(#filter7);
+}
+body #wrap .box:nth-of-type(3) .row:nth-of-type(1) {
+  filter: blur(var(--blur)) brightness(0.875) url(#filter4);
+}
+body #wrap .box:nth-of-type(3) .row:nth-of-type(2) {
+  filter: blur(var(--blur)) brightness(0.75) url(#filter5);
+}
+body #wrap .box:nth-of-type(3) .row:nth-of-type(3) {
+  filter: blur(var(--blur)) brightness(0.625) url(#filter6);
+}
+body #wrap .box:nth-of-type(3) .row:nth-of-type(4) {
+  filter: blur(var(--blur)) brightness(0.5) url(#filter7);
+}
+body #wrap .box:nth-of-type(3) .row:nth-of-type(5) {
+  filter: blur(var(--blur)) brightness(0.375) url(#filter8);
+}
+body #wrap .box:nth-of-type(4) .row:nth-of-type(1) {
+  filter: blur(var(--blur)) brightness(0.875) url(#filter5);
+}
+body #wrap .box:nth-of-type(4) .row:nth-of-type(2) {
+  filter: blur(var(--blur)) brightness(0.75) url(#filter6);
+}
+body #wrap .box:nth-of-type(4) .row:nth-of-type(3) {
+  filter: blur(var(--blur)) brightness(0.625) url(#filter7);
+}
+body #wrap .box:nth-of-type(4) .row:nth-of-type(4) {
+  filter: blur(var(--blur)) brightness(0.5) url(#filter8);
+}
+body #wrap .box:nth-of-type(4) .row:nth-of-type(5) {
+  filter: blur(var(--blur)) brightness(0.375) url(#filter9);
+}
+body #wrap .box:nth-of-type(5) .row:nth-of-type(1) {
+  filter: blur(var(--blur)) brightness(0.875) url(#filter6);
+}
+body #wrap .box:nth-of-type(5) .row:nth-of-type(2) {
+  filter: blur(var(--blur)) brightness(0.75) url(#filter7);
+}
+body #wrap .box:nth-of-type(5) .row:nth-of-type(3) {
+  filter: blur(var(--blur)) brightness(0.625) url(#filter8);
+}
+body #wrap .box:nth-of-type(5) .row:nth-of-type(4) {
+  filter: blur(var(--blur)) brightness(0.5) url(#filter9);
+}
+body #wrap .box:nth-of-type(5) .row:nth-of-type(5) {
+  filter: blur(var(--blur)) brightness(0.375) url(#filter10);
+}
+body #wrap .box:nth-of-type(6) .row:nth-of-type(1) {
+  filter: blur(var(--blur)) brightness(0.875) url(#filter7);
+}
+body #wrap .box:nth-of-type(6) .row:nth-of-type(2) {
+  filter: blur(var(--blur)) brightness(0.75) url(#filter8);
+}
+body #wrap .box:nth-of-type(6) .row:nth-of-type(3) {
+  filter: blur(var(--blur)) brightness(0.625) url(#filter9);
+}
+body #wrap .box:nth-of-type(6) .row:nth-of-type(4) {
+  filter: blur(var(--blur)) brightness(0.5) url(#filter10);
+}
+body #wrap .box:nth-of-type(6) .row:nth-of-type(5) {
+  filter: blur(var(--blur)) brightness(0.375) url(#filter11);
+}
+body #wrap .box:nth-of-type(7) .row:nth-of-type(1) {
+  filter: blur(var(--blur)) brightness(0.875) url(#filter8);
+}
+body #wrap .box:nth-of-type(7) .row:nth-of-type(2) {
+  filter: blur(var(--blur)) brightness(0.75) url(#filter9);
+}
+body #wrap .box:nth-of-type(7) .row:nth-of-type(3) {
+  filter: blur(var(--blur)) brightness(0.625) url(#filter10);
+}
+body #wrap .box:nth-of-type(7) .row:nth-of-type(4) {
+  filter: blur(var(--blur)) brightness(0.5) url(#filter11);
+}
+body #wrap .box:nth-of-type(7) .row:nth-of-type(5) {
+  filter: blur(var(--blur)) brightness(0.375) url(#filter12);
+}
+body #wrap .box:nth-of-type(8) .row:nth-of-type(1) {
+  filter: blur(var(--blur)) brightness(0.875) url(#filter9);
+}
+body #wrap .box:nth-of-type(8) .row:nth-of-type(2) {
+  filter: blur(var(--blur)) brightness(0.75) url(#filter10);
+}
+body #wrap .box:nth-of-type(8) .row:nth-of-type(3) {
+  filter: blur(var(--blur)) brightness(0.625) url(#filter11);
+}
+body #wrap .box:nth-of-type(8) .row:nth-of-type(4) {
+  filter: blur(var(--blur)) brightness(0.5) url(#filter12);
+}
+body #wrap .box:nth-of-type(8) .row:nth-of-type(5) {
+  filter: blur(var(--blur)) brightness(0.375) url(#filter13);
+}
+body #wrap .box:nth-of-type(9) .row:nth-of-type(1) {
+  filter: blur(var(--blur)) brightness(0.875) url(#filter10);
+}
+body #wrap .box:nth-of-type(9) .row:nth-of-type(2) {
+  filter: blur(var(--blur)) brightness(0.75) url(#filter11);
+}
+body #wrap .box:nth-of-type(9) .row:nth-of-type(3) {
+  filter: blur(var(--blur)) brightness(0.625) url(#filter12);
+}
+body #wrap .box:nth-of-type(9) .row:nth-of-type(4) {
+  filter: blur(var(--blur)) brightness(0.5) url(#filter13);
+}
+body #wrap .box:nth-of-type(9) .row:nth-of-type(5) {
+  filter: blur(var(--blur)) brightness(0.375) url(#filter14);
+}
+body #wrap .row {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-template-rows: 1fr;
+  position: relative;
+  transform: skew(-20deg);
+}
+body #wrap .row:nth-of-type(1) {
+  z-index: 3;
+}
+body #wrap .row:nth-of-type(2) {
+  z-index: 4;
+}
+body #wrap .row:nth-of-type(3) {
+  z-index: 5;
+}
+body #wrap .row:nth-of-type(4) {
+  z-index: 6;
+}
+body #wrap .row:nth-of-type(5) {
+  z-index: 7;
+}
+body #wrap .row:nth-of-type(even) {
+  transform: scaleX(-1) skew(-20deg);
+}
+body #wrap .row .hill, body #wrap .row .hill:after {
+  position: absolute;
+  width: 150%;
+  height: 300%;
+  left: -50%;
+  top: 0;
+  border-radius: 100% 100% 0 0;
+  background: radial-gradient(circle at top, var(--colorA), var(--colorB));
+  box-shadow: inset 0 -5px 20px -2.5px #000, inset calc(var(--angle1) * 0.5px) calc(var(--angle2) * 0.5px) 40px calc((var(--angle1) + var(--angle2)) * -0.15px) var(--colorA), 0 calc(var(--depth) * 1px) 30px calc(var(--depth) * -1px) rgba(0, 0, 0, 0.75);
+  -webkit-mask: linear-gradient(to right, #000, rgba(0, 0, 0, 0.75));
+          mask: linear-gradient(to right, #000, rgba(0, 0, 0, 0.75));
+}
+body #wrap .row .hill:before, body #wrap .row .hill:after:before {
+  content: "";
+  position: absolute;
+  width: 15%;
+  height: 15%;
+  border-radius: inherit;
+  -webkit-mask: linear-gradient(to top, transparent, #000 50%);
+          mask: linear-gradient(to top, transparent, #000 50%);
+  bottom: 50%;
+  background: inherit;
+  box-shadow: inset 0 -20px 40px -10px rgba(0, 0, 0, 0.5), inset calc(var(--angle1) * 1px) calc(var(--angle2) * 1px) 40px calc((var(--angle1) + var(--angle2)) * -0.25px) var(--colorA), 0 calc(var(--depth) * 2px) 30px calc(var(--depth) * -10px) rgba(0, 0, 0, 0.75);
+  transform: scale(var(--scale));
+  left: var(--left);
+  transform-origin: bottom;
+}
+body #wrap .row .hill:after {
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAMAAAC5KTl3AAAAgVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABtFS1lAAAAK3RSTlMWi3QSa1uQOKBWCTwcb6V4gWInTWYOqQSGfa6XLyszmyABlFFJXySxQ0BGn2PQBgAAC4NJREFUWMMV1kWO5UAQRdFk5kwzs/33v8Cunr7ZUehKAdaRUAse99ozDjF5BqswrPKm7btzJ2tRziN3rMYXC236humIV5Our7nHWnVdFOBojW2XVnkeu1IZHNJH5OPHj9TjgVxBGBwAAmp60WoA1gBBvg3XMFhxUQ4KuLqx0CritYZPPXinsOqB7I76+OHaZlPzLEcftrqOlOwjeXvuEuH6t6emkaofgVUDIb4fEZB6CmRAeFCTq11lxbAgUyx4rXkqlH9I4bTUDRRVD1xjbqb9HyUBn7rhtr1x+x9Y0e3BdX31/loYvZaLxqnjbRuokz+pPG7WebnSNKE3yE6Tka4aDEDMVYr6Neq126c+ZR2nzzm3yyiC7PGWG/1uueqZudrVGYNdsgOMDvt1cI8CXu63QIcPvYNY8z870WwYazTS7DqpDEknZqS0AFXObWUxTaw0q5pnHlq4oQImakpLfJkmErdvAfhsc7lod0DVT4tuob25C0tQjzdiFObCz7U7eaKGP3s6yQVgQ/y+q+nY6K5dfV75iXzcNlGIP38aj22sVwtWWKMRb7B5HoHPaBvI1Ve5TSXATi66vV6utxsV+aZNFu+93VvlrG/oj8Wp67YT8l+Oq6PjwdGatFm7SEAP13kE0y9CEcf9qhtEWCMIq5AGq71moEAI9vrmFcmO8+7ZyDnmRN/VUaFkM2ce8KuBGFzDMmY6myLfQGra2ofgHhbJRXuRDZ4H+HmliWBHXQ0ysLGfv6FetbxtxzRgIZWjIsGVFl5imPXeyvVyayNek+dSWzjXd4t310YBdaF8sXeKs481PjsXbAtIru2+wHbv3GVh3sQY6Dnu6pF3pZ714VYdDi9A5GkXR/6xgaZN/tpQ8wVV3zeBuB+njoBNE4wjc+uA523ysXGd/P2sntmOb3OdHNWP5OVrxD3eJHdtH8QVkEIAqCor3hReR96yqt6PkTQfenllooQ447h6tOrnnuzwA8fMpq+jqg1oW8fTYYIncAYpVeTvkEFr/khQSbjoE8ykx9049OkE5MQEO9lC24tT7DwThQgf4Fhf8nGgAo3GYaON3crODpOr2pu5dBABz69t7F5yJBBo+r6QJdeLDWEoO7r1tceR3haA7gc7eZrCvpxSXXeKpo4P+hRixo9DeOFbqQVjKyWfBg9pnrEZKzK7R437YTTwhfoySG/YOCt3fs4aXlU3FjKortqQ6XyXaD0+Y/8VoqpyU9TRW45eN4oBxAH8Y/jLnNXfELJW+/p/MgO9Z+mBli2qqAP7dV/Arc2+YZRZwtBW8/p32y5ZsEuCS4O5AAgfR7Dde7zhiGfgvurQkfAXIrUG61rmxc2EZo18ph4vaWZI+QM0JdsbNlBJlPlwf9uguujQJy0j7TgTHdtRnjybTg55Hkk9S6l2rpYahumSewKHVosa1bh2Y6r9JGkdKvIDN/eeAwScrfjoLkCxWJuFZQ53FNP5w9XbQd1HhgHcVB/0fATG3sUUid1RTfc2+7pZVKldFSsaEK0v4k90tapQOk2HIbMhaJQtrUEL5+3sDanh8sOpbYRoQoqXWu6SQcUTQL9jzOrXNPWCJwXge4U7tlU1hkF012cAmvp8llQxf1IEMcw14pURxVOWATz4ITnYQjuF+vDXg5hgoiqXzO6mS91FQUBheURHIJxUeU1i3P0WOMpsm7vFYk0JJi/Ev+X3FwYD69cARPuP5GIc0PxoAFjcLRbNur0iMTrQmBBNYJ2ngU4x7SWfdTRl52Bqv7LmYW3C1CyTCPTHeWWIAM/Whm32COHsaj+2UQ739XB9t6NV0o9E9b7CW3XNiXzi9e0KiE+3rntukdIDBWrU2jsfQWuyFJRANxq8StHVv1JPy2C3Byco7qdNbASrnNXZ8G0L/Wp/pif4Ai9aEZ9Bb+TRx+REBdGlkF/s0dUdMSMr+6YCbuGxqPWdzcdqutvqkBzCksFcwAtjf55TeuH79M6AQa7r5PLeXxMFIlQKrXP9VJ275WGX+ptpf+tvTDBsecPnYQAlAWrVbRVJ7K2pRHwIjtSpbX96Y/lbKk6ZWXlBmh15r8yAWQsYxXgBOXYMAfHnUXF+rDqnB8bXDRtAn7bCziIqetSboK3NexMePvsCRLvmsoREA+kH8j4HWFpnNEaWgOmR7xyXHfTaz3slHc/YA6H6tl/L8d5tPcIwwD0tjvRaq3Y5BmYBSDClpv0VIX4s8D0XK3sPdpAb94HjPLkgboEz9EdZATW6ZdcmQvtKUwoWw+nAVKA7IcdY1UHnvNnIBplKci+knzewLz5/GGnzkGuuGky+0LTjtGBGR85EQICDqKChnm5pH3Z44nnWAk1YRdyu3g7QoFZ0h8jkr2ffjKmi+Qvsp+9GvNGZHmgW+YQAGUw7PPt8IPKbdy432vhKtRJjKWcSqq7helj81o3nfmaxVZ7Sqie8OOBk9WsyTD/ab7fQ5aWwQeJvnH6+ayo4IdIkOSBJjzXkgr+1TPhAx1AXDsxtCCj3TzQTLA1p782f7a8vdgPfwwrXmZxxbqo2h+6Zlo6mcMY4V7cFBOLm17VCvx9Qa2tAnkxEB+KYyQgbgAAnmNDOdOO6y2Cb+lke1MWQc9o+EMdQf7ubIG3Ek8GZ4k1PtGjbhwgOMPp5Em59JMVk/jU8/aF73Xcrd3UBNZyueQu0/xz2aGtZT8CRziOax2BWFXaeDzgZNV7oRtUzFoijoETf3xkAFFk3OMb7SgPh5wxU1+MygDIp9gZChH2qEcpgLh8pBIK90PXT1ZSU+ZExFK4Vm4GL/J7+K13lS5dQkW4HQwl6GX4yLqu8GhGWS2k75yel5IZIfFNdAL0NpKr2N5dQesBnxa42DLgJd6agS1jJsp1mO1dip7PU4P6diLLoTsZ4m3Q0QweiqeFfIGPLgF6v6mSVv6xe85VBD/1Mpe3AurRbcJ9SEo8NszNVy8rOCEexyIFcJRvYAlI/wk2I7r3p60FFLQXoH2q9xri/m41svRPbW0/EnPn2DWsmk0IiPpB60aa3+hiFfWuC8ZvWKEd9LxAk3HcOof6d77RewPaPsGw5lQAHcZN2vx1448u9pLfMLGQ3BSRRjBzRhKt7HcCw/7aqjtCDs5q76b4ZGphxN2th1WeXYlfnozX3ebKtX4Te11hf1tZP1diiGjIDAB1cR4Sb9rcFPC/nBARjlgDxd+tCBb1t91j71xJcgGjT3g/dUFnXXNiDrxkyoHANPk58ACPUa42hj8tgGrhiXOCmygxFZBiT2wyAJTDJ4wJEPmp6JIrDaSWYNqv4xH2wwdSTGYb3E0pXnS39nmLUsqoVZxzSoegqzd0o06wdbTXsaHGL+IF4JtIcXddTcD/dCd8hVf+fWPSV553kjMmMEULLS8HcgmptDO955dLGX78PjiDA6IsTHPm5IA6bc5ha0gaGkoEttXuxU11B2dOJ65/Q08tEF1+Y9cr2Nh/VECfQ33GyvR/gsdN1LuIeLpKMCAF2yRr769g9/4aJLZNRI71m2S91+Kp+Q0zubTcxoG2/6gm1Q79wkMj2XNO2ui7nWw8ULtu27CCvqTGX2PffD+xcwgh/TrOKvGZMM5jRFGDTn4NO/lwnDR/GY/waDZtkWDUPI0O8ztcFVqp6r2ZW+2bvkJ3raptYagFqu95VdIaml2CIp6CKets34x+fH2C+zH4cVFO7vj+6k2FU39PtRhWluYeZ3gDz1TLB9K2v7SD9gJU1qDxoRDrAWcrFGLyndhdtd0505+gEP79adK8fmFCWNYC+ahzVNcRH79E8dA1iqX/N0qq22xcOc20ALxLDspEj4QCFBQMgaIwoKbxr0Bd7Sbws6GiRK6tqoPfpiCle23axejRLyO1I+ahsEpWrzT5ZsCyS5RcY9jMfENFxSnhKsrfW8JHH6/rdQUMfmQPT3Uz9gY0C/pu1yuCnrPUvio0a1qMEosA/EwIzzid7cqsAAAAASUVORK5CYII=");
+          mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAMAAAC5KTl3AAAAgVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABtFS1lAAAAK3RSTlMWi3QSa1uQOKBWCTwcb6V4gWInTWYOqQSGfa6XLyszmyABlFFJXySxQ0BGn2PQBgAAC4NJREFUWMMV1kWO5UAQRdFk5kwzs/33v8Cunr7ZUehKAdaRUAse99ozDjF5BqswrPKm7btzJ2tRziN3rMYXC236humIV5Our7nHWnVdFOBojW2XVnkeu1IZHNJH5OPHj9TjgVxBGBwAAmp60WoA1gBBvg3XMFhxUQ4KuLqx0CritYZPPXinsOqB7I76+OHaZlPzLEcftrqOlOwjeXvuEuH6t6emkaofgVUDIb4fEZB6CmRAeFCTq11lxbAgUyx4rXkqlH9I4bTUDRRVD1xjbqb9HyUBn7rhtr1x+x9Y0e3BdX31/loYvZaLxqnjbRuokz+pPG7WebnSNKE3yE6Tka4aDEDMVYr6Neq126c+ZR2nzzm3yyiC7PGWG/1uueqZudrVGYNdsgOMDvt1cI8CXu63QIcPvYNY8z870WwYazTS7DqpDEknZqS0AFXObWUxTaw0q5pnHlq4oQImakpLfJkmErdvAfhsc7lod0DVT4tuob25C0tQjzdiFObCz7U7eaKGP3s6yQVgQ/y+q+nY6K5dfV75iXzcNlGIP38aj22sVwtWWKMRb7B5HoHPaBvI1Ve5TSXATi66vV6utxsV+aZNFu+93VvlrG/oj8Wp67YT8l+Oq6PjwdGatFm7SEAP13kE0y9CEcf9qhtEWCMIq5AGq71moEAI9vrmFcmO8+7ZyDnmRN/VUaFkM2ce8KuBGFzDMmY6myLfQGra2ofgHhbJRXuRDZ4H+HmliWBHXQ0ysLGfv6FetbxtxzRgIZWjIsGVFl5imPXeyvVyayNek+dSWzjXd4t310YBdaF8sXeKs481PjsXbAtIru2+wHbv3GVh3sQY6Dnu6pF3pZ714VYdDi9A5GkXR/6xgaZN/tpQ8wVV3zeBuB+njoBNE4wjc+uA523ysXGd/P2sntmOb3OdHNWP5OVrxD3eJHdtH8QVkEIAqCor3hReR96yqt6PkTQfenllooQ447h6tOrnnuzwA8fMpq+jqg1oW8fTYYIncAYpVeTvkEFr/khQSbjoE8ykx9049OkE5MQEO9lC24tT7DwThQgf4Fhf8nGgAo3GYaON3crODpOr2pu5dBABz69t7F5yJBBo+r6QJdeLDWEoO7r1tceR3haA7gc7eZrCvpxSXXeKpo4P+hRixo9DeOFbqQVjKyWfBg9pnrEZKzK7R437YTTwhfoySG/YOCt3fs4aXlU3FjKortqQ6XyXaD0+Y/8VoqpyU9TRW45eN4oBxAH8Y/jLnNXfELJW+/p/MgO9Z+mBli2qqAP7dV/Arc2+YZRZwtBW8/p32y5ZsEuCS4O5AAgfR7Dde7zhiGfgvurQkfAXIrUG61rmxc2EZo18ph4vaWZI+QM0JdsbNlBJlPlwf9uguujQJy0j7TgTHdtRnjybTg55Hkk9S6l2rpYahumSewKHVosa1bh2Y6r9JGkdKvIDN/eeAwScrfjoLkCxWJuFZQ53FNP5w9XbQd1HhgHcVB/0fATG3sUUid1RTfc2+7pZVKldFSsaEK0v4k90tapQOk2HIbMhaJQtrUEL5+3sDanh8sOpbYRoQoqXWu6SQcUTQL9jzOrXNPWCJwXge4U7tlU1hkF012cAmvp8llQxf1IEMcw14pURxVOWATz4ITnYQjuF+vDXg5hgoiqXzO6mS91FQUBheURHIJxUeU1i3P0WOMpsm7vFYk0JJi/Ev+X3FwYD69cARPuP5GIc0PxoAFjcLRbNur0iMTrQmBBNYJ2ngU4x7SWfdTRl52Bqv7LmYW3C1CyTCPTHeWWIAM/Whm32COHsaj+2UQ739XB9t6NV0o9E9b7CW3XNiXzi9e0KiE+3rntukdIDBWrU2jsfQWuyFJRANxq8StHVv1JPy2C3Byco7qdNbASrnNXZ8G0L/Wp/pif4Ai9aEZ9Bb+TRx+REBdGlkF/s0dUdMSMr+6YCbuGxqPWdzcdqutvqkBzCksFcwAtjf55TeuH79M6AQa7r5PLeXxMFIlQKrXP9VJ275WGX+ptpf+tvTDBsecPnYQAlAWrVbRVJ7K2pRHwIjtSpbX96Y/lbKk6ZWXlBmh15r8yAWQsYxXgBOXYMAfHnUXF+rDqnB8bXDRtAn7bCziIqetSboK3NexMePvsCRLvmsoREA+kH8j4HWFpnNEaWgOmR7xyXHfTaz3slHc/YA6H6tl/L8d5tPcIwwD0tjvRaq3Y5BmYBSDClpv0VIX4s8D0XK3sPdpAb94HjPLkgboEz9EdZATW6ZdcmQvtKUwoWw+nAVKA7IcdY1UHnvNnIBplKci+knzewLz5/GGnzkGuuGky+0LTjtGBGR85EQICDqKChnm5pH3Z44nnWAk1YRdyu3g7QoFZ0h8jkr2ffjKmi+Qvsp+9GvNGZHmgW+YQAGUw7PPt8IPKbdy432vhKtRJjKWcSqq7helj81o3nfmaxVZ7Sqie8OOBk9WsyTD/ab7fQ5aWwQeJvnH6+ayo4IdIkOSBJjzXkgr+1TPhAx1AXDsxtCCj3TzQTLA1p782f7a8vdgPfwwrXmZxxbqo2h+6Zlo6mcMY4V7cFBOLm17VCvx9Qa2tAnkxEB+KYyQgbgAAnmNDOdOO6y2Cb+lke1MWQc9o+EMdQf7ubIG3Ek8GZ4k1PtGjbhwgOMPp5Em59JMVk/jU8/aF73Xcrd3UBNZyueQu0/xz2aGtZT8CRziOax2BWFXaeDzgZNV7oRtUzFoijoETf3xkAFFk3OMb7SgPh5wxU1+MygDIp9gZChH2qEcpgLh8pBIK90PXT1ZSU+ZExFK4Vm4GL/J7+K13lS5dQkW4HQwl6GX4yLqu8GhGWS2k75yel5IZIfFNdAL0NpKr2N5dQesBnxa42DLgJd6agS1jJsp1mO1dip7PU4P6diLLoTsZ4m3Q0QweiqeFfIGPLgF6v6mSVv6xe85VBD/1Mpe3AurRbcJ9SEo8NszNVy8rOCEexyIFcJRvYAlI/wk2I7r3p60FFLQXoH2q9xri/m41svRPbW0/EnPn2DWsmk0IiPpB60aa3+hiFfWuC8ZvWKEd9LxAk3HcOof6d77RewPaPsGw5lQAHcZN2vx1448u9pLfMLGQ3BSRRjBzRhKt7HcCw/7aqjtCDs5q76b4ZGphxN2th1WeXYlfnozX3ebKtX4Te11hf1tZP1diiGjIDAB1cR4Sb9rcFPC/nBARjlgDxd+tCBb1t91j71xJcgGjT3g/dUFnXXNiDrxkyoHANPk58ACPUa42hj8tgGrhiXOCmygxFZBiT2wyAJTDJ4wJEPmp6JIrDaSWYNqv4xH2wwdSTGYb3E0pXnS39nmLUsqoVZxzSoegqzd0o06wdbTXsaHGL+IF4JtIcXddTcD/dCd8hVf+fWPSV553kjMmMEULLS8HcgmptDO955dLGX78PjiDA6IsTHPm5IA6bc5ha0gaGkoEttXuxU11B2dOJ65/Q08tEF1+Y9cr2Nh/VECfQ33GyvR/gsdN1LuIeLpKMCAF2yRr769g9/4aJLZNRI71m2S91+Kp+Q0zubTcxoG2/6gm1Q79wkMj2XNO2ui7nWw8ULtu27CCvqTGX2PffD+xcwgh/TrOKvGZMM5jRFGDTn4NO/lwnDR/GY/waDZtkWDUPI0O8ztcFVqp6r2ZW+2bvkJ3raptYagFqu95VdIaml2CIp6CKets34x+fH2C+zH4cVFO7vj+6k2FU39PtRhWluYeZ3gDz1TLB9K2v7SD9gJU1qDxoRDrAWcrFGLyndhdtd0505+gEP79adK8fmFCWNYC+ahzVNcRH79E8dA1iqX/N0qq22xcOc20ALxLDspEj4QCFBQMgaIwoKbxr0Bd7Sbws6GiRK6tqoPfpiCle23axejRLyO1I+ahsEpWrzT5ZsCyS5RcY9jMfENFxSnhKsrfW8JHH6/rdQUMfmQPT3Uz9gY0C/pu1yuCnrPUvio0a1qMEosA/EwIzzid7cqsAAAAASUVORK5CYII=");
+  opacity: 0.35;
+  filter: brightness(0.5);
+  background: transparent;
+}
\ No newline at end of file
diff --git a/generative-canyons/license.txt b/generative-canyons/license.txt
new file mode 100644
index 0000000..2ba7c9c
--- /dev/null
+++ b/generative-canyons/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/rNmjPPP)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/generative-canyons/src/index.haml b/generative-canyons/src/index.haml
new file mode 100644
index 0000000..13d3f92
--- /dev/null
+++ b/generative-canyons/src/index.haml
@@ -0,0 +1,16 @@
+#wrap
+ -9.times do
+  .box
+   -5.times do
+    .row
+     .hill
+
+
+
+
+%svg{ :version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
+ %defs
+  - (1..25).each do |i|
+   %filter.filter{:id => "filter#{i}"}
+    %feturbulence{:id => "frequency#{i}", :basefrequency => "0.025 0.0015", :numoctaves => "1", :result => "noise", :seed => "1", :type => "fractalNoise"}
+    %fedisplacementmap{:id => "displacement#{i}", :in => "SourceGraphic", :in2 => "fractalNoise", :scale => "300"}
\ No newline at end of file
diff --git a/generative-canyons/src/script.js b/generative-canyons/src/script.js
new file mode 100644
index 0000000..9ff7e17
--- /dev/null
+++ b/generative-canyons/src/script.js
@@ -0,0 +1,47 @@
+const displacement = document.querySelectorAll('fedisplacementmap');
+const frequency = document.querySelectorAll('feturbulence');
+const boxes = document.querySelectorAll('.box');
+let index = -1;
+
+document.addEventListener("DOMContentLoaded", function(){
+updateBlobs();
+document.body.classList.add('loaded');
+});
+
+document.body.addEventListener("click", function(){
+updateBlobs();
+});
+
+
+function updateBlobs(){
+   index = -1;
+   var boxCount = Math.floor(Math.random() * 9);
+   document.querySelectorAll(".filter").forEach(filter => { 
+   index += 1;
+   var displaceVal = displacement[index];
+   var freqVal = frequency[index];
+   displaceVal.setAttribute("scale", Math.max(50, Math.random() * 200));
+    freqVal.setAttribute("baseFrequency", (Math.max(100, Math.random() * 200)/11000)+' '+(Math.max(100, Math.random() * 200)/11000));
+ });
+  document.querySelectorAll(".box").forEach(box => { 
+    box.style.setProperty("--padding", Math.max(10, Math.random() * 120) + 'px');
+    box.style.setProperty("--opacity", 0);
+    box.style.setProperty("--top", Math.max(10, Math.random() * 25) + '%');
+    box.style.setProperty("--left", Math.max(10, Math.random() * 75) + '%');
+  });
+  boxes[boxCount].style.setProperty("--opacity", 1);
+  document.querySelectorAll(".row").forEach(row => { 
+    
+  row.style.setProperty("--colorA","var(--color" + Math.floor(Math.random() * 4) + ")");
+     row.style.setProperty("--colorB","var(--color" + Math.floor(Math.random() * 4) + ")");
+    row.style.setProperty("--colorC","var(--color" + Math.floor(Math.random() * 4) + ")");
+     row.style.setProperty("--colorD","var(--color" + Math.floor(Math.random() * 4) + ")");
+  row.style.setProperty("--angle", Math.floor(Math.random() * 360) + "deg");
+  row.style.setProperty("--angle1", Math.floor(Math.random() * 100)); 
+  row.style.setProperty("--angle2", Math.floor(Math.random() * 100)); 
+     row.style.setProperty("--angle3", Math.floor(Math.random() * 360) + 'deg'); 
+    row.style.setProperty("--scale", (Math.floor(Math.random() * 200) * 0.01) + 0.75);
+     row.style.setProperty("--left", Math.max(1, Math.random() * 100) + "%");
+    row.style.setProperty("--depth", Math.max(10, (Math.random() * 50))); 
+   });
+}
\ No newline at end of file
diff --git a/generative-canyons/src/style.scss b/generative-canyons/src/style.scss
new file mode 100644
index 0000000..8b438d2
--- /dev/null
+++ b/generative-canyons/src/style.scss
@@ -0,0 +1,157 @@
+$noise: url('data:image/png;base64,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');
+
+body{
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  height:100vh;
+  width:100vw;
+  --t: rgba(255,255,255,0.001);
+  --color0: #782036;
+  --color1: #d1662f;
+  --color2: #f4a645;
+  --color3: #ffd383;
+  --colorA: var(--color2);
+  --colorB: var(--color3);
+  --angle1: 25%;
+  --angle2: 50%;
+  --contrast: 1.5;
+  --blur: 0px;
+  --depth:25;
+  background:radial-gradient(circle at center, #fff, darken(#e8e6de, 10%) 500px);
+  pointer-events:none;
+  &.loaded{
+    pointer-events:all;
+    #wrap{
+      opacity:1;
+    }
+  }
+  svg{
+    position:absolute;
+  }
+  &:before{
+    content:'click me';
+    position:absolute;
+    width:100%;
+    text-align:center;
+    bottom:10px;
+    left:0;
+    font-family:'Futura', sans-serif;
+    font-size:10px;
+    color:var(--color1);
+  }
+  #wrap{
+    width:clamp(600px, 60vw, 90vh);
+    height:clamp(600px, 60vw, 90vh);
+    box-sizing:border-box;
+    display: grid;
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+    padding:20px;
+    position:relative;
+    overflow:visible;
+    transition:opacity 1s ease-in-out;
+    opacity:0;
+    .box{
+      background:linear-gradient(to bottom, darken(#b0ccd5, 10%), #b0ccd5 50%);
+      display:grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: repeat(5, 1fr);
+      background:linear-gradient(to bottom, darken(#b0ccd5, 30%), #b0ccd5 50%);
+      position:relative;
+      overflow:hidden;
+      box-sizing:border-box;
+      padding-top:var(--padding);
+      box-shadow:0 10px 30px -15px rgba(0,0,0,0.95);
+      filter:contrast(var(--contrast));
+      &:after{
+        content:'';
+        position:absolute;
+        width:100%;
+        height:100%;
+        left:0;
+        top:0;
+        z-index:0;
+        background:linear-gradient(to bottom, darken(#b0ccd5, 40%), #b0ccd5 50%);
+        mask:$noise;
+      }
+      &:before{
+        content:'';
+        position:absolute;
+        width:50px;
+        height:50px;
+        border-radius:100%;
+        background:#ffd383;
+        z-index:1;
+        box-shadow:inset 10px -10px 30px -15px rgba(0,0,0,0.35), 10px -10px 40px 0px #ffd383, 0 0 80px 10px #ffd383;
+        top:var(--top);
+        left:var(--left);
+        opacity:var(--opacity);
+      }
+      @for $i from 1 through 9{
+        &:nth-of-type(#{$i}){
+          .row{
+            @for $j from 1 through 5{
+              &:nth-of-type(#{$j}){
+                filter:blur(var(--blur)) brightness(#{1 - ($j/8)}) url(#filter#{$j + $i});
+              }
+            }
+          }
+        }
+      }
+    }
+    .row{
+      display: grid;
+      grid-template-columns:repeat(1, 1fr);;
+      grid-template-rows:1fr;
+      position:relative;
+      @for $i from 1 through 5{
+        &:nth-of-type(#{$i}){
+          z-index:#{$i + 2};
+        }
+      }
+      transform:skew(-20deg);
+      &:nth-of-type(even){
+        transform:scaleX(-1) skew(-20deg);
+      }
+      .hill, .hill:after{
+        position:absolute;
+        width:150%;
+        height:300%;
+        left:-50%;
+        top:0;
+        border-radius:100% 100% 0 0;
+        background:radial-gradient(circle at top, var(--colorA), var(--colorB));
+        box-shadow:inset 0 -5px 20px -2.5px #000, inset calc(var(--angle1) * 0.5px) calc(var(--angle2) * 0.5px) 40px calc((var(--angle1) + var(--angle2)) * -0.15px) var(--colorA), 0 calc(var(--depth) * 1px) 30px calc(var(--depth) * -1px) rgba(0,0,0,0.75);
+         mask:linear-gradient(to right, #000, rgba(0,0,0,0.75));
+        &:before{
+          content:'';
+          position:absolute;
+          width:15%;
+          height:15%;
+          border-radius:inherit;
+          mask:linear-gradient(to top, transparent, #000 50%);
+          bottom:50%;
+          background:inherit;
+          box-shadow:inset 0 -20px 40px -10px rgba(0,0,0,0.5), inset calc(var(--angle1) * 1px) calc(var(--angle2) * 1px) 40px calc((var(--angle1) + var(--angle2)) * -0.25px) var(--colorA), 0 calc(var(--depth) * 2px) 30px calc(var(--depth) * -10px) rgba(0,0,0,0.75);
+          transform:scale(var(--scale));
+          left:var(--left);
+          transform-origin:bottom;
+        }
+      }
+      .hill:after{
+        content:'';
+        top:0;
+        left:0;
+        width:100%;
+        height:100%;
+        mask:$noise;
+        opacity:0.35;
+        filter:brightness(0.5);
+        background:transparent;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/generative-customisable-svg-social-images/README.markdown b/generative-customisable-svg-social-images/README.markdown
new file mode 100644
index 0000000..eaabdf1
--- /dev/null
+++ b/generative-customisable-svg-social-images/README.markdown
@@ -0,0 +1,9 @@
+# Generative + Customisable SVG Social Images!
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/georgedoescode/pen/PoGLmmX](https://codepen.io/georgedoescode/pen/PoGLmmX).
+
+I think these could be really handy for startups / blogs with limited design resources. Or really anyone that finds creating social/meta images a drag!
+
+I might even make it into a "full" app some day... 
+
+A full tutorial for this pen can be found here https://dev.to/georgedoescode/tutorial-create-generative-social-images-using-svg-2c47 ✨
diff --git a/generative-customisable-svg-social-images/dist/index.html b/generative-customisable-svg-social-images/dist/index.html
new file mode 100644
index 0000000..e927e85
--- /dev/null
+++ b/generative-customisable-svg-social-images/dist/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Generative + Customisable SVG Social Images!</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="wrapper">
+  <div class="wrapper__inner">
+    <svg viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg" class="social-image">
+      <style>
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+
+        .social-image {
+          --align-text-x: flex-start;
+          --align-text-y: flex-end;
+
+          width: 100%;
+          background: #f5f7fa;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+          line-height: 1;
+        }
+
+        .social-image__html {
+          display: flex;
+          height: 100%;
+          justify-content: var(--align-text-x);
+          align-items: var(--align-text-y);
+          padding: 72px;
+
+        }
+
+        .social-image__text {
+          max-width: 700px;
+        }
+
+        .social-image__title {
+          font-size: 56px;
+          line-height: 68px;
+          font-weight: 800;
+          margin-bottom: 24px;
+          letter-spacing: -0.0125em;
+          outline: none;
+        }
+
+        .social-image__meta {
+          grid-column: 2;
+          font-weight: 500;
+          font-size: 24px;
+          line-height: 36px;
+          outline: none;
+          letter-spacing: -0.0125em;
+        }
+      </style>
+      <g>
+        <foreignObject x="0" y="0" width="1200" height="630">
+          <div class="social-image__html">
+            <div class="social-image__text">
+              <h1 xmlns="http://www.w3.org/1999/xhtml" class="social-image__title" contentEditable>All of this text is editable...
+                click on it and start typing!</h1>
+              <h2 xmlns="http://www.w3.org/1999/xhtml" class="social-image__meta" contentEditable>As you type, the background will adapt itself to the text, making sure the shapes never overlap.</h2>
+            </div>
+          </div>
+        </foreignObject>
+      </g>
+    </svg>
+  </div>
+  <div class="controls">
+
+    <div class="controls__randomize">
+      <p class="controls__label">Randomize:</p>
+      <button class="controls__btn controls__btn--alignment">Alignment</button>
+      <button class="controls__btn controls__btn--colors">Colors</button>
+      <button class="controls__btn controls__btn--shapes">Shapes</button>
+    </div>
+    <button class="controls__btn controls__btn--save">Save</button>
+    <p class="controls__saving-disabled">Saving is disabled on mobile devices</p>
+  </div>
+
+</div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/generative-customisable-svg-social-images/dist/script.js b/generative-customisable-svg-social-images/dist/script.js
new file mode 100644
index 0000000..e304698
--- /dev/null
+++ b/generative-customisable-svg-social-images/dist/script.js
@@ -0,0 +1,239 @@
+import { SVG } from "https://cdn.skypack.dev/@svgdotjs/svg.js";
+import html2canvas from "https://cdn.skypack.dev/html2canvas@1.0.0-rc.7";
+import ResizeObserver from "https://cdn.skypack.dev/resize-observer-polyfill@1.5.1";
+import FileSaver from "https://cdn.skypack.dev/file-saver@2.0.5";
+
+console.clear();
+
+const socialImageSVG = document.querySelector(".social-image");
+const socialImageTitle = document.querySelector(".social-image__title");
+const socialImageMeta = document.querySelector(".social-image__meta");
+
+const saveBtn = document.querySelector(".controls__btn--save");
+const alignmentBtn = document.querySelector(".controls__btn--alignment");
+const colorBtn = document.querySelector(".controls__btn--colors");
+const shapesBtn = document.querySelector(".controls__btn--shapes");
+
+let baseColor;
+let baseColorWhite;
+let baseColorBlack;
+
+let complimentaryColor1;
+let complimentaryColor2;
+
+let shapeColors;
+
+const alignmentOpts = ["flex-start", "flex-end", "center"];
+
+const shapes = SVG(socialImageSVG).group();
+
+setColors();
+generate();
+
+const resizeObserver = new ResizeObserver(() => {
+  generate();
+});
+
+resizeObserver.observe(socialImageTitle);
+resizeObserver.observe(socialImageMeta);
+
+function generate() {
+  shapes.clear();
+
+  const htmlRects = [
+    relativeBounds(socialImageSVG, socialImageTitle),
+    relativeBounds(socialImageSVG, socialImageMeta)
+  ];
+
+  const rects = generateRandomRects(htmlRects);
+
+  for (const rect of rects.slice(2, rects.length)) {
+    drawRandomShape(rect);
+  }
+}
+
+function setColors() {
+  const baseHue = random(0, 360);
+  const saturation = random(60, 90);
+
+  baseColor = `hsl(${baseHue}, ${saturation}%, 60%)`;
+  baseColorWhite = `hsl(${baseHue}, ${saturation}%, 97%)`;
+  baseColorBlack = `hsl(${baseHue}, 95%, 3%)`;
+
+  complimentaryColor1 = `hsl(${baseHue + 90}, ${saturation}%, 60%)`;
+  complimentaryColor2 = `hsl(${baseHue + 180}, ${saturation}%, 60%)`;
+
+  shapeColors = [complimentaryColor1, complimentaryColor2, baseColor];
+
+  socialImageSVG.style.background = baseColorWhite;
+  socialImageSVG.style.color = baseColorBlack;
+}
+
+function drawRandomShape({ x, y, width, height }) {
+  const shapeChoices = ["rect", "ellipse", "triangle"];
+  let shape;
+
+  switch (shapeChoices[~~random(0, shapeChoices.length)]) {
+    case "ellipse":
+      shape = shapes.ellipse(width, height).x(x).y(y);
+      break;
+    case "triangle":
+      shape = shapes
+        .polygon(`0 ${height}, ${width / 2} 0, ${width} ${height}`)
+        .x(x)
+        .y(y);
+      break;
+    default:
+      shape = shapes.rect(width, height).x(x).y(y);
+  }
+
+  const color = randomColor();
+
+  if (random(0, 1) > 0.25) {
+    shape.fill(color);
+  } else {
+    shape
+      .stroke({
+        color,
+        width: 16
+      })
+      .fill("transparent");
+  }
+
+  shape.node.classList.add("shape");
+  shape.rotate(random(0, 90)).scale(0.825);
+  shape.opacity(random(0.5, 1));
+}
+
+function randomColor() {
+  return shapeColors[~~random(0, shapeColors.length)];
+}
+
+function randomAlignment() {
+  return alignmentOpts[~~random(0, alignmentOpts.length)];
+}
+
+function generateRandomRects(existing) {
+  const rects = [...existing];
+  const tries = 250;
+  const maxShapes = 6;
+
+  for (let i = 0; i < tries; i++) {
+    if (rects.length === maxShapes + existing.length) break;
+
+    const size = random(100, 600);
+
+    const rect = {
+      x: random(-size, 1200),
+      y: random(-size, 630),
+      width: size,
+      height: size
+    };
+
+    if (!rects.some((r) => detectRectCollision(r, rect))) {
+      rects.push(rect);
+    }
+  }
+
+  return rects;
+}
+
+function random(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+function detectRectCollision(rect1, rect2, padding = 32) {
+  return (
+    rect1.x < rect2.x + rect2.width + padding &&
+    rect1.x + rect1.width + padding > rect2.x &&
+    rect1.y < rect2.y + rect2.height + padding &&
+    rect1.y + rect1.height + padding > rect2.y
+  );
+}
+
+function relativeBounds(svg, HTMLElement) {
+  const { x, y, width, height } = HTMLElement.getBoundingClientRect();
+
+  const startPoint = svg.createSVGPoint();
+  startPoint.x = x;
+  startPoint.y = y;
+
+  const endPoint = svg.createSVGPoint();
+  endPoint.x = x + width;
+  endPoint.y = y + height;
+
+  const startPointTransformed = startPoint.matrixTransform(
+    svg.getScreenCTM().inverse()
+  );
+  const endPointTransformed = endPoint.matrixTransform(
+    svg.getScreenCTM().inverse()
+  );
+
+  return {
+    x: startPointTransformed.x,
+    y: startPointTransformed.y,
+    width: endPointTransformed.x - startPointTransformed.x,
+    height: endPointTransformed.y - startPointTransformed.y
+  };
+}
+
+// regenerate our shapes and shape positions
+shapesBtn.addEventListener("click", () => {
+  generate();
+});
+
+// set new random color values and update the existing shapes with these colors
+colorBtn.addEventListener("click", () => {
+  setColors();
+
+  // find all the shapes in our svg and update their fill / stroke
+  socialImageSVG.querySelectorAll(".shape").forEach((node) => {
+    if (node.getAttribute("stroke")) {
+      node.setAttribute("stroke", randomColor());
+    } else {
+      node.setAttribute("fill", randomColor());
+    }
+  });
+});
+
+// choose random new alignment options and update the CSS custom properties, regenerate the shapes
+alignmentBtn.addEventListener("click", () => {
+  socialImageSVG.style.setProperty(
+    "--align-text-x",
+    alignmentOpts[~~random(0, alignmentOpts.length)]
+  );
+  socialImageSVG.style.setProperty(
+    "--align-text-y",
+    alignmentOpts[~~random(0, alignmentOpts.length)]
+  );
+  generate();
+});
+
+// save our social image as a .png file
+saveBtn.addEventListener("click", () => {
+  const bounds = socialImageSVG.getBoundingClientRect();
+
+  // on save, update the dimensions of our social image so that it exports as expected
+  socialImageSVG.style.width = "1200px";
+  socialImageSVG.style.height = "630px";
+  socialImageSVG.setAttribute("width", 1200);
+  socialImageSVG.setAttribute("height", 630);
+  // this fixes an odd visual "cut off" bug when exporting
+  window.scrollTo(0, 0);
+
+  html2canvas(document.querySelector(".wrapper__inner"), {
+    width: 1200,
+    height: 630,
+    scale: 2 // export our image at 2x resolution so it is nice and crisp on retina devices
+  }).then((canvas) => {
+    canvas.toBlob(function (blob) {
+      // restore the social image styles
+      socialImageSVG.style.width = "100%";
+      socialImageSVG.style.height = "auto";
+      socialImageSVG.setAttribute("width", "");
+      socialImageSVG.setAttribute("height", "");
+
+      FileSaver.saveAs(blob, "generative-social-image.png");
+    });
+  });
+});
\ No newline at end of file
diff --git a/generative-customisable-svg-social-images/dist/style.css b/generative-customisable-svg-social-images/dist/style.css
new file mode 100644
index 0000000..70d04cc
--- /dev/null
+++ b/generative-customisable-svg-social-images/dist/style.css
@@ -0,0 +1,130 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --black: hsl(0, 0%, 10%);
+}
+
+body {
+  width: 100vw;
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 2rem;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: var(--black);
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.wrapper {
+  width: 100%;
+  max-width: 60rem;
+  min-width: 20rem;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 2rem 0;
+}
+
+.controls__label {
+  margin-right: 1rem;
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.controls__randomize {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.controls__btn {
+  width: 8rem;
+  height: 2.25rem;
+  margin-right: 1rem;
+  background: #fff;
+  border-radius: 0;
+  border: none;
+  border: 2px solid var(--black);
+  font-family: inherit;
+  color: var(--black);
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.controls__btn:hover {
+  background: var(--black);
+  color: #fff;
+}
+
+.controls__btn--save {
+  position: relative;
+  margin-left: auto;
+  margin-right: 0;
+  background: var(--black);
+  color: #fff;
+}
+
+.controls__btn--save:hover {
+  background: #fff;
+  color: var(--black);
+}
+
+.controls__saving-disabled {
+  font-size: 0.875rem;
+  margin-top: 2rem;
+  font-weight: 500;
+  display: none;
+  font-style: italic;
+}
+
+@media only screen and (max-width: 800px) {
+  body {
+    padding: 0.75rem;
+  }
+
+  .controls__btn {
+    width: 6rem;
+    height: 2rem;
+    font-size: 0.875rem;
+    margin-top: 0.75rem;
+  }
+
+  .controls__label {
+    font-size: 0.875rem;
+    margin-right: 0.5rem;
+    width: 100%;
+  }
+  .controls__btn--save {
+    width: 100%;
+    margin-top: 1.25rem;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .controls__btn {
+    margin-right: 0.5rem;
+  }
+
+  .controls__btn--save {
+    display: none;
+  }
+
+  .controls__saving-disabled {
+    width: 100%;
+    display: block;
+  }
+}
\ No newline at end of file
diff --git a/generative-customisable-svg-social-images/license.txt b/generative-customisable-svg-social-images/license.txt
new file mode 100644
index 0000000..3be11ff
--- /dev/null
+++ b/generative-customisable-svg-social-images/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by George Francis (https://codepen.io/georgedoescode/pen/PoGLmmX)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/generative-customisable-svg-social-images/src/index.html b/generative-customisable-svg-social-images/src/index.html
new file mode 100644
index 0000000..92cff6a
--- /dev/null
+++ b/generative-customisable-svg-social-images/src/index.html
@@ -0,0 +1,77 @@
+<div class="wrapper">
+  <div class="wrapper__inner">
+    <svg viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg" class="social-image">
+      <style>
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+
+        .social-image {
+          --align-text-x: flex-start;
+          --align-text-y: flex-end;
+
+          width: 100%;
+          background: #f5f7fa;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+          line-height: 1;
+        }
+
+        .social-image__html {
+          display: flex;
+          height: 100%;
+          justify-content: var(--align-text-x);
+          align-items: var(--align-text-y);
+          padding: 72px;
+
+        }
+
+        .social-image__text {
+          max-width: 700px;
+        }
+
+        .social-image__title {
+          font-size: 56px;
+          line-height: 68px;
+          font-weight: 800;
+          margin-bottom: 24px;
+          letter-spacing: -0.0125em;
+          outline: none;
+        }
+
+        .social-image__meta {
+          grid-column: 2;
+          font-weight: 500;
+          font-size: 24px;
+          line-height: 36px;
+          outline: none;
+          letter-spacing: -0.0125em;
+        }
+      </style>
+      <g>
+        <foreignObject x="0" y="0" width="1200" height="630">
+          <div class="social-image__html">
+            <div class="social-image__text">
+              <h1 xmlns="http://www.w3.org/1999/xhtml" class="social-image__title" contentEditable>All of this text is editable...
+                click on it and start typing!</h1>
+              <h2 xmlns="http://www.w3.org/1999/xhtml" class="social-image__meta" contentEditable>As you type, the background will adapt itself to the text, making sure the shapes never overlap.</h2>
+            </div>
+          </div>
+        </foreignObject>
+      </g>
+    </svg>
+  </div>
+  <div class="controls">
+
+    <div class="controls__randomize">
+      <p class="controls__label">Randomize:</p>
+      <button class="controls__btn controls__btn--alignment">Alignment</button>
+      <button class="controls__btn controls__btn--colors">Colors</button>
+      <button class="controls__btn controls__btn--shapes">Shapes</button>
+    </div>
+    <button class="controls__btn controls__btn--save">Save</button>
+    <p class="controls__saving-disabled">Saving is disabled on mobile devices</p>
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/generative-customisable-svg-social-images/src/script.js b/generative-customisable-svg-social-images/src/script.js
new file mode 100644
index 0000000..17adf62
--- /dev/null
+++ b/generative-customisable-svg-social-images/src/script.js
@@ -0,0 +1,239 @@
+import { SVG } from "https://cdn.skypack.dev/@svgdotjs/svg.js";
+import html2canvas from "https://cdn.skypack.dev/html2canvas@1.0.0-rc.7";
+import ResizeObserver from "https://cdn.skypack.dev/resize-observer-polyfill@1.5.1";
+import FileSaver from "https://cdn.skypack.dev/file-saver@2.0.5";
+
+console.clear();
+
+const socialImageSVG = document.querySelector(".social-image");
+const socialImageTitle = document.querySelector(".social-image__title");
+const socialImageMeta = document.querySelector(".social-image__meta");
+
+const saveBtn = document.querySelector(".controls__btn--save");
+const alignmentBtn = document.querySelector(".controls__btn--alignment");
+const colorBtn = document.querySelector(".controls__btn--colors");
+const shapesBtn = document.querySelector(".controls__btn--shapes");
+
+let baseColor;
+let baseColorWhite;
+let baseColorBlack;
+
+let complimentaryColor1;
+let complimentaryColor2;
+
+let shapeColors;
+
+const alignmentOpts = ["flex-start", "flex-end", "center"];
+
+const shapes = SVG(socialImageSVG).group();
+
+setColors();
+generate();
+
+const resizeObserver = new ResizeObserver(() => {
+  generate();
+});
+
+resizeObserver.observe(socialImageTitle);
+resizeObserver.observe(socialImageMeta);
+
+function generate() {
+  shapes.clear();
+
+  const htmlRects = [
+    relativeBounds(socialImageSVG, socialImageTitle),
+    relativeBounds(socialImageSVG, socialImageMeta)
+  ];
+
+  const rects = generateRandomRects(htmlRects);
+
+  for (const rect of rects.slice(2, rects.length)) {
+    drawRandomShape(rect);
+  }
+}
+
+function setColors() {
+  const baseHue = random(0, 360);
+  const saturation = random(60, 90);
+
+  baseColor = `hsl(${baseHue}, ${saturation}%, 60%)`;
+  baseColorWhite = `hsl(${baseHue}, ${saturation}%, 97%)`;
+  baseColorBlack = `hsl(${baseHue}, 95%, 3%)`;
+
+  complimentaryColor1 = `hsl(${baseHue + 90}, ${saturation}%, 60%)`;
+  complimentaryColor2 = `hsl(${baseHue + 180}, ${saturation}%, 60%)`;
+
+  shapeColors = [complimentaryColor1, complimentaryColor2, baseColor];
+
+  socialImageSVG.style.background = baseColorWhite;
+  socialImageSVG.style.color = baseColorBlack;
+}
+
+function drawRandomShape({ x, y, width, height }) {
+  const shapeChoices = ["rect", "ellipse", "triangle"];
+  let shape;
+
+  switch (shapeChoices[~~random(0, shapeChoices.length)]) {
+    case "ellipse":
+      shape = shapes.ellipse(width, height).x(x).y(y);
+      break;
+    case "triangle":
+      shape = shapes
+        .polygon(`0 ${height}, ${width / 2} 0, ${width} ${height}`)
+        .x(x)
+        .y(y);
+      break;
+    default:
+      shape = shapes.rect(width, height).x(x).y(y);
+  }
+
+  const color = randomColor();
+
+  if (random(0, 1) > 0.25) {
+    shape.fill(color);
+  } else {
+    shape
+      .stroke({
+        color,
+        width: 16
+      })
+      .fill("transparent");
+  }
+
+  shape.node.classList.add("shape");
+  shape.rotate(random(0, 90)).scale(0.825);
+  shape.opacity(random(0.5, 1));
+}
+
+function randomColor() {
+  return shapeColors[~~random(0, shapeColors.length)];
+}
+
+function randomAlignment() {
+  return alignmentOpts[~~random(0, alignmentOpts.length)];
+}
+
+function generateRandomRects(existing) {
+  const rects = [...existing];
+  const tries = 250;
+  const maxShapes = 6;
+
+  for (let i = 0; i < tries; i++) {
+    if (rects.length === maxShapes + existing.length) break;
+
+    const size = random(100, 600);
+
+    const rect = {
+      x: random(-size, 1200),
+      y: random(-size, 630),
+      width: size,
+      height: size
+    };
+
+    if (!rects.some((r) => detectRectCollision(r, rect))) {
+      rects.push(rect);
+    }
+  }
+
+  return rects;
+}
+
+function random(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+function detectRectCollision(rect1, rect2, padding = 32) {
+  return (
+    rect1.x < rect2.x + rect2.width + padding &&
+    rect1.x + rect1.width + padding > rect2.x &&
+    rect1.y < rect2.y + rect2.height + padding &&
+    rect1.y + rect1.height + padding > rect2.y
+  );
+}
+
+function relativeBounds(svg, HTMLElement) {
+  const { x, y, width, height } = HTMLElement.getBoundingClientRect();
+
+  const startPoint = svg.createSVGPoint();
+  startPoint.x = x;
+  startPoint.y = y;
+
+  const endPoint = svg.createSVGPoint();
+  endPoint.x = x + width;
+  endPoint.y = y + height;
+
+  const startPointTransformed = startPoint.matrixTransform(
+    svg.getScreenCTM().inverse()
+  );
+  const endPointTransformed = endPoint.matrixTransform(
+    svg.getScreenCTM().inverse()
+  );
+
+  return {
+    x: startPointTransformed.x,
+    y: startPointTransformed.y,
+    width: endPointTransformed.x - startPointTransformed.x,
+    height: endPointTransformed.y - startPointTransformed.y
+  };
+}
+
+// regenerate our shapes and shape positions
+shapesBtn.addEventListener("click", () => {
+  generate();
+});
+
+// set new random color values and update the existing shapes with these colors
+colorBtn.addEventListener("click", () => {
+  setColors();
+
+  // find all the shapes in our svg and update their fill / stroke
+  socialImageSVG.querySelectorAll(".shape").forEach((node) => {
+    if (node.getAttribute("stroke")) {
+      node.setAttribute("stroke", randomColor());
+    } else {
+      node.setAttribute("fill", randomColor());
+    }
+  });
+});
+
+// choose random new alignment options and update the CSS custom properties, regenerate the shapes
+alignmentBtn.addEventListener("click", () => {
+  socialImageSVG.style.setProperty(
+    "--align-text-x",
+    alignmentOpts[~~random(0, alignmentOpts.length)]
+  );
+  socialImageSVG.style.setProperty(
+    "--align-text-y",
+    alignmentOpts[~~random(0, alignmentOpts.length)]
+  );
+  generate();
+});
+
+// save our social image as a .png file
+saveBtn.addEventListener("click", () => {
+  const bounds = socialImageSVG.getBoundingClientRect();
+
+  // on save, update the dimensions of our social image so that it exports as expected
+  socialImageSVG.style.width = "1200px";
+  socialImageSVG.style.height = "630px";
+  socialImageSVG.setAttribute("width", 1200);
+  socialImageSVG.setAttribute("height", 630);
+  // this fixes an odd visual "cut off" bug when exporting
+  window.scrollTo(0, 0);
+
+  html2canvas(document.querySelector(".wrapper__inner"), {
+    width: 1200,
+    height: 630,
+    scale: 2 // export our image at 2x resolution so it is nice and crisp on retina devices
+  }).then((canvas) => {
+    canvas.toBlob(function (blob) {
+      // restore the social image styles
+      socialImageSVG.style.width = "100%";
+      socialImageSVG.style.height = "auto";
+      socialImageSVG.setAttribute("width", "");
+      socialImageSVG.setAttribute("height", "");
+
+      FileSaver.saveAs(blob, "generative-social-image.png");
+    });
+  });
+});
diff --git a/generative-customisable-svg-social-images/src/style.css b/generative-customisable-svg-social-images/src/style.css
new file mode 100644
index 0000000..17503f5
--- /dev/null
+++ b/generative-customisable-svg-social-images/src/style.css
@@ -0,0 +1,130 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --black: hsl(0, 0%, 10%);
+}
+
+body {
+  width: 100vw;
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 2rem;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: var(--black);
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.wrapper {
+  width: 100%;
+  max-width: 60rem;
+  min-width: 20rem;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 2rem 0;
+}
+
+.controls__label {
+  margin-right: 1rem;
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.controls__randomize {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.controls__btn {
+  width: 8rem;
+  height: 2.25rem;
+  margin-right: 1rem;
+  background: #fff;
+  border-radius: 0;
+  border: none;
+  border: 2px solid var(--black);
+  font-family: inherit;
+  color: var(--black);
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.controls__btn:hover {
+  background: var(--black);
+  color: #fff;
+}
+
+.controls__btn--save {
+  position: relative;
+  margin-left: auto;
+  margin-right: 0;
+  background: var(--black);
+  color: #fff;
+}
+
+.controls__btn--save:hover {
+  background: #fff;
+  color: var(--black);
+}
+
+.controls__saving-disabled {
+  font-size: 0.875rem;
+  margin-top: 2rem;
+  font-weight: 500;
+  display: none;
+  font-style: italic;
+}
+
+@media only screen and (max-width: 800px) {
+  body {
+    padding: 0.75rem;
+  }
+
+  .controls__btn {
+    width: 6rem;
+    height: 2rem;
+    font-size: 0.875rem;
+    margin-top: 0.75rem;
+  }
+
+  .controls__label {
+    font-size: 0.875rem;
+    margin-right: 0.5rem;
+    width: 100%;
+  }
+  .controls__btn--save {
+    width: 100%;
+    margin-top: 1.25rem;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .controls__btn {
+    margin-right: 0.5rem;
+  }
+
+  .controls__btn--save {
+    display: none;
+  }
+
+  .controls__saving-disabled {
+    width: 100%;
+    display: block;
+  }
+}
diff --git a/generative-poster-v-css/README.markdown b/generative-poster-v-css/README.markdown
new file mode 100644
index 0000000..7b566c6
--- /dev/null
+++ b/generative-poster-v-css/README.markdown
@@ -0,0 +1,4 @@
+# Generative Poster V (CSS)
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/meodai/pen/PgMQMq](https://codepen.io/meodai/pen/PgMQMq).
+
+ Done using border radius, inspired by zach lieberman's work!
\ No newline at end of file
diff --git a/generative-poster-v-css/dist/index.html b/generative-poster-v-css/dist/index.html
new file mode 100644
index 0000000..5f2e040
--- /dev/null
+++ b/generative-poster-v-css/dist/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Generative Poster V (CSS)</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="app" ref="app" class="section" v-bind:style="{
+  '--s-padding': padding,
+  '--iterations': iterations,
+  '--s-rotation': rotation,         
+  '--bg-rotation': bgrotation,
+  '--s-rotationAlternation': rotalt,
+  '--waves': waves,
+}">
+  <div ref="wrap" class="section__inner" v-bind:style="{background: background}">
+    <div v-for="i in iteration" class="blob" v-bind:key="i" v-bind:style="{
+      '--c-bg': colorSrc[i],
+      '--c-bg2': colorSrc[i+1],
+      '--noise': Math.sqrt(noise.noise2D(noisePos + i*.01,i*.2)),
+      '--noiseAbs': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.11,i*.02))),
+    }">
+      <i v-for="j in stack" v-bind:key="j" class="blob__inner" v-bind:style="{             '--pos': j/stack,
+        '--noise1': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.1 + .3,i*.3 + j/stack * density))),
+        '--noise2': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.2 - .6,i*.25 + j/stack * density))),
+        '--noise3': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.3 + .2,i*.1 + j/stack * density))),
+        '--noise4': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.4 + .1,i*.4 + j/stack * density))),
+        '--sin': Math.sin(j/stack * 18 + i),
+      }">
+      
+      </i>  
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/generative-poster-v-css/dist/script.js b/generative-poster-v-css/dist/script.js
new file mode 100644
index 0000000..4827636
--- /dev/null
+++ b/generative-poster-v-css/dist/script.js
@@ -0,0 +1,113 @@
+new Vue({
+  el: '#app',
+  data: function () {return {
+      // things that will not show up in datGUI (for internal use)
+      colorSrc: [],
+      noise: new SimplexNoise(3.13),
+      reverse: false,
+      padding: 1.7,
+      iteration: 20,
+      stop1: '0%',
+      stop2: '100%',
+      // things that will show up in that gui
+      settings: {
+        seed: { value: 0.22557154953429298, min: 0, max: 1, fn: val => {
+            this.noise = new SimplexNoise(val);
+            this.colorSrc = new Array(Math.round(this.iteration + 2)).fill().map(
+            (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(this.iterations * i, this.noisePos) * 16711680))).hex());
+
+          } },
+        noisePos: { value: .4421, min: 0, max: 4, fn: val => {
+            this.colorSrc = new Array(Math.round(this.iteration + 2)).fill().map(
+            (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(this.iterations * i, val) * 16711680))).hex());
+
+
+            this.noiseVal1 = this.noise.noise2D(0, val);
+            this.noiseVal2 = this.noise.noise2D(val, 0);
+          } },
+        iterations: { value: 20, min: 2, max: 20, fn: val => {
+            this.iteration = Math.round(val);
+            this.colorSrc = new Array(Math.round(val + 2)).fill().map(
+            (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex());
+
+          } },
+        stack: { value: 70, min: 30, max: 400, fn: val => {
+            this.stack = Math.round(val);
+            this.colorSrc = new Array(Math.round(val + 2)).fill().map(
+            (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex());
+
+          } },
+        density: { value: 2, min: 0, max: 10, fn: val => {
+            this.density = val;
+            this.colorSrc = new Array(Math.round(val + 2)).fill().map(
+            (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex());
+
+          } },
+        waves: { value: .7, min: 0, max: 3, fn: val => {
+            this.colorSrc = new Array(Math.round(val + 2)).fill().map(
+            (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex());
+
+          } },
+        animate: { value: false },
+        rotation: { value: 250, min: 0, max: 1024, fn: () => {
+            this.colorSrc = [...this.colorSrc];
+          } },
+        bgrotation: { value: 90, min: 0, max: 359, fn: () => {
+            this.colorSrc = [...this.colorSrc];
+          } },
+        alternate: { value: false, fn: val => {
+            this.rotalt = val ? -1 : 1;
+            this.colorSrc = [...this.colorSrc];
+          } },
+        padding: { value: 1.7, min: 0, max: 4 },
+        background: { value: '#ff6464', color: true, fn: () => {
+            this.colorSrc = [...this.colorSrc];
+          } } } };
+
+  },
+  created() {
+    this.buildGui();
+  },
+  mounted() {
+    this.draw();
+    this.anim();
+  },
+  computed: {
+    colors: function () {
+      // returns a function that takes a int between 0-1 
+      let colors = [...this.colorSrc];
+      if (this.reverse) {
+        colors.reverse();
+      }
+      return chroma.scale(this.colorSrc);
+    } },
+
+  methods: {
+    buildGui: function () {
+      // builds the datgui things
+      const gui = new dat.GUI();
+      Object.keys(this.settings).forEach(key => {
+        this[key] = this.settings[key].value;
+        const method = this.settings[key].hasOwnProperty('color') ? 'addColor' : 'add';
+        const guiProp = gui[method](this, key, this.settings[key].hasOwnProperty('min') ? this.settings[key].min : 0, this.settings[key].hasOwnProperty('max') ? this.settings[key].max : 1);
+        guiProp.onChange(value => {
+          if (this.settings[key].hasOwnProperty('fn')) {
+            this.settings[key].fn(value);
+          }
+        });
+        if (this.settings[key].hasOwnProperty('fn')) {
+          this.settings[key].fn(this.settings[key].value);
+        }
+      });
+    },
+    draw: function () {
+
+    },
+    anim: function () {
+      requestAnimationFrame(this.anim);
+      if (!this.animate) return;
+      // if you intend to animate something 
+      // do it here:
+      this.noisePos += 0.01;
+      this.settings.noisePos.fn(this.noisePos);
+    } } });
\ No newline at end of file
diff --git a/generative-poster-v-css/dist/style.css b/generative-poster-v-css/dist/style.css
new file mode 100644
index 0000000..55c06a2
--- /dev/null
+++ b/generative-poster-v-css/dist/style.css
@@ -0,0 +1,81 @@
+@import url("https://rsms.me/inter/inter.css");
+:root {
+  --font: 'Inter', sans-serif;
+  font-size: calc(.6rem + .4vh);
+  background: #ffffff;
+  font-family: var(--font);
+  -webkit-font-feature-settings: "dlig" 0, "numr" 0, "dnom" 0, "tnum" , "case" 0, "zero" 0, "frac", "sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01", "ss02" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "calt", "liga", "kern";
+          font-feature-settings: "dlig" 0, "numr" 0, "dnom" 0, "tnum" , "case" 0, "zero" 0, "frac", "sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01", "ss02" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "calt", "liga", "kern";
+}
+
+body {
+  overflow: hidden;
+}
+
+.spacer {
+  flex-grow: 1;
+}
+
+.section {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  --s-pad: calc(var(--s-padding) * 2rem);
+}
+.section__inner {
+  overflow: hidden;
+  -webkit-perspective: 1200;
+          perspective: 1200;
+  background: #212121;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 85vh;
+  width: 70vh;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(30, 1fr);
+  grid-gap: 0vw;
+  grid-auto-flow: dense;
+  justify-items: stretch;
+  align-items: end;
+  padding: 65vh var(--s-pad) calc(var(--s-pad) * 2);
+  box-sizing: border-box;
+}
+
+.blob {
+  position: relative;
+  padding: calc(var(--s-padding) * .25rem);
+  -webkit-transform-origin: 50% 80%;
+          transform-origin: 50% 80%;
+  height: 10vh;
+}
+.blob__inner {
+  position: absolute;
+  bottom: 50%;
+  left: calc(var(--s-padding) * .5rem);
+  right: calc(var(--s-padding) * .5rem);
+  -webkit-transform: translateY(calc(var(--pos) * -60vh));
+          transform: translateY(calc(var(--pos) * -60vh));
+}
+.blob__inner:last-child::before {
+  z-index: 2;
+  background: linear-gradient(45deg, #212121, black);
+}
+.blob__inner::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding-top: 100%;
+  background: linear-gradient(calc(var(--bg-rotation) * 1deg), silver, white);
+  -webkit-transform: translateY(50%) translateX(calc(var(--sin)*var(--waves)*30%*var(--noise3))) scale(calc(.4 + var(--noise1) * .8)) rotate(calc(var(--noise1) * var(--s-rotation) * 1deg));
+          transform: translateY(50%) translateX(calc(var(--sin)*var(--waves)*30%*var(--noise3))) scale(calc(.4 + var(--noise1) * .8)) rotate(calc(var(--noise1) * var(--s-rotation) * 1deg));
+  border-radius: calc(30% + var(--noise1) * 70%) calc(100% - var(--noise1) * 70%) calc(30% + var(--noise2) * 70%) calc(100% - var(--noise2) * 70%)/calc(30% + var(--noise3) * 70%) calc(100% - var(--noise4) * 70%) calc(30% + var(--noise4) * 70%) calc(100% - var(--noise3) * 70%);
+}
diff --git a/generative-poster-v-css/license.txt b/generative-poster-v-css/license.txt
new file mode 100644
index 0000000..e4d5dec
--- /dev/null
+++ b/generative-poster-v-css/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by David A. (https://codepen.io/meodai/pen/PgMQMq)
+
+
+Fork of an original work by David A. (https://codepen.io/meodai/pen/oORgJP)
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/generative-poster-v-css/src/index.html b/generative-poster-v-css/src/index.html
new file mode 100644
index 0000000..243fc17
--- /dev/null
+++ b/generative-poster-v-css/src/index.html
@@ -0,0 +1,27 @@
+<div id="app" ref="app" class="section" v-bind:style="{
+  '--s-padding': padding,
+  '--iterations': iterations,
+  '--s-rotation': rotation,         
+  '--bg-rotation': bgrotation,
+  '--s-rotationAlternation': rotalt,
+  '--waves': waves,
+}">
+  <div ref="wrap" class="section__inner" v-bind:style="{background: background}">
+    <div v-for="i in iteration" class="blob" v-bind:key="i" v-bind:style="{
+      '--c-bg': colorSrc[i],
+      '--c-bg2': colorSrc[i+1],
+      '--noise': Math.sqrt(noise.noise2D(noisePos + i*.01,i*.2)),
+      '--noiseAbs': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.11,i*.02))),
+    }">
+      <i v-for="j in stack" v-bind:key="j" class="blob__inner" v-bind:style="{             '--pos': j/stack,
+        '--noise1': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.1 + .3,i*.3 + j/stack * density))),
+        '--noise2': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.2 - .6,i*.25 + j/stack * density))),
+        '--noise3': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.3 + .2,i*.1 + j/stack * density))),
+        '--noise4': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.4 + .1,i*.4 + j/stack * density))),
+        '--sin': Math.sin(j/stack * 18 + i),
+      }">
+      
+      </i>  
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/generative-poster-v-css/src/script.babel b/generative-poster-v-css/src/script.babel
new file mode 100644
index 0000000..6d748bb
--- /dev/null
+++ b/generative-poster-v-css/src/script.babel
@@ -0,0 +1,116 @@
+new Vue({
+  el: '#app',
+  data: function () { return {
+    // things that will not show up in datGUI (for internal use)
+    colorSrc: [],
+    noise: new SimplexNoise(3.13),
+    reverse: false,
+    padding: 1.7,
+    iteration: 20,
+    stop1: '0%',
+    stop2: '100%',
+    // things that will show up in that gui
+    settings: {
+      seed: {value: 0.22557154953429298, min: 0, max:1, fn: (val) => {
+        this.noise = new SimplexNoise(val);
+        this.colorSrc = new Array(Math.round(this.iteration + 2)).fill().map(
+          (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(this.iterations * i, this.noisePos) * 16711680))).hex()
+        )
+      }},
+      noisePos: {value: .4421, min: 0, max: 4, fn: (val) => {
+        this.colorSrc = new Array(Math.round(this.iteration + 2)).fill().map(
+          (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(this.iterations * i, val) * 16711680))).hex()
+        )
+        
+        this.noiseVal1 = this.noise.noise2D(0, val);
+        this.noiseVal2 = this.noise.noise2D(val, 0);
+      }},
+      iterations: {value: 20, min: 2, max: 20, fn: (val) => {
+        this.iteration = Math.round(val);
+        this.colorSrc = new Array(Math.round(val + 2)).fill().map(
+          (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex()
+        );
+      }},
+      stack: {value: 70, min: 30, max: 400, fn: (val) => {
+        this.stack = Math.round(val);
+        this.colorSrc = new Array(Math.round(val + 2)).fill().map(
+          (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex()
+        );
+      }},
+      density: {value: 2, min: 0, max: 10, fn: (val) => {
+        this.density = val;
+        this.colorSrc = new Array(Math.round(val + 2)).fill().map(
+          (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex()
+        );
+      }},
+      waves: {value: .7, min: 0, max: 3, fn: (val) => {
+        this.colorSrc = new Array(Math.round(val + 2)).fill().map(
+          (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex()
+        );
+      }},
+      animate: {value: false},
+      rotation: {value: 250, min: 0, max: 1024, fn: () => {
+        this.colorSrc = [...this.colorSrc];
+      }},
+      bgrotation: {value: 90, min: 0, max: 359, fn: () => {
+        this.colorSrc = [...this.colorSrc];
+      }},
+      alternate: {value: false, fn: (val) => {
+        this.rotalt = val ? -1 : 1;
+        this.colorSrc = [...this.colorSrc];
+      }},
+      padding: {value: 1.7, min: 0, max: 4},
+      background: {value: '#ff6464', color: true, fn: () => {
+        this.colorSrc = [...this.colorSrc];
+      }},
+    },
+  }},
+  created() {
+    this.buildGui();
+  },
+  mounted () {
+    this.draw();
+    this.anim();
+  },
+  computed: {
+    colors: function(){
+      // returns a function that takes a int between 0-1 
+      let colors = [...this.colorSrc];
+      if(this.reverse) {
+        colors.reverse();
+      }
+      return chroma.scale(this.colorSrc);
+    },
+  },
+  methods: {
+    buildGui: function() {
+      // builds the datgui things
+      const gui = new dat.GUI();
+      Object.keys(this.settings).forEach(key => {
+        this[key] = this.settings[key].value;
+        const method = this.settings[key].hasOwnProperty('color') ? 'addColor' : 'add';
+        const guiProp = gui[method](this, key, this.settings[key].hasOwnProperty('min') ? this.settings[key].min : 0,  this.settings[key].hasOwnProperty('max') ? this.settings[key].max : 1);
+        guiProp.onChange((value) => {
+          if (this.settings[key].hasOwnProperty('fn')) {
+            this.settings[key].fn(value);
+          }
+        });
+        if (this.settings[key].hasOwnProperty('fn')) {
+          this.settings[key].fn(this.settings[key].value);
+        }
+      });
+    },
+    draw: function () {
+      
+    },
+    anim: function () {
+      requestAnimationFrame(this.anim);
+      if ( !this.animate ) return;
+      // if you intend to animate something 
+      // do it here:
+      this.noisePos += 0.01;
+      this.settings.noisePos.fn(this.noisePos);
+    },
+  }
+});
+
diff --git a/generative-poster-v-css/src/style.scss b/generative-poster-v-css/src/style.scss
new file mode 100644
index 0000000..33f683d
--- /dev/null
+++ b/generative-poster-v-css/src/style.scss
@@ -0,0 +1,95 @@
+@import url('https://rsms.me/inter/inter.css');
+
+:root {
+  --font: 'Inter', sans-serif; 
+  font-size: calc(.6rem + .4vh);
+  background: #ffffff;
+  font-family: var(--font);
+  font-feature-settings: "dlig" 0, "numr" 0, "dnom" 0, "tnum" , "case" 0, "zero" 0, "frac", "sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01", "ss02" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "calt", "liga", "kern";
+}
+
+body {
+  overflow: hidden;
+}
+
+.spacer {
+  flex-grow: 1; 
+}
+
+.section {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  --s-pad: calc(var(--s-padding) * 2rem);
+  
+  &__inner {
+    overflow: hidden;
+    perspective: 1200;
+    background: #212121;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 85vh;
+    width: 70vh;
+    transform: translate(-50%,-50%);
+    box-shadow: 0 0 2rem rgba(0,0,0,.25);
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(30, 1fr);
+    grid-gap: 0vw;
+    grid-auto-flow: dense;
+    justify-items: stretch;
+    align-items: end;
+    //grid-row-gap: 5vw;
+    //justify-items: center;
+    //align-content: end;
+    //align-content: space-between;
+    
+    padding: 65vh var(--s-pad) calc(var(--s-pad) * 2);
+    box-sizing: border-box;
+    
+  }
+}
+
+.blob {
+  position: relative;
+  padding: calc(var(--s-padding) * .25rem);
+  //transform: translateZ(calc(var(--noise) * -1250px));
+  //transform: scaleY(calc(var(--noiseAbs)));
+  transform-origin: 50% 80%;
+  //transform-origin: 50vw 50vh;
+  
+  //box-shadow: inset 0 0 0 2rem red;
+  height: 10vh;
+  &__inner {
+    position: absolute;
+    bottom: 50%;
+    left: calc(var(--s-padding) * .5rem); 
+    right: calc(var(--s-padding) * .5rem);
+    transform: translateY(calc(var(--pos) * -60vh));
+    
+    &:last-child::before {
+      z-index: 2;
+      background: linear-gradient(45deg, #212121, black);
+    }
+    &:nth-child(2n + 1) {
+      &::before {
+        //background: rgba(#212121,.03);
+      }
+    }
+    &::before {
+      //box-shadow: inset 0 0 0 1px rgba(#212121,.05);
+      
+      content: '';
+      position: absolute;
+      bottom: 0; left: 0; right: 0;
+      padding-top: 100%;
+      background: linear-gradient(calc(var(--bg-rotation) * 1deg), silver, white);
+      transform: translateY(50%) translateX(calc(var(--sin)*var(--waves)*30%*var(--noise3))) scale(calc(.4 + var(--noise1) * .8)) rotate(calc(var(--noise1) * var(--s-rotation) * 1deg));
+      border-radius: calc(30% + var(--noise1) * 70%) calc(100% - var(--noise1) * 70%) calc(30% + var(--noise2) * 70%) calc(100% - var(--noise2) * 70%) / calc(30% + var(--noise3) * 70%) calc(100% - var(--noise4) * 70%) calc(30% + var(--noise4) * 70%) calc(100% - var(--noise3) * 70%);
+      
+    }
+  }
+}
diff --git a/generative-quadtree-based-grid-layouts/README.markdown b/generative-quadtree-based-grid-layouts/README.markdown
new file mode 100644
index 0000000..d9c59c0
--- /dev/null
+++ b/generative-quadtree-based-grid-layouts/README.markdown
@@ -0,0 +1,7 @@
+# Generative Quadtree Based Grid Layouts ✨
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/georgedoescode/pen/YzZgKyO](https://codepen.io/georgedoescode/pen/YzZgKyO).
+
+Generative layouts created using random quadtrees- I'm thinking of writing a post about these soon, so keep an eye out!
+
+Note: This method is very much inspired by Pentagram's work on Graphcore's branding // https://www.pentagram.com/work/graphcore/story
diff --git a/generative-quadtree-based-grid-layouts/dist/index.html b/generative-quadtree-based-grid-layouts/dist/index.html
new file mode 100644
index 0000000..4e178b4
--- /dev/null
+++ b/generative-quadtree-based-grid-layouts/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Generative Quadtree Based Grid Layouts ✨</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/generative-quadtree-based-grid-layouts/dist/script.js b/generative-quadtree-based-grid-layouts/dist/script.js
new file mode 100644
index 0000000..8f4ea76
--- /dev/null
+++ b/generative-quadtree-based-grid-layouts/dist/script.js
@@ -0,0 +1,98 @@
+import Quadtree from "https://cdn.skypack.dev/@timohausmann/quadtree-js@1.2.4";
+import { SVG } from "https://cdn.skypack.dev/@svgdotjs/svg.js";
+import { random } from "https://cdn.skypack.dev/@georgedoescode/generative-utils";
+
+const width = 1024;
+const height = 1024;
+
+const svg = SVG().viewbox(0, 0, width, height).addTo("body");
+
+const colors = ["#7257fa", "#ffd53d", "#1D1934", "#F25C54"];
+
+function generate() {
+  svg.clear();
+
+  const myTree = new Quadtree(
+    {
+      x: 0,
+      y: 0,
+      width: width,
+      height: height
+    },
+    10,
+    4
+  );
+
+  let focus;
+  const choice = Math.random();
+
+  if (choice > 0 && choice < 0.1) {
+    focus = [width / 2, height / 2];
+  } else if (choice > 0.1 && choice < 0.4) {
+    focus = [0, 0];
+  } else if (choice > 0.4 && choice < 0.6) {
+    focus = [width, 0];
+  } else if (choice > 0.6 && choice < 0.8) {
+    focus = [width, height];
+  } else {
+    focus = [0, height];
+  }
+
+  for (let i = 0; i < 100; i++) {
+    let x = getRandomBias(0, width, focus[0], 1);
+    let y = getRandomBias(0, height, focus[1], 1);
+
+    myTree.insert({
+      x,
+      y,
+      width: 1,
+      height: 1
+    });
+  }
+
+  const cells = [];
+  function renderQuadTree(node) {
+    const bounds = node.bounds;
+    const threshold = random(0.25, 0.75);
+
+    if (node.nodes.length === 0) {
+      const padding = 16;
+
+      if (Math.random() > threshold) {
+        if (Math.random() > 0.5) {
+          svg
+            .rect(bounds.width - padding * 2, bounds.height - padding * 2)
+            .x(bounds.x + padding)
+            .y(bounds.y + padding)
+            .fill(random(colors))
+            .scale(1)
+            .rx(12);
+        } else {
+          svg
+            .circle(Math.min(bounds.width, bounds.height) - padding * 2)
+            .x(bounds.x + padding)
+            .y(bounds.y + padding)
+            .fill(random(colors))
+            .scale(1);
+        }
+      }
+    } else {
+      for (var i = 0; i < node.nodes.length; i = i + 1) {
+        renderQuadTree(node.nodes[i], node);
+      }
+    }
+  }
+
+  renderQuadTree(myTree);
+}
+
+function getRandomBias(min, max, bias, influence = 0.5) {
+  const base = random(min, max);
+  const mix = random(0, 1) * influence;
+
+  return base * (1 - mix) + bias * mix;
+}
+
+setInterval(() => {
+  generate();
+}, 1000);
\ No newline at end of file
diff --git a/generative-quadtree-based-grid-layouts/dist/style.css b/generative-quadtree-based-grid-layouts/dist/style.css
new file mode 100644
index 0000000..630cdf6
--- /dev/null
+++ b/generative-quadtree-based-grid-layouts/dist/style.css
@@ -0,0 +1,17 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  display: grid;
+  place-items: center;
+}
+
+svg {
+  width: 75vmin;
+  height: 75vmin;
+  overflow: visible;
+}
\ No newline at end of file
diff --git a/generative-quadtree-based-grid-layouts/license.txt b/generative-quadtree-based-grid-layouts/license.txt
new file mode 100644
index 0000000..be9ae7e
--- /dev/null
+++ b/generative-quadtree-based-grid-layouts/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by George Francis (https://codepen.io/georgedoescode/pen/YzZgKyO)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/generative-quadtree-based-grid-layouts/src/index.html b/generative-quadtree-based-grid-layouts/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/generative-quadtree-based-grid-layouts/src/script.js b/generative-quadtree-based-grid-layouts/src/script.js
new file mode 100644
index 0000000..0b1920d
--- /dev/null
+++ b/generative-quadtree-based-grid-layouts/src/script.js
@@ -0,0 +1,98 @@
+import Quadtree from "https://cdn.skypack.dev/@timohausmann/quadtree-js@1.2.4";
+import { SVG } from "https://cdn.skypack.dev/@svgdotjs/svg.js";
+import { random } from "https://cdn.skypack.dev/@georgedoescode/generative-utils";
+
+const width = 1024;
+const height = 1024;
+
+const svg = SVG().viewbox(0, 0, width, height).addTo("body");
+
+const colors = ["#7257fa", "#ffd53d", "#1D1934", "#F25C54"];
+
+function generate() {
+  svg.clear();
+
+  const myTree = new Quadtree(
+    {
+      x: 0,
+      y: 0,
+      width: width,
+      height: height
+    },
+    10,
+    4
+  );
+
+  let focus;
+  const choice = Math.random();
+
+  if (choice > 0 && choice < 0.1) {
+    focus = [width / 2, height / 2];
+  } else if (choice > 0.1 && choice < 0.4) {
+    focus = [0, 0];
+  } else if (choice > 0.4 && choice < 0.6) {
+    focus = [width, 0];
+  } else if (choice > 0.6 && choice < 0.8) {
+    focus = [width, height];
+  } else {
+    focus = [0, height];
+  }
+
+  for (let i = 0; i < 100; i++) {
+    let x = getRandomBias(0, width, focus[0], 1);
+    let y = getRandomBias(0, height, focus[1], 1);
+
+    myTree.insert({
+      x,
+      y,
+      width: 1,
+      height: 1
+    });
+  }
+
+  const cells = [];
+  function renderQuadTree(node) {
+    const bounds = node.bounds;
+    const threshold = random(0.25, 0.75);
+
+    if (node.nodes.length === 0) {
+      const padding = 16;
+
+      if (Math.random() > threshold) {
+        if (Math.random() > 0.5) {
+          svg
+            .rect(bounds.width - padding * 2, bounds.height - padding * 2)
+            .x(bounds.x + padding)
+            .y(bounds.y + padding)
+            .fill(random(colors))
+            .scale(1)
+            .rx(12);
+        } else {
+          svg
+            .circle(Math.min(bounds.width, bounds.height) - padding * 2)
+            .x(bounds.x + padding)
+            .y(bounds.y + padding)
+            .fill(random(colors))
+            .scale(1);
+        }
+      }
+    } else {
+      for (var i = 0; i < node.nodes.length; i = i + 1) {
+        renderQuadTree(node.nodes[i], node);
+      }
+    }
+  }
+
+  renderQuadTree(myTree);
+}
+
+function getRandomBias(min, max, bias, influence = 0.5) {
+  const base = random(min, max);
+  const mix = random(0, 1) * influence;
+
+  return base * (1 - mix) + bias * mix;
+}
+
+setInterval(() => {
+  generate();
+}, 1000);
diff --git a/generative-quadtree-based-grid-layouts/src/style.css b/generative-quadtree-based-grid-layouts/src/style.css
new file mode 100644
index 0000000..a4a1e94
--- /dev/null
+++ b/generative-quadtree-based-grid-layouts/src/style.css
@@ -0,0 +1,17 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  display: grid;
+  place-items: center;
+}
+
+svg {
+  width: 75vmin;
+  height: 75vmin;
+  overflow: visible;
+}
diff --git a/generative-re-arranging-grids-with-gsap-flip/README.markdown b/generative-re-arranging-grids-with-gsap-flip/README.markdown
new file mode 100644
index 0000000..a74d162
--- /dev/null
+++ b/generative-re-arranging-grids-with-gsap-flip/README.markdown
@@ -0,0 +1,7 @@
+# Generative Re-arranging Grids with GSAP FLIP 💚
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/georgedoescode/pen/dyVvWRy](https://codepen.io/georgedoescode/pen/dyVvWRy).
+
+A generative grid layout that magically re-arranges itself when you move your device pointer! 
+
+Created using GSAP FLIP, the process involves creating random Quadtree data structures with objects focused around the current pointer position, using those Quadtrees to create CSS grid layouts, filling those grids with items, then animating them. 
diff --git a/generative-re-arranging-grids-with-gsap-flip/dist/index.html b/generative-re-arranging-grids-with-gsap-flip/dist/index.html
new file mode 100644
index 0000000..709bae6
--- /dev/null
+++ b/generative-re-arranging-grids-with-gsap-flip/dist/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Generative Re-arranging Grids with GSAP FLIP 💚</title>
+  <link rel="stylesheet" href="https://unpkg.com/open-props"/>
+
+<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="grid">
+</div>
+
+<div class="tracker">+</div>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
+<script src='https://assets.codepen.io/16327/Flip.min.js'></script><script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/generative-re-arranging-grids-with-gsap-flip/dist/script.js b/generative-re-arranging-grids-with-gsap-flip/dist/script.js
new file mode 100644
index 0000000..49303e3
--- /dev/null
+++ b/generative-re-arranging-grids-with-gsap-flip/dist/script.js
@@ -0,0 +1,195 @@
+import {
+  randomBias,
+  randomSnap,
+  random,
+  createQtGrid,
+  map
+} from "https://cdn.skypack.dev/@georgedoescode/generative-utils";
+import debounce from "https://cdn.skypack.dev/debounce@1.2.1";
+
+gsap.registerPlugin(Flip);
+
+const gridElement = document.querySelector(".grid");
+
+const width = 1920;
+const height = 1080;
+
+const mousePos = {
+  x: 0,
+  y: 0
+};
+
+let isAnimating = false;
+
+// create an initial quadtree grid
+let lastGrid = generateGrid({
+  x: random(0, width),
+  y: random(0, height)
+});
+
+// set the grid column/rows for each element in the grid and create the elements
+lastGrid.areas.forEach((area, index) => {
+  const el = document.createElement("div");
+
+  el.style.gridColumn = `${area.col.start + 1} / ${area.col.end + 1}`;
+  el.style.gridRow = `${area.row.start + 1} / ${area.row.end + 1}`;
+
+  area.el = el;
+
+  gridElement.appendChild(el);
+});
+
+// drop some images onto the grid
+const imageUrls = [
+  "https://images.unsplash.com/photo-1481253127861-534498168948?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NDc0OA&ixlib=rb-1.2.1&q=85&w=1024",
+  "https://images.unsplash.com/photo-1483959651481-dc75b89291f1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NTI4OQ&ixlib=rb-1.2.1&q=85&w=1024",
+  "https://images.unsplash.com/photo-1525438160292-a4a860951216?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NDc0OA&ixlib=rb-1.2.1&q=85&w=1024",
+  "https://images.unsplash.com/photo-1563192504-36ac622196dd?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NDc5OA&ixlib=rb-1.2.1&q=85&w=1024",
+  "https://images.unsplash.com/photo-1509018877337-3af7dd307ea9?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NDgwOA&ixlib=rb-1.2.1&q=85&w=1024",
+  "https://images.unsplash.com/photo-1498322787346-775f77e49b2e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NDgyNQ&ixlib=rb-1.2.1&q=85&w=1024",
+  "https://images.unsplash.com/photo-1532456745301-b2c645d8b80d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NTE2NQ&ixlib=rb-1.2.1&q=85&w=1024"
+];
+
+for (let i = 0; i < imageUrls.length; i++) {
+  const area = random(lastGrid.areas.filter((a) => !a.taken));
+
+  area.el.style.backgroundImage = `url(${imageUrls[i]})`;
+  area.el.style.filter = "grayscale(1)";
+
+  // mark areas as "taken" so that they are not used twice
+  area.taken = true;
+}
+
+// add a little instruction to one of the cells
+const instructionCell = random(lastGrid.areas.filter((a) => !a.taken));
+instructionCell.taken = true;
+instructionCell.el.innerHTML = "MOVE THE POINTER!";
+instructionCell.el.classList.add("instruction");
+
+// add a splash of color to one of the cells
+const colorCell = random(lastGrid.areas.filter((a) => !a.taken));
+colorCell.taken = true;
+colorCell.el.style.background = "yellow";
+
+// add some random words to the grid
+["GSAP", "FLIP!", "GRIDS", "GENERATIVE"].map((word, idx) => {
+  const choice = random(lastGrid.areas.filter((a) => !a.taken));
+
+  choice.el.innerHTML = word;
+
+  choice.taken = true;
+});
+
+// add some shapes to all remaining areas
+lastGrid.areas
+  .filter((a) => !a.taken)
+  .forEach((area) => {
+    if (random(0, 1) > 0.375) {
+      switch (random(["left", "right", "bottom", "top"])) {
+        case "top":
+          area.el.style.borderTop = "var(--stroke-width) solid #000";
+          break;
+        case "left":
+          area.el.style.borderLeft = "var(--stroke-width) solid #000";
+          break;
+        case "bottom":
+          area.el.style.borderBottom = "var(--stroke-width) solid #000";
+          break;
+        case "right":
+          area.el.style.borderRight = "var(--stroke-width) solid #000";
+          break;
+      }
+    } else {
+      if (random(0, 1) > 0.25) {
+        area.el.classList.add("circle");
+
+        if (random(0, 1) > 0.75) {
+          area.el.classList.add("circle--outline");
+        }
+      }
+    }
+  });
+
+function updateItems() {
+  const focus = {
+    x: mousePos.x,
+    y: mousePos.y
+  };
+
+  // save the current state
+  const state = Flip.getState(".grid div", {
+    props: "backgroundImage"
+  });
+
+  // generate a new grid with the same amount of cells
+  let grid2;
+
+  while (grid2?.areas.length !== lastGrid.areas.length) {
+    grid2 = generateGrid(focus);
+  }
+
+  // update the grid cols/rows of each cell
+  gridElement.querySelectorAll("div").forEach((el, idx) => {
+    const area = grid2.areas[idx];
+
+    if (!area) return;
+
+    el.style.gridColumn = `${area.col.start + 1} / ${area.col.end + 1}`;
+    el.style.gridRow = `${area.row.start + 1} / ${area.row.end + 1}`;
+  });
+
+  // FLIP!
+  Flip.from(state, {
+    duration: 1.25,
+    ease: "power4.inOut",
+    absolute: true,
+    simple: false,
+    stagger: 0.01,
+    onComplete: (e) => {
+      isAnimating = false;
+    }
+  });
+
+  lastGrid = grid2;
+}
+
+// create a quadtree grid with random points/object centered around the mouse position
+function generateGrid(focus) {
+  const points = [...Array(128)].map(() => {
+    return {
+      x: randomBias(0, width, focus.x, 1),
+      y: randomBias(0, height, focus.y, 1),
+      width: 1,
+      height: 1
+    };
+  });
+
+  return createQtGrid({ width, height, points, maxQtLevels: 4 });
+}
+
+// on mouse move, create a new quadtree grid centered around the pointer position and update
+function onMouseMove(e) {
+  if (isAnimating) return;
+
+  const { clientX, clientY } = e;
+
+  mousePos.x = map(clientX, 0, window.innerWidth, 0, width);
+  mousePos.y = map(clientY, 0, window.innerHeight, 0, height);
+
+  updateItems();
+
+  isAnimating = true;
+}
+
+window.addEventListener("pointermove", debounce(onMouseMove, 250));
+
+window.addEventListener("pointermove", (e) => {
+  gsap.to(".tracker", {
+    x: e.clientX,
+    y: e.clientY,
+    opacity: 1,
+    duration: 0.25,
+    ease: "sine.out",
+    transformOrigin: "50%"
+  });
+});
\ No newline at end of file
diff --git a/generative-re-arranging-grids-with-gsap-flip/dist/style.css b/generative-re-arranging-grids-with-gsap-flip/dist/style.css
new file mode 100644
index 0000000..fb20e6d
--- /dev/null
+++ b/generative-re-arranging-grids-with-gsap-flip/dist/style.css
@@ -0,0 +1,77 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  --stroke-width: clamp(4px, 0.5vw, 8px);
+
+  display: grid;
+  place-items: center;
+  background: #f1f1f1;
+  font-family: "Space Mono";
+  font-weight: 700;
+  font-size: clamp(0.75rem, 1.25vw, 1.5rem);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.grid {
+  width: 100vw;
+  min-height: 100vh;
+  display: grid;
+  gap: clamp(0.75rem, 1.5vw, 2rem);
+  padding: clamp(0.75rem, 1.5vw, 2rem);
+  background: #fff;
+  grid-column: 1;
+}
+
+.grid div {
+  position: relative;
+  background-size: cover;
+  background-position: center center;
+}
+
+.grid div:hover {
+  opacity: 0.5;
+}
+
+.circle:after {
+  position: absolute;
+  content: "";
+  top: 50%;
+  left: 50%;
+  width: 20%;
+  aspect-ratio: 1 / 1;
+  background: #000;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.circle--outline:after {
+  background: #fff;
+  border: var(--stroke-width) solid #000;
+}
+
+.tracker {
+  position: fixed;
+  top: 0;
+  left: 0;
+  font-size: 3rem;
+  line-height: 3rem;
+  transform: translate(-50%, -50%);
+  color: red;
+  font-weight: 400;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.instruction {
+  text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.125rem;
+  color: blue;
+}
\ No newline at end of file
diff --git a/generative-re-arranging-grids-with-gsap-flip/license.txt b/generative-re-arranging-grids-with-gsap-flip/license.txt
new file mode 100644
index 0000000..e14cf0d
--- /dev/null
+++ b/generative-re-arranging-grids-with-gsap-flip/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by George Francis (https://codepen.io/georgedoescode/pen/dyVvWRy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/generative-re-arranging-grids-with-gsap-flip/src/index.html b/generative-re-arranging-grids-with-gsap-flip/src/index.html
new file mode 100644
index 0000000..01c9d5e
--- /dev/null
+++ b/generative-re-arranging-grids-with-gsap-flip/src/index.html
@@ -0,0 +1,4 @@
+<div class="grid">
+</div>
+
+<div class="tracker">+</div>
\ No newline at end of file
diff --git a/generative-re-arranging-grids-with-gsap-flip/src/script.js b/generative-re-arranging-grids-with-gsap-flip/src/script.js
new file mode 100644
index 0000000..22f821e
--- /dev/null
+++ b/generative-re-arranging-grids-with-gsap-flip/src/script.js
@@ -0,0 +1,195 @@
+import {
+  randomBias,
+  randomSnap,
+  random,
+  createQtGrid,
+  map
+} from "https://cdn.skypack.dev/@georgedoescode/generative-utils";
+import debounce from "https://cdn.skypack.dev/debounce@1.2.1";
+
+gsap.registerPlugin(Flip);
+
+const gridElement = document.querySelector(".grid");
+
+const width = 1920;
+const height = 1080;
+
+const mousePos = {
+  x: 0,
+  y: 0
+};
+
+let isAnimating = false;
+
+// create an initial quadtree grid
+let lastGrid = generateGrid({
+  x: random(0, width),
+  y: random(0, height)
+});
+
+// set the grid column/rows for each element in the grid and create the elements
+lastGrid.areas.forEach((area, index) => {
+  const el = document.createElement("div");
+
+  el.style.gridColumn = `${area.col.start + 1} / ${area.col.end + 1}`;
+  el.style.gridRow = `${area.row.start + 1} / ${area.row.end + 1}`;
+
+  area.el = el;
+
+  gridElement.appendChild(el);
+});
+
+// drop some images onto the grid
+const imageUrls = [
+  "https://images.unsplash.com/photo-1481253127861-534498168948?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NDc0OA&ixlib=rb-1.2.1&q=85&w=1024",
+  "https://images.unsplash.com/photo-1483959651481-dc75b89291f1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NTI4OQ&ixlib=rb-1.2.1&q=85&w=1024",
+  "https://images.unsplash.com/photo-1525438160292-a4a860951216?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NDc0OA&ixlib=rb-1.2.1&q=85&w=1024",
+  "https://images.unsplash.com/photo-1563192504-36ac622196dd?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NDc5OA&ixlib=rb-1.2.1&q=85&w=1024",
+  "https://images.unsplash.com/photo-1509018877337-3af7dd307ea9?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NDgwOA&ixlib=rb-1.2.1&q=85&w=1024",
+  "https://images.unsplash.com/photo-1498322787346-775f77e49b2e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NDgyNQ&ixlib=rb-1.2.1&q=85&w=1024",
+  "https://images.unsplash.com/photo-1532456745301-b2c645d8b80d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTU4NTE2NQ&ixlib=rb-1.2.1&q=85&w=1024"
+];
+
+for (let i = 0; i < imageUrls.length; i++) {
+  const area = random(lastGrid.areas.filter((a) => !a.taken));
+
+  area.el.style.backgroundImage = `url(${imageUrls[i]})`;
+  area.el.style.filter = "grayscale(1)";
+
+  // mark areas as "taken" so that they are not used twice
+  area.taken = true;
+}
+
+// add a little instruction to one of the cells
+const instructionCell = random(lastGrid.areas.filter((a) => !a.taken));
+instructionCell.taken = true;
+instructionCell.el.innerHTML = "MOVE THE POINTER!";
+instructionCell.el.classList.add("instruction");
+
+// add a splash of color to one of the cells
+const colorCell = random(lastGrid.areas.filter((a) => !a.taken));
+colorCell.taken = true;
+colorCell.el.style.background = "yellow";
+
+// add some random words to the grid
+["GSAP", "FLIP!", "GRIDS", "GENERATIVE"].map((word, idx) => {
+  const choice = random(lastGrid.areas.filter((a) => !a.taken));
+
+  choice.el.innerHTML = word;
+
+  choice.taken = true;
+});
+
+// add some shapes to all remaining areas
+lastGrid.areas
+  .filter((a) => !a.taken)
+  .forEach((area) => {
+    if (random(0, 1) > 0.375) {
+      switch (random(["left", "right", "bottom", "top"])) {
+        case "top":
+          area.el.style.borderTop = "var(--stroke-width) solid #000";
+          break;
+        case "left":
+          area.el.style.borderLeft = "var(--stroke-width) solid #000";
+          break;
+        case "bottom":
+          area.el.style.borderBottom = "var(--stroke-width) solid #000";
+          break;
+        case "right":
+          area.el.style.borderRight = "var(--stroke-width) solid #000";
+          break;
+      }
+    } else {
+      if (random(0, 1) > 0.25) {
+        area.el.classList.add("circle");
+
+        if (random(0, 1) > 0.75) {
+          area.el.classList.add("circle--outline");
+        }
+      }
+    }
+  });
+
+function updateItems() {
+  const focus = {
+    x: mousePos.x,
+    y: mousePos.y
+  };
+
+  // save the current state
+  const state = Flip.getState(".grid div", {
+    props: "backgroundImage"
+  });
+
+  // generate a new grid with the same amount of cells
+  let grid2;
+
+  while (grid2?.areas.length !== lastGrid.areas.length) {
+    grid2 = generateGrid(focus);
+  }
+
+  // update the grid cols/rows of each cell
+  gridElement.querySelectorAll("div").forEach((el, idx) => {
+    const area = grid2.areas[idx];
+
+    if (!area) return;
+
+    el.style.gridColumn = `${area.col.start + 1} / ${area.col.end + 1}`;
+    el.style.gridRow = `${area.row.start + 1} / ${area.row.end + 1}`;
+  });
+
+  // FLIP!
+  Flip.from(state, {
+    duration: 1.25,
+    ease: "power4.inOut",
+    absolute: true,
+    simple: false,
+    stagger: 0.01,
+    onComplete: (e) => {
+      isAnimating = false;
+    }
+  });
+
+  lastGrid = grid2;
+}
+
+// create a quadtree grid with random points/object centered around the mouse position
+function generateGrid(focus) {
+  const points = [...Array(128)].map(() => {
+    return {
+      x: randomBias(0, width, focus.x, 1),
+      y: randomBias(0, height, focus.y, 1),
+      width: 1,
+      height: 1
+    };
+  });
+
+  return createQtGrid({ width, height, points, maxQtLevels: 4 });
+}
+
+// on mouse move, create a new quadtree grid centered around the pointer position and update
+function onMouseMove(e) {
+  if (isAnimating) return;
+
+  const { clientX, clientY } = e;
+
+  mousePos.x = map(clientX, 0, window.innerWidth, 0, width);
+  mousePos.y = map(clientY, 0, window.innerHeight, 0, height);
+
+  updateItems();
+
+  isAnimating = true;
+}
+
+window.addEventListener("pointermove", debounce(onMouseMove, 250));
+
+window.addEventListener("pointermove", (e) => {
+  gsap.to(".tracker", {
+    x: e.clientX,
+    y: e.clientY,
+    opacity: 1,
+    duration: 0.25,
+    ease: "sine.out",
+    transformOrigin: "50%"
+  });
+});
diff --git a/generative-re-arranging-grids-with-gsap-flip/src/style.css b/generative-re-arranging-grids-with-gsap-flip/src/style.css
new file mode 100644
index 0000000..79b6066
--- /dev/null
+++ b/generative-re-arranging-grids-with-gsap-flip/src/style.css
@@ -0,0 +1,77 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  --stroke-width: clamp(4px, 0.5vw, 8px);
+
+  display: grid;
+  place-items: center;
+  background: #f1f1f1;
+  font-family: "Space Mono";
+  font-weight: 700;
+  font-size: clamp(0.75rem, 1.25vw, 1.5rem);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.grid {
+  width: 100vw;
+  min-height: 100vh;
+  display: grid;
+  gap: clamp(0.75rem, 1.5vw, 2rem);
+  padding: clamp(0.75rem, 1.5vw, 2rem);
+  background: #fff;
+  grid-column: 1;
+}
+
+.grid div {
+  position: relative;
+  background-size: cover;
+  background-position: center center;
+}
+
+.grid div:hover {
+  opacity: 0.5;
+}
+
+.circle:after {
+  position: absolute;
+  content: "";
+  top: 50%;
+  left: 50%;
+  width: 20%;
+  aspect-ratio: 1 / 1;
+  background: #000;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.circle--outline:after {
+  background: #fff;
+  border: var(--stroke-width) solid #000;
+}
+
+.tracker {
+  position: fixed;
+  top: 0;
+  left: 0;
+  font-size: 3rem;
+  line-height: 3rem;
+  transform: translate(-50%, -50%);
+  color: red;
+  font-weight: 400;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.instruction {
+  text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.125rem;
+  color: blue;
+}
diff --git a/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/README.markdown b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/README.markdown
new file mode 100644
index 0000000..7e900d4
--- /dev/null
+++ b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/README.markdown
@@ -0,0 +1,4 @@
+# Generative Sketch w/ CSS Variables + repeating-linear-gradient + Sass random for cpc-generative and codepenchallenge 
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/artyschein/pen/gOpxeZJ](https://codepen.io/artyschein/pen/gOpxeZJ).
+
+ 
\ No newline at end of file
diff --git a/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/dist/index.html b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/dist/index.html
new file mode 100644
index 0000000..e0dec5c
--- /dev/null
+++ b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Generative Sketch w/ CSS Variables + repeating-linear-gradient + Sass random for cpc-generative and codepenchallenge </title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class='artboard'></div>
+<a class='collection' href='https://codepen.io/collection/AryRaN/' target='_blank'>Stripped art<br>collection</a>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/dist/script.js b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/dist/script.js
new file mode 100644
index 0000000..b075d04
--- /dev/null
+++ b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/dist/script.js
@@ -0,0 +1,9 @@
+var column;
+for (column = 0; column < 15; column++) {
+  CSS.registerProperty({
+    name: `--column-${column}`,
+    syntax: '<length>',
+    initialValue: '0px',
+    inherits: true });
+
+}
\ No newline at end of file
diff --git a/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/dist/style.css b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/dist/style.css
new file mode 100644
index 0000000..4aeae42
--- /dev/null
+++ b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/dist/style.css
@@ -0,0 +1,3463 @@
+@import url("https://fonts.googleapis.com/css?family=Anton");
+body {
+  height: 100vh;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+  background: #333;
+}
+
+.collection {
+  font-family: "Anton", Sans-serif;
+  color: #EDEED1;
+  display: inline-block;
+  position: fixed;
+  bottom: 15px;
+  right: 15px;
+  font-size: 18px;
+  text-decoration: none;
+  text-align: center;
+  line-height: 0.9;
+}
+.collection::first-line {
+  color: #EDEED1;
+  font-size: 14px;
+  text-transform: uppercase;
+}
+
+.artboard {
+  width: 340px;
+  height: 340px;
+  border: 20px solid #f1f1f1;
+  box-shadow: 0 2px 15px 5px rgba(241, 241, 241, 0.15);
+  background-repeat: repeat-y;
+  background-size: 23px 100%;
+  --column-0: 0px;
+  --column-1: -3px;
+  --column-2: 4px;
+  --column-3: -6px;
+  --column-4: 8px;
+  --column-5: -15px;
+  --column-6: 6px;
+  --column-7: -21px;
+  --column-8: 40px;
+  --column-9: -36px;
+  --column-10: 10px;
+  --column-11: -33px;
+  --column-12: 36px;
+  --column-13: -52px;
+  --column-14: 70px;
+  background-image: repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px), repeating-linear-gradient(#571744 0px 23px, #900a3e 23px 46px, #c70038 46px 69px, #ff5733 69px 92px, #EDEED1 92px 115px);
+  background-position: 0px var(--column-0), 23px var(--column-1), 46px var(--column-2), 69px var(--column-3), 92px var(--column-4), 115px var(--column-5), 138px var(--column-6), 161px var(--column-7), 184px var(--column-8), 207px var(--column-9), 230px var(--column-10), 253px var(--column-11), 276px var(--column-12), 299px var(--column-13), 322px var(--column-14);
+  -webkit-animation: animateColumns 30s linear infinite alternate;
+          animation: animateColumns 30s linear infinite alternate;
+}
+
+@-webkit-keyframes animateColumns {
+  0% {
+    --column-0: 2.5px;
+    --column-1: 4.5px;
+    --column-2: 33px;
+    --column-3: 22.5px;
+    --column-4: 31px;
+    --column-5: 26.5px;
+    --column-6: 18.5px;
+    --column-7: 9px;
+    --column-8: 25.5px;
+    --column-9: 105.5px;
+    --column-10: 122px;
+    --column-11: 43.5px;
+    --column-12: 46px;
+    --column-13: 68px;
+    --column-14: 137px;
+  }
+  1% {
+    --column-0: 1.5px;
+    --column-1: 1.5px;
+    --column-2: 20.5px;
+    --column-3: 2px;
+    --column-4: 22px;
+    --column-5: 20.5px;
+    --column-6: 35.5px;
+    --column-7: 65px;
+    --column-8: 53px;
+    --column-9: 67.5px;
+    --column-10: 82.5px;
+    --column-11: 132px;
+    --column-12: 105px;
+    --column-13: 19.5px;
+    --column-14: 45px;
+  }
+  2% {
+    --column-0: 8.5px;
+    --column-1: 10.5px;
+    --column-2: 11.5px;
+    --column-3: 42.5px;
+    --column-4: 54.5px;
+    --column-5: 67.5px;
+    --column-6: 25px;
+    --column-7: 40px;
+    --column-8: 84px;
+    --column-9: 42.5px;
+    --column-10: 82px;
+    --column-11: 40.5px;
+    --column-12: 70.5px;
+    --column-13: 68.5px;
+    --column-14: 83px;
+  }
+  3% {
+    --column-0: 8.5px;
+    --column-1: 22.5px;
+    --column-2: 21.5px;
+    --column-3: 43px;
+    --column-4: 54.5px;
+    --column-5: 57px;
+    --column-6: 68px;
+    --column-7: 41.5px;
+    --column-8: 26.5px;
+    --column-9: 102.5px;
+    --column-10: 13px;
+    --column-11: 8.5px;
+    --column-12: 78px;
+    --column-13: 104.5px;
+    --column-14: 20px;
+  }
+  4% {
+    --column-0: 7px;
+    --column-1: 22.5px;
+    --column-2: 26px;
+    --column-3: 31px;
+    --column-4: 32.5px;
+    --column-5: 0.5px;
+    --column-6: 71px;
+    --column-7: 34.5px;
+    --column-8: 4.5px;
+    --column-9: 105px;
+    --column-10: 78px;
+    --column-11: 98.5px;
+    --column-12: 67px;
+    --column-13: 8.5px;
+    --column-14: 81.5px;
+  }
+  5% {
+    --column-0: 4.5px;
+    --column-1: 12px;
+    --column-2: 19px;
+    --column-3: 23px;
+    --column-4: 25.5px;
+    --column-5: 18.5px;
+    --column-6: 63px;
+    --column-7: 52.5px;
+    --column-8: 5px;
+    --column-9: 54.5px;
+    --column-10: 99.5px;
+    --column-11: 72px;
+    --column-12: 68px;
+    --column-13: 76.5px;
+    --column-14: 148px;
+  }
+  6% {
+    --column-0: 6.5px;
+    --column-1: 18.5px;
+    --column-2: 4px;
+    --column-3: 8.5px;
+    --column-4: 10px;
+    --column-5: 42px;
+    --column-6: 75px;
+    --column-7: 22px;
+    --column-8: 28.5px;
+    --column-9: 72px;
+    --column-10: 63px;
+    --column-11: 104.5px;
+    --column-12: 73px;
+    --column-13: 101.5px;
+    --column-14: 60px;
+  }
+  7% {
+    --column-0: 10.5px;
+    --column-1: 5px;
+    --column-2: 32px;
+    --column-3: 44.5px;
+    --column-4: 31.5px;
+    --column-5: 5.5px;
+    --column-6: 15px;
+    --column-7: 54px;
+    --column-8: 66.5px;
+    --column-9: 49.5px;
+    --column-10: 71px;
+    --column-11: 30.5px;
+    --column-12: 60.5px;
+    --column-13: 62.5px;
+    --column-14: 29px;
+  }
+  8% {
+    --column-0: 2.5px;
+    --column-1: 17.5px;
+    --column-2: 4px;
+    --column-3: 18px;
+    --column-4: 37px;
+    --column-5: 25.5px;
+    --column-6: 48px;
+    --column-7: 14px;
+    --column-8: 98.5px;
+    --column-9: 113px;
+    --column-10: 63.5px;
+    --column-11: 136px;
+    --column-12: 63.5px;
+    --column-13: 108.5px;
+    --column-14: 62px;
+  }
+  9% {
+    --column-0: 2px;
+    --column-1: 17px;
+    --column-2: 18.5px;
+    --column-3: 8.5px;
+    --column-4: 11px;
+    --column-5: 36.5px;
+    --column-6: 53px;
+    --column-7: 73px;
+    --column-8: 65px;
+    --column-9: 71.5px;
+    --column-10: 107.5px;
+    --column-11: 30.5px;
+    --column-12: 36px;
+    --column-13: 124.5px;
+    --column-14: 50.5px;
+  }
+  10% {
+    --column-0: 6px;
+    --column-1: 5px;
+    --column-2: 17.5px;
+    --column-3: 36px;
+    --column-4: 6.5px;
+    --column-5: 68.5px;
+    --column-6: 32.5px;
+    --column-7: 70.5px;
+    --column-8: 102.5px;
+    --column-9: 11.5px;
+    --column-10: 65.5px;
+    --column-11: 15px;
+    --column-12: 51.5px;
+    --column-13: 157px;
+    --column-14: 56.5px;
+  }
+  11% {
+    --column-0: 2px;
+    --column-1: 22px;
+    --column-2: 13.5px;
+    --column-3: 24.5px;
+    --column-4: 18px;
+    --column-5: 29px;
+    --column-6: 29px;
+    --column-7: 68px;
+    --column-8: 47.5px;
+    --column-9: 45px;
+    --column-10: 86.5px;
+    --column-11: 75px;
+    --column-12: 17.5px;
+    --column-13: 118.5px;
+    --column-14: 28px;
+  }
+  12% {
+    --column-0: 4px;
+    --column-1: 1px;
+    --column-2: 17.5px;
+    --column-3: 25px;
+    --column-4: 3.5px;
+    --column-5: 52px;
+    --column-6: 76.5px;
+    --column-7: 13px;
+    --column-8: 45px;
+    --column-9: 77px;
+    --column-10: 72.5px;
+    --column-11: 51px;
+    --column-12: 33px;
+    --column-13: 118.5px;
+    --column-14: 7px;
+  }
+  13% {
+    --column-0: 5.5px;
+    --column-1: 17.5px;
+    --column-2: 6px;
+    --column-3: 42.5px;
+    --column-4: 26px;
+    --column-5: 2.5px;
+    --column-6: 25px;
+    --column-7: 81.5px;
+    --column-8: 80px;
+    --column-9: 68px;
+    --column-10: 9px;
+    --column-11: 98px;
+    --column-12: 89.5px;
+    --column-13: 4px;
+    --column-14: 163px;
+  }
+  14% {
+    --column-0: 8.5px;
+    --column-1: 13px;
+    --column-2: 33px;
+    --column-3: 17px;
+    --column-4: 57.5px;
+    --column-5: 21.5px;
+    --column-6: 54.5px;
+    --column-7: 66px;
+    --column-8: 92px;
+    --column-9: 18.5px;
+    --column-10: 17.5px;
+    --column-11: 95px;
+    --column-12: 80.5px;
+    --column-13: 73.5px;
+    --column-14: 114.5px;
+  }
+  15% {
+    --column-0: 4.5px;
+    --column-1: 21px;
+    --column-2: 12.5px;
+    --column-3: 26px;
+    --column-4: 23.5px;
+    --column-5: 55.5px;
+    --column-6: 14.5px;
+    --column-7: 0.5px;
+    --column-8: 24.5px;
+    --column-9: 75px;
+    --column-10: 55px;
+    --column-11: 124px;
+    --column-12: 76.5px;
+    --column-13: 63px;
+    --column-14: 158.5px;
+  }
+  16% {
+    --column-0: 6px;
+    --column-1: 2px;
+    --column-2: 34.5px;
+    --column-3: 25.5px;
+    --column-4: 34px;
+    --column-5: 53.5px;
+    --column-6: 40px;
+    --column-7: 24.5px;
+    --column-8: 26.5px;
+    --column-9: 13.5px;
+    --column-10: 104px;
+    --column-11: 11.5px;
+    --column-12: 41.5px;
+    --column-13: 107.5px;
+    --column-14: 49.5px;
+  }
+  17% {
+    --column-0: 7px;
+    --column-1: 19.5px;
+    --column-2: 4px;
+    --column-3: 4px;
+    --column-4: 7px;
+    --column-5: 22.5px;
+    --column-6: 18.5px;
+    --column-7: 78.5px;
+    --column-8: 80px;
+    --column-9: 48.5px;
+    --column-10: 88px;
+    --column-11: 1px;
+    --column-12: 98px;
+    --column-13: 16px;
+    --column-14: 58.5px;
+  }
+  18% {
+    --column-0: 10px;
+    --column-1: 13.5px;
+    --column-2: 2.5px;
+    --column-3: 35px;
+    --column-4: 51px;
+    --column-5: 3px;
+    --column-6: 37px;
+    --column-7: 89.5px;
+    --column-8: 29px;
+    --column-9: 94.5px;
+    --column-10: 11px;
+    --column-11: 53.5px;
+    --column-12: 111px;
+    --column-13: 105px;
+    --column-14: 47.5px;
+  }
+  19% {
+    --column-0: 9.5px;
+    --column-1: 13px;
+    --column-2: 33.5px;
+    --column-3: 15px;
+    --column-4: 44px;
+    --column-5: 10.5px;
+    --column-6: 71px;
+    --column-7: 22px;
+    --column-8: 83.5px;
+    --column-9: 14px;
+    --column-10: 72.5px;
+    --column-11: 52.5px;
+    --column-12: 140.5px;
+    --column-13: 42.5px;
+    --column-14: 94.5px;
+  }
+  20% {
+    --column-0: 9.5px;
+    --column-1: 1px;
+    --column-2: 14.5px;
+    --column-3: 4px;
+    --column-4: 52.5px;
+    --column-5: 12px;
+    --column-6: 58.5px;
+    --column-7: 40px;
+    --column-8: 72.5px;
+    --column-9: 90.5px;
+    --column-10: 46.5px;
+    --column-11: 91.5px;
+    --column-12: 134px;
+    --column-13: 50px;
+    --column-14: 28px;
+  }
+  21% {
+    --column-0: 10px;
+    --column-1: 9px;
+    --column-2: 30.5px;
+    --column-3: 24px;
+    --column-4: 44px;
+    --column-5: 55px;
+    --column-6: 14.5px;
+    --column-7: 14.5px;
+    --column-8: 90px;
+    --column-9: 30.5px;
+    --column-10: 102.5px;
+    --column-11: 12px;
+    --column-12: 129px;
+    --column-13: 50px;
+    --column-14: 116.5px;
+  }
+  22% {
+    --column-0: 10.5px;
+    --column-1: 1.5px;
+    --column-2: 1px;
+    --column-3: 20px;
+    --column-4: 39px;
+    --column-5: 43.5px;
+    --column-6: 51px;
+    --column-7: 59.5px;
+    --column-8: 4.5px;
+    --column-9: 112px;
+    --column-10: 2.5px;
+    --column-11: 125.5px;
+    --column-12: 47.5px;
+    --column-13: 50px;
+    --column-14: 155.5px;
+  }
+  23% {
+    --column-0: 11.5px;
+    --column-1: 22.5px;
+    --column-2: 30px;
+    --column-3: 28.5px;
+    --column-4: 48px;
+    --column-5: 49.5px;
+    --column-6: 78px;
+    --column-7: 35.5px;
+    --column-8: 5px;
+    --column-9: 45.5px;
+    --column-10: 101px;
+    --column-11: 28.5px;
+    --column-12: 128px;
+    --column-13: 52.5px;
+    --column-14: 13px;
+  }
+  24% {
+    --column-0: 7px;
+    --column-1: 9px;
+    --column-2: 26px;
+    --column-3: 45px;
+    --column-4: 41.5px;
+    --column-5: 23px;
+    --column-6: 39px;
+    --column-7: 8.5px;
+    --column-8: 53px;
+    --column-9: 23.5px;
+    --column-10: 61.5px;
+    --column-11: 116px;
+    --column-12: 22px;
+    --column-13: 7px;
+    --column-14: 62px;
+  }
+  25% {
+    --column-0: 2px;
+    --column-1: 0.5px;
+    --column-2: 29px;
+    --column-3: 7px;
+    --column-4: 16px;
+    --column-5: 50px;
+    --column-6: 59px;
+    --column-7: 42px;
+    --column-8: 95.5px;
+    --column-9: 41.5px;
+    --column-10: 53.5px;
+    --column-11: 5px;
+    --column-12: 45px;
+    --column-13: 49px;
+    --column-14: 32px;
+  }
+  26% {
+    --column-0: 11px;
+    --column-1: 9px;
+    --column-2: 24.5px;
+    --column-3: 3.5px;
+    --column-4: 14px;
+    --column-5: 46.5px;
+    --column-6: 59px;
+    --column-7: 3px;
+    --column-8: 37.5px;
+    --column-9: 105px;
+    --column-10: 114.5px;
+    --column-11: 115.5px;
+    --column-12: 99.5px;
+    --column-13: 1px;
+    --column-14: 138.5px;
+  }
+  27% {
+    --column-0: 9.5px;
+    --column-1: 22px;
+    --column-2: 29.5px;
+    --column-3: 6.5px;
+    --column-4: 44.5px;
+    --column-5: 33px;
+    --column-6: 71px;
+    --column-7: 75px;
+    --column-8: 43px;
+    --column-9: 62px;
+    --column-10: 76.5px;
+    --column-11: 122.5px;
+    --column-12: 23.5px;
+    --column-13: 145.5px;
+    --column-14: 41px;
+  }
+  28% {
+    --column-0: 0.5px;
+    --column-1: 11px;
+    --column-2: 31px;
+    --column-3: 33px;
+    --column-4: 44px;
+    --column-5: 69px;
+    --column-6: 27.5px;
+    --column-7: 44.5px;
+    --column-8: 39.5px;
+    --column-9: 78.5px;
+    --column-10: 36px;
+    --column-11: 81px;
+    --column-12: 42px;
+    --column-13: 14.5px;
+    --column-14: 91.5px;
+  }
+  29% {
+    --column-0: 0.5px;
+    --column-1: 12px;
+    --column-2: 19.5px;
+    --column-3: 31px;
+    --column-4: 17.5px;
+    --column-5: 5px;
+    --column-6: 21.5px;
+    --column-7: 19.5px;
+    --column-8: 10.5px;
+    --column-9: 59.5px;
+    --column-10: 18.5px;
+    --column-11: 41px;
+    --column-12: 76px;
+    --column-13: 87px;
+    --column-14: 125.5px;
+  }
+  30% {
+    --column-0: 2px;
+    --column-1: 11.5px;
+    --column-2: 10px;
+    --column-3: 25px;
+    --column-4: 30.5px;
+    --column-5: 5.5px;
+    --column-6: 27px;
+    --column-7: 7px;
+    --column-8: 65px;
+    --column-9: 110px;
+    --column-10: 47px;
+    --column-11: 86px;
+    --column-12: 5.5px;
+    --column-13: 125.5px;
+    --column-14: 59px;
+  }
+  31% {
+    --column-0: 1.5px;
+    --column-1: 2.5px;
+    --column-2: 20.5px;
+    --column-3: 10.5px;
+    --column-4: 10px;
+    --column-5: 21.5px;
+    --column-6: 80.5px;
+    --column-7: 24.5px;
+    --column-8: 45px;
+    --column-9: 45.5px;
+    --column-10: 52px;
+    --column-11: 40.5px;
+    --column-12: 71.5px;
+    --column-13: 106.5px;
+    --column-14: 133px;
+  }
+  32% {
+    --column-0: 6.5px;
+    --column-1: 2.5px;
+    --column-2: 16px;
+    --column-3: 20.5px;
+    --column-4: 4px;
+    --column-5: 13.5px;
+    --column-6: 2.5px;
+    --column-7: 89.5px;
+    --column-8: 81px;
+    --column-9: 39.5px;
+    --column-10: 121.5px;
+    --column-11: 3px;
+    --column-12: 70.5px;
+    --column-13: 90.5px;
+    --column-14: 72px;
+  }
+  33% {
+    --column-0: 11px;
+    --column-1: 16.5px;
+    --column-2: 34px;
+    --column-3: 41.5px;
+    --column-4: 9px;
+    --column-5: 3px;
+    --column-6: 28px;
+    --column-7: 33px;
+    --column-8: 3px;
+    --column-9: 65.5px;
+    --column-10: 31px;
+    --column-11: 106px;
+    --column-12: 77px;
+    --column-13: 14px;
+    --column-14: 126px;
+  }
+  34% {
+    --column-0: 7px;
+    --column-1: 9px;
+    --column-2: 1px;
+    --column-3: 31.5px;
+    --column-4: 15.5px;
+    --column-5: 32px;
+    --column-6: 52.5px;
+    --column-7: 57px;
+    --column-8: 67.5px;
+    --column-9: 69px;
+    --column-10: 63px;
+    --column-11: 91px;
+    --column-12: 121.5px;
+    --column-13: 110px;
+    --column-14: 136.5px;
+  }
+  35% {
+    --column-0: 3.5px;
+    --column-1: 20px;
+    --column-2: 20.5px;
+    --column-3: 39px;
+    --column-4: 20.5px;
+    --column-5: 54.5px;
+    --column-6: 48px;
+    --column-7: 15.5px;
+    --column-8: 96px;
+    --column-9: 61px;
+    --column-10: 112.5px;
+    --column-11: 97.5px;
+    --column-12: 79.5px;
+    --column-13: 133.5px;
+    --column-14: 90px;
+  }
+  36% {
+    --column-0: 7.5px;
+    --column-1: 1.5px;
+    --column-2: 5.5px;
+    --column-3: 13.5px;
+    --column-4: 2px;
+    --column-5: 64px;
+    --column-6: 79px;
+    --column-7: 51px;
+    --column-8: 75.5px;
+    --column-9: 111.5px;
+    --column-10: 81px;
+    --column-11: 39.5px;
+    --column-12: 51px;
+    --column-13: 44px;
+    --column-14: 40.5px;
+  }
+  37% {
+    --column-0: 4px;
+    --column-1: 10.5px;
+    --column-2: 10.5px;
+    --column-3: 39px;
+    --column-4: 2px;
+    --column-5: 58.5px;
+    --column-6: 69.5px;
+    --column-7: 16.5px;
+    --column-8: 42.5px;
+    --column-9: 114.5px;
+    --column-10: 46.5px;
+    --column-11: 86.5px;
+    --column-12: 141px;
+    --column-13: 67.5px;
+    --column-14: 157.5px;
+  }
+  38% {
+    --column-0: 7.5px;
+    --column-1: 12px;
+    --column-2: 23px;
+    --column-3: 24.5px;
+    --column-4: 11.5px;
+    --column-5: 53px;
+    --column-6: 18px;
+    --column-7: 5.5px;
+    --column-8: 103px;
+    --column-9: 30.5px;
+    --column-10: 108px;
+    --column-11: 20px;
+    --column-12: 34.5px;
+    --column-13: 160px;
+    --column-14: 165.5px;
+  }
+  39% {
+    --column-0: 7px;
+    --column-1: 2.5px;
+    --column-2: 32px;
+    --column-3: 37.5px;
+    --column-4: 54px;
+    --column-5: 62.5px;
+    --column-6: 44px;
+    --column-7: 2.5px;
+    --column-8: 14.5px;
+    --column-9: 32px;
+    --column-10: 104px;
+    --column-11: 13.5px;
+    --column-12: 141px;
+    --column-13: 113px;
+    --column-14: 82.5px;
+  }
+  40% {
+    --column-0: 5.5px;
+    --column-1: 10.5px;
+    --column-2: 34px;
+    --column-3: 17.5px;
+    --column-4: 21.5px;
+    --column-5: 3px;
+    --column-6: 77.5px;
+    --column-7: 58px;
+    --column-8: 51px;
+    --column-9: 88px;
+    --column-10: 30.5px;
+    --column-11: 27px;
+    --column-12: 18px;
+    --column-13: 50.5px;
+    --column-14: 58px;
+  }
+  41% {
+    --column-0: 11px;
+    --column-1: 12px;
+    --column-2: 26px;
+    --column-3: 12px;
+    --column-4: 37px;
+    --column-5: 31px;
+    --column-6: 2px;
+    --column-7: 54px;
+    --column-8: 54.5px;
+    --column-9: 71px;
+    --column-10: 108px;
+    --column-11: 110px;
+    --column-12: 36.5px;
+    --column-13: 48.5px;
+    --column-14: 37.5px;
+  }
+  42% {
+    --column-0: 4px;
+    --column-1: 11px;
+    --column-2: 11px;
+    --column-3: 31px;
+    --column-4: 13px;
+    --column-5: 19.5px;
+    --column-6: 20px;
+    --column-7: 49px;
+    --column-8: 39px;
+    --column-9: 68.5px;
+    --column-10: 28.5px;
+    --column-11: 117.5px;
+    --column-12: 135px;
+    --column-13: 76.5px;
+    --column-14: 124.5px;
+  }
+  43% {
+    --column-0: 10.5px;
+    --column-1: 4.5px;
+    --column-2: 11.5px;
+    --column-3: 31px;
+    --column-4: 52.5px;
+    --column-5: 51px;
+    --column-6: 57px;
+    --column-7: 63.5px;
+    --column-8: 23.5px;
+    --column-9: 83px;
+    --column-10: 1.5px;
+    --column-11: 39.5px;
+    --column-12: 8px;
+    --column-13: 118.5px;
+    --column-14: 80px;
+  }
+  44% {
+    --column-0: 8px;
+    --column-1: 19.5px;
+    --column-2: 7.5px;
+    --column-3: 19px;
+    --column-4: 11.5px;
+    --column-5: 45px;
+    --column-6: 79.5px;
+    --column-7: 64.5px;
+    --column-8: 71.5px;
+    --column-9: 108.5px;
+    --column-10: 122px;
+    --column-11: 83px;
+    --column-12: 75px;
+    --column-13: 23.5px;
+    --column-14: 97.5px;
+  }
+  45% {
+    --column-0: 10.5px;
+    --column-1: 5.5px;
+    --column-2: 22.5px;
+    --column-3: 30px;
+    --column-4: 30.5px;
+    --column-5: 18px;
+    --column-6: 6px;
+    --column-7: 26px;
+    --column-8: 38px;
+    --column-9: 91px;
+    --column-10: 68px;
+    --column-11: 22px;
+    --column-12: 63.5px;
+    --column-13: 79px;
+    --column-14: 52px;
+  }
+  46% {
+    --column-0: 8px;
+    --column-1: 21.5px;
+    --column-2: 23.5px;
+    --column-3: 35.5px;
+    --column-4: 27px;
+    --column-5: 19.5px;
+    --column-6: 39.5px;
+    --column-7: 33px;
+    --column-8: 8px;
+    --column-9: 55px;
+    --column-10: 23.5px;
+    --column-11: 70px;
+    --column-12: 20px;
+    --column-13: 26.5px;
+    --column-14: 56.5px;
+  }
+  47% {
+    --column-0: 1.5px;
+    --column-1: 9px;
+    --column-2: 34px;
+    --column-3: 35.5px;
+    --column-4: 38px;
+    --column-5: 13px;
+    --column-6: 37px;
+    --column-7: 76px;
+    --column-8: 6.5px;
+    --column-9: 43.5px;
+    --column-10: 58px;
+    --column-11: 74px;
+    --column-12: 42px;
+    --column-13: 123px;
+    --column-14: 19px;
+  }
+  48% {
+    --column-0: 11px;
+    --column-1: 17.5px;
+    --column-2: 0.5px;
+    --column-3: 23px;
+    --column-4: 12.5px;
+    --column-5: 10.5px;
+    --column-6: 59px;
+    --column-7: 47.5px;
+    --column-8: 84px;
+    --column-9: 111px;
+    --column-10: 11.5px;
+    --column-11: 74.5px;
+    --column-12: 9px;
+    --column-13: 122.5px;
+    --column-14: 128px;
+  }
+  49% {
+    --column-0: 5.5px;
+    --column-1: 11.5px;
+    --column-2: 27px;
+    --column-3: 1px;
+    --column-4: 11.5px;
+    --column-5: 25px;
+    --column-6: 71px;
+    --column-7: 12.5px;
+    --column-8: 45.5px;
+    --column-9: 62.5px;
+    --column-10: 98px;
+    --column-11: 10.5px;
+    --column-12: 67px;
+    --column-13: 133.5px;
+    --column-14: 74px;
+  }
+  50% {
+    --column-0: 10px;
+    --column-1: 15.5px;
+    --column-2: 32px;
+    --column-3: 13px;
+    --column-4: 42px;
+    --column-5: 6.5px;
+    --column-6: 30.5px;
+    --column-7: 6.5px;
+    --column-8: 10px;
+    --column-9: 3.5px;
+    --column-10: 46.5px;
+    --column-11: 137px;
+    --column-12: 143.5px;
+    --column-13: 61px;
+    --column-14: 71px;
+  }
+  51% {
+    --column-0: 4px;
+    --column-1: 22.5px;
+    --column-2: 4px;
+    --column-3: 27px;
+    --column-4: 46px;
+    --column-5: 6px;
+    --column-6: 17.5px;
+    --column-7: 70.5px;
+    --column-8: 21px;
+    --column-9: 45.5px;
+    --column-10: 6px;
+    --column-11: 57px;
+    --column-12: 110px;
+    --column-13: 116px;
+    --column-14: 128.5px;
+  }
+  52% {
+    --column-0: 7.5px;
+    --column-1: 1px;
+    --column-2: 25px;
+    --column-3: 4.5px;
+    --column-4: 0.5px;
+    --column-5: 7px;
+    --column-6: 56.5px;
+    --column-7: 63px;
+    --column-8: 28.5px;
+    --column-9: 23px;
+    --column-10: 39.5px;
+    --column-11: 51.5px;
+    --column-12: 88px;
+    --column-13: 15px;
+    --column-14: 30.5px;
+  }
+  53% {
+    --column-0: 11.5px;
+    --column-1: 3.5px;
+    --column-2: 24.5px;
+    --column-3: 28px;
+    --column-4: 24px;
+    --column-5: 56px;
+    --column-6: 72px;
+    --column-7: 18.5px;
+    --column-8: 69.5px;
+    --column-9: 114px;
+    --column-10: 63px;
+    --column-11: 55px;
+    --column-12: 20.5px;
+    --column-13: 103.5px;
+    --column-14: 140px;
+  }
+  54% {
+    --column-0: 6.5px;
+    --column-1: 8.5px;
+    --column-2: 10.5px;
+    --column-3: 19.5px;
+    --column-4: 8.5px;
+    --column-5: 32.5px;
+    --column-6: 40.5px;
+    --column-7: 49.5px;
+    --column-8: 7.5px;
+    --column-9: 92px;
+    --column-10: 87.5px;
+    --column-11: 68px;
+    --column-12: 40.5px;
+    --column-13: 69px;
+    --column-14: 51.5px;
+  }
+  55% {
+    --column-0: 10.5px;
+    --column-1: 11px;
+    --column-2: 13px;
+    --column-3: 34.5px;
+    --column-4: 30.5px;
+    --column-5: 68.5px;
+    --column-6: 16px;
+    --column-7: 52.5px;
+    --column-8: 61.5px;
+    --column-9: 59.5px;
+    --column-10: 54px;
+    --column-11: 62px;
+    --column-12: 146.5px;
+    --column-13: 1px;
+    --column-14: 91.5px;
+  }
+  56% {
+    --column-0: 8px;
+    --column-1: 16px;
+    --column-2: 18px;
+    --column-3: 31px;
+    --column-4: 54px;
+    --column-5: 40px;
+    --column-6: 40px;
+    --column-7: 56.5px;
+    --column-8: 45.5px;
+    --column-9: 51.5px;
+    --column-10: 3px;
+    --column-11: 94px;
+    --column-12: 99.5px;
+    --column-13: 42px;
+    --column-14: 15px;
+  }
+  57% {
+    --column-0: 7px;
+    --column-1: 19.5px;
+    --column-2: 7px;
+    --column-3: 15.5px;
+    --column-4: 8px;
+    --column-5: 22px;
+    --column-6: 73.5px;
+    --column-7: 6.5px;
+    --column-8: 82px;
+    --column-9: 20.5px;
+    --column-10: 99px;
+    --column-11: 51.5px;
+    --column-12: 51.5px;
+    --column-13: 95.5px;
+    --column-14: 48px;
+  }
+  58% {
+    --column-0: 6.5px;
+    --column-1: 16px;
+    --column-2: 23.5px;
+    --column-3: 27.5px;
+    --column-4: 52.5px;
+    --column-5: 57px;
+    --column-6: 63px;
+    --column-7: 5px;
+    --column-8: 89px;
+    --column-9: 28px;
+    --column-10: 76px;
+    --column-11: 100.5px;
+    --column-12: 85.5px;
+    --column-13: 114px;
+    --column-14: 108.5px;
+  }
+  59% {
+    --column-0: 4px;
+    --column-1: 13.5px;
+    --column-2: 3px;
+    --column-3: 17px;
+    --column-4: 2px;
+    --column-5: 26px;
+    --column-6: 7px;
+    --column-7: 57.5px;
+    --column-8: 45px;
+    --column-9: 78.5px;
+    --column-10: 41px;
+    --column-11: 11.5px;
+    --column-12: 31px;
+    --column-13: 39px;
+    --column-14: 25.5px;
+  }
+  60% {
+    --column-0: 5px;
+    --column-1: 22px;
+    --column-2: 9.5px;
+    --column-3: 19px;
+    --column-4: 54.5px;
+    --column-5: 29px;
+    --column-6: 21px;
+    --column-7: 61px;
+    --column-8: 102.5px;
+    --column-9: 80px;
+    --column-10: 80px;
+    --column-11: 62px;
+    --column-12: 67.5px;
+    --column-13: 53.5px;
+    --column-14: 60.5px;
+  }
+  61% {
+    --column-0: 3px;
+    --column-1: 4px;
+    --column-2: 16.5px;
+    --column-3: 15.5px;
+    --column-4: 24px;
+    --column-5: 45px;
+    --column-6: 51px;
+    --column-7: 87px;
+    --column-8: 57.5px;
+    --column-9: 8.5px;
+    --column-10: 78.5px;
+    --column-11: 14px;
+    --column-12: 15px;
+    --column-13: 13.5px;
+    --column-14: 60.5px;
+  }
+  62% {
+    --column-0: 9.5px;
+    --column-1: 13px;
+    --column-2: 31px;
+    --column-3: 23px;
+    --column-4: 35.5px;
+    --column-5: 64.5px;
+    --column-6: 60.5px;
+    --column-7: 45.5px;
+    --column-8: 49.5px;
+    --column-9: 34.5px;
+    --column-10: 69px;
+    --column-11: 28.5px;
+    --column-12: 129px;
+    --column-13: 134.5px;
+    --column-14: 117px;
+  }
+  63% {
+    --column-0: 9.5px;
+    --column-1: 23px;
+    --column-2: 1.5px;
+    --column-3: 3px;
+    --column-4: 33px;
+    --column-5: 40.5px;
+    --column-6: 25px;
+    --column-7: 37px;
+    --column-8: 2.5px;
+    --column-9: 109.5px;
+    --column-10: 84.5px;
+    --column-11: 29.5px;
+    --column-12: 82px;
+    --column-13: 12.5px;
+    --column-14: 8px;
+  }
+  64% {
+    --column-0: 5px;
+    --column-1: 2px;
+    --column-2: 28.5px;
+    --column-3: 45px;
+    --column-4: 18px;
+    --column-5: 2px;
+    --column-6: 51px;
+    --column-7: 68px;
+    --column-8: 0.5px;
+    --column-9: 24.5px;
+    --column-10: 8.5px;
+    --column-11: 26.5px;
+    --column-12: 67px;
+    --column-13: 5px;
+    --column-14: 31px;
+  }
+  65% {
+    --column-0: 2.5px;
+    --column-1: 18.5px;
+    --column-2: 31.5px;
+    --column-3: 11.5px;
+    --column-4: 36px;
+    --column-5: 8.5px;
+    --column-6: 14px;
+    --column-7: 30px;
+    --column-8: 103.5px;
+    --column-9: 107.5px;
+    --column-10: 99.5px;
+    --column-11: 113.5px;
+    --column-12: 86px;
+    --column-13: 152px;
+    --column-14: 7px;
+  }
+  66% {
+    --column-0: 3.5px;
+    --column-1: 8.5px;
+    --column-2: 11.5px;
+    --column-3: 9px;
+    --column-4: 13.5px;
+    --column-5: 66px;
+    --column-6: 34px;
+    --column-7: 59px;
+    --column-8: 14.5px;
+    --column-9: 88.5px;
+    --column-10: 74px;
+    --column-11: 25px;
+    --column-12: 24px;
+    --column-13: 114px;
+    --column-14: 52px;
+  }
+  67% {
+    --column-0: 2.5px;
+    --column-1: 9.5px;
+    --column-2: 7px;
+    --column-3: 25.5px;
+    --column-4: 48px;
+    --column-5: 53.5px;
+    --column-6: 37px;
+    --column-7: 34.5px;
+    --column-8: 66px;
+    --column-9: 73px;
+    --column-10: 88.5px;
+    --column-11: 53px;
+    --column-12: 104px;
+    --column-13: 117.5px;
+    --column-14: 160px;
+  }
+  68% {
+    --column-0: 5px;
+    --column-1: 20.5px;
+    --column-2: 10.5px;
+    --column-3: 23px;
+    --column-4: 9.5px;
+    --column-5: 49px;
+    --column-6: 64px;
+    --column-7: 33px;
+    --column-8: 70.5px;
+    --column-9: 64px;
+    --column-10: 94.5px;
+    --column-11: 23px;
+    --column-12: 83.5px;
+    --column-13: 32px;
+    --column-14: 81.5px;
+  }
+  69% {
+    --column-0: 10.5px;
+    --column-1: 21.5px;
+    --column-2: 16.5px;
+    --column-3: 16px;
+    --column-4: 46px;
+    --column-5: 50px;
+    --column-6: 55.5px;
+    --column-7: 60px;
+    --column-8: 63.5px;
+    --column-9: 63px;
+    --column-10: 82.5px;
+    --column-11: 52.5px;
+    --column-12: 143.5px;
+    --column-13: 69.5px;
+    --column-14: 23.5px;
+  }
+  70% {
+    --column-0: 10.5px;
+    --column-1: 8px;
+    --column-2: 12.5px;
+    --column-3: 30px;
+    --column-4: 55px;
+    --column-5: 38.5px;
+    --column-6: 70.5px;
+    --column-7: 2.5px;
+    --column-8: 59.5px;
+    --column-9: 29.5px;
+    --column-10: 124px;
+    --column-11: 128.5px;
+    --column-12: 95.5px;
+    --column-13: 58.5px;
+    --column-14: 28.5px;
+  }
+  71% {
+    --column-0: 8.5px;
+    --column-1: 21.5px;
+    --column-2: 10.5px;
+    --column-3: 26px;
+    --column-4: 6.5px;
+    --column-5: 57px;
+    --column-6: 51.5px;
+    --column-7: 75.5px;
+    --column-8: 1.5px;
+    --column-9: 46.5px;
+    --column-10: 89px;
+    --column-11: 86.5px;
+    --column-12: 140.5px;
+    --column-13: 30px;
+    --column-14: 82px;
+  }
+  72% {
+    --column-0: 1px;
+    --column-1: 7.5px;
+    --column-2: 9px;
+    --column-3: 5px;
+    --column-4: 46.5px;
+    --column-5: 47px;
+    --column-6: 28px;
+    --column-7: 89.5px;
+    --column-8: 86.5px;
+    --column-9: 81.5px;
+    --column-10: 118.5px;
+    --column-11: 64px;
+    --column-12: 144px;
+    --column-13: 83.5px;
+    --column-14: 53.5px;
+  }
+  73% {
+    --column-0: 8.5px;
+    --column-1: 10.5px;
+    --column-2: 31.5px;
+    --column-3: 24.5px;
+    --column-4: 32.5px;
+    --column-5: 7px;
+    --column-6: 24.5px;
+    --column-7: 41.5px;
+    --column-8: 12px;
+    --column-9: 64.5px;
+    --column-10: 100px;
+    --column-11: 59.5px;
+    --column-12: 86px;
+    --column-13: 88px;
+    --column-14: 160px;
+  }
+  74% {
+    --column-0: 2px;
+    --column-1: 20.5px;
+    --column-2: 21.5px;
+    --column-3: 22px;
+    --column-4: 54px;
+    --column-5: 54px;
+    --column-6: 73px;
+    --column-7: 28px;
+    --column-8: 83.5px;
+    --column-9: 32px;
+    --column-10: 99px;
+    --column-11: 128.5px;
+    --column-12: 31.5px;
+    --column-13: 87px;
+    --column-14: 83px;
+  }
+  75% {
+    --column-0: 10.5px;
+    --column-1: 8px;
+    --column-2: 0.5px;
+    --column-3: 13px;
+    --column-4: 7px;
+    --column-5: 32.5px;
+    --column-6: 66px;
+    --column-7: 12px;
+    --column-8: 73.5px;
+    --column-9: 35px;
+    --column-10: 40.5px;
+    --column-11: 7.5px;
+    --column-12: 116px;
+    --column-13: 97px;
+    --column-14: 47px;
+  }
+  76% {
+    --column-0: 8.5px;
+    --column-1: 9px;
+    --column-2: 10px;
+    --column-3: 8px;
+    --column-4: 49.5px;
+    --column-5: 55px;
+    --column-6: 35px;
+    --column-7: 10px;
+    --column-8: 32.5px;
+    --column-9: 92.5px;
+    --column-10: 15px;
+    --column-11: 85.5px;
+    --column-12: 109px;
+    --column-13: 40px;
+    --column-14: 140px;
+  }
+  77% {
+    --column-0: 9px;
+    --column-1: 21.5px;
+    --column-2: 6.5px;
+    --column-3: 5.5px;
+    --column-4: 25.5px;
+    --column-5: 21px;
+    --column-6: 21px;
+    --column-7: 70.5px;
+    --column-8: 12px;
+    --column-9: 55px;
+    --column-10: 8.5px;
+    --column-11: 135.5px;
+    --column-12: 63.5px;
+    --column-13: 46.5px;
+    --column-14: 159.5px;
+  }
+  78% {
+    --column-0: 6.5px;
+    --column-1: 8.5px;
+    --column-2: 4.5px;
+    --column-3: 13.5px;
+    --column-4: 7px;
+    --column-5: 15px;
+    --column-6: 45px;
+    --column-7: 90.5px;
+    --column-8: 15px;
+    --column-9: 1.5px;
+    --column-10: 43px;
+    --column-11: 1.5px;
+    --column-12: 106px;
+    --column-13: 28px;
+    --column-14: 145px;
+  }
+  79% {
+    --column-0: 4px;
+    --column-1: 10px;
+    --column-2: 29px;
+    --column-3: 15px;
+    --column-4: 10px;
+    --column-5: 23px;
+    --column-6: 14px;
+    --column-7: 26.5px;
+    --column-8: 7.5px;
+    --column-9: 106px;
+    --column-10: 126.5px;
+    --column-11: 80.5px;
+    --column-12: 146px;
+    --column-13: 121.5px;
+    --column-14: 133px;
+  }
+  80% {
+    --column-0: 5.5px;
+    --column-1: 13px;
+    --column-2: 14.5px;
+    --column-3: 24.5px;
+    --column-4: 48px;
+    --column-5: 66px;
+    --column-6: 72.5px;
+    --column-7: 62.5px;
+    --column-8: 44px;
+    --column-9: 58.5px;
+    --column-10: 75.5px;
+    --column-11: 128px;
+    --column-12: 77.5px;
+    --column-13: 80px;
+    --column-14: 91px;
+  }
+  81% {
+    --column-0: 1.5px;
+    --column-1: 4.5px;
+    --column-2: 28px;
+    --column-3: 46px;
+    --column-4: 25.5px;
+    --column-5: 31.5px;
+    --column-6: 49.5px;
+    --column-7: 20.5px;
+    --column-8: 46.5px;
+    --column-9: 75.5px;
+    --column-10: 107.5px;
+    --column-11: 44.5px;
+    --column-12: 76.5px;
+    --column-13: 30.5px;
+    --column-14: 74.5px;
+  }
+  82% {
+    --column-0: 3.5px;
+    --column-1: 5.5px;
+    --column-2: 10.5px;
+    --column-3: 22px;
+    --column-4: 18px;
+    --column-5: 36px;
+    --column-6: 22px;
+    --column-7: 1px;
+    --column-8: 18.5px;
+    --column-9: 9px;
+    --column-10: 44px;
+    --column-11: 81px;
+    --column-12: 76.5px;
+    --column-13: 74px;
+    --column-14: 128px;
+  }
+  83% {
+    --column-0: 6.5px;
+    --column-1: 10.5px;
+    --column-2: 27.5px;
+    --column-3: 38px;
+    --column-4: 41.5px;
+    --column-5: 35.5px;
+    --column-6: 12.5px;
+    --column-7: 72px;
+    --column-8: 95px;
+    --column-9: 90.5px;
+    --column-10: 17px;
+    --column-11: 15.5px;
+    --column-12: 138px;
+    --column-13: 86.5px;
+    --column-14: 34px;
+  }
+  84% {
+    --column-0: 1px;
+    --column-1: 8.5px;
+    --column-2: 15px;
+    --column-3: 19px;
+    --column-4: 54.5px;
+    --column-5: 3px;
+    --column-6: 8.5px;
+    --column-7: 78.5px;
+    --column-8: 67px;
+    --column-9: 78px;
+    --column-10: 59px;
+    --column-11: 36.5px;
+    --column-12: 102.5px;
+    --column-13: 67.5px;
+    --column-14: 84.5px;
+  }
+  85% {
+    --column-0: 9.5px;
+    --column-1: 18.5px;
+    --column-2: 26.5px;
+    --column-3: 17.5px;
+    --column-4: 39px;
+    --column-5: 51.5px;
+    --column-6: 41px;
+    --column-7: 58px;
+    --column-8: 66.5px;
+    --column-9: 7px;
+    --column-10: 0.5px;
+    --column-11: 135.5px;
+    --column-12: 144px;
+    --column-13: 18.5px;
+    --column-14: 161.5px;
+  }
+  86% {
+    --column-0: 11.5px;
+    --column-1: 17px;
+    --column-2: 12px;
+    --column-3: 31px;
+    --column-4: 37px;
+    --column-5: 52.5px;
+    --column-6: 70.5px;
+    --column-7: 63px;
+    --column-8: 30.5px;
+    --column-9: 41.5px;
+    --column-10: 62.5px;
+    --column-11: 25px;
+    --column-12: 6.5px;
+    --column-13: 72.5px;
+    --column-14: 162px;
+  }
+  87% {
+    --column-0: 4px;
+    --column-1: 5px;
+    --column-2: 18.5px;
+    --column-3: 27.5px;
+    --column-4: 39px;
+    --column-5: 67px;
+    --column-6: 74.5px;
+    --column-7: 49.5px;
+    --column-8: 58.5px;
+    --column-9: 67.5px;
+    --column-10: 58.5px;
+    --column-11: 107px;
+    --column-12: 146px;
+    --column-13: 32.5px;
+    --column-14: 165px;
+  }
+  88% {
+    --column-0: 10px;
+    --column-1: 15px;
+    --column-2: 9px;
+    --column-3: 37.5px;
+    --column-4: 12px;
+    --column-5: 28px;
+    --column-6: 30px;
+    --column-7: 58px;
+    --column-8: 6px;
+    --column-9: 20px;
+    --column-10: 23px;
+    --column-11: 42px;
+    --column-12: 107px;
+    --column-13: 149.5px;
+    --column-14: 148.5px;
+  }
+  89% {
+    --column-0: 9px;
+    --column-1: 23px;
+    --column-2: 25.5px;
+    --column-3: 1.5px;
+    --column-4: 22px;
+    --column-5: 46px;
+    --column-6: 9.5px;
+    --column-7: 39px;
+    --column-8: 60px;
+    --column-9: 102.5px;
+    --column-10: 81.5px;
+    --column-11: 90.5px;
+    --column-12: 132.5px;
+    --column-13: 99px;
+    --column-14: 86.5px;
+  }
+  90% {
+    --column-0: 7px;
+    --column-1: 20px;
+    --column-2: 14px;
+    --column-3: 20.5px;
+    --column-4: 11px;
+    --column-5: 54.5px;
+    --column-6: 74px;
+    --column-7: 22.5px;
+    --column-8: 61px;
+    --column-9: 21.5px;
+    --column-10: 64.5px;
+    --column-11: 99.5px;
+    --column-12: 142px;
+    --column-13: 4px;
+    --column-14: 52.5px;
+  }
+  91% {
+    --column-0: 10px;
+    --column-1: 7.5px;
+    --column-2: 1px;
+    --column-3: 22.5px;
+    --column-4: 51.5px;
+    --column-5: 36.5px;
+    --column-6: 56px;
+    --column-7: 60.5px;
+    --column-8: 75.5px;
+    --column-9: 55.5px;
+    --column-10: 7.5px;
+    --column-11: 66px;
+    --column-12: 116px;
+    --column-13: 110.5px;
+    --column-14: 34.5px;
+  }
+  92% {
+    --column-0: 6px;
+    --column-1: 10px;
+    --column-2: 20.5px;
+    --column-3: 1.5px;
+    --column-4: 20.5px;
+    --column-5: 2.5px;
+    --column-6: 41.5px;
+    --column-7: 25.5px;
+    --column-8: 77.5px;
+    --column-9: 95.5px;
+    --column-10: 67px;
+    --column-11: 27px;
+    --column-12: 78.5px;
+    --column-13: 71px;
+    --column-14: 24px;
+  }
+  93% {
+    --column-0: 6.5px;
+    --column-1: 20px;
+    --column-2: 24.5px;
+    --column-3: 10.5px;
+    --column-4: 21px;
+    --column-5: 2px;
+    --column-6: 49px;
+    --column-7: 50px;
+    --column-8: 26.5px;
+    --column-9: 51.5px;
+    --column-10: 85px;
+    --column-11: 95.5px;
+    --column-12: 36px;
+    --column-13: 69px;
+    --column-14: 28px;
+  }
+  94% {
+    --column-0: 7px;
+    --column-1: 14.5px;
+    --column-2: 15px;
+    --column-3: 17.5px;
+    --column-4: 37.5px;
+    --column-5: 32.5px;
+    --column-6: 20.5px;
+    --column-7: 30px;
+    --column-8: 34px;
+    --column-9: 53px;
+    --column-10: 71.5px;
+    --column-11: 21px;
+    --column-12: 14px;
+    --column-13: 77px;
+    --column-14: 46px;
+  }
+  95% {
+    --column-0: 5.5px;
+    --column-1: 20.5px;
+    --column-2: 18px;
+    --column-3: 31.5px;
+    --column-4: 17px;
+    --column-5: 57.5px;
+    --column-6: 77.5px;
+    --column-7: 43px;
+    --column-8: 49px;
+    --column-9: 68px;
+    --column-10: 120.5px;
+    --column-11: 53.5px;
+    --column-12: 56px;
+    --column-13: 33px;
+    --column-14: 50px;
+  }
+  96% {
+    --column-0: 7px;
+    --column-1: 3px;
+    --column-2: 4px;
+    --column-3: 41.5px;
+    --column-4: 48px;
+    --column-5: 65.5px;
+    --column-6: 5px;
+    --column-7: 4px;
+    --column-8: 7px;
+    --column-9: 102.5px;
+    --column-10: 20.5px;
+    --column-11: 11px;
+    --column-12: 84px;
+    --column-13: 116.5px;
+    --column-14: 126px;
+  }
+  97% {
+    --column-0: 3.5px;
+    --column-1: 10.5px;
+    --column-2: 17.5px;
+    --column-3: 16.5px;
+    --column-4: 29.5px;
+    --column-5: 44px;
+    --column-6: 26.5px;
+    --column-7: 7px;
+    --column-8: 5px;
+    --column-9: 53.5px;
+    --column-10: 34px;
+    --column-11: 125px;
+    --column-12: 41px;
+    --column-13: 85.5px;
+    --column-14: 94.5px;
+  }
+  98% {
+    --column-0: 4px;
+    --column-1: 21.5px;
+    --column-2: 13.5px;
+    --column-3: 15px;
+    --column-4: 50.5px;
+    --column-5: 38px;
+    --column-6: 14.5px;
+    --column-7: 21.5px;
+    --column-8: 33px;
+    --column-9: 108.5px;
+    --column-10: 60.5px;
+    --column-11: 103px;
+    --column-12: 107.5px;
+    --column-13: 107px;
+    --column-14: 135.5px;
+  }
+  99% {
+    --column-0: 6px;
+    --column-1: 21.5px;
+    --column-2: 33.5px;
+    --column-3: 32px;
+    --column-4: 24px;
+    --column-5: 3px;
+    --column-6: 4px;
+    --column-7: 89px;
+    --column-8: 37.5px;
+    --column-9: 88px;
+    --column-10: 2.5px;
+    --column-11: 95.5px;
+    --column-12: 120.5px;
+    --column-13: 68px;
+    --column-14: 167.5px;
+  }
+}
+
+@keyframes animateColumns {
+  0% {
+    --column-0: 2.5px;
+    --column-1: 4.5px;
+    --column-2: 33px;
+    --column-3: 22.5px;
+    --column-4: 31px;
+    --column-5: 26.5px;
+    --column-6: 18.5px;
+    --column-7: 9px;
+    --column-8: 25.5px;
+    --column-9: 105.5px;
+    --column-10: 122px;
+    --column-11: 43.5px;
+    --column-12: 46px;
+    --column-13: 68px;
+    --column-14: 137px;
+  }
+  1% {
+    --column-0: 1.5px;
+    --column-1: 1.5px;
+    --column-2: 20.5px;
+    --column-3: 2px;
+    --column-4: 22px;
+    --column-5: 20.5px;
+    --column-6: 35.5px;
+    --column-7: 65px;
+    --column-8: 53px;
+    --column-9: 67.5px;
+    --column-10: 82.5px;
+    --column-11: 132px;
+    --column-12: 105px;
+    --column-13: 19.5px;
+    --column-14: 45px;
+  }
+  2% {
+    --column-0: 8.5px;
+    --column-1: 10.5px;
+    --column-2: 11.5px;
+    --column-3: 42.5px;
+    --column-4: 54.5px;
+    --column-5: 67.5px;
+    --column-6: 25px;
+    --column-7: 40px;
+    --column-8: 84px;
+    --column-9: 42.5px;
+    --column-10: 82px;
+    --column-11: 40.5px;
+    --column-12: 70.5px;
+    --column-13: 68.5px;
+    --column-14: 83px;
+  }
+  3% {
+    --column-0: 8.5px;
+    --column-1: 22.5px;
+    --column-2: 21.5px;
+    --column-3: 43px;
+    --column-4: 54.5px;
+    --column-5: 57px;
+    --column-6: 68px;
+    --column-7: 41.5px;
+    --column-8: 26.5px;
+    --column-9: 102.5px;
+    --column-10: 13px;
+    --column-11: 8.5px;
+    --column-12: 78px;
+    --column-13: 104.5px;
+    --column-14: 20px;
+  }
+  4% {
+    --column-0: 7px;
+    --column-1: 22.5px;
+    --column-2: 26px;
+    --column-3: 31px;
+    --column-4: 32.5px;
+    --column-5: 0.5px;
+    --column-6: 71px;
+    --column-7: 34.5px;
+    --column-8: 4.5px;
+    --column-9: 105px;
+    --column-10: 78px;
+    --column-11: 98.5px;
+    --column-12: 67px;
+    --column-13: 8.5px;
+    --column-14: 81.5px;
+  }
+  5% {
+    --column-0: 4.5px;
+    --column-1: 12px;
+    --column-2: 19px;
+    --column-3: 23px;
+    --column-4: 25.5px;
+    --column-5: 18.5px;
+    --column-6: 63px;
+    --column-7: 52.5px;
+    --column-8: 5px;
+    --column-9: 54.5px;
+    --column-10: 99.5px;
+    --column-11: 72px;
+    --column-12: 68px;
+    --column-13: 76.5px;
+    --column-14: 148px;
+  }
+  6% {
+    --column-0: 6.5px;
+    --column-1: 18.5px;
+    --column-2: 4px;
+    --column-3: 8.5px;
+    --column-4: 10px;
+    --column-5: 42px;
+    --column-6: 75px;
+    --column-7: 22px;
+    --column-8: 28.5px;
+    --column-9: 72px;
+    --column-10: 63px;
+    --column-11: 104.5px;
+    --column-12: 73px;
+    --column-13: 101.5px;
+    --column-14: 60px;
+  }
+  7% {
+    --column-0: 10.5px;
+    --column-1: 5px;
+    --column-2: 32px;
+    --column-3: 44.5px;
+    --column-4: 31.5px;
+    --column-5: 5.5px;
+    --column-6: 15px;
+    --column-7: 54px;
+    --column-8: 66.5px;
+    --column-9: 49.5px;
+    --column-10: 71px;
+    --column-11: 30.5px;
+    --column-12: 60.5px;
+    --column-13: 62.5px;
+    --column-14: 29px;
+  }
+  8% {
+    --column-0: 2.5px;
+    --column-1: 17.5px;
+    --column-2: 4px;
+    --column-3: 18px;
+    --column-4: 37px;
+    --column-5: 25.5px;
+    --column-6: 48px;
+    --column-7: 14px;
+    --column-8: 98.5px;
+    --column-9: 113px;
+    --column-10: 63.5px;
+    --column-11: 136px;
+    --column-12: 63.5px;
+    --column-13: 108.5px;
+    --column-14: 62px;
+  }
+  9% {
+    --column-0: 2px;
+    --column-1: 17px;
+    --column-2: 18.5px;
+    --column-3: 8.5px;
+    --column-4: 11px;
+    --column-5: 36.5px;
+    --column-6: 53px;
+    --column-7: 73px;
+    --column-8: 65px;
+    --column-9: 71.5px;
+    --column-10: 107.5px;
+    --column-11: 30.5px;
+    --column-12: 36px;
+    --column-13: 124.5px;
+    --column-14: 50.5px;
+  }
+  10% {
+    --column-0: 6px;
+    --column-1: 5px;
+    --column-2: 17.5px;
+    --column-3: 36px;
+    --column-4: 6.5px;
+    --column-5: 68.5px;
+    --column-6: 32.5px;
+    --column-7: 70.5px;
+    --column-8: 102.5px;
+    --column-9: 11.5px;
+    --column-10: 65.5px;
+    --column-11: 15px;
+    --column-12: 51.5px;
+    --column-13: 157px;
+    --column-14: 56.5px;
+  }
+  11% {
+    --column-0: 2px;
+    --column-1: 22px;
+    --column-2: 13.5px;
+    --column-3: 24.5px;
+    --column-4: 18px;
+    --column-5: 29px;
+    --column-6: 29px;
+    --column-7: 68px;
+    --column-8: 47.5px;
+    --column-9: 45px;
+    --column-10: 86.5px;
+    --column-11: 75px;
+    --column-12: 17.5px;
+    --column-13: 118.5px;
+    --column-14: 28px;
+  }
+  12% {
+    --column-0: 4px;
+    --column-1: 1px;
+    --column-2: 17.5px;
+    --column-3: 25px;
+    --column-4: 3.5px;
+    --column-5: 52px;
+    --column-6: 76.5px;
+    --column-7: 13px;
+    --column-8: 45px;
+    --column-9: 77px;
+    --column-10: 72.5px;
+    --column-11: 51px;
+    --column-12: 33px;
+    --column-13: 118.5px;
+    --column-14: 7px;
+  }
+  13% {
+    --column-0: 5.5px;
+    --column-1: 17.5px;
+    --column-2: 6px;
+    --column-3: 42.5px;
+    --column-4: 26px;
+    --column-5: 2.5px;
+    --column-6: 25px;
+    --column-7: 81.5px;
+    --column-8: 80px;
+    --column-9: 68px;
+    --column-10: 9px;
+    --column-11: 98px;
+    --column-12: 89.5px;
+    --column-13: 4px;
+    --column-14: 163px;
+  }
+  14% {
+    --column-0: 8.5px;
+    --column-1: 13px;
+    --column-2: 33px;
+    --column-3: 17px;
+    --column-4: 57.5px;
+    --column-5: 21.5px;
+    --column-6: 54.5px;
+    --column-7: 66px;
+    --column-8: 92px;
+    --column-9: 18.5px;
+    --column-10: 17.5px;
+    --column-11: 95px;
+    --column-12: 80.5px;
+    --column-13: 73.5px;
+    --column-14: 114.5px;
+  }
+  15% {
+    --column-0: 4.5px;
+    --column-1: 21px;
+    --column-2: 12.5px;
+    --column-3: 26px;
+    --column-4: 23.5px;
+    --column-5: 55.5px;
+    --column-6: 14.5px;
+    --column-7: 0.5px;
+    --column-8: 24.5px;
+    --column-9: 75px;
+    --column-10: 55px;
+    --column-11: 124px;
+    --column-12: 76.5px;
+    --column-13: 63px;
+    --column-14: 158.5px;
+  }
+  16% {
+    --column-0: 6px;
+    --column-1: 2px;
+    --column-2: 34.5px;
+    --column-3: 25.5px;
+    --column-4: 34px;
+    --column-5: 53.5px;
+    --column-6: 40px;
+    --column-7: 24.5px;
+    --column-8: 26.5px;
+    --column-9: 13.5px;
+    --column-10: 104px;
+    --column-11: 11.5px;
+    --column-12: 41.5px;
+    --column-13: 107.5px;
+    --column-14: 49.5px;
+  }
+  17% {
+    --column-0: 7px;
+    --column-1: 19.5px;
+    --column-2: 4px;
+    --column-3: 4px;
+    --column-4: 7px;
+    --column-5: 22.5px;
+    --column-6: 18.5px;
+    --column-7: 78.5px;
+    --column-8: 80px;
+    --column-9: 48.5px;
+    --column-10: 88px;
+    --column-11: 1px;
+    --column-12: 98px;
+    --column-13: 16px;
+    --column-14: 58.5px;
+  }
+  18% {
+    --column-0: 10px;
+    --column-1: 13.5px;
+    --column-2: 2.5px;
+    --column-3: 35px;
+    --column-4: 51px;
+    --column-5: 3px;
+    --column-6: 37px;
+    --column-7: 89.5px;
+    --column-8: 29px;
+    --column-9: 94.5px;
+    --column-10: 11px;
+    --column-11: 53.5px;
+    --column-12: 111px;
+    --column-13: 105px;
+    --column-14: 47.5px;
+  }
+  19% {
+    --column-0: 9.5px;
+    --column-1: 13px;
+    --column-2: 33.5px;
+    --column-3: 15px;
+    --column-4: 44px;
+    --column-5: 10.5px;
+    --column-6: 71px;
+    --column-7: 22px;
+    --column-8: 83.5px;
+    --column-9: 14px;
+    --column-10: 72.5px;
+    --column-11: 52.5px;
+    --column-12: 140.5px;
+    --column-13: 42.5px;
+    --column-14: 94.5px;
+  }
+  20% {
+    --column-0: 9.5px;
+    --column-1: 1px;
+    --column-2: 14.5px;
+    --column-3: 4px;
+    --column-4: 52.5px;
+    --column-5: 12px;
+    --column-6: 58.5px;
+    --column-7: 40px;
+    --column-8: 72.5px;
+    --column-9: 90.5px;
+    --column-10: 46.5px;
+    --column-11: 91.5px;
+    --column-12: 134px;
+    --column-13: 50px;
+    --column-14: 28px;
+  }
+  21% {
+    --column-0: 10px;
+    --column-1: 9px;
+    --column-2: 30.5px;
+    --column-3: 24px;
+    --column-4: 44px;
+    --column-5: 55px;
+    --column-6: 14.5px;
+    --column-7: 14.5px;
+    --column-8: 90px;
+    --column-9: 30.5px;
+    --column-10: 102.5px;
+    --column-11: 12px;
+    --column-12: 129px;
+    --column-13: 50px;
+    --column-14: 116.5px;
+  }
+  22% {
+    --column-0: 10.5px;
+    --column-1: 1.5px;
+    --column-2: 1px;
+    --column-3: 20px;
+    --column-4: 39px;
+    --column-5: 43.5px;
+    --column-6: 51px;
+    --column-7: 59.5px;
+    --column-8: 4.5px;
+    --column-9: 112px;
+    --column-10: 2.5px;
+    --column-11: 125.5px;
+    --column-12: 47.5px;
+    --column-13: 50px;
+    --column-14: 155.5px;
+  }
+  23% {
+    --column-0: 11.5px;
+    --column-1: 22.5px;
+    --column-2: 30px;
+    --column-3: 28.5px;
+    --column-4: 48px;
+    --column-5: 49.5px;
+    --column-6: 78px;
+    --column-7: 35.5px;
+    --column-8: 5px;
+    --column-9: 45.5px;
+    --column-10: 101px;
+    --column-11: 28.5px;
+    --column-12: 128px;
+    --column-13: 52.5px;
+    --column-14: 13px;
+  }
+  24% {
+    --column-0: 7px;
+    --column-1: 9px;
+    --column-2: 26px;
+    --column-3: 45px;
+    --column-4: 41.5px;
+    --column-5: 23px;
+    --column-6: 39px;
+    --column-7: 8.5px;
+    --column-8: 53px;
+    --column-9: 23.5px;
+    --column-10: 61.5px;
+    --column-11: 116px;
+    --column-12: 22px;
+    --column-13: 7px;
+    --column-14: 62px;
+  }
+  25% {
+    --column-0: 2px;
+    --column-1: 0.5px;
+    --column-2: 29px;
+    --column-3: 7px;
+    --column-4: 16px;
+    --column-5: 50px;
+    --column-6: 59px;
+    --column-7: 42px;
+    --column-8: 95.5px;
+    --column-9: 41.5px;
+    --column-10: 53.5px;
+    --column-11: 5px;
+    --column-12: 45px;
+    --column-13: 49px;
+    --column-14: 32px;
+  }
+  26% {
+    --column-0: 11px;
+    --column-1: 9px;
+    --column-2: 24.5px;
+    --column-3: 3.5px;
+    --column-4: 14px;
+    --column-5: 46.5px;
+    --column-6: 59px;
+    --column-7: 3px;
+    --column-8: 37.5px;
+    --column-9: 105px;
+    --column-10: 114.5px;
+    --column-11: 115.5px;
+    --column-12: 99.5px;
+    --column-13: 1px;
+    --column-14: 138.5px;
+  }
+  27% {
+    --column-0: 9.5px;
+    --column-1: 22px;
+    --column-2: 29.5px;
+    --column-3: 6.5px;
+    --column-4: 44.5px;
+    --column-5: 33px;
+    --column-6: 71px;
+    --column-7: 75px;
+    --column-8: 43px;
+    --column-9: 62px;
+    --column-10: 76.5px;
+    --column-11: 122.5px;
+    --column-12: 23.5px;
+    --column-13: 145.5px;
+    --column-14: 41px;
+  }
+  28% {
+    --column-0: 0.5px;
+    --column-1: 11px;
+    --column-2: 31px;
+    --column-3: 33px;
+    --column-4: 44px;
+    --column-5: 69px;
+    --column-6: 27.5px;
+    --column-7: 44.5px;
+    --column-8: 39.5px;
+    --column-9: 78.5px;
+    --column-10: 36px;
+    --column-11: 81px;
+    --column-12: 42px;
+    --column-13: 14.5px;
+    --column-14: 91.5px;
+  }
+  29% {
+    --column-0: 0.5px;
+    --column-1: 12px;
+    --column-2: 19.5px;
+    --column-3: 31px;
+    --column-4: 17.5px;
+    --column-5: 5px;
+    --column-6: 21.5px;
+    --column-7: 19.5px;
+    --column-8: 10.5px;
+    --column-9: 59.5px;
+    --column-10: 18.5px;
+    --column-11: 41px;
+    --column-12: 76px;
+    --column-13: 87px;
+    --column-14: 125.5px;
+  }
+  30% {
+    --column-0: 2px;
+    --column-1: 11.5px;
+    --column-2: 10px;
+    --column-3: 25px;
+    --column-4: 30.5px;
+    --column-5: 5.5px;
+    --column-6: 27px;
+    --column-7: 7px;
+    --column-8: 65px;
+    --column-9: 110px;
+    --column-10: 47px;
+    --column-11: 86px;
+    --column-12: 5.5px;
+    --column-13: 125.5px;
+    --column-14: 59px;
+  }
+  31% {
+    --column-0: 1.5px;
+    --column-1: 2.5px;
+    --column-2: 20.5px;
+    --column-3: 10.5px;
+    --column-4: 10px;
+    --column-5: 21.5px;
+    --column-6: 80.5px;
+    --column-7: 24.5px;
+    --column-8: 45px;
+    --column-9: 45.5px;
+    --column-10: 52px;
+    --column-11: 40.5px;
+    --column-12: 71.5px;
+    --column-13: 106.5px;
+    --column-14: 133px;
+  }
+  32% {
+    --column-0: 6.5px;
+    --column-1: 2.5px;
+    --column-2: 16px;
+    --column-3: 20.5px;
+    --column-4: 4px;
+    --column-5: 13.5px;
+    --column-6: 2.5px;
+    --column-7: 89.5px;
+    --column-8: 81px;
+    --column-9: 39.5px;
+    --column-10: 121.5px;
+    --column-11: 3px;
+    --column-12: 70.5px;
+    --column-13: 90.5px;
+    --column-14: 72px;
+  }
+  33% {
+    --column-0: 11px;
+    --column-1: 16.5px;
+    --column-2: 34px;
+    --column-3: 41.5px;
+    --column-4: 9px;
+    --column-5: 3px;
+    --column-6: 28px;
+    --column-7: 33px;
+    --column-8: 3px;
+    --column-9: 65.5px;
+    --column-10: 31px;
+    --column-11: 106px;
+    --column-12: 77px;
+    --column-13: 14px;
+    --column-14: 126px;
+  }
+  34% {
+    --column-0: 7px;
+    --column-1: 9px;
+    --column-2: 1px;
+    --column-3: 31.5px;
+    --column-4: 15.5px;
+    --column-5: 32px;
+    --column-6: 52.5px;
+    --column-7: 57px;
+    --column-8: 67.5px;
+    --column-9: 69px;
+    --column-10: 63px;
+    --column-11: 91px;
+    --column-12: 121.5px;
+    --column-13: 110px;
+    --column-14: 136.5px;
+  }
+  35% {
+    --column-0: 3.5px;
+    --column-1: 20px;
+    --column-2: 20.5px;
+    --column-3: 39px;
+    --column-4: 20.5px;
+    --column-5: 54.5px;
+    --column-6: 48px;
+    --column-7: 15.5px;
+    --column-8: 96px;
+    --column-9: 61px;
+    --column-10: 112.5px;
+    --column-11: 97.5px;
+    --column-12: 79.5px;
+    --column-13: 133.5px;
+    --column-14: 90px;
+  }
+  36% {
+    --column-0: 7.5px;
+    --column-1: 1.5px;
+    --column-2: 5.5px;
+    --column-3: 13.5px;
+    --column-4: 2px;
+    --column-5: 64px;
+    --column-6: 79px;
+    --column-7: 51px;
+    --column-8: 75.5px;
+    --column-9: 111.5px;
+    --column-10: 81px;
+    --column-11: 39.5px;
+    --column-12: 51px;
+    --column-13: 44px;
+    --column-14: 40.5px;
+  }
+  37% {
+    --column-0: 4px;
+    --column-1: 10.5px;
+    --column-2: 10.5px;
+    --column-3: 39px;
+    --column-4: 2px;
+    --column-5: 58.5px;
+    --column-6: 69.5px;
+    --column-7: 16.5px;
+    --column-8: 42.5px;
+    --column-9: 114.5px;
+    --column-10: 46.5px;
+    --column-11: 86.5px;
+    --column-12: 141px;
+    --column-13: 67.5px;
+    --column-14: 157.5px;
+  }
+  38% {
+    --column-0: 7.5px;
+    --column-1: 12px;
+    --column-2: 23px;
+    --column-3: 24.5px;
+    --column-4: 11.5px;
+    --column-5: 53px;
+    --column-6: 18px;
+    --column-7: 5.5px;
+    --column-8: 103px;
+    --column-9: 30.5px;
+    --column-10: 108px;
+    --column-11: 20px;
+    --column-12: 34.5px;
+    --column-13: 160px;
+    --column-14: 165.5px;
+  }
+  39% {
+    --column-0: 7px;
+    --column-1: 2.5px;
+    --column-2: 32px;
+    --column-3: 37.5px;
+    --column-4: 54px;
+    --column-5: 62.5px;
+    --column-6: 44px;
+    --column-7: 2.5px;
+    --column-8: 14.5px;
+    --column-9: 32px;
+    --column-10: 104px;
+    --column-11: 13.5px;
+    --column-12: 141px;
+    --column-13: 113px;
+    --column-14: 82.5px;
+  }
+  40% {
+    --column-0: 5.5px;
+    --column-1: 10.5px;
+    --column-2: 34px;
+    --column-3: 17.5px;
+    --column-4: 21.5px;
+    --column-5: 3px;
+    --column-6: 77.5px;
+    --column-7: 58px;
+    --column-8: 51px;
+    --column-9: 88px;
+    --column-10: 30.5px;
+    --column-11: 27px;
+    --column-12: 18px;
+    --column-13: 50.5px;
+    --column-14: 58px;
+  }
+  41% {
+    --column-0: 11px;
+    --column-1: 12px;
+    --column-2: 26px;
+    --column-3: 12px;
+    --column-4: 37px;
+    --column-5: 31px;
+    --column-6: 2px;
+    --column-7: 54px;
+    --column-8: 54.5px;
+    --column-9: 71px;
+    --column-10: 108px;
+    --column-11: 110px;
+    --column-12: 36.5px;
+    --column-13: 48.5px;
+    --column-14: 37.5px;
+  }
+  42% {
+    --column-0: 4px;
+    --column-1: 11px;
+    --column-2: 11px;
+    --column-3: 31px;
+    --column-4: 13px;
+    --column-5: 19.5px;
+    --column-6: 20px;
+    --column-7: 49px;
+    --column-8: 39px;
+    --column-9: 68.5px;
+    --column-10: 28.5px;
+    --column-11: 117.5px;
+    --column-12: 135px;
+    --column-13: 76.5px;
+    --column-14: 124.5px;
+  }
+  43% {
+    --column-0: 10.5px;
+    --column-1: 4.5px;
+    --column-2: 11.5px;
+    --column-3: 31px;
+    --column-4: 52.5px;
+    --column-5: 51px;
+    --column-6: 57px;
+    --column-7: 63.5px;
+    --column-8: 23.5px;
+    --column-9: 83px;
+    --column-10: 1.5px;
+    --column-11: 39.5px;
+    --column-12: 8px;
+    --column-13: 118.5px;
+    --column-14: 80px;
+  }
+  44% {
+    --column-0: 8px;
+    --column-1: 19.5px;
+    --column-2: 7.5px;
+    --column-3: 19px;
+    --column-4: 11.5px;
+    --column-5: 45px;
+    --column-6: 79.5px;
+    --column-7: 64.5px;
+    --column-8: 71.5px;
+    --column-9: 108.5px;
+    --column-10: 122px;
+    --column-11: 83px;
+    --column-12: 75px;
+    --column-13: 23.5px;
+    --column-14: 97.5px;
+  }
+  45% {
+    --column-0: 10.5px;
+    --column-1: 5.5px;
+    --column-2: 22.5px;
+    --column-3: 30px;
+    --column-4: 30.5px;
+    --column-5: 18px;
+    --column-6: 6px;
+    --column-7: 26px;
+    --column-8: 38px;
+    --column-9: 91px;
+    --column-10: 68px;
+    --column-11: 22px;
+    --column-12: 63.5px;
+    --column-13: 79px;
+    --column-14: 52px;
+  }
+  46% {
+    --column-0: 8px;
+    --column-1: 21.5px;
+    --column-2: 23.5px;
+    --column-3: 35.5px;
+    --column-4: 27px;
+    --column-5: 19.5px;
+    --column-6: 39.5px;
+    --column-7: 33px;
+    --column-8: 8px;
+    --column-9: 55px;
+    --column-10: 23.5px;
+    --column-11: 70px;
+    --column-12: 20px;
+    --column-13: 26.5px;
+    --column-14: 56.5px;
+  }
+  47% {
+    --column-0: 1.5px;
+    --column-1: 9px;
+    --column-2: 34px;
+    --column-3: 35.5px;
+    --column-4: 38px;
+    --column-5: 13px;
+    --column-6: 37px;
+    --column-7: 76px;
+    --column-8: 6.5px;
+    --column-9: 43.5px;
+    --column-10: 58px;
+    --column-11: 74px;
+    --column-12: 42px;
+    --column-13: 123px;
+    --column-14: 19px;
+  }
+  48% {
+    --column-0: 11px;
+    --column-1: 17.5px;
+    --column-2: 0.5px;
+    --column-3: 23px;
+    --column-4: 12.5px;
+    --column-5: 10.5px;
+    --column-6: 59px;
+    --column-7: 47.5px;
+    --column-8: 84px;
+    --column-9: 111px;
+    --column-10: 11.5px;
+    --column-11: 74.5px;
+    --column-12: 9px;
+    --column-13: 122.5px;
+    --column-14: 128px;
+  }
+  49% {
+    --column-0: 5.5px;
+    --column-1: 11.5px;
+    --column-2: 27px;
+    --column-3: 1px;
+    --column-4: 11.5px;
+    --column-5: 25px;
+    --column-6: 71px;
+    --column-7: 12.5px;
+    --column-8: 45.5px;
+    --column-9: 62.5px;
+    --column-10: 98px;
+    --column-11: 10.5px;
+    --column-12: 67px;
+    --column-13: 133.5px;
+    --column-14: 74px;
+  }
+  50% {
+    --column-0: 10px;
+    --column-1: 15.5px;
+    --column-2: 32px;
+    --column-3: 13px;
+    --column-4: 42px;
+    --column-5: 6.5px;
+    --column-6: 30.5px;
+    --column-7: 6.5px;
+    --column-8: 10px;
+    --column-9: 3.5px;
+    --column-10: 46.5px;
+    --column-11: 137px;
+    --column-12: 143.5px;
+    --column-13: 61px;
+    --column-14: 71px;
+  }
+  51% {
+    --column-0: 4px;
+    --column-1: 22.5px;
+    --column-2: 4px;
+    --column-3: 27px;
+    --column-4: 46px;
+    --column-5: 6px;
+    --column-6: 17.5px;
+    --column-7: 70.5px;
+    --column-8: 21px;
+    --column-9: 45.5px;
+    --column-10: 6px;
+    --column-11: 57px;
+    --column-12: 110px;
+    --column-13: 116px;
+    --column-14: 128.5px;
+  }
+  52% {
+    --column-0: 7.5px;
+    --column-1: 1px;
+    --column-2: 25px;
+    --column-3: 4.5px;
+    --column-4: 0.5px;
+    --column-5: 7px;
+    --column-6: 56.5px;
+    --column-7: 63px;
+    --column-8: 28.5px;
+    --column-9: 23px;
+    --column-10: 39.5px;
+    --column-11: 51.5px;
+    --column-12: 88px;
+    --column-13: 15px;
+    --column-14: 30.5px;
+  }
+  53% {
+    --column-0: 11.5px;
+    --column-1: 3.5px;
+    --column-2: 24.5px;
+    --column-3: 28px;
+    --column-4: 24px;
+    --column-5: 56px;
+    --column-6: 72px;
+    --column-7: 18.5px;
+    --column-8: 69.5px;
+    --column-9: 114px;
+    --column-10: 63px;
+    --column-11: 55px;
+    --column-12: 20.5px;
+    --column-13: 103.5px;
+    --column-14: 140px;
+  }
+  54% {
+    --column-0: 6.5px;
+    --column-1: 8.5px;
+    --column-2: 10.5px;
+    --column-3: 19.5px;
+    --column-4: 8.5px;
+    --column-5: 32.5px;
+    --column-6: 40.5px;
+    --column-7: 49.5px;
+    --column-8: 7.5px;
+    --column-9: 92px;
+    --column-10: 87.5px;
+    --column-11: 68px;
+    --column-12: 40.5px;
+    --column-13: 69px;
+    --column-14: 51.5px;
+  }
+  55% {
+    --column-0: 10.5px;
+    --column-1: 11px;
+    --column-2: 13px;
+    --column-3: 34.5px;
+    --column-4: 30.5px;
+    --column-5: 68.5px;
+    --column-6: 16px;
+    --column-7: 52.5px;
+    --column-8: 61.5px;
+    --column-9: 59.5px;
+    --column-10: 54px;
+    --column-11: 62px;
+    --column-12: 146.5px;
+    --column-13: 1px;
+    --column-14: 91.5px;
+  }
+  56% {
+    --column-0: 8px;
+    --column-1: 16px;
+    --column-2: 18px;
+    --column-3: 31px;
+    --column-4: 54px;
+    --column-5: 40px;
+    --column-6: 40px;
+    --column-7: 56.5px;
+    --column-8: 45.5px;
+    --column-9: 51.5px;
+    --column-10: 3px;
+    --column-11: 94px;
+    --column-12: 99.5px;
+    --column-13: 42px;
+    --column-14: 15px;
+  }
+  57% {
+    --column-0: 7px;
+    --column-1: 19.5px;
+    --column-2: 7px;
+    --column-3: 15.5px;
+    --column-4: 8px;
+    --column-5: 22px;
+    --column-6: 73.5px;
+    --column-7: 6.5px;
+    --column-8: 82px;
+    --column-9: 20.5px;
+    --column-10: 99px;
+    --column-11: 51.5px;
+    --column-12: 51.5px;
+    --column-13: 95.5px;
+    --column-14: 48px;
+  }
+  58% {
+    --column-0: 6.5px;
+    --column-1: 16px;
+    --column-2: 23.5px;
+    --column-3: 27.5px;
+    --column-4: 52.5px;
+    --column-5: 57px;
+    --column-6: 63px;
+    --column-7: 5px;
+    --column-8: 89px;
+    --column-9: 28px;
+    --column-10: 76px;
+    --column-11: 100.5px;
+    --column-12: 85.5px;
+    --column-13: 114px;
+    --column-14: 108.5px;
+  }
+  59% {
+    --column-0: 4px;
+    --column-1: 13.5px;
+    --column-2: 3px;
+    --column-3: 17px;
+    --column-4: 2px;
+    --column-5: 26px;
+    --column-6: 7px;
+    --column-7: 57.5px;
+    --column-8: 45px;
+    --column-9: 78.5px;
+    --column-10: 41px;
+    --column-11: 11.5px;
+    --column-12: 31px;
+    --column-13: 39px;
+    --column-14: 25.5px;
+  }
+  60% {
+    --column-0: 5px;
+    --column-1: 22px;
+    --column-2: 9.5px;
+    --column-3: 19px;
+    --column-4: 54.5px;
+    --column-5: 29px;
+    --column-6: 21px;
+    --column-7: 61px;
+    --column-8: 102.5px;
+    --column-9: 80px;
+    --column-10: 80px;
+    --column-11: 62px;
+    --column-12: 67.5px;
+    --column-13: 53.5px;
+    --column-14: 60.5px;
+  }
+  61% {
+    --column-0: 3px;
+    --column-1: 4px;
+    --column-2: 16.5px;
+    --column-3: 15.5px;
+    --column-4: 24px;
+    --column-5: 45px;
+    --column-6: 51px;
+    --column-7: 87px;
+    --column-8: 57.5px;
+    --column-9: 8.5px;
+    --column-10: 78.5px;
+    --column-11: 14px;
+    --column-12: 15px;
+    --column-13: 13.5px;
+    --column-14: 60.5px;
+  }
+  62% {
+    --column-0: 9.5px;
+    --column-1: 13px;
+    --column-2: 31px;
+    --column-3: 23px;
+    --column-4: 35.5px;
+    --column-5: 64.5px;
+    --column-6: 60.5px;
+    --column-7: 45.5px;
+    --column-8: 49.5px;
+    --column-9: 34.5px;
+    --column-10: 69px;
+    --column-11: 28.5px;
+    --column-12: 129px;
+    --column-13: 134.5px;
+    --column-14: 117px;
+  }
+  63% {
+    --column-0: 9.5px;
+    --column-1: 23px;
+    --column-2: 1.5px;
+    --column-3: 3px;
+    --column-4: 33px;
+    --column-5: 40.5px;
+    --column-6: 25px;
+    --column-7: 37px;
+    --column-8: 2.5px;
+    --column-9: 109.5px;
+    --column-10: 84.5px;
+    --column-11: 29.5px;
+    --column-12: 82px;
+    --column-13: 12.5px;
+    --column-14: 8px;
+  }
+  64% {
+    --column-0: 5px;
+    --column-1: 2px;
+    --column-2: 28.5px;
+    --column-3: 45px;
+    --column-4: 18px;
+    --column-5: 2px;
+    --column-6: 51px;
+    --column-7: 68px;
+    --column-8: 0.5px;
+    --column-9: 24.5px;
+    --column-10: 8.5px;
+    --column-11: 26.5px;
+    --column-12: 67px;
+    --column-13: 5px;
+    --column-14: 31px;
+  }
+  65% {
+    --column-0: 2.5px;
+    --column-1: 18.5px;
+    --column-2: 31.5px;
+    --column-3: 11.5px;
+    --column-4: 36px;
+    --column-5: 8.5px;
+    --column-6: 14px;
+    --column-7: 30px;
+    --column-8: 103.5px;
+    --column-9: 107.5px;
+    --column-10: 99.5px;
+    --column-11: 113.5px;
+    --column-12: 86px;
+    --column-13: 152px;
+    --column-14: 7px;
+  }
+  66% {
+    --column-0: 3.5px;
+    --column-1: 8.5px;
+    --column-2: 11.5px;
+    --column-3: 9px;
+    --column-4: 13.5px;
+    --column-5: 66px;
+    --column-6: 34px;
+    --column-7: 59px;
+    --column-8: 14.5px;
+    --column-9: 88.5px;
+    --column-10: 74px;
+    --column-11: 25px;
+    --column-12: 24px;
+    --column-13: 114px;
+    --column-14: 52px;
+  }
+  67% {
+    --column-0: 2.5px;
+    --column-1: 9.5px;
+    --column-2: 7px;
+    --column-3: 25.5px;
+    --column-4: 48px;
+    --column-5: 53.5px;
+    --column-6: 37px;
+    --column-7: 34.5px;
+    --column-8: 66px;
+    --column-9: 73px;
+    --column-10: 88.5px;
+    --column-11: 53px;
+    --column-12: 104px;
+    --column-13: 117.5px;
+    --column-14: 160px;
+  }
+  68% {
+    --column-0: 5px;
+    --column-1: 20.5px;
+    --column-2: 10.5px;
+    --column-3: 23px;
+    --column-4: 9.5px;
+    --column-5: 49px;
+    --column-6: 64px;
+    --column-7: 33px;
+    --column-8: 70.5px;
+    --column-9: 64px;
+    --column-10: 94.5px;
+    --column-11: 23px;
+    --column-12: 83.5px;
+    --column-13: 32px;
+    --column-14: 81.5px;
+  }
+  69% {
+    --column-0: 10.5px;
+    --column-1: 21.5px;
+    --column-2: 16.5px;
+    --column-3: 16px;
+    --column-4: 46px;
+    --column-5: 50px;
+    --column-6: 55.5px;
+    --column-7: 60px;
+    --column-8: 63.5px;
+    --column-9: 63px;
+    --column-10: 82.5px;
+    --column-11: 52.5px;
+    --column-12: 143.5px;
+    --column-13: 69.5px;
+    --column-14: 23.5px;
+  }
+  70% {
+    --column-0: 10.5px;
+    --column-1: 8px;
+    --column-2: 12.5px;
+    --column-3: 30px;
+    --column-4: 55px;
+    --column-5: 38.5px;
+    --column-6: 70.5px;
+    --column-7: 2.5px;
+    --column-8: 59.5px;
+    --column-9: 29.5px;
+    --column-10: 124px;
+    --column-11: 128.5px;
+    --column-12: 95.5px;
+    --column-13: 58.5px;
+    --column-14: 28.5px;
+  }
+  71% {
+    --column-0: 8.5px;
+    --column-1: 21.5px;
+    --column-2: 10.5px;
+    --column-3: 26px;
+    --column-4: 6.5px;
+    --column-5: 57px;
+    --column-6: 51.5px;
+    --column-7: 75.5px;
+    --column-8: 1.5px;
+    --column-9: 46.5px;
+    --column-10: 89px;
+    --column-11: 86.5px;
+    --column-12: 140.5px;
+    --column-13: 30px;
+    --column-14: 82px;
+  }
+  72% {
+    --column-0: 1px;
+    --column-1: 7.5px;
+    --column-2: 9px;
+    --column-3: 5px;
+    --column-4: 46.5px;
+    --column-5: 47px;
+    --column-6: 28px;
+    --column-7: 89.5px;
+    --column-8: 86.5px;
+    --column-9: 81.5px;
+    --column-10: 118.5px;
+    --column-11: 64px;
+    --column-12: 144px;
+    --column-13: 83.5px;
+    --column-14: 53.5px;
+  }
+  73% {
+    --column-0: 8.5px;
+    --column-1: 10.5px;
+    --column-2: 31.5px;
+    --column-3: 24.5px;
+    --column-4: 32.5px;
+    --column-5: 7px;
+    --column-6: 24.5px;
+    --column-7: 41.5px;
+    --column-8: 12px;
+    --column-9: 64.5px;
+    --column-10: 100px;
+    --column-11: 59.5px;
+    --column-12: 86px;
+    --column-13: 88px;
+    --column-14: 160px;
+  }
+  74% {
+    --column-0: 2px;
+    --column-1: 20.5px;
+    --column-2: 21.5px;
+    --column-3: 22px;
+    --column-4: 54px;
+    --column-5: 54px;
+    --column-6: 73px;
+    --column-7: 28px;
+    --column-8: 83.5px;
+    --column-9: 32px;
+    --column-10: 99px;
+    --column-11: 128.5px;
+    --column-12: 31.5px;
+    --column-13: 87px;
+    --column-14: 83px;
+  }
+  75% {
+    --column-0: 10.5px;
+    --column-1: 8px;
+    --column-2: 0.5px;
+    --column-3: 13px;
+    --column-4: 7px;
+    --column-5: 32.5px;
+    --column-6: 66px;
+    --column-7: 12px;
+    --column-8: 73.5px;
+    --column-9: 35px;
+    --column-10: 40.5px;
+    --column-11: 7.5px;
+    --column-12: 116px;
+    --column-13: 97px;
+    --column-14: 47px;
+  }
+  76% {
+    --column-0: 8.5px;
+    --column-1: 9px;
+    --column-2: 10px;
+    --column-3: 8px;
+    --column-4: 49.5px;
+    --column-5: 55px;
+    --column-6: 35px;
+    --column-7: 10px;
+    --column-8: 32.5px;
+    --column-9: 92.5px;
+    --column-10: 15px;
+    --column-11: 85.5px;
+    --column-12: 109px;
+    --column-13: 40px;
+    --column-14: 140px;
+  }
+  77% {
+    --column-0: 9px;
+    --column-1: 21.5px;
+    --column-2: 6.5px;
+    --column-3: 5.5px;
+    --column-4: 25.5px;
+    --column-5: 21px;
+    --column-6: 21px;
+    --column-7: 70.5px;
+    --column-8: 12px;
+    --column-9: 55px;
+    --column-10: 8.5px;
+    --column-11: 135.5px;
+    --column-12: 63.5px;
+    --column-13: 46.5px;
+    --column-14: 159.5px;
+  }
+  78% {
+    --column-0: 6.5px;
+    --column-1: 8.5px;
+    --column-2: 4.5px;
+    --column-3: 13.5px;
+    --column-4: 7px;
+    --column-5: 15px;
+    --column-6: 45px;
+    --column-7: 90.5px;
+    --column-8: 15px;
+    --column-9: 1.5px;
+    --column-10: 43px;
+    --column-11: 1.5px;
+    --column-12: 106px;
+    --column-13: 28px;
+    --column-14: 145px;
+  }
+  79% {
+    --column-0: 4px;
+    --column-1: 10px;
+    --column-2: 29px;
+    --column-3: 15px;
+    --column-4: 10px;
+    --column-5: 23px;
+    --column-6: 14px;
+    --column-7: 26.5px;
+    --column-8: 7.5px;
+    --column-9: 106px;
+    --column-10: 126.5px;
+    --column-11: 80.5px;
+    --column-12: 146px;
+    --column-13: 121.5px;
+    --column-14: 133px;
+  }
+  80% {
+    --column-0: 5.5px;
+    --column-1: 13px;
+    --column-2: 14.5px;
+    --column-3: 24.5px;
+    --column-4: 48px;
+    --column-5: 66px;
+    --column-6: 72.5px;
+    --column-7: 62.5px;
+    --column-8: 44px;
+    --column-9: 58.5px;
+    --column-10: 75.5px;
+    --column-11: 128px;
+    --column-12: 77.5px;
+    --column-13: 80px;
+    --column-14: 91px;
+  }
+  81% {
+    --column-0: 1.5px;
+    --column-1: 4.5px;
+    --column-2: 28px;
+    --column-3: 46px;
+    --column-4: 25.5px;
+    --column-5: 31.5px;
+    --column-6: 49.5px;
+    --column-7: 20.5px;
+    --column-8: 46.5px;
+    --column-9: 75.5px;
+    --column-10: 107.5px;
+    --column-11: 44.5px;
+    --column-12: 76.5px;
+    --column-13: 30.5px;
+    --column-14: 74.5px;
+  }
+  82% {
+    --column-0: 3.5px;
+    --column-1: 5.5px;
+    --column-2: 10.5px;
+    --column-3: 22px;
+    --column-4: 18px;
+    --column-5: 36px;
+    --column-6: 22px;
+    --column-7: 1px;
+    --column-8: 18.5px;
+    --column-9: 9px;
+    --column-10: 44px;
+    --column-11: 81px;
+    --column-12: 76.5px;
+    --column-13: 74px;
+    --column-14: 128px;
+  }
+  83% {
+    --column-0: 6.5px;
+    --column-1: 10.5px;
+    --column-2: 27.5px;
+    --column-3: 38px;
+    --column-4: 41.5px;
+    --column-5: 35.5px;
+    --column-6: 12.5px;
+    --column-7: 72px;
+    --column-8: 95px;
+    --column-9: 90.5px;
+    --column-10: 17px;
+    --column-11: 15.5px;
+    --column-12: 138px;
+    --column-13: 86.5px;
+    --column-14: 34px;
+  }
+  84% {
+    --column-0: 1px;
+    --column-1: 8.5px;
+    --column-2: 15px;
+    --column-3: 19px;
+    --column-4: 54.5px;
+    --column-5: 3px;
+    --column-6: 8.5px;
+    --column-7: 78.5px;
+    --column-8: 67px;
+    --column-9: 78px;
+    --column-10: 59px;
+    --column-11: 36.5px;
+    --column-12: 102.5px;
+    --column-13: 67.5px;
+    --column-14: 84.5px;
+  }
+  85% {
+    --column-0: 9.5px;
+    --column-1: 18.5px;
+    --column-2: 26.5px;
+    --column-3: 17.5px;
+    --column-4: 39px;
+    --column-5: 51.5px;
+    --column-6: 41px;
+    --column-7: 58px;
+    --column-8: 66.5px;
+    --column-9: 7px;
+    --column-10: 0.5px;
+    --column-11: 135.5px;
+    --column-12: 144px;
+    --column-13: 18.5px;
+    --column-14: 161.5px;
+  }
+  86% {
+    --column-0: 11.5px;
+    --column-1: 17px;
+    --column-2: 12px;
+    --column-3: 31px;
+    --column-4: 37px;
+    --column-5: 52.5px;
+    --column-6: 70.5px;
+    --column-7: 63px;
+    --column-8: 30.5px;
+    --column-9: 41.5px;
+    --column-10: 62.5px;
+    --column-11: 25px;
+    --column-12: 6.5px;
+    --column-13: 72.5px;
+    --column-14: 162px;
+  }
+  87% {
+    --column-0: 4px;
+    --column-1: 5px;
+    --column-2: 18.5px;
+    --column-3: 27.5px;
+    --column-4: 39px;
+    --column-5: 67px;
+    --column-6: 74.5px;
+    --column-7: 49.5px;
+    --column-8: 58.5px;
+    --column-9: 67.5px;
+    --column-10: 58.5px;
+    --column-11: 107px;
+    --column-12: 146px;
+    --column-13: 32.5px;
+    --column-14: 165px;
+  }
+  88% {
+    --column-0: 10px;
+    --column-1: 15px;
+    --column-2: 9px;
+    --column-3: 37.5px;
+    --column-4: 12px;
+    --column-5: 28px;
+    --column-6: 30px;
+    --column-7: 58px;
+    --column-8: 6px;
+    --column-9: 20px;
+    --column-10: 23px;
+    --column-11: 42px;
+    --column-12: 107px;
+    --column-13: 149.5px;
+    --column-14: 148.5px;
+  }
+  89% {
+    --column-0: 9px;
+    --column-1: 23px;
+    --column-2: 25.5px;
+    --column-3: 1.5px;
+    --column-4: 22px;
+    --column-5: 46px;
+    --column-6: 9.5px;
+    --column-7: 39px;
+    --column-8: 60px;
+    --column-9: 102.5px;
+    --column-10: 81.5px;
+    --column-11: 90.5px;
+    --column-12: 132.5px;
+    --column-13: 99px;
+    --column-14: 86.5px;
+  }
+  90% {
+    --column-0: 7px;
+    --column-1: 20px;
+    --column-2: 14px;
+    --column-3: 20.5px;
+    --column-4: 11px;
+    --column-5: 54.5px;
+    --column-6: 74px;
+    --column-7: 22.5px;
+    --column-8: 61px;
+    --column-9: 21.5px;
+    --column-10: 64.5px;
+    --column-11: 99.5px;
+    --column-12: 142px;
+    --column-13: 4px;
+    --column-14: 52.5px;
+  }
+  91% {
+    --column-0: 10px;
+    --column-1: 7.5px;
+    --column-2: 1px;
+    --column-3: 22.5px;
+    --column-4: 51.5px;
+    --column-5: 36.5px;
+    --column-6: 56px;
+    --column-7: 60.5px;
+    --column-8: 75.5px;
+    --column-9: 55.5px;
+    --column-10: 7.5px;
+    --column-11: 66px;
+    --column-12: 116px;
+    --column-13: 110.5px;
+    --column-14: 34.5px;
+  }
+  92% {
+    --column-0: 6px;
+    --column-1: 10px;
+    --column-2: 20.5px;
+    --column-3: 1.5px;
+    --column-4: 20.5px;
+    --column-5: 2.5px;
+    --column-6: 41.5px;
+    --column-7: 25.5px;
+    --column-8: 77.5px;
+    --column-9: 95.5px;
+    --column-10: 67px;
+    --column-11: 27px;
+    --column-12: 78.5px;
+    --column-13: 71px;
+    --column-14: 24px;
+  }
+  93% {
+    --column-0: 6.5px;
+    --column-1: 20px;
+    --column-2: 24.5px;
+    --column-3: 10.5px;
+    --column-4: 21px;
+    --column-5: 2px;
+    --column-6: 49px;
+    --column-7: 50px;
+    --column-8: 26.5px;
+    --column-9: 51.5px;
+    --column-10: 85px;
+    --column-11: 95.5px;
+    --column-12: 36px;
+    --column-13: 69px;
+    --column-14: 28px;
+  }
+  94% {
+    --column-0: 7px;
+    --column-1: 14.5px;
+    --column-2: 15px;
+    --column-3: 17.5px;
+    --column-4: 37.5px;
+    --column-5: 32.5px;
+    --column-6: 20.5px;
+    --column-7: 30px;
+    --column-8: 34px;
+    --column-9: 53px;
+    --column-10: 71.5px;
+    --column-11: 21px;
+    --column-12: 14px;
+    --column-13: 77px;
+    --column-14: 46px;
+  }
+  95% {
+    --column-0: 5.5px;
+    --column-1: 20.5px;
+    --column-2: 18px;
+    --column-3: 31.5px;
+    --column-4: 17px;
+    --column-5: 57.5px;
+    --column-6: 77.5px;
+    --column-7: 43px;
+    --column-8: 49px;
+    --column-9: 68px;
+    --column-10: 120.5px;
+    --column-11: 53.5px;
+    --column-12: 56px;
+    --column-13: 33px;
+    --column-14: 50px;
+  }
+  96% {
+    --column-0: 7px;
+    --column-1: 3px;
+    --column-2: 4px;
+    --column-3: 41.5px;
+    --column-4: 48px;
+    --column-5: 65.5px;
+    --column-6: 5px;
+    --column-7: 4px;
+    --column-8: 7px;
+    --column-9: 102.5px;
+    --column-10: 20.5px;
+    --column-11: 11px;
+    --column-12: 84px;
+    --column-13: 116.5px;
+    --column-14: 126px;
+  }
+  97% {
+    --column-0: 3.5px;
+    --column-1: 10.5px;
+    --column-2: 17.5px;
+    --column-3: 16.5px;
+    --column-4: 29.5px;
+    --column-5: 44px;
+    --column-6: 26.5px;
+    --column-7: 7px;
+    --column-8: 5px;
+    --column-9: 53.5px;
+    --column-10: 34px;
+    --column-11: 125px;
+    --column-12: 41px;
+    --column-13: 85.5px;
+    --column-14: 94.5px;
+  }
+  98% {
+    --column-0: 4px;
+    --column-1: 21.5px;
+    --column-2: 13.5px;
+    --column-3: 15px;
+    --column-4: 50.5px;
+    --column-5: 38px;
+    --column-6: 14.5px;
+    --column-7: 21.5px;
+    --column-8: 33px;
+    --column-9: 108.5px;
+    --column-10: 60.5px;
+    --column-11: 103px;
+    --column-12: 107.5px;
+    --column-13: 107px;
+    --column-14: 135.5px;
+  }
+  99% {
+    --column-0: 6px;
+    --column-1: 21.5px;
+    --column-2: 33.5px;
+    --column-3: 32px;
+    --column-4: 24px;
+    --column-5: 3px;
+    --column-6: 4px;
+    --column-7: 89px;
+    --column-8: 37.5px;
+    --column-9: 88px;
+    --column-10: 2.5px;
+    --column-11: 95.5px;
+    --column-12: 120.5px;
+    --column-13: 68px;
+    --column-14: 167.5px;
+  }
+}
\ No newline at end of file
diff --git a/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/license.txt b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/license.txt
new file mode 100644
index 0000000..673a288
--- /dev/null
+++ b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Artem (https://codepen.io/artyschein/pen/gOpxeZJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/src/index.haml b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/src/index.haml
new file mode 100644
index 0000000..e6ea502
--- /dev/null
+++ b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/src/index.haml
@@ -0,0 +1,4 @@
+.artboard
+	
+
+%a.collection(href="https://codepen.io/collection/AryRaN/" target="_blank") Stripped art<br>collection
diff --git a/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/src/script.babel b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/src/script.babel
new file mode 100644
index 0000000..a5bb4aa
--- /dev/null
+++ b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/src/script.babel
@@ -0,0 +1,9 @@
+var column;
+for (column = 0; column < 15; column++) {
+	CSS.registerProperty({
+		name: `--column-${column}`,
+		syntax: '<length>', 
+		initialValue: '0px', 
+		inherits: true
+	});
+}
\ No newline at end of file
diff --git a/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/src/style.sass b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/src/style.sass
new file mode 100644
index 0000000..fe462a4
--- /dev/null
+++ b/generative-sketch-w-css-variables-repeating-linear-gradient-sass-random-for-cpc-generative-and-codepenchallenge/src/style.sass
@@ -0,0 +1,57 @@
+$n: 15
+$size: ceil(340 / $n)
+$sizePx: $size*1px
+$bg: #333
+$border: #f1f1f1
+
+@import url("https://fonts.googleapis.com/css?family=Anton")
+
+body
+	height: 100vh
+	display: flex
+	align-items: center
+	justify-content: center
+	background: $bg
+
+.collection
+	font-family: 'Anton', Sans-serif
+	color: #EDEED1
+	display: inline-block
+	position: fixed
+	bottom: 15px
+	right: 15px
+	font-size: 18px
+	text-decoration: none
+	text-align: center
+	line-height: .9
+	&::first-line
+		color: #EDEED1
+		font-size: 14px
+		text-transform: uppercase
+
+.artboard
+	width: 340px
+	height: 340px
+	border: 20px solid $border
+	box-shadow: 0 2px 15px 5px rgba($border, .15)
+	background-repeat: repeat-y
+	background-size: $sizePx 100%
+	$bgImg: ()
+	$bgPos: ()
+	@for $i from 0 to $n
+		$bgImg: $bgImg, repeating-linear-gradient(#571744 0px $sizePx, #900a3e $sizePx $sizePx*2, #c70038 $sizePx*2 $sizePx*3, #ff5733 $sizePx*3 $sizePx*4, #EDEED1 $sizePx*4 $sizePx*5)
+		@if $i%2 == 0
+			--column-#{$i}: #{$i * random(5) * 1px}
+			$bgPos: $bgPos, $i*$sizePx var(--column-#{$i})
+		@if $i%2 == 1
+			--column-#{$i}: #{$i * random(5) * -1px}
+			$bgPos: $bgPos, $i*$sizePx var(--column-#{$i})
+	background-image: $bgImg
+	background-position: $bgPos
+	animation: animateColumns 30s linear infinite alternate
+
+@keyframes animateColumns
+	@for $percents from 0 to 100
+		#{$percents}%
+			@for $column from 0 to $n
+				--column-#{$column}: #{random($size  * ($column + 1)) * 0.5px}
diff --git a/generative-voronoi-splodges-pixi/README.markdown b/generative-voronoi-splodges-pixi/README.markdown
new file mode 100644
index 0000000..129881b
--- /dev/null
+++ b/generative-voronoi-splodges-pixi/README.markdown
@@ -0,0 +1,5 @@
+# Generative Voronoi Splodges (PIXI)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/georgedoescode/pen/oNzopzG](https://codepen.io/georgedoescode/pen/oNzopzG).
+
+
diff --git a/generative-voronoi-splodges-pixi/dist/index.html b/generative-voronoi-splodges-pixi/dist/index.html
new file mode 100644
index 0000000..23e3caa
--- /dev/null
+++ b/generative-voronoi-splodges-pixi/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Generative Voronoi Splodges (PIXI)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdn.jsdelivr.net/npm/voronoi@1.0.0/rhill-voronoi-core.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.6.1/randomColor.min.js'></script><script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/generative-voronoi-splodges-pixi/dist/script.js b/generative-voronoi-splodges-pixi/dist/script.js
new file mode 100644
index 0000000..d8da64b
--- /dev/null
+++ b/generative-voronoi-splodges-pixi/dist/script.js
@@ -0,0 +1,455 @@
+import { spline } from "https://cdn.skypack.dev/@georgedoescode/spline@1.0.1";
+import { Vector2D } from "https://cdn.skypack.dev/@georgedoescode/vector2d@1.0.1";
+import SimplexNoise from "https://cdn.skypack.dev/simplex-noise@2.4.0";
+import centroid from "https://cdn.skypack.dev/polygon-centroid@1.1.0";
+import polylabel from "https://cdn.skypack.dev/polylabel@1.1.0";
+import * as PIXI from "https://cdn.skypack.dev/pixi.js@5.3.4";
+import Offset from "https://cdn.skypack.dev/polygon-offset@0.3.1";
+import gsap from "https://cdn.skypack.dev/gsap@3.5.1";
+import { PixiPlugin } from "https://cdn.skypack.dev/gsap@3.5.1/PixiPlugin";
+
+const simplex = new SimplexNoise();
+const offset = new Offset();
+
+gsap.registerPlugin(PixiPlugin);
+PixiPlugin.registerPIXI(PIXI);
+
+function random(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+function map(n, start1, end1, start2, end2) {
+  return (n - start1) / (end1 - start1) * (end2 - start2) + start2;
+}
+
+function noise(x, y) {
+  return simplex.noise2D(x, y);
+}
+
+function getPolygonCentroid(pts) {
+  const first = pts[0];
+  const last = pts[pts.length - 1];
+
+  if (first.x != last.x || first.y != last.y) pts.push(first);
+
+  let twicearea = 0;
+  let x = 0;
+  let y = 0;
+  let nPts = pts.length;
+  let p1;
+  let p2;
+  let f;
+
+  for (var i = 0, j = nPts - 1; i < nPts; j = i++) {
+    p1 = pts[i];
+    p2 = pts[j];
+    f = p1.x * p2.y - p2.x * p1.y;
+    twicearea += f;
+    x += (p1.x + p2.x) * f;
+    y += (p1.y + p2.y) * f;
+  }
+
+  f = twicearea * 3;
+
+  return { x: x / f, y: y / f };
+}
+
+class MetaSpline {
+  constructor(x, y, shape, app) {
+    this.app = app;
+
+    this.pos = new Vector2D(x, y);
+
+    this.shape = shape;
+    this.centroid = new Vector2D(shape.centroid.x, shape.centroid.y);
+
+    this.points = shape.points;
+
+    this.graphicsBounds = null;
+
+    this.originalPoints = this.points.map(p => p.copy());
+
+    this.pointNoise = [...Array(this.points.length)].map((_, i) => {
+      return { x: random(0, 1000), y: random(0, 1000) };
+    });
+
+    this.xOff = random(0, 1000);
+    this.baseXOffVertex = random(0.001, 0.005);
+    this.xOffVertex = this.baseXOffVertex;
+
+    this.tension = random(0.4, 0.7);
+
+    this.container = new PIXI.Container();
+    this.graphics = this._createGraphics();
+
+    this.app.stage.addChild(this.container);
+    this.container.addChild(this.graphics);
+
+    this.container.x = shape.site.x;
+    this.container.y = shape.site.y;
+
+    this.colors = [
+    0xd6675a,
+    0xe09960,
+    0x6092c4,
+    0x3c3c3b,
+    0x64b473,
+    0xd4676b,
+    0x96c25b];
+
+    this.fill = this.colors[~~random(0, this.colors.length)];
+
+    this._animateIn();
+
+    //     ffffff
+
+    this._createFill();
+
+    this.outline = new PIXI.Graphics();
+    this.container.addChild(this.outline);
+  }
+
+  _createFill() {
+    const graphics1 = new PIXI.Graphics();
+    const graphics2 = new PIXI.Graphics();
+
+    const container1 = new PIXI.Container();
+    const container2 = new PIXI.Container();
+
+    const choices = Object.keys(textures);
+    const choice = choices[~~random(0, choices.length)];
+
+    const mask = new PIXI.Sprite(textures[choice]);
+
+    mask.x = this.centroid.x - this.shape.bounds.width / 2;
+    mask.y = this.centroid.y - this.shape.bounds.height / 2;
+
+    mask.width = Math.max(this.shape.bounds.width, this.shape.bounds.height);
+    mask.height = Math.max(this.shape.bounds.width, this.shape.bounds.height);
+
+    this.container.addChild(mask);
+
+    graphics1.x = this.centroid.x;
+    graphics1.y = this.centroid.y;
+
+    const padding = 100;
+
+    graphics1.beginFill(this.fill);
+    graphics1.drawRect(
+    -this.shape.bounds.width / 2 - padding,
+    -this.shape.bounds.height / 2 - padding,
+    this.shape.bounds.width + padding * 2,
+    this.shape.bounds.height + padding * 2);
+
+    graphics1.endFill();
+
+    graphics2.alpha = 0.25;
+
+    graphics2.x = this.centroid.x;
+    graphics2.y = this.centroid.y;
+
+    graphics2.beginFill(this.fill);
+    graphics2.drawRect(
+    -this.shape.bounds.width / 2 - padding,
+    -this.shape.bounds.height / 2 - padding,
+    this.shape.bounds.width + padding * 2,
+    this.shape.bounds.height + padding * 2);
+
+    graphics2.endFill();
+
+    container2.addChild(graphics2);
+    container1.addChild(graphics1);
+
+    container2.addChild(container1);
+
+    this.container.addChild(container2);
+
+    container1.mask = mask;
+    container2.mask = this.graphics;
+  }
+
+  _createContainer() {
+    const container = new PIXI.Container();
+
+    this.app.stage.addChild(container);
+
+    return container;
+  }
+
+  _createGraphics() {
+    const graphics = new PIXI.Graphics();
+
+    graphics.interactive = true;
+
+    const handleOver = () => {
+      gsap.to(this.container.scale, {
+        x: 0.825,
+        y: 0.825,
+        duration: 1.5,
+        ease: "elastic.out(1, 0.5)" });
+
+
+      gsap.to(this, {
+        xOffVertex: 0.015,
+        tension: 0.9,
+        duration: 1.5,
+        ease: "elastic.out(1, 0.5)" });
+
+    };
+
+    const handleOut = () => {
+      gsap.to(this.container.scale, {
+        x: 1,
+        y: 1,
+        duration: 1.5,
+        ease: "elastic.out(1, 0.3)" });
+
+
+      gsap.to(this, {
+        xOffVertex: this.baseXOffVertex,
+        tension: 0.6,
+        duration: 1.5,
+        ease: "elastic.out(1, 0.3)" });
+
+    };
+
+    graphics.on("touchstart", handleOver);
+    graphics.on("mouseover", handleOver);
+
+    graphics.on("touchend", handleOut);
+    graphics.on("mouseout", handleOut);
+
+    graphics.cursor = "pointer";
+
+    return graphics;
+  }
+
+  _setGraphicsStyles() {
+    this.graphics.clear();
+    this.outline.clear();
+
+    this.outline.lineStyle(2, this.fill);
+    this.graphics.beginFill(0x000000);
+  }
+
+  _closeGraphicsStyles() {
+    this.graphics.endFill();
+  }
+
+  _wobble() {
+    for (let i = 0; i < this.points.length; i++) {
+      const originalPoint = this.originalPoints[i].copy();
+      const currentPoint = this.points[i];
+
+      const noiseX = noise(this.pointNoise[i].x, this.pointNoise[i].x);
+
+      const newVal = originalPoint.lerp(
+      this.centroid.x,
+      this.centroid.y,
+      map(noiseX, -1, 1, 0.1, 0.3));
+
+
+      this.points[i] = newVal;
+
+      this.pointNoise[i].x += this.xOffVertex;
+    }
+  }
+
+  _animateIn() {
+    this.container.scale.x = 0;
+    this.container.scale.y = 0;
+
+    gsap.
+    to(this.container.scale, {
+      x: 1,
+      y: 1,
+      duration: 1,
+      ease: "elastic.out(1, 0.825)" }).
+
+    delay(random(0, 0.75));
+  }
+
+  _animateOut() {
+    gsap.
+    to(this.container.scale, {
+      x: 0,
+      y: 0,
+      duration: 1,
+      ease: "elastic.out(1, 0.825)" }).
+
+    delay(random(0, 0.75));
+  }
+
+  update() {
+    this._wobble();
+  }
+
+  render() {
+    this._setGraphicsStyles();
+
+    spline(this.points, this.tension, true, (CMD, data) => {
+      if (CMD === "MOVE") {
+        this.graphics.moveTo(...data);
+        this.outline.moveTo(...data);
+      } else {
+        this.graphics.bezierCurveTo(...data);
+        this.outline.bezierCurveTo(...data);
+      }
+    });
+
+    this._closeGraphicsStyles();
+  }
+
+  clear() {
+    this._animateOut();
+
+    setTimeout(() => {
+      this.graphics.clear();
+      this.outline.clear();
+    }, 2000);
+  }}
+
+
+class VoronoiDiagram {
+  constructor(width, height) {
+    this.bbox = {
+      xl: 0,
+      xr: width,
+      yt: 0,
+      yb: height };
+
+
+    const numPoints = ~~random(10, 25);
+
+    this.sites = [...Array(numPoints)].map(() => {
+      return {
+        x: random(0, width),
+        y: random(0, height) };
+
+    });
+
+    this.instance = new Voronoi();
+
+    this.diagram = this.instance.compute(this.sites, this.bbox);
+  }
+
+  _filterClosePoints(points) {
+    let lastPoint = null;
+
+    if (points[0].dist(points[points.length - 1]) <= 40) {
+      points.shift();
+    }
+
+    return points.filter(point => {
+      if (!lastPoint || lastPoint.dist(point) >= 40) {
+        lastPoint = point;
+        return true;
+      }
+    });
+  }
+
+  getShapes() {
+    return this.diagram.cells.reduce((acc, cell) => {
+      const bounds = cell.getBbox();
+
+      const shape = {
+        site: cell.site,
+        points: [],
+        bounds: bounds };
+
+
+      const halfEdges = cell.halfedges;
+      const nHalfEdges = halfEdges.length;
+
+      let v = halfEdges[0].getStartpoint();
+
+      shape.points.push(new Vector2D(v.x, v.y));
+
+      for (let iHalfEdge = 0; iHalfEdge < nHalfEdges - 1; iHalfEdge++) {
+        v = halfEdges[iHalfEdge].getEndpoint();
+
+        shape.points.push(new Vector2D(v.x, v.y));
+      }
+
+      shape.points.forEach(p => {
+        p.x -= shape.site.x;
+        p.y -= shape.site.y;
+      });
+
+      shape.points = this._filterClosePoints(shape.points);
+
+      shape.centroid = getPolygonCentroid(
+      shape.points.map(p => p.toObject()));
+
+
+      acc.push(shape);
+
+      return acc;
+    }, []);
+  }}
+
+
+function createPIXIApp(width, height) {
+  const app = new PIXI.Application({
+    width: width,
+    height: height,
+    resolution: Math.max(2, window.devicePixelRatio || 1),
+    autoDensity: true,
+    transparent: true,
+    antialias: false });
+
+
+  document.body.appendChild(app.view);
+
+  console.clear();
+
+  return app;
+}
+
+const canvasWidth = Math.min(window.innerWidth - 32, 640);
+const canvasHeight = Math.min(window.innerHeight - 32, 640);
+
+const app = createPIXIApp(canvasWidth, canvasHeight);
+const loader = PIXI.Loader.shared;
+
+const textures = {};
+
+app.ticker.stop();
+
+gsap.ticker.add(() => {
+  app.ticker.update();
+});
+
+loader.
+add("f1", "https://assets.codepen.io/5367578/f1.png").
+add("f2", "https://assets.codepen.io/5367578/f2.png").
+add("f3", "https://assets.codepen.io/5367578/f3.png").
+add("f4", "https://assets.codepen.io/5367578/f4.png").
+add("f5", "https://assets.codepen.io/5367578/f5.png").
+add("m1", "https://assets.codepen.io/5367578/m1.png").
+add("m2", "https://assets.codepen.io/5367578/m2.png").
+add("m3", "https://assets.codepen.io/5367578/m3.png").
+add("m4", "https://assets.codepen.io/5367578/m4.png");
+
+loader.load((loader, resources) => {
+  Object.keys(resources).forEach(t => textures[t] = resources[t].texture);
+
+  window.splines = [];
+
+  init();
+});
+
+function init() {
+  const voronoi = new VoronoiDiagram(canvasWidth, canvasHeight);
+
+  voronoi.getShapes().forEach(shape => {
+    splines.push(new MetaSpline(0, 0, shape, app));
+  });
+
+  app.ticker.add(() => {
+    splines.forEach(spline => {
+      spline.update();
+      spline.render();
+    });
+  });
+}
\ No newline at end of file
diff --git a/generative-voronoi-splodges-pixi/dist/style.css b/generative-voronoi-splodges-pixi/dist/style.css
new file mode 100644
index 0000000..db80b22
--- /dev/null
+++ b/generative-voronoi-splodges-pixi/dist/style.css
@@ -0,0 +1,17 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+canvas {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+body {
+  overflow-x: hidden;
+  background: #f0e9d9;
+}
\ No newline at end of file
diff --git a/generative-voronoi-splodges-pixi/license.txt b/generative-voronoi-splodges-pixi/license.txt
new file mode 100644
index 0000000..7a8afac
--- /dev/null
+++ b/generative-voronoi-splodges-pixi/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by George Francis (https://codepen.io/georgedoescode/pen/oNzopzG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/generative-voronoi-splodges-pixi/src/index.html b/generative-voronoi-splodges-pixi/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/generative-voronoi-splodges-pixi/src/script.babel b/generative-voronoi-splodges-pixi/src/script.babel
new file mode 100644
index 0000000..7ca5964
--- /dev/null
+++ b/generative-voronoi-splodges-pixi/src/script.babel
@@ -0,0 +1,455 @@
+import { spline } from "https://cdn.skypack.dev/@georgedoescode/spline@1.0.1";
+import { Vector2D } from "https://cdn.skypack.dev/@georgedoescode/vector2d@1.0.1";
+import SimplexNoise from "https://cdn.skypack.dev/simplex-noise@2.4.0";
+import centroid from "https://cdn.skypack.dev/polygon-centroid@1.1.0";
+import polylabel from "https://cdn.skypack.dev/polylabel@1.1.0";
+import * as PIXI from "https://cdn.skypack.dev/pixi.js@5.3.4";
+import Offset from "https://cdn.skypack.dev/polygon-offset@0.3.1";
+import gsap from "https://cdn.skypack.dev/gsap@3.5.1";
+import { PixiPlugin } from "https://cdn.skypack.dev/gsap@3.5.1/PixiPlugin";
+
+const simplex = new SimplexNoise();
+const offset = new Offset();
+
+gsap.registerPlugin(PixiPlugin);
+PixiPlugin.registerPIXI(PIXI);
+
+function random(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+function map(n, start1, end1, start2, end2) {
+  return ((n - start1) / (end1 - start1)) * (end2 - start2) + start2;
+}
+
+function noise(x, y) {
+  return simplex.noise2D(x, y);
+}
+
+function getPolygonCentroid(pts) {
+  const first = pts[0];
+  const last = pts[pts.length - 1];
+
+  if (first.x != last.x || first.y != last.y) pts.push(first);
+
+  let twicearea = 0;
+  let x = 0;
+  let y = 0;
+  let nPts = pts.length;
+  let p1;
+  let p2;
+  let f;
+
+  for (var i = 0, j = nPts - 1; i < nPts; j = i++) {
+    p1 = pts[i];
+    p2 = pts[j];
+    f = p1.x * p2.y - p2.x * p1.y;
+    twicearea += f;
+    x += (p1.x + p2.x) * f;
+    y += (p1.y + p2.y) * f;
+  }
+
+  f = twicearea * 3;
+
+  return { x: x / f, y: y / f };
+}
+
+class MetaSpline {
+  constructor(x, y, shape, app) {
+    this.app = app;
+
+    this.pos = new Vector2D(x, y);
+
+    this.shape = shape;
+    this.centroid = new Vector2D(shape.centroid.x, shape.centroid.y);
+
+    this.points = shape.points;
+
+    this.graphicsBounds = null;
+
+    this.originalPoints = this.points.map((p) => p.copy());
+
+    this.pointNoise = [...Array(this.points.length)].map((_, i) => {
+      return { x: random(0, 1000), y: random(0, 1000) };
+    });
+
+    this.xOff = random(0, 1000);
+    this.baseXOffVertex = random(0.001, 0.005);
+    this.xOffVertex = this.baseXOffVertex;
+
+    this.tension = random(0.4, 0.7);
+
+    this.container = new PIXI.Container();
+    this.graphics = this._createGraphics();
+
+    this.app.stage.addChild(this.container);
+    this.container.addChild(this.graphics);
+
+    this.container.x = shape.site.x;
+    this.container.y = shape.site.y;
+
+    this.colors = [
+      0xd6675a,
+      0xe09960,
+      0x6092c4,
+      0x3c3c3b,
+      0x64b473,
+      0xd4676b,
+      0x96c25b
+    ];
+    this.fill = this.colors[~~random(0, this.colors.length)];
+
+    this._animateIn();
+
+    //     ffffff
+
+    this._createFill();
+
+    this.outline = new PIXI.Graphics();
+    this.container.addChild(this.outline);
+  }
+
+  _createFill() {
+    const graphics1 = new PIXI.Graphics();
+    const graphics2 = new PIXI.Graphics();
+
+    const container1 = new PIXI.Container();
+    const container2 = new PIXI.Container();
+
+    const choices = Object.keys(textures);
+    const choice = choices[~~random(0, choices.length)];
+
+    const mask = new PIXI.Sprite(textures[choice]);
+
+    mask.x = this.centroid.x - this.shape.bounds.width / 2;
+    mask.y = this.centroid.y - this.shape.bounds.height / 2;
+
+    mask.width = Math.max(this.shape.bounds.width, this.shape.bounds.height);
+    mask.height = Math.max(this.shape.bounds.width, this.shape.bounds.height);
+
+    this.container.addChild(mask);
+
+    graphics1.x = this.centroid.x;
+    graphics1.y = this.centroid.y;
+
+    const padding = 100;
+
+    graphics1.beginFill(this.fill);
+    graphics1.drawRect(
+      -this.shape.bounds.width / 2 - padding,
+      -this.shape.bounds.height / 2 - padding,
+      this.shape.bounds.width + padding * 2,
+      this.shape.bounds.height + padding * 2
+    );
+    graphics1.endFill();
+
+    graphics2.alpha = 0.25;
+
+    graphics2.x = this.centroid.x;
+    graphics2.y = this.centroid.y;
+
+    graphics2.beginFill(this.fill);
+    graphics2.drawRect(
+      -this.shape.bounds.width / 2 - padding,
+      -this.shape.bounds.height / 2 - padding,
+      this.shape.bounds.width + padding * 2,
+      this.shape.bounds.height + padding * 2
+    );
+    graphics2.endFill();
+
+    container2.addChild(graphics2);
+    container1.addChild(graphics1);
+
+    container2.addChild(container1);
+
+    this.container.addChild(container2);
+
+    container1.mask = mask;
+    container2.mask = this.graphics;
+  }
+
+  _createContainer() {
+    const container = new PIXI.Container();
+
+    this.app.stage.addChild(container);
+
+    return container;
+  }
+
+  _createGraphics() {
+    const graphics = new PIXI.Graphics();
+
+    graphics.interactive = true;
+
+    const handleOver = () => {
+      gsap.to(this.container.scale, {
+        x: 0.825,
+        y: 0.825,
+        duration: 1.5,
+        ease: "elastic.out(1, 0.5)"
+      });
+
+      gsap.to(this, {
+        xOffVertex: 0.015,
+        tension: 0.9,
+        duration: 1.5,
+        ease: "elastic.out(1, 0.5)"
+      });
+    };
+
+    const handleOut = () => {
+      gsap.to(this.container.scale, {
+        x: 1,
+        y: 1,
+        duration: 1.5,
+        ease: "elastic.out(1, 0.3)"
+      });
+
+      gsap.to(this, {
+        xOffVertex: this.baseXOffVertex,
+        tension: 0.6,
+        duration: 1.5,
+        ease: "elastic.out(1, 0.3)"
+      });
+    };
+
+    graphics.on("touchstart", handleOver);
+    graphics.on("mouseover", handleOver);
+
+    graphics.on("touchend", handleOut);
+    graphics.on("mouseout", handleOut);
+
+    graphics.cursor = "pointer";
+
+    return graphics;
+  }
+
+  _setGraphicsStyles() {
+    this.graphics.clear();
+    this.outline.clear();
+
+    this.outline.lineStyle(2, this.fill);
+    this.graphics.beginFill(0x000000);
+  }
+
+  _closeGraphicsStyles() {
+    this.graphics.endFill();
+  }
+
+  _wobble() {
+    for (let i = 0; i < this.points.length; i++) {
+      const originalPoint = this.originalPoints[i].copy();
+      const currentPoint = this.points[i];
+
+      const noiseX = noise(this.pointNoise[i].x, this.pointNoise[i].x);
+
+      const newVal = originalPoint.lerp(
+        this.centroid.x,
+        this.centroid.y,
+        map(noiseX, -1, 1, 0.1, 0.3)
+      );
+
+      this.points[i] = newVal;
+
+      this.pointNoise[i].x += this.xOffVertex;
+    }
+  }
+
+  _animateIn() {
+    this.container.scale.x = 0;
+    this.container.scale.y = 0;
+
+    gsap
+      .to(this.container.scale, {
+        x: 1,
+        y: 1,
+        duration: 1,
+        ease: "elastic.out(1, 0.825)"
+      })
+      .delay(random(0, 0.75));
+  }
+
+  _animateOut() {
+    gsap
+      .to(this.container.scale, {
+        x: 0,
+        y: 0,
+        duration: 1,
+        ease: "elastic.out(1, 0.825)"
+      })
+      .delay(random(0, 0.75));
+  }
+
+  update() {
+    this._wobble();
+  }
+
+  render() {
+    this._setGraphicsStyles();
+
+    spline(this.points, this.tension, true, (CMD, data) => {
+      if (CMD === "MOVE") {
+        this.graphics.moveTo(...data);
+        this.outline.moveTo(...data);
+      } else {
+        this.graphics.bezierCurveTo(...data);
+        this.outline.bezierCurveTo(...data);
+      }
+    });
+
+    this._closeGraphicsStyles();
+  }
+
+  clear() {
+    this._animateOut();
+
+    setTimeout(() => {
+      this.graphics.clear();
+      this.outline.clear();
+    }, 2000);
+  }
+}
+
+class VoronoiDiagram {
+  constructor(width, height) {
+    this.bbox = {
+      xl: 0,
+      xr: width,
+      yt: 0,
+      yb: height
+    };
+
+    const numPoints = ~~random(10, 25);
+
+    this.sites = [...Array(numPoints)].map(() => {
+      return {
+        x: random(0, width),
+        y: random(0, height)
+      };
+    });
+
+    this.instance = new Voronoi();
+
+    this.diagram = this.instance.compute(this.sites, this.bbox);
+  }
+
+  _filterClosePoints(points) {
+    let lastPoint = null;
+
+    if (points[0].dist(points[points.length - 1]) <= 40) {
+      points.shift();
+    }
+
+    return points.filter((point) => {
+      if (!lastPoint || lastPoint.dist(point) >= 40) {
+        lastPoint = point;
+        return true;
+      }
+    });
+  }
+
+  getShapes() {
+    return this.diagram.cells.reduce((acc, cell) => {
+      const bounds = cell.getBbox();
+
+      const shape = {
+        site: cell.site,
+        points: [],
+        bounds: bounds
+      };
+
+      const halfEdges = cell.halfedges;
+      const nHalfEdges = halfEdges.length;
+
+      let v = halfEdges[0].getStartpoint();
+
+      shape.points.push(new Vector2D(v.x, v.y));
+
+      for (let iHalfEdge = 0; iHalfEdge < nHalfEdges - 1; iHalfEdge++) {
+        v = halfEdges[iHalfEdge].getEndpoint();
+
+        shape.points.push(new Vector2D(v.x, v.y));
+      }
+
+      shape.points.forEach((p) => {
+        p.x -= shape.site.x;
+        p.y -= shape.site.y;
+      });
+
+      shape.points = this._filterClosePoints(shape.points);
+
+      shape.centroid = getPolygonCentroid(
+        shape.points.map((p) => p.toObject())
+      );
+
+      acc.push(shape);
+
+      return acc;
+    }, []);
+  }
+}
+
+function createPIXIApp(width, height) {
+  const app = new PIXI.Application({
+    width: width,
+    height: height,
+    resolution: Math.max(2, window.devicePixelRatio || 1),
+    autoDensity: true,
+    transparent: true,
+    antialias: false
+  });
+
+  document.body.appendChild(app.view);
+
+  console.clear();
+
+  return app;
+}
+
+const canvasWidth = Math.min(window.innerWidth - 32, 640);
+const canvasHeight = Math.min(window.innerHeight - 32, 640);
+
+const app = createPIXIApp(canvasWidth, canvasHeight);
+const loader = PIXI.Loader.shared;
+
+const textures = {};
+
+app.ticker.stop();
+
+gsap.ticker.add(() => {
+  app.ticker.update();
+});
+
+loader
+  .add("f1", "https://assets.codepen.io/5367578/f1.png")
+  .add("f2", "https://assets.codepen.io/5367578/f2.png")
+  .add("f3", "https://assets.codepen.io/5367578/f3.png")
+  .add("f4", "https://assets.codepen.io/5367578/f4.png")
+  .add("f5", "https://assets.codepen.io/5367578/f5.png")
+  .add("m1", "https://assets.codepen.io/5367578/m1.png")
+  .add("m2", "https://assets.codepen.io/5367578/m2.png")
+  .add("m3", "https://assets.codepen.io/5367578/m3.png")
+  .add("m4", "https://assets.codepen.io/5367578/m4.png");
+
+loader.load((loader, resources) => {
+  Object.keys(resources).forEach((t) => (textures[t] = resources[t].texture));
+
+  window.splines = [];
+
+  init();
+});
+
+function init() {
+  const voronoi = new VoronoiDiagram(canvasWidth, canvasHeight);
+
+  voronoi.getShapes().forEach((shape) => {
+    splines.push(new MetaSpline(0, 0, shape, app));
+  });
+
+  app.ticker.add(() => {
+    splines.forEach((spline) => {
+      spline.update();
+      spline.render();
+    });
+  });
+}
diff --git a/generative-voronoi-splodges-pixi/src/style.css b/generative-voronoi-splodges-pixi/src/style.css
new file mode 100644
index 0000000..063fe15
--- /dev/null
+++ b/generative-voronoi-splodges-pixi/src/style.css
@@ -0,0 +1,17 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+canvas {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+body {
+  overflow-x: hidden;
+  background: #f0e9d9;
+}
diff --git a/genuary-2022-day-8/README.markdown b/genuary-2022-day-8/README.markdown
new file mode 100644
index 0000000..d2f99fb
--- /dev/null
+++ b/genuary-2022-day-8/README.markdown
@@ -0,0 +1,6 @@
+# Genuary 2022 | Day 8 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pjkarlik/pen/qBPyvvb](https://codepen.io/pjkarlik/pen/qBPyvvb).
+
+Single curve with WebGL and a Single Fragment shader - a simple vec2(mod(q.y - theata/PI, 2.0)-1.0, length(q.xz)-.5) and we create a spiral
+out of a single line
diff --git a/genuary-2022-day-8/dist/index.html b/genuary-2022-day-8/dist/index.html
new file mode 100644
index 0000000..1f0b527
--- /dev/null
+++ b/genuary-2022-day-8/dist/index.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Genuary 2022 | Day 8 </title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canvas" width="600" height="600"></canvas>
+<!-- VertexShader code here -->
+<script id="vertexShader" type="x-shader/x-vertex">#version 300 es
+precision highp float;
+  in vec4 position;
+  void main() {
+    gl_Position = vec4( position );
+  }
+</script>
+<!-- FragmentShader code here -->
+<script id="fragmentShader" type="x-shader/x-fragment">#version 300 es
+precision highp float;
+out vec4 fragColor;
+// basic uniforms
+uniform vec4 u_mouse;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_hash;
+
+// code here
+#define R           u_resolution
+#define T           u_time
+#define M           u_mouse
+
+#define PI          3.14159265358
+#define PI2         6.28318530718
+#define MAX_DIST    100.
+
+mat2 rot(float a) { return mat2(cos(a),sin(a),-sin(a),cos(a)); }
+float hash21(vec2 a) { return fract(sin(dot(a,vec2(21.23,41.232)))* 43758.5453);}
+
+vec3 hit=vec3(0);vec3 hitPoint=vec3(0);
+mat2 rx,ry,turn;
+float ghsh,shsh,time=0.;
+
+vec2 map (in vec3 p) {
+	  vec2 res = vec2(1e5,0.);
+    p.xz*=turn;
+    vec2 id = vec2(1.);
+
+    p.x+=1.65*sin(p.y*.25+(12.25+T*1.25));
+    
+    vec3 q = p;
+    float hsh = hash21(id+3.);
+    
+    float ph = (1.85+hsh)+.65*sin(p.y*.25+(12.25*hsh+T*1.75));
+    float theata = atan(q.z, q.x)*2.;
+    
+    vec2 tv = vec2(
+        mod(q.y - theata/PI, 2.0)-1.0,
+        length(q.xz)-ph
+    );
+    
+    float d = length(tv)-.3;
+    //d = max(abs(d)-.1,-d);
+
+    if(d<res.x) {
+        res = vec2(d,2.);
+        hitPoint=q;
+        ghsh=hsh;
+    }
+
+    res.x*=.7;
+	  return res;
+}
+
+//Tetrahedron technique
+//https://www.iquilezles.org/www/articles/normalsSDF/normalsSDF.htm
+vec3 normal(vec3 p, float t, float mindist)
+{
+    float e = mindist*t;
+    vec2 h = vec2(1.0,-1.0)*0.5773;
+    return normalize( h.xyy*map( p + h.xyy*e ).x + 
+					  h.yyx*map( p + h.yyx*e ).x + 
+					  h.yxy*map( p + h.yxy*e ).x + 
+					  h.xxx*map( p + h.xxx*e ).x );
+}
+
+//@iq https://iquilezles.org/www/articles/palettes/palettes.htm
+vec3 hue(float t){ 
+    vec3 c = vec3(.95, .7, .8),d = vec3(0.749,0.251,0.400);
+    return .65 + .45*cos( PI2*t*(c+d) ); 
+}
+
+vec3 clr;
+vec3 shade(vec3 p, vec3 rd, float d, float m, inout vec3 n)
+{
+    n = normal(p,d,1.);
+    vec3 lpos = vec3(.1,9,7);
+    vec3 l = normalize(lpos-p);
+
+    float diff = clamp(dot(n,l),0.,1.);
+    float fresnel = pow(clamp(1.+dot(rd, n), 0., 1.), 5.5);
+    fresnel = mix(.01, .7, fresnel);
+    clr = hue(shsh+(hitPoint.y*.1));
+    vec3 h =  mix(clr*.15,vec3(.5),fresnel);//clr;//glintz(clr, hitPoint*.1, n, rd, l);
+
+    return h;
+}
+
+vec3 renderAll( in vec2 F )
+{    
+    time = T*.25;
+    turn = rot(T*25.*PI/180.);
+    vec3 C=vec3(.0);
+    vec2 uv = (2.*F.xy-R.xy)/max(R.x,R.y);
+
+    vec3 ro = vec3(0,0,5.25),
+         rd = normalize(vec3(uv,-.7));
+    //orthographic camera
+    float zoom = 5.;
+    //vec3 ro = vec3(uv*zoom,-zoom-10.);
+    //vec3 rd = vec3(0,0,1.);
+
+    rx = rot(.2);
+    ry = rot(-.2);
+    
+    ro.yz *= rx;
+    rd.yz *= rx;
+    ro.xz *= ry;
+    rd.xz *= ry;
+    
+    vec3  p = ro + rd * .1;
+    float atten = .725;
+    float k = 1.;
+    float o = 1.;
+    float b = 4.;
+    // loop inspired/adapted from @blackle's 
+    // marcher https://www.shadertoy.com/view/flsGDH
+    for(int i=0;i<128;i++)
+    {
+        vec2 ray = map(p);
+        vec3 n=vec3(0);
+
+        float d = ray.x;
+        float m = ray.y;
+
+        p += rd * d *k;
+        
+        if (d*d < 1e-6) {
+        o*=1e-2;
+        shsh=ghsh;
+        hit=hitPoint;
+            C+=shade(p,rd,d,ray.y,n)*atten;
+            if(b<1.)break;
+            
+            atten *= .75;
+            p += rd*.075;
+            k = sign(map(p).x);
+            
+            float fresnel = pow(clamp(1.+dot(rd, n), 0., 1.), 9.);
+            fresnel = mix(.01, .9, fresnel);
+            
+            vec3 rr = vec3(0);
+            
+            rr = refract(rd,n,.45);
+            rd=mix(rr,rd,.9-fresnel);
+            b--;   
+        }  
+        if(distance(p,rd)>50.) { break; }
+    }
+    // Output to screen
+    return mix(C,vec3(.9,0.7,0.),o);
+}
+
+void main(){
+  vec2 F =gl_FragCoord.xy;
+  vec3 C = renderAll(F);
+  C +=renderAll(F+vec2(.2,.2));
+  C +=renderAll(F-vec2(.2,.2));
+  C /= 3.;    
+
+  C = pow(C, vec3(.4545));
+
+  fragColor = vec4(C,1.0);
+}
+
+</script>
+<!-- partial -->
+  <script src='https://jhancock532.github.io/twgl.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/genuary-2022-day-8/dist/script.js b/genuary-2022-day-8/dist/script.js
new file mode 100644
index 0000000..25aa551
--- /dev/null
+++ b/genuary-2022-day-8/dist/script.js
@@ -0,0 +1,42 @@
+//---- end
+const glcanvas = document.getElementById("canvas");
+const gl = glcanvas.getContext("webgl2");
+
+const programInfo = twgl.createProgramInfo(gl, [
+"vertexShader",
+"fragmentShader"]);
+
+
+const arrays = {
+  position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0] };
+
+
+const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
+
+let then = 0;
+
+twgl.resizeCanvasToDisplaySize(gl.canvas, 1);
+gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+
+const render = time => {
+  time *= 0.001;
+  const deltaTime = time - then;
+  then = time;
+
+  let programUniforms = {
+    u_time: time * 0.5,
+    u_resolution: [gl.canvas.width, gl.canvas.height],
+    u_hash: 0.232323 };
+
+
+  gl.useProgram(programInfo.program);
+  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
+  twgl.setUniforms(programInfo, programUniforms);
+  twgl.drawBufferInfo(gl, bufferInfo);
+
+  requestAnimationFrame(render);
+};
+
+window.addEventListener("DOMContentLoaded", event => {
+  requestAnimationFrame(render);
+});
\ No newline at end of file
diff --git a/genuary-2022-day-8/dist/style.css b/genuary-2022-day-8/dist/style.css
new file mode 100644
index 0000000..819fa10
--- /dev/null
+++ b/genuary-2022-day-8/dist/style.css
@@ -0,0 +1,31 @@
+* {
+  box-sizing: border-box;
+}
+html {
+  height: 100%;
+}
+body {
+  background-color: #74d0ec;
+  background-image: linear-gradient(#4548f7 2px, transparent 2px), linear-gradient(90deg, #4548f7 2px, transparent 2px), linear-gradient(#4548f7 1px, transparent 1px), linear-gradient(90deg, #4548f7 1px, #74d0ec 1px);
+  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
+  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+canvas {
+  border: none;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  box-shadow: 2px 20px 13px rgba(0, 0, 0, 0.75);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 60vh;
+  height: 60vh;
+  z-index: 0;
+}
\ No newline at end of file
diff --git a/genuary-2022-day-8/license.txt b/genuary-2022-day-8/license.txt
new file mode 100644
index 0000000..5da0277
--- /dev/null
+++ b/genuary-2022-day-8/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Paul J Karlik (https://codepen.io/pjkarlik/pen/qBPyvvb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/genuary-2022-day-8/src/index.html b/genuary-2022-day-8/src/index.html
new file mode 100644
index 0000000..239e500
--- /dev/null
+++ b/genuary-2022-day-8/src/index.html
@@ -0,0 +1,178 @@
+<canvas id="canvas" width="600" height="600"></canvas>
+<!-- VertexShader code here -->
+<script id="vertexShader" type="x-shader/x-vertex">#version 300 es
+precision highp float;
+  in vec4 position;
+  void main() {
+    gl_Position = vec4( position );
+  }
+</script>
+<!-- FragmentShader code here -->
+<script id="fragmentShader" type="x-shader/x-fragment">#version 300 es
+precision highp float;
+out vec4 fragColor;
+// basic uniforms
+uniform vec4 u_mouse;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_hash;
+
+// code here
+#define R           u_resolution
+#define T           u_time
+#define M           u_mouse
+
+#define PI          3.14159265358
+#define PI2         6.28318530718
+#define MAX_DIST    100.
+
+mat2 rot(float a) { return mat2(cos(a),sin(a),-sin(a),cos(a)); }
+float hash21(vec2 a) { return fract(sin(dot(a,vec2(21.23,41.232)))* 43758.5453);}
+
+vec3 hit=vec3(0);vec3 hitPoint=vec3(0);
+mat2 rx,ry,turn;
+float ghsh,shsh,time=0.;
+
+vec2 map (in vec3 p) {
+	  vec2 res = vec2(1e5,0.);
+    p.xz*=turn;
+    vec2 id = vec2(1.);
+
+    p.x+=1.65*sin(p.y*.25+(12.25+T*1.25));
+    
+    vec3 q = p;
+    float hsh = hash21(id+3.);
+    
+    float ph = (1.85+hsh)+.65*sin(p.y*.25+(12.25*hsh+T*1.75));
+    float theata = atan(q.z, q.x)*2.;
+    
+    vec2 tv = vec2(
+        mod(q.y - theata/PI, 2.0)-1.0,
+        length(q.xz)-ph
+    );
+    
+    float d = length(tv)-.3;
+    //d = max(abs(d)-.1,-d);
+
+    if(d<res.x) {
+        res = vec2(d,2.);
+        hitPoint=q;
+        ghsh=hsh;
+    }
+
+    res.x*=.7;
+	  return res;
+}
+
+//Tetrahedron technique
+//https://www.iquilezles.org/www/articles/normalsSDF/normalsSDF.htm
+vec3 normal(vec3 p, float t, float mindist)
+{
+    float e = mindist*t;
+    vec2 h = vec2(1.0,-1.0)*0.5773;
+    return normalize( h.xyy*map( p + h.xyy*e ).x + 
+					  h.yyx*map( p + h.yyx*e ).x + 
+					  h.yxy*map( p + h.yxy*e ).x + 
+					  h.xxx*map( p + h.xxx*e ).x );
+}
+
+//@iq https://iquilezles.org/www/articles/palettes/palettes.htm
+vec3 hue(float t){ 
+    vec3 c = vec3(.95, .7, .8),d = vec3(0.749,0.251,0.400);
+    return .65 + .45*cos( PI2*t*(c+d) ); 
+}
+
+vec3 clr;
+vec3 shade(vec3 p, vec3 rd, float d, float m, inout vec3 n)
+{
+    n = normal(p,d,1.);
+    vec3 lpos = vec3(.1,9,7);
+    vec3 l = normalize(lpos-p);
+
+    float diff = clamp(dot(n,l),0.,1.);
+    float fresnel = pow(clamp(1.+dot(rd, n), 0., 1.), 5.5);
+    fresnel = mix(.01, .7, fresnel);
+    clr = hue(shsh+(hitPoint.y*.1));
+    vec3 h =  mix(clr*.15,vec3(.5),fresnel);//clr;//glintz(clr, hitPoint*.1, n, rd, l);
+
+    return h;
+}
+
+vec3 renderAll( in vec2 F )
+{    
+    time = T*.25;
+    turn = rot(T*25.*PI/180.);
+    vec3 C=vec3(.0);
+    vec2 uv = (2.*F.xy-R.xy)/max(R.x,R.y);
+
+    vec3 ro = vec3(0,0,5.25),
+         rd = normalize(vec3(uv,-.7));
+    //orthographic camera
+    float zoom = 5.;
+    //vec3 ro = vec3(uv*zoom,-zoom-10.);
+    //vec3 rd = vec3(0,0,1.);
+
+    rx = rot(.2);
+    ry = rot(-.2);
+    
+    ro.yz *= rx;
+    rd.yz *= rx;
+    ro.xz *= ry;
+    rd.xz *= ry;
+    
+    vec3  p = ro + rd * .1;
+    float atten = .725;
+    float k = 1.;
+    float o = 1.;
+    float b = 4.;
+    // loop inspired/adapted from @blackle's 
+    // marcher https://www.shadertoy.com/view/flsGDH
+    for(int i=0;i<128;i++)
+    {
+        vec2 ray = map(p);
+        vec3 n=vec3(0);
+
+        float d = ray.x;
+        float m = ray.y;
+
+        p += rd * d *k;
+        
+        if (d*d < 1e-6) {
+        o*=1e-2;
+        shsh=ghsh;
+        hit=hitPoint;
+            C+=shade(p,rd,d,ray.y,n)*atten;
+            if(b<1.)break;
+            
+            atten *= .75;
+            p += rd*.075;
+            k = sign(map(p).x);
+            
+            float fresnel = pow(clamp(1.+dot(rd, n), 0., 1.), 9.);
+            fresnel = mix(.01, .9, fresnel);
+            
+            vec3 rr = vec3(0);
+            
+            rr = refract(rd,n,.45);
+            rd=mix(rr,rd,.9-fresnel);
+            b--;   
+        }  
+        if(distance(p,rd)>50.) { break; }
+    }
+    // Output to screen
+    return mix(C,vec3(.9,0.7,0.),o);
+}
+
+void main(){
+  vec2 F =gl_FragCoord.xy;
+  vec3 C = renderAll(F);
+  C +=renderAll(F+vec2(.2,.2));
+  C +=renderAll(F-vec2(.2,.2));
+  C /= 3.;    
+
+  C = pow(C, vec3(.4545));
+
+  fragColor = vec4(C,1.0);
+}
+
+</script>
\ No newline at end of file
diff --git a/genuary-2022-day-8/src/script.babel b/genuary-2022-day-8/src/script.babel
new file mode 100644
index 0000000..064b43c
--- /dev/null
+++ b/genuary-2022-day-8/src/script.babel
@@ -0,0 +1,42 @@
+//---- end
+const glcanvas = document.getElementById("canvas");
+const gl = glcanvas.getContext("webgl2");
+
+const programInfo = twgl.createProgramInfo(gl, [
+  "vertexShader",
+  "fragmentShader"
+]);
+
+const arrays = {
+  position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0]
+};
+
+const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
+
+let then = 0;
+
+twgl.resizeCanvasToDisplaySize(gl.canvas, 1);
+gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+
+const render = (time) => {
+  time *= 0.001;
+  const deltaTime = time - then;
+  then = time;
+
+  let programUniforms = {
+    u_time: time * 0.5,
+    u_resolution: [gl.canvas.width, gl.canvas.height],
+    u_hash: 0.232323
+  };
+
+  gl.useProgram(programInfo.program);
+  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
+  twgl.setUniforms(programInfo, programUniforms);
+  twgl.drawBufferInfo(gl, bufferInfo);
+
+  requestAnimationFrame(render);
+};
+
+window.addEventListener("DOMContentLoaded", (event) => {
+  requestAnimationFrame(render);
+});
diff --git a/genuary-2022-day-8/src/style.less b/genuary-2022-day-8/src/style.less
new file mode 100644
index 0000000..2c8cd0a
--- /dev/null
+++ b/genuary-2022-day-8/src/style.less
@@ -0,0 +1,36 @@
+* {
+  box-sizing: border-box;
+}
+html {
+  height: 100%;
+}
+
+body {
+  background-color: #74d0ec;
+  background-image: linear-gradient(#4548f7 2px, transparent 2px),
+    linear-gradient(90deg, #4548f7 2px, transparent 2px),
+    linear-gradient(#4548f7 1px, transparent 1px),
+    linear-gradient(90deg, #4548f7 1px, #74d0ec 1px);
+  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
+  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+canvas {
+  border: none;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  box-shadow: 2px 20px 13px rgba(0, 0, 0, 0.75);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 60vh;
+  height: 60vh;
+  z-index: 0;
+}
diff --git a/genuary-25make-a-grid-of-permutations/README.markdown b/genuary-25make-a-grid-of-permutations/README.markdown
new file mode 100644
index 0000000..47943d5
--- /dev/null
+++ b/genuary-25make-a-grid-of-permutations/README.markdown
@@ -0,0 +1,18 @@
+# Genuary 25 - Make a Grid of Permutations
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/DonKarlssonSan/pen/QWKXabK](https://codepen.io/DonKarlssonSan/pen/QWKXabK).
+
+JAN.25 (credit: Piter Pasma) Make a grid of permutations of something.
+
+GENUARY is an artificially generated month of time where we build code that makes beautiful things.
+
+It happens during the month of January 2021.
+
+For every 24 hour day within this 744 hour timespan, we have prepared a prompt with instructions for you to execute.
+
+You don’t have to follow the prompt exactly. Or even at all. But, y’know, we put effort into this.
+
+You can use any language, framework or medium. Please respect the Geneva Conventions.
+
+https://genuary2021.github.io/
+
diff --git a/genuary-25make-a-grid-of-permutations/dist/index.html b/genuary-25make-a-grid-of-permutations/dist/index.html
new file mode 100644
index 0000000..9301597
--- /dev/null
+++ b/genuary-25make-a-grid-of-permutations/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Genuary 25 - Make a Grid of Permutations</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canvas"></canvas>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/genuary-25make-a-grid-of-permutations/dist/script.js b/genuary-25make-a-grid-of-permutations/dist/script.js
new file mode 100644
index 0000000..e9ee901
--- /dev/null
+++ b/genuary-25make-a-grid-of-permutations/dist/script.js
@@ -0,0 +1,90 @@
+/*
+  Johan Karlsson, 2021
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+let canvas;
+let ctx;
+let w, h;
+
+function setup() {
+  canvas = document.querySelector("#canvas");
+  ctx = canvas.getContext("2d");
+  resize();
+  window.addEventListener("resize", () => {
+    resize();
+    draw();
+  });
+  canvas.addEventListener("click", draw);
+}
+
+function resize() {
+  w = canvas.width = window.innerWidth;
+  h = canvas.height = window.innerHeight;
+}
+
+function drawPattern() {
+  let s = Math.round(Math.random() * 3) + 2;
+  let size = Math.min(w, h) / (s * 2 + 1);
+  let xOffset = (w - size * (s * 2 + 1)) / 2;
+  let yOffset = (h - size * (s * 2 + 1)) / 2;
+  for (let col = 0; col < s; col++) {
+    for (let row = 0; row < s; row++) {
+      let x = col * size * 2 + size + xOffset;
+      let y = row * size * 2 + size + yOffset;
+      drawFigure(x + size / 2, y + size / 2, col, row, size);
+    }
+  }
+}
+
+function drawFigure(x, y, col, row, size) {
+  ctx.save();
+  let innerRadiusFactor = Math.random() * 0.7 + 0.1;
+  let r1 = size * innerRadiusFactor;
+  let r2 = size * 0.9;
+  let offsetR = Math.random() * (r2 - r1);
+  let offsetAngle = Math.random() * Math.PI * 2;
+  let xOffset = Math.cos(offsetAngle) * offsetR;
+  let yOffset = Math.sin(offsetAngle) * offsetR;
+  let sign = Math.random() > 0.5 ? -1 : 1;
+  let angleOffset = Math.PI * 0.6 * Math.random() * sign;
+  ctx.translate(x, y);
+  if (Math.random() > 0.99) {
+    // Haha!
+    ctx.beginPath();
+    ctx.arc(0, 0, r2, 0, Math.PI * 2);
+    ctx.fillStyle = "gray";
+    ctx.fill();
+  } else {
+    ctx.beginPath();
+    ctx.arc(xOffset, yOffset, r1, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(0, 0, r2, 0, Math.PI * 2);
+    ctx.stroke();
+
+    let nrOfLines = Math.round(Math.random() * 50) + 4;
+    for (let i = 0; i < nrOfLines; i++) {
+      let angle1 = Math.PI * 2 * i / nrOfLines;
+      let angle2 = angle1 + angleOffset;
+      let x1 = Math.cos(angle1) * r1 + xOffset;
+      let y1 = Math.sin(angle1) * r1 + yOffset;
+      let x2 = Math.cos(angle2) * r2;
+      let y2 = Math.sin(angle2) * r2;
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+    }
+  }
+  ctx.restore();
+}
+
+function draw() {
+  ctx.fillStyle = "white";
+  ctx.fillRect(0, 0, w, h);
+  drawPattern();
+}
+
+setup();
+draw();
\ No newline at end of file
diff --git a/genuary-25make-a-grid-of-permutations/dist/style.css b/genuary-25make-a-grid-of-permutations/dist/style.css
new file mode 100644
index 0000000..c38abac
--- /dev/null
+++ b/genuary-25make-a-grid-of-permutations/dist/style.css
@@ -0,0 +1,9 @@
+body, html {
+  margin: 0;
+  overflow: hidden;
+}
+
+canvas {
+  display: block;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/genuary-25make-a-grid-of-permutations/license.txt b/genuary-25make-a-grid-of-permutations/license.txt
new file mode 100644
index 0000000..bbb66ba
--- /dev/null
+++ b/genuary-25make-a-grid-of-permutations/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Johan Karlsson (https://codepen.io/DonKarlssonSan/pen/QWKXabK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/genuary-25make-a-grid-of-permutations/src/index.html b/genuary-25make-a-grid-of-permutations/src/index.html
new file mode 100644
index 0000000..30325df
--- /dev/null
+++ b/genuary-25make-a-grid-of-permutations/src/index.html
@@ -0,0 +1 @@
+<canvas id="canvas"></canvas>
\ No newline at end of file
diff --git a/genuary-25make-a-grid-of-permutations/src/script.babel b/genuary-25make-a-grid-of-permutations/src/script.babel
new file mode 100644
index 0000000..837690d
--- /dev/null
+++ b/genuary-25make-a-grid-of-permutations/src/script.babel
@@ -0,0 +1,90 @@
+/*
+  Johan Karlsson, 2021
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+let canvas;
+let ctx;
+let w, h;
+
+function setup() {
+  canvas = document.querySelector("#canvas");
+  ctx = canvas.getContext("2d");
+  resize();
+  window.addEventListener("resize", () => {
+    resize();
+    draw();
+  });
+  canvas.addEventListener("click", draw);
+}
+
+function resize() {
+  w = canvas.width = window.innerWidth;
+  h = canvas.height = window.innerHeight;
+}
+
+function drawPattern() {
+  let s = Math.round(Math.random() * 3) + 2;
+  let size = Math.min(w, h) / (s * 2 + 1);
+  let xOffset = (w - size * (s * 2 + 1)) / 2;
+  let yOffset = (h - size * (s * 2 + 1)) / 2;
+  for(let col = 0; col < s; col++) {
+    for(let row = 0; row < s; row++) {
+      let x = col * size * 2 + size + xOffset;
+      let y = row * size * 2 + size + yOffset;
+      drawFigure(x + size / 2, y+ size / 2, col, row, size);
+    }
+  }
+}
+
+function drawFigure(x, y, col, row, size) {
+  ctx.save();
+  let innerRadiusFactor = Math.random() * 0.7 + 0.1;
+  let r1 = size * innerRadiusFactor;
+  let r2 = size * 0.9;
+  let offsetR = Math.random() * (r2 - r1);
+  let offsetAngle = Math.random() * Math.PI * 2;
+  let xOffset = Math.cos(offsetAngle) * offsetR;
+  let yOffset = Math.sin(offsetAngle) * offsetR;
+  let sign = Math.random() > 0.5 ? -1 : 1;
+  let angleOffset = Math.PI * 0.6 * Math.random() * sign;
+  ctx.translate(x, y);
+  if(Math.random() > 0.99) {
+    // Haha!
+    ctx.beginPath();
+    ctx.arc(0, 0, r2, 0, Math.PI * 2);
+    ctx.fillStyle = "gray";
+    ctx.fill();
+  } else {
+    ctx.beginPath();
+    ctx.arc(xOffset, yOffset, r1, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(0, 0, r2, 0, Math.PI * 2);
+    ctx.stroke();
+
+    let nrOfLines = Math.round(Math.random() * 50) + 4;
+    for(let i = 0; i < nrOfLines; i++) {
+      let angle1 = Math.PI * 2 * i / nrOfLines;
+      let angle2 = angle1 + angleOffset;
+      let x1 = Math.cos(angle1) * r1 + xOffset;
+      let y1 = Math.sin(angle1) * r1 + yOffset;
+      let x2 = Math.cos(angle2) * r2;
+      let y2 = Math.sin(angle2) * r2;
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+    }
+  }
+  ctx.restore();
+}
+
+function draw() {
+  ctx.fillStyle = "white";
+  ctx.fillRect(0, 0, w, h);
+  drawPattern();
+}
+
+setup();
+draw();
\ No newline at end of file
diff --git a/genuary-25make-a-grid-of-permutations/src/style.css b/genuary-25make-a-grid-of-permutations/src/style.css
new file mode 100644
index 0000000..c38abac
--- /dev/null
+++ b/genuary-25make-a-grid-of-permutations/src/style.css
@@ -0,0 +1,9 @@
+body, html {
+  margin: 0;
+  overflow: hidden;
+}
+
+canvas {
+  display: block;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/genuary-6-triangle-subdivision/README.markdown b/genuary-6-triangle-subdivision/README.markdown
new file mode 100644
index 0000000..6799c58
--- /dev/null
+++ b/genuary-6-triangle-subdivision/README.markdown
@@ -0,0 +1,17 @@
+# Genuary 6 Triangle Subdivision
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/DonKarlssonSan/pen/eYdobNK](https://codepen.io/DonKarlssonSan/pen/eYdobNK).
+
+JAN.6 Triangle subdivision.
+
+GENUARY is an artificially generated month of time where we build code that makes beautiful things.
+
+It happens during the month of January 2021.
+
+For every 24 hour day within this 744 hour timespan, we have prepared a prompt with instructions for you to execute.
+
+You don’t have to follow the prompt exactly. Or even at all. But, y’know, we put effort into this.
+
+You can use any language, framework or medium. Please respect the Geneva Conventions.
+
+https://genuary2021.github.io/
diff --git a/genuary-6-triangle-subdivision/dist/index.html b/genuary-6-triangle-subdivision/dist/index.html
new file mode 100644
index 0000000..fcb5e2e
--- /dev/null
+++ b/genuary-6-triangle-subdivision/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Genuary 6 Triangle Subdivision</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canvas"></canvas>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/genuary-6-triangle-subdivision/dist/script.js b/genuary-6-triangle-subdivision/dist/script.js
new file mode 100644
index 0000000..8859ae7
--- /dev/null
+++ b/genuary-6-triangle-subdivision/dist/script.js
@@ -0,0 +1,100 @@
+/*
+  Johan Karlsson, 2021
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+let canvas;
+let ctx;
+let w, h;
+let baseHue;
+let hueVariance;
+
+function setup() {
+  canvas = document.querySelector("#canvas");
+  ctx = canvas.getContext("2d");
+  resize();
+  window.addEventListener("resize", () => {
+    resize();
+    draw();
+  });
+  canvas.addEventListener("click", draw);
+}
+
+function resize() {
+  w = canvas.width = window.innerWidth;
+  h = canvas.height = window.innerHeight;
+}
+
+function lerp(x1, y1, x2, y2, val) {
+  let x = x1 + (x2 - x1) * val;
+  let y = y1 + (y2 - y1) * val;
+  return [x, y];
+}
+
+function setRandomColor() {
+  let hue = baseHue + Math.random() * hueVariance;
+  let luminosity = Math.random() * 20 + 40;
+  ctx.fillStyle = `hsl(${hue}, 50%, ${luminosity}%)`;
+}
+
+function drawTriangle(vertices, level) {
+  if (level < 0) return;
+  let vIndex1 = Math.floor(Math.random() * 3);
+  let vIndex2 = (vIndex1 + 1) % 3;
+  let vIndex3 = (vIndex2 + 1) % 3;
+  let [x1, y1] = vertices[vIndex1];
+  let [x2, y2] = vertices[vIndex2];
+  let [x3, y3] = vertices[vIndex3];
+
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.lineTo(x3, y3);
+  ctx.closePath();
+  setRandomColor();
+  ctx.fill();
+
+  let l = Math.random() * 0.5 + 0.25;
+  let [x4, y4] = lerp(x2, y2, x3, y3, l);
+  drawTriangle([
+  [x1, y1],
+  [x2, y2],
+  [x4, y4]],
+  level - 1);
+  drawTriangle([
+  [x1, y1],
+  [x3, y3],
+  [x4, y4]],
+  level - 1);
+}
+
+function draw() {
+  let levels = Math.round(Math.random() * 6) + 1;
+  hueVariance = Math.random() * 60 + 30;
+  ctx.fillStyle = "white";
+  baseHue = Math.random() * 180 + 180;
+  ctx.fillRect(0, 0, w, h);
+  let vertices = [
+  [w * 0.1, h * 0.95],
+  [w * 0.5, h * 0.1],
+  [w * 0.9, h * 0.95]];
+
+  drawTriangle(vertices, levels);
+
+  let vertices2 = [
+  [w * 0.05, h * 0.05],
+  [w * 0.45, h * 0.05],
+  [w * 0.05, h * 0.9]];
+
+  drawTriangle(vertices2, levels);
+
+  let vertices3 = [
+  [w * 0.55, h * 0.05],
+  [w * 0.95, h * 0.05],
+  [w * 0.95, h * 0.9]];
+
+  drawTriangle(vertices3, levels);
+}
+
+setup();
+draw();
\ No newline at end of file
diff --git a/genuary-6-triangle-subdivision/dist/style.css b/genuary-6-triangle-subdivision/dist/style.css
new file mode 100644
index 0000000..c38abac
--- /dev/null
+++ b/genuary-6-triangle-subdivision/dist/style.css
@@ -0,0 +1,9 @@
+body, html {
+  margin: 0;
+  overflow: hidden;
+}
+
+canvas {
+  display: block;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/genuary-6-triangle-subdivision/license.txt b/genuary-6-triangle-subdivision/license.txt
new file mode 100644
index 0000000..3a48d1d
--- /dev/null
+++ b/genuary-6-triangle-subdivision/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Johan Karlsson (https://codepen.io/DonKarlssonSan/pen/eYdobNK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/genuary-6-triangle-subdivision/src/index.html b/genuary-6-triangle-subdivision/src/index.html
new file mode 100644
index 0000000..30325df
--- /dev/null
+++ b/genuary-6-triangle-subdivision/src/index.html
@@ -0,0 +1 @@
+<canvas id="canvas"></canvas>
\ No newline at end of file
diff --git a/genuary-6-triangle-subdivision/src/script.babel b/genuary-6-triangle-subdivision/src/script.babel
new file mode 100644
index 0000000..75a7cf7
--- /dev/null
+++ b/genuary-6-triangle-subdivision/src/script.babel
@@ -0,0 +1,100 @@
+/*
+  Johan Karlsson, 2021
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+let canvas;
+let ctx;
+let w, h;
+let baseHue;
+let hueVariance;
+
+function setup() {
+  canvas = document.querySelector("#canvas");
+  ctx = canvas.getContext("2d");
+  resize();
+  window.addEventListener("resize", () => {
+    resize();
+    draw();
+  });
+  canvas.addEventListener("click", draw);
+}
+
+function resize() {
+  w = canvas.width = window.innerWidth;
+  h = canvas.height = window.innerHeight;
+}
+
+function lerp(x1, y1, x2, y2, val) {
+  let x = x1 + (x2 - x1) * val;
+  let y = y1 + (y2 - y1) * val;
+  return [x, y];
+}
+
+function setRandomColor() {
+  let hue = baseHue + Math.random() * hueVariance;
+  let luminosity = Math.random() * 20 + 40;
+  ctx.fillStyle = `hsl(${hue}, 50%, ${luminosity}%)`;
+}
+
+function drawTriangle(vertices, level) {
+  if(level < 0) return;
+  let vIndex1 = Math.floor(Math.random() * 3);
+  let vIndex2 = (vIndex1 + 1) % 3;
+  let vIndex3 = (vIndex2 + 1) % 3;
+  let [x1, y1] = vertices[vIndex1];
+  let [x2, y2] = vertices[vIndex2];
+  let [x3, y3] = vertices[vIndex3];
+  
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.lineTo(x3, y3);
+  ctx.closePath();
+  setRandomColor();
+  ctx.fill();
+  
+  let l = Math.random() * 0.5 + 0.25;
+  let [x4, y4] = lerp(x2, y2, x3, y3, l);
+  drawTriangle([
+    [x1, y1],
+    [x2, y2],
+    [x4, y4]
+  ], level - 1);
+  drawTriangle([
+    [x1, y1],
+    [x3, y3],
+    [x4, y4]
+  ], level - 1);
+}
+
+function draw() {
+  let levels = Math.round(Math.random() * 6) + 1;
+  hueVariance = Math.random() * 60 + 30;
+  ctx.fillStyle = "white";
+  baseHue = Math.random() * 180 + 180;
+  ctx.fillRect(0, 0, w, h);
+  let vertices = [
+    [w * 0.1, h * 0.95],
+    [w * 0.5, h * 0.1],
+    [w * 0.9, h * 0.95]
+  ];
+  drawTriangle(vertices, levels);
+
+  let vertices2 = [
+    [w * 0.05, h * 0.05],
+    [w * 0.45, h * 0.05],
+    [w * 0.05, h * 0.9]
+  ];
+  drawTriangle(vertices2, levels);
+
+  let vertices3 = [
+    [w * 0.55, h * 0.05],
+    [w * 0.95, h * 0.05],
+    [w * 0.95, h * 0.9]
+  ];
+  drawTriangle(vertices3, levels);
+}
+
+setup();
+draw();
\ No newline at end of file
diff --git a/genuary-6-triangle-subdivision/src/style.css b/genuary-6-triangle-subdivision/src/style.css
new file mode 100644
index 0000000..c38abac
--- /dev/null
+++ b/genuary-6-triangle-subdivision/src/style.css
@@ -0,0 +1,9 @@
+body, html {
+  margin: 0;
+  overflow: hidden;
+}
+
+canvas {
+  display: block;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/glassmorphism-creative-cloud-app-redesign/README.markdown b/glassmorphism-creative-cloud-app-redesign/README.markdown
new file mode 100644
index 0000000..f6d0c39
--- /dev/null
+++ b/glassmorphism-creative-cloud-app-redesign/README.markdown
@@ -0,0 +1,6 @@
+# Glassmorphism Creative Cloud App Redesign
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/TurkAysenur/pen/ZEpxeYm](https://codepen.io/TurkAysenur/pen/ZEpxeYm).
+
+Inspired by Mikołaj Gałęziowski
+"https://dribbble.com/shots/14831798-Glassmorphism-Big-Sur-Creative-Cloud-App-Redesign"
diff --git a/glassmorphism-creative-cloud-app-redesign/dist/index.html b/glassmorphism-creative-cloud-app-redesign/dist/index.html
new file mode 100644
index 0000000..62caa26
--- /dev/null
+++ b/glassmorphism-creative-cloud-app-redesign/dist/index.html
@@ -0,0 +1,356 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Glassmorphism Creative Cloud App Redesign</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="dark-light">
+    <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+     <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" /></svg>
+   </div>
+<div class="app">
+ <div class="header">
+  <div class="menu-circle"></div>
+  <div class="header-menu">
+   <a class="menu-link is-active" href="#">Apps</a>
+   <a class="menu-link notify" href="#">Your work</a>
+   <a class="menu-link" href="#">Discover</a>
+   <a class="menu-link notify" href="#">Market</a>
+  </div>
+  <div class="search-bar">
+   <input type="text" placeholder="Search">
+  </div>
+  <div class="header-profile">
+   <div class="notification">
+    <span class="notification-number">3</span>
+    <svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
+     <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" />
+    </svg>
+   </div>
+   <svg viewBox="0 0 512 512" fill="currentColor">
+    <path d="M448.773 235.551A135.893 135.893 0 00451 211c0-74.443-60.557-135-135-135-47.52 0-91.567 25.313-115.766 65.537-32.666-10.59-66.182-6.049-93.794 12.979-27.612 19.013-44.092 49.116-45.425 82.031C24.716 253.788 0 290.497 0 331c0 7.031 1.703 13.887 3.006 20.537l.015.015C12.719 400.492 56.034 436 106 436h300c57.891 0 106-47.109 106-105 0-40.942-25.053-77.798-63.227-95.449z" />
+   </svg>
+   <img class="profile-img" src="https://images.unsplash.com/photo-1600353068440-6361ef3a86e8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="">
+  </div>
+ </div>
+ <div class="wrapper">
+  <div class="left-side">
+   <div class="side-wrapper">
+    <div class="side-title">Apps</div>
+    <div class="side-menu">
+     <a href="#">
+      <svg viewBox="0 0 512 512">
+       <g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+        <path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0" data-original="#bfc9d1" />
+       </g>
+       <path xmlns="http://www.w3.org/2000/svg" d="M192 192h128v128H192zm0 0" fill="currentColor" data-original="#82b1ff" />
+       <path xmlns="http://www.w3.org/2000/svg" d="M384 192h128v128H384zm0 0M0 384h128v128H0zm0 0M192 384h128v128H192zm0 0M384 384h128v128H384zm0 0" fill="currentColor" data-original="#bfc9d1" />
+      </svg>
+      All Apps
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 488.932 488.932" fill="currentColor">
+       <path d="M243.158 61.361v-57.6c0-3.2 4-4.9 6.7-2.9l118.4 87c2 1.5 2 4.4 0 5.9l-118.4 87c-2.7 2-6.7.2-6.7-2.9v-57.5c-87.8 1.4-158.1 76-152.1 165.4 5.1 76.8 67.7 139.1 144.5 144 81.4 5.2 150.6-53 163-129.9 2.3-14.3 14.7-24.7 29.2-24.7 17.9 0 31.8 15.9 29 33.5-17.4 109.7-118.5 192-235.7 178.9-98-11-176.7-89.4-187.8-187.4-14.7-128.2 84.9-237.4 209.9-238.8z" />
+      </svg>
+      Updates
+      <span class="notification-number updates">3</span>
+     </a>
+    </div>
+   </div>
+   <div class="side-wrapper">
+    <div class="side-title">Categories</div>
+    <div class="side-menu">
+     <a href="#">
+      <svg viewBox="0 0 488.455 488.455" fill="currentColor">
+       <path d="M287.396 216.317c23.845 23.845 23.845 62.505 0 86.35s-62.505 23.845-86.35 0-23.845-62.505 0-86.35 62.505-23.845 86.35 0" />
+       <path d="M427.397 91.581H385.21l-30.544-61.059H133.76l-30.515 61.089-42.127.075C27.533 91.746.193 119.115.164 152.715L0 396.86c0 33.675 27.384 61.074 61.059 61.074h366.338c33.675 0 61.059-27.384 61.059-61.059V152.639c-.001-33.674-27.385-61.058-61.059-61.058zM244.22 381.61c-67.335 0-122.118-54.783-122.118-122.118s54.783-122.118 122.118-122.118 122.118 54.783 122.118 122.118S311.555 381.61 244.22 381.61z" />
+      </svg>
+      Photography
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <circle cx="295.099" cy="327.254" r="110.96" transform="rotate(-45 295.062 327.332)" />
+       <path d="M471.854 338.281V163.146H296.72v41.169a123.1 123.1 0 01121.339 122.939c0 3.717-.176 7.393-.5 11.027zM172.14 327.254a123.16 123.16 0 01100.59-120.915L195.082 73.786 40.146 338.281H172.64c-.325-3.634-.5-7.31-.5-11.027z" />
+      </svg>
+      Graphic Design
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 58 58" fill="currentColor">
+       <path d="M57 6H1a1 1 0 00-1 1v44a1 1 0 001 1h56a1 1 0 001-1V7a1 1 0 00-1-1zM10 50H2v-9h8v9zm0-11H2v-9h8v9zm0-11H2v-9h8v9zm0-11H2V8h8v9zm26.537 12.844l-11 7a1.007 1.007 0 01-1.018.033A1.001 1.001 0 0124 36V22a1.001 1.001 0 011.538-.844l11 7a1.003 1.003 0 01-.001 1.688zM56 50h-8v-9h8v9zm0-11h-8v-9h8v9zm0-11h-8v-9h8v9zm0-11h-8V8h8v9z" />
+      </svg>
+      Video
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M499.377 46.402c-8.014-8.006-18.662-12.485-29.985-12.613a41.13 41.13 0 00-.496-.003c-11.142 0-21.698 4.229-29.771 11.945L198.872 275.458c25.716 6.555 47.683 23.057 62.044 47.196a113.544 113.544 0 0110.453 23.179L500.06 106.661C507.759 98.604 512 88.031 512 76.89c0-11.507-4.478-22.33-12.623-30.488zM176.588 302.344a86.035 86.035 0 00-3.626-.076c-20.273 0-40.381 7.05-56.784 18.851-19.772 14.225-27.656 34.656-42.174 53.27C55.8 397.728 27.795 409.14 0 416.923c16.187 42.781 76.32 60.297 115.752 61.24 1.416.034 2.839.051 4.273.051 44.646 0 97.233-16.594 118.755-60.522 23.628-48.224-5.496-112.975-62.192-115.348z" />
+      </svg>
+      Illustrations
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M497 151H316c-8.401 0-15 6.599-15 15v300c0 8.401 6.599 15 15 15h181c8.401 0 15-6.599 15-15V166c0-8.401-6.599-15-15-15zm-76 270h-30c-8.401 0-15-6.599-15-15s6.599-15 15-15h30c8.401 0 15 6.599 15 15s-6.599 15-15 15zm0-180h-30c-8.401 0-15-6.599-15-15s6.599-15 15-15h30c8.401 0 15 6.599 15 15s-6.599 15-15 15z" />
+       <path d="M15 331h196v60h-75c-8.291 0-15 6.709-15 15s6.709 15 15 15h135v-30h-30v-60h30V166c0-24.814 20.186-45 45-45h135V46c0-8.284-6.716-15-15-15H15C6.716 31 0 37.716 0 46v270c0 8.284 6.716 15 15 15z" />
+      </svg>
+      UI/UX
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M0 331v112.295a14.996 14.996 0 007.559 13.023L106 512V391L0 331zM136 391v121l105-60V331zM271 331v121l105 60V391zM406 391v121l98.441-55.682A14.995 14.995 0 00512 443.296V331l-106 60zM391 241l-115.754 57.876L391 365.026l116.754-66.15zM262.709 1.583a15.006 15.006 0 00-13.418 0L140.246 57.876 256 124.026l115.754-66.151L262.709 1.583zM136 90v124.955l105 52.5V150zM121 241L4.246 298.876 121 365.026l115.754-66.15zM271 150v117.455l105-52.5V90z" />
+      </svg>
+      3D/AR
+     </a>
+    </div>
+   </div>
+   <div class="side-wrapper">
+    <div class="side-title">Fonts</div>
+    <div class="side-menu">
+     <a href="#">
+      <svg viewBox="0 0 332 332" fill="currentColor">
+       <path d="M282.341 8.283C275.765 2.705 266.211 0 253.103 0c-18.951 0-36.359 5.634-51.756 16.743-14.972 10.794-29.274 28.637-42.482 53.028-4.358 7.993-7.428 11.041-8.973 12.179h-26.255c-10.84 0-19.626 8.786-19.626 19.626 0 8.989 6.077 16.486 14.323 18.809l-.05.165h.589c1.531.385 3.109.651 4.757.651h18.833l-32.688 128.001c-7.208 27.848-10.323 37.782-11.666 41.24-1.445 3.711-3.266 7.062-5.542 10.135-.42-5.39-2.637-10.143-6.508-13.854-4.264-4.079-10.109-6.136-17.364-6.136-8.227 0-15.08 2.433-20.37 7.229-5.416 4.93-8.283 11.193-8.283 18.134 0 5.157 1.701 12.712 9.828 19.348 6.139 4.97 14.845 7.382 26.621 7.382 17.096 0 32.541-4.568 45.891-13.577 13.112-8.845 24.612-22.489 34.166-40.522 9.391-17.678 18.696-45.124 28.427-83.9l18.598-73.479h30.016c10.841 0 19.625-8.785 19.625-19.625s-8.784-19.626-19.625-19.626h-19.628c6.34-21.62 14.175-37.948 23.443-48.578 2.284-2.695 5.246-5.692 8.412-7.678-1.543 3.392-2.325 6.767-2.325 10.055 0 6.164 2.409 11.714 6.909 16.03 4.484 4.336 10.167 6.54 16.888 6.54 7.085 0 13.373-2.667 18.17-7.716 4.76-5.005 7.185-11.633 7.185-19.703.017-9.079-3.554-16.899-10.302-22.618z" />
+      </svg>
+      Manage Fonts
+     </a>
+    </div>
+   </div>
+   <div class="side-wrapper">
+    <div class="side-title">Resource Links</div>
+    <div class="side-menu">
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M467 0H45C20.186 0 0 20.186 0 45v422c0 24.814 20.186 45 45 45h422c24.814 0 45-20.186 45-45V45c0-24.814-20.186-45-45-45zM181 241c41.353 0 75 33.647 75 75s-33.647 75-75 75-75-33.647-75-75c0-8.291 6.709-15 15-15s15 6.709 15 15c0 24.814 20.186 45 45 45s45-20.186 45-45-20.186-45-45-45c-41.353 0-75-33.647-75-75s33.647-75 75-75 75 33.647 75 75c0 8.291-6.709 15-15 15s-15-6.709-15-15c0-24.814-20.186-45-45-45s-45 20.186-45 45 20.186 45 45 45zm180 120h30c8.291 0 15 6.709 15 15s-6.709 15-15 15h-30c-24.814 0-45-20.186-45-45V211h-15c-8.291 0-15-6.709-15-15s6.709-15 15-15h15v-45c0-8.291 6.709-15 15-15s15 6.709 15 15v45h45c8.291 0 15 6.709 15 15s-6.709 15-15 15h-45v135c0 8.276 6.724 15 15 15z" />
+      </svg>
+      Stock
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 511.441 511.441" fill="currentColor">
+       <path d="M255.721 347.484L90.22 266.751v106.57l165.51 73.503 165.509-73.503V266.742z" />
+       <path d="M511.441 189.361L255.721 64.617 0 189.361l255.721 124.744 195.522-95.378v111.032h30V204.092z" />
+      </svg>
+      Tutorials
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M196 151h-75v90h75c24.814 0 45-20.186 45-45s-20.186-45-45-45z" />
+       <path d="M467 0H45C20.186 0 0 20.186 0 45v422c0 24.814 20.186 45 45 45h422c24.814 0 45-20.186 45-45V45c0-24.814-20.186-45-45-45zM196 271h-75v105c0 8.291-6.709 15-15 15s-15-6.709-15-15V136c0-8.291 6.709-15 15-15h90c41.353 0 75 33.647 75 75s-33.647 75-75 75zm210-60c8.291 0 15 6.709 15 15s-6.709 15-15 15h-45v135c0 8.291-6.709 15-15 15s-15-6.709-15-15V241h-15c-8.291 0-15-6.709-15-15s6.709-15 15-15h15v-45c0-24.814 20.186-45 45-45h30c8.291 0 15 6.709 15 15s-6.709 15-15 15h-30c-8.276 0-15 6.724-15 15v45h45z" />
+      </svg>
+      Portfolio
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M181 181h-60v60h60c16.54 0 30-13.46 30-30s-13.46-30-30-30zm0 0M181 271h-60v60h60c16.54 0 30-13.46 30-30s-13.46-30-30-30zm0 0M346 241c-19.555 0-36.238 12.54-42.438 30h84.875c-6.199-17.46-22.882-30-42.437-30zm0 0" />
+       <path d="M436 0H75C33.648 0 0 33.648 0 75v362c0 41.352 33.648 75 75 75h361c41.352 0 76-33.648 76-75V75c0-41.352-34.648-75-76-75zM286 151h120v30H286zm-45 150c0 33.09-26.91 60-60 60H91V151h90c33.09 0 60 26.91 60 60 0 18.008-8.133 33.996-20.73 45 12.597 11.004 20.73 26.992 20.73 45zm180 0H303.562c6.196 17.46 22.883 30 42.438 30 16.012 0 30.953-8.629 38.992-22.516l25.957 15.032C397.58 346.629 372.687 361 346 361c-41.352 0-75-33.648-75-75s33.648-75 75-75 75 33.648 75 75zm0 0" />
+      </svg>
+      Behance
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M352 0H64C28.704 0 0 28.704 0 64v320a16.02 16.02 0 009.216 14.496A16.232 16.232 0 0016 400c3.68 0 7.328-1.248 10.24-3.712L117.792 320H352c35.296 0 64-28.704 64-64V64c0-35.296-28.704-64-64-64z" />
+       <path d="M464 128h-16v128c0 52.928-43.072 96-96 96H129.376L128 353.152V400c0 26.464 21.536 48 48 48h234.368l75.616 60.512A16.158 16.158 0 00496 512c2.336 0 4.704-.544 6.944-1.6A15.968 15.968 0 00512 496V176c0-26.464-21.536-48-48-48z" />
+      </svg>
+      Social Forum
+     </a>
+    </div>
+   </div>
+  </div>
+  <div class="main-container">
+   <div class="main-header">
+    <a class="menu-link-main" href="#">All Apps</a>
+    <div class="header-menu">
+     <a class="main-header-link is-active" href="#">Desktop</a>
+     <a class="main-header-link" href="#">Mobile</a>
+     <a class="main-header-link" href="#">Web</a>
+
+    </div>
+   </div>
+   <div class="content-wrapper">
+    <div class="content-wrapper-header">
+     <div class="content-wrapper-context">
+      <h3 class="img-content">
+       <svg viewBox="0 0 512 512">
+        <path d="M467 0H45C20.099 0 0 20.099 0 45v422c0 24.901 20.099 45 45 45h422c24.901 0 45-20.099 45-45V45c0-24.901-20.099-45-45-45z" fill="#d6355b" data-original="#ff468c" />
+        <path xmlns="http://www.w3.org/2000/svg" d="M512 45v422c0 24.901-20.099 45-45 45H256V0h211c24.901 0 45 20.099 45 45z" fill="#d6355b" data-original="#d72878" />
+        <path xmlns="http://www.w3.org/2000/svg" d="M467 30H45c-8.401 0-15 6.599-15 15v422c0 8.401 6.599 15 15 15h422c8.401 0 15-6.599 15-15V45c0-8.401-6.599-15-15-15z" fill="#2e000a" data-original="#700029" />
+        <path xmlns="http://www.w3.org/2000/svg" d="M482 45v422c0 8.401-6.599 15-15 15H256V30h211c8.401 0 15 6.599 15 15z" fill="#2e000a" data-original="#4d0e06" />
+        <path xmlns="http://www.w3.org/2000/svg" d="M181 391c-41.353 0-75-33.647-75-75 0-8.291 6.709-15 15-15s15 6.709 15 15c0 24.814 20.186 45 45 45s45-20.186 45-45-20.186-45-45-45c-41.353 0-75-33.647-75-75s33.647-75 75-75 75 33.647 75 75c0 8.291-6.709 15-15 15s-15-6.709-15-15c0-24.814-20.186-45-45-45s-45 20.186-45 45 20.186 45 45 45c41.353 0 75 33.647 75 75s-33.647 75-75 75z" fill="#d6355b" data-original="#ff468c" />
+        <path xmlns="http://www.w3.org/2000/svg" d="M391 361h-30c-8.276 0-15-6.724-15-15V211h45c8.291 0 15-6.709 15-15s-6.709-15-15-15h-45v-45c0-8.291-6.709-15-15-15s-15 6.709-15 15v45h-15c-8.291 0-15 6.709-15 15s6.709 15 15 15h15v135c0 24.814 20.186 45 45 45h30c8.291 0 15-6.709 15-15s-6.709-15-15-15z" fill="#d6355b" data-original="#d72878" />
+       </svg>
+       Adobe Stock
+      </h3>
+      <div class="content-text">Grab yourself 10 free images from Adobe Stock in a 30-day free trial plan and find perfect image, that will help you with your new project.</div>
+      <button class="content-button">Start free trial</button>
+     </div>
+     <img class="content-wrapper-img" src="https://assets.codepen.io/3364143/glass.png" alt="">
+    </div>
+    <div class="content-section">
+     <div class="content-section-title">Installed</div>
+     <ul>
+      <li class="adobe-product">
+       <div class="products">
+        <svg viewBox="0 0 52 52" style="border:1px solid #3291b8">
+         <g xmlns="http://www.w3.org/2000/svg">
+          <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#061e26" data-original="#393687" />
+          <path d="M12.16 39H9.28V11h9.64c2.613 0 4.553.813 5.82 2.44 1.266 1.626 1.9 3.76 1.9 6.399 0 .934-.027 1.74-.08 2.42-.054.681-.22 1.534-.5 2.561-.28 1.026-.66 1.866-1.14 2.52-.48.654-1.213 1.227-2.2 1.72-.987.494-2.16.74-3.52.74h-7.04V39zm0-12h6.68c.96 0 1.773-.187 2.44-.56.666-.374 1.153-.773 1.46-1.2.306-.427.546-1.04.72-1.84.173-.801.267-1.4.28-1.801.013-.399.02-.973.02-1.72 0-4.053-1.694-6.08-5.08-6.08h-6.52V27zM29.48 33.92l2.8-.12c.106.987.6 1.754 1.48 2.3.88.547 1.893.82 3.04.82s2.14-.26 2.98-.78c.84-.52 1.26-1.266 1.26-2.239s-.36-1.747-1.08-2.32c-.72-.573-1.6-1.026-2.64-1.36-1.04-.333-2.086-.686-3.14-1.06a7.36 7.36 0 01-2.78-1.76c-.987-.934-1.48-2.073-1.48-3.42s.54-2.601 1.62-3.761 2.833-1.739 5.26-1.739c.854 0 1.653.1 2.4.3.746.2 1.28.394 1.6.58l.48.279-.92 2.521c-.854-.666-1.974-1-3.36-1-1.387 0-2.42.26-3.1.78-.68.52-1.02 1.18-1.02 1.979 0 .88.426 1.574 1.28 2.08.853.507 1.813.934 2.88 1.28 1.066.347 2.126.733 3.18 1.16 1.053.427 1.946 1.094 2.68 2s1.1 2.106 1.1 3.6c0 1.494-.6 2.794-1.8 3.9-1.2 1.106-2.954 1.66-5.26 1.66-2.307 0-4.114-.547-5.42-1.64-1.307-1.093-1.987-2.44-2.04-4.04z" fill="#c1dbe6" data-original="#89d3ff" />
+         </g>
+        </svg>
+        Photoshop
+       </div>
+       <span class="status">
+        <span class="status-circle green"></span>
+        Updated</span>
+       <div class="button-wrapper">
+        <button class="content-button status-button open">Open</button>
+        <div class="menu">
+         <button class="dropdown">
+          <ul>
+           <li><a href="#">Go to Discover</a></li>
+           <li><a href="#">Learn more</a></li>
+           <li><a href="#">Uninstall</a></li>
+          </ul>
+         </button>
+        </div>
+       </div>
+      </li>
+      <li class="adobe-product">
+       <div class="products">
+        <svg viewBox="0 0 52 52" style="border:1px solid #b65a0b">
+         <g xmlns="http://www.w3.org/2000/svg">
+          <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#261400" data-original="#6d4c13" />
+          <path d="M30.68 39h-3.24l-2.76-9.04h-8.32L13.72 39H10.6l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L17.12 27h6.84zM37.479 12.24c0 .453-.16.84-.48 1.16-.32.319-.7.479-1.14.479-.44 0-.827-.166-1.16-.5-.334-.333-.5-.713-.5-1.14s.166-.807.5-1.141c.333-.333.72-.5 1.16-.5.44 0 .82.16 1.14.48.321.322.48.709.48 1.162zM37.24 39h-2.88V18.96h2.88V39z" fill="#e6d2c0" data-original="#ffbd2e" />
+         </g>
+        </svg>
+        Illustrator
+       </div>
+
+       <span class="status">
+        <span class="status-circle"></span>
+        Update Available</span>
+       <div class="button-wrapper">
+        <button class="content-button status-button">Update this app</button>
+        <div class="pop-up">
+         <div class="pop-up__title">Update This App
+          <svg class="close" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle">
+           <circle cx="12" cy="12" r="10" />
+           <path d="M15 9l-6 6M9 9l6 6" />
+          </svg>
+         </div>
+         <div class="pop-up__subtitle">Adjust your selections for advanced options as desired before continuing. <a href="#">Learn more</a></div>
+         <div class="checkbox-wrapper">
+          <input type="checkbox" id="check1" class="checkbox">
+          <label for="check1">Import previous settings and preferences</label>
+         </div>
+         <div class="checkbox-wrapper">
+          <input type="checkbox" id="check2" class="checkbox">
+          <label for="check2">Remove old versions</label>
+         </div>
+         <div class="content-button-wrapper">
+          <button class="content-button status-button open close">Cancel</button>
+          <button class="content-button status-button">Continue</button>
+         </div>
+        </div>
+        <div class="menu">
+         <button class="dropdown">
+          <ul>
+           <li><a href="#">Go to Discover</a></li>
+           <li><a href="#">Learn more</a></li>
+           <li><a href="#">Uninstall</a></li>
+          </ul>
+         </button>
+        </div>
+       </div>
+      </li>
+      <li class="adobe-product">
+       <div class="products">
+        <svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
+         <g xmlns="http://www.w3.org/2000/svg">
+          <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375" />
+          <path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb" />
+         </g>
+        </svg>
+        After Effects
+       </div>
+       <span class="status">
+        <span class="status-circle green"></span>
+        Updated</span>
+       <div class="button-wrapper">
+        <button class="content-button status-button open">Open</button>
+        <div class="menu">
+         <button class="dropdown">
+          <ul>
+           <li><a href="#">Go to Discover</a></li>
+           <li><a href="#">Learn more</a></li>
+           <li><a href="#">Uninstall</a></li>
+          </ul>
+         </button>
+        </div>
+       </div>
+      </li>
+     </ul>
+    </div>
+    <div class="content-section">
+     <div class="content-section-title">Apps in your plan</div>
+     <div class="apps-card">
+      <div class="app-card">
+       <span>
+        <svg viewBox="0 0 512 512" style="border: 1px solid #a059a9">
+         <path xmlns="http://www.w3.org/2000/svg" d="M480 0H32C14.368 0 0 14.368 0 32v448c0 17.664 14.368 32 32 32h448c17.664 0 32-14.336 32-32V32c0-17.632-14.336-32-32-32z" fill="#210027" data-original="#7b1fa2" />
+         <g xmlns="http://www.w3.org/2000/svg">
+          <path d="M192 64h-80c-8.832 0-16 7.168-16 16v352c0 8.832 7.168 16 16 16s16-7.168 16-16V256h64c52.928 0 96-43.072 96-96s-43.072-96-96-96zm0 160h-64V96h64c35.296 0 64 28.704 64 64s-28.704 64-64 64zM400 256h-32c-18.08 0-34.592 6.24-48 16.384V272c0-8.864-7.168-16-16-16s-16 7.136-16 16v160c0 8.832 7.168 16 16 16s16-7.168 16-16v-96c0-26.464 21.536-48 48-48h32c8.832 0 16-7.168 16-16s-7.168-16-16-16z" fill="#f6e7fa" data-original="#e1bee7" />
+         </g>
+        </svg>
+        Premiere Pro
+       </span>
+       <div class="app-card__subtext">Edit, master and create fully proffesional videos</div>
+       <div class="app-card-buttons">
+        <button class="content-button status-button">Update</button>
+        <div class="menu"></div>
+       </div>
+      </div>
+      <div class="app-card">
+       <span>
+        <svg viewBox="0 0 52 52" style="border: 1px solid #c1316d">
+         <g xmlns="http://www.w3.org/2000/svg">
+          <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#2f0015" data-original="#6f2b41" />
+          <path d="M18.08 39H15.2V13.72l-2.64-.08V11h5.52v28zM27.68 19.4c1.173-.507 2.593-.761 4.26-.761s3.073.374 4.22 1.12V11h2.88v28c-2.293.32-4.414.48-6.36.48-1.947 0-3.707-.4-5.28-1.2-2.08-1.066-3.12-2.92-3.12-5.561v-7.56c0-2.799 1.133-4.719 3.4-5.759zm8.48 3.12c-1.387-.746-2.907-1.119-4.56-1.119-1.574 0-2.714.406-3.42 1.22-.707.813-1.06 1.847-1.06 3.1v7.12c0 1.227.44 2.188 1.32 2.88.96.719 2.146 1.079 3.56 1.079 1.413 0 2.8-.106 4.16-.319V22.52z" fill="#e1c1cf" data-original="#ff70bd" />
+         </g>
+        </svg>
+        InDesign
+       </span>
+       <div class="app-card__subtext">Design and publish great projects & mockups</div>
+       <div class="app-card-buttons">
+        <button class="content-button status-button">Update</button>
+        <div class="menu"></div>
+       </div>
+      </div>
+      <div class="app-card">
+       <span>
+        <svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
+         <g xmlns="http://www.w3.org/2000/svg">
+          <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375" />
+          <path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb" />
+         </g>
+        </svg>
+        After Effects
+       </span>
+       <div class="app-card__subtext">Industry Standart motion graphics & visual effects</div>
+       <div class="app-card-buttons">
+        <button class="content-button status-button">Update</button>
+        <div class="menu"></div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </div>
+ <div class="overlay-app"></div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/glassmorphism-creative-cloud-app-redesign/dist/script.js b/glassmorphism-creative-cloud-app-redesign/dist/script.js
new file mode 100644
index 0000000..141a698
--- /dev/null
+++ b/glassmorphism-creative-cloud-app-redesign/dist/script.js
@@ -0,0 +1,73 @@
+$(function () {
+ $(".menu-link").click(function () {
+  $(".menu-link").removeClass("is-active");
+  $(this).addClass("is-active");
+ });
+});
+
+$(function () {
+ $(".main-header-link").click(function () {
+  $(".main-header-link").removeClass("is-active");
+  $(this).addClass("is-active");
+ });
+});
+
+const dropdowns = document.querySelectorAll(".dropdown");
+dropdowns.forEach((dropdown) => {
+ dropdown.addEventListener("click", (e) => {
+  e.stopPropagation();
+  dropdowns.forEach((c) => c.classList.remove("is-active"));
+  dropdown.classList.add("is-active");
+ });
+});
+
+$(".search-bar input")
+ .focus(function () {
+  $(".header").addClass("wide");
+ })
+ .blur(function () {
+  $(".header").removeClass("wide");
+ });
+
+$(document).click(function (e) {
+ var container = $(".status-button");
+ var dd = $(".dropdown");
+ if (!container.is(e.target) && container.has(e.target).length === 0) {
+  dd.removeClass("is-active");
+ }
+});
+
+$(function () {
+ $(".dropdown").on("click", function (e) {
+  $(".content-wrapper").addClass("overlay");
+  e.stopPropagation();
+ });
+ $(document).on("click", function (e) {
+  if ($(e.target).is(".dropdown") === false) {
+   $(".content-wrapper").removeClass("overlay");
+  }
+ });
+});
+
+$(function () {
+ $(".status-button:not(.open)").on("click", function (e) {
+  $(".overlay-app").addClass("is-active");
+ });
+ $(".pop-up .close").click(function () {
+  $(".overlay-app").removeClass("is-active");
+ });
+});
+
+$(".status-button:not(.open)").click(function () {
+ $(".pop-up").addClass("visible");
+});
+
+$(".pop-up .close").click(function () {
+ $(".pop-up").removeClass("visible");
+});
+
+const toggleButton = document.querySelector('.dark-light');
+
+toggleButton.addEventListener('click', () => {
+  document.body.classList.toggle('light-mode');
+});
\ No newline at end of file
diff --git a/glassmorphism-creative-cloud-app-redesign/dist/style.css b/glassmorphism-creative-cloud-app-redesign/dist/style.css
new file mode 100644
index 0000000..e12901e
--- /dev/null
+++ b/glassmorphism-creative-cloud-app-redesign/dist/style.css
@@ -0,0 +1,868 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
+* {
+  outline: none;
+  box-sizing: border-box;
+}
+
+:root {
+  --theme-bg-color: rgba(16 18 27 / 40%);
+  --border-color: rgba(113 119 144 / 25%);
+  --theme-color: #f9fafb;
+  --inactive-color: rgb(113 119 144 / 78%);
+  --body-font: "Poppins", sans-serif;
+  --hover-menu-bg: rgba(12 15 25 / 30%);
+  --content-title-color: #999ba5;
+  --content-bg: rgb(146 151 179 / 13%);
+  --button-inactive: rgb(249 250 251 / 55%);
+  --dropdown-bg: #21242d;
+  --dropdown-hover: rgb(42 46 60);
+  --popup-bg: rgb(22 25 37);
+  --search-bg: #14162b;
+  --overlay-bg: rgba(36, 39, 59, 0.3);
+  --scrollbar-bg: rgb(1 2 3 / 40%);
+}
+
+.light-mode {
+  --theme-bg-color: rgb(255 255 255 / 31%);
+  --theme-color: #3c3a3a;
+  --inactive-color: #333333;
+  --button-inactive: #3c3a3a;
+  --search-bg: rgb(255 255 255 / 31%);
+  --dropdown-bg: #f7f7f7;
+  --overlay-bg: rgb(255 255 255 / 30%);
+  --dropdown-hover: rgb(236 236 236);
+  --border-color: rgb(255 255 255 / 35%);
+  --popup-bg: rgb(255 255 255);
+  --hover-menu-bg: rgba(255 255 255 / 35%);
+  --scrollbar-bg: rgb(255 253 253 / 57%);
+  --content-title-color: --theme-color;
+}
+
+html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  font-family: var(--body-font);
+  background-image: url(https://4kwallpapers.com/images/wallpapers/macos-big-sur-apple-layers-fluidic-colorful-dark-wwdc-2020-5120x2880-1432.jpg);
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 2em;
+  width: 100%;
+  height: 100vh;
+}
+@media screen and (max-width: 480px) {
+  body {
+    padding: 0.8em;
+  }
+}
+
+img {
+  max-width: 100%;
+}
+
+.dark-light {
+  position: fixed;
+  bottom: 50px;
+  right: 30px;
+  background-color: var(--dropdown-bg);
+  box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.2);
+  padding: 8px;
+  border-radius: 50%;
+  z-index: 3;
+  cursor: pointer;
+}
+.dark-light svg {
+  width: 24px;
+  flex-shrink: 0;
+  fill: #ffce45;
+  stroke: #ffce45;
+  transition: 0.5s;
+}
+
+.light-mode .dark-light svg {
+  fill: transparent;
+  stroke: var(--theme-color);
+}
+.light-mode .profile-img {
+  border: 2px solid var(--theme-bg-color);
+}
+.light-mode .content-section ul {
+  background-color: var(--theme-bg-color);
+}
+.light-mode .pop-up__title {
+  bor-color: var(--theme-color);
+}
+.light-mode .dropdown.is-active ul {
+  background-color: rgba(255, 255, 255, 0.88);
+}
+
+body.light-mode:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.45) 100%);
+  -webkit-backdrop-filter: saturate(3);
+          backdrop-filter: saturate(3);
+}
+
+.app {
+  background-color: var(--theme-bg-color);
+  max-width: 1250px;
+  max-height: 860px;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  border-radius: 14px;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 58px;
+  width: 100%;
+  border-bottom: 1px solid var(--border-color);
+  padding: 0 30px;
+  white-space: nowrap;
+}
+@media screen and (max-width: 480px) {
+  .header {
+    padding: 0 16px;
+  }
+}
+.header-menu {
+  display: flex;
+  align-items: center;
+}
+.header-menu a {
+  padding: 20px 30px;
+  text-decoration: none;
+  color: var(--inactive-color);
+  border-bottom: 2px solid transparent;
+  transition: 0.3s;
+}
+@media screen and (max-width: 610px) {
+  .header-menu a:not(.main-header-link) {
+    display: none;
+  }
+}
+.header-menu a.is-active, .header-menu a:hover {
+  color: var(--theme-color);
+  border-bottom: 2px solid var(--theme-color);
+}
+
+.notify {
+  position: relative;
+}
+.notify:before {
+  content: "";
+  position: absolute;
+  background-color: #3a6df0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  right: 20px;
+  top: 16px;
+}
+@media screen and (max-width: 1055px) {
+  .notify {
+    display: none;
+  }
+}
+
+.menu-circle {
+  width: 15px;
+  height: 15px;
+  background-color: #f96057;
+  border-radius: 50%;
+  box-shadow: 24px 0 0 0 #f8ce52, 48px 0 0 0 #5fcf65;
+  margin-right: 195px;
+  flex-shrink: 0;
+}
+@media screen and (max-width: 945px) {
+  .menu-circle {
+    display: none;
+  }
+}
+
+.search-bar {
+  height: 40px;
+  display: flex;
+  width: 100%;
+  max-width: 400px;
+  padding-left: 16px;
+  border-radius: 4px;
+}
+.search-bar input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: var(--search-bg);
+  border-radius: 4px;
+  font-family: var(--body-font);
+  font-size: 15px;
+  font-weight: 500;
+  padding: 0 20px 0 40px;
+  box-shadow: 0 0 0 2px rgba(134, 140, 160, 0.02);
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: 16px 48%;
+  color: var(--theme-color);
+}
+.search-bar input::-moz-placeholder {
+  font-family: var(--body-font);
+  color: var(--inactive-color);
+  font-size: 15px;
+  font-weight: 500;
+}
+.search-bar input:-ms-input-placeholder {
+  font-family: var(--body-font);
+  color: var(--inactive-color);
+  font-size: 15px;
+  font-weight: 500;
+}
+.search-bar input::placeholder {
+  font-family: var(--body-font);
+  color: var(--inactive-color);
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.header-profile {
+  display: flex;
+  align-items: center;
+  padding: 0 16px 0 40px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.header-profile svg {
+  width: 22px;
+  color: #f9fafb;
+  flex-shrink: 0;
+}
+
+.notification {
+  position: relative;
+}
+.notification-number {
+  position: absolute;
+  background-color: #3a6df0;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  right: -6px;
+  top: -6px;
+}
+.notification + svg {
+  margin-left: 22px;
+}
+@media screen and (max-width: 945px) {
+  .notification + svg {
+    display: none;
+  }
+}
+
+.profile-img {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border: 2px solid var(--theme-color);
+  margin-left: 22px;
+}
+
+.wide .header-menu,
+.wide .header-profile {
+  display: none;
+}
+.wide .search-bar {
+  max-width: 600px;
+  margin: auto;
+  transition: 0.4s;
+  box-shadow: 0 0 0 1px var(--border-color);
+  padding-left: 0;
+}
+.wide .menu-circle {
+  margin-right: 0;
+}
+
+.wrapper {
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.left-side {
+  flex-basis: 240px;
+  border-right: 1px solid var(--border-color);
+  padding: 26px;
+  overflow: auto;
+  flex-shrink: 0;
+}
+@media screen and (max-width: 945px) {
+  .left-side {
+    display: none;
+  }
+}
+
+.side-wrapper + .side-wrapper {
+  margin-top: 20px;
+}
+
+.side-title {
+  color: var(--inactive-color);
+  margin-bottom: 14px;
+}
+
+.side-menu {
+  display: flex;
+  flex-direction: column;
+  white-space: nowrap;
+}
+.side-menu a {
+  text-decoration: none;
+  color: var(--theme-color);
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  padding: 10px;
+  font-size: 14px;
+  border-radius: 6px;
+  transition: 0.3s;
+}
+.side-menu a:hover {
+  background-color: var(--hover-menu-bg);
+}
+.side-menu svg {
+  width: 16px;
+  margin-right: 8px;
+}
+
+.updates {
+  position: relative;
+  top: 0;
+  right: 0;
+  margin-left: auto;
+  width: 18px;
+  height: 18px;
+  font-size: 11px;
+}
+
+.main-header {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--border-color);
+  height: 58px;
+  flex-shrink: 0;
+}
+.main-header .header-menu {
+  margin-left: 150px;
+}
+@media screen and (max-width: 1055px) {
+  .main-header .header-menu {
+    margin: auto;
+  }
+}
+.main-header .header-menu a {
+  padding: 20px 24px;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.menu-link-main {
+  text-decoration: none;
+  color: var(--theme-color);
+  padding: 0 30px;
+}
+@media screen and (max-width: 1055px) {
+  .menu-link-main {
+    display: none;
+  }
+}
+
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  color: var(--theme-color);
+  padding: 20px 40px;
+  height: 100%;
+  overflow: auto;
+  background-color: var(--theme-bg-color);
+}
+@media screen and (max-width: 510px) {
+  .content-wrapper {
+    padding: 20px;
+  }
+}
+.content-wrapper-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  background-image: url("https://www.transparenttextures.com/patterns/cubes.png"), linear-gradient(to right top, #cf4af3, #e73bd7, #f631bc, #fd31a2, #ff3a8b, #ff4b78, #ff5e68, #ff705c, #ff8c51, #ffaa49, #ffc848, #ffe652);
+  border-radius: 14px;
+  padding: 20px 40px;
+}
+@media screen and (max-width: 415px) {
+  .content-wrapper-header {
+    padding: 20px;
+  }
+}
+.content-wrapper.overlay {
+  pointer-events: none;
+  transition: 0.3s;
+  background-color: var(--overlay-bg);
+}
+
+.overlay-app {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  pointer-events: all;
+  background-color: rgba(36, 39, 59, 0.8);
+  opacity: 0;
+  visibility: hidden;
+  transition: 0.3s;
+}
+.overlay-app.is-active {
+  visibility: visible;
+  opacity: 1;
+}
+
+.img-content {
+  font-weight: 500;
+  font-size: 17px;
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+.img-content svg {
+  width: 28px;
+  margin-right: 14px;
+}
+
+.content-text {
+  font-weight: 400;
+  font-size: 14px;
+  margin-top: 16px;
+  line-height: 1.7em;
+  color: #ebecec;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.content-wrapper-context {
+  max-width: 350px;
+}
+
+.content-button {
+  background-color: #3a6df0;
+  border: none;
+  padding: 8px 26px;
+  color: #fff;
+  border-radius: 20px;
+  margin-top: 16px;
+  cursor: pointer;
+  transition: 0.3s;
+  white-space: nowrap;
+}
+
+.content-wrapper-img {
+  width: 186px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  margin-top: -25px;
+  -o-object-position: center;
+     object-position: center;
+}
+@media screen and (max-width: 570px) {
+  .content-wrapper-img {
+    width: 110px;
+  }
+}
+
+.content-section {
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+}
+.content-section-title {
+  color: var(--content-title-color);
+  margin-bottom: 14px;
+}
+.content-section ul {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: space-around;
+  background-color: var(--content-bg);
+  padding-left: 0;
+  margin: 0;
+  border-radius: 14px;
+  border: 1px solid var(--theme-bg-color);
+  cursor: pointer;
+}
+.content-section ul li {
+  list-style: none;
+  padding: 10px 18px;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+  transition: 0.3s;
+}
+.content-section ul li:hover {
+  background-color: var(--theme-bg-color);
+}
+.content-section ul li:hover:first-child {
+  border-radius: 13px 13px 0 0;
+}
+.content-section ul li:hover:last-child {
+  border-radius: 0 0 13px 13px;
+}
+.content-section ul li + li {
+  border-top: 1px solid var(--border-color);
+}
+.content-section ul svg {
+  width: 28px;
+  border-radius: 6px;
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+
+.products {
+  display: flex;
+  align-items: center;
+  width: 150px;
+}
+@media screen and (max-width: 480px) {
+  .products {
+    width: 120px;
+  }
+}
+
+.status {
+  margin-left: auto;
+  width: 140px;
+  font-size: 15px;
+  position: relative;
+}
+@media screen and (max-width: 700px) {
+  .status {
+    display: none;
+  }
+}
+.status-circle {
+  width: 6px;
+  height: 6px;
+  background-color: #396df0;
+  position: absolute;
+  border-radius: 50%;
+  top: 4px;
+  left: -20px;
+}
+.status-circle.green {
+  background-color: #3bf083;
+}
+.status-button {
+  font-size: 15px;
+  margin-top: 0;
+  padding: 6px 24px;
+}
+@media screen and (max-width: 390px) {
+  .status-button {
+    padding: 6px 14px;
+  }
+}
+.status-button.open {
+  background: none;
+  color: var(--button-inactive);
+  border: 1px solid var(--button-inactive);
+}
+.status-button:not(.open):hover {
+  color: #fff;
+  border-color: #fff;
+}
+
+.content-button:not(.open):hover {
+  background: #1e59f1;
+}
+
+.menu {
+  width: 5px;
+  height: 5px;
+  background-color: var(--button-inactive);
+  border-radius: 50%;
+  box-shadow: 7px 0 0 0 var(--button-inactive), 14px 0 0 0 var(--button-inactive);
+  margin: 0 12px;
+}
+
+@media screen and (max-width: 415px) {
+  .adobe-product .menu {
+    display: none;
+  }
+}
+.dropdown {
+  position: relative;
+  height: 53px;
+  width: 40px;
+  top: -24px;
+  display: flex;
+  left: -5px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.dropdown ul {
+  position: absolute;
+  background: var(--dropdown-bg);
+  height: 110px;
+  width: 120px;
+  right: 0;
+  top: 20px;
+  pointer-events: none;
+  opacity: 0;
+  transform: translatey(10px);
+  transition: all 0.4s ease;
+}
+.dropdown ul li a {
+  text-decoration: none;
+  color: var(--theme-color);
+  font-size: 12px;
+}
+
+.dropdown.is-active ul {
+  opacity: 1;
+  pointer-events: all;
+  transform: translatey(25px);
+}
+.dropdown.is-active ul li:hover {
+  background-color: var(--dropdown-hover);
+}
+
+.button-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 187px;
+  margin-left: auto;
+}
+@media screen and (max-width: 480px) {
+  .button-wrapper {
+    width: auto;
+  }
+}
+
+.pop-up {
+  position: absolute;
+  padding: 30px 40px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  overflow-y: auto;
+  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.4);
+  transition: all 0.3s;
+  z-index: 10;
+  background-color: var(--popup-bg);
+  width: 500px;
+  visibility: hidden;
+  opacity: 0;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  white-space: normal;
+}
+@media screen and (max-width: 570px) {
+  .pop-up {
+    width: 100%;
+  }
+}
+.pop-up.visible {
+  visibility: visible;
+  opacity: 1;
+}
+.pop-up__title {
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.pop-up__subtitle {
+  white-space: normal;
+  margin: 20px 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.8em;
+}
+.pop-up__subtitle a {
+  color: var(--theme-color);
+}
+
+.content-button-wrapper .content-button.status-button.open.close {
+  width: auto;
+}
+
+.content-section .close {
+  margin-right: 0;
+  width: 24px;
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 400;
+}
+.checkbox-wrapper + .checkbox-wrapper {
+  margin: 20px 0 40px;
+}
+
+.checkbox {
+  display: none;
+}
+
+.checkbox + label {
+  display: flex;
+  align-items: center;
+}
+.checkbox + label:before {
+  content: "";
+  margin-right: 10px;
+  width: 15px;
+  height: 15px;
+  border: 1px solid var(--theme-color);
+  border-radius: 4px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.checkbox:checked + label:before {
+  background-color: #3a6df0;
+  border-color: #3a6df0;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e");
+  background-position: 50%;
+  background-size: 12px;
+  background-repeat: no-repeat;
+}
+
+.content-button-wrapper {
+  margin-top: auto;
+  margin-left: auto;
+}
+.content-button-wrapper .open {
+  margin-right: 8px;
+}
+
+.apps-card {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  width: calc(100% + 20px);
+}
+
+.app-card {
+  display: flex;
+  flex-direction: column;
+  width: calc(33.3% - 20px);
+  font-size: 16px;
+  background-color: var(--content-bg);
+  border-radius: 14px;
+  border: 1px solid var(--theme-bg-color);
+  padding: 20px;
+  cursor: pointer;
+  transition: 0.3s ease;
+}
+.app-card:hover {
+  transform: scale(1.02);
+  background-color: var(--theme-bg-color);
+}
+.app-card svg {
+  width: 28px;
+  border-radius: 6px;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+.app-card + .app-card {
+  margin-left: 20px;
+}
+.app-card span {
+  display: flex;
+  align-items: center;
+}
+.app-card__subtext {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.6em;
+  margin-top: 20px;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 20px;
+}
+.app-card-buttons {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  margin-top: 16px;
+}
+@media screen and (max-width: 1110px) {
+  .app-card {
+    width: calc(50% - 20px);
+  }
+  .app-card:last-child {
+    margin-top: 20px;
+    margin-left: 0px;
+  }
+}
+@media screen and (max-width: 565px) {
+  .app-card {
+    width: calc(100% - 20px);
+    margin-top: 20px;
+  }
+  .app-card + .app-card {
+    margin-left: 0;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-bg);
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/glassmorphism-creative-cloud-app-redesign/license.txt b/glassmorphism-creative-cloud-app-redesign/license.txt
new file mode 100644
index 0000000..d5766dc
--- /dev/null
+++ b/glassmorphism-creative-cloud-app-redesign/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Aysenur Turk (https://codepen.io/TurkAysenur/pen/ZEpxeYm)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/glassmorphism-creative-cloud-app-redesign/src/index.html b/glassmorphism-creative-cloud-app-redesign/src/index.html
new file mode 100644
index 0000000..911fe40
--- /dev/null
+++ b/glassmorphism-creative-cloud-app-redesign/src/index.html
@@ -0,0 +1,340 @@
+<div class="dark-light">
+    <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+     <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" /></svg>
+   </div>
+<div class="app">
+ <div class="header">
+  <div class="menu-circle"></div>
+  <div class="header-menu">
+   <a class="menu-link is-active" href="#">Apps</a>
+   <a class="menu-link notify" href="#">Your work</a>
+   <a class="menu-link" href="#">Discover</a>
+   <a class="menu-link notify" href="#">Market</a>
+  </div>
+  <div class="search-bar">
+   <input type="text" placeholder="Search">
+  </div>
+  <div class="header-profile">
+   <div class="notification">
+    <span class="notification-number">3</span>
+    <svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
+     <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" />
+    </svg>
+   </div>
+   <svg viewBox="0 0 512 512" fill="currentColor">
+    <path d="M448.773 235.551A135.893 135.893 0 00451 211c0-74.443-60.557-135-135-135-47.52 0-91.567 25.313-115.766 65.537-32.666-10.59-66.182-6.049-93.794 12.979-27.612 19.013-44.092 49.116-45.425 82.031C24.716 253.788 0 290.497 0 331c0 7.031 1.703 13.887 3.006 20.537l.015.015C12.719 400.492 56.034 436 106 436h300c57.891 0 106-47.109 106-105 0-40.942-25.053-77.798-63.227-95.449z" />
+   </svg>
+   <img class="profile-img" src="https://images.unsplash.com/photo-1600353068440-6361ef3a86e8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="">
+  </div>
+ </div>
+ <div class="wrapper">
+  <div class="left-side">
+   <div class="side-wrapper">
+    <div class="side-title">Apps</div>
+    <div class="side-menu">
+     <a href="#">
+      <svg viewBox="0 0 512 512">
+       <g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+        <path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0" data-original="#bfc9d1" />
+       </g>
+       <path xmlns="http://www.w3.org/2000/svg" d="M192 192h128v128H192zm0 0" fill="currentColor" data-original="#82b1ff" />
+       <path xmlns="http://www.w3.org/2000/svg" d="M384 192h128v128H384zm0 0M0 384h128v128H0zm0 0M192 384h128v128H192zm0 0M384 384h128v128H384zm0 0" fill="currentColor" data-original="#bfc9d1" />
+      </svg>
+      All Apps
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 488.932 488.932" fill="currentColor">
+       <path d="M243.158 61.361v-57.6c0-3.2 4-4.9 6.7-2.9l118.4 87c2 1.5 2 4.4 0 5.9l-118.4 87c-2.7 2-6.7.2-6.7-2.9v-57.5c-87.8 1.4-158.1 76-152.1 165.4 5.1 76.8 67.7 139.1 144.5 144 81.4 5.2 150.6-53 163-129.9 2.3-14.3 14.7-24.7 29.2-24.7 17.9 0 31.8 15.9 29 33.5-17.4 109.7-118.5 192-235.7 178.9-98-11-176.7-89.4-187.8-187.4-14.7-128.2 84.9-237.4 209.9-238.8z" />
+      </svg>
+      Updates
+      <span class="notification-number updates">3</span>
+     </a>
+    </div>
+   </div>
+   <div class="side-wrapper">
+    <div class="side-title">Categories</div>
+    <div class="side-menu">
+     <a href="#">
+      <svg viewBox="0 0 488.455 488.455" fill="currentColor">
+       <path d="M287.396 216.317c23.845 23.845 23.845 62.505 0 86.35s-62.505 23.845-86.35 0-23.845-62.505 0-86.35 62.505-23.845 86.35 0" />
+       <path d="M427.397 91.581H385.21l-30.544-61.059H133.76l-30.515 61.089-42.127.075C27.533 91.746.193 119.115.164 152.715L0 396.86c0 33.675 27.384 61.074 61.059 61.074h366.338c33.675 0 61.059-27.384 61.059-61.059V152.639c-.001-33.674-27.385-61.058-61.059-61.058zM244.22 381.61c-67.335 0-122.118-54.783-122.118-122.118s54.783-122.118 122.118-122.118 122.118 54.783 122.118 122.118S311.555 381.61 244.22 381.61z" />
+      </svg>
+      Photography
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <circle cx="295.099" cy="327.254" r="110.96" transform="rotate(-45 295.062 327.332)" />
+       <path d="M471.854 338.281V163.146H296.72v41.169a123.1 123.1 0 01121.339 122.939c0 3.717-.176 7.393-.5 11.027zM172.14 327.254a123.16 123.16 0 01100.59-120.915L195.082 73.786 40.146 338.281H172.64c-.325-3.634-.5-7.31-.5-11.027z" />
+      </svg>
+      Graphic Design
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 58 58" fill="currentColor">
+       <path d="M57 6H1a1 1 0 00-1 1v44a1 1 0 001 1h56a1 1 0 001-1V7a1 1 0 00-1-1zM10 50H2v-9h8v9zm0-11H2v-9h8v9zm0-11H2v-9h8v9zm0-11H2V8h8v9zm26.537 12.844l-11 7a1.007 1.007 0 01-1.018.033A1.001 1.001 0 0124 36V22a1.001 1.001 0 011.538-.844l11 7a1.003 1.003 0 01-.001 1.688zM56 50h-8v-9h8v9zm0-11h-8v-9h8v9zm0-11h-8v-9h8v9zm0-11h-8V8h8v9z" />
+      </svg>
+      Video
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M499.377 46.402c-8.014-8.006-18.662-12.485-29.985-12.613a41.13 41.13 0 00-.496-.003c-11.142 0-21.698 4.229-29.771 11.945L198.872 275.458c25.716 6.555 47.683 23.057 62.044 47.196a113.544 113.544 0 0110.453 23.179L500.06 106.661C507.759 98.604 512 88.031 512 76.89c0-11.507-4.478-22.33-12.623-30.488zM176.588 302.344a86.035 86.035 0 00-3.626-.076c-20.273 0-40.381 7.05-56.784 18.851-19.772 14.225-27.656 34.656-42.174 53.27C55.8 397.728 27.795 409.14 0 416.923c16.187 42.781 76.32 60.297 115.752 61.24 1.416.034 2.839.051 4.273.051 44.646 0 97.233-16.594 118.755-60.522 23.628-48.224-5.496-112.975-62.192-115.348z" />
+      </svg>
+      Illustrations
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M497 151H316c-8.401 0-15 6.599-15 15v300c0 8.401 6.599 15 15 15h181c8.401 0 15-6.599 15-15V166c0-8.401-6.599-15-15-15zm-76 270h-30c-8.401 0-15-6.599-15-15s6.599-15 15-15h30c8.401 0 15 6.599 15 15s-6.599 15-15 15zm0-180h-30c-8.401 0-15-6.599-15-15s6.599-15 15-15h30c8.401 0 15 6.599 15 15s-6.599 15-15 15z" />
+       <path d="M15 331h196v60h-75c-8.291 0-15 6.709-15 15s6.709 15 15 15h135v-30h-30v-60h30V166c0-24.814 20.186-45 45-45h135V46c0-8.284-6.716-15-15-15H15C6.716 31 0 37.716 0 46v270c0 8.284 6.716 15 15 15z" />
+      </svg>
+      UI/UX
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M0 331v112.295a14.996 14.996 0 007.559 13.023L106 512V391L0 331zM136 391v121l105-60V331zM271 331v121l105 60V391zM406 391v121l98.441-55.682A14.995 14.995 0 00512 443.296V331l-106 60zM391 241l-115.754 57.876L391 365.026l116.754-66.15zM262.709 1.583a15.006 15.006 0 00-13.418 0L140.246 57.876 256 124.026l115.754-66.151L262.709 1.583zM136 90v124.955l105 52.5V150zM121 241L4.246 298.876 121 365.026l115.754-66.15zM271 150v117.455l105-52.5V90z" />
+      </svg>
+      3D/AR
+     </a>
+    </div>
+   </div>
+   <div class="side-wrapper">
+    <div class="side-title">Fonts</div>
+    <div class="side-menu">
+     <a href="#">
+      <svg viewBox="0 0 332 332" fill="currentColor">
+       <path d="M282.341 8.283C275.765 2.705 266.211 0 253.103 0c-18.951 0-36.359 5.634-51.756 16.743-14.972 10.794-29.274 28.637-42.482 53.028-4.358 7.993-7.428 11.041-8.973 12.179h-26.255c-10.84 0-19.626 8.786-19.626 19.626 0 8.989 6.077 16.486 14.323 18.809l-.05.165h.589c1.531.385 3.109.651 4.757.651h18.833l-32.688 128.001c-7.208 27.848-10.323 37.782-11.666 41.24-1.445 3.711-3.266 7.062-5.542 10.135-.42-5.39-2.637-10.143-6.508-13.854-4.264-4.079-10.109-6.136-17.364-6.136-8.227 0-15.08 2.433-20.37 7.229-5.416 4.93-8.283 11.193-8.283 18.134 0 5.157 1.701 12.712 9.828 19.348 6.139 4.97 14.845 7.382 26.621 7.382 17.096 0 32.541-4.568 45.891-13.577 13.112-8.845 24.612-22.489 34.166-40.522 9.391-17.678 18.696-45.124 28.427-83.9l18.598-73.479h30.016c10.841 0 19.625-8.785 19.625-19.625s-8.784-19.626-19.625-19.626h-19.628c6.34-21.62 14.175-37.948 23.443-48.578 2.284-2.695 5.246-5.692 8.412-7.678-1.543 3.392-2.325 6.767-2.325 10.055 0 6.164 2.409 11.714 6.909 16.03 4.484 4.336 10.167 6.54 16.888 6.54 7.085 0 13.373-2.667 18.17-7.716 4.76-5.005 7.185-11.633 7.185-19.703.017-9.079-3.554-16.899-10.302-22.618z" />
+      </svg>
+      Manage Fonts
+     </a>
+    </div>
+   </div>
+   <div class="side-wrapper">
+    <div class="side-title">Resource Links</div>
+    <div class="side-menu">
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M467 0H45C20.186 0 0 20.186 0 45v422c0 24.814 20.186 45 45 45h422c24.814 0 45-20.186 45-45V45c0-24.814-20.186-45-45-45zM181 241c41.353 0 75 33.647 75 75s-33.647 75-75 75-75-33.647-75-75c0-8.291 6.709-15 15-15s15 6.709 15 15c0 24.814 20.186 45 45 45s45-20.186 45-45-20.186-45-45-45c-41.353 0-75-33.647-75-75s33.647-75 75-75 75 33.647 75 75c0 8.291-6.709 15-15 15s-15-6.709-15-15c0-24.814-20.186-45-45-45s-45 20.186-45 45 20.186 45 45 45zm180 120h30c8.291 0 15 6.709 15 15s-6.709 15-15 15h-30c-24.814 0-45-20.186-45-45V211h-15c-8.291 0-15-6.709-15-15s6.709-15 15-15h15v-45c0-8.291 6.709-15 15-15s15 6.709 15 15v45h45c8.291 0 15 6.709 15 15s-6.709 15-15 15h-45v135c0 8.276 6.724 15 15 15z" />
+      </svg>
+      Stock
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 511.441 511.441" fill="currentColor">
+       <path d="M255.721 347.484L90.22 266.751v106.57l165.51 73.503 165.509-73.503V266.742z" />
+       <path d="M511.441 189.361L255.721 64.617 0 189.361l255.721 124.744 195.522-95.378v111.032h30V204.092z" />
+      </svg>
+      Tutorials
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M196 151h-75v90h75c24.814 0 45-20.186 45-45s-20.186-45-45-45z" />
+       <path d="M467 0H45C20.186 0 0 20.186 0 45v422c0 24.814 20.186 45 45 45h422c24.814 0 45-20.186 45-45V45c0-24.814-20.186-45-45-45zM196 271h-75v105c0 8.291-6.709 15-15 15s-15-6.709-15-15V136c0-8.291 6.709-15 15-15h90c41.353 0 75 33.647 75 75s-33.647 75-75 75zm210-60c8.291 0 15 6.709 15 15s-6.709 15-15 15h-45v135c0 8.291-6.709 15-15 15s-15-6.709-15-15V241h-15c-8.291 0-15-6.709-15-15s6.709-15 15-15h15v-45c0-24.814 20.186-45 45-45h30c8.291 0 15 6.709 15 15s-6.709 15-15 15h-30c-8.276 0-15 6.724-15 15v45h45z" />
+      </svg>
+      Portfolio
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M181 181h-60v60h60c16.54 0 30-13.46 30-30s-13.46-30-30-30zm0 0M181 271h-60v60h60c16.54 0 30-13.46 30-30s-13.46-30-30-30zm0 0M346 241c-19.555 0-36.238 12.54-42.438 30h84.875c-6.199-17.46-22.882-30-42.437-30zm0 0" />
+       <path d="M436 0H75C33.648 0 0 33.648 0 75v362c0 41.352 33.648 75 75 75h361c41.352 0 76-33.648 76-75V75c0-41.352-34.648-75-76-75zM286 151h120v30H286zm-45 150c0 33.09-26.91 60-60 60H91V151h90c33.09 0 60 26.91 60 60 0 18.008-8.133 33.996-20.73 45 12.597 11.004 20.73 26.992 20.73 45zm180 0H303.562c6.196 17.46 22.883 30 42.438 30 16.012 0 30.953-8.629 38.992-22.516l25.957 15.032C397.58 346.629 372.687 361 346 361c-41.352 0-75-33.648-75-75s33.648-75 75-75 75 33.648 75 75zm0 0" />
+      </svg>
+      Behance
+     </a>
+     <a href="#">
+      <svg viewBox="0 0 512 512" fill="currentColor">
+       <path d="M352 0H64C28.704 0 0 28.704 0 64v320a16.02 16.02 0 009.216 14.496A16.232 16.232 0 0016 400c3.68 0 7.328-1.248 10.24-3.712L117.792 320H352c35.296 0 64-28.704 64-64V64c0-35.296-28.704-64-64-64z" />
+       <path d="M464 128h-16v128c0 52.928-43.072 96-96 96H129.376L128 353.152V400c0 26.464 21.536 48 48 48h234.368l75.616 60.512A16.158 16.158 0 00496 512c2.336 0 4.704-.544 6.944-1.6A15.968 15.968 0 00512 496V176c0-26.464-21.536-48-48-48z" />
+      </svg>
+      Social Forum
+     </a>
+    </div>
+   </div>
+  </div>
+  <div class="main-container">
+   <div class="main-header">
+    <a class="menu-link-main" href="#">All Apps</a>
+    <div class="header-menu">
+     <a class="main-header-link is-active" href="#">Desktop</a>
+     <a class="main-header-link" href="#">Mobile</a>
+     <a class="main-header-link" href="#">Web</a>
+
+    </div>
+   </div>
+   <div class="content-wrapper">
+    <div class="content-wrapper-header">
+     <div class="content-wrapper-context">
+      <h3 class="img-content">
+       <svg viewBox="0 0 512 512">
+        <path d="M467 0H45C20.099 0 0 20.099 0 45v422c0 24.901 20.099 45 45 45h422c24.901 0 45-20.099 45-45V45c0-24.901-20.099-45-45-45z" fill="#d6355b" data-original="#ff468c" />
+        <path xmlns="http://www.w3.org/2000/svg" d="M512 45v422c0 24.901-20.099 45-45 45H256V0h211c24.901 0 45 20.099 45 45z" fill="#d6355b" data-original="#d72878" />
+        <path xmlns="http://www.w3.org/2000/svg" d="M467 30H45c-8.401 0-15 6.599-15 15v422c0 8.401 6.599 15 15 15h422c8.401 0 15-6.599 15-15V45c0-8.401-6.599-15-15-15z" fill="#2e000a" data-original="#700029" />
+        <path xmlns="http://www.w3.org/2000/svg" d="M482 45v422c0 8.401-6.599 15-15 15H256V30h211c8.401 0 15 6.599 15 15z" fill="#2e000a" data-original="#4d0e06" />
+        <path xmlns="http://www.w3.org/2000/svg" d="M181 391c-41.353 0-75-33.647-75-75 0-8.291 6.709-15 15-15s15 6.709 15 15c0 24.814 20.186 45 45 45s45-20.186 45-45-20.186-45-45-45c-41.353 0-75-33.647-75-75s33.647-75 75-75 75 33.647 75 75c0 8.291-6.709 15-15 15s-15-6.709-15-15c0-24.814-20.186-45-45-45s-45 20.186-45 45 20.186 45 45 45c41.353 0 75 33.647 75 75s-33.647 75-75 75z" fill="#d6355b" data-original="#ff468c" />
+        <path xmlns="http://www.w3.org/2000/svg" d="M391 361h-30c-8.276 0-15-6.724-15-15V211h45c8.291 0 15-6.709 15-15s-6.709-15-15-15h-45v-45c0-8.291-6.709-15-15-15s-15 6.709-15 15v45h-15c-8.291 0-15 6.709-15 15s6.709 15 15 15h15v135c0 24.814 20.186 45 45 45h30c8.291 0 15-6.709 15-15s-6.709-15-15-15z" fill="#d6355b" data-original="#d72878" />
+       </svg>
+       Adobe Stock
+      </h3>
+      <div class="content-text">Grab yourself 10 free images from Adobe Stock in a 30-day free trial plan and find perfect image, that will help you with your new project.</div>
+      <button class="content-button">Start free trial</button>
+     </div>
+     <img class="content-wrapper-img" src="https://assets.codepen.io/3364143/glass.png" alt="">
+    </div>
+    <div class="content-section">
+     <div class="content-section-title">Installed</div>
+     <ul>
+      <li class="adobe-product">
+       <div class="products">
+        <svg viewBox="0 0 52 52" style="border:1px solid #3291b8">
+         <g xmlns="http://www.w3.org/2000/svg">
+          <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#061e26" data-original="#393687" />
+          <path d="M12.16 39H9.28V11h9.64c2.613 0 4.553.813 5.82 2.44 1.266 1.626 1.9 3.76 1.9 6.399 0 .934-.027 1.74-.08 2.42-.054.681-.22 1.534-.5 2.561-.28 1.026-.66 1.866-1.14 2.52-.48.654-1.213 1.227-2.2 1.72-.987.494-2.16.74-3.52.74h-7.04V39zm0-12h6.68c.96 0 1.773-.187 2.44-.56.666-.374 1.153-.773 1.46-1.2.306-.427.546-1.04.72-1.84.173-.801.267-1.4.28-1.801.013-.399.02-.973.02-1.72 0-4.053-1.694-6.08-5.08-6.08h-6.52V27zM29.48 33.92l2.8-.12c.106.987.6 1.754 1.48 2.3.88.547 1.893.82 3.04.82s2.14-.26 2.98-.78c.84-.52 1.26-1.266 1.26-2.239s-.36-1.747-1.08-2.32c-.72-.573-1.6-1.026-2.64-1.36-1.04-.333-2.086-.686-3.14-1.06a7.36 7.36 0 01-2.78-1.76c-.987-.934-1.48-2.073-1.48-3.42s.54-2.601 1.62-3.761 2.833-1.739 5.26-1.739c.854 0 1.653.1 2.4.3.746.2 1.28.394 1.6.58l.48.279-.92 2.521c-.854-.666-1.974-1-3.36-1-1.387 0-2.42.26-3.1.78-.68.52-1.02 1.18-1.02 1.979 0 .88.426 1.574 1.28 2.08.853.507 1.813.934 2.88 1.28 1.066.347 2.126.733 3.18 1.16 1.053.427 1.946 1.094 2.68 2s1.1 2.106 1.1 3.6c0 1.494-.6 2.794-1.8 3.9-1.2 1.106-2.954 1.66-5.26 1.66-2.307 0-4.114-.547-5.42-1.64-1.307-1.093-1.987-2.44-2.04-4.04z" fill="#c1dbe6" data-original="#89d3ff" />
+         </g>
+        </svg>
+        Photoshop
+       </div>
+       <span class="status">
+        <span class="status-circle green"></span>
+        Updated</span>
+       <div class="button-wrapper">
+        <button class="content-button status-button open">Open</button>
+        <div class="menu">
+         <button class="dropdown">
+          <ul>
+           <li><a href="#">Go to Discover</a></li>
+           <li><a href="#">Learn more</a></li>
+           <li><a href="#">Uninstall</a></li>
+          </ul>
+         </button>
+        </div>
+       </div>
+      </li>
+      <li class="adobe-product">
+       <div class="products">
+        <svg viewBox="0 0 52 52" style="border:1px solid #b65a0b">
+         <g xmlns="http://www.w3.org/2000/svg">
+          <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#261400" data-original="#6d4c13" />
+          <path d="M30.68 39h-3.24l-2.76-9.04h-8.32L13.72 39H10.6l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L17.12 27h6.84zM37.479 12.24c0 .453-.16.84-.48 1.16-.32.319-.7.479-1.14.479-.44 0-.827-.166-1.16-.5-.334-.333-.5-.713-.5-1.14s.166-.807.5-1.141c.333-.333.72-.5 1.16-.5.44 0 .82.16 1.14.48.321.322.48.709.48 1.162zM37.24 39h-2.88V18.96h2.88V39z" fill="#e6d2c0" data-original="#ffbd2e" />
+         </g>
+        </svg>
+        Illustrator
+       </div>
+
+       <span class="status">
+        <span class="status-circle"></span>
+        Update Available</span>
+       <div class="button-wrapper">
+        <button class="content-button status-button">Update this app</button>
+        <div class="pop-up">
+         <div class="pop-up__title">Update This App
+          <svg class="close" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle">
+           <circle cx="12" cy="12" r="10" />
+           <path d="M15 9l-6 6M9 9l6 6" />
+          </svg>
+         </div>
+         <div class="pop-up__subtitle">Adjust your selections for advanced options as desired before continuing. <a href="#">Learn more</a></div>
+         <div class="checkbox-wrapper">
+          <input type="checkbox" id="check1" class="checkbox">
+          <label for="check1">Import previous settings and preferences</label>
+         </div>
+         <div class="checkbox-wrapper">
+          <input type="checkbox" id="check2" class="checkbox">
+          <label for="check2">Remove old versions</label>
+         </div>
+         <div class="content-button-wrapper">
+          <button class="content-button status-button open close">Cancel</button>
+          <button class="content-button status-button">Continue</button>
+         </div>
+        </div>
+        <div class="menu">
+         <button class="dropdown">
+          <ul>
+           <li><a href="#">Go to Discover</a></li>
+           <li><a href="#">Learn more</a></li>
+           <li><a href="#">Uninstall</a></li>
+          </ul>
+         </button>
+        </div>
+       </div>
+      </li>
+      <li class="adobe-product">
+       <div class="products">
+        <svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
+         <g xmlns="http://www.w3.org/2000/svg">
+          <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375" />
+          <path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb" />
+         </g>
+        </svg>
+        After Effects
+       </div>
+       <span class="status">
+        <span class="status-circle green"></span>
+        Updated</span>
+       <div class="button-wrapper">
+        <button class="content-button status-button open">Open</button>
+        <div class="menu">
+         <button class="dropdown">
+          <ul>
+           <li><a href="#">Go to Discover</a></li>
+           <li><a href="#">Learn more</a></li>
+           <li><a href="#">Uninstall</a></li>
+          </ul>
+         </button>
+        </div>
+       </div>
+      </li>
+     </ul>
+    </div>
+    <div class="content-section">
+     <div class="content-section-title">Apps in your plan</div>
+     <div class="apps-card">
+      <div class="app-card">
+       <span>
+        <svg viewBox="0 0 512 512" style="border: 1px solid #a059a9">
+         <path xmlns="http://www.w3.org/2000/svg" d="M480 0H32C14.368 0 0 14.368 0 32v448c0 17.664 14.368 32 32 32h448c17.664 0 32-14.336 32-32V32c0-17.632-14.336-32-32-32z" fill="#210027" data-original="#7b1fa2" />
+         <g xmlns="http://www.w3.org/2000/svg">
+          <path d="M192 64h-80c-8.832 0-16 7.168-16 16v352c0 8.832 7.168 16 16 16s16-7.168 16-16V256h64c52.928 0 96-43.072 96-96s-43.072-96-96-96zm0 160h-64V96h64c35.296 0 64 28.704 64 64s-28.704 64-64 64zM400 256h-32c-18.08 0-34.592 6.24-48 16.384V272c0-8.864-7.168-16-16-16s-16 7.136-16 16v160c0 8.832 7.168 16 16 16s16-7.168 16-16v-96c0-26.464 21.536-48 48-48h32c8.832 0 16-7.168 16-16s-7.168-16-16-16z" fill="#f6e7fa" data-original="#e1bee7" />
+         </g>
+        </svg>
+        Premiere Pro
+       </span>
+       <div class="app-card__subtext">Edit, master and create fully proffesional videos</div>
+       <div class="app-card-buttons">
+        <button class="content-button status-button">Update</button>
+        <div class="menu"></div>
+       </div>
+      </div>
+      <div class="app-card">
+       <span>
+        <svg viewBox="0 0 52 52" style="border: 1px solid #c1316d">
+         <g xmlns="http://www.w3.org/2000/svg">
+          <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#2f0015" data-original="#6f2b41" />
+          <path d="M18.08 39H15.2V13.72l-2.64-.08V11h5.52v28zM27.68 19.4c1.173-.507 2.593-.761 4.26-.761s3.073.374 4.22 1.12V11h2.88v28c-2.293.32-4.414.48-6.36.48-1.947 0-3.707-.4-5.28-1.2-2.08-1.066-3.12-2.92-3.12-5.561v-7.56c0-2.799 1.133-4.719 3.4-5.759zm8.48 3.12c-1.387-.746-2.907-1.119-4.56-1.119-1.574 0-2.714.406-3.42 1.22-.707.813-1.06 1.847-1.06 3.1v7.12c0 1.227.44 2.188 1.32 2.88.96.719 2.146 1.079 3.56 1.079 1.413 0 2.8-.106 4.16-.319V22.52z" fill="#e1c1cf" data-original="#ff70bd" />
+         </g>
+        </svg>
+        InDesign
+       </span>
+       <div class="app-card__subtext">Design and publish great projects & mockups</div>
+       <div class="app-card-buttons">
+        <button class="content-button status-button">Update</button>
+        <div class="menu"></div>
+       </div>
+      </div>
+      <div class="app-card">
+       <span>
+        <svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
+         <g xmlns="http://www.w3.org/2000/svg">
+          <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375" />
+          <path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb" />
+         </g>
+        </svg>
+        After Effects
+       </span>
+       <div class="app-card__subtext">Industry Standart motion graphics & visual effects</div>
+       <div class="app-card-buttons">
+        <button class="content-button status-button">Update</button>
+        <div class="menu"></div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </div>
+ <div class="overlay-app"></div>
+</div>
\ No newline at end of file
diff --git a/glassmorphism-creative-cloud-app-redesign/src/script.js b/glassmorphism-creative-cloud-app-redesign/src/script.js
new file mode 100644
index 0000000..141a698
--- /dev/null
+++ b/glassmorphism-creative-cloud-app-redesign/src/script.js
@@ -0,0 +1,73 @@
+$(function () {
+ $(".menu-link").click(function () {
+  $(".menu-link").removeClass("is-active");
+  $(this).addClass("is-active");
+ });
+});
+
+$(function () {
+ $(".main-header-link").click(function () {
+  $(".main-header-link").removeClass("is-active");
+  $(this).addClass("is-active");
+ });
+});
+
+const dropdowns = document.querySelectorAll(".dropdown");
+dropdowns.forEach((dropdown) => {
+ dropdown.addEventListener("click", (e) => {
+  e.stopPropagation();
+  dropdowns.forEach((c) => c.classList.remove("is-active"));
+  dropdown.classList.add("is-active");
+ });
+});
+
+$(".search-bar input")
+ .focus(function () {
+  $(".header").addClass("wide");
+ })
+ .blur(function () {
+  $(".header").removeClass("wide");
+ });
+
+$(document).click(function (e) {
+ var container = $(".status-button");
+ var dd = $(".dropdown");
+ if (!container.is(e.target) && container.has(e.target).length === 0) {
+  dd.removeClass("is-active");
+ }
+});
+
+$(function () {
+ $(".dropdown").on("click", function (e) {
+  $(".content-wrapper").addClass("overlay");
+  e.stopPropagation();
+ });
+ $(document).on("click", function (e) {
+  if ($(e.target).is(".dropdown") === false) {
+   $(".content-wrapper").removeClass("overlay");
+  }
+ });
+});
+
+$(function () {
+ $(".status-button:not(.open)").on("click", function (e) {
+  $(".overlay-app").addClass("is-active");
+ });
+ $(".pop-up .close").click(function () {
+  $(".overlay-app").removeClass("is-active");
+ });
+});
+
+$(".status-button:not(.open)").click(function () {
+ $(".pop-up").addClass("visible");
+});
+
+$(".pop-up .close").click(function () {
+ $(".pop-up").removeClass("visible");
+});
+
+const toggleButton = document.querySelector('.dark-light');
+
+toggleButton.addEventListener('click', () => {
+  document.body.classList.toggle('light-mode');
+});
\ No newline at end of file
diff --git a/glassmorphism-creative-cloud-app-redesign/src/style.scss b/glassmorphism-creative-cloud-app-redesign/src/style.scss
new file mode 100644
index 0000000..859d489
--- /dev/null
+++ b/glassmorphism-creative-cloud-app-redesign/src/style.scss
@@ -0,0 +1,841 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
+
+* {
+ outline: none;
+ box-sizing: border-box;
+}
+
+:root {
+ --theme-bg-color: rgba(16 18 27 / 40%);
+ --border-color: rgba(113 119 144 / 25%);
+ --theme-color: #f9fafb;
+ --inactive-color: rgb(113 119 144 / 78%);
+ --body-font: "Poppins", sans-serif;
+ --hover-menu-bg: rgba(12 15 25 / 30%);
+ --content-title-color: #999ba5;
+ --content-bg: rgb(146 151 179 / 13%);
+ --button-inactive: rgb(249 250 251 / 55%);
+ --dropdown-bg: #21242d;
+ --dropdown-hover: rgb(42 46 60);
+ --popup-bg: rgb(22 25 37);
+ --search-bg:  #14162b;
+ --overlay-bg: rgba(36, 39, 59, 0.3);
+ --scrollbar-bg: rgb(1 2 3 / 40%);
+}
+
+.light-mode {
+  --theme-bg-color: rgb(255 255 255 / 31%);
+ --theme-color: #3c3a3a;
+ --inactive-color: #333333;
+  --button-inactive: #3c3a3a;
+ --search-bg: rgb(255 255 255 / 31%);
+ --dropdown-bg: #f7f7f7;
+ --overlay-bg: rgb(255 255 255 / 30%);
+ --dropdown-hover: rgb(236 236 236);
+ --border-color: rgb(255 255 255 / 35%);
+ --popup-bg: rgb(255 255 255);
+ --hover-menu-bg: rgba(255 255 255 / 35%);
+ --scrollbar-bg: rgb(255 253 253 / 57%);
+ --content-title-color: --theme-color;
+}
+
+html {
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+}
+
+body {
+ font-family: var(--body-font);
+ background-image: url(https://4kwallpapers.com/images/wallpapers/macos-big-sur-apple-layers-fluidic-colorful-dark-wwdc-2020-5120x2880-1432.jpg);
+ background-size: cover;
+ background-position: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ padding: 2em;
+ width: 100%;
+ height: 100vh;
+ @media screen and (max-width: 480px) {
+  padding: 0.8em;
+ }
+}
+
+img {
+ max-width: 100%;
+}
+
+.dark-light {
+ position: fixed;
+ bottom: 50px;
+ right: 30px;
+ background-color: var(--dropdown-bg);
+ box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.2);
+ padding: 8px;
+ border-radius: 50%;
+ z-index: 3;
+ cursor: pointer;
+ svg {
+  width: 24px;
+  flex-shrink: 0;
+  fill: #ffce45;
+  stroke: #ffce45;
+  transition: 0.5s;
+ }
+}
+
+.light-mode {
+.dark-light svg {
+ fill: transparent;
+ stroke: var(--theme-color);
+}
+ .profile-img {
+  border: 2px solid var(--theme-bg-color)
+ }
+ .content-section ul{
+  background-color: var(--theme-bg-color);
+ }
+ .pop-up__title {
+  bor-color: var(--theme-color);
+ }
+ .dropdown.is-active ul {
+  background-color:rgb(255 255 255 / 88%);
+ }
+}
+
+body.light-mode:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgb(255 255 255 / 45%) 100%);
+    backdrop-filter: saturate(3);
+}
+
+.app {
+ background-color: var(--theme-bg-color);
+ max-width: 1250px;
+ max-height: 860px;
+ height: 90vh;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ width: 100%;
+ border-radius: 14px;
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ font-size: 15px;
+ font-weight: 500;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ height: 58px;
+ width: 100%;
+ border-bottom: 1px solid var(--border-color);
+ padding: 0 30px;
+ white-space: nowrap;
+ @media screen and (max-width: 480px) {
+  padding: 0 16px;
+ }
+ &-menu {
+  display: flex;
+  align-items: center;
+  a {
+   padding: 20px 30px;
+   text-decoration: none;
+   color: var(--inactive-color);
+   border-bottom: 2px solid transparent;
+   transition: 0.3s;
+   @media screen and (max-width: 610px) {
+    &:not(.main-header-link) {
+     display: none;
+    }
+   }
+   &.is-active,
+   &:hover {
+    color: var(--theme-color);
+    border-bottom: 2px solid var(--theme-color);
+   }
+  }
+ }
+}
+
+.notify {
+ position: relative;
+ &:before {
+  content: "";
+  position: absolute;
+  background-color: #3a6df0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  right: 20px;
+  top: 16px;
+ }
+ @media screen and (max-width: 1055px) {
+  display: none;
+ }
+}
+
+.menu-circle {
+ width: 15px;
+ height: 15px;
+ background-color: #f96057;
+ border-radius: 50%;
+ box-shadow: 24px 0 0 0 #f8ce52, 48px 0 0 0 #5fcf65;
+ margin-right: 195px;
+ flex-shrink: 0;
+ @media screen and (max-width: 945px) {
+  display: none;
+ }
+}
+
+.search-bar {
+ height: 40px;
+ display: flex;
+ width: 100%;
+ max-width: 400px;
+ padding-left: 16px;
+ border-radius: 4px;
+ input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: var(--search-bg);
+  border-radius: 4px;
+  font-family: var(--body-font);
+  font-size: 15px;
+  font-weight: 500;
+  padding: 0 20px 0 40px;
+  box-shadow: 0 0 0 2px rgb(134 140 160 / 2%);
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: 16px 48%;
+  color: var(--theme-color);
+  &::placeholder {
+   font-family: var(--body-font);
+   color: var(--inactive-color);
+   font-size: 15px;
+   font-weight: 500;
+  }
+ }
+}
+
+
+
+.header-profile {
+ display: flex;
+ align-items: center;
+ padding: 0 16px 0 40px;
+ margin-left: auto;
+ flex-shrink: 0;
+ svg {
+  width: 22px;
+  color: #f9fafb;
+  flex-shrink: 0;
+ }
+}
+
+.notification {
+ position: relative;
+ &-number {
+  position: absolute;
+  background-color: #3a6df0;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  right: -6px;
+  top: -6px;
+ }
+ & + svg {
+  margin-left: 22px;
+  @media screen and (max-width: 945px) {
+   display: none;
+  }
+ }
+}
+
+.profile-img {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 2px solid var(--theme-color);
+ margin-left: 22px;
+}
+
+.wide {
+ .header-menu,
+ .header-profile {
+  display: none;
+ }
+ .search-bar {
+  max-width: 600px;
+  margin: auto;
+  transition: 0.4s;
+  box-shadow: 0 0 0 1px var(--border-color);
+  padding-left: 0;
+ }
+ .menu-circle {
+  margin-right: 0;
+ }
+}
+
+.wrapper {
+ display: flex;
+ flex-grow: 1;
+ overflow: hidden;
+}
+
+.left-side {
+ flex-basis: 240px;
+ border-right: 1px solid var(--border-color);
+ padding: 26px;
+ overflow: auto;
+ flex-shrink: 0;
+ @media screen and (max-width: 945px) {
+  display: none;
+ }
+}
+
+.side-wrapper + .side-wrapper {
+ margin-top: 20px;
+}
+
+.side-title {
+ color: var(--inactive-color);
+ margin-bottom: 14px;
+}
+
+.side-menu {
+ display: flex;
+ flex-direction: column;
+ white-space: nowrap;
+ a {
+  text-decoration: none;
+  color: var(--theme-color);
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  padding: 10px;
+  font-size: 14px;
+  border-radius: 6px;
+  transition: 0.3s;
+  &:hover {
+   background-color: var(--hover-menu-bg);
+  }
+ }
+ svg {
+  width: 16px;
+  margin-right: 8px;
+ }
+}
+
+.updates {
+ position: relative;
+ top: 0;
+ right: 0;
+ margin-left: auto;
+ width: 18px;
+ height: 18px;
+ font-size: 11px;
+}
+
+.main-header {
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid var(--border-color);
+ height: 58px;
+ flex-shrink: 0;
+ .header-menu {
+  margin-left: 150px;
+  @media screen and (max-width: 1055px) {
+   margin: auto;
+  }
+  a {
+   padding: 20px 24px;
+  }
+ }
+}
+
+.main-container {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+}
+
+.menu-link-main {
+ text-decoration: none;
+ color: var(--theme-color);
+ padding: 0 30px;
+ @media screen and (max-width: 1055px) {
+  display: none;
+ }
+}
+
+.content-wrapper {
+ display: flex;
+ flex-direction: column;
+ color: var(--theme-color);
+ padding: 20px 40px;
+ height: 100%;
+ overflow: auto;
+ background-color: var(--theme-bg-color);
+ @media screen and (max-width: 510px) {
+  padding: 20px;
+ }
+ &-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  background-image: url("https://www.transparenttextures.com/patterns/cubes.png"),
+   linear-gradient(
+    to right top,
+    #cf4af3,
+    #e73bd7,
+    #f631bc,
+    #fd31a2,
+    #ff3a8b,
+    #ff4b78,
+    #ff5e68,
+    #ff705c,
+    #ff8c51,
+    #ffaa49,
+    #ffc848,
+    #ffe652
+   );
+  border-radius: 14px;
+  padding: 20px 40px;
+  @media screen and (max-width: 415px) {
+   padding: 20px;
+  }
+ }
+ &.overlay {
+  pointer-events: none;
+  transition: 0.3s;
+  background-color: var(--overlay-bg);
+ }
+}
+
+.overlay-app {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ left: 0;
+ top: 0;
+ pointer-events: all;
+ background-color: rgba(36, 39, 59, 0.8);
+ opacity: 0;
+ visibility: hidden;
+ transition: 0.3s;
+ &.is-active {
+  visibility: visible;
+  opacity: 1;
+ }
+}
+
+.img-content {
+ font-weight: 500;
+ font-size: 17px;
+ display: flex;
+ align-items: center;
+ margin: 0;
+ svg {
+  width: 28px;
+  margin-right: 14px;
+ }
+}
+
+.content-text {
+ font-weight: 400;
+ font-size: 14px;
+ margin-top: 16px;
+ line-height: 1.7em;
+ color: #ebecec;
+ display: -webkit-box;
+ -webkit-line-clamp: 4;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.content-wrapper-context {
+ max-width: 350px;
+}
+
+.content-button {
+ background-color: #3a6df0;
+ border: none;
+ padding: 8px 26px;
+ color: #fff;
+ border-radius: 20px;
+ margin-top: 16px;
+ cursor: pointer;
+ transition: 0.3s;
+ white-space: nowrap;
+}
+
+.content-wrapper-img {
+ width: 186px;
+ object-fit: cover;
+ margin-top: -25px;
+ object-position: center;
+ @media screen and (max-width: 570px) {
+  width: 110px;
+ }
+}
+
+.content-section {
+ margin-top: 30px;
+ display: flex;
+ flex-direction: column;
+ &-title {
+  color: var(--content-title-color);
+  margin-bottom: 14px;
+ }
+ ul {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: space-around;
+  background-color: var(--content-bg);
+  padding-left: 0;
+  margin: 0;
+  border-radius: 14px;
+  border: 1px solid var(--theme-bg-color);
+  cursor: pointer;
+  li {
+   list-style: none;
+   padding: 10px 18px;
+   display: flex;
+   align-items: center;
+   font-size: 16px;
+   width: 100%;
+   height: 100%;
+   white-space: nowrap;
+   transition: 0.3s;
+   &:hover {
+    background-color: var(--theme-bg-color);
+    &:first-child {
+     border-radius: 13px 13px 0 0;
+    }
+    &:last-child {
+     border-radius: 0 0 13px 13px;
+    }
+   }
+   & + li {
+    border-top: 1px solid var(--border-color);
+   }
+  }
+  svg {
+   width: 28px;
+   border-radius: 6px;
+   margin-right: 16px;
+   flex-shrink: 0;
+  }
+ }
+}
+
+.products {
+ display: flex;
+ align-items: center;
+ width: 150px;
+ @media screen and (max-width: 480px) {
+  width: 120px;
+ }
+}
+.status {
+ margin-left: auto;
+ width: 140px;
+ font-size: 15px;
+ position: relative;
+ @media screen and (max-width: 700px) {
+  display: none;
+ }
+ &-circle {
+  width: 6px;
+  height: 6px;
+  background-color: #396df0;
+  position: absolute;
+  border-radius: 50%;
+  top: 4px;
+  left: -20px;
+  &.green {
+   background-color: #3bf083;
+  }
+ }
+ &-button {
+  font-size: 15px;
+  margin-top: 0;
+  padding: 6px 24px;
+  @media screen and (max-width: 390px) {
+   padding: 6px 14px;
+  }
+  &.open {
+   background: none;
+   color: var(--button-inactive);
+   border: 1px solid var(--button-inactive);
+  }
+  &:not(.open):hover {
+   color: #fff;
+   border-color: #fff;
+  }
+ }
+}
+
+.content-button:not(.open):hover {
+ background: #1e59f1;
+}
+
+.menu {
+ width: 5px;
+ height: 5px;
+ background-color: var(--button-inactive);
+ border-radius: 50%;
+ box-shadow: 7px 0 0 0 var(--button-inactive), 14px 0 0 0 var(--button-inactive);
+ margin: 0 12px;
+}
+
+@media screen and (max-width: 415px) {
+ .adobe-product .menu {
+  display: none;
+ }
+}
+
+.dropdown {
+ position: relative;
+ height: 53px;
+ width: 40px;
+ top: -24px;
+ display: flex;
+ left: -5px;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ ul {
+  position: absolute;
+  background: var(--dropdown-bg);
+  height: 110px;
+  width: 120px;
+  right: 0;
+  top: 20px;
+  pointer-events: none;
+  opacity: 0;
+  transform: translatey(10px);
+  transition: all 0.4s ease;
+  li a {
+   text-decoration: none;
+   color: var(--theme-color);
+   font-size: 12px;
+  }
+ }
+}
+
+.dropdown.is-active {
+ ul {
+  opacity: 1;
+  pointer-events: all;
+  transform: translatey(25px);
+  li:hover {
+   background-color: var(--dropdown-hover);
+  }
+ }
+}
+
+.button-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ width: 187px;
+ margin-left: auto;
+ @media screen and (max-width: 480px) {
+  width: auto;
+ }
+}
+
+.pop-up {
+ position: absolute;
+ padding: 30px 40px;
+ top: 50%;
+ left: 50%;
+ transform: (translate(-50%, -50%));
+ overflow-y: auto;
+ box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.4);
+ transition: all 0.3s;
+ z-index: 10;
+ background-color: var(--popup-bg);
+ width: 500px;
+ visibility: hidden;
+ opacity: 0;
+ border-radius: 6px;
+ display: flex;
+ flex-direction: column;
+ white-space: normal;
+ @media screen and (max-width: 570px) {
+  width: 100%;
+ }
+ &.visible {
+  visibility: visible;
+  opacity: 1;
+ }
+ &__title {
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+ }
+ &__subtitle {
+  white-space: normal;
+  margin: 20px 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.8em;
+  a {
+   color: var(--theme-color);
+  }
+ }
+}
+
+.content-button-wrapper .content-button.status-button.open.close {
+ width: auto;
+}
+
+.content-section .close {
+ margin-right: 0;
+ width: 24px;
+}
+
+.checkbox-wrapper {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ font-weight: 400;
+ & + .checkbox-wrapper {
+  margin: 20px 0 40px;
+ }
+}
+
+.checkbox {
+ display: none;
+}
+
+.checkbox + label {
+ display: flex;
+ align-items: center;
+ &:before {
+  content: "";
+  margin-right: 10px;
+  width: 15px;
+  height: 15px;
+  border: 1px solid var(--theme-color);
+  border-radius: 4px;
+  cursor: pointer;
+  flex-shrink: 0;
+ }
+}
+
+.checkbox:checked + label:before {
+ background-color: #3a6df0;
+ border-color: #3a6df0;
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e");
+ background-position: 50%;
+ background-size: 12px;
+ background-repeat: no-repeat;
+}
+
+.content-button-wrapper {
+ margin-top: auto;
+ margin-left: auto;
+ .open {
+  margin-right: 8px;
+ }
+}
+
+.apps-card {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ width: calc(100% + 20px);
+}
+
+.app-card {
+ display: flex;
+ flex-direction: column;
+ width: calc(33.3% - 20px);
+ font-size: 16px;
+ background-color: var(--content-bg);
+ border-radius: 14px;
+ border: 1px solid var(--theme-bg-color);
+ padding: 20px;
+ cursor: pointer;
+ transition: 0.3s ease;
+ &:hover {
+  transform: scale(1.02);
+  background-color: var(--theme-bg-color);
+ }
+ svg {
+  width: 28px;
+  border-radius: 6px;
+  margin-right: 12px;
+  flex-shrink: 0;
+ }
+ & + .app-card {
+  margin-left: 20px;
+ }
+ span {
+  display: flex;
+  align-items: center;
+ }
+ &__subtext {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.6em;
+  margin-top: 20px;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 20px;
+ }
+ &-buttons {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  margin-top: 16px;
+ }
+ @media screen and (max-width: 1110px) {
+  width: calc(50% - 20px);
+  &:last-child {
+   margin-top: 20px;
+   margin-left: 0px;
+  }
+ }
+ @media screen and (max-width: 565px) {
+  width: calc(100% - 20px);
+  margin-top: 20px;
+  & + .app-card {
+   margin-left: 0;
+  }
+ }
+}
+
+::-webkit-scrollbar {
+ width: 6px;
+ border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-bg);
+ border-radius: 10px;
+}
diff --git a/glassmorphism/README.markdown b/glassmorphism/README.markdown
new file mode 100644
index 0000000..8f9326a
--- /dev/null
+++ b/glassmorphism/README.markdown
@@ -0,0 +1,5 @@
+# Glassmorphism
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/walickialbert/pen/xxOvPmb](https://codepen.io/walickialbert/pen/xxOvPmb).
+
+A simple example of glassmorphism design trend in pure CSS
diff --git a/glassmorphism/dist/index.html b/glassmorphism/dist/index.html
new file mode 100644
index 0000000..bce9f35
--- /dev/null
+++ b/glassmorphism/dist/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Glassmorphism</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="wrap">
+   <h1>Glassmorphism</h1>
+   <div class="drop drop1">
+      <div class="drop drop2"></div>
+      <div class="drop drop3"></div>
+      <div class="drop drop4"></div>
+   </div>
+</div>
+
+
+<!-- Mine article about Glassmorphism -->
+<!-- https://www.albertwalicki.com/glassmorphism-how-to-create -->
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/glassmorphism/dist/style.css b/glassmorphism/dist/style.css
new file mode 100644
index 0000000..8925927
--- /dev/null
+++ b/glassmorphism/dist/style.css
@@ -0,0 +1,91 @@
+html,body {
+  width: 100%;
+  min-height: 100%;
+  overflow:hidden;
+  min-height: 99vh;
+}
+
+body {
+     background: linear-gradient(90deg,#FFFF00 6%,#FFA500 25%,#F14444 45%,#D53567 55%,#9A109A 94%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.wrap {
+  position: relative;
+}
+
+h1 {
+    font-family: Arial;
+    color:  #FFF;
+    font-size: 90px;
+    padding: 20px 30px;
+    text-shadow: 2px 2px rgba(0,0,0,0.3);
+    text-transform: uppercase;
+}
+
+.main {
+    background: rgba(255,255,255,0.4);
+    border-radius: 10px;
+    border: 1px solid rgba(255,255,255,0.2);
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    border-radius: 50%;
+    top: 11px;
+    left: 280px;
+    right: 0;
+    display: block;
+    margin: 0 auto;
+    z-index: 4;
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+}
+
+.drop {
+   background: rgba(255,255,255,0.4);
+   border-radius: 10px;
+   border: 1px solid rgba(255,255,255,0.2);
+   position: absolute;
+   backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+   display: block;
+   margin: 0 auto;
+}
+
+.drop1 {
+   width: 47%;
+   height: 150px;
+   top: 56px;
+   left: 0;
+   right: 0;
+   z-index: 2;
+   backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
+
+.drop2 {
+    width: 40px;
+    height: 40px;
+    top: -30px;
+    left: -80%;
+    right: 0;
+    z-index: 4;
+}
+
+.drop3 {
+    width: 60px;
+    height: 60px;
+    top: 120px;
+    right: 30px;
+    z-index: 3;
+}
+
+.drop4 {
+   width: 40px;
+   height: 40px;
+   border-radius: 50%;
+   top: -55px;
+   right: 20px;
+}
\ No newline at end of file
diff --git a/glassmorphism/license.txt b/glassmorphism/license.txt
new file mode 100644
index 0000000..a754518
--- /dev/null
+++ b/glassmorphism/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Albert (https://codepen.io/walickialbert/pen/xxOvPmb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/glassmorphism/src/index.html b/glassmorphism/src/index.html
new file mode 100644
index 0000000..7cc5ee8
--- /dev/null
+++ b/glassmorphism/src/index.html
@@ -0,0 +1,12 @@
+<div class="wrap">
+   <h1>Glassmorphism</h1>
+   <div class="drop drop1">
+      <div class="drop drop2"></div>
+      <div class="drop drop3"></div>
+      <div class="drop drop4"></div>
+   </div>
+</div>
+
+
+<!-- Mine article about Glassmorphism -->
+<!-- https://www.albertwalicki.com/glassmorphism-how-to-create -->
diff --git a/glassmorphism/src/style.css b/glassmorphism/src/style.css
new file mode 100644
index 0000000..8925927
--- /dev/null
+++ b/glassmorphism/src/style.css
@@ -0,0 +1,91 @@
+html,body {
+  width: 100%;
+  min-height: 100%;
+  overflow:hidden;
+  min-height: 99vh;
+}
+
+body {
+     background: linear-gradient(90deg,#FFFF00 6%,#FFA500 25%,#F14444 45%,#D53567 55%,#9A109A 94%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.wrap {
+  position: relative;
+}
+
+h1 {
+    font-family: Arial;
+    color:  #FFF;
+    font-size: 90px;
+    padding: 20px 30px;
+    text-shadow: 2px 2px rgba(0,0,0,0.3);
+    text-transform: uppercase;
+}
+
+.main {
+    background: rgba(255,255,255,0.4);
+    border-radius: 10px;
+    border: 1px solid rgba(255,255,255,0.2);
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    border-radius: 50%;
+    top: 11px;
+    left: 280px;
+    right: 0;
+    display: block;
+    margin: 0 auto;
+    z-index: 4;
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+}
+
+.drop {
+   background: rgba(255,255,255,0.4);
+   border-radius: 10px;
+   border: 1px solid rgba(255,255,255,0.2);
+   position: absolute;
+   backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+   display: block;
+   margin: 0 auto;
+}
+
+.drop1 {
+   width: 47%;
+   height: 150px;
+   top: 56px;
+   left: 0;
+   right: 0;
+   z-index: 2;
+   backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
+
+.drop2 {
+    width: 40px;
+    height: 40px;
+    top: -30px;
+    left: -80%;
+    right: 0;
+    z-index: 4;
+}
+
+.drop3 {
+    width: 60px;
+    height: 60px;
+    top: 120px;
+    right: 30px;
+    z-index: 3;
+}
+
+.drop4 {
+   width: 40px;
+   height: 40px;
+   border-radius: 50%;
+   top: -55px;
+   right: 20px;
+}
\ No newline at end of file
diff --git a/glsl-gpgpu-particles/README.markdown b/glsl-gpgpu-particles/README.markdown
new file mode 100644
index 0000000..f3bc8ba
--- /dev/null
+++ b/glsl-gpgpu-particles/README.markdown
@@ -0,0 +1,4 @@
+# GLSL: GPGPU particles
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/shubniggurath/pen/RQKgWg](https://codepen.io/shubniggurath/pen/RQKgWg).
+
+ 150k particles in motion
\ No newline at end of file
diff --git a/glsl-gpgpu-particles/dist/index.html b/glsl-gpgpu-particles/dist/index.html
new file mode 100644
index 0000000..7a725f8
--- /dev/null
+++ b/glsl-gpgpu-particles/dist/index.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>GLSL: GPGPU particles</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
+<script id="vertexShader" type="x-shader/x-vertex">
+    uniform float u_time;
+  
+    const float spawnrate = .01;
+    const float life = 200.;
+    const float fadetime = 20.;
+    const int octaves = 5;
+    const float seed = 43758.5453123;
+    const float seed2 = 73156.8473192;
+  
+    float random(float val) {
+      return fract(sin(val) * seed);
+    }
+  
+    vec2 random2(vec2 st, float seed){
+        st = vec2( dot(st,vec2(127.1,311.7)),
+                  dot(st,vec2(269.5,183.3)) );
+        return -1.0 + 2.0*fract(sin(st)*seed);
+    }
+  
+    float random2d(vec2 uv) {
+      return fract(
+                sin(
+                  dot( uv.xy, vec2(12.9898, 78.233) )
+                ) * seed);
+    }
+  
+  varying float v_z;
+  
+  float easeLinear(float time, float begin, float change, float duration)
+  {
+    return change * time / duration + begin;
+  }
+  vec2 easeLinear(float time, vec2 begin, vec2 change, float duration)
+  {
+    return change * time / duration + begin;
+  }
+      
+  void main() {
+    vec4 pos = vec4(position,1.0);
+    float id = position.z;
+    bool emitter = mod(id, 2.) == 0.;
+    float rand = random(id);
+    float rand1 = random(id + 1.);
+    float pointsize = 100. * rand * rand1;
+    
+    // float spawnrate = spawnrate + (sin(u_time / 10.) + 1.) * .01;
+    float time = mod(u_time - id * spawnrate, life);
+    float step = time / life;
+    bool alive = time >= 0.;
+    
+    vec2 polar = vec2(0., 0.);
+    
+    if(alive) {
+      if(emitter) {
+        // pos.xy = vec2(10. * rand);
+        vec2 outerPolar = vec2(30. + sin(u_time / 50.) * 10., 200.);
+        polar = easeLinear(time, vec2(sin(u_time / 50.), 100. + sin(u_time / 10.) * 50.), outerPolar, life);
+        // polar.x += sin(u_time / 10. * rand) + 1.;
+        polar.y += (sin((u_time + 100.) / 10. * rand) + 1.) * (polar.x * 2. + 10.);
+
+        if(time < fadetime) {
+          pointsize = easeLinear(time, 0., pointsize, fadetime);
+        } else if(time > life - fadetime) {
+          pointsize = easeLinear(time - life + fadetime, pointsize, -pointsize, fadetime);
+        }
+        pointsize *= (sin((u_time + 100.) / 10. * rand1) + 1.);
+        pointsize *= cos(polar.x * 1.5 + u_time * .1) * .5 + 1.;
+        pos.z = 100.;
+      } else {
+        // pos.xy = vec2(10. * rand);
+        vec2 outerPolar = vec2(30. + sin(u_time / 50.) * 10. + 3.14, 200.);
+        polar = easeLinear(time, vec2(sin(u_time / 50.) + 3.14, 100. + cos(u_time / 10.) * 50.), outerPolar, life);
+        // polar.x += sin(u_time / 10. * rand) + 1.;
+        polar.y += (sin((u_time + 100.) / 10. * rand) + 1.) * (polar.x * 2. + 10.);
+
+        if(time < fadetime) {
+          pointsize = easeLinear(time, 0., pointsize, fadetime);
+        } else if(time > life - fadetime) {
+          pointsize = easeLinear(time - life + fadetime, pointsize, -pointsize, fadetime);
+        }
+        pointsize *= 1. - (sin((u_time + 100.) / 10. * rand1) + 1.);
+        // pointsize *= cos(polar.x * 1.5 + u_time * .1) * .5 + 1.;
+        pos.z = 90.;
+      }
+    }
+    
+    pos.x += cos(polar.x) * polar.y;
+    pos.y += sin(polar.x) * polar.y;
+    
+    v_z = pos.z / 100. + polar.x / 100.;
+    gl_PointSize = pointsize;
+
+    gl_Position = projectionMatrix *
+                  modelViewMatrix *
+                  pos;
+  }
+</script>
+<script id="fragmentShader" type="x-shader/x-fragment">
+    uniform vec2 u_resolution;
+    uniform float u_time;
+    uniform sampler2D tSprite;
+  
+    varying float v_z;
+
+    vec3 hsb2rgb( in vec3 c ){
+      vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
+                               6.0)-3.0)-1.0,
+                       0.0,
+                       1.0 );
+      rgb = rgb*rgb*(3.0-2.0*rgb);
+      return c.z * mix( vec3(1.0), rgb, c.y);
+    }
+  
+    #define TAU 6.28318531
+    float starSDF(vec2 st, int V, float s) {
+      // st = st*4.-2.;
+      float a = atan(st.y, st.x)/TAU;
+      float seg = a * float(V);
+      a = ((floor(seg) + 0.5)/float(V) + 
+          mix(s,-s,step(.5,fract(seg)))) 
+          * TAU;
+      return abs(dot(vec2(cos(a),sin(a)),
+                     st));
+    }
+  
+    void main() {
+      vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;
+      
+      float dist;
+      
+      vec2 pointUV = gl_PointCoord.xy - .5 * v_z / v_z;
+      dist = 1. - length(pointUV) * 3.;
+      
+      vec2 polar = vec2(atan(uv.y, uv.x), length(uv.xy));
+      int points = int(dist * 5.);
+      
+      // gl_FragColor = vec4(hsb2rgb(vec3(polar.y / 3., 1. - v_z * sin(polar.y * u_time / 100.), polar.y * v_z / 10.)), dist);
+      gl_FragColor = vec4(
+        mix(
+          vec3(5.0, 0., 0.), 
+          vec3(.8, 1.5, .5), 
+          clamp(dist * v_z, 0., 1.)
+        ) * 
+        dist, 
+        smoothstep(0.6, .61 + v_z / 1.5, dist)
+      );
+      // gl_FragColor *= v_z / 2.;
+      // gl_FragColor = vec4(vec3(.8, .8, .5), smoothstep(0.8, .81, dist));
+      // gl_FragColor = vec4(v_z / 2.);
+      // gl_FragColor = vec4(vec3(dist), dist);
+    }
+</script>
+
+
+<div id="container"></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/glsl-gpgpu-particles/dist/script.js b/glsl-gpgpu-particles/dist/script.js
new file mode 100644
index 0000000..beec03f
--- /dev/null
+++ b/glsl-gpgpu-particles/dist/script.js
@@ -0,0 +1,99 @@
+/*
+Most of the stuff in here is just bootstrapping. Essentially it's just
+setting ThreeJS up so that it renders a flat surface upon which to draw 
+the shader. The only thing to see here really is the uniforms sent to 
+the shader. Apart from that all of the magic happens in the HTML view
+under the fragment shader.
+*/
+
+let container;
+let camera, scene, renderer;
+let uniforms;
+
+function init() {
+  container = document.getElementById('container');
+
+  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);
+  camera.position.z = 600;
+  // camera.position.x = -300;
+  console.log(camera.lookAt(0, 0, 0));
+
+  scene = new THREE.Scene();
+
+  var geometry = new THREE.Geometry();
+
+  var particleCount = 150000;
+  // particleCount = 100;
+
+  for (i = 0; i < particleCount; i++) {
+
+    var vertex = new THREE.Vector3();
+
+    vertex.x = 0;
+    vertex.y = 0;
+    vertex.z = i;
+
+    geometry.vertices.push(vertex);
+  }
+
+  uniforms = {
+    u_time: { type: "f", value: -10000.0 },
+    u_resolution: { type: "v2", value: new THREE.Vector2() },
+    u_mouse: { type: "v2", value: new THREE.Vector2() } };
+
+
+  var material = new THREE.ShaderMaterial({
+    uniforms: uniforms,
+    vertexShader: document.getElementById('vertexShader').textContent,
+    fragmentShader: document.getElementById('fragmentShader').textContent });
+
+  material.transparent = true;
+  material.blending = THREE.AdditiveBlending;
+  material.depthTest = false;
+
+  var mesh = new THREE.Points(geometry, material);
+  // var mesh = new THREE.Mesh( geometry, starsMaterial );
+  scene.add(mesh);
+
+  renderer = new THREE.WebGLRenderer();
+  // renderer.setPixelRatio( window.devicePixelRatio );
+  renderer.setPixelRatio(1);
+
+  container.appendChild(renderer.domElement);
+
+  onWindowResize();
+  window.addEventListener('resize', onWindowResize, false);
+
+  document.onmousemove = function (e) {
+
+    // camera.position.x = -300 + e.pageX / window.innerWidth * 600;
+    // camera.position.y = 300 + e.pageY / window.innerHeight * -600;
+    // console.log(camera.lookAt(0,0,0));
+
+    uniforms.u_mouse.value.x = e.pageX;
+    uniforms.u_mouse.value.y = e.pageY;
+  };
+}
+
+function onWindowResize(event) {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  uniforms.u_resolution.value.x = renderer.domElement.width;
+  uniforms.u_resolution.value.y = renderer.domElement.height;
+}
+
+function animate() {
+  requestAnimationFrame(animate);
+  render();
+}
+
+function render() {
+  uniforms.u_time.value += 0.02;
+  renderer.render(scene, camera);
+}
+
+
+
+init();
+animate();
\ No newline at end of file
diff --git a/glsl-gpgpu-particles/dist/style.css b/glsl-gpgpu-particles/dist/style.css
new file mode 100644
index 0000000..cf8832e
--- /dev/null
+++ b/glsl-gpgpu-particles/dist/style.css
@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#container {
+  position: fixed;
+}
diff --git a/glsl-gpgpu-particles/license.txt b/glsl-gpgpu-particles/license.txt
new file mode 100644
index 0000000..7e3c003
--- /dev/null
+++ b/glsl-gpgpu-particles/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Liam Egan (https://codepen.io/shubniggurath/pen/RQKgWg)
+
+
+Fork of an original work by Liam Egan (https://codepen.io/shubniggurath/pen/GQqyZp)
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/glsl-gpgpu-particles/src/index.html b/glsl-gpgpu-particles/src/index.html
new file mode 100644
index 0000000..0261fd7
--- /dev/null
+++ b/glsl-gpgpu-particles/src/index.html
@@ -0,0 +1,157 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
+<script id="vertexShader" type="x-shader/x-vertex">
+    uniform float u_time;
+  
+    const float spawnrate = .01;
+    const float life = 200.;
+    const float fadetime = 20.;
+    const int octaves = 5;
+    const float seed = 43758.5453123;
+    const float seed2 = 73156.8473192;
+  
+    float random(float val) {
+      return fract(sin(val) * seed);
+    }
+  
+    vec2 random2(vec2 st, float seed){
+        st = vec2( dot(st,vec2(127.1,311.7)),
+                  dot(st,vec2(269.5,183.3)) );
+        return -1.0 + 2.0*fract(sin(st)*seed);
+    }
+  
+    float random2d(vec2 uv) {
+      return fract(
+                sin(
+                  dot( uv.xy, vec2(12.9898, 78.233) )
+                ) * seed);
+    }
+  
+  varying float v_z;
+  
+  float easeLinear(float time, float begin, float change, float duration)
+  {
+    return change * time / duration + begin;
+  }
+  vec2 easeLinear(float time, vec2 begin, vec2 change, float duration)
+  {
+    return change * time / duration + begin;
+  }
+      
+  void main() {
+    vec4 pos = vec4(position,1.0);
+    float id = position.z;
+    bool emitter = mod(id, 2.) == 0.;
+    float rand = random(id);
+    float rand1 = random(id + 1.);
+    float pointsize = 100. * rand * rand1;
+    
+    // float spawnrate = spawnrate + (sin(u_time / 10.) + 1.) * .01;
+    float time = mod(u_time - id * spawnrate, life);
+    float step = time / life;
+    bool alive = time >= 0.;
+    
+    vec2 polar = vec2(0., 0.);
+    
+    if(alive) {
+      if(emitter) {
+        // pos.xy = vec2(10. * rand);
+        vec2 outerPolar = vec2(30. + sin(u_time / 50.) * 10., 200.);
+        polar = easeLinear(time, vec2(sin(u_time / 50.), 100. + sin(u_time / 10.) * 50.), outerPolar, life);
+        // polar.x += sin(u_time / 10. * rand) + 1.;
+        polar.y += (sin((u_time + 100.) / 10. * rand) + 1.) * (polar.x * 2. + 10.);
+
+        if(time < fadetime) {
+          pointsize = easeLinear(time, 0., pointsize, fadetime);
+        } else if(time > life - fadetime) {
+          pointsize = easeLinear(time - life + fadetime, pointsize, -pointsize, fadetime);
+        }
+        pointsize *= (sin((u_time + 100.) / 10. * rand1) + 1.);
+        pointsize *= cos(polar.x * 1.5 + u_time * .1) * .5 + 1.;
+        pos.z = 100.;
+      } else {
+        // pos.xy = vec2(10. * rand);
+        vec2 outerPolar = vec2(30. + sin(u_time / 50.) * 10. + 3.14, 200.);
+        polar = easeLinear(time, vec2(sin(u_time / 50.) + 3.14, 100. + cos(u_time / 10.) * 50.), outerPolar, life);
+        // polar.x += sin(u_time / 10. * rand) + 1.;
+        polar.y += (sin((u_time + 100.) / 10. * rand) + 1.) * (polar.x * 2. + 10.);
+
+        if(time < fadetime) {
+          pointsize = easeLinear(time, 0., pointsize, fadetime);
+        } else if(time > life - fadetime) {
+          pointsize = easeLinear(time - life + fadetime, pointsize, -pointsize, fadetime);
+        }
+        pointsize *= 1. - (sin((u_time + 100.) / 10. * rand1) + 1.);
+        // pointsize *= cos(polar.x * 1.5 + u_time * .1) * .5 + 1.;
+        pos.z = 90.;
+      }
+    }
+    
+    pos.x += cos(polar.x) * polar.y;
+    pos.y += sin(polar.x) * polar.y;
+    
+    v_z = pos.z / 100. + polar.x / 100.;
+    gl_PointSize = pointsize;
+
+    gl_Position = projectionMatrix *
+                  modelViewMatrix *
+                  pos;
+  }
+</script>
+<script id="fragmentShader" type="x-shader/x-fragment">
+    uniform vec2 u_resolution;
+    uniform float u_time;
+    uniform sampler2D tSprite;
+  
+    varying float v_z;
+
+    vec3 hsb2rgb( in vec3 c ){
+      vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
+                               6.0)-3.0)-1.0,
+                       0.0,
+                       1.0 );
+      rgb = rgb*rgb*(3.0-2.0*rgb);
+      return c.z * mix( vec3(1.0), rgb, c.y);
+    }
+  
+    #define TAU 6.28318531
+    float starSDF(vec2 st, int V, float s) {
+      // st = st*4.-2.;
+      float a = atan(st.y, st.x)/TAU;
+      float seg = a * float(V);
+      a = ((floor(seg) + 0.5)/float(V) + 
+          mix(s,-s,step(.5,fract(seg)))) 
+          * TAU;
+      return abs(dot(vec2(cos(a),sin(a)),
+                     st));
+    }
+  
+    void main() {
+      vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;
+      
+      float dist;
+      
+      vec2 pointUV = gl_PointCoord.xy - .5 * v_z / v_z;
+      dist = 1. - length(pointUV) * 3.;
+      
+      vec2 polar = vec2(atan(uv.y, uv.x), length(uv.xy));
+      int points = int(dist * 5.);
+      
+      // gl_FragColor = vec4(hsb2rgb(vec3(polar.y / 3., 1. - v_z * sin(polar.y * u_time / 100.), polar.y * v_z / 10.)), dist);
+      gl_FragColor = vec4(
+        mix(
+          vec3(5.0, 0., 0.), 
+          vec3(.8, 1.5, .5), 
+          clamp(dist * v_z, 0., 1.)
+        ) * 
+        dist, 
+        smoothstep(0.6, .61 + v_z / 1.5, dist)
+      );
+      // gl_FragColor *= v_z / 2.;
+      // gl_FragColor = vec4(vec3(.8, .8, .5), smoothstep(0.8, .81, dist));
+      // gl_FragColor = vec4(v_z / 2.);
+      // gl_FragColor = vec4(vec3(dist), dist);
+    }
+</script>
+
+
+<div id="container"></div>
\ No newline at end of file
diff --git a/glsl-gpgpu-particles/src/script.babel b/glsl-gpgpu-particles/src/script.babel
new file mode 100644
index 0000000..d33c252
--- /dev/null
+++ b/glsl-gpgpu-particles/src/script.babel
@@ -0,0 +1,99 @@
+/*
+Most of the stuff in here is just bootstrapping. Essentially it's just
+setting ThreeJS up so that it renders a flat surface upon which to draw 
+the shader. The only thing to see here really is the uniforms sent to 
+the shader. Apart from that all of the magic happens in the HTML view
+under the fragment shader.
+*/
+
+let container;
+let camera, scene, renderer;
+let uniforms;
+
+function init() {
+  container = document.getElementById( 'container' );
+
+  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
+  camera.position.z = 600;
+  // camera.position.x = -300;
+  console.log(camera.lookAt(0,0,0));
+
+  scene = new THREE.Scene();
+  
+  var geometry = new THREE.Geometry();
+
+  var particleCount = 150000;
+  // particleCount = 100;
+
+  for (i = 0; i < particleCount; i++) {
+
+      var vertex = new THREE.Vector3();
+    
+      vertex.x = 0;
+      vertex.y = 0;
+      vertex.z = i;
+
+      geometry.vertices.push(vertex);
+  }
+
+  uniforms = {
+    u_time: { type: "f", value: -10000.0 },
+    u_resolution: { type: "v2", value: new THREE.Vector2() },
+    u_mouse: { type: "v2", value: new THREE.Vector2() }
+  };
+
+  var material = new THREE.ShaderMaterial( {
+    uniforms: uniforms,
+    vertexShader: document.getElementById( 'vertexShader' ).textContent,
+    fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+  } );
+  material.transparent = true;
+  material.blending = THREE.AdditiveBlending;
+  material.depthTest = false;
+
+  var mesh = new THREE.Points( geometry, material );
+  // var mesh = new THREE.Mesh( geometry, starsMaterial );
+  scene.add( mesh );
+
+  renderer = new THREE.WebGLRenderer();
+  // renderer.setPixelRatio( window.devicePixelRatio );
+  renderer.setPixelRatio( 1 );
+
+  container.appendChild( renderer.domElement );
+
+  onWindowResize();
+  window.addEventListener( 'resize', onWindowResize, false );
+
+  document.onmousemove = function(e){
+    
+    // camera.position.x = -300 + e.pageX / window.innerWidth * 600;
+    // camera.position.y = 300 + e.pageY / window.innerHeight * -600;
+    // console.log(camera.lookAt(0,0,0));
+    
+    uniforms.u_mouse.value.x = e.pageX
+    uniforms.u_mouse.value.y = e.pageY
+  }
+}
+
+function onWindowResize( event ) {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize( window.innerWidth, window.innerHeight );
+  uniforms.u_resolution.value.x = renderer.domElement.width;
+  uniforms.u_resolution.value.y = renderer.domElement.height;
+}
+
+function animate() {
+  requestAnimationFrame( animate );
+  render();
+}
+
+function render() {
+  uniforms.u_time.value += 0.02;
+  renderer.render( scene, camera );
+}
+
+
+
+init();
+animate();
\ No newline at end of file
diff --git a/glsl-gpgpu-particles/src/style.scss b/glsl-gpgpu-particles/src/style.scss
new file mode 100644
index 0000000..f914b63
--- /dev/null
+++ b/glsl-gpgpu-particles/src/style.scss
@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#container {
+  position: fixed;
+}
\ No newline at end of file
diff --git a/glsl-in-which-alice-feels-sick/README.markdown b/glsl-in-which-alice-feels-sick/README.markdown
new file mode 100644
index 0000000..a387470
--- /dev/null
+++ b/glsl-in-which-alice-feels-sick/README.markdown
@@ -0,0 +1,7 @@
+# GLSL: In Which Alice Feels Sick
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/shubniggurath/pen/vdQGjR](https://codepen.io/shubniggurath/pen/vdQGjR).
+
+ Alice in Wonderland meets Droste Transformations
+
+Huge thanks to Roy Wiggins for making the math behind the Droste transform understandable:
+http://roy.red/droste-.html
\ No newline at end of file
diff --git a/glsl-in-which-alice-feels-sick/dist/index.html b/glsl-in-which-alice-feels-sick/dist/index.html
new file mode 100644
index 0000000..d4a790e
--- /dev/null
+++ b/glsl-in-which-alice-feels-sick/dist/index.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>GLSL: In Which Alice Feels Sick</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
+<script id="vertexShader" type="x-shader/x-vertex">
+    void main() {
+        gl_Position = vec4( position, 1.0 );
+    }
+</script>
+<script id="fragmentShader" type="x-shader/x-fragment">
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D u_noise;
+  
+  float PI = 3.141592653589793;
+    
+  // float r1 = 0.1 + ((u_mouse.y + 0.5) * .1);
+  // float r2 = 0.4 + (u_mouse.x * .2);
+  float r1 = 0.1;
+  float r2 = 0.4;
+  
+  // These awesome complex Math functions curtesy of 
+  // https://github.com/mkovacs/reim/blob/master/reim.glsl
+  vec2 cCis(float r);
+  vec2 cLog(vec2 c); // principal value
+  vec2 cInv(vec2 c);
+  float cArg(vec2 c);
+  float cAbs(vec2 c);
+  
+  vec2 cMul(vec2 a, vec2 b);
+  vec2 cDiv(vec2 a, vec2 b);
+
+  vec2 cCis(float r)
+  {
+    return vec2( cos(r), sin(r) );
+  }
+  vec2 cExp(vec2 c)
+  {
+    return exp(c.x) * cCis(c.y);
+  }
+  vec2 cConj(vec2 c)
+  {
+    return vec2(c.x, -c.y);
+  }
+  vec2 cInv(vec2 c)
+  {
+    return cConj(c) / dot(c, c);
+  }
+  vec2 cLog(vec2 c)
+  {
+    return vec2( log( cAbs(c) ), cArg(c) );
+  }
+  float cArg(vec2 c)
+  {
+    return atan(c.y, c.x);
+  }
+  float cAbs(vec2 c)
+  {
+    return length(c);
+  }
+  vec2 cMul(vec2 a, vec2 b)
+  {
+    return vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x);
+  }
+  vec2 cDiv(vec2 a, vec2 b)
+  {
+    return cMul(a, cInv(b));
+  }
+
+
+  vec2 hash2(vec2 p)
+  {
+    vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
+    return o;
+  }
+  
+  float rect(vec2 p, vec2 size) {  
+    vec2 d = abs(p) - size;
+    return min(max(d.x, d.y), 0.0) + length(max(d,0.0));
+  }
+  
+  float strokewidth = 0.02;
+  vec3 circles(vec2 uv, float r1, float r2) {
+    float d = length(uv);
+    vec3 colour = vec3(0.);
+    float aa = fwidth(d);
+    
+    float distance_between = (r2 - r1)/2.;
+    
+    colour = mix(colour, vec3(.8, .8, 0.), smoothstep(aa, 0., rect(uv + vec2(r1+distance_between, 0.), vec2(distance_between, strokewidth / 2.)) ));
+    colour = mix(colour, vec3(.8, .8, .8), smoothstep(aa, 0., rect(uv - vec2(r1+distance_between, 0.), vec2(distance_between, strokewidth / 2.)) ));
+    colour = mix(colour, vec3(.0, .8, .8), smoothstep(aa, 0., rect(uv + vec2(0., r1+distance_between), vec2(strokewidth / 2., distance_between)) ));
+    colour = mix(colour, vec3(.8, .0, .8), smoothstep(aa, 0., rect(uv - vec2(0., r1+distance_between), vec2(strokewidth / 2., distance_between)) ));
+    
+    colour = mix(colour, vec3(1., 0., 0.), smoothstep(r1 + aa, r1, d) * smoothstep(r1 - strokewidth, r1 - strokewidth + aa, d));
+    colour = mix(colour, vec3(0., 1., 0.), smoothstep(r2 + aa, r2, d) * smoothstep(r2 - strokewidth, r2 - strokewidth + aa, d));
+    
+    return colour;
+    
+  }
+  vec3 render(vec2 uv) {
+    // float vignette = pow(uv.x*uv.y * 15.0, 0.25);
+    // float vignette = pow((1. - uv.x - 0.5) * (1. - uv.y - 0.5) * 5., 0.55) * .5;
+    float d = length(uv);
+    
+    float vignette = smoothstep(.5, 1., 1. - d) * .8;
+    vignette *= smoothstep(0., 0.2, d);
+    vignette *= 1.5;
+    vignette = .8 - vignette;
+    uv += u_time * .2;
+    vec2 i_uv = floor(uv * 10.);
+    vec3 colour = vec3(mod(i_uv.x + i_uv.y, 2.));
+    
+    colour -= vignette;
+    
+    
+    float aa = .05;
+    // colour = mix(colour, vec3(0.), smoothstep(r1 + aa * .5, r1, d) * smoothstep(r1 - strokewidth, r1 - strokewidth + aa * .5, d) * .5);
+    colour = mix(colour, vec3(0.), smoothstep(r2 + aa, r2, d) * smoothstep(r2 - strokewidth * 2., r2 - strokewidth * 2. + aa, d));
+    
+    return colour;
+  }
+
+  void main() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    // 5. Take the tiled strips back to ordinary space.
+    uv = cLog(uv); 
+    // 4. Scale and rotate the strips
+    float scale = log(r2/r1);
+    float angle = atan(scale/(2.0*PI));
+    uv = cDiv(uv, cExp(vec2(0,angle))*cos(angle)); 
+    // 3. this simulates zooming in the tile
+    uv += u_time;
+    // 2. Tile the strips
+    uv.x = mod(uv.x,log(r2/r1)); 
+    // 1. Take the annulus to a strip
+    uv = cExp(uv)*r1;
+    
+    vec3 colour = render(uv);
+
+    gl_FragColor = vec4(colour,1.0);
+  }
+</script>
+
+
+<div id="container"></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/glsl-in-which-alice-feels-sick/dist/script.js b/glsl-in-which-alice-feels-sick/dist/script.js
new file mode 100644
index 0000000..6fb765f
--- /dev/null
+++ b/glsl-in-which-alice-feels-sick/dist/script.js
@@ -0,0 +1,84 @@
+/*
+Most of the stuff in here is just bootstrapping. Essentially it's just
+setting ThreeJS up so that it renders a flat surface upon which to draw 
+the shader. The only thing to see here really is the uniforms sent to 
+the shader. Apart from that all of the magic happens in the HTML view
+under the fragment shader.
+*/
+
+let container;
+let camera, scene, renderer;
+let uniforms;
+
+let loader = new THREE.TextureLoader();
+let texture;
+loader.setCrossOrigin("anonymous");
+loader.load(
+'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',
+function do_something_with_texture(tex) {
+  texture = tex;
+  texture.wrapS = THREE.RepeatWrapping;
+  texture.wrapT = THREE.RepeatWrapping;
+  texture.minFilter = THREE.LinearFilter;
+  init();
+  animate();
+});
+
+
+function init() {
+  container = document.getElementById('container');
+
+  camera = new THREE.Camera();
+  camera.position.z = 1;
+
+  scene = new THREE.Scene();
+
+  var geometry = new THREE.PlaneBufferGeometry(2, 2);
+
+  uniforms = {
+    u_time: { type: "f", value: 1.0 },
+    u_resolution: { type: "v2", value: new THREE.Vector2() },
+    u_noise: { type: "t", value: texture },
+    u_mouse: { type: "v2", value: new THREE.Vector2() } };
+
+
+  var material = new THREE.ShaderMaterial({
+    uniforms: uniforms,
+    vertexShader: document.getElementById('vertexShader').textContent,
+    fragmentShader: document.getElementById('fragmentShader').textContent });
+
+  material.extensions.derivatives = true;
+
+  var mesh = new THREE.Mesh(geometry, material);
+  scene.add(mesh);
+
+  renderer = new THREE.WebGLRenderer();
+  renderer.setPixelRatio(window.devicePixelRatio);
+
+  container.appendChild(renderer.domElement);
+
+  onWindowResize();
+  window.addEventListener('resize', onWindowResize, false);
+
+  document.onmousemove = function (e) {
+    let ratio = window.innerHeight / window.innerWidth;
+    uniforms.u_mouse.value.x = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
+    uniforms.u_mouse.value.y = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
+  };
+}
+
+function onWindowResize(event) {
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  uniforms.u_resolution.value.x = renderer.domElement.width;
+  uniforms.u_resolution.value.y = renderer.domElement.height;
+}
+
+function animate() {
+  requestAnimationFrame(animate);
+  render();
+}
+
+function render() {
+  uniforms.u_time.value += 0.01;
+  renderer.render(scene, camera);
+}
\ No newline at end of file
diff --git a/glsl-in-which-alice-feels-sick/dist/style.css b/glsl-in-which-alice-feels-sick/dist/style.css
new file mode 100644
index 0000000..cf8832e
--- /dev/null
+++ b/glsl-in-which-alice-feels-sick/dist/style.css
@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#container {
+  position: fixed;
+}
diff --git a/glsl-in-which-alice-feels-sick/license.txt b/glsl-in-which-alice-feels-sick/license.txt
new file mode 100644
index 0000000..b20c617
--- /dev/null
+++ b/glsl-in-which-alice-feels-sick/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Liam Egan (https://codepen.io/shubniggurath/pen/vdQGjR)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/glsl-in-which-alice-feels-sick/src/index.html b/glsl-in-which-alice-feels-sick/src/index.html
new file mode 100644
index 0000000..5313be3
--- /dev/null
+++ b/glsl-in-which-alice-feels-sick/src/index.html
@@ -0,0 +1,146 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
+<script id="vertexShader" type="x-shader/x-vertex">
+    void main() {
+        gl_Position = vec4( position, 1.0 );
+    }
+</script>
+<script id="fragmentShader" type="x-shader/x-fragment">
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D u_noise;
+  
+  float PI = 3.141592653589793;
+    
+  // float r1 = 0.1 + ((u_mouse.y + 0.5) * .1);
+  // float r2 = 0.4 + (u_mouse.x * .2);
+  float r1 = 0.1;
+  float r2 = 0.4;
+  
+  // These awesome complex Math functions curtesy of 
+  // https://github.com/mkovacs/reim/blob/master/reim.glsl
+  vec2 cCis(float r);
+  vec2 cLog(vec2 c); // principal value
+  vec2 cInv(vec2 c);
+  float cArg(vec2 c);
+  float cAbs(vec2 c);
+  
+  vec2 cMul(vec2 a, vec2 b);
+  vec2 cDiv(vec2 a, vec2 b);
+
+  vec2 cCis(float r)
+  {
+    return vec2( cos(r), sin(r) );
+  }
+  vec2 cExp(vec2 c)
+  {
+    return exp(c.x) * cCis(c.y);
+  }
+  vec2 cConj(vec2 c)
+  {
+    return vec2(c.x, -c.y);
+  }
+  vec2 cInv(vec2 c)
+  {
+    return cConj(c) / dot(c, c);
+  }
+  vec2 cLog(vec2 c)
+  {
+    return vec2( log( cAbs(c) ), cArg(c) );
+  }
+  float cArg(vec2 c)
+  {
+    return atan(c.y, c.x);
+  }
+  float cAbs(vec2 c)
+  {
+    return length(c);
+  }
+  vec2 cMul(vec2 a, vec2 b)
+  {
+    return vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x);
+  }
+  vec2 cDiv(vec2 a, vec2 b)
+  {
+    return cMul(a, cInv(b));
+  }
+
+
+  vec2 hash2(vec2 p)
+  {
+    vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
+    return o;
+  }
+  
+  float rect(vec2 p, vec2 size) {  
+    vec2 d = abs(p) - size;
+    return min(max(d.x, d.y), 0.0) + length(max(d,0.0));
+  }
+  
+  float strokewidth = 0.02;
+  vec3 circles(vec2 uv, float r1, float r2) {
+    float d = length(uv);
+    vec3 colour = vec3(0.);
+    float aa = fwidth(d);
+    
+    float distance_between = (r2 - r1)/2.;
+    
+    colour = mix(colour, vec3(.8, .8, 0.), smoothstep(aa, 0., rect(uv + vec2(r1+distance_between, 0.), vec2(distance_between, strokewidth / 2.)) ));
+    colour = mix(colour, vec3(.8, .8, .8), smoothstep(aa, 0., rect(uv - vec2(r1+distance_between, 0.), vec2(distance_between, strokewidth / 2.)) ));
+    colour = mix(colour, vec3(.0, .8, .8), smoothstep(aa, 0., rect(uv + vec2(0., r1+distance_between), vec2(strokewidth / 2., distance_between)) ));
+    colour = mix(colour, vec3(.8, .0, .8), smoothstep(aa, 0., rect(uv - vec2(0., r1+distance_between), vec2(strokewidth / 2., distance_between)) ));
+    
+    colour = mix(colour, vec3(1., 0., 0.), smoothstep(r1 + aa, r1, d) * smoothstep(r1 - strokewidth, r1 - strokewidth + aa, d));
+    colour = mix(colour, vec3(0., 1., 0.), smoothstep(r2 + aa, r2, d) * smoothstep(r2 - strokewidth, r2 - strokewidth + aa, d));
+    
+    return colour;
+    
+  }
+  vec3 render(vec2 uv) {
+    // float vignette = pow(uv.x*uv.y * 15.0, 0.25);
+    // float vignette = pow((1. - uv.x - 0.5) * (1. - uv.y - 0.5) * 5., 0.55) * .5;
+    float d = length(uv);
+    
+    float vignette = smoothstep(.5, 1., 1. - d) * .8;
+    vignette *= smoothstep(0., 0.2, d);
+    vignette *= 1.5;
+    vignette = .8 - vignette;
+    uv += u_time * .2;
+    vec2 i_uv = floor(uv * 10.);
+    vec3 colour = vec3(mod(i_uv.x + i_uv.y, 2.));
+    
+    colour -= vignette;
+    
+    
+    float aa = .05;
+    // colour = mix(colour, vec3(0.), smoothstep(r1 + aa * .5, r1, d) * smoothstep(r1 - strokewidth, r1 - strokewidth + aa * .5, d) * .5);
+    colour = mix(colour, vec3(0.), smoothstep(r2 + aa, r2, d) * smoothstep(r2 - strokewidth * 2., r2 - strokewidth * 2. + aa, d));
+    
+    return colour;
+  }
+
+  void main() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    // 5. Take the tiled strips back to ordinary space.
+    uv = cLog(uv); 
+    // 4. Scale and rotate the strips
+    float scale = log(r2/r1);
+    float angle = atan(scale/(2.0*PI));
+    uv = cDiv(uv, cExp(vec2(0,angle))*cos(angle)); 
+    // 3. this simulates zooming in the tile
+    uv += u_time;
+    // 2. Tile the strips
+    uv.x = mod(uv.x,log(r2/r1)); 
+    // 1. Take the annulus to a strip
+    uv = cExp(uv)*r1;
+    
+    vec3 colour = render(uv);
+
+    gl_FragColor = vec4(colour,1.0);
+  }
+</script>
+
+
+<div id="container"></div>
\ No newline at end of file
diff --git a/glsl-in-which-alice-feels-sick/src/script.babel b/glsl-in-which-alice-feels-sick/src/script.babel
new file mode 100644
index 0000000..147660b
--- /dev/null
+++ b/glsl-in-which-alice-feels-sick/src/script.babel
@@ -0,0 +1,84 @@
+/*
+Most of the stuff in here is just bootstrapping. Essentially it's just
+setting ThreeJS up so that it renders a flat surface upon which to draw 
+the shader. The only thing to see here really is the uniforms sent to 
+the shader. Apart from that all of the magic happens in the HTML view
+under the fragment shader.
+*/
+
+let container;
+let camera, scene, renderer;
+let uniforms;
+
+let loader=new THREE.TextureLoader();
+let texture;
+loader.setCrossOrigin("anonymous");
+loader.load(
+  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',
+  function do_something_with_texture(tex) {
+    texture = tex;
+    texture.wrapS = THREE.RepeatWrapping;
+    texture.wrapT = THREE.RepeatWrapping;
+    texture.minFilter = THREE.LinearFilter;
+    init();
+    animate();
+  }
+);
+
+function init() {
+  container = document.getElementById( 'container' );
+
+  camera = new THREE.Camera();
+  camera.position.z = 1;
+
+  scene = new THREE.Scene();
+
+  var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
+
+  uniforms = {
+    u_time: { type: "f", value: 1.0 },
+    u_resolution: { type: "v2", value: new THREE.Vector2() },
+    u_noise: { type: "t", value: texture },
+    u_mouse: { type: "v2", value: new THREE.Vector2() }
+  };
+
+  var material = new THREE.ShaderMaterial( {
+    uniforms: uniforms,
+    vertexShader: document.getElementById( 'vertexShader' ).textContent,
+    fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+  } );
+  material.extensions.derivatives = true;
+
+  var mesh = new THREE.Mesh( geometry, material );
+  scene.add( mesh );
+
+  renderer = new THREE.WebGLRenderer();
+  renderer.setPixelRatio( window.devicePixelRatio );
+
+  container.appendChild( renderer.domElement );
+
+  onWindowResize();
+  window.addEventListener( 'resize', onWindowResize, false );
+
+  document.onmousemove = function(e){
+    let ratio = window.innerHeight / window.innerWidth;
+    uniforms.u_mouse.value.x = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
+    uniforms.u_mouse.value.y = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
+  }
+}
+
+function onWindowResize( event ) {
+  renderer.setSize( window.innerWidth, window.innerHeight );
+  uniforms.u_resolution.value.x = renderer.domElement.width;
+  uniforms.u_resolution.value.y = renderer.domElement.height;
+}
+
+function animate() {
+  requestAnimationFrame( animate );
+  render();
+}
+
+function render() {
+  uniforms.u_time.value += 0.01;
+  renderer.render( scene, camera );
+}
\ No newline at end of file
diff --git a/glsl-in-which-alice-feels-sick/src/style.scss b/glsl-in-which-alice-feels-sick/src/style.scss
new file mode 100644
index 0000000..f914b63
--- /dev/null
+++ b/glsl-in-which-alice-feels-sick/src/style.scss
@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#container {
+  position: fixed;
+}
\ No newline at end of file
diff --git a/glsl-sample027/README.markdown b/glsl-sample027/README.markdown
new file mode 100644
index 0000000..ee2bcd5
--- /dev/null
+++ b/glsl-sample027/README.markdown
@@ -0,0 +1,5 @@
+# GLSL Sample027
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Web_yuki1027/pen/yLgYpWM](https://codepen.io/Web_yuki1027/pen/yLgYpWM).
+
+
diff --git a/glsl-sample027/dist/index.html b/glsl-sample027/dist/index.html
new file mode 100644
index 0000000..d539523
--- /dev/null
+++ b/glsl-sample027/dist/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - GLSL Sample027</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="webgl-canvas"></canvas>
+
+<!-- vertexShader -->
+<script id="js-vertex-shader" type="x-shader/x-vertex">
+attribute vec3 position;
+
+void main()	{
+  gl_Position = vec4(position, 1.0);
+}
+</script>
+
+<!-- fragmentShader -->
+<script id="js-fragment-shader" type="x-shader/x-fragment">
+precision highp float;
+uniform vec2 resolution;
+uniform float time;
+uniform float xScale;
+uniform float yScale;
+uniform float distortion;
+
+void main() {
+  vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
+  
+  float d = length(p) * distortion;
+  
+  float rx = p.x * (1.0 + d);
+  float gx = p.x;
+  float bx = p.x * (1.0 - d);
+
+  float r = 0.05 / abs(p.y + sin((rx + time) * xScale) * yScale);
+  float g = 0.05 / abs(p.y + sin((gx + time) * xScale) * yScale);
+  float b = 0.05 / abs(p.y + sin((bx + time) * xScale) * yScale);
+  
+  gl_FragColor = vec4(r, g, b, 1.0);
+}
+</script>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/glsl-sample027/dist/script.js b/glsl-sample027/dist/script.js
new file mode 100644
index 0000000..606330b
--- /dev/null
+++ b/glsl-sample027/dist/script.js
@@ -0,0 +1,211 @@
+class Stage {
+  constructor() {
+    this.renderParam = {
+      clearColor: 0x666666,
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+
+    this.cameraParam = {
+      left: -1,
+      right: 1,
+      top: 1,
+      bottom: 1,
+      near: 0,
+      far: -1
+    };
+
+    this.scene = null;
+    this.camera = null;
+    this.renderer = null;
+    this.geometry = null;
+    this.material = null;
+    this.mesh = null;
+
+    this.isInitialized = false;
+  }
+
+  init() {
+    this._setScene();
+    this._setRender();
+    this._setCamera();
+
+    this.isInitialized = true;
+  }
+
+  _setScene() {
+    this.scene = new THREE.Scene();
+  }
+
+  _setRender() {
+    this.renderer = new THREE.WebGLRenderer({
+      canvas: document.getElementById("webgl-canvas")
+    });
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.setClearColor(new THREE.Color(this.renderParam.clearColor));
+    this.renderer.setSize(this.renderParam.width, this.renderParam.height);
+  }
+
+  _setCamera() {
+    if (!this.isInitialized) {
+      this.camera = new THREE.OrthographicCamera(
+        this.cameraParam.left,
+        this.cameraParam.right,
+        this.cameraParam.top,
+        this.cameraParam.bottom,
+        this.cameraParam.near,
+        this.cameraParam.far
+      );
+    }
+    
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+
+    this.camera.aspect = windowWidth / windowHeight;
+
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(windowWidth, windowHeight);
+  }
+
+  _render() {
+    this.renderer.render(this.scene, this.camera);
+  }
+
+  onResize() {
+    this._setCamera();
+  }
+
+  onRaf() {
+    this._render();
+  }
+}
+
+class Mesh {
+  constructor(stage) {
+    this.canvas = document.getElementById("webgl-canvas");
+    this.canvasWidth = this.canvas.width;
+    this.canvasHeight = this.canvas.height;
+
+    this.uniforms = {
+      resolution: { type: "v2", value: [ this.canvasWidth, this.canvasHeight ] },
+      time: { type: "f", value: 0.0 },
+      xScale: { type: "f", value: 1.0 },
+      yScale: { type: "f", value: 0.5 },
+      distortion: { type: "f", value: 0.050 }
+    };
+
+    this.stage = stage;
+
+    this.mesh = null;
+    
+    this.xScale = 1.0;
+    this.yScale = 0.5;
+    this.distortion = 0.050;
+  }
+
+  init() {
+    this._setMesh();
+    // this._setGui();
+  }
+
+  _setMesh() {
+    const position = [
+      -1.0, -1.0, 0.0,
+       1.0, -1.0, 0.0,
+      -1.0,  1.0, 0.0,
+       1.0, -1.0, 0.0,
+      -1.0,  1.0, 0.0,
+       1.0,  1.0, 0.0
+    ];
+
+    const positions = new THREE.BufferAttribute(new Float32Array(position), 3);
+
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute("position", positions);
+
+    const material = new THREE.RawShaderMaterial({
+      vertexShader: document.getElementById("js-vertex-shader").textContent,
+      fragmentShader: document.getElementById("js-fragment-shader").textContent,
+      uniforms: this.uniforms,
+      side: THREE.DoubleSide
+    });
+
+    this.mesh = new THREE.Mesh(geometry, material);
+
+    this.stage.scene.add(this.mesh);
+  }
+  
+  _diffuse() {
+    // gsap.to(this.mesh.material.uniforms.xScale, {
+    //   value: 2,
+    //   duration: 0.1,
+    //   ease: 'power2.inOut',
+    //   repeat: -1,
+    //   yoyo: true
+    // });
+    // gsap.to(this.mesh.material.uniforms.yScale, {
+    //   value: 1,
+    //   duration: 0.1,
+    //   ease: 'power2.inOut',
+    //   repeat: -1,
+    //   yoyo: true
+    // });
+  }
+  
+  _render() {
+    this.uniforms.time.value += 0.01;
+  }
+
+  _setGui() {
+    const parameter = {
+      xScale: this.xScale,
+      yScale: this.yScale,
+      distortion: this.distortion
+    }
+    const gui = new dat.GUI();
+    gui.add(parameter, "xScale", 0.00, 5.00, 0.01).onChange((value) => {
+      this.mesh.material.uniforms.xScale.value = value;
+    });
+    gui.add(parameter, "yScale", 0.00, 1.00, 0.01).onChange((value) => {
+      this.mesh.material.uniforms.yScale.value = value;
+    });
+    gui.add(parameter, "distortion", 0.001, 0.100, 0.001).onChange((value) => {
+      this.mesh.material.uniforms.distortion.value = value;
+    });
+  }
+
+  onRaf() {
+    this._render();
+  }
+}
+
+(() => {
+  const stage = new Stage();
+
+  stage.init();
+
+  const mesh = new Mesh(stage);
+
+  mesh.init();
+
+  window.addEventListener("resize", () => {
+    stage.onResize();
+  });
+  
+  window.addEventListener("load", () => {
+    setTimeout(() => {
+      mesh._diffuse();
+    }, 1000);
+  });
+
+  const _raf = () => {
+    window.requestAnimationFrame(() => {
+      stage.onRaf();
+      mesh.onRaf();
+
+      _raf();
+    });
+  };
+
+  _raf();
+})();
\ No newline at end of file
diff --git a/glsl-sample027/dist/style.css b/glsl-sample027/dist/style.css
new file mode 100644
index 0000000..22f82b6
--- /dev/null
+++ b/glsl-sample027/dist/style.css
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/glsl-sample027/license.txt b/glsl-sample027/license.txt
new file mode 100644
index 0000000..f2c25d3
--- /dev/null
+++ b/glsl-sample027/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Yuki (https://codepen.io/Web_yuki1027/pen/yLgYpWM)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/glsl-sample027/src/index.html b/glsl-sample027/src/index.html
new file mode 100644
index 0000000..3bf8986
--- /dev/null
+++ b/glsl-sample027/src/index.html
@@ -0,0 +1,36 @@
+<canvas id="webgl-canvas"></canvas>
+
+<!-- vertexShader -->
+<script id="js-vertex-shader" type="x-shader/x-vertex">
+attribute vec3 position;
+
+void main()	{
+  gl_Position = vec4(position, 1.0);
+}
+</script>
+
+<!-- fragmentShader -->
+<script id="js-fragment-shader" type="x-shader/x-fragment">
+precision highp float;
+uniform vec2 resolution;
+uniform float time;
+uniform float xScale;
+uniform float yScale;
+uniform float distortion;
+
+void main() {
+  vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
+  
+  float d = length(p) * distortion;
+  
+  float rx = p.x * (1.0 + d);
+  float gx = p.x;
+  float bx = p.x * (1.0 - d);
+
+  float r = 0.05 / abs(p.y + sin((rx + time) * xScale) * yScale);
+  float g = 0.05 / abs(p.y + sin((gx + time) * xScale) * yScale);
+  float b = 0.05 / abs(p.y + sin((bx + time) * xScale) * yScale);
+  
+  gl_FragColor = vec4(r, g, b, 1.0);
+}
+</script>
\ No newline at end of file
diff --git a/glsl-sample027/src/script.js b/glsl-sample027/src/script.js
new file mode 100644
index 0000000..606330b
--- /dev/null
+++ b/glsl-sample027/src/script.js
@@ -0,0 +1,211 @@
+class Stage {
+  constructor() {
+    this.renderParam = {
+      clearColor: 0x666666,
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+
+    this.cameraParam = {
+      left: -1,
+      right: 1,
+      top: 1,
+      bottom: 1,
+      near: 0,
+      far: -1
+    };
+
+    this.scene = null;
+    this.camera = null;
+    this.renderer = null;
+    this.geometry = null;
+    this.material = null;
+    this.mesh = null;
+
+    this.isInitialized = false;
+  }
+
+  init() {
+    this._setScene();
+    this._setRender();
+    this._setCamera();
+
+    this.isInitialized = true;
+  }
+
+  _setScene() {
+    this.scene = new THREE.Scene();
+  }
+
+  _setRender() {
+    this.renderer = new THREE.WebGLRenderer({
+      canvas: document.getElementById("webgl-canvas")
+    });
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.setClearColor(new THREE.Color(this.renderParam.clearColor));
+    this.renderer.setSize(this.renderParam.width, this.renderParam.height);
+  }
+
+  _setCamera() {
+    if (!this.isInitialized) {
+      this.camera = new THREE.OrthographicCamera(
+        this.cameraParam.left,
+        this.cameraParam.right,
+        this.cameraParam.top,
+        this.cameraParam.bottom,
+        this.cameraParam.near,
+        this.cameraParam.far
+      );
+    }
+    
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+
+    this.camera.aspect = windowWidth / windowHeight;
+
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(windowWidth, windowHeight);
+  }
+
+  _render() {
+    this.renderer.render(this.scene, this.camera);
+  }
+
+  onResize() {
+    this._setCamera();
+  }
+
+  onRaf() {
+    this._render();
+  }
+}
+
+class Mesh {
+  constructor(stage) {
+    this.canvas = document.getElementById("webgl-canvas");
+    this.canvasWidth = this.canvas.width;
+    this.canvasHeight = this.canvas.height;
+
+    this.uniforms = {
+      resolution: { type: "v2", value: [ this.canvasWidth, this.canvasHeight ] },
+      time: { type: "f", value: 0.0 },
+      xScale: { type: "f", value: 1.0 },
+      yScale: { type: "f", value: 0.5 },
+      distortion: { type: "f", value: 0.050 }
+    };
+
+    this.stage = stage;
+
+    this.mesh = null;
+    
+    this.xScale = 1.0;
+    this.yScale = 0.5;
+    this.distortion = 0.050;
+  }
+
+  init() {
+    this._setMesh();
+    // this._setGui();
+  }
+
+  _setMesh() {
+    const position = [
+      -1.0, -1.0, 0.0,
+       1.0, -1.0, 0.0,
+      -1.0,  1.0, 0.0,
+       1.0, -1.0, 0.0,
+      -1.0,  1.0, 0.0,
+       1.0,  1.0, 0.0
+    ];
+
+    const positions = new THREE.BufferAttribute(new Float32Array(position), 3);
+
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute("position", positions);
+
+    const material = new THREE.RawShaderMaterial({
+      vertexShader: document.getElementById("js-vertex-shader").textContent,
+      fragmentShader: document.getElementById("js-fragment-shader").textContent,
+      uniforms: this.uniforms,
+      side: THREE.DoubleSide
+    });
+
+    this.mesh = new THREE.Mesh(geometry, material);
+
+    this.stage.scene.add(this.mesh);
+  }
+  
+  _diffuse() {
+    // gsap.to(this.mesh.material.uniforms.xScale, {
+    //   value: 2,
+    //   duration: 0.1,
+    //   ease: 'power2.inOut',
+    //   repeat: -1,
+    //   yoyo: true
+    // });
+    // gsap.to(this.mesh.material.uniforms.yScale, {
+    //   value: 1,
+    //   duration: 0.1,
+    //   ease: 'power2.inOut',
+    //   repeat: -1,
+    //   yoyo: true
+    // });
+  }
+  
+  _render() {
+    this.uniforms.time.value += 0.01;
+  }
+
+  _setGui() {
+    const parameter = {
+      xScale: this.xScale,
+      yScale: this.yScale,
+      distortion: this.distortion
+    }
+    const gui = new dat.GUI();
+    gui.add(parameter, "xScale", 0.00, 5.00, 0.01).onChange((value) => {
+      this.mesh.material.uniforms.xScale.value = value;
+    });
+    gui.add(parameter, "yScale", 0.00, 1.00, 0.01).onChange((value) => {
+      this.mesh.material.uniforms.yScale.value = value;
+    });
+    gui.add(parameter, "distortion", 0.001, 0.100, 0.001).onChange((value) => {
+      this.mesh.material.uniforms.distortion.value = value;
+    });
+  }
+
+  onRaf() {
+    this._render();
+  }
+}
+
+(() => {
+  const stage = new Stage();
+
+  stage.init();
+
+  const mesh = new Mesh(stage);
+
+  mesh.init();
+
+  window.addEventListener("resize", () => {
+    stage.onResize();
+  });
+  
+  window.addEventListener("load", () => {
+    setTimeout(() => {
+      mesh._diffuse();
+    }, 1000);
+  });
+
+  const _raf = () => {
+    window.requestAnimationFrame(() => {
+      stage.onRaf();
+      mesh.onRaf();
+
+      _raf();
+    });
+  };
+
+  _raf();
+})();
\ No newline at end of file
diff --git a/glsl-sample027/src/style.css b/glsl-sample027/src/style.css
new file mode 100644
index 0000000..22f82b6
--- /dev/null
+++ b/glsl-sample027/src/style.css
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/gold-tiles/README.markdown b/gold-tiles/README.markdown
new file mode 100644
index 0000000..ea3e749
--- /dev/null
+++ b/gold-tiles/README.markdown
@@ -0,0 +1,4 @@
+# Gold Tiles
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jkantner/pen/bGbRQRy](https://codepen.io/jkantner/pen/bGbRQRy).
+
+ This [still](https://dribbble.com/shots/7053534-Lavitate) from Dribble made into gold and into an looping animation
\ No newline at end of file
diff --git a/gold-tiles/dist/index.html b/gold-tiles/dist/index.html
new file mode 100644
index 0000000..7b33b79
--- /dev/null
+++ b/gold-tiles/dist/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Gold Tiles</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<div class="base">
+  <div class="hole"></div>
+  <div class="plate"></div>
+  <div class="plate"></div>
+  <div class="plate"></div>
+  <div class="plate"></div>
+  <div class="plate"></div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/gold-tiles/dist/style.css b/gold-tiles/dist/style.css
new file mode 100644
index 0000000..b57c2c0
--- /dev/null
+++ b/gold-tiles/dist/style.css
@@ -0,0 +1,231 @@
+* {
+  border: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body, .base {
+  display: flex;
+}
+
+body {
+  background: #d9d9d9;
+  font-size: calc(16px + (20 - 16) * (100vw - 320px)/(1024 - 320));
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+.base:before, .base:after, .hole:before, .hole:after, .plate, .plate:before, .plate:after {
+  position: absolute;
+}
+
+.base, .hole, .plate {
+  margin: auto;
+}
+.base, .base:before, .base:after, .hole, .hole:before, .hole:after, .plate, .plate:before, .plate:after {
+  border-radius: 25%;
+}
+.base:before, .base:after, .hole:before, .hole:after, .plate:before, .plate:after {
+  content: "";
+  display: block;
+}
+
+.base:before, .hole {
+  background: radial-gradient(100% 100% at bottom left, gray, rgba(128, 128, 128, 0) 50%), radial-gradient(100% 100% at bottom right, gray, rgba(128, 128, 128, 0) 50%), linear-gradient(#333333, #4d4d4d);
+}
+
+.base:after, .hole:before {
+  background-image: url(https://i.ibb.co/2YmnnBT/plastic-grain-texture.jpg);
+  background-color: #262626;
+  background-blend-mode: luminosity;
+}
+
+.base:before, .base:after, .plate:before, .plate:after {
+  width: 100%;
+  height: 100%;
+}
+.base:before, .plate:before {
+  transform: translate(-5%, -5%);
+}
+.base:after, .plate:after {
+  transform: translate(-6%, -6%);
+}
+
+.base {
+  background: #262626;
+  position: relative;
+  width: 15em;
+  height: 15em;
+  transform: rotateX(30deg) rotateZ(45deg);
+  z-index: 0;
+}
+.base:after {
+  background-size: 100% 100%;
+  box-shadow: 0.1em 0.1em 0 #262626 inset;
+}
+
+.hole {
+  box-shadow: 0 0 0.1em 0.1em rgba(0, 0, 0, 0.5) inset, 0.1em 0.1em 0.2em 0.2em rgba(0, 0, 0, 0.5);
+  width: 70%;
+  height: 70%;
+  transform: translate(-0.9em, -0.9em);
+  z-index: 1;
+}
+.hole:before, .hole:after {
+  top: 2%;
+  left: 2%;
+  width: 96%;
+  height: 96%;
+}
+.hole:before {
+  background-size: 143% 143%;
+  box-shadow: 0.3em 0.3em 0.1em 0.1em rgba(0, 0, 0, 0.7) inset, -0.1em -0.1em 0.1em 0.1em rgba(0, 0, 0, 0.7) inset;
+}
+.hole:after {
+  animation: blurOutIn 2s ease-out infinite;
+  background: black;
+}
+
+.plate {
+  background-image: radial-gradient(8% 10% at 18% 102%, #ebd4ad 33%, rgba(235, 212, 173, 0)), radial-gradient(16% 8% at 106% 10%, #ebd4ad 50%, rgba(235, 212, 173, 0)), linear-gradient(45deg, #7b591e 8%, #b9852d 16% 43%, #ebd4ad 46% 50%, #b9852d 53% 56%, #7b591e 60% 62%, #cd9432 65% 87%, #7b591e 92%);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 65%;
+  height: 65%;
+  transform: translate(-0.9em, -0.9em);
+  z-index: 2;
+}
+.plate:before {
+  background: radial-gradient(100% 100% at bottom left, #ebd4ad, rgba(235, 212, 173, 0) 50%), radial-gradient(100% 100% at bottom right, #ebd4ad, rgba(235, 212, 173, 0) 50%), linear-gradient(#b9852d, #cd9432);
+}
+.plate:after {
+  background: #d7aa5b;
+  box-shadow: 0 0.1em 0 #7b591e inset, 0 0 0 0.1em #ebd4ad inset;
+}
+.plate:nth-child(2) {
+  animation: jump1 2s ease-out infinite;
+  background-image: linear-gradient(45deg, #523b14 8%, #7b591e 12% 30%, #b9852d 50%, #7b591e 70% 88%, #523b14 92%);
+}
+.plate:nth-child(3), .plate:nth-child(4) {
+  width: 50%;
+  height: 50%;
+}
+.plate:nth-child(3), .plate:nth-child(5) {
+  filter: blur(1px);
+  opacity: 0.7;
+}
+.plate:nth-child(3):after, .plate:nth-child(5):after {
+  background: #523b14;
+  box-shadow: 1.5em 1.5em 0.3em #7b591e inset;
+}
+.plate:nth-child(3) {
+  animation: jump2 2s ease-out infinite;
+  transform: translate(-1.4em, -1.4em);
+  z-index: 3;
+}
+.plate:nth-child(4) {
+  animation: jump3 2s ease-out infinite;
+  transform: translate(-1.9em, -1.9em);
+  z-index: 4;
+}
+.plate:nth-child(5), .plate:nth-child(6) {
+  width: 35%;
+  height: 35%;
+}
+.plate:nth-child(5) {
+  animation: jump4 2s ease-out infinite;
+  transform: translate(-2.4em, -2.4em);
+  z-index: 5;
+}
+.plate:nth-child(6) {
+  animation: jump5 2s ease-out infinite;
+  transform: translate(-2.8em, -2.8em);
+  z-index: 6;
+}
+
+/* Animations */
+@keyframes blurOutIn {
+  from, 40%, to {
+    filter: blur(0px);
+    opacity: 1;
+  }
+  10%, 30% {
+    filter: blur(3px);
+    opacity: 0.5;
+  }
+}
+@keyframes jump1 {
+  from, 40%, to {
+    transform: translate(-0.9em, -0.9em);
+  }
+  10%, 30% {
+    transform: translate(-1.9em, -1.9em);
+  }
+}
+@keyframes jump2 {
+  from, 50%, to {
+    filter: blur(1px);
+    transform: translate(-1.4em, -1.4em);
+  }
+  10% {
+    filter: blur(1px);
+    transform: translate(-2.4em, -2.4em);
+  }
+  20%, 30% {
+    filter: blur(4px);
+    transform: translate(-1.9em, -1.9em);
+  }
+  40% {
+    filter: blur(7px);
+    transform: translate(-0.4em, -0.4em);
+  }
+}
+@keyframes jump3 {
+  from, 50%, to {
+    transform: translate(-1.9em, -1.9em);
+  }
+  10% {
+    transform: translate(-2.9em, -2.9em);
+  }
+  20%, 40% {
+    transform: translate(-3.9em, -3.9em);
+  }
+}
+@keyframes jump4 {
+  from, 60%, to {
+    filter: blur(1px);
+    transform: translate(-2.4em, -2.4em);
+  }
+  10% {
+    transform: translate(-3.4em, -3.4em);
+  }
+  20% {
+    filter: blur(1px);
+    transform: translate(-4.4em, -4.4em);
+  }
+  30%, 40% {
+    filter: blur(4px);
+    transform: translate(-3.9em, -3.9em);
+  }
+  50% {
+    filter: blur(7px);
+    transform: translate(-1.4em, -1.4em);
+  }
+}
+@keyframes jump5 {
+  from, 60%, to {
+    transform: translate(-2.8em, -2.8em);
+  }
+  10% {
+    transform: translate(-3.8em, -3.8em);
+  }
+  20% {
+    transform: translate(-4.8em, -4.8em);
+  }
+  30%, 50% {
+    transform: translate(-5.8em, -5.8em);
+  }
+}
diff --git a/gold-tiles/license.txt b/gold-tiles/license.txt
new file mode 100644
index 0000000..a53a259
--- /dev/null
+++ b/gold-tiles/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Jon Kantner (https://codepen.io/jkantner/pen/bGbRQRy)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/gold-tiles/src/index.pug b/gold-tiles/src/index.pug
new file mode 100644
index 0000000..e252266
--- /dev/null
+++ b/gold-tiles/src/index.pug
@@ -0,0 +1,5 @@
+.base
+	.hole
+	- for (let p = 0; p < 5; ++p) {
+		.plate
+	- }
\ No newline at end of file
diff --git a/gold-tiles/src/style.scss b/gold-tiles/src/style.scss
new file mode 100644
index 0000000..ed4080a
--- /dev/null
+++ b/gold-tiles/src/style.scss
@@ -0,0 +1,265 @@
+// Animation
+$dur: 2s;
+$timing: ease-out;
+
+// Colors
+$blackHue: 0;
+$blackSat: 0%;
+$black1: hsl($blackHue,$blackSat,15%);
+$black2: hsl($blackHue,$blackSat,20%);
+$black3: hsl($blackHue,$blackSat,30%);
+$black4: hsl($blackHue,$blackSat,50%);
+$black4T: hsla($blackHue,$blackSat,50%,0);
+
+$goldHue: 38;
+$goldSat: 61%;
+$gold1: hsl($goldHue,$goldSat,20%);
+$gold2: hsl($goldHue,$goldSat,30%);
+$gold3: hsl($goldHue,$goldSat,45%);
+$gold4: hsl($goldHue,$goldSat,50%);
+$gold5: hsl($goldHue,$goldSat,60%);
+$gold5T: hsla($goldHue,$goldSat,60%,0);
+$gold6: hsl($goldHue,$goldSat,80%);
+$gold6T: hsla($goldHue,$goldSat,80%,0);
+
+* {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+body, .base {
+	display: flex;
+}
+body {
+	background: hsl(0,0%,85%);
+	font-size: calc(16px + (20 - 16) * (100vw - 320px)/(1024 - 320));
+	height: 100vh;
+	overflow-x: hidden;
+}
+.base:before, .base:after, .hole:before, .hole:after, .plate, .plate:before, .plate:after {
+	position: absolute;
+};
+.base, .hole, .plate {
+	margin: auto;
+	&, &:before, &:after {
+		border-radius: 25%;
+	}
+	&:before, &:after {
+		content: "";
+		display: block;
+	}
+}
+.base:before, .hole {
+	background:
+		radial-gradient(100% 100% at bottom left,$black4,$black4T 50%),
+		radial-gradient(100% 100% at bottom right,$black4,$black4T 50%),
+		linear-gradient($black2,$black3);
+}
+.base:after, .hole:before {
+	background: {
+		image: url(https://i.ibb.co/2YmnnBT/plastic-grain-texture.jpg);
+		color: $black1;
+		blend-mode: luminosity;
+	};
+}
+.base, .plate {
+	&:before, &:after {
+		width: 100%;
+		height: 100%;
+	}
+	&:before {
+		transform: translate(-5%,-5%);
+	}
+	&:after {
+		transform: translate(-6%,-6%);
+	}
+}
+.base {
+	background: $black1;
+	position: relative;
+	width: 15em;
+	height: 15em;
+	transform: rotateX(30deg) rotateZ(45deg);
+	z-index: 0;
+	&:after {
+		background-size: 100% 100%;
+		box-shadow: 0.1em 0.1em 0 $black1 inset;
+	}
+}
+.hole {
+	box-shadow:
+		0 0 0.1em 0.1em hsla(0,0%,0%,0.5) inset,
+		0.1em 0.1em 0.2em 0.2em hsla(0,0%,0%,0.5);
+	width: 70%;
+	height: 70%;
+	transform: translate(-0.9em,-0.9em);
+	z-index: 1;
+	&:before, &:after {
+		top: 2%;
+		left: 2%;
+		width: 96%;
+		height: 96%;
+	}
+	&:before {
+		background-size: 143% 143%;
+		box-shadow:
+			0.3em 0.3em 0.1em 0.1em hsla(0,0%,0%,0.7) inset,
+			-0.1em -0.1em 0.1em 0.1em hsla(0,0%,0%,0.7) inset;
+	}
+	&:after {
+		animation: blurOutIn $dur $timing infinite;
+		background: hsl(0,0%,0%);
+	}
+}
+.plate {
+	background-image:
+		radial-gradient(8% 10% at 18% 102%,$gold6 33%, $gold6T),
+		radial-gradient(16% 8% at 106% 10%,$gold6 50%, $gold6T),
+		linear-gradient(45deg,$gold2 8%,$gold3 16% 43%,$gold6 46% 50%,$gold3 53% 56%,$gold2 60% 62%,$gold4 65% 87%,$gold2 92%);
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 65%;
+	height: 65%;
+	transform: translate(-0.9em,-0.9em);
+	z-index: 2;
+	&:before {
+		background:
+			radial-gradient(100% 100% at bottom left,$gold6,$gold6T 50%),
+			radial-gradient(100% 100% at bottom right,$gold6,$gold6T 50%),
+			linear-gradient($gold3,$gold4);
+	}
+	&:after {
+		background: $gold5;
+		box-shadow:
+			0 0.1em 0 $gold2 inset,
+			0 0 0 0.1em $gold6 inset;
+	}
+	&:nth-child(2) {
+		animation: jump1 $dur $timing infinite;
+		background-image:
+			linear-gradient(45deg,$gold1 8%,$gold2 12% 30%,$gold3 50%,$gold2 70% 88%,$gold1 92%);
+	}
+	&:nth-child(3), &:nth-child(4) {
+		width: 50%;
+		height: 50%;
+	}
+	&:nth-child(3), &:nth-child(5) {
+		filter: blur(1px);
+		opacity: 0.7;
+		&:after {
+			background: $gold1;
+			box-shadow: 1.5em 1.5em 0.3em $gold2 inset;
+		}
+	}
+	&:nth-child(3) {
+		animation: jump2 $dur $timing infinite;
+		transform: translate(-1.4em,-1.4em);
+		z-index: 3;
+	}
+	&:nth-child(4) {
+		animation: jump3 $dur $timing infinite;
+		transform: translate(-1.9em,-1.9em);
+		z-index: 4;
+	}
+	&:nth-child(5), &:nth-child(6) {
+		width: 35%;
+		height: 35%;
+	}
+	&:nth-child(5) {
+		animation: jump4 $dur $timing infinite;
+		transform: translate(-2.4em,-2.4em);
+		z-index: 5;
+	}
+	&:nth-child(6) {
+		animation: jump5 $dur $timing infinite;
+		transform: translate(-2.8em,-2.8em);
+		z-index: 6;
+	}
+}
+
+/* Animations */
+@keyframes blurOutIn {
+	from, 40%, to {
+		filter: blur(0px);
+		opacity: 1;
+	}
+	10%, 30% {
+		filter: blur(3px);
+		opacity: 0.5;
+	}
+}
+@keyframes jump1 {
+	from, 40%, to {
+		transform: translate(-0.9em,-0.9em);
+	}
+	10%, 30% {
+		transform: translate(-1.9em,-1.9em);
+	}
+}
+@keyframes jump2 {
+	from, 50%, to {
+		filter: blur(1px);
+		transform: translate(-1.4em,-1.4em);
+	}
+	10% {
+		filter: blur(1px);
+		transform: translate(-2.4em,-2.4em);
+	}
+	20%, 30% {
+		filter: blur(4px);
+		transform: translate(-1.9em,-1.9em);
+	}
+	40% {
+		filter: blur(7px);
+		transform: translate(-0.4em,-0.4em);
+	}
+}
+@keyframes jump3 {
+	from, 50%, to {
+		transform: translate(-1.9em,-1.9em);
+	}
+	10% {
+		transform: translate(-2.9em,-2.9em);
+	}
+	20%, 40% {
+		transform: translate(-3.9em,-3.9em);
+	}
+}
+@keyframes jump4 {
+	from, 60%, to {
+		filter: blur(1px);
+		transform: translate(-2.4em,-2.4em);
+	}
+	10% {
+		transform: translate(-3.4em,-3.4em);
+	}
+	20% {
+		filter: blur(1px);
+		transform: translate(-4.4em,-4.4em);
+	}
+	30%, 40% {
+		filter: blur(4px);
+		transform: translate(-3.9em,-3.9em);
+	}
+	50% {
+		filter: blur(7px);
+		transform: translate(-1.4em,-1.4em);
+	}
+}
+@keyframes jump5 {
+	from, 60%, to {
+		transform: translate(-2.8em,-2.8em);
+	}
+	10% {
+		transform: translate(-3.8em,-3.8em);
+	}
+	20% {
+		transform: translate(-4.8em,-4.8em);
+	}
+	30%, 50% {
+		transform: translate(-5.8em,-5.8em);
+	}
+}
\ No newline at end of file
diff --git a/good-fast-cheap/README.markdown b/good-fast-cheap/README.markdown
new file mode 100644
index 0000000..400c724
--- /dev/null
+++ b/good-fast-cheap/README.markdown
@@ -0,0 +1,4 @@
+# Good Fast Cheap
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/kunukn/pen/qBWRLZB](https://codepen.io/kunukn/pen/qBWRLZB).
+
+ A tool for the stakeholders
\ No newline at end of file
diff --git a/good-fast-cheap/dist/https___codepen_io_kunukn.css b/good-fast-cheap/dist/https___codepen_io_kunukn.css
new file mode 100644
index 0000000..49c6241
--- /dev/null
+++ b/good-fast-cheap/dist/https___codepen_io_kunukn.css
@@ -0,0 +1,63 @@
+// https://www.unindented.org/blog/trigonometry-in-sass/
+
+@function pow($number, $exp) {
+  $value: 1;
+  @if $exp > 0 {
+    @for $i from 1 through $exp {
+      $value: $value * $number;
+    }
+  } @else if $exp < 0 {
+    @for $i from 1 through -$exp {
+      $value: $value / $number;
+    }
+  }
+  @return $value;
+}
+@function fact($number) {
+  $value: 1;
+  @if $number > 0 {
+    @for $i from 1 through $number {
+      $value: $value * $i;
+    }
+  }
+  @return $value;
+}
+@function pi() {
+  @return 3.14159265359;
+}
+
+@function rad($angle) {
+  $unit: unit($angle);
+  $unitless: $angle / ($angle * 0 + 1);
+  // If the angle has 'deg' as unit, convert to radians.
+  @if $unit == deg {
+    $unitless: $unitless / 180 * pi();
+  }
+  @return $unitless;
+}
+
+@function sin($angle) {
+  $sin: 0;
+  $angle: rad($angle);
+  // Iterate a bunch of times.
+  @for $i from 0 through 10 {
+    $sin: $sin + pow(-1, $i) * pow($angle,  (2 * $i + 1)) / fact(2 * $i + 1);
+  }
+  @return $sin;
+}
+
+@function cos($angle) {
+  $cos: 0;
+  $angle: rad($angle);
+  // Iterate a bunch of times.
+  @for $i from 0 through 10 {
+    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
+  }
+  @return $cos;
+}
+
+@function tan($angle) {
+  @return sin($angle) / cos($angle);
+}
+
+//@debug sin(pi() / 4); // => 0.70711
diff --git a/good-fast-cheap/dist/index.html b/good-fast-cheap/dist/index.html
new file mode 100644
index 0000000..2861ae6
--- /dev/null
+++ b/good-fast-cheap/dist/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Good Fast Cheap</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel='stylesheet' href='css/https___codepen_io_kunukn.css'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&amp;display=swap'>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="app">
+  <div class="ring">
+
+    <div class="topic" data-topic="good">
+      <button class="js btn">Good</button>
+      <div class="line-wrap">
+        <div class="line"></div>
+      </div>
+
+      <label class="display btn">Good</label>
+    </div>
+    <div class="topic" data-topic="fast">
+      <button class="js btn">Fast</button>
+      <div class="line-wrap">
+        <div class="line"></div>
+      </div>
+      <label class="display btn">Fast</label>
+
+    </div>
+    <div class="topic" data-topic="cheap">
+
+      <button class="js btn">Cheap</button>
+      <div class="line-wrap">
+        <div class="line"></div>
+      </div>
+      <label class="display btn">Cheap</label>
+
+    </div>
+    <button class="js topic-result topic-result--1"></button>
+    <button class="js topic-result topic-result--2"></button>
+
+    <div class="ring-background-2">
+      <div class="bg-line bg-line--3"></div>
+      <div class="bg-line bg-line--1"></div>
+      <div class="bg-line bg-line--2"></div>
+
+      <svg viewBox="0 15 100 100">
+
+    <polygon  points="50 15, 100 100, 0 100"/>
+
+</svg>
+    </div>
+  </div>
+</div>
+
+<a target="_blank" class="reference" href="https://twitter.com/FrazDav/status/1164207783081848832?s=09">inspiration</a>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/good-fast-cheap/dist/script.js b/good-fast-cheap/dist/script.js
new file mode 100644
index 0000000..da6c900
--- /dev/null
+++ b/good-fast-cheap/dist/script.js
@@ -0,0 +1,130 @@
+const log = console.log;
+
+// Quick prototyping, don't take the namings and algorithm to seriously. 
+
+let topics = qsa(".topic");
+let topicResult = qs(".js.topic-result--1");
+let topicResult2 = qs(".js.topic-result--2");
+
+// states
+let activeResultToggle = false;
+let actives = [];
+// ----------------------
+
+let onResultClick = () => {
+  event.stopPropagation();
+  event.preventDefault();
+  actives = [];
+  mapStateToDOM();
+};
+
+//topicResult.addEventListener("touchstart", onResultClick);
+//topicResult2.addEventListener("touchstart", onResultClick);
+topicResult.addEventListener("click", onResultClick);
+topicResult2.addEventListener("click", onResultClick);
+
+function onClick(event) {
+  event.stopPropagation();
+  event.preventDefault();
+  let topic = this.closest(".topic");
+  let anim = document.createElement("div");
+  anim.className = "btn-clicked";
+  topic.appendChild(anim);
+
+  setTimeout(() => {
+    try {
+      // DOM cleanup
+      anim && topic.removeChild(anim);
+    } catch (ex) {}
+  }, 2000);
+
+  let type = topic.getAttribute("data-topic");
+
+  if (!actives.includes(type)) {
+    actives.push(type);
+    if (actives.length > 2) actives.shift();
+  } else {
+    actives = actives.filter(t => t !== type);
+  }
+
+  mapStateToDOM();
+}
+
+let mapStateToDOM = () => {
+  if (actives.length === 2) {
+    activeResultToggle = !activeResultToggle;
+
+    if (actives.includes("good") && actives.includes("cheap")) {
+      if (activeResultToggle) {
+        topicResult.textContent = "🐌";
+        topicResult2.textContent = "";
+      } else {
+        topicResult.textContent = "";
+        topicResult2.textContent = "🐌";
+      }
+
+      topicResult.style.backgroundColor = "cyan";
+      topicResult2.style.backgroundColor = "cyan";
+    } else if (actives.includes("good") && actives.includes("fast")) {
+      if (activeResultToggle) {
+        topicResult.textContent = "💰";
+        topicResult2.textContent = "";
+      } else {
+        topicResult.textContent = "";
+        topicResult2.textContent = "💰";
+      }
+
+      topicResult.style.backgroundColor = "hotpink";
+      topicResult2.style.backgroundColor = "hotpink";
+    } else {
+      if (activeResultToggle) {
+        topicResult.textContent = "💩";
+        topicResult2.textContent = "";
+      } else {
+        topicResult.textContent = "";
+        topicResult2.textContent = "💩";
+      }
+
+      topicResult.style.backgroundColor = "#fff000";
+      topicResult2.style.backgroundColor = "#fff000";
+    }
+    if (activeResultToggle) {
+      topicResult.classList.add("is-active");
+      topicResult2.classList.remove("is-active");
+      topicResult.style.zIndex = 1;
+      topicResult2.style.zIndex = 0;
+    } else {
+      topicResult.classList.remove("is-active");
+      topicResult2.classList.add("is-active");
+      topicResult.style.zIndex = 0;
+      topicResult2.style.zIndex = 1;
+    }
+  } else {
+    topicResult.classList.remove("is-active");
+    topicResult2.classList.remove("is-active");
+  }
+
+  topics.forEach(t => t.classList.remove("is-active"));
+  actives.forEach(active => {
+    topics.forEach(topic => {
+      // O(n*n) but we have few items
+      let topicType = topic.getAttribute("data-topic");
+      if (topicType === active) {
+        topic.classList.add("is-active");
+      }
+    });
+  });
+};
+
+let buttons = qsa(".js.btn");
+buttons.forEach(b => {
+  //  b.addEventListener("touchstart", onClick);
+  b.addEventListener("click", onClick);
+});
+
+function qs(expr, context) {
+  return (context || document).querySelector(expr);
+}
+function qsa(expr, context) {
+  return [].slice.call((context || document).querySelectorAll(expr), 0);
+}
\ No newline at end of file
diff --git a/good-fast-cheap/license.txt b/good-fast-cheap/license.txt
new file mode 100644
index 0000000..dd4c635
--- /dev/null
+++ b/good-fast-cheap/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Kunuk Nykjær (https://codepen.io/kunukn/pen/qBWRLZB)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/good-fast-cheap/src/https___codepen_io_kunukn.css b/good-fast-cheap/src/https___codepen_io_kunukn.css
new file mode 100644
index 0000000..49c6241
--- /dev/null
+++ b/good-fast-cheap/src/https___codepen_io_kunukn.css
@@ -0,0 +1,63 @@
+// https://www.unindented.org/blog/trigonometry-in-sass/
+
+@function pow($number, $exp) {
+  $value: 1;
+  @if $exp > 0 {
+    @for $i from 1 through $exp {
+      $value: $value * $number;
+    }
+  } @else if $exp < 0 {
+    @for $i from 1 through -$exp {
+      $value: $value / $number;
+    }
+  }
+  @return $value;
+}
+@function fact($number) {
+  $value: 1;
+  @if $number > 0 {
+    @for $i from 1 through $number {
+      $value: $value * $i;
+    }
+  }
+  @return $value;
+}
+@function pi() {
+  @return 3.14159265359;
+}
+
+@function rad($angle) {
+  $unit: unit($angle);
+  $unitless: $angle / ($angle * 0 + 1);
+  // If the angle has 'deg' as unit, convert to radians.
+  @if $unit == deg {
+    $unitless: $unitless / 180 * pi();
+  }
+  @return $unitless;
+}
+
+@function sin($angle) {
+  $sin: 0;
+  $angle: rad($angle);
+  // Iterate a bunch of times.
+  @for $i from 0 through 10 {
+    $sin: $sin + pow(-1, $i) * pow($angle,  (2 * $i + 1)) / fact(2 * $i + 1);
+  }
+  @return $sin;
+}
+
+@function cos($angle) {
+  $cos: 0;
+  $angle: rad($angle);
+  // Iterate a bunch of times.
+  @for $i from 0 through 10 {
+    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
+  }
+  @return $cos;
+}
+
+@function tan($angle) {
+  @return sin($angle) / cos($angle);
+}
+
+//@debug sin(pi() / 4); // => 0.70711
diff --git a/good-fast-cheap/src/index.html b/good-fast-cheap/src/index.html
new file mode 100644
index 0000000..9ead957
--- /dev/null
+++ b/good-fast-cheap/src/index.html
@@ -0,0 +1,46 @@
+<div class="app">
+  <div class="ring">
+
+    <div class="topic" data-topic="good">
+      <button class="js btn">Good</button>
+      <div class="line-wrap">
+        <div class="line"></div>
+      </div>
+
+      <label class="display btn">Good</label>
+    </div>
+    <div class="topic" data-topic="fast">
+      <button class="js btn">Fast</button>
+      <div class="line-wrap">
+        <div class="line"></div>
+      </div>
+      <label class="display btn">Fast</label>
+
+    </div>
+    <div class="topic" data-topic="cheap">
+
+      <button class="js btn">Cheap</button>
+      <div class="line-wrap">
+        <div class="line"></div>
+      </div>
+      <label class="display btn">Cheap</label>
+
+    </div>
+    <button class="js topic-result topic-result--1"></button>
+    <button class="js topic-result topic-result--2"></button>
+
+    <div class="ring-background-2">
+      <div class="bg-line bg-line--3"></div>
+      <div class="bg-line bg-line--1"></div>
+      <div class="bg-line bg-line--2"></div>
+
+      <svg viewBox="0 15 100 100">
+
+    <polygon  points="50 15, 100 100, 0 100"/>
+
+</svg>
+    </div>
+  </div>
+</div>
+
+<a target="_blank" class="reference" href="https://twitter.com/FrazDav/status/1164207783081848832?s=09">inspiration</a>
\ No newline at end of file
diff --git a/good-fast-cheap/src/script.babel b/good-fast-cheap/src/script.babel
new file mode 100644
index 0000000..61ea8f2
--- /dev/null
+++ b/good-fast-cheap/src/script.babel
@@ -0,0 +1,130 @@
+const log = console.log;
+
+// Quick prototyping, don't take the namings and algorithm to seriously. 
+
+let topics = qsa(".topic");
+let topicResult = qs(".js.topic-result--1");
+let topicResult2 = qs(".js.topic-result--2");
+
+// states
+let activeResultToggle = false;
+let actives = [];
+// ----------------------
+
+let onResultClick = () => {
+  event.stopPropagation();
+  event.preventDefault();
+  actives = [];
+  mapStateToDOM();
+};
+
+//topicResult.addEventListener("touchstart", onResultClick);
+//topicResult2.addEventListener("touchstart", onResultClick);
+topicResult.addEventListener("click", onResultClick);
+topicResult2.addEventListener("click", onResultClick);
+
+function onClick(event) {
+  event.stopPropagation();
+  event.preventDefault();
+  let topic = this.closest(".topic");
+  let anim = document.createElement("div");
+  anim.className = "btn-clicked";
+  topic.appendChild(anim);
+
+  setTimeout(() => {
+    try {
+      // DOM cleanup
+      anim && topic.removeChild(anim);
+    } catch (ex) {}
+  }, 2000);
+
+  let type = topic.getAttribute("data-topic");
+
+  if (!actives.includes(type)) {
+    actives.push(type);
+    if (actives.length > 2) actives.shift();
+  } else {
+    actives = actives.filter(t => t !== type);
+  }
+
+  mapStateToDOM();
+}
+
+let mapStateToDOM = () => {
+  if (actives.length === 2) {
+    activeResultToggle = !activeResultToggle;
+
+    if (actives.includes("good") && actives.includes("cheap")) {
+      if (activeResultToggle) {
+        topicResult.textContent = "🐌";
+        topicResult2.textContent = "";
+      } else {
+        topicResult.textContent = "";
+        topicResult2.textContent = "🐌";
+      }
+
+      topicResult.style.backgroundColor = "cyan";
+      topicResult2.style.backgroundColor = "cyan";
+    } else if (actives.includes("good") && actives.includes("fast")) {
+      if (activeResultToggle) {
+        topicResult.textContent = "💰";
+        topicResult2.textContent = "";
+      } else {
+        topicResult.textContent = "";
+        topicResult2.textContent = "💰";
+      }
+
+      topicResult.style.backgroundColor = "hotpink";
+      topicResult2.style.backgroundColor = "hotpink";
+    } else {
+      if (activeResultToggle) {
+        topicResult.textContent = "💩";
+        topicResult2.textContent = "";
+      } else {
+        topicResult.textContent = "";
+        topicResult2.textContent = "💩";
+      }
+
+      topicResult.style.backgroundColor = "#fff000";
+      topicResult2.style.backgroundColor = "#fff000";
+    }
+    if (activeResultToggle) {
+      topicResult.classList.add("is-active");
+      topicResult2.classList.remove("is-active");
+      topicResult.style.zIndex = 1;
+      topicResult2.style.zIndex = 0;
+    } else {
+      topicResult.classList.remove("is-active");
+      topicResult2.classList.add("is-active");
+      topicResult.style.zIndex = 0;
+      topicResult2.style.zIndex = 1;
+    }
+  } else {
+    topicResult.classList.remove("is-active");
+    topicResult2.classList.remove("is-active");
+  }
+
+  topics.forEach(t => t.classList.remove("is-active"));
+  actives.forEach(active => {
+    topics.forEach(topic => {
+      // O(n*n) but we have few items
+      let topicType = topic.getAttribute("data-topic");
+      if (topicType === active) {
+        topic.classList.add("is-active");
+      }
+    });
+  });
+};
+
+let buttons = qsa(".js.btn");
+buttons.forEach(b => {
+  //  b.addEventListener("touchstart", onClick);
+  b.addEventListener("click", onClick);
+});
+
+function qs(expr, context) {
+  return (context || document).querySelector(expr);
+}
+function qsa(expr, context) {
+  return [].slice.call((context || document).querySelectorAll(expr), 0);
+}
diff --git a/gradient-ball-sketch/README.markdown b/gradient-ball-sketch/README.markdown
new file mode 100644
index 0000000..6d5dbbd
--- /dev/null
+++ b/gradient-ball-sketch/README.markdown
@@ -0,0 +1,5 @@
+# Gradient Ball Sketch
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/danarbello/pen/NWaPOPR](https://codepen.io/danarbello/pen/NWaPOPR).
+
+
diff --git a/gradient-ball-sketch/dist/index.html b/gradient-ball-sketch/dist/index.html
new file mode 100644
index 0000000..2e95228
--- /dev/null
+++ b/gradient-ball-sketch/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Gradient Ball Sketch</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:italic@1&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<section>
+  <h1>A hidden spark of the dream sleeps</h1>
+  <div class="ball">
+    <div class="noise"></div>
+    <canvas id="gradient" width="32" height="32">
+  </div>
+</section>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/gradient-ball-sketch/dist/script.js b/gradient-ball-sketch/dist/script.js
new file mode 100644
index 0000000..c47a024
--- /dev/null
+++ b/gradient-ball-sketch/dist/script.js
@@ -0,0 +1,35 @@
+// Created by Tiffany Rayside: https://codepen.io/tmrDevelops/pen/vOPZBv
+
+var c = document.getElementById('gradient');
+var $ = c.getContext('2d');
+
+
+var col = function(x, y, r, g, b) {
+  $.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
+  $.fillRect(x, y, 1,1);
+}
+var R = function(x, y, t) {
+  return( Math.floor(192 + 64*Math.cos( (x*x-y*y)/300 + t )) );
+}
+
+var G = function(x, y, t) {
+  return( Math.floor(192 + 64*Math.sin( (x*x*Math.cos(t/4)+y*y*Math.sin(t/3))/300 ) ) );
+}
+
+var B = function(x, y, t) {
+  return( Math.floor(192 + 64*Math.sin( 5*Math.sin(t/9) + ((x-100)*(x-100)+(y-100)*(y-100))/1100) ));
+}
+
+var t = 0;
+
+var run = function() {
+  for(x=0;x<=35;x++) {
+    for(y=0;y<=35;y++) {
+      col(x, y, R(x,y,t), G(x,y,t), B(x,y,t));
+    }
+  }
+  t = t + 0.06;
+  window.requestAnimationFrame(run);
+}
+
+run();
\ No newline at end of file
diff --git a/gradient-ball-sketch/dist/style.css b/gradient-ball-sketch/dist/style.css
new file mode 100644
index 0000000..036d0af
--- /dev/null
+++ b/gradient-ball-sketch/dist/style.css
@@ -0,0 +1,47 @@
+.ball {
+  position: relative;
+  flex-shrink: 0;
+  width: 38.197vw;
+  height: 38.197vw;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.noise {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+  filter: contrast(200%) brightness(1000%) grayscale(100%);
+}
+#gradient {
+  width: 100%;
+  height: 100%;
+}
+section {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  width: 80vw;
+  height: 100vh;
+}
+section h1 {
+  z-index: 1;
+  margin-right: -20vw;
+  mix-blend-mode: multiply;
+  color: rgba(0,0,0,0.8);
+  font-size: 7vw;
+  font-style: italic;
+  line-height: 0.92;
+  letter-spacing: -0.023em;
+  text-align: right;
+}
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "DM Serif Display";
+}
\ No newline at end of file
diff --git a/gradient-ball-sketch/license.txt b/gradient-ball-sketch/license.txt
new file mode 100644
index 0000000..55f8e43
--- /dev/null
+++ b/gradient-ball-sketch/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Dan Arbello (https://codepen.io/danarbello/pen/NWaPOPR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/gradient-ball-sketch/src/index.html b/gradient-ball-sketch/src/index.html
new file mode 100644
index 0000000..7ca6771
--- /dev/null
+++ b/gradient-ball-sketch/src/index.html
@@ -0,0 +1,8 @@
+<section>
+  <h1>A hidden spark of the dream sleeps</h1>
+  <div class="ball">
+    <div class="noise"></div>
+    <canvas id="gradient" width="32" height="32">
+  </div>
+</section>
+ 
\ No newline at end of file
diff --git a/gradient-ball-sketch/src/script.js b/gradient-ball-sketch/src/script.js
new file mode 100644
index 0000000..1888fe3
--- /dev/null
+++ b/gradient-ball-sketch/src/script.js
@@ -0,0 +1,35 @@
+// Created by Tiffany Rayside: https://codepen.io/tmrDevelops/pen/vOPZBv
+
+var c = document.getElementById('gradient');
+var $ = c.getContext('2d');
+
+
+var col = function(x, y, r, g, b) {
+  $.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
+  $.fillRect(x, y, 1,1);
+}
+var R = function(x, y, t) {
+  return( Math.floor(192 + 64*Math.cos( (x*x-y*y)/300 + t )) );
+}
+
+var G = function(x, y, t) {
+  return( Math.floor(192 + 64*Math.sin( (x*x*Math.cos(t/4)+y*y*Math.sin(t/3))/300 ) ) );
+}
+
+var B = function(x, y, t) {
+  return( Math.floor(192 + 64*Math.sin( 5*Math.sin(t/9) + ((x-100)*(x-100)+(y-100)*(y-100))/1100) ));
+}
+
+var t = 0;
+
+var run = function() {
+  for(x=0;x<=35;x++) {
+    for(y=0;y<=35;y++) {
+      col(x, y, R(x,y,t), G(x,y,t), B(x,y,t));
+    }
+  }
+  t = t + 0.06;
+  window.requestAnimationFrame(run);
+}
+
+run();
diff --git a/gradient-ball-sketch/src/style.styl b/gradient-ball-sketch/src/style.styl
new file mode 100644
index 0000000..2dd71ef
--- /dev/null
+++ b/gradient-ball-sketch/src/style.styl
@@ -0,0 +1,46 @@
+.ball
+  position relative
+  flex-shrink 0
+  width 38.197vw
+  height 38.197vw
+  border-radius 50%
+  overflow hidden
+  
+.noise
+  content ""
+  position absolute
+  top 0
+  right 0
+  bottom 0
+  left 0
+  background-image url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")
+  filter contrast(200%) brightness(1000%) grayscale(100%)
+  
+#gradient
+  width 100%
+  height 100%
+
+section
+  display flex
+  flex-wrap nowrap
+  align-items center
+  justify-content center
+  margin 0 auto
+  width 80vw
+  height 100vh
+  
+  h1
+    z-index 1
+    margin-right -20vw
+    mix-blend-mode multiply
+    color rgba(black, .8)
+    font-size 7vw
+    font-style italic
+    line-height .92
+    letter-spacing -.023em
+    text-align right
+
+body
+  margin 0
+  padding 0
+  font-family "DM Serif Display"
diff --git a/gradient-borders/LICENSE.txt b/gradient-borders/LICENSE.txt
new file mode 100644
index 0000000..bfbeda2
--- /dev/null
+++ b/gradient-borders/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 by Paco (https://codepen.io/pxco/pen/rNdWJzz)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/gradient-borders/README.md b/gradient-borders/README.md
new file mode 100644
index 0000000..9e20f5b
--- /dev/null
+++ b/gradient-borders/README.md
@@ -0,0 +1,4 @@
+# Gradient Borders
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pxco/pen/rNdWJzz](https://codepen.io/pxco/pen/rNdWJzz).
+
diff --git a/gradient-borders/dist/index.html b/gradient-borders/dist/index.html
new file mode 100644
index 0000000..de10372
--- /dev/null
+++ b/gradient-borders/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Gradient Borders</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div></div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/gradient-borders/dist/style.css b/gradient-borders/dist/style.css
new file mode 100644
index 0000000..a74da80
--- /dev/null
+++ b/gradient-borders/dist/style.css
@@ -0,0 +1,38 @@
+div {
+  background: none;
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  --size: 40px;
+  --gradient: linear-gradient(to top, #ff0844, #ffb199);
+  position: relative;
+}
+div::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: var(--size);
+  background: var(--gradient);
+  -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
+          mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+body {
+  background: linear-gradient(to bottom right, #434343, black);
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/gradient-borders/src/index.html b/gradient-borders/src/index.html
new file mode 100644
index 0000000..281c686
--- /dev/null
+++ b/gradient-borders/src/index.html
@@ -0,0 +1 @@
+<div></div>
\ No newline at end of file
diff --git a/gradient-borders/src/style.less b/gradient-borders/src/style.less
new file mode 100644
index 0000000..80a5237
--- /dev/null
+++ b/gradient-borders/src/style.less
@@ -0,0 +1,45 @@
+div {
+	background: none;
+	width: 200px;
+	height: 200px;
+	border-radius: 50%;
+	--size: 40px;
+	--gradient: linear-gradient(to top, #ff0844, #ffb199);
+
+	// 	Mixin code
+	position: relative;
+
+	&::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		padding: var(--size);
+		background: var(--gradient);
+		mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
+		-webkit-mask-composite: xor;
+		mask-composite: exclude;
+	}
+}
+
+// Reset
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	padding: 0;
+	margin: 0;
+}
+
+body {
+	background: linear-gradient(to bottom right, #434343, black);
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
diff --git a/gradient-shadows-oc-argyleink/README.markdown b/gradient-shadows-oc-argyleink/README.markdown
new file mode 100644
index 0000000..f00b75e
--- /dev/null
+++ b/gradient-shadows-oc-argyleink/README.markdown
@@ -0,0 +1,5 @@
+# gradient shadows (oc: @argyleink)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/spicypeppers/pen/dyRPwJB](https://codepen.io/spicypeppers/pen/dyRPwJB).
+
+
diff --git a/gradient-shadows-oc-argyleink/dist/index.html b/gradient-shadows-oc-argyleink/dist/index.html
new file mode 100644
index 0000000..ebd61b5
--- /dev/null
+++ b/gradient-shadows-oc-argyleink/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - gradient shadows (oc: @argyleink)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="sample-1"></div>
+<div class="sample-2"></div>
+<div class="sample-3"></div>
+<div class="sample-4"></div>
+<div class="sample-5"></div>
+<div class="sample-6"></div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/gradient-shadows-oc-argyleink/dist/style.css b/gradient-shadows-oc-argyleink/dist/style.css
new file mode 100644
index 0000000..7e078ab
--- /dev/null
+++ b/gradient-shadows-oc-argyleink/dist/style.css
@@ -0,0 +1,141 @@
+.sample-1 {
+  inline-size: 45vmin;
+  block-size: 35vmin;
+  background: linear-gradient(
+    to bottom right,
+    hsl(150 100% 50%),
+    hsl(190 100% 60%)
+  );
+  border-radius: 1rem;
+  position: relative;
+}
+.sample-1::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, hsl(150 100% 50%), hsl(190 100% 60%));
+  z-index: -1;
+  transform: translateY(15%) scale(0.85);
+  filter: blur(30px);
+}
+
+.sample-2 {
+  inline-size: 45vmin;
+  block-size: 35vmin;
+  background: linear-gradient(
+    to bottom right,
+    hsl(200 100% 60%),
+    hsl(240 100% 70%)
+  );
+  border-radius: 1rem;
+  position: relative;
+}
+.sample-2::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, hsl(200 100% 60%), hsl(240 100% 70%));
+  z-index: -1;
+  transform: translateY(15%) scale(0.85);
+  filter: blur(30px);
+}
+
+.sample-3 {
+  inline-size: 45vmin;
+  block-size: 35vmin;
+  background: linear-gradient(
+    to bottom right,
+    hsl(40 100% 60%),
+    hsl(80 100% 70%)
+  );
+  border-radius: 1rem;
+  position: relative;
+}
+.sample-3::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, hsl(40 100% 60%), hsl(80 100% 70%));
+  z-index: -1;
+  transform: translateY(15%) scale(0.85);
+  filter: blur(30px);
+}
+
+.sample-4 {
+  inline-size: 45vmin;
+  block-size: 35vmin;
+  background: linear-gradient(
+    to bottom right,
+    hsl(0 100% 60%),
+    hsl(40 100% 70%)
+  );
+  border-radius: 1rem;
+  position: relative;
+}
+.sample-4::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, hsl(0 100% 60%), hsl(40 100% 70%));
+  z-index: -1;
+  transform: translateY(15%) scale(0.85);
+  filter: blur(30px);
+}
+
+.sample-5 {
+  inline-size: 45vmin;
+  block-size: 35vmin;
+  background: linear-gradient(
+    to bottom right,
+    hsl(270 100% 60%),
+    hsl(310 100% 70%)
+  );
+  border-radius: 1rem;
+  position: relative;
+}
+.sample-5::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, hsl(270 100% 60%), hsl(310 100% 70%));
+  z-index: -1;
+  transform: translateY(15%) scale(0.85);
+  filter: blur(30px);
+}
+
+.sample-6 {
+  inline-size: 45vmin;
+  block-size: 35vmin;
+  background: linear-gradient(
+    to bottom right,
+    hsl(320 100% 60%),
+    hsl(360 100% 70%)
+  );
+  border-radius: 1rem;
+  position: relative;
+}
+.sample-6::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, hsl(320 100% 60%), hsl(360 100% 70%));
+  z-index: -1;
+  transform: translateY(15%) scale(0.85);
+  filter: blur(30px);
+}
+
+html {
+  block-size: 100%;
+}
+
+body {
+  min-block-size: 100%;
+  min-inline-size: 100%;
+  margin: 3rem;
+  box-sizing: border-box;
+  display: grid;
+  /*   place-content: center; */
+  font-family: system-ui, sans-serif;
+  gap: 0;
+  grid-template-columns: auto auto auto;
+}
\ No newline at end of file
diff --git a/gradient-shadows-oc-argyleink/license.txt b/gradient-shadows-oc-argyleink/license.txt
new file mode 100644
index 0000000..453e73e
--- /dev/null
+++ b/gradient-shadows-oc-argyleink/license.txt
@@ -0,0 +1,9 @@
+Copyright (c) 2021 by Peppers (https://codepen.io/spicypeppers/pen/dyRPwJB)
+Fork of an original work gradient shadow (https://codepen.io/argyleink/pen/WNxeBKa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/gradient-shadows-oc-argyleink/src/index.html b/gradient-shadows-oc-argyleink/src/index.html
new file mode 100644
index 0000000..ce05fba
--- /dev/null
+++ b/gradient-shadows-oc-argyleink/src/index.html
@@ -0,0 +1,6 @@
+<div class="sample-1"></div>
+<div class="sample-2"></div>
+<div class="sample-3"></div>
+<div class="sample-4"></div>
+<div class="sample-5"></div>
+<div class="sample-6"></div>
\ No newline at end of file
diff --git a/gradient-shadows-oc-argyleink/src/style.css b/gradient-shadows-oc-argyleink/src/style.css
new file mode 100644
index 0000000..272c228
--- /dev/null
+++ b/gradient-shadows-oc-argyleink/src/style.css
@@ -0,0 +1,141 @@
+.sample-1 {
+  inline-size: 45vmin;
+  block-size: 35vmin;
+  background: linear-gradient(
+    to bottom right,
+    hsl(150 100% 50%),
+    hsl(190 100% 60%)
+  );
+  border-radius: 1rem;
+  position: relative;
+}
+.sample-1::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, hsl(150 100% 50%), hsl(190 100% 60%));
+  z-index: -1;
+  transform: translateY(15%) scale(0.85);
+  filter: blur(30px);
+}
+
+.sample-2 {
+  inline-size: 45vmin;
+  block-size: 35vmin;
+  background: linear-gradient(
+    to bottom right,
+    hsl(200 100% 60%),
+    hsl(240 100% 70%)
+  );
+  border-radius: 1rem;
+  position: relative;
+}
+.sample-2::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, hsl(200 100% 60%), hsl(240 100% 70%));
+  z-index: -1;
+  transform: translateY(15%) scale(0.85);
+  filter: blur(30px);
+}
+
+.sample-3 {
+  inline-size: 45vmin;
+  block-size: 35vmin;
+  background: linear-gradient(
+    to bottom right,
+    hsl(40 100% 60%),
+    hsl(80 100% 70%)
+  );
+  border-radius: 1rem;
+  position: relative;
+}
+.sample-3::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, hsl(40 100% 60%), hsl(80 100% 70%));
+  z-index: -1;
+  transform: translateY(15%) scale(0.85);
+  filter: blur(30px);
+}
+
+.sample-4 {
+  inline-size: 45vmin;
+  block-size: 35vmin;
+  background: linear-gradient(
+    to bottom right,
+    hsl(0 100% 60%),
+    hsl(40 100% 70%)
+  );
+  border-radius: 1rem;
+  position: relative;
+}
+.sample-4::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, hsl(0 100% 60%), hsl(40 100% 70%));
+  z-index: -1;
+  transform: translateY(15%) scale(0.85);
+  filter: blur(30px);
+}
+
+.sample-5 {
+  inline-size: 45vmin;
+  block-size: 35vmin;
+  background: linear-gradient(
+    to bottom right,
+    hsl(270 100% 60%),
+    hsl(310 100% 70%)
+  );
+  border-radius: 1rem;
+  position: relative;
+}
+.sample-5::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, hsl(270 100% 60%), hsl(310 100% 70%));
+  z-index: -1;
+  transform: translateY(15%) scale(0.85);
+  filter: blur(30px);
+}
+
+.sample-6 {
+  inline-size: 45vmin;
+  block-size: 35vmin;
+  background: linear-gradient(
+    to bottom right,
+    hsl(320 100% 60%),
+    hsl(360 100% 70%)
+  );
+  border-radius: 1rem;
+  position: relative;
+}
+.sample-6::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, hsl(320 100% 60%), hsl(360 100% 70%));
+  z-index: -1;
+  transform: translateY(15%) scale(0.85);
+  filter: blur(30px);
+}
+
+html {
+  block-size: 100%;
+}
+
+body {
+  min-block-size: 100%;
+  min-inline-size: 100%;
+  margin: 3rem;
+  box-sizing: border-box;
+  display: grid;
+  /*   place-content: center; */
+  font-family: system-ui, sans-serif;
+  gap: 0;
+  grid-template-columns: auto auto auto;
+}
diff --git a/grainy-gradient-two-colors/README.markdown b/grainy-gradient-two-colors/README.markdown
new file mode 100644
index 0000000..4dfd893
--- /dev/null
+++ b/grainy-gradient-two-colors/README.markdown
@@ -0,0 +1,5 @@
+# Grainy Gradient, two colors
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/rauno/pen/XWzMxMJ](https://codepen.io/rauno/pen/XWzMxMJ).
+
+
diff --git a/grainy-gradient-two-colors/dist/index.html b/grainy-gradient-two-colors/dist/index.html
new file mode 100644
index 0000000..6bcdda3
--- /dev/null
+++ b/grainy-gradient-two-colors/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Grainy Gradient, two colors</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<section>
+  <div class="isolate">
+    <div class="noise"></div>
+    <div class="overlay"></div>
+  </div>
+</section>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/grainy-gradient-two-colors/dist/style.css b/grainy-gradient-two-colors/dist/style.css
new file mode 100644
index 0000000..5edc3c6
--- /dev/null
+++ b/grainy-gradient-two-colors/dist/style.css
@@ -0,0 +1,42 @@
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100vh;
+  background-color: powderblue;
+}
+
+section {
+  position: relative;
+  width: 400px;
+  height: 100px;
+  box-shadow: rgb(50 50 93 / 20%) 0px 30px 60px -12px, rgb(0 0 0 / 28%) 0px 18px 36px -18px;}
+
+.noise {
+  height: 100%;
+  background: linear-gradient(20deg, rebeccapurple, transparent), url(https://grainy-gradients.vercel.app/noise.svg);   
+  filter: contrast(170%) brightness(1000%);
+}
+
+/* Chrome-specific */
+@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
+  .noise {
+    filter: contrast(290%) brightness(1000%);
+  }
+}
+
+.isolate {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: moccasin;
+  mix-blend-mode: multiply;
+}
\ No newline at end of file
diff --git a/grainy-gradient-two-colors/license.txt b/grainy-gradient-two-colors/license.txt
new file mode 100644
index 0000000..efda6c8
--- /dev/null
+++ b/grainy-gradient-two-colors/license.txt
@@ -0,0 +1,9 @@
+Copyright (c) 2022 by Rauno (https://codepen.io/rauno/pen/XWzMxMJ)
+Fork of an original work Grainy Gradient, two colors (https://codepen.io/cjimmy/pen/vYmqvMR
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/grainy-gradient-two-colors/src/index.html b/grainy-gradient-two-colors/src/index.html
new file mode 100644
index 0000000..85c2771
--- /dev/null
+++ b/grainy-gradient-two-colors/src/index.html
@@ -0,0 +1,6 @@
+<section>
+  <div class="isolate">
+    <div class="noise"></div>
+    <div class="overlay"></div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/grainy-gradient-two-colors/src/style.css b/grainy-gradient-two-colors/src/style.css
new file mode 100644
index 0000000..5edc3c6
--- /dev/null
+++ b/grainy-gradient-two-colors/src/style.css
@@ -0,0 +1,42 @@
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100vh;
+  background-color: powderblue;
+}
+
+section {
+  position: relative;
+  width: 400px;
+  height: 100px;
+  box-shadow: rgb(50 50 93 / 20%) 0px 30px 60px -12px, rgb(0 0 0 / 28%) 0px 18px 36px -18px;}
+
+.noise {
+  height: 100%;
+  background: linear-gradient(20deg, rebeccapurple, transparent), url(https://grainy-gradients.vercel.app/noise.svg);   
+  filter: contrast(170%) brightness(1000%);
+}
+
+/* Chrome-specific */
+@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
+  .noise {
+    filter: contrast(290%) brightness(1000%);
+  }
+}
+
+.isolate {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: moccasin;
+  mix-blend-mode: multiply;
+}
\ No newline at end of file
diff --git a/granny-square-wallpapers-click-to-regenerate/README.markdown b/granny-square-wallpapers-click-to-regenerate/README.markdown
new file mode 100644
index 0000000..394cb83
--- /dev/null
+++ b/granny-square-wallpapers-click-to-regenerate/README.markdown
@@ -0,0 +1,5 @@
+# Granny Square Wallpapers (click to regenerate)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/sweaver2112/pen/dyGKLxy](https://codepen.io/sweaver2112/pen/dyGKLxy).
+
+
diff --git a/granny-square-wallpapers-click-to-regenerate/dist/index.html b/granny-square-wallpapers-click-to-regenerate/dist/index.html
new file mode 100644
index 0000000..2e39c3f
--- /dev/null
+++ b/granny-square-wallpapers-click-to-regenerate/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Granny Square Wallpapers (click to regenerate)</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="lds-dual-ring"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js'></script>
+<script src='https://code.jquery.com/jquery-3.5.1.slim.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/granny-square-wallpapers-click-to-regenerate/dist/script.js b/granny-square-wallpapers-click-to-regenerate/dist/script.js
new file mode 100644
index 0000000..c7a0280
--- /dev/null
+++ b/granny-square-wallpapers-click-to-regenerate/dist/script.js
@@ -0,0 +1,278 @@
+var body = document.querySelector("body");
+var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+var template = `<div class="container">
+  <div class="grid grid1">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid2">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid3">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid4">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid5">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid6">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid7">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid8">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid9">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid10">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+</div>`
+const blendModes = ["difference", "exclusion", "color-burn", "color-dodge"];
+
+body.addEventListener("click", function (ev) {
+  //$('.lds-dual-ring').show();
+  loadEverything()
+});  
+body.onload = ()=> {
+  loadEverything(true)
+}
+var globalIndex;
+var ITERATIONS;
+var WIDTH = isMobile? 50 : 70;
+function loadEverything(firstTime) {
+   
+    globalIndex=0;//counts each pattern as one iteration
+    $('.container').remove()
+    body.style.filter = chance(.8)? "sepia(80%)" : "";
+    //body.style.filter = chance(.85)? "grayscale(80%)" : body.style.filter;
+    globals = {}
+    globals.bigMode = chance(.7)
+    globals.smallMode = !globals.bigMode && chance(.8)
+    if(!isMobile && globals.bigMode) WIDTH = 100
+    if(globals.smallMode) WIDTH = 40
+    
+    let SIZ = WIDTH+10;  //rougly cell size plus varying padding.
+    ITERATIONS = 1.2* Math.floor(body.clientWidth/SIZ)*Math.floor(body.clientHeight/SIZ);
+    //if(ITERATIONS>300) ITERATIONS=300;
+   
+    globals.everyOther = chance()//use color1 for odd and color2 for even
+    globals.multiColor = firstTime || chance(.7)
+    globals.quiltMode = firstTime || chance(.65)
+    globals.c1 = tinycolor.random().toHexString()
+    globals.c2 = chance(.8) ? globals.c1 : tinycolor.random().toHexString()
+    globals.useGlobalOptions = chance(.7)
+    globals.containerBorders = chance(.85)
+    globals.containerBorderWidth = getRandomInt(5,15)
+    globals.containerBorderColor = globals.c1;
+    globals.containerBorderStyle = pick(["double"])
+  
+    globals = getPatternLevelOptions(globals);
+    globals.mixBlend = pick(blendModes)
+  
+    globals.padding = isMobile || globals.quiltMode ? pick([.5,.75,1]) : pick([.75,1,2,3,4])
+    body.style.backgroundColor = pick([tinycolor(globals.c1).lighten(40).toHexString(), tinycolor(globals.c1).darken(30).toHexString(), "beige", tinycolor(globals.c1).darken(60).toHexString()])
+    for(let i=0;i<ITERATIONS;i++){
+      let el = $(template)[0];
+      el.style.width = WIDTH+"px"
+      el.style.height = WIDTH+"px"
+      el.style.padding = globals.padding+"em"
+      body.append(el)
+      makeAFlower(el,globals)
+      globalIndex++
+    }
+    $('.lds-dual-ring').hide();
+  }
+function getPatternLevelOptions(options){
+    
+    options.invert = chance(.7);
+    options.mixBlend = chance(.2) ? pick(["difference", "difference", "exclusion", "overlay"]) : pick(blendModes);//(for inner divs)
+    options.straightEdges = chance(.65);
+    options.circlesOnly = !options.straightEdges && chance(.9);
+    options.solidBorders = chance(.7);
+    options.doubleBorders = !options.solidBorders && chance(.7);
+    options.cross = chance(.7);
+    options.halfMoons = chance(.3);
+    options.moonPercent = chance() ? ".65" : ".85";
+    options.allowOuterBorders = !options.cross && chance(.8)
+    options.boxShadow = false;//options.allowOuterBorders && chance()
+    options.allowInnerBorders = !options.allowOuterBorders || (options.allowOuterBorders && chance(.1));
+    options.x = !options.cross && chance(.8);
+    options.clockwise = pick([45,-45])
+    options.cyclone = options.allowOuterBorders && options.allowInnerBorders && chance(.7)
+    options.minWidth = chance() ? getRandomInt(40,50) : getRandomInt(0,50)
+    options.maxWidth =  chance() ? getRandomInt(50,60) : getRandomInt(50,100)
+    options.minBorderWidth = options.smallMode || chance() ? 1 : getRandomInt(1,7)
+    options.maxBorderWidth = options.smallMode ? 8 : options.bigMode ? 15 : getRandomInt(5,15)
+    
+    return options;
+  }
+
+function makeAFlower(container, options) {
+  
+  if(!options.useGlobalOptions) options = getPatternLevelOptions(options); 
+  //if(options.invert) container.style.filter = `invert(100%)`
+  if(options.containerBorders) container.style.border = `${options.containerBorderWidth}px ${options.containerBorderStyle} ${options.containerBorderColor}`
+  
+  container.style.mixBlendMode = options.useGlobalOptions ? options.mixBlend : chance() ? "normal" : pick(blendModes);
+  if(options.quiltMode) {
+    if(options.multiColor) {
+      container.style.backgroundColor = pick([options.c1,options.c2])
+    } else {
+      if(globalIndex%2==0) container.style.backgroundColor = options.c2;
+    }
+  }
+  drawGrid(container,".grid1", options);
+  drawGrid(container,".grid2", options);
+  drawGrid(container,".grid3", options);
+  drawGrid(container,".grid4", options);
+  drawGrid(container,".grid5", options);
+  if(chance(.2)) { 
+    drawGrid(container,".grid6", options);
+    drawGrid(container,".grid7", options);
+    drawGrid(container,".grid8", options);
+    drawGrid(container,".grid9", options);
+    drawGrid(container,".grid10", options);
+  }
+  
+}
+
+function drawGrid(container, id, options) {
+
+  var grid = container.querySelector(id);
+  grid.style.width = WIDTH+"px"
+  grid.style.height = WIDTH+"px"
+  grid.style.filter = (chance() ? "invert(0%)" : "invert(100%)");
+  var angles = options.cross ? [0] : options.x ? [45] : [0,45];
+  
+  grid.style.transform = `rotate(${pick(angles)}deg) scale(${Math.random()*.8+.2})`;
+  var els =  [...grid.querySelectorAll(".ul, .ur, .bl, .br")]
+  var w = getRandomInt(options.minWidth,options.maxWidth);
+  var borderSize = getRandomInt(options.minBorderWidth,options.maxBorderWidth);
+  var borderRadius = getRandomInt(options.circlesOnly?50:0,options.straightEdges?0:50);
+  var borderStyle = options.solidBorders ? "solid" : options.doubleBorders ? "double" : pick(["double" ,"solid"]);
+  var moonPercent = chance(options.moonPercent);
+  
+  let color;
+  if(options.multiColor) {
+    options.c1 = tinycolor.random().toHexString();
+    options.c2 = tinycolor.random().toHexString();
+  }
+  if(options.everyOther){
+    color = globalIndex%2==0?options.c1:options.c2;
+  } else {
+    color = pick([options.c1,options.c2]);
+  }
+  els.forEach((el,i) => {
+    if(options.cyclone) el.style.transform = `rotate(${options.clockwise}deg)`;
+    el.style.mixBlendMode = options.mixBlend;
+    el.style.width = w+'%';
+    el.style.height = w+'%';
+    el.style.borderWidth = borderSize+"px";
+    el.style.borderColor = color;
+    el.style.borderStyle = borderStyle;
+    el.style.borderRadius = borderRadius+"%";
+    if(options.boxShadow) el.style.boxShadow = `0 0 ${getRandomInt(1,10)}px ${options.c2}`
+    
+    //crucifix mode not in use (almost looks cool)
+    if(false && (options.useGlobalOptions && options.cross)) {
+      if(el.className=="ul"||el.className=="ur"){
+        el.style.height = (w-20)+"%";  
+      } else {
+        el.style.height =(w+20)+'%'
+      }
+    }
+    if(options.halfMoons) {
+      if(options.invert) {
+        if(moonPercent) grid.style.filter = "invert(100%)";
+      } else {
+        if(moonPercent) grid.style.filter = "invert(0%)";
+      } 
+    }
+    //disable inner
+    if(!options.allowInnerBorders) switch(el.className) {
+        case "ul":
+          el.style.borderBottom = "none";
+          el.style.borderRight = "none";
+          break;
+        case "ur":
+          el.style.borderBottom = "none";
+          el.style.borderLeft= "none";
+          break;
+        case "bl":
+          el.style.borderTop = "none";
+          el.style.borderRight = "none";
+          break;
+        case "br":
+          el.style.borderLeft = "none";
+          el.style.borderTop = "none";
+          break;
+      }
+    //disables outer borders
+     if(!options.allowOuterBorders) switch(el.className) {
+        case "ul":
+          el.style.borderTop = "none";
+          el.style.borderLeft = "none";
+          break;
+        case "ur":
+          el.style.borderTop = "none";
+          el.style.borderRight = "none";
+          break;
+        case "bl":
+          el.style.borderBottom = "none";
+          el.style.borderLeft = "none";
+          break;
+        case "br":
+          el.style.borderBottom = "none";
+          el.style.borderRight = "none";
+          break;
+      }
+  })
+}
+
+function getRandomInt(min, max) {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+function pick(arr) {
+  return arr[Math.floor(Math.random() * arr.length)]
+}
+function chance(threshold=.5){  
+  //todo:change to less than so it makes more sense.
+  return Math.random()>threshold;
+}
\ No newline at end of file
diff --git a/granny-square-wallpapers-click-to-regenerate/dist/style.css b/granny-square-wallpapers-click-to-regenerate/dist/style.css
new file mode 100644
index 0000000..1be47cc
--- /dev/null
+++ b/granny-square-wallpapers-click-to-regenerate/dist/style.css
@@ -0,0 +1,73 @@
+body {
+
+    background-color: black;
+    overflow: hidden;
+    height:100vh;
+    width:100vw;
+    color:black;    
+    padding:0px;  
+    display: flex;
+    flex-direction:row;
+    flex-wrap:wrap;
+    justify-content:space-evenly;
+    align-items:center;
+    
+  }
+.container {
+  position:relative;
+  display:flex;
+  justify-content:center;
+  flex: 1 1 auto;
+}
+.grid {
+  position:absolute;
+  flex: 1 1 auto;
+}
+.grid div {
+  position:absolute;
+}
+.ul {
+  top:0;
+  left:0;
+}
+.ur {
+  top:0;
+  right:0;
+}
+.bl{
+  bottom:0;
+  left:0;
+}
+.br{
+  bottom:0;
+  right:0;
+}
+
+/*https://loading.io/css/*/
+.lds-dual-ring {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  position:absolute;
+  top:49%;
+  left:49%;
+}
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border-radius: 50%;
+  border: 6px solid #fff;
+  border-color: #fff transparent #fff transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/granny-square-wallpapers-click-to-regenerate/license.txt b/granny-square-wallpapers-click-to-regenerate/license.txt
new file mode 100644
index 0000000..bb628ec
--- /dev/null
+++ b/granny-square-wallpapers-click-to-regenerate/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Scott Weaver (https://codepen.io/sweaver2112/pen/dyGKLxy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/granny-square-wallpapers-click-to-regenerate/src/index.html b/granny-square-wallpapers-click-to-regenerate/src/index.html
new file mode 100644
index 0000000..7cbe2c0
--- /dev/null
+++ b/granny-square-wallpapers-click-to-regenerate/src/index.html
@@ -0,0 +1 @@
+<div class="lds-dual-ring"></div>
\ No newline at end of file
diff --git a/granny-square-wallpapers-click-to-regenerate/src/script.js b/granny-square-wallpapers-click-to-regenerate/src/script.js
new file mode 100644
index 0000000..298bece
--- /dev/null
+++ b/granny-square-wallpapers-click-to-regenerate/src/script.js
@@ -0,0 +1,279 @@
+var body = document.querySelector("body");
+var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+var template = `<div class="container">
+  <div class="grid grid1">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid2">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid3">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid4">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid5">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid6">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid7">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid8">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid9">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+  <div class="grid grid10">
+    <div class="ul"></div>
+    <div class="ur"></div>
+    <div class="bl"></div>
+    <div class="br"></div>
+  </div>
+</div>`
+const blendModes = ["difference", "exclusion", "color-burn", "color-dodge"];
+
+body.addEventListener("click", function (ev) {
+  //$('.lds-dual-ring').show();
+  loadEverything()
+});  
+body.onload = ()=> {
+  loadEverything(true)
+}
+var globalIndex;
+var ITERATIONS;
+var WIDTH = isMobile? 50 : 70;
+function loadEverything(firstTime) {
+   
+    globalIndex=0;//counts each pattern as one iteration
+    $('.container').remove()
+    body.style.filter = chance(.8)? "sepia(80%)" : "";
+    //body.style.filter = chance(.85)? "grayscale(80%)" : body.style.filter;
+    globals = {}
+    globals.bigMode = chance(.7)
+    globals.smallMode = !globals.bigMode && chance(.8)
+    if(!isMobile && globals.bigMode) WIDTH = 100
+    if(globals.smallMode) WIDTH = 40
+    
+    let SIZ = WIDTH+10;  //rougly cell size plus varying padding.
+    ITERATIONS = 1.2* Math.floor(body.clientWidth/SIZ)*Math.floor(body.clientHeight/SIZ);
+    //if(ITERATIONS>300) ITERATIONS=300;
+   
+    globals.everyOther = chance()//use color1 for odd and color2 for even
+    globals.multiColor = firstTime || chance(.7)
+    globals.quiltMode = firstTime || chance(.65)
+    globals.c1 = tinycolor.random().toHexString()
+    globals.c2 = chance(.8) ? globals.c1 : tinycolor.random().toHexString()
+    globals.useGlobalOptions = chance(.7)
+    globals.containerBorders = chance(.85)
+    globals.containerBorderWidth = getRandomInt(5,15)
+    globals.containerBorderColor = globals.c1;
+    globals.containerBorderStyle = pick(["double"])
+  
+    globals = getPatternLevelOptions(globals);
+    globals.mixBlend = pick(blendModes)
+  
+    globals.padding = isMobile || globals.quiltMode ? pick([.5,.75,1]) : pick([.75,1,2,3,4])
+    body.style.backgroundColor = pick([tinycolor(globals.c1).lighten(40).toHexString(), tinycolor(globals.c1).darken(30).toHexString(), "beige", tinycolor(globals.c1).darken(60).toHexString()])
+    for(let i=0;i<ITERATIONS;i++){
+      let el = $(template)[0];
+      el.style.width = WIDTH+"px"
+      el.style.height = WIDTH+"px"
+      el.style.padding = globals.padding+"em"
+      body.append(el)
+      makeAFlower(el,globals)
+      globalIndex++
+    }
+    $('.lds-dual-ring').hide();
+  }
+function getPatternLevelOptions(options){
+    
+    options.invert = chance(.7);
+    options.mixBlend = chance(.2) ? pick(["difference", "difference", "exclusion", "overlay"]) : pick(blendModes);//(for inner divs)
+    options.straightEdges = chance(.65);
+    options.circlesOnly = !options.straightEdges && chance(.9);
+    options.solidBorders = chance(.7);
+    options.doubleBorders = !options.solidBorders && chance(.7);
+    options.cross = chance(.7);
+    options.halfMoons = chance(.3);
+    options.moonPercent = chance() ? ".65" : ".85";
+    options.allowOuterBorders = !options.cross && chance(.8)
+    options.boxShadow = false;//options.allowOuterBorders && chance()
+    options.allowInnerBorders = !options.allowOuterBorders || (options.allowOuterBorders && chance(.1));
+    options.x = !options.cross && chance(.8);
+    options.clockwise = pick([45,-45])
+    options.cyclone = options.allowOuterBorders && options.allowInnerBorders && chance(.7)
+    options.minWidth = chance() ? getRandomInt(40,50) : getRandomInt(0,50)
+    options.maxWidth =  chance() ? getRandomInt(50,60) : getRandomInt(50,100)
+    options.minBorderWidth = options.smallMode || chance() ? 1 : getRandomInt(1,7)
+    options.maxBorderWidth = options.smallMode ? 8 : options.bigMode ? 15 : getRandomInt(5,15)
+    
+    return options;
+  }
+
+function makeAFlower(container, options) {
+  
+  if(!options.useGlobalOptions) options = getPatternLevelOptions(options); 
+  //if(options.invert) container.style.filter = `invert(100%)`
+  if(options.containerBorders) container.style.border = `${options.containerBorderWidth}px ${options.containerBorderStyle} ${options.containerBorderColor}`
+  
+  container.style.mixBlendMode = options.useGlobalOptions ? options.mixBlend : chance() ? "normal" : pick(blendModes);
+  if(options.quiltMode) {
+    if(options.multiColor) {
+      container.style.backgroundColor = pick([options.c1,options.c2])
+    } else {
+      if(globalIndex%2==0) container.style.backgroundColor = options.c2;
+    }
+  }
+  drawGrid(container,".grid1", options);
+  drawGrid(container,".grid2", options);
+  drawGrid(container,".grid3", options);
+  drawGrid(container,".grid4", options);
+  drawGrid(container,".grid5", options);
+  if(chance(.2)) { 
+    drawGrid(container,".grid6", options);
+    drawGrid(container,".grid7", options);
+    drawGrid(container,".grid8", options);
+    drawGrid(container,".grid9", options);
+    drawGrid(container,".grid10", options);
+  }
+  
+}
+
+function drawGrid(container, id, options) {
+
+  var grid = container.querySelector(id);
+  grid.style.width = WIDTH+"px"
+  grid.style.height = WIDTH+"px"
+  grid.style.filter = (chance() ? "invert(0%)" : "invert(100%)");
+  var angles = options.cross ? [0] : options.x ? [45] : [0,45];
+  
+  grid.style.transform = `rotate(${pick(angles)}deg) scale(${Math.random()*.8+.2})`;
+  var els =  [...grid.querySelectorAll(".ul, .ur, .bl, .br")]
+  var w = getRandomInt(options.minWidth,options.maxWidth);
+  var borderSize = getRandomInt(options.minBorderWidth,options.maxBorderWidth);
+  var borderRadius = getRandomInt(options.circlesOnly?50:0,options.straightEdges?0:50);
+  var borderStyle = options.solidBorders ? "solid" : options.doubleBorders ? "double" : pick(["double" ,"solid"]);
+  var moonPercent = chance(options.moonPercent);
+  
+  let color;
+  if(options.multiColor) {
+    options.c1 = tinycolor.random().toHexString();
+    options.c2 = tinycolor.random().toHexString();
+  }
+  if(options.everyOther){
+    color = globalIndex%2==0?options.c1:options.c2;
+  } else {
+    color = pick([options.c1,options.c2]);
+  }
+  els.forEach((el,i) => {
+    if(options.cyclone) el.style.transform = `rotate(${options.clockwise}deg)`;
+    el.style.mixBlendMode = options.mixBlend;
+    el.style.width = w+'%';
+    el.style.height = w+'%';
+    el.style.borderWidth = borderSize+"px";
+    el.style.borderColor = color;
+    el.style.borderStyle = borderStyle;
+    el.style.borderRadius = borderRadius+"%";
+    if(options.boxShadow) el.style.boxShadow = `0 0 ${getRandomInt(1,10)}px ${options.c2}`
+    
+    //crucifix mode not in use (almost looks cool)
+    if(false && (options.useGlobalOptions && options.cross)) {
+      if(el.className=="ul"||el.className=="ur"){
+        el.style.height = (w-20)+"%";  
+      } else {
+        el.style.height =(w+20)+'%'
+      }
+    }
+    if(options.halfMoons) {
+      if(options.invert) {
+        if(moonPercent) grid.style.filter = "invert(100%)";
+      } else {
+        if(moonPercent) grid.style.filter = "invert(0%)";
+      } 
+    }
+    //disable inner
+    if(!options.allowInnerBorders) switch(el.className) {
+        case "ul":
+          el.style.borderBottom = "none";
+          el.style.borderRight = "none";
+          break;
+        case "ur":
+          el.style.borderBottom = "none";
+          el.style.borderLeft= "none";
+          break;
+        case "bl":
+          el.style.borderTop = "none";
+          el.style.borderRight = "none";
+          break;
+        case "br":
+          el.style.borderLeft = "none";
+          el.style.borderTop = "none";
+          break;
+      }
+    //disables outer borders
+     if(!options.allowOuterBorders) switch(el.className) {
+        case "ul":
+          el.style.borderTop = "none";
+          el.style.borderLeft = "none";
+          break;
+        case "ur":
+          el.style.borderTop = "none";
+          el.style.borderRight = "none";
+          break;
+        case "bl":
+          el.style.borderBottom = "none";
+          el.style.borderLeft = "none";
+          break;
+        case "br":
+          el.style.borderBottom = "none";
+          el.style.borderRight = "none";
+          break;
+      }
+  })
+}
+
+function getRandomInt(min, max) {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+function pick(arr) {
+  return arr[Math.floor(Math.random() * arr.length)]
+}
+function chance(threshold=.5){  
+  //todo:change to less than so it makes more sense.
+  return Math.random()>threshold;
+}
+       
\ No newline at end of file
diff --git a/granny-square-wallpapers-click-to-regenerate/src/style.css b/granny-square-wallpapers-click-to-regenerate/src/style.css
new file mode 100644
index 0000000..292d8be
--- /dev/null
+++ b/granny-square-wallpapers-click-to-regenerate/src/style.css
@@ -0,0 +1,73 @@
+  body {
+
+    background-color: black;
+    overflow: hidden;
+    height:100vh;
+    width:100vw;
+    color:black;    
+    padding:0px;  
+    display: flex;
+    flex-direction:row;
+    flex-wrap:wrap;
+    justify-content:space-evenly;
+    align-items:center;
+    
+  }
+.container {
+  position:relative;
+  display:flex;
+  justify-content:center;
+  flex: 1 1 auto;
+}
+.grid {
+  position:absolute;
+  flex: 1 1 auto;
+}
+.grid div {
+  position:absolute;
+}
+.ul {
+  top:0;
+  left:0;
+}
+.ur {
+  top:0;
+  right:0;
+}
+.bl{
+  bottom:0;
+  left:0;
+}
+.br{
+  bottom:0;
+  right:0;
+}
+
+/*https://loading.io/css/*/
+.lds-dual-ring {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  position:absolute;
+  top:49%;
+  left:49%;
+}
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border-radius: 50%;
+  border: 6px solid #fff;
+  border-color: #fff transparent #fff transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/grayscale-bytestiny-code-monochrome-composition-study/README.markdown b/grayscale-bytestiny-code-monochrome-composition-study/README.markdown
new file mode 100644
index 0000000..4db8993
--- /dev/null
+++ b/grayscale-bytestiny-code-monochrome-composition-study/README.markdown
@@ -0,0 +1,11 @@
+# Grayscale Bytes  - Tiny code monochrome composition study
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/KilledByAPixel/pen/NWaxdjg](https://codepen.io/KilledByAPixel/pen/NWaxdjg).
+
+Experimenting with generative compositions using only a tiny bit of code.
+
+Code is based on my 140 byte dweet: https://www.dwitter.net/d/24449
+
+FxHash: https://www.fxhash.xyz/generative/2370
+
+
diff --git a/grayscale-bytestiny-code-monochrome-composition-study/dist/index.html b/grayscale-bytestiny-code-monochrome-composition-study/dist/index.html
new file mode 100644
index 0000000..608534f
--- /dev/null
+++ b/grayscale-bytestiny-code-monochrome-composition-study/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Grayscale Bytes  - Tiny code monochrome composition study</title>
+  
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/grayscale-bytestiny-code-monochrome-composition-study/dist/script.js b/grayscale-bytestiny-code-monochrome-composition-study/dist/script.js
new file mode 100644
index 0000000..b85f556
--- /dev/null
+++ b/grayscale-bytestiny-code-monochrome-composition-study/dist/script.js
@@ -0,0 +1,10 @@
+/*
+Grayscale Bytes by Frank Force
+Tiny code monochrome composition study.
+Code is based on my 140 byte dweet.
+https://www.dwitter.net/d/24449
+https://www.fxhash.xyz/generative/2370
+*/
+
+
+document.body.appendChild(t=document.createElement`canvas`);t.width=1920,t.height=1080,t.style="position:absolute;transform:translate(-50%,-50%);top:50%;left:50%",document.body.style="background:#111;margin:0;overflow:hidden";e=Math.random,a=document.createElement`canvas`;a.width=t.width,a.height=t.height;i=0,h=0,n=0,l=a.getContext`2d`,o=Math.sin,d=((t,e,a,i=1)=>`rgba(${0|t},${0|e},${0|a},${i})`),r=e=>{if(requestAnimationFrame(r),e<n-2)return;n=Math.max(n+1e3/60,e);for(let t=3;t--;)i=h++/60,60*i|0==h-2&&(i+=1e-6),C(i);t.width|=0;let l=t.getContext`2d`;l.save(),l.fillStyle=g?m:w,l.fillRect(0,0,t.width,t.height),l.rect(x,x,t.width-2*x,t.height-2*x),l.clip(),l.drawImage(a,0,0),l.restore(),l.globalAlpha=p?.2:.1,l.drawImage(v,0,0,t.width,t.height);const o=1920/1080>innerWidth/innerHeight?innerWidth:innerHeight*(1920/1080);t.style.width=o+"px"},c=(t=1)=>e()*t|0,g=e()<.5,s=e()<.5,f=s&&e()<.4,m=s?d(99*e(),99*e(),99*e()):"#000",w=s?d(255-99*e(),255-99*e(),255-99*e()):"#fff",u=e()<.8,M=u&&e()<.4,p=e()<.2,y=e()<.3,b=e()<.8,I=e()<.5;I&&e();const v=document.createElement`canvas`;{let e=b?2:4;v.width=t.width/e,v.height=t.height/e;let a=new ImageData(v.width,v.height);for(let t=0;t<a.data.length;t+=4){let e=255*Math.random();for(let i=4;i--;)a.data[t+i]=3==i?255:y?255*Math.random():e}v.getContext`2d`.putImageData(a,0,0)}let x=I?50:0;const C=a=>{if(a>10)return;if(a||(l.fillStyle=g?m:w,l.fillRect(0,0,t.width,t.height),u&&l.rotate(c(2e3))),f&&(e()<.05||0==a)){let t=d(255*e(),255*e(),255*e());g?w=t:m=t}l.fillStyle=g?w:m;let i=(c(6e3)-3e3)/2|0,n=(c(6e3)-3e3)/2|0,r=c(350),s=c(350),p=c(s),y=c(1e6);M&&h%120==0&&l.rotate(c(1)*Math.PI/2+Math.PI/4);for(let t=s*r;t--;)l.fillRect(i+t%s,n+t/s,o(a),o((t*y|0)%p)/a/a)};r()
\ No newline at end of file
diff --git a/grayscale-bytestiny-code-monochrome-composition-study/license.txt b/grayscale-bytestiny-code-monochrome-composition-study/license.txt
new file mode 100644
index 0000000..f8cf568
--- /dev/null
+++ b/grayscale-bytestiny-code-monochrome-composition-study/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Frank Force (https://codepen.io/KilledByAPixel/pen/NWaxdjg)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/grayscale-bytestiny-code-monochrome-composition-study/src/index.html b/grayscale-bytestiny-code-monochrome-composition-study/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/grayscale-bytestiny-code-monochrome-composition-study/src/script.js b/grayscale-bytestiny-code-monochrome-composition-study/src/script.js
new file mode 100644
index 0000000..b85f556
--- /dev/null
+++ b/grayscale-bytestiny-code-monochrome-composition-study/src/script.js
@@ -0,0 +1,10 @@
+/*
+Grayscale Bytes by Frank Force
+Tiny code monochrome composition study.
+Code is based on my 140 byte dweet.
+https://www.dwitter.net/d/24449
+https://www.fxhash.xyz/generative/2370
+*/
+
+
+document.body.appendChild(t=document.createElement`canvas`);t.width=1920,t.height=1080,t.style="position:absolute;transform:translate(-50%,-50%);top:50%;left:50%",document.body.style="background:#111;margin:0;overflow:hidden";e=Math.random,a=document.createElement`canvas`;a.width=t.width,a.height=t.height;i=0,h=0,n=0,l=a.getContext`2d`,o=Math.sin,d=((t,e,a,i=1)=>`rgba(${0|t},${0|e},${0|a},${i})`),r=e=>{if(requestAnimationFrame(r),e<n-2)return;n=Math.max(n+1e3/60,e);for(let t=3;t--;)i=h++/60,60*i|0==h-2&&(i+=1e-6),C(i);t.width|=0;let l=t.getContext`2d`;l.save(),l.fillStyle=g?m:w,l.fillRect(0,0,t.width,t.height),l.rect(x,x,t.width-2*x,t.height-2*x),l.clip(),l.drawImage(a,0,0),l.restore(),l.globalAlpha=p?.2:.1,l.drawImage(v,0,0,t.width,t.height);const o=1920/1080>innerWidth/innerHeight?innerWidth:innerHeight*(1920/1080);t.style.width=o+"px"},c=(t=1)=>e()*t|0,g=e()<.5,s=e()<.5,f=s&&e()<.4,m=s?d(99*e(),99*e(),99*e()):"#000",w=s?d(255-99*e(),255-99*e(),255-99*e()):"#fff",u=e()<.8,M=u&&e()<.4,p=e()<.2,y=e()<.3,b=e()<.8,I=e()<.5;I&&e();const v=document.createElement`canvas`;{let e=b?2:4;v.width=t.width/e,v.height=t.height/e;let a=new ImageData(v.width,v.height);for(let t=0;t<a.data.length;t+=4){let e=255*Math.random();for(let i=4;i--;)a.data[t+i]=3==i?255:y?255*Math.random():e}v.getContext`2d`.putImageData(a,0,0)}let x=I?50:0;const C=a=>{if(a>10)return;if(a||(l.fillStyle=g?m:w,l.fillRect(0,0,t.width,t.height),u&&l.rotate(c(2e3))),f&&(e()<.05||0==a)){let t=d(255*e(),255*e(),255*e());g?w=t:m=t}l.fillStyle=g?w:m;let i=(c(6e3)-3e3)/2|0,n=(c(6e3)-3e3)/2|0,r=c(350),s=c(350),p=c(s),y=c(1e6);M&&h%120==0&&l.rotate(c(1)*Math.PI/2+Math.PI/4);for(let t=s*r;t--;)l.fillRect(i+t%s,n+t/s,o(a),o((t*y|0)%p)/a/a)};r()
\ No newline at end of file
diff --git a/grid-based-blog-index-page-layout/README.markdown b/grid-based-blog-index-page-layout/README.markdown
new file mode 100644
index 0000000..7f0742e
--- /dev/null
+++ b/grid-based-blog-index-page-layout/README.markdown
@@ -0,0 +1,5 @@
+# Grid-Based Blog Index Page Layout 🌷
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/sheelah/pen/abNqvBz](https://codepen.io/sheelah/pen/abNqvBz).
+
+A mock blog index page using CSS grid
diff --git a/grid-based-blog-index-page-layout/dist/index.html b/grid-based-blog-index-page-layout/dist/index.html
new file mode 100644
index 0000000..23fb1ab
--- /dev/null
+++ b/grid-based-blog-index-page-layout/dist/index.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Grid-Based Blog Index Page Layout 🌷</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap&family=Nunito&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg class="flower-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 2646 2526">
+  <defs>
+    <style>.cls-2{fill:#a2ad92}.cls-3{fill:#dbb4ad}.cls-4{fill:#feef99}.cls-5{fill:#fcd69a}.cls-6{fill:#bc8484}.cls-7{fill:#fff}.cls-8{fill:#ffe2dd}.cls-9{fill:#db8398}.cls-10{fill:#fce3df}.cls-11{fill:#667d66}.cls-12{fill:#935769}</style>
+  </defs>
+  <symbol id="flower-path">
+    <path class="cls-2" d="M711 835.41c-2.8 5.67-7 14.18-11.51 22.63-1.24 2.34-2.69 4.64-4.09 6.87l-.38.59c-.59.94-1.19 1.88-1.76 2.84-1.39 2.31-2.93 4.63-4.29 6.67l-.34.53-1.06 1.58c-.76 1-1.49 2.08-2.22 3.14-1.69 2.45-3.35 4.84-5.13 7-1 1.18-1.9 2.37-2.83 3.57-2.12 2.69-4.19 5.33-6.39 7.75l-3.4 3.74-3.33 3.68-.94 1c-.83 1-1.68 1.89-2.58 2.76l-7.37 7.24-3.74 3.62q-7.12 6.2-14.31 12.34l-2.17 1.87-.25.22c-8.29 7.12-16.85 14.48-25.2 21.82-6.21 5.45-12.82 11.33-19.07 17.42-4 3.87-7.89 7.83-11.68 11.65q-3.09 3.14-6.21 6.26c-8.1 8.1-14.73 14.65-20.87 20.62-5.16 5-10.18 10.07-15.74 15.68l-3.91 3.94c-8.52 8.6-17 17.57-25.12 26.26l-.72.76-9.16 9.74q-20.13 21.28-40.39 42.47c-1.75 1.83-3.5 3.63-5.26 5.44l-2.33 2.41c-1 1-1.95 2-2.93 3l-.27.28c-2 2-4.12 4.17-6.07 6.34q-2.57 2.87-5.15 5.7c-4.29 4.72-8.68 9.56-12.85 14.51-11.24 13.38-24.27 29-36.6 45-6.21 8.06-12.41 16.31-17.75 23.41-1.59 2.12-3.11 4.35-4.57 6.5l-.31.46-.88 1.3q-1.38 2-2.8 4c-2 2.91-4.3 6.18-6.35 9.48l-7.39 11.91-1.29 2.06-.23.35c-1.45 2.33-3 4.74-4.3 7.19l-2.79 5.15-.18.31c-3.36 6.19-6.83 12.57-10.15 18.9-8.55 16.33-17.15 32.92-26.28 50.71q-6.72 13.1-13.33 26.24c-2.76 5.48-5.42 11.14-8 16.62l-.42.88-2.78 5.91c-1.24 2.65-2.37 5.42-3.45 8.09-.58 1.43-1.15 2.82-1.74 4.21l-1.55 3.66-.18.42c-1 2.4-2.05 4.79-3 7.2l-3.16 7.69c-2.36 5.77-4.73 11.55-7 17.36l-1.64 4.15-.11.27c-6 15.22-12.26 31-17.62 46.71l-2.17 6.36-.22.63c-2.31 6.75-4.7 13.72-6.82 20.65l-2.5 8.21-2.46 8c-.84 2.77-1.59 5.62-2.25 8.13l-.28 1.06c-.2.77-.4 1.55-.61 2.31-2.54 9.38-5 19.21-7.23 27.88-1.49 5.92-2.86 12-4.16 17.83l-.11.47c-.52 2.32-1 4.5-1.5 6.67q-3.81 16.75-7.7 33.5l-.37 1.59-3.75 16.35q-1.75 7.66-3.53 15.34c-.75 3.25-1.41 6.7-1.94 9.47-.31 1.62-.62 3.22-.94 4.83-.63 3.14-1.28 6.5-1.75 10l-1 7.92-1.06 7.92c-.16 1.18-.24 2.37-.32 3.56 0 .6-.08 1.21-.13 1.8l-.4 4.75-.4 4.74c-.36 4.2-.53 8.4-.69 13.44 0 1-.07 2.09-.12 3.14v1c-.13 2.68-.27 5.71-.23 8.67l.11 8.69.11 8.69c0 2.75.14 5.5.25 8.25v.68l.07 1.71c.06 1.43.11 2.87.16 4.31v.27c.09 3 .19 6.06.39 9.07l.37 5.65c.41 6.62.87 14.11 1.64 21.47l.81 7.7.81 7.73c.34 3.3.83 6.64 1.31 9.86l.18 1.25c.18 1.18.35 2.35.51 3.53 1 7.36 2.29 15.07 3.3 21.25l.94 5.74c.81 5 1.69 10 2.58 15.06.16.31.32.61.47.92a15 15 0 011.52 5.11 9.51 9.51 0 01-.31 3.21c.4 2.18.8 4.36 1.2 6.52l.24 1.27c1.23 6.61 2.43 13.15 3.59 19.69 2.81 16 5.23 32 7.58 47.6l1.41 9.37c2.73 18 5.43 35.6 8.46 53.14 1.4 8.18 2.73 16.36 4.06 24.55l.06.38.09.51c1.54 9.56 3.15 19.45 4.87 29.15 1.54 8.74 3 18 4.17 25.45 1.45 9.16 3.12 18.44 4.74 27.42l.06.36.19 1c.5 2.78 1 5.57 1.54 8.35v.25c1 5.05 1.89 10.11 2.75 15.17q2.54 15 5 30.06l2.44 14.84c2 12.06 3.94 24.11 6 36.15 3.13 18.34 6.58 36.58 10.24 54.23l1.8 8.68.26 1.26c2.86 13.8 5.82 28.06 8.54 42.11l1.28 6.55c1.26 6.46 2.49 12.78 3.62 19.06l.91 5.12c1.44 8.18 2.93 16.63 4.84 24.85 1.54 6.69 3.09 13.16 4.73 19.78l-.08-.25c-5.75-7.48-11.71-15.21-18.83-21.63-6.46-5.83-13.56-11.14-20.43-16.28l-3.35-2.5c-7.3-5.48-15.13-11-23.23-16.23s-17.58-11.48-27.41-16.11a88.33 88.33 0 00-16.61-5.94 22.09 22.09 0 00-5.24-.58h-.77a26 26 0 00-5.9.91 22.37 22.37 0 00-8.24 3.9c-5.4 4.2-7.85 11.9-6.58 20.61 1 7.1 4.73 13.45 8.43 19.34a122.7 122.7 0 0014.12 18l2.43 2.62c2.29 2.49 4.62 5 7.07 7.35a277.66 277.66 0 0022 19.48c8.11 6.26 16.4 12.48 24.42 18.48l1 .76c8.64 6.48 16.48 12 23.94 17 5.18 3.41 9.83 6.43 14.25 9.23l2.84 1.82.35.23c2.58 1.65 5.24 3.36 7.92 4.93a75.06 75.06 0 0012.95 6.21c4.46 1.58 8.76 3.26 13.16 5.13a12.44 12.44 0 003.29.92l.43 1.71.46 1.74a161.37 161.37 0 005.48 17.23 13.78 13.78 0 0012.67 8.84 10.05 10.05 0 001.09 0 13.56 13.56 0 009.18-4.71c2-2.35 3.82-6.42 3.15-9.82l-.22-1.1-.08-.42c-1.07-5.35-2.17-10.88-3.42-16.3-1-4.2-2.11-8.57-3.11-12.43l-.71-2.75c-1.77-6.83-3.77-13.83-5.54-20-.84-2.93-1.67-5.85-2.5-8.78-1-3.61-2.06-7.23-3.1-10.83a7.43 7.43 0 001.45.14h.62a7.31 7.31 0 005.16-2.67 143.58 143.58 0 0010.38-17.29c1-2.14 2-4.37 2.85-6.54l1.06-2.53c1.76-4.16 3.23-8.53 4.66-12.75l.33-1c1.57-4.65 3.07-9.77 4.72-16.11a109.06 109.06 0 002.2-12.48l.23-1.59q1.73-12.24 3.4-24.48c1.69-12.24 3.38-24.47 5.14-36.7.72-5 1.49-10 2.27-15 2.34-15.14 4.77-30.79 5.56-46.36.3-6.11.36-12.6-1.24-18.61a16.68 16.68 0 00-5-8.56c-1.79-1.49-3.6-2.86-5.89-3.17a23.17 23.17 0 00-3-.25 11.39 11.39 0 00-1.64.11 14.63 14.63 0 00-6.25 2.39c-.89.67-1.77 1.41-2.78 2.33a67.88 67.88 0 00-5.57 5.74c-7.74 9-11.3 20.46-14.74 31.57l-.9 2.91c-1.36 4.38-2.76 8.74-4.17 13.1l-.26.77c-3.19 9.47-6.5 19.26-9.48 29-1.29 4.25-2.57 8.88-3.89 14.15a90.92 90.92 0 00-2.08 14.26 246.43 246.43 0 00-1 31.23c.05 1.28.08 2.54.1 3.81q-2.19-11.91-4.53-23.82c-2.88-14.64-6.08-29.76-8.9-43.1l-2-9.48c-6.36-30.21-11.59-61.15-16.65-91.07l-2.33-13.68q-2.56-15.1-5.17-30.19c-.87-5.05-1.85-10.14-2.81-15.06L264 2141c-.41-2.14-.82-4.27-1.21-6.4-1.64-8.78-3.15-17.61-4.8-27.42-1.48-8.7-3-17.69-4.65-26.58s-3.2-18.09-4.8-27.48l-.31-1.84c-1.39-8.13-2.82-16.54-4.34-24.78-3.57-19.44-6.77-39-9.15-53.9l-1.59-9.91-3-18.42c-1.43-8.84-3.07-18.2-5-28.61-1.26-6.69-2.57-13.37-3.89-20l-.22-1.12c-1.89-9.66-3.85-19.66-5.59-29.51l-.43-2.44c-1.49-8.39-3-17-4.32-25.63l-.55-3.51-.11-.66c-.48-2.93-1-5.91-1.31-8.86l-2-16.85c-.79-6.64-1.29-13.42-1.78-20l-.15-2c-.11-1.38-.22-2.75-.32-4.12-.23-2.89-.37-5.79-.51-8.68-.07-1.52-.15-3-.23-4.53v-.88l-.05-.93c-.17-3.3-.35-6.7-.44-10-.05-1.79-.12-3.57-.2-5.37-.15-3.89-.3-7.77-.24-11.58l.15-8.79.14-8.79.05-.83c.45-6.9 1-14.72 1.86-22.31l1.1-9.3.12-1.15c.09-.91.18-1.81.35-2.7l1.56-8.42 1.55-8.38c1.14-6.13 2.53-12.43 3.75-18l.24-1.11 1.31-6c.54-2.52 1.1-5 1.66-7.55l.67-3c1-4.62 2-9.24 3-13.87l2.25-10.64c3-14.45 6.2-29.4 9.71-44.17 2-8.33 4.13-16.75 6.21-24.91l.12-.47.51-2c1.37-5.35 3-10.68 4.75-16.59.74-2.45 1.47-4.89 2.19-7.34l-.29.66c.73-2 1.4-4.1 2.06-6.16 1.73-5.41 3.52-11 5.44-16.35 1-2.69 1.91-5.39 2.86-8.1 1.87-5.38 4-11.47 6.23-17.24l3.26-8.47.24-.64c5.31-13.8 10.79-28.06 16.5-41.94l2.15-5.27.17-.41c2.76-6.75 5.6-13.73 8.7-20.45 4.65-10.09 8.93-19.1 13.07-27.54 6.34-13 13-26 19.37-38.67l.46-.91 4.68-9.24c5.67-11.24 11-21.51 16.27-31.4.77-1.43 1.51-2.87 2.26-4.3l.18-.36c1.89-3.61 3.83-7.35 6-10.87q5.26-8.66 10.56-17.27l2.69-4.08c3.48-5.28 7-10.59 10.69-15.61 5.24-7.08 11.45-15.45 17.86-23.88 11.48-15.09 23.61-29.77 36.07-44.73 4-4.77 8.19-9.44 12.27-14 1.74-1.92 3.49-3.86 5.21-5.79 2-2.24 4.21-4.5 6-6.31l2.93-3 1.64-1.7c2.22-2.3 4.44-4.61 6.63-6.92q20.15-21.32 40.23-42.69 3.7-4 7.39-7.93c4.26-4.59 9.08-9.78 13.85-14.75 8.41-8.77 17.36-18 27.35-28.12 2.76-2.8 5.58-5.55 8.41-8.29l1.37-1.34 2.72-2.66c2.79-2.73 5.54-5.51 8.27-8.29l.66-.66 2.81-2.85 5.34-5.4 2.58-2.62c4.78-4.86 10.33-10.5 15.86-15.95 12.6-11.47 23-20.7 32.7-29.05q9.27-8 18.43-16.09c4.41-3.88 8.66-8.07 12.77-12.12l.61-.6 3.07-3c1.82-1.79 3.53-3.78 5-5.54l.6-.68c.58-.67 1.15-1.33 1.74-2 2.68-3 5.2-6.1 6.84-8.16a222.24 222.24 0 0013.49-18.41c4.2-6.51 8.27-13.06 12.46-20 1.23-2 2.33-4.24 3.39-6.36l.21-.41c.46-.91.92-1.82 1.4-2.72 1.47-2.81 2.89-5.73 4.26-8.55l.1-.21c.72-1.46 1.43-2.93 2.15-4.38a7.16 7.16 0 00.3-5.55 7.47 7.47 0 00-3.77-4.27 7 7 0 00-3.12-.72 7.51 7.51 0 00-6.7 4.17z"></path>
+    <path class="cls-2" d="M274.89 2302a7.65 7.65 0 00.89 10.81 8.09 8.09 0 005.59 1.8 7.46 7.46 0 005.23-2.69 7.68 7.68 0 00-.9-10.82 8.12 8.12 0 00-5.59-1.79 7.42 7.42 0 00-5.22 2.69z"></path>
+    <path class="cls-2" d="M140.24 2101.42a29.89 29.89 0 00-5.65 2.62c-.33.28-.66.54-1 .81a28.77 28.77 0 00-3 2.85 28 28 0 00-3.44 4.87 39.3 39.3 0 00-4.12 10c-1.16 4.11-.57 8.57.29 12.66a106.94 106.94 0 005.66 18.62 122.61 122.61 0 008.17 16.58c5.87 9.76 12.22 19.13 19 28.31 3.48 4.71 7.51 9.07 11.34 13.48.81.93 1.63 1.85 2.45 2.77a10.73 10.73 0 001.24 1.37c2.56 2.84 5.17 5.64 7.74 8.47 7.86 8.67 16 17.17 25.1 24.59 4.24 3.46 8.62 6.76 12.91 10.16 4.58 3.63 9.09 7.33 13.72 10.87 8.32 6.38 17.08 12.15 25.37 18.56l.86.67a12.84 12.84 0 006.61 2.79c.16 1.39.3 2.79.45 4.19a9.77 9.77 0 0019.47-1.59 199 199 0 00-3.29-22.41 155.43 155.43 0 00-6.89-23.34c-2-5.23-3.94-10.55-6.16-15.7-2.5-5.8-5-11.58-7.63-17.32a118.35 118.35 0 00-7.59-14.18c-2.58-4.08-5.52-7.92-8.48-11.75-3.58-4.64-7.16-9.26-10.9-13.78s-7.55-9.12-11.37-13.65-7.9-9.16-12-13.66c-4.47-5-9.13-9.69-13.84-14.43-3.45-3.48-7.15-6.76-10.8-10-4.58-4.07-9.16-8.1-14-11.9-1.82-1.44-3.7-2.83-5.64-4.11s-4-2.63-6.06-3.82a33.57 33.57 0 00-11.28-4 15.48 15.48 0 00-2.55-.21 16.67 16.67 0 00-4.76.7zm8.53 19.94l-1.15.6a7.36 7.36 0 011.15-.6zm-2.36 2.1a53 53 0 015.87 3.09c8.64 6.11 16.55 13.09 24.42 20.16 4.36 3.92 8.51 8.06 12.7 12.18 3.16 3.11 6.1 6.45 9.08 9.73q9.48 10.93 18.81 22c2.75 3.26 5.37 6.63 8 10 1.29 1.65 2.6 3.31 3.91 5a112.66 112.66 0 0110.37 15.75c1.4 2.93 2.85 5.84 4.17 8.8 1.66 3.72 3.47 7.4 5 11.17 2.42 6 4.85 12 7 18.09-1.21-.83-2.43-1.65-3.63-2.48-7.21-5-14.13-10.26-21.13-15.52s-14.3-10.47-20.71-16.56c-3.45-3.27-6.86-6.56-10.21-9.94-3-3-5.85-6.29-8.72-9.47l-1.06-1.16.15.16-.55-.6-.49-.53-1.29-1.42-.62-.67c-.62-.76-1.3-1.46-2-2.21a254.09 254.09 0 01-31.87-44.67 113.89 113.89 0 01-8.47-22.47 39.3 39.3 0 01-.52-4q.12-.66.27-1.32c.44-1 .94-2 1.48-3zm37.91 74.21l1 1.06-.07-.07-.9-1zm1.12 1.23l.27.29.39.43-.65-.71zm4.05 4.44l1.21 1.32-1.21-1.32zm1.8 2l-.29-.34-.07-.08.39.42zm-.39-.42l-.21-.24.28.32c.23.24.45.49.68.74l-.36-.4a.52.52 0 00.1.11c.16.18.33.36.49.55l.29.31.45.5-.43-.48.08.08-1.79-2 .42.47z"></path>
+    <path class="cls-2" d="M140.89 2115.11a8.2 8.2 0 00-5.22 6.15c-1 3.36.05 7 1.94 9.85 1.75 2.68 3.75 5.22 5.61 7.82 2.6 3.63 5.38 7.13 8.16 10.62.38 1.14.82 2.26 1.28 3.38a6 6 0 00-.07.61 46.1 46.1 0 00-.19 7.05 21.22 21.22 0 002.28 7.08 108.5 108.5 0 007.25 12.31c3 4.5 6.25 8.8 9.45 13.15a131.75 131.75 0 0015.52 18.22 9.91 9.91 0 003.82 2.21c1.41 1.82 2.83 3.63 4.29 5.42 1.76 2.12 3.59 4.16 5.53 6.12a24.62 24.62 0 005.42 4l3.57 1.18h.36c4 5.64 7.91 11.31 12.09 16.8 1.49 2 3 3.92 4.49 5.86.34 2.07.65 4.14 1 6.21a8.91 8.91 0 003 5.81 8.58 8.58 0 006.22 2 7.65 7.65 0 001.49-.27c.17.19.35.37.52.55 2 2 4.71 3 7.25 4a9.58 9.58 0 007.08.34 9.11 9.11 0 005.09-4.63c.8-1.64 1.7-3.21 2.37-4.91a19.87 19.87 0 001-9.08 39.1 39.1 0 00-1.56-7.16c-.74-2.64-1.85-5.2-2.84-7.75a116.8 116.8 0 00-7.09-14.55l-.3-.54c-.86-2.11-2-4.15-3-6.17q-2.53-5-5.43-9.87a172.25 172.25 0 00-12.54-17.8c-7.14-9.09-15.05-17.57-22.94-26a50.54 50.54 0 00-5.25-5.2c-.39-.32-.79-.62-1.21-.9q-5.49-6.06-11-12.06c-2.61-2.8-5.23-5.57-7.92-8.3-1.35-1.38-2.71-2.75-4.06-4.12a35.1 35.1 0 00-5.5-5.06 9.08 9.08 0 00-3.52-1.9 35.5 35.5 0 00-5.45-1.42 9.34 9.34 0 00-4.42.22 59.78 59.78 0 00-8.42-7.82 9.2 9.2 0 00-5.4-1.93 7.63 7.63 0 00-2.69.49z"></path>
+    <path class="cls-2" d="M323.27 2058.78a17.21 17.21 0 00-7.18 2.42 26.17 26.17 0 00-7.46 6.8 65.35 65.35 0 00-5.94 9.52c-1.94 3.6-3.64 7.3-5.28 11-2.23 5.12-4.24 10.38-6.17 15.63-4.18 11.4-8.17 22.85-12.07 34.36q-5.39 15.9-10.11 32c-1.41 4.82-2.89 9.67-4.07 14.55-1.48 6.13-3.54 12.47-3.31 18.83a11.42 11.42 0 0012.32 10.49 10.66 10.66 0 003-.67c-.93 1.87-1.88 3.73-2.89 5.55-.31.41-.63.8-1 1.2h-.19a36.18 36.18 0 01-3.59-.8 12.24 12.24 0 00-13.77 16.22c1 2.67 3.38 5.88 6.21 6.83 1.24.42 2.49.83 3.74 1.23l-4.76 6.8a9.5 9.5 0 00-2.08 6.47 8.87 8.87 0 009.57 8.12 8.61 8.61 0 006-3.1c3.81-5.46 7.61-10.91 11.48-16.33 2.4-3.36 4.9-6.67 7.31-10a28 28 0 002.56-3.67 236.3 236.3 0 0017.12-30.41c2.3-4.78 4.21-9.71 6.32-14.58 2.36-5.4 4.71-10.81 7-16.24 2.17-5.11 4.35-10.2 6.12-15.45 2-5.9 3.69-11.89 5.4-17.87 1.52-5.34 2.47-10.87 3.52-16.31.53-2.7.86-5.45 1.2-8.17s.71-5.52.86-8.29c.35-6 .78-12.16-.16-18.15a94.31 94.31 0 00-2-10 47.28 47.28 0 00-1.72-5.33 48.27 48.27 0 00-2.83-5.49 23.31 23.31 0 00-3.06-3.6 30.57 30.57 0 00-3.22-2.15 17 17 0 00-6-1.44h-.89zm-2 36.38v.07c.17 1.67.23 3.35.26 5a11.61 11.61 0 00-1.68-.45c-.11-.17-.22-.35-.34-.51.57-1.39 1.15-2.77 1.75-4.14zm-46.92 124.43a11.79 11.79 0 01-.9.84l.92-.84zm13.2-341.81c-8.48 2.49-15.53 8-21.82 14a106.07 106.07 0 00-14.21 17.22 168.41 168.41 0 00-12.74 22.2 232.05 232.05 0 00-13.95 36.73c-1.53 5.43-2.86 10.87-3.91 16.41a144.79 144.79 0 00-2 17.62c-.39 6.09-.73 12.15-.56 18.24.15 5.49 4.87 10.22 10.08 11.21a12.54 12.54 0 0014.52-9.91c.9-5.06 1.61-10.13 2.19-15.24.53-4.7.93-9.47 1.87-14.13s2-9.45 3.05-14.16c.91-4 2.16-7.84 3.37-11.72 5.13-14 10.8-27.7 18.69-40.4a102.69 102.69 0 0113.58-16.62 54.93 54.93 0 016.9-5.08c.32-.15.65-.28 1-.42a83.49 83.49 0 01.43 11.73 207.7 207.7 0 01-3.65 26.88c-2 9.31-4.49 18.41-7.24 27.51-1.38 3.83-2.81 7.59-4.43 11.35-1.76 4.07-3.87 8-5.94 12q-3.3 6.25-6.76 12.41c-2.43 4.38-4.8 8.79-7.39 13.07a76.5 76.5 0 01-7.95 9.12c-4.53 4-9.17 8-13.82 11.85-2.49 2.09-4.31 4.34-4.93 7.62a12 12 0 009.58 14.05c3 .56 6.77 0 9.14-2 4.89-4.1 9.81-8.17 14.56-12.44a86.74 86.74 0 007-6.6c1.23-1.36 2.45-2.73 3.64-4.13a63.14 63.14 0 006.05-9.05c5.78-10 11.57-19.91 17-30.08a126.12 126.12 0 007-15.79c2.22-6 4-12.18 5.91-18.3a217.7 217.7 0 007-32.22 183.46 183.46 0 001.61-18.29 75.92 75.92 0 00-.06-7.84 50.91 50.91 0 00-1.44-9.09 22.26 22.26 0 00-2.56-5.89 30 30 0 00-4.82-5.86 23.57 23.57 0 00-16.87-7 24.83 24.83 0 00-7 1zm4.05 24.38a7.41 7.41 0 011.16.35l.07.06-1.23-.41zm4.24.92a8.44 8.44 0 01.87 0h-.87zm-2.28.23l-.37.08.37-.08zm.31.69l.12.56-.12-.56zm.38 0a7.49 7.49 0 01.36.69l-.36-.69z"></path>
+    <path class="cls-2" d="M297.67 1893.88c-8.41.8-13.87 8.71-18.63 14.81-2.58 3.32-4.8 7-7.06 10.49-2.06 3.22-4 6.49-5.92 9.8-2.2 3.83-4.28 7.73-6.29 11.66a14.78 14.78 0 00-2 2.6c-2.32 3.7-4.59 7.43-6.93 11.12q-3.23 4.83-6.47 9.63c-1.38 2-2.3 3.93-2.08 6.49a8.85 8.85 0 001 3.39c-2 4.15-3.89 8.33-5.67 12.57-2.32 5.54-4.51 11.38-5.33 17.35a19.44 19.44 0 00.58 9.31 13.68 13.68 0 0010 8.4h.24c-.56 1.43-1.12 2.85-1.67 4.27a14.43 14.43 0 00-.53 10.82 14 14 0 007.06 7.77c6.72 3.22 15.47.37 18.58-6.54 5.6-12.4 10-25.36 14.25-38.28 2.54-7.8 4.89-15.67 6.87-23.64.7-1.85 1.4-3.71 2.13-5.56q2.09-5.3 4.16-10.6c.17-.42.33-.84.49-1.25a96.23 96.23 0 005-11.16c.34-1.05.68-2.08 1-3.12a13.41 13.41 0 00.19-3.15q1.18-2.13 2.39-4.24c1.27-2.28 2.5-4.58 3.75-6.87s2.23-4.41 3.22-6.68c.67-1.53 1.2-3.11 1.72-4.69a39.37 39.37 0 002.11-7.86 16.46 16.46 0 00-.49-7.55 13 13 0 00-3.85-5.92 15.39 15.39 0 00-10.08-3.5c-.59 0-1.17 0-1.76.08zM81.72 1672.13c-2.32.67-5.14 3-6.73 4.71a28.74 28.74 0 00-4.48 6.84 42.6 42.6 0 00-3.59 11 41.7 41.7 0 00-.07 11.86c.51 4.08 1.6 8.14 2.49 12.14.68 3.13 1.56 6.24 2.46 9.33 2.17 7.48 4.32 15 7.52 22.13 3 6.73 6.73 13.32 10.4 19.72q4.73 8.2 9.41 16.43 2.78 4.88 5.6 9.72c6.08 4.93 12.14 9.83 17.71 15.35 5.8 5.73 11.12 12 17.22 17.42 1.53 1.36 3 2.75 4.64 4l5 3.81c3.16 2.44 6.38 4.8 9.4 7.41s6.27 5.48 9.23 8.41c2.77 2.75 5.4 5.63 8 8.52 4.72 5 9.44 9.94 13.32 15.54 4.08-5.28 3.72-13.93-1.86-18.13a109.52 109.52 0 01-14-12.91c-6.28-7.1-12.38-14.34-18.1-21.91-6.76-8.94-13.13-18.1-19.23-27.51-5.3-8.17-10.17-16.65-15-25.09-5.12-8.91-10.26-17.81-15.23-26.82a99 99 0 01-5-11.81l-2.07-6.06c-1.91-5.57-3.52-11.37-4.87-17.13a52.44 52.44 0 01-1.28-9.49c.11-.86.26-1.7.45-2.56 0-.06.05-.12.08-.19 1.22.24 2.43.52 3.64.85a71.5 71.5 0 0111.17 5c7.55 5.35 14.19 11.91 20.74 18.41a202.12 202.12 0 0117 20.67c5.48 7.93 9.71 16.57 14.16 25.08-.46-.86-.91-1.73-1.37-2.6 4.86 10.59 9.95 21.25 12.77 32.6a60.33 60.33 0 01.92 12.95c-.09 2.49-.19 5-.28 7.45 0 .36-.05.73-.06 1.1-.06 1-.11 2-.16 3a11.14 11.14 0 002 5.5 11.18 11.18 0 0015.58 2.75c2.12-1.49 4.42-4.36 4.57-7.08.28-4.62.46-9.22.63-13.84q.12-3.23 0-6.43c-.1-4.4-1.19-8.76-2.15-13a103.25 103.25 0 00-4.56-14c-.94-2.49-1.81-5-2.89-7.42-6.75-15.13-13.77-30.38-23.36-43.95-4.65-6.57-10-12.57-15.26-18.67-4.31-5-9.06-9.67-13.84-14.23-6.83-6.51-14.41-12.23-23.3-15.63-5.2-2-10.46-3.94-16.08-4.32C92 1671 91 1671 90 1671a28.39 28.39 0 00-8.24 1.18z"></path>
+    <path class="cls-2" d="M79.25 1684.93a15.08 15.08 0 00-7.36 9.38c-1.83 6.87 1.66 13.33 4.07 19.55a177.59 177.59 0 009.52 20c5.28 9.82 10.55 19.63 16.14 29.28 2.64 4.56 5.38 9.06 8.4 13.37 2.27 3.24 5.44 6.39 9.47 7.15a14.32 14.32 0 001.73.2c2.57 4.41 5.16 8.81 7.88 13.14q7.71 12.35 15.5 24.62c2.07 3.24 4.17 6.47 6.25 9.71 1.27 2 2.6 3.91 3.91 5.87.45.72.87 1.46 1.27 2.2a11.68 11.68 0 002.2 2.71l2.75 4c2.36 2.07 4.68 4.19 6.92 6.4 2.77 2.75 5.4 5.63 8 8.52a144.55 144.55 0 0112.47 14.34c1.14 0 2.3-.06 3.45-.15a30.08 30.08 0 006.13 4.28 13.54 13.54 0 0016.16-3.45c4.61-5.43 4.26-14.53-1.56-19.06a26.79 26.79 0 01-2.17-1.83c-2.43-2.86-4.67-5.89-7-8.81-1.48-1.84-3-3.64-4.4-5.54-.64-2.3-1.38-4.59-2.16-6.84-3.44-10-8.4-19.56-13.15-29q-5.23-10.38-11.14-20.45-2.79-5.34-5.83-10.54a153.59 153.59 0 00-8.81-13.71q-4-5.49-8.08-11c-3.84-5.53-7.74-11.07-11.92-16.34q-4.35-5.47-8.69-10.94l-7.94-10q-7.68-9.69-16.27-18.57c-3.89-4.42-7.9-9.2-13.91-10.52a14.64 14.64 0 00-3.25-.36 17.17 17.17 0 00-8.55 2.47zm14.1 11.64v1a8 8 0 010-1z"></path>
+    <path class="cls-2" d="M278.38 1681c-2.06.42-4.05.85-6 1.46a39.89 39.89 0 00-7.37 3.67 55 55 0 00-8.46 6.27 85.47 85.47 0 00-9.15 9.3c-3 3.51-5.78 7.26-8.6 10.93-3.91 5.08-7.37 10.6-10.84 16a156.21 156.21 0 00-8.44 14.43c-2.51 5-4.83 10.12-7.07 15.28-4.49 10.39-9.14 20.74-13.18 31.32-2.71 7-5 14.28-7.26 21.46a15.26 15.26 0 008.39 16.6 14.88 14.88 0 002.59 1 10.58 10.58 0 000 1.49 11.47 11.47 0 004 7.76 11.79 11.79 0 008.3 2.66 161 161 0 0018-1.32c2.29-.31 4.54-.67 6.8-1.14a65.32 65.32 0 006.62-1.65 32.24 32.24 0 005.4-2.66 119 119 0 0012.82-8.55 249.52 249.52 0 0026.73-22.31 79.57 79.57 0 005.48-6.27 73.56 73.56 0 009.91-15.3c.6-1.26 1.21-2.52 1.8-3.77a79.93 79.93 0 004.1-11.27c.84-2.76 1.41-5.62 2.05-8.42a126.26 126.26 0 002.4-16.78c.55-6.24.87-12.56 1-18.82a90.8 90.8 0 00-.39-10.69 55.78 55.78 0 00-2.53-11 27.4 27.4 0 00-8.35-11.94 42.65 42.65 0 00-5.8-3.86 26.53 26.53 0 00-3.81-1.9 29.3 29.3 0 00-9.49-2.37c-1.35-.09-2.65-.15-3.93-.15a28.22 28.22 0 00-5.67.52zm7.34 28.34c.4.06.8.14 1.21.23q1.14.5 2.25 1.08l.33.27a36.67 36.67 0 011.27 3.7c1.29 7.77.92 15.77.68 23.61a98.1 98.1 0 01-1.15 11.21c-.83 4.71-1.68 9.44-3 14.06a81.41 81.41 0 01-6.71 14.15c-2.3 3.25-4.81 6.32-7.4 9.35a58.43 58.43 0 01-5.15 5.17c-3.71 3.36-7.47 6.65-11.36 9.81-5.5 4.47-11.08 9-17.24 12.54a30.66 30.66 0 01-4.23 1.37 124.5 124.5 0 01-13.17 1.58c5.67-13.19 10.66-26.66 16.15-39.93 3.14-7.61 6.34-15.15 9.91-22.56a180.55 180.55 0 0110.4-17.91c5.15-7.71 10.53-15.43 17-22.07a60.62 60.62 0 016.39-4.77c.64-.27 1.3-.51 2-.72s1.22-.14 1.83-.17zm4.4 2.41l.25.5-.25-.5z"></path>
+    <path class="cls-2" d="M281.63 1697c-2.15 1.86-4.29 3.74-6.33 5.73-2.32 2.25-4.12 5.15-6 7.75-1.43 2-2.79 4-4.18 6l-7.05 10.09c-5 7.2-10.06 14.38-15 21.65-.68 1-1.36 2.1-2 3.15a14.28 14.28 0 00-1.39 7.53 14.42 14.42 0 001.1 4.49l-.27.84v.5c-3.5 4.83-7 9.68-10.36 14.58-1.81 2.08-3.6 4.18-5.39 6.3-.83 1-1.62 2-2.43 3a23.72 23.72 0 00-2.71 3.7 12.19 12.19 0 00-1.72 5.4q-2.84 4.38-5.65 8.79a130.27 130.27 0 00-7.8 13.82 36.28 36.28 0 00-1.55 4.07 27.25 27.25 0 00-1.56 6.25c-.25 2.45-.37 5.74.69 8.09.12.26.24.52.35.78a13.38 13.38 0 003.91 5.6 12.26 12.26 0 004.07 2.64l3.31 1.09c1.45.09 2.91.17 4.37.22l.9-.17a19.87 19.87 0 004.57-1.14 33.7 33.7 0 005.85-3 80.84 80.84 0 0012.63-9.29 176.76 176.76 0 0024.74-27.12c3.64-4.89 7.06-10 10.2-15.27 1.54-2.57 3-5.14 4.35-7.8s2.58-5.58 3.81-8.41a99.83 99.83 0 006.75-22.51c.39-2.28.81-4.55 1.06-6.85.76-1.13 1.51-2.26 2.25-3.4a24 24 0 002.72-5.6c.8-2.38 1.23-4.46.33-6.91a8.71 8.71 0 00-1-2l.21-.35c1.29-2.19 2.49-4.44 3.63-6.72.51-1 1-2.09 1.37-3.16a34.19 34.19 0 002.06-6 30.56 30.56 0 00.34-4.88 15.57 15.57 0 00-3.18-7.93 14.51 14.51 0 00-9.06-5.85 14.9 14.9 0 00-2.73-.25 12.77 12.77 0 00-8.14 2.59zm-117.97-372.7a18 18 0 00-5.32 1.4 22.39 22.39 0 00-7.45 5.58c-.58.91-1.17 1.81-1.76 2.72a14.18 14.18 0 00-1.74 3.26 43.86 43.86 0 00-2.06 6.5 51.77 51.77 0 00-1.28 11.77c-.26 8.51.83 17.08 2 25.48a166.56 166.56 0 007 30.65c1 2.93 2.3 5.81 3.44 8.7.79 2 1.62 4 2.51 5.94 4.8 10.57 9.54 21.19 14.63 31.62q12.36 25.3 25 50.45c.54 1 1.07 2.06 1.62 3.1a13.49 13.49 0 0015.75 4.93c6.39-2.34 10.68-10.06 8.28-16.67 2.7-4.15 5.59-8.3 7.41-12.93 2.23-5.68 2.28-12.12 2.44-18.13a124.27 124.27 0 00-.76-16.25 103.41 103.41 0 00-2.7-13.48c-2-8.26-4-16.5-6.17-24.71-2-7.37-4.29-14.63-6.79-21.82-1.26-3.6-2.85-7.1-4.4-10.58-1.8-4.06-3.71-8-5.77-12l1.35 2.58q-1.22-2.34-2.45-4.68a2.12 2.12 0 01.11.21 180 180 0 00-19.06-29.54c-1.81-2.25-3.76-4.39-5.78-6.45a37.16 37.16 0 00-7.69-5.61 17.09 17.09 0 00-8.76-2.09h-1.59zm8.92 56.44c-.84-4.35-1.41-8.78-1.89-13.18a115.84 115.84 0 01-.89-13.41 201.67 201.67 0 0119.38 28.7c2.37 4.67 4.65 9.38 6.77 14.17 2.38 5.4 4.32 11 6.25 16.55a367.69 367.69 0 0110.25 36.12 101.68 101.68 0 011.66 22.58c-.15 1.82-.33 3.62-.63 5.41-.84-1.62-1.66-3.24-2.48-4.86q-6.33-12.6-12.56-25.24c-3.82-7.74-7.39-15.62-11-23.46-1.86-4-3.8-8-5.45-12.13q-1.75-4.32-3.48-8.65a97.34 97.34 0 01-4.27-13.86c-.56-2.91-1.11-5.82-1.67-8.74zm33.85-13c-.41-.8-.82-1.6-1.24-2.38.41.79.83 1.58 1.24 2.38z"></path>
+    <path class="cls-2" d="M168.34 1355.42a11.63 11.63 0 00-4.94 3.44c-2.15 2.53-2.76 5.36-2.76 8.59 0 2 0 4 .16 6.06a47.32 47.32 0 001.44 6.72c.84 3.6 2.18 7.1 3.37 10.6 1 2.91 2.06 5.79 3.11 8.68 1.91 5.23 3.78 10.49 5.77 15.69 4.29 11.18 8.69 22.28 13.47 33.26 4.52 10.38 9 20.75 13.71 31.07 2 4.53 4 9.12 6.15 13.57 1.53 3.11 2.63 6.34 4.3 9.4a20 20 0 003.38 4.21 15.27 15.27 0 003.73 2.86c.35.61.71 1.22 1.09 1.81a30.58 30.58 0 004 4.31 14.78 14.78 0 0018.06.84c6.49-4.55 8.41-14.1 3.63-20.61-.49-.67-.93-1.34-1.36-2q-1-2.16-2-4.34v-.47a88.72 88.72 0 00.47-8.93 35.07 35.07 0 00-.76-5.48c-.54-3.07-1.3-6.11-2-9.15-3.1-13.11-8.2-25.86-13.74-38.11-4.93-11-9.9-21.9-15.14-32.71-2.81-5.81-6-11.52-9.31-17-.61-1-1.28-2-1.92-3s-1.38-2.08-2.13-3.08a20.49 20.49 0 00-6.37-5.57 13.81 13.81 0 00-6.34-2.08l-.35-.64a18.71 18.71 0 00-5.05-5.76 12.55 12.55 0 00-7.73-2.79 11.35 11.35 0 00-3.94.71z"></path>
+    <path class="cls-2" d="M208.69 1485.45a14.44 14.44 0 00-5.88 9.1l-.2 3.84a14.25 14.25 0 002.55 7.06c2.25 4.24 4.44 8.52 6.77 12.72a14.2 14.2 0 0024.45-2c1.55-3.22 2.06-7.69.54-11-2.51-5.51-5.41-10.82-8.23-16.16-1.65-3.09-5.82-5.26-9.1-5.88a14.57 14.57 0 00-2.64-.24 14.38 14.38 0 00-8.26 2.59z"></path>
+    <path class="cls-2" d="M365.38 1416c-4.29.91-8.53 1.91-12.71 3.21a206.42 206.42 0 00-22.89 9c-5.39 2.4-10.7 5-16 7.53-5.64 2.7-11.25 5.41-16.85 8.19s-11.25 5.66-16.56 8.9a220.76 220.76 0 00-26.52 18.46c-5.82 4.86-10.92 10.08-14.56 16.77-2.35 4.3-1.6 10.07 1.14 14a13.4 13.4 0 002.45 2.65 10.51 10.51 0 00-4.79 7c-1.07 5.64 2.79 11.8 8.63 12.67 3.36.51 6.71.94 10.08 1.39 3 .41 6 .47 9 .7 6.46.49 13 .44 19.48.49a179.92 179.92 0 0032.35-2.64 49.64 49.64 0 0011.25-3.23 107.76 107.76 0 0010.39-5.41 132.83 132.83 0 0014.47-9.65l8.53-6.53c2.18-1.67 4.2-3.56 6.28-5.35 5-4.31 9.71-8.86 14.45-13.44a152 152 0 0011.29-12.89 131.37 131.37 0 0010.63-15.62 25.63 25.63 0 002.28-5.1c1-2.83 1.88-5.74 1.56-8.8a44.9 44.9 0 00-1.43-7c-.25-.51-.49-1-.74-1.53a16 16 0 00-2.66-4.51 26.44 26.44 0 00-10.95-8.32c-5-2.06-10.09-2.32-15.46-2.53h-1a54.39 54.39 0 00-11.13 1.57zm16.55 20.92c0 .43 0 .85-.06 1.27l.06-1.27zm-1.79 5.38c-1 1.85-2 3.66-3.1 5.47a135 135 0 01-8.78 11.69c-1.67 1.95-3.29 4-5.09 5.82l-7.09 7.24c-3.13 2.85-6.25 5.72-9.57 8.35-7.88 6.26-15.79 12.34-24.6 17.27a46.6 46.6 0 01-7.5 3c-1.53.46-3.12.77-4.69 1.11l2-.44a206.32 206.32 0 01-21.3 2.72c-7.53.55-15.05.47-22.59.41l-6-.4a15 15 0 001.22-.87c1.18-.93 2.34-1.88 3.5-2.84 2.23-1.85 4.56-3.6 6.86-5.36 4.45-3.39 8.93-6.77 13.43-10.09 4.95-3.64 9.94-7.13 15.21-10.31 4.92-3 10-5.73 15-8.48 17.52-9.09 35.24-18.62 54.46-23.39a52.23 52.23 0 018.56-.91zm2.58.39a9.25 9.25 0 01.61 1.17l-.62-1.17z"></path>
+    <path class="cls-2" d="M375 1431.59c-9.42 3-18.58 6.92-27.76 10.57-8.44 3.36-16.8 6.95-25.15 10.53l-12.62 5.45c-3.65 1.58-7.35 3.09-10.89 4.9-8.43 4.31-16.67 9-25 13.46a90.31 90.31 0 01-11.47 4.83c-2.28.77-4.56 1.56-6.84 2.35-3.85 1.34-7.87 2.3-11.21 4.76a13.53 13.53 0 00-5.42 8.4 13.29 13.29 0 004.44 12.57c3.25 3.16 7.41 4.1 11.74 4.48 3.17.28 6.37.32 9.55.33h14.8c2.45 0 4.91 0 7.38-.07a132.1 132.1 0 0020.16-2.78 119.68 119.68 0 0018.81-4.94c2.76-1 5.49-2.19 8.12-3.47 2.84-1.39 5.67-2.77 8.48-4.21 2.07-1.07 4.21-2.14 6.25-3.3a34 34 0 007.52-6 14.39 14.39 0 003.19-6.67 14.91 14.91 0 00.25-2.49l1.91-.83c5-2.14 7.89-7.48 5.94-12.79a9.61 9.61 0 00-2.36-3.66q4.55-2.31 9.16-4.49c1.54-.72 3.1-1.42 4.66-2.11 1-.44 2-.91 3-1.39 1.39-.71 2.75-1.43 4.11-2.2 1.88-1 3-3.12 4.06-4.87 2.1-3.57 1.29-8.69-1-11.93a11.72 11.72 0 00-9.74-5 13 13 0 00-4.06.65zm-122.1-254.73c-4.7 1.26-8.21 3.94-11.57 7.34a26.81 26.81 0 00-3.67 5.68c-1.43 2.51-2.07 5.49-2.94 8.21-2.19 6.83-2.72 14.3-3.19 21.41a207 207 0 00-.1 27.62 177.8 177.8 0 003.44 23.65c1.15 5.63 2.2 11.3 3.55 16.88 2.17 8.94 4.29 17.89 6.84 26.73a237.28 237.28 0 008.47 24.74c1.66 4.07 3.53 8.05 5.35 12.06 2.82 6.23 5.67 12.81 11 17.33a15.38 15.38 0 0023.79-5.07c2.27-3.52 2.33-7.71 2.34-11.73v-.21c2-6 4-12.15 5.42-18.36a173.22 173.22 0 003.5-24.82c.74-9 1-18.11 1.42-27.17.23-5 .52-10 .47-15-.08-9-1.88-17.77-3.9-26.53-1.33-5.77-3-11.5-4.84-17.12s-3.69-11.14-5.85-16.61c-3.29-8.38-7.39-17-14.33-23a28.4 28.4 0 00-8.33-4.9 34.75 34.75 0 00-6.75-1.9 19.61 19.61 0 00-3.3-.28 26 26 0 00-6.79 1zm11.93 28.14zm-1.3 10.4q2 4.74 3.74 9.59a12.57 12.57 0 00-4.48.64c0-.9 0-1.8.08-2.7.16-2.51.36-5 .66-7.53z"></path>
+    <path class="cls-2" d="M418.23 1264.34a86.06 86.06 0 00-13.49 1.58 184.81 184.81 0 00-24.94 6.44 158.72 158.72 0 00-25.07 11.53c-9.68 5.28-19 11.23-28.23 17.26a112 112 0 00-11.2 8.44q-3.76 3.23-7.37 6.62a33.17 33.17 0 00-6.21 8.19c-2.32 4.18-1.55 9.88 1.09 13.7a11.41 11.41 0 00.06 13c3 4.09 5.91 8.33 9.82 11.64 7 5.91 16.78 7.12 25.55 7.4 13 .41 25.81-1.9 38.49-4.52a153 153 0 0018.56-5.09 59.68 59.68 0 007.91-3.55 95.38 95.38 0 0010.05-5.9c3.19-2.16 6.23-4.56 9.31-6.88 6.34-4.8 12.76-10 18-16a66.39 66.39 0 007.05-10.15c2.24-3.74 3.47-8 4.77-12.11a43.07 43.07 0 001.8-10.14 54.52 54.52 0 00.13-6.76c-.33-1.69-.69-3.39-1.08-5.07a13.54 13.54 0 00-1.36-3.06 24.48 24.48 0 00-3.72-5.82 25 25 0 00-4.78-4.44 40 40 0 00-5.75-3.35 47.71 47.71 0 00-6.31-2.12 24.07 24.07 0 00-5.53-.75c-1.92-.12-3.8-.19-5.7-.19h-1.88zm4.8 28a27.37 27.37 0 012.83.47l.9.41v.59a51.74 51.74 0 01-1.51 7.59 46.68 46.68 0 01-3.18 6.61 63.89 63.89 0 01-6.91 7.9c-7.87 7-16 14-25.23 19.24a116.55 116.55 0 01-25.3 8.41c-9.51 2-19.1 3.41-28.82 3.24a44.4 44.4 0 01-6.47-1c-.72-.29-1.42-.6-2.13-.94l-1-.8c-.8-1-1.59-2.06-2.36-3.1a67.07 67.07 0 009.43-7.27c3.48-3 7.11-5.81 10.87-8.42a344.65 344.65 0 0131-19.7 154.66 154.66 0 0114.4-6.31 137.91 137.91 0 0117.6-5.13 88.3 88.3 0 0115.8-1.78zm4.15 1.41a9.75 9.75 0 01.29 1.3c-.1-.43-.19-.86-.29-1.3zm.43.37a12.9 12.9 0 01.6 1.17l-.6-1.17z"></path>
+    <path class="cls-2" d="M401.81 1286.68a15.86 15.86 0 00-10.75 5.52l-.75 1.16q-1.67 1.23-3.39 2.37c-2.58.72-5.14 1.47-7.7 2.2a181.46 181.46 0 00-25.78 9.14 97.44 97.44 0 00-9.22 4.84 18.37 18.37 0 00-7.31 7.44 12.41 12.41 0 00-.7 1.78 15.31 15.31 0 00-1 1.37c-1.75.88-3.5 1.8-5.26 2.71-1.5.47-3 1-4.48 1.48-2.17.76-4.28 1.59-6.38 2.5s-5.12 2-6.81 3.38c-2.5 2-4.62 3.83-6 6.77a15.34 15.34 0 00-1.44 8.56 16.31 16.31 0 005.51 10.73 16 16 0 0015.61 2.78 131.93 131.93 0 0016-7.27l2.59-1.29q6.58-2.56 13-5.51 3.15-1.44 6.27-2.94c1.42-.12 2.84-.25 4.26-.4 4.26-.44 8.51-1.09 12.75-1.69q3-.42 5.89-1a59.56 59.56 0 0012.9-4.28c4.29-2 8.4-4.33 12.53-6.57 1.25-.69 2.46-1.46 3.69-2.18a55.14 55.14 0 009.36-7.61 27 27 0 002.72-4 18.85 18.85 0 001.78-6 13.55 13.55 0 00-.59-7.08 17.59 17.59 0 00-4.61-6.73 17.85 17.85 0 00-4-2.85 24.54 24.54 0 00-5.56-2 15.73 15.73 0 00-11.75-5.34h-1.29zm-148.07-94.41a11.12 11.12 0 00-6.16 5.59c-2.17 4.44-.9 9.53-.27 14.2.49 3.56.71 7.17 1 10.74a10 10 0 005 7.78c2 10.32 4 20.64 5.75 31 .54 3.2 1.57 5.87 4.11 8a11.91 11.91 0 008.6 2.76c6.29-.52 11.48-6.32 10.79-12.72-1.07-10-2.62-19.79-4.44-29.62-.59-3.15-1.4-6.29-2.1-9.41-.47-2-.91-4.06-1.5-6.07-.73-2.48-1.45-5-2.18-7.44a38.4 38.4 0 00-3.63-8.58 16.78 16.78 0 00-3.3-4c-1.81-1.54-3.64-2-5.85-2.68a11.13 11.13 0 00-5.85.48z"></path>
+    <path class="cls-2" d="M423.19 1290.51q-6 .67-12 1.4a10 10 0 00-8.71 7.84c-3.27.64-6.55 1.21-9.84 1.69-6.17.88-12.35 1.71-18.52 2.57a7.68 7.68 0 00-6.93 8.17c.33 3.94 4.07 7.49 8.17 6.93 10.23-1.42 20.48-2.62 30.69-4.22 4.16-.65 8.29-1.42 12.42-2.2 5.4-1 10.84-2 16.2-3.14a17 17 0 003.68-1 10.75 10.75 0 004.28-3.22 9.52 9.52 0 001.66-9.32 9.38 9.38 0 00-7.08-6 26.73 26.73 0 00-4.18-.31 85.56 85.56 0 00-9.85.86zm43.06-356.19a22.09 22.09 0 00-5.06 2.79 15.52 15.52 0 00-3.69 4.07c-4.78 7.15-6.43 15.66-7.89 24a165.71 165.71 0 00-2.09 24.68 169.32 169.32 0 001.49 25.45c1 7.7 2.53 15.31 4 22.94 1.1 5.94 2.41 11.84 3.76 17.72a163.06 163.06 0 005.32 19 73.85 73.85 0 004 9.16 53.41 53.41 0 003.3 5.9 49.5 49.5 0 005.19 6.13 12.63 12.63 0 0019.55-4.17 12.3 12.3 0 00.47-9.8c-2-4.49-4.57-8.7-7-13-.18-.39-.35-.78-.53-1.16a8.89 8.89 0 002.79-.52c1.91-.71 4.18-2.4 4.86-4.42 2.25-6.6 4.1-13.24 5.74-20a108.66 108.66 0 002.63-18.49 210.8 210.8 0 00.09-26 142.22 142.22 0 00-4-24.69c-1.24-5.24-3-10.36-4.63-15.48-.8-2.49-1.74-4.91-2.65-7.36a38.71 38.71 0 00-4-7.94 22.78 22.78 0 00-10-7.93 19.59 19.59 0 00-7.5-1.64 11 11 0 00-4.19.75zm3.69 19.12a9.9 9.9 0 01.87.56l-.87-.56zm-.78.09l.5.16-.5-.16zm-.1.44h.74-.74zm3.93 3.12c1.29 2.94 2.45 5.93 3.52 9a205.52 205.52 0 016.4 21 160.85 160.85 0 012.46 37.18 115.43 115.43 0 01-1.65 13.34c-.42 2.19-.94 4.36-1.43 6.54s-1.09 4.36-1.72 6.52c-3.06-9.86-5.34-20-7.63-30-1.25-6.86-2.36-13.72-2.95-20.67a159.29 159.29 0 01-.37-20 120.1 120.1 0 013.38-22.91z"></path>
+    <path class="cls-2" d="M484.72 940.89a11.81 11.81 0 00-4.81 7.44 11 11 0 00-.19 2.33 12.11 12.11 0 00-4.48 3.15 14.3 14.3 0 00-2.91 6.17c-.42 3.65-.08 7.19-.12 10.83 0 3.21.09 6.42.25 9.62a9.5 9.5 0 00-5.9 7.15c-1.57 10.24-.38 20.6.42 30.86.23 3.1.47 6.21.71 9.31.19 2.52.63 5 .95 7.56.68 5.37 1.4 10.74 2.2 16.09 0 1-.07 1.93-.11 2.89-.08 1.38-.16 2.75-.25 4.12-.05.89-.09 1.77-.14 2.66a9.88 9.88 0 001.76 4.85 10 10 0 001.46 1.66c.15.74.29 1.48.44 2.23.43 2.18.9 4.35 1.39 6.52a29.62 29.62 0 004 10.09 14.14 14.14 0 005 4.19 11.34 11.34 0 008.3.39c4.55-1.24 7.88-5 9.53-9.28a39.35 39.35 0 002.27-10.76 16.37 16.37 0 005.16-3.58 23.14 23.14 0 005.25-10.38c.47-1.69.83-3.37 1.14-5.11a105.84 105.84 0 001.32-12.94 166.43 166.43 0 00.26-21.42q-.42-5.64-.85-11.29c-.45-5.82-1.26-11.57-2-17.35q-1.44-11.18-3.86-22.17a85.38 85.38 0 00-2.57-9.53c-.53-1.53-1.14-3-1.77-4.48a51.13 51.13 0 00-3.31-6.25 31.87 31.87 0 00-4.19-4.87 11.75 11.75 0 00-5.42-2.6 11.81 11.81 0 00-8.93 1.93z"></path>
+    <path class="cls-2" d="M472.89 931.1c-3.77 4-4.17 10.56-3.18 15.67a82.81 82.81 0 002.09 8.23c.63 2 1.2 4.1 1.87 6.12a23.12 23.12 0 002.09 4.94c.4 3.83.76 7.66 1.14 11.48a221.18 221.18 0 011.35 25.6v.39c-.05 1.08-.11 2.17-.16 3.25a12.13 12.13 0 009.84 11c6.37 1.2 13.17-3.15 14.21-9.68 1.87-11.69-.11-23.49-1.79-35.08-.73-5-1.38-10-2.3-15q-.84-4.63-1.7-9.27a89.33 89.33 0 00-2.83-11.3c-1.23-3.81-3.8-7.46-7.57-9.08a11.76 11.76 0 00-4.68-1 11.42 11.42 0 00-8.35 3.79zm5.51 69.51v.75-.75z"></path>
+    <path class="cls-2" d="M474.94 929.94a35.93 35.93 0 00-4.89 2.73c-2.34 1.73-3.59 3.86-5 6.3-.16.46-.33.92-.49 1.39a31.48 31.48 0 00-1.42 4.71c-.43 1.75-.76 3.51-1.05 5.29-.57 3.59-.8 7.24-1.13 10.85a166.39 166.39 0 00-.41 20.71 10.88 10.88 0 002.13 6.09c0 .5 0 1 .05 1.51.08 2 .2 4.08.34 6.12.1 1.41.3 2.81.53 4.21.35 1.63.7 3.24 1.07 4.84a17.94 17.94 0 002.75 6c1 1.2 2 2.36 3.09 3.47a13.74 13.74 0 006.35 3c3.78 1.23 8.6 0 11.82-2.23 6.12-4.29 7.4-11.72 7.91-18.64a245.23 245.23 0 00-.12-30.31c-.23-4.42-.46-8.84-.87-13.25-.15-1.64-.31-3.29-.61-4.9-.24-1.28-.48-2.56-.73-3.83-.72-3.49-1.62-6.47-4-9.26a13.11 13.11 0 00-5.1-4.33 14.68 14.68 0 00-6.12-1.38 9 9 0 00-4.12.88zm95.94 107.75c-8.25 1.19-16.5 2.51-24.78 3.45l-14.21 1.61a71.66 71.66 0 00-11.65 2c-3.18.93-6.32 2-9.47 3.07-6.49 2.17-9.78 9.83-7.49 16.12a12.45 12.45 0 002.77 4.4 13.77 13.77 0 00-6.9 6.65 14.15 14.15 0 003.56 16.68c5 4.5 11.29 7.53 17.28 10.53 4.75 2.38 9.62 4.66 14.54 6.69 14.72 6 30.77 10.27 46.78 10.09 6.28-.07 12.48-.44 18.74-1 16.58-1.4 34.05-3.75 48.23-13.11a48.62 48.62 0 008.86-7.85 24.47 24.47 0 005.65-11.8c.91-4.54.28-8.86-.78-13.27s-3.14-8-5.2-11.91a44.73 44.73 0 00-10.2-12.71 48.47 48.47 0 00-9.49-6.11 51.39 51.39 0 00-6.29-2.6 79.52 79.52 0 00-26.74-4.15c-11.11 0-22.33 1.62-33.21 3.19zm-21.48 28.77c6.39-.59 12.76-1.44 19.14-2.15 11.91-1.34 23.75-2.44 35.72-2.17a87.44 87.44 0 0113.13 2.33 48.68 48.68 0 016.48 3.09c1 .74 1.93 1.52 2.83 2.35a44.91 44.91 0 013.21 5c.45 1 .86 2 1.23 3-.95.69-1.93 1.35-2.94 2a73.1 73.1 0 01-11.6 3.87 249.93 249.93 0 01-26.6 3.14c-4.61.37-9.22.54-13.84.46a130.75 130.75 0 01-21.45-4.19c-5.88-2.11-11.58-4.6-17.33-7-3.27-1.39-6.51-2.89-9.75-4.35-1.33-.6-2.71-1.2-4.12-1.76 1.47-.48 2.93-1 4.41-1.39 7.07-1.22 14.36-1.55 21.48-2.2zm83.29 10.18v.06-.06z"></path>
+    <path class="cls-2" d="M537.45 1055.76c-4.45.4-8.88 1-13.34 1.32-2.16.16-4.32.26-6.49.41-2.37.17-4.69.58-7 .84a14.79 14.79 0 00-8.36 26c3.18 2.7 6.72 3.45 10.78 3.46a30 30 0 007.13-1.13 35.23 35.23 0 014.82-.57c2.27-.11 4.54-.2 6.79-.48 5.28-.66 10.54-1.4 15.83-1.84h.72a16.75 16.75 0 00-.77 6.53 13.16 13.16 0 002.34 6.51c1.85 2.63 5.11 5.07 8.4 5.42a48.06 48.06 0 0015.46-.7c4.52-1 9-2 13.47-3.22 3.78-1.09 7.52-2.25 11.27-3.46l1.67-.56c.29-.08.59-.16.88-.27 2.26-.77 4.5-1.56 6.72-2.41 1.42-.54 2.77-1.19 4.18-1.75a14.24 14.24 0 001.48-.71c1.06 0 2.11 0 3.17.05 1.5.12 3 .24 4.5.38a56.16 56.16 0 007.78.27l1.22-.14c1.77-.35 3.55-.73 5.32-1.13a16.77 16.77 0 005.4-2.89c2.68-2.27 4.65-4.66 5.32-8.23.58-3.07.07-7.43-2.13-9.87-1-1.07-1.93-2.14-2.92-3.21a16.87 16.87 0 00-5.07-3c-3.37-1.28-6.68-1.61-10.21-2.08-4.26-.55-8.59-.72-12.89-1l-15.66-.84c-10.16-.56-20.29-1.46-30.46-1.84-5.24-.2-10.47-.39-15.7-.39-4.53 0-9.07.14-13.61.54zm25.23-245.88c-5 1.74-8.52 5.33-11.14 9.86a54.69 54.69 0 00-4.43 11.07c-2.58 8.08-3.62 16.72-4.36 25.12a255.47 255.47 0 00-.38 40.37c.49 6.88 1.49 13.62 2.53 20.43 1.24 8.18 2.55 16.37 4.22 24.48 2 9.83 4 19.68 6.51 29.42 1.1 4.37 2.27 8.7 3.64 13a36.27 36.27 0 002.09 4.93c.91 1.84 1.86 3.65 2.91 5.41a16.26 16.26 0 0010.76 7.19 15.28 15.28 0 008-.66 17 17 0 004.34-2.42 13.18 13.18 0 003.61 1.24 13.91 13.91 0 0016.06-10.93q1.17-5.58 2.36-11.17c1.1-5.19 2.39-10.35 3.2-15.6a177.42 177.42 0 001.77-24.7 195.74 195.74 0 00-1.62-26.17c-1.94-16.27-6.17-32.21-10.53-48q-2.09-7.54-4.42-15c-1.65-5.28-3.28-10.61-5.44-15.7a114.93 114.93 0 00-5.47-11.21c-3.75-6.7-11.11-11.9-18.8-11.91a16.51 16.51 0 00-5.45.92zm13.49 103.23c-1-5.77-1.86-11.47-2.47-17.29a237 237 0 01-1-32.41c.44 1.52.89 3 1.34 4.54 3.09 10.41 5.77 20.87 8.36 31.4a207.07 207.07 0 014.12 47.31c-.24 3.43-.6 6.84-1.06 10.25-1.8-7-3.47-14-5.08-21-1.5-7.59-2.95-15.17-4.24-22.8z"></path>
+    <path class="cls-2" d="M579.76 871.07c-6.78.56-12.41 6.84-11.65 13.75.06.57.12 1.13.19 1.69a12.81 12.81 0 00-.8 1.34 23.56 23.56 0 00-2.46 8.69 98 98 0 00-.24 10.7c0 3.1.07 6.19.11 9.29s.09 5.9.16 8.84q-.51 3.36-1 6.7a12.13 12.13 0 001.43 7.79q.15 3.63.4 7.25c.17 2.51.32 5 .56 7.51.49 5.07.86 10 2.84 14.82a13 13 0 006.38 7c2.82 1.35 6.83 1.84 9.77.47 3.5-1.64 6.92-3.55 8.57-7.31a21.95 21.95 0 002.13-10.52c.38-5.07.77-10.16.78-15.25v-11.16c0-5.1-.15-10.23-.38-15.32-.27-6-.58-12.08-1-18.1-.18-2.61-.51-5.19-.88-7.77-.3-2.93-.62-5.88-1.2-8.76-.24-1.12-.48-2.23-.73-3.34a12.68 12.68 0 00-3.72-5.34 12.81 12.81 0 00-8.27-3h-1zm12 87.5l.4.77a8 8 0 01-.4-.77z"></path>
+    <path class="cls-2" d="M672.25 936.24a103.07 103.07 0 00-11.65.6 121.72 121.72 0 00-14.25 2.83c-6.68 1.7-13.14 4.57-19.45 7.31-5.16 2.23-10.75 5.28-13.88 10-2.17.24-4.33.45-6.51.54a12 12 0 00-13.29 12.57 11.79 11.79 0 00-3.58 1.65 10.63 10.63 0 00-2.64 14.79c1.72 2.47 4 3.5 6.72 4.35 4 1.25 8.08 2.52 12.12 3.79q14.36 4.76 28.51 10.06c2.31.87 4.6 1.8 6.9 2.69a86.39 86.39 0 0016.67 4.82c7.19 1.24 14.63 1.45 21.92 1.89a99.33 99.33 0 0018.33-.19c6.12-.76 12.41-1.87 18.1-4.33a87.19 87.19 0 009.52-4.89 38.82 38.82 0 007.36-6.05c1.69-1.66 2.81-4 4-6a19.35 19.35 0 001.28-3.21q.88-2.45 1.56-5a35.4 35.4 0 00.84-5 50.23 50.23 0 00.54-7.82 42.17 42.17 0 00-2.37-12.21 29.33 29.33 0 00-7.62-11.25 33.32 33.32 0 00-11.36-6.9c-11.21-4.07-23.22-4.42-35-4.81-3.5-.12-7-.25-10.52-.25h-2.17zm21.26 29a87.2 87.2 0 0116.09 2.25c.78.32 1.54.66 2.29 1l1 .85.18.26c.33.79.61 1.58.87 2.39s.17 1.9.2 2.87a44.14 44.14 0 01-1 6c-.08.18-.17.35-.25.53l-.07.08a44.18 44.18 0 01-5.34 3.55 59.73 59.73 0 01-8.35 3 86.5 86.5 0 01-14.13 1.66c-5.42.15-10.82 0-16.23-.22a85 85 0 01-17.28-2.75c-2.44-.69-4.86-1.45-7.28-2.19l-9.92-3a13.62 13.62 0 006.52-7.93c2.08-.75 4.12-1.69 6.15-2.52a102.42 102.42 0 0113.57-4.54c10.91-1.72 22-1.73 33-1.3zM714 979.9l-.38.58.38-.58z"></path>
+    <path class="cls-2" d="M618.23 954.53a9.13 9.13 0 00-3.72 5.75 8.43 8.43 0 00-.16 1.8 13.46 13.46 0 00-7.4 17c1.13 3.09 3.7 6.28 6.83 7.52a43.76 43.76 0 004.75 1.66c1.86.17 3.73.29 5.6.35 2.65-.09 5.26-.32 7.88-.67s5.38-1 8-1.56c1.41-.3 2.81-.61 4.2-.94 1.92.06 3.84.08 5.77 0h.8a12.34 12.34 0 009.09 7.16c9.38 1.4 18.91.63 28.34.24 5.5-.23 11-.81 16.48-1.32 8.66-.82 17.79-1.48 25.79-5.1 4.83-2.18 8.6-6 9.28-11.51a16.83 16.83 0 00-.88-7.93 14.23 14.23 0 00-4.77-6.3c-3.21-2.72-7.48-3.63-11.48-4.44a86.4 86.4 0 00-14.63-1.21c-9.72-.3-19.46.45-29.18 1q-6.47.36-12.92.8a13.35 13.35 0 00-7.16-3.9l-3.57-.18a13.25 13.25 0 00-6.55 2.35c-.26.16-.52.32-.79.47a57 57 0 01-6.91 2.57q-7.9-2.61-15.83-5.15a5.33 5.33 0 00-1.66-.24 9.76 9.76 0 00-5.25 1.73z"></path>
+    <path class="cls-2" d="M589.18 874.38a12.37 12.37 0 00-7.29 15.72c2.3 6 4.63 12 7 18 4.22 11 8.48 22 11.29 33.47a68.32 68.32 0 011.13 12.51 44.11 44.11 0 01-1 5.73l-.28.66c-1.49-.31-3-.67-4.46-1-1.72-.39-3.46-.74-5.18-1.16-5-1.23-10-2.45-15-3.7-7.24-1.81-14.67 3.9-16 10.9a13.84 13.84 0 002.24 10.4 14.32 14.32 0 008.67 5.6c7.47 1.87 14.95 3.73 22.46 5.45l2.38.56a35.84 35.84 0 009 .74c5.81-.11 11.63-3.38 15.43-7.66a35.19 35.19 0 007.39-13.86 55.15 55.15 0 001.84-15.84c0-9.55-2.93-19-5.83-28a192.21 192.21 0 00-7.79-19.47c-3.27-7.34-6.56-14.64-10.2-21.81-.5-.93-1-1.86-1.47-2.81a12.29 12.29 0 00-14.25-4.48zM600.63 960l-.32.48.32-.48zm.41.43l-.27.27.3-.27z"></path>
+    <path class="cls-2" d="M562.76 852.45a14.84 14.84 0 00-5.82 9.29 23.37 23.37 0 00.38 8.77c.79 4 1.78 7.86 2.71 11.79.1.62.2 1.25.29 1.87l-.51 1.33a12.49 12.49 0 00-.45 9.19 11.84 11.84 0 0015.19 7 11.51 11.51 0 006.6-6c.1-.24.2-.49.29-.74s.43-.27.64-.42c3.13-2.2 4.67-5.17 5.66-8.76.83-3 .18-7-1-9.84l-.07-.17a40.08 40.08 0 00.16-7c-.46-6.87-4.36-13.85-10.42-17.22a12.85 12.85 0 00-6.17-1.49 12.22 12.22 0 00-7.49 2.36zm-445.21 861.92a12.57 12.57 0 00-1.65 2.5c-.17.18-.34.36-.49.54-1.83 2.15-3.38 5.75-2.78 8.64.45 2.2.66 4.37 2.16 6.18.53.63 1 1.22 1.61 1.82q1.56 1.73 3.14 3.43c1.56 1.72 3.12 3.45 4.6 5.26.61.75 1.23 1.51 1.84 2.28.86 1.71 1.83 3.37 2.74 5 .44.8.92 1.57 1.4 2.35s1 1.57 1.57 2.33l.28.36a11.4 11.4 0 004.36 9.08 47.27 47.27 0 013.86 3.15c.73 1 1.39 2 2.06 3 .41.6.81 1.2 1.24 1.77a16.23 16.23 0 003.62 4l2.63 1.71a12.25 12.25 0 0016.38-5.77c.38-1.06.74-2.14 1.07-3.22a12.44 12.44 0 00-.54-6.54 29 29 0 00-2.59-5.28c-.86-1.55-1.87-3-2.84-4.5-2.07-3.16-4.16-6.3-6.23-9.46q-3.7-5.67-7.45-11.3c-1.45-2.18-3-4.32-4.49-6.48a17.17 17.17 0 00-1.2-4.26 23.35 23.35 0 00-4.86-7.11 12.43 12.43 0 00-7.5-3.68 15.06 15.06 0 00-2.21-.17 12.54 12.54 0 00-9.73 4.4zm34.87 234.92a39.45 39.45 0 00-7.2 1.31 17.93 17.93 0 00-8.52 27.08c2.49 3.54 6.91 6.86 11.34 7.32a81.37 81.37 0 0010.93.18c1.75 0 3.51-.09 5.27-.09a71.88 71.88 0 0111.42 2.44 76.41 76.41 0 0111.91 5.2 76.71 76.71 0 019.18 7.11 45.35 45.35 0 013.41 5.25 71.11 71.11 0 012.86 7c2.67 7.74 11.7 11.71 19.28 9a15.22 15.22 0 008.95-19.28 95.87 95.87 0 00-6.49-14.31c-.81-1.5-1.65-3-2.57-4.43a51.65 51.65 0 00-5.74-6.86c-5.24-5.63-10.69-11-17.37-14.88-3-1.75-6-3.39-9.16-4.88a92.48 92.48 0 00-14.23-5 52.23 52.23 0 00-11.31-1.76c-3-.18-5.94-.36-8.91-.36h-3.05z"></path>
+    <path class="cls-2" d="M131.72 1966.23a14 14 0 00-5.67 8.77c-.64 3.41 0 7.75 2.27 10.51 6.07 7.41 11.93 14.88 17.48 22.68a138.93 138.93 0 008.85 10.81c3.82 4.41 7.86 8.68 12.08 12.71 3.18 3 6.36 6 9.58 9 1.75 1.64 3.52 3.28 5.42 4.74a91 91 0 008.86 5.78c3.42 2 7.06 3.71 10.52 5.69a31.29 31.29 0 004.84 2.43c1.85.66 3.71 1.29 5.61 1.82a32.87 32.87 0 006.42.46 33.21 33.21 0 007.94-1.43 17.55 17.55 0 0011.44-17.89c-.76-9.23-9.41-17.21-18.9-16l-.71.09c-2.19-1-4.33-2.2-6.53-3.18a96.58 96.58 0 01-9-4.41c-2.44-1.75-4.79-3.64-7.13-5.52-3-2.41-6.08-4.71-9.1-7.08s-5.91-5.08-8.82-7.68c-2.67-2.38-5.33-4.78-7.8-7.36-6.28-7-12.35-14.24-18.34-21.5-2.36-2.87-5-5-8.76-5.66a13.92 13.92 0 00-10.52 2.25z"></path>
+    <path class="cls-2" d="M150.88 1976.21c-1.58 1.9-3.35 4.79-3.6 7.34a18.7 18.7 0 00.65 8.48c.84 3.34 3.49 6.3 5.9 8.59a14.4 14.4 0 0011.39 3.53c2 1.19 4 2.45 5.91 3.71 4.55 3.09 9.06 6.22 13.52 9.43 1.93 1.4 3.84 2.81 5.73 4.28l1.12.87c.6.86 1.18 1.74 1.73 2.64.73 1.76 1.34 3.55 1.94 5.37 2.13 6.38 9.67 9.6 15.84 7.35a12.11 12.11 0 007.19-7.14l.15-.1a15 15 0 004.91-5.79l1.21-3.7a15 15 0 00-.65-7.94c-1-4.44-4.89-7.8-8.09-10.74-.95-.86-2-1.65-2.95-2.48-1.93-1.62-3.82-3.27-5.83-4.79-5.1-3.85-10.21-7.6-15.43-11.28a149.6 149.6 0 00-15.85-9.81 33.84 33.84 0 00-9-3.14 16.12 16.12 0 00-3.19-.31 16.58 16.58 0 00-12.61 5.63zm-52.23-56.39c-.9 2.7-1.88 5.36-3 8a63.87 63.87 0 01-3 6.79l-.65 1.18a11.47 11.47 0 009.53-6.46 11.93 11.93 0 00-2-12.95c-.25 1.16-.65 2.29-1 3.44zm-31.75 12.33c.6 1.33 1.42 2.63 2.06 3.81a9.65 9.65 0 003.5 3.45c-.13-.24-.26-.5-.38-.76a7 7 0 01-2.69-3.64c-.38-1.32-.68-2.65-.93-4l-1.56 1.12zm240.22 153.69a41.06 41.06 0 00-2.06 6.24 45.71 45.71 0 00-2.33 6.6 27.68 27.68 0 00-1.36 5.72c-1.2 2.5-2.48 5-3.76 7.43-1.66 3.16-3.43 6.3-5.26 9.37-2.23 3.71-2.07 9.19-.64 13.11a16.9 16.9 0 0021.68 10.06 17.59 17.59 0 009.44-8.56c2.24-4.08 4.29-8.26 6.32-12.44a111.68 111.68 0 004.5-10.42c2.69-7.41 5.28-17.15-.64-23.85q-.21-.3-.42-.57a13.6 13.6 0 00-10.69-10.17 12.94 12.94 0 00-2.41-.22c-5.11 0-10.31 2.9-12.37 7.7z"></path>
+    <path class="cls-8" d="M127.9 1893.17a33.8 33.8 0 00-13.3 3.17 42.14 42.14 0 00-11.44 8.14 63.13 63.13 0 00-6.89 7.36A45.09 45.09 0 0090.2 1922a112 112 0 00-4.27 12.9 200 200 0 00-7 37.24 256.94 256.94 0 00-1 33.29c0 .92.07 1.85.11 2.76a42.16 42.16 0 001.2 7.75 23.47 23.47 0 007 11.87 16.71 16.71 0 0012.49 4.38 18.7 18.7 0 0012.24-6.41 50 50 0 006.85-10.91c2.36-4.9 4.06-10.18 5.93-15.28q1.89-5.17 3.75-10.35 4.11-2.44 8.21-4.92c2-1.21 4-2.48 5.94-3.79a69.87 69.87 0 0011.55-9.89 31.89 31.89 0 003.08-3.89 45.78 45.78 0 003.32-5.49 42.19 42.19 0 002.18-6.42 80.37 80.37 0 002.88-13.49c.75-5.78 1.18-11.64.22-17.42a35.22 35.22 0 00-8-17.6 38.65 38.65 0 00-15.92-11 50.47 50.47 0 00-6.49-2 17.17 17.17 0 00-3.67-.32c-1 0-1.91 0-2.82.05zm2.32 26c.53.09 1.05.21 1.58.34a32.36 32.36 0 014 1.89c.69.52 1.35 1.07 2 1.65s1 1.37 1.48 2.09a27.32 27.32 0 011 2.62 42.88 42.88 0 01.43 6.41 87.38 87.38 0 01-2.48 14.44c0-.9 0-1.8-.05-2.69a14.5 14.5 0 00-5.15-10c-1.05-.69-2.11-1.38-3.16-2.05a14.45 14.45 0 00-7.57-1.4 15.68 15.68 0 00-8 2 2.76 2.76 0 00.08-.27 38.24 38.24 0 012.33-5 59 59 0 016.21-7.1c.8-.64 1.61-1.22 2.47-1.78.7-.29 1.41-.56 2.13-.8.9-.12 1.8-.22 2.71-.28z"></path>
+    <path class="cls-8" d="M41.93 1931.62a50.23 50.23 0 00-9.27 1.23c-3.31.64-6.63 1.22-9.67 2.73-1.56.78-3.08 1.64-4.6 2.48-2.62 1.22-5.24 2.4-7.78 3.83l-.9.81a10.88 10.88 0 00-3.64 3.84 24.77 24.77 0 00-3.95 8.31c-1.23 4.47-.55 8.88.53 13.25v.21a36.42 36.42 0 001.64 6.7c.54 1.39 1.21 2.69 1.87 4v.1a63.6 63.6 0 005.26 9.7 80.15 80.15 0 0013.18 15.52 115 115 0 0014 10.66 118.29 118.29 0 0015.4 8.16 54.94 54.94 0 008.55 2.93l1.16.09a15.59 15.59 0 008.23-.68c3.1-1.13 4.92-3 7.25-5.23l2.16-3.33a15.58 15.58 0 001.48-8v-.88a11.57 11.57 0 0010.33-4 56.78 56.78 0 007.47-11.41c2.35-5 3-10.44 3.16-15.85a48.73 48.73 0 00-1.72-13.47 41.59 41.59 0 00-5.22-11.47c-3.61-5.95-9.78-10-15.69-13.37a49.13 49.13 0 00-15.62-5.26 121.49 121.49 0 00-21.48-1.6zm32.62 48.78a15.34 15.34 0 00-.66-8.06 40.91 40.91 0 00-2.78-5.73 37.46 37.46 0 00-4.22-5.88l1.11.27a49.19 49.19 0 016.4 3.13c.68.51 1.33 1 2 1.61a29.43 29.43 0 011.85 2.71 38 38 0 011.54 4.26 38 38 0 01.42 5.13 31.18 31.18 0 01-.7 4.29 32.47 32.47 0 01-1.62 3.23q-1.27 1.77-2.65 3.46a10.16 10.16 0 00-.69.93 29.48 29.48 0 00-1.5-3.63 16.8 16.8 0 001.5-5.73zm-33.9 35.91l-.77-.51.77.51zm-.77-.51c-.41-.26-.81-.53-1.21-.8l-1.33-.84 2.54 1.64z"></path>
+    <path class="cls-8" d="M120.27 1908c-3.58 4.33-6.06 9.64-8.72 14.56-2.18 4-4.35 8.1-6.76 12a114.86 114.86 0 01-10.23 12.62q-5.24 5.71-10.47 11.4c-3.85 4.16-3 11.11 1.21 14.67a10.55 10.55 0 0014.66-1.21c6.67-7.2 13.5-14.31 19.49-22.1a79.44 79.44 0 005.1-7.65 12.07 12.07 0 002.49-.61c3.07-1.13 5-3.24 6.58-6a61.93 61.93 0 004.7-9.74c1.41-3.82 2.71-7.44 1.93-11.55a11.27 11.27 0 00-2-5.59 11.43 11.43 0 00-4.4-3.73 11.46 11.46 0 00-13.57 2.9zm-37.45 92.29c-3 1.09-6.48 3.73-7.55 6.86-1.26 3.69-2.54 7.4-3.75 11.11.36-1.11.72-2.21 1.09-3.33q-3.52 10.71-7 21.43c-1.85 5.66-3.31 11.46-4.93 17.18-3 10.39-4.58 21.09-6.24 31.74-.89 5.7-1.36 11.49-1.93 17.23-.72 7.19-1.32 14.33 1.35 21.21a37.54 37.54 0 003.23 5.92 26.69 26.69 0 004.06 4.79c3.56 3.25 7.84 5 12.47 6s9.49.09 13.82-1.4a31.39 31.39 0 006.42-3.47 37.73 37.73 0 005.55-4.81 61.58 61.58 0 0013.19-20.36c5.43-13.23 7.64-27.59 8.52-41.78q.66-10.38 1.11-20.76c.1-2.48.06-5 .07-7.45s-.27-5.16-.51-7.7a17.59 17.59 0 00-7.51-12.84c-1.06-.7-2.13-1.39-3.2-2.08a14.78 14.78 0 00-7.66-1.41 14.57 14.57 0 00-3.13.6c.16-.5.33-1 .49-1.5a13.55 13.55 0 00-17.93-15.22z"></path>
+    <path class="cls-8" d="M107 1994.15a20.48 20.48 0 00-5 2.23c-.42.1-.85.19-1.27.3a31.91 31.91 0 00-6.45 3.43c-2 1.47-5.27 4.84-6.14 7.29-.12.31-.23.63-.34.94a16.57 16.57 0 00-1.58 8.58 19.35 19.35 0 003.5 10.52l.24.34a17 17 0 005.38 9.44c4.41 4.33 8.8 8.71 13.12 13.15 6.47 6.68 12.86 13.43 20 19.42a127.14 127.14 0 0037.16 21.21 136.8 136.8 0 0015.69 5.11 46.75 46.75 0 0012.14 1.09c4.92-.11 9.86-2.33 13.87-5 7.29-4.85 10.42-13.25 12.67-21.26.71-2.5.47-5.24.49-7.82-.12-.6-.23-1.2-.35-1.8a15.13 15.13 0 00-1.59-5.87c-2.37-5.34-6-9.29-10-13.44a59.64 59.64 0 00-8.05-6.46c-3.83-2.76-7.79-5.31-11.79-7.82-3.28-2.06-6.63-4-10-5.81-1.34-1.56-2.83-3-4.24-4.47a53.84 53.84 0 00-8.65-6.74 139 139 0 00-12-7.25c-4.27-2.31-8.77-4.14-13.21-6a58.15 58.15 0 00-22.55-5.13h-.12a39.15 39.15 0 00-10.92 1.82zm66.18 63.85l1.65 1c.85.57 1.7 1.14 2.54 1.73-1.91-.7-3.81-1.42-5.69-2.18.52-.17 1-.36 1.5-.56z"></path>
+    <path class="cls-9" d="M96.16 1983.46a31.37 31.37 0 00-13.57 8.17 27.31 27.31 0 00-7.87 15.4 16.05 16.05 0 002.53 11.75 15.51 15.51 0 005.22 4.68 22.26 22.26 0 006.16 10.17 24.77 24.77 0 005.59 3.7 11 11 0 004.46 1.27 30.43 30.43 0 003.07 1 15.8 15.8 0 006 .37c3.14-.29 5.4-1.62 8-3.16 2.14-1.24 4.45-4.38 5.57-6.49.19-.35.36-.71.53-1.06a46.69 46.69 0 003.86-5.83 19.2 19.2 0 001.71-3.71 39.71 39.71 0 002-7.24 26.12 26.12 0 00-1.76-15c-2.65-5.93-7.33-10.14-13.12-12.94a27.39 27.39 0 00-10.74-2.23 27.64 27.64 0 00-7.68 1.11z"></path>
+    <path class="cls-8" d="M112.64 1497c-2 .75-5.69 3.06-6.94 4.94-1.37 2-2.66 4.07-3.81 6.19a49 49 0 00-6.71 5.71 64.87 64.87 0 00-12.39 17.51 62.37 62.37 0 00-3.11 7.84 81.3 81.3 0 00-3.1 11.19 49.88 49.88 0 00-.58 11.71 27.56 27.56 0 001.27 6.61 43.12 43.12 0 002.8 5.81c1.12 1.23 2.24 2.45 3.35 3.68a20 20 0 005.54 3.18 57.19 57.19 0 006.44 1.92 31.79 31.79 0 007.49.47 25.77 25.77 0 006.33-1.53 42 42 0 005.75-2.83l1.41-1.15a35.19 35.19 0 004-3.88 36.39 36.39 0 003.77-5.54c4.12-6.87 6.7-14.71 8.69-22.44 1.94-7.55 2.36-15.63 2.26-23.39q0-3.81-.18-7.62c-.35-8.44-4.92-18.23-14.49-19a15.34 15.34 0 00-2.76-.26 14.84 14.84 0 00-5.06.9z"></path>
+    <path class="cls-8" d="M89.42 1487.61c-5 1.72-10 3.37-15.1 4.77-6.77 1.34-13.58 2.53-20.23 4.42a53.66 53.66 0 00-18.09 9.4 58.79 58.79 0 00-14.58 17 32.19 32.19 0 00-3.3 9.32 29.5 29.5 0 00-.29 6q0 1 .06 2.07a53.22 53.22 0 001.58 9.22c.86 4 2.12 8 4.89 11a21.47 21.47 0 006.33 5.36 10.89 10.89 0 002.48 1.19 22.91 22.91 0 005.55 1.49 28.58 28.58 0 006.06.06c11.76-1.28 20.81-9.67 29.69-16.65 3.8-3 7.59-6 11.34-9a142.43 142.43 0 0011.13-10 52 52 0 007.19-9.24 31.25 31.25 0 003.62-9.31 11.61 11.61 0 00-.41-6.79 15.2 15.2 0 00.69-11.66 14.53 14.53 0 00-13.75-9.46 15 15 0 00-4.87.82zM66.65 1524c-2.37 1.81-4.77 3.59-7.16 5.37-4 3-8 6-12.23 8.65v-.32q.43-.95.93-1.86a47.58 47.58 0 014.47-5.14 46.69 46.69 0 015.28-3.69 58.85 58.85 0 018.73-3z"></path>
+    <path class="cls-8" d="M72.87 1491.38l-2.51 1.32a10.78 10.78 0 00-3.59 4.22l-.2.32a36 36 0 01-4.19 4.7c-2.63 2.3-5.33 4.53-8 6.82s-5.34 4.73-8 7c-2.11 1.83-3.67 3.68-4.21 6.52a10.31 10.31 0 008.2 12 10.81 10.81 0 007.82-1.68 84.41 84.41 0 009.82-7.09c2.24-1.84 4.48-3.67 6.69-5.54s4.56-4.08 6.67-6.29 3.54-4.88 5.13-7.38 1.31-6 .4-8.49a10.95 10.95 0 00-14-6.51z"></path>
+    <path class="cls-8" d="M79.72 1399.16a26.15 26.15 0 00-9.65 2.58c-1.93.93-3.8 2-5.69 3s-3.57 2.9-5.23 4.46a22.28 22.28 0 00-3.9 5.61l-.45 1.34a15.46 15.46 0 00-1.48 8 39.35 39.35 0 002.08 10.22c3.19 10.23 7.68 20 12 29.79a198.57 198.57 0 009.47 19c1.24 2.15 2.76 4.2 4.15 6.27q2.74 4.1 5.51 8.15c4.52 6.71 14.14 8.24 20.68 3.66a14.77 14.77 0 006.25-12.21 15.65 15.65 0 003.36-1.77c3-2.15 5.93-6 6.34-9.82a62.24 62.24 0 00.15-12.28 75.52 75.52 0 00-2-10.94c-1.58-6.4-3.42-12.65-5.6-18.88a97.57 97.57 0 00-10.6-22c-5.2-7.8-14.22-14.25-23.87-14.25-.49 0-1 0-1.47.05z"></path>
+    <path class="cls-8" d="M137.63 1409.37a28.86 28.86 0 00-5.77 2.77 17.17 17.17 0 00-2.86 2.16 58.92 58.92 0 00-6.93 6.75 96 96 0 00-6.53 9.44c-1.27 2-2.42 4-3.6 6.06a59.84 59.84 0 00-6.34 17.2c-.58 2.57-.76 5.27-1.1 7.89s-.58 5.36-.83 8c-.06.65-.13 1.3-.2 2a10.9 10.9 0 00-1 .6 12.13 12.13 0 00-2.9 16.76c1.07 1.57 2.05 3.29 3.22 4.79a12.92 12.92 0 002.37 2.52 17.59 17.59 0 001.29 6.25c1.06 2.37 2.54 5.15 4.72 6.76a16.06 16.06 0 007 3.37 14.65 14.65 0 007.65-.63 14.48 14.48 0 002-.93 26 26 0 006.89-3.76 79.26 79.26 0 008.69-8.5c1.67-1.83 3.27-3.73 4.87-5.61a126 126 0 0011.73-16.18 75 75 0 008.87-23.13 70.53 70.53 0 001.13-13.84 36.5 36.5 0 00-.55-5.8 67.3 67.3 0 00-2.34-9.81c-2.57-8.26-10.46-15.24-19.24-15.93-1.53-.12-2.74-.2-3.85-.2a22 22 0 00-6.36 1z"></path>
+    <path class="cls-8" d="M127.41 1486.85a12.7 12.7 0 00-8.89 4.57 13.08 13.08 0 001.51 18.41 12.08 12.08 0 003.8 2.21 18.64 18.64 0 00.76 7.59 28.91 28.91 0 001.86 5 42.72 42.72 0 005.66 9.4c3.33 4 6.92 7.81 10.48 11.64a81.58 81.58 0 009.26 8.46 75.38 75.38 0 009.22 6 47.21 47.21 0 009.85 3.86c2.66.82 5.57.69 8.31.77a34.56 34.56 0 005.25-1 22.36 22.36 0 006-3.38 14.64 14.64 0 004.82-5.68 23.92 23.92 0 001.53-4.38 28.43 28.43 0 00.32-4.79 66.67 66.67 0 00-1.48-6.55 56.85 56.85 0 00-3.21-7.4 83 83 0 00-10.07-16.22 84.81 84.81 0 00-28-23.25 54.45 54.45 0 00-15.29-5 37.37 37.37 0 00-6.19-.43c-1.86 0-3.73.07-5.56.09zm243.67 81.25c-6.9.21-13.71 3.42-19.39 7.19a53.44 53.44 0 00-6.72 5.86c-2.1 2-4 4.13-6 6.31a48.39 48.39 0 00-9.1 15.5 49.94 49.94 0 00-2.15 8 43.29 43.29 0 00-.35 9.52 73.51 73.51 0 001.58 9.78 97.2 97.2 0 003.66 14.58 26.56 26.56 0 009.62 12.7 11.36 11.36 0 007.88 2.53 11 11 0 004.31-1.3c2.86.92 5.62 0 8.38-.65a12.63 12.63 0 003.94-2.21 19.23 19.23 0 005.44-6.48 56.22 56.22 0 002.6-5.56c1.61-3.78 3.21-7.58 4.82-11.37 1.75-4.1 3.46-8.21 5.16-12.31a112.58 112.58 0 006.59-20.55 58.21 58.21 0 00.8-10.54 11.89 11.89 0 00-.43-3.14 22.74 22.74 0 00-3-8.25 19.94 19.94 0 00-17.07-9.66zm-6.57 22.61l.33.32-.32-.35zm8.78 4.28l-1.33-.07a12 12 0 011.33.07z"></path>
+    <path class="cls-8" d="M395.52 1618.33a63.23 63.23 0 00-8 1.75 47.35 47.35 0 00-7.55 2.75 61.46 61.46 0 00-12.92 8.06c-5.31 4.18-9.89 9.26-15.51 13l-1.31.56c-5.38 2.24-8.45 8.07-6.38 13.75a10.47 10.47 0 001.94 3.24l-.8.21.82-.18c-1.85.42-3.7.86-5.53 1.38a17 17 0 00-6.69 4.64 15.43 15.43 0 00-3.34 7.25 14.83 14.83 0 005 14.13 19.77 19.77 0 008.51 4.18 45.15 45.15 0 007.72.71c1.94.08 3.89.12 5.83 0 4.94-.19 9.86-.46 14.79-.91a132.26 132.26 0 0016.74-2.9 139.6 139.6 0 0017.23-5.11 96.83 96.83 0 0016.9-8.26 44.28 44.28 0 007.13-5.83 34 34 0 006.44-8.69 48.08 48.08 0 001.78-5.1 16.43 16.43 0 00.59-5.41 27.41 27.41 0 00-1.85-9 57.24 57.24 0 00-3.74-7.47 31.72 31.72 0 00-6-8.1 40.07 40.07 0 00-6.37-4.51 17.54 17.54 0 00-3-1.25c-2-.73-4.06-1.32-6.09-1.95a34.52 34.52 0 00-10.28-1.44 49 49 0 00-6.07.39z"></path>
+    <path class="cls-8" d="M340.46 1643.79a15.41 15.41 0 00-8.7 27.1c5.74 4.81 11.4 9.71 17.09 14.58a11.16 11.16 0 00-4.64 2.14l-.33.26a12.37 12.37 0 00-10.48 9.8c-3.11 16.17-6.58 32.3-5.5 48.9.67 10.49 3.67 20.68 7.11 30.56a48.3 48.3 0 004.06 8.22 19.35 19.35 0 009.8 8.19 20.4 20.4 0 0010.41 1.37 20.16 20.16 0 0012.36-7.18c3.86-4.38 5.31-10.31 6-15.93.35-3.11.55-6.24.64-9.37.75.54 1.51 1.06 2.28 1.57a57.93 57.93 0 0011.47 6 42.83 42.83 0 0015.8 3.14c8.42-.11 17-3.88 21.81-11a30.44 30.44 0 003.41-6.25 45.65 45.65 0 002-6.89 44.84 44.84 0 00.49-7.42 33.73 33.73 0 00-.75-7.29c-1.56-9-5.37-17.23-10.36-24.87a107.67 107.67 0 00-16.13-19.31 48.68 48.68 0 00-8.39-5.78c-1.17-.69-2.33-1.38-3.51-2-2.44-1.39-4.91-2.75-7.42-4l-.48-.24c-1.3-1.15-2.61-2.28-3.93-3.41-9.19-7.9-18.57-15.6-27.93-23.3-1.62-1.33-3.25-2.64-4.91-3.93a16 16 0 00-10-3.65h-1.26zm17.76 125.62zm1.83.74z"></path>
+    <path class="cls-8" d="M300 1620.05c-7.28.14-14.78-.12-22 .85a69.79 69.79 0 00-27.57 10.1 30.39 30.39 0 00-9 8.39 26.5 26.5 0 00-4.29 8.94 19.34 19.34 0 00-.92 3.82 61.31 61.31 0 00-.5 7.88c0 8.36 4.07 16.73 11.7 20.68a32.53 32.53 0 0012.91 3.43 68.61 68.61 0 0016.51-.74 164.44 164.44 0 0029.24-8.25c5.56-2.06 11.13-4.11 16.64-6.29 1-.39 2-.84 3-1.28 1.56-.78 3.1-1.59 4.64-2.41a15.65 15.65 0 003.31-3.12 14.38 14.38 0 0019.57-18 29.24 29.24 0 00-7.12-11.53 35.8 35.8 0 00-9.95-6.51 65.44 65.44 0 00-17.16-5c-2.6-.42-5.34-.43-7.95-.61-3.11-.2-6.26-.35-9.38-.35h-1.72z"></path>
+    <path class="cls-8" d="M306.58 1653.05c-4.86 9.21-9.63 18.49-14.57 27.68-1.35 2.5-2.74 5-4 7.56a40.75 40.75 0 00-1.67 4.56c-.9 2.6-1.84 5.21-2.49 7.89a44.2 44.2 0 00-1 7.06c-.18 2.36-.32 4.73-.37 7.09a29 29 0 002.13 10.79c2 5.37 6.66 9.24 11.05 12.67 2.62 2 5.76 4 9.11 4.57a21.76 21.76 0 0012.15-1.26c7.75-3.17 12.73-10.64 15.87-18.07.59-1.4 1.12-2.84 1.59-4.29a11.75 11.75 0 002.65-2.57 24.35 24.35 0 003.55-6c.84-2.29 1.5-4.6 2.11-7a58.84 58.84 0 001.33-10.75c.17-2.55.24-5.11.33-7.66a31.27 31.27 0 00-.28-6.27 30.77 30.77 0 00-.86-4.25 15 15 0 00-8.35-15.1 14.65 14.65 0 00-4.68-1.33 12.8 12.8 0 00-7.07-11.22 12.05 12.05 0 00-5.23-1.2 12.9 12.9 0 00-11.28 7zm-1.5 63.3h-.1.1zm-42.19-656.82a93.08 93.08 0 00-12.26 2.59 35.91 35.91 0 00-7.7 3 58 58 0 00-5.16 2.77 32 32 0 00-5.73 4.83 26.84 26.84 0 00-5.84 8.67q-1 2.69-1.73 5.45c-.08.63-.15 1.25-.22 1.88a80.78 80.78 0 00-.25 6.41 64.68 64.68 0 00.5 9.12 53.74 53.74 0 005.27 17.14 64.36 64.36 0 005.73 9.87c4.54 6 9.53 12 15.44 16.74 6.13 4.88 13.44 7.66 20.82 10a76.5 76.5 0 0017.87 3.35 118.27 118.27 0 0020.87-.09c3.56-.37 7.11-1.23 10.62-1.9l4.07-.89a15.53 15.53 0 004.71-26.47 16.85 16.85 0 00-4.08-2.52 14.62 14.62 0 004.79-8.54 56.66 56.66 0 00.39-8.94 29 29 0 00-.58-3.83 43.09 43.09 0 00-2-7.53 65.89 65.89 0 00-5.06-9.85 64.21 64.21 0 00-4.93-7.1 69 69 0 00-14.14-13.7 74.37 74.37 0 00-9.35-5.77 56.72 56.72 0 00-10.82-3.8 44.1 44.1 0 00-11.93-1.49 79.37 79.37 0 00-9.3.6zm-5 32.2l-.36 1.11q.15-.55.36-1.11zm15.1 1a44.5 44.5 0 015.59 1.09 46 46 0 014.72 2.34 61.36 61.36 0 017.67 6.56 69 69 0 016.47 9.33 49.13 49.13 0 012.68 7.3 15.28 15.28 0 006.23 11.11 81.15 81.15 0 01-10.69.21 78.39 78.39 0 01-14.68-2.51 66.42 66.42 0 01-8.36-3.71 38.85 38.85 0 01-4.08-3.52 75.72 75.72 0 01-8.12-11.22 53.3 53.3 0 01-2.6-7.09 50.1 50.1 0 01-.49-7 48.39 48.39 0 016-1.91 64.91 64.91 0 019.64-1zm-15.2.71l-.24.38.24-.38zm0 1l-.48.44.48-.43z"></path>
+    <path class="cls-8" d="M264.42 1090.05a9.52 9.52 0 00-3.48 1.57 32.88 32.88 0 00-3.08 2.7 29.8 29.8 0 00-3 4.84 19.05 19.05 0 00-1.47 8.45 29.83 29.83 0 003 11.79c2.19 4.58 5.21 8.15 8.62 11.86l-2-2.15c2 2.19 3.73 4.36 6.42 5.7a16.58 16.58 0 006.29 1.79q1.48.56 3.06 1a38.78 38.78 0 008.61 1 11.92 11.92 0 005.9-2.13 11.93 11.93 0 002-17.8 18.68 18.68 0 00-.37-2.5 30 30 0 00-1.69-5.61 39.32 39.32 0 00-3.67-6.47 38 38 0 00-3.66-4.34c-1.45-1.58-2.93-3.1-4.5-4.55a20.55 20.55 0 00-10.25-5.57 12.15 12.15 0 00-2.25-.2 16.43 16.43 0 00-4.52.67zm28.01-7.54a6.92 6.92 0 00-4.67 2.39c-2.32 2.74-2.18 7.4.79 9.66a38.84 38.84 0 014.82 4.5 80.24 80.24 0 017.52 10.2 26.28 26.28 0 011.16 2.61c-.35.43-.71.83-1.09 1.23a5.77 5.77 0 108.8 7.47 20 20 0 003.3-4.69c1.34-2.59.67-5.71-.18-8.32a38.22 38.22 0 00-3-6.19c-1-1.8-2.21-3.48-3.34-5.19-1-1.5-1.93-3-3-4.52l-2-2.83a39.51 39.51 0 00-4.15-4.71 6.36 6.36 0 00-4.43-1.63h-.55zm1.55 17.22l.44.48-.44-.48zm8 12.39l-.14.22.14-.22z"></path>
+    <path class="cls-8" d="M348.29 1030.86q-2.6.53-5.18 1.11a20.36 20.36 0 00-6.18 3.78 16.5 16.5 0 00-3.44 3.39 44.25 44.25 0 00-3.31 5.24 76.22 76.22 0 00-5.88 13.1c-1.92 5.44-3.86 10.85-5.49 16.38-1.43 4.88-2.84 9.72-4 14.67-1.3 5.37-2.46 10.76-3.64 16.16-1.45 6.72 3.43 13.48 10 14.74a12.32 12.32 0 007.51-.94 12.72 12.72 0 001.94 2.16c6.28 5.61 15.54 3.8 22.59 1 2-.83 4.21-2.21 6.21-3.27a57.38 57.38 0 005.81-3.62 49.67 49.67 0 0015.43-17.83 53 53 0 003.49-9.78 43.68 43.68 0 001.32-10.45 59.64 59.64 0 00-3.48-22.05 39.23 39.23 0 00-11.38-17A26.74 26.74 0 00362 1033a40 40 0 00-6.74-1.89 25.88 25.88 0 00-4.41-.32h-2.58z"></path>
+    <path class="cls-8" d="M406.94 1066.35a21.21 21.21 0 00-4.43 3.41 45.05 45.05 0 00-4.87 1.37 44.27 44.27 0 00-9.31 4.84 113.62 113.62 0 00-12.19 9.18c-3.48 1-7 1.87-10.53 2.75s-6.87 1.71-10.31 2.54l-1.15.21-3.95.87a15.09 15.09 0 00-9.85 15.4 15.15 15.15 0 004.08 9.06 16.72 16.72 0 002.46 13.21c2.29 3.44 6.52 6.54 10.77 6.83a11.24 11.24 0 005 .11 23.48 23.48 0 006.56-1.91c3.11-1.45 6.28-3.12 9.26-4.79 4.43-2.48 8.77-5 13.08-7.69q2-1.2 3.87-2.44c5.5-1.82 10.76-4.64 15.91-7.28a39.89 39.89 0 006.9-4 28.8 28.8 0 007-8.47 21.78 21.78 0 003-10.65v-.89c.5-.77 1-1.55 1.49-2.33a15.42 15.42 0 00-11-21.81l-4.13-.22a15.4 15.4 0 00-7.59 2.73z"></path>
+    <path class="cls-8" d="M336.05 1078.71a13.31 13.31 0 00-7.14 6.49c-.26.46-.51.92-.76 1.39a70.33 70.33 0 01-10.47 6.58c-3.79 1.95-7.6 3.84-11.55 5.5q-7.42 3.13-14.87 6.27c-6 2.5-9.38 9-7.07 15.24a12 12 0 0015.23 7.08c6.75-2.29 13.46-4.68 20.1-7.27a113.4 113.4 0 0010.41-4.74 90.82 90.82 0 0012.23-7.11 42.32 42.32 0 005.83-5.28c.9-1.34 1.8-2.7 2.67-4.07.44-.84.89-1.67 1.36-2.51 3.35-6.13 0-14.19-6-17.1a12.88 12.88 0 00-9.95-.47zm-6.72 6.25a8.71 8.71 0 01-.78 1.19l.78-1.19zm-1.76 2.27l-.17.16.17-.16z"></path>
+    <path class="cls-8" d="M258.43 1093.18a13 13 0 00-3.17 18 60.42 60.42 0 006.55 7.64c-.05.26-.11.53-.17.8-.53 1.23-1.13 2.42-1.75 3.63-2.66 5.18-.13 11.78 5 14.25a10.76 10.76 0 0013.64-4 67.3 67.3 0 003.47 2.2c3.72 2.2 8.07 3.56 12.42 2.89l4-.88a87.17 87.17 0 004.28-2.25c3.55-2 5.22-6.06 6.27-9.72 1.42-4.9.36-10.13-1.45-14.77-1.92-4.91-5.11-8.47-8.72-12.17a14.85 14.85 0 00-6.89-3.3 15.07 15.07 0 00-11.37 2.44c-.34.24-.67.5-1 .77-1.44-1.33-2.86-2.67-4.34-4a13.46 13.46 0 00-7-3.7 12.79 12.79 0 00-2.38-.23 12.94 12.94 0 00-7.43 2.34zm56.18 55.43a42.93 42.93 0 00-9.69 9.38 60.13 60.13 0 00-7.22 14.7 107.62 107.62 0 00-5.36 24 105.34 105.34 0 00.21 27.31 89.65 89.65 0 003.62 15 20.75 20.75 0 007.25 10 20.37 20.37 0 008.07 3.78 23.12 23.12 0 0010.81-.46c7.49-2 13.5-7.74 17.92-13.92a75.74 75.74 0 0013.64-40.27 49.48 49.48 0 00.63-11.77 27.22 27.22 0 00-.75-4.76c-.18-2.06-.4-4.12-.61-6.19-.27-2.69-.74-5.36-1.26-8-.36-1.83-.78-3.64-1.19-5.45a18.56 18.56 0 00-2.41-5.54 14.23 14.23 0 00-6.19-5.63 19.13 19.13 0 00-8.89-1.69 10.93 10.93 0 00-3.62.69 12.42 12.42 0 00-8.35-3.25 11 11 0 00-6.61 2.14z"></path>
+    <path class="cls-8" d="M385.62 1118.61c-5.38.35-10.93.48-16.21 1.61-8.11 1.74-17.56 3.79-23.31 10.33a20.23 20.23 0 00-3.45 5.63 12.37 12.37 0 00-3.82.72 12.93 12.93 0 00-7.17 6.52 13.32 13.32 0 00-.49 10c3.26 10.84 6.66 21.55 11.23 31.92 2.55 5.78 5.11 11.54 7.75 17.27a73.68 73.68 0 006.57 11.94c.94 1.33 2.06 2.53 3.11 3.77 1.35 1.57 2.78 3.07 4.2 4.58a36.3 36.3 0 006.88 5.25c6.82 4.43 15.84 7.15 23.84 4.5a25.31 25.31 0 0010.78-7 33.32 33.32 0 007.09-13.11 43.05 43.05 0 001.7-16.37 47.62 47.62 0 005.94.31 34 34 0 007.85-1.14 38.1 38.1 0 0010.77-4.53c4.78-2.83 8.17-7.78 10.45-12.71 1.83-4 2.91-8.34 4.16-12.54a25.66 25.66 0 00-.23-15.32 32.13 32.13 0 00-6.46-11.07 53.87 53.87 0 00-5.53-5.57 60.46 60.46 0 00-7.84-5.19c-3.68-2.24-7.79-3.52-11.87-4.85-3.42-1.11-6.88-2.07-10.37-2.92a84.86 84.86 0 00-19.67-2.26q-3 0-5.9.2zm-249.22 799.5c-.61.22-1.22.46-1.82.71a17.57 17.57 0 00-16 5.86 26.59 26.59 0 00-3.07 4.44c-.61.42-1.2.86-1.79 1.31-.28.22-.57.45-.84.69a75.68 75.68 0 00-9.56 5.11 124.89 124.89 0 00-10.48 7.71c-1.58 1.27-3.25 2.44-4.94 3.55s-3.51 2.28-5.28 3.39c-9.89-4.24-23.2-1.28-28.13 9a17.38 17.38 0 00.18 15 10.74 10.74 0 00.09 7 9.31 9.31 0 00.46 1.07 12.52 12.52 0 00.68 6 13.15 13.15 0 003.85 5.53 13.39 13.39 0 006.07 2.9 12.8 12.8 0 007.47-.46c3-1.11 5.24-3.24 7.46-5.48a63.54 63.54 0 006.34-7.6q1.17-.37 2.31-.81a65.49 65.49 0 006.61-3.41c2.07-1.11 4-2.37 6-3.66 2.93-1.94 5.82-3.89 8.62-6 2.42-1.84 4.7-3.83 7.18-5.59l.8.13a17.27 17.27 0 005.36.15l.45.09a17.86 17.86 0 0013.46-2.9 18.32 18.32 0 007.25-11.22c0-.13.06-.27.1-.41l.49-.3c1.13-.67 2.23-1.43 3.34-2.14l1.11-.72a17.68 17.68 0 006-7 15.93 15.93 0 00-14.46-22.83 15.72 15.72 0 00-5.4.95zm-62.68 35.7l.77.25a7.66 7.66 0 01-.77-.25zm600.9-1228.16c-4.85-.06-9.24 2.1-12.86 5.19a38.62 38.62 0 00-4.66 4.65 53.51 53.51 0 00-4.48 6.86 54.91 54.91 0 00-4.82 12.08 76.83 76.83 0 00-2.36 10.08 82.8 82.8 0 00-.13 27.16 90.76 90.76 0 007.78 24.39c2.42 5.11 5.27 10.05 8 15a47 47 0 007.69 10 23 23 0 0011.77 6.74 21.13 21.13 0 0010.16-.89 17.2 17.2 0 007.21-5 24.4 24.4 0 003.13-4.58 36.28 36.28 0 002.19-7.18 35.41 35.41 0 00.25-7.32 11.25 11.25 0 002.57-1.29 21.34 21.34 0 006.93-8.41 30.22 30.22 0 001.83-5.59 36.66 36.66 0 001-5.28 65.81 65.81 0 00.15-14 88.83 88.83 0 00-5.78-23.86c-3.16-8.42-8-16.34-13.13-23.69a59.85 59.85 0 00-8.33-9.59 38.39 38.39 0 00-5.41-3.76l-3.39-1.11a11.36 11.36 0 00-4-.73c-.43 0-.85 0-1.28.06zm2.68 31.79l1.22 1.5c-.52-.2-1.06-.38-1.61-.54.13-.33.25-.64.39-1z"></path>
+    <path class="cls-8" d="M635.25 804.22a87.3 87.3 0 00-13.89 2.38c-10.32 2.4-19.11 8.28-27.8 14-2 1.36-4.07 2.76-6 4.29a49.52 49.52 0 00-5.27 4.87 26.56 26.56 0 00-6.07 12c-2 8.32.23 18.38 6.9 24.09a32.39 32.39 0 009.27 5.44A92.33 92.33 0 00608.3 876a88.76 88.76 0 0014 1.27 90.18 90.18 0 0011-.23 84.52 84.52 0 0010.37-1.68A90 90 0 00659 871a89 89 0 0012.25-6.29 33.84 33.84 0 006.42-5.47 43.1 43.1 0 004.49-6.52 32.16 32.16 0 002.6-7.33c.41-4.1.69-7.45-.71-11.45a26.08 26.08 0 00-4.7-8.18c.58-2.77.74-6.11-.35-8.65a21.74 21.74 0 00-2.45-4.43 17.45 17.45 0 00-6.68-4.93 37 37 0 00-10.43-2.75 116.61 116.61 0 00-12.39-1c-1.56-.07-3.13-.11-4.69-.11q-3.55 0-7.11.25z"></path>
+    <path class="cls-8" d="M679.27 832.91c-2.83 1-6.15 3.53-7.18 6.52-2.62 7.56-5.33 15-6.87 22.9-1.68 8.56-1.82 17.55-1.56 26.24a125.16 125.16 0 003 22 100.7 100.7 0 003 11.73 45.8 45.8 0 003.12 6.37 18 18 0 003.26 3.87 14.13 14.13 0 004.08 2.93 22.4 22.4 0 006.63 1.82l4 .21a38.22 38.22 0 005.35-1.29 25 25 0 006.13-3.49 33.49 33.49 0 005.15-5 40.17 40.17 0 004-6 48.78 48.78 0 002.34-4.62c.55-1.25 1.05-2.53 1.51-3.83a36.67 36.67 0 003.62-3.45 26.66 26.66 0 003.92-6.56 38.57 38.57 0 002.22-7.16 30.46 30.46 0 00.5-4.66 75.45 75.45 0 00.18-8.09 54.67 54.67 0 00-3.3-15.2c-.63-1.82-1.41-3.56-2.2-5.3-.51-1-1-2-1.46-3l-2.7-5.17c-.69-.91-1.49-1.92-2.37-2.9-.17-.59-.34-1.18-.52-1.77a28.34 28.34 0 00-1.41-3.69c-1.26-2.73-3.16-6.2-5.66-8.06a22.57 22.57 0 00-5.51-3.4 15.9 15.9 0 00-8.23-1.52 17.5 17.5 0 00-2.17.34 9 9 0 00-.81-.43 12.92 12.92 0 00-5.58-1.26 12.63 12.63 0 00-4.42.78z"></path>
+    <path class="cls-8" d="M716.85 836.79a18.57 18.57 0 00-11.06 9.4 19.18 19.18 0 00-1.45 4.23 13.24 13.24 0 00-1.77 2.78c-1.49 3.1-2.05 7.54-.52 10.75 2.89 6.16 5.73 12.36 8.78 18.44a205.34 205.34 0 0011.06 19.69A105.28 105.28 0 00737 920.23a68.31 68.31 0 0018.15 12.34 81.54 81.54 0 0010.43 3.95c1.84.58 3.69 1.09 5.55 1.6 2.45.67 5 .55 7.53.68a36.56 36.56 0 005.2-1 21.7 21.7 0 006-2.67c4.22-2.58 6.8-6.44 9.28-10.59a29.1 29.1 0 002.46-6.81 34.61 34.61 0 00.79-4.75 46.79 46.79 0 00-.3-12.51 76 76 0 00-6.66-20.77 89.13 89.13 0 00-11.59-18.7 79.39 79.39 0 00-7.49-7.85 67.68 67.68 0 00-10.68-7.42 56.28 56.28 0 00-9.34-4.28 107.15 107.15 0 00-13-4c-2.46-.58-5-.95-7.48-1.34a60.25 60.25 0 00-9.08-.77 33.42 33.42 0 00-9.91 1.38zm18 9.6l.61.66c-.2-.23-.41-.45-.61-.67zm1.57 1.72c.12.13.24.27.37.4-.13-.13-.25-.27-.37-.4zm32.91 58.25a13.34 13.34 0 002.15-1.42q.19 1.44.3 2.88l-1.21-.32c-.63-.23-1.25-.47-1.87-.72l.63-.42zm6.65 2.13l-.35.2.37-.2zm1.51.16c-.3.09-.61.16-.91.22l1-.21zm-6.44 3.2l-.38.34c.12-.12.25-.23.38-.34z"></path>
+    <path class="cls-8" d="M770 761.6a60.48 60.48 0 00-14.34 4.61c-15.45 7.24-28.76 18.7-39.93 31.48a152.93 152.93 0 00-13.81 17.72 33.42 33.42 0 00-3.77 9.33c-1.1 4-1.51 8.65.07 12.53 2.38 5.85 6.84 10.65 13.33 11.88a22 22 0 007.46.28 25.42 25.42 0 002.79-.59l2.23.7a50.1 50.1 0 0013.07 1.77 52.49 52.49 0 0014.23-1.41c15.74-3.68 28.68-14.81 37.95-27.67A87.89 87.89 0 00800.12 802a100 100 0 003.79-11.39 33.44 33.44 0 00.51-7 22.24 22.24 0 00-1.17-7.37 19.85 19.85 0 00-7.49-9.82 27.52 27.52 0 00-6-3.27 39.26 39.26 0 00-6.93-1.95 27.63 27.63 0 00-5.07-.44 39.87 39.87 0 00-7.8.82z"></path>
+    <path class="cls-9" d="M111.93 1471.94a13.51 13.51 0 00-6.68 2.4 17.64 17.64 0 00-3.32 2.88 20.53 20.53 0 00-4.62 8.27 11.44 11.44 0 00-1.25 4c-.46 3-.11 4.17.55 7.07a13.53 13.53 0 004.39 6.86 15.1 15.1 0 002 1.39l.31.26a20.79 20.79 0 008.62 4.13A16 16 0 00125 1506a13.75 13.75 0 003.3-3.2 18.51 18.51 0 003.62-7.55 19.52 19.52 0 00.46-5.52c-.19-2.24-1.35-6.29-2.88-8.06-.61-.71-1.23-1.4-1.86-2.09l-.11-.17c-1.45-2.24-4.13-5-6.7-6a19.27 19.27 0 00-6.94-1.66 10.55 10.55 0 00-2 .19zm-3.31 17.89a1.74 1.74 0 01.1.19c0-.07-.07-.13-.1-.2zm225.77-377.77c-3.89 1-7 3.46-9.88 6.12a31.19 31.19 0 00-4.21 3.68c-2.85 2.84-4 7.68-3.71 11.55a38.09 38.09 0 004.17 12.27 9 9 0 003.15 3.23l3.29 2.13a23.21 23.21 0 004.5 1.4 20.07 20.07 0 0010.24-1c4.92-1.73 8.33-5.38 10.83-9.81.19-.34.37-.68.53-1s.53-.66.77-1c1.61-2.32 3.43-5 3.8-7.93.36-2.73.48-5.87-.65-8.5a18.74 18.74 0 00-3.08-5.24 13.92 13.92 0 00-2.84-3 16.62 16.62 0 00-7.12-3.36 19.25 19.25 0 00-3.66-.37 24.15 24.15 0 00-6.13.91zm9.37 535.03a18.71 18.71 0 00-3.57 7.38 15.82 15.82 0 00-.5 5.47c.09.58.18 1.16.29 1.73a16.16 16.16 0 00.8 5.71 17.18 17.18 0 005 7.16 14.77 14.77 0 008.53 3.78 23.84 23.84 0 004.91.08 42.3 42.3 0 005-1 25.48 25.48 0 006.16-2.8c2.81-1.59 4.63-4.44 6.22-7.1a20.38 20.38 0 001.57-4.65c.85-2.7.15-5.59-.5-8.22-.82-3.24-3.05-5.65-5.33-7.95a30.46 30.46 0 00-5.57-3.83 19.54 19.54 0 00-6.22-2.27 14.44 14.44 0 00-2.86-.27 18.06 18.06 0 00-13.88 6.82zM711.1 809.85a19.7 19.7 0 00-6.07 1.69 27.1 27.1 0 00-7.87 5.48 21.28 21.28 0 00-4.12 5.86c-.22.36-.44.72-.65 1.08a17 17 0 00-.68 1.66 37.58 37.58 0 00-2 5.76c-.14 1.62-.21 3.24-.23 4.86.05.25.11.5.16.74a15.29 15.29 0 002.72 7.56 14.21 14.21 0 004.33 4.73 12.57 12.57 0 004.08 2.47c3.49 1.42 5 1.55 8.79 1.6a26.35 26.35 0 006.38-1.11c1.46-.71 2.91-1.45 4.34-2.24a41.78 41.78 0 004.3-3.79 20.82 20.82 0 003.67-5.47 13.1 13.1 0 00.84-1.84 21.75 21.75 0 003.19-7.12c.71-2.62.89-7.06-.36-9.63-.65-1.32-1.32-2.63-2-3.92a38.65 38.65 0 00-3.46-3.77c-3.28-3.08-8.39-4.75-13-4.75a18.12 18.12 0 00-2.36.15z"></path>
+    <path class="cls-10" d="M69.59 2018.12a68.87 68.87 0 00-9 1.54 21.31 21.31 0 00-4.65-.24c-7.89.49-14.83 3.81-21.54 7.73a57 57 0 00-7.71 5.57c-3.3 2.73-5.72 5.76-6.63 10-2 1.41-4 2.84-5.91 4.35a44.47 44.47 0 00-6.5 6.22 46.68 46.68 0 00-3.33 4.91A16.74 16.74 0 003 2072.68c2 5.44 7.17 9.33 12.72 10.56a38 38 0 0010.21.54 62.81 62.81 0 0010.27-1.93 46.78 46.78 0 009.26-3.28 56.42 56.42 0 009-5.17 54.13 54.13 0 007.85-7.13 86.69 86.69 0 006.46-8.43c3-4 5.8-8.14 7.31-12.75a14.1 14.1 0 008.69-14.09 14.24 14.24 0 00-13.87-13 11.5 11.5 0 00-1.31.07z"></path>
+    <path class="cls-10" d="M50.74 2001.92a14.18 14.18 0 00-11.6 8 97.41 97.41 0 00-4.88 10.63l-.15.24a92.41 92.41 0 01-6.66 9 6.44 6.44 0 00-1.05 1.18 11.79 11.79 0 00-2.63 5.5 11.94 11.94 0 009.5 13.95c2.91.56 6.73 0 9.07-1.95a64.3 64.3 0 006-5.81 14.9 14.9 0 002.78-.7 13.14 13.14 0 003.8-2.15c-.29.51-.59 1-.9 1.52-1.29 2.12.07 5.07 2.15 6.07 2.39 1.15 4.78 0 6.06-2.14 1-1.72 2-3.44 2.94-5.24.74-1.5 1.32-3.08 2-4.61a40.39 40.39 0 001.73-5.22 18.17 18.17 0 000-3 7.76 7.76 0 00-1.61-3.8c-.59-.67-1.2-1.33-1.82-2-.12-.12-.25-.23-.38-.34a13.77 13.77 0 00.92-6.21 14.14 14.14 0 00-14.12-13h-1.14zm6.95 29.61z"></path>
+    <path class="cls-3" d="M97.4 2053.87c-2.09 2-4.26 3.93-6.26 6-1.72 1.8-3.33 3.7-4.94 5.6-.82 1-1.62 1.95-2.41 2.94a30.63 30.63 0 00-2.57 3.81 28.78 28.78 0 00-3.62 11.95 4.23 4.23 0 001.29 3.09 4.37 4.37 0 006.16 0 4.75 4.75 0 001.28-3.09v-.39a31.58 31.58 0 011.5-6.3 31.55 31.55 0 013.2-5.29c1.54-2 3.1-4 4.82-5.85 1-1.12 2.1-2.22 3.2-3.28q1.93-1.82 3.85-3.65a4 4 0 000-5.55 3.84 3.84 0 00-2.74-1.12 4.05 4.05 0 00-2.8 1.12zm-32.96-20.43c-4.44 1.66-8.91 3.29-13.34 5q-3.1 1.21-6.09 2.68a36.27 36.27 0 00-4.41 2.51 23.06 23.06 0 00-3.29 2.7 20.29 20.29 0 00-1.8 2.24 4.51 4.51 0 00-.59 2.21 4.34 4.34 0 001.28 3.08 4.39 4.39 0 003.09 1.29 4.2 4.2 0 003.09-1.29 22.45 22.45 0 013-3 47.66 47.66 0 017.89-4.27c4.45-1.79 8.93-3.47 13.43-5.14a4.5 4.5 0 002.49-1.92 4.17 4.17 0 00-1.5-5.71 4.48 4.48 0 00-2.17-.59 3.08 3.08 0 00-1 .17zm-29.22-77.15a3.65 3.65 0 001.29 4.92c3.48 2.21 7 4.37 10.46 6.58 3.05 1.94 5.94 4.1 8.85 6.23a66.15 66.15 0 0110.49 10.13c.91 1.21 1.75 2.47 2.57 3.74a3.28 3.28 0 005.66-3.31 62.64 62.64 0 00-6.1-8 71 71 0 00-7.86-7.35c-2.14-1.75-4.35-3.43-6.6-5-4.49-3.21-9-6.37-13.83-9.17a3.58 3.58 0 00-1.78-.48 3.65 3.65 0 00-3.15 1.78zM66 1983.73l.16.22-.16-.22zm61.58-60.22a3 3 0 00-1.42 1.84c-1 6.45-1.93 13-4.37 19.13-.76 1.77-1.57 3.53-2.47 5.24a36.6 36.6 0 01-3.25 4.94c-1.65 2.06-3.48 4-5.21 6a2.57 2.57 0 000 3.59 2.54 2.54 0 003.59 0c.86-1 1.74-2 2.62-3l1.89-2.09c1.07-1.2 2-2.49 3-3.79a50.68 50.68 0 004.25-7.44 54 54 0 003.2-8.25c.59-2 1-4 1.48-6 .48-2.22.93-4.45 1.25-6.7a3.44 3.44 0 00-.31-2.38 3.19 3.19 0 00-1.85-1.43 3.2 3.2 0 00-2.38.32zm-5.91 21.25l-.09.22.09-.22zm20.21 84.73a3.14 3.14 0 000 6.28 44.07 44.07 0 015.63.32 38.91 38.91 0 018.61 2.27 32.41 32.41 0 015.95 3.69 65.66 65.66 0 0110.83 10.83 49.07 49.07 0 014.86 8c.71 1.47 1.35 3 2 4.49-.07-.16-.14-.32-.2-.48.38 1.1.74 2.18 1 3.31a3.59 3.59 0 106.93-1.91 51 51 0 00-3.29-7.82 51.91 51.91 0 00-4.42-7.46 68.5 68.5 0 00-12.1-12.73 43.66 43.66 0 00-7.53-5.09 33.37 33.37 0 00-9-2.89 46.35 46.35 0 00-8.71-.87zm5.05 6.52h.36-.36zM104 1530.18a41 41 0 01-.12 6.46 50.09 50.09 0 01-2.36 9.49 13.1 13.1 0 01-1.15 1.86c-.65.81-1.31 1.59-2 2.38a3.87 3.87 0 00-1.07 2.57 3.65 3.65 0 006.22 2.58c.64-.75 1.27-1.5 1.89-2.26a28.32 28.32 0 001.82-2.42 15 15 0 001.54-3.33c.63-1.73 1.12-3.53 1.62-5.31a38.57 38.57 0 001.13-5.62 29.17 29.17 0 00.29-6.4 4.15 4.15 0 00-1.15-2.77 3.91 3.91 0 00-6.68 2.77zm-25.3-19.12c-4 2.53-8.07 5-12.08 7.62l-2.75 1.75c-1.17.75-2.31 1.51-3.41 2.37a16.27 16.27 0 00-3 3.1 13.9 13.9 0 00-1.77 3 29.32 29.32 0 00-1.33 3.31 4.17 4.17 0 006.12 4.7 4.38 4.38 0 001.91-2.49c.24-.62.48-1.24.73-1.86a15.86 15.86 0 011.18-2.08 13.24 13.24 0 011.46-1.44c2.36-1.68 4.87-3.19 7.32-4.73l9.73-6.14a4.14 4.14 0 001.47-5.6 4.21 4.21 0 00-3.6-2 3.66 3.66 0 00-2 .56zM84 1443a3.26 3.26 0 00-1.17 4.43c1.3 1.85 2.55 3.71 3.72 5.64.65 1 1.28 2.09 1.88 3.16a27.42 27.42 0 011.26 2.55 20.83 20.83 0 011.06 3.45 60.38 60.38 0 01.17 6.86 3 3 0 105.93 0c0-2.08.05-4.15-.09-6.24a17.44 17.44 0 00-1-4.74c-.4-1.1-.82-2.19-1.29-3.27a52.3 52.3 0 00-2.81-5.21c-1.06-1.84-2.09-3.7-3.28-5.46a3.44 3.44 0 00-2.84-1.61 3.1 3.1 0 00-1.54.44zm50.94 1.67a59.4 59.4 0 00-5.66 5.78c-2 2.25-4 4.52-5.94 6.77a3.22 3.22 0 000 4.5 3.18 3.18 0 004.48 0c2-2.24 4-4.51 6-6.73 1.81-2 3.77-3.85 5.77-5.64a3.33 3.33 0 000-4.68 3.28 3.28 0 00-2.33-1 3.39 3.39 0 00-2.34 1zm15.78 68.03a3.19 3.19 0 00-1.14 4.36 3.5 3.5 0 001.9 1.46l.16.06a33.77 33.77 0 016.24 3.42 26.68 26.68 0 014 3.93 37 37 0 013.17 5.12c.45.87.87 1.75 1.27 2.64l.3.76a3.88 3.88 0 001.65 2.14 3.56 3.56 0 004.88-1.28 3.57 3.57 0 000-3.61 43.5 43.5 0 00-5.1-8.48 38 38 0 00-2.78-3.31 32.76 32.76 0 00-3.87-3.3 36.4 36.4 0 00-8.17-4.23 2 2 0 00-.78-.14 3.45 3.45 0 00-1.68.46zm161.16 132.62a83.45 83.45 0 00-10.92 1.2 52.24 52.24 0 00-9.16 2.29 85.7 85.7 0 00-4.92 2l-1.84.86a18.77 18.77 0 00-1.81.86 4.38 4.38 0 00-2 2.56 4.33 4.33 0 00.43 3.3 4.4 4.4 0 003.7 2.11 6.77 6.77 0 003.36-1c.63-.32 1.26-.66 1.9-1 1.07-.58 2.19-1.1 3.31-1.61a41.4 41.4 0 016-2c2.35-.54 4.69-1 7.07-1.36a48.91 48.91 0 016.39-.46c3 .07 6.05.22 9.06.42a3.91 3.91 0 100-7.81c-2.91-.19-5.84-.44-8.76-.44h-1.82zm24.25 34.2a3.71 3.71 0 00-2.06 1.59c-.91 1.29-1.85 2.56-2.79 3.84a81.19 81.19 0 01-6.38 7 3.48 3.48 0 004.92 4.92 78.52 78.52 0 0010.2-12.29 3.44 3.44 0 00-3-5.18 3.5 3.5 0 00-.91.12zM361.1 1704a2 2 0 00-1.38 2.4c.32 1.46.66 2.92.9 4.38l.63 3.77.48 4.07c.13 1 .18 2.12.23 3.19.09 1.29.22 2.59.23 3.88 0 1.56.05 3.11.07 4.67a109.31 109.31 0 01-.93 15.76c0 .33-.09.66-.13 1q-.49 3.27-1 6.52a3.08 3.08 0 00.29 2.21 2.89 2.89 0 001.72 1.32 2.87 2.87 0 003.63-2.77c.27-2.91.47-5.83.67-8.74.08-1.2.15-2.4.19-3.61s.13-2.56.12-3.84c0-2.69 0-5.37-.13-8.06-.06-1.49-.13-3-.2-4.49s-.23-2.72-.34-4.07a128.45 128.45 0 00-2.61-16.21 1.94 1.94 0 00-1.91-1.44 1.61 1.61 0 00-.49.07zm21.21-12.17a3 3 0 00-1.83 1.41 3 3 0 00-.31 2.36 3.3 3.3 0 001.42 1.84l1.1.82 1.9 1.47A26.21 26.21 0 01389 1704a51.44 51.44 0 015.67 10.21c.82 2 1.51 4.07 2.17 6.14a38.26 38.26 0 011.28 4.95c0 .33.05.66.06 1a3.47 3.47 0 006.93 0 24.56 24.56 0 00-1.85-7.72 98.15 98.15 0 00-4-9.48 42.33 42.33 0 00-8.09-11.87 33.1 33.1 0 00-3.13-2.57c-1.11-.87-2.23-1.73-3.36-2.57a2.63 2.63 0 00-1.5-.42 3.12 3.12 0 00-.88.12zm13.6-43.97q-3.14.73-6.22 1.65a2.88 2.88 0 001.54 5.56c1.49-.43 3-.89 4.5-1.23 1.31-.28 2.62-.55 3.93-.79a15.39 15.39 0 012.63-.06 9.38 9.38 0 011.55.43 3 3 0 003.44-4.47 3.22 3.22 0 00-1.81-1.39 10.57 10.57 0 00-3.6-.58 26.65 26.65 0 00-6 .88zM356.38 1591a4 4 0 00-2.82 5c.73 2 1.49 4 2.1 6a46.11 46.11 0 011.32 6.15 21.63 21.63 0 01.1 5.15 51.71 51.71 0 01-2.35 9.79 3.66 3.66 0 002.55 4.49 3.62 3.62 0 002.82-.36 3.87 3.87 0 001.68-2.19 48.82 48.82 0 001.92-6.91c.21-1 .39-2.11.58-3.17a27.82 27.82 0 00.44-3.64 29.42 29.42 0 00-.19-3.87c-.11-1.1-.24-2.22-.41-3.32a45.22 45.22 0 00-2.78-10.3 4.4 4.4 0 00-1.85-2.42 4.08 4.08 0 00-2-.55 3.89 3.89 0 00-1.07.15zm.84 21.35l-.09.59.09-.59zm-76.5-518.95a4.42 4.42 0 000 8.84 29.34 29.34 0 013.25 0 26.36 26.36 0 015.43 1.57 29.12 29.12 0 015 2.7 69.55 69.55 0 015.31 5.14 4.3 4.3 0 006.09-6.08c-1.54-1.57-3-3.21-4.67-4.65a28 28 0 00-6.3-4.11 43.7 43.7 0 00-6.5-2.57 24.91 24.91 0 00-6.92-.9zm2.44 8.76h.25-.25zm39.84 66.68a4.54 4.54 0 00-1.23 3c-.45 4.69-.87 9.38-1.41 14.06-.37 2.63-.77 5.26-1.1 7.9a4.11 4.11 0 00.58 2.13 4.22 4.22 0 005.78 1.51 4 4 0 001.95-2.52q.89-5.78 1.55-11.58c.44-3.83.73-7.67 1.09-11.5a4.08 4.08 0 00-1.23-3 4.25 4.25 0 00-6 0zm49.11-6.35a3.2 3.2 0 00-1.47 1.91 3.05 3.05 0 00.32 2.47c2 2.65 3.86 5.33 5.78 8 .79 1.1 1.5 2.27 2.24 3.41.61.91 1.21 1.82 1.77 2.76 1.42 2.36 2.8 4.72 4.14 7.12a72.57 72.57 0 013.42 7.25c-.12-.26-.22-.53-.34-.79.36.89.74 1.78 1.07 2.69a3.5 3.5 0 001.52 2 3.28 3.28 0 004.83-3.71c-1.86-5.94-5.06-11.31-8.29-16.58s-6.89-10.36-10.6-15.35a3.48 3.48 0 00-1.92-1.47 3.06 3.06 0 00-.85-.12 3.21 3.21 0 00-1.62.44zm20.11-18.49a3.8 3.8 0 000 5.37 4.08 4.08 0 002.69 1.12l3.27.38 7 .94c5.07 1 10.28 1.78 15.12 3.58l1.17.56a4.09 4.09 0 003 .38 3.85 3.85 0 002.31-1.77 3.94 3.94 0 00.4-3 3.77 3.77 0 00-1.78-2.31 34.12 34.12 0 00-5.86-2.18c-.92-.24-1.85-.52-2.79-.72-2.06-.44-4.12-.88-6.2-1.26-5.15-1-10.37-1.6-15.59-2.21h-.23a3.82 3.82 0 00-2.46 1.13zm-33.48-69.32a41.7 41.7 0 01-1.64 5.23 30.24 30.24 0 01-3.15 5.53 53.58 53.58 0 01-5.84 5.83 3.61 3.61 0 105.1 5.11c1.37-1.21 2.73-2.44 4-3.73a32.19 32.19 0 008.53-16 3.64 3.64 0 00-7-1.93zm292.61-245.57c-2 .19-3.9.39-5.83.69a31.49 31.49 0 00-4.52.92 39.8 39.8 0 00-6.22 2.41 4.23 4.23 0 000 7.31 4.07 4.07 0 003.26.43 37.62 37.62 0 015.69-1.9c1.52-.33 3-.6 4.54-.83l3.31-.32a48.44 48.44 0 0110.28.43A4.2 4.2 0 00665 837a4.37 4.37 0 000-6.18 4.75 4.75 0 00-3.1-1.28 60.8 60.8 0 00-7.4-.55c-1 0-2.08 0-3.11.14zm49.23 47.59c-.82 4.24-1.68 8.45-2.28 12.72a4.09 4.09 0 00.37 2.87 3.79 3.79 0 002.23 1.71 3.75 3.75 0 004.58-2.6c.89-4.2 1.67-8.44 2.49-12.65a4.11 4.11 0 00-.38-3 3.91 3.91 0 00-2.3-1.76 3.91 3.91 0 00-4.71 2.67zm55.55-12.49a3.29 3.29 0 00-1.17 4.48 126.28 126.28 0 017.4 11.31c2 3.63 3.6 7.45 5.24 11.25.47 1.13.9 2.29 1.35 3.43.29.75.56 1.48.82 2.24a41.21 41.21 0 011.25 5 3.41 3.41 0 006.23.81 3.57 3.57 0 00.35-2.62 34.8 34.8 0 00-1.81-6.42l-1.5-3.64c-.87-2.13-1.82-4.21-2.76-6.3a84.14 84.14 0 00-6.27-11.64c-1.48-2.29-3.08-4.51-4.66-6.73a3.43 3.43 0 00-2-1.51 3.48 3.48 0 00-.85-.11 3.39 3.39 0 00-1.67.44zm4.98-65.21c-.41.68-.83 1.33-1.29 2a75 75 0 01-6 6.44 756.58 756.58 0 01-8.67 8.3 3.66 3.66 0 005.18 5.18c3-2.87 6-5.73 9-8.63a48 48 0 008.12-9.55 3.69 3.69 0 00-1.31-5 3.54 3.54 0 00-1.82-.5 3.77 3.77 0 00-3.2 1.81zm-89.28-36.81a4 4 0 000 5.55c2.19 2.3 4.44 4.53 6.47 7a40.88 40.88 0 013.18 5.38 47.82 47.82 0 012.1 6.43c.73 3 1.41 6.07 2.09 9.11a3.92 3.92 0 004.81 2.73 4 4 0 002.74-4.81c-.68-3.06-1.37-6.12-2.11-9.17a39.86 39.86 0 00-2.9-8.3c-.61-1.22-1.22-2.43-2-3.59a39.79 39.79 0 00-3-4.08c-1.79-2.2-3.89-4.19-5.85-6.22a3.78 3.78 0 00-2.75-1.14 3.94 3.94 0 00-2.81 1.14z"></path>
+    <path class="cls-2" d="M713 835.41c-2.8 5.67-7 14.18-11.51 22.63-1.24 2.34-2.69 4.64-4.09 6.87l-.38.59c-.59.94-1.19 1.88-1.76 2.84-1.39 2.31-2.93 4.63-4.29 6.67l-.34.53-1.06 1.58c-.76 1-1.49 2.08-2.22 3.14-1.69 2.45-3.35 4.84-5.13 7-1 1.18-1.9 2.37-2.83 3.57-2.12 2.69-4.19 5.33-6.39 7.75l-3.4 3.74-3.33 3.68-.94 1c-.83 1-1.68 1.89-2.58 2.76l-7.37 7.24-3.74 3.62q-7.12 6.2-14.31 12.34l-2.17 1.87-.25.22c-8.29 7.12-16.85 14.48-25.2 21.82-6.21 5.45-12.82 11.33-19.07 17.42-4 3.87-7.89 7.83-11.68 11.65q-3.09 3.14-6.21 6.26c-8.1 8.1-14.73 14.65-20.87 20.62-5.16 5-10.18 10.07-15.74 15.68l-3.91 3.94c-8.52 8.6-17 17.57-25.12 26.26l-.72.76-9.16 9.74q-20.13 21.28-40.39 42.47c-1.75 1.83-3.5 3.63-5.26 5.44l-2.33 2.41c-1 1-1.95 2-2.93 3l-.27.28c-2 2-4.12 4.17-6.07 6.34q-2.57 2.87-5.15 5.7c-4.29 4.72-8.68 9.56-12.85 14.51-11.24 13.38-24.27 29-36.6 45-6.21 8.06-12.41 16.31-17.75 23.41-1.59 2.12-3.11 4.35-4.57 6.5l-.31.46-.88 1.3q-1.38 2-2.8 4c-2 2.91-4.3 6.18-6.35 9.48l-7.39 11.91-1.29 2.06-.23.35c-1.45 2.33-3 4.74-4.3 7.19l-2.79 5.15-.18.31c-3.36 6.19-6.83 12.57-10.15 18.9-8.55 16.33-17.15 32.92-26.28 50.71q-6.72 13.1-13.33 26.24c-2.76 5.48-5.42 11.14-8 16.62l-.42.88-2.78 5.91c-1.24 2.65-2.37 5.42-3.45 8.09-.58 1.43-1.15 2.82-1.74 4.21l-1.55 3.66-.18.42c-1 2.4-2.05 4.79-3 7.2l-3.16 7.69c-2.36 5.77-4.73 11.55-7 17.36l-1.64 4.15-.11.27c-6 15.22-12.26 31-17.62 46.71l-2.17 6.36-.22.63c-2.31 6.75-4.7 13.72-6.82 20.65l-2.5 8.21-2.46 8c-.84 2.77-1.59 5.62-2.25 8.13l-.28 1.06c-.2.77-.4 1.55-.61 2.31-2.54 9.38-5 19.21-7.23 27.88-1.49 5.92-2.86 12-4.16 17.83l-.11.47c-.52 2.32-1 4.5-1.5 6.67q-3.81 16.75-7.7 33.5l-.37 1.59-3.75 16.35q-1.75 7.66-3.53 15.34c-.75 3.25-1.41 6.7-1.94 9.47-.31 1.62-.62 3.22-.94 4.83-.63 3.14-1.28 6.5-1.75 10l-1 7.92-1.06 7.92c-.16 1.18-.24 2.37-.32 3.56 0 .6-.08 1.21-.13 1.8l-.4 4.75-.4 4.74c-.36 4.2-.53 8.4-.69 13.44 0 1-.07 2.09-.12 3.14v1c-.13 2.68-.27 5.71-.23 8.67l.11 8.69.11 8.69c0 2.75.14 5.5.25 8.25v.68l.07 1.71c.06 1.43.11 2.87.16 4.31v.27c.09 3 .19 6.06.39 9.07l.37 5.65c.41 6.62.87 14.11 1.64 21.47l.81 7.7.81 7.73c.34 3.3.83 6.64 1.31 9.86l.18 1.25c.18 1.18.35 2.35.51 3.53 1 7.36 2.29 15.07 3.3 21.25l.94 5.74c.81 5 1.69 10 2.58 15.06.16.31.32.61.47.92a15 15 0 011.52 5.11 9.51 9.51 0 01-.31 3.21c.4 2.18.8 4.36 1.2 6.52l.24 1.27c1.23 6.61 2.43 13.15 3.59 19.69 2.81 16 5.23 32 7.58 47.6l1.41 9.37c2.73 18 5.43 35.6 8.46 53.14 1.4 8.18 2.73 16.36 4.06 24.55l.06.38.09.51c1.54 9.56 3.15 19.45 4.87 29.15 1.54 8.74 3 18 4.17 25.45 1.45 9.16 3.12 18.44 4.74 27.42l.06.36.19 1c.5 2.78 1 5.57 1.54 8.35v.25c1 5.05 1.89 10.11 2.75 15.17q2.54 15 5 30.06l2.44 14.84c2 12.06 3.94 24.11 6 36.15 3.13 18.34 6.58 36.58 10.24 54.23l1.8 8.68.26 1.26c2.86 13.8 5.82 28.06 8.54 42.11l1.28 6.55c1.26 6.46 2.49 12.78 3.62 19.06l.91 5.12c1.44 8.18 2.93 16.63 4.84 24.85 1.54 6.69 3.09 13.16 4.73 19.78l-.08-.25c-5.75-7.48-11.71-15.21-18.83-21.63-6.46-5.83-13.56-11.14-20.43-16.28l-3.35-2.5c-7.3-5.48-15.13-11-23.23-16.23s-17.58-11.48-27.41-16.11a88.33 88.33 0 00-16.61-5.94 22.09 22.09 0 00-5.24-.58h-.77a26 26 0 00-5.9.91 22.37 22.37 0 00-8.24 3.9c-5.4 4.2-7.85 11.9-6.58 20.61 1 7.1 4.73 13.45 8.43 19.34a122.7 122.7 0 0014.12 18l2.43 2.62c2.29 2.49 4.62 5 7.07 7.35a277.66 277.66 0 0022 19.48c8.11 6.26 16.4 12.48 24.42 18.48l1 .76c8.64 6.48 16.48 12 23.94 17 5.18 3.41 9.83 6.43 14.25 9.23l2.84 1.82.35.23c2.58 1.65 5.24 3.36 7.92 4.93a75.06 75.06 0 0012.95 6.21c4.46 1.58 8.76 3.26 13.16 5.13a12.44 12.44 0 003.29.92l.43 1.71.46 1.74a161.37 161.37 0 005.48 17.23 13.78 13.78 0 0012.67 8.84 10.05 10.05 0 001.09 0 13.56 13.56 0 009.18-4.71c2-2.35 3.82-6.42 3.15-9.82l-.22-1.1-.08-.42c-1.07-5.35-2.17-10.88-3.42-16.3-1-4.2-2.1-8.57-3.11-12.43l-.71-2.75c-1.77-6.83-3.77-13.83-5.54-20-.84-2.93-1.67-5.85-2.5-8.78-1-3.61-2.06-7.23-3.1-10.83a7.43 7.43 0 001.45.14h.62a7.31 7.31 0 005.16-2.67 143.58 143.58 0 0010.38-17.29c1-2.14 2-4.37 2.85-6.54l1.06-2.53c1.76-4.16 3.23-8.53 4.66-12.75l.33-1c1.57-4.65 3.07-9.77 4.72-16.11a109.06 109.06 0 002.2-12.48l.23-1.59q1.73-12.24 3.4-24.48c1.69-12.24 3.38-24.47 5.14-36.7.72-5 1.49-10 2.27-15 2.34-15.14 4.77-30.79 5.56-46.36.3-6.11.36-12.6-1.24-18.61a16.68 16.68 0 00-5-8.56c-1.79-1.49-3.6-2.86-5.89-3.17a23.17 23.17 0 00-3-.25 11.39 11.39 0 00-1.64.11 14.63 14.63 0 00-6.25 2.39c-.89.67-1.77 1.41-2.78 2.33a67.88 67.88 0 00-5.57 5.74c-7.74 9-11.3 20.46-14.74 31.57l-.9 2.91c-1.36 4.38-2.76 8.74-4.17 13.1l-.26.77c-3.19 9.47-6.5 19.26-9.48 29-1.29 4.25-2.57 8.88-3.89 14.15a90.92 90.92 0 00-2.08 14.26 246.43 246.43 0 00-1 31.23c.05 1.28.08 2.54.1 3.81q-2.19-11.91-4.53-23.82c-2.88-14.64-6.08-29.76-8.9-43.1l-2-9.48c-6.36-30.21-11.59-61.15-16.65-91.07l-2.33-13.68q-2.56-15.1-5.17-30.19c-.87-5.05-1.85-10.14-2.81-15.06L266 2141c-.41-2.14-.82-4.27-1.21-6.4-1.64-8.78-3.15-17.61-4.8-27.42-1.48-8.7-3-17.69-4.65-26.58s-3.2-18.09-4.8-27.48l-.31-1.84c-1.39-8.13-2.82-16.54-4.34-24.78-3.57-19.44-6.77-39-9.15-53.9l-1.59-9.91-3-18.42c-1.43-8.84-3.07-18.2-5-28.61-1.26-6.69-2.57-13.37-3.89-20l-.22-1.12c-1.89-9.66-3.85-19.66-5.59-29.51l-.43-2.44c-1.49-8.39-3-17-4.32-25.63l-.55-3.51-.11-.66c-.48-2.93-1-5.91-1.31-8.86l-2-16.85c-.79-6.64-1.29-13.42-1.78-20l-.15-2c-.11-1.38-.22-2.75-.32-4.12-.23-2.89-.37-5.79-.51-8.68-.07-1.52-.15-3-.23-4.53v-.88l-.05-.93c-.17-3.3-.35-6.7-.44-10-.05-1.79-.12-3.57-.2-5.37-.15-3.89-.3-7.77-.24-11.58l.15-8.79.14-8.79.05-.83c.45-6.9 1-14.72 1.86-22.31l1.1-9.3.12-1.15c.09-.91.18-1.81.35-2.7l1.56-8.42 1.55-8.38c1.14-6.13 2.53-12.43 3.75-18l.24-1.11 1.31-6c.54-2.52 1.1-5 1.66-7.55l.67-3c1-4.62 2-9.24 3-13.87l2.25-10.64c3-14.45 6.2-29.4 9.71-44.17 2-8.33 4.13-16.75 6.21-24.91l.12-.47.51-2c1.37-5.35 3-10.68 4.75-16.59.74-2.45 1.47-4.89 2.19-7.34l-.29.66c.73-2 1.4-4.1 2.06-6.16 1.73-5.41 3.52-11 5.44-16.35 1-2.69 1.91-5.39 2.86-8.1 1.87-5.38 4-11.47 6.23-17.24l3.26-8.47.24-.64c5.31-13.8 10.79-28.06 16.5-41.94l2.15-5.27.17-.41c2.76-6.75 5.6-13.73 8.7-20.45 4.65-10.09 8.93-19.1 13.07-27.54 6.34-13 13-26 19.37-38.67l.46-.91 4.68-9.24c5.67-11.24 11-21.51 16.27-31.4.77-1.43 1.51-2.87 2.26-4.3l.18-.36c1.89-3.61 3.83-7.35 6-10.87q5.26-8.66 10.56-17.27l2.69-4.08c3.48-5.28 7-10.59 10.69-15.61 5.24-7.08 11.45-15.45 17.86-23.88 11.48-15.09 23.61-29.77 36.07-44.73 4-4.77 8.19-9.44 12.27-14 1.74-1.92 3.49-3.86 5.21-5.79 2-2.24 4.21-4.5 6-6.31l2.93-3 1.64-1.7c2.22-2.3 4.44-4.61 6.63-6.92q20.15-21.32 40.23-42.69 3.7-4 7.39-7.93c4.26-4.59 9.08-9.78 13.85-14.75 8.41-8.77 17.36-18 27.35-28.12 2.76-2.8 5.58-5.55 8.41-8.29l1.37-1.34 2.72-2.66c2.79-2.73 5.54-5.51 8.27-8.29l.66-.66 2.81-2.85 5.34-5.4 2.58-2.62c4.78-4.86 10.33-10.5 15.86-15.95 12.6-11.47 23-20.7 32.7-29.05q9.27-8 18.43-16.09c4.41-3.88 8.66-8.07 12.77-12.12l.61-.6 3.07-3c1.82-1.79 3.53-3.78 5-5.54l.6-.68c.58-.67 1.15-1.33 1.74-2 2.68-3 5.2-6.1 6.84-8.16a222.24 222.24 0 0013.49-18.41c4.2-6.51 8.27-13.06 12.46-20 1.23-2 2.33-4.24 3.39-6.36l.21-.41c.46-.91.92-1.82 1.4-2.72 1.47-2.81 2.89-5.73 4.26-8.55l.1-.21c.72-1.46 1.43-2.93 2.15-4.38a7.16 7.16 0 00.3-5.55 7.47 7.47 0 00-3.77-4.27 7 7 0 00-3.12-.72 7.51 7.51 0 00-6.7 4.17z"></path>
+    <path class="cls-2" d="M276.89 2302a7.65 7.65 0 00.89 10.81 8.09 8.09 0 005.59 1.8 7.46 7.46 0 005.23-2.69 7.68 7.68 0 00-.9-10.82 8.12 8.12 0 00-5.59-1.79 7.42 7.42 0 00-5.22 2.69z"></path>
+    <path class="cls-2" d="M142.24 2101.42a29.89 29.89 0 00-5.65 2.62c-.33.28-.66.54-1 .81a28.77 28.77 0 00-3 2.85 28 28 0 00-3.44 4.87 39.3 39.3 0 00-4.12 10c-1.16 4.11-.57 8.57.29 12.66a106.94 106.94 0 005.66 18.62 122.61 122.61 0 008.17 16.58c5.87 9.76 12.22 19.13 19 28.31 3.48 4.71 7.51 9.07 11.34 13.48.81.93 1.63 1.85 2.45 2.77a10.73 10.73 0 001.24 1.37c2.56 2.84 5.17 5.64 7.74 8.47 7.86 8.67 16 17.17 25.1 24.59 4.24 3.46 8.62 6.76 12.91 10.16 4.58 3.63 9.09 7.33 13.72 10.87 8.32 6.38 17.08 12.15 25.37 18.56l.86.67a12.84 12.84 0 006.61 2.79c.16 1.39.3 2.79.45 4.19a9.77 9.77 0 0019.47-1.59 199 199 0 00-3.29-22.41 155.43 155.43 0 00-6.89-23.34c-2-5.23-3.94-10.55-6.16-15.7-2.5-5.8-5-11.58-7.63-17.32a116.94 116.94 0 00-7.59-14.18c-2.58-4.08-5.52-7.92-8.48-11.75-3.58-4.64-7.16-9.26-10.9-13.78s-7.55-9.12-11.37-13.65-7.9-9.16-12-13.66c-4.47-5-9.13-9.69-13.84-14.43-3.45-3.48-7.15-6.76-10.8-10-4.58-4.07-9.16-8.1-14-11.9-1.82-1.44-3.7-2.83-5.64-4.11s-4-2.63-6.06-3.82a33.57 33.57 0 00-11.28-4 15.48 15.48 0 00-2.55-.21 16.67 16.67 0 00-4.76.7zm8.53 19.94l-1.15.6a7.36 7.36 0 011.15-.6zm-2.36 2.1a53 53 0 015.87 3.09c8.64 6.11 16.55 13.09 24.42 20.16 4.36 3.92 8.51 8.06 12.7 12.18 3.16 3.11 6.1 6.45 9.08 9.73q9.48 10.93 18.81 22c2.75 3.26 5.37 6.63 8 10 1.29 1.65 2.6 3.31 3.91 5a112.66 112.66 0 0110.37 15.75c1.4 2.93 2.85 5.84 4.17 8.8 1.66 3.72 3.47 7.4 5 11.17 2.42 6 4.85 12 7 18.09-1.21-.83-2.43-1.65-3.63-2.48-7.21-5-14.13-10.26-21.13-15.52s-14.3-10.47-20.71-16.56c-3.45-3.27-6.86-6.56-10.21-9.94-3-3-5.85-6.29-8.72-9.47l-1.06-1.16.15.16-.55-.6-.49-.53-1.29-1.42-.62-.67c-.62-.76-1.3-1.46-2-2.21a254.09 254.09 0 01-31.87-44.67 113.89 113.89 0 01-8.47-22.47 39.3 39.3 0 01-.52-4q.12-.66.27-1.32c.44-1 .94-2 1.48-3zm37.91 74.21l1 1.06-.07-.07-.9-1zm1.12 1.23l.27.29.39.43-.65-.71zm4.05 4.44l1.21 1.32-1.21-1.32zm1.8 2l-.29-.34-.07-.08.39.42zm-.39-.42l-.21-.24.28.32c.23.24.45.49.68.74l-.36-.4a.52.52 0 00.1.11c.16.18.33.36.49.55l.29.31.45.5-.43-.48.08.08-1.79-2 .42.47z"></path>
+    <path class="cls-2" d="M142.89 2115.11a8.2 8.2 0 00-5.22 6.15c-1 3.36.05 7 1.94 9.85 1.75 2.68 3.75 5.22 5.61 7.82 2.6 3.63 5.38 7.13 8.16 10.62.38 1.14.82 2.26 1.28 3.38a6 6 0 00-.07.61 46.1 46.1 0 00-.19 7.05 21.22 21.22 0 002.28 7.08 108.5 108.5 0 007.25 12.31c3 4.5 6.25 8.8 9.45 13.15a131.75 131.75 0 0015.52 18.22 9.91 9.91 0 003.82 2.21c1.41 1.82 2.83 3.63 4.29 5.42 1.76 2.12 3.59 4.16 5.53 6.12a24.62 24.62 0 005.42 4l3.57 1.18h.36c4 5.64 7.91 11.31 12.09 16.8 1.49 2 3 3.92 4.49 5.86.34 2.07.65 4.14 1 6.21a8.91 8.91 0 003 5.81 8.58 8.58 0 006.22 2 7.65 7.65 0 001.49-.27c.17.19.35.37.52.55 2 2 4.71 3 7.25 4a9.58 9.58 0 007.08.34 9.11 9.11 0 005.09-4.63c.8-1.64 1.7-3.21 2.37-4.91a19.87 19.87 0 001-9.08 39.1 39.1 0 00-1.56-7.16c-.74-2.64-1.85-5.2-2.84-7.75a116.8 116.8 0 00-7.09-14.55l-.3-.54c-.86-2.11-2-4.15-3-6.17q-2.53-5-5.43-9.87a172.25 172.25 0 00-12.54-17.8c-7.14-9.09-15.05-17.57-22.94-26a50.54 50.54 0 00-5.25-5.2c-.39-.32-.79-.62-1.21-.9q-5.49-6.06-11-12.06c-2.61-2.8-5.23-5.57-7.92-8.3-1.35-1.38-2.71-2.75-4.06-4.12a35.1 35.1 0 00-5.5-5.06 9.08 9.08 0 00-3.52-1.9 35.5 35.5 0 00-5.45-1.42 9.34 9.34 0 00-4.42.22 59.78 59.78 0 00-8.42-7.82 9.2 9.2 0 00-5.4-1.93 7.63 7.63 0 00-2.69.49z"></path>
+    <path class="cls-2" d="M325.27 2058.78a17.21 17.21 0 00-7.18 2.42 26.17 26.17 0 00-7.46 6.8 65.35 65.35 0 00-5.94 9.52c-1.94 3.6-3.64 7.3-5.28 11-2.23 5.12-4.24 10.38-6.17 15.63-4.18 11.4-8.17 22.85-12.07 34.36q-5.39 15.9-10.11 32c-1.41 4.82-2.89 9.67-4.07 14.55-1.48 6.13-3.54 12.47-3.31 18.83a11.42 11.42 0 0012.32 10.49 10.66 10.66 0 003-.67c-.93 1.87-1.88 3.73-2.89 5.55-.31.41-.63.8-1 1.2h-.19a36.18 36.18 0 01-3.59-.8 12.24 12.24 0 00-13.77 16.22c1 2.67 3.38 5.88 6.21 6.83 1.24.42 2.49.83 3.74 1.23l-4.76 6.8a9.5 9.5 0 00-2.08 6.47 8.87 8.87 0 009.57 8.12 8.61 8.61 0 006-3.1c3.81-5.46 7.61-10.91 11.48-16.33 2.4-3.36 4.9-6.67 7.31-10a28 28 0 002.56-3.67 236.3 236.3 0 0017.12-30.41c2.3-4.78 4.21-9.71 6.32-14.58 2.36-5.4 4.71-10.81 7-16.24 2.17-5.11 4.35-10.2 6.12-15.45 2-5.9 3.69-11.89 5.4-17.87 1.52-5.34 2.47-10.87 3.52-16.31.53-2.7.86-5.45 1.2-8.17s.71-5.52.86-8.29c.35-6 .78-12.16-.16-18.15a94.31 94.31 0 00-2-10 47.28 47.28 0 00-1.72-5.33 48.27 48.27 0 00-2.83-5.49 23.31 23.31 0 00-3.06-3.6 30.57 30.57 0 00-3.22-2.15 17 17 0 00-6-1.44h-.89zm-2 36.38v.07c.17 1.67.23 3.35.26 5a11.61 11.61 0 00-1.68-.45c-.11-.17-.22-.35-.34-.51.57-1.39 1.15-2.77 1.75-4.14zm-46.92 124.43a11.79 11.79 0 01-.9.84l.92-.84zm13.2-341.81c-8.48 2.49-15.53 8-21.82 14a106.07 106.07 0 00-14.21 17.22 168.41 168.41 0 00-12.74 22.2 232.05 232.05 0 00-13.95 36.73c-1.53 5.43-2.86 10.87-3.91 16.41a144.79 144.79 0 00-2 17.62c-.39 6.09-.73 12.15-.56 18.24.15 5.49 4.87 10.22 10.08 11.21a12.54 12.54 0 0014.52-9.91c.9-5.06 1.61-10.13 2.19-15.24.53-4.7.93-9.47 1.87-14.13s2-9.45 3.05-14.16c.91-4 2.16-7.84 3.37-11.72 5.13-14 10.8-27.7 18.69-40.4a102.69 102.69 0 0113.58-16.62 54.93 54.93 0 016.9-5.08c.32-.15.65-.28 1-.42a83.49 83.49 0 01.43 11.73 207.7 207.7 0 01-3.65 26.88c-2 9.31-4.49 18.41-7.24 27.51-1.38 3.83-2.81 7.59-4.43 11.35-1.76 4.07-3.87 8-5.94 12q-3.3 6.25-6.76 12.41c-2.43 4.38-4.8 8.79-7.39 13.07a76.5 76.5 0 01-7.95 9.12c-4.53 4-9.17 8-13.82 11.85-2.49 2.09-4.31 4.34-4.93 7.62a12 12 0 009.58 14.05c3 .56 6.77 0 9.14-2 4.89-4.1 9.81-8.17 14.56-12.44a86.74 86.74 0 007-6.6c1.23-1.36 2.45-2.73 3.64-4.13a63.14 63.14 0 006.05-9.05c5.78-10 11.57-19.91 17-30.08a126.12 126.12 0 007-15.79c2.22-6 4-12.18 5.91-18.3a217.7 217.7 0 007-32.22 183.46 183.46 0 001.61-18.29 75.92 75.92 0 00-.06-7.84 50.91 50.91 0 00-1.44-9.09 22.26 22.26 0 00-2.56-5.89 30 30 0 00-4.82-5.86 23.57 23.57 0 00-16.87-7 24.83 24.83 0 00-7 1zm4.05 24.38a7.41 7.41 0 011.16.35l.07.06-1.23-.41zm4.24.92a8.44 8.44 0 01.87 0h-.87zm-2.28.23l-.37.08.37-.08zm.31.69l.12.56-.12-.56zm.38 0a7.49 7.49 0 01.36.69l-.36-.69z"></path>
+    <path class="cls-2" d="M299.67 1893.88c-8.41.8-13.87 8.71-18.63 14.81-2.58 3.32-4.8 7-7.06 10.49-2.06 3.22-4 6.49-5.92 9.8-2.2 3.83-4.28 7.73-6.29 11.66a14.78 14.78 0 00-2 2.6c-2.32 3.7-4.59 7.43-6.93 11.12q-3.23 4.83-6.47 9.63c-1.38 2-2.3 3.93-2.08 6.49a8.85 8.85 0 001 3.39c-2 4.15-3.89 8.33-5.67 12.57-2.32 5.54-4.51 11.38-5.33 17.35a19.44 19.44 0 00.58 9.31 13.68 13.68 0 0010 8.4h.24c-.56 1.43-1.12 2.85-1.67 4.27a14.43 14.43 0 00-.53 10.82 14 14 0 007.06 7.77c6.72 3.22 15.47.37 18.58-6.54 5.6-12.4 10-25.36 14.25-38.28 2.54-7.8 4.89-15.67 6.87-23.64.7-1.85 1.4-3.71 2.13-5.56q2.09-5.3 4.16-10.6c.17-.42.33-.84.49-1.25a96.23 96.23 0 005-11.16c.34-1.05.68-2.08 1-3.12a13.41 13.41 0 00.19-3.15l2.39-4.24c1.27-2.28 2.5-4.58 3.75-6.87s2.23-4.41 3.22-6.68c.67-1.53 1.2-3.11 1.72-4.69a39.37 39.37 0 002.11-7.86 16.46 16.46 0 00-.49-7.55 13 13 0 00-3.85-5.92 15.39 15.39 0 00-10.08-3.5c-.59 0-1.17 0-1.76.08zM83.72 1672.13c-2.32.67-5.14 3-6.73 4.71a28.74 28.74 0 00-4.48 6.84 42.6 42.6 0 00-3.59 11 41.7 41.7 0 00-.07 11.86c.51 4.08 1.6 8.14 2.49 12.14.68 3.13 1.56 6.24 2.46 9.33 2.17 7.48 4.32 15 7.52 22.13 3 6.73 6.73 13.32 10.4 19.72q4.73 8.2 9.41 16.43 2.78 4.88 5.6 9.72c6.08 4.93 12.14 9.83 17.71 15.35 5.8 5.73 11.12 12 17.22 17.42 1.53 1.36 3 2.75 4.64 4l5 3.81c3.16 2.44 6.38 4.8 9.4 7.41s6.27 5.48 9.23 8.41c2.77 2.75 5.4 5.63 8 8.52 4.72 5 9.44 9.94 13.32 15.54 4.08-5.28 3.72-13.93-1.86-18.13a109.52 109.52 0 01-14-12.91c-6.28-7.1-12.38-14.34-18.1-21.91-6.76-8.94-13.13-18.1-19.23-27.51-5.3-8.17-10.17-16.65-15-25.09-5.12-8.91-10.26-17.81-15.23-26.82a99 99 0 01-5-11.81l-2.07-6.06c-1.91-5.57-3.52-11.37-4.87-17.13a52.44 52.44 0 01-1.28-9.49c.11-.86.26-1.7.45-2.56 0-.06.05-.12.08-.19 1.22.24 2.43.52 3.64.85a71.5 71.5 0 0111.17 5c7.55 5.35 14.19 11.91 20.74 18.41a202.12 202.12 0 0117 20.67c5.48 7.93 9.71 16.57 14.16 25.08-.46-.86-.91-1.73-1.37-2.6 4.86 10.59 9.95 21.25 12.77 32.6a60.33 60.33 0 01.92 12.95c-.09 2.49-.19 5-.28 7.45 0 .36-.05.73-.06 1.1-.06 1-.11 2-.16 3a11.14 11.14 0 002 5.5 11.18 11.18 0 0015.58 2.75c2.12-1.49 4.42-4.36 4.57-7.08.28-4.62.46-9.22.63-13.84q.12-3.23 0-6.43c-.1-4.4-1.19-8.76-2.15-13a103.25 103.25 0 00-4.56-14c-.94-2.49-1.81-5-2.89-7.42-6.75-15.13-13.77-30.38-23.36-43.95-4.65-6.57-10-12.57-15.26-18.67-4.31-5-9.06-9.67-13.84-14.23-6.83-6.51-14.41-12.23-23.3-15.63-5.2-2-10.46-3.94-16.08-4.32C94 1671 93 1671 92 1671a28.39 28.39 0 00-8.24 1.18z"></path>
+    <path class="cls-2" d="M81.25 1684.93a15.08 15.08 0 00-7.36 9.38c-1.83 6.87 1.66 13.33 4.07 19.55a177.59 177.59 0 009.52 20c5.28 9.82 10.55 19.63 16.14 29.28 2.64 4.56 5.38 9.06 8.4 13.37 2.27 3.24 5.44 6.39 9.47 7.15a14.32 14.32 0 001.73.2c2.57 4.41 5.16 8.81 7.88 13.14q7.71 12.35 15.5 24.62c2.07 3.24 4.17 6.47 6.25 9.71 1.27 2 2.6 3.91 3.91 5.87.45.72.87 1.46 1.27 2.2a11.68 11.68 0 002.2 2.71l2.75 4c2.36 2.07 4.68 4.19 6.92 6.4 2.77 2.75 5.4 5.63 8 8.52a144.55 144.55 0 0112.47 14.34c1.14 0 2.3-.06 3.45-.15a30.08 30.08 0 006.13 4.28 13.54 13.54 0 0016.16-3.45c4.61-5.43 4.26-14.53-1.56-19.06a26.79 26.79 0 01-2.17-1.83c-2.43-2.86-4.67-5.89-7-8.81-1.48-1.84-3-3.64-4.4-5.54-.64-2.3-1.38-4.59-2.16-6.84-3.44-10-8.4-19.56-13.15-29q-5.23-10.38-11.14-20.45-2.79-5.34-5.83-10.54a153.59 153.59 0 00-8.81-13.71q-4-5.49-8.08-11c-3.84-5.53-7.74-11.07-11.92-16.34q-4.35-5.47-8.69-10.94l-7.94-10q-7.68-9.69-16.27-18.57c-3.89-4.42-7.9-9.2-13.91-10.52a14.64 14.64 0 00-3.25-.36 17.17 17.17 0 00-8.55 2.47zm14.1 11.64v1a8 8 0 010-1z"></path>
+    <path class="cls-2" d="M280.38 1681c-2.06.42-4.05.85-6 1.46a39.89 39.89 0 00-7.37 3.67 55 55 0 00-8.46 6.27 85.47 85.47 0 00-9.15 9.3c-3 3.51-5.78 7.26-8.6 10.93-3.91 5.08-7.37 10.6-10.84 16a156.21 156.21 0 00-8.44 14.43c-2.51 5-4.83 10.12-7.07 15.28-4.49 10.39-9.14 20.74-13.18 31.32-2.71 7-5 14.28-7.26 21.46a15.26 15.26 0 008.39 16.6 15.18 15.18 0 002.59 1 10.58 10.58 0 000 1.49 11.47 11.47 0 004 7.76 11.79 11.79 0 008.3 2.66 161 161 0 0018-1.32c2.29-.31 4.54-.67 6.8-1.14a65.32 65.32 0 006.62-1.65 32.24 32.24 0 005.4-2.66 119 119 0 0012.82-8.55 249.52 249.52 0 0026.73-22.31 79.57 79.57 0 005.48-6.27 73.56 73.56 0 009.91-15.3c.6-1.26 1.21-2.52 1.8-3.77a79.93 79.93 0 004.1-11.27c.84-2.76 1.41-5.62 2.05-8.42a126.26 126.26 0 002.4-16.78c.55-6.24.87-12.56 1-18.82a90.8 90.8 0 00-.39-10.69 55.78 55.78 0 00-2.53-11 27.4 27.4 0 00-8.35-11.94 42.65 42.65 0 00-5.8-3.86 26.53 26.53 0 00-3.81-1.9 29.3 29.3 0 00-9.49-2.37c-1.35-.09-2.65-.15-3.93-.15a28.22 28.22 0 00-5.67.52zm7.34 28.34c.4.06.8.14 1.21.23q1.14.5 2.25 1.08l.33.27a36.67 36.67 0 011.27 3.7c1.29 7.77.92 15.77.68 23.61a98.1 98.1 0 01-1.15 11.21c-.83 4.71-1.68 9.44-3 14.06a81.41 81.41 0 01-6.71 14.15c-2.3 3.25-4.81 6.32-7.4 9.35a58.43 58.43 0 01-5.15 5.17c-3.71 3.36-7.47 6.65-11.36 9.81-5.5 4.47-11.08 9-17.24 12.54a30.66 30.66 0 01-4.23 1.37 124.5 124.5 0 01-13.17 1.58c5.67-13.19 10.66-26.66 16.15-39.93 3.14-7.61 6.34-15.15 9.91-22.56a180.55 180.55 0 0110.4-17.91c5.15-7.71 10.53-15.43 17-22.07a60.62 60.62 0 016.39-4.77c.64-.27 1.3-.51 2-.72s1.22-.14 1.83-.17zm4.4 2.41l.25.5-.25-.5z"></path>
+    <path class="cls-2" d="M283.63 1697c-2.15 1.86-4.29 3.74-6.33 5.73-2.32 2.25-4.12 5.15-6 7.75-1.43 2-2.79 4-4.18 6l-7.05 10.09c-5 7.2-10.06 14.38-15 21.65-.68 1-1.36 2.1-2 3.15a14.28 14.28 0 00-1.39 7.53 14.42 14.42 0 001.1 4.49l-.27.84v.5c-3.5 4.83-7 9.68-10.36 14.58-1.81 2.08-3.6 4.18-5.39 6.3-.83 1-1.62 2-2.43 3a23.72 23.72 0 00-2.71 3.7 12.19 12.19 0 00-1.72 5.4q-2.84 4.38-5.65 8.79a130.27 130.27 0 00-7.8 13.82 36.28 36.28 0 00-1.55 4.07 27.25 27.25 0 00-1.56 6.25c-.25 2.45-.37 5.74.69 8.09.12.26.24.52.35.78a13.38 13.38 0 003.91 5.6 12.26 12.26 0 004.07 2.64l3.31 1.09c1.45.09 2.91.17 4.37.22l.9-.17a19.87 19.87 0 004.57-1.14 33.7 33.7 0 005.85-3 80.84 80.84 0 0012.63-9.29 176.76 176.76 0 0024.74-27.12c3.64-4.89 7.06-10 10.2-15.27 1.54-2.57 3-5.14 4.35-7.8s2.58-5.58 3.81-8.41a99.83 99.83 0 006.75-22.51c.39-2.28.81-4.55 1.06-6.85.76-1.13 1.51-2.26 2.25-3.4a24 24 0 002.72-5.6c.8-2.38 1.23-4.46.33-6.91a8.71 8.71 0 00-1-2l.21-.35c1.29-2.19 2.49-4.44 3.63-6.72.51-1 1-2.09 1.37-3.16a34.19 34.19 0 002.06-6 30.56 30.56 0 00.34-4.88 15.57 15.57 0 00-3.18-7.93 14.51 14.51 0 00-9.06-5.85 14.9 14.9 0 00-2.73-.25 12.77 12.77 0 00-8.14 2.59zm-117.97-372.7a18 18 0 00-5.32 1.4 22.39 22.39 0 00-7.45 5.58c-.58.91-1.17 1.81-1.76 2.72a14.18 14.18 0 00-1.74 3.26 43.86 43.86 0 00-2.06 6.5 51.77 51.77 0 00-1.28 11.77c-.26 8.51.83 17.08 2 25.48a166.56 166.56 0 007 30.65c1 2.93 2.3 5.81 3.44 8.7.79 2 1.62 4 2.51 5.94 4.8 10.57 9.54 21.19 14.63 31.62q12.36 25.3 25 50.45c.54 1 1.07 2.06 1.62 3.1a13.49 13.49 0 0015.75 4.93c6.39-2.34 10.68-10.06 8.28-16.67 2.7-4.15 5.59-8.3 7.41-12.93 2.23-5.68 2.28-12.12 2.44-18.13a124.27 124.27 0 00-.76-16.25 103.41 103.41 0 00-2.7-13.48c-2-8.26-4-16.5-6.17-24.71-2-7.37-4.29-14.63-6.79-21.82-1.26-3.6-2.85-7.1-4.4-10.58-1.8-4.06-3.71-8-5.77-12l1.35 2.58q-1.22-2.34-2.45-4.68a2.12 2.12 0 01.11.21 180 180 0 00-19.06-29.54c-1.81-2.25-3.76-4.39-5.78-6.45a37.16 37.16 0 00-7.69-5.61 17.09 17.09 0 00-8.76-2.09h-1.59zm8.92 56.44c-.84-4.35-1.41-8.78-1.89-13.18a115.84 115.84 0 01-.89-13.41 201.67 201.67 0 0119.38 28.7c2.37 4.67 4.65 9.38 6.77 14.17 2.38 5.4 4.32 11 6.25 16.55a367.69 367.69 0 0110.25 36.12 101.68 101.68 0 011.66 22.58c-.15 1.82-.33 3.62-.63 5.41-.84-1.62-1.66-3.24-2.48-4.86q-6.33-12.6-12.56-25.24c-3.82-7.74-7.39-15.62-11-23.46-1.86-4-3.8-8-5.45-12.13q-1.75-4.32-3.48-8.65a97.34 97.34 0 01-4.27-13.86c-.56-2.91-1.11-5.82-1.67-8.74zm33.85-13c-.41-.8-.82-1.6-1.24-2.38.41.79.83 1.58 1.24 2.38z"></path>
+    <path class="cls-2" d="M170.34 1355.42a11.63 11.63 0 00-4.94 3.44c-2.15 2.53-2.76 5.36-2.76 8.59 0 2 0 4 .16 6.06a47.32 47.32 0 001.44 6.72c.84 3.6 2.18 7.1 3.37 10.6 1 2.91 2.06 5.79 3.11 8.68 1.91 5.23 3.78 10.49 5.77 15.69 4.29 11.18 8.69 22.28 13.47 33.26 4.52 10.38 9 20.75 13.71 31.07 2 4.53 4 9.12 6.15 13.57 1.53 3.11 2.63 6.34 4.3 9.4a20 20 0 003.38 4.21 15.27 15.27 0 003.73 2.86c.35.61.71 1.22 1.09 1.81a30.58 30.58 0 004 4.31 14.78 14.78 0 0018.06.84c6.49-4.55 8.41-14.1 3.63-20.61-.49-.67-.93-1.34-1.36-2q-1-2.16-2-4.34v-.47a88.72 88.72 0 00.47-8.93 35.07 35.07 0 00-.76-5.48c-.54-3.07-1.3-6.11-2-9.15-3.1-13.11-8.2-25.86-13.74-38.11-4.93-11-9.9-21.9-15.14-32.71-2.81-5.81-6-11.52-9.31-17-.61-1-1.28-2-1.92-3s-1.38-2.08-2.13-3.08a20.49 20.49 0 00-6.37-5.57 13.81 13.81 0 00-6.34-2.08l-.35-.64a18.71 18.71 0 00-5.05-5.76 12.55 12.55 0 00-7.73-2.79 11.35 11.35 0 00-3.94.71z"></path>
+    <path class="cls-2" d="M210.69 1485.45a14.44 14.44 0 00-5.88 9.1l-.2 3.84a14.25 14.25 0 002.55 7.06c2.25 4.24 4.44 8.52 6.77 12.72a14.2 14.2 0 0024.45-2c1.55-3.22 2.06-7.69.54-11-2.51-5.51-5.41-10.82-8.23-16.16-1.65-3.09-5.82-5.26-9.1-5.88a14.57 14.57 0 00-2.64-.24 14.38 14.38 0 00-8.26 2.59z"></path>
+    <path class="cls-2" d="M367.38 1416c-4.29.91-8.53 1.91-12.71 3.21a206.42 206.42 0 00-22.89 9c-5.39 2.4-10.7 5-16 7.53-5.64 2.7-11.25 5.41-16.85 8.19s-11.25 5.66-16.56 8.9a220.76 220.76 0 00-26.52 18.46c-5.82 4.86-10.92 10.08-14.56 16.77-2.35 4.3-1.6 10.07 1.14 14a13.4 13.4 0 002.45 2.65 10.51 10.51 0 00-4.79 7c-1.07 5.64 2.79 11.8 8.63 12.67 3.36.51 6.71.94 10.08 1.39 3 .41 6 .47 9 .7 6.46.49 13 .44 19.48.49a179.92 179.92 0 0032.35-2.64 49.64 49.64 0 0011.25-3.23 107.76 107.76 0 0010.39-5.41 132.83 132.83 0 0014.47-9.65l8.53-6.53c2.18-1.67 4.2-3.56 6.28-5.35 5-4.31 9.71-8.86 14.45-13.44a152 152 0 0011.29-12.89 131.37 131.37 0 0010.63-15.62 25.63 25.63 0 002.28-5.1c1-2.83 1.88-5.74 1.56-8.8a44.9 44.9 0 00-1.43-7c-.25-.51-.49-1-.74-1.53a16 16 0 00-2.66-4.51 26.44 26.44 0 00-10.95-8.32c-5-2.06-10.09-2.32-15.46-2.53h-1a54.39 54.39 0 00-11.13 1.57zm16.55 20.92c0 .43 0 .85-.06 1.27l.06-1.27zm-1.79 5.38c-1 1.85-2 3.66-3.1 5.47a135 135 0 01-8.78 11.69c-1.67 1.95-3.29 4-5.09 5.82l-7.09 7.24c-3.13 2.85-6.25 5.72-9.57 8.35-7.88 6.26-15.79 12.34-24.6 17.27a46.6 46.6 0 01-7.5 3c-1.53.46-3.12.77-4.69 1.11l2-.44a206.32 206.32 0 01-21.3 2.72c-7.53.55-15.05.47-22.59.41l-6-.4a15 15 0 001.22-.87c1.18-.93 2.34-1.88 3.5-2.84 2.23-1.85 4.56-3.6 6.87-5.36 4.44-3.39 8.92-6.77 13.42-10.09 4.95-3.64 9.94-7.13 15.21-10.31 4.92-3 10-5.73 15-8.48 17.52-9.09 35.24-18.62 54.46-23.39a52.23 52.23 0 018.56-.91zm2.58.39a9.25 9.25 0 01.61 1.17l-.62-1.17z"></path>
+    <path class="cls-2" d="M377 1431.59c-9.42 3-18.58 6.92-27.76 10.57-8.44 3.36-16.8 6.95-25.15 10.53l-12.62 5.45c-3.65 1.58-7.35 3.09-10.89 4.9-8.43 4.31-16.67 9-25 13.46a90.31 90.31 0 01-11.47 4.83c-2.28.77-4.56 1.56-6.84 2.35-3.85 1.34-7.87 2.3-11.21 4.76a13.53 13.53 0 00-5.42 8.4 13.29 13.29 0 004.44 12.57c3.25 3.16 7.41 4.1 11.74 4.48 3.17.28 6.37.32 9.55.33h14.8c2.45 0 4.91 0 7.38-.07a132.1 132.1 0 0020.16-2.78 119.68 119.68 0 0018.81-4.94c2.76-1 5.49-2.19 8.12-3.47 2.84-1.39 5.67-2.77 8.48-4.21 2.07-1.07 4.21-2.14 6.25-3.3a34 34 0 007.52-6 14.39 14.39 0 003.19-6.67 14.91 14.91 0 00.25-2.49l1.91-.83c5-2.14 7.89-7.48 5.94-12.79a9.61 9.61 0 00-2.36-3.66q4.55-2.31 9.16-4.49c1.54-.72 3.1-1.42 4.66-2.11 1-.44 2-.91 3-1.39 1.39-.71 2.75-1.43 4.11-2.2 1.88-1 3-3.12 4.06-4.87 2.1-3.57 1.29-8.69-1-11.93a11.72 11.72 0 00-9.74-5 13 13 0 00-4.06.65zm-122.1-254.73c-4.7 1.26-8.21 3.94-11.57 7.34a26.81 26.81 0 00-3.67 5.68c-1.43 2.51-2.07 5.49-2.94 8.21-2.19 6.83-2.72 14.3-3.19 21.41a207 207 0 00-.1 27.62 177.8 177.8 0 003.44 23.65c1.15 5.63 2.2 11.3 3.55 16.88 2.17 8.94 4.29 17.89 6.84 26.73a237.28 237.28 0 008.47 24.74c1.66 4.07 3.53 8.05 5.35 12.06 2.82 6.23 5.67 12.81 11 17.33a15.38 15.38 0 0023.79-5.07c2.27-3.52 2.33-7.71 2.34-11.73v-.21c2-6 4-12.15 5.42-18.36a173.22 173.22 0 003.5-24.82c.74-9 1-18.11 1.42-27.17.23-5 .52-10 .47-15-.08-9-1.88-17.77-3.9-26.53-1.33-5.77-3-11.5-4.84-17.12s-3.69-11.14-5.85-16.61c-3.29-8.38-7.39-17-14.33-23a28.4 28.4 0 00-8.33-4.9 34.75 34.75 0 00-6.75-1.9 19.61 19.61 0 00-3.3-.28 26 26 0 00-6.79 1zm11.93 28.14zm-1.3 10.4q2 4.74 3.74 9.59a12.57 12.57 0 00-4.48.64c0-.9 0-1.8.08-2.7.16-2.51.36-5 .66-7.53z"></path>
+    <path class="cls-2" d="M420.23 1264.34a86.06 86.06 0 00-13.49 1.58 184.81 184.81 0 00-24.94 6.44 158.72 158.72 0 00-25.07 11.53c-9.68 5.28-19 11.23-28.23 17.26a112 112 0 00-11.2 8.44q-3.76 3.23-7.37 6.62a33.17 33.17 0 00-6.21 8.19c-2.32 4.18-1.55 9.88 1.09 13.7a11.41 11.41 0 00.06 13c3 4.09 5.91 8.33 9.82 11.64 7 5.91 16.78 7.12 25.55 7.4 13 .41 25.81-1.9 38.49-4.52a153 153 0 0018.56-5.09 59.68 59.68 0 007.91-3.55 95.38 95.38 0 0010.05-5.9c3.19-2.16 6.23-4.56 9.31-6.88 6.34-4.8 12.76-10 18-16a66.39 66.39 0 007.05-10.15c2.24-3.74 3.47-8 4.77-12.11a43.07 43.07 0 001.8-10.14 54.52 54.52 0 00.13-6.76c-.33-1.69-.69-3.39-1.08-5.07a13.54 13.54 0 00-1.36-3.06 24.48 24.48 0 00-3.72-5.82 25 25 0 00-4.78-4.44 40 40 0 00-5.75-3.35 47.71 47.71 0 00-6.31-2.12 24.07 24.07 0 00-5.53-.75c-1.92-.12-3.8-.19-5.7-.19h-1.88zm4.8 28a27.37 27.37 0 012.83.47l.9.41v.59a51.74 51.74 0 01-1.51 7.59 46.68 46.68 0 01-3.18 6.61 63.89 63.89 0 01-6.91 7.9c-7.87 7-16 14-25.23 19.24a116.55 116.55 0 01-25.3 8.41c-9.51 2-19.1 3.41-28.82 3.24a44.4 44.4 0 01-6.47-1c-.72-.29-1.42-.6-2.13-.94l-1-.8c-.8-1-1.59-2.06-2.36-3.1a67.07 67.07 0 009.43-7.27c3.48-3 7.11-5.81 10.87-8.42a344.65 344.65 0 0131-19.7 154.66 154.66 0 0114.4-6.31 137.91 137.91 0 0117.6-5.13 88.3 88.3 0 0115.8-1.78zm4.15 1.41a9.75 9.75 0 01.29 1.3c-.1-.43-.19-.86-.29-1.3zm.43.37a12.9 12.9 0 01.6 1.17l-.6-1.17z"></path>
+    <path class="cls-2" d="M403.81 1286.68a15.86 15.86 0 00-10.75 5.52l-.75 1.16q-1.67 1.23-3.39 2.37c-2.58.72-5.14 1.47-7.7 2.2a181.46 181.46 0 00-25.78 9.14 97.44 97.44 0 00-9.22 4.84 18.37 18.37 0 00-7.31 7.44 12.41 12.41 0 00-.7 1.78 15.31 15.31 0 00-1 1.37c-1.75.88-3.5 1.8-5.26 2.71-1.5.47-3 1-4.48 1.48-2.17.76-4.28 1.59-6.38 2.5s-5.12 2-6.81 3.38c-2.5 2-4.62 3.83-6 6.77a15.34 15.34 0 00-1.44 8.56 16.31 16.31 0 005.51 10.73 16 16 0 0015.61 2.78 131.93 131.93 0 0016-7.27l2.59-1.29q6.58-2.56 13-5.51 3.15-1.44 6.27-2.94c1.42-.12 2.84-.25 4.26-.4 4.26-.44 8.51-1.09 12.75-1.69q3-.42 5.89-1a59.56 59.56 0 0012.9-4.28c4.29-2 8.4-4.33 12.53-6.57 1.25-.69 2.46-1.46 3.69-2.18a55.14 55.14 0 009.36-7.61 27 27 0 002.72-4 18.85 18.85 0 001.78-6 13.55 13.55 0 00-.59-7.08 17.59 17.59 0 00-4.61-6.73 17.85 17.85 0 00-4-2.85 24.54 24.54 0 00-5.56-2 15.73 15.73 0 00-11.75-5.34h-1.29zm-148.07-94.41a11.12 11.12 0 00-6.16 5.59c-2.17 4.44-.9 9.53-.27 14.2.49 3.56.71 7.17 1 10.74a10 10 0 005 7.78c2 10.32 4 20.64 5.75 31 .54 3.2 1.57 5.87 4.12 8a11.88 11.88 0 008.59 2.76c6.29-.52 11.48-6.32 10.79-12.72-1.07-10-2.62-19.79-4.44-29.62-.59-3.15-1.4-6.29-2.1-9.41-.47-2-.91-4.06-1.5-6.07-.73-2.48-1.45-5-2.18-7.44a38.4 38.4 0 00-3.63-8.58 16.78 16.78 0 00-3.3-4c-1.81-1.54-3.64-2-5.85-2.68a11.13 11.13 0 00-5.85.48z"></path>
+    <path class="cls-2" d="M425.19 1290.51q-6 .67-12 1.4a10 10 0 00-8.71 7.84c-3.27.64-6.55 1.21-9.84 1.69-6.17.88-12.35 1.71-18.52 2.57a7.68 7.68 0 00-6.93 8.17c.33 3.94 4.07 7.49 8.17 6.93 10.23-1.42 20.48-2.62 30.69-4.22 4.16-.65 8.29-1.42 12.42-2.2 5.4-1 10.84-2 16.2-3.14a17 17 0 003.68-1 10.75 10.75 0 004.28-3.22 9.52 9.52 0 001.66-9.32 9.38 9.38 0 00-7.08-6 26.73 26.73 0 00-4.18-.31 85.56 85.56 0 00-9.85.86zm43.06-356.19a22.09 22.09 0 00-5.06 2.79 15.52 15.52 0 00-3.69 4.07c-4.78 7.15-6.43 15.66-7.89 24a165.71 165.71 0 00-2.09 24.68 169.32 169.32 0 001.49 25.45c1 7.7 2.53 15.31 4 22.94 1.1 5.94 2.41 11.84 3.76 17.72a163.06 163.06 0 005.32 19 73.85 73.85 0 004 9.16 53.41 53.41 0 003.3 5.9 49.5 49.5 0 005.19 6.13 12.63 12.63 0 0019.55-4.17 12.3 12.3 0 00.47-9.8c-2-4.49-4.57-8.7-7-13-.18-.39-.35-.78-.53-1.16a8.89 8.89 0 002.79-.52c1.91-.71 4.18-2.4 4.86-4.42 2.25-6.6 4.1-13.24 5.74-20a108.66 108.66 0 002.63-18.49 210.8 210.8 0 00.09-26 142.22 142.22 0 00-4-24.69c-1.24-5.24-3-10.36-4.63-15.48-.8-2.49-1.74-4.91-2.65-7.36a38.71 38.71 0 00-4-7.94 22.78 22.78 0 00-10-7.93 19.59 19.59 0 00-7.5-1.64 11 11 0 00-4.19.75zm3.69 19.12a9.9 9.9 0 01.87.56l-.87-.56zm-.78.09l.5.16-.5-.16zm-.1.44h.74-.74zm3.93 3.12c1.29 2.94 2.45 5.93 3.52 9a205.52 205.52 0 016.4 21 160.85 160.85 0 012.46 37.18 115.43 115.43 0 01-1.65 13.34c-.42 2.19-.94 4.36-1.43 6.54s-1.09 4.36-1.72 6.52c-3.06-9.86-5.34-20-7.63-30-1.25-6.86-2.36-13.72-2.95-20.67a159.29 159.29 0 01-.37-20 120.1 120.1 0 013.38-22.91z"></path>
+    <path class="cls-2" d="M486.72 940.89a11.81 11.81 0 00-4.81 7.44 11 11 0 00-.19 2.33 12.11 12.11 0 00-4.48 3.15 14.3 14.3 0 00-2.91 6.17c-.42 3.65-.08 7.19-.12 10.83 0 3.21.09 6.42.25 9.62a9.5 9.5 0 00-5.9 7.15c-1.57 10.24-.38 20.6.42 30.86.23 3.1.47 6.21.71 9.31.19 2.52.63 5 .95 7.56.68 5.37 1.4 10.74 2.2 16.09 0 1-.07 1.93-.11 2.89-.08 1.38-.16 2.75-.25 4.12-.05.89-.09 1.77-.14 2.66a9.88 9.88 0 001.76 4.85 10 10 0 001.46 1.66c.15.74.29 1.48.44 2.23.43 2.18.9 4.35 1.39 6.52a29.83 29.83 0 004 10.09 14.14 14.14 0 005 4.19 11.34 11.34 0 008.3.39c4.55-1.24 7.88-5 9.53-9.28a39.35 39.35 0 002.27-10.76 16.37 16.37 0 005.16-3.58 23.14 23.14 0 005.25-10.38c.47-1.69.83-3.37 1.14-5.11a105.84 105.84 0 001.32-12.94 166.43 166.43 0 00.26-21.42q-.42-5.64-.85-11.29c-.45-5.82-1.26-11.57-2-17.35q-1.44-11.18-3.86-22.17a83.27 83.27 0 00-2.57-9.53c-.53-1.53-1.14-3-1.77-4.48a51.13 51.13 0 00-3.31-6.25 31.87 31.87 0 00-4.19-4.87 11.75 11.75 0 00-5.42-2.6 11.81 11.81 0 00-8.93 1.93z"></path>
+    <path class="cls-2" d="M474.89 931.1c-3.77 4-4.17 10.56-3.18 15.67a82.81 82.81 0 002.09 8.23c.63 2 1.2 4.1 1.87 6.12a23.12 23.12 0 002.09 4.94c.4 3.83.76 7.66 1.14 11.48a221.18 221.18 0 011.35 25.6v.39c-.05 1.08-.11 2.17-.16 3.25a12.13 12.13 0 009.84 11c6.37 1.2 13.17-3.15 14.21-9.68 1.87-11.69-.11-23.49-1.79-35.08-.73-5-1.38-10-2.3-15q-.84-4.63-1.7-9.27a89.33 89.33 0 00-2.83-11.3c-1.23-3.81-3.8-7.46-7.57-9.08a11.76 11.76 0 00-4.68-1 11.42 11.42 0 00-8.35 3.79zm5.51 69.51v.75-.75z"></path>
+    <path class="cls-2" d="M476.94 929.94a35.93 35.93 0 00-4.89 2.73c-2.34 1.73-3.59 3.86-5 6.3-.16.46-.33.92-.49 1.39a31.48 31.48 0 00-1.42 4.71c-.43 1.75-.76 3.51-1.05 5.29-.57 3.59-.8 7.24-1.13 10.85a166.39 166.39 0 00-.41 20.71 10.88 10.88 0 002.13 6.09c0 .5 0 1 .05 1.51.08 2 .2 4.08.34 6.12.1 1.41.3 2.81.53 4.21.35 1.63.7 3.24 1.07 4.84a17.94 17.94 0 002.75 6c1 1.2 2 2.36 3.09 3.47a13.74 13.74 0 006.35 3c3.78 1.23 8.6 0 11.82-2.23 6.12-4.29 7.4-11.72 7.91-18.64a245.23 245.23 0 00-.12-30.31c-.23-4.42-.46-8.84-.87-13.25-.15-1.64-.31-3.29-.61-4.9-.24-1.28-.48-2.56-.73-3.83-.72-3.49-1.62-6.47-4-9.26a13.11 13.11 0 00-5.1-4.33 14.68 14.68 0 00-6.12-1.38 9 9 0 00-4.12.88zm95.94 107.75c-8.25 1.19-16.5 2.51-24.78 3.45l-14.21 1.61a71.66 71.66 0 00-11.65 2c-3.18.93-6.32 2-9.47 3.07-6.49 2.17-9.78 9.83-7.49 16.12a12.45 12.45 0 002.77 4.4 13.77 13.77 0 00-6.9 6.65 14.15 14.15 0 003.56 16.68c5 4.5 11.29 7.53 17.28 10.53 4.75 2.38 9.62 4.66 14.54 6.69 14.72 6 30.77 10.27 46.78 10.09 6.28-.07 12.48-.44 18.74-1 16.58-1.4 34.05-3.75 48.23-13.11a48.62 48.62 0 008.86-7.85 24.47 24.47 0 005.65-11.8c.91-4.54.28-8.86-.78-13.27s-3.14-8-5.2-11.91a44.73 44.73 0 00-10.2-12.71 48.47 48.47 0 00-9.49-6.11 51.39 51.39 0 00-6.29-2.6 79.52 79.52 0 00-26.74-4.15c-11.11 0-22.33 1.62-33.21 3.19zm-21.48 28.77c6.39-.59 12.76-1.44 19.14-2.15 11.91-1.34 23.75-2.44 35.72-2.17a87.44 87.44 0 0113.13 2.33 48.68 48.68 0 016.48 3.09c1 .74 1.93 1.52 2.83 2.35a44.91 44.91 0 013.21 5c.45 1 .86 2 1.23 3-.95.69-1.93 1.35-2.94 2a73.1 73.1 0 01-11.6 3.87 249.93 249.93 0 01-26.6 3.14c-4.61.37-9.22.54-13.84.46a130.75 130.75 0 01-21.45-4.19c-5.88-2.11-11.58-4.6-17.33-7-3.27-1.39-6.51-2.89-9.75-4.35-1.33-.6-2.71-1.2-4.12-1.76 1.47-.48 2.94-1 4.41-1.39 7.07-1.22 14.36-1.55 21.48-2.2zm83.29 10.18v.06-.06z"></path>
+    <path class="cls-2" d="M539.45 1055.76c-4.45.4-8.88 1-13.34 1.32-2.16.16-4.32.26-6.49.41-2.37.17-4.69.58-7 .84a14.79 14.79 0 00-8.36 26c3.18 2.7 6.72 3.45 10.78 3.46a30 30 0 007.13-1.13 35.23 35.23 0 014.82-.57c2.27-.11 4.54-.2 6.79-.48 5.28-.66 10.54-1.4 15.83-1.84h.72a16.75 16.75 0 00-.77 6.53 13.16 13.16 0 002.34 6.51c1.85 2.63 5.11 5.07 8.4 5.42a48.06 48.06 0 0015.46-.7c4.52-1 9-2 13.47-3.22 3.78-1.09 7.52-2.25 11.27-3.46l1.67-.56c.29-.08.59-.16.88-.27 2.26-.77 4.5-1.56 6.72-2.41 1.42-.54 2.77-1.19 4.18-1.75a14.24 14.24 0 001.48-.71c1.06 0 2.11 0 3.17.05 1.5.12 3 .24 4.5.38a56.16 56.16 0 007.78.27l1.22-.14c1.77-.35 3.55-.73 5.32-1.13a16.77 16.77 0 005.4-2.89c2.68-2.27 4.65-4.66 5.32-8.23.58-3.07.07-7.43-2.13-9.87-1-1.07-1.93-2.14-2.92-3.21a16.87 16.87 0 00-5.07-3c-3.37-1.28-6.68-1.61-10.21-2.08-4.26-.55-8.59-.72-12.89-1l-15.66-.84c-10.16-.56-20.29-1.46-30.46-1.84-5.24-.2-10.47-.39-15.7-.39-4.53 0-9.07.14-13.61.54zm25.23-245.88c-5 1.74-8.52 5.33-11.14 9.86a54.69 54.69 0 00-4.43 11.07c-2.58 8.08-3.62 16.72-4.36 25.12a255.47 255.47 0 00-.38 40.37c.49 6.88 1.49 13.62 2.53 20.43 1.24 8.18 2.55 16.37 4.22 24.48 2 9.83 4 19.68 6.51 29.42 1.1 4.37 2.27 8.7 3.64 13a36.27 36.27 0 002.09 4.93c.91 1.84 1.86 3.65 2.91 5.41a16.26 16.26 0 0010.76 7.19 15.28 15.28 0 008-.66 17 17 0 004.34-2.42 13.18 13.18 0 003.61 1.24 13.91 13.91 0 0016.06-10.93q1.17-5.58 2.36-11.17c1.1-5.19 2.39-10.35 3.2-15.6a177.42 177.42 0 001.77-24.7 195.74 195.74 0 00-1.62-26.17c-1.94-16.27-6.17-32.21-10.53-48q-2.09-7.54-4.42-15c-1.65-5.28-3.28-10.61-5.44-15.7a114.93 114.93 0 00-5.47-11.21c-3.75-6.7-11.11-11.9-18.8-11.91a16.51 16.51 0 00-5.45.92zm13.49 103.23c-1-5.77-1.86-11.47-2.47-17.29a237 237 0 01-1-32.41c.44 1.52.89 3 1.34 4.54 3.09 10.41 5.77 20.87 8.36 31.4a207.07 207.07 0 014.12 47.31c-.24 3.43-.6 6.84-1.06 10.25-1.8-7-3.47-14-5.08-21-1.5-7.59-2.95-15.17-4.24-22.8z"></path>
+    <path class="cls-2" d="M581.76 871.07c-6.78.56-12.41 6.84-11.65 13.75.06.57.12 1.13.19 1.69a12.81 12.81 0 00-.8 1.34 23.56 23.56 0 00-2.46 8.69 98 98 0 00-.24 10.7c0 3.1.07 6.19.11 9.29s.09 5.9.16 8.84q-.51 3.36-1 6.7a12.13 12.13 0 001.43 7.79q.15 3.63.4 7.25c.17 2.51.32 5 .56 7.51.49 5.07.86 10 2.84 14.82a13 13 0 006.38 7c2.82 1.35 6.83 1.84 9.77.47 3.5-1.64 6.92-3.55 8.57-7.31a21.95 21.95 0 002.13-10.52c.38-5.07.77-10.16.78-15.25v-11.16c0-5.1-.15-10.23-.38-15.32-.27-6-.58-12.08-1-18.1-.18-2.61-.51-5.19-.88-7.77-.3-2.93-.62-5.88-1.2-8.76-.24-1.12-.48-2.23-.73-3.34a12.68 12.68 0 00-3.72-5.34 12.81 12.81 0 00-8.27-3h-1zm12 87.5l.4.77a8 8 0 01-.4-.77z"></path>
+    <path class="cls-2" d="M674.25 936.24a103.07 103.07 0 00-11.65.6 121.72 121.72 0 00-14.25 2.83c-6.68 1.7-13.14 4.57-19.45 7.31-5.16 2.23-10.75 5.28-13.88 10-2.17.24-4.33.45-6.51.54a12 12 0 00-13.29 12.57 11.79 11.79 0 00-3.58 1.65 10.63 10.63 0 00-2.64 14.79c1.72 2.47 4 3.5 6.72 4.35 4 1.25 8.08 2.52 12.12 3.79q14.36 4.76 28.51 10.06c2.31.87 4.6 1.8 6.9 2.69a86.39 86.39 0 0016.67 4.82c7.19 1.24 14.63 1.45 21.92 1.89a99.33 99.33 0 0018.33-.19c6.12-.76 12.41-1.87 18.1-4.33a87.19 87.19 0 009.52-4.89 38.82 38.82 0 007.36-6.05c1.69-1.66 2.81-4 4-6a19.35 19.35 0 001.28-3.21q.88-2.45 1.56-5a35.4 35.4 0 00.84-5 50.23 50.23 0 00.54-7.82 42.17 42.17 0 00-2.37-12.21 29.33 29.33 0 00-7.62-11.25 33.32 33.32 0 00-11.36-6.9c-11.21-4.07-23.22-4.42-35-4.81-3.5-.12-7-.25-10.52-.25h-2.17zm21.26 29a87.2 87.2 0 0116.09 2.25c.78.32 1.54.66 2.29 1l1 .85.18.26c.33.79.61 1.58.87 2.39s.17 1.9.2 2.87a44.14 44.14 0 01-1 6c-.08.18-.17.35-.25.53l-.07.08a44.18 44.18 0 01-5.34 3.55 59.73 59.73 0 01-8.35 3 86.5 86.5 0 01-14.13 1.66c-5.42.15-10.82 0-16.23-.22a85 85 0 01-17.28-2.75c-2.44-.69-4.86-1.45-7.28-2.19l-9.92-3a13.62 13.62 0 006.52-7.93c2.08-.75 4.12-1.69 6.15-2.52a102.42 102.42 0 0113.57-4.54c10.91-1.72 22-1.73 33-1.3zM716 979.9l-.38.58.38-.58z"></path>
+    <path class="cls-2" d="M620.23 954.53a9.13 9.13 0 00-3.72 5.75 8.43 8.43 0 00-.16 1.8 13.46 13.46 0 00-7.4 17c1.13 3.09 3.7 6.28 6.83 7.52a43.76 43.76 0 004.75 1.66c1.86.17 3.73.29 5.6.35 2.65-.09 5.26-.32 7.88-.67s5.38-1 8-1.56c1.41-.3 2.81-.61 4.2-.94 1.92.06 3.84.08 5.77 0h.8a12.34 12.34 0 009.09 7.16c9.38 1.4 18.91.63 28.34.24 5.5-.23 11-.81 16.48-1.32 8.66-.82 17.79-1.48 25.79-5.1 4.83-2.18 8.6-6 9.28-11.51a16.83 16.83 0 00-.88-7.93 14.23 14.23 0 00-4.77-6.3c-3.2-2.72-7.48-3.63-11.48-4.44a86.4 86.4 0 00-14.63-1.21c-9.72-.3-19.46.45-29.18 1q-6.47.36-12.92.8a13.35 13.35 0 00-7.16-3.9l-3.57-.18a13.25 13.25 0 00-6.55 2.35c-.26.16-.52.32-.79.47a57 57 0 01-6.91 2.57q-7.9-2.61-15.83-5.15a5.33 5.33 0 00-1.66-.24 9.76 9.76 0 00-5.25 1.73z"></path>
+    <path class="cls-2" d="M591.18 874.38a12.37 12.37 0 00-7.29 15.72c2.3 6 4.63 12 7 18 4.22 11 8.48 22 11.29 33.47a68.32 68.32 0 011.13 12.51 44.11 44.11 0 01-1 5.73l-.28.66c-1.49-.31-3-.67-4.46-1-1.72-.39-3.46-.74-5.18-1.16-5-1.23-10-2.45-15-3.7-7.24-1.81-14.67 3.9-16 10.9a13.84 13.84 0 002.24 10.4 14.32 14.32 0 008.67 5.6c7.47 1.87 14.95 3.73 22.46 5.45l2.38.56a35.84 35.84 0 009 .74c5.81-.11 11.63-3.38 15.43-7.66a35.19 35.19 0 007.39-13.86 55.15 55.15 0 001.84-15.84c0-9.55-2.93-19-5.83-28a192.21 192.21 0 00-7.79-19.47c-3.27-7.34-6.56-14.64-10.2-21.81-.5-.93-1-1.86-1.47-2.81a12.29 12.29 0 00-14.25-4.48zM602.63 960l-.32.48.32-.48zm.41.43l-.27.27.3-.27z"></path>
+    <path class="cls-2" d="M564.76 852.45a14.84 14.84 0 00-5.82 9.29 23.37 23.37 0 00.38 8.77c.79 4 1.78 7.86 2.71 11.79.1.62.2 1.25.29 1.87l-.51 1.33a12.49 12.49 0 00-.45 9.19 11.84 11.84 0 0015.19 7 11.51 11.51 0 006.6-6c.1-.24.2-.49.29-.74s.43-.27.64-.42c3.13-2.2 4.67-5.17 5.66-8.76.83-3 .18-7-1-9.84l-.07-.17a40.08 40.08 0 00.16-7c-.46-6.87-4.36-13.85-10.42-17.22a12.85 12.85 0 00-6.17-1.49 12.22 12.22 0 00-7.49 2.36zm-445.21 861.92a12.57 12.57 0 00-1.65 2.5c-.17.18-.34.36-.49.54-1.83 2.15-3.38 5.75-2.78 8.64.45 2.2.66 4.37 2.16 6.18.53.63 1 1.22 1.61 1.82q1.56 1.73 3.14 3.43c1.56 1.72 3.12 3.45 4.6 5.26.61.75 1.23 1.51 1.84 2.28.86 1.71 1.83 3.37 2.74 5 .44.8.92 1.57 1.4 2.35s1 1.57 1.57 2.33l.28.36a11.4 11.4 0 004.36 9.08 49.19 49.19 0 013.87 3.15c.72 1 1.38 2 2.05 3 .41.6.81 1.2 1.24 1.77a16.23 16.23 0 003.62 4l2.63 1.71a12.25 12.25 0 0016.38-5.77c.38-1.06.74-2.14 1.07-3.22a12.44 12.44 0 00-.54-6.54 29 29 0 00-2.59-5.28c-.86-1.55-1.87-3-2.84-4.5-2.07-3.16-4.16-6.3-6.23-9.46q-3.7-5.67-7.45-11.3c-1.45-2.18-3-4.32-4.49-6.48a17.17 17.17 0 00-1.2-4.26 23.35 23.35 0 00-4.86-7.11 12.43 12.43 0 00-7.5-3.68 15.06 15.06 0 00-2.21-.17 12.54 12.54 0 00-9.73 4.4zm34.87 234.92a39.45 39.45 0 00-7.2 1.31 17.93 17.93 0 00-8.52 27.08c2.49 3.54 6.91 6.86 11.34 7.32a81.37 81.37 0 0010.93.18c1.75 0 3.51-.09 5.27-.09a71.88 71.88 0 0111.42 2.44 76.41 76.41 0 0111.91 5.2 76.71 76.71 0 019.18 7.11 45.35 45.35 0 013.41 5.25 71.11 71.11 0 012.86 7c2.67 7.74 11.7 11.71 19.28 9a15.22 15.22 0 008.95-19.28 95.87 95.87 0 00-6.49-14.31c-.81-1.5-1.65-3-2.57-4.43a51.65 51.65 0 00-5.74-6.86c-5.24-5.63-10.69-11-17.37-14.88-3-1.75-6-3.39-9.16-4.88a92.48 92.48 0 00-14.23-5 52.23 52.23 0 00-11.31-1.76c-3-.18-5.94-.36-8.91-.36h-3.05z"></path>
+    <path class="cls-2" d="M133.72 1966.23a14 14 0 00-5.67 8.77c-.64 3.41 0 7.75 2.27 10.51 6.07 7.41 11.93 14.88 17.48 22.68a138.93 138.93 0 008.85 10.81c3.82 4.41 7.86 8.68 12.08 12.71 3.18 3 6.36 6 9.58 9 1.75 1.64 3.52 3.28 5.42 4.74a91 91 0 008.86 5.78c3.42 2 7.06 3.71 10.52 5.69a31.29 31.29 0 004.84 2.43c1.85.66 3.71 1.29 5.61 1.82a32.87 32.87 0 006.42.46 33.21 33.21 0 007.94-1.43 17.55 17.55 0 0011.44-17.89c-.76-9.23-9.41-17.21-18.9-16l-.71.09c-2.19-1-4.33-2.2-6.53-3.18a96.58 96.58 0 01-9-4.41c-2.44-1.75-4.79-3.64-7.13-5.52-3-2.41-6.08-4.71-9.1-7.08s-5.91-5.08-8.82-7.68c-2.67-2.38-5.33-4.78-7.8-7.36-6.28-7-12.35-14.24-18.34-21.5-2.36-2.87-5-5-8.76-5.66a13.92 13.92 0 00-10.52 2.25z"></path>
+    <path class="cls-2" d="M152.88 1976.21c-1.58 1.9-3.35 4.79-3.6 7.34a18.7 18.7 0 00.65 8.48c.84 3.34 3.49 6.3 5.9 8.59a14.4 14.4 0 0011.39 3.53c2 1.19 4 2.45 5.91 3.71 4.55 3.09 9.06 6.22 13.52 9.43 1.93 1.4 3.84 2.81 5.73 4.28l1.12.87c.6.86 1.18 1.74 1.73 2.64.73 1.76 1.34 3.55 1.94 5.37 2.13 6.38 9.67 9.6 15.84 7.35a12.11 12.11 0 007.19-7.14l.15-.1a15 15 0 004.91-5.79l1.21-3.7a15 15 0 00-.65-7.94c-1-4.44-4.89-7.8-8.09-10.74-.95-.86-2-1.65-2.95-2.48-1.93-1.62-3.82-3.27-5.83-4.79-5.1-3.85-10.21-7.6-15.43-11.28a149.6 149.6 0 00-15.85-9.81 33.84 33.84 0 00-9-3.14 16.12 16.12 0 00-3.19-.31 16.58 16.58 0 00-12.61 5.63zm-52.23-56.39c-.9 2.7-1.88 5.36-3 8a63.87 63.87 0 01-3 6.79l-.65 1.18a11.47 11.47 0 009.53-6.46 11.93 11.93 0 00-2-12.95c-.25 1.16-.65 2.29-1 3.44zm-31.75 12.33c.6 1.33 1.42 2.63 2.06 3.81a9.65 9.65 0 003.5 3.45c-.13-.24-.26-.5-.38-.76a7 7 0 01-2.69-3.64c-.38-1.32-.68-2.65-.93-4l-1.56 1.12zm240.22 153.69a41.06 41.06 0 00-2.06 6.24 45.71 45.71 0 00-2.33 6.6 27.68 27.68 0 00-1.36 5.72c-1.2 2.5-2.48 5-3.76 7.43-1.66 3.16-3.43 6.3-5.26 9.37-2.23 3.71-2.07 9.19-.64 13.11a16.9 16.9 0 0021.68 10.06 17.59 17.59 0 009.44-8.56c2.24-4.08 4.29-8.26 6.32-12.44a111.68 111.68 0 004.5-10.42c2.69-7.41 5.28-17.15-.64-23.85q-.21-.3-.42-.57a13.6 13.6 0 00-10.69-10.17 12.94 12.94 0 00-2.41-.22c-5.11 0-10.31 2.9-12.37 7.7z"></path>
+    <path class="cls-8" d="M129.9 1893.17a33.8 33.8 0 00-13.3 3.17 42.14 42.14 0 00-11.44 8.14 63.13 63.13 0 00-6.89 7.36A45.09 45.09 0 0092.2 1922a112 112 0 00-4.27 12.9 200 200 0 00-7 37.24 256.94 256.94 0 00-1 33.29c0 .92.07 1.85.11 2.76a42.16 42.16 0 001.2 7.75 23.47 23.47 0 007 11.87 16.71 16.71 0 0012.49 4.38 18.7 18.7 0 0012.24-6.41 50 50 0 006.85-10.91c2.36-4.9 4.06-10.18 5.93-15.28q1.89-5.17 3.75-10.35 4.11-2.44 8.21-4.92c2-1.21 4-2.48 5.94-3.79a69.87 69.87 0 0011.55-9.89 31.89 31.89 0 003.08-3.89 45.78 45.78 0 003.32-5.49 42.19 42.19 0 002.18-6.42 80.37 80.37 0 002.88-13.49c.75-5.78 1.18-11.64.22-17.42a35.22 35.22 0 00-8-17.6 38.65 38.65 0 00-15.92-11 50.47 50.47 0 00-6.49-2 17.17 17.17 0 00-3.67-.32c-1 0-1.91 0-2.82.05zm2.32 26c.53.09 1.05.21 1.58.34a32.36 32.36 0 014 1.89c.69.52 1.35 1.07 2 1.65s1 1.37 1.48 2.09a27.32 27.32 0 011 2.62 42.88 42.88 0 01.43 6.41 87.38 87.38 0 01-2.48 14.44c0-.9 0-1.8-.05-2.69a14.5 14.5 0 00-5.15-10c-1.05-.69-2.11-1.38-3.16-2.05a14.45 14.45 0 00-7.57-1.4 15.68 15.68 0 00-8 2 2.76 2.76 0 00.08-.27 38.24 38.24 0 012.33-5 59 59 0 016.21-7.1c.8-.64 1.61-1.22 2.47-1.78.7-.29 1.41-.56 2.13-.8.9-.12 1.8-.22 2.71-.28z"></path>
+    <path class="cls-8" d="M43.93 1931.62a50.23 50.23 0 00-9.27 1.23c-3.31.64-6.63 1.22-9.67 2.73-1.56.78-3.08 1.64-4.6 2.48-2.62 1.22-5.24 2.4-7.78 3.83l-.9.81a10.88 10.88 0 00-3.64 3.84 24.77 24.77 0 00-3.95 8.31c-1.23 4.47-.55 8.88.53 13.25v.21a36.42 36.42 0 001.64 6.7c.54 1.39 1.21 2.69 1.87 4l.05.1a63.6 63.6 0 005.26 9.7 80.15 80.15 0 0013.18 15.52 115 115 0 0014 10.66 118.29 118.29 0 0015.35 8.16 54.94 54.94 0 008.55 2.93l1.16.09a15.59 15.59 0 008.23-.68c3.1-1.13 4.92-3 7.25-5.23l2.16-3.33a15.58 15.58 0 001.48-8v-.88a11.57 11.57 0 0010.33-4 56.78 56.78 0 007.47-11.41c2.35-5 3-10.44 3.16-15.85a48.73 48.73 0 00-1.72-13.47 41.59 41.59 0 00-5.22-11.47c-3.61-5.95-9.78-10-15.69-13.37a49.13 49.13 0 00-15.62-5.26 121.49 121.49 0 00-21.48-1.6zm32.62 48.78a15.34 15.34 0 00-.66-8.06 40.91 40.91 0 00-2.78-5.73 37.46 37.46 0 00-4.22-5.88l1.11.27a49.19 49.19 0 016.4 3.13c.68.51 1.33 1 2 1.61a29.43 29.43 0 011.85 2.71 38 38 0 011.54 4.26 38 38 0 01.42 5.13 31.18 31.18 0 01-.7 4.29 32.47 32.47 0 01-1.62 3.23q-1.27 1.77-2.65 3.46a10.16 10.16 0 00-.69.93 29.48 29.48 0 00-1.5-3.63 16.8 16.8 0 001.5-5.73zm-33.9 35.91l-.77-.51.77.51zm-.77-.51c-.41-.26-.81-.53-1.21-.8l-1.33-.84 2.54 1.64z"></path>
+    <path class="cls-8" d="M122.27 1908c-3.58 4.33-6.06 9.64-8.72 14.56-2.18 4-4.35 8.1-6.76 12a114.86 114.86 0 01-10.23 12.62q-5.24 5.71-10.47 11.4c-3.85 4.16-3 11.11 1.21 14.67a10.55 10.55 0 0014.66-1.21c6.67-7.2 13.5-14.31 19.49-22.1a79.44 79.44 0 005.1-7.65 12.07 12.07 0 002.49-.61c3.07-1.13 5-3.24 6.58-6a61.93 61.93 0 004.7-9.74c1.41-3.82 2.71-7.44 1.93-11.55a11.27 11.27 0 00-2-5.59 11.43 11.43 0 00-4.4-3.73 11.46 11.46 0 00-13.57 2.9zm-37.45 92.29c-3 1.09-6.48 3.73-7.55 6.86-1.26 3.69-2.54 7.4-3.75 11.11.36-1.11.72-2.21 1.09-3.33q-3.52 10.71-7 21.43c-1.85 5.66-3.31 11.46-4.93 17.18-3 10.39-4.58 21.09-6.24 31.74-.89 5.7-1.36 11.49-1.93 17.23-.72 7.19-1.32 14.33 1.35 21.21a37.54 37.54 0 003.23 5.92 26.69 26.69 0 004.06 4.79c3.56 3.25 7.84 5 12.47 6s9.49.09 13.82-1.4a31.39 31.39 0 006.42-3.47 37.73 37.73 0 005.55-4.81 61.58 61.58 0 0013.19-20.36c5.43-13.23 7.64-27.59 8.52-41.78q.66-10.38 1.11-20.76c.1-2.48.06-5 .07-7.45s-.27-5.16-.51-7.7a17.59 17.59 0 00-7.51-12.84c-1.06-.7-2.13-1.39-3.2-2.08a14.78 14.78 0 00-7.66-1.41 14.57 14.57 0 00-3.13.6c.16-.5.33-1 .49-1.5a13.55 13.55 0 00-17.93-15.22z"></path>
+    <path class="cls-8" d="M109 1994.15a20.48 20.48 0 00-5 2.23c-.42.1-.85.19-1.27.3a31.91 31.91 0 00-6.45 3.43c-2 1.47-5.27 4.84-6.14 7.29-.12.31-.23.63-.34.94a16.57 16.57 0 00-1.58 8.58 19.35 19.35 0 003.5 10.52l.24.34a17 17 0 005.38 9.44c4.41 4.33 8.8 8.71 13.12 13.15 6.47 6.68 12.86 13.43 20 19.42a127.14 127.14 0 0037.16 21.21 136.8 136.8 0 0015.69 5.11 46.75 46.75 0 0012.14 1.09c4.92-.11 9.86-2.33 13.87-5 7.29-4.85 10.42-13.25 12.67-21.26.71-2.5.47-5.24.49-7.82-.12-.6-.23-1.2-.35-1.8a15.13 15.13 0 00-1.59-5.87c-2.37-5.34-6-9.29-10-13.44a59.64 59.64 0 00-8.05-6.46c-3.83-2.76-7.79-5.31-11.79-7.82-3.28-2.06-6.63-4-10-5.81-1.34-1.56-2.83-3-4.24-4.47a53.84 53.84 0 00-8.65-6.74 139 139 0 00-12-7.25c-4.27-2.31-8.77-4.14-13.21-6a58.15 58.15 0 00-22.55-5.13h-.12a39.15 39.15 0 00-10.92 1.82zm66.18 63.85l1.65 1c.85.57 1.7 1.14 2.54 1.73-1.91-.7-3.81-1.42-5.69-2.18.52-.17 1-.36 1.5-.56z"></path>
+    <path class="cls-9" d="M98.16 1983.46a31.37 31.37 0 00-13.57 8.17 27.31 27.31 0 00-7.87 15.4 16.05 16.05 0 002.53 11.75 15.51 15.51 0 005.22 4.68 22.26 22.26 0 006.16 10.17 24.77 24.77 0 005.59 3.7 11 11 0 004.46 1.27 30.43 30.43 0 003.07 1 15.8 15.8 0 006 .37c3.14-.29 5.4-1.62 8-3.16 2.14-1.24 4.45-4.38 5.57-6.49.19-.35.36-.71.53-1.06a46.69 46.69 0 003.86-5.83 19.2 19.2 0 001.71-3.71 39.71 39.71 0 002-7.24 26.12 26.12 0 00-1.76-15c-2.65-5.93-7.33-10.14-13.12-12.94a27.39 27.39 0 00-10.74-2.23 27.64 27.64 0 00-7.68 1.11z"></path>
+    <path class="cls-8" d="M114.64 1497c-2 .75-5.69 3.06-6.94 4.94-1.37 2-2.66 4.07-3.81 6.19a49 49 0 00-6.71 5.71 64.87 64.87 0 00-12.39 17.51 62.37 62.37 0 00-3.11 7.84 81.3 81.3 0 00-3.1 11.19 49.88 49.88 0 00-.58 11.71 27.56 27.56 0 001.27 6.61 43.12 43.12 0 002.8 5.81c1.12 1.23 2.24 2.45 3.35 3.68a20 20 0 005.54 3.18 57.19 57.19 0 006.44 1.92 31.79 31.79 0 007.49.47 25.77 25.77 0 006.33-1.53 42 42 0 005.75-2.83l1.41-1.15a35.19 35.19 0 004-3.88 36.39 36.39 0 003.77-5.54c4.12-6.87 6.7-14.71 8.69-22.44 1.94-7.55 2.36-15.63 2.26-23.39q0-3.81-.18-7.62c-.35-8.44-4.92-18.23-14.49-19a15.31 15.31 0 00-2.75-.26 14.85 14.85 0 00-5.07.9z"></path>
+    <path class="cls-8" d="M91.42 1487.61c-5 1.72-10 3.37-15.1 4.77-6.77 1.34-13.58 2.53-20.23 4.42a53.66 53.66 0 00-18.09 9.4 58.79 58.79 0 00-14.58 17 32.19 32.19 0 00-3.3 9.32 29.5 29.5 0 00-.29 6q0 1 .06 2.07a53.22 53.22 0 001.58 9.22c.86 4 2.12 8 4.89 11a21.47 21.47 0 006.33 5.36 10.89 10.89 0 002.48 1.19 22.91 22.91 0 005.55 1.49 28.58 28.58 0 006.06.06c11.76-1.28 20.81-9.67 29.69-16.65 3.8-3 7.59-6 11.34-9a142.43 142.43 0 0011.13-10 52 52 0 007.19-9.24 31.25 31.25 0 003.62-9.31 11.61 11.61 0 00-.41-6.79 15.2 15.2 0 00.69-11.66 14.53 14.53 0 00-13.75-9.46 15 15 0 00-4.87.82zM68.65 1524c-2.37 1.81-4.77 3.59-7.16 5.37-4 3-8 6-12.23 8.65v-.32q.43-.95.93-1.86a47.58 47.58 0 014.47-5.14 46.69 46.69 0 015.28-3.69 58.85 58.85 0 018.73-3z"></path>
+    <path class="cls-8" d="M74.87 1491.38l-2.51 1.32a10.78 10.78 0 00-3.59 4.22l-.2.32a36 36 0 01-4.19 4.7c-2.63 2.3-5.33 4.53-8 6.82s-5.34 4.73-8 7c-2.11 1.83-3.67 3.68-4.21 6.52a10.31 10.31 0 008.2 12 10.81 10.81 0 007.82-1.68 84.41 84.41 0 009.82-7.09c2.24-1.84 4.48-3.67 6.69-5.54s4.56-4.08 6.67-6.29 3.54-4.88 5.13-7.38 1.31-6 .4-8.49a10.95 10.95 0 00-14-6.51z"></path>
+    <path class="cls-8" d="M81.72 1399.16a26.15 26.15 0 00-9.65 2.58c-1.93.93-3.8 2-5.69 3s-3.57 2.9-5.23 4.46a22.28 22.28 0 00-3.9 5.61l-.45 1.34a15.46 15.46 0 00-1.48 8 39.35 39.35 0 002.08 10.22c3.19 10.23 7.68 20 12 29.79a198.57 198.57 0 009.47 19c1.24 2.15 2.76 4.2 4.15 6.27q2.74 4.1 5.51 8.15c4.52 6.71 14.14 8.24 20.68 3.66a14.77 14.77 0 006.25-12.21 15.65 15.65 0 003.36-1.77c3-2.15 5.93-6 6.34-9.82a62.24 62.24 0 00.15-12.28 75.52 75.52 0 00-2-10.94c-1.58-6.4-3.42-12.65-5.6-18.88a97.57 97.57 0 00-10.6-22c-5.2-7.8-14.22-14.25-23.87-14.25-.49 0-1 0-1.47.05z"></path>
+    <path class="cls-8" d="M139.63 1409.37a28.86 28.86 0 00-5.77 2.77 17.17 17.17 0 00-2.86 2.16 58.92 58.92 0 00-6.93 6.75 96 96 0 00-6.53 9.44c-1.27 2-2.42 4-3.6 6.06a59.84 59.84 0 00-6.34 17.2c-.58 2.57-.76 5.27-1.1 7.89s-.58 5.36-.83 8c-.06.65-.13 1.3-.2 2a10.9 10.9 0 00-1 .6 12.13 12.13 0 00-2.94 16.71c1.07 1.57 2.05 3.29 3.22 4.79a12.92 12.92 0 002.37 2.52 17.38 17.38 0 001.3 6.25c1.05 2.37 2.53 5.15 4.71 6.76a16.06 16.06 0 007 3.37 14.65 14.65 0 007.65-.63 14.48 14.48 0 002-.93 26 26 0 006.89-3.76 79.26 79.26 0 008.69-8.5c1.67-1.83 3.27-3.73 4.87-5.61a126 126 0 0011.77-16.13 75 75 0 008.87-23.13 70.53 70.53 0 001.13-13.84 36.5 36.5 0 00-.55-5.8 67.3 67.3 0 00-2.34-9.81c-2.57-8.26-10.46-15.24-19.24-15.93-1.53-.12-2.74-.2-3.85-.2a22 22 0 00-6.36 1z"></path>
+    <path class="cls-8" d="M129.41 1486.85a12.7 12.7 0 00-8.89 4.57 13.08 13.08 0 001.51 18.41 12.08 12.08 0 003.8 2.21 18.64 18.64 0 00.76 7.59 28.91 28.91 0 001.86 5 42.72 42.72 0 005.66 9.4c3.33 4 6.92 7.81 10.48 11.64a81.58 81.58 0 009.26 8.46 75.38 75.38 0 009.22 6 47.21 47.21 0 009.85 3.86c2.66.82 5.57.69 8.31.77a34.56 34.56 0 005.25-1 22.36 22.36 0 006-3.38 14.64 14.64 0 004.82-5.68 23.92 23.92 0 001.53-4.38 28.43 28.43 0 00.32-4.79 66.67 66.67 0 00-1.48-6.55 56.85 56.85 0 00-3.21-7.4 83 83 0 00-10.07-16.22 84.81 84.81 0 00-28-23.25 54.45 54.45 0 00-15.29-5 37.37 37.37 0 00-6.19-.43c-1.86 0-3.73.07-5.56.09zm243.67 81.25c-6.9.21-13.71 3.42-19.39 7.19a53.44 53.44 0 00-6.72 5.86c-2.1 2-4 4.13-6 6.31a48.39 48.39 0 00-9.1 15.5 49.94 49.94 0 00-2.15 8 43.29 43.29 0 00-.35 9.52 73.51 73.51 0 001.58 9.78 97.2 97.2 0 003.66 14.58 26.56 26.56 0 009.62 12.7 11.36 11.36 0 007.88 2.53 11 11 0 004.31-1.3c2.86.92 5.62 0 8.38-.65a12.63 12.63 0 003.94-2.21 19.23 19.23 0 005.44-6.48 56.22 56.22 0 002.6-5.56c1.61-3.78 3.21-7.58 4.82-11.37 1.75-4.1 3.46-8.21 5.16-12.31a112.58 112.58 0 006.59-20.55 58.21 58.21 0 00.8-10.54 11.89 11.89 0 00-.43-3.14 22.74 22.74 0 00-3-8.25 19.94 19.94 0 00-17.07-9.66zm-6.57 22.61l.33.32-.32-.35zm8.78 4.28l-1.33-.07a12 12 0 011.33.07z"></path>
+    <path class="cls-8" d="M397.52 1618.33a63.23 63.23 0 00-8 1.75 47.35 47.35 0 00-7.55 2.75 61.46 61.46 0 00-12.92 8.06c-5.31 4.18-9.89 9.26-15.51 13l-1.31.56c-5.38 2.24-8.45 8.07-6.38 13.75a10.47 10.47 0 001.94 3.24l-.8.21.82-.18c-1.85.42-3.7.86-5.53 1.38a17 17 0 00-6.69 4.64 15.43 15.43 0 00-3.34 7.25 14.83 14.83 0 005 14.13 19.77 19.77 0 008.51 4.18 45.15 45.15 0 007.72.71c1.94.08 3.89.12 5.83 0 4.94-.19 9.86-.46 14.79-.91a132.26 132.26 0 0016.74-2.9 139.6 139.6 0 0017.23-5.11 96.83 96.83 0 0016.9-8.26 44.28 44.28 0 007.13-5.83 34 34 0 006.44-8.69 48.08 48.08 0 001.78-5.1 16.43 16.43 0 00.59-5.41 27.41 27.41 0 00-1.85-9 57.24 57.24 0 00-3.74-7.47 31.72 31.72 0 00-6-8.1 40.07 40.07 0 00-6.37-4.51 17.54 17.54 0 00-3-1.25c-2-.73-4.06-1.32-6.09-1.95a34.52 34.52 0 00-10.28-1.44 49 49 0 00-6.07.39z"></path>
+    <path class="cls-8" d="M342.46 1643.79a15.41 15.41 0 00-8.7 27.1c5.74 4.81 11.4 9.71 17.09 14.58a11.16 11.16 0 00-4.64 2.14l-.33.26a12.37 12.37 0 00-10.48 9.8c-3.11 16.17-6.58 32.3-5.5 48.9.67 10.49 3.67 20.68 7.11 30.56a48.3 48.3 0 004.06 8.22 19.35 19.35 0 009.8 8.19 20.4 20.4 0 0010.41 1.37 20.16 20.16 0 0012.36-7.18c3.86-4.38 5.31-10.31 6-15.93.35-3.11.55-6.24.64-9.37.75.54 1.51 1.06 2.28 1.57a57.93 57.93 0 0011.47 6 42.83 42.83 0 0015.8 3.14c8.42-.11 17-3.88 21.81-11a30.44 30.44 0 003.41-6.25 45.65 45.65 0 002-6.89 44.84 44.84 0 00.49-7.42 33.73 33.73 0 00-.75-7.29c-1.56-9-5.37-17.23-10.36-24.87a107.67 107.67 0 00-16.13-19.31 48.68 48.68 0 00-8.39-5.78c-1.17-.69-2.33-1.38-3.51-2-2.44-1.39-4.91-2.75-7.42-4l-.48-.24c-1.3-1.15-2.61-2.28-3.93-3.41-9.19-7.9-18.57-15.6-27.93-23.3-1.62-1.33-3.25-2.64-4.91-3.93a16 16 0 00-10-3.65h-1.26zm17.76 125.62zm1.83.74z"></path>
+    <path class="cls-8" d="M302 1620.05c-7.28.14-14.78-.12-22 .85a69.79 69.79 0 00-27.57 10.1 30.39 30.39 0 00-9 8.39 26.5 26.5 0 00-4.29 8.94 19.34 19.34 0 00-.92 3.82 61.31 61.31 0 00-.5 7.88c0 8.36 4.07 16.73 11.7 20.68a32.53 32.53 0 0012.91 3.43 68.61 68.61 0 0016.51-.74 164.44 164.44 0 0029.24-8.25c5.56-2.06 11.13-4.11 16.64-6.29 1-.39 2-.84 3-1.28 1.56-.78 3.1-1.59 4.64-2.41a15.65 15.65 0 003.31-3.12 14.38 14.38 0 0019.57-18 29.24 29.24 0 00-7.12-11.53 35.8 35.8 0 00-9.95-6.51 65.44 65.44 0 00-17.16-5c-2.6-.42-5.34-.43-7.95-.61-3.1-.2-6.26-.35-9.38-.35h-1.72z"></path>
+    <path class="cls-8" d="M308.58 1653.05c-4.86 9.21-9.63 18.49-14.57 27.68-1.35 2.5-2.74 5-4 7.56a40.75 40.75 0 00-1.67 4.56c-.9 2.6-1.84 5.21-2.49 7.89a44.2 44.2 0 00-1 7.06c-.18 2.36-.32 4.73-.37 7.09a29 29 0 002.13 10.79c2 5.37 6.66 9.24 11.05 12.67 2.62 2 5.76 4 9.11 4.57a21.76 21.76 0 0012.15-1.26c7.75-3.17 12.73-10.64 15.87-18.07.59-1.4 1.12-2.84 1.59-4.29a11.75 11.75 0 002.65-2.57 24.35 24.35 0 003.55-6c.84-2.29 1.5-4.6 2.11-7a58.84 58.84 0 001.33-10.75c.17-2.55.24-5.11.33-7.66a31.27 31.27 0 00-.28-6.27 30.77 30.77 0 00-.86-4.25 15 15 0 00-8.35-15.1 14.65 14.65 0 00-4.68-1.33 12.8 12.8 0 00-7.07-11.22 12.05 12.05 0 00-5.23-1.2 12.9 12.9 0 00-11.28 7zm-1.5 63.3h-.1.1zm-42.19-656.82a93.08 93.08 0 00-12.26 2.59 35.91 35.91 0 00-7.7 3 58 58 0 00-5.16 2.77 32 32 0 00-5.73 4.83 26.84 26.84 0 00-5.84 8.67q-1 2.69-1.73 5.45c-.08.63-.15 1.25-.22 1.88a80.78 80.78 0 00-.25 6.41 64.68 64.68 0 00.5 9.12 53.74 53.74 0 005.27 17.14 64.36 64.36 0 005.73 9.87c4.54 6 9.53 12 15.44 16.74 6.13 4.88 13.44 7.66 20.82 10a76.5 76.5 0 0017.87 3.35 118.27 118.27 0 0020.87-.09c3.56-.37 7.11-1.23 10.62-1.9l4.07-.89a15.53 15.53 0 004.71-26.47 16.85 16.85 0 00-4.08-2.52 14.62 14.62 0 004.79-8.54 56.66 56.66 0 00.39-8.94 29 29 0 00-.58-3.83 43.09 43.09 0 00-2-7.53 65.89 65.89 0 00-5.06-9.85 64.21 64.21 0 00-4.93-7.1 69 69 0 00-14.14-13.7 74.37 74.37 0 00-9.35-5.77 56.72 56.72 0 00-10.82-3.8 44.1 44.1 0 00-11.93-1.49 79.37 79.37 0 00-9.3.6zm-5 32.2l-.36 1.11q.15-.55.36-1.11zm15.1 1a44.15 44.15 0 015.59 1.09 46 46 0 014.72 2.34 61.36 61.36 0 017.67 6.56 69 69 0 016.47 9.33 49.13 49.13 0 012.68 7.3 15.28 15.28 0 006.23 11.11 81.15 81.15 0 01-10.69.21 78.39 78.39 0 01-14.68-2.51 66.42 66.42 0 01-8.36-3.71 38.85 38.85 0 01-4.08-3.52 75.72 75.72 0 01-8.12-11.22 53.3 53.3 0 01-2.6-7.09 50.1 50.1 0 01-.49-7 48.39 48.39 0 016-1.91 64.91 64.91 0 019.64-1zm-15.2.71l-.24.38.24-.38zm0 1l-.48.44.48-.43z"></path>
+    <path class="cls-8" d="M266.42 1090.05a9.52 9.52 0 00-3.48 1.57 32.88 32.88 0 00-3.08 2.7 29.8 29.8 0 00-3 4.84 19.05 19.05 0 00-1.47 8.45 29.83 29.83 0 003 11.79c2.19 4.58 5.21 8.15 8.62 11.86l-2-2.15c2 2.19 3.73 4.36 6.42 5.7a16.58 16.58 0 006.29 1.79q1.48.56 3.06 1a38.78 38.78 0 008.61 1 11.92 11.92 0 005.9-2.13 11.93 11.93 0 002-17.8 18.68 18.68 0 00-.37-2.5 30 30 0 00-1.69-5.61 39.32 39.32 0 00-3.67-6.47 38 38 0 00-3.66-4.34c-1.45-1.58-2.93-3.1-4.5-4.55a20.55 20.55 0 00-10.25-5.57 12.15 12.15 0 00-2.25-.2 16.43 16.43 0 00-4.52.67zm28.01-7.54a6.92 6.92 0 00-4.67 2.39c-2.32 2.74-2.18 7.4.79 9.66a38.84 38.84 0 014.82 4.5 80.24 80.24 0 017.52 10.2 26.28 26.28 0 011.16 2.61c-.35.43-.71.83-1.09 1.23a5.77 5.77 0 108.8 7.47 20 20 0 003.3-4.69c1.34-2.59.67-5.71-.18-8.32a38.22 38.22 0 00-3-6.19c-1-1.8-2.21-3.48-3.34-5.19-1-1.5-1.93-3-3-4.52l-2-2.83a39.51 39.51 0 00-4.15-4.71 6.36 6.36 0 00-4.43-1.63h-.55zm1.55 17.22l.44.48-.44-.48zm8 12.39l-.14.22.14-.22z"></path>
+    <path class="cls-8" d="M350.29 1030.86q-2.6.53-5.18 1.11a20.36 20.36 0 00-6.18 3.78 16.5 16.5 0 00-3.44 3.39 44.25 44.25 0 00-3.31 5.24 76.22 76.22 0 00-5.88 13.1c-1.92 5.44-3.86 10.85-5.49 16.38-1.43 4.88-2.84 9.72-4 14.67-1.3 5.37-2.46 10.76-3.64 16.16-1.45 6.72 3.43 13.48 10 14.74a12.32 12.32 0 007.51-.94 12.72 12.72 0 001.94 2.16c6.28 5.61 15.54 3.8 22.59 1 2-.83 4.21-2.21 6.21-3.27a56.29 56.29 0 005.81-3.62 49.67 49.67 0 0015.43-17.83 53 53 0 003.49-9.78 43.68 43.68 0 001.32-10.45 59.64 59.64 0 00-3.48-22.05 39.23 39.23 0 00-11.38-17A26.74 26.74 0 00364 1033a40 40 0 00-6.74-1.89 25.88 25.88 0 00-4.41-.32h-2.58z"></path>
+    <path class="cls-8" d="M409 1066.35a21 21 0 00-4.44 3.41 45.05 45.05 0 00-4.87 1.37 44.27 44.27 0 00-9.31 4.84 113.62 113.62 0 00-12.19 9.18c-3.48 1-7 1.87-10.53 2.75s-6.87 1.71-10.31 2.54l-1.15.21-3.95.87a15.09 15.09 0 00-9.85 15.4 15.15 15.15 0 004.08 9.06 16.72 16.72 0 002.46 13.21c2.29 3.44 6.52 6.54 10.77 6.83a11.24 11.24 0 005 .11 23.48 23.48 0 006.56-1.91c3.11-1.45 6.28-3.12 9.27-4.79 4.42-2.48 8.76-5 13.07-7.69q2-1.2 3.87-2.44c5.5-1.82 10.76-4.64 15.91-7.28a39.89 39.89 0 006.9-4 28.8 28.8 0 007-8.47 21.78 21.78 0 003-10.65v-.89c.5-.77 1-1.55 1.49-2.33a15.42 15.42 0 00-11-21.81l-4.13-.22a15.33 15.33 0 00-7.58 2.73z"></path>
+    <path class="cls-8" d="M338.05 1078.71a13.31 13.31 0 00-7.14 6.49c-.26.46-.51.92-.76 1.39a70.33 70.33 0 01-10.47 6.58c-3.79 1.95-7.6 3.84-11.55 5.5q-7.42 3.13-14.87 6.27c-6 2.5-9.38 9-7.07 15.24a12 12 0 0015.23 7.08c6.75-2.29 13.46-4.68 20.1-7.27a113.4 113.4 0 0010.41-4.74 90.82 90.82 0 0012.23-7.11 42.32 42.32 0 005.83-5.28c.9-1.34 1.8-2.7 2.67-4.07.44-.84.89-1.67 1.36-2.51 3.35-6.13 0-14.19-6-17.1a12.88 12.88 0 00-9.95-.47zm-6.72 6.25a8.71 8.71 0 01-.78 1.19l.78-1.19zm-1.76 2.27l-.17.16.17-.16z"></path>
+    <path class="cls-8" d="M260.43 1093.18a13 13 0 00-3.17 18 60.42 60.42 0 006.55 7.64c-.05.26-.11.53-.17.8-.53 1.23-1.13 2.42-1.75 3.63-2.66 5.18-.13 11.78 5 14.25a10.76 10.76 0 0013.64-4 67.3 67.3 0 003.47 2.2c3.72 2.2 8.07 3.56 12.42 2.89l4-.88a87.17 87.17 0 004.28-2.25c3.55-2 5.22-6.06 6.27-9.72 1.42-4.9.36-10.13-1.45-14.77-1.92-4.91-5.11-8.47-8.72-12.17a14.85 14.85 0 00-6.89-3.3 15.07 15.07 0 00-11.37 2.44c-.34.24-.67.5-1 .77-1.44-1.33-2.86-2.67-4.34-4a13.46 13.46 0 00-7-3.7 12.79 12.79 0 00-2.38-.23 12.94 12.94 0 00-7.43 2.34zm56.18 55.43a42.93 42.93 0 00-9.69 9.38 60.13 60.13 0 00-7.22 14.7 107.62 107.62 0 00-5.36 24 105.34 105.34 0 00.21 27.31 89.65 89.65 0 003.62 15 20.75 20.75 0 007.25 10 20.37 20.37 0 008.07 3.78 23.12 23.12 0 0010.81-.46c7.49-2 13.5-7.74 17.92-13.92a75.74 75.74 0 0013.64-40.27 49.48 49.48 0 00.63-11.77 27.22 27.22 0 00-.75-4.76c-.18-2.06-.4-4.12-.61-6.19-.27-2.69-.74-5.36-1.26-8-.36-1.83-.78-3.64-1.19-5.45a18.56 18.56 0 00-2.41-5.54 14.23 14.23 0 00-6.19-5.63 19.13 19.13 0 00-8.89-1.69 10.93 10.93 0 00-3.62.69 12.42 12.42 0 00-8.35-3.25 11 11 0 00-6.61 2.14z"></path>
+    <path class="cls-8" d="M387.62 1118.61c-5.38.35-10.93.48-16.21 1.61-8.11 1.74-17.56 3.79-23.31 10.33a20.23 20.23 0 00-3.45 5.63 12.37 12.37 0 00-3.82.72 12.93 12.93 0 00-7.17 6.52 13.32 13.32 0 00-.49 10c3.26 10.84 6.66 21.55 11.23 31.92 2.55 5.78 5.11 11.54 7.75 17.27a73.68 73.68 0 006.57 11.94c.94 1.33 2.06 2.53 3.11 3.77 1.35 1.57 2.78 3.07 4.2 4.58a36.3 36.3 0 006.88 5.25c6.82 4.43 15.84 7.15 23.84 4.5a25.31 25.31 0 0010.78-7 33.32 33.32 0 007.09-13.11 43.05 43.05 0 001.7-16.37 47.62 47.62 0 005.94.31 34 34 0 007.85-1.14 38.1 38.1 0 0010.77-4.53c4.78-2.83 8.17-7.78 10.45-12.71 1.83-4 2.91-8.34 4.16-12.54a25.66 25.66 0 00-.23-15.32 32.13 32.13 0 00-6.46-11.07 53.87 53.87 0 00-5.53-5.57 60.46 60.46 0 00-7.84-5.19c-3.68-2.24-7.79-3.52-11.87-4.85-3.42-1.11-6.88-2.07-10.37-2.92a84.86 84.86 0 00-19.67-2.26q-3 0-5.9.2zm-249.22 799.5c-.61.22-1.22.46-1.82.71a17.57 17.57 0 00-16 5.86 26.59 26.59 0 00-3.07 4.44c-.61.42-1.2.86-1.79 1.31-.28.22-.57.45-.84.69a75.68 75.68 0 00-9.56 5.11 124.89 124.89 0 00-10.48 7.71c-1.58 1.27-3.25 2.44-4.94 3.55s-3.51 2.28-5.28 3.39c-9.89-4.24-23.2-1.28-28.13 9a17.38 17.38 0 00.18 15 10.74 10.74 0 00.09 7 9.31 9.31 0 00.46 1.07 12.52 12.52 0 00.68 6 13.15 13.15 0 003.85 5.53 13.39 13.39 0 006.07 2.9 12.8 12.8 0 007.47-.46c3-1.11 5.24-3.24 7.46-5.48a63.54 63.54 0 006.34-7.6q1.17-.37 2.31-.81a65.49 65.49 0 006.61-3.41c2.07-1.11 4-2.37 6-3.66 2.93-1.94 5.82-3.89 8.62-6 2.42-1.84 4.7-3.83 7.18-5.59l.8.13a17.27 17.27 0 005.36.15l.45.09a17.86 17.86 0 0013.46-2.9 18.32 18.32 0 007.25-11.22c0-.13.06-.27.1-.41l.49-.3c1.13-.67 2.23-1.43 3.34-2.14l1.11-.72a17.68 17.68 0 006-7 15.93 15.93 0 00-14.46-22.83 15.72 15.72 0 00-5.4.95zm-62.68 35.7l.77.25a7.66 7.66 0 01-.77-.25zm600.9-1228.16c-4.85-.06-9.24 2.1-12.86 5.19a38.62 38.62 0 00-4.66 4.65 53.51 53.51 0 00-4.48 6.86 54.91 54.91 0 00-4.82 12.08 76.83 76.83 0 00-2.36 10.08 82.8 82.8 0 00-.13 27.16 90.76 90.76 0 007.78 24.39c2.42 5.11 5.27 10.05 8 15a47 47 0 007.69 10 23 23 0 0011.77 6.74 21.13 21.13 0 0010.16-.89 17.2 17.2 0 007.21-5 24.4 24.4 0 003.13-4.58 36.28 36.28 0 002.19-7.18 35.41 35.41 0 00.25-7.32 11.25 11.25 0 002.57-1.29 21.34 21.34 0 006.93-8.41 30.22 30.22 0 001.83-5.59 36.66 36.66 0 001-5.28 65.81 65.81 0 00.15-14 88.83 88.83 0 00-5.78-23.86c-3.16-8.42-8-16.34-13.13-23.69a59.85 59.85 0 00-8.33-9.59 38.39 38.39 0 00-5.41-3.76l-3.39-1.11a11.36 11.36 0 00-4-.73c-.43 0-.85 0-1.28.06zm2.68 31.79l1.22 1.5c-.52-.2-1.06-.38-1.61-.54.13-.33.25-.64.39-1z"></path>
+    <path class="cls-8" d="M637.25 804.22a87.3 87.3 0 00-13.89 2.38c-10.32 2.4-19.11 8.28-27.8 14-2 1.36-4.07 2.76-6 4.29a49.52 49.52 0 00-5.27 4.87 26.56 26.56 0 00-6.07 12c-2 8.32.23 18.38 6.9 24.09a32.39 32.39 0 009.27 5.44A92.33 92.33 0 00610.3 876a88.76 88.76 0 0014 1.27 90.18 90.18 0 0011-.23 84.52 84.52 0 0010.37-1.68A90 90 0 00661 871a89 89 0 0012.25-6.29 33.84 33.84 0 006.42-5.47 43.1 43.1 0 004.49-6.52 32.16 32.16 0 002.6-7.33c.41-4.1.69-7.45-.71-11.45a26.08 26.08 0 00-4.7-8.18c.58-2.77.74-6.11-.35-8.65a21.74 21.74 0 00-2.45-4.43 17.45 17.45 0 00-6.68-4.93 37 37 0 00-10.43-2.75 116.61 116.61 0 00-12.39-1c-1.56-.07-3.13-.11-4.69-.11q-3.55 0-7.11.25z"></path>
+    <path class="cls-8" d="M681.27 832.91c-2.83 1-6.15 3.53-7.18 6.52-2.62 7.56-5.33 15-6.87 22.9-1.68 8.56-1.82 17.55-1.56 26.24a125.16 125.16 0 003 22 102.75 102.75 0 003 11.73 45.8 45.8 0 003.12 6.37 18 18 0 003.26 3.87 14.13 14.13 0 004.08 2.93 22.4 22.4 0 006.63 1.82l4 .21a38.22 38.22 0 005.35-1.29 25 25 0 006.13-3.49 33.49 33.49 0 005.15-5 40.17 40.17 0 004-6 48.78 48.78 0 002.34-4.62c.55-1.25 1.05-2.53 1.51-3.83a35.59 35.59 0 003.62-3.45 26.66 26.66 0 003.92-6.56 38.57 38.57 0 002.22-7.16 30.46 30.46 0 00.5-4.66 75.45 75.45 0 00.18-8.09 54.67 54.67 0 00-3.3-15.2c-.63-1.82-1.41-3.56-2.2-5.3-.51-1-1-2-1.46-3l-2.7-5.17c-.69-.91-1.49-1.92-2.37-2.9-.17-.59-.34-1.18-.52-1.77a28.34 28.34 0 00-1.41-3.69c-1.26-2.73-3.16-6.2-5.66-8.06a22.57 22.57 0 00-5.51-3.4 15.9 15.9 0 00-8.23-1.52 17.5 17.5 0 00-2.17.34 9 9 0 00-.81-.43 12.92 12.92 0 00-5.58-1.26 12.63 12.63 0 00-4.42.78z"></path>
+    <path class="cls-8" d="M718.85 836.79a18.57 18.57 0 00-11.06 9.4 19.18 19.18 0 00-1.45 4.23 13.24 13.24 0 00-1.77 2.78c-1.49 3.1-2.05 7.54-.52 10.75 2.89 6.16 5.73 12.36 8.78 18.44a205.34 205.34 0 0011.06 19.69A105.28 105.28 0 00739 920.23a68.31 68.31 0 0018.15 12.34 81.54 81.54 0 0010.43 3.95c1.84.58 3.69 1.09 5.55 1.6 2.45.67 5 .55 7.53.68a36.56 36.56 0 005.2-1 21.7 21.7 0 006-2.67c4.22-2.58 6.8-6.44 9.28-10.59a29.1 29.1 0 002.46-6.81 34.61 34.61 0 00.79-4.75 46.79 46.79 0 00-.3-12.51 76 76 0 00-6.66-20.77 89.13 89.13 0 00-11.59-18.7 79.39 79.39 0 00-7.49-7.85 67.68 67.68 0 00-10.68-7.42 56.28 56.28 0 00-9.34-4.28 107.15 107.15 0 00-13-4c-2.46-.58-5-.95-7.48-1.34a60.25 60.25 0 00-9.08-.77 33.42 33.42 0 00-9.91 1.38zm18 9.6l.61.66c-.2-.23-.41-.45-.61-.67zm1.57 1.72c.12.13.24.27.37.4-.13-.13-.25-.27-.37-.4zm32.91 58.25a13.34 13.34 0 002.15-1.42q.19 1.44.3 2.88l-1.21-.32c-.63-.23-1.25-.47-1.87-.72l.63-.42zm6.65 2.13l-.35.2.37-.2zm1.51.16c-.3.09-.61.16-.91.22l1-.21zm-6.44 3.2l-.38.34c.12-.12.25-.23.38-.34z"></path>
+    <path class="cls-8" d="M772 761.6a60.48 60.48 0 00-14.34 4.61c-15.45 7.24-28.76 18.7-39.93 31.48a152.93 152.93 0 00-13.81 17.72 33.42 33.42 0 00-3.77 9.33c-1.1 4-1.51 8.65.07 12.53 2.38 5.85 6.84 10.65 13.33 11.88a22 22 0 007.46.28 25.42 25.42 0 002.79-.59l2.23.7a50.1 50.1 0 0013.07 1.77 52.49 52.49 0 0014.23-1.41c15.74-3.68 28.68-14.81 37.95-27.67A87.89 87.89 0 00802.12 802a100 100 0 003.79-11.39 33.44 33.44 0 00.51-7 22.24 22.24 0 00-1.17-7.37 19.85 19.85 0 00-7.49-9.82 27.52 27.52 0 00-6-3.27 39.26 39.26 0 00-6.93-1.95 27.63 27.63 0 00-5.07-.44 39.87 39.87 0 00-7.8.82z"></path>
+    <path class="cls-9" d="M113.93 1471.94a13.51 13.51 0 00-6.68 2.4 17.64 17.64 0 00-3.32 2.88 20.53 20.53 0 00-4.62 8.27 11.44 11.44 0 00-1.25 4c-.46 3-.11 4.17.55 7.07a13.53 13.53 0 004.39 6.86 15.1 15.1 0 002 1.39l.31.26a20.79 20.79 0 008.62 4.13A16 16 0 00127 1506a13.75 13.75 0 003.3-3.2 18.51 18.51 0 003.62-7.55 19.52 19.52 0 00.46-5.52c-.19-2.24-1.35-6.29-2.88-8.06-.61-.71-1.23-1.4-1.86-2.09l-.11-.17c-1.45-2.24-4.13-5-6.7-6a19.27 19.27 0 00-6.94-1.66 10.55 10.55 0 00-2 .19zm-3.31 17.89a1.74 1.74 0 01.1.19c0-.07-.07-.13-.1-.2zm225.77-377.77c-3.89 1-7 3.46-9.88 6.12a31.19 31.19 0 00-4.21 3.68c-2.85 2.84-4 7.68-3.71 11.55a38.09 38.09 0 004.17 12.27 9 9 0 003.15 3.23l3.29 2.13a23.21 23.21 0 004.5 1.4 20.07 20.07 0 0010.24-1c4.92-1.73 8.33-5.38 10.83-9.81.19-.34.37-.68.53-1s.53-.66.77-1c1.61-2.32 3.43-5 3.8-7.93.36-2.73.48-5.87-.65-8.5a18.74 18.74 0 00-3.08-5.24 13.92 13.92 0 00-2.84-3 16.62 16.62 0 00-7.12-3.36 19.25 19.25 0 00-3.66-.37 24.15 24.15 0 00-6.13.91zm9.37 535.03a18.71 18.71 0 00-3.57 7.38 15.82 15.82 0 00-.5 5.47c.09.58.18 1.16.29 1.73a16.16 16.16 0 00.8 5.71 17.18 17.18 0 005 7.16 14.77 14.77 0 008.53 3.78 23.84 23.84 0 004.91.08 42.3 42.3 0 005-1 25.48 25.48 0 006.16-2.8c2.81-1.59 4.63-4.44 6.22-7.1a20.38 20.38 0 001.57-4.65c.85-2.7.15-5.59-.5-8.22-.82-3.24-3.05-5.65-5.33-7.95a30.46 30.46 0 00-5.57-3.83 19.54 19.54 0 00-6.22-2.27 14.44 14.44 0 00-2.86-.27 18.06 18.06 0 00-13.88 6.82zM713.1 809.85a19.7 19.7 0 00-6.07 1.69 27.1 27.1 0 00-7.87 5.48 21.28 21.28 0 00-4.12 5.86c-.22.36-.44.72-.65 1.08a17 17 0 00-.68 1.66 37.58 37.58 0 00-2 5.76c-.14 1.62-.21 3.24-.23 4.86.05.25.11.5.16.74a15.29 15.29 0 002.72 7.56 14.21 14.21 0 004.33 4.73 12.57 12.57 0 004.08 2.47c3.49 1.42 5 1.55 8.79 1.6a26.35 26.35 0 006.38-1.11 88.92 88.92 0 004.34-2.24 41.78 41.78 0 004.3-3.79 20.82 20.82 0 003.67-5.47 13.1 13.1 0 00.84-1.84 21.75 21.75 0 003.19-7.12c.71-2.62.89-7.06-.36-9.63-.65-1.32-1.32-2.63-2-3.92a38.65 38.65 0 00-3.46-3.77c-3.28-3.08-8.39-4.75-13-4.75a18.12 18.12 0 00-2.36.15z"></path>
+    <path class="cls-10" d="M71.59 2018.12a68.87 68.87 0 00-9 1.54 21.31 21.31 0 00-4.65-.24c-7.89.49-14.83 3.81-21.54 7.73a57 57 0 00-7.71 5.57c-3.3 2.73-5.72 5.76-6.63 10-2 1.41-4 2.84-5.91 4.35a44.47 44.47 0 00-6.5 6.22 46.68 46.68 0 00-3.33 4.91A16.74 16.74 0 005 2072.68c2 5.44 7.17 9.33 12.72 10.56a38 38 0 0010.21.54 62.81 62.81 0 0010.27-1.93 46.78 46.78 0 009.26-3.28 56.42 56.42 0 009-5.17 54.13 54.13 0 007.85-7.13 86.69 86.69 0 006.46-8.43c3-4 5.8-8.14 7.31-12.75a14.1 14.1 0 008.69-14.09 14.24 14.24 0 00-13.87-13 11.5 11.5 0 00-1.31.07z"></path>
+    <path class="cls-10" d="M52.74 2001.92a14.18 14.18 0 00-11.6 8 97.41 97.41 0 00-4.88 10.63l-.15.24a92.41 92.41 0 01-6.66 9 6.44 6.44 0 00-1.05 1.18 11.79 11.79 0 00-2.63 5.5 11.94 11.94 0 009.5 13.95c2.91.56 6.73 0 9.07-1.95a64.3 64.3 0 006-5.81 14.9 14.9 0 002.78-.7 13.14 13.14 0 003.8-2.15c-.29.51-.59 1-.9 1.52-1.29 2.12.07 5.07 2.15 6.07 2.39 1.15 4.78 0 6.06-2.14 1-1.72 2-3.44 2.94-5.24.74-1.5 1.32-3.08 2-4.61a40.39 40.39 0 001.73-5.22 18.17 18.17 0 000-3 7.76 7.76 0 00-1.61-3.8c-.59-.67-1.2-1.33-1.82-2-.12-.12-.25-.23-.38-.34a13.77 13.77 0 00.92-6.21 14.14 14.14 0 00-14.12-13h-1.14zm6.95 29.61z"></path>
+    <path class="cls-3" d="M99.4 2053.87c-2.09 2-4.26 3.93-6.26 6-1.72 1.8-3.33 3.7-4.94 5.6-.82 1-1.62 1.95-2.41 2.94a30.63 30.63 0 00-2.57 3.81 28.78 28.78 0 00-3.62 11.95 4.23 4.23 0 001.29 3.09 4.37 4.37 0 006.16 0 4.75 4.75 0 001.28-3.09v-.39a31.58 31.58 0 011.5-6.3 31.55 31.55 0 013.2-5.29c1.54-2 3.1-4 4.82-5.85 1-1.12 2.1-2.22 3.2-3.28q1.93-1.82 3.85-3.65a4 4 0 000-5.55 3.84 3.84 0 00-2.74-1.12 4.05 4.05 0 00-2.8 1.12zm-32.96-20.43c-4.44 1.66-8.91 3.29-13.34 5q-3.1 1.21-6.09 2.68a36.27 36.27 0 00-4.41 2.51 23.06 23.06 0 00-3.29 2.7 20.29 20.29 0 00-1.8 2.24 4.51 4.51 0 00-.59 2.21 4.34 4.34 0 001.28 3.08 4.39 4.39 0 003.09 1.29 4.2 4.2 0 003.09-1.29 22.45 22.45 0 013-3 47.66 47.66 0 017.89-4.27c4.45-1.79 8.93-3.47 13.43-5.14a4.5 4.5 0 002.49-1.92 4.17 4.17 0 00-1.5-5.71 4.48 4.48 0 00-2.17-.59 3.08 3.08 0 00-1 .17zm-29.22-77.15a3.65 3.65 0 001.29 4.92c3.48 2.21 7 4.37 10.46 6.58 3.05 1.94 5.94 4.1 8.85 6.23a66.15 66.15 0 0110.49 10.13c.91 1.21 1.75 2.47 2.57 3.74a3.28 3.28 0 005.66-3.31 62.64 62.64 0 00-6.1-8 71 71 0 00-7.86-7.35c-2.14-1.75-4.35-3.43-6.6-5-4.49-3.21-9-6.37-13.83-9.17a3.58 3.58 0 00-1.78-.48 3.65 3.65 0 00-3.15 1.78zM68 1983.73l.16.22-.16-.22zm61.58-60.22a3 3 0 00-1.42 1.84c-1 6.45-1.93 13-4.37 19.13-.76 1.77-1.57 3.53-2.47 5.24a36.6 36.6 0 01-3.25 4.94c-1.65 2.06-3.48 4-5.21 6a2.57 2.57 0 000 3.59 2.54 2.54 0 003.59 0c.86-1 1.74-2 2.62-3l1.89-2.09c1.07-1.2 2-2.49 3-3.79a50.68 50.68 0 004.25-7.44 54 54 0 003.2-8.25c.59-2 1-4 1.48-6 .48-2.22.93-4.45 1.25-6.7a3.44 3.44 0 00-.31-2.38 3.19 3.19 0 00-1.85-1.43 3.2 3.2 0 00-2.38.32zm-5.91 21.25l-.09.22.09-.22zm20.21 84.73a3.14 3.14 0 000 6.28 44.07 44.07 0 015.63.32 38.91 38.91 0 018.61 2.27 32.41 32.41 0 015.95 3.69 65.66 65.66 0 0110.83 10.83 49.07 49.07 0 014.86 8c.71 1.47 1.35 3 2 4.49-.07-.16-.14-.32-.2-.48.38 1.1.74 2.18 1 3.31a3.59 3.59 0 106.93-1.91 51 51 0 00-3.29-7.82 51.91 51.91 0 00-4.42-7.46 68.5 68.5 0 00-12.1-12.73 43.66 43.66 0 00-7.53-5.09 33.37 33.37 0 00-9-2.89 46.35 46.35 0 00-8.71-.87zm5.05 6.52h.36-.36zM106 1530.18a41 41 0 01-.12 6.46 50.09 50.09 0 01-2.36 9.49 13.1 13.1 0 01-1.15 1.86c-.65.81-1.31 1.59-2 2.38a3.87 3.87 0 00-1.07 2.57 3.65 3.65 0 006.22 2.58c.64-.75 1.27-1.5 1.89-2.26a28.32 28.32 0 001.82-2.42 15 15 0 001.54-3.33c.63-1.73 1.12-3.53 1.62-5.31a38.57 38.57 0 001.13-5.62 29.17 29.17 0 00.29-6.4 4.15 4.15 0 00-1.15-2.77 3.91 3.91 0 00-6.68 2.77zm-25.3-19.12c-4 2.53-8.07 5-12.08 7.62l-2.75 1.75c-1.17.75-2.31 1.51-3.41 2.37a16.27 16.27 0 00-3 3.1 13.9 13.9 0 00-1.77 3 29.32 29.32 0 00-1.33 3.31 4.17 4.17 0 006.12 4.7 4.38 4.38 0 001.91-2.49c.24-.62.48-1.24.73-1.86a15.86 15.86 0 011.18-2.08 13.24 13.24 0 011.46-1.44c2.36-1.68 4.87-3.19 7.32-4.73l9.73-6.14a4.14 4.14 0 001.47-5.6 4.21 4.21 0 00-3.6-2 3.66 3.66 0 00-2 .56zM86 1443a3.26 3.26 0 00-1.17 4.43c1.3 1.85 2.55 3.71 3.72 5.64.65 1 1.28 2.09 1.88 3.16a27.42 27.42 0 011.26 2.55 20.83 20.83 0 011.06 3.45 60.38 60.38 0 01.17 6.86 3 3 0 105.93 0c0-2.08.05-4.15-.09-6.24a17.44 17.44 0 00-1-4.74c-.4-1.1-.82-2.19-1.29-3.27a52.3 52.3 0 00-2.81-5.21c-1.06-1.84-2.09-3.7-3.28-5.46a3.44 3.44 0 00-2.84-1.61 3.1 3.1 0 00-1.54.44zm50.94 1.67a59.4 59.4 0 00-5.66 5.78c-2 2.25-4 4.52-5.94 6.77a3.22 3.22 0 000 4.5 3.18 3.18 0 004.48 0c2-2.24 4-4.51 6-6.73 1.81-2 3.77-3.85 5.77-5.64a3.33 3.33 0 000-4.68 3.28 3.28 0 00-2.33-1 3.39 3.39 0 00-2.34 1zm15.78 68.03a3.19 3.19 0 00-1.14 4.36 3.5 3.5 0 001.9 1.46l.16.06a33.77 33.77 0 016.24 3.42 26.68 26.68 0 014 3.93 37 37 0 013.17 5.12c.45.87.87 1.75 1.27 2.64l.3.76a3.88 3.88 0 001.65 2.14 3.56 3.56 0 004.88-1.28 3.57 3.57 0 000-3.61 43.5 43.5 0 00-5.1-8.48 38 38 0 00-2.78-3.31 32.76 32.76 0 00-3.87-3.3 36.4 36.4 0 00-8.17-4.23 2 2 0 00-.78-.14 3.45 3.45 0 00-1.68.46zm161.16 132.62a83.45 83.45 0 00-10.92 1.2 52.24 52.24 0 00-9.16 2.29 85.7 85.7 0 00-4.92 2l-1.84.86a18.77 18.77 0 00-1.81.86 4.38 4.38 0 00-2 2.56 4.33 4.33 0 00.43 3.3 4.4 4.4 0 003.7 2.11 6.77 6.77 0 003.36-1c.63-.32 1.26-.66 1.9-1 1.07-.58 2.19-1.1 3.31-1.61a41.4 41.4 0 016-2c2.35-.54 4.69-1 7.07-1.36a48.91 48.91 0 016.39-.46c3 .07 6.05.22 9.06.42a3.91 3.91 0 100-7.81c-2.91-.19-5.84-.44-8.76-.44h-1.82zm24.25 34.2a3.71 3.71 0 00-2.06 1.59c-.91 1.29-1.85 2.56-2.79 3.84a81.19 81.19 0 01-6.38 7 3.48 3.48 0 004.92 4.92 78.52 78.52 0 0010.2-12.29 3.44 3.44 0 00-3-5.18 3.5 3.5 0 00-.91.12zM363.1 1704a2 2 0 00-1.38 2.4c.32 1.46.66 2.92.9 4.38l.63 3.77.48 4.07c.13 1 .18 2.12.23 3.19.09 1.29.22 2.59.23 3.88 0 1.56.05 3.11.07 4.67a109.31 109.31 0 01-.93 15.76c0 .33-.09.66-.13 1q-.49 3.27-1 6.52a3.08 3.08 0 00.29 2.21 2.89 2.89 0 001.72 1.32 2.87 2.87 0 003.63-2.77c.27-2.91.47-5.83.67-8.74.08-1.2.15-2.4.19-3.61s.13-2.56.12-3.84c0-2.69 0-5.37-.13-8.06-.06-1.49-.13-3-.2-4.49s-.23-2.72-.34-4.07a128.45 128.45 0 00-2.61-16.21 1.93 1.93 0 00-1.91-1.44 1.61 1.61 0 00-.49.07zm21.21-12.17a3 3 0 00-1.83 1.41 3 3 0 00-.31 2.36 3.3 3.3 0 001.42 1.84l1.1.82 1.9 1.47A26.21 26.21 0 01391 1704a51.44 51.44 0 015.67 10.21c.82 2 1.51 4.07 2.17 6.14a38.26 38.26 0 011.28 4.95c0 .33.05.66.06 1a3.47 3.47 0 006.93 0 24.56 24.56 0 00-1.85-7.72 98.15 98.15 0 00-4-9.48 42.33 42.33 0 00-8.09-11.87 33.1 33.1 0 00-3.13-2.57c-1.11-.87-2.23-1.73-3.36-2.57a2.63 2.63 0 00-1.5-.42 3.12 3.12 0 00-.88.12zm13.6-43.97q-3.14.73-6.22 1.65a2.88 2.88 0 001.54 5.56c1.49-.43 3-.89 4.5-1.23 1.31-.28 2.62-.55 3.93-.79a15.39 15.39 0 012.63-.06 9.38 9.38 0 011.55.43 3 3 0 003.44-4.47 3.22 3.22 0 00-1.81-1.39 10.57 10.57 0 00-3.6-.58 26.65 26.65 0 00-6 .88zM358.38 1591a4 4 0 00-2.82 5c.73 2 1.49 4 2.1 6a46.11 46.11 0 011.32 6.15 21.63 21.63 0 01.1 5.15 51.71 51.71 0 01-2.35 9.79 3.66 3.66 0 002.55 4.49 3.62 3.62 0 002.82-.36 3.87 3.87 0 001.68-2.19 48.82 48.82 0 001.92-6.91c.21-1 .39-2.11.58-3.17a27.82 27.82 0 00.44-3.64 29.42 29.42 0 00-.19-3.87c-.11-1.1-.24-2.22-.41-3.32a45.22 45.22 0 00-2.78-10.3 4.4 4.4 0 00-1.85-2.42 4.08 4.08 0 00-2-.55 3.89 3.89 0 00-1.07.15zm.84 21.35l-.09.59.09-.59zm-76.5-518.95a4.42 4.42 0 000 8.84 29.34 29.34 0 013.25 0 26.36 26.36 0 015.43 1.57 29.12 29.12 0 015 2.7 69.55 69.55 0 015.31 5.14 4.3 4.3 0 006.09-6.08c-1.54-1.57-3-3.21-4.67-4.65a28 28 0 00-6.3-4.11 43.7 43.7 0 00-6.5-2.57 24.91 24.91 0 00-6.92-.9zm2.44 8.76h.25-.25zm39.84 66.68a4.54 4.54 0 00-1.23 3c-.45 4.69-.87 9.38-1.41 14.06-.37 2.63-.77 5.26-1.1 7.9a4.11 4.11 0 00.58 2.13 4.22 4.22 0 005.78 1.51 4 4 0 001.95-2.52q.89-5.78 1.55-11.58c.44-3.83.73-7.67 1.09-11.5a4.08 4.08 0 00-1.23-3 4.25 4.25 0 00-6 0zm49.11-6.35a3.2 3.2 0 00-1.47 1.91 3.05 3.05 0 00.32 2.47c2 2.65 3.86 5.33 5.78 8 .79 1.1 1.5 2.27 2.24 3.41.61.91 1.21 1.82 1.77 2.76 1.42 2.36 2.8 4.72 4.14 7.12a72.57 72.57 0 013.42 7.25c-.12-.26-.22-.53-.34-.79.36.89.74 1.78 1.07 2.69a3.5 3.5 0 001.52 2 3.28 3.28 0 004.83-3.71c-1.86-5.94-5.06-11.31-8.29-16.58s-6.89-10.36-10.6-15.35a3.48 3.48 0 00-1.92-1.47 3.06 3.06 0 00-.85-.12 3.21 3.21 0 00-1.62.44zm20.11-18.49a3.8 3.8 0 000 5.37 4.08 4.08 0 002.69 1.12l3.27.38 7 .94c5.07 1 10.28 1.78 15.12 3.58l1.17.56a4.09 4.09 0 003 .38 3.85 3.85 0 002.31-1.77 3.94 3.94 0 00.4-3 3.77 3.77 0 00-1.78-2.31 34.12 34.12 0 00-5.86-2.18c-.92-.24-1.85-.52-2.79-.72-2.06-.44-4.12-.88-6.2-1.26-5.15-1-10.37-1.6-15.59-2.21h-.23a3.82 3.82 0 00-2.46 1.13zm-33.48-69.32a41.7 41.7 0 01-1.64 5.23 30.24 30.24 0 01-3.15 5.53 53.58 53.58 0 01-5.84 5.83 3.61 3.61 0 105.1 5.11c1.37-1.21 2.73-2.44 4-3.73a32.19 32.19 0 008.53-16 3.64 3.64 0 00-7-1.93zm292.61-245.57c-2 .19-3.9.39-5.83.69a31.49 31.49 0 00-4.52.92 39.8 39.8 0 00-6.22 2.41 4.23 4.23 0 000 7.31 4.07 4.07 0 003.26.43 37.62 37.62 0 015.69-1.9c1.52-.33 3-.6 4.54-.83l3.31-.32a48.44 48.44 0 0110.28.43A4.2 4.2 0 00667 837a4.37 4.37 0 000-6.18 4.75 4.75 0 00-3.1-1.28 60.8 60.8 0 00-7.4-.55c-1 0-2.08 0-3.11.14zm49.23 47.59c-.82 4.24-1.68 8.45-2.28 12.72a4.09 4.09 0 00.37 2.87 3.79 3.79 0 002.23 1.71 3.75 3.75 0 004.58-2.6c.89-4.2 1.67-8.44 2.49-12.65a4.11 4.11 0 00-.38-3 3.91 3.91 0 00-2.3-1.76 3.91 3.91 0 00-4.71 2.67zm55.55-12.49a3.29 3.29 0 00-1.17 4.48 126.28 126.28 0 017.4 11.31c2 3.63 3.6 7.45 5.24 11.25.47 1.13.9 2.29 1.35 3.43.29.75.56 1.48.82 2.24a41.21 41.21 0 011.25 5 3.41 3.41 0 006.23.81 3.57 3.57 0 00.35-2.62 34.8 34.8 0 00-1.81-6.42l-1.5-3.64c-.87-2.13-1.82-4.21-2.76-6.3a84.14 84.14 0 00-6.27-11.64c-1.48-2.29-3.08-4.51-4.66-6.73a3.43 3.43 0 00-2-1.51 3.48 3.48 0 00-.85-.11 3.39 3.39 0 00-1.67.44zm4.98-65.21c-.41.68-.83 1.33-1.29 2a75 75 0 01-6 6.44 756.58 756.58 0 01-8.67 8.3 3.66 3.66 0 005.18 5.18c3-2.87 6-5.73 9-8.63a48 48 0 008.12-9.55 3.69 3.69 0 00-1.31-5 3.54 3.54 0 00-1.82-.5 3.77 3.77 0 00-3.2 1.81zm-89.28-36.81a4 4 0 000 5.55c2.19 2.3 4.44 4.53 6.47 7a40.88 40.88 0 013.18 5.38 47.82 47.82 0 012.1 6.43c.73 3 1.41 6.07 2.09 9.11a3.92 3.92 0 004.81 2.73 4 4 0 002.74-4.81c-.68-3.06-1.37-6.12-2.11-9.17a39.86 39.86 0 00-2.9-8.3c-.61-1.22-1.22-2.43-2-3.59a39.79 39.79 0 00-3-4.08c-1.79-2.2-3.89-4.19-5.85-6.22a3.78 3.78 0 00-2.75-1.14 3.94 3.94 0 00-2.81 1.14z"></path>
+  </symbol>
+</svg>
+<div class="container">
+  <nav class="nav">
+    <header class="header"><a href="">Blog</a><a href="">About</a><a href="">Contact</a></header>
+  </nav>
+  <div class="intro">
+    <h1>Flowers Forever</h1>
+  </div>
+  <main class="main">
+    <article>
+      <h2 class="article-title">What's Your Favorite Flower?</h2>
+      <p> Florem ipsum sneezeweed peruvian lily dune helleborine plumed thistle. Scabious st john’s wort holy grass false goat’s beard. Bloom glory lily drumstick gentian buttercup cosmos foxtail lily. Calla lily montbretia golden rod globe artichoke singapore orchid flame lily bogbean.</p>
+      <p>Lobster claw grass of parnassus thrift. Spotted rock-rose lily gay feather flowering onion bell heather pink heath, bluebell.</p>
+    </article>
+    <article>
+      <h2 class="article-title">Once Upon a Petal</h2>
+      <p> Lobster claw hyacinth brodiaea royal bluebell st john’s wort scots primrose. Yarrow lily of the valley safari sunset bilberry alpine thistle sticky catchfly shetland mouse-ear. Daisy cotton-grass hop drumstick. Ipsum forget-me-not carnation holy grass canterbury bells.</p>
+      <p>Sunflower cosmos lady’s slipper orchid. Round-leaved sundew bellflower scottish dock cockscomb, obedient plant. Jacob’s ladder dog rose bearberry.</p>
+    </article>
+    <article>
+      <h2 class="article-title">Botanical Garden Dreams</h2>
+      <p> Stock, flame lily singapore orchid tuberose. Loose strife red-hot poker marguerite, lisianthus. Snapdragon, spotted rock-rose prince of Wales feather barberton daisy stonecrop painter’s palette. Flower queen Fabiola lily daisy. Windflower crocus columbine sturt’s desert rose, flamingo flower. African lily marigold queen Anne’s lace. Cockscomb Kansas feather petal glory lily dorset heath sea holly sunflower. China aster lilac, dandelion brodiaea, amaryllis.</p>
+      <p>African lily marigold queen Anne’s lace.</p>
+    </article>
+    <article>
+      <h2 class="article-title">A Passion for Blooms</h2>
+      <p>Stock, flame lily singapore orchid tuberose. Loose strife red-hot poker marguerite, lisianthus. Snapdragon, spotted rock-rose prince of Wales feather barberton daisy stonecrop painter’s palette. Flower queen Fabiola lily daisy.</p>
+      <p>Windflower crocus columbine sturt’s desert rose, flamingo flower. African lily marigold queen Anne’s lace. Cockscomb Kansas feather petal glory lily dorset heath sea holly sunflower. China aster lilac, dandelion brodiaea, amaryllis.</p>
+    </article>
+  </main>
+</div>
+<svg class="flower-right" viewBox="0 0 2646 2526">
+  <use xlink:href="#flower-path"></use>
+</svg>
+<svg class="flower-left" viewBox="0 0 2646 2526">
+  <use xlink:href="#flower-path"></use>
+</svg>
+<svg class="flower-bottom" viewBox="0 0 2646 2526">
+  <use xlink:href="#flower-path"></use>
+</svg>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/grid-based-blog-index-page-layout/dist/style.css b/grid-based-blog-index-page-layout/dist/style.css
new file mode 100644
index 0000000..c3de699
--- /dev/null
+++ b/grid-based-blog-index-page-layout/dist/style.css
@@ -0,0 +1,220 @@
+:root {
+  --pink: #db8398;
+  --black: #3c3c3c;
+}
+
+body {
+  padding: 1rem;
+  font-family: 'Nunito', sans-serif;
+  color: var(--black);
+  overflow-x: hidden;
+  min-height: 100vh;
+  position: relative;
+}
+@media (min-width: 700px) {
+  body {
+    padding: 3rem;
+  }
+}
+
+p {
+  line-height: 1.6;
+}
+
+h1,
+h2 {
+  font-family: 'Libre Baskerville', serif;
+  font-weight: normal;
+  margin-top: 0;
+}
+
+.article-title {
+  font-size: 1.5rem;
+  color: var(--pink);
+}
+@media (min-width: 800px) {
+  .article-title {
+    font-size: 2rem;
+  }
+}
+
+.nav,
+article,
+.intro {
+  padding: 1rem;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%;
+  font-size: 1.2rem;
+}
+.header a {
+  color: currentColor;
+  text-decoration: none;
+  margin-right: 24px;
+  transition: all 0.3s ease-in;
+}
+.header a:hover, .header a:active {
+  text-decoration: underline;
+}
+
+.container {
+  max-width: 1120px;
+  margin: 0 auto;
+  display: grid;
+  gap: 2rem;
+  grid-template: "nav"     40px "intro"   auto "article" auto / 1fr;
+}
+@media (min-width: 700px) {
+  .container {
+    grid-template: "intro nav     .   "     40px "intro article article" 1fr "intro article article" 1fr / 80px 1fr;
+  }
+}
+@media (min-width: 1000px) {
+  .container {
+    grid-template: "intro nav     .   "     40px "intro article article" 1fr "intro article article" 1fr / 150px 1fr;
+  }
+}
+
+.nav {
+  grid-area: nav;
+}
+
+.intro {
+  grid-area: intro;
+}
+.intro h1 {
+  margin-bottom: 0;
+  color: var(--pink);
+}
+@media (min-width: 700px) {
+  .intro {
+    writing-mode: vertical-rl;
+    align-self: center;
+    justify-self: center;
+  }
+}
+.intro h1 {
+  font-family: 'Nunito', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.3rem;
+}
+
+.main {
+  grid-area: article;
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(auto-fill, minmax(300px, min-content));
+}
+@media (min-width: 700px) {
+  .main {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 180px);
+  }
+}
+@media (min-width: 700px) {
+  .main {
+    grid-template-rows: repeat(2, minmax(300px, 1fr));
+  }
+}
+
+.flower-svg {
+  display: none;
+}
+
+.flower-right {
+  position: absolute;
+  width: 700px;
+  height: auto;
+  z-index: -1;
+  left: -280px;
+  top: -5%;
+  transform: rotate(-5deg) scaleX(-1);
+  transform-origin: top;
+}
+@media (min-width: 400px) {
+  .flower-right {
+    left: unset;
+    right: -6%;
+    transform: rotate(-7deg) scaleX(-1);
+  }
+}
+@media (min-width: 700px) {
+  .flower-right {
+    top: -10%;
+    transform: rotate(-28deg);
+    left: unset;
+    right: -55vw;
+    transform-origin: right;
+  }
+}
+@media (min-width: 1000px) {
+  .flower-right {
+    transform: rotate(-35deg);
+    top: -28%;
+    right: -35vw;
+    transform-origin: right;
+  }
+}
+
+.flower-left {
+  display: none;
+}
+@media (min-width: 700px) {
+  .flower-left {
+    display: block;
+    position: absolute;
+    left: -670px;
+    width: 700px;
+    height: auto;
+    top: -45%;
+    transform: scaleX(-1) rotate(-50deg);
+    transform-origin: bottom;
+    z-index: -1;
+  }
+}
+@media (min-width: 1000px) {
+  .flower-left {
+    top: -40%;
+    left: -600px;
+    transform: scaleX(-1) rotate(-35deg);
+  }
+}
+@media (min-width: 1200px) {
+  .flower-left {
+    right: -30vw;
+  }
+}
+
+.flower-bottom {
+  display: none;
+}
+@media (min-width: 700px) {
+  .flower-bottom {
+    display: block;
+    position: absolute;
+    height: 700px;
+    right: -730px;
+    top: 50%;
+    transform: rotate(75deg) scaleY(-1);
+    transform-origin: bottom;
+    z-index: -1;
+  }
+}
+@media (min-width: 1000px) {
+  .flower-bottom {
+    height: 700px;
+    right: -56vw;
+    top: 45%;
+    transform: rotate(75deg) scaleY(-1);
+  }
+}
+@media (min-width: 1200px) {
+  .flower-bottom {
+    right: -40vw;
+  }
+}
\ No newline at end of file
diff --git a/grid-based-blog-index-page-layout/license.txt b/grid-based-blog-index-page-layout/license.txt
new file mode 100644
index 0000000..7dcc549
--- /dev/null
+++ b/grid-based-blog-index-page-layout/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Sheelah Brennan (https://codepen.io/sheelah/pen/abNqvBz)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/grid-based-blog-index-page-layout/src/index.pug b/grid-based-blog-index-page-layout/src/index.pug
new file mode 100644
index 0000000..215a70a
--- /dev/null
+++ b/grid-based-blog-index-page-layout/src/index.pug
@@ -0,0 +1,155 @@
+svg.flower-svg(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 2646 2526')
+  defs
+    style.
+      .cls-2{fill:#a2ad92}.cls-3{fill:#dbb4ad}.cls-4{fill:#feef99}.cls-5{fill:#fcd69a}.cls-6{fill:#bc8484}.cls-7{fill:#fff}.cls-8{fill:#ffe2dd}.cls-9{fill:#db8398}.cls-10{fill:#fce3df}.cls-11{fill:#667d66}.cls-12{fill:#935769}
+  symbol#flower-path
+    path.cls-2(d='M711 835.41c-2.8 5.67-7 14.18-11.51 22.63-1.24 2.34-2.69 4.64-4.09 6.87l-.38.59c-.59.94-1.19 1.88-1.76 2.84-1.39 2.31-2.93 4.63-4.29 6.67l-.34.53-1.06 1.58c-.76 1-1.49 2.08-2.22 3.14-1.69 2.45-3.35 4.84-5.13 7-1 1.18-1.9 2.37-2.83 3.57-2.12 2.69-4.19 5.33-6.39 7.75l-3.4 3.74-3.33 3.68-.94 1c-.83 1-1.68 1.89-2.58 2.76l-7.37 7.24-3.74 3.62q-7.12 6.2-14.31 12.34l-2.17 1.87-.25.22c-8.29 7.12-16.85 14.48-25.2 21.82-6.21 5.45-12.82 11.33-19.07 17.42-4 3.87-7.89 7.83-11.68 11.65q-3.09 3.14-6.21 6.26c-8.1 8.1-14.73 14.65-20.87 20.62-5.16 5-10.18 10.07-15.74 15.68l-3.91 3.94c-8.52 8.6-17 17.57-25.12 26.26l-.72.76-9.16 9.74q-20.13 21.28-40.39 42.47c-1.75 1.83-3.5 3.63-5.26 5.44l-2.33 2.41c-1 1-1.95 2-2.93 3l-.27.28c-2 2-4.12 4.17-6.07 6.34q-2.57 2.87-5.15 5.7c-4.29 4.72-8.68 9.56-12.85 14.51-11.24 13.38-24.27 29-36.6 45-6.21 8.06-12.41 16.31-17.75 23.41-1.59 2.12-3.11 4.35-4.57 6.5l-.31.46-.88 1.3q-1.38 2-2.8 4c-2 2.91-4.3 6.18-6.35 9.48l-7.39 11.91-1.29 2.06-.23.35c-1.45 2.33-3 4.74-4.3 7.19l-2.79 5.15-.18.31c-3.36 6.19-6.83 12.57-10.15 18.9-8.55 16.33-17.15 32.92-26.28 50.71q-6.72 13.1-13.33 26.24c-2.76 5.48-5.42 11.14-8 16.62l-.42.88-2.78 5.91c-1.24 2.65-2.37 5.42-3.45 8.09-.58 1.43-1.15 2.82-1.74 4.21l-1.55 3.66-.18.42c-1 2.4-2.05 4.79-3 7.2l-3.16 7.69c-2.36 5.77-4.73 11.55-7 17.36l-1.64 4.15-.11.27c-6 15.22-12.26 31-17.62 46.71l-2.17 6.36-.22.63c-2.31 6.75-4.7 13.72-6.82 20.65l-2.5 8.21-2.46 8c-.84 2.77-1.59 5.62-2.25 8.13l-.28 1.06c-.2.77-.4 1.55-.61 2.31-2.54 9.38-5 19.21-7.23 27.88-1.49 5.92-2.86 12-4.16 17.83l-.11.47c-.52 2.32-1 4.5-1.5 6.67q-3.81 16.75-7.7 33.5l-.37 1.59-3.75 16.35q-1.75 7.66-3.53 15.34c-.75 3.25-1.41 6.7-1.94 9.47-.31 1.62-.62 3.22-.94 4.83-.63 3.14-1.28 6.5-1.75 10l-1 7.92-1.06 7.92c-.16 1.18-.24 2.37-.32 3.56 0 .6-.08 1.21-.13 1.8l-.4 4.75-.4 4.74c-.36 4.2-.53 8.4-.69 13.44 0 1-.07 2.09-.12 3.14v1c-.13 2.68-.27 5.71-.23 8.67l.11 8.69.11 8.69c0 2.75.14 5.5.25 8.25v.68l.07 1.71c.06 1.43.11 2.87.16 4.31v.27c.09 3 .19 6.06.39 9.07l.37 5.65c.41 6.62.87 14.11 1.64 21.47l.81 7.7.81 7.73c.34 3.3.83 6.64 1.31 9.86l.18 1.25c.18 1.18.35 2.35.51 3.53 1 7.36 2.29 15.07 3.3 21.25l.94 5.74c.81 5 1.69 10 2.58 15.06.16.31.32.61.47.92a15 15 0 011.52 5.11 9.51 9.51 0 01-.31 3.21c.4 2.18.8 4.36 1.2 6.52l.24 1.27c1.23 6.61 2.43 13.15 3.59 19.69 2.81 16 5.23 32 7.58 47.6l1.41 9.37c2.73 18 5.43 35.6 8.46 53.14 1.4 8.18 2.73 16.36 4.06 24.55l.06.38.09.51c1.54 9.56 3.15 19.45 4.87 29.15 1.54 8.74 3 18 4.17 25.45 1.45 9.16 3.12 18.44 4.74 27.42l.06.36.19 1c.5 2.78 1 5.57 1.54 8.35v.25c1 5.05 1.89 10.11 2.75 15.17q2.54 15 5 30.06l2.44 14.84c2 12.06 3.94 24.11 6 36.15 3.13 18.34 6.58 36.58 10.24 54.23l1.8 8.68.26 1.26c2.86 13.8 5.82 28.06 8.54 42.11l1.28 6.55c1.26 6.46 2.49 12.78 3.62 19.06l.91 5.12c1.44 8.18 2.93 16.63 4.84 24.85 1.54 6.69 3.09 13.16 4.73 19.78l-.08-.25c-5.75-7.48-11.71-15.21-18.83-21.63-6.46-5.83-13.56-11.14-20.43-16.28l-3.35-2.5c-7.3-5.48-15.13-11-23.23-16.23s-17.58-11.48-27.41-16.11a88.33 88.33 0 00-16.61-5.94 22.09 22.09 0 00-5.24-.58h-.77a26 26 0 00-5.9.91 22.37 22.37 0 00-8.24 3.9c-5.4 4.2-7.85 11.9-6.58 20.61 1 7.1 4.73 13.45 8.43 19.34a122.7 122.7 0 0014.12 18l2.43 2.62c2.29 2.49 4.62 5 7.07 7.35a277.66 277.66 0 0022 19.48c8.11 6.26 16.4 12.48 24.42 18.48l1 .76c8.64 6.48 16.48 12 23.94 17 5.18 3.41 9.83 6.43 14.25 9.23l2.84 1.82.35.23c2.58 1.65 5.24 3.36 7.92 4.93a75.06 75.06 0 0012.95 6.21c4.46 1.58 8.76 3.26 13.16 5.13a12.44 12.44 0 003.29.92l.43 1.71.46 1.74a161.37 161.37 0 005.48 17.23 13.78 13.78 0 0012.67 8.84 10.05 10.05 0 001.09 0 13.56 13.56 0 009.18-4.71c2-2.35 3.82-6.42 3.15-9.82l-.22-1.1-.08-.42c-1.07-5.35-2.17-10.88-3.42-16.3-1-4.2-2.11-8.57-3.11-12.43l-.71-2.75c-1.77-6.83-3.77-13.83-5.54-20-.84-2.93-1.67-5.85-2.5-8.78-1-3.61-2.06-7.23-3.1-10.83a7.43 7.43 0 001.45.14h.62a7.31 7.31 0 005.16-2.67 143.58 143.58 0 0010.38-17.29c1-2.14 2-4.37 2.85-6.54l1.06-2.53c1.76-4.16 3.23-8.53 4.66-12.75l.33-1c1.57-4.65 3.07-9.77 4.72-16.11a109.06 109.06 0 002.2-12.48l.23-1.59q1.73-12.24 3.4-24.48c1.69-12.24 3.38-24.47 5.14-36.7.72-5 1.49-10 2.27-15 2.34-15.14 4.77-30.79 5.56-46.36.3-6.11.36-12.6-1.24-18.61a16.68 16.68 0 00-5-8.56c-1.79-1.49-3.6-2.86-5.89-3.17a23.17 23.17 0 00-3-.25 11.39 11.39 0 00-1.64.11 14.63 14.63 0 00-6.25 2.39c-.89.67-1.77 1.41-2.78 2.33a67.88 67.88 0 00-5.57 5.74c-7.74 9-11.3 20.46-14.74 31.57l-.9 2.91c-1.36 4.38-2.76 8.74-4.17 13.1l-.26.77c-3.19 9.47-6.5 19.26-9.48 29-1.29 4.25-2.57 8.88-3.89 14.15a90.92 90.92 0 00-2.08 14.26 246.43 246.43 0 00-1 31.23c.05 1.28.08 2.54.1 3.81q-2.19-11.91-4.53-23.82c-2.88-14.64-6.08-29.76-8.9-43.1l-2-9.48c-6.36-30.21-11.59-61.15-16.65-91.07l-2.33-13.68q-2.56-15.1-5.17-30.19c-.87-5.05-1.85-10.14-2.81-15.06L264 2141c-.41-2.14-.82-4.27-1.21-6.4-1.64-8.78-3.15-17.61-4.8-27.42-1.48-8.7-3-17.69-4.65-26.58s-3.2-18.09-4.8-27.48l-.31-1.84c-1.39-8.13-2.82-16.54-4.34-24.78-3.57-19.44-6.77-39-9.15-53.9l-1.59-9.91-3-18.42c-1.43-8.84-3.07-18.2-5-28.61-1.26-6.69-2.57-13.37-3.89-20l-.22-1.12c-1.89-9.66-3.85-19.66-5.59-29.51l-.43-2.44c-1.49-8.39-3-17-4.32-25.63l-.55-3.51-.11-.66c-.48-2.93-1-5.91-1.31-8.86l-2-16.85c-.79-6.64-1.29-13.42-1.78-20l-.15-2c-.11-1.38-.22-2.75-.32-4.12-.23-2.89-.37-5.79-.51-8.68-.07-1.52-.15-3-.23-4.53v-.88l-.05-.93c-.17-3.3-.35-6.7-.44-10-.05-1.79-.12-3.57-.2-5.37-.15-3.89-.3-7.77-.24-11.58l.15-8.79.14-8.79.05-.83c.45-6.9 1-14.72 1.86-22.31l1.1-9.3.12-1.15c.09-.91.18-1.81.35-2.7l1.56-8.42 1.55-8.38c1.14-6.13 2.53-12.43 3.75-18l.24-1.11 1.31-6c.54-2.52 1.1-5 1.66-7.55l.67-3c1-4.62 2-9.24 3-13.87l2.25-10.64c3-14.45 6.2-29.4 9.71-44.17 2-8.33 4.13-16.75 6.21-24.91l.12-.47.51-2c1.37-5.35 3-10.68 4.75-16.59.74-2.45 1.47-4.89 2.19-7.34l-.29.66c.73-2 1.4-4.1 2.06-6.16 1.73-5.41 3.52-11 5.44-16.35 1-2.69 1.91-5.39 2.86-8.1 1.87-5.38 4-11.47 6.23-17.24l3.26-8.47.24-.64c5.31-13.8 10.79-28.06 16.5-41.94l2.15-5.27.17-.41c2.76-6.75 5.6-13.73 8.7-20.45 4.65-10.09 8.93-19.1 13.07-27.54 6.34-13 13-26 19.37-38.67l.46-.91 4.68-9.24c5.67-11.24 11-21.51 16.27-31.4.77-1.43 1.51-2.87 2.26-4.3l.18-.36c1.89-3.61 3.83-7.35 6-10.87q5.26-8.66 10.56-17.27l2.69-4.08c3.48-5.28 7-10.59 10.69-15.61 5.24-7.08 11.45-15.45 17.86-23.88 11.48-15.09 23.61-29.77 36.07-44.73 4-4.77 8.19-9.44 12.27-14 1.74-1.92 3.49-3.86 5.21-5.79 2-2.24 4.21-4.5 6-6.31l2.93-3 1.64-1.7c2.22-2.3 4.44-4.61 6.63-6.92q20.15-21.32 40.23-42.69 3.7-4 7.39-7.93c4.26-4.59 9.08-9.78 13.85-14.75 8.41-8.77 17.36-18 27.35-28.12 2.76-2.8 5.58-5.55 8.41-8.29l1.37-1.34 2.72-2.66c2.79-2.73 5.54-5.51 8.27-8.29l.66-.66 2.81-2.85 5.34-5.4 2.58-2.62c4.78-4.86 10.33-10.5 15.86-15.95 12.6-11.47 23-20.7 32.7-29.05q9.27-8 18.43-16.09c4.41-3.88 8.66-8.07 12.77-12.12l.61-.6 3.07-3c1.82-1.79 3.53-3.78 5-5.54l.6-.68c.58-.67 1.15-1.33 1.74-2 2.68-3 5.2-6.1 6.84-8.16a222.24 222.24 0 0013.49-18.41c4.2-6.51 8.27-13.06 12.46-20 1.23-2 2.33-4.24 3.39-6.36l.21-.41c.46-.91.92-1.82 1.4-2.72 1.47-2.81 2.89-5.73 4.26-8.55l.1-.21c.72-1.46 1.43-2.93 2.15-4.38a7.16 7.16 0 00.3-5.55 7.47 7.47 0 00-3.77-4.27 7 7 0 00-3.12-.72 7.51 7.51 0 00-6.7 4.17z')
+    path.cls-2(d='M274.89 2302a7.65 7.65 0 00.89 10.81 8.09 8.09 0 005.59 1.8 7.46 7.46 0 005.23-2.69 7.68 7.68 0 00-.9-10.82 8.12 8.12 0 00-5.59-1.79 7.42 7.42 0 00-5.22 2.69z')
+    path.cls-2(d='M140.24 2101.42a29.89 29.89 0 00-5.65 2.62c-.33.28-.66.54-1 .81a28.77 28.77 0 00-3 2.85 28 28 0 00-3.44 4.87 39.3 39.3 0 00-4.12 10c-1.16 4.11-.57 8.57.29 12.66a106.94 106.94 0 005.66 18.62 122.61 122.61 0 008.17 16.58c5.87 9.76 12.22 19.13 19 28.31 3.48 4.71 7.51 9.07 11.34 13.48.81.93 1.63 1.85 2.45 2.77a10.73 10.73 0 001.24 1.37c2.56 2.84 5.17 5.64 7.74 8.47 7.86 8.67 16 17.17 25.1 24.59 4.24 3.46 8.62 6.76 12.91 10.16 4.58 3.63 9.09 7.33 13.72 10.87 8.32 6.38 17.08 12.15 25.37 18.56l.86.67a12.84 12.84 0 006.61 2.79c.16 1.39.3 2.79.45 4.19a9.77 9.77 0 0019.47-1.59 199 199 0 00-3.29-22.41 155.43 155.43 0 00-6.89-23.34c-2-5.23-3.94-10.55-6.16-15.7-2.5-5.8-5-11.58-7.63-17.32a118.35 118.35 0 00-7.59-14.18c-2.58-4.08-5.52-7.92-8.48-11.75-3.58-4.64-7.16-9.26-10.9-13.78s-7.55-9.12-11.37-13.65-7.9-9.16-12-13.66c-4.47-5-9.13-9.69-13.84-14.43-3.45-3.48-7.15-6.76-10.8-10-4.58-4.07-9.16-8.1-14-11.9-1.82-1.44-3.7-2.83-5.64-4.11s-4-2.63-6.06-3.82a33.57 33.57 0 00-11.28-4 15.48 15.48 0 00-2.55-.21 16.67 16.67 0 00-4.76.7zm8.53 19.94l-1.15.6a7.36 7.36 0 011.15-.6zm-2.36 2.1a53 53 0 015.87 3.09c8.64 6.11 16.55 13.09 24.42 20.16 4.36 3.92 8.51 8.06 12.7 12.18 3.16 3.11 6.1 6.45 9.08 9.73q9.48 10.93 18.81 22c2.75 3.26 5.37 6.63 8 10 1.29 1.65 2.6 3.31 3.91 5a112.66 112.66 0 0110.37 15.75c1.4 2.93 2.85 5.84 4.17 8.8 1.66 3.72 3.47 7.4 5 11.17 2.42 6 4.85 12 7 18.09-1.21-.83-2.43-1.65-3.63-2.48-7.21-5-14.13-10.26-21.13-15.52s-14.3-10.47-20.71-16.56c-3.45-3.27-6.86-6.56-10.21-9.94-3-3-5.85-6.29-8.72-9.47l-1.06-1.16.15.16-.55-.6-.49-.53-1.29-1.42-.62-.67c-.62-.76-1.3-1.46-2-2.21a254.09 254.09 0 01-31.87-44.67 113.89 113.89 0 01-8.47-22.47 39.3 39.3 0 01-.52-4q.12-.66.27-1.32c.44-1 .94-2 1.48-3zm37.91 74.21l1 1.06-.07-.07-.9-1zm1.12 1.23l.27.29.39.43-.65-.71zm4.05 4.44l1.21 1.32-1.21-1.32zm1.8 2l-.29-.34-.07-.08.39.42zm-.39-.42l-.21-.24.28.32c.23.24.45.49.68.74l-.36-.4a.52.52 0 00.1.11c.16.18.33.36.49.55l.29.31.45.5-.43-.48.08.08-1.79-2 .42.47z')
+    path.cls-2(d='M140.89 2115.11a8.2 8.2 0 00-5.22 6.15c-1 3.36.05 7 1.94 9.85 1.75 2.68 3.75 5.22 5.61 7.82 2.6 3.63 5.38 7.13 8.16 10.62.38 1.14.82 2.26 1.28 3.38a6 6 0 00-.07.61 46.1 46.1 0 00-.19 7.05 21.22 21.22 0 002.28 7.08 108.5 108.5 0 007.25 12.31c3 4.5 6.25 8.8 9.45 13.15a131.75 131.75 0 0015.52 18.22 9.91 9.91 0 003.82 2.21c1.41 1.82 2.83 3.63 4.29 5.42 1.76 2.12 3.59 4.16 5.53 6.12a24.62 24.62 0 005.42 4l3.57 1.18h.36c4 5.64 7.91 11.31 12.09 16.8 1.49 2 3 3.92 4.49 5.86.34 2.07.65 4.14 1 6.21a8.91 8.91 0 003 5.81 8.58 8.58 0 006.22 2 7.65 7.65 0 001.49-.27c.17.19.35.37.52.55 2 2 4.71 3 7.25 4a9.58 9.58 0 007.08.34 9.11 9.11 0 005.09-4.63c.8-1.64 1.7-3.21 2.37-4.91a19.87 19.87 0 001-9.08 39.1 39.1 0 00-1.56-7.16c-.74-2.64-1.85-5.2-2.84-7.75a116.8 116.8 0 00-7.09-14.55l-.3-.54c-.86-2.11-2-4.15-3-6.17q-2.53-5-5.43-9.87a172.25 172.25 0 00-12.54-17.8c-7.14-9.09-15.05-17.57-22.94-26a50.54 50.54 0 00-5.25-5.2c-.39-.32-.79-.62-1.21-.9q-5.49-6.06-11-12.06c-2.61-2.8-5.23-5.57-7.92-8.3-1.35-1.38-2.71-2.75-4.06-4.12a35.1 35.1 0 00-5.5-5.06 9.08 9.08 0 00-3.52-1.9 35.5 35.5 0 00-5.45-1.42 9.34 9.34 0 00-4.42.22 59.78 59.78 0 00-8.42-7.82 9.2 9.2 0 00-5.4-1.93 7.63 7.63 0 00-2.69.49z')
+    path.cls-2(d='M323.27 2058.78a17.21 17.21 0 00-7.18 2.42 26.17 26.17 0 00-7.46 6.8 65.35 65.35 0 00-5.94 9.52c-1.94 3.6-3.64 7.3-5.28 11-2.23 5.12-4.24 10.38-6.17 15.63-4.18 11.4-8.17 22.85-12.07 34.36q-5.39 15.9-10.11 32c-1.41 4.82-2.89 9.67-4.07 14.55-1.48 6.13-3.54 12.47-3.31 18.83a11.42 11.42 0 0012.32 10.49 10.66 10.66 0 003-.67c-.93 1.87-1.88 3.73-2.89 5.55-.31.41-.63.8-1 1.2h-.19a36.18 36.18 0 01-3.59-.8 12.24 12.24 0 00-13.77 16.22c1 2.67 3.38 5.88 6.21 6.83 1.24.42 2.49.83 3.74 1.23l-4.76 6.8a9.5 9.5 0 00-2.08 6.47 8.87 8.87 0 009.57 8.12 8.61 8.61 0 006-3.1c3.81-5.46 7.61-10.91 11.48-16.33 2.4-3.36 4.9-6.67 7.31-10a28 28 0 002.56-3.67 236.3 236.3 0 0017.12-30.41c2.3-4.78 4.21-9.71 6.32-14.58 2.36-5.4 4.71-10.81 7-16.24 2.17-5.11 4.35-10.2 6.12-15.45 2-5.9 3.69-11.89 5.4-17.87 1.52-5.34 2.47-10.87 3.52-16.31.53-2.7.86-5.45 1.2-8.17s.71-5.52.86-8.29c.35-6 .78-12.16-.16-18.15a94.31 94.31 0 00-2-10 47.28 47.28 0 00-1.72-5.33 48.27 48.27 0 00-2.83-5.49 23.31 23.31 0 00-3.06-3.6 30.57 30.57 0 00-3.22-2.15 17 17 0 00-6-1.44h-.89zm-2 36.38v.07c.17 1.67.23 3.35.26 5a11.61 11.61 0 00-1.68-.45c-.11-.17-.22-.35-.34-.51.57-1.39 1.15-2.77 1.75-4.14zm-46.92 124.43a11.79 11.79 0 01-.9.84l.92-.84zm13.2-341.81c-8.48 2.49-15.53 8-21.82 14a106.07 106.07 0 00-14.21 17.22 168.41 168.41 0 00-12.74 22.2 232.05 232.05 0 00-13.95 36.73c-1.53 5.43-2.86 10.87-3.91 16.41a144.79 144.79 0 00-2 17.62c-.39 6.09-.73 12.15-.56 18.24.15 5.49 4.87 10.22 10.08 11.21a12.54 12.54 0 0014.52-9.91c.9-5.06 1.61-10.13 2.19-15.24.53-4.7.93-9.47 1.87-14.13s2-9.45 3.05-14.16c.91-4 2.16-7.84 3.37-11.72 5.13-14 10.8-27.7 18.69-40.4a102.69 102.69 0 0113.58-16.62 54.93 54.93 0 016.9-5.08c.32-.15.65-.28 1-.42a83.49 83.49 0 01.43 11.73 207.7 207.7 0 01-3.65 26.88c-2 9.31-4.49 18.41-7.24 27.51-1.38 3.83-2.81 7.59-4.43 11.35-1.76 4.07-3.87 8-5.94 12q-3.3 6.25-6.76 12.41c-2.43 4.38-4.8 8.79-7.39 13.07a76.5 76.5 0 01-7.95 9.12c-4.53 4-9.17 8-13.82 11.85-2.49 2.09-4.31 4.34-4.93 7.62a12 12 0 009.58 14.05c3 .56 6.77 0 9.14-2 4.89-4.1 9.81-8.17 14.56-12.44a86.74 86.74 0 007-6.6c1.23-1.36 2.45-2.73 3.64-4.13a63.14 63.14 0 006.05-9.05c5.78-10 11.57-19.91 17-30.08a126.12 126.12 0 007-15.79c2.22-6 4-12.18 5.91-18.3a217.7 217.7 0 007-32.22 183.46 183.46 0 001.61-18.29 75.92 75.92 0 00-.06-7.84 50.91 50.91 0 00-1.44-9.09 22.26 22.26 0 00-2.56-5.89 30 30 0 00-4.82-5.86 23.57 23.57 0 00-16.87-7 24.83 24.83 0 00-7 1zm4.05 24.38a7.41 7.41 0 011.16.35l.07.06-1.23-.41zm4.24.92a8.44 8.44 0 01.87 0h-.87zm-2.28.23l-.37.08.37-.08zm.31.69l.12.56-.12-.56zm.38 0a7.49 7.49 0 01.36.69l-.36-.69z')
+    path.cls-2(d='M297.67 1893.88c-8.41.8-13.87 8.71-18.63 14.81-2.58 3.32-4.8 7-7.06 10.49-2.06 3.22-4 6.49-5.92 9.8-2.2 3.83-4.28 7.73-6.29 11.66a14.78 14.78 0 00-2 2.6c-2.32 3.7-4.59 7.43-6.93 11.12q-3.23 4.83-6.47 9.63c-1.38 2-2.3 3.93-2.08 6.49a8.85 8.85 0 001 3.39c-2 4.15-3.89 8.33-5.67 12.57-2.32 5.54-4.51 11.38-5.33 17.35a19.44 19.44 0 00.58 9.31 13.68 13.68 0 0010 8.4h.24c-.56 1.43-1.12 2.85-1.67 4.27a14.43 14.43 0 00-.53 10.82 14 14 0 007.06 7.77c6.72 3.22 15.47.37 18.58-6.54 5.6-12.4 10-25.36 14.25-38.28 2.54-7.8 4.89-15.67 6.87-23.64.7-1.85 1.4-3.71 2.13-5.56q2.09-5.3 4.16-10.6c.17-.42.33-.84.49-1.25a96.23 96.23 0 005-11.16c.34-1.05.68-2.08 1-3.12a13.41 13.41 0 00.19-3.15q1.18-2.13 2.39-4.24c1.27-2.28 2.5-4.58 3.75-6.87s2.23-4.41 3.22-6.68c.67-1.53 1.2-3.11 1.72-4.69a39.37 39.37 0 002.11-7.86 16.46 16.46 0 00-.49-7.55 13 13 0 00-3.85-5.92 15.39 15.39 0 00-10.08-3.5c-.59 0-1.17 0-1.76.08zM81.72 1672.13c-2.32.67-5.14 3-6.73 4.71a28.74 28.74 0 00-4.48 6.84 42.6 42.6 0 00-3.59 11 41.7 41.7 0 00-.07 11.86c.51 4.08 1.6 8.14 2.49 12.14.68 3.13 1.56 6.24 2.46 9.33 2.17 7.48 4.32 15 7.52 22.13 3 6.73 6.73 13.32 10.4 19.72q4.73 8.2 9.41 16.43 2.78 4.88 5.6 9.72c6.08 4.93 12.14 9.83 17.71 15.35 5.8 5.73 11.12 12 17.22 17.42 1.53 1.36 3 2.75 4.64 4l5 3.81c3.16 2.44 6.38 4.8 9.4 7.41s6.27 5.48 9.23 8.41c2.77 2.75 5.4 5.63 8 8.52 4.72 5 9.44 9.94 13.32 15.54 4.08-5.28 3.72-13.93-1.86-18.13a109.52 109.52 0 01-14-12.91c-6.28-7.1-12.38-14.34-18.1-21.91-6.76-8.94-13.13-18.1-19.23-27.51-5.3-8.17-10.17-16.65-15-25.09-5.12-8.91-10.26-17.81-15.23-26.82a99 99 0 01-5-11.81l-2.07-6.06c-1.91-5.57-3.52-11.37-4.87-17.13a52.44 52.44 0 01-1.28-9.49c.11-.86.26-1.7.45-2.56 0-.06.05-.12.08-.19 1.22.24 2.43.52 3.64.85a71.5 71.5 0 0111.17 5c7.55 5.35 14.19 11.91 20.74 18.41a202.12 202.12 0 0117 20.67c5.48 7.93 9.71 16.57 14.16 25.08-.46-.86-.91-1.73-1.37-2.6 4.86 10.59 9.95 21.25 12.77 32.6a60.33 60.33 0 01.92 12.95c-.09 2.49-.19 5-.28 7.45 0 .36-.05.73-.06 1.1-.06 1-.11 2-.16 3a11.14 11.14 0 002 5.5 11.18 11.18 0 0015.58 2.75c2.12-1.49 4.42-4.36 4.57-7.08.28-4.62.46-9.22.63-13.84q.12-3.23 0-6.43c-.1-4.4-1.19-8.76-2.15-13a103.25 103.25 0 00-4.56-14c-.94-2.49-1.81-5-2.89-7.42-6.75-15.13-13.77-30.38-23.36-43.95-4.65-6.57-10-12.57-15.26-18.67-4.31-5-9.06-9.67-13.84-14.23-6.83-6.51-14.41-12.23-23.3-15.63-5.2-2-10.46-3.94-16.08-4.32C92 1671 91 1671 90 1671a28.39 28.39 0 00-8.24 1.18z')
+    path.cls-2(d='M79.25 1684.93a15.08 15.08 0 00-7.36 9.38c-1.83 6.87 1.66 13.33 4.07 19.55a177.59 177.59 0 009.52 20c5.28 9.82 10.55 19.63 16.14 29.28 2.64 4.56 5.38 9.06 8.4 13.37 2.27 3.24 5.44 6.39 9.47 7.15a14.32 14.32 0 001.73.2c2.57 4.41 5.16 8.81 7.88 13.14q7.71 12.35 15.5 24.62c2.07 3.24 4.17 6.47 6.25 9.71 1.27 2 2.6 3.91 3.91 5.87.45.72.87 1.46 1.27 2.2a11.68 11.68 0 002.2 2.71l2.75 4c2.36 2.07 4.68 4.19 6.92 6.4 2.77 2.75 5.4 5.63 8 8.52a144.55 144.55 0 0112.47 14.34c1.14 0 2.3-.06 3.45-.15a30.08 30.08 0 006.13 4.28 13.54 13.54 0 0016.16-3.45c4.61-5.43 4.26-14.53-1.56-19.06a26.79 26.79 0 01-2.17-1.83c-2.43-2.86-4.67-5.89-7-8.81-1.48-1.84-3-3.64-4.4-5.54-.64-2.3-1.38-4.59-2.16-6.84-3.44-10-8.4-19.56-13.15-29q-5.23-10.38-11.14-20.45-2.79-5.34-5.83-10.54a153.59 153.59 0 00-8.81-13.71q-4-5.49-8.08-11c-3.84-5.53-7.74-11.07-11.92-16.34q-4.35-5.47-8.69-10.94l-7.94-10q-7.68-9.69-16.27-18.57c-3.89-4.42-7.9-9.2-13.91-10.52a14.64 14.64 0 00-3.25-.36 17.17 17.17 0 00-8.55 2.47zm14.1 11.64v1a8 8 0 010-1z')
+    path.cls-2(d='M278.38 1681c-2.06.42-4.05.85-6 1.46a39.89 39.89 0 00-7.37 3.67 55 55 0 00-8.46 6.27 85.47 85.47 0 00-9.15 9.3c-3 3.51-5.78 7.26-8.6 10.93-3.91 5.08-7.37 10.6-10.84 16a156.21 156.21 0 00-8.44 14.43c-2.51 5-4.83 10.12-7.07 15.28-4.49 10.39-9.14 20.74-13.18 31.32-2.71 7-5 14.28-7.26 21.46a15.26 15.26 0 008.39 16.6 14.88 14.88 0 002.59 1 10.58 10.58 0 000 1.49 11.47 11.47 0 004 7.76 11.79 11.79 0 008.3 2.66 161 161 0 0018-1.32c2.29-.31 4.54-.67 6.8-1.14a65.32 65.32 0 006.62-1.65 32.24 32.24 0 005.4-2.66 119 119 0 0012.82-8.55 249.52 249.52 0 0026.73-22.31 79.57 79.57 0 005.48-6.27 73.56 73.56 0 009.91-15.3c.6-1.26 1.21-2.52 1.8-3.77a79.93 79.93 0 004.1-11.27c.84-2.76 1.41-5.62 2.05-8.42a126.26 126.26 0 002.4-16.78c.55-6.24.87-12.56 1-18.82a90.8 90.8 0 00-.39-10.69 55.78 55.78 0 00-2.53-11 27.4 27.4 0 00-8.35-11.94 42.65 42.65 0 00-5.8-3.86 26.53 26.53 0 00-3.81-1.9 29.3 29.3 0 00-9.49-2.37c-1.35-.09-2.65-.15-3.93-.15a28.22 28.22 0 00-5.67.52zm7.34 28.34c.4.06.8.14 1.21.23q1.14.5 2.25 1.08l.33.27a36.67 36.67 0 011.27 3.7c1.29 7.77.92 15.77.68 23.61a98.1 98.1 0 01-1.15 11.21c-.83 4.71-1.68 9.44-3 14.06a81.41 81.41 0 01-6.71 14.15c-2.3 3.25-4.81 6.32-7.4 9.35a58.43 58.43 0 01-5.15 5.17c-3.71 3.36-7.47 6.65-11.36 9.81-5.5 4.47-11.08 9-17.24 12.54a30.66 30.66 0 01-4.23 1.37 124.5 124.5 0 01-13.17 1.58c5.67-13.19 10.66-26.66 16.15-39.93 3.14-7.61 6.34-15.15 9.91-22.56a180.55 180.55 0 0110.4-17.91c5.15-7.71 10.53-15.43 17-22.07a60.62 60.62 0 016.39-4.77c.64-.27 1.3-.51 2-.72s1.22-.14 1.83-.17zm4.4 2.41l.25.5-.25-.5z')
+    path.cls-2(d='M281.63 1697c-2.15 1.86-4.29 3.74-6.33 5.73-2.32 2.25-4.12 5.15-6 7.75-1.43 2-2.79 4-4.18 6l-7.05 10.09c-5 7.2-10.06 14.38-15 21.65-.68 1-1.36 2.1-2 3.15a14.28 14.28 0 00-1.39 7.53 14.42 14.42 0 001.1 4.49l-.27.84v.5c-3.5 4.83-7 9.68-10.36 14.58-1.81 2.08-3.6 4.18-5.39 6.3-.83 1-1.62 2-2.43 3a23.72 23.72 0 00-2.71 3.7 12.19 12.19 0 00-1.72 5.4q-2.84 4.38-5.65 8.79a130.27 130.27 0 00-7.8 13.82 36.28 36.28 0 00-1.55 4.07 27.25 27.25 0 00-1.56 6.25c-.25 2.45-.37 5.74.69 8.09.12.26.24.52.35.78a13.38 13.38 0 003.91 5.6 12.26 12.26 0 004.07 2.64l3.31 1.09c1.45.09 2.91.17 4.37.22l.9-.17a19.87 19.87 0 004.57-1.14 33.7 33.7 0 005.85-3 80.84 80.84 0 0012.63-9.29 176.76 176.76 0 0024.74-27.12c3.64-4.89 7.06-10 10.2-15.27 1.54-2.57 3-5.14 4.35-7.8s2.58-5.58 3.81-8.41a99.83 99.83 0 006.75-22.51c.39-2.28.81-4.55 1.06-6.85.76-1.13 1.51-2.26 2.25-3.4a24 24 0 002.72-5.6c.8-2.38 1.23-4.46.33-6.91a8.71 8.71 0 00-1-2l.21-.35c1.29-2.19 2.49-4.44 3.63-6.72.51-1 1-2.09 1.37-3.16a34.19 34.19 0 002.06-6 30.56 30.56 0 00.34-4.88 15.57 15.57 0 00-3.18-7.93 14.51 14.51 0 00-9.06-5.85 14.9 14.9 0 00-2.73-.25 12.77 12.77 0 00-8.14 2.59zm-117.97-372.7a18 18 0 00-5.32 1.4 22.39 22.39 0 00-7.45 5.58c-.58.91-1.17 1.81-1.76 2.72a14.18 14.18 0 00-1.74 3.26 43.86 43.86 0 00-2.06 6.5 51.77 51.77 0 00-1.28 11.77c-.26 8.51.83 17.08 2 25.48a166.56 166.56 0 007 30.65c1 2.93 2.3 5.81 3.44 8.7.79 2 1.62 4 2.51 5.94 4.8 10.57 9.54 21.19 14.63 31.62q12.36 25.3 25 50.45c.54 1 1.07 2.06 1.62 3.1a13.49 13.49 0 0015.75 4.93c6.39-2.34 10.68-10.06 8.28-16.67 2.7-4.15 5.59-8.3 7.41-12.93 2.23-5.68 2.28-12.12 2.44-18.13a124.27 124.27 0 00-.76-16.25 103.41 103.41 0 00-2.7-13.48c-2-8.26-4-16.5-6.17-24.71-2-7.37-4.29-14.63-6.79-21.82-1.26-3.6-2.85-7.1-4.4-10.58-1.8-4.06-3.71-8-5.77-12l1.35 2.58q-1.22-2.34-2.45-4.68a2.12 2.12 0 01.11.21 180 180 0 00-19.06-29.54c-1.81-2.25-3.76-4.39-5.78-6.45a37.16 37.16 0 00-7.69-5.61 17.09 17.09 0 00-8.76-2.09h-1.59zm8.92 56.44c-.84-4.35-1.41-8.78-1.89-13.18a115.84 115.84 0 01-.89-13.41 201.67 201.67 0 0119.38 28.7c2.37 4.67 4.65 9.38 6.77 14.17 2.38 5.4 4.32 11 6.25 16.55a367.69 367.69 0 0110.25 36.12 101.68 101.68 0 011.66 22.58c-.15 1.82-.33 3.62-.63 5.41-.84-1.62-1.66-3.24-2.48-4.86q-6.33-12.6-12.56-25.24c-3.82-7.74-7.39-15.62-11-23.46-1.86-4-3.8-8-5.45-12.13q-1.75-4.32-3.48-8.65a97.34 97.34 0 01-4.27-13.86c-.56-2.91-1.11-5.82-1.67-8.74zm33.85-13c-.41-.8-.82-1.6-1.24-2.38.41.79.83 1.58 1.24 2.38z')
+    path.cls-2(d='M168.34 1355.42a11.63 11.63 0 00-4.94 3.44c-2.15 2.53-2.76 5.36-2.76 8.59 0 2 0 4 .16 6.06a47.32 47.32 0 001.44 6.72c.84 3.6 2.18 7.1 3.37 10.6 1 2.91 2.06 5.79 3.11 8.68 1.91 5.23 3.78 10.49 5.77 15.69 4.29 11.18 8.69 22.28 13.47 33.26 4.52 10.38 9 20.75 13.71 31.07 2 4.53 4 9.12 6.15 13.57 1.53 3.11 2.63 6.34 4.3 9.4a20 20 0 003.38 4.21 15.27 15.27 0 003.73 2.86c.35.61.71 1.22 1.09 1.81a30.58 30.58 0 004 4.31 14.78 14.78 0 0018.06.84c6.49-4.55 8.41-14.1 3.63-20.61-.49-.67-.93-1.34-1.36-2q-1-2.16-2-4.34v-.47a88.72 88.72 0 00.47-8.93 35.07 35.07 0 00-.76-5.48c-.54-3.07-1.3-6.11-2-9.15-3.1-13.11-8.2-25.86-13.74-38.11-4.93-11-9.9-21.9-15.14-32.71-2.81-5.81-6-11.52-9.31-17-.61-1-1.28-2-1.92-3s-1.38-2.08-2.13-3.08a20.49 20.49 0 00-6.37-5.57 13.81 13.81 0 00-6.34-2.08l-.35-.64a18.71 18.71 0 00-5.05-5.76 12.55 12.55 0 00-7.73-2.79 11.35 11.35 0 00-3.94.71z')
+    path.cls-2(d='M208.69 1485.45a14.44 14.44 0 00-5.88 9.1l-.2 3.84a14.25 14.25 0 002.55 7.06c2.25 4.24 4.44 8.52 6.77 12.72a14.2 14.2 0 0024.45-2c1.55-3.22 2.06-7.69.54-11-2.51-5.51-5.41-10.82-8.23-16.16-1.65-3.09-5.82-5.26-9.1-5.88a14.57 14.57 0 00-2.64-.24 14.38 14.38 0 00-8.26 2.59z')
+    path.cls-2(d='M365.38 1416c-4.29.91-8.53 1.91-12.71 3.21a206.42 206.42 0 00-22.89 9c-5.39 2.4-10.7 5-16 7.53-5.64 2.7-11.25 5.41-16.85 8.19s-11.25 5.66-16.56 8.9a220.76 220.76 0 00-26.52 18.46c-5.82 4.86-10.92 10.08-14.56 16.77-2.35 4.3-1.6 10.07 1.14 14a13.4 13.4 0 002.45 2.65 10.51 10.51 0 00-4.79 7c-1.07 5.64 2.79 11.8 8.63 12.67 3.36.51 6.71.94 10.08 1.39 3 .41 6 .47 9 .7 6.46.49 13 .44 19.48.49a179.92 179.92 0 0032.35-2.64 49.64 49.64 0 0011.25-3.23 107.76 107.76 0 0010.39-5.41 132.83 132.83 0 0014.47-9.65l8.53-6.53c2.18-1.67 4.2-3.56 6.28-5.35 5-4.31 9.71-8.86 14.45-13.44a152 152 0 0011.29-12.89 131.37 131.37 0 0010.63-15.62 25.63 25.63 0 002.28-5.1c1-2.83 1.88-5.74 1.56-8.8a44.9 44.9 0 00-1.43-7c-.25-.51-.49-1-.74-1.53a16 16 0 00-2.66-4.51 26.44 26.44 0 00-10.95-8.32c-5-2.06-10.09-2.32-15.46-2.53h-1a54.39 54.39 0 00-11.13 1.57zm16.55 20.92c0 .43 0 .85-.06 1.27l.06-1.27zm-1.79 5.38c-1 1.85-2 3.66-3.1 5.47a135 135 0 01-8.78 11.69c-1.67 1.95-3.29 4-5.09 5.82l-7.09 7.24c-3.13 2.85-6.25 5.72-9.57 8.35-7.88 6.26-15.79 12.34-24.6 17.27a46.6 46.6 0 01-7.5 3c-1.53.46-3.12.77-4.69 1.11l2-.44a206.32 206.32 0 01-21.3 2.72c-7.53.55-15.05.47-22.59.41l-6-.4a15 15 0 001.22-.87c1.18-.93 2.34-1.88 3.5-2.84 2.23-1.85 4.56-3.6 6.86-5.36 4.45-3.39 8.93-6.77 13.43-10.09 4.95-3.64 9.94-7.13 15.21-10.31 4.92-3 10-5.73 15-8.48 17.52-9.09 35.24-18.62 54.46-23.39a52.23 52.23 0 018.56-.91zm2.58.39a9.25 9.25 0 01.61 1.17l-.62-1.17z')
+    path.cls-2(d='M375 1431.59c-9.42 3-18.58 6.92-27.76 10.57-8.44 3.36-16.8 6.95-25.15 10.53l-12.62 5.45c-3.65 1.58-7.35 3.09-10.89 4.9-8.43 4.31-16.67 9-25 13.46a90.31 90.31 0 01-11.47 4.83c-2.28.77-4.56 1.56-6.84 2.35-3.85 1.34-7.87 2.3-11.21 4.76a13.53 13.53 0 00-5.42 8.4 13.29 13.29 0 004.44 12.57c3.25 3.16 7.41 4.1 11.74 4.48 3.17.28 6.37.32 9.55.33h14.8c2.45 0 4.91 0 7.38-.07a132.1 132.1 0 0020.16-2.78 119.68 119.68 0 0018.81-4.94c2.76-1 5.49-2.19 8.12-3.47 2.84-1.39 5.67-2.77 8.48-4.21 2.07-1.07 4.21-2.14 6.25-3.3a34 34 0 007.52-6 14.39 14.39 0 003.19-6.67 14.91 14.91 0 00.25-2.49l1.91-.83c5-2.14 7.89-7.48 5.94-12.79a9.61 9.61 0 00-2.36-3.66q4.55-2.31 9.16-4.49c1.54-.72 3.1-1.42 4.66-2.11 1-.44 2-.91 3-1.39 1.39-.71 2.75-1.43 4.11-2.2 1.88-1 3-3.12 4.06-4.87 2.1-3.57 1.29-8.69-1-11.93a11.72 11.72 0 00-9.74-5 13 13 0 00-4.06.65zm-122.1-254.73c-4.7 1.26-8.21 3.94-11.57 7.34a26.81 26.81 0 00-3.67 5.68c-1.43 2.51-2.07 5.49-2.94 8.21-2.19 6.83-2.72 14.3-3.19 21.41a207 207 0 00-.1 27.62 177.8 177.8 0 003.44 23.65c1.15 5.63 2.2 11.3 3.55 16.88 2.17 8.94 4.29 17.89 6.84 26.73a237.28 237.28 0 008.47 24.74c1.66 4.07 3.53 8.05 5.35 12.06 2.82 6.23 5.67 12.81 11 17.33a15.38 15.38 0 0023.79-5.07c2.27-3.52 2.33-7.71 2.34-11.73v-.21c2-6 4-12.15 5.42-18.36a173.22 173.22 0 003.5-24.82c.74-9 1-18.11 1.42-27.17.23-5 .52-10 .47-15-.08-9-1.88-17.77-3.9-26.53-1.33-5.77-3-11.5-4.84-17.12s-3.69-11.14-5.85-16.61c-3.29-8.38-7.39-17-14.33-23a28.4 28.4 0 00-8.33-4.9 34.75 34.75 0 00-6.75-1.9 19.61 19.61 0 00-3.3-.28 26 26 0 00-6.79 1zm11.93 28.14zm-1.3 10.4q2 4.74 3.74 9.59a12.57 12.57 0 00-4.48.64c0-.9 0-1.8.08-2.7.16-2.51.36-5 .66-7.53z')
+    path.cls-2(d='M418.23 1264.34a86.06 86.06 0 00-13.49 1.58 184.81 184.81 0 00-24.94 6.44 158.72 158.72 0 00-25.07 11.53c-9.68 5.28-19 11.23-28.23 17.26a112 112 0 00-11.2 8.44q-3.76 3.23-7.37 6.62a33.17 33.17 0 00-6.21 8.19c-2.32 4.18-1.55 9.88 1.09 13.7a11.41 11.41 0 00.06 13c3 4.09 5.91 8.33 9.82 11.64 7 5.91 16.78 7.12 25.55 7.4 13 .41 25.81-1.9 38.49-4.52a153 153 0 0018.56-5.09 59.68 59.68 0 007.91-3.55 95.38 95.38 0 0010.05-5.9c3.19-2.16 6.23-4.56 9.31-6.88 6.34-4.8 12.76-10 18-16a66.39 66.39 0 007.05-10.15c2.24-3.74 3.47-8 4.77-12.11a43.07 43.07 0 001.8-10.14 54.52 54.52 0 00.13-6.76c-.33-1.69-.69-3.39-1.08-5.07a13.54 13.54 0 00-1.36-3.06 24.48 24.48 0 00-3.72-5.82 25 25 0 00-4.78-4.44 40 40 0 00-5.75-3.35 47.71 47.71 0 00-6.31-2.12 24.07 24.07 0 00-5.53-.75c-1.92-.12-3.8-.19-5.7-.19h-1.88zm4.8 28a27.37 27.37 0 012.83.47l.9.41v.59a51.74 51.74 0 01-1.51 7.59 46.68 46.68 0 01-3.18 6.61 63.89 63.89 0 01-6.91 7.9c-7.87 7-16 14-25.23 19.24a116.55 116.55 0 01-25.3 8.41c-9.51 2-19.1 3.41-28.82 3.24a44.4 44.4 0 01-6.47-1c-.72-.29-1.42-.6-2.13-.94l-1-.8c-.8-1-1.59-2.06-2.36-3.1a67.07 67.07 0 009.43-7.27c3.48-3 7.11-5.81 10.87-8.42a344.65 344.65 0 0131-19.7 154.66 154.66 0 0114.4-6.31 137.91 137.91 0 0117.6-5.13 88.3 88.3 0 0115.8-1.78zm4.15 1.41a9.75 9.75 0 01.29 1.3c-.1-.43-.19-.86-.29-1.3zm.43.37a12.9 12.9 0 01.6 1.17l-.6-1.17z')
+    path.cls-2(d='M401.81 1286.68a15.86 15.86 0 00-10.75 5.52l-.75 1.16q-1.67 1.23-3.39 2.37c-2.58.72-5.14 1.47-7.7 2.2a181.46 181.46 0 00-25.78 9.14 97.44 97.44 0 00-9.22 4.84 18.37 18.37 0 00-7.31 7.44 12.41 12.41 0 00-.7 1.78 15.31 15.31 0 00-1 1.37c-1.75.88-3.5 1.8-5.26 2.71-1.5.47-3 1-4.48 1.48-2.17.76-4.28 1.59-6.38 2.5s-5.12 2-6.81 3.38c-2.5 2-4.62 3.83-6 6.77a15.34 15.34 0 00-1.44 8.56 16.31 16.31 0 005.51 10.73 16 16 0 0015.61 2.78 131.93 131.93 0 0016-7.27l2.59-1.29q6.58-2.56 13-5.51 3.15-1.44 6.27-2.94c1.42-.12 2.84-.25 4.26-.4 4.26-.44 8.51-1.09 12.75-1.69q3-.42 5.89-1a59.56 59.56 0 0012.9-4.28c4.29-2 8.4-4.33 12.53-6.57 1.25-.69 2.46-1.46 3.69-2.18a55.14 55.14 0 009.36-7.61 27 27 0 002.72-4 18.85 18.85 0 001.78-6 13.55 13.55 0 00-.59-7.08 17.59 17.59 0 00-4.61-6.73 17.85 17.85 0 00-4-2.85 24.54 24.54 0 00-5.56-2 15.73 15.73 0 00-11.75-5.34h-1.29zm-148.07-94.41a11.12 11.12 0 00-6.16 5.59c-2.17 4.44-.9 9.53-.27 14.2.49 3.56.71 7.17 1 10.74a10 10 0 005 7.78c2 10.32 4 20.64 5.75 31 .54 3.2 1.57 5.87 4.11 8a11.91 11.91 0 008.6 2.76c6.29-.52 11.48-6.32 10.79-12.72-1.07-10-2.62-19.79-4.44-29.62-.59-3.15-1.4-6.29-2.1-9.41-.47-2-.91-4.06-1.5-6.07-.73-2.48-1.45-5-2.18-7.44a38.4 38.4 0 00-3.63-8.58 16.78 16.78 0 00-3.3-4c-1.81-1.54-3.64-2-5.85-2.68a11.13 11.13 0 00-5.85.48z')
+    path.cls-2(d='M423.19 1290.51q-6 .67-12 1.4a10 10 0 00-8.71 7.84c-3.27.64-6.55 1.21-9.84 1.69-6.17.88-12.35 1.71-18.52 2.57a7.68 7.68 0 00-6.93 8.17c.33 3.94 4.07 7.49 8.17 6.93 10.23-1.42 20.48-2.62 30.69-4.22 4.16-.65 8.29-1.42 12.42-2.2 5.4-1 10.84-2 16.2-3.14a17 17 0 003.68-1 10.75 10.75 0 004.28-3.22 9.52 9.52 0 001.66-9.32 9.38 9.38 0 00-7.08-6 26.73 26.73 0 00-4.18-.31 85.56 85.56 0 00-9.85.86zm43.06-356.19a22.09 22.09 0 00-5.06 2.79 15.52 15.52 0 00-3.69 4.07c-4.78 7.15-6.43 15.66-7.89 24a165.71 165.71 0 00-2.09 24.68 169.32 169.32 0 001.49 25.45c1 7.7 2.53 15.31 4 22.94 1.1 5.94 2.41 11.84 3.76 17.72a163.06 163.06 0 005.32 19 73.85 73.85 0 004 9.16 53.41 53.41 0 003.3 5.9 49.5 49.5 0 005.19 6.13 12.63 12.63 0 0019.55-4.17 12.3 12.3 0 00.47-9.8c-2-4.49-4.57-8.7-7-13-.18-.39-.35-.78-.53-1.16a8.89 8.89 0 002.79-.52c1.91-.71 4.18-2.4 4.86-4.42 2.25-6.6 4.1-13.24 5.74-20a108.66 108.66 0 002.63-18.49 210.8 210.8 0 00.09-26 142.22 142.22 0 00-4-24.69c-1.24-5.24-3-10.36-4.63-15.48-.8-2.49-1.74-4.91-2.65-7.36a38.71 38.71 0 00-4-7.94 22.78 22.78 0 00-10-7.93 19.59 19.59 0 00-7.5-1.64 11 11 0 00-4.19.75zm3.69 19.12a9.9 9.9 0 01.87.56l-.87-.56zm-.78.09l.5.16-.5-.16zm-.1.44h.74-.74zm3.93 3.12c1.29 2.94 2.45 5.93 3.52 9a205.52 205.52 0 016.4 21 160.85 160.85 0 012.46 37.18 115.43 115.43 0 01-1.65 13.34c-.42 2.19-.94 4.36-1.43 6.54s-1.09 4.36-1.72 6.52c-3.06-9.86-5.34-20-7.63-30-1.25-6.86-2.36-13.72-2.95-20.67a159.29 159.29 0 01-.37-20 120.1 120.1 0 013.38-22.91z')
+    path.cls-2(d='M484.72 940.89a11.81 11.81 0 00-4.81 7.44 11 11 0 00-.19 2.33 12.11 12.11 0 00-4.48 3.15 14.3 14.3 0 00-2.91 6.17c-.42 3.65-.08 7.19-.12 10.83 0 3.21.09 6.42.25 9.62a9.5 9.5 0 00-5.9 7.15c-1.57 10.24-.38 20.6.42 30.86.23 3.1.47 6.21.71 9.31.19 2.52.63 5 .95 7.56.68 5.37 1.4 10.74 2.2 16.09 0 1-.07 1.93-.11 2.89-.08 1.38-.16 2.75-.25 4.12-.05.89-.09 1.77-.14 2.66a9.88 9.88 0 001.76 4.85 10 10 0 001.46 1.66c.15.74.29 1.48.44 2.23.43 2.18.9 4.35 1.39 6.52a29.62 29.62 0 004 10.09 14.14 14.14 0 005 4.19 11.34 11.34 0 008.3.39c4.55-1.24 7.88-5 9.53-9.28a39.35 39.35 0 002.27-10.76 16.37 16.37 0 005.16-3.58 23.14 23.14 0 005.25-10.38c.47-1.69.83-3.37 1.14-5.11a105.84 105.84 0 001.32-12.94 166.43 166.43 0 00.26-21.42q-.42-5.64-.85-11.29c-.45-5.82-1.26-11.57-2-17.35q-1.44-11.18-3.86-22.17a85.38 85.38 0 00-2.57-9.53c-.53-1.53-1.14-3-1.77-4.48a51.13 51.13 0 00-3.31-6.25 31.87 31.87 0 00-4.19-4.87 11.75 11.75 0 00-5.42-2.6 11.81 11.81 0 00-8.93 1.93z')
+    path.cls-2(d='M472.89 931.1c-3.77 4-4.17 10.56-3.18 15.67a82.81 82.81 0 002.09 8.23c.63 2 1.2 4.1 1.87 6.12a23.12 23.12 0 002.09 4.94c.4 3.83.76 7.66 1.14 11.48a221.18 221.18 0 011.35 25.6v.39c-.05 1.08-.11 2.17-.16 3.25a12.13 12.13 0 009.84 11c6.37 1.2 13.17-3.15 14.21-9.68 1.87-11.69-.11-23.49-1.79-35.08-.73-5-1.38-10-2.3-15q-.84-4.63-1.7-9.27a89.33 89.33 0 00-2.83-11.3c-1.23-3.81-3.8-7.46-7.57-9.08a11.76 11.76 0 00-4.68-1 11.42 11.42 0 00-8.35 3.79zm5.51 69.51v.75-.75z')
+    path.cls-2(d='M474.94 929.94a35.93 35.93 0 00-4.89 2.73c-2.34 1.73-3.59 3.86-5 6.3-.16.46-.33.92-.49 1.39a31.48 31.48 0 00-1.42 4.71c-.43 1.75-.76 3.51-1.05 5.29-.57 3.59-.8 7.24-1.13 10.85a166.39 166.39 0 00-.41 20.71 10.88 10.88 0 002.13 6.09c0 .5 0 1 .05 1.51.08 2 .2 4.08.34 6.12.1 1.41.3 2.81.53 4.21.35 1.63.7 3.24 1.07 4.84a17.94 17.94 0 002.75 6c1 1.2 2 2.36 3.09 3.47a13.74 13.74 0 006.35 3c3.78 1.23 8.6 0 11.82-2.23 6.12-4.29 7.4-11.72 7.91-18.64a245.23 245.23 0 00-.12-30.31c-.23-4.42-.46-8.84-.87-13.25-.15-1.64-.31-3.29-.61-4.9-.24-1.28-.48-2.56-.73-3.83-.72-3.49-1.62-6.47-4-9.26a13.11 13.11 0 00-5.1-4.33 14.68 14.68 0 00-6.12-1.38 9 9 0 00-4.12.88zm95.94 107.75c-8.25 1.19-16.5 2.51-24.78 3.45l-14.21 1.61a71.66 71.66 0 00-11.65 2c-3.18.93-6.32 2-9.47 3.07-6.49 2.17-9.78 9.83-7.49 16.12a12.45 12.45 0 002.77 4.4 13.77 13.77 0 00-6.9 6.65 14.15 14.15 0 003.56 16.68c5 4.5 11.29 7.53 17.28 10.53 4.75 2.38 9.62 4.66 14.54 6.69 14.72 6 30.77 10.27 46.78 10.09 6.28-.07 12.48-.44 18.74-1 16.58-1.4 34.05-3.75 48.23-13.11a48.62 48.62 0 008.86-7.85 24.47 24.47 0 005.65-11.8c.91-4.54.28-8.86-.78-13.27s-3.14-8-5.2-11.91a44.73 44.73 0 00-10.2-12.71 48.47 48.47 0 00-9.49-6.11 51.39 51.39 0 00-6.29-2.6 79.52 79.52 0 00-26.74-4.15c-11.11 0-22.33 1.62-33.21 3.19zm-21.48 28.77c6.39-.59 12.76-1.44 19.14-2.15 11.91-1.34 23.75-2.44 35.72-2.17a87.44 87.44 0 0113.13 2.33 48.68 48.68 0 016.48 3.09c1 .74 1.93 1.52 2.83 2.35a44.91 44.91 0 013.21 5c.45 1 .86 2 1.23 3-.95.69-1.93 1.35-2.94 2a73.1 73.1 0 01-11.6 3.87 249.93 249.93 0 01-26.6 3.14c-4.61.37-9.22.54-13.84.46a130.75 130.75 0 01-21.45-4.19c-5.88-2.11-11.58-4.6-17.33-7-3.27-1.39-6.51-2.89-9.75-4.35-1.33-.6-2.71-1.2-4.12-1.76 1.47-.48 2.93-1 4.41-1.39 7.07-1.22 14.36-1.55 21.48-2.2zm83.29 10.18v.06-.06z')
+    path.cls-2(d='M537.45 1055.76c-4.45.4-8.88 1-13.34 1.32-2.16.16-4.32.26-6.49.41-2.37.17-4.69.58-7 .84a14.79 14.79 0 00-8.36 26c3.18 2.7 6.72 3.45 10.78 3.46a30 30 0 007.13-1.13 35.23 35.23 0 014.82-.57c2.27-.11 4.54-.2 6.79-.48 5.28-.66 10.54-1.4 15.83-1.84h.72a16.75 16.75 0 00-.77 6.53 13.16 13.16 0 002.34 6.51c1.85 2.63 5.11 5.07 8.4 5.42a48.06 48.06 0 0015.46-.7c4.52-1 9-2 13.47-3.22 3.78-1.09 7.52-2.25 11.27-3.46l1.67-.56c.29-.08.59-.16.88-.27 2.26-.77 4.5-1.56 6.72-2.41 1.42-.54 2.77-1.19 4.18-1.75a14.24 14.24 0 001.48-.71c1.06 0 2.11 0 3.17.05 1.5.12 3 .24 4.5.38a56.16 56.16 0 007.78.27l1.22-.14c1.77-.35 3.55-.73 5.32-1.13a16.77 16.77 0 005.4-2.89c2.68-2.27 4.65-4.66 5.32-8.23.58-3.07.07-7.43-2.13-9.87-1-1.07-1.93-2.14-2.92-3.21a16.87 16.87 0 00-5.07-3c-3.37-1.28-6.68-1.61-10.21-2.08-4.26-.55-8.59-.72-12.89-1l-15.66-.84c-10.16-.56-20.29-1.46-30.46-1.84-5.24-.2-10.47-.39-15.7-.39-4.53 0-9.07.14-13.61.54zm25.23-245.88c-5 1.74-8.52 5.33-11.14 9.86a54.69 54.69 0 00-4.43 11.07c-2.58 8.08-3.62 16.72-4.36 25.12a255.47 255.47 0 00-.38 40.37c.49 6.88 1.49 13.62 2.53 20.43 1.24 8.18 2.55 16.37 4.22 24.48 2 9.83 4 19.68 6.51 29.42 1.1 4.37 2.27 8.7 3.64 13a36.27 36.27 0 002.09 4.93c.91 1.84 1.86 3.65 2.91 5.41a16.26 16.26 0 0010.76 7.19 15.28 15.28 0 008-.66 17 17 0 004.34-2.42 13.18 13.18 0 003.61 1.24 13.91 13.91 0 0016.06-10.93q1.17-5.58 2.36-11.17c1.1-5.19 2.39-10.35 3.2-15.6a177.42 177.42 0 001.77-24.7 195.74 195.74 0 00-1.62-26.17c-1.94-16.27-6.17-32.21-10.53-48q-2.09-7.54-4.42-15c-1.65-5.28-3.28-10.61-5.44-15.7a114.93 114.93 0 00-5.47-11.21c-3.75-6.7-11.11-11.9-18.8-11.91a16.51 16.51 0 00-5.45.92zm13.49 103.23c-1-5.77-1.86-11.47-2.47-17.29a237 237 0 01-1-32.41c.44 1.52.89 3 1.34 4.54 3.09 10.41 5.77 20.87 8.36 31.4a207.07 207.07 0 014.12 47.31c-.24 3.43-.6 6.84-1.06 10.25-1.8-7-3.47-14-5.08-21-1.5-7.59-2.95-15.17-4.24-22.8z')
+    path.cls-2(d='M579.76 871.07c-6.78.56-12.41 6.84-11.65 13.75.06.57.12 1.13.19 1.69a12.81 12.81 0 00-.8 1.34 23.56 23.56 0 00-2.46 8.69 98 98 0 00-.24 10.7c0 3.1.07 6.19.11 9.29s.09 5.9.16 8.84q-.51 3.36-1 6.7a12.13 12.13 0 001.43 7.79q.15 3.63.4 7.25c.17 2.51.32 5 .56 7.51.49 5.07.86 10 2.84 14.82a13 13 0 006.38 7c2.82 1.35 6.83 1.84 9.77.47 3.5-1.64 6.92-3.55 8.57-7.31a21.95 21.95 0 002.13-10.52c.38-5.07.77-10.16.78-15.25v-11.16c0-5.1-.15-10.23-.38-15.32-.27-6-.58-12.08-1-18.1-.18-2.61-.51-5.19-.88-7.77-.3-2.93-.62-5.88-1.2-8.76-.24-1.12-.48-2.23-.73-3.34a12.68 12.68 0 00-3.72-5.34 12.81 12.81 0 00-8.27-3h-1zm12 87.5l.4.77a8 8 0 01-.4-.77z')
+    path.cls-2(d='M672.25 936.24a103.07 103.07 0 00-11.65.6 121.72 121.72 0 00-14.25 2.83c-6.68 1.7-13.14 4.57-19.45 7.31-5.16 2.23-10.75 5.28-13.88 10-2.17.24-4.33.45-6.51.54a12 12 0 00-13.29 12.57 11.79 11.79 0 00-3.58 1.65 10.63 10.63 0 00-2.64 14.79c1.72 2.47 4 3.5 6.72 4.35 4 1.25 8.08 2.52 12.12 3.79q14.36 4.76 28.51 10.06c2.31.87 4.6 1.8 6.9 2.69a86.39 86.39 0 0016.67 4.82c7.19 1.24 14.63 1.45 21.92 1.89a99.33 99.33 0 0018.33-.19c6.12-.76 12.41-1.87 18.1-4.33a87.19 87.19 0 009.52-4.89 38.82 38.82 0 007.36-6.05c1.69-1.66 2.81-4 4-6a19.35 19.35 0 001.28-3.21q.88-2.45 1.56-5a35.4 35.4 0 00.84-5 50.23 50.23 0 00.54-7.82 42.17 42.17 0 00-2.37-12.21 29.33 29.33 0 00-7.62-11.25 33.32 33.32 0 00-11.36-6.9c-11.21-4.07-23.22-4.42-35-4.81-3.5-.12-7-.25-10.52-.25h-2.17zm21.26 29a87.2 87.2 0 0116.09 2.25c.78.32 1.54.66 2.29 1l1 .85.18.26c.33.79.61 1.58.87 2.39s.17 1.9.2 2.87a44.14 44.14 0 01-1 6c-.08.18-.17.35-.25.53l-.07.08a44.18 44.18 0 01-5.34 3.55 59.73 59.73 0 01-8.35 3 86.5 86.5 0 01-14.13 1.66c-5.42.15-10.82 0-16.23-.22a85 85 0 01-17.28-2.75c-2.44-.69-4.86-1.45-7.28-2.19l-9.92-3a13.62 13.62 0 006.52-7.93c2.08-.75 4.12-1.69 6.15-2.52a102.42 102.42 0 0113.57-4.54c10.91-1.72 22-1.73 33-1.3zM714 979.9l-.38.58.38-.58z')
+    path.cls-2(d='M618.23 954.53a9.13 9.13 0 00-3.72 5.75 8.43 8.43 0 00-.16 1.8 13.46 13.46 0 00-7.4 17c1.13 3.09 3.7 6.28 6.83 7.52a43.76 43.76 0 004.75 1.66c1.86.17 3.73.29 5.6.35 2.65-.09 5.26-.32 7.88-.67s5.38-1 8-1.56c1.41-.3 2.81-.61 4.2-.94 1.92.06 3.84.08 5.77 0h.8a12.34 12.34 0 009.09 7.16c9.38 1.4 18.91.63 28.34.24 5.5-.23 11-.81 16.48-1.32 8.66-.82 17.79-1.48 25.79-5.1 4.83-2.18 8.6-6 9.28-11.51a16.83 16.83 0 00-.88-7.93 14.23 14.23 0 00-4.77-6.3c-3.21-2.72-7.48-3.63-11.48-4.44a86.4 86.4 0 00-14.63-1.21c-9.72-.3-19.46.45-29.18 1q-6.47.36-12.92.8a13.35 13.35 0 00-7.16-3.9l-3.57-.18a13.25 13.25 0 00-6.55 2.35c-.26.16-.52.32-.79.47a57 57 0 01-6.91 2.57q-7.9-2.61-15.83-5.15a5.33 5.33 0 00-1.66-.24 9.76 9.76 0 00-5.25 1.73z')
+    path.cls-2(d='M589.18 874.38a12.37 12.37 0 00-7.29 15.72c2.3 6 4.63 12 7 18 4.22 11 8.48 22 11.29 33.47a68.32 68.32 0 011.13 12.51 44.11 44.11 0 01-1 5.73l-.28.66c-1.49-.31-3-.67-4.46-1-1.72-.39-3.46-.74-5.18-1.16-5-1.23-10-2.45-15-3.7-7.24-1.81-14.67 3.9-16 10.9a13.84 13.84 0 002.24 10.4 14.32 14.32 0 008.67 5.6c7.47 1.87 14.95 3.73 22.46 5.45l2.38.56a35.84 35.84 0 009 .74c5.81-.11 11.63-3.38 15.43-7.66a35.19 35.19 0 007.39-13.86 55.15 55.15 0 001.84-15.84c0-9.55-2.93-19-5.83-28a192.21 192.21 0 00-7.79-19.47c-3.27-7.34-6.56-14.64-10.2-21.81-.5-.93-1-1.86-1.47-2.81a12.29 12.29 0 00-14.25-4.48zM600.63 960l-.32.48.32-.48zm.41.43l-.27.27.3-.27z')
+    path.cls-2(d='M562.76 852.45a14.84 14.84 0 00-5.82 9.29 23.37 23.37 0 00.38 8.77c.79 4 1.78 7.86 2.71 11.79.1.62.2 1.25.29 1.87l-.51 1.33a12.49 12.49 0 00-.45 9.19 11.84 11.84 0 0015.19 7 11.51 11.51 0 006.6-6c.1-.24.2-.49.29-.74s.43-.27.64-.42c3.13-2.2 4.67-5.17 5.66-8.76.83-3 .18-7-1-9.84l-.07-.17a40.08 40.08 0 00.16-7c-.46-6.87-4.36-13.85-10.42-17.22a12.85 12.85 0 00-6.17-1.49 12.22 12.22 0 00-7.49 2.36zm-445.21 861.92a12.57 12.57 0 00-1.65 2.5c-.17.18-.34.36-.49.54-1.83 2.15-3.38 5.75-2.78 8.64.45 2.2.66 4.37 2.16 6.18.53.63 1 1.22 1.61 1.82q1.56 1.73 3.14 3.43c1.56 1.72 3.12 3.45 4.6 5.26.61.75 1.23 1.51 1.84 2.28.86 1.71 1.83 3.37 2.74 5 .44.8.92 1.57 1.4 2.35s1 1.57 1.57 2.33l.28.36a11.4 11.4 0 004.36 9.08 47.27 47.27 0 013.86 3.15c.73 1 1.39 2 2.06 3 .41.6.81 1.2 1.24 1.77a16.23 16.23 0 003.62 4l2.63 1.71a12.25 12.25 0 0016.38-5.77c.38-1.06.74-2.14 1.07-3.22a12.44 12.44 0 00-.54-6.54 29 29 0 00-2.59-5.28c-.86-1.55-1.87-3-2.84-4.5-2.07-3.16-4.16-6.3-6.23-9.46q-3.7-5.67-7.45-11.3c-1.45-2.18-3-4.32-4.49-6.48a17.17 17.17 0 00-1.2-4.26 23.35 23.35 0 00-4.86-7.11 12.43 12.43 0 00-7.5-3.68 15.06 15.06 0 00-2.21-.17 12.54 12.54 0 00-9.73 4.4zm34.87 234.92a39.45 39.45 0 00-7.2 1.31 17.93 17.93 0 00-8.52 27.08c2.49 3.54 6.91 6.86 11.34 7.32a81.37 81.37 0 0010.93.18c1.75 0 3.51-.09 5.27-.09a71.88 71.88 0 0111.42 2.44 76.41 76.41 0 0111.91 5.2 76.71 76.71 0 019.18 7.11 45.35 45.35 0 013.41 5.25 71.11 71.11 0 012.86 7c2.67 7.74 11.7 11.71 19.28 9a15.22 15.22 0 008.95-19.28 95.87 95.87 0 00-6.49-14.31c-.81-1.5-1.65-3-2.57-4.43a51.65 51.65 0 00-5.74-6.86c-5.24-5.63-10.69-11-17.37-14.88-3-1.75-6-3.39-9.16-4.88a92.48 92.48 0 00-14.23-5 52.23 52.23 0 00-11.31-1.76c-3-.18-5.94-.36-8.91-.36h-3.05z')
+    path.cls-2(d='M131.72 1966.23a14 14 0 00-5.67 8.77c-.64 3.41 0 7.75 2.27 10.51 6.07 7.41 11.93 14.88 17.48 22.68a138.93 138.93 0 008.85 10.81c3.82 4.41 7.86 8.68 12.08 12.71 3.18 3 6.36 6 9.58 9 1.75 1.64 3.52 3.28 5.42 4.74a91 91 0 008.86 5.78c3.42 2 7.06 3.71 10.52 5.69a31.29 31.29 0 004.84 2.43c1.85.66 3.71 1.29 5.61 1.82a32.87 32.87 0 006.42.46 33.21 33.21 0 007.94-1.43 17.55 17.55 0 0011.44-17.89c-.76-9.23-9.41-17.21-18.9-16l-.71.09c-2.19-1-4.33-2.2-6.53-3.18a96.58 96.58 0 01-9-4.41c-2.44-1.75-4.79-3.64-7.13-5.52-3-2.41-6.08-4.71-9.1-7.08s-5.91-5.08-8.82-7.68c-2.67-2.38-5.33-4.78-7.8-7.36-6.28-7-12.35-14.24-18.34-21.5-2.36-2.87-5-5-8.76-5.66a13.92 13.92 0 00-10.52 2.25z')
+    path.cls-2(d='M150.88 1976.21c-1.58 1.9-3.35 4.79-3.6 7.34a18.7 18.7 0 00.65 8.48c.84 3.34 3.49 6.3 5.9 8.59a14.4 14.4 0 0011.39 3.53c2 1.19 4 2.45 5.91 3.71 4.55 3.09 9.06 6.22 13.52 9.43 1.93 1.4 3.84 2.81 5.73 4.28l1.12.87c.6.86 1.18 1.74 1.73 2.64.73 1.76 1.34 3.55 1.94 5.37 2.13 6.38 9.67 9.6 15.84 7.35a12.11 12.11 0 007.19-7.14l.15-.1a15 15 0 004.91-5.79l1.21-3.7a15 15 0 00-.65-7.94c-1-4.44-4.89-7.8-8.09-10.74-.95-.86-2-1.65-2.95-2.48-1.93-1.62-3.82-3.27-5.83-4.79-5.1-3.85-10.21-7.6-15.43-11.28a149.6 149.6 0 00-15.85-9.81 33.84 33.84 0 00-9-3.14 16.12 16.12 0 00-3.19-.31 16.58 16.58 0 00-12.61 5.63zm-52.23-56.39c-.9 2.7-1.88 5.36-3 8a63.87 63.87 0 01-3 6.79l-.65 1.18a11.47 11.47 0 009.53-6.46 11.93 11.93 0 00-2-12.95c-.25 1.16-.65 2.29-1 3.44zm-31.75 12.33c.6 1.33 1.42 2.63 2.06 3.81a9.65 9.65 0 003.5 3.45c-.13-.24-.26-.5-.38-.76a7 7 0 01-2.69-3.64c-.38-1.32-.68-2.65-.93-4l-1.56 1.12zm240.22 153.69a41.06 41.06 0 00-2.06 6.24 45.71 45.71 0 00-2.33 6.6 27.68 27.68 0 00-1.36 5.72c-1.2 2.5-2.48 5-3.76 7.43-1.66 3.16-3.43 6.3-5.26 9.37-2.23 3.71-2.07 9.19-.64 13.11a16.9 16.9 0 0021.68 10.06 17.59 17.59 0 009.44-8.56c2.24-4.08 4.29-8.26 6.32-12.44a111.68 111.68 0 004.5-10.42c2.69-7.41 5.28-17.15-.64-23.85q-.21-.3-.42-.57a13.6 13.6 0 00-10.69-10.17 12.94 12.94 0 00-2.41-.22c-5.11 0-10.31 2.9-12.37 7.7z')
+    path.cls-8(d='M127.9 1893.17a33.8 33.8 0 00-13.3 3.17 42.14 42.14 0 00-11.44 8.14 63.13 63.13 0 00-6.89 7.36A45.09 45.09 0 0090.2 1922a112 112 0 00-4.27 12.9 200 200 0 00-7 37.24 256.94 256.94 0 00-1 33.29c0 .92.07 1.85.11 2.76a42.16 42.16 0 001.2 7.75 23.47 23.47 0 007 11.87 16.71 16.71 0 0012.49 4.38 18.7 18.7 0 0012.24-6.41 50 50 0 006.85-10.91c2.36-4.9 4.06-10.18 5.93-15.28q1.89-5.17 3.75-10.35 4.11-2.44 8.21-4.92c2-1.21 4-2.48 5.94-3.79a69.87 69.87 0 0011.55-9.89 31.89 31.89 0 003.08-3.89 45.78 45.78 0 003.32-5.49 42.19 42.19 0 002.18-6.42 80.37 80.37 0 002.88-13.49c.75-5.78 1.18-11.64.22-17.42a35.22 35.22 0 00-8-17.6 38.65 38.65 0 00-15.92-11 50.47 50.47 0 00-6.49-2 17.17 17.17 0 00-3.67-.32c-1 0-1.91 0-2.82.05zm2.32 26c.53.09 1.05.21 1.58.34a32.36 32.36 0 014 1.89c.69.52 1.35 1.07 2 1.65s1 1.37 1.48 2.09a27.32 27.32 0 011 2.62 42.88 42.88 0 01.43 6.41 87.38 87.38 0 01-2.48 14.44c0-.9 0-1.8-.05-2.69a14.5 14.5 0 00-5.15-10c-1.05-.69-2.11-1.38-3.16-2.05a14.45 14.45 0 00-7.57-1.4 15.68 15.68 0 00-8 2 2.76 2.76 0 00.08-.27 38.24 38.24 0 012.33-5 59 59 0 016.21-7.1c.8-.64 1.61-1.22 2.47-1.78.7-.29 1.41-.56 2.13-.8.9-.12 1.8-.22 2.71-.28z')
+    path.cls-8(d='M41.93 1931.62a50.23 50.23 0 00-9.27 1.23c-3.31.64-6.63 1.22-9.67 2.73-1.56.78-3.08 1.64-4.6 2.48-2.62 1.22-5.24 2.4-7.78 3.83l-.9.81a10.88 10.88 0 00-3.64 3.84 24.77 24.77 0 00-3.95 8.31c-1.23 4.47-.55 8.88.53 13.25v.21a36.42 36.42 0 001.64 6.7c.54 1.39 1.21 2.69 1.87 4v.1a63.6 63.6 0 005.26 9.7 80.15 80.15 0 0013.18 15.52 115 115 0 0014 10.66 118.29 118.29 0 0015.4 8.16 54.94 54.94 0 008.55 2.93l1.16.09a15.59 15.59 0 008.23-.68c3.1-1.13 4.92-3 7.25-5.23l2.16-3.33a15.58 15.58 0 001.48-8v-.88a11.57 11.57 0 0010.33-4 56.78 56.78 0 007.47-11.41c2.35-5 3-10.44 3.16-15.85a48.73 48.73 0 00-1.72-13.47 41.59 41.59 0 00-5.22-11.47c-3.61-5.95-9.78-10-15.69-13.37a49.13 49.13 0 00-15.62-5.26 121.49 121.49 0 00-21.48-1.6zm32.62 48.78a15.34 15.34 0 00-.66-8.06 40.91 40.91 0 00-2.78-5.73 37.46 37.46 0 00-4.22-5.88l1.11.27a49.19 49.19 0 016.4 3.13c.68.51 1.33 1 2 1.61a29.43 29.43 0 011.85 2.71 38 38 0 011.54 4.26 38 38 0 01.42 5.13 31.18 31.18 0 01-.7 4.29 32.47 32.47 0 01-1.62 3.23q-1.27 1.77-2.65 3.46a10.16 10.16 0 00-.69.93 29.48 29.48 0 00-1.5-3.63 16.8 16.8 0 001.5-5.73zm-33.9 35.91l-.77-.51.77.51zm-.77-.51c-.41-.26-.81-.53-1.21-.8l-1.33-.84 2.54 1.64z')
+    path.cls-8(d='M120.27 1908c-3.58 4.33-6.06 9.64-8.72 14.56-2.18 4-4.35 8.1-6.76 12a114.86 114.86 0 01-10.23 12.62q-5.24 5.71-10.47 11.4c-3.85 4.16-3 11.11 1.21 14.67a10.55 10.55 0 0014.66-1.21c6.67-7.2 13.5-14.31 19.49-22.1a79.44 79.44 0 005.1-7.65 12.07 12.07 0 002.49-.61c3.07-1.13 5-3.24 6.58-6a61.93 61.93 0 004.7-9.74c1.41-3.82 2.71-7.44 1.93-11.55a11.27 11.27 0 00-2-5.59 11.43 11.43 0 00-4.4-3.73 11.46 11.46 0 00-13.57 2.9zm-37.45 92.29c-3 1.09-6.48 3.73-7.55 6.86-1.26 3.69-2.54 7.4-3.75 11.11.36-1.11.72-2.21 1.09-3.33q-3.52 10.71-7 21.43c-1.85 5.66-3.31 11.46-4.93 17.18-3 10.39-4.58 21.09-6.24 31.74-.89 5.7-1.36 11.49-1.93 17.23-.72 7.19-1.32 14.33 1.35 21.21a37.54 37.54 0 003.23 5.92 26.69 26.69 0 004.06 4.79c3.56 3.25 7.84 5 12.47 6s9.49.09 13.82-1.4a31.39 31.39 0 006.42-3.47 37.73 37.73 0 005.55-4.81 61.58 61.58 0 0013.19-20.36c5.43-13.23 7.64-27.59 8.52-41.78q.66-10.38 1.11-20.76c.1-2.48.06-5 .07-7.45s-.27-5.16-.51-7.7a17.59 17.59 0 00-7.51-12.84c-1.06-.7-2.13-1.39-3.2-2.08a14.78 14.78 0 00-7.66-1.41 14.57 14.57 0 00-3.13.6c.16-.5.33-1 .49-1.5a13.55 13.55 0 00-17.93-15.22z')
+    path.cls-8(d='M107 1994.15a20.48 20.48 0 00-5 2.23c-.42.1-.85.19-1.27.3a31.91 31.91 0 00-6.45 3.43c-2 1.47-5.27 4.84-6.14 7.29-.12.31-.23.63-.34.94a16.57 16.57 0 00-1.58 8.58 19.35 19.35 0 003.5 10.52l.24.34a17 17 0 005.38 9.44c4.41 4.33 8.8 8.71 13.12 13.15 6.47 6.68 12.86 13.43 20 19.42a127.14 127.14 0 0037.16 21.21 136.8 136.8 0 0015.69 5.11 46.75 46.75 0 0012.14 1.09c4.92-.11 9.86-2.33 13.87-5 7.29-4.85 10.42-13.25 12.67-21.26.71-2.5.47-5.24.49-7.82-.12-.6-.23-1.2-.35-1.8a15.13 15.13 0 00-1.59-5.87c-2.37-5.34-6-9.29-10-13.44a59.64 59.64 0 00-8.05-6.46c-3.83-2.76-7.79-5.31-11.79-7.82-3.28-2.06-6.63-4-10-5.81-1.34-1.56-2.83-3-4.24-4.47a53.84 53.84 0 00-8.65-6.74 139 139 0 00-12-7.25c-4.27-2.31-8.77-4.14-13.21-6a58.15 58.15 0 00-22.55-5.13h-.12a39.15 39.15 0 00-10.92 1.82zm66.18 63.85l1.65 1c.85.57 1.7 1.14 2.54 1.73-1.91-.7-3.81-1.42-5.69-2.18.52-.17 1-.36 1.5-.56z')
+    path.cls-9(d='M96.16 1983.46a31.37 31.37 0 00-13.57 8.17 27.31 27.31 0 00-7.87 15.4 16.05 16.05 0 002.53 11.75 15.51 15.51 0 005.22 4.68 22.26 22.26 0 006.16 10.17 24.77 24.77 0 005.59 3.7 11 11 0 004.46 1.27 30.43 30.43 0 003.07 1 15.8 15.8 0 006 .37c3.14-.29 5.4-1.62 8-3.16 2.14-1.24 4.45-4.38 5.57-6.49.19-.35.36-.71.53-1.06a46.69 46.69 0 003.86-5.83 19.2 19.2 0 001.71-3.71 39.71 39.71 0 002-7.24 26.12 26.12 0 00-1.76-15c-2.65-5.93-7.33-10.14-13.12-12.94a27.39 27.39 0 00-10.74-2.23 27.64 27.64 0 00-7.68 1.11z')
+    path.cls-8(d='M112.64 1497c-2 .75-5.69 3.06-6.94 4.94-1.37 2-2.66 4.07-3.81 6.19a49 49 0 00-6.71 5.71 64.87 64.87 0 00-12.39 17.51 62.37 62.37 0 00-3.11 7.84 81.3 81.3 0 00-3.1 11.19 49.88 49.88 0 00-.58 11.71 27.56 27.56 0 001.27 6.61 43.12 43.12 0 002.8 5.81c1.12 1.23 2.24 2.45 3.35 3.68a20 20 0 005.54 3.18 57.19 57.19 0 006.44 1.92 31.79 31.79 0 007.49.47 25.77 25.77 0 006.33-1.53 42 42 0 005.75-2.83l1.41-1.15a35.19 35.19 0 004-3.88 36.39 36.39 0 003.77-5.54c4.12-6.87 6.7-14.71 8.69-22.44 1.94-7.55 2.36-15.63 2.26-23.39q0-3.81-.18-7.62c-.35-8.44-4.92-18.23-14.49-19a15.34 15.34 0 00-2.76-.26 14.84 14.84 0 00-5.06.9z')
+    path.cls-8(d='M89.42 1487.61c-5 1.72-10 3.37-15.1 4.77-6.77 1.34-13.58 2.53-20.23 4.42a53.66 53.66 0 00-18.09 9.4 58.79 58.79 0 00-14.58 17 32.19 32.19 0 00-3.3 9.32 29.5 29.5 0 00-.29 6q0 1 .06 2.07a53.22 53.22 0 001.58 9.22c.86 4 2.12 8 4.89 11a21.47 21.47 0 006.33 5.36 10.89 10.89 0 002.48 1.19 22.91 22.91 0 005.55 1.49 28.58 28.58 0 006.06.06c11.76-1.28 20.81-9.67 29.69-16.65 3.8-3 7.59-6 11.34-9a142.43 142.43 0 0011.13-10 52 52 0 007.19-9.24 31.25 31.25 0 003.62-9.31 11.61 11.61 0 00-.41-6.79 15.2 15.2 0 00.69-11.66 14.53 14.53 0 00-13.75-9.46 15 15 0 00-4.87.82zM66.65 1524c-2.37 1.81-4.77 3.59-7.16 5.37-4 3-8 6-12.23 8.65v-.32q.43-.95.93-1.86a47.58 47.58 0 014.47-5.14 46.69 46.69 0 015.28-3.69 58.85 58.85 0 018.73-3z')
+    path.cls-8(d='M72.87 1491.38l-2.51 1.32a10.78 10.78 0 00-3.59 4.22l-.2.32a36 36 0 01-4.19 4.7c-2.63 2.3-5.33 4.53-8 6.82s-5.34 4.73-8 7c-2.11 1.83-3.67 3.68-4.21 6.52a10.31 10.31 0 008.2 12 10.81 10.81 0 007.82-1.68 84.41 84.41 0 009.82-7.09c2.24-1.84 4.48-3.67 6.69-5.54s4.56-4.08 6.67-6.29 3.54-4.88 5.13-7.38 1.31-6 .4-8.49a10.95 10.95 0 00-14-6.51z')
+    path.cls-8(d='M79.72 1399.16a26.15 26.15 0 00-9.65 2.58c-1.93.93-3.8 2-5.69 3s-3.57 2.9-5.23 4.46a22.28 22.28 0 00-3.9 5.61l-.45 1.34a15.46 15.46 0 00-1.48 8 39.35 39.35 0 002.08 10.22c3.19 10.23 7.68 20 12 29.79a198.57 198.57 0 009.47 19c1.24 2.15 2.76 4.2 4.15 6.27q2.74 4.1 5.51 8.15c4.52 6.71 14.14 8.24 20.68 3.66a14.77 14.77 0 006.25-12.21 15.65 15.65 0 003.36-1.77c3-2.15 5.93-6 6.34-9.82a62.24 62.24 0 00.15-12.28 75.52 75.52 0 00-2-10.94c-1.58-6.4-3.42-12.65-5.6-18.88a97.57 97.57 0 00-10.6-22c-5.2-7.8-14.22-14.25-23.87-14.25-.49 0-1 0-1.47.05z')
+    path.cls-8(d='M137.63 1409.37a28.86 28.86 0 00-5.77 2.77 17.17 17.17 0 00-2.86 2.16 58.92 58.92 0 00-6.93 6.75 96 96 0 00-6.53 9.44c-1.27 2-2.42 4-3.6 6.06a59.84 59.84 0 00-6.34 17.2c-.58 2.57-.76 5.27-1.1 7.89s-.58 5.36-.83 8c-.06.65-.13 1.3-.2 2a10.9 10.9 0 00-1 .6 12.13 12.13 0 00-2.9 16.76c1.07 1.57 2.05 3.29 3.22 4.79a12.92 12.92 0 002.37 2.52 17.59 17.59 0 001.29 6.25c1.06 2.37 2.54 5.15 4.72 6.76a16.06 16.06 0 007 3.37 14.65 14.65 0 007.65-.63 14.48 14.48 0 002-.93 26 26 0 006.89-3.76 79.26 79.26 0 008.69-8.5c1.67-1.83 3.27-3.73 4.87-5.61a126 126 0 0011.73-16.18 75 75 0 008.87-23.13 70.53 70.53 0 001.13-13.84 36.5 36.5 0 00-.55-5.8 67.3 67.3 0 00-2.34-9.81c-2.57-8.26-10.46-15.24-19.24-15.93-1.53-.12-2.74-.2-3.85-.2a22 22 0 00-6.36 1z')
+    path.cls-8(d='M127.41 1486.85a12.7 12.7 0 00-8.89 4.57 13.08 13.08 0 001.51 18.41 12.08 12.08 0 003.8 2.21 18.64 18.64 0 00.76 7.59 28.91 28.91 0 001.86 5 42.72 42.72 0 005.66 9.4c3.33 4 6.92 7.81 10.48 11.64a81.58 81.58 0 009.26 8.46 75.38 75.38 0 009.22 6 47.21 47.21 0 009.85 3.86c2.66.82 5.57.69 8.31.77a34.56 34.56 0 005.25-1 22.36 22.36 0 006-3.38 14.64 14.64 0 004.82-5.68 23.92 23.92 0 001.53-4.38 28.43 28.43 0 00.32-4.79 66.67 66.67 0 00-1.48-6.55 56.85 56.85 0 00-3.21-7.4 83 83 0 00-10.07-16.22 84.81 84.81 0 00-28-23.25 54.45 54.45 0 00-15.29-5 37.37 37.37 0 00-6.19-.43c-1.86 0-3.73.07-5.56.09zm243.67 81.25c-6.9.21-13.71 3.42-19.39 7.19a53.44 53.44 0 00-6.72 5.86c-2.1 2-4 4.13-6 6.31a48.39 48.39 0 00-9.1 15.5 49.94 49.94 0 00-2.15 8 43.29 43.29 0 00-.35 9.52 73.51 73.51 0 001.58 9.78 97.2 97.2 0 003.66 14.58 26.56 26.56 0 009.62 12.7 11.36 11.36 0 007.88 2.53 11 11 0 004.31-1.3c2.86.92 5.62 0 8.38-.65a12.63 12.63 0 003.94-2.21 19.23 19.23 0 005.44-6.48 56.22 56.22 0 002.6-5.56c1.61-3.78 3.21-7.58 4.82-11.37 1.75-4.1 3.46-8.21 5.16-12.31a112.58 112.58 0 006.59-20.55 58.21 58.21 0 00.8-10.54 11.89 11.89 0 00-.43-3.14 22.74 22.74 0 00-3-8.25 19.94 19.94 0 00-17.07-9.66zm-6.57 22.61l.33.32-.32-.35zm8.78 4.28l-1.33-.07a12 12 0 011.33.07z')
+    path.cls-8(d='M395.52 1618.33a63.23 63.23 0 00-8 1.75 47.35 47.35 0 00-7.55 2.75 61.46 61.46 0 00-12.92 8.06c-5.31 4.18-9.89 9.26-15.51 13l-1.31.56c-5.38 2.24-8.45 8.07-6.38 13.75a10.47 10.47 0 001.94 3.24l-.8.21.82-.18c-1.85.42-3.7.86-5.53 1.38a17 17 0 00-6.69 4.64 15.43 15.43 0 00-3.34 7.25 14.83 14.83 0 005 14.13 19.77 19.77 0 008.51 4.18 45.15 45.15 0 007.72.71c1.94.08 3.89.12 5.83 0 4.94-.19 9.86-.46 14.79-.91a132.26 132.26 0 0016.74-2.9 139.6 139.6 0 0017.23-5.11 96.83 96.83 0 0016.9-8.26 44.28 44.28 0 007.13-5.83 34 34 0 006.44-8.69 48.08 48.08 0 001.78-5.1 16.43 16.43 0 00.59-5.41 27.41 27.41 0 00-1.85-9 57.24 57.24 0 00-3.74-7.47 31.72 31.72 0 00-6-8.1 40.07 40.07 0 00-6.37-4.51 17.54 17.54 0 00-3-1.25c-2-.73-4.06-1.32-6.09-1.95a34.52 34.52 0 00-10.28-1.44 49 49 0 00-6.07.39z')
+    path.cls-8(d='M340.46 1643.79a15.41 15.41 0 00-8.7 27.1c5.74 4.81 11.4 9.71 17.09 14.58a11.16 11.16 0 00-4.64 2.14l-.33.26a12.37 12.37 0 00-10.48 9.8c-3.11 16.17-6.58 32.3-5.5 48.9.67 10.49 3.67 20.68 7.11 30.56a48.3 48.3 0 004.06 8.22 19.35 19.35 0 009.8 8.19 20.4 20.4 0 0010.41 1.37 20.16 20.16 0 0012.36-7.18c3.86-4.38 5.31-10.31 6-15.93.35-3.11.55-6.24.64-9.37.75.54 1.51 1.06 2.28 1.57a57.93 57.93 0 0011.47 6 42.83 42.83 0 0015.8 3.14c8.42-.11 17-3.88 21.81-11a30.44 30.44 0 003.41-6.25 45.65 45.65 0 002-6.89 44.84 44.84 0 00.49-7.42 33.73 33.73 0 00-.75-7.29c-1.56-9-5.37-17.23-10.36-24.87a107.67 107.67 0 00-16.13-19.31 48.68 48.68 0 00-8.39-5.78c-1.17-.69-2.33-1.38-3.51-2-2.44-1.39-4.91-2.75-7.42-4l-.48-.24c-1.3-1.15-2.61-2.28-3.93-3.41-9.19-7.9-18.57-15.6-27.93-23.3-1.62-1.33-3.25-2.64-4.91-3.93a16 16 0 00-10-3.65h-1.26zm17.76 125.62zm1.83.74z')
+    path.cls-8(d='M300 1620.05c-7.28.14-14.78-.12-22 .85a69.79 69.79 0 00-27.57 10.1 30.39 30.39 0 00-9 8.39 26.5 26.5 0 00-4.29 8.94 19.34 19.34 0 00-.92 3.82 61.31 61.31 0 00-.5 7.88c0 8.36 4.07 16.73 11.7 20.68a32.53 32.53 0 0012.91 3.43 68.61 68.61 0 0016.51-.74 164.44 164.44 0 0029.24-8.25c5.56-2.06 11.13-4.11 16.64-6.29 1-.39 2-.84 3-1.28 1.56-.78 3.1-1.59 4.64-2.41a15.65 15.65 0 003.31-3.12 14.38 14.38 0 0019.57-18 29.24 29.24 0 00-7.12-11.53 35.8 35.8 0 00-9.95-6.51 65.44 65.44 0 00-17.16-5c-2.6-.42-5.34-.43-7.95-.61-3.11-.2-6.26-.35-9.38-.35h-1.72z')
+    path.cls-8(d='M306.58 1653.05c-4.86 9.21-9.63 18.49-14.57 27.68-1.35 2.5-2.74 5-4 7.56a40.75 40.75 0 00-1.67 4.56c-.9 2.6-1.84 5.21-2.49 7.89a44.2 44.2 0 00-1 7.06c-.18 2.36-.32 4.73-.37 7.09a29 29 0 002.13 10.79c2 5.37 6.66 9.24 11.05 12.67 2.62 2 5.76 4 9.11 4.57a21.76 21.76 0 0012.15-1.26c7.75-3.17 12.73-10.64 15.87-18.07.59-1.4 1.12-2.84 1.59-4.29a11.75 11.75 0 002.65-2.57 24.35 24.35 0 003.55-6c.84-2.29 1.5-4.6 2.11-7a58.84 58.84 0 001.33-10.75c.17-2.55.24-5.11.33-7.66a31.27 31.27 0 00-.28-6.27 30.77 30.77 0 00-.86-4.25 15 15 0 00-8.35-15.1 14.65 14.65 0 00-4.68-1.33 12.8 12.8 0 00-7.07-11.22 12.05 12.05 0 00-5.23-1.2 12.9 12.9 0 00-11.28 7zm-1.5 63.3h-.1.1zm-42.19-656.82a93.08 93.08 0 00-12.26 2.59 35.91 35.91 0 00-7.7 3 58 58 0 00-5.16 2.77 32 32 0 00-5.73 4.83 26.84 26.84 0 00-5.84 8.67q-1 2.69-1.73 5.45c-.08.63-.15 1.25-.22 1.88a80.78 80.78 0 00-.25 6.41 64.68 64.68 0 00.5 9.12 53.74 53.74 0 005.27 17.14 64.36 64.36 0 005.73 9.87c4.54 6 9.53 12 15.44 16.74 6.13 4.88 13.44 7.66 20.82 10a76.5 76.5 0 0017.87 3.35 118.27 118.27 0 0020.87-.09c3.56-.37 7.11-1.23 10.62-1.9l4.07-.89a15.53 15.53 0 004.71-26.47 16.85 16.85 0 00-4.08-2.52 14.62 14.62 0 004.79-8.54 56.66 56.66 0 00.39-8.94 29 29 0 00-.58-3.83 43.09 43.09 0 00-2-7.53 65.89 65.89 0 00-5.06-9.85 64.21 64.21 0 00-4.93-7.1 69 69 0 00-14.14-13.7 74.37 74.37 0 00-9.35-5.77 56.72 56.72 0 00-10.82-3.8 44.1 44.1 0 00-11.93-1.49 79.37 79.37 0 00-9.3.6zm-5 32.2l-.36 1.11q.15-.55.36-1.11zm15.1 1a44.5 44.5 0 015.59 1.09 46 46 0 014.72 2.34 61.36 61.36 0 017.67 6.56 69 69 0 016.47 9.33 49.13 49.13 0 012.68 7.3 15.28 15.28 0 006.23 11.11 81.15 81.15 0 01-10.69.21 78.39 78.39 0 01-14.68-2.51 66.42 66.42 0 01-8.36-3.71 38.85 38.85 0 01-4.08-3.52 75.72 75.72 0 01-8.12-11.22 53.3 53.3 0 01-2.6-7.09 50.1 50.1 0 01-.49-7 48.39 48.39 0 016-1.91 64.91 64.91 0 019.64-1zm-15.2.71l-.24.38.24-.38zm0 1l-.48.44.48-.43z')
+    path.cls-8(d='M264.42 1090.05a9.52 9.52 0 00-3.48 1.57 32.88 32.88 0 00-3.08 2.7 29.8 29.8 0 00-3 4.84 19.05 19.05 0 00-1.47 8.45 29.83 29.83 0 003 11.79c2.19 4.58 5.21 8.15 8.62 11.86l-2-2.15c2 2.19 3.73 4.36 6.42 5.7a16.58 16.58 0 006.29 1.79q1.48.56 3.06 1a38.78 38.78 0 008.61 1 11.92 11.92 0 005.9-2.13 11.93 11.93 0 002-17.8 18.68 18.68 0 00-.37-2.5 30 30 0 00-1.69-5.61 39.32 39.32 0 00-3.67-6.47 38 38 0 00-3.66-4.34c-1.45-1.58-2.93-3.1-4.5-4.55a20.55 20.55 0 00-10.25-5.57 12.15 12.15 0 00-2.25-.2 16.43 16.43 0 00-4.52.67zm28.01-7.54a6.92 6.92 0 00-4.67 2.39c-2.32 2.74-2.18 7.4.79 9.66a38.84 38.84 0 014.82 4.5 80.24 80.24 0 017.52 10.2 26.28 26.28 0 011.16 2.61c-.35.43-.71.83-1.09 1.23a5.77 5.77 0 108.8 7.47 20 20 0 003.3-4.69c1.34-2.59.67-5.71-.18-8.32a38.22 38.22 0 00-3-6.19c-1-1.8-2.21-3.48-3.34-5.19-1-1.5-1.93-3-3-4.52l-2-2.83a39.51 39.51 0 00-4.15-4.71 6.36 6.36 0 00-4.43-1.63h-.55zm1.55 17.22l.44.48-.44-.48zm8 12.39l-.14.22.14-.22z')
+    path.cls-8(d='M348.29 1030.86q-2.6.53-5.18 1.11a20.36 20.36 0 00-6.18 3.78 16.5 16.5 0 00-3.44 3.39 44.25 44.25 0 00-3.31 5.24 76.22 76.22 0 00-5.88 13.1c-1.92 5.44-3.86 10.85-5.49 16.38-1.43 4.88-2.84 9.72-4 14.67-1.3 5.37-2.46 10.76-3.64 16.16-1.45 6.72 3.43 13.48 10 14.74a12.32 12.32 0 007.51-.94 12.72 12.72 0 001.94 2.16c6.28 5.61 15.54 3.8 22.59 1 2-.83 4.21-2.21 6.21-3.27a57.38 57.38 0 005.81-3.62 49.67 49.67 0 0015.43-17.83 53 53 0 003.49-9.78 43.68 43.68 0 001.32-10.45 59.64 59.64 0 00-3.48-22.05 39.23 39.23 0 00-11.38-17A26.74 26.74 0 00362 1033a40 40 0 00-6.74-1.89 25.88 25.88 0 00-4.41-.32h-2.58z')
+    path.cls-8(d='M406.94 1066.35a21.21 21.21 0 00-4.43 3.41 45.05 45.05 0 00-4.87 1.37 44.27 44.27 0 00-9.31 4.84 113.62 113.62 0 00-12.19 9.18c-3.48 1-7 1.87-10.53 2.75s-6.87 1.71-10.31 2.54l-1.15.21-3.95.87a15.09 15.09 0 00-9.85 15.4 15.15 15.15 0 004.08 9.06 16.72 16.72 0 002.46 13.21c2.29 3.44 6.52 6.54 10.77 6.83a11.24 11.24 0 005 .11 23.48 23.48 0 006.56-1.91c3.11-1.45 6.28-3.12 9.26-4.79 4.43-2.48 8.77-5 13.08-7.69q2-1.2 3.87-2.44c5.5-1.82 10.76-4.64 15.91-7.28a39.89 39.89 0 006.9-4 28.8 28.8 0 007-8.47 21.78 21.78 0 003-10.65v-.89c.5-.77 1-1.55 1.49-2.33a15.42 15.42 0 00-11-21.81l-4.13-.22a15.4 15.4 0 00-7.59 2.73z')
+    path.cls-8(d='M336.05 1078.71a13.31 13.31 0 00-7.14 6.49c-.26.46-.51.92-.76 1.39a70.33 70.33 0 01-10.47 6.58c-3.79 1.95-7.6 3.84-11.55 5.5q-7.42 3.13-14.87 6.27c-6 2.5-9.38 9-7.07 15.24a12 12 0 0015.23 7.08c6.75-2.29 13.46-4.68 20.1-7.27a113.4 113.4 0 0010.41-4.74 90.82 90.82 0 0012.23-7.11 42.32 42.32 0 005.83-5.28c.9-1.34 1.8-2.7 2.67-4.07.44-.84.89-1.67 1.36-2.51 3.35-6.13 0-14.19-6-17.1a12.88 12.88 0 00-9.95-.47zm-6.72 6.25a8.71 8.71 0 01-.78 1.19l.78-1.19zm-1.76 2.27l-.17.16.17-.16z')
+    path.cls-8(d='M258.43 1093.18a13 13 0 00-3.17 18 60.42 60.42 0 006.55 7.64c-.05.26-.11.53-.17.8-.53 1.23-1.13 2.42-1.75 3.63-2.66 5.18-.13 11.78 5 14.25a10.76 10.76 0 0013.64-4 67.3 67.3 0 003.47 2.2c3.72 2.2 8.07 3.56 12.42 2.89l4-.88a87.17 87.17 0 004.28-2.25c3.55-2 5.22-6.06 6.27-9.72 1.42-4.9.36-10.13-1.45-14.77-1.92-4.91-5.11-8.47-8.72-12.17a14.85 14.85 0 00-6.89-3.3 15.07 15.07 0 00-11.37 2.44c-.34.24-.67.5-1 .77-1.44-1.33-2.86-2.67-4.34-4a13.46 13.46 0 00-7-3.7 12.79 12.79 0 00-2.38-.23 12.94 12.94 0 00-7.43 2.34zm56.18 55.43a42.93 42.93 0 00-9.69 9.38 60.13 60.13 0 00-7.22 14.7 107.62 107.62 0 00-5.36 24 105.34 105.34 0 00.21 27.31 89.65 89.65 0 003.62 15 20.75 20.75 0 007.25 10 20.37 20.37 0 008.07 3.78 23.12 23.12 0 0010.81-.46c7.49-2 13.5-7.74 17.92-13.92a75.74 75.74 0 0013.64-40.27 49.48 49.48 0 00.63-11.77 27.22 27.22 0 00-.75-4.76c-.18-2.06-.4-4.12-.61-6.19-.27-2.69-.74-5.36-1.26-8-.36-1.83-.78-3.64-1.19-5.45a18.56 18.56 0 00-2.41-5.54 14.23 14.23 0 00-6.19-5.63 19.13 19.13 0 00-8.89-1.69 10.93 10.93 0 00-3.62.69 12.42 12.42 0 00-8.35-3.25 11 11 0 00-6.61 2.14z')
+    path.cls-8(d='M385.62 1118.61c-5.38.35-10.93.48-16.21 1.61-8.11 1.74-17.56 3.79-23.31 10.33a20.23 20.23 0 00-3.45 5.63 12.37 12.37 0 00-3.82.72 12.93 12.93 0 00-7.17 6.52 13.32 13.32 0 00-.49 10c3.26 10.84 6.66 21.55 11.23 31.92 2.55 5.78 5.11 11.54 7.75 17.27a73.68 73.68 0 006.57 11.94c.94 1.33 2.06 2.53 3.11 3.77 1.35 1.57 2.78 3.07 4.2 4.58a36.3 36.3 0 006.88 5.25c6.82 4.43 15.84 7.15 23.84 4.5a25.31 25.31 0 0010.78-7 33.32 33.32 0 007.09-13.11 43.05 43.05 0 001.7-16.37 47.62 47.62 0 005.94.31 34 34 0 007.85-1.14 38.1 38.1 0 0010.77-4.53c4.78-2.83 8.17-7.78 10.45-12.71 1.83-4 2.91-8.34 4.16-12.54a25.66 25.66 0 00-.23-15.32 32.13 32.13 0 00-6.46-11.07 53.87 53.87 0 00-5.53-5.57 60.46 60.46 0 00-7.84-5.19c-3.68-2.24-7.79-3.52-11.87-4.85-3.42-1.11-6.88-2.07-10.37-2.92a84.86 84.86 0 00-19.67-2.26q-3 0-5.9.2zm-249.22 799.5c-.61.22-1.22.46-1.82.71a17.57 17.57 0 00-16 5.86 26.59 26.59 0 00-3.07 4.44c-.61.42-1.2.86-1.79 1.31-.28.22-.57.45-.84.69a75.68 75.68 0 00-9.56 5.11 124.89 124.89 0 00-10.48 7.71c-1.58 1.27-3.25 2.44-4.94 3.55s-3.51 2.28-5.28 3.39c-9.89-4.24-23.2-1.28-28.13 9a17.38 17.38 0 00.18 15 10.74 10.74 0 00.09 7 9.31 9.31 0 00.46 1.07 12.52 12.52 0 00.68 6 13.15 13.15 0 003.85 5.53 13.39 13.39 0 006.07 2.9 12.8 12.8 0 007.47-.46c3-1.11 5.24-3.24 7.46-5.48a63.54 63.54 0 006.34-7.6q1.17-.37 2.31-.81a65.49 65.49 0 006.61-3.41c2.07-1.11 4-2.37 6-3.66 2.93-1.94 5.82-3.89 8.62-6 2.42-1.84 4.7-3.83 7.18-5.59l.8.13a17.27 17.27 0 005.36.15l.45.09a17.86 17.86 0 0013.46-2.9 18.32 18.32 0 007.25-11.22c0-.13.06-.27.1-.41l.49-.3c1.13-.67 2.23-1.43 3.34-2.14l1.11-.72a17.68 17.68 0 006-7 15.93 15.93 0 00-14.46-22.83 15.72 15.72 0 00-5.4.95zm-62.68 35.7l.77.25a7.66 7.66 0 01-.77-.25zm600.9-1228.16c-4.85-.06-9.24 2.1-12.86 5.19a38.62 38.62 0 00-4.66 4.65 53.51 53.51 0 00-4.48 6.86 54.91 54.91 0 00-4.82 12.08 76.83 76.83 0 00-2.36 10.08 82.8 82.8 0 00-.13 27.16 90.76 90.76 0 007.78 24.39c2.42 5.11 5.27 10.05 8 15a47 47 0 007.69 10 23 23 0 0011.77 6.74 21.13 21.13 0 0010.16-.89 17.2 17.2 0 007.21-5 24.4 24.4 0 003.13-4.58 36.28 36.28 0 002.19-7.18 35.41 35.41 0 00.25-7.32 11.25 11.25 0 002.57-1.29 21.34 21.34 0 006.93-8.41 30.22 30.22 0 001.83-5.59 36.66 36.66 0 001-5.28 65.81 65.81 0 00.15-14 88.83 88.83 0 00-5.78-23.86c-3.16-8.42-8-16.34-13.13-23.69a59.85 59.85 0 00-8.33-9.59 38.39 38.39 0 00-5.41-3.76l-3.39-1.11a11.36 11.36 0 00-4-.73c-.43 0-.85 0-1.28.06zm2.68 31.79l1.22 1.5c-.52-.2-1.06-.38-1.61-.54.13-.33.25-.64.39-1z')
+    path.cls-8(d='M635.25 804.22a87.3 87.3 0 00-13.89 2.38c-10.32 2.4-19.11 8.28-27.8 14-2 1.36-4.07 2.76-6 4.29a49.52 49.52 0 00-5.27 4.87 26.56 26.56 0 00-6.07 12c-2 8.32.23 18.38 6.9 24.09a32.39 32.39 0 009.27 5.44A92.33 92.33 0 00608.3 876a88.76 88.76 0 0014 1.27 90.18 90.18 0 0011-.23 84.52 84.52 0 0010.37-1.68A90 90 0 00659 871a89 89 0 0012.25-6.29 33.84 33.84 0 006.42-5.47 43.1 43.1 0 004.49-6.52 32.16 32.16 0 002.6-7.33c.41-4.1.69-7.45-.71-11.45a26.08 26.08 0 00-4.7-8.18c.58-2.77.74-6.11-.35-8.65a21.74 21.74 0 00-2.45-4.43 17.45 17.45 0 00-6.68-4.93 37 37 0 00-10.43-2.75 116.61 116.61 0 00-12.39-1c-1.56-.07-3.13-.11-4.69-.11q-3.55 0-7.11.25z')
+    path.cls-8(d='M679.27 832.91c-2.83 1-6.15 3.53-7.18 6.52-2.62 7.56-5.33 15-6.87 22.9-1.68 8.56-1.82 17.55-1.56 26.24a125.16 125.16 0 003 22 100.7 100.7 0 003 11.73 45.8 45.8 0 003.12 6.37 18 18 0 003.26 3.87 14.13 14.13 0 004.08 2.93 22.4 22.4 0 006.63 1.82l4 .21a38.22 38.22 0 005.35-1.29 25 25 0 006.13-3.49 33.49 33.49 0 005.15-5 40.17 40.17 0 004-6 48.78 48.78 0 002.34-4.62c.55-1.25 1.05-2.53 1.51-3.83a36.67 36.67 0 003.62-3.45 26.66 26.66 0 003.92-6.56 38.57 38.57 0 002.22-7.16 30.46 30.46 0 00.5-4.66 75.45 75.45 0 00.18-8.09 54.67 54.67 0 00-3.3-15.2c-.63-1.82-1.41-3.56-2.2-5.3-.51-1-1-2-1.46-3l-2.7-5.17c-.69-.91-1.49-1.92-2.37-2.9-.17-.59-.34-1.18-.52-1.77a28.34 28.34 0 00-1.41-3.69c-1.26-2.73-3.16-6.2-5.66-8.06a22.57 22.57 0 00-5.51-3.4 15.9 15.9 0 00-8.23-1.52 17.5 17.5 0 00-2.17.34 9 9 0 00-.81-.43 12.92 12.92 0 00-5.58-1.26 12.63 12.63 0 00-4.42.78z')
+    path.cls-8(d='M716.85 836.79a18.57 18.57 0 00-11.06 9.4 19.18 19.18 0 00-1.45 4.23 13.24 13.24 0 00-1.77 2.78c-1.49 3.1-2.05 7.54-.52 10.75 2.89 6.16 5.73 12.36 8.78 18.44a205.34 205.34 0 0011.06 19.69A105.28 105.28 0 00737 920.23a68.31 68.31 0 0018.15 12.34 81.54 81.54 0 0010.43 3.95c1.84.58 3.69 1.09 5.55 1.6 2.45.67 5 .55 7.53.68a36.56 36.56 0 005.2-1 21.7 21.7 0 006-2.67c4.22-2.58 6.8-6.44 9.28-10.59a29.1 29.1 0 002.46-6.81 34.61 34.61 0 00.79-4.75 46.79 46.79 0 00-.3-12.51 76 76 0 00-6.66-20.77 89.13 89.13 0 00-11.59-18.7 79.39 79.39 0 00-7.49-7.85 67.68 67.68 0 00-10.68-7.42 56.28 56.28 0 00-9.34-4.28 107.15 107.15 0 00-13-4c-2.46-.58-5-.95-7.48-1.34a60.25 60.25 0 00-9.08-.77 33.42 33.42 0 00-9.91 1.38zm18 9.6l.61.66c-.2-.23-.41-.45-.61-.67zm1.57 1.72c.12.13.24.27.37.4-.13-.13-.25-.27-.37-.4zm32.91 58.25a13.34 13.34 0 002.15-1.42q.19 1.44.3 2.88l-1.21-.32c-.63-.23-1.25-.47-1.87-.72l.63-.42zm6.65 2.13l-.35.2.37-.2zm1.51.16c-.3.09-.61.16-.91.22l1-.21zm-6.44 3.2l-.38.34c.12-.12.25-.23.38-.34z')
+    path.cls-8(d='M770 761.6a60.48 60.48 0 00-14.34 4.61c-15.45 7.24-28.76 18.7-39.93 31.48a152.93 152.93 0 00-13.81 17.72 33.42 33.42 0 00-3.77 9.33c-1.1 4-1.51 8.65.07 12.53 2.38 5.85 6.84 10.65 13.33 11.88a22 22 0 007.46.28 25.42 25.42 0 002.79-.59l2.23.7a50.1 50.1 0 0013.07 1.77 52.49 52.49 0 0014.23-1.41c15.74-3.68 28.68-14.81 37.95-27.67A87.89 87.89 0 00800.12 802a100 100 0 003.79-11.39 33.44 33.44 0 00.51-7 22.24 22.24 0 00-1.17-7.37 19.85 19.85 0 00-7.49-9.82 27.52 27.52 0 00-6-3.27 39.26 39.26 0 00-6.93-1.95 27.63 27.63 0 00-5.07-.44 39.87 39.87 0 00-7.8.82z')
+    path.cls-9(d='M111.93 1471.94a13.51 13.51 0 00-6.68 2.4 17.64 17.64 0 00-3.32 2.88 20.53 20.53 0 00-4.62 8.27 11.44 11.44 0 00-1.25 4c-.46 3-.11 4.17.55 7.07a13.53 13.53 0 004.39 6.86 15.1 15.1 0 002 1.39l.31.26a20.79 20.79 0 008.62 4.13A16 16 0 00125 1506a13.75 13.75 0 003.3-3.2 18.51 18.51 0 003.62-7.55 19.52 19.52 0 00.46-5.52c-.19-2.24-1.35-6.29-2.88-8.06-.61-.71-1.23-1.4-1.86-2.09l-.11-.17c-1.45-2.24-4.13-5-6.7-6a19.27 19.27 0 00-6.94-1.66 10.55 10.55 0 00-2 .19zm-3.31 17.89a1.74 1.74 0 01.1.19c0-.07-.07-.13-.1-.2zm225.77-377.77c-3.89 1-7 3.46-9.88 6.12a31.19 31.19 0 00-4.21 3.68c-2.85 2.84-4 7.68-3.71 11.55a38.09 38.09 0 004.17 12.27 9 9 0 003.15 3.23l3.29 2.13a23.21 23.21 0 004.5 1.4 20.07 20.07 0 0010.24-1c4.92-1.73 8.33-5.38 10.83-9.81.19-.34.37-.68.53-1s.53-.66.77-1c1.61-2.32 3.43-5 3.8-7.93.36-2.73.48-5.87-.65-8.5a18.74 18.74 0 00-3.08-5.24 13.92 13.92 0 00-2.84-3 16.62 16.62 0 00-7.12-3.36 19.25 19.25 0 00-3.66-.37 24.15 24.15 0 00-6.13.91zm9.37 535.03a18.71 18.71 0 00-3.57 7.38 15.82 15.82 0 00-.5 5.47c.09.58.18 1.16.29 1.73a16.16 16.16 0 00.8 5.71 17.18 17.18 0 005 7.16 14.77 14.77 0 008.53 3.78 23.84 23.84 0 004.91.08 42.3 42.3 0 005-1 25.48 25.48 0 006.16-2.8c2.81-1.59 4.63-4.44 6.22-7.1a20.38 20.38 0 001.57-4.65c.85-2.7.15-5.59-.5-8.22-.82-3.24-3.05-5.65-5.33-7.95a30.46 30.46 0 00-5.57-3.83 19.54 19.54 0 00-6.22-2.27 14.44 14.44 0 00-2.86-.27 18.06 18.06 0 00-13.88 6.82zM711.1 809.85a19.7 19.7 0 00-6.07 1.69 27.1 27.1 0 00-7.87 5.48 21.28 21.28 0 00-4.12 5.86c-.22.36-.44.72-.65 1.08a17 17 0 00-.68 1.66 37.58 37.58 0 00-2 5.76c-.14 1.62-.21 3.24-.23 4.86.05.25.11.5.16.74a15.29 15.29 0 002.72 7.56 14.21 14.21 0 004.33 4.73 12.57 12.57 0 004.08 2.47c3.49 1.42 5 1.55 8.79 1.6a26.35 26.35 0 006.38-1.11c1.46-.71 2.91-1.45 4.34-2.24a41.78 41.78 0 004.3-3.79 20.82 20.82 0 003.67-5.47 13.1 13.1 0 00.84-1.84 21.75 21.75 0 003.19-7.12c.71-2.62.89-7.06-.36-9.63-.65-1.32-1.32-2.63-2-3.92a38.65 38.65 0 00-3.46-3.77c-3.28-3.08-8.39-4.75-13-4.75a18.12 18.12 0 00-2.36.15z')
+    path.cls-10(d='M69.59 2018.12a68.87 68.87 0 00-9 1.54 21.31 21.31 0 00-4.65-.24c-7.89.49-14.83 3.81-21.54 7.73a57 57 0 00-7.71 5.57c-3.3 2.73-5.72 5.76-6.63 10-2 1.41-4 2.84-5.91 4.35a44.47 44.47 0 00-6.5 6.22 46.68 46.68 0 00-3.33 4.91A16.74 16.74 0 003 2072.68c2 5.44 7.17 9.33 12.72 10.56a38 38 0 0010.21.54 62.81 62.81 0 0010.27-1.93 46.78 46.78 0 009.26-3.28 56.42 56.42 0 009-5.17 54.13 54.13 0 007.85-7.13 86.69 86.69 0 006.46-8.43c3-4 5.8-8.14 7.31-12.75a14.1 14.1 0 008.69-14.09 14.24 14.24 0 00-13.87-13 11.5 11.5 0 00-1.31.07z')
+    path.cls-10(d='M50.74 2001.92a14.18 14.18 0 00-11.6 8 97.41 97.41 0 00-4.88 10.63l-.15.24a92.41 92.41 0 01-6.66 9 6.44 6.44 0 00-1.05 1.18 11.79 11.79 0 00-2.63 5.5 11.94 11.94 0 009.5 13.95c2.91.56 6.73 0 9.07-1.95a64.3 64.3 0 006-5.81 14.9 14.9 0 002.78-.7 13.14 13.14 0 003.8-2.15c-.29.51-.59 1-.9 1.52-1.29 2.12.07 5.07 2.15 6.07 2.39 1.15 4.78 0 6.06-2.14 1-1.72 2-3.44 2.94-5.24.74-1.5 1.32-3.08 2-4.61a40.39 40.39 0 001.73-5.22 18.17 18.17 0 000-3 7.76 7.76 0 00-1.61-3.8c-.59-.67-1.2-1.33-1.82-2-.12-.12-.25-.23-.38-.34a13.77 13.77 0 00.92-6.21 14.14 14.14 0 00-14.12-13h-1.14zm6.95 29.61z')
+    path.cls-3(d='M97.4 2053.87c-2.09 2-4.26 3.93-6.26 6-1.72 1.8-3.33 3.7-4.94 5.6-.82 1-1.62 1.95-2.41 2.94a30.63 30.63 0 00-2.57 3.81 28.78 28.78 0 00-3.62 11.95 4.23 4.23 0 001.29 3.09 4.37 4.37 0 006.16 0 4.75 4.75 0 001.28-3.09v-.39a31.58 31.58 0 011.5-6.3 31.55 31.55 0 013.2-5.29c1.54-2 3.1-4 4.82-5.85 1-1.12 2.1-2.22 3.2-3.28q1.93-1.82 3.85-3.65a4 4 0 000-5.55 3.84 3.84 0 00-2.74-1.12 4.05 4.05 0 00-2.8 1.12zm-32.96-20.43c-4.44 1.66-8.91 3.29-13.34 5q-3.1 1.21-6.09 2.68a36.27 36.27 0 00-4.41 2.51 23.06 23.06 0 00-3.29 2.7 20.29 20.29 0 00-1.8 2.24 4.51 4.51 0 00-.59 2.21 4.34 4.34 0 001.28 3.08 4.39 4.39 0 003.09 1.29 4.2 4.2 0 003.09-1.29 22.45 22.45 0 013-3 47.66 47.66 0 017.89-4.27c4.45-1.79 8.93-3.47 13.43-5.14a4.5 4.5 0 002.49-1.92 4.17 4.17 0 00-1.5-5.71 4.48 4.48 0 00-2.17-.59 3.08 3.08 0 00-1 .17zm-29.22-77.15a3.65 3.65 0 001.29 4.92c3.48 2.21 7 4.37 10.46 6.58 3.05 1.94 5.94 4.1 8.85 6.23a66.15 66.15 0 0110.49 10.13c.91 1.21 1.75 2.47 2.57 3.74a3.28 3.28 0 005.66-3.31 62.64 62.64 0 00-6.1-8 71 71 0 00-7.86-7.35c-2.14-1.75-4.35-3.43-6.6-5-4.49-3.21-9-6.37-13.83-9.17a3.58 3.58 0 00-1.78-.48 3.65 3.65 0 00-3.15 1.78zM66 1983.73l.16.22-.16-.22zm61.58-60.22a3 3 0 00-1.42 1.84c-1 6.45-1.93 13-4.37 19.13-.76 1.77-1.57 3.53-2.47 5.24a36.6 36.6 0 01-3.25 4.94c-1.65 2.06-3.48 4-5.21 6a2.57 2.57 0 000 3.59 2.54 2.54 0 003.59 0c.86-1 1.74-2 2.62-3l1.89-2.09c1.07-1.2 2-2.49 3-3.79a50.68 50.68 0 004.25-7.44 54 54 0 003.2-8.25c.59-2 1-4 1.48-6 .48-2.22.93-4.45 1.25-6.7a3.44 3.44 0 00-.31-2.38 3.19 3.19 0 00-1.85-1.43 3.2 3.2 0 00-2.38.32zm-5.91 21.25l-.09.22.09-.22zm20.21 84.73a3.14 3.14 0 000 6.28 44.07 44.07 0 015.63.32 38.91 38.91 0 018.61 2.27 32.41 32.41 0 015.95 3.69 65.66 65.66 0 0110.83 10.83 49.07 49.07 0 014.86 8c.71 1.47 1.35 3 2 4.49-.07-.16-.14-.32-.2-.48.38 1.1.74 2.18 1 3.31a3.59 3.59 0 106.93-1.91 51 51 0 00-3.29-7.82 51.91 51.91 0 00-4.42-7.46 68.5 68.5 0 00-12.1-12.73 43.66 43.66 0 00-7.53-5.09 33.37 33.37 0 00-9-2.89 46.35 46.35 0 00-8.71-.87zm5.05 6.52h.36-.36zM104 1530.18a41 41 0 01-.12 6.46 50.09 50.09 0 01-2.36 9.49 13.1 13.1 0 01-1.15 1.86c-.65.81-1.31 1.59-2 2.38a3.87 3.87 0 00-1.07 2.57 3.65 3.65 0 006.22 2.58c.64-.75 1.27-1.5 1.89-2.26a28.32 28.32 0 001.82-2.42 15 15 0 001.54-3.33c.63-1.73 1.12-3.53 1.62-5.31a38.57 38.57 0 001.13-5.62 29.17 29.17 0 00.29-6.4 4.15 4.15 0 00-1.15-2.77 3.91 3.91 0 00-6.68 2.77zm-25.3-19.12c-4 2.53-8.07 5-12.08 7.62l-2.75 1.75c-1.17.75-2.31 1.51-3.41 2.37a16.27 16.27 0 00-3 3.1 13.9 13.9 0 00-1.77 3 29.32 29.32 0 00-1.33 3.31 4.17 4.17 0 006.12 4.7 4.38 4.38 0 001.91-2.49c.24-.62.48-1.24.73-1.86a15.86 15.86 0 011.18-2.08 13.24 13.24 0 011.46-1.44c2.36-1.68 4.87-3.19 7.32-4.73l9.73-6.14a4.14 4.14 0 001.47-5.6 4.21 4.21 0 00-3.6-2 3.66 3.66 0 00-2 .56zM84 1443a3.26 3.26 0 00-1.17 4.43c1.3 1.85 2.55 3.71 3.72 5.64.65 1 1.28 2.09 1.88 3.16a27.42 27.42 0 011.26 2.55 20.83 20.83 0 011.06 3.45 60.38 60.38 0 01.17 6.86 3 3 0 105.93 0c0-2.08.05-4.15-.09-6.24a17.44 17.44 0 00-1-4.74c-.4-1.1-.82-2.19-1.29-3.27a52.3 52.3 0 00-2.81-5.21c-1.06-1.84-2.09-3.7-3.28-5.46a3.44 3.44 0 00-2.84-1.61 3.1 3.1 0 00-1.54.44zm50.94 1.67a59.4 59.4 0 00-5.66 5.78c-2 2.25-4 4.52-5.94 6.77a3.22 3.22 0 000 4.5 3.18 3.18 0 004.48 0c2-2.24 4-4.51 6-6.73 1.81-2 3.77-3.85 5.77-5.64a3.33 3.33 0 000-4.68 3.28 3.28 0 00-2.33-1 3.39 3.39 0 00-2.34 1zm15.78 68.03a3.19 3.19 0 00-1.14 4.36 3.5 3.5 0 001.9 1.46l.16.06a33.77 33.77 0 016.24 3.42 26.68 26.68 0 014 3.93 37 37 0 013.17 5.12c.45.87.87 1.75 1.27 2.64l.3.76a3.88 3.88 0 001.65 2.14 3.56 3.56 0 004.88-1.28 3.57 3.57 0 000-3.61 43.5 43.5 0 00-5.1-8.48 38 38 0 00-2.78-3.31 32.76 32.76 0 00-3.87-3.3 36.4 36.4 0 00-8.17-4.23 2 2 0 00-.78-.14 3.45 3.45 0 00-1.68.46zm161.16 132.62a83.45 83.45 0 00-10.92 1.2 52.24 52.24 0 00-9.16 2.29 85.7 85.7 0 00-4.92 2l-1.84.86a18.77 18.77 0 00-1.81.86 4.38 4.38 0 00-2 2.56 4.33 4.33 0 00.43 3.3 4.4 4.4 0 003.7 2.11 6.77 6.77 0 003.36-1c.63-.32 1.26-.66 1.9-1 1.07-.58 2.19-1.1 3.31-1.61a41.4 41.4 0 016-2c2.35-.54 4.69-1 7.07-1.36a48.91 48.91 0 016.39-.46c3 .07 6.05.22 9.06.42a3.91 3.91 0 100-7.81c-2.91-.19-5.84-.44-8.76-.44h-1.82zm24.25 34.2a3.71 3.71 0 00-2.06 1.59c-.91 1.29-1.85 2.56-2.79 3.84a81.19 81.19 0 01-6.38 7 3.48 3.48 0 004.92 4.92 78.52 78.52 0 0010.2-12.29 3.44 3.44 0 00-3-5.18 3.5 3.5 0 00-.91.12zM361.1 1704a2 2 0 00-1.38 2.4c.32 1.46.66 2.92.9 4.38l.63 3.77.48 4.07c.13 1 .18 2.12.23 3.19.09 1.29.22 2.59.23 3.88 0 1.56.05 3.11.07 4.67a109.31 109.31 0 01-.93 15.76c0 .33-.09.66-.13 1q-.49 3.27-1 6.52a3.08 3.08 0 00.29 2.21 2.89 2.89 0 001.72 1.32 2.87 2.87 0 003.63-2.77c.27-2.91.47-5.83.67-8.74.08-1.2.15-2.4.19-3.61s.13-2.56.12-3.84c0-2.69 0-5.37-.13-8.06-.06-1.49-.13-3-.2-4.49s-.23-2.72-.34-4.07a128.45 128.45 0 00-2.61-16.21 1.94 1.94 0 00-1.91-1.44 1.61 1.61 0 00-.49.07zm21.21-12.17a3 3 0 00-1.83 1.41 3 3 0 00-.31 2.36 3.3 3.3 0 001.42 1.84l1.1.82 1.9 1.47A26.21 26.21 0 01389 1704a51.44 51.44 0 015.67 10.21c.82 2 1.51 4.07 2.17 6.14a38.26 38.26 0 011.28 4.95c0 .33.05.66.06 1a3.47 3.47 0 006.93 0 24.56 24.56 0 00-1.85-7.72 98.15 98.15 0 00-4-9.48 42.33 42.33 0 00-8.09-11.87 33.1 33.1 0 00-3.13-2.57c-1.11-.87-2.23-1.73-3.36-2.57a2.63 2.63 0 00-1.5-.42 3.12 3.12 0 00-.88.12zm13.6-43.97q-3.14.73-6.22 1.65a2.88 2.88 0 001.54 5.56c1.49-.43 3-.89 4.5-1.23 1.31-.28 2.62-.55 3.93-.79a15.39 15.39 0 012.63-.06 9.38 9.38 0 011.55.43 3 3 0 003.44-4.47 3.22 3.22 0 00-1.81-1.39 10.57 10.57 0 00-3.6-.58 26.65 26.65 0 00-6 .88zM356.38 1591a4 4 0 00-2.82 5c.73 2 1.49 4 2.1 6a46.11 46.11 0 011.32 6.15 21.63 21.63 0 01.1 5.15 51.71 51.71 0 01-2.35 9.79 3.66 3.66 0 002.55 4.49 3.62 3.62 0 002.82-.36 3.87 3.87 0 001.68-2.19 48.82 48.82 0 001.92-6.91c.21-1 .39-2.11.58-3.17a27.82 27.82 0 00.44-3.64 29.42 29.42 0 00-.19-3.87c-.11-1.1-.24-2.22-.41-3.32a45.22 45.22 0 00-2.78-10.3 4.4 4.4 0 00-1.85-2.42 4.08 4.08 0 00-2-.55 3.89 3.89 0 00-1.07.15zm.84 21.35l-.09.59.09-.59zm-76.5-518.95a4.42 4.42 0 000 8.84 29.34 29.34 0 013.25 0 26.36 26.36 0 015.43 1.57 29.12 29.12 0 015 2.7 69.55 69.55 0 015.31 5.14 4.3 4.3 0 006.09-6.08c-1.54-1.57-3-3.21-4.67-4.65a28 28 0 00-6.3-4.11 43.7 43.7 0 00-6.5-2.57 24.91 24.91 0 00-6.92-.9zm2.44 8.76h.25-.25zm39.84 66.68a4.54 4.54 0 00-1.23 3c-.45 4.69-.87 9.38-1.41 14.06-.37 2.63-.77 5.26-1.1 7.9a4.11 4.11 0 00.58 2.13 4.22 4.22 0 005.78 1.51 4 4 0 001.95-2.52q.89-5.78 1.55-11.58c.44-3.83.73-7.67 1.09-11.5a4.08 4.08 0 00-1.23-3 4.25 4.25 0 00-6 0zm49.11-6.35a3.2 3.2 0 00-1.47 1.91 3.05 3.05 0 00.32 2.47c2 2.65 3.86 5.33 5.78 8 .79 1.1 1.5 2.27 2.24 3.41.61.91 1.21 1.82 1.77 2.76 1.42 2.36 2.8 4.72 4.14 7.12a72.57 72.57 0 013.42 7.25c-.12-.26-.22-.53-.34-.79.36.89.74 1.78 1.07 2.69a3.5 3.5 0 001.52 2 3.28 3.28 0 004.83-3.71c-1.86-5.94-5.06-11.31-8.29-16.58s-6.89-10.36-10.6-15.35a3.48 3.48 0 00-1.92-1.47 3.06 3.06 0 00-.85-.12 3.21 3.21 0 00-1.62.44zm20.11-18.49a3.8 3.8 0 000 5.37 4.08 4.08 0 002.69 1.12l3.27.38 7 .94c5.07 1 10.28 1.78 15.12 3.58l1.17.56a4.09 4.09 0 003 .38 3.85 3.85 0 002.31-1.77 3.94 3.94 0 00.4-3 3.77 3.77 0 00-1.78-2.31 34.12 34.12 0 00-5.86-2.18c-.92-.24-1.85-.52-2.79-.72-2.06-.44-4.12-.88-6.2-1.26-5.15-1-10.37-1.6-15.59-2.21h-.23a3.82 3.82 0 00-2.46 1.13zm-33.48-69.32a41.7 41.7 0 01-1.64 5.23 30.24 30.24 0 01-3.15 5.53 53.58 53.58 0 01-5.84 5.83 3.61 3.61 0 105.1 5.11c1.37-1.21 2.73-2.44 4-3.73a32.19 32.19 0 008.53-16 3.64 3.64 0 00-7-1.93zm292.61-245.57c-2 .19-3.9.39-5.83.69a31.49 31.49 0 00-4.52.92 39.8 39.8 0 00-6.22 2.41 4.23 4.23 0 000 7.31 4.07 4.07 0 003.26.43 37.62 37.62 0 015.69-1.9c1.52-.33 3-.6 4.54-.83l3.31-.32a48.44 48.44 0 0110.28.43A4.2 4.2 0 00665 837a4.37 4.37 0 000-6.18 4.75 4.75 0 00-3.1-1.28 60.8 60.8 0 00-7.4-.55c-1 0-2.08 0-3.11.14zm49.23 47.59c-.82 4.24-1.68 8.45-2.28 12.72a4.09 4.09 0 00.37 2.87 3.79 3.79 0 002.23 1.71 3.75 3.75 0 004.58-2.6c.89-4.2 1.67-8.44 2.49-12.65a4.11 4.11 0 00-.38-3 3.91 3.91 0 00-2.3-1.76 3.91 3.91 0 00-4.71 2.67zm55.55-12.49a3.29 3.29 0 00-1.17 4.48 126.28 126.28 0 017.4 11.31c2 3.63 3.6 7.45 5.24 11.25.47 1.13.9 2.29 1.35 3.43.29.75.56 1.48.82 2.24a41.21 41.21 0 011.25 5 3.41 3.41 0 006.23.81 3.57 3.57 0 00.35-2.62 34.8 34.8 0 00-1.81-6.42l-1.5-3.64c-.87-2.13-1.82-4.21-2.76-6.3a84.14 84.14 0 00-6.27-11.64c-1.48-2.29-3.08-4.51-4.66-6.73a3.43 3.43 0 00-2-1.51 3.48 3.48 0 00-.85-.11 3.39 3.39 0 00-1.67.44zm4.98-65.21c-.41.68-.83 1.33-1.29 2a75 75 0 01-6 6.44 756.58 756.58 0 01-8.67 8.3 3.66 3.66 0 005.18 5.18c3-2.87 6-5.73 9-8.63a48 48 0 008.12-9.55 3.69 3.69 0 00-1.31-5 3.54 3.54 0 00-1.82-.5 3.77 3.77 0 00-3.2 1.81zm-89.28-36.81a4 4 0 000 5.55c2.19 2.3 4.44 4.53 6.47 7a40.88 40.88 0 013.18 5.38 47.82 47.82 0 012.1 6.43c.73 3 1.41 6.07 2.09 9.11a3.92 3.92 0 004.81 2.73 4 4 0 002.74-4.81c-.68-3.06-1.37-6.12-2.11-9.17a39.86 39.86 0 00-2.9-8.3c-.61-1.22-1.22-2.43-2-3.59a39.79 39.79 0 00-3-4.08c-1.79-2.2-3.89-4.19-5.85-6.22a3.78 3.78 0 00-2.75-1.14 3.94 3.94 0 00-2.81 1.14z')
+    path.cls-2(d='M713 835.41c-2.8 5.67-7 14.18-11.51 22.63-1.24 2.34-2.69 4.64-4.09 6.87l-.38.59c-.59.94-1.19 1.88-1.76 2.84-1.39 2.31-2.93 4.63-4.29 6.67l-.34.53-1.06 1.58c-.76 1-1.49 2.08-2.22 3.14-1.69 2.45-3.35 4.84-5.13 7-1 1.18-1.9 2.37-2.83 3.57-2.12 2.69-4.19 5.33-6.39 7.75l-3.4 3.74-3.33 3.68-.94 1c-.83 1-1.68 1.89-2.58 2.76l-7.37 7.24-3.74 3.62q-7.12 6.2-14.31 12.34l-2.17 1.87-.25.22c-8.29 7.12-16.85 14.48-25.2 21.82-6.21 5.45-12.82 11.33-19.07 17.42-4 3.87-7.89 7.83-11.68 11.65q-3.09 3.14-6.21 6.26c-8.1 8.1-14.73 14.65-20.87 20.62-5.16 5-10.18 10.07-15.74 15.68l-3.91 3.94c-8.52 8.6-17 17.57-25.12 26.26l-.72.76-9.16 9.74q-20.13 21.28-40.39 42.47c-1.75 1.83-3.5 3.63-5.26 5.44l-2.33 2.41c-1 1-1.95 2-2.93 3l-.27.28c-2 2-4.12 4.17-6.07 6.34q-2.57 2.87-5.15 5.7c-4.29 4.72-8.68 9.56-12.85 14.51-11.24 13.38-24.27 29-36.6 45-6.21 8.06-12.41 16.31-17.75 23.41-1.59 2.12-3.11 4.35-4.57 6.5l-.31.46-.88 1.3q-1.38 2-2.8 4c-2 2.91-4.3 6.18-6.35 9.48l-7.39 11.91-1.29 2.06-.23.35c-1.45 2.33-3 4.74-4.3 7.19l-2.79 5.15-.18.31c-3.36 6.19-6.83 12.57-10.15 18.9-8.55 16.33-17.15 32.92-26.28 50.71q-6.72 13.1-13.33 26.24c-2.76 5.48-5.42 11.14-8 16.62l-.42.88-2.78 5.91c-1.24 2.65-2.37 5.42-3.45 8.09-.58 1.43-1.15 2.82-1.74 4.21l-1.55 3.66-.18.42c-1 2.4-2.05 4.79-3 7.2l-3.16 7.69c-2.36 5.77-4.73 11.55-7 17.36l-1.64 4.15-.11.27c-6 15.22-12.26 31-17.62 46.71l-2.17 6.36-.22.63c-2.31 6.75-4.7 13.72-6.82 20.65l-2.5 8.21-2.46 8c-.84 2.77-1.59 5.62-2.25 8.13l-.28 1.06c-.2.77-.4 1.55-.61 2.31-2.54 9.38-5 19.21-7.23 27.88-1.49 5.92-2.86 12-4.16 17.83l-.11.47c-.52 2.32-1 4.5-1.5 6.67q-3.81 16.75-7.7 33.5l-.37 1.59-3.75 16.35q-1.75 7.66-3.53 15.34c-.75 3.25-1.41 6.7-1.94 9.47-.31 1.62-.62 3.22-.94 4.83-.63 3.14-1.28 6.5-1.75 10l-1 7.92-1.06 7.92c-.16 1.18-.24 2.37-.32 3.56 0 .6-.08 1.21-.13 1.8l-.4 4.75-.4 4.74c-.36 4.2-.53 8.4-.69 13.44 0 1-.07 2.09-.12 3.14v1c-.13 2.68-.27 5.71-.23 8.67l.11 8.69.11 8.69c0 2.75.14 5.5.25 8.25v.68l.07 1.71c.06 1.43.11 2.87.16 4.31v.27c.09 3 .19 6.06.39 9.07l.37 5.65c.41 6.62.87 14.11 1.64 21.47l.81 7.7.81 7.73c.34 3.3.83 6.64 1.31 9.86l.18 1.25c.18 1.18.35 2.35.51 3.53 1 7.36 2.29 15.07 3.3 21.25l.94 5.74c.81 5 1.69 10 2.58 15.06.16.31.32.61.47.92a15 15 0 011.52 5.11 9.51 9.51 0 01-.31 3.21c.4 2.18.8 4.36 1.2 6.52l.24 1.27c1.23 6.61 2.43 13.15 3.59 19.69 2.81 16 5.23 32 7.58 47.6l1.41 9.37c2.73 18 5.43 35.6 8.46 53.14 1.4 8.18 2.73 16.36 4.06 24.55l.06.38.09.51c1.54 9.56 3.15 19.45 4.87 29.15 1.54 8.74 3 18 4.17 25.45 1.45 9.16 3.12 18.44 4.74 27.42l.06.36.19 1c.5 2.78 1 5.57 1.54 8.35v.25c1 5.05 1.89 10.11 2.75 15.17q2.54 15 5 30.06l2.44 14.84c2 12.06 3.94 24.11 6 36.15 3.13 18.34 6.58 36.58 10.24 54.23l1.8 8.68.26 1.26c2.86 13.8 5.82 28.06 8.54 42.11l1.28 6.55c1.26 6.46 2.49 12.78 3.62 19.06l.91 5.12c1.44 8.18 2.93 16.63 4.84 24.85 1.54 6.69 3.09 13.16 4.73 19.78l-.08-.25c-5.75-7.48-11.71-15.21-18.83-21.63-6.46-5.83-13.56-11.14-20.43-16.28l-3.35-2.5c-7.3-5.48-15.13-11-23.23-16.23s-17.58-11.48-27.41-16.11a88.33 88.33 0 00-16.61-5.94 22.09 22.09 0 00-5.24-.58h-.77a26 26 0 00-5.9.91 22.37 22.37 0 00-8.24 3.9c-5.4 4.2-7.85 11.9-6.58 20.61 1 7.1 4.73 13.45 8.43 19.34a122.7 122.7 0 0014.12 18l2.43 2.62c2.29 2.49 4.62 5 7.07 7.35a277.66 277.66 0 0022 19.48c8.11 6.26 16.4 12.48 24.42 18.48l1 .76c8.64 6.48 16.48 12 23.94 17 5.18 3.41 9.83 6.43 14.25 9.23l2.84 1.82.35.23c2.58 1.65 5.24 3.36 7.92 4.93a75.06 75.06 0 0012.95 6.21c4.46 1.58 8.76 3.26 13.16 5.13a12.44 12.44 0 003.29.92l.43 1.71.46 1.74a161.37 161.37 0 005.48 17.23 13.78 13.78 0 0012.67 8.84 10.05 10.05 0 001.09 0 13.56 13.56 0 009.18-4.71c2-2.35 3.82-6.42 3.15-9.82l-.22-1.1-.08-.42c-1.07-5.35-2.17-10.88-3.42-16.3-1-4.2-2.1-8.57-3.11-12.43l-.71-2.75c-1.77-6.83-3.77-13.83-5.54-20-.84-2.93-1.67-5.85-2.5-8.78-1-3.61-2.06-7.23-3.1-10.83a7.43 7.43 0 001.45.14h.62a7.31 7.31 0 005.16-2.67 143.58 143.58 0 0010.38-17.29c1-2.14 2-4.37 2.85-6.54l1.06-2.53c1.76-4.16 3.23-8.53 4.66-12.75l.33-1c1.57-4.65 3.07-9.77 4.72-16.11a109.06 109.06 0 002.2-12.48l.23-1.59q1.73-12.24 3.4-24.48c1.69-12.24 3.38-24.47 5.14-36.7.72-5 1.49-10 2.27-15 2.34-15.14 4.77-30.79 5.56-46.36.3-6.11.36-12.6-1.24-18.61a16.68 16.68 0 00-5-8.56c-1.79-1.49-3.6-2.86-5.89-3.17a23.17 23.17 0 00-3-.25 11.39 11.39 0 00-1.64.11 14.63 14.63 0 00-6.25 2.39c-.89.67-1.77 1.41-2.78 2.33a67.88 67.88 0 00-5.57 5.74c-7.74 9-11.3 20.46-14.74 31.57l-.9 2.91c-1.36 4.38-2.76 8.74-4.17 13.1l-.26.77c-3.19 9.47-6.5 19.26-9.48 29-1.29 4.25-2.57 8.88-3.89 14.15a90.92 90.92 0 00-2.08 14.26 246.43 246.43 0 00-1 31.23c.05 1.28.08 2.54.1 3.81q-2.19-11.91-4.53-23.82c-2.88-14.64-6.08-29.76-8.9-43.1l-2-9.48c-6.36-30.21-11.59-61.15-16.65-91.07l-2.33-13.68q-2.56-15.1-5.17-30.19c-.87-5.05-1.85-10.14-2.81-15.06L266 2141c-.41-2.14-.82-4.27-1.21-6.4-1.64-8.78-3.15-17.61-4.8-27.42-1.48-8.7-3-17.69-4.65-26.58s-3.2-18.09-4.8-27.48l-.31-1.84c-1.39-8.13-2.82-16.54-4.34-24.78-3.57-19.44-6.77-39-9.15-53.9l-1.59-9.91-3-18.42c-1.43-8.84-3.07-18.2-5-28.61-1.26-6.69-2.57-13.37-3.89-20l-.22-1.12c-1.89-9.66-3.85-19.66-5.59-29.51l-.43-2.44c-1.49-8.39-3-17-4.32-25.63l-.55-3.51-.11-.66c-.48-2.93-1-5.91-1.31-8.86l-2-16.85c-.79-6.64-1.29-13.42-1.78-20l-.15-2c-.11-1.38-.22-2.75-.32-4.12-.23-2.89-.37-5.79-.51-8.68-.07-1.52-.15-3-.23-4.53v-.88l-.05-.93c-.17-3.3-.35-6.7-.44-10-.05-1.79-.12-3.57-.2-5.37-.15-3.89-.3-7.77-.24-11.58l.15-8.79.14-8.79.05-.83c.45-6.9 1-14.72 1.86-22.31l1.1-9.3.12-1.15c.09-.91.18-1.81.35-2.7l1.56-8.42 1.55-8.38c1.14-6.13 2.53-12.43 3.75-18l.24-1.11 1.31-6c.54-2.52 1.1-5 1.66-7.55l.67-3c1-4.62 2-9.24 3-13.87l2.25-10.64c3-14.45 6.2-29.4 9.71-44.17 2-8.33 4.13-16.75 6.21-24.91l.12-.47.51-2c1.37-5.35 3-10.68 4.75-16.59.74-2.45 1.47-4.89 2.19-7.34l-.29.66c.73-2 1.4-4.1 2.06-6.16 1.73-5.41 3.52-11 5.44-16.35 1-2.69 1.91-5.39 2.86-8.1 1.87-5.38 4-11.47 6.23-17.24l3.26-8.47.24-.64c5.31-13.8 10.79-28.06 16.5-41.94l2.15-5.27.17-.41c2.76-6.75 5.6-13.73 8.7-20.45 4.65-10.09 8.93-19.1 13.07-27.54 6.34-13 13-26 19.37-38.67l.46-.91 4.68-9.24c5.67-11.24 11-21.51 16.27-31.4.77-1.43 1.51-2.87 2.26-4.3l.18-.36c1.89-3.61 3.83-7.35 6-10.87q5.26-8.66 10.56-17.27l2.69-4.08c3.48-5.28 7-10.59 10.69-15.61 5.24-7.08 11.45-15.45 17.86-23.88 11.48-15.09 23.61-29.77 36.07-44.73 4-4.77 8.19-9.44 12.27-14 1.74-1.92 3.49-3.86 5.21-5.79 2-2.24 4.21-4.5 6-6.31l2.93-3 1.64-1.7c2.22-2.3 4.44-4.61 6.63-6.92q20.15-21.32 40.23-42.69 3.7-4 7.39-7.93c4.26-4.59 9.08-9.78 13.85-14.75 8.41-8.77 17.36-18 27.35-28.12 2.76-2.8 5.58-5.55 8.41-8.29l1.37-1.34 2.72-2.66c2.79-2.73 5.54-5.51 8.27-8.29l.66-.66 2.81-2.85 5.34-5.4 2.58-2.62c4.78-4.86 10.33-10.5 15.86-15.95 12.6-11.47 23-20.7 32.7-29.05q9.27-8 18.43-16.09c4.41-3.88 8.66-8.07 12.77-12.12l.61-.6 3.07-3c1.82-1.79 3.53-3.78 5-5.54l.6-.68c.58-.67 1.15-1.33 1.74-2 2.68-3 5.2-6.1 6.84-8.16a222.24 222.24 0 0013.49-18.41c4.2-6.51 8.27-13.06 12.46-20 1.23-2 2.33-4.24 3.39-6.36l.21-.41c.46-.91.92-1.82 1.4-2.72 1.47-2.81 2.89-5.73 4.26-8.55l.1-.21c.72-1.46 1.43-2.93 2.15-4.38a7.16 7.16 0 00.3-5.55 7.47 7.47 0 00-3.77-4.27 7 7 0 00-3.12-.72 7.51 7.51 0 00-6.7 4.17z')
+    path.cls-2(d='M276.89 2302a7.65 7.65 0 00.89 10.81 8.09 8.09 0 005.59 1.8 7.46 7.46 0 005.23-2.69 7.68 7.68 0 00-.9-10.82 8.12 8.12 0 00-5.59-1.79 7.42 7.42 0 00-5.22 2.69z')
+    path.cls-2(d='M142.24 2101.42a29.89 29.89 0 00-5.65 2.62c-.33.28-.66.54-1 .81a28.77 28.77 0 00-3 2.85 28 28 0 00-3.44 4.87 39.3 39.3 0 00-4.12 10c-1.16 4.11-.57 8.57.29 12.66a106.94 106.94 0 005.66 18.62 122.61 122.61 0 008.17 16.58c5.87 9.76 12.22 19.13 19 28.31 3.48 4.71 7.51 9.07 11.34 13.48.81.93 1.63 1.85 2.45 2.77a10.73 10.73 0 001.24 1.37c2.56 2.84 5.17 5.64 7.74 8.47 7.86 8.67 16 17.17 25.1 24.59 4.24 3.46 8.62 6.76 12.91 10.16 4.58 3.63 9.09 7.33 13.72 10.87 8.32 6.38 17.08 12.15 25.37 18.56l.86.67a12.84 12.84 0 006.61 2.79c.16 1.39.3 2.79.45 4.19a9.77 9.77 0 0019.47-1.59 199 199 0 00-3.29-22.41 155.43 155.43 0 00-6.89-23.34c-2-5.23-3.94-10.55-6.16-15.7-2.5-5.8-5-11.58-7.63-17.32a116.94 116.94 0 00-7.59-14.18c-2.58-4.08-5.52-7.92-8.48-11.75-3.58-4.64-7.16-9.26-10.9-13.78s-7.55-9.12-11.37-13.65-7.9-9.16-12-13.66c-4.47-5-9.13-9.69-13.84-14.43-3.45-3.48-7.15-6.76-10.8-10-4.58-4.07-9.16-8.1-14-11.9-1.82-1.44-3.7-2.83-5.64-4.11s-4-2.63-6.06-3.82a33.57 33.57 0 00-11.28-4 15.48 15.48 0 00-2.55-.21 16.67 16.67 0 00-4.76.7zm8.53 19.94l-1.15.6a7.36 7.36 0 011.15-.6zm-2.36 2.1a53 53 0 015.87 3.09c8.64 6.11 16.55 13.09 24.42 20.16 4.36 3.92 8.51 8.06 12.7 12.18 3.16 3.11 6.1 6.45 9.08 9.73q9.48 10.93 18.81 22c2.75 3.26 5.37 6.63 8 10 1.29 1.65 2.6 3.31 3.91 5a112.66 112.66 0 0110.37 15.75c1.4 2.93 2.85 5.84 4.17 8.8 1.66 3.72 3.47 7.4 5 11.17 2.42 6 4.85 12 7 18.09-1.21-.83-2.43-1.65-3.63-2.48-7.21-5-14.13-10.26-21.13-15.52s-14.3-10.47-20.71-16.56c-3.45-3.27-6.86-6.56-10.21-9.94-3-3-5.85-6.29-8.72-9.47l-1.06-1.16.15.16-.55-.6-.49-.53-1.29-1.42-.62-.67c-.62-.76-1.3-1.46-2-2.21a254.09 254.09 0 01-31.87-44.67 113.89 113.89 0 01-8.47-22.47 39.3 39.3 0 01-.52-4q.12-.66.27-1.32c.44-1 .94-2 1.48-3zm37.91 74.21l1 1.06-.07-.07-.9-1zm1.12 1.23l.27.29.39.43-.65-.71zm4.05 4.44l1.21 1.32-1.21-1.32zm1.8 2l-.29-.34-.07-.08.39.42zm-.39-.42l-.21-.24.28.32c.23.24.45.49.68.74l-.36-.4a.52.52 0 00.1.11c.16.18.33.36.49.55l.29.31.45.5-.43-.48.08.08-1.79-2 .42.47z')
+    path.cls-2(d='M142.89 2115.11a8.2 8.2 0 00-5.22 6.15c-1 3.36.05 7 1.94 9.85 1.75 2.68 3.75 5.22 5.61 7.82 2.6 3.63 5.38 7.13 8.16 10.62.38 1.14.82 2.26 1.28 3.38a6 6 0 00-.07.61 46.1 46.1 0 00-.19 7.05 21.22 21.22 0 002.28 7.08 108.5 108.5 0 007.25 12.31c3 4.5 6.25 8.8 9.45 13.15a131.75 131.75 0 0015.52 18.22 9.91 9.91 0 003.82 2.21c1.41 1.82 2.83 3.63 4.29 5.42 1.76 2.12 3.59 4.16 5.53 6.12a24.62 24.62 0 005.42 4l3.57 1.18h.36c4 5.64 7.91 11.31 12.09 16.8 1.49 2 3 3.92 4.49 5.86.34 2.07.65 4.14 1 6.21a8.91 8.91 0 003 5.81 8.58 8.58 0 006.22 2 7.65 7.65 0 001.49-.27c.17.19.35.37.52.55 2 2 4.71 3 7.25 4a9.58 9.58 0 007.08.34 9.11 9.11 0 005.09-4.63c.8-1.64 1.7-3.21 2.37-4.91a19.87 19.87 0 001-9.08 39.1 39.1 0 00-1.56-7.16c-.74-2.64-1.85-5.2-2.84-7.75a116.8 116.8 0 00-7.09-14.55l-.3-.54c-.86-2.11-2-4.15-3-6.17q-2.53-5-5.43-9.87a172.25 172.25 0 00-12.54-17.8c-7.14-9.09-15.05-17.57-22.94-26a50.54 50.54 0 00-5.25-5.2c-.39-.32-.79-.62-1.21-.9q-5.49-6.06-11-12.06c-2.61-2.8-5.23-5.57-7.92-8.3-1.35-1.38-2.71-2.75-4.06-4.12a35.1 35.1 0 00-5.5-5.06 9.08 9.08 0 00-3.52-1.9 35.5 35.5 0 00-5.45-1.42 9.34 9.34 0 00-4.42.22 59.78 59.78 0 00-8.42-7.82 9.2 9.2 0 00-5.4-1.93 7.63 7.63 0 00-2.69.49z')
+    path.cls-2(d='M325.27 2058.78a17.21 17.21 0 00-7.18 2.42 26.17 26.17 0 00-7.46 6.8 65.35 65.35 0 00-5.94 9.52c-1.94 3.6-3.64 7.3-5.28 11-2.23 5.12-4.24 10.38-6.17 15.63-4.18 11.4-8.17 22.85-12.07 34.36q-5.39 15.9-10.11 32c-1.41 4.82-2.89 9.67-4.07 14.55-1.48 6.13-3.54 12.47-3.31 18.83a11.42 11.42 0 0012.32 10.49 10.66 10.66 0 003-.67c-.93 1.87-1.88 3.73-2.89 5.55-.31.41-.63.8-1 1.2h-.19a36.18 36.18 0 01-3.59-.8 12.24 12.24 0 00-13.77 16.22c1 2.67 3.38 5.88 6.21 6.83 1.24.42 2.49.83 3.74 1.23l-4.76 6.8a9.5 9.5 0 00-2.08 6.47 8.87 8.87 0 009.57 8.12 8.61 8.61 0 006-3.1c3.81-5.46 7.61-10.91 11.48-16.33 2.4-3.36 4.9-6.67 7.31-10a28 28 0 002.56-3.67 236.3 236.3 0 0017.12-30.41c2.3-4.78 4.21-9.71 6.32-14.58 2.36-5.4 4.71-10.81 7-16.24 2.17-5.11 4.35-10.2 6.12-15.45 2-5.9 3.69-11.89 5.4-17.87 1.52-5.34 2.47-10.87 3.52-16.31.53-2.7.86-5.45 1.2-8.17s.71-5.52.86-8.29c.35-6 .78-12.16-.16-18.15a94.31 94.31 0 00-2-10 47.28 47.28 0 00-1.72-5.33 48.27 48.27 0 00-2.83-5.49 23.31 23.31 0 00-3.06-3.6 30.57 30.57 0 00-3.22-2.15 17 17 0 00-6-1.44h-.89zm-2 36.38v.07c.17 1.67.23 3.35.26 5a11.61 11.61 0 00-1.68-.45c-.11-.17-.22-.35-.34-.51.57-1.39 1.15-2.77 1.75-4.14zm-46.92 124.43a11.79 11.79 0 01-.9.84l.92-.84zm13.2-341.81c-8.48 2.49-15.53 8-21.82 14a106.07 106.07 0 00-14.21 17.22 168.41 168.41 0 00-12.74 22.2 232.05 232.05 0 00-13.95 36.73c-1.53 5.43-2.86 10.87-3.91 16.41a144.79 144.79 0 00-2 17.62c-.39 6.09-.73 12.15-.56 18.24.15 5.49 4.87 10.22 10.08 11.21a12.54 12.54 0 0014.52-9.91c.9-5.06 1.61-10.13 2.19-15.24.53-4.7.93-9.47 1.87-14.13s2-9.45 3.05-14.16c.91-4 2.16-7.84 3.37-11.72 5.13-14 10.8-27.7 18.69-40.4a102.69 102.69 0 0113.58-16.62 54.93 54.93 0 016.9-5.08c.32-.15.65-.28 1-.42a83.49 83.49 0 01.43 11.73 207.7 207.7 0 01-3.65 26.88c-2 9.31-4.49 18.41-7.24 27.51-1.38 3.83-2.81 7.59-4.43 11.35-1.76 4.07-3.87 8-5.94 12q-3.3 6.25-6.76 12.41c-2.43 4.38-4.8 8.79-7.39 13.07a76.5 76.5 0 01-7.95 9.12c-4.53 4-9.17 8-13.82 11.85-2.49 2.09-4.31 4.34-4.93 7.62a12 12 0 009.58 14.05c3 .56 6.77 0 9.14-2 4.89-4.1 9.81-8.17 14.56-12.44a86.74 86.74 0 007-6.6c1.23-1.36 2.45-2.73 3.64-4.13a63.14 63.14 0 006.05-9.05c5.78-10 11.57-19.91 17-30.08a126.12 126.12 0 007-15.79c2.22-6 4-12.18 5.91-18.3a217.7 217.7 0 007-32.22 183.46 183.46 0 001.61-18.29 75.92 75.92 0 00-.06-7.84 50.91 50.91 0 00-1.44-9.09 22.26 22.26 0 00-2.56-5.89 30 30 0 00-4.82-5.86 23.57 23.57 0 00-16.87-7 24.83 24.83 0 00-7 1zm4.05 24.38a7.41 7.41 0 011.16.35l.07.06-1.23-.41zm4.24.92a8.44 8.44 0 01.87 0h-.87zm-2.28.23l-.37.08.37-.08zm.31.69l.12.56-.12-.56zm.38 0a7.49 7.49 0 01.36.69l-.36-.69z')
+    path.cls-2(d='M299.67 1893.88c-8.41.8-13.87 8.71-18.63 14.81-2.58 3.32-4.8 7-7.06 10.49-2.06 3.22-4 6.49-5.92 9.8-2.2 3.83-4.28 7.73-6.29 11.66a14.78 14.78 0 00-2 2.6c-2.32 3.7-4.59 7.43-6.93 11.12q-3.23 4.83-6.47 9.63c-1.38 2-2.3 3.93-2.08 6.49a8.85 8.85 0 001 3.39c-2 4.15-3.89 8.33-5.67 12.57-2.32 5.54-4.51 11.38-5.33 17.35a19.44 19.44 0 00.58 9.31 13.68 13.68 0 0010 8.4h.24c-.56 1.43-1.12 2.85-1.67 4.27a14.43 14.43 0 00-.53 10.82 14 14 0 007.06 7.77c6.72 3.22 15.47.37 18.58-6.54 5.6-12.4 10-25.36 14.25-38.28 2.54-7.8 4.89-15.67 6.87-23.64.7-1.85 1.4-3.71 2.13-5.56q2.09-5.3 4.16-10.6c.17-.42.33-.84.49-1.25a96.23 96.23 0 005-11.16c.34-1.05.68-2.08 1-3.12a13.41 13.41 0 00.19-3.15l2.39-4.24c1.27-2.28 2.5-4.58 3.75-6.87s2.23-4.41 3.22-6.68c.67-1.53 1.2-3.11 1.72-4.69a39.37 39.37 0 002.11-7.86 16.46 16.46 0 00-.49-7.55 13 13 0 00-3.85-5.92 15.39 15.39 0 00-10.08-3.5c-.59 0-1.17 0-1.76.08zM83.72 1672.13c-2.32.67-5.14 3-6.73 4.71a28.74 28.74 0 00-4.48 6.84 42.6 42.6 0 00-3.59 11 41.7 41.7 0 00-.07 11.86c.51 4.08 1.6 8.14 2.49 12.14.68 3.13 1.56 6.24 2.46 9.33 2.17 7.48 4.32 15 7.52 22.13 3 6.73 6.73 13.32 10.4 19.72q4.73 8.2 9.41 16.43 2.78 4.88 5.6 9.72c6.08 4.93 12.14 9.83 17.71 15.35 5.8 5.73 11.12 12 17.22 17.42 1.53 1.36 3 2.75 4.64 4l5 3.81c3.16 2.44 6.38 4.8 9.4 7.41s6.27 5.48 9.23 8.41c2.77 2.75 5.4 5.63 8 8.52 4.72 5 9.44 9.94 13.32 15.54 4.08-5.28 3.72-13.93-1.86-18.13a109.52 109.52 0 01-14-12.91c-6.28-7.1-12.38-14.34-18.1-21.91-6.76-8.94-13.13-18.1-19.23-27.51-5.3-8.17-10.17-16.65-15-25.09-5.12-8.91-10.26-17.81-15.23-26.82a99 99 0 01-5-11.81l-2.07-6.06c-1.91-5.57-3.52-11.37-4.87-17.13a52.44 52.44 0 01-1.28-9.49c.11-.86.26-1.7.45-2.56 0-.06.05-.12.08-.19 1.22.24 2.43.52 3.64.85a71.5 71.5 0 0111.17 5c7.55 5.35 14.19 11.91 20.74 18.41a202.12 202.12 0 0117 20.67c5.48 7.93 9.71 16.57 14.16 25.08-.46-.86-.91-1.73-1.37-2.6 4.86 10.59 9.95 21.25 12.77 32.6a60.33 60.33 0 01.92 12.95c-.09 2.49-.19 5-.28 7.45 0 .36-.05.73-.06 1.1-.06 1-.11 2-.16 3a11.14 11.14 0 002 5.5 11.18 11.18 0 0015.58 2.75c2.12-1.49 4.42-4.36 4.57-7.08.28-4.62.46-9.22.63-13.84q.12-3.23 0-6.43c-.1-4.4-1.19-8.76-2.15-13a103.25 103.25 0 00-4.56-14c-.94-2.49-1.81-5-2.89-7.42-6.75-15.13-13.77-30.38-23.36-43.95-4.65-6.57-10-12.57-15.26-18.67-4.31-5-9.06-9.67-13.84-14.23-6.83-6.51-14.41-12.23-23.3-15.63-5.2-2-10.46-3.94-16.08-4.32C94 1671 93 1671 92 1671a28.39 28.39 0 00-8.24 1.18z')
+    path.cls-2(d='M81.25 1684.93a15.08 15.08 0 00-7.36 9.38c-1.83 6.87 1.66 13.33 4.07 19.55a177.59 177.59 0 009.52 20c5.28 9.82 10.55 19.63 16.14 29.28 2.64 4.56 5.38 9.06 8.4 13.37 2.27 3.24 5.44 6.39 9.47 7.15a14.32 14.32 0 001.73.2c2.57 4.41 5.16 8.81 7.88 13.14q7.71 12.35 15.5 24.62c2.07 3.24 4.17 6.47 6.25 9.71 1.27 2 2.6 3.91 3.91 5.87.45.72.87 1.46 1.27 2.2a11.68 11.68 0 002.2 2.71l2.75 4c2.36 2.07 4.68 4.19 6.92 6.4 2.77 2.75 5.4 5.63 8 8.52a144.55 144.55 0 0112.47 14.34c1.14 0 2.3-.06 3.45-.15a30.08 30.08 0 006.13 4.28 13.54 13.54 0 0016.16-3.45c4.61-5.43 4.26-14.53-1.56-19.06a26.79 26.79 0 01-2.17-1.83c-2.43-2.86-4.67-5.89-7-8.81-1.48-1.84-3-3.64-4.4-5.54-.64-2.3-1.38-4.59-2.16-6.84-3.44-10-8.4-19.56-13.15-29q-5.23-10.38-11.14-20.45-2.79-5.34-5.83-10.54a153.59 153.59 0 00-8.81-13.71q-4-5.49-8.08-11c-3.84-5.53-7.74-11.07-11.92-16.34q-4.35-5.47-8.69-10.94l-7.94-10q-7.68-9.69-16.27-18.57c-3.89-4.42-7.9-9.2-13.91-10.52a14.64 14.64 0 00-3.25-.36 17.17 17.17 0 00-8.55 2.47zm14.1 11.64v1a8 8 0 010-1z')
+    path.cls-2(d='M280.38 1681c-2.06.42-4.05.85-6 1.46a39.89 39.89 0 00-7.37 3.67 55 55 0 00-8.46 6.27 85.47 85.47 0 00-9.15 9.3c-3 3.51-5.78 7.26-8.6 10.93-3.91 5.08-7.37 10.6-10.84 16a156.21 156.21 0 00-8.44 14.43c-2.51 5-4.83 10.12-7.07 15.28-4.49 10.39-9.14 20.74-13.18 31.32-2.71 7-5 14.28-7.26 21.46a15.26 15.26 0 008.39 16.6 15.18 15.18 0 002.59 1 10.58 10.58 0 000 1.49 11.47 11.47 0 004 7.76 11.79 11.79 0 008.3 2.66 161 161 0 0018-1.32c2.29-.31 4.54-.67 6.8-1.14a65.32 65.32 0 006.62-1.65 32.24 32.24 0 005.4-2.66 119 119 0 0012.82-8.55 249.52 249.52 0 0026.73-22.31 79.57 79.57 0 005.48-6.27 73.56 73.56 0 009.91-15.3c.6-1.26 1.21-2.52 1.8-3.77a79.93 79.93 0 004.1-11.27c.84-2.76 1.41-5.62 2.05-8.42a126.26 126.26 0 002.4-16.78c.55-6.24.87-12.56 1-18.82a90.8 90.8 0 00-.39-10.69 55.78 55.78 0 00-2.53-11 27.4 27.4 0 00-8.35-11.94 42.65 42.65 0 00-5.8-3.86 26.53 26.53 0 00-3.81-1.9 29.3 29.3 0 00-9.49-2.37c-1.35-.09-2.65-.15-3.93-.15a28.22 28.22 0 00-5.67.52zm7.34 28.34c.4.06.8.14 1.21.23q1.14.5 2.25 1.08l.33.27a36.67 36.67 0 011.27 3.7c1.29 7.77.92 15.77.68 23.61a98.1 98.1 0 01-1.15 11.21c-.83 4.71-1.68 9.44-3 14.06a81.41 81.41 0 01-6.71 14.15c-2.3 3.25-4.81 6.32-7.4 9.35a58.43 58.43 0 01-5.15 5.17c-3.71 3.36-7.47 6.65-11.36 9.81-5.5 4.47-11.08 9-17.24 12.54a30.66 30.66 0 01-4.23 1.37 124.5 124.5 0 01-13.17 1.58c5.67-13.19 10.66-26.66 16.15-39.93 3.14-7.61 6.34-15.15 9.91-22.56a180.55 180.55 0 0110.4-17.91c5.15-7.71 10.53-15.43 17-22.07a60.62 60.62 0 016.39-4.77c.64-.27 1.3-.51 2-.72s1.22-.14 1.83-.17zm4.4 2.41l.25.5-.25-.5z')
+    path.cls-2(d='M283.63 1697c-2.15 1.86-4.29 3.74-6.33 5.73-2.32 2.25-4.12 5.15-6 7.75-1.43 2-2.79 4-4.18 6l-7.05 10.09c-5 7.2-10.06 14.38-15 21.65-.68 1-1.36 2.1-2 3.15a14.28 14.28 0 00-1.39 7.53 14.42 14.42 0 001.1 4.49l-.27.84v.5c-3.5 4.83-7 9.68-10.36 14.58-1.81 2.08-3.6 4.18-5.39 6.3-.83 1-1.62 2-2.43 3a23.72 23.72 0 00-2.71 3.7 12.19 12.19 0 00-1.72 5.4q-2.84 4.38-5.65 8.79a130.27 130.27 0 00-7.8 13.82 36.28 36.28 0 00-1.55 4.07 27.25 27.25 0 00-1.56 6.25c-.25 2.45-.37 5.74.69 8.09.12.26.24.52.35.78a13.38 13.38 0 003.91 5.6 12.26 12.26 0 004.07 2.64l3.31 1.09c1.45.09 2.91.17 4.37.22l.9-.17a19.87 19.87 0 004.57-1.14 33.7 33.7 0 005.85-3 80.84 80.84 0 0012.63-9.29 176.76 176.76 0 0024.74-27.12c3.64-4.89 7.06-10 10.2-15.27 1.54-2.57 3-5.14 4.35-7.8s2.58-5.58 3.81-8.41a99.83 99.83 0 006.75-22.51c.39-2.28.81-4.55 1.06-6.85.76-1.13 1.51-2.26 2.25-3.4a24 24 0 002.72-5.6c.8-2.38 1.23-4.46.33-6.91a8.71 8.71 0 00-1-2l.21-.35c1.29-2.19 2.49-4.44 3.63-6.72.51-1 1-2.09 1.37-3.16a34.19 34.19 0 002.06-6 30.56 30.56 0 00.34-4.88 15.57 15.57 0 00-3.18-7.93 14.51 14.51 0 00-9.06-5.85 14.9 14.9 0 00-2.73-.25 12.77 12.77 0 00-8.14 2.59zm-117.97-372.7a18 18 0 00-5.32 1.4 22.39 22.39 0 00-7.45 5.58c-.58.91-1.17 1.81-1.76 2.72a14.18 14.18 0 00-1.74 3.26 43.86 43.86 0 00-2.06 6.5 51.77 51.77 0 00-1.28 11.77c-.26 8.51.83 17.08 2 25.48a166.56 166.56 0 007 30.65c1 2.93 2.3 5.81 3.44 8.7.79 2 1.62 4 2.51 5.94 4.8 10.57 9.54 21.19 14.63 31.62q12.36 25.3 25 50.45c.54 1 1.07 2.06 1.62 3.1a13.49 13.49 0 0015.75 4.93c6.39-2.34 10.68-10.06 8.28-16.67 2.7-4.15 5.59-8.3 7.41-12.93 2.23-5.68 2.28-12.12 2.44-18.13a124.27 124.27 0 00-.76-16.25 103.41 103.41 0 00-2.7-13.48c-2-8.26-4-16.5-6.17-24.71-2-7.37-4.29-14.63-6.79-21.82-1.26-3.6-2.85-7.1-4.4-10.58-1.8-4.06-3.71-8-5.77-12l1.35 2.58q-1.22-2.34-2.45-4.68a2.12 2.12 0 01.11.21 180 180 0 00-19.06-29.54c-1.81-2.25-3.76-4.39-5.78-6.45a37.16 37.16 0 00-7.69-5.61 17.09 17.09 0 00-8.76-2.09h-1.59zm8.92 56.44c-.84-4.35-1.41-8.78-1.89-13.18a115.84 115.84 0 01-.89-13.41 201.67 201.67 0 0119.38 28.7c2.37 4.67 4.65 9.38 6.77 14.17 2.38 5.4 4.32 11 6.25 16.55a367.69 367.69 0 0110.25 36.12 101.68 101.68 0 011.66 22.58c-.15 1.82-.33 3.62-.63 5.41-.84-1.62-1.66-3.24-2.48-4.86q-6.33-12.6-12.56-25.24c-3.82-7.74-7.39-15.62-11-23.46-1.86-4-3.8-8-5.45-12.13q-1.75-4.32-3.48-8.65a97.34 97.34 0 01-4.27-13.86c-.56-2.91-1.11-5.82-1.67-8.74zm33.85-13c-.41-.8-.82-1.6-1.24-2.38.41.79.83 1.58 1.24 2.38z')
+    path.cls-2(d='M170.34 1355.42a11.63 11.63 0 00-4.94 3.44c-2.15 2.53-2.76 5.36-2.76 8.59 0 2 0 4 .16 6.06a47.32 47.32 0 001.44 6.72c.84 3.6 2.18 7.1 3.37 10.6 1 2.91 2.06 5.79 3.11 8.68 1.91 5.23 3.78 10.49 5.77 15.69 4.29 11.18 8.69 22.28 13.47 33.26 4.52 10.38 9 20.75 13.71 31.07 2 4.53 4 9.12 6.15 13.57 1.53 3.11 2.63 6.34 4.3 9.4a20 20 0 003.38 4.21 15.27 15.27 0 003.73 2.86c.35.61.71 1.22 1.09 1.81a30.58 30.58 0 004 4.31 14.78 14.78 0 0018.06.84c6.49-4.55 8.41-14.1 3.63-20.61-.49-.67-.93-1.34-1.36-2q-1-2.16-2-4.34v-.47a88.72 88.72 0 00.47-8.93 35.07 35.07 0 00-.76-5.48c-.54-3.07-1.3-6.11-2-9.15-3.1-13.11-8.2-25.86-13.74-38.11-4.93-11-9.9-21.9-15.14-32.71-2.81-5.81-6-11.52-9.31-17-.61-1-1.28-2-1.92-3s-1.38-2.08-2.13-3.08a20.49 20.49 0 00-6.37-5.57 13.81 13.81 0 00-6.34-2.08l-.35-.64a18.71 18.71 0 00-5.05-5.76 12.55 12.55 0 00-7.73-2.79 11.35 11.35 0 00-3.94.71z')
+    path.cls-2(d='M210.69 1485.45a14.44 14.44 0 00-5.88 9.1l-.2 3.84a14.25 14.25 0 002.55 7.06c2.25 4.24 4.44 8.52 6.77 12.72a14.2 14.2 0 0024.45-2c1.55-3.22 2.06-7.69.54-11-2.51-5.51-5.41-10.82-8.23-16.16-1.65-3.09-5.82-5.26-9.1-5.88a14.57 14.57 0 00-2.64-.24 14.38 14.38 0 00-8.26 2.59z')
+    path.cls-2(d='M367.38 1416c-4.29.91-8.53 1.91-12.71 3.21a206.42 206.42 0 00-22.89 9c-5.39 2.4-10.7 5-16 7.53-5.64 2.7-11.25 5.41-16.85 8.19s-11.25 5.66-16.56 8.9a220.76 220.76 0 00-26.52 18.46c-5.82 4.86-10.92 10.08-14.56 16.77-2.35 4.3-1.6 10.07 1.14 14a13.4 13.4 0 002.45 2.65 10.51 10.51 0 00-4.79 7c-1.07 5.64 2.79 11.8 8.63 12.67 3.36.51 6.71.94 10.08 1.39 3 .41 6 .47 9 .7 6.46.49 13 .44 19.48.49a179.92 179.92 0 0032.35-2.64 49.64 49.64 0 0011.25-3.23 107.76 107.76 0 0010.39-5.41 132.83 132.83 0 0014.47-9.65l8.53-6.53c2.18-1.67 4.2-3.56 6.28-5.35 5-4.31 9.71-8.86 14.45-13.44a152 152 0 0011.29-12.89 131.37 131.37 0 0010.63-15.62 25.63 25.63 0 002.28-5.1c1-2.83 1.88-5.74 1.56-8.8a44.9 44.9 0 00-1.43-7c-.25-.51-.49-1-.74-1.53a16 16 0 00-2.66-4.51 26.44 26.44 0 00-10.95-8.32c-5-2.06-10.09-2.32-15.46-2.53h-1a54.39 54.39 0 00-11.13 1.57zm16.55 20.92c0 .43 0 .85-.06 1.27l.06-1.27zm-1.79 5.38c-1 1.85-2 3.66-3.1 5.47a135 135 0 01-8.78 11.69c-1.67 1.95-3.29 4-5.09 5.82l-7.09 7.24c-3.13 2.85-6.25 5.72-9.57 8.35-7.88 6.26-15.79 12.34-24.6 17.27a46.6 46.6 0 01-7.5 3c-1.53.46-3.12.77-4.69 1.11l2-.44a206.32 206.32 0 01-21.3 2.72c-7.53.55-15.05.47-22.59.41l-6-.4a15 15 0 001.22-.87c1.18-.93 2.34-1.88 3.5-2.84 2.23-1.85 4.56-3.6 6.87-5.36 4.44-3.39 8.92-6.77 13.42-10.09 4.95-3.64 9.94-7.13 15.21-10.31 4.92-3 10-5.73 15-8.48 17.52-9.09 35.24-18.62 54.46-23.39a52.23 52.23 0 018.56-.91zm2.58.39a9.25 9.25 0 01.61 1.17l-.62-1.17z')
+    path.cls-2(d='M377 1431.59c-9.42 3-18.58 6.92-27.76 10.57-8.44 3.36-16.8 6.95-25.15 10.53l-12.62 5.45c-3.65 1.58-7.35 3.09-10.89 4.9-8.43 4.31-16.67 9-25 13.46a90.31 90.31 0 01-11.47 4.83c-2.28.77-4.56 1.56-6.84 2.35-3.85 1.34-7.87 2.3-11.21 4.76a13.53 13.53 0 00-5.42 8.4 13.29 13.29 0 004.44 12.57c3.25 3.16 7.41 4.1 11.74 4.48 3.17.28 6.37.32 9.55.33h14.8c2.45 0 4.91 0 7.38-.07a132.1 132.1 0 0020.16-2.78 119.68 119.68 0 0018.81-4.94c2.76-1 5.49-2.19 8.12-3.47 2.84-1.39 5.67-2.77 8.48-4.21 2.07-1.07 4.21-2.14 6.25-3.3a34 34 0 007.52-6 14.39 14.39 0 003.19-6.67 14.91 14.91 0 00.25-2.49l1.91-.83c5-2.14 7.89-7.48 5.94-12.79a9.61 9.61 0 00-2.36-3.66q4.55-2.31 9.16-4.49c1.54-.72 3.1-1.42 4.66-2.11 1-.44 2-.91 3-1.39 1.39-.71 2.75-1.43 4.11-2.2 1.88-1 3-3.12 4.06-4.87 2.1-3.57 1.29-8.69-1-11.93a11.72 11.72 0 00-9.74-5 13 13 0 00-4.06.65zm-122.1-254.73c-4.7 1.26-8.21 3.94-11.57 7.34a26.81 26.81 0 00-3.67 5.68c-1.43 2.51-2.07 5.49-2.94 8.21-2.19 6.83-2.72 14.3-3.19 21.41a207 207 0 00-.1 27.62 177.8 177.8 0 003.44 23.65c1.15 5.63 2.2 11.3 3.55 16.88 2.17 8.94 4.29 17.89 6.84 26.73a237.28 237.28 0 008.47 24.74c1.66 4.07 3.53 8.05 5.35 12.06 2.82 6.23 5.67 12.81 11 17.33a15.38 15.38 0 0023.79-5.07c2.27-3.52 2.33-7.71 2.34-11.73v-.21c2-6 4-12.15 5.42-18.36a173.22 173.22 0 003.5-24.82c.74-9 1-18.11 1.42-27.17.23-5 .52-10 .47-15-.08-9-1.88-17.77-3.9-26.53-1.33-5.77-3-11.5-4.84-17.12s-3.69-11.14-5.85-16.61c-3.29-8.38-7.39-17-14.33-23a28.4 28.4 0 00-8.33-4.9 34.75 34.75 0 00-6.75-1.9 19.61 19.61 0 00-3.3-.28 26 26 0 00-6.79 1zm11.93 28.14zm-1.3 10.4q2 4.74 3.74 9.59a12.57 12.57 0 00-4.48.64c0-.9 0-1.8.08-2.7.16-2.51.36-5 .66-7.53z')
+    path.cls-2(d='M420.23 1264.34a86.06 86.06 0 00-13.49 1.58 184.81 184.81 0 00-24.94 6.44 158.72 158.72 0 00-25.07 11.53c-9.68 5.28-19 11.23-28.23 17.26a112 112 0 00-11.2 8.44q-3.76 3.23-7.37 6.62a33.17 33.17 0 00-6.21 8.19c-2.32 4.18-1.55 9.88 1.09 13.7a11.41 11.41 0 00.06 13c3 4.09 5.91 8.33 9.82 11.64 7 5.91 16.78 7.12 25.55 7.4 13 .41 25.81-1.9 38.49-4.52a153 153 0 0018.56-5.09 59.68 59.68 0 007.91-3.55 95.38 95.38 0 0010.05-5.9c3.19-2.16 6.23-4.56 9.31-6.88 6.34-4.8 12.76-10 18-16a66.39 66.39 0 007.05-10.15c2.24-3.74 3.47-8 4.77-12.11a43.07 43.07 0 001.8-10.14 54.52 54.52 0 00.13-6.76c-.33-1.69-.69-3.39-1.08-5.07a13.54 13.54 0 00-1.36-3.06 24.48 24.48 0 00-3.72-5.82 25 25 0 00-4.78-4.44 40 40 0 00-5.75-3.35 47.71 47.71 0 00-6.31-2.12 24.07 24.07 0 00-5.53-.75c-1.92-.12-3.8-.19-5.7-.19h-1.88zm4.8 28a27.37 27.37 0 012.83.47l.9.41v.59a51.74 51.74 0 01-1.51 7.59 46.68 46.68 0 01-3.18 6.61 63.89 63.89 0 01-6.91 7.9c-7.87 7-16 14-25.23 19.24a116.55 116.55 0 01-25.3 8.41c-9.51 2-19.1 3.41-28.82 3.24a44.4 44.4 0 01-6.47-1c-.72-.29-1.42-.6-2.13-.94l-1-.8c-.8-1-1.59-2.06-2.36-3.1a67.07 67.07 0 009.43-7.27c3.48-3 7.11-5.81 10.87-8.42a344.65 344.65 0 0131-19.7 154.66 154.66 0 0114.4-6.31 137.91 137.91 0 0117.6-5.13 88.3 88.3 0 0115.8-1.78zm4.15 1.41a9.75 9.75 0 01.29 1.3c-.1-.43-.19-.86-.29-1.3zm.43.37a12.9 12.9 0 01.6 1.17l-.6-1.17z')
+    path.cls-2(d='M403.81 1286.68a15.86 15.86 0 00-10.75 5.52l-.75 1.16q-1.67 1.23-3.39 2.37c-2.58.72-5.14 1.47-7.7 2.2a181.46 181.46 0 00-25.78 9.14 97.44 97.44 0 00-9.22 4.84 18.37 18.37 0 00-7.31 7.44 12.41 12.41 0 00-.7 1.78 15.31 15.31 0 00-1 1.37c-1.75.88-3.5 1.8-5.26 2.71-1.5.47-3 1-4.48 1.48-2.17.76-4.28 1.59-6.38 2.5s-5.12 2-6.81 3.38c-2.5 2-4.62 3.83-6 6.77a15.34 15.34 0 00-1.44 8.56 16.31 16.31 0 005.51 10.73 16 16 0 0015.61 2.78 131.93 131.93 0 0016-7.27l2.59-1.29q6.58-2.56 13-5.51 3.15-1.44 6.27-2.94c1.42-.12 2.84-.25 4.26-.4 4.26-.44 8.51-1.09 12.75-1.69q3-.42 5.89-1a59.56 59.56 0 0012.9-4.28c4.29-2 8.4-4.33 12.53-6.57 1.25-.69 2.46-1.46 3.69-2.18a55.14 55.14 0 009.36-7.61 27 27 0 002.72-4 18.85 18.85 0 001.78-6 13.55 13.55 0 00-.59-7.08 17.59 17.59 0 00-4.61-6.73 17.85 17.85 0 00-4-2.85 24.54 24.54 0 00-5.56-2 15.73 15.73 0 00-11.75-5.34h-1.29zm-148.07-94.41a11.12 11.12 0 00-6.16 5.59c-2.17 4.44-.9 9.53-.27 14.2.49 3.56.71 7.17 1 10.74a10 10 0 005 7.78c2 10.32 4 20.64 5.75 31 .54 3.2 1.57 5.87 4.12 8a11.88 11.88 0 008.59 2.76c6.29-.52 11.48-6.32 10.79-12.72-1.07-10-2.62-19.79-4.44-29.62-.59-3.15-1.4-6.29-2.1-9.41-.47-2-.91-4.06-1.5-6.07-.73-2.48-1.45-5-2.18-7.44a38.4 38.4 0 00-3.63-8.58 16.78 16.78 0 00-3.3-4c-1.81-1.54-3.64-2-5.85-2.68a11.13 11.13 0 00-5.85.48z')
+    path.cls-2(d='M425.19 1290.51q-6 .67-12 1.4a10 10 0 00-8.71 7.84c-3.27.64-6.55 1.21-9.84 1.69-6.17.88-12.35 1.71-18.52 2.57a7.68 7.68 0 00-6.93 8.17c.33 3.94 4.07 7.49 8.17 6.93 10.23-1.42 20.48-2.62 30.69-4.22 4.16-.65 8.29-1.42 12.42-2.2 5.4-1 10.84-2 16.2-3.14a17 17 0 003.68-1 10.75 10.75 0 004.28-3.22 9.52 9.52 0 001.66-9.32 9.38 9.38 0 00-7.08-6 26.73 26.73 0 00-4.18-.31 85.56 85.56 0 00-9.85.86zm43.06-356.19a22.09 22.09 0 00-5.06 2.79 15.52 15.52 0 00-3.69 4.07c-4.78 7.15-6.43 15.66-7.89 24a165.71 165.71 0 00-2.09 24.68 169.32 169.32 0 001.49 25.45c1 7.7 2.53 15.31 4 22.94 1.1 5.94 2.41 11.84 3.76 17.72a163.06 163.06 0 005.32 19 73.85 73.85 0 004 9.16 53.41 53.41 0 003.3 5.9 49.5 49.5 0 005.19 6.13 12.63 12.63 0 0019.55-4.17 12.3 12.3 0 00.47-9.8c-2-4.49-4.57-8.7-7-13-.18-.39-.35-.78-.53-1.16a8.89 8.89 0 002.79-.52c1.91-.71 4.18-2.4 4.86-4.42 2.25-6.6 4.1-13.24 5.74-20a108.66 108.66 0 002.63-18.49 210.8 210.8 0 00.09-26 142.22 142.22 0 00-4-24.69c-1.24-5.24-3-10.36-4.63-15.48-.8-2.49-1.74-4.91-2.65-7.36a38.71 38.71 0 00-4-7.94 22.78 22.78 0 00-10-7.93 19.59 19.59 0 00-7.5-1.64 11 11 0 00-4.19.75zm3.69 19.12a9.9 9.9 0 01.87.56l-.87-.56zm-.78.09l.5.16-.5-.16zm-.1.44h.74-.74zm3.93 3.12c1.29 2.94 2.45 5.93 3.52 9a205.52 205.52 0 016.4 21 160.85 160.85 0 012.46 37.18 115.43 115.43 0 01-1.65 13.34c-.42 2.19-.94 4.36-1.43 6.54s-1.09 4.36-1.72 6.52c-3.06-9.86-5.34-20-7.63-30-1.25-6.86-2.36-13.72-2.95-20.67a159.29 159.29 0 01-.37-20 120.1 120.1 0 013.38-22.91z')
+    path.cls-2(d='M486.72 940.89a11.81 11.81 0 00-4.81 7.44 11 11 0 00-.19 2.33 12.11 12.11 0 00-4.48 3.15 14.3 14.3 0 00-2.91 6.17c-.42 3.65-.08 7.19-.12 10.83 0 3.21.09 6.42.25 9.62a9.5 9.5 0 00-5.9 7.15c-1.57 10.24-.38 20.6.42 30.86.23 3.1.47 6.21.71 9.31.19 2.52.63 5 .95 7.56.68 5.37 1.4 10.74 2.2 16.09 0 1-.07 1.93-.11 2.89-.08 1.38-.16 2.75-.25 4.12-.05.89-.09 1.77-.14 2.66a9.88 9.88 0 001.76 4.85 10 10 0 001.46 1.66c.15.74.29 1.48.44 2.23.43 2.18.9 4.35 1.39 6.52a29.83 29.83 0 004 10.09 14.14 14.14 0 005 4.19 11.34 11.34 0 008.3.39c4.55-1.24 7.88-5 9.53-9.28a39.35 39.35 0 002.27-10.76 16.37 16.37 0 005.16-3.58 23.14 23.14 0 005.25-10.38c.47-1.69.83-3.37 1.14-5.11a105.84 105.84 0 001.32-12.94 166.43 166.43 0 00.26-21.42q-.42-5.64-.85-11.29c-.45-5.82-1.26-11.57-2-17.35q-1.44-11.18-3.86-22.17a83.27 83.27 0 00-2.57-9.53c-.53-1.53-1.14-3-1.77-4.48a51.13 51.13 0 00-3.31-6.25 31.87 31.87 0 00-4.19-4.87 11.75 11.75 0 00-5.42-2.6 11.81 11.81 0 00-8.93 1.93z')
+    path.cls-2(d='M474.89 931.1c-3.77 4-4.17 10.56-3.18 15.67a82.81 82.81 0 002.09 8.23c.63 2 1.2 4.1 1.87 6.12a23.12 23.12 0 002.09 4.94c.4 3.83.76 7.66 1.14 11.48a221.18 221.18 0 011.35 25.6v.39c-.05 1.08-.11 2.17-.16 3.25a12.13 12.13 0 009.84 11c6.37 1.2 13.17-3.15 14.21-9.68 1.87-11.69-.11-23.49-1.79-35.08-.73-5-1.38-10-2.3-15q-.84-4.63-1.7-9.27a89.33 89.33 0 00-2.83-11.3c-1.23-3.81-3.8-7.46-7.57-9.08a11.76 11.76 0 00-4.68-1 11.42 11.42 0 00-8.35 3.79zm5.51 69.51v.75-.75z')
+    path.cls-2(d='M476.94 929.94a35.93 35.93 0 00-4.89 2.73c-2.34 1.73-3.59 3.86-5 6.3-.16.46-.33.92-.49 1.39a31.48 31.48 0 00-1.42 4.71c-.43 1.75-.76 3.51-1.05 5.29-.57 3.59-.8 7.24-1.13 10.85a166.39 166.39 0 00-.41 20.71 10.88 10.88 0 002.13 6.09c0 .5 0 1 .05 1.51.08 2 .2 4.08.34 6.12.1 1.41.3 2.81.53 4.21.35 1.63.7 3.24 1.07 4.84a17.94 17.94 0 002.75 6c1 1.2 2 2.36 3.09 3.47a13.74 13.74 0 006.35 3c3.78 1.23 8.6 0 11.82-2.23 6.12-4.29 7.4-11.72 7.91-18.64a245.23 245.23 0 00-.12-30.31c-.23-4.42-.46-8.84-.87-13.25-.15-1.64-.31-3.29-.61-4.9-.24-1.28-.48-2.56-.73-3.83-.72-3.49-1.62-6.47-4-9.26a13.11 13.11 0 00-5.1-4.33 14.68 14.68 0 00-6.12-1.38 9 9 0 00-4.12.88zm95.94 107.75c-8.25 1.19-16.5 2.51-24.78 3.45l-14.21 1.61a71.66 71.66 0 00-11.65 2c-3.18.93-6.32 2-9.47 3.07-6.49 2.17-9.78 9.83-7.49 16.12a12.45 12.45 0 002.77 4.4 13.77 13.77 0 00-6.9 6.65 14.15 14.15 0 003.56 16.68c5 4.5 11.29 7.53 17.28 10.53 4.75 2.38 9.62 4.66 14.54 6.69 14.72 6 30.77 10.27 46.78 10.09 6.28-.07 12.48-.44 18.74-1 16.58-1.4 34.05-3.75 48.23-13.11a48.62 48.62 0 008.86-7.85 24.47 24.47 0 005.65-11.8c.91-4.54.28-8.86-.78-13.27s-3.14-8-5.2-11.91a44.73 44.73 0 00-10.2-12.71 48.47 48.47 0 00-9.49-6.11 51.39 51.39 0 00-6.29-2.6 79.52 79.52 0 00-26.74-4.15c-11.11 0-22.33 1.62-33.21 3.19zm-21.48 28.77c6.39-.59 12.76-1.44 19.14-2.15 11.91-1.34 23.75-2.44 35.72-2.17a87.44 87.44 0 0113.13 2.33 48.68 48.68 0 016.48 3.09c1 .74 1.93 1.52 2.83 2.35a44.91 44.91 0 013.21 5c.45 1 .86 2 1.23 3-.95.69-1.93 1.35-2.94 2a73.1 73.1 0 01-11.6 3.87 249.93 249.93 0 01-26.6 3.14c-4.61.37-9.22.54-13.84.46a130.75 130.75 0 01-21.45-4.19c-5.88-2.11-11.58-4.6-17.33-7-3.27-1.39-6.51-2.89-9.75-4.35-1.33-.6-2.71-1.2-4.12-1.76 1.47-.48 2.94-1 4.41-1.39 7.07-1.22 14.36-1.55 21.48-2.2zm83.29 10.18v.06-.06z')
+    path.cls-2(d='M539.45 1055.76c-4.45.4-8.88 1-13.34 1.32-2.16.16-4.32.26-6.49.41-2.37.17-4.69.58-7 .84a14.79 14.79 0 00-8.36 26c3.18 2.7 6.72 3.45 10.78 3.46a30 30 0 007.13-1.13 35.23 35.23 0 014.82-.57c2.27-.11 4.54-.2 6.79-.48 5.28-.66 10.54-1.4 15.83-1.84h.72a16.75 16.75 0 00-.77 6.53 13.16 13.16 0 002.34 6.51c1.85 2.63 5.11 5.07 8.4 5.42a48.06 48.06 0 0015.46-.7c4.52-1 9-2 13.47-3.22 3.78-1.09 7.52-2.25 11.27-3.46l1.67-.56c.29-.08.59-.16.88-.27 2.26-.77 4.5-1.56 6.72-2.41 1.42-.54 2.77-1.19 4.18-1.75a14.24 14.24 0 001.48-.71c1.06 0 2.11 0 3.17.05 1.5.12 3 .24 4.5.38a56.16 56.16 0 007.78.27l1.22-.14c1.77-.35 3.55-.73 5.32-1.13a16.77 16.77 0 005.4-2.89c2.68-2.27 4.65-4.66 5.32-8.23.58-3.07.07-7.43-2.13-9.87-1-1.07-1.93-2.14-2.92-3.21a16.87 16.87 0 00-5.07-3c-3.37-1.28-6.68-1.61-10.21-2.08-4.26-.55-8.59-.72-12.89-1l-15.66-.84c-10.16-.56-20.29-1.46-30.46-1.84-5.24-.2-10.47-.39-15.7-.39-4.53 0-9.07.14-13.61.54zm25.23-245.88c-5 1.74-8.52 5.33-11.14 9.86a54.69 54.69 0 00-4.43 11.07c-2.58 8.08-3.62 16.72-4.36 25.12a255.47 255.47 0 00-.38 40.37c.49 6.88 1.49 13.62 2.53 20.43 1.24 8.18 2.55 16.37 4.22 24.48 2 9.83 4 19.68 6.51 29.42 1.1 4.37 2.27 8.7 3.64 13a36.27 36.27 0 002.09 4.93c.91 1.84 1.86 3.65 2.91 5.41a16.26 16.26 0 0010.76 7.19 15.28 15.28 0 008-.66 17 17 0 004.34-2.42 13.18 13.18 0 003.61 1.24 13.91 13.91 0 0016.06-10.93q1.17-5.58 2.36-11.17c1.1-5.19 2.39-10.35 3.2-15.6a177.42 177.42 0 001.77-24.7 195.74 195.74 0 00-1.62-26.17c-1.94-16.27-6.17-32.21-10.53-48q-2.09-7.54-4.42-15c-1.65-5.28-3.28-10.61-5.44-15.7a114.93 114.93 0 00-5.47-11.21c-3.75-6.7-11.11-11.9-18.8-11.91a16.51 16.51 0 00-5.45.92zm13.49 103.23c-1-5.77-1.86-11.47-2.47-17.29a237 237 0 01-1-32.41c.44 1.52.89 3 1.34 4.54 3.09 10.41 5.77 20.87 8.36 31.4a207.07 207.07 0 014.12 47.31c-.24 3.43-.6 6.84-1.06 10.25-1.8-7-3.47-14-5.08-21-1.5-7.59-2.95-15.17-4.24-22.8z')
+    path.cls-2(d='M581.76 871.07c-6.78.56-12.41 6.84-11.65 13.75.06.57.12 1.13.19 1.69a12.81 12.81 0 00-.8 1.34 23.56 23.56 0 00-2.46 8.69 98 98 0 00-.24 10.7c0 3.1.07 6.19.11 9.29s.09 5.9.16 8.84q-.51 3.36-1 6.7a12.13 12.13 0 001.43 7.79q.15 3.63.4 7.25c.17 2.51.32 5 .56 7.51.49 5.07.86 10 2.84 14.82a13 13 0 006.38 7c2.82 1.35 6.83 1.84 9.77.47 3.5-1.64 6.92-3.55 8.57-7.31a21.95 21.95 0 002.13-10.52c.38-5.07.77-10.16.78-15.25v-11.16c0-5.1-.15-10.23-.38-15.32-.27-6-.58-12.08-1-18.1-.18-2.61-.51-5.19-.88-7.77-.3-2.93-.62-5.88-1.2-8.76-.24-1.12-.48-2.23-.73-3.34a12.68 12.68 0 00-3.72-5.34 12.81 12.81 0 00-8.27-3h-1zm12 87.5l.4.77a8 8 0 01-.4-.77z')
+    path.cls-2(d='M674.25 936.24a103.07 103.07 0 00-11.65.6 121.72 121.72 0 00-14.25 2.83c-6.68 1.7-13.14 4.57-19.45 7.31-5.16 2.23-10.75 5.28-13.88 10-2.17.24-4.33.45-6.51.54a12 12 0 00-13.29 12.57 11.79 11.79 0 00-3.58 1.65 10.63 10.63 0 00-2.64 14.79c1.72 2.47 4 3.5 6.72 4.35 4 1.25 8.08 2.52 12.12 3.79q14.36 4.76 28.51 10.06c2.31.87 4.6 1.8 6.9 2.69a86.39 86.39 0 0016.67 4.82c7.19 1.24 14.63 1.45 21.92 1.89a99.33 99.33 0 0018.33-.19c6.12-.76 12.41-1.87 18.1-4.33a87.19 87.19 0 009.52-4.89 38.82 38.82 0 007.36-6.05c1.69-1.66 2.81-4 4-6a19.35 19.35 0 001.28-3.21q.88-2.45 1.56-5a35.4 35.4 0 00.84-5 50.23 50.23 0 00.54-7.82 42.17 42.17 0 00-2.37-12.21 29.33 29.33 0 00-7.62-11.25 33.32 33.32 0 00-11.36-6.9c-11.21-4.07-23.22-4.42-35-4.81-3.5-.12-7-.25-10.52-.25h-2.17zm21.26 29a87.2 87.2 0 0116.09 2.25c.78.32 1.54.66 2.29 1l1 .85.18.26c.33.79.61 1.58.87 2.39s.17 1.9.2 2.87a44.14 44.14 0 01-1 6c-.08.18-.17.35-.25.53l-.07.08a44.18 44.18 0 01-5.34 3.55 59.73 59.73 0 01-8.35 3 86.5 86.5 0 01-14.13 1.66c-5.42.15-10.82 0-16.23-.22a85 85 0 01-17.28-2.75c-2.44-.69-4.86-1.45-7.28-2.19l-9.92-3a13.62 13.62 0 006.52-7.93c2.08-.75 4.12-1.69 6.15-2.52a102.42 102.42 0 0113.57-4.54c10.91-1.72 22-1.73 33-1.3zM716 979.9l-.38.58.38-.58z')
+    path.cls-2(d='M620.23 954.53a9.13 9.13 0 00-3.72 5.75 8.43 8.43 0 00-.16 1.8 13.46 13.46 0 00-7.4 17c1.13 3.09 3.7 6.28 6.83 7.52a43.76 43.76 0 004.75 1.66c1.86.17 3.73.29 5.6.35 2.65-.09 5.26-.32 7.88-.67s5.38-1 8-1.56c1.41-.3 2.81-.61 4.2-.94 1.92.06 3.84.08 5.77 0h.8a12.34 12.34 0 009.09 7.16c9.38 1.4 18.91.63 28.34.24 5.5-.23 11-.81 16.48-1.32 8.66-.82 17.79-1.48 25.79-5.1 4.83-2.18 8.6-6 9.28-11.51a16.83 16.83 0 00-.88-7.93 14.23 14.23 0 00-4.77-6.3c-3.2-2.72-7.48-3.63-11.48-4.44a86.4 86.4 0 00-14.63-1.21c-9.72-.3-19.46.45-29.18 1q-6.47.36-12.92.8a13.35 13.35 0 00-7.16-3.9l-3.57-.18a13.25 13.25 0 00-6.55 2.35c-.26.16-.52.32-.79.47a57 57 0 01-6.91 2.57q-7.9-2.61-15.83-5.15a5.33 5.33 0 00-1.66-.24 9.76 9.76 0 00-5.25 1.73z')
+    path.cls-2(d='M591.18 874.38a12.37 12.37 0 00-7.29 15.72c2.3 6 4.63 12 7 18 4.22 11 8.48 22 11.29 33.47a68.32 68.32 0 011.13 12.51 44.11 44.11 0 01-1 5.73l-.28.66c-1.49-.31-3-.67-4.46-1-1.72-.39-3.46-.74-5.18-1.16-5-1.23-10-2.45-15-3.7-7.24-1.81-14.67 3.9-16 10.9a13.84 13.84 0 002.24 10.4 14.32 14.32 0 008.67 5.6c7.47 1.87 14.95 3.73 22.46 5.45l2.38.56a35.84 35.84 0 009 .74c5.81-.11 11.63-3.38 15.43-7.66a35.19 35.19 0 007.39-13.86 55.15 55.15 0 001.84-15.84c0-9.55-2.93-19-5.83-28a192.21 192.21 0 00-7.79-19.47c-3.27-7.34-6.56-14.64-10.2-21.81-.5-.93-1-1.86-1.47-2.81a12.29 12.29 0 00-14.25-4.48zM602.63 960l-.32.48.32-.48zm.41.43l-.27.27.3-.27z')
+    path.cls-2(d='M564.76 852.45a14.84 14.84 0 00-5.82 9.29 23.37 23.37 0 00.38 8.77c.79 4 1.78 7.86 2.71 11.79.1.62.2 1.25.29 1.87l-.51 1.33a12.49 12.49 0 00-.45 9.19 11.84 11.84 0 0015.19 7 11.51 11.51 0 006.6-6c.1-.24.2-.49.29-.74s.43-.27.64-.42c3.13-2.2 4.67-5.17 5.66-8.76.83-3 .18-7-1-9.84l-.07-.17a40.08 40.08 0 00.16-7c-.46-6.87-4.36-13.85-10.42-17.22a12.85 12.85 0 00-6.17-1.49 12.22 12.22 0 00-7.49 2.36zm-445.21 861.92a12.57 12.57 0 00-1.65 2.5c-.17.18-.34.36-.49.54-1.83 2.15-3.38 5.75-2.78 8.64.45 2.2.66 4.37 2.16 6.18.53.63 1 1.22 1.61 1.82q1.56 1.73 3.14 3.43c1.56 1.72 3.12 3.45 4.6 5.26.61.75 1.23 1.51 1.84 2.28.86 1.71 1.83 3.37 2.74 5 .44.8.92 1.57 1.4 2.35s1 1.57 1.57 2.33l.28.36a11.4 11.4 0 004.36 9.08 49.19 49.19 0 013.87 3.15c.72 1 1.38 2 2.05 3 .41.6.81 1.2 1.24 1.77a16.23 16.23 0 003.62 4l2.63 1.71a12.25 12.25 0 0016.38-5.77c.38-1.06.74-2.14 1.07-3.22a12.44 12.44 0 00-.54-6.54 29 29 0 00-2.59-5.28c-.86-1.55-1.87-3-2.84-4.5-2.07-3.16-4.16-6.3-6.23-9.46q-3.7-5.67-7.45-11.3c-1.45-2.18-3-4.32-4.49-6.48a17.17 17.17 0 00-1.2-4.26 23.35 23.35 0 00-4.86-7.11 12.43 12.43 0 00-7.5-3.68 15.06 15.06 0 00-2.21-.17 12.54 12.54 0 00-9.73 4.4zm34.87 234.92a39.45 39.45 0 00-7.2 1.31 17.93 17.93 0 00-8.52 27.08c2.49 3.54 6.91 6.86 11.34 7.32a81.37 81.37 0 0010.93.18c1.75 0 3.51-.09 5.27-.09a71.88 71.88 0 0111.42 2.44 76.41 76.41 0 0111.91 5.2 76.71 76.71 0 019.18 7.11 45.35 45.35 0 013.41 5.25 71.11 71.11 0 012.86 7c2.67 7.74 11.7 11.71 19.28 9a15.22 15.22 0 008.95-19.28 95.87 95.87 0 00-6.49-14.31c-.81-1.5-1.65-3-2.57-4.43a51.65 51.65 0 00-5.74-6.86c-5.24-5.63-10.69-11-17.37-14.88-3-1.75-6-3.39-9.16-4.88a92.48 92.48 0 00-14.23-5 52.23 52.23 0 00-11.31-1.76c-3-.18-5.94-.36-8.91-.36h-3.05z')
+    path.cls-2(d='M133.72 1966.23a14 14 0 00-5.67 8.77c-.64 3.41 0 7.75 2.27 10.51 6.07 7.41 11.93 14.88 17.48 22.68a138.93 138.93 0 008.85 10.81c3.82 4.41 7.86 8.68 12.08 12.71 3.18 3 6.36 6 9.58 9 1.75 1.64 3.52 3.28 5.42 4.74a91 91 0 008.86 5.78c3.42 2 7.06 3.71 10.52 5.69a31.29 31.29 0 004.84 2.43c1.85.66 3.71 1.29 5.61 1.82a32.87 32.87 0 006.42.46 33.21 33.21 0 007.94-1.43 17.55 17.55 0 0011.44-17.89c-.76-9.23-9.41-17.21-18.9-16l-.71.09c-2.19-1-4.33-2.2-6.53-3.18a96.58 96.58 0 01-9-4.41c-2.44-1.75-4.79-3.64-7.13-5.52-3-2.41-6.08-4.71-9.1-7.08s-5.91-5.08-8.82-7.68c-2.67-2.38-5.33-4.78-7.8-7.36-6.28-7-12.35-14.24-18.34-21.5-2.36-2.87-5-5-8.76-5.66a13.92 13.92 0 00-10.52 2.25z')
+    path.cls-2(d='M152.88 1976.21c-1.58 1.9-3.35 4.79-3.6 7.34a18.7 18.7 0 00.65 8.48c.84 3.34 3.49 6.3 5.9 8.59a14.4 14.4 0 0011.39 3.53c2 1.19 4 2.45 5.91 3.71 4.55 3.09 9.06 6.22 13.52 9.43 1.93 1.4 3.84 2.81 5.73 4.28l1.12.87c.6.86 1.18 1.74 1.73 2.64.73 1.76 1.34 3.55 1.94 5.37 2.13 6.38 9.67 9.6 15.84 7.35a12.11 12.11 0 007.19-7.14l.15-.1a15 15 0 004.91-5.79l1.21-3.7a15 15 0 00-.65-7.94c-1-4.44-4.89-7.8-8.09-10.74-.95-.86-2-1.65-2.95-2.48-1.93-1.62-3.82-3.27-5.83-4.79-5.1-3.85-10.21-7.6-15.43-11.28a149.6 149.6 0 00-15.85-9.81 33.84 33.84 0 00-9-3.14 16.12 16.12 0 00-3.19-.31 16.58 16.58 0 00-12.61 5.63zm-52.23-56.39c-.9 2.7-1.88 5.36-3 8a63.87 63.87 0 01-3 6.79l-.65 1.18a11.47 11.47 0 009.53-6.46 11.93 11.93 0 00-2-12.95c-.25 1.16-.65 2.29-1 3.44zm-31.75 12.33c.6 1.33 1.42 2.63 2.06 3.81a9.65 9.65 0 003.5 3.45c-.13-.24-.26-.5-.38-.76a7 7 0 01-2.69-3.64c-.38-1.32-.68-2.65-.93-4l-1.56 1.12zm240.22 153.69a41.06 41.06 0 00-2.06 6.24 45.71 45.71 0 00-2.33 6.6 27.68 27.68 0 00-1.36 5.72c-1.2 2.5-2.48 5-3.76 7.43-1.66 3.16-3.43 6.3-5.26 9.37-2.23 3.71-2.07 9.19-.64 13.11a16.9 16.9 0 0021.68 10.06 17.59 17.59 0 009.44-8.56c2.24-4.08 4.29-8.26 6.32-12.44a111.68 111.68 0 004.5-10.42c2.69-7.41 5.28-17.15-.64-23.85q-.21-.3-.42-.57a13.6 13.6 0 00-10.69-10.17 12.94 12.94 0 00-2.41-.22c-5.11 0-10.31 2.9-12.37 7.7z')
+    path.cls-8(d='M129.9 1893.17a33.8 33.8 0 00-13.3 3.17 42.14 42.14 0 00-11.44 8.14 63.13 63.13 0 00-6.89 7.36A45.09 45.09 0 0092.2 1922a112 112 0 00-4.27 12.9 200 200 0 00-7 37.24 256.94 256.94 0 00-1 33.29c0 .92.07 1.85.11 2.76a42.16 42.16 0 001.2 7.75 23.47 23.47 0 007 11.87 16.71 16.71 0 0012.49 4.38 18.7 18.7 0 0012.24-6.41 50 50 0 006.85-10.91c2.36-4.9 4.06-10.18 5.93-15.28q1.89-5.17 3.75-10.35 4.11-2.44 8.21-4.92c2-1.21 4-2.48 5.94-3.79a69.87 69.87 0 0011.55-9.89 31.89 31.89 0 003.08-3.89 45.78 45.78 0 003.32-5.49 42.19 42.19 0 002.18-6.42 80.37 80.37 0 002.88-13.49c.75-5.78 1.18-11.64.22-17.42a35.22 35.22 0 00-8-17.6 38.65 38.65 0 00-15.92-11 50.47 50.47 0 00-6.49-2 17.17 17.17 0 00-3.67-.32c-1 0-1.91 0-2.82.05zm2.32 26c.53.09 1.05.21 1.58.34a32.36 32.36 0 014 1.89c.69.52 1.35 1.07 2 1.65s1 1.37 1.48 2.09a27.32 27.32 0 011 2.62 42.88 42.88 0 01.43 6.41 87.38 87.38 0 01-2.48 14.44c0-.9 0-1.8-.05-2.69a14.5 14.5 0 00-5.15-10c-1.05-.69-2.11-1.38-3.16-2.05a14.45 14.45 0 00-7.57-1.4 15.68 15.68 0 00-8 2 2.76 2.76 0 00.08-.27 38.24 38.24 0 012.33-5 59 59 0 016.21-7.1c.8-.64 1.61-1.22 2.47-1.78.7-.29 1.41-.56 2.13-.8.9-.12 1.8-.22 2.71-.28z')
+    path.cls-8(d='M43.93 1931.62a50.23 50.23 0 00-9.27 1.23c-3.31.64-6.63 1.22-9.67 2.73-1.56.78-3.08 1.64-4.6 2.48-2.62 1.22-5.24 2.4-7.78 3.83l-.9.81a10.88 10.88 0 00-3.64 3.84 24.77 24.77 0 00-3.95 8.31c-1.23 4.47-.55 8.88.53 13.25v.21a36.42 36.42 0 001.64 6.7c.54 1.39 1.21 2.69 1.87 4l.05.1a63.6 63.6 0 005.26 9.7 80.15 80.15 0 0013.18 15.52 115 115 0 0014 10.66 118.29 118.29 0 0015.35 8.16 54.94 54.94 0 008.55 2.93l1.16.09a15.59 15.59 0 008.23-.68c3.1-1.13 4.92-3 7.25-5.23l2.16-3.33a15.58 15.58 0 001.48-8v-.88a11.57 11.57 0 0010.33-4 56.78 56.78 0 007.47-11.41c2.35-5 3-10.44 3.16-15.85a48.73 48.73 0 00-1.72-13.47 41.59 41.59 0 00-5.22-11.47c-3.61-5.95-9.78-10-15.69-13.37a49.13 49.13 0 00-15.62-5.26 121.49 121.49 0 00-21.48-1.6zm32.62 48.78a15.34 15.34 0 00-.66-8.06 40.91 40.91 0 00-2.78-5.73 37.46 37.46 0 00-4.22-5.88l1.11.27a49.19 49.19 0 016.4 3.13c.68.51 1.33 1 2 1.61a29.43 29.43 0 011.85 2.71 38 38 0 011.54 4.26 38 38 0 01.42 5.13 31.18 31.18 0 01-.7 4.29 32.47 32.47 0 01-1.62 3.23q-1.27 1.77-2.65 3.46a10.16 10.16 0 00-.69.93 29.48 29.48 0 00-1.5-3.63 16.8 16.8 0 001.5-5.73zm-33.9 35.91l-.77-.51.77.51zm-.77-.51c-.41-.26-.81-.53-1.21-.8l-1.33-.84 2.54 1.64z')
+    path.cls-8(d='M122.27 1908c-3.58 4.33-6.06 9.64-8.72 14.56-2.18 4-4.35 8.1-6.76 12a114.86 114.86 0 01-10.23 12.62q-5.24 5.71-10.47 11.4c-3.85 4.16-3 11.11 1.21 14.67a10.55 10.55 0 0014.66-1.21c6.67-7.2 13.5-14.31 19.49-22.1a79.44 79.44 0 005.1-7.65 12.07 12.07 0 002.49-.61c3.07-1.13 5-3.24 6.58-6a61.93 61.93 0 004.7-9.74c1.41-3.82 2.71-7.44 1.93-11.55a11.27 11.27 0 00-2-5.59 11.43 11.43 0 00-4.4-3.73 11.46 11.46 0 00-13.57 2.9zm-37.45 92.29c-3 1.09-6.48 3.73-7.55 6.86-1.26 3.69-2.54 7.4-3.75 11.11.36-1.11.72-2.21 1.09-3.33q-3.52 10.71-7 21.43c-1.85 5.66-3.31 11.46-4.93 17.18-3 10.39-4.58 21.09-6.24 31.74-.89 5.7-1.36 11.49-1.93 17.23-.72 7.19-1.32 14.33 1.35 21.21a37.54 37.54 0 003.23 5.92 26.69 26.69 0 004.06 4.79c3.56 3.25 7.84 5 12.47 6s9.49.09 13.82-1.4a31.39 31.39 0 006.42-3.47 37.73 37.73 0 005.55-4.81 61.58 61.58 0 0013.19-20.36c5.43-13.23 7.64-27.59 8.52-41.78q.66-10.38 1.11-20.76c.1-2.48.06-5 .07-7.45s-.27-5.16-.51-7.7a17.59 17.59 0 00-7.51-12.84c-1.06-.7-2.13-1.39-3.2-2.08a14.78 14.78 0 00-7.66-1.41 14.57 14.57 0 00-3.13.6c.16-.5.33-1 .49-1.5a13.55 13.55 0 00-17.93-15.22z')
+    path.cls-8(d='M109 1994.15a20.48 20.48 0 00-5 2.23c-.42.1-.85.19-1.27.3a31.91 31.91 0 00-6.45 3.43c-2 1.47-5.27 4.84-6.14 7.29-.12.31-.23.63-.34.94a16.57 16.57 0 00-1.58 8.58 19.35 19.35 0 003.5 10.52l.24.34a17 17 0 005.38 9.44c4.41 4.33 8.8 8.71 13.12 13.15 6.47 6.68 12.86 13.43 20 19.42a127.14 127.14 0 0037.16 21.21 136.8 136.8 0 0015.69 5.11 46.75 46.75 0 0012.14 1.09c4.92-.11 9.86-2.33 13.87-5 7.29-4.85 10.42-13.25 12.67-21.26.71-2.5.47-5.24.49-7.82-.12-.6-.23-1.2-.35-1.8a15.13 15.13 0 00-1.59-5.87c-2.37-5.34-6-9.29-10-13.44a59.64 59.64 0 00-8.05-6.46c-3.83-2.76-7.79-5.31-11.79-7.82-3.28-2.06-6.63-4-10-5.81-1.34-1.56-2.83-3-4.24-4.47a53.84 53.84 0 00-8.65-6.74 139 139 0 00-12-7.25c-4.27-2.31-8.77-4.14-13.21-6a58.15 58.15 0 00-22.55-5.13h-.12a39.15 39.15 0 00-10.92 1.82zm66.18 63.85l1.65 1c.85.57 1.7 1.14 2.54 1.73-1.91-.7-3.81-1.42-5.69-2.18.52-.17 1-.36 1.5-.56z')
+    path.cls-9(d='M98.16 1983.46a31.37 31.37 0 00-13.57 8.17 27.31 27.31 0 00-7.87 15.4 16.05 16.05 0 002.53 11.75 15.51 15.51 0 005.22 4.68 22.26 22.26 0 006.16 10.17 24.77 24.77 0 005.59 3.7 11 11 0 004.46 1.27 30.43 30.43 0 003.07 1 15.8 15.8 0 006 .37c3.14-.29 5.4-1.62 8-3.16 2.14-1.24 4.45-4.38 5.57-6.49.19-.35.36-.71.53-1.06a46.69 46.69 0 003.86-5.83 19.2 19.2 0 001.71-3.71 39.71 39.71 0 002-7.24 26.12 26.12 0 00-1.76-15c-2.65-5.93-7.33-10.14-13.12-12.94a27.39 27.39 0 00-10.74-2.23 27.64 27.64 0 00-7.68 1.11z')
+    path.cls-8(d='M114.64 1497c-2 .75-5.69 3.06-6.94 4.94-1.37 2-2.66 4.07-3.81 6.19a49 49 0 00-6.71 5.71 64.87 64.87 0 00-12.39 17.51 62.37 62.37 0 00-3.11 7.84 81.3 81.3 0 00-3.1 11.19 49.88 49.88 0 00-.58 11.71 27.56 27.56 0 001.27 6.61 43.12 43.12 0 002.8 5.81c1.12 1.23 2.24 2.45 3.35 3.68a20 20 0 005.54 3.18 57.19 57.19 0 006.44 1.92 31.79 31.79 0 007.49.47 25.77 25.77 0 006.33-1.53 42 42 0 005.75-2.83l1.41-1.15a35.19 35.19 0 004-3.88 36.39 36.39 0 003.77-5.54c4.12-6.87 6.7-14.71 8.69-22.44 1.94-7.55 2.36-15.63 2.26-23.39q0-3.81-.18-7.62c-.35-8.44-4.92-18.23-14.49-19a15.31 15.31 0 00-2.75-.26 14.85 14.85 0 00-5.07.9z')
+    path.cls-8(d='M91.42 1487.61c-5 1.72-10 3.37-15.1 4.77-6.77 1.34-13.58 2.53-20.23 4.42a53.66 53.66 0 00-18.09 9.4 58.79 58.79 0 00-14.58 17 32.19 32.19 0 00-3.3 9.32 29.5 29.5 0 00-.29 6q0 1 .06 2.07a53.22 53.22 0 001.58 9.22c.86 4 2.12 8 4.89 11a21.47 21.47 0 006.33 5.36 10.89 10.89 0 002.48 1.19 22.91 22.91 0 005.55 1.49 28.58 28.58 0 006.06.06c11.76-1.28 20.81-9.67 29.69-16.65 3.8-3 7.59-6 11.34-9a142.43 142.43 0 0011.13-10 52 52 0 007.19-9.24 31.25 31.25 0 003.62-9.31 11.61 11.61 0 00-.41-6.79 15.2 15.2 0 00.69-11.66 14.53 14.53 0 00-13.75-9.46 15 15 0 00-4.87.82zM68.65 1524c-2.37 1.81-4.77 3.59-7.16 5.37-4 3-8 6-12.23 8.65v-.32q.43-.95.93-1.86a47.58 47.58 0 014.47-5.14 46.69 46.69 0 015.28-3.69 58.85 58.85 0 018.73-3z')
+    path.cls-8(d='M74.87 1491.38l-2.51 1.32a10.78 10.78 0 00-3.59 4.22l-.2.32a36 36 0 01-4.19 4.7c-2.63 2.3-5.33 4.53-8 6.82s-5.34 4.73-8 7c-2.11 1.83-3.67 3.68-4.21 6.52a10.31 10.31 0 008.2 12 10.81 10.81 0 007.82-1.68 84.41 84.41 0 009.82-7.09c2.24-1.84 4.48-3.67 6.69-5.54s4.56-4.08 6.67-6.29 3.54-4.88 5.13-7.38 1.31-6 .4-8.49a10.95 10.95 0 00-14-6.51z')
+    path.cls-8(d='M81.72 1399.16a26.15 26.15 0 00-9.65 2.58c-1.93.93-3.8 2-5.69 3s-3.57 2.9-5.23 4.46a22.28 22.28 0 00-3.9 5.61l-.45 1.34a15.46 15.46 0 00-1.48 8 39.35 39.35 0 002.08 10.22c3.19 10.23 7.68 20 12 29.79a198.57 198.57 0 009.47 19c1.24 2.15 2.76 4.2 4.15 6.27q2.74 4.1 5.51 8.15c4.52 6.71 14.14 8.24 20.68 3.66a14.77 14.77 0 006.25-12.21 15.65 15.65 0 003.36-1.77c3-2.15 5.93-6 6.34-9.82a62.24 62.24 0 00.15-12.28 75.52 75.52 0 00-2-10.94c-1.58-6.4-3.42-12.65-5.6-18.88a97.57 97.57 0 00-10.6-22c-5.2-7.8-14.22-14.25-23.87-14.25-.49 0-1 0-1.47.05z')
+    path.cls-8(d='M139.63 1409.37a28.86 28.86 0 00-5.77 2.77 17.17 17.17 0 00-2.86 2.16 58.92 58.92 0 00-6.93 6.75 96 96 0 00-6.53 9.44c-1.27 2-2.42 4-3.6 6.06a59.84 59.84 0 00-6.34 17.2c-.58 2.57-.76 5.27-1.1 7.89s-.58 5.36-.83 8c-.06.65-.13 1.3-.2 2a10.9 10.9 0 00-1 .6 12.13 12.13 0 00-2.94 16.71c1.07 1.57 2.05 3.29 3.22 4.79a12.92 12.92 0 002.37 2.52 17.38 17.38 0 001.3 6.25c1.05 2.37 2.53 5.15 4.71 6.76a16.06 16.06 0 007 3.37 14.65 14.65 0 007.65-.63 14.48 14.48 0 002-.93 26 26 0 006.89-3.76 79.26 79.26 0 008.69-8.5c1.67-1.83 3.27-3.73 4.87-5.61a126 126 0 0011.77-16.13 75 75 0 008.87-23.13 70.53 70.53 0 001.13-13.84 36.5 36.5 0 00-.55-5.8 67.3 67.3 0 00-2.34-9.81c-2.57-8.26-10.46-15.24-19.24-15.93-1.53-.12-2.74-.2-3.85-.2a22 22 0 00-6.36 1z')
+    path.cls-8(d='M129.41 1486.85a12.7 12.7 0 00-8.89 4.57 13.08 13.08 0 001.51 18.41 12.08 12.08 0 003.8 2.21 18.64 18.64 0 00.76 7.59 28.91 28.91 0 001.86 5 42.72 42.72 0 005.66 9.4c3.33 4 6.92 7.81 10.48 11.64a81.58 81.58 0 009.26 8.46 75.38 75.38 0 009.22 6 47.21 47.21 0 009.85 3.86c2.66.82 5.57.69 8.31.77a34.56 34.56 0 005.25-1 22.36 22.36 0 006-3.38 14.64 14.64 0 004.82-5.68 23.92 23.92 0 001.53-4.38 28.43 28.43 0 00.32-4.79 66.67 66.67 0 00-1.48-6.55 56.85 56.85 0 00-3.21-7.4 83 83 0 00-10.07-16.22 84.81 84.81 0 00-28-23.25 54.45 54.45 0 00-15.29-5 37.37 37.37 0 00-6.19-.43c-1.86 0-3.73.07-5.56.09zm243.67 81.25c-6.9.21-13.71 3.42-19.39 7.19a53.44 53.44 0 00-6.72 5.86c-2.1 2-4 4.13-6 6.31a48.39 48.39 0 00-9.1 15.5 49.94 49.94 0 00-2.15 8 43.29 43.29 0 00-.35 9.52 73.51 73.51 0 001.58 9.78 97.2 97.2 0 003.66 14.58 26.56 26.56 0 009.62 12.7 11.36 11.36 0 007.88 2.53 11 11 0 004.31-1.3c2.86.92 5.62 0 8.38-.65a12.63 12.63 0 003.94-2.21 19.23 19.23 0 005.44-6.48 56.22 56.22 0 002.6-5.56c1.61-3.78 3.21-7.58 4.82-11.37 1.75-4.1 3.46-8.21 5.16-12.31a112.58 112.58 0 006.59-20.55 58.21 58.21 0 00.8-10.54 11.89 11.89 0 00-.43-3.14 22.74 22.74 0 00-3-8.25 19.94 19.94 0 00-17.07-9.66zm-6.57 22.61l.33.32-.32-.35zm8.78 4.28l-1.33-.07a12 12 0 011.33.07z')
+    path.cls-8(d='M397.52 1618.33a63.23 63.23 0 00-8 1.75 47.35 47.35 0 00-7.55 2.75 61.46 61.46 0 00-12.92 8.06c-5.31 4.18-9.89 9.26-15.51 13l-1.31.56c-5.38 2.24-8.45 8.07-6.38 13.75a10.47 10.47 0 001.94 3.24l-.8.21.82-.18c-1.85.42-3.7.86-5.53 1.38a17 17 0 00-6.69 4.64 15.43 15.43 0 00-3.34 7.25 14.83 14.83 0 005 14.13 19.77 19.77 0 008.51 4.18 45.15 45.15 0 007.72.71c1.94.08 3.89.12 5.83 0 4.94-.19 9.86-.46 14.79-.91a132.26 132.26 0 0016.74-2.9 139.6 139.6 0 0017.23-5.11 96.83 96.83 0 0016.9-8.26 44.28 44.28 0 007.13-5.83 34 34 0 006.44-8.69 48.08 48.08 0 001.78-5.1 16.43 16.43 0 00.59-5.41 27.41 27.41 0 00-1.85-9 57.24 57.24 0 00-3.74-7.47 31.72 31.72 0 00-6-8.1 40.07 40.07 0 00-6.37-4.51 17.54 17.54 0 00-3-1.25c-2-.73-4.06-1.32-6.09-1.95a34.52 34.52 0 00-10.28-1.44 49 49 0 00-6.07.39z')
+    path.cls-8(d='M342.46 1643.79a15.41 15.41 0 00-8.7 27.1c5.74 4.81 11.4 9.71 17.09 14.58a11.16 11.16 0 00-4.64 2.14l-.33.26a12.37 12.37 0 00-10.48 9.8c-3.11 16.17-6.58 32.3-5.5 48.9.67 10.49 3.67 20.68 7.11 30.56a48.3 48.3 0 004.06 8.22 19.35 19.35 0 009.8 8.19 20.4 20.4 0 0010.41 1.37 20.16 20.16 0 0012.36-7.18c3.86-4.38 5.31-10.31 6-15.93.35-3.11.55-6.24.64-9.37.75.54 1.51 1.06 2.28 1.57a57.93 57.93 0 0011.47 6 42.83 42.83 0 0015.8 3.14c8.42-.11 17-3.88 21.81-11a30.44 30.44 0 003.41-6.25 45.65 45.65 0 002-6.89 44.84 44.84 0 00.49-7.42 33.73 33.73 0 00-.75-7.29c-1.56-9-5.37-17.23-10.36-24.87a107.67 107.67 0 00-16.13-19.31 48.68 48.68 0 00-8.39-5.78c-1.17-.69-2.33-1.38-3.51-2-2.44-1.39-4.91-2.75-7.42-4l-.48-.24c-1.3-1.15-2.61-2.28-3.93-3.41-9.19-7.9-18.57-15.6-27.93-23.3-1.62-1.33-3.25-2.64-4.91-3.93a16 16 0 00-10-3.65h-1.26zm17.76 125.62zm1.83.74z')
+    path.cls-8(d='M302 1620.05c-7.28.14-14.78-.12-22 .85a69.79 69.79 0 00-27.57 10.1 30.39 30.39 0 00-9 8.39 26.5 26.5 0 00-4.29 8.94 19.34 19.34 0 00-.92 3.82 61.31 61.31 0 00-.5 7.88c0 8.36 4.07 16.73 11.7 20.68a32.53 32.53 0 0012.91 3.43 68.61 68.61 0 0016.51-.74 164.44 164.44 0 0029.24-8.25c5.56-2.06 11.13-4.11 16.64-6.29 1-.39 2-.84 3-1.28 1.56-.78 3.1-1.59 4.64-2.41a15.65 15.65 0 003.31-3.12 14.38 14.38 0 0019.57-18 29.24 29.24 0 00-7.12-11.53 35.8 35.8 0 00-9.95-6.51 65.44 65.44 0 00-17.16-5c-2.6-.42-5.34-.43-7.95-.61-3.1-.2-6.26-.35-9.38-.35h-1.72z')
+    path.cls-8(d='M308.58 1653.05c-4.86 9.21-9.63 18.49-14.57 27.68-1.35 2.5-2.74 5-4 7.56a40.75 40.75 0 00-1.67 4.56c-.9 2.6-1.84 5.21-2.49 7.89a44.2 44.2 0 00-1 7.06c-.18 2.36-.32 4.73-.37 7.09a29 29 0 002.13 10.79c2 5.37 6.66 9.24 11.05 12.67 2.62 2 5.76 4 9.11 4.57a21.76 21.76 0 0012.15-1.26c7.75-3.17 12.73-10.64 15.87-18.07.59-1.4 1.12-2.84 1.59-4.29a11.75 11.75 0 002.65-2.57 24.35 24.35 0 003.55-6c.84-2.29 1.5-4.6 2.11-7a58.84 58.84 0 001.33-10.75c.17-2.55.24-5.11.33-7.66a31.27 31.27 0 00-.28-6.27 30.77 30.77 0 00-.86-4.25 15 15 0 00-8.35-15.1 14.65 14.65 0 00-4.68-1.33 12.8 12.8 0 00-7.07-11.22 12.05 12.05 0 00-5.23-1.2 12.9 12.9 0 00-11.28 7zm-1.5 63.3h-.1.1zm-42.19-656.82a93.08 93.08 0 00-12.26 2.59 35.91 35.91 0 00-7.7 3 58 58 0 00-5.16 2.77 32 32 0 00-5.73 4.83 26.84 26.84 0 00-5.84 8.67q-1 2.69-1.73 5.45c-.08.63-.15 1.25-.22 1.88a80.78 80.78 0 00-.25 6.41 64.68 64.68 0 00.5 9.12 53.74 53.74 0 005.27 17.14 64.36 64.36 0 005.73 9.87c4.54 6 9.53 12 15.44 16.74 6.13 4.88 13.44 7.66 20.82 10a76.5 76.5 0 0017.87 3.35 118.27 118.27 0 0020.87-.09c3.56-.37 7.11-1.23 10.62-1.9l4.07-.89a15.53 15.53 0 004.71-26.47 16.85 16.85 0 00-4.08-2.52 14.62 14.62 0 004.79-8.54 56.66 56.66 0 00.39-8.94 29 29 0 00-.58-3.83 43.09 43.09 0 00-2-7.53 65.89 65.89 0 00-5.06-9.85 64.21 64.21 0 00-4.93-7.1 69 69 0 00-14.14-13.7 74.37 74.37 0 00-9.35-5.77 56.72 56.72 0 00-10.82-3.8 44.1 44.1 0 00-11.93-1.49 79.37 79.37 0 00-9.3.6zm-5 32.2l-.36 1.11q.15-.55.36-1.11zm15.1 1a44.15 44.15 0 015.59 1.09 46 46 0 014.72 2.34 61.36 61.36 0 017.67 6.56 69 69 0 016.47 9.33 49.13 49.13 0 012.68 7.3 15.28 15.28 0 006.23 11.11 81.15 81.15 0 01-10.69.21 78.39 78.39 0 01-14.68-2.51 66.42 66.42 0 01-8.36-3.71 38.85 38.85 0 01-4.08-3.52 75.72 75.72 0 01-8.12-11.22 53.3 53.3 0 01-2.6-7.09 50.1 50.1 0 01-.49-7 48.39 48.39 0 016-1.91 64.91 64.91 0 019.64-1zm-15.2.71l-.24.38.24-.38zm0 1l-.48.44.48-.43z')
+    path.cls-8(d='M266.42 1090.05a9.52 9.52 0 00-3.48 1.57 32.88 32.88 0 00-3.08 2.7 29.8 29.8 0 00-3 4.84 19.05 19.05 0 00-1.47 8.45 29.83 29.83 0 003 11.79c2.19 4.58 5.21 8.15 8.62 11.86l-2-2.15c2 2.19 3.73 4.36 6.42 5.7a16.58 16.58 0 006.29 1.79q1.48.56 3.06 1a38.78 38.78 0 008.61 1 11.92 11.92 0 005.9-2.13 11.93 11.93 0 002-17.8 18.68 18.68 0 00-.37-2.5 30 30 0 00-1.69-5.61 39.32 39.32 0 00-3.67-6.47 38 38 0 00-3.66-4.34c-1.45-1.58-2.93-3.1-4.5-4.55a20.55 20.55 0 00-10.25-5.57 12.15 12.15 0 00-2.25-.2 16.43 16.43 0 00-4.52.67zm28.01-7.54a6.92 6.92 0 00-4.67 2.39c-2.32 2.74-2.18 7.4.79 9.66a38.84 38.84 0 014.82 4.5 80.24 80.24 0 017.52 10.2 26.28 26.28 0 011.16 2.61c-.35.43-.71.83-1.09 1.23a5.77 5.77 0 108.8 7.47 20 20 0 003.3-4.69c1.34-2.59.67-5.71-.18-8.32a38.22 38.22 0 00-3-6.19c-1-1.8-2.21-3.48-3.34-5.19-1-1.5-1.93-3-3-4.52l-2-2.83a39.51 39.51 0 00-4.15-4.71 6.36 6.36 0 00-4.43-1.63h-.55zm1.55 17.22l.44.48-.44-.48zm8 12.39l-.14.22.14-.22z')
+    path.cls-8(d='M350.29 1030.86q-2.6.53-5.18 1.11a20.36 20.36 0 00-6.18 3.78 16.5 16.5 0 00-3.44 3.39 44.25 44.25 0 00-3.31 5.24 76.22 76.22 0 00-5.88 13.1c-1.92 5.44-3.86 10.85-5.49 16.38-1.43 4.88-2.84 9.72-4 14.67-1.3 5.37-2.46 10.76-3.64 16.16-1.45 6.72 3.43 13.48 10 14.74a12.32 12.32 0 007.51-.94 12.72 12.72 0 001.94 2.16c6.28 5.61 15.54 3.8 22.59 1 2-.83 4.21-2.21 6.21-3.27a56.29 56.29 0 005.81-3.62 49.67 49.67 0 0015.43-17.83 53 53 0 003.49-9.78 43.68 43.68 0 001.32-10.45 59.64 59.64 0 00-3.48-22.05 39.23 39.23 0 00-11.38-17A26.74 26.74 0 00364 1033a40 40 0 00-6.74-1.89 25.88 25.88 0 00-4.41-.32h-2.58z')
+    path.cls-8(d='M409 1066.35a21 21 0 00-4.44 3.41 45.05 45.05 0 00-4.87 1.37 44.27 44.27 0 00-9.31 4.84 113.62 113.62 0 00-12.19 9.18c-3.48 1-7 1.87-10.53 2.75s-6.87 1.71-10.31 2.54l-1.15.21-3.95.87a15.09 15.09 0 00-9.85 15.4 15.15 15.15 0 004.08 9.06 16.72 16.72 0 002.46 13.21c2.29 3.44 6.52 6.54 10.77 6.83a11.24 11.24 0 005 .11 23.48 23.48 0 006.56-1.91c3.11-1.45 6.28-3.12 9.27-4.79 4.42-2.48 8.76-5 13.07-7.69q2-1.2 3.87-2.44c5.5-1.82 10.76-4.64 15.91-7.28a39.89 39.89 0 006.9-4 28.8 28.8 0 007-8.47 21.78 21.78 0 003-10.65v-.89c.5-.77 1-1.55 1.49-2.33a15.42 15.42 0 00-11-21.81l-4.13-.22a15.33 15.33 0 00-7.58 2.73z')
+    path.cls-8(d='M338.05 1078.71a13.31 13.31 0 00-7.14 6.49c-.26.46-.51.92-.76 1.39a70.33 70.33 0 01-10.47 6.58c-3.79 1.95-7.6 3.84-11.55 5.5q-7.42 3.13-14.87 6.27c-6 2.5-9.38 9-7.07 15.24a12 12 0 0015.23 7.08c6.75-2.29 13.46-4.68 20.1-7.27a113.4 113.4 0 0010.41-4.74 90.82 90.82 0 0012.23-7.11 42.32 42.32 0 005.83-5.28c.9-1.34 1.8-2.7 2.67-4.07.44-.84.89-1.67 1.36-2.51 3.35-6.13 0-14.19-6-17.1a12.88 12.88 0 00-9.95-.47zm-6.72 6.25a8.71 8.71 0 01-.78 1.19l.78-1.19zm-1.76 2.27l-.17.16.17-.16z')
+    path.cls-8(d='M260.43 1093.18a13 13 0 00-3.17 18 60.42 60.42 0 006.55 7.64c-.05.26-.11.53-.17.8-.53 1.23-1.13 2.42-1.75 3.63-2.66 5.18-.13 11.78 5 14.25a10.76 10.76 0 0013.64-4 67.3 67.3 0 003.47 2.2c3.72 2.2 8.07 3.56 12.42 2.89l4-.88a87.17 87.17 0 004.28-2.25c3.55-2 5.22-6.06 6.27-9.72 1.42-4.9.36-10.13-1.45-14.77-1.92-4.91-5.11-8.47-8.72-12.17a14.85 14.85 0 00-6.89-3.3 15.07 15.07 0 00-11.37 2.44c-.34.24-.67.5-1 .77-1.44-1.33-2.86-2.67-4.34-4a13.46 13.46 0 00-7-3.7 12.79 12.79 0 00-2.38-.23 12.94 12.94 0 00-7.43 2.34zm56.18 55.43a42.93 42.93 0 00-9.69 9.38 60.13 60.13 0 00-7.22 14.7 107.62 107.62 0 00-5.36 24 105.34 105.34 0 00.21 27.31 89.65 89.65 0 003.62 15 20.75 20.75 0 007.25 10 20.37 20.37 0 008.07 3.78 23.12 23.12 0 0010.81-.46c7.49-2 13.5-7.74 17.92-13.92a75.74 75.74 0 0013.64-40.27 49.48 49.48 0 00.63-11.77 27.22 27.22 0 00-.75-4.76c-.18-2.06-.4-4.12-.61-6.19-.27-2.69-.74-5.36-1.26-8-.36-1.83-.78-3.64-1.19-5.45a18.56 18.56 0 00-2.41-5.54 14.23 14.23 0 00-6.19-5.63 19.13 19.13 0 00-8.89-1.69 10.93 10.93 0 00-3.62.69 12.42 12.42 0 00-8.35-3.25 11 11 0 00-6.61 2.14z')
+    path.cls-8(d='M387.62 1118.61c-5.38.35-10.93.48-16.21 1.61-8.11 1.74-17.56 3.79-23.31 10.33a20.23 20.23 0 00-3.45 5.63 12.37 12.37 0 00-3.82.72 12.93 12.93 0 00-7.17 6.52 13.32 13.32 0 00-.49 10c3.26 10.84 6.66 21.55 11.23 31.92 2.55 5.78 5.11 11.54 7.75 17.27a73.68 73.68 0 006.57 11.94c.94 1.33 2.06 2.53 3.11 3.77 1.35 1.57 2.78 3.07 4.2 4.58a36.3 36.3 0 006.88 5.25c6.82 4.43 15.84 7.15 23.84 4.5a25.31 25.31 0 0010.78-7 33.32 33.32 0 007.09-13.11 43.05 43.05 0 001.7-16.37 47.62 47.62 0 005.94.31 34 34 0 007.85-1.14 38.1 38.1 0 0010.77-4.53c4.78-2.83 8.17-7.78 10.45-12.71 1.83-4 2.91-8.34 4.16-12.54a25.66 25.66 0 00-.23-15.32 32.13 32.13 0 00-6.46-11.07 53.87 53.87 0 00-5.53-5.57 60.46 60.46 0 00-7.84-5.19c-3.68-2.24-7.79-3.52-11.87-4.85-3.42-1.11-6.88-2.07-10.37-2.92a84.86 84.86 0 00-19.67-2.26q-3 0-5.9.2zm-249.22 799.5c-.61.22-1.22.46-1.82.71a17.57 17.57 0 00-16 5.86 26.59 26.59 0 00-3.07 4.44c-.61.42-1.2.86-1.79 1.31-.28.22-.57.45-.84.69a75.68 75.68 0 00-9.56 5.11 124.89 124.89 0 00-10.48 7.71c-1.58 1.27-3.25 2.44-4.94 3.55s-3.51 2.28-5.28 3.39c-9.89-4.24-23.2-1.28-28.13 9a17.38 17.38 0 00.18 15 10.74 10.74 0 00.09 7 9.31 9.31 0 00.46 1.07 12.52 12.52 0 00.68 6 13.15 13.15 0 003.85 5.53 13.39 13.39 0 006.07 2.9 12.8 12.8 0 007.47-.46c3-1.11 5.24-3.24 7.46-5.48a63.54 63.54 0 006.34-7.6q1.17-.37 2.31-.81a65.49 65.49 0 006.61-3.41c2.07-1.11 4-2.37 6-3.66 2.93-1.94 5.82-3.89 8.62-6 2.42-1.84 4.7-3.83 7.18-5.59l.8.13a17.27 17.27 0 005.36.15l.45.09a17.86 17.86 0 0013.46-2.9 18.32 18.32 0 007.25-11.22c0-.13.06-.27.1-.41l.49-.3c1.13-.67 2.23-1.43 3.34-2.14l1.11-.72a17.68 17.68 0 006-7 15.93 15.93 0 00-14.46-22.83 15.72 15.72 0 00-5.4.95zm-62.68 35.7l.77.25a7.66 7.66 0 01-.77-.25zm600.9-1228.16c-4.85-.06-9.24 2.1-12.86 5.19a38.62 38.62 0 00-4.66 4.65 53.51 53.51 0 00-4.48 6.86 54.91 54.91 0 00-4.82 12.08 76.83 76.83 0 00-2.36 10.08 82.8 82.8 0 00-.13 27.16 90.76 90.76 0 007.78 24.39c2.42 5.11 5.27 10.05 8 15a47 47 0 007.69 10 23 23 0 0011.77 6.74 21.13 21.13 0 0010.16-.89 17.2 17.2 0 007.21-5 24.4 24.4 0 003.13-4.58 36.28 36.28 0 002.19-7.18 35.41 35.41 0 00.25-7.32 11.25 11.25 0 002.57-1.29 21.34 21.34 0 006.93-8.41 30.22 30.22 0 001.83-5.59 36.66 36.66 0 001-5.28 65.81 65.81 0 00.15-14 88.83 88.83 0 00-5.78-23.86c-3.16-8.42-8-16.34-13.13-23.69a59.85 59.85 0 00-8.33-9.59 38.39 38.39 0 00-5.41-3.76l-3.39-1.11a11.36 11.36 0 00-4-.73c-.43 0-.85 0-1.28.06zm2.68 31.79l1.22 1.5c-.52-.2-1.06-.38-1.61-.54.13-.33.25-.64.39-1z')
+    path.cls-8(d='M637.25 804.22a87.3 87.3 0 00-13.89 2.38c-10.32 2.4-19.11 8.28-27.8 14-2 1.36-4.07 2.76-6 4.29a49.52 49.52 0 00-5.27 4.87 26.56 26.56 0 00-6.07 12c-2 8.32.23 18.38 6.9 24.09a32.39 32.39 0 009.27 5.44A92.33 92.33 0 00610.3 876a88.76 88.76 0 0014 1.27 90.18 90.18 0 0011-.23 84.52 84.52 0 0010.37-1.68A90 90 0 00661 871a89 89 0 0012.25-6.29 33.84 33.84 0 006.42-5.47 43.1 43.1 0 004.49-6.52 32.16 32.16 0 002.6-7.33c.41-4.1.69-7.45-.71-11.45a26.08 26.08 0 00-4.7-8.18c.58-2.77.74-6.11-.35-8.65a21.74 21.74 0 00-2.45-4.43 17.45 17.45 0 00-6.68-4.93 37 37 0 00-10.43-2.75 116.61 116.61 0 00-12.39-1c-1.56-.07-3.13-.11-4.69-.11q-3.55 0-7.11.25z')
+    path.cls-8(d='M681.27 832.91c-2.83 1-6.15 3.53-7.18 6.52-2.62 7.56-5.33 15-6.87 22.9-1.68 8.56-1.82 17.55-1.56 26.24a125.16 125.16 0 003 22 102.75 102.75 0 003 11.73 45.8 45.8 0 003.12 6.37 18 18 0 003.26 3.87 14.13 14.13 0 004.08 2.93 22.4 22.4 0 006.63 1.82l4 .21a38.22 38.22 0 005.35-1.29 25 25 0 006.13-3.49 33.49 33.49 0 005.15-5 40.17 40.17 0 004-6 48.78 48.78 0 002.34-4.62c.55-1.25 1.05-2.53 1.51-3.83a35.59 35.59 0 003.62-3.45 26.66 26.66 0 003.92-6.56 38.57 38.57 0 002.22-7.16 30.46 30.46 0 00.5-4.66 75.45 75.45 0 00.18-8.09 54.67 54.67 0 00-3.3-15.2c-.63-1.82-1.41-3.56-2.2-5.3-.51-1-1-2-1.46-3l-2.7-5.17c-.69-.91-1.49-1.92-2.37-2.9-.17-.59-.34-1.18-.52-1.77a28.34 28.34 0 00-1.41-3.69c-1.26-2.73-3.16-6.2-5.66-8.06a22.57 22.57 0 00-5.51-3.4 15.9 15.9 0 00-8.23-1.52 17.5 17.5 0 00-2.17.34 9 9 0 00-.81-.43 12.92 12.92 0 00-5.58-1.26 12.63 12.63 0 00-4.42.78z')
+    path.cls-8(d='M718.85 836.79a18.57 18.57 0 00-11.06 9.4 19.18 19.18 0 00-1.45 4.23 13.24 13.24 0 00-1.77 2.78c-1.49 3.1-2.05 7.54-.52 10.75 2.89 6.16 5.73 12.36 8.78 18.44a205.34 205.34 0 0011.06 19.69A105.28 105.28 0 00739 920.23a68.31 68.31 0 0018.15 12.34 81.54 81.54 0 0010.43 3.95c1.84.58 3.69 1.09 5.55 1.6 2.45.67 5 .55 7.53.68a36.56 36.56 0 005.2-1 21.7 21.7 0 006-2.67c4.22-2.58 6.8-6.44 9.28-10.59a29.1 29.1 0 002.46-6.81 34.61 34.61 0 00.79-4.75 46.79 46.79 0 00-.3-12.51 76 76 0 00-6.66-20.77 89.13 89.13 0 00-11.59-18.7 79.39 79.39 0 00-7.49-7.85 67.68 67.68 0 00-10.68-7.42 56.28 56.28 0 00-9.34-4.28 107.15 107.15 0 00-13-4c-2.46-.58-5-.95-7.48-1.34a60.25 60.25 0 00-9.08-.77 33.42 33.42 0 00-9.91 1.38zm18 9.6l.61.66c-.2-.23-.41-.45-.61-.67zm1.57 1.72c.12.13.24.27.37.4-.13-.13-.25-.27-.37-.4zm32.91 58.25a13.34 13.34 0 002.15-1.42q.19 1.44.3 2.88l-1.21-.32c-.63-.23-1.25-.47-1.87-.72l.63-.42zm6.65 2.13l-.35.2.37-.2zm1.51.16c-.3.09-.61.16-.91.22l1-.21zm-6.44 3.2l-.38.34c.12-.12.25-.23.38-.34z')
+    path.cls-8(d='M772 761.6a60.48 60.48 0 00-14.34 4.61c-15.45 7.24-28.76 18.7-39.93 31.48a152.93 152.93 0 00-13.81 17.72 33.42 33.42 0 00-3.77 9.33c-1.1 4-1.51 8.65.07 12.53 2.38 5.85 6.84 10.65 13.33 11.88a22 22 0 007.46.28 25.42 25.42 0 002.79-.59l2.23.7a50.1 50.1 0 0013.07 1.77 52.49 52.49 0 0014.23-1.41c15.74-3.68 28.68-14.81 37.95-27.67A87.89 87.89 0 00802.12 802a100 100 0 003.79-11.39 33.44 33.44 0 00.51-7 22.24 22.24 0 00-1.17-7.37 19.85 19.85 0 00-7.49-9.82 27.52 27.52 0 00-6-3.27 39.26 39.26 0 00-6.93-1.95 27.63 27.63 0 00-5.07-.44 39.87 39.87 0 00-7.8.82z')
+    path.cls-9(d='M113.93 1471.94a13.51 13.51 0 00-6.68 2.4 17.64 17.64 0 00-3.32 2.88 20.53 20.53 0 00-4.62 8.27 11.44 11.44 0 00-1.25 4c-.46 3-.11 4.17.55 7.07a13.53 13.53 0 004.39 6.86 15.1 15.1 0 002 1.39l.31.26a20.79 20.79 0 008.62 4.13A16 16 0 00127 1506a13.75 13.75 0 003.3-3.2 18.51 18.51 0 003.62-7.55 19.52 19.52 0 00.46-5.52c-.19-2.24-1.35-6.29-2.88-8.06-.61-.71-1.23-1.4-1.86-2.09l-.11-.17c-1.45-2.24-4.13-5-6.7-6a19.27 19.27 0 00-6.94-1.66 10.55 10.55 0 00-2 .19zm-3.31 17.89a1.74 1.74 0 01.1.19c0-.07-.07-.13-.1-.2zm225.77-377.77c-3.89 1-7 3.46-9.88 6.12a31.19 31.19 0 00-4.21 3.68c-2.85 2.84-4 7.68-3.71 11.55a38.09 38.09 0 004.17 12.27 9 9 0 003.15 3.23l3.29 2.13a23.21 23.21 0 004.5 1.4 20.07 20.07 0 0010.24-1c4.92-1.73 8.33-5.38 10.83-9.81.19-.34.37-.68.53-1s.53-.66.77-1c1.61-2.32 3.43-5 3.8-7.93.36-2.73.48-5.87-.65-8.5a18.74 18.74 0 00-3.08-5.24 13.92 13.92 0 00-2.84-3 16.62 16.62 0 00-7.12-3.36 19.25 19.25 0 00-3.66-.37 24.15 24.15 0 00-6.13.91zm9.37 535.03a18.71 18.71 0 00-3.57 7.38 15.82 15.82 0 00-.5 5.47c.09.58.18 1.16.29 1.73a16.16 16.16 0 00.8 5.71 17.18 17.18 0 005 7.16 14.77 14.77 0 008.53 3.78 23.84 23.84 0 004.91.08 42.3 42.3 0 005-1 25.48 25.48 0 006.16-2.8c2.81-1.59 4.63-4.44 6.22-7.1a20.38 20.38 0 001.57-4.65c.85-2.7.15-5.59-.5-8.22-.82-3.24-3.05-5.65-5.33-7.95a30.46 30.46 0 00-5.57-3.83 19.54 19.54 0 00-6.22-2.27 14.44 14.44 0 00-2.86-.27 18.06 18.06 0 00-13.88 6.82zM713.1 809.85a19.7 19.7 0 00-6.07 1.69 27.1 27.1 0 00-7.87 5.48 21.28 21.28 0 00-4.12 5.86c-.22.36-.44.72-.65 1.08a17 17 0 00-.68 1.66 37.58 37.58 0 00-2 5.76c-.14 1.62-.21 3.24-.23 4.86.05.25.11.5.16.74a15.29 15.29 0 002.72 7.56 14.21 14.21 0 004.33 4.73 12.57 12.57 0 004.08 2.47c3.49 1.42 5 1.55 8.79 1.6a26.35 26.35 0 006.38-1.11 88.92 88.92 0 004.34-2.24 41.78 41.78 0 004.3-3.79 20.82 20.82 0 003.67-5.47 13.1 13.1 0 00.84-1.84 21.75 21.75 0 003.19-7.12c.71-2.62.89-7.06-.36-9.63-.65-1.32-1.32-2.63-2-3.92a38.65 38.65 0 00-3.46-3.77c-3.28-3.08-8.39-4.75-13-4.75a18.12 18.12 0 00-2.36.15z')
+    path.cls-10(d='M71.59 2018.12a68.87 68.87 0 00-9 1.54 21.31 21.31 0 00-4.65-.24c-7.89.49-14.83 3.81-21.54 7.73a57 57 0 00-7.71 5.57c-3.3 2.73-5.72 5.76-6.63 10-2 1.41-4 2.84-5.91 4.35a44.47 44.47 0 00-6.5 6.22 46.68 46.68 0 00-3.33 4.91A16.74 16.74 0 005 2072.68c2 5.44 7.17 9.33 12.72 10.56a38 38 0 0010.21.54 62.81 62.81 0 0010.27-1.93 46.78 46.78 0 009.26-3.28 56.42 56.42 0 009-5.17 54.13 54.13 0 007.85-7.13 86.69 86.69 0 006.46-8.43c3-4 5.8-8.14 7.31-12.75a14.1 14.1 0 008.69-14.09 14.24 14.24 0 00-13.87-13 11.5 11.5 0 00-1.31.07z')
+    path.cls-10(d='M52.74 2001.92a14.18 14.18 0 00-11.6 8 97.41 97.41 0 00-4.88 10.63l-.15.24a92.41 92.41 0 01-6.66 9 6.44 6.44 0 00-1.05 1.18 11.79 11.79 0 00-2.63 5.5 11.94 11.94 0 009.5 13.95c2.91.56 6.73 0 9.07-1.95a64.3 64.3 0 006-5.81 14.9 14.9 0 002.78-.7 13.14 13.14 0 003.8-2.15c-.29.51-.59 1-.9 1.52-1.29 2.12.07 5.07 2.15 6.07 2.39 1.15 4.78 0 6.06-2.14 1-1.72 2-3.44 2.94-5.24.74-1.5 1.32-3.08 2-4.61a40.39 40.39 0 001.73-5.22 18.17 18.17 0 000-3 7.76 7.76 0 00-1.61-3.8c-.59-.67-1.2-1.33-1.82-2-.12-.12-.25-.23-.38-.34a13.77 13.77 0 00.92-6.21 14.14 14.14 0 00-14.12-13h-1.14zm6.95 29.61z')
+    path.cls-3(d='M99.4 2053.87c-2.09 2-4.26 3.93-6.26 6-1.72 1.8-3.33 3.7-4.94 5.6-.82 1-1.62 1.95-2.41 2.94a30.63 30.63 0 00-2.57 3.81 28.78 28.78 0 00-3.62 11.95 4.23 4.23 0 001.29 3.09 4.37 4.37 0 006.16 0 4.75 4.75 0 001.28-3.09v-.39a31.58 31.58 0 011.5-6.3 31.55 31.55 0 013.2-5.29c1.54-2 3.1-4 4.82-5.85 1-1.12 2.1-2.22 3.2-3.28q1.93-1.82 3.85-3.65a4 4 0 000-5.55 3.84 3.84 0 00-2.74-1.12 4.05 4.05 0 00-2.8 1.12zm-32.96-20.43c-4.44 1.66-8.91 3.29-13.34 5q-3.1 1.21-6.09 2.68a36.27 36.27 0 00-4.41 2.51 23.06 23.06 0 00-3.29 2.7 20.29 20.29 0 00-1.8 2.24 4.51 4.51 0 00-.59 2.21 4.34 4.34 0 001.28 3.08 4.39 4.39 0 003.09 1.29 4.2 4.2 0 003.09-1.29 22.45 22.45 0 013-3 47.66 47.66 0 017.89-4.27c4.45-1.79 8.93-3.47 13.43-5.14a4.5 4.5 0 002.49-1.92 4.17 4.17 0 00-1.5-5.71 4.48 4.48 0 00-2.17-.59 3.08 3.08 0 00-1 .17zm-29.22-77.15a3.65 3.65 0 001.29 4.92c3.48 2.21 7 4.37 10.46 6.58 3.05 1.94 5.94 4.1 8.85 6.23a66.15 66.15 0 0110.49 10.13c.91 1.21 1.75 2.47 2.57 3.74a3.28 3.28 0 005.66-3.31 62.64 62.64 0 00-6.1-8 71 71 0 00-7.86-7.35c-2.14-1.75-4.35-3.43-6.6-5-4.49-3.21-9-6.37-13.83-9.17a3.58 3.58 0 00-1.78-.48 3.65 3.65 0 00-3.15 1.78zM68 1983.73l.16.22-.16-.22zm61.58-60.22a3 3 0 00-1.42 1.84c-1 6.45-1.93 13-4.37 19.13-.76 1.77-1.57 3.53-2.47 5.24a36.6 36.6 0 01-3.25 4.94c-1.65 2.06-3.48 4-5.21 6a2.57 2.57 0 000 3.59 2.54 2.54 0 003.59 0c.86-1 1.74-2 2.62-3l1.89-2.09c1.07-1.2 2-2.49 3-3.79a50.68 50.68 0 004.25-7.44 54 54 0 003.2-8.25c.59-2 1-4 1.48-6 .48-2.22.93-4.45 1.25-6.7a3.44 3.44 0 00-.31-2.38 3.19 3.19 0 00-1.85-1.43 3.2 3.2 0 00-2.38.32zm-5.91 21.25l-.09.22.09-.22zm20.21 84.73a3.14 3.14 0 000 6.28 44.07 44.07 0 015.63.32 38.91 38.91 0 018.61 2.27 32.41 32.41 0 015.95 3.69 65.66 65.66 0 0110.83 10.83 49.07 49.07 0 014.86 8c.71 1.47 1.35 3 2 4.49-.07-.16-.14-.32-.2-.48.38 1.1.74 2.18 1 3.31a3.59 3.59 0 106.93-1.91 51 51 0 00-3.29-7.82 51.91 51.91 0 00-4.42-7.46 68.5 68.5 0 00-12.1-12.73 43.66 43.66 0 00-7.53-5.09 33.37 33.37 0 00-9-2.89 46.35 46.35 0 00-8.71-.87zm5.05 6.52h.36-.36zM106 1530.18a41 41 0 01-.12 6.46 50.09 50.09 0 01-2.36 9.49 13.1 13.1 0 01-1.15 1.86c-.65.81-1.31 1.59-2 2.38a3.87 3.87 0 00-1.07 2.57 3.65 3.65 0 006.22 2.58c.64-.75 1.27-1.5 1.89-2.26a28.32 28.32 0 001.82-2.42 15 15 0 001.54-3.33c.63-1.73 1.12-3.53 1.62-5.31a38.57 38.57 0 001.13-5.62 29.17 29.17 0 00.29-6.4 4.15 4.15 0 00-1.15-2.77 3.91 3.91 0 00-6.68 2.77zm-25.3-19.12c-4 2.53-8.07 5-12.08 7.62l-2.75 1.75c-1.17.75-2.31 1.51-3.41 2.37a16.27 16.27 0 00-3 3.1 13.9 13.9 0 00-1.77 3 29.32 29.32 0 00-1.33 3.31 4.17 4.17 0 006.12 4.7 4.38 4.38 0 001.91-2.49c.24-.62.48-1.24.73-1.86a15.86 15.86 0 011.18-2.08 13.24 13.24 0 011.46-1.44c2.36-1.68 4.87-3.19 7.32-4.73l9.73-6.14a4.14 4.14 0 001.47-5.6 4.21 4.21 0 00-3.6-2 3.66 3.66 0 00-2 .56zM86 1443a3.26 3.26 0 00-1.17 4.43c1.3 1.85 2.55 3.71 3.72 5.64.65 1 1.28 2.09 1.88 3.16a27.42 27.42 0 011.26 2.55 20.83 20.83 0 011.06 3.45 60.38 60.38 0 01.17 6.86 3 3 0 105.93 0c0-2.08.05-4.15-.09-6.24a17.44 17.44 0 00-1-4.74c-.4-1.1-.82-2.19-1.29-3.27a52.3 52.3 0 00-2.81-5.21c-1.06-1.84-2.09-3.7-3.28-5.46a3.44 3.44 0 00-2.84-1.61 3.1 3.1 0 00-1.54.44zm50.94 1.67a59.4 59.4 0 00-5.66 5.78c-2 2.25-4 4.52-5.94 6.77a3.22 3.22 0 000 4.5 3.18 3.18 0 004.48 0c2-2.24 4-4.51 6-6.73 1.81-2 3.77-3.85 5.77-5.64a3.33 3.33 0 000-4.68 3.28 3.28 0 00-2.33-1 3.39 3.39 0 00-2.34 1zm15.78 68.03a3.19 3.19 0 00-1.14 4.36 3.5 3.5 0 001.9 1.46l.16.06a33.77 33.77 0 016.24 3.42 26.68 26.68 0 014 3.93 37 37 0 013.17 5.12c.45.87.87 1.75 1.27 2.64l.3.76a3.88 3.88 0 001.65 2.14 3.56 3.56 0 004.88-1.28 3.57 3.57 0 000-3.61 43.5 43.5 0 00-5.1-8.48 38 38 0 00-2.78-3.31 32.76 32.76 0 00-3.87-3.3 36.4 36.4 0 00-8.17-4.23 2 2 0 00-.78-.14 3.45 3.45 0 00-1.68.46zm161.16 132.62a83.45 83.45 0 00-10.92 1.2 52.24 52.24 0 00-9.16 2.29 85.7 85.7 0 00-4.92 2l-1.84.86a18.77 18.77 0 00-1.81.86 4.38 4.38 0 00-2 2.56 4.33 4.33 0 00.43 3.3 4.4 4.4 0 003.7 2.11 6.77 6.77 0 003.36-1c.63-.32 1.26-.66 1.9-1 1.07-.58 2.19-1.1 3.31-1.61a41.4 41.4 0 016-2c2.35-.54 4.69-1 7.07-1.36a48.91 48.91 0 016.39-.46c3 .07 6.05.22 9.06.42a3.91 3.91 0 100-7.81c-2.91-.19-5.84-.44-8.76-.44h-1.82zm24.25 34.2a3.71 3.71 0 00-2.06 1.59c-.91 1.29-1.85 2.56-2.79 3.84a81.19 81.19 0 01-6.38 7 3.48 3.48 0 004.92 4.92 78.52 78.52 0 0010.2-12.29 3.44 3.44 0 00-3-5.18 3.5 3.5 0 00-.91.12zM363.1 1704a2 2 0 00-1.38 2.4c.32 1.46.66 2.92.9 4.38l.63 3.77.48 4.07c.13 1 .18 2.12.23 3.19.09 1.29.22 2.59.23 3.88 0 1.56.05 3.11.07 4.67a109.31 109.31 0 01-.93 15.76c0 .33-.09.66-.13 1q-.49 3.27-1 6.52a3.08 3.08 0 00.29 2.21 2.89 2.89 0 001.72 1.32 2.87 2.87 0 003.63-2.77c.27-2.91.47-5.83.67-8.74.08-1.2.15-2.4.19-3.61s.13-2.56.12-3.84c0-2.69 0-5.37-.13-8.06-.06-1.49-.13-3-.2-4.49s-.23-2.72-.34-4.07a128.45 128.45 0 00-2.61-16.21 1.93 1.93 0 00-1.91-1.44 1.61 1.61 0 00-.49.07zm21.21-12.17a3 3 0 00-1.83 1.41 3 3 0 00-.31 2.36 3.3 3.3 0 001.42 1.84l1.1.82 1.9 1.47A26.21 26.21 0 01391 1704a51.44 51.44 0 015.67 10.21c.82 2 1.51 4.07 2.17 6.14a38.26 38.26 0 011.28 4.95c0 .33.05.66.06 1a3.47 3.47 0 006.93 0 24.56 24.56 0 00-1.85-7.72 98.15 98.15 0 00-4-9.48 42.33 42.33 0 00-8.09-11.87 33.1 33.1 0 00-3.13-2.57c-1.11-.87-2.23-1.73-3.36-2.57a2.63 2.63 0 00-1.5-.42 3.12 3.12 0 00-.88.12zm13.6-43.97q-3.14.73-6.22 1.65a2.88 2.88 0 001.54 5.56c1.49-.43 3-.89 4.5-1.23 1.31-.28 2.62-.55 3.93-.79a15.39 15.39 0 012.63-.06 9.38 9.38 0 011.55.43 3 3 0 003.44-4.47 3.22 3.22 0 00-1.81-1.39 10.57 10.57 0 00-3.6-.58 26.65 26.65 0 00-6 .88zM358.38 1591a4 4 0 00-2.82 5c.73 2 1.49 4 2.1 6a46.11 46.11 0 011.32 6.15 21.63 21.63 0 01.1 5.15 51.71 51.71 0 01-2.35 9.79 3.66 3.66 0 002.55 4.49 3.62 3.62 0 002.82-.36 3.87 3.87 0 001.68-2.19 48.82 48.82 0 001.92-6.91c.21-1 .39-2.11.58-3.17a27.82 27.82 0 00.44-3.64 29.42 29.42 0 00-.19-3.87c-.11-1.1-.24-2.22-.41-3.32a45.22 45.22 0 00-2.78-10.3 4.4 4.4 0 00-1.85-2.42 4.08 4.08 0 00-2-.55 3.89 3.89 0 00-1.07.15zm.84 21.35l-.09.59.09-.59zm-76.5-518.95a4.42 4.42 0 000 8.84 29.34 29.34 0 013.25 0 26.36 26.36 0 015.43 1.57 29.12 29.12 0 015 2.7 69.55 69.55 0 015.31 5.14 4.3 4.3 0 006.09-6.08c-1.54-1.57-3-3.21-4.67-4.65a28 28 0 00-6.3-4.11 43.7 43.7 0 00-6.5-2.57 24.91 24.91 0 00-6.92-.9zm2.44 8.76h.25-.25zm39.84 66.68a4.54 4.54 0 00-1.23 3c-.45 4.69-.87 9.38-1.41 14.06-.37 2.63-.77 5.26-1.1 7.9a4.11 4.11 0 00.58 2.13 4.22 4.22 0 005.78 1.51 4 4 0 001.95-2.52q.89-5.78 1.55-11.58c.44-3.83.73-7.67 1.09-11.5a4.08 4.08 0 00-1.23-3 4.25 4.25 0 00-6 0zm49.11-6.35a3.2 3.2 0 00-1.47 1.91 3.05 3.05 0 00.32 2.47c2 2.65 3.86 5.33 5.78 8 .79 1.1 1.5 2.27 2.24 3.41.61.91 1.21 1.82 1.77 2.76 1.42 2.36 2.8 4.72 4.14 7.12a72.57 72.57 0 013.42 7.25c-.12-.26-.22-.53-.34-.79.36.89.74 1.78 1.07 2.69a3.5 3.5 0 001.52 2 3.28 3.28 0 004.83-3.71c-1.86-5.94-5.06-11.31-8.29-16.58s-6.89-10.36-10.6-15.35a3.48 3.48 0 00-1.92-1.47 3.06 3.06 0 00-.85-.12 3.21 3.21 0 00-1.62.44zm20.11-18.49a3.8 3.8 0 000 5.37 4.08 4.08 0 002.69 1.12l3.27.38 7 .94c5.07 1 10.28 1.78 15.12 3.58l1.17.56a4.09 4.09 0 003 .38 3.85 3.85 0 002.31-1.77 3.94 3.94 0 00.4-3 3.77 3.77 0 00-1.78-2.31 34.12 34.12 0 00-5.86-2.18c-.92-.24-1.85-.52-2.79-.72-2.06-.44-4.12-.88-6.2-1.26-5.15-1-10.37-1.6-15.59-2.21h-.23a3.82 3.82 0 00-2.46 1.13zm-33.48-69.32a41.7 41.7 0 01-1.64 5.23 30.24 30.24 0 01-3.15 5.53 53.58 53.58 0 01-5.84 5.83 3.61 3.61 0 105.1 5.11c1.37-1.21 2.73-2.44 4-3.73a32.19 32.19 0 008.53-16 3.64 3.64 0 00-7-1.93zm292.61-245.57c-2 .19-3.9.39-5.83.69a31.49 31.49 0 00-4.52.92 39.8 39.8 0 00-6.22 2.41 4.23 4.23 0 000 7.31 4.07 4.07 0 003.26.43 37.62 37.62 0 015.69-1.9c1.52-.33 3-.6 4.54-.83l3.31-.32a48.44 48.44 0 0110.28.43A4.2 4.2 0 00667 837a4.37 4.37 0 000-6.18 4.75 4.75 0 00-3.1-1.28 60.8 60.8 0 00-7.4-.55c-1 0-2.08 0-3.11.14zm49.23 47.59c-.82 4.24-1.68 8.45-2.28 12.72a4.09 4.09 0 00.37 2.87 3.79 3.79 0 002.23 1.71 3.75 3.75 0 004.58-2.6c.89-4.2 1.67-8.44 2.49-12.65a4.11 4.11 0 00-.38-3 3.91 3.91 0 00-2.3-1.76 3.91 3.91 0 00-4.71 2.67zm55.55-12.49a3.29 3.29 0 00-1.17 4.48 126.28 126.28 0 017.4 11.31c2 3.63 3.6 7.45 5.24 11.25.47 1.13.9 2.29 1.35 3.43.29.75.56 1.48.82 2.24a41.21 41.21 0 011.25 5 3.41 3.41 0 006.23.81 3.57 3.57 0 00.35-2.62 34.8 34.8 0 00-1.81-6.42l-1.5-3.64c-.87-2.13-1.82-4.21-2.76-6.3a84.14 84.14 0 00-6.27-11.64c-1.48-2.29-3.08-4.51-4.66-6.73a3.43 3.43 0 00-2-1.51 3.48 3.48 0 00-.85-.11 3.39 3.39 0 00-1.67.44zm4.98-65.21c-.41.68-.83 1.33-1.29 2a75 75 0 01-6 6.44 756.58 756.58 0 01-8.67 8.3 3.66 3.66 0 005.18 5.18c3-2.87 6-5.73 9-8.63a48 48 0 008.12-9.55 3.69 3.69 0 00-1.31-5 3.54 3.54 0 00-1.82-.5 3.77 3.77 0 00-3.2 1.81zm-89.28-36.81a4 4 0 000 5.55c2.19 2.3 4.44 4.53 6.47 7a40.88 40.88 0 013.18 5.38 47.82 47.82 0 012.1 6.43c.73 3 1.41 6.07 2.09 9.11a3.92 3.92 0 004.81 2.73 4 4 0 002.74-4.81c-.68-3.06-1.37-6.12-2.11-9.17a39.86 39.86 0 00-2.9-8.3c-.61-1.22-1.22-2.43-2-3.59a39.79 39.79 0 00-3-4.08c-1.79-2.2-3.89-4.19-5.85-6.22a3.78 3.78 0 00-2.75-1.14 3.94 3.94 0 00-2.81 1.14z')
+
+.container
+  nav.nav
+    header.header
+      a(href="") Blog
+      a(href="") About
+      a(href="") Contact
+  div.intro
+    h1 Flowers Forever
+  main.main
+    article
+      h2.article-title What's Your Favorite Flower?
+      p  Florem ipsum sneezeweed peruvian lily dune helleborine plumed thistle. Scabious st john’s wort holy grass false goat’s beard. Bloom glory lily drumstick gentian buttercup cosmos foxtail lily. Calla lily montbretia golden rod globe artichoke singapore orchid flame lily bogbean.
+      p Lobster claw grass of parnassus thrift. Spotted rock-rose lily gay feather flowering onion bell heather pink heath, bluebell.
+    
+    article
+      h2.article-title Once Upon a Petal
+      p  Lobster claw hyacinth brodiaea royal bluebell st john’s wort scots primrose. Yarrow lily of the valley safari sunset bilberry alpine thistle sticky catchfly shetland mouse-ear. Daisy cotton-grass hop drumstick. Ipsum forget-me-not carnation holy grass canterbury bells.
+      p Sunflower cosmos lady’s slipper orchid. Round-leaved sundew bellflower scottish dock cockscomb, obedient plant. Jacob’s ladder dog rose bearberry.
+     
+    article
+      h2.article-title Botanical Garden Dreams
+      p  Stock, flame lily singapore orchid tuberose. Loose strife red-hot poker marguerite, lisianthus. Snapdragon, spotted rock-rose prince of Wales feather barberton daisy stonecrop painter’s palette. Flower queen Fabiola lily daisy. Windflower crocus columbine sturt’s desert rose, flamingo flower. African lily marigold queen Anne’s lace. Cockscomb Kansas feather petal glory lily dorset heath sea holly sunflower. China aster lilac, dandelion brodiaea, amaryllis.
+      p African lily marigold queen Anne’s lace.
+      
+    article
+      h2.article-title A Passion for Blooms
+      p Stock, flame lily singapore orchid tuberose. Loose strife red-hot poker marguerite, lisianthus. Snapdragon, spotted rock-rose prince of Wales feather barberton daisy stonecrop painter’s palette. Flower queen Fabiola lily daisy.
+      p Windflower crocus columbine sturt’s desert rose, flamingo flower. African lily marigold queen Anne’s lace. Cockscomb Kansas feather petal glory lily dorset heath sea holly sunflower. China aster lilac, dandelion brodiaea, amaryllis.
+  
+svg.flower-right(viewBox="0 0 2646 2526")
+  use(xlink:href="#flower-path")
+  
+svg.flower-left(viewBox="0 0 2646 2526")
+  use(xlink:href="#flower-path")
+  
+svg.flower-bottom(viewBox="0 0 2646 2526")
+  use(xlink:href="#flower-path")
\ No newline at end of file
diff --git a/grid-based-blog-index-page-layout/src/style.scss b/grid-based-blog-index-page-layout/src/style.scss
new file mode 100644
index 0000000..d41f8b7
--- /dev/null
+++ b/grid-based-blog-index-page-layout/src/style.scss
@@ -0,0 +1,221 @@
+:root {
+  --pink: #db8398;
+  --black: #3c3c3c;
+}
+
+body {
+  padding: 1rem;
+  font-family: 'Nunito', sans-serif;
+  color: var(--black);
+  overflow-x: hidden;
+  min-height: 100vh;
+  position: relative;
+  
+  @media (min-width: 700px) {
+    padding: 3rem;
+  }
+}
+
+p {
+  line-height: 1.6;
+}
+
+h1,
+h2 {
+  font-family: 'Libre Baskerville', serif;
+  font-weight: normal;
+  margin-top: 0;
+}
+
+.article-title {
+  font-size: 1.5rem;
+  color: var(--pink);
+  
+  @media (min-width: 800px) {
+    font-size: 2rem;
+  }
+}
+
+.nav,
+article,
+.intro {
+  padding: 1rem;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%;
+  font-size: 1.2rem;
+  
+  a {
+    color: currentColor;
+    text-decoration: none;
+    margin-right: 24px;
+    transition: all 0.3s ease-in;
+    
+    &:hover,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
+
+.container {
+  max-width: 1120px;
+  margin: 0 auto;
+  display: grid;
+  gap: 2rem;
+  grid-template: 
+    "nav"     40px
+    "intro"   auto
+    "article" auto / 1fr;
+  
+   @media (min-width: 700px) {
+    grid-template: 
+      "intro nav     .   "     40px
+      "intro article article" 1fr
+      "intro article article" 1fr / 80px 1fr;
+   }
+  
+  @media (min-width: 1000px) {
+    grid-template: 
+      "intro nav     .   "     40px
+      "intro article article" 1fr
+      "intro article article" 1fr / 150px 1fr;
+   }
+}
+
+.nav {
+  grid-area: nav;
+}
+
+.intro {
+  grid-area: intro;
+  
+  h1 {
+    margin-bottom: 0;
+    color: var(--pink);
+  }
+  
+  @media (min-width: 700px) {
+    writing-mode: vertical-rl;
+    align-self: center;
+    justify-self: center;
+  }
+  
+  h1 {
+    font-family: 'Nunito', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0.3rem;
+  }
+}
+
+.main {
+  grid-area: article;
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(auto-fill, (minmax(300px, min-content)));
+  
+  @media (min-width: 700px) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 180px);
+  }
+  
+  
+  @media (min-width: 700px) {
+    grid-template-rows: repeat(2, minmax(300px, 1fr));  
+  }
+}
+
+.flower-svg {
+  display: none;
+}
+
+.flower-right {
+  position: absolute;
+  width: 700px;
+  height: auto;
+  z-index: -1;
+  left: -280px;
+  top: -5%;
+  transform: rotate(-5deg) scaleX(-1);
+  transform-origin: top;
+  
+  @media (min-width: 400px) {
+    left: unset;
+    right: -6%;
+    transform: rotate(-7deg) scaleX(-1);
+  }
+  
+  @media (min-width: 700px) {
+    top: -10%;
+    transform: rotate(-28deg);
+    left: unset;
+    right: -55vw;
+    transform-origin: right;
+  }
+  
+  @media (min-width: 1000px) {
+   transform: rotate(-35deg);
+    top: -28%;
+    right: -35vw;
+    transform-origin: right;
+  }
+}
+
+.flower-left {
+  display: none;
+  
+  @media (min-width: 700px) {
+    display: block;
+    position: absolute;
+    left: -670px;
+    width: 700px;
+    height: auto;
+    top: -45%;
+    transform: scaleX(-1) rotate(-50deg);
+    transform-origin: bottom;
+    z-index: -1;
+  }
+  
+  @media (min-width: 1000px) {
+    top: -40%;
+    left: -600px;
+    transform: scaleX(-1) rotate(-35deg);
+  }
+  
+  @media(min-width: 1200px) {
+    right: -30vw;
+  }
+}
+
+.flower-bottom {
+   display: none;
+  
+  @media (min-width: 700px) {
+    display: block;
+    position: absolute;
+    height: 700px;
+    right: -730px;
+    top: 50%;
+    transform: rotate(75deg) scaleY(-1);
+    transform-origin: bottom;
+    z-index: -1;
+  }
+  
+  @media(min-width: 1000px) {
+    height: 700px;
+    right: -56vw;
+    top: 45%;
+    transform: rotate(75deg) scaleY(-1);
+  }
+  
+  @media(min-width: 1200px) {
+    right: -40vw;
+  }
+}
+
diff --git a/grid-collage-layout/LICENSE.txt b/grid-collage-layout/LICENSE.txt
new file mode 100644
index 0000000..0c4427a
--- /dev/null
+++ b/grid-collage-layout/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Jhey (https://codepen.io/jh3y/pen/BaOyjgj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/grid-collage-layout/README.md b/grid-collage-layout/README.md
new file mode 100644
index 0000000..39336c2
--- /dev/null
+++ b/grid-collage-layout/README.md
@@ -0,0 +1,4 @@
+# Grid Collage Layout
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jh3y/pen/BaOyjgj](https://codepen.io/jh3y/pen/BaOyjgj).
+
diff --git a/grid-collage-layout/dist/index.html b/grid-collage-layout/dist/index.html
new file mode 100644
index 0000000..84336b4
--- /dev/null
+++ b/grid-collage-layout/dist/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Grid Collage Layout</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main>
+  <ul>
+    <li style="--x1: 2; --x2: 6; --y1: 1; --y2: 4;">
+      <img src="https://picsum.photos/600/600?random=1" alt="">
+    </li>
+    <li style="--x1: 6; --x2: 8; --y1: 2; --y2: 4;">
+      <img src="https://picsum.photos/600/600?random=2" alt="">
+    </li>
+    <li style="--x1: 1; --x2: 4; --y1: 4; --y2: 7;">
+      <img src="https://picsum.photos/600/600?random=3" alt="">
+    </li>
+    <li style="--x1: 4; --x2: 7; --y1: 4; --y2: 7;">
+      <img src="https://picsum.photos/600/600?random=4" alt="">
+    </li>
+    <li style="--x1: 7; --x2: 9; --y1: 4; --y2: 6;">
+      <img src="https://picsum.photos/600/600?random=5" alt="">
+    </li>
+    <li style="--x1: 2; --x2: 4; --y1: 7; --y2: 9;">
+      <img src="https://picsum.photos/600/600?random=7" alt="">
+    </li>
+    <li style="--x1: 4; --x2: 7; --y1: 7; --y2: 10;">
+      <img src="https://picsum.photos/600/600?random=8" alt="">
+    </li>
+    <li style="--x1: 7; --x2: 10; --y1: 6; --y2: 9;">
+      <img src="https://picsum.photos/600/600?random=9" alt="">
+    </li>
+  </ul>
+</main>
+<!-- partial -->
+  <script src='https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js'></script>
+</body>
+</html>
diff --git a/grid-collage-layout/dist/style.css b/grid-collage-layout/dist/style.css
new file mode 100644
index 0000000..c1ac9eb
--- /dev/null
+++ b/grid-collage-layout/dist/style.css
@@ -0,0 +1,66 @@
+@import "https://unpkg.com/open-props/open-props.min.css";
+@import "https://unpkg.com/open-props/normalize.min.css";
+
+*,
+*:after,
+*:before {
+	box-sizing: border-box;
+}
+
+body {
+	display: grid;
+	place-items: center;
+	min-height: 100vh;
+	font-family:  'Google Sans', sans-serif, system-ui;
+  width: 100vw;
+  overflow-x: hidden;
+  background: var(--surface-2);
+}
+
+ul {
+	--big-tile-size: 50vmin;
+	--scale: 0.4;
+	--rotation: 270deg;
+	--tile-size: calc(var(--big-tile-size) / 3);
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+	display: grid;
+	gap: 1vmin;
+	grid-template: repeat(9, var(--tile-size)) / repeat(9, var(--tile-size));
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%) scale(var(--scale));
+}
+
+img {
+	--rotation: -270deg;
+	--scale: 1;
+	height: 200%;
+	min-width: 200%;
+	aspect-ratio: 1;
+	-o-object-fit: cover;
+	   object-fit: cover;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+li {
+	padding: 0;
+	position: relative;
+	background: hsl(0 0% 75% / 0.2);
+	max-inline-size: 100%;
+}
+
+li {
+	grid-column: var(--x1, auto) / var(--x2, auto);
+	grid-row: var(--y1, auto) / var(--y2, auto);
+}
+
+li {
+	border-radius: var(--radius-3);
+	overflow: hidden;
+}
\ No newline at end of file
diff --git a/grid-collage-layout/src/index.html b/grid-collage-layout/src/index.html
new file mode 100644
index 0000000..2caba8c
--- /dev/null
+++ b/grid-collage-layout/src/index.html
@@ -0,0 +1,28 @@
+<main>
+  <ul>
+    <li style="--x1: 2; --x2: 6; --y1: 1; --y2: 4;">
+      <img src="https://picsum.photos/600/600?random=1" alt="">
+    </li>
+    <li style="--x1: 6; --x2: 8; --y1: 2; --y2: 4;">
+      <img src="https://picsum.photos/600/600?random=2" alt="">
+    </li>
+    <li style="--x1: 1; --x2: 4; --y1: 4; --y2: 7;">
+      <img src="https://picsum.photos/600/600?random=3" alt="">
+    </li>
+    <li style="--x1: 4; --x2: 7; --y1: 4; --y2: 7;">
+      <img src="https://picsum.photos/600/600?random=4" alt="">
+    </li>
+    <li style="--x1: 7; --x2: 9; --y1: 4; --y2: 6;">
+      <img src="https://picsum.photos/600/600?random=5" alt="">
+    </li>
+    <li style="--x1: 2; --x2: 4; --y1: 7; --y2: 9;">
+      <img src="https://picsum.photos/600/600?random=7" alt="">
+    </li>
+    <li style="--x1: 4; --x2: 7; --y1: 7; --y2: 10;">
+      <img src="https://picsum.photos/600/600?random=8" alt="">
+    </li>
+    <li style="--x1: 7; --x2: 10; --y1: 6; --y2: 9;">
+      <img src="https://picsum.photos/600/600?random=9" alt="">
+    </li>
+  </ul>
+</main>
\ No newline at end of file
diff --git a/grid-collage-layout/src/style.css b/grid-collage-layout/src/style.css
new file mode 100644
index 0000000..11b5738
--- /dev/null
+++ b/grid-collage-layout/src/style.css
@@ -0,0 +1,65 @@
+@import "https://unpkg.com/open-props/open-props.min.css";
+@import "https://unpkg.com/open-props/normalize.min.css";
+
+*,
+*:after,
+*:before {
+	box-sizing: border-box;
+}
+
+body {
+	display: grid;
+	place-items: center;
+	min-height: 100vh;
+	font-family:  'Google Sans', sans-serif, system-ui;
+  width: 100vw;
+  overflow-x: hidden;
+  background: var(--surface-2);
+}
+
+ul {
+	--big-tile-size: 50vmin;
+	--scale: 0.4;
+	--rotation: 270deg;
+	--tile-size: calc(var(--big-tile-size) / 3);
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+	display: grid;
+	gap: 1vmin;
+	grid-template: repeat(9, var(--tile-size)) / repeat(9, var(--tile-size));
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%) scale(var(--scale));
+}
+
+img {
+	--rotation: -270deg;
+	--scale: 1;
+	height: 200%;
+	min-width: 200%;
+	aspect-ratio: 1;
+	object-fit: cover;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+li {
+	padding: 0;
+	position: relative;
+	background: hsl(0 0% 75% / 0.2);
+	max-inline-size: 100%;
+}
+
+li {
+	grid-column: var(--x1, auto) / var(--x2, auto);
+	grid-row: var(--y1, auto) / var(--y2, auto);
+}
+
+li {
+	border-radius: var(--radius-3);
+	overflow: hidden;
+}
\ No newline at end of file
diff --git a/grid-icosahedron-refraction/README.markdown b/grid-icosahedron-refraction/README.markdown
new file mode 100644
index 0000000..76cb738
--- /dev/null
+++ b/grid-icosahedron-refraction/README.markdown
@@ -0,0 +1,5 @@
+# Grid Icosahedron Refraction
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/alphardex/pen/dyOQyPJ](https://codepen.io/alphardex/pen/dyOQyPJ).
+
+
diff --git a/grid-icosahedron-refraction/dist/index.html b/grid-icosahedron-refraction/dist/index.html
new file mode 100644
index 0000000..d44f0f0
--- /dev/null
+++ b/grid-icosahedron-refraction/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Grid Icosahedron Refraction</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/alphardex/aqua.css/dist/aqua.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="relative w-screen h-screen">
+  <div class="grid-icosahedron w-full h-full bg-black"></div>
+</div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/grid-icosahedron-refraction/dist/script.js b/grid-icosahedron-refraction/dist/script.js
new file mode 100644
index 0000000..94a360f
--- /dev/null
+++ b/grid-icosahedron-refraction/dist/script.js
@@ -0,0 +1,834 @@
+import * as THREE from "https://cdn.skypack.dev/three@0.124.0";
+import { OrbitControls } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/controls/OrbitControls";
+import { GLTFLoader } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/loaders/GLTFLoader";
+import { FBXLoader } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/loaders/FBXLoader";
+import { EffectComposer } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/postprocessing/EffectComposer";
+import Stats from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/libs/stats.module";
+import { RenderPass } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/postprocessing/RenderPass.js";
+import { ShaderPass } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/postprocessing/ShaderPass.js";
+import gsap from "https://cdn.skypack.dev/gsap@3.6.0";
+const calcAspect = (el) => el.clientWidth / el.clientHeight;
+const getNormalizedMousePos = (e) => {
+    return {
+        x: (e.clientX / window.innerWidth) * 2 - 1,
+        y: -(e.clientY / window.innerHeight) * 2 + 1
+    };
+};
+const gridIcosahedronTextureUrl = `https://i.loli.net/2021/03/09/1Cglerjx3yLauOo.jpg`;
+const gridIcosahedronShapeVertexShader = `
+// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
+vec4 permute(vec4 x){return mod(((x*34.)+1.)*x,289.);}
+vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-.85373472095314*r;}
+vec3 fade(vec3 t){return t*t*t*(t*(t*6.-15.)+10.);}
+
+float cnoise(vec3 P){
+    vec3 Pi0=floor(P);// Integer part for indexing
+    vec3 Pi1=Pi0+vec3(1.);// Integer part + 1
+    Pi0=mod(Pi0,289.);
+    Pi1=mod(Pi1,289.);
+    vec3 Pf0=fract(P);// Fractional part for interpolation
+    vec3 Pf1=Pf0-vec3(1.);// Fractional part - 1.0
+    vec4 ix=vec4(Pi0.x,Pi1.x,Pi0.x,Pi1.x);
+    vec4 iy=vec4(Pi0.yy,Pi1.yy);
+    vec4 iz0=Pi0.zzzz;
+    vec4 iz1=Pi1.zzzz;
+    
+    vec4 ixy=permute(permute(ix)+iy);
+    vec4 ixy0=permute(ixy+iz0);
+    vec4 ixy1=permute(ixy+iz1);
+    
+    vec4 gx0=ixy0/7.;
+    vec4 gy0=fract(floor(gx0)/7.)-.5;
+    gx0=fract(gx0);
+    vec4 gz0=vec4(.5)-abs(gx0)-abs(gy0);
+    vec4 sz0=step(gz0,vec4(0.));
+    gx0-=sz0*(step(0.,gx0)-.5);
+    gy0-=sz0*(step(0.,gy0)-.5);
+    
+    vec4 gx1=ixy1/7.;
+    vec4 gy1=fract(floor(gx1)/7.)-.5;
+    gx1=fract(gx1);
+    vec4 gz1=vec4(.5)-abs(gx1)-abs(gy1);
+    vec4 sz1=step(gz1,vec4(0.));
+    gx1-=sz1*(step(0.,gx1)-.5);
+    gy1-=sz1*(step(0.,gy1)-.5);
+    
+    vec3 g000=vec3(gx0.x,gy0.x,gz0.x);
+    vec3 g100=vec3(gx0.y,gy0.y,gz0.y);
+    vec3 g010=vec3(gx0.z,gy0.z,gz0.z);
+    vec3 g110=vec3(gx0.w,gy0.w,gz0.w);
+    vec3 g001=vec3(gx1.x,gy1.x,gz1.x);
+    vec3 g101=vec3(gx1.y,gy1.y,gz1.y);
+    vec3 g011=vec3(gx1.z,gy1.z,gz1.z);
+    vec3 g111=vec3(gx1.w,gy1.w,gz1.w);
+    
+    vec4 norm0=taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
+    g000*=norm0.x;
+    g010*=norm0.y;
+    g100*=norm0.z;
+    g110*=norm0.w;
+    vec4 norm1=taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
+    g001*=norm1.x;
+    g011*=norm1.y;
+    g101*=norm1.z;
+    g111*=norm1.w;
+    
+    float n000=dot(g000,Pf0);
+    float n100=dot(g100,vec3(Pf1.x,Pf0.yz));
+    float n010=dot(g010,vec3(Pf0.x,Pf1.y,Pf0.z));
+    float n110=dot(g110,vec3(Pf1.xy,Pf0.z));
+    float n001=dot(g001,vec3(Pf0.xy,Pf1.z));
+    float n101=dot(g101,vec3(Pf1.x,Pf0.y,Pf1.z));
+    float n011=dot(g011,vec3(Pf0.x,Pf1.yz));
+    float n111=dot(g111,Pf1);
+    
+    vec3 fade_xyz=fade(Pf0);
+    vec4 n_z=mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
+    vec2 n_yz=mix(n_z.xy,n_z.zw,fade_xyz.y);
+    float n_xyz=mix(n_yz.x,n_yz.y,fade_xyz.x);
+    return 2.2*n_xyz;
+}
+
+varying vec2 vUv;
+varying vec3 vNormal;
+varying vec3 vEyeVector;
+
+uniform float uNoiseDensity;
+
+// https://tympanus.net/codrops/2019/10/29/real-time-multiside-refraction-in-three-steps/
+vec3 getEyeVector(){
+    vec4 worldPosition=modelMatrix*vec4(position,1.);
+    vec3 eyeVector=normalize(worldPosition.xyz-cameraPosition);
+    return eyeVector;
+}
+
+void main(){
+    vec3 noise=pow(cnoise(normal),3.)*normal*uNoiseDensity;
+    vec3 newPosition=position+noise;
+    vec4 modelPosition=modelMatrix*vec4(newPosition,1.);
+    vec4 viewPosition=viewMatrix*modelPosition;
+    vec4 projectedPosition=projectionMatrix*viewPosition;
+    gl_Position=projectedPosition;
+    
+    vUv=uv;
+    vNormal=normalize(normalMatrix*normal);
+    vEyeVector=getEyeVector();
+}
+`;
+const gridIcosahedronShapeFragmentShader = `
+uniform float uTime;
+uniform vec2 uMouse;
+uniform vec2 uResolution;
+uniform sampler2D uTexture;
+uniform float uRefractionStrength;
+
+varying vec2 vUv;
+varying vec3 vNormal;
+varying vec3 vEyeVector;
+
+// https://community.khronos.org/t/getting-the-normal-with-dfdx-and-dfdy/70177
+vec3 computeNormal(vec3 normal){
+    vec3 X=dFdx(normal);
+    vec3 Y=dFdy(normal);
+    vec3 cNormal=normalize(cross(X,Y));
+    return cNormal;
+}
+
+// http://glslsandbox.com/e#47182.0
+vec2 hash22(vec2 p){
+    p=fract(p*vec2(5.3983,5.4427));
+    p+=dot(p.yx,p.xy+vec2(21.5351,14.3137));
+    return fract(vec2(p.x*p.y*95.4337,p.x*p.y*97.597));
+}
+
+// https://www.shadertoy.com/view/4scSW4
+float fresnel(float bias,float scale,float power,vec3 I,vec3 N)
+{
+    return bias+scale*pow(1.+dot(I,N),power);
+}
+
+void main(){
+    vec3 cNormal=computeNormal(vNormal);
+    float diffuse=dot(cNormal,vec3(1.));
+    vec2 rand=hash22(vec2(floor(diffuse*10.)));
+    vec2 strength=vec2(sign((rand.x-.5))+(rand.x-.5)*.6,sign((rand.y-.5))+(rand.y-.5)*.6);
+    vec2 uv=strength*gl_FragCoord.xy/vec2(1000.);
+    vec3 refraction=uRefractionStrength*refract(vEyeVector,cNormal,1./3.);
+    uv+=refraction.xy;
+    vec4 color=texture2D(uTexture,uv);
+    float F=fresnel(0.,1.,2.,vEyeVector,cNormal);
+    color*=(1.-F);
+    gl_FragColor=color;
+}
+`;
+const gridIcosahedronEdgeVertexShader = `
+// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
+vec4 permute(vec4 x){return mod(((x*34.)+1.)*x,289.);}
+vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-.85373472095314*r;}
+vec3 fade(vec3 t){return t*t*t*(t*(t*6.-15.)+10.);}
+
+float cnoise(vec3 P){
+    vec3 Pi0=floor(P);// Integer part for indexing
+    vec3 Pi1=Pi0+vec3(1.);// Integer part + 1
+    Pi0=mod(Pi0,289.);
+    Pi1=mod(Pi1,289.);
+    vec3 Pf0=fract(P);// Fractional part for interpolation
+    vec3 Pf1=Pf0-vec3(1.);// Fractional part - 1.0
+    vec4 ix=vec4(Pi0.x,Pi1.x,Pi0.x,Pi1.x);
+    vec4 iy=vec4(Pi0.yy,Pi1.yy);
+    vec4 iz0=Pi0.zzzz;
+    vec4 iz1=Pi1.zzzz;
+    
+    vec4 ixy=permute(permute(ix)+iy);
+    vec4 ixy0=permute(ixy+iz0);
+    vec4 ixy1=permute(ixy+iz1);
+    
+    vec4 gx0=ixy0/7.;
+    vec4 gy0=fract(floor(gx0)/7.)-.5;
+    gx0=fract(gx0);
+    vec4 gz0=vec4(.5)-abs(gx0)-abs(gy0);
+    vec4 sz0=step(gz0,vec4(0.));
+    gx0-=sz0*(step(0.,gx0)-.5);
+    gy0-=sz0*(step(0.,gy0)-.5);
+    
+    vec4 gx1=ixy1/7.;
+    vec4 gy1=fract(floor(gx1)/7.)-.5;
+    gx1=fract(gx1);
+    vec4 gz1=vec4(.5)-abs(gx1)-abs(gy1);
+    vec4 sz1=step(gz1,vec4(0.));
+    gx1-=sz1*(step(0.,gx1)-.5);
+    gy1-=sz1*(step(0.,gy1)-.5);
+    
+    vec3 g000=vec3(gx0.x,gy0.x,gz0.x);
+    vec3 g100=vec3(gx0.y,gy0.y,gz0.y);
+    vec3 g010=vec3(gx0.z,gy0.z,gz0.z);
+    vec3 g110=vec3(gx0.w,gy0.w,gz0.w);
+    vec3 g001=vec3(gx1.x,gy1.x,gz1.x);
+    vec3 g101=vec3(gx1.y,gy1.y,gz1.y);
+    vec3 g011=vec3(gx1.z,gy1.z,gz1.z);
+    vec3 g111=vec3(gx1.w,gy1.w,gz1.w);
+    
+    vec4 norm0=taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
+    g000*=norm0.x;
+    g010*=norm0.y;
+    g100*=norm0.z;
+    g110*=norm0.w;
+    vec4 norm1=taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
+    g001*=norm1.x;
+    g011*=norm1.y;
+    g101*=norm1.z;
+    g111*=norm1.w;
+    
+    float n000=dot(g000,Pf0);
+    float n100=dot(g100,vec3(Pf1.x,Pf0.yz));
+    float n010=dot(g010,vec3(Pf0.x,Pf1.y,Pf0.z));
+    float n110=dot(g110,vec3(Pf1.xy,Pf0.z));
+    float n001=dot(g001,vec3(Pf0.xy,Pf1.z));
+    float n101=dot(g101,vec3(Pf1.x,Pf0.y,Pf1.z));
+    float n011=dot(g011,vec3(Pf0.x,Pf1.yz));
+    float n111=dot(g111,Pf1);
+    
+    vec3 fade_xyz=fade(Pf0);
+    vec4 n_z=mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
+    vec2 n_yz=mix(n_z.xy,n_z.zw,fade_xyz.y);
+    float n_xyz=mix(n_yz.x,n_yz.y,fade_xyz.x);
+    return 2.2*n_xyz;
+}
+
+varying vec2 vUv;
+varying vec3 vCenter;
+
+attribute vec3 aCenter;
+
+uniform float uNoiseDensity;
+
+void main(){
+    vec3 noise=pow(cnoise(normal),3.)*normal*uNoiseDensity;
+    vec3 newPosition=position+noise;
+    vec4 modelPosition=modelMatrix*vec4(newPosition,1.);
+    vec4 viewPosition=viewMatrix*modelPosition;
+    vec4 projectedPosition=projectionMatrix*viewPosition;
+    gl_Position=projectedPosition;
+    
+    vUv=uv;
+    vCenter=aCenter;
+}
+`;
+const gridIcosahedronEdgeFragmentShader = `
+uniform float uTime;
+uniform vec2 uMouse;
+uniform vec2 uResolution;
+uniform float uWidth;
+
+varying vec2 vUv;
+varying vec3 vCenter;
+
+// https://threejs.org/examples/?q=wire#webgl_materials_wireframe
+float edgeFactorTri(){
+    vec3 d=fwidth(vCenter);
+    vec3 a3=smoothstep(d*(uWidth-.5),d*(uWidth+.5),vCenter);
+    return min(min(a3.x,a3.y),a3.z);
+}
+
+float invert(float n){
+    return 1.-n;
+}
+
+void main(){
+    float line=invert(edgeFactorTri());
+    if(line<.1){
+        discard;
+    }
+    vec4 color=vec4(vec3(line),1.);
+    gl_FragColor=color;
+}
+`;
+const gridIcosahedronPostprocessingVertexShader = `
+varying vec2 vUv;
+
+void main(){
+    vec4 modelPosition=modelMatrix*vec4(position,1.);
+    vec4 viewPosition=viewMatrix*modelPosition;
+    vec4 projectedPosition=projectionMatrix*viewPosition;
+    gl_Position=projectedPosition;
+    
+    vUv=uv;
+}
+`;
+const gridIcosahedronPostprocessingFragmentShader = `
+uniform float uTime;
+uniform vec2 uMouse;
+uniform vec2 uResolution;
+uniform sampler2D tDiffuse;
+uniform float uRGBShift;
+
+varying vec2 vUv;
+
+// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
+float hash(vec2 p){return fract(1e4*sin(17.*p.x+p.y*.1)*(.1+abs(sin(p.y*13.+p.x))));}
+
+vec3 blackAndWhite(vec3 color){
+    return vec3((color.r+color.g+color.b)/5.);
+}
+
+// https://github.com/spite/Wagner/blob/master/fragment-shaders/rgb-split-fs.glsl
+vec4 RGBShift(sampler2D tDiffuse,vec2 uv,vec2 offset,float isBlackWhite){
+    vec4 color1=texture2D(tDiffuse,vUv-offset);
+    vec4 color2=texture2D(tDiffuse,vUv);
+    vec4 color3=texture2D(tDiffuse,vUv+offset);
+    if(isBlackWhite==1.){
+        color1.rgb=blackAndWhite(color1.rgb);
+        color2.rgb=blackAndWhite(color2.rgb);
+        color3.rgb=blackAndWhite(color3.rgb);
+    }
+    vec4 color=vec4(color1.r,color2.g,color3.b,color1.a+color2.a+color3.a);
+    return color;
+}
+
+void main(){
+    float noise=hash(vUv+uTime)*.1;
+    vec4 color=RGBShift(tDiffuse,vUv,vec2(.01)*uRGBShift,1.);
+    color.rgb+=vec3(noise);
+    gl_FragColor=color;
+}
+`;
+class Base {
+    constructor(sel, debug = false) {
+        this.debug = debug;
+        this.container = document.querySelector(sel);
+        this.perspectiveCameraParams = {
+            fov: 75,
+            near: 0.1,
+            far: 100
+        };
+        this.orthographicCameraParams = {
+            zoom: 2,
+            near: -100,
+            far: 1000
+        };
+        this.cameraPosition = new THREE.Vector3(0, 3, 10);
+        this.lookAtPosition = new THREE.Vector3(0, 0, 0);
+        this.rendererParams = {
+            outputEncoding: THREE.LinearEncoding,
+            config: {
+                alpha: true,
+                antialias: true
+            }
+        };
+        this.mousePos = new THREE.Vector2(0, 0);
+    }
+    // 初始化
+    init() {
+        this.createScene();
+        this.createPerspectiveCamera();
+        this.createRenderer();
+        this.createMesh({});
+        this.createLight();
+        this.createOrbitControls();
+        this.addListeners();
+        this.setLoop();
+    }
+    // 创建场景
+    createScene() {
+        const scene = new THREE.Scene();
+        if (this.debug) {
+            scene.add(new THREE.AxesHelper());
+            const stats = Stats();
+            this.container.appendChild(stats.dom);
+            this.stats = stats;
+        }
+        this.scene = scene;
+    }
+    // 创建透视相机
+    createPerspectiveCamera() {
+        const { perspectiveCameraParams, cameraPosition, lookAtPosition } = this;
+        const { fov, near, far } = perspectiveCameraParams;
+        const aspect = calcAspect(this.container);
+        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
+        camera.position.copy(cameraPosition);
+        camera.lookAt(lookAtPosition);
+        this.camera = camera;
+    }
+    // 创建正交相机
+    createOrthographicCamera() {
+        const { orthographicCameraParams, cameraPosition, lookAtPosition } = this;
+        const { left, right, top, bottom, near, far } = orthographicCameraParams;
+        const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
+        camera.position.copy(cameraPosition);
+        camera.lookAt(lookAtPosition);
+        this.camera = camera;
+    }
+    // 更新正交相机参数
+    updateOrthographicCameraParams() {
+        const { container } = this;
+        const { zoom, near, far } = this.orthographicCameraParams;
+        const aspect = calcAspect(container);
+        this.orthographicCameraParams = {
+            left: -zoom * aspect,
+            right: zoom * aspect,
+            top: zoom,
+            bottom: -zoom,
+            near,
+            far,
+            zoom
+        };
+    }
+    // 创建渲染
+    createRenderer(useWebGL1 = false) {
+        var _a;
+        const { rendererParams } = this;
+        const { outputEncoding, config } = rendererParams;
+        const renderer = !useWebGL1
+            ? new THREE.WebGLRenderer(config)
+            : new THREE.WebGL1Renderer(config);
+        renderer.setSize(this.container.clientWidth, this.container.clientHeight);
+        renderer.outputEncoding = outputEncoding;
+        this.resizeRendererToDisplaySize();
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.appendChild(renderer.domElement);
+        this.renderer = renderer;
+        this.renderer.setClearColor(0x000000, 0);
+    }
+    // 允许投影
+    enableShadow() {
+        this.renderer.shadowMap.enabled = true;
+    }
+    // 调整渲染器尺寸
+    resizeRendererToDisplaySize() {
+        const { renderer } = this;
+        if (!renderer) {
+            return;
+        }
+        const canvas = renderer.domElement;
+        const pixelRatio = window.devicePixelRatio;
+        const { clientWidth, clientHeight } = canvas;
+        const width = (clientWidth * pixelRatio) | 0;
+        const height = (clientHeight * pixelRatio) | 0;
+        const isResizeNeeded = canvas.width !== width || canvas.height !== height;
+        if (isResizeNeeded) {
+            renderer.setSize(width, height, false);
+        }
+        return isResizeNeeded;
+    }
+    // 创建网格
+    createMesh(meshObject, container = this.scene) {
+        const { geometry = new THREE.BoxGeometry(1, 1, 1), material = new THREE.MeshStandardMaterial({
+            color: new THREE.Color("#d9dfc8")
+        }), position = new THREE.Vector3(0, 0, 0) } = meshObject;
+        const mesh = new THREE.Mesh(geometry, material);
+        mesh.position.copy(position);
+        container.add(mesh);
+        return mesh;
+    }
+    // 创建光源
+    createLight() {
+        const dirLight = new THREE.DirectionalLight(new THREE.Color("#ffffff"), 0.5);
+        dirLight.position.set(0, 50, 0);
+        this.scene.add(dirLight);
+        const ambiLight = new THREE.AmbientLight(new THREE.Color("#ffffff"), 0.4);
+        this.scene.add(ambiLight);
+    }
+    // 创建轨道控制
+    createOrbitControls() {
+        const controls = new OrbitControls(this.camera, this.renderer.domElement);
+        const { lookAtPosition } = this;
+        controls.target.copy(lookAtPosition);
+        controls.update();
+        this.controls = controls;
+    }
+    // 监听事件
+    addListeners() {
+        this.onResize();
+    }
+    // 监听画面缩放
+    onResize() {
+        window.addEventListener("resize", (e) => {
+            if (this.camera instanceof THREE.PerspectiveCamera) {
+                const aspect = calcAspect(this.container);
+                const camera = this.camera;
+                camera.aspect = aspect;
+                camera.updateProjectionMatrix();
+            }
+            else if (this.camera instanceof THREE.OrthographicCamera) {
+                this.updateOrthographicCameraParams();
+                const camera = this.camera;
+                const { left, right, top, bottom, near, far } = this.orthographicCameraParams;
+                camera.left = left;
+                camera.right = right;
+                camera.top = top;
+                camera.bottom = bottom;
+                camera.near = near;
+                camera.far = far;
+                camera.updateProjectionMatrix();
+            }
+            this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
+        });
+    }
+    // 动画
+    update() {
+        console.log("animation");
+    }
+    // 渲染
+    setLoop() {
+        this.renderer.setAnimationLoop(() => {
+            this.resizeRendererToDisplaySize();
+            this.update();
+            if (this.controls) {
+                this.controls.update();
+            }
+            if (this.stats) {
+                this.stats.update();
+            }
+            if (this.composer) {
+                this.composer.render();
+            }
+            else {
+                this.renderer.render(this.scene, this.camera);
+            }
+        });
+    }
+    // 创建文本
+    createText(text = "", config, material = new THREE.MeshStandardMaterial({
+        color: "#ffffff"
+    })) {
+        const geo = new THREE.TextGeometry(text, config);
+        const mesh = new THREE.Mesh(geo, material);
+        return mesh;
+    }
+    // 创建音效源
+    createAudioSource() {
+        const listener = new THREE.AudioListener();
+        this.camera.add(listener);
+        const sound = new THREE.Audio(listener);
+        this.sound = sound;
+    }
+    // 加载音效
+    loadAudio(url) {
+        const loader = new THREE.AudioLoader();
+        return new Promise((resolve) => {
+            loader.load(url, (buffer) => {
+                this.sound.setBuffer(buffer);
+                resolve(buffer);
+            });
+        });
+    }
+    // 加载模型
+    loadModel(url) {
+        const loader = new GLTFLoader();
+        return new Promise((resolve, reject) => {
+            loader.load(url, (gltf) => {
+                const model = gltf.scene;
+                resolve(model);
+            }, undefined, (err) => {
+                console.log(err);
+                reject();
+            });
+        });
+    }
+    // 加载FBX模型
+    loadFBXModel(url) {
+        const loader = new FBXLoader();
+        return new Promise((resolve, reject) => {
+            loader.load(url, (obj) => {
+                resolve(obj);
+            }, undefined, (err) => {
+                console.log(err);
+                reject();
+            });
+        });
+    }
+    // 加载字体
+    loadFont(url) {
+        const loader = new THREE.FontLoader();
+        return new Promise((resolve) => {
+            loader.load(url, (font) => {
+                resolve(font);
+            });
+        });
+    }
+    // 创建点选模型
+    createRaycaster() {
+        this.raycaster = new THREE.Raycaster();
+        this.trackMousePos();
+    }
+    // 追踪鼠标位置
+    trackMousePos() {
+        window.addEventListener("mousemove", (e) => {
+            this.setMousePos(e);
+        });
+        window.addEventListener("mouseout", () => {
+            this.clearMousePos();
+        });
+        window.addEventListener("mouseleave", () => {
+            this.clearMousePos();
+        });
+        window.addEventListener("touchstart", (e) => {
+            this.setMousePos(e.touches[0]);
+        }, { passive: false });
+        window.addEventListener("touchmove", (e) => {
+            this.setMousePos(e.touches[0]);
+        });
+        window.addEventListener("touchend", () => {
+            this.clearMousePos();
+        });
+    }
+    // 设置鼠标位置
+    setMousePos(e) {
+        const { x, y } = getNormalizedMousePos(e);
+        this.mousePos.x = x;
+        this.mousePos.y = y;
+    }
+    // 清空鼠标位置
+    clearMousePos() {
+        this.mousePos.x = -100000;
+        this.mousePos.y = -100000;
+    }
+    // 获取点击物
+    getInterSects() {
+        this.raycaster.setFromCamera(this.mousePos, this.camera);
+        const intersects = this.raycaster.intersectObjects(this.scene.children, true);
+        return intersects;
+    }
+    // 选中点击物时
+    onChooseIntersect(target) {
+        const intersects = this.getInterSects();
+        const intersect = intersects[0];
+        if (!intersect || !intersect.face) {
+            return null;
+        }
+        const { object } = intersect;
+        return target === object ? intersect : null;
+    }
+}
+class GridIcosahedron extends Base {
+    constructor(sel, debug) {
+        super(sel, debug);
+        this.clock = new THREE.Clock();
+        this.cameraPosition = new THREE.Vector3(0, 0, 2);
+        this.params = {
+            uNoiseDensity: 0
+        };
+        this.mouseSpeed = 0;
+    }
+    // 初始化
+    init() {
+        this.createScene();
+        this.createPerspectiveCamera();
+        this.createRenderer();
+        this.createGridIcosahedronShapeMaterial();
+        this.createGridIcosahedronEdgeMaterial();
+        this.createIcoShape();
+        this.createIcoEdge();
+        this.createPostprocessingEffect();
+        this.createLight();
+        this.trackMouseSpeed();
+        this.createOrbitControls();
+        this.addListeners();
+        this.setLoop();
+    }
+    // 创建图形材质
+    createGridIcosahedronShapeMaterial() {
+        const loader = new THREE.TextureLoader();
+        const texture = loader.load(gridIcosahedronTextureUrl);
+        texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
+        const gridIcosahedronShapeMaterial = new THREE.ShaderMaterial({
+            vertexShader: gridIcosahedronShapeVertexShader,
+            fragmentShader: gridIcosahedronShapeFragmentShader,
+            side: THREE.DoubleSide,
+            uniforms: {
+                uTime: {
+                    value: 0
+                },
+                uMouse: {
+                    value: new THREE.Vector2(0, 0)
+                },
+                uResolution: {
+                    value: new THREE.Vector2(window.innerWidth, window.innerHeight)
+                },
+                uTexture: {
+                    value: texture
+                },
+                uRefractionStrength: {
+                    value: 0.2
+                },
+                uNoiseDensity: {
+                    value: this.params.uNoiseDensity
+                }
+            }
+        });
+        this.gridIcosahedronShapeMaterial = gridIcosahedronShapeMaterial;
+    }
+    // 创建边框材质
+    createGridIcosahedronEdgeMaterial() {
+        const gridIcosahedronEdgeMaterial = new THREE.ShaderMaterial({
+            vertexShader: gridIcosahedronEdgeVertexShader,
+            fragmentShader: gridIcosahedronEdgeFragmentShader,
+            side: THREE.DoubleSide,
+            uniforms: {
+                uTime: {
+                    value: 0
+                },
+                uMouse: {
+                    value: new THREE.Vector2(0, 0)
+                },
+                uResolution: {
+                    value: new THREE.Vector2(window.innerWidth, window.innerHeight)
+                },
+                uWidth: {
+                    value: 2
+                },
+                uNoiseDensity: {
+                    value: this.params.uNoiseDensity
+                }
+            }
+        });
+        this.gridIcosahedronEdgeMaterial = gridIcosahedronEdgeMaterial;
+    }
+    // 创建二十面体图形
+    createIcoShape() {
+        const geometry = new THREE.IcosahedronBufferGeometry(1, 1);
+        const material = this.gridIcosahedronShapeMaterial;
+        this.createMesh({
+            geometry,
+            material
+        });
+    }
+    // 创建二十面体边框
+    createIcoEdge() {
+        const geometry = new THREE.IcosahedronBufferGeometry(1.001, 1);
+        this.getBaryCoord(geometry);
+        const material = this.gridIcosahedronEdgeMaterial;
+        this.createMesh({
+            geometry,
+            material
+        });
+    }
+    // 获取重心坐标系
+    getBaryCoord(bufferGeometry) {
+        // https://gist.github.com/mattdesl/e399418558b2b52b58f5edeafea3c16c
+        const length = bufferGeometry.attributes.position.array.length;
+        const count = length / 3;
+        const bary = [];
+        for (let i = 0; i < count; i++) {
+            bary.push(0, 0, 1, 0, 1, 0, 1, 0, 0);
+        }
+        const aCenter = new Float32Array(bary);
+        bufferGeometry.setAttribute("aCenter", new THREE.BufferAttribute(aCenter, 3));
+    }
+    // 创建后期处理特效
+    createPostprocessingEffect() {
+        const composer = new EffectComposer(this.renderer);
+        const renderPass = new RenderPass(this.scene, this.camera);
+        composer.addPass(renderPass);
+        const customPass = new ShaderPass({
+            vertexShader: gridIcosahedronPostprocessingVertexShader,
+            fragmentShader: gridIcosahedronPostprocessingFragmentShader,
+            uniforms: {
+                tDiffuse: {
+                    value: null
+                },
+                uTime: {
+                    value: 0
+                },
+                uRGBShift: {
+                    value: 0.3
+                }
+            }
+        });
+        customPass.renderToScreen = true;
+        composer.addPass(customPass);
+        this.composer = composer;
+        this.customPass = customPass;
+    }
+    // 动画
+    update() {
+        const elapsedTime = this.clock.getElapsedTime();
+        const mousePos = this.mousePos;
+        const mouseSpeed = this.mouseSpeed * 5;
+        if (this.gridIcosahedronShapeMaterial) {
+            this.gridIcosahedronShapeMaterial.uniforms.uTime.value = elapsedTime;
+            this.gridIcosahedronShapeMaterial.uniforms.uMouse.value = mousePos;
+            this.scene.rotation.x = elapsedTime / 15;
+            this.scene.rotation.y = elapsedTime / 15;
+            gsap.to(this.gridIcosahedronShapeMaterial.uniforms.uNoiseDensity, {
+                value: mouseSpeed,
+                duration: 2
+            });
+            gsap.to(this.gridIcosahedronEdgeMaterial.uniforms.uNoiseDensity, {
+                value: mouseSpeed,
+                duration: 2
+            });
+        }
+        if (this.customPass) {
+            this.customPass.uniforms.uTime.value = elapsedTime;
+            gsap.to(this.customPass.uniforms.uRGBShift, {
+                value: mouseSpeed / 10,
+                duration: 2
+            });
+        }
+    }
+    // 追踪鼠标速度
+    trackMouseSpeed() {
+        // https://stackoverflow.com/questions/6417036/track-mouse-speed-with-js
+        let lastMouseX = -1;
+        let lastMouseY = -1;
+        let mouseSpeed = 0;
+        window.addEventListener("mousemove", (e) => {
+            const mousex = e.pageX;
+            const mousey = e.pageY;
+            if (lastMouseX > -1) {
+                mouseSpeed = Math.max(Math.abs(mousex - lastMouseX), Math.abs(mousey - lastMouseY));
+                this.mouseSpeed = mouseSpeed / 100;
+            }
+            lastMouseX = mousex;
+            lastMouseY = mousey;
+        });
+        document.addEventListener("mouseleave", () => {
+            this.mouseSpeed = 0;
+        });
+    }
+}
+const start = () => {
+    const gridIcosahedron = new GridIcosahedron(".grid-icosahedron", false);
+    gridIcosahedron.init();
+};
+start();
\ No newline at end of file
diff --git a/grid-icosahedron-refraction/dist/style.css b/grid-icosahedron-refraction/dist/style.css
new file mode 100644
index 0000000..181dcc3
--- /dev/null
+++ b/grid-icosahedron-refraction/dist/style.css
@@ -0,0 +1,8 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+  background: #f7f7fd;
+}
\ No newline at end of file
diff --git a/grid-icosahedron-refraction/license.txt b/grid-icosahedron-refraction/license.txt
new file mode 100644
index 0000000..3893cbe
--- /dev/null
+++ b/grid-icosahedron-refraction/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by alphardex (https://codepen.io/alphardex/pen/dyOQyPJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/grid-icosahedron-refraction/src/index.html b/grid-icosahedron-refraction/src/index.html
new file mode 100644
index 0000000..567f679
--- /dev/null
+++ b/grid-icosahedron-refraction/src/index.html
@@ -0,0 +1,3 @@
+<div class="relative w-screen h-screen">
+  <div class="grid-icosahedron w-full h-full bg-black"></div>
+</div>
\ No newline at end of file
diff --git a/grid-icosahedron-refraction/src/script.ts b/grid-icosahedron-refraction/src/script.ts
new file mode 100644
index 0000000..aec043c
--- /dev/null
+++ b/grid-icosahedron-refraction/src/script.ts
@@ -0,0 +1,922 @@
+import * as THREE from "https://cdn.skypack.dev/three@0.124.0";
+import ky from "https://cdn.skypack.dev/kyouka@1.2.2";
+import { OrbitControls } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/controls/OrbitControls";
+import { GLTFLoader } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/loaders/GLTFLoader";
+import { FBXLoader } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/loaders/FBXLoader";
+import { EffectComposer } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/postprocessing/EffectComposer";
+import Stats from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/libs/stats.module";
+import * as dat from "https://cdn.skypack.dev/dat.gui@0.7.7";
+import { RenderPass } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/postprocessing/RenderPass.js";
+import { ShaderPass } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/postprocessing/ShaderPass.js";
+import gsap from "https://cdn.skypack.dev/gsap@3.6.0";
+
+const calcAspect = (el: HTMLElement) => el.clientWidth / el.clientHeight;
+
+const getNormalizedMousePos = (e: MouseEvent | Touch) => {
+  return {
+    x: (e.clientX / window.innerWidth) * 2 - 1,
+    y: -(e.clientY / window.innerHeight) * 2 + 1
+  };
+};
+
+const gridIcosahedronTextureUrl = `https://i.loli.net/2021/03/09/1Cglerjx3yLauOo.jpg`;
+
+const gridIcosahedronShapeVertexShader = `
+// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
+vec4 permute(vec4 x){return mod(((x*34.)+1.)*x,289.);}
+vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-.85373472095314*r;}
+vec3 fade(vec3 t){return t*t*t*(t*(t*6.-15.)+10.);}
+
+float cnoise(vec3 P){
+    vec3 Pi0=floor(P);// Integer part for indexing
+    vec3 Pi1=Pi0+vec3(1.);// Integer part + 1
+    Pi0=mod(Pi0,289.);
+    Pi1=mod(Pi1,289.);
+    vec3 Pf0=fract(P);// Fractional part for interpolation
+    vec3 Pf1=Pf0-vec3(1.);// Fractional part - 1.0
+    vec4 ix=vec4(Pi0.x,Pi1.x,Pi0.x,Pi1.x);
+    vec4 iy=vec4(Pi0.yy,Pi1.yy);
+    vec4 iz0=Pi0.zzzz;
+    vec4 iz1=Pi1.zzzz;
+    
+    vec4 ixy=permute(permute(ix)+iy);
+    vec4 ixy0=permute(ixy+iz0);
+    vec4 ixy1=permute(ixy+iz1);
+    
+    vec4 gx0=ixy0/7.;
+    vec4 gy0=fract(floor(gx0)/7.)-.5;
+    gx0=fract(gx0);
+    vec4 gz0=vec4(.5)-abs(gx0)-abs(gy0);
+    vec4 sz0=step(gz0,vec4(0.));
+    gx0-=sz0*(step(0.,gx0)-.5);
+    gy0-=sz0*(step(0.,gy0)-.5);
+    
+    vec4 gx1=ixy1/7.;
+    vec4 gy1=fract(floor(gx1)/7.)-.5;
+    gx1=fract(gx1);
+    vec4 gz1=vec4(.5)-abs(gx1)-abs(gy1);
+    vec4 sz1=step(gz1,vec4(0.));
+    gx1-=sz1*(step(0.,gx1)-.5);
+    gy1-=sz1*(step(0.,gy1)-.5);
+    
+    vec3 g000=vec3(gx0.x,gy0.x,gz0.x);
+    vec3 g100=vec3(gx0.y,gy0.y,gz0.y);
+    vec3 g010=vec3(gx0.z,gy0.z,gz0.z);
+    vec3 g110=vec3(gx0.w,gy0.w,gz0.w);
+    vec3 g001=vec3(gx1.x,gy1.x,gz1.x);
+    vec3 g101=vec3(gx1.y,gy1.y,gz1.y);
+    vec3 g011=vec3(gx1.z,gy1.z,gz1.z);
+    vec3 g111=vec3(gx1.w,gy1.w,gz1.w);
+    
+    vec4 norm0=taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
+    g000*=norm0.x;
+    g010*=norm0.y;
+    g100*=norm0.z;
+    g110*=norm0.w;
+    vec4 norm1=taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
+    g001*=norm1.x;
+    g011*=norm1.y;
+    g101*=norm1.z;
+    g111*=norm1.w;
+    
+    float n000=dot(g000,Pf0);
+    float n100=dot(g100,vec3(Pf1.x,Pf0.yz));
+    float n010=dot(g010,vec3(Pf0.x,Pf1.y,Pf0.z));
+    float n110=dot(g110,vec3(Pf1.xy,Pf0.z));
+    float n001=dot(g001,vec3(Pf0.xy,Pf1.z));
+    float n101=dot(g101,vec3(Pf1.x,Pf0.y,Pf1.z));
+    float n011=dot(g011,vec3(Pf0.x,Pf1.yz));
+    float n111=dot(g111,Pf1);
+    
+    vec3 fade_xyz=fade(Pf0);
+    vec4 n_z=mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
+    vec2 n_yz=mix(n_z.xy,n_z.zw,fade_xyz.y);
+    float n_xyz=mix(n_yz.x,n_yz.y,fade_xyz.x);
+    return 2.2*n_xyz;
+}
+
+varying vec2 vUv;
+varying vec3 vNormal;
+varying vec3 vEyeVector;
+
+uniform float uNoiseDensity;
+
+// https://tympanus.net/codrops/2019/10/29/real-time-multiside-refraction-in-three-steps/
+vec3 getEyeVector(){
+    vec4 worldPosition=modelMatrix*vec4(position,1.);
+    vec3 eyeVector=normalize(worldPosition.xyz-cameraPosition);
+    return eyeVector;
+}
+
+void main(){
+    vec3 noise=pow(cnoise(normal),3.)*normal*uNoiseDensity;
+    vec3 newPosition=position+noise;
+    vec4 modelPosition=modelMatrix*vec4(newPosition,1.);
+    vec4 viewPosition=viewMatrix*modelPosition;
+    vec4 projectedPosition=projectionMatrix*viewPosition;
+    gl_Position=projectedPosition;
+    
+    vUv=uv;
+    vNormal=normalize(normalMatrix*normal);
+    vEyeVector=getEyeVector();
+}
+`;
+
+const gridIcosahedronShapeFragmentShader = `
+uniform float uTime;
+uniform vec2 uMouse;
+uniform vec2 uResolution;
+uniform sampler2D uTexture;
+uniform float uRefractionStrength;
+
+varying vec2 vUv;
+varying vec3 vNormal;
+varying vec3 vEyeVector;
+
+// https://community.khronos.org/t/getting-the-normal-with-dfdx-and-dfdy/70177
+vec3 computeNormal(vec3 normal){
+    vec3 X=dFdx(normal);
+    vec3 Y=dFdy(normal);
+    vec3 cNormal=normalize(cross(X,Y));
+    return cNormal;
+}
+
+// http://glslsandbox.com/e#47182.0
+vec2 hash22(vec2 p){
+    p=fract(p*vec2(5.3983,5.4427));
+    p+=dot(p.yx,p.xy+vec2(21.5351,14.3137));
+    return fract(vec2(p.x*p.y*95.4337,p.x*p.y*97.597));
+}
+
+// https://www.shadertoy.com/view/4scSW4
+float fresnel(float bias,float scale,float power,vec3 I,vec3 N)
+{
+    return bias+scale*pow(1.+dot(I,N),power);
+}
+
+void main(){
+    vec3 cNormal=computeNormal(vNormal);
+    float diffuse=dot(cNormal,vec3(1.));
+    vec2 rand=hash22(vec2(floor(diffuse*10.)));
+    vec2 strength=vec2(sign((rand.x-.5))+(rand.x-.5)*.6,sign((rand.y-.5))+(rand.y-.5)*.6);
+    vec2 uv=strength*gl_FragCoord.xy/vec2(1000.);
+    vec3 refraction=uRefractionStrength*refract(vEyeVector,cNormal,1./3.);
+    uv+=refraction.xy;
+    vec4 color=texture2D(uTexture,uv);
+    float F=fresnel(0.,1.,2.,vEyeVector,cNormal);
+    color*=(1.-F);
+    gl_FragColor=color;
+}
+`;
+
+const gridIcosahedronEdgeVertexShader = `
+// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
+vec4 permute(vec4 x){return mod(((x*34.)+1.)*x,289.);}
+vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-.85373472095314*r;}
+vec3 fade(vec3 t){return t*t*t*(t*(t*6.-15.)+10.);}
+
+float cnoise(vec3 P){
+    vec3 Pi0=floor(P);// Integer part for indexing
+    vec3 Pi1=Pi0+vec3(1.);// Integer part + 1
+    Pi0=mod(Pi0,289.);
+    Pi1=mod(Pi1,289.);
+    vec3 Pf0=fract(P);// Fractional part for interpolation
+    vec3 Pf1=Pf0-vec3(1.);// Fractional part - 1.0
+    vec4 ix=vec4(Pi0.x,Pi1.x,Pi0.x,Pi1.x);
+    vec4 iy=vec4(Pi0.yy,Pi1.yy);
+    vec4 iz0=Pi0.zzzz;
+    vec4 iz1=Pi1.zzzz;
+    
+    vec4 ixy=permute(permute(ix)+iy);
+    vec4 ixy0=permute(ixy+iz0);
+    vec4 ixy1=permute(ixy+iz1);
+    
+    vec4 gx0=ixy0/7.;
+    vec4 gy0=fract(floor(gx0)/7.)-.5;
+    gx0=fract(gx0);
+    vec4 gz0=vec4(.5)-abs(gx0)-abs(gy0);
+    vec4 sz0=step(gz0,vec4(0.));
+    gx0-=sz0*(step(0.,gx0)-.5);
+    gy0-=sz0*(step(0.,gy0)-.5);
+    
+    vec4 gx1=ixy1/7.;
+    vec4 gy1=fract(floor(gx1)/7.)-.5;
+    gx1=fract(gx1);
+    vec4 gz1=vec4(.5)-abs(gx1)-abs(gy1);
+    vec4 sz1=step(gz1,vec4(0.));
+    gx1-=sz1*(step(0.,gx1)-.5);
+    gy1-=sz1*(step(0.,gy1)-.5);
+    
+    vec3 g000=vec3(gx0.x,gy0.x,gz0.x);
+    vec3 g100=vec3(gx0.y,gy0.y,gz0.y);
+    vec3 g010=vec3(gx0.z,gy0.z,gz0.z);
+    vec3 g110=vec3(gx0.w,gy0.w,gz0.w);
+    vec3 g001=vec3(gx1.x,gy1.x,gz1.x);
+    vec3 g101=vec3(gx1.y,gy1.y,gz1.y);
+    vec3 g011=vec3(gx1.z,gy1.z,gz1.z);
+    vec3 g111=vec3(gx1.w,gy1.w,gz1.w);
+    
+    vec4 norm0=taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
+    g000*=norm0.x;
+    g010*=norm0.y;
+    g100*=norm0.z;
+    g110*=norm0.w;
+    vec4 norm1=taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
+    g001*=norm1.x;
+    g011*=norm1.y;
+    g101*=norm1.z;
+    g111*=norm1.w;
+    
+    float n000=dot(g000,Pf0);
+    float n100=dot(g100,vec3(Pf1.x,Pf0.yz));
+    float n010=dot(g010,vec3(Pf0.x,Pf1.y,Pf0.z));
+    float n110=dot(g110,vec3(Pf1.xy,Pf0.z));
+    float n001=dot(g001,vec3(Pf0.xy,Pf1.z));
+    float n101=dot(g101,vec3(Pf1.x,Pf0.y,Pf1.z));
+    float n011=dot(g011,vec3(Pf0.x,Pf1.yz));
+    float n111=dot(g111,Pf1);
+    
+    vec3 fade_xyz=fade(Pf0);
+    vec4 n_z=mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
+    vec2 n_yz=mix(n_z.xy,n_z.zw,fade_xyz.y);
+    float n_xyz=mix(n_yz.x,n_yz.y,fade_xyz.x);
+    return 2.2*n_xyz;
+}
+
+varying vec2 vUv;
+varying vec3 vCenter;
+
+attribute vec3 aCenter;
+
+uniform float uNoiseDensity;
+
+void main(){
+    vec3 noise=pow(cnoise(normal),3.)*normal*uNoiseDensity;
+    vec3 newPosition=position+noise;
+    vec4 modelPosition=modelMatrix*vec4(newPosition,1.);
+    vec4 viewPosition=viewMatrix*modelPosition;
+    vec4 projectedPosition=projectionMatrix*viewPosition;
+    gl_Position=projectedPosition;
+    
+    vUv=uv;
+    vCenter=aCenter;
+}
+`;
+
+const gridIcosahedronEdgeFragmentShader = `
+uniform float uTime;
+uniform vec2 uMouse;
+uniform vec2 uResolution;
+uniform float uWidth;
+
+varying vec2 vUv;
+varying vec3 vCenter;
+
+// https://threejs.org/examples/?q=wire#webgl_materials_wireframe
+float edgeFactorTri(){
+    vec3 d=fwidth(vCenter);
+    vec3 a3=smoothstep(d*(uWidth-.5),d*(uWidth+.5),vCenter);
+    return min(min(a3.x,a3.y),a3.z);
+}
+
+float invert(float n){
+    return 1.-n;
+}
+
+void main(){
+    float line=invert(edgeFactorTri());
+    if(line<.1){
+        discard;
+    }
+    vec4 color=vec4(vec3(line),1.);
+    gl_FragColor=color;
+}
+`;
+
+const gridIcosahedronPostprocessingVertexShader = `
+varying vec2 vUv;
+
+void main(){
+    vec4 modelPosition=modelMatrix*vec4(position,1.);
+    vec4 viewPosition=viewMatrix*modelPosition;
+    vec4 projectedPosition=projectionMatrix*viewPosition;
+    gl_Position=projectedPosition;
+    
+    vUv=uv;
+}
+`;
+
+const gridIcosahedronPostprocessingFragmentShader = `
+uniform float uTime;
+uniform vec2 uMouse;
+uniform vec2 uResolution;
+uniform sampler2D tDiffuse;
+uniform float uRGBShift;
+
+varying vec2 vUv;
+
+// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
+float hash(vec2 p){return fract(1e4*sin(17.*p.x+p.y*.1)*(.1+abs(sin(p.y*13.+p.x))));}
+
+vec3 blackAndWhite(vec3 color){
+    return vec3((color.r+color.g+color.b)/5.);
+}
+
+// https://github.com/spite/Wagner/blob/master/fragment-shaders/rgb-split-fs.glsl
+vec4 RGBShift(sampler2D tDiffuse,vec2 uv,vec2 offset,float isBlackWhite){
+    vec4 color1=texture2D(tDiffuse,vUv-offset);
+    vec4 color2=texture2D(tDiffuse,vUv);
+    vec4 color3=texture2D(tDiffuse,vUv+offset);
+    if(isBlackWhite==1.){
+        color1.rgb=blackAndWhite(color1.rgb);
+        color2.rgb=blackAndWhite(color2.rgb);
+        color3.rgb=blackAndWhite(color3.rgb);
+    }
+    vec4 color=vec4(color1.r,color2.g,color3.b,color1.a+color2.a+color3.a);
+    return color;
+}
+
+void main(){
+    float noise=hash(vUv+uTime)*.1;
+    vec4 color=RGBShift(tDiffuse,vUv,vec2(.01)*uRGBShift,1.);
+    color.rgb+=vec3(noise);
+    gl_FragColor=color;
+}
+`;
+
+class Base {
+  debug: boolean;
+  container: HTMLElement | null;
+  scene!: THREE.Scene;
+  camera!: THREE.PerspectiveCamera | THREE.OrthographicCamera;
+  rendererParams!: Record<string, any>;
+  perspectiveCameraParams!: Record<string, any>;
+  orthographicCameraParams!: Record<string, any>;
+  cameraPosition!: THREE.Vector3;
+  lookAtPosition!: THREE.Vector3;
+  renderer!: THREE.WebGLRenderer;
+  controls!: OrbitControls;
+  mousePos!: THREE.Vector2;
+  raycaster!: THREE.Raycaster;
+  sound!: THREE.Audio;
+  stats!: Stats;
+  composer!: EffectComposer;
+  constructor(sel: string, debug = false) {
+    this.debug = debug;
+    this.container = document.querySelector(sel);
+    this.perspectiveCameraParams = {
+      fov: 75,
+      near: 0.1,
+      far: 100
+    };
+    this.orthographicCameraParams = {
+      zoom: 2,
+      near: -100,
+      far: 1000
+    };
+    this.cameraPosition = new THREE.Vector3(0, 3, 10);
+    this.lookAtPosition = new THREE.Vector3(0, 0, 0);
+    this.rendererParams = {
+      outputEncoding: THREE.LinearEncoding,
+      config: {
+        alpha: true,
+        antialias: true
+      }
+    };
+    this.mousePos = new THREE.Vector2(0, 0);
+  }
+  // 初始化
+  init() {
+    this.createScene();
+    this.createPerspectiveCamera();
+    this.createRenderer();
+    this.createMesh({});
+    this.createLight();
+    this.createOrbitControls();
+    this.addListeners();
+    this.setLoop();
+  }
+  // 创建场景
+  createScene() {
+    const scene = new THREE.Scene();
+    if (this.debug) {
+      scene.add(new THREE.AxesHelper());
+      const stats = Stats();
+      this.container!.appendChild(stats.dom);
+      this.stats = stats;
+    }
+    this.scene = scene;
+  }
+  // 创建透视相机
+  createPerspectiveCamera() {
+    const { perspectiveCameraParams, cameraPosition, lookAtPosition } = this;
+    const { fov, near, far } = perspectiveCameraParams;
+    const aspect = calcAspect(this.container!);
+    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
+    camera.position.copy(cameraPosition);
+    camera.lookAt(lookAtPosition);
+    this.camera = camera;
+  }
+  // 创建正交相机
+  createOrthographicCamera() {
+    const { orthographicCameraParams, cameraPosition, lookAtPosition } = this;
+    const { left, right, top, bottom, near, far } = orthographicCameraParams;
+    const camera = new THREE.OrthographicCamera(
+      left,
+      right,
+      top,
+      bottom,
+      near,
+      far
+    );
+    camera.position.copy(cameraPosition);
+    camera.lookAt(lookAtPosition);
+    this.camera = camera;
+  }
+  // 更新正交相机参数
+  updateOrthographicCameraParams() {
+    const { container } = this;
+    const { zoom, near, far } = this.orthographicCameraParams;
+    const aspect = calcAspect(container!);
+    this.orthographicCameraParams = {
+      left: -zoom * aspect,
+      right: zoom * aspect,
+      top: zoom,
+      bottom: -zoom,
+      near,
+      far,
+      zoom
+    };
+  }
+  // 创建渲染
+  createRenderer(useWebGL1 = false) {
+    const { rendererParams } = this;
+    const { outputEncoding, config } = rendererParams;
+    const renderer = !useWebGL1
+      ? new THREE.WebGLRenderer(config)
+      : new THREE.WebGL1Renderer(config);
+    renderer.setSize(this.container!.clientWidth, this.container!.clientHeight);
+    renderer.outputEncoding = outputEncoding;
+    this.resizeRendererToDisplaySize();
+    this.container?.appendChild(renderer.domElement);
+    this.renderer = renderer;
+    this.renderer.setClearColor(0x000000, 0);
+  }
+  // 允许投影
+  enableShadow() {
+    this.renderer.shadowMap.enabled = true;
+  }
+  // 调整渲染器尺寸
+  resizeRendererToDisplaySize() {
+    const { renderer } = this;
+    if (!renderer) {
+      return;
+    }
+    const canvas = renderer.domElement;
+    const pixelRatio = window.devicePixelRatio;
+    const { clientWidth, clientHeight } = canvas;
+    const width = (clientWidth * pixelRatio) | 0;
+    const height = (clientHeight * pixelRatio) | 0;
+    const isResizeNeeded = canvas.width !== width || canvas.height !== height;
+    if (isResizeNeeded) {
+      renderer.setSize(width, height, false);
+    }
+    return isResizeNeeded;
+  }
+  // 创建网格
+  createMesh(
+    meshObject: MeshObject,
+    container: THREE.Scene | THREE.Mesh = this.scene
+  ) {
+    const {
+      geometry = new THREE.BoxGeometry(1, 1, 1),
+      material = new THREE.MeshStandardMaterial({
+        color: new THREE.Color("#d9dfc8")
+      }),
+      position = new THREE.Vector3(0, 0, 0)
+    } = meshObject;
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.position.copy(position);
+    container.add(mesh);
+    return mesh;
+  }
+  // 创建光源
+  createLight() {
+    const dirLight = new THREE.DirectionalLight(
+      new THREE.Color("#ffffff"),
+      0.5
+    );
+    dirLight.position.set(0, 50, 0);
+    this.scene.add(dirLight);
+    const ambiLight = new THREE.AmbientLight(new THREE.Color("#ffffff"), 0.4);
+    this.scene.add(ambiLight);
+  }
+  // 创建轨道控制
+  createOrbitControls() {
+    const controls = new OrbitControls(this.camera, this.renderer.domElement);
+    const { lookAtPosition } = this;
+    controls.target.copy(lookAtPosition);
+    controls.update();
+    this.controls = controls;
+  }
+  // 监听事件
+  addListeners() {
+    this.onResize();
+  }
+  // 监听画面缩放
+  onResize() {
+    window.addEventListener("resize", (e) => {
+      if (this.camera instanceof THREE.PerspectiveCamera) {
+        const aspect = calcAspect(this.container!);
+        const camera = this.camera as THREE.PerspectiveCamera;
+        camera.aspect = aspect;
+        camera.updateProjectionMatrix();
+      } else if (this.camera instanceof THREE.OrthographicCamera) {
+        this.updateOrthographicCameraParams();
+        const camera = this.camera as THREE.OrthographicCamera;
+        const {
+          left,
+          right,
+          top,
+          bottom,
+          near,
+          far
+        } = this.orthographicCameraParams;
+        camera.left = left;
+        camera.right = right;
+        camera.top = top;
+        camera.bottom = bottom;
+        camera.near = near;
+        camera.far = far;
+        camera.updateProjectionMatrix();
+      }
+      this.renderer.setSize(
+        this.container!.clientWidth,
+        this.container!.clientHeight
+      );
+    });
+  }
+  // 动画
+  update() {
+    console.log("animation");
+  }
+  // 渲染
+  setLoop() {
+    this.renderer.setAnimationLoop(() => {
+      this.resizeRendererToDisplaySize();
+      this.update();
+      if (this.controls) {
+        this.controls.update();
+      }
+      if (this.stats) {
+        this.stats.update();
+      }
+      if (this.composer) {
+        this.composer.render();
+      } else {
+        this.renderer.render(this.scene, this.camera);
+      }
+    });
+  }
+  // 创建文本
+  createText(
+    text = "",
+    config: THREE.TextGeometryParameters,
+    material: THREE.Material = new THREE.MeshStandardMaterial({
+      color: "#ffffff"
+    })
+  ) {
+    const geo = new THREE.TextGeometry(text, config);
+    const mesh = new THREE.Mesh(geo, material);
+    return mesh;
+  }
+  // 创建音效源
+  createAudioSource() {
+    const listener = new THREE.AudioListener();
+    this.camera.add(listener);
+    const sound = new THREE.Audio(listener);
+    this.sound = sound;
+  }
+  // 加载音效
+  loadAudio(url: string): Promise<AudioBuffer> {
+    const loader = new THREE.AudioLoader();
+    return new Promise((resolve) => {
+      loader.load(url, (buffer) => {
+        this.sound.setBuffer(buffer);
+        resolve(buffer);
+      });
+    });
+  }
+  // 加载模型
+  loadModel(url: string): Promise<THREE.Object3D> {
+    const loader = new GLTFLoader();
+    return new Promise((resolve, reject) => {
+      loader.load(
+        url,
+        (gltf) => {
+          const model = gltf.scene;
+          resolve(model);
+        },
+        undefined,
+        (err) => {
+          console.log(err);
+          reject();
+        }
+      );
+    });
+  }
+  // 加载FBX模型
+  loadFBXModel(url: string): Promise<THREE.Object3D> {
+    const loader = new FBXLoader();
+    return new Promise((resolve, reject) => {
+      loader.load(
+        url,
+        (obj) => {
+          resolve(obj);
+        },
+        undefined,
+        (err) => {
+          console.log(err);
+          reject();
+        }
+      );
+    });
+  }
+  // 加载字体
+  loadFont(url: string): Promise<THREE.Font> {
+    const loader = new THREE.FontLoader();
+    return new Promise((resolve) => {
+      loader.load(url, (font) => {
+        resolve(font);
+      });
+    });
+  }
+  // 创建点选模型
+  createRaycaster() {
+    this.raycaster = new THREE.Raycaster();
+    this.trackMousePos();
+  }
+  // 追踪鼠标位置
+  trackMousePos() {
+    window.addEventListener("mousemove", (e) => {
+      this.setMousePos(e);
+    });
+    window.addEventListener("mouseout", () => {
+      this.clearMousePos();
+    });
+    window.addEventListener("mouseleave", () => {
+      this.clearMousePos();
+    });
+    window.addEventListener(
+      "touchstart",
+      (e: TouchEvent) => {
+        this.setMousePos(e.touches[0]);
+      },
+      { passive: false }
+    );
+    window.addEventListener("touchmove", (e: TouchEvent) => {
+      this.setMousePos(e.touches[0]);
+    });
+    window.addEventListener("touchend", () => {
+      this.clearMousePos();
+    });
+  }
+  // 设置鼠标位置
+  setMousePos(e: MouseEvent | Touch) {
+    const { x, y } = getNormalizedMousePos(e);
+    this.mousePos.x = x;
+    this.mousePos.y = y;
+  }
+  // 清空鼠标位置
+  clearMousePos() {
+    this.mousePos.x = -100000;
+    this.mousePos.y = -100000;
+  }
+  // 获取点击物
+  getInterSects(): THREE.Intersection[] {
+    this.raycaster.setFromCamera(this.mousePos, this.camera);
+    const intersects = this.raycaster.intersectObjects(
+      this.scene.children,
+      true
+    );
+    return intersects;
+  }
+  // 选中点击物时
+  onChooseIntersect(target: THREE.Object3D) {
+    const intersects = this.getInterSects();
+    const intersect = intersects[0];
+    if (!intersect || !intersect.face) {
+      return null;
+    }
+    const { object } = intersect;
+    return target === object ? intersect : null;
+  }
+}
+
+class GridIcosahedron extends Base {
+  clock!: THREE.Clock;
+  gridIcosahedronShapeMaterial!: THREE.ShaderMaterial;
+  gridIcosahedronEdgeMaterial!: THREE.ShaderMaterial;
+  customPass!: ShaderPass;
+  params!: any;
+  mouseSpeed!: number;
+  constructor(sel: string, debug: boolean) {
+    super(sel, debug);
+    this.clock = new THREE.Clock();
+    this.cameraPosition = new THREE.Vector3(0, 0, 2);
+    this.params = {
+      uNoiseDensity: 0
+    };
+    this.mouseSpeed = 0;
+  }
+  // 初始化
+  init() {
+    this.createScene();
+    this.createPerspectiveCamera();
+    this.createRenderer();
+    this.createGridIcosahedronShapeMaterial();
+    this.createGridIcosahedronEdgeMaterial();
+    this.createIcoShape();
+    this.createIcoEdge();
+    this.createPostprocessingEffect();
+    this.createLight();
+    this.trackMouseSpeed();
+    this.createOrbitControls();
+    this.addListeners();
+    this.setLoop();
+  }
+  // 创建图形材质
+  createGridIcosahedronShapeMaterial() {
+    const loader = new THREE.TextureLoader();
+    const texture = loader.load(gridIcosahedronTextureUrl);
+    texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
+    const gridIcosahedronShapeMaterial = new THREE.ShaderMaterial({
+      vertexShader: gridIcosahedronShapeVertexShader,
+      fragmentShader: gridIcosahedronShapeFragmentShader,
+      side: THREE.DoubleSide,
+      uniforms: {
+        uTime: {
+          value: 0
+        },
+        uMouse: {
+          value: new THREE.Vector2(0, 0)
+        },
+        uResolution: {
+          value: new THREE.Vector2(window.innerWidth, window.innerHeight)
+        },
+        uTexture: {
+          value: texture
+        },
+        uRefractionStrength: {
+          value: 0.2
+        },
+        uNoiseDensity: {
+          value: this.params.uNoiseDensity
+        }
+      }
+    });
+    this.gridIcosahedronShapeMaterial = gridIcosahedronShapeMaterial;
+  }
+  // 创建边框材质
+  createGridIcosahedronEdgeMaterial() {
+    const gridIcosahedronEdgeMaterial = new THREE.ShaderMaterial({
+      vertexShader: gridIcosahedronEdgeVertexShader,
+      fragmentShader: gridIcosahedronEdgeFragmentShader,
+      side: THREE.DoubleSide,
+      uniforms: {
+        uTime: {
+          value: 0
+        },
+        uMouse: {
+          value: new THREE.Vector2(0, 0)
+        },
+        uResolution: {
+          value: new THREE.Vector2(window.innerWidth, window.innerHeight)
+        },
+        uWidth: {
+          value: 2
+        },
+        uNoiseDensity: {
+          value: this.params.uNoiseDensity
+        }
+      }
+    });
+    this.gridIcosahedronEdgeMaterial = gridIcosahedronEdgeMaterial;
+  }
+  // 创建二十面体图形
+  createIcoShape() {
+    const geometry = new THREE.IcosahedronBufferGeometry(1, 1);
+    const material = this.gridIcosahedronShapeMaterial;
+    this.createMesh({
+      geometry,
+      material
+    });
+  }
+  // 创建二十面体边框
+  createIcoEdge() {
+    const geometry = new THREE.IcosahedronBufferGeometry(1.001, 1);
+    this.getBaryCoord(geometry);
+    const material = this.gridIcosahedronEdgeMaterial;
+    this.createMesh({
+      geometry,
+      material
+    });
+  }
+  // 获取重心坐标系
+  getBaryCoord(bufferGeometry: THREE.BufferGeometry) {
+    // https://gist.github.com/mattdesl/e399418558b2b52b58f5edeafea3c16c
+    const length = bufferGeometry.attributes.position.array.length;
+    const count = length / 3;
+    const bary = [];
+    for (let i = 0; i < count; i++) {
+      bary.push(0, 0, 1, 0, 1, 0, 1, 0, 0);
+    }
+    const aCenter = new Float32Array(bary);
+    bufferGeometry.setAttribute(
+      "aCenter",
+      new THREE.BufferAttribute(aCenter, 3)
+    );
+  }
+  // 创建后期处理特效
+  createPostprocessingEffect() {
+    const composer = new EffectComposer(this.renderer);
+    const renderPass = new RenderPass(this.scene, this.camera);
+    composer.addPass(renderPass);
+    const customPass = new ShaderPass({
+      vertexShader: gridIcosahedronPostprocessingVertexShader,
+      fragmentShader: gridIcosahedronPostprocessingFragmentShader,
+      uniforms: {
+        tDiffuse: {
+          value: null
+        },
+        uTime: {
+          value: 0
+        },
+        uRGBShift: {
+          value: 0.3
+        }
+      }
+    });
+    customPass.renderToScreen = true;
+    composer.addPass(customPass);
+    this.composer = composer;
+    this.customPass = customPass;
+  }
+  // 动画
+  update() {
+    const elapsedTime = this.clock.getElapsedTime();
+    const mousePos = this.mousePos;
+    const mouseSpeed = this.mouseSpeed * 5;
+    if (this.gridIcosahedronShapeMaterial) {
+      this.gridIcosahedronShapeMaterial.uniforms.uTime.value = elapsedTime;
+      this.gridIcosahedronShapeMaterial.uniforms.uMouse.value = mousePos;
+      this.scene.rotation.x = elapsedTime / 15;
+      this.scene.rotation.y = elapsedTime / 15;
+      gsap.to(this.gridIcosahedronShapeMaterial.uniforms.uNoiseDensity, {
+        value: mouseSpeed,
+        duration: 2
+      });
+      gsap.to(this.gridIcosahedronEdgeMaterial.uniforms.uNoiseDensity, {
+        value: mouseSpeed,
+        duration: 2
+      });
+    }
+    if (this.customPass) {
+      this.customPass.uniforms.uTime.value = elapsedTime;
+      gsap.to(this.customPass.uniforms.uRGBShift, {
+        value: mouseSpeed / 10,
+        duration: 2
+      });
+    }
+  }
+  // 追踪鼠标速度
+  trackMouseSpeed() {
+    // https://stackoverflow.com/questions/6417036/track-mouse-speed-with-js
+    let lastMouseX = -1;
+    let lastMouseY = -1;
+    let mouseSpeed = 0;
+    window.addEventListener("mousemove", (e) => {
+      const mousex = e.pageX;
+      const mousey = e.pageY;
+      if (lastMouseX > -1) {
+        mouseSpeed = Math.max(
+          Math.abs(mousex - lastMouseX),
+          Math.abs(mousey - lastMouseY)
+        );
+        this.mouseSpeed = mouseSpeed / 100;
+      }
+      lastMouseX = mousex;
+      lastMouseY = mousey;
+    });
+    document.addEventListener("mouseleave", () => {
+      this.mouseSpeed = 0;
+    });
+  }
+}
+
+const start = () => {
+  const gridIcosahedron = new GridIcosahedron(".grid-icosahedron", false);
+  gridIcosahedron.init();
+};
+
+start();
diff --git a/grid-icosahedron-refraction/src/style.scss b/grid-icosahedron-refraction/src/style.scss
new file mode 100644
index 0000000..df89b45
--- /dev/null
+++ b/grid-icosahedron-refraction/src/style.scss
@@ -0,0 +1,8 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+  background: hsl(240, 56%, 98%);
+}
diff --git a/grid-items-share-background/README.markdown b/grid-items-share-background/README.markdown
new file mode 100644
index 0000000..306fdfc
--- /dev/null
+++ b/grid-items-share-background/README.markdown
@@ -0,0 +1,5 @@
+# Grid Items Share Background
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/noahraskin/pen/JjrydbL](https://codepen.io/noahraskin/pen/JjrydbL).
+
+
diff --git a/grid-items-share-background/dist/index.html b/grid-items-share-background/dist/index.html
new file mode 100644
index 0000000..c7d0440
--- /dev/null
+++ b/grid-items-share-background/dist/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Grid Items Share Background</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="grid">
+  <div class="item-1">
+    <span>Lighting</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="alt">
+    <span>Art & Decor</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="item-1">
+    <span>Storage</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="item-1">
+    <span>Flooring</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="item-1">
+    <span>CSS Grid Tricks</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="alt">
+    <span>Furniture</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="alt">
+    <span>Entertainment</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="">
+    <span>Accessories</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="alt">
+    <span>Tables</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="item-1 alt">
+    <span>Rugs</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/grid-items-share-background/dist/script.js b/grid-items-share-background/dist/script.js
new file mode 100644
index 0000000..083fbc9
--- /dev/null
+++ b/grid-items-share-background/dist/script.js
@@ -0,0 +1,5 @@
+const dates = document.querySelectorAll('.shop')
+
+for(let i = 0; i < dates.length; i++) {
+  dates[i].innerHTML = "Shop"
+}
\ No newline at end of file
diff --git a/grid-items-share-background/dist/style.css b/grid-items-share-background/dist/style.css
new file mode 100644
index 0000000..c5e445a
--- /dev/null
+++ b/grid-items-share-background/dist/style.css
@@ -0,0 +1,144 @@
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --gap: 8px;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--gap);
+  padding: var(--gap);
+  height: 100vh;
+  position: relative;
+  background: #080b11;
+  display: -ms-grid;
+  -ms-grid-columns: 1fr [4];
+}
+.grid div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding: calc(var(--gap) * 1.5);
+  min-height: 160px;
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: 600;
+  background-color: teal;
+  background-image: url("https://images.unsplash.com/photo-1586023492125-27b2c045efd7?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDA0NjcyNw&ixlib=rb-1.2.1&q=85");
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  transition-property: filter, backdrop-filter, opacity, color;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-out;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-transition-property: opacity, color, -webkit-filter, -webkit-backdrop-filter;
+  transition-property: opacity, color, -webkit-filter, -webkit-backdrop-filter;
+  -webkit-transition-duration: 0.3s;
+  -webkit-transition-timing-function: ease-out;
+}
+.grid div:hover {
+  color: #fff;
+}
+.grid div span:first-of-type {
+  z-index: 2;
+}
+.grid div .overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.8));
+  backdrop-filter: blur(6px);
+  transition-property: opacity;
+  transition-duration: 0.4s;
+  transition-timing-function: ease-out;
+  z-index: -1;
+  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.8));
+  -webkit-backdrop-filter: blur(6px);
+  -webkit-transition-property: opacity;
+  -webkit-transition-duration: 0.4s;
+  -webkit-transition-timing-function: ease-out;
+}
+.grid div .shop {
+  display: block;
+  color: tomato;
+  font-size: 0.8rem;
+  font-weight: 400;
+  margin-top: 8px;
+  margin-bottom: -25px;
+  opacity: 0;
+  transition-property: margin-bottom, opacity;
+  transition-duration: 0.3s;
+  transition-timing-function: ethiopic-halehame-om-et;
+  z-index: 2;
+  -webkit-transition-property: margin-bottom, opacity;
+  -webkit-transition-duration: 0.3s;
+  -webkit-transition-timing-function: ethiopic-halehame-om-et;
+}
+.grid div:hover > .overlay {
+  opacity: 1;
+}
+.grid div:hover {
+  filter: brightness(1.2);
+  -webkit-filter: brightness(1.2);
+}
+.grid div:hover > .shop {
+  opacity: 1;
+  margin-bottom: 0;
+}
+.grid > div:nth-of-type(1) {
+  grid-column: 1/3;
+}
+.grid > div:nth-of-type(2) {
+  grid-column: 3/5;
+  grid-row: 1/3;
+}
+.grid > div:nth-of-type(4) {
+  grid-column: 2/3;
+  grid-row: 2/5;
+}
+
+@media screen and (max-width: 840px) {
+  .grid {
+    height: auto;
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .grid div {
+    min-height: auto;
+    aspect-ratio: 1/1;
+    width: 100%;
+  }
+  .grid > div:nth-of-type(1) {
+    grid-column: auto;
+  }
+  .grid > div:nth-of-type(2) {
+    grid-column: auto;
+    grid-row: auto;
+  }
+  .grid > div:nth-of-type(4) {
+    grid-column: auto;
+    grid-row: auto;
+  }
+}
\ No newline at end of file
diff --git a/grid-items-share-background/license.txt b/grid-items-share-background/license.txt
new file mode 100644
index 0000000..26afba2
--- /dev/null
+++ b/grid-items-share-background/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Noah Raskin (https://codepen.io/noahraskin/pen/JjrydbL)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/grid-items-share-background/src/index.html b/grid-items-share-background/src/index.html
new file mode 100644
index 0000000..6a032a7
--- /dev/null
+++ b/grid-items-share-background/src/index.html
@@ -0,0 +1,52 @@
+<div class="grid">
+  <div class="item-1">
+    <span>Lighting</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="alt">
+    <span>Art & Decor</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="item-1">
+    <span>Storage</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="item-1">
+    <span>Flooring</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="item-1">
+    <span>CSS Grid Tricks</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="alt">
+    <span>Furniture</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="alt">
+    <span>Entertainment</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="">
+    <span>Accessories</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="alt">
+    <span>Tables</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+  <div class="item-1 alt">
+    <span>Rugs</span>
+    <span class="shop"></span>
+    <div class="overlay"></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/grid-items-share-background/src/script.js b/grid-items-share-background/src/script.js
new file mode 100644
index 0000000..02cc332
--- /dev/null
+++ b/grid-items-share-background/src/script.js
@@ -0,0 +1,6 @@
+const dates = document.querySelectorAll('.shop')
+
+for(let i = 0; i < dates.length; i++) {
+  dates[i].innerHTML = "Shop"
+}
+
diff --git a/grid-items-share-background/src/style.scss b/grid-items-share-background/src/style.scss
new file mode 100644
index 0000000..0fca9df
--- /dev/null
+++ b/grid-items-share-background/src/style.scss
@@ -0,0 +1,167 @@
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --gap: 8px;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--gap);
+  padding: var(--gap);
+  height: 100vh;
+  position: relative;
+  background: hsl(220, 35%, 5%);
+  //Prefixes
+  display: -ms-grid;
+  -ms-grid-columns: (1fr)[4];
+  
+  & div {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding: calc(var(--gap) * 1.5);
+    min-height: 160px;
+    color: #fff;
+    font-size: 1.1rem;
+    font-weight: 600;
+    background-color: teal;
+    background-image: url('https://images.unsplash.com/photo-1586023492125-27b2c045efd7?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDA0NjcyNw&ixlib=rb-1.2.1&q=85');
+    background-attachment: fixed;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+    transition-property: filter, backdrop-filter, opacity, color;
+    transition-duration: .3s;
+    transition-timing-function: ease-out;
+    //Prefixes
+    display: -webkit-box;
+    display: -ms-flexbox;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    -webkit-transition-property: opacity, color, -webkit-filter, -webkit-backdrop-filter;
+    transition-property: opacity, color, -webkit-filter, -webkit-backdrop-filter;
+    -webkit-transition-duration: .3s;
+    -webkit-transition-timing-function: ease-out;
+    
+    &:hover {
+      color: #fff;
+    }
+    
+    & span:first-of-type {
+      z-index: 2;
+    }
+    
+    & .overlay {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      background: linear-gradient(180deg, hsl(0, 0%, 0%, 0) 5%, hsl(0, 0%, 0%, .8));
+      backdrop-filter: blur(6px);
+      transition-property: opacity;
+      transition-duration: .4s;
+      transition-timing-function: ease-out;
+      z-index: -1;
+      //Prefixes
+      background: -webkit-linear-gradient(top, hsl(0, 0%, 0%, 0) 5%, hsl(0, 0%, 0%, .8));
+      -webkit-backdrop-filter: blur(6px);
+      -webkit-transition-property: opacity;
+      -webkit-transition-duration: .4s;
+      -webkit-transition-timing-function: ease-out;
+    }
+    
+    & .shop {
+      display: block;
+      color: tomato;
+      font-size: .8rem;
+      font-weight: 400;
+      margin-top: 8px;
+      margin-bottom: -25px;
+      opacity: 0;
+      transition-property: margin-bottom, opacity;
+      transition-duration: .3s;
+      transition-timing-function: ethiopic-halehame-om-et;
+      z-index: 2;
+      //Prefixes
+      -webkit-transition-property: margin-bottom, opacity;
+      -webkit-transition-duration: .3s;
+      -webkit-transition-timing-function: ethiopic-halehame-om-et;
+    }
+    
+    &:hover > .overlay {
+      opacity: 1;
+    }
+    
+    &:hover {
+      filter: brightness(1.2);
+      -webkit-filter: brightness(1.2);
+    }
+    
+    &:hover > .shop {
+      opacity: 1;
+      margin-bottom: 0;
+    }
+    
+    &.alt {
+      //background-image: url('https://images.unsplash.com/photo-1639682916310-3f383bc67cc4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDAzMTc0Mw&ixlib=rb-1.2.1&q=85');
+    }
+  }
+  
+  & > div:nth-of-type(1) {
+    grid-column: 1/3;
+  }
+  
+  & > div:nth-of-type(2) {
+    grid-column: 3/5;
+    grid-row: 1/3;
+  }
+  
+  & > div:nth-of-type(4) {
+    grid-column: 2/3;
+    grid-row: 2/5;
+  }
+}
+
+@media screen and (max-width: 840px) {
+  .grid {
+    height: auto;
+    grid-template-columns: repeat(2, 1fr);
+    
+    & div {
+      min-height: auto;
+      aspect-ratio: 1 / 1;
+      width: 100%;
+    }
+    
+    & > div:nth-of-type(1) {
+      grid-column: auto;
+    }
+  
+    & > div:nth-of-type(2) {
+      grid-column: auto;
+      grid-row: auto;
+    }
+
+    & > div:nth-of-type(4) {
+      grid-column: auto;
+      grid-row: auto;
+    }
+  }
+}
\ No newline at end of file
diff --git a/growing-lines-hex/README.markdown b/growing-lines-hex/README.markdown
new file mode 100644
index 0000000..ed9faae
--- /dev/null
+++ b/growing-lines-hex/README.markdown
@@ -0,0 +1,5 @@
+# growing lines hex
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Dillo/pen/jOwGoPW](https://codepen.io/Dillo/pen/jOwGoPW).
+
+Almost the same as my other pen [Growing lines](https://codepen.io/Dillo/full/qBraEZX), but based on a tessellation of hexagons instead of squares, and in black on white only
diff --git a/growing-lines-hex/dist/index.html b/growing-lines-hex/dist/index.html
new file mode 100644
index 0000000..ba8af9a
--- /dev/null
+++ b/growing-lines-hex/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - growing lines hex</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/growing-lines-hex/dist/script.js b/growing-lines-hex/dist/script.js
new file mode 100644
index 0000000..745bd72
--- /dev/null
+++ b/growing-lines-hex/dist/script.js
@@ -0,0 +1,496 @@
+"use strict";
+
+window.addEventListener("load",function() {
+
+  const ANIM_DURATION = 3000; // ms for average drawing
+  const MAX_FRAME_DURATION = 20;
+  const RADIUSMIN = 0.03;
+  const RADIUSMAX = 0.08;
+  const LWIDTH = 0.02;
+
+  let rndSeed = Math.random();
+
+  let canv, ctx;    // canvas and context
+  let maxx, maxy;   // canvas dimensions
+  let nbx, nby;
+  let uiv;
+  let grid;
+  let rndStruct;
+  let lRef;
+  let cntStarters;
+  let mouse;
+
+// for animation
+  let events;
+
+// shortcuts for Math.
+  const mrandom = Math.random;
+  const mfloor = Math.floor;
+  const mround = Math.round;
+  const mceil = Math.ceil;
+  const mabs = Math.abs;
+  const mmin = Math.min;
+  const mmax = Math.max;
+
+  const mPI = Math.PI;
+  const mPIS2 = Math.PI / 2;
+  const mPIS3 = Math.PI / 3;
+  const m2PI = Math.PI * 2;
+  const m2PIS3 = Math.PI * 2 / 3;
+  const msin = Math.sin;
+  const mcos = Math.cos;
+  const matan2 = Math.atan2;
+
+  const mhypot = Math.hypot;
+  const msqrt = Math.sqrt;
+
+  const rac3   = msqrt(3);
+  const rac3s2 = rac3 / 2;
+  let blackOnWhite;
+//------------------------------------------------------------------------
+//------------------------------------------------------------------------
+
+/* based on a function found at https://www.grc.com/otg/uheprng.htm
+and customized to my needs
+
+use :
+  x = Mash('1213'); // returns a resettable, reproductible pseudo-random number generator function
+  x = Mash();  // like line above, but uses Math.random() for a seed
+  x();         // returns pseudo-random number in range [0..1[;
+  x.reset();   // re-initializes the sequence with the same seed. Even if Mash was invoked without seed, will generate the same sequence.
+  x.seed;      // retrieves the internal seed actually used. May be useful if no seed or non-string seed provided to Mash
+               be careful : this internal seed is a String, even if it may look like a number. Changing or omitting any single digit will produce a completely different sequence
+  x.intAlea(min, max) returns integer in the range [min..max[ (or [0..min[ if max not provided)
+  x.alea(min, max) returns float in the range [min..max[ (or [0..min[ if max not provided)
+*/
+
+/*	============================================================================
+	This is based upon Johannes Baagoe's carefully designed and efficient hash
+	function for use with JavaScript.  It has a proven "avalanche" effect such
+	that every bit of the input affects every bit of the output 50% of the time,
+	which is good.	See: http://baagoe.com/en/RandomMusings/hash/avalanche.xhtml
+	============================================================================
+*/
+/* seed may be almost anything not evaluating to false */
+function Mash(seed) {
+	let n = 0xefc8249d;
+  let intSeed = (seed || Math.random()).toString();
+
+	function mash (data) {
+		if (data) {
+			data = data.toString();
+			for (var i = 0; i < data.length; i++) {
+				n += data.charCodeAt(i);
+				var h = 0.02519603282416938 * n;
+				n = h >>> 0;
+				h -= n;
+				h *= n;
+				n = h >>> 0;
+				h -= n;
+				n += h * 0x100000000; // 2^32
+			}
+			return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
+		} else n = 0xefc8249d;
+	};
+  mash (intSeed); // initial value based on seed
+
+  let mmash = () => mash('A'); // could as well be 'B' or '!' or any non falsy value
+  mmash.reset = () => {mash(); mash(intSeed)}
+  Object.defineProperty(mmash, 'seed', {get: ()=> intSeed});
+  mmash.intAlea = function (min, max) {
+    if (typeof max == 'undefined') {
+      max = min; min = 0;
+    }
+    return mfloor(min + (max - min) * this());
+  }
+  mmash.alea = function (min, max) {
+// random number [min..max[ . If no max is provided, [0..min[
+
+    if (typeof max == 'undefined') return min * this();
+    return min + (max - min) * this();
+  }
+  return mmash;
+} // Mash
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+function hslString(hsl) {
+  return `hsl(${hsl[0]},${hsl[1]}%,${hsl[2]}%)`;
+} // hslString
+
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+function lerp(p1, p2, alpha) {
+    const omalpha = 1 - alpha;
+    return [p1[0] * omalpha + p2[0] * alpha,
+            p1[1] * omalpha + p2[1] * alpha];
+} // lerp
+
+//------------------------------------------------------------------------
+function Hexagon (kx, ky) {
+  this.kx = kx;
+  this.ky = ky;
+  this.hPoints = new Array(12).fill(0).map((v,k) => new HalfPoint(this, k));
+  this.arcs = []; // no arc between points yet
+
+} // Hexagon
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.calculateArc = function(arc) {
+
+  if (! this.pos) this.calculatePoints();
+
+  const kp0 = arc.p0.khp;
+  const kp1 = arc.p1.khp;
+
+  let khp0 = kp0, khp1 = kp1;
+// is starting point is odd, take symmetric to start from even point
+  if (kp0 & 1) {
+    khp0 = 11 - kp0;
+    khp1 = 11 - kp1;
+  }
+  khp1 = (khp1 - khp0 + 12) % 12; // relative index from khp0 to khp1;
+  const coeffBeg = Hexagon.coeffBeg [khp1] * uiv.radius;
+  const coeffEnd = Hexagon.coeffEnd [khp1] * uiv.radius;
+  const side0 = mfloor(kp0 / 2);
+  const side1 = mfloor(kp1 / 2);
+  const p0 = this.pos[kp0];
+  const p1 = this.pos[kp1];
+  const pax = p0[0] + Hexagon.perp[side0][0] * coeffBeg;
+  const pay = p0[1] + Hexagon.perp[side0][1] * coeffBeg;
+  const pbx = p1[0] + Hexagon.perp[side1][0] * coeffEnd;
+  const pby = p1[1] + Hexagon.perp[side1][1] * coeffEnd;
+
+  arc.bez = [p0[0], p0[1], pax, pay, pbx, pby, p1[0], p1[1]];
+
+} // Hexagon.prototype.calculateArc
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+Hexagon.prototype.drawArc = function(arc) {
+
+  if (! arc.bez) this.calculateArc(arc);
+  let bez = arc.bez;
+  ctx.moveTo (bez[0], bez[1]);
+  ctx.bezierCurveTo (bez[2], bez[3], bez[4], bez[5], bez[6], bez[7]);
+} // Hexagon.prototype.drawArc
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.calculatePoints = function() {
+
+  this.xc = (maxx - (nbx - 1) * 1.5 * uiv.radius) / 2 + 1.5 * uiv. radius * this.kx;
+  let y0 = (maxy - (nby - 0.5) * rac3 * uiv.radius) / 2;
+  if ((this.kx & 1) == 0) y0 += uiv.radius * rac3s2; 
+  this.yc = y0 + this.ky * uiv.radius * rac3;
+  this.pos = Hexagon.positions.map(p => [this.xc + p[0] * uiv.radius, this.yc + p[1] * uiv.radius]);
+
+} // Hexagon.prototype.calculatePoints
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.k0 = 0.15;
+
+Hexagon.vertices = [[1, 0], [0.5, rac3s2], [-0.5, rac3s2], [-1, 0], [-0.5, -rac3s2], [0.5, -rac3s2]];
+
+Hexagon.positions = [lerp(Hexagon.vertices[0],Hexagon.vertices[1] , 0.5 - Hexagon.k0),
+                     lerp(Hexagon.vertices[0],Hexagon.vertices[1] , 0.5 + Hexagon.k0),
+                     lerp(Hexagon.vertices[1],Hexagon.vertices[2] , 0.5 - Hexagon.k0),
+                     lerp(Hexagon.vertices[1],Hexagon.vertices[2] , 0.5 + Hexagon.k0),
+                     lerp(Hexagon.vertices[2],Hexagon.vertices[3] , 0.5 - Hexagon.k0),
+                     lerp(Hexagon.vertices[2],Hexagon.vertices[3] , 0.5 + Hexagon.k0),
+                     lerp(Hexagon.vertices[3],Hexagon.vertices[4] , 0.5 - Hexagon.k0),
+                     lerp(Hexagon.vertices[3],Hexagon.vertices[4] , 0.5 + Hexagon.k0),
+                     lerp(Hexagon.vertices[4],Hexagon.vertices[5] , 0.5 - Hexagon.k0),
+                     lerp(Hexagon.vertices[4],Hexagon.vertices[5] , 0.5 + Hexagon.k0),
+                     lerp(Hexagon.vertices[5],Hexagon.vertices[0] , 0.5 - Hexagon.k0),
+                     lerp(Hexagon.vertices[5],Hexagon.vertices[0] , 0.5 + Hexagon.k0)];
+Hexagon.coeffBeg = [0, 0.2, 0.3, 0.4, 0.5, 0.6, 1, 0.7, 0.5, 0.5, 0.4, 0.2];
+Hexagon.coeffEnd = [0, 0.2, 0.3, 0.3, 0.5, 0.6, 0.7, 0.7, 0.6, 0.6, 0.3, 0.3];
+Hexagon.perp = [[-rac3s2, -0.5],
+                [0, -1],
+                [rac3s2, -0.5],
+                [rac3s2, 0.5],
+                [0, 1],
+                [-rac3s2, 0.5]]; // perpendicular to sides - towards center
+
+
+//------------------------------------------------------------------------
+
+function HalfPoint(parent, khp) {
+
+  this.parent = parent;  // an Hexagon
+
+  this.khp = khp; // index of point in its parentFig's hPoints
+  this.side = mfloor(khp / 2);
+  this.state = 0; // 0 : undecided; 1: entry; 2: exit; 3: blocked
+
+  // this.other will be added later for the other half of same point. Maybe
+} // HalfPoint
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+HalfPoint.prototype.attach = function(other) {
+/* sets other as the second half of this HalfPoint */
+  if (this.other) {
+    if (this.other != other) throw ('inconsistent attachment');
+    return; // already connected
+  }
+  this.other = other; // connect both ways at the same time
+  other.other = this;
+} // HalfPoint.prototype.attach
+
+//------------------------------------------------------------------------
+function prepareGo () {
+
+  /* create table of hues for families */
+  const hue0 = rndStruct.intAlea(360);
+
+  const starters = []; // list of possible starting points
+
+  let currp;
+  let k, kcurrp, ktarg, ptarg, targets, currCell;
+
+/* chooses random starting point */
+  if (! mouse) {
+    currp = grid[rndStruct.intAlea(nby)][rndStruct.intAlea(nbx)].hPoints[rndStruct.intAlea(8)];
+  } else {
+  /* chose (very approximately) the starting point at mouse location */ 
+    let kx = mfloor(mouse.x / maxx * nbx); 
+    let ky = mfloor(mouse.y / maxy * nby);
+    kx = mmax(0, mmin(kx, nbx - 1)); // limit range of values
+    ky = mmax(0, mmin(ky, nby - 1));
+    currp = grid[ky][kx].hPoints[rndStruct.intAlea(12)];
+  }
+  addStarter(starters, currp);
+  if (currp.other) {
+    addStarter(starters, currp.other);
+  }
+  return starters;
+}
+
+//------------------------------------------------------------------------
+function goon(st) {
+/* chooses random points as starting points
+  grows branches from theses points
+*/
+
+  const starters = st;
+
+  let currp ;
+  let k, kcurrp, ktarg, ptarg, targets, currCell;
+  let arc;
+
+  while (starters.length) {
+
+    kcurrp = rndStruct.intAlea(starters.length);
+    currp = starters[kcurrp]; // random point in list
+    currCell = currp.parent;
+
+    targets = [];
+    for (k = 1; k < 12; ++k) { // test possible connection with other points in this Hexagon
+      if ((currp.khp & 1) && (k == 5) ||
+          !(currp.khp & 1) && (k == 7)) continue; // avoid straight lines
+      ktarg = (currp.khp + k) % 12;
+      if (currCell.hPoints[ktarg].state != 0) continue; // this other point not available
+      // test if any other arc would intersect
+      if (currCell.arcs.find(arc => {
+          if ((arc.p0.khp - currp.khp) *
+              (arc.p0.khp - ktarg) *
+              (arc.p1.khp - currp.khp) *
+              (arc.p1.khp - ktarg) < 0) return true; // intersects
+ //       }
+        return false; // does not intersect
+      })) continue; // would intersect
+      targets.push(ktarg); // would not intersect
+    } // for k
+
+    if (targets.length == 0) {
+      currCell.state = 3; // blocked
+      starters.splice(kcurrp, 1); // no longer a possible starting point
+    } else {
+      ktarg = targets[rndStruct.intAlea(targets.length)]; // random pick
+      ptarg = currCell.hPoints[ktarg];
+      ptarg.state = 2;     // mark as exit point
+      arc = {p0: currp, p1:ptarg};
+      currCell.arcs.push(arc);
+      ctx.beginPath()
+      currCell.drawArc(arc);
+      ctx.strokeStyle = blackOnWhite ? '#000': '#fff';
+      ctx.lineWidth = uiv.lineWidth;
+      ctx.stroke();
+      if (ptarg.other) {
+        if (ptarg.other.state != 0) throw('ptarg.other.state != 0');
+        addStarter(starters, ptarg.other );
+      }
+      return true; // we've done something
+    }
+
+  } // while
+
+  return false; // starters list is empty
+
+} // goon
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  function addStarter (starters, hp) {
+    starters.push(hp);
+    hp.state = 1; // this point becomes a starting point
+    ++cntStarters;
+  } // addStarter
+
+//------------------------------------------------------------------------
+
+function attachHalfPoints() {
+  let kxn, kyn, khpn;
+  let dkx, dky;
+  grid.forEach ((line, ky) => {
+    line.forEach ((hex, kx) => {
+      hex.hPoints.forEach((hp, khp) => {
+        dkx = [1, 0, -1, -1, 0, 1][hp.side];
+        dky = [[1,1,1,0,-1,0],[0,1,0,-1,-1,-1]][kx & 1][hp.side];
+        kyn = ky + dky;
+        if (kyn < 0 || kyn >= nby) return; // no neighbor
+        kxn = kx + dkx;
+        if (kxn < 0 || kxn >= nbx) return; // no neighbor
+        hp.attach(grid[kyn][kxn].hPoints[[7,6,9,8,11,10,1,0,3,2,5,4][khp]]);
+      }); // sq.hPoints.forEach
+    }); // line.forEach
+  }); // grid.forEach
+} // attachHalfPoints
+
+//------------------------------------------------------------------------
+function readUI() {
+
+  uiv = {};
+  uiv.radius = mmax(rndStruct.alea(RADIUSMIN, RADIUSMAX) * lRef, 20);
+  uiv.lineWidth = mmax(uiv.radius * rndStruct.alea(0.05, 0.15), 0.5);
+  
+} // readUI
+//------------------------------------------------------------------------
+
+let animate;
+
+{ // scope for animate
+
+let animState = 0;
+let st;
+let tStart;
+let speedFr;
+
+animate = function(tStamp) {
+
+  let event;
+  let tinit, dur;
+
+  event = events.pop();
+  if (event && event.event == 'reset') animState = 0;
+  if (event && event.event == 'click') animState = 0;
+  window.requestAnimationFrame(animate)
+
+  switch (animState) {
+
+    case 0 :
+      if (startOver()) {
+        st = prepareGo();
+        ++animState;
+        tStart = performance.now();
+        speedFr = nbx * nby * 10 / ANIM_DURATION; // nb of segments / millisec
+      }
+      break;
+
+    case 1 :
+      tinit = performance.now();
+      do {
+        if (!goon(st)) {
+          ++animState;
+          break;
+        }
+        if (cntStarters > (performance.now() - tStart) * speedFr) break ; // done enough for this time
+        if ((performance.now() - tinit) > MAX_FRAME_DURATION) break;
+      } while (true)
+      break;
+
+    case 2:
+      ++animState;
+      break;
+
+  } // switch
+
+} // animate
+} // scope for animate
+
+//------------------------------------------------------------------------
+//------------------------------------------------------------------------
+
+function startOver() {
+
+// canvas dimensions
+
+  maxx = window.innerWidth;
+  maxy = window.innerHeight;
+  lRef = msqrt(maxx * maxy);
+
+  canv.width = maxx;
+  canv.height = maxy;
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+
+  rndStruct = Mash(rndSeed);
+  ++rndSeed;
+  readUI();
+
+/* rem : width = (1.5 * nx + 0.5) * radius
+         height = (ny + 0.5) * radius * sqrt(3)
+*/         
+
+  nbx = mfloor((maxx / uiv.radius - 0.5) / 1.5);
+  nby = mfloor(maxy / uiv.radius / rac3 - 0.5);
+
+    nbx += 2;
+    nby += 2;
+    blackOnWhite = (rndStruct() > 0.5);
+    blackOnWhite = true; // better ! 
+
+  ctx.fillStyle = blackOnWhite ? '#fff': '#000';
+  ctx.fillRect(0,0,maxx,maxy);
+
+  grid = new Array(nby).fill(0).map((v, ky) => new Array(nbx).fill(0).map((v, kx) => new Hexagon(kx, ky)));
+  
+  grid.forEach(line => {
+    line.forEach(cell=> {
+        cell.calculatePoints();
+    });
+  });
+  
+  attachHalfPoints();
+  cntStarters = 0;
+  return true;
+
+} // startOver
+
+//------------------------------------------------------------------------
+
+function mouseClick (event) {
+
+  events.push({event:'click', x: event.clientX, y: event.clientY});;
+  if (! mouse) mouse = {};
+  mouse.x = event.clientX;
+  mouse.y = event.clientY;
+} // mouseClick
+
+//------------------------------------------------------------------------
+//------------------------------------------------------------------------
+// beginning of execution
+
+  {
+    canv = document.createElement('canvas');
+    canv.style.position="absolute";
+    document.body.appendChild(canv);
+    ctx = canv.getContext('2d');
+    canv.setAttribute ('title','click me');
+  } // création CANVAS
+  canv.addEventListener('click',mouseClick);
+  events = [{event:'reset'}];
+  requestAnimationFrame (animate);
+
+}); // window load listener
\ No newline at end of file
diff --git a/growing-lines-hex/dist/style.css b/growing-lines-hex/dist/style.css
new file mode 100644
index 0000000..8ee457c
--- /dev/null
+++ b/growing-lines-hex/dist/style.css
@@ -0,0 +1,8 @@
+body {
+  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
+  background-color: #000;
+  margin:0;
+  padding:0;
+  border-width:0;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/growing-lines-hex/license.txt b/growing-lines-hex/license.txt
new file mode 100644
index 0000000..f567c68
--- /dev/null
+++ b/growing-lines-hex/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Dillon (https://codepen.io/Dillo/pen/jOwGoPW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/growing-lines-hex/src/index.html b/growing-lines-hex/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/growing-lines-hex/src/script.js b/growing-lines-hex/src/script.js
new file mode 100644
index 0000000..1dd0464
--- /dev/null
+++ b/growing-lines-hex/src/script.js
@@ -0,0 +1,496 @@
+"use strict";
+
+window.addEventListener("load",function() {
+
+  const ANIM_DURATION = 3000; // ms for average drawing
+  const MAX_FRAME_DURATION = 20;
+  const RADIUSMIN = 0.03;
+  const RADIUSMAX = 0.08;
+  const LWIDTH = 0.02;
+
+  let rndSeed = Math.random();
+
+  let canv, ctx;    // canvas and context
+  let maxx, maxy;   // canvas dimensions
+  let nbx, nby;
+  let uiv;
+  let grid;
+  let rndStruct;
+  let lRef;
+  let cntStarters;
+  let mouse;
+
+// for animation
+  let events;
+
+// shortcuts for Math.
+  const mrandom = Math.random;
+  const mfloor = Math.floor;
+  const mround = Math.round;
+  const mceil = Math.ceil;
+  const mabs = Math.abs;
+  const mmin = Math.min;
+  const mmax = Math.max;
+
+  const mPI = Math.PI;
+  const mPIS2 = Math.PI / 2;
+  const mPIS3 = Math.PI / 3;
+  const m2PI = Math.PI * 2;
+  const m2PIS3 = Math.PI * 2 / 3;
+  const msin = Math.sin;
+  const mcos = Math.cos;
+  const matan2 = Math.atan2;
+
+  const mhypot = Math.hypot;
+  const msqrt = Math.sqrt;
+
+  const rac3   = msqrt(3);
+  const rac3s2 = rac3 / 2;
+  let blackOnWhite;
+//------------------------------------------------------------------------
+//------------------------------------------------------------------------
+
+/* based on a function found at https://www.grc.com/otg/uheprng.htm
+and customized to my needs
+
+use :
+  x = Mash('1213'); // returns a resettable, reproductible pseudo-random number generator function
+  x = Mash();  // like line above, but uses Math.random() for a seed
+  x();         // returns pseudo-random number in range [0..1[;
+  x.reset();   // re-initializes the sequence with the same seed. Even if Mash was invoked without seed, will generate the same sequence.
+  x.seed;      // retrieves the internal seed actually used. May be useful if no seed or non-string seed provided to Mash
+               be careful : this internal seed is a String, even if it may look like a number. Changing or omitting any single digit will produce a completely different sequence
+  x.intAlea(min, max) returns integer in the range [min..max[ (or [0..min[ if max not provided)
+  x.alea(min, max) returns float in the range [min..max[ (or [0..min[ if max not provided)
+*/
+
+/*	============================================================================
+	This is based upon Johannes Baagoe's carefully designed and efficient hash
+	function for use with JavaScript.  It has a proven "avalanche" effect such
+	that every bit of the input affects every bit of the output 50% of the time,
+	which is good.	See: http://baagoe.com/en/RandomMusings/hash/avalanche.xhtml
+	============================================================================
+*/
+/* seed may be almost anything not evaluating to false */
+function Mash(seed) {
+	let n = 0xefc8249d;
+  let intSeed = (seed || Math.random()).toString();
+
+	function mash (data) {
+		if (data) {
+			data = data.toString();
+			for (var i = 0; i < data.length; i++) {
+				n += data.charCodeAt(i);
+				var h = 0.02519603282416938 * n;
+				n = h >>> 0;
+				h -= n;
+				h *= n;
+				n = h >>> 0;
+				h -= n;
+				n += h * 0x100000000; // 2^32
+			}
+			return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
+		} else n = 0xefc8249d;
+	};
+  mash (intSeed); // initial value based on seed
+
+  let mmash = () => mash('A'); // could as well be 'B' or '!' or any non falsy value
+  mmash.reset = () => {mash(); mash(intSeed)}
+  Object.defineProperty(mmash, 'seed', {get: ()=> intSeed});
+  mmash.intAlea = function (min, max) {
+    if (typeof max == 'undefined') {
+      max = min; min = 0;
+    }
+    return mfloor(min + (max - min) * this());
+  }
+  mmash.alea = function (min, max) {
+// random number [min..max[ . If no max is provided, [0..min[
+
+    if (typeof max == 'undefined') return min * this();
+    return min + (max - min) * this();
+  }
+  return mmash;
+} // Mash
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+function hslString(hsl) {
+  return `hsl(${hsl[0]},${hsl[1]}%,${hsl[2]}%)`;
+} // hslString
+
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+function lerp(p1, p2, alpha) {
+    const omalpha = 1 - alpha;
+    return [p1[0] * omalpha + p2[0] * alpha,
+            p1[1] * omalpha + p2[1] * alpha];
+} // lerp
+
+//------------------------------------------------------------------------
+function Hexagon (kx, ky) {
+  this.kx = kx;
+  this.ky = ky;
+  this.hPoints = new Array(12).fill(0).map((v,k) => new HalfPoint(this, k));
+  this.arcs = []; // no arc between points yet
+
+} // Hexagon
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.calculateArc = function(arc) {
+
+  if (! this.pos) this.calculatePoints();
+
+  const kp0 = arc.p0.khp;
+  const kp1 = arc.p1.khp;
+
+  let khp0 = kp0, khp1 = kp1;
+// is starting point is odd, take symmetric to start from even point
+  if (kp0 & 1) {
+    khp0 = 11 - kp0;
+    khp1 = 11 - kp1;
+  }
+  khp1 = (khp1 - khp0 + 12) % 12; // relative index from khp0 to khp1;
+  const coeffBeg = Hexagon.coeffBeg [khp1] * uiv.radius;
+  const coeffEnd = Hexagon.coeffEnd [khp1] * uiv.radius;
+  const side0 = mfloor(kp0 / 2);
+  const side1 = mfloor(kp1 / 2);
+  const p0 = this.pos[kp0];
+  const p1 = this.pos[kp1];
+  const pax = p0[0] + Hexagon.perp[side0][0] * coeffBeg;
+  const pay = p0[1] + Hexagon.perp[side0][1] * coeffBeg;
+  const pbx = p1[0] + Hexagon.perp[side1][0] * coeffEnd;
+  const pby = p1[1] + Hexagon.perp[side1][1] * coeffEnd;
+
+  arc.bez = [p0[0], p0[1], pax, pay, pbx, pby, p1[0], p1[1]];
+
+} // Hexagon.prototype.calculateArc
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+Hexagon.prototype.drawArc = function(arc) {
+
+  if (! arc.bez) this.calculateArc(arc);
+  let bez = arc.bez;
+  ctx.moveTo (bez[0], bez[1]);
+  ctx.bezierCurveTo (bez[2], bez[3], bez[4], bez[5], bez[6], bez[7]);
+} // Hexagon.prototype.drawArc
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.calculatePoints = function() {
+
+  this.xc = (maxx - (nbx - 1) * 1.5 * uiv.radius) / 2 + 1.5 * uiv. radius * this.kx;
+  let y0 = (maxy - (nby - 0.5) * rac3 * uiv.radius) / 2;
+  if ((this.kx & 1) == 0) y0 += uiv.radius * rac3s2; 
+  this.yc = y0 + this.ky * uiv.radius * rac3;
+  this.pos = Hexagon.positions.map(p => [this.xc + p[0] * uiv.radius, this.yc + p[1] * uiv.radius]);
+
+} // Hexagon.prototype.calculatePoints
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.k0 = 0.15;
+
+Hexagon.vertices = [[1, 0], [0.5, rac3s2], [-0.5, rac3s2], [-1, 0], [-0.5, -rac3s2], [0.5, -rac3s2]];
+
+Hexagon.positions = [lerp(Hexagon.vertices[0],Hexagon.vertices[1] , 0.5 - Hexagon.k0),
+                     lerp(Hexagon.vertices[0],Hexagon.vertices[1] , 0.5 + Hexagon.k0),
+                     lerp(Hexagon.vertices[1],Hexagon.vertices[2] , 0.5 - Hexagon.k0),
+                     lerp(Hexagon.vertices[1],Hexagon.vertices[2] , 0.5 + Hexagon.k0),
+                     lerp(Hexagon.vertices[2],Hexagon.vertices[3] , 0.5 - Hexagon.k0),
+                     lerp(Hexagon.vertices[2],Hexagon.vertices[3] , 0.5 + Hexagon.k0),
+                     lerp(Hexagon.vertices[3],Hexagon.vertices[4] , 0.5 - Hexagon.k0),
+                     lerp(Hexagon.vertices[3],Hexagon.vertices[4] , 0.5 + Hexagon.k0),
+                     lerp(Hexagon.vertices[4],Hexagon.vertices[5] , 0.5 - Hexagon.k0),
+                     lerp(Hexagon.vertices[4],Hexagon.vertices[5] , 0.5 + Hexagon.k0),
+                     lerp(Hexagon.vertices[5],Hexagon.vertices[0] , 0.5 - Hexagon.k0),
+                     lerp(Hexagon.vertices[5],Hexagon.vertices[0] , 0.5 + Hexagon.k0)];
+Hexagon.coeffBeg = [0, 0.2, 0.3, 0.4, 0.5, 0.6, 1, 0.7, 0.5, 0.5, 0.4, 0.2];
+Hexagon.coeffEnd = [0, 0.2, 0.3, 0.3, 0.5, 0.6, 0.7, 0.7, 0.6, 0.6, 0.3, 0.3];
+Hexagon.perp = [[-rac3s2, -0.5],
+                [0, -1],
+                [rac3s2, -0.5],
+                [rac3s2, 0.5],
+                [0, 1],
+                [-rac3s2, 0.5]]; // perpendicular to sides - towards center
+
+
+//------------------------------------------------------------------------
+
+function HalfPoint(parent, khp) {
+
+  this.parent = parent;  // an Hexagon
+
+  this.khp = khp; // index of point in its parentFig's hPoints
+  this.side = mfloor(khp / 2);
+  this.state = 0; // 0 : undecided; 1: entry; 2: exit; 3: blocked
+
+  // this.other will be added later for the other half of same point. Maybe
+} // HalfPoint
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+HalfPoint.prototype.attach = function(other) {
+/* sets other as the second half of this HalfPoint */
+  if (this.other) {
+    if (this.other != other) throw ('inconsistent attachment');
+    return; // already connected
+  }
+  this.other = other; // connect both ways at the same time
+  other.other = this;
+} // HalfPoint.prototype.attach
+
+//------------------------------------------------------------------------
+function prepareGo () {
+
+  /* create table of hues for families */
+  const hue0 = rndStruct.intAlea(360);
+
+  const starters = []; // list of possible starting points
+
+  let currp;
+  let k, kcurrp, ktarg, ptarg, targets, currCell;
+
+/* chooses random starting point */
+  if (! mouse) {
+    currp = grid[rndStruct.intAlea(nby)][rndStruct.intAlea(nbx)].hPoints[rndStruct.intAlea(8)];
+  } else {
+  /* chose (very approximately) the starting point at mouse location */ 
+    let kx = mfloor(mouse.x / maxx * nbx); 
+    let ky = mfloor(mouse.y / maxy * nby);
+    kx = mmax(0, mmin(kx, nbx - 1)); // limit range of values
+    ky = mmax(0, mmin(ky, nby - 1));
+    currp = grid[ky][kx].hPoints[rndStruct.intAlea(12)];
+  }
+  addStarter(starters, currp);
+  if (currp.other) {
+    addStarter(starters, currp.other);
+  }
+  return starters;
+}
+
+//------------------------------------------------------------------------
+function goon(st) {
+/* chooses random points as starting points
+  grows branches from theses points
+*/
+
+  const starters = st;
+
+  let currp ;
+  let k, kcurrp, ktarg, ptarg, targets, currCell;
+  let arc;
+
+  while (starters.length) {
+
+    kcurrp = rndStruct.intAlea(starters.length);
+    currp = starters[kcurrp]; // random point in list
+    currCell = currp.parent;
+
+    targets = [];
+    for (k = 1; k < 12; ++k) { // test possible connection with other points in this Hexagon
+      if ((currp.khp & 1) && (k == 5) ||
+          !(currp.khp & 1) && (k == 7)) continue; // avoid straight lines
+      ktarg = (currp.khp + k) % 12;
+      if (currCell.hPoints[ktarg].state != 0) continue; // this other point not available
+      // test if any other arc would intersect
+      if (currCell.arcs.find(arc => {
+          if ((arc.p0.khp - currp.khp) *
+              (arc.p0.khp - ktarg) *
+              (arc.p1.khp - currp.khp) *
+              (arc.p1.khp - ktarg) < 0) return true; // intersects
+ //       }
+        return false; // does not intersect
+      })) continue; // would intersect
+      targets.push(ktarg); // would not intersect
+    } // for k
+
+    if (targets.length == 0) {
+      currCell.state = 3; // blocked
+      starters.splice(kcurrp, 1); // no longer a possible starting point
+    } else {
+      ktarg = targets[rndStruct.intAlea(targets.length)]; // random pick
+      ptarg = currCell.hPoints[ktarg];
+      ptarg.state = 2;     // mark as exit point
+      arc = {p0: currp, p1:ptarg};
+      currCell.arcs.push(arc);
+      ctx.beginPath()
+      currCell.drawArc(arc);
+      ctx.strokeStyle = blackOnWhite ? '#000': '#fff';
+      ctx.lineWidth = uiv.lineWidth;
+      ctx.stroke();
+      if (ptarg.other) {
+        if (ptarg.other.state != 0) throw('ptarg.other.state != 0');
+        addStarter(starters, ptarg.other );
+      }
+      return true; // we've done something
+    }
+
+  } // while
+
+  return false; // starters list is empty
+
+} // goon
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  function addStarter (starters, hp) {
+    starters.push(hp);
+    hp.state = 1; // this point becomes a starting point
+    ++cntStarters;
+  } // addStarter
+
+//------------------------------------------------------------------------
+
+function attachHalfPoints() {
+  let kxn, kyn, khpn;
+  let dkx, dky;
+  grid.forEach ((line, ky) => {
+    line.forEach ((hex, kx) => {
+      hex.hPoints.forEach((hp, khp) => {
+        dkx = [1, 0, -1, -1, 0, 1][hp.side];
+        dky = [[1,1,1,0,-1,0],[0,1,0,-1,-1,-1]][kx & 1][hp.side];
+        kyn = ky + dky;
+        if (kyn < 0 || kyn >= nby) return; // no neighbor
+        kxn = kx + dkx;
+        if (kxn < 0 || kxn >= nbx) return; // no neighbor
+        hp.attach(grid[kyn][kxn].hPoints[[7,6,9,8,11,10,1,0,3,2,5,4][khp]]);
+      }); // sq.hPoints.forEach
+    }); // line.forEach
+  }); // grid.forEach
+} // attachHalfPoints
+
+//------------------------------------------------------------------------
+function readUI() {
+
+  uiv = {};
+  uiv.radius = mmax(rndStruct.alea(RADIUSMIN, RADIUSMAX) * lRef, 20);
+  uiv.lineWidth = mmax(uiv.radius * rndStruct.alea(0.05, 0.15), 0.5);
+  
+} // readUI
+//------------------------------------------------------------------------
+
+let animate;
+
+{ // scope for animate
+
+let animState = 0;
+let st;
+let tStart;
+let speedFr;
+
+animate = function(tStamp) {
+
+  let event;
+  let tinit, dur;
+
+  event = events.pop();
+  if (event && event.event == 'reset') animState = 0;
+  if (event && event.event == 'click') animState = 0;
+  window.requestAnimationFrame(animate)
+
+  switch (animState) {
+
+    case 0 :
+      if (startOver()) {
+        st = prepareGo();
+        ++animState;
+        tStart = performance.now();
+        speedFr = nbx * nby * 10 / ANIM_DURATION; // nb of segments / millisec
+      }
+      break;
+
+    case 1 :
+      tinit = performance.now();
+      do {
+        if (!goon(st)) {
+          ++animState;
+          break;
+        }
+        if (cntStarters > (performance.now() - tStart) * speedFr) break ; // done enough for this time
+        if ((performance.now() - tinit) > MAX_FRAME_DURATION) break;
+      } while (true)
+      break;
+
+    case 2:
+      ++animState;
+      break;
+
+  } // switch
+
+} // animate
+} // scope for animate
+
+//------------------------------------------------------------------------
+//------------------------------------------------------------------------
+
+function startOver() {
+
+// canvas dimensions
+
+  maxx = window.innerWidth;
+  maxy = window.innerHeight;
+  lRef = msqrt(maxx * maxy);
+
+  canv.width = maxx;
+  canv.height = maxy;
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+
+  rndStruct = Mash(rndSeed);
+  ++rndSeed;
+  readUI();
+
+/* rem : width = (1.5 * nx + 0.5) * radius
+         height = (ny + 0.5) * radius * sqrt(3)
+*/         
+
+  nbx = mfloor((maxx / uiv.radius - 0.5) / 1.5);
+  nby = mfloor(maxy / uiv.radius / rac3 - 0.5);
+
+    nbx += 2;
+    nby += 2;
+    blackOnWhite = (rndStruct() > 0.5);
+    blackOnWhite = true; // better ! 
+
+  ctx.fillStyle = blackOnWhite ? '#fff': '#000';
+  ctx.fillRect(0,0,maxx,maxy);
+
+  grid = new Array(nby).fill(0).map((v, ky) => new Array(nbx).fill(0).map((v, kx) => new Hexagon(kx, ky)));
+  
+  grid.forEach(line => {
+    line.forEach(cell=> {
+        cell.calculatePoints();
+    });
+  });
+  
+  attachHalfPoints();
+  cntStarters = 0;
+  return true;
+
+} // startOver
+
+//------------------------------------------------------------------------
+
+function mouseClick (event) {
+
+  events.push({event:'click', x: event.clientX, y: event.clientY});;
+  if (! mouse) mouse = {};
+  mouse.x = event.clientX;
+  mouse.y = event.clientY;
+} // mouseClick
+
+//------------------------------------------------------------------------
+//------------------------------------------------------------------------
+// beginning of execution
+
+  {
+    canv = document.createElement('canvas');
+    canv.style.position="absolute";
+    document.body.appendChild(canv);
+    ctx = canv.getContext('2d');
+    canv.setAttribute ('title','click me');
+  } // création CANVAS
+  canv.addEventListener('click',mouseClick);
+  events = [{event:'reset'}];
+  requestAnimationFrame (animate);
+
+}); // window load listener
diff --git a/growing-lines-hex/src/style.css b/growing-lines-hex/src/style.css
new file mode 100644
index 0000000..f8653c1
--- /dev/null
+++ b/growing-lines-hex/src/style.css
@@ -0,0 +1,8 @@
+body {
+  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
+  background-color: #000;
+  margin:0;
+  padding:0;
+  border-width:0;
+  cursor: pointer;
+}
diff --git a/gsap-believecollage-animation/README.markdown b/gsap-believecollage-animation/README.markdown
new file mode 100644
index 0000000..72e38a3
--- /dev/null
+++ b/gsap-believecollage-animation/README.markdown
@@ -0,0 +1,6 @@
+# GSAP Believe - Collage Animation -
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shunyadezain/pen/ExyGLgG](https://codepen.io/shunyadezain/pen/ExyGLgG).
+
+follow me on twiiter :)
+@shunyadezain
diff --git a/gsap-believecollage-animation/dist/index.html b/gsap-believecollage-animation/dist/index.html
new file mode 100644
index 0000000..4c36775
--- /dev/null
+++ b/gsap-believecollage-animation/dist/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - GSAP Believe - Collage Animation -</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="loader"></div>
+<div class="loader"></div>
+<div class="loader"></div>
+<div class="loader"></div>
+<div class="collage-container">
+  <div id="collage">
+    <div id="hoverme">Hover me</div>
+    <!-- top -->
+    <img id="top-branch-f1" src="https://i.postimg.cc/y8F2yG3P/top-branch-f1.png" alt="">
+    <div id="top-branch" class='top-branch-container'>
+      <img id="top-branch-branch" src="https://i.postimg.cc/xTNwc80B/top-branch-branch.png" alt="">
+      <div id="top-branch-cover"></div>
+    </div>
+    <img id="top-branch-f2" src="https://i.postimg.cc/K8XdLbjj/top-branch-f2.png" alt="">
+    <img id="top-branch-f3" src="https://i.postimg.cc/MG54hjDf/top-branch-f3.png" alt="">
+
+    <!-- feather -->
+    <img id="feather_2" src="https://i.postimg.cc/T1svBWTJ/feather-2.png" alt="">
+    <img id="feather_3" src="https://i.postimg.cc/qqqdmGH7/feather-3.png" alt="">
+    <img id="feather_4" src="https://i.postimg.cc/4dBgbSMM/feather-4.png" alt="">
+    <img id="feather_5" src="https://i.postimg.cc/sDBr7KJ6/feather-5.png" alt="">
+    <img id="feather_1" src="https://i.postimg.cc/3rfhkz20/feather-1.png" alt="">
+
+    <!-- bird -->
+    <img id="bird" src="https://i.postimg.cc/brsK0N1D/bird.png" alt="">
+
+    <!-- left side -->
+    <img id="left-branch" src="https://i.postimg.cc/QxRrb54X/left-branch.png" alt="">
+    <img id="left-pine" src="https://i.postimg.cc/W4VcRVcC/left-pine.png" alt="">
+
+    <!-- middle -->
+    <img id="red_mi" src="https://i.postimg.cc/C1v3ffnp/red-mi.png" alt="">
+
+    <!-- middle leaves -->
+    <img id="leaf_1" src="https://i.postimg.cc/zv64xZkd/leaf-1.png" alt="">
+    <img id="leaf_2" src="https://i.postimg.cc/jjh0t1s5/leaf-2.png" alt="">
+    <img id="leaf_3" src="https://i.postimg.cc/440CfVTz/leaf-3.png" alt="">
+    <img id="leaf_4" src="https://i.postimg.cc/rmpbcFnn/leaf-4.png" alt="">
+    <!-- middle branch  -->
+    <img id="center-branch" src="https://i.postimg.cc/G2h02j2j/center-branch.png" alt="">
+    <img id="center-branch-big" src="https://i.postimg.cc/GpdV7jk1/center-branch-big.png" alt="">
+
+    <!-- right side -->
+    <img id="right-pine-big" src="https://i.postimg.cc/vBSKmFCQ/right-pine-big.png" alt="">
+    <img id="right-pine-small" src="https://i.postimg.cc/0yD1HQF7/right-pine-small.png" alt="">
+
+    <!-- letter (you can change the text but short one)-->
+    <div id="letter-container">
+      <div id="letter">Believe</div>
+    </div>
+
+    <div id="hoverBox"></div>
+
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
+<script src='https://assets.codepen.io/16327/SplitText3.min.js'></script>
+<script src='https://assets.codepen.io/16327/GSDevTools3.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/gsap-believecollage-animation/dist/script.js b/gsap-believecollage-animation/dist/script.js
new file mode 100644
index 0000000..28057b8
--- /dev/null
+++ b/gsap-believecollage-animation/dist/script.js
@@ -0,0 +1,143 @@
+//follow me on twitter :)
+//@shunyadezain
+
+gsap.registerPlugin(GSDevTools, SplitText);
+
+const hoverBox = document.getElementById("hoverBox");
+const hoverMe = document.getElementById("hoverme");
+
+//set defalt easing
+gsap.defaults({ ease: "back.out(1.4)" });
+
+//set transformOrigin & scale 0 & rotation
+setScaleZero = (name, x, y, rotate) => {
+  gsap.set(`${name}`, {
+    transformOrigin: `${x}% ${y}%`,
+    scale: 0,
+    rotate: rotate
+  });
+};
+
+//right pine
+setScaleZero("#right-pine-big", 0, 90, 30);
+gsap.set("#right-pine-small", {
+  transformOrigin: "0% 40%",
+  scale: 0,
+  rotate: 40,
+  x: -50,
+  y: 10
+});
+
+//center branch
+setScaleZero("#center-branch-big", 20, 95, -50);
+
+//feathers
+setScaleZero("#feather_2", 120, 0, -60); //btm right
+setScaleZero("#feather_4", 140, 50, -70); //btm left
+setScaleZero("#feather_3", 120, 140, -100); //top left
+setScaleZero("#feather_5", 80, 120, -110); //top middle
+setScaleZero("#feather_1", 70, 100, -100); //top right
+
+//bird
+setScaleZero("#bird", 20, 100, -100);
+
+//left branches
+setScaleZero("#left-branch", 100, 90, -100);
+setScaleZero("#left-pine", 70, 120, -100);
+
+//red berries
+setScaleZero("#red_mi", 0, 50, -150);
+
+//leaves
+setScaleZero("#leaf_1", 90, 80, -60);
+setScaleZero("#leaf_2", 30, 10, -50);
+setScaleZero("#leaf_3", 20, 80, -40);
+setScaleZero("#leaf_4", 70, 10, -50);
+
+//top branch
+setScaleZero("#top-branch-f1", 100, 60, 30);
+setScaleZero("#top-branch-f2", 50, 70, 30);
+setScaleZero("#top-branch-f3", 70, 25, -30);
+
+//text split
+const mySplitText = new SplitText("#letter", { type: "chars" });
+
+//set text position
+gsap.set(mySplitText.chars, {
+  transformOrigin: "center center",
+  yPercent: 100
+});
+
+//main animation timeline
+const AnimationTL = gsap.timeline({
+  paused: true
+});
+
+AnimationTL.to("#center-branch", { rotate: 15, duration: 1.7 })
+  .to("#leaf_1", { scale: 1, rotate: 0, duration: 1.1 }, 0.1)
+  .to("#leaf_2", { scale: 1, rotate: 0, duration: 1.3 }, 0.2)
+  .to("#leaf_3", { scale: 1, rotate: 0, duration: 1.3 }, 0.1)
+  .to("#leaf_4", { scale: 1, rotate: 0, duration: 1.2 }, 0.1)
+  .to("#feather_2", { scale: 1, rotate: 0, duration: 1.2 }, 0.2)
+  .to("#feather_4", { scale: 1, rotate: 0, duration: 1.4 }, 0.4)
+  .to("#feather_3", { scale: 1, rotate: 0, duration: 1.2 }, 0.3)
+  .to("#feather_5", { scale: 1, rotate: 0, duration: 1.2 }, 0.4)
+  .to("#feather_1", { scale: 1, rotate: 0, duration: 1.3 }, 0.4)
+  .to("#red_mi", { scale: 1, rotate: 0, duration: 1.9 }, 0.6)
+  .to("#left-branch", { scale: 1, rotate: 0, duration: 1.5 }, 0.5)
+  .to("#left-pine", { scale: 1, rotate: 0, duration: 1.3 }, 0.4)
+  .to("#center-branch-big", { scale: 1, rotate: 0, duration: 1.3 }, 0.4)
+  .to("#right-pine-big", { scale: 1, rotate: 0, duration: 1.3 }, 0.5)
+  .to(
+    "#right-pine-small",
+    { scale: 1, rotate: 0, x: 0, y: 0, duration: 1.1 },
+    0.85
+  )
+  .to("#bird", { scale: 1, rotate: 0, duration: 1.6 }, 0.5)
+  .to(
+    "#top-branch-cover",
+    { scaleX: 0, transformOrigin: "left", duration: 2 },
+    0.5
+  )
+  .to("#top-branch-f3", { scale: 1, rotate: 0, duration: 1.5 }, 0.9)
+  .to("#top-branch-f2", { scale: 1, rotate: 0, duration: 1.7 }, 1.2)
+  .to("#top-branch-f1", { scale: 1, rotate: 0, duration: 1.7 }, 1.4)
+  .to(
+    mySplitText.chars,
+    {
+      duration: 1.1,
+      yPercent: 0,
+      stagger: {
+        each: 0.1
+      }
+    },
+    0.5
+  );
+
+//hover actions
+hoverBox.addEventListener("mouseover", () => {
+  AnimationTL.play();
+  hoverMe.style.display = "none";
+});
+
+hoverBox.addEventListener("mouseleave", () => {
+  AnimationTL.reverse();
+  hoverMe.style.display = "block";
+});
+
+//loader
+window.addEventListener("load", () => {
+  gsap.to(".loader", {
+    transformOrigin: "left bottom",
+    rotate: -100,
+    duration: 2,
+    ease: "sine.in",
+    stagger: {
+      each: 0.3,
+      from: "end"
+    }
+  });
+});
+
+//GSAP DevTool
+// GSDevTools.create({animation:AnimationTL, globalSync:false});
\ No newline at end of file
diff --git a/gsap-believecollage-animation/dist/style.css b/gsap-believecollage-animation/dist/style.css
new file mode 100644
index 0000000..b52a37e
--- /dev/null
+++ b/gsap-believecollage-animation/dist/style.css
@@ -0,0 +1,276 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap");
+:root {
+  --size: 150;
+  --unit: calc((var(--size) / 1366) * 1vmin);
+  --background: #e4e4e4;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body,
+html {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--background);
+}
+
+.loader {
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 200%;
+  height: 100%;
+  z-index: 9999;
+}
+.loader:nth-child(1) {
+  background: #d5d5d5;
+}
+
+.loader {
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 200%;
+  height: 100%;
+  z-index: 9999;
+}
+.loader:nth-child(2) {
+  background: #c5c5c5;
+}
+
+.loader {
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 200%;
+  height: 100%;
+  z-index: 9999;
+}
+.loader:nth-child(3) {
+  background: #b6b6b6;
+}
+
+.loader {
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 200%;
+  height: 100%;
+  z-index: 9999;
+}
+.loader:nth-child(4) {
+  background: #a7a7a7;
+}
+
+.collage-container {
+  position: relative;
+  min-width: calc(1366 * var(--unit));
+  height: calc(768 * var(--unit));
+}
+.collage-container #collage {
+  width: 100%;
+}
+.collage-container #collage .sanko {
+  opacity: 0.8;
+  position: absolute;
+  width: 100%;
+}
+.collage-container #collage #feather_1 {
+  position: absolute;
+  top: 19%;
+  left: 35%;
+  width: calc(100 * var(--unit));
+}
+.collage-container #collage #feather_2 {
+  position: absolute;
+  top: 62%;
+  left: 24.5%;
+  width: calc(208 * var(--unit));
+}
+.collage-container #collage #feather_3 {
+  position: absolute;
+  top: 22%;
+  left: 22.5%;
+  width: calc(208 * var(--unit));
+}
+.collage-container #collage #feather_4 {
+  position: absolute;
+  top: 63%;
+  left: 20.5%;
+  width: calc(208 * var(--unit));
+}
+.collage-container #collage #feather_5 {
+  position: absolute;
+  top: 16%;
+  left: 30.5%;
+  width: calc(150 * var(--unit));
+}
+.collage-container #collage #bird {
+  position: absolute;
+  top: 24.5%;
+  left: 38.4%;
+  width: calc(590 * var(--unit));
+}
+.collage-container #collage #left-branch {
+  position: absolute;
+  top: 41.5%;
+  left: 16.5%;
+  width: calc(350 * var(--unit));
+}
+.collage-container #collage #left-pine {
+  position: absolute;
+  top: 30.5%;
+  left: 11.5%;
+  width: calc(520 * var(--unit));
+}
+.collage-container #collage #center-branch {
+  position: absolute;
+  top: 26%;
+  left: 35.5%;
+  width: calc(140 * var(--unit));
+  transform-origin: 90% bottom;
+  transform: rotate(20deg);
+}
+.collage-container #collage #center-branch-big {
+  position: absolute;
+  top: 31%;
+  left: 41%;
+  width: calc(300 * var(--unit));
+}
+.collage-container #collage #red_mi {
+  position: absolute;
+  top: 57%;
+  left: 48%;
+  width: calc(160 * var(--unit));
+}
+.collage-container #collage #leaf_1 {
+  position: absolute;
+  top: 40.5%;
+  left: 31.5%;
+  width: calc(220 * var(--unit));
+}
+.collage-container #collage #leaf_2 {
+  position: absolute;
+  top: 62.5%;
+  left: 41.5%;
+  width: calc(160 * var(--unit));
+}
+.collage-container #collage #leaf_3 {
+  position: absolute;
+  top: 50%;
+  left: 40%;
+  width: calc(260 * var(--unit));
+}
+.collage-container #collage #leaf_4 {
+  position: absolute;
+  top: 56%;
+  left: 35%;
+  width: calc(180 * var(--unit));
+}
+.collage-container #collage #right-pine-big {
+  position: absolute;
+  top: 22.5%;
+  left: 49.5%;
+  width: calc(400 * var(--unit));
+}
+.collage-container #collage #right-pine-small {
+  position: absolute;
+  top: 54.5%;
+  left: 63.5%;
+  width: calc(210 * var(--unit));
+}
+.collage-container #collage .top-branch-container {
+  position: absolute;
+  width: calc(540 * var(--unit));
+  height: calc(200 * var(--unit));
+  top: 4.5%;
+  left: 34.5%;
+}
+.collage-container #collage .top-branch-container #top-branch-cover {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: var(--background);
+}
+.collage-container #collage #top-branch-branch {
+  position: absolute;
+  width: calc(540 * var(--unit));
+}
+.collage-container #collage #top-branch-f1 {
+  position: absolute;
+  top: 17.5%;
+  left: 50.5%;
+  width: calc(60 * var(--unit));
+}
+.collage-container #collage #top-branch-f2 {
+  position: absolute;
+  top: 19.5%;
+  left: 58.5%;
+  width: calc(73 * var(--unit));
+}
+.collage-container #collage #top-branch-f3 {
+  position: absolute;
+  top: 22.5%;
+  left: 62.1%;
+  width: calc(73 * var(--unit));
+}
+.collage-container #collage #letter-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 200%;
+  text-align: center;
+  transform: translate(-50%, -50%);
+  overflow: hidden;
+}
+.collage-container #collage #letter-container #letter {
+  width: 100%;
+  color: #fffbf2;
+  font-weight: bold;
+  font-size: calc(270 * var(--unit));
+  font-family: Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif;
+  filter: drop-shadow(calc(5 * var(--unit)) calc(5 * var(--unit)) calc(5 * var(--unit)) rgba(0, 0, 0, 0.2));
+}
+.collage-container #collage #hoverme {
+  position: absolute;
+  top: 45%;
+  left: 55%;
+  font-style: italic;
+  font-size: calc(13 * var(--unit));
+  font-family: 'Playfair Display', serif;
+  color: #505050;
+  animation: hoverme 1.3s infinite alternate;
+}
+.collage-container #collage #hoverme::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: -100%;
+  width: calc(40 * var(--unit));
+  height: calc(1 * var(--unit));
+  background: #505050;
+}
+.collage-container #collage #hoverBox {
+  display: block;
+  position: absolute;
+  top: 25%;
+  left: 40%;
+  width: calc(120 * var(--unit));
+  height: calc(280 * var(--unit));
+  z-index: 999;
+}
+
+@keyframes hoverme {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/gsap-believecollage-animation/license.txt b/gsap-believecollage-animation/license.txt
new file mode 100644
index 0000000..66048f0
--- /dev/null
+++ b/gsap-believecollage-animation/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Shunya Koide (https://codepen.io/shunyadezain/pen/ExyGLgG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/gsap-believecollage-animation/src/index.html b/gsap-believecollage-animation/src/index.html
new file mode 100644
index 0000000..5df2469
--- /dev/null
+++ b/gsap-believecollage-animation/src/index.html
@@ -0,0 +1,55 @@
+<div class="loader"></div>
+<div class="loader"></div>
+<div class="loader"></div>
+<div class="loader"></div>
+<div class="collage-container">
+  <div id="collage">
+    <div id="hoverme">Hover me</div>
+    <!-- top -->
+    <img id="top-branch-f1" src="https://i.postimg.cc/y8F2yG3P/top-branch-f1.png" alt="">
+    <div id="top-branch" class='top-branch-container'>
+      <img id="top-branch-branch" src="https://i.postimg.cc/xTNwc80B/top-branch-branch.png" alt="">
+      <div id="top-branch-cover"></div>
+    </div>
+    <img id="top-branch-f2" src="https://i.postimg.cc/K8XdLbjj/top-branch-f2.png" alt="">
+    <img id="top-branch-f3" src="https://i.postimg.cc/MG54hjDf/top-branch-f3.png" alt="">
+
+    <!-- feather -->
+    <img id="feather_2" src="https://i.postimg.cc/T1svBWTJ/feather-2.png" alt="">
+    <img id="feather_3" src="https://i.postimg.cc/qqqdmGH7/feather-3.png" alt="">
+    <img id="feather_4" src="https://i.postimg.cc/4dBgbSMM/feather-4.png" alt="">
+    <img id="feather_5" src="https://i.postimg.cc/sDBr7KJ6/feather-5.png" alt="">
+    <img id="feather_1" src="https://i.postimg.cc/3rfhkz20/feather-1.png" alt="">
+
+    <!-- bird -->
+    <img id="bird" src="https://i.postimg.cc/brsK0N1D/bird.png" alt="">
+
+    <!-- left side -->
+    <img id="left-branch" src="https://i.postimg.cc/QxRrb54X/left-branch.png" alt="">
+    <img id="left-pine" src="https://i.postimg.cc/W4VcRVcC/left-pine.png" alt="">
+
+    <!-- middle -->
+    <img id="red_mi" src="https://i.postimg.cc/C1v3ffnp/red-mi.png" alt="">
+
+    <!-- middle leaves -->
+    <img id="leaf_1" src="https://i.postimg.cc/zv64xZkd/leaf-1.png" alt="">
+    <img id="leaf_2" src="https://i.postimg.cc/jjh0t1s5/leaf-2.png" alt="">
+    <img id="leaf_3" src="https://i.postimg.cc/440CfVTz/leaf-3.png" alt="">
+    <img id="leaf_4" src="https://i.postimg.cc/rmpbcFnn/leaf-4.png" alt="">
+    <!-- middle branch  -->
+    <img id="center-branch" src="https://i.postimg.cc/G2h02j2j/center-branch.png" alt="">
+    <img id="center-branch-big" src="https://i.postimg.cc/GpdV7jk1/center-branch-big.png" alt="">
+
+    <!-- right side -->
+    <img id="right-pine-big" src="https://i.postimg.cc/vBSKmFCQ/right-pine-big.png" alt="">
+    <img id="right-pine-small" src="https://i.postimg.cc/0yD1HQF7/right-pine-small.png" alt="">
+
+    <!-- letter (you can change the text but short one)-->
+    <div id="letter-container">
+      <div id="letter">Believe</div>
+    </div>
+
+    <div id="hoverBox"></div>
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/gsap-believecollage-animation/src/script.js b/gsap-believecollage-animation/src/script.js
new file mode 100644
index 0000000..ff58736
--- /dev/null
+++ b/gsap-believecollage-animation/src/script.js
@@ -0,0 +1,143 @@
+//follow me on twitter :)
+//@shunyadezain
+
+gsap.registerPlugin(GSDevTools, SplitText);
+
+const hoverBox = document.getElementById("hoverBox");
+const hoverMe = document.getElementById("hoverme");
+
+//set defalt easing
+gsap.defaults({ ease: "back.out(1.4)" });
+
+//set transformOrigin & scale 0 & rotation
+setScaleZero = (name, x, y, rotate) => {
+  gsap.set(`${name}`, {
+    transformOrigin: `${x}% ${y}%`,
+    scale: 0,
+    rotate: rotate
+  });
+};
+
+//right pine
+setScaleZero("#right-pine-big", 0, 90, 30);
+gsap.set("#right-pine-small", {
+  transformOrigin: "0% 40%",
+  scale: 0,
+  rotate: 40,
+  x: -50,
+  y: 10
+});
+
+//center branch
+setScaleZero("#center-branch-big", 20, 95, -50);
+
+//feathers
+setScaleZero("#feather_2", 120, 0, -60); //btm right
+setScaleZero("#feather_4", 140, 50, -70); //btm left
+setScaleZero("#feather_3", 120, 140, -100); //top left
+setScaleZero("#feather_5", 80, 120, -110); //top middle
+setScaleZero("#feather_1", 70, 100, -100); //top right
+
+//bird
+setScaleZero("#bird", 20, 100, -100);
+
+//left branches
+setScaleZero("#left-branch", 100, 90, -100);
+setScaleZero("#left-pine", 70, 120, -100);
+
+//red berries
+setScaleZero("#red_mi", 0, 50, -150);
+
+//leaves
+setScaleZero("#leaf_1", 90, 80, -60);
+setScaleZero("#leaf_2", 30, 10, -50);
+setScaleZero("#leaf_3", 20, 80, -40);
+setScaleZero("#leaf_4", 70, 10, -50);
+
+//top branch
+setScaleZero("#top-branch-f1", 100, 60, 30);
+setScaleZero("#top-branch-f2", 50, 70, 30);
+setScaleZero("#top-branch-f3", 70, 25, -30);
+
+//text split
+const mySplitText = new SplitText("#letter", { type: "chars" });
+
+//set text position
+gsap.set(mySplitText.chars, {
+  transformOrigin: "center center",
+  yPercent: 100
+});
+
+//main animation timeline
+const AnimationTL = gsap.timeline({
+  paused: true
+});
+
+AnimationTL.to("#center-branch", { rotate: 15, duration: 1.7 })
+  .to("#leaf_1", { scale: 1, rotate: 0, duration: 1.1 }, 0.1)
+  .to("#leaf_2", { scale: 1, rotate: 0, duration: 1.3 }, 0.2)
+  .to("#leaf_3", { scale: 1, rotate: 0, duration: 1.3 }, 0.1)
+  .to("#leaf_4", { scale: 1, rotate: 0, duration: 1.2 }, 0.1)
+  .to("#feather_2", { scale: 1, rotate: 0, duration: 1.2 }, 0.2)
+  .to("#feather_4", { scale: 1, rotate: 0, duration: 1.4 }, 0.4)
+  .to("#feather_3", { scale: 1, rotate: 0, duration: 1.2 }, 0.3)
+  .to("#feather_5", { scale: 1, rotate: 0, duration: 1.2 }, 0.4)
+  .to("#feather_1", { scale: 1, rotate: 0, duration: 1.3 }, 0.4)
+  .to("#red_mi", { scale: 1, rotate: 0, duration: 1.9 }, 0.6)
+  .to("#left-branch", { scale: 1, rotate: 0, duration: 1.5 }, 0.5)
+  .to("#left-pine", { scale: 1, rotate: 0, duration: 1.3 }, 0.4)
+  .to("#center-branch-big", { scale: 1, rotate: 0, duration: 1.3 }, 0.4)
+  .to("#right-pine-big", { scale: 1, rotate: 0, duration: 1.3 }, 0.5)
+  .to(
+    "#right-pine-small",
+    { scale: 1, rotate: 0, x: 0, y: 0, duration: 1.1 },
+    0.85
+  )
+  .to("#bird", { scale: 1, rotate: 0, duration: 1.6 }, 0.5)
+  .to(
+    "#top-branch-cover",
+    { scaleX: 0, transformOrigin: "left", duration: 2 },
+    0.5
+  )
+  .to("#top-branch-f3", { scale: 1, rotate: 0, duration: 1.5 }, 0.9)
+  .to("#top-branch-f2", { scale: 1, rotate: 0, duration: 1.7 }, 1.2)
+  .to("#top-branch-f1", { scale: 1, rotate: 0, duration: 1.7 }, 1.4)
+  .to(
+    mySplitText.chars,
+    {
+      duration: 1.1,
+      yPercent: 0,
+      stagger: {
+        each: 0.1
+      }
+    },
+    0.5
+  );
+
+//hover actions
+hoverBox.addEventListener("mouseover", () => {
+  AnimationTL.play();
+  hoverMe.style.display = "none";
+});
+
+hoverBox.addEventListener("mouseleave", () => {
+  AnimationTL.reverse();
+  hoverMe.style.display = "block";
+});
+
+//loader
+window.addEventListener("load", () => {
+  gsap.to(".loader", {
+    transformOrigin: "left bottom",
+    rotate: -100,
+    duration: 2,
+    ease: "sine.in",
+    stagger: {
+      each: 0.3,
+      from: "end"
+    }
+  });
+});
+
+//GSAP DevTool
+// GSDevTools.create({animation:AnimationTL, globalSync:false});
diff --git a/gsap-believecollage-animation/src/style.scss b/gsap-believecollage-animation/src/style.scss
new file mode 100644
index 0000000..de5b3f7
--- /dev/null
+++ b/gsap-believecollage-animation/src/style.scss
@@ -0,0 +1,290 @@
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
+
+:root {
+  --size: 150;
+  --unit: calc((var(--size) / 1366) * 1vmin);
+  --background: #e4e4e4;
+}
+
+// 1366 × 768
+
+* {
+  box-sizing: border-box;
+}
+
+body,
+html {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--background);
+}
+
+@for $i from 1 through 4 {
+  .loader {
+    position: absolute;
+    top: 0%;
+    left: 0%;
+    width: 200%;
+    height: 100%;
+    z-index: 9999;
+
+    &:nth-child(#{$i}) {
+      background: darken(#e4e4e4, $i * 6%);
+    }
+  }
+}
+
+.collage-container {
+  position: relative;
+  min-width: calc(1366 * var(--unit));
+  height: calc(768 * var(--unit));
+
+  #collage {
+    width: 100%;
+
+    .sanko {
+      opacity: 0.8;
+      position: absolute;
+      width: 100%;
+    }
+
+    //FEATHER
+
+    #feather_1 {
+      position: absolute;
+      top: 19%;
+      left: 35%;
+      width: calc(100 * var(--unit));
+    }
+
+    #feather_2 {
+      position: absolute;
+      top: 62%;
+      left: 24.5%;
+      width: calc(208 * var(--unit));
+    }
+
+    #feather_3 {
+      position: absolute;
+      top: 22%;
+      left: 22.5%;
+      width: calc(208 * var(--unit));
+    }
+
+    #feather_4 {
+      position: absolute;
+      top: 63%;
+      left: 20.5%;
+      width: calc(208 * var(--unit));
+    }
+
+    #feather_5 {
+      position: absolute;
+      top: 16%;
+      left: 30.5%;
+      width: calc(150 * var(--unit));
+    }
+
+    //BIRD
+
+    #bird {
+      position: absolute;
+      top: 24.5%;
+      left: 38.4%;
+      width: calc(590 * var(--unit));
+    }
+
+    //left side
+    #left-branch {
+      position: absolute;
+      top: 41.5%;
+      left: 16.5%;
+      width: calc(350 * var(--unit));
+    }
+
+    #left-pine {
+      position: absolute;
+      top: 30.5%;
+      left: 11.5%;
+      width: calc(520 * var(--unit));
+    }
+    //middle branch
+    #center-branch {
+      position: absolute;
+      top: 26%;
+      left: 35.5%;
+      width: calc(140 * var(--unit));
+      transform-origin: 90% bottom;
+      transform: rotate(20deg);
+    }
+
+    #center-branch-big {
+      position: absolute;
+      top: 31%;
+      left: 41%;
+      width: calc(300 * var(--unit));
+    }
+
+    //red_mi
+    #red_mi {
+      position: absolute;
+      top: 57%;
+      left: 48%;
+      width: calc(160 * var(--unit));
+    }
+
+    //middle leaves
+    #leaf_1 {
+      position: absolute;
+      top: 40.5%;
+      left: 31.5%;
+      width: calc(220 * var(--unit));
+    }
+
+    #leaf_2 {
+      position: absolute;
+      top: 62.5%;
+      left: 41.5%;
+      width: calc(160 * var(--unit));
+    }
+
+    #leaf_3 {
+      position: absolute;
+      top: 50%;
+      left: 40%;
+      width: calc(260 * var(--unit));
+    }
+
+    #leaf_4 {
+      position: absolute;
+      top: 56%;
+      left: 35%;
+      width: calc(180 * var(--unit));
+    }
+
+    //right side
+    #right-pine-big {
+      position: absolute;
+      top: 22.5%;
+      left: 49.5%;
+      width: calc(400 * var(--unit));
+    }
+
+    #right-pine-small {
+      position: absolute;
+      top: 54.5%;
+      left: 63.5%;
+      width: calc(210 * var(--unit));
+    }
+
+    //top
+    .top-branch-container {
+      position: absolute;
+      width: calc(540 * var(--unit));
+      height: calc(200 * var(--unit));
+      top: 4.5%;
+      left: 34.5%;
+
+      #top-branch-cover {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: var(--background);
+      }
+    }
+
+    #top-branch-branch {
+      position: absolute;
+      width: calc(540 * var(--unit));
+    }
+
+    #top-branch-f1 {
+      position: absolute;
+      top: 17.5%;
+      left: 50.5%;
+      width: calc(60 * var(--unit));
+    }
+
+    #top-branch-f2 {
+      position: absolute;
+      top: 19.5%;
+      left: 58.5%;
+      width: calc(73 * var(--unit));
+    }
+
+    #top-branch-f3 {
+      position: absolute;
+      top: 22.5%;
+      left: 62.1%;
+      width: calc(73 * var(--unit));
+    }
+
+    //Letter
+    #letter-container {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 200%;
+      text-align: center;
+      transform: translate(-50%, -50%);
+      overflow: hidden;
+
+      #letter {
+        width: 100%;
+        color: #fffbf2;
+        font-weight: bold;
+        font-size: calc(270 * var(--unit));
+        font-family: Didot, Didot LT STD, Hoefler Text, Garamond,
+          Times New Roman, serif;
+        filter: drop-shadow(
+          calc(5 * var(--unit)) calc(5 * var(--unit)) calc(5 * var(--unit))
+            rgba(0, 0, 0, 0.2)
+        );
+      }
+    }
+
+    #hoverme {
+      position: absolute;
+      top: 45%;
+      left: 55%;
+      font-style: italic;
+      font-size: calc(13 * var(--unit));
+      font-family: 'Playfair Display', serif;
+      color: #505050;
+      animation: hoverme 1.3s infinite alternate;
+      
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: -100%;
+        width: calc(40 * var(--unit));
+        height: calc(1 * var(--unit));
+        background: #505050;
+      }
+    }
+    #hoverBox {
+      display: block;
+      position: absolute;
+      top: 25%;
+      left: 40%;
+      width: calc(120 * var(--unit));
+      height: calc(280 * var(--unit));
+      z-index: 999;
+    }
+  }
+}
+
+@keyframes hoverme {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/habitable-planet-generator-with-zdog/README.markdown b/habitable-planet-generator-with-zdog/README.markdown
new file mode 100644
index 0000000..b558c4a
--- /dev/null
+++ b/habitable-planet-generator-with-zdog/README.markdown
@@ -0,0 +1,4 @@
+# Habitable Planet Generator with zDog
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/robbobfrh84/pen/pmXYzY](https://codepen.io/robbobfrh84/pen/pmXYzY).
+
+ 
\ No newline at end of file
diff --git a/habitable-planet-generator-with-zdog/dist/index.html b/habitable-planet-generator-with-zdog/dist/index.html
new file mode 100644
index 0000000..4ad0cb8
--- /dev/null
+++ b/habitable-planet-generator-with-zdog/dist/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Habitable Planet Generator with zDog</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
+
+
+<body>
+  <div class="container">
+    <div id="canvasContainer">
+      <canvas id="spaceCanvas" width="430" height="380"></canvas>
+    </div>
+    <button id="btn" onclick="regenerate_world()"> ➰ ☁️ Regenerate ☁️ ➰</button>
+  </div>
+</body>
+
+<a target="_blank" href="https://twitter.com/BobMain49/status/1136990919557861382">
+<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/twitter-cornflowerblue-none.svg" style="position: absolute; bottom: 20px; right: 20px; width: 35px" /></a>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/habitable-planet-generator-with-zdog/dist/script.js b/habitable-planet-generator-with-zdog/dist/script.js
new file mode 100644
index 0000000..aa74a72
--- /dev/null
+++ b/habitable-planet-generator-with-zdog/dist/script.js
@@ -0,0 +1,318 @@
+
+// 🌱 CHARACTERISTICS 🌱
+const planet_radius = 125
+const atmosphere_thickness = 5
+const offset = -10
+
+const TAU = Zdog.TAU
+let isSpinning = true
+let regenerate = false
+
+
+// 🐶 ZDOG ILLUSTRATION 🐶
+let space = new Zdog.Illustration({
+  element: '#spaceCanvas',
+  dragRotate: true,
+  rotate: { x: -TAU*0.05 },
+  onDragStart: function() {
+    isSpinning = false
+  },
+})
+
+function generate_world(space, randomMass){
+
+  // 🌏 PLANET 🌏
+  const topHempishere = new Zdog.Hemisphere({
+    addTo: space,
+    diameter: planet_radius * 2,
+    translate: { x: offset, y: offset },
+    color: "cornflowerblue", //backface: "blue",
+    stroke: false,
+  })
+
+  topHempishere.copy({
+    rotate: { y: Zdog.TAU/2 }, //color: "blue", backface: "cornflowerblue",
+  })
+
+
+  // 💈 NORTH / SOUTH POLE 💈
+  const north_pole = new Zdog.Shape({
+    addTo: space,
+    translate: { x: offset, y: offset },
+    path: [
+      {y: planet_radius * -1},
+      {y: (planet_radius+50) * -1}
+    ],
+    stroke: 7,
+    color: 'firebrick'
+  })
+  const north_pole_mark = new Zdog.Ellipse({
+    addTo: north_pole,
+    translate: { y: (planet_radius-1) * -1 },
+    rotate: {x: TAU/4 },
+    diameter: 20,
+    stroke: 8,
+    fill: true,
+    color: "rgba(200,190,190,1)",
+  })
+  // 🔰 South pole !
+  north_pole.copy({
+    path: [
+      {y: planet_radius },
+      {y: planet_radius+50 }
+    ],
+    color: 'blue'
+  })
+  north_pole_mark.copy({
+    addTo: north_pole,
+    translate: { y: planet_radius-3 },
+    color: "rgba(100,100,255,1)",
+  })
+
+
+  // // 🇪🇨 ⭕️ Equator ⭕️ 🇪🇨
+  // set_latitude_marks(0, 400, 3, 0, "rgba(184,134,11,0.5)", "dot")
+  // // 🎅 PRIME MERIDIAN 🐧
+  // set_longitude_marks(0, 200, 3, 0,"rgba(0,110,0,0.3)", "dot")
+
+
+  // ☁️☁️☁️ CLOUDS ☁️☁️☁️
+  let cloudCount = 0
+  for (var i = 0; i < 40; i++) {
+    create_cloud_cluster({
+      lat: random(-50,50),
+      lng: random(-180,180),
+      altitude: random(10,30),
+      count: random(10,30),
+      strokeMaxMin: [8,25]
+    })
+  }
+
+  function create_cloud_cluster(cords){
+    for (var i = 0; i < cords.count; i++) {
+      set_cordinate_mark({
+        lat: cords.lat + random(0, cords.count/3),
+        lng: cords.lng + random(0, cords.count),
+        stroke: random(cords.strokeMaxMin[0], cords.strokeMaxMin[1]),
+        color: "rgba(200,200,200,"+(random(0,5)/10)+")",
+        altitude: cords.altitude + random(5, 15),
+        shape: "dot"
+      })
+      cloudCount++
+    }
+  }
+
+
+  //  🏔🌋⛰ LAND 🏔🌋⛰
+  const interval = 90
+  const stroke = 2
+  const radShift = 0
+  const maxGrow = -1
+  const maxShrink = -3
+  cols = [
+    "rgba(170,170,255,0.5)",
+    "rgba(170,170,255,0.5)",
+    "rgba(170,170,255,0.5)",
+    "rgba(160,130,52,1)",
+    "rgba(160,130,52,1)",
+    "rgba(0,128,0,1)",
+    "rgba(85,107,47,1)",
+    "rgba(67,85,37,1)",
+    "rgba(160,100,42,1)",
+    "rgba(140,80,42,1)",
+    "rgba(120,60,42,1)",
+    "rgba(170,110,92,1)",
+    "rgba(200,180,200,1)"
+  ]
+  let landMassCount = 0
+  const lngI = 360 / interval
+  const d = (Math.PI*planet_radius) / interval
+  const r = d/2
+  const r2 = r/2
+  const pr = Math.sqrt((r*r) + (r2*r2))
+  const latI = Math.sqrt( ( (r*2)*(r*2) ) - (r*r))
+  const hexWheel = [
+    {TR: (s, i, {lat,lng})=>{ return [latI*s-(latI*i), (lngI/2*s)+(lngI*i/2)] } },
+    {R: (s, i, {lat,lng})=>{ return [-(latI*i), (lngI*s)-(lngI*i/2) ] }},
+    {BR: (s, i, {lat,lng})=>{ return [-latI*s, (lngI/2*s)-(lngI*i)] }},
+    {BL: (s, i ,{lat,lng})=>{ return [-latI*s+(latI*i), -lngI/2*s-(lngI*i/2)] } },
+    {L: (s, i, {lat,lng})=>{ return [(latI*i), -lngI*s+(lngI*i/2)] } },
+    {TL: (s, i, {lat,lng})=>{ return [latI*s, -lngI/2*s+(lngI*i)] } },
+  ]
+
+  // ⛰🏔🌋⛰🏔 Build land around center mark! ⛰🏔🌋⛰🏔
+  function buildLandMass({sLat, sLng, stages}){
+
+    // 🌋 Center Land Mark
+    const landKey = { "0-TR-0": stages }
+    set_cordinate_mark({ lat: sLat, lng: sLng, radius: pr*2, stroke,
+    altitude: stages*.75, color: cols[stages], shape: "poly", sides: 6 })
+
+    // ⛰🌋🏔 Build land around center mark!
+    for (let stage = 0; stage <= stages; stage++) {
+      for (let hw = 0; hw < hexWheel.length; hw++) {
+        const key = Object.keys(hexWheel[hw])[0]
+        for (let i = 1; i <= stage; i++) {
+          let look = i <= 2 ? 0 : i-2
+          let land = stage != 1 ? landKey[(stage-1)+"-"+key+"-"+(look)] : landKey["0-TR-0"]
+          const [ lat, lng ]  = hexWheel[hw][key]( stage, i-1, {sLat,sLng})
+          const setStk = stages - stage < 1 ? 0 : stroke
+          let newAlt = land + random(maxShrink, maxGrow)
+          if (newAlt > -1) {
+            set_cordinate_mark({ lat: lat+sLat, lng: lng+sLng, radius: pr*2+radShift,
+            stroke: setStk, altitude: newAlt*.75, color: cols[newAlt], shape: "poly", sides: 6 })
+            landMassCount++
+            // 🏔⬆️ BUILD MOUNTAINS UP!
+            // for (var a = 0; a < newAlt; a++) {
+            //   set_cordinate_mark({ lat: lat+sLat, lng: lng+sLng, radius: pr*2+radShift, stroke: setStk,
+            //   altitude: a, color: cols[newAlt], shape: "poly", sides: 6 })
+            //   landMassCount++
+            // }
+          }
+          landKey[(stage)+"-"+key+"-"+(i-1)] = newAlt
+        }
+      }
+    }
+  }
+  if (randomMass){
+    for (var i = 0; i < 8; i++) {
+      buildLandMass({
+        sLat: random(-75,75),
+        sLng: random(0,180),
+        stages: random(4,12)})
+    }
+    for (var i = 0; i < 20; i++) {
+      buildLandMass({
+        sLat: random(-55,55),
+        sLng: random(-179,180),
+        stages: random(1,2)})
+    }
+  } else {
+    buildLandMass({sLat: 20, sLng: 37, stages: 12})
+    buildLandMass({sLat: 40, sLng: -37, stages: 12})
+    buildLandMass({sLat: 30, sLng: -27, stages: 12})
+    buildLandMass({sLat: 0, sLng: 150, stages: 8})
+    buildLandMass({sLat: 60, sLng: -70, stages: 12})
+    buildLandMass({sLat: 10, sLng: -10, stages: 8})
+    buildLandMass({sLat: -50, sLng: -130, stages: 9})
+    buildLandMass({sLat: 20, sLng: -90, stages: 6})
+    buildLandMass({sLat: -10, sLng: 10, stages: 12})
+    buildLandMass({sLat: -15, sLng: 180, stages: 12})
+    buildLandMass({sLat: 35, sLng: 80, stages: 9})
+    // Reefs
+    buildLandMass({sLat: -35, sLng: 80, stages: 3})
+    buildLandMass({sLat: -40, sLng: 90, stages: 3})
+    buildLandMass({sLat: -43, sLng: 90, stages: 2})
+    buildLandMass({sLat: 33, sLng: 180, stages: 2})
+    buildLandMass({sLat: 30, sLng: 170, stages: 3})
+    buildLandMass({sLat: 32, sLng: 150, stages: 2})
+    buildLandMass({sLat: 25, sLng: -130, stages: 3})
+  }
+
+
+  // 🌐 🛠 LATITUDE & LONGITUDE MARKS & TOOLS 🛠 🌐
+  function set_latitude_marks(lat, cnt, stroke, altitude, color, shape){
+    for ( var j=0; j < cnt; j++ ) {
+      set_cordinate_mark({
+        lng: (360 / cnt) * j,
+        lat, stroke, color, altitude, shape
+      })
+    }
+  }
+
+  function set_longitude_marks(lng, cnt, stroke, altitude, color, shape) {
+    for ( var j=0; j < cnt; j++ ) {
+      set_cordinate_mark({
+        lat: (180 / cnt) * j -90,
+        lng, stroke, color, altitude, shape
+      })
+    }
+  }
+
+  function set_cordinate_mark(mark){
+    const lat_radians = (TAU/4) - (mark.lat * (Math.PI/180)) * -1
+    const lng_radians = (mark.lng * (Math.PI/180)) * -1
+    var rotor1 = new Zdog.Anchor({
+      addTo: space,
+      translate: { x: offset, y: offset },
+      rotate: { y: lng_radians },
+    })
+    var rotor2 = new Zdog.Anchor({
+      addTo: rotor1,
+      rotate: { x: lat_radians },
+    })
+    if (mark.shape === "dot") {
+      new Zdog.Shape({
+        addTo: rotor2,
+        translate: { y: planet_radius + (mark.altitude || 0) },
+        stroke: mark.stroke,
+        color: mark.color
+      })
+    } else if (mark.shape === "cone") {
+      new Zdog.Cone({
+        addTo: rotor2,
+        translate: { y: planet_radius + (mark.altitude || 0) },
+        rotate: {x: TAU*.75},
+        diameter: mark.diameter,
+        length: mark.length,
+        color: mark.color,
+      })
+    } else if (mark.shape === "poly") {
+      new Zdog.Polygon({
+        addTo: rotor2,
+        sides: mark.sides,
+        radius: mark.radius,
+        translate: { y: planet_radius  + (mark.altitude || 0) },
+        rotate: {x: TAU*.75},
+        stroke: mark.stroke,
+        fill: true,
+        color: mark.color,
+        backface: mark.backface,
+      })
+
+    }
+  }
+
+  function random(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }
+
+
+  // 🔥🔥🔥🔥 Animate! 🔥🔥🔥🔥
+  space.rotate.z = 0.3
+  function animate() {
+    if (!regenerate) {
+      space.rotate.y += isSpinning ? 0.01 : 0
+      space.updateRenderGraph()
+      requestAnimationFrame( animate )
+    }
+  }
+  console.log("total clouds, land: ", cloudCount, landMassCount)
+
+  animate()
+
+}
+
+
+// ➰ ☁️ Regenerate ☁️ ➰
+function regenerate_world(){
+  regenerate = true
+  canvasContainer.innerHTML = `
+    <canvas id="spaceCanvas" width="430" height="380"></canvas>
+  `
+  space = false
+  requestAnimationFrame(()=>{
+    space = new Zdog.Illustration({
+      element: '#spaceCanvas',
+      dragRotate: true,
+      rotate: { x: TAU*0.05 },
+      onDragStart: function() {
+        isSpinning = false
+      },
+    })
+    regenerate = false
+    generate_world(space, true)
+  })
+}
+
+generate_world(space)
\ No newline at end of file
diff --git a/habitable-planet-generator-with-zdog/dist/style.css b/habitable-planet-generator-with-zdog/dist/style.css
new file mode 100644
index 0000000..2afa34d
--- /dev/null
+++ b/habitable-planet-generator-with-zdog/dist/style.css
@@ -0,0 +1,22 @@
+body {
+  background-color: rgba(19,20,23);
+}
+canvas {
+  transform: rotate(15deg);
+}
+.container {
+  background-color: rgba(19,20,23);
+  border-radius: 5px;
+  width: 430px;
+  margin: auto;
+}
+#btn {
+  border: none;
+  background-color: #ccc;
+  border-radius: 3px;
+  font-size: 20px;
+  width: 350px;
+  margin-left: 40px;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/habitable-planet-generator-with-zdog/license.txt b/habitable-planet-generator-with-zdog/license.txt
new file mode 100644
index 0000000..05cd002
--- /dev/null
+++ b/habitable-planet-generator-with-zdog/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Bob Main (https://codepen.io/robbobfrh84/pen/pmXYzY)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/habitable-planet-generator-with-zdog/src/index.html b/habitable-planet-generator-with-zdog/src/index.html
new file mode 100644
index 0000000..3fed46b
--- /dev/null
+++ b/habitable-planet-generator-with-zdog/src/index.html
@@ -0,0 +1,14 @@
+<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
+
+
+<body>
+  <div class="container">
+    <div id="canvasContainer">
+      <canvas id="spaceCanvas" width="430" height="380"></canvas>
+    </div>
+    <button id="btn" onclick="regenerate_world()"> ➰ ☁️ Regenerate ☁️ ➰</button>
+  </div>
+</body>
+
+<a target="_blank" href="https://twitter.com/BobMain49/status/1136990919557861382">
+<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/twitter-cornflowerblue-none.svg" style="position: absolute; bottom: 20px; right: 20px; width: 35px" /></a>
\ No newline at end of file
diff --git a/habitable-planet-generator-with-zdog/src/script.js b/habitable-planet-generator-with-zdog/src/script.js
new file mode 100644
index 0000000..aa74a72
--- /dev/null
+++ b/habitable-planet-generator-with-zdog/src/script.js
@@ -0,0 +1,318 @@
+
+// 🌱 CHARACTERISTICS 🌱
+const planet_radius = 125
+const atmosphere_thickness = 5
+const offset = -10
+
+const TAU = Zdog.TAU
+let isSpinning = true
+let regenerate = false
+
+
+// 🐶 ZDOG ILLUSTRATION 🐶
+let space = new Zdog.Illustration({
+  element: '#spaceCanvas',
+  dragRotate: true,
+  rotate: { x: -TAU*0.05 },
+  onDragStart: function() {
+    isSpinning = false
+  },
+})
+
+function generate_world(space, randomMass){
+
+  // 🌏 PLANET 🌏
+  const topHempishere = new Zdog.Hemisphere({
+    addTo: space,
+    diameter: planet_radius * 2,
+    translate: { x: offset, y: offset },
+    color: "cornflowerblue", //backface: "blue",
+    stroke: false,
+  })
+
+  topHempishere.copy({
+    rotate: { y: Zdog.TAU/2 }, //color: "blue", backface: "cornflowerblue",
+  })
+
+
+  // 💈 NORTH / SOUTH POLE 💈
+  const north_pole = new Zdog.Shape({
+    addTo: space,
+    translate: { x: offset, y: offset },
+    path: [
+      {y: planet_radius * -1},
+      {y: (planet_radius+50) * -1}
+    ],
+    stroke: 7,
+    color: 'firebrick'
+  })
+  const north_pole_mark = new Zdog.Ellipse({
+    addTo: north_pole,
+    translate: { y: (planet_radius-1) * -1 },
+    rotate: {x: TAU/4 },
+    diameter: 20,
+    stroke: 8,
+    fill: true,
+    color: "rgba(200,190,190,1)",
+  })
+  // 🔰 South pole !
+  north_pole.copy({
+    path: [
+      {y: planet_radius },
+      {y: planet_radius+50 }
+    ],
+    color: 'blue'
+  })
+  north_pole_mark.copy({
+    addTo: north_pole,
+    translate: { y: planet_radius-3 },
+    color: "rgba(100,100,255,1)",
+  })
+
+
+  // // 🇪🇨 ⭕️ Equator ⭕️ 🇪🇨
+  // set_latitude_marks(0, 400, 3, 0, "rgba(184,134,11,0.5)", "dot")
+  // // 🎅 PRIME MERIDIAN 🐧
+  // set_longitude_marks(0, 200, 3, 0,"rgba(0,110,0,0.3)", "dot")
+
+
+  // ☁️☁️☁️ CLOUDS ☁️☁️☁️
+  let cloudCount = 0
+  for (var i = 0; i < 40; i++) {
+    create_cloud_cluster({
+      lat: random(-50,50),
+      lng: random(-180,180),
+      altitude: random(10,30),
+      count: random(10,30),
+      strokeMaxMin: [8,25]
+    })
+  }
+
+  function create_cloud_cluster(cords){
+    for (var i = 0; i < cords.count; i++) {
+      set_cordinate_mark({
+        lat: cords.lat + random(0, cords.count/3),
+        lng: cords.lng + random(0, cords.count),
+        stroke: random(cords.strokeMaxMin[0], cords.strokeMaxMin[1]),
+        color: "rgba(200,200,200,"+(random(0,5)/10)+")",
+        altitude: cords.altitude + random(5, 15),
+        shape: "dot"
+      })
+      cloudCount++
+    }
+  }
+
+
+  //  🏔🌋⛰ LAND 🏔🌋⛰
+  const interval = 90
+  const stroke = 2
+  const radShift = 0
+  const maxGrow = -1
+  const maxShrink = -3
+  cols = [
+    "rgba(170,170,255,0.5)",
+    "rgba(170,170,255,0.5)",
+    "rgba(170,170,255,0.5)",
+    "rgba(160,130,52,1)",
+    "rgba(160,130,52,1)",
+    "rgba(0,128,0,1)",
+    "rgba(85,107,47,1)",
+    "rgba(67,85,37,1)",
+    "rgba(160,100,42,1)",
+    "rgba(140,80,42,1)",
+    "rgba(120,60,42,1)",
+    "rgba(170,110,92,1)",
+    "rgba(200,180,200,1)"
+  ]
+  let landMassCount = 0
+  const lngI = 360 / interval
+  const d = (Math.PI*planet_radius) / interval
+  const r = d/2
+  const r2 = r/2
+  const pr = Math.sqrt((r*r) + (r2*r2))
+  const latI = Math.sqrt( ( (r*2)*(r*2) ) - (r*r))
+  const hexWheel = [
+    {TR: (s, i, {lat,lng})=>{ return [latI*s-(latI*i), (lngI/2*s)+(lngI*i/2)] } },
+    {R: (s, i, {lat,lng})=>{ return [-(latI*i), (lngI*s)-(lngI*i/2) ] }},
+    {BR: (s, i, {lat,lng})=>{ return [-latI*s, (lngI/2*s)-(lngI*i)] }},
+    {BL: (s, i ,{lat,lng})=>{ return [-latI*s+(latI*i), -lngI/2*s-(lngI*i/2)] } },
+    {L: (s, i, {lat,lng})=>{ return [(latI*i), -lngI*s+(lngI*i/2)] } },
+    {TL: (s, i, {lat,lng})=>{ return [latI*s, -lngI/2*s+(lngI*i)] } },
+  ]
+
+  // ⛰🏔🌋⛰🏔 Build land around center mark! ⛰🏔🌋⛰🏔
+  function buildLandMass({sLat, sLng, stages}){
+
+    // 🌋 Center Land Mark
+    const landKey = { "0-TR-0": stages }
+    set_cordinate_mark({ lat: sLat, lng: sLng, radius: pr*2, stroke,
+    altitude: stages*.75, color: cols[stages], shape: "poly", sides: 6 })
+
+    // ⛰🌋🏔 Build land around center mark!
+    for (let stage = 0; stage <= stages; stage++) {
+      for (let hw = 0; hw < hexWheel.length; hw++) {
+        const key = Object.keys(hexWheel[hw])[0]
+        for (let i = 1; i <= stage; i++) {
+          let look = i <= 2 ? 0 : i-2
+          let land = stage != 1 ? landKey[(stage-1)+"-"+key+"-"+(look)] : landKey["0-TR-0"]
+          const [ lat, lng ]  = hexWheel[hw][key]( stage, i-1, {sLat,sLng})
+          const setStk = stages - stage < 1 ? 0 : stroke
+          let newAlt = land + random(maxShrink, maxGrow)
+          if (newAlt > -1) {
+            set_cordinate_mark({ lat: lat+sLat, lng: lng+sLng, radius: pr*2+radShift,
+            stroke: setStk, altitude: newAlt*.75, color: cols[newAlt], shape: "poly", sides: 6 })
+            landMassCount++
+            // 🏔⬆️ BUILD MOUNTAINS UP!
+            // for (var a = 0; a < newAlt; a++) {
+            //   set_cordinate_mark({ lat: lat+sLat, lng: lng+sLng, radius: pr*2+radShift, stroke: setStk,
+            //   altitude: a, color: cols[newAlt], shape: "poly", sides: 6 })
+            //   landMassCount++
+            // }
+          }
+          landKey[(stage)+"-"+key+"-"+(i-1)] = newAlt
+        }
+      }
+    }
+  }
+  if (randomMass){
+    for (var i = 0; i < 8; i++) {
+      buildLandMass({
+        sLat: random(-75,75),
+        sLng: random(0,180),
+        stages: random(4,12)})
+    }
+    for (var i = 0; i < 20; i++) {
+      buildLandMass({
+        sLat: random(-55,55),
+        sLng: random(-179,180),
+        stages: random(1,2)})
+    }
+  } else {
+    buildLandMass({sLat: 20, sLng: 37, stages: 12})
+    buildLandMass({sLat: 40, sLng: -37, stages: 12})
+    buildLandMass({sLat: 30, sLng: -27, stages: 12})
+    buildLandMass({sLat: 0, sLng: 150, stages: 8})
+    buildLandMass({sLat: 60, sLng: -70, stages: 12})
+    buildLandMass({sLat: 10, sLng: -10, stages: 8})
+    buildLandMass({sLat: -50, sLng: -130, stages: 9})
+    buildLandMass({sLat: 20, sLng: -90, stages: 6})
+    buildLandMass({sLat: -10, sLng: 10, stages: 12})
+    buildLandMass({sLat: -15, sLng: 180, stages: 12})
+    buildLandMass({sLat: 35, sLng: 80, stages: 9})
+    // Reefs
+    buildLandMass({sLat: -35, sLng: 80, stages: 3})
+    buildLandMass({sLat: -40, sLng: 90, stages: 3})
+    buildLandMass({sLat: -43, sLng: 90, stages: 2})
+    buildLandMass({sLat: 33, sLng: 180, stages: 2})
+    buildLandMass({sLat: 30, sLng: 170, stages: 3})
+    buildLandMass({sLat: 32, sLng: 150, stages: 2})
+    buildLandMass({sLat: 25, sLng: -130, stages: 3})
+  }
+
+
+  // 🌐 🛠 LATITUDE & LONGITUDE MARKS & TOOLS 🛠 🌐
+  function set_latitude_marks(lat, cnt, stroke, altitude, color, shape){
+    for ( var j=0; j < cnt; j++ ) {
+      set_cordinate_mark({
+        lng: (360 / cnt) * j,
+        lat, stroke, color, altitude, shape
+      })
+    }
+  }
+
+  function set_longitude_marks(lng, cnt, stroke, altitude, color, shape) {
+    for ( var j=0; j < cnt; j++ ) {
+      set_cordinate_mark({
+        lat: (180 / cnt) * j -90,
+        lng, stroke, color, altitude, shape
+      })
+    }
+  }
+
+  function set_cordinate_mark(mark){
+    const lat_radians = (TAU/4) - (mark.lat * (Math.PI/180)) * -1
+    const lng_radians = (mark.lng * (Math.PI/180)) * -1
+    var rotor1 = new Zdog.Anchor({
+      addTo: space,
+      translate: { x: offset, y: offset },
+      rotate: { y: lng_radians },
+    })
+    var rotor2 = new Zdog.Anchor({
+      addTo: rotor1,
+      rotate: { x: lat_radians },
+    })
+    if (mark.shape === "dot") {
+      new Zdog.Shape({
+        addTo: rotor2,
+        translate: { y: planet_radius + (mark.altitude || 0) },
+        stroke: mark.stroke,
+        color: mark.color
+      })
+    } else if (mark.shape === "cone") {
+      new Zdog.Cone({
+        addTo: rotor2,
+        translate: { y: planet_radius + (mark.altitude || 0) },
+        rotate: {x: TAU*.75},
+        diameter: mark.diameter,
+        length: mark.length,
+        color: mark.color,
+      })
+    } else if (mark.shape === "poly") {
+      new Zdog.Polygon({
+        addTo: rotor2,
+        sides: mark.sides,
+        radius: mark.radius,
+        translate: { y: planet_radius  + (mark.altitude || 0) },
+        rotate: {x: TAU*.75},
+        stroke: mark.stroke,
+        fill: true,
+        color: mark.color,
+        backface: mark.backface,
+      })
+
+    }
+  }
+
+  function random(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }
+
+
+  // 🔥🔥🔥🔥 Animate! 🔥🔥🔥🔥
+  space.rotate.z = 0.3
+  function animate() {
+    if (!regenerate) {
+      space.rotate.y += isSpinning ? 0.01 : 0
+      space.updateRenderGraph()
+      requestAnimationFrame( animate )
+    }
+  }
+  console.log("total clouds, land: ", cloudCount, landMassCount)
+
+  animate()
+
+}
+
+
+// ➰ ☁️ Regenerate ☁️ ➰
+function regenerate_world(){
+  regenerate = true
+  canvasContainer.innerHTML = `
+    <canvas id="spaceCanvas" width="430" height="380"></canvas>
+  `
+  space = false
+  requestAnimationFrame(()=>{
+    space = new Zdog.Illustration({
+      element: '#spaceCanvas',
+      dragRotate: true,
+      rotate: { x: TAU*0.05 },
+      onDragStart: function() {
+        isSpinning = false
+      },
+    })
+    regenerate = false
+    generate_world(space, true)
+  })
+}
+
+generate_world(space)
\ No newline at end of file
diff --git a/habitable-planet-generator-with-zdog/src/style.css b/habitable-planet-generator-with-zdog/src/style.css
new file mode 100644
index 0000000..2afa34d
--- /dev/null
+++ b/habitable-planet-generator-with-zdog/src/style.css
@@ -0,0 +1,22 @@
+body {
+  background-color: rgba(19,20,23);
+}
+canvas {
+  transform: rotate(15deg);
+}
+.container {
+  background-color: rgba(19,20,23);
+  border-radius: 5px;
+  width: 430px;
+  margin: auto;
+}
+#btn {
+  border: none;
+  background-color: #ccc;
+  border-radius: 3px;
+  font-size: 20px;
+  width: 350px;
+  margin-left: 40px;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/halftone-circles-try-scrollinganydayshaders-05/README.markdown b/halftone-circles-try-scrollinganydayshaders-05/README.markdown
new file mode 100644
index 0000000..4155a5c
--- /dev/null
+++ b/halftone-circles-try-scrollinganydayshaders-05/README.markdown
@@ -0,0 +1,5 @@
+# Halftone Circles (try scrolling) - #anydayshaders 05
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/terabaud/pen/BajJbgd](https://codepen.io/terabaud/pen/BajJbgd).
+
+Halftone Circles. Try scrolling :)
diff --git a/halftone-circles-try-scrollinganydayshaders-05/dist/index.html b/halftone-circles-try-scrollinganydayshaders-05/dist/index.html
new file mode 100644
index 0000000..a6b9329
--- /dev/null
+++ b/halftone-circles-try-scrollinganydayshaders-05/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Halftone Circles (try scrolling) - #anydayshaders 05</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canv"></canvas>
+<input id="warpSpeed" value="0" />
+<!-- partial -->
+  <script src='https://unpkg.com/glea@latest'></script>
+<script src='https://cdn.jsdelivr.net/npm/gsap@3.3.4/dist/gsap.min.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/gsap@3.3.4/dist/ScrollTrigger.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/halftone-circles-try-scrollinganydayshaders-05/dist/script.js b/halftone-circles-try-scrollinganydayshaders-05/dist/script.js
new file mode 100644
index 0000000..784edf7
--- /dev/null
+++ b/halftone-circles-try-scrollinganydayshaders-05/dist/script.js
@@ -0,0 +1,159 @@
+const warpSpeed = document.querySelector('#warpSpeed');
+gsap.registerPlugin(ScrollTrigger);
+gsap.to('#warpSpeed', {
+  value: 100,
+  ease: 'none',
+  scrollTrigger: { scrub: 0.1 }
+});
+const glsl = x => x;
+
+const frag = glsl`
+precision highp float;
+uniform float time;
+uniform float width;
+uniform float height;
+uniform float warpSpeed;
+
+const float PI = 3.141592654;
+const float DEG = PI / 180.0;
+
+vec2 coords() {
+  float vmin = min(width, height);
+  return vec2((gl_FragCoord.x - width * .5) / vmin,
+              (gl_FragCoord.y - height * .5) / vmin);
+}
+
+vec2 rotate(vec2 p, float a) {
+  return vec2(p.x * cos(a) - p.y * sin(a),
+              p.x * sin(a) + p.y * cos(a));
+}
+
+vec2 repeat(in vec2 p, in vec2 c) {
+  return mod(p, c) - 0.5 * c;
+}
+
+// Distance functions by Inigo Quilez
+// https://iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm
+float circle(in vec2 p, in vec2 pos, float radius) {
+  return length((p - pos)) - radius;
+}
+
+float symmetricDiff(float a, float b)
+{
+    // (A ∪ B) \ (A ∩ B)
+    return max(min(a, b), -max(a, b));
+}
+
+float subtract(float a, float b)
+{
+    return max(-a, b);
+}
+
+float circlesField(vec2 p, vec2 pCenter) {
+  float d = 1000.;
+  float s = .7;
+  for (int i = 9; i >= 0; i-= 2) {
+    d = min(d, circle(p, pCenter, float(i) * s));
+    d = subtract(circle(p, pCenter, float(i-1) * s), d);
+  }
+  return d;
+}
+
+float rectanglesField(vec2 p, vec2 pCenter) {
+  return 0.;
+}
+
+vec2 dotPattern(vec2 p) {
+ float w = 55. - max(0., warpSpeed / 6.);
+ return p + sin(p.x * w + time) * cos(p.y * w + time * .1 ) * .125;
+}
+
+float aa(float d) {
+  return smoothstep(.0, .05, d);
+}
+
+
+vec2 scene1(in vec2 p) {
+  p = rotate(p, -time * DEG);
+  float d0 = circlesField(p, vec2(sin(time * .3), cos(time * .2)));
+  float d1 = circlesField(p, vec2(sin(1. + time * .3), cos(1. + time * .2)));
+  return vec2(d0, d1);
+}
+
+vec2 scene2(in vec2 p) {
+  p = rotate(p, time * DEG);
+  vec2 q = vec2(cos(time * .2) * .7, sin(time * .3) * .7); 
+  return vec2(
+    circle(mod(p, 4.) - 2., vec2(0.), 2.),
+    circle(mod(p + q, 4.) - 2., vec2(0.), 2.)
+  );
+}
+
+vec3 shade(in vec2 p)
+{
+  float sceneId = floor(time / 1e3);
+  p = dotPattern(p);
+  vec3 background = vec3(.5 + sin(time * .05 + p.x * .1) * cos(p.y * .4 + p.x * .2), .2 + sin(time *.1 + p.x * .2) * cos(time * .1 + p.y * .13), .7);
+  vec3 white = vec3(1., 1., 1.);
+  vec3 black = vec3(0., 0., 0.);
+  vec2 s1 = scene1(p);
+  vec2 s2 = scene2(p);
+  float x = warpSpeed / 100.; // .5 + sin(time * .1) * .5
+  vec2 s = mix(s1, s2, x);
+  vec3 col0 = mix(white, black, aa(s.x));
+  vec3 col1 = mix(white, black, aa(s.y));
+  vec3 col = background + col0 - col1;
+
+  return col;
+}
+
+
+void main () {
+  vec2 p0 = coords();
+  float zoom = 7.;
+  vec3 col = shade(p0 * zoom);
+  gl_FragColor = vec4(col, 1.0);
+}
+`
+
+const vert = glsl`
+precision mediump float;
+attribute vec2 position;
+
+void main () {
+  gl_Position = vec4(position, 0, 1.0);
+}
+`
+
+
+
+
+let texture = null;
+
+const glea = new GLea({
+  shaders: [
+    GLea.fragmentShader(frag),
+    GLea.vertexShader(vert)
+  ]
+}).create();
+
+function loop(time) {
+  const { gl } = glea;
+  glea.clear();
+  glea.uni('width', glea.width);
+  glea.uni('height', glea.height);
+  glea.uni('time', time * .005);
+  glea.uni('warpSpeed', parseFloat(warpSpeed.value));
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  requestAnimationFrame(loop);
+}
+
+function setup() {
+  const { gl } = glea;
+  window.addEventListener('resize', () => {
+    glea.resize();
+  });
+  loop(0);
+}
+
+setup();
\ No newline at end of file
diff --git a/halftone-circles-try-scrollinganydayshaders-05/dist/style.css b/halftone-circles-try-scrollinganydayshaders-05/dist/style.css
new file mode 100644
index 0000000..dfbca10
--- /dev/null
+++ b/halftone-circles-try-scrollinganydayshaders-05/dist/style.css
@@ -0,0 +1,29 @@
+body {
+  margin: 0;
+  height: 200vh;
+}
+
+/* scrollbar hide hacks */
+body::-webkit-scrollbar { width:0; }
+
+canvas {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+#warpSpeed {
+  display: none;
+  top: 16px;
+  left: 16px;
+  position: fixed;
+  background: transparent;
+  width: 150px;
+  border: 1px solid #fff;
+  color: #fff;
+  font-family: monospace;
+  
+}
\ No newline at end of file
diff --git a/halftone-circles-try-scrollinganydayshaders-05/license.txt b/halftone-circles-try-scrollinganydayshaders-05/license.txt
new file mode 100644
index 0000000..d894815
--- /dev/null
+++ b/halftone-circles-try-scrollinganydayshaders-05/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Lea Rosema (https://codepen.io/terabaud/pen/BajJbgd)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/halftone-circles-try-scrollinganydayshaders-05/src/index.html b/halftone-circles-try-scrollinganydayshaders-05/src/index.html
new file mode 100644
index 0000000..1df76eb
--- /dev/null
+++ b/halftone-circles-try-scrollinganydayshaders-05/src/index.html
@@ -0,0 +1,2 @@
+<canvas id="canv"></canvas>
+<input id="warpSpeed" value="0" />
\ No newline at end of file
diff --git a/halftone-circles-try-scrollinganydayshaders-05/src/script.js b/halftone-circles-try-scrollinganydayshaders-05/src/script.js
new file mode 100644
index 0000000..1c763c8
--- /dev/null
+++ b/halftone-circles-try-scrollinganydayshaders-05/src/script.js
@@ -0,0 +1,159 @@
+const warpSpeed = document.querySelector('#warpSpeed');
+gsap.registerPlugin(ScrollTrigger);
+gsap.to('#warpSpeed', {
+  value: 100,
+  ease: 'none',
+  scrollTrigger: { scrub: 0.1 }
+});
+const glsl = x => x;
+
+const frag = glsl`
+precision highp float;
+uniform float time;
+uniform float width;
+uniform float height;
+uniform float warpSpeed;
+
+const float PI = 3.141592654;
+const float DEG = PI / 180.0;
+
+vec2 coords() {
+  float vmin = min(width, height);
+  return vec2((gl_FragCoord.x - width * .5) / vmin,
+              (gl_FragCoord.y - height * .5) / vmin);
+}
+
+vec2 rotate(vec2 p, float a) {
+  return vec2(p.x * cos(a) - p.y * sin(a),
+              p.x * sin(a) + p.y * cos(a));
+}
+
+vec2 repeat(in vec2 p, in vec2 c) {
+  return mod(p, c) - 0.5 * c;
+}
+
+// Distance functions by Inigo Quilez
+// https://iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm
+float circle(in vec2 p, in vec2 pos, float radius) {
+  return length((p - pos)) - radius;
+}
+
+float symmetricDiff(float a, float b)
+{
+    // (A ∪ B) \ (A ∩ B)
+    return max(min(a, b), -max(a, b));
+}
+
+float subtract(float a, float b)
+{
+    return max(-a, b);
+}
+
+float circlesField(vec2 p, vec2 pCenter) {
+  float d = 1000.;
+  float s = .7;
+  for (int i = 9; i >= 0; i-= 2) {
+    d = min(d, circle(p, pCenter, float(i) * s));
+    d = subtract(circle(p, pCenter, float(i-1) * s), d);
+  }
+  return d;
+}
+
+float rectanglesField(vec2 p, vec2 pCenter) {
+  return 0.;
+}
+
+vec2 dotPattern(vec2 p) {
+ float w = 55. - max(0., warpSpeed / 6.);
+ return p + sin(p.x * w + time) * cos(p.y * w + time * .1 ) * .125;
+}
+
+float aa(float d) {
+  return smoothstep(.0, .05, d);
+}
+
+
+vec2 scene1(in vec2 p) {
+  p = rotate(p, -time * DEG);
+  float d0 = circlesField(p, vec2(sin(time * .3), cos(time * .2)));
+  float d1 = circlesField(p, vec2(sin(1. + time * .3), cos(1. + time * .2)));
+  return vec2(d0, d1);
+}
+
+vec2 scene2(in vec2 p) {
+  p = rotate(p, time * DEG);
+  vec2 q = vec2(cos(time * .2) * .7, sin(time * .3) * .7); 
+  return vec2(
+    circle(mod(p, 4.) - 2., vec2(0.), 2.),
+    circle(mod(p + q, 4.) - 2., vec2(0.), 2.)
+  );
+}
+
+vec3 shade(in vec2 p)
+{
+  float sceneId = floor(time / 1e3);
+  p = dotPattern(p);
+  vec3 background = vec3(.5 + sin(time * .05 + p.x * .1) * cos(p.y * .4 + p.x * .2), .2 + sin(time *.1 + p.x * .2) * cos(time * .1 + p.y * .13), .7);
+  vec3 white = vec3(1., 1., 1.);
+  vec3 black = vec3(0., 0., 0.);
+  vec2 s1 = scene1(p);
+  vec2 s2 = scene2(p);
+  float x = warpSpeed / 100.; // .5 + sin(time * .1) * .5
+  vec2 s = mix(s1, s2, x);
+  vec3 col0 = mix(white, black, aa(s.x));
+  vec3 col1 = mix(white, black, aa(s.y));
+  vec3 col = background + col0 - col1;
+
+  return col;
+}
+
+
+void main () {
+  vec2 p0 = coords();
+  float zoom = 7.;
+  vec3 col = shade(p0 * zoom);
+  gl_FragColor = vec4(col, 1.0);
+}
+`
+
+const vert = glsl`
+precision mediump float;
+attribute vec2 position;
+
+void main () {
+  gl_Position = vec4(position, 0, 1.0);
+}
+`
+
+
+
+
+let texture = null;
+
+const glea = new GLea({
+  shaders: [
+    GLea.fragmentShader(frag),
+    GLea.vertexShader(vert)
+  ]
+}).create();
+
+function loop(time) {
+  const { gl } = glea;
+  glea.clear();
+  glea.uni('width', glea.width);
+  glea.uni('height', glea.height);
+  glea.uni('time', time * .005);
+  glea.uni('warpSpeed', parseFloat(warpSpeed.value));
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  requestAnimationFrame(loop);
+}
+
+function setup() {
+  const { gl } = glea;
+  window.addEventListener('resize', () => {
+    glea.resize();
+  });
+  loop(0);
+}
+
+setup();
diff --git a/halftone-circles-try-scrollinganydayshaders-05/src/style.css b/halftone-circles-try-scrollinganydayshaders-05/src/style.css
new file mode 100644
index 0000000..dfbca10
--- /dev/null
+++ b/halftone-circles-try-scrollinganydayshaders-05/src/style.css
@@ -0,0 +1,29 @@
+body {
+  margin: 0;
+  height: 200vh;
+}
+
+/* scrollbar hide hacks */
+body::-webkit-scrollbar { width:0; }
+
+canvas {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+#warpSpeed {
+  display: none;
+  top: 16px;
+  left: 16px;
+  position: fixed;
+  background: transparent;
+  width: 150px;
+  border: 1px solid #fff;
+  color: #fff;
+  font-family: monospace;
+  
+}
\ No newline at end of file
diff --git a/halftone-video-effect/README.markdown b/halftone-video-effect/README.markdown
new file mode 100644
index 0000000..c826d8c
--- /dev/null
+++ b/halftone-video-effect/README.markdown
@@ -0,0 +1,4 @@
+# Halftone video effect
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/Mamboleoo/pen/deXaeY](https://codepen.io/Mamboleoo/pen/deXaeY).
+
+ 
\ No newline at end of file
diff --git a/halftone-video-effect/dist/index.html b/halftone-video-effect/dist/index.html
new file mode 100644
index 0000000..a2d78d1
--- /dev/null
+++ b/halftone-video-effect/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Halftone video effect</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<video src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/loremVideoPOT.mp4?vv" loop muted autoplay crossorigin="anonymous"></video>
+<canvas class="scene"></canvas>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/halftone-video-effect/dist/script.js b/halftone-video-effect/dist/script.js
new file mode 100644
index 0000000..ddeddf1
--- /dev/null
+++ b/halftone-video-effect/dist/script.js
@@ -0,0 +1,125 @@
+console.clear();
+
+const v = document.querySelector('video');
+const canvas = document.querySelector('canvas.scene');
+const ctx = canvas.getContext('2d');
+let width = canvas.offsetWidth;
+let height = canvas.offsetHeight;
+canvas.width = width;
+canvas.height = height;
+
+window.addEventListener('resize', () => {
+  width = canvas.offsetWidth;
+  height = canvas.offsetHeight;
+  fakeSize = Math.min(100,  Math.ceil(window.innerWidth / 12));
+  pRatio = width / fakeSize;
+  canvas.width = width;
+  canvas.height = height;
+  fakeCanvas.width = fakeSize;
+  fakeCanvas.height = fakeSize;
+  videoParameters();
+  createPoints();
+});
+
+const videoParameters = () => {
+  v._opts = {
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0
+  };
+  v._opts.width = width;
+  v._opts.ratio = (width / v.offsetWidth);
+  v._opts.height = v.offsetHeight * v._opts.ratio;
+  v._opts.left = (width - v._opts.width) /2;
+  v._opts.top = (width - v._opts.height) /2;
+};
+
+const fakeCanvas = document.createElement('canvas');
+const fakeCtx = fakeCanvas.getContext('2d');
+let fakeSize = Math.ceil(window.innerWidth / 12);
+let pRatio = width / fakeSize;
+fakeCanvas.width = fakeSize;
+fakeCanvas.height = fakeSize;
+const getPoints = () => {
+  fakeCtx.clearRect(0, 0, fakeSize, fakeSize);
+  fakeCtx.fillStyle = 'white';
+  fakeCtx.fillRect(0, 0, fakeSize, fakeSize);
+  fakeCtx.drawImage(canvas, 0, 0, fakeSize, fakeSize);
+  
+  const canvasData = fakeCtx.getImageData(0, 0, fakeSize, fakeSize).data;
+  
+  for (let x = 0; x < fakeSize; x++) {
+    for (let y = 0; y < fakeSize; y++) {
+      const p = points[x * fakeSize + y];
+      const red = canvasData[(y * fakeSize + x) * 4 + 0] / 255;
+      const green = canvasData[(y * fakeSize + x) * 4 + 1] / 255;
+      const blue = canvasData[(y * fakeSize + x) * 4 + 2] / 255;
+      
+      const gray = (red * 0.2126 + green * 0.7152 + blue * 0.0722);
+      const radius = 1 - gray;
+      p.r += (radius * pRatio - p.r) * 0.1;
+    }
+  }
+};
+
+let points = [];
+const createPoints = () => {
+  points = [];
+  for (let x = 0; x < fakeSize; x++) {
+      for (let y = 0; y < fakeSize; y++) {
+        const point = {
+          x: x * pRatio,
+          y: y * pRatio,
+          r: 0
+        };
+        points.push(point);
+    }
+  }
+}
+
+const render = () => {
+  window.requestAnimationFrame(render);
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.drawImage(v, v._opts.left, v._opts.top, v._opts.width, v._opts.height);
+  getPoints();
+  
+  ctx.clearRect(0, 0, width, height);
+  // Draw the points
+  for (let i = 0; i < points.length; i++) {
+    const p = points[i];
+    if (p.r > 0) {
+      if (i%2 === 0) {
+        ctx.fillRect(p.x - p.r, p.y - p.r, p.r, p.r);
+      } else {
+        ctx.fillRect(p.x - p.r + pRatio *0.5, p.y - p.r, p.r, p.r);
+      }
+    }
+  }
+
+};
+
+videoParameters();
+v.addEventListener('canplay', () => {
+  createPoints();
+  window.requestAnimationFrame(render);
+}, {
+  once: true
+});
+
+// Handle user webcam
+const startWebcam = (stream) => {
+  v.src = window.URL.createObjectURL(stream);
+  v.addEventListener('canplay', () => {
+    videoParameters();
+  }, {
+    once: true
+  });
+}
+navigator.getUserMedia = navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia;
+if (navigator.getUserMedia) {       
+    navigator.getUserMedia({video: true}, startWebcam, (error) => {console.log(error)});
+}
\ No newline at end of file
diff --git a/halftone-video-effect/dist/style.css b/halftone-video-effect/dist/style.css
new file mode 100644
index 0000000..251ac35
--- /dev/null
+++ b/halftone-video-effect/dist/style.css
@@ -0,0 +1,22 @@
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+
+.scene {
+  position: absolute;
+  left: calc(50vw - 48vmin);
+  top: calc(50vh - 48vmin);
+  width: 96vmin;
+  height: 96vmin;
+}
+
+video {
+  position: absolute;
+  opacity: 0.6;
+  bottom: 0;
+  right: 0;
+  visibility: hidden;
+}
diff --git a/halftone-video-effect/license.txt b/halftone-video-effect/license.txt
new file mode 100644
index 0000000..2dd35fe
--- /dev/null
+++ b/halftone-video-effect/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Louis Hoebregts (https://codepen.io/Mamboleoo/pen/deXaeY)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/halftone-video-effect/src/index.html b/halftone-video-effect/src/index.html
new file mode 100644
index 0000000..53fc9ac
--- /dev/null
+++ b/halftone-video-effect/src/index.html
@@ -0,0 +1,2 @@
+<video src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/loremVideoPOT.mp4?vv" loop muted autoplay crossorigin="anonymous"></video>
+<canvas class="scene"></canvas>
\ No newline at end of file
diff --git a/halftone-video-effect/src/script.js b/halftone-video-effect/src/script.js
new file mode 100644
index 0000000..ddeddf1
--- /dev/null
+++ b/halftone-video-effect/src/script.js
@@ -0,0 +1,125 @@
+console.clear();
+
+const v = document.querySelector('video');
+const canvas = document.querySelector('canvas.scene');
+const ctx = canvas.getContext('2d');
+let width = canvas.offsetWidth;
+let height = canvas.offsetHeight;
+canvas.width = width;
+canvas.height = height;
+
+window.addEventListener('resize', () => {
+  width = canvas.offsetWidth;
+  height = canvas.offsetHeight;
+  fakeSize = Math.min(100,  Math.ceil(window.innerWidth / 12));
+  pRatio = width / fakeSize;
+  canvas.width = width;
+  canvas.height = height;
+  fakeCanvas.width = fakeSize;
+  fakeCanvas.height = fakeSize;
+  videoParameters();
+  createPoints();
+});
+
+const videoParameters = () => {
+  v._opts = {
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0
+  };
+  v._opts.width = width;
+  v._opts.ratio = (width / v.offsetWidth);
+  v._opts.height = v.offsetHeight * v._opts.ratio;
+  v._opts.left = (width - v._opts.width) /2;
+  v._opts.top = (width - v._opts.height) /2;
+};
+
+const fakeCanvas = document.createElement('canvas');
+const fakeCtx = fakeCanvas.getContext('2d');
+let fakeSize = Math.ceil(window.innerWidth / 12);
+let pRatio = width / fakeSize;
+fakeCanvas.width = fakeSize;
+fakeCanvas.height = fakeSize;
+const getPoints = () => {
+  fakeCtx.clearRect(0, 0, fakeSize, fakeSize);
+  fakeCtx.fillStyle = 'white';
+  fakeCtx.fillRect(0, 0, fakeSize, fakeSize);
+  fakeCtx.drawImage(canvas, 0, 0, fakeSize, fakeSize);
+  
+  const canvasData = fakeCtx.getImageData(0, 0, fakeSize, fakeSize).data;
+  
+  for (let x = 0; x < fakeSize; x++) {
+    for (let y = 0; y < fakeSize; y++) {
+      const p = points[x * fakeSize + y];
+      const red = canvasData[(y * fakeSize + x) * 4 + 0] / 255;
+      const green = canvasData[(y * fakeSize + x) * 4 + 1] / 255;
+      const blue = canvasData[(y * fakeSize + x) * 4 + 2] / 255;
+      
+      const gray = (red * 0.2126 + green * 0.7152 + blue * 0.0722);
+      const radius = 1 - gray;
+      p.r += (radius * pRatio - p.r) * 0.1;
+    }
+  }
+};
+
+let points = [];
+const createPoints = () => {
+  points = [];
+  for (let x = 0; x < fakeSize; x++) {
+      for (let y = 0; y < fakeSize; y++) {
+        const point = {
+          x: x * pRatio,
+          y: y * pRatio,
+          r: 0
+        };
+        points.push(point);
+    }
+  }
+}
+
+const render = () => {
+  window.requestAnimationFrame(render);
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.drawImage(v, v._opts.left, v._opts.top, v._opts.width, v._opts.height);
+  getPoints();
+  
+  ctx.clearRect(0, 0, width, height);
+  // Draw the points
+  for (let i = 0; i < points.length; i++) {
+    const p = points[i];
+    if (p.r > 0) {
+      if (i%2 === 0) {
+        ctx.fillRect(p.x - p.r, p.y - p.r, p.r, p.r);
+      } else {
+        ctx.fillRect(p.x - p.r + pRatio *0.5, p.y - p.r, p.r, p.r);
+      }
+    }
+  }
+
+};
+
+videoParameters();
+v.addEventListener('canplay', () => {
+  createPoints();
+  window.requestAnimationFrame(render);
+}, {
+  once: true
+});
+
+// Handle user webcam
+const startWebcam = (stream) => {
+  v.src = window.URL.createObjectURL(stream);
+  v.addEventListener('canplay', () => {
+    videoParameters();
+  }, {
+    once: true
+  });
+}
+navigator.getUserMedia = navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia;
+if (navigator.getUserMedia) {       
+    navigator.getUserMedia({video: true}, startWebcam, (error) => {console.log(error)});
+}
\ No newline at end of file
diff --git a/halftone-video-effect/src/style.scss b/halftone-video-effect/src/style.scss
new file mode 100644
index 0000000..910a3e6
--- /dev/null
+++ b/halftone-video-effect/src/style.scss
@@ -0,0 +1,22 @@
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+
+.scene {
+  position: absolute;
+  left: calc(50vw - 48vmin);
+  top: calc(50vh - 48vmin);
+  width: 96vmin;
+  height: 96vmin;
+}
+
+video {
+  position: absolute;
+  opacity: 0.6;
+  bottom: 0;
+  right: 0;
+  visibility: hidden;
+}
\ No newline at end of file
diff --git a/hambuuuuuuuurger/README.markdown b/hambuuuuuuuurger/README.markdown
new file mode 100644
index 0000000..2d0975f
--- /dev/null
+++ b/hambuuuuuuuurger/README.markdown
@@ -0,0 +1,5 @@
+# Hambuuuuuuuurger
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/sparklingman/pen/vYmpQWa](https://codepen.io/sparklingman/pen/vYmpQWa).
+
+
diff --git a/hambuuuuuuuurger/dist/index.html b/hambuuuuuuuurger/dist/index.html
new file mode 100644
index 0000000..5990d4b
--- /dev/null
+++ b/hambuuuuuuuurger/dist/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Hambuuuuuuuurger</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>Hambuuuuuuuurger</h1>
+<div class='burgerGrid'>
+  <div class='burger'>
+    <i>hamburger</i>
+    <span class='bunHead'></span>
+    <span class='salat'></span>
+    <span class='tomato'></span>
+    <span class='cheese'></span>
+    <span class='meat'></span>
+    <span class='bunBottom'></span>
+  </div>
+  <div class='burger'>
+    <i>hamhamham</i>
+    <span class='bunHead'></span>
+    <span class='bunHead'></span>
+    <span class='bunHead'></span>
+  </div>
+  <div class='burger'>
+    <i>burburbur</i>
+    <span class='salat'></span>
+    <span class='tomato'></span>
+    <span class='cheese'></span>
+    <span class='meat'></span>
+    <span class='salat'></span>
+    <span class='tomato'></span>
+    <span class='cheese'></span>
+    <span class='meat'></span>
+    <span class='salat'></span>
+    <span class='tomato'></span>
+    <span class='cheese'></span>
+    <span class='meat'></span>
+  </div>
+  <div class='burger'>
+    <i>gergerger</i>
+    <span class='bunBottom'></span>
+    <span class='bunBottom'></span>
+    <span class='bunBottom'></span>
+  </div>
+  <div class='burger'>
+    <i>hambur</i>
+    <span class='bunHead'></span>
+    <span class='salat'></span>
+    <span class='tomato'></span>
+    <span class='cheese'></span>
+    <span class='meat'></span>
+  </div>
+  <div class='burger'>
+    <i>burgerham</i>
+    <span class='salat'></span>
+    <span class='tomato'></span>
+    <span class='cheese'></span>
+    <span class='meat'></span>
+    <span class='bunBottom'></span>
+    <span class='bunHead'></span>
+  </div>
+  <div class='burger'>
+    <i>hamger</i>
+    <span class='bunHead'></span>
+    <span class='bunBottom'></span>
+  </div>
+  <div class='burger'>
+    <i>gerburger</i>
+    <span class='bunBottom'></span>
+    <span class='salat'></span>
+    <span class='tomato'></span>
+    <span class='cheese'></span>
+    <span class='meat'></span>
+    <span class='bunBottom'></span>
+  </div>
+  <div class='burger'>
+    <i>u</i>
+    <span class='tomato'></span>
+  </div>
+  <div class='burger uuuuuuuu'>
+    <i>uuuuuuuu</i>
+    <span class='tomato'></span>
+    <span class='tomato'></span>
+    <span class='tomato'></span>
+    <span class='tomato'></span>
+    <span class='tomato'></span>
+    <span class='tomato'></span>
+    <span class='tomato'></span>
+    <span class='tomato'></span>
+  </div>
+  <div class='burger'>
+    <i>ur</i>
+    <span class='tomato'></span>
+    <span class='meat'></span>
+  </div>
+  <div class='burger'>
+    <i>geru</i>
+    <span class='bunBottom'></span>
+    <span class='tomato'></span>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/hambuuuuuuuurger/dist/style.css b/hambuuuuuuuurger/dist/style.css
new file mode 100644
index 0000000..d682b9a
--- /dev/null
+++ b/hambuuuuuuuurger/dist/style.css
@@ -0,0 +1,118 @@
+:root {
+    --blue: #00f;
+    --bun: #eba44a;
+    --brown: #4d1c13;
+    --salat: #4ca673;
+    --tomato: #ea5b58;
+    --cheese: #fbe292;
+    --meat: #863330;
+    --mint: #00ff78;
+}
+
+*,
+html,
+body {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    display: grid;
+    grid-template-rows: 80px 1fr;
+    background: var(--blue);
+    font: normal 16px/1 sans-serif;
+    height: 100vh;
+    place-items: center;
+}
+
+h1 {
+    color: var(--cheese);
+}
+
+i {
+    color: var(--mint);
+    font-style: normal;
+    text-transform: capitalize;
+    margin: 0 0 8px;
+}
+
+.burgerGrid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 5vh 10vw;
+    padding: 0 0 40px;
+}
+
+.burger {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    width: 100px;
+}
+
+.burger span {
+    display: block;
+    width: 50px;
+}
+
+.bunHead {
+    background: var(--bun);
+    border: 2px solid var(--brown);
+    border-radius: 13px 13px 3px 3px;
+    height: 14px;
+}
+
+.salat {
+    background: var(--salat);
+    border-radius: 2px;
+    height: 6px;
+}
+
+.salat::after {
+    border-bottom: 6px dotted var(--tomato);
+    content: "";
+    display: block;
+    height: 4px;
+}
+
+.tomato {
+    background: var(--tomato);
+    border-radius: 1px;
+    height: 4px;
+}
+
+.cheese {
+    background: var(--cheese);
+    border-radius: 2px;
+    height: 2px;
+    margin: 0 1px;
+}
+
+.cheese::after {
+    border: 10px solid transparent;
+    border-top-color: var(--cheese);
+    content: "";
+    display: block;
+    height: 0;
+    transform: scaleY(1);
+    width: 0;
+}
+
+.meat {
+    background: var(--meat);
+    border: 2px solid var(--brown);
+    border-radius: 5px;
+    height: 10px;
+}
+
+.bunBottom {
+    background: var(--bun);
+    border: 2px solid var(--brown);
+    border-radius: 3px 3px 9px 9px;
+    height: 12px;
+}
+
+.uuuuuuuu {
+    gap: 1px;
+}
\ No newline at end of file
diff --git a/hambuuuuuuuurger/license.txt b/hambuuuuuuuurger/license.txt
new file mode 100644
index 0000000..7111f13
--- /dev/null
+++ b/hambuuuuuuuurger/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Sparklingman (https://codepen.io/sparklingman/pen/vYmpQWa)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/hambuuuuuuuurger/src/index.haml b/hambuuuuuuuurger/src/index.haml
new file mode 100644
index 0000000..89f225b
--- /dev/null
+++ b/hambuuuuuuuurger/src/index.haml
@@ -0,0 +1,82 @@
+%h1 Hambuuuuuuuurger
+.burgerGrid
+    .burger
+        %i hamburger
+        %span.bunHead
+        %span.salat
+        %span.tomato
+        %span.cheese
+        %span.meat
+        %span.bunBottom
+    .burger
+        %i hamhamham
+        %span.bunHead
+        %span.bunHead
+        %span.bunHead
+    .burger
+        %i burburbur
+        %span.salat
+        %span.tomato
+        %span.cheese
+        %span.meat
+        %span.salat
+        %span.tomato
+        %span.cheese
+        %span.meat
+        %span.salat
+        %span.tomato
+        %span.cheese
+        %span.meat
+    .burger  
+        %i gergerger  
+        %span.bunBottom
+        %span.bunBottom
+        %span.bunBottom
+    .burger
+        %i hambur
+        %span.bunHead
+        %span.salat
+        %span.tomato
+        %span.cheese
+        %span.meat
+    .burger 
+        %i burgerham
+        %span.salat
+        %span.tomato
+        %span.cheese
+        %span.meat
+        %span.bunBottom
+        %span.bunHead
+    .burger 
+        %i hamger 
+        %span.bunHead
+        %span.bunBottom
+    .burger 
+        %i gerburger
+        %span.bunBottom
+        %span.salat
+        %span.tomato
+        %span.cheese
+        %span.meat
+        %span.bunBottom
+    .burger
+        %i u
+        %span.tomato
+    .burger.uuuuuuuu
+        %i uuuuuuuu
+        %span.tomato
+        %span.tomato
+        %span.tomato
+        %span.tomato
+        %span.tomato
+        %span.tomato
+        %span.tomato
+        %span.tomato
+    .burger
+        %i ur
+        %span.tomato
+        %span.meat
+    .burger 
+        %i geru
+        %span.bunBottom
+        %span.tomato
\ No newline at end of file
diff --git a/hambuuuuuuuurger/src/style.css b/hambuuuuuuuurger/src/style.css
new file mode 100644
index 0000000..d682b9a
--- /dev/null
+++ b/hambuuuuuuuurger/src/style.css
@@ -0,0 +1,118 @@
+:root {
+    --blue: #00f;
+    --bun: #eba44a;
+    --brown: #4d1c13;
+    --salat: #4ca673;
+    --tomato: #ea5b58;
+    --cheese: #fbe292;
+    --meat: #863330;
+    --mint: #00ff78;
+}
+
+*,
+html,
+body {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    display: grid;
+    grid-template-rows: 80px 1fr;
+    background: var(--blue);
+    font: normal 16px/1 sans-serif;
+    height: 100vh;
+    place-items: center;
+}
+
+h1 {
+    color: var(--cheese);
+}
+
+i {
+    color: var(--mint);
+    font-style: normal;
+    text-transform: capitalize;
+    margin: 0 0 8px;
+}
+
+.burgerGrid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 5vh 10vw;
+    padding: 0 0 40px;
+}
+
+.burger {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    width: 100px;
+}
+
+.burger span {
+    display: block;
+    width: 50px;
+}
+
+.bunHead {
+    background: var(--bun);
+    border: 2px solid var(--brown);
+    border-radius: 13px 13px 3px 3px;
+    height: 14px;
+}
+
+.salat {
+    background: var(--salat);
+    border-radius: 2px;
+    height: 6px;
+}
+
+.salat::after {
+    border-bottom: 6px dotted var(--tomato);
+    content: "";
+    display: block;
+    height: 4px;
+}
+
+.tomato {
+    background: var(--tomato);
+    border-radius: 1px;
+    height: 4px;
+}
+
+.cheese {
+    background: var(--cheese);
+    border-radius: 2px;
+    height: 2px;
+    margin: 0 1px;
+}
+
+.cheese::after {
+    border: 10px solid transparent;
+    border-top-color: var(--cheese);
+    content: "";
+    display: block;
+    height: 0;
+    transform: scaleY(1);
+    width: 0;
+}
+
+.meat {
+    background: var(--meat);
+    border: 2px solid var(--brown);
+    border-radius: 5px;
+    height: 10px;
+}
+
+.bunBottom {
+    background: var(--bun);
+    border: 2px solid var(--brown);
+    border-radius: 3px 3px 9px 9px;
+    height: 12px;
+}
+
+.uuuuuuuu {
+    gap: 1px;
+}
\ No newline at end of file
diff --git a/happy-new-year/README.markdown b/happy-new-year/README.markdown
new file mode 100644
index 0000000..2bc3242
--- /dev/null
+++ b/happy-new-year/README.markdown
@@ -0,0 +1,5 @@
+# Happy New Year
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/aaroniker/pen/zYKpgGY](https://codepen.io/aaroniker/pen/zYKpgGY).
+
+Firework from this awesome Pen -> https://codepen.io/K-T/details/NjyNQy
diff --git a/happy-new-year/dist/index.html b/happy-new-year/dist/index.html
new file mode 100644
index 0000000..f32acd4
--- /dev/null
+++ b/happy-new-year/dist/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Happy New Year</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="firework"></div>
+
+<div class="task-item">
+    <label class="checkbox">
+        <input value="2020" type="checkbox" />
+        <svg viewBox="0 0 21 18">
+            <symbol id="tick-path" viewBox="0 0 21 18" xmlns="http://www.w3.org/2000/svg">
+                <path d="M5.22003 7.26C5.72003 7.76 7.57 9.7 8.67 11.45C12.2 6.05 15.65 3.5 19.19 1.69" fill="none" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
+            </symbol>
+            <defs>
+                <mask id="tick">
+                    <use class="tick mask" href="#tick-path" />
+                </mask>
+            </defs>
+            <path class="shape" d="M1.08722 4.13374C1.29101 2.53185 2.53185 1.29101 4.13374 1.08722C5.50224 0.913124 7.25112 0.75 9 0.75C10.7489 0.75 12.4978 0.913124 13.8663 1.08722C15.4681 1.29101 16.709 2.53185 16.9128 4.13374C17.0869 5.50224 17.25 7.25112 17.25 9C17.25 10.7489 17.0869 12.4978 16.9128 13.8663C16.709 15.4681 15.4682 16.709 13.8663 16.9128C12.4978 17.0869 10.7489 17.25 9 17.25C7.25112 17.25 5.50224 17.0869 4.13374 16.9128C2.53185 16.709 1.29101 15.4681 1.08722 13.8663C0.913124 12.4978 0.75 10.7489 0.75 9C0.75 7.25112 0.913124 5.50224 1.08722 4.13374Z" />
+            <use class="tick" href="#tick-path" stroke="currentColor" />
+            <path fill="#2C2C31" mask="url(#tick)" d="M4.03909 0.343217C5.42566 0.166822 7.20841 0 9 0C10.7916 0 12.5743 0.166822 13.9609 0.343217C15.902 0.590152 17.4098 2.09804 17.6568 4.03909C17.8332 5.42566 18 7.20841 18 9C18 10.7916 17.8332 12.5743 17.6568 13.9609C17.4098 15.902 15.902 17.4098 13.9609 17.6568C12.5743 17.8332 10.7916 18 9 18C7.20841 18 5.42566 17.8332 4.03909 17.6568C2.09805 17.4098 0.590152 15.902 0.343217 13.9609C0.166822 12.5743 0 10.7916 0 9C0 7.20841 0.166822 5.42566 0.343217 4.03909C0.590151 2.09805 2.09804 0.590152 4.03909 0.343217Z" />
+        </svg>
+        <svg class="lines" viewBox="0 0 11 11">
+            <path d="M5.88086 5.89441L9.53504 4.26746" />
+            <path d="M5.5274 8.78838L9.45391 9.55161" />
+            <path d="M3.49371 4.22065L5.55387 0.79198" />
+        </svg>
+    </label>
+    <div class="text">2020</a></div>
+    <button class="flag">
+        <svg viewBox="0 0 18 18">
+            <path d="M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975" />
+            <path class="fill" d="M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975" />
+        </svg>
+    </button>
+</div>
+
+<div class="task-item">
+    <label class="checkbox">
+        <input value="2021" type="checkbox" />
+        <svg viewBox="0 0 21 18">
+            <symbol id="tick-path-1" viewBox="0 0 21 18" xmlns="http://www.w3.org/2000/svg">
+                <path d="M5.22003 7.26C5.72003 7.76 7.57 9.7 8.67 11.45C12.2 6.05 15.65 3.5 19.19 1.69" fill="none" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
+            </symbol>
+            <defs>
+                <mask id="tick-1">
+                    <use class="tick mask" href="#tick-path-1" />
+                </mask>
+            </defs>
+            <path class="shape" d="M1.08722 4.13374C1.29101 2.53185 2.53185 1.29101 4.13374 1.08722C5.50224 0.913124 7.25112 0.75 9 0.75C10.7489 0.75 12.4978 0.913124 13.8663 1.08722C15.4681 1.29101 16.709 2.53185 16.9128 4.13374C17.0869 5.50224 17.25 7.25112 17.25 9C17.25 10.7489 17.0869 12.4978 16.9128 13.8663C16.709 15.4681 15.4682 16.709 13.8663 16.9128C12.4978 17.0869 10.7489 17.25 9 17.25C7.25112 17.25 5.50224 17.0869 4.13374 16.9128C2.53185 16.709 1.29101 15.4681 1.08722 13.8663C0.913124 12.4978 0.75 10.7489 0.75 9C0.75 7.25112 0.913124 5.50224 1.08722 4.13374Z" />
+            <use class="tick" href="#tick-path-1" stroke="currentColor" />
+            <path fill="#2C2C31" mask="url(#tick-1)" d="M4.03909 0.343217C5.42566 0.166822 7.20841 0 9 0C10.7916 0 12.5743 0.166822 13.9609 0.343217C15.902 0.590152 17.4098 2.09804 17.6568 4.03909C17.8332 5.42566 18 7.20841 18 9C18 10.7916 17.8332 12.5743 17.6568 13.9609C17.4098 15.902 15.902 17.4098 13.9609 17.6568C12.5743 17.8332 10.7916 18 9 18C7.20841 18 5.42566 17.8332 4.03909 17.6568C2.09805 17.4098 0.590152 15.902 0.343217 13.9609C0.166822 12.5743 0 10.7916 0 9C0 7.20841 0.166822 5.42566 0.343217 4.03909C0.590151 2.09805 2.09804 0.590152 4.03909 0.343217Z" />
+        </svg>
+        <svg class="lines" viewBox="0 0 11 11">
+            <path d="M5.88086 5.89441L9.53504 4.26746" />
+            <path d="M5.5274 8.78838L9.45391 9.55161" />
+            <path d="M3.49371 4.22065L5.55387 0.79198" />
+        </svg>
+    </label>
+    <div class="text">2021</div>
+    <button class="flag">
+        <svg viewBox="0 0 18 18">
+            <path d="M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975" />
+            <path class="fill" d="M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975" />
+        </svg>
+    </button>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
+<script src='https://assets.codepen.io/16327/MorphSVGPlugin3.min.js'></script>
+<script src='https://unpkg.com/gsap@3/dist/EasePack.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/happy-new-year/dist/script.js b/happy-new-year/dist/script.js
new file mode 100644
index 0000000..c9a47f2
--- /dev/null
+++ b/happy-new-year/dist/script.js
@@ -0,0 +1,372 @@
+const { to, set, registerPlugin } = gsap;
+
+const checkAudio = new Audio("https://assets.codepen.io/165585/check.mp3");
+const flagAudio = new Audio("https://assets.codepen.io/165585/flag-2.mp3");
+
+registerPlugin(MorphSVGPlugin);
+
+document.querySelectorAll(".task-item").forEach((task) => {
+  let checkbox = task.querySelector(".checkbox"),
+    checkboxInput = checkbox.querySelector("input"),
+    flag = task.querySelector(".flag"),
+    flagPath = flag.querySelectorAll("path"),
+    timer;
+
+  checkboxInput.addEventListener("change", (e) => {
+    clearInterval(timer);
+    if (e.target.value == "2020") {
+      if (!Renderer.initialised) {
+        Renderer.init();
+      }
+      Renderer.toggle();
+    }
+    if (e.target.checked) {
+      checkAudio.play();
+      to(checkbox, {
+        "--checkbox-lines-offset": "4.5px",
+        duration: 0.2,
+        delay: 0.2,
+        clearProps: true,
+      });
+      to(task, {
+        keyframes: [
+          {
+            "--text-line-scale": 1,
+            "--text-x": "2px",
+            duration: 0.15,
+          },
+          {
+            "--text-x": "0px",
+            duration: 0.15,
+            onComplete() {
+              timer = setTimeout(() => task.classList.add("done"), 500);
+            },
+          },
+        ],
+      });
+      return;
+    }
+    to(task, {
+      "--text-line-scale": 0,
+      duration: 0.25,
+      onComplete() {
+        task.classList.remove("done");
+      },
+    });
+  });
+
+  flag.addEventListener("pointerenter", (e) => {
+    flag.animating;
+    if (flag.animating) {
+      return;
+    }
+    to(flag, {
+      keyframes: [
+        {
+          "--flag-rotate": e.offsetX > 21 ? "-4deg" : "4deg",
+          duration: 0.1,
+        },
+        {
+          "--flag-rotate": e.offsetX > 21 ? "4deg" : "-4deg",
+          duration: 0.1,
+        },
+        {
+          "--flag-rotate": "0deg",
+          duration: 0.1,
+        },
+      ],
+    });
+  });
+
+  flag.addEventListener("click", (e) => {
+    if (flag.animating) {
+      return;
+    }
+    flag.animating = true;
+
+    if (flag.classList.contains("active")) {
+      to(flag, {
+        keyframes: [
+          {
+            "--flag-scale-y": 0.9,
+            "--flag-fill-percent": "0%",
+            duration: 0.15,
+          },
+          {
+            "--flag-scale-y": 1,
+            duration: 0.25,
+          },
+        ],
+        onComplete() {
+          flag.classList.remove("active");
+          flag.animating = false;
+        },
+      });
+      return;
+    }
+
+    flagAudio.play();
+
+    to(flagPath, {
+      duration: 1.8,
+      ease: "sine.out",
+      keyframes: new Array(2)
+        .fill([
+          {
+            morphSVG:
+              "M7.66 16.75L2.25 1.99999C8 0.5 9.5 2.54999 14 0.799988C15.5 3.3 16.5 7.00001 16 8C11.5 10 9.5 9.58974 5.03377 9.58974",
+          },
+          {
+            morphSVG:
+              "M7.66 16.75L2.25 2.00001C9.5 4.50001 9 1 14.5 2C16 4.50001 16 8.00002 15.5 9.00001C10 10.5 9.5 9 5.03377 9.58976",
+          },
+          {
+            morphSVG:
+              "M7.66 16.75L2.25 2C7 2.75 9.5 1.50001 14 1.75C15.5 4.25001 16 8.00001 15.5 9C11 9 9.5 10.5 5.03377 9.58975",
+          },
+          {
+            morphSVG:
+              "M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975",
+          },
+        ])
+        .flat(),
+    });
+
+    to(flag, {
+      "--flag-fill-percent": "150%",
+      duration: 0.25,
+      delay: 0.2,
+      clearProps: true,
+      onStart() {
+        set(flag, {
+          "--flag-fill-x": "1.5px",
+          "--flag-fill-y": "1.5px",
+        });
+      },
+      onComplete() {
+        flag.classList.add("active");
+        flag.animating = false;
+      },
+    });
+  });
+});
+
+const fireworkAudio = new Audio(
+  "https://assets.codepen.io/165585/firework.mp3"
+);
+
+const fireworkStartAudio = new Audio(
+  "https://assets.codepen.io/165585/firework-start.mp3"
+);
+
+const Renderer = {
+  initialised: false,
+  play: false,
+  interval: { min: 20, max: 200 },
+  background: "hsla(240, 5%, %luminance%, 1)",
+  init() {
+    this.initialised = true;
+    this.setParameters();
+    this.reconstructMethod();
+    this.render();
+  },
+  toggle() {
+    this.play = !this.play;
+  },
+  setParameters() {
+    this.container = document.querySelector("#firework");
+    this.width = this.container.offsetWidth;
+    this.height = this.container.offsetHeight;
+    this.distance = Math.sqrt(
+      Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2)
+    );
+    this.resolution = window.devicePixelRatio || 1;
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = this.width * this.resolution;
+    this.canvas.height = this.height * this.resolution;
+    this.context = this.canvas.getContext("2d");
+    this.container.appendChild(this.canvas);
+    this.canvas.style.width = this.width + "px";
+    this.canvas.style.height = this.height + "px";
+    this.context.scale(this.resolution, this.resolution);
+
+    this.fireworks = [new Firework(this.width, this.height, this)];
+
+    this.maxFireworkInterval = this.getRandomValue(this.interval) | 0;
+    this.fireworkInterval = this.maxFireworkInterval;
+  },
+  reconstructMethod() {
+    this.render = this.render.bind(this);
+  },
+  getRandomValue(range) {
+    return range.min + (range.max - range.min) * Math.random();
+  },
+  render() {
+    requestAnimationFrame(this.render);
+
+    var maxOpacity = 0,
+      context = this.context;
+
+    for (var i = this.fireworks.length - 1; i >= 0; i--) {
+      maxOpacity = Math.max(maxOpacity, this.fireworks[i].getOpacity());
+    }
+    context.fillStyle = this.background.replace("%luminance", 15 + maxOpacity);
+    context.fillRect(0, 0, this.width, this.height);
+
+    for (var i = this.fireworks.length - 1; i >= 0; i--) {
+      if (!this.fireworks[i].render(context)) {
+        this.fireworks.splice(i, 1);
+      }
+    }
+
+    if(!this.play) {
+      return
+    }
+
+    if (--this.fireworkInterval == 0) {
+      this.fireworks.push(new Firework(this.width, this.height, this));
+      this.maxFireworkInterval = this.getRandomValue(this.interval) | 0;
+      this.fireworkInterval = this.maxFireworkInterval;
+    }
+  },
+};
+
+const Firework = function (width, height, renderer) {
+  this.width = width;
+  this.height = height;
+  this.renderer = renderer;
+  this.init();
+};
+
+Firework.prototype = {
+  color: "hsl(%hue, 84%, 69%)",
+  particleCount: 300,
+  delta: { opacity: 0.01, theta: Math.PI / 10 },
+  radius: 2,
+  velocity: -3,
+  wait: { min: 20, max: 40 },
+  threshold: 50,
+  gravity: 0.002,
+  init() {
+    this.setParameters();
+    this.createParticles();
+  },
+  setParameters() {
+    var hue = (256 * Math.random()) | 0;
+
+    this.x = this.renderer.getRandomValue({
+      min: this.width / 8,
+      max: (this.width * 7) / 8,
+    });
+    this.y = this.renderer.getRandomValue({
+      min: this.height / 4,
+      max: this.height / 2,
+    });
+    this.x0 = this.x;
+    this.y0 = this.height + this.radius;
+    this.color = this.color.replace("%hue", hue);
+    this.status = 0;
+    this.init = 0;
+    this.theta = 0;
+    this.waitCount = this.renderer.getRandomValue(this.wait);
+    this.opacity = 1;
+    this.velocity = this.velocity;
+    this.particles = [];
+  },
+  createParticles() {
+    for (var i = 0, length = this.particleCount; i < length; i++) {
+      this.particles.push(new Particle(this.x, this.y, this.renderer));
+    }
+  },
+  getOpacity() {
+    return this.status == 2 ? this.opacity : 0;
+  },
+  render(context) {
+    switch (this.status) {
+      case 0:
+        context.save();
+        context.fillStyle = this.color;
+        context.globalCompositeOperation = "lighter";
+        context.globalAlpha =
+          this.y0 - this.y <= this.threshold
+            ? (this.y0 - this.y) / this.threshold
+            : 1;
+        context.translate(this.x0 + Math.sin(this.theta) / 2, this.y0);
+        context.scale(0.8, 2.4);
+        context.beginPath();
+        context.arc(0, 0, this.radius, 0, Math.PI * 2, false);
+        context.fill();
+        context.restore();
+
+        this.y0 += this.velocity;
+
+        if (this.y0 <= this.y) {
+          this.status = 1;
+        }
+
+        if(this.init === 0) {
+          this.init = 1
+          fireworkStartAudio.cloneNode(true).play();
+        }
+
+        this.theta += this.delta.theta;
+        this.theta %= Math.PI * 2;
+        this.velocity += this.gravity;
+        return true;
+      case 1:
+        if (--this.waitCount <= 0) {
+          this.status = 2;
+        }
+        return true;
+      case 2:
+        if (this.opacity === 1) {
+          fireworkAudio.cloneNode(true).play();
+        }
+        context.save();
+        context.globalCompositeOperation = "lighter";
+        context.globalAlpha = this.opacity;
+        context.fillStyle = this.color;
+
+        for (var i = 0, length = this.particles.length; i < length; i++) {
+          this.particles[i].render(context, this.opacity);
+        }
+        context.restore();
+        this.opacity -= this.delta.opacity;
+
+        return this.opacity > 0;
+    }
+  },
+};
+
+const Particle = function (x, y, renderer) {
+  this.x = x;
+  this.y = y;
+  this.renderer = renderer;
+  this.init();
+};
+
+Particle.prototype = {
+  radius: 1.5,
+  velocity: { min: 0, max: 3 },
+  gavity: 0.03,
+  friction: 0.98,
+  init() {
+    var radian = Math.PI * 2 * Math.random(),
+      velocity = (1 - Math.pow(Math.random(), 6)) * this.velocity.max,
+      rate = Math.random();
+
+    this.vx = velocity * Math.cos(radian) * rate;
+    this.vy = velocity * Math.sin(radian) * rate;
+  },
+  render(context, opacity) {
+    context.beginPath();
+    context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
+    context.fill();
+
+    this.x += this.vx;
+    this.y += this.vy;
+    this.vy += this.gavity;
+    this.vx *= this.friction;
+    this.vy *= this.friction;
+  },
+};
\ No newline at end of file
diff --git a/happy-new-year/dist/style.css b/happy-new-year/dist/style.css
new file mode 100644
index 0000000..ddeca97
--- /dev/null
+++ b/happy-new-year/dist/style.css
@@ -0,0 +1,221 @@
+#firework {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.task-item {
+  --text-color: #fff;
+  --text-line-scale: 0;
+  --text-x: 0px;
+  --border-default: #7F7F85;
+  --border-hover: #E4E4E7;
+  --checkbox-active: #6E7BF2;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  width: 340px;
+  border-radius: 7px;
+  overflow: hidden;
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+  transition: background 0.15s linear;
+}
+.task-item:not(.done):hover {
+  --blur-x: 372px;
+  --blur-o: 1;
+  background: #2C2C31;
+}
+.task-item:before {
+  content: "";
+  position: absolute;
+  width: 32px;
+  height: 6px;
+  right: 100%;
+  top: -11px;
+  border-radius: 50%;
+  box-shadow: 0px 4px 4px var(--checkbox-active);
+  transform: translateX(var(--blur-x, 0));
+  opacity: var(--blur-o, 0);
+  transition: opacity 0.15s, transform 1.2s;
+}
+.task-item.done {
+  --checkbox-active: #444449;
+  --flag-border: #444449;
+  --text-color: #626268;
+}
+.task-item .text {
+  display: block;
+  letter-spacing: -0.05px;
+  text-decoration: none;
+  color: var(--text-color);
+  position: relative;
+  transform: translateX(var(--text-x)) translateZ(0);
+  transition: color 0.25s;
+}
+.task-item .text:before {
+  content: "";
+  position: absolute;
+  height: 1px;
+  left: -2px;
+  right: -2px;
+  top: 50%;
+  transform-origin: 0 50%;
+  transform: translateY(-50%) scaleX(var(--text-line-scale)) translateZ(0);
+  background: currentColor;
+}
+.task-item .checkbox {
+  --active-tick: #ffffff;
+  --checkbox-lines-offset: 13.5px;
+  display: block;
+  padding: 15px 12px;
+  cursor: pointer;
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+}
+.task-item .checkbox svg {
+  display: block;
+  position: absolute;
+}
+.task-item .checkbox input {
+  display: block;
+  outline: none;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+}
+.task-item .checkbox input + svg {
+  width: 21px;
+  height: 18px;
+  left: 12px;
+  top: 15px;
+  color: var(--checkbox-active);
+  transition: color 0.25s linear;
+}
+.task-item .checkbox input + svg .shape {
+  stroke-width: 1.5px;
+  stroke: var(--border, var(--border-default));
+  fill: var(--background, none);
+  transition: fill 0.25s linear, stroke 0.25s linear;
+}
+.task-item .checkbox input + svg .tick {
+  stroke-dasharray: 20;
+  stroke-dashoffset: var(--checkbox-tick-offset, 20px);
+  transition: stroke-dashoffset var(--checkbox-tick-duration, 0.15s) var(--checkbox-tick-easing, ease);
+}
+.task-item .checkbox input + svg .tick.mask {
+  stroke: var(--active-tick);
+}
+.task-item .checkbox input + svg + svg {
+  width: 11px;
+  height: 11px;
+  fill: none;
+  stroke: var(--checkbox-active);
+  stroke-width: 1.25;
+  stroke-linecap: round;
+  top: 9px;
+  right: 2px;
+  stroke-dasharray: 4.5px;
+  stroke-dashoffset: var(--checkbox-lines-offset);
+  pointer-events: none;
+}
+.task-item .checkbox input:checked + svg {
+  --background: var(--checkbox-active);
+  --border: var(--checkbox-active);
+  --checkbox-tick-duration: .2s;
+  --checkbox-tick-easing: cubic-bezier(0, .45, 1, .5);
+  --checkbox-tick-offset: 0;
+}
+.task-item .checkbox:hover input:not(:checked) + svg {
+  --border: var(--border-hover);
+}
+.task-item .flag {
+  --flag-color: #BABAC1;
+  --flag-fill: var(--checkbox-active);
+  --flag-fill-percent: 0%;
+  --flag-scale-x: 1;
+  --flag-scale-y: 1;
+  --flag-rotate: 0deg;
+  --flag-circle-opacity: 0;
+  --flag-circle-scale: 0;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  background: none;
+  padding: 15px 12px;
+  margin: 0 0 0 auto;
+  position: relative;
+}
+.task-item .flag.active {
+  --flag-fill-percent: 150%;
+}
+.task-item .flag svg {
+  display: block;
+  width: 18px;
+  height: 18px;
+  position: relative;
+  z-index: 1;
+  pointer-events: none;
+  fill: none;
+  stroke: var(--flag-border, var(--border, var(--border-default)));
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transform-origin: 7.66px 16.75px;
+  transform: scale(var(--flag-scale-x), var(--flag-scale-y)) rotate(var(--flag-rotate));
+  transition: stroke 0.25s linear;
+}
+.task-item .flag svg .fill {
+  stroke: var(--flag-fill);
+  fill: var(--flag-fill);
+  -webkit-clip-path: circle(var(--flag-fill-percent) at var(--flag-fill-x, 7.66px) var(--flag-fill-y, 16.75px));
+          clip-path: circle(var(--flag-fill-percent) at var(--flag-fill-x, 7.66px) var(--flag-fill-y, 16.75px));
+  transition: fill 0.25s linear, stroke 0.25s linear;
+}
+.task-item .flag:hover {
+  --border: var(--border-hover);
+}
+.task-item .flag:before {
+  content: "";
+  display: block;
+  width: 24px;
+  height: 12px;
+  border-radius: 50%;
+  position: absolute;
+  bottom: 6px;
+  left: 8px;
+  opacity: var(--flag-circle-opacity);
+  background: var(--flag-fill);
+  transform: scale(var(--flag-circle-scale)) translateZ(0);
+}
+
+html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: inherit;
+}
+*:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #242428;
+  padding: 20px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
\ No newline at end of file
diff --git a/happy-new-year/license.txt b/happy-new-year/license.txt
new file mode 100644
index 0000000..4400031
--- /dev/null
+++ b/happy-new-year/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Aaron Iker (https://codepen.io/aaroniker/pen/zYKpgGY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/happy-new-year/src/index.html b/happy-new-year/src/index.html
new file mode 100644
index 0000000..c0ada7a
--- /dev/null
+++ b/happy-new-year/src/index.html
@@ -0,0 +1,63 @@
+<div id="firework"></div>
+
+<div class="task-item">
+    <label class="checkbox">
+        <input value="2020" type="checkbox" />
+        <svg viewBox="0 0 21 18">
+            <symbol id="tick-path" viewBox="0 0 21 18" xmlns="http://www.w3.org/2000/svg">
+                <path d="M5.22003 7.26C5.72003 7.76 7.57 9.7 8.67 11.45C12.2 6.05 15.65 3.5 19.19 1.69" fill="none" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
+            </symbol>
+            <defs>
+                <mask id="tick">
+                    <use class="tick mask" href="#tick-path" />
+                </mask>
+            </defs>
+            <path class="shape" d="M1.08722 4.13374C1.29101 2.53185 2.53185 1.29101 4.13374 1.08722C5.50224 0.913124 7.25112 0.75 9 0.75C10.7489 0.75 12.4978 0.913124 13.8663 1.08722C15.4681 1.29101 16.709 2.53185 16.9128 4.13374C17.0869 5.50224 17.25 7.25112 17.25 9C17.25 10.7489 17.0869 12.4978 16.9128 13.8663C16.709 15.4681 15.4682 16.709 13.8663 16.9128C12.4978 17.0869 10.7489 17.25 9 17.25C7.25112 17.25 5.50224 17.0869 4.13374 16.9128C2.53185 16.709 1.29101 15.4681 1.08722 13.8663C0.913124 12.4978 0.75 10.7489 0.75 9C0.75 7.25112 0.913124 5.50224 1.08722 4.13374Z" />
+            <use class="tick" href="#tick-path" stroke="currentColor" />
+            <path fill="#2C2C31" mask="url(#tick)" d="M4.03909 0.343217C5.42566 0.166822 7.20841 0 9 0C10.7916 0 12.5743 0.166822 13.9609 0.343217C15.902 0.590152 17.4098 2.09804 17.6568 4.03909C17.8332 5.42566 18 7.20841 18 9C18 10.7916 17.8332 12.5743 17.6568 13.9609C17.4098 15.902 15.902 17.4098 13.9609 17.6568C12.5743 17.8332 10.7916 18 9 18C7.20841 18 5.42566 17.8332 4.03909 17.6568C2.09805 17.4098 0.590152 15.902 0.343217 13.9609C0.166822 12.5743 0 10.7916 0 9C0 7.20841 0.166822 5.42566 0.343217 4.03909C0.590151 2.09805 2.09804 0.590152 4.03909 0.343217Z" />
+        </svg>
+        <svg class="lines" viewBox="0 0 11 11">
+            <path d="M5.88086 5.89441L9.53504 4.26746" />
+            <path d="M5.5274 8.78838L9.45391 9.55161" />
+            <path d="M3.49371 4.22065L5.55387 0.79198" />
+        </svg>
+    </label>
+    <div class="text">2020</a></div>
+    <button class="flag">
+        <svg viewBox="0 0 18 18">
+            <path d="M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975" />
+            <path class="fill" d="M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975" />
+        </svg>
+    </button>
+</div>
+
+<div class="task-item">
+    <label class="checkbox">
+        <input value="2021" type="checkbox" />
+        <svg viewBox="0 0 21 18">
+            <symbol id="tick-path-1" viewBox="0 0 21 18" xmlns="http://www.w3.org/2000/svg">
+                <path d="M5.22003 7.26C5.72003 7.76 7.57 9.7 8.67 11.45C12.2 6.05 15.65 3.5 19.19 1.69" fill="none" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
+            </symbol>
+            <defs>
+                <mask id="tick-1">
+                    <use class="tick mask" href="#tick-path-1" />
+                </mask>
+            </defs>
+            <path class="shape" d="M1.08722 4.13374C1.29101 2.53185 2.53185 1.29101 4.13374 1.08722C5.50224 0.913124 7.25112 0.75 9 0.75C10.7489 0.75 12.4978 0.913124 13.8663 1.08722C15.4681 1.29101 16.709 2.53185 16.9128 4.13374C17.0869 5.50224 17.25 7.25112 17.25 9C17.25 10.7489 17.0869 12.4978 16.9128 13.8663C16.709 15.4681 15.4682 16.709 13.8663 16.9128C12.4978 17.0869 10.7489 17.25 9 17.25C7.25112 17.25 5.50224 17.0869 4.13374 16.9128C2.53185 16.709 1.29101 15.4681 1.08722 13.8663C0.913124 12.4978 0.75 10.7489 0.75 9C0.75 7.25112 0.913124 5.50224 1.08722 4.13374Z" />
+            <use class="tick" href="#tick-path-1" stroke="currentColor" />
+            <path fill="#2C2C31" mask="url(#tick-1)" d="M4.03909 0.343217C5.42566 0.166822 7.20841 0 9 0C10.7916 0 12.5743 0.166822 13.9609 0.343217C15.902 0.590152 17.4098 2.09804 17.6568 4.03909C17.8332 5.42566 18 7.20841 18 9C18 10.7916 17.8332 12.5743 17.6568 13.9609C17.4098 15.902 15.902 17.4098 13.9609 17.6568C12.5743 17.8332 10.7916 18 9 18C7.20841 18 5.42566 17.8332 4.03909 17.6568C2.09805 17.4098 0.590152 15.902 0.343217 13.9609C0.166822 12.5743 0 10.7916 0 9C0 7.20841 0.166822 5.42566 0.343217 4.03909C0.590151 2.09805 2.09804 0.590152 4.03909 0.343217Z" />
+        </svg>
+        <svg class="lines" viewBox="0 0 11 11">
+            <path d="M5.88086 5.89441L9.53504 4.26746" />
+            <path d="M5.5274 8.78838L9.45391 9.55161" />
+            <path d="M3.49371 4.22065L5.55387 0.79198" />
+        </svg>
+    </label>
+    <div class="text">2021</div>
+    <button class="flag">
+        <svg viewBox="0 0 18 18">
+            <path d="M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975" />
+            <path class="fill" d="M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975" />
+        </svg>
+    </button>
+</div>
\ No newline at end of file
diff --git a/happy-new-year/src/script.js b/happy-new-year/src/script.js
new file mode 100644
index 0000000..e66c168
--- /dev/null
+++ b/happy-new-year/src/script.js
@@ -0,0 +1,372 @@
+const { to, set, registerPlugin } = gsap;
+
+const checkAudio = new Audio("https://assets.codepen.io/165585/check.mp3");
+const flagAudio = new Audio("https://assets.codepen.io/165585/flag-2.mp3");
+
+registerPlugin(MorphSVGPlugin);
+
+document.querySelectorAll(".task-item").forEach((task) => {
+  let checkbox = task.querySelector(".checkbox"),
+    checkboxInput = checkbox.querySelector("input"),
+    flag = task.querySelector(".flag"),
+    flagPath = flag.querySelectorAll("path"),
+    timer;
+
+  checkboxInput.addEventListener("change", (e) => {
+    clearInterval(timer);
+    if (e.target.value == "2020") {
+      if (!Renderer.initialised) {
+        Renderer.init();
+      }
+      Renderer.toggle();
+    }
+    if (e.target.checked) {
+      checkAudio.play();
+      to(checkbox, {
+        "--checkbox-lines-offset": "4.5px",
+        duration: 0.2,
+        delay: 0.2,
+        clearProps: true,
+      });
+      to(task, {
+        keyframes: [
+          {
+            "--text-line-scale": 1,
+            "--text-x": "2px",
+            duration: 0.15,
+          },
+          {
+            "--text-x": "0px",
+            duration: 0.15,
+            onComplete() {
+              timer = setTimeout(() => task.classList.add("done"), 500);
+            },
+          },
+        ],
+      });
+      return;
+    }
+    to(task, {
+      "--text-line-scale": 0,
+      duration: 0.25,
+      onComplete() {
+        task.classList.remove("done");
+      },
+    });
+  });
+
+  flag.addEventListener("pointerenter", (e) => {
+    flag.animating;
+    if (flag.animating) {
+      return;
+    }
+    to(flag, {
+      keyframes: [
+        {
+          "--flag-rotate": e.offsetX > 21 ? "-4deg" : "4deg",
+          duration: 0.1,
+        },
+        {
+          "--flag-rotate": e.offsetX > 21 ? "4deg" : "-4deg",
+          duration: 0.1,
+        },
+        {
+          "--flag-rotate": "0deg",
+          duration: 0.1,
+        },
+      ],
+    });
+  });
+
+  flag.addEventListener("click", (e) => {
+    if (flag.animating) {
+      return;
+    }
+    flag.animating = true;
+
+    if (flag.classList.contains("active")) {
+      to(flag, {
+        keyframes: [
+          {
+            "--flag-scale-y": 0.9,
+            "--flag-fill-percent": "0%",
+            duration: 0.15,
+          },
+          {
+            "--flag-scale-y": 1,
+            duration: 0.25,
+          },
+        ],
+        onComplete() {
+          flag.classList.remove("active");
+          flag.animating = false;
+        },
+      });
+      return;
+    }
+
+    flagAudio.play();
+
+    to(flagPath, {
+      duration: 1.8,
+      ease: "sine.out",
+      keyframes: new Array(2)
+        .fill([
+          {
+            morphSVG:
+              "M7.66 16.75L2.25 1.99999C8 0.5 9.5 2.54999 14 0.799988C15.5 3.3 16.5 7.00001 16 8C11.5 10 9.5 9.58974 5.03377 9.58974",
+          },
+          {
+            morphSVG:
+              "M7.66 16.75L2.25 2.00001C9.5 4.50001 9 1 14.5 2C16 4.50001 16 8.00002 15.5 9.00001C10 10.5 9.5 9 5.03377 9.58976",
+          },
+          {
+            morphSVG:
+              "M7.66 16.75L2.25 2C7 2.75 9.5 1.50001 14 1.75C15.5 4.25001 16 8.00001 15.5 9C11 9 9.5 10.5 5.03377 9.58975",
+          },
+          {
+            morphSVG:
+              "M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975",
+          },
+        ])
+        .flat(),
+    });
+
+    to(flag, {
+      "--flag-fill-percent": "150%",
+      duration: 0.25,
+      delay: 0.2,
+      clearProps: true,
+      onStart() {
+        set(flag, {
+          "--flag-fill-x": "1.5px",
+          "--flag-fill-y": "1.5px",
+        });
+      },
+      onComplete() {
+        flag.classList.add("active");
+        flag.animating = false;
+      },
+    });
+  });
+});
+
+const fireworkAudio = new Audio(
+  "https://assets.codepen.io/165585/firework.mp3"
+);
+
+const fireworkStartAudio = new Audio(
+  "https://assets.codepen.io/165585/firework-start.mp3"
+);
+
+const Renderer = {
+  initialised: false,
+  play: false,
+  interval: { min: 20, max: 200 },
+  background: "hsla(240, 5%, %luminance%, 1)",
+  init() {
+    this.initialised = true;
+    this.setParameters();
+    this.reconstructMethod();
+    this.render();
+  },
+  toggle() {
+    this.play = !this.play;
+  },
+  setParameters() {
+    this.container = document.querySelector("#firework");
+    this.width = this.container.offsetWidth;
+    this.height = this.container.offsetHeight;
+    this.distance = Math.sqrt(
+      Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2)
+    );
+    this.resolution = window.devicePixelRatio || 1;
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = this.width * this.resolution;
+    this.canvas.height = this.height * this.resolution;
+    this.context = this.canvas.getContext("2d");
+    this.container.appendChild(this.canvas);
+    this.canvas.style.width = this.width + "px";
+    this.canvas.style.height = this.height + "px";
+    this.context.scale(this.resolution, this.resolution);
+
+    this.fireworks = [new Firework(this.width, this.height, this)];
+
+    this.maxFireworkInterval = this.getRandomValue(this.interval) | 0;
+    this.fireworkInterval = this.maxFireworkInterval;
+  },
+  reconstructMethod() {
+    this.render = this.render.bind(this);
+  },
+  getRandomValue(range) {
+    return range.min + (range.max - range.min) * Math.random();
+  },
+  render() {
+    requestAnimationFrame(this.render);
+
+    var maxOpacity = 0,
+      context = this.context;
+
+    for (var i = this.fireworks.length - 1; i >= 0; i--) {
+      maxOpacity = Math.max(maxOpacity, this.fireworks[i].getOpacity());
+    }
+    context.fillStyle = this.background.replace("%luminance", 15 + maxOpacity);
+    context.fillRect(0, 0, this.width, this.height);
+
+    for (var i = this.fireworks.length - 1; i >= 0; i--) {
+      if (!this.fireworks[i].render(context)) {
+        this.fireworks.splice(i, 1);
+      }
+    }
+
+    if(!this.play) {
+      return
+    }
+
+    if (--this.fireworkInterval == 0) {
+      this.fireworks.push(new Firework(this.width, this.height, this));
+      this.maxFireworkInterval = this.getRandomValue(this.interval) | 0;
+      this.fireworkInterval = this.maxFireworkInterval;
+    }
+  },
+};
+
+const Firework = function (width, height, renderer) {
+  this.width = width;
+  this.height = height;
+  this.renderer = renderer;
+  this.init();
+};
+
+Firework.prototype = {
+  color: "hsl(%hue, 84%, 69%)",
+  particleCount: 300,
+  delta: { opacity: 0.01, theta: Math.PI / 10 },
+  radius: 2,
+  velocity: -3,
+  wait: { min: 20, max: 40 },
+  threshold: 50,
+  gravity: 0.002,
+  init() {
+    this.setParameters();
+    this.createParticles();
+  },
+  setParameters() {
+    var hue = (256 * Math.random()) | 0;
+
+    this.x = this.renderer.getRandomValue({
+      min: this.width / 8,
+      max: (this.width * 7) / 8,
+    });
+    this.y = this.renderer.getRandomValue({
+      min: this.height / 4,
+      max: this.height / 2,
+    });
+    this.x0 = this.x;
+    this.y0 = this.height + this.radius;
+    this.color = this.color.replace("%hue", hue);
+    this.status = 0;
+    this.init = 0;
+    this.theta = 0;
+    this.waitCount = this.renderer.getRandomValue(this.wait);
+    this.opacity = 1;
+    this.velocity = this.velocity;
+    this.particles = [];
+  },
+  createParticles() {
+    for (var i = 0, length = this.particleCount; i < length; i++) {
+      this.particles.push(new Particle(this.x, this.y, this.renderer));
+    }
+  },
+  getOpacity() {
+    return this.status == 2 ? this.opacity : 0;
+  },
+  render(context) {
+    switch (this.status) {
+      case 0:
+        context.save();
+        context.fillStyle = this.color;
+        context.globalCompositeOperation = "lighter";
+        context.globalAlpha =
+          this.y0 - this.y <= this.threshold
+            ? (this.y0 - this.y) / this.threshold
+            : 1;
+        context.translate(this.x0 + Math.sin(this.theta) / 2, this.y0);
+        context.scale(0.8, 2.4);
+        context.beginPath();
+        context.arc(0, 0, this.radius, 0, Math.PI * 2, false);
+        context.fill();
+        context.restore();
+
+        this.y0 += this.velocity;
+
+        if (this.y0 <= this.y) {
+          this.status = 1;
+        }
+
+        if(this.init === 0) {
+          this.init = 1
+          fireworkStartAudio.cloneNode(true).play();
+        }
+
+        this.theta += this.delta.theta;
+        this.theta %= Math.PI * 2;
+        this.velocity += this.gravity;
+        return true;
+      case 1:
+        if (--this.waitCount <= 0) {
+          this.status = 2;
+        }
+        return true;
+      case 2:
+        if (this.opacity === 1) {
+          fireworkAudio.cloneNode(true).play();
+        }
+        context.save();
+        context.globalCompositeOperation = "lighter";
+        context.globalAlpha = this.opacity;
+        context.fillStyle = this.color;
+
+        for (var i = 0, length = this.particles.length; i < length; i++) {
+          this.particles[i].render(context, this.opacity);
+        }
+        context.restore();
+        this.opacity -= this.delta.opacity;
+
+        return this.opacity > 0;
+    }
+  },
+};
+
+const Particle = function (x, y, renderer) {
+  this.x = x;
+  this.y = y;
+  this.renderer = renderer;
+  this.init();
+};
+
+Particle.prototype = {
+  radius: 1.5,
+  velocity: { min: 0, max: 3 },
+  gavity: 0.03,
+  friction: 0.98,
+  init() {
+    var radian = Math.PI * 2 * Math.random(),
+      velocity = (1 - Math.pow(Math.random(), 6)) * this.velocity.max,
+      rate = Math.random();
+
+    this.vx = velocity * Math.cos(radian) * rate;
+    this.vy = velocity * Math.sin(radian) * rate;
+  },
+  render(context, opacity) {
+    context.beginPath();
+    context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
+    context.fill();
+
+    this.x += this.vx;
+    this.y += this.vy;
+    this.vy += this.gavity;
+    this.vx *= this.friction;
+    this.vy *= this.friction;
+  },
+};
diff --git a/happy-new-year/src/style.scss b/happy-new-year/src/style.scss
new file mode 100644
index 0000000..749c9cb
--- /dev/null
+++ b/happy-new-year/src/style.scss
@@ -0,0 +1,232 @@
+#firework {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.task-item {
+    --text-color: #fff;
+    --text-line-scale: 0;
+    --text-x: 0px;
+    --border-default: #7F7F85;
+    --border-hover: #E4E4E7;
+    --checkbox-active: #6E7BF2;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    width: 340px;
+    border-radius: 7px;
+    overflow: hidden;
+    -webkit-mask-image: -webkit-radial-gradient(white, black);
+    transition: background .15s linear;
+    &:not(.done) {
+        &:hover {
+            --blur-x: 372px;
+            --blur-o: 1;
+            background: #2C2C31;
+        }
+    }
+    &:before {
+        content: '';
+        position: absolute;
+        width: 32px;
+        height: 6px;
+        right: 100%;
+        top: -11px;
+        border-radius: 50%;
+        box-shadow: 0px 4px 4px var(--checkbox-active);
+        transform: translateX(var(--blur-x, 0));
+        opacity: var(--blur-o, 0);
+        transition: opacity .15s, transform 1.2s;
+    }
+    &.done {
+        --checkbox-active: #444449;
+        --flag-border: #444449;
+        --text-color: #626268;
+    }
+    .text {
+        display: block;
+        letter-spacing: -.05px;
+        text-decoration: none;
+        color: var(--text-color);
+        position: relative;
+        transform: translateX(var(--text-x)) translateZ(0);
+        transition: color .25s;
+        &:before {
+            content: '';
+            position: absolute;
+            height: 1px;
+            left: -2px;
+            right: -2px;
+            top: 50%;
+            transform-origin: 0 50%;
+            transform: translateY(-50%) scaleX(var(--text-line-scale)) translateZ(0);
+            background: currentColor;
+        }
+    }
+    .checkbox {
+        --active-tick: #ffffff;
+        --checkbox-lines-offset: 13.5px;
+        display: block;
+        padding: 15px 12px;
+        cursor: pointer;
+        position: relative;
+        -webkit-tap-highlight-color: transparent;
+        svg {
+            display: block;
+            position: absolute;
+        }
+        input {
+            display: block;
+            outline: none;
+            border: none;
+            background: none;
+            padding: 0;
+            margin: 0;
+            -webkit-appearance: none;
+            width: 18px;
+            height: 18px;
+            & + svg {
+                width: 21px;
+                height: 18px;
+                left: 12px;
+                top: 15px;
+                color: var(--checkbox-active);
+                transition: color .25s linear;
+                .shape {
+                    stroke-width: 1.5px;
+                    stroke: var(--border, var(--border-default));
+                    fill: var(--background, none);
+                    transition: fill .25s linear, stroke .25s linear;
+                }
+                .tick {
+                    stroke-dasharray: 20;
+                    stroke-dashoffset: var(--checkbox-tick-offset, 20px);
+                    transition: stroke-dashoffset var(--checkbox-tick-duration, .15s) var(--checkbox-tick-easing, ease);
+                    &.mask {
+                        stroke: var(--active-tick);
+                    }
+                }
+                & + svg {
+                    width: 11px;
+                    height: 11px;
+                    fill: none;
+                    stroke: var(--checkbox-active);
+                    stroke-width: 1.25;
+                    stroke-linecap: round;
+                    top: 9px;
+                    right: 2px;
+                    stroke-dasharray: 4.5px;
+                    stroke-dashoffset: var(--checkbox-lines-offset);
+                    pointer-events: none;
+                }
+            }
+            &:checked {
+                & + svg {
+                    --background: var(--checkbox-active);
+                    --border: var(--checkbox-active);
+                    --checkbox-tick-duration: .2s;
+                    --checkbox-tick-easing: cubic-bezier(0, .45, 1, .5);
+                    --checkbox-tick-offset: 0;
+                }
+            }
+        }
+        &:hover {
+            input {
+                &:not(:checked) {
+                    & + svg {
+                        --border: var(--border-hover);
+                    }
+                }
+            }
+        }
+    }
+    .flag {
+        --flag-color: #BABAC1;
+        --flag-fill: var(--checkbox-active);
+        --flag-fill-percent: 0%;
+        --flag-scale-x: 1;
+        --flag-scale-y: 1;
+        --flag-rotate: 0deg;
+        --flag-circle-opacity: 0;
+        --flag-circle-scale: 0;
+        -webkit-appearance: none;
+        -webkit-tap-highlight-color: transparent;
+        cursor: pointer;
+        outline: none;
+        border: none;
+        background: none;
+        padding: 15px 12px;
+        margin: 0 0 0 auto;
+        position: relative;
+        &.active {
+            --flag-fill-percent: 150%;
+        }
+        svg {
+            display: block;
+            width: 18px;
+            height: 18px;
+            position: relative;
+            z-index: 1;
+            pointer-events: none;
+            fill: none;
+            stroke: var(--flag-border, var(--border, var(--border-default)));
+            stroke-width: 1.5;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            transform-origin: 7.66px 16.75px;
+            transform: scale(var(--flag-scale-x), var(--flag-scale-y)) rotate(var(--flag-rotate));
+            transition: stroke .25s linear;
+            .fill {
+                stroke: var(--flag-fill);
+                fill: var(--flag-fill);
+                clip-path: circle(var(--flag-fill-percent) at var(--flag-fill-x, 7.66px) var(--flag-fill-y, 16.75px));
+                transition: fill .25s linear, stroke .25s linear;
+            }
+        }
+        &:hover {
+            --border: var(--border-hover);
+        }
+        &:before {
+            content: '';
+            display: block;
+            width: 24px;
+            height: 12px;
+            border-radius: 50%;
+            position: absolute;
+            bottom: 6px;
+            left: 8px;
+            opacity: var(--flag-circle-opacity);
+            background: var(--flag-fill);
+            transform: scale(var(--flag-circle-scale)) translateZ(0);
+        }
+    }
+}
+
+html {
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+}
+
+* {
+    box-sizing: inherit;
+    &:before,
+    &:after {
+        box-sizing: inherit;
+    }
+}
+
+// Center & dribbble
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #242428;
+    padding: 20px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
\ No newline at end of file
diff --git a/headful-of-fire/README.markdown b/headful-of-fire/README.markdown
new file mode 100644
index 0000000..28086e2
--- /dev/null
+++ b/headful-of-fire/README.markdown
@@ -0,0 +1,5 @@
+# Headful of Fire
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/chrisgannon/pen/vYxmexW](https://codepen.io/chrisgannon/pen/vYxmexW).
+
+
diff --git a/headful-of-fire/dist/index.html b/headful-of-fire/dist/index.html
new file mode 100644
index 0000000..104fb24
--- /dev/null
+++ b/headful-of-fire/dist/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Headful of Fire</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg class="mainSVG" 
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600" >
+<defs>
+<filter id="glow" y="-50%" height="180%" color-interpolation-filters="sRGB" >
+    <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
+    <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+
+</filter>   
+
+</defs>
+  
+<circle   class="bubble" cx="0" cy="0" r="0"/>  
+<path class="face"fill="#000" d="M250.1,477.1c0,0,17.9-37.5,28.3-47.5c8.3-8,10.9-12.4,40.4,0c29.5,12.4,38.1,8.5,45.1,3.1
+	c7-5.4,8.2-19.8,6.9-23.8c-1.3-4.1,3.4-9.3,6.3-9c2.9,0.3,7.7-3.1,8-6.6s0.4-3.2-0.9-8.6c2.8-1,16.2-3.4,9.3-15
+	c-6.8-11.7,3.8-15.1,3.8-15.1s19.2-0.2,19.4-11.7c0.2-11.5-17.1-33.2-17.9-40.6c-0.8-7.4,3.5-18.1,3.5-18.1s15.1-38.8-3.5-75.7
+	c-18.6-36.9-69.1-52-88.2-53.6c-40-3.3-86.6,12.4-103.7,65.3s-4.2,92.3-4.7,108.8c-1.6,56-45.6,91.3-45.6,91.3L250.1,477.1z"/>
+
+</svg>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/headful-of-fire/dist/script.js b/headful-of-fire/dist/script.js
new file mode 100644
index 0000000..ab18819
--- /dev/null
+++ b/headful-of-fire/dist/script.js
@@ -0,0 +1,224 @@
+var select = function(s) {
+      return document.querySelector(s);
+    }, selectAll = function(s) {
+      return document.querySelectorAll(s);
+    }, container = select('.container'),
+		mainSVG = select('.mainSVG'),
+		bubble = select('.bubble')
+
+
+var mainTimeline = gsap.timeline({paused:true});
+
+
+var particleColorArray = ['#CC230C', '#E0550D', '#C8433E', '#FA9417', '#F7A958', '#F4BEA2', '#D57A84'];
+
+var numBubbles = 100;
+
+//behind
+for(var i = 0; i < numBubbles/2; i++){
+
+  var colorId = Math.floor(Math.random()*particleColorArray.length);
+  
+  var p = bubble.cloneNode(true)
+  mainSVG.insertBefore(p, mainSVG.firstChild);
+  var startRadius = gsap.utils.random(2, 32); 
+  TweenMax.set(p, {
+    attr:{
+      cx:gsap.utils.random(200, 300),
+      cy:gsap.utils.random(400, 400),
+      r:0
+    },
+    filter:'url(#glow)',
+    fill:particleColorArray[colorId]
+  })
+  
+  p.startRadius = startRadius;
+  
+var dur = gsap.utils.random(8, 10);
+  var angle = gsap.utils.random(0, 90);
+  var tl = gsap.timeline({repeat:3});
+  
+  tl.to(p, dur/2, {
+    attr:{
+      r:startRadius
+    }
+  })
+  .to(p, dur, {
+  transformOrigin:'30% 50%', 
+    rotation:-180,
+  	opacity:1,
+    attr:{
+      cy:700
+    },
+  physics2D:{
+    velocity:-0, 
+    angle:angle, 
+    acceleration:0, 
+    gravity:-2, 
+    accelerationAngle:0
+  }
+},'-=' + (dur/2))
+  .to(p, dur/2, {
+    attr:{
+      r:0
+    }
+  },'-=' + (dur/2))
+  
+  mainTimeline.add(tl, i/10);  
+
+}
+
+//in front
+for(var i = 0; i < numBubbles; i++){
+
+  var colorId = Math.floor(Math.random()*particleColorArray.length);
+  
+  var p = bubble.cloneNode(true)
+  mainSVG.appendChild(p);
+  var startRadius = gsap.utils.random(1, 20); 
+  TweenMax.set(p, {
+    attr:{
+      cx:gsap.utils.random(250, 350),
+      cy:gsap.utils.random(350, 500),
+      r:0
+    },
+    fill:particleColorArray[colorId]
+  })
+
+ var dur = gsap.utils.random(10, 12);
+  var angle = gsap.utils.random(0, -90);
+  var tl = gsap.timeline({repeat:3});
+  tl.to(p, dur/2, {
+    attr:{
+      r:startRadius
+    }
+  })
+    .to(p, dur , {
+    rotation:280,
+  	opacity:1,
+    attr:{
+      cy:650
+    },
+  physics2D:{
+    velocity:-20, 
+    angle:angle, 
+    acceleration:-2, 
+    gravity:-10, 
+    accelerationAngle:0
+  }
+},'-=' + (dur/2))
+  .to(p, dur/2, {
+    attr:{
+      r:0
+    }
+  },'-=' + (dur/2))
+  
+  mainTimeline.add(tl, i/8);
+
+}
+
+
+//top of head
+for(var i = 0; i < numBubbles; i++){
+
+  var colorId = Math.floor(Math.random()*(particleColorArray.length-1)) + 1;
+  
+  var p = bubble.cloneNode(true)
+  mainSVG.insertBefore(p, mainSVG.firstChild);
+  var startRadius = gsap.utils.random(2, 10); 
+  TweenMax.set(p, {
+    attr:{
+      cx:gsap.utils.random(250, 350),
+      cy:gsap.utils.random(190, 210),
+      r:startRadius
+    },
+    fill:particleColorArray[colorId]
+  })
+    
+var dur = gsap.utils.random(6, 10);
+  var angle = gsap.utils.random(0, 90);
+  
+  var t = TweenMax.fromTo(p, {
+		duration: dur,
+    	opacity:1,
+    	attr:{
+      	r:startRadius
+  		}
+  }, {
+  transformOrigin:'30% 650%', 
+    rotation:-0,
+  	repeat:3,
+  	opacity:1,
+    attr:{
+      r:0,
+      cx:'+=30'
+    },
+  physics2D:{
+    velocity:0, 
+    angle:angle, 
+    acceleration:0, 
+    gravity:-20, 
+    accelerationAngle:90
+  }
+}); 
+  
+  mainTimeline.add(t, i/6);  
+
+}
+
+
+
+
+mainSVG.removeChild(bubble);
+
+
+
+var allTl = gsap.timeline({repeat:-1, yoyo:false, paused:false});
+allTl.timeScale(1.1)
+allTl.to(mainTimeline, {
+	duration: 12,
+  time:mainTimeline.duration(),
+  ease:Linear.easeNone
+  
+})
+/*
+allTl.to(mainTimeline, 20, {
+  time:3,
+  ease:Power2.easeInOut
+  
+})
+.to(mainTimeline, 15, {
+  time:5,
+  ease:Power2.easeInOut
+  
+})
+.to(mainTimeline, 10, {
+  time:7,
+  ease:Power2.easeInOut
+  
+})
+.to(mainTimeline, 20, {
+  time:20,
+  ease:Power2.easeInOut
+  
+})
+.to(mainTimeline, 20, {
+  time:30,
+  ease:Power2.easeInOut
+  
+})
+
+.to(mainTimeline, 20, {
+  time:40,
+  ease:Power2.easeInOut
+  
+})
+
+function updateHue(){
+  
+  TweenMax.set('.colorMatrix', {
+    attr:{
+      values:(allTl.time()/allTl.duration())
+    }
+  })
+}*/
\ No newline at end of file
diff --git a/headful-of-fire/dist/style.css b/headful-of-fire/dist/style.css
new file mode 100644
index 0000000..0de28a8
--- /dev/null
+++ b/headful-of-fire/dist/style.css
@@ -0,0 +1,21 @@
+body{
+  background-color:#000;
+  overflow: visible;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+body, html {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+
+
+.mainSVG{
+  width:80%;
+  height: 80%;
+  overflow: visible;
+}
\ No newline at end of file
diff --git a/headful-of-fire/license.txt b/headful-of-fire/license.txt
new file mode 100644
index 0000000..bf833ea
--- /dev/null
+++ b/headful-of-fire/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Chris Gannon (https://codepen.io/chrisgannon/pen/vYxmexW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/headful-of-fire/src/index.html b/headful-of-fire/src/index.html
new file mode 100644
index 0000000..5a30274
--- /dev/null
+++ b/headful-of-fire/src/index.html
@@ -0,0 +1,23 @@
+
+<svg class="mainSVG" 
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600" >
+<defs>
+<filter id="glow" y="-50%" height="180%" color-interpolation-filters="sRGB" >
+    <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
+    <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+
+</filter>   
+
+</defs>
+  
+<circle   class="bubble" cx="0" cy="0" r="0"/>  
+<path class="face"fill="#000" d="M250.1,477.1c0,0,17.9-37.5,28.3-47.5c8.3-8,10.9-12.4,40.4,0c29.5,12.4,38.1,8.5,45.1,3.1
+	c7-5.4,8.2-19.8,6.9-23.8c-1.3-4.1,3.4-9.3,6.3-9c2.9,0.3,7.7-3.1,8-6.6s0.4-3.2-0.9-8.6c2.8-1,16.2-3.4,9.3-15
+	c-6.8-11.7,3.8-15.1,3.8-15.1s19.2-0.2,19.4-11.7c0.2-11.5-17.1-33.2-17.9-40.6c-0.8-7.4,3.5-18.1,3.5-18.1s15.1-38.8-3.5-75.7
+	c-18.6-36.9-69.1-52-88.2-53.6c-40-3.3-86.6,12.4-103.7,65.3s-4.2,92.3-4.7,108.8c-1.6,56-45.6,91.3-45.6,91.3L250.1,477.1z"/>
+
+</svg>
+
diff --git a/headful-of-fire/src/script.js b/headful-of-fire/src/script.js
new file mode 100644
index 0000000..ab18819
--- /dev/null
+++ b/headful-of-fire/src/script.js
@@ -0,0 +1,224 @@
+var select = function(s) {
+      return document.querySelector(s);
+    }, selectAll = function(s) {
+      return document.querySelectorAll(s);
+    }, container = select('.container'),
+		mainSVG = select('.mainSVG'),
+		bubble = select('.bubble')
+
+
+var mainTimeline = gsap.timeline({paused:true});
+
+
+var particleColorArray = ['#CC230C', '#E0550D', '#C8433E', '#FA9417', '#F7A958', '#F4BEA2', '#D57A84'];
+
+var numBubbles = 100;
+
+//behind
+for(var i = 0; i < numBubbles/2; i++){
+
+  var colorId = Math.floor(Math.random()*particleColorArray.length);
+  
+  var p = bubble.cloneNode(true)
+  mainSVG.insertBefore(p, mainSVG.firstChild);
+  var startRadius = gsap.utils.random(2, 32); 
+  TweenMax.set(p, {
+    attr:{
+      cx:gsap.utils.random(200, 300),
+      cy:gsap.utils.random(400, 400),
+      r:0
+    },
+    filter:'url(#glow)',
+    fill:particleColorArray[colorId]
+  })
+  
+  p.startRadius = startRadius;
+  
+var dur = gsap.utils.random(8, 10);
+  var angle = gsap.utils.random(0, 90);
+  var tl = gsap.timeline({repeat:3});
+  
+  tl.to(p, dur/2, {
+    attr:{
+      r:startRadius
+    }
+  })
+  .to(p, dur, {
+  transformOrigin:'30% 50%', 
+    rotation:-180,
+  	opacity:1,
+    attr:{
+      cy:700
+    },
+  physics2D:{
+    velocity:-0, 
+    angle:angle, 
+    acceleration:0, 
+    gravity:-2, 
+    accelerationAngle:0
+  }
+},'-=' + (dur/2))
+  .to(p, dur/2, {
+    attr:{
+      r:0
+    }
+  },'-=' + (dur/2))
+  
+  mainTimeline.add(tl, i/10);  
+
+}
+
+//in front
+for(var i = 0; i < numBubbles; i++){
+
+  var colorId = Math.floor(Math.random()*particleColorArray.length);
+  
+  var p = bubble.cloneNode(true)
+  mainSVG.appendChild(p);
+  var startRadius = gsap.utils.random(1, 20); 
+  TweenMax.set(p, {
+    attr:{
+      cx:gsap.utils.random(250, 350),
+      cy:gsap.utils.random(350, 500),
+      r:0
+    },
+    fill:particleColorArray[colorId]
+  })
+
+ var dur = gsap.utils.random(10, 12);
+  var angle = gsap.utils.random(0, -90);
+  var tl = gsap.timeline({repeat:3});
+  tl.to(p, dur/2, {
+    attr:{
+      r:startRadius
+    }
+  })
+    .to(p, dur , {
+    rotation:280,
+  	opacity:1,
+    attr:{
+      cy:650
+    },
+  physics2D:{
+    velocity:-20, 
+    angle:angle, 
+    acceleration:-2, 
+    gravity:-10, 
+    accelerationAngle:0
+  }
+},'-=' + (dur/2))
+  .to(p, dur/2, {
+    attr:{
+      r:0
+    }
+  },'-=' + (dur/2))
+  
+  mainTimeline.add(tl, i/8);
+
+}
+
+
+//top of head
+for(var i = 0; i < numBubbles; i++){
+
+  var colorId = Math.floor(Math.random()*(particleColorArray.length-1)) + 1;
+  
+  var p = bubble.cloneNode(true)
+  mainSVG.insertBefore(p, mainSVG.firstChild);
+  var startRadius = gsap.utils.random(2, 10); 
+  TweenMax.set(p, {
+    attr:{
+      cx:gsap.utils.random(250, 350),
+      cy:gsap.utils.random(190, 210),
+      r:startRadius
+    },
+    fill:particleColorArray[colorId]
+  })
+    
+var dur = gsap.utils.random(6, 10);
+  var angle = gsap.utils.random(0, 90);
+  
+  var t = TweenMax.fromTo(p, {
+		duration: dur,
+    	opacity:1,
+    	attr:{
+      	r:startRadius
+  		}
+  }, {
+  transformOrigin:'30% 650%', 
+    rotation:-0,
+  	repeat:3,
+  	opacity:1,
+    attr:{
+      r:0,
+      cx:'+=30'
+    },
+  physics2D:{
+    velocity:0, 
+    angle:angle, 
+    acceleration:0, 
+    gravity:-20, 
+    accelerationAngle:90
+  }
+}); 
+  
+  mainTimeline.add(t, i/6);  
+
+}
+
+
+
+
+mainSVG.removeChild(bubble);
+
+
+
+var allTl = gsap.timeline({repeat:-1, yoyo:false, paused:false});
+allTl.timeScale(1.1)
+allTl.to(mainTimeline, {
+	duration: 12,
+  time:mainTimeline.duration(),
+  ease:Linear.easeNone
+  
+})
+/*
+allTl.to(mainTimeline, 20, {
+  time:3,
+  ease:Power2.easeInOut
+  
+})
+.to(mainTimeline, 15, {
+  time:5,
+  ease:Power2.easeInOut
+  
+})
+.to(mainTimeline, 10, {
+  time:7,
+  ease:Power2.easeInOut
+  
+})
+.to(mainTimeline, 20, {
+  time:20,
+  ease:Power2.easeInOut
+  
+})
+.to(mainTimeline, 20, {
+  time:30,
+  ease:Power2.easeInOut
+  
+})
+
+.to(mainTimeline, 20, {
+  time:40,
+  ease:Power2.easeInOut
+  
+})
+
+function updateHue(){
+  
+  TweenMax.set('.colorMatrix', {
+    attr:{
+      values:(allTl.time()/allTl.duration())
+    }
+  })
+}*/
\ No newline at end of file
diff --git a/headful-of-fire/src/style.css b/headful-of-fire/src/style.css
new file mode 100644
index 0000000..4c49761
--- /dev/null
+++ b/headful-of-fire/src/style.css
@@ -0,0 +1,22 @@
+body{
+  background-color:#000;
+  overflow: visible;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+body, html {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+
+
+.mainSVG{
+  width:80%;
+  height: 80%;
+  overflow: visible;
+}
+
diff --git a/heart-button/README.markdown b/heart-button/README.markdown
new file mode 100644
index 0000000..a8e9910
--- /dev/null
+++ b/heart-button/README.markdown
@@ -0,0 +1,5 @@
+# Heart Button
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/fireblader/pen/rNjByrR](https://codepen.io/fireblader/pen/rNjByrR).
+
+
diff --git a/heart-button/dist/index.html b/heart-button/dist/index.html
new file mode 100644
index 0000000..c1a59f0
--- /dev/null
+++ b/heart-button/dist/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Heart Button</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<article>
+   <div class="like">
+      <div class="icon">
+         <svg viewBox="0 0 24 24">
+            <path
+                  d="M2.9219 12.4463C1.8489 9.0963 3.1039 4.9313 6.6209 3.7993C8.4709 3.2023 10.7539 3.7003 12.0509 5.4893C13.2739 3.6343 15.6229 3.2063 17.4709 3.7993C20.9869 4.9313 22.2489 9.0963 21.1769 12.4463C19.5069 17.7563 13.6799 20.5223 12.0509 20.5223C10.4229 20.5223 4.6479 17.8183 2.9219 12.4463Z"
+                  />
+         </svg>
+      </div>
+      <div class="shadow"></div>
+      <div class="number">232</div>
+   </div>
+   <div class="content">
+      <h1>PayPal Payment Method</h1>
+      <span>⏱ In Progress</span>
+      <p>
+         We'd like to introduce custom domains to enable white labeling
+         services. The thing that holds us back at the moment is the fact that
+         we currently offer HTTPS on every public dashboard. Customizing your
+         URL would make it an HTTP page.
+      </p>
+      <p>
+         We're currently thinking of an easy way of implementing this HTTPS.
+      </p>
+   </div>
+</article>
+
+<article>
+   <div class="like active">
+      <div class="icon">
+         <svg viewBox="0 0 24 24">
+            <path
+                  d="M2.9219 12.4463C1.8489 9.0963 3.1039 4.9313 6.6209 3.7993C8.4709 3.2023 10.7539 3.7003 12.0509 5.4893C13.2739 3.6343 15.6229 3.2063 17.4709 3.7993C20.9869 4.9313 22.2489 9.0963 21.1769 12.4463C19.5069 17.7563 13.6799 20.5223 12.0509 20.5223C10.4229 20.5223 4.6479 17.8183 2.9219 12.4463Z"
+                  />
+         </svg>
+      </div>
+      <div class="shadow"></div>
+      <div class="number">420</div>
+   </div>
+   <div class="content">
+      <h1>Language Switch</h1>
+      <span>✨ New </span>
+      <p>
+         Currently we auto detect the browser language and set the language of
+         the public dashboard this way. It might be that the user has an
+         English browser but actually prefers reading the content in German.
+      </p>
+   </div>
+</article>
+
+<div class="socials">
+   <a class="twitter" href="https://twitter.com/slawejaskulski" target="_blank">
+      <svg viewBox="0 0 72 72">
+         <path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z">  </path>
+      </svg>
+   </a>
+   <a class="dribbble" href="https://dribbble.com/fireblader" target="_blank">
+      <img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg"/>
+   </a>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/heart-button/dist/script.js b/heart-button/dist/script.js
new file mode 100644
index 0000000..7b1e87b
--- /dev/null
+++ b/heart-button/dist/script.js
@@ -0,0 +1,15 @@
+document.querySelectorAll('.like').forEach((button) => {
+
+   button.addEventListener('click', (e) => {
+      let number = button.children[2].textContent;
+
+      if (!button.classList.contains('active')) {
+         button.classList.add('active');
+         button.children[2].textContent = parseInt(number) + 1;
+      } else {
+         button.classList.remove('active');
+         button.children[2].textContent = parseInt(number) - 1;
+      }
+
+   });
+});
\ No newline at end of file
diff --git a/heart-button/dist/style.css b/heart-button/dist/style.css
new file mode 100644
index 0000000..e178f7d
--- /dev/null
+++ b/heart-button/dist/style.css
@@ -0,0 +1,183 @@
+.like {
+  --color: #000;
+  --background: #fff;
+  --stroke: #6b7280;
+  --border-color: #e5e7eb;
+  --fill: #e5e7eb;
+  --a-color: #10b981;
+  --a-background: #ecfdf5;
+  --a-stroke: #10b981;
+  --a-border-color: #a7f3d0;
+  --a-fill: #a7f3d0;
+  --height: 66px;
+  --width: 66px;
+  --radius: 6px;
+  --duration: 0.3s;
+  --function: cubic-bezier(0, 0.88, 0.46, 1.36);
+  --shadow: rgba(0, 0, 0, 0.05);
+  position: relative;
+  background: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: var(--height);
+  width: var(--width);
+  padding: 0;
+  margin: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.like:hover:before {
+  --b-shadow: 0 0 4px 1px var(--shadow);
+}
+.like:hover .icon {
+  --i-bottom: 3px;
+}
+.like:hover .shadow {
+  --s-opacity: 1;
+}
+.like:active:before {
+  --b-height: calc(var(--height) + 2px);
+  --b-radius: calc(var(--radius) * 5) calc(var(--radius) * 5) var(--radius)
+     var(--radius) / calc(var(--radius) * 1.6) calc(var(--radius) * 1.6)
+     var(--radius) var(--radius);
+}
+.like:active .icon {
+  --i-bottom: 17px;
+}
+.like:active .shadow {
+  --s-width: 20px;
+}
+.like:active .number {
+  --n-top: 2px;
+}
+.like.active:before {
+  --background: var(--a-background);
+  --border: var(--a-border-color);
+}
+.like.active .icon {
+  --fill: var(--a-border-color);
+  --stroke: var(--a-stroke);
+}
+.like.active .number {
+  --color: var(--a-color);
+}
+.like:before {
+  --delay: 50ms;
+  content: "";
+  z-index: -1;
+  position: absolute;
+  bottom: 0;
+  background: var(--background);
+  border: 1px solid var(--border, var(--border-color));
+  height: var(--b-height, calc(100% - 2px));
+  width: var(--b-width, calc(100% - 2px));
+  box-shadow: var(--b-shadow, none);
+  border-radius: var(--b-radius, var(--radius));
+  transition: border-radius var(--duration) var(--function) var(--delay), height var(--duration) var(--function) var(--delay);
+}
+.like .icon {
+  --size: 24px;
+  position: relative;
+  display: flex;
+  bottom: var(--i-bottom, 0);
+  transition: bottom var(--duration) var(--function);
+}
+.like .icon svg {
+  fill: var(--fill);
+  stroke: var(--stroke);
+  width: var(--size);
+  height: var(--size);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.like .shadow {
+  position: absolute;
+  background: var(--shadow);
+  top: calc(var(--height) - 45%);
+  border-radius: 50%;
+  height: 2px;
+  width: var(--s-width, 14px);
+  opacity: var(--s-opacity, 0);
+  filter: blur(1px);
+  transition: width var(--duration) var(--function), opacity var(--duration) var(--function);
+}
+.like .number {
+  color: var(--color);
+  position: relative;
+  font-weight: 500;
+  margin-top: 3px;
+  top: var(--n-top, 0);
+  transition: top var(--duration) var(--function);
+}
+
+article {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 20px;
+  padding: 10px;
+  width: 666px;
+}
+article .content {
+  box-shadow: 0px 1px 0px #e5e7eb;
+}
+article .content h1 {
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 0.4em;
+  line-height: 1.4;
+}
+article .content span {
+  color: #6b7280;
+  font-size: 14px;
+}
+article .content p {
+  margin-top: 0.7em;
+  margin-bottom: 1.25em;
+  color: #4b5563;
+  line-height: 1.4;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+html {
+  block-size: 100%;
+}
+
+body {
+  min-block-size: 100%;
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  display: grid;
+  place-content: center;
+}
+body .socials {
+  position: fixed;
+  display: flex;
+  right: 20px;
+  bottom: 20px;
+}
+body .socials > a {
+  display: block;
+  height: 28px;
+  margin-left: 15px;
+}
+body .socials > a.dribbble img {
+  height: 28px;
+}
+body .socials > a.twitter svg {
+  width: 32px;
+  height: 32px;
+  fill: #1da1f2;
+}
\ No newline at end of file
diff --git a/heart-button/license.txt b/heart-button/license.txt
new file mode 100644
index 0000000..828fb40
--- /dev/null
+++ b/heart-button/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Sławek Jaskulski (https://codepen.io/fireblader/pen/rNjByrR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/heart-button/src/index.html b/heart-button/src/index.html
new file mode 100644
index 0000000..36afae4
--- /dev/null
+++ b/heart-button/src/index.html
@@ -0,0 +1,60 @@
+<article>
+   <div class="like">
+      <div class="icon">
+         <svg viewBox="0 0 24 24">
+            <path
+                  d="M2.9219 12.4463C1.8489 9.0963 3.1039 4.9313 6.6209 3.7993C8.4709 3.2023 10.7539 3.7003 12.0509 5.4893C13.2739 3.6343 15.6229 3.2063 17.4709 3.7993C20.9869 4.9313 22.2489 9.0963 21.1769 12.4463C19.5069 17.7563 13.6799 20.5223 12.0509 20.5223C10.4229 20.5223 4.6479 17.8183 2.9219 12.4463Z"
+                  />
+         </svg>
+      </div>
+      <div class="shadow"></div>
+      <div class="number">232</div>
+   </div>
+   <div class="content">
+      <h1>PayPal Payment Method</h1>
+      <span>⏱ In Progress</span>
+      <p>
+         We'd like to introduce custom domains to enable white labeling
+         services. The thing that holds us back at the moment is the fact that
+         we currently offer HTTPS on every public dashboard. Customizing your
+         URL would make it an HTTP page.
+      </p>
+      <p>
+         We're currently thinking of an easy way of implementing this HTTPS.
+      </p>
+   </div>
+</article>
+
+<article>
+   <div class="like active">
+      <div class="icon">
+         <svg viewBox="0 0 24 24">
+            <path
+                  d="M2.9219 12.4463C1.8489 9.0963 3.1039 4.9313 6.6209 3.7993C8.4709 3.2023 10.7539 3.7003 12.0509 5.4893C13.2739 3.6343 15.6229 3.2063 17.4709 3.7993C20.9869 4.9313 22.2489 9.0963 21.1769 12.4463C19.5069 17.7563 13.6799 20.5223 12.0509 20.5223C10.4229 20.5223 4.6479 17.8183 2.9219 12.4463Z"
+                  />
+         </svg>
+      </div>
+      <div class="shadow"></div>
+      <div class="number">420</div>
+   </div>
+   <div class="content">
+      <h1>Language Switch</h1>
+      <span>✨ New </span>
+      <p>
+         Currently we auto detect the browser language and set the language of
+         the public dashboard this way. It might be that the user has an
+         English browser but actually prefers reading the content in German.
+      </p>
+   </div>
+</article>
+
+<div class="socials">
+   <a class="twitter" href="https://twitter.com/slawejaskulski" target="_blank">
+      <svg viewBox="0 0 72 72">
+         <path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z">  </path>
+      </svg>
+   </a>
+   <a class="dribbble" href="https://dribbble.com/fireblader" target="_blank">
+      <img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg"/>
+   </a>
+</div>
diff --git a/heart-button/src/script.js b/heart-button/src/script.js
new file mode 100644
index 0000000..20fbf29
--- /dev/null
+++ b/heart-button/src/script.js
@@ -0,0 +1,15 @@
+document.querySelectorAll('.like').forEach((button) => {
+
+   button.addEventListener('click', (e) => {
+      let number = button.children[2].textContent;
+
+      if (!button.classList.contains('active')) {
+         button.classList.add('active');
+         button.children[2].textContent = parseInt(number) + 1;
+      } else {
+         button.classList.remove('active');
+         button.children[2].textContent = parseInt(number) - 1;
+      }
+
+   });
+});
diff --git a/heart-button/src/style.scss b/heart-button/src/style.scss
new file mode 100644
index 0000000..8faf1f4
--- /dev/null
+++ b/heart-button/src/style.scss
@@ -0,0 +1,199 @@
+.like {
+   --color: #000;
+   --background: #fff;
+   --stroke: #6b7280;
+   --border-color: #e5e7eb;
+   --fill: #e5e7eb;
+   --a-color: #10b981;
+   --a-background: #ecfdf5;
+   --a-stroke: #10b981;
+   --a-border-color: #a7f3d0;
+   --a-fill: #a7f3d0;
+   --height: 66px;
+   --width: 66px;
+   --radius: 6px;
+   --duration: 0.3s;
+   --function: cubic-bezier(0, 0.88, 0.46, 1.36);
+   --shadow: #{rgba(#000, 0.05)};
+   position: relative;
+   background: none;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   height: var(--height);
+   width: var(--width);
+   padding: 0;
+   margin: 0;
+   user-select: none;
+   outline: none;
+   cursor: pointer;
+   -webkit-appearance: none;
+   -webkit-tap-highlight-color: transparent;
+
+   &:hover {
+      &:before {
+         --b-shadow: 0 0 4px 1px var(--shadow);
+      }
+      .icon {
+         --i-bottom: 3px;
+      }
+      .shadow {
+         --s-opacity: 1;
+      }
+   }
+
+   &:active {
+      &:before {
+         --b-height: calc(var(--height) + 2px);
+         --b-radius: calc(var(--radius) * 5) calc(var(--radius) * 5) var(--radius)
+            var(--radius) / calc(var(--radius) * 1.6) calc(var(--radius) * 1.6)
+            var(--radius) var(--radius);
+      }
+      .icon {
+         --i-bottom: 17px;
+      }
+      .shadow {
+         --s-width: 20px;
+      }
+      .number {
+         --n-top: 2px;
+      }
+   }
+
+   &.active {
+      &:before {
+         --background: var(--a-background);
+         --border: var(--a-border-color);
+      }
+      .icon {
+         --fill: var(--a-border-color);
+         --stroke: var(--a-stroke);
+      }
+      .number {
+         --color: var(--a-color);
+      }
+   }
+
+   &:before {
+      --delay: 50ms;
+      content: "";
+      z-index: -1;
+      position: absolute;
+      bottom: 0;
+      background: var(--background);
+      border: 1px solid var(--border, var(--border-color));
+      height: var(--b-height, calc(100% - 2px));
+      width: var(--b-width, calc(100% - 2px));
+      box-shadow: var(--b-shadow, none);
+      border-radius: var(--b-radius, var(--radius));
+      transition: border-radius var(--duration) var(--function) var(--delay),
+         height var(--duration) var(--function) var(--delay);
+   }
+
+   .icon {
+      --size: 24px;
+      position: relative;
+      display: flex;
+      bottom: var(--i-bottom, 0);
+      transition: bottom var(--duration) var(--function);
+      svg {
+         fill: var(--fill);
+         stroke: var(--stroke);
+         width: var(--size);
+         height: var(--size);
+         stroke-width: 1.5;
+         stroke-linecap: round;
+         stroke-linejoin: round;
+      }
+   }
+
+   .shadow {
+      position: absolute;
+      background: var(--shadow);
+      top: calc(var(--height) - 45%);
+      border-radius: 50%;
+      height: 2px;
+      width: var(--s-width, 14px);
+      opacity: var(--s-opacity, 0);
+      filter: blur(1px);
+      transition: width var(--duration) var(--function),
+         opacity var(--duration) var(--function);
+   }
+
+   .number {
+      color: var(--color);
+      position: relative;
+      font-weight: 500;
+      margin-top: 3px;
+      top: var(--n-top, 0);
+      transition: top var(--duration) var(--function);
+   }
+}
+
+// Article
+article {
+   display: grid;
+   grid-template-columns: auto 1fr;
+   gap: 20px;
+   padding: 10px;
+   width: 666px;
+
+   .content {
+      box-shadow: 0px 1px 0px #e5e7eb;
+      h1 {
+         font-weight: 600;
+         font-size: 20px;
+         margin-bottom: 0.4em;
+         line-height: 1.4;
+      }
+      span {
+         color: #6b7280;
+         font-size: 14px;
+      }
+      p {
+         margin-top: 0.7em;
+         margin-bottom: 1.25em;
+         color: #4b5563;
+         line-height: 1.4;
+      }
+   }
+}
+
+// Centered starter
+* {
+   box-sizing: border-box;
+   margin: 0;
+}
+
+html {
+   block-size: 100%;
+}
+
+body {
+   min-block-size: 100%;
+   font-family: "Inter", sans-serif;
+   font-size: 16px;
+   display: grid;
+   place-content: center;
+   
+   .socials {
+      position: fixed;
+      display: flex;
+      right: 20px;
+      bottom: 20px;
+      > a {
+         display: block;
+         height: 28px;
+         margin-left: 15px;
+         &.dribbble img {
+            height: 28px;
+         }
+         &.twitter svg {
+            width: 32px;
+            height: 32px;
+            fill: #1da1f2;
+         }
+      }
+   }
+}
diff --git a/hearthstone-style-card-hover/README.markdown b/hearthstone-style-card-hover/README.markdown
new file mode 100644
index 0000000..d7e9aa0
--- /dev/null
+++ b/hearthstone-style-card-hover/README.markdown
@@ -0,0 +1,8 @@
+# Hearthstone Style Card Hover
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jackrugile/pen/WZGeGM](https://codepen.io/jackrugile/pen/WZGeGM).
+
+ My take on a HTML/CSS version of card hover effects similar to Hearthstone.
+
+Inspired by [This tweet](https://twitter.com/jonikorpi/status/910538054280019973) by [@jonikorpi](https://twitter.com/jonikorpi) and [this pen](https://codepen.io/shshaw/pen/xXObNv/) by [@shshaw](https://codepen.io/shshaw).
+
+A partial complement to [my other Hearthstone pen](https://codepen.io/jackrugile/pen/zqJdXM).
\ No newline at end of file
diff --git a/hearthstone-style-card-hover/dist/index.html b/hearthstone-style-card-hover/dist/index.html
new file mode 100644
index 0000000..2453341
--- /dev/null
+++ b/hearthstone-style-card-hover/dist/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Hearthstone Style Card Hover</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class='cards'>
+  <div class='card'>
+    <div class='card-face'>
+      <div class='card-label'>1</div>
+    </div>
+  </div>
+  <div class='card'>
+    <div class='card-face'>
+      <div class='card-label'>2</div>
+    </div>
+  </div>
+  <div class='card'>
+    <div class='card-face'>
+      <div class='card-label'>3</div>
+    </div>
+  </div>
+  <div class='card'>
+    <div class='card-face'>
+      <div class='card-label'>4</div>
+    </div>
+  </div>
+  <div class='card'>
+    <div class='card-face'>
+      <div class='card-label'>5</div>
+    </div>
+  </div>
+  <div class='card'>
+    <div class='card-face'>
+      <div class='card-label'>6</div>
+    </div>
+  </div>
+  <div class='card'>
+    <div class='card-face'>
+      <div class='card-label'>7</div>
+    </div>
+  </div>
+  <div class='card'>
+    <div class='card-face'>
+      <div class='card-label'>8</div>
+    </div>
+  </div>
+  <div class='card'>
+    <div class='card-face'>
+      <div class='card-label'>9</div>
+    </div>
+  </div>
+  <div class='card'>
+    <div class='card-face'>
+      <div class='card-label'>10</div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/hearthstone-style-card-hover/dist/style.css b/hearthstone-style-card-hover/dist/style.css
new file mode 100644
index 0000000..53adf85
--- /dev/null
+++ b/hearthstone-style-card-hover/dist/style.css
@@ -0,0 +1,345 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  background: radial-gradient(#333, #111);
+  overflow: hidden;
+}
+
+.cards {
+  bottom: 0;
+  display: flex;
+  height: 150px;
+  padding: 0 50px;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+}
+
+.card {
+  height: 150px;
+  margin: 0 -25px;
+  position: relative;
+  width: 100px;
+}
+.card:after {
+  bottom: 0;
+  content: '';
+  left: -60px;
+  position: absolute;
+  right: -60px;
+  top: 0px;
+  z-index: 10;
+}
+
+.card-face {
+  bottom: 0;
+  content: '';
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: 800ms cubic-bezier(0.19, 1, 0.22, 1) -webkit-transform;
+  transition: 800ms cubic-bezier(0.19, 1, 0.22, 1) transform;
+  transition: 800ms cubic-bezier(0.19, 1, 0.22, 1) transform, 800ms cubic-bezier(0.19, 1, 0.22, 1) -webkit-transform;
+}
+.card-face:after {
+  -webkit-animation: none;
+          animation: none;
+  background: #fff;
+  bottom: 0;
+  content: '';
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.card-label {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+  font-size: 24px;
+  font-weight: bold;
+  letter-spacing: -0.025em;
+  padding: 15px 0 0 15px;
+}
+
+.card:nth-child(1) .card-face {
+  background: linear-gradient(-135deg, #ff9999, #da0b0b);
+  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 153, 153, 0.75);
+  -webkit-transform: translateY(45px) rotate(-28.125deg);
+          transform: translateY(45px) rotate(-28.125deg);
+}
+.card:nth-child(1) .card-face .card-label {
+  color: #db0000;
+  text-shadow: -0.025em 0.025em 0 #ff8080;
+}
+.card:nth-child(1):hover .card-face {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 153, 153, 0.75);
+  -webkit-transform: translateY(-100px) rotate(0deg) scale(2);
+          transform: translateY(-100px) rotate(0deg) scale(2);
+  transition-duration: 0ms;
+  z-index: 5;
+}
+.card:nth-child(1):hover .card-face:after {
+  -webkit-animation: fade 250ms ease-out forwards;
+          animation: fade 250ms ease-out forwards;
+}
+.card:nth-child(1):hover:after {
+  top: -175px;
+}
+
+.card:nth-child(2) .card-face {
+  background: linear-gradient(-135deg, #ff99d6, #da0b87);
+  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 153, 214, 0.75);
+  -webkit-transform: translateY(35px) rotate(-21.875deg);
+          transform: translateY(35px) rotate(-21.875deg);
+}
+.card:nth-child(2) .card-face .card-label {
+  color: #db0084;
+  text-shadow: -0.025em 0.025em 0 #ff80cc;
+}
+.card:nth-child(2):hover .card-face {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 153, 214, 0.75);
+  -webkit-transform: translateY(-100px) rotate(0deg) scale(2);
+          transform: translateY(-100px) rotate(0deg) scale(2);
+  transition-duration: 0ms;
+  z-index: 5;
+}
+.card:nth-child(2):hover .card-face:after {
+  -webkit-animation: fade 250ms ease-out forwards;
+          animation: fade 250ms ease-out forwards;
+}
+.card:nth-child(2):hover:after {
+  top: -175px;
+}
+
+.card:nth-child(3) .card-face {
+  background: linear-gradient(-135deg, #eb99ff, #b10bda);
+  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(235, 153, 255, 0.75);
+  -webkit-transform: translateY(25px) rotate(-15.625deg);
+          transform: translateY(25px) rotate(-15.625deg);
+}
+.card:nth-child(3) .card-face .card-label {
+  color: #af00db;
+  text-shadow: -0.025em 0.025em 0 #e680ff;
+}
+.card:nth-child(3):hover .card-face {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(235, 153, 255, 0.75);
+  -webkit-transform: translateY(-100px) rotate(0deg) scale(2);
+          transform: translateY(-100px) rotate(0deg) scale(2);
+  transition-duration: 0ms;
+  z-index: 5;
+}
+.card:nth-child(3):hover .card-face:after {
+  -webkit-animation: fade 250ms ease-out forwards;
+          animation: fade 250ms ease-out forwards;
+}
+.card:nth-child(3):hover:after {
+  top: -175px;
+}
+
+.card:nth-child(4) .card-face {
+  background: linear-gradient(-135deg, #ad99ff, #350bda);
+  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(173, 153, 255, 0.75);
+  -webkit-transform: translateY(15px) rotate(-9.375deg);
+          transform: translateY(15px) rotate(-9.375deg);
+}
+.card:nth-child(4) .card-face .card-label {
+  color: #2c00db;
+  text-shadow: -0.025em 0.025em 0 #9980ff;
+}
+.card:nth-child(4):hover .card-face {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(173, 153, 255, 0.75);
+  -webkit-transform: translateY(-100px) rotate(0deg) scale(2);
+          transform: translateY(-100px) rotate(0deg) scale(2);
+  transition-duration: 0ms;
+  z-index: 5;
+}
+.card:nth-child(4):hover .card-face:after {
+  -webkit-animation: fade 250ms ease-out forwards;
+          animation: fade 250ms ease-out forwards;
+}
+.card:nth-child(4):hover:after {
+  top: -175px;
+}
+
+.card:nth-child(5) .card-face {
+  background: linear-gradient(-135deg, #99c2ff, #0b5eda);
+  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(153, 194, 255, 0.75);
+  -webkit-transform: translateY(5px) rotate(-3.125deg);
+          transform: translateY(5px) rotate(-3.125deg);
+}
+.card:nth-child(5) .card-face .card-label {
+  color: #0058db;
+  text-shadow: -0.025em 0.025em 0 #80b3ff;
+}
+.card:nth-child(5):hover .card-face {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(153, 194, 255, 0.75);
+  -webkit-transform: translateY(-100px) rotate(0deg) scale(2);
+          transform: translateY(-100px) rotate(0deg) scale(2);
+  transition-duration: 0ms;
+  z-index: 5;
+}
+.card:nth-child(5):hover .card-face:after {
+  -webkit-animation: fade 250ms ease-out forwards;
+          animation: fade 250ms ease-out forwards;
+}
+.card:nth-child(5):hover:after {
+  top: -175px;
+}
+
+.card:nth-child(6) .card-face {
+  background: linear-gradient(-135deg, #99ffff, #0bdada);
+  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(153, 255, 255, 0.75);
+  -webkit-transform: translateY(5px) rotate(3.125deg);
+          transform: translateY(5px) rotate(3.125deg);
+}
+.card:nth-child(6) .card-face .card-label {
+  color: #00dbdb;
+  text-shadow: -0.025em 0.025em 0 #80ffff;
+}
+.card:nth-child(6):hover .card-face {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(153, 255, 255, 0.75);
+  -webkit-transform: translateY(-100px) rotate(0deg) scale(2);
+          transform: translateY(-100px) rotate(0deg) scale(2);
+  transition-duration: 0ms;
+  z-index: 5;
+}
+.card:nth-child(6):hover .card-face:after {
+  -webkit-animation: fade 250ms ease-out forwards;
+          animation: fade 250ms ease-out forwards;
+}
+.card:nth-child(6):hover:after {
+  top: -175px;
+}
+
+.card:nth-child(7) .card-face {
+  background: linear-gradient(-135deg, #99ffc2, #0bda5e);
+  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(153, 255, 194, 0.75);
+  -webkit-transform: translateY(15px) rotate(9.375deg);
+          transform: translateY(15px) rotate(9.375deg);
+}
+.card:nth-child(7) .card-face .card-label {
+  color: #00db58;
+  text-shadow: -0.025em 0.025em 0 #80ffb3;
+}
+.card:nth-child(7):hover .card-face {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(153, 255, 194, 0.75);
+  -webkit-transform: translateY(-100px) rotate(0deg) scale(2);
+          transform: translateY(-100px) rotate(0deg) scale(2);
+  transition-duration: 0ms;
+  z-index: 5;
+}
+.card:nth-child(7):hover .card-face:after {
+  -webkit-animation: fade 250ms ease-out forwards;
+          animation: fade 250ms ease-out forwards;
+}
+.card:nth-child(7):hover:after {
+  top: -175px;
+}
+
+.card:nth-child(8) .card-face {
+  background: linear-gradient(-135deg, #adff99, #35da0b);
+  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(173, 255, 153, 0.75);
+  -webkit-transform: translateY(25px) rotate(15.625deg);
+          transform: translateY(25px) rotate(15.625deg);
+}
+.card:nth-child(8) .card-face .card-label {
+  color: #2cdb00;
+  text-shadow: -0.025em 0.025em 0 #99ff80;
+}
+.card:nth-child(8):hover .card-face {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(173, 255, 153, 0.75);
+  -webkit-transform: translateY(-100px) rotate(0deg) scale(2);
+          transform: translateY(-100px) rotate(0deg) scale(2);
+  transition-duration: 0ms;
+  z-index: 5;
+}
+.card:nth-child(8):hover .card-face:after {
+  -webkit-animation: fade 250ms ease-out forwards;
+          animation: fade 250ms ease-out forwards;
+}
+.card:nth-child(8):hover:after {
+  top: -175px;
+}
+
+.card:nth-child(9) .card-face {
+  background: linear-gradient(-135deg, #ebff99, #b1da0b);
+  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(235, 255, 153, 0.75);
+  -webkit-transform: translateY(35px) rotate(21.875deg);
+          transform: translateY(35px) rotate(21.875deg);
+}
+.card:nth-child(9) .card-face .card-label {
+  color: #afdb00;
+  text-shadow: -0.025em 0.025em 0 #e6ff80;
+}
+.card:nth-child(9):hover .card-face {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(235, 255, 153, 0.75);
+  -webkit-transform: translateY(-100px) rotate(0deg) scale(2);
+          transform: translateY(-100px) rotate(0deg) scale(2);
+  transition-duration: 0ms;
+  z-index: 5;
+}
+.card:nth-child(9):hover .card-face:after {
+  -webkit-animation: fade 250ms ease-out forwards;
+          animation: fade 250ms ease-out forwards;
+}
+.card:nth-child(9):hover:after {
+  top: -175px;
+}
+
+.card:nth-child(10) .card-face {
+  background: linear-gradient(-135deg, #ffd699, #da870b);
+  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 214, 153, 0.75);
+  -webkit-transform: translateY(45px) rotate(28.125deg);
+          transform: translateY(45px) rotate(28.125deg);
+}
+.card:nth-child(10) .card-face .card-label {
+  color: #db8400;
+  text-shadow: -0.025em 0.025em 0 #ffcc80;
+}
+.card:nth-child(10):hover .card-face {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 214, 153, 0.75);
+  -webkit-transform: translateY(-100px) rotate(0deg) scale(2);
+          transform: translateY(-100px) rotate(0deg) scale(2);
+  transition-duration: 0ms;
+  z-index: 5;
+}
+.card:nth-child(10):hover .card-face:after {
+  -webkit-animation: fade 250ms ease-out forwards;
+          animation: fade 250ms ease-out forwards;
+}
+.card:nth-child(10):hover:after {
+  top: -175px;
+}
+
+@-webkit-keyframes fade {
+  0% {
+    opacity: 0.9;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(1.15);
+            transform: scale(1.15);
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0.9;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(1.15);
+            transform: scale(1.15);
+  }
+}
diff --git a/hearthstone-style-card-hover/license.txt b/hearthstone-style-card-hover/license.txt
new file mode 100644
index 0000000..ce52bbf
--- /dev/null
+++ b/hearthstone-style-card-hover/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Jack Rugile (https://codepen.io/jackrugile/pen/WZGeGM)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/hearthstone-style-card-hover/src/index.haml b/hearthstone-style-card-hover/src/index.haml
new file mode 100644
index 0000000..58f1f1c
--- /dev/null
+++ b/hearthstone-style-card-hover/src/index.haml
@@ -0,0 +1,5 @@
+%div{:class => 'cards'}
+  -(1..10).each do |i|
+    %div{:class => 'card'}
+      %div{:class => 'card-face'}
+        %div{:class => 'card-label'} #{i}
\ No newline at end of file
diff --git a/hearthstone-style-card-hover/src/style.scss b/hearthstone-style-card-hover/src/style.scss
new file mode 100644
index 0000000..8ab0299
--- /dev/null
+++ b/hearthstone-style-card-hover/src/style.scss
@@ -0,0 +1,122 @@
+html,
+body {
+  height: 100% ;
+}
+
+body {
+  background: radial-gradient(#333, #111);
+  overflow: hidden;
+}
+
+.cards {
+  bottom: 0;
+  display: flex;
+  height: 150px;
+  padding: 0 50px;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+}
+
+.card {
+  height: 150px;
+  margin: 0 -25px;
+  position: relative;
+  width: 100px;
+  &:after {
+    // uncomment background below to see hit areas
+    //background: rgba(255, 0, 0, 0.15);
+    bottom: 0;
+    content: '';
+    left: -60px;
+    position: absolute;
+    right: -60px;
+    top: 0px;
+    z-index: 10
+  }
+}
+
+.card-face {
+  bottom: 0;
+  content: '';
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: 800ms cubic-bezier(0.19, 1, 0.22, 1) transform;
+  &:after {
+    animation: none;
+    background: #fff;
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+.card-label {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+  font-size: 24px;
+  font-weight: bold;
+  letter-spacing: -0.025em;
+  padding: 15px 0 0 15px;
+}
+
+$total: 10;
+@for $i from 0 through ($total - 1) {
+  $hue: ($i / $total) * -360;
+  $rotationRange: 50;
+  $rotation: ($i - ($total - 1) / 2) / ($total - 2) * $rotationRange;
+  $offsetRange: 80;
+  $offset: abs(($i - ($total - 1) / 2) / ($total - 2) * $offsetRange);
+  .card:nth-child(#{$i + 1}) {
+    .card-face {
+      background: linear-gradient(
+        -135deg, hsla($hue, 100%, 80%, 1),
+        hsla($hue, 90%, 45%, 1)
+      );
+      box-shadow: 
+        -5px 5px 5px hsla(0, 0%, 0%, 0.15),
+        inset 0 0 0 2px hsla($hue, 100%, 80%, 0.75)    
+      ;
+      transform: translateY($offset * 1px) rotate($rotation * 1deg);
+      .card-label {
+        color: hsla($hue, 100%, 43%, 1);
+        text-shadow: -0.025em  0.025em 0 hsla($hue, 100%, 75%, 1);
+      }
+    }
+    &:hover {
+      .card-face {
+        box-shadow: 
+          0 10px 20px hsla(0, 0%, 0%, 0.4),
+          inset 0 0 0 2px hsla($hue, 100%, 80%, 0.75)    
+        ;
+        transform: translateY(-100px) rotate(0deg) scale(2);
+        transition-duration: 0ms;
+        z-index: 5;
+        &:after {
+          animation: fade 250ms ease-out forwards;
+        }
+      }
+      &:after {
+        top: -175px;  
+      }
+    }
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0.9;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.15);
+  }
+}
\ No newline at end of file
diff --git a/hex-arcs-in-relief/README.markdown b/hex-arcs-in-relief/README.markdown
new file mode 100644
index 0000000..1379db5
--- /dev/null
+++ b/hex-arcs-in-relief/README.markdown
@@ -0,0 +1,7 @@
+# Hex arcs in relief
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Dillo/pen/WNQVaYr](https://codepen.io/Dillo/pen/WNQVaYr).
+
+Hexagon based patterns, filled with increasing lightness from side to center, giving an impression of relief.  
+ 
+Click for new pattern.
diff --git a/hex-arcs-in-relief/dist/index.html b/hex-arcs-in-relief/dist/index.html
new file mode 100644
index 0000000..57e2373
--- /dev/null
+++ b/hex-arcs-in-relief/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Hex arcs in relief</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/hex-arcs-in-relief/dist/script.js b/hex-arcs-in-relief/dist/script.js
new file mode 100644
index 0000000..ab8303f
--- /dev/null
+++ b/hex-arcs-in-relief/dist/script.js
@@ -0,0 +1,702 @@
+"use strict";
+window.onload = function() {
+
+  const rayHexMin = 80;
+  const rayHexMax = 160;
+  const amplNoise = 30;
+  const minPerX = 1;
+  const maxPerX = 5;
+  const minPerY = 1;
+  const maxPerY = 5;
+
+  let canv, ctx; // canvas and context
+  let maxx, maxy;
+
+  let grid;
+  let nbx, nby;
+  let rayHex;
+
+  let tbSides;
+
+/* for animation */
+  let events = [];
+
+// shortcuts for Math.…
+
+  const mrandom = Math.random;
+  const mfloor = Math.floor;
+  const mround = Math.round;
+  const mceil = Math.ceil;
+  const mabs = Math.abs;
+  const mmin = Math.min;
+  const mmax = Math.max;
+
+  const mPI = Math.PI;
+  const mPIS2 = Math.PI / 2;
+  const m2PI = Math.PI * 2;
+  const msin = Math.sin;
+  const mcos = Math.cos;
+  const matan2 = Math.atan2;
+
+  const mhypot = Math.hypot;
+  const msqrt = Math.sqrt;
+
+  const rac3   = msqrt(3);
+  const rac3s2 = rac3 / 2;
+  const mPIS3 = Math.PI / 3;
+
+//-----------------------------------------------------------------
+  function alea (min, max) {
+// random number [min..max[ . If no max is provided, [0..min[
+
+    if (typeof max == 'undefined') return min * mrandom();
+    return min + (max - min) * mrandom();
+  }
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+  function intAlea (min, max) {
+// random integer number [min..max[ . If no max is provided, [0..min[
+
+    if (typeof max == 'undefined') {
+      max = min; min = 0;
+    }
+    return mfloor(min + (max - min) * mrandom());
+  } // intAlea
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+function Noise1DOneShot (period, min = 0, max = 1, random) {
+/* returns a 1D single-shot noise generator.
+   the (optional) random function must return a value between 0 and 1
+  the returned function has no parameter, and will return a new number every tiime it is called.
+  If the random function provides reproductible values (and is not used elsewhere), this
+  one will return reproductible values too.
+  period should be > 1. The bigger period is, the smoother output noise is
+*/
+  random = random || Math.random;
+  let currx = random(); // start with random offset
+  let y0 = min + (max - min) * random(); // 'previous' value
+  let y1 = min + (max - min) * random(); // 'next' value
+  let dx = 1 / period;
+
+  return function() {
+    currx += dx;
+    if (currx > 1) {
+      currx -= 1;
+      y0 = y1;
+      y1 = min + (max - min) * random();
+    }
+    let z = (3 - 2 * currx) * currx * currx;
+    return z * y1 + (1 - z) * y0;
+  }
+} // Noise1DOneShot
+
+
+//------------------------------------------------------------------------
+// class Hexagon
+let Hexagon;
+{ // scope for Hexagon
+
+let orgx, orgy;
+
+Hexagon = function (kx, ky) {
+
+  this.kx = kx;
+  this.ky = ky;
+  this.neighbours = [];
+
+  this.orient = intAlea(6);
+
+} // function Hexagon
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/* static method */
+
+Hexagon.dimensions = function () {
+// coordinates of center of hexagon [0][0]
+  orgx = (maxx - rayHex * (1.5 * nbx + 0.5)) / 2  + rayHex; // obvious, no ?
+  orgy = (maxy - (rayHex * rac3 * (nby + 0.5))) / 2 + rayHex * rac3; // yet more obvious
+
+} // Hexagon.dimensions
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.size = function() {
+/* computes screen sizes / positions
+*/
+// centre
+  this.xc = orgx + this.kx * 1.5 * rayHex;
+  this.yc = orgy + this.ky * rayHex * rac3;
+  if (this.kx & 1) this.yc -= rayHex * rac3s2; // odd columns
+
+  this.vertices = [[],[],[],[],[],[]] ;
+
+// x coordinates, from left to right
+  this.vertices[3][0] = this.xc - rayHex;
+  this.vertices[2][0] = this.vertices[4][0] = this.xc - rayHex  / 2;
+  this.vertices[1][0] = this.vertices[5][0] = this.xc + rayHex / 2;
+  this.vertices[0][0] = this.xc + rayHex;
+// y coordinates, from top to bottom
+  this.vertices[4][1] = this.vertices[5][1] = this.yc - rayHex * rac3s2;
+  this.vertices[0][1] = this.vertices[3][1] = this.yc;
+  this.vertices[1][1] = this.vertices[2][1] = this.yc + rayHex * rac3s2;
+// get a 2nd copy of table to avoid many % 6 calculations later
+  this.vertices = this.vertices.concat(this.vertices);
+
+  this.extCenters = [[],[],[],[],[],[]] ;
+  let dxc = rayHex;
+  let dyc = rayHex / rac3;
+  this.rad1 = dyc; // radius fir circles with center in extCenters
+
+  for (let k = 0; k < 6; ++k) {
+    this.extCenters[k][0] = this.xc + dxc * mcos(k * mPIS3) - dyc * msin(k * mPIS3);
+    this.extCenters[k][1] = this.yc + dxc * msin(k * mPIS3) + dyc * mcos(k * mPIS3);
+  }
+// get a 2nd copy of table to avoid many % 6 calculations later
+  this.extCenters = this.extCenters.concat(this.extCenters);
+
+  this.extCentersB = [[],[],[],[],[],[]] ;
+// x coordinates, from left to right
+  this.extCentersB[3][0] = this.xc - 2 * rayHex;
+  this.extCentersB[2][0] = this.extCentersB[4][0] = this.xc - rayHex;
+  this.extCentersB[1][0] = this.extCentersB[5][0] = this.xc + rayHex;
+  this.extCentersB[0][0] = this.xc + 2 * rayHex;
+
+// y coordinates, from top to bottom
+  this.extCentersB[4][1] = this.extCentersB[5][1] = this.yc - rayHex * rac3;
+  this.extCentersB[3][1] = this.extCentersB[0][1] = this.yc;
+  this.extCentersB[2][1] = this.extCentersB[1][1] = this.yc + rayHex * rac3;
+// get a 2nd copy of table to avoid many % 6 calculations later
+  this.extCentersB = this.extCentersB.concat(this.extCentersB);
+
+} // Hexagon.prototype.size
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawHexagon = function(hue) {
+
+  if (! this.vertices) this.size();
+  let ctxGrid = ctx;
+    ctxGrid.beginPath();
+    ctxGrid.moveTo (this.vertices[0][0], this.vertices[0][1]);
+    ctxGrid.lineTo (this.vertices[1][0], this.vertices[1][1]);
+    ctxGrid.lineTo (this.vertices[2][0], this.vertices[2][1]);
+    ctxGrid.lineTo (this.vertices[3][0], this.vertices[3][1]);
+    ctxGrid.lineTo (this.vertices[4][0], this.vertices[4][1]);
+    ctxGrid.lineTo (this.vertices[5][0], this.vertices[5][1]);
+    ctxGrid.lineTo (this.vertices[0][0], this.vertices[0][1]);
+    ctxGrid.strokeStyle = '#8FF';
+    ctxGrid.lineWidth = 0.5;
+    ctxGrid.strokeStyle = `hsl(${hue},100%,60%)`;
+    ctxGrid.stroke();
+} // Hexagon.prototype.drawHexagon
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc1 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R;
+
+  xc = x0 = rayHex * (1 - alpha / 2);
+  y0 = alpha * rayHex * rac3s2;
+  yc = xc / rac3
+  R = rayHex * (1 - 2 * alpha) / rac3;
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert - 3) * mPI / 6,(2 * vert + 5) * mPI / 6 , true);
+
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc6 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R;
+
+  xc = x0 = rayHex * (1 - alpha / 2);
+  y0 = -alpha * rayHex * rac3s2;
+  yc = -xc / rac3
+  R = rayHex * (1 - 2 * alpha) / rac3;
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert + 3) * mPI / 6,(2 * vert - 5) * mPI / 6);
+
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc2 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, angle;
+
+  xc = x0 = rayHex;
+  y0 = 0;
+  yc = ((0.5 + alpha) * (0.5 + alpha) + 0.75) / rac3 * rayHex;
+  R = yc;
+  angle = matan2(rayHex * ( 1/2 + alpha), yc - rayHex * rac3s2);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert - 3) * mPI / 6,(2 * vert - 3) * mPI / 6 - angle , true);
+
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc7 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, angle;
+
+  x0 = rayHex * (0.5 - alpha);
+  y0 = rayHex * rac3s2;
+  xc = rayHex;
+  yc = ((0.5 + alpha) * (0.5 + alpha) + 0.75) / rac3 * rayHex;
+  R = yc;
+  angle = matan2(rayHex * ( 1/2 + alpha), yc - rayHex * rac3s2);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R,(2 * vert - 3) * mPI / 6 - angle , (2 * vert - 3) * mPI / 6);
+
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc3 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, xb, yb, angle;
+
+  xc = x0 = rayHex;
+  y0 = 0;
+  xb = rayHex * (- 1 / 2 - alpha / 2);
+  yb = (1 - alpha) * rac3s2 * rayHex;
+
+  yc = (yb * yb + xb * xb - x0 * x0 + 2 * x0 * xc  - 2 * xb * xc) / 2 / yb;
+  R = yc;
+
+  angle = matan2(rayHex - xb, yc - yb);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert - 3) * mPI / 6,(2 * vert - 3) * mPI / 6 - angle , true);
+
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc8 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, xb, yb, angle;
+
+  x0 = -(1 + alpha) / 2 * rayHex;
+  y0 = (1 - alpha) * rac3s2 * rayHex;
+  xc = rayHex;
+  xb = rayHex * (- 1 / 2 - alpha / 2);
+  yb = (1 - alpha) * rac3s2 * rayHex;
+
+  yc = (yb * yb + xb * xb - rayHex * rayHex + 2 * rayHex * xc  - 2 * xb * xc) / 2 / yb;
+  R = yc;
+
+  angle = matan2(rayHex - xb, yc - yb);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert - 3) * mPI / 6 - angle , (2 * vert - 3) * mPI / 6);
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc4 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, xb, yb, angle;
+
+  xc = x0 = rayHex;
+  y0 = 0;
+  yc = - ((0.5 + alpha) * (0.5 + alpha) + 0.75) / rac3 * rayHex;
+  R = - yc;
+  angle = matan2(rayHex * ( 1/2 + alpha),  R - rayHex * rac3s2);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert + 3) * mPI / 6,(2 * vert + 3) * mPI / 6 + angle);
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc9 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, angle;
+
+  x0 = (0.5 - alpha) * rayHex;
+  y0 = - rayHex * rac3s2;
+  xc = rayHex;
+  yc = - ((0.5 + alpha) * (0.5 + alpha) + 0.75) / rac3 * rayHex;
+  R = - yc;
+  angle = matan2(rayHex * ( 1/2 + alpha),  R - rayHex * rac3s2);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R,(2 * vert + 3) * mPI / 6 + angle, (2 * vert + 3) * mPI / 6, true);
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+Hexagon.prototype.drawArc5 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, xb, yb, angle;
+
+  xc = x0 = rayHex;
+  y0 = 0;
+  xb = rayHex * (- 1 / 2 - alpha / 2);
+  yb = (alpha - 1) * rac3s2 * rayHex;
+
+  yc = (yb * yb + xb * xb - x0 * x0 + 2 * x0 * xc  - 2 * xb * xc) / 2 / yb;
+  R = - yc;
+
+  angle = matan2(rayHex - xb, R + yb);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert + 3) * mPI / 6,(2 * vert + 3) * mPI / 6 + angle);
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+Hexagon.prototype.drawArc10 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, xb, yb, angle;
+
+  x0 = -(1 + alpha) / 2 * rayHex;
+  y0 = -(1 - alpha) * rayHex * rac3s2;
+  xc = rayHex;
+  xb = rayHex * (- 1 / 2 - alpha / 2);
+  yb = (alpha - 1) * rac3s2 * rayHex;
+
+  yc = (yb * yb + xb * xb - rayHex * rayHex + 2 * rayHex * xc  - 2 * xb * xc) / 2 / yb;
+  R = - yc;
+
+  angle = matan2(rayHex - xb, R + yb);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R,(2 * vert + 3) * mPI / 6 + angle, (2 * vert + 3) * mPI / 6, true);
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+/* returns a cell's neighbour
+  keep track of it for future request
+  defines itself as its neighbour's neighbour to reduce calculations
+
+  returns false if no neighbour
+*/
+
+Hexagon.prototype.neighbour = function(side) {
+
+  let neigh = this.neighbours[side];
+  if (neigh instanceof(Hexagon)) return neigh; // known neighbour
+  if (neigh === false) return false; // known for no neighbour
+//  do not know yet
+
+  if (this.kx & 1) {
+    neigh =  {kx: this.kx + [1, 0, -1, -1, 0, 1][side],
+              ky: this.ky + [0, 1, 0, -1, -1, -1][side]};
+  } else {
+    neigh = {kx: this.kx + [1, 0, -1, -1, 0, 1][side],
+             ky: this.ky + [1, 1, 1, 0, -1, 0][side]};
+  }
+  if (neigh.kx < 0 || neigh.ky <0 || neigh.kx >= nbx || neigh.ky >= nby) {
+    this.neighbours[side] = false;
+    return false;
+  }
+  neigh = grid[neigh.ky][neigh.kx];
+  this.neighbours[side] = neigh;
+  neigh.neighbours[(side + 3) % 6] = this;
+  return neigh;
+
+} // Hexagon.prototype.neighbour
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+Hexagon.prototype.drawSide = function(side, alpha, first){
+
+  switch (this.styles[side]) {
+    case 'a' :
+      this.drawArc6((side + 1) % 6, alpha, first);
+      break;
+    case 'b' :
+      this.drawArc7((side + 5) % 6, 1 - alpha, first);
+      this.drawArc2((side + 5) % 6, alpha);
+      break;
+    case 'c' :
+      this.drawArc8((side + 4) % 6, 1 - alpha, first);
+      this.drawArc3((side + 4) % 6, alpha);
+      break;
+    case 'd' :
+      this.drawArc9((side + 2) % 6, alpha, first);
+      this.drawArc4((side + 2) % 6, 1 - alpha);
+      break;
+    case 'e' :
+      this.drawArc10((side + 3) % 6, alpha, first);
+      this.drawArc5((side + 3) % 6, 1 - alpha);
+      break;
+  }
+} // Hexagon.prototype.drawSide
+
+} // scope for Hexagon
+
+//------------------------------------------------------------------------
+function rotate (p, k) {
+
+// turn the given point after a rotation of k / 12 turns (k * PI / 6) around the origin
+  let s = msin (k * mPI / 6);
+  let c = mcos (k * mPI / 6);
+  return [p[0] * c - p[1] * s,
+          p[0] * s + p[1] * c];
+} // rotate
+
+//------------------------------------------------------------------------
+
+function createGrid() {
+/* create the grid of Hexagons
+  but does NOT define the crossings between dots inside an hexagon
+*/
+  let hexa;
+
+  let tbPer = [];
+  let tbKind = [];
+  let perx = intAlea(minPerX, maxPerX + 1);
+  let pery = intAlea(minPerY, maxPerY + 1);
+
+  if (intAlea(3) == 0) { // aperiodic
+    perx = nbx;
+    pery = nby;
+  }
+
+  for (let ky = 0; ky < pery; ++ky) {
+    tbPer[ky] = [];
+    tbKind[ky] = [];
+    for (let kx = 0; kx < perx; ++kx) {
+      tbPer[ky][kx] = intAlea(6); // random orientation
+      tbKind[ky][kx] = intAlea(3);
+    } // for kx
+  } // for ky
+
+  grid = [];
+
+  for (let ky = 0; ky < nby; ++ky) {
+    grid[ky] = []
+    for (let kx = 0; kx < nbx; ++kx) {
+      hexa = new Hexagon(kx, ky);
+      grid[ky][kx] = hexa;
+      grid[ky][kx].orient = tbPer[ky % pery][kx % perx];
+      grid[ky][kx].kind = tbKind[ky % pery][kx % perx];
+    } // for kx
+  } // for ky
+} // createGrid
+
+//------------------------------------------------------------------------
+/* creates a Side and initialize it with a first cell
+in most cases, a second cell will be added later, excepts on the edges of the grid.
+*/
+
+function Side(cell, side, styl) {
+
+  let fdHue;
+  this.cell1 = cell;
+  this.side1 = side;
+
+  this.hue = intAlea(360);
+  this.satur = intAlea(90,100);
+  if (! cell.styles) cell.styles = [];
+  cell.styles[side] = styl;
+  tbSides.push (this);
+}
+
+Side.prototype.addCell = function (cell, side, styl) {
+  this.cell2 = cell;
+  this.side2 = side; // normally useless, but can make things more easy
+  if (! cell.styles) cell.styles = [];
+  cell.styles[side] = styl;
+}
+
+Side.prototype.drawSide = function(alpha) {
+/* alpha in range [0..0.5]
+*/
+
+  ctx.beginPath();
+
+  this.cell1.drawSide(this.side1, alpha, true);
+  if (this.cell2) {
+    this.cell2.drawSide(this.side2, alpha);
+  }
+  ctx.closePath();
+  ctx.strokeStyle = `hsl(${this.hue},${this.satur}%,${20+120*alpha}%)`;
+  ctx.lineWidth = 1;
+  ctx.stroke();
+}
+
+//------------------------------------------------------------------------
+
+function drawAll (alpha) {
+  tbSides.forEach(side => {
+    side.drawSide(alpha);
+  });
+}
+
+//------------------------------------------------------------------------
+
+function createSides() {
+  let cellneigh, side, styl, styleList;
+
+  tbSides = [];
+
+  grid.forEach ((line, ky) => {
+    line.forEach ((cell, kx) => {
+      cell.sides = [];
+      styleList = ['abceda','abcabc', 'edaeda'][cell.kind];
+      for (let kside = 0; kside < 6 ; ++ kside) {
+        styl = styleList [(kside + cell.orient) % 6];
+        cellneigh = cell.neighbour(kside);
+        if (!cellneigh) cell.sides[kside] = new Side(cell, kside, styl);
+        else if (cellneigh.sides && cellneigh.sides [(kside + 3) % 6]) {
+          side = cellneigh.sides [(kside + 3) % 6];
+          side.addCell(cell, kside, styl);
+          cell.sides[kside] = side;
+        } else cell.sides[kside] = new Side(cell, kside, styl);
+      } // for side
+    }); // grid.forEach
+  }); // grid.forEach
+}
+
+//-----------------------------------------------------------------------------
+
+let animate;
+
+{ // scope for animate
+  let animState = 0;
+  let alpha = 0;
+
+  animate = function(tStamp) {
+    let event = events.pop();
+    requestAnimationFrame(animate)
+    if (event) {
+      switch (event.event) {
+        case 'reset' :
+          animState = 0;
+          break;
+      } // switch (event)
+    } // if (event)
+
+    let tinit = performance.now();
+
+    switch (animState) {
+      case 0:
+        if (startOver()) {
+          alpha = 0.499;
+          ++animState;
+        }
+        break;
+
+      case 1:
+        drawAll(alpha);
+        alpha -= 0.5/rayHex;
+        if (alpha <= 0) {
+          ++animState;
+          alpha = 0.001;
+        }
+        break;
+
+      case 2:
+        drawAll(alpha);
+        alpha += 0.5/rayHex;
+        if (alpha >= 0.5) {
+          alpha = 0.499;
+          ++animState;
+        }
+        break;
+
+    } // switch (animState)
+
+  } // animate
+
+} // scope for animate
+
+//-----------------------------------------------------------------
+function startOver() {
+// canvas dimensions
+
+  maxx = window.innerWidth;
+  maxy = window.innerHeight;
+
+  let orgLeft = mmax (((window.innerWidth ) - maxx) / 2, 0);
+  let orgTop = mmax (((window.innerHeight ) - maxy) / 2, 0);
+
+  canv.style.left = orgLeft + 'px';
+  canv.style.top = orgTop + 'px';
+
+  if (maxx != canv.width) canv.width = maxx;
+  if (maxy != canv.height) canv.height = maxy;
+
+  canv.width = maxx;
+  canv.height = maxy;
+  ctx.lineCap = 'round';   // placed here because reset when canvas resized
+  ctx.lineJoin = 'round';
+
+// number of columns / rows
+// computed to have (0,0) in top leftmost corner
+// and for all hexagons to be fully contained in canvas
+
+  rayHex = alea(rayHexMin, rayHexMax);
+
+  nbx = mfloor(((maxx / rayHex) - 0.5) / 1.5);
+  nby = mfloor(maxy / rayHex / rac3 - 0.5); //
+
+  nbx += 3; // to have canvas fully covered by hexagons
+  nby += 3;
+
+  if (nbx <= 3 || nby <= 3) return false; // nothing to do
+
+  Hexagon.dimensions();
+  createGrid();
+
+  createSides();
+
+  grid.forEach(line => {
+    line.forEach(cell => {
+      cell.size();
+    });
+  });
+
+  return true;
+} // startOver
+
+//-----------------------------------------------------------------
+// beginning of execution
+
+  {
+    canv = document.createElement('canvas');
+    canv.style.position="absolute";
+    document.body.appendChild(canv);
+    ctx = canv.getContext('2d');
+    canv.addEventListener('click', ()=> {events.push({event:'reset'})});
+    canv.setAttribute ('title', 'click me');
+  } // canvas creation
+
+  events.push({event:'reset'});
+  requestAnimationFrame(animate)
+} // window.onload
\ No newline at end of file
diff --git a/hex-arcs-in-relief/dist/style.css b/hex-arcs-in-relief/dist/style.css
new file mode 100644
index 0000000..484409c
--- /dev/null
+++ b/hex-arcs-in-relief/dist/style.css
@@ -0,0 +1,9 @@
+body {
+  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
+  background-color: #000;
+  color: #fff;
+  margin: 0;
+  padding: 0;
+  border-width:0;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/hex-arcs-in-relief/license.txt b/hex-arcs-in-relief/license.txt
new file mode 100644
index 0000000..a104524
--- /dev/null
+++ b/hex-arcs-in-relief/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Dillon (https://codepen.io/Dillo/pen/WNQVaYr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/hex-arcs-in-relief/src/index.html b/hex-arcs-in-relief/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/hex-arcs-in-relief/src/script.js b/hex-arcs-in-relief/src/script.js
new file mode 100644
index 0000000..d8fb9d4
--- /dev/null
+++ b/hex-arcs-in-relief/src/script.js
@@ -0,0 +1,702 @@
+"use strict";
+window.onload = function() {
+
+  const rayHexMin = 80;
+  const rayHexMax = 160;
+  const amplNoise = 30;
+  const minPerX = 1;
+  const maxPerX = 5;
+  const minPerY = 1;
+  const maxPerY = 5;
+
+  let canv, ctx; // canvas and context
+  let maxx, maxy;
+
+  let grid;
+  let nbx, nby;
+  let rayHex;
+
+  let tbSides;
+
+/* for animation */
+  let events = [];
+
+// shortcuts for Math.…
+
+  const mrandom = Math.random;
+  const mfloor = Math.floor;
+  const mround = Math.round;
+  const mceil = Math.ceil;
+  const mabs = Math.abs;
+  const mmin = Math.min;
+  const mmax = Math.max;
+
+  const mPI = Math.PI;
+  const mPIS2 = Math.PI / 2;
+  const m2PI = Math.PI * 2;
+  const msin = Math.sin;
+  const mcos = Math.cos;
+  const matan2 = Math.atan2;
+
+  const mhypot = Math.hypot;
+  const msqrt = Math.sqrt;
+
+  const rac3   = msqrt(3);
+  const rac3s2 = rac3 / 2;
+  const mPIS3 = Math.PI / 3;
+
+//-----------------------------------------------------------------
+  function alea (min, max) {
+// random number [min..max[ . If no max is provided, [0..min[
+
+    if (typeof max == 'undefined') return min * mrandom();
+    return min + (max - min) * mrandom();
+  }
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+  function intAlea (min, max) {
+// random integer number [min..max[ . If no max is provided, [0..min[
+
+    if (typeof max == 'undefined') {
+      max = min; min = 0;
+    }
+    return mfloor(min + (max - min) * mrandom());
+  } // intAlea
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+function Noise1DOneShot (period, min = 0, max = 1, random) {
+/* returns a 1D single-shot noise generator.
+   the (optional) random function must return a value between 0 and 1
+  the returned function has no parameter, and will return a new number every tiime it is called.
+  If the random function provides reproductible values (and is not used elsewhere), this
+  one will return reproductible values too.
+  period should be > 1. The bigger period is, the smoother output noise is
+*/
+  random = random || Math.random;
+  let currx = random(); // start with random offset
+  let y0 = min + (max - min) * random(); // 'previous' value
+  let y1 = min + (max - min) * random(); // 'next' value
+  let dx = 1 / period;
+
+  return function() {
+    currx += dx;
+    if (currx > 1) {
+      currx -= 1;
+      y0 = y1;
+      y1 = min + (max - min) * random();
+    }
+    let z = (3 - 2 * currx) * currx * currx;
+    return z * y1 + (1 - z) * y0;
+  }
+} // Noise1DOneShot
+
+
+//------------------------------------------------------------------------
+// class Hexagon
+let Hexagon;
+{ // scope for Hexagon
+
+let orgx, orgy;
+
+Hexagon = function (kx, ky) {
+
+  this.kx = kx;
+  this.ky = ky;
+  this.neighbours = [];
+
+  this.orient = intAlea(6);
+
+} // function Hexagon
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/* static method */
+
+Hexagon.dimensions = function () {
+// coordinates of center of hexagon [0][0]
+  orgx = (maxx - rayHex * (1.5 * nbx + 0.5)) / 2  + rayHex; // obvious, no ?
+  orgy = (maxy - (rayHex * rac3 * (nby + 0.5))) / 2 + rayHex * rac3; // yet more obvious
+
+} // Hexagon.dimensions
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.size = function() {
+/* computes screen sizes / positions
+*/
+// centre
+  this.xc = orgx + this.kx * 1.5 * rayHex;
+  this.yc = orgy + this.ky * rayHex * rac3;
+  if (this.kx & 1) this.yc -= rayHex * rac3s2; // odd columns
+
+  this.vertices = [[],[],[],[],[],[]] ;
+
+// x coordinates, from left to right
+  this.vertices[3][0] = this.xc - rayHex;
+  this.vertices[2][0] = this.vertices[4][0] = this.xc - rayHex  / 2;
+  this.vertices[1][0] = this.vertices[5][0] = this.xc + rayHex / 2;
+  this.vertices[0][0] = this.xc + rayHex;
+// y coordinates, from top to bottom
+  this.vertices[4][1] = this.vertices[5][1] = this.yc - rayHex * rac3s2;
+  this.vertices[0][1] = this.vertices[3][1] = this.yc;
+  this.vertices[1][1] = this.vertices[2][1] = this.yc + rayHex * rac3s2;
+// get a 2nd copy of table to avoid many % 6 calculations later
+  this.vertices = this.vertices.concat(this.vertices);
+
+  this.extCenters = [[],[],[],[],[],[]] ;
+  let dxc = rayHex;
+  let dyc = rayHex / rac3;
+  this.rad1 = dyc; // radius fir circles with center in extCenters
+
+  for (let k = 0; k < 6; ++k) {
+    this.extCenters[k][0] = this.xc + dxc * mcos(k * mPIS3) - dyc * msin(k * mPIS3);
+    this.extCenters[k][1] = this.yc + dxc * msin(k * mPIS3) + dyc * mcos(k * mPIS3);
+  }
+// get a 2nd copy of table to avoid many % 6 calculations later
+  this.extCenters = this.extCenters.concat(this.extCenters);
+
+  this.extCentersB = [[],[],[],[],[],[]] ;
+// x coordinates, from left to right
+  this.extCentersB[3][0] = this.xc - 2 * rayHex;
+  this.extCentersB[2][0] = this.extCentersB[4][0] = this.xc - rayHex;
+  this.extCentersB[1][0] = this.extCentersB[5][0] = this.xc + rayHex;
+  this.extCentersB[0][0] = this.xc + 2 * rayHex;
+
+// y coordinates, from top to bottom
+  this.extCentersB[4][1] = this.extCentersB[5][1] = this.yc - rayHex * rac3;
+  this.extCentersB[3][1] = this.extCentersB[0][1] = this.yc;
+  this.extCentersB[2][1] = this.extCentersB[1][1] = this.yc + rayHex * rac3;
+// get a 2nd copy of table to avoid many % 6 calculations later
+  this.extCentersB = this.extCentersB.concat(this.extCentersB);
+
+} // Hexagon.prototype.size
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawHexagon = function(hue) {
+
+  if (! this.vertices) this.size();
+  let ctxGrid = ctx;
+    ctxGrid.beginPath();
+    ctxGrid.moveTo (this.vertices[0][0], this.vertices[0][1]);
+    ctxGrid.lineTo (this.vertices[1][0], this.vertices[1][1]);
+    ctxGrid.lineTo (this.vertices[2][0], this.vertices[2][1]);
+    ctxGrid.lineTo (this.vertices[3][0], this.vertices[3][1]);
+    ctxGrid.lineTo (this.vertices[4][0], this.vertices[4][1]);
+    ctxGrid.lineTo (this.vertices[5][0], this.vertices[5][1]);
+    ctxGrid.lineTo (this.vertices[0][0], this.vertices[0][1]);
+    ctxGrid.strokeStyle = '#8FF';
+    ctxGrid.lineWidth = 0.5;
+    ctxGrid.strokeStyle = `hsl(${hue},100%,60%)`;
+    ctxGrid.stroke();
+} // Hexagon.prototype.drawHexagon
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc1 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R;
+
+  xc = x0 = rayHex * (1 - alpha / 2);
+  y0 = alpha * rayHex * rac3s2;
+  yc = xc / rac3
+  R = rayHex * (1 - 2 * alpha) / rac3;
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert - 3) * mPI / 6,(2 * vert + 5) * mPI / 6 , true);
+
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc6 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R;
+
+  xc = x0 = rayHex * (1 - alpha / 2);
+  y0 = -alpha * rayHex * rac3s2;
+  yc = -xc / rac3
+  R = rayHex * (1 - 2 * alpha) / rac3;
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert + 3) * mPI / 6,(2 * vert - 5) * mPI / 6);
+
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc2 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, angle;
+
+  xc = x0 = rayHex;
+  y0 = 0;
+  yc = ((0.5 + alpha) * (0.5 + alpha) + 0.75) / rac3 * rayHex;
+  R = yc;
+  angle = matan2(rayHex * ( 1/2 + alpha), yc - rayHex * rac3s2);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert - 3) * mPI / 6,(2 * vert - 3) * mPI / 6 - angle , true);
+
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc7 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, angle;
+
+  x0 = rayHex * (0.5 - alpha);
+  y0 = rayHex * rac3s2;
+  xc = rayHex;
+  yc = ((0.5 + alpha) * (0.5 + alpha) + 0.75) / rac3 * rayHex;
+  R = yc;
+  angle = matan2(rayHex * ( 1/2 + alpha), yc - rayHex * rac3s2);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R,(2 * vert - 3) * mPI / 6 - angle , (2 * vert - 3) * mPI / 6);
+
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc3 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, xb, yb, angle;
+
+  xc = x0 = rayHex;
+  y0 = 0;
+  xb = rayHex * (- 1 / 2 - alpha / 2);
+  yb = (1 - alpha) * rac3s2 * rayHex;
+
+  yc = (yb * yb + xb * xb - x0 * x0 + 2 * x0 * xc  - 2 * xb * xc) / 2 / yb;
+  R = yc;
+
+  angle = matan2(rayHex - xb, yc - yb);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert - 3) * mPI / 6,(2 * vert - 3) * mPI / 6 - angle , true);
+
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc8 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, xb, yb, angle;
+
+  x0 = -(1 + alpha) / 2 * rayHex;
+  y0 = (1 - alpha) * rac3s2 * rayHex;
+  xc = rayHex;
+  xb = rayHex * (- 1 / 2 - alpha / 2);
+  yb = (1 - alpha) * rac3s2 * rayHex;
+
+  yc = (yb * yb + xb * xb - rayHex * rayHex + 2 * rayHex * xc  - 2 * xb * xc) / 2 / yb;
+  R = yc;
+
+  angle = matan2(rayHex - xb, yc - yb);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert - 3) * mPI / 6 - angle , (2 * vert - 3) * mPI / 6);
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc4 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, xb, yb, angle;
+
+  xc = x0 = rayHex;
+  y0 = 0;
+  yc = - ((0.5 + alpha) * (0.5 + alpha) + 0.75) / rac3 * rayHex;
+  R = - yc;
+  angle = matan2(rayHex * ( 1/2 + alpha),  R - rayHex * rac3s2);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert + 3) * mPI / 6,(2 * vert + 3) * mPI / 6 + angle);
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+Hexagon.prototype.drawArc9 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, angle;
+
+  x0 = (0.5 - alpha) * rayHex;
+  y0 = - rayHex * rac3s2;
+  xc = rayHex;
+  yc = - ((0.5 + alpha) * (0.5 + alpha) + 0.75) / rac3 * rayHex;
+  R = - yc;
+  angle = matan2(rayHex * ( 1/2 + alpha),  R - rayHex * rac3s2);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R,(2 * vert + 3) * mPI / 6 + angle, (2 * vert + 3) * mPI / 6, true);
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+Hexagon.prototype.drawArc5 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, xb, yb, angle;
+
+  xc = x0 = rayHex;
+  y0 = 0;
+  xb = rayHex * (- 1 / 2 - alpha / 2);
+  yb = (alpha - 1) * rac3s2 * rayHex;
+
+  yc = (yb * yb + xb * xb - x0 * x0 + 2 * x0 * xc  - 2 * xb * xc) / 2 / yb;
+  R = - yc;
+
+  angle = matan2(rayHex - xb, R + yb);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R, (2 * vert + 3) * mPI / 6,(2 * vert + 3) * mPI / 6 + angle);
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+Hexagon.prototype.drawArc10 = function (vert, alpha, first = false) {
+
+  let x0, y0, xc, yc, R, xb, yb, angle;
+
+  x0 = -(1 + alpha) / 2 * rayHex;
+  y0 = -(1 - alpha) * rayHex * rac3s2;
+  xc = rayHex;
+  xb = rayHex * (- 1 / 2 - alpha / 2);
+  yb = (alpha - 1) * rac3s2 * rayHex;
+
+  yc = (yb * yb + xb * xb - rayHex * rayHex + 2 * rayHex * xc  - 2 * xb * xc) / 2 / yb;
+  R = - yc;
+
+  angle = matan2(rayHex - xb, R + yb);
+
+  [x0, y0] = rotate([x0, y0], 2 * vert);
+  [xc, yc] = rotate([xc, yc], 2 * vert);
+
+  if (first) ctx.moveTo (this.xc + x0, this.yc + y0);
+  ctx.arc (this.xc + xc, this.yc + yc, R,(2 * vert + 3) * mPI / 6 + angle, (2 * vert + 3) * mPI / 6, true);
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+/* returns a cell's neighbour
+  keep track of it for future request
+  defines itself as its neighbour's neighbour to reduce calculations
+
+  returns false if no neighbour
+*/
+
+Hexagon.prototype.neighbour = function(side) {
+
+  let neigh = this.neighbours[side];
+  if (neigh instanceof(Hexagon)) return neigh; // known neighbour
+  if (neigh === false) return false; // known for no neighbour
+//  do not know yet
+
+  if (this.kx & 1) {
+    neigh =  {kx: this.kx + [1, 0, -1, -1, 0, 1][side],
+              ky: this.ky + [0, 1, 0, -1, -1, -1][side]};
+  } else {
+    neigh = {kx: this.kx + [1, 0, -1, -1, 0, 1][side],
+             ky: this.ky + [1, 1, 1, 0, -1, 0][side]};
+  }
+  if (neigh.kx < 0 || neigh.ky <0 || neigh.kx >= nbx || neigh.ky >= nby) {
+    this.neighbours[side] = false;
+    return false;
+  }
+  neigh = grid[neigh.ky][neigh.kx];
+  this.neighbours[side] = neigh;
+  neigh.neighbours[(side + 3) % 6] = this;
+  return neigh;
+
+} // Hexagon.prototype.neighbour
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+Hexagon.prototype.drawSide = function(side, alpha, first){
+
+  switch (this.styles[side]) {
+    case 'a' :
+      this.drawArc6((side + 1) % 6, alpha, first);
+      break;
+    case 'b' :
+      this.drawArc7((side + 5) % 6, 1 - alpha, first);
+      this.drawArc2((side + 5) % 6, alpha);
+      break;
+    case 'c' :
+      this.drawArc8((side + 4) % 6, 1 - alpha, first);
+      this.drawArc3((side + 4) % 6, alpha);
+      break;
+    case 'd' :
+      this.drawArc9((side + 2) % 6, alpha, first);
+      this.drawArc4((side + 2) % 6, 1 - alpha);
+      break;
+    case 'e' :
+      this.drawArc10((side + 3) % 6, alpha, first);
+      this.drawArc5((side + 3) % 6, 1 - alpha);
+      break;
+  }
+} // Hexagon.prototype.drawSide
+
+} // scope for Hexagon
+
+//------------------------------------------------------------------------
+function rotate (p, k) {
+
+// turn the given point after a rotation of k / 12 turns (k * PI / 6) around the origin
+  let s = msin (k * mPI / 6);
+  let c = mcos (k * mPI / 6);
+  return [p[0] * c - p[1] * s,
+          p[0] * s + p[1] * c];
+} // rotate
+
+//------------------------------------------------------------------------
+
+function createGrid() {
+/* create the grid of Hexagons
+  but does NOT define the crossings between dots inside an hexagon
+*/
+  let hexa;
+
+  let tbPer = [];
+  let tbKind = [];
+  let perx = intAlea(minPerX, maxPerX + 1);
+  let pery = intAlea(minPerY, maxPerY + 1);
+
+  if (intAlea(3) == 0) { // aperiodic
+    perx = nbx;
+    pery = nby;
+  }
+
+  for (let ky = 0; ky < pery; ++ky) {
+    tbPer[ky] = [];
+    tbKind[ky] = [];
+    for (let kx = 0; kx < perx; ++kx) {
+      tbPer[ky][kx] = intAlea(6); // random orientation
+      tbKind[ky][kx] = intAlea(3);
+    } // for kx
+  } // for ky
+
+  grid = [];
+
+  for (let ky = 0; ky < nby; ++ky) {
+    grid[ky] = []
+    for (let kx = 0; kx < nbx; ++kx) {
+      hexa = new Hexagon(kx, ky);
+      grid[ky][kx] = hexa;
+      grid[ky][kx].orient = tbPer[ky % pery][kx % perx];
+      grid[ky][kx].kind = tbKind[ky % pery][kx % perx];
+    } // for kx
+  } // for ky
+} // createGrid
+
+//------------------------------------------------------------------------
+/* creates a Side and initialize it with a first cell
+in most cases, a second cell will be added later, excepts on the edges of the grid.
+*/
+
+function Side(cell, side, styl) {
+
+  let fdHue;
+  this.cell1 = cell;
+  this.side1 = side;
+
+  this.hue = intAlea(360);
+  this.satur = intAlea(90,100);
+  if (! cell.styles) cell.styles = [];
+  cell.styles[side] = styl;
+  tbSides.push (this);
+}
+
+Side.prototype.addCell = function (cell, side, styl) {
+  this.cell2 = cell;
+  this.side2 = side; // normally useless, but can make things more easy
+  if (! cell.styles) cell.styles = [];
+  cell.styles[side] = styl;
+}
+
+Side.prototype.drawSide = function(alpha) {
+/* alpha in range [0..0.5]
+*/
+
+  ctx.beginPath();
+
+  this.cell1.drawSide(this.side1, alpha, true);
+  if (this.cell2) {
+    this.cell2.drawSide(this.side2, alpha);
+  }
+  ctx.closePath();
+  ctx.strokeStyle = `hsl(${this.hue},${this.satur}%,${20+120*alpha}%)`;
+  ctx.lineWidth = 1;
+  ctx.stroke();
+}
+
+//------------------------------------------------------------------------
+
+function drawAll (alpha) {
+  tbSides.forEach(side => {
+    side.drawSide(alpha);
+  });
+}
+
+//------------------------------------------------------------------------
+
+function createSides() {
+  let cellneigh, side, styl, styleList;
+
+  tbSides = [];
+
+  grid.forEach ((line, ky) => {
+    line.forEach ((cell, kx) => {
+      cell.sides = [];
+      styleList = ['abceda','abcabc', 'edaeda'][cell.kind];
+      for (let kside = 0; kside < 6 ; ++ kside) {
+        styl = styleList [(kside + cell.orient) % 6];
+        cellneigh = cell.neighbour(kside);
+        if (!cellneigh) cell.sides[kside] = new Side(cell, kside, styl);
+        else if (cellneigh.sides && cellneigh.sides [(kside + 3) % 6]) {
+          side = cellneigh.sides [(kside + 3) % 6];
+          side.addCell(cell, kside, styl);
+          cell.sides[kside] = side;
+        } else cell.sides[kside] = new Side(cell, kside, styl);
+      } // for side
+    }); // grid.forEach
+  }); // grid.forEach
+}
+
+//-----------------------------------------------------------------------------
+
+let animate;
+
+{ // scope for animate
+  let animState = 0;
+  let alpha = 0;
+
+  animate = function(tStamp) {
+    let event = events.pop();
+    requestAnimationFrame(animate)
+    if (event) {
+      switch (event.event) {
+        case 'reset' :
+          animState = 0;
+          break;
+      } // switch (event)
+    } // if (event)
+
+    let tinit = performance.now();
+
+    switch (animState) {
+      case 0:
+        if (startOver()) {
+          alpha = 0.499;
+          ++animState;
+        }
+        break;
+
+      case 1:
+        drawAll(alpha);
+        alpha -= 0.5/rayHex;
+        if (alpha <= 0) {
+          ++animState;
+          alpha = 0.001;
+        }
+        break;
+
+      case 2:
+        drawAll(alpha);
+        alpha += 0.5/rayHex;
+        if (alpha >= 0.5) {
+          alpha = 0.499;
+          ++animState;
+        }
+        break;
+
+    } // switch (animState)
+
+  } // animate
+
+} // scope for animate
+
+//-----------------------------------------------------------------
+function startOver() {
+// canvas dimensions
+
+  maxx = window.innerWidth;
+  maxy = window.innerHeight;
+
+  let orgLeft = mmax (((window.innerWidth ) - maxx) / 2, 0);
+  let orgTop = mmax (((window.innerHeight ) - maxy) / 2, 0);
+
+  canv.style.left = orgLeft + 'px';
+  canv.style.top = orgTop + 'px';
+
+  if (maxx != canv.width) canv.width = maxx;
+  if (maxy != canv.height) canv.height = maxy;
+
+  canv.width = maxx;
+  canv.height = maxy;
+  ctx.lineCap = 'round';   // placed here because reset when canvas resized
+  ctx.lineJoin = 'round';
+
+// number of columns / rows
+// computed to have (0,0) in top leftmost corner
+// and for all hexagons to be fully contained in canvas
+
+  rayHex = alea(rayHexMin, rayHexMax);
+
+  nbx = mfloor(((maxx / rayHex) - 0.5) / 1.5);
+  nby = mfloor(maxy / rayHex / rac3 - 0.5); //
+
+  nbx += 3; // to have canvas fully covered by hexagons
+  nby += 3;
+
+  if (nbx <= 3 || nby <= 3) return false; // nothing to do
+
+  Hexagon.dimensions();
+  createGrid();
+
+  createSides();
+
+  grid.forEach(line => {
+    line.forEach(cell => {
+      cell.size();
+    });
+  });
+
+  return true;
+} // startOver
+
+//-----------------------------------------------------------------
+// beginning of execution
+
+  {
+    canv = document.createElement('canvas');
+    canv.style.position="absolute";
+    document.body.appendChild(canv);
+    ctx = canv.getContext('2d');
+    canv.addEventListener('click', ()=> {events.push({event:'reset'})});
+    canv.setAttribute ('title', 'click me');
+  } // canvas creation
+
+  events.push({event:'reset'});
+  requestAnimationFrame(animate)
+} // window.onload
diff --git a/hex-arcs-in-relief/src/style.css b/hex-arcs-in-relief/src/style.css
new file mode 100644
index 0000000..71b42ea
--- /dev/null
+++ b/hex-arcs-in-relief/src/style.css
@@ -0,0 +1,9 @@
+body {
+  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
+  background-color: #000;
+  color: #fff;
+  margin: 0;
+  padding: 0;
+  border-width:0;
+  cursor: pointer;
+}
diff --git a/hex-rgb-auto-color-converter-in-vue/README.markdown b/hex-rgb-auto-color-converter-in-vue/README.markdown
new file mode 100644
index 0000000..97ca9da
--- /dev/null
+++ b/hex-rgb-auto-color-converter-in-vue/README.markdown
@@ -0,0 +1,12 @@
+# Hex/RGB Auto Color Converter in Vue
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/collinsworth/pen/WNXxQVP](https://codepen.io/collinsworth/pen/WNXxQVP).
+
+A tool to convert RGB and hexadecimal color values (with or without alpha) back and forth, with automatic detection and a fairly forgiving format. 
+
+The pen also previews your entered color; offers a button to quickly copy the converted value to your clipboard; and it includes a dark mode so that you can see your previews against a light and dark background.
+
+**To do:**
+- Right now, the method detection and actual conversion are decoupled, and it seems like that logic should probably live together;
+- The validation could work a little better. It prevents illegal characters, but doesn't stop you from entering legal characters in illegal positions (e.g., adding a "r" to a hex value);
+- Feels like there's probably a better way to do that nested loop, but maybe not
diff --git a/hex-rgb-auto-color-converter-in-vue/dist/index.html b/hex-rgb-auto-color-converter-in-vue/dist/index.html
new file mode 100644
index 0000000..a0d598f
--- /dev/null
+++ b/hex-rgb-auto-color-converter-in-vue/dist/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Hex/RGB Auto Color Converter in Vue</title>
+  <link href="https://fonts.googleapis.com/css?family=Spartan:500,700|Fira+Code:500&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main :class="darkMode == 'dark' ? 'dark' : ''">
+	<div id="app" :style="{ boxShadow, borderColor }">
+
+		<div id="swatch-container">
+			<div id="swatch" :style="{ backgroundColor, borderColor }"></div>
+			<form id="dark-mode-toggle">
+				<input type="radio" v-model="darkMode" id="light" name="dark-mode" value="light">
+				<label for="light"><span class="sr">Light mode</span></label>
+				<input type="radio" v-model="darkMode" id="dark" name="dark-mode" value="dark">
+				<label for="dark"><span class="sr">Dark mode</span></label>
+			</form>
+		</div>
+
+		<form id="app-form" action="" :style="{ borderColor }">
+			<h1>Automatic RGB/Hex color converter</h1>
+
+			<div id="value-wrap" class="group">
+				<label for="value">Enter a color:</label>
+				<div>
+					<input v-model="value" @input="validate" id="value" type="text" placeholder="Any RGB or hex value" />
+				</div>
+			</div>
+
+			<div class="group">
+				<ul>
+					<li><strong>Format detected:</strong> {{ fromFormat }}</li>
+					<li><strong>Converting to:</strong> {{ toFormat }}</li>
+				</ul>
+			</div>
+
+			<div class="flex group">
+				<label for="result">Converted value:</label>
+			</div>
+
+			<div class="flex">
+				<input ref="output" id="result" tabindex="-1" type="text" :value="convertedValue" />
+				<button @click.prevent="copy" :disabled="!convertedValue" type="button" ref="copyButton">{{ copyButtonText }}</button>
+			</div>
+		</form>
+	</div>
+</main>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/hex-rgb-auto-color-converter-in-vue/dist/script.js b/hex-rgb-auto-color-converter-in-vue/dist/script.js
new file mode 100644
index 0000000..b93b401
--- /dev/null
+++ b/hex-rgb-auto-color-converter-in-vue/dist/script.js
@@ -0,0 +1,171 @@
+const noMethod = { from: null, to: null };
+
+const app = new Vue({
+	data: () => ({
+		base16: "0123456789abcdef",
+		hexRange: [],
+		value: "",
+		method: noMethod,
+		copied: false,
+		darkMode: "light"
+	}),
+
+	created() {
+		const digits = this.base16.split("");
+		digits.forEach((outer) => {
+			digits.forEach((inner) => {
+				this.hexRange.push(outer + inner);
+			});
+		});
+	},
+
+	watch: {
+		value(next, prev) {
+			if (
+				next.match(/^rgba/) ||
+				(next.match(/,/g) && next.match(/,/g).length == 3)
+			) {
+				this.method = { from: "RGBA", to: "Hex + alpha" };
+			} else if (["r", "R"].includes(next.substr(0, 1)) || next.includes(",")) {
+				this.method = { from: "RGB", to: "Hex" };
+			} else if (next.match(/^#?([a-f0-9]{4}$|[a-f0-9]{8})/i)) {
+				this.method = { from: "Hex + alpha", to: "RGBA" };
+			} else if (next.match(/[a-f0-9]+/i)) {
+				this.method = { from: "Hex", to: "RGB" };
+			} else {
+				this.method = noMethod;
+			}
+		}
+	},
+
+	methods: {
+		convert(val) {
+			if (val.match(/^rgb.*/) || val.match(/.*,.*/)) {
+				return this.rgbToHex(val);
+			} else {
+				return this.hexToRGB(val);
+			}
+		},
+
+		hexToRGB(val) {
+			//Remove '#' from string if present
+			if (val.substr(0, 1) === "#") {
+				val = val.substr(1);
+			}
+			//Make sure we have the right number of characters
+			if ([3, 4, 6, 8].includes(val.length)) {
+				//Allow for hex shorthand (3 or 4 characters)
+				const division = val.length >= 6 ? 2 : 1;
+				const color = {
+					r: { from: val.substr(0, division) },
+					g: { from: val.substr(division, division) },
+					b: { from: val.substr(division * 2, division) },
+					a: { from: val.substr(division * 3, division) }
+				};
+
+				//Set single-character shorthands to double-character hexes
+				if (division === 1) {
+					["r", "g", "b", "a"].forEach((col) => {
+						color[col].from += color[col].from;
+					});
+				}
+
+				//Matches the hex values to their 0-255 counterparts
+				this.hexRange.forEach((hex, index) => {
+					Object.keys(color).forEach((key) => {
+						if (color[key].from.toLowerCase() == hex) {
+							color[key].to = index;
+						}
+					});
+				});
+
+				//See if an alpha value was provided (return RGBA or RGB)
+				if (color.a.to) {
+					return `rgba(${color.r.to}, ${color.g.to}, ${color.b.to}, ${(
+						color.a.to / 255
+					).toFixed(2)})`;
+				} else {
+					return `rgb(${color.r.to}, ${color.g.to}, ${color.b.to})`;
+				}
+			} else {
+				return null;
+			}
+		},
+
+		rgbToHex(val) {
+			//Don't try to do stuff if we don't have two commas and a number
+			if (!val.match(/.*,.*,[0-9\s]+/)) return;
+
+			//Split up the RGB(A) string on commas and match numbers
+			const rgba = val.split(",");
+			const vals = rgba.map((color) => color && color.match(/[0-9\.]+/));
+			let invalid = false;
+
+			//Make sure none of the numbers are larger than 255
+			vals.forEach((val) => {
+				if (val > 255) invalid = true;
+			});
+
+			//Make sure we have 3 or 4 numbers (RGB or RGBA)
+			if ([3, 4].includes(vals.length)) {
+				let finalHex = "";
+				vals.forEach((color, colorIndex) => {
+					//If we're dealing with the alpha value…
+					if (colorIndex == 3)
+						color = Math.ceil(color * 255 > 255 ? 255 : color * 255);
+					this.hexRange.forEach((hex, hexIndex) => {
+						if (color == hexIndex) finalHex += hex;
+					});
+				});
+				return invalid ? null : `#${finalHex}`;
+			}
+		},
+
+		validate(key) {
+			//Only allow the characters that go into RGBA and/or hex volors
+			this.value = this.value.replace(/[^#a-f0-9rg\(\),\s\.]/, "");
+		},
+
+		copy() {
+			this.$refs.output.select();
+			document.execCommand("copy");
+			this.copied = true;
+			this.$refs.copyButton.focus();
+			setTimeout(() => {
+				this.copied = false;
+			}, 1200);
+		}
+	},
+
+	computed: {
+		convertedValue() {
+			return this.convert(this.value);
+		},
+
+		fromFormat() {
+			return this.method && this.method.from ? this.method.from : "…";
+		},
+
+		toFormat() {
+			return this.method && this.method.to ? this.method.to : "…";
+		},
+
+		copyButtonText() {
+			return this.copied ? "Copied!" : "Copy";
+		},
+
+		boxShadow() {
+			return `.5rem .5rem 0 ${this.convert(this.value) || "rgba(0,0,0,.25)"}`;
+		},
+
+		borderColor() {
+			return this.convert(this.value) || "inherit";
+		},
+
+		backgroundColor() {
+			return this.convert(this.value) || "";
+		}
+	}
+});
+
+app.$mount(document.querySelector("main"));
\ No newline at end of file
diff --git a/hex-rgb-auto-color-converter-in-vue/dist/style.css b/hex-rgb-auto-color-converter-in-vue/dist/style.css
new file mode 100644
index 0000000..c9b99dc
--- /dev/null
+++ b/hex-rgb-auto-color-converter-in-vue/dist/style.css
@@ -0,0 +1,237 @@
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+  color: #333;
+  font-size: inherit;
+  background: transparent;
+  transition: color 0.3s, background 0.3s;
+  font-family: inherit;
+}
+
+*:focus,
+input[type=radio]:focus + label {
+  outline: 2px dashed #dd8800;
+  outline-offset: 2px;
+}
+
+.sr, #app #swatch-container #dark-mode-toggle input[type=radio] {
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+  width: 1px;
+  height: 1px;
+  left: -100vh;
+  opacity: 0;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  display: grid;
+  place-items: center;
+  min-height: 100vh;
+  font-family: "Spartan";
+  font-size: 18px;
+  box-sizing: border-box;
+  color: #333;
+  background: #ddd;
+  text-align: left;
+}
+
+#app {
+  width: 100%;
+  max-width: 26rem;
+  padding: 4rem 1rem;
+  border: 2px solid;
+  box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.25);
+  position: relative;
+  background: #f8f8e8;
+  margin: 3rem auto 0;
+}
+#app h1 {
+  font-size: 1.8rem;
+}
+#app #swatch-container #dark-mode-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.5rem;
+  position: relative;
+  z-index: 2;
+  background: transparent;
+}
+#app #swatch-container #dark-mode-toggle input[type=radio] + label {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: block;
+  border-radius: 1.25rem;
+  border: 2px solid;
+  background: #f8f8e8;
+  position: relative;
+}
+#app #swatch-container #dark-mode-toggle input[type=radio] + label[for=dark] {
+  background: #333;
+}
+#app #swatch-container #dark-mode-toggle input[type=radio] + label:not(:last-child) {
+  margin-right: 0.5rem;
+}
+#app #swatch-container #dark-mode-toggle input[type=radio]:checked + label:after {
+  content: "";
+  border-radius: 2rem;
+  width: calc(1.5rem + 4px);
+  height: calc(1.5rem + 4px);
+  border: 2px solid;
+  display: block;
+  background: transparent;
+  left: -6px;
+  top: -6px;
+  position: absolute;
+}
+#app #swatch {
+  width: 8rem;
+  height: 8rem;
+  border-radius: 8rem;
+  border: 2px solid;
+  position: absolute;
+  top: -4rem;
+  left: calc(50% - 4rem);
+  background-color: #f8f8e8;
+}
+#app ul {
+  padding: 0;
+  list-style-type: none;
+}
+#app ul li + li {
+  margin-top: 0.5rem;
+}
+#app #app-form {
+  margin: auto;
+}
+#app #app-form input,
+#app #app-form button {
+  padding: 0.5em;
+  border-radius: 0.25em;
+  border: 2px solid;
+  font-size: 1rem;
+}
+#app #app-form input,
+#app #app-form button {
+  font-family: "Fira Code", monospace;
+}
+#app #app-form button {
+  padding: 0.5em 1em;
+  font-weight: bold;
+}
+#app #app-form button:disabled {
+  opacity: 0.4;
+}
+#app #app-form label,
+#app #app-form input,
+#app #app-form .label {
+  display: block;
+  width: 100%;
+}
+#app #app-form input {
+  padding: 0.75em;
+}
+#app #app-form label,
+#app #app-form .label {
+  margin: 0.25em 0;
+  font-weight: bold;
+}
+#app #app-form #result {
+  border: none;
+  border-radius: 0;
+  padding-left: 0;
+  border-bottom: 2px solid;
+}
+#app #app-form .flex {
+  display: flex;
+  align-items: stretch;
+  flex-wrap: wrap;
+}
+@media (min-width: 440px) {
+  #app #app-form .flex {
+    flex-wrap: nowrap;
+  }
+  #app #app-form .flex > *:not(:last-child) {
+    margin-right: 1rem;
+  }
+}
+#app #app-form .group {
+  margin-top: 3rem;
+  text-align: left;
+}
+#app #app-form .method {
+  font-weight: bold;
+}
+@media (min-width: 440px) {
+  #app {
+    padding: 4rem 3rem;
+  }
+}
+@media (min-width: 768px) {
+  #app {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 3rem;
+    max-width: 768px;
+    align-items: center;
+    text-align: left;
+    margin: 0 auto;
+  }
+  #app #swatch {
+    position: relative;
+    left: unset;
+    top: unset;
+    width: 12rem;
+    height: 12rem;
+    border-radius: 12rem;
+  }
+  #app #app-form {
+    padding: 2rem 0 2rem 3rem;
+    border-left: 2px dashed;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.8s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(2rem);
+}
+
+#dark-mode-switch {
+  position: absolute;
+  z-index: 3;
+  width: 3rem;
+  height: 2rem;
+  border: 2px solid;
+  left: 0.5rem;
+  top: 0.5rem;
+  border-radius: 3rem;
+}
+
+main.dark {
+  color: #fff;
+  background: #222;
+}
+main.dark * {
+  color: #fff;
+}
+main.dark #app {
+  background: #333;
+  box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.7);
+}
+main.dark #app #swatch-container #dark-mode-toggle input[type=radio]:checked + label:after {
+  border: 2px solid #fff;
+}
+main.dark #app #swatch-container #swatch {
+  background-color: #333;
+}
\ No newline at end of file
diff --git a/hex-rgb-auto-color-converter-in-vue/license.txt b/hex-rgb-auto-color-converter-in-vue/license.txt
new file mode 100644
index 0000000..124e8b5
--- /dev/null
+++ b/hex-rgb-auto-color-converter-in-vue/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Josh Collinsworth (https://codepen.io/collinsworth/pen/WNXxQVP)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/hex-rgb-auto-color-converter-in-vue/src/index.html b/hex-rgb-auto-color-converter-in-vue/src/index.html
new file mode 100644
index 0000000..7ffde84
--- /dev/null
+++ b/hex-rgb-auto-color-converter-in-vue/src/index.html
@@ -0,0 +1,41 @@
+<main :class="darkMode == 'dark' ? 'dark' : ''">
+	<div id="app" :style="{ boxShadow, borderColor }">
+
+		<div id="swatch-container">
+			<div id="swatch" :style="{ backgroundColor, borderColor }"></div>
+			<form id="dark-mode-toggle">
+				<input type="radio" v-model="darkMode" id="light" name="dark-mode" value="light">
+				<label for="light"><span class="sr">Light mode</span></label>
+				<input type="radio" v-model="darkMode" id="dark" name="dark-mode" value="dark">
+				<label for="dark"><span class="sr">Dark mode</span></label>
+			</form>
+		</div>
+
+		<form id="app-form" action="" :style="{ borderColor }">
+			<h1>Automatic RGB/Hex color converter</h1>
+
+			<div id="value-wrap" class="group">
+				<label for="value">Enter a color:</label>
+				<div>
+					<input v-model="value" @input="validate" id="value" type="text" placeholder="Any RGB or hex value" />
+				</div>
+			</div>
+
+			<div class="group">
+				<ul>
+					<li><strong>Format detected:</strong> {{ fromFormat }}</li>
+					<li><strong>Converting to:</strong> {{ toFormat }}</li>
+				</ul>
+			</div>
+
+			<div class="flex group">
+				<label for="result">Converted value:</label>
+			</div>
+
+			<div class="flex">
+				<input ref="output" id="result" tabindex="-1" type="text" :value="convertedValue" />
+				<button @click.prevent="copy" :disabled="!convertedValue" type="button" ref="copyButton">{{ copyButtonText }}</button>
+			</div>
+		</form>
+	</div>
+</main>
\ No newline at end of file
diff --git a/hex-rgb-auto-color-converter-in-vue/src/script.js b/hex-rgb-auto-color-converter-in-vue/src/script.js
new file mode 100644
index 0000000..b2e6dfe
--- /dev/null
+++ b/hex-rgb-auto-color-converter-in-vue/src/script.js
@@ -0,0 +1,171 @@
+const noMethod = { from: null, to: null };
+
+const app = new Vue({
+	data: () => ({
+		base16: "0123456789abcdef",
+		hexRange: [],
+		value: "",
+		method: noMethod,
+		copied: false,
+		darkMode: "light"
+	}),
+
+	created() {
+		const digits = this.base16.split("");
+		digits.forEach((outer) => {
+			digits.forEach((inner) => {
+				this.hexRange.push(outer + inner);
+			});
+		});
+	},
+
+	watch: {
+		value(next, prev) {
+			if (
+				next.match(/^rgba/) ||
+				(next.match(/,/g) && next.match(/,/g).length == 3)
+			) {
+				this.method = { from: "RGBA", to: "Hex + alpha" };
+			} else if (["r", "R"].includes(next.substr(0, 1)) || next.includes(",")) {
+				this.method = { from: "RGB", to: "Hex" };
+			} else if (next.match(/^#?([a-f0-9]{4}$|[a-f0-9]{8})/i)) {
+				this.method = { from: "Hex + alpha", to: "RGBA" };
+			} else if (next.match(/[a-f0-9]+/i)) {
+				this.method = { from: "Hex", to: "RGB" };
+			} else {
+				this.method = noMethod;
+			}
+		}
+	},
+
+	methods: {
+		convert(val) {
+			if (val.match(/^rgb.*/) || val.match(/.*,.*/)) {
+				return this.rgbToHex(val);
+			} else {
+				return this.hexToRGB(val);
+			}
+		},
+
+		hexToRGB(val) {
+			//Remove '#' from string if present
+			if (val.substr(0, 1) === "#") {
+				val = val.substr(1);
+			}
+			//Make sure we have the right number of characters
+			if ([3, 4, 6, 8].includes(val.length)) {
+				//Allow for hex shorthand (3 or 4 characters)
+				const division = val.length >= 6 ? 2 : 1;
+				const color = {
+					r: { from: val.substr(0, division) },
+					g: { from: val.substr(division, division) },
+					b: { from: val.substr(division * 2, division) },
+					a: { from: val.substr(division * 3, division) }
+				};
+
+				//Set single-character shorthands to double-character hexes
+				if (division === 1) {
+					["r", "g", "b", "a"].forEach((col) => {
+						color[col].from += color[col].from;
+					});
+				}
+
+				//Matches the hex values to their 0-255 counterparts
+				this.hexRange.forEach((hex, index) => {
+					Object.keys(color).forEach((key) => {
+						if (color[key].from.toLowerCase() == hex) {
+							color[key].to = index;
+						}
+					});
+				});
+
+				//See if an alpha value was provided (return RGBA or RGB)
+				if (color.a.to) {
+					return `rgba(${color.r.to}, ${color.g.to}, ${color.b.to}, ${(
+						color.a.to / 255
+					).toFixed(2)})`;
+				} else {
+					return `rgb(${color.r.to}, ${color.g.to}, ${color.b.to})`;
+				}
+			} else {
+				return null;
+			}
+		},
+
+		rgbToHex(val) {
+			//Don't try to do stuff if we don't have two commas and a number
+			if (!val.match(/.*,.*,[0-9\s]+/)) return;
+
+			//Split up the RGB(A) string on commas and match numbers
+			const rgba = val.split(",");
+			const vals = rgba.map((color) => color && color.match(/[0-9\.]+/));
+			let invalid = false;
+
+			//Make sure none of the numbers are larger than 255
+			vals.forEach((val) => {
+				if (val > 255) invalid = true;
+			});
+
+			//Make sure we have 3 or 4 numbers (RGB or RGBA)
+			if ([3, 4].includes(vals.length)) {
+				let finalHex = "";
+				vals.forEach((color, colorIndex) => {
+					//If we're dealing with the alpha value…
+					if (colorIndex == 3)
+						color = Math.ceil(color * 255 > 255 ? 255 : color * 255);
+					this.hexRange.forEach((hex, hexIndex) => {
+						if (color == hexIndex) finalHex += hex;
+					});
+				});
+				return invalid ? null : `#${finalHex}`;
+			}
+		},
+
+		validate(key) {
+			//Only allow the characters that go into RGBA and/or hex volors
+			this.value = this.value.replace(/[^#a-f0-9rg\(\),\s\.]/, "");
+		},
+
+		copy() {
+			this.$refs.output.select();
+			document.execCommand("copy");
+			this.copied = true;
+			this.$refs.copyButton.focus();
+			setTimeout(() => {
+				this.copied = false;
+			}, 1200);
+		}
+	},
+
+	computed: {
+		convertedValue() {
+			return this.convert(this.value);
+		},
+
+		fromFormat() {
+			return this.method && this.method.from ? this.method.from : "…";
+		},
+
+		toFormat() {
+			return this.method && this.method.to ? this.method.to : "…";
+		},
+
+		copyButtonText() {
+			return this.copied ? "Copied!" : "Copy";
+		},
+
+		boxShadow() {
+			return `.5rem .5rem 0 ${this.convert(this.value) || "rgba(0,0,0,.25)"}`;
+		},
+
+		borderColor() {
+			return this.convert(this.value) || "inherit";
+		},
+
+		backgroundColor() {
+			return this.convert(this.value) || "";
+		}
+	}
+});
+
+app.$mount(document.querySelector("main"));
diff --git a/hex-rgb-auto-color-converter-in-vue/src/style.scss b/hex-rgb-auto-color-converter-in-vue/src/style.scss
new file mode 100644
index 0000000..b861577
--- /dev/null
+++ b/hex-rgb-auto-color-converter-in-vue/src/style.scss
@@ -0,0 +1,286 @@
+$gray: #333;
+$cardBG: #f8f8e8;
+$bg: #ddd;
+$orange: #dd8800;
+$size: 8;
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+	color: $gray;
+	font-size: inherit;
+	background: transparent;
+	transition: color 0.3s, background 0.3s;
+	font-family: inherit;
+}
+
+*:focus,
+input[type="radio"]:focus + label {
+	outline: 2px dashed $orange;
+	outline-offset: 2px;
+}
+
+.sr {
+	position: absolute;
+	clip: rect(1px, 1px, 1px, 1px);
+	width: 1px;
+	height: 1px;
+	left: -100vh;
+	opacity: 0;
+}
+
+body {
+	margin: 0;
+}
+
+main {
+	display: grid;
+	place-items: center;
+	min-height: 100vh;
+	font-family: "Spartan";
+	font-size: 18px;
+	box-sizing: border-box;
+	color: #333;
+	background: $bg;
+	text-align: left;
+}
+
+#app {
+	width: 100%;
+	max-width: 26rem;
+	padding: 4rem 1rem;
+	border: 2px solid;
+	box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.25);
+	position: relative;
+	background: $cardBG;
+	margin: 3rem auto 0;
+
+	h1 {
+		font-size: 1.8rem;
+	}
+
+	#swatch-container {
+		#dark-mode-toggle {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-top: 0.5rem;
+			position: relative;
+			z-index: 2;
+			background: transparent;
+
+			input[type="radio"] {
+				@extend .sr;
+
+				& + label {
+					width: 1.25rem;
+					height: 1.25rem;
+					display: block;
+					border-radius: 1.25rem;
+					border: 2px solid;
+					background: $cardBG;
+					position: relative;
+
+					&[for="dark"] {
+						background: $gray;
+					}
+
+					&:not(:last-child) {
+						margin-right: 0.5rem;
+					}
+				}
+
+				&:checked + label:after {
+					content: "";
+					border-radius: 2rem;
+					width: calc(1.5rem + 4px);
+					height: calc(1.5rem + 4px);
+					border: 2px solid;
+					display: block;
+					background: transparent;
+					left: -6px;
+					top: -6px;
+					position: absolute;
+				}
+			}
+		}
+	}
+
+	#swatch {
+		width: #{$size}rem;
+		height: #{$size}rem;
+		border-radius: #{$size}rem;
+		border: 2px solid;
+		position: absolute;
+		top: #{$size * -0.5}rem;
+		left: calc(50% - #{$size * 0.5}rem);
+		background-color: $cardBG;
+	}
+
+	ul {
+		padding: 0;
+		list-style-type: none;
+
+		li + li {
+			margin-top: 0.5rem;
+		}
+	}
+
+	#app-form {
+		margin: auto;
+
+		input,
+		button {
+			padding: 0.5em;
+			border-radius: 0.25em;
+			border: 2px solid;
+			font-size: 1rem;
+		}
+
+		input,
+		button {
+			font-family: "Fira Code", monospace;
+		}
+
+		button {
+			padding: 0.5em 1em;
+			font-weight: bold;
+
+			&:disabled {
+				opacity: 0.4;
+			}
+		}
+
+		label,
+		input,
+		.label {
+			display: block;
+			width: 100%;
+		}
+
+		input {
+			padding: 0.75em;
+		}
+
+		label,
+		.label {
+			margin: 0.25em 0;
+			font-weight: bold;
+		}
+
+		#result {
+			border: none;
+			border-radius: 0;
+			padding-left: 0;
+			border-bottom: 2px solid;
+		}
+
+		.flex {
+			display: flex;
+			align-items: stretch;
+			flex-wrap: wrap;
+
+			@media (min-width: 440px) {
+				flex-wrap: nowrap;
+
+				& > *:not(:last-child) {
+					margin-right: 1rem;
+				}
+			}
+		}
+
+		.group {
+			margin-top: 3rem;
+			text-align: left;
+		}
+
+		.method {
+			font-weight: bold;
+		}
+	}
+
+	//#app
+	@media (min-width: 440px) {
+		padding: 4rem 3rem;
+	}
+
+	@media (min-width: 768px) {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		grid-gap: 3rem;
+		max-width: 768px;
+		align-items: center;
+		text-align: left;
+		margin: 0 auto;
+
+		#swatch {
+			$size: 12;
+			position: relative;
+			left: unset;
+			top: unset;
+			width: #{$size}rem;
+			height: #{$size}rem;
+			border-radius: #{$size}rem;
+		}
+
+		#app-form {
+			padding: 2rem 0 2rem 3rem;
+			border-left: 2px dashed;
+		}
+	}
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.8s;
+}
+
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+	transform: translateY(2rem);
+}
+
+#dark-mode-switch {
+	position: absolute;
+	z-index: 3;
+	width: 3rem;
+	height: 2rem;
+	border: 2px solid;
+	left: 0.5rem;
+	top: 0.5rem;
+	border-radius: 3rem;
+}
+
+main.dark {
+	color: #fff;
+	$gray: #fff;
+	$cardBG: #333;
+	$bg: #222;
+	$orange: #dd8800;
+	background: $bg;
+
+	* {
+		color: $gray;
+	}
+
+	#app {
+		background: $cardBG;
+		box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.7);
+
+		#swatch-container {
+			#dark-mode-toggle {
+				input[type="radio"] {
+					&:checked + label:after {
+						border: 2px solid #fff;
+					}
+				}
+			}
+
+			#swatch {
+				background-color: $cardBG;
+			}
+		}
+	}
+}
diff --git a/hexagon-tiling-7-ways/README.markdown b/hexagon-tiling-7-ways/README.markdown
new file mode 100644
index 0000000..38473a1
--- /dev/null
+++ b/hexagon-tiling-7-ways/README.markdown
@@ -0,0 +1,16 @@
+#  Hexagon Tiling (7 ways)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Manoylov/pen/dyorBVb](https://codepen.io/Manoylov/pen/dyorBVb).
+
+   Hexagon Tiling
+
+   Controls :
+
+     mouse move: rotate hovered hexagons                                  
+     mouse click: generate new hexagon variant                           
+                                                                      
+    keyboard                                                          
+       1-7: switch between different hexagon patterns                 
+       'c': generate different colors and sizes for hexagons          
+       'h': show contours of hexagons                                 
+       any others: regenerate hexagons   
diff --git a/hexagon-tiling-7-ways/dist/index.html b/hexagon-tiling-7-ways/dist/index.html
new file mode 100644
index 0000000..aa1dac1
--- /dev/null
+++ b/hexagon-tiling-7-ways/dist/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen -  Hexagon Tiling (7 ways)</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!--////////////////////////////////////////////////-->
+<!--                       //                     //-->
+<!--   -~=Manoylov AC=~-   //   Hexagon Tiling    //-->
+<!--                       //                     //-->
+<!--////////////////////////////////////////////////-->
+<!--                                              //-->
+<!-- Controls:                                    //-->
+<!--  mouse                                       //-->
+<!--   move mouse : rotate target hexagon         //-->
+<!--   mouse click: generate new hexagon variant  //-->
+<!--                                              //-->
+<!--  keyboard                                    //-->
+<!--   1-7: switch between different schemas      //-->
+<!--   'c': generate different colors and size    //-->
+<!--   'h': show contours of hexagons             //-->
+<!--    any others: regenerate hexagons           //-->
+<!--////////////////////////////////////////////////-->
+<!--                                              //-->
+<!-- Contacts:                                    //-->
+<!--  https://codepen.io/Manoylov/                //-->
+<!--  https://www.instagram.com/manoylov_ac/      //-->
+<!--  https://www.openprocessing.org/user/23616/  //-->
+<!--  https://twitter.com/ManoylovAC              //-->
+<!--  https://www.facebook.com/epistolariy        //-->
+<!--  https://manoylov.tumblr.com/                //-->
+<!--////////////////////////////////////////////////-->
+<!--                                              //-->
+<!-- inspired by hexagon patterns                 //-->
+<!--////////////////////////////////////////////////-->
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/hexagon-tiling-7-ways/dist/script.js b/hexagon-tiling-7-ways/dist/script.js
new file mode 100644
index 0000000..03a006b
--- /dev/null
+++ b/hexagon-tiling-7-ways/dist/script.js
@@ -0,0 +1,440 @@
+////////////////////////////////////////////////////////
+//                       //                           //
+//   -~=Manoylov AC=~-   //        Hexagon Tiling     //
+//                       //                           //
+////////////////////////////////////////////////////////
+//                                                    //
+// Controls:                                          //
+//  mouse                                             //
+//    move mouse : rotate hovered hexagon             //
+//    mouse click: generate new hexagon variant       //
+//                                                    //
+//  keyboard                                          //
+//   1-7: switch between different hexagon patterns   //
+//   'c': generate different colors and size          //
+//   'h': show contours of hexagons                   //
+//    any others: regenerate hexagons                 //
+////////////////////////////////////////////////////////
+//                                                    //
+// Contacts:                                          //
+//    https://codepen.io/Manoylov/                    //
+//    https://www.instagram.com/manoylov_ac/          //
+//    https://www.openprocessing.org/user/23616/      //
+//    https://twitter.com/ManoylovAC                  //
+//    https://www.facebook.com/epistolariy            //
+//    https://manoylov.tumblr.com/                    //
+////////////////////////////////////////////////////////
+//                                                    //
+// inspired by hexagon patterns                       //
+////////////////////////////////////////////////////////
+
+let radius   = 70;
+let hexagons = [];
+let lineWidth    = radius;
+let colorPalette = [];
+let linesWidth   = [];
+let isShowHexagonShape = !true;
+let patternSchema      = 1;
+let isAnyUserAction    = false;
+
+const colorSchemas = [
+  {
+    lineColors  : ['#000', '#003333', '#5dd38e', '#007a6c', '#002c2c'],
+    widthFactors: [1, .9, .85, .55, .2]
+  }, {
+    lineColors  : ['#366f69', '#49B8A9', '#e7e6c2', '#393939'],
+    widthFactors: [1, .8, .5, .2]
+  }, {
+    lineColors  : ['#000000', '#e8edec', '#116979', '#39b8b6', '#0e3e4b'],
+    widthFactors: [1, .8, .5, .2]
+  }, {
+    lineColors  : ['#000000', '#f1f1f1'],
+    widthFactors: [1, .95]
+  }, {
+    lineColors  : ['#03141a', '#002c2c', '#366f69'],
+    widthFactors: [1, .9, .5]
+  }, {
+    lineColors  : ['#292837', '#42413E', '#879366', '#C8C37B'],
+    widthFactors: [1, .8, .5, .2]
+  }, {
+    lineColors  : ['#F3F2DB', '#79C3A7', '#668065', '#4B3331'],
+    widthFactors: [1, .8, .5, .2]
+  }, {
+    lineColors  : [ '#0F4155', '#288791', '#83c8a7'],
+    widthFactors: [1, .8, .4]
+  }, {
+    lineColors  : ['black', '#004b51', '#bcd381', '#3f9076', '#ecf5e5', '#86bbb3', 'black'],
+    widthFactors: [1, .96, .85, .5, .2]
+  }, {
+    lineColors  : ['#fff', '#856c8b',  '#d4ebd0', '#a4c5c6', '#ffeb99'],
+    widthFactors: [1, .85, .5, .2]
+  }, {
+    lineColors  : ['#000', '#f1f2f2', '#dee0e1', '#333334', '#6d6e71'],
+    widthFactors: [1, .96, .85, .5, .2]
+  }, {
+    lineColors  : ['#000', '#301305', '#496b4a', '#ecefe6', '#e2e2d8', '#38424e', '#000'],
+    widthFactors: [1, .96, .85, .5, .1]
+  }, {
+    lineColors  : ['black', '#856c8b', '#d4ebd0', '#a4c5c6', '#ffeb99'],
+    widthFactors: [1, .96, .85, .5, .2]
+  }, {
+    lineColors  : ['#000', '#38424e', '#dc6600', '#ecefe6', '#496b4a', '#301305'],
+    widthFactors: [1, .9, .8, .6, .2]
+  }
+];
+
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  setColorSchemaAndLinesWeight(1);
+  generateHexagonsArray(radius, linesWidth, colorPalette, isShowHexagonShape);
+  document.body.oncontextmenu = () => false;
+}
+
+function setColorSchemaAndLinesWeight(cSchema) {
+  const colorSchema = cSchema || ~~random(colorSchemas.length);
+
+  radius       = ~~random(45, 80);
+  lineWidth    = radius * random (.7, 1);
+
+  if (colorSchema === 3) {
+    radius     = ~~random(30, 50);
+    lineWidth  = radius * random (.7, .9);
+  }
+
+  colorPalette = colorSchemas[colorSchema].lineColors;
+  linesWidth   = colorSchemas[colorSchema].widthFactors.map(factor => lineWidth * factor);
+}
+
+function setSidesConnectionsOrder(segmentType = 0) {
+  let sideNumsOrder = [];
+
+  if (segmentType === 0 || segmentType === 1) {       // random
+    sideNumsOrder = shuffle([0, 1, 2, 3, 4, 5]);
+  } else if (segmentType === 2) {                // 3 arcs
+    sideNumsOrder = [].concat(...shuffle([[0, 1], [2, 3], [4, 5]]));
+  } else if (segmentType === 3) {                // 2 arcs 1 line
+    sideNumsOrder = [1, 2, 4, 5, 0, 3];
+  } else if (segmentType === 4) {                // 2 arcs 1 line
+    sideNumsOrder = [1, 2, 0, 3, 4, 5];
+  } else if (segmentType === 5) {                // 2 arches 1 line
+    sideNumsOrder = [].concat(...shuffle([[0, 3], [1, 5], [2, 4]]));
+  } else if (segmentType === 6) {                // 3 strait lines
+    sideNumsOrder = [0, 3, 1, 4, 2, 5];
+  } else if (segmentType === 7) {                // 2 arches 1 arc
+    sideNumsOrder = [].concat(...shuffle([[0, 2], [1, 3], [4, 5]]));
+  }
+
+  return sideNumsOrder;
+}
+
+function generateHexagonsArray(radius, linesWidth, colorPalette, isShowHexagonShape) {
+  const hexagonMask  = Hexagon.createHexagonMask(radius);
+  const hexagonWidth = Math.sqrt(3)/2 * radius;
+  let bgColor = '#fff';
+  hexagons    = [];
+
+  if (random() > .3) {
+    bgColor   = colorPalette[~~random(1, colorPalette.length)];
+  }
+
+  for (let y = hexagonWidth ; y <= height + hexagonWidth * 2; y += hexagonWidth * 2){
+    for (let x = radius, col = 0; x <= width + radius*2; x += radius * 1.5, ++col){
+      const sideNumsOrder = setSidesConnectionsOrder(patternSchema);
+      const startAngle    = radians(60 * ~~(random(6)));
+      const targetAngle   = random() < .08 ? startAngle + radians(60 * ~~(random(6))) : startAngle;
+
+      const tempHexagon   = new Hexagon(
+        {
+          x: x,
+          y: y + (col % 2 === 0 ? hexagonWidth : 0),
+          radius       : radius,
+          startAngle   : startAngle,
+          targetAngle  : targetAngle,
+          hexagonMask  : hexagonMask,
+          colorPalette : colorPalette,
+          linesWidth   : linesWidth,
+          sideNumsOrder: sideNumsOrder,
+          bgColor      : bgColor,
+          isShowShape  : isShowHexagonShape
+        }
+      );
+
+      // tempHexagon.targetAngle = TWO_PI / 6 * floor(random(6));
+      hexagons.push(tempHexagon);
+    }
+  }
+}
+
+function draw() {
+  background(colorPalette[1]);
+  hexagons.forEach((hexagon) => {
+    push();
+    translate(hexagon.xPos, hexagon.yPos);
+    hexagon.draw(0, 0);
+    pop();
+  });
+
+  if (!isAnyUserAction && frameCount % 600 === 0) {
+    patternSchema = ~~random(6);
+    setColorSchemaAndLinesWeight();
+    generateHexagonsArray(radius, linesWidth, colorPalette, isShowHexagonShape);
+  }
+}
+
+function findClosestHexagon(){
+  let closestHexagon  = hexagons[0];
+  let closestDistance = Infinity;
+
+  hexagons.forEach((hexagon) => {
+    let d = dist(
+      mouseX, mouseY,
+      hexagon.xPos - hexagon.radius,
+      hexagon.yPos - hexagon.radius
+    );
+
+    if (d < closestDistance) {
+      closestDistance = d;
+      closestHexagon = hexagon;
+    }
+  });
+
+  return closestHexagon;
+}
+
+function mousePressed() {
+  isAnyUserAction = true;
+  const closestHexagon = findClosestHexagon();
+
+  if (closestHexagon) {
+    closestHexagon.drawHexagonTile(setSidesConnectionsOrder());
+  }
+}
+
+function mouseMoved() {
+  const closestHexagon = findClosestHexagon();
+
+  if (abs(closestHexagon.targetAngle - closestHexagon.currAngle) < .2){
+    closestHexagon.targetAngle += TWO_PI / 6;
+  }
+}
+
+function keyPressed() {
+  isAnyUserAction = true;
+
+  if (keyCode === 67) {
+    setColorSchemaAndLinesWeight();
+  } else if (['0', '1', '2', '3', '4', '5', '6', '7'].includes(key)) {
+    patternSchema = parseInt(key);
+  } else if (key === ' ') {
+    patternSchema = ~~random(6);
+  } else if (key === 'h') {
+    isShowHexagonShape = !isShowHexagonShape;
+  }
+
+  generateHexagonsArray(radius, linesWidth, colorPalette, isShowHexagonShape);
+}
+
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+  generateHexagonsArray(radius, linesWidth, colorPalette, isShowHexagonShape);
+}
+
+///////////////////////////////////////////////////////////
+
+class Hexagon {
+  constructor({x, y, radius, startAngle, hexagonMask, linesWidth, colorPalette, sideNumsOrder, bgColor, targetAngle, isShowShape}) {
+    this.xPos          = x;
+    this.yPos          = y;
+    this.width         = Math.sqrt(3)/2 * radius;
+    this.radius        = radius;
+    this.currAngle     = startAngle || 0;
+    this.targetAngle   = targetAngle || startAngle || 0;
+    this.hexagonMask   = hexagonMask;
+    this.colorPalette  = colorPalette;
+    this.sideNumsOrder = sideNumsOrder;
+    this.bgColor       = bgColor || '#fff';
+    this.linesWidth    = linesWidth;
+    this.isShowShape   = isShowShape || false;
+    this.graphics      = createGraphics(radius*2, radius*2);
+    this.graphics      = Hexagon.drawHexagonTile(this.graphics, radius, hexagonMask, sideNumsOrder, linesWidth, colorPalette, bgColor, isShowShape);
+  }
+
+  drawHexagonTile(sideNumsOrder = this.sideNumsOrder) {
+    Hexagon.drawHexagonTile(this.graphics, radius, this.hexagonMask, sideNumsOrder, this.linesWidth, this.colorPalette, this.bgColor, this.isShowShape);
+  }
+
+  draw(x, y) {
+    push();
+    translate(x - this.radius, y - this.radius);
+    rotate(this.currAngle);
+    image(this.graphics, -this.radius, -this.radius);
+    pop();
+
+    // prevention of extra calculations for rotate
+    if(this.currAngle !== this.targetAngle) {
+      // rotate easing
+      this.currAngle += (this.targetAngle - this.currAngle) * 0.12;
+
+      if (Math.abs(this.currAngle - this.targetAngle) < .0001) {
+        this.currAngle = this.targetAngle;
+      }
+    }
+  }
+}
+
+Hexagon.drawHexagonShape = (ctx, radius, {strokeColor = 'black', strokeW = 1, isFilled = false, fillColor = 'black'} = {}) => {
+  const diameter   = radius * 2;
+  const sidesNum   = 6;
+  const angleStep  = 360 / sidesNum;
+  const centerXpos = diameter/2;
+  const centerYpos = diameter/2;
+
+  ctx.push();
+  ctx.beginShape();
+
+  if (isFilled) {
+    ctx.fill(fillColor);
+  } else {
+    ctx.noFill();
+  }
+
+  ctx.stroke(strokeColor);
+  ctx.strokeWeight(strokeW);
+
+  for (let a = 0; a <= 360; a += angleStep) {
+    let x = (radius + .5) * cos(radians(a)) + centerXpos;
+    let y = (radius + .5) * sin(radians(a)) + centerYpos;
+
+    ctx.vertex(x, y);
+  }
+  ctx.endShape();
+  ctx.pop();
+};
+
+Hexagon.createHexagonMask = (radius) => {
+  const hexagonMask = createGraphics(radius * 2, radius * 2);
+  Hexagon.drawHexagonShape(hexagonMask, radius, {strokeColor: 'black', strokeW: 1, isFilled: true});
+
+  return hexagonMask;
+};
+
+Hexagon.drawHexagonTile = (ctx, radius, maskForCtx, sideNumsOrder, linesWidth, colorPalette, bgColor = '#fff', isShowHexagonShape = false) => {
+  ctx.drawingContext.globalCompositeOperation = 'source-over';
+  const angleStep = TWO_PI / 6;
+
+  ctx.noFill();
+  ctx.strokeWeight(lineWidth);
+  ctx.background(bgColor);
+
+  for (let i = 0; i < sideNumsOrder.length; i += 2) {
+    let firstRndSideNum  = sideNumsOrder[i];
+    let secondRndSideNum = sideNumsOrder[i + 1];
+
+    if (firstRndSideNum > secondRndSideNum) {
+      // a swap of values so that the second side is after the first
+      // just to simplify future calculations
+      [firstRndSideNum, secondRndSideNum] = [secondRndSideNum, firstRndSideNum];
+    }
+
+    const startDrawPoint = Hexagon._getMiddlePointBetweenVertexes(secondRndSideNum, secondRndSideNum + 1, angleStep);
+    const endDrawPoint   = Hexagon._getMiddlePointBetweenVertexes(firstRndSideNum, firstRndSideNum + 1, angleStep);
+    const diff           = Math.abs(secondRndSideNum - firstRndSideNum);
+
+    switch (diff) {
+      // neighbor sides - arc or 1/3 of circle
+      case 5: secondRndSideNum = 6; // convert 0 pos to 6
+      case 1: {
+        for (let j = 0; j < linesWidth.length; j++) {
+          Hexagon.drawArc(ctx, radius, secondRndSideNum, angleStep, linesWidth[j], colorPalette[j]);
+        }
+        break;
+      }
+      // sides through one - curve or oval segment
+      case 4: [firstRndSideNum, secondRndSideNum] = [secondRndSideNum, firstRndSideNum];
+      case 2: {
+        for (let j = 0; j < linesWidth.length; j++) {
+          Hexagon.drawArch(ctx, radius, firstRndSideNum, angleStep, linesWidth[j], colorPalette[j]);
+        }
+        break;
+      }
+      // opposite - strait line
+      case 3: {
+        for (let j = 0; j < linesWidth.length; j++) {
+          Hexagon.drawLine(ctx, startDrawPoint, endDrawPoint, linesWidth[j], colorPalette[j]);
+        }
+        break;
+      }
+    }
+  }
+
+  if (isShowHexagonShape) {
+    Hexagon.drawHexagonShape(ctx, radius);
+  }
+
+  ctx.drawingContext.globalCompositeOperation ="destination-in";
+  ctx.image(maskForCtx, 0, 0);
+
+  return ctx;
+};
+
+
+Hexagon._getVertexPos = (vertexNum, angleStep) => {
+  const vertexAngle = vertexNum * angleStep;
+
+  return {
+    x: cos(vertexAngle) * radius + radius,
+    y: sin(vertexAngle) * radius + radius
+  };
+};
+
+Hexagon._getMiddlePointBetweenVertexes = (vertexNum1, vertexNum2, angleStep) => {
+  const firstVertexPos = Hexagon._getVertexPos(vertexNum1, angleStep);
+  const nextVertexPos  = Hexagon._getVertexPos(vertexNum2, angleStep);
+
+  return {
+    x: lerp(firstVertexPos.x, nextVertexPos.x, .5),
+    y: lerp(firstVertexPos.y, nextVertexPos.y, .5)
+  };
+};
+
+
+
+// drawing strait line for opposite sides of hexagon
+Hexagon.drawLine = (ctx, startDrawPoint, endDrawPoint, lineWidth, color = 'black') => {
+  ctx.push();
+  ctx.stroke(color);
+  ctx.strokeWeight(lineWidth);
+  ctx.line(startDrawPoint.x, startDrawPoint.y, endDrawPoint.x, endDrawPoint.y);
+  ctx.pop();
+};
+
+// drawing arc for neighbor sides of hexagon - 1/3 of circle
+ Hexagon.drawArc = (ctx, radius, startDrawSideNum, angleStep, lineWidth, color = 'black') => {
+  const middleVertex  = Hexagon._getVertexPos(startDrawSideNum, angleStep);
+  const startArcAngle = radians(120);
+
+  ctx.push();
+  ctx.translate(middleVertex.x, middleVertex.y);
+  ctx.rotate(radians(startDrawSideNum * 60));
+  ctx.strokeWeight(lineWidth);
+  ctx.stroke(color);
+  ctx.arc(0, 0, radius, radius, startArcAngle, startArcAngle + radians(120));
+  ctx.pop();
+};
+
+// drawing arc between sides through one - curve or oval segment
+Hexagon.drawArch = (ctx, radius, firstSideNum, angleStep, lineWidth, color = 'black') => {
+  const startArcAngle    = radians(240);
+  const ellipseRadius    = radius * 3;
+
+  ctx.push();
+  ctx.stroke(color);
+  ctx.strokeWeight(lineWidth);
+  ctx.translate(radius, radius);
+  ctx.rotate(radians( firstSideNum * 60));
+  ctx.translate(0, radius * 1.7315);
+  ctx.arc(0, 0, ellipseRadius, ellipseRadius , startArcAngle, startArcAngle + radians(60));
+  ctx.pop();
+};
\ No newline at end of file
diff --git a/hexagon-tiling-7-ways/dist/style.css b/hexagon-tiling-7-ways/dist/style.css
new file mode 100644
index 0000000..4dccfe0
--- /dev/null
+++ b/hexagon-tiling-7-ways/dist/style.css
@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/hexagon-tiling-7-ways/license.txt b/hexagon-tiling-7-ways/license.txt
new file mode 100644
index 0000000..f7c56b0
--- /dev/null
+++ b/hexagon-tiling-7-ways/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by AndyMan (https://codepen.io/Manoylov/pen/dyorBVb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/hexagon-tiling-7-ways/src/index.pug b/hexagon-tiling-7-ways/src/index.pug
new file mode 100644
index 0000000..9383aa3
--- /dev/null
+++ b/hexagon-tiling-7-ways/src/index.pug
@@ -0,0 +1,29 @@
+//////////////////////////////////////////////////
+//                       //                     //
+//   -~=Manoylov AC=~-   //   Hexagon Tiling    //
+//                       //                     //
+//////////////////////////////////////////////////
+//                                              //
+// Controls:                                    //
+//  mouse                                       //
+//   move mouse : rotate target hexagon         //
+//   mouse click: generate new hexagon variant  //
+//                                              //
+//  keyboard                                    //
+//   1-7: switch between different schemas      //
+//   'c': generate different colors and size    //
+//   'h': show contours of hexagons             //
+//    any others: regenerate hexagons           //
+//////////////////////////////////////////////////
+//                                              //
+// Contacts:                                    //
+//  https://codepen.io/Manoylov/                //
+//  https://www.instagram.com/manoylov_ac/      //
+//  https://www.openprocessing.org/user/23616/  //
+//  https://twitter.com/ManoylovAC              //
+//  https://www.facebook.com/epistolariy        //
+//  https://manoylov.tumblr.com/                //
+//////////////////////////////////////////////////
+//                                              //
+// inspired by hexagon patterns                 //
+//////////////////////////////////////////////////
\ No newline at end of file
diff --git a/hexagon-tiling-7-ways/src/script.js b/hexagon-tiling-7-ways/src/script.js
new file mode 100644
index 0000000..ac9b0b0
--- /dev/null
+++ b/hexagon-tiling-7-ways/src/script.js
@@ -0,0 +1,440 @@
+////////////////////////////////////////////////////////
+//                       //                           //
+//   -~=Manoylov AC=~-   //        Hexagon Tiling     //
+//                       //                           //
+////////////////////////////////////////////////////////
+//                                                    //
+// Controls:                                          //
+//  mouse                                             //
+//    move mouse : rotate hovered hexagon             //
+//    mouse click: generate new hexagon variant       //
+//                                                    //
+//  keyboard                                          //
+//   1-7: switch between different hexagon patterns   //
+//   'c': generate different colors and size          //
+//   'h': show contours of hexagons                   //
+//    any others: regenerate hexagons                 //
+////////////////////////////////////////////////////////
+//                                                    //
+// Contacts:                                          //
+//    https://codepen.io/Manoylov/                    //
+//    https://www.instagram.com/manoylov_ac/          //
+//    https://www.openprocessing.org/user/23616/      //
+//    https://twitter.com/ManoylovAC                  //
+//    https://www.facebook.com/epistolariy            //
+//    https://manoylov.tumblr.com/                    //
+////////////////////////////////////////////////////////
+//                                                    //
+// inspired by hexagon patterns                       //
+////////////////////////////////////////////////////////
+
+let radius   = 70;
+let hexagons = [];
+let lineWidth    = radius;
+let colorPalette = [];
+let linesWidth   = [];
+let isShowHexagonShape = !true;
+let patternSchema      = 1;
+let isAnyUserAction    = false;
+
+const colorSchemas = [
+  {
+    lineColors  : ['#000', '#003333', '#5dd38e', '#007a6c', '#002c2c'],
+    widthFactors: [1, .9, .85, .55, .2]
+  }, {
+    lineColors  : ['#366f69', '#49B8A9', '#e7e6c2', '#393939'],
+    widthFactors: [1, .8, .5, .2]
+  }, {
+    lineColors  : ['#000000', '#e8edec', '#116979', '#39b8b6', '#0e3e4b'],
+    widthFactors: [1, .8, .5, .2]
+  }, {
+    lineColors  : ['#000000', '#f1f1f1'],
+    widthFactors: [1, .95]
+  }, {
+    lineColors  : ['#03141a', '#002c2c', '#366f69'],
+    widthFactors: [1, .9, .5]
+  }, {
+    lineColors  : ['#292837', '#42413E', '#879366', '#C8C37B'],
+    widthFactors: [1, .8, .5, .2]
+  }, {
+    lineColors  : ['#F3F2DB', '#79C3A7', '#668065', '#4B3331'],
+    widthFactors: [1, .8, .5, .2]
+  }, {
+    lineColors  : [ '#0F4155', '#288791', '#83c8a7'],
+    widthFactors: [1, .8, .4]
+  }, {
+    lineColors  : ['black', '#004b51', '#bcd381', '#3f9076', '#ecf5e5', '#86bbb3', 'black'],
+    widthFactors: [1, .96, .85, .5, .2]
+  }, {
+    lineColors  : ['#fff', '#856c8b',  '#d4ebd0', '#a4c5c6', '#ffeb99'],
+    widthFactors: [1, .85, .5, .2]
+  }, {
+    lineColors  : ['#000', '#f1f2f2', '#dee0e1', '#333334', '#6d6e71'],
+    widthFactors: [1, .96, .85, .5, .2]
+  }, {
+    lineColors  : ['#000', '#301305', '#496b4a', '#ecefe6', '#e2e2d8', '#38424e', '#000'],
+    widthFactors: [1, .96, .85, .5, .1]
+  }, {
+    lineColors  : ['black', '#856c8b', '#d4ebd0', '#a4c5c6', '#ffeb99'],
+    widthFactors: [1, .96, .85, .5, .2]
+  }, {
+    lineColors  : ['#000', '#38424e', '#dc6600', '#ecefe6', '#496b4a', '#301305'],
+    widthFactors: [1, .9, .8, .6, .2]
+  }
+];
+
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  setColorSchemaAndLinesWeight(1);
+  generateHexagonsArray(radius, linesWidth, colorPalette, isShowHexagonShape);
+  document.body.oncontextmenu = () => false;
+}
+
+function setColorSchemaAndLinesWeight(cSchema) {
+  const colorSchema = cSchema || ~~random(colorSchemas.length);
+
+  radius       = ~~random(45, 80);
+  lineWidth    = radius * random (.7, 1);
+
+  if (colorSchema === 3) {
+    radius     = ~~random(30, 50);
+    lineWidth  = radius * random (.7, .9);
+  }
+
+  colorPalette = colorSchemas[colorSchema].lineColors;
+  linesWidth   = colorSchemas[colorSchema].widthFactors.map(factor => lineWidth * factor);
+}
+
+function setSidesConnectionsOrder(segmentType = 0) {
+  let sideNumsOrder = [];
+
+  if (segmentType === 0 || segmentType === 1) {       // random
+    sideNumsOrder = shuffle([0, 1, 2, 3, 4, 5]);
+  } else if (segmentType === 2) {                // 3 arcs
+    sideNumsOrder = [].concat(...shuffle([[0, 1], [2, 3], [4, 5]]));
+  } else if (segmentType === 3) {                // 2 arcs 1 line
+    sideNumsOrder = [1, 2, 4, 5, 0, 3];
+  } else if (segmentType === 4) {                // 2 arcs 1 line
+    sideNumsOrder = [1, 2, 0, 3, 4, 5];
+  } else if (segmentType === 5) {                // 2 arches 1 line
+    sideNumsOrder = [].concat(...shuffle([[0, 3], [1, 5], [2, 4]]));
+  } else if (segmentType === 6) {                // 3 strait lines
+    sideNumsOrder = [0, 3, 1, 4, 2, 5];
+  } else if (segmentType === 7) {                // 2 arches 1 arc
+    sideNumsOrder = [].concat(...shuffle([[0, 2], [1, 3], [4, 5]]));
+  }
+
+  return sideNumsOrder;
+}
+
+function generateHexagonsArray(radius, linesWidth, colorPalette, isShowHexagonShape) {
+  const hexagonMask  = Hexagon.createHexagonMask(radius);
+  const hexagonWidth = Math.sqrt(3)/2 * radius;
+  let bgColor = '#fff';
+  hexagons    = [];
+
+  if (random() > .3) {
+    bgColor   = colorPalette[~~random(1, colorPalette.length)];
+  }
+
+  for (let y = hexagonWidth ; y <= height + hexagonWidth * 2; y += hexagonWidth * 2){
+    for (let x = radius, col = 0; x <= width + radius*2; x += radius * 1.5, ++col){
+      const sideNumsOrder = setSidesConnectionsOrder(patternSchema);
+      const startAngle    = radians(60 * ~~(random(6)));
+      const targetAngle   = random() < .08 ? startAngle + radians(60 * ~~(random(6))) : startAngle;
+
+      const tempHexagon   = new Hexagon(
+        {
+          x: x,
+          y: y + (col % 2 === 0 ? hexagonWidth : 0),
+          radius       : radius,
+          startAngle   : startAngle,
+          targetAngle  : targetAngle,
+          hexagonMask  : hexagonMask,
+          colorPalette : colorPalette,
+          linesWidth   : linesWidth,
+          sideNumsOrder: sideNumsOrder,
+          bgColor      : bgColor,
+          isShowShape  : isShowHexagonShape
+        }
+      );
+
+      // tempHexagon.targetAngle = TWO_PI / 6 * floor(random(6));
+      hexagons.push(tempHexagon);
+    }
+  }
+}
+
+function draw() {
+  background(colorPalette[1]);
+  hexagons.forEach((hexagon) => {
+    push();
+    translate(hexagon.xPos, hexagon.yPos);
+    hexagon.draw(0, 0);
+    pop();
+  });
+
+  if (!isAnyUserAction && frameCount % 600 === 0) {
+    patternSchema = ~~random(6);
+    setColorSchemaAndLinesWeight();
+    generateHexagonsArray(radius, linesWidth, colorPalette, isShowHexagonShape);
+  }
+}
+
+function findClosestHexagon(){
+  let closestHexagon  = hexagons[0];
+  let closestDistance = Infinity;
+
+  hexagons.forEach((hexagon) => {
+    let d = dist(
+      mouseX, mouseY,
+      hexagon.xPos - hexagon.radius,
+      hexagon.yPos - hexagon.radius
+    );
+
+    if (d < closestDistance) {
+      closestDistance = d;
+      closestHexagon = hexagon;
+    }
+  });
+
+  return closestHexagon;
+}
+
+function mousePressed() {
+  isAnyUserAction = true;
+  const closestHexagon = findClosestHexagon();
+
+  if (closestHexagon) {
+    closestHexagon.drawHexagonTile(setSidesConnectionsOrder());
+  }
+}
+
+function mouseMoved() {
+  const closestHexagon = findClosestHexagon();
+
+  if (abs(closestHexagon.targetAngle - closestHexagon.currAngle) < .2){
+    closestHexagon.targetAngle += TWO_PI / 6;
+  }
+}
+
+function keyPressed() {
+  isAnyUserAction = true;
+
+  if (keyCode === 67) {
+    setColorSchemaAndLinesWeight();
+  } else if (['0', '1', '2', '3', '4', '5', '6', '7'].includes(key)) {
+    patternSchema = parseInt(key);
+  } else if (key === ' ') {
+    patternSchema = ~~random(6);
+  } else if (key === 'h') {
+    isShowHexagonShape = !isShowHexagonShape;
+  }
+
+  generateHexagonsArray(radius, linesWidth, colorPalette, isShowHexagonShape);
+}
+
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+  generateHexagonsArray(radius, linesWidth, colorPalette, isShowHexagonShape);
+}
+
+///////////////////////////////////////////////////////////
+
+class Hexagon {
+  constructor({x, y, radius, startAngle, hexagonMask, linesWidth, colorPalette, sideNumsOrder, bgColor, targetAngle, isShowShape}) {
+    this.xPos          = x;
+    this.yPos          = y;
+    this.width         = Math.sqrt(3)/2 * radius;
+    this.radius        = radius;
+    this.currAngle     = startAngle || 0;
+    this.targetAngle   = targetAngle || startAngle || 0;
+    this.hexagonMask   = hexagonMask;
+    this.colorPalette  = colorPalette;
+    this.sideNumsOrder = sideNumsOrder;
+    this.bgColor       = bgColor || '#fff';
+    this.linesWidth    = linesWidth;
+    this.isShowShape   = isShowShape || false;
+    this.graphics      = createGraphics(radius*2, radius*2);
+    this.graphics      = Hexagon.drawHexagonTile(this.graphics, radius, hexagonMask, sideNumsOrder, linesWidth, colorPalette, bgColor, isShowShape);
+  }
+
+  drawHexagonTile(sideNumsOrder = this.sideNumsOrder) {
+    Hexagon.drawHexagonTile(this.graphics, radius, this.hexagonMask, sideNumsOrder, this.linesWidth, this.colorPalette, this.bgColor, this.isShowShape);
+  }
+
+  draw(x, y) {
+    push();
+    translate(x - this.radius, y - this.radius);
+    rotate(this.currAngle);
+    image(this.graphics, -this.radius, -this.radius);
+    pop();
+
+    // prevention of extra calculations for rotate
+    if(this.currAngle !== this.targetAngle) {
+      // rotate easing
+      this.currAngle += (this.targetAngle - this.currAngle) * 0.12;
+
+      if (Math.abs(this.currAngle - this.targetAngle) < .0001) {
+        this.currAngle = this.targetAngle;
+      }
+    }
+  }
+}
+
+Hexagon.drawHexagonShape = (ctx, radius, {strokeColor = 'black', strokeW = 1, isFilled = false, fillColor = 'black'} = {}) => {
+  const diameter   = radius * 2;
+  const sidesNum   = 6;
+  const angleStep  = 360 / sidesNum;
+  const centerXpos = diameter/2;
+  const centerYpos = diameter/2;
+
+  ctx.push();
+  ctx.beginShape();
+
+  if (isFilled) {
+    ctx.fill(fillColor);
+  } else {
+    ctx.noFill();
+  }
+
+  ctx.stroke(strokeColor);
+  ctx.strokeWeight(strokeW);
+
+  for (let a = 0; a <= 360; a += angleStep) {
+    let x = (radius + .5) * cos(radians(a)) + centerXpos;
+    let y = (radius + .5) * sin(radians(a)) + centerYpos;
+
+    ctx.vertex(x, y);
+  }
+  ctx.endShape();
+  ctx.pop();
+};
+
+Hexagon.createHexagonMask = (radius) => {
+  const hexagonMask = createGraphics(radius * 2, radius * 2);
+  Hexagon.drawHexagonShape(hexagonMask, radius, {strokeColor: 'black', strokeW: 1, isFilled: true});
+
+  return hexagonMask;
+};
+
+Hexagon.drawHexagonTile = (ctx, radius, maskForCtx, sideNumsOrder, linesWidth, colorPalette, bgColor = '#fff', isShowHexagonShape = false) => {
+  ctx.drawingContext.globalCompositeOperation = 'source-over';
+  const angleStep = TWO_PI / 6;
+
+  ctx.noFill();
+  ctx.strokeWeight(lineWidth);
+  ctx.background(bgColor);
+
+  for (let i = 0; i < sideNumsOrder.length; i += 2) {
+    let firstRndSideNum  = sideNumsOrder[i];
+    let secondRndSideNum = sideNumsOrder[i + 1];
+
+    if (firstRndSideNum > secondRndSideNum) {
+      // a swap of values so that the second side is after the first
+      // just to simplify future calculations
+      [firstRndSideNum, secondRndSideNum] = [secondRndSideNum, firstRndSideNum];
+    }
+
+    const startDrawPoint = Hexagon._getMiddlePointBetweenVertexes(secondRndSideNum, secondRndSideNum + 1, angleStep);
+    const endDrawPoint   = Hexagon._getMiddlePointBetweenVertexes(firstRndSideNum, firstRndSideNum + 1, angleStep);
+    const diff           = Math.abs(secondRndSideNum - firstRndSideNum);
+
+    switch (diff) {
+      // neighbor sides - arc or 1/3 of circle
+      case 5: secondRndSideNum = 6; // convert 0 pos to 6
+      case 1: {
+        for (let j = 0; j < linesWidth.length; j++) {
+          Hexagon.drawArc(ctx, radius, secondRndSideNum, angleStep, linesWidth[j], colorPalette[j]);
+        }
+        break;
+      }
+      // sides through one - curve or oval segment
+      case 4: [firstRndSideNum, secondRndSideNum] = [secondRndSideNum, firstRndSideNum];
+      case 2: {
+        for (let j = 0; j < linesWidth.length; j++) {
+          Hexagon.drawArch(ctx, radius, firstRndSideNum, angleStep, linesWidth[j], colorPalette[j]);
+        }
+        break;
+      }
+      // opposite - strait line
+      case 3: {
+        for (let j = 0; j < linesWidth.length; j++) {
+          Hexagon.drawLine(ctx, startDrawPoint, endDrawPoint, linesWidth[j], colorPalette[j]);
+        }
+        break;
+      }
+    }
+  }
+
+  if (isShowHexagonShape) {
+    Hexagon.drawHexagonShape(ctx, radius);
+  }
+
+  ctx.drawingContext.globalCompositeOperation ="destination-in";
+  ctx.image(maskForCtx, 0, 0);
+
+  return ctx;
+};
+
+
+Hexagon._getVertexPos = (vertexNum, angleStep) => {
+  const vertexAngle = vertexNum * angleStep;
+
+  return {
+    x: cos(vertexAngle) * radius + radius,
+    y: sin(vertexAngle) * radius + radius
+  };
+};
+
+Hexagon._getMiddlePointBetweenVertexes = (vertexNum1, vertexNum2, angleStep) => {
+  const firstVertexPos = Hexagon._getVertexPos(vertexNum1, angleStep);
+  const nextVertexPos  = Hexagon._getVertexPos(vertexNum2, angleStep);
+
+  return {
+    x: lerp(firstVertexPos.x, nextVertexPos.x, .5),
+    y: lerp(firstVertexPos.y, nextVertexPos.y, .5)
+  };
+};
+
+
+
+// drawing strait line for opposite sides of hexagon
+Hexagon.drawLine = (ctx, startDrawPoint, endDrawPoint, lineWidth, color = 'black') => {
+  ctx.push();
+  ctx.stroke(color);
+  ctx.strokeWeight(lineWidth);
+  ctx.line(startDrawPoint.x, startDrawPoint.y, endDrawPoint.x, endDrawPoint.y);
+  ctx.pop();
+};
+
+// drawing arc for neighbor sides of hexagon - 1/3 of circle
+ Hexagon.drawArc = (ctx, radius, startDrawSideNum, angleStep, lineWidth, color = 'black') => {
+  const middleVertex  = Hexagon._getVertexPos(startDrawSideNum, angleStep);
+  const startArcAngle = radians(120);
+
+  ctx.push();
+  ctx.translate(middleVertex.x, middleVertex.y);
+  ctx.rotate(radians(startDrawSideNum * 60));
+  ctx.strokeWeight(lineWidth);
+  ctx.stroke(color);
+  ctx.arc(0, 0, radius, radius, startArcAngle, startArcAngle + radians(120));
+  ctx.pop();
+};
+
+// drawing arc between sides through one - curve or oval segment
+Hexagon.drawArch = (ctx, radius, firstSideNum, angleStep, lineWidth, color = 'black') => {
+  const startArcAngle    = radians(240);
+  const ellipseRadius    = radius * 3;
+
+  ctx.push();
+  ctx.stroke(color);
+  ctx.strokeWeight(lineWidth);
+  ctx.translate(radius, radius);
+  ctx.rotate(radians( firstSideNum * 60));
+  ctx.translate(0, radius * 1.7315);
+  ctx.arc(0, 0, ellipseRadius, ellipseRadius , startArcAngle, startArcAngle + radians(60));
+  ctx.pop();
+};
diff --git a/hexagon-tiling-7-ways/src/style.scss b/hexagon-tiling-7-ways/src/style.scss
new file mode 100644
index 0000000..43bf666
--- /dev/null
+++ b/hexagon-tiling-7-ways/src/style.scss
@@ -0,0 +1,5 @@
+body{
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/holiday-cssweater-generator/README.markdown b/holiday-cssweater-generator/README.markdown
new file mode 100644
index 0000000..9971364
--- /dev/null
+++ b/holiday-cssweater-generator/README.markdown
@@ -0,0 +1,4 @@
+# Holiday CSSweater Generator
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/ZEYzMBj](https://codepen.io/cobra_winfrey/pen/ZEYzMBj).
+
+ 
\ No newline at end of file
diff --git a/holiday-cssweater-generator/dist/index.html b/holiday-cssweater-generator/dist/index.html
new file mode 100644
index 0000000..e10ce34
--- /dev/null
+++ b/holiday-cssweater-generator/dist/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Holiday CSSweater Generator</title>
+  
+<link href="https://fonts.googleapis.com/css?family=UnifrakturCook:700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<button class='darkmode'>dark mode</button>
+<button class='refresh'>regenerate</button>
+<div id='wrap'>
+  <div class='row'>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+  </div>
+  <div class='row'>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+  </div>
+  <div class='row'>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+  </div>
+  <div class='row'>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+  </div>
+  <div class='row'>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+  </div>
+  <div class='row'>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+  </div>
+  <div class='row'>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+  </div>
+  <div class='row'>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+  </div>
+  <div class='row'>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+  </div>
+  <div class='row'>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+    <div class='cell'></div>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/holiday-cssweater-generator/dist/script.js b/holiday-cssweater-generator/dist/script.js
new file mode 100644
index 0000000..a98db4c
--- /dev/null
+++ b/holiday-cssweater-generator/dist/script.js
@@ -0,0 +1,53 @@
+function draw() {
+  $("#wrap, body").addClass('hide');
+  $(".refresh").addClass("loading");
+  setTimeout(function() {
+    $("#wrap, body").removeClass("hide");
+    $(".refresh").removeClass("loading");
+    $(".row").removeClass();
+    $("#wrap > div").addClass("row");
+    $(".cell").removeClass();
+    $("#wrap .row > div").addClass("cell");
+    if ($("body").hasClass("darkmode")){
+      $(".cell").addClass("darkmode");
+    }
+    $(wrap)
+        .get(0)
+        .style.setProperty("--hue", (Math.floor(Math.random() * 2) * 100) + 'deg');
+    $("#wrap .cell").each(function() {
+      $(this).addClass("cell" + Math.floor(Math.random() * 16 + 1));
+$(this).parent().removeClass();     $(this).parent().addClass("row full" + Math.floor(Math.random() * 22 + 1));
+    });
+    $(".cell").each(function() {
+
+      $(this)
+        .parent()
+        .get(0)
+        .style.setProperty("--size", Math.floor(Math.random() * 2 + 1));
+
+      
+      $(this)
+        .parent()
+        .get(0)
+        .style.setProperty("--angle", ((Math.floor(Math.random() * 2) + 1) * 180) + "deg");
+      
+    });
+  }, 2000);
+  
+  
+}
+
+$(".darkmode").click(function(){
+  $("body").toggleClass("darkmode");
+  $(this).toggleClass("active");
+  draw();
+})
+
+$(".refresh").on("click", function() {
+    draw();
+  });
+
+$(document).ready(function(){
+  $("#wrap").removeClass('hide');
+  draw();
+})
\ No newline at end of file
diff --git a/holiday-cssweater-generator/dist/style.css b/holiday-cssweater-generator/dist/style.css
new file mode 100644
index 0000000..79130fe
--- /dev/null
+++ b/holiday-cssweater-generator/dist/style.css
@@ -0,0 +1,1673 @@
+body {
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+}
+@media (max-height: 800px) {
+  body {
+    zoom: 0.75;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translateX(-50%) translateY(-50%);
+            transform: translateX(-50%) translateY(-50%);
+  }
+}
+body:before {
+  content: '';
+  position: absolute;
+  width: 500%;
+  height: 100%;
+  background: linear-gradient(55deg, transparent 2.5px, #666 2.5px, #666 3.5px, #666 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #666 2.5px, #666 3.5px, #666 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #666 2.5px, #666 3.5px, #666 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #666 2.5px, #666 3.5px, #666 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  opacity: 0;
+  transition: 0.5s ease-in-out;
+}
+@media (max-height: 800px) {
+  body:before {
+    height: 200%;
+    top: -50%;
+  }
+}
+body.darkmode {
+  -webkit-filter: saturate(0) brightness(0.75) contrast(1.25);
+          filter: saturate(0) brightness(0.75) contrast(1.25);
+}
+body.darkmode:before {
+  opacity: 1;
+}
+body button {
+  position: absolute;
+  margin-bottom: 50px;
+  top: calc(50% + 350px);
+  color: #fff;
+  padding: 5px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  border: none;
+  background: transparent;
+  font-family: Futura;
+  font-weight: 900;
+  text-shadow: 0 5px 10px black;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  left: calc(50% + 100px);
+  outline: none;
+  cursor: pointer;
+}
+body button:focus, body button:hover {
+  outline: none;
+}
+body button.refresh.loading:before {
+  width: 70px;
+  transition: width 1s ease-in-out;
+  transition-delay: 0s;
+  -webkit-animation: bgload 2s ease-in 1 forwards;
+          animation: bgload 2s ease-in 1 forwards;
+}
+@-webkit-keyframes bgload {
+  to {
+    background-position: -200px 50%, 50% 50%;
+  }
+}
+@keyframes bgload {
+  to {
+    background-position: -200px 50%, 50% 50%;
+  }
+}
+body button.refresh:before {
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition-delay: 1.25s;
+  background: repeating-linear-gradient(45deg, #fff 2px, transparent 2px, transparent 9px, #fff 9px, #fff 11px), green;
+  background-size: 1100px 100%, 100%;
+  background-repeat: no-repeat;
+  background-position: -400px 50%, 50% 50%;
+  -webkit-animation: bgload2 1.5s ease-out 1 forwards;
+          animation: bgload2 1.5s ease-out 1 forwards;
+}
+@-webkit-keyframes bgload2 {
+  from {
+    background-position: -200px 50%, 50% 50%;
+  }
+  to {
+    background-position: 0px 50%, 50% 50%;
+  }
+}
+@keyframes bgload2 {
+  from {
+    background-position: -200px 50%, 50% 50%;
+  }
+  to {
+    background-position: 0px 50%, 50% 50%;
+  }
+}
+body button.active:before {
+  -webkit-transform: translateX(25px);
+          transform: translateX(25px);
+  background: #222;
+}
+body button:before {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: green;
+  border-radius: 25px;
+  top: 37.5px;
+  z-index: 2;
+  left: calc(50% - 10px);
+  -webkit-transform: translateX(-25px);
+          transform: translateX(-25px);
+  box-shadow: inset 0 -1.5px 5px rgba(0, 0, 0, 0.75);
+  transition: 0.3s ease-in-out;
+}
+body button:after {
+  content: '';
+  position: absolute;
+  width: 75px;
+  left: calc(50% - 37.5px);
+  height: 25px;
+  box-shadow: 0 0 0 2px #fff, 0 5px 10px black;
+  top: 35px;
+  border-radius: 25px;
+  background: rgba(255, 255, 255, 0.75);
+  z-index: 0;
+}
+body button:first-of-type {
+  left: calc(50% - 100px);
+}
+body #wrap {
+  display: grid;
+  transition: -webkit-filter 0.5s ease-in-out;
+  transition: filter 0.5s ease-in-out;
+  transition: filter 0.5s ease-in-out, -webkit-filter 0.5s ease-in-out;
+  -webkit-filter: hue-rotate(var(--hue));
+          filter: hue-rotate(var(--hue));
+  grid-template-rows: repeat(10, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  width: 700px;
+  height: 700px;
+  position: relative;
+  margin-top: -40px;
+  z-index: 2;
+  box-shadow: 0 40px 40px -10px rgba(0, 0, 0, 0.5), 0 0 0 200vh rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: 0px 50%, -10.5px 50%, 0px calc(50% - 6px), -10.5px calc(50% - 6px);
+  overflow: hidden;
+  min-width: 700px;
+}
+body #wrap.hide .row {
+  -webkit-clip-path: polygon(-100% -100%, -100% -100%, -100% 200%, -100% 200%);
+          clip-path: polygon(-100% -100%, -100% -100%, -100% 200%, -100% 200%);
+}
+body #wrap .row {
+  width: 50%;
+  height: 100%;
+  margin-left: 50%;
+  top: 0;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  -webkit-box-reflect: left;
+  -webkit-clip-path: polygon(-100% -100%, 100% -100%, 100% 200%, -100% 200%);
+          clip-path: polygon(-100% -100%, 100% -100%, 100% 200%, -100% 200%);
+  transition: 1s ease-in-out;
+}
+body #wrap .row:nth-of-type(even) {
+  transition: 0.8s ease-in-out;
+}
+body #wrap .row:nth-of-type(1) {
+  transition-delay: 0.1s;
+}
+body #wrap .row:nth-of-type(even) {
+  transition: 0.8s ease-in-out;
+}
+body #wrap .row:nth-of-type(2) {
+  transition-delay: 0.2s;
+}
+body #wrap .row:nth-of-type(even) {
+  transition: 0.8s ease-in-out;
+}
+body #wrap .row:nth-of-type(3) {
+  transition-delay: 0.3s;
+}
+body #wrap .row:nth-of-type(even) {
+  transition: 0.8s ease-in-out;
+}
+body #wrap .row:nth-of-type(4) {
+  transition-delay: 0.4s;
+}
+body #wrap .row:nth-of-type(even) {
+  transition: 0.8s ease-in-out;
+}
+body #wrap .row:nth-of-type(5) {
+  transition-delay: 0.5s;
+}
+body #wrap .row:nth-of-type(even) {
+  transition: 0.8s ease-in-out;
+}
+body #wrap .row:nth-of-type(6) {
+  transition-delay: 0.6s;
+}
+body #wrap .row:nth-of-type(even) {
+  transition: 0.8s ease-in-out;
+}
+body #wrap .row:nth-of-type(7) {
+  transition-delay: 0.7s;
+}
+body #wrap .row:nth-of-type(even) {
+  transition: 0.8s ease-in-out;
+}
+body #wrap .row:nth-of-type(8) {
+  transition-delay: 0.8s;
+}
+body #wrap .row:nth-of-type(even) {
+  transition: 0.8s ease-in-out;
+}
+body #wrap .row:nth-of-type(9) {
+  transition-delay: 0.9s;
+}
+body #wrap .row:nth-of-type(even) {
+  transition: 0.8s ease-in-out;
+}
+body #wrap .row:nth-of-type(10) {
+  transition-delay: 1s;
+}
+body #wrap .row:nth-of-type(5).full1 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(5).full1 .cell:nth-of-type(1) {
+  z-index: 9;
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full1 .cell:nth-of-type(1).cell9 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full1 .cell:nth-of-type(1).cell10 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full1 .cell:nth-of-type(1).cell11 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full1 .cell:nth-of-type(1).cell12 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full1 .cell:nth-of-type(1).cell13 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full1 .cell:nth-of-type(1).cell14 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full1 .cell:nth-of-type(1).cell15 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full1 .cell:nth-of-type(1).cell16 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full1 .cell:nth-of-type(1).darkmode:before {
+  -webkit-clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+          clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(5).full1 .cell:nth-of-type(1):before {
+  width: 200%;
+  height: 200%;
+  left: auto;
+  right: 0;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(5).full1 .cell:nth-of-type(1):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: 0%;
+  top: 0%;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(5).full2 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(5).full2 .cell:nth-of-type(1) {
+  z-index: 9;
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full2 .cell:nth-of-type(1).cell9 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full2 .cell:nth-of-type(1).cell10 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full2 .cell:nth-of-type(1).cell11 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full2 .cell:nth-of-type(1).cell12 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full2 .cell:nth-of-type(1).cell13 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full2 .cell:nth-of-type(1).cell14 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full2 .cell:nth-of-type(1).cell15 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full2 .cell:nth-of-type(1).cell16 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full2 .cell:nth-of-type(1).darkmode:before {
+  -webkit-clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+          clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(5).full2 .cell:nth-of-type(1):before {
+  width: 200%;
+  height: 200%;
+  left: auto;
+  right: 0;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(5).full2 .cell:nth-of-type(1):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: 0%;
+  top: 0%;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(5).full3 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(5).full3 .cell:nth-of-type(1) {
+  z-index: 9;
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full3 .cell:nth-of-type(1).cell9 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full3 .cell:nth-of-type(1).cell10 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full3 .cell:nth-of-type(1).cell11 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full3 .cell:nth-of-type(1).cell12 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full3 .cell:nth-of-type(1).cell13 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full3 .cell:nth-of-type(1).cell14 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full3 .cell:nth-of-type(1).cell15 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full3 .cell:nth-of-type(1).cell16 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full3 .cell:nth-of-type(1).darkmode:before {
+  -webkit-clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+          clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(5).full3 .cell:nth-of-type(1):before {
+  width: 200%;
+  height: 200%;
+  left: auto;
+  right: 0;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(5).full3 .cell:nth-of-type(1):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: 0%;
+  top: 0%;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(5).full4 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(5).full4 .cell:nth-of-type(1) {
+  z-index: 9;
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full4 .cell:nth-of-type(1).cell9 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full4 .cell:nth-of-type(1).cell10 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full4 .cell:nth-of-type(1).cell11 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full4 .cell:nth-of-type(1).cell12 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full4 .cell:nth-of-type(1).cell13 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full4 .cell:nth-of-type(1).cell14 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full4 .cell:nth-of-type(1).cell15 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full4 .cell:nth-of-type(1).cell16 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full4 .cell:nth-of-type(1).darkmode:before {
+  -webkit-clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+          clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(5).full4 .cell:nth-of-type(1):before {
+  width: 200%;
+  height: 200%;
+  left: auto;
+  right: 0;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(5).full4 .cell:nth-of-type(1):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: 0%;
+  top: 0%;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(5).full5 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(5).full5 .cell:nth-of-type(1) {
+  z-index: 9;
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full5 .cell:nth-of-type(1).cell9 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full5 .cell:nth-of-type(1).cell10 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full5 .cell:nth-of-type(1).cell11 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full5 .cell:nth-of-type(1).cell12 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full5 .cell:nth-of-type(1).cell13 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full5 .cell:nth-of-type(1).cell14 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full5 .cell:nth-of-type(1).cell15 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full5 .cell:nth-of-type(1).cell16 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full5 .cell:nth-of-type(1).darkmode:before {
+  -webkit-clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+          clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(5).full5 .cell:nth-of-type(1):before {
+  width: 200%;
+  height: 200%;
+  left: auto;
+  right: 0;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(5).full5 .cell:nth-of-type(1):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: 0%;
+  top: 0%;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(5).full6 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(5).full6 .cell:nth-of-type(1) {
+  z-index: 9;
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full6 .cell:nth-of-type(1).cell9 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full6 .cell:nth-of-type(1).cell10 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full6 .cell:nth-of-type(1).cell11 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full6 .cell:nth-of-type(1).cell12 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full6 .cell:nth-of-type(1).cell13 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full6 .cell:nth-of-type(1).cell14 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full6 .cell:nth-of-type(1).cell15 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full6 .cell:nth-of-type(1).cell16 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full6 .cell:nth-of-type(1).darkmode:before {
+  -webkit-clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+          clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(5).full6 .cell:nth-of-type(1):before {
+  width: 200%;
+  height: 200%;
+  left: auto;
+  right: 0;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(5).full6 .cell:nth-of-type(1):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: 0%;
+  top: 0%;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(5).full7 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(5).full7 .cell:nth-of-type(1) {
+  z-index: 9;
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full7 .cell:nth-of-type(1).cell9 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full7 .cell:nth-of-type(1).cell10 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full7 .cell:nth-of-type(1).cell11 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full7 .cell:nth-of-type(1).cell12 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full7 .cell:nth-of-type(1).cell13 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full7 .cell:nth-of-type(1).cell14 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full7 .cell:nth-of-type(1).cell15 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full7 .cell:nth-of-type(1).cell16 {
+  opacity: 1;
+}
+body #wrap .row:nth-of-type(5).full7 .cell:nth-of-type(1).darkmode:before {
+  -webkit-clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+          clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(5).full7 .cell:nth-of-type(1):before {
+  width: 200%;
+  height: 200%;
+  left: auto;
+  right: 0;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(5).full7 .cell:nth-of-type(1):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: 0%;
+  top: 0%;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(1).full8, body #wrap .row:nth-of-type(10).full8 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(1).full8 .cell:nth-of-type(4), body #wrap .row:nth-of-type(10).full8 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full8 .cell:nth-of-type(4):before, body #wrap .row:nth-of-type(10).full8 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full8 .cell:nth-of-type(4):after, body #wrap .row:nth-of-type(10).full8 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: 0;
+  z-index: 0;
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(1).full9, body #wrap .row:nth-of-type(10).full9 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(1).full9 .cell:nth-of-type(4), body #wrap .row:nth-of-type(10).full9 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full9 .cell:nth-of-type(4):before, body #wrap .row:nth-of-type(10).full9 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full9 .cell:nth-of-type(4):after, body #wrap .row:nth-of-type(10).full9 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: 0;
+  z-index: 0;
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(1).full10, body #wrap .row:nth-of-type(10).full10 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(1).full10 .cell:nth-of-type(4), body #wrap .row:nth-of-type(10).full10 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full10 .cell:nth-of-type(4):before, body #wrap .row:nth-of-type(10).full10 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full10 .cell:nth-of-type(4):after, body #wrap .row:nth-of-type(10).full10 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: 0;
+  z-index: 0;
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(1).full11, body #wrap .row:nth-of-type(10).full11 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(1).full11 .cell:nth-of-type(4), body #wrap .row:nth-of-type(10).full11 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full11 .cell:nth-of-type(4):before, body #wrap .row:nth-of-type(10).full11 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full11 .cell:nth-of-type(4):after, body #wrap .row:nth-of-type(10).full11 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: 0;
+  z-index: 0;
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(1).full12, body #wrap .row:nth-of-type(10).full12 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(1).full12 .cell:nth-of-type(4), body #wrap .row:nth-of-type(10).full12 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full12 .cell:nth-of-type(4):before, body #wrap .row:nth-of-type(10).full12 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full12 .cell:nth-of-type(4):after, body #wrap .row:nth-of-type(10).full12 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: 0;
+  z-index: 0;
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(1).full13, body #wrap .row:nth-of-type(10).full13 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(1).full13 .cell:nth-of-type(4), body #wrap .row:nth-of-type(10).full13 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full13 .cell:nth-of-type(4):before, body #wrap .row:nth-of-type(10).full13 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full13 .cell:nth-of-type(4):after, body #wrap .row:nth-of-type(10).full13 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: 0;
+  z-index: 0;
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(1).full14, body #wrap .row:nth-of-type(10).full14 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(1).full14 .cell:nth-of-type(4), body #wrap .row:nth-of-type(10).full14 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full14 .cell:nth-of-type(4):before, body #wrap .row:nth-of-type(10).full14 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full14 .cell:nth-of-type(4):after, body #wrap .row:nth-of-type(10).full14 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: 0;
+  z-index: 0;
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(1).full15, body #wrap .row:nth-of-type(10).full15 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(1).full15 .cell:nth-of-type(4), body #wrap .row:nth-of-type(10).full15 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full15 .cell:nth-of-type(4):before, body #wrap .row:nth-of-type(10).full15 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(1).full15 .cell:nth-of-type(4):after, body #wrap .row:nth-of-type(10).full15 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: 0;
+  z-index: 0;
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .row:nth-of-type(10).full8 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(10).full8 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full8 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: auto;
+  bottom: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full8 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: auto;
+  bottom: 0;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(10).full9 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(10).full9 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full9 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: auto;
+  bottom: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full9 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: auto;
+  bottom: 0;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(10).full10 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(10).full10 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full10 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: auto;
+  bottom: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full10 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: auto;
+  bottom: 0;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(10).full11 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(10).full11 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full11 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: auto;
+  bottom: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full11 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: auto;
+  bottom: 0;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(10).full12 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(10).full12 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full12 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: auto;
+  bottom: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full12 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: auto;
+  bottom: 0;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(10).full13 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(10).full13 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full13 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: auto;
+  bottom: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full13 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: auto;
+  bottom: 0;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(10).full14 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(10).full14 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full14 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: auto;
+  bottom: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full14 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: auto;
+  bottom: 0;
+  z-index: 0;
+}
+body #wrap .row:nth-of-type(10).full15 {
+  z-index: 9;
+  transition: 0.6s;
+  transition-delay: 0s;
+}
+body #wrap .row:nth-of-type(10).full15 .cell:nth-of-type(4) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full15 .cell:nth-of-type(4):before {
+  width: 175%;
+  height: 175%;
+  left: auto;
+  top: auto;
+  bottom: 12.5%;
+  right: -50%;
+  opacity: 1;
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(10).full15 .cell:nth-of-type(4):after {
+  content: '';
+  opacity: 1;
+  position: absolute;
+  width: 300%;
+  height: 300%;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 999;
+  left: auto;
+  right: -100%;
+  top: auto;
+  bottom: 0;
+  z-index: 0;
+}
+body #wrap .row.full16 .cell.darkmode:before {
+  content: '' !important;
+  background-clip: border-box;
+}
+body #wrap .row.full17 .cell.darkmode:before {
+  content: '' !important;
+  background-clip: border-box;
+}
+body #wrap .row.full18 .cell.darkmode:before {
+  content: '' !important;
+  background-clip: border-box;
+}
+body #wrap .row.full19 .cell.darkmode:before {
+  content: '' !important;
+  background-clip: border-box;
+}
+body #wrap .row.full20 .cell.darkmode:before {
+  content: '' !important;
+  background-clip: border-box;
+}
+body #wrap .row.full21 .cell.darkmode:before {
+  content: '' !important;
+  background-clip: border-box;
+}
+body #wrap .row.full22 .cell.darkmode:before {
+  content: '' !important;
+  background-clip: border-box;
+}
+body #wrap .row.full16 .cell {
+  opacity: 1;
+  z-index: 99;
+}
+body #wrap .row.full16 .cell:not(.darkmode) {
+  -webkit-transform: rotate(var(--angle));
+          transform: rotate(var(--angle));
+}
+body #wrap .row.full16 .cell.darkmode:before, body #wrap .row.full16 .cell.darkmode.cell1:before, body #wrap .row.full16 .cell.darkmode.cell9:before {
+  -webkit-clip-path: polygon(0 40%, 3% 52%, 7% 64%, 17% 65%, 25% 58%, 25% 47%, 20% 37%, 17% 28%, 17% 14%, 24% 4%, 31% 1%, 27% 15%, 27% 25%, 31% 37%, 39% 47%, 44% 54%, 47% 62%, 57% 65%, 61% 55%, 64% 44%, 60% 36%, 56% 29%, 58% 20%, 62% 23%, 62% 30%, 67% 36%, 73% 28%, 75% 19%, 73% 9%, 68% 1%, 76% 6%, 82% 22%, 81% 36%, 79% 47%, 79% 59%, 87% 66%, 95% 63%, 99% 54%, 100% 41%, 100% 100%, 81% 100%, 66% 96%, 57% 94%, 48% 93%, 35% 95%, 27% 97%, 18% 99%, 8% 100%, 0 100%);
+          clip-path: polygon(0 40%, 3% 52%, 7% 64%, 17% 65%, 25% 58%, 25% 47%, 20% 37%, 17% 28%, 17% 14%, 24% 4%, 31% 1%, 27% 15%, 27% 25%, 31% 37%, 39% 47%, 44% 54%, 47% 62%, 57% 65%, 61% 55%, 64% 44%, 60% 36%, 56% 29%, 58% 20%, 62% 23%, 62% 30%, 67% 36%, 73% 28%, 75% 19%, 73% 9%, 68% 1%, 76% 6%, 82% 22%, 81% 36%, 79% 47%, 79% 59%, 87% 66%, 95% 63%, 99% 54%, 100% 41%, 100% 100%, 81% 100%, 66% 96%, 57% 94%, 48% 93%, 35% 95%, 27% 97%, 18% 99%, 8% 100%, 0 100%);
+  content: '';
+  top: 0;
+  -webkit-transform: none;
+          transform: none;
+  background-clip: none;
+  -webkit-background-clip: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+  -webkit-mask: none;
+          mask: none;
+  border-radius: 0;
+}
+body #wrap .row.full16 .cell.darkmode:after, body #wrap .row.full16 .cell.darkmode.cell1:after, body #wrap .row.full16 .cell.darkmode.cell9:after {
+  display: none;
+}
+body #wrap .row.full16 .cell:before {
+  -webkit-mask: none;
+          mask: none;
+  -webkit-clip-path: polygon(50% 0%, 100% 50%, 100% 100%, 50% 50%, 0 100%, 0 50%);
+          clip-path: polygon(50% 0%, 100% 50%, 100% 100%, 50% 50%, 0 100%, 0 50%);
+}
+body #wrap .row.full17 .cell {
+  opacity: 1;
+  z-index: 99;
+}
+body #wrap .row.full17 .cell:not(.darkmode) {
+  -webkit-transform: rotate(var(--angle));
+          transform: rotate(var(--angle));
+}
+body #wrap .row.full17 .cell.darkmode:before, body #wrap .row.full17 .cell.darkmode.cell1:before, body #wrap .row.full17 .cell.darkmode.cell9:before {
+  -webkit-clip-path: polygon(0 40%, 3% 52%, 7% 64%, 17% 65%, 25% 58%, 25% 47%, 20% 37%, 17% 28%, 17% 14%, 24% 4%, 31% 1%, 27% 15%, 27% 25%, 31% 37%, 39% 47%, 44% 54%, 47% 62%, 57% 65%, 61% 55%, 64% 44%, 60% 36%, 56% 29%, 58% 20%, 62% 23%, 62% 30%, 67% 36%, 73% 28%, 75% 19%, 73% 9%, 68% 1%, 76% 6%, 82% 22%, 81% 36%, 79% 47%, 79% 59%, 87% 66%, 95% 63%, 99% 54%, 100% 41%, 100% 100%, 81% 100%, 66% 96%, 57% 94%, 48% 93%, 35% 95%, 27% 97%, 18% 99%, 8% 100%, 0 100%);
+          clip-path: polygon(0 40%, 3% 52%, 7% 64%, 17% 65%, 25% 58%, 25% 47%, 20% 37%, 17% 28%, 17% 14%, 24% 4%, 31% 1%, 27% 15%, 27% 25%, 31% 37%, 39% 47%, 44% 54%, 47% 62%, 57% 65%, 61% 55%, 64% 44%, 60% 36%, 56% 29%, 58% 20%, 62% 23%, 62% 30%, 67% 36%, 73% 28%, 75% 19%, 73% 9%, 68% 1%, 76% 6%, 82% 22%, 81% 36%, 79% 47%, 79% 59%, 87% 66%, 95% 63%, 99% 54%, 100% 41%, 100% 100%, 81% 100%, 66% 96%, 57% 94%, 48% 93%, 35% 95%, 27% 97%, 18% 99%, 8% 100%, 0 100%);
+  content: '';
+  top: 0;
+  -webkit-transform: none;
+          transform: none;
+  background-clip: none;
+  -webkit-background-clip: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+  -webkit-mask: none;
+          mask: none;
+  border-radius: 0;
+}
+body #wrap .row.full17 .cell.darkmode:after, body #wrap .row.full17 .cell.darkmode.cell1:after, body #wrap .row.full17 .cell.darkmode.cell9:after {
+  display: none;
+}
+body #wrap .row.full17 .cell:before {
+  -webkit-mask: none;
+          mask: none;
+  -webkit-clip-path: polygon(50% 0%, 100% 50%, 100% 100%, 50% 50%, 0 100%, 0 50%);
+          clip-path: polygon(50% 0%, 100% 50%, 100% 100%, 50% 50%, 0 100%, 0 50%);
+}
+body #wrap .row.full18 .cell {
+  opacity: 1;
+}
+body #wrap .row.full18 .cell:not(.darkmode) {
+  -webkit-transform: rotate(var(--angle));
+          transform: rotate(var(--angle));
+}
+body #wrap .row.full18 .cell.darkmode:before, body #wrap .row.full18 .cell.darkmode.cell1:before, body #wrap .row.full18 .cell.darkmode.cell9:before {
+  -webkit-clip-path: polygon(0 40%, 3% 52%, 7% 64%, 17% 65%, 25% 58%, 25% 47%, 20% 37%, 17% 28%, 17% 14%, 24% 4%, 31% 1%, 27% 15%, 27% 25%, 31% 37%, 39% 47%, 44% 54%, 47% 62%, 57% 65%, 61% 55%, 64% 44%, 60% 36%, 56% 29%, 58% 20%, 62% 23%, 62% 30%, 67% 36%, 73% 28%, 75% 19%, 73% 9%, 68% 1%, 76% 6%, 82% 22%, 81% 36%, 79% 47%, 79% 59%, 87% 66%, 95% 63%, 99% 54%, 100% 41%, 100% 100%, 81% 100%, 66% 96%, 57% 94%, 48% 93%, 35% 95%, 27% 97%, 18% 99%, 8% 100%, 0 100%);
+          clip-path: polygon(0 40%, 3% 52%, 7% 64%, 17% 65%, 25% 58%, 25% 47%, 20% 37%, 17% 28%, 17% 14%, 24% 4%, 31% 1%, 27% 15%, 27% 25%, 31% 37%, 39% 47%, 44% 54%, 47% 62%, 57% 65%, 61% 55%, 64% 44%, 60% 36%, 56% 29%, 58% 20%, 62% 23%, 62% 30%, 67% 36%, 73% 28%, 75% 19%, 73% 9%, 68% 1%, 76% 6%, 82% 22%, 81% 36%, 79% 47%, 79% 59%, 87% 66%, 95% 63%, 99% 54%, 100% 41%, 100% 100%, 81% 100%, 66% 96%, 57% 94%, 48% 93%, 35% 95%, 27% 97%, 18% 99%, 8% 100%, 0 100%);
+  content: '';
+  top: 0;
+  -webkit-transform: none;
+          transform: none;
+  background-clip: none;
+  -webkit-background-clip: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+  -webkit-mask: none;
+          mask: none;
+  border-radius: 0;
+}
+body #wrap .row.full18 .cell.darkmode:after, body #wrap .row.full18 .cell.darkmode.cell1:after, body #wrap .row.full18 .cell.darkmode.cell9:after {
+  display: none;
+}
+body #wrap .row.full18 .cell:before {
+  -webkit-mask: none;
+          mask: none;
+  -webkit-clip-path: polygon(50% 40%, 100% 90%, 100% 100%, 50% 50%, 0 100%, 0 90%);
+          clip-path: polygon(50% 40%, 100% 90%, 100% 100%, 50% 50%, 0 100%, 0 90%);
+}
+body #wrap .row.full18 .cell:after {
+  opacity: 1;
+  -webkit-clip-path: polygon(50% 70%, 41% 85%, 60% 85%);
+          clip-path: polygon(50% 70%, 41% 85%, 60% 85%);
+}
+body #wrap .row.full19 .cell {
+  opacity: 1;
+}
+body #wrap .row.full19 .cell:not(.darkmode) {
+  -webkit-transform: rotate(var(--angle));
+          transform: rotate(var(--angle));
+}
+body #wrap .row.full19 .cell.darkmode:before, body #wrap .row.full19 .cell.darkmode.cell1:before, body #wrap .row.full19 .cell.darkmode.cell9:before {
+  -webkit-clip-path: polygon(0 40%, 3% 52%, 7% 64%, 17% 65%, 25% 58%, 25% 47%, 20% 37%, 17% 28%, 17% 14%, 24% 4%, 31% 1%, 27% 15%, 27% 25%, 31% 37%, 39% 47%, 44% 54%, 47% 62%, 57% 65%, 61% 55%, 64% 44%, 60% 36%, 56% 29%, 58% 20%, 62% 23%, 62% 30%, 67% 36%, 73% 28%, 75% 19%, 73% 9%, 68% 1%, 76% 6%, 82% 22%, 81% 36%, 79% 47%, 79% 59%, 87% 66%, 95% 63%, 99% 54%, 100% 41%, 100% 100%, 81% 100%, 66% 96%, 57% 94%, 48% 93%, 35% 95%, 27% 97%, 18% 99%, 8% 100%, 0 100%);
+          clip-path: polygon(0 40%, 3% 52%, 7% 64%, 17% 65%, 25% 58%, 25% 47%, 20% 37%, 17% 28%, 17% 14%, 24% 4%, 31% 1%, 27% 15%, 27% 25%, 31% 37%, 39% 47%, 44% 54%, 47% 62%, 57% 65%, 61% 55%, 64% 44%, 60% 36%, 56% 29%, 58% 20%, 62% 23%, 62% 30%, 67% 36%, 73% 28%, 75% 19%, 73% 9%, 68% 1%, 76% 6%, 82% 22%, 81% 36%, 79% 47%, 79% 59%, 87% 66%, 95% 63%, 99% 54%, 100% 41%, 100% 100%, 81% 100%, 66% 96%, 57% 94%, 48% 93%, 35% 95%, 27% 97%, 18% 99%, 8% 100%, 0 100%);
+  content: '';
+  top: 0;
+  -webkit-transform: none;
+          transform: none;
+  background-clip: none;
+  -webkit-background-clip: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+  -webkit-mask: none;
+          mask: none;
+  border-radius: 0;
+}
+body #wrap .row.full19 .cell.darkmode:after, body #wrap .row.full19 .cell.darkmode.cell1:after, body #wrap .row.full19 .cell.darkmode.cell9:after {
+  display: none;
+}
+body #wrap .row.full19 .cell:before {
+  -webkit-mask: none;
+          mask: none;
+  -webkit-clip-path: polygon(50% 40%, 100% 90%, 100% 100%, 50% 50%, 0 100%, 0 90%);
+          clip-path: polygon(50% 40%, 100% 90%, 100% 100%, 50% 50%, 0 100%, 0 90%);
+}
+body #wrap .row.full19 .cell:after {
+  opacity: 1;
+  -webkit-clip-path: polygon(50% 70%, 41% 85%, 60% 85%);
+          clip-path: polygon(50% 70%, 41% 85%, 60% 85%);
+}
+body #wrap .row.full20 .cell {
+  opacity: 1;
+}
+body #wrap .row.full20 .cell.darkmode:before, body #wrap .row.full20 .cell.darkmode.cell1:before, body #wrap .row.full20 .cell.darkmode.cell9:before {
+  -webkit-clip-path: polygon(0 59%, 9% 70%, 21% 65%, 20% 54%, 10% 43%, 10% 24%, 20% 11%, 31% 8%, 28% 18%, 30% 33%, 35% 41%, 42% 39%, 47% 32%, 48% 19%, 51% 23%, 55% 43%, 55% 61%, 63% 69%, 71% 65%, 75% 58%, 72% 38%, 66% 28%, 61% 18%, 71% 24%, 80% 38%, 83% 51%, 84% 62%, 92% 65%, 98% 63%, 100% 59%, 100% 100%, 86% 98%, 77% 94%, 65% 92%, 54% 93%, 48% 96%, 40% 98%, 31% 97%, 22% 94%, 12% 95%, 0 100%);
+          clip-path: polygon(0 59%, 9% 70%, 21% 65%, 20% 54%, 10% 43%, 10% 24%, 20% 11%, 31% 8%, 28% 18%, 30% 33%, 35% 41%, 42% 39%, 47% 32%, 48% 19%, 51% 23%, 55% 43%, 55% 61%, 63% 69%, 71% 65%, 75% 58%, 72% 38%, 66% 28%, 61% 18%, 71% 24%, 80% 38%, 83% 51%, 84% 62%, 92% 65%, 98% 63%, 100% 59%, 100% 100%, 86% 98%, 77% 94%, 65% 92%, 54% 93%, 48% 96%, 40% 98%, 31% 97%, 22% 94%, 12% 95%, 0 100%);
+  content: '';
+  top: 0;
+  -webkit-mask: none;
+          mask: none;
+  -webkit-transform: none;
+          transform: none;
+  background-clip: none;
+  -webkit-background-clip: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+  border-radius: 0;
+}
+body #wrap .row.full20 .cell.darkmode:after, body #wrap .row.full20 .cell.darkmode.cell1:after, body #wrap .row.full20 .cell.darkmode.cell9:after {
+  display: none;
+}
+body #wrap .row.full20 .cell:not(.darkmode) {
+  -webkit-transform: rotate(var(--angle));
+          transform: rotate(var(--angle));
+}
+body #wrap .row.full20 .cell:before {
+  -webkit-mask: none;
+          mask: none;
+  -webkit-clip-path: polygon(50% 40%, 100% 90%, 100% 100%, 50% 50%, 0 100%, 0 90%);
+          clip-path: polygon(50% 40%, 100% 90%, 100% 100%, 50% 50%, 0 100%, 0 90%);
+  top: -30px;
+}
+body #wrap .row.full20 .cell:after {
+  -webkit-mask: none;
+          mask: none;
+  -webkit-clip-path: polygon(50% 20%, 100% 70%, 100% 100%, 50% 50%, 0 100%, 0 70%);
+          clip-path: polygon(50% 20%, 100% 70%, 100% 100%, 50% 50%, 0 100%, 0 70%);
+  -webkit-filter: invert(1);
+          filter: invert(1);
+  opacity: 1;
+}
+body #wrap .row.full21 .cell {
+  opacity: 1;
+}
+body #wrap .row.full21 .cell.darkmode:before, body #wrap .row.full21 .cell.darkmode.cell1:before, body #wrap .row.full21 .cell.darkmode.cell9:before {
+  -webkit-clip-path: polygon(0 59%, 9% 70%, 21% 65%, 20% 54%, 10% 43%, 10% 24%, 20% 11%, 31% 8%, 28% 18%, 30% 33%, 35% 41%, 42% 39%, 47% 32%, 48% 19%, 51% 23%, 55% 43%, 55% 61%, 63% 69%, 71% 65%, 75% 58%, 72% 38%, 66% 28%, 61% 18%, 71% 24%, 80% 38%, 83% 51%, 84% 62%, 92% 65%, 98% 63%, 100% 59%, 100% 100%, 86% 98%, 77% 94%, 65% 92%, 54% 93%, 48% 96%, 40% 98%, 31% 97%, 22% 94%, 12% 95%, 0 100%);
+          clip-path: polygon(0 59%, 9% 70%, 21% 65%, 20% 54%, 10% 43%, 10% 24%, 20% 11%, 31% 8%, 28% 18%, 30% 33%, 35% 41%, 42% 39%, 47% 32%, 48% 19%, 51% 23%, 55% 43%, 55% 61%, 63% 69%, 71% 65%, 75% 58%, 72% 38%, 66% 28%, 61% 18%, 71% 24%, 80% 38%, 83% 51%, 84% 62%, 92% 65%, 98% 63%, 100% 59%, 100% 100%, 86% 98%, 77% 94%, 65% 92%, 54% 93%, 48% 96%, 40% 98%, 31% 97%, 22% 94%, 12% 95%, 0 100%);
+  content: '';
+  top: 0;
+  -webkit-mask: none;
+          mask: none;
+  -webkit-transform: none;
+          transform: none;
+  background-clip: none;
+  -webkit-background-clip: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+  border-radius: 0;
+}
+body #wrap .row.full21 .cell.darkmode:after, body #wrap .row.full21 .cell.darkmode.cell1:after, body #wrap .row.full21 .cell.darkmode.cell9:after {
+  display: none;
+}
+body #wrap .row.full21 .cell:not(.darkmode) {
+  -webkit-transform: rotate(var(--angle));
+          transform: rotate(var(--angle));
+}
+body #wrap .row.full21 .cell:before {
+  -webkit-mask: none;
+          mask: none;
+  -webkit-clip-path: polygon(50% 40%, 100% 90%, 100% 100%, 50% 50%, 0 100%, 0 90%);
+          clip-path: polygon(50% 40%, 100% 90%, 100% 100%, 50% 50%, 0 100%, 0 90%);
+  top: -30px;
+}
+body #wrap .row.full21 .cell:after {
+  -webkit-mask: none;
+          mask: none;
+  -webkit-clip-path: polygon(50% 20%, 100% 70%, 100% 100%, 50% 50%, 0 100%, 0 70%);
+          clip-path: polygon(50% 20%, 100% 70%, 100% 100%, 50% 50%, 0 100%, 0 70%);
+  -webkit-filter: invert(1);
+          filter: invert(1);
+  opacity: 1;
+}
+body #wrap .row.full21 .cell:before {
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+body #wrap .row.full21 .cell.cell5:not(.darkmode):before, body #wrap .row.full21 .cell.cell7:not(.darkmode):before {
+  width: 50%;
+  height: 50%;
+  top: 25%;
+  left: 25%;
+}
+body #wrap .row.full21 .cell.cell2:not(.darkmode):before, body #wrap .row.full21 .cell.cell6:not(.darkmode):before {
+  width: 75%;
+  height: 75%;
+  top: 12.5%;
+  left: 12.5%;
+}
+body #wrap .row.full22 .cell:before {
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+body #wrap .row.full22 .cell.cell5:not(.darkmode):before, body #wrap .row.full22 .cell.cell7:not(.darkmode):before {
+  width: 50%;
+  height: 50%;
+  top: 25%;
+  left: 25%;
+}
+body #wrap .row.full22 .cell.cell2:not(.darkmode):before, body #wrap .row.full22 .cell.cell6:not(.darkmode):before {
+  width: 75%;
+  height: 75%;
+  top: 12.5%;
+  left: 12.5%;
+}
+body #wrap .cell {
+  position: relative;
+}
+body #wrap .cell:before, body #wrap .cell:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(55deg, transparent 2.5px, #fff 2.5px, #fff 3.5px, #fff 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #fff 2.5px, #fff 3.5px, #fff 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #fff 2.5px, #fff 3.5px, #fff 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #fff 2.5px, #fff 3.5px, #fff 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+}
+body #wrap .cell:after {
+  opacity: 0;
+}
+body #wrap .cell.cell1.darkmode:before, body #wrap .cell.cell9.darkmode:before {
+  content: '666';
+  color: transparent;
+  -webkit-background-clip: text;
+          background-clip: text;
+  font-size: 50px;
+  -webkit-clip-path: none;
+          clip-path: none;
+  width: 100%;
+  text-align: center;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  font-family: 'UnifrakturCook', cursive;
+}
+body #wrap .cell.cell1:before, body #wrap .cell.cell9:before {
+  -webkit-clip-path: polygon(57% 0%, 57% 13%, 51% 13%, 51% 8%, 45% 8%, 45% 24%, 30% 24%, 29% 8%, 24% 8%, 24% 12%, 18% 12%, 18% 1%, 11% 1%, 11% 7%, 5% 7%, 5% 13%, 16% 14%, 17% 20%, 23% 20%, 24% 24%, 28% 25%, 29% 30%, 23% 30%, 23% 35%, 16% 36%, 17% 46%, 30% 47%, 30% 53%, 36% 53%, 36% 99%, 42% 100%, 41% 76%, 48% 76%, 48% 99%, 54% 99%, 54% 77%, 73% 77%, 74% 100%, 81% 100%, 81% 77%, 86% 77%, 86% 100%, 92% 100%, 93% 53%, 85% 53%, 86% 48%, 93% 47%, 93% 41%, 86% 41%, 86% 47%, 46% 46%, 45% 36%, 52% 36%, 52% 31%, 46% 31%, 46% 24%, 51% 24%, 51% 20%, 57% 19%, 57% 14%, 70% 14%, 70% 8%, 64% 8%, 64% 1%, 57% 0%);
+          clip-path: polygon(57% 0%, 57% 13%, 51% 13%, 51% 8%, 45% 8%, 45% 24%, 30% 24%, 29% 8%, 24% 8%, 24% 12%, 18% 12%, 18% 1%, 11% 1%, 11% 7%, 5% 7%, 5% 13%, 16% 14%, 17% 20%, 23% 20%, 24% 24%, 28% 25%, 29% 30%, 23% 30%, 23% 35%, 16% 36%, 17% 46%, 30% 47%, 30% 53%, 36% 53%, 36% 99%, 42% 100%, 41% 76%, 48% 76%, 48% 99%, 54% 99%, 54% 77%, 73% 77%, 74% 100%, 81% 100%, 81% 77%, 86% 77%, 86% 100%, 92% 100%, 93% 53%, 85% 53%, 86% 48%, 93% 47%, 93% 41%, 86% 41%, 86% 47%, 46% 46%, 45% 36%, 52% 36%, 52% 31%, 46% 31%, 46% 24%, 51% 24%, 51% 20%, 57% 19%, 57% 14%, 70% 14%, 70% 8%, 64% 8%, 64% 1%, 57% 0%);
+}
+body #wrap .cell.cell2:before, body #wrap .cell.cell10:before {
+  -webkit-clip-path: polygon(72% 0, 71% 25%, 24% 73%, 0 74%, 18% 55%, 80% 55%, 98% 73%, 76% 75%, 28% 27%, 27% 0, 45% 19%, 46% 84%, 28% 100%, 27% 77%, 74% 29%, 100% 29%, 80% 47%, 19% 48%, 0 29%, 23% 28%, 71% 77%, 71% 100%, 53% 84%, 51% 57%, 53% 19%);
+          clip-path: polygon(72% 0, 71% 25%, 24% 73%, 0 74%, 18% 55%, 80% 55%, 98% 73%, 76% 75%, 28% 27%, 27% 0, 45% 19%, 46% 84%, 28% 100%, 27% 77%, 74% 29%, 100% 29%, 80% 47%, 19% 48%, 0 29%, 23% 28%, 71% 77%, 71% 100%, 53% 84%, 51% 57%, 53% 19%);
+}
+body #wrap .cell.cell2.darkmode:before, body #wrap .cell.cell10.darkmode:before {
+  -webkit-clip-path: polygon(4% 91%, 10% 96%, 55% 56%, 66% 65%, 75% 65%, 86% 57%, 92% 51%, 97% 57%, 100% 39%, 87% 41%, 89% 46%, 76% 57%, 67% 56%, 61% 50%, 78% 35%, 83% 38%, 89% 22%, 73% 27%, 75% 31%, 55% 46%, 53% 41%, 50% 36%, 52% 29%, 58% 22%, 63% 19%, 69% 23%, 74% 7%, 58% 9%, 60% 13%, 51% 19%, 45% 25%, 44% 35%, 46% 45%, 48% 49%, 48% 51%);
+          clip-path: polygon(4% 91%, 10% 96%, 55% 56%, 66% 65%, 75% 65%, 86% 57%, 92% 51%, 97% 57%, 100% 39%, 87% 41%, 89% 46%, 76% 57%, 67% 56%, 61% 50%, 78% 35%, 83% 38%, 89% 22%, 73% 27%, 75% 31%, 55% 46%, 53% 41%, 50% 36%, 52% 29%, 58% 22%, 63% 19%, 69% 23%, 74% 7%, 58% 9%, 60% 13%, 51% 19%, 45% 25%, 44% 35%, 46% 45%, 48% 49%, 48% 51%);
+}
+body #wrap .cell.cell3:before, body #wrap .cell.cell11:before {
+  -webkit-clip-path: polygon(50% 5%, 50% 10%, 46% 10%, 45% 37%, 43% 36%, 43% 40%, 36% 39%, 36% 44%, 30% 44%, 30% 48%, 26% 48%, 26% 52%, 18% 52%, 18% 47%, 14% 48%, 14% 45%, 11% 44%, 10% 36%, 6% 37%, 7% 60%, 25% 78%, 26% 94%, 34% 95%, 34% 91%, 30% 91%, 30% 86%, 34% 86%, 34% 82%, 38% 82%, 39% 76%, 42% 76%, 42% 81%, 46% 81%, 46% 94%, 54% 95%, 54% 91%, 50% 91%, 50% 74%, 56% 74%, 57% 68%, 63% 65%, 63% 51%, 68% 50%, 68% 56%, 73% 56%, 73% 44%, 63% 44%, 63% 37%, 78% 37%, 78% 32%, 67% 32%, 67% 28%, 88% 29%, 89% 11%, 83% 11%, 83% 6%, 60% 6%, 60% 16%, 54% 17%, 55% 12%, 60% 11%, 61% 6%, 51% 6%);
+          clip-path: polygon(50% 5%, 50% 10%, 46% 10%, 45% 37%, 43% 36%, 43% 40%, 36% 39%, 36% 44%, 30% 44%, 30% 48%, 26% 48%, 26% 52%, 18% 52%, 18% 47%, 14% 48%, 14% 45%, 11% 44%, 10% 36%, 6% 37%, 7% 60%, 25% 78%, 26% 94%, 34% 95%, 34% 91%, 30% 91%, 30% 86%, 34% 86%, 34% 82%, 38% 82%, 39% 76%, 42% 76%, 42% 81%, 46% 81%, 46% 94%, 54% 95%, 54% 91%, 50% 91%, 50% 74%, 56% 74%, 57% 68%, 63% 65%, 63% 51%, 68% 50%, 68% 56%, 73% 56%, 73% 44%, 63% 44%, 63% 37%, 78% 37%, 78% 32%, 67% 32%, 67% 28%, 88% 29%, 89% 11%, 83% 11%, 83% 6%, 60% 6%, 60% 16%, 54% 17%, 55% 12%, 60% 11%, 61% 6%, 51% 6%);
+}
+body #wrap .cell.cell3.darkmode:before, body #wrap .cell.cell11.darkmode:before {
+  -webkit-clip-path: polygon(9% 8%, 11% 24%, 25% 36%, 34% 26%, 47% 23%, 64% 23%, 75% 31%, 78% 37%, 86% 33%, 93% 23%, 95% 5%, 98% 22%, 98% 38%, 93% 49%, 85% 53%, 79% 59%, 74% 51%, 64% 48%, 59% 50%, 56% 57%, 62% 65%, 79% 66%, 78% 78%, 73% 96%, 59% 95%, 57% 83%, 50% 83%, 48% 89%, 46% 95%, 34% 95%, 27% 81%, 21% 67%, 44% 65%, 49% 57%, 45% 48%, 35% 48%, 28% 53%, 23% 57%, 15% 55%, 6% 38%, 5% 25%);
+          clip-path: polygon(9% 8%, 11% 24%, 25% 36%, 34% 26%, 47% 23%, 64% 23%, 75% 31%, 78% 37%, 86% 33%, 93% 23%, 95% 5%, 98% 22%, 98% 38%, 93% 49%, 85% 53%, 79% 59%, 74% 51%, 64% 48%, 59% 50%, 56% 57%, 62% 65%, 79% 66%, 78% 78%, 73% 96%, 59% 95%, 57% 83%, 50% 83%, 48% 89%, 46% 95%, 34% 95%, 27% 81%, 21% 67%, 44% 65%, 49% 57%, 45% 48%, 35% 48%, 28% 53%, 23% 57%, 15% 55%, 6% 38%, 5% 25%);
+}
+body #wrap .cell.cell4:before, body #wrap .cell.cell12:before {
+  -webkit-clip-path: polygon(50% 0, 29% 18%, 41% 19%, 20% 45%, 34% 45%, 10% 70%, 45% 70%, 45% 90%, 55% 90%, 55% 70%, 90% 70%, 65% 45%, 80% 45%, 60% 19%, 72% 18%);
+          clip-path: polygon(50% 0, 29% 18%, 41% 19%, 20% 45%, 34% 45%, 10% 70%, 45% 70%, 45% 90%, 55% 90%, 55% 70%, 90% 70%, 65% 45%, 80% 45%, 60% 19%, 72% 18%);
+}
+body #wrap .cell.cell4.darkmode:before, body #wrap .cell.cell12.darkmode:before {
+  -webkit-clip-path: none;
+          clip-path: none;
+  -webkit-mask: linear-gradient(to right, transparent 45%, #000 45%, #000 55%, transparent 55%), linear-gradient(to top, transparent 35%, #000 35%, #000 45%, transparent 45%);
+          mask: linear-gradient(to right, transparent 45%, #000 45%, #000 55%, transparent 55%), linear-gradient(to top, transparent 35%, #000 35%, #000 45%, transparent 45%);
+  width: 50%;
+  height: 75%;
+  top: 12.5%;
+  left: 25%;
+  z-index: 2;
+}
+body #wrap .cell.cell4.darkmode:after, body #wrap .cell.cell12.darkmode:after {
+  opacity: 1;
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+  z-index: 1;
+}
+body #wrap .cell.cell5:before, body #wrap .cell.cell13:before {
+  -webkit-clip-path: polygon(51% 90%, 5% 50%, 5% 30%, 15% 15%, 35% 15%, 50% 30%, 65% 15%, 84% 15%, 95% 30%, 95% 50%);
+          clip-path: polygon(51% 90%, 5% 50%, 5% 30%, 15% 15%, 35% 15%, 50% 30%, 65% 15%, 84% 15%, 95% 30%, 95% 50%);
+}
+body #wrap .cell.cell5.darkmode, body #wrap .cell.cell13.darkmode {
+  background: linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), linear-gradient(-55deg, transparent 2.5px, #db2430 2.5px, #db2430 3.5px, #db2430 4.5px, transparent 4.5px), #000;
+  background-size: 10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position: calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+}
+body #wrap .cell.cell5.darkmode:before, body #wrap .cell.cell13.darkmode:before {
+  -webkit-clip-path: polygon(48% 0%, 8% 94%, 14% 94%, 100% 32%, 0 32%, 90% 94%, 93% 91%, 11% 36%, 89% 36%, 16% 88%, 18% 80%, 49% 10%, 93% 93%, 95% 87%);
+          clip-path: polygon(48% 0%, 8% 94%, 14% 94%, 100% 32%, 0 32%, 90% 94%, 93% 91%, 11% 36%, 89% 36%, 16% 88%, 18% 80%, 49% 10%, 93% 93%, 95% 87%);
+  border-radius: 100%;
+}
+body #wrap .cell.cell5.darkmode:after, body #wrap .cell.cell13.darkmode:after {
+  opacity: 1;
+  -webkit-mask: radial-gradient(circle at center, transparent 60%, #000 60%, #000 70%, transparent 70%);
+          mask: radial-gradient(circle at center, transparent 60%, #000 60%, #000 70%, transparent 70%);
+  -webkit-clip-path: none;
+          clip-path: none;
+}
+body #wrap .cell.cell6.darkmode:before, body #wrap .cell.cell14.darkmode:before {
+  -webkit-clip-path: polygon(14% 10%, 10% 19%, 8% 28%, 11% 42%, 16% 51%, 22% 47%, 29% 39%, 38% 38%, 44% 38%, 48% 97%, 53% 97%, 56% 94%, 52% 37%, 59% 34%, 68% 34%, 74% 36%, 80% 38%, 79% 29%, 79% 19%, 77% 8%, 73% 3%, 70% 1%, 61% 9%, 50% 15%, 48% 6%, 39% 8%, 41% 17%, 27% 15%);
+          clip-path: polygon(14% 10%, 10% 19%, 8% 28%, 11% 42%, 16% 51%, 22% 47%, 29% 39%, 38% 38%, 44% 38%, 48% 97%, 53% 97%, 56% 94%, 52% 37%, 59% 34%, 68% 34%, 74% 36%, 80% 38%, 79% 29%, 79% 19%, 77% 8%, 73% 3%, 70% 1%, 61% 9%, 50% 15%, 48% 6%, 39% 8%, 41% 17%, 27% 15%);
+  -webkit-mask: none;
+          mask: none;
+}
+body #wrap .cell.cell6:before, body #wrap .cell.cell14:before {
+  -webkit-clip-path: circle(45% at 50% 50%);
+          clip-path: circle(45% at 50% 50%);
+  -webkit-mask: radial-gradient(circle at 15% 65%, #000 5%, transparent 5%), radial-gradient(circle at 85% 65%, #000 5%, transparent 5%), radial-gradient(circle at 15% 35%, #000 5%, transparent 5%), radial-gradient(circle at 85% 35%, #000 5%, transparent 5%), radial-gradient(circle at 35% 85%, #000 5%, transparent 5%), radial-gradient(circle at 65% 85%, #000 5%, transparent 5%), radial-gradient(circle at 35% 15%, #000 5%, transparent 5%), radial-gradient(circle at 65% 15%, #000 5%, transparent 5%), linear-gradient(to right, transparent 47.5%, #000 47.5%, #000 52.5%, transparent 52.5%), linear-gradient(to bottom, transparent 47.5%, #000 47.5%, #000 52.5%, transparent 52.5%), linear-gradient(45deg, transparent 47.5%, #000 47.5%, #000 52.5%, transparent 52.5%), linear-gradient(-45deg, transparent 47.5%, #000 47.5%, #000 52.5%, transparent 52.5%);
+          mask: radial-gradient(circle at 15% 65%, #000 5%, transparent 5%), radial-gradient(circle at 85% 65%, #000 5%, transparent 5%), radial-gradient(circle at 15% 35%, #000 5%, transparent 5%), radial-gradient(circle at 85% 35%, #000 5%, transparent 5%), radial-gradient(circle at 35% 85%, #000 5%, transparent 5%), radial-gradient(circle at 65% 85%, #000 5%, transparent 5%), radial-gradient(circle at 35% 15%, #000 5%, transparent 5%), radial-gradient(circle at 65% 15%, #000 5%, transparent 5%), linear-gradient(to right, transparent 47.5%, #000 47.5%, #000 52.5%, transparent 52.5%), linear-gradient(to bottom, transparent 47.5%, #000 47.5%, #000 52.5%, transparent 52.5%), linear-gradient(45deg, transparent 47.5%, #000 47.5%, #000 52.5%, transparent 52.5%), linear-gradient(-45deg, transparent 47.5%, #000 47.5%, #000 52.5%, transparent 52.5%);
+}
+body #wrap .cell.cell7:before, body #wrap .cell.cell15:before {
+  -webkit-mask: radial-gradient(circle at center, #000 57.5%, transparent 57.5%);
+          mask: radial-gradient(circle at center, #000 57.5%, transparent 57.5%);
+  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
+          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
+}
+body #wrap .cell.cell8:before, body #wrap .cell.cell16:before {
+  -webkit-clip-path: circle(25% at 50% 50%);
+          clip-path: circle(25% at 50% 50%);
+  -webkit-mask: linear-gradient(45deg, transparent 47.5%, #000 47.5%, #000 52.5%, transparent 52.5%), linear-gradient(-45deg, transparent 47.5%, #000 47.5%, #000 52.5%, transparent 52.5%);
+          mask: linear-gradient(45deg, transparent 47.5%, #000 47.5%, #000 52.5%, transparent 52.5%), linear-gradient(-45deg, transparent 47.5%, #000 47.5%, #000 52.5%, transparent 52.5%);
+}
+body #wrap .cell.cell9 {
+  opacity: 0;
+}
+body #wrap .cell.cell10 {
+  opacity: 0;
+}
+body #wrap .cell.cell11 {
+  opacity: 0;
+}
+body #wrap .cell.cell12 {
+  opacity: 0;
+}
+body #wrap .cell.cell13 {
+  opacity: 0;
+}
+body #wrap .cell.cell14 {
+  opacity: 0;
+}
+body #wrap .cell.cell15 {
+  opacity: 0;
+}
+body #wrap .cell.cell16 {
+  opacity: 0;
+}
\ No newline at end of file
diff --git a/holiday-cssweater-generator/license.txt b/holiday-cssweater-generator/license.txt
new file mode 100644
index 0000000..13c2102
--- /dev/null
+++ b/holiday-cssweater-generator/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2019 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/ZEYzMBj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/holiday-cssweater-generator/src/index.haml b/holiday-cssweater-generator/src/index.haml
new file mode 100644
index 0000000..374ecd5
--- /dev/null
+++ b/holiday-cssweater-generator/src/index.haml
@@ -0,0 +1,7 @@
+%button.darkmode dark mode
+%button.refresh regenerate
+#wrap
+ -10.times do
+  .row
+   -5.times do
+    .cell
\ No newline at end of file
diff --git a/holiday-cssweater-generator/src/script.js b/holiday-cssweater-generator/src/script.js
new file mode 100644
index 0000000..7770d13
--- /dev/null
+++ b/holiday-cssweater-generator/src/script.js
@@ -0,0 +1,55 @@
+
+
+function draw() {
+  $("#wrap, body").addClass('hide');
+  $(".refresh").addClass("loading");
+  setTimeout(function() {
+    $("#wrap, body").removeClass("hide");
+    $(".refresh").removeClass("loading");
+    $(".row").removeClass();
+    $("#wrap > div").addClass("row");
+    $(".cell").removeClass();
+    $("#wrap .row > div").addClass("cell");
+    if ($("body").hasClass("darkmode")){
+      $(".cell").addClass("darkmode");
+    }
+    $(wrap)
+        .get(0)
+        .style.setProperty("--hue", (Math.floor(Math.random() * 2) * 100) + 'deg');
+    $("#wrap .cell").each(function() {
+      $(this).addClass("cell" + Math.floor(Math.random() * 16 + 1));
+$(this).parent().removeClass();     $(this).parent().addClass("row full" + Math.floor(Math.random() * 22 + 1));
+    });
+    $(".cell").each(function() {
+
+      $(this)
+        .parent()
+        .get(0)
+        .style.setProperty("--size", Math.floor(Math.random() * 2 + 1));
+
+      
+      $(this)
+        .parent()
+        .get(0)
+        .style.setProperty("--angle", ((Math.floor(Math.random() * 2) + 1) * 180) + "deg");
+      
+    });
+  }, 2000);
+  
+  
+}
+
+$(".darkmode").click(function(){
+  $("body").toggleClass("darkmode");
+  $(this).toggleClass("active");
+  draw();
+})
+
+$(".refresh").on("click", function() {
+    draw();
+  });
+
+$(document).ready(function(){
+  $("#wrap").removeClass('hide');
+  draw();
+})
\ No newline at end of file
diff --git a/holiday-cssweater-generator/src/style.scss b/holiday-cssweater-generator/src/style.scss
new file mode 100644
index 0000000..4eeb901
--- /dev/null
+++ b/holiday-cssweater-generator/src/style.scss
@@ -0,0 +1,602 @@
+$t: transparent;
+$red: #db2430;
+
+
+@mixin stitches($color){
+  background:linear-gradient(55deg, $t 2.5px, $color 2.5px, $color 3.5px, $color 4.5px, $t 4.5px), linear-gradient(-55deg, $t 2.5px, $color 2.5px, $color 3.5px, $color 4.5px, $t 4.5px), linear-gradient(55deg, $t 2.5px, $color 2.5px,$color 3.5px,$color 4.5px, $t 4.5px), linear-gradient(-55deg, $t 2.5px, $color 2.5px, $color 3.5px,$color 4.5px, $t 4.5px), #000;
+  background-size:10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position:calc(5.5px - 4px) 50%, -9px 50%, calc(5.5px - 4px) calc(50% - 6.5px), -9px calc(50% - 6px);
+}
+
+body{
+  width:100vw;
+  height:100vh;
+  max-width:100vw;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  @include stitches($red);
+  @media (max-height:800px){
+    zoom:0.75;
+    position:absolute;
+    left:50%;
+    top:50%;
+    transform:translateX(-50%) translateY(-50%);
+  }
+  &:before{
+    content:'';
+    position:absolute;
+    width:500%;
+    height:100%;
+    @include stitches(#666);
+    opacity:0;
+    transition:0.5s ease-in-out;
+    @media (max-height:800px){
+      height:200%;
+      top:-50%;
+    }
+  }
+  &.darkmode{
+    filter:saturate(0) brightness(0.75) contrast(1.25);
+    &:before{
+      opacity:1;
+    }
+  }
+  button{
+    position:absolute;
+    margin-bottom:50px;
+    top:calc(50% + 350px);
+    color:#fff;
+    padding:5px;
+    text-transform:uppercase;
+    letter-spacing:2px;
+    border:none;
+    background:$t;
+    font-family:Futura;
+    font-weight:900;
+    text-shadow:0 5px 10px rgba(0,0,0,1);
+    transform:translateX(-50%);
+    left:calc(50% + 100px);
+    outline:none;
+    cursor:pointer;
+    &:focus, &:hover{
+      outline:none;
+    }
+    &.refresh.loading{
+      &:before{
+        width:70px;
+        transition:width 1s ease-in-out;
+        transition-delay:0s;
+        animation:bgload 2s ease-in 1 forwards;
+        @keyframes bgload{
+          to{
+            background-position:-200px 50%, 50% 50%;
+          }
+        }
+      }
+    }
+    &.refresh{
+      &:before{
+        transition:0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        transition-delay:1.25s;
+        background:repeating-linear-gradient(45deg, #fff 2px, $t 2px, $t 9px, #fff 9px, #fff 11px), green;
+        background-size:1100px 100%, 100%;
+        background-repeat:no-repeat;
+        background-position:-400px 50%, 50% 50%;
+        animation:bgload2 1.5s ease-out 1 forwards;
+        @keyframes bgload2{
+          from{
+            background-position:-200px 50%, 50% 50%;
+          }
+          to{
+            background-position:0px 50%, 50% 50%;
+          }
+        }
+      }
+    }
+    &.active{
+      &:before{
+        transform:translateX(25px);
+        background:#222;
+      }
+    }
+    &:before{
+      content:'';
+      position:absolute;
+      width:20px;
+      height:20px;
+      background:green;
+      border-radius:25px;
+      top:37.5px;
+      z-index:2;
+      left:calc(50% - 10px);
+      transform:translateX(-25px);
+      box-shadow:inset 0 -1.5px 5px rgba(0,0,0,0.75);
+      transition:0.3s ease-in-out;
+    }
+    &:after{
+      content:'';
+      position:absolute;
+      width:75px;
+      left:calc(50% - 37.5px);
+      height:25px;
+      box-shadow:0 0 0 2px #fff, 0 5px 10px rgba(0,0,0,1);
+      top:35px;
+      border-radius:25px;
+      background:rgba(255,255,255,0.75);
+      z-index:0;
+    }
+    &:first-of-type{
+      left:calc(50% - 100px);
+    }
+  }
+  #wrap{
+    display: grid;
+    transition:filter 0.5s ease-in-out;
+    filter:hue-rotate(var(--hue));
+    grid-template-rows: repeat(10, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    width:700px;
+    height:700px;
+    position:relative;
+    margin-top:-40px;
+    z-index:2;
+    box-shadow:0 40px 40px -10px rgba(0,0,0,0.5), 0 0 0 200vh rgba(0,0,0,0.05);
+    border-radius:10px;
+    background:linear-gradient(55deg, $t 2.5px, $red 2.5px, $red 3.5px, $red 4.5px, $t 4.5px), linear-gradient(-55deg, $t 2.5px, $red 2.5px, $red 3.5px, $red 4.5px, $t 4.5px), linear-gradient(55deg, $t 2.5px, $red 2.5px,$red 3.5px,$red 4.5px, $t 4.5px), linear-gradient(-55deg, $t 2.5px, $red 2.5px, $red 3.5px,$red 4.5px, $t 4.5px), #000;
+  background-size:10px 12px, 10px 12px, 10px 12px, 10px 12px;
+  background-position:0px 50%, -10.5px 50%, 0px calc(50% - 6px), -10.5px calc(50% - 6px);
+    overflow:hidden;
+    min-width:700px;
+    &.hide{
+      .row{
+        clip-path: polygon(-100% -100%, -100% -100%, -100% 200%, -100% 200%);
+      }
+    }
+    .row{
+      width:50%;
+      height:100%;
+      margin-left:50%;
+      top:0;
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      grid-column-gap: 0px;
+      grid-row-gap: 0px;
+      -webkit-box-reflect: left;
+      clip-path: polygon(-100% -100%, 100% -100%, 100% 200%, -100% 200%);
+      transition:1s ease-in-out;
+      @for $i from 1 through 10{
+        &:nth-of-type(even){
+          transition:0.8s ease-in-out;
+        }
+        &:nth-of-type(#{$i}){
+          transition-delay:#{$i/10}s;
+        }
+      }
+      &:nth-of-type(5){
+        @for $i from 1 through 7{
+          &.full#{$i}{
+            z-index:9;
+            transition:0.6s;
+            transition-delay:0s;
+            .cell{
+              &:nth-of-type(1){
+                z-index:9;
+                opacity:1;
+                @for $i from 9 through 16{
+                  &.cell#{$i}{
+                    opacity:1;
+                  }
+                }
+                &.darkmode{
+                  &:before{
+                    clip-path: polygon(41% 24%, 35% 15%, 25% 10%, 17% 9%, 10% 9%, 5% 6%, 1% 1%, 5% 11%, 10% 14%, 22% 17%, 30% 22%, 34% 30%, 34% 33%, 31% 35%, 23% 36%, 17% 37%, 12% 40%, 12% 42%, 17% 44%, 26% 47%, 31% 48%, 34% 37%, 36% 37%, 34% 45%, 34% 48%, 37% 49%, 38% 54%, 37% 56%, 33% 53%, 32% 50%, 30% 51%, 30% 59%, 33% 64%, 38% 70%, 41% 73%, 42% 78%, 43% 82%, 45% 85%, 47% 88%, 49% 91%, 48% 94%, 49% 98%, 51% 95%, 54% 88%, 58% 82%, 58% 74%, 59% 71%, 64% 69%, 69% 61%, 70% 56%, 68% 50%, 66% 52%, 63% 55%, 61% 54%, 63% 50%, 66% 48%, 68% 48%, 66% 39%, 64% 34%, 67% 34%, 68% 43%, 71% 47%, 77% 47%, 84% 44%, 88% 41%, 84% 39%, 74% 35%, 65% 32%, 69% 25%, 74% 20%, 80% 17%, 88% 15%, 94% 12%, 97% 7%, 99% 1%, 94% 7%, 88% 9%, 81% 9%, 74% 11%, 67% 14%, 63% 18%, 60% 23%, 57% 25%, 52% 27%, 49% 27%, 45% 25%, 42% 25%);
+                    mask:none;
+
+                  }
+                }
+                &:before{
+                  width:200%;
+                  height:200%;
+                  left:auto;
+                  right:0;
+                  opacity:1;
+                  z-index:9;
+                }
+                &:after{
+                  content:'';
+                  opacity:1;
+                  position:absolute;
+                  width:200%;
+                  height:200%;
+                  @include stitches($red);
+                  z-index:999;
+                  left:auto;
+                  right:0%;
+                  top:0%;
+                  z-index:0;
+                }
+              }
+            }
+          }
+        }
+      }
+      &:nth-of-type(1), &:nth-of-type(10){
+        @for $i from 8 through 15{
+          &.full#{$i}{
+            z-index:9;
+            transition:0.6s;
+            transition-delay:0s;
+            .cell{
+              &:nth-of-type(4){
+                z-index:9;
+                &:before{
+                  width:175%;
+                  height:175%;
+                  left:auto;
+                  top:12.5%;
+                  right:-50%;
+                  opacity:1;
+                  z-index:9;
+                }
+                &:after{
+                  content:'';
+                  opacity:1;
+                  position:absolute;
+                  width:300%;
+                  height:300%;
+                  @include stitches($red);
+                  z-index:999;
+                  left:auto;
+                  right:-100%;
+                  top:0;
+                  z-index:0;
+                  mask:none;
+                }
+              }
+            }
+          }
+        }
+      }
+      &:nth-of-type(10){
+        @for $i from 8 through 15{
+          &.full#{$i}{
+            z-index:9;
+            transition:0.6s;
+            transition-delay:0s;
+            .cell{
+              &:nth-of-type(4){
+                z-index:9;
+                &:before{
+                  width:175%;
+                  height:175%;
+                  left:auto;
+                  top:auto;
+                  bottom:12.5%;
+                  right:-50%;
+                  opacity:1;
+                  z-index:9;
+                }
+                &:after{
+                  content:'';
+                  opacity:1;
+                  position:absolute;
+                  width:300%;
+                  height:300%;
+                  @include stitches($red);
+                  z-index:999;
+                  left:auto;
+                  right:-100%;
+                  top:auto;
+                  bottom:0;
+                  z-index:0;
+                }
+              }
+            }
+          }
+        }
+      }
+      @for $i from 16 through 22{
+        &.full#{$i}{
+          .cell{
+            &.darkmode{
+              &:before{
+                content:'' !important;
+                background-clip:border-box;
+              }
+            }
+          }
+        }
+      }
+      @for $i from 16 through 17{
+        &.full#{$i}{
+          .cell{
+            opacity:1;
+            z-index:99;
+            &:not(.darkmode){
+              transform:rotate(var(--angle));
+            }
+            &.darkmode, &.darkmode.cell1, &.darkmode.cell9{
+              &:before{
+                clip-path: polygon(0 40%, 3% 52%, 7% 64%, 17% 65%, 25% 58%, 25% 47%, 20% 37%, 17% 28%, 17% 14%, 24% 4%, 31% 1%, 27% 15%, 27% 25%, 31% 37%, 39% 47%, 44% 54%, 47% 62%, 57% 65%, 61% 55%, 64% 44%, 60% 36%, 56% 29%, 58% 20%, 62% 23%, 62% 30%, 67% 36%, 73% 28%, 75% 19%, 73% 9%, 68% 1%, 76% 6%, 82% 22%, 81% 36%, 79% 47%, 79% 59%, 87% 66%, 95% 63%, 99% 54%, 100% 41%, 100% 100%, 81% 100%, 66% 96%, 57% 94%, 48% 93%, 35% 95%, 27% 97%, 18% 99%, 8% 100%, 0 100%);
+                content: '';
+                top: 0;
+                transform: none;
+                background-clip:none;
+                -webkit-background-clip:none;
+                width:100%;
+                height:100%;
+                top:0;
+                left:0;
+                right:auto;
+                bottom:auto;
+                mask:none;
+                border-radius:0;
+              }
+              &:after{
+                display:none;
+              }
+            }
+            &:before{
+              //thick diagonal
+              mask:none;
+              clip-path: polygon(50% 0%, 100% 50%, 100% 100%, 50% 50%, 0 100%, 0 50%);
+            }
+          }
+        }
+      }
+      @for $i from 18 through 19{
+        &.full#{$i}{
+          .cell{
+            opacity:1;
+            &:not(.darkmode){
+              transform:rotate(var(--angle));
+            }
+            &.darkmode, &.darkmode.cell1, &.darkmode.cell9{
+              &:before{
+                clip-path: polygon(0 40%, 3% 52%, 7% 64%, 17% 65%, 25% 58%, 25% 47%, 20% 37%, 17% 28%, 17% 14%, 24% 4%, 31% 1%, 27% 15%, 27% 25%, 31% 37%, 39% 47%, 44% 54%, 47% 62%, 57% 65%, 61% 55%, 64% 44%, 60% 36%, 56% 29%, 58% 20%, 62% 23%, 62% 30%, 67% 36%, 73% 28%, 75% 19%, 73% 9%, 68% 1%, 76% 6%, 82% 22%, 81% 36%, 79% 47%, 79% 59%, 87% 66%, 95% 63%, 99% 54%, 100% 41%, 100% 100%, 81% 100%, 66% 96%, 57% 94%, 48% 93%, 35% 95%, 27% 97%, 18% 99%, 8% 100%, 0 100%);
+                content: '';
+                top: 0;
+                transform: none;
+                background-clip:none;
+                -webkit-background-clip:none;
+                width:100%;
+                height:100%;
+                top:0;
+                left:0;
+                right:auto;
+                bottom:auto;
+                mask:none;
+                border-radius:0;
+              }
+              &:after{
+                display:none;
+              }
+            }
+            &:before{
+              //thin diagonal
+              mask:none;
+              clip-path: polygon(50% 40%, 100% 90%, 100% 100%, 50% 50%, 0 100%, 0 90%);
+            }
+            &:after{
+              // triangle
+              opacity:1;
+              clip-path: polygon(50% 70%, 41% 85%, 60% 85%);
+
+            }
+          }
+        }
+      }
+      @for $i from 20 through 21{
+        &.full#{$i}{
+          .cell{
+            opacity:1;
+            &.darkmode, &.darkmode.cell1, &.darkmode.cell9{
+              &:before{
+                clip-path: polygon(0 59%, 9% 70%, 21% 65%, 20% 54%, 10% 43%, 10% 24%, 20% 11%, 31% 8%, 28% 18%, 30% 33%, 35% 41%, 42% 39%, 47% 32%, 48% 19%, 51% 23%, 55% 43%, 55% 61%, 63% 69%, 71% 65%, 75% 58%, 72% 38%, 66% 28%, 61% 18%, 71% 24%, 80% 38%, 83% 51%, 84% 62%, 92% 65%, 98% 63%, 100% 59%, 100% 100%, 86% 98%, 77% 94%, 65% 92%, 54% 93%, 48% 96%, 40% 98%, 31% 97%, 22% 94%, 12% 95%, 0 100%);
+
+                content: '';
+                top: 0;
+                mask:none;
+                transform: none;
+                background-clip:none;
+                -webkit-background-clip:none;
+                width:100%;
+                height:100%;
+                top:0;
+                left:0;
+                right:auto;
+                bottom:auto;
+                border-radius:0;
+              }
+              &:after{
+                display:none;
+              }
+            }
+            &:not(.darkmode){
+              transform:rotate(var(--angle));
+            }
+            &:before{
+              //thin diagonal
+              mask:none;
+              clip-path: polygon(50% 40%, 100% 90%, 100% 100%, 50% 50%, 0 100%, 0 90%);
+              top:-30px;
+            }
+            &:after{
+              //thick diagonal
+              mask:none;
+              clip-path: polygon(50% 20%, 100% 70%, 100% 100%, 50% 50%, 0 100%, 0 70%);
+              filter:invert(1);
+              opacity:1;
+            }
+          }
+        }
+      }
+      @for $i from 21 through 22{
+        &.full#{$i}{
+          .cell{
+            &:before{
+              width:100%;
+              height:100%;
+              left:0;
+              top:0;
+            }
+            &.cell5,  &.cell7{
+              &:not(.darkmode){
+                &:before{
+                  width:50%;
+                  height:50%;
+                  top:25%;
+                  left:25%;
+                }
+              }
+            }
+            &.cell2, &.cell6{
+              &:not(.darkmode){
+                &:before{
+                  width:75%;
+                  height:75%;
+                  top:12.5%;
+                  left:12.5%;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    
+    .cell{
+      position:relative;
+      &:before, &:after{
+        content:'';
+        position:absolute;
+        left:0;
+        top:0;
+        width:100%;
+        height:100%;
+        @include stitches(#fff);
+      }
+      &:after{
+        opacity:0;
+      }
+      &.cell1, &.cell9{
+        &.darkmode{
+          &:before{
+            content:'666';
+            color:$t;
+            background-clip:text;
+            font-size:50px;
+            clip-path:none;
+            width:100%;
+            text-align:center;
+            top:50%;
+            transform:translateY(-50%);
+            font-family: 'UnifrakturCook', cursive;
+          }
+        }
+        &:before{
+          //deer
+        clip-path: polygon(57% 0%, 57% 13%, 51% 13%, 51% 8%, 45% 8%, 45% 24%, 30% 24%, 29% 8%, 24% 8%, 24% 12%, 18% 12%, 18% 1%, 11% 1%, 11% 7%, 5% 7%, 5% 13%, 16% 14%, 17% 20%, 23% 20%, 24% 24%, 28% 25%, 29% 30%, 23% 30%, 23% 35%, 16% 36%, 17% 46%, 30% 47%, 30% 53%, 36% 53%, 36% 99%, 42% 100%, 41% 76%, 48% 76%, 48% 99%, 54% 99%, 54% 77%, 73% 77%, 74% 100%, 81% 100%, 81% 77%, 86% 77%, 86% 100%, 92% 100%, 93% 53%, 85% 53%, 86% 48%, 93% 47%, 93% 41%, 86% 41%, 86% 47%, 46% 46%, 45% 36%, 52% 36%, 52% 31%, 46% 31%, 46% 24%, 51% 24%, 51% 20%, 57% 19%, 57% 14%, 70% 14%, 70% 8%, 64% 8%, 64% 1%, 57% 0%); 
+        }
+      }
+      &.cell2, &.cell10{
+        &:before{
+          //flower
+        clip-path: polygon(72% 0, 71% 25%, 24% 73%, 0 74%, 18% 55%, 80% 55%, 98% 73%, 76% 75%, 28% 27%, 27% 0, 45% 19%, 46% 84%, 28% 100%, 27% 77%, 74% 29%, 100% 29%, 80% 47%, 19% 48%, 0 29%, 23% 28%, 71% 77%, 71% 100%, 53% 84%, 51% 57%, 53% 19%);
+        }
+        &.darkmode{
+          &:before{
+            clip-path: polygon(4% 91%, 10% 96%, 55% 56%, 66% 65%, 75% 65%, 86% 57%, 92% 51%, 97% 57%, 100% 39%, 87% 41%, 89% 46%, 76% 57%, 67% 56%, 61% 50%, 78% 35%, 83% 38%, 89% 22%, 73% 27%, 75% 31%, 55% 46%, 53% 41%, 50% 36%, 52% 29%, 58% 22%, 63% 19%, 69% 23%, 74% 7%, 58% 9%, 60% 13%, 51% 19%, 45% 25%, 44% 35%, 46% 45%, 48% 49%, 48% 51%);
+
+          }
+        }
+      }
+      &.cell3, &.cell11{
+        &:before{
+          //dino
+          clip-path: polygon(50% 5%, 50% 10%, 46% 10%, 45% 37%, 43% 36%, 43% 40%, 36% 39%, 36% 44%, 30% 44%, 30% 48%, 26% 48%, 26% 52%, 18% 52%, 18% 47%, 14% 48%, 14% 45%, 11% 44%, 10% 36%, 6% 37%, 7% 60%, 25% 78%, 26% 94%, 34% 95%, 34% 91%, 30% 91%, 30% 86%, 34% 86%, 34% 82%, 38% 82%, 39% 76%, 42% 76%, 42% 81%, 46% 81%, 46% 94%, 54% 95%, 54% 91%, 50% 91%, 50% 74%, 56% 74%, 57% 68%, 63% 65%, 63% 51%, 68% 50%, 68% 56%, 73% 56%, 73% 44%, 63% 44%, 63% 37%, 78% 37%, 78% 32%, 67% 32%, 67% 28%, 88% 29%, 89% 11%, 83% 11%, 83% 6%, 60% 6%, 60% 16%, 54% 17%, 55% 12%, 60% 11%, 61% 6%, 51% 6%);
+        }
+        &.darkmode{
+          &:before{
+            clip-path: polygon(9% 8%, 11% 24%, 25% 36%, 34% 26%, 47% 23%, 64% 23%, 75% 31%, 78% 37%, 86% 33%, 93% 23%, 95% 5%, 98% 22%, 98% 38%, 93% 49%, 85% 53%, 79% 59%, 74% 51%, 64% 48%, 59% 50%, 56% 57%, 62% 65%, 79% 66%, 78% 78%, 73% 96%, 59% 95%, 57% 83%, 50% 83%, 48% 89%, 46% 95%, 34% 95%, 27% 81%, 21% 67%, 44% 65%, 49% 57%, 45% 48%, 35% 48%, 28% 53%, 23% 57%, 15% 55%, 6% 38%, 5% 25%);
+          }
+        }
+      }
+      &.cell4, &.cell12{
+        &:before{
+          // tree
+        clip-path: polygon(50% 0, 29% 18%, 41% 19%, 20% 45%, 34% 45%, 10% 70%, 45% 70%, 45% 90%, 55% 90%, 55% 70%, 90% 70%, 65% 45%, 80% 45%, 60% 19%, 72% 18%);
+        }
+        &.darkmode{
+          &:before{
+            clip-path:none;
+            mask:linear-gradient(to right, $t 45%, #000 45%, #000 55%, $t 55%), linear-gradient(to top, $t 35%, #000 35%, #000 45%, $t 45%);
+            width:50%;
+            height:75%;
+            top:12.5%;
+            left:25%;
+            z-index:2;
+          }
+          &:after{
+            opacity:1;
+            @include stitches($red);
+            z-index:1;
+          }
+        }
+      }
+      &.cell5, &.cell13{
+        &:before{
+          // heart
+          clip-path: polygon(51% 90%, 5% 50%, 5% 30%, 15% 15%, 35% 15%, 50% 30%, 65% 15%, 84% 15%, 95% 30%, 95% 50%);
+        }
+        &.darkmode{
+          @include stitches($red);
+          &:before{
+            clip-path: polygon(48% 0%, 8% 94%, 14% 94%, 100% 32%, 0 32%, 90% 94%, 93% 91%, 11% 36%, 89% 36%, 16% 88%, 18% 80%, 49% 10%, 93% 93%, 95% 87%);
+            border-radius:100%;
+          }
+          &:after{
+            opacity:1;
+            mask:radial-gradient(circle at center, transparent 60%, #000 60%, #000 70%, $t 70%);
+            clip-path:none;
+          }
+        }
+      }
+      &.cell6, &.cell14{
+        &.darkmode{
+            &:before{
+              clip-path: polygon(14% 10%, 10% 19%, 8% 28%, 11% 42%, 16% 51%, 22% 47%, 29% 39%, 38% 38%, 44% 38%, 48% 97%, 53% 97%, 56% 94%, 52% 37%, 59% 34%, 68% 34%, 74% 36%, 80% 38%, 79% 29%, 79% 19%, 77% 8%, 73% 3%, 70% 1%, 61% 9%, 50% 15%, 48% 6%, 39% 8%, 41% 17%, 27% 15%);
+
+              mask:none;
+            }
+          }
+        &:before{
+          // snowflake
+          clip-path: circle(45% at 50% 50%);
+          mask:radial-gradient(circle at 15% 65%, #000 5%, $t 5%), radial-gradient(circle at 85% 65%, #000 5%, $t 5%),radial-gradient(circle at 15% 35%, #000 5%, $t 5%), radial-gradient(circle at 85% 35%, #000 5%, $t 5%),radial-gradient(circle at 35% 85%, #000 5%, $t 5%), radial-gradient(circle at 65% 85%, #000 5%, $t 5%),radial-gradient(circle at 35% 15%, #000 5%, $t 5%), radial-gradient(circle at 65% 15%, #000 5%, $t 5%), linear-gradient(to right, $t 47.5%, #000 47.5%, #000 52.5%, $t 52.5%), linear-gradient(to bottom, $t 47.5%, #000 47.5%, #000 52.5%, $t 52.5%), linear-gradient(45deg, $t 47.5%, #000 47.5%, #000 52.5%, $t 52.5%), linear-gradient(-45deg, $t 47.5%, #000 47.5%, #000 52.5%, $t 52.5%);
+          
+        }
+      }
+      &.cell7, &.cell15{
+        &:before{
+          // star
+          mask:radial-gradient(circle at center, #000 57.5%, $t 57.5%);
+          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
+        }
+      }
+      &.cell8, &.cell16{
+        &:before{
+          clip-path: circle(25% at 50% 50%);
+          mask:linear-gradient(45deg, $t 47.5%, #000 47.5%, #000 52.5%, $t 52.5%), linear-gradient(-45deg, $t 47.5%, #000 47.5%, #000 52.5%, $t 52.5%);
+        }
+      }
+      @for $i from 9 through 16{
+        &.cell#{$i}{
+          opacity:0;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/hover-animated-portfolio/README.markdown b/hover-animated-portfolio/README.markdown
new file mode 100644
index 0000000..8ebe74a
--- /dev/null
+++ b/hover-animated-portfolio/README.markdown
@@ -0,0 +1,5 @@
+# Hover Animated Portfolio
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cmlohr/pen/wvzVYyr](https://codepen.io/cmlohr/pen/wvzVYyr).
+
+
diff --git a/hover-animated-portfolio/dist/index.html b/hover-animated-portfolio/dist/index.html
new file mode 100644
index 0000000..bfa58bb
--- /dev/null
+++ b/hover-animated-portfolio/dist/index.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Hover Animated Portfolio</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- ################## Under Grid Start ################# -->
+<div class='under-port-container'>
+    <div class='under-portfolio'>
+<!-- A  -->
+      <div class='under-items large'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2019/06/13/13/06/monster-4271569_960_720.png'></image>
+      </svg>
+      </div>
+
+<!--   B    -->
+      <div class='under-items medium'>
+         <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2017/12/28/12/31/desktop-3045123_960_720.jpg'></image>
+           </svg>
+      </div>
+
+<!-- C  -->
+      <div class='under-items medium'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2019/09/14/09/44/cat-4475583_960_720.png'></image>
+      </svg>
+      </div>
+
+<!--   D   -->
+      <div class='under-items tall'>
+            <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2014/04/03/00/35/giraffe-308771_960_720.png'></image>
+      </svg>
+      </div>
+
+<!--  E  -->
+      <div class='under-items small'>
+           <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2018/10/02/15/18/cloud-3719093_960_720.png'></image>
+      </svg>
+      </div>
+
+<!--    F    -->
+      <div class='under-items wide'>
+            <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2019/08/09/19/22/leaves-4395694_960_720.png'></image>
+      </svg>
+      </div>
+
+<!--   G     -->
+      <div class='under-items wide'>
+            <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2016/01/02/16/21/girl-1118419_960_720.jpg'></image>
+      </svg>
+      </div>
+
+<!--   H     -->
+      <div class='under-items medium'>
+            <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2020/08/02/03/33/red-fox-5456627_960_720.jpg'></image>
+      </svg>
+      </div>
+    </div>
+    </div>
+
+
+<!-- #################### Surface Grid Start #################### -->
+    <div class='port-container'>
+    <div class='items portfolio'>
+<!-- A  -->
+      <div class='item large'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-0'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text big-box' dy='.3em' x='50%' y='50%'>
+            A
+          </text>
+          <g clip-path='url(#clip-0)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2019/06/13/13/06/monster-4271569_960_720.png'></image>
+          </g>
+        </svg>
+      </div>
+
+      
+<!--   B    -->
+      <div class='item medium'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-1'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text' dy='.3em' x='50%' y='50%'>
+          B
+          </text>
+          <g clip-path='url(#clip-1)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2017/12/28/12/31/desktop-3045123_960_720.jpg'></image>
+          </g>
+        </svg>
+      </div>
+      
+<!-- C  -->
+      <div class='item medium'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-2'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text' dy='.3em' x='50%' y='50%'>
+           C
+          </text>
+          <g clip-path='url(#clip-2)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2019/09/14/09/44/cat-4475583_960_720.png'></image>
+          </g>
+        </svg>
+      </div>
+      
+<!--    D    -->
+      <div class='item tall'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-3'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text' dy='.3em' x='50%' y='50%'>
+            D
+          </text>
+          <g clip-path='url(#clip-3)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2014/04/03/00/35/giraffe-308771_960_720.png'</image>
+          </g>
+        </svg>
+      </div>
+
+<!--   E     -->
+      <div class='item small'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-4'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text small-box' dy='.3em' x='50%' y='50%'>
+            E
+          </text>
+          <g clip-path='url(#clip-4)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2018/10/02/15/18/cloud-3719093_960_720.png'></image>
+          </g>
+        </svg>
+      </div>
+
+<!--   F   -->
+      <div class='item wide'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-5'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text' dy='.3em' x='50%' y='50%'>
+            F
+          </text>
+          <g clip-path='url(#clip-5)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2019/08/09/19/22/leaves-4395694_960_720.png'></image>
+          </g>
+        </svg>
+      </div>
+
+<!-- G -->
+      <div class='item wide'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-6'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text' dy='.3em' x='50%' y='50%'>
+            G
+          </text>
+          <g clip-path='url(#clip-6)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2016/01/02/16/21/girl-1118419_960_720.jpg'></image>
+          </g>
+        </svg>
+      </div>
+
+<!-- H -->
+      <div class='item medium'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-7'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text' dy='.3em' x='50%' y='50%'>
+            H
+          </text>
+          <g clip-path='url(#clip-7)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2020/08/02/03/33/red-fox-5456627_960_720.jpg'</image>
+          </g>
+        </svg>
+      </div>
+    </div>
+    </div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/hover-animated-portfolio/dist/script.js b/hover-animated-portfolio/dist/script.js
new file mode 100644
index 0000000..1e7888c
--- /dev/null
+++ b/hover-animated-portfolio/dist/script.js
@@ -0,0 +1,53 @@
+var items = [],
+  point = document.querySelector("svg").createSVGPoint();
+
+function getCoordinates(e, svg) {
+  point.x = e.clientX;
+  point.y = e.clientY;
+  return point.matrixTransform(svg.getScreenCTM().inverse());
+}
+
+function changeColor(e) {
+  document.body.className = e.currentTarget.className;
+}
+
+function Item(config) {
+  Object.keys(config).forEach(function (item) {
+    this[item] = config[item];
+  }, this);
+  this.el.addEventListener("mousemove", this.mouseMoveHandler.bind(this));
+  this.el.addEventListener("touchmove", this.touchMoveHandler.bind(this));
+}
+
+Item.prototype = {
+  update: function update(c) {
+    this.clip.setAttribute("cx", c.x);
+    this.clip.setAttribute("cy", c.y);
+  },
+  mouseMoveHandler: function mouseMoveHandler(e) {
+    this.update(getCoordinates(e, this.svg));
+  },
+  touchMoveHandler: function touchMoveHandler(e) {
+    e.preventDefault();
+    var touch = e.targetTouches[0];
+    if (touch) return this.update(getCoordinates(touch, this.svg));
+  }
+};
+
+[].slice
+  .call(document.querySelectorAll(".item"), 0)
+  .forEach(function (item, index) {
+    items.push(
+      new Item({
+        el: item,
+        svg: item.querySelector("svg"),
+        clip: document.querySelector("#clip-" + index + " circle")
+      })
+    );
+  });
+
+[].slice
+  .call(document.querySelectorAll("button"), 0)
+  .forEach(function (button) {
+    button.addEventListener("click", changeColor);
+  });
\ No newline at end of file
diff --git a/hover-animated-portfolio/dist/style.css b/hover-animated-portfolio/dist/style.css
new file mode 100644
index 0000000..160f8cd
--- /dev/null
+++ b/hover-animated-portfolio/dist/style.css
@@ -0,0 +1,142 @@
+body {
+  background-color: #000;
+}
+.port-set {
+height: 100%;
+margin: auto;
+padding: 50px;
+max-width: 800px;
+align-items: center;
+position: relative;
+}
+
+/* .port-container z-index has to be set for this to work */
+.port-container {
+z-index: 1;
+}
+.under-port-container {
+z-index: 0;
+}
+
+.under-port-container {
+  display: block;
+   position: relative;
+}
+ .port-container{
+  display: block;
+   position: relative;
+}
+
+.portfolio  {
+  display: grid;
+  grid-template-rows: repeat(8, 1fr);
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 10px;
+  margin: auto;
+position: relative;
+width: 440px;
+padding: 10px;
+top: -46.970em;
+}
+.under-portfolio {
+  display: grid;
+  grid-template-rows: repeat(8, 1fr);
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 10px;
+  margin: auto;
+position: relative;
+width: 440px;
+padding: 10px;
+}
+
+.under-items {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border: .2em solid rgb(0,230,255);
+}
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  cursor: pointer;
+  background-color: rgba(12, 22, 24, 0.85);
+  border: .2em solid rgb(0,230,255);
+  border-radius: 0px;
+  box-shadow: none;
+  transform: translateZ(0);
+}
+
+
+svg {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+circle {
+  transform-origin: 50% 50%;
+  transform: scale(0);
+  transition: transform 500ms;
+}
+
+text {
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  text-anchor: middle;
+  letter-spacing: 1px;
+}
+
+.svg-text {
+  fill: #eeeeee;
+  display: block;
+  font-family: 'Archivo', sans-serif;
+}
+image {
+  transform: scale(2);
+  transform-origin: 50% 50%;
+  transition: transform 100ms cubic-bezier(0.25, 0.46, 0.45, 0.24);
+}
+
+.small {
+  grid-row: span 1;
+  grid-column: span 1;
+}
+.medium {
+  grid-row: span 2;
+  grid-column: span 2;
+}
+.large {
+  grid-row: span 3;
+  grid-column: span 3;
+}
+.tall {
+  grid-row: span 3;
+  grid-column: span 2;
+}
+.wide {
+  grid-row: span 2;
+  grid-column: span 3;
+}
+.item:hover circle {
+transform: scale(5);
+}
+.item:hover image {
+  transform: scale(1);
+}
+.port-heading {
+font-size: 2rem;
+color: #eeeeee;
+font-weight: bold;
+text-decoration: underline rgb(0,230,255);
+margin: auto;
+font-family: 'Raleway', sans-serif;
+ }
+.big-box {
+font-size: 1rem;
+}
+.small-box {
+font-size: 3em;
+}
\ No newline at end of file
diff --git a/hover-animated-portfolio/license.txt b/hover-animated-portfolio/license.txt
new file mode 100644
index 0000000..8dc116e
--- /dev/null
+++ b/hover-animated-portfolio/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Colleen 🐍 (https://codepen.io/cmlohr/pen/wvzVYyr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/hover-animated-portfolio/src/index.html b/hover-animated-portfolio/src/index.html
new file mode 100644
index 0000000..2c0514b
--- /dev/null
+++ b/hover-animated-portfolio/src/index.html
@@ -0,0 +1,204 @@
+  
+<!-- ################## Under Grid Start ################# -->
+<div class='under-port-container'>
+    <div class='under-portfolio'>
+<!-- A  -->
+      <div class='under-items large'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2019/06/13/13/06/monster-4271569_960_720.png'></image>
+      </svg>
+      </div>
+
+<!--   B    -->
+      <div class='under-items medium'>
+         <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2017/12/28/12/31/desktop-3045123_960_720.jpg'></image>
+           </svg>
+      </div>
+
+<!-- C  -->
+      <div class='under-items medium'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2019/09/14/09/44/cat-4475583_960_720.png'></image>
+      </svg>
+      </div>
+
+<!--   D   -->
+      <div class='under-items tall'>
+            <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2014/04/03/00/35/giraffe-308771_960_720.png'></image>
+      </svg>
+      </div>
+
+<!--  E  -->
+      <div class='under-items small'>
+           <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2018/10/02/15/18/cloud-3719093_960_720.png'></image>
+      </svg>
+      </div>
+
+<!--    F    -->
+      <div class='under-items wide'>
+            <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2019/08/09/19/22/leaves-4395694_960_720.png'></image>
+      </svg>
+      </div>
+
+<!--   G     -->
+      <div class='under-items wide'>
+            <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2016/01/02/16/21/girl-1118419_960_720.jpg'></image>
+      </svg>
+      </div>
+
+<!--   H     -->
+      <div class='under-items medium'>
+            <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2020/08/02/03/33/red-fox-5456627_960_720.jpg'></image>
+      </svg>
+      </div>
+    </div>
+    </div>
+
+
+<!-- #################### Surface Grid Start #################### -->
+    <div class='port-container'>
+    <div class='items portfolio'>
+<!-- A  -->
+      <div class='item large'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-0'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text big-box' dy='.3em' x='50%' y='50%'>
+            A
+          </text>
+          <g clip-path='url(#clip-0)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2019/06/13/13/06/monster-4271569_960_720.png'></image>
+          </g>
+        </svg>
+      </div>
+
+      
+<!--   B    -->
+      <div class='item medium'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-1'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text' dy='.3em' x='50%' y='50%'>
+          B
+          </text>
+          <g clip-path='url(#clip-1)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2017/12/28/12/31/desktop-3045123_960_720.jpg'></image>
+          </g>
+        </svg>
+      </div>
+      
+<!-- C  -->
+      <div class='item medium'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-2'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text' dy='.3em' x='50%' y='50%'>
+           C
+          </text>
+          <g clip-path='url(#clip-2)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2019/09/14/09/44/cat-4475583_960_720.png'></image>
+          </g>
+        </svg>
+      </div>
+      
+<!--    D    -->
+      <div class='item tall'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-3'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text' dy='.3em' x='50%' y='50%'>
+            D
+          </text>
+          <g clip-path='url(#clip-3)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2014/04/03/00/35/giraffe-308771_960_720.png'</image>
+          </g>
+        </svg>
+      </div>
+
+<!--   E     -->
+      <div class='item small'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-4'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text small-box' dy='.3em' x='50%' y='50%'>
+            E
+          </text>
+          <g clip-path='url(#clip-4)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2018/10/02/15/18/cloud-3719093_960_720.png'></image>
+          </g>
+        </svg>
+      </div>
+
+<!--   F   -->
+      <div class='item wide'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-5'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text' dy='.3em' x='50%' y='50%'>
+            F
+          </text>
+          <g clip-path='url(#clip-5)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2019/08/09/19/22/leaves-4395694_960_720.png'></image>
+          </g>
+        </svg>
+      </div>
+
+<!-- G -->
+      <div class='item wide'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-6'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text' dy='.3em' x='50%' y='50%'>
+            G
+          </text>
+          <g clip-path='url(#clip-6)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2016/01/02/16/21/girl-1118419_960_720.jpg'></image>
+          </g>
+        </svg>
+      </div>
+
+<!-- H -->
+      <div class='item medium'>
+        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
+          <defs>
+            <clipPath id='clip-7'>
+              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
+            </clipPath>
+          </defs>
+          <text class='svg-text' dy='.3em' x='50%' y='50%'>
+            H
+          </text>
+          <g clip-path='url(#clip-7)'>
+            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2020/08/02/03/33/red-fox-5456627_960_720.jpg'</image>
+          </g>
+        </svg>
+      </div>
+    </div>
+    </div>
diff --git a/hover-animated-portfolio/src/script.js b/hover-animated-portfolio/src/script.js
new file mode 100644
index 0000000..1e7888c
--- /dev/null
+++ b/hover-animated-portfolio/src/script.js
@@ -0,0 +1,53 @@
+var items = [],
+  point = document.querySelector("svg").createSVGPoint();
+
+function getCoordinates(e, svg) {
+  point.x = e.clientX;
+  point.y = e.clientY;
+  return point.matrixTransform(svg.getScreenCTM().inverse());
+}
+
+function changeColor(e) {
+  document.body.className = e.currentTarget.className;
+}
+
+function Item(config) {
+  Object.keys(config).forEach(function (item) {
+    this[item] = config[item];
+  }, this);
+  this.el.addEventListener("mousemove", this.mouseMoveHandler.bind(this));
+  this.el.addEventListener("touchmove", this.touchMoveHandler.bind(this));
+}
+
+Item.prototype = {
+  update: function update(c) {
+    this.clip.setAttribute("cx", c.x);
+    this.clip.setAttribute("cy", c.y);
+  },
+  mouseMoveHandler: function mouseMoveHandler(e) {
+    this.update(getCoordinates(e, this.svg));
+  },
+  touchMoveHandler: function touchMoveHandler(e) {
+    e.preventDefault();
+    var touch = e.targetTouches[0];
+    if (touch) return this.update(getCoordinates(touch, this.svg));
+  }
+};
+
+[].slice
+  .call(document.querySelectorAll(".item"), 0)
+  .forEach(function (item, index) {
+    items.push(
+      new Item({
+        el: item,
+        svg: item.querySelector("svg"),
+        clip: document.querySelector("#clip-" + index + " circle")
+      })
+    );
+  });
+
+[].slice
+  .call(document.querySelectorAll("button"), 0)
+  .forEach(function (button) {
+    button.addEventListener("click", changeColor);
+  });
\ No newline at end of file
diff --git a/hover-animated-portfolio/src/style.css b/hover-animated-portfolio/src/style.css
new file mode 100644
index 0000000..160f8cd
--- /dev/null
+++ b/hover-animated-portfolio/src/style.css
@@ -0,0 +1,142 @@
+body {
+  background-color: #000;
+}
+.port-set {
+height: 100%;
+margin: auto;
+padding: 50px;
+max-width: 800px;
+align-items: center;
+position: relative;
+}
+
+/* .port-container z-index has to be set for this to work */
+.port-container {
+z-index: 1;
+}
+.under-port-container {
+z-index: 0;
+}
+
+.under-port-container {
+  display: block;
+   position: relative;
+}
+ .port-container{
+  display: block;
+   position: relative;
+}
+
+.portfolio  {
+  display: grid;
+  grid-template-rows: repeat(8, 1fr);
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 10px;
+  margin: auto;
+position: relative;
+width: 440px;
+padding: 10px;
+top: -46.970em;
+}
+.under-portfolio {
+  display: grid;
+  grid-template-rows: repeat(8, 1fr);
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 10px;
+  margin: auto;
+position: relative;
+width: 440px;
+padding: 10px;
+}
+
+.under-items {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border: .2em solid rgb(0,230,255);
+}
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  cursor: pointer;
+  background-color: rgba(12, 22, 24, 0.85);
+  border: .2em solid rgb(0,230,255);
+  border-radius: 0px;
+  box-shadow: none;
+  transform: translateZ(0);
+}
+
+
+svg {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+circle {
+  transform-origin: 50% 50%;
+  transform: scale(0);
+  transition: transform 500ms;
+}
+
+text {
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  text-anchor: middle;
+  letter-spacing: 1px;
+}
+
+.svg-text {
+  fill: #eeeeee;
+  display: block;
+  font-family: 'Archivo', sans-serif;
+}
+image {
+  transform: scale(2);
+  transform-origin: 50% 50%;
+  transition: transform 100ms cubic-bezier(0.25, 0.46, 0.45, 0.24);
+}
+
+.small {
+  grid-row: span 1;
+  grid-column: span 1;
+}
+.medium {
+  grid-row: span 2;
+  grid-column: span 2;
+}
+.large {
+  grid-row: span 3;
+  grid-column: span 3;
+}
+.tall {
+  grid-row: span 3;
+  grid-column: span 2;
+}
+.wide {
+  grid-row: span 2;
+  grid-column: span 3;
+}
+.item:hover circle {
+transform: scale(5);
+}
+.item:hover image {
+  transform: scale(1);
+}
+.port-heading {
+font-size: 2rem;
+color: #eeeeee;
+font-weight: bold;
+text-decoration: underline rgb(0,230,255);
+margin: auto;
+font-family: 'Raleway', sans-serif;
+ }
+.big-box {
+font-size: 1rem;
+}
+.small-box {
+font-size: 3em;
+}
\ No newline at end of file
diff --git a/hover-effect-borders-to-underlines/README.markdown b/hover-effect-borders-to-underlines/README.markdown
new file mode 100644
index 0000000..dadc3af
--- /dev/null
+++ b/hover-effect-borders-to-underlines/README.markdown
@@ -0,0 +1,5 @@
+# Hover effect: borders to underlines
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/tiggr/pen/jRrKKg](https://codepen.io/tiggr/pen/jRrKKg).
+
+ Photo credit: [Tamara Bellis](https://unsplash.com/@tamarabellis), 
+[David Lezcano](https://unsplash.com/@_thedl)
\ No newline at end of file
diff --git a/hover-effect-borders-to-underlines/dist/index.html b/hover-effect-borders-to-underlines/dist/index.html
new file mode 100644
index 0000000..d4fb46a
--- /dev/null
+++ b/hover-effect-borders-to-underlines/dist/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Hover effect: borders to underlines</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<figure class="card" tabindex="0">
+		<img class="card-image" src="https://images.unsplash.com/photo-1503475173304-5d340b3e30dc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
+		<div class="box">
+			<div class="box-side-borders"></div>
+			<blockquote class="text">“Don't be into trends. Don't make fashion own you, but you decide what you are, what you want to express by the way you dress and the way to live.”</blockquote>
+		</div>
+		<figcaption>
+			<cite class="cite">— Gianni Versace —</cite>
+		</figcaption>
+	</figure>
+	<figure class="card dark" tabindex="0">
+		<img class="card-image" src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
+		<div class="box">
+			<div class="box-side-borders"></div>
+			<blockquote class="text">“Style is the only thing you can’t buy. It’s not in a shopping bag, a label, or a price tag. It’s something reflected from our soul to the outside world — an emotion.”</blockquote>
+		</div>
+		<figcaption>
+			<cite class="cite">— Alber Elbaz —</cite>
+		</figcaption>
+	</figure>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/hover-effect-borders-to-underlines/dist/style.css b/hover-effect-borders-to-underlines/dist/style.css
new file mode 100644
index 0000000..e047164
--- /dev/null
+++ b/hover-effect-borders-to-underlines/dist/style.css
@@ -0,0 +1,176 @@
+@import url("https://fonts.googleapis.com/css?family=Vidaloka");
+body {
+  font-family: 'Vidaloka', serif;
+  height: 100vh;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: center;
+  background: #f7f6e3;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+.card {
+  position: relative;
+  display: block;
+  width: 640px;
+  height: 300px;
+  margin: 0;
+  margin-top: 50px;
+  margin-bottom: 50px;
+  color: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  outline: none;
+  animation: slide-in 1s backwards;
+}
+.card:last-child {
+  animation-delay: .4s;
+}
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+}
+.card.dark {
+  color: white;
+}
+.card.dark::before {
+  background-image: radial-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6) 50%, transparent), linear-gradient(to top, #00001f, #3580ac);
+}
+.card::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-image: radial-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6) 50%, transparent), linear-gradient(to bottom, #fff0e0, #ffcc99);
+  opacity: 0.1;
+  transition: 0.5s;
+}
+.card:hover::before, .card:focus::before {
+  opacity: 0.4;
+}
+
+.box {
+  width: 450px;
+  padding: 30px;
+  position: relative;
+  font-size: 22px;
+  line-height: 1.6;
+  transition: 0.6s;
+}
+.card:hover .box, .card:focus .box {
+  transform: translateY(-20px);
+}
+
+.text {
+  margin: 0;
+  transform: scale(0.9);
+  transition: 0.5s;
+  text-align: justify;
+}
+.card:hover .text, .card:focus .text {
+  transform: none;
+}
+
+.cite {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, 100%);
+  transition: transform 0.2s 0.075s, letter-spacing 0.2s;
+}
+.card:hover .cite, .card:focus .cite {
+  transition-delay: 0.5s, 0.575s;
+  letter-spacing: .1em;
+  transform: translate(-50%, -20px);
+}
+
+.box::before, .box::after,
+.box-side-borders::before,
+.box-side-borders::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  transition: 0.5s 0.1s;
+  background: currentColor;
+}
+
+.box::before {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+.box::after {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+.card:hover .box::before, .card:focus .box::before {
+  width: 390px;
+  transform: translate(30px, calc(1.6em - .1em + 32px));
+}
+.card:hover .box::after, .card:focus .box::after {
+  width: 390px;
+  transform: translate(30px, calc(.1em - 30px));
+}
+
+.box-side-borders::before, .box-side-borders::after {
+  transition: height 0.5s 0.1s, transform 0.4s 0.2s ease-in-out;
+}
+.box-side-borders::before {
+  bottom: 0;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  transform-origin: bottom;
+}
+.box-side-borders::after {
+  top: 0;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  transform-origin: top;
+}
+.card:hover .box-side-borders::before, .card:hover .box-side-borders::after, .card:focus .box-side-borders::before, .card:focus .box-side-borders::after {
+  height: 390px;
+  transition: transform 0.5s 0.1s, height 0.3s 0.3s ease-in-out;
+}
+.card:hover .box-side-borders::before, .card:focus .box-side-borders::before {
+  transform: translate(30px, calc(-30px - 3.1em)) rotate(90deg);
+}
+.card:hover .box-side-borders::after, .card:focus .box-side-borders::after {
+  transform: translate(-30px, calc(30px + 4.9em)) rotate(90deg);
+}
+
+.card-image {
+  position: absolute;
+  z-index: -2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+  transform-origin: 80% 20%;
+  transition: 1s cubic-bezier(0.32, 0.16, 0, 1);
+  filter: brightness(1.3) contrast(0.8);
+}
+.card.dark .card-image {
+  filter: brightness(0.8) contrast(0.8);
+}
+.card:hover .card-image, .card:focus .card-image {
+  transform: scale(1.05);
+}
diff --git a/hover-effect-borders-to-underlines/license.txt b/hover-effect-borders-to-underlines/license.txt
new file mode 100644
index 0000000..0f7e3cc
--- /dev/null
+++ b/hover-effect-borders-to-underlines/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Tigran Sargsyan (https://codepen.io/tiggr/pen/jRrKKg)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/hover-effect-borders-to-underlines/src/index.html b/hover-effect-borders-to-underlines/src/index.html
new file mode 100644
index 0000000..9276ef5
--- /dev/null
+++ b/hover-effect-borders-to-underlines/src/index.html
@@ -0,0 +1,20 @@
+<figure class="card" tabindex="0">
+		<img class="card-image" src="https://images.unsplash.com/photo-1503475173304-5d340b3e30dc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
+		<div class="box">
+			<div class="box-side-borders"></div>
+			<blockquote class="text">“Don't be into trends. Don't make fashion own you, but you decide what you are, what you want to express by the way you dress and the way to live.”</blockquote>
+		</div>
+		<figcaption>
+			<cite class="cite">— Gianni Versace —</cite>
+		</figcaption>
+	</figure>
+	<figure class="card dark" tabindex="0">
+		<img class="card-image" src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
+		<div class="box">
+			<div class="box-side-borders"></div>
+			<blockquote class="text">“Style is the only thing you can’t buy. It’s not in a shopping bag, a label, or a price tag. It’s something reflected from our soul to the outside world — an emotion.”</blockquote>
+		</div>
+		<figcaption>
+			<cite class="cite">— Alber Elbaz —</cite>
+		</figcaption>
+	</figure>
\ No newline at end of file
diff --git a/hover-effect-borders-to-underlines/src/style.scss b/hover-effect-borders-to-underlines/src/style.scss
new file mode 100644
index 0000000..24d91d0
--- /dev/null
+++ b/hover-effect-borders-to-underlines/src/style.scss
@@ -0,0 +1,225 @@
+@import url('https://fonts.googleapis.com/css?family=Vidaloka');
+
+
+$line-height: 1.6;
+$transition: .5s;
+$border-width: 2px;
+
+
+body {
+	font-family: 'Vidaloka', serif;
+	height: 100vh;
+	margin: 0;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-evenly;
+	align-items: center;
+	background: hsl(57, 55%, 93%);
+}
+
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
+
+.card {
+	position: relative;
+	display: block;
+	width: 640px;
+	height: 300px;
+	margin: 0;
+	margin-top: 50px;
+	margin-bottom: 50px;
+	color: black;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+	outline: none;
+	animation: slide-in 1s backwards;
+
+	&:last-child {
+		animation-delay: .4s;
+	}
+
+	@keyframes slide-in {
+		from {
+			opacity: 0;
+			transform: translateY(30px);
+		}
+	}
+
+	&.dark {
+		color: white;
+
+		&::before {
+			background-image: radial-gradient(hsla(0, 0%, 0%, .8), hsla(0, 0%, 0%, .6) 50%, transparent),
+				linear-gradient(to top, hsl(240, 100%, 6%), hsl(202, 53%, 44%));
+		}
+	}
+
+	&::before {
+		content: "";
+		position: absolute;
+		z-index: -1;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background-image: radial-gradient(hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .6) 50%, transparent),
+			linear-gradient(to bottom, hsl(30, 100%, 94%), hsl(30, 100%, 80%));
+		opacity: 0.1;
+		transition: $transition;
+	}
+
+	&:hover,
+	&:focus {
+		&::before {
+			opacity: 0.4;
+		}
+	}
+}
+
+.box {
+	width: 450px;
+	padding: 30px;
+	position: relative;
+	font-size: 22px;
+	line-height: $line-height;
+	transition: $transition * 1.2;
+
+	.card:hover &,
+	.card:focus & {
+		transform: translateY(-20px);
+	}
+}
+
+.text {
+	margin: 0;
+	transform: scale(.9);
+	transition: $transition;
+	text-align: justify;
+
+	.card:hover &,
+	.card:focus & {
+		transform: none;
+	}
+}
+
+.cite {
+	position: absolute;
+	left: 50%;
+	bottom: 0;
+	transform: translate(-50%, 100%);
+	transition: transform $transition * .4 $transition * .15, letter-spacing $transition * .4;
+
+	.card:hover &,
+	.card:focus & {
+		transition-delay: $transition, $transition * 1.15;
+		letter-spacing: .1em;
+		transform: translate(-50%, -20px);
+	}
+}
+
+.box,
+.box-side-borders {
+	&::before,
+	&::after {
+		content: "";
+		position: absolute;
+		pointer-events: none;
+		transition: $transition .1s;
+		background: currentColor;
+	}
+}
+
+// Borders
+.box {
+	&::before {
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: $border-width;
+	}
+
+	&::after {
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: $border-width;
+	}
+
+	.card:hover &,
+	.card:focus & {
+		&::before {
+			width: 390px;
+			transform: translate(30px, calc(#{$line-height}em - .1em + 32px));
+		}
+
+		&::after {
+			width: 390px;
+			transform: translate(30px, calc(.1em - 30px));
+		}
+	}
+}
+
+.box-side-borders {
+	&::before,
+	&::after {
+		transition: height $transition ($transition * .2), transform ($transition * .8) ($transition * .4) ease-in-out;
+	}
+
+	&::before {
+		bottom: 0;
+		left: 0;
+		width: $border-width;
+		height: 100%;
+		transform-origin: bottom;
+	}
+
+	&::after {
+		top: 0;
+		right: 0;
+		width: $border-width;
+		height: 100%;
+		transform-origin: top;
+	}
+
+	.card:hover &,
+	.card:focus & {
+		&::before,
+		&::after {
+			height: 390px;
+			transition: transform $transition ($transition * .2), height ($transition * .6) ($transition * .6) ease-in-out;
+		}
+		&::before {
+			transform: translate(30px, calc(-30px - #{2 * $line-height - .1}em)) rotate(90deg);
+		}
+		&::after {
+			transform: translate(-30px, calc(30px + #{3 * $line-height + .1}em)) rotate(90deg);
+		}
+	}
+}
+
+.card-image {
+	position: absolute;
+	z-index: -2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	-o-object-fit: cover;
+	object-fit: cover;
+	transform-origin: 80% 20%;
+	transition: ($transition * 2) cubic-bezier(0.32, 0.16, 0, 1);
+	filter: brightness(1.3) contrast(0.8);
+
+	.card.dark & {
+		filter: brightness(.8) contrast(.8);
+	}
+
+	.card:hover &,
+	.card:focus & {
+		transform: scale(1.05);
+	}
+}
diff --git a/hsl-monochromatic-palette-generator/README.markdown b/hsl-monochromatic-palette-generator/README.markdown
new file mode 100644
index 0000000..e14cd6b
--- /dev/null
+++ b/hsl-monochromatic-palette-generator/README.markdown
@@ -0,0 +1,5 @@
+# HSL Monochromatic Palette Generator 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jh3y/pen/JjEjJjN](https://codepen.io/jh3y/pen/JjEjJjN).
+
+
diff --git a/hsl-monochromatic-palette-generator/dist/index.html b/hsl-monochromatic-palette-generator/dist/index.html
new file mode 100644
index 0000000..942de01
--- /dev/null
+++ b/hsl-monochromatic-palette-generator/dist/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - HSL Monochromatic Palette Generator </title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="result">
+  <pre><code class="language-css"></code></pre>
+  <div class="palette">
+    <div class="palette__shade" style="--shade: var(--shade-1);"></div>
+    <div class="palette__shade" style="--shade: var(--shade-2);"></div>
+    <div class="palette__shade" style="--shade: var(--shade-3);"></div>
+    <div class="palette__shade" style="--shade: var(--shade-4);"></div>
+    <div class="palette__shade" style="--shade: var(--shade-5);"></div>
+    <div class="palette__shade" style="--shade: var(--shade-6);"></div>
+    <div class="palette__shade" style="--shade: var(--shade-7);"></div>
+    <div class="palette__shade" style="--shade: var(--shade-8);"></div>
+  </div>
+</div>
+<style id="update"></style>
+<div class="controls">
+  <label>hue</label>
+  <div id="hue"></div>
+  <label>saturation</label>
+  <div id="saturation"></div>
+  <label>lightness</label>
+  <div id="lightness"></div>
+</div>
+<!-- partial -->
+  <script src='https://assets.codepen.io/605876/prism.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/hsl-monochromatic-palette-generator/dist/script.js b/hsl-monochromatic-palette-generator/dist/script.js
new file mode 100644
index 0000000..5d881b9
--- /dev/null
+++ b/hsl-monochromatic-palette-generator/dist/script.js
@@ -0,0 +1,54 @@
+const { $ } = window;
+
+const CODE_BLOCK = document.querySelector('code');
+const STYLE_BLOCK = document.querySelector('#update');
+const CODE_TEMPLATE = (hue, saturation, lightness) => {
+  const STEP = (lightness[1] - lightness[0]) / 7;
+  let RESULT = `:root {\n`;
+  for (let s = 0; s < 8; s++) {
+    RESULT += `  --shade-${s + 1}: hsl(${hue}, ${saturation}%, ${Math.floor(
+    lightness[1] - s * STEP)
+    }%);\n`;
+  }
+  return RESULT += '}';
+};
+
+const UPDATE = () => {
+  const CODE = CODE_TEMPLATE(
+  $('#hue').slider('value'),
+  $('#saturation').slider('value'),
+  $('#lightness').slider('values'));
+
+  const HTML = Prism.highlight(CODE, Prism.languages.css, 'css');
+  STYLE_BLOCK.innerHTML = CODE;
+  CODE_BLOCK.innerHTML = HTML;
+};
+
+$('#hue').slider({
+  min: 0,
+  max: 360,
+  step: 1,
+  slide: UPDATE,
+  change: UPDATE });
+
+$('#saturation').slider({
+  min: 0,
+  max: 100,
+  step: 1,
+  slide: UPDATE,
+  change: UPDATE });
+
+$('#lightness').slider({
+  range: true,
+  min: 0,
+  max: 100,
+  values: [0, 100],
+  step: 1,
+  slide: UPDATE,
+  change: UPDATE });
+
+
+$('#hue').slider('value', Math.floor(Math.random() * 360));
+$('#saturation').slider('value', Math.floor(Math.random() * 100));
+
+UPDATE();
\ No newline at end of file
diff --git a/hsl-monochromatic-palette-generator/dist/style.css b/hsl-monochromatic-palette-generator/dist/style.css
new file mode 100644
index 0000000..17818b7
--- /dev/null
+++ b/hsl-monochromatic-palette-generator/dist/style.css
@@ -0,0 +1,275 @@
+/* PrismJS 1.23.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=css+css-extras&plugins=line-numbers+inline-color+toolbar+copy-to-clipboard */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #ccc;
+  background: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 2rem;
+  margin: 0;
+  overflow: auto;
+  outline: transparent;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #2d2d2d;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #999;
+}
+.token.punctuation {
+  color: #ccc;
+}
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+  color: #e2777a;
+}
+.token.function-name {
+  color: #6196cc;
+}
+.token.boolean,
+.token.number,
+.token.function {
+  color: #f08d49;
+}
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+  color: #f8c555;
+}
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+  color: #cc99cd;
+}
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+  color: #7ec699;
+}
+.token.operator,
+.token.entity,
+.token.url {
+  color: #67cdcc;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+.token.inserted {
+  color: #008000;
+}
+pre[class*="language-"].line-numbers {
+  position: relative;
+  padding-left: 3.8em;
+  counter-reset: linenumber;
+}
+pre[class*="language-"].line-numbers > code {
+  position: relative;
+  white-space: inherit;
+}
+.line-numbers .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  font-size: 100%;
+  left: -3.8em;
+  width: 3em; /* works for line-numbers below 1000 lines */
+  letter-spacing: -1px;
+  border-right: 1px solid #999;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.line-numbers-rows > span {
+  display: block;
+  counter-increment: linenumber;
+}
+.line-numbers-rows > span:before {
+  content: counter(linenumber);
+  color: #999;
+  display: block;
+  padding-right: 0.8em;
+  text-align: right;
+}
+span.inline-color-wrapper {
+/*
+   * The background image is the following SVG inline in base 64:
+   *
+   * <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
+   *     <path fill="gray" d="M0 0h2v2H0z"/>
+   *     <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
+   * </svg>
+   *
+   * SVG-inlining explained:
+   * https://stackoverflow.com/a/21626701/7595472
+   */
+  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=");
+/* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */
+  background-position: center;
+  background-size: 110%;
+  display: inline-block;
+  height: 1.333ch;
+  width: 1.333ch;
+  margin: 0 0.333ch;
+  box-sizing: border-box;
+  border: 1px solid #fff;
+  outline: 1px solid rgba(0,0,0,0.5);
+  overflow: hidden;
+}
+span.inline-color {
+  display: block;
+/* To prevent visual glitches again */
+  height: 120%;
+  width: 120%;
+}
+div.code-toolbar {
+  position: relative;
+}
+div.code-toolbar > .toolbar {
+  position: absolute;
+  top: 0.3em;
+  right: 0.2em;
+  opacity: 1;
+}
+div.code-toolbar:hover > .toolbar {
+  opacity: 1;
+}
+/* Separate line b/c rules are thrown out if selector is invalid.
+   IE11 and old Edge versions don't support :focus-within. */
+div.code-toolbar:focus-within > .toolbar {
+  opacity: 1;
+}
+div.code-toolbar > .toolbar .toolbar-item {
+  display: inline-block;
+}
+div.code-toolbar > .toolbar a {
+  cursor: pointer;
+}
+div.code-toolbar > .toolbar button {
+  background: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  overflow: visible;
+  padding: 0;
+  -webkit-user-select: none; /* for button */
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button {
+  color: #bbb;
+  font-size: 1rem;
+  padding: 0.5rem;
+  font-family: sans-serif;
+  background: #404040;
+  border-radius: 0.5em;
+  outline: transparent;
+  cursor: pointer;
+}
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+  background: #666;
+  text-decoration: none;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: #fafafa;
+}
+#hue,
+#saturation,
+#lightness {
+  width: 200px;
+}
+label {
+  font-family: sans-serif;
+  font-weight: bold;
+  color: #1a1a1a;
+}
+.controls {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto auto;
+  align-items: center;
+  grid-gap: 1rem 1rem;
+}
+.result {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2rem 3rem -2rem #1a1a1a;
+  margin-bottom: 3rem;
+}
+.palette {
+  display: grid;
+  grid-template-rows: repeat(8, 1fr);
+  height: 100%;
+}
+.palette__shade {
+  background: var(--shade, var(--shade-one));
+  width: 41px;
+}
+.ui-slider-handle {
+  border-radius: 50% !important;
+  outline: transparent !important;
+  background: var(--shade-2) !important;
+}
\ No newline at end of file
diff --git a/hsl-monochromatic-palette-generator/license.txt b/hsl-monochromatic-palette-generator/license.txt
new file mode 100644
index 0000000..9d24eda
--- /dev/null
+++ b/hsl-monochromatic-palette-generator/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Jhey (https://codepen.io/jh3y/pen/JjEjJjN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/hsl-monochromatic-palette-generator/src/index.pug b/hsl-monochromatic-palette-generator/src/index.pug
new file mode 100644
index 0000000..af65f1e
--- /dev/null
+++ b/hsl-monochromatic-palette-generator/src/index.pug
@@ -0,0 +1,16 @@
+.result
+  pre
+    code.language-css
+  .palette
+    - let s = 0
+    while s < 8
+      .palette__shade(style=`--shade: var(--shade-${s + 1});`)
+      - s++
+style#update
+.controls
+  label hue
+  #hue
+  label saturation
+  #saturation
+  label lightness
+  #lightness
\ No newline at end of file
diff --git a/hsl-monochromatic-palette-generator/src/script.babel b/hsl-monochromatic-palette-generator/src/script.babel
new file mode 100644
index 0000000..0d33e28
--- /dev/null
+++ b/hsl-monochromatic-palette-generator/src/script.babel
@@ -0,0 +1,54 @@
+const { $ } = window
+
+const CODE_BLOCK = document.querySelector('code')
+const STYLE_BLOCK = document.querySelector('#update')
+const CODE_TEMPLATE = (hue, saturation, lightness) => {
+  const STEP = (lightness[1] - lightness[0]) / 7
+  let RESULT = `:root {\n`
+  for (let s = 0; s < 8; s++) {
+    RESULT += `  --shade-${s + 1}: hsl(${hue}, ${saturation}%, ${Math.floor(
+      lightness[1] - s * STEP
+    )}%);\n`
+  }
+  return (RESULT += '}')
+}
+
+const UPDATE = () => {
+  const CODE = CODE_TEMPLATE(
+    $('#hue').slider('value'),
+    $('#saturation').slider('value'),
+    $('#lightness').slider('values')
+  )
+  const HTML = Prism.highlight(CODE, Prism.languages.css, 'css')
+  STYLE_BLOCK.innerHTML = CODE
+  CODE_BLOCK.innerHTML = HTML
+}
+
+$('#hue').slider({
+  min: 0,
+  max: 360,
+  step: 1,
+  slide: UPDATE,
+  change: UPDATE,
+})
+$('#saturation').slider({
+  min: 0,
+  max: 100,
+  step: 1,
+  slide: UPDATE,
+  change: UPDATE,
+})
+$('#lightness').slider({
+  range: true,
+  min: 0,
+  max: 100,
+  values: [0, 100],
+  step: 1,
+  slide: UPDATE,
+  change: UPDATE,
+})
+
+$('#hue').slider('value', Math.floor(Math.random() * 360))
+$('#saturation').slider('value', Math.floor(Math.random() * 100))
+
+UPDATE()
diff --git a/hsl-monochromatic-palette-generator/src/style.styl b/hsl-monochromatic-palette-generator/src/style.styl
new file mode 100644
index 0000000..f86c358
--- /dev/null
+++ b/hsl-monochromatic-palette-generator/src/style.styl
@@ -0,0 +1,323 @@
+/* PrismJS 1.23.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=css+css-extras&plugins=line-numbers+inline-color+toolbar+copy-to-clipboard */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #ccc;
+  background: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 2rem;
+  margin: 0;
+  overflow: auto;
+  outline: transparent;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #2d2d2d;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #999;
+}
+
+.token.punctuation {
+  color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+  color: #e2777a;
+}
+
+.token.function-name {
+  color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+  color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+  color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+  color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+  color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+  color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.inserted {
+  color: green;
+}
+
+pre[class*="language-"].line-numbers {
+  position: relative;
+  padding-left: 3.8em;
+  counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+  position: relative;
+  white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  font-size: 100%;
+  left: -3.8em;
+  width: 3em; /* works for line-numbers below 1000 lines */
+  letter-spacing: -1px;
+  border-right: 1px solid #999;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+}
+
+  .line-numbers-rows > span {
+    display: block;
+    counter-increment: linenumber;
+  }
+
+    .line-numbers-rows > span:before {
+      content: counter(linenumber);
+      color: #999;
+      display: block;
+      padding-right: 0.8em;
+      text-align: right;
+    }
+
+span.inline-color-wrapper {
+  /*
+   * The background image is the following SVG inline in base 64:
+   *
+   * <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
+   *     <path fill="gray" d="M0 0h2v2H0z"/>
+   *     <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
+   * </svg>
+   *
+   * SVG-inlining explained:
+   * https://stackoverflow.com/a/21626701/7595472
+   */
+  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=");
+  /* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */
+  background-position: center;
+  background-size: 110%;
+
+  display: inline-block;
+  height: 1.333ch;
+  width: 1.333ch;
+  margin: 0 .333ch;
+  box-sizing: border-box;
+  border: 1px solid white;
+  outline: 1px solid rgba(0,0,0,.5);
+  overflow: hidden;
+}
+
+span.inline-color {
+  display: block;
+  /* To prevent visual glitches again */
+  height: 120%;
+  width: 120%;
+}
+
+div.code-toolbar {
+  position: relative;
+}
+
+div.code-toolbar > .toolbar {
+  position: absolute;
+  top: .3em;
+  right: .2em;
+  opacity: 1;
+}
+
+div.code-toolbar:hover > .toolbar {
+  opacity: 1;
+}
+
+/* Separate line b/c rules are thrown out if selector is invalid.
+   IE11 and old Edge versions don't support :focus-within. */
+div.code-toolbar:focus-within > .toolbar {
+  opacity: 1;
+}
+
+div.code-toolbar > .toolbar .toolbar-item {
+  display: inline-block;
+}
+
+div.code-toolbar > .toolbar a {
+  cursor: pointer;
+}
+
+div.code-toolbar > .toolbar button {
+  background: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  overflow: visible;
+  padding: 0;
+  -webkit-user-select: none; /* for button */
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button {
+  color: #bbb;
+  font-size: 1rem;
+  padding: 0.5rem;
+  font-family: sans-serif;
+  background: hsl(0, 0%, 25%);
+  border-radius: .5em;
+  outline: transparent;
+  cursor: pointer;
+}
+
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+  background: hsl(0, 0%, 40%);
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: hsl(0, 0%, 98%);
+}
+
+#hue,
+#saturation,
+#lightness {
+  width: 200px;
+}
+
+label {
+  font-family: sans-serif;
+  font-weight: bold;
+  color: hsl(0, 0%, 10%);
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto auto;
+  align-items: center;
+  grid-gap: 1rem 1rem;
+}
+
+.result {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2rem 3rem -2rem hsl(0, 0%, 10%);
+  margin-bottom: 3rem;
+}
+
+.palette {
+  display: grid;
+  grid-template-rows: repeat(8, 1fr);
+  height: 100%;
+}
+
+.palette__shade {
+  background: var(--shade, var(--shade-one));
+  width: 41px;
+}
+
+.ui-slider-handle {
+  border-radius: 50% !important;
+  outline: transparent !important;
+  background: var(--shade-2) !important;
+}
\ No newline at end of file
diff --git a/hsl-slider-w-react-css-vars/README.markdown b/hsl-slider-w-react-css-vars/README.markdown
new file mode 100644
index 0000000..b340e4d
--- /dev/null
+++ b/hsl-slider-w-react-css-vars/README.markdown
@@ -0,0 +1,12 @@
+# HSL Slider w/ React + CSS vars 🤓🎨
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jh3y/pen/dybjLpa](https://codepen.io/jh3y/pen/dybjLpa).
+
+ Been reading through "Refactoring UI" (Great read!) and was inspired by the "Ditch Hex for HSL" section to create this HSL slider. The design was also inspired by something I saw on Dribble [here](https://dribbble.com/jok3).
+
+The main input handles the hue, whilst the smaller ones handle saturation and lightness.
+
+Built with React Hooks, pointer events and CSS variables 💪
+
+__UPDATE: 24/09/19__ - Added a radial guide so it's clearer where the handles move 
+
+Enjoy!
\ No newline at end of file
diff --git a/hsl-slider-w-react-css-vars/dist/index.html b/hsl-slider-w-react-css-vars/dist/index.html
new file mode 100644
index 0000000..b8845ba
--- /dev/null
+++ b/hsl-slider-w-react-css-vars/dist/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>HSL Slider w/ React + CSS vars 🤓🎨</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<div id="app"></div>
+<!-- partial -->
+  <script src='https://www.w3schools.com/lib/w3color.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/hsl-slider-w-react-css-vars/dist/script.js b/hsl-slider-w-react-css-vars/dist/script.js
new file mode 100644
index 0000000..406dd64
--- /dev/null
+++ b/hsl-slider-w-react-css-vars/dist/script.js
@@ -0,0 +1,207 @@
+const { React, ReactDOM, PropTypes, w3color } = window;
+const { useEffect, useState, useRef } = React;
+const { render } = ReactDOM;
+const rootNode = document.getElementById('app');
+
+/**
+                                                  * Grab the angle between two points
+                                                  * @param {Object} event - pointer event for current coords
+                                                  * @param {Object} element - element to use as center point
+                                                  * @param {Number} buffer - buffer so that angle doesn't allow handle + track overlap
+                                                  */
+const getAngle = (event, element, buffer) => {
+  const { clientX: x, clientY: y } =
+  event.touches && event.touches.length ? event.touches[0] : event;
+  const {
+    x: handleX,
+    y: handleY,
+    width: handleWidth,
+    height: handleHeight } =
+  element.getBoundingClientRect();
+  const handleCenterPoint = {
+    x: handleX + handleWidth / 2,
+    y: handleY + handleHeight / 2 };
+
+  const angle =
+  Math.atan2(handleCenterPoint.y - y, handleCenterPoint.x - x) * 180 /
+  Math.PI;
+  return Math.max(buffer, Math.min(180 - buffer, Math.abs(angle)));
+};
+
+const getInitialAngle = (value, buffer) => {
+  return (180 - buffer * 2) / 100 * value + buffer;
+};
+
+const HslSlider = ({
+  hue: propsHue = 180,
+  saturation: propsSaturation = 100,
+  lightness: propsLightness = 50,
+  handleSize = 50,
+  BUFFER = 40,
+  onChange }) =>
+{
+  const [hue, setHue] = useState(propsHue);
+  const [cursor, setCursor] = useState('grab');
+  const [lightness, setLightness] = useState(propsLightness);
+  const [saturation, setSaturation] = useState(propsSaturation);
+  const [saturationAngle, setSaturationAngle] = useState(
+  getInitialAngle(saturation, BUFFER));
+
+  const [lightnessAngle, setLightnessAngle] = useState(
+  180 + (180 - getInitialAngle(lightness, BUFFER)));
+
+  const handleRef = useRef(null);
+  const trackRef = useRef(null);
+
+  /**
+                                  * Updates the hue based on the pointer position
+                                  * @param {Number} x - Where pointer is in relation to hue track
+                                  */
+  const updateHue = e => {
+    // Return if we are tapping a handle
+    if (e.target.dataset.hslSliderHandle) return;
+    const { clientX: x } = e.touches && e.touches.length ? e.touches[0] : e;
+    const {
+      left: trackLeft,
+      width: trackWidth } =
+    trackRef.current.getBoundingClientRect();
+    const newValue = (x - trackLeft) / trackWidth;
+    setHue(Math.max(0, Math.min(360, newValue * 360)));
+  };
+
+  /**
+      *
+      * @param {Object} event - pointer event
+      */
+  const updateLightness = event => {
+    const angle = getAngle(event, handleRef.current, BUFFER);
+    const lightness = (angle - BUFFER) / (180 - BUFFER * 2) * 100;
+    setLightnessAngle(180 + (180 - angle));
+    setLightness(lightness);
+  };
+
+  const updateSaturation = event => {
+    const angle = getAngle(event, handleRef.current, BUFFER);
+    const saturation = (angle - BUFFER) / (180 - BUFFER * 2) * 100;
+    setSaturation(saturation);
+    setSaturationAngle(angle);
+  };
+
+  /**
+      * Convenience method to handle event listening on handles
+      * This will remove the event listeners on pointerUp
+      * @param {Function} onMove - onMove handler for handle
+      */
+  const handleUp = onMove => {
+    const up = () => {
+      setCursor('grab');
+      document.documentElement.style.setProperty('--cursor', 'initial');
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('touchmove', onMove);
+      window.removeEventListener('mouseup', up);
+      window.removeEventListener('touchend', up);
+    };
+    return up;
+  };
+
+  /**
+      * Convenience method to assign event listening for handles
+      * @param {Function} onMove - onMove handler for handle
+      * @param {Bool} stopPropagation - defines whether to stop event propagation
+      */
+  const handleDown = (onMove, stopPropagation) => e => {
+    if (stopPropagation) e.stopPropagation();
+    setCursor('grabbing');
+    document.documentElement.style.setProperty('--cursor', 'grabbing');
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('touchmove', onMove);
+    window.addEventListener('mouseup', handleUp(onMove));
+    window.addEventListener('touchend', handleUp(onMove));
+  };
+
+  useEffect(() => {
+    if (onChange) onChange({ hue, saturation, lightness });
+  }, [hue, saturation, lightness]);
+
+  useEffect(() => {
+    trackRef.current.addEventListener('click', updateHue);
+    return () => {
+      trackRef.current.removeEventListener('click', updateHue);
+    };
+  }, []);
+
+  return (
+    React.createElement("div", {
+      ref: trackRef,
+      className: "hsl-slider",
+      style: {
+        '--handle-size': handleSize,
+        '--lightness': lightness,
+        '--saturation': saturation } },
+
+    React.createElement("div", {
+      className: "hsl-slider__arc",
+      style: {
+        '--value': Math.max(0, Math.min(100, hue / 360 * 100)) } }),
+
+
+    React.createElement("div", {
+      className: "hsl-slider__handle",
+      ref: handleRef,
+      style: {
+        '--cursor': cursor,
+        '--value': Math.max(0, Math.min(100, hue / 360 * 100)),
+        '--hue': hue },
+
+      onMouseDown: handleDown(updateHue),
+      onTouchStart: handleDown(updateHue),
+      title: "Set hue" },
+    React.createElement("div", {
+      "data-hsl-slider-handle": "true",
+      className: "hsl-slider__handle hsl-slider__handle--saturation",
+      onMouseDown: handleDown(updateSaturation, true),
+      style: { '--angle': saturationAngle },
+      title: "Set saturation" }),
+
+    React.createElement("div", {
+      "data-hsl-slider-handle": "true",
+      className: "hsl-slider__handle hsl-slider__handle--lightness",
+      onMouseDown: handleDown(updateLightness, true),
+      onTouchStart: handleDown(updateLightness, true),
+      style: { '--angle': lightnessAngle },
+      title: "Set lightness" }))));
+
+
+
+
+};
+HslSlider.propTypes = {
+  hue: PropTypes.number,
+  handleSize: PropTypes.number,
+  saturation: PropTypes.number,
+  lightness: PropTypes.number,
+  BUFFER: PropTypes.number,
+  onChange: PropTypes.func };
+
+const App = () => {
+  const [color, setColor] = useState(new w3color('hsl(180, 100%, 50%'));
+  const onChange = ({ hue, saturation, lightness }) => {
+    setColor(new w3color(`hsl(${hue}, ${saturation}%), ${lightness}%`));
+  };
+  return (
+    React.createElement("div", { className: "container", style: { '--color': color.toHslString() } },
+    React.createElement(HslSlider, {
+      hue: color.hue,
+      saturation: color.sat * 100,
+      lightness: color.lightness * 100,
+      onChange: onChange }),
+
+    React.createElement("div", { className: "values" },
+    React.createElement("h1", null, color.toHslString()),
+    React.createElement("h1", null, color.toHexString()),
+    React.createElement("h1", null, color.toRgbString()))));
+
+
+
+};
+render(React.createElement(App, null), rootNode);
\ No newline at end of file
diff --git a/hsl-slider-w-react-css-vars/dist/style.css b/hsl-slider-w-react-css-vars/dist/style.css
new file mode 100644
index 0000000..2bbd0d8
--- /dev/null
+++ b/hsl-slider-w-react-css-vars/dist/style.css
@@ -0,0 +1,97 @@
+*,
+*:after {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+body {
+  align-items: center;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  cursor: var(--cursor);
+}
+.hsl-slider {
+  --handle-size: 50;
+  width: 280px;
+  height: 20px;
+  border: 4px solid #111;
+  border-radius: 4px;
+  position: relative;
+  max-width: 70vw;
+  cursor: pointer;
+  background: linear-gradient(90deg, hsl(0, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(36, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(72, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(108, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(144, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(180, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(216, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(252, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(288, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(324, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(360, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)));
+}
+.hsl-slider__arc {
+  height: calc(var(--handle-size) * 2px + 4px);
+  width: calc(var(--handle-size) * 2px + 4px);
+  position: absolute;
+  top: 50%;
+  left: calc(var(--value, 0) * 1%);
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  border-radius: 100%;
+  opacity: 0.2;
+  border: 4px solid #c6c6c6;
+  z-index: -1;
+  -webkit-clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%);
+  clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%);
+}
+.hsl-slider__handle {
+  height: calc(var(--handle-size) * 1px);
+  width: calc(var(--handle-size) * 1px);
+  border-radius: 100%;
+  background: hsl(var(--hue, 0), calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%));
+  border: 4px solid #111;
+  touch-action: none;
+  position: absolute;
+  top: 50%;
+  left: calc(var(--value, 0) * 1%);
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  cursor: var(--cursor);
+}
+.hsl-slider__handle--lightness,
+.hsl-slider__handle--saturation {
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: 0;
+  -webkit-transform: translate(-50%, -50%) rotate(90deg) rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--handle-size) * 1px));
+          transform: translate(-50%, -50%) rotate(90deg) rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--handle-size) * 1px));
+}
+.hsl-slider__handle--lightness:before,
+.hsl-slider__handle--saturation:before {
+  display: none;
+}
+.hsl-slider__handle--lightness:after,
+.hsl-slider__handle--saturation:after {
+  content: '';
+  position: absolute;
+  height: 50%;
+  width: 50%;
+  border: 4px solid #111;
+  border-radius: 100%;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.hsl-slider__handle--lightness:after {
+  background: hsl(0, 0%, calc(var(--lightness, 50) * 1%));
+}
+.hsl-slider__handle--saturation:after {
+  background: linear-gradient(90deg, hsl(0, calc(var(--saturation, 50) * 1%), 50%), hsl(36, calc(var(--saturation, 50) * 1%), 50%), hsl(72, calc(var(--saturation, 50) * 1%), 50%), hsl(108, calc(var(--saturation, 50) * 1%), 50%), hsl(144, calc(var(--saturation, 50) * 1%), 50%), hsl(180, calc(var(--saturation, 50) * 1%), 50%), hsl(216, calc(var(--saturation, 50) * 1%), 50%), hsl(252, calc(var(--saturation, 50) * 1%), 50%), hsl(288, calc(var(--saturation, 50) * 1%), 50%), hsl(324, calc(var(--saturation, 50) * 1%), 50%), hsl(360, calc(var(--saturation, 50) * 1%), 50%));
+}
+.container {
+  position: relative;
+}
+.values {
+  font-size: 0.5rem;
+  position: absolute;
+  color: #ccc;
+  top: calc(100% + 100px);
+}
diff --git a/hsl-slider-w-react-css-vars/license.txt b/hsl-slider-w-react-css-vars/license.txt
new file mode 100644
index 0000000..51cad4e
--- /dev/null
+++ b/hsl-slider-w-react-css-vars/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Jhey (https://codepen.io/jh3y/pen/dybjLpa)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/hsl-slider-w-react-css-vars/src/index.pug b/hsl-slider-w-react-css-vars/src/index.pug
new file mode 100644
index 0000000..4b9f0fe
--- /dev/null
+++ b/hsl-slider-w-react-css-vars/src/index.pug
@@ -0,0 +1 @@
+#app
\ No newline at end of file
diff --git a/hsl-slider-w-react-css-vars/src/script.babel b/hsl-slider-w-react-css-vars/src/script.babel
new file mode 100644
index 0000000..5b3a1c8
--- /dev/null
+++ b/hsl-slider-w-react-css-vars/src/script.babel
@@ -0,0 +1,207 @@
+const { React, ReactDOM, PropTypes, w3color } = window
+const { useEffect, useState, useRef } = React
+const { render } = ReactDOM
+const rootNode = document.getElementById('app')
+
+/**
+ * Grab the angle between two points
+ * @param {Object} event - pointer event for current coords
+ * @param {Object} element - element to use as center point
+ * @param {Number} buffer - buffer so that angle doesn't allow handle + track overlap
+ */
+const getAngle = (event, element, buffer) => {
+  const { clientX: x, clientY: y } =
+    event.touches && event.touches.length ? event.touches[0] : event
+  const {
+    x: handleX,
+    y: handleY,
+    width: handleWidth,
+    height: handleHeight,
+  } = element.getBoundingClientRect()
+  const handleCenterPoint = {
+    x: handleX + handleWidth / 2,
+    y: handleY + handleHeight / 2,
+  }
+  const angle =
+    (Math.atan2(handleCenterPoint.y - y, handleCenterPoint.x - x) * 180) /
+    Math.PI
+  return Math.max(buffer, Math.min(180 - buffer, Math.abs(angle)))
+}
+
+const getInitialAngle = (value, buffer) => {
+  return ((180 - buffer * 2) / 100) * value + buffer
+}
+
+const HslSlider = ({
+  hue: propsHue = 180,
+  saturation: propsSaturation = 100,
+  lightness: propsLightness = 50,
+  handleSize = 50,
+  BUFFER = 40,
+  onChange,
+}) => {
+  const [hue, setHue] = useState(propsHue)
+  const [cursor, setCursor] = useState('grab')
+  const [lightness, setLightness] = useState(propsLightness)
+  const [saturation, setSaturation] = useState(propsSaturation)
+  const [saturationAngle, setSaturationAngle] = useState(
+    getInitialAngle(saturation, BUFFER)
+  )
+  const [lightnessAngle, setLightnessAngle] = useState(
+    180 + (180 - getInitialAngle(lightness, BUFFER))
+  )
+  const handleRef = useRef(null)
+  const trackRef = useRef(null)
+
+  /**
+   * Updates the hue based on the pointer position
+   * @param {Number} x - Where pointer is in relation to hue track
+   */
+  const updateHue = e => {
+    // Return if we are tapping a handle
+    if (e.target.dataset.hslSliderHandle) return
+    const { clientX: x } = e.touches && e.touches.length ? e.touches[0] : e
+    const {
+      left: trackLeft,
+      width: trackWidth,
+    } = trackRef.current.getBoundingClientRect()
+    const newValue = (x - trackLeft) / trackWidth
+    setHue(Math.max(0, Math.min(360, newValue * 360)))
+  }
+
+  /**
+   *
+   * @param {Object} event - pointer event
+   */
+  const updateLightness = event => {
+    const angle = getAngle(event, handleRef.current, BUFFER)
+    const lightness = ((angle - BUFFER) / (180 - BUFFER * 2)) * 100
+    setLightnessAngle(180 + (180 - angle))
+    setLightness(lightness)
+  }
+
+  const updateSaturation = event => {
+    const angle = getAngle(event, handleRef.current, BUFFER)
+    const saturation = ((angle - BUFFER) / (180 - BUFFER * 2)) * 100
+    setSaturation(saturation)
+    setSaturationAngle(angle)
+  }
+
+  /**
+   * Convenience method to handle event listening on handles
+   * This will remove the event listeners on pointerUp
+   * @param {Function} onMove - onMove handler for handle
+   */
+  const handleUp = onMove => {
+    const up = () => {
+      setCursor('grab')
+      document.documentElement.style.setProperty('--cursor', 'initial')
+      window.removeEventListener('mousemove', onMove)
+      window.removeEventListener('touchmove', onMove)
+      window.removeEventListener('mouseup', up)
+      window.removeEventListener('touchend', up)
+    }
+    return up
+  }
+
+  /**
+   * Convenience method to assign event listening for handles
+   * @param {Function} onMove - onMove handler for handle
+   * @param {Bool} stopPropagation - defines whether to stop event propagation
+   */
+  const handleDown = (onMove, stopPropagation) => e => {
+    if (stopPropagation) e.stopPropagation()
+    setCursor('grabbing')
+    document.documentElement.style.setProperty('--cursor', 'grabbing')
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('touchmove', onMove)
+    window.addEventListener('mouseup', handleUp(onMove))
+    window.addEventListener('touchend', handleUp(onMove))
+  }
+
+  useEffect(() => {
+    if (onChange) onChange({ hue, saturation, lightness })
+  }, [hue, saturation, lightness])
+
+  useEffect(() => {
+    trackRef.current.addEventListener('click', updateHue)
+    return () => {
+      trackRef.current.removeEventListener('click', updateHue)
+    }
+  }, [])
+
+  return (
+    <div
+      ref={trackRef}
+      className="hsl-slider"
+      style={{
+        '--handle-size': handleSize,
+        '--lightness': lightness,
+        '--saturation': saturation,
+      }}>
+      <div
+        className="hsl-slider__arc"
+        style={{
+          '--value': Math.max(0, Math.min(100, (hue / 360) * 100)),
+        }}
+      />
+      <div
+        className="hsl-slider__handle"
+        ref={handleRef}
+        style={{
+          '--cursor': cursor,
+          '--value': Math.max(0, Math.min(100, (hue / 360) * 100)),
+          '--hue': hue,
+        }}
+        onMouseDown={handleDown(updateHue)}
+        onTouchStart={handleDown(updateHue)}
+        title="Set hue">
+        <div
+          data-hsl-slider-handle="true"
+          className="hsl-slider__handle hsl-slider__handle--saturation"
+          onMouseDown={handleDown(updateSaturation, true)}
+          style={{ '--angle': saturationAngle }}
+          title="Set saturation"
+        />
+        <div
+          data-hsl-slider-handle="true"
+          className="hsl-slider__handle hsl-slider__handle--lightness"
+          onMouseDown={handleDown(updateLightness, true)}
+          onTouchStart={handleDown(updateLightness, true)}
+          style={{ '--angle': lightnessAngle }}
+          title="Set lightness"
+        />
+      </div>
+    </div>
+  )
+}
+HslSlider.propTypes = {
+  hue: PropTypes.number,
+  handleSize: PropTypes.number,
+  saturation: PropTypes.number,
+  lightness: PropTypes.number,
+  BUFFER: PropTypes.number,
+  onChange: PropTypes.func,
+}
+const App = () => {
+  const [color, setColor] = useState(new w3color('hsl(180, 100%, 50%'))
+  const onChange = ({ hue, saturation, lightness }) => {
+    setColor(new w3color(`hsl(${hue}, ${saturation}%), ${lightness}%`))
+  }
+  return (
+    <div className="container" style={{ '--color': color.toHslString() }}>
+      <HslSlider
+        hue={color.hue}
+        saturation={color.sat * 100}
+        lightness={color.lightness * 100}
+        onChange={onChange}
+      />
+      <div className="values">
+        <h1>{color.toHslString()}</h1>
+        <h1>{color.toHexString()}</h1>
+        <h1>{color.toRgbString()}</h1>
+      </div>
+    </div>
+  )
+}
+render(<App />, rootNode)
diff --git a/hsl-slider-w-react-css-vars/src/style.styl b/hsl-slider-w-react-css-vars/src/style.styl
new file mode 100644
index 0000000..00bcba9
--- /dev/null
+++ b/hsl-slider-w-react-css-vars/src/style.styl
@@ -0,0 +1,87 @@
+*
+*:after
+  box-sizing border-box
+  -webkit-tap-highlight-color transparent
+
+
+body
+  align-items center
+  background #fff
+  display flex
+  justify-content center
+  min-height 100vh
+  flex-direction column
+  font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+  cursor var(--cursor)
+
+.hsl-slider
+  --handle-size 50
+  width 280px
+  height 20px
+  border 4px solid #111
+  border-radius 4px
+  position relative
+  max-width 70vw
+  cursor pointer
+  background 'linear-gradient(90deg, hsl(0, %s, %s), hsl(36, %s, %s), hsl(72, %s, %s), hsl(108, %s, %s), hsl(144, %s, %s), hsl(180, %s, %s), hsl(216, %s, %s), hsl(252, %s, %s), hsl(288, %s, %s), hsl(324, %s, %s), hsl(360, %s, %s))' % (calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%))
+
+  &__arc
+    height calc(var(--handle-size) * 2px + 4px)
+    width calc(var(--handle-size) * 2px + 4px)
+    position absolute
+    top 50%
+    left calc(var(--value, 0) * 1%)
+    transform translate(-50%, -50%)
+    border-radius 100%
+    opacity 0.2
+    border 4px solid #c6c6c6
+    z-index -1
+    -webkit-clip-path polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%)
+    clip-path polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%)
+
+  &__handle
+    height calc(var(--handle-size) * 1px)
+    width calc(var(--handle-size) * 1px)
+    border-radius 100%
+    background 'hsl(%s, %s, %s)' % (var(--hue, 0) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%))
+    border 4px solid #111
+    touch-action none
+    position absolute
+    top 50%
+    left calc(var(--value, 0) * 1%)
+    transform translate(-50%, -50%)
+    cursor var(--cursor)
+
+    &--lightness
+    &--saturation
+      left 50%
+      width 100%
+      height 100%
+      background transparent
+      border 0
+      transform translate(-50%, -50%) rotate(90deg) rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--handle-size) * 1px))
+      &:before
+        display none
+      &:after
+        content ''
+        position absolute
+        height 50%
+        width 50%
+        border 4px solid #111
+        border-radius 100%
+        top 50%
+        left 50%
+        transform translate(-50%, -50%)
+    &--lightness:after
+      background 'hsl(0, 0%, %s)' % (calc(var(--lightness, 50) * 1%))
+    &--saturation:after
+      background 'linear-gradient(90deg, hsl(0, %s, 50%), hsl(36, %s, 50%), hsl(72, %s, 50%), hsl(108, %s, 50%), hsl(144, %s, 50%), hsl(180, %s, 50%), hsl(216, %s, 50%), hsl(252, %s, 50%), hsl(288, %s, 50%), hsl(324, %s, 50%), hsl(360, %s, 50%))' % (calc(var(--saturation, 50) * 1%) calc(var(--saturation, 50) * 1%) calc(var(--saturation, 50) * 1%) calc(var(--saturation, 50) * 1%) calc(var(--saturation, 50) * 1%) calc(var(--saturation, 50) * 1%) calc(var(--saturation, 50) * 1%) calc(var(--saturation, 50) * 1%) calc(var(--saturation, 50) * 1%) calc(var(--saturation, 50) * 1%) calc(var(--saturation, 50) * 1%))
+
+.container
+  position relative
+
+.values
+  font-size .5rem
+  position absolute
+  color #ccc
+  top calc(100% + 100px)
\ No newline at end of file
diff --git a/hue-rotated-emoji/README.markdown b/hue-rotated-emoji/README.markdown
new file mode 100644
index 0000000..20cd1ab
--- /dev/null
+++ b/hue-rotated-emoji/README.markdown
@@ -0,0 +1,5 @@
+# Hue-Rotated Emoji
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/bramus/pen/dyWevRe](https://codepen.io/bramus/pen/dyWevRe).
+
+
diff --git a/hue-rotated-emoji/dist/index.html b/hue-rotated-emoji/dist/index.html
new file mode 100644
index 0000000..355a553
--- /dev/null
+++ b/hue-rotated-emoji/dist/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Hue-Rotated Emoji</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<p>Green to Red:<br />♻️ ✅ ❎ 🐍 🥦 &rarr; <span class="green-to-red">♻️ ✅ ❎ 🐍 🥦</span></p>
+
+<p>Red to Green:<br />❤️ ❌ 🚗 🌶 🚨 &rarr; <span class="red-to-green">❤️ ❌ 🚗 🌶 🚨</span></p>
+
+<p>Green to Blue:<br />♻️ ✅ ❎ 🐍 🥦 &rarr; <span class="green-to-blue">♻️ ✅ ❎ 🐍 🥦</span></p>
+
+<p>Red to Blue:<br />❤️ ❌ 🚗 🌶 🚨 &rarr; <span class="red-to-blue">❤️ ❌ 🚗 🌶 🚨</span></p>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/hue-rotated-emoji/dist/style.css b/hue-rotated-emoji/dist/style.css
new file mode 100644
index 0000000..b163c5c
--- /dev/null
+++ b/hue-rotated-emoji/dist/style.css
@@ -0,0 +1,37 @@
+body {
+	font-size: 3rem;
+}
+
+.green-to-red,
+.red-to-blue {
+	filter: hue-rotate(-120deg);
+}
+
+.red-to-green,
+.green-to-blue {
+	filter: hue-rotate(120deg);
+}
+
+
+
+
+
+body {
+	margin: 0;
+	display: grid;
+	place-content: center;
+	min-height: 100vh;
+}
+
+html, body {
+	background: #fff;
+}
+
+@supports(-webkit-touch-callout: none) {
+	html {
+	  height: -webkit-fill-available;
+	}
+	body {
+	  min-height: -webkit-fill-available;
+	}
+}
\ No newline at end of file
diff --git a/hue-rotated-emoji/license.txt b/hue-rotated-emoji/license.txt
new file mode 100644
index 0000000..4cb0025
--- /dev/null
+++ b/hue-rotated-emoji/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Bramus (https://codepen.io/bramus/pen/dyWevRe)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/hue-rotated-emoji/src/index.html b/hue-rotated-emoji/src/index.html
new file mode 100644
index 0000000..ff42b5c
--- /dev/null
+++ b/hue-rotated-emoji/src/index.html
@@ -0,0 +1,7 @@
+<p>Green to Red:<br />♻️ ✅ ❎ 🐍 🥦 &rarr; <span class="green-to-red">♻️ ✅ ❎ 🐍 🥦</span></p>
+
+<p>Red to Green:<br />❤️ ❌ 🚗 🌶 🚨 &rarr; <span class="red-to-green">❤️ ❌ 🚗 🌶 🚨</span></p>
+
+<p>Green to Blue:<br />♻️ ✅ ❎ 🐍 🥦 &rarr; <span class="green-to-blue">♻️ ✅ ❎ 🐍 🥦</span></p>
+
+<p>Red to Blue:<br />❤️ ❌ 🚗 🌶 🚨 &rarr; <span class="red-to-blue">❤️ ❌ 🚗 🌶 🚨</span></p>
\ No newline at end of file
diff --git a/hue-rotated-emoji/src/style.css b/hue-rotated-emoji/src/style.css
new file mode 100644
index 0000000..b163c5c
--- /dev/null
+++ b/hue-rotated-emoji/src/style.css
@@ -0,0 +1,37 @@
+body {
+	font-size: 3rem;
+}
+
+.green-to-red,
+.red-to-blue {
+	filter: hue-rotate(-120deg);
+}
+
+.red-to-green,
+.green-to-blue {
+	filter: hue-rotate(120deg);
+}
+
+
+
+
+
+body {
+	margin: 0;
+	display: grid;
+	place-content: center;
+	min-height: 100vh;
+}
+
+html, body {
+	background: #fff;
+}
+
+@supports(-webkit-touch-callout: none) {
+	html {
+	  height: -webkit-fill-available;
+	}
+	body {
+	  min-height: -webkit-fill-available;
+	}
+}
\ No newline at end of file
diff --git a/humans-since-1982/README.markdown b/humans-since-1982/README.markdown
new file mode 100644
index 0000000..1b53653
--- /dev/null
+++ b/humans-since-1982/README.markdown
@@ -0,0 +1,5 @@
+# Humans since 1982
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/murilopolese/pen/rNmVbLN](https://codepen.io/murilopolese/pen/rNmVbLN).
+
+
diff --git a/humans-since-1982/dist/index.html b/humans-since-1982/dist/index.html
new file mode 100644
index 0000000..470e571
--- /dev/null
+++ b/humans-since-1982/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Humans since 1982</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/humans-since-1982/dist/script.js b/humans-since-1982/dist/script.js
new file mode 100644
index 0000000..c2990ff
--- /dev/null
+++ b/humans-since-1982/dist/script.js
@@ -0,0 +1,60 @@
+const ROWS = 16
+const COLS = 16
+let clocks = []
+let res
+
+function setup() {
+  createCanvas(
+    min(500, windowWidth), 
+    min(500, windowWidth)
+  )
+  angleMode(DEGREES)
+  res = width/COLS
+  
+  for (let y = 0; y < ROWS; y++) {
+    clocks[y] = []
+    for (let x = 0; x < COLS; x ++) {
+      clocks[y][x] = createVector(x*10, y*10)
+    }
+  }
+}
+
+function update() {
+  for (let y = 0; y < ROWS; y++) {
+    for (let x = 0; x < COLS; x++) {
+      // Prime numbers <3
+      clocks[y][x].x += .13
+      clocks[y][x].y += .31
+    }
+  }
+}
+
+function draw() {
+  background(0)
+  update()
+  for (let y = 0; y < ROWS; y++) {
+    for (let x = 0; x < COLS; x++) {
+      push()
+      translate(
+        map(x, 0, COLS-1, width*0.15, width*0.85), 
+        map(y, 0, ROWS-1, width*0.15, width*0.85)
+      )
+      
+      let l = 0.5 * width*0.85/COLS
+      let w = 0.1 * width*0.85/COLS
+      stroke(200)
+      strokeWeight(w)
+      
+      line(0, 0, l*sin(clocks[y][x].x), l*cos(clocks[y][x].x))
+      line(0, 0, l*sin(clocks[y][x].y), l*cos(clocks[y][x].y))
+      pop()
+    }
+  }
+}
+
+function windowResized() {
+  resizeCanvas(
+    min(500, windowWidth), 
+    min(500, windowWidth)
+  )
+}
\ No newline at end of file
diff --git a/humans-since-1982/dist/style.css b/humans-since-1982/dist/style.css
new file mode 100644
index 0000000..1d41ea1
--- /dev/null
+++ b/humans-since-1982/dist/style.css
@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  background: white;
+}
+
+main {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+}
+
+canvas {
+  margin: auto;
+}
\ No newline at end of file
diff --git a/humans-since-1982/license.txt b/humans-since-1982/license.txt
new file mode 100644
index 0000000..550923f
--- /dev/null
+++ b/humans-since-1982/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Murilo Polese (https://codepen.io/murilopolese/pen/rNmVbLN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/humans-since-1982/src/index.html b/humans-since-1982/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/humans-since-1982/src/script.js b/humans-since-1982/src/script.js
new file mode 100644
index 0000000..c2990ff
--- /dev/null
+++ b/humans-since-1982/src/script.js
@@ -0,0 +1,60 @@
+const ROWS = 16
+const COLS = 16
+let clocks = []
+let res
+
+function setup() {
+  createCanvas(
+    min(500, windowWidth), 
+    min(500, windowWidth)
+  )
+  angleMode(DEGREES)
+  res = width/COLS
+  
+  for (let y = 0; y < ROWS; y++) {
+    clocks[y] = []
+    for (let x = 0; x < COLS; x ++) {
+      clocks[y][x] = createVector(x*10, y*10)
+    }
+  }
+}
+
+function update() {
+  for (let y = 0; y < ROWS; y++) {
+    for (let x = 0; x < COLS; x++) {
+      // Prime numbers <3
+      clocks[y][x].x += .13
+      clocks[y][x].y += .31
+    }
+  }
+}
+
+function draw() {
+  background(0)
+  update()
+  for (let y = 0; y < ROWS; y++) {
+    for (let x = 0; x < COLS; x++) {
+      push()
+      translate(
+        map(x, 0, COLS-1, width*0.15, width*0.85), 
+        map(y, 0, ROWS-1, width*0.15, width*0.85)
+      )
+      
+      let l = 0.5 * width*0.85/COLS
+      let w = 0.1 * width*0.85/COLS
+      stroke(200)
+      strokeWeight(w)
+      
+      line(0, 0, l*sin(clocks[y][x].x), l*cos(clocks[y][x].x))
+      line(0, 0, l*sin(clocks[y][x].y), l*cos(clocks[y][x].y))
+      pop()
+    }
+  }
+}
+
+function windowResized() {
+  resizeCanvas(
+    min(500, windowWidth), 
+    min(500, windowWidth)
+  )
+}
\ No newline at end of file
diff --git a/humans-since-1982/src/style.css b/humans-since-1982/src/style.css
new file mode 100644
index 0000000..1d41ea1
--- /dev/null
+++ b/humans-since-1982/src/style.css
@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  background: white;
+}
+
+main {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+}
+
+canvas {
+  margin: auto;
+}
\ No newline at end of file
diff --git a/iceberg-charts/README.markdown b/iceberg-charts/README.markdown
new file mode 100644
index 0000000..4005602
--- /dev/null
+++ b/iceberg-charts/README.markdown
@@ -0,0 +1,4 @@
+# Iceberg Charts
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/ste-vg/pen/BZZpyZ](https://codepen.io/ste-vg/pen/BZZpyZ).
+
+ An old prototype so the code is a little messy
\ No newline at end of file
diff --git a/iceberg-charts/dist/index.html b/iceberg-charts/dist/index.html
new file mode 100644
index 0000000..77f8678
--- /dev/null
+++ b/iceberg-charts/dist/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Iceberg Charts</title>
+  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="controls">
+  <span>Position:</span>
+  <a class="btn btn-default" href="javascript:prev();">Prev</a>
+  <a class="btn btn-default" href="javascript:next();">Next</a>
+  <span>Water Height</span>
+  <a class="btn btn-default" href="javascript:setWaterLevel(100);">High</a>
+  <a class="btn btn-default" href="javascript:setWaterLevel(50);">Medium</a>
+  <a class="btn btn-default" href="javascript:setWaterLevel(1);">Low</a>
+  <a class="btn btn-default" href="javascript:randomHeight();">Random</a>
+</div>
+<!-- partial -->
+  <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
+<script src='js/zbvakw.js'></script>
+<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js'></script>
+<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/iceberg-charts/dist/script.js b/iceberg-charts/dist/script.js
new file mode 100644
index 0000000..2b2faa7
--- /dev/null
+++ b/iceberg-charts/dist/script.js
@@ -0,0 +1,371 @@
+var renderer, scene, camera, controls, light;
+
+var waterSettings = {
+  base: 0.001,
+  size: {
+    x: 8,
+    y: 0,
+    z: 8
+  },
+  maxValue: 8,
+  selected: 0,
+  level: 1,
+  slosh: 0,
+  sloshRange: [0.3, 0.7],
+  sections: 10,
+  range: 0.05,
+  ranges: [0.06, 0.05],
+  spaceBetween: 25,
+  speed: 0.1
+}
+
+var sceneSettings = {
+  cameraZ: 0
+}
+
+var timeline = new TimelineMax();
+var sloshAnimation = new TimelineMax();
+
+var waterBlocks = [{
+  title: 'One',
+	bars: [
+					{color: 0xEF3740, value: 5},
+					{color: 0xEA962E, value: 4},
+					{color: 0x6FA272, value: 3},
+					{color: 0xEFF270, value: 3},
+					{color: 0x6DE57E, value: 2},
+				]
+}, {
+  title: 'Two',
+	bars: [
+					{color: 0xEF3740, value: 6},
+					{color: 0xEA962E, value: 2},
+					{color: 0x6FA272, value: 3},
+					{color: 0xEFF270, value: 1},
+					{color: 0x6DE57E, value: 4},
+				]
+}, {
+  title: 'Three',
+        		bars: [
+					{color: 0xEF3740, value: 2},
+					{color: 0xEA962E, value: 2},
+					{color: 0x6FA272, value: 2},
+					{color: 0xEFF270, value: 2},
+					{color: 0x6DE57E, value: 2},
+				]
+}, {
+  title: 'Four',
+        		bars: [
+					{color: 0xEF3740, value: 7},
+					{color: 0xEA962E, value: 2},
+					{color: 0x6FA272, value: 1.4},
+					{color: 0xEFF270, value: 2},
+					{color: 0x6DE57E, value: 4},
+				]
+}, {
+  title: 'Five',
+        		bars: [
+					{color: 0xEF3740, value: 5},
+					{color: 0xEA962E, value: 5},
+					{color: 0x6FA272, value: 4},
+					{color: 0xEFF270, value: 2},
+					{color: 0x6DE57E, value: 2},
+				]
+}];
+
+function init() {
+  // renderer
+
+  renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    alpha: true
+  });
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.setClearColor(0x222428, 1);
+  document.body.appendChild(renderer.domElement);
+
+  // scene
+
+  scene = new THREE.Scene();
+
+  // camera
+
+  var aspect = window.innerWidth / window.innerHeight;
+  var d = 20;
+  camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, -100, 1000);
+  camera.lookAt(new THREE.Vector3(0, 0, 0));
+
+  // materials
+
+  var waterSides = new THREE.MeshPhongMaterial({
+    color: 0x4DBFE1,
+    side: THREE.DoubleSide,
+    transparent: true,
+    opacity: 0.8,
+    //shading: THREE.FlatShading,
+    specular: 0x4DBFE1,
+    shininess: 5,
+  });
+
+  var waterTop = new THREE.MeshPhongMaterial({
+    color: 0x14435C,
+    side: THREE.DoubleSide,
+    shading: THREE.FlatShading,
+    transparent: true,
+    opacity: 0.9,
+    specular: 0xFFFFFF,
+    shininess: 10,
+  });
+
+  var materials = [waterSides, waterSides, waterTop, waterSides, waterSides, waterSides];
+
+  
+  //light
+  
+  light = new THREE.PointLight(0xffffff, 2, 600, 5);
+  light.position.set(waterSettings.size.x + 1.5, waterSettings.maxValue * 2, (waterSettings.size.z + 1) - (waterSettings.spaceBetween * waterSettings.selected));
+  scene.add(light);
+  
+  //grid 
+
+  var grid = new THREE.GridHelper(200, 1);
+  grid.setColors(0x2B2A2F, 0x2B2A2F);
+  scene.add(grid);
+
+  // water blocks
+
+  for (var j = 0; j < waterBlocks.length; j++) 
+  {
+    var group = new THREE.Group();
+
+    waterBlocks[j].group = group;
+    waterBlocks[j].water = null;
+    waterBlocks[j].waterMesh = null;
+    waterBlocks[j].sloshOffsets = [];
+    waterBlocks[j].topVertices = [];
+    waterBlocks[j].angles = [];
+
+    //floor
+
+    var floorGeometry = new THREE.BoxGeometry(waterSettings.size.x, 0.5, waterSettings.size.z);
+    floorGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0.25, 0));
+
+    var floor = new THREE.Mesh(
+      floorGeometry,
+      new THREE.MeshLambertMaterial({
+        color: 0x333333
+      })
+    );
+    floor.position.y = 0;
+    floor.position.x = 0;
+    floor.position.z = 0;
+
+    group.add(floor);
+    
+    //sphere
+    
+/*     var geometry = new THREE.SphereGeometry( 2, 15, 15 );
+    var material = new THREE.MeshLambertMaterial( {color: 0xff5555} );
+    var sphere = new THREE.Mesh( geometry, material );
+    sphere.position.y = 5;
+    group.add( sphere ); */
+
+    // geometry
+    waterBlocks[j].water = new THREE.BoxGeometry(waterSettings.size.x, waterSettings.maxValue, waterSettings.size.z, waterSettings.sections, 1, waterSettings.sections);
+    
+    var count = 0;
+    var pos = 0 - Math.floor(waterSettings.sections / 2);
+    var zeds = [];
+
+    for (var i = waterBlocks[j].water.vertices.length - 1; i >= 0; i--) {
+
+      if (waterBlocks[j].water.vertices[i].y >= (waterSettings.maxValue / 2)) 
+      {
+        waterBlocks[j].topVertices.push(waterBlocks[j].water.vertices[i]); 
+        zeds.push(waterBlocks[j].water.vertices[i].z)
+        waterBlocks[j].angles.push(count + waterSettings.speed + (Math.random()*2));
+        waterBlocks[j].sloshOffsets.push( Math.random() / 2);
+        count++;
+      }
+    };
+
+    zeds = _.uniq(zeds);
+    zeds.sort(function(a, b) 
+    {
+      return a - b
+    });
+
+    for (var i = waterBlocks[j].topVertices.length - 1; i >= 0; i--) 
+    {
+      waterBlocks[j].topVertices[i].zPos = zeds.indexOf(waterBlocks[j].topVertices[i].z) - Math.floor(zeds.length / 2);
+    }
+
+    waterBlocks[j].water.applyMatrix(new THREE.Matrix4().makeTranslation(0, (waterSettings.maxValue / 2) - waterSettings.base, 0));
+
+    // mesh
+    waterBlocks[j].waterMesh = new THREE.Mesh(waterBlocks[j].water, new THREE.MeshFaceMaterial(materials));
+    waterBlocks[j].waterMesh.position.y = 0.51;
+    waterBlocks[j].waterMesh.position.x = 0;
+    waterBlocks[j].waterMesh.position.z = 0;
+    group.add(waterBlocks[j].waterMesh);
+    
+    waterBlocks[j].wireframe = new THREE.WireframeHelper( waterBlocks[j].waterMesh, 0x00ff00 );
+    //group.add(waterBlocks[j].wireframe);
+	  
+	  for (var i = 0; i < waterBlocks[j].bars.length; i++) 
+		{	
+			var height = waterBlocks[j].bars[i].value;
+			var color = waterBlocks[j].bars[i].color;
+
+			var row = Math.floor(i/2);
+			var col = i%2 == 0 ? 0 : 1;
+
+			var dataBar = new THREE.BoxGeometry(0.8 * 2, height * 2, 0.8 * 2, 10, 10, 10);
+			dataBar.applyMatrix( new THREE.Matrix4().makeTranslation( 0, height, 0 ) );
+
+			var dataBarMesh = new THREE.Mesh
+			(
+				dataBar, 
+				new THREE.MeshLambertMaterial({color: color, transparent: false, opacity: 0.9}) 
+			);
+			dataBarMesh.position.y = 0;
+			dataBarMesh.position.x = -0 + (2.1 * col);
+			dataBarMesh.position.z = -2 + (2.1 * row);
+
+			group.add( dataBarMesh );
+
+			// var dataBarMeshOutline = new THREE.EdgesHelper( dataBarMesh, 0xdddddd );
+			// dataBarMeshOutline.material.linewidth = 2;
+			// dataBarMeshOutline.material.transparent = true;
+			// dataBarMeshOutline.material.opacity = 0.75;
+			// group.add( dataBarMeshOutline );
+
+			dataBarMesh.scale.y = 0.1;
+			TweenLite.to(dataBarMesh.scale, 2, {y: 1, delay: 0.1 + (i/6), ease: Elastic.easeOut});
+			//dataBarMeshOutline.scale.y = 0.1;
+			//TweenLite.to(dataBarMeshOutline.scale, 2, {y: 0.1, delay: 1 + (i/6), ease: Elastic.easeOut});
+		}
+
+    scene.add(group);
+
+    group.position.z = 0 - j * waterSettings.spaceBetween;
+  };
+}
+
+function render() {
+  renderer.render(scene, camera);
+}
+
+function animate() {
+  camera.position.set(20, 20, 20 + sceneSettings.cameraZ);
+  camera.lookAt(new THREE.Vector3(0, 5.6, sceneSettings.cameraZ));
+
+  requestAnimationFrame(animate);
+
+  for (var i = 0; i < waterBlocks.length; i++) 
+  {
+    waterBlocks[i].waterMesh.scale.y = waterSettings.size.y / 100;
+
+    for (var j = waterBlocks[i].topVertices.length - 1; j >= 0; j--) 
+    {
+      var sloshAmount = waterBlocks[i].topVertices[j].zPos * waterSettings.slosh * waterBlocks[i].sloshOffsets[j];
+      waterBlocks[i].topVertices[j].y = sloshAmount + (waterSettings.maxValue + Math.sin(waterBlocks[i].angles[j]) * waterSettings.range);
+      waterBlocks[i].angles[j] += waterSettings.speed; 
+    }
+
+    waterBlocks[i].water.verticesNeedUpdate = true;
+  }
+   
+  render();
+}
+
+function next()
+{
+  var toSelect = waterSettings.selected + 1;
+  if(toSelect >= waterBlocks.length) toSelect = 0;
+  selectBlock(toSelect, waterSettings.selected);
+}
+
+function prev()
+{
+  var toSelect = waterSettings.selected - 1;
+  if(toSelect < 0) toSelect = waterBlocks.length - 1;
+  selectBlock(toSelect, waterSettings.selected);
+}
+
+function selectBlock(newPos, oldPos) 
+{
+  waterSettings.selected = newPos;
+  var targetSlosh = 0;
+  var sloshAmount = (((waterSettings.sloshRange[0] - waterSettings.sloshRange[1]) / 100) * (100 - waterSettings.size.y)) + waterSettings.sloshRange[1]
+  if (newPos > oldPos) targetSlosh = -sloshAmount
+  else if (newPos < oldPos) targetSlosh = sloshAmount
+
+  sloshAnimation.clear()
+  sloshAnimation.append(TweenMax.to(waterSettings, 0.4, {
+    slosh: targetSlosh,
+    ease: Power2.easeIn
+  }));
+  sloshAnimation.append(TweenMax.to(waterSettings, 2.5, {
+    slosh: 0,
+    ease: Elastic.easeOut
+  }));
+  sloshAnimation.restart();
+
+  TweenMax.to(sceneSettings, 1, {
+    cameraZ: 0 - (waterSettings.spaceBetween * newPos),
+    ease: Power4.easeInOut
+  });
+  TweenMax.to(light.position, 1, {
+    z: (waterSettings.size.z + 0.5) - (waterSettings.spaceBetween * waterSettings.selected),
+    ease: Power4.easeInOut
+  });
+}
+
+function setWaterLevel(percent) 
+{
+  waterSettings.oldlevel = waterSettings.level;
+  
+  var level = (waterSettings.maxValue / 100) * percent;
+  var p = percent == 100 ? 105 : percent;
+  TweenLite.to(waterSettings.size, 0.5, {
+    y: level > 0.5 ? p : ((0.5 / waterSettings.maxValue) * 100),
+    ease: Power2.easeInOut
+  });
+
+  var diff = percent - waterSettings.level;
+  var disturbAmount = (diff / 100) * 0.5;
+  timeline.clear()
+  var r = (((waterSettings.ranges[0] - waterSettings.ranges[1]) / 100) * (100 - waterSettings.size.y)) + waterSettings.ranges[1]
+  timeline.append(TweenMax.to(waterSettings, 0.5, {
+    range: r + disturbAmount,
+    ease: Power2.easeIn
+  }));
+  timeline.append(TweenMax.to(waterSettings, 2.5, {
+    range: r,
+    ease: Elastic.easeOut
+  }));
+  
+  timeline.restart();
+  
+  waterSettings.level = percent;
+}
+
+function randomHeight()
+{
+  setWaterLevel(Math.random() * 100);
+}
+
+init();
+render();
+animate();
+setWaterLevel(50);
+
+window.addEventListener( 'resize', function () 
+{
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize( window.innerWidth, window.innerHeight );
+  
+}, false );
\ No newline at end of file
diff --git a/iceberg-charts/dist/style.css b/iceberg-charts/dist/style.css
new file mode 100644
index 0000000..bb6252b
--- /dev/null
+++ b/iceberg-charts/dist/style.css
@@ -0,0 +1,12 @@
+body {
+  overflow: hidden;
+}
+.controls {
+  position: absolute;
+  z-index: 100;
+  margin: 10px;
+}
+.controls span {
+  color: white;
+  padding: 0 10px 0 20px;
+}
diff --git a/iceberg-charts/dist/zbvakw.js b/iceberg-charts/dist/zbvakw.js
new file mode 100644
index 0000000..79b8456
--- /dev/null
+++ b/iceberg-charts/dist/zbvakw.js
@@ -0,0 +1,13 @@
+;(function(){
+  
+	var icon = '<svg class="sg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.31 251.89"><path d="M66.8,144.17c0-66.24,22.46-113.09,80.72-112.32,81.48,1.07,80.72,46.08,80.72,112.32,0,5.15,8.38,3.81,7.62,19-2.28,19.42-9.44,14.63-10.39,19.85-9.26,51.08-40.65,88.67-77.95,88.67-37.76,0-69.47-38.53-78.28-90.58-.82-4.85-5.86-.8-6.42-18.68C61.47,146.07,66.8,149.07,66.8,144.17Z" transform="translate(-56.6 -25.84)" style="fill:#ffdfbf;fill-rule:evenodd"/><path d="M147.52,31.85C99.49,31.22,75.79,63,69,111.24c8.78-23.84,27.86-26,64.33-26.54,70.62-1.13,88.39,8.27,79.64,96.55-1.84,18.6-6.1,24.62-28.36,39.74-12.07,8.2,18.54-26.37-49.78-27-49.5-.43-30.06,36.41-40.06,29.44a81.88,81.88,0,0,1-20.28-20.73c12.89,40.76,40.76,69,73.08,69,37.3,0,68.69-37.59,77.95-88.67l2.77-38.89C228.24,77.93,229,32.91,147.52,31.85Z" transform="translate(-56.6 -25.84)" style="fill:#d0b57b;fill-rule:evenodd"/><path d="M146.13,31.84h1.39c81.48,1.07,80.72,46.08,80.72,112.33,0,5.15,8.38,3.81,7.62,19-2.28,19.42-9.44,14.63-10.39,19.85-9.26,51.08-40.65,88.67-77.95,88.67-37.76,0-69.47-38.53-78.28-90.58-.82-4.85-5.86-.8-6.42-18.68-1.34-16.39,4-13.39,4-18.29,0-65.71,22.11-112.33,79.33-112.33m0-6h0c-29.39,0-51.65,11.54-66.18,34.3C67.3,80,60.86,108.06,60.8,143.68h0c-2.54,3.05-4.94,7-4,19.12.4,12.11,2.72,16.46,6.59,19.86,9.65,56,44.19,95.07,84.11,95.07,19.91,0,38.59-9.42,54-27.25,14.35-16.57,24.87-39.79,29.66-65.45l0,0c4.22-2.57,8.87-6.53,10.58-21.1l0-.2v-.2c.58-11.55-3.35-16.18-7.07-19.61l-.53-.5v-1c0-33,0-61.46-10.76-82.11-12-23-36.09-33.89-75.88-34.41Z" transform="translate(-56.6 -25.84)" style="fill:#303030"/><path d="M118.31,183.29s4.28,4.28,12.84,4S143.67,182,143.67,182s-3.62,8.23-11.53,8.89S118.31,183.29,118.31,183.29Z" transform="translate(-56.6 -25.84)" style="fill:#bfa78f;fill-rule:evenodd"/><ellipse cx="44.24" cy="115.64" rx="28.15" ry="35.97" style="fill:#fff"/><ellipse cx="104.54" cy="115.64" rx="28.15" ry="35.97" style="fill:#fff"/><circle class="eye" id="eye-left" cx="35.9" cy="121.66" r="10.5" style="fill:#303030"/><circle class="eye" cx="94.57" cy="121.66" r="10.5" style="fill:#303030"/><path d="M140.74,236.63h0c-16.92,0-29.43-4.38-29.43-18.42h0c0-4.22,4.12-7.64,9.21-7.64H160c3.6,0,6.53,2.42,6.53,5.42v7.23C166.55,234.48,154.32,236.63,140.74,236.63Z" transform="translate(-56.6 -25.84)" style="fill:#2d251d;fill-rule:evenodd"/><path d="M160,210.57h-39.5c-5.09,0-9.21,3.42-9.21,7.64,0,.07,0,.15,0,.22,7.57,2.29,17.6,3.2,29,3.2h0c9.87,0,19.24-.52,26.25-2.36V216C166.55,213,163.62,210.57,160,210.57Z" transform="translate(-56.6 -25.84)" style="fill:#fff"/></svg>';
+
+	document.head.insertAdjacentHTML('beforeend','<style>.sg { width: 35px; height: 35px; position: fixed; bottom: 10px; right: 10px; } .sg .eye { -webkit-transform: translateX(0px);   transform: translateX(0px); } .sg:hover .eye { -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; -webkit-transform: translateX(12px);   transform: translateX(12px); }</style>'); 
+  
+	var a = document.createElement('a');
+	a.setAttribute('href','https://twitter.com/steeevg');
+	a.setAttribute('target','_blank');
+	a.innerHTML = icon;
+    
+ 	document.body.appendChild(a);
+})();
\ No newline at end of file
diff --git a/iceberg-charts/license.txt b/iceberg-charts/license.txt
new file mode 100644
index 0000000..eaa3251
--- /dev/null
+++ b/iceberg-charts/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Steve Gardner (https://codepen.io/ste-vg/pen/BZZpyZ)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/iceberg-charts/src/index.html b/iceberg-charts/src/index.html
new file mode 100644
index 0000000..e977920
--- /dev/null
+++ b/iceberg-charts/src/index.html
@@ -0,0 +1,10 @@
+<div class="controls">
+  <span>Position:</span>
+  <a class="btn btn-default" href="javascript:prev();">Prev</a>
+  <a class="btn btn-default" href="javascript:next();">Next</a>
+  <span>Water Height</span>
+  <a class="btn btn-default" href="javascript:setWaterLevel(100);">High</a>
+  <a class="btn btn-default" href="javascript:setWaterLevel(50);">Medium</a>
+  <a class="btn btn-default" href="javascript:setWaterLevel(1);">Low</a>
+  <a class="btn btn-default" href="javascript:randomHeight();">Random</a>
+</div>
diff --git a/iceberg-charts/src/script.js b/iceberg-charts/src/script.js
new file mode 100644
index 0000000..2b2faa7
--- /dev/null
+++ b/iceberg-charts/src/script.js
@@ -0,0 +1,371 @@
+var renderer, scene, camera, controls, light;
+
+var waterSettings = {
+  base: 0.001,
+  size: {
+    x: 8,
+    y: 0,
+    z: 8
+  },
+  maxValue: 8,
+  selected: 0,
+  level: 1,
+  slosh: 0,
+  sloshRange: [0.3, 0.7],
+  sections: 10,
+  range: 0.05,
+  ranges: [0.06, 0.05],
+  spaceBetween: 25,
+  speed: 0.1
+}
+
+var sceneSettings = {
+  cameraZ: 0
+}
+
+var timeline = new TimelineMax();
+var sloshAnimation = new TimelineMax();
+
+var waterBlocks = [{
+  title: 'One',
+	bars: [
+					{color: 0xEF3740, value: 5},
+					{color: 0xEA962E, value: 4},
+					{color: 0x6FA272, value: 3},
+					{color: 0xEFF270, value: 3},
+					{color: 0x6DE57E, value: 2},
+				]
+}, {
+  title: 'Two',
+	bars: [
+					{color: 0xEF3740, value: 6},
+					{color: 0xEA962E, value: 2},
+					{color: 0x6FA272, value: 3},
+					{color: 0xEFF270, value: 1},
+					{color: 0x6DE57E, value: 4},
+				]
+}, {
+  title: 'Three',
+        		bars: [
+					{color: 0xEF3740, value: 2},
+					{color: 0xEA962E, value: 2},
+					{color: 0x6FA272, value: 2},
+					{color: 0xEFF270, value: 2},
+					{color: 0x6DE57E, value: 2},
+				]
+}, {
+  title: 'Four',
+        		bars: [
+					{color: 0xEF3740, value: 7},
+					{color: 0xEA962E, value: 2},
+					{color: 0x6FA272, value: 1.4},
+					{color: 0xEFF270, value: 2},
+					{color: 0x6DE57E, value: 4},
+				]
+}, {
+  title: 'Five',
+        		bars: [
+					{color: 0xEF3740, value: 5},
+					{color: 0xEA962E, value: 5},
+					{color: 0x6FA272, value: 4},
+					{color: 0xEFF270, value: 2},
+					{color: 0x6DE57E, value: 2},
+				]
+}];
+
+function init() {
+  // renderer
+
+  renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    alpha: true
+  });
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.setClearColor(0x222428, 1);
+  document.body.appendChild(renderer.domElement);
+
+  // scene
+
+  scene = new THREE.Scene();
+
+  // camera
+
+  var aspect = window.innerWidth / window.innerHeight;
+  var d = 20;
+  camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, -100, 1000);
+  camera.lookAt(new THREE.Vector3(0, 0, 0));
+
+  // materials
+
+  var waterSides = new THREE.MeshPhongMaterial({
+    color: 0x4DBFE1,
+    side: THREE.DoubleSide,
+    transparent: true,
+    opacity: 0.8,
+    //shading: THREE.FlatShading,
+    specular: 0x4DBFE1,
+    shininess: 5,
+  });
+
+  var waterTop = new THREE.MeshPhongMaterial({
+    color: 0x14435C,
+    side: THREE.DoubleSide,
+    shading: THREE.FlatShading,
+    transparent: true,
+    opacity: 0.9,
+    specular: 0xFFFFFF,
+    shininess: 10,
+  });
+
+  var materials = [waterSides, waterSides, waterTop, waterSides, waterSides, waterSides];
+
+  
+  //light
+  
+  light = new THREE.PointLight(0xffffff, 2, 600, 5);
+  light.position.set(waterSettings.size.x + 1.5, waterSettings.maxValue * 2, (waterSettings.size.z + 1) - (waterSettings.spaceBetween * waterSettings.selected));
+  scene.add(light);
+  
+  //grid 
+
+  var grid = new THREE.GridHelper(200, 1);
+  grid.setColors(0x2B2A2F, 0x2B2A2F);
+  scene.add(grid);
+
+  // water blocks
+
+  for (var j = 0; j < waterBlocks.length; j++) 
+  {
+    var group = new THREE.Group();
+
+    waterBlocks[j].group = group;
+    waterBlocks[j].water = null;
+    waterBlocks[j].waterMesh = null;
+    waterBlocks[j].sloshOffsets = [];
+    waterBlocks[j].topVertices = [];
+    waterBlocks[j].angles = [];
+
+    //floor
+
+    var floorGeometry = new THREE.BoxGeometry(waterSettings.size.x, 0.5, waterSettings.size.z);
+    floorGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0.25, 0));
+
+    var floor = new THREE.Mesh(
+      floorGeometry,
+      new THREE.MeshLambertMaterial({
+        color: 0x333333
+      })
+    );
+    floor.position.y = 0;
+    floor.position.x = 0;
+    floor.position.z = 0;
+
+    group.add(floor);
+    
+    //sphere
+    
+/*     var geometry = new THREE.SphereGeometry( 2, 15, 15 );
+    var material = new THREE.MeshLambertMaterial( {color: 0xff5555} );
+    var sphere = new THREE.Mesh( geometry, material );
+    sphere.position.y = 5;
+    group.add( sphere ); */
+
+    // geometry
+    waterBlocks[j].water = new THREE.BoxGeometry(waterSettings.size.x, waterSettings.maxValue, waterSettings.size.z, waterSettings.sections, 1, waterSettings.sections);
+    
+    var count = 0;
+    var pos = 0 - Math.floor(waterSettings.sections / 2);
+    var zeds = [];
+
+    for (var i = waterBlocks[j].water.vertices.length - 1; i >= 0; i--) {
+
+      if (waterBlocks[j].water.vertices[i].y >= (waterSettings.maxValue / 2)) 
+      {
+        waterBlocks[j].topVertices.push(waterBlocks[j].water.vertices[i]); 
+        zeds.push(waterBlocks[j].water.vertices[i].z)
+        waterBlocks[j].angles.push(count + waterSettings.speed + (Math.random()*2));
+        waterBlocks[j].sloshOffsets.push( Math.random() / 2);
+        count++;
+      }
+    };
+
+    zeds = _.uniq(zeds);
+    zeds.sort(function(a, b) 
+    {
+      return a - b
+    });
+
+    for (var i = waterBlocks[j].topVertices.length - 1; i >= 0; i--) 
+    {
+      waterBlocks[j].topVertices[i].zPos = zeds.indexOf(waterBlocks[j].topVertices[i].z) - Math.floor(zeds.length / 2);
+    }
+
+    waterBlocks[j].water.applyMatrix(new THREE.Matrix4().makeTranslation(0, (waterSettings.maxValue / 2) - waterSettings.base, 0));
+
+    // mesh
+    waterBlocks[j].waterMesh = new THREE.Mesh(waterBlocks[j].water, new THREE.MeshFaceMaterial(materials));
+    waterBlocks[j].waterMesh.position.y = 0.51;
+    waterBlocks[j].waterMesh.position.x = 0;
+    waterBlocks[j].waterMesh.position.z = 0;
+    group.add(waterBlocks[j].waterMesh);
+    
+    waterBlocks[j].wireframe = new THREE.WireframeHelper( waterBlocks[j].waterMesh, 0x00ff00 );
+    //group.add(waterBlocks[j].wireframe);
+	  
+	  for (var i = 0; i < waterBlocks[j].bars.length; i++) 
+		{	
+			var height = waterBlocks[j].bars[i].value;
+			var color = waterBlocks[j].bars[i].color;
+
+			var row = Math.floor(i/2);
+			var col = i%2 == 0 ? 0 : 1;
+
+			var dataBar = new THREE.BoxGeometry(0.8 * 2, height * 2, 0.8 * 2, 10, 10, 10);
+			dataBar.applyMatrix( new THREE.Matrix4().makeTranslation( 0, height, 0 ) );
+
+			var dataBarMesh = new THREE.Mesh
+			(
+				dataBar, 
+				new THREE.MeshLambertMaterial({color: color, transparent: false, opacity: 0.9}) 
+			);
+			dataBarMesh.position.y = 0;
+			dataBarMesh.position.x = -0 + (2.1 * col);
+			dataBarMesh.position.z = -2 + (2.1 * row);
+
+			group.add( dataBarMesh );
+
+			// var dataBarMeshOutline = new THREE.EdgesHelper( dataBarMesh, 0xdddddd );
+			// dataBarMeshOutline.material.linewidth = 2;
+			// dataBarMeshOutline.material.transparent = true;
+			// dataBarMeshOutline.material.opacity = 0.75;
+			// group.add( dataBarMeshOutline );
+
+			dataBarMesh.scale.y = 0.1;
+			TweenLite.to(dataBarMesh.scale, 2, {y: 1, delay: 0.1 + (i/6), ease: Elastic.easeOut});
+			//dataBarMeshOutline.scale.y = 0.1;
+			//TweenLite.to(dataBarMeshOutline.scale, 2, {y: 0.1, delay: 1 + (i/6), ease: Elastic.easeOut});
+		}
+
+    scene.add(group);
+
+    group.position.z = 0 - j * waterSettings.spaceBetween;
+  };
+}
+
+function render() {
+  renderer.render(scene, camera);
+}
+
+function animate() {
+  camera.position.set(20, 20, 20 + sceneSettings.cameraZ);
+  camera.lookAt(new THREE.Vector3(0, 5.6, sceneSettings.cameraZ));
+
+  requestAnimationFrame(animate);
+
+  for (var i = 0; i < waterBlocks.length; i++) 
+  {
+    waterBlocks[i].waterMesh.scale.y = waterSettings.size.y / 100;
+
+    for (var j = waterBlocks[i].topVertices.length - 1; j >= 0; j--) 
+    {
+      var sloshAmount = waterBlocks[i].topVertices[j].zPos * waterSettings.slosh * waterBlocks[i].sloshOffsets[j];
+      waterBlocks[i].topVertices[j].y = sloshAmount + (waterSettings.maxValue + Math.sin(waterBlocks[i].angles[j]) * waterSettings.range);
+      waterBlocks[i].angles[j] += waterSettings.speed; 
+    }
+
+    waterBlocks[i].water.verticesNeedUpdate = true;
+  }
+   
+  render();
+}
+
+function next()
+{
+  var toSelect = waterSettings.selected + 1;
+  if(toSelect >= waterBlocks.length) toSelect = 0;
+  selectBlock(toSelect, waterSettings.selected);
+}
+
+function prev()
+{
+  var toSelect = waterSettings.selected - 1;
+  if(toSelect < 0) toSelect = waterBlocks.length - 1;
+  selectBlock(toSelect, waterSettings.selected);
+}
+
+function selectBlock(newPos, oldPos) 
+{
+  waterSettings.selected = newPos;
+  var targetSlosh = 0;
+  var sloshAmount = (((waterSettings.sloshRange[0] - waterSettings.sloshRange[1]) / 100) * (100 - waterSettings.size.y)) + waterSettings.sloshRange[1]
+  if (newPos > oldPos) targetSlosh = -sloshAmount
+  else if (newPos < oldPos) targetSlosh = sloshAmount
+
+  sloshAnimation.clear()
+  sloshAnimation.append(TweenMax.to(waterSettings, 0.4, {
+    slosh: targetSlosh,
+    ease: Power2.easeIn
+  }));
+  sloshAnimation.append(TweenMax.to(waterSettings, 2.5, {
+    slosh: 0,
+    ease: Elastic.easeOut
+  }));
+  sloshAnimation.restart();
+
+  TweenMax.to(sceneSettings, 1, {
+    cameraZ: 0 - (waterSettings.spaceBetween * newPos),
+    ease: Power4.easeInOut
+  });
+  TweenMax.to(light.position, 1, {
+    z: (waterSettings.size.z + 0.5) - (waterSettings.spaceBetween * waterSettings.selected),
+    ease: Power4.easeInOut
+  });
+}
+
+function setWaterLevel(percent) 
+{
+  waterSettings.oldlevel = waterSettings.level;
+  
+  var level = (waterSettings.maxValue / 100) * percent;
+  var p = percent == 100 ? 105 : percent;
+  TweenLite.to(waterSettings.size, 0.5, {
+    y: level > 0.5 ? p : ((0.5 / waterSettings.maxValue) * 100),
+    ease: Power2.easeInOut
+  });
+
+  var diff = percent - waterSettings.level;
+  var disturbAmount = (diff / 100) * 0.5;
+  timeline.clear()
+  var r = (((waterSettings.ranges[0] - waterSettings.ranges[1]) / 100) * (100 - waterSettings.size.y)) + waterSettings.ranges[1]
+  timeline.append(TweenMax.to(waterSettings, 0.5, {
+    range: r + disturbAmount,
+    ease: Power2.easeIn
+  }));
+  timeline.append(TweenMax.to(waterSettings, 2.5, {
+    range: r,
+    ease: Elastic.easeOut
+  }));
+  
+  timeline.restart();
+  
+  waterSettings.level = percent;
+}
+
+function randomHeight()
+{
+  setWaterLevel(Math.random() * 100);
+}
+
+init();
+render();
+animate();
+setWaterLevel(50);
+
+window.addEventListener( 'resize', function () 
+{
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize( window.innerWidth, window.innerHeight );
+  
+}, false );
\ No newline at end of file
diff --git a/iceberg-charts/src/style.less b/iceberg-charts/src/style.less
new file mode 100644
index 0000000..74ed4fd
--- /dev/null
+++ b/iceberg-charts/src/style.less
@@ -0,0 +1,17 @@
+body
+{
+  overflow: hidden;
+}
+
+.controls
+{
+  position: absolute;
+  z-index: 100;
+  margin: 10px;
+}
+
+.controls span
+{
+  color: white;
+  padding: 0 10px 0 20px;
+}
diff --git a/iceberg-charts/src/zbvakw.js b/iceberg-charts/src/zbvakw.js
new file mode 100644
index 0000000..79b8456
--- /dev/null
+++ b/iceberg-charts/src/zbvakw.js
@@ -0,0 +1,13 @@
+;(function(){
+  
+	var icon = '<svg class="sg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.31 251.89"><path d="M66.8,144.17c0-66.24,22.46-113.09,80.72-112.32,81.48,1.07,80.72,46.08,80.72,112.32,0,5.15,8.38,3.81,7.62,19-2.28,19.42-9.44,14.63-10.39,19.85-9.26,51.08-40.65,88.67-77.95,88.67-37.76,0-69.47-38.53-78.28-90.58-.82-4.85-5.86-.8-6.42-18.68C61.47,146.07,66.8,149.07,66.8,144.17Z" transform="translate(-56.6 -25.84)" style="fill:#ffdfbf;fill-rule:evenodd"/><path d="M147.52,31.85C99.49,31.22,75.79,63,69,111.24c8.78-23.84,27.86-26,64.33-26.54,70.62-1.13,88.39,8.27,79.64,96.55-1.84,18.6-6.1,24.62-28.36,39.74-12.07,8.2,18.54-26.37-49.78-27-49.5-.43-30.06,36.41-40.06,29.44a81.88,81.88,0,0,1-20.28-20.73c12.89,40.76,40.76,69,73.08,69,37.3,0,68.69-37.59,77.95-88.67l2.77-38.89C228.24,77.93,229,32.91,147.52,31.85Z" transform="translate(-56.6 -25.84)" style="fill:#d0b57b;fill-rule:evenodd"/><path d="M146.13,31.84h1.39c81.48,1.07,80.72,46.08,80.72,112.33,0,5.15,8.38,3.81,7.62,19-2.28,19.42-9.44,14.63-10.39,19.85-9.26,51.08-40.65,88.67-77.95,88.67-37.76,0-69.47-38.53-78.28-90.58-.82-4.85-5.86-.8-6.42-18.68-1.34-16.39,4-13.39,4-18.29,0-65.71,22.11-112.33,79.33-112.33m0-6h0c-29.39,0-51.65,11.54-66.18,34.3C67.3,80,60.86,108.06,60.8,143.68h0c-2.54,3.05-4.94,7-4,19.12.4,12.11,2.72,16.46,6.59,19.86,9.65,56,44.19,95.07,84.11,95.07,19.91,0,38.59-9.42,54-27.25,14.35-16.57,24.87-39.79,29.66-65.45l0,0c4.22-2.57,8.87-6.53,10.58-21.1l0-.2v-.2c.58-11.55-3.35-16.18-7.07-19.61l-.53-.5v-1c0-33,0-61.46-10.76-82.11-12-23-36.09-33.89-75.88-34.41Z" transform="translate(-56.6 -25.84)" style="fill:#303030"/><path d="M118.31,183.29s4.28,4.28,12.84,4S143.67,182,143.67,182s-3.62,8.23-11.53,8.89S118.31,183.29,118.31,183.29Z" transform="translate(-56.6 -25.84)" style="fill:#bfa78f;fill-rule:evenodd"/><ellipse cx="44.24" cy="115.64" rx="28.15" ry="35.97" style="fill:#fff"/><ellipse cx="104.54" cy="115.64" rx="28.15" ry="35.97" style="fill:#fff"/><circle class="eye" id="eye-left" cx="35.9" cy="121.66" r="10.5" style="fill:#303030"/><circle class="eye" cx="94.57" cy="121.66" r="10.5" style="fill:#303030"/><path d="M140.74,236.63h0c-16.92,0-29.43-4.38-29.43-18.42h0c0-4.22,4.12-7.64,9.21-7.64H160c3.6,0,6.53,2.42,6.53,5.42v7.23C166.55,234.48,154.32,236.63,140.74,236.63Z" transform="translate(-56.6 -25.84)" style="fill:#2d251d;fill-rule:evenodd"/><path d="M160,210.57h-39.5c-5.09,0-9.21,3.42-9.21,7.64,0,.07,0,.15,0,.22,7.57,2.29,17.6,3.2,29,3.2h0c9.87,0,19.24-.52,26.25-2.36V216C166.55,213,163.62,210.57,160,210.57Z" transform="translate(-56.6 -25.84)" style="fill:#fff"/></svg>';
+
+	document.head.insertAdjacentHTML('beforeend','<style>.sg { width: 35px; height: 35px; position: fixed; bottom: 10px; right: 10px; } .sg .eye { -webkit-transform: translateX(0px);   transform: translateX(0px); } .sg:hover .eye { -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; -webkit-transform: translateX(12px);   transform: translateX(12px); }</style>'); 
+  
+	var a = document.createElement('a');
+	a.setAttribute('href','https://twitter.com/steeevg');
+	a.setAttribute('target','_blank');
+	a.innerHTML = icon;
+    
+ 	document.body.appendChild(a);
+})();
\ No newline at end of file
diff --git a/icosahedron-pure-css/README.markdown b/icosahedron-pure-css/README.markdown
new file mode 100644
index 0000000..565392c
--- /dev/null
+++ b/icosahedron-pure-css/README.markdown
@@ -0,0 +1,5 @@
+# Icosahedron pure css
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/michalporag/pen/MWjRJBO](https://codepen.io/michalporag/pen/MWjRJBO).
+
+
diff --git a/icosahedron-pure-css/dist/index.html b/icosahedron-pure-css/dist/index.html
new file mode 100644
index 0000000..d4023ce
--- /dev/null
+++ b/icosahedron-pure-css/dist/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Icosahedron pure css</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="shadow"></div>
+<div class="icosahedron">
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/icosahedron-pure-css/dist/script.js b/icosahedron-pure-css/dist/script.js
new file mode 100644
index 0000000..3b1407e
--- /dev/null
+++ b/icosahedron-pure-css/dist/script.js
@@ -0,0 +1,11 @@
+/*
+    Hi, I'm Michal, a front-end developer at Outbrain 😎
+    
+    github: https://github.com/MichalPorag
+    medium: https://medium.com/@miporagi
+    linkedin: https://www.linkedin.com/in/michal-porag-9522b5142/
+    twitter: https://twitter.com/MichalPorag
+    my tech talks: https://www.youtube.com/playlist?list=PLH7Km7lJwMqSviBIID2XUT2BBE_ZTpDWy
+    
+    Feel free to give a ❤️
+*/
\ No newline at end of file
diff --git a/icosahedron-pure-css/dist/style.css b/icosahedron-pure-css/dist/style.css
new file mode 100644
index 0000000..c6cb78a
--- /dev/null
+++ b/icosahedron-pure-css/dist/style.css
@@ -0,0 +1,249 @@
+:root {
+  --base-size: 200px;
+  --base-height: 173px;
+}
+
+*, *::before, *::after {
+  padding: 0;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #7a7b89;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  perspective: 600px;
+  overflow: hidden;
+}
+
+.shadow {
+  position: absolute;
+  width: 100%;
+  height: 200%;
+  background-image: radial-gradient(#000, transparent 60%);
+  transform: rotateX(90deg) translateZ(-100px);
+}
+
+.icosahedron {
+  position: relative;
+  width: var(--base-size);
+  height: 169px;
+  transform-style: preserve-3d;
+  animation: rotate 20s infinite linear;
+}
+@keyframes rotate {
+  from {
+    transform: rotateX(0deg) rotateY(360deg) rotateZ(360deg);
+  }
+  to {
+    transform: rotateX(360deg) rotateY(0deg) rotateZ(-360deg);
+  }
+}
+
+.triangle {
+  width: var(--base-size);
+  height: var(--base-height);
+  position: absolute;
+  opacity: 0.8;
+  clip-path: polygon(0 0, 50% 100%, 100% 0);
+  transform-origin: top;
+  background-color: #23205fa8;
+  --d: 138px;
+  --d: 138px;
+  --d: 138px;
+  --d: 138px;
+  --d: 138px;
+}
+.triangle:nth-child(1) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(2) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(3) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(4) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(5) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(6) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(7) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(8) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(9) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(10) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(11) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(12) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(13) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(14) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(15) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(16) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(17) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(18) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(19) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(20) {
+  background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
+  background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+  background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+  box-shadow: -20px -20px 100px 0 black inset;
+}
+.triangle:nth-child(1) {
+  transform: rotateY(0.2turn) translateZ(var(--d)) rotateX(-127deg);
+}
+.triangle:nth-child(6) {
+  transform: rotateY(0.2turn) translateZ(var(--d)) rotateX(11deg);
+}
+.triangle:nth-child(11) {
+  bottom: calc(var(--base-height) * -1);
+  transform: rotateY(0.2turn) translateZ(calc(var(--d) * -1)) rotateX(191deg);
+}
+.triangle:nth-child(16) {
+  bottom: calc(var(--base-height) * -1);
+  transform: rotateY(0.2turn) translateZ(calc(var(--d) * -1)) rotateX(53deg);
+}
+.triangle:nth-child(2) {
+  transform: rotateY(0.4turn) translateZ(var(--d)) rotateX(-127deg);
+}
+.triangle:nth-child(7) {
+  transform: rotateY(0.4turn) translateZ(var(--d)) rotateX(11deg);
+}
+.triangle:nth-child(12) {
+  bottom: calc(var(--base-height) * -1);
+  transform: rotateY(0.4turn) translateZ(calc(var(--d) * -1)) rotateX(191deg);
+}
+.triangle:nth-child(17) {
+  bottom: calc(var(--base-height) * -1);
+  transform: rotateY(0.4turn) translateZ(calc(var(--d) * -1)) rotateX(53deg);
+}
+.triangle:nth-child(3) {
+  transform: rotateY(0.6turn) translateZ(var(--d)) rotateX(-127deg);
+}
+.triangle:nth-child(8) {
+  transform: rotateY(0.6turn) translateZ(var(--d)) rotateX(11deg);
+}
+.triangle:nth-child(13) {
+  bottom: calc(var(--base-height) * -1);
+  transform: rotateY(0.6turn) translateZ(calc(var(--d) * -1)) rotateX(191deg);
+}
+.triangle:nth-child(18) {
+  bottom: calc(var(--base-height) * -1);
+  transform: rotateY(0.6turn) translateZ(calc(var(--d) * -1)) rotateX(53deg);
+}
+.triangle:nth-child(4) {
+  transform: rotateY(0.8turn) translateZ(var(--d)) rotateX(-127deg);
+}
+.triangle:nth-child(9) {
+  transform: rotateY(0.8turn) translateZ(var(--d)) rotateX(11deg);
+}
+.triangle:nth-child(14) {
+  bottom: calc(var(--base-height) * -1);
+  transform: rotateY(0.8turn) translateZ(calc(var(--d) * -1)) rotateX(191deg);
+}
+.triangle:nth-child(19) {
+  bottom: calc(var(--base-height) * -1);
+  transform: rotateY(0.8turn) translateZ(calc(var(--d) * -1)) rotateX(53deg);
+}
+.triangle:nth-child(5) {
+  transform: rotateY(1turn) translateZ(var(--d)) rotateX(-127deg);
+}
+.triangle:nth-child(10) {
+  transform: rotateY(1turn) translateZ(var(--d)) rotateX(11deg);
+}
+.triangle:nth-child(15) {
+  bottom: calc(var(--base-height) * -1);
+  transform: rotateY(1turn) translateZ(calc(var(--d) * -1)) rotateX(191deg);
+}
+.triangle:nth-child(20) {
+  bottom: calc(var(--base-height) * -1);
+  transform: rotateY(1turn) translateZ(calc(var(--d) * -1)) rotateX(53deg);
+}
\ No newline at end of file
diff --git a/icosahedron-pure-css/license.txt b/icosahedron-pure-css/license.txt
new file mode 100644
index 0000000..9313355
--- /dev/null
+++ b/icosahedron-pure-css/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Michal Porag (https://codepen.io/michalporag/pen/MWjRJBO)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/icosahedron-pure-css/src/index.html b/icosahedron-pure-css/src/index.html
new file mode 100644
index 0000000..1dc6a5d
--- /dev/null
+++ b/icosahedron-pure-css/src/index.html
@@ -0,0 +1,25 @@
+<div class="shadow"></div>
+<div class="icosahedron">
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+  <div class="triangle"></div>
+</div>
\ No newline at end of file
diff --git a/icosahedron-pure-css/src/script.js b/icosahedron-pure-css/src/script.js
new file mode 100644
index 0000000..3b1407e
--- /dev/null
+++ b/icosahedron-pure-css/src/script.js
@@ -0,0 +1,11 @@
+/*
+    Hi, I'm Michal, a front-end developer at Outbrain 😎
+    
+    github: https://github.com/MichalPorag
+    medium: https://medium.com/@miporagi
+    linkedin: https://www.linkedin.com/in/michal-porag-9522b5142/
+    twitter: https://twitter.com/MichalPorag
+    my tech talks: https://www.youtube.com/playlist?list=PLH7Km7lJwMqSviBIID2XUT2BBE_ZTpDWy
+    
+    Feel free to give a ❤️
+*/
\ No newline at end of file
diff --git a/icosahedron-pure-css/src/style.scss b/icosahedron-pure-css/src/style.scss
new file mode 100644
index 0000000..948aa62
--- /dev/null
+++ b/icosahedron-pure-css/src/style.scss
@@ -0,0 +1,86 @@
+:root {
+  --base-size: 200px;
+  --base-height: 173px;
+}
+
+*, *::before, *::after {
+  padding: 0;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #7a7b89;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  perspective: 600px;
+  overflow: hidden;
+}
+
+.shadow{
+  position: absolute;
+  width: 100%;
+  height: 200%;
+  background-image: radial-gradient(#000, transparent 60%);
+  transform: rotateX(90deg) translateZ(-100px);
+}
+
+.icosahedron {
+  position: relative;
+  width: var(--base-size);
+  height: 169px;
+  transform-style: preserve-3d;
+  animation: rotate 20s infinite linear;
+  
+  @keyframes rotate {
+    from { transform: rotateX(0deg) rotateY(360deg) rotateZ(360deg); }
+    to { transform: rotateX(360deg) rotateY(0deg) rotateZ(-360deg); }
+  }
+}
+
+.triangle {
+  width: var(--base-size);
+  height: var(--base-height);
+  position: absolute;
+  opacity: 0.8;
+  clip-path: polygon(0 0, 50% 100%, 100% 0);
+  transform-origin: top;
+  background-color: #23205fa8;
+
+  @for $i from 1 through 20 {
+    &:nth-child(#{$i}) {
+      background-image:
+        radial-gradient(white, rgba(255,255,255, 1) 20px, transparent 40px),
+        radial-gradient(white, rgba(255,255,255, 1) 10px, transparent 30px),
+        radial-gradient(white, rgba(255,255,255, 1) 10px, transparent 40px),
+        radial-gradient(rgba(255,255,255, 1), rgba(255,255,255,0.3) 2px, transparent 30px);
+      background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
+      background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
+      box-shadow: -20px -20px 100px 0 black inset;
+    }
+  }
+  
+  @for $i from 1 through 5 {
+    --d: 138px;
+    
+    &:nth-child(#{$i}) {
+      transform: rotateY(#{$i * 1/5}turn) translateZ(var(--d)) rotateX(-127deg);
+    }
+    
+    &:nth-child(#{$i + 5}) {
+      transform: rotateY(#{$i * 1/5}turn) translateZ(var(--d)) rotateX(11deg);
+    }
+    
+    &:nth-child(#{$i + 10}) {
+      bottom: calc(var(--base-height) * -1);
+      transform: rotateY(#{$i * 1/5}turn) translateZ(calc(var(--d) * -1)) rotateX(191deg);
+    }
+    
+    &:nth-child(#{$i + 15}) {
+      bottom: calc(var(--base-height) * -1);
+      transform: rotateY(#{$i * 1/5}turn) translateZ(calc(var(--d) * -1)) rotateX(53deg);
+    }
+  }
+}
\ No newline at end of file
diff --git a/illustration-online-store/README.markdown b/illustration-online-store/README.markdown
new file mode 100644
index 0000000..51fc2e8
--- /dev/null
+++ b/illustration-online-store/README.markdown
@@ -0,0 +1,5 @@
+# Illustration online store 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/havardob/pen/KKzKPrX](https://codepen.io/havardob/pen/KKzKPrX).
+
+Illustrations downloaded from https://freepik.com 
diff --git a/illustration-online-store/dist/index.html b/illustration-online-store/dist/index.html
new file mode 100644
index 0000000..2bab6db
--- /dev/null
+++ b/illustration-online-store/dist/index.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Illustration online store </title>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined|Material+Icons" rel="stylesheet" />
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<header class="header">
+	<div class="header-content">
+		<div class="header-logo">
+			<h1 class="logo">Frames</h1>
+		</div>
+		<nav class="header-navigation">
+			<a href="#">About</a>
+			<a href="#" class="link-button">Your Cart<i class="material-icons-outlined">shopping_cart</i></a>
+		</nav>
+	</div>
+</header>
+<main>
+	<div class="responsive-container">
+		<div class="grid">
+			<div class="grid-column">
+								<a class="product" href="#">
+					<div class="product-image">
+						<img src="https://assets.codepen.io/285131/cosmonaut.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Cosmonaut</h2>
+							<p class="product-price">$ 10</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+
+				<a class="product" href="#">
+					<div class="product-image">
+						<img src="https://assets.codepen.io/285131/hand-drawn-monster-milkshake.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Monster Milkshake</h2>
+							<p class="product-price">$ 9</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+				<a class="product" href="#">
+					<div class="product-image">
+							<img src="https://assets.codepen.io/285131/pink-pastel-juicy-banana.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Juicy Banana</h2>
+							<p class="product-price">$ 9</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+			</div>
+			<div class="grid-column">
+				<a class="product" href="#">
+					<div class="product-image">
+						<img src="https://assets.codepen.io/285131/palmistry.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Palmistry</h2>
+							<p class="product-price">$ 9</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+				<a class="product" href="#">
+					<div class="product-image"> 
+						<img src="https://assets.codepen.io/285131/fish-gas-mark.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Fish With Gas Mask</h2>
+							<p class="product-price">$ 12</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+				<a class="product" href="#">
+					<div class="product-image">
+						<img src="https://assets.codepen.io/285131/mysterious-gangster-character-style.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Gangster</h2>
+							<p class="product-price">$ 5</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+			</div>
+			<div class="grid-column">
+				<a class="product" href="#">
+					<div class="product-image">
+						<img src="https://assets.codepen.io/285131/adventure.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Adventure in a Bottle</h2>
+							<p class="product-price">$ 15</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+				<a class="product" href="#">
+					<div class="product-image">
+						<img src="https://assets.codepen.io/285131/illustration-hand-with-cigarette-icon.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Smoking Ain't Cool</h2>
+							<p class="product-price">$ 5</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+			</div>
+		</div>
+	</div>
+	<div class="credits">
+		<div class="responsive-container">
+		<h3>Illustrations by Freepik</h3>
+	<a href='https://www.freepik.com/' target="_blank">Check out their amazing work - www.freepik.com</a>
+		</div>
+	</div>
+</main>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/illustration-online-store/dist/style.css b/illustration-online-store/dist/style.css
new file mode 100644
index 0000000..f80ffdc
--- /dev/null
+++ b/illustration-online-store/dist/style.css
@@ -0,0 +1,245 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap");
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul,
+ol,
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+body {
+  scroll-behavior: smooth;
+  line-height: 1.5;
+  background-color: #FFF;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+a {
+  color: inherit;
+  font-weight: bold;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+button {
+  border: 1px solid;
+  background-color: transparent;
+}
+
+body {
+  font-family: "DM Sans", sans-serif;
+}
+
+.responsive-container {
+  max-width: 1080px;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.header {
+  border-bottom: 1px solid #d0d0d0;
+  min-height: 60px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+}
+
+.header-content {
+  display: -webkit-box;
+  display: flex;
+  width: 100%;
+  max-width: 2000px;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+          justify-content: space-between;
+}
+
+.header-navigation {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+}
+.header-navigation a {
+  margin-left: 1.5rem;
+  text-decoration: none;
+  font-size: 1rem;
+}
+
+.link-button {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  background-color: #000;
+  border-radius: 0.375rem;
+  padding: 0.5em 1.25em;
+  color: #fff;
+}
+.link-button i {
+  font-size: 1.25rem;
+  margin-left: 0.5rem;
+}
+
+.logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+main {
+  padding-top: 2rem;
+  padding-bottom: 6rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+}
+
+.grid-column {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+}
+.grid-column > * + * {
+  margin-top: 2rem;
+}
+
+.product {
+  border-radius: 0.25rem;
+  text-decoration: none;
+  font-weight: 400;
+  -webkit-transition: .15s ease;
+  transition: .15s ease;
+  overflow: hidden;
+}
+.product:hover, .product:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem pink;
+}
+.product:hover .product-content, .product:focus .product-content {
+  border-color: transparent;
+}
+
+.product-image {
+  border-radius: 0.25rem 0.25rem 0 0;
+  overflow: hidden;
+}
+
+.product-content {
+  padding: 1rem;
+  border-left: 1px solid #dedede;
+  border-right: 1px solid #dedede;
+  border-bottom: 1px solid #dedede;
+  border-radius: 0 0 0.25rem 0.25rem;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+          justify-content: space-between;
+  -webkit-transition: .15s ease;
+  transition: .15s ease;
+  background-color: #FFF;
+}
+
+.product-action {
+  color: #000;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: .25rem;
+  font-size: 1.25rem;
+  border: none;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+  cursor: pointer;
+  -webkit-transition: .15s ease;
+  transition: .15s ease;
+}
+.product-action:hover {
+  background-color: #ebebeb;
+}
+
+.product-info {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+}
+
+.product-title {
+  font-size: 1.125rem;
+  line-height: 1.25;
+}
+
+.product-price {
+  margin-top: .25rem;
+}
+
+.credits {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  -webkit-box-pack: center;
+          justify-content: center;
+  text-align: center;
+  margin-top: 10rem;
+  color: #777;
+  font-size: .875rem;
+}
+.credits a {
+  display: block;
+}
+
+@media all and (max-width: 600px) {
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 1.5rem;
+  }
+
+  .grid-column > * + * {
+    margin-top: 1.5rem;
+  }
+}
\ No newline at end of file
diff --git a/illustration-online-store/license.txt b/illustration-online-store/license.txt
new file mode 100644
index 0000000..a3555e2
--- /dev/null
+++ b/illustration-online-store/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Håvard Brynjulfsen (https://codepen.io/havardob/pen/KKzKPrX)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/illustration-online-store/src/index.html b/illustration-online-store/src/index.html
new file mode 100644
index 0000000..1586d1b
--- /dev/null
+++ b/illustration-online-store/src/index.html
@@ -0,0 +1,126 @@
+<header class="header">
+	<div class="header-content">
+		<div class="header-logo">
+			<h1 class="logo">Frames</h1>
+		</div>
+		<nav class="header-navigation">
+			<a href="#">About</a>
+			<a href="#" class="link-button">Your Cart<i class="material-icons-outlined">shopping_cart</i></a>
+		</nav>
+	</div>
+</header>
+<main>
+	<div class="responsive-container">
+		<div class="grid">
+			<div class="grid-column">
+								<a class="product" href="#">
+					<div class="product-image">
+						<img src="https://assets.codepen.io/285131/cosmonaut.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Cosmonaut</h2>
+							<p class="product-price">$ 10</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+
+				<a class="product" href="#">
+					<div class="product-image">
+						<img src="https://assets.codepen.io/285131/hand-drawn-monster-milkshake.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Monster Milkshake</h2>
+							<p class="product-price">$ 9</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+				<a class="product" href="#">
+					<div class="product-image">
+							<img src="https://assets.codepen.io/285131/pink-pastel-juicy-banana.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Juicy Banana</h2>
+							<p class="product-price">$ 9</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+			</div>
+			<div class="grid-column">
+				<a class="product" href="#">
+					<div class="product-image">
+						<img src="https://assets.codepen.io/285131/palmistry.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Palmistry</h2>
+							<p class="product-price">$ 9</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+				<a class="product" href="#">
+					<div class="product-image"> 
+						<img src="https://assets.codepen.io/285131/fish-gas-mark.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Fish With Gas Mask</h2>
+							<p class="product-price">$ 12</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+				<a class="product" href="#">
+					<div class="product-image">
+						<img src="https://assets.codepen.io/285131/mysterious-gangster-character-style.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Gangster</h2>
+							<p class="product-price">$ 5</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+			</div>
+			<div class="grid-column">
+				<a class="product" href="#">
+					<div class="product-image">
+						<img src="https://assets.codepen.io/285131/adventure.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Adventure in a Bottle</h2>
+							<p class="product-price">$ 15</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+				<a class="product" href="#">
+					<div class="product-image">
+						<img src="https://assets.codepen.io/285131/illustration-hand-with-cigarette-icon.jpg" />
+					</div>
+					<div class="product-content">
+						<div class="product-info">
+							<h2 class="product-title">Smoking Ain't Cool</h2>
+							<p class="product-price">$ 5</p>
+						</div>
+						<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
+					</div>
+				</a>
+			</div>
+		</div>
+	</div>
+	<div class="credits">
+		<div class="responsive-container">
+		<h3>Illustrations by Freepik</h3>
+	<a href='https://www.freepik.com/' target="_blank">Check out their amazing work - www.freepik.com</a>
+		</div>
+	</div>
+</main>
\ No newline at end of file
diff --git a/illustration-online-store/src/style.scss b/illustration-online-store/src/style.scss
new file mode 100644
index 0000000..ead8fcc
--- /dev/null
+++ b/illustration-online-store/src/style.scss
@@ -0,0 +1,223 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');
+
+
+*,
+*:before,
+*:after {
+	box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul,
+ol,
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+	margin: 0;
+}
+
+body {
+	scroll-behavior: smooth;
+	line-height: 1.5;
+	background-color: #FFF;
+}
+
+img {
+	max-width: 100%;
+	display: block;
+}
+
+a {
+	color: inherit;
+	font-weight: bold;
+}
+
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+
+button {
+	border: 1px solid;
+	background-color: transparent;
+}
+
+// The code
+
+body {
+	font-family: "DM Sans", sans-serif;
+}
+
+.responsive-container {
+	max-width: 1080px;
+	width: 90%;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.header {
+	border-bottom: 1px solid #d0d0d0;
+	min-height: 60px;
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+	display: flex;
+	justify-content: center;
+}
+
+.header-content {
+	display: flex;
+	width: 100%;
+	max-width: 2000px;
+	padding-left: 1.25rem; 
+	padding-right: 1.25rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.header-navigation {
+	display: flex;
+	align-items: center;
+	a {
+		margin-left: 1.5rem;
+		text-decoration: none;
+		font-size: 1rem;
+	}
+}
+
+.link-button {
+	display: flex;
+	align-items: center;
+	background-color: #000;
+	border-radius: 0.375rem;
+	padding: 0.5em 1.25em;
+	color: #fff;
+	i {
+		font-size: 1.25rem;
+		margin-left: 0.5rem;
+	}
+}
+
+.logo {
+	font-size: 1.25rem;
+	font-weight: 700;
+}
+
+main {
+	padding-top: 2rem;
+	padding-bottom: 6rem;
+}
+
+.grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 2rem;
+}
+
+.grid-column {
+	display: flex;
+	flex-direction: column;
+	& > * + * {
+		margin-top: 2rem;
+	}
+}
+
+.product {
+	border-radius: 0.25rem;
+	text-decoration: none;
+	font-weight: 400;	
+	transition: .15s ease;
+	overflow: hidden;
+	&:hover, &:focus {
+		outline: none;
+		box-shadow: 0 0 0 0.25rem pink;
+		.product-content {
+			border-color: transparent;
+		}
+	}
+}
+
+.product-image {
+	border-radius: 0.25rem 0.25rem 0 0;
+	overflow: hidden;
+}
+
+.product-content {
+	padding: 1rem;
+	border-left: 1px solid #dedede;
+	border-right: 1px solid #dedede;
+	border-bottom: 1px solid #dedede;
+	border-radius: 0 0 0.25rem 0.25rem;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	transition: .15s ease;
+	background-color: #FFF;
+}
+
+.product-action {
+	color: #000;
+	width: 2.5rem;
+	height: 2.5rem;
+	border-radius: .25rem;
+	font-size: 1.25rem;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	transition: .15s ease;
+	&:hover {
+		background-color: #ebebeb;
+	}
+}
+
+.product-info {
+	display: flex;
+	flex-direction: column;
+}
+
+.product-title {
+	font-size: 1.125rem;
+	line-height: 1.25;
+}
+
+.product-price {
+	margin-top: .25rem;
+}
+
+.credits {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	text-align: center;
+	margin-top: 10rem;
+	color: #777;
+	font-size: .875rem;
+	a {
+		display: block;
+	}
+}
+
+@media all and (max-width: 600px) {
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(1, 1fr);
+		gap: 1.5rem;
+	}
+
+	.grid-column {
+		& > * + * {
+			margin-top: 1.5rem;
+		}
+	}
+}
diff --git a/image-captions-color-hints/README.markdown b/image-captions-color-hints/README.markdown
new file mode 100644
index 0000000..7a75dc8
--- /dev/null
+++ b/image-captions-color-hints/README.markdown
@@ -0,0 +1,5 @@
+# Image captions & color hints
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/argyleink/pen/ExNLwbR](https://codepen.io/argyleink/pen/ExNLwbR).
+
+
diff --git a/image-captions-color-hints/dist/index.html b/image-captions-color-hints/dist/index.html
new file mode 100644
index 0000000..19e007e
--- /dev/null
+++ b/image-captions-color-hints/dist/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Image captions &amp; color hints</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script src="https://gist.github.com/argyleink/68bd0e7c4419bf7ba8a25424b8f08380.js"></script>
+
+<figure class="mural-card">
+  <picture>
+    <img src="https://assets.codepen.io/2585/Yamagata-Mural.jpg" alt="yamagata mural" loading="lazy" intrinsicsize>
+  </picture>
+  <figcaption>
+    <h3>
+      Improve contrast legibility
+      <small><u>with</u> a custom <b>color hint</b></small>
+    </h3>
+    <p>
+      Yamagata
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-location-pin">
+        <path d="M5.64 16.36a9 9 0 1 1 12.72 0l-5.65 5.66a1 1 0 0 1-1.42 0l-5.65-5.66zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+        <path d="M12 1a9 9 0 0 1 6.36 15.36l-5.65 5.66a1 1 0 0 1-.71.3V13a3 3 0 0 0 0-6V1z"/>
+      </svg>
+    </p>
+  </figcaption>
+  
+  <div class="demo">
+    <small>Adjust the hint</small>
+    <input id="slider-hint" value="75" type="range" min="0" max="100">
+  </div>
+</figure>
+
+<figure class="mural-card fixed">
+  <picture>
+    <img src="https://assets.codepen.io/2585/Yamagata-Mural.jpg" alt="yamagata mural" loading="lazy" intrinsicsize>
+  </picture>
+  <figcaption>
+    <h3>
+      Less contrast legibility
+      <small><u>no color hint</u>, <b>same gradient</b></small>
+    </h3>
+    <p>
+      Yamagata
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-location-pin">
+        <path d="M5.64 16.36a9 9 0 1 1 12.72 0l-5.65 5.66a1 1 0 0 1-1.42 0l-5.65-5.66zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+        <path d="M12 1a9 9 0 0 1 6.36 15.36l-5.65 5.66a1 1 0 0 1-.71.3V13a3 3 0 0 0 0-6V1z"/>
+      </svg>
+    </p>
+  </figcaption>
+</figure>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/image-captions-color-hints/dist/script.js b/image-captions-color-hints/dist/script.js
new file mode 100644
index 0000000..a0e6af7
--- /dev/null
+++ b/image-captions-color-hints/dist/script.js
@@ -0,0 +1,9 @@
+document.
+querySelectorAll('input').
+forEach(input => {
+  input.addEventListener('input', (e) =>
+  document.body.style.setProperty(
+  '--' + e.target.id,
+  e.target.value + '%'));
+
+});
\ No newline at end of file
diff --git a/image-captions-color-hints/dist/style.css b/image-captions-color-hints/dist/style.css
new file mode 100644
index 0000000..02ab417
--- /dev/null
+++ b/image-captions-color-hints/dist/style.css
@@ -0,0 +1,121 @@
+/* layout */
+.mural-card {
+  display: grid;
+  align-items: flex-end
+}
+.mural-card > * {
+    grid-column: 1;
+    grid-row: 1;
+  }
+.mural-card picture, .mural-card img {
+    width: 100%;
+    height: 100%;
+  }
+.mural-card > figcaption {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: flex-end;
+    grid-gap: 1rem;
+    gap: 1rem
+  }
+.mural-card > figcaption > h3 {
+      display: grid;
+      grid-gap: .25rem;
+      gap: .25rem;
+    }
+.mural-card > figcaption > p {
+      grid-column: 2;
+      justify-self: flex-end;
+      width: -webkit-max-content;
+      width: -moz-max-content;
+      width: max-content;
+
+      display: inline-grid;
+      grid-gap: .5rem;
+      gap: .5rem;
+      grid-auto-flow: column;
+      align-items: flex-end;
+    }
+
+/* paint */
+.mural-card {
+  margin: 0;
+  border-radius: 1rem;
+  overflow: hidden;
+  position: relative
+}
+.mural-card > figcaption {
+    padding-left: 2rem;
+    padding-right: 2rem;
+    padding-top: 4rem;
+    padding-bottom: 1.5rem;
+    color: white;
+    background: linear-gradient(to top, 
+      hsla(0, 0%, 0%, 0.9), 
+      75%, 
+      hsla(0, 0%, 0%, 0)
+    );
+    background: linear-gradient(to top, 
+      hsla(0, 0%, 0%, 0.9), 
+      var(--slider-hint, 75%), 
+      hsla(0, 0%, 0%, 0)
+    )
+  }
+@media (max-width: 479px) {
+.mural-card > figcaption {
+      padding-left: 1rem;
+      padding-right: 1rem;
+      padding-bottom: 1rem
+  }
+    }
+.mural-card > figcaption > h3 > small {
+      font-weight: normal;
+    }
+.mural-card > figcaption > h3, .mural-card > figcaption > p {
+      margin: 0;
+    }
+.mural-card > figcaption > p {
+      font-size: 1.4rem;
+      line-height: 1.1
+    }
+.mural-card > figcaption > p > svg {
+        fill: white;
+        height: 2rem;
+      }
+.mural-card.fixed > figcaption {
+    background: linear-gradient(to top, 
+      hsla(0, 0%, 0%, 0.9), 
+      hsla(0, 0%, 0%, 0)
+    );
+  }
+
+.demo {
+  position: absolute;
+  top: 1rem;
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+  background: hsl(0, 0%, 97%);
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  padding: .5rem 1rem;
+  border-radius: 0 2rem 2rem 0;
+  display: flex;
+  grid-gap: .25rem;
+  gap: .25rem;
+  flex-direction: column;
+  box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.4);
+}
+
+body {
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  place-items: center;
+  min-height: 100vh;
+  padding: 5vmin;
+  grid-gap: 25vmin;
+  gap: 25vmin;
+  background: hsl(0, 0%, 97%);
+}
\ No newline at end of file
diff --git a/image-captions-color-hints/license.txt b/image-captions-color-hints/license.txt
new file mode 100644
index 0000000..9f77c0f
--- /dev/null
+++ b/image-captions-color-hints/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Adam Argyle (https://codepen.io/argyleink/pen/ExNLwbR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/image-captions-color-hints/src/index.html b/image-captions-color-hints/src/index.html
new file mode 100644
index 0000000..8f9fdc2
--- /dev/null
+++ b/image-captions-color-hints/src/index.html
@@ -0,0 +1,44 @@
+<script src="https://gist.github.com/argyleink/68bd0e7c4419bf7ba8a25424b8f08380.js"></script>
+
+<figure class="mural-card">
+  <picture>
+    <img src="https://assets.codepen.io/2585/Yamagata-Mural.jpg" alt="yamagata mural" loading="lazy" intrinsicsize>
+  </picture>
+  <figcaption>
+    <h3>
+      Improve contrast legibility
+      <small><u>with</u> a custom <b>color hint</b></small>
+    </h3>
+    <p>
+      Yamagata
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-location-pin">
+        <path d="M5.64 16.36a9 9 0 1 1 12.72 0l-5.65 5.66a1 1 0 0 1-1.42 0l-5.65-5.66zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+        <path d="M12 1a9 9 0 0 1 6.36 15.36l-5.65 5.66a1 1 0 0 1-.71.3V13a3 3 0 0 0 0-6V1z"/>
+      </svg>
+    </p>
+  </figcaption>
+  
+  <div class="demo">
+    <small>Adjust the hint</small>
+    <input id="slider-hint" value="75" type="range" min="0" max="100">
+  </div>
+</figure>
+
+<figure class="mural-card fixed">
+  <picture>
+    <img src="https://assets.codepen.io/2585/Yamagata-Mural.jpg" alt="yamagata mural" loading="lazy" intrinsicsize>
+  </picture>
+  <figcaption>
+    <h3>
+      Less contrast legibility
+      <small><u>no color hint</u>, <b>same gradient</b></small>
+    </h3>
+    <p>
+      Yamagata
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-location-pin">
+        <path d="M5.64 16.36a9 9 0 1 1 12.72 0l-5.65 5.66a1 1 0 0 1-1.42 0l-5.65-5.66zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+        <path d="M12 1a9 9 0 0 1 6.36 15.36l-5.65 5.66a1 1 0 0 1-.71.3V13a3 3 0 0 0 0-6V1z"/>
+      </svg>
+    </p>
+  </figcaption>
+</figure>
\ No newline at end of file
diff --git a/image-captions-color-hints/src/script.babel b/image-captions-color-hints/src/script.babel
new file mode 100644
index 0000000..35c0dc9
--- /dev/null
+++ b/image-captions-color-hints/src/script.babel
@@ -0,0 +1,9 @@
+document
+  .querySelectorAll('input')
+  .forEach(input => {
+    input.addEventListener('input', e =>
+      document.body.style.setProperty(
+        '--'+e.target.id, 
+        e.target.value + '%'
+      ))
+  })
\ No newline at end of file
diff --git a/image-captions-color-hints/src/style.css b/image-captions-color-hints/src/style.css
new file mode 100644
index 0000000..7bc436e
--- /dev/null
+++ b/image-captions-color-hints/src/style.css
@@ -0,0 +1,115 @@
+@use postcss-preset-env {
+  stage: 0;
+}
+
+/* layout */
+.mural-card {
+  display: grid;
+  align-items: flex-end;
+
+  & > * {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  & :matches(picture, img) {
+    width: 100%;
+    height: 100%;
+  }
+
+  & > figcaption {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: flex-end;
+    gap: 1rem;
+
+    & > h3 {
+      display: grid;
+      gap: .25rem;
+    }
+
+    & > p {
+      grid-column: 2;
+      justify-self: flex-end;
+      width: max-content;
+
+      display: inline-grid;
+      gap: .5rem;
+      grid-auto-flow: column;
+      align-items: flex-end;
+    }
+  }
+}
+
+/* paint */
+.mural-card {
+  margin: 0;
+  border-radius: 1rem;
+  overflow: hidden;
+  position: relative;
+
+  & > figcaption {
+    padding-inline: 2rem;
+    padding-block: 4rem 1.5rem;
+    color: white;
+    background: linear-gradient(to top, 
+      hsla(0 0% 0% / 90%), 
+      var(--slider-hint, 75%), 
+      hsla(0 0% 0% / 0)
+    );
+
+    @media (width < 480px) {
+      padding-inline: 1rem;
+      padding-block-end: 1rem;
+    }
+
+    & > h3 > small {
+      font-weight: normal;
+    }
+
+    & > :matches(h3,p) {
+      margin: 0;
+    }
+
+    & > p {
+      font-size: 1.4rem;
+      line-height: 1.1;
+
+      & > svg {
+        fill: white;
+        height: 2rem;
+      }
+    }
+  }
+  
+  &.fixed > figcaption {
+    background: linear-gradient(to top, 
+      hsla(0 0% 0% / 90%), 
+      hsla(0 0% 0% / 0)
+    );
+  }
+}
+
+.demo {
+  position: absolute;
+  top: 1rem;
+  left: 0;
+  margin-inline: auto;
+  background: hsl(0 0% 97%);
+  width: fit-content;
+  padding: .5rem 1rem;
+  border-radius: 0 2rem 2rem 0;
+  display: flex;
+  gap: .25rem;
+  flex-direction: column;
+  box-shadow: 0 2px 5px hsl(0 0% 0% / 40%);
+}
+
+body {
+  display: grid;
+  place-items: center;
+  min-height: 100vh;
+  padding: 5vmin;
+  gap: 25vmin;
+  background: hsl(0 0% 97%);
+}
\ No newline at end of file
diff --git a/image-to-lcd/README.markdown b/image-to-lcd/README.markdown
new file mode 100644
index 0000000..ce05760
--- /dev/null
+++ b/image-to-lcd/README.markdown
@@ -0,0 +1,5 @@
+# Image to LCD 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jkantner/pen/JjbJWGo](https://codepen.io/jkantner/pen/JjbJWGo).
+
+Upload an image to see it rendered on a small LCD screen. Then zoom in to see the red, green, and blue of every pixel!
diff --git a/image-to-lcd/dist/index.html b/image-to-lcd/dist/index.html
new file mode 100644
index 0000000..fbffd47
--- /dev/null
+++ b/image-to-lcd/dist/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Image to LCD </title>
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Hind:wght@400;700&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input type="checkbox" id="toggle" name="toggle" value="Toggle Image Panel" checked>
+<aside>
+	<label class="toggle-btn" for="toggle">
+		<span class="sr">Toggle Image Panel</span>
+	</label>
+	<form action="">
+		<label for="img_upload">Image</label>
+		<div class="upload-btn">
+			<input id="img_upload" name="img_upload" type="file" accept="image/*">
+			<button type="button" for="img_upload" tabindex="-1">Upload</button>
+			<input id="img_name" name="img_name" type="text" placeholder="No file selected" disabled>
+		</div>
+		<button name="reset_camera" type="button">Reset Camera</button>
+	</form>
+</aside>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.min.js'></script>
+<script src='https://rawgit.com/mrdoob/three.js/r125/examples/js/utils/BufferGeometryUtils.js'></script>
+<script src='https://codepen.io/jkantner/pen/abBdPYe.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/image-to-lcd/dist/script.js b/image-to-lcd/dist/script.js
new file mode 100644
index 0000000..4bd756d
--- /dev/null
+++ b/image-to-lcd/dist/script.js
@@ -0,0 +1,205 @@
+window.addEventListener("DOMContentLoaded",app);
+
+function app() {
+	let form = document.forms[0],
+		imgUpload = document.getElementsByName("img_upload")[0],
+		imgName = document.getElementsByName("img_name")[0],
+		resetCamBtn = document.getElementsByName("reset_camera")[0],
+		canvas = document.createElement("canvas"),
+		c = canvas.getContext("2d"),
+		scene,
+		renderer,
+		camera,
+		camControls,
+		img = null,
+		screenLCD,
+		// be careful; attempting to increase these will result in lag
+		tvWidth = 40,
+		tvHeight = 30,
+
+		adjustWindow = () => {
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
+			renderer.setSize(window.innerWidth,window.innerHeight);
+		},
+		buildScreen = () => {
+			return new Promise((resolve,reject) => {
+				let channelProtoGeo = new THREE.PlaneBufferGeometry(0.3,0.9),
+				channelGeos = [],
+				channelMats = [],
+				redChannelProtoMat = new THREE.MeshBasicMaterial({
+					color: 0xff0000
+				}),
+				greenChannelProtoMat = new THREE.MeshBasicMaterial({
+					color: 0x00ff00
+				}),
+				blueChannelProtoMat = new THREE.MeshBasicMaterial({
+					color: 0x0000ff
+				});
+
+				for (let h = 0; h < tvHeight; ++h) {
+					for (let w = 0; w < tvWidth; ++w) {
+						let channelY = (-tvHeight / 2 + h) * -1,
+							redChannelGeo = channelProtoGeo.clone(),
+							redChannelMat = redChannelProtoMat.clone(),
+							greenChannelGeo = channelProtoGeo.clone(),
+							greenChannelMat = greenChannelProtoMat.clone(),
+							blueChannelGeo = channelProtoGeo.clone(),
+							blueChannelMat = blueChannelProtoMat.clone();
+
+						redChannelGeo.translate(-tvWidth / 2 - 0.33 + w,channelY,0);
+						greenChannelGeo.translate(-tvWidth / 2 + w,channelY,0);
+						blueChannelGeo.translate(-tvWidth / 2 + 0.33 + w,channelY,0);
+						channelGeos.push(redChannelGeo,greenChannelGeo,blueChannelGeo);
+						channelMats.push(redChannelMat,greenChannelMat,blueChannelMat);
+					}
+				}
+				let channelGeo = THREE.BufferGeometryUtils.mergeBufferGeometries(channelGeos,true);
+				screenLCD = new THREE.Mesh(channelGeo,channelMats);
+				screenLCD.name = "LCD Screen";
+				scene.add(screenLCD);
+
+				// initialize canvas and screen
+				canvas.width = tvWidth;
+				canvas.height = tvHeight;
+				c.fillStyle = "#fff";
+				c.fillRect(0,0,tvWidth,tvHeight);
+
+				resolve();
+
+			}).then(() => {
+				// deal with preserved input or go ahead with the white screen
+				if (imgUpload.value != "")
+					renderPromise();
+				else
+					updateScreen();
+			});
+		},
+		handleImgUpload = e => {
+			return new Promise((resolve,reject) => {
+				let target = !e ? imgUpload : e.target;
+				if (target.files.length) {
+					let reader = new FileReader();
+					reader.onload = e2 => {
+						img = new Image();
+						img.src = e2.target.result;
+						img.onload = () => {
+							resolve();
+						};
+						img.onerror = () => {
+							img = null;
+							reject("The image has been nullified due to file corruption or a wrong file kind.");
+						};
+						imgName.placeholder = target.files[0].name;
+					};
+					reader.readAsDataURL(target.files[0]);
+				}
+			});
+		},
+		imgUploadValid = () => {
+			let files = imgUpload.files,
+				fileIsThere = files.length > 0,
+				isImage = files[0].type.match("image.*"),
+				valid = fileIsThere && isImage;
+
+			return valid;
+		},
+		init = () => {
+			// setup
+			scene = new THREE.Scene();
+			renderer = new THREE.WebGLRenderer({
+				antialias: true
+			});
+			renderer.setClearColor(new THREE.Color(0x000000));
+			renderer.setPixelRatio(window.devicePixelRatio);
+			renderer.setSize(window.innerWidth, window.innerHeight);
+
+			// camera
+			camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,0.1,1000);
+			camera.position.set(0,0,70);
+			camera.lookAt(scene.position);
+			camControls = new THREE.OrbitControls(camera,renderer.domElement);
+			camControls.minDistance = 4;
+			camControls.maxDistance = 128;
+			camControls.minPolarAngle = -Math.PI / 2;
+			camControls.maxPolarAngle = Math.PI;
+			camControls.minAzimuthAngle = -Math.PI / 2;
+			camControls.maxAzimuthAngle = Math.PI / 2;
+
+			// render
+			let body = document.body;
+			body.insertBefore(renderer.domElement,body.childNodes[4]);
+			renderScene();
+			
+			// LCD screen
+			buildScreen();
+		},
+		renderPromise = e => {
+			handleImgUpload(e).then(() => {
+				if (imgUploadValid()) {
+					updateCanvas();
+					updateScreen();
+				}
+			}).catch(msg => {
+				console.log(msg);
+			});
+		},
+		renderScene = () => {
+			renderer.render(scene,camera);
+			requestAnimationFrame(renderScene);
+		},
+		updateCanvas = () => {
+			// restrict image size, keep it proportional
+			let imgWidth = img.width,
+				imgHeight = img.height;
+
+			if (imgWidth > imgHeight && imgWidth >= tvWidth) {
+				// overflow left and right
+				imgWidth = tvWidth;
+				imgHeight = imgWidth * (img.height / img.width);
+
+			} else if (imgWidth <= imgHeight && imgHeight >= tvHeight) {
+				// overflow top and bottom
+				imgHeight = tvHeight;
+				imgWidth = imgHeight * (img.width / img.height);
+			}
+			// update canvas with image in center
+			let imgX = tvWidth / 2 - imgWidth / 2,
+				imgY = tvHeight / 2 - imgHeight / 2;
+
+			c.clearRect(0,0,tvWidth,tvHeight);
+			c.drawImage(img,imgX,imgY,imgWidth,imgHeight);
+		},
+		updateScreen = () => {
+			let imgData = c.getImageData(0,0,tvWidth,tvHeight),
+				data = imgData.data;
+
+			for (let i = 0; i < data.length; i += 4) {
+				let red = data[i],
+					green = data[i + 1],
+					blue = data[i + 2],
+					alpha = data[i + 3] / 255,
+					matIndex = i / 4 * 3,
+					redMat = screenLCD.material[matIndex],
+					greenMat = screenLCD.material[matIndex + 1],
+					blueMat = screenLCD.material[matIndex + 2];
+				// red
+				redMat.color.set(`rgb(${red},0,0)`);
+				redMat.opacity = alpha;
+				redMat.needsUpdate = true;
+				// green
+				greenMat.color.set(`rgb(0,${green},0)`);
+				greenMat.opacity = alpha;
+				greenMat.needsUpdate = true;
+				// blue
+				blueMat.color.set(`rgb(0,0,${blue})`);
+				blueMat.opacity = alpha;
+				blueMat.needsUpdate = true;
+			}
+		};
+
+	init();
+	imgUpload.addEventListener("change",renderPromise);
+	resetCamBtn.addEventListener("click",camControls.reset);
+	window.addEventListener("resize",adjustWindow);
+}
\ No newline at end of file
diff --git a/image-to-lcd/dist/style.css b/image-to-lcd/dist/style.css
new file mode 100644
index 0000000..c31f4d2
--- /dev/null
+++ b/image-to-lcd/dist/style.css
@@ -0,0 +1,150 @@
+* {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+:root {
+	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
+	--buttonBg: #2762f3;
+	--buttonHoverBg: #0c48db;
+	--formBg: #fff;
+	--inputBorder: #abafba;
+	--inputBg: #fff;
+	--inputDisableBg: #e3e4e8;
+	--pColor: #17181c;
+	--toggleBg: #e3e4e8;
+	--toggleBgHover: #c7cad1;
+}
+body, button, input {
+	color: var(--pColor);
+	font: 1em/1.5 "Hind", system-ui, -apple-system, sans-serif;
+}
+body {
+	overflow: hidden;
+}
+aside, button, input, .upload-btn input[type=file] {
+	width: 100%;
+}
+aside, input[name=toggle] {
+	position: fixed;
+	left: 0;
+}
+aside {
+	background: var(--formBg);
+	bottom: 0;
+	transform: translateY(calc(100% - 1.5em));
+	transition: transform 0.2s ease-in;
+}
+form {
+	padding: 1.5em 1.5em 0 1.5em;
+}
+button, input {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+button, input[type=file], .toggle-btn {
+	cursor: pointer;
+}
+button:hover, button:focus, input[type=file]:hover + button, input[type=file]:focus + button {
+	background: var(--buttonHoverBg);
+}
+button {
+	background: var(--buttonBg);
+	border-radius: 0.375em;
+	color: #fff;
+	display: block;
+	margin-bottom: 1.5em;
+	padding: 0.75em 1em;
+	transition: background 0.1s linear;
+}
+input, label, .toggle-btn:before {
+	display: block;
+}
+input, input[type=file] + button, .upload-btn {
+	margin-bottom: 0.75em;
+}
+input {
+	background: var(--inputBg);
+	border-radius: 0.25em;
+	box-shadow: 0 0 0 1px var(--inputBorder) inset;
+	padding: 0.375em;
+}
+input:disabled {
+	background: var(--inputDisableBg);
+	cursor: not-allowed;
+	text-overflow: ellipsis;
+}
+input[name=toggle] {
+	top: -1.5em;
+}
+input[name=toggle]:checked + aside {
+	transform: translateY(0);
+}
+label {
+	font-weight: bold;
+}
+canvas {
+	cursor: move;
+}
+.toggle-btn, .upload-btn {
+	position: relative;
+}
+.toggle-btn:before, .upload-btn input[type=file] {
+	position: absolute;
+}
+.toggle-btn {
+	background: var(--toggleBg);
+	text-align: center;
+}
+.toggle-btn:before {
+	content: "";
+	top: 33%;
+	left: calc(50% - 0.5em);
+	width: 0; 
+	height: 0; 
+	border-left: 0.5em solid transparent;
+	border-right: 0.5em solid transparent;
+	border-bottom: 0.5em solid;
+}
+input[name=toggle]:checked + aside .toggle-btn:before {
+	border-top: 0.5em solid;
+	border-bottom: 0;
+}
+.toggle-btn:hover, input[name=toggle]:focus + aside .toggle-btn {
+	background: var(--toggleBgHover);
+}
+.upload-btn, .sr {
+	overflow: hidden;
+}
+.upload-btn input[type=file] {
+	padding-top: 2.5em;
+	opacity: 0;
+	top: 0;
+	left: 0;
+	height: 3em;
+}
+.sr {
+	display: inline-block;
+	width: 1px;
+	height: 1px;
+}
+
+/* Queries */
+@media screen and (min-width: 768px) {
+	aside {
+		width: 20em;
+	}
+}
+@media (prefers-color-scheme: dark) {
+	:root {
+		--formBg: #3a3d46;
+		--inputBg: #2e3138;
+		--inputDisableBg: #2e3138;
+		--inputBorder: #2e3138;
+		--pColor: #e3e4e8;
+		--toggleBg: #17181c;
+		--toggleBgHover: #0c0c0e
+	}
+}
\ No newline at end of file
diff --git a/image-to-lcd/license.txt b/image-to-lcd/license.txt
new file mode 100644
index 0000000..6625f93
--- /dev/null
+++ b/image-to-lcd/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Jon Kantner (https://codepen.io/jkantner/pen/JjbJWGo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/image-to-lcd/src/index.html b/image-to-lcd/src/index.html
new file mode 100644
index 0000000..aa6ed78
--- /dev/null
+++ b/image-to-lcd/src/index.html
@@ -0,0 +1,15 @@
+<input type="checkbox" id="toggle" name="toggle" value="Toggle Image Panel" checked>
+<aside>
+	<label class="toggle-btn" for="toggle">
+		<span class="sr">Toggle Image Panel</span>
+	</label>
+	<form action="">
+		<label for="img_upload">Image</label>
+		<div class="upload-btn">
+			<input id="img_upload" name="img_upload" type="file" accept="image/*">
+			<button type="button" for="img_upload" tabindex="-1">Upload</button>
+			<input id="img_name" name="img_name" type="text" placeholder="No file selected" disabled>
+		</div>
+		<button name="reset_camera" type="button">Reset Camera</button>
+	</form>
+</aside>
\ No newline at end of file
diff --git a/image-to-lcd/src/script.js b/image-to-lcd/src/script.js
new file mode 100644
index 0000000..4bd756d
--- /dev/null
+++ b/image-to-lcd/src/script.js
@@ -0,0 +1,205 @@
+window.addEventListener("DOMContentLoaded",app);
+
+function app() {
+	let form = document.forms[0],
+		imgUpload = document.getElementsByName("img_upload")[0],
+		imgName = document.getElementsByName("img_name")[0],
+		resetCamBtn = document.getElementsByName("reset_camera")[0],
+		canvas = document.createElement("canvas"),
+		c = canvas.getContext("2d"),
+		scene,
+		renderer,
+		camera,
+		camControls,
+		img = null,
+		screenLCD,
+		// be careful; attempting to increase these will result in lag
+		tvWidth = 40,
+		tvHeight = 30,
+
+		adjustWindow = () => {
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
+			renderer.setSize(window.innerWidth,window.innerHeight);
+		},
+		buildScreen = () => {
+			return new Promise((resolve,reject) => {
+				let channelProtoGeo = new THREE.PlaneBufferGeometry(0.3,0.9),
+				channelGeos = [],
+				channelMats = [],
+				redChannelProtoMat = new THREE.MeshBasicMaterial({
+					color: 0xff0000
+				}),
+				greenChannelProtoMat = new THREE.MeshBasicMaterial({
+					color: 0x00ff00
+				}),
+				blueChannelProtoMat = new THREE.MeshBasicMaterial({
+					color: 0x0000ff
+				});
+
+				for (let h = 0; h < tvHeight; ++h) {
+					for (let w = 0; w < tvWidth; ++w) {
+						let channelY = (-tvHeight / 2 + h) * -1,
+							redChannelGeo = channelProtoGeo.clone(),
+							redChannelMat = redChannelProtoMat.clone(),
+							greenChannelGeo = channelProtoGeo.clone(),
+							greenChannelMat = greenChannelProtoMat.clone(),
+							blueChannelGeo = channelProtoGeo.clone(),
+							blueChannelMat = blueChannelProtoMat.clone();
+
+						redChannelGeo.translate(-tvWidth / 2 - 0.33 + w,channelY,0);
+						greenChannelGeo.translate(-tvWidth / 2 + w,channelY,0);
+						blueChannelGeo.translate(-tvWidth / 2 + 0.33 + w,channelY,0);
+						channelGeos.push(redChannelGeo,greenChannelGeo,blueChannelGeo);
+						channelMats.push(redChannelMat,greenChannelMat,blueChannelMat);
+					}
+				}
+				let channelGeo = THREE.BufferGeometryUtils.mergeBufferGeometries(channelGeos,true);
+				screenLCD = new THREE.Mesh(channelGeo,channelMats);
+				screenLCD.name = "LCD Screen";
+				scene.add(screenLCD);
+
+				// initialize canvas and screen
+				canvas.width = tvWidth;
+				canvas.height = tvHeight;
+				c.fillStyle = "#fff";
+				c.fillRect(0,0,tvWidth,tvHeight);
+
+				resolve();
+
+			}).then(() => {
+				// deal with preserved input or go ahead with the white screen
+				if (imgUpload.value != "")
+					renderPromise();
+				else
+					updateScreen();
+			});
+		},
+		handleImgUpload = e => {
+			return new Promise((resolve,reject) => {
+				let target = !e ? imgUpload : e.target;
+				if (target.files.length) {
+					let reader = new FileReader();
+					reader.onload = e2 => {
+						img = new Image();
+						img.src = e2.target.result;
+						img.onload = () => {
+							resolve();
+						};
+						img.onerror = () => {
+							img = null;
+							reject("The image has been nullified due to file corruption or a wrong file kind.");
+						};
+						imgName.placeholder = target.files[0].name;
+					};
+					reader.readAsDataURL(target.files[0]);
+				}
+			});
+		},
+		imgUploadValid = () => {
+			let files = imgUpload.files,
+				fileIsThere = files.length > 0,
+				isImage = files[0].type.match("image.*"),
+				valid = fileIsThere && isImage;
+
+			return valid;
+		},
+		init = () => {
+			// setup
+			scene = new THREE.Scene();
+			renderer = new THREE.WebGLRenderer({
+				antialias: true
+			});
+			renderer.setClearColor(new THREE.Color(0x000000));
+			renderer.setPixelRatio(window.devicePixelRatio);
+			renderer.setSize(window.innerWidth, window.innerHeight);
+
+			// camera
+			camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,0.1,1000);
+			camera.position.set(0,0,70);
+			camera.lookAt(scene.position);
+			camControls = new THREE.OrbitControls(camera,renderer.domElement);
+			camControls.minDistance = 4;
+			camControls.maxDistance = 128;
+			camControls.minPolarAngle = -Math.PI / 2;
+			camControls.maxPolarAngle = Math.PI;
+			camControls.minAzimuthAngle = -Math.PI / 2;
+			camControls.maxAzimuthAngle = Math.PI / 2;
+
+			// render
+			let body = document.body;
+			body.insertBefore(renderer.domElement,body.childNodes[4]);
+			renderScene();
+			
+			// LCD screen
+			buildScreen();
+		},
+		renderPromise = e => {
+			handleImgUpload(e).then(() => {
+				if (imgUploadValid()) {
+					updateCanvas();
+					updateScreen();
+				}
+			}).catch(msg => {
+				console.log(msg);
+			});
+		},
+		renderScene = () => {
+			renderer.render(scene,camera);
+			requestAnimationFrame(renderScene);
+		},
+		updateCanvas = () => {
+			// restrict image size, keep it proportional
+			let imgWidth = img.width,
+				imgHeight = img.height;
+
+			if (imgWidth > imgHeight && imgWidth >= tvWidth) {
+				// overflow left and right
+				imgWidth = tvWidth;
+				imgHeight = imgWidth * (img.height / img.width);
+
+			} else if (imgWidth <= imgHeight && imgHeight >= tvHeight) {
+				// overflow top and bottom
+				imgHeight = tvHeight;
+				imgWidth = imgHeight * (img.width / img.height);
+			}
+			// update canvas with image in center
+			let imgX = tvWidth / 2 - imgWidth / 2,
+				imgY = tvHeight / 2 - imgHeight / 2;
+
+			c.clearRect(0,0,tvWidth,tvHeight);
+			c.drawImage(img,imgX,imgY,imgWidth,imgHeight);
+		},
+		updateScreen = () => {
+			let imgData = c.getImageData(0,0,tvWidth,tvHeight),
+				data = imgData.data;
+
+			for (let i = 0; i < data.length; i += 4) {
+				let red = data[i],
+					green = data[i + 1],
+					blue = data[i + 2],
+					alpha = data[i + 3] / 255,
+					matIndex = i / 4 * 3,
+					redMat = screenLCD.material[matIndex],
+					greenMat = screenLCD.material[matIndex + 1],
+					blueMat = screenLCD.material[matIndex + 2];
+				// red
+				redMat.color.set(`rgb(${red},0,0)`);
+				redMat.opacity = alpha;
+				redMat.needsUpdate = true;
+				// green
+				greenMat.color.set(`rgb(0,${green},0)`);
+				greenMat.opacity = alpha;
+				greenMat.needsUpdate = true;
+				// blue
+				blueMat.color.set(`rgb(0,0,${blue})`);
+				blueMat.opacity = alpha;
+				blueMat.needsUpdate = true;
+			}
+		};
+
+	init();
+	imgUpload.addEventListener("change",renderPromise);
+	resetCamBtn.addEventListener("click",camControls.reset);
+	window.addEventListener("resize",adjustWindow);
+}
\ No newline at end of file
diff --git a/image-to-lcd/src/style.css b/image-to-lcd/src/style.css
new file mode 100644
index 0000000..c31f4d2
--- /dev/null
+++ b/image-to-lcd/src/style.css
@@ -0,0 +1,150 @@
+* {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+:root {
+	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
+	--buttonBg: #2762f3;
+	--buttonHoverBg: #0c48db;
+	--formBg: #fff;
+	--inputBorder: #abafba;
+	--inputBg: #fff;
+	--inputDisableBg: #e3e4e8;
+	--pColor: #17181c;
+	--toggleBg: #e3e4e8;
+	--toggleBgHover: #c7cad1;
+}
+body, button, input {
+	color: var(--pColor);
+	font: 1em/1.5 "Hind", system-ui, -apple-system, sans-serif;
+}
+body {
+	overflow: hidden;
+}
+aside, button, input, .upload-btn input[type=file] {
+	width: 100%;
+}
+aside, input[name=toggle] {
+	position: fixed;
+	left: 0;
+}
+aside {
+	background: var(--formBg);
+	bottom: 0;
+	transform: translateY(calc(100% - 1.5em));
+	transition: transform 0.2s ease-in;
+}
+form {
+	padding: 1.5em 1.5em 0 1.5em;
+}
+button, input {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+button, input[type=file], .toggle-btn {
+	cursor: pointer;
+}
+button:hover, button:focus, input[type=file]:hover + button, input[type=file]:focus + button {
+	background: var(--buttonHoverBg);
+}
+button {
+	background: var(--buttonBg);
+	border-radius: 0.375em;
+	color: #fff;
+	display: block;
+	margin-bottom: 1.5em;
+	padding: 0.75em 1em;
+	transition: background 0.1s linear;
+}
+input, label, .toggle-btn:before {
+	display: block;
+}
+input, input[type=file] + button, .upload-btn {
+	margin-bottom: 0.75em;
+}
+input {
+	background: var(--inputBg);
+	border-radius: 0.25em;
+	box-shadow: 0 0 0 1px var(--inputBorder) inset;
+	padding: 0.375em;
+}
+input:disabled {
+	background: var(--inputDisableBg);
+	cursor: not-allowed;
+	text-overflow: ellipsis;
+}
+input[name=toggle] {
+	top: -1.5em;
+}
+input[name=toggle]:checked + aside {
+	transform: translateY(0);
+}
+label {
+	font-weight: bold;
+}
+canvas {
+	cursor: move;
+}
+.toggle-btn, .upload-btn {
+	position: relative;
+}
+.toggle-btn:before, .upload-btn input[type=file] {
+	position: absolute;
+}
+.toggle-btn {
+	background: var(--toggleBg);
+	text-align: center;
+}
+.toggle-btn:before {
+	content: "";
+	top: 33%;
+	left: calc(50% - 0.5em);
+	width: 0; 
+	height: 0; 
+	border-left: 0.5em solid transparent;
+	border-right: 0.5em solid transparent;
+	border-bottom: 0.5em solid;
+}
+input[name=toggle]:checked + aside .toggle-btn:before {
+	border-top: 0.5em solid;
+	border-bottom: 0;
+}
+.toggle-btn:hover, input[name=toggle]:focus + aside .toggle-btn {
+	background: var(--toggleBgHover);
+}
+.upload-btn, .sr {
+	overflow: hidden;
+}
+.upload-btn input[type=file] {
+	padding-top: 2.5em;
+	opacity: 0;
+	top: 0;
+	left: 0;
+	height: 3em;
+}
+.sr {
+	display: inline-block;
+	width: 1px;
+	height: 1px;
+}
+
+/* Queries */
+@media screen and (min-width: 768px) {
+	aside {
+		width: 20em;
+	}
+}
+@media (prefers-color-scheme: dark) {
+	:root {
+		--formBg: #3a3d46;
+		--inputBg: #2e3138;
+		--inputDisableBg: #2e3138;
+		--inputBorder: #2e3138;
+		--pColor: #e3e4e8;
+		--toggleBg: #17181c;
+		--toggleBgHover: #0c0c0e
+	}
+}
\ No newline at end of file
diff --git a/impossible-checkbox-v2/README.markdown b/impossible-checkbox-v2/README.markdown
new file mode 100644
index 0000000..f0538a2
--- /dev/null
+++ b/impossible-checkbox-v2/README.markdown
@@ -0,0 +1,5 @@
+# Impossible Checkbox v2 🐻
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jh3y/pen/LYNZwGm](https://codepen.io/jh3y/pen/LYNZwGm).
+
+Revisiting one of my favorite pens to update the React side of it and add sound 
diff --git a/impossible-checkbox-v2/dist/index.html b/impossible-checkbox-v2/dist/index.html
new file mode 100644
index 0000000..806eef6
--- /dev/null
+++ b/impossible-checkbox-v2/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Impossible Checkbox v2 🐻</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="app"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/impossible-checkbox-v2/dist/script.js b/impossible-checkbox-v2/dist/script.js
new file mode 100644
index 0000000..44c1425
--- /dev/null
+++ b/impossible-checkbox-v2/dist/script.js
@@ -0,0 +1,302 @@
+const {
+  React: { useState, useRef, useEffect, Fragment },
+  ReactDOM: { render },
+  gsap: {
+    set,
+    to,
+    timeline,
+    utils: { random } } } =
+
+window;
+const rootNode = document.getElementById('app');
+const armLimit = random(0, 3);
+const headLimit = random(armLimit + 1, armLimit + 3);
+const angerLimit = random(headLimit + 1, headLimit + 3);
+const armDuration = 0.2;
+const bearDuration = 0.25;
+const checkboxDuration = 0.25;
+const pawDuration = 0.1;
+
+const SOUNDS = {
+  ON: new Audio('https://assets.codepen.io/605876/switch-on.mp3'),
+  OFF: new Audio('https://assets.codepen.io/605876/switch-off.mp3'),
+  GROAN: new Audio('https://assets.codepen.io/605876/bear-groan.mp3') };
+
+SOUNDS.GROAN.playbackRate = 2;
+
+const App = () => {
+  const [checked, setChecked] = useState(false);
+  const [count, setCount] = useState(1);
+  const bearRef = useRef(null);
+  const swearRef = useRef(null);
+  const armWrapRef = useRef(null);
+  const pawRef = useRef(null);
+  const armRef = useRef(null);
+  const bgRef = useRef(null);
+  const indicatorRef = useRef(null);
+
+  const onHover = () => {
+    if (Math.random() > 0.5 && count > armLimit) {
+      to(bearRef.current, bearDuration / 2, { y: '40%' });
+    }
+  };
+  const offHover = () => {
+    if (!checked) {
+      to(bearRef.current, bearDuration / 2, { y: '100%' });
+    }
+  };
+  const onChange = () => {
+    if (checked) return;
+    setChecked(true);
+  };
+
+  useEffect(() => {
+    const grabBearTL = () => {
+      /**
+                               * Different height translations for the bear elements
+                               *
+                               * Paw will go to scaleX 0.8
+                               * Arm scaleX goes down to 0.7
+                               * Arm wrap translates to 50% or 50px
+                               * Bear goes 100% -> 40% -> 0
+                               */
+      let bearTranslation;
+      if (count > armLimit && count < headLimit) {
+        bearTranslation = '40%';
+      } else if (count >= headLimit) {
+        bearTranslation = '0%';
+      }
+      const onComplete = () => {
+        setChecked(false);
+        setCount(count + 1);
+      };
+      let onBearComplete = () => {};
+      if (Math.random() > 0.5 && count > angerLimit)
+      onBearComplete = () => {
+        SOUNDS.GROAN.play();
+        set(swearRef.current, { display: 'block' });
+      };
+      const base = armDuration + armDuration + pawDuration;
+      const preDelay = Math.random();
+      const delay = count > armLimit ? base + bearDuration + preDelay : base;
+      const bearTL = timeline({ delay: Math.random(), onComplete });
+      bearTL.
+      add(
+      count > armLimit ?
+      to(bearRef.current, {
+        duration: bearDuration,
+        onComplete: onBearComplete,
+        y: bearTranslation }) :
+
+      () => {}).
+
+      to(
+      armWrapRef.current,
+      { x: 50, duration: armDuration },
+      count > armLimit ? preDelay : 0).
+
+      to(armRef.current, { scaleX: 0.7, duration: armDuration }).
+      to(pawRef.current, {
+        duration: pawDuration,
+        scaleX: 0.8,
+        onComplete: () => set(swearRef.current, { display: 'none' }) }).
+
+      to(
+      bgRef.current,
+      {
+        onStart: () => {
+          SOUNDS.OFF.play();
+        },
+        duration: checkboxDuration,
+        backgroundColor: '#aaa' },
+
+      delay).
+
+      to(
+      indicatorRef.current,
+      { duration: checkboxDuration, x: '0%' },
+      delay).
+
+      to(pawRef.current, { duration: pawDuration, scaleX: 0 }, delay).
+      to(
+      armRef.current,
+      { duration: pawDuration, scaleX: 1 },
+      delay + pawDuration).
+
+      to(
+      armWrapRef.current,
+      { duration: armDuration, x: 0 },
+      delay + pawDuration).
+
+      to(
+      bearRef.current,
+      { duration: bearDuration, y: '100%' },
+      delay + pawDuration);
+
+      return bearTL;
+    };
+    const showTimeline = () => {
+      timeline({
+        onStart: () => SOUNDS.ON.play() }).
+
+      to(
+      bgRef.current,
+      { duration: checkboxDuration, backgroundColor: '#2eec71' },
+      0).
+
+      to(indicatorRef.current, { duration: checkboxDuration, x: '100%' }, 0).
+      add(grabBearTL(), checkboxDuration);
+    };
+    if (checked) showTimeline();
+  }, [checked, count]);
+
+  return (
+    React.createElement(Fragment, null,
+    React.createElement("div", { className: "bear__wrap" },
+    React.createElement("div", { ref: swearRef, className: "bear__swear" }, "#@$%*!"),
+
+
+    React.createElement("svg", {
+      ref: bearRef,
+      className: "bear",
+      viewBox: "0 0 284.94574 359.73706",
+      preserveAspectRatio: "xMinYMin" },
+    React.createElement("g", { id: "layer1", transform: "translate(-7.5271369,-761.38595)" },
+    React.createElement("g", {
+      id: "g5691",
+      transform: "matrix(1.2335313,0,0,1.2335313,-35.029693,-212.83637)" },
+    React.createElement("path", {
+      id: "path4372",
+      d: "M 263.90933,1081.4151 A 113.96792,96.862576 0 0 0 149.99132,985.71456 113.96792,96.862576 0 0 0 36.090664,1081.4151 l 227.818666,0 z",
+      style: { fill: '#784421', fillOpacity: 1 } }),
+
+    React.createElement("path", {
+      id: "path5634",
+      d: "m 250.42825,903.36218 c 2e-5,66.27108 -44.75411,114.99442 -102.42825,114.99442 -57.674143,0 -98.428271,-48.72334 -98.428251,-114.99442 4e-6,-66.27106 40.754125,-92.99437 98.428251,-92.99437 57.67413,0 102.42825,26.72331 102.42825,92.99437 z",
+      style: { fill: '#784421', fillOpacity: 1 } }),
+
+    React.createElement("path", {
+      id: "path5639",
+      d: "m 217,972.86218 c 2e-5,21.53911 -30.44462,42.00002 -68,42.00002 -37.55538,0 -66.000019,-20.46091 -66,-42.00002 0,-21.53911 28.44464,-36 66,-36 37.55536,0 68,14.46089 68,36 z",
+      style: { fill: '#e9c6af', illOpacity: 1 } }),
+
+    React.createElement("path", {
+      id: "path5636",
+      d: "m 181.5,944.36218 c 0,8.28427 -20.59974,26.5 -32.75,26.5 -12.15026,0 -34.75,-18.21573 -34.75,-26.5 0,-8.28427 22.59974,-13.5 34.75,-13.5 12.15026,0 32.75,5.21573 32.75,13.5 z",
+      style: { fill: '#000000', fillOpacity: 1 } }),
+
+    React.createElement("g", { id: "g5681" },
+    React.createElement("ellipse", {
+      style: { fill: '#784421', fillOpacity: 1 },
+      id: "path5657",
+      cx: "69",
+      cy: "823.07269",
+      rx: "34.5",
+      ry: "33.289474" }),
+
+    React.createElement("path", {
+      style: { fill: '#e9c6af', fillOpacity: 1 },
+      d: "M 69,47.310547 A 24.25,23.399124 0 0 0 44.75,70.710938 24.25,23.399124 0 0 0 64.720703,93.720703 c 0.276316,-0.40734 0.503874,-0.867778 0.787109,-1.267578 1.70087,-2.400855 3.527087,-4.666237 5.470704,-6.798828 1.943616,-2.132591 4.004963,-4.133318 6.179687,-6.003906 2.174725,-1.870589 4.461274,-3.611714 6.855469,-5.226563 2.394195,-1.614848 4.896019,-3.10338 7.498047,-4.46875 0.539935,-0.283322 1.133058,-0.500695 1.68164,-0.773437 A 24.25,23.399124 0 0 0 69,47.310547 Z",
+      id: "ellipse5659",
+      transform: "translate(0,752.36216)" })),
+
+
+    React.createElement("g", { transform: "matrix(-1,0,0,1,300,0)", id: "g5685" },
+    React.createElement("ellipse", {
+      ry: "33.289474",
+      rx: "34.5",
+      cy: "823.07269",
+      cx: "69",
+      id: "ellipse5687",
+      style: { fill: '#784421', illOpacity: 1 } }),
+
+    React.createElement("path", {
+      transform: "translate(0,752.36216)",
+      id: "path5689",
+      d: "M 69,47.310547 A 24.25,23.399124 0 0 0 44.75,70.710938 24.25,23.399124 0 0 0 64.720703,93.720703 c 0.276316,-0.40734 0.503874,-0.867778 0.787109,-1.267578 1.70087,-2.400855 3.527087,-4.666237 5.470704,-6.798828 1.943616,-2.132591 4.004963,-4.133318 6.179687,-6.003906 2.174725,-1.870589 4.461274,-3.611714 6.855469,-5.226563 2.394195,-1.614848 4.896019,-3.10338 7.498047,-4.46875 0.539935,-0.283322 1.133058,-0.500695 1.68164,-0.773437 A 24.25,23.399124 0 0 0 69,47.310547 Z",
+      style: { fill: '#e9c6af', fillOpacity: 1 } })),
+
+
+    React.createElement("ellipse", {
+      ry: "9.6790915",
+      rx: "9.2701159",
+      cy: "900.38916",
+      cx: "105.83063",
+      id: "path4368",
+      style: { fill: '#000000', fillOpacity: 1 } }),
+
+    React.createElement("ellipse", {
+      style: { fill: '#000000', fillOpacity: 1 },
+      id: "ellipse4370",
+      cx: "186.89894",
+      cy: "900.38916",
+      rx: "9.2701159",
+      ry: "9.6790915" }),
+
+    count >= angerLimit &&
+    React.createElement(Fragment, null,
+    React.createElement("path", {
+      id: "path4396",
+      d: "m 92.05833,865.4614 39.42665,22.76299",
+      style: {
+        stroke: '#000000',
+        strokeWidth: 4.86408424,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        strokeMiterlimit: 4,
+        strokeOpacity: 1 } }),
+
+
+    React.createElement("path", {
+      style: {
+        stroke: '#000000',
+        strokeWidth: 4.86408424,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        strokeMiterlimit: 4,
+        strokeOpacity: 1 },
+
+      d: "m 202.82482,865.4614 -39.42664,22.76299",
+      id: "path4400" })))))),
+
+
+
+
+
+
+
+    React.createElement("div", { ref: armWrapRef, className: "bear__arm-wrap" },
+    React.createElement("svg", {
+      ref: armRef,
+      className: "bear__arm",
+      viewBox: "0 0 250.00001 99.999997",
+      preserveAspectRatio: "xMinYMin" },
+    React.createElement("g", { transform: "translate(868.57141,-900.93359)", id: "layer1" },
+    React.createElement("path", {
+      style: { fill: '#784421', fillOpacity: 1 },
+      d: "m -619.43416,945.05124 c 4.18776,73.01076 -78.25474,53.24342 -150.21568,52.94118 -82.38711,-0.34602 -98.92158,-19.44459 -98.92157,-47.05883 0,-27.61424 4.78794,-42.54902 73.82353,-42.54902 69.03559,0 171.43607,-30.93764 175.31372,36.66667 z",
+      id: "path4971" }),
+
+    React.createElement("ellipse", {
+      style: { fill: '#e9c6af', fillOpacity: 1 },
+      id: "path4974",
+      cx: "-683.02264",
+      cy: "950.98572",
+      rx: "29.910826",
+      ry: "29.414362" })))),
+
+
+
+
+    React.createElement("div", { ref: pawRef, className: "bear__paw" }),
+    React.createElement("div", { className: "mask" }),
+    React.createElement("div", { className: "checkbox", onMouseOver: onHover, onMouseOut: offHover },
+    React.createElement("input", { type: "checkbox", onChange: onChange, checked: checked }),
+    React.createElement("div", { ref: bgRef, className: "checkbox__bg" }),
+    React.createElement("div", { ref: indicatorRef, className: "checkbox__indicator" }))));
+
+
+
+};
+
+render(React.createElement(App, null), rootNode);
\ No newline at end of file
diff --git a/impossible-checkbox-v2/dist/style.css b/impossible-checkbox-v2/dist/style.css
new file mode 100644
index 0000000..0c6aeee
--- /dev/null
+++ b/impossible-checkbox-v2/dist/style.css
@@ -0,0 +1,152 @@
+* {
+  box-sizing: border-box;
+  background: #947cb0;
+}
+body {
+  -webkit-box-align: center;
+          align-items: center;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  font-family: 'Arial', sans-serif;
+  min-height: 100vh;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+.mask {
+  position: fixed;
+  top: 50%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #947cb0;
+}
+.bear {
+  width: 100%;
+  background: transparent;
+  -webkit-transform: translate(0, 100%);
+          transform: translate(0, 100%);
+}
+.bear__swear {
+  display: none;
+  position: absolute;
+  left: 105%;
+  top: 0;
+  background: #fff;
+  font-weight: bolder;
+  padding: 10px;
+  border-radius: 8px;
+}
+.bear__swear:before {
+  content: '';
+  background: #fff;
+  position: absolute;
+  top: 90%;
+  right: 70%;
+  height: 30px;
+  width: 30px;
+  clip-path: polygon(0 100%, 100% 0, 50% 0);
+  -webkit-clip-path: polygon(0 100%, 100% 0, 50% 0);
+}
+.bear__wrap {
+  width: 100px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translate(-15%, -50%) rotate(5deg) translate(0, -75%);
+          transform: translate(-15%, -50%) rotate(5deg) translate(0, -75%);
+  background: transparent;
+}
+.bear__arm-wrap {
+  background: transparent;
+  position: fixed;
+  height: 30px;
+  width: 90px;
+  z-index: 4;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(0, -50%) rotate(0deg);
+          transform: translate(0, -50%) rotate(0deg);
+}
+.bear__arm {
+  background: transparent;
+  -webkit-transform-origin: left;
+          transform-origin: left;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-35%, -50%) scaleX(1);
+          transform: translate(-35%, -50%) scaleX(1);
+}
+.bear__paw {
+  background: #784421;
+  border-radius: 100%;
+  position: fixed;
+  height: 30px;
+  width: 30px;
+  z-index: 10;
+  top: 50%;
+  left: 50%;
+  -webkit-transform-origin: right;
+          transform-origin: right;
+  -webkit-transform: translate(80px, -15px) scaleX(0);
+          transform: translate(80px, -15px) scaleX(0);
+}
+.checkbox {
+  border-radius: 50px;
+  height: 100px;
+  position: fixed;
+  width: 200px;
+  z-index: 5;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.checkbox [type='checkbox'] {
+  cursor: pointer;
+  border-radius: 50px;
+  position: absolute;
+  outline: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 10;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+.checkbox__bg {
+  background: #aaa;
+  border-radius: 50px;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+}
+.checkbox__indicator {
+  background: transparent;
+  height: 100%;
+  width: 50%;
+  border-radius: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.checkbox__indicator:after {
+  content: '';
+  border-radius: 100%;
+  height: 85%;
+  width: 85%;
+  background: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
\ No newline at end of file
diff --git a/impossible-checkbox-v2/license.txt b/impossible-checkbox-v2/license.txt
new file mode 100644
index 0000000..084e0f2
--- /dev/null
+++ b/impossible-checkbox-v2/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Jhey (https://codepen.io/jh3y/pen/LYNZwGm)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/impossible-checkbox-v2/src/index.pug b/impossible-checkbox-v2/src/index.pug
new file mode 100644
index 0000000..4b9f0fe
--- /dev/null
+++ b/impossible-checkbox-v2/src/index.pug
@@ -0,0 +1 @@
+#app
\ No newline at end of file
diff --git a/impossible-checkbox-v2/src/script.babel b/impossible-checkbox-v2/src/script.babel
new file mode 100644
index 0000000..50cb5e3
--- /dev/null
+++ b/impossible-checkbox-v2/src/script.babel
@@ -0,0 +1,302 @@
+const {
+  React: { useState, useRef, useEffect, Fragment },
+  ReactDOM: { render },
+  gsap: {
+    set,
+    to,
+    timeline,
+    utils: { random },
+  },
+} = window
+const rootNode = document.getElementById('app')
+const armLimit = random(0, 3)
+const headLimit = random(armLimit + 1, armLimit + 3)
+const angerLimit = random(headLimit + 1, headLimit + 3)
+const armDuration = 0.2
+const bearDuration = 0.25
+const checkboxDuration = 0.25
+const pawDuration = 0.1
+
+const SOUNDS = {
+  ON: new Audio('https://assets.codepen.io/605876/switch-on.mp3'),
+  OFF: new Audio('https://assets.codepen.io/605876/switch-off.mp3'),
+  GROAN: new Audio('https://assets.codepen.io/605876/bear-groan.mp3'),
+}
+SOUNDS.GROAN.playbackRate = 2
+
+const App = () => {
+  const [checked, setChecked] = useState(false)
+  const [count, setCount] = useState(1)
+  const bearRef = useRef(null)
+  const swearRef = useRef(null)
+  const armWrapRef = useRef(null)
+  const pawRef = useRef(null)
+  const armRef = useRef(null)
+  const bgRef = useRef(null)
+  const indicatorRef = useRef(null)
+
+  const onHover = () => {
+    if (Math.random() > 0.5 && count > armLimit) {
+      to(bearRef.current, bearDuration / 2, { y: '40%' })
+    }
+  }
+  const offHover = () => {
+    if (!checked) {
+      to(bearRef.current, bearDuration / 2, { y: '100%' })
+    }
+  }
+  const onChange = () => {
+    if (checked) return
+    setChecked(true)
+  }
+
+  useEffect(() => {
+    const grabBearTL = () => {
+      /**
+       * Different height translations for the bear elements
+       *
+       * Paw will go to scaleX 0.8
+       * Arm scaleX goes down to 0.7
+       * Arm wrap translates to 50% or 50px
+       * Bear goes 100% -> 40% -> 0
+       */
+      let bearTranslation
+      if (count > armLimit && count < headLimit) {
+        bearTranslation = '40%'
+      } else if (count >= headLimit) {
+        bearTranslation = '0%'
+      }
+      const onComplete = () => {
+        setChecked(false)
+        setCount(count + 1)
+      }
+      let onBearComplete = () => {}
+      if (Math.random() > 0.5 && count > angerLimit)
+        onBearComplete = () => {
+          SOUNDS.GROAN.play()
+          set(swearRef.current, { display: 'block' })
+        }
+      const base = armDuration + armDuration + pawDuration
+      const preDelay = Math.random()
+      const delay = count > armLimit ? base + bearDuration + preDelay : base
+      const bearTL = timeline({ delay: Math.random(), onComplete })
+      bearTL
+        .add(
+          count > armLimit
+            ? to(bearRef.current, {
+                duration: bearDuration,
+                onComplete: onBearComplete,
+                y: bearTranslation,
+              })
+            : () => {}
+        )
+        .to(
+          armWrapRef.current,
+          { x: 50, duration: armDuration },
+          count > armLimit ? preDelay : 0
+        )
+        .to(armRef.current, { scaleX: 0.7, duration: armDuration })
+        .to(pawRef.current, {
+          duration: pawDuration,
+          scaleX: 0.8,
+          onComplete: () => set(swearRef.current, { display: 'none' }),
+        })
+        .to(
+          bgRef.current,
+          {
+            onStart: () => {
+              SOUNDS.OFF.play()
+            },
+            duration: checkboxDuration,
+            backgroundColor: '#aaa',
+          },
+          delay
+        )
+        .to(
+          indicatorRef.current,
+          { duration: checkboxDuration, x: '0%' },
+          delay
+        )
+        .to(pawRef.current, { duration: pawDuration, scaleX: 0 }, delay)
+        .to(
+          armRef.current,
+          { duration: pawDuration, scaleX: 1 },
+          delay + pawDuration
+        )
+        .to(
+          armWrapRef.current,
+          { duration: armDuration, x: 0 },
+          delay + pawDuration
+        )
+        .to(
+          bearRef.current,
+          { duration: bearDuration, y: '100%' },
+          delay + pawDuration
+        )
+      return bearTL
+    }
+    const showTimeline = () => {
+      timeline({
+        onStart: () => SOUNDS.ON.play(),
+      })
+        .to(
+          bgRef.current,
+          { duration: checkboxDuration, backgroundColor: '#2eec71' },
+          0
+        )
+        .to(indicatorRef.current, { duration: checkboxDuration, x: '100%' }, 0)
+        .add(grabBearTL(), checkboxDuration)
+    }
+    if (checked) showTimeline()
+  }, [checked, count])
+
+  return (
+    <Fragment>
+      <div className="bear__wrap">
+        <div ref={swearRef} className="bear__swear">
+          #@$%*!
+        </div>
+        <svg
+          ref={bearRef}
+          className="bear"
+          viewBox="0 0 284.94574 359.73706"
+          preserveAspectRatio="xMinYMin">
+          <g id="layer1" transform="translate(-7.5271369,-761.38595)">
+            <g
+              id="g5691"
+              transform="matrix(1.2335313,0,0,1.2335313,-35.029693,-212.83637)">
+              <path
+                id="path4372"
+                d="M 263.90933,1081.4151 A 113.96792,96.862576 0 0 0 149.99132,985.71456 113.96792,96.862576 0 0 0 36.090664,1081.4151 l 227.818666,0 z"
+                style={{ fill: '#784421', fillOpacity: 1 }}
+              />
+              <path
+                id="path5634"
+                d="m 250.42825,903.36218 c 2e-5,66.27108 -44.75411,114.99442 -102.42825,114.99442 -57.674143,0 -98.428271,-48.72334 -98.428251,-114.99442 4e-6,-66.27106 40.754125,-92.99437 98.428251,-92.99437 57.67413,0 102.42825,26.72331 102.42825,92.99437 z"
+                style={{ fill: '#784421', fillOpacity: 1 }}
+              />
+              <path
+                id="path5639"
+                d="m 217,972.86218 c 2e-5,21.53911 -30.44462,42.00002 -68,42.00002 -37.55538,0 -66.000019,-20.46091 -66,-42.00002 0,-21.53911 28.44464,-36 66,-36 37.55536,0 68,14.46089 68,36 z"
+                style={{ fill: '#e9c6af', illOpacity: 1 }}
+              />
+              <path
+                id="path5636"
+                d="m 181.5,944.36218 c 0,8.28427 -20.59974,26.5 -32.75,26.5 -12.15026,0 -34.75,-18.21573 -34.75,-26.5 0,-8.28427 22.59974,-13.5 34.75,-13.5 12.15026,0 32.75,5.21573 32.75,13.5 z"
+                style={{ fill: '#000000', fillOpacity: 1 }}
+              />
+              <g id="g5681">
+                <ellipse
+                  style={{ fill: '#784421', fillOpacity: 1 }}
+                  id="path5657"
+                  cx="69"
+                  cy="823.07269"
+                  rx="34.5"
+                  ry="33.289474"
+                />
+                <path
+                  style={{ fill: '#e9c6af', fillOpacity: 1 }}
+                  d="M 69,47.310547 A 24.25,23.399124 0 0 0 44.75,70.710938 24.25,23.399124 0 0 0 64.720703,93.720703 c 0.276316,-0.40734 0.503874,-0.867778 0.787109,-1.267578 1.70087,-2.400855 3.527087,-4.666237 5.470704,-6.798828 1.943616,-2.132591 4.004963,-4.133318 6.179687,-6.003906 2.174725,-1.870589 4.461274,-3.611714 6.855469,-5.226563 2.394195,-1.614848 4.896019,-3.10338 7.498047,-4.46875 0.539935,-0.283322 1.133058,-0.500695 1.68164,-0.773437 A 24.25,23.399124 0 0 0 69,47.310547 Z"
+                  id="ellipse5659"
+                  transform="translate(0,752.36216)"
+                />
+              </g>
+              <g transform="matrix(-1,0,0,1,300,0)" id="g5685">
+                <ellipse
+                  ry="33.289474"
+                  rx="34.5"
+                  cy="823.07269"
+                  cx="69"
+                  id="ellipse5687"
+                  style={{ fill: '#784421', illOpacity: 1 }}
+                />
+                <path
+                  transform="translate(0,752.36216)"
+                  id="path5689"
+                  d="M 69,47.310547 A 24.25,23.399124 0 0 0 44.75,70.710938 24.25,23.399124 0 0 0 64.720703,93.720703 c 0.276316,-0.40734 0.503874,-0.867778 0.787109,-1.267578 1.70087,-2.400855 3.527087,-4.666237 5.470704,-6.798828 1.943616,-2.132591 4.004963,-4.133318 6.179687,-6.003906 2.174725,-1.870589 4.461274,-3.611714 6.855469,-5.226563 2.394195,-1.614848 4.896019,-3.10338 7.498047,-4.46875 0.539935,-0.283322 1.133058,-0.500695 1.68164,-0.773437 A 24.25,23.399124 0 0 0 69,47.310547 Z"
+                  style={{ fill: '#e9c6af', fillOpacity: 1 }}
+                />
+              </g>
+              <ellipse
+                ry="9.6790915"
+                rx="9.2701159"
+                cy="900.38916"
+                cx="105.83063"
+                id="path4368"
+                style={{ fill: '#000000', fillOpacity: 1 }}
+              />
+              <ellipse
+                style={{ fill: '#000000', fillOpacity: 1 }}
+                id="ellipse4370"
+                cx="186.89894"
+                cy="900.38916"
+                rx="9.2701159"
+                ry="9.6790915"
+              />
+              {count >= angerLimit && (
+                <Fragment>
+                  <path
+                    id="path4396"
+                    d="m 92.05833,865.4614 39.42665,22.76299"
+                    style={{
+                      stroke: '#000000',
+                      strokeWidth: 4.86408424,
+                      strokeLinecap: 'round',
+                      strokeLinejoin: 'round',
+                      strokeMiterlimit: 4,
+                      strokeOpacity: 1,
+                    }}
+                  />
+                  <path
+                    style={{
+                      stroke: '#000000',
+                      strokeWidth: 4.86408424,
+                      strokeLinecap: 'round',
+                      strokeLinejoin: 'round',
+                      strokeMiterlimit: 4,
+                      strokeOpacity: 1,
+                    }}
+                    d="m 202.82482,865.4614 -39.42664,22.76299"
+                    id="path4400"
+                  />
+                </Fragment>
+              )}
+            </g>
+          </g>
+        </svg>
+      </div>
+      <div ref={armWrapRef} className="bear__arm-wrap">
+        <svg
+          ref={armRef}
+          className="bear__arm"
+          viewBox="0 0 250.00001 99.999997"
+          preserveAspectRatio="xMinYMin">
+          <g transform="translate(868.57141,-900.93359)" id="layer1">
+            <path
+              style={{ fill: '#784421', fillOpacity: 1 }}
+              d="m -619.43416,945.05124 c 4.18776,73.01076 -78.25474,53.24342 -150.21568,52.94118 -82.38711,-0.34602 -98.92158,-19.44459 -98.92157,-47.05883 0,-27.61424 4.78794,-42.54902 73.82353,-42.54902 69.03559,0 171.43607,-30.93764 175.31372,36.66667 z"
+              id="path4971"
+            />
+            <ellipse
+              style={{ fill: '#e9c6af', fillOpacity: 1 }}
+              id="path4974"
+              cx="-683.02264"
+              cy="950.98572"
+              rx="29.910826"
+              ry="29.414362"
+            />
+          </g>
+        </svg>
+      </div>
+      <div ref={pawRef} className="bear__paw" />
+      <div className="mask" />
+      <div className="checkbox" onMouseOver={onHover} onMouseOut={offHover}>
+        <input type="checkbox" onChange={onChange} checked={checked} />
+        <div ref={bgRef} className="checkbox__bg" />
+        <div ref={indicatorRef} className="checkbox__indicator" />
+      </div>
+    </Fragment>
+  )
+}
+
+render(<App />, rootNode)
diff --git a/impossible-checkbox-v2/src/style.styl b/impossible-checkbox-v2/src/style.styl
new file mode 100644
index 0000000..172264d
--- /dev/null
+++ b/impossible-checkbox-v2/src/style.styl
@@ -0,0 +1,137 @@
+*
+  box-sizing border-box
+  background #947cb0
+
+body
+  align-items center
+  display flex
+  justify-content center
+  font-family 'Arial', sans-serif
+  min-height 100vh
+  padding 0
+  margin 0
+  overflow hidden
+
+.mask
+  position fixed
+  top 50%
+  left 0
+  right 0
+  bottom 0
+  background #947cb0
+
+.bear
+  width 100%
+  background transparent
+  transform translate(0, 100%)
+  &__swear
+    display none
+    position absolute
+    left 105%
+    top 0
+    background #fff
+    font-weight bolder
+    padding 10px
+    border-radius 8px
+    &:before
+      content ''
+      background #fff
+      position absolute
+      top 90%
+      right 70%
+      height 30px
+      width 30px
+      clip-path polygon(0 100%, 100% 0, 50% 0)
+      -webkit-clip-path polygon(0 100%, 100% 0, 50% 0)
+  &__wrap
+    width 100px
+    left 50%
+    position absolute
+    top 50%
+    transform translate(-15%, -50%) rotate(5deg) translate(0, -75%)
+    background transparent
+
+  &__arm-wrap
+    background transparent
+    position fixed
+    height 30px
+    width 90px
+    z-index 4
+    top 50%
+    left 50%
+    transform translate(0, -50%) rotate(0deg)
+
+  &__arm
+    background transparent
+    transform-origin left
+    position absolute
+    height 100%
+    width 100%
+    top 50%
+    left 50%
+    transform translate(-35%, -50%) scaleX(1)
+
+  &__paw
+    background #784421
+    border-radius 100%
+    position fixed
+    height 30px
+    width 30px
+    z-index 10
+    top 50%
+    left 50%
+    transform-origin right
+    transform translate(80px, -15px) scaleX(0)
+
+
+.checkbox
+  border-radius 50px
+  height 100px
+  position fixed
+  width 200px
+  z-index 5
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+
+  [type='checkbox']
+    cursor pointer
+    border-radius 50px
+    position absolute
+    outline 0
+    top 0
+    right 0
+    bottom 0
+    left 0
+    opacity 0
+    z-index 10
+    height 100%
+    width 100%
+    margin 0
+
+  &__bg
+    background #aaa
+    border-radius 50px
+    height 100%
+    width 100%
+    z-index 10
+
+  &__indicator
+    background transparent
+    height 100%
+    width 50%
+    border-radius 100%
+    position absolute
+    top 0
+    left 0
+
+    &:after
+      content ''
+      border-radius 100%
+      height 85%
+      width 85%
+      background #fff
+      position absolute
+      top 50%
+      left 50%
+      transform translate(-50%, -50%)
\ No newline at end of file
diff --git a/impressionists-blobs/LICENSE.txt b/impressionists-blobs/LICENSE.txt
new file mode 100644
index 0000000..803f945
--- /dev/null
+++ b/impressionists-blobs/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 by murasaki uma (https://codepen.io/murasaki/pen/BmOzMP)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/impressionists-blobs/README.md b/impressionists-blobs/README.md
new file mode 100644
index 0000000..bb3047a
--- /dev/null
+++ b/impressionists-blobs/README.md
@@ -0,0 +1,4 @@
+# Impressionists Blobs
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/murasaki/pen/BmOzMP](https://codepen.io/murasaki/pen/BmOzMP).
+
diff --git a/impressionists-blobs/dist/index.html b/impressionists-blobs/dist/index.html
new file mode 100644
index 0000000..b6121c6
--- /dev/null
+++ b/impressionists-blobs/dist/index.html
@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Impressionists Blobs</title>
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Khula:300|Open+Sans'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script id="Mosaic_ComputeVelocity" type="x-shader/x-vertex">
+        vec3 mod289(vec3 x) {
+          return x - floor(x * (1.0 / 289.0)) * 289.0;
+        }
+
+        vec4 mod289(vec4 x) {
+          return x - floor(x * (1.0 / 289.0)) * 289.0;
+        }
+
+        vec4 permute(vec4 x) {
+             return mod289(((x*34.0)+1.0)*x);
+        }
+
+        vec4 taylorInvSqrt(vec4 r)
+        {
+          return 1.79284291400159 - 0.85373472095314 * r;
+        }
+
+        float snoise(vec3 v)
+          {
+          const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+          const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+        // First corner
+          vec3 i  = floor(v + dot(v, C.yyy) );
+          vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+        // Other corners
+          vec3 g = step(x0.yzx, x0.xyz);
+          vec3 l = 1.0 - g;
+          vec3 i1 = min( g.xyz, l.zxy );
+          vec3 i2 = max( g.xyz, l.zxy );
+
+          //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+          //   x1 = x0 - i1  + 1.0 * C.xxx;
+          //   x2 = x0 - i2  + 2.0 * C.xxx;
+          //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+          vec3 x1 = x0 - i1 + C.xxx;
+          vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+          vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+        // Permutations
+          i = mod289(i);
+          vec4 p = permute( permute( permute(
+                     i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+                   + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+                   + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+        // Gradients: 7x7 points over a square, mapped onto an octahedron.
+        // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+          float n_ = 0.142857142857; // 1.0/7.0
+          vec3  ns = n_ * D.wyz - D.xzx;
+
+          vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+          vec4 x_ = floor(j * ns.z);
+          vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+          vec4 x = x_ *ns.x + ns.yyyy;
+          vec4 y = y_ *ns.x + ns.yyyy;
+          vec4 h = 1.0 - abs(x) - abs(y);
+
+          vec4 b0 = vec4( x.xy, y.xy );
+          vec4 b1 = vec4( x.zw, y.zw );
+
+          //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+          //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+          vec4 s0 = floor(b0)*2.0 + 1.0;
+          vec4 s1 = floor(b1)*2.0 + 1.0;
+          vec4 sh = -step(h, vec4(0.0));
+
+          vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+          vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+          vec3 p0 = vec3(a0.xy,h.x);
+          vec3 p1 = vec3(a0.zw,h.y);
+          vec3 p2 = vec3(a1.xy,h.z);
+          vec3 p3 = vec3(a1.zw,h.w);
+
+        //Normalise gradients
+          vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+          p0 *= norm.x;
+          p1 *= norm.y;
+          p2 *= norm.z;
+          p3 *= norm.w;
+
+        // Mix final noise value
+          vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+          m = m * m;
+          return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
+                                        dot(p2,x2), dot(p3,x3) ) );
+          }
+
+        vec3 snoiseVec3( vec3 x ){
+
+          float s  = snoise(vec3( x ));
+          float s1 = snoise(vec3( x.y - 19.1 , x.z + 33.4 , x.x + 47.2 ));
+          float s2 = snoise(vec3( x.z + 74.2 , x.x - 124.5 , x.y + 99.4 ));
+          vec3 c = vec3( s , s1 , s2 );
+          return c;
+
+        }
+
+
+        vec3 curlNoise( vec3 p ){
+
+          const float e = .1;
+          vec3 dx = vec3( e   , 0.0 , 0.0 );
+          vec3 dy = vec3( 0.0 , e   , 0.0 );
+          vec3 dz = vec3( 0.0 , 0.0 , e   );
+
+          vec3 p_x0 = snoiseVec3( p - dx );
+          vec3 p_x1 = snoiseVec3( p + dx );
+          vec3 p_y0 = snoiseVec3( p - dy );
+          vec3 p_y1 = snoiseVec3( p + dy );
+          vec3 p_z0 = snoiseVec3( p - dz );
+          vec3 p_z1 = snoiseVec3( p + dz );
+
+          float x = p_y1.z - p_y0.z - p_z1.y + p_z0.y;
+          float y = p_z1.x - p_z0.x - p_x1.z + p_x0.z;
+          float z = p_x1.y - p_x0.y - p_y1.x + p_y0.x;
+
+          const float divisor = 1.0 / ( 2.0 * e );
+          return normalize( vec3( x , y , z ) * divisor );
+
+        }
+
+
+        void main() {
+            vec2 uv = gl_FragCoord.xy / resolution.xy;
+            float idParticle = uv.y * resolution.x + uv.x;
+            vec4 tmpVel = texture2D( textureVelocity, uv );
+            vec4 tmpPos = texture2D( texturePosition, uv );
+
+            vec3 vel = curlNoise(tmpPos.xyz*0.04);
+            tmpVel.w -= 0.8;
+        //    vel.z *= 2.0;
+        //    vec3 vel = tmpVel.xyz;
+        //    vel.x *= 2.0;
+        //    vel. *= 2.0;
+        //    vel.x = abs(vel.x);
+        //    vel.z = abs(vel.z);
+
+            if(tmpVel.w < -1.0)
+            {
+                tmpVel.w = 100.;
+            }
+
+            gl_FragColor = vec4( vel.xyz, tmpVel.w );
+        }
+
+    </script>
+  	<script id="Mosaic_ComputePosition" type="x-shader/x-vertex">
+        #define delta 0.08
+        void main() {
+            vec2 uv = gl_FragCoord.xy / resolution.xy;
+            vec4 tmpPos = texture2D( texturePosition, uv );
+            vec3 pos = tmpPos.xyz;
+            vec4 tmpVel = texture2D( textureVelocity, uv );
+            vec4 tmpOrgPos = texture2D( textureOriginal, uv );
+            vec3 vel = tmpVel.xyz;
+            pos += vel * delta;
+        //    if(tmpVel.w == 100.)
+            if(distance(pos,tmpOrgPos.xyz) > 20.)
+            {
+                pos = tmpOrgPos.xyz;
+            }
+            gl_FragColor = vec4( pos, 1.0 );
+        }
+
+    </script>
+    <script id="Mosaic_ComputeOriginal" type="x-shader/x-vertex">
+        uniform sampler2D pre_texturePosition;
+
+
+        void main() {
+            vec2 uv = gl_FragCoord.xy / resolution.xy;
+
+            vec4 q = texture2D( textureOriginal, uv );
+
+            gl_FragColor = q;
+        }
+
+    </script>
+    <script id="Mosaic_ComputeShadow" type="x-shader/x-vertex">
+
+        precision highp float;
+        const float PackUpscale = 256. / 255.;
+        const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256.,  256. );
+        const float ShiftRight8 = 1. / 256.;
+
+        vec4 packDepthToRGBA( const in float v ) {
+          vec4 r = vec4( fract( v * PackFactors ), v );
+          r.yzw -= r.xyz * ShiftRight8; // tidy overflow
+          return r * PackUpscale;
+        }
+
+        void main() {
+
+          gl_FragColor = packDepthToRGBA( gl_FragCoord.z );
+
+        }
+
+    </script>
+    <script id="vertex" type="x-shader/x-vertex">
+        precision highp float;
+
+        attribute vec3 offset;
+
+        attribute vec2 pos_uv;
+        attribute vec4 orientation;
+        varying vec2 vUv;
+        varying vec2 vTuv;
+        uniform sampler2D map;
+        uniform mat4 shadowMatrix;
+        varying vec4 vShadowCoord;
+        uniform sampler2D shadowMap;
+        uniform vec2 shadowMapSize;
+        uniform float shadowBias;
+        uniform float shadowRadius;
+
+
+        uniform float time;
+        uniform sampler2D texturePosition;
+        uniform sampler2D textureVelocity;
+        uniform sampler2D textureOriginal;
+        varying vec4 vPosition;
+        varying vec3 vColor;
+        varying vec3 vNormal;
+        uniform mat4 uMatrix;
+        varying mat4 vModelMatrix;
+
+        uniform float imgWidth;
+        uniform float imgHeight;
+
+
+
+        mat3 calcLookAtMatrix(vec3 vector, float roll) {
+          vec3 rr = vec3(sin(roll), cos(roll), 0.0);
+          vec3 ww = normalize(vector);
+          vec3 uu = normalize(cross(ww, rr));
+          vec3 vv = normalize(cross(uu, ww));
+
+          return mat3(uu, ww, vv);
+        }
+
+        const float DEG_TO_RAD = 3.141592653589793 / 180.0;
+        mat2 rotationMatrix( float a ) {
+          return mat2( cos( a ), sin( a ),
+                  -sin( a ), cos( a ) );
+        }
+
+        const float PI = 3.141592653589793;
+        uniform float near;
+        uniform float far;
+        uniform vec3 cameraPos;
+        float fogStart = 0.1;
+        float fogEnd = 30.0;
+        varying float fogFactor;
+        uniform float isStart;
+
+          mat2 calcRotate2D(float _time){
+            float _sin = sin(_time);
+            float _cos = cos(_time);
+            return mat2(_cos, _sin, -_sin, _cos);
+          }
+
+
+
+        void main() {
+            vPosition = vec4(position.xyz,1.);
+            vec4 posTemp = texture2D( texturePosition, pos_uv );
+            vec4 velTemp = texture2D( textureVelocity, pos_uv );
+            vec4 orgTemp = texture2D( textureOriginal, pos_uv );
+
+        //    float scale = 1.0 - velTemp.w/100.0;
+
+            float scale = 1.0 - distance(posTemp.xyz,orgTemp.xyz)/20.;
+            scale = sin(scale*PI)*1.0;
+        //    scale = mix(sin(scale*PI)*1.2,1.0,isStart);
+
+        //    scale= 1.0;
+
+            vTuv = pos_uv;
+
+            mat4 localRotationMat = mat4( calcLookAtMatrix( velTemp.xyz, 0.0 ) );
+
+
+            vec2 tUv =vec2( posTemp.x/imgWidth+0.5,posTemp.y/imgHeight+0.5);
+
+            vColor = texture2D( map, tUv ).xyz;
+
+
+
+
+
+
+
+            vec3 modifiedVertex =  (localRotationMat * vec4( position*vec3(0.1,1.3,0.1)*scale,1.0 )).xyz;
+            vec3 modifiedPosition = modifiedVertex + posTemp.xyz;
+
+            modifiedPosition.yz = calcRotate2D(time) * modifiedPosition.yz;
+            modifiedPosition.xz = calcRotate2D(time) * modifiedPosition.xz;
+
+            float linerDepth = 1.0 / (30.0 - 0.01);
+            float linerPos = length(cameraPos - modifiedPosition.xyz) * linerDepth;
+            fogFactor      = clamp((fogEnd - linerPos) / (fogEnd - fogStart), 0.0, 1.0);
+
+            vPosition =  vec4( modifiedPosition, 1.0 );
+            vShadowCoord = shadowMatrix * modelMatrix * vec4( vPosition.xyz, 1. );
+
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( modifiedPosition, 1.0 );
+
+        }
+
+    </script>
+
+    <script id="fragment" type="x-shader/x-vertex">
+        precision highp float;
+        uniform sampler2D map;
+        varying vec2 vUv;
+        varying vec3 vColor;
+
+        varying vec4 vShadowCoord;
+        uniform sampler2D shadowMap;
+        uniform vec2 shadowMapSize;
+        uniform float shadowBias;
+        uniform float shadowRadius;
+        uniform float bias;
+
+        const float UnpackDownscale = 255. / 256.; // 0..1 -> fraction (excluding 1)
+        const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256.,  256. );
+        const vec4 UnpackFactors = UnpackDownscale / vec4( PackFactors, 1. );
+
+        float unpackRGBAToDepth( const in vec4 v ) {
+          return dot( v, UnpackFactors );
+        }
+
+        float texture2DCompare( sampler2D depths, vec2 uv, float compare ) {
+          return step( compare, unpackRGBAToDepth( texture2D( depths, uv ) ) );
+        }
+
+        float getShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowBias, float shadowRadius, vec4 shadowCoord ) {
+
+          float shadow = 1.0;
+
+          shadowCoord.xyz /= shadowCoord.w;
+          shadowCoord.z += shadowBias;
+
+          // if ( something && something ) breaks ATI OpenGL shader compiler
+          // if ( all( something, something ) ) using this instead
+
+          bvec4 inFrustumVec = bvec4 ( shadowCoord.x >= 0.0, shadowCoord.x <= 1.0, shadowCoord.y >= 0.0, shadowCoord.y <= 1.0 );
+          bool inFrustum = all( inFrustumVec );
+
+          bvec2 frustumTestVec = bvec2( inFrustum, shadowCoord.z <= 1.0 );
+          bool frustumTest = all( frustumTestVec );
+
+          if ( frustumTest ) {
+
+            vec2 texelSize = vec2( 1.0 ) / shadowMapSize;
+
+            float dx0 = - texelSize.x * shadowRadius;
+            float dy0 = - texelSize.y * shadowRadius;
+            float dx1 = + texelSize.x * shadowRadius;
+            float dy1 = + texelSize.y * shadowRadius;
+
+            shadow = (
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy0 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy0 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy0 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, 0.0 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy, shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, 0.0 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy1 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy1 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy1 ), shadowCoord.z )
+            ) * ( 1.0 / 9.0 );
+          }
+
+          return shadow;
+        }
+      
+      
+         vec3 rgb2hsv(vec3 c)
+        {
+            vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+            vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+            vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+
+            float d = q.x - min(q.w, q.y);
+            float e = 1.0e-10;
+            return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+        }
+        vec3 hsv2rgb(vec3 c)
+        {
+            vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+            vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+            return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+        }
+
+        varying vec4 vPosition;
+        uniform sampler2D textureVelocity;
+        uniform sampler2D texturePosition;
+        varying vec2 vTuv;
+        varying mat4 vModelMatrix;
+        varying vec3 vNormal;
+        uniform mat4 uMatrix;
+        uniform float near;
+        uniform float far;
+        uniform vec3 cameraPos;
+        float fogStart = 0.1;
+        float fogEnd = 10.0;
+        varying float fogFactor;
+
+        vec3 calcIrradiance_dir(vec3 newNormal, vec3 lightPos, vec3 light){
+            float dotNL = dot(newNormal, normalize(lightPos));
+
+            return light * max(0.0, dotNL);
+          }
+
+        vec3 calcIrradiance_hemi(vec3 newNormal, vec3 lightPos, vec3 grd, vec3 sky){
+            float dotNL = dot(newNormal, normalize(lightPos));
+            float hemiDiffuseWeight = 0.5 * dotNL + 0.5;
+
+            return mix(grd, sky, hemiDiffuseWeight);
+          }
+
+        const vec3 hemiLight_g = vec3(0.86,0.86,0.86);
+
+        // hemisphere sky color
+        const vec3 hemiLight_s_1 = vec3(0.5882352941176471,0.8274509803921568,0.8823529411764706);
+        const vec3 hemiLight_s_2 = vec3(0.9686274509803922,0.8509803921568627,0.6666666666666666);
+        const vec3 hemiLight_s_3 = vec3(0.8784313725490196,0.5882352941176471,0.7647058823529411);
+
+        const vec3 hemiLightPos_1 = vec3(100.0, 100.0, -100.0);
+          const vec3 hemiLightPos_2 = vec3(-100.0, -100.0, 100.0);
+          const vec3 hemiLightPos_3 = vec3(-100.0, 100.0, 100.0);
+        //uniform sampler2D map;
+        void main() {
+            vec4 velTemp = texture2D( textureVelocity, vUv );
+            vec4 posTemp = texture2D( texturePosition, vTuv );
+            vec3 _normal = normalize(cross(dFdx(vPosition.xyz), dFdy(vPosition.xyz)));
+
+
+            vec3 hemiColor = vec3(0.0);
+            hemiColor += calcIrradiance_hemi(_normal, hemiLightPos_1, hemiLight_g, hemiLight_s_1) * 0.38;
+            hemiColor += calcIrradiance_hemi(_normal, hemiLightPos_2, hemiLight_g, hemiLight_s_2) * 0.26;
+            hemiColor += calcIrradiance_hemi(_normal, hemiLightPos_3, hemiLight_g, hemiLight_s_3) * 0.36;
+            vec3 dirColor = vec3(0.0);
+            dirColor += calcIrradiance_dir(_normal, vec3(0.,0.,1.), vec3(1.));
+            float shadow = 1.0;
+            shadow *= getShadow(shadowMap, shadowMapSize, bias, shadowRadius, vShadowCoord);
+
+
+
+            dirColor.x = max(dirColor.x,0.8);
+            dirColor.y = max(dirColor.y,0.8);
+            dirColor.z = max(dirColor.z,0.8);
+
+            vec3 color = vColor.xyz*dirColor;
+            color = mix(vec3(0.,0.,0.),color,fogFactor);
+          
+            vec3 hsv = rgb2hsv(color);
+            hsv.z *= 1.3;
+            color = hsv2rgb(hsv);
+            gl_FragColor = vec4(color,1.0);
+        }
+    </script>
+
+<div id="container"></div>
+   
+<div id="info">
+    <span>
+      <h1>Impressionists Blobs -The Starry Night-</h1>
+    </span>
+    <br>
+    <span>
+      <a href="https://twitter.com/murasaki_0606" target="_blank">@murasaki_0606</a>
+    </span>
+    <br>
+    <span>
+      <p>click: Start / Restart</p>
+        <br>
+      <p>key"H": Hide info</p>
+    </span>
+
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/593507/GPUComputationRenderer.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/impressionists-blobs/dist/script.js b/impressionists-blobs/dist/script.js
new file mode 100644
index 0000000..ebd104d
--- /dev/null
+++ b/impressionists-blobs/dist/script.js
@@ -0,0 +1,378 @@
+// via curl noise https://codepen.io/mnmxmx/pen/rzqoeW
+//　via polygon-shader https://github.com/spite/polygon-shredder
+var container, stats;
+var camera, scene, renderer;
+var mesh;
+
+var geometry;
+// var material:THREE.MeshBasicMaterial;
+var cube;
+var offsetAttribute;
+var orientationAttribute;
+var lastTime = 0;
+var mesh;
+var uniforms;
+
+var WIDTH = 128;
+var PARTICLES = WIDTH * WIDTH;
+
+
+var gpuCompute;
+var velocityVariable;
+var positionVariable;
+var quaternionVariable;
+var quaternionUniforms;
+
+var material;
+var shadowMaterial;
+var light;
+var shadowCamera;
+
+var imgWidth = 75;
+var imgHeight = 50;
+var rotateVec = new THREE.Vector3(0,0,0);
+var isRotate = false;
+var timer = 0.0;
+var cameraStartZ = 100;
+var startTimer = 0.8;
+var enableInfo = true;
+var texture;
+texture = new THREE.TextureLoader().load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/311372/gogh_small.jpg',function (){
+  init();
+});
+                                         
+           
+
+
+function init() {
+    container = document.getElementById( 'container' );
+    //
+    camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+    camera.position.z = cameraStartZ;
+    scene = new THREE.Scene();
+   
+    renderer = new THREE.WebGLRenderer({antialias: true, alpha:true});
+    renderer.setPixelRatio( window.devicePixelRatio );
+    renderer.setSize( window.innerWidth, window.innerHeight );
+    renderer.gammaInput = true;
+    renderer.gammaOutput = true;
+    container.appendChild( renderer.domElement );
+    renderer.setClearColor(0xebe8ed,0);
+
+
+    light = new THREE.DirectionalLight( 0xFFAA55,0.5 );
+    light.position.set(0, 1, 1);
+    light.castShadow = true;
+    shadowCamera = light.shadow.camera;
+    shadowCamera.lookAt( scene.position );
+
+    light.shadow.matrix.set(
+        0.5, 0.0, 0.0, 0.5,
+        0.0, 0.5, 0.0, 0.5,
+        0.0, 0.0, 0.5, 0.5,
+        0.0, 0.0, 0.0, 1.0
+    );
+
+    light.shadow.matrix.multiply( shadowCamera.projectionMatrix );
+    light.shadow.matrix.multiply( shadowCamera.matrixWorldInverse );
+
+    if(light.shadow.map === null){
+        light.shadow.mapSize.x = 2048;
+        light.shadow.mapSize.y = 2048;
+
+        var pars = { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
+
+        light.shadow.map = new THREE.WebGLRenderTarget( light.shadow.mapSize.x,light.shadow.mapSize.y, pars );
+        // light.shadow.map.texture.name = light.name + ".shadowMap";
+    }
+
+    initComputeRenderer();
+
+
+
+    var instances = PARTICLES;
+    var bufferGeometry = new THREE.BoxBufferGeometry( 2, 1, 1 );
+    // copying data from a simple box geometry, but you can specify a custom geometry if you want
+    geometry = new THREE.InstancedBufferGeometry();
+    geometry.index = bufferGeometry.index;
+    geometry.attributes.position = bufferGeometry.attributes.position;
+    geometry.attributes.uv = bufferGeometry.attributes.uv;
+    geometry.attributes.normal = bufferGeometry.attributes.normal;
+
+    var offsets = [];
+    // var pos_uv = [];
+    var orientations = [];
+    var vector = new THREE.Vector4();
+    var x, y, z, w;
+
+    var uvs = new Float32Array( PARTICLES * 2 );
+    var xywidth = new Float64Array( 3 );
+    xywidth[2] = WIDTH;
+    var p = 0;
+    for ( var j = 1; j < WIDTH; j++ ) {
+        for ( var i = 1; i < WIDTH; i++ ) {
+            xywidth[0] = i;
+            xywidth[1] = j;
+            uvs[ p++ ] = xywidth[0] / ( xywidth[2] )-(1.0/xywidth[2]);
+            uvs[ p++ ] = xywidth[1] / ( xywidth[2] )-(1.0/xywidth[2]);
+        }
+    }
+
+
+    for ( var i = 0; i < instances; i ++ ) {
+        // offsets
+        x = Math.random() * 50 - 25;
+        y = Math.random() * 50 - 25;
+        z = Math.random() *0;
+
+        vector.set( x, y, z, 0 ).normalize();
+        vector.multiplyScalar( 5 ); // move out at least 5 units from center in current direction
+        offsets.push( x + vector.x, y + vector.y, z + vector.z,i );
+
+        x = Math.random() * 2 - 1;
+        y = Math.random() * 2 - 1;
+        z = Math.random() * 2 - 1;
+        w = Math.random() * 2 - 1;
+        vector.set( x, y, z, w ).normalize();
+        orientations.push( vector.x, vector.y, vector.z, vector.w );
+    }
+    offsetAttribute = new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 4 );
+
+    orientationAttribute = new THREE.InstancedBufferAttribute( new Float32Array( orientations ), 4 ).setDynamic( true );
+
+
+    
+
+    texture.wrapS = THREE.ClampToEdgeWrapping;
+    texture.wrapT = THREE.ClampToEdgeWrapping;
+
+
+    var pos_uvsAttribute = new THREE.InstancedBufferAttribute( uvs, 2 );
+    geometry.addAttribute( 'offset', offsetAttribute );
+    geometry.addAttribute( 'orientation', orientationAttribute );
+    geometry.addAttribute( 'pos_uv', pos_uvsAttribute );
+    // material
+
+    uniforms = {
+        map: { value: texture},
+        // monalisa:{value:texture},
+        time:{value:0.0},
+        texturePosition:{value:null},
+        textureVelocity:{value:null},
+        // pre_texturePosition:{value:null},
+        // pre_textureVelocity:{value:null}
+        textureOriginal:{value:null},
+        shadowMap: { type: 't', value: light.shadow.map },
+        shadowMapSize: {type: "v2", value: light.shadow.mapSize},
+        shadowBias: {type: "f", value: light.shadow.bias},
+        shadowRadius: {type: "f", value: light.shadow.radius},
+        uMatrix:{value:null},
+        imgWidth:{value:imgWidth},
+        imgHeight:{value:imgHeight},
+        near:{value:camera.near},
+        far:{value:camera.far},
+        cameraPos:{value:camera.position},
+        sceneInvMatrix:{value:null},
+        isStart:{value:startTimer}
+    };
+    material = new THREE.ShaderMaterial( {
+        uniforms: uniforms,
+        vertexShader: document.getElementById( 'vertex' ).textContent,
+        fragmentShader: document.getElementById( 'fragment' ).textContent,
+        shading: THREE.FlatShading,
+        transparent:true
+    } );
+
+    shadowMaterial = new THREE.ShaderMaterial( {
+        uniforms: {
+            map: { value: texture},
+            time:{value:0.0},
+            texturePosition:{value:null},
+            textureVelocity:{value:null},
+            size: { type: "f", value: WIDTH },
+
+            timer: { type: 'f', value: 0 },
+
+            shadowMatrix: { type: 'm4', value: light.shadow.matrix},
+            lightPosition: { type: 'v3', value: light.position }
+        },
+        vertexShader: document.getElementById( 'vertex' ).textContent,
+        fragmentShader: document.getElementById( 'Mosaic_ComputeShadow' ).textContent,
+    });
+
+
+    mesh = new THREE.Mesh( geometry, material );
+    mesh.frustumCulled = false;
+    scene.add( mesh );
+    
+    window.addEventListener( 'resize', onWindowResize, false );
+    window.addEventListener( 'click', click, false);
+   animate();
+}
+
+function initComputeRenderer()
+{
+
+    gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
+
+    // 今回はパーティクルの位置情報と、移動方向を保存するテクスチャを2つ用意します
+    var dtPosition = gpuCompute.createTexture();
+    var dtVelocity = gpuCompute.createTexture();
+    var dtOriginal = gpuCompute.createTexture();
+
+  fillTextures( dtPosition, dtVelocity,dtOriginal );
+
+    velocityVariable = gpuCompute.addVariable( "textureVelocity", document.getElementById( 'Mosaic_ComputeVelocity' ).textContent, dtVelocity );
+    positionVariable = gpuCompute.addVariable( "texturePosition", document.getElementById( 'Mosaic_ComputePosition' ).textContent, dtPosition );
+    quaternionVariable = gpuCompute.addVariable( "textureOriginal", document.getElementById( 'Mosaic_ComputeOriginal' ).textContent, dtOriginal );
+
+    let variables = [ positionVariable, velocityVariable, quaternionVariable ];
+    gpuCompute.setVariableDependencies( velocityVariable, variables );
+    gpuCompute.setVariableDependencies( positionVariable, variables );
+    gpuCompute.setVariableDependencies( quaternionVariable, variables );
+
+
+    quaternionUniforms = quaternionVariable.material.uniforms;
+    quaternionUniforms.pre_texturePosition = {value:dtPosition};
+
+
+    var error = gpuCompute.init();
+    if ( error !== null ) {
+        console.error( error );
+    }
+}
+
+
+function fillTextures( texturePosition, textureVelocity, textureQuaternion ) {
+
+    var posArray = texturePosition.image.data;
+    var velArray = textureVelocity.image.data;
+    var qtArray = textureQuaternion.image.data;
+
+   
+    for ( var k = 0, kl = posArray.length; k < kl; k += 4 ) {
+        // Position
+        var x, y, z;
+        x = Math.random()*imgWidth-imgWidth/2;
+        y = Math.random()*imgHeight-imgHeight/2;
+        z = Math.random()*10-5;
+        posArray[ k + 0 ] = x;
+        posArray[ k + 1 ] = y;
+        posArray[ k + 2 ] = z;
+        posArray[ k + 3 ] = 0;
+
+        qtArray[ k + 0 ] = x;
+        qtArray[ k + 1 ] = y;
+        qtArray[ k + 2 ] = z;
+        qtArray[ k + 3 ] = 0;
+
+        velArray[ k + 0 ] = Math.random()*2-1;
+        velArray[ k + 1 ] = Math.random()*2-1;
+        velArray[ k + 2 ] = Math.random()*2-1;
+        velArray[ k + 3 ] = 100*Math.random();
+    }
+}
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize( window.innerWidth, window.innerHeight );
+}
+
+function click()
+{
+    isRotate = !isRotate;
+    startTimer = 3.0;
+}
+
+function animate() {
+    requestAnimationFrame( animate );
+    render();
+
+}
+function render() {
+    var time = performance.now();
+
+    if(startTimer > 0)
+    {
+        startTimer -=0.008;
+    } else
+    {
+        uniforms.isStart.value = startTimer;
+        isRotate = true;
+    }
+
+    if(isRotate)
+    {
+        timer += 0.003;
+        timer = timer%(Math.PI*2);
+      
+        cameraStartZ += (30.0 - cameraStartZ) * 0.02;
+        camera.position.z = cameraStartZ + Math.sin(timer) * 40.0;
+    } else
+    {
+        var speed = 0.045;
+        rotateVec.x += (0.0 - rotateVec.x) * speed;
+        rotateVec.y += (0.0 - rotateVec.y) * speed;
+        rotateVec.z += (0.0 - rotateVec.z) * speed;
+        scene.position.z +=(0.0 - scene.position.z) * speed;
+        mesh.position.z +=(0.0 - scene.position.z) * speed;
+        camera.position.z +=( cameraStartZ  - camera.position.z) * speed;
+        cameraStartZ += (70.0 - cameraStartZ) * speed;
+        timer +=(0.0 -timer)*speed;
+    }
+
+    scene.rotation.setFromVector3(rotateVec);
+    quaternionUniforms.pre_texturePosition = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
+
+    // uniforms.pre_texturePosition.value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
+    // uniforms.pre_textureVelocity.value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
+
+    gpuCompute.compute();
+
+    uniforms.textureOriginal.value = gpuCompute.getCurrentRenderTarget( quaternionVariable ).texture;
+    uniforms.texturePosition.value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
+    uniforms.textureVelocity.value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
+
+    shadowMaterial.uniforms.texturePosition.value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
+    shadowMaterial.uniforms.textureVelocity.value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
+
+
+
+    uniforms.time.value = timer;
+    shadowMaterial.uniforms.time.value = timer;
+    lastTime = timer;
+
+
+    // mesh.material = shadowMaterial;
+    // renderer.render( scene, shadowCamera, light.shadow.map);
+
+
+
+    mesh.material = material;
+    material.uniforms.shadowMap.value = light.shadow.map;
+    let m = new THREE.Matrix4();
+    material.uniforms.uMatrix.value = m.getInverse(mesh.matrix);
+    renderer.render( scene, camera );
+}
+
+document.onkeydown = function (e){
+    if(!e) e = window.event; 
+
+    
+
+    if(e.key === "h")
+    {
+        console.log($);
+        console.log($("#info"));
+        if(enableInfo)
+        {
+            $("#info").fadeOut("0.3");
+            enableInfo = false;
+        }else
+        {
+            $("#info").fadeIn("0.3");
+            enableInfo = true;
+        }
+    }
+};
\ No newline at end of file
diff --git a/impressionists-blobs/dist/style.css b/impressionists-blobs/dist/style.css
new file mode 100644
index 0000000..4c77dc5
--- /dev/null
+++ b/impressionists-blobs/dist/style.css
@@ -0,0 +1,52 @@
+a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{height:100%}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{margin:0;font-family:Monospace;font-size:13px;text-align:center}
+#container,body{
+    position:relative;width:100%;height:100%;overflow:hidden
+}
+#container{
+    background:radial-gradient(ellipse at center,#7e2f9c 1%,#191325 100%)
+}
+#stats{display:none}canvas{position:fixed;left:0;top:0}
+#info {
+    width:100%;height:100%;
+    top: 40px;
+    left: 40px;
+    position: fixed;
+    z-index: 999;
+    text-align: left;
+    color: #fff;
+    font-family: 'Khula', sans-serif;
+}
+
+h1 {
+    font-size: 22px;
+
+    display: inline-block;
+    margin: 0;
+    margin-bottom: 10px;
+    padding: 8px;
+    padding-top: 12px;
+ 
+    background: linear-gradient(135deg, rgba(37,219,237,0.8) 0%,rgba(183,60,210,0.8) 100%);
+}
+a {
+    color: #fff;
+    margin: 0;
+    font-size: 14px;
+    display: inline-block;
+    padding: 6px;
+    padding-top: 8px;
+    margin-bottom: 20px;
+    background: linear-gradient(135deg, rgba(37,219,237,0.8) 0%,rgba(183,60,210,0.8) 100%);
+}
+
+p {
+    color: #fff;
+    margin: 0;
+    font-size: 16px;
+    display: inline-block;
+    margin-bottom: 14px;
+    /*padding: 8px;*/
+    /*padding-top: 12px;*/
+    /*background: linear-gradient(135deg, rgba(37,219,237,0.8) 0%,rgba(143,60,210,0.8) 100%);*/
+}
+/*# sourceMappingURL=main.css.map*/
\ No newline at end of file
diff --git a/impressionists-blobs/src/index.html b/impressionists-blobs/src/index.html
new file mode 100644
index 0000000..4aa2211
--- /dev/null
+++ b/impressionists-blobs/src/index.html
@@ -0,0 +1,488 @@
+<script id="Mosaic_ComputeVelocity" type="x-shader/x-vertex">
+        vec3 mod289(vec3 x) {
+          return x - floor(x * (1.0 / 289.0)) * 289.0;
+        }
+
+        vec4 mod289(vec4 x) {
+          return x - floor(x * (1.0 / 289.0)) * 289.0;
+        }
+
+        vec4 permute(vec4 x) {
+             return mod289(((x*34.0)+1.0)*x);
+        }
+
+        vec4 taylorInvSqrt(vec4 r)
+        {
+          return 1.79284291400159 - 0.85373472095314 * r;
+        }
+
+        float snoise(vec3 v)
+          {
+          const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+          const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+        // First corner
+          vec3 i  = floor(v + dot(v, C.yyy) );
+          vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+        // Other corners
+          vec3 g = step(x0.yzx, x0.xyz);
+          vec3 l = 1.0 - g;
+          vec3 i1 = min( g.xyz, l.zxy );
+          vec3 i2 = max( g.xyz, l.zxy );
+
+          //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+          //   x1 = x0 - i1  + 1.0 * C.xxx;
+          //   x2 = x0 - i2  + 2.0 * C.xxx;
+          //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+          vec3 x1 = x0 - i1 + C.xxx;
+          vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+          vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+        // Permutations
+          i = mod289(i);
+          vec4 p = permute( permute( permute(
+                     i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+                   + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+                   + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+        // Gradients: 7x7 points over a square, mapped onto an octahedron.
+        // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+          float n_ = 0.142857142857; // 1.0/7.0
+          vec3  ns = n_ * D.wyz - D.xzx;
+
+          vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+          vec4 x_ = floor(j * ns.z);
+          vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+          vec4 x = x_ *ns.x + ns.yyyy;
+          vec4 y = y_ *ns.x + ns.yyyy;
+          vec4 h = 1.0 - abs(x) - abs(y);
+
+          vec4 b0 = vec4( x.xy, y.xy );
+          vec4 b1 = vec4( x.zw, y.zw );
+
+          //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+          //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+          vec4 s0 = floor(b0)*2.0 + 1.0;
+          vec4 s1 = floor(b1)*2.0 + 1.0;
+          vec4 sh = -step(h, vec4(0.0));
+
+          vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+          vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+          vec3 p0 = vec3(a0.xy,h.x);
+          vec3 p1 = vec3(a0.zw,h.y);
+          vec3 p2 = vec3(a1.xy,h.z);
+          vec3 p3 = vec3(a1.zw,h.w);
+
+        //Normalise gradients
+          vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+          p0 *= norm.x;
+          p1 *= norm.y;
+          p2 *= norm.z;
+          p3 *= norm.w;
+
+        // Mix final noise value
+          vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+          m = m * m;
+          return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
+                                        dot(p2,x2), dot(p3,x3) ) );
+          }
+
+        vec3 snoiseVec3( vec3 x ){
+
+          float s  = snoise(vec3( x ));
+          float s1 = snoise(vec3( x.y - 19.1 , x.z + 33.4 , x.x + 47.2 ));
+          float s2 = snoise(vec3( x.z + 74.2 , x.x - 124.5 , x.y + 99.4 ));
+          vec3 c = vec3( s , s1 , s2 );
+          return c;
+
+        }
+
+
+        vec3 curlNoise( vec3 p ){
+
+          const float e = .1;
+          vec3 dx = vec3( e   , 0.0 , 0.0 );
+          vec3 dy = vec3( 0.0 , e   , 0.0 );
+          vec3 dz = vec3( 0.0 , 0.0 , e   );
+
+          vec3 p_x0 = snoiseVec3( p - dx );
+          vec3 p_x1 = snoiseVec3( p + dx );
+          vec3 p_y0 = snoiseVec3( p - dy );
+          vec3 p_y1 = snoiseVec3( p + dy );
+          vec3 p_z0 = snoiseVec3( p - dz );
+          vec3 p_z1 = snoiseVec3( p + dz );
+
+          float x = p_y1.z - p_y0.z - p_z1.y + p_z0.y;
+          float y = p_z1.x - p_z0.x - p_x1.z + p_x0.z;
+          float z = p_x1.y - p_x0.y - p_y1.x + p_y0.x;
+
+          const float divisor = 1.0 / ( 2.0 * e );
+          return normalize( vec3( x , y , z ) * divisor );
+
+        }
+
+
+        void main() {
+            vec2 uv = gl_FragCoord.xy / resolution.xy;
+            float idParticle = uv.y * resolution.x + uv.x;
+            vec4 tmpVel = texture2D( textureVelocity, uv );
+            vec4 tmpPos = texture2D( texturePosition, uv );
+
+            vec3 vel = curlNoise(tmpPos.xyz*0.04);
+            tmpVel.w -= 0.8;
+        //    vel.z *= 2.0;
+        //    vec3 vel = tmpVel.xyz;
+        //    vel.x *= 2.0;
+        //    vel. *= 2.0;
+        //    vel.x = abs(vel.x);
+        //    vel.z = abs(vel.z);
+
+            if(tmpVel.w < -1.0)
+            {
+                tmpVel.w = 100.;
+            }
+
+            gl_FragColor = vec4( vel.xyz, tmpVel.w );
+        }
+
+    </script>
+  	<script id="Mosaic_ComputePosition" type="x-shader/x-vertex">
+        #define delta 0.08
+        void main() {
+            vec2 uv = gl_FragCoord.xy / resolution.xy;
+            vec4 tmpPos = texture2D( texturePosition, uv );
+            vec3 pos = tmpPos.xyz;
+            vec4 tmpVel = texture2D( textureVelocity, uv );
+            vec4 tmpOrgPos = texture2D( textureOriginal, uv );
+            vec3 vel = tmpVel.xyz;
+            pos += vel * delta;
+        //    if(tmpVel.w == 100.)
+            if(distance(pos,tmpOrgPos.xyz) > 20.)
+            {
+                pos = tmpOrgPos.xyz;
+            }
+            gl_FragColor = vec4( pos, 1.0 );
+        }
+
+    </script>
+    <script id="Mosaic_ComputeOriginal" type="x-shader/x-vertex">
+        uniform sampler2D pre_texturePosition;
+
+
+        void main() {
+            vec2 uv = gl_FragCoord.xy / resolution.xy;
+
+            vec4 q = texture2D( textureOriginal, uv );
+
+            gl_FragColor = q;
+        }
+
+    </script>
+    <script id="Mosaic_ComputeShadow" type="x-shader/x-vertex">
+
+        precision highp float;
+        const float PackUpscale = 256. / 255.;
+        const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256.,  256. );
+        const float ShiftRight8 = 1. / 256.;
+
+        vec4 packDepthToRGBA( const in float v ) {
+          vec4 r = vec4( fract( v * PackFactors ), v );
+          r.yzw -= r.xyz * ShiftRight8; // tidy overflow
+          return r * PackUpscale;
+        }
+
+        void main() {
+
+          gl_FragColor = packDepthToRGBA( gl_FragCoord.z );
+
+        }
+
+    </script>
+    <script id="vertex" type="x-shader/x-vertex">
+        precision highp float;
+
+        attribute vec3 offset;
+
+        attribute vec2 pos_uv;
+        attribute vec4 orientation;
+        varying vec2 vUv;
+        varying vec2 vTuv;
+        uniform sampler2D map;
+        uniform mat4 shadowMatrix;
+        varying vec4 vShadowCoord;
+        uniform sampler2D shadowMap;
+        uniform vec2 shadowMapSize;
+        uniform float shadowBias;
+        uniform float shadowRadius;
+
+
+        uniform float time;
+        uniform sampler2D texturePosition;
+        uniform sampler2D textureVelocity;
+        uniform sampler2D textureOriginal;
+        varying vec4 vPosition;
+        varying vec3 vColor;
+        varying vec3 vNormal;
+        uniform mat4 uMatrix;
+        varying mat4 vModelMatrix;
+
+        uniform float imgWidth;
+        uniform float imgHeight;
+
+
+
+        mat3 calcLookAtMatrix(vec3 vector, float roll) {
+          vec3 rr = vec3(sin(roll), cos(roll), 0.0);
+          vec3 ww = normalize(vector);
+          vec3 uu = normalize(cross(ww, rr));
+          vec3 vv = normalize(cross(uu, ww));
+
+          return mat3(uu, ww, vv);
+        }
+
+        const float DEG_TO_RAD = 3.141592653589793 / 180.0;
+        mat2 rotationMatrix( float a ) {
+          return mat2( cos( a ), sin( a ),
+                  -sin( a ), cos( a ) );
+        }
+
+        const float PI = 3.141592653589793;
+        uniform float near;
+        uniform float far;
+        uniform vec3 cameraPos;
+        float fogStart = 0.1;
+        float fogEnd = 30.0;
+        varying float fogFactor;
+        uniform float isStart;
+
+          mat2 calcRotate2D(float _time){
+            float _sin = sin(_time);
+            float _cos = cos(_time);
+            return mat2(_cos, _sin, -_sin, _cos);
+          }
+
+
+
+        void main() {
+            vPosition = vec4(position.xyz,1.);
+            vec4 posTemp = texture2D( texturePosition, pos_uv );
+            vec4 velTemp = texture2D( textureVelocity, pos_uv );
+            vec4 orgTemp = texture2D( textureOriginal, pos_uv );
+
+        //    float scale = 1.0 - velTemp.w/100.0;
+
+            float scale = 1.0 - distance(posTemp.xyz,orgTemp.xyz)/20.;
+            scale = sin(scale*PI)*1.0;
+        //    scale = mix(sin(scale*PI)*1.2,1.0,isStart);
+
+        //    scale= 1.0;
+
+            vTuv = pos_uv;
+
+            mat4 localRotationMat = mat4( calcLookAtMatrix( velTemp.xyz, 0.0 ) );
+
+
+            vec2 tUv =vec2( posTemp.x/imgWidth+0.5,posTemp.y/imgHeight+0.5);
+
+            vColor = texture2D( map, tUv ).xyz;
+
+
+
+
+
+
+
+            vec3 modifiedVertex =  (localRotationMat * vec4( position*vec3(0.1,1.3,0.1)*scale,1.0 )).xyz;
+            vec3 modifiedPosition = modifiedVertex + posTemp.xyz;
+
+            modifiedPosition.yz = calcRotate2D(time) * modifiedPosition.yz;
+            modifiedPosition.xz = calcRotate2D(time) * modifiedPosition.xz;
+
+            float linerDepth = 1.0 / (30.0 - 0.01);
+            float linerPos = length(cameraPos - modifiedPosition.xyz) * linerDepth;
+            fogFactor      = clamp((fogEnd - linerPos) / (fogEnd - fogStart), 0.0, 1.0);
+
+            vPosition =  vec4( modifiedPosition, 1.0 );
+            vShadowCoord = shadowMatrix * modelMatrix * vec4( vPosition.xyz, 1. );
+
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( modifiedPosition, 1.0 );
+
+        }
+
+    </script>
+
+    <script id="fragment" type="x-shader/x-vertex">
+        precision highp float;
+        uniform sampler2D map;
+        varying vec2 vUv;
+        varying vec3 vColor;
+
+        varying vec4 vShadowCoord;
+        uniform sampler2D shadowMap;
+        uniform vec2 shadowMapSize;
+        uniform float shadowBias;
+        uniform float shadowRadius;
+        uniform float bias;
+
+        const float UnpackDownscale = 255. / 256.; // 0..1 -> fraction (excluding 1)
+        const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256.,  256. );
+        const vec4 UnpackFactors = UnpackDownscale / vec4( PackFactors, 1. );
+
+        float unpackRGBAToDepth( const in vec4 v ) {
+          return dot( v, UnpackFactors );
+        }
+
+        float texture2DCompare( sampler2D depths, vec2 uv, float compare ) {
+          return step( compare, unpackRGBAToDepth( texture2D( depths, uv ) ) );
+        }
+
+        float getShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowBias, float shadowRadius, vec4 shadowCoord ) {
+
+          float shadow = 1.0;
+
+          shadowCoord.xyz /= shadowCoord.w;
+          shadowCoord.z += shadowBias;
+
+          // if ( something && something ) breaks ATI OpenGL shader compiler
+          // if ( all( something, something ) ) using this instead
+
+          bvec4 inFrustumVec = bvec4 ( shadowCoord.x >= 0.0, shadowCoord.x <= 1.0, shadowCoord.y >= 0.0, shadowCoord.y <= 1.0 );
+          bool inFrustum = all( inFrustumVec );
+
+          bvec2 frustumTestVec = bvec2( inFrustum, shadowCoord.z <= 1.0 );
+          bool frustumTest = all( frustumTestVec );
+
+          if ( frustumTest ) {
+
+            vec2 texelSize = vec2( 1.0 ) / shadowMapSize;
+
+            float dx0 = - texelSize.x * shadowRadius;
+            float dy0 = - texelSize.y * shadowRadius;
+            float dx1 = + texelSize.x * shadowRadius;
+            float dy1 = + texelSize.y * shadowRadius;
+
+            shadow = (
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy0 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy0 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy0 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, 0.0 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy, shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, 0.0 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy1 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy1 ), shadowCoord.z ) +
+              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy1 ), shadowCoord.z )
+            ) * ( 1.0 / 9.0 );
+          }
+
+          return shadow;
+        }
+      
+      
+         vec3 rgb2hsv(vec3 c)
+        {
+            vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+            vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+            vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+
+            float d = q.x - min(q.w, q.y);
+            float e = 1.0e-10;
+            return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+        }
+        vec3 hsv2rgb(vec3 c)
+        {
+            vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+            vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+            return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+        }
+
+        varying vec4 vPosition;
+        uniform sampler2D textureVelocity;
+        uniform sampler2D texturePosition;
+        varying vec2 vTuv;
+        varying mat4 vModelMatrix;
+        varying vec3 vNormal;
+        uniform mat4 uMatrix;
+        uniform float near;
+        uniform float far;
+        uniform vec3 cameraPos;
+        float fogStart = 0.1;
+        float fogEnd = 10.0;
+        varying float fogFactor;
+
+        vec3 calcIrradiance_dir(vec3 newNormal, vec3 lightPos, vec3 light){
+            float dotNL = dot(newNormal, normalize(lightPos));
+
+            return light * max(0.0, dotNL);
+          }
+
+        vec3 calcIrradiance_hemi(vec3 newNormal, vec3 lightPos, vec3 grd, vec3 sky){
+            float dotNL = dot(newNormal, normalize(lightPos));
+            float hemiDiffuseWeight = 0.5 * dotNL + 0.5;
+
+            return mix(grd, sky, hemiDiffuseWeight);
+          }
+
+        const vec3 hemiLight_g = vec3(0.86,0.86,0.86);
+
+        // hemisphere sky color
+        const vec3 hemiLight_s_1 = vec3(0.5882352941176471,0.8274509803921568,0.8823529411764706);
+        const vec3 hemiLight_s_2 = vec3(0.9686274509803922,0.8509803921568627,0.6666666666666666);
+        const vec3 hemiLight_s_3 = vec3(0.8784313725490196,0.5882352941176471,0.7647058823529411);
+
+        const vec3 hemiLightPos_1 = vec3(100.0, 100.0, -100.0);
+          const vec3 hemiLightPos_2 = vec3(-100.0, -100.0, 100.0);
+          const vec3 hemiLightPos_3 = vec3(-100.0, 100.0, 100.0);
+        //uniform sampler2D map;
+        void main() {
+            vec4 velTemp = texture2D( textureVelocity, vUv );
+            vec4 posTemp = texture2D( texturePosition, vTuv );
+            vec3 _normal = normalize(cross(dFdx(vPosition.xyz), dFdy(vPosition.xyz)));
+
+
+            vec3 hemiColor = vec3(0.0);
+            hemiColor += calcIrradiance_hemi(_normal, hemiLightPos_1, hemiLight_g, hemiLight_s_1) * 0.38;
+            hemiColor += calcIrradiance_hemi(_normal, hemiLightPos_2, hemiLight_g, hemiLight_s_2) * 0.26;
+            hemiColor += calcIrradiance_hemi(_normal, hemiLightPos_3, hemiLight_g, hemiLight_s_3) * 0.36;
+            vec3 dirColor = vec3(0.0);
+            dirColor += calcIrradiance_dir(_normal, vec3(0.,0.,1.), vec3(1.));
+            float shadow = 1.0;
+            shadow *= getShadow(shadowMap, shadowMapSize, bias, shadowRadius, vShadowCoord);
+
+
+
+            dirColor.x = max(dirColor.x,0.8);
+            dirColor.y = max(dirColor.y,0.8);
+            dirColor.z = max(dirColor.z,0.8);
+
+            vec3 color = vColor.xyz*dirColor;
+            color = mix(vec3(0.,0.,0.),color,fogFactor);
+          
+            vec3 hsv = rgb2hsv(color);
+            hsv.z *= 1.3;
+            color = hsv2rgb(hsv);
+            gl_FragColor = vec4(color,1.0);
+        }
+    </script>
+
+<div id="container"></div>
+   
+<div id="info">
+    <span>
+      <h1>Impressionists Blobs -The Starry Night-</h1>
+    </span>
+    <br>
+    <span>
+      <a href="https://twitter.com/murasaki_0606" target="_blank">@murasaki_0606</a>
+    </span>
+    <br>
+    <span>
+      <p>click: Start / Restart</p>
+        <br>
+      <p>key"H": Hide info</p>
+    </span>
+
+</div>
\ No newline at end of file
diff --git a/impressionists-blobs/src/script.js b/impressionists-blobs/src/script.js
new file mode 100644
index 0000000..72361fb
--- /dev/null
+++ b/impressionists-blobs/src/script.js
@@ -0,0 +1,378 @@
+// via curl noise https://codepen.io/mnmxmx/pen/rzqoeW
+//　via polygon-shader https://github.com/spite/polygon-shredder
+var container, stats;
+var camera, scene, renderer;
+var mesh;
+
+var geometry;
+// var material:THREE.MeshBasicMaterial;
+var cube;
+var offsetAttribute;
+var orientationAttribute;
+var lastTime = 0;
+var mesh;
+var uniforms;
+
+var WIDTH = 128;
+var PARTICLES = WIDTH * WIDTH;
+
+
+var gpuCompute;
+var velocityVariable;
+var positionVariable;
+var quaternionVariable;
+var quaternionUniforms;
+
+var material;
+var shadowMaterial;
+var light;
+var shadowCamera;
+
+var imgWidth = 75;
+var imgHeight = 50;
+var rotateVec = new THREE.Vector3(0,0,0);
+var isRotate = false;
+var timer = 0.0;
+var cameraStartZ = 100;
+var startTimer = 0.8;
+var enableInfo = true;
+var texture;
+texture = new THREE.TextureLoader().load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/311372/gogh_small.jpg',function (){
+  init();
+});
+                                         
+           
+
+
+function init() {
+    container = document.getElementById( 'container' );
+    //
+    camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+    camera.position.z = cameraStartZ;
+    scene = new THREE.Scene();
+   
+    renderer = new THREE.WebGLRenderer({antialias: true, alpha:true});
+    renderer.setPixelRatio( window.devicePixelRatio );
+    renderer.setSize( window.innerWidth, window.innerHeight );
+    renderer.gammaInput = true;
+    renderer.gammaOutput = true;
+    container.appendChild( renderer.domElement );
+    renderer.setClearColor(0xebe8ed,0);
+
+
+    light = new THREE.DirectionalLight( 0xFFAA55,0.5 );
+    light.position.set(0, 1, 1);
+    light.castShadow = true;
+    shadowCamera = light.shadow.camera;
+    shadowCamera.lookAt( scene.position );
+
+    light.shadow.matrix.set(
+        0.5, 0.0, 0.0, 0.5,
+        0.0, 0.5, 0.0, 0.5,
+        0.0, 0.0, 0.5, 0.5,
+        0.0, 0.0, 0.0, 1.0
+    );
+
+    light.shadow.matrix.multiply( shadowCamera.projectionMatrix );
+    light.shadow.matrix.multiply( shadowCamera.matrixWorldInverse );
+
+    if(light.shadow.map === null){
+        light.shadow.mapSize.x = 2048;
+        light.shadow.mapSize.y = 2048;
+
+        var pars = { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
+
+        light.shadow.map = new THREE.WebGLRenderTarget( light.shadow.mapSize.x,light.shadow.mapSize.y, pars );
+        // light.shadow.map.texture.name = light.name + ".shadowMap";
+    }
+
+    initComputeRenderer();
+
+
+
+    var instances = PARTICLES;
+    var bufferGeometry = new THREE.BoxBufferGeometry( 2, 1, 1 );
+    // copying data from a simple box geometry, but you can specify a custom geometry if you want
+    geometry = new THREE.InstancedBufferGeometry();
+    geometry.index = bufferGeometry.index;
+    geometry.attributes.position = bufferGeometry.attributes.position;
+    geometry.attributes.uv = bufferGeometry.attributes.uv;
+    geometry.attributes.normal = bufferGeometry.attributes.normal;
+
+    var offsets = [];
+    // var pos_uv = [];
+    var orientations = [];
+    var vector = new THREE.Vector4();
+    var x, y, z, w;
+
+    var uvs = new Float32Array( PARTICLES * 2 );
+    var xywidth = new Float64Array( 3 );
+    xywidth[2] = WIDTH;
+    var p = 0;
+    for ( var j = 1; j < WIDTH; j++ ) {
+        for ( var i = 1; i < WIDTH; i++ ) {
+            xywidth[0] = i;
+            xywidth[1] = j;
+            uvs[ p++ ] = xywidth[0] / ( xywidth[2] )-(1.0/xywidth[2]);
+            uvs[ p++ ] = xywidth[1] / ( xywidth[2] )-(1.0/xywidth[2]);
+        }
+    }
+
+
+    for ( var i = 0; i < instances; i ++ ) {
+        // offsets
+        x = Math.random() * 50 - 25;
+        y = Math.random() * 50 - 25;
+        z = Math.random() *0;
+
+        vector.set( x, y, z, 0 ).normalize();
+        vector.multiplyScalar( 5 ); // move out at least 5 units from center in current direction
+        offsets.push( x + vector.x, y + vector.y, z + vector.z,i );
+
+        x = Math.random() * 2 - 1;
+        y = Math.random() * 2 - 1;
+        z = Math.random() * 2 - 1;
+        w = Math.random() * 2 - 1;
+        vector.set( x, y, z, w ).normalize();
+        orientations.push( vector.x, vector.y, vector.z, vector.w );
+    }
+    offsetAttribute = new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 4 );
+
+    orientationAttribute = new THREE.InstancedBufferAttribute( new Float32Array( orientations ), 4 ).setDynamic( true );
+
+
+    
+
+    texture.wrapS = THREE.ClampToEdgeWrapping;
+    texture.wrapT = THREE.ClampToEdgeWrapping;
+
+
+    var pos_uvsAttribute = new THREE.InstancedBufferAttribute( uvs, 2 );
+    geometry.addAttribute( 'offset', offsetAttribute );
+    geometry.addAttribute( 'orientation', orientationAttribute );
+    geometry.addAttribute( 'pos_uv', pos_uvsAttribute );
+    // material
+
+    uniforms = {
+        map: { value: texture},
+        // monalisa:{value:texture},
+        time:{value:0.0},
+        texturePosition:{value:null},
+        textureVelocity:{value:null},
+        // pre_texturePosition:{value:null},
+        // pre_textureVelocity:{value:null}
+        textureOriginal:{value:null},
+        shadowMap: { type: 't', value: light.shadow.map },
+        shadowMapSize: {type: "v2", value: light.shadow.mapSize},
+        shadowBias: {type: "f", value: light.shadow.bias},
+        shadowRadius: {type: "f", value: light.shadow.radius},
+        uMatrix:{value:null},
+        imgWidth:{value:imgWidth},
+        imgHeight:{value:imgHeight},
+        near:{value:camera.near},
+        far:{value:camera.far},
+        cameraPos:{value:camera.position},
+        sceneInvMatrix:{value:null},
+        isStart:{value:startTimer}
+    };
+    material = new THREE.ShaderMaterial( {
+        uniforms: uniforms,
+        vertexShader: document.getElementById( 'vertex' ).textContent,
+        fragmentShader: document.getElementById( 'fragment' ).textContent,
+        shading: THREE.FlatShading,
+        transparent:true
+    } );
+
+    shadowMaterial = new THREE.ShaderMaterial( {
+        uniforms: {
+            map: { value: texture},
+            time:{value:0.0},
+            texturePosition:{value:null},
+            textureVelocity:{value:null},
+            size: { type: "f", value: WIDTH },
+
+            timer: { type: 'f', value: 0 },
+
+            shadowMatrix: { type: 'm4', value: light.shadow.matrix},
+            lightPosition: { type: 'v3', value: light.position }
+        },
+        vertexShader: document.getElementById( 'vertex' ).textContent,
+        fragmentShader: document.getElementById( 'Mosaic_ComputeShadow' ).textContent,
+    });
+
+
+    mesh = new THREE.Mesh( geometry, material );
+    mesh.frustumCulled = false;
+    scene.add( mesh );
+    
+    window.addEventListener( 'resize', onWindowResize, false );
+    window.addEventListener( 'click', click, false);
+   animate();
+}
+
+function initComputeRenderer()
+{
+
+    gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
+
+    // 今回はパーティクルの位置情報と、移動方向を保存するテクスチャを2つ用意します
+    var dtPosition = gpuCompute.createTexture();
+    var dtVelocity = gpuCompute.createTexture();
+    var dtOriginal = gpuCompute.createTexture();
+
+  fillTextures( dtPosition, dtVelocity,dtOriginal );
+
+    velocityVariable = gpuCompute.addVariable( "textureVelocity", document.getElementById( 'Mosaic_ComputeVelocity' ).textContent, dtVelocity );
+    positionVariable = gpuCompute.addVariable( "texturePosition", document.getElementById( 'Mosaic_ComputePosition' ).textContent, dtPosition );
+    quaternionVariable = gpuCompute.addVariable( "textureOriginal", document.getElementById( 'Mosaic_ComputeOriginal' ).textContent, dtOriginal );
+
+    let variables = [ positionVariable, velocityVariable, quaternionVariable ];
+    gpuCompute.setVariableDependencies( velocityVariable, variables );
+    gpuCompute.setVariableDependencies( positionVariable, variables );
+    gpuCompute.setVariableDependencies( quaternionVariable, variables );
+
+
+    quaternionUniforms = quaternionVariable.material.uniforms;
+    quaternionUniforms.pre_texturePosition = {value:dtPosition};
+
+
+    var error = gpuCompute.init();
+    if ( error !== null ) {
+        console.error( error );
+    }
+}
+
+
+function fillTextures( texturePosition, textureVelocity, textureQuaternion ) {
+
+    var posArray = texturePosition.image.data;
+    var velArray = textureVelocity.image.data;
+    var qtArray = textureQuaternion.image.data;
+
+   
+    for ( var k = 0, kl = posArray.length; k < kl; k += 4 ) {
+        // Position
+        var x, y, z;
+        x = Math.random()*imgWidth-imgWidth/2;
+        y = Math.random()*imgHeight-imgHeight/2;
+        z = Math.random()*10-5;
+        posArray[ k + 0 ] = x;
+        posArray[ k + 1 ] = y;
+        posArray[ k + 2 ] = z;
+        posArray[ k + 3 ] = 0;
+
+        qtArray[ k + 0 ] = x;
+        qtArray[ k + 1 ] = y;
+        qtArray[ k + 2 ] = z;
+        qtArray[ k + 3 ] = 0;
+
+        velArray[ k + 0 ] = Math.random()*2-1;
+        velArray[ k + 1 ] = Math.random()*2-1;
+        velArray[ k + 2 ] = Math.random()*2-1;
+        velArray[ k + 3 ] = 100*Math.random();
+    }
+}
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize( window.innerWidth, window.innerHeight );
+}
+
+function click()
+{
+    isRotate = !isRotate;
+    startTimer = 3.0;
+}
+
+function animate() {
+    requestAnimationFrame( animate );
+    render();
+
+}
+function render() {
+    var time = performance.now();
+
+    if(startTimer > 0)
+    {
+        startTimer -=0.008;
+    } else
+    {
+        uniforms.isStart.value = startTimer;
+        isRotate = true;
+    }
+
+    if(isRotate)
+    {
+        timer += 0.003;
+        timer = timer%(Math.PI*2);
+      
+        cameraStartZ += (30.0 - cameraStartZ) * 0.02;
+        camera.position.z = cameraStartZ + Math.sin(timer) * 40.0;
+    } else
+    {
+        var speed = 0.045;
+        rotateVec.x += (0.0 - rotateVec.x) * speed;
+        rotateVec.y += (0.0 - rotateVec.y) * speed;
+        rotateVec.z += (0.0 - rotateVec.z) * speed;
+        scene.position.z +=(0.0 - scene.position.z) * speed;
+        mesh.position.z +=(0.0 - scene.position.z) * speed;
+        camera.position.z +=( cameraStartZ  - camera.position.z) * speed;
+        cameraStartZ += (70.0 - cameraStartZ) * speed;
+        timer +=(0.0 -timer)*speed;
+    }
+
+    scene.rotation.setFromVector3(rotateVec);
+    quaternionUniforms.pre_texturePosition = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
+
+    // uniforms.pre_texturePosition.value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
+    // uniforms.pre_textureVelocity.value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
+
+    gpuCompute.compute();
+
+    uniforms.textureOriginal.value = gpuCompute.getCurrentRenderTarget( quaternionVariable ).texture;
+    uniforms.texturePosition.value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
+    uniforms.textureVelocity.value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
+
+    shadowMaterial.uniforms.texturePosition.value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
+    shadowMaterial.uniforms.textureVelocity.value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
+
+
+
+    uniforms.time.value = timer;
+    shadowMaterial.uniforms.time.value = timer;
+    lastTime = timer;
+
+
+    // mesh.material = shadowMaterial;
+    // renderer.render( scene, shadowCamera, light.shadow.map);
+
+
+
+    mesh.material = material;
+    material.uniforms.shadowMap.value = light.shadow.map;
+    let m = new THREE.Matrix4();
+    material.uniforms.uMatrix.value = m.getInverse(mesh.matrix);
+    renderer.render( scene, camera );
+}
+
+document.onkeydown = function (e){
+    if(!e) e = window.event; 
+
+    
+
+    if(e.key === "h")
+    {
+        console.log($);
+        console.log($("#info"));
+        if(enableInfo)
+        {
+            $("#info").fadeOut("0.3");
+            enableInfo = false;
+        }else
+        {
+            $("#info").fadeIn("0.3");
+            enableInfo = true;
+        }
+    }
+};
diff --git a/impressionists-blobs/src/style.css b/impressionists-blobs/src/style.css
new file mode 100644
index 0000000..4c77dc5
--- /dev/null
+++ b/impressionists-blobs/src/style.css
@@ -0,0 +1,52 @@
+a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{height:100%}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{margin:0;font-family:Monospace;font-size:13px;text-align:center}
+#container,body{
+    position:relative;width:100%;height:100%;overflow:hidden
+}
+#container{
+    background:radial-gradient(ellipse at center,#7e2f9c 1%,#191325 100%)
+}
+#stats{display:none}canvas{position:fixed;left:0;top:0}
+#info {
+    width:100%;height:100%;
+    top: 40px;
+    left: 40px;
+    position: fixed;
+    z-index: 999;
+    text-align: left;
+    color: #fff;
+    font-family: 'Khula', sans-serif;
+}
+
+h1 {
+    font-size: 22px;
+
+    display: inline-block;
+    margin: 0;
+    margin-bottom: 10px;
+    padding: 8px;
+    padding-top: 12px;
+ 
+    background: linear-gradient(135deg, rgba(37,219,237,0.8) 0%,rgba(183,60,210,0.8) 100%);
+}
+a {
+    color: #fff;
+    margin: 0;
+    font-size: 14px;
+    display: inline-block;
+    padding: 6px;
+    padding-top: 8px;
+    margin-bottom: 20px;
+    background: linear-gradient(135deg, rgba(37,219,237,0.8) 0%,rgba(183,60,210,0.8) 100%);
+}
+
+p {
+    color: #fff;
+    margin: 0;
+    font-size: 16px;
+    display: inline-block;
+    margin-bottom: 14px;
+    /*padding: 8px;*/
+    /*padding-top: 12px;*/
+    /*background: linear-gradient(135deg, rgba(37,219,237,0.8) 0%,rgba(143,60,210,0.8) 100%);*/
+}
+/*# sourceMappingURL=main.css.map*/
\ No newline at end of file
diff --git a/infinite-primordial-creatures/README.markdown b/infinite-primordial-creatures/README.markdown
new file mode 100644
index 0000000..472b448
--- /dev/null
+++ b/infinite-primordial-creatures/README.markdown
@@ -0,0 +1,5 @@
+# Infinite primordial creatures
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shubniggurath/pen/yLoMxvW](https://codepen.io/shubniggurath/pen/yLoMxvW).
+
+Click + drag. Using 9-tap offset to create globs of creatures. 
diff --git a/infinite-primordial-creatures/dist/index.html b/infinite-primordial-creatures/dist/index.html
new file mode 100644
index 0000000..eed390a
--- /dev/null
+++ b/infinite-primordial-creatures/dist/index.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Infinite primordial creatures</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script type="text/fragment" id="fragShader">
+  precision highp float;
+
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec2 u_mouse;
+  uniform vec2 u_position;
+  uniform float u_zoom;
+uniform sampler2D s_noise;
+
+uniform sampler2D b_noise;
+
+varying vec2 v_uv;
+
+
+vec2 getScreenSpace() {
+  vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+
+  return uv;
+}
+  float rand(vec2 n) { 
+    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+  }
+  // Procedural colour palettes curtesy Inigo Quilez
+  // https://iquilezles.org/www/articles/palettes/palettes.htm
+  vec3 palette( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) {
+    return a + b*cos( 6.28318*(c*t+d) );
+  }
+  vec3 getColour(float fid, vec3 c) {
+    
+    return palette(fid / 9., vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),c.gbr,c);
+  }
+  
+  // Logarithmic smin curtesy Inigo Quilez
+  // https://iquilezles.org/www/articles/smin/smin.htm
+  vec2 smin( in float a, in float b, in float k ) {
+    
+      float f1 = exp2( -k*a );
+      float f2 = exp2( -k*b );
+      return vec2(-log2(f1+f2)/k,f2);
+  }
+  void render(in vec2 uv, out vec4 colour) {
+  
+    vec3 c = vec3(0.05,0.09,0.15) * (1.+sin(uv.y));
+    uv *= 20.;
+    
+    vec2 id = floor(uv * .5);
+    vec2 cell = mod(uv, 2.) - 1.;
+    vec2 id9 = floor((id / 3.));
+    float r9 = rand(id9);
+    float r92 = rand(id9 - 100.);
+    float r93 = rand(id9 + 100.);
+    
+    vec4 cellcolour = vec4(1);
+    float dist = 10.;
+    
+    for(float x = -2.; x <= 2.; x+=2.) {
+      for(float y = -2.; y <= 2.; y+=2.) {
+        vec2 offset = vec2(x,y);
+        vec2 cid = floor((uv - offset) * .5);
+        
+        vec2 _id = mod(cid, 3.);
+        float fid = _id.x + _id.y * 3.;
+        
+        float rnd = rand(cid+100.);
+        
+        float size = .5 + rnd * .5;
+        float r = .5 + .2 * rand(cid-100.);
+        float t = (100. * -r + u_time * (5. + 5. * rand(cid+300.)) * (r9 + .5));
+        
+        vec2 coffset = (_id - 1.) * clamp(rand(cid), .8, 1.) * (.8+r92) + vec2(cos(t), sin(t)) * r;
+        
+        
+        float field = length(cell + offset + coffset)-size;
+        
+        vec2 db = smin( dist, field, 15.0 );
+        
+        dist = db.x;
+        
+        cellcolour += vec4(getColour(fid, vec3(r9, r92,r93))*db.y, db.y);
+        
+        
+      }
+    }
+    
+    cellcolour.xyz /= cellcolour.w;
+    
+    float shape = smoothstep(0.02, -.02, dist);
+    
+    c = mix(c, cellcolour.rgb, shape);
+    
+    colour = vec4(c, 1);
+  }
+void main() {
+  vec2 uv = getScreenSpace();
+  
+  uv *= u_zoom;
+  uv += u_position - 10.;
+  
+  render(uv, gl_FragColor);
+}
+</script>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/infinite-primordial-creatures/dist/script.js b/infinite-primordial-creatures/dist/script.js
new file mode 100644
index 0000000..a4fd6bd
--- /dev/null
+++ b/infinite-primordial-creatures/dist/script.js
@@ -0,0 +1,84 @@
+console.clear();
+
+import { Vec2 } from 'https://cdn.skypack.dev/wtc-math';
+import { FragmentShader, Texture, Uniform } from 'https://cdn.skypack.dev/wtc-gl@1.0.0-beta.23';
+
+const shaderF = document.querySelector('#fragShader').innerText;
+
+// Create the fragment shader wrapper
+const FSWrapper = new FragmentShader({
+  fragment: shaderF });
+
+
+const { gl, uniforms, renderer } = FSWrapper;
+const dpr = renderer.dpr;
+console.log(dpr);
+
+// Create the texture
+const texture = new Texture(gl, {
+  wrapS: gl.REPEAT,
+  wrapT: gl.REPEAT });
+
+// Load the image into the uniform
+const img = new Image();
+img.crossOrigin = "anonymous";
+img.src = "https://assets.codepen.io/982762/noise.png";
+img.onload = () => texture.image = img;
+
+uniforms.s_noise = new Uniform({
+  name: "noise",
+  value: texture,
+  kind: "texture" });
+
+
+uniforms.u_position = new Uniform({
+  name: "position",
+  value: [0, 0],
+  kind: "vec2" });
+
+uniforms.u_zoom = new Uniform({
+  name: "zoom",
+  value: 1.,
+  kind: "float" });
+
+
+let zoom = uniforms.u_zoom.value;
+let tzoom = 1.;
+let velocity = new Vec2(0, 0);
+let lastmouse = new Vec2(0, 0);
+let pointerdown = false;
+window.addEventListener('wheel', e => {
+  tzoom += e.deltaY * 0.001 * uniforms.u_zoom.value;
+  tzoom = Math.min(20., Math.max(tzoom, .1));
+});
+window.addEventListener('pointerdown', e => {
+  pointerdown = true;
+  lastmouse = new Vec2(e.x, e.y);
+});
+window.addEventListener('pointerup', e => {
+  pointerdown = false;
+});
+window.addEventListener('pointermove', e => {
+  if (pointerdown) {
+    const thismouse = new Vec2(e.x, e.y);
+    let dd = 1. / Math.min(window.innerWidth, window.innerHeight);
+    dd *= uniforms.u_zoom.value;
+    const diff = lastmouse.subtract(thismouse);
+    velocity = diff.clone();
+    uniforms.u_position.value = new Vec2(...uniforms.u_position.value).add(diff.multiply(new Vec2(dd, -dd))).array;
+    lastmouse = thismouse;
+  }
+});
+const runmouse = function (d) {
+  const scalar = pointerdown ? .1 : .98;
+  if (velocity.length > 0.01) {
+    velocity.scale(scalar);
+    let dd = 1. / Math.min(window.innerWidth, window.innerHeight);
+    dd *= uniforms.u_zoom.value;
+    uniforms.u_position.value = new Vec2(...uniforms.u_position.value).add(velocity.multiplyNew(new Vec2(dd, -dd))).array;
+  }
+  zoom += (tzoom - zoom) * .1;
+  uniforms.u_zoom.value = zoom;
+  requestAnimationFrame(runmouse);
+};
+requestAnimationFrame(runmouse);
\ No newline at end of file
diff --git a/infinite-primordial-creatures/dist/style.css b/infinite-primordial-creatures/dist/style.css
new file mode 100644
index 0000000..410e30a
--- /dev/null
+++ b/infinite-primordial-creatures/dist/style.css
@@ -0,0 +1,12 @@
+body {
+  background: #333;
+  color: #fff;
+  font-family: sans-serif;
+}
+body,
+html {
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+}
+canvas { width:100%; height: 100%; touch-action: none; }
\ No newline at end of file
diff --git a/infinite-primordial-creatures/license.txt b/infinite-primordial-creatures/license.txt
new file mode 100644
index 0000000..f618317
--- /dev/null
+++ b/infinite-primordial-creatures/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Liam Egan (https://codepen.io/shubniggurath/pen/yLoMxvW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/infinite-primordial-creatures/src/index.html b/infinite-primordial-creatures/src/index.html
new file mode 100644
index 0000000..13e26af
--- /dev/null
+++ b/infinite-primordial-creatures/src/index.html
@@ -0,0 +1,102 @@
+<script type="text/fragment" id="fragShader">
+  precision highp float;
+
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec2 u_mouse;
+  uniform vec2 u_position;
+  uniform float u_zoom;
+uniform sampler2D s_noise;
+
+uniform sampler2D b_noise;
+
+varying vec2 v_uv;
+
+
+vec2 getScreenSpace() {
+  vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+
+  return uv;
+}
+  float rand(vec2 n) { 
+    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+  }
+  // Procedural colour palettes curtesy Inigo Quilez
+  // https://iquilezles.org/www/articles/palettes/palettes.htm
+  vec3 palette( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) {
+    return a + b*cos( 6.28318*(c*t+d) );
+  }
+  vec3 getColour(float fid, vec3 c) {
+    
+    return palette(fid / 9., vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),c.gbr,c);
+  }
+  
+  // Logarithmic smin curtesy Inigo Quilez
+  // https://iquilezles.org/www/articles/smin/smin.htm
+  vec2 smin( in float a, in float b, in float k ) {
+    
+      float f1 = exp2( -k*a );
+      float f2 = exp2( -k*b );
+      return vec2(-log2(f1+f2)/k,f2);
+  }
+  void render(in vec2 uv, out vec4 colour) {
+  
+    vec3 c = vec3(0.05,0.09,0.15) * (1.+sin(uv.y));
+    uv *= 20.;
+    
+    vec2 id = floor(uv * .5);
+    vec2 cell = mod(uv, 2.) - 1.;
+    vec2 id9 = floor((id / 3.));
+    float r9 = rand(id9);
+    float r92 = rand(id9 - 100.);
+    float r93 = rand(id9 + 100.);
+    
+    vec4 cellcolour = vec4(1);
+    float dist = 10.;
+    
+    for(float x = -2.; x <= 2.; x+=2.) {
+      for(float y = -2.; y <= 2.; y+=2.) {
+        vec2 offset = vec2(x,y);
+        vec2 cid = floor((uv - offset) * .5);
+        
+        vec2 _id = mod(cid, 3.);
+        float fid = _id.x + _id.y * 3.;
+        
+        float rnd = rand(cid+100.);
+        
+        float size = .5 + rnd * .5;
+        float r = .5 + .2 * rand(cid-100.);
+        float t = (100. * -r + u_time * (5. + 5. * rand(cid+300.)) * (r9 + .5));
+        
+        vec2 coffset = (_id - 1.) * clamp(rand(cid), .8, 1.) * (.8+r92) + vec2(cos(t), sin(t)) * r;
+        
+        
+        float field = length(cell + offset + coffset)-size;
+        
+        vec2 db = smin( dist, field, 15.0 );
+        
+        dist = db.x;
+        
+        cellcolour += vec4(getColour(fid, vec3(r9, r92,r93))*db.y, db.y);
+        
+        
+      }
+    }
+    
+    cellcolour.xyz /= cellcolour.w;
+    
+    float shape = smoothstep(0.02, -.02, dist);
+    
+    c = mix(c, cellcolour.rgb, shape);
+    
+    colour = vec4(c, 1);
+  }
+void main() {
+  vec2 uv = getScreenSpace();
+  
+  uv *= u_zoom;
+  uv += u_position - 10.;
+  
+  render(uv, gl_FragColor);
+}
+</script>
\ No newline at end of file
diff --git a/infinite-primordial-creatures/src/script.babel b/infinite-primordial-creatures/src/script.babel
new file mode 100644
index 0000000..1f55334
--- /dev/null
+++ b/infinite-primordial-creatures/src/script.babel
@@ -0,0 +1,84 @@
+console.clear();
+
+import { Vec2 } from 'https://cdn.skypack.dev/wtc-math';
+import { FragmentShader, Texture, Uniform } from 'https://cdn.skypack.dev/wtc-gl@1.0.0-beta.23';
+
+const shaderF = document.querySelector('#fragShader').innerText;
+
+// Create the fragment shader wrapper
+const FSWrapper = new FragmentShader({
+  fragment: shaderF
+});
+
+const { gl, uniforms, renderer } = FSWrapper;
+const dpr = renderer.dpr;
+console.log(dpr);
+
+// Create the texture
+const texture = new Texture(gl, {
+  wrapS: gl.REPEAT,
+  wrapT: gl.REPEAT
+});
+// Load the image into the uniform
+const img = new Image();
+img.crossOrigin = "anonymous";
+img.src = "https://assets.codepen.io/982762/noise.png";
+img.onload = () => (texture.image = img);
+
+uniforms.s_noise = new Uniform({
+  name: "noise",
+  value: texture,
+  kind: "texture"
+});
+
+uniforms.u_position = new Uniform({
+  name: "position",
+  value: [0,0],
+  kind: "vec2"
+});
+uniforms.u_zoom = new Uniform({
+  name: "zoom",
+  value: 1.,
+  kind: "float"
+});
+
+let zoom = uniforms.u_zoom.value;
+let tzoom = 1.;
+let velocity = new Vec2(0,0);
+let lastmouse = new Vec2(0,0);
+let pointerdown = false;
+window.addEventListener('wheel', (e) => {
+  tzoom += e.deltaY * 0.001 * (uniforms.u_zoom.value);
+  tzoom = Math.min(20., Math.max(tzoom, .1));
+});
+window.addEventListener('pointerdown', (e)=> {
+  pointerdown = true;
+  lastmouse = new Vec2(e.x,e.y);
+});
+window.addEventListener('pointerup', (e)=> {
+  pointerdown = false;
+});
+window.addEventListener('pointermove', (e)=> {
+  if(pointerdown) {
+    const thismouse = new Vec2(e.x,e.y);
+    let dd = 1./Math.min(window.innerWidth, window.innerHeight);
+    dd *= uniforms.u_zoom.value;
+    const diff = lastmouse.subtract(thismouse);
+    velocity = diff.clone();
+    uniforms.u_position.value = new Vec2(...uniforms.u_position.value).add(diff.multiply(new Vec2(dd, -dd))).array;
+    lastmouse = thismouse;
+  }
+});
+const runmouse = function(d) {
+  const scalar = pointerdown ? .1 : .98;
+  if(velocity.length > 0.01) {
+    velocity.scale(scalar);
+    let dd = 1./Math.min(window.innerWidth, window.innerHeight);
+    dd *= uniforms.u_zoom.value;
+    uniforms.u_position.value = new Vec2(...uniforms.u_position.value).add(velocity.multiplyNew(new Vec2(dd, -dd))).array;
+  }
+  zoom += (tzoom - zoom) * .1;
+  uniforms.u_zoom.value = zoom;
+  requestAnimationFrame(runmouse);
+}
+requestAnimationFrame(runmouse);
\ No newline at end of file
diff --git a/infinite-primordial-creatures/src/style.css b/infinite-primordial-creatures/src/style.css
new file mode 100644
index 0000000..85c15bb
--- /dev/null
+++ b/infinite-primordial-creatures/src/style.css
@@ -0,0 +1,12 @@
+body {
+  background: #333;
+  color: #fff;
+  font-family: sans-serif;
+}
+body,
+html {
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+}
+canvas { width:100%; height: 100%; touch-action: none; }
diff --git a/inktober-01grid/README.markdown b/inktober-01grid/README.markdown
new file mode 100644
index 0000000..4d6dfcd
--- /dev/null
+++ b/inktober-01grid/README.markdown
@@ -0,0 +1,4 @@
+# Inktober 01 - Grid
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/halvves/pen/pozMXXg](https://codepen.io/halvves/pen/pozMXXg).
+
+ 
\ No newline at end of file
diff --git a/inktober-01grid/dist/index.html b/inktober-01grid/dist/index.html
new file mode 100644
index 0000000..8e236c5
--- /dev/null
+++ b/inktober-01grid/dist/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Inktober 01 - Grid</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Cormorant:300i,600&amp;display=swap'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<a href="https://github.com/halvves/shader-doodle" target="_blank">
+  <div class="desc">
+    <h1>01</h1>
+    <h2>Grid</h2>
+  </div>
+  <shader-doodle>
+    <script type="x-shader/x-fragment" />
+      const vec3 blue = vec3(.431372549, .521568627, .631372549);
+
+      void main() {
+        vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+
+        // grid
+        const float grid_resolution = 10.;
+        vec2 fpos = fract(uv * grid_resolution);
+        vec2 ipos = floor(uv * grid_resolution);
+
+        // distort grid items
+        fpos.x = fpos.x + sin(fpos.y * 5. + u_time) * .25 * fpos.x;
+
+        // rings-ish
+        float v = floor(fract(dot(ipos * .3 + .5, fpos * .3 - .5) * 2.) + .25);
+
+        // borders
+        const float b_size = .06;
+        const float b_smooth = .01;
+        vec2 fpos_centered = fpos - vec2(.5);
+        const float b_distance = .5 - b_size;
+        v = max(v, max(
+          smoothstep(-b_smooth, b_smooth, abs(fpos_centered.x) - b_distance),
+          smoothstep(-b_smooth, b_smooth, abs(fpos_centered.y) - b_distance))
+        );
+
+        gl_FragColor = vec4(blue, 1. - v);
+      }
+    </script>
+  </shader-doodle>
+</a>
+<!-- partial -->
+  <script src='https://unpkg.com/shader-doodle@1.0.0-alpha.0/dist/shader-doodle.umd.js'></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/inktober-01grid/dist/style.css b/inktober-01grid/dist/style.css
new file mode 100644
index 0000000..933447e
--- /dev/null
+++ b/inktober-01grid/dist/style.css
@@ -0,0 +1,78 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  display: flex;
+  min-height: 100vh;
+  padding: 1rem;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  background-color: #f7f3e9;
+  font-family: 'Cormorant', serif;
+  overflow: hidden;
+}
+
+a,
+a:link,
+a:visited,
+a:active,
+a:hover {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+  color: #000;
+  text-decoration: none;
+}
+
+.desc {
+  display: flex;
+  min-width: 15rem;
+  max-width: 30rem;
+  align-self: stretch;
+  flex-direction: column;
+  flex: 1 1 auto;
+  padding-right: 5rem;
+}
+
+h1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  margin: 0;
+  padding: 0.4rem 0;
+  border-bottom: 1px solid #000;
+  font-size: 6rem;
+  line-height: 1;
+  font-weight: 600;
+  flex: 1 1 50%;
+}
+
+h2 {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin: 0;
+  padding: 1.1rem 0;
+  font-size: 2.4rem;
+  font-style: italic;
+  font-weight: 300;
+  line-height: 1;
+  flex: 1 1 50%;
+}
+
+shader-doodle {
+  display: block;
+  width: calc(100vmin - 2rem);
+  height: calc(100vmin - 2rem);
+  max-width: 30rem;
+  max-height: 30rem;
+}
\ No newline at end of file
diff --git a/inktober-01grid/license.txt b/inktober-01grid/license.txt
new file mode 100644
index 0000000..46fca57
--- /dev/null
+++ b/inktober-01grid/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by halvves (https://codepen.io/halvves/pen/pozMXXg)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/inktober-01grid/src/index.html b/inktober-01grid/src/index.html
new file mode 100644
index 0000000..e1e51c6
--- /dev/null
+++ b/inktober-01grid/src/index.html
@@ -0,0 +1,38 @@
+<a href="https://github.com/halvves/shader-doodle" target="_blank">
+  <div class="desc">
+    <h1>01</h1>
+    <h2>Grid</h2>
+  </div>
+  <shader-doodle>
+    <script type="x-shader/x-fragment" />
+      const vec3 blue = vec3(.431372549, .521568627, .631372549);
+
+      void main() {
+        vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+
+        // grid
+        const float grid_resolution = 10.;
+        vec2 fpos = fract(uv * grid_resolution);
+        vec2 ipos = floor(uv * grid_resolution);
+
+        // distort grid items
+        fpos.x = fpos.x + sin(fpos.y * 5. + u_time) * .25 * fpos.x;
+
+        // rings-ish
+        float v = floor(fract(dot(ipos * .3 + .5, fpos * .3 - .5) * 2.) + .25);
+
+        // borders
+        const float b_size = .06;
+        const float b_smooth = .01;
+        vec2 fpos_centered = fpos - vec2(.5);
+        const float b_distance = .5 - b_size;
+        v = max(v, max(
+          smoothstep(-b_smooth, b_smooth, abs(fpos_centered.x) - b_distance),
+          smoothstep(-b_smooth, b_smooth, abs(fpos_centered.y) - b_distance))
+        );
+
+        gl_FragColor = vec4(blue, 1. - v);
+      }
+    </script>
+  </shader-doodle>
+</a>
diff --git a/inktober-01grid/src/style.css b/inktober-01grid/src/style.css
new file mode 100644
index 0000000..933447e
--- /dev/null
+++ b/inktober-01grid/src/style.css
@@ -0,0 +1,78 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  display: flex;
+  min-height: 100vh;
+  padding: 1rem;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  background-color: #f7f3e9;
+  font-family: 'Cormorant', serif;
+  overflow: hidden;
+}
+
+a,
+a:link,
+a:visited,
+a:active,
+a:hover {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+  color: #000;
+  text-decoration: none;
+}
+
+.desc {
+  display: flex;
+  min-width: 15rem;
+  max-width: 30rem;
+  align-self: stretch;
+  flex-direction: column;
+  flex: 1 1 auto;
+  padding-right: 5rem;
+}
+
+h1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  margin: 0;
+  padding: 0.4rem 0;
+  border-bottom: 1px solid #000;
+  font-size: 6rem;
+  line-height: 1;
+  font-weight: 600;
+  flex: 1 1 50%;
+}
+
+h2 {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin: 0;
+  padding: 1.1rem 0;
+  font-size: 2.4rem;
+  font-style: italic;
+  font-weight: 300;
+  line-height: 1;
+  flex: 1 1 50%;
+}
+
+shader-doodle {
+  display: block;
+  width: calc(100vmin - 2rem);
+  height: calc(100vmin - 2rem);
+  max-width: 30rem;
+  max-height: 30rem;
+}
\ No newline at end of file
diff --git a/inline-property-switching-with-custom-props/README.markdown b/inline-property-switching-with-custom-props/README.markdown
new file mode 100644
index 0000000..c1d1f3a
--- /dev/null
+++ b/inline-property-switching-with-custom-props/README.markdown
@@ -0,0 +1,5 @@
+# Inline Property Switching with Custom Props
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/argyleink/pen/KKVrwOz](https://codepen.io/argyleink/pen/KKVrwOz).
+
+
diff --git a/inline-property-switching-with-custom-props/dist/index.html b/inline-property-switching-with-custom-props/dist/index.html
new file mode 100644
index 0000000..777736f
--- /dev/null
+++ b/inline-property-switching-with-custom-props/dist/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Inline Property Switching with Custom Props</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel='stylesheet' href='https://gitcdn.xyz/repo/octoshrimpy/blokkfont/master/blokkfont.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>resize my viewport width</h1>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/inline-property-switching-with-custom-props/dist/style.css b/inline-property-switching-with-custom-props/dist/style.css
new file mode 100644
index 0000000..3dc4ca0
--- /dev/null
+++ b/inline-property-switching-with-custom-props/dist/style.css
@@ -0,0 +1,27 @@
+:root {
+  --media-sm: initial;
+}
+
+@media (max-width: 480px) {
+  :root {
+    --media-sm: ;
+  }
+}
+
+h1 {
+  color: var(--media-sm) red;
+}
+
+html {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+body {
+  min-block-size: 100%;
+  min-inline-size: 100%;
+  box-sizing: border-box;
+  display: grid;
+  place-content: center;
+  font-family: system-ui;
+}
\ No newline at end of file
diff --git a/inline-property-switching-with-custom-props/license.txt b/inline-property-switching-with-custom-props/license.txt
new file mode 100644
index 0000000..d286036
--- /dev/null
+++ b/inline-property-switching-with-custom-props/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Adam Argyle (https://codepen.io/argyleink/pen/KKVrwOz)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/inline-property-switching-with-custom-props/src/index.html b/inline-property-switching-with-custom-props/src/index.html
new file mode 100644
index 0000000..5676e71
--- /dev/null
+++ b/inline-property-switching-with-custom-props/src/index.html
@@ -0,0 +1 @@
+<h1>resize my viewport width</h1>
\ No newline at end of file
diff --git a/inline-property-switching-with-custom-props/src/style.css b/inline-property-switching-with-custom-props/src/style.css
new file mode 100644
index 0000000..3dc4ca0
--- /dev/null
+++ b/inline-property-switching-with-custom-props/src/style.css
@@ -0,0 +1,27 @@
+:root {
+  --media-sm: initial;
+}
+
+@media (max-width: 480px) {
+  :root {
+    --media-sm: ;
+  }
+}
+
+h1 {
+  color: var(--media-sm) red;
+}
+
+html {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+body {
+  min-block-size: 100%;
+  min-inline-size: 100%;
+  box-sizing: border-box;
+  display: grid;
+  place-content: center;
+  font-family: system-ui;
+}
\ No newline at end of file
diff --git a/inner-listener/README.markdown b/inner-listener/README.markdown
new file mode 100644
index 0000000..5a67db3
--- /dev/null
+++ b/inner-listener/README.markdown
@@ -0,0 +1,5 @@
+# Inner listener
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/murilopolese/pen/VwvxPpP](https://codepen.io/murilopolese/pen/VwvxPpP).
+
+
diff --git a/inner-listener/dist/index.html b/inner-listener/dist/index.html
new file mode 100644
index 0000000..acb5ec4
--- /dev/null
+++ b/inner-listener/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Inner listener</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main>
+  <img src="https://i.imgur.com/7SD5721.jpg" alt="">
+  <img src="https://i.imgur.com/7SD5721.jpg" alt="">
+  <img src="https://i.imgur.com/7SD5721.jpg" alt="">
+  <img src="https://i.imgur.com/7SD5721.jpg" alt="">
+</main>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/inner-listener/dist/style.css b/inner-listener/dist/style.css
new file mode 100644
index 0000000..ed1b2a0
--- /dev/null
+++ b/inner-listener/dist/style.css
@@ -0,0 +1,51 @@
+body {
+	margin: 0;
+}
+main {
+	width: 100vw;
+	height: 100vh;
+	position: relative;
+	overflow: hidden;
+}
+main img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	animation-duration: 4.5s;
+	animation-iteration-count: infinite;
+	animation-name: scaleUp;
+  border: 1px solid black;
+}
+main img:nth-child(1) {
+	animation-name: none;
+}
+main img:nth-child(2) {
+	animation-name: scaleUp;
+	animation-delay: 0.5s;
+}
+main img:nth-child(3) {
+	animation-name: scaleUp;
+	animation-delay: 1s;
+}
+main img:nth-child(4) {
+	animation-name: scaleUp;
+	animation-delay: 1.5s;
+}
+
+@keyframes scaleUp {
+	0% {
+		clip-path: circle(1vw at center);
+		transform: scale(0.8);
+		z-index: 10;
+	}
+	100% {
+		clip-path: circle(40vw at center);
+		transform: scale(1);
+		z-index: 1;
+	}
+}
\ No newline at end of file
diff --git a/inner-listener/license.txt b/inner-listener/license.txt
new file mode 100644
index 0000000..9830aab
--- /dev/null
+++ b/inner-listener/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Murilo Polese (https://codepen.io/murilopolese/pen/VwvxPpP)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/inner-listener/src/index.html b/inner-listener/src/index.html
new file mode 100644
index 0000000..a5245d3
--- /dev/null
+++ b/inner-listener/src/index.html
@@ -0,0 +1,6 @@
+<main>
+  <img src="https://i.imgur.com/7SD5721.jpg" alt="">
+  <img src="https://i.imgur.com/7SD5721.jpg" alt="">
+  <img src="https://i.imgur.com/7SD5721.jpg" alt="">
+  <img src="https://i.imgur.com/7SD5721.jpg" alt="">
+</main>
\ No newline at end of file
diff --git a/inner-listener/src/style.css b/inner-listener/src/style.css
new file mode 100644
index 0000000..ed1b2a0
--- /dev/null
+++ b/inner-listener/src/style.css
@@ -0,0 +1,51 @@
+body {
+	margin: 0;
+}
+main {
+	width: 100vw;
+	height: 100vh;
+	position: relative;
+	overflow: hidden;
+}
+main img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	animation-duration: 4.5s;
+	animation-iteration-count: infinite;
+	animation-name: scaleUp;
+  border: 1px solid black;
+}
+main img:nth-child(1) {
+	animation-name: none;
+}
+main img:nth-child(2) {
+	animation-name: scaleUp;
+	animation-delay: 0.5s;
+}
+main img:nth-child(3) {
+	animation-name: scaleUp;
+	animation-delay: 1s;
+}
+main img:nth-child(4) {
+	animation-name: scaleUp;
+	animation-delay: 1.5s;
+}
+
+@keyframes scaleUp {
+	0% {
+		clip-path: circle(1vw at center);
+		transform: scale(0.8);
+		z-index: 10;
+	}
+	100% {
+		clip-path: circle(40vw at center);
+		transform: scale(1);
+		z-index: 1;
+	}
+}
\ No newline at end of file
diff --git a/input-not-placeholder-shown/README.markdown b/input-not-placeholder-shown/README.markdown
new file mode 100644
index 0000000..9334096
--- /dev/null
+++ b/input-not-placeholder-shown/README.markdown
@@ -0,0 +1,4 @@
+# input :not(:placeholder-shown)
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/andreasstorm/pen/gKGbxo](https://codepen.io/andreasstorm/pen/gKGbxo).
+
+ 
\ No newline at end of file
diff --git a/input-not-placeholder-shown/dist/index.html b/input-not-placeholder-shown/dist/index.html
new file mode 100644
index 0000000..700ccd4
--- /dev/null
+++ b/input-not-placeholder-shown/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>input :not(:placeholder-shown)</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<label for="inp" class="inp">
+  <input type="text" id="inp" placeholder="&nbsp;">
+  <span class="label">Label</span>
+  <span class="border"></span>
+</label>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/input-not-placeholder-shown/dist/style.css b/input-not-placeholder-shown/dist/style.css
new file mode 100644
index 0000000..84cab0e
--- /dev/null
+++ b/input-not-placeholder-shown/dist/style.css
@@ -0,0 +1,73 @@
+html,
+body {
+  height: 100%;
+}
+body {
+  display: grid;
+  font-family: Avenir;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+}
+* {
+  box-sizing: border-box;
+}
+.inp {
+  position: relative;
+  margin: auto;
+  width: 100%;
+  max-width: 280px;
+}
+.inp .label {
+  position: absolute;
+  top: 16px;
+  left: 0;
+  font-size: 16px;
+  color: #9098a9;
+  font-weight: 500;
+  transform-origin: 0 0;
+  transition: all 0.2s ease;
+}
+.inp .border {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  background: #07f;
+  transform: scaleX(0);
+  transform-origin: 0 0;
+  transition: all 0.15s ease;
+}
+.inp input {
+  -webkit-appearance: none;
+  width: 100%;
+  border: 0;
+  font-family: inherit;
+  padding: 12px 0;
+  height: 48px;
+  font-size: 16px;
+  font-weight: 500;
+  border-bottom: 2px solid #c8ccd4;
+  background: none;
+  border-radius: 0;
+  color: #223254;
+  transition: all 0.15s ease;
+}
+.inp input:hover {
+  background: rgba(34,50,84,0.03);
+}
+.inp input:not(:placeholder-shown) + span {
+  color: #5a667f;
+  transform: translateY(-26px) scale(0.75);
+}
+.inp input:focus {
+  background: none;
+  outline: none;
+}
+.inp input:focus + span {
+  color: #07f;
+  transform: translateY(-26px) scale(0.75);
+}
+.inp input:focus + span + .border {
+  transform: scaleX(1);
+}
diff --git a/input-not-placeholder-shown/license.txt b/input-not-placeholder-shown/license.txt
new file mode 100644
index 0000000..8075276
--- /dev/null
+++ b/input-not-placeholder-shown/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Andreas Storm (https://codepen.io/andreasstorm/pen/gKGbxo)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/input-not-placeholder-shown/src/index.html b/input-not-placeholder-shown/src/index.html
new file mode 100644
index 0000000..92d9f45
--- /dev/null
+++ b/input-not-placeholder-shown/src/index.html
@@ -0,0 +1,5 @@
+<label for="inp" class="inp">
+  <input type="text" id="inp" placeholder="&nbsp;">
+  <span class="label">Label</span>
+  <span class="border"></span>
+</label>
\ No newline at end of file
diff --git a/input-not-placeholder-shown/src/style.styl b/input-not-placeholder-shown/src/style.styl
new file mode 100644
index 0000000..d883b7e
--- /dev/null
+++ b/input-not-placeholder-shown/src/style.styl
@@ -0,0 +1,65 @@
+html, body
+  height: 100%
+
+body
+  display: grid
+  font-family: Avenir
+  -webkit-text-size-adjust: 100%
+  -webkit-font-smoothing: antialiased
+  
+*
+  box-sizing: border-box
+  
+.inp
+  position: relative
+  margin: auto
+  width: 100%
+  max-width: 280px
+  //transform: rotateX(45deg) rotateY(-10deg) rotate(25deg) scale(2)
+  .label
+    position: absolute
+    top: 16px
+    left: 0
+    font-size: 16px
+    color: #9098A9
+    font-weight: 500
+    transform-origin: 0 0
+    transition: all .2s ease
+  .border
+    position: absolute
+    bottom: 0
+    left: 0
+    height: 2px
+    width: 100%
+    background #0077FF
+    transform: scaleX(0)
+    transform-origin: 0 0
+    transition: all .15s ease
+  input
+    -webkit-appearance: none
+    width: 100%
+    border: 0
+    font-family: inherit
+    padding: 12px 0
+    height: 48px
+    font-size: 16px
+    font-weight: 500
+    border-bottom: 2px solid #C8CCD4
+    background: none
+    border-radius: 0
+    color: #223254
+    transition: all .15s ease
+    &:hover
+      background: rgba(#223254,.03)
+    &:not(:placeholder-shown)
+      + span
+        color #5A667F
+        transform: translateY(-26px) scale(.75)
+    &:focus
+      background: none
+      outline: none
+      + span
+        color #0077FF
+        transform: translateY(-26px) scale(.75)
+        + .border
+            transform: scaleX(1)
\ No newline at end of file
diff --git a/instancedmesh-hierarchy-matrixworld/README.markdown b/instancedmesh-hierarchy-matrixworld/README.markdown
new file mode 100644
index 0000000..57d5012
--- /dev/null
+++ b/instancedmesh-hierarchy-matrixworld/README.markdown
@@ -0,0 +1,5 @@
+# InstancedMesh + hierarchy + .matrixWorld
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/prisoner849/pen/qBaNKNM](https://codepen.io/prisoner849/pen/qBaNKNM).
+
+
diff --git a/instancedmesh-hierarchy-matrixworld/dist/index.html b/instancedmesh-hierarchy-matrixworld/dist/index.html
new file mode 100644
index 0000000..9da6ab3
--- /dev/null
+++ b/instancedmesh-hierarchy-matrixworld/dist/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - InstancedMesh + hierarchy + .matrixWorld</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="text1">
+  <span class="retro">RETRO</span>
+</div>
+<div class="text2">
+  <span class="retro">WAVE</span>
+</div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/instancedmesh-hierarchy-matrixworld/dist/script.js b/instancedmesh-hierarchy-matrixworld/dist/script.js
new file mode 100644
index 0000000..2730968
--- /dev/null
+++ b/instancedmesh-hierarchy-matrixworld/dist/script.js
@@ -0,0 +1,203 @@
+import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.123.0/build/three.module.js";
+import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.123.0/examples/jsm/controls/OrbitControls.js";
+import { TWEEN } from "https://cdn.jsdelivr.net/npm/three@0.123.0/examples/jsm/libs/tween.module.min.js";
+
+let scene = new THREE.Scene();
+let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
+camera.position.set(-5, 10, 20);
+let renderer = new THREE.WebGLRenderer({antialias: true});
+renderer.setSize(innerWidth, innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const textureCube = generateCubeMap();
+
+let controls = new OrbitControls(camera, renderer.domElement);
+controls.enableZoom = false;
+controls.enablePan = false;
+controls.enableKeys = false;
+
+let square = new THREE.GridHelper(20, 1, 0xaaaaff, 0xaaaff);
+square.position.y = 0.01;
+scene.add(square);
+
+let grid = new THREE.GridHelper(20, 10, "magenta", "magenta");
+console.log(grid.geometry.attributes.position.count);
+let moveable = [];
+for(let i = 0; i < grid.geometry.attributes.position.count / 4; i++){
+  moveable.push(1, 1, 0, 0);
+}
+console.log(moveable.length)
+grid.geometry.setAttribute("moveable", new THREE.Float32BufferAttribute(moveable, 1));
+let uniforms = {
+  time: {value: 0},
+  speed: {value: 1},
+  size: {value: 20}
+}
+grid.material.onBeforeCompile = shader => {
+  shader.uniforms.time = uniforms.time;
+  shader.uniforms.speed = uniforms.speed;
+  shader.uniforms.size = uniforms.size;
+  shader.vertexShader = `
+    uniform float time;
+    uniform float speed;
+    uniform float size;
+    attribute float moveable;
+    ${shader.vertexShader}
+  `.replace(
+    `#include <begin_vertex>`,
+    `#include <begin_vertex>
+        
+        if (floor(moveable + 0.1) > 0.5){
+          float start = size * -0.5;
+          float zPos = mod( (position.z - start) + (time * speed), size) + start;
+          transformed.z = zPos;
+        }
+    `
+  );
+  console.log(shader.vertexShader)
+}
+scene.add(grid);
+
+// palm
+let base = new THREE.Object3D();
+
+let baseSpline = new THREE.CatmullRomCurve3([
+  new THREE.Vector2(),
+  new THREE.Vector2(3, 0),
+  new THREE.Vector2(2.5, -7),
+  new THREE.Vector2(-4, -6),
+  new THREE.Vector2(-4.8, 0)
+], true, "catmullrom", 0.1);
+let baseG = new THREE.ExtrudeBufferGeometry(new THREE.Shape(baseSpline.getPoints(50)), {depth: 0.2, bevelEnabled: true, bevelThickness: 0.8, bevelSize: 0.2});
+let baseObject = new THREE.Mesh(baseG, new THREE.MeshBasicMaterial({color: "magenta", wireframe: false, envMap: textureCube}));
+base.add(baseObject);
+scene.add(base);
+let phalanxes = [];
+let f1 = createFinger(new THREE.Object3D(), 0.8, false);   // pinky
+let f2 = createFinger(new THREE.Object3D(), 0.95, false);  // ring
+let f3 = createFinger(new THREE.Object3D(), 1, false);     // middle
+let f4 = createFinger(new THREE.Object3D(), 0.95, false);  // index
+let f5Base = new THREE.Object3D();
+let f5 = createFinger(new THREE.Object3D(), 0.75, true);  // thumb
+f5Base.add(f5);
+base.add(f1, f2, f3, f4, f5Base);
+
+f1.position.set( -4, 0.2, 0);
+f2.position.set( -2, 0.2, 0);
+f3.position.set(  0, 0.2, 0);
+f4.position.set(  2, 0.2, 0);
+f5Base.position.set(  3, -3, 0);
+f5Base.rotation.set( 0, 0, THREE.MathUtils.degToRad(-60));
+f5Base.updateMatrixWorld();
+
+let g = createPhalanxGeom(1, 3);
+let m = new THREE.MeshBasicMaterial({color: "aqua", wireframe: false, envMap: textureCube});
+let o = new THREE.InstancedMesh(g, m, phalanxes.length);
+phalanxes.forEach( (ph, i) => {
+  ph.updateMatrixWorld();
+  o.setMatrixAt(i, ph.matrixWorld);
+})
+scene.add(o);
+
+window.addEventListener( 'resize', onWindowResize, false );
+
+let t = new TWEEN.Tween({value: Math.PI * 0.075})
+  .to({value: Math.PI * 0.45}, 4000)
+  .easing(TWEEN.Easing.Quadratic.InOut)
+  .repeat(Infinity)
+  .yoyo(true)
+  .onUpdate(val => {
+    phalanxes.forEach((ph, i) => {
+      ph.rotation.x = val.value;
+      ph.updateMatrixWorld();
+      o.setMatrixAt(i, ph.matrixWorld)
+    });
+    o.instanceMatrix.needsUpdate = true;
+  });
+t.start();
+
+let clock = new THREE.Clock();
+
+renderer.setAnimationLoop(() => {
+  let t = clock.getElapsedTime();
+  TWEEN.update();
+  uniforms.time.value = t;
+  base.rotation.x = (Math.sin(t * 0.125) * 0.5 + 0.5) * -Math.PI * 0.5;
+  base.rotation.y = -t * 0.125;
+  renderer.render(scene, camera);
+});
+
+function onWindowResize() {
+
+  camera.aspect = innerWidth / innerHeight;
+  camera.updateProjectionMatrix();
+
+  renderer.setSize( innerWidth, innerHeight );
+
+}
+
+function createFinger(phalanx, scale, isThumb){
+  phalanxes.push(phalanx);
+  let current = phalanx;
+  for(let i = 0; i < (isThumb ? 1 : 2); i++){
+    let p = new THREE.Object3D();
+    p.position.y = 3;
+    p.scale.setScalar(0.85);
+    current.add(p);
+    phalanxes.push(p);
+    current = p;
+  }
+  phalanx.scale.setScalar(scale);
+  return phalanx;
+}
+
+function createPhalanxGeom(R, L){
+  
+  let r = R * 0.85;
+  let R1 = R - r;
+  let a = Math.asin(R1 / L);
+
+  let path = new THREE.Path();
+  path.absarc(0, 0, R, Math.PI * 1.5, a);
+  path.absarc(0, L, r, a, Math.PI * 0.5);
+  
+  let pts = path.getPoints(5);
+  
+  let g = new THREE.LatheBufferGeometry(pts);
+  
+  return g;
+}
+
+function generateCubeMap(){
+	
+  
+  let images = [];
+  
+  let c = document.createElement("canvas");
+  c.width = 4;
+  c.height = c.width;
+  let ctx = c.getContext("2d");
+  for(let i= 0; i < 6;i++){
+  	ctx.fillStyle = "#fff";
+    ctx.fillRect(0, 0, c.width, c.height);
+
+    for(let j = 0; j < (c.width * c.height) / 2; j++){
+      ctx.fillStyle = Math.random() < 0.5 ? "#f0f" : "#40f";
+      ctx.fillRect(
+        Math.floor(Math.random() * c.width),
+        Math.floor(Math.random() * c.height),
+        2,
+        1
+      );
+    }
+    
+    images.push(c.toDataURL());
+    
+  }
+  
+  let cm = new THREE.CubeTextureLoader().load(images);
+  
+  console.log(cm);
+  
+  return cm;
+}
\ No newline at end of file
diff --git a/instancedmesh-hierarchy-matrixworld/dist/style.css b/instancedmesh-hierarchy-matrixworld/dist/style.css
new file mode 100644
index 0000000..050cc12
--- /dev/null
+++ b/instancedmesh-hierarchy-matrixworld/dist/style.css
@@ -0,0 +1,29 @@
+/*@import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');*/
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@900&family=Rokkitt:wght@900&display=swap');
+body{
+  overflow: hidden;
+  margin: 0;
+}
+.text1 {
+  position: absolute;
+  top: 3vh;
+  left: calc(50% - 50vh);
+  /*right: 4vw;*/
+}
+.text2 {
+  position: absolute;
+  bottom: 4vh;
+  left: 50%;
+  /*right: 4vw;*/
+}
+.retro {
+  font-family: "Roboto Slab";
+  font-size: 13vh;
+  display: block;
+  /*transform: rotate(-15deg) skew(-25deg);*/
+  color: #000;
+  text-shadow: -0.5vh 0 #8800aa, 0 0.5vh #8800aa, 0.5vh 0 #aa0088, 0 -0.5vh #aa0088;
+  /*-webkit-text-fill-color: #cc00cc; 
+  -webkit-text-stroke-width: 0.5vh;
+  -webkit-text-stroke-color: #ff0044;*/
+}
\ No newline at end of file
diff --git a/instancedmesh-hierarchy-matrixworld/license.txt b/instancedmesh-hierarchy-matrixworld/license.txt
new file mode 100644
index 0000000..0fb2a68
--- /dev/null
+++ b/instancedmesh-hierarchy-matrixworld/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Paul (https://codepen.io/prisoner849/pen/qBaNKNM)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/instancedmesh-hierarchy-matrixworld/src/index.html b/instancedmesh-hierarchy-matrixworld/src/index.html
new file mode 100644
index 0000000..1985a80
--- /dev/null
+++ b/instancedmesh-hierarchy-matrixworld/src/index.html
@@ -0,0 +1,6 @@
+<div class="text1">
+  <span class="retro">RETRO</span>
+</div>
+<div class="text2">
+  <span class="retro">WAVE</span>
+</div>
\ No newline at end of file
diff --git a/instancedmesh-hierarchy-matrixworld/src/script.js b/instancedmesh-hierarchy-matrixworld/src/script.js
new file mode 100644
index 0000000..2730968
--- /dev/null
+++ b/instancedmesh-hierarchy-matrixworld/src/script.js
@@ -0,0 +1,203 @@
+import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.123.0/build/three.module.js";
+import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.123.0/examples/jsm/controls/OrbitControls.js";
+import { TWEEN } from "https://cdn.jsdelivr.net/npm/three@0.123.0/examples/jsm/libs/tween.module.min.js";
+
+let scene = new THREE.Scene();
+let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
+camera.position.set(-5, 10, 20);
+let renderer = new THREE.WebGLRenderer({antialias: true});
+renderer.setSize(innerWidth, innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const textureCube = generateCubeMap();
+
+let controls = new OrbitControls(camera, renderer.domElement);
+controls.enableZoom = false;
+controls.enablePan = false;
+controls.enableKeys = false;
+
+let square = new THREE.GridHelper(20, 1, 0xaaaaff, 0xaaaff);
+square.position.y = 0.01;
+scene.add(square);
+
+let grid = new THREE.GridHelper(20, 10, "magenta", "magenta");
+console.log(grid.geometry.attributes.position.count);
+let moveable = [];
+for(let i = 0; i < grid.geometry.attributes.position.count / 4; i++){
+  moveable.push(1, 1, 0, 0);
+}
+console.log(moveable.length)
+grid.geometry.setAttribute("moveable", new THREE.Float32BufferAttribute(moveable, 1));
+let uniforms = {
+  time: {value: 0},
+  speed: {value: 1},
+  size: {value: 20}
+}
+grid.material.onBeforeCompile = shader => {
+  shader.uniforms.time = uniforms.time;
+  shader.uniforms.speed = uniforms.speed;
+  shader.uniforms.size = uniforms.size;
+  shader.vertexShader = `
+    uniform float time;
+    uniform float speed;
+    uniform float size;
+    attribute float moveable;
+    ${shader.vertexShader}
+  `.replace(
+    `#include <begin_vertex>`,
+    `#include <begin_vertex>
+        
+        if (floor(moveable + 0.1) > 0.5){
+          float start = size * -0.5;
+          float zPos = mod( (position.z - start) + (time * speed), size) + start;
+          transformed.z = zPos;
+        }
+    `
+  );
+  console.log(shader.vertexShader)
+}
+scene.add(grid);
+
+// palm
+let base = new THREE.Object3D();
+
+let baseSpline = new THREE.CatmullRomCurve3([
+  new THREE.Vector2(),
+  new THREE.Vector2(3, 0),
+  new THREE.Vector2(2.5, -7),
+  new THREE.Vector2(-4, -6),
+  new THREE.Vector2(-4.8, 0)
+], true, "catmullrom", 0.1);
+let baseG = new THREE.ExtrudeBufferGeometry(new THREE.Shape(baseSpline.getPoints(50)), {depth: 0.2, bevelEnabled: true, bevelThickness: 0.8, bevelSize: 0.2});
+let baseObject = new THREE.Mesh(baseG, new THREE.MeshBasicMaterial({color: "magenta", wireframe: false, envMap: textureCube}));
+base.add(baseObject);
+scene.add(base);
+let phalanxes = [];
+let f1 = createFinger(new THREE.Object3D(), 0.8, false);   // pinky
+let f2 = createFinger(new THREE.Object3D(), 0.95, false);  // ring
+let f3 = createFinger(new THREE.Object3D(), 1, false);     // middle
+let f4 = createFinger(new THREE.Object3D(), 0.95, false);  // index
+let f5Base = new THREE.Object3D();
+let f5 = createFinger(new THREE.Object3D(), 0.75, true);  // thumb
+f5Base.add(f5);
+base.add(f1, f2, f3, f4, f5Base);
+
+f1.position.set( -4, 0.2, 0);
+f2.position.set( -2, 0.2, 0);
+f3.position.set(  0, 0.2, 0);
+f4.position.set(  2, 0.2, 0);
+f5Base.position.set(  3, -3, 0);
+f5Base.rotation.set( 0, 0, THREE.MathUtils.degToRad(-60));
+f5Base.updateMatrixWorld();
+
+let g = createPhalanxGeom(1, 3);
+let m = new THREE.MeshBasicMaterial({color: "aqua", wireframe: false, envMap: textureCube});
+let o = new THREE.InstancedMesh(g, m, phalanxes.length);
+phalanxes.forEach( (ph, i) => {
+  ph.updateMatrixWorld();
+  o.setMatrixAt(i, ph.matrixWorld);
+})
+scene.add(o);
+
+window.addEventListener( 'resize', onWindowResize, false );
+
+let t = new TWEEN.Tween({value: Math.PI * 0.075})
+  .to({value: Math.PI * 0.45}, 4000)
+  .easing(TWEEN.Easing.Quadratic.InOut)
+  .repeat(Infinity)
+  .yoyo(true)
+  .onUpdate(val => {
+    phalanxes.forEach((ph, i) => {
+      ph.rotation.x = val.value;
+      ph.updateMatrixWorld();
+      o.setMatrixAt(i, ph.matrixWorld)
+    });
+    o.instanceMatrix.needsUpdate = true;
+  });
+t.start();
+
+let clock = new THREE.Clock();
+
+renderer.setAnimationLoop(() => {
+  let t = clock.getElapsedTime();
+  TWEEN.update();
+  uniforms.time.value = t;
+  base.rotation.x = (Math.sin(t * 0.125) * 0.5 + 0.5) * -Math.PI * 0.5;
+  base.rotation.y = -t * 0.125;
+  renderer.render(scene, camera);
+});
+
+function onWindowResize() {
+
+  camera.aspect = innerWidth / innerHeight;
+  camera.updateProjectionMatrix();
+
+  renderer.setSize( innerWidth, innerHeight );
+
+}
+
+function createFinger(phalanx, scale, isThumb){
+  phalanxes.push(phalanx);
+  let current = phalanx;
+  for(let i = 0; i < (isThumb ? 1 : 2); i++){
+    let p = new THREE.Object3D();
+    p.position.y = 3;
+    p.scale.setScalar(0.85);
+    current.add(p);
+    phalanxes.push(p);
+    current = p;
+  }
+  phalanx.scale.setScalar(scale);
+  return phalanx;
+}
+
+function createPhalanxGeom(R, L){
+  
+  let r = R * 0.85;
+  let R1 = R - r;
+  let a = Math.asin(R1 / L);
+
+  let path = new THREE.Path();
+  path.absarc(0, 0, R, Math.PI * 1.5, a);
+  path.absarc(0, L, r, a, Math.PI * 0.5);
+  
+  let pts = path.getPoints(5);
+  
+  let g = new THREE.LatheBufferGeometry(pts);
+  
+  return g;
+}
+
+function generateCubeMap(){
+	
+  
+  let images = [];
+  
+  let c = document.createElement("canvas");
+  c.width = 4;
+  c.height = c.width;
+  let ctx = c.getContext("2d");
+  for(let i= 0; i < 6;i++){
+  	ctx.fillStyle = "#fff";
+    ctx.fillRect(0, 0, c.width, c.height);
+
+    for(let j = 0; j < (c.width * c.height) / 2; j++){
+      ctx.fillStyle = Math.random() < 0.5 ? "#f0f" : "#40f";
+      ctx.fillRect(
+        Math.floor(Math.random() * c.width),
+        Math.floor(Math.random() * c.height),
+        2,
+        1
+      );
+    }
+    
+    images.push(c.toDataURL());
+    
+  }
+  
+  let cm = new THREE.CubeTextureLoader().load(images);
+  
+  console.log(cm);
+  
+  return cm;
+}
\ No newline at end of file
diff --git a/instancedmesh-hierarchy-matrixworld/src/style.css b/instancedmesh-hierarchy-matrixworld/src/style.css
new file mode 100644
index 0000000..050cc12
--- /dev/null
+++ b/instancedmesh-hierarchy-matrixworld/src/style.css
@@ -0,0 +1,29 @@
+/*@import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');*/
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@900&family=Rokkitt:wght@900&display=swap');
+body{
+  overflow: hidden;
+  margin: 0;
+}
+.text1 {
+  position: absolute;
+  top: 3vh;
+  left: calc(50% - 50vh);
+  /*right: 4vw;*/
+}
+.text2 {
+  position: absolute;
+  bottom: 4vh;
+  left: 50%;
+  /*right: 4vw;*/
+}
+.retro {
+  font-family: "Roboto Slab";
+  font-size: 13vh;
+  display: block;
+  /*transform: rotate(-15deg) skew(-25deg);*/
+  color: #000;
+  text-shadow: -0.5vh 0 #8800aa, 0 0.5vh #8800aa, 0.5vh 0 #aa0088, 0 -0.5vh #aa0088;
+  /*-webkit-text-fill-color: #cc00cc; 
+  -webkit-text-stroke-width: 0.5vh;
+  -webkit-text-stroke-color: #ff0044;*/
+}
\ No newline at end of file
diff --git a/interaction-of-color-plate-xxiv-1-the-goethe-triangle/README.markdown b/interaction-of-color-plate-xxiv-1-the-goethe-triangle/README.markdown
new file mode 100644
index 0000000..9c437dc
--- /dev/null
+++ b/interaction-of-color-plate-xxiv-1-the-goethe-triangle/README.markdown
@@ -0,0 +1,4 @@
+# Interaction of Color, Plate XXIV-1, The Goethe Triangle
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/noraspice/pen/VvZOgY](https://codepen.io/noraspice/pen/VvZOgY).
+
+ Adapted from Josef Albers' book 'Interaction of Color' -- the Goethe color triangle showing primary, secondary, and tertiary colors. Also, fun with SASS math and functions.
\ No newline at end of file
diff --git a/interaction-of-color-plate-xxiv-1-the-goethe-triangle/dist/index.html b/interaction-of-color-plate-xxiv-1-the-goethe-triangle/dist/index.html
new file mode 100644
index 0000000..a20bfa7
--- /dev/null
+++ b/interaction-of-color-plate-xxiv-1-the-goethe-triangle/dist/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Interaction of Color, Plate XXIV-1, The Goethe Triangle</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<figure>
+	<figcaption>
+		<h1>The Goethe Triangle</h1>
+		<p>It is probably the mose condensed and cler system of presentation of an essential order in the vast world of color.<br>
+			Within the 2 dimensions of an equilateral triangle&mdash;subdivided in 9 similar triangles&mdash; are 3 primaries, 3 secondaries, annd (unexpectedly) 3 tertiaries, all placed very sensibly.
+		</p>
+	</figcaption>
+	<div class="wrap">
+		<span class="primary red"></span>
+		<span class="primary blue"></span>
+		<span class="primary yellow"></span>
+		<span class="secondary purple"></span>
+		<span class="secondary orange"></span>
+		<span class="secondary green"></span>
+		<span class="tertiary mauve"></span>
+		<span class="tertiary slate"></span>
+		<span class="tertiary beige"></span>
+	</div>
+</figure>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/interaction-of-color-plate-xxiv-1-the-goethe-triangle/dist/style.css b/interaction-of-color-plate-xxiv-1-the-goethe-triangle/dist/style.css
new file mode 100644
index 0000000..9dc3577
--- /dev/null
+++ b/interaction-of-color-plate-xxiv-1-the-goethe-triangle/dist/style.css
@@ -0,0 +1,126 @@
+body {
+  background: #F9FAEE;
+}
+
+.wrap {
+  width: 103.9230484541vh;
+  height: 90vh;
+  margin: 5vh auto;
+  position: relative;
+}
+
+.wrap > span {
+  position: absolute;
+  transition: all 1s ease-in-out;
+}
+
+.red {
+  top: 0;
+  left: 34.6410161514vh;
+  border-style: solid;
+  border-color: transparent;
+  display: inline-block;
+  border-bottom-color: #c83723;
+  border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
+}
+
+.yellow {
+  bottom: 0;
+  left: 0;
+  border-style: solid;
+  border-color: transparent;
+  display: inline-block;
+  border-bottom-color: #fac800;
+  border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
+}
+
+.blue {
+  bottom: 0;
+  right: 0;
+  border-style: solid;
+  border-color: transparent;
+  display: inline-block;
+  border-bottom-color: #003c83;
+  border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
+}
+
+.purple {
+  top: 30vh;
+  left: 51.9615242271vh;
+  border-style: solid;
+  border-color: transparent;
+  display: inline-block;
+  border-bottom-color: #463a61;
+  border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
+}
+
+.orange {
+  top: 30vh;
+  left: 17.3205080757vh;
+  border-style: solid;
+  border-color: transparent;
+  display: inline-block;
+  border-bottom-color: #dc7115;
+  border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
+}
+
+.green {
+  bottom: 0;
+  left: 34.6410161514vh;
+  border-style: solid;
+  border-color: transparent;
+  display: inline-block;
+  border-bottom-color: #326e3c;
+  border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
+}
+
+.mauve {
+  top: 30vh;
+  left: 34.6410161514vh;
+  border-style: solid;
+  border-color: transparent;
+  display: inline-block;
+  border-top-color: #734b4a;
+  border-width: 30vh 17.3205080757vh 0 17.3205080757vh;
+}
+
+.slate {
+  bottom: 0;
+  left: 51.9615242271vh;
+  border-style: solid;
+  border-color: transparent;
+  display: inline-block;
+  border-top-color: #3f4c54;
+  border-width: 30vh 17.3205080757vh 0 17.3205080757vh;
+}
+
+.beige {
+  bottom: 0;
+  left: 17.3205080757vh;
+  border-style: solid;
+  border-color: transparent;
+  display: inline-block;
+  border-top-color: #b4a915;
+  border-width: 30vh 17.3205080757vh 0 17.3205080757vh;
+}
+
+figcaption {
+  padding: 1em;
+  line-height: 1.2;
+  max-width: 18em;
+  font-family: Baskerville, Palatino, serif;
+  border-left: 0.5em solid #734b4a;
+}
+
+h1 {
+  font-size: 1.3em;
+}
+
+@media only screen and (min-width: 800px) {
+  figcaption {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 20;
+  }
+}
diff --git a/interaction-of-color-plate-xxiv-1-the-goethe-triangle/license.txt b/interaction-of-color-plate-xxiv-1-the-goethe-triangle/license.txt
new file mode 100644
index 0000000..c0c566b
--- /dev/null
+++ b/interaction-of-color-plate-xxiv-1-the-goethe-triangle/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Nora Brown (https://codepen.io/noraspice/pen/VvZOgY)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/interaction-of-color-plate-xxiv-1-the-goethe-triangle/src/index.html b/interaction-of-color-plate-xxiv-1-the-goethe-triangle/src/index.html
new file mode 100644
index 0000000..3053566
--- /dev/null
+++ b/interaction-of-color-plate-xxiv-1-the-goethe-triangle/src/index.html
@@ -0,0 +1,19 @@
+<figure>
+	<figcaption>
+		<h1>The Goethe Triangle</h1>
+		<p>It is probably the mose condensed and cler system of presentation of an essential order in the vast world of color.<br>
+			Within the 2 dimensions of an equilateral triangle&mdash;subdivided in 9 similar triangles&mdash; are 3 primaries, 3 secondaries, annd (unexpectedly) 3 tertiaries, all placed very sensibly.
+		</p>
+	</figcaption>
+	<div class="wrap">
+		<span class="primary red"></span>
+		<span class="primary blue"></span>
+		<span class="primary yellow"></span>
+		<span class="secondary purple"></span>
+		<span class="secondary orange"></span>
+		<span class="secondary green"></span>
+		<span class="tertiary mauve"></span>
+		<span class="tertiary slate"></span>
+		<span class="tertiary beige"></span>
+	</div>
+</figure>
\ No newline at end of file
diff --git a/interaction-of-color-plate-xxiv-1-the-goethe-triangle/src/style.scss b/interaction-of-color-plate-xxiv-1-the-goethe-triangle/src/style.scss
new file mode 100644
index 0000000..b944e20
--- /dev/null
+++ b/interaction-of-color-plate-xxiv-1-the-goethe-triangle/src/style.scss
@@ -0,0 +1,124 @@
+// https://www.antimath.info/css/sass-sqrt-function/
+@function sqrt($r) {
+  $x0: 1;
+  $x1: $x0;
+ 
+  @for $i from 1 through 10 {
+    $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
+    $x0: $x1;
+  }
+ 
+  @return $x1;
+}
+
+$blue: rgb(0, 60, 131);
+$yellow: rgb(250, 200, 0);
+$red: rgb(200, 55, 35);
+
+$green: rgb(50, 110, 60);
+// mixing the yellow and blue simply doesn't work
+// $green: mix($blue, $yellow, 60);
+$orange: mix($yellow, $red, 40);
+$purple: mix($red, $blue, 35);
+
+$mauve: mix($orange, $purple, 30);
+$beige: mix($green, $yellow, 35);
+$slate: mix($purple, $green, 65);
+
+// base * multiplier = height of equilateral triangle
+$multiplier: sqrt(3)/2;
+// width of complete triangle
+$size: 90vh;
+// width/base of individual triangles
+$side: (1/$multiplier)/3 * $size;
+// height of complete triangle
+$height: $multiplier * $side;
+
+@mixin triangle($direction: 'right', $side-length: $side, $color: $color-trans-white){
+	border-style: solid;
+	border-color: transparent;
+	display: inline-block;
+	@if $direction == 'top'{
+			border-bottom-color: $color;
+			border-width: 0 $side/2 $side*$multiplier $side/2;
+		} @else if $direction == 'right'{
+			border-left-color: $color;
+			border-width: $side/2 0 $side/2 $side*$multiplier;
+		} @else if $direction == 'bottom'{
+			border-top-color: $color;
+			border-width: $side*$multiplier $side/2 0 $side/2;
+		} @else if $direction == 'left'{
+			border-right-color: $color;
+			border-width: $side/2 $side*$multiplier $side/2 0;
+		}
+
+	}
+
+body{
+	background: #F9FAEE;
+	}
+.wrap{
+	width: $side * 3;
+	height: $size;
+	margin: 5vh auto;
+	position: relative;
+	}
+.wrap > span{
+	position: absolute;
+	transition: all 1s ease-in-out;
+	}
+.red{
+	top: 0; left: $side;
+	@include triangle($direction: 'top', $color: $red);
+	}
+.yellow{
+	bottom: 0; left: 0;
+	@include triangle($direction: 'top', $color: $yellow);	
+	}
+.blue{
+	bottom: 0; right: 0;
+	@include triangle($direction: 'top', $color: $blue);	
+	}
+.purple{
+	top: $multiplier*$side; left: $side * 1.5;
+	@include triangle($direction: 'top', $color: $purple);
+	}
+.orange{
+	top: $multiplier*$side; left: $side * .5;
+	@include triangle($direction: 'top', $color: $orange);
+	}
+.green{
+	bottom: 0; left:  $side;
+	@include triangle($direction: 'top', $color: $green);
+}
+.mauve{
+	top: $height; left: $side;
+	@include triangle($direction: 'bottom', $color: $mauve);
+	}
+.slate{
+	bottom: 0; left: $side*1.5;
+	@include triangle($direction: 'bottom', $color: $slate);
+	}
+.beige{
+	bottom: 0; left: $side/2;
+	@include triangle($direction: 'bottom', $color: $beige);
+	}
+
+figcaption{
+	padding: 1em;
+	line-height: 1.2;
+	max-width: 18em;
+	font-family: Baskerville, Palatino, serif;
+	border-left: .5em solid $mauve;
+}
+h1{
+	font-size: 1.3em
+}
+@media only screen and (min-width: 800px){
+	figcaption{
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 20;
+	}
+}
\ No newline at end of file
diff --git a/interactive-kitten/README.markdown b/interactive-kitten/README.markdown
new file mode 100644
index 0000000..5b0e042
--- /dev/null
+++ b/interactive-kitten/README.markdown
@@ -0,0 +1,5 @@
+# interactive kitten
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Ma5a/pen/BapbQam](https://codepen.io/Ma5a/pen/BapbQam).
+
+This kitten will follow your mouse cursor or your screen touch.
diff --git a/interactive-kitten/dist/index.html b/interactive-kitten/dist/index.html
new file mode 100644
index 0000000..10bdcae
--- /dev/null
+++ b/interactive-kitten/dist/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - interactive kitten</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<body>
+
+  <div class="outer_wrapper">
+    <div class="wrapper">
+
+      <div class="cat_wrapper">
+        <div class="cat first_pose">
+          <div class="cat_head">
+            <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 76.4 61.2" >
+              <polygon class="eyes" points="63.8,54.1 50.7,54.1 50.7,59.6 27.1,59.6 27.1,54.1 12.4,54.1 12.4,31.8 63.8,31.8 "/>
+              <path d="M15.3,45.9h5.1V35.7h-5.1C15.3,35.7,15.3,45.9,15.3,45.9z M45.8,56.1V51H30.6v5.1H45.8z M61.1,35.7H56v10.2h5.1
+                V35.7z M10.2,61.2v-5.1H5.1V51H0V25.5h5.1V15.3h5.1V5.1h5.1V0h5.1v5.1h5.1v5.1h5.1v5.1c0,0,15.2,0,15.2,0v-5.1h5.1V5.1H56V0h5.1v5.1
+                h5.1v10.2h5.1v10.2h5.1l0,25.5h-5.1v5.1h-5.1v5.1H10.2z"/>
+            </svg>
+
+          </div>
+          <div class="body">
+            <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 91.7 40.8" >
+              <path class="st0" d="M91.7,40.8H0V10.2h5.1V5.1h5.1V0h66.2v5.1h10.2v5.1h5.1L91.7,40.8z"/>
+            </svg>
+
+            <div class="tail">
+              <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 25.5 61.1" >
+                <polygon class="st0" points="10.2,56 10.2,50.9 5.1,50.9 5.1,40.7 0,40.7 0,20.4 5.1,20.4 5.1,10.2 10.2,10.2 10.2,5.1 15.3,5.1 
+                  15.3,0 25.5,0 25.5,10.2 20.4,10.2 20.4,15.3 15.3,15.3 15.3,20.4 10.2,20.4 10.2,40.7 15.3,40.7 15.3,45.8 20.4,45.8 20.4,50.9 
+                  25.5,50.9 25.5,61.1 15.3,61.1 15.3,56 "/>
+              </svg>
+            </div>
+          </div>
+          
+          <div class="front_legs">
+            <div class="leg one">
+              <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 14 30.5" >
+                <polygon points="15.3,30.5 5.1,30.5 5.1,25.4 0,25.4 0,0 15.3,0 "/>
+              </svg>
+            </div>
+            <div class="leg two">
+              <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 14 30.5" >
+                <polygon points="15.3,30.5 5.1,30.5 5.1,25.4 0,25.4 0,0 15.3,0 "/>
+              </svg>
+            </div>  
+          </div>
+          
+          <div class="back_legs">
+            <div class="leg three">
+              <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 14 30.5" >
+                <polygon points="15.3,30.5 5.1,30.5 5.1,25.4 0,25.4 0,0 15.3,0 "/>
+              </svg>
+            </div>
+            <div class="leg four">
+              <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 14 30.5" >
+                <polygon points="15.3,30.5 5.1,30.5 5.1,25.4 0,25.4 0,0 15.3,0 "/>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="ground"></div>
+
+  </div>
+
+    
+  <div class="sign">
+    by masahito / <a href="http://www.ma5a.com/" >ma5a.com</a>
+  </div>
+
+
+</body>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/interactive-kitten/dist/script.js b/interactive-kitten/dist/script.js
new file mode 100644
index 0000000..89a2de0
--- /dev/null
+++ b/interactive-kitten/dist/script.js
@@ -0,0 +1,89 @@
+function init() { 
+  const catWrapper = document.querySelector('.cat_wrapper')
+  const wrapper = document.querySelector('.wrapper')
+  const cat = document.querySelector('.cat')
+  const head = document.querySelector('.cat_head')
+  const legs = document.querySelectorAll('.leg')
+  const pos = {
+    x: null,
+    y: null
+  }
+
+  const walk = () =>{
+    cat.classList.remove('first_pose')
+    legs.forEach(leg=>leg.classList.add('walk'))
+  }
+
+  const handleMouseMotion = e =>{
+    pos.x = e.clientX
+    pos.y = e.clientY
+    walk()
+  }
+
+  const handleTouchMotion = e =>{
+    if (e.targetTouches) return
+    
+    pos.x = e.targetTouches[0].offsetX
+    pos.y = e.targetTouches[0].offsetY
+    walk()
+  }
+
+  const turnRight = () =>{
+    cat.style.left = `${pos.x - 90}px`
+    cat.classList.remove('face_left')
+    cat.classList.add('face_right')
+  }
+
+  const turnLeft = () =>{
+    cat.style.left = `${pos.x + 10}px`
+    cat.classList.remove('face_right')
+    cat.classList.add('face_left')
+  }
+
+  const decideTurnDirection = () =>{
+    cat.getBoundingClientRect().x < pos.x ?
+      turnRight()
+      :
+      turnLeft()
+  }
+
+  const headMotion = () =>{
+    pos.y > (wrapper.clientHeight - 100) ?
+      head.style.top = '-15px'
+      :
+      head.style.top = '-30px'
+  }
+
+  const jump = () =>{
+    catWrapper.classList.remove('jump')
+    if (pos.y < (wrapper.clientHeight - 250)) {
+      setTimeout(()=>{
+        catWrapper.classList.add('jump')
+      },100)
+    } 
+  }
+
+  const decideStop = ()=>{
+    if (cat.classList.contains('face_right') && pos.x - 90 === cat.offsetLeft ||
+        cat.classList.contains('face_left') && pos.x + 10 === cat.offsetLeft) {
+      legs.forEach(leg=>leg.classList.remove('walk'))    
+    }
+  }
+  
+  setInterval(()=>{
+    if (!pos.x || !pos.y) return
+    decideTurnDirection()
+    headMotion()
+    decideStop()
+  },100)
+
+  setInterval(()=>{
+    if (!pos.x || !pos.y) return
+    jump()
+  },1000)
+
+  document.addEventListener('mousemove', handleMouseMotion)
+  document.addEventListener('mousemove', handleTouchMotion)
+}
+
+window.addEventListener('DOMContentLoaded', init)
\ No newline at end of file
diff --git a/interactive-kitten/dist/style.css b/interactive-kitten/dist/style.css
new file mode 100644
index 0000000..ec0426b
--- /dev/null
+++ b/interactive-kitten/dist/style.css
@@ -0,0 +1,297 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  background-color: #63ec85;
+}
+
+.outer_wrapper {
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.wrapper {
+  position: absolute;
+  height: calc(100vh - 100px);
+  width: 100%;
+  top: 0;
+}
+
+.ground {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 150px;
+  background-color: rgb(1, 143, 96);
+}
+
+.cat {
+  position: absolute;
+  bottom: 65px;
+  left: 100px;
+  height: 30px;
+  width: 60px;
+  transition: 1.5s;
+  transform-origin: center;
+  background-color: transparent;
+}
+
+/* body */
+
+.body {
+  position: absolute;
+  height: 30px;
+  width: 60px;
+}
+
+.face_left .body { 
+  animation: turn_body_left forwards 0.5s;
+}
+
+@keyframes turn_body_left {
+  0%,100% { transform: scale(1); }
+  50% { transform: scale(0.5, 1); }
+}
+
+.face_right .body {
+  animation: turn_body_right forwards 0.5s;
+}
+
+@keyframes turn_body_right {
+  0%,100% { transform: scale(1); }
+  50% { transform: scale(0.5, 1); }
+}
+
+/* head */
+.cat_head {
+  position: absolute;
+  height: 40px;
+  width: 48px;
+  right: -10px;
+  top: -30px;
+  transition: 0.5s;
+  z-index: 50;
+}
+
+.first_pose .cat_head,
+.face_left .cat_head{ 
+  right: 22px;
+}
+
+
+/* tail */
+.tail {
+  position: absolute;
+  top: -25px;
+  height: 36px;
+  width: 15px;
+  animation: tail_motion forwards 2s;
+  transform-origin: bottom right;
+}
+
+@keyframes tail_motion {
+  0%,100% { 
+    left: -5px;
+    transform: rotate(0deg) scale(1); 
+  }
+  50% { 
+    left: -10px;
+    transform: rotate(-50deg) scale(-1,1); 
+  }
+}
+
+.first_pose .tail ,
+.face_left .tail {
+  left: 45px;
+  animation: tail_motion_alt forwards 2s;
+}
+
+@keyframes tail_motion_alt {
+  0%,100% { 
+    left: 45px;
+    transform: rotate(0deg) scale(1); 
+  }
+  50% { 
+    left: 40px;
+    transform: rotate(50deg) scale(-1,1); 
+  }
+}
+
+
+
+/* legs */
+.leg {
+  position: absolute;
+  height: 20px;
+  width: 10px;
+  transform-origin: top center;
+}
+
+.front_legs,
+.back_legs {
+  position: absolute;
+  height: 30px;
+  transition: 0.7s;
+}
+
+.front_legs {
+  width: 30px;
+  right: 0;
+}
+
+.back_legs {
+  width: 25px;
+  left: 0; 
+}
+
+.face_left .leg svg {
+  transform: scale(-1,1);
+}
+
+.face_right .front_legs{ right: 0; }
+
+.first_pose .front_legs,
+.face_left .front_legs{ right: 30px; }
+
+.face_right .back_legs{ left: 0; }
+
+.first_pose .back_legs,
+.face_left .back_legs{ left: 35px; }
+
+.one,
+.three  {
+  bottom: -15px;
+  right: 0;
+}
+
+.two, 
+.four {
+  bottom: -15px;
+  left: 0px;
+}
+
+.one.walk, 
+.three.walk {
+  animation: infinite 0.3s walk;
+}
+
+.two.walk, 
+.four.walk {
+  animation: infinite 0.3s walk_alt;
+}
+
+@keyframes walk {
+  0%,100% {transform: rotate(-10deg);}
+  50% {transform: rotate(10deg);}
+}
+
+@keyframes walk_alt {
+  0%,100% {transform: rotate(10deg);}
+  50% {transform: rotate(-10deg);}
+}
+
+
+/* jump */
+.cat_wrapper {
+  position: absolute;
+  bottom: 0;
+}
+
+.cat_wrapper.jump .one { 
+  animation: infinite 0.3s walk;
+}
+
+.cat_wrapper.jump .two { 
+  animation: infinite 0.3s walk_alt;
+}
+
+.cat_wrapper.jump .three,
+.cat_wrapper.jump .four {
+  animation: none;
+}
+
+.cat_wrapper.jump .cat.face_right .back_legs {
+  transform-origin: center;
+  transform: rotate(50deg);
+}
+
+.cat_wrapper.jump .cat.face_left .back_legs {
+  transform-origin: center;
+  transform: rotate(-50deg);
+}
+
+.cat_wrapper.jump .cat.face_right .front_legs {
+  transform-origin: center;
+  transform: rotate(-60deg);
+}
+
+.cat_wrapper.jump .cat.face_left .front_legs {
+  transform-origin: center;
+  transform: rotate(60deg);
+}
+
+.cat_wrapper.jump{
+  animation: jump forwards 1s;
+}
+
+@keyframes jump {
+  0%, 100%  {bottom: 0px;}
+  50% {bottom: 200px;}
+}
+
+.jump .face_left{ 
+  animation: forwards 0.5s body_stand_left;
+  transform-origin: right bottom;
+}
+
+.jump .face_right{ 
+  animation: forwards 0.5s body_stand_right;
+  transform-origin: left bottom;
+}
+
+@keyframes body_stand_right {
+  0% {transform: rotate(0deg);}
+  100% {transform: rotate(-45deg);}
+}
+
+@keyframes body_stand_left {
+  0% {transform: rotate(0deg);}
+  100% {transform: rotate(45deg);}
+}
+
+svg {
+  height: 100%;
+  width: 100%;
+}
+
+polygon.eyes {
+  fill: rgb(1, 143, 96);
+}
+
+polygon,
+path {
+  fill: white;
+}
+
+.sign {
+  position: absolute;
+  color: white;
+  bottom: 10px;
+  right: 10px;
+  font-size: 10px;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
\ No newline at end of file
diff --git a/interactive-kitten/license.txt b/interactive-kitten/license.txt
new file mode 100644
index 0000000..71ed365
--- /dev/null
+++ b/interactive-kitten/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Masahito Leo Takeuchi (https://codepen.io/Ma5a/pen/BapbQam)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/interactive-kitten/src/index.html b/interactive-kitten/src/index.html
new file mode 100644
index 0000000..c4b8e0e
--- /dev/null
+++ b/interactive-kitten/src/index.html
@@ -0,0 +1,70 @@
+<body>
+
+  <div class="outer_wrapper">
+    <div class="wrapper">
+
+      <div class="cat_wrapper">
+        <div class="cat first_pose">
+          <div class="cat_head">
+            <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 76.4 61.2" >
+              <polygon class="eyes" points="63.8,54.1 50.7,54.1 50.7,59.6 27.1,59.6 27.1,54.1 12.4,54.1 12.4,31.8 63.8,31.8 "/>
+              <path d="M15.3,45.9h5.1V35.7h-5.1C15.3,35.7,15.3,45.9,15.3,45.9z M45.8,56.1V51H30.6v5.1H45.8z M61.1,35.7H56v10.2h5.1
+                V35.7z M10.2,61.2v-5.1H5.1V51H0V25.5h5.1V15.3h5.1V5.1h5.1V0h5.1v5.1h5.1v5.1h5.1v5.1c0,0,15.2,0,15.2,0v-5.1h5.1V5.1H56V0h5.1v5.1
+                h5.1v10.2h5.1v10.2h5.1l0,25.5h-5.1v5.1h-5.1v5.1H10.2z"/>
+            </svg>
+
+          </div>
+          <div class="body">
+            <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 91.7 40.8" >
+              <path class="st0" d="M91.7,40.8H0V10.2h5.1V5.1h5.1V0h66.2v5.1h10.2v5.1h5.1L91.7,40.8z"/>
+            </svg>
+
+            <div class="tail">
+              <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 25.5 61.1" >
+                <polygon class="st0" points="10.2,56 10.2,50.9 5.1,50.9 5.1,40.7 0,40.7 0,20.4 5.1,20.4 5.1,10.2 10.2,10.2 10.2,5.1 15.3,5.1 
+                  15.3,0 25.5,0 25.5,10.2 20.4,10.2 20.4,15.3 15.3,15.3 15.3,20.4 10.2,20.4 10.2,40.7 15.3,40.7 15.3,45.8 20.4,45.8 20.4,50.9 
+                  25.5,50.9 25.5,61.1 15.3,61.1 15.3,56 "/>
+              </svg>
+            </div>
+          </div>
+          
+          <div class="front_legs">
+            <div class="leg one">
+              <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 14 30.5" >
+                <polygon points="15.3,30.5 5.1,30.5 5.1,25.4 0,25.4 0,0 15.3,0 "/>
+              </svg>
+            </div>
+            <div class="leg two">
+              <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 14 30.5" >
+                <polygon points="15.3,30.5 5.1,30.5 5.1,25.4 0,25.4 0,0 15.3,0 "/>
+              </svg>
+            </div>  
+          </div>
+          
+          <div class="back_legs">
+            <div class="leg three">
+              <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 14 30.5" >
+                <polygon points="15.3,30.5 5.1,30.5 5.1,25.4 0,25.4 0,0 15.3,0 "/>
+              </svg>
+            </div>
+            <div class="leg four">
+              <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 14 30.5" >
+                <polygon points="15.3,30.5 5.1,30.5 5.1,25.4 0,25.4 0,0 15.3,0 "/>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="ground"></div>
+
+  </div>
+
+    
+  <div class="sign">
+    by masahito / <a href="http://www.ma5a.com/" >ma5a.com</a>
+  </div>
+
+
+</body>
\ No newline at end of file
diff --git a/interactive-kitten/src/script.js b/interactive-kitten/src/script.js
new file mode 100644
index 0000000..89a2de0
--- /dev/null
+++ b/interactive-kitten/src/script.js
@@ -0,0 +1,89 @@
+function init() { 
+  const catWrapper = document.querySelector('.cat_wrapper')
+  const wrapper = document.querySelector('.wrapper')
+  const cat = document.querySelector('.cat')
+  const head = document.querySelector('.cat_head')
+  const legs = document.querySelectorAll('.leg')
+  const pos = {
+    x: null,
+    y: null
+  }
+
+  const walk = () =>{
+    cat.classList.remove('first_pose')
+    legs.forEach(leg=>leg.classList.add('walk'))
+  }
+
+  const handleMouseMotion = e =>{
+    pos.x = e.clientX
+    pos.y = e.clientY
+    walk()
+  }
+
+  const handleTouchMotion = e =>{
+    if (e.targetTouches) return
+    
+    pos.x = e.targetTouches[0].offsetX
+    pos.y = e.targetTouches[0].offsetY
+    walk()
+  }
+
+  const turnRight = () =>{
+    cat.style.left = `${pos.x - 90}px`
+    cat.classList.remove('face_left')
+    cat.classList.add('face_right')
+  }
+
+  const turnLeft = () =>{
+    cat.style.left = `${pos.x + 10}px`
+    cat.classList.remove('face_right')
+    cat.classList.add('face_left')
+  }
+
+  const decideTurnDirection = () =>{
+    cat.getBoundingClientRect().x < pos.x ?
+      turnRight()
+      :
+      turnLeft()
+  }
+
+  const headMotion = () =>{
+    pos.y > (wrapper.clientHeight - 100) ?
+      head.style.top = '-15px'
+      :
+      head.style.top = '-30px'
+  }
+
+  const jump = () =>{
+    catWrapper.classList.remove('jump')
+    if (pos.y < (wrapper.clientHeight - 250)) {
+      setTimeout(()=>{
+        catWrapper.classList.add('jump')
+      },100)
+    } 
+  }
+
+  const decideStop = ()=>{
+    if (cat.classList.contains('face_right') && pos.x - 90 === cat.offsetLeft ||
+        cat.classList.contains('face_left') && pos.x + 10 === cat.offsetLeft) {
+      legs.forEach(leg=>leg.classList.remove('walk'))    
+    }
+  }
+  
+  setInterval(()=>{
+    if (!pos.x || !pos.y) return
+    decideTurnDirection()
+    headMotion()
+    decideStop()
+  },100)
+
+  setInterval(()=>{
+    if (!pos.x || !pos.y) return
+    jump()
+  },1000)
+
+  document.addEventListener('mousemove', handleMouseMotion)
+  document.addEventListener('mousemove', handleTouchMotion)
+}
+
+window.addEventListener('DOMContentLoaded', init)
\ No newline at end of file
diff --git a/interactive-kitten/src/style.css b/interactive-kitten/src/style.css
new file mode 100644
index 0000000..10fbcd9
--- /dev/null
+++ b/interactive-kitten/src/style.css
@@ -0,0 +1,298 @@
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  background-color: #63ec85;
+}
+
+.outer_wrapper {
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.wrapper {
+  position: absolute;
+  height: calc(100vh - 100px);
+  width: 100%;
+  top: 0;
+}
+
+.ground {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 150px;
+  background-color: rgb(1, 143, 96);
+}
+
+.cat {
+  position: absolute;
+  bottom: 65px;
+  left: 100px;
+  height: 30px;
+  width: 60px;
+  transition: 1.5s;
+  transform-origin: center;
+  background-color: transparent;
+}
+
+/* body */
+
+.body {
+  position: absolute;
+  height: 30px;
+  width: 60px;
+}
+
+.face_left .body { 
+  animation: turn_body_left forwards 0.5s;
+}
+
+@keyframes turn_body_left {
+  0%,100% { transform: scale(1); }
+  50% { transform: scale(0.5, 1); }
+}
+
+.face_right .body {
+  animation: turn_body_right forwards 0.5s;
+}
+
+@keyframes turn_body_right {
+  0%,100% { transform: scale(1); }
+  50% { transform: scale(0.5, 1); }
+}
+
+/* head */
+.cat_head {
+  position: absolute;
+  height: 40px;
+  width: 48px;
+  right: -10px;
+  top: -30px;
+  transition: 0.5s;
+  z-index: 50;
+}
+
+.first_pose .cat_head,
+.face_left .cat_head{ 
+  right: 22px;
+}
+
+
+/* tail */
+.tail {
+  position: absolute;
+  top: -25px;
+  height: 36px;
+  width: 15px;
+  animation: tail_motion forwards 2s;
+  transform-origin: bottom right;
+}
+
+@keyframes tail_motion {
+  0%,100% { 
+    left: -5px;
+    transform: rotate(0deg) scale(1); 
+  }
+  50% { 
+    left: -10px;
+    transform: rotate(-50deg) scale(-1,1); 
+  }
+}
+
+.first_pose .tail ,
+.face_left .tail {
+  left: 45px;
+  animation: tail_motion_alt forwards 2s;
+}
+
+@keyframes tail_motion_alt {
+  0%,100% { 
+    left: 45px;
+    transform: rotate(0deg) scale(1); 
+  }
+  50% { 
+    left: 40px;
+    transform: rotate(50deg) scale(-1,1); 
+  }
+}
+
+
+
+/* legs */
+.leg {
+  position: absolute;
+  height: 20px;
+  width: 10px;
+  transform-origin: top center;
+}
+
+.front_legs,
+.back_legs {
+  position: absolute;
+  height: 30px;
+  transition: 0.7s;
+}
+
+.front_legs {
+  width: 30px;
+  right: 0;
+}
+
+.back_legs {
+  width: 25px;
+  left: 0; 
+}
+
+.face_left .leg svg {
+  transform: scale(-1,1);
+}
+
+.face_right .front_legs{ right: 0; }
+
+.first_pose .front_legs,
+.face_left .front_legs{ right: 30px; }
+
+.face_right .back_legs{ left: 0; }
+
+.first_pose .back_legs,
+.face_left .back_legs{ left: 35px; }
+
+.one,
+.three  {
+  bottom: -15px;
+  right: 0;
+}
+
+.two, 
+.four {
+  bottom: -15px;
+  left: 0px;
+}
+
+.one.walk, 
+.three.walk {
+  animation: infinite 0.3s walk;
+}
+
+.two.walk, 
+.four.walk {
+  animation: infinite 0.3s walk_alt;
+}
+
+@keyframes walk {
+  0%,100% {transform: rotate(-10deg);}
+  50% {transform: rotate(10deg);}
+}
+
+@keyframes walk_alt {
+  0%,100% {transform: rotate(10deg);}
+  50% {transform: rotate(-10deg);}
+}
+
+
+/* jump */
+.cat_wrapper {
+  position: absolute;
+  bottom: 0;
+}
+
+.cat_wrapper.jump .one { 
+  animation: infinite 0.3s walk;
+}
+
+.cat_wrapper.jump .two { 
+  animation: infinite 0.3s walk_alt;
+}
+
+.cat_wrapper.jump .three,
+.cat_wrapper.jump .four {
+  animation: none;
+}
+
+.cat_wrapper.jump .cat.face_right .back_legs {
+  transform-origin: center;
+  transform: rotate(50deg);
+}
+
+.cat_wrapper.jump .cat.face_left .back_legs {
+  transform-origin: center;
+  transform: rotate(-50deg);
+}
+
+.cat_wrapper.jump .cat.face_right .front_legs {
+  transform-origin: center;
+  transform: rotate(-60deg);
+}
+
+.cat_wrapper.jump .cat.face_left .front_legs {
+  transform-origin: center;
+  transform: rotate(60deg);
+}
+
+.cat_wrapper.jump{
+  animation: jump forwards 1s;
+}
+
+@keyframes jump {
+  0%, 100%  {bottom: 0px;}
+  50% {bottom: 200px;}
+}
+
+.jump .face_left{ 
+  animation: forwards 0.5s body_stand_left;
+  transform-origin: right bottom;
+}
+
+.jump .face_right{ 
+  animation: forwards 0.5s body_stand_right;
+  transform-origin: left bottom;
+}
+
+@keyframes body_stand_right {
+  0% {transform: rotate(0deg);}
+  100% {transform: rotate(-45deg);}
+}
+
+@keyframes body_stand_left {
+  0% {transform: rotate(0deg);}
+  100% {transform: rotate(45deg);}
+}
+
+svg {
+  height: 100%;
+  width: 100%;
+}
+
+polygon.eyes {
+  fill: rgb(1, 143, 96);
+}
+
+polygon,
+path {
+  fill: white;
+}
+
+.sign {
+  position: absolute;
+  color: white;
+  bottom: 10px;
+  right: 10px;
+  font-size: 10px;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
\ No newline at end of file
diff --git a/interactive-particles-text-create-with-three-js/README.markdown b/interactive-particles-text-create-with-three-js/README.markdown
new file mode 100644
index 0000000..34e2969
--- /dev/null
+++ b/interactive-particles-text-create-with-three-js/README.markdown
@@ -0,0 +1,5 @@
+# Interactive particles text create with three.js 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/sanprieto/pen/XWNjBdb](https://codepen.io/sanprieto/pen/XWNjBdb).
+
+
diff --git a/interactive-particles-text-create-with-three-js/dist/index.html b/interactive-particles-text-create-with-three-js/dist/index.html
new file mode 100644
index 0000000..615f560
--- /dev/null
+++ b/interactive-particles-text-create-with-three-js/dist/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Interactive particles text create with three.js </title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script type="x-shader/x-vertex" id="vertexshader">
+
+  attribute float size;
+  attribute vec3 customColor;
+  varying vec3 vColor;
+
+  void main() {
+
+    vColor = customColor;
+    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+    gl_PointSize = size * ( 300.0 / -mvPosition.z );
+    gl_Position = projectionMatrix * mvPosition;
+
+  }
+
+</script>
+<script type="x-shader/x-fragment" id="fragmentshader">
+
+ uniform vec3 color;
+ uniform sampler2D pointTexture;
+
+ varying vec3 vColor;
+
+ void main() {
+
+   gl_FragColor = vec4( color * vColor, 1.0 );
+   gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
+
+ }
+</script>
+
+<div id="magic"></div>
+<div class="playground">
+  <div class="bottomPosition">
+     <a href="http://sanprieto.es/" target="_blank"><svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 278.8 278.8"><circle fill="#000205" cx="139.4" cy="139.4" r="139.4"/><g fill="none" stroke="#FFF" stroke-width="6.062" stroke-miterlimit="10"><path d="M214 183.4l-74.6 43.1-75.5-43.6V95.8l75.5-43.5 75.4 43.5v59.8l-11.3 6.5z"/><path d="M139.4 226.5l-18.8-38.2 18.8 10.8 75.4-43.5M63.9 95.8l75.3 43.6 75.6-43.6M139.2 139.4v59.7"/></g>
+       </svg></a>
+        <h1 class="special">RICARDO SANPRIETO <br><span class="minText">Creative developer && digital designer.</span></h1>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/interactive-particles-text-create-with-three-js/dist/script.js b/interactive-particles-text-create-with-three-js/dist/script.js
new file mode 100644
index 0000000..e473a9e
--- /dev/null
+++ b/interactive-particles-text-create-with-three-js/dist/script.js
@@ -0,0 +1,383 @@
+const preload = () => {
+
+  let manager = new THREE.LoadingManager();
+  manager.onLoad = function() { 
+    const environment = new Environment( typo, particle );
+  }
+
+  var typo = null;
+  const loader = new THREE.FontLoader( manager );
+  const font = loader.load('https://res.cloudinary.com/dydre7amr/raw/upload/v1612950355/font_zsd4dr.json', function ( font ) { typo = font; });
+  const particle = new THREE.TextureLoader( manager ).load( 'https://res.cloudinary.com/dfvtkoboz/image/upload/v1605013866/particle_a64uzf.png');
+
+}
+
+if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll))
+  preload ();
+else
+  document.addEventListener("DOMContentLoaded", preload ); 
+
+class Environment {
+
+  constructor( font, particle ){ 
+
+    this.font = font;
+    this.particle = particle;
+    this.container = document.querySelector( '#magic' );
+    this.scene = new THREE.Scene();
+    this.createCamera();
+    this.createRenderer();
+    this.setup()
+    this.bindEvents();
+  }
+
+  bindEvents(){
+
+    window.addEventListener( 'resize', this.onWindowResize.bind( this ));
+    
+  }
+
+  setup(){ 
+
+    this.createParticles = new CreateParticles( this.scene, this.font,             this.particle, this.camera, this.renderer );
+  }
+
+  render() {
+    
+     this.createParticles.render()
+     this.renderer.render( this.scene, this.camera )
+  }
+
+  createCamera() {
+
+    this.camera = new THREE.PerspectiveCamera( 65, this.container.clientWidth /  this.container.clientHeight, 1, 10000 );
+    this.camera.position.set( 0,0, 100 );
+
+  }
+
+  createRenderer() {
+
+    this.renderer = new THREE.WebGLRenderer();
+    this.renderer.setSize( this.container.clientWidth, this.container.clientHeight );
+
+    this.renderer.setPixelRatio( Math.min( window.devicePixelRatio, 2));
+
+    this.renderer.outputEncoding = THREE.sRGBEncoding;
+    this.container.appendChild( this.renderer.domElement );
+
+    this.renderer.setAnimationLoop(() => { this.render() })
+
+  }
+
+  onWindowResize(){
+
+    this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize( this.container.clientWidth, this.container.clientHeight );
+
+  }
+}
+
+class CreateParticles {
+	
+	constructor( scene, font, particleImg, camera, renderer ) {
+    
+		this.scene = scene;
+		this.font = font;
+		this.particleImg = particleImg;
+		this.camera = camera;
+		this.renderer = renderer;
+		
+		this.raycaster = new THREE.Raycaster();
+		this.mouse = new THREE.Vector2(-200, 200);
+		
+		this.colorChange = new THREE.Color();
+
+		this.buttom = false;
+
+		this.data = {
+
+			text: 'FUTURE\nIS NOW',
+			amount: 1500,
+			particleSize: 1,
+			particleColor: 0xffffff,
+			textSize: 16,
+			area: 250,
+			ease: .05,
+		}
+
+		this.setup();
+		this.bindEvents();
+
+	}
+
+
+	setup(){
+
+		const geometry = new THREE.PlaneGeometry( this.visibleWidthAtZDepth( 100, this.camera ), this.visibleHeightAtZDepth( 100, this.camera ));
+		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, transparent: true } );
+		this.planeArea = new THREE.Mesh( geometry, material );
+		this.planeArea.visible = false;
+		this.createText();
+
+	}
+
+	bindEvents() {
+
+		document.addEventListener( 'mousedown', this.onMouseDown.bind( this ));
+		document.addEventListener( 'mousemove', this.onMouseMove.bind( this ));
+		document.addEventListener( 'mouseup', this.onMouseUp.bind( this ));
+		
+	}
+
+	onMouseDown(){
+		
+		this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+		this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+
+		const vector = new THREE.Vector3( this.mouse.x, this.mouse.y, 0.5);
+		vector.unproject( this.camera );
+		const dir = vector.sub( this.camera.position ).normalize();
+		const distance = - this.camera.position.z / dir.z;
+		this.currenPosition = this.camera.position.clone().add( dir.multiplyScalar( distance ) );
+		
+		const pos = this.particles.geometry.attributes.position;
+		this.buttom = true;
+		this.data.ease = .01;
+		
+	}
+
+	onMouseUp(){
+
+		this.buttom = false;
+		this.data.ease = .05;
+	}
+
+	onMouseMove( ) { 
+
+	    this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+	    this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+
+	}
+
+	render( level ){ 
+
+		const time = ((.001 * performance.now())%12)/12;
+		const zigzagTime = (1 + (Math.sin( time * 2 * Math.PI )))/6;
+
+		this.raycaster.setFromCamera( this.mouse, this.camera );
+
+		const intersects = this.raycaster.intersectObject( this.planeArea );
+
+		if ( intersects.length > 0 ) {
+
+			const pos = this.particles.geometry.attributes.position;
+			const copy = this.geometryCopy.attributes.position;
+			const coulors = this.particles.geometry.attributes.customColor;
+			const size = this.particles.geometry.attributes.size;
+
+		    const mx = intersects[ 0 ].point.x;
+		    const my = intersects[ 0 ].point.y;
+		    const mz = intersects[ 0 ].point.z;
+
+		    for ( var i = 0, l = pos.count; i < l; i++) {
+
+		    	const initX = copy.getX(i);
+		    	const initY = copy.getY(i);
+		    	const initZ = copy.getZ(i);
+
+		    	let px = pos.getX(i);
+		    	let py = pos.getY(i);
+		    	let pz = pos.getZ(i);
+
+		    	this.colorChange.setHSL( .5, 1 , 1 )
+		    	coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
+		    	coulors.needsUpdate = true;
+
+		    	size.array[ i ]  = this.data.particleSize;
+		    	size.needsUpdate = true;
+
+		    	let dx = mx - px;
+		    	let dy = my - py;
+		    	const dz = mz - pz;
+
+		    	const mouseDistance = this.distance( mx, my, px, py )
+		    	let d = ( dx = mx - px ) * dx + ( dy = my - py ) * dy;
+		    	const f = - this.data.area/d;
+
+		    	if( this.buttom ){ 
+
+		    		const t = Math.atan2( dy, dx );
+		    		px -= f * Math.cos( t );
+		    		py -= f * Math.sin( t );
+
+		    		this.colorChange.setHSL( .5 + zigzagTime, 1.0 , .5 )
+		    		coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
+		    		coulors.needsUpdate = true;
+
+		    		if ((px > (initX + 70)) || ( px < (initX - 70)) || (py > (initY + 70) || ( py < (initY - 70)))){
+
+		    			this.colorChange.setHSL( .15, 1.0 , .5 )
+		    			coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
+		    			coulors.needsUpdate = true;
+
+		    		}
+
+		    	}else{
+		    	
+			    	if( mouseDistance < this.data.area ){
+
+			    		if(i%5==0){
+
+			    			const t = Math.atan2( dy, dx );
+			    			px -= .03 * Math.cos( t );
+			    			py -= .03 * Math.sin( t );
+
+			    			this.colorChange.setHSL( .15 , 1.0 , .5 )
+			    			coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
+			    			coulors.needsUpdate = true;
+
+							size.array[ i ]  =  this.data.particleSize /1.2;
+							size.needsUpdate = true;
+
+			    		}else{
+
+					    	const t = Math.atan2( dy, dx );
+					    	px += f * Math.cos( t );
+					    	py += f * Math.sin( t );
+
+					    	pos.setXYZ( i, px, py, pz );
+					    	pos.needsUpdate = true;
+
+					    	size.array[ i ]  = this.data.particleSize * 1.3 ;
+					    	size.needsUpdate = true;
+				    	}
+
+			    		if ((px > (initX + 10)) || ( px < (initX - 10)) || (py > (initY + 10) || ( py < (initY - 10)))){
+
+			    			this.colorChange.setHSL( .15, 1.0 , .5 )
+			    			coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
+			    			coulors.needsUpdate = true;
+
+			    			size.array[ i ]  = this.data.particleSize /1.8;
+			    			size.needsUpdate = true;
+
+			    		}
+			    	}
+
+		    	}
+
+		    	px += ( initX  - px ) * this.data.ease;
+		    	py += ( initY  - py ) * this.data.ease;
+		    	pz += ( initZ  - pz ) * this.data.ease;
+
+		    	pos.setXYZ( i, px, py, pz );
+		    	pos.needsUpdate = true;
+
+		    }
+		}
+	}
+
+	createText(){ 
+
+		let thePoints = [];
+
+		let shapes = this.font.generateShapes( this.data.text , this.data.textSize  );
+		let geometry = new THREE.ShapeGeometry( shapes );
+		geometry.computeBoundingBox();
+	
+		const xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
+		const yMid =  (geometry.boundingBox.max.y - geometry.boundingBox.min.y)/2.85;
+
+		geometry.center();
+
+		let holeShapes = [];
+
+		for ( let q = 0; q < shapes.length; q ++ ) {
+
+			let shape = shapes[ q ];
+
+			if ( shape.holes && shape.holes.length > 0 ) {
+
+				for ( let  j = 0; j < shape.holes.length; j ++ ) {
+
+					let  hole = shape.holes[ j ];
+					holeShapes.push( hole );
+				}
+			}
+
+		}
+		shapes.push.apply( shapes, holeShapes );
+
+		let colors = [];
+		let sizes = [];
+					
+		for ( let  x = 0; x < shapes.length; x ++ ) {
+
+			let shape = shapes[ x ];
+
+			const amountPoints = ( shape.type == 'Path') ? this.data.amount/2 : this.data.amount;
+
+			let points = shape.getSpacedPoints( amountPoints ) ;
+
+			points.forEach( ( element, z ) => {
+						
+				const a = new THREE.Vector3( element.x, element.y, 0 );
+				thePoints.push( a );
+				colors.push( this.colorChange.r, this.colorChange.g, this.colorChange.b);
+				sizes.push( 1 )
+
+				});
+		}
+
+		let geoParticles = new THREE.BufferGeometry().setFromPoints( thePoints );
+		geoParticles.translate( xMid, yMid, 0 );
+				
+		geoParticles.setAttribute( 'customColor', new THREE.Float32BufferAttribute( colors, 3 ) );
+		geoParticles.setAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1) );
+
+		const material = new THREE.ShaderMaterial( {
+
+			uniforms: {
+				color: { value: new THREE.Color( 0xffffff ) },
+				pointTexture: { value: this.particleImg }
+			},
+			vertexShader: document.getElementById( 'vertexshader' ).textContent,
+			fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
+
+			blending: THREE.AdditiveBlending,
+			depthTest: false,
+			transparent: true,
+		} );
+
+		this.particles = new THREE.Points( geoParticles, material );
+		this.scene.add( this.particles );
+
+		this.geometryCopy = new THREE.BufferGeometry();
+		this.geometryCopy.copy( this.particles.geometry );
+		
+	}
+
+	visibleHeightAtZDepth ( depth, camera ) {
+
+	  const cameraOffset = camera.position.z;
+	  if ( depth < cameraOffset ) depth -= cameraOffset;
+	  else depth += cameraOffset;
+
+	  const vFOV = camera.fov * Math.PI / 180; 
+
+	  return 2 * Math.tan( vFOV / 2 ) * Math.abs( depth );
+	}
+
+	visibleWidthAtZDepth( depth, camera ) {
+
+	  const height = this.visibleHeightAtZDepth( depth, camera );
+	  return height * camera.aspect;
+
+	}
+
+	distance (x1, y1, x2, y2){
+	   
+	    return Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2));
+	}
+}
\ No newline at end of file
diff --git a/interactive-particles-text-create-with-three-js/dist/style.css b/interactive-particles-text-create-with-three-js/dist/style.css
new file mode 100644
index 0000000..5413b55
--- /dev/null
+++ b/interactive-particles-text-create-with-three-js/dist/style.css
@@ -0,0 +1,67 @@
+html, body { 
+  
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  font-family: 'archiaregular' !important; 
+  color: white;
+  font-size: 9px;
+
+}
+
+#magic {
+
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  display: block;
+  top: 0;
+  left: 0;
+  z-index: -9999;
+}
+
+.playground{
+
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  display: block;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+
+}
+.bottomPosition{
+
+  text-align: center;
+  margin-bottom: 50px;
+  
+}
+.minText{
+  
+  font-size: 14px;
+}
+
+a {
+  color: white;
+  font-size: 12px;
+  text-decoration: none;
+}
+
+.logo {
+    width: 50px;
+    height: 50px;
+}
+
+@font-face {
+
+    font-family: 'archiaregular';
+    src: url('https://res.cloudinary.com/dydre7amr/raw/upload/v1612881605/archia-regular-webfont_bvfbhe.ttf')format('truetype');;
+    font-weight: normal;
+    font-style: normal;
+
+}
\ No newline at end of file
diff --git a/interactive-particles-text-create-with-three-js/license.txt b/interactive-particles-text-create-with-three-js/license.txt
new file mode 100644
index 0000000..942e17e
--- /dev/null
+++ b/interactive-particles-text-create-with-three-js/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Ricardo Sanprieto (https://codepen.io/sanprieto/pen/XWNjBdb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/interactive-particles-text-create-with-three-js/src/index.html b/interactive-particles-text-create-with-three-js/src/index.html
new file mode 100644
index 0000000..63f7f71
--- /dev/null
+++ b/interactive-particles-text-create-with-three-js/src/index.html
@@ -0,0 +1,39 @@
+<script type="x-shader/x-vertex" id="vertexshader">
+
+  attribute float size;
+  attribute vec3 customColor;
+  varying vec3 vColor;
+
+  void main() {
+
+    vColor = customColor;
+    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+    gl_PointSize = size * ( 300.0 / -mvPosition.z );
+    gl_Position = projectionMatrix * mvPosition;
+
+  }
+
+</script>
+<script type="x-shader/x-fragment" id="fragmentshader">
+
+ uniform vec3 color;
+ uniform sampler2D pointTexture;
+
+ varying vec3 vColor;
+
+ void main() {
+
+   gl_FragColor = vec4( color * vColor, 1.0 );
+   gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
+
+ }
+</script>
+
+<div id="magic"></div>
+<div class="playground">
+  <div class="bottomPosition">
+     <a href="http://sanprieto.es/" target="_blank"><svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 278.8 278.8"><circle fill="#000205" cx="139.4" cy="139.4" r="139.4"/><g fill="none" stroke="#FFF" stroke-width="6.062" stroke-miterlimit="10"><path d="M214 183.4l-74.6 43.1-75.5-43.6V95.8l75.5-43.5 75.4 43.5v59.8l-11.3 6.5z"/><path d="M139.4 226.5l-18.8-38.2 18.8 10.8 75.4-43.5M63.9 95.8l75.3 43.6 75.6-43.6M139.2 139.4v59.7"/></g>
+       </svg></a>
+        <h1 class="special">RICARDO SANPRIETO <br><span class="minText">Creative developer && digital designer.</span></h1>
+  </div>
+</div>
\ No newline at end of file
diff --git a/interactive-particles-text-create-with-three-js/src/script.js b/interactive-particles-text-create-with-three-js/src/script.js
new file mode 100644
index 0000000..ff02b48
--- /dev/null
+++ b/interactive-particles-text-create-with-three-js/src/script.js
@@ -0,0 +1,383 @@
+const preload = () => {
+
+  let manager = new THREE.LoadingManager();
+  manager.onLoad = function() { 
+    const environment = new Environment( typo, particle );
+  }
+
+  var typo = null;
+  const loader = new THREE.FontLoader( manager );
+  const font = loader.load('https://res.cloudinary.com/dydre7amr/raw/upload/v1612950355/font_zsd4dr.json', function ( font ) { typo = font; });
+  const particle = new THREE.TextureLoader( manager ).load( 'https://res.cloudinary.com/dfvtkoboz/image/upload/v1605013866/particle_a64uzf.png');
+
+}
+
+if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll))
+  preload ();
+else
+  document.addEventListener("DOMContentLoaded", preload ); 
+
+class Environment {
+
+  constructor( font, particle ){ 
+
+    this.font = font;
+    this.particle = particle;
+    this.container = document.querySelector( '#magic' );
+    this.scene = new THREE.Scene();
+    this.createCamera();
+    this.createRenderer();
+    this.setup()
+    this.bindEvents();
+  }
+
+  bindEvents(){
+
+    window.addEventListener( 'resize', this.onWindowResize.bind( this ));
+    
+  }
+
+  setup(){ 
+
+    this.createParticles = new CreateParticles( this.scene, this.font,             this.particle, this.camera, this.renderer );
+  }
+
+  render() {
+    
+     this.createParticles.render()
+     this.renderer.render( this.scene, this.camera )
+  }
+
+  createCamera() {
+
+    this.camera = new THREE.PerspectiveCamera( 65, this.container.clientWidth /  this.container.clientHeight, 1, 10000 );
+    this.camera.position.set( 0,0, 100 );
+
+  }
+
+  createRenderer() {
+
+    this.renderer = new THREE.WebGLRenderer();
+    this.renderer.setSize( this.container.clientWidth, this.container.clientHeight );
+
+    this.renderer.setPixelRatio( Math.min( window.devicePixelRatio, 2));
+
+    this.renderer.outputEncoding = THREE.sRGBEncoding;
+    this.container.appendChild( this.renderer.domElement );
+
+    this.renderer.setAnimationLoop(() => { this.render() })
+
+  }
+
+  onWindowResize(){
+
+    this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize( this.container.clientWidth, this.container.clientHeight );
+
+  }
+}
+
+class CreateParticles {
+	
+	constructor( scene, font, particleImg, camera, renderer ) {
+    
+		this.scene = scene;
+		this.font = font;
+		this.particleImg = particleImg;
+		this.camera = camera;
+		this.renderer = renderer;
+		
+		this.raycaster = new THREE.Raycaster();
+		this.mouse = new THREE.Vector2(-200, 200);
+		
+		this.colorChange = new THREE.Color();
+
+		this.buttom = false;
+
+		this.data = {
+
+			text: 'FUTURE\nIS NOW',
+			amount: 1500,
+			particleSize: 1,
+			particleColor: 0xffffff,
+			textSize: 16,
+			area: 250,
+			ease: .05,
+		}
+
+		this.setup();
+		this.bindEvents();
+
+	}
+
+
+	setup(){
+
+		const geometry = new THREE.PlaneGeometry( this.visibleWidthAtZDepth( 100, this.camera ), this.visibleHeightAtZDepth( 100, this.camera ));
+		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, transparent: true } );
+		this.planeArea = new THREE.Mesh( geometry, material );
+		this.planeArea.visible = false;
+		this.createText();
+
+	}
+
+	bindEvents() {
+
+		document.addEventListener( 'mousedown', this.onMouseDown.bind( this ));
+		document.addEventListener( 'mousemove', this.onMouseMove.bind( this ));
+		document.addEventListener( 'mouseup', this.onMouseUp.bind( this ));
+		
+	}
+
+	onMouseDown(){
+		
+		this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+		this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+
+		const vector = new THREE.Vector3( this.mouse.x, this.mouse.y, 0.5);
+		vector.unproject( this.camera );
+		const dir = vector.sub( this.camera.position ).normalize();
+		const distance = - this.camera.position.z / dir.z;
+		this.currenPosition = this.camera.position.clone().add( dir.multiplyScalar( distance ) );
+		
+		const pos = this.particles.geometry.attributes.position;
+		this.buttom = true;
+		this.data.ease = .01;
+		
+	}
+
+	onMouseUp(){
+
+		this.buttom = false;
+		this.data.ease = .05;
+	}
+
+	onMouseMove( ) { 
+
+	    this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+	    this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+
+	}
+
+	render( level ){ 
+
+		const time = ((.001 * performance.now())%12)/12;
+		const zigzagTime = (1 + (Math.sin( time * 2 * Math.PI )))/6;
+
+		this.raycaster.setFromCamera( this.mouse, this.camera );
+
+		const intersects = this.raycaster.intersectObject( this.planeArea );
+
+		if ( intersects.length > 0 ) {
+
+			const pos = this.particles.geometry.attributes.position;
+			const copy = this.geometryCopy.attributes.position;
+			const coulors = this.particles.geometry.attributes.customColor;
+			const size = this.particles.geometry.attributes.size;
+
+		    const mx = intersects[ 0 ].point.x;
+		    const my = intersects[ 0 ].point.y;
+		    const mz = intersects[ 0 ].point.z;
+
+		    for ( var i = 0, l = pos.count; i < l; i++) {
+
+		    	const initX = copy.getX(i);
+		    	const initY = copy.getY(i);
+		    	const initZ = copy.getZ(i);
+
+		    	let px = pos.getX(i);
+		    	let py = pos.getY(i);
+		    	let pz = pos.getZ(i);
+
+		    	this.colorChange.setHSL( .5, 1 , 1 )
+		    	coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
+		    	coulors.needsUpdate = true;
+
+		    	size.array[ i ]  = this.data.particleSize;
+		    	size.needsUpdate = true;
+
+		    	let dx = mx - px;
+		    	let dy = my - py;
+		    	const dz = mz - pz;
+
+		    	const mouseDistance = this.distance( mx, my, px, py )
+		    	let d = ( dx = mx - px ) * dx + ( dy = my - py ) * dy;
+		    	const f = - this.data.area/d;
+
+		    	if( this.buttom ){ 
+
+		    		const t = Math.atan2( dy, dx );
+		    		px -= f * Math.cos( t );
+		    		py -= f * Math.sin( t );
+
+		    		this.colorChange.setHSL( .5 + zigzagTime, 1.0 , .5 )
+		    		coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
+		    		coulors.needsUpdate = true;
+
+		    		if ((px > (initX + 70)) || ( px < (initX - 70)) || (py > (initY + 70) || ( py < (initY - 70)))){
+
+		    			this.colorChange.setHSL( .15, 1.0 , .5 )
+		    			coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
+		    			coulors.needsUpdate = true;
+
+		    		}
+
+		    	}else{
+		    	
+			    	if( mouseDistance < this.data.area ){
+
+			    		if(i%5==0){
+
+			    			const t = Math.atan2( dy, dx );
+			    			px -= .03 * Math.cos( t );
+			    			py -= .03 * Math.sin( t );
+
+			    			this.colorChange.setHSL( .15 , 1.0 , .5 )
+			    			coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
+			    			coulors.needsUpdate = true;
+
+							size.array[ i ]  =  this.data.particleSize /1.2;
+							size.needsUpdate = true;
+
+			    		}else{
+
+					    	const t = Math.atan2( dy, dx );
+					    	px += f * Math.cos( t );
+					    	py += f * Math.sin( t );
+
+					    	pos.setXYZ( i, px, py, pz );
+					    	pos.needsUpdate = true;
+
+					    	size.array[ i ]  = this.data.particleSize * 1.3 ;
+					    	size.needsUpdate = true;
+				    	}
+
+			    		if ((px > (initX + 10)) || ( px < (initX - 10)) || (py > (initY + 10) || ( py < (initY - 10)))){
+
+			    			this.colorChange.setHSL( .15, 1.0 , .5 )
+			    			coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
+			    			coulors.needsUpdate = true;
+
+			    			size.array[ i ]  = this.data.particleSize /1.8;
+			    			size.needsUpdate = true;
+
+			    		}
+			    	}
+
+		    	}
+
+		    	px += ( initX  - px ) * this.data.ease;
+		    	py += ( initY  - py ) * this.data.ease;
+		    	pz += ( initZ  - pz ) * this.data.ease;
+
+		    	pos.setXYZ( i, px, py, pz );
+		    	pos.needsUpdate = true;
+
+		    }
+		}
+	}
+
+	createText(){ 
+
+		let thePoints = [];
+
+		let shapes = this.font.generateShapes( this.data.text , this.data.textSize  );
+		let geometry = new THREE.ShapeGeometry( shapes );
+		geometry.computeBoundingBox();
+	
+		const xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
+		const yMid =  (geometry.boundingBox.max.y - geometry.boundingBox.min.y)/2.85;
+
+		geometry.center();
+
+		let holeShapes = [];
+
+		for ( let q = 0; q < shapes.length; q ++ ) {
+
+			let shape = shapes[ q ];
+
+			if ( shape.holes && shape.holes.length > 0 ) {
+
+				for ( let  j = 0; j < shape.holes.length; j ++ ) {
+
+					let  hole = shape.holes[ j ];
+					holeShapes.push( hole );
+				}
+			}
+
+		}
+		shapes.push.apply( shapes, holeShapes );
+
+		let colors = [];
+		let sizes = [];
+					
+		for ( let  x = 0; x < shapes.length; x ++ ) {
+
+			let shape = shapes[ x ];
+
+			const amountPoints = ( shape.type == 'Path') ? this.data.amount/2 : this.data.amount;
+
+			let points = shape.getSpacedPoints( amountPoints ) ;
+
+			points.forEach( ( element, z ) => {
+						
+				const a = new THREE.Vector3( element.x, element.y, 0 );
+				thePoints.push( a );
+				colors.push( this.colorChange.r, this.colorChange.g, this.colorChange.b);
+				sizes.push( 1 )
+
+				});
+		}
+
+		let geoParticles = new THREE.BufferGeometry().setFromPoints( thePoints );
+		geoParticles.translate( xMid, yMid, 0 );
+				
+		geoParticles.setAttribute( 'customColor', new THREE.Float32BufferAttribute( colors, 3 ) );
+		geoParticles.setAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1) );
+
+		const material = new THREE.ShaderMaterial( {
+
+			uniforms: {
+				color: { value: new THREE.Color( 0xffffff ) },
+				pointTexture: { value: this.particleImg }
+			},
+			vertexShader: document.getElementById( 'vertexshader' ).textContent,
+			fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
+
+			blending: THREE.AdditiveBlending,
+			depthTest: false,
+			transparent: true,
+		} );
+
+		this.particles = new THREE.Points( geoParticles, material );
+		this.scene.add( this.particles );
+
+		this.geometryCopy = new THREE.BufferGeometry();
+		this.geometryCopy.copy( this.particles.geometry );
+		
+	}
+
+	visibleHeightAtZDepth ( depth, camera ) {
+
+	  const cameraOffset = camera.position.z;
+	  if ( depth < cameraOffset ) depth -= cameraOffset;
+	  else depth += cameraOffset;
+
+	  const vFOV = camera.fov * Math.PI / 180; 
+
+	  return 2 * Math.tan( vFOV / 2 ) * Math.abs( depth );
+	}
+
+	visibleWidthAtZDepth( depth, camera ) {
+
+	  const height = this.visibleHeightAtZDepth( depth, camera );
+	  return height * camera.aspect;
+
+	}
+
+	distance (x1, y1, x2, y2){
+	   
+	    return Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2));
+	}
+}
diff --git a/interactive-particles-text-create-with-three-js/src/style.css b/interactive-particles-text-create-with-three-js/src/style.css
new file mode 100644
index 0000000..fa5f1c7
--- /dev/null
+++ b/interactive-particles-text-create-with-three-js/src/style.css
@@ -0,0 +1,67 @@
+html, body { 
+  
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  font-family: 'archiaregular' !important; 
+  color: white;
+  font-size: 9px;
+
+}
+
+#magic {
+
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  display: block;
+  top: 0;
+  left: 0;
+  z-index: -9999;
+}
+
+.playground{
+
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  display: block;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+
+}
+.bottomPosition{
+
+  text-align: center;
+  margin-bottom: 50px;
+  
+}
+.minText{
+  
+  font-size: 14px;
+}
+
+a {
+  color: white;
+  font-size: 12px;
+  text-decoration: none;
+}
+
+.logo {
+    width: 50px;
+    height: 50px;
+}
+
+@font-face {
+
+    font-family: 'archiaregular';
+    src: url('https://res.cloudinary.com/dydre7amr/raw/upload/v1612881605/archia-regular-webfont_bvfbhe.ttf')format('truetype');;
+    font-weight: normal;
+    font-style: normal;
+
+}
diff --git a/interactive-skate-loading/README.markdown b/interactive-skate-loading/README.markdown
new file mode 100644
index 0000000..e19e109
--- /dev/null
+++ b/interactive-skate-loading/README.markdown
@@ -0,0 +1,5 @@
+# Interactive Skate Loading
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/aaroniker/pen/gOwEjBr](https://codepen.io/aaroniker/pen/gOwEjBr).
+
+
diff --git a/interactive-skate-loading/dist/index.html b/interactive-skate-loading/dist/index.html
new file mode 100644
index 0000000..5df69ae
--- /dev/null
+++ b/interactive-skate-loading/dist/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Interactive Skate Loading</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="loading">
+    <div class="skate">
+        <div class="body">
+            <div class="arm back"></div>
+            <div class="arm front"></div>
+            <div class="leg back"></div>
+            <div class="leg front"></div>
+        </div>
+        <div class="board">
+            <svg viewBox="0 0 34 8">
+                <path d="M0.897306 0.911767C1.22218 0.30263 1.97934 0.072188 2.58848 0.397061L2.91936 0.573532C3.75214 1.01768 4.68144 1.25 5.62525 1.25H28.3752C29.3191 1.25 30.2484 1.01768 31.0811 0.573532L31.412 0.397061C32.0212 0.072188 32.7783 0.30263 33.1032 0.911767C33.4281 1.5209 33.1976 2.27807 32.5885 2.60294L32.2576 2.77941C31.0627 3.41667 29.7294 3.75 28.3752 3.75H27.9692C28.5841 4.09118 29.0002 4.747 29.0002 5.5C29.0002 6.60457 28.1048 7.5 27.0002 7.5C25.8957 7.5 25.0002 6.60457 25.0002 5.5C25.0002 4.747 25.4164 4.09118 26.0312 3.75H7.96925C8.5841 4.09118 9.00025 4.747 9.00025 5.5C9.00025 6.60457 8.10482 7.5 7.00025 7.5C5.89568 7.5 5.00025 6.60457 5.00025 5.5C5.00025 4.747 5.41639 4.09118 6.03124 3.75H5.62525C4.27109 3.75 2.93774 3.41667 1.74289 2.77941L1.41201 2.60294C0.802874 2.27807 0.572432 1.5209 0.897306 0.911767Z" />
+            </svg>
+        </div>
+        <div class="line top"></div>
+        <div class="line bottom"></div>
+    </div>
+</div>
+
+<div id="keyboard">
+    <button class="up">
+        <svg viewBox="0 0 8 8">
+            <path d="M3.99953 1C3.83653 1 3.68353 1.0795 3.59003 1.2135L0.0900328 6.2135C-0.0169672 6.366 -0.0289672 6.5655 0.0560328 6.731C0.142533 6.8965 0.313033 7 0.499533 7H7.50003C7.68653 7 7.85753 6.8965 7.94353 6.731C8.02853 6.5655 8.01653 6.366 7.90953 6.2135L4.40953 1.2135C4.31653 1.0795 4.16353 1 4.00053 1C4.00003 1 4.00003 1 3.99953 1C4.00003 1 4.00003 1 3.99953 1Z" />
+        </svg>
+    </button>
+    <button class="left">
+        <svg viewBox="0 0 8 8">
+            <path d="M1 4.00053C1 4.16353 1.0795 4.31653 1.2135 4.41003L6.2135 7.91003C6.366 8.01703 6.5655 8.02903 6.731 7.94403C6.8965 7.85753 7 7.68703 7 7.50053V0.499533C7 0.313033 6.8965 0.142033 6.731 0.0560328C6.5655 -0.0289672 6.366 -0.0169672 6.2135 0.0900328L1.2135 3.59003C1.0795 3.68353 1 3.83653 1 3.99953C1 4.00003 1 4.00003 1 4.00053C1 4.00003 1 4.00003 1 4.00053Z" />
+        </svg>
+    </button>
+    <button class="right">
+        <svg viewBox="0 0 8 8">
+            <path d="M7 3.99953C7 3.83653 6.9205 3.68353 6.7865 3.59003L1.7865 0.0900328C1.6345 -0.0169672 1.4345 -0.0289672 1.269 0.0560328C1.1035 0.142533 1 0.313033 1 0.499533V7.50003C1 7.68653 1.1035 7.85753 1.269 7.94353C1.4345 8.02853 1.634 8.01653 1.7865 7.90953L6.7865 4.40953C6.9205 4.31653 7 4.16353 7 4.00053C7 4.00003 7 4.00003 7 3.99953C7 4.00003 7 4.00003 7 3.99953Z" />
+        </svg>
+    </button>
+    <button class="down">
+        <svg viewBox="0 0 8 8">
+            <path d="M4.00053 7C4.16353 7 4.31653 6.9205 4.41003 6.7865L7.91003 1.7865C8.01703 1.634 8.02903 1.4345 7.94403 1.269C7.85753 1.1035 7.68703 1 7.50053 1H0.499533C0.313033 1 0.142533 1.1035 0.0560328 1.269C-0.0289672 1.4345 -0.0169672 1.634 0.0900328 1.7865L3.59003 6.7865C3.68353 6.9205 3.83653 7 3.99953 7C4.00003 7 4.00003 7 4.00053 7C4.00003 7 4.00003 7 4.00053 7Z" />
+        </svg>
+    </button>
+    <span class="hide">Please don't press <strong>C</strong></span>
+</div>
+
+<a class="link" href="https://check.so/" target="_blank"><svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.1286 32C57.1286 36.0179 56.8608 40.0357 56.459 43.5179C55.7893 50.3482 50.4768 55.6607 43.6911 56.3304C40.1643 56.7321 36.1465 57 32.1286 57C28.1108 57 24.0929 56.7321 20.6108 56.3304C13.7804 55.6607 8.51256 50.3482 7.79827 43.5179C7.39649 40.0357 7.12863 36.0179 7.12863 32C7.12863 27.9821 7.39649 23.9643 7.79827 20.4375C8.51256 13.6518 13.7804 8.33929 20.6108 7.66964C24.0929 7.26786 28.1108 7 32.1286 7C36.1465 7 40.1643 7.26786 43.6911 7.66964C47.363 8.032 50.6035 9.75383 52.9104 12.3329C44.3215 17.7863 36.9127 24.9293 31.1504 33.2947C28.9284 30.3478 26.4965 27.5686 23.8835 24.9786C22.6451 23.7511 20.646 23.76 19.4185 24.9984C18.191 26.2369 18.1998 28.2359 19.4383 29.4635C22.8748 32.8697 25.9661 36.6281 28.6359 40.6779C29.2334 41.5842 30.2546 42.12 31.3399 42.0966C32.4252 42.0732 33.4224 41.4939 33.9803 40.5627C39.4638 31.4101 47.0078 23.6326 55.9692 17.872C56.2063 18.6976 56.3719 19.5551 56.459 20.4375C56.8608 23.9643 57.1286 27.9821 57.1286 32ZM52.9104 12.3329C54.8687 11.0895 56.8883 9.93399 58.9638 8.87182C60.516 8.07741 62.4183 8.69175 63.2128 10.244C64.0072 11.7962 63.3928 13.6986 61.8406 14.493C59.8241 15.525 57.8649 16.6534 55.9692 17.872C55.3695 15.7842 54.3124 13.9002 52.9104 12.3329Z" fill="#F9A28E"/>
+</svg></a>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/interactive-skate-loading/dist/script.js b/interactive-skate-loading/dist/script.js
new file mode 100644
index 0000000..ef77186
--- /dev/null
+++ b/interactive-skate-loading/dist/script.js
@@ -0,0 +1,353 @@
+const { to, set } = gsap;
+
+document.querySelectorAll('.loading').forEach(loading => {
+    loading.count = 0
+    let lines = to(loading, {
+        keyframes: [{
+            '--line-top-x': '-100%',
+            '--line-bottom-x': '-200%',
+            onComplete() {
+                set(loading, {
+                    '--line-top-x': '200%',
+                    '--line-bottom-x': '100%',
+                })
+            }
+        }, {
+            '--line-top-x': '0%',
+            '--line-bottom-x': '0%'
+        }],
+        duration: 1,
+        repeat: -1
+    })
+
+    const keyboard = document.querySelector('#keyboard')
+    const arrowUp = keyboard.querySelector('.up')
+    const arrowLeft = keyboard.querySelector('.left')
+    const arrowRight = keyboard.querySelector('.right')
+    const arrowDown = keyboard.querySelector('.down')
+    const spanHidden = keyboard.querySelector('span')
+
+    document.body.onkeyup = e => {
+        if(e.keyCode == 32 || e.keyCode == 38) {
+            jump(loading, lines)
+            arrowUp.classList.add('pressed')
+            setTimeout(() => arrowUp.classList.remove('pressed'), 400)
+        }
+        if(e.keyCode == 40 || e.keyCode == 39 || e.keyCode == 37) {
+            if(!loading.ouch) {
+                reset(loading, lines)
+            }
+            keyboard.querySelector('.pressed').classList.remove('pressed')
+        }
+        if(loading.ouch && (e.keyCode == 32 || e.keyCode == 38)) {
+            loading.ouch = false
+            reset(loading, lines)
+        }
+    }
+
+    document.body.onkeydown = e => {
+        if(e.keyCode == 39){
+            fast(loading, lines)
+            arrowRight.classList.add('pressed')
+        }
+        if(e.keyCode == 40){
+            down(loading, lines)
+            arrowDown.classList.add('pressed')
+        }
+        if(e.keyCode == 37) {
+            slow(loading, lines)
+            arrowLeft.classList.add('pressed')
+        }
+        if(e.keyCode == 67) {
+            fall(loading, lines)
+            spanHidden.classList.add('pressed')
+            setTimeout(() => spanHidden.classList.remove('pressed'), 400)
+        }
+    }
+
+    if(('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {
+        spanHidden.innerHTML = "Please don't click here"
+    }
+
+    arrowUp.addEventListener('click', e => {
+        if(loading.ouch) {
+            loading.ouch = false
+            reset(loading, lines)
+        }
+        jump(loading, lines)
+    })
+    arrowLeft.addEventListener('pointerdown', e => slow(loading, lines))
+    arrowRight.addEventListener('pointerdown', e => fast(loading, lines))
+    arrowDown.addEventListener('pointerdown', e => down(loading, lines))
+    spanHidden.addEventListener('click', e => fall(loading, lines))
+
+    arrowLeft.addEventListener('pointerup', e => !loading.ouch && reset(loading, lines))
+    arrowRight.addEventListener('pointerup', e => !loading.ouch && reset(loading, lines))
+    arrowDown.addEventListener('pointerup', e => !loading.ouch && reset(loading, lines))
+})
+
+const jump = (loading, lines) => {
+    if(loading.active) {
+        return
+    }
+    loading.active = true
+    loading.count += 1
+    if(loading.count > 3) {
+        document.querySelector('#keyboard span').classList.remove('hide')
+    }
+    lines.timeScale(2)
+    to(loading, {
+        keyframes: [{
+            '--skate-x': '-12px',
+            duration: .3
+        }, {
+            '--skate-x': '12px',
+            duration: .5
+        }, {
+            '--skate-x': '0px',
+            duration: .5
+        }]
+    })
+    to(loading, {
+        keyframes: [{
+            '--skate-y': '-32px',
+            duration: .4,
+            delay: .2
+        }, {
+            '--skate-y': '0px',
+            duration: .2
+        }]
+    })
+    to(loading, {
+        keyframes: [{
+            duration: .2,
+            delay: .2,
+            '--arm-front': '40deg',
+            '--arm-front-end': '-12deg',
+            '--arm-back': '172deg',
+            '--arm-back-end': '38deg',
+            '--leg-front': '-8deg',
+            '--leg-front-end': '102deg',
+            '--leg-back': '103deg',
+            '--leg-back-end': '-16deg',
+            '--board-r': '-40deg',
+            '--body-r': '7deg',
+            '--body-y': '-90%',
+            '--body-x': '-160%',
+        }, {
+            duration: .2,
+            '--arm-front': '24deg',
+            '--arm-front-end': '-48deg',
+            '--arm-back': '172deg',
+            '--arm-back-end': '15deg',
+            '--leg-front': '22deg',
+            '--leg-front-end': '55deg',
+            '--leg-back': '142deg',
+            '--leg-back-end': '-58deg',
+            '--board-r': '3deg',
+            '--body-r': '12deg',
+            '--body-y': '-56%',
+            '--body-x': '-60%',
+        }, {
+            duration: .2,
+            '--arm-front': '24deg',
+            '--arm-front-end': '-48deg',
+            '--arm-back': '164deg',
+            '--arm-back-end': '-36deg',
+            '--leg-front': '-4deg',
+            '--leg-front-end': '66deg',
+            '--leg-back': '111deg',
+            '--leg-back-end': '-36deg',
+            '--board-r': '0deg',
+            '--body-r': '34deg',
+            '--body-y': '-53%',
+            '--body-x': '-28%',
+        }, {
+            '--arm-front': '24deg',
+            '--arm-front-end': '-48deg',
+            '--arm-back': '164deg',
+            '--arm-back-end': '-50deg',
+            '--leg-front': '40deg',
+            '--leg-front-end': '30deg',
+            '--leg-back': '120deg',
+            '--leg-back-end': '-36deg',
+            '--board-r': '0deg',
+            '--body-r': '12deg',
+            '--body-y': '-65%',
+            '--body-x': '-85%',
+            duration: .4,
+            onComplete() {
+                loading.active = false
+                lines.timeScale(1)
+            }
+        }]
+    })
+}
+
+const fast = (loading, lines) => {
+    if(loading.active) {
+        return
+    }
+    loading.active = true
+    loading.count += 1
+    if(loading.count > 3) {
+        document.querySelector('#keyboard span').classList.remove('hide')
+    }
+    lines.timeScale(2.5)
+    to(loading, {
+        '--skate-x': '12px',
+        duration: .3
+    })
+    to(loading, {
+        duration: .2,
+        '--arm-front': '24deg',
+        '--arm-front-end': '-48deg',
+        '--arm-back': '164deg',
+        '--arm-back-end': '-36deg',
+        '--leg-front': '-4deg',
+        '--leg-front-end': '66deg',
+        '--leg-back': '111deg',
+        '--leg-back-end': '-36deg',
+        '--board-r': '0deg',
+        '--body-r': '34deg',
+        '--body-y': '-53%',
+        '--body-x': '-28%',
+    })
+}
+
+const reset = (loading, lines) => {
+    if(!loading.active) {
+        return
+    }
+    to(loading, {
+        '--skate-x': '0px',
+        duration: .3
+    })
+    to(loading, {
+        duration: .2,
+        '--arm-front': '24deg',
+        '--arm-front-end': '-48deg',
+        '--arm-back': '164deg',
+        '--arm-back-end': '-50deg',
+        '--leg-front': '40deg',
+        '--leg-front-end': '30deg',
+        '--leg-back': '120deg',
+        '--leg-back-end': '-36deg',
+        '--board-r': '0deg',
+        '--board-x': '0px',
+        '--body-r': '12deg',
+        '--body-y': '-65%',
+        '--body-x': '-85%',
+        onComplete() {
+            loading.active = false
+            lines.play()
+            lines.timeScale(1)
+        }
+    })
+}
+
+const slow = (loading, lines) => {
+    if(loading.active) {
+        return
+    }
+    loading.active = true
+    loading.count += 1
+    if(loading.count > 3) {
+        document.querySelector('#keyboard span').classList.remove('hide')
+    }
+    lines.timeScale(.5)
+    to(loading, {
+        '--skate-x': '-12px',
+        duration: .3
+    })
+    to(loading, {
+        duration: .2,
+        '--arm-front': '32deg',
+        '--arm-front-end': '20deg',
+        '--arm-back': '156deg',
+        '--arm-back-end': '-22deg',
+        '--leg-front': '19deg',
+        '--leg-front-end': '74deg',
+        '--leg-back': '134deg',
+        '--leg-back-end': '-29deg',
+        '--board-r': '-15deg',
+        '--body-r': '-8deg',
+        '--body-y': '-65%',
+        '--body-x': '-110%',
+    })
+}
+
+const down = (loading, lines) => {
+    if(loading.active) {
+        return
+    }
+    loading.active = true
+    loading.count += 1
+    if(loading.count > 3) {
+        document.querySelector('#keyboard span').classList.remove('hide')
+    }
+    to(loading, {
+        duration: .2,
+        '--arm-front': '-26deg',
+        '--arm-front-end': '-58deg',
+        '--arm-back': '204deg',
+        '--arm-back-end': '60deg',
+        '--leg-front': '40deg',
+        '--leg-front-end': '80deg',
+        '--leg-back': '150deg',
+        '--leg-back-end': '-96deg',
+        '--body-r': '180deg',
+        '--body-y': '-100%',
+    })
+}
+
+const fall = (loading, lines) => {
+    if(loading.active) {
+        return
+    }
+    loading.active = true
+    loading.ouch = true
+    lines.pause()
+    to(loading, {
+        duration: .5,
+        '--board-x': '60px'
+    })
+    to(loading, {
+        keyframes: [{
+            '--board-r': '-40deg',
+            duration: .15
+        }, {
+            '--board-r': '0deg',
+            duration: .3
+        }]
+    })
+    to(loading, {
+        keyframes: [{
+            '--line-top-x': '-100%',
+            '--line-bottom-x': '-200%',
+            '--body-r': '-8deg',
+            '--leg-back-end': '24deg',
+            '--leg-back': '60deg',
+            '--leg-front-end': '30deg',
+            '--leg-front': '10deg',
+            '--arm-back-end': '-40deg',
+            '--arm-back': '54deg',
+            '--arm-front-end': '-28deg',
+            '--arm-front': '24deg',
+            duration: .2
+        }, {
+            '--body-x': '-85%',
+            '--body-y': '36%',
+            '--body-r': '-26deg',
+            '--leg-back-end': '24deg',
+            '--leg-back': '20deg',
+            '--leg-front-end': '30deg',
+            '--leg-front': '-10deg',
+            '--arm-back-end': '-40deg',
+            '--arm-back': '164deg',
+            '--arm-front-end': '-28deg',
+            '--arm-front': '24deg',
+            duration: .2
+        }]
+    })
+}
\ No newline at end of file
diff --git a/interactive-skate-loading/dist/style.css b/interactive-skate-loading/dist/style.css
new file mode 100644
index 0000000..c06e7e6
--- /dev/null
+++ b/interactive-skate-loading/dist/style.css
@@ -0,0 +1,252 @@
+.loading {
+  --arm-front: 24deg;
+  --arm-front-end: -48deg;
+  --arm-back: 164deg;
+  --arm-back-end: -50deg;
+  --leg-front: 40deg;
+  --leg-front-end: 30deg;
+  --leg-back: 120deg;
+  --leg-back-end: -36deg;
+  --board-r: 0deg;
+  --board-x: 0px;
+  --body-r: 12deg;
+  --body-y: -65%;
+  --body-x: -85%;
+  --skate-x: 0px;
+  --skate-y: 0px;
+  --color: #F9A28E;
+  --line-top-x: 0%;
+  --line-bottom-x: 0%;
+  position: relative;
+}
+.loading .skate {
+  position: relative;
+  width: 40px;
+  height: 46px;
+  transform: translate(var(--skate-x), var(--skate-y)) translateZ(0);
+}
+.loading .skate .body {
+  background: var(--color);
+  height: 15px;
+  width: 7px;
+  border-radius: 4px;
+  transform-origin: 4px 11px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(var(--body-x), var(--body-y)) rotate(var(--body-r)) translateZ(0);
+}
+.loading .skate .body:before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  bottom: 16px;
+  left: 0;
+  position: absolute;
+  background: var(--color);
+  transform: translateY(-0.5px);
+}
+.loading .skate .body .arm,
+.loading .skate .body .arm:before,
+.loading .skate .body .leg,
+.loading .skate .body .leg:before {
+  content: "";
+  width: var(--w, 11px);
+  height: 4px;
+  top: var(--t, 0);
+  left: var(--l, 2px);
+  border-radius: 2px;
+  transform-origin: 2px 2px;
+  position: absolute;
+  background: var(--color);
+  transform: rotate(var(--r, 0deg));
+}
+.loading .skate .body .arm:before {
+  --l: 8px;
+}
+.loading .skate .body .arm.front {
+  --r: var(--arm-front);
+}
+.loading .skate .body .arm.front:before {
+  --r: var(--arm-front-end);
+}
+.loading .skate .body .arm.back {
+  --r: var(--arm-back);
+}
+.loading .skate .body .arm.back:before {
+  --r: var(--arm-back-end);
+}
+.loading .skate .body .leg {
+  --w: 11px;
+  --t: 11px;
+}
+.loading .skate .body .leg:before {
+  --t: 0;
+  --l: 8px;
+}
+.loading .skate .body .leg.front {
+  --r: var(--leg-front);
+}
+.loading .skate .body .leg.front:before {
+  --r: var(--leg-front-end);
+}
+.loading .skate .body .leg.back {
+  --l: 1px;
+  --r: var(--leg-back);
+}
+.loading .skate .body .leg.back:before {
+  --r: var(--leg-back-end);
+}
+.loading .skate .board {
+  position: absolute;
+  left: 2px;
+  bottom: -1px;
+  transform: translateX(var(--board-x)) rotate(var(--board-r)) translateZ(0);
+  transform-origin: 7px 5.5px;
+}
+.loading .skate .board svg {
+  display: block;
+  width: 34px;
+  height: 8px;
+  fill: var(--color);
+}
+.loading .line {
+  height: 3px;
+  border-radius: 1px;
+  overflow: hidden;
+  position: absolute;
+  right: 105%;
+  top: 18px;
+  width: 16px;
+  transform: scaleY(0.75);
+}
+.loading .line:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  background: var(--color);
+  transform: translateX(var(--x, var(--line-top-x)));
+}
+.loading .line.bottom {
+  --x: var(--line-bottom-x);
+  width: 13px;
+  top: 24px;
+}
+
+.link {
+  position: absolute;
+  right: 32px;
+  top: 32px;
+}
+.link svg {
+  display: block;
+  width: 32px;
+  height: 32px;
+}
+
+#keyboard {
+  display: grid;
+  grid-gap: 8px;
+  position: absolute;
+  left: 50%;
+  bottom: 48px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  transform: translateX(-50%);
+}
+#keyboard button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  height: 36px;
+  width: 40px;
+  border-radius: 7px;
+  background: #2C2C31;
+  border: none;
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: scale(var(--scale, 1)) translateZ(0);
+  transition: transform 0.15s;
+}
+#keyboard button svg {
+  display: block;
+  width: 8px;
+  height: 8px;
+  fill: var(--color, #7F7F85);
+  transition: fill 0.15s;
+}
+#keyboard button.up {
+  grid-row: 1;
+  grid-column: 2;
+}
+#keyboard button.left {
+  grid-row: 2;
+  grid-column: 1;
+}
+#keyboard button.right {
+  grid-row: 2;
+  grid-column: 3;
+}
+#keyboard button.down {
+  grid-row: 2;
+  grid-column: 2;
+}
+#keyboard button.pressed {
+  --scale: .95;
+  --color: #fff;
+}
+#keyboard span {
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -24px;
+  line-height: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #7F7F85;
+  text-align: center;
+  transition: opacity 0.25s;
+}
+#keyboard span strong {
+  transition: color 0.15s;
+  color: var(--color, #7F7F85);
+}
+#keyboard span.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+#keyboard span.pressed {
+  --color: #fff;
+}
+
+html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: inherit;
+}
+*:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #242428;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
\ No newline at end of file
diff --git a/interactive-skate-loading/license.txt b/interactive-skate-loading/license.txt
new file mode 100644
index 0000000..62b0544
--- /dev/null
+++ b/interactive-skate-loading/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Aaron Iker (https://codepen.io/aaroniker/pen/gOwEjBr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/interactive-skate-loading/src/index.html b/interactive-skate-loading/src/index.html
new file mode 100644
index 0000000..adf7acc
--- /dev/null
+++ b/interactive-skate-loading/src/index.html
@@ -0,0 +1,45 @@
+<div class="loading">
+    <div class="skate">
+        <div class="body">
+            <div class="arm back"></div>
+            <div class="arm front"></div>
+            <div class="leg back"></div>
+            <div class="leg front"></div>
+        </div>
+        <div class="board">
+            <svg viewBox="0 0 34 8">
+                <path d="M0.897306 0.911767C1.22218 0.30263 1.97934 0.072188 2.58848 0.397061L2.91936 0.573532C3.75214 1.01768 4.68144 1.25 5.62525 1.25H28.3752C29.3191 1.25 30.2484 1.01768 31.0811 0.573532L31.412 0.397061C32.0212 0.072188 32.7783 0.30263 33.1032 0.911767C33.4281 1.5209 33.1976 2.27807 32.5885 2.60294L32.2576 2.77941C31.0627 3.41667 29.7294 3.75 28.3752 3.75H27.9692C28.5841 4.09118 29.0002 4.747 29.0002 5.5C29.0002 6.60457 28.1048 7.5 27.0002 7.5C25.8957 7.5 25.0002 6.60457 25.0002 5.5C25.0002 4.747 25.4164 4.09118 26.0312 3.75H7.96925C8.5841 4.09118 9.00025 4.747 9.00025 5.5C9.00025 6.60457 8.10482 7.5 7.00025 7.5C5.89568 7.5 5.00025 6.60457 5.00025 5.5C5.00025 4.747 5.41639 4.09118 6.03124 3.75H5.62525C4.27109 3.75 2.93774 3.41667 1.74289 2.77941L1.41201 2.60294C0.802874 2.27807 0.572432 1.5209 0.897306 0.911767Z" />
+            </svg>
+        </div>
+        <div class="line top"></div>
+        <div class="line bottom"></div>
+    </div>
+</div>
+
+<div id="keyboard">
+    <button class="up">
+        <svg viewBox="0 0 8 8">
+            <path d="M3.99953 1C3.83653 1 3.68353 1.0795 3.59003 1.2135L0.0900328 6.2135C-0.0169672 6.366 -0.0289672 6.5655 0.0560328 6.731C0.142533 6.8965 0.313033 7 0.499533 7H7.50003C7.68653 7 7.85753 6.8965 7.94353 6.731C8.02853 6.5655 8.01653 6.366 7.90953 6.2135L4.40953 1.2135C4.31653 1.0795 4.16353 1 4.00053 1C4.00003 1 4.00003 1 3.99953 1C4.00003 1 4.00003 1 3.99953 1Z" />
+        </svg>
+    </button>
+    <button class="left">
+        <svg viewBox="0 0 8 8">
+            <path d="M1 4.00053C1 4.16353 1.0795 4.31653 1.2135 4.41003L6.2135 7.91003C6.366 8.01703 6.5655 8.02903 6.731 7.94403C6.8965 7.85753 7 7.68703 7 7.50053V0.499533C7 0.313033 6.8965 0.142033 6.731 0.0560328C6.5655 -0.0289672 6.366 -0.0169672 6.2135 0.0900328L1.2135 3.59003C1.0795 3.68353 1 3.83653 1 3.99953C1 4.00003 1 4.00003 1 4.00053C1 4.00003 1 4.00003 1 4.00053Z" />
+        </svg>
+    </button>
+    <button class="right">
+        <svg viewBox="0 0 8 8">
+            <path d="M7 3.99953C7 3.83653 6.9205 3.68353 6.7865 3.59003L1.7865 0.0900328C1.6345 -0.0169672 1.4345 -0.0289672 1.269 0.0560328C1.1035 0.142533 1 0.313033 1 0.499533V7.50003C1 7.68653 1.1035 7.85753 1.269 7.94353C1.4345 8.02853 1.634 8.01653 1.7865 7.90953L6.7865 4.40953C6.9205 4.31653 7 4.16353 7 4.00053C7 4.00003 7 4.00003 7 3.99953C7 4.00003 7 4.00003 7 3.99953Z" />
+        </svg>
+    </button>
+    <button class="down">
+        <svg viewBox="0 0 8 8">
+            <path d="M4.00053 7C4.16353 7 4.31653 6.9205 4.41003 6.7865L7.91003 1.7865C8.01703 1.634 8.02903 1.4345 7.94403 1.269C7.85753 1.1035 7.68703 1 7.50053 1H0.499533C0.313033 1 0.142533 1.1035 0.0560328 1.269C-0.0289672 1.4345 -0.0169672 1.634 0.0900328 1.7865L3.59003 6.7865C3.68353 6.9205 3.83653 7 3.99953 7C4.00003 7 4.00003 7 4.00053 7C4.00003 7 4.00003 7 4.00053 7Z" />
+        </svg>
+    </button>
+    <span class="hide">Please don't press <strong>C</strong></span>
+</div>
+
+<a class="link" href="https://check.so/" target="_blank"><svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.1286 32C57.1286 36.0179 56.8608 40.0357 56.459 43.5179C55.7893 50.3482 50.4768 55.6607 43.6911 56.3304C40.1643 56.7321 36.1465 57 32.1286 57C28.1108 57 24.0929 56.7321 20.6108 56.3304C13.7804 55.6607 8.51256 50.3482 7.79827 43.5179C7.39649 40.0357 7.12863 36.0179 7.12863 32C7.12863 27.9821 7.39649 23.9643 7.79827 20.4375C8.51256 13.6518 13.7804 8.33929 20.6108 7.66964C24.0929 7.26786 28.1108 7 32.1286 7C36.1465 7 40.1643 7.26786 43.6911 7.66964C47.363 8.032 50.6035 9.75383 52.9104 12.3329C44.3215 17.7863 36.9127 24.9293 31.1504 33.2947C28.9284 30.3478 26.4965 27.5686 23.8835 24.9786C22.6451 23.7511 20.646 23.76 19.4185 24.9984C18.191 26.2369 18.1998 28.2359 19.4383 29.4635C22.8748 32.8697 25.9661 36.6281 28.6359 40.6779C29.2334 41.5842 30.2546 42.12 31.3399 42.0966C32.4252 42.0732 33.4224 41.4939 33.9803 40.5627C39.4638 31.4101 47.0078 23.6326 55.9692 17.872C56.2063 18.6976 56.3719 19.5551 56.459 20.4375C56.8608 23.9643 57.1286 27.9821 57.1286 32ZM52.9104 12.3329C54.8687 11.0895 56.8883 9.93399 58.9638 8.87182C60.516 8.07741 62.4183 8.69175 63.2128 10.244C64.0072 11.7962 63.3928 13.6986 61.8406 14.493C59.8241 15.525 57.8649 16.6534 55.9692 17.872C55.3695 15.7842 54.3124 13.9002 52.9104 12.3329Z" fill="#F9A28E"/>
+</svg></a>
\ No newline at end of file
diff --git a/interactive-skate-loading/src/script.js b/interactive-skate-loading/src/script.js
new file mode 100644
index 0000000..94453ad
--- /dev/null
+++ b/interactive-skate-loading/src/script.js
@@ -0,0 +1,353 @@
+const { to, set } = gsap;
+
+document.querySelectorAll('.loading').forEach(loading => {
+    loading.count = 0
+    let lines = to(loading, {
+        keyframes: [{
+            '--line-top-x': '-100%',
+            '--line-bottom-x': '-200%',
+            onComplete() {
+                set(loading, {
+                    '--line-top-x': '200%',
+                    '--line-bottom-x': '100%',
+                })
+            }
+        }, {
+            '--line-top-x': '0%',
+            '--line-bottom-x': '0%'
+        }],
+        duration: 1,
+        repeat: -1
+    })
+
+    const keyboard = document.querySelector('#keyboard')
+    const arrowUp = keyboard.querySelector('.up')
+    const arrowLeft = keyboard.querySelector('.left')
+    const arrowRight = keyboard.querySelector('.right')
+    const arrowDown = keyboard.querySelector('.down')
+    const spanHidden = keyboard.querySelector('span')
+
+    document.body.onkeyup = e => {
+        if(e.keyCode == 32 || e.keyCode == 38) {
+            jump(loading, lines)
+            arrowUp.classList.add('pressed')
+            setTimeout(() => arrowUp.classList.remove('pressed'), 400)
+        }
+        if(e.keyCode == 40 || e.keyCode == 39 || e.keyCode == 37) {
+            if(!loading.ouch) {
+                reset(loading, lines)
+            }
+            keyboard.querySelector('.pressed').classList.remove('pressed')
+        }
+        if(loading.ouch && (e.keyCode == 32 || e.keyCode == 38)) {
+            loading.ouch = false
+            reset(loading, lines)
+        }
+    }
+
+    document.body.onkeydown = e => {
+        if(e.keyCode == 39){
+            fast(loading, lines)
+            arrowRight.classList.add('pressed')
+        }
+        if(e.keyCode == 40){
+            down(loading, lines)
+            arrowDown.classList.add('pressed')
+        }
+        if(e.keyCode == 37) {
+            slow(loading, lines)
+            arrowLeft.classList.add('pressed')
+        }
+        if(e.keyCode == 67) {
+            fall(loading, lines)
+            spanHidden.classList.add('pressed')
+            setTimeout(() => spanHidden.classList.remove('pressed'), 400)
+        }
+    }
+
+    if(('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {
+        spanHidden.innerHTML = "Please don't click here"
+    }
+
+    arrowUp.addEventListener('click', e => {
+        if(loading.ouch) {
+            loading.ouch = false
+            reset(loading, lines)
+        }
+        jump(loading, lines)
+    })
+    arrowLeft.addEventListener('pointerdown', e => slow(loading, lines))
+    arrowRight.addEventListener('pointerdown', e => fast(loading, lines))
+    arrowDown.addEventListener('pointerdown', e => down(loading, lines))
+    spanHidden.addEventListener('click', e => fall(loading, lines))
+
+    arrowLeft.addEventListener('pointerup', e => !loading.ouch && reset(loading, lines))
+    arrowRight.addEventListener('pointerup', e => !loading.ouch && reset(loading, lines))
+    arrowDown.addEventListener('pointerup', e => !loading.ouch && reset(loading, lines))
+})
+
+const jump = (loading, lines) => {
+    if(loading.active) {
+        return
+    }
+    loading.active = true
+    loading.count += 1
+    if(loading.count > 3) {
+        document.querySelector('#keyboard span').classList.remove('hide')
+    }
+    lines.timeScale(2)
+    to(loading, {
+        keyframes: [{
+            '--skate-x': '-12px',
+            duration: .3
+        }, {
+            '--skate-x': '12px',
+            duration: .5
+        }, {
+            '--skate-x': '0px',
+            duration: .5
+        }]
+    })
+    to(loading, {
+        keyframes: [{
+            '--skate-y': '-32px',
+            duration: .4,
+            delay: .2
+        }, {
+            '--skate-y': '0px',
+            duration: .2
+        }]
+    })
+    to(loading, {
+        keyframes: [{
+            duration: .2,
+            delay: .2,
+            '--arm-front': '40deg',
+            '--arm-front-end': '-12deg',
+            '--arm-back': '172deg',
+            '--arm-back-end': '38deg',
+            '--leg-front': '-8deg',
+            '--leg-front-end': '102deg',
+            '--leg-back': '103deg',
+            '--leg-back-end': '-16deg',
+            '--board-r': '-40deg',
+            '--body-r': '7deg',
+            '--body-y': '-90%',
+            '--body-x': '-160%',
+        }, {
+            duration: .2,
+            '--arm-front': '24deg',
+            '--arm-front-end': '-48deg',
+            '--arm-back': '172deg',
+            '--arm-back-end': '15deg',
+            '--leg-front': '22deg',
+            '--leg-front-end': '55deg',
+            '--leg-back': '142deg',
+            '--leg-back-end': '-58deg',
+            '--board-r': '3deg',
+            '--body-r': '12deg',
+            '--body-y': '-56%',
+            '--body-x': '-60%',
+        }, {
+            duration: .2,
+            '--arm-front': '24deg',
+            '--arm-front-end': '-48deg',
+            '--arm-back': '164deg',
+            '--arm-back-end': '-36deg',
+            '--leg-front': '-4deg',
+            '--leg-front-end': '66deg',
+            '--leg-back': '111deg',
+            '--leg-back-end': '-36deg',
+            '--board-r': '0deg',
+            '--body-r': '34deg',
+            '--body-y': '-53%',
+            '--body-x': '-28%',
+        }, {
+            '--arm-front': '24deg',
+            '--arm-front-end': '-48deg',
+            '--arm-back': '164deg',
+            '--arm-back-end': '-50deg',
+            '--leg-front': '40deg',
+            '--leg-front-end': '30deg',
+            '--leg-back': '120deg',
+            '--leg-back-end': '-36deg',
+            '--board-r': '0deg',
+            '--body-r': '12deg',
+            '--body-y': '-65%',
+            '--body-x': '-85%',
+            duration: .4,
+            onComplete() {
+                loading.active = false
+                lines.timeScale(1)
+            }
+        }]
+    })
+}
+
+const fast = (loading, lines) => {
+    if(loading.active) {
+        return
+    }
+    loading.active = true
+    loading.count += 1
+    if(loading.count > 3) {
+        document.querySelector('#keyboard span').classList.remove('hide')
+    }
+    lines.timeScale(2.5)
+    to(loading, {
+        '--skate-x': '12px',
+        duration: .3
+    })
+    to(loading, {
+        duration: .2,
+        '--arm-front': '24deg',
+        '--arm-front-end': '-48deg',
+        '--arm-back': '164deg',
+        '--arm-back-end': '-36deg',
+        '--leg-front': '-4deg',
+        '--leg-front-end': '66deg',
+        '--leg-back': '111deg',
+        '--leg-back-end': '-36deg',
+        '--board-r': '0deg',
+        '--body-r': '34deg',
+        '--body-y': '-53%',
+        '--body-x': '-28%',
+    })
+}
+
+const reset = (loading, lines) => {
+    if(!loading.active) {
+        return
+    }
+    to(loading, {
+        '--skate-x': '0px',
+        duration: .3
+    })
+    to(loading, {
+        duration: .2,
+        '--arm-front': '24deg',
+        '--arm-front-end': '-48deg',
+        '--arm-back': '164deg',
+        '--arm-back-end': '-50deg',
+        '--leg-front': '40deg',
+        '--leg-front-end': '30deg',
+        '--leg-back': '120deg',
+        '--leg-back-end': '-36deg',
+        '--board-r': '0deg',
+        '--board-x': '0px',
+        '--body-r': '12deg',
+        '--body-y': '-65%',
+        '--body-x': '-85%',
+        onComplete() {
+            loading.active = false
+            lines.play()
+            lines.timeScale(1)
+        }
+    })
+}
+
+const slow = (loading, lines) => {
+    if(loading.active) {
+        return
+    }
+    loading.active = true
+    loading.count += 1
+    if(loading.count > 3) {
+        document.querySelector('#keyboard span').classList.remove('hide')
+    }
+    lines.timeScale(.5)
+    to(loading, {
+        '--skate-x': '-12px',
+        duration: .3
+    })
+    to(loading, {
+        duration: .2,
+        '--arm-front': '32deg',
+        '--arm-front-end': '20deg',
+        '--arm-back': '156deg',
+        '--arm-back-end': '-22deg',
+        '--leg-front': '19deg',
+        '--leg-front-end': '74deg',
+        '--leg-back': '134deg',
+        '--leg-back-end': '-29deg',
+        '--board-r': '-15deg',
+        '--body-r': '-8deg',
+        '--body-y': '-65%',
+        '--body-x': '-110%',
+    })
+}
+
+const down = (loading, lines) => {
+    if(loading.active) {
+        return
+    }
+    loading.active = true
+    loading.count += 1
+    if(loading.count > 3) {
+        document.querySelector('#keyboard span').classList.remove('hide')
+    }
+    to(loading, {
+        duration: .2,
+        '--arm-front': '-26deg',
+        '--arm-front-end': '-58deg',
+        '--arm-back': '204deg',
+        '--arm-back-end': '60deg',
+        '--leg-front': '40deg',
+        '--leg-front-end': '80deg',
+        '--leg-back': '150deg',
+        '--leg-back-end': '-96deg',
+        '--body-r': '180deg',
+        '--body-y': '-100%',
+    })
+}
+
+const fall = (loading, lines) => {
+    if(loading.active) {
+        return
+    }
+    loading.active = true
+    loading.ouch = true
+    lines.pause()
+    to(loading, {
+        duration: .5,
+        '--board-x': '60px'
+    })
+    to(loading, {
+        keyframes: [{
+            '--board-r': '-40deg',
+            duration: .15
+        }, {
+            '--board-r': '0deg',
+            duration: .3
+        }]
+    })
+    to(loading, {
+        keyframes: [{
+            '--line-top-x': '-100%',
+            '--line-bottom-x': '-200%',
+            '--body-r': '-8deg',
+            '--leg-back-end': '24deg',
+            '--leg-back': '60deg',
+            '--leg-front-end': '30deg',
+            '--leg-front': '10deg',
+            '--arm-back-end': '-40deg',
+            '--arm-back': '54deg',
+            '--arm-front-end': '-28deg',
+            '--arm-front': '24deg',
+            duration: .2
+        }, {
+            '--body-x': '-85%',
+            '--body-y': '36%',
+            '--body-r': '-26deg',
+            '--leg-back-end': '24deg',
+            '--leg-back': '20deg',
+            '--leg-front-end': '30deg',
+            '--leg-front': '-10deg',
+            '--arm-back-end': '-40deg',
+            '--arm-back': '164deg',
+            '--arm-front-end': '-28deg',
+            '--arm-front': '24deg',
+            duration: .2
+        }]
+    })
+}
diff --git a/interactive-skate-loading/src/style.scss b/interactive-skate-loading/src/style.scss
new file mode 100644
index 0000000..385b83a
--- /dev/null
+++ b/interactive-skate-loading/src/style.scss
@@ -0,0 +1,251 @@
+.loading {
+    --arm-front: 24deg;
+    --arm-front-end: -48deg;
+    --arm-back: 164deg;
+    --arm-back-end: -50deg;
+    --leg-front: 40deg;
+    --leg-front-end: 30deg;
+    --leg-back: 120deg;
+    --leg-back-end: -36deg;
+    --board-r: 0deg;
+    --board-x: 0px;
+    --body-r: 12deg;
+    --body-y: -65%;
+    --body-x: -85%;
+    --skate-x: 0px;
+    --skate-y: 0px;
+    --color: #F9A28E;
+    --line-top-x: 0%;
+    --line-bottom-x: 0%;
+    position: relative;
+    .skate {
+        position: relative;
+        width: 40px;
+        height: 46px;
+        transform: translate(var(--skate-x), var(--skate-y)) translateZ(0);
+        .body {
+            background: var(--color);
+            height: 15px;
+            width: 7px;
+            border-radius: 4px;
+            transform-origin: 4px 11px;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(var(--body-x), var(--body-y)) rotate(var(--body-r)) translateZ(0);
+            &:before {
+                content: '';
+                width: 8px;
+                height: 8px;
+                border-radius: 4px;
+                bottom: 16px;
+                left: 0;
+                position: absolute;
+                background: var(--color);
+                transform: translateY(-.5px);
+            }
+            .arm,
+            .arm:before,
+            .leg,
+            .leg:before {
+                content: '';
+                width: var(--w, 11px);
+                height: 4px;
+                top: var(--t, 0);
+                left: var(--l, 2px);
+                border-radius: 2px;
+                transform-origin: 2px 2px;
+                position: absolute;
+                background: var(--color);
+                transform: rotate(var(--r, 0deg));
+            }
+            .arm {
+                &:before {
+                    --l: 8px;
+                }
+                &.front {
+                    --r: var(--arm-front);
+                    &:before {
+                        --r: var(--arm-front-end);
+                    }
+                }
+                &.back {
+                    --r: var(--arm-back);
+                    &:before {
+                        --r: var(--arm-back-end);
+                    }
+                }
+            }
+            .leg {
+                --w: 11px;
+                --t: 11px;
+                &:before {
+                    --t: 0;
+                    --l: 8px;
+                }
+                &.front {
+                    --r: var(--leg-front);
+                    &:before {
+                        --r: var(--leg-front-end);
+                    }
+                }
+                &.back {
+                    --l: 1px;
+                    --r: var(--leg-back);
+                    &:before {
+                        --r: var(--leg-back-end);
+                    }
+                }
+            }
+        }
+        .board {
+            position: absolute;
+            left: 2px;
+            bottom: -1px;
+            transform: translateX(var(--board-x)) rotate(var(--board-r)) translateZ(0);
+            transform-origin: 7px 5.5px;
+            svg {
+                display: block;
+                width: 34px;
+                height: 8px;
+                fill: var(--color);
+            }
+        }
+    }
+    .line {
+        height: 3px;
+        border-radius: 1px;
+        overflow: hidden;
+        position: absolute;
+        right: 105%;
+        top: 18px;
+        width: 16px;
+        transform: scaleY(.75);
+        &:before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: inherit;
+            background: var(--color);
+            transform: translateX(var(--x, var(--line-top-x)));
+        }
+        &.bottom {
+            --x: var(--line-bottom-x);
+            width: 13px;
+            top: 24px;
+        }
+    }
+}
+
+.link {
+    position: absolute;
+    right: 32px;
+    top: 32px;
+    svg {
+        display: block;
+        width: 32px;
+        height: 32px;
+    }
+}
+
+#keyboard {
+    display: grid;
+    grid-gap: 8px;
+    position: absolute;
+    left: 50%;
+    bottom: 48px;
+    user-select: none;
+    transform: translateX(-50%);
+    button {
+        appearance: none;
+        height: 36px;
+        width: 40px;
+        border-radius: 7px;
+        background: #2C2C31;
+        border: none;
+        outline: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transform: scale(var(--scale, 1)) translateZ(0);
+        transition: transform .15s;
+        svg {
+            display: block;
+            width: 8px;
+            height: 8px;
+            fill: var(--color, #7F7F85);
+            transition: fill .15s;
+        }
+        &.up {
+            grid-row: 1;
+            grid-column: 2;
+        }
+        &.left {
+            grid-row: 2;
+            grid-column: 1;
+        }
+        &.right {
+            grid-row: 2;
+            grid-column: 3;
+        }
+        &.down {
+            grid-row: 2;
+            grid-column: 2;
+        }
+        &.pressed {
+            --scale: .95;
+            --color: #fff;
+        }
+    }
+    span {
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -24px;
+        line-height: 16px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #7F7F85;
+        text-align: center;
+        transition: opacity .25s;
+        strong {
+            transition: color .15s;
+            color: var(--color, #7F7F85);
+        }
+        &.hide {
+            opacity: 0;
+            pointer-events: none;
+        }
+        &.pressed {
+            --color: #fff;
+        }
+    }
+}
+
+html {
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+}
+
+* {
+    box-sizing: inherit;
+    &:before,
+    &:after {
+        box-sizing: inherit;
+    }
+}
+
+// Center & dribbble
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #242428;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
\ No newline at end of file
diff --git a/interior-design-builder/README.markdown b/interior-design-builder/README.markdown
new file mode 100644
index 0000000..fe3a59b
--- /dev/null
+++ b/interior-design-builder/README.markdown
@@ -0,0 +1,10 @@
+# Interior design builder
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/camilleguy/pen/NWbbezG](https://codepen.io/camilleguy/pen/NWbbezG).
+
+Disappearing Codepen challenge.
+Concept design of an interior design builder with informative animation.
+ 
+To get to get to know the user taste, the app shows him some pictures, and he is invited to give a feedback. When a feedback is given, the design disappears in an informative way, whether they are liked (and then added to favorite list), or disliked (and then definitively removed from the view).
+
+Used Pug, Sass, Vanilla Javascript, and the Web Animation API.
diff --git a/interior-design-builder/dist/index.html b/interior-design-builder/dist/index.html
new file mode 100644
index 0000000..82d55ec
--- /dev/null
+++ b/interior-design-builder/dist/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Interior design builder</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<header class="header">
+  <div class="header__branding">Your interior design builder</div>
+  <nav class="header__menu">
+    <ul>
+      <div class="header__menuItem"><i class="header__menuItemIcon"><svg viewBox="0 0 576 512" width="100" title="home"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z" /></svg></i>
+        <li class="header__menuItemLabel">Home</li>
+      </div>
+      <div class="header__menuItem"><i class="header__menuItemIcon" id="favMenuItem"><svg viewBox="0 0 512 512" width="100" title="heart"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" /></svg></i>
+        <li class="header__menuItemLabel">Favorites</li>
+      </div>
+      <div class="header__menuItem"><i class="header__menuItemIcon"><svg viewBox="0 0 496 512" width="100" title="compass"><path d="M225.38 233.37c-12.5 12.5-12.5 32.76 0 45.25 12.49 12.5 32.76 12.5 45.25 0 12.5-12.5 12.5-32.76 0-45.25-12.5-12.49-32.76-12.49-45.25 0zM248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm126.14 148.05L308.17 300.4a31.938 31.938 0 0 1-15.77 15.77l-144.34 65.97c-16.65 7.61-33.81-9.55-26.2-26.2l65.98-144.35a31.938 31.938 0 0 1 15.77-15.77l144.34-65.97c16.65-7.6 33.8 9.55 26.19 26.2z" /></svg></i>
+        <li class="header__menuItemLabel">Explore</li>
+      </div>
+      <div class="header__menuItem"><i class="header__menuItemIcon"><svg viewBox="0 0 512 512" width="100" title="cog"><path d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z" /></svg></i>
+        <li class="header__menuItemLabel">Settings</li>
+      </div>
+      <div class="header__menuItem"><i class="header__menuItemIcon"><svg viewBox="0 0 512 512" width="100" title="info-circle"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" /></svg></i>
+        <li class="header__menuItemLabel">About</li>
+      </div>
+    </ul>
+  </nav>
+</header>
+<main class="main">
+  <header>
+    <h1>What's your kind of interior design?</h1>
+    <p>This will help us suit our suggestions to your taste</p>
+  </header>
+  <div id="cards">
+    <article class="card card_hidden" id="card-0">
+      <div class="card__image overflowFixForSafari"><img src="" alt="A nice furniture"/></div>
+      <div class="card__choice">
+        <button data-action="dislike"><svg viewBox="0 0 512 512" width="100" title="heart-broken"><path d="M473.7 73.8l-2.4-2.5c-46-47-118-51.7-169.6-14.8L336 159.9l-96 64 48 128-144-144 96-64-28.6-86.5C159.7 19.6 87 24 40.7 71.4l-2.4 2.4C-10.4 123.6-12.5 202.9 31 256l212.1 218.6c7.1 7.3 18.6 7.3 25.7 0L481 255.9c43.5-53 41.4-132.3-7.3-182.1z" /></svg></button>
+        <button data-action="like"><svg viewBox="0 0 512 512" width="100" title="heart"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" /></svg></button>
+      </div>
+    </article>
+    <article class="card card_hidden" id="card-1">
+      <div class="card__image overflowFixForSafari"><img src="" alt="A nice furniture"/></div>
+      <div class="card__choice">
+        <button data-action="dislike"><svg viewBox="0 0 512 512" width="100" title="heart-broken"><path d="M473.7 73.8l-2.4-2.5c-46-47-118-51.7-169.6-14.8L336 159.9l-96 64 48 128-144-144 96-64-28.6-86.5C159.7 19.6 87 24 40.7 71.4l-2.4 2.4C-10.4 123.6-12.5 202.9 31 256l212.1 218.6c7.1 7.3 18.6 7.3 25.7 0L481 255.9c43.5-53 41.4-132.3-7.3-182.1z" /></svg></button>
+        <button data-action="like"><svg viewBox="0 0 512 512" width="100" title="heart"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" /></svg></button>
+      </div>
+    </article>
+    <article class="card card_hidden" id="card-2">
+      <div class="card__image overflowFixForSafari"><img src="" alt="A nice furniture"/></div>
+      <div class="card__choice">
+        <button data-action="dislike"><svg viewBox="0 0 512 512" width="100" title="heart-broken"><path d="M473.7 73.8l-2.4-2.5c-46-47-118-51.7-169.6-14.8L336 159.9l-96 64 48 128-144-144 96-64-28.6-86.5C159.7 19.6 87 24 40.7 71.4l-2.4 2.4C-10.4 123.6-12.5 202.9 31 256l212.1 218.6c7.1 7.3 18.6 7.3 25.7 0L481 255.9c43.5-53 41.4-132.3-7.3-182.1z" /></svg></button>
+        <button data-action="like"><svg viewBox="0 0 512 512" width="100" title="heart"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" /></svg></button>
+      </div>
+    </article>
+    <article class="card card_hidden" id="card-3">
+      <div class="card__image overflowFixForSafari"><img src="" alt="A nice furniture"/></div>
+      <div class="card__choice">
+        <button data-action="dislike"><svg viewBox="0 0 512 512" width="100" title="heart-broken"><path d="M473.7 73.8l-2.4-2.5c-46-47-118-51.7-169.6-14.8L336 159.9l-96 64 48 128-144-144 96-64-28.6-86.5C159.7 19.6 87 24 40.7 71.4l-2.4 2.4C-10.4 123.6-12.5 202.9 31 256l212.1 218.6c7.1 7.3 18.6 7.3 25.7 0L481 255.9c43.5-53 41.4-132.3-7.3-182.1z" /></svg></button>
+        <button data-action="like"><svg viewBox="0 0 512 512" width="100" title="heart"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" /></svg></button>
+      </div>
+    </article>
+    <article class="card card_hidden" id="card-4">
+      <div class="card__image overflowFixForSafari"><img src="" alt="A nice furniture"/></div>
+      <div class="card__choice">
+        <button data-action="dislike"><svg viewBox="0 0 512 512" width="100" title="heart-broken"><path d="M473.7 73.8l-2.4-2.5c-46-47-118-51.7-169.6-14.8L336 159.9l-96 64 48 128-144-144 96-64-28.6-86.5C159.7 19.6 87 24 40.7 71.4l-2.4 2.4C-10.4 123.6-12.5 202.9 31 256l212.1 218.6c7.1 7.3 18.6 7.3 25.7 0L481 255.9c43.5-53 41.4-132.3-7.3-182.1z" /></svg></button>
+        <button data-action="like"><svg viewBox="0 0 512 512" width="100" title="heart"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" /></svg></button>
+      </div>
+    </article>
+    <article class="card card_hidden" id="card-5">
+      <div class="card__image overflowFixForSafari"><img src="" alt="A nice furniture"/></div>
+      <div class="card__choice">
+        <button data-action="dislike"><svg viewBox="0 0 512 512" width="100" title="heart-broken"><path d="M473.7 73.8l-2.4-2.5c-46-47-118-51.7-169.6-14.8L336 159.9l-96 64 48 128-144-144 96-64-28.6-86.5C159.7 19.6 87 24 40.7 71.4l-2.4 2.4C-10.4 123.6-12.5 202.9 31 256l212.1 218.6c7.1 7.3 18.6 7.3 25.7 0L481 255.9c43.5-53 41.4-132.3-7.3-182.1z" /></svg></button>
+        <button data-action="like"><svg viewBox="0 0 512 512" width="100" title="heart"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" /></svg></button>
+      </div>
+    </article>
+    <article class="card card_hidden" id="card-6">
+      <div class="card__image overflowFixForSafari"><img src="" alt="A nice furniture"/></div>
+      <div class="card__choice">
+        <button data-action="dislike"><svg viewBox="0 0 512 512" width="100" title="heart-broken"><path d="M473.7 73.8l-2.4-2.5c-46-47-118-51.7-169.6-14.8L336 159.9l-96 64 48 128-144-144 96-64-28.6-86.5C159.7 19.6 87 24 40.7 71.4l-2.4 2.4C-10.4 123.6-12.5 202.9 31 256l212.1 218.6c7.1 7.3 18.6 7.3 25.7 0L481 255.9c43.5-53 41.4-132.3-7.3-182.1z" /></svg></button>
+        <button data-action="like"><svg viewBox="0 0 512 512" width="100" title="heart"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" /></svg></button>
+      </div>
+    </article>
+    <article class="card card_hidden" id="card-7">
+      <div class="card__image overflowFixForSafari"><img src="" alt="A nice furniture"/></div>
+      <div class="card__choice">
+        <button data-action="dislike"><svg viewBox="0 0 512 512" width="100" title="heart-broken"><path d="M473.7 73.8l-2.4-2.5c-46-47-118-51.7-169.6-14.8L336 159.9l-96 64 48 128-144-144 96-64-28.6-86.5C159.7 19.6 87 24 40.7 71.4l-2.4 2.4C-10.4 123.6-12.5 202.9 31 256l212.1 218.6c7.1 7.3 18.6 7.3 25.7 0L481 255.9c43.5-53 41.4-132.3-7.3-182.1z" /></svg></button>
+        <button data-action="like"><svg viewBox="0 0 512 512" width="100" title="heart"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" /></svg></button>
+      </div>
+    </article>
+  </div>
+</main>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/interior-design-builder/dist/script.js b/interior-design-builder/dist/script.js
new file mode 100644
index 0000000..f9d1ea9
--- /dev/null
+++ b/interior-design-builder/dist/script.js
@@ -0,0 +1,134 @@
+const unsplashIds = [
+  "FV3GConVSss",
+  "JaXs8Tk5Iww",
+  "UV81E0oXXWQ",
+  "MNz7IGrcEl0",
+  "tleCJiDOri0",
+  "JdcJn85xD2k",
+  "nhWgZNV85LQ",
+  "UXFJ-6Zj27M",
+  "98WE9hWWjiQ",
+  "3mlg5BRUifM",
+  "_B9J6abAHPA",
+  "VOS6akpHo1k",
+  "f7h2nTvEknM",
+  "RBoGC_OJvWs",
+  "GliaHAJ3_5A"
+];
+
+const cards = document.querySelectorAll(".card");
+const cardsContainer = document.querySelector("#cards");
+const favoriteIcon = document.getElementById("favMenuItem");
+
+function getCard(element) {
+  if (element.classList.contains("card")) {
+    return element;
+  } else if (element !== document.documentElement) {
+    return getCard(element.parentElement);
+  }
+}
+
+function getButton(element) {
+  if (element.tagName === "BUTTON") {
+    return element;
+  } else if (element !== document.documentElement)
+    return getButton(element.parentElement);
+}
+
+function getImg(card) {
+  if (!(card instanceof Element && card.classList.contains("card"))) return;
+  return card.querySelector("img");
+}
+
+function appear(card) {
+  const id = Math.floor(Math.random() * unsplashIds.length);
+  const cardImg = getImg(card);
+  const src = `https://source.unsplash.com/${unsplashIds[id]}/240x180`;
+  card.classList.remove("card_hidden");
+  cardImg.setAttribute("src", src);
+}
+
+function reset(card) {
+  const cardImg = getImg(card);
+  cardImg.setAttribute("src", "");
+  cardImg.parentElement.classList.remove("card__image_loaded");
+  card.classList.add("card_hidden");
+  card.classList.remove("card_favorited");
+  setTimeout(() => {
+    appear(card);
+  }, 400);
+}
+
+function like(card) {
+  const animationDuration = 1000;
+  const distance = getDistance(card, favoriteIcon);
+  card.classList.add("card_favorited");
+  favoriteIcon.animate([{ transform: "translateZ(700px)", offset: 0.5 }], {
+    duration: animationDuration,
+    easing: "ease-in-out"
+  });
+  const animation = card.animate(
+    [
+      {
+        transform: `translate(${distance.x}px, ${distance.y}px) scale(0.2) rotate(-40deg)`
+      }
+    ],
+    { duration: animationDuration / 2, easing: "ease-in" }
+  );
+
+  animation.onfinish = () => {
+    reset(card);
+  };
+}
+
+function dislike(card) {
+  const animation = card.animate(
+    [
+      {
+        transform: "scale(0.1) rotate(-130deg)",
+        opacity: 0
+      }
+    ],
+    { duration: 400, easing: "ease-in-out" }
+  );
+
+  animation.onfinish = () => {
+    reset(card);
+  };
+}
+
+function buttonHandler(event) {
+  const card = getCard(event.target);
+  const button = getButton(event.target);
+
+  if (!card || !button || !button.dataset) return;
+  if (button.dataset.action === "like") like(card);
+  if (button.dataset.action === "dislike") dislike(card);
+}
+
+function getDistance(elt1, elt2) {
+  if (!(elt1 instanceof Element && elt2 instanceof Element))
+    throw Error("Illegal use of the function");
+
+  const elt1Bbox = elt1.getBoundingClientRect();
+  const elt2Bbox = elt2.getBoundingClientRect();
+
+  return { x: elt2Bbox.x - elt1Bbox.x, y: elt2Bbox.y - elt1Bbox.y };
+}
+
+function init() {
+  cardsContainer.addEventListener("click", buttonHandler);
+
+  [...cards].forEach((card, index) => {
+    const cardImg = getImg(card);
+    cardImg.addEventListener("load", () => {
+      cardImg.parentElement.classList.add("card__image_loaded");
+    });
+
+    setTimeout(() => {
+      appear(card);
+    }, 200 + index * 50);
+  });
+}
+
+window.addEventListener("DOMContentLoaded", init);
\ No newline at end of file
diff --git a/interior-design-builder/dist/style.css b/interior-design-builder/dist/style.css
new file mode 100644
index 0000000..d348a61
--- /dev/null
+++ b/interior-design-builder/dist/style.css
@@ -0,0 +1,175 @@
+@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&family=Playfair+Display&family=Montserrat&display=swap");
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  font-family: Montserrat, sans-serif;
+}
+@media screen and (max-width: 1200px) {
+  html,
+body {
+    font-size: 0.8em;
+  }
+}
+
+h1 {
+  font-size: 3em;
+  margin-bottom: 0.25em;
+}
+
+h1,
+header > h1 + * {
+  font-family: "Playfair Display", serif;
+  color: #59524f;
+}
+
+header > h1 + * {
+  font-size: 1.4em;
+  margin-top: 0;
+}
+
+.header {
+  position: fixed;
+  float: left;
+  width: 18em;
+  min-height: 100%;
+  color: #f0f0f2;
+  background-color: #59524f;
+}
+.header__menu ul {
+  padding-left: 2em;
+}
+.header__branding {
+  padding: 1.8em 1em 2em 1em;
+  font-size: 2.5em;
+  background-color: #8c7a70;
+  font-family: "Dancing Script", cursive;
+}
+.header__menuItem {
+  margin: 3em 0;
+  font-size: 1.2em;
+  perspective: 1000px;
+  perspective-origin: calc(1.25em * 0.5) 50%;
+}
+.header__menuItemIcon {
+  float: left;
+  width: 1.25em;
+  height: 1.25em;
+}
+.header__menuItemIcon svg {
+  width: 1.25em;
+  height: 1.25em;
+  fill: #f0f0f2;
+  stroke: #f0f0f2;
+}
+.header__menuItemLabel {
+  display: inline-block;
+  list-style-type: none;
+  margin-left: 1em;
+}
+
+.main {
+  float: right;
+  padding: 1.25em 2.5em;
+  width: calc(100% - 18em);
+  min-height: 100%;
+  background-color: #d9ccc1;
+}
+
+#cards {
+  max-width: 75em;
+}
+
+.card {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  will-change: transform;
+  height: 15em;
+  width: 15em;
+  background-color: #c5b3a3;
+  border-radius: 25px;
+  margin: 2em 2em 0 0;
+  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
+}
+.card::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #f0f0f2;
+  transition: opacity 500ms ease-in-out;
+  opacity: 0;
+  z-index: -1;
+}
+.card_favorited {
+  transform-origin: 0.5em 0.5em;
+}
+.card_favorited::after {
+  z-index: 1;
+  opacity: 1;
+}
+.card_hidden {
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.5);
+}
+.card__image {
+  width: 15em;
+  height: 75%;
+  border-radius: 25px 25px 0 0;
+}
+.card__image > img {
+  position: relative;
+  opacity: 0;
+  transition: opacity 1000ms ease-in-out;
+  width: 100%;
+  height: 100%;
+}
+.card__image_loaded > img {
+  opacity: 1;
+}
+.card__choice {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 25%;
+}
+.card__choice button {
+  font-size: 0.9em;
+  background-color: #59524f;
+  width: 3em;
+  height: 3em;
+  border: none;
+  border-radius: calc(3em / 2);
+  padding: 0.3em 0 0 0;
+  margin: 0 1em;
+  cursor: pointer;
+}
+.card__choice button svg {
+  width: 1.3em;
+  height: 1.3em;
+  fill: #d9ccc1;
+  stroke: #d9ccc1;
+}
+.card__choice button[data-action=dislike]:hover, .card__choice button[data-action=dislike]:focus {
+  background-color: #b71c1c;
+}
+.card__choice button[data-action=like]:hover, .card__choice button[data-action=like]:focus {
+  background-color: #8c7a70;
+}
+
+.overflowFixForSafari {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+}
\ No newline at end of file
diff --git a/interior-design-builder/license.txt b/interior-design-builder/license.txt
new file mode 100644
index 0000000..b108b1b
--- /dev/null
+++ b/interior-design-builder/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Camille Guy (https://codepen.io/camilleguy/pen/NWbbezG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/interior-design-builder/src/index.pug b/interior-design-builder/src/index.pug
new file mode 100644
index 0000000..4451817
--- /dev/null
+++ b/interior-design-builder/src/index.pug
@@ -0,0 +1,34 @@
+mixin Card(id)
+  article.card.card_hidden(id=`card-${id}`)
+    .card__image.overflowFixForSafari
+      img(src="", alt="A nice furniture")
+    .card__choice
+      button(data-action="dislike") <svg viewBox="0 0 512 512" width="100" title="heart-broken"><path d="M473.7 73.8l-2.4-2.5c-46-47-118-51.7-169.6-14.8L336 159.9l-96 64 48 128-144-144 96-64-28.6-86.5C159.7 19.6 87 24 40.7 71.4l-2.4 2.4C-10.4 123.6-12.5 202.9 31 256l212.1 218.6c7.1 7.3 18.6 7.3 25.7 0L481 255.9c43.5-53 41.4-132.3-7.3-182.1z" /></svg>
+      button(data-action="like") <svg viewBox="0 0 512 512" width="100" title="heart"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" /></svg>
+
+header.header
+  .header__branding Your interior design builder
+  nav.header__menu
+    ul
+      .header__menuItem
+        i.header__menuItemIcon <svg viewBox="0 0 576 512" width="100" title="home"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z" /></svg>
+        li.header__menuItemLabel Home
+      .header__menuItem
+        i#favMenuItem.header__menuItemIcon <svg viewBox="0 0 512 512" width="100" title="heart"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" /></svg>
+        li.header__menuItemLabel Favorites
+      .header__menuItem
+        i.header__menuItemIcon <svg viewBox="0 0 496 512" width="100" title="compass"><path d="M225.38 233.37c-12.5 12.5-12.5 32.76 0 45.25 12.49 12.5 32.76 12.5 45.25 0 12.5-12.5 12.5-32.76 0-45.25-12.5-12.49-32.76-12.49-45.25 0zM248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm126.14 148.05L308.17 300.4a31.938 31.938 0 0 1-15.77 15.77l-144.34 65.97c-16.65 7.61-33.81-9.55-26.2-26.2l65.98-144.35a31.938 31.938 0 0 1 15.77-15.77l144.34-65.97c16.65-7.6 33.8 9.55 26.19 26.2z" /></svg>
+        li.header__menuItemLabel Explore
+      .header__menuItem
+        i.header__menuItemIcon <svg viewBox="0 0 512 512" width="100" title="cog"><path d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z" /></svg>
+        li.header__menuItemLabel Settings
+      .header__menuItem
+        i.header__menuItemIcon <svg viewBox="0 0 512 512" width="100" title="info-circle"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" /></svg>
+        li.header__menuItemLabel About
+main.main
+  header
+    h1 What's your kind of interior design?
+    p This will help us suit our suggestions to your taste
+  #cards
+    each val in [0, 1, 2, 3, 4, 5, 6, 7]
+      +Card(val)
diff --git a/interior-design-builder/src/script.js b/interior-design-builder/src/script.js
new file mode 100644
index 0000000..fa2cb5c
--- /dev/null
+++ b/interior-design-builder/src/script.js
@@ -0,0 +1,134 @@
+const unsplashIds = [
+  "FV3GConVSss",
+  "JaXs8Tk5Iww",
+  "UV81E0oXXWQ",
+  "MNz7IGrcEl0",
+  "tleCJiDOri0",
+  "JdcJn85xD2k",
+  "nhWgZNV85LQ",
+  "UXFJ-6Zj27M",
+  "98WE9hWWjiQ",
+  "3mlg5BRUifM",
+  "_B9J6abAHPA",
+  "VOS6akpHo1k",
+  "f7h2nTvEknM",
+  "RBoGC_OJvWs",
+  "GliaHAJ3_5A"
+];
+
+const cards = document.querySelectorAll(".card");
+const cardsContainer = document.querySelector("#cards");
+const favoriteIcon = document.getElementById("favMenuItem");
+
+function getCard(element) {
+  if (element.classList.contains("card")) {
+    return element;
+  } else if (element !== document.documentElement) {
+    return getCard(element.parentElement);
+  }
+}
+
+function getButton(element) {
+  if (element.tagName === "BUTTON") {
+    return element;
+  } else if (element !== document.documentElement)
+    return getButton(element.parentElement);
+}
+
+function getImg(card) {
+  if (!(card instanceof Element && card.classList.contains("card"))) return;
+  return card.querySelector("img");
+}
+
+function appear(card) {
+  const id = Math.floor(Math.random() * unsplashIds.length);
+  const cardImg = getImg(card);
+  const src = `https://source.unsplash.com/${unsplashIds[id]}/240x180`;
+  card.classList.remove("card_hidden");
+  cardImg.setAttribute("src", src);
+}
+
+function reset(card) {
+  const cardImg = getImg(card);
+  cardImg.setAttribute("src", "");
+  cardImg.parentElement.classList.remove("card__image_loaded");
+  card.classList.add("card_hidden");
+  card.classList.remove("card_favorited");
+  setTimeout(() => {
+    appear(card);
+  }, 400);
+}
+
+function like(card) {
+  const animationDuration = 1000;
+  const distance = getDistance(card, favoriteIcon);
+  card.classList.add("card_favorited");
+  favoriteIcon.animate([{ transform: "translateZ(700px)", offset: 0.5 }], {
+    duration: animationDuration,
+    easing: "ease-in-out"
+  });
+  const animation = card.animate(
+    [
+      {
+        transform: `translate(${distance.x}px, ${distance.y}px) scale(0.2) rotate(-40deg)`
+      }
+    ],
+    { duration: animationDuration / 2, easing: "ease-in" }
+  );
+
+  animation.onfinish = () => {
+    reset(card);
+  };
+}
+
+function dislike(card) {
+  const animation = card.animate(
+    [
+      {
+        transform: "scale(0.1) rotate(-130deg)",
+        opacity: 0
+      }
+    ],
+    { duration: 400, easing: "ease-in-out" }
+  );
+
+  animation.onfinish = () => {
+    reset(card);
+  };
+}
+
+function buttonHandler(event) {
+  const card = getCard(event.target);
+  const button = getButton(event.target);
+
+  if (!card || !button || !button.dataset) return;
+  if (button.dataset.action === "like") like(card);
+  if (button.dataset.action === "dislike") dislike(card);
+}
+
+function getDistance(elt1, elt2) {
+  if (!(elt1 instanceof Element && elt2 instanceof Element))
+    throw Error("Illegal use of the function");
+
+  const elt1Bbox = elt1.getBoundingClientRect();
+  const elt2Bbox = elt2.getBoundingClientRect();
+
+  return { x: elt2Bbox.x - elt1Bbox.x, y: elt2Bbox.y - elt1Bbox.y };
+}
+
+function init() {
+  cardsContainer.addEventListener("click", buttonHandler);
+
+  [...cards].forEach((card, index) => {
+    const cardImg = getImg(card);
+    cardImg.addEventListener("load", () => {
+      cardImg.parentElement.classList.add("card__image_loaded");
+    });
+
+    setTimeout(() => {
+      appear(card);
+    }, 200 + index * 50);
+  });
+}
+
+window.addEventListener("DOMContentLoaded", init);
diff --git a/interior-design-builder/src/style.scss b/interior-design-builder/src/style.scss
new file mode 100644
index 0000000..08ce170
--- /dev/null
+++ b/interior-design-builder/src/style.scss
@@ -0,0 +1,215 @@
+@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&family=Playfair+Display&family=Montserrat&display=swap");
+
+// Colors
+$primary-color: #d9ccc1;
+$dark-primary-color: #c5b3a3;
+$secondary-color: #8c7a70;
+$dark-secondary-color: #59524f;
+$white-color: #f0f0f2;
+$dislike-color: #b71c1c;
+$like-color: $secondary-color;
+
+// Typos
+$main-typo: Montserrat, sans-serif;
+$accent-typo: "Playfair Display", serif;
+$special-typo: "Dancing Script", cursive;
+
+// Settings
+$menu-size: 18em;
+$card-width: 15em;
+$perspective: 1000px;
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  font-family: $main-typo;
+
+  @media screen and (max-width: 1200px) {
+    font-size: 0.8em;
+  }
+}
+
+h1 {
+  font-size: 3em;
+  margin-bottom: 0.25em;
+}
+
+h1,
+header > h1 + * {
+  font-family: $accent-typo;
+  color: $dark-secondary-color;
+}
+
+header > h1 + * {
+  font-size: 1.4em;
+  margin-top: 0;
+}
+
+.header {
+  position: fixed;
+  float: left;
+  width: $menu-size;
+  min-height: 100%;
+  color: $white-color;
+  background-color: $dark-secondary-color;
+
+  &__menu {
+    & ul {
+      padding-left: 2em;
+    }
+  }
+
+  &__branding {
+    padding: 1.8em 1em 2em 1em;
+    font-size: 2.5em;
+    background-color: $secondary-color;
+    font-family: $special-typo;
+  }
+
+  &__menuItem {
+    margin: 3em 0;
+    font-size: 1.2em;
+    perspective: $perspective;
+    perspective-origin: calc(1.25em * 0.5) 50%;
+
+    &Icon {
+      float: left;
+      width: 1.25em;
+      height: 1.25em;
+
+      & svg {
+        width: 1.25em;
+        height: 1.25em;
+        fill: $white-color;
+        stroke: $white-color;
+      }
+    }
+
+    &Label {
+      display: inline-block;
+      list-style-type: none;
+      margin-left: 1em;
+    }
+  }
+}
+
+.main {
+  float: right;
+  padding: 1.25em 2.5em;
+  width: calc(100% - #{$menu-size});
+  min-height: 100%;
+  background-color: $primary-color;
+}
+
+#cards {
+  max-width: 75em;
+}
+
+.card {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  will-change: transform;
+  height: $card-width;
+  width: $card-width;
+  background-color: $dark-primary-color;
+  border-radius: 25px;
+  margin: 2em 2em 0 0;
+  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $white-color;
+    transition: opacity 500ms ease-in-out;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  &_favorited {
+    transform-origin: 0.5em 0.5em;
+
+    &::after {
+      z-index: 1;
+      opacity: 1;
+    }
+  }
+
+  &_hidden {
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.5);
+  }
+
+  &__image {
+    width: $card-width;
+    height: 75%;
+    border-radius: 25px 25px 0 0;
+
+    & > img {
+      position: relative;
+      opacity: 0;
+      transition: opacity 1000ms ease-in-out;
+      width: 100%;
+      height: 100%;
+    }
+
+    &_loaded > img {
+      opacity: 1;
+    }
+  }
+
+  &__choice {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 25%;
+
+    button {
+      font-size: 0.9em;
+      $size: 3em;
+      background-color: $dark-secondary-color;
+      width: $size;
+      height: $size;
+      border: none;
+      border-radius: calc(#{$size} / 2);
+      padding: 0.3em 0 0 0;
+      margin: 0 1em;
+      cursor: pointer;
+
+      & svg {
+        width: 1.3em;
+        height: 1.3em;
+        fill: $primary-color;
+        stroke: $primary-color;
+      }
+
+      &[data-action="dislike"]:hover,
+      &[data-action="dislike"]:focus {
+        background-color: $dislike-color;
+      }
+      &[data-action="like"]:hover,
+      &[data-action="like"]:focus {
+        background-color: $like-color;
+      }
+    }
+  }
+}
+
+.overflowFixForSafari {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+}
diff --git a/interruptions/README.markdown b/interruptions/README.markdown
new file mode 100644
index 0000000..8cf4b45
--- /dev/null
+++ b/interruptions/README.markdown
@@ -0,0 +1,4 @@
+# Interruptions
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/timseverien/pen/JvJPGb](https://codepen.io/timseverien/pen/JvJPGb).
+
+ 
\ No newline at end of file
diff --git a/interruptions/dist/index.html b/interruptions/dist/index.html
new file mode 100644
index 0000000..7e37695
--- /dev/null
+++ b/interruptions/dist/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Interruptions</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main class="container">
+	<h1>Interruptions</h1>
+	
+	<svg xmlns="http://www.w3.org/2000/svg" 
+			 width="512"
+			 height="512"
+			 viewBox="0 0 512 512"
+			 id="svg"></svg>
+
+	<label for="input-line-width">Line width</label>
+	<input type="range"
+				 min="1" max="16" value="2"
+				 id="input-line-width">
+
+	<label for="input-segment-size">Segment size</label>
+	<input type="range"
+				 min="0.01" max="0.25" value="0.05" step="0.01"
+				 id="input-segment-size">
+	
+	<h2>Inspiration</h2>
+	
+	<dl>
+		<div>
+			<dt>Original author</dt>
+			<dd>Vera Molnar</dd>
+		</div>
+		
+		<div>
+			<dt>Found via</dt>
+			<dd><a href="https://twitter.com/JoanieLemercier/status/987020585812316165">Joanie Lemercier on Twitter</a></dd>
+		</div>
+	</dl>
+</main>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/interruptions/dist/script.js b/interruptions/dist/script.js
new file mode 100644
index 0000000..0512e4b
--- /dev/null
+++ b/interruptions/dist/script.js
@@ -0,0 +1,69 @@
+const lerp = (a, b, t) => a + t * (b - a);
+const birandom = () => Math.random() * 2 - 1;
+
+const createLines = (options = {}) => {
+	const lineCount = 32;
+	const probability = 1/3;
+	const segmentSize = 0.05;
+	const segmentSizeHalf = options.segmentSize * 0.5;
+	const segmentSizeQuarter = options.segmentSize * 0.4;
+	
+	let svgContents = '';
+
+	for (let i = 0; i < lineCount; i++) {
+		const r = Math.random();
+		const t = (i + 1) / (lineCount + 1);
+		const y = t * height;
+
+		if (r < probability) {
+			const segmentCount = 1 + Math.floor(Math.random() * 2);
+			const points = [0, 1];
+
+			const segments = new Array(segmentCount).fill()
+				.map(_ => lerp(0.1, 0.9, Math.random()));
+
+			segments.forEach((segment) => {
+				const rotation = birandom() * 45;
+				const segmentStart = segment - segmentSizeHalf;
+				const segmentEnd = segment + segmentSizeHalf;
+
+				points.push(segment - segmentSizeQuarter);
+				points.push(segment + segmentSizeQuarter);
+
+				svgContents += `<line x1="${segmentStart * width}" x2="${segmentEnd * width}" y1="${y}" y2="${y}" class="line" stroke-width="${options.lineWidth}" transform="rotate(${rotation}, ${segment * width}, ${y})"></line>`;
+			});
+
+			points.sort();
+
+			for (let j = 0; j < points.length; j += 2) {
+				const pointStart = points[j] * width;
+				const pointEnd = points[j + 1] * width;
+
+				svgContents += `<line x1="${pointStart}" x2="${pointEnd}" y1="${y}" y2="${y}" class="line" stroke-width="${options.lineWidth}"></line>`;
+			}
+		} else {
+			svgContents += `<line x1="0" x2="${width}" y1="${y}" y2="${y}" class="line" stroke-width="${options.lineWidth}"></line>`;
+		}
+	}
+
+	return svgContents;
+};
+
+const inputLineWidth = document.getElementById('input-line-width');
+const inputSegmentSize = document.getElementById('input-segment-size');
+
+const svg = document.getElementById('svg');
+const height = svg.height.baseVal.value;
+const width = svg.width.baseVal.value;
+
+svg.innerHTML = createLines({
+	lineWidth: inputLineWidth.value,
+	segmentSize: inputSegmentSize.value,
+});
+
+window.addEventListener('input', () => {
+	svg.innerHTML = createLines({
+		lineWidth: inputLineWidth.value,
+		segmentSize: inputSegmentSize.value,
+	});
+});
\ No newline at end of file
diff --git a/interruptions/dist/style.css b/interruptions/dist/style.css
new file mode 100644
index 0000000..d6ecd0e
--- /dev/null
+++ b/interruptions/dist/style.css
@@ -0,0 +1,48 @@
+body {
+	background-color: #fafafa;
+	color: #333;
+	line-height: 1.6;
+}
+
+svg {
+	display: block;
+	height: auto;
+	width: 100%;
+}
+
+dt {
+	display: inline-block;
+	font-weight: bold;
+}
+dt:after {
+	display: inline;
+	content: ':';
+}
+dd {
+	display: inline-block;
+	margin: 0;
+}
+
+label {
+	display: block;
+	font-weight: bold;
+	font-size: smaller;
+	text-transform: uppercase;
+}
+input {
+	display: block;
+	margin-bottom: 1em;
+}
+
+.container {
+	max-width: 64em;
+	padding-left: 1em;
+	padding-right: 1em;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.line {
+	stroke-linecap: round;
+	stroke: black;
+}
\ No newline at end of file
diff --git a/interruptions/license.txt b/interruptions/license.txt
new file mode 100644
index 0000000..9fb2c36
--- /dev/null
+++ b/interruptions/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Tim Severien (https://codepen.io/timseverien/pen/JvJPGb)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/interruptions/src/index.html b/interruptions/src/index.html
new file mode 100644
index 0000000..78f8749
--- /dev/null
+++ b/interruptions/src/index.html
@@ -0,0 +1,33 @@
+<main class="container">
+	<h1>Interruptions</h1>
+	
+	<svg xmlns="http://www.w3.org/2000/svg" 
+			 width="512"
+			 height="512"
+			 viewBox="0 0 512 512"
+			 id="svg"></svg>
+
+	<label for="input-line-width">Line width</label>
+	<input type="range"
+				 min="1" max="16" value="2"
+				 id="input-line-width">
+
+	<label for="input-segment-size">Segment size</label>
+	<input type="range"
+				 min="0.01" max="0.25" value="0.05" step="0.01"
+				 id="input-segment-size">
+	
+	<h2>Inspiration</h2>
+	
+	<dl>
+		<div>
+			<dt>Original author</dt>
+			<dd>Vera Molnar</dd>
+		</div>
+		
+		<div>
+			<dt>Found via</dt>
+			<dd><a href="https://twitter.com/JoanieLemercier/status/987020585812316165">Joanie Lemercier on Twitter</a></dd>
+		</div>
+	</dl>
+</main>
\ No newline at end of file
diff --git a/interruptions/src/script.js b/interruptions/src/script.js
new file mode 100644
index 0000000..0512e4b
--- /dev/null
+++ b/interruptions/src/script.js
@@ -0,0 +1,69 @@
+const lerp = (a, b, t) => a + t * (b - a);
+const birandom = () => Math.random() * 2 - 1;
+
+const createLines = (options = {}) => {
+	const lineCount = 32;
+	const probability = 1/3;
+	const segmentSize = 0.05;
+	const segmentSizeHalf = options.segmentSize * 0.5;
+	const segmentSizeQuarter = options.segmentSize * 0.4;
+	
+	let svgContents = '';
+
+	for (let i = 0; i < lineCount; i++) {
+		const r = Math.random();
+		const t = (i + 1) / (lineCount + 1);
+		const y = t * height;
+
+		if (r < probability) {
+			const segmentCount = 1 + Math.floor(Math.random() * 2);
+			const points = [0, 1];
+
+			const segments = new Array(segmentCount).fill()
+				.map(_ => lerp(0.1, 0.9, Math.random()));
+
+			segments.forEach((segment) => {
+				const rotation = birandom() * 45;
+				const segmentStart = segment - segmentSizeHalf;
+				const segmentEnd = segment + segmentSizeHalf;
+
+				points.push(segment - segmentSizeQuarter);
+				points.push(segment + segmentSizeQuarter);
+
+				svgContents += `<line x1="${segmentStart * width}" x2="${segmentEnd * width}" y1="${y}" y2="${y}" class="line" stroke-width="${options.lineWidth}" transform="rotate(${rotation}, ${segment * width}, ${y})"></line>`;
+			});
+
+			points.sort();
+
+			for (let j = 0; j < points.length; j += 2) {
+				const pointStart = points[j] * width;
+				const pointEnd = points[j + 1] * width;
+
+				svgContents += `<line x1="${pointStart}" x2="${pointEnd}" y1="${y}" y2="${y}" class="line" stroke-width="${options.lineWidth}"></line>`;
+			}
+		} else {
+			svgContents += `<line x1="0" x2="${width}" y1="${y}" y2="${y}" class="line" stroke-width="${options.lineWidth}"></line>`;
+		}
+	}
+
+	return svgContents;
+};
+
+const inputLineWidth = document.getElementById('input-line-width');
+const inputSegmentSize = document.getElementById('input-segment-size');
+
+const svg = document.getElementById('svg');
+const height = svg.height.baseVal.value;
+const width = svg.width.baseVal.value;
+
+svg.innerHTML = createLines({
+	lineWidth: inputLineWidth.value,
+	segmentSize: inputSegmentSize.value,
+});
+
+window.addEventListener('input', () => {
+	svg.innerHTML = createLines({
+		lineWidth: inputLineWidth.value,
+		segmentSize: inputSegmentSize.value,
+	});
+});
\ No newline at end of file
diff --git a/interruptions/src/style.css b/interruptions/src/style.css
new file mode 100644
index 0000000..d6ecd0e
--- /dev/null
+++ b/interruptions/src/style.css
@@ -0,0 +1,48 @@
+body {
+	background-color: #fafafa;
+	color: #333;
+	line-height: 1.6;
+}
+
+svg {
+	display: block;
+	height: auto;
+	width: 100%;
+}
+
+dt {
+	display: inline-block;
+	font-weight: bold;
+}
+dt:after {
+	display: inline;
+	content: ':';
+}
+dd {
+	display: inline-block;
+	margin: 0;
+}
+
+label {
+	display: block;
+	font-weight: bold;
+	font-size: smaller;
+	text-transform: uppercase;
+}
+input {
+	display: block;
+	margin-bottom: 1em;
+}
+
+.container {
+	max-width: 64em;
+	padding-left: 1em;
+	padding-right: 1em;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.line {
+	stroke-linecap: round;
+	stroke: black;
+}
\ No newline at end of file
diff --git a/island-group-541-bytes-petitepatterns/README.markdown b/island-group-541-bytes-petitepatterns/README.markdown
new file mode 100644
index 0000000..ba8bf89
--- /dev/null
+++ b/island-group-541-bytes-petitepatterns/README.markdown
@@ -0,0 +1,5 @@
+# Island Group 🏝 (541 bytes) #PetitePatterns
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/finnhvman/pen/zYoGmmp](https://codepen.io/finnhvman/pen/zYoGmmp).
+
+See other [#petitepatterns](https://codepen.io/tag/petitepatterns)
diff --git a/island-group-541-bytes-petitepatterns/dist/index.html b/island-group-541-bytes-petitepatterns/dist/index.html
new file mode 100644
index 0000000..ec7d391
--- /dev/null
+++ b/island-group-541-bytes-petitepatterns/dist/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Island Group 🏝 (541 bytes) #PetitePatterns</title>
+  <style>
+body {
+  margin: 0;
+}
+
+body > svg {
+  display: block;
+  width: 100vw;
+  height: 100vh;
+}
+
+.bmc {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+}
+</style><link rel='stylesheet' href='https://codepen.io/finnhvman/pen/ExgLjmg.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg xmlns="http://www.w3.org/2000/svg">
+    <filter id="filter">
+        <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="5"/>
+        <feColorMatrix values="1 0 0 0 0
+                               1 0 0 0 0
+                               1 0 0 0 0
+                               0 0 0 0 1"/>
+        <feComponentTransfer>
+            <feFuncR type="table" tableValues="0 .02 .03 .03 .09 .12 .27 .91 .3 .03 0 0"/>
+            <feFuncG type="table" tableValues=".01 .09 .16 .18 .38 .48 .54 .73 .33 .09 .01 .01"/>
+            <feFuncB type="table" tableValues=".03 .17 .3 .25 .37 .42 .42 .6 .17 .01 0 0"/>
+        </feComponentTransfer>
+    </filter>
+    <rect width="100%" height="100%" filter="url(#filter)"/>
+</svg>
+<!-- partial -->
+  <script src='https://codepen.io/finnhvman/pen/ExgLjmg.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/island-group-541-bytes-petitepatterns/dist/script.js b/island-group-541-bytes-petitepatterns/dist/script.js
new file mode 100644
index 0000000..e59387a
--- /dev/null
+++ b/island-group-541-bytes-petitepatterns/dist/script.js
@@ -0,0 +1,3 @@
+/* Minified (541 bytes):
+<svg xmlns="http://www.w3.org/2000/svg"><filter id="a"><feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="5"/><feColorMatrix values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1"/><feComponentTransfer><feFuncR type="table" tableValues="0 .02 .03 .03 .09 .12 .27 .91 .3 .03 0 0"/><feFuncG type="table" tableValues=".01 .09 .16 .18 .38 .48 .54 .73 .33 .09 .01 .01"/><feFuncB type="table" tableValues=".03 .17 .3 .25 .37 .42 .42 .6 .17 .01 0 0"/></feComponentTransfer></filter><rect width="100%" height="100%" filter="url(#a)"/></svg>
+*/
\ No newline at end of file
diff --git a/island-group-541-bytes-petitepatterns/dist/style.css b/island-group-541-bytes-petitepatterns/dist/style.css
new file mode 100644
index 0000000..0cd74a3
--- /dev/null
+++ b/island-group-541-bytes-petitepatterns/dist/style.css
@@ -0,0 +1 @@
+/* Add the seed attribute and set it to a random integer in <feTurbulence> to create your own variant! */
\ No newline at end of file
diff --git a/island-group-541-bytes-petitepatterns/license.txt b/island-group-541-bytes-petitepatterns/license.txt
new file mode 100644
index 0000000..3ab8333
--- /dev/null
+++ b/island-group-541-bytes-petitepatterns/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Ben Szabo (https://codepen.io/finnhvman/pen/zYoGmmp)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/island-group-541-bytes-petitepatterns/src/index.html b/island-group-541-bytes-petitepatterns/src/index.html
new file mode 100644
index 0000000..75b3f3a
--- /dev/null
+++ b/island-group-541-bytes-petitepatterns/src/index.html
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <filter id="filter">
+        <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="5"/>
+        <feColorMatrix values="1 0 0 0 0
+                               1 0 0 0 0
+                               1 0 0 0 0
+                               0 0 0 0 1"/>
+        <feComponentTransfer>
+            <feFuncR type="table" tableValues="0 .02 .03 .03 .09 .12 .27 .91 .3 .03 0 0"/>
+            <feFuncG type="table" tableValues=".01 .09 .16 .18 .38 .48 .54 .73 .33 .09 .01 .01"/>
+            <feFuncB type="table" tableValues=".03 .17 .3 .25 .37 .42 .42 .6 .17 .01 0 0"/>
+        </feComponentTransfer>
+    </filter>
+    <rect width="100%" height="100%" filter="url(#filter)"/>
+</svg>
diff --git a/island-group-541-bytes-petitepatterns/src/script.js b/island-group-541-bytes-petitepatterns/src/script.js
new file mode 100644
index 0000000..e59387a
--- /dev/null
+++ b/island-group-541-bytes-petitepatterns/src/script.js
@@ -0,0 +1,3 @@
+/* Minified (541 bytes):
+<svg xmlns="http://www.w3.org/2000/svg"><filter id="a"><feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="5"/><feColorMatrix values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1"/><feComponentTransfer><feFuncR type="table" tableValues="0 .02 .03 .03 .09 .12 .27 .91 .3 .03 0 0"/><feFuncG type="table" tableValues=".01 .09 .16 .18 .38 .48 .54 .73 .33 .09 .01 .01"/><feFuncB type="table" tableValues=".03 .17 .3 .25 .37 .42 .42 .6 .17 .01 0 0"/></feComponentTransfer></filter><rect width="100%" height="100%" filter="url(#a)"/></svg>
+*/
\ No newline at end of file
diff --git a/island-group-541-bytes-petitepatterns/src/style.css b/island-group-541-bytes-petitepatterns/src/style.css
new file mode 100644
index 0000000..0cd74a3
--- /dev/null
+++ b/island-group-541-bytes-petitepatterns/src/style.css
@@ -0,0 +1 @@
+/* Add the seed attribute and set it to a random integer in <feTurbulence> to create your own variant! */
\ No newline at end of file
diff --git a/isometric-color-picker/README.markdown b/isometric-color-picker/README.markdown
new file mode 100644
index 0000000..e37a63c
--- /dev/null
+++ b/isometric-color-picker/README.markdown
@@ -0,0 +1,5 @@
+# Isometric Color Picker
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jkantner/pen/xxXmVKw](https://codepen.io/jkantner/pen/xxXmVKw).
+
+A 3D-ish plate of colors based on [VR Color Picker](https://dribbble.com/shots/16133260-VR-Color-Picker) by Oleg Frolov on Dribbble.
diff --git a/isometric-color-picker/dist/index.html b/isometric-color-picker/dist/index.html
new file mode 100644
index 0000000..ab2c752
--- /dev/null
+++ b/isometric-color-picker/dist/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Isometric Color Picker</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="cp">
+  <label class="cp__color cp__color--brown">
+    <input class="cp__color-input" type="radio" name="color" value="brown" title="Brown" checked="checked"/><span class="cp__sr-only">Brown</span>
+  </label>
+  <label class="cp__color cp__color--red">
+    <input class="cp__color-input" type="radio" name="color" value="red" title="Red"/><span class="cp__sr-only">Red</span>
+  </label>
+  <label class="cp__color cp__color--orange">
+    <input class="cp__color-input" type="radio" name="color" value="orange" title="Orange"/><span class="cp__sr-only">Orange</span>
+  </label>
+  <label class="cp__color cp__color--yellow">
+    <input class="cp__color-input" type="radio" name="color" value="yellow" title="Yellow"/><span class="cp__sr-only">Yellow</span>
+  </label>
+  <label class="cp__color cp__color--green">
+    <input class="cp__color-input" type="radio" name="color" value="green" title="Green"/><span class="cp__sr-only">Green</span>
+  </label>
+  <label class="cp__color cp__color--lime">
+    <input class="cp__color-input" type="radio" name="color" value="lime" title="Lime"/><span class="cp__sr-only">Lime</span>
+  </label>
+  <label class="cp__color cp__color--cyan">
+    <input class="cp__color-input" type="radio" name="color" value="cyan" title="Cyan"/><span class="cp__sr-only">Cyan</span>
+  </label>
+  <label class="cp__color cp__color--lightblue">
+    <input class="cp__color-input" type="radio" name="color" value="lightblue" title="Light Blue"/><span class="cp__sr-only">Light Blue</span>
+  </label>
+  <label class="cp__color cp__color--blue">
+    <input class="cp__color-input" type="radio" name="color" value="blue" title="Blue"/><span class="cp__sr-only">Blue</span>
+  </label>
+  <label class="cp__color cp__color--purple">
+    <input class="cp__color-input" type="radio" name="color" value="purple" title="Purple"/><span class="cp__sr-only">Purple</span>
+  </label>
+  <label class="cp__color cp__color--magenta">
+    <input class="cp__color-input" type="radio" name="color" value="magenta" title="Magenta"/><span class="cp__sr-only">Magenta</span>
+  </label>
+  <label class="cp__color cp__color--pink">
+    <input class="cp__color-input" type="radio" name="color" value="pink" title="Pink"/><span class="cp__sr-only">Pink</span>
+  </label>
+  <label class="cp__color cp__color--black">
+    <input class="cp__color-input" type="radio" name="color" value="black" title="Black"/><span class="cp__sr-only">Black</span>
+  </label>
+  <label class="cp__color cp__color--gray">
+    <input class="cp__color-input" type="radio" name="color" value="gray" title="Gray"/><span class="cp__sr-only">Gray</span>
+  </label>
+  <label class="cp__color cp__color--lightgray">
+    <input class="cp__color-input" type="radio" name="color" value="lightgray" title="Light Gray"/><span class="cp__sr-only">Light Gray</span>
+  </label>
+  <label class="cp__color cp__color--white">
+    <input class="cp__color-input" type="radio" name="color" value="white" title="White"/><span class="cp__sr-only">White</span>
+  </label>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/isometric-color-picker/dist/style.css b/isometric-color-picker/dist/style.css
new file mode 100644
index 0000000..a35ff90
--- /dev/null
+++ b/isometric-color-picker/dist/style.css
@@ -0,0 +1,248 @@
+* {
+  border: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  font-size: calc(12px + (32 - 12) * (100vw - 320px) / (1280 - 320));
+}
+
+body,
+input {
+  font: 1em/1.5 sans-serif;
+}
+
+body {
+  background: linear-gradient(-45deg, #e3e4e8, #c7cad1);
+  height: 100vh;
+  min-height: 600px;
+  display: grid;
+  overflow-x: hidden;
+  place-items: center;
+}
+
+.cp {
+  background: linear-gradient(90deg, #676e7e, #9da2af);
+  border-radius: 2em;
+  box-shadow: 0.1em 0.1em 0 #b9bcc6, 0.25em 0.25em 0 #676e7e, 0.375em 0.375em 0.375em rgba(0, 0, 0, 0.6);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  width: 16em;
+  height: 16em;
+  transform: rotateX(45deg) rotateZ(45deg);
+}
+.cp__color {
+  padding: 0.5em;
+  -webkit-tap-highlight-color: transparent;
+}
+.cp__color, .cp__color-input {
+  display: block;
+}
+.cp__color-input {
+  border-radius: 50%;
+  position: relative;
+  width: 3em;
+  height: 3em;
+  transform: translate3d(-0.5em, -0.5em, 0);
+  transform-style: preserve-3d;
+  transition: transform 0.15s linear;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.cp__color-input:after {
+  border-radius: inherit;
+  content: "";
+  display: block;
+  position: absolute;
+  inset: 0;
+  transform: translate3d(0.25em, 0.25em, -1px);
+  transition: box-shadow 0.15s linear;
+}
+.cp__color-input:checked {
+  transform: translate3d(-0.25em, -0.25em, 0);
+}
+.cp__color-input:focus {
+  outline: transparent;
+}
+.cp__color--brown .cp__color-input {
+  background-image: linear-gradient(90deg, #793206, #c2510a);
+}
+.cp__color--brown .cp__color-input:after {
+  background: linear-gradient(0deg, #491e04, black, #180a01);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(121, 50, 6, 0.6);
+}
+.cp__color--brown .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(121, 50, 6, 0.6);
+}
+.cp__color--red .cp__color-input {
+  background-image: linear-gradient(90deg, #f42f25, #f7756e);
+}
+.cp__color--red .cp__color-input:after {
+  background: linear-gradient(0deg, #da160b, #790c06, #aa1109);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(244, 47, 37, 0.6);
+}
+.cp__color--red .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(244, 47, 37, 0.6);
+}
+.cp__color--orange .cp__color-input {
+  background-image: linear-gradient(90deg, #f49725, #f7b96e);
+}
+.cp__color--orange .cp__color-input:after {
+  background: linear-gradient(0deg, #da7d0b, #794506, #aa6109);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(244, 151, 37, 0.6);
+}
+.cp__color--orange .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(244, 151, 37, 0.6);
+}
+.cp__color--yellow .cp__color-input {
+  background-image: linear-gradient(90deg, #f4db25, #f7e76e);
+}
+.cp__color--yellow .cp__color-input:after {
+  background: linear-gradient(0deg, #dac20b, #796c06, #aa9709);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(244, 219, 37, 0.6);
+}
+.cp__color--yellow .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(244, 219, 37, 0.6);
+}
+.cp__color--green .cp__color-input {
+  background-image: linear-gradient(90deg, #689108, #9cda0b);
+}
+.cp__color--green .cp__color-input:after {
+  background: linear-gradient(0deg, #456105, black, #233003);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(104, 145, 8, 0.6);
+}
+.cp__color--green .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(104, 145, 8, 0.6);
+}
+.cp__color--lime .cp__color-input {
+  background-image: linear-gradient(90deg, #93f425, #b7f76e);
+}
+.cp__color--lime .cp__color-input:after {
+  background: linear-gradient(0deg, #7ada0b, #447906, #5faa09);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(147, 244, 37, 0.6);
+}
+.cp__color--lime .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(147, 244, 37, 0.6);
+}
+.cp__color--cyan .cp__color-input {
+  background-image: linear-gradient(90deg, #25e9f4, #6ef0f7);
+}
+.cp__color--cyan .cp__color-input:after {
+  background: linear-gradient(0deg, #0bd0da, #067379, #09a2aa);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(37, 233, 244, 0.6);
+}
+.cp__color--cyan .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(37, 233, 244, 0.6);
+}
+.cp__color--lightblue .cp__color-input {
+  background-image: linear-gradient(90deg, #25b6f4, #6ecef7);
+}
+.cp__color--lightblue .cp__color-input:after {
+  background: linear-gradient(0deg, #0b9cda, #065779, #0979aa);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(37, 182, 244, 0.6);
+}
+.cp__color--lightblue .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(37, 182, 244, 0.6);
+}
+.cp__color--blue .cp__color-input {
+  background-image: linear-gradient(90deg, #255ff4, #6e95f7);
+}
+.cp__color--blue .cp__color-input:after {
+  background: linear-gradient(0deg, #0b46da, #062779, #0936aa);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(37, 95, 244, 0.6);
+}
+.cp__color--blue .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(37, 95, 244, 0.6);
+}
+.cp__color--purple .cp__color-input {
+  background-image: linear-gradient(90deg, #7d0bda, #a23df5);
+}
+.cp__color--purple .cp__color-input:after {
+  background: linear-gradient(0deg, #6109aa, #2a0449, #450679);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(125, 11, 218, 0.6);
+}
+.cp__color--purple .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(125, 11, 218, 0.6);
+}
+.cp__color--magenta .cp__color-input {
+  background-image: linear-gradient(90deg, #f425e9, #f76ef0);
+}
+.cp__color--magenta .cp__color-input:after {
+  background: linear-gradient(0deg, #da0bd0, #790673, #aa09a2);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(244, 37, 233, 0.6);
+}
+.cp__color--magenta .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(244, 37, 233, 0.6);
+}
+.cp__color--pink .cp__color-input {
+  background-image: linear-gradient(90deg, #f986a6, #fccfdc);
+}
+.cp__color--pink .cp__color-input:after {
+  background: linear-gradient(0deg, #f65583, #da0b46, #f4255f);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(249, 134, 166, 0.6);
+}
+.cp__color--pink .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(249, 134, 166, 0.6);
+}
+.cp__color--black .cp__color-input {
+  background-image: linear-gradient(90deg, #1a1a1a, #404040);
+}
+.cp__color--black .cp__color-input:after {
+  background: linear-gradient(0deg, black, black, black);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(26, 26, 26, 0.6);
+}
+.cp__color--black .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(26, 26, 26, 0.6);
+}
+.cp__color--gray .cp__color-input {
+  background-image: linear-gradient(90deg, #4d4d4d, #737373);
+}
+.cp__color--gray .cp__color-input:after {
+  background: linear-gradient(0deg, #333333, black, #1a1a1a);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(77, 77, 77, 0.6);
+}
+.cp__color--gray .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(77, 77, 77, 0.6);
+}
+.cp__color--lightgray .cp__color-input {
+  background-image: linear-gradient(90deg, #999999, #bfbfbf);
+}
+.cp__color--lightgray .cp__color-input:after {
+  background: linear-gradient(0deg, gray, #4d4d4d, #666666);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(153, 153, 153, 0.6);
+}
+.cp__color--lightgray .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(153, 153, 153, 0.6);
+}
+.cp__color--white .cp__color-input {
+  background-image: linear-gradient(90deg, #e6e6e6, white);
+}
+.cp__color--white .cp__color-input:after {
+  background: linear-gradient(0deg, #cccccc, #999999, #b3b3b3);
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.9), 0.5em 0.5em 0.5em rgba(230, 230, 230, 0.6);
+}
+.cp__color--white .cp__color-input:checked:after {
+  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.9), 0.25em 0.25em 0.25em rgba(230, 230, 230, 0.6);
+}
+.cp__sr-only {
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+  body {
+    background: linear-gradient(-45deg, #2e3138, #17181c);
+  }
+
+  .cp {
+    background: linear-gradient(90deg, #2e3138, #5c6270);
+    box-shadow: 0.1em 0.1em 0 #737a8c, 0.25em 0.25em 0 #2e3138, 0.375em 0.375em 0.375em rgba(0, 0, 0, 0.6);
+  }
+}
\ No newline at end of file
diff --git a/isometric-color-picker/license.txt b/isometric-color-picker/license.txt
new file mode 100644
index 0000000..2b10b01
--- /dev/null
+++ b/isometric-color-picker/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Jon Kantner (https://codepen.io/jkantner/pen/xxXmVKw)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/isometric-color-picker/src/index.pug b/isometric-color-picker/src/index.pug
new file mode 100644
index 0000000..dd47355
--- /dev/null
+++ b/isometric-color-picker/src/index.pug
@@ -0,0 +1,7 @@
+- var colors = [{value:"brown",name:"Brown"},{value:"red",name:"Red"},{value:"orange",name:"Orange"},{value:"yellow",name:"Yellow"},{value:"green",name:"Green"},{value:"lime",name:"Lime"},{value:"cyan",name:"Cyan"},{value:"lightblue",name:"Light Blue"},{value:"blue",name:"Blue"},{value:"purple",name:"Purple"},{value:"magenta",name:"Magenta"},{value:"pink",name:"Pink"},{value:"black",name:"Black"},{value:"gray",name:"Gray"},{value:"lightgray",name:"Light Gray"},{value:"white",name:"White"}];
+
+.cp
+	each color, index in colors
+		label(class="cp__color cp__color--" + color.value)
+			input.cp__color-input(type="radio",name="color",value=color.value,title=color.name,checked=index===0)
+			span.cp__sr-only=color.name
\ No newline at end of file
diff --git a/isometric-color-picker/src/style.sass b/isometric-color-picker/src/style.sass
new file mode 100644
index 0000000..b5515ce
--- /dev/null
+++ b/isometric-color-picker/src/style.sass
@@ -0,0 +1,87 @@
+$hue: 223
+$colors: ("brown": hsl(23,90%,25%),"red": hsl(3,90%,55%),"orange": hsl(33,90%,55%),"yellow": hsl(53,90%,55%),"green": hsl(78,90%,30%),"lime": hsl(88,90%,55%),"cyan": hsl(183,90%,55%),"lightblue": hsl(198,90%,55%),"blue": hsl(223,90%,55%),"purple": hsl(273,90%,45%),"magenta": hsl(303,90%,55%),"pink": hsl(343,90%,75%),"black": hsl(0,0%,10%),"gray": hsl(0,0%,30%),"lightgray": hsl(0,0%,60%),"white": hsl(0,0%,90%))
+
+*
+	border: 0
+	box-sizing: border-box
+	margin: 0
+	padding: 0
+
+\:root
+	font-size: calc(12px + (32 - 12) * (100vw - 320px) / (1280 - 320))
+
+body,
+input
+	font: 1em/1.5 sans-serif
+
+body
+	background: linear-gradient(-45deg,#{hsl($hue,10%,90%)},#{hsl($hue,10%,80%)})
+	height: 100vh
+	min-height: 600px
+	display: grid
+	overflow-x: hidden
+	place-items: center
+
+.cp
+	background: linear-gradient(90deg,#{hsl($hue,10%,45%)},#{hsl($hue,10%,65%)})
+	border-radius: 2em
+	box-shadow: 0.1em 0.1em 0 #{hsl($hue,10%,75%)}, 0.25em 0.25em 0 #{hsl($hue,10%,45%)}, 0.375em 0.375em 0.375em #{hsla($hue,0%,0%,0.6)}
+	display: grid
+	grid-template-columns: repeat(4,1fr)
+	grid-template-rows: repeat(4,1fr)
+	width: 16em
+	height: 16em
+	transform: rotateX(45deg) rotateZ(45deg)
+
+	&__color
+		padding: 0.5em
+		-webkit-tap-highlight-color: transparent
+		&,
+		&-input
+			display: block
+		&-input
+			border-radius: 50%
+			position: relative
+			width: 3em
+			height: 3em
+			transform: translate3d(-0.5em,-0.5em,0)
+				style: preserve-3d
+			transition: transform 0.15s linear
+			-webkit-appearance: none
+			appearance: none
+			&:after
+				border-radius: inherit
+				content: ""
+				display: block
+				position: absolute
+				inset: 0
+				transform: translate3d(0.25em,0.25em,-1px)
+				transition: box-shadow 0.15s linear
+			&:checked
+				transform: translate3d(-0.25em,-0.25em,0)
+			&:focus
+				outline: transparent
+
+		@each $name, $value in $colors
+			&--#{$name} &-input
+				background-image: linear-gradient(90deg,$value,lighten($value,15%))
+				&:after
+					background: linear-gradient(0deg,darken($value,10%),darken($value,30%),darken($value,20%))
+					box-shadow: 0.25em 0.25em 0.25em hsla(0,0%,0%,0.9), 0.5em 0.5em 0.5em fade-out($value,0.4)
+				&:checked
+					&:after
+						box-shadow: 0 0 0.125em hsla(0,0%,0%,0.9), 0.25em 0.25em 0.25em fade-out($value,0.4)
+	&__sr-only
+		clip: rect(1px,1px,1px,1px)
+		overflow: hidden
+		position: absolute
+		width: 1px
+		height: 1px
+
+/* Dark theme */
+@media (prefers-color-scheme: dark)
+	body
+		background: linear-gradient(-45deg,#{hsl($hue,10%,20%)},#{hsl($hue,10%,10%)})
+	.cp
+		background: linear-gradient(90deg,#{hsl($hue,10%,20%)},#{hsl($hue,10%,40%)})
+		box-shadow: 0.1em 0.1em 0 #{hsl($hue,10%,50%)}, 0.25em 0.25em 0 #{hsl($hue,10%,20%)}, 0.375em 0.375em 0.375em #{hsla($hue,0%,0%,0.6)}
\ No newline at end of file
diff --git a/joker-leaderboard/README.markdown b/joker-leaderboard/README.markdown
new file mode 100644
index 0000000..7bcea9f
--- /dev/null
+++ b/joker-leaderboard/README.markdown
@@ -0,0 +1,5 @@
+# Joker Leaderboard
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/josetxu/pen/yLVeWJW](https://codepen.io/josetxu/pen/yLVeWJW).
+
+_Created for the [February 2021 CodePen Challenge](https://codepen.io/challenges/2021/February)_
diff --git a/joker-leaderboard/dist/index.html b/joker-leaderboard/dist/index.html
new file mode 100644
index 0000000..6ff1086
--- /dev/null
+++ b/joker-leaderboard/dist/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Joker Leaderboard</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@300;400&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="content">
+	<h1>Joker Leaderboard</h3>
+	<div class="selector">
+		<span id="byPremiere" class="active">Premiere</span> 
+		<span id="byPerformance">Performance</span> 
+		<span id="byBudget">Budget</span> 
+		<span id="byBoxOffice">Box-Office</span> 
+	</div>
+	<div class="ranking">
+		<ul>
+			<li class="one" id="jack">
+				<img src="https://josetxu.com/demos/img/joker-jack.jpg">
+				<span class="starring">Jack Nicholson</span>
+				<span class="film">Batman</span>
+				<span class="premiere">1989</span>
+				<span class="performance">9.5</span>
+				<span class="budget">$35 M</span>
+				<span class="box-office">$411 M</span>
+			</li>
+			<li class="two" id="heath">
+				<img src="https://josetxu.com/demos/img/joker-heath.jpg">
+				<span class="starring">Heath Ledger</span>
+				<span class="film">The Dark Knight</span>
+				<span class="premiere">2008</span>
+				<span class="performance">9.8</span>
+				<span class="budget">$185 M</span>
+				<span class="box-office">$1004 M</span>
+			</li>
+			<li class="three" id="jared">
+				<img src="https://josetxu.com/demos/img/joker-jared.jpg">
+				<span class="starring">Jared Leto</span>
+				<span class="film">Suicide Squad</span>
+				<span class="premiere">2016</span>
+				<span class="performance">4.7</span>
+				<span class="budget">$175 M</span>
+				<span class="box-office">$747 M</span>
+			</li>
+			<li class="four" id="joaquin">
+				<img src="https://josetxu.com/demos/img/joker-joaquin.jpg">
+				<span class="starring">Joaquin Phoenix</span>
+				<span class="film">Joker</span>
+				<span class="premiere">2019</span>
+				<span class="performance">9.2</span>
+				<span class="budget">$55 M</span>
+				<span class="box-office">$1074 M</span>
+			</li>
+		</ul>
+	</div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/joker-leaderboard/dist/script.js b/joker-leaderboard/dist/script.js
new file mode 100644
index 0000000..f021235
--- /dev/null
+++ b/joker-leaderboard/dist/script.js
@@ -0,0 +1,53 @@
+var elem = function (id){ return document.getElementById(id); }
+var qSel = function (el){ return document.querySelectorAll(el); }
+var li  = qSel('li');
+var pre = qSel('.premiere');
+var per = qSel('.performance');
+var box = qSel('.box-office');
+var bud = qSel('.budget');
+
+elem('byPremiere').addEventListener('click', function() {
+	clean();
+	for(var i=0; i<pre.length; i++){pre[i].classList.add('active');}
+	elem('jack').classList.add('one');
+	elem('heath').classList.add('two');
+	elem('jared').classList.add('three');
+	elem('joaquin').classList.add('four');
+	this.classList.add('active');
+});
+elem('byBoxOffice').addEventListener('click', function() {
+	clean();
+	for(var i=0; i<box.length; i++){box[i].classList.add('active');}
+	elem('joaquin').classList.add('one');
+	elem('heath').classList.add('two');
+	elem('jared').classList.add('three');
+	elem('jack').classList.add('four');
+	this.classList.add('active');
+});
+elem('byBudget').addEventListener('click', function() {
+	clean();
+	for(var i=0; i<bud.length; i++){bud[i].classList.add('active');}
+	elem('jack').classList.add('one');
+	elem('joaquin').classList.add('two');
+	elem('jared').classList.add('three');
+	elem('heath').classList.add('four');
+	this.classList.add('active');
+});
+elem('byPerformance').addEventListener('click', function() {
+	clean();
+	for(var i=0; i<per.length; i++){per[i].classList.add('active');}
+	elem('heath').classList.add('one');
+	elem('jack').classList.add('two');
+	elem('joaquin').classList.add('three');
+	elem('jared').classList.add('four');
+	this.classList.add('active');
+});
+
+function clean(){
+	for(var i=0; i<li.length; i++){li[i].className='';}
+	var actives = qSel('.active');
+	for(var i=0; i<actives.length; i++){actives[i].classList.remove('active');}
+}
+
+//initial rise
+setTimeout(function(){ elem('byPerformance').click(); }, 1000);
\ No newline at end of file
diff --git a/joker-leaderboard/dist/style.css b/joker-leaderboard/dist/style.css
new file mode 100644
index 0000000..ff7d548
--- /dev/null
+++ b/joker-leaderboard/dist/style.css
@@ -0,0 +1,180 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+	margin: 0;
+    padding: 0;
+	background: #1f253d;
+}
+.content {
+	font-family: 'Londrina Solid', Arial, Helvetica, sans-serif;
+    font-weight: 300;
+    width: 100vw;
+    height: 100vh;
+    display: inline-block;
+}
+h1 {
+    text-align: center;
+    font-weight: normal;
+    color: #9099b7;
+    margin: 1em 0 0.5em;
+    font-size: 3.5em;
+    font-family: 'Londrina Solid', Arial, Helvetica, sans-serif;
+    font-weight: 400;
+    text-shadow: 0px -1px 1px #394264;
+}
+.selector {
+    text-align: center;
+    margin-bottom: 2em;
+}
+.selector span {
+    background: #394264;
+    padding: 0.5em 0.75em;
+    display: inline-block;
+    text-transform: uppercase;
+    border-radius: 2px;
+    color: #1f253d;
+    text-shadow: 0 0 1px #1f253d;
+    cursor: pointer;
+    font-family: 'Londrina Solid', Arial, Helvetica, sans-serif; /*'Londrina Solid', cursive*/
+	min-width: 65px;
+}
+.selector span:before {
+    display: none;
+}
+.selector span:hover {
+	background: #9099b7;
+}
+.selector span.active {
+	background: #9099b7;
+    color: #1f253d!important;
+    filter: invert(0);
+    text-shadow: 0 0 1px #9099b7;
+    font-weight: 400;
+}
+.ranking {
+    max-width: 400px;
+    margin: 0 auto;
+	position: relative;
+}
+.ranking ul {
+    margin: 0;
+    padding: 0;
+	position: relative;
+}
+.ranking ul li {
+    background: #394264;
+    margin: 1em 0 0;
+    padding: 2%;
+    list-style: none;
+    float: left;
+    width: 96%;
+    box-shadow: 0px 2px 6px -3px #030306cf;
+    border-radius: 5px;
+	position: absolute;
+	transition: top 0.5s ease 0s;
+}
+.ranking ul li.one { top: 0; }
+.ranking ul li.two { top: 7em; }
+.ranking ul li.three { top: 14em; }
+.ranking ul li.four  { top: 21em; }
+.ranking ul li img {
+    display: inline-block;
+    width: 20%;
+    margin-right: 2%;
+    float: left;
+    box-sizing: border-box;
+    border-radius: 5px;
+	transition: all 0.4s ease 0s;
+}
+.ranking ul li:hover img {
+    width: 26%;
+    transition: all 0.4s ease 0s;
+    margin-left: -6%;
+    margin-top: -3%;
+    margin-bottom: -3%;
+	box-shadow: 3px 3px 5px 0 #1f253d;
+}
+.ranking ul li:hover .starring {
+	color: #9099b7;
+	color: #bbbeca;
+}
+.ranking ul li span {
+    display: inline-block;
+    width: 78%;
+	color: #1d2234;
+	font-size: 0.9em;
+}
+.ranking ul li .starring {
+    font-size: 1.5em;
+	color: #1f253d;
+    font-family: 'Londrina Solid', Arial, Helvetica, sans-serif;
+    font-weight: 400;
+}
+.ranking ul li .film {
+    color: #1f253d;
+    margin-bottom: 6px;
+    font-size: 1em;
+    margin-top: 1px;
+    text-indent: 1px;
+}
+.starring:before, .film:before {
+    display: none;
+}
+.premiere:before {
+	background: url(https://josetxu.com/demos/img/joker-premiere.png) no-repeat;
+}
+.performance:before {
+	background: url(https://josetxu.com/demos/img/joker-performance.png) no-repeat;
+}
+.budget:before {
+	background: url(https://josetxu.com/demos/img/joker-budget.png) no-repeat;
+}
+.box-office:before {
+	background: url(https://josetxu.com/demos/img/joker-boxoffice.png) no-repeat;
+}
+span:before {
+    height: 20px;
+    float: left;
+    margin-right: 3px;
+    width: 20px;
+    content: "";
+	opacity: 0.475;
+}
+.premiere, .performance {
+    width: 17% !important;
+    line-height: 1.55em;
+}
+.budget, .box-office {
+    width: 20% !important;
+    line-height: 1.55em;
+}
+.premiere:hover, .performance:hover, .budget:hover, .box-office:hover {
+	filter: invert(1);
+	color: #000;
+}
+.premiere:hover:before, .performance:hover:before, .budget:hover:before, .box-office:hover:before {
+	opacity: 0.8;
+}
+.active {
+    filter: invert(1);
+    color: #000 !important;
+}
+.active:before {
+    opacity: 0.8;
+}
+
+
+@media (max-width:400px) {
+	h1 {
+		font-size: 3.15em;
+		margin-top: 0.15em;
+	}
+	.selector span {
+		min-width: 0;
+	}
+	.ranking {
+		max-width: 99%;
+	}
+	.ranking ul li {
+		margin-top: 2px;
+	}
+}
\ No newline at end of file
diff --git a/joker-leaderboard/license.txt b/joker-leaderboard/license.txt
new file mode 100644
index 0000000..32c4f13
--- /dev/null
+++ b/joker-leaderboard/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Josetxu  (https://codepen.io/josetxu/pen/yLVeWJW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/joker-leaderboard/src/index.html b/joker-leaderboard/src/index.html
new file mode 100644
index 0000000..3d117d6
--- /dev/null
+++ b/joker-leaderboard/src/index.html
@@ -0,0 +1,49 @@
+<div class="content">
+	<h1>Joker Leaderboard</h3>
+	<div class="selector">
+		<span id="byPremiere" class="active">Premiere</span> 
+		<span id="byPerformance">Performance</span> 
+		<span id="byBudget">Budget</span> 
+		<span id="byBoxOffice">Box-Office</span> 
+	</div>
+	<div class="ranking">
+		<ul>
+			<li class="one" id="jack">
+				<img src="https://josetxu.com/demos/img/joker-jack.jpg">
+				<span class="starring">Jack Nicholson</span>
+				<span class="film">Batman</span>
+				<span class="premiere">1989</span>
+				<span class="performance">9.5</span>
+				<span class="budget">$35 M</span>
+				<span class="box-office">$411 M</span>
+			</li>
+			<li class="two" id="heath">
+				<img src="https://josetxu.com/demos/img/joker-heath.jpg">
+				<span class="starring">Heath Ledger</span>
+				<span class="film">The Dark Knight</span>
+				<span class="premiere">2008</span>
+				<span class="performance">9.8</span>
+				<span class="budget">$185 M</span>
+				<span class="box-office">$1004 M</span>
+			</li>
+			<li class="three" id="jared">
+				<img src="https://josetxu.com/demos/img/joker-jared.jpg">
+				<span class="starring">Jared Leto</span>
+				<span class="film">Suicide Squad</span>
+				<span class="premiere">2016</span>
+				<span class="performance">4.7</span>
+				<span class="budget">$175 M</span>
+				<span class="box-office">$747 M</span>
+			</li>
+			<li class="four" id="joaquin">
+				<img src="https://josetxu.com/demos/img/joker-joaquin.jpg">
+				<span class="starring">Joaquin Phoenix</span>
+				<span class="film">Joker</span>
+				<span class="premiere">2019</span>
+				<span class="performance">9.2</span>
+				<span class="budget">$55 M</span>
+				<span class="box-office">$1074 M</span>
+			</li>
+		</ul>
+	</div>
+</div>
\ No newline at end of file
diff --git a/joker-leaderboard/src/script.js b/joker-leaderboard/src/script.js
new file mode 100644
index 0000000..3fb3822
--- /dev/null
+++ b/joker-leaderboard/src/script.js
@@ -0,0 +1,55 @@
+
+var elem = function (id){ return document.getElementById(id); }
+var qSel = function (el){ return document.querySelectorAll(el); }
+var li  = qSel('li');
+var pre = qSel('.premiere');
+var per = qSel('.performance');
+var box = qSel('.box-office');
+var bud = qSel('.budget');
+
+elem('byPremiere').addEventListener('click', function() {
+	clean();
+	for(var i=0; i<pre.length; i++){pre[i].classList.add('active');}
+	elem('jack').classList.add('one');
+	elem('heath').classList.add('two');
+	elem('jared').classList.add('three');
+	elem('joaquin').classList.add('four');
+	this.classList.add('active');
+});
+elem('byBoxOffice').addEventListener('click', function() {
+	clean();
+	for(var i=0; i<box.length; i++){box[i].classList.add('active');}
+	elem('joaquin').classList.add('one');
+	elem('heath').classList.add('two');
+	elem('jared').classList.add('three');
+	elem('jack').classList.add('four');
+	this.classList.add('active');
+});
+elem('byBudget').addEventListener('click', function() {
+	clean();
+	for(var i=0; i<bud.length; i++){bud[i].classList.add('active');}
+	elem('jack').classList.add('one');
+	elem('joaquin').classList.add('two');
+	elem('jared').classList.add('three');
+	elem('heath').classList.add('four');
+	this.classList.add('active');
+});
+elem('byPerformance').addEventListener('click', function() {
+	clean();
+	for(var i=0; i<per.length; i++){per[i].classList.add('active');}
+	elem('heath').classList.add('one');
+	elem('jack').classList.add('two');
+	elem('joaquin').classList.add('three');
+	elem('jared').classList.add('four');
+	this.classList.add('active');
+});
+
+function clean(){
+	for(var i=0; i<li.length; i++){li[i].className='';}
+	var actives = qSel('.active');
+	for(var i=0; i<actives.length; i++){actives[i].classList.remove('active');}
+}
+
+//initial rise
+setTimeout(function(){ elem('byPerformance').click(); }, 1000);
+
diff --git a/joker-leaderboard/src/style.css b/joker-leaderboard/src/style.css
new file mode 100644
index 0000000..ff7d548
--- /dev/null
+++ b/joker-leaderboard/src/style.css
@@ -0,0 +1,180 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+	margin: 0;
+    padding: 0;
+	background: #1f253d;
+}
+.content {
+	font-family: 'Londrina Solid', Arial, Helvetica, sans-serif;
+    font-weight: 300;
+    width: 100vw;
+    height: 100vh;
+    display: inline-block;
+}
+h1 {
+    text-align: center;
+    font-weight: normal;
+    color: #9099b7;
+    margin: 1em 0 0.5em;
+    font-size: 3.5em;
+    font-family: 'Londrina Solid', Arial, Helvetica, sans-serif;
+    font-weight: 400;
+    text-shadow: 0px -1px 1px #394264;
+}
+.selector {
+    text-align: center;
+    margin-bottom: 2em;
+}
+.selector span {
+    background: #394264;
+    padding: 0.5em 0.75em;
+    display: inline-block;
+    text-transform: uppercase;
+    border-radius: 2px;
+    color: #1f253d;
+    text-shadow: 0 0 1px #1f253d;
+    cursor: pointer;
+    font-family: 'Londrina Solid', Arial, Helvetica, sans-serif; /*'Londrina Solid', cursive*/
+	min-width: 65px;
+}
+.selector span:before {
+    display: none;
+}
+.selector span:hover {
+	background: #9099b7;
+}
+.selector span.active {
+	background: #9099b7;
+    color: #1f253d!important;
+    filter: invert(0);
+    text-shadow: 0 0 1px #9099b7;
+    font-weight: 400;
+}
+.ranking {
+    max-width: 400px;
+    margin: 0 auto;
+	position: relative;
+}
+.ranking ul {
+    margin: 0;
+    padding: 0;
+	position: relative;
+}
+.ranking ul li {
+    background: #394264;
+    margin: 1em 0 0;
+    padding: 2%;
+    list-style: none;
+    float: left;
+    width: 96%;
+    box-shadow: 0px 2px 6px -3px #030306cf;
+    border-radius: 5px;
+	position: absolute;
+	transition: top 0.5s ease 0s;
+}
+.ranking ul li.one { top: 0; }
+.ranking ul li.two { top: 7em; }
+.ranking ul li.three { top: 14em; }
+.ranking ul li.four  { top: 21em; }
+.ranking ul li img {
+    display: inline-block;
+    width: 20%;
+    margin-right: 2%;
+    float: left;
+    box-sizing: border-box;
+    border-radius: 5px;
+	transition: all 0.4s ease 0s;
+}
+.ranking ul li:hover img {
+    width: 26%;
+    transition: all 0.4s ease 0s;
+    margin-left: -6%;
+    margin-top: -3%;
+    margin-bottom: -3%;
+	box-shadow: 3px 3px 5px 0 #1f253d;
+}
+.ranking ul li:hover .starring {
+	color: #9099b7;
+	color: #bbbeca;
+}
+.ranking ul li span {
+    display: inline-block;
+    width: 78%;
+	color: #1d2234;
+	font-size: 0.9em;
+}
+.ranking ul li .starring {
+    font-size: 1.5em;
+	color: #1f253d;
+    font-family: 'Londrina Solid', Arial, Helvetica, sans-serif;
+    font-weight: 400;
+}
+.ranking ul li .film {
+    color: #1f253d;
+    margin-bottom: 6px;
+    font-size: 1em;
+    margin-top: 1px;
+    text-indent: 1px;
+}
+.starring:before, .film:before {
+    display: none;
+}
+.premiere:before {
+	background: url(https://josetxu.com/demos/img/joker-premiere.png) no-repeat;
+}
+.performance:before {
+	background: url(https://josetxu.com/demos/img/joker-performance.png) no-repeat;
+}
+.budget:before {
+	background: url(https://josetxu.com/demos/img/joker-budget.png) no-repeat;
+}
+.box-office:before {
+	background: url(https://josetxu.com/demos/img/joker-boxoffice.png) no-repeat;
+}
+span:before {
+    height: 20px;
+    float: left;
+    margin-right: 3px;
+    width: 20px;
+    content: "";
+	opacity: 0.475;
+}
+.premiere, .performance {
+    width: 17% !important;
+    line-height: 1.55em;
+}
+.budget, .box-office {
+    width: 20% !important;
+    line-height: 1.55em;
+}
+.premiere:hover, .performance:hover, .budget:hover, .box-office:hover {
+	filter: invert(1);
+	color: #000;
+}
+.premiere:hover:before, .performance:hover:before, .budget:hover:before, .box-office:hover:before {
+	opacity: 0.8;
+}
+.active {
+    filter: invert(1);
+    color: #000 !important;
+}
+.active:before {
+    opacity: 0.8;
+}
+
+
+@media (max-width:400px) {
+	h1 {
+		font-size: 3.15em;
+		margin-top: 0.15em;
+	}
+	.selector span {
+		min-width: 0;
+	}
+	.ranking {
+		max-width: 99%;
+	}
+	.ranking ul li {
+		margin-top: 2px;
+	}
+}
\ No newline at end of file
diff --git a/jumping-gooey-navigation/README.markdown b/jumping-gooey-navigation/README.markdown
new file mode 100644
index 0000000..f8554f5
--- /dev/null
+++ b/jumping-gooey-navigation/README.markdown
@@ -0,0 +1,5 @@
+# Jumping Gooey Navigation
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/PointC/pen/VweJeGJ](https://codepen.io/PointC/pen/VweJeGJ).
+
+
diff --git a/jumping-gooey-navigation/dist/index.html b/jumping-gooey-navigation/dist/index.html
new file mode 100644
index 0000000..5c3eb26
--- /dev/null
+++ b/jumping-gooey-navigation/dist/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Jumping Gooey Navigation</title>
+  <link rel='stylesheet' href='https://use.typekit.net/xlj8lcy.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>Jumping Gooey Nav</h1>
+<p>smooth & gooey goodness</p>
+<svg id="demo" xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200">
+  <defs>
+    <filter id="gooFilter">
+      <fegaussianblur in="SourceGraphic" stdDeviation="10" result="blur" />
+      <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8" result="goo" />
+      <feblend in="SourceGraphic" in2="goo" operator="atop"/>
+    </filter>
+  </defs>
+
+
+  <g filter="url(#gooFilter)">
+<rect class="jumper goop" x="10" y="72" width="80" height="80" rx="26" ry="26" />
+<rect class="jumper goop" x="10" y="72" width="80" height="80" rx="26" ry="26" />
+
+
+
+
+  </g>
+  <g id="icons">
+    <g>
+      <rect x="15" y="77" width="70" height="70"/>
+      <path d="M34.74,109.29V130h4.91V112.92h6.86V130H65.24V109.29L50,97.32Zm16.74,3.63H61v8.68H51.48Zm-22.54-6.34L50,90l9.09,7.14V90.78h4.54v9.92l7.44,5.85-1.77,2.79L50,94.22,30.7,109.34Z"/>
+    </g>
+    <g>
+      <rect x="115" y="77" width="70" height="70"/>
+      <path d="M161.13,117.8a8.38,8.38,0,0,0,2.11-.84c-6.74-4.92-1.11-8.9-1-16.11.06-4.43-4.53-9.86-7.39-8.32-1-5.29-19.27-2.11-18.17,7.87A11.11,11.11,0,0,1,139.3,98c-5.68,8.17,5.26,15.21-2.93,19a5.87,5.87,0,0,0,2.36.84c-3.34,1.6-6,3.72-6,5.62V130h34.48v-6.5C167.24,121.57,164.54,119.42,161.13,117.8Zm-19.39-12.87.45-.13v-.46a2.35,2.35,0,0,0-.06-.65c3-1.76,13.66-.14,14.74-4.55a1.1,1.1,0,0,1,.65.49,11.9,11.9,0,0,1,.38,4.71l-.05.46.45.13c.24.07,1,.28.84,1.65a3.53,3.53,0,0,1-1.77,2.79l-.36.07-.09.35c-.8,3.25-3.89,5.89-6.88,5.89s-6.08-2.64-6.88-5.89l-.09-.35-.36-.07a3.53,3.53,0,0,1-1.77-2.79C140.79,105.21,141.5,105,141.74,104.93Zm2.58,9.28a8.15,8.15,0,0,0,5.68,2.6,7.85,7.85,0,0,0,5-2,2,2,0,0,0,.42,2,10.24,10.24,0,0,1-5.43,1.62,10.53,10.53,0,0,1-6-2A2.76,2.76,0,0,0,144.32,114.21Zm-2.55,3.64a4.51,4.51,0,0,0,1-.39l.44-.14a11.24,11.24,0,0,0,13.27.14h.05a13.13,13.13,0,0,0,1.65.37,13.31,13.31,0,0,1-16.46,0Zm18.06,9.52h-6.55V126h6.55ZM150,112.43a4.42,4.42,0,0,1-2.47-.69l.48-.64a4.11,4.11,0,0,0,4.1,0l.44.66A4.84,4.84,0,0,1,150,112.43Z"/>
+    </g>
+    <g>
+      <rect x="215" y="77" width="70" height="70"/>
+      <path d="M263.58,103.84c-.36.81-.73,1.68-1.06,2.51l2.81,1.14v18.42l-13.91-5.62V101.87l4.63,1.87a22.48,22.48,0,0,0-1.58-3.09h0L254,100l-4-1.61-18.18,7.34V130L250,122.66,268.18,130V105.7Zm-15,16.45-13.91,5.62V107.49l13.91-5.62Zm17.11-24.72a5.86,5.86,0,0,0-11.7,0,6.71,6.71,0,0,0,1.1,3.36,91.68,91.68,0,0,1,4.75,10.38,92.42,92.42,0,0,1,4.74-10.38,6.62,6.62,0,0,0,1.11-3.36Zm-5.85,3a11.79,11.79,0,1,1,.06,0h-.06ZM237.72,113.4c.65.54.65.71,0,1.25s-.76.6-1.32,0-.63-.71,0-1.26S237.15,112.79,237.72,113.4Zm2.17-2c-.63.55-.63.72,0,1.26s.75.59,1.32,0,.64-.71,0-1.25S240.45,110.84,239.89,111.45Zm3.73,1.13c-.63.55-.63.72,0,1.26s.74.59,1.31,0,.64-.7,0-1.25S244.18,112,243.62,112.58Zm2.06,3.55c-.63.55-.63.72,0,1.26s.74.59,1.32,0,.63-.7,0-1.24S246.24,115.52,245.68,116.13Zm7.48.53c-.63.55-.63.72,0,1.26s.75.59,1.32,0,.64-.7,0-1.24-.76-.63-1.32,0Zm3.86-1.1c-.63.54-.63.72,0,1.25s.74.6,1.32,0,.64-.7,0-1.25-.76-.56-1.34,0Zm1.92-3.56c-.63.54-.63.72,0,1.25s.74.6,1.32,0,.63-.71,0-1.25-.76-.62-1.32,0Z"/>
+    </g>
+    <g>
+      <rect x="315" y="77" width="70" height="70"/>
+      <path d="M372.7,110c0-3-5.34-5-12.33-6,.34-.84.64-1.65.92-2.44a4.63,4.63,0,0,1-1.67-.47c-.3.87-.64,1.76-1,2.68-1.56-.17-3.17-.29-4.8-.37-.87-1.35-1.79-2.68-2.73-4,3.81-4.94,7.2-7.72,9-7.72a.83.83,0,0,1,.46.11,1.43,1.43,0,0,1,.55.94,4.41,4.41,0,0,1,1.77.12,3.32,3.32,0,0,0-1.45-2.56A2.61,2.61,0,0,0,360,90c-2.69,0-6.45,3.46-10,8-3.57-4.58-7.33-8-10-8a2.56,2.56,0,0,0-1.33.34c-1.74,1-2,4-.76,8.57a43.77,43.77,0,0,0,1.74,5.1c-1,.13-1.94.29-2.85.47a4.45,4.45,0,0,1,.58,1.66c.94-.18,1.93-.34,3-.48q.93,2.13,2.07,4.34c-.76,1.47-1.46,2.93-2.07,4.35-7.16-1-11.29-2.87-11.29-4.35a1.2,1.2,0,0,1,.33-.73,4.39,4.39,0,0,1-.73-1.69A3.19,3.19,0,0,0,327.3,110c0,3,5.34,5,12.33,6a43.77,43.77,0,0,0-1.74,5.1c-1.25,4.6-1,7.56.76,8.57A2.55,2.55,0,0,0,340,130c2.69,0,6.45-3.46,10-8,.41.53.83,1,1.24,1.54a4.37,4.37,0,0,1,1.19-1.27c-.45-.53-.9-1.09-1.36-1.68.94-1.28,1.86-2.61,2.73-4,1.63-.08,3.24-.2,4.8-.37a45.17,45.17,0,0,1,1.84,5.32c1.15,4.25.74,6.22,0,6.62a.83.83,0,0,1-.46.11,3,3,0,0,1-1.15-.29,4.43,4.43,0,0,1-1.17,1.34A5.08,5.08,0,0,0,360,130a2.56,2.56,0,0,0,1.33-.34c2.6-1.5,1.67-7.13-1-13.67C367.36,115,372.7,113,372.7,110Zm-14.82-4.55c-.39.88-.82,1.78-1.27,2.69-.27-.5-.55-1-.83-1.48l-.86-1.46C355.93,105.27,356.92,105.35,357.88,105.45Zm-6.19-2.11h-3.38c.56-.86,1.13-1.68,1.69-2.45.56.77,1.13,1.59,1.69,2.45Zm-12.13-4.88c-1.15-4.25-.74-6.22,0-6.62a.83.83,0,0,1,.46-.11c1.75,0,5.14,2.78,9,7.72-.94,1.28-1.86,2.61-2.73,4-1.63.08-3.25.2-4.8.37a44.82,44.82,0,0,1-1.88-5.36Zm2.56,7c1-.1,1.95-.18,3-.25l-.86,1.46-.83,1.48c-.49-.92-.92-1.82-1.31-2.7Zm1.27,6.41.83,1.48.86,1.46q-1.54-.09-3-.24c.43-.9.86-1.8,1.31-2.71ZM340,128.27a.83.83,0,0,1-.46-.11c-.7-.4-1.11-2.37,0-6.62a45.17,45.17,0,0,1,1.84-5.32c1.55.17,3.17.29,4.8.37.87,1.35,1.79,2.68,2.73,4C345.12,125.49,341.73,128.27,340,128.27Zm10-9.16c-.56-.77-1.13-1.59-1.69-2.45h3.38c-.56.86-1.13,1.68-1.69,2.45Zm2.83-4.21h-5.66c-.48-.78-1-1.59-1.45-2.43s-.93-1.65-1.37-2.47c.44-.82.89-1.65,1.37-2.47s1-1.65,1.45-2.42c.93,0,1.88,0,2.83,0s1.9,0,2.83,0c.48.77,1,1.58,1.45,2.42s.93,1.65,1.37,2.47c-.44.82-.89,1.65-1.37,2.47S353.31,114.12,352.83,114.9Zm2.09-.1.86-1.46.83-1.48c.45.91.88,1.81,1.27,2.7-.94.1-1.88.18-3,.24Zm4.76-.45c-.62-1.44-1.32-2.89-2.08-4.35q1.15-2.2,2.08-4.34a45.14,45.14,0,0,1,5.54,1.07c4.24,1.13,5.75,2.47,5.75,3.27,0,1.48-4.13,3.39-11.29,4.35ZM353.63,110a3.63,3.63,0,1,1-3.63-3.63,3.64,3.64,0,0,1,3.63,3.63Zm8-15.5a2.66,2.66,0,1,0,2.66,2.66,2.66,2.66,0,0,0-2.66-2.66Zm-4,31.33a2.66,2.66,0,1,1-2.66-2.66h0a2.66,2.66,0,0,1,2.69,2.63v0Zm-22-19.11a2.66,2.66,0,1,1-2.66-2.66,2.66,2.66,0,0,1,2.66,2.66Z"/>
+    </g>
+    <g>
+      <rect x="415" y="77" width="70" height="70"/>
+      <path d="M440.14,130a3.72,3.72,0,0,1-3.51-2.56l-5.86-17.52h38.46l-5.86,17.52a3.72,3.72,0,0,1-3.51,2.56Zm16.44-17.43a1.12,1.12,0,0,0-1.11.93l-1.93,12.61a1.07,1.07,0,0,0,.2.79,1.16,1.16,0,0,0,.76.45h.16a1.13,1.13,0,0,0,1.11-.94l1.93-12.61a1.07,1.07,0,0,0-.2-.79,1.17,1.17,0,0,0-.76-.44Zm-13.16,0h-.16a1.17,1.17,0,0,0-.76.44,1.07,1.07,0,0,0-.2.79l1.93,12.61a1.13,1.13,0,0,0,1.11.94h.16a1.16,1.16,0,0,0,.76-.45,1.07,1.07,0,0,0,.2-.79l-1.93-12.61A1.12,1.12,0,0,0,443.42,112.57Zm19.62.16a1.12,1.12,0,0,0-1.09.8l-3.59,12.29a1.07,1.07,0,0,0,.11.84,1.1,1.1,0,0,0,.69.5,1.31,1.31,0,0,0,.28,0,1.13,1.13,0,0,0,1.09-.81l3.59-12.28a1.07,1.07,0,0,0-.1-.82,1.17,1.17,0,0,0-.7-.53,1.15,1.15,0,0,0-.32,0Zm-26.08,0a1.31,1.31,0,0,0-.28,0,1.19,1.19,0,0,0-.69.51,1.05,1.05,0,0,0-.11.83l3.59,12.3a1.12,1.12,0,0,0,1.09.8,1.31,1.31,0,0,0,.28,0,1.17,1.17,0,0,0,.7-.53,1,1,0,0,0,.1-.81l-3.59-12.29a1.12,1.12,0,0,0-1.05-.81Zm13-.23a1.11,1.11,0,0,0-1.13,1.09h0v12.48a1.13,1.13,0,0,0,2.26,0h0V113.59A1.11,1.11,0,0,0,450,112.5Zm2.4-4.83a3.06,3.06,0,0,0,.37-.35l3.5-3.89h13.91a2.12,2.12,0,1,1,0,4.24Zm-22.58,0a2.12,2.12,0,1,1,0-4.24h16.83a4,4,0,0,0-.25,1.53,3.83,3.83,0,0,0,1.19,2.59l.14.12Zm20.27-.73a1.68,1.68,0,0,1-1.15-.45l-.43-.41a1.73,1.73,0,0,1-.1-2.43l10.16-11.28a1.09,1.09,0,0,1,1.57-.07l1.29,1.2a1.21,1.21,0,0,1,.36.78,1.15,1.15,0,0,1-.3.81l-10.16,11.29a1.69,1.69,0,0,1-1.24.56Z"/>
+    </g>
+    <g>
+      <rect x="515" y="77" width="70" height="70"/>
+      <path d="M558.91,128.14S559.16,130,555,130H537.29c-3.94,0-3.94-1.86-3.94-1.86a.66.66,0,0,1,.65-.66h24.26A.66.66,0,0,1,558.91,128.14Zm7.74-13.3a5.54,5.54,0,0,1-5.53,5.53h0a5.45,5.45,0,0,1-3.54-1.29c-1.92,4.55-6.29,7.25-7.08,7.25h-8.74c-1,0-8-4.5-8-11.63v-8a1.85,1.85,0,0,1,1.85-1.84h21a1.86,1.86,0,0,1,1.84,1.84V110a5.56,5.56,0,0,1,8.2,4.82v0Zm-24.54,9h1.71c-1.51-1-4.59-4-4.59-7.68v-5H556v-3.8H536.29v7.32c0,4.94,4.55,8.53,5.82,9.14Zm21.65-9a2.64,2.64,0,0,0-5.28,0h0a2.64,2.64,0,0,0,5.28,0ZM546.92,96c0,2.69-3,4.09-.62,6.78-.23-3.13,3-4,3.23-7s-4.69-3.22-5.24-6.52C542.3,92.56,546.92,93.11,546.92,96Z"/>
+    </g>
+  </g>
+  <path id="main" d="" fill="none" stroke-miterlimit="10" />
+</svg>
+
+<div class="branding">
+  <p>see the tutorial on</p>
+  <h2><span>motion</span>tricks.com</h2>
+  <a href="https://www.motiontricks.com/gooey-navigation/" target="_blank">Tutorial</a>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/MotionPathPlugin.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/jumping-gooey-navigation/dist/script.js b/jumping-gooey-navigation/dist/script.js
new file mode 100644
index 0000000..e7bd3d3
--- /dev/null
+++ b/jumping-gooey-navigation/dist/script.js
@@ -0,0 +1,63 @@
+console.clear();
+gsap.registerPlugin(MotionPathPlugin);
+
+let targets = gsap.utils.toArray("#icons g");
+let dotCenters = [50, 150, 250, 350, 450, 550];
+let yCenter = 112;
+let maxTravel = 500;
+let minTravel = 100;
+let mapper = gsap.utils.mapRange(minTravel, maxTravel, 0.5, 1);
+let anim;
+let activeDot = 0;
+let targetDot;
+let maxDur = 1;
+let maxArc = 150;
+let staggers = [0.2, 0.16, 0.135, 0.12, 0.11];
+
+targets.forEach((obj, i) => {
+  obj.index = i;
+  obj.addEventListener("click", letsGoo);
+});
+
+function letsGoo() {
+  targetDot = this.index;
+  if (targetDot != activeDot) {
+    if (anim && anim.isActive()) {
+      anim.progress(1);
+    }
+
+    let oldX = dotCenters[activeDot];
+    let newX = dotCenters[targetDot];
+    let travel = Math.abs(oldX - newX);
+    let factor = mapper(travel);
+    let newArc = yCenter - maxArc * factor;
+    let dur = maxDur * factor;
+    let newStagger = staggers[travel / 100 - 1];
+    let newPath = `M${oldX},${yCenter} Q${
+      travel / 2 + Math.min(oldX, newX)
+    },${newArc} ${newX},${yCenter}`;
+
+    gsap.set("#main", { attr: { d: newPath } });
+    anim = gsap
+      .timeline()
+      .to(".jumper", {
+        motionPath: {
+          path: "#main",
+          align: "#main",
+          alignOrigin: [0.5, 0.5]
+        },
+        stagger: newStagger,
+        duration: dur,
+        ease: "sine.inOut"
+      })
+      .to(
+        ".jumper",
+        { duration: dur / 2, attr: { rx: 40, ry: 40 }, yoyo: true, repeat: 1 },
+        0
+      );
+  } else {
+    return;
+  }
+
+  activeDot = targetDot;
+}
\ No newline at end of file
diff --git a/jumping-gooey-navigation/dist/style.css b/jumping-gooey-navigation/dist/style.css
new file mode 100644
index 0000000..d5dac1c
--- /dev/null
+++ b/jumping-gooey-navigation/dist/style.css
@@ -0,0 +1,102 @@
+body {
+  font-family: "proxima-nova", sans-serif;
+  color: white;
+  display: flex;
+  height: 100vh;
+  background: #111;
+  overflow: hidden;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  background-image: linear-gradient(
+    0deg,
+    #382B8C,
+    #746BB0
+  );  
+}
+#demo {
+  width: 90vw;
+  height: auto;
+  max-width: 720px;
+  overflow: visible;
+}
+#icons path {
+  
+  fill: white;
+}
+
+text {
+  font-weight: 700;
+  font-size: 20px;
+  text-transform: uppercase;
+  fill: rgba(0,0,0,0.5);
+}
+
+#icons g {
+ cursor: pointer;
+ 
+}
+
+#icons rect {
+  fill: transparent;
+}
+
+.goop {
+  fill: #1C4861;
+  fill: #5C51A6;
+  fill: #382B8C;
+}
+
+#main {
+  stroke: #00688e;
+  stroke: none;
+  stroke-width: 1px;
+}
+
+
+
+h1, h2,
+p {
+  margin: 0;
+
+}
+
+a {
+  background: #5cceee;
+  color: white;
+  padding: 10px;
+  text-decoration: none;
+  border-radius: 3px;
+  margin-top: 10px;
+}
+
+a:hover {
+  background: white;
+    color: #5cceee;
+}
+h1, h2,
+p {
+  margin: 0;
+}
+h2 {
+  font-weight: 400;
+}
+h2 span {
+  font-weight: 700;
+  color: #5cceee;
+}
+p span {
+  font-weight: 700;
+  color: #5cceee;
+}
+
+.branding {
+
+  display: flex;
+  flex-direction: column;
+ align-items: center;
+/*   position: absolute;
+  bottom: 1rem; */
+}
\ No newline at end of file
diff --git a/jumping-gooey-navigation/license.txt b/jumping-gooey-navigation/license.txt
new file mode 100644
index 0000000..59dfef1
--- /dev/null
+++ b/jumping-gooey-navigation/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Craig Roblewsky (https://codepen.io/PointC/pen/VweJeGJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/jumping-gooey-navigation/src/index.html b/jumping-gooey-navigation/src/index.html
new file mode 100644
index 0000000..8c3e3f2
--- /dev/null
+++ b/jumping-gooey-navigation/src/index.html
@@ -0,0 +1,54 @@
+<h1>Jumping Gooey Nav</h1>
+<p>smooth & gooey goodness</p>
+<svg id="demo" xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200">
+  <defs>
+    <filter id="gooFilter">
+      <fegaussianblur in="SourceGraphic" stdDeviation="10" result="blur" />
+      <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8" result="goo" />
+      <feblend in="SourceGraphic" in2="goo" operator="atop"/>
+    </filter>
+  </defs>
+
+
+  <g filter="url(#gooFilter)">
+<rect class="jumper goop" x="10" y="72" width="80" height="80" rx="26" ry="26" />
+<rect class="jumper goop" x="10" y="72" width="80" height="80" rx="26" ry="26" />
+
+
+
+
+  </g>
+  <g id="icons">
+    <g>
+      <rect x="15" y="77" width="70" height="70"/>
+      <path d="M34.74,109.29V130h4.91V112.92h6.86V130H65.24V109.29L50,97.32Zm16.74,3.63H61v8.68H51.48Zm-22.54-6.34L50,90l9.09,7.14V90.78h4.54v9.92l7.44,5.85-1.77,2.79L50,94.22,30.7,109.34Z"/>
+    </g>
+    <g>
+      <rect x="115" y="77" width="70" height="70"/>
+      <path d="M161.13,117.8a8.38,8.38,0,0,0,2.11-.84c-6.74-4.92-1.11-8.9-1-16.11.06-4.43-4.53-9.86-7.39-8.32-1-5.29-19.27-2.11-18.17,7.87A11.11,11.11,0,0,1,139.3,98c-5.68,8.17,5.26,15.21-2.93,19a5.87,5.87,0,0,0,2.36.84c-3.34,1.6-6,3.72-6,5.62V130h34.48v-6.5C167.24,121.57,164.54,119.42,161.13,117.8Zm-19.39-12.87.45-.13v-.46a2.35,2.35,0,0,0-.06-.65c3-1.76,13.66-.14,14.74-4.55a1.1,1.1,0,0,1,.65.49,11.9,11.9,0,0,1,.38,4.71l-.05.46.45.13c.24.07,1,.28.84,1.65a3.53,3.53,0,0,1-1.77,2.79l-.36.07-.09.35c-.8,3.25-3.89,5.89-6.88,5.89s-6.08-2.64-6.88-5.89l-.09-.35-.36-.07a3.53,3.53,0,0,1-1.77-2.79C140.79,105.21,141.5,105,141.74,104.93Zm2.58,9.28a8.15,8.15,0,0,0,5.68,2.6,7.85,7.85,0,0,0,5-2,2,2,0,0,0,.42,2,10.24,10.24,0,0,1-5.43,1.62,10.53,10.53,0,0,1-6-2A2.76,2.76,0,0,0,144.32,114.21Zm-2.55,3.64a4.51,4.51,0,0,0,1-.39l.44-.14a11.24,11.24,0,0,0,13.27.14h.05a13.13,13.13,0,0,0,1.65.37,13.31,13.31,0,0,1-16.46,0Zm18.06,9.52h-6.55V126h6.55ZM150,112.43a4.42,4.42,0,0,1-2.47-.69l.48-.64a4.11,4.11,0,0,0,4.1,0l.44.66A4.84,4.84,0,0,1,150,112.43Z"/>
+    </g>
+    <g>
+      <rect x="215" y="77" width="70" height="70"/>
+      <path d="M263.58,103.84c-.36.81-.73,1.68-1.06,2.51l2.81,1.14v18.42l-13.91-5.62V101.87l4.63,1.87a22.48,22.48,0,0,0-1.58-3.09h0L254,100l-4-1.61-18.18,7.34V130L250,122.66,268.18,130V105.7Zm-15,16.45-13.91,5.62V107.49l13.91-5.62Zm17.11-24.72a5.86,5.86,0,0,0-11.7,0,6.71,6.71,0,0,0,1.1,3.36,91.68,91.68,0,0,1,4.75,10.38,92.42,92.42,0,0,1,4.74-10.38,6.62,6.62,0,0,0,1.11-3.36Zm-5.85,3a11.79,11.79,0,1,1,.06,0h-.06ZM237.72,113.4c.65.54.65.71,0,1.25s-.76.6-1.32,0-.63-.71,0-1.26S237.15,112.79,237.72,113.4Zm2.17-2c-.63.55-.63.72,0,1.26s.75.59,1.32,0,.64-.71,0-1.25S240.45,110.84,239.89,111.45Zm3.73,1.13c-.63.55-.63.72,0,1.26s.74.59,1.31,0,.64-.7,0-1.25S244.18,112,243.62,112.58Zm2.06,3.55c-.63.55-.63.72,0,1.26s.74.59,1.32,0,.63-.7,0-1.24S246.24,115.52,245.68,116.13Zm7.48.53c-.63.55-.63.72,0,1.26s.75.59,1.32,0,.64-.7,0-1.24-.76-.63-1.32,0Zm3.86-1.1c-.63.54-.63.72,0,1.25s.74.6,1.32,0,.64-.7,0-1.25-.76-.56-1.34,0Zm1.92-3.56c-.63.54-.63.72,0,1.25s.74.6,1.32,0,.63-.71,0-1.25-.76-.62-1.32,0Z"/>
+    </g>
+    <g>
+      <rect x="315" y="77" width="70" height="70"/>
+      <path d="M372.7,110c0-3-5.34-5-12.33-6,.34-.84.64-1.65.92-2.44a4.63,4.63,0,0,1-1.67-.47c-.3.87-.64,1.76-1,2.68-1.56-.17-3.17-.29-4.8-.37-.87-1.35-1.79-2.68-2.73-4,3.81-4.94,7.2-7.72,9-7.72a.83.83,0,0,1,.46.11,1.43,1.43,0,0,1,.55.94,4.41,4.41,0,0,1,1.77.12,3.32,3.32,0,0,0-1.45-2.56A2.61,2.61,0,0,0,360,90c-2.69,0-6.45,3.46-10,8-3.57-4.58-7.33-8-10-8a2.56,2.56,0,0,0-1.33.34c-1.74,1-2,4-.76,8.57a43.77,43.77,0,0,0,1.74,5.1c-1,.13-1.94.29-2.85.47a4.45,4.45,0,0,1,.58,1.66c.94-.18,1.93-.34,3-.48q.93,2.13,2.07,4.34c-.76,1.47-1.46,2.93-2.07,4.35-7.16-1-11.29-2.87-11.29-4.35a1.2,1.2,0,0,1,.33-.73,4.39,4.39,0,0,1-.73-1.69A3.19,3.19,0,0,0,327.3,110c0,3,5.34,5,12.33,6a43.77,43.77,0,0,0-1.74,5.1c-1.25,4.6-1,7.56.76,8.57A2.55,2.55,0,0,0,340,130c2.69,0,6.45-3.46,10-8,.41.53.83,1,1.24,1.54a4.37,4.37,0,0,1,1.19-1.27c-.45-.53-.9-1.09-1.36-1.68.94-1.28,1.86-2.61,2.73-4,1.63-.08,3.24-.2,4.8-.37a45.17,45.17,0,0,1,1.84,5.32c1.15,4.25.74,6.22,0,6.62a.83.83,0,0,1-.46.11,3,3,0,0,1-1.15-.29,4.43,4.43,0,0,1-1.17,1.34A5.08,5.08,0,0,0,360,130a2.56,2.56,0,0,0,1.33-.34c2.6-1.5,1.67-7.13-1-13.67C367.36,115,372.7,113,372.7,110Zm-14.82-4.55c-.39.88-.82,1.78-1.27,2.69-.27-.5-.55-1-.83-1.48l-.86-1.46C355.93,105.27,356.92,105.35,357.88,105.45Zm-6.19-2.11h-3.38c.56-.86,1.13-1.68,1.69-2.45.56.77,1.13,1.59,1.69,2.45Zm-12.13-4.88c-1.15-4.25-.74-6.22,0-6.62a.83.83,0,0,1,.46-.11c1.75,0,5.14,2.78,9,7.72-.94,1.28-1.86,2.61-2.73,4-1.63.08-3.25.2-4.8.37a44.82,44.82,0,0,1-1.88-5.36Zm2.56,7c1-.1,1.95-.18,3-.25l-.86,1.46-.83,1.48c-.49-.92-.92-1.82-1.31-2.7Zm1.27,6.41.83,1.48.86,1.46q-1.54-.09-3-.24c.43-.9.86-1.8,1.31-2.71ZM340,128.27a.83.83,0,0,1-.46-.11c-.7-.4-1.11-2.37,0-6.62a45.17,45.17,0,0,1,1.84-5.32c1.55.17,3.17.29,4.8.37.87,1.35,1.79,2.68,2.73,4C345.12,125.49,341.73,128.27,340,128.27Zm10-9.16c-.56-.77-1.13-1.59-1.69-2.45h3.38c-.56.86-1.13,1.68-1.69,2.45Zm2.83-4.21h-5.66c-.48-.78-1-1.59-1.45-2.43s-.93-1.65-1.37-2.47c.44-.82.89-1.65,1.37-2.47s1-1.65,1.45-2.42c.93,0,1.88,0,2.83,0s1.9,0,2.83,0c.48.77,1,1.58,1.45,2.42s.93,1.65,1.37,2.47c-.44.82-.89,1.65-1.37,2.47S353.31,114.12,352.83,114.9Zm2.09-.1.86-1.46.83-1.48c.45.91.88,1.81,1.27,2.7-.94.1-1.88.18-3,.24Zm4.76-.45c-.62-1.44-1.32-2.89-2.08-4.35q1.15-2.2,2.08-4.34a45.14,45.14,0,0,1,5.54,1.07c4.24,1.13,5.75,2.47,5.75,3.27,0,1.48-4.13,3.39-11.29,4.35ZM353.63,110a3.63,3.63,0,1,1-3.63-3.63,3.64,3.64,0,0,1,3.63,3.63Zm8-15.5a2.66,2.66,0,1,0,2.66,2.66,2.66,2.66,0,0,0-2.66-2.66Zm-4,31.33a2.66,2.66,0,1,1-2.66-2.66h0a2.66,2.66,0,0,1,2.69,2.63v0Zm-22-19.11a2.66,2.66,0,1,1-2.66-2.66,2.66,2.66,0,0,1,2.66,2.66Z"/>
+    </g>
+    <g>
+      <rect x="415" y="77" width="70" height="70"/>
+      <path d="M440.14,130a3.72,3.72,0,0,1-3.51-2.56l-5.86-17.52h38.46l-5.86,17.52a3.72,3.72,0,0,1-3.51,2.56Zm16.44-17.43a1.12,1.12,0,0,0-1.11.93l-1.93,12.61a1.07,1.07,0,0,0,.2.79,1.16,1.16,0,0,0,.76.45h.16a1.13,1.13,0,0,0,1.11-.94l1.93-12.61a1.07,1.07,0,0,0-.2-.79,1.17,1.17,0,0,0-.76-.44Zm-13.16,0h-.16a1.17,1.17,0,0,0-.76.44,1.07,1.07,0,0,0-.2.79l1.93,12.61a1.13,1.13,0,0,0,1.11.94h.16a1.16,1.16,0,0,0,.76-.45,1.07,1.07,0,0,0,.2-.79l-1.93-12.61A1.12,1.12,0,0,0,443.42,112.57Zm19.62.16a1.12,1.12,0,0,0-1.09.8l-3.59,12.29a1.07,1.07,0,0,0,.11.84,1.1,1.1,0,0,0,.69.5,1.31,1.31,0,0,0,.28,0,1.13,1.13,0,0,0,1.09-.81l3.59-12.28a1.07,1.07,0,0,0-.1-.82,1.17,1.17,0,0,0-.7-.53,1.15,1.15,0,0,0-.32,0Zm-26.08,0a1.31,1.31,0,0,0-.28,0,1.19,1.19,0,0,0-.69.51,1.05,1.05,0,0,0-.11.83l3.59,12.3a1.12,1.12,0,0,0,1.09.8,1.31,1.31,0,0,0,.28,0,1.17,1.17,0,0,0,.7-.53,1,1,0,0,0,.1-.81l-3.59-12.29a1.12,1.12,0,0,0-1.05-.81Zm13-.23a1.11,1.11,0,0,0-1.13,1.09h0v12.48a1.13,1.13,0,0,0,2.26,0h0V113.59A1.11,1.11,0,0,0,450,112.5Zm2.4-4.83a3.06,3.06,0,0,0,.37-.35l3.5-3.89h13.91a2.12,2.12,0,1,1,0,4.24Zm-22.58,0a2.12,2.12,0,1,1,0-4.24h16.83a4,4,0,0,0-.25,1.53,3.83,3.83,0,0,0,1.19,2.59l.14.12Zm20.27-.73a1.68,1.68,0,0,1-1.15-.45l-.43-.41a1.73,1.73,0,0,1-.1-2.43l10.16-11.28a1.09,1.09,0,0,1,1.57-.07l1.29,1.2a1.21,1.21,0,0,1,.36.78,1.15,1.15,0,0,1-.3.81l-10.16,11.29a1.69,1.69,0,0,1-1.24.56Z"/>
+    </g>
+    <g>
+      <rect x="515" y="77" width="70" height="70"/>
+      <path d="M558.91,128.14S559.16,130,555,130H537.29c-3.94,0-3.94-1.86-3.94-1.86a.66.66,0,0,1,.65-.66h24.26A.66.66,0,0,1,558.91,128.14Zm7.74-13.3a5.54,5.54,0,0,1-5.53,5.53h0a5.45,5.45,0,0,1-3.54-1.29c-1.92,4.55-6.29,7.25-7.08,7.25h-8.74c-1,0-8-4.5-8-11.63v-8a1.85,1.85,0,0,1,1.85-1.84h21a1.86,1.86,0,0,1,1.84,1.84V110a5.56,5.56,0,0,1,8.2,4.82v0Zm-24.54,9h1.71c-1.51-1-4.59-4-4.59-7.68v-5H556v-3.8H536.29v7.32c0,4.94,4.55,8.53,5.82,9.14Zm21.65-9a2.64,2.64,0,0,0-5.28,0h0a2.64,2.64,0,0,0,5.28,0ZM546.92,96c0,2.69-3,4.09-.62,6.78-.23-3.13,3-4,3.23-7s-4.69-3.22-5.24-6.52C542.3,92.56,546.92,93.11,546.92,96Z"/>
+    </g>
+  </g>
+  <path id="main" d="" fill="none" stroke-miterlimit="10" />
+</svg>
+
+<div class="branding">
+  <p>see the tutorial on</p>
+  <h2><span>motion</span>tricks.com</h2>
+  <a href="https://www.motiontricks.com/gooey-navigation/" target="_blank">Tutorial</a>
+</div>
diff --git a/jumping-gooey-navigation/src/script.js b/jumping-gooey-navigation/src/script.js
new file mode 100644
index 0000000..4cb4a0e
--- /dev/null
+++ b/jumping-gooey-navigation/src/script.js
@@ -0,0 +1,63 @@
+console.clear();
+gsap.registerPlugin(MotionPathPlugin);
+
+let targets = gsap.utils.toArray("#icons g");
+let dotCenters = [50, 150, 250, 350, 450, 550];
+let yCenter = 112;
+let maxTravel = 500;
+let minTravel = 100;
+let mapper = gsap.utils.mapRange(minTravel, maxTravel, 0.5, 1);
+let anim;
+let activeDot = 0;
+let targetDot;
+let maxDur = 1;
+let maxArc = 150;
+let staggers = [0.2, 0.16, 0.135, 0.12, 0.11];
+
+targets.forEach((obj, i) => {
+  obj.index = i;
+  obj.addEventListener("click", letsGoo);
+});
+
+function letsGoo() {
+  targetDot = this.index;
+  if (targetDot != activeDot) {
+    if (anim && anim.isActive()) {
+      anim.progress(1);
+    }
+
+    let oldX = dotCenters[activeDot];
+    let newX = dotCenters[targetDot];
+    let travel = Math.abs(oldX - newX);
+    let factor = mapper(travel);
+    let newArc = yCenter - maxArc * factor;
+    let dur = maxDur * factor;
+    let newStagger = staggers[travel / 100 - 1];
+    let newPath = `M${oldX},${yCenter} Q${
+      travel / 2 + Math.min(oldX, newX)
+    },${newArc} ${newX},${yCenter}`;
+
+    gsap.set("#main", { attr: { d: newPath } });
+    anim = gsap
+      .timeline()
+      .to(".jumper", {
+        motionPath: {
+          path: "#main",
+          align: "#main",
+          alignOrigin: [0.5, 0.5]
+        },
+        stagger: newStagger,
+        duration: dur,
+        ease: "sine.inOut"
+      })
+      .to(
+        ".jumper",
+        { duration: dur / 2, attr: { rx: 40, ry: 40 }, yoyo: true, repeat: 1 },
+        0
+      );
+  } else {
+    return;
+  }
+
+  activeDot = targetDot;
+}
diff --git a/jumping-gooey-navigation/src/style.css b/jumping-gooey-navigation/src/style.css
new file mode 100644
index 0000000..39d7f9a
--- /dev/null
+++ b/jumping-gooey-navigation/src/style.css
@@ -0,0 +1,103 @@
+body {
+  font-family: "proxima-nova", sans-serif;
+  color: white;
+  display: flex;
+  height: 100vh;
+  background: #111;
+  overflow: hidden;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  background-image: linear-gradient(
+    0deg,
+    #382B8C,
+    #746BB0
+  );  
+}
+#demo {
+  width: 90vw;
+  height: auto;
+  max-width: 720px;
+  overflow: visible;
+}
+#icons path {
+  
+  fill: white;
+}
+
+text {
+  font-weight: 700;
+  font-size: 20px;
+  text-transform: uppercase;
+  fill: rgba(0,0,0,0.5);
+}
+
+#icons g {
+ cursor: pointer;
+ 
+}
+
+#icons rect {
+  fill: transparent;
+}
+
+.goop {
+  fill: #1C4861;
+  fill: #5C51A6;
+  fill: #382B8C;
+}
+
+#main {
+  stroke: #00688e;
+  stroke: none;
+  stroke-width: 1px;
+}
+
+
+
+h1, h2,
+p {
+  margin: 0;
+
+}
+
+a {
+  background: #5cceee;
+  color: white;
+  padding: 10px;
+  text-decoration: none;
+  border-radius: 3px;
+  margin-top: 10px;
+}
+
+a:hover {
+  background: white;
+    color: #5cceee;
+}
+h1, h2,
+p {
+  margin: 0;
+}
+h2 {
+  font-weight: 400;
+}
+h2 span {
+  font-weight: 700;
+  color: #5cceee;
+}
+p span {
+  font-weight: 700;
+  color: #5cceee;
+}
+
+.branding {
+
+  display: flex;
+  flex-direction: column;
+ align-items: center;
+/*   position: absolute;
+  bottom: 1rem; */
+}
+
diff --git a/keep-on-stackin-3d-css/README.markdown b/keep-on-stackin-3d-css/README.markdown
new file mode 100644
index 0000000..d23c368
--- /dev/null
+++ b/keep-on-stackin-3d-css/README.markdown
@@ -0,0 +1,5 @@
+# Keep on Stackin' (3D CSS)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jh3y/pen/dyzpVrY](https://codepen.io/jh3y/pen/dyzpVrY).
+
+
diff --git a/keep-on-stackin-3d-css/dist/index.html b/keep-on-stackin-3d-css/dist/index.html
new file mode 100644
index 0000000..3c5c62f
--- /dev/null
+++ b/keep-on-stackin-3d-css/dist/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Keep on Stackin&#39; (3D CSS)</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="scene">
+  <div class="stacked">
+    <div class="stacked__tray tray">
+      <div class="tray__side tray__side--bottom">
+        <div class="cuboid cuboid--tray">
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+        </div>
+      </div>
+      <div class="tray__side tray__side--left">
+        <div class="cuboid cuboid--tray">
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+        </div>
+      </div>
+      <div class="tray__side tray__side--right">
+        <div class="cuboid cuboid--tray">
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+          <div class="cuboid__side"></div>
+        </div>
+      </div>
+    </div>
+    <div class="stacked__stack">
+      <div class="stacked__block" style="--delay: 0">
+        <div class="block">
+          <div class="cuboid cuboid--block">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+      </div>
+      <div class="stacked__block" style="--delay: 1">
+        <div class="block">
+          <div class="cuboid cuboid--block">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+      </div>
+      <div class="stacked__block" style="--delay: 2">
+        <div class="block">
+          <div class="cuboid cuboid--block">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+      </div>
+      <div class="stacked__block" style="--delay: 3">
+        <div class="block">
+          <div class="cuboid cuboid--block">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+      </div>
+      <div class="stacked__block" style="--delay: 4">
+        <div class="block">
+          <div class="cuboid cuboid--block">
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+            <div class="cuboid__side"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/keep-on-stackin-3d-css/dist/script.js b/keep-on-stackin-3d-css/dist/script.js
new file mode 100644
index 0000000..8c1d225
--- /dev/null
+++ b/keep-on-stackin-3d-css/dist/script.js
@@ -0,0 +1,11 @@
+import gsap from 'https://cdn.skypack.dev/gsap';
+
+const BOUNDS = 50;
+document.addEventListener('pointermove', ({ x, y }) => {
+  const newX = gsap.utils.mapRange(0, window.innerWidth, -BOUNDS, BOUNDS, x);
+  const newY = gsap.utils.mapRange(0, window.innerHeight, BOUNDS, -BOUNDS, y);
+  gsap.set(document.documentElement, {
+    '--rotate-x': newY,
+    '--rotate-y': newX });
+
+});
\ No newline at end of file
diff --git a/keep-on-stackin-3d-css/dist/style.css b/keep-on-stackin-3d-css/dist/style.css
new file mode 100644
index 0000000..1139f3f
--- /dev/null
+++ b/keep-on-stackin-3d-css/dist/style.css
@@ -0,0 +1,286 @@
+.cuboid {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.cuboid__side:nth-of-type(1) {
+  height: calc(var(--thickness) * 1vmin);
+  width: 100%;
+  position: absolute;
+  top: 0;
+  transform: translate(0, -50%) rotateX(90deg);
+}
+.cuboid__side:nth-of-type(2) {
+  height: 100%;
+  width: calc(var(--thickness) * 1vmin);
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(50%, -50%) rotateY(90deg);
+}
+.cuboid__side:nth-of-type(3) {
+  width: 100%;
+  height: calc(var(--thickness) * 1vmin);
+  position: absolute;
+  bottom: 0;
+  transform: translate(0%, 50%) rotateX(90deg);
+}
+.cuboid__side:nth-of-type(4) {
+  height: 100%;
+  width: calc(var(--thickness) * 1vmin);
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translate(-50%, -50%) rotateY(90deg);
+}
+.cuboid__side:nth-of-type(5) {
+  height: 100%;
+  width: 100%;
+  transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.cuboid__side:nth-of-type(6) {
+  height: 100%;
+  width: 100%;
+  transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+  transform-style: preserve-3d;
+}
+body {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  background: var(--bg);
+  overflow: hidden;
+}
+:root {
+  --bg: #171726;
+  --speed: 6;
+  --delay-coefficient: -1.2s;
+  --b-1: #e77b23;
+  --b-2: #dc7118;
+  --b-3: #cf6a17;
+  --b-4: #b85e14;
+  --t-1: #8c8273;
+  --t-2: #70685c;
+  --t-3: #544e45;
+  --t-4: #38342e;
+}
+img {
+  opacity: 0.25;
+  position: fixed;
+  height: 50vmin;
+  top: 50%;
+  left: 50%;
+  transform: translate(-47.25%, -50%);
+}
+.scene {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(34deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg));
+}
+.stacked {
+  height: 50vmin;
+  width: 33vmin;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.stacked__tray {
+  position: absolute;
+  bottom: 9%;
+  left: 50%;
+  height: 15vmin;
+  width: 33vmin;
+  transform: translate(-50%, 0%);
+}
+.stacked__stack {
+  position: absolute;
+  bottom: 23.5%;
+  left: 50%;
+  height: 7.5%;
+  width: 55%;
+  transform: translate(-50%, 0);
+}
+.stacked__block {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  animation: stack calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * var(--delay-coefficient)) infinite ease-in reverse;
+}
+.tray__side {
+  position: absolute;
+}
+.tray__side--bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 24%;
+}
+.tray__side--bottom .cuboid div:nth-of-type(1):after {
+  content: '';
+  height: 24vmin;
+  width: 50%;
+  position: absolute;
+  background: radial-gradient(rgba(64,64,64,0.3) 75%, transparent);
+  filter: blur(1vmin);
+  top: 50%;
+  left: 50%;
+  -webkit-animation: strong calc(var(--delay-coefficient) * -1) infinite;
+          animation: strong calc(var(--delay-coefficient) * -1) infinite;
+  transform: translate(-50%, -50%);
+}
+@-webkit-keyframes strong {
+  0%, 100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes strong {
+  0%, 100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+.tray__side--left {
+  left: 0;
+  width: 11%;
+  height: 100%;
+}
+.tray__side--right {
+  right: 0;
+  width: 11%;
+  height: 100%;
+}
+.block {
+  animation: drop calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * var(--delay-coefficient)) infinite ease-out reverse;
+  transform-origin: 75% 50%;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+.cuboid--block div {
+  -webkit-animation: fade calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * var(--delay-coefficient)) infinite ease-in-out;
+          animation: fade calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * var(--delay-coefficient)) infinite ease-in-out;
+}
+.cuboid--tray {
+  --thickness: 33;
+}
+.cuboid--tray div:nth-of-type(1) {
+  background: var(--t-1);
+}
+.cuboid--tray div:nth-of-type(2) {
+  background: var(--t-2);
+}
+.cuboid--tray div:nth-of-type(3) {
+  background: var(--t-2);
+}
+.cuboid--tray div:nth-of-type(4) {
+  background: var(--t-4);
+}
+.cuboid--tray div:nth-of-type(5) {
+  background: var(--t-3);
+}
+.cuboid--tray div:nth-of-type(6) {
+  background: var(--t-2);
+}
+.cuboid--block {
+  --thickness: 24;
+}
+.cuboid--block div:nth-of-type(1) {
+  background: var(--b-1);
+}
+.cuboid--block div:nth-of-type(1):after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: radial-gradient(rgba(92,58,10,0.4) 75%, transparent);
+  filter: blur(1vmin);
+  -webkit-animation: fadeOver calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * var(--delay-coefficient)) infinite ease-in-out;
+          animation: fadeOver calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * var(--delay-coefficient)) infinite ease-in-out;
+}
+@-webkit-keyframes fadeOver {
+  0%, 20%, 100% {
+    opacity: 0;
+  }
+  30%, 90% {
+    opacity: 1;
+  }
+}
+@keyframes fadeOver {
+  0%, 20%, 100% {
+    opacity: 0;
+  }
+  30%, 90% {
+    opacity: 1;
+  }
+}
+.cuboid--block div:nth-of-type(2) {
+  background: var(--b-2);
+}
+.cuboid--block div:nth-of-type(3) {
+  background: var(--b-4);
+}
+.cuboid--block div:nth-of-type(4) {
+  background: var(--b-2);
+}
+.cuboid--block div:nth-of-type(5) {
+  background: var(--b-3);
+}
+.cuboid--block div:nth-of-type(6) {
+  background: var(--b-2);
+}
+@-webkit-keyframes stack {
+  to {
+    transform: translate(58%, 0);
+  }
+}
+@keyframes stack {
+  to {
+    transform: translate(58%, 0);
+  }
+}
+@-webkit-keyframes drop {
+  to {
+    transform: translate(0, -560%) rotate(54deg);
+  }
+}
+@keyframes drop {
+  to {
+    transform: translate(0, -560%) rotate(54deg);
+  }
+}
+@-webkit-keyframes fade {
+  0%, 100% {
+    opacity: 0;
+  }
+  10%, 90% {
+    opacity: 1;
+  }
+}
+@keyframes fade {
+  0%, 100% {
+    opacity: 0;
+  }
+  10%, 90% {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/keep-on-stackin-3d-css/license.txt b/keep-on-stackin-3d-css/license.txt
new file mode 100644
index 0000000..ac3eb5c
--- /dev/null
+++ b/keep-on-stackin-3d-css/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Jhey (https://codepen.io/jh3y/pen/dyzpVrY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/keep-on-stackin-3d-css/src/index.pug b/keep-on-stackin-3d-css/src/index.pug
new file mode 100644
index 0000000..00c134f
--- /dev/null
+++ b/keep-on-stackin-3d-css/src/index.pug
@@ -0,0 +1,28 @@
+mixin cuboid()
+  .cuboid(class!=attributes.class)
+    - let s = 0
+    while s < 6
+      .cuboid__side
+      - s++
+
+mixin block(delay)
+  .stacked__block(style=`--delay: ${delay}`)
+    .block
+      +cuboid()(class="cuboid--block")
+
+//- img(src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fassets.wired.com%2Fphotos%2Fw_1904%2Fwp-content%2Fuploads%2F2016%2F07%2Fso-logo-s.jpg&f=1&nofb=1")
+.scene
+  .stacked
+    .stacked__tray.tray
+      .tray__side.tray__side--bottom
+        +cuboid()(class="cuboid--tray")
+      .tray__side.tray__side--left
+        +cuboid()(class="cuboid--tray")
+      .tray__side.tray__side--right
+        +cuboid()(class="cuboid--tray")
+    .stacked__stack
+      +block(0)
+      +block(1)
+      +block(2)
+      +block(3)
+      +block(4)
\ No newline at end of file
diff --git a/keep-on-stackin-3d-css/src/script.babel b/keep-on-stackin-3d-css/src/script.babel
new file mode 100644
index 0000000..afbc0fc
--- /dev/null
+++ b/keep-on-stackin-3d-css/src/script.babel
@@ -0,0 +1,11 @@
+import gsap from 'https://cdn.skypack.dev/gsap'
+
+const BOUNDS = 50
+document.addEventListener('pointermove', ({ x, y }) => {
+  const newX = gsap.utils.mapRange(0, window.innerWidth, -BOUNDS, BOUNDS, x)
+  const newY = gsap.utils.mapRange(0, window.innerHeight, BOUNDS, -BOUNDS, y)
+  gsap.set(document.documentElement, {
+    '--rotate-x': newY,
+    '--rotate-y': newX,
+  })
+})
\ No newline at end of file
diff --git a/keep-on-stackin-3d-css/src/style.styl b/keep-on-stackin-3d-css/src/style.styl
new file mode 100644
index 0000000..cec4ac2
--- /dev/null
+++ b/keep-on-stackin-3d-css/src/style.styl
@@ -0,0 +1,235 @@
+.cuboid
+  width 100%
+  height 100%
+  position relative
+  // 1 is the top and go t, r, b, l, f, b
+
+  &__side:nth-of-type(1)
+    height calc(var(--thickness) * 1vmin)
+    width 100%
+    position absolute
+    top 0
+    transform translate(0, -50%) rotateX(90deg)
+
+  &__side:nth-of-type(2)
+    height 100%
+    width calc(var(--thickness) * 1vmin)
+    position absolute
+    top 50%
+    right 0
+    transform translate(50%, -50%) rotateY(90deg)
+
+  &__side:nth-of-type(3)
+    width 100%
+    height calc(var(--thickness) * 1vmin)
+    position absolute
+    bottom 0
+    transform translate(0%, 50%) rotateX(90deg)
+
+  &__side:nth-of-type(4)
+    height 100%
+    width calc(var(--thickness) * 1vmin)
+    position absolute
+    left 0
+    top 50%
+    transform translate(-50%, -50%) rotateY(90deg)
+
+  &__side:nth-of-type(5)
+    height 100%
+    width 100%
+    transform translate3d(0, 0, calc(var(--thickness) * 0.5vmin))
+    position absolute
+    top 0
+    left 0
+
+  &__side:nth-of-type(6)
+    height 100%
+    width 100%
+    transform translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg)
+    position absolute
+    top 0
+    left 0
+
+*
+*:after
+*:before
+  box-sizing border-box
+  transform-style preserve-3d
+
+body
+  min-height 100vh
+  display grid
+  place-items center
+  background var(--bg)
+  overflow hidden
+
+:root
+  --bg hsl(240, 24%, 12%)
+  --speed 6
+  --delay-coefficient -1.2s
+  --b-1 hsl(27, 80%, 52%)
+  --b-2 hsl(27, 80%, 48%)
+  --b-3 hsl(27, 80%, 45%)
+  --b-4 hsl(27, 80%, 40%)
+  --t-1 hsl(35, 10%, 50%)
+  --t-2 hsl(35, 10%, 40%)
+  --t-3 hsl(35, 10%, 30%)
+  --t-4 hsl(35, 10%, 20%)
+
+img
+  opacity 0.25
+  position fixed
+  height 50vmin
+  top 50%
+  left 50%
+  transform translate(-47.25%, -50%)
+
+.scene
+  position fixed
+  top 50%
+  left 50%
+  transform translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(34deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg))
+
+.stacked
+  height 50vmin
+  width 33vmin
+  position fixed
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+
+  &__tray
+    position absolute
+    bottom 9%
+    left 50%
+    height 15vmin
+    width 33vmin
+    transform translate(-50%, 0%)
+
+  &__stack
+    position absolute
+    bottom 23.5%
+    left 50%
+    height 7.5%
+    width 55%
+    transform translate(-50%, 0)
+
+  &__block
+    height 100%
+    width 100%
+    position absolute
+    animation stack calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * var(--delay-coefficient)) infinite ease-in reverse
+
+.tray
+  &__side
+    position absolute
+
+    &--bottom
+      bottom 0
+      left 0
+      right 0
+      height 24%
+
+      .cuboid div:nth-of-type(1):after
+        content ''
+        height 24vmin
+        width 50%
+        position absolute
+        background radial-gradient(hsla(0, 0%, 25%, 0.3) 75%, transparent)
+        filter blur(1vmin)
+        top 50%
+        left 50%
+        animation strong calc(var(--delay-coefficient) * -1) infinite
+        transform translate(-50%, -50%)
+
+        @keyframes strong
+          0%, 100%
+            opacity 0.5
+          50%
+            opacity 1
+
+    &--left
+      left 0
+      width 11%
+      height 100%
+
+    &--right
+      right 0
+      width 11%
+      height 100%
+
+.block
+  animation drop calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * var(--delay-coefficient)) infinite ease-out reverse
+  transform-origin 75% 50%
+  height 100%
+  width 100%
+  position absolute
+
+.cuboid--block div
+    animation fade calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * var(--delay-coefficient)) infinite ease-in-out
+
+@keyframes stack
+  to
+    transform translate(58%, 0)
+@keyframes drop
+  to
+    transform translate(0, -560%) rotate(54deg)
+
+@keyframes fade
+  0%, 100%
+    opacity 0
+  10%, 90%
+    opacity 1
+
+.cuboid
+  &--tray
+    --thickness 33
+    div
+      &:nth-of-type(1)
+        background var(--t-1)
+      &:nth-of-type(2)
+        background var(--t-2)
+      &:nth-of-type(3)
+        background var(--t-2)
+      &:nth-of-type(4)
+        background var(--t-4)
+      &:nth-of-type(5)
+        background var(--t-3)
+      &:nth-of-type(6)
+        background var(--t-2)
+
+  &--block
+    --thickness 24
+
+    div
+      &:nth-of-type(1)
+        background var(--b-1)
+
+        &:after
+          content ''
+          position absolute
+          top 0
+          right 0
+          bottom 0
+          left 0
+          background radial-gradient(hsla(35, 80%, 20%, 0.4) 75%, transparent)
+          filter blur(1vmin)
+          animation fadeOver calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * var(--delay-coefficient)) infinite ease-in-out
+
+          @keyframes fadeOver
+            0%, 20%, 100%
+              opacity 0
+            30%, 90%
+              opacity 1
+
+
+      &:nth-of-type(2)
+        background var(--b-2)
+      &:nth-of-type(3)
+        background var(--b-4)
+      &:nth-of-type(4)
+        background var(--b-2)
+      &:nth-of-type(5)
+        background var(--b-3)
+      &:nth-of-type(6)
+        background var(--b-2)
\ No newline at end of file
diff --git a/keyframes-1-9-3-solar-eclipse-loader/README.markdown b/keyframes-1-9-3-solar-eclipse-loader/README.markdown
new file mode 100644
index 0000000..5f1e981
--- /dev/null
+++ b/keyframes-1-9-3-solar-eclipse-loader/README.markdown
@@ -0,0 +1,4 @@
+# @keyframes 1.9.3 | Solar Eclipse Loader
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/shshaw/pen/WyoozY](https://codepen.io/shshaw/pen/WyoozY).
+
+ https://dribbble.com/shots/1982200-Solar-Eclipse
\ No newline at end of file
diff --git a/keyframes-1-9-3-solar-eclipse-loader/dist/index.html b/keyframes-1-9-3-solar-eclipse-loader/dist/index.html
new file mode 100644
index 0000000..7286c85
--- /dev/null
+++ b/keyframes-1-9-3-solar-eclipse-loader/dist/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>@keyframes 1.9.3 | Solar Eclipse Loader</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<a href="https://youtu.be/XqWsvQxKNac" target="_blank" data-keyframers-credit style="color: #FFF; text-shadow: 0 1px 0 #000"></a>
+<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
+
+<div class="sun">
+  <svg class="eclipse-container" viewBox="0 0 100 100">
+    <circle class="eclipse" cx="50" cy="50" r="49" transform="rotate(-90 50 50)" />
+  </svg>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/keyframes-1-9-3-solar-eclipse-loader/dist/script.js b/keyframes-1-9-3-solar-eclipse-loader/dist/script.js
new file mode 100644
index 0000000..ca759c9
--- /dev/null
+++ b/keyframes-1-9-3-solar-eclipse-loader/dist/script.js
@@ -0,0 +1 @@
+// console.log(Lengthy('circle'));
\ No newline at end of file
diff --git a/keyframes-1-9-3-solar-eclipse-loader/dist/style.css b/keyframes-1-9-3-solar-eclipse-loader/dist/style.css
new file mode 100644
index 0000000..0d204c8
--- /dev/null
+++ b/keyframes-1-9-3-solar-eclipse-loader/dist/style.css
@@ -0,0 +1,116 @@
+.sun {
+  background-color: #F6C744;
+  height: 50vmin;
+  width: 50vmin;
+  border-radius: 50%;
+}
+.sun:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-animation: thats-no-moon 6s infinite, night-and-day 6s infinite;
+          animation: thats-no-moon 6s infinite, night-and-day 6s infinite;
+  background-color: #fff;
+  border-radius: 50%;
+}
+
+@-webkit-keyframes thats-no-moon {
+  from, 5% {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+  }
+  30%, 60% {
+    -webkit-transform: none;
+            transform: none;
+  }
+  95%, to {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
+
+@keyframes thats-no-moon {
+  from, 5% {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+  }
+  30%, 60% {
+    -webkit-transform: none;
+            transform: none;
+  }
+  95%, to {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
+body {
+  -webkit-animation: night-and-day 6s infinite;
+          animation: night-and-day 6s infinite;
+}
+
+.eclipse {
+  fill: none;
+  stroke: #F6C744;
+  stroke-width: 2;
+  stroke-dasharray: 308 616;
+  stroke-dashoffset: 308;
+  stroke-linecap: round;
+  -webkit-animation: eclipse-reveal 6s cubic-bezier(0.75, 0.02, 0.18, 0.98) infinite;
+          animation: eclipse-reveal 6s cubic-bezier(0.75, 0.02, 0.18, 0.98) infinite;
+}
+
+@-webkit-keyframes eclipse-reveal {
+  0%, 30% {
+    stroke-dashoffset: -308;
+  }
+  50% {
+    stroke-dashoffset: 0;
+  }
+  60%, 100% {
+    stroke-dashoffset: 308;
+  }
+}
+
+@keyframes eclipse-reveal {
+  0%, 30% {
+    stroke-dashoffset: -308;
+  }
+  50% {
+    stroke-dashoffset: 0;
+  }
+  60%, 100% {
+    stroke-dashoffset: 308;
+  }
+}
+@-webkit-keyframes night-and-day {
+  from, 5%, 95%, to {
+    background-color: white;
+  }
+  45%, 55% {
+    background-color: black;
+  }
+}
+@keyframes night-and-day {
+  from, 5%, 95%, to {
+    background-color: white;
+  }
+  45%, 55% {
+    background-color: black;
+  }
+}
+html, body {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+*, *:before {
+  box-sizing: border-box;
+  position: relative;
+}
diff --git a/keyframes-1-9-3-solar-eclipse-loader/license.txt b/keyframes-1-9-3-solar-eclipse-loader/license.txt
new file mode 100644
index 0000000..b3cef3f
--- /dev/null
+++ b/keyframes-1-9-3-solar-eclipse-loader/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Shaw (https://codepen.io/shshaw/pen/WyoozY)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/keyframes-1-9-3-solar-eclipse-loader/src/index.html b/keyframes-1-9-3-solar-eclipse-loader/src/index.html
new file mode 100644
index 0000000..27d0369
--- /dev/null
+++ b/keyframes-1-9-3-solar-eclipse-loader/src/index.html
@@ -0,0 +1,8 @@
+<a href="https://youtu.be/XqWsvQxKNac" target="_blank" data-keyframers-credit style="color: #FFF; text-shadow: 0 1px 0 #000"></a>
+<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
+
+<div class="sun">
+  <svg class="eclipse-container" viewBox="0 0 100 100">
+    <circle class="eclipse" cx="50" cy="50" r="49" transform="rotate(-90 50 50)" />
+  </svg>
+</div>
\ No newline at end of file
diff --git a/keyframes-1-9-3-solar-eclipse-loader/src/script.js b/keyframes-1-9-3-solar-eclipse-loader/src/script.js
new file mode 100644
index 0000000..ca759c9
--- /dev/null
+++ b/keyframes-1-9-3-solar-eclipse-loader/src/script.js
@@ -0,0 +1 @@
+// console.log(Lengthy('circle'));
\ No newline at end of file
diff --git a/keyframes-1-9-3-solar-eclipse-loader/src/style.scss b/keyframes-1-9-3-solar-eclipse-loader/src/style.scss
new file mode 100644
index 0000000..fc5a438
--- /dev/null
+++ b/keyframes-1-9-3-solar-eclipse-loader/src/style.scss
@@ -0,0 +1,80 @@
+
+$yellow: #F6C744;
+$duration: 6s;
+$load-duration: 1s;
+$length: 308;
+
+.sun {
+  background-color: $yellow;
+  height: 50vmin;
+  width: 50vmin;
+  border-radius: 50%;
+  
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    animation: thats-no-moon $duration infinite, night-and-day $duration infinite;
+    background-color: #fff;
+    border-radius: 50%;
+  }
+}
+
+@keyframes thats-no-moon {
+  from, 5% {
+    transform: translateX(100%);
+  }
+  30%, 60% {
+    transform: none;
+  }
+  95%, to {
+    transform: translateX(-100%);
+  }
+}
+
+body {
+ animation: night-and-day $duration infinite;
+}
+
+
+.eclipse {
+  fill: none;
+  stroke: $yellow;
+  stroke-width: 2;
+  stroke-dasharray: $length #{$length*2};
+  stroke-dashoffset: $length;
+  stroke-linecap: round;
+  animation: eclipse-reveal $duration cubic-bezier(.75,.02,.18,.98) infinite;
+}
+
+@keyframes eclipse-reveal {
+  0%, 30% { stroke-dashoffset: -$length; }
+  50% { stroke-dashoffset: 0; }
+  60%, 100% { stroke-dashoffset: $length; }
+}
+
+@keyframes night-and-day {
+  from, 5%, 95%, to {
+    background-color: white;
+  }
+  45%, 55% {
+    background-color: black;
+  }
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+*, *:before {
+  box-sizing: border-box;
+  position: relative;
+}
\ No newline at end of file
diff --git a/knob-input-component/README.markdown b/knob-input-component/README.markdown
new file mode 100644
index 0000000..90d7b0a
--- /dev/null
+++ b/knob-input-component/README.markdown
@@ -0,0 +1,12 @@
+# Knob Input Component
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jhnsnc/pen/KXYayG](https://codepen.io/jhnsnc/pen/KXYayG).
+
+ **New demo showing the same result with less code using the `precision-inputs` library:** https://codepen.io/jhnsnc/pen/mqPGQK
+
+A simple demo showcasing my new `KnobInput` input component. It is written in vanilla JS and designed to be highly customizable.
+
+The class uses a "range" input behind the scenes so it remains accessible to screenreaders while functioning like knob controls from music production software. This means that it allows for precise input via keyboard, touch, mouse, and mousewheel without sacrificing visual fidelity, portability, or accessibility.
+
+I decided to publish the component on npm: https://www.npmjs.com/package/precision-inputs
+
+Feel free to give me feedback here or on Github: https://github.com/jhnsnc/precision-inputs
\ No newline at end of file
diff --git a/knob-input-component/dist/index.html b/knob-input-component/dist/index.html
new file mode 100644
index 0000000..57d9bd8
--- /dev/null
+++ b/knob-input-component/dist/index.html
@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Knob Input Component</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<svg class="defs">
+  <defs>
+    <radialGradient id="grad-dial-soft-shadow" cx="0.5" cy="0.5" r="0.5">
+      <stop offset="85%" stop-color="#242a2e" stop-opacity="0.4"></stop>
+      <stop offset="100%" stop-color="#242a2e" stop-opacity="0"></stop>
+    </radialGradient>
+    <linearGradient id="grad-dial-base" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#52595f"></stop>
+      <stop offset="100%" stop-color="#2b3238"></stop>
+    </linearGradient>
+    <linearGradient id="grad-dial-highlight" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#70777d" stop-opacity="1"></stop>
+      <stop offset="40%" stop-color="#70777d" stop-opacity="0"></stop>
+      <stop offset="55%" stop-color="#70777d" stop-opacity="0"></stop>
+      <stop offset="100%" stop-color="#70777d" stop-opacity="0.3"></stop>
+    </linearGradient>
+    <filter id="glow">
+      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="2"></feGaussianBlur>
+      <feComposite in="blur" in2="SourceGraphic" operator="over"></feComposite>
+    </filter>
+  </defs>
+</svg>
+<div class="fl-studio-envelope">
+  <div class="fl-studio-envelope__visualizer">
+    <svg class="envelope-visualizer" viewBox="0 0 300 100" preserveAspectRatio="xMinYMid slice">
+      <path class="envelope-shape" d="M0,100L0,0" fill="transparent" stroke="#4eccff" stroke-width="2"></path>
+      <circle class="delay" cx="0" cy="100" r="6" fill="#284554" stroke="#4eccff" stroke-width="2"></circle>
+      <circle class="attack" cx="0" cy="0" r="6" fill="#284554" stroke="#4eccff" stroke-width="2"></circle>
+      <circle class="hold" cx="0" cy="0" r="6" fill="#284554" stroke="#4eccff" stroke-width="2"></circle>
+      <circle class="decay" cx="0" cy="100" r="6" fill="#284554" stroke="#4eccff" stroke-width="2"></circle>
+      <circle class="release" cx="0" cy="100" r="6" fill="#284554" stroke="#4eccff" stroke-width="2"></circle>
+    </svg>
+  </div>
+  <div class="fl-studio-envelope__controls">
+    <div class="fl-studio-envelope__control">
+      <div class="knob-input fl-studio-envelope__knob envelope-knob delay">
+        <svg class="knob-input__visual" viewBox="0 0 40 40">
+          <circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
+          <circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
+          <path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
+          <g class="dial">
+            <circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
+            <ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
+            <circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
+            <circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
+            <circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
+            <circle class="indicator-dot" cx="20" cy="30" r="1.5" fill="#4eccff"></circle>
+          </g>
+        </svg>
+      </div>
+      <div class="fl-studio-envelope__label">delay</div>
+    </div>
+    <div class="fl-studio-envelope__control">
+      <div class="knob-input fl-studio-envelope__knob envelope-knob attack">
+        <svg class="knob-input__visual" viewBox="0 0 40 40">
+          <circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
+          <circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
+          <path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
+          <g class="dial">
+            <circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
+            <ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
+            <circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
+            <circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
+            <circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
+            <circle class="indicator-dot" cx="20" cy="30" r="1.5" fill="#4eccff"></circle>
+          </g>
+        </svg>
+      </div>
+      <div class="fl-studio-envelope__label">att</div>
+    </div>
+    <div class="fl-studio-envelope__control">
+      <div class="knob-input fl-studio-envelope__knob envelope-knob hold">
+        <svg class="knob-input__visual" viewBox="0 0 40 40">
+          <circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
+          <circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
+          <path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
+          <g class="dial">
+            <circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
+            <ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
+            <circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
+            <circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
+            <circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
+            <circle class="indicator-dot" cx="20" cy="30" r="1.5" fill="#4eccff"></circle>
+          </g>
+        </svg>
+      </div>
+      <div class="fl-studio-envelope__label">hold</div>
+    </div>
+    <div class="fl-studio-envelope__control">
+      <div class="knob-input fl-studio-envelope__knob envelope-knob decay">
+        <svg class="knob-input__visual" viewBox="0 0 40 40">
+          <circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
+          <circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
+          <path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
+          <g class="dial">
+            <circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
+            <ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
+            <circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
+            <circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
+            <circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
+            <circle class="indicator-dot" cx="20" cy="30" r="1.5" fill="#4eccff"></circle>
+          </g>
+        </svg>
+      </div>
+      <div class="fl-studio-envelope__label">dec</div>
+    </div>
+    <div class="fl-studio-envelope__control">
+      <div class="knob-input fl-studio-envelope__knob envelope-knob sustain">
+        <svg class="knob-input__visual" viewBox="0 0 40 40">
+          <circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
+          <circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
+          <path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
+          <g class="dial">
+            <circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
+            <ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
+            <circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
+            <circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
+            <circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
+            <circle class="indicator-dot" cx="20" cy="30" r="1.5" fill="#4eccff"></circle>
+          </g>
+        </svg>
+      </div>
+      <div class="fl-studio-envelope__label">sus</div>
+    </div>
+    <div class="fl-studio-envelope__control">
+      <div class="knob-input fl-studio-envelope__knob envelope-knob release">
+        <svg class="knob-input__visual" viewBox="0 0 40 40">
+          <circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
+          <circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
+          <path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
+          <g class="dial">
+            <circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
+            <ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
+            <circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
+            <circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
+            <circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
+            <circle class="indicator-dot" cx="20" cy="30" r="1.5" fill="#4eccff"></circle>
+          </g>
+        </svg>
+      </div>
+      <div class="fl-studio-envelope__label">rel</div>
+    </div>
+  </div>
+  <div class="fl-studio-envelope__tension">
+    <div class="fl-studio-envelope__label"> </div>
+    <div class="knob-input fl-studio-envelope__knob tension-knob attack">
+      <svg class="knob-input__visual" viewBox="0 0 40 40">
+        <circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
+        <circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
+        <path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
+        <g class="dial">
+          <circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
+          <ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
+          <circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
+          <circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
+          <circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
+        </g>
+      </svg>
+    </div>
+    <div class="fl-studio-envelope__label">tension</div>
+    <div class="knob-input fl-studio-envelope__knob tension-knob decay">
+      <svg class="knob-input__visual" viewBox="0 0 40 40">
+        <circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
+        <circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
+        <path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
+        <g class="dial">
+          <circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
+          <ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
+          <circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
+          <circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
+          <circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
+        </g>
+      </svg>
+    </div>
+    <div class="fl-studio-envelope__label">tension</div>
+    <div class="knob-input fl-studio-envelope__knob tension-knob release">
+      <svg class="knob-input__visual" viewBox="0 0 40 40">
+        <circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
+        <circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
+        <path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
+        <g class="dial">
+          <circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
+          <ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
+          <circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
+          <circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
+          <circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
+        </g>
+      </svg>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/knob-input-component/dist/script.js b/knob-input-component/dist/script.js
new file mode 100644
index 0000000..4e857b7
--- /dev/null
+++ b/knob-input-component/dist/script.js
@@ -0,0 +1,406 @@
+// TODO: add input label for screenreaders
+
+// KnobInput class
+
+class KnobInput {
+  constructor(containerElement, options) {
+    if (!options) {
+      options = {};
+    }
+    
+    // settings
+    var step = options.step || 'any';
+    var min = typeof options.min === 'number' ? options.min : 0;
+    var max = typeof options.max === 'number' ? options.max : 1;
+    this.initial = typeof options.initial === 'number' ? options.initial : 0.5 * (min + max);
+    this.visualElementClass = options.visualElementClass || 'knob-input__visual';
+    this.dragResistance = typeof options.dragResistance === 'number' ? options.dragResistance : 300;
+    this.dragResistance /= max-min;
+    this.wheelResistance = typeof options.wheelResistance === 'number' ? options.wheelResistance : 4000;
+    this.wheelResistance /= max-min;
+    this.setupVisualContext = typeof options.visualContext === 'function' ? options.visualContext : KnobInput.setupRotationContext(0, 360);
+    this.updateVisuals = typeof options.updateVisuals === 'function' ? options.updateVisuals : KnobInput.rotationUpdateFunction;
+    
+    // setup input
+    var rangeInput = document.createElement('input');
+    rangeInput.type = 'range';
+    rangeInput.step = step;
+    rangeInput.min = min;
+    rangeInput.max = max;
+    rangeInput.value = this.initial;
+    containerElement.appendChild(rangeInput);
+    
+    // elements
+    this._container = containerElement;
+    this._container.classList.add('knob-input');
+    this._input = rangeInput;
+    this._input.classList.add('knob-input__input');
+    this._visualElement = this._container.querySelector(`.${this.visualElementClass}`);
+    this._visualElement.classList.add('knob-input__visual');
+    
+    // visual context
+    this._visualContext = { element: this._visualElement };
+    this.setupVisualContext.apply(this._visualContext);
+    this.updateVisuals = this.updateVisuals.bind(this._visualContext);
+    
+    // internals
+    this._activeDrag = false;
+    
+    // define event listeners
+    // have to store bound versions of handlers so they can be removed later
+    this._handlers = {
+      inputChange: this.handleInputChange.bind(this),
+      touchStart: this.handleTouchStart.bind(this),
+      touchMove: this.handleTouchMove.bind(this),
+      touchEnd: this.handleTouchEnd.bind(this),
+      touchCancel: this.handleTouchCancel.bind(this),
+      mouseDown: this.handleMouseDown.bind(this),
+      mouseMove: this.handleMouseMove.bind(this),
+      mouseUp: this.handleMouseUp.bind(this),
+      mouseWheel: this.handleMouseWheel.bind(this),
+      doubleClick: this.handleDoubleClick.bind(this),
+      focus: this.handleFocus.bind(this),
+      blur: this.handleBlur.bind(this),
+    };
+    // add listeners
+    this._input.addEventListener('change', this._handlers.inputChange);
+    this._input.addEventListener('touchstart', this._handlers.touchStart);
+    this._input.addEventListener('mousedown', this._handlers.mouseDown);
+    this._input.addEventListener('wheel', this._handlers.mouseWheel);
+    this._input.addEventListener('dblclick', this._handlers.doubleClick);
+    this._input.addEventListener('focus', this._handlers.focus);
+    this._input.addEventListener('blur', this._handlers.blur);
+    // init
+    this.updateToInputValue();
+  }
+  
+  static setupRotationContext(minRotation, maxRotation) {
+    return function() {
+      this.minRotation = minRotation;
+      this.maxRotation = maxRotation;
+    };
+  }
+  
+  static rotationUpdateFunction(norm) {
+    this.element.style[transformProp] = `rotate(${this.maxRotation*norm-this.minRotation*(norm-1)}deg)`;
+  }
+  
+  // handlers
+  handleInputChange(evt) {
+    // console.log('input change');
+    this.updateToInputValue();
+  }
+  
+  handleTouchStart(evt) {
+    // console.log('touch start');
+    this.clearDrag();
+    evt.preventDefault();
+    var touch = evt.changedTouches.item(evt.changedTouches.length - 1);
+    this._activeDrag = touch.identifier;
+    this.startDrag(touch.clientY);
+    // drag update/end listeners
+    document.body.addEventListener('touchmove', this._handlers.touchMove);
+    document.body.addEventListener('touchend', this._handlers.touchEnd);
+    document.body.addEventListener('touchcancel', this._handlers.touchCancel);
+  }
+  
+  handleTouchMove(evt) {
+    // console.log('touch move');
+    var activeTouch = this.findActiveTouch(evt.changedTouches);
+    if (activeTouch) {
+      this.updateDrag(activeTouch.clientY);
+    } else if (!this.findActiveTouch(evt.touches)) {
+      this.clearDrag();
+    }
+  }
+  
+  handleTouchEnd(evt) {
+    // console.log('touch end');
+    var activeTouch = this.findActiveTouch(evt.changedTouches);
+    if (activeTouch) {
+      this.finalizeDrag(activeTouch.clientY);
+    }
+  }
+  
+  handleTouchCancel(evt) {
+    // console.log('touch cancel');
+    if (this.findActiveTouch(evt.changedTouches)) {
+      this.clearDrag();
+    }
+  }
+  
+  handleMouseDown(evt) {
+    // console.log('mouse down');
+    this.clearDrag();
+    evt.preventDefault();
+    this._activeDrag = true;
+    this.startDrag(evt.clientY);
+    // drag update/end listeners
+    document.body.addEventListener('mousemove', this._handlers.mouseMove);
+    document.body.addEventListener('mouseup', this._handlers.mouseUp);
+  }
+  
+  handleMouseMove(evt) {
+    // console.log('mouse move');
+    if (evt.buttons&1) {
+      this.updateDrag(evt.clientY);
+    } else {
+      this.finalizeDrag(evt.clientY);
+    }
+  }
+  
+  handleMouseUp(evt) {
+    // console.log('mouse up');
+    this.finalizeDrag(evt.clientY);
+  }
+  
+  handleMouseWheel(evt) {
+    // console.log('mouse wheel');
+    this._input.focus();
+    this.clearDrag();
+    this._prevValue = parseFloat(this._input.value);
+    this.updateFromDrag(evt.deltaY, this.wheelResistance);
+  }
+  
+  handleDoubleClick(evt) {
+    // console.log('double click');
+    this.clearDrag();
+    this._input.value = this.initial;
+    this.updateToInputValue();
+  }
+  
+  handleFocus(evt) {
+    // console.log('focus on');
+    this._container.classList.add('focus-active');
+  }
+  
+  handleBlur(evt) {
+    // console.log('focus off');
+    this._container.classList.remove('focus-active');
+  }
+  
+  // dragging
+  startDrag(yPosition) {
+    this._dragStartPosition = yPosition;
+    this._prevValue = parseFloat(this._input.value);
+    
+    this._input.focus();
+    document.body.classList.add('knob-input__drag-active');
+    this._container.classList.add('drag-active');
+  }
+  
+  updateDrag(yPosition) {
+    var diff = yPosition - this._dragStartPosition;
+    this.updateFromDrag(diff, this.dragResistance);
+    this._input.dispatchEvent(new InputEvent('change'));
+  }
+  
+  finalizeDrag(yPosition) {
+    var diff = yPosition - this._dragStartPosition;
+    this.updateFromDrag(diff, this.dragResistance);
+    this.clearDrag();
+    this._input.dispatchEvent(new InputEvent('change'));
+  }
+  
+  clearDrag() {
+    document.body.classList.remove('knob-input__drag-active');
+    this._container.classList.remove('drag-active');
+    this._activeDrag = false;
+    this._input.dispatchEvent(new InputEvent('change'));
+    // clean up event listeners
+    document.body.removeEventListener('mousemove', this._handlers.mouseMove);
+    document.body.removeEventListener('mouseup', this._handlers.mouseUp);
+    document.body.removeEventListener('touchmove', this._handlers.touchMove);
+    document.body.removeEventListener('touchend', this._handlers.touchEnd);
+    document.body.removeEventListener('touchcancel', this._handlers.touchCancel);
+  }
+  
+  updateToInputValue() {
+    var normVal = this.normalizeValue(parseFloat(this._input.value));
+    this.updateVisuals(normVal);
+  }
+  
+  updateFromDrag(dragAmount, resistance) {
+    var newVal = this.clampValue(this._prevValue - (dragAmount/resistance));
+    this._input.value = newVal;
+    this.updateVisuals(this.normalizeValue(newVal));
+  }
+  
+  // utils
+  clampValue(val) {
+    var min = parseFloat(this._input.min);
+    var max = parseFloat(this._input.max);
+    return Math.min(Math.max(val, min), max);
+  }
+  
+  normalizeValue(val) {
+    var min = parseFloat(this._input.min);
+    var max = parseFloat(this._input.max);
+    return (val-min)/(max-min);
+  }
+
+  findActiveTouch(touchList) {
+    var i, len, touch;
+    for (i=0, len=touchList.length; i<len; i++)
+      if (this._activeDrag === touchList.item(i).identifier)
+        return touchList.item(i);
+    return null;
+  }
+  
+  // public passthrough methods
+  addEventListener() { this._input.addEventListener.apply(this._input, arguments); }
+  removeEventListener() { this._input.removeEventListener.apply(this._input, arguments); }
+  focus() { this._input.focus.apply(this._input, arguments); }
+  blur() { this._input.blur.apply(this._input, arguments); }
+  
+  // getters/setters
+  get value() {
+    return parseFloat(this._input.value);
+  }
+  set value(val) {
+    this._input.value = val;
+    this.updateToInputValue();
+    this._input.dispatchEvent(new Event('change'));
+  }
+}
+
+// Utils
+
+function getSupportedPropertyName(properties) {
+  for (var i = 0; i < properties.length; i++)
+    if (typeof document.body.style[properties[i]] !== 'undefined')
+      return properties[i];
+  return null;
+}
+
+function getTransformProperty() {
+  return getSupportedPropertyName([
+    'transform', 'msTransform', 'webkitTransform', 'mozTransform', 'oTransform'
+  ]);
+}
+
+function debounce(func, wait, immediate) {
+	var timeout;
+	return function() {
+		var context = this, args = arguments;
+		var later = function() {
+			timeout = null;
+			if (!immediate) func.apply(context, args);
+		};
+		var callNow = immediate && !timeout;
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+		if (callNow) func.apply(context, args);
+	};
+};
+
+// Demo Setup - Knobs
+
+var transformProp = getTransformProperty();
+
+var envelopeKnobStartPositions = [0, 40, 75, 85, 20, 55];
+var envelopeKnobs = [...document.querySelectorAll('.fl-studio-envelope__knob.envelope-knob')];
+var envelopeKnobs = envelopeKnobs.map((el, idx) => new KnobInput(el, {
+  visualContext: function() {
+    this.indicatorRing = this.element.querySelector('.indicator-ring');
+    var ringStyle = getComputedStyle(this.element.querySelector('.indicator-ring-bg'));
+    this.r = parseFloat(ringStyle.r) - (parseFloat(ringStyle.strokeWidth) / 2);
+    this.indicatorDot = this.element.querySelector('.indicator-dot');
+    this.indicatorDot.style[`${transformProp}Origin`] = '20px 20px';
+  },
+  updateVisuals: function(norm) {
+    var theta = Math.PI*2*norm + 0.5*Math.PI;
+    var endX = this.r*Math.cos(theta) + 20;
+    var endY = this.r*Math.sin(theta) + 20;
+    // using 2 arcs rather than flags since one arc collapses if it gets near 360deg
+    this.indicatorRing.setAttribute('d',`M20,20l0,${this.r}${norm> 0.5?`A${this.r},${this.r},0,0,1,20,${20-this.r}`:''}A-${this.r},${this.r},0,0,1,${endX},${endY}Z`);
+    this.indicatorDot.style[transformProp] = `rotate(${360*norm}deg)`;
+  },
+  min: 0,
+  max: 100,
+  initial: envelopeKnobStartPositions[idx],
+}));
+
+var tensionKnobStartPositions = [0, 0, -80];
+var tensionKnobs = [...document.querySelectorAll('.fl-studio-envelope__knob.tension-knob')];
+var tensionKnobs = tensionKnobs.map((el, idx) => new KnobInput(el, {
+  visualContext: function() {
+    this.indicatorRing = this.element.querySelector('.indicator-ring');
+    var ringStyle = getComputedStyle(this.element.querySelector('.indicator-ring-bg'));
+    this.r = parseFloat(ringStyle.r) - (parseFloat(ringStyle.strokeWidth) / 2);
+  },
+  updateVisuals: function(norm) {
+    var theta = Math.PI*2*norm + 0.5*Math.PI;
+    var endX = this.r*Math.cos(theta) + 20;
+    var endY = this.r*Math.sin(theta) + 20;
+    this.indicatorRing.setAttribute('d',`M20,20l0,-${this.r}A${this.r},${this.r},0,0,${norm<0.5?0:1},${endX},${endY}Z`);
+  },
+  min: -100,
+  max: 100,
+  initial: tensionKnobStartPositions[idx],
+}));
+
+// Demo Setup - Envelope Visualization
+
+var container = document.querySelector('.envelope-visualizer');
+var enveloperVisualizer = {
+  container: container,
+  shape: container.querySelector('.envelope-shape'),
+  delay: container.querySelector('.delay'),
+  attack: container.querySelector('.attack'),
+  hold: container.querySelector('.hold'),
+  decay: container.querySelector('.decay'),
+  release: container.querySelector('.release'),
+};
+
+var updateVisualization = debounce(function(evt) {
+  var maxPtSeparation = 75;
+  var ptDelay = (maxPtSeparation * envelopeKnobs[0].value / 100);
+  var ptAttack = ptDelay + (maxPtSeparation * envelopeKnobs[1].value / 100);
+  var ptHold = ptAttack + (maxPtSeparation * envelopeKnobs[2].value / 100);
+  var ptDecay = ptHold + (maxPtSeparation * envelopeKnobs[3].value / 100) * (100 - envelopeKnobs[4].value) / 100;
+  var ptSustain = 100 - envelopeKnobs[4].value; // y value
+  var ptRelease = ptDecay + (maxPtSeparation * envelopeKnobs[5].value / 100);
+  // TODO: better tension visualization
+  var tnAttack = (ptAttack - ptDelay) * tensionKnobs[0].value / 100;
+  var tnDecay = (ptDecay - ptHold) * tensionKnobs[1].value / 100;
+  var tnRelease = (ptRelease - ptDecay) * tensionKnobs[2].value / 100;
+  enveloperVisualizer.shape.setAttribute('d',
+    `M${ptDelay},100`+
+    `C${tnAttack<0?ptDelay-tnAttack:ptDelay},100,${tnAttack>0?ptAttack-tnAttack:ptAttack},0,${ptAttack},0`+
+    `L${ptHold},0`+
+    `C${tnDecay>0?ptHold+tnDecay:ptHold},0,${tnDecay<0?ptDecay+tnDecay:ptDecay},${ptSustain},${ptDecay},${ptSustain}`+
+    `C${tnRelease>0?ptDecay+tnRelease:ptDecay},${ptSustain},${tnRelease<0?ptRelease+tnRelease:ptRelease},100,${ptRelease},100`
+  );
+  enveloperVisualizer.delay.setAttribute('cx', ptDelay);
+  enveloperVisualizer.attack.setAttribute('cx', ptAttack);
+  enveloperVisualizer.hold.setAttribute('cx', ptHold);
+  enveloperVisualizer.decay.setAttribute('cx', ptDecay);
+  enveloperVisualizer.decay.setAttribute('cy', ptSustain);
+  enveloperVisualizer.release.setAttribute('cx', ptRelease);
+}, 10);
+
+envelopeKnobs.concat(tensionKnobs)
+  .forEach(knob => { knob.addEventListener('change', updateVisualization); });
+updateVisualization();
+
+var panelElement = document.querySelector('.fl-studio-envelope');
+var panel = {
+  element: panelElement,
+  originalTransform: getComputedStyle(panelElement)[transformProp],
+  width: panelElement.getBoundingClientRect().width,
+  height: panelElement.getBoundingClientRect().height,
+};
+var resizePanel = () => {
+  var pw = (window.innerWidth - 40) / panel.width;
+  var ph = (window.innerHeight - 40) / panel.height;
+  var size = Math.min(pw, ph);
+  if (size > 1.4) {
+    size -= 0.4;
+  } else if (size > 1) {
+    size = Math.min(size, 1);
+  }
+  panel.element.style[transformProp] = `${panel.originalTransform} scale(${size})`;
+};
+window.addEventListener('resize', resizePanel);
+resizePanel();
\ No newline at end of file
diff --git a/knob-input-component/dist/style.css b/knob-input-component/dist/style.css
new file mode 100644
index 0000000..d3dc656
--- /dev/null
+++ b/knob-input-component/dist/style.css
@@ -0,0 +1,146 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  padding: 1px;
+  background: radial-gradient(#1a1d22, #121318);
+}
+
+.defs {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+
+.fl-studio-envelope {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 600px;
+  padding: 20px;
+  overflow: hidden;
+  background: #363c40;
+  border: 2px solid #272d31;
+  box-shadow: 0 10px 70px rgba(0, 0, 0, 0.6);
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+.fl-studio-envelope__visualizer {
+  height: 200px;
+  background: #21272b;
+  border: 2px solid #191f23;
+}
+.fl-studio-envelope__visualizer .envelope-visualizer {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.fl-studio-envelope__controls, .fl-studio-envelope__tension {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fl-studio-envelope__controls {
+  padding: 30px 0 0;
+}
+
+.fl-studio-envelope__control {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.fl-studio-envelope__label {
+  flex: 0 0 auto;
+  display: inline-block;
+  padding: 10px 0;
+  width: 80px;
+  color: #c1c5c5;
+  font-size: 10px;
+  font-family: 'Helvetica', sans-serif;
+  font-weight: 700;
+  text-align: center;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.fl-studio-envelope__knob {
+  flex: 0 0 auto;
+}
+.fl-studio-envelope__knob.envelope-knob {
+  width: 80px;
+  height: 80px;
+}
+.fl-studio-envelope__knob.tension-knob {
+  padding: 10px;
+  width: 80px;
+  height: 80px;
+}
+.fl-studio-envelope__knob .knob-input__visual {
+  overflow: visible;
+}
+.fl-studio-envelope__knob .dial {
+  -webkit-transform-origin: 20px 20px;
+          transform-origin: 20px 20px;
+  transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+.fl-studio-envelope__knob .dial-highlight {
+  opacity: 0;
+  transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+.fl-studio-envelope__knob:hover .dial, .fl-studio-envelope__knob.drag-active .dial {
+  -webkit-transform: scale(0.9);
+          transform: scale(0.9);
+  -webkit-filter: brightness(10.2);
+          filter: brightness(10.2);
+  transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+.fl-studio-envelope__knob:hover .dial-highlight, .fl-studio-envelope__knob.drag-active .dial-highlight {
+  opacity: 0.05;
+}
+.fl-studio-envelope__knob .focus-indicator {
+  opacity: 0;
+  transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+.fl-studio-envelope__knob.focus-active .focus-indicator {
+  opacity: 0.8;
+}
+
+.knob-input {
+  position: relative;
+}
+
+.knob-input__visual {
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+}
+
+.knob-input__input {
+  cursor: -webkit-grab;
+  cursor: grab;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+}
+
+body.knob-input__drag-active, body.knob-input__drag-active * {
+  cursor: -webkit-grabbing !important;
+  cursor: grabbing !important;
+}
diff --git a/knob-input-component/license.txt b/knob-input-component/license.txt
new file mode 100644
index 0000000..39f41c7
--- /dev/null
+++ b/knob-input-component/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Chris Johnson (https://codepen.io/jhnsnc/pen/KXYayG)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/knob-input-component/src/index.pug b/knob-input-component/src/index.pug
new file mode 100644
index 0000000..36a0592
--- /dev/null
+++ b/knob-input-component/src/index.pug
@@ -0,0 +1,60 @@
+svg.defs
+  defs
+    radialGradient#grad-dial-soft-shadow(cx=0.5,cy=0.5,r=0.5)
+      stop(offset='85%',stop-color='#242a2e',stop-opacity=0.4)
+      stop(offset='100%',stop-color='#242a2e',stop-opacity=0)
+    linearGradient#grad-dial-base(x1=0,y1=0,x2=0,y2=1)
+      stop(offset='0%',stop-color='#52595f')
+      stop(offset='100%',stop-color='#2b3238')
+    linearGradient#grad-dial-highlight(x1=0,y1=0,x2=0,y2=1)
+      stop(offset='0%',stop-color='#70777d',stop-opacity=1)
+      stop(offset='40%',stop-color='#70777d',stop-opacity=0)
+      stop(offset='55%',stop-color='#70777d',stop-opacity=0)
+      stop(offset='100%',stop-color='#70777d',stop-opacity=0.3)
+    filter#glow
+      feGaussianBlur(in='SourceGraphic',result='blur',stdDeviation=2)
+      feComposite(in='blur',in2='SourceGraphic',operator='over')
+.fl-studio-envelope
+  .fl-studio-envelope__visualizer
+    svg.envelope-visualizer(viewBox='0 0 300 100',preserveAspectRatio='xMinYMid slice')
+      path.envelope-shape(d='M0,100L0,0',fill='transparent',stroke='#4eccff',stroke-width=2)
+      circle.delay(cx=0,cy=100,r=6,fill='#284554',stroke='#4eccff',stroke-width=2)
+      circle.attack(cx=0,cy=0,r=6,fill='#284554',stroke='#4eccff',stroke-width=2)
+      circle.hold(cx=0,cy=0,r=6,fill='#284554',stroke='#4eccff',stroke-width=2)
+      circle.decay(cx=0,cy=100,r=6,fill='#284554',stroke='#4eccff',stroke-width=2)
+      circle.release(cx=0,cy=100,r=6,fill='#284554',stroke='#4eccff',stroke-width=2)
+  .fl-studio-envelope__controls
+    - var knobClasses = ['delay', 'attack', 'hold', 'decay', 'sustain', 'release'];
+    - var knobContent = ['delay', 'att', 'hold', 'dec', 'sus', 'rel'];
+    - for(var i=0; i<knobClasses.length; i++)
+      .fl-studio-envelope__control
+        div(class='knob-input fl-studio-envelope__knob envelope-knob '+knobClasses[i])
+          svg.knob-input__visual(viewBox='0 0 40 40')
+            circle.focus-indicator(cx=20,cy=20,r=18,fill='#4eccff',filter='url(#glow)')
+            circle.indicator-ring-bg(cx=20,cy=20,r=18,fill='#353b3f',stroke='#23292d')
+            path.indicator-ring(d='M20,20Z',fill='#4eccff')
+            g.dial
+              circle(cx=20,cy=20,r=16,fill='url(#grad-dial-soft-shadow)')
+              ellipse(cx=20,cy=22,rx=14,ry=14.5,fill='#242a2e',opacity=0.15)
+              circle(cx=20,cy=20,r=14,fill='url(#grad-dial-base)',stroke='#242a2e',stroke-width=1.5)
+              circle(cx=20,cy=20,r=13,fill='transparent',stroke='url(#grad-dial-highlight)',stroke-width=1.5)
+              circle.dial-highlight(cx=20,cy=20,r=14,fill='#ffffff')
+              circle.indicator-dot(cx=20,cy=30,r=1.5,fill='#4eccff')
+        .fl-studio-envelope__label= knobContent[i]
+  .fl-studio-envelope__tension
+    - var knobClasses = ['attack', 'decay', 'release'];
+    - for(var i=0; i<knobClasses.length; i++)
+      - var labelText = i!==0 ? 'tension' : ' '
+      .fl-studio-envelope__label= labelText
+      div(class='knob-input fl-studio-envelope__knob tension-knob '+knobClasses[i])
+        svg.knob-input__visual(viewBox='0 0 40 40')
+          circle.focus-indicator(cx=20,cy=20,r=18,fill='#4eccff',filter='url(#glow)')
+          circle.indicator-ring-bg(cx=20,cy=20,r=18,fill='#353b3f',stroke='#23292d')
+          path.indicator-ring(d='M20,20Z',fill='#4eccff')
+          g.dial
+            circle(cx=20,cy=20,r=16,fill='url(#grad-dial-soft-shadow)')
+            ellipse(cx=20,cy=22,rx=14,ry=14.5,fill='#242a2e',opacity=0.15)
+            circle(cx=20,cy=20,r=14,fill='url(#grad-dial-base)',stroke='#242a2e',stroke-width=1.5)
+            circle(cx=20,cy=20,r=13,fill='transparent',stroke='url(#grad-dial-highlight)',stroke-width=1.5)
+            circle.dial-highlight(cx=20,cy=20,r=14,fill='#ffffff')
+  
\ No newline at end of file
diff --git a/knob-input-component/src/script.js b/knob-input-component/src/script.js
new file mode 100644
index 0000000..082c247
--- /dev/null
+++ b/knob-input-component/src/script.js
@@ -0,0 +1,406 @@
+// TODO: add input label for screenreaders
+
+// KnobInput class
+
+class KnobInput {
+  constructor(containerElement, options) {
+    if (!options) {
+      options = {};
+    }
+    
+    // settings
+    var step = options.step || 'any';
+    var min = typeof options.min === 'number' ? options.min : 0;
+    var max = typeof options.max === 'number' ? options.max : 1;
+    this.initial = typeof options.initial === 'number' ? options.initial : 0.5 * (min + max);
+    this.visualElementClass = options.visualElementClass || 'knob-input__visual';
+    this.dragResistance = typeof options.dragResistance === 'number' ? options.dragResistance : 300;
+    this.dragResistance /= max-min;
+    this.wheelResistance = typeof options.wheelResistance === 'number' ? options.wheelResistance : 4000;
+    this.wheelResistance /= max-min;
+    this.setupVisualContext = typeof options.visualContext === 'function' ? options.visualContext : KnobInput.setupRotationContext(0, 360);
+    this.updateVisuals = typeof options.updateVisuals === 'function' ? options.updateVisuals : KnobInput.rotationUpdateFunction;
+    
+    // setup input
+    var rangeInput = document.createElement('input');
+    rangeInput.type = 'range';
+    rangeInput.step = step;
+    rangeInput.min = min;
+    rangeInput.max = max;
+    rangeInput.value = this.initial;
+    containerElement.appendChild(rangeInput);
+    
+    // elements
+    this._container = containerElement;
+    this._container.classList.add('knob-input');
+    this._input = rangeInput;
+    this._input.classList.add('knob-input__input');
+    this._visualElement = this._container.querySelector(`.${this.visualElementClass}`);
+    this._visualElement.classList.add('knob-input__visual');
+    
+    // visual context
+    this._visualContext = { element: this._visualElement };
+    this.setupVisualContext.apply(this._visualContext);
+    this.updateVisuals = this.updateVisuals.bind(this._visualContext);
+    
+    // internals
+    this._activeDrag = false;
+    
+    // define event listeners
+    // have to store bound versions of handlers so they can be removed later
+    this._handlers = {
+      inputChange: this.handleInputChange.bind(this),
+      touchStart: this.handleTouchStart.bind(this),
+      touchMove: this.handleTouchMove.bind(this),
+      touchEnd: this.handleTouchEnd.bind(this),
+      touchCancel: this.handleTouchCancel.bind(this),
+      mouseDown: this.handleMouseDown.bind(this),
+      mouseMove: this.handleMouseMove.bind(this),
+      mouseUp: this.handleMouseUp.bind(this),
+      mouseWheel: this.handleMouseWheel.bind(this),
+      doubleClick: this.handleDoubleClick.bind(this),
+      focus: this.handleFocus.bind(this),
+      blur: this.handleBlur.bind(this),
+    };
+    // add listeners
+    this._input.addEventListener('change', this._handlers.inputChange);
+    this._input.addEventListener('touchstart', this._handlers.touchStart);
+    this._input.addEventListener('mousedown', this._handlers.mouseDown);
+    this._input.addEventListener('wheel', this._handlers.mouseWheel);
+    this._input.addEventListener('dblclick', this._handlers.doubleClick);
+    this._input.addEventListener('focus', this._handlers.focus);
+    this._input.addEventListener('blur', this._handlers.blur);
+    // init
+    this.updateToInputValue();
+  }
+  
+  static setupRotationContext(minRotation, maxRotation) {
+    return function() {
+      this.minRotation = minRotation;
+      this.maxRotation = maxRotation;
+    };
+  }
+  
+  static rotationUpdateFunction(norm) {
+    this.element.style[transformProp] = `rotate(${this.maxRotation*norm-this.minRotation*(norm-1)}deg)`;
+  }
+  
+  // handlers
+  handleInputChange(evt) {
+    // console.log('input change');
+    this.updateToInputValue();
+  }
+  
+  handleTouchStart(evt) {
+    // console.log('touch start');
+    this.clearDrag();
+    evt.preventDefault();
+    var touch = evt.changedTouches.item(evt.changedTouches.length - 1);
+    this._activeDrag = touch.identifier;
+    this.startDrag(touch.clientY);
+    // drag update/end listeners
+    document.body.addEventListener('touchmove', this._handlers.touchMove);
+    document.body.addEventListener('touchend', this._handlers.touchEnd);
+    document.body.addEventListener('touchcancel', this._handlers.touchCancel);
+  }
+  
+  handleTouchMove(evt) {
+    // console.log('touch move');
+    var activeTouch = this.findActiveTouch(evt.changedTouches);
+    if (activeTouch) {
+      this.updateDrag(activeTouch.clientY);
+    } else if (!this.findActiveTouch(evt.touches)) {
+      this.clearDrag();
+    }
+  }
+  
+  handleTouchEnd(evt) {
+    // console.log('touch end');
+    var activeTouch = this.findActiveTouch(evt.changedTouches);
+    if (activeTouch) {
+      this.finalizeDrag(activeTouch.clientY);
+    }
+  }
+  
+  handleTouchCancel(evt) {
+    // console.log('touch cancel');
+    if (this.findActiveTouch(evt.changedTouches)) {
+      this.clearDrag();
+    }
+  }
+  
+  handleMouseDown(evt) {
+    // console.log('mouse down');
+    this.clearDrag();
+    evt.preventDefault();
+    this._activeDrag = true;
+    this.startDrag(evt.clientY);
+    // drag update/end listeners
+    document.body.addEventListener('mousemove', this._handlers.mouseMove);
+    document.body.addEventListener('mouseup', this._handlers.mouseUp);
+  }
+  
+  handleMouseMove(evt) {
+    // console.log('mouse move');
+    if (evt.buttons&1) {
+      this.updateDrag(evt.clientY);
+    } else {
+      this.finalizeDrag(evt.clientY);
+    }
+  }
+  
+  handleMouseUp(evt) {
+    // console.log('mouse up');
+    this.finalizeDrag(evt.clientY);
+  }
+  
+  handleMouseWheel(evt) {
+    // console.log('mouse wheel');
+    this._input.focus();
+    this.clearDrag();
+    this._prevValue = parseFloat(this._input.value);
+    this.updateFromDrag(evt.deltaY, this.wheelResistance);
+  }
+  
+  handleDoubleClick(evt) {
+    // console.log('double click');
+    this.clearDrag();
+    this._input.value = this.initial;
+    this.updateToInputValue();
+  }
+  
+  handleFocus(evt) {
+    // console.log('focus on');
+    this._container.classList.add('focus-active');
+  }
+  
+  handleBlur(evt) {
+    // console.log('focus off');
+    this._container.classList.remove('focus-active');
+  }
+  
+  // dragging
+  startDrag(yPosition) {
+    this._dragStartPosition = yPosition;
+    this._prevValue = parseFloat(this._input.value);
+    
+    this._input.focus();
+    document.body.classList.add('knob-input__drag-active');
+    this._container.classList.add('drag-active');
+  }
+  
+  updateDrag(yPosition) {
+    var diff = yPosition - this._dragStartPosition;
+    this.updateFromDrag(diff, this.dragResistance);
+    this._input.dispatchEvent(new InputEvent('change'));
+  }
+  
+  finalizeDrag(yPosition) {
+    var diff = yPosition - this._dragStartPosition;
+    this.updateFromDrag(diff, this.dragResistance);
+    this.clearDrag();
+    this._input.dispatchEvent(new InputEvent('change'));
+  }
+  
+  clearDrag() {
+    document.body.classList.remove('knob-input__drag-active');
+    this._container.classList.remove('drag-active');
+    this._activeDrag = false;
+    this._input.dispatchEvent(new InputEvent('change'));
+    // clean up event listeners
+    document.body.removeEventListener('mousemove', this._handlers.mouseMove);
+    document.body.removeEventListener('mouseup', this._handlers.mouseUp);
+    document.body.removeEventListener('touchmove', this._handlers.touchMove);
+    document.body.removeEventListener('touchend', this._handlers.touchEnd);
+    document.body.removeEventListener('touchcancel', this._handlers.touchCancel);
+  }
+  
+  updateToInputValue() {
+    var normVal = this.normalizeValue(parseFloat(this._input.value));
+    this.updateVisuals(normVal);
+  }
+  
+  updateFromDrag(dragAmount, resistance) {
+    var newVal = this.clampValue(this._prevValue - (dragAmount/resistance));
+    this._input.value = newVal;
+    this.updateVisuals(this.normalizeValue(newVal));
+  }
+  
+  // utils
+  clampValue(val) {
+    var min = parseFloat(this._input.min);
+    var max = parseFloat(this._input.max);
+    return Math.min(Math.max(val, min), max);
+  }
+  
+  normalizeValue(val) {
+    var min = parseFloat(this._input.min);
+    var max = parseFloat(this._input.max);
+    return (val-min)/(max-min);
+  }
+
+  findActiveTouch(touchList) {
+    var i, len, touch;
+    for (i=0, len=touchList.length; i<len; i++)
+      if (this._activeDrag === touchList.item(i).identifier)
+        return touchList.item(i);
+    return null;
+  }
+  
+  // public passthrough methods
+  addEventListener() { this._input.addEventListener.apply(this._input, arguments); }
+  removeEventListener() { this._input.removeEventListener.apply(this._input, arguments); }
+  focus() { this._input.focus.apply(this._input, arguments); }
+  blur() { this._input.blur.apply(this._input, arguments); }
+  
+  // getters/setters
+  get value() {
+    return parseFloat(this._input.value);
+  }
+  set value(val) {
+    this._input.value = val;
+    this.updateToInputValue();
+    this._input.dispatchEvent(new Event('change'));
+  }
+}
+
+// Utils
+
+function getSupportedPropertyName(properties) {
+  for (var i = 0; i < properties.length; i++)
+    if (typeof document.body.style[properties[i]] !== 'undefined')
+      return properties[i];
+  return null;
+}
+
+function getTransformProperty() {
+  return getSupportedPropertyName([
+    'transform', 'msTransform', 'webkitTransform', 'mozTransform', 'oTransform'
+  ]);
+}
+
+function debounce(func, wait, immediate) {
+	var timeout;
+	return function() {
+		var context = this, args = arguments;
+		var later = function() {
+			timeout = null;
+			if (!immediate) func.apply(context, args);
+		};
+		var callNow = immediate && !timeout;
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+		if (callNow) func.apply(context, args);
+	};
+};
+
+// Demo Setup - Knobs
+
+var transformProp = getTransformProperty();
+
+var envelopeKnobStartPositions = [0, 40, 75, 85, 20, 55];
+var envelopeKnobs = [...document.querySelectorAll('.fl-studio-envelope__knob.envelope-knob')];
+var envelopeKnobs = envelopeKnobs.map((el, idx) => new KnobInput(el, {
+  visualContext: function() {
+    this.indicatorRing = this.element.querySelector('.indicator-ring');
+    var ringStyle = getComputedStyle(this.element.querySelector('.indicator-ring-bg'));
+    this.r = parseFloat(ringStyle.r) - (parseFloat(ringStyle.strokeWidth) / 2);
+    this.indicatorDot = this.element.querySelector('.indicator-dot');
+    this.indicatorDot.style[`${transformProp}Origin`] = '20px 20px';
+  },
+  updateVisuals: function(norm) {
+    var theta = Math.PI*2*norm + 0.5*Math.PI;
+    var endX = this.r*Math.cos(theta) + 20;
+    var endY = this.r*Math.sin(theta) + 20;
+    // using 2 arcs rather than flags since one arc collapses if it gets near 360deg
+    this.indicatorRing.setAttribute('d',`M20,20l0,${this.r}${norm> 0.5?`A${this.r},${this.r},0,0,1,20,${20-this.r}`:''}A-${this.r},${this.r},0,0,1,${endX},${endY}Z`);
+    this.indicatorDot.style[transformProp] = `rotate(${360*norm}deg)`;
+  },
+  min: 0,
+  max: 100,
+  initial: envelopeKnobStartPositions[idx],
+}));
+
+var tensionKnobStartPositions = [0, 0, -80];
+var tensionKnobs = [...document.querySelectorAll('.fl-studio-envelope__knob.tension-knob')];
+var tensionKnobs = tensionKnobs.map((el, idx) => new KnobInput(el, {
+  visualContext: function() {
+    this.indicatorRing = this.element.querySelector('.indicator-ring');
+    var ringStyle = getComputedStyle(this.element.querySelector('.indicator-ring-bg'));
+    this.r = parseFloat(ringStyle.r) - (parseFloat(ringStyle.strokeWidth) / 2);
+  },
+  updateVisuals: function(norm) {
+    var theta = Math.PI*2*norm + 0.5*Math.PI;
+    var endX = this.r*Math.cos(theta) + 20;
+    var endY = this.r*Math.sin(theta) + 20;
+    this.indicatorRing.setAttribute('d',`M20,20l0,-${this.r}A${this.r},${this.r},0,0,${norm<0.5?0:1},${endX},${endY}Z`);
+  },
+  min: -100,
+  max: 100,
+  initial: tensionKnobStartPositions[idx],
+}));
+
+// Demo Setup - Envelope Visualization
+
+var container = document.querySelector('.envelope-visualizer');
+var enveloperVisualizer = {
+  container: container,
+  shape: container.querySelector('.envelope-shape'),
+  delay: container.querySelector('.delay'),
+  attack: container.querySelector('.attack'),
+  hold: container.querySelector('.hold'),
+  decay: container.querySelector('.decay'),
+  release: container.querySelector('.release'),
+};
+
+var updateVisualization = debounce(function(evt) {
+  var maxPtSeparation = 75;
+  var ptDelay = (maxPtSeparation * envelopeKnobs[0].value / 100);
+  var ptAttack = ptDelay + (maxPtSeparation * envelopeKnobs[1].value / 100);
+  var ptHold = ptAttack + (maxPtSeparation * envelopeKnobs[2].value / 100);
+  var ptDecay = ptHold + (maxPtSeparation * envelopeKnobs[3].value / 100) * (100 - envelopeKnobs[4].value) / 100;
+  var ptSustain = 100 - envelopeKnobs[4].value; // y value
+  var ptRelease = ptDecay + (maxPtSeparation * envelopeKnobs[5].value / 100);
+  // TODO: better tension visualization
+  var tnAttack = (ptAttack - ptDelay) * tensionKnobs[0].value / 100;
+  var tnDecay = (ptDecay - ptHold) * tensionKnobs[1].value / 100;
+  var tnRelease = (ptRelease - ptDecay) * tensionKnobs[2].value / 100;
+  enveloperVisualizer.shape.setAttribute('d',
+    `M${ptDelay},100`+
+    `C${tnAttack<0?ptDelay-tnAttack:ptDelay},100,${tnAttack>0?ptAttack-tnAttack:ptAttack},0,${ptAttack},0`+
+    `L${ptHold},0`+
+    `C${tnDecay>0?ptHold+tnDecay:ptHold},0,${tnDecay<0?ptDecay+tnDecay:ptDecay},${ptSustain},${ptDecay},${ptSustain}`+
+    `C${tnRelease>0?ptDecay+tnRelease:ptDecay},${ptSustain},${tnRelease<0?ptRelease+tnRelease:ptRelease},100,${ptRelease},100`
+  );
+  enveloperVisualizer.delay.setAttribute('cx', ptDelay);
+  enveloperVisualizer.attack.setAttribute('cx', ptAttack);
+  enveloperVisualizer.hold.setAttribute('cx', ptHold);
+  enveloperVisualizer.decay.setAttribute('cx', ptDecay);
+  enveloperVisualizer.decay.setAttribute('cy', ptSustain);
+  enveloperVisualizer.release.setAttribute('cx', ptRelease);
+}, 10);
+
+envelopeKnobs.concat(tensionKnobs)
+  .forEach(knob => { knob.addEventListener('change', updateVisualization); });
+updateVisualization();
+
+var panelElement = document.querySelector('.fl-studio-envelope');
+var panel = {
+  element: panelElement,
+  originalTransform: getComputedStyle(panelElement)[transformProp],
+  width: panelElement.getBoundingClientRect().width,
+  height: panelElement.getBoundingClientRect().height,
+};
+var resizePanel = () => {
+  var pw = (window.innerWidth - 40) / panel.width;
+  var ph = (window.innerHeight - 40) / panel.height;
+  var size = Math.min(pw, ph);
+  if (size > 1.4) {
+    size -= 0.4;
+  } else if (size > 1) {
+    size = Math.min(size, 1);
+  }
+  panel.element.style[transformProp] = `${panel.originalTransform} scale(${size})`;
+};
+window.addEventListener('resize', resizePanel);
+resizePanel();
diff --git a/knob-input-component/src/style.scss b/knob-input-component/src/style.scss
new file mode 100644
index 0000000..a548c9f
--- /dev/null
+++ b/knob-input-component/src/style.scss
@@ -0,0 +1,148 @@
+$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+
+// general
+
+* {
+  box-sizing: border-box;
+}
+html, body {
+  width: 100%;
+  height: 100%;
+}
+body {
+  padding: 1px;
+  background: radial-gradient(#1a1d22, #121318);
+}
+.defs {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+
+// FL studio knobs - demo styles
+
+$envelope-knob-size: 80px;
+$tension-knob-size: 60px;
+.fl-studio-envelope {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 600px;
+  padding: 20px;
+  overflow: hidden;
+  background: #363c40;
+  border: 2px solid #272d31;
+  box-shadow: 0 10px 70px rgba(#000000, 0.6);
+  transform: translate(-50%,-50%);
+}
+.fl-studio-envelope__visualizer {
+  height: 200px;
+  background: #21272b;
+  border: 2px solid #191f23;
+  .envelope-visualizer {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+}
+.fl-studio-envelope__controls, .fl-studio-envelope__tension {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.fl-studio-envelope__controls {
+  padding: 30px 0 0;
+}
+.fl-studio-envelope__control {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.fl-studio-envelope__label {
+  flex: 0 0 auto;
+  display: inline-block;
+  padding: 10px 0;
+  width: $envelope-knob-size;
+  color: #c1c5c5;
+  font-size: 10px;
+  font-family: 'Helvetica', sans-serif;
+  font-weight: 700;
+  text-align: center;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+// FL studio knobs - control styles
+
+.fl-studio-envelope__knob {
+  flex: 0 0 auto;
+  &.envelope-knob {
+    width: $envelope-knob-size;
+    height: $envelope-knob-size;
+  }
+  &.tension-knob {
+    padding: ($envelope-knob-size - $tension-knob-size)/2;
+    width: $envelope-knob-size;
+    height: $envelope-knob-size;
+  }
+  .knob-input__visual {
+    overflow: visible;
+  }
+  .dial {
+    transform-origin: 20px 20px;
+    transition: all 600ms $easeOutSine;
+  }
+  .dial-highlight {
+    opacity: 0;
+    transition: all 300ms $easeOutSine;
+  }
+  &:hover, &.drag-active {
+    .dial {
+      transform: scale(0.9);
+      filter: brightness(10.2);
+      transition: all 300ms $easeOutSine;
+    }
+    .dial-highlight {
+      opacity: 0.05;
+    }
+  }
+  .focus-indicator {
+    opacity: 0;
+    transition: all 300ms $easeOutSine;
+  }
+  &.focus-active {
+    .focus-indicator {
+      opacity: 0.8;
+    }
+  }
+}
+
+// Control Knob component styles
+.knob-input {
+  position: relative;
+}
+.knob-input__visual {
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+}
+.knob-input__input {
+  cursor: grab;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;  
+  transform: rotate(-90deg);
+}
+body.knob-input__drag-active {
+  &, * {
+    cursor: grabbing !important;
+  }
+}
diff --git a/kurzgesagt-style-earth-3d-zdog/README.markdown b/kurzgesagt-style-earth-3d-zdog/README.markdown
new file mode 100644
index 0000000..d3311de
--- /dev/null
+++ b/kurzgesagt-style-earth-3d-zdog/README.markdown
@@ -0,0 +1,6 @@
+# Kurzgesagt Style Earth 3D (ZDog)
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/thomaswangio/pen/jogYwq](https://codepen.io/thomaswangio/pen/jogYwq).
+
+ Kurzgesagt flat style Earth (their logo!)
+
+Stars from: https://codepen.io/nourabusoud/pen/QQNrWq
\ No newline at end of file
diff --git a/kurzgesagt-style-earth-3d-zdog/dist/index.html b/kurzgesagt-style-earth-3d-zdog/dist/index.html
new file mode 100644
index 0000000..046de7e
--- /dev/null
+++ b/kurzgesagt-style-earth-3d-zdog/dist/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Kurzgesagt Style Earth 3D (ZDog)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <canvas class="illo"></canvas>
+  <button class="reset-button">Reset</button>
+    <p class="text">Click &amp; drag to rotate</p>
+  <p class="text">Made with <a href="https://zzz.dog/" target="_blank">Z-🐶</a></p>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.com/zdog@1/dist/zdog.dist.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/kurzgesagt-style-earth-3d-zdog/dist/script.js b/kurzgesagt-style-earth-3d-zdog/dist/script.js
new file mode 100644
index 0000000..591f3d5
--- /dev/null
+++ b/kurzgesagt-style-earth-3d-zdog/dist/script.js
@@ -0,0 +1,331 @@
+/*-- Made with Zdog --*/
+
+// setting up Zdog illustration element
+const illoElem = document.querySelector('.illo');
+const illoSize = 50;
+const minWindowSize = Math.min( window.innerWidth - 20, window.innerHeight - 60 );
+const zoom = Math.floor( (minWindowSize / illoSize) * 0.75 );
+illoElem.setAttribute( 'width', illoSize * zoom );
+illoElem.setAttribute( 'height', illoSize * zoom);
+
+// Zdog math variables
+const TAU = Zdog.TAU;
+
+// boolean flag for spin 
+let isSpinning = true;
+
+// illustration base
+const illo = new Zdog.Illustration({
+  element: illoElem,
+  zoom: zoom,
+  dragRotate: true,
+  onDragStart: function() {
+    isSpinning = false;
+  },
+  rotate: { y: TAU/4 }
+});
+
+// frontside earth
+const head = new Zdog.Hemisphere({
+  addTo: illo,
+  diameter: 40,
+  stroke: false,
+  color: '#1976B5',
+});
+
+// backside earth
+new Zdog.Hemisphere({
+  addTo: head,
+  diameter: 40,
+  stroke: false,
+  color: '#105AAA',
+  rotate: { x: TAU/2 }
+});
+
+// light green lands
+const land1 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -2, y: 0, z: 5 },
+  ],
+  translate: { x: 17, y: 5, z: 4 },
+  color: "#6FCC50",
+  closed: false,
+  fill: true,
+  stroke: 7,
+  addTo: head,
+});
+land1.copy({
+  scale: { x: -1 },
+  translate: { x: -17, y: 0, z: 4 },
+})
+
+const land2 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -10, y: 0, z: 4 },
+  ],
+  translate: { x: 13, y: -10, z: 10 },
+  color: "#6FCC50",
+  closed: false,
+  fill: true,
+  stroke: 7,
+  addTo: head,
+});
+
+new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: 5, y: 0, z: 4 },
+  ],
+  translate: { x: -13, y: -10, z: 10 },
+  color: "#6FCC50",
+  closed: false,
+  fill: true,
+  stroke: 7,
+  addTo: head,
+});
+
+const land3 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -2, y: 0, z: 3 },
+  ],
+  translate: { x: 13, y: 13, z: 7 },
+  color: "#6FCC50",
+  closed: false,
+  fill: true,
+  stroke: 4,
+  addTo: head,
+});
+land3.copy({
+  scale: { x: -1 },
+  translate: { x: -13, y: 13, z: 7 },
+})
+
+const land4 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -7, y: 0, z: 3 },
+  ],
+  translate: { x: 10, y: -3, z: 16 },
+  color: "#6FCC50",
+  closed: false,
+  fill: true,
+  stroke: 4,
+  addTo: head,
+});
+land4.copy({
+  scale: { x: -1 },
+  translate: { x: -10, y: 3, z: 16 },
+})
+
+// light clouds
+const cloud1 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -2, y: 0, z: 5 },
+  ],
+  translate: { x: 20, y: 7, z: 4 },
+  color: "#fff",
+  closed: false,
+  fill: true,
+  stroke: 5,
+  addTo: head,
+});
+
+new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: 3, y: 0, z: 1 },
+  ],
+  translate: { x: -5, y: 7, z: 20 },
+  color: "#fff",
+  closed: false,
+  fill: true,
+  stroke: 5,
+  addTo: head,
+});
+
+const cloud2 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -5, y: 0, z: 10 },
+  ],
+  translate: { x: 23, y: 2, z: 4 },
+  color: "#fff",
+  closed: false,
+  fill: true,
+  stroke: 4,
+  addTo: head,
+});
+cloud2.copy({
+  scale: { x: -1 },
+  translate: { x: -23, y: 2, z: 4 },
+})
+
+const cloud3 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -2, y: 0, z: 5 },
+  ],
+  translate: { x: 20, y: -2, z: 7 },
+  color: "#fff",
+  closed: false,
+  fill: true,
+  stroke: 2,
+  addTo: head,
+});
+cloud3.copy({
+  scale: { x: -1 },
+  translate: { x: -20, y: -2, z: 7 },
+})
+
+const cloud4 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -2, y: 0, z: 5 },
+  ],
+  translate: { x: 18, y: -10, z: 7 },
+  color: "#fff",
+  closed: false,
+  fill: true,
+  stroke: 3,
+  addTo: head,
+});
+cloud4.copy({
+  scale: { x: -1 },
+  translate: { x: -18, y: -10, z: 7 },
+})
+
+// dark clouds
+const cloud5 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: 0, y: 0, z: -3 },
+  ],
+  translate: { x: 20, y: -8, z: -3 },
+  color: "#A6B3DA",
+  closed: false,
+  fill: true,
+  stroke: 3,
+  addTo: head,
+});
+cloud5.copy({
+  scale: { x: -1 },
+  translate: { x: -20, y: -8, z: -3 },
+})
+
+const cloud6 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -4, y: 0, z: -7 },
+  ],
+  translate: { x: 20, y: 0, z: -8 },
+  color: "#A6B3DA",
+  closed: false,
+  fill: true,
+  stroke: 6,
+  addTo: head,
+});
+cloud6.copy({
+  scale: { x: -1 },
+  translate: { x: -20, y: 0, z: -8 },
+})
+
+const cloud7 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -3, y: 0, z: -3 },
+  ],
+  translate: { x: 15, y: 15, z: -8 },
+  color: "#A6B3DA",
+  closed: false,
+  fill: true,
+  stroke: 3,
+  addTo: head,
+});
+cloud7.copy({
+  scale: { x: -1 },
+  translate: { x: -15, y: 15, z: -8 },
+})
+
+new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z: 0 },
+    { x: -5, y:  0, z: 0 },
+  ],
+  translate: { x: -5, y: -4, z: -18 },
+  color: "#A6B3DA",
+  fill: true,
+  stroke: 8,
+  addTo: head,
+});
+
+// dark green lands
+const land5 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z: 0 },
+    { x: 2.5, y:  0, z: 2 },
+  ],
+  translate: { x: 7, y: 7, z: -16 },
+  color: "#489268",
+  fill: true,
+  stroke: 4,
+  addTo: head,
+});
+land5.copy({
+  scale: { x: -1 },
+  translate: { x: -7, y: 12, z: -16 },
+})
+
+const land6 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z: 0 },
+    { x: 10, y:  0, z: 9 },
+  ],
+  translate: { x: 5, y: -2, z: -17 },
+  color: "#489268",
+  fill: true,
+  stroke: 8,
+  addTo: head,
+});
+
+const land7 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z: 0 },
+    { x: 2.5, y:  0, z: 5 },
+  ],
+  translate: { x: 13, y: -10, z: -10 },
+  color: "#489268",
+  fill: true,
+  stroke: 4,
+  addTo: head,
+});
+land5.copy({
+  scale: { x: -1 },
+  translate: { x: -13, y: -10, z: -10 },
+  stroke: 5,
+})
+
+
+// spinning animation
+function animate() {
+  illo.rotate.y += isSpinning ? -0.01 : 0;
+  illo.updateRenderGraph();
+  requestAnimationFrame( animate );
+}
+
+animate();
+
+// reset animation
+document.querySelector('.reset-button').onclick = function() {
+  isSpinning = false;
+  illo.rotate.set({
+    y: TAU/4,
+  });
+  
+  setTimeout(() => { 
+    isSpinning = true;
+  }, 2000);
+};
\ No newline at end of file
diff --git a/kurzgesagt-style-earth-3d-zdog/dist/style.css b/kurzgesagt-style-earth-3d-zdog/dist/style.css
new file mode 100644
index 0000000..7b09cde
--- /dev/null
+++ b/kurzgesagt-style-earth-3d-zdog/dist/style.css
@@ -0,0 +1,57 @@
+body {
+  font-family: -apple-system,system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* change this to your background color choice */
+  background: #000028;
+  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%);
+  background-size: 4px 4px, 3px 3px, 5px 5px, 3px 3px, 6px 6px, 4px 4px, 5px 5px, 4px 4px, 6px 6px, 3px 3px, 5px 5px, 4px 4px, 3px 3px, 6px 6px, 5px 5px, 4px 4px, 5px 5px, 6px 6px;
+  background-position: 20% 10%, 5% 20%, 10% 75%, 22% 35%, 30% 30%, 40% 50%, 45% 20%, 65% 20%, 85% 30%, 98% 90%, 20% 80%, 50% 80%, 75% 80%, 89% 75%, 90% 95%, 60% 70%, 65% 40%, 90% 20%;
+  background-repeat: no-repeat;
+  animation: twinkle ease-in 0.3s infinite;
+}
+
+.container {
+  margin: 100px;
+}
+
+.illo {
+  cursor: move;
+}
+
+.text {
+  text-align: center;
+  color: #8E92A2;
+}
+
+button {
+  display: block;
+  margin: auto;
+  background: #444857;
+  color: white;
+  font-size: 14px;
+  font-family: inherit;
+  border: none;
+  border-radius: 3px;
+  padding: 8px 10px;
+  cursor: pointer;
+}
+
+button:hover {
+  box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.25);
+}
+
+a {
+  color: #EA0;
+  font-weight: 700;
+}
+
+@keyframes twinkle {
+  to {
+    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%);
+  }
+}
diff --git a/kurzgesagt-style-earth-3d-zdog/license.txt b/kurzgesagt-style-earth-3d-zdog/license.txt
new file mode 100644
index 0000000..8566908
--- /dev/null
+++ b/kurzgesagt-style-earth-3d-zdog/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Thomas Wang (https://codepen.io/thomaswangio/pen/jogYwq)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/kurzgesagt-style-earth-3d-zdog/src/index.html b/kurzgesagt-style-earth-3d-zdog/src/index.html
new file mode 100644
index 0000000..a034c90
--- /dev/null
+++ b/kurzgesagt-style-earth-3d-zdog/src/index.html
@@ -0,0 +1,6 @@
+<div class="container">
+  <canvas class="illo"></canvas>
+  <button class="reset-button">Reset</button>
+    <p class="text">Click &amp; drag to rotate</p>
+  <p class="text">Made with <a href="https://zzz.dog/" target="_blank">Z-🐶</a></p>
+</div>
diff --git a/kurzgesagt-style-earth-3d-zdog/src/script.js b/kurzgesagt-style-earth-3d-zdog/src/script.js
new file mode 100644
index 0000000..47a1cb3
--- /dev/null
+++ b/kurzgesagt-style-earth-3d-zdog/src/script.js
@@ -0,0 +1,331 @@
+/*-- Made with Zdog --*/
+
+// setting up Zdog illustration element
+const illoElem = document.querySelector('.illo');
+const illoSize = 50;
+const minWindowSize = Math.min( window.innerWidth - 20, window.innerHeight - 60 );
+const zoom = Math.floor( (minWindowSize / illoSize) * 0.75 );
+illoElem.setAttribute( 'width', illoSize * zoom );
+illoElem.setAttribute( 'height', illoSize * zoom);
+
+// Zdog math variables
+const TAU = Zdog.TAU;
+
+// boolean flag for spin 
+let isSpinning = true;
+
+// illustration base
+const illo = new Zdog.Illustration({
+  element: illoElem,
+  zoom: zoom,
+  dragRotate: true,
+  onDragStart: function() {
+    isSpinning = false;
+  },
+  rotate: { y: TAU/4 }
+});
+
+// frontside earth
+const head = new Zdog.Hemisphere({
+  addTo: illo,
+  diameter: 40,
+  stroke: false,
+  color: '#1976B5',
+});
+
+// backside earth
+new Zdog.Hemisphere({
+  addTo: head,
+  diameter: 40,
+  stroke: false,
+  color: '#105AAA',
+  rotate: { x: TAU/2 }
+});
+
+// light green lands
+const land1 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -2, y: 0, z: 5 },
+  ],
+  translate: { x: 17, y: 5, z: 4 },
+  color: "#6FCC50",
+  closed: false,
+  fill: true,
+  stroke: 7,
+  addTo: head,
+});
+land1.copy({
+  scale: { x: -1 },
+  translate: { x: -17, y: 0, z: 4 },
+})
+
+const land2 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -10, y: 0, z: 4 },
+  ],
+  translate: { x: 13, y: -10, z: 10 },
+  color: "#6FCC50",
+  closed: false,
+  fill: true,
+  stroke: 7,
+  addTo: head,
+});
+
+new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: 5, y: 0, z: 4 },
+  ],
+  translate: { x: -13, y: -10, z: 10 },
+  color: "#6FCC50",
+  closed: false,
+  fill: true,
+  stroke: 7,
+  addTo: head,
+});
+
+const land3 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -2, y: 0, z: 3 },
+  ],
+  translate: { x: 13, y: 13, z: 7 },
+  color: "#6FCC50",
+  closed: false,
+  fill: true,
+  stroke: 4,
+  addTo: head,
+});
+land3.copy({
+  scale: { x: -1 },
+  translate: { x: -13, y: 13, z: 7 },
+})
+
+const land4 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -7, y: 0, z: 3 },
+  ],
+  translate: { x: 10, y: -3, z: 16 },
+  color: "#6FCC50",
+  closed: false,
+  fill: true,
+  stroke: 4,
+  addTo: head,
+});
+land4.copy({
+  scale: { x: -1 },
+  translate: { x: -10, y: 3, z: 16 },
+})
+
+// light clouds
+const cloud1 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -2, y: 0, z: 5 },
+  ],
+  translate: { x: 20, y: 7, z: 4 },
+  color: "#fff",
+  closed: false,
+  fill: true,
+  stroke: 5,
+  addTo: head,
+});
+
+new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: 3, y: 0, z: 1 },
+  ],
+  translate: { x: -5, y: 7, z: 20 },
+  color: "#fff",
+  closed: false,
+  fill: true,
+  stroke: 5,
+  addTo: head,
+});
+
+const cloud2 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -5, y: 0, z: 10 },
+  ],
+  translate: { x: 23, y: 2, z: 4 },
+  color: "#fff",
+  closed: false,
+  fill: true,
+  stroke: 4,
+  addTo: head,
+});
+cloud2.copy({
+  scale: { x: -1 },
+  translate: { x: -23, y: 2, z: 4 },
+})
+
+const cloud3 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -2, y: 0, z: 5 },
+  ],
+  translate: { x: 20, y: -2, z: 7 },
+  color: "#fff",
+  closed: false,
+  fill: true,
+  stroke: 2,
+  addTo: head,
+});
+cloud3.copy({
+  scale: { x: -1 },
+  translate: { x: -20, y: -2, z: 7 },
+})
+
+const cloud4 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -2, y: 0, z: 5 },
+  ],
+  translate: { x: 18, y: -10, z: 7 },
+  color: "#fff",
+  closed: false,
+  fill: true,
+  stroke: 3,
+  addTo: head,
+});
+cloud4.copy({
+  scale: { x: -1 },
+  translate: { x: -18, y: -10, z: 7 },
+})
+
+// dark clouds
+const cloud5 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: 0, y: 0, z: -3 },
+  ],
+  translate: { x: 20, y: -8, z: -3 },
+  color: "#A6B3DA",
+  closed: false,
+  fill: true,
+  stroke: 3,
+  addTo: head,
+});
+cloud5.copy({
+  scale: { x: -1 },
+  translate: { x: -20, y: -8, z: -3 },
+})
+
+const cloud6 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -4, y: 0, z: -7 },
+  ],
+  translate: { x: 20, y: 0, z: -8 },
+  color: "#A6B3DA",
+  closed: false,
+  fill: true,
+  stroke: 6,
+  addTo: head,
+});
+cloud6.copy({
+  scale: { x: -1 },
+  translate: { x: -20, y: 0, z: -8 },
+})
+
+const cloud7 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z:  0 },
+    { x: -3, y: 0, z: -3 },
+  ],
+  translate: { x: 15, y: 15, z: -8 },
+  color: "#A6B3DA",
+  closed: false,
+  fill: true,
+  stroke: 3,
+  addTo: head,
+});
+cloud7.copy({
+  scale: { x: -1 },
+  translate: { x: -15, y: 15, z: -8 },
+})
+
+new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z: 0 },
+    { x: -5, y:  0, z: 0 },
+  ],
+  translate: { x: -5, y: -4, z: -18 },
+  color: "#A6B3DA",
+  fill: true,
+  stroke: 8,
+  addTo: head,
+});
+
+// dark green lands
+const land5 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z: 0 },
+    { x: 2.5, y:  0, z: 2 },
+  ],
+  translate: { x: 7, y: 7, z: -16 },
+  color: "#489268",
+  fill: true,
+  stroke: 4,
+  addTo: head,
+});
+land5.copy({
+  scale: { x: -1 },
+  translate: { x: -7, y: 12, z: -16 },
+})
+
+const land6 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z: 0 },
+    { x: 10, y:  0, z: 9 },
+  ],
+  translate: { x: 5, y: -2, z: -17 },
+  color: "#489268",
+  fill: true,
+  stroke: 8,
+  addTo: head,
+});
+
+const land7 = new Zdog.Shape({
+  path: [
+    { x: 0, y:  0, z: 0 },
+    { x: 2.5, y:  0, z: 5 },
+  ],
+  translate: { x: 13, y: -10, z: -10 },
+  color: "#489268",
+  fill: true,
+  stroke: 4,
+  addTo: head,
+});
+land5.copy({
+  scale: { x: -1 },
+  translate: { x: -13, y: -10, z: -10 },
+  stroke: 5,
+})
+
+
+// spinning animation
+function animate() {
+  illo.rotate.y += isSpinning ? -0.01 : 0;
+  illo.updateRenderGraph();
+  requestAnimationFrame( animate );
+}
+
+animate();
+
+// reset animation
+document.querySelector('.reset-button').onclick = function() {
+  isSpinning = false;
+  illo.rotate.set({
+    y: TAU/4,
+  });
+  
+  setTimeout(() => { 
+    isSpinning = true;
+  }, 2000);
+};
diff --git a/kurzgesagt-style-earth-3d-zdog/src/style.scss b/kurzgesagt-style-earth-3d-zdog/src/style.scss
new file mode 100644
index 0000000..ffe6ebd
--- /dev/null
+++ b/kurzgesagt-style-earth-3d-zdog/src/style.scss
@@ -0,0 +1,97 @@
+// colors
+$space-blue: #000028;
+$star: rgba(255,255,255,0.7);
+
+body {  
+  font-family: -apple-system,system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  margin: 0;
+  padding: 0; 
+  min-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  /* change this to your background color choice */
+  background: $space-blue;
+  background-image:  
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%), 
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%), 
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%);
+  background-size: 4px 4px, 3px 3px, 5px 5px, 3px 3px, 6px 6px, 4px 4px, 5px 5px, 4px 4px, 6px 6px, 3px 3px, 5px 5px, 4px 4px, 3px 3px, 6px 6px, 5px 5px, 4px 4px, 5px 5px, 6px 6px;
+  background-position: 20% 10%, 5% 20%, 10% 75%, 22% 35%, 30% 30%, 40% 50%, 45% 20%, 65% 20%, 85% 30%, 98% 90%, 20% 80%, 50% 80%, 75% 80%, 89% 75%, 90% 95%, 60% 70%, 65% 40%, 90% 20% ;
+  background-repeat: no-repeat;
+  animation: twinkle ease-in 0.3s infinite;  
+}
+
+.container {
+  margin: 100px;
+}
+
+.illo {
+  cursor: move;
+}
+
+.text {
+  text-align: center;
+  color: #8E92A2;
+}
+
+button {
+  display: block;
+  margin: auto;
+  background: #444857;
+  color: white;
+  font-size: 14px;
+  font-family: inherit;
+  border: none;
+  border-radius: 3px;
+  padding: 8px 10px;
+  cursor: pointer;
+}
+
+button:hover {
+    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.25);
+}
+
+a {
+  color: #EA0;
+  font-weight: 700;
+}
+
+@keyframes twinkle{
+  to{
+  background-image:  
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, #fff 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%), 
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, #fff 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, #fff 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, #fff 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, #fff 20%, transparent 30%), 
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, #fff 20%, transparent 30%),
+  radial-gradient(circle, $star 20%, transparent 30%),
+  radial-gradient(circle, #fff 20%, transparent 30%),
+  radial-gradient(circle, #fff 20%, transparent 30%);  }
+}
diff --git a/lake-reflection-444-bytes-petitepatterns/README.markdown b/lake-reflection-444-bytes-petitepatterns/README.markdown
new file mode 100644
index 0000000..9d4d100
--- /dev/null
+++ b/lake-reflection-444-bytes-petitepatterns/README.markdown
@@ -0,0 +1,5 @@
+# Lake Reflection 🏞️ (444 bytes) #PetitePatterns
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/finnhvman/pen/PojJqmq](https://codepen.io/finnhvman/pen/PojJqmq).
+
+See other [PetitePatterns](https://codepen.io/collection/DRMKdB)
diff --git a/lake-reflection-444-bytes-petitepatterns/dist/index.html b/lake-reflection-444-bytes-petitepatterns/dist/index.html
new file mode 100644
index 0000000..8c79963
--- /dev/null
+++ b/lake-reflection-444-bytes-petitepatterns/dist/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Lake Reflection 🏞️ (444 bytes) #PetitePatterns</title>
+  <style>
+body {
+  margin: 0;
+}
+
+body > svg {
+  display: block;
+  width: 100vw;
+  height: 100vh;
+}
+
+.bmc {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+}
+</style><link rel='stylesheet' href='https://codepen.io/finnhvman/pen/ExgLjmg.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg xmlns="http://www.w3.org/2000/svg" style="background:linear-gradient(#135,#fbc,#135)">
+    <filter id="filter">
+        <feTurbulence type="fractalNoise" baseFrequency=".005 0" numOctaves="5"/>
+        <feDisplacementMap in="SourceAlpha" scale="99"/>
+        <feColorMatrix values="0 0 0 0 .01
+                               0 0 0 0 .02
+                               0 0 0 0 .02
+                               0 0 0 -1 1"/>
+    </filter>
+    <use href="#e" y="-100%" transform="scale(1 -1)" filter="blur(3px)"/>
+    <ellipse id="e" cx="50%" rx="63%" ry="43%" filter="url(#filter)"/>
+</svg>
+<!-- partial -->
+  <script src='https://codepen.io/finnhvman/pen/ExgLjmg.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/lake-reflection-444-bytes-petitepatterns/dist/script.js b/lake-reflection-444-bytes-petitepatterns/dist/script.js
new file mode 100644
index 0000000..d9e051b
--- /dev/null
+++ b/lake-reflection-444-bytes-petitepatterns/dist/script.js
@@ -0,0 +1,3 @@
+/* Minified (444 bytes):
+<svg xmlns="http://www.w3.org/2000/svg" style="background:linear-gradient(#135,#fbc,#135)"><filter id="b"><feTurbulence type="fractalNoise" baseFrequency=".005 0" numOctaves="5"/><feDisplacementMap in="SourceAlpha" scale="99"/><feColorMatrix values="0 0 0 0 .01 0 0 0 0 .02 0 0 0 0 .02 0 0 0 -1 1"/></filter><use href="#a" y="-100%" transform="scale(1 -1)" filter="blur(3px)"/><ellipse id="a" cx="50%" rx="63%" ry="43%" filter="url(#b)"/></svg>
+*/
\ No newline at end of file
diff --git a/lake-reflection-444-bytes-petitepatterns/dist/style.css b/lake-reflection-444-bytes-petitepatterns/dist/style.css
new file mode 100644
index 0000000..0cd74a3
--- /dev/null
+++ b/lake-reflection-444-bytes-petitepatterns/dist/style.css
@@ -0,0 +1 @@
+/* Add the seed attribute and set it to a random integer in <feTurbulence> to create your own variant! */
\ No newline at end of file
diff --git a/lake-reflection-444-bytes-petitepatterns/license.txt b/lake-reflection-444-bytes-petitepatterns/license.txt
new file mode 100644
index 0000000..d598a96
--- /dev/null
+++ b/lake-reflection-444-bytes-petitepatterns/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Bence Szabo (https://codepen.io/finnhvman/pen/PojJqmq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/lake-reflection-444-bytes-petitepatterns/src/index.html b/lake-reflection-444-bytes-petitepatterns/src/index.html
new file mode 100644
index 0000000..6a51894
--- /dev/null
+++ b/lake-reflection-444-bytes-petitepatterns/src/index.html
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="background:linear-gradient(#135,#fbc,#135)">
+    <filter id="filter">
+        <feTurbulence type="fractalNoise" baseFrequency=".005 0" numOctaves="5"/>
+        <feDisplacementMap in="SourceAlpha" scale="99"/>
+        <feColorMatrix values="0 0 0 0 .01
+                               0 0 0 0 .02
+                               0 0 0 0 .02
+                               0 0 0 -1 1"/>
+    </filter>
+    <use href="#e" y="-100%" transform="scale(1 -1)" filter="blur(3px)"/>
+    <ellipse id="e" cx="50%" rx="63%" ry="43%" filter="url(#filter)"/>
+</svg>
diff --git a/lake-reflection-444-bytes-petitepatterns/src/script.js b/lake-reflection-444-bytes-petitepatterns/src/script.js
new file mode 100644
index 0000000..d9e051b
--- /dev/null
+++ b/lake-reflection-444-bytes-petitepatterns/src/script.js
@@ -0,0 +1,3 @@
+/* Minified (444 bytes):
+<svg xmlns="http://www.w3.org/2000/svg" style="background:linear-gradient(#135,#fbc,#135)"><filter id="b"><feTurbulence type="fractalNoise" baseFrequency=".005 0" numOctaves="5"/><feDisplacementMap in="SourceAlpha" scale="99"/><feColorMatrix values="0 0 0 0 .01 0 0 0 0 .02 0 0 0 0 .02 0 0 0 -1 1"/></filter><use href="#a" y="-100%" transform="scale(1 -1)" filter="blur(3px)"/><ellipse id="a" cx="50%" rx="63%" ry="43%" filter="url(#b)"/></svg>
+*/
\ No newline at end of file
diff --git a/lake-reflection-444-bytes-petitepatterns/src/style.css b/lake-reflection-444-bytes-petitepatterns/src/style.css
new file mode 100644
index 0000000..0cd74a3
--- /dev/null
+++ b/lake-reflection-444-bytes-petitepatterns/src/style.css
@@ -0,0 +1 @@
+/* Add the seed attribute and set it to a random integer in <feTurbulence> to create your own variant! */
\ No newline at end of file
diff --git a/latent-cycles/README.markdown b/latent-cycles/README.markdown
new file mode 100644
index 0000000..e6036c8
--- /dev/null
+++ b/latent-cycles/README.markdown
@@ -0,0 +1,9 @@
+# Latent Cycles
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/teropa/pen/rdoPbG](https://codepen.io/teropa/pen/rdoPbG).
+
+ Generate a latent space of melodic loops using the Google Magenta MusicVAE model (and the ImprovRNN model), and then play the loops against each other exploring the latent harmonic possibilities.
+
+Powered by
+Magenta.js https://goo.gl/magenta/js
+TensorFlow.js https://js.tensorflow.org/
+Tone.js https://tonejs.github.io/
\ No newline at end of file
diff --git a/latent-cycles/dist/index.html b/latent-cycles/dist/index.html
new file mode 100644
index 0000000..f216c4a
--- /dev/null
+++ b/latent-cycles/dist/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Latent Cycles</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="container">
+  <div class="controls">
+    <div class="control-group">
+      <button class="tonic-left active" data-tonic="0">C</button>
+      <button class="tonic-left" data-tonic="1">C&#x266F; / D&#x266d;</button>
+      <button class="tonic-left" data-tonic="2">D</button>
+      <button class="tonic-left" data-tonic="3">E&#x266F; / E&#x266d;</button>
+      <button class="tonic-left" data-tonic="4">E</button>
+      <button class="tonic-left" data-tonic="5">F</button>
+      <button class="tonic-left" data-tonic="6">F&#x266F; / G&#x266d;</button>
+      <button class="tonic-left" data-tonic="7">G</button>
+      <button class="tonic-left" data-tonic="8">G&#x266F; / A&#x266d;</button>
+      <button class="tonic-left" data-tonic="9">A</button>
+      <button class="tonic-left" data-tonic="10">A&#x266F; / B&#x266d;</button>
+      <button class="tonic-left" data-tonic="11">B</button>
+    </div>
+    <div class="control-group">
+      <button class="chord-left active" data-chord="major">Major</button>
+      <button class="chord-left" data-chord="minor">Minor</button>
+      <button class="chord-left" data-chord="major7th">Major 7th</button>
+      <button class="chord-left" data-chord="minor7th">Minor 7th</button>
+      <button class="chord-left" data-chord="dominant7th">Dominant 7th</button>
+      <button class="chord-left" data-chord="sus2">Sus2</button>
+      <button class="chord-left" data-chord="sus4">Sus4</button>
+    </div>
+  </div>
+  <svg id="vis" viewBox="0 0 1000 1000">
+    <defs>
+      <radialGradient id="halo">
+        <stop offset="0%" stop-color="rgba(255, 255, 255, 0.5)" />
+        <stop offset="95%" stop-color="rgba(255, 255, 255, 0.5)" />
+        <stop offset="100%" stop-color="rgba(255, 255, 255, 0)" />
+      </radialGradient>
+    </defs>
+    <g id="vis-halos"></g>
+    <g id="vis-elements"></g>
+  </svg>
+  <div class="controls">
+    <div class="control-group">
+      <button class="tonic-right active" data-tonic="0">C</button>
+      <button class="tonic-right" data-tonic="1">C&#x266F; / D&#x266d;</button>
+      <button class="tonic-right" data-tonic="2">D</button>
+      <button class="tonic-right" data-tonic="3">E&#x266F; / E&#x266d;</button>
+      <button class="tonic-right" data-tonic="4">E</button>
+      <button class="tonic-right" data-tonic="5">F</button>
+      <button class="tonic-right" data-tonic="6">F&#x266F; / G&#x266d;</button>
+      <button class="tonic-right" data-tonic="7">G</button>
+      <button class="tonic-right" data-tonic="8">G&#x266F; / A&#x266d;</button>
+      <button class="tonic-right" data-tonic="9">A</button>
+      <button class="tonic-right" data-tonic="10">A&#x266F; / B&#x266d;</button>
+      <button class="tonic-right" data-tonic="11">B</button>
+    </div>
+    <div class="control-group">
+      <button class="chord-right active" data-chord="major">Major</button>
+      <button class="chord-right" data-chord="minor">Minor</button>
+      <button class="chord-right" data-chord="major7th">Major 7th</button>
+      <button class="chord-right" data-chord="minor7th">Minor 7th</button>
+      <button class="chord-right" data-chord="dominant7th">Dominant 7th</button>
+      <button class="chord-right" data-chord="sus2">Sus2</button>
+      <button class="chord-right" data-chord="sus4">Sus4</button>
+    </div>
+  </div>
+</div>
+<div id="output-controls">
+  <div class="output-control midi-required">
+    <label for="output-selector">Output</label>
+    <select id="output-selector"></select>
+  </div>
+  <div class="output-control">
+    <label for="tempo-source-selector">Tempo</label>
+    <select id="tempo-source-selector" class="midi-required"></select>
+    <input id="tempo-selector" type="range" min="10" max="200" step="1" value="90">
+    <span id="tempo-label">90</span>
+  </div>
+  <p>MIDI outputs & clock <a href="https://caniuse.com/#feat=midi">supported on Chrome only</a>.</p>
+</div>
+<div id="loading">Loading models&hellip;</div>
+<div id="generating" style="display: none">Generating&hellip;</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/@magenta/music@1.1.11/dist/magentamusic.min.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/webmidi@2.0.0/webmidi.min.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/web-animations-js@2.3.1/web-animations.min.js'></script>
+<script src='https://cdn.rawgit.com/tambien/StartAudioContext/8da8637e/StartAudioContext.js'></script>
+<script src='https://cdn.rawgit.com/danigb/tonal/9b6b1663/dist/tonal.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/latent-cycles/dist/script.js b/latent-cycles/dist/script.js
new file mode 100644
index 0000000..4b70cac
--- /dev/null
+++ b/latent-cycles/dist/script.js
@@ -0,0 +1,612 @@
+const MIN_NOTE = 48;
+const MAX_NOTE = 83;
+const SEQ_LENGTH = 32;
+const HUMANIZE_TIMING = 0.0085;
+const N_INTERPOLATIONS = 10;
+const CHORD_SYMBOLS = {
+  major: 'M',
+  minor: 'm',
+  major7th: 'M7',
+  minor7th: 'm7',
+  dominant7th: '7',
+  sus2: 'Msus2',
+  sus4: 'Msus4' };
+
+const SAMPLE_SCALE = [
+'C3',
+'D#3',
+'F#3',
+'A3',
+'C4',
+'D#4',
+'F#4',
+'A4',
+'C5',
+'D#5',
+'F#5',
+'A5'];
+
+
+let Tone = mm.Player.tone;
+
+Tone.Transport.bpm.value = 90;
+
+let vae = new mm.MusicVAE(
+'https://storage.googleapis.com/download.magenta.tensorflow.org/tfjs_checkpoints/music_vae/mel_2bar_small');
+
+let rnn = new mm.MusicRNN(
+'https://storage.googleapis.com/download.magenta.tensorflow.org/tfjs_checkpoints/music_rnn/chord_pitches_improv');
+
+
+let reverb = new Tone.Convolver(
+'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/hm2_000_ortf_48k.mp3').
+toMaster();
+reverb.wet.value = 0.15;
+let samplers = [
+{
+  high: buildSampler(
+  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/marimba-classic-').
+  connect(new Tone.Panner(-0.4).connect(reverb)),
+  mid: buildSampler(
+  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/marimba-classic-mid-').
+  connect(new Tone.Panner(-0.4).connect(reverb)),
+  low: buildSampler(
+  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/marimba-classic-low-').
+  connect(new Tone.Panner(-0.4).connect(reverb)) },
+
+{
+  high: buildSampler(
+  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/xylophone-dark-').
+  connect(new Tone.Panner(0.4).connect(reverb)),
+  mid: buildSampler(
+  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/xylophone-dark-mid-').
+  connect(new Tone.Panner(0.4).connect(reverb)),
+  low: buildSampler(
+  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/xylophone-dark-low-').
+  connect(new Tone.Panner(0.4).connect(reverb)) }];
+
+
+
+let sixteenth = Tone.Time('16n').toSeconds();
+let quarter = Tone.Time('4n').toSeconds();
+let temperature = 1.1;
+let loadingIndicator = document.querySelector('#loading');
+let generatingIndicator = document.querySelector('#generating');
+let container = document.querySelector('#vis-elements');
+let haloContainer = document.querySelector('#vis-halos');
+let tonicLeftButtons = document.querySelectorAll('.tonic-left');
+let tonicRightButtons = document.querySelectorAll('.tonic-right');
+let chordLeftButtons = document.querySelectorAll('.chord-left');
+let chordRightButtons = document.querySelectorAll('.chord-right');
+let tempoSelector = document.querySelector('#tempo-selector');
+let tempoLabel = document.querySelector('#tempo-label');
+let midiRequiredStuff = Array.from(document.querySelectorAll('.midi-required'));
+let outputSelector = document.querySelector('#output-selector');
+let tempoSourceSelector = document.querySelector('#tempo-source-selector');
+
+let currentStep = 0;
+let sequences = [];
+let mouseDown = false;
+let chordLeft = CHORD_SYMBOLS['major'],
+chordRight = CHORD_SYMBOLS['major'];
+let tonicLeft = 0,
+tonicRight = 0;
+let currentMidiOutput;
+let transportPlayerId = null;
+
+function buildSampler(urlPrefix) {
+  return new Tone.Sampler(
+  _.fromPairs(
+  SAMPLE_SCALE.map(n => [
+  n,
+  new Tone.Buffer(`${urlPrefix}${n.toLowerCase().replace('#', 's')}.mp3`)])));
+
+
+
+}
+
+function generateSeq(chord, startNotes) {
+  let seedSeq = toNoteSequence(startNotes);
+  return rnn.continueSequence(seedSeq, SEQ_LENGTH, temperature, [chord]);
+}
+
+function toNoteSequence(seq) {
+  let notes = [];
+  for (let i = 0; i < seq.length; i++) {
+    if (seq[i] === -1 && notes.length) {
+      _.last(notes).endTime = i * 0.5;
+    } else if (seq[i] !== -2 && seq[i] !== -1) {
+      if (notes.length && !_.last(notes).endTime) {
+        _.last(notes).endTime = i * 0.5;
+      }
+      notes.push({
+        pitch: seq[i],
+        startTime: i * 0.5 });
+
+    }
+  }
+  if (notes.length && !_.last(notes).endTime) {
+    _.last(notes).endTime = seq.length * 0.5;
+  }
+  return mm.sequences.quantizeNoteSequence(
+  {
+    ticksPerQuarter: 220,
+    totalTime: seq.length * 0.5,
+    quantizationInfo: {
+      stepsPerQuarter: 1 },
+
+    timeSignatures: [
+    {
+      time: 0,
+      numerator: 4,
+      denominator: 4 }],
+
+
+    tempos: [
+    {
+      time: 0,
+      qpm: 120 }],
+
+
+    notes },
+
+  1);
+
+}
+
+function isValidNote(note, forgive = 0) {
+  return note <= MAX_NOTE + forgive && note >= MIN_NOTE - forgive;
+}
+
+function octaveShift(note) {
+  let shift = MAX_NOTE - note > note - MIN_NOTE ? 12 : -12;
+  let delta = 0;
+  while (isValidNote(note + delta + shift)) {
+    delta += shift;
+  }
+  return note + delta;
+}
+
+function transposeIntoRange(note) {
+  while (note > MAX_NOTE) {
+    note -= 12;
+  }
+  while (note < MIN_NOTE) {
+    note += 12;
+  }
+  return note;
+}
+
+function mountChord(tonic, chord) {
+  return Tone.Frequency(tonic, 'midi').toNote() + chord;
+}
+
+function restPad(note) {
+  if (Math.random() < 0.6) {
+    return [note, -2];
+  } else if (Math.random() < 0.8) {
+    return [note];
+  } else {
+    return [note, -2, -2];
+  }
+}
+
+function playStep(time = Tone.now() - Tone.context.lookAhead) {
+  let notesToPlay = distributeNotesToPlay(
+  collectNotesToPlay(currentStep % SEQ_LENGTH));
+
+  for (let { delay, notes } of notesToPlay) {
+    let voice = 0;
+    let stepSamplers = _.shuffle(samplers);
+    for (let { pitch, path, halo } of notes) {
+      let freq = Tone.Frequency(pitch, 'midi');
+      let playTime = time + delay + HUMANIZE_TIMING * Math.random();
+      let velocity;
+      if (delay === 0) velocity = 'high';else
+      if (delay === sixteenth / 2) velocity = 'mid';else
+      velocity = 'low';
+
+      if (currentMidiOutput) {
+        let delay = (playTime - Tone.now() + Tone.context.lookAhead) * 1000;
+        let duration = Tone.Time('16n').toMilliseconds();
+        let midiVelocity = { high: 1, mid: 0.75, low: 0.5 }[velocity];
+        currentMidiOutput.playNote(freq.toNote(), 'all', {
+          time: delay > 0 ? `+${delay}` : WebMidi.now,
+          velocity: midiVelocity,
+          duration });
+
+      } else {
+        stepSamplers[voice++ % stepSamplers.length][velocity].triggerAttack(
+        freq,
+        playTime);
+
+      }
+      Tone.Draw.schedule(() => animatePlay(path, halo), playTime);
+    }
+  }
+  currentStep++;
+}
+
+function collectNotesToPlay(step) {
+  let notesToPlay = [];
+  for (let seq of sequences) {
+    if (!seq.on) continue;
+    if (seq.notes.has(step)) {
+      notesToPlay.push(seq.notes.get(step));
+    }
+  }
+  return _.shuffle(notesToPlay);
+}
+
+function distributeNotesToPlay(notes) {
+  let subdivisions = [
+  { delay: 0, notes: [] },
+  { delay: sixteenth / 2, notes: [] },
+  { delay: sixteenth, notes: [] },
+  { delay: sixteenth * 3 / 2, notes: [] }];
+
+  if (notes.length) {
+    subdivisions[0].notes.push(notes.pop());
+  }
+  if (notes.length) {
+    subdivisions[2].notes.push(notes.pop());
+  }
+  while (notes.length && Math.random() < Math.min(notes.length, 6) / 10) {
+    let rnd = Math.random();
+    let subdivision;
+    if (rnd < 0.4) {
+      subdivision = 0;
+    } else if (rnd < 0.6) {
+      subdivision = 1;
+    } else if (rnd < 0.8) {
+      subdivision = 2;
+    } else {
+      subdivision = 3;
+    }
+    subdivisions[subdivision].notes.push(notes.pop());
+  }
+  return subdivisions;
+}
+
+function animatePlay(pathEl, haloEl) {
+  pathEl.animate([{ fill: 'white' }, { fill: '#e91e63' }], {
+    duration: quarter * 1000,
+    easing: 'ease-out' });
+
+  haloEl.animate([{ opacity: 1 }, { opacity: 0 }], {
+    duration: quarter * 1000,
+    easing: 'ease-out' });
+
+}
+
+function toggleSeq(seqObj) {
+  if (seqObj.on) {
+    seqObj.on = false;
+    seqObj.group.setAttribute('class', '');
+  } else {
+    seqObj.on = true;
+    seqObj.group.setAttribute('class', 'on');
+  }
+}
+
+function toggleHover(seqObj, on) {
+  let cls = seqObj.group.getAttribute('class') || '';
+  if (on && cls.indexOf('hover') < 0) {
+    seqObj.group.setAttribute('class', cls + ' hover');
+  } else if (!on && cls.indexOf('hover') >= 0) {
+    seqObj.group.setAttribute('class', cls.replace('hover', ''));
+  }
+}
+
+function buildSlice(centerX, centerY, startAngle, endAngle, radius) {
+  let startX = centerX + Math.cos(startAngle) * radius;
+  let startY = centerY + Math.sin(startAngle) * radius;
+  let endX = centerX + Math.cos(endAngle) * radius;
+  let endY = centerY + Math.sin(endAngle) * radius;
+  let pathString = `M ${centerX} ${centerY} L ${startX} ${startY} A ${radius} ${radius} 0 0 1 ${endX} ${endY} Z`;
+  let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.setAttribute('d', pathString);
+  path.setAttribute('style', `transform-origin: ${centerX}px ${centerY}px`);
+  return path;
+}
+
+function buildSeed(chord) {
+  let notes = Tonal.Chord.notes(chord).
+  map(n => Tonal.Note.midi(n)).
+  map(transposeIntoRange);
+  return _.flatMap(_.shuffle(notes), restPad);
+}
+
+function generateSpace() {
+  let previouslyOn = _.fromPairs(sequences.map((s, idx) => [idx, s.on]));
+  let chords = [
+  mountChord(octaveShift(MIN_NOTE + tonicLeft), chordLeft),
+  mountChord(MIN_NOTE + tonicLeft, chordLeft),
+  mountChord(octaveShift(MIN_NOTE + tonicRight), chordRight),
+  mountChord(MIN_NOTE + tonicRight, chordRight)];
+
+  return Promise.all([
+  generateSeq(chords[0], buildSeed(chords[0])),
+  generateSeq(chords[1], buildSeed(chords[1])),
+  generateSeq(chords[2], buildSeed(chords[2])),
+  generateSeq(chords[3], buildSeed(chords[3]))]).
+
+  then(noteSeqs => vae.interpolate(noteSeqs, N_INTERPOLATIONS)).
+  then(res => {
+    while (container.firstChild) {
+      container.firstChild.remove();
+    }
+    while (haloContainer.firstChild) {
+      haloContainer.firstChild.remove();
+    }
+    let cellSize = 1000 / N_INTERPOLATIONS;
+    let margin = cellSize / 30;
+
+    sequences = res.map((noteSeq, idx) => {
+      let row = Math.floor(idx / N_INTERPOLATIONS);
+      let col = idx - row * N_INTERPOLATIONS;
+      let centerX = (col + 0.5) * cellSize + margin;
+      let centerY = (row + 0.5) * cellSize + margin;
+      let maxInterval = MAX_NOTE;
+      let maxRadius = cellSize / 2 - 2 * margin;
+
+      let group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      if (previouslyOn[idx]) {
+        group.setAttribute('class', 'on');
+      }
+      group.style.transformOrigin = `${centerX}px ${centerY}px`;
+      group.style.transform = 'scale(0)';
+      group.animate([{ transform: 'scale(0)' }, { transform: 'scale(1)' }], {
+        duration: 200,
+        delay:
+        (N_INTERPOLATIONS / 2 - Math.abs(row - N_INTERPOLATIONS / 2)) * 25 +
+        (N_INTERPOLATIONS / 2 - Math.abs(col - N_INTERPOLATIONS / 2)) * 25,
+        fill: 'forwards' });
+
+      container.appendChild(group);
+
+      let halo = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'circle');
+
+      halo.setAttribute('class', 'halo');
+      halo.setAttribute('fill', 'url(#halo');
+      halo.setAttribute('cx', centerX);
+      halo.setAttribute('cy', centerY);
+      halo.setAttribute('r', maxRadius + 2);
+      haloContainer.appendChild(halo);
+
+      let notes = new Map();
+      for ({ pitch, quantizedStartStep, quantizedEndStep } of noteSeq.notes) {
+        if (!isValidNote(pitch, 4)) {
+          continue;
+        }
+        let relPitch = (maxInterval - (pitch - MIN_NOTE)) / maxInterval;
+        let radius = relPitch * maxRadius;
+        let startAngle = quantizedStartStep / SEQ_LENGTH * Math.PI * 2;
+        let endAngle = quantizedEndStep / SEQ_LENGTH * Math.PI * 2;
+
+        let path = buildSlice(centerX, centerY, startAngle, endAngle, radius);
+        path.setAttribute('class', 'note');
+        group.appendChild(path);
+        notes.set(quantizedStartStep, {
+          pitch,
+          path,
+          halo });
+
+      }
+
+      let pointerArea = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'rect');
+
+      pointerArea.setAttribute('x', col * cellSize);
+      pointerArea.setAttribute('y', row * cellSize);
+      pointerArea.setAttribute('width', cellSize);
+      pointerArea.setAttribute('height', cellSize);
+      pointerArea.setAttribute('class', 'pointer-area');
+      group.appendChild(pointerArea);
+
+      let seqObj = { notes, group, on: previouslyOn[idx] };
+
+      pointerArea.addEventListener('mousedown', () => toggleSeq(seqObj));
+      pointerArea.addEventListener('mouseover', () => {
+        toggleHover(seqObj, true);
+        mouseDown && toggleSeq(seqObj);
+      });
+      pointerArea.addEventListener('mouseout', () =>
+      toggleHover(seqObj, false));
+
+      return seqObj;
+    });
+  });
+}
+
+function regenerateSpace() {
+  // Pause Tone timeline while regenerating so events don't pile up if it's laggy.
+  Tone.Transport.pause();
+  generatingIndicator.style.display = 'flex';
+  setTimeout(() => {
+    generateSpace().then(() => {
+      generatingIndicator.style.display = 'none';
+      setTimeout(() => Tone.Transport.start(), 0);
+    });
+  }, 0);
+}
+
+function startTransportPlay() {
+  if (_.isNull(transportPlayerId)) {
+    transportPlayerId = Tone.Transport.scheduleRepeat(playStep, '16n');
+  }
+}
+
+function stopTransportPlay() {
+  if (!_.isNull(transportPlayerId)) {
+    Tone.Transport.clear(transportPlayerId);
+    transportPlayerId = null;
+  }
+}
+
+Promise.all([
+rnn.initialize(),
+vae.initialize(),
+new Promise(res => Tone.Buffer.on('load', res))]).
+
+then(generateSpace).
+then(() => loadingIndicator.style.display = 'none').
+then(() => {
+  startTransportPlay();
+  Tone.Transport.start();
+});
+
+document.documentElement.addEventListener(
+'mousedown',
+() => mouseDown = true);
+
+document.documentElement.addEventListener('mouseup', () => mouseDown = false);
+
+tonicLeftButtons.forEach((el) =>
+el.addEventListener('click', evt => {
+  tonicLeft = +evt.target.dataset.tonic;
+  tonicLeftButtons.forEach((b) =>
+  b.classList.toggle('active', b === evt.target));
+
+  regenerateSpace();
+}));
+
+tonicRightButtons.forEach((el) =>
+el.addEventListener('click', evt => {
+  tonicRight = +evt.target.dataset.tonic;
+  tonicRightButtons.forEach((b) =>
+  b.classList.toggle('active', b === evt.target));
+
+  regenerateSpace();
+}));
+
+chordLeftButtons.forEach((el) =>
+el.addEventListener('click', evt => {
+  chordLeft = CHORD_SYMBOLS[evt.target.dataset.chord];
+  chordLeftButtons.forEach((b) =>
+  b.classList.toggle('active', b === evt.target));
+
+  regenerateSpace();
+}));
+
+chordRightButtons.forEach((el) =>
+el.addEventListener('click', evt => {
+  chordRight = CHORD_SYMBOLS[evt.target.dataset.chord];
+  chordRightButtons.forEach((b) =>
+  b.classList.toggle('active', b === evt.target));
+
+  regenerateSpace();
+}));
+
+
+tempoSelector.addEventListener('input', () => {
+  Tone.Transport.bpm.value = +tempoSelector.value;
+  tempoLabel.innerText = tempoSelector.value;
+});
+
+WebMidi.enable(err => {
+  if (err) {
+    console.log(err);
+  } else {
+    midiRequiredStuff.forEach(el => el.classList.remove('midi-required'));
+
+    function updateSelectors() {
+      while (outputSelector.firstChild) {
+        outputSelector.firstChild.remove();
+      }
+
+      let internalOutputOption = document.createElement('option');
+      internalOutputOption.value = 'internal';
+      internalOutputOption.textContent = 'Internal';
+      internalOutputOption.checked = true;
+      outputSelector.appendChild(internalOutputOption);
+      for (let output of WebMidi.outputs) {
+        let outputOption = document.createElement('option');
+        outputOption.value = output.id;
+        outputOption.textContent = output.name;
+        outputSelector.appendChild(outputOption);
+      }
+      onOutputChange();
+
+      while (tempoSourceSelector.firstChild) {
+        tempoSourceSelector.firstChild.remove();
+      }
+      let internalTempoSourceOption = document.createElement('option');
+      internalTempoSourceOption.value = 'internal';
+      internalTempoSourceOption.textContent = 'Internal';
+      tempoSourceSelector.appendChild(internalTempoSourceOption);
+      for (let input of WebMidi.inputs) {
+        let tempoSourceOption = document.createElement('option');
+        tempoSourceOption.value = input.id;
+        tempoSourceOption.textContent = `MIDI clock from ${input.name}`;
+        tempoSourceSelector.appendChild(tempoSourceOption);
+      }
+      onTempoSourceChange();
+    }
+
+    function onOutputChange() {
+      let outputId = outputSelector.value;
+      if (outputId === 'internal') {
+        currentMidiOutput = null;
+      } else {
+        currentMidiOutput = WebMidi.getOutputById(outputId);
+      }
+    }
+
+    let midiClockTick = 0;
+
+    function incomingMidiClockStart() {
+      currentStep = 0;
+      midiClockTick = 0;
+    }
+
+    function incomingMidiClockStop() {
+      currentStep = 0;
+      midiClockTick = 0;
+    }
+
+    function incomingMidiClockTick() {
+      if (midiClockTick++ % 6 === 0) {
+        playStep();
+      }
+    }
+
+    function onTempoSourceChange() {
+      let inputId = tempoSourceSelector.value;
+      if (inputId === 'internal') {
+        for (let input of WebMidi.inputs) {
+          input.removeListener('start', 'all', incomingMidiClockStart);
+          input.removeListener('stop', 'all', incomingMidiClockStop);
+          input.removeListener('clock', 'all', incomingMidiClockTick);
+        }
+        startTransportPlay();
+
+        tempoSelector.disabled = false;
+        tempoSelector.style.opacity = 1;
+        tempoLabel.style.opacity = 1;
+      } else {
+        stopTransportPlay();
+        let input = WebMidi.getInputById(inputId);
+        input.addListener('start', 'all', incomingMidiClockStart);
+        input.addListener('stop', 'all', incomingMidiClockStop);
+        input.addListener('clock', 'all', incomingMidiClockTick);
+
+        tempoSelector.disabled = true;
+        tempoSelector.style.opacity = 0;
+        tempoLabel.style.opacity = 0;
+      }
+    }
+
+    updateSelectors();
+
+    WebMidi.addListener('connected', updateSelectors);
+    WebMidi.addListener('disconnected', updateSelectors);
+    outputSelector.addEventListener('change', onOutputChange);
+    tempoSourceSelector.addEventListener('change', onTempoSourceChange);
+  }
+});
+
+StartAudioContext(Tone.context, container);
\ No newline at end of file
diff --git a/latent-cycles/dist/style.css b/latent-cycles/dist/style.css
new file mode 100644
index 0000000..4b0d546
--- /dev/null
+++ b/latent-cycles/dist/style.css
@@ -0,0 +1,109 @@
+html,
+body,
+#container {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(0.25turn, #752525, #050505, #252575);
+  color: #f3f3f3;
+  font-family: sans-serif;
+}
+
+#container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
+}
+#vis {
+  width: 95vmin;
+  height: 95vmin;
+  overflow: visible;
+}
+
+.halo {
+  opacity: 0;
+}
+.note {
+  stroke-width: 0.5;
+  stroke: #151515;
+  fill: rgba(255, 255, 255, 1);
+  opacity: 0.4;
+}
+.hover .note {
+  opacity: 0.7;
+}
+.on .note {
+  fill: #e91e63;
+  opacity: 1;
+}
+
+.pointer-area {
+  stroke: none;
+  opacity: 0;
+}
+
+.controls {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+.control-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.controls button {
+  width: 100%;
+  min-width: 7vw;
+  height: 4vh;
+  margin: 2px;
+  background: none;
+  color: white;
+  border: 1px solid white;
+}
+.controls button:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+.controls button.active {
+  background: white;
+  color: black;
+}
+
+#output-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.output-control {
+  padding: 10px;
+}
+.output-control label {
+  padding: 0 5px;
+  font-size: 14px;
+}
+#tempo-label {
+  display: inline-block;
+  width: 30px;
+}
+.midi-required {
+  display: none;
+}
+
+#generating,
+#loading {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 32px;
+}
diff --git a/latent-cycles/license.txt b/latent-cycles/license.txt
new file mode 100644
index 0000000..412cba4
--- /dev/null
+++ b/latent-cycles/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Tero Parviainen (https://codepen.io/teropa/pen/rdoPbG)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/latent-cycles/src/index.html b/latent-cycles/src/index.html
new file mode 100644
index 0000000..f59bff1
--- /dev/null
+++ b/latent-cycles/src/index.html
@@ -0,0 +1,78 @@
+<div id="container">
+  <div class="controls">
+    <div class="control-group">
+      <button class="tonic-left active" data-tonic="0">C</button>
+      <button class="tonic-left" data-tonic="1">C&#x266F; / D&#x266d;</button>
+      <button class="tonic-left" data-tonic="2">D</button>
+      <button class="tonic-left" data-tonic="3">E&#x266F; / E&#x266d;</button>
+      <button class="tonic-left" data-tonic="4">E</button>
+      <button class="tonic-left" data-tonic="5">F</button>
+      <button class="tonic-left" data-tonic="6">F&#x266F; / G&#x266d;</button>
+      <button class="tonic-left" data-tonic="7">G</button>
+      <button class="tonic-left" data-tonic="8">G&#x266F; / A&#x266d;</button>
+      <button class="tonic-left" data-tonic="9">A</button>
+      <button class="tonic-left" data-tonic="10">A&#x266F; / B&#x266d;</button>
+      <button class="tonic-left" data-tonic="11">B</button>
+    </div>
+    <div class="control-group">
+      <button class="chord-left active" data-chord="major">Major</button>
+      <button class="chord-left" data-chord="minor">Minor</button>
+      <button class="chord-left" data-chord="major7th">Major 7th</button>
+      <button class="chord-left" data-chord="minor7th">Minor 7th</button>
+      <button class="chord-left" data-chord="dominant7th">Dominant 7th</button>
+      <button class="chord-left" data-chord="sus2">Sus2</button>
+      <button class="chord-left" data-chord="sus4">Sus4</button>
+    </div>
+  </div>
+  <svg id="vis" viewBox="0 0 1000 1000">
+    <defs>
+      <radialGradient id="halo">
+        <stop offset="0%" stop-color="rgba(255, 255, 255, 0.5)" />
+        <stop offset="95%" stop-color="rgba(255, 255, 255, 0.5)" />
+        <stop offset="100%" stop-color="rgba(255, 255, 255, 0)" />
+      </radialGradient>
+    </defs>
+    <g id="vis-halos"></g>
+    <g id="vis-elements"></g>
+  </svg>
+  <div class="controls">
+    <div class="control-group">
+      <button class="tonic-right active" data-tonic="0">C</button>
+      <button class="tonic-right" data-tonic="1">C&#x266F; / D&#x266d;</button>
+      <button class="tonic-right" data-tonic="2">D</button>
+      <button class="tonic-right" data-tonic="3">E&#x266F; / E&#x266d;</button>
+      <button class="tonic-right" data-tonic="4">E</button>
+      <button class="tonic-right" data-tonic="5">F</button>
+      <button class="tonic-right" data-tonic="6">F&#x266F; / G&#x266d;</button>
+      <button class="tonic-right" data-tonic="7">G</button>
+      <button class="tonic-right" data-tonic="8">G&#x266F; / A&#x266d;</button>
+      <button class="tonic-right" data-tonic="9">A</button>
+      <button class="tonic-right" data-tonic="10">A&#x266F; / B&#x266d;</button>
+      <button class="tonic-right" data-tonic="11">B</button>
+    </div>
+    <div class="control-group">
+      <button class="chord-right active" data-chord="major">Major</button>
+      <button class="chord-right" data-chord="minor">Minor</button>
+      <button class="chord-right" data-chord="major7th">Major 7th</button>
+      <button class="chord-right" data-chord="minor7th">Minor 7th</button>
+      <button class="chord-right" data-chord="dominant7th">Dominant 7th</button>
+      <button class="chord-right" data-chord="sus2">Sus2</button>
+      <button class="chord-right" data-chord="sus4">Sus4</button>
+    </div>
+  </div>
+</div>
+<div id="output-controls">
+  <div class="output-control midi-required">
+    <label for="output-selector">Output</label>
+    <select id="output-selector"></select>
+  </div>
+  <div class="output-control">
+    <label for="tempo-source-selector">Tempo</label>
+    <select id="tempo-source-selector" class="midi-required"></select>
+    <input id="tempo-selector" type="range" min="10" max="200" step="1" value="90">
+    <span id="tempo-label">90</span>
+  </div>
+  <p>MIDI outputs & clock <a href="https://caniuse.com/#feat=midi">supported on Chrome only</a>.</p>
+</div>
+<div id="loading">Loading models&hellip;</div>
+<div id="generating" style="display: none">Generating&hellip;</div>
\ No newline at end of file
diff --git a/latent-cycles/src/script.babel b/latent-cycles/src/script.babel
new file mode 100644
index 0000000..a980081
--- /dev/null
+++ b/latent-cycles/src/script.babel
@@ -0,0 +1,612 @@
+const MIN_NOTE = 48;
+const MAX_NOTE = 83;
+const SEQ_LENGTH = 32;
+const HUMANIZE_TIMING = 0.0085;
+const N_INTERPOLATIONS = 10;
+const CHORD_SYMBOLS = {
+  major: 'M',
+  minor: 'm',
+  major7th: 'M7',
+  minor7th: 'm7',
+  dominant7th: '7',
+  sus2: 'Msus2',
+  sus4: 'Msus4'
+};
+const SAMPLE_SCALE = [
+  'C3',
+  'D#3',
+  'F#3',
+  'A3',
+  'C4',
+  'D#4',
+  'F#4',
+  'A4',
+  'C5',
+  'D#5',
+  'F#5',
+  'A5'
+];
+
+let Tone = mm.Player.tone;
+
+Tone.Transport.bpm.value = 90;
+
+let vae = new mm.MusicVAE(
+  'https://storage.googleapis.com/download.magenta.tensorflow.org/tfjs_checkpoints/music_vae/mel_2bar_small'
+);
+let rnn = new mm.MusicRNN(
+  'https://storage.googleapis.com/download.magenta.tensorflow.org/tfjs_checkpoints/music_rnn/chord_pitches_improv'
+);
+
+let reverb = new Tone.Convolver(
+  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/hm2_000_ortf_48k.mp3'
+).toMaster();
+reverb.wet.value = 0.15;
+let samplers = [
+  {
+    high: buildSampler(
+      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/marimba-classic-'
+    ).connect(new Tone.Panner(-0.4).connect(reverb)),
+    mid: buildSampler(
+      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/marimba-classic-mid-'
+    ).connect(new Tone.Panner(-0.4).connect(reverb)),
+    low: buildSampler(
+      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/marimba-classic-low-'
+    ).connect(new Tone.Panner(-0.4).connect(reverb))
+  },
+  {
+    high: buildSampler(
+      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/xylophone-dark-'
+    ).connect(new Tone.Panner(0.4).connect(reverb)),
+    mid: buildSampler(
+      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/xylophone-dark-mid-'
+    ).connect(new Tone.Panner(0.4).connect(reverb)),
+    low: buildSampler(
+      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/xylophone-dark-low-'
+    ).connect(new Tone.Panner(0.4).connect(reverb))
+  }
+];
+
+let sixteenth = Tone.Time('16n').toSeconds();
+let quarter = Tone.Time('4n').toSeconds();
+let temperature = 1.1;
+let loadingIndicator = document.querySelector('#loading');
+let generatingIndicator = document.querySelector('#generating');
+let container = document.querySelector('#vis-elements');
+let haloContainer = document.querySelector('#vis-halos');
+let tonicLeftButtons = document.querySelectorAll('.tonic-left');
+let tonicRightButtons = document.querySelectorAll('.tonic-right');
+let chordLeftButtons = document.querySelectorAll('.chord-left');
+let chordRightButtons = document.querySelectorAll('.chord-right');
+let tempoSelector = document.querySelector('#tempo-selector');
+let tempoLabel = document.querySelector('#tempo-label');
+let midiRequiredStuff = Array.from(document.querySelectorAll('.midi-required'));
+let outputSelector = document.querySelector('#output-selector');
+let tempoSourceSelector = document.querySelector('#tempo-source-selector');
+
+let currentStep = 0;
+let sequences = [];
+let mouseDown = false;
+let chordLeft = CHORD_SYMBOLS['major'],
+  chordRight = CHORD_SYMBOLS['major'];
+let tonicLeft = 0,
+  tonicRight = 0;
+let currentMidiOutput;
+let transportPlayerId = null;
+
+function buildSampler(urlPrefix) {
+  return new Tone.Sampler(
+    _.fromPairs(
+      SAMPLE_SCALE.map(n => [
+        n,
+        new Tone.Buffer(`${urlPrefix}${n.toLowerCase().replace('#', 's')}.mp3`)
+      ])
+    )
+  );
+}
+
+function generateSeq(chord, startNotes) {
+  let seedSeq = toNoteSequence(startNotes);
+  return rnn.continueSequence(seedSeq, SEQ_LENGTH, temperature, [chord]);
+}
+
+function toNoteSequence(seq) {
+  let notes = [];
+  for (let i = 0; i < seq.length; i++) {
+    if (seq[i] === -1 && notes.length) {
+      _.last(notes).endTime = i * 0.5;
+    } else if (seq[i] !== -2 && seq[i] !== -1) {
+      if (notes.length && !_.last(notes).endTime) {
+        _.last(notes).endTime = i * 0.5;
+      }
+      notes.push({
+        pitch: seq[i],
+        startTime: i * 0.5
+      });
+    }
+  }
+  if (notes.length && !_.last(notes).endTime) {
+    _.last(notes).endTime = seq.length * 0.5;
+  }
+  return mm.sequences.quantizeNoteSequence(
+    {
+      ticksPerQuarter: 220,
+      totalTime: seq.length * 0.5,
+      quantizationInfo: {
+        stepsPerQuarter: 1
+      },
+      timeSignatures: [
+        {
+          time: 0,
+          numerator: 4,
+          denominator: 4
+        }
+      ],
+      tempos: [
+        {
+          time: 0,
+          qpm: 120
+        }
+      ],
+      notes
+    },
+    1
+  );
+}
+
+function isValidNote(note, forgive = 0) {
+  return note <= MAX_NOTE + forgive && note >= MIN_NOTE - forgive;
+}
+
+function octaveShift(note) {
+  let shift = MAX_NOTE - note > note - MIN_NOTE ? 12 : -12;
+  let delta = 0;
+  while (isValidNote(note + delta + shift)) {
+    delta += shift;
+  }
+  return note + delta;
+}
+
+function transposeIntoRange(note) {
+  while (note > MAX_NOTE) {
+    note -= 12;
+  }
+  while (note < MIN_NOTE) {
+    note += 12;
+  }
+  return note;
+}
+
+function mountChord(tonic, chord) {
+  return Tone.Frequency(tonic, 'midi').toNote() + chord;
+}
+
+function restPad(note) {
+  if (Math.random() < 0.6) {
+    return [note, -2];
+  } else if (Math.random() < 0.8) {
+    return [note];
+  } else {
+    return [note, -2, -2];
+  }
+}
+
+function playStep(time = Tone.now() - Tone.context.lookAhead) {
+  let notesToPlay = distributeNotesToPlay(
+    collectNotesToPlay(currentStep % SEQ_LENGTH)
+  );
+  for (let { delay, notes } of notesToPlay) {
+    let voice = 0;
+    let stepSamplers = _.shuffle(samplers);
+    for (let { pitch, path, halo } of notes) {
+      let freq = Tone.Frequency(pitch, 'midi');
+      let playTime = time + delay + HUMANIZE_TIMING * Math.random();
+      let velocity;
+      if (delay === 0) velocity = 'high';
+      else if (delay === sixteenth / 2) velocity = 'mid';
+      else velocity = 'low';
+
+      if (currentMidiOutput) {
+        let delay = (playTime - Tone.now() + Tone.context.lookAhead) * 1000;
+        let duration = Tone.Time('16n').toMilliseconds();
+        let midiVelocity = { high: 1, mid: 0.75, low: 0.5 }[velocity];
+        currentMidiOutput.playNote(freq.toNote(), 'all', {
+          time: delay > 0 ? `+${delay}` : WebMidi.now,
+          velocity: midiVelocity,
+          duration
+        });
+      } else {
+        stepSamplers[voice++ % stepSamplers.length][velocity].triggerAttack(
+          freq,
+          playTime
+        );
+      }
+      Tone.Draw.schedule(() => animatePlay(path, halo), playTime);
+    }
+  }
+  currentStep++;
+}
+
+function collectNotesToPlay(step) {
+  let notesToPlay = [];
+  for (let seq of sequences) {
+    if (!seq.on) continue;
+    if (seq.notes.has(step)) {
+      notesToPlay.push(seq.notes.get(step));
+    }
+  }
+  return _.shuffle(notesToPlay);
+}
+
+function distributeNotesToPlay(notes) {
+  let subdivisions = [
+    { delay: 0, notes: [] },
+    { delay: sixteenth / 2, notes: [] },
+    { delay: sixteenth, notes: [] },
+    { delay: (sixteenth * 3) / 2, notes: [] }
+  ];
+  if (notes.length) {
+    subdivisions[0].notes.push(notes.pop());
+  }
+  if (notes.length) {
+    subdivisions[2].notes.push(notes.pop());
+  }
+  while (notes.length && Math.random() < Math.min(notes.length, 6) / 10) {
+    let rnd = Math.random();
+    let subdivision;
+    if (rnd < 0.4) {
+      subdivision = 0;
+    } else if (rnd < 0.6) {
+      subdivision = 1;
+    } else if (rnd < 0.8) {
+      subdivision = 2;
+    } else {
+      subdivision = 3;
+    }
+    subdivisions[subdivision].notes.push(notes.pop());
+  }
+  return subdivisions;
+}
+
+function animatePlay(pathEl, haloEl) {
+  pathEl.animate([{ fill: 'white' }, { fill: '#e91e63' }], {
+    duration: quarter * 1000,
+    easing: 'ease-out'
+  });
+  haloEl.animate([{ opacity: 1 }, { opacity: 0 }], {
+    duration: quarter * 1000,
+    easing: 'ease-out'
+  });
+}
+
+function toggleSeq(seqObj) {
+  if (seqObj.on) {
+    seqObj.on = false;
+    seqObj.group.setAttribute('class', '');
+  } else {
+    seqObj.on = true;
+    seqObj.group.setAttribute('class', 'on');
+  }
+}
+
+function toggleHover(seqObj, on) {
+  let cls = seqObj.group.getAttribute('class') || '';
+  if (on && cls.indexOf('hover') < 0) {
+    seqObj.group.setAttribute('class', cls + ' hover');
+  } else if (!on && cls.indexOf('hover') >= 0) {
+    seqObj.group.setAttribute('class', cls.replace('hover', ''));
+  }
+}
+
+function buildSlice(centerX, centerY, startAngle, endAngle, radius) {
+  let startX = centerX + Math.cos(startAngle) * radius;
+  let startY = centerY + Math.sin(startAngle) * radius;
+  let endX = centerX + Math.cos(endAngle) * radius;
+  let endY = centerY + Math.sin(endAngle) * radius;
+  let pathString = `M ${centerX} ${centerY} L ${startX} ${startY} A ${radius} ${radius} 0 0 1 ${endX} ${endY} Z`;
+  let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.setAttribute('d', pathString);
+  path.setAttribute('style', `transform-origin: ${centerX}px ${centerY}px`);
+  return path;
+}
+
+function buildSeed(chord) {
+  let notes = Tonal.Chord.notes(chord)
+    .map(n => Tonal.Note.midi(n))
+    .map(transposeIntoRange);
+  return _.flatMap(_.shuffle(notes), restPad);
+}
+
+function generateSpace() {
+  let previouslyOn = _.fromPairs(sequences.map((s, idx) => [idx, s.on]));
+  let chords = [
+    mountChord(octaveShift(MIN_NOTE + tonicLeft), chordLeft),
+    mountChord(MIN_NOTE + tonicLeft, chordLeft),
+    mountChord(octaveShift(MIN_NOTE + tonicRight), chordRight),
+    mountChord(MIN_NOTE + tonicRight, chordRight)
+  ];
+  return Promise.all([
+    generateSeq(chords[0], buildSeed(chords[0])),
+    generateSeq(chords[1], buildSeed(chords[1])),
+    generateSeq(chords[2], buildSeed(chords[2])),
+    generateSeq(chords[3], buildSeed(chords[3]))
+  ])
+    .then(noteSeqs => vae.interpolate(noteSeqs, N_INTERPOLATIONS))
+    .then(res => {
+      while (container.firstChild) {
+        container.firstChild.remove();
+      }
+      while (haloContainer.firstChild) {
+        haloContainer.firstChild.remove();
+      }
+      let cellSize = 1000 / N_INTERPOLATIONS;
+      let margin = cellSize / 30;
+
+      sequences = res.map((noteSeq, idx) => {
+        let row = Math.floor(idx / N_INTERPOLATIONS);
+        let col = idx - row * N_INTERPOLATIONS;
+        let centerX = (col + 0.5) * cellSize + margin;
+        let centerY = (row + 0.5) * cellSize + margin;
+        let maxInterval = MAX_NOTE;
+        let maxRadius = cellSize / 2 - 2 * margin;
+
+        let group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        if (previouslyOn[idx]) {
+          group.setAttribute('class', 'on');
+        }
+        group.style.transformOrigin = `${centerX}px ${centerY}px`;
+        group.style.transform = 'scale(0)';
+        group.animate([{ transform: 'scale(0)' }, { transform: 'scale(1)' }], {
+          duration: 200,
+          delay:
+            (N_INTERPOLATIONS / 2 - Math.abs(row - N_INTERPOLATIONS / 2)) * 25 +
+            (N_INTERPOLATIONS / 2 - Math.abs(col - N_INTERPOLATIONS / 2)) * 25,
+          fill: 'forwards'
+        });
+        container.appendChild(group);
+
+        let halo = document.createElementNS(
+          'http://www.w3.org/2000/svg',
+          'circle'
+        );
+        halo.setAttribute('class', 'halo');
+        halo.setAttribute('fill', 'url(#halo');
+        halo.setAttribute('cx', centerX);
+        halo.setAttribute('cy', centerY);
+        halo.setAttribute('r', maxRadius + 2);
+        haloContainer.appendChild(halo);
+
+        let notes = new Map();
+        for ({ pitch, quantizedStartStep, quantizedEndStep } of noteSeq.notes) {
+          if (!isValidNote(pitch, 4)) {
+            continue;
+          }
+          let relPitch = (maxInterval - (pitch - MIN_NOTE)) / maxInterval;
+          let radius = relPitch * maxRadius;
+          let startAngle = (quantizedStartStep / SEQ_LENGTH) * Math.PI * 2;
+          let endAngle = (quantizedEndStep / SEQ_LENGTH) * Math.PI * 2;
+
+          let path = buildSlice(centerX, centerY, startAngle, endAngle, radius);
+          path.setAttribute('class', 'note');
+          group.appendChild(path);
+          notes.set(quantizedStartStep, {
+            pitch,
+            path,
+            halo
+          });
+        }
+
+        let pointerArea = document.createElementNS(
+          'http://www.w3.org/2000/svg',
+          'rect'
+        );
+        pointerArea.setAttribute('x', col * cellSize);
+        pointerArea.setAttribute('y', row * cellSize);
+        pointerArea.setAttribute('width', cellSize);
+        pointerArea.setAttribute('height', cellSize);
+        pointerArea.setAttribute('class', 'pointer-area');
+        group.appendChild(pointerArea);
+
+        let seqObj = { notes, group, on: previouslyOn[idx] };
+
+        pointerArea.addEventListener('mousedown', () => toggleSeq(seqObj));
+        pointerArea.addEventListener('mouseover', () => {
+          toggleHover(seqObj, true);
+          mouseDown && toggleSeq(seqObj);
+        });
+        pointerArea.addEventListener('mouseout', () =>
+          toggleHover(seqObj, false)
+        );
+        return seqObj;
+      });
+    });
+}
+
+function regenerateSpace() {
+  // Pause Tone timeline while regenerating so events don't pile up if it's laggy.
+  Tone.Transport.pause();
+  generatingIndicator.style.display = 'flex';
+  setTimeout(() => {
+    generateSpace().then(() => {
+      generatingIndicator.style.display = 'none';
+      setTimeout(() => Tone.Transport.start(), 0);
+    });
+  }, 0);
+}
+
+function startTransportPlay() {
+  if (_.isNull(transportPlayerId)) {
+    transportPlayerId = Tone.Transport.scheduleRepeat(playStep, '16n');
+  }
+}
+
+function stopTransportPlay() {
+  if (!_.isNull(transportPlayerId)) {
+    Tone.Transport.clear(transportPlayerId);
+    transportPlayerId = null;
+  }
+}
+
+Promise.all([
+  rnn.initialize(),
+  vae.initialize(),
+  new Promise(res => Tone.Buffer.on('load', res))
+])
+  .then(generateSpace)
+  .then(() => (loadingIndicator.style.display = 'none'))
+  .then(() => {
+    startTransportPlay();
+    Tone.Transport.start();
+  });
+
+document.documentElement.addEventListener(
+  'mousedown',
+  () => (mouseDown = true)
+);
+document.documentElement.addEventListener('mouseup', () => (mouseDown = false));
+
+tonicLeftButtons.forEach(el =>
+  el.addEventListener('click', evt => {
+    tonicLeft = +evt.target.dataset.tonic;
+    tonicLeftButtons.forEach(b =>
+      b.classList.toggle('active', b === evt.target)
+    );
+    regenerateSpace();
+  })
+);
+tonicRightButtons.forEach(el =>
+  el.addEventListener('click', evt => {
+    tonicRight = +evt.target.dataset.tonic;
+    tonicRightButtons.forEach(b =>
+      b.classList.toggle('active', b === evt.target)
+    );
+    regenerateSpace();
+  })
+);
+chordLeftButtons.forEach(el =>
+  el.addEventListener('click', evt => {
+    chordLeft = CHORD_SYMBOLS[evt.target.dataset.chord];
+    chordLeftButtons.forEach(b =>
+      b.classList.toggle('active', b === evt.target)
+    );
+    regenerateSpace();
+  })
+);
+chordRightButtons.forEach(el =>
+  el.addEventListener('click', evt => {
+    chordRight = CHORD_SYMBOLS[evt.target.dataset.chord];
+    chordRightButtons.forEach(b =>
+      b.classList.toggle('active', b === evt.target)
+    );
+    regenerateSpace();
+  })
+);
+
+tempoSelector.addEventListener('input', () => {
+  Tone.Transport.bpm.value = +tempoSelector.value;
+  tempoLabel.innerText = tempoSelector.value;
+});
+
+WebMidi.enable(err => {
+  if (err) {
+    console.log(err);
+  } else {
+    midiRequiredStuff.forEach(el => el.classList.remove('midi-required'));
+
+    function updateSelectors() {
+      while (outputSelector.firstChild) {
+        outputSelector.firstChild.remove();
+      }
+
+      let internalOutputOption = document.createElement('option');
+      internalOutputOption.value = 'internal';
+      internalOutputOption.textContent = 'Internal';
+      internalOutputOption.checked = true;
+      outputSelector.appendChild(internalOutputOption);
+      for (let output of WebMidi.outputs) {
+        let outputOption = document.createElement('option');
+        outputOption.value = output.id;
+        outputOption.textContent = output.name;
+        outputSelector.appendChild(outputOption);
+      }
+      onOutputChange();
+
+      while (tempoSourceSelector.firstChild) {
+        tempoSourceSelector.firstChild.remove();
+      }
+      let internalTempoSourceOption = document.createElement('option');
+      internalTempoSourceOption.value = 'internal';
+      internalTempoSourceOption.textContent = 'Internal';
+      tempoSourceSelector.appendChild(internalTempoSourceOption);
+      for (let input of WebMidi.inputs) {
+        let tempoSourceOption = document.createElement('option');
+        tempoSourceOption.value = input.id;
+        tempoSourceOption.textContent = `MIDI clock from ${input.name}`;
+        tempoSourceSelector.appendChild(tempoSourceOption);
+      }
+      onTempoSourceChange();
+    }
+
+    function onOutputChange() {
+      let outputId = outputSelector.value;
+      if (outputId === 'internal') {
+        currentMidiOutput = null;
+      } else {
+        currentMidiOutput = WebMidi.getOutputById(outputId);
+      }
+    }
+
+    let midiClockTick = 0;
+
+    function incomingMidiClockStart() {
+      currentStep = 0;
+      midiClockTick = 0;
+    }
+
+    function incomingMidiClockStop() {
+      currentStep = 0;
+      midiClockTick = 0;
+    }
+
+    function incomingMidiClockTick() {
+      if (midiClockTick++ % 6 === 0) {
+        playStep();
+      }
+    }
+
+    function onTempoSourceChange() {
+      let inputId = tempoSourceSelector.value;
+      if (inputId === 'internal') {
+        for (let input of WebMidi.inputs) {
+          input.removeListener('start', 'all', incomingMidiClockStart);
+          input.removeListener('stop', 'all', incomingMidiClockStop);
+          input.removeListener('clock', 'all', incomingMidiClockTick);
+        }
+        startTransportPlay();
+
+        tempoSelector.disabled = false;
+        tempoSelector.style.opacity = 1;
+        tempoLabel.style.opacity = 1;
+      } else {
+        stopTransportPlay();
+        let input = WebMidi.getInputById(inputId);
+        input.addListener('start', 'all', incomingMidiClockStart);
+        input.addListener('stop', 'all', incomingMidiClockStop);
+        input.addListener('clock', 'all', incomingMidiClockTick);
+
+        tempoSelector.disabled = true;
+        tempoSelector.style.opacity = 0;
+        tempoLabel.style.opacity = 0;
+      }
+    }
+
+    updateSelectors();
+
+    WebMidi.addListener('connected', updateSelectors);
+    WebMidi.addListener('disconnected', updateSelectors);
+    outputSelector.addEventListener('change', onOutputChange);
+    tempoSourceSelector.addEventListener('change', onTempoSourceChange);
+  }
+});
+
+StartAudioContext(Tone.context, container);
diff --git a/latent-cycles/src/style.css b/latent-cycles/src/style.css
new file mode 100644
index 0000000..4b0d546
--- /dev/null
+++ b/latent-cycles/src/style.css
@@ -0,0 +1,109 @@
+html,
+body,
+#container {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(0.25turn, #752525, #050505, #252575);
+  color: #f3f3f3;
+  font-family: sans-serif;
+}
+
+#container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
+}
+#vis {
+  width: 95vmin;
+  height: 95vmin;
+  overflow: visible;
+}
+
+.halo {
+  opacity: 0;
+}
+.note {
+  stroke-width: 0.5;
+  stroke: #151515;
+  fill: rgba(255, 255, 255, 1);
+  opacity: 0.4;
+}
+.hover .note {
+  opacity: 0.7;
+}
+.on .note {
+  fill: #e91e63;
+  opacity: 1;
+}
+
+.pointer-area {
+  stroke: none;
+  opacity: 0;
+}
+
+.controls {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+.control-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.controls button {
+  width: 100%;
+  min-width: 7vw;
+  height: 4vh;
+  margin: 2px;
+  background: none;
+  color: white;
+  border: 1px solid white;
+}
+.controls button:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+.controls button.active {
+  background: white;
+  color: black;
+}
+
+#output-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.output-control {
+  padding: 10px;
+}
+.output-control label {
+  padding: 0 5px;
+  font-size: 14px;
+}
+#tempo-label {
+  display: inline-block;
+  width: 30px;
+}
+.midi-required {
+  display: none;
+}
+
+#generating,
+#loading {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 32px;
+}
diff --git a/layout-templates-with-css-grid/README.markdown b/layout-templates-with-css-grid/README.markdown
new file mode 100644
index 0000000..c680273
--- /dev/null
+++ b/layout-templates-with-css-grid/README.markdown
@@ -0,0 +1,11 @@
+# Layout Templates with CSS Grid
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/5t3ph/pen/qBBgMdp](https://codepen.io/5t3ph/pen/qBBgMdp).
+
+A quick exercise exploring essential layout template setup using CSS Grid and bare minimum DOM.
+
+For more reasons to love grid, check out my article:
+https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert/
+
+Or my additional articles that cover grid:
+https://moderncss.dev/topics/#grid
diff --git a/layout-templates-with-css-grid/dist/index.html b/layout-templates-with-css-grid/dist/index.html
new file mode 100644
index 0000000..6b9b8ed
--- /dev/null
+++ b/layout-templates-with-css-grid/dist/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Layout Templates with CSS Grid</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<span>
+	<b>1</b>
+	<b>2</b>
+</span>
+
+<span class="template-2col">
+	<b>1</b>
+	<b>2</b>
+</span>
+
+<span class="template-3col">
+	<b>1</b>
+	<b>2</b>
+	<b>3</b>
+</span>
+
+<span class="template-4up">
+	<b>1</b>
+	<b>2</b>
+	<b>3</b>
+	<b>4</b>
+</span>
+
+<span class="template-sidebar--left">
+	<b>1</b>
+	<b>2</b>
+	<b>3</b>
+</span>
+
+<span class="template-sidebar--right">
+	<b>1</b>
+	<b>2</b>
+	<b>3</b>
+</span>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/layout-templates-with-css-grid/dist/style.css b/layout-templates-with-css-grid/dist/style.css
new file mode 100644
index 0000000..468c3a3
--- /dev/null
+++ b/layout-templates-with-css-grid/dist/style.css
@@ -0,0 +1,55 @@
+* {
+  box-sizing: border-box;
+}
+
+span {
+  background: #fff;
+  padding: 1rem;
+  border-radius: 7px;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.13);
+  height: 30vh;
+  display: grid;
+  grid-gap: 0.5rem;
+}
+span b {
+  background-color: #7B86F5;
+  border-radius: 4px;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-size: 1.5rem;
+}
+span.template-2col {
+  grid-template-columns: repeat(2, 1fr);
+}
+span.template-3col {
+  grid-template-columns: repeat(3, 1fr);
+}
+span.template-4up {
+  grid-template: repeat(2, 1fr)/repeat(2, 1fr);
+}
+span.template-sidebar--left {
+  grid-template: "sidebar mainA" "sidebar mainB";
+}
+span.template-sidebar--left > :nth-child(1) {
+  grid-area: sidebar;
+}
+span.template-sidebar--right {
+  grid-template: "mainA sidebar" "mainB sidebar";
+}
+span.template-sidebar--right > :nth-child(3) {
+  grid-area: sidebar;
+}
+
+body {
+  background: #f9f9f9;
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 30ch);
+  place-content: center;
+  grid-gap: 5vh;
+  max-width: calc((30ch * 3) + (5vh * 2) + 2rem);
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1rem;
+}
\ No newline at end of file
diff --git a/layout-templates-with-css-grid/license.txt b/layout-templates-with-css-grid/license.txt
new file mode 100644
index 0000000..44aa4d5
--- /dev/null
+++ b/layout-templates-with-css-grid/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Stephanie Eckles (https://codepen.io/5t3ph/pen/qBBgMdp)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/layout-templates-with-css-grid/src/index.html b/layout-templates-with-css-grid/src/index.html
new file mode 100644
index 0000000..3a178e9
--- /dev/null
+++ b/layout-templates-with-css-grid/src/index.html
@@ -0,0 +1,34 @@
+<span>
+	<b>1</b>
+	<b>2</b>
+</span>
+
+<span class="template-2col">
+	<b>1</b>
+	<b>2</b>
+</span>
+
+<span class="template-3col">
+	<b>1</b>
+	<b>2</b>
+	<b>3</b>
+</span>
+
+<span class="template-4up">
+	<b>1</b>
+	<b>2</b>
+	<b>3</b>
+	<b>4</b>
+</span>
+
+<span class="template-sidebar--left">
+	<b>1</b>
+	<b>2</b>
+	<b>3</b>
+</span>
+
+<span class="template-sidebar--right">
+	<b>1</b>
+	<b>2</b>
+	<b>3</b>
+</span>
\ No newline at end of file
diff --git a/layout-templates-with-css-grid/src/style.scss b/layout-templates-with-css-grid/src/style.scss
new file mode 100644
index 0000000..bbe7f41
--- /dev/null
+++ b/layout-templates-with-css-grid/src/style.scss
@@ -0,0 +1,80 @@
+// For more reasons to love grid, check out my article:
+// @link https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert/
+// Or my additional articles that cover grid:
+// @link https://moderncss.dev/topics/#grid
+
+* {
+	box-sizing: border-box;
+}
+
+span {
+	background: #fff;
+	padding: 1rem;
+	border-radius: 7px;
+	box-shadow: 0 2px 6px 0 rgba(black, 0.13);
+	height: 30vh;
+
+	display: grid;
+	grid-gap: 0.5rem;
+
+	b {
+		background-color: #7B86F5;
+		border-radius: 4px;
+		display: grid;
+		place-items: center;
+		color: #fff;
+		font-size: 1.5rem;
+	}
+
+	&.template {
+		
+		// Using `repeat()` lets us explicitly define
+		// the number of rows or columns to allow
+		&-2col {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		&-3col {
+			grid-template-columns: repeat(3, 1fr);
+		}
+
+		// NOTE: The 2col will also create this arrangement,
+		// this is just more explicit
+		&-4up {
+			// grid-template-rows / grid-template-columns
+			grid-template: repeat(2, 1fr) / repeat(2, 1fr);
+		}
+
+		&-sidebar--left {
+			grid-template: "sidebar mainA"
+								"sidebar mainB";
+
+			> :nth-child(1) {
+				grid-area: sidebar;
+			}
+		}
+
+		&-sidebar--right {
+			grid-template: "mainA sidebar"
+								"mainB sidebar";
+
+			> :nth-child(3) {
+				grid-area: sidebar;
+			}
+		}
+	}
+}
+
+body {
+	background: #f9f9f9;
+	min-height: 100vh;
+
+	display: grid;
+	grid-template-columns: repeat(auto-fit, 30ch);
+	place-content: center;
+	grid-gap: 5vh;
+	max-width: calc((30ch * 3) + (5vh * 2) + 2rem);
+	margin-left: auto;
+	margin-right: auto;
+	padding: 1rem;
+}
\ No newline at end of file
diff --git a/leaving-out-particularities/README.markdown b/leaving-out-particularities/README.markdown
new file mode 100644
index 0000000..1f521f5
--- /dev/null
+++ b/leaving-out-particularities/README.markdown
@@ -0,0 +1,4 @@
+# leaving out particularities
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/ge1doot/pen/erKvYb](https://codepen.io/ge1doot/pen/erKvYb).
+
+ Click anywhere to generate a new particle flow.
\ No newline at end of file
diff --git a/leaving-out-particularities/dist/index.html b/leaving-out-particularities/dist/index.html
new file mode 100644
index 0000000..8179765
--- /dev/null
+++ b/leaving-out-particularities/dist/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>leaving out particularities</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/leaving-out-particularities/dist/script.js b/leaving-out-particularities/dist/script.js
new file mode 100644
index 0000000..899767b
--- /dev/null
+++ b/leaving-out-particularities/dist/script.js
@@ -0,0 +1,169 @@
+"use strict";
+{
+	// http://mrl.nyu.edu/~perlin/noise/
+	const perlin = {
+		init () {
+			this.p = new Uint8Array(512);
+			this.reset();
+		},
+		reset() {
+			const p = new Uint8Array(256);
+			for (let i = 0; i < 256; i++) p[i] = i;
+			for (let i = 255; i > 0; i--) {
+				const n = Math.floor((i + 1) * Math.random());
+				[p[i], p[n]] = [p[n], p[i]];
+			}
+			for (let i = 0; i < 512; i++) this.p[i] = p[i & 255];
+		},
+		lerp(t, a, b) {
+			return a + t * (b - a);
+		},
+		grad2d(i, x, y) {
+			const v = (i & 1) === 0 ? x : y;
+			return (i & 2) === 0 ? -v : v;
+		},
+		noise2d(x2d, y2d) {
+			const X = Math.floor(x2d) & 255;
+			const Y = Math.floor(y2d) & 255;
+			const x = x2d - Math.floor(x2d);
+			const y = y2d - Math.floor(y2d);
+			const fx = (3 - 2 * x) * x * x;
+			const fy = (3 - 2 * y) * y * y;
+			const p0 = this.p[X] + Y;
+			const p1 = this.p[X + 1] + Y;
+			return this.lerp(
+				fy,
+				this.lerp(
+					fx,
+					this.grad2d(this.p[p0], x, y),
+					this.grad2d(this.p[p1], x - 1, y)
+				),
+				this.lerp(
+					fx,
+					this.grad2d(this.p[p0 + 1], x, y - 1),
+					this.grad2d(this.p[p1 + 1], x - 1, y - 1)
+				)
+			);
+		}
+	};
+/////////////////////////////////////////////////////////////////
+	const canvas = {
+		init() {
+			this.elem = document.createElement("canvas");
+			document.body.appendChild(this.elem);
+			this.width = this.elem.width = this.elem.offsetWidth;
+			this.height = this.elem.height = this.elem.offsetHeight;
+			return this.elem.getContext("2d");
+		}
+	};
+/////////////////////////////////////////////////////////////////
+	const webgl = {
+		init(canvas, options) {
+			this.elem = document.createElement("canvas");
+			this.gl = (
+				this.elem.getContext("webgl", options) ||
+				this.elem.getContext("experimental-webgl", options)
+			);
+			if (!this.gl) return false;
+			const vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER);
+			this.gl.shaderSource(vertexShader, `
+				precision highp float;
+				attribute vec3 aPosition;
+				uniform vec2 uResolution;
+				void main() {
+					gl_PointSize = 1.0;
+					gl_Position = vec4(
+						( aPosition.x / uResolution.x * 2.0) - 1.0, 
+						(-aPosition.y / uResolution.y * 2.0) + 1.0, 
+						0.0,
+						1.0
+					);
+				}`
+			);
+			this.gl.compileShader(vertexShader);
+			const fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
+			this.gl.shaderSource(fragmentShader, `
+				precision highp float;
+				void main() {
+					gl_FragColor = vec4(0.2, 0.3, 1.0, 1.0);
+				}`
+			);
+			this.gl.compileShader(fragmentShader);
+			const program = this.gl.createProgram();
+			this.gl.attachShader(program, vertexShader);
+			this.gl.attachShader(program, fragmentShader);
+			this.gl.linkProgram(program);
+			this.gl.useProgram(program);
+			this.aPosition = this.gl.getAttribLocation(program, "aPosition");
+			this.gl.enableVertexAttribArray(this.aPosition);
+			this.positionBuffer = this.gl.createBuffer();
+			this.elem.width = canvas.width;
+			this.elem.height = canvas.height;
+			const uResolution = this.gl.getUniformLocation(program, "uResolution");
+			this.gl.enableVertexAttribArray(uResolution);
+			this.gl.uniform2f(uResolution, canvas.width, canvas.height);
+			this.gl.viewport(
+				0,
+				0,
+				this.gl.drawingBufferWidth,
+				this.gl.drawingBufferHeight
+			);
+			return this.gl;
+		},
+		drawBuffer(data, num) {
+			this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
+			this.gl.vertexAttribPointer(this.aPosition, 2, this.gl.FLOAT, false, 0, 0);
+			this.gl.bufferData(
+				this.gl.ARRAY_BUFFER,
+				data,
+				this.gl.DYNAMIC_DRAW
+			);
+			this.gl.drawArrays(this.gl.GL_POINTS, 0, num);
+		}
+	};
+/////////////////////////////////////////////////////////////////
+	const ctx = canvas.init();
+	const gl = webgl.init(canvas, {
+		alpha: false,
+		stencil: false,
+		antialias: false,
+		depth: false,
+	});
+	perlin.init();
+	const nParticles = 30000;
+	const velocities = new Float32Array(nParticles * 2);
+	const particles = new Float32Array(nParticles * 2);
+	let frame = 0;
+	for (let i = 0; i < nParticles; i++) {
+		const p = i * 2;
+		particles[p+0] = Math.random() * canvas.width;
+		particles[p+1] = Math.random() * canvas.height;
+	}
+/////////////////////////////////////////////////////////////////
+	const run = () => {
+		requestAnimationFrame(run);
+		frame++;
+		gl.clear(gl.COLOR_BUFFER_BIT);
+		ctx.globalCompositeOperation = "source-over";
+		ctx.fillStyle = "rgba(0, 0, 0, 0.025)";
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		ctx.globalCompositeOperation = "lighter";
+		for (let i = 0; i < nParticles; i++) {
+			const p = i * 2;
+			let n = 80 * perlin.noise2d(particles[p+0] * 0.001, particles[p+1] * 0.001);
+			velocities[p+0] += 0.1 * Math.cos(n);
+			velocities[p+1] += 0.1 * Math.sin(n);
+			particles[p+0]  += (velocities[p+0] *= 0.99);
+			particles[p+1]  += (velocities[p+1] *= 0.99);
+			particles[p+0]   = (canvas.width  + particles[p+0]) % canvas.width;
+			particles[p+1]   = (canvas.height + particles[p+1]) % canvas.height;
+		}
+		webgl.drawBuffer(particles, nParticles);
+		if (frame > 30) ctx.drawImage(webgl.elem, 0, 0);	
+	};
+	requestAnimationFrame(run);
+/////////////////////////////////////////////////////////////////
+	["click", "touchdown"].forEach(event => {
+		document.addEventListener(event, e => perlin.reset(), false);
+	});
+}
\ No newline at end of file
diff --git a/leaving-out-particularities/dist/style.css b/leaving-out-particularities/dist/style.css
new file mode 100644
index 0000000..a5b3729
--- /dev/null
+++ b/leaving-out-particularities/dist/style.css
@@ -0,0 +1,15 @@
+html, body {
+	overflow: hidden;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	background:#000;
+} 
+canvas {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background:#000;
+	cursor: pointer;
+}
\ No newline at end of file
diff --git a/leaving-out-particularities/license.txt b/leaving-out-particularities/license.txt
new file mode 100644
index 0000000..81479df
--- /dev/null
+++ b/leaving-out-particularities/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Gerard Ferrandez (https://codepen.io/ge1doot/pen/erKvYb)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/leaving-out-particularities/src/index.html b/leaving-out-particularities/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/leaving-out-particularities/src/script.js b/leaving-out-particularities/src/script.js
new file mode 100644
index 0000000..899767b
--- /dev/null
+++ b/leaving-out-particularities/src/script.js
@@ -0,0 +1,169 @@
+"use strict";
+{
+	// http://mrl.nyu.edu/~perlin/noise/
+	const perlin = {
+		init () {
+			this.p = new Uint8Array(512);
+			this.reset();
+		},
+		reset() {
+			const p = new Uint8Array(256);
+			for (let i = 0; i < 256; i++) p[i] = i;
+			for (let i = 255; i > 0; i--) {
+				const n = Math.floor((i + 1) * Math.random());
+				[p[i], p[n]] = [p[n], p[i]];
+			}
+			for (let i = 0; i < 512; i++) this.p[i] = p[i & 255];
+		},
+		lerp(t, a, b) {
+			return a + t * (b - a);
+		},
+		grad2d(i, x, y) {
+			const v = (i & 1) === 0 ? x : y;
+			return (i & 2) === 0 ? -v : v;
+		},
+		noise2d(x2d, y2d) {
+			const X = Math.floor(x2d) & 255;
+			const Y = Math.floor(y2d) & 255;
+			const x = x2d - Math.floor(x2d);
+			const y = y2d - Math.floor(y2d);
+			const fx = (3 - 2 * x) * x * x;
+			const fy = (3 - 2 * y) * y * y;
+			const p0 = this.p[X] + Y;
+			const p1 = this.p[X + 1] + Y;
+			return this.lerp(
+				fy,
+				this.lerp(
+					fx,
+					this.grad2d(this.p[p0], x, y),
+					this.grad2d(this.p[p1], x - 1, y)
+				),
+				this.lerp(
+					fx,
+					this.grad2d(this.p[p0 + 1], x, y - 1),
+					this.grad2d(this.p[p1 + 1], x - 1, y - 1)
+				)
+			);
+		}
+	};
+/////////////////////////////////////////////////////////////////
+	const canvas = {
+		init() {
+			this.elem = document.createElement("canvas");
+			document.body.appendChild(this.elem);
+			this.width = this.elem.width = this.elem.offsetWidth;
+			this.height = this.elem.height = this.elem.offsetHeight;
+			return this.elem.getContext("2d");
+		}
+	};
+/////////////////////////////////////////////////////////////////
+	const webgl = {
+		init(canvas, options) {
+			this.elem = document.createElement("canvas");
+			this.gl = (
+				this.elem.getContext("webgl", options) ||
+				this.elem.getContext("experimental-webgl", options)
+			);
+			if (!this.gl) return false;
+			const vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER);
+			this.gl.shaderSource(vertexShader, `
+				precision highp float;
+				attribute vec3 aPosition;
+				uniform vec2 uResolution;
+				void main() {
+					gl_PointSize = 1.0;
+					gl_Position = vec4(
+						( aPosition.x / uResolution.x * 2.0) - 1.0, 
+						(-aPosition.y / uResolution.y * 2.0) + 1.0, 
+						0.0,
+						1.0
+					);
+				}`
+			);
+			this.gl.compileShader(vertexShader);
+			const fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
+			this.gl.shaderSource(fragmentShader, `
+				precision highp float;
+				void main() {
+					gl_FragColor = vec4(0.2, 0.3, 1.0, 1.0);
+				}`
+			);
+			this.gl.compileShader(fragmentShader);
+			const program = this.gl.createProgram();
+			this.gl.attachShader(program, vertexShader);
+			this.gl.attachShader(program, fragmentShader);
+			this.gl.linkProgram(program);
+			this.gl.useProgram(program);
+			this.aPosition = this.gl.getAttribLocation(program, "aPosition");
+			this.gl.enableVertexAttribArray(this.aPosition);
+			this.positionBuffer = this.gl.createBuffer();
+			this.elem.width = canvas.width;
+			this.elem.height = canvas.height;
+			const uResolution = this.gl.getUniformLocation(program, "uResolution");
+			this.gl.enableVertexAttribArray(uResolution);
+			this.gl.uniform2f(uResolution, canvas.width, canvas.height);
+			this.gl.viewport(
+				0,
+				0,
+				this.gl.drawingBufferWidth,
+				this.gl.drawingBufferHeight
+			);
+			return this.gl;
+		},
+		drawBuffer(data, num) {
+			this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
+			this.gl.vertexAttribPointer(this.aPosition, 2, this.gl.FLOAT, false, 0, 0);
+			this.gl.bufferData(
+				this.gl.ARRAY_BUFFER,
+				data,
+				this.gl.DYNAMIC_DRAW
+			);
+			this.gl.drawArrays(this.gl.GL_POINTS, 0, num);
+		}
+	};
+/////////////////////////////////////////////////////////////////
+	const ctx = canvas.init();
+	const gl = webgl.init(canvas, {
+		alpha: false,
+		stencil: false,
+		antialias: false,
+		depth: false,
+	});
+	perlin.init();
+	const nParticles = 30000;
+	const velocities = new Float32Array(nParticles * 2);
+	const particles = new Float32Array(nParticles * 2);
+	let frame = 0;
+	for (let i = 0; i < nParticles; i++) {
+		const p = i * 2;
+		particles[p+0] = Math.random() * canvas.width;
+		particles[p+1] = Math.random() * canvas.height;
+	}
+/////////////////////////////////////////////////////////////////
+	const run = () => {
+		requestAnimationFrame(run);
+		frame++;
+		gl.clear(gl.COLOR_BUFFER_BIT);
+		ctx.globalCompositeOperation = "source-over";
+		ctx.fillStyle = "rgba(0, 0, 0, 0.025)";
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		ctx.globalCompositeOperation = "lighter";
+		for (let i = 0; i < nParticles; i++) {
+			const p = i * 2;
+			let n = 80 * perlin.noise2d(particles[p+0] * 0.001, particles[p+1] * 0.001);
+			velocities[p+0] += 0.1 * Math.cos(n);
+			velocities[p+1] += 0.1 * Math.sin(n);
+			particles[p+0]  += (velocities[p+0] *= 0.99);
+			particles[p+1]  += (velocities[p+1] *= 0.99);
+			particles[p+0]   = (canvas.width  + particles[p+0]) % canvas.width;
+			particles[p+1]   = (canvas.height + particles[p+1]) % canvas.height;
+		}
+		webgl.drawBuffer(particles, nParticles);
+		if (frame > 30) ctx.drawImage(webgl.elem, 0, 0);	
+	};
+	requestAnimationFrame(run);
+/////////////////////////////////////////////////////////////////
+	["click", "touchdown"].forEach(event => {
+		document.addEventListener(event, e => perlin.reset(), false);
+	});
+}
\ No newline at end of file
diff --git a/leaving-out-particularities/src/style.css b/leaving-out-particularities/src/style.css
new file mode 100644
index 0000000..a5b3729
--- /dev/null
+++ b/leaving-out-particularities/src/style.css
@@ -0,0 +1,15 @@
+html, body {
+	overflow: hidden;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	background:#000;
+} 
+canvas {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background:#000;
+	cursor: pointer;
+}
\ No newline at end of file
diff --git a/letter-hop/LICENSE.txt b/letter-hop/LICENSE.txt
new file mode 100644
index 0000000..047e8f8
--- /dev/null
+++ b/letter-hop/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Steve Gardner (https://codepen.io/ste-vg/pen/GRwmqxq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/letter-hop/README.md b/letter-hop/README.md
new file mode 100644
index 0000000..28fe482
--- /dev/null
+++ b/letter-hop/README.md
@@ -0,0 +1,4 @@
+# Letter Hop
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ste-vg/pen/GRwmqxq](https://codepen.io/ste-vg/pen/GRwmqxq).
+
diff --git a/letter-hop/dist/index.html b/letter-hop/dist/index.html
new file mode 100644
index 0000000..e2b2891
--- /dev/null
+++ b/letter-hop/dist/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Letter Hop</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container"> 
+  <div class="shadow"></div>
+  <div class="squish">
+    <h1 data-3d-text>A</h1>
+  </div>
+  <div class="particles">
+    <div class="floor"></div>
+    <div class="air"></div>
+  </div>
+ </div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/letter-hop/dist/script.js b/letter-hop/dist/script.js
new file mode 100644
index 0000000..1bbf74e
--- /dev/null
+++ b/letter-hop/dist/script.js
@@ -0,0 +1,106 @@
+import { Those3DTexts } from "https://cdn.skypack.dev/that-3d-text-library";
+import { gsap } from "https://cdn.skypack.dev/gsap";
+import { MotionPathPlugin } from "https://cdn.skypack.dev/gsap/MotionPathPlugin";
+
+gsap.registerPlugin(MotionPathPlugin);
+
+new Those3DTexts();
+
+const STYLE_COUNT = 16;
+const FONT_COUNT = 4;
+const BOUNCE_DURATION = 1.3;
+const BOUNCE_HEIGHT = -90;
+const BOUNCE_WOBBLE = 0.8; // lower = more wobble
+const FLOOR_PARTICLE_COUNT = 1;
+const AIR_PARTICLE_COUNT = 4;
+
+const LETTER = document.querySelector('h1')
+const BODY = document.body
+
+let count = 0;
+
+BODY.classList.add('style-0');
+LETTER.classList.add('font-0');
+
+const setNextStyle = () => {
+
+  BODY.classList.remove(`style-${count % (STYLE_COUNT)}`);
+  LETTER.classList.remove(`font-${count % (FONT_COUNT)}`);
+  count++;
+  BODY.classList.add(`style-${count % (STYLE_COUNT)}`);
+  LETTER.classList.add(`font-${count % (FONT_COUNT)}`);
+}
+
+const particles = {
+  floor: [],
+  air: []
+}
+
+const setupParticles = () => {
+  
+  const floor = document.querySelector('.floor');
+  const air = document.querySelector('.air');
+  
+  for(let i = 0; i < FLOOR_PARTICLE_COUNT; i++) {
+    let particle = document.createElement('div');
+    floor.appendChild(particle)
+    particles.floor.push(particle)
+  }
+  
+  for(let i = 0; i < AIR_PARTICLE_COUNT; i++) {
+    let particle = document.createElement('div');
+    air.appendChild(particle)
+    particles.air.push(particle)
+  }
+}
+
+setupParticles()
+
+const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+let letterCount = 0
+
+const nextLetter = () => {
+  letterCount ++;
+  const letterElements = LETTER.querySelectorAll('span') 
+  letterElements.forEach(l => l.innerText = letters[letterCount % letters.length])
+}
+
+const glitch = () => {
+  gsap.to('h1 span', {keyframes: [{opacity: 'random(0, 1)', xPercent: 'random(-10, 10)', opacity: 'random(0, 1)', yPercent: 'random(-10, 10)'}, {opacity: 'random(0, 1)', xPercent: 'random(-20, 20)', yPercent: 'random(-20, 20)'}, {opacity: 'random(0, 1)', xPercent: 'random(-10, 10)', yPercent: 'random(-10, 10)'}, {opacity: 1, xPercent: 0, yPercent: 0}], yoyo: true, ease: 'power4.inOut', duration: BOUNCE_DURATION * 0.5})
+}
+
+const bounce = () => {
+  const tl = gsap.timeline({defaults: { duration: BOUNCE_DURATION * 0.5}, onComplete: () => {
+    setNextStyle();  
+    nextLetter();
+    bounce();
+  }})
+  tl.set('.squish', {scaleY: BOUNCE_WOBBLE, scaleX: 1 + (1 - BOUNCE_WOBBLE)})
+  tl.to('.squish', {scaleY: 1, scaleX: 1, duration: BOUNCE_DURATION * 0.5, ease: 'elastic'}, 0)
+  tl.to(LETTER, {yPercent: BOUNCE_HEIGHT, ease: 'circ.out'}, 0)
+  tl.to('.shadow', {opacity: 0.2, ease: 'circ.out'}, 0)
+  tl.to(LETTER, {yPercent: 10, ease: 'circ.in'}, BOUNCE_DURATION * 0.5)
+  tl.to('.shadow', {opacity: 1, ease: 'circ.in'}, BOUNCE_DURATION * 0.5)
+  tl.to(LETTER, {rotationZ: "random(-150, 150)", rotationY: "random(-50, 50)", rotationX: "random(-50, 50)", duration: BOUNCE_DURATION, ease: 'none'}, 0)
+  // tl.to('.squish', {scaleY: BOUNCE_WOBBLE, duration: 0.2}, '-=0.2')
+  
+  
+  gsap.fromTo(particles.floor, {x: 0, y: 0,  scale: 1, opacity: 0.7}, {duration:  Math.min(BOUNCE_DURATION, 0.7 + Math.random() * 0.8), ease: 'power4.out', opacity: 0, scale: 2.5})
+  
+  particles.air.forEach((particle) => {
+    particle.setAttribute('class', `p${Math.floor(Math.random() * 4)}`)
+    gsap.fromTo(particle, {opacity: 1, x: 0, y: 0, z: 0, scale: 'random(0.3, 1)'}, { 
+      duration: Math.min(BOUNCE_DURATION, 0.3 + Math.random() * 0.3),
+      ease: 'linear',
+      opacity: 0,
+      rotate: 'random(-100, 100)',
+      x: 'random(-250, 250)',
+      y: 'random(-200, -100)',
+      z: 'random(-400, 400)',
+    })
+  })
+  
+  if(Math.random() > 0.95) glitch()
+}
+
+bounce();
\ No newline at end of file
diff --git a/letter-hop/dist/style.css b/letter-hop/dist/style.css
new file mode 100644
index 0000000..84d856f
--- /dev/null
+++ b/letter-hop/dist/style.css
@@ -0,0 +1,305 @@
+@charset "UTF-8";
+@import url("https://cdn.skypack.dev/that-3d-text-library/lib/styles.css");
+@import url("https://fonts.googleapis.com/css2?family=Bakbak+One&family=Caprasimo&family=Chonburi&family=Graduate&family=Righteous&display=swap");
+:root {
+  --font-size: clamp(100px, 40vmin, 200px);
+}
+
+html, body {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+body {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  perspective: 700px;
+}
+body::after {
+  position: absolute;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
+  width: 100%;
+  height: 45%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+body > * {
+  z-index: 2;
+}
+
+.container, .squish {
+  transform-style: preserve-3d;
+  position: relative;
+}
+
+.container {
+  margin-bottom: calc(50vh - var(--font-size));
+}
+
+.squish {
+  z-index: 2;
+}
+
+.shadow {
+  transform-style: flat;
+  z-index: 1;
+  transform: translatex(-10%) translatez(-30px);
+  position: absolute;
+  bottom: calc(var(--font-size) * 0.25);
+  left: 0;
+  width: 120%;
+  height: calc(var(--font-size) * 0.15);
+  opacity: 1;
+  background-color: var(--shadow-color, black);
+  border-radius: 100vmin;
+  filter: blur(25px);
+}
+
+h1 {
+  --layers: 10;
+  --depth: 30;
+  font-size: var(--font-size);
+}
+
+.particles {
+  position: absolute;
+  left: 50%;
+  z-index: 1;
+  transform: translatez(-50px);
+  bottom: calc(var(--font-size) * 0.3);
+}
+.particles .floor div,
+.particles .air div {
+  transform-style: preserve-3d;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.particles .floor div::after,
+.particles .air div::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+}
+.particles .floor {
+  transform: rotatex(-60deg);
+}
+.particles .floor div::after {
+  border: solid 1.5vmin var(--floor-particle, white);
+  width: 8vmin;
+  height: 8vmin;
+}
+.particles .air div::after {
+  content: "★";
+  color: var(--air-particle, white);
+  font-size: 10vmin;
+}
+.particles .air div:nth-child(2n)::after {
+  color: var(--air-particle-alt, hotpink);
+}
+.particles .air .p0::after {
+  content: "●";
+}
+.particles .air .p1::after {
+  content: "✖︎";
+}
+.particles .air .p2::after {
+  content: "◼︎";
+}
+.particles .air .p3::after {
+  content: "▲";
+}
+
+.style-0 {
+  --color: #015779;
+  --color-front: #35C4FD;
+  --floor-particle: #35C4FD;
+  --air-particle: #015779;
+  --air-particle-alt: #35C4FD;
+  background-color: #C5FCF9;
+}
+
+.style-1 {
+  --color: white;
+  --color-front: black;
+  --floor-particle: black;
+  --air-particle: black;
+  --air-particle-alt: white;
+  background-color: yellow;
+}
+.style-1 [data-mod-3] {
+  --color: black;
+}
+
+.style-2 {
+  --color: #3066BE;
+  --color-front: #6D9DC5;
+  --floor-particle: transparent;
+  --air-particle: transparent;
+  --air-particle-alt: transparent;
+  background-color: #6D9DC5;
+  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 100 100"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.4"%3E%3Cpath opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z"/%3E%3Cpath d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'), radial-gradient(#6D9DC5, #3066BE);
+}
+.style-2::after {
+  content: none;
+}
+.style-2 .shadow {
+  display: none;
+}
+.style-2 .front {
+  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
+}
+
+.style-3 {
+  --color: #B79492;
+  --color-front: #EAE1DF;
+  --floor-particle: #B79492;
+  --air-particle: orange;
+  --air-particle-alt: #B79492;
+  --background-color: #917C78;
+}
+
+.style-4 {
+  --color: #DB504A;
+  --color-front: #E3B505;
+  --floor-particle: #E3B505;
+  --air-particle: #DB504A;
+  --air-particle-alt: #E3B505;
+  background-color: #084C61;
+}
+
+.style-5 {
+  background: repeating-linear-gradient(45deg, red, red 10vmin, white 10vmin, white 20vmin);
+  --color: red;
+  --color-front: white;
+  --floor-particle: transparent;
+  --air-particle: transparent;
+  --air-particle-alt: transparent;
+}
+.style-5::after {
+  content: none;
+}
+
+.style-6 {
+  --color: #424C55;
+  --color-front: #E3B505;
+  --floor-particle: #E3B505;
+  --air-particle: #424C55;
+  --air-particle-alt: #E3B505;
+  background-color: #D1CCDC;
+}
+
+.style-7 {
+  --color: #6CCFF6;
+  --color-front: #001011;
+  --floor-particle: #FFFFFC;
+  --air-particle: #FFFFFC;
+  --air-particle-alt: #FFFFFC;
+  background-color: #00393D;
+}
+
+.style-8 {
+  --color: #F9DC5C;
+  --color-front: #ED254E;
+  --floor-particle: #ED254E;
+  --air-particle: #ED254E;
+  --air-particle-alt: #F9DC5C;
+  background-color: #F4FFFD;
+}
+
+.style-9 {
+  background-color: #42E2B8;
+  background-image: url('data:image/svg+xml,%3Csvg fill="%23F3DFBF" width="100" height="100" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z"  fill-rule="evenodd"/%3E%3C/svg%3E');
+  --color: #F3DFBF;
+  --color-front: #EB8A90;
+  --floor-particle: #EB8A90;
+  --air-particle: #EB8A90;
+  --air-particle-alt: #F3DFBF;
+}
+.style-9::after {
+  content: none;
+}
+
+.style-10 {
+  --color: #138A36;
+  --color-front: #34403A;
+  --floor-particle: #ffffff;
+  --air-particle: #ffffff;
+  --air-particle-alt: #ffffff;
+  background-color: #18FF6D;
+}
+
+.style-11 {
+  --color: #FFA69E;
+  --color-front: #DDFFF7;
+  --floor-particle: #AA4465;
+  --air-particle: #AA4465;
+  --air-particle-alt: #462255;
+  background-color: #93E1D8;
+}
+
+.style-12 {
+  --color: #64B6AC;
+  --color-front: #FEE9E1;
+  --floor-particle: #64B6AC;
+  --air-particle: #64B6AC;
+  --air-particle-alt: #64B6AC;
+  background-color: #FEE9E1;
+}
+
+.style-13 {
+  --color: #F4D58D;
+  --color-front: #BF0603;
+  --floor-particle: #708D81;
+  --air-particle: #708D81;
+  --air-particle-alt: #001427;
+  background-color: #8D0801;
+}
+
+.style-14 {
+  --color: #BB4430;
+  --color-front: #7EBDC2;
+  --floor-particle: #7EBDC2;
+  --air-particle: #BB4430;
+  --air-particle-alt: #7EBDC2;
+  background-color: #231F20;
+}
+
+.style-15 {
+  background: repeating-radial-gradient(circle farthest-side, #F487B6, #F487B6 10vmin, #CC59D2 10vmin, #CC59D2 20vmin);
+  --color: #FDE12D;
+  --color-front: #9046CF;
+  --floor-particle: transparent;
+  --air-particle: #FDE12D;
+  --air-particle-alt: #FFF3F0;
+}
+.style-15::after {
+  content: none;
+}
+
+.font-0 {
+  font-family: "Bakbak One", cursive;
+}
+
+.font-1 {
+  --depth: 10;
+  font-family: "Chonburi", cursive;
+}
+
+.font-2 {
+  font-family: "Graduate", cursive;
+}
+
+.font-3 {
+  font-family: "Righteous", cursive;
+}
\ No newline at end of file
diff --git a/letter-hop/src/index.html b/letter-hop/src/index.html
new file mode 100644
index 0000000..3cf6274
--- /dev/null
+++ b/letter-hop/src/index.html
@@ -0,0 +1,10 @@
+ <div class="container"> 
+  <div class="shadow"></div>
+  <div class="squish">
+    <h1 data-3d-text>A</h1>
+  </div>
+  <div class="particles">
+    <div class="floor"></div>
+    <div class="air"></div>
+  </div>
+ </div> 
\ No newline at end of file
diff --git a/letter-hop/src/script.js b/letter-hop/src/script.js
new file mode 100644
index 0000000..656eda9
--- /dev/null
+++ b/letter-hop/src/script.js
@@ -0,0 +1,108 @@
+import { Those3DTexts } from "https://cdn.skypack.dev/that-3d-text-library";
+import { gsap } from "https://cdn.skypack.dev/gsap";
+import { MotionPathPlugin } from "https://cdn.skypack.dev/gsap/MotionPathPlugin";
+
+gsap.registerPlugin(MotionPathPlugin);
+
+new Those3DTexts();
+
+const STYLE_COUNT = 16;
+const FONT_COUNT = 4;
+const BOUNCE_DURATION = 1.3;
+const BOUNCE_HEIGHT = -90;
+const BOUNCE_WOBBLE = 0.8; // lower = more wobble
+const FLOOR_PARTICLE_COUNT = 1;
+const AIR_PARTICLE_COUNT = 4;
+
+const LETTER = document.querySelector('h1')
+const BODY = document.body
+
+let count = 0;
+
+BODY.classList.add('style-0');
+LETTER.classList.add('font-0');
+
+const setNextStyle = () => {
+
+  BODY.classList.remove(`style-${count % (STYLE_COUNT)}`);
+  LETTER.classList.remove(`font-${count % (FONT_COUNT)}`);
+  count++;
+  BODY.classList.add(`style-${count % (STYLE_COUNT)}`);
+  LETTER.classList.add(`font-${count % (FONT_COUNT)}`);
+}
+
+const particles = {
+  floor: [],
+  air: []
+}
+
+const setupParticles = () => {
+  
+  const floor = document.querySelector('.floor');
+  const air = document.querySelector('.air');
+  
+  for(let i = 0; i < FLOOR_PARTICLE_COUNT; i++) {
+    let particle = document.createElement('div');
+    floor.appendChild(particle)
+    particles.floor.push(particle)
+  }
+  
+  for(let i = 0; i < AIR_PARTICLE_COUNT; i++) {
+    let particle = document.createElement('div');
+    air.appendChild(particle)
+    particles.air.push(particle)
+  }
+}
+
+setupParticles()
+
+const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+let letterCount = 0
+
+const nextLetter = () => {
+  letterCount ++;
+  const letterElements = LETTER.querySelectorAll('span') 
+  letterElements.forEach(l => l.innerText = letters[letterCount % letters.length])
+}
+
+const glitch = () => {
+  gsap.to('h1 span', {keyframes: [{opacity: 'random(0, 1)', xPercent: 'random(-10, 10)', opacity: 'random(0, 1)', yPercent: 'random(-10, 10)'}, {opacity: 'random(0, 1)', xPercent: 'random(-20, 20)', yPercent: 'random(-20, 20)'}, {opacity: 'random(0, 1)', xPercent: 'random(-10, 10)', yPercent: 'random(-10, 10)'}, {opacity: 1, xPercent: 0, yPercent: 0}], yoyo: true, ease: 'power4.inOut', duration: BOUNCE_DURATION * 0.5})
+}
+
+const bounce = () => {
+  const tl = gsap.timeline({defaults: { duration: BOUNCE_DURATION * 0.5}, onComplete: () => {
+    setNextStyle();  
+    nextLetter();
+    bounce();
+  }})
+  tl.set('.squish', {scaleY: BOUNCE_WOBBLE, scaleX: 1 + (1 - BOUNCE_WOBBLE)})
+  tl.to('.squish', {scaleY: 1, scaleX: 1, duration: BOUNCE_DURATION * 0.5, ease: 'elastic'}, 0)
+  tl.to(LETTER, {yPercent: BOUNCE_HEIGHT, ease: 'circ.out'}, 0)
+  tl.to('.shadow', {opacity: 0.2, ease: 'circ.out'}, 0)
+  tl.to(LETTER, {yPercent: 10, ease: 'circ.in'}, BOUNCE_DURATION * 0.5)
+  tl.to('.shadow', {opacity: 1, ease: 'circ.in'}, BOUNCE_DURATION * 0.5)
+  tl.to(LETTER, {rotationZ: "random(-150, 150)", rotationY: "random(-50, 50)", rotationX: "random(-50, 50)", duration: BOUNCE_DURATION, ease: 'none'}, 0)
+  // tl.to('.squish', {scaleY: BOUNCE_WOBBLE, duration: 0.2}, '-=0.2')
+  
+  
+  gsap.fromTo(particles.floor, {x: 0, y: 0,  scale: 1, opacity: 0.7}, {duration:  Math.min(BOUNCE_DURATION, 0.7 + Math.random() * 0.8), ease: 'power4.out', opacity: 0, scale: 2.5})
+  
+  particles.air.forEach((particle) => {
+    particle.setAttribute('class', `p${Math.floor(Math.random() * 4)}`)
+    gsap.fromTo(particle, {opacity: 1, x: 0, y: 0, z: 0, scale: 'random(0.3, 1)'}, { 
+      duration: Math.min(BOUNCE_DURATION, 0.3 + Math.random() * 0.3),
+      ease: 'linear',
+      opacity: 0,
+      rotate: 'random(-100, 100)',
+      x: 'random(-250, 250)',
+      y: 'random(-200, -100)',
+      z: 'random(-400, 400)',
+    })
+  })
+  
+  if(Math.random() > 0.95) glitch()
+}
+
+bounce();
+
+
diff --git a/letter-hop/src/style.scss b/letter-hop/src/style.scss
new file mode 100644
index 0000000..597806a
--- /dev/null
+++ b/letter-hop/src/style.scss
@@ -0,0 +1,348 @@
+@import url("https://cdn.skypack.dev/that-3d-text-library/lib/styles.css");
+@import url('https://fonts.googleapis.com/css2?family=Bakbak+One&family=Caprasimo&family=Chonburi&family=Graduate&family=Righteous&display=swap');
+
+
+:root {
+  --font-size: clamp(100px, 40vmin, 200px);
+}
+
+html, body {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+body {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  perspective: 700px;
+  
+  // transition: background-color 0.1s ease-in-out;
+  
+  &::after {
+    // content: '';
+    position: absolute;
+    background: linear-gradient(0deg, rgba(0,0,0,0.04), rgba(0,0,0,0));
+    width: 100%;
+    height: 45%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+  
+  > * {
+    z-index: 2;
+  }
+}
+
+.container, .squish {
+  transform-style: preserve-3d;
+  position: relative;
+}
+
+.container {
+  margin-bottom: calc(50vh - var(--font-size));
+}
+
+.squish {
+  z-index: 2;
+}
+
+.shadow{
+  transform-style: flat;
+  z-index: 1;
+  transform: translatex(-10%) translatez(-30px);
+  position: absolute;
+  bottom: calc(var(--font-size) * 0.25);
+  left: 0;
+  width: 120%;
+  height: calc(var(--font-size) * 0.15);
+  opacity: 1;
+  background-color: var(--shadow-color, black);
+  border-radius: 100vmin;
+  filter: blur(25px);
+  
+}
+
+h1 {
+  --layers: 10;
+  --depth: 30;
+  
+  font-size: var(--font-size);
+}
+
+.particles {
+  
+  position: absolute;
+  left: 50%;
+  z-index: 1;
+  transform: translatez(-50px);
+  bottom: calc(var(--font-size) * 0.3);
+  
+  
+  
+  .floor,
+  .air {
+    div {
+      transform-style: preserve-3d;
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+      }
+    }
+  }
+  
+  .floor {
+    transform: rotatex(-60deg);
+    
+    div {
+      &::after {
+        border: solid 1.5vmin var(--floor-particle, white);
+        width: 8vmin;
+        height: 8vmin;
+      }
+    }
+  }
+  
+  .air {    
+    div {
+      &::after {
+        content: '★';
+        color: var(--air-particle, white);
+        font-size: 10vmin;
+      }
+      
+      &:nth-child(2n)::after {
+        color: var(--air-particle-alt, hotpink);
+      }
+    }
+    
+    .p0::after { content: '●';}
+    .p1::after { content: '✖︎';}
+    .p2::after { content: '◼︎';}
+    .p3::after { content: '▲';}
+  }
+}
+
+.style-0 {
+  --color: #015779;
+  --color-front: #35C4FD;
+  --floor-particle: #35C4FD;
+  --air-particle: #015779;
+  --air-particle-alt: #35C4FD;
+  background-color: #C5FCF9;
+  
+  
+  
+}
+
+.style-1 {
+  --color: white;
+  --color-front: black;
+  --floor-particle: black;
+  --air-particle: black;
+  --air-particle-alt: white;
+  background-color: yellow;
+
+  [data-mod-3] {
+    --color: black;
+  }
+}
+
+.style-2 {
+  
+  --color: #3066BE;
+  --color-front: #6D9DC5;
+  --floor-particle: transparent;
+  --air-particle: transparent;
+  --air-particle-alt: transparent;
+  background-color: #6D9DC5;
+  
+  &::after { content: none; }
+  .shadow { display: none; }
+  
+  background: 
+    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 100 100"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.4"%3E%3Cpath opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z"/%3E%3Cpath d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'),
+    radial-gradient(#6D9DC5, #3066BE);
+  
+  
+  .front {
+    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
+  }
+}
+
+.style-3 {
+  --color: #B79492;
+  --color-front: #EAE1DF;
+  --floor-particle: #B79492;
+  --air-particle: orange;
+  --air-particle-alt: #B79492;
+  --background-color: #917C78;
+}
+
+.style-4 {
+  --color: #DB504A;
+  --color-front: #E3B505;
+  --floor-particle: #E3B505;
+  --air-particle: #DB504A;
+  --air-particle-alt: #E3B505;
+  background-color: #084C61;
+}
+
+.style-5 {
+  background: repeating-linear-gradient(
+    45deg,
+    red,
+    red 10vmin,
+    white 10vmin,
+    white 20vmin
+  );
+  
+  --color: red;
+  --color-front: white;
+  --floor-particle: transparent;
+  --air-particle: transparent;
+  --air-particle-alt: transparent;
+  
+  &::after { content: none; }
+}
+
+.style-6 {
+  --color: #424C55;
+  --color-front: #E3B505;
+  --floor-particle: #E3B505;
+  --air-particle: #424C55;
+  --air-particle-alt: #E3B505;
+  background-color: #D1CCDC;
+}
+
+.style-7 {
+  --color: #6CCFF6;
+  --color-front: #001011;
+  --floor-particle: #FFFFFC;
+  --air-particle: #FFFFFC;
+  --air-particle-alt: #FFFFFC;
+  background-color: #00393D;
+}
+
+.style-8 {
+  --color: #F9DC5C;
+  --color-front: #ED254E;
+  --floor-particle: #ED254E;
+  --air-particle: #ED254E;
+  --air-particle-alt: #F9DC5C;
+  background-color: #F4FFFD;
+}
+
+.style-9 {
+  background-color: #42E2B8;
+  background-image: url('data:image/svg+xml,%3Csvg fill="%23F3DFBF" width="100" height="100" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z"  fill-rule="evenodd"/%3E%3C/svg%3E');
+  
+  --color: #F3DFBF;
+  --color-front: #EB8A90;
+  --floor-particle: #EB8A90;
+  --air-particle: #EB8A90;
+  --air-particle-alt: #F3DFBF;
+  
+  &::after { content: none; }
+}
+
+.style-10 {
+  --color: #138A36;
+  --color-front: #34403A;
+  --floor-particle: #ffffff;
+  --air-particle: #ffffff;
+  --air-particle-alt: #ffffff;
+  background-color: #18FF6D;
+}
+
+.style-11 {
+  --color: #FFA69E;
+  --color-front: #DDFFF7;
+  --floor-particle: #AA4465;
+  --air-particle: #AA4465;
+  --air-particle-alt: #462255;
+  background-color: #93E1D8;
+}
+
+.style-12 {
+  --color: #64B6AC;
+  --color-front: #FEE9E1;
+  --floor-particle: #64B6AC;
+  --air-particle: #64B6AC;
+  --air-particle-alt: #64B6AC;
+  background-color: #FEE9E1;
+}
+
+.style-13 {
+  --color: #F4D58D;
+  --color-front: #BF0603;
+  --floor-particle: #708D81;
+  --air-particle: #708D81;
+  --air-particle-alt: #001427;
+  background-color: #8D0801;
+}
+
+
+.style-14 {
+  --color: #BB4430;
+  --color-front: #7EBDC2;
+  --floor-particle: #7EBDC2;
+  --air-particle: #BB4430;
+  --air-particle-alt: #7EBDC2;
+  background-color: #231F20;
+}
+
+.style-15 {
+  background: repeating-radial-gradient(
+    circle farthest-side,
+    #F487B6,
+    #F487B6 10vmin,
+    #CC59D2 10vmin,
+    #CC59D2 20vmin
+  );
+  
+  --color: #FDE12D;
+  --color-front: #9046CF;
+  --floor-particle: transparent;
+  --air-particle: #FDE12D;
+  --air-particle-alt: #FFF3F0;
+  
+  &::after { content: none; }
+}
+
+.font-0 {
+  font-family: 'Bakbak One', cursive;
+}
+
+// .font-2 {
+//   --depth: 30;
+//   font-family: 'Caprasimo', cursive;
+// }
+
+.font-1 {
+  --depth: 10;  
+  font-family: 'Chonburi', cursive;
+
+}
+
+.font-2 {
+  font-family: 'Graduate', cursive;
+}
+
+.font-3 {
+  font-family: 'Righteous', cursive;
+}
diff --git a/lines-doing-a-little-group-dance/README.markdown b/lines-doing-a-little-group-dance/README.markdown
new file mode 100644
index 0000000..cb789e7
--- /dev/null
+++ b/lines-doing-a-little-group-dance/README.markdown
@@ -0,0 +1,6 @@
+# Lines doing a little group dance
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/natszafraniec/pen/yLzeGzW](https://codepen.io/natszafraniec/pen/yLzeGzW).
+
+This is a generative SVG with an animation applied. Yay!
+If you don't like how the shapes are aligning, click on the illustration to generate new ones.
diff --git a/lines-doing-a-little-group-dance/dist/index.html b/lines-doing-a-little-group-dance/dist/index.html
new file mode 100644
index 0000000..c37be63
--- /dev/null
+++ b/lines-doing-a-little-group-dance/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Lines doing a little group dance</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg class="scene" id="illustration" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" aria-labelledby="svgTitle svgDesc" role="img">
+  <title id="svgTitle">A generative animation</title>
+  <desc id="svgDesc">Click on the image to redraw it!</desc>
+</svg>
+<!-- partial -->
+  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/lines-doing-a-little-group-dance/dist/script.js b/lines-doing-a-little-group-dance/dist/script.js
new file mode 100644
index 0000000..fa7ca0d
--- /dev/null
+++ b/lines-doing-a-little-group-dance/dist/script.js
@@ -0,0 +1,246 @@
+const settings = {
+  colors: ["#93c7e3", "#5672e1", "#3a159c", "#d85452", "#eeb8b4"],
+  // Using normalized coordinates for arcs
+  points: [
+    [[.5, 0], [0, .5]],
+    [[.5, 0], [1, .5]],
+    [[0, .5], [.5, 1]],
+    [[1, .5], [.5, 1]],
+    [[.5, 1], [.5, 0]],
+    [[1, .5], [0, .5]],
+  ],
+  arcControlPoint: [.5, .5]
+};
+
+const utils = {
+  getRandFromRange: function (min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+};
+
+class Illustration {
+  columnCount;
+  rowCount;
+  boxSize;
+  colors;
+  screen = { width: 0, height: 0 };
+  svg;
+  isAnimated;
+
+  constructor(selector, colors) {
+    this.boxes = [];
+    this.screen = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+
+    this.columnCount = Math.floor(this.screen.width / 100);
+    this.rowCount = Math.floor(this.screen.height / 100);
+    this.boxSize = 50;
+
+    this.setSVG(selector);
+    this.colors = colors;
+
+    this.isAnimated = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
+
+    this.draw();
+  }
+
+  setSVG(selector) {
+    this.svg = document.querySelector(selector);
+    this.svg.addEventListener("click", this.draw.bind(this));
+    this.svg.setAttribute(
+      "viewBox",
+      `0 0 ${this.boxSize * this.columnCount} ${this.boxSize * this.rowCount}`
+    );
+  }
+
+  reset() {
+    this.boxes = [];
+    this.svg.innerHTML = "";
+  }
+
+  draw() {
+    this.reset();
+
+    for (let i = 0; i < this.rowCount; i++) {
+      for (let j = 0; j < this.columnCount; j++) {
+        let elementColor = utils.getRandFromRange(0, this.colors.length - 1);
+
+        const box = new Box(
+          j * this.boxSize,
+          i * this.boxSize,
+          this.boxSize,
+          this.boxSize,
+          this.colors[elementColor]
+        ).getDOMElement();
+
+        this.svg.appendChild(box);
+        this.boxes.push(box);
+      }
+    }
+
+    this.isAnimated ? this.animate() : null;
+  }
+
+  animate() {
+    const duration = 2.75;
+    this.boxes.forEach((box, i) => {
+      const direction = Math.random() > .5 ? 1 : -1;
+      gsap.set(box, {transformOrigin: "50% 50%"});
+      gsap.to(box, {
+        keyframes: [
+          {
+            rotation: 90 * direction,
+            duration: duration,
+            ease: "power2.inOut"
+          },
+          {
+            rotation: 180 * direction,
+            duration: duration,
+            ease: "power2.inOut"
+          },
+          {
+            rotation: 270 * direction,
+            duration: duration,
+            ease: "power2.inOut"
+          },
+          {
+            rotation: 360 * direction,
+            duration: duration,
+            ease: "power2.inOut"
+          }
+        ],
+        repeat: -1,
+      })
+    })
+  }
+}
+
+class Box {
+  x;
+  y;
+  width;
+  height;
+  bgColor;
+  elementColor;
+  element;
+
+  constructor(x, y, width, height, elementColor) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.elementColor = elementColor;
+
+    this.rectangle = new Rectangle(x, y, width, height, "none");
+    this.arc = new Arc(x, y, width, height, elementColor);
+
+    this.setDOMElement();
+  }
+
+  getDOMElement() {
+    return this.element;
+  }
+
+  setDOMElement() {
+    this.element = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "g"
+    );
+
+    this.element.append(this.rectangle.getDOMElement());
+    this.element.append(this.arc.getDOMElement());
+  }
+}
+
+class Rectangle {
+  cx;
+  cy;
+  r;
+  fill;
+  element;
+
+  constructor(x, y, width, height, fill) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.fill = fill;
+
+    this.setDOMElement();
+  }
+
+  getDOMElement() {
+    return this.element;
+  }
+
+  setDOMElement(x, y, width, height, fill) {
+    this.element = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect"
+    );
+
+    this.element.setAttribute("x", x ? x : this.x);
+    this.element.setAttribute("y", y ? y : this.y);
+    this.element.setAttribute("width", width ? width : this.width);
+    this.element.setAttribute("height", height ? height : this.height);
+    this.element.style.fill = fill ? fill : this.fill;
+  }
+}
+
+class Arc {
+  x;
+  y;
+  width;
+  height;
+  position;
+  fill;
+  path;
+  element;
+
+  constructor(x, y, width, height, stroke) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.points = utils.getRandFromRange(0, settings.points.length - 1);
+    this.points = settings.points[this.points];
+    this.stroke = stroke;
+    this.strokeWidth = 10;
+
+    this.setPath();
+    this.setDOMElement();
+  }
+
+  setPath() {
+    let w = this.width;
+    let h = this.height;
+    let start = this.points[0];
+    let end = this.points[1];
+
+    this.path = `M ${this.x + start[0] * w} ${this.y + start[1] * h} Q ${this.x + settings.arcControlPoint[0] * w} ${this.y + settings.arcControlPoint[1] * h}, ${this.x + end[0] * w} ${this.y + end[1] * h}`;
+  }
+
+  getDOMElement() {
+    return this.element;
+  }
+
+  setDOMElement(x, y, width, height, points, stroke) {
+    this.element = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "path"
+    );
+
+    this.element.setAttribute("d", this.path);
+    this.element.setAttribute("fill", "none");
+    this.element.setAttribute("stroke-width", this.strokeWidth);
+    this.element.classList.add("arc");
+    this.element.style.stroke = stroke ? stroke : this.stroke;
+  }
+}
+
+const illustration = new Illustration(
+  "#illustration",
+  settings.colors
+);
\ No newline at end of file
diff --git a/lines-doing-a-little-group-dance/dist/style.css b/lines-doing-a-little-group-dance/dist/style.css
new file mode 100644
index 0000000..b1d7e3b
--- /dev/null
+++ b/lines-doing-a-little-group-dance/dist/style.css
@@ -0,0 +1,18 @@
+html, body  {
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+}
+
+body {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #0f0d11;
+}
+
+.scene {
+	width: 80vw;
+	height: 80vh;
+}
\ No newline at end of file
diff --git a/lines-doing-a-little-group-dance/license.txt b/lines-doing-a-little-group-dance/license.txt
new file mode 100644
index 0000000..67caf6d
--- /dev/null
+++ b/lines-doing-a-little-group-dance/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Natalia 🤟 (https://codepen.io/natszafraniec/pen/yLzeGzW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/lines-doing-a-little-group-dance/src/index.html b/lines-doing-a-little-group-dance/src/index.html
new file mode 100644
index 0000000..873d706
--- /dev/null
+++ b/lines-doing-a-little-group-dance/src/index.html
@@ -0,0 +1,4 @@
+<svg class="scene" id="illustration" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" aria-labelledby="svgTitle svgDesc" role="img">
+  <title id="svgTitle">A generative animation</title>
+  <desc id="svgDesc">Click on the image to redraw it!</desc>
+</svg>
\ No newline at end of file
diff --git a/lines-doing-a-little-group-dance/src/script.js b/lines-doing-a-little-group-dance/src/script.js
new file mode 100644
index 0000000..64943c1
--- /dev/null
+++ b/lines-doing-a-little-group-dance/src/script.js
@@ -0,0 +1,246 @@
+const settings = {
+  colors: ["#93c7e3", "#5672e1", "#3a159c", "#d85452", "#eeb8b4"],
+  // Using normalized coordinates for arcs
+  points: [
+    [[.5, 0], [0, .5]],
+    [[.5, 0], [1, .5]],
+    [[0, .5], [.5, 1]],
+    [[1, .5], [.5, 1]],
+    [[.5, 1], [.5, 0]],
+    [[1, .5], [0, .5]],
+  ],
+  arcControlPoint: [.5, .5]
+};
+
+const utils = {
+  getRandFromRange: function (min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+};
+
+class Illustration {
+  columnCount;
+  rowCount;
+  boxSize;
+  colors;
+  screen = { width: 0, height: 0 };
+  svg;
+  isAnimated;
+
+  constructor(selector, colors) {
+    this.boxes = [];
+    this.screen = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+
+    this.columnCount = Math.floor(this.screen.width / 100);
+    this.rowCount = Math.floor(this.screen.height / 100);
+    this.boxSize = 50;
+
+    this.setSVG(selector);
+    this.colors = colors;
+
+    this.isAnimated = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
+
+    this.draw();
+  }
+
+  setSVG(selector) {
+    this.svg = document.querySelector(selector);
+    this.svg.addEventListener("click", this.draw.bind(this));
+    this.svg.setAttribute(
+      "viewBox",
+      `0 0 ${this.boxSize * this.columnCount} ${this.boxSize * this.rowCount}`
+    );
+  }
+
+  reset() {
+    this.boxes = [];
+    this.svg.innerHTML = "";
+  }
+
+  draw() {
+    this.reset();
+
+    for (let i = 0; i < this.rowCount; i++) {
+      for (let j = 0; j < this.columnCount; j++) {
+        let elementColor = utils.getRandFromRange(0, this.colors.length - 1);
+
+        const box = new Box(
+          j * this.boxSize,
+          i * this.boxSize,
+          this.boxSize,
+          this.boxSize,
+          this.colors[elementColor]
+        ).getDOMElement();
+
+        this.svg.appendChild(box);
+        this.boxes.push(box);
+      }
+    }
+
+    this.isAnimated ? this.animate() : null;
+  }
+
+  animate() {
+    const duration = 2.75;
+    this.boxes.forEach((box, i) => {
+      const direction = Math.random() > .5 ? 1 : -1;
+      gsap.set(box, {transformOrigin: "50% 50%"});
+      gsap.to(box, {
+        keyframes: [
+          {
+            rotation: 90 * direction,
+            duration: duration,
+            ease: "power2.inOut"
+          },
+          {
+            rotation: 180 * direction,
+            duration: duration,
+            ease: "power2.inOut"
+          },
+          {
+            rotation: 270 * direction,
+            duration: duration,
+            ease: "power2.inOut"
+          },
+          {
+            rotation: 360 * direction,
+            duration: duration,
+            ease: "power2.inOut"
+          }
+        ],
+        repeat: -1,
+      })
+    })
+  }
+}
+
+class Box {
+  x;
+  y;
+  width;
+  height;
+  bgColor;
+  elementColor;
+  element;
+
+  constructor(x, y, width, height, elementColor) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.elementColor = elementColor;
+
+    this.rectangle = new Rectangle(x, y, width, height, "none");
+    this.arc = new Arc(x, y, width, height, elementColor);
+
+    this.setDOMElement();
+  }
+
+  getDOMElement() {
+    return this.element;
+  }
+
+  setDOMElement() {
+    this.element = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "g"
+    );
+
+    this.element.append(this.rectangle.getDOMElement());
+    this.element.append(this.arc.getDOMElement());
+  }
+}
+
+class Rectangle {
+  cx;
+  cy;
+  r;
+  fill;
+  element;
+
+  constructor(x, y, width, height, fill) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.fill = fill;
+
+    this.setDOMElement();
+  }
+
+  getDOMElement() {
+    return this.element;
+  }
+
+  setDOMElement(x, y, width, height, fill) {
+    this.element = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect"
+    );
+
+    this.element.setAttribute("x", x ? x : this.x);
+    this.element.setAttribute("y", y ? y : this.y);
+    this.element.setAttribute("width", width ? width : this.width);
+    this.element.setAttribute("height", height ? height : this.height);
+    this.element.style.fill = fill ? fill : this.fill;
+  }
+}
+
+class Arc {
+  x;
+  y;
+  width;
+  height;
+  position;
+  fill;
+  path;
+  element;
+
+  constructor(x, y, width, height, stroke) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.points = utils.getRandFromRange(0, settings.points.length - 1);
+    this.points = settings.points[this.points];
+    this.stroke = stroke;
+    this.strokeWidth = 10;
+
+    this.setPath();
+    this.setDOMElement();
+  }
+
+  setPath() {
+    let w = this.width;
+    let h = this.height;
+    let start = this.points[0];
+    let end = this.points[1];
+
+    this.path = `M ${this.x + start[0] * w} ${this.y + start[1] * h} Q ${this.x + settings.arcControlPoint[0] * w} ${this.y + settings.arcControlPoint[1] * h}, ${this.x + end[0] * w} ${this.y + end[1] * h}`;
+  }
+
+  getDOMElement() {
+    return this.element;
+  }
+
+  setDOMElement(x, y, width, height, points, stroke) {
+    this.element = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "path"
+    );
+
+    this.element.setAttribute("d", this.path);
+    this.element.setAttribute("fill", "none");
+    this.element.setAttribute("stroke-width", this.strokeWidth);
+    this.element.classList.add("arc");
+    this.element.style.stroke = stroke ? stroke : this.stroke;
+  }
+}
+
+const illustration = new Illustration(
+  "#illustration",
+  settings.colors
+);
diff --git a/lines-doing-a-little-group-dance/src/style.css b/lines-doing-a-little-group-dance/src/style.css
new file mode 100644
index 0000000..b1d7e3b
--- /dev/null
+++ b/lines-doing-a-little-group-dance/src/style.css
@@ -0,0 +1,18 @@
+html, body  {
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+}
+
+body {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #0f0d11;
+}
+
+.scene {
+	width: 80vw;
+	height: 80vh;
+}
\ No newline at end of file
diff --git a/link-hover-animation/README.markdown b/link-hover-animation/README.markdown
new file mode 100644
index 0000000..54647fe
--- /dev/null
+++ b/link-hover-animation/README.markdown
@@ -0,0 +1,5 @@
+# Link hover animation
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/aaroniker/pen/VwjexVy](https://codepen.io/aaroniker/pen/VwjexVy).
+
+
diff --git a/link-hover-animation/dist/index.html b/link-hover-animation/dist/index.html
new file mode 100644
index 0000000..49fa14f
--- /dev/null
+++ b/link-hover-animation/dist/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Link hover animation</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,700&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<p>
+    Check out
+    <a href="#">
+        the link
+        <svg viewBox="0 0 70 36">
+            <path d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527" />
+        </svg>
+    </a>
+    here
+</p>
+
+<!-- dribbble - twitter -->
+<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
+<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/link-hover-animation/dist/style.css b/link-hover-animation/dist/style.css
new file mode 100644
index 0000000..6de3cb9
--- /dev/null
+++ b/link-hover-animation/dist/style.css
@@ -0,0 +1,88 @@
+:root {
+  --text: #2B3044;
+  --line: #BBC1E1;
+  --line-active: #275EFE;
+}
+
+p {
+  font-size: 18px;
+  margin: 0;
+  color: var(--text);
+}
+p a {
+  display: inline-block;
+  position: relative;
+  text-decoration: none;
+  color: inherit;
+  margin: 0 var(--spacing, 0px);
+  -webkit-transition: margin .25s;
+  transition: margin .25s;
+}
+p a svg {
+  width: 76px;
+  height: 40px;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  -webkit-transform: translate(-50%, 7px) translateZ(0);
+          transform: translate(-50%, 7px) translateZ(0);
+  fill: none;
+  stroke: var(--stroke, var(--line));
+  stroke-linecap: round;
+  stroke-width: 2px;
+  stroke-dasharray: var(--offset, 69px) 278px;
+  stroke-dashoffset: 361px;
+  -webkit-transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
+  transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
+}
+p a:hover {
+  --spacing: 4px;
+  --stroke: var(--line-active);
+  --stroke-delay: .1s;
+  --offset: 180px;
+}
+
+html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: inherit;
+}
+*:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  min-height: 100vh;
+  display: -webkit-box;
+  display: flex;
+  font-family: 'Inter', Arial;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  background: #F6F8FF;
+}
+body .dribbble {
+  position: fixed;
+  display: block;
+  right: 20px;
+  bottom: 20px;
+}
+body .dribbble img {
+  display: block;
+  height: 28px;
+}
+body .twitter {
+  position: fixed;
+  display: block;
+  right: 64px;
+  bottom: 14px;
+}
+body .twitter svg {
+  width: 32px;
+  height: 32px;
+  fill: #1da1f2;
+}
\ No newline at end of file
diff --git a/link-hover-animation/license.txt b/link-hover-animation/license.txt
new file mode 100644
index 0000000..962fad9
--- /dev/null
+++ b/link-hover-animation/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Aaron Iker (https://codepen.io/aaroniker/pen/VwjexVy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/link-hover-animation/src/index.html b/link-hover-animation/src/index.html
new file mode 100644
index 0000000..204e6b7
--- /dev/null
+++ b/link-hover-animation/src/index.html
@@ -0,0 +1,14 @@
+<p>
+    Check out
+    <a href="#">
+        the link
+        <svg viewBox="0 0 70 36">
+            <path d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527" />
+        </svg>
+    </a>
+    here
+</p>
+
+<!-- dribbble - twitter -->
+<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
+<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
\ No newline at end of file
diff --git a/link-hover-animation/src/style.scss b/link-hover-animation/src/style.scss
new file mode 100644
index 0000000..271eb10
--- /dev/null
+++ b/link-hover-animation/src/style.scss
@@ -0,0 +1,84 @@
+:root {
+    --text: #2B3044;
+    --line: #BBC1E1;
+    --line-active: #275EFE;
+}
+
+p {
+    font-size: 18px;
+    margin: 0;
+    color: var(--text);
+    a {
+        display: inline-block;
+        position: relative;
+        text-decoration: none;
+        color: inherit;
+        margin: 0 var(--spacing, 0px);
+        transition: margin .25s;
+        svg {
+            width: 76px;
+            height: 40px;
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translate(-50%, 7px) translateZ(0);
+            fill: none;
+            stroke: var(--stroke, var(--line));
+            stroke-linecap: round;
+            stroke-width: 2px;
+            stroke-dasharray: var(--offset, 69px) 278px;
+            stroke-dashoffset: 361px;
+            transition: stroke .25s ease var(--stroke-delay, 0s), stroke-dasharray .35s;
+        }
+        &:hover {
+            --spacing: 4px;
+            --stroke: var(--line-active);
+            --stroke-delay: .1s;
+            --offset: 180px;
+        }
+    }
+}
+
+html {
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+}
+
+* {
+    box-sizing: inherit;
+    &:before,
+    &:after {
+        box-sizing: inherit;
+    }
+}
+
+// Center & dribbble
+body {
+    min-height: 100vh;
+    display: flex;
+    font-family: 'Inter', Arial;
+    justify-content: center;
+    align-items: center;
+    background: #F6F8FF;
+    .dribbble {
+        position: fixed;
+        display: block;
+        right: 20px;
+        bottom: 20px;
+        img {
+            display: block;
+            height: 28px;
+        }
+    }
+    .twitter {
+        position: fixed;
+        display: block;
+        right: 64px;
+        bottom: 14px;
+        svg {
+            width: 32px;
+            height: 32px;
+            fill: #1da1f2;
+        }
+    }
+}
\ No newline at end of file
diff --git a/liquid-grid/README.markdown b/liquid-grid/README.markdown
new file mode 100644
index 0000000..4701be1
--- /dev/null
+++ b/liquid-grid/README.markdown
@@ -0,0 +1,4 @@
+# Liquid Grid
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/soju22/pen/eYmaPOK](https://codepen.io/soju22/pen/eYmaPOK).
+
+ Playing with floating point texture, click to randomize colors :)
\ No newline at end of file
diff --git a/liquid-grid/dist/index.html b/liquid-grid/dist/index.html
new file mode 100644
index 0000000..f70ecb2
--- /dev/null
+++ b/liquid-grid/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Liquid Grid</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canvas"></canvas>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js'></script>
+<script src='https://klevron.github.io/codepen/three.js/OrbitControls.110.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/liquid-grid/dist/script.js b/liquid-grid/dist/script.js
new file mode 100644
index 0000000..888dedb
--- /dev/null
+++ b/liquid-grid/dist/script.js
@@ -0,0 +1,371 @@
+function App() {
+  const conf = {
+    el: 'canvas',
+    fov: 75,
+    cameraZ: 100,
+  };
+
+  let renderer, scene, camera, cameraCtrl;
+  let width, height, cx, cy, wWidth, wHeight;
+
+  let ripple;
+  let gridWWidth, gridWHeight;
+  let gridWidth, gridHeight;
+
+  const mouse = new THREE.Vector2();
+  const mousePlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+  const mousePosition = new THREE.Vector3();
+  const raycaster = new THREE.Raycaster();
+  let mouseOver = false;
+
+  init();
+
+  function init() {
+    // const gl = renderer.getContext();
+    // const floatTextures = gl.getExtension('OES_texture_float');
+    // if (!floatTextures) {
+    //   alert('no floating point texture support');
+    //   return;
+    // }
+
+    renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(conf.el), antialias: true });
+    camera = new THREE.PerspectiveCamera(conf.fov);
+    camera.position.z = conf.cameraZ;
+
+    updateSize();
+    window.addEventListener('resize', updateSize, false);
+
+    // gridWHeight = wHeight - 20;
+    // gridWWidth = gridWHeight;
+    gridWHeight = wHeight;
+    gridWWidth = wWidth;
+    gridWidth = gridWWidth * width / wWidth;
+    gridHeight = gridWHeight * height / wHeight;
+
+    ripple = new RippleEffect(renderer, width, height);
+
+    const getGridMP = function (e) {
+      const v = new THREE.Vector3();
+      camera.getWorldDirection(v);
+      v.normalize();
+      mouse.x = ((e.clientX / width) * 2 - 1);
+      mouse.y = (-(e.clientY / height) * 2 + 1);
+      raycaster.setFromCamera(mouse, camera);
+      raycaster.ray.intersectPlane(mousePlane, mousePosition);
+      return { x: 2 * mousePosition.x / gridWWidth, y: 2 * mousePosition.y / gridWHeight };
+    };
+
+    renderer.domElement.addEventListener('mousemove', e => {
+      mouseOver = true;
+      const gp = getGridMP(e);
+      ripple.addDrop(gp.x, gp.y, 0.05, 0.1);
+    });
+    renderer.domElement.addEventListener('mouseleave', e => { mouseOver = false; });
+
+    // renderer.domElement.addEventListener('mouseup', e => {
+    //   const gp = getGridMP(e);
+    //   ripple.addDrop(gp.x, gp.y, 0.2, -3.0);
+    // });
+
+    initScene();
+    animate();
+  }
+
+  function initScene() {
+    scene = new THREE.Scene();
+
+    let pointLight1 = new THREE.PointLight(0xFFFF80);
+    pointLight1.position.set(-wWidth / 2, wHeight / 2, 50);
+    scene.add(pointLight1);
+
+    let pointLight2 = new THREE.PointLight(0xde3578);
+    pointLight2.position.set(wWidth / 2, wHeight / 2, 50);
+    scene.add(pointLight2);
+
+    let pointLight3 = new THREE.PointLight(0xFF4040);
+    pointLight3.position.set(-wWidth / 2, -wHeight / 2, 50);
+    scene.add(pointLight3);
+
+    let pointLight4 = new THREE.PointLight(0x0247e5);
+    pointLight4.position.set(wWidth / 2, -wHeight / 2, 50);
+    scene.add(pointLight4);
+    
+    renderer.domElement.addEventListener('mouseup', e => {
+      pointLight1.color = new THREE.Color(chroma.random().hex());
+      pointLight2.color = new THREE.Color(chroma.random().hex());
+      pointLight3.color = new THREE.Color(chroma.random().hex());
+      pointLight4.color = new THREE.Color(chroma.random().hex());
+    });
+
+    const material = new THREE.MeshStandardMaterial({ color: 0xffffff, side: THREE.DoubleSide, metalness: 0.5, roughness: 0.5, onBeforeCompile: shader => {
+      shader.uniforms.hmap = { value: ripple.hMap.texture };
+      shader.vertexShader = "uniform sampler2D hmap;\n" + shader.vertexShader;
+      const token = '#include <begin_vertex>';
+      const customTransform = `
+        vec3 transformed = vec3(position);
+        vec4 info = texture2D(hmap, uv);
+        vNormal = vec3(info.b, sqrt(1.0 - dot(info.ba, info.ba)), info.a).xzy;
+        transformed.z = 20. * info.r;
+      `;
+      shader.vertexShader = shader.vertexShader.replace(token, customTransform);
+    } });
+
+    let nx = Math.round(gridWidth / 5), ny = Math.round(gridHeight / 40);
+    let dx = gridWWidth / nx, dy = gridWHeight / ny;
+    for (let j = 0; j <= ny; j++) {
+      const geometry = new THREE.BufferGeometry();
+      const positions = [], uvs = [];
+      const y = - gridWHeight / 2 + j * dy;
+      for (let i = 0; i <= nx; i++) {
+        positions.push(- gridWWidth / 2 + i * dx, y, 0);
+        uvs.push(i / nx, j / ny);
+      }
+      geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+      geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
+      geometry.computeBoundingSphere();
+      scene.add(new THREE.Line(geometry, material));
+    }
+
+    nx = Math.round(gridWidth / 40); ny = Math.round(gridHeight / 5);
+    dx = gridWWidth / nx; dy = gridWHeight / ny;
+    for (let i = 0; i <= nx; i++) {
+      const geometry = new THREE.BufferGeometry();
+      const positions = [], uvs = [];
+      const x = - gridWWidth / 2 + i * dx;
+      for (let j = 0; j <= ny; j++) {
+        positions.push(x, - gridWHeight / 2 + j * dy, 0);
+        uvs.push(i / nx, j / ny);
+      }
+      geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+      geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
+      geometry.computeBoundingSphere();
+      scene.add(new THREE.Line(geometry, material));
+    }
+    camera.position.set(0, -gridWHeight/2, 40);
+    camera.lookAt(new THREE.Vector3(0, -gridWHeight/6, 0));
+
+    cameraCtrl = new THREE.OrbitControls(camera, renderer.domElement);
+    cameraCtrl.enableDamping = true;
+    cameraCtrl.dampingFactor = 0.1;
+    cameraCtrl.rotateSpeed = 0.5;
+  }
+
+  function animate() {
+    if (!mouseOver) {
+      const time = Date.now() * 0.001;
+      const x = Math.cos(time) * 0.2;
+      const y = Math.sin(time) * 0.2;
+      ripple.addDrop(x, y, 0.05, -0.04);
+    }
+
+    ripple.update();
+    renderer.render(scene, camera);
+    requestAnimationFrame(animate);
+  }
+
+  function updateSize() {
+    width = window.innerWidth; cx = width / 2;
+    height = window.innerHeight; cy = height / 2;
+    renderer.setSize(width, height);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+    const wsize = getRendererSize();
+    wWidth = wsize[0]; wHeight = wsize[1];
+  }
+
+  function getRendererSize() {
+    const cam = new THREE.PerspectiveCamera(camera.fov, camera.aspect);
+    const vFOV = (cam.fov * Math.PI) / 180;
+    const height = 2 * Math.tan(vFOV / 2) * Math.abs(conf.cameraZ);
+    const width = height * cam.aspect;
+    return [width, height];
+  }
+}
+
+const RippleEffect = (function () {
+  function RippleEffect(renderer, width, height) {
+    this.renderer = renderer;
+    this.width = 512;
+    this.height = 512;
+    // this.delta = new THREE.Vector2(this.width / Math.pow(width, 2), this.height / Math.pow(height, 2));
+    this.delta = new THREE.Vector2(1 / this.width, 1 / this.height);
+
+    this.hMap = new THREE.WebGLRenderTarget(this.width, this.height, { type: THREE.FloatType, depthBuffer: false, stencilBuffer: false });
+    this.hMap1 = new THREE.WebGLRenderTarget(this.width, this.height, { type: THREE.FloatType, depthBuffer: false, stencilBuffer: false });
+    this.fsQuad = new FullScreenQuad();
+
+    this.initShaders();
+  }
+
+  RippleEffect.prototype.initShaders = function () {
+    // default vertex shader
+    const defaultVertexShader = `
+      varying vec2 vUv;
+      void main() {
+        vUv = uv;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `;
+
+    this.copyMat = new THREE.ShaderMaterial({
+      uniforms: { 'tDiffuse': { value: null } },
+      vertexShader: defaultVertexShader,
+      fragmentShader: `
+        uniform sampler2D tDiffuse;
+        varying vec2 vUv;
+        void main() {
+          gl_FragColor = texture2D(tDiffuse, vUv);
+        }
+      `,
+    });
+
+    this.updateMat = new THREE.ShaderMaterial({
+      uniforms: {
+        'tDiffuse': { value: null },
+        'delta': new THREE.Uniform(this.delta),
+      },
+      vertexShader: defaultVertexShader,
+      fragmentShader: `
+        uniform sampler2D tDiffuse;
+        uniform vec2 delta;
+        varying vec2 vUv;
+        void main() {
+          vec4 texel = texture2D(tDiffuse, vUv);
+
+          vec2 dx = vec2(delta.x, 0.0);
+          vec2 dy = vec2(0.0, delta.y);
+          float average = (
+            texture2D(tDiffuse, vUv - dx).r +
+            texture2D(tDiffuse, vUv - dy).r +
+            texture2D(tDiffuse, vUv + dx).r +
+            texture2D(tDiffuse, vUv + dy).r
+          ) * 0.25;
+          texel.g += (average - texel.r) * 2.0;
+          texel.g *= 0.995;
+          texel.r += texel.g;
+
+          gl_FragColor = texel;
+        }
+      `,
+    });
+
+    this.normalsMat = new THREE.ShaderMaterial({
+      uniforms: {
+        'tDiffuse': { value: null },
+        'delta': new THREE.Uniform(this.delta),
+      },
+      vertexShader: defaultVertexShader,
+      fragmentShader: `
+      uniform sampler2D tDiffuse;
+      uniform vec2 delta;
+      varying vec2 vUv;
+      void main() {
+        vec4 texel = texture2D(tDiffuse, vUv);
+        vec3 dx = vec3(delta.x, texture2D(tDiffuse, vec2(vUv.x + delta.x, vUv.y)).r - texel.r, 0.0);
+        vec3 dy = vec3(0.0, texture2D(tDiffuse, vec2(vUv.x, vUv.y + delta.y)).r - texel.r, delta.y);
+        texel.ba = normalize(cross(dy, dx)).xz;
+        gl_FragColor = texel;
+      }
+    `,
+    });
+
+    this.dropMat = new THREE.ShaderMaterial({
+      uniforms: {
+        'tDiffuse': { value: null },
+        'center': new THREE.Uniform(new THREE.Vector2()),
+        'radius': { value: 0.05 },
+        'strength': { value: 0.5 },
+      },
+      vertexShader: defaultVertexShader,
+      fragmentShader: `
+        const float PI = 3.1415926535897932384626433832795;
+        uniform sampler2D tDiffuse;
+        uniform vec2 center;
+        uniform float radius;
+        uniform float strength;
+        varying vec2 vUv;
+        void main() {
+          vec4 texel = texture2D(tDiffuse, vUv);
+          float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - vUv) / radius);
+          drop = 0.5 - cos(drop * PI) * 0.5;
+          texel.r += drop * strength;
+          // texel.r = clamp(texel.r, -2.0, 2.0);
+          gl_FragColor = texel;
+        }
+      `,
+    });
+  };
+
+  RippleEffect.prototype.update = function () {
+    this.updateHMap();
+    this.updateHMapNormals();
+  };
+
+  RippleEffect.prototype.updateHMap = function () {
+    this.updateMat.uniforms.tDiffuse.value = this.hMap.texture;
+    this.renderShaderMat(this.updateMat, this.hMap1);
+    this.swapBuffers();
+  };
+
+  RippleEffect.prototype.updateHMapNormals = function () {
+    this.normalsMat.uniforms.tDiffuse.value = this.hMap.texture;
+    this.renderShaderMat(this.normalsMat, this.hMap1);
+    this.swapBuffers();
+  };
+
+  RippleEffect.prototype.addDrop = function (x, y, radius, strength) {
+    this.dropMat.uniforms.tDiffuse.value = this.hMap.texture;
+    this.dropMat.uniforms.center.value.set(x, y);
+    this.dropMat.uniforms.radius.value = radius;
+    this.dropMat.uniforms.strength.value = strength;
+    this.renderShaderMat(this.dropMat, this.hMap1);
+    this.swapBuffers();
+  };
+
+  RippleEffect.prototype.renderBuffer = function (buffer, target) {
+    target = target ? target : null;
+    this.copyMat.uniforms.tDiffuse.value = buffer.texture;
+    this.renderShaderMat(this.copyMat, target);
+  };
+
+  RippleEffect.prototype.renderShaderMat = function (mat, target) {
+    this.fsQuad.material = mat;
+    const oldTarget = this.renderer.getRenderTarget();
+    this.renderer.setRenderTarget(target);
+    this.fsQuad.render(this.renderer);
+    this.renderer.setRenderTarget(oldTarget);
+  };
+
+  RippleEffect.prototype.swapBuffers = function () {
+    const temp = this.hMap;
+    this.hMap = this.hMap1;
+    this.hMap1 = temp;
+  };
+
+  // from https://threejs.org/examples/js/postprocessing/EffectComposer.js
+  const FullScreenQuad = (function () {
+    const camera = new THREE.OrthographicCamera(- 1, 1, 1, - 1, 0, 1);
+    const geometry = new THREE.PlaneBufferGeometry(2, 2);
+
+    const FullScreenQuad = function (material) {
+      this._mesh = new THREE.Mesh(geometry, material);
+    };
+
+    Object.defineProperty(FullScreenQuad.prototype, 'material', {
+      get: function () { return this._mesh.material; },
+      set: function (value) { this._mesh.material = value; }
+    });
+
+    Object.assign(FullScreenQuad.prototype, {
+      render: function (renderer) {
+        renderer.render(this._mesh, camera);
+      }
+    });
+
+    return FullScreenQuad;
+  })();
+
+  return RippleEffect;
+})();
+
+App();
\ No newline at end of file
diff --git a/liquid-grid/dist/style.css b/liquid-grid/dist/style.css
new file mode 100644
index 0000000..397abad
--- /dev/null
+++ b/liquid-grid/dist/style.css
@@ -0,0 +1,7 @@
+html, body {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+}
\ No newline at end of file
diff --git a/liquid-grid/license.txt b/liquid-grid/license.txt
new file mode 100644
index 0000000..01c24c1
--- /dev/null
+++ b/liquid-grid/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Kevin Levron (https://codepen.io/soju22/pen/eYmaPOK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/liquid-grid/src/index.html b/liquid-grid/src/index.html
new file mode 100644
index 0000000..c06ca25
--- /dev/null
+++ b/liquid-grid/src/index.html
@@ -0,0 +1 @@
+<canvas id="canvas"></canvas>
diff --git a/liquid-grid/src/script.js b/liquid-grid/src/script.js
new file mode 100644
index 0000000..cab006f
--- /dev/null
+++ b/liquid-grid/src/script.js
@@ -0,0 +1,371 @@
+function App() {
+  const conf = {
+    el: 'canvas',
+    fov: 75,
+    cameraZ: 100,
+  };
+
+  let renderer, scene, camera, cameraCtrl;
+  let width, height, cx, cy, wWidth, wHeight;
+
+  let ripple;
+  let gridWWidth, gridWHeight;
+  let gridWidth, gridHeight;
+
+  const mouse = new THREE.Vector2();
+  const mousePlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+  const mousePosition = new THREE.Vector3();
+  const raycaster = new THREE.Raycaster();
+  let mouseOver = false;
+
+  init();
+
+  function init() {
+    // const gl = renderer.getContext();
+    // const floatTextures = gl.getExtension('OES_texture_float');
+    // if (!floatTextures) {
+    //   alert('no floating point texture support');
+    //   return;
+    // }
+
+    renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(conf.el), antialias: true });
+    camera = new THREE.PerspectiveCamera(conf.fov);
+    camera.position.z = conf.cameraZ;
+
+    updateSize();
+    window.addEventListener('resize', updateSize, false);
+
+    // gridWHeight = wHeight - 20;
+    // gridWWidth = gridWHeight;
+    gridWHeight = wHeight;
+    gridWWidth = wWidth;
+    gridWidth = gridWWidth * width / wWidth;
+    gridHeight = gridWHeight * height / wHeight;
+
+    ripple = new RippleEffect(renderer, width, height);
+
+    const getGridMP = function (e) {
+      const v = new THREE.Vector3();
+      camera.getWorldDirection(v);
+      v.normalize();
+      mouse.x = ((e.clientX / width) * 2 - 1);
+      mouse.y = (-(e.clientY / height) * 2 + 1);
+      raycaster.setFromCamera(mouse, camera);
+      raycaster.ray.intersectPlane(mousePlane, mousePosition);
+      return { x: 2 * mousePosition.x / gridWWidth, y: 2 * mousePosition.y / gridWHeight };
+    };
+
+    renderer.domElement.addEventListener('mousemove', e => {
+      mouseOver = true;
+      const gp = getGridMP(e);
+      ripple.addDrop(gp.x, gp.y, 0.05, 0.1);
+    });
+    renderer.domElement.addEventListener('mouseleave', e => { mouseOver = false; });
+
+    // renderer.domElement.addEventListener('mouseup', e => {
+    //   const gp = getGridMP(e);
+    //   ripple.addDrop(gp.x, gp.y, 0.2, -3.0);
+    // });
+
+    initScene();
+    animate();
+  }
+
+  function initScene() {
+    scene = new THREE.Scene();
+
+    let pointLight1 = new THREE.PointLight(0xFFFF80);
+    pointLight1.position.set(-wWidth / 2, wHeight / 2, 50);
+    scene.add(pointLight1);
+
+    let pointLight2 = new THREE.PointLight(0xde3578);
+    pointLight2.position.set(wWidth / 2, wHeight / 2, 50);
+    scene.add(pointLight2);
+
+    let pointLight3 = new THREE.PointLight(0xFF4040);
+    pointLight3.position.set(-wWidth / 2, -wHeight / 2, 50);
+    scene.add(pointLight3);
+
+    let pointLight4 = new THREE.PointLight(0x0247e5);
+    pointLight4.position.set(wWidth / 2, -wHeight / 2, 50);
+    scene.add(pointLight4);
+    
+    renderer.domElement.addEventListener('mouseup', e => {
+      pointLight1.color = new THREE.Color(chroma.random().hex());
+      pointLight2.color = new THREE.Color(chroma.random().hex());
+      pointLight3.color = new THREE.Color(chroma.random().hex());
+      pointLight4.color = new THREE.Color(chroma.random().hex());
+    });
+
+    const material = new THREE.MeshStandardMaterial({ color: 0xffffff, side: THREE.DoubleSide, metalness: 0.5, roughness: 0.5, onBeforeCompile: shader => {
+      shader.uniforms.hmap = { value: ripple.hMap.texture };
+      shader.vertexShader = "uniform sampler2D hmap;\n" + shader.vertexShader;
+      const token = '#include <begin_vertex>';
+      const customTransform = `
+        vec3 transformed = vec3(position);
+        vec4 info = texture2D(hmap, uv);
+        vNormal = vec3(info.b, sqrt(1.0 - dot(info.ba, info.ba)), info.a).xzy;
+        transformed.z = 20. * info.r;
+      `;
+      shader.vertexShader = shader.vertexShader.replace(token, customTransform);
+    } });
+
+    let nx = Math.round(gridWidth / 5), ny = Math.round(gridHeight / 40);
+    let dx = gridWWidth / nx, dy = gridWHeight / ny;
+    for (let j = 0; j <= ny; j++) {
+      const geometry = new THREE.BufferGeometry();
+      const positions = [], uvs = [];
+      const y = - gridWHeight / 2 + j * dy;
+      for (let i = 0; i <= nx; i++) {
+        positions.push(- gridWWidth / 2 + i * dx, y, 0);
+        uvs.push(i / nx, j / ny);
+      }
+      geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+      geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
+      geometry.computeBoundingSphere();
+      scene.add(new THREE.Line(geometry, material));
+    }
+
+    nx = Math.round(gridWidth / 40); ny = Math.round(gridHeight / 5);
+    dx = gridWWidth / nx; dy = gridWHeight / ny;
+    for (let i = 0; i <= nx; i++) {
+      const geometry = new THREE.BufferGeometry();
+      const positions = [], uvs = [];
+      const x = - gridWWidth / 2 + i * dx;
+      for (let j = 0; j <= ny; j++) {
+        positions.push(x, - gridWHeight / 2 + j * dy, 0);
+        uvs.push(i / nx, j / ny);
+      }
+      geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+      geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
+      geometry.computeBoundingSphere();
+      scene.add(new THREE.Line(geometry, material));
+    }
+    camera.position.set(0, -gridWHeight/2, 40);
+    camera.lookAt(new THREE.Vector3(0, -gridWHeight/6, 0));
+
+    cameraCtrl = new THREE.OrbitControls(camera, renderer.domElement);
+    cameraCtrl.enableDamping = true;
+    cameraCtrl.dampingFactor = 0.1;
+    cameraCtrl.rotateSpeed = 0.5;
+  }
+
+  function animate() {
+    if (!mouseOver) {
+      const time = Date.now() * 0.001;
+      const x = Math.cos(time) * 0.2;
+      const y = Math.sin(time) * 0.2;
+      ripple.addDrop(x, y, 0.05, -0.04);
+    }
+
+    ripple.update();
+    renderer.render(scene, camera);
+    requestAnimationFrame(animate);
+  }
+
+  function updateSize() {
+    width = window.innerWidth; cx = width / 2;
+    height = window.innerHeight; cy = height / 2;
+    renderer.setSize(width, height);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+    const wsize = getRendererSize();
+    wWidth = wsize[0]; wHeight = wsize[1];
+  }
+
+  function getRendererSize() {
+    const cam = new THREE.PerspectiveCamera(camera.fov, camera.aspect);
+    const vFOV = (cam.fov * Math.PI) / 180;
+    const height = 2 * Math.tan(vFOV / 2) * Math.abs(conf.cameraZ);
+    const width = height * cam.aspect;
+    return [width, height];
+  }
+}
+
+const RippleEffect = (function () {
+  function RippleEffect(renderer, width, height) {
+    this.renderer = renderer;
+    this.width = 512;
+    this.height = 512;
+    // this.delta = new THREE.Vector2(this.width / Math.pow(width, 2), this.height / Math.pow(height, 2));
+    this.delta = new THREE.Vector2(1 / this.width, 1 / this.height);
+
+    this.hMap = new THREE.WebGLRenderTarget(this.width, this.height, { type: THREE.FloatType, depthBuffer: false, stencilBuffer: false });
+    this.hMap1 = new THREE.WebGLRenderTarget(this.width, this.height, { type: THREE.FloatType, depthBuffer: false, stencilBuffer: false });
+    this.fsQuad = new FullScreenQuad();
+
+    this.initShaders();
+  }
+
+  RippleEffect.prototype.initShaders = function () {
+    // default vertex shader
+    const defaultVertexShader = `
+      varying vec2 vUv;
+      void main() {
+        vUv = uv;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `;
+
+    this.copyMat = new THREE.ShaderMaterial({
+      uniforms: { 'tDiffuse': { value: null } },
+      vertexShader: defaultVertexShader,
+      fragmentShader: `
+        uniform sampler2D tDiffuse;
+        varying vec2 vUv;
+        void main() {
+          gl_FragColor = texture2D(tDiffuse, vUv);
+        }
+      `,
+    });
+
+    this.updateMat = new THREE.ShaderMaterial({
+      uniforms: {
+        'tDiffuse': { value: null },
+        'delta': new THREE.Uniform(this.delta),
+      },
+      vertexShader: defaultVertexShader,
+      fragmentShader: `
+        uniform sampler2D tDiffuse;
+        uniform vec2 delta;
+        varying vec2 vUv;
+        void main() {
+          vec4 texel = texture2D(tDiffuse, vUv);
+
+          vec2 dx = vec2(delta.x, 0.0);
+          vec2 dy = vec2(0.0, delta.y);
+          float average = (
+            texture2D(tDiffuse, vUv - dx).r +
+            texture2D(tDiffuse, vUv - dy).r +
+            texture2D(tDiffuse, vUv + dx).r +
+            texture2D(tDiffuse, vUv + dy).r
+          ) * 0.25;
+          texel.g += (average - texel.r) * 2.0;
+          texel.g *= 0.995;
+          texel.r += texel.g;
+
+          gl_FragColor = texel;
+        }
+      `,
+    });
+
+    this.normalsMat = new THREE.ShaderMaterial({
+      uniforms: {
+        'tDiffuse': { value: null },
+        'delta': new THREE.Uniform(this.delta),
+      },
+      vertexShader: defaultVertexShader,
+      fragmentShader: `
+      uniform sampler2D tDiffuse;
+      uniform vec2 delta;
+      varying vec2 vUv;
+      void main() {
+        vec4 texel = texture2D(tDiffuse, vUv);
+        vec3 dx = vec3(delta.x, texture2D(tDiffuse, vec2(vUv.x + delta.x, vUv.y)).r - texel.r, 0.0);
+        vec3 dy = vec3(0.0, texture2D(tDiffuse, vec2(vUv.x, vUv.y + delta.y)).r - texel.r, delta.y);
+        texel.ba = normalize(cross(dy, dx)).xz;
+        gl_FragColor = texel;
+      }
+    `,
+    });
+
+    this.dropMat = new THREE.ShaderMaterial({
+      uniforms: {
+        'tDiffuse': { value: null },
+        'center': new THREE.Uniform(new THREE.Vector2()),
+        'radius': { value: 0.05 },
+        'strength': { value: 0.5 },
+      },
+      vertexShader: defaultVertexShader,
+      fragmentShader: `
+        const float PI = 3.1415926535897932384626433832795;
+        uniform sampler2D tDiffuse;
+        uniform vec2 center;
+        uniform float radius;
+        uniform float strength;
+        varying vec2 vUv;
+        void main() {
+          vec4 texel = texture2D(tDiffuse, vUv);
+          float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - vUv) / radius);
+          drop = 0.5 - cos(drop * PI) * 0.5;
+          texel.r += drop * strength;
+          // texel.r = clamp(texel.r, -2.0, 2.0);
+          gl_FragColor = texel;
+        }
+      `,
+    });
+  };
+
+  RippleEffect.prototype.update = function () {
+    this.updateHMap();
+    this.updateHMapNormals();
+  };
+
+  RippleEffect.prototype.updateHMap = function () {
+    this.updateMat.uniforms.tDiffuse.value = this.hMap.texture;
+    this.renderShaderMat(this.updateMat, this.hMap1);
+    this.swapBuffers();
+  };
+
+  RippleEffect.prototype.updateHMapNormals = function () {
+    this.normalsMat.uniforms.tDiffuse.value = this.hMap.texture;
+    this.renderShaderMat(this.normalsMat, this.hMap1);
+    this.swapBuffers();
+  };
+
+  RippleEffect.prototype.addDrop = function (x, y, radius, strength) {
+    this.dropMat.uniforms.tDiffuse.value = this.hMap.texture;
+    this.dropMat.uniforms.center.value.set(x, y);
+    this.dropMat.uniforms.radius.value = radius;
+    this.dropMat.uniforms.strength.value = strength;
+    this.renderShaderMat(this.dropMat, this.hMap1);
+    this.swapBuffers();
+  };
+
+  RippleEffect.prototype.renderBuffer = function (buffer, target) {
+    target = target ? target : null;
+    this.copyMat.uniforms.tDiffuse.value = buffer.texture;
+    this.renderShaderMat(this.copyMat, target);
+  };
+
+  RippleEffect.prototype.renderShaderMat = function (mat, target) {
+    this.fsQuad.material = mat;
+    const oldTarget = this.renderer.getRenderTarget();
+    this.renderer.setRenderTarget(target);
+    this.fsQuad.render(this.renderer);
+    this.renderer.setRenderTarget(oldTarget);
+  };
+
+  RippleEffect.prototype.swapBuffers = function () {
+    const temp = this.hMap;
+    this.hMap = this.hMap1;
+    this.hMap1 = temp;
+  };
+
+  // from https://threejs.org/examples/js/postprocessing/EffectComposer.js
+  const FullScreenQuad = (function () {
+    const camera = new THREE.OrthographicCamera(- 1, 1, 1, - 1, 0, 1);
+    const geometry = new THREE.PlaneBufferGeometry(2, 2);
+
+    const FullScreenQuad = function (material) {
+      this._mesh = new THREE.Mesh(geometry, material);
+    };
+
+    Object.defineProperty(FullScreenQuad.prototype, 'material', {
+      get: function () { return this._mesh.material; },
+      set: function (value) { this._mesh.material = value; }
+    });
+
+    Object.assign(FullScreenQuad.prototype, {
+      render: function (renderer) {
+        renderer.render(this._mesh, camera);
+      }
+    });
+
+    return FullScreenQuad;
+  })();
+
+  return RippleEffect;
+})();
+
+App();
diff --git a/liquid-grid/src/style.css b/liquid-grid/src/style.css
new file mode 100644
index 0000000..0598007
--- /dev/null
+++ b/liquid-grid/src/style.css
@@ -0,0 +1,7 @@
+html, body {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+}
diff --git a/liquid-maskingscroll/README.markdown b/liquid-maskingscroll/README.markdown
new file mode 100644
index 0000000..0b00e86
--- /dev/null
+++ b/liquid-maskingscroll/README.markdown
@@ -0,0 +1,5 @@
+# Liquid masking - scroll
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cassie-codes/pen/RwRORqB](https://codepen.io/cassie-codes/pen/RwRORqB).
+
+
diff --git a/liquid-maskingscroll/dist/index.html b/liquid-maskingscroll/dist/index.html
new file mode 100644
index 0000000..85a68ed
--- /dev/null
+++ b/liquid-maskingscroll/dist/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Liquid masking - scroll</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>SVG MASKING</h1>
+
+<svg id="ourSVG" viewBox="0 0 800 1000">
+	<image opacity="0.65" mask="url('#myMask')" preserveAspectRatio="xMidYMid slice" href="https://images.unsplash.com/photo-1599146348750-b9ea22c672ff?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" height="100%" width="100%" />
+
+	<mask id="myMask">
+		<path id="wobble" d="M53.48-414.83C-36.82-373-33.76-278.17-19.91-194c12.17,74,66.56,136.46,2.05,205.61s-109.6,66-153.69,147.16,31,143.15-55,230.15-274,14.62-267,206S-750.66,726.14-680.2,819.76c75,99.68,487.9,207.62,632,282.55,342.19,177.9,764,148.24,902.86-42.68C994.14,867.89,1031.26,327.21,819.11-35.12,647.45-328.3,300.19-406.44,276.48-428.27,223.48-477.07,92.55-432.94,53.48-414.83Z" fill="white" />
+	</mask>
+</svg>
+
+<!-- ignore this -->
+<svg class="scroll" viewBox="0 0 200 174" aria-labelledby="myName" role="img">
+	<title id="myName">scroll down</title>
+	<g fill="currentColor">
+		<path d="M21.08,109.53l-1.91,0a10.29,10.29,0,0,0,1.21-4.36,3.94,3.94,0,0,0-.3-1.59,2.42,2.42,0,0,0-.89-1.15,2.33,2.33,0,0,0-1.29-.4,2.48,2.48,0,0,0-1.54.51,6.81,6.81,0,0,0-1.59,2l-.61,1-.61,1c-1.11,1.82-2.46,2.72-4.07,2.7a4,4,0,0,1-3-1.27,5.31,5.31,0,0,1-1.16-3.84,11.25,11.25,0,0,1,.52-3.23l1.74,0a9.62,9.62,0,0,0-.7,3.35,3.11,3.11,0,0,0,.66,2.1,2.12,2.12,0,0,0,1.65.83,2.21,2.21,0,0,0,1.6-.6A6.6,6.6,0,0,0,12,105l.48-.78.61-1,.49-.8a4.59,4.59,0,0,1,4-2.52,4.18,4.18,0,0,1,3.09,1.36,5.83,5.83,0,0,1,1.25,4.24,10,10,0,0,1-.18,1.77A15,15,0,0,1,21.08,109.53Z" />
+		<path d="M23.11,88.4a8.93,8.93,0,0,1,.14,3.21,6.19,6.19,0,0,1-1.52,3.17,6.35,6.35,0,0,1-3.27,1.89,10.73,10.73,0,0,1-4.47.14,10.83,10.83,0,0,1-4.17-1.55,6.5,6.5,0,0,1-2.51-2.83,6.15,6.15,0,0,1-.43-3.52,9.2,9.2,0,0,1,1.15-3l1.83.31a6.35,6.35,0,0,0-1.45,3,3.42,3.42,0,0,0,.45,2.31,5.73,5.73,0,0,0,2.13,2,10,10,0,0,0,6.91,1.12,5.68,5.68,0,0,0,2.65-1.21,3.42,3.42,0,0,0,1.15-2,6.5,6.5,0,0,0-.41-3.34Z" />
+		<path d="M18.15,82.13l6.34,2-.63,1.93L9,81.31l1.28-4a8.2,8.2,0,0,1,1.32-2.73,3.16,3.16,0,0,1,1.66-1,3.41,3.41,0,0,1,1.9.06,5,5,0,0,1,1.62.89A5.65,5.65,0,0,1,18,75.93a6.46,6.46,0,0,1,.76,2.12L27.12,76l-.74,2.3L18.77,80.2Zm-1.48-.48.87-2.71A5.18,5.18,0,0,0,17,77.26a4,4,0,0,0-.88-1,3.34,3.34,0,0,0-1.1-.61,2.16,2.16,0,0,0-1.92.22,4.76,4.76,0,0,0-1.5,2.57l-.47,1.44Z" />
+		<path d="M30.18,70.89a4.5,4.5,0,0,1-3.82,2.64,11.25,11.25,0,0,1-6.05-1.43,11.28,11.28,0,0,1-4.79-4,4.81,4.81,0,0,1,3.62-7.29,11.33,11.33,0,0,1,6,1.44A11.31,11.31,0,0,1,30,66.24,4.52,4.52,0,0,1,30.18,70.89Zm-1.4-.7a2.85,2.85,0,0,0-.4-2.94,10.21,10.21,0,0,0-4.1-3.13,10.24,10.24,0,0,0-5-1.38,2.64,2.64,0,0,0-2.19,4.4,10.21,10.21,0,0,0,4.1,3.13,10.21,10.21,0,0,0,5,1.38A2.85,2.85,0,0,0,28.78,70.19Z" />
+		<path d="M37,55.88l1.41,1-4.86,6.9-12.8-9,1.17-1.67,11.4,8Z" />
+		<path d="M45.14,47l1.24,1.2-5.83,6.09L29.24,43.45,30.65,42,40.71,51.6Z" />
+		<path d="M58,39.19,50.34,25.52l3.24-1.8a6.62,6.62,0,0,1,3.76-1.08,5.37,5.37,0,0,1,2.94,1.45,13.06,13.06,0,0,1,2.63,3.43,11.64,11.64,0,0,1,1.42,3.91,6.07,6.07,0,0,1-.3,3.28,6.09,6.09,0,0,1-2.83,2.67Zm.94-2.5L60.08,36A4.57,4.57,0,0,0,62.29,34a4,4,0,0,0,.11-2.39A13.61,13.61,0,0,0,61,28.22a10.46,10.46,0,0,0-2.07-2.8,4,4,0,0,0-2-1,4.42,4.42,0,0,0-2.68.75l-1.33.74Z" />
+		<path d="M72.88,32.41a4.52,4.52,0,0,1-4.59-.67,11.26,11.26,0,0,1-3.45-5.18A11.31,11.31,0,0,1,64,20.41a4.82,4.82,0,0,1,7.62-2.87,11.48,11.48,0,0,1,3.44,5.17,11.5,11.5,0,0,1,.82,6.17A4.52,4.52,0,0,1,72.88,32.41ZM72.33,31A2.86,2.86,0,0,0,74,28.52a10.23,10.23,0,0,0-.86-5.09A10.15,10.15,0,0,0,70.48,19a2.64,2.64,0,0,0-4.59,1.73,10.07,10.07,0,0,0,.86,5.08,10.2,10.2,0,0,0,2.7,4.4A2.85,2.85,0,0,0,72.33,31Z" />
+		<path d="M80.05,29.5,75,14.57l1.81-.38,3,9.1.47,1.51h0l-.13-1.59-.36-9.66,1.8-.38,3.9,9.3.5,1.44h0l-.2-1.52L85,12.45l1.56-.33L88,27.81l-1.88.4-4.18-9.95-.54-1.51h0l.15,1.59.43,10.75Z" />
+		<path d="M92.77,27.24l-1.87.11L90,11.73l1.83-.1L97.94,21.7l.69,1.52h.06l-.15-1.54-.6-10.4,1.87-.11.91,15.62-1.87.11-6-9.91L92,15.39,92.17,17Z" />
+		<path d="M115.47,28.25l4-15.14,8.32,2.17-.39,1.51L121,15.13l-1.35,5.15,5.75,1.5-.4,1.51-5.74-1.5-1.82,7Z" />
+		<path d="M130.38,33.36a4.54,4.54,0,0,1-2.91-3.63,11.34,11.34,0,0,1,1-6.13,11.32,11.32,0,0,1,3.61-5.06,4.8,4.8,0,0,1,7.52,3.1,11.29,11.29,0,0,1-1,6.12,11.36,11.36,0,0,1-3.6,5.07A4.51,4.51,0,0,1,130.38,33.36Zm.59-1.45a2.84,2.84,0,0,0,2.91-.61A10.17,10.17,0,0,0,136.71,27a10.25,10.25,0,0,0,1-5,2.64,2.64,0,0,0-4.54-1.87,10.24,10.24,0,0,0-2.83,4.31,10.14,10.14,0,0,0-1,5.05A2.83,2.83,0,0,0,131,31.91Z" />
+		<path d="M142.27,31.16l-3.43,5.7-1.75-1,8.06-13.41,3.59,2.15a8.3,8.3,0,0,1,2.36,1.91,3.2,3.2,0,0,1,.63,1.86,3.43,3.43,0,0,1-.48,1.83A5.22,5.22,0,0,1,150,31.53a5.7,5.7,0,0,1-1.68.9,6.2,6.2,0,0,1-2.23.25l.11,8.61L144.13,40,144,32.2Zm.8-1.34,2.44,1.46a5.07,5.07,0,0,0,1.77-.18,4,4,0,0,0,1.21-.63,3.35,3.35,0,0,0,.84-.93,2.16,2.16,0,0,0,.22-1.92,4.76,4.76,0,0,0-2.15-2.05l-1.31-.78Z" />
+		<path d="M163.43,55.34l-1.28,1.15-5.63-6.3L168.2,39.77,173.72,46l-1.17,1-4.17-4.67-4,3.54,3.75,4.2-1.17,1-3.75-4.2-4.08,3.64Z" />
+		<path d="M164.35,59.41l13.09-8.56,4.71,7.2-1.31.86-3.59-5.5-4.46,2.92,3.25,5-1.3.85-3.25-5-6,3.94Z" />
+		<path d="M170.58,69.49,184.8,63l3.58,7.82-1.42.65-2.73-6-4.84,2.22,2.47,5.4-1.42.65L178,68.34l-6.55,3Z" />
+		<path d="M179.16,87.8l-1.65.47-2.34-8.11,15-4.33,2.29,8-1.51.43-1.73-6-5.11,1.47,1.56,5.42-1.5.43-1.56-5.42-5.26,1.52Z" />
+		<path d="M179.52,100.42a9,9,0,0,1-1.06-3,6.14,6.14,0,0,1,.54-3.48,6.42,6.42,0,0,1,2.59-2.75A11.62,11.62,0,0,1,190.27,90a6.4,6.4,0,0,1,3.22,2,6.12,6.12,0,0,1,1.43,3.24,9.14,9.14,0,0,1-.24,3.2l-1.84.24a6.49,6.49,0,0,0,.52-3.32,3.45,3.45,0,0,0-1.11-2.09A5.72,5.72,0,0,0,189.64,92a10.15,10.15,0,0,0-6.94.92,5.83,5.83,0,0,0-2.19,1.92,3.47,3.47,0,0,0-.51,2.28,6.51,6.51,0,0,0,1.35,3.08Z" />
+		<path d="M179.38,106.51l13.92.3.1-4.68,1.72,0-.24,11.41-1.73,0,.1-4.68-13.91-.31Z" />
+	</g>
+	<line x1="105.86" y1="80" x2="105.86" y2="130" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
+	<line x1="105.86" y1="130" x2="97" y2="121.15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
+	<line x1="105.89" y1="130.01" x2="114.74" y2="121.15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
+</svg>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
+<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/liquid-maskingscroll/dist/script.js b/liquid-maskingscroll/dist/script.js
new file mode 100644
index 0000000..abdbf07
--- /dev/null
+++ b/liquid-maskingscroll/dist/script.js
@@ -0,0 +1,13 @@
+gsap.from("#wobble", {
+	xPercent: 100,
+	yPercent: 100,
+	ease: "power2.out",
+	duration: 2,
+	scrollTrigger: {
+		trigger: "#ourSVG",
+		pin: true, // pin the trigger element while active
+		start: "center 40%", // when the center of the trigger hits 40% from the top of the viewport
+		end: "+=1000", // end after scrolling 1000px beyond the start
+		scrub: 2 // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
+	}
+});
\ No newline at end of file
diff --git a/liquid-maskingscroll/dist/style.css b/liquid-maskingscroll/dist/style.css
new file mode 100644
index 0000000..637972a
--- /dev/null
+++ b/liquid-maskingscroll/dist/style.css
@@ -0,0 +1,43 @@
+@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@800&display=swap");
+
+body {
+	height: 500vh;
+	background: url(https://assets.codepen.io/756881/bg-fuzz);
+	background-size: cover;
+	background-position: center;
+	background-attachment: fixed;
+	font-family: "Kanit", sans-serif;
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+}
+
+h1 {
+	position: fixed;
+	z-index: 1;
+	top: 60vh;
+	margin: 0;
+	transform: translateY(-50%);
+	text-align: center;
+	color: white;
+	letter-spacing: 2px;
+	font-size: clamp(16px, 13vw, 100px);
+	color: #fffff8;
+	font-size: clamp(16px, 14vw, 100px);
+	text-align: center;
+}
+
+svg {
+	margin-top: 80vh;
+	max-height: 60vh;
+	width: 500px;
+}
+
+.scroll {
+	position: fixed;
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 120px;
+	color: white;
+}
\ No newline at end of file
diff --git a/liquid-maskingscroll/license.txt b/liquid-maskingscroll/license.txt
new file mode 100644
index 0000000..90917be
--- /dev/null
+++ b/liquid-maskingscroll/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Cassie Evans (https://codepen.io/cassie-codes/pen/RwRORqB)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/liquid-maskingscroll/src/index.html b/liquid-maskingscroll/src/index.html
new file mode 100644
index 0000000..58e622e
--- /dev/null
+++ b/liquid-maskingscroll/src/index.html
@@ -0,0 +1,38 @@
+<h1>SVG MASKING</h1>
+
+<svg id="ourSVG" viewBox="0 0 800 1000">
+	<image opacity="0.65" mask="url('#myMask')" preserveAspectRatio="xMidYMid slice" href="https://images.unsplash.com/photo-1599146348750-b9ea22c672ff?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" height="100%" width="100%" />
+
+	<mask id="myMask">
+		<path id="wobble" d="M53.48-414.83C-36.82-373-33.76-278.17-19.91-194c12.17,74,66.56,136.46,2.05,205.61s-109.6,66-153.69,147.16,31,143.15-55,230.15-274,14.62-267,206S-750.66,726.14-680.2,819.76c75,99.68,487.9,207.62,632,282.55,342.19,177.9,764,148.24,902.86-42.68C994.14,867.89,1031.26,327.21,819.11-35.12,647.45-328.3,300.19-406.44,276.48-428.27,223.48-477.07,92.55-432.94,53.48-414.83Z" fill="white" />
+	</mask>
+</svg>
+
+<!-- ignore this -->
+<svg class="scroll" viewBox="0 0 200 174" aria-labelledby="myName" role="img">
+	<title id="myName">scroll down</title>
+	<g fill="currentColor">
+		<path d="M21.08,109.53l-1.91,0a10.29,10.29,0,0,0,1.21-4.36,3.94,3.94,0,0,0-.3-1.59,2.42,2.42,0,0,0-.89-1.15,2.33,2.33,0,0,0-1.29-.4,2.48,2.48,0,0,0-1.54.51,6.81,6.81,0,0,0-1.59,2l-.61,1-.61,1c-1.11,1.82-2.46,2.72-4.07,2.7a4,4,0,0,1-3-1.27,5.31,5.31,0,0,1-1.16-3.84,11.25,11.25,0,0,1,.52-3.23l1.74,0a9.62,9.62,0,0,0-.7,3.35,3.11,3.11,0,0,0,.66,2.1,2.12,2.12,0,0,0,1.65.83,2.21,2.21,0,0,0,1.6-.6A6.6,6.6,0,0,0,12,105l.48-.78.61-1,.49-.8a4.59,4.59,0,0,1,4-2.52,4.18,4.18,0,0,1,3.09,1.36,5.83,5.83,0,0,1,1.25,4.24,10,10,0,0,1-.18,1.77A15,15,0,0,1,21.08,109.53Z" />
+		<path d="M23.11,88.4a8.93,8.93,0,0,1,.14,3.21,6.19,6.19,0,0,1-1.52,3.17,6.35,6.35,0,0,1-3.27,1.89,10.73,10.73,0,0,1-4.47.14,10.83,10.83,0,0,1-4.17-1.55,6.5,6.5,0,0,1-2.51-2.83,6.15,6.15,0,0,1-.43-3.52,9.2,9.2,0,0,1,1.15-3l1.83.31a6.35,6.35,0,0,0-1.45,3,3.42,3.42,0,0,0,.45,2.31,5.73,5.73,0,0,0,2.13,2,10,10,0,0,0,6.91,1.12,5.68,5.68,0,0,0,2.65-1.21,3.42,3.42,0,0,0,1.15-2,6.5,6.5,0,0,0-.41-3.34Z" />
+		<path d="M18.15,82.13l6.34,2-.63,1.93L9,81.31l1.28-4a8.2,8.2,0,0,1,1.32-2.73,3.16,3.16,0,0,1,1.66-1,3.41,3.41,0,0,1,1.9.06,5,5,0,0,1,1.62.89A5.65,5.65,0,0,1,18,75.93a6.46,6.46,0,0,1,.76,2.12L27.12,76l-.74,2.3L18.77,80.2Zm-1.48-.48.87-2.71A5.18,5.18,0,0,0,17,77.26a4,4,0,0,0-.88-1,3.34,3.34,0,0,0-1.1-.61,2.16,2.16,0,0,0-1.92.22,4.76,4.76,0,0,0-1.5,2.57l-.47,1.44Z" />
+		<path d="M30.18,70.89a4.5,4.5,0,0,1-3.82,2.64,11.25,11.25,0,0,1-6.05-1.43,11.28,11.28,0,0,1-4.79-4,4.81,4.81,0,0,1,3.62-7.29,11.33,11.33,0,0,1,6,1.44A11.31,11.31,0,0,1,30,66.24,4.52,4.52,0,0,1,30.18,70.89Zm-1.4-.7a2.85,2.85,0,0,0-.4-2.94,10.21,10.21,0,0,0-4.1-3.13,10.24,10.24,0,0,0-5-1.38,2.64,2.64,0,0,0-2.19,4.4,10.21,10.21,0,0,0,4.1,3.13,10.21,10.21,0,0,0,5,1.38A2.85,2.85,0,0,0,28.78,70.19Z" />
+		<path d="M37,55.88l1.41,1-4.86,6.9-12.8-9,1.17-1.67,11.4,8Z" />
+		<path d="M45.14,47l1.24,1.2-5.83,6.09L29.24,43.45,30.65,42,40.71,51.6Z" />
+		<path d="M58,39.19,50.34,25.52l3.24-1.8a6.62,6.62,0,0,1,3.76-1.08,5.37,5.37,0,0,1,2.94,1.45,13.06,13.06,0,0,1,2.63,3.43,11.64,11.64,0,0,1,1.42,3.91,6.07,6.07,0,0,1-.3,3.28,6.09,6.09,0,0,1-2.83,2.67Zm.94-2.5L60.08,36A4.57,4.57,0,0,0,62.29,34a4,4,0,0,0,.11-2.39A13.61,13.61,0,0,0,61,28.22a10.46,10.46,0,0,0-2.07-2.8,4,4,0,0,0-2-1,4.42,4.42,0,0,0-2.68.75l-1.33.74Z" />
+		<path d="M72.88,32.41a4.52,4.52,0,0,1-4.59-.67,11.26,11.26,0,0,1-3.45-5.18A11.31,11.31,0,0,1,64,20.41a4.82,4.82,0,0,1,7.62-2.87,11.48,11.48,0,0,1,3.44,5.17,11.5,11.5,0,0,1,.82,6.17A4.52,4.52,0,0,1,72.88,32.41ZM72.33,31A2.86,2.86,0,0,0,74,28.52a10.23,10.23,0,0,0-.86-5.09A10.15,10.15,0,0,0,70.48,19a2.64,2.64,0,0,0-4.59,1.73,10.07,10.07,0,0,0,.86,5.08,10.2,10.2,0,0,0,2.7,4.4A2.85,2.85,0,0,0,72.33,31Z" />
+		<path d="M80.05,29.5,75,14.57l1.81-.38,3,9.1.47,1.51h0l-.13-1.59-.36-9.66,1.8-.38,3.9,9.3.5,1.44h0l-.2-1.52L85,12.45l1.56-.33L88,27.81l-1.88.4-4.18-9.95-.54-1.51h0l.15,1.59.43,10.75Z" />
+		<path d="M92.77,27.24l-1.87.11L90,11.73l1.83-.1L97.94,21.7l.69,1.52h.06l-.15-1.54-.6-10.4,1.87-.11.91,15.62-1.87.11-6-9.91L92,15.39,92.17,17Z" />
+		<path d="M115.47,28.25l4-15.14,8.32,2.17-.39,1.51L121,15.13l-1.35,5.15,5.75,1.5-.4,1.51-5.74-1.5-1.82,7Z" />
+		<path d="M130.38,33.36a4.54,4.54,0,0,1-2.91-3.63,11.34,11.34,0,0,1,1-6.13,11.32,11.32,0,0,1,3.61-5.06,4.8,4.8,0,0,1,7.52,3.1,11.29,11.29,0,0,1-1,6.12,11.36,11.36,0,0,1-3.6,5.07A4.51,4.51,0,0,1,130.38,33.36Zm.59-1.45a2.84,2.84,0,0,0,2.91-.61A10.17,10.17,0,0,0,136.71,27a10.25,10.25,0,0,0,1-5,2.64,2.64,0,0,0-4.54-1.87,10.24,10.24,0,0,0-2.83,4.31,10.14,10.14,0,0,0-1,5.05A2.83,2.83,0,0,0,131,31.91Z" />
+		<path d="M142.27,31.16l-3.43,5.7-1.75-1,8.06-13.41,3.59,2.15a8.3,8.3,0,0,1,2.36,1.91,3.2,3.2,0,0,1,.63,1.86,3.43,3.43,0,0,1-.48,1.83A5.22,5.22,0,0,1,150,31.53a5.7,5.7,0,0,1-1.68.9,6.2,6.2,0,0,1-2.23.25l.11,8.61L144.13,40,144,32.2Zm.8-1.34,2.44,1.46a5.07,5.07,0,0,0,1.77-.18,4,4,0,0,0,1.21-.63,3.35,3.35,0,0,0,.84-.93,2.16,2.16,0,0,0,.22-1.92,4.76,4.76,0,0,0-2.15-2.05l-1.31-.78Z" />
+		<path d="M163.43,55.34l-1.28,1.15-5.63-6.3L168.2,39.77,173.72,46l-1.17,1-4.17-4.67-4,3.54,3.75,4.2-1.17,1-3.75-4.2-4.08,3.64Z" />
+		<path d="M164.35,59.41l13.09-8.56,4.71,7.2-1.31.86-3.59-5.5-4.46,2.92,3.25,5-1.3.85-3.25-5-6,3.94Z" />
+		<path d="M170.58,69.49,184.8,63l3.58,7.82-1.42.65-2.73-6-4.84,2.22,2.47,5.4-1.42.65L178,68.34l-6.55,3Z" />
+		<path d="M179.16,87.8l-1.65.47-2.34-8.11,15-4.33,2.29,8-1.51.43-1.73-6-5.11,1.47,1.56,5.42-1.5.43-1.56-5.42-5.26,1.52Z" />
+		<path d="M179.52,100.42a9,9,0,0,1-1.06-3,6.14,6.14,0,0,1,.54-3.48,6.42,6.42,0,0,1,2.59-2.75A11.62,11.62,0,0,1,190.27,90a6.4,6.4,0,0,1,3.22,2,6.12,6.12,0,0,1,1.43,3.24,9.14,9.14,0,0,1-.24,3.2l-1.84.24a6.49,6.49,0,0,0,.52-3.32,3.45,3.45,0,0,0-1.11-2.09A5.72,5.72,0,0,0,189.64,92a10.15,10.15,0,0,0-6.94.92,5.83,5.83,0,0,0-2.19,1.92,3.47,3.47,0,0,0-.51,2.28,6.51,6.51,0,0,0,1.35,3.08Z" />
+		<path d="M179.38,106.51l13.92.3.1-4.68,1.72,0-.24,11.41-1.73,0,.1-4.68-13.91-.31Z" />
+	</g>
+	<line x1="105.86" y1="80" x2="105.86" y2="130" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
+	<line x1="105.86" y1="130" x2="97" y2="121.15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
+	<line x1="105.89" y1="130.01" x2="114.74" y2="121.15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
+</svg>
\ No newline at end of file
diff --git a/liquid-maskingscroll/src/script.js b/liquid-maskingscroll/src/script.js
new file mode 100644
index 0000000..191a4d9
--- /dev/null
+++ b/liquid-maskingscroll/src/script.js
@@ -0,0 +1,13 @@
+gsap.from("#wobble", {
+	xPercent: 100,
+	yPercent: 100,
+	ease: "power2.out",
+	duration: 2,
+	scrollTrigger: {
+		trigger: "#ourSVG",
+		pin: true, // pin the trigger element while active
+		start: "center 40%", // when the center of the trigger hits 40% from the top of the viewport
+		end: "+=1000", // end after scrolling 1000px beyond the start
+		scrub: 2 // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
+	}
+});
diff --git a/liquid-maskingscroll/src/style.css b/liquid-maskingscroll/src/style.css
new file mode 100644
index 0000000..c21481b
--- /dev/null
+++ b/liquid-maskingscroll/src/style.css
@@ -0,0 +1,43 @@
+@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@800&display=swap");
+
+body {
+	height: 500vh;
+	background: url(https://assets.codepen.io/756881/bg-fuzz);
+	background-size: cover;
+	background-position: center;
+	background-attachment: fixed;
+	font-family: "Kanit", sans-serif;
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+}
+
+h1 {
+	position: fixed;
+	z-index: 1;
+	top: 60vh;
+	margin: 0;
+	transform: translateY(-50%);
+	text-align: center;
+	color: white;
+	letter-spacing: 2px;
+	font-size: clamp(16px, 13vw, 100px);
+	color: #fffff8;
+	font-size: clamp(16px, 14vw, 100px);
+	text-align: center;
+}
+
+svg {
+	margin-top: 80vh;
+	max-height: 60vh;
+	width: 500px;
+}
+
+.scroll {
+	position: fixed;
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 120px;
+	color: white;
+}
diff --git a/literally-lit-elements/README.markdown b/literally-lit-elements/README.markdown
new file mode 100644
index 0000000..a1a9617
--- /dev/null
+++ b/literally-lit-elements/README.markdown
@@ -0,0 +1,7 @@
+# literally lit elements
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/MananTank/pen/MWmaWwQ](https://codepen.io/MananTank/pen/MWmaWwQ).
+
+lighting elements on fire - now that is literally lit!
+
+
diff --git a/literally-lit-elements/dist/index.html b/literally-lit-elements/dist/index.html
new file mode 100644
index 0000000..a911071
--- /dev/null
+++ b/literally-lit-elements/dist/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - literally lit elements</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div data-lit-hue='20' data-lit-count='100' class='lit-container'>
+<div class='minimal element-1'> </div>
+</div>
+<div data-lit-hue='60' data-lit-count='100' class='lit-container'>
+<div class='minimal element-2'> </div>
+</div>
+<div data-lit-hue='100' data-lit-count='100' class='lit-container'>
+<div class='minimal element-1'> </div>
+</div>
+<div data-lit-hue='140' data-lit-count='100' class='lit-container'>
+<div class='minimal element-2'> </div>
+</div>
+<div data-lit-hue='180' data-lit-count='100' class='lit-container'>
+<div class='minimal element-1'> </div>
+</div>
+<div data-lit-hue='220' data-lit-count='100' class='lit-container'>
+<div class='minimal element-2'> </div>
+</div>
+<div data-lit-hue='260' data-lit-count='100' class='lit-container'>
+<div class='minimal element-1'> </div>
+</div>
+<div data-lit-hue='300' data-lit-count='100' class='lit-container'>
+<div class='minimal element-2'> </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/literally-lit-elements/dist/script.js b/literally-lit-elements/dist/script.js
new file mode 100644
index 0000000..51a79d2
--- /dev/null
+++ b/literally-lit-elements/dist/script.js
@@ -0,0 +1,43 @@
+// you can change the hue and amount lit-ness via data attributes on html
+
+// clips the value to given range
+const clip = (v, min, max = Infinity) => {
+	if (v < min) return min;
+	else if (v > max) return max;
+	else return v;
+};
+
+// generated random value from given range
+const randRange = (min, max) => Math.random() * max + min;
+
+// create bubble on x and y position inside target with given hue theme
+function bubble(x, y, rect, hue, target) {
+	// variables
+	const size = randRange(20, rect.width / 5);
+	const circleHue = hue + randRange(-20, 20);
+	const animDuration = randRange(clip(size ** 2/1000, 1), 6) 
+	const zIndex = Math.random() < 0.1 ? 2 : -1;
+	// apply to DOM
+	const circle = document.createElement("span");
+	circle.className = "lit";
+	circle.style.left = x + "px";
+	circle.style.top = y + "px";
+	circle.style.width = size + "px";
+	circle.style.height = size + "px";
+	circle.style.background = `hsl(${circleHue}deg, 100%, 60%)`;
+	circle.style.zIndex = zIndex
+	circle.style.animationDuration = animDuration + "s";
+	target.appendChild(circle);
+}
+
+document.querySelectorAll("[data-lit-hue]").forEach((target) => {
+	const rect = target.getBoundingClientRect();
+	const hue = Number(target.getAttribute("data-lit-hue"));
+	const count = Number(target.getAttribute("data-lit-count") || 50);
+
+	for (let i = 0; i < count; i++) {
+		const x = randRange(0, rect.width);
+		const y = randRange(0, rect.height);
+		bubble(x, y, rect, hue, target);
+	}
+});
\ No newline at end of file
diff --git a/literally-lit-elements/dist/style.css b/literally-lit-elements/dist/style.css
new file mode 100644
index 0000000..099b8ea
--- /dev/null
+++ b/literally-lit-elements/dist/style.css
@@ -0,0 +1,103 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+/*   overflow: hidden; */
+  background: #ddd;
+  display: grid;
+  justify-content: center;
+  grid-auto-rows: 70vh;
+  place-items: center;
+  padding: 100px 20px;
+}
+.minimal {
+  box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
+  background: #fff;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+  border-radius: 5px;
+}
+.element-1 {
+  width: 300px;
+  height: 80px;
+}
+.element-2 {
+  width: 300px;
+  height: 300px;
+}
+.lit-container:hover .lit,
+.lit-container:focus-within .lit {
+  background: rgba(153,153,153,0.2) !important;
+}
+/* lit --------------------------- */
+[data-lit-hue] {
+  position: relative;
+}
+span.lit {
+  height: 50px;
+  width: 50px;
+  border-radius: 50%;
+  position: absolute;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  animation: blow 2s ease-in infinite;
+  transition: all 400ms ease;
+}
+@-moz-keyframes blow {
+  0% {
+    transform: translate(-50%, -50%) scale(0.1);
+    opacity: 0;
+  }
+  10% {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -40vh);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes blow {
+  0% {
+    transform: translate(-50%, -50%) scale(0.1);
+    opacity: 0;
+  }
+  10% {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -40vh);
+    opacity: 0;
+  }
+}
+@-o-keyframes blow {
+  0% {
+    transform: translate(-50%, -50%) scale(0.1);
+    opacity: 0;
+  }
+  10% {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -40vh);
+    opacity: 0;
+  }
+}
+@keyframes blow {
+  0% {
+    transform: translate(-50%, -50%) scale(0.1);
+    opacity: 0;
+  }
+  10% {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -40vh);
+    opacity: 0;
+  }
+}
\ No newline at end of file
diff --git a/literally-lit-elements/license.txt b/literally-lit-elements/license.txt
new file mode 100644
index 0000000..1f8f09d
--- /dev/null
+++ b/literally-lit-elements/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Manan Tank (https://codepen.io/MananTank/pen/MWmaWwQ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/literally-lit-elements/src/index.pug b/literally-lit-elements/src/index.pug
new file mode 100644
index 0000000..bc6277e
--- /dev/null
+++ b/literally-lit-elements/src/index.pug
@@ -0,0 +1,31 @@
+<div data-lit-hue='20' data-lit-count='100' class='lit-container'>
+  <div class='minimal element-1'> </div>
+</div>
+
+<div data-lit-hue='60' data-lit-count='100' class='lit-container'>
+  <div class='minimal element-2'> </div>
+</div>
+
+<div data-lit-hue='100' data-lit-count='100' class='lit-container'>
+  <div class='minimal element-1'> </div>
+</div>
+
+<div data-lit-hue='140' data-lit-count='100' class='lit-container'>
+  <div class='minimal element-2'> </div>
+</div>
+
+<div data-lit-hue='180' data-lit-count='100' class='lit-container'>
+  <div class='minimal element-1'> </div>
+</div>
+
+<div data-lit-hue='220' data-lit-count='100' class='lit-container'>
+  <div class='minimal element-2'> </div>
+</div>
+
+<div data-lit-hue='260' data-lit-count='100' class='lit-container'>
+  <div class='minimal element-1'> </div>
+</div>
+
+<div data-lit-hue='300' data-lit-count='100' class='lit-container'>
+  <div class='minimal element-2'> </div>
+</div>
\ No newline at end of file
diff --git a/literally-lit-elements/src/script.js b/literally-lit-elements/src/script.js
new file mode 100644
index 0000000..4e0c220
--- /dev/null
+++ b/literally-lit-elements/src/script.js
@@ -0,0 +1,43 @@
+// you can change the hue and amount lit-ness via data attributes on html
+
+// clips the value to given range
+const clip = (v, min, max = Infinity) => {
+	if (v < min) return min;
+	else if (v > max) return max;
+	else return v;
+};
+
+// generated random value from given range
+const randRange = (min, max) => Math.random() * max + min;
+
+// create bubble on x and y position inside target with given hue theme
+function bubble(x, y, rect, hue, target) {
+	// variables
+	const size = randRange(20, rect.width / 5);
+	const circleHue = hue + randRange(-20, 20);
+	const animDuration = randRange(clip(size ** 2/1000, 1), 6) 
+	const zIndex = Math.random() < 0.1 ? 2 : -1;
+	// apply to DOM
+	const circle = document.createElement("span");
+	circle.className = "lit";
+	circle.style.left = x + "px";
+	circle.style.top = y + "px";
+	circle.style.width = size + "px";
+	circle.style.height = size + "px";
+	circle.style.background = `hsl(${circleHue}deg, 100%, 60%)`;
+	circle.style.zIndex = zIndex
+	circle.style.animationDuration = animDuration + "s";
+	target.appendChild(circle);
+}
+
+document.querySelectorAll("[data-lit-hue]").forEach((target) => {
+	const rect = target.getBoundingClientRect();
+	const hue = Number(target.getAttribute("data-lit-hue"));
+	const count = Number(target.getAttribute("data-lit-count") || 50);
+
+	for (let i = 0; i < count; i++) {
+		const x = randRange(0, rect.width);
+		const y = randRange(0, rect.height);
+		bubble(x, y, rect, hue, target);
+	}
+});
diff --git a/literally-lit-elements/src/style.styl b/literally-lit-elements/src/style.styl
new file mode 100644
index 0000000..72dbba4
--- /dev/null
+++ b/literally-lit-elements/src/style.styl
@@ -0,0 +1,73 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  /*   overflow: hidden; */
+  background: #ddd;
+  display: grid;
+  justify-content: center;
+  grid-auto-rows: 70vh;
+  place-items: center;
+  padding: 100px 20px;
+}
+
+.minimal {
+  box-shadow: 2px 2px 5px rgba(0, 0 0, 0.15);
+  background: white;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+  border-radius: 5px;
+}
+
+.element-1 {
+  width: 300px;
+  height: 80px;
+}
+
+.element-2 {
+  width: 300px;
+  height: 300px;
+}
+
+
+.lit-container:hover .lit,
+.lit-container:focus-within .lit {
+  background: hsla(0deg, 0%, 60%, 20%) !important;
+}
+
+/* lit --------------------------- */
+
+[data-lit-hue] {
+  position: relative;
+}
+
+span.lit {
+  height: 50px;
+  width: 50px;
+  border-radius: 50%;
+  position: absolute;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  animation: blow 2s ease-in infinite;
+  transition: all 400ms ease;
+}
+
+@keyframes blow {
+  0% {
+    transform: translate(-50%, -50%) scale(0.1);
+    opacity: 0;
+  }
+
+  10% {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-50%, -40vh);
+    opacity: 0;
+  }
+}
diff --git a/live-react-gallery-with-keyboard-control-keyframers-3-24/README.markdown b/live-react-gallery-with-keyboard-control-keyframers-3-24/README.markdown
new file mode 100644
index 0000000..f3584a7
--- /dev/null
+++ b/live-react-gallery-with-keyboard-control-keyframers-3-24/README.markdown
@@ -0,0 +1,16 @@
+# LIVE: React Gallery with Keyboard Control | @keyframers 3.24
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/team/keyframers/pen/oNYmomo](https://codepen.io/team/keyframers/pen/oNYmomo).
+
+David Khourshid & Stephen Shaw live code a React Gallery with Keyboard Control and maybe even some FLIP animation!
+
+💡 Inspiration: https://dribbble.com/shots/15268831-Keyboard-interactions-in-Framer
+💻  Code: https://codepen.io/team/keyframers/pen/oNYmomo
+🎥  Video: https://youtu.be/2vrMSUZThBE
+
+Like what we're doing? Support @keyframers so we can keep live coding awesome animations!
+
+* Like & subscribe on YouTube at https://youtube.com/keyframers
+* Buy web dev shirts, stickers & more at https://keyframe.rs/merch
+* Follow & tweet us at https://twitter.com/keyframers
+* Support us on Patreon at https://patreon.com/keyframers
diff --git a/live-react-gallery-with-keyboard-control-keyframers-3-24/dist/index.html b/live-react-gallery-with-keyboard-control-keyframers-3-24/dist/index.html
new file mode 100644
index 0000000..fcb86b4
--- /dev/null
+++ b/live-react-gallery-with-keyboard-control-keyframers-3-24/dist/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - LIVE: React Gallery with Keyboard Control | @keyframers 3.24</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="app"></div>
+
+<!--
+
+1. ArrowKeys
+2. FLIP hook
+
+-->
+
+<a href="https://youtu.be/2vrMSUZThBE" target="_blank" data-keyframers-credit style="color: #FFF"></a>
+<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/live-react-gallery-with-keyboard-control-keyframers-3-24/dist/script.js b/live-react-gallery-with-keyboard-control-keyframers-3-24/dist/script.js
new file mode 100644
index 0000000..c8cf698
--- /dev/null
+++ b/live-react-gallery-with-keyboard-control-keyframers-3-24/dist/script.js
@@ -0,0 +1,144 @@
+function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);}console.clear();
+
+import React, {
+useState,
+useEffect,
+useLayoutEffect,
+useRef } from
+"https://cdn.skypack.dev/react";
+import ReactDOM from "https://cdn.skypack.dev/react-dom";
+
+const slides = [
+{
+  image:
+  "https://images.unsplash.com/photo-1614983646436-b3d7a8398b3f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNTU4MTkxNA&ixlib=rb-1.2.1&q=80&w=400&h=600",
+  title: "Animation" },
+
+{
+  image:
+  "https://images.unsplash.com/photo-1615421559287-5e6eecec3b80?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNTU4MjAwOQ&ixlib=rb-1.2.1&q=80&w=400&h=600",
+  title: "CSS" },
+
+{
+  image:
+  "https://images.unsplash.com/photo-1615098270177-e2db45986811?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNTU4MjAwOQ&ixlib=rb-1.2.1&q=80&w=400&h=600",
+  title: "HTML" },
+
+{
+  image:
+  "https://images.unsplash.com/photo-1615114814213-a245ffc79e9a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNTU4MjAwOQ&ixlib=rb-1.2.1&q=80&w=400&h=600",
+  title: "React" }];
+
+
+
+function getRect(el) {
+  return el.getBoundingClientRect();
+}
+
+function flip(firstRect, el) {
+  requestAnimationFrame(() => {
+    const lastEl = el;
+    const lastRect = getRect(lastEl);
+    const dx = lastRect.x - firstRect.x;
+    const dy = lastRect.y - firstRect.y;
+    const dw = lastRect.width / firstRect.width;
+    const dh = lastRect.height / firstRect.height;
+    lastEl.dataset.flipping = true;
+    lastEl.style.setProperty("--dx", dx);
+    lastEl.style.setProperty("--dy", dy);
+    lastEl.style.setProperty("--dw", dw);
+    lastEl.style.setProperty("--dh", dh);
+    requestAnimationFrame(() => delete lastEl.dataset.flipping);
+  });
+}
+
+function useFlip(ref) {
+  const rectRef = useRef(null);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      if (!rectRef.current) {
+        rectRef.current = getRect(ref.current);
+      }
+      flip(rectRef.current, ref.current);
+      rectRef.current = getRect(ref.current);
+    }
+  });
+}
+
+function useKeyDown(onKeyDown) {
+  useEffect(() => {
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, []);
+}
+
+/* ---------------------------------- */
+
+function ImageTitle(props) {
+  const ref = useRef(null);
+  useFlip(ref);
+
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, { ref: ref, "data-flip": true, className: "title" }));
+}
+
+function Image({ src, title, selected, ...props }) {
+  const ref = useRef(null);
+  useFlip(ref);
+
+  return /*#__PURE__*/(
+    React.createElement("div", _extends({},
+    props, {
+      className: "image",
+      key: src,
+      "data-selected": selected || undefined }), /*#__PURE__*/
+
+    React.createElement("img", { "data-flip": true, src: src, ref: ref }), /*#__PURE__*/
+    React.createElement(ImageTitle, null, /*#__PURE__*/
+    React.createElement("strong", null, title), " 2021")));
+
+
+
+}
+
+function App() {
+  const [selected, setSelected] = useState(0);
+
+  useKeyDown(event => {
+    switch (event.key) {
+      case "ArrowRight":
+        setSelected(selected => (selected + 1) % slides.length);
+        break;
+      case "ArrowLeft":
+        setSelected(
+        selected => (slides.length + (selected - 1)) % slides.length);
+
+        break;
+      default:
+        break;}
+
+  });
+
+  return /*#__PURE__*/(
+    React.createElement("div", { className: "app" }, /*#__PURE__*/
+    React.createElement("h1", null, "@keyframers"), /*#__PURE__*/
+    React.createElement("div", { className: "gallery" },
+    slides.map((slide, index) => {
+      return /*#__PURE__*/(
+        React.createElement(Image, {
+          src: slide.image,
+          title: slide.title,
+          selected: index === selected,
+          key: index,
+          onClick: () => setSelected(index) }));
+
+
+    }))));
+
+
+
+}
+
+ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.querySelector("#app"));
\ No newline at end of file
diff --git a/live-react-gallery-with-keyboard-control-keyframers-3-24/dist/style.css b/live-react-gallery-with-keyboard-control-keyframers-3-24/dist/style.css
new file mode 100644
index 0000000..091b1bc
--- /dev/null
+++ b/live-react-gallery-with-keyboard-control-keyframers-3-24/dist/style.css
@@ -0,0 +1,90 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
+* {
+  position: relative;
+  box-sizing: border-box;
+}
+
+html {
+  background: #000;
+  color: #fff;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+}
+
+h1,
+h2,
+h3,
+h4,
+strong {
+  font-weight: 700;
+}
+
+body {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  overflow: hidden;
+}
+
+.app {
+  display: grid;
+  padding: 5vmin;
+}
+
+.gallery {
+  display: flex;
+  gap: 1rem;
+  margin: 1rem 0;
+  align-items: center;
+}
+
+.image {
+  flex: 1 1 100%;
+  opacity: 0.7;
+  transition: opacity 0.3s linear;
+  cursor: pointer;
+}
+.image img {
+  max-width: 100%;
+  height: auto;
+  --radius: 1rem;
+  border-radius: var(--radius);
+}
+.image .title {
+  display: block;
+  font-size: 2vw;
+  margin: 0.5rem 0;
+  color: #aaa;
+}
+.image .title strong {
+  display: block;
+  color: white;
+}
+.image[data-selected] {
+  opacity: 1;
+  flex-grow: 1.15;
+  flex-shrink: 0.85;
+}
+
+[data-flip] {
+  transition: transform 0.3s cubic-bezier(0.2, 0, 0.5, 1), border-radius 0.3s cubic-bezier(0.2, 0, 0.5, 1);
+  transform-origin: top left;
+}
+
+[data-flipping] {
+  transition: none;
+  transform: var(--flip-translate) var(--flip-scale);
+  --flip-translate: translate(calc(-1px * var(--dx)), calc(-1px * var(--dy)));
+  --flip-scale: scale(calc(1 / var(--dw)), calc(1 / var(--dh)));
+  --flip-radius: calc((var(--dw)) * var(--radius)) /
+      calc((var(--dh)) * var(--radius));
+}
+
+.title[data-flipping] {
+  transform: var(--flip-translate);
+}
+
+img[data-flipping] {
+  border-radius: var(--flip-radius);
+}
\ No newline at end of file
diff --git a/live-react-gallery-with-keyboard-control-keyframers-3-24/license.txt b/live-react-gallery-with-keyboard-control-keyframers-3-24/license.txt
new file mode 100644
index 0000000..61aa01f
--- /dev/null
+++ b/live-react-gallery-with-keyboard-control-keyframers-3-24/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by @keyframers (https://codepen.io/team/keyframers/pen/oNYmomo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/live-react-gallery-with-keyboard-control-keyframers-3-24/src/index.html b/live-react-gallery-with-keyboard-control-keyframers-3-24/src/index.html
new file mode 100644
index 0000000..cd351e4
--- /dev/null
+++ b/live-react-gallery-with-keyboard-control-keyframers-3-24/src/index.html
@@ -0,0 +1,11 @@
+<div id="app"></div>
+
+<!--
+
+1. ArrowKeys
+2. FLIP hook
+
+-->
+
+<a href="https://youtu.be/2vrMSUZThBE" target="_blank" data-keyframers-credit style="color: #FFF"></a>
+<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
\ No newline at end of file
diff --git a/live-react-gallery-with-keyboard-control-keyframers-3-24/src/script.babel b/live-react-gallery-with-keyboard-control-keyframers-3-24/src/script.babel
new file mode 100644
index 0000000..11a2245
--- /dev/null
+++ b/live-react-gallery-with-keyboard-control-keyframers-3-24/src/script.babel
@@ -0,0 +1,144 @@
+console.clear();
+
+import React, {
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useRef
+} from "https://cdn.skypack.dev/react";
+import ReactDOM from "https://cdn.skypack.dev/react-dom";
+
+const slides = [
+  {
+    image:
+      "https://images.unsplash.com/photo-1614983646436-b3d7a8398b3f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNTU4MTkxNA&ixlib=rb-1.2.1&q=80&w=400&h=600",
+    title: "Animation"
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1615421559287-5e6eecec3b80?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNTU4MjAwOQ&ixlib=rb-1.2.1&q=80&w=400&h=600",
+    title: "CSS"
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1615098270177-e2db45986811?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNTU4MjAwOQ&ixlib=rb-1.2.1&q=80&w=400&h=600",
+    title: "HTML"
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1615114814213-a245ffc79e9a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNTU4MjAwOQ&ixlib=rb-1.2.1&q=80&w=400&h=600",
+    title: "React"
+  }
+];
+
+function getRect(el) {
+  return el.getBoundingClientRect();
+}
+
+function flip(firstRect, el) {
+  requestAnimationFrame(() => {
+    const lastEl = el;
+    const lastRect = getRect(lastEl);
+    const dx = lastRect.x - firstRect.x;
+    const dy = lastRect.y - firstRect.y;
+    const dw = lastRect.width / firstRect.width;
+    const dh = lastRect.height / firstRect.height;
+    lastEl.dataset.flipping = true;
+    lastEl.style.setProperty("--dx", dx);
+    lastEl.style.setProperty("--dy", dy);
+    lastEl.style.setProperty("--dw", dw);
+    lastEl.style.setProperty("--dh", dh);
+    requestAnimationFrame(() => delete lastEl.dataset.flipping);
+  });
+}
+
+function useFlip(ref) {
+  const rectRef = useRef(null);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      if (!rectRef.current) {
+        rectRef.current = getRect(ref.current);
+      }
+      flip(rectRef.current, ref.current);
+      rectRef.current = getRect(ref.current);
+    }
+  });
+}
+
+function useKeyDown(onKeyDown) {
+  useEffect(() => {
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, []);
+}
+
+/* ---------------------------------- */
+
+function ImageTitle(props) {
+  const ref = useRef(null);
+  useFlip(ref);
+
+  return <span {...props} ref={ref} data-flip className="title" />;
+}
+
+function Image({ src, title, selected, ...props }) {
+  const ref = useRef(null);
+  useFlip(ref);
+
+  return (
+    <div
+      {...props}
+      className="image"
+      key={src}
+      data-selected={selected || undefined}
+    >
+      <img data-flip src={src} ref={ref} />
+      <ImageTitle>
+        <strong>{title}</strong> 2021
+      </ImageTitle>
+    </div>
+  );
+}
+
+function App() {
+  const [selected, setSelected] = useState(0);
+
+  useKeyDown((event) => {
+    switch (event.key) {
+      case "ArrowRight":
+        setSelected((selected) => (selected + 1) % slides.length);
+        break;
+      case "ArrowLeft":
+        setSelected(
+          (selected) => (slides.length + (selected - 1)) % slides.length
+        );
+        break;
+      default:
+        break;
+    }
+  });
+
+  return (
+    <div className="app">
+      <h1>@keyframers</h1>
+      <div className="gallery">
+        {slides.map((slide, index) => {
+          return (
+            <Image
+              src={slide.image}
+              title={slide.title}
+              selected={index === selected}
+              key={index}
+              onClick={() => setSelected(index)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+ReactDOM.render(<App />, document.querySelector("#app"));
diff --git a/live-react-gallery-with-keyboard-control-keyframers-3-24/src/style.scss b/live-react-gallery-with-keyboard-control-keyframers-3-24/src/style.scss
new file mode 100644
index 0000000..f49b70c
--- /dev/null
+++ b/live-react-gallery-with-keyboard-control-keyframers-3-24/src/style.scss
@@ -0,0 +1,106 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
+
+* {
+  position: relative;
+  box-sizing: border-box;
+}
+
+html {
+  background: #000;
+  color: #fff;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+}
+
+h1,
+h2,
+h3,
+h4,
+strong {
+  font-weight: 700;
+}
+
+body {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  overflow: hidden;
+}
+
+.app {
+  display: grid;
+  padding: 5vmin;
+}
+.gallery {
+  display: flex;
+  gap: 1rem;
+  margin: 1rem 0;
+  align-items: center;
+}
+
+.image {
+  flex: 1 1 100%;
+  opacity: 0.7;
+  transition: opacity 0.3s linear;
+  cursor: pointer;
+
+  // &:after {
+  //   content: attr(style);
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  //   background: black;
+  //   color: white;
+  //   font-family: monospace;
+  // }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    --radius: 1rem;
+    border-radius: var(--radius);
+  }
+
+  .title {
+    display: block;
+    font-size: 2vw;
+    margin: 0.5rem 0;
+    color: #aaa;
+
+    strong {
+      display: block;
+      color: white;
+    }
+  }
+
+  &[data-selected] {
+    opacity: 1;
+    flex-grow: 1.15;
+    flex-shrink: 0.85;
+  }
+}
+
+[data-flip] {
+  transition: transform 0.3s cubic-bezier(0.2, 0, 0.5, 1),
+    border-radius 0.3s cubic-bezier(0.2, 0, 0.5, 1);
+  transform-origin: top left;
+}
+
+[data-flipping] {
+  transition: none;
+  transform: var(--flip-translate) var(--flip-scale);
+
+  --flip-translate: translate(calc(-1px * var(--dx)), calc(-1px * var(--dy)));
+  --flip-scale: scale(calc(1 / var(--dw)), calc(1 / var(--dh)));
+  --flip-radius: calc((var(--dw)) * var(--radius)) /
+      calc((var(--dh)) * var(--radius));
+}
+
+.title[data-flipping] {
+  transform: var(--flip-translate);
+}
+
+img[data-flipping] {
+  border-radius: var(--flip-radius);
+}
diff --git a/loader-concept/README.markdown b/loader-concept/README.markdown
new file mode 100644
index 0000000..20547cc
--- /dev/null
+++ b/loader-concept/README.markdown
@@ -0,0 +1,4 @@
+# Loader concept
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/robin-dela/pen/qxzzzd](https://codepen.io/robin-dela/pen/qxzzzd).
+
+ quick concept of a loader
\ No newline at end of file
diff --git a/loader-concept/dist/index.html b/loader-concept/dist/index.html
new file mode 100644
index 0000000..8554a3b
--- /dev/null
+++ b/loader-concept/dist/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Loader concept</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script id="vertexShader" type="x-shader/x-vertex">
+			varying vec2 vUv;
+			void main() {
+			  vUv = uv;
+			  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+			}
+		</script>
+
+		<script id="fragmentShader" type="x-shader/x-fragment">
+			varying vec2 vUv;
+
+			uniform sampler2D texture;
+			uniform sampler2D texture2;
+			uniform sampler2D disp;
+
+			uniform float time;
+			uniform float random;
+			uniform float dispFactor;
+
+			vec2 rotate(vec2 v, float a) {
+				float s = sin(a);
+				float c = cos(a);
+				mat2 m = mat2(c, -s, s, c);
+				return m * v;
+			}
+
+			void main() {
+
+			    vec2 uv = vUv;
+
+				vec2 newUV = vec2(uv.x, uv.y);
+
+				newUV -= 0.5;
+				vec2 rotUV = rotate(newUV, random);
+				rotUV += 0.5;
+
+
+				vec4 disp = texture2D(disp, rotUV);
+
+
+				vec2 distortedPosition = vec2(uv.x + dispFactor * (disp.g*0.3), uv.y);
+				vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.g*0.3), uv.y);
+
+				vec4 _texture = texture2D(texture, distortedPosition);
+				vec4 _texture2 = texture2D(texture2, distortedPosition2);
+
+
+				vec2 distortedPosition3 = vec2(uv.x + dispFactor * (disp.g*0.25), uv.y);
+				vec4 _texture3 = texture2D(texture2, distortedPosition3);
+
+
+				vec4 finalTexture = mix(_texture, _texture2, dispFactor);
+
+				vec4 finalTexture2 = mix(_texture, _texture3, dispFactor);
+
+				gl_FragColor = finalTexture * finalTexture2;
+			}
+		</script>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/loader-concept/dist/script.js b/loader-concept/dist/script.js
new file mode 100644
index 0000000..a044b20
--- /dev/null
+++ b/loader-concept/dist/script.js
@@ -0,0 +1,151 @@
+window.addEventListener("resize", onWindowResize);
+
+var frustumSize = 600;
+var aspect = window.innerWidth / window.innerHeight;
+
+var clock = new THREE.Clock(true);
+
+var scene = new THREE.Scene();
+camera = new THREE.OrthographicCamera(
+	frustumSize * aspect / -2,
+	frustumSize * aspect / 2,
+	frustumSize / 2,
+	frustumSize / -2,
+	1,
+	2000
+);
+
+camera.lookAt(scene.position);
+camera.position.z = 1;
+
+var renderer = new THREE.WebGLRenderer();
+
+renderer.setPixelRatio = 1;
+renderer.setClearColor(0xffffff, 1.0);
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+function onWindowResize() {
+	var aspect = window.innerWidth / window.innerHeight;
+
+	camera.left = -frustumSize * aspect / 2;
+	camera.right = frustumSize * aspect / 2;
+	camera.top = frustumSize / 2;
+	camera.bottom = -frustumSize / 2;
+
+	camera.updateProjectionMatrix();
+
+	renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+var addToGPU = function(t) {
+	renderer.setTexture2D(t, 0);
+};
+
+var loader = new THREE.TextureLoader();
+loader.crossOrigin = "";
+var texture1 = loader.load("https://robindelaporte.fr/codepen/loader/0.png", function(texture) {
+	addToGPU(texture);
+});
+var texture2 = loader.load("https://robindelaporte.fr/codepen/loader/10.png", function(texture) {
+	addToGPU(texture);
+});
+var texture3 = loader.load("https://robindelaporte.fr/codepen/loader/28.png", function(texture) {
+	addToGPU(texture);
+});
+var texture4 = loader.load("https://robindelaporte.fr/codepen/loader/44.png", function(texture) {
+	addToGPU(texture);
+});
+var texture5 = loader.load("https://robindelaporte.fr/codepen/loader/61.png", function(texture) {
+	addToGPU(texture);
+});
+var texture6 = loader.load("https://robindelaporte.fr/codepen/loader/85.png", function(texture) {
+	addToGPU(texture);
+});
+var texture7 = loader.load("https://robindelaporte.fr/codepen/loader/99.png", function(texture) {
+	addToGPU(texture);
+});
+var texture8 = loader.load("https://robindelaporte.fr/codepen/loader/done.png", function(texture) {
+	addToGPU(texture);
+});
+
+var disp = loader.load("https://robindelaporte.fr/codepen/loader/fluid.jpg");
+disp.wrapS = disp.wrapT = THREE.RepeatWrapping;
+
+var mat = new THREE.ShaderMaterial({
+	uniforms: {
+		time: { type: "f", value: 1.0 },
+		random: { type: "f", value: 0.0 },
+		dispFactor: { type: "f", value: 0.0 },
+		texture: { type: "t", value: texture1 },
+		texture2: { type: "t", value: texture2 },
+		disp: { type: "t", value: disp }
+	},
+
+	vertexShader: document.getElementById("vertexShader").textContent,
+	fragmentShader: document.getElementById("fragmentShader").textContent,
+	transparent: true,
+	opacity: 1.0
+});
+
+var geometry = new THREE.PlaneBufferGeometry(600, 600, 1);
+var object = new THREE.Mesh(geometry, mat);
+scene.add(object);
+
+var c = false;
+var step = 0;
+window.addEventListener("click", function() {});
+
+var doClick = function() {
+	switch (step) {
+		case 0:
+			break;
+		case 1:
+			mat.uniforms.texture.value = texture3;
+			break;
+		case 2:
+			mat.uniforms.texture2.value = texture4;
+			break;
+		case 3:
+			mat.uniforms.texture.value = texture5;
+			break;
+		case 4:
+			mat.uniforms.texture2.value = texture6;
+			break;
+		case 5:
+			mat.uniforms.texture.value = texture7;
+			break;
+		case 6:
+			mat.uniforms.texture2.value = texture8;
+			break;
+		default:
+	}
+
+	step += 1;
+
+	if (!c) {
+		TweenMax.to(mat.uniforms.dispFactor, 1.5, { value: 1, ease: Expo.easeInOut });
+		c = true;
+		mat.uniforms.random.value = Math.random() * 10;
+	} else {
+		TweenMax.to(mat.uniforms.dispFactor, 1.5, { value: 0, ease: Expo.easeInOut });
+		c = false;
+	}
+};
+
+setInterval(function() {
+	if (step > 6) {
+		return;
+	}
+	doClick();
+}, 1600);
+
+var animate = function() {
+	requestAnimationFrame(animate);
+
+	renderer.render(scene, camera);
+
+	var d = clock.getDelta();
+	mat.uniforms.time.value += d;
+};
+animate();
\ No newline at end of file
diff --git a/loader-concept/dist/style.css b/loader-concept/dist/style.css
new file mode 100644
index 0000000..1e59794
--- /dev/null
+++ b/loader-concept/dist/style.css
@@ -0,0 +1,9 @@
+body {
+	margin: 0;
+	overflow: hidden;
+	position: fixed;
+}
+canvas {
+	width: 100%;
+	height: 100%;
+}
diff --git a/loader-concept/license.txt b/loader-concept/license.txt
new file mode 100644
index 0000000..6a1623a
--- /dev/null
+++ b/loader-concept/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Robin Delaporte (https://codepen.io/robin-dela/pen/qxzzzd)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/loader-concept/src/index.html b/loader-concept/src/index.html
new file mode 100644
index 0000000..da4c04f
--- /dev/null
+++ b/loader-concept/src/index.html
@@ -0,0 +1,58 @@
+<script id="vertexShader" type="x-shader/x-vertex">
+			varying vec2 vUv;
+			void main() {
+			  vUv = uv;
+			  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+			}
+		</script>
+
+		<script id="fragmentShader" type="x-shader/x-fragment">
+			varying vec2 vUv;
+
+			uniform sampler2D texture;
+			uniform sampler2D texture2;
+			uniform sampler2D disp;
+
+			uniform float time;
+			uniform float random;
+			uniform float dispFactor;
+
+			vec2 rotate(vec2 v, float a) {
+				float s = sin(a);
+				float c = cos(a);
+				mat2 m = mat2(c, -s, s, c);
+				return m * v;
+			}
+
+			void main() {
+
+			    vec2 uv = vUv;
+
+				vec2 newUV = vec2(uv.x, uv.y);
+
+				newUV -= 0.5;
+				vec2 rotUV = rotate(newUV, random);
+				rotUV += 0.5;
+
+
+				vec4 disp = texture2D(disp, rotUV);
+
+
+				vec2 distortedPosition = vec2(uv.x + dispFactor * (disp.g*0.3), uv.y);
+				vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.g*0.3), uv.y);
+
+				vec4 _texture = texture2D(texture, distortedPosition);
+				vec4 _texture2 = texture2D(texture2, distortedPosition2);
+
+
+				vec2 distortedPosition3 = vec2(uv.x + dispFactor * (disp.g*0.25), uv.y);
+				vec4 _texture3 = texture2D(texture2, distortedPosition3);
+
+
+				vec4 finalTexture = mix(_texture, _texture2, dispFactor);
+
+				vec4 finalTexture2 = mix(_texture, _texture3, dispFactor);
+
+				gl_FragColor = finalTexture * finalTexture2;
+			}
+		</script>
\ No newline at end of file
diff --git a/loader-concept/src/script.js b/loader-concept/src/script.js
new file mode 100644
index 0000000..c740a2d
--- /dev/null
+++ b/loader-concept/src/script.js
@@ -0,0 +1,151 @@
+window.addEventListener("resize", onWindowResize);
+
+var frustumSize = 600;
+var aspect = window.innerWidth / window.innerHeight;
+
+var clock = new THREE.Clock(true);
+
+var scene = new THREE.Scene();
+camera = new THREE.OrthographicCamera(
+	frustumSize * aspect / -2,
+	frustumSize * aspect / 2,
+	frustumSize / 2,
+	frustumSize / -2,
+	1,
+	2000
+);
+
+camera.lookAt(scene.position);
+camera.position.z = 1;
+
+var renderer = new THREE.WebGLRenderer();
+
+renderer.setPixelRatio = 1;
+renderer.setClearColor(0xffffff, 1.0);
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+function onWindowResize() {
+	var aspect = window.innerWidth / window.innerHeight;
+
+	camera.left = -frustumSize * aspect / 2;
+	camera.right = frustumSize * aspect / 2;
+	camera.top = frustumSize / 2;
+	camera.bottom = -frustumSize / 2;
+
+	camera.updateProjectionMatrix();
+
+	renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+var addToGPU = function(t) {
+	renderer.setTexture2D(t, 0);
+};
+
+var loader = new THREE.TextureLoader();
+loader.crossOrigin = "";
+var texture1 = loader.load("https://robindelaporte.fr/codepen/loader/0.png", function(texture) {
+	addToGPU(texture);
+});
+var texture2 = loader.load("https://robindelaporte.fr/codepen/loader/10.png", function(texture) {
+	addToGPU(texture);
+});
+var texture3 = loader.load("https://robindelaporte.fr/codepen/loader/28.png", function(texture) {
+	addToGPU(texture);
+});
+var texture4 = loader.load("https://robindelaporte.fr/codepen/loader/44.png", function(texture) {
+	addToGPU(texture);
+});
+var texture5 = loader.load("https://robindelaporte.fr/codepen/loader/61.png", function(texture) {
+	addToGPU(texture);
+});
+var texture6 = loader.load("https://robindelaporte.fr/codepen/loader/85.png", function(texture) {
+	addToGPU(texture);
+});
+var texture7 = loader.load("https://robindelaporte.fr/codepen/loader/99.png", function(texture) {
+	addToGPU(texture);
+});
+var texture8 = loader.load("https://robindelaporte.fr/codepen/loader/done.png", function(texture) {
+	addToGPU(texture);
+});
+
+var disp = loader.load("https://robindelaporte.fr/codepen/loader/fluid.jpg");
+disp.wrapS = disp.wrapT = THREE.RepeatWrapping;
+
+var mat = new THREE.ShaderMaterial({
+	uniforms: {
+		time: { type: "f", value: 1.0 },
+		random: { type: "f", value: 0.0 },
+		dispFactor: { type: "f", value: 0.0 },
+		texture: { type: "t", value: texture1 },
+		texture2: { type: "t", value: texture2 },
+		disp: { type: "t", value: disp }
+	},
+
+	vertexShader: document.getElementById("vertexShader").textContent,
+	fragmentShader: document.getElementById("fragmentShader").textContent,
+	transparent: true,
+	opacity: 1.0
+});
+
+var geometry = new THREE.PlaneBufferGeometry(600, 600, 1);
+var object = new THREE.Mesh(geometry, mat);
+scene.add(object);
+
+var c = false;
+var step = 0;
+window.addEventListener("click", function() {});
+
+var doClick = function() {
+	switch (step) {
+		case 0:
+			break;
+		case 1:
+			mat.uniforms.texture.value = texture3;
+			break;
+		case 2:
+			mat.uniforms.texture2.value = texture4;
+			break;
+		case 3:
+			mat.uniforms.texture.value = texture5;
+			break;
+		case 4:
+			mat.uniforms.texture2.value = texture6;
+			break;
+		case 5:
+			mat.uniforms.texture.value = texture7;
+			break;
+		case 6:
+			mat.uniforms.texture2.value = texture8;
+			break;
+		default:
+	}
+
+	step += 1;
+
+	if (!c) {
+		TweenMax.to(mat.uniforms.dispFactor, 1.5, { value: 1, ease: Expo.easeInOut });
+		c = true;
+		mat.uniforms.random.value = Math.random() * 10;
+	} else {
+		TweenMax.to(mat.uniforms.dispFactor, 1.5, { value: 0, ease: Expo.easeInOut });
+		c = false;
+	}
+};
+
+setInterval(function() {
+	if (step > 6) {
+		return;
+	}
+	doClick();
+}, 1600);
+
+var animate = function() {
+	requestAnimationFrame(animate);
+
+	renderer.render(scene, camera);
+
+	var d = clock.getDelta();
+	mat.uniforms.time.value += d;
+};
+animate();
diff --git a/loader-concept/src/style.css b/loader-concept/src/style.css
new file mode 100644
index 0000000..1e59794
--- /dev/null
+++ b/loader-concept/src/style.css
@@ -0,0 +1,9 @@
+body {
+	margin: 0;
+	overflow: hidden;
+	position: fixed;
+}
+canvas {
+	width: 100%;
+	height: 100%;
+}
diff --git a/lonely-little-box/README.markdown b/lonely-little-box/README.markdown
new file mode 100644
index 0000000..600c350
--- /dev/null
+++ b/lonely-little-box/README.markdown
@@ -0,0 +1,4 @@
+# Lonely little box
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/Fahscinate/pen/YXNxQW](https://codepen.io/Fahscinate/pen/YXNxQW).
+
+ This little fellow has been left all alone, please keep him company. CSS3D + javascript for the controls. 
\ No newline at end of file
diff --git a/lonely-little-box/dist/index.html b/lonely-little-box/dist/index.html
new file mode 100644
index 0000000..5aad457
--- /dev/null
+++ b/lonely-little-box/dist/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Lonely little box</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id='viewbox'>
+  <div class='box'>
+    <div class='cube'>
+      <div class='face ft'>
+        <div class='face-view'>
+          <svg version="1.1" id="cubie" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 6.4 5.1" enable-background="new 0 0 6.4 5.1" xml:space="preserve">
+          <circle fill="#000" cx="5.6" cy="0.8" r="0.8"/>
+          <circle fill="#000" cx="0.8" cy="0.8" r="0.8"/>
+          <path class="sadface hidden" fill="#000" d="M0.3,5.1c2.9,0,2.9,0,5.8,0C5.9,3.6,4.7,2.4,3.3,2.3C1.2,2.3,0.3,4.3,0.3,5.1z"/>
+          <path class="happyface" fill="#000" d="M0.3,2.3c2.9,0,2.9,0,5.8,0C5.9,3.8,4.7,5,3.3,5.1C1.2,5.1,0.3,3.1,0.3,2.3z"/>
+          </svg>
+        </div>
+      </div>
+      <div class='face bk'>
+        <div class='face-view'></div>
+      </div>
+      <div class='face rt'>
+        <div class='face-view'></div>
+      </div>
+      <div class='face lt'>
+        <div class='face-view'></div>
+      </div>
+      <div class='face bm'>
+        <div class='face-view'></div>
+      </div>
+      <div class='face tp'>
+        <div class='face-view'></div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/lonely-little-box/dist/script.js b/lonely-little-box/dist/script.js
new file mode 100644
index 0000000..40c21f4
--- /dev/null
+++ b/lonely-little-box/dist/script.js
@@ -0,0 +1,89 @@
+var rotationLimiter = 30;
+var timerIID;
+var cubie = $('.box'),
+    cubieSad = $('svg#cubie .sadface'),
+    cubieHappy = $('svg#cubie .happyface'),
+    cubieFaceLt = $('.face.lt'),
+    cubieFaceRt = $('.face.rt'),
+    cubieFaceBm = $('.face.bm'),
+    cubieFaceTp = $('.face.tp');
+
+// cubie is fascinated by mousepointers :D
+$(document).mousemove(function(e) {
+  clearInterval(timerIID);
+  cubieSad.attr("class", "sadface hidden");
+  cubieHappy.attr("class", "happyface");
+  
+  var docX = $(document).width(),
+      docY = $(document).height(),
+      rotateX = -(((e.pageY / docY) * (rotationLimiter * 2)) - rotationLimiter),
+      rotateY = ((e.pageX / docX) * (rotationLimiter * 2)) - rotationLimiter;
+ 
+  lighting(rotateX, rotateY, 0.14, 'Power0.easeIn');
+  
+  TweenMax.to(cubie,0.14,{
+    rotationX: rotateX, 
+    rotationY:rotateY, 
+    ease:Power0.easeIn
+  });
+
+});
+
+// leaving the viewport causes cubie to get depressed and go into panicmode, poor cubie :(
+$( "html" ).mouseout(function() {
+  panic();
+  timerIID = setInterval('loop();', getRandomInt(300,1000));
+});
+
+// cubie's lighting
+function lighting(rotationX, rotationY, duration, ease) {
+  TweenMax.to(cubieFaceLt,duration,{
+    backgroundColor: 'hsl(0, 0%, ' + (80 + rotationY) + '%)', 
+    ease:ease
+  });
+  TweenMax.to(cubieFaceRt,duration,{
+    backgroundColor: 'hsl(0, 0%, ' + (80 - rotationY) + '%)', 
+    ease:ease
+  });
+  TweenMax.to(cubieFaceBm,duration,{
+    backgroundColor: 'hsl(0, 0%, ' + (80 - rotationX) + '%)', 
+    ease:ease
+  });
+  TweenMax.to(cubieFaceTp,duration,{
+    backgroundColor: 'hsl(0, 0%, ' + (80 + rotationX) + '%)', 
+    ease:ease
+  });
+}
+
+// cubie's panicmode
+function panic() {
+  var rotX = getRandomInt(-rotationLimiter, rotationLimiter),
+      rotY = getRandomInt(-rotationLimiter, rotationLimiter);
+  
+  lighting(rotX, rotY, 0.4, 'Power3.easeInOut');
+  
+  cubieSad.attr("class", "sadface");
+  cubieHappy.attr("class", "happyface hidden");
+  
+  //console.log("noooooo! please come back! :'(");
+  
+  TweenMax.to($('.box'), .4, {
+    rotationX: rotX, 
+    rotationY: rotY, 
+    ease:Power3.easeInOut
+  });
+}
+
+//random interval for panicmode
+function loop() {
+    panic();
+    clearInterval(timerIID);
+    timerIID = setInterval('loop();', getRandomInt(300,1000));
+}
+
+timerIID = setInterval('loop();', getRandomInt(300,1000));
+
+//handy functions
+function getRandomInt(min, max) {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
\ No newline at end of file
diff --git a/lonely-little-box/dist/style.css b/lonely-little-box/dist/style.css
new file mode 100644
index 0000000..a038d60
--- /dev/null
+++ b/lonely-little-box/dist/style.css
@@ -0,0 +1,115 @@
+html, body {
+  height: 100%;
+}
+
+body {
+  background: radial-gradient(#777, #333);
+  overflow: hidden;
+}
+
+#viewbox {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 300px;
+  height: 300px;
+  margin: -150px 0 0 -150px;
+  perspective: 800px;
+  pointer-events: none;
+}
+
+.box,
+.cube,
+.face,
+.face-wrapper,
+.cr {
+  position: absolute;
+  transform-style: preserve-3d;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+}
+
+.cube {
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  transform-origin: 50%;
+}
+.cube .face {
+  overflow: hidden;
+  transform-origin: 0 0;
+  background-size: 100% 100% !important;
+  background-position: center;
+}
+.cube .face .face-view {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.cube .ft,
+.cube .bk {
+  width: 100%;
+  height: 100%;
+}
+.cube .bk {
+  left: 100%;
+}
+.cube .rt {
+  transform: rotateY(-90deg) translateX(-50%);
+}
+.cube .lt {
+  transform: rotateY(90deg) translateX(-50%);
+}
+.cube .tp {
+  transform: rotateX(90deg) translateY(-50%);
+}
+.cube .bm {
+  transform: rotateX(-90deg) translateY(-50%);
+}
+.cube .lt {
+  left: 100%;
+}
+.cube .bm {
+  top: 100%;
+}
+
+.cube {
+  width: 160px;
+  height: 160px;
+  margin: -80px 0 0 -80px;
+}
+.cube .ft {
+  transform: translateZ(80px);
+}
+.cube .bk {
+  transform: translateZ(-80px) rotateY(180deg);
+}
+.cube .rt,
+.cube .lt {
+  width: 160px;
+  height: 160px;
+}
+.cube .tp,
+.cube .bm {
+  width: 160px;
+  height: 160px;
+}
+
+.cube .face {
+  background-color: #cccccc;
+  border: none;
+}
+
+svg#cubie {
+  margin: 30px 20px 20px;
+}
+svg#cubie .sadface.hidden,
+svg#cubie .happyface.hidden {
+  visibility: hidden;
+}
diff --git a/lonely-little-box/license.txt b/lonely-little-box/license.txt
new file mode 100644
index 0000000..259703e
--- /dev/null
+++ b/lonely-little-box/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Mohammed Fahsi (https://codepen.io/Fahscinate/pen/YXNxQW)
+
+
+Fork of an original work that is now private.
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/lonely-little-box/src/index.html b/lonely-little-box/src/index.html
new file mode 100644
index 0000000..692e0cb
--- /dev/null
+++ b/lonely-little-box/src/index.html
@@ -0,0 +1,32 @@
+<div id='viewbox'>
+  <div class='box'>
+    <div class='cube'>
+      <div class='face ft'>
+        <div class='face-view'>
+          <svg version="1.1" id="cubie" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 6.4 5.1" enable-background="new 0 0 6.4 5.1" xml:space="preserve">
+          <circle fill="#000" cx="5.6" cy="0.8" r="0.8"/>
+          <circle fill="#000" cx="0.8" cy="0.8" r="0.8"/>
+          <path class="sadface hidden" fill="#000" d="M0.3,5.1c2.9,0,2.9,0,5.8,0C5.9,3.6,4.7,2.4,3.3,2.3C1.2,2.3,0.3,4.3,0.3,5.1z"/>
+          <path class="happyface" fill="#000" d="M0.3,2.3c2.9,0,2.9,0,5.8,0C5.9,3.8,4.7,5,3.3,5.1C1.2,5.1,0.3,3.1,0.3,2.3z"/>
+          </svg>
+        </div>
+      </div>
+      <div class='face bk'>
+        <div class='face-view'></div>
+      </div>
+      <div class='face rt'>
+        <div class='face-view'></div>
+      </div>
+      <div class='face lt'>
+        <div class='face-view'></div>
+      </div>
+      <div class='face bm'>
+        <div class='face-view'></div>
+      </div>
+      <div class='face tp'>
+        <div class='face-view'></div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/lonely-little-box/src/script.js b/lonely-little-box/src/script.js
new file mode 100644
index 0000000..40c21f4
--- /dev/null
+++ b/lonely-little-box/src/script.js
@@ -0,0 +1,89 @@
+var rotationLimiter = 30;
+var timerIID;
+var cubie = $('.box'),
+    cubieSad = $('svg#cubie .sadface'),
+    cubieHappy = $('svg#cubie .happyface'),
+    cubieFaceLt = $('.face.lt'),
+    cubieFaceRt = $('.face.rt'),
+    cubieFaceBm = $('.face.bm'),
+    cubieFaceTp = $('.face.tp');
+
+// cubie is fascinated by mousepointers :D
+$(document).mousemove(function(e) {
+  clearInterval(timerIID);
+  cubieSad.attr("class", "sadface hidden");
+  cubieHappy.attr("class", "happyface");
+  
+  var docX = $(document).width(),
+      docY = $(document).height(),
+      rotateX = -(((e.pageY / docY) * (rotationLimiter * 2)) - rotationLimiter),
+      rotateY = ((e.pageX / docX) * (rotationLimiter * 2)) - rotationLimiter;
+ 
+  lighting(rotateX, rotateY, 0.14, 'Power0.easeIn');
+  
+  TweenMax.to(cubie,0.14,{
+    rotationX: rotateX, 
+    rotationY:rotateY, 
+    ease:Power0.easeIn
+  });
+
+});
+
+// leaving the viewport causes cubie to get depressed and go into panicmode, poor cubie :(
+$( "html" ).mouseout(function() {
+  panic();
+  timerIID = setInterval('loop();', getRandomInt(300,1000));
+});
+
+// cubie's lighting
+function lighting(rotationX, rotationY, duration, ease) {
+  TweenMax.to(cubieFaceLt,duration,{
+    backgroundColor: 'hsl(0, 0%, ' + (80 + rotationY) + '%)', 
+    ease:ease
+  });
+  TweenMax.to(cubieFaceRt,duration,{
+    backgroundColor: 'hsl(0, 0%, ' + (80 - rotationY) + '%)', 
+    ease:ease
+  });
+  TweenMax.to(cubieFaceBm,duration,{
+    backgroundColor: 'hsl(0, 0%, ' + (80 - rotationX) + '%)', 
+    ease:ease
+  });
+  TweenMax.to(cubieFaceTp,duration,{
+    backgroundColor: 'hsl(0, 0%, ' + (80 + rotationX) + '%)', 
+    ease:ease
+  });
+}
+
+// cubie's panicmode
+function panic() {
+  var rotX = getRandomInt(-rotationLimiter, rotationLimiter),
+      rotY = getRandomInt(-rotationLimiter, rotationLimiter);
+  
+  lighting(rotX, rotY, 0.4, 'Power3.easeInOut');
+  
+  cubieSad.attr("class", "sadface");
+  cubieHappy.attr("class", "happyface hidden");
+  
+  //console.log("noooooo! please come back! :'(");
+  
+  TweenMax.to($('.box'), .4, {
+    rotationX: rotX, 
+    rotationY: rotY, 
+    ease:Power3.easeInOut
+  });
+}
+
+//random interval for panicmode
+function loop() {
+    panic();
+    clearInterval(timerIID);
+    timerIID = setInterval('loop();', getRandomInt(300,1000));
+}
+
+timerIID = setInterval('loop();', getRandomInt(300,1000));
+
+//handy functions
+function getRandomInt(min, max) {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
\ No newline at end of file
diff --git a/lonely-little-box/src/style.scss b/lonely-little-box/src/style.scss
new file mode 100644
index 0000000..ce28980
--- /dev/null
+++ b/lonely-little-box/src/style.scss
@@ -0,0 +1,119 @@
+html, body { height: 100%; }
+body {
+    background: radial-gradient(#777, #333);
+    overflow: hidden;
+}
+
+#viewbox {
+  position: absolute;
+  top:50%; 
+  left:50%;
+  width:300px; 
+  height:300px;
+  margin: -150px 0 0 -150px;
+  perspective: 800px;
+  pointer-events: none;
+}
+
+.box, 
+.cube, 
+.face, 
+.face-wrapper, 
+.cr {
+  position: absolute;
+  transform-style: preserve-3d;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+}
+
+.cube {
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  transform-origin: 50%;
+  .face {
+    overflow: hidden;
+    transform-origin: 0 0;
+    background-size: 100% 100%!important;
+    background-position: center;
+    .face-view {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .ft,
+  .bk {
+    width: 100%;
+    height: 100%;
+  }
+  .bk {
+    left: 100%;
+  }
+  .rt {
+    transform: rotateY(-90deg) translateX(-50%);
+  }
+  .lt {
+    transform: rotateY(90deg) translateX(-50%);
+  }
+  .tp {
+    transform: rotateX(90deg) translateY(-50%);
+  }
+  .bm {
+    transform: rotateX(-90deg) translateY(-50%);
+  }
+  .lt {
+    left: 100%;
+  }
+  .bm {
+    top: 100%;
+  }
+}
+
+//sizing
+.cube {
+  width: 160px;
+  height: 160px;
+  margin:-80px 0 0 -80px;
+  .ft {
+    transform:translateZ(80px);
+  }
+  .bk {
+    transform:translateZ(-80px) rotateY(180deg);
+  }
+  .rt, 
+  .lt {
+    width: 160px;
+    height: 160px;
+  }
+  .tp, 
+  .bm {
+    width: 160px;
+    height: 160px;
+  }
+}
+
+//coloring
+.cube{
+  .face {
+    background-color: hsl(0, 0%, 80%);
+    border: none;
+  } 
+}
+
+//cubie's face
+svg#cubie {
+  margin: 30px 20px 20px;
+  .sadface,
+  .happyface{
+    &.hidden {
+      visibility: hidden; 
+    } 
+  }
+}
\ No newline at end of file
diff --git a/look-at-concept/README.markdown b/look-at-concept/README.markdown
new file mode 100644
index 0000000..78ee443
--- /dev/null
+++ b/look-at-concept/README.markdown
@@ -0,0 +1,4 @@
+# LOOK-AT-concept
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/plasm/pen/dvXyaO](https://codepen.io/plasm/pen/dvXyaO).
+
+ 
\ No newline at end of file
diff --git a/look-at-concept/dist/index.html b/look-at-concept/dist/index.html
new file mode 100644
index 0000000..a2f97b3
--- /dev/null
+++ b/look-at-concept/dist/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>LOOK-AT-concept</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="lookat-target" data-dumping="6"  class="lookat-target"></div>
+<a target="_blank" href="https://codepen.io/plasm/pen/XMdERw" class="white-mode">WHITE-MODE</a>
+<div class="head">
+  <h1>LOOK-AT</h1>
+  <h3>A magical plugin for After Effects</h3>
+  <a href="http://lookat.plasm.it/" target="_blank">Visit lookat.plasm.it</a>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/look-at-concept/dist/script.js b/look-at-concept/dist/script.js
new file mode 100644
index 0000000..a7aacf4
--- /dev/null
+++ b/look-at-concept/dist/script.js
@@ -0,0 +1,144 @@
+// Lookat function
+$.fn.lookAt = function (target_coordinates, reinit) {
+  let position;
+  if (reinit === null) {
+    reinit = false;
+  }
+  let { x } = target_coordinates;
+  let { y } = target_coordinates;
+  if (!this.data('position') || reinit === true) {
+    position = {
+      x: this.offset().left,
+      y: this.offset().top };
+
+    this.data('position', position);
+  } else {
+    position = this.data('position');
+  }
+  let angle = Math.atan2(y - position.y, x - position.x);
+  this.css('transform', `rotate(${angle}rad)`);
+};
+
+// Follow Class
+class Followme {
+  static initClass() {
+    this.prototype.defaults = {
+      dumping: 1,
+      disable: false,
+      coordiantes_to_follow: {
+        x: 0,
+        y: 0 },
+
+      offset: {
+        x: 0,
+        y: 0 },
+
+      onChange(coordinates) {} };
+
+  }
+
+  setCoordinates(data) {
+    return this.options.coordiantes_to_follow = data;
+  }
+
+  follow() {
+    let dumping;
+    if (!this.element.data("dumping")) {
+      dumping = this.element.data("dumping") || this.options.dumping;
+      this.element.data("dumping", dumping);
+    } else {
+      dumping = this.element.data("dumping");
+    }
+    // Offset element
+    let offset = this.element.offset();
+    let xd = this.options.offset.x + this.options.coordiantes_to_follow.x - offset.left;
+    let yd = this.options.offset.y + this.options.coordiantes_to_follow.y - offset.top;
+
+    let coordinates = {
+      x: offset.left + xd / dumping,
+      y: offset.top + yd / dumping };
+
+
+    this.element.css({
+      "left": coordinates.x,
+      "top": coordinates.y });
+
+
+    this.options.onChange(coordinates);
+
+    if (!this.disable) {
+      return requestAnimationFrame(() => this.follow());
+    }
+  }
+
+  // Constructor class
+  constructor(element, options) {
+    // Set options
+    this.options = $.extend({}, this.defaults, options);
+    this.element = $(element);
+    this.disable = this.options.disable;
+
+    if (!this.disable) {
+      this.follow();
+    }
+  }}
+
+Followme.initClass();
+
+// Create Elements
+let elements = [
+{
+  'type': 'donut',
+  'number': 10 },
+
+{
+  'type': 'square',
+  'number': 10 },
+
+{
+  'type': 'diamond',
+  'number': 20 },
+
+{
+  'type': 'sausage',
+  'number': 16 },
+
+{
+  'type': 'plus',
+  'number': 10 }];
+
+
+let items = [];
+$.each(elements, function (i, element) {
+  var i;
+  i = 0;
+  while (i < element.number) {
+    let item = $(`<div class="item_container"><div class="${element.type}"></div></div>`);
+    item.css({
+      'left': Math.random() * $(window).width(),
+      'top': Math.random() * $(window).height() });
+
+    items.push(item);
+    $('body').append(item);
+    i++;
+  }
+});
+
+// Init
+const LA = new Followme("#lookat-target", {
+  onChange: coordinates => {
+    return $.each(items, (i, e) =>
+    requestAnimationFrame(() => {
+      return $(e).lookAt({ x: coordinates.x, y: coordinates.y });
+    }));
+
+  } });
+
+
+
+$(window).on("mousemove.followme", e => {
+  return LA.setCoordinates({
+    x: e.pageX,
+    y: e.pageY });
+
+});
\ No newline at end of file
diff --git a/look-at-concept/dist/style.css b/look-at-concept/dist/style.css
new file mode 100644
index 0000000..a806e08
--- /dev/null
+++ b/look-at-concept/dist/style.css
@@ -0,0 +1,167 @@
+@import url("https://fonts.googleapis.com/css?family=Montserrat:200,400,700,900");
+* {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: "Montserrat", sans-serif;
+  background-color: #2a2b2f;
+}
+
+a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  font-size: 12px;
+  text-decoration: none;
+  background: #f7f7f7;
+  padding: 4px 8px;
+  z-index: 10;
+  color: #3B425A;
+}
+a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover {
+  background: #7B46FE;
+  color: #FDFA75;
+}
+
+.lookat-target {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  z-index: 2;
+}
+.lookat-target:before {
+  background: rgba(255, 255, 255, 0.6);
+  content: "";
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  border-radius: 80px;
+  top: -40px;
+  left: -40px;
+}
+.lookat-target:after {
+  content: "";
+  position: absolute;
+  width: 86px;
+  height: 86px;
+  border-radius: 86px;
+  top: -45px;
+  left: -45px;
+  border: 2px solid #F7F7F7;
+}
+
+.head {
+  z-index: 100;
+  transform: translateX(-50%) translateY(-50%);
+  text-align: center;
+  width: 600px;
+  margin: 0 auto;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+}
+.head h1 {
+  font-size: 70px;
+  font-weight: 700;
+  margin: 0;
+  color: #F7F7F7;
+}
+.head h3 {
+  font-size: 30px;
+  font-weight: 100;
+  margin: 0;
+  color: #F7F7F7;
+}
+.head a, .head a:link, .head a:visited, .head a:active {
+  color: #F7F7F7;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-size: 20px;
+  font-weight: 400;
+  border-bottom: 1px solid #7B46FE;
+  position: relative;
+}
+.head a:hover, .head a:link:hover, .head a:visited:hover, .head a:active:hover {
+  color: #7B46FE;
+}
+
+.item_container {
+  position: absolute;
+}
+
+.donut {
+  position: absolute;
+  display: block;
+  width: 60px;
+  height: 60px;
+  border: 16px solid #4C90F5;
+  border-radius: 100%;
+  border-left-color: transparent;
+  border-top-color: transparent;
+  transform-origin: 50% 50%;
+  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
+  left: 50%;
+  top: 50%;
+}
+
+.sausage {
+  position: absolute;
+  box-sizing: border-box;
+  display: block;
+  width: 100px;
+  height: 2px;
+  background: #FFFFFF;
+  border-radius: 2px;
+  transform-origin: 100% 50%;
+  transform: translateX(-100%) translateY(-50%);
+  top: 50%;
+}
+
+.square {
+  position: absolute;
+  box-sizing: border-box;
+  display: block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #3BB15D;
+  transform-origin: 50% 50%;
+  transform: translateX(-50%) translateY(-50%);
+  left: 50%;
+  top: 50%;
+}
+
+.diamond {
+  position: absolute;
+  box-sizing: border-box;
+  display: block;
+  width: 10px;
+  height: 10px;
+  background: #ED4D3C;
+  transform-origin: 50% 50%;
+  transform: translateX(-50%) translateY(-50%);
+  left: 50%;
+  top: 50%;
+}
+
+.plus {
+  position: absolute;
+  background: #FBC402;
+  height: 24px;
+  width: 2px;
+  transform-origin: 50% 50%;
+  transform: translateX(-50%) translateY(-50%);
+  left: 50%;
+  top: 50%;
+}
+.plus:after {
+  background: #FBC402;
+  content: "";
+  height: 2px;
+  left: -11px;
+  position: absolute;
+  top: 11px;
+  width: 24px;
+}
diff --git a/look-at-concept/license.txt b/look-at-concept/license.txt
new file mode 100644
index 0000000..fcfa834
--- /dev/null
+++ b/look-at-concept/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Marco Dell'Anna (https://codepen.io/plasm/pen/dvXyaO)
+
+
+Fork of an original work by Marco Dell'Anna (https://codepen.io/plasm/pen/XMdERw)
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/look-at-concept/src/index.html b/look-at-concept/src/index.html
new file mode 100644
index 0000000..81cc854
--- /dev/null
+++ b/look-at-concept/src/index.html
@@ -0,0 +1,7 @@
+<div id="lookat-target" data-dumping="6"  class="lookat-target"></div>
+<a target="_blank" href="https://codepen.io/plasm/pen/XMdERw" class="white-mode">WHITE-MODE</a>
+<div class="head">
+  <h1>LOOK-AT</h1>
+  <h3>A magical plugin for After Effects</h3>
+  <a href="http://lookat.plasm.it/" target="_blank">Visit lookat.plasm.it</a>
+</div>
\ No newline at end of file
diff --git a/look-at-concept/src/script.babel b/look-at-concept/src/script.babel
new file mode 100644
index 0000000..3d85319
--- /dev/null
+++ b/look-at-concept/src/script.babel
@@ -0,0 +1,144 @@
+// Lookat function
+$.fn.lookAt = function(target_coordinates, reinit) {
+  let position;
+  if (reinit === null) {
+    reinit = false;
+  }
+  let { x } = target_coordinates;
+  let { y } = target_coordinates;
+  if (!this.data('position') || (reinit === true)) {
+    position = {
+      x: this.offset().left,
+      y: this.offset().top
+    };
+    this.data('position', position);
+  } else {
+    position = this.data('position');
+  }
+  let angle = Math.atan2(y - (position.y), x - (position.x));
+  this.css('transform', `rotate(${angle}rad)`);
+};
+
+// Follow Class
+class Followme {
+  static initClass() {
+    this.prototype.defaults = {
+      dumping: 1,
+      disable: false,
+      coordiantes_to_follow: {
+        x: 0,
+        y: 0
+      },
+      offset: {
+        x: 0,
+        y: 0
+      },
+      onChange(coordinates) {}
+    };
+  }
+
+  setCoordinates(data){
+    return this.options.coordiantes_to_follow = data;
+  }
+
+  follow(){
+    let dumping;
+    if (!this.element.data("dumping")) {
+      dumping = this.element.data("dumping") || this.options.dumping;
+      this.element.data("dumping", dumping);
+    } else {
+      dumping = this.element.data("dumping");
+    }
+    // Offset element
+    let offset = this.element.offset();
+    let xd = (this.options.offset.x + this.options.coordiantes_to_follow.x) - offset.left;
+    let yd = (this.options.offset.y + this.options.coordiantes_to_follow.y) - offset.top;
+
+    let coordinates = {
+      x: offset.left + (xd / dumping),
+      y: offset.top  + (yd / dumping)
+    };
+
+    this.element.css({
+      "left": coordinates.x,
+      "top": coordinates.y
+    });
+
+    this.options.onChange(coordinates);
+
+    if (!this.disable) {
+      return requestAnimationFrame( ()=> (this.follow)() );
+    }
+  }
+
+  // Constructor class
+  constructor(element,options) {
+    // Set options
+    this.options  = $.extend({}, this.defaults, options );
+    this.element = $(element);
+    this.disable  = this.options.disable;
+
+    if (!this.disable) {
+      (this.follow)();
+    }
+  }
+}
+Followme.initClass();
+
+// Create Elements
+let elements = [
+  {
+    'type': 'donut',
+    'number': 10
+  },
+  {
+    'type': 'square',
+    'number': 10
+  },
+  {
+    'type': 'diamond',
+    'number': 20
+  },
+  {
+    'type': 'sausage',
+    'number': 16
+  },
+  {
+    'type': 'plus',
+    'number': 10
+  }
+];
+let items = [];
+$.each(elements, function(i, element) {
+  var i;
+  i = 0;
+  while (i < element.number) {
+    let item = $(`<div class="item_container"><div class="${element.type}"></div></div>`);
+    item.css({
+      'left': Math.random() * $(window).width(),
+      'top': Math.random() * $(window).height()
+    });
+    items.push(item);
+    $('body').append(item);
+    i++;
+  }
+});
+
+// Init
+const LA = new Followme("#lookat-target", {
+  onChange: coordinates=> {
+    return $.each( items, (i,e)=>
+      requestAnimationFrame( ()=> {
+        return $(e).lookAt( {x: coordinates.x, y: coordinates.y} );
+      })
+    );
+  }
+}
+);
+
+$(window).on("mousemove.followme", e => {
+  return LA.setCoordinates({
+    x: e.pageX,
+    y: e.pageY
+  });
+});
diff --git a/look-at-concept/src/style.sass b/look-at-concept/src/style.sass
new file mode 100644
index 0000000..84fb4dd
--- /dev/null
+++ b/look-at-concept/src/style.sass
@@ -0,0 +1,159 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400,700,900')
+*
+  box-sizing: border-box
+body
+  padding: 0
+  margin: 0
+  font-family: 'Montserrat', sans-serif
+  background-color: #2a2b2f
+
+a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active
+  position: absolute
+  right: 20px
+  top: 20px
+  font-size: 12px
+  text-decoration: none
+  background: #f7f7f7
+  padding: 4px 8px
+  z-index: 10
+  color: #3B425A
+  &:hover
+    background: #7B46FE
+    color: #FDFA75
+  
+.lookat-target
+  position: absolute
+  width: 1px
+  height: 1px
+  z-index: 2
+  
+  
+  &:before
+    background: rgba(255,255,255,.6)
+    content: ""
+    position: absolute
+    width: 80px
+    height: 80px
+    border-radius: 80px
+    top: -40px
+    left: -40px
+  &:after
+    content: ""
+    position: absolute
+    width: 86px
+    height: 86px
+    border-radius: 86px
+    top: -45px
+    left: -45px
+    border: 2px solid #F7F7F7
+
+.head
+  z-index: 100
+  transform: translateX(-50%) translateY(-50%)
+  text-align: center
+  width: 600px
+  margin: 0 auto
+  position: absolute
+  left: 50%
+  top: 50%
+  
+  h1
+    font-size: 70px
+    font-weight: 700
+    margin: 0
+    color: #F7F7F7
+  h3
+    font-size: 30px
+    font-weight: 100
+    margin: 0
+    color: #F7F7F7
+  a, a:link, a:visited, a:active
+    color: #F7F7F7
+    text-decoration: none
+    text-transform: uppercase
+    font-size: 20px
+    font-weight: 400
+    border-bottom: 1px solid #7B46FE
+    position: relative
+
+    &:hover
+      color: #7B46FE
+  
+    
+    
+.item_container
+  position: absolute
+  
+.donut
+  position: absolute
+  display: block
+  width: 60px
+  height: 60px
+  border: 16px solid #4C90F5
+  border-radius: 100%
+  border-left-color: transparent
+  border-top-color: transparent
+  transform-origin: 50% 50%
+  transform: translateX(-50%) translateY(-50%) rotate(-45deg)
+  left: 50%
+  top: 50%
+
+
+.sausage
+  position: absolute
+  box-sizing: border-box
+  display: block
+  width: 100px
+  height: 2px
+  background: #FFFFFF
+  border-radius: 2px
+  transform-origin: 100% 50%
+  transform: translateX(-100%) translateY(-50%)
+  top: 50%
+
+
+.square
+  position: absolute
+  box-sizing: border-box
+  display: block
+  width: 20px
+  height: 20px
+  border: 2px solid #3BB15D
+  transform-origin: 50% 50%
+  transform: translateX(-50%) translateY(-50%)
+  left: 50%
+  top: 50%
+
+
+.diamond
+  position: absolute
+  box-sizing: border-box
+  display: block
+  width: 10px
+  height: 10px
+  background: #ED4D3C
+  transform-origin: 50% 50%
+  transform: translateX(-50%) translateY(-50%)
+  left: 50%
+  top: 50%
+
+
+.plus
+  position: absolute
+  background: #FBC402
+  height: 24px
+  width: 2px
+  transform-origin: 50% 50%
+  transform: translateX(-50%) translateY(-50%)
+  left: 50%
+  top: 50%
+
+
+  &:after
+    background: #FBC402
+    content: ""
+    height: 2px
+    left: -11px
+    position: absolute
+    top: 11px
+    width: 24px
\ No newline at end of file
diff --git a/loosey-goosey-1-0-0/README.markdown b/loosey-goosey-1-0-0/README.markdown
new file mode 100644
index 0000000..b63db22
--- /dev/null
+++ b/loosey-goosey-1-0-0/README.markdown
@@ -0,0 +1,5 @@
+# loosey-goosey-1.0.0
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/clindsey/pen/eYZLwBB](https://codepen.io/clindsey/pen/eYZLwBB).
+
+playing around with wegbl image distortion
diff --git a/loosey-goosey-1-0-0/dist/index.html b/loosey-goosey-1-0-0/dist/index.html
new file mode 100644
index 0000000..0069284
--- /dev/null
+++ b/loosey-goosey-1-0-0/dist/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - loosey-goosey-1.0.0</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.js"></script>
+<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/292951/OrbitControls_copy.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three-bas@2.12.0/dist/bas.min.js"></script>
+<script src="https://codepen.io/clindsey/pen/rNerZYR.js"></script> <!-- threelium-0.0.2 -->
+
+<div id="js-app"></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/loosey-goosey-1-0-0/dist/script.js b/loosey-goosey-1-0-0/dist/script.js
new file mode 100644
index 0000000..bbec815
--- /dev/null
+++ b/loosey-goosey-1-0-0/dist/script.js
@@ -0,0 +1,103 @@
+function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);} // 
+setTimeout(async () => {
+  console.clear();
+  const texture = await Threelium.loadTexture('https://assets.codepen.io/292951/3fb856c1-1399-4e9b-a2b3-74b8b094c618.sized-1000x1000.jpg');
+  ReactDOM.render(
+  React.createElement(Threelium.SceneView, {
+    camera:
+    React.createElement(Threelium.PerspectiveCamera, {
+      fov: 70,
+      near: 0.01,
+      far: 10000,
+      position: new THREE.Vector3(0, 0, 768) }),
+
+
+    controls:
+    React.createElement(Threelium.OrbitControls, {
+      minDistance: 64,
+      enabled: false }) },
+
+
+
+  React.createElement(MainScene, { texture })),
+
+  document.getElementById('js-app'));
+}, 0);
+
+class MainScene extends Threelium.Scene {
+  initialize({
+    renderer,
+    texture })
+  {
+    return (
+      React.createElement(React.Fragment, null,
+      React.createElement(AmbientLight, {
+        color: 0xffffff }),
+
+      React.createElement(Surface, _extends({
+        width: 1000,
+        height: 750 },
+      {
+        texture }))));
+
+
+
+
+  }}
+
+
+class AmbientLight extends THREE.AmbientLight {
+  constructor({
+    color })
+  {
+    super(color);
+  }}
+
+
+class Surface extends THREE.Mesh {
+  constructor({
+    width,
+    height,
+    texture })
+  {
+    const geometry = new THREE.PlaneGeometry(width, height, 1, 1);
+    const material = new Threelium.EnhancedMaterial({
+      uniforms: {
+        uTime: { value: 0 },
+        uTexture: { value: null } },
+
+      varyingParameters: [`
+        varying vec2 vUv;
+      `],
+      vertexPosition: [`
+        vUv = uv;
+      `],
+      fragmentFunctions: [`
+        vec2 distort (in vec2 st, float time) {
+          vec2 p = st * 2.0 - 1.0;
+          return vec2(
+            p.x + sin(p.y * PI + uTime) / (PI * 2.0), // should this really be PI * 2?
+            p.y + sin(p.x * PI + uTime) / (PI * 2.0)
+          ) / 2.0 - st + vec2(0.5);
+        }
+      `],
+      fragmentParameters: [`
+        uniform float uTime;
+        uniform sampler2D uTexture;
+      `],
+      fragmentDiffuse: [`
+        vec2 p = vUv + distort(vUv, uTime);
+        diffuseColor.rgb = texture2D(uTexture, p).rgb;
+      `] });
+
+    material.uniforms.uTexture.value = texture;
+    super(geometry, material);
+  }
+
+  get time() {
+    return this.material.uniforms.uTime.value;
+  }
+
+  set time(newTime) {
+    this.material.uniforms.uTime.value = newTime;
+  }}
\ No newline at end of file
diff --git a/loosey-goosey-1-0-0/dist/style.css b/loosey-goosey-1-0-0/dist/style.css
new file mode 100644
index 0000000..abbac66
--- /dev/null
+++ b/loosey-goosey-1-0-0/dist/style.css
@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #000;
+}
+
+.c-react-canvas {
+  display: block;
+  margin: 0 auto;
+}
\ No newline at end of file
diff --git a/loosey-goosey-1-0-0/license.txt b/loosey-goosey-1-0-0/license.txt
new file mode 100644
index 0000000..6ac720b
--- /dev/null
+++ b/loosey-goosey-1-0-0/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by not important (https://codepen.io/clindsey/pen/eYZLwBB)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/loosey-goosey-1-0-0/src/index.html b/loosey-goosey-1-0-0/src/index.html
new file mode 100644
index 0000000..0b59dbe
--- /dev/null
+++ b/loosey-goosey-1-0-0/src/index.html
@@ -0,0 +1,8 @@
+<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.js"></script>
+<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/292951/OrbitControls_copy.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three-bas@2.12.0/dist/bas.min.js"></script>
+<script src="https://codepen.io/clindsey/pen/rNerZYR.js"></script> <!-- threelium-0.0.2 -->
+
+<div id="js-app"></div>
\ No newline at end of file
diff --git a/loosey-goosey-1-0-0/src/script.babel b/loosey-goosey-1-0-0/src/script.babel
new file mode 100644
index 0000000..6482ac0
--- /dev/null
+++ b/loosey-goosey-1-0-0/src/script.babel
@@ -0,0 +1,104 @@
+// 
+setTimeout(async () => {
+  console.clear()
+  const texture = await Threelium.loadTexture('https://assets.codepen.io/292951/3fb856c1-1399-4e9b-a2b3-74b8b094c618.sized-1000x1000.jpg')
+  ReactDOM.render((
+    <Threelium.SceneView
+        camera={(
+          <Threelium.PerspectiveCamera
+              fov={70}
+              near={0.01}
+              far={10000}
+              position={new THREE.Vector3(0, 0, 768)}
+          />
+        )}
+        controls={(
+          <Threelium.OrbitControls
+              minDistance={64}
+              enabled={false}
+          />
+        )}
+    >
+      <MainScene {...{ texture }} />
+    </Threelium.SceneView>
+  ), document.getElementById('js-app'))
+}, 0)
+
+class MainScene extends Threelium.Scene {
+  initialize ({
+    renderer,
+    texture,
+  }) {
+    return (
+      <React.Fragment>
+        <AmbientLight
+            color={0xffffff}
+        />
+        <Surface
+            width={1000}
+            height={750}
+            {...{
+              texture,
+            }}
+        />
+      </React.Fragment>
+    )
+  }
+}
+
+class AmbientLight extends THREE.AmbientLight {
+  constructor ({
+    color,
+  }) {
+    super(color)
+  }
+}
+
+class Surface extends THREE.Mesh {
+  constructor ({
+    width,
+    height,
+    texture,
+  }) {
+    const geometry = new THREE.PlaneGeometry(width, height, 1, 1)
+    const material = new Threelium.EnhancedMaterial({
+      uniforms: {
+        uTime: { value: 0 },
+        uTexture: { value: null },
+      },
+      varyingParameters: [`
+        varying vec2 vUv;
+      `],
+      vertexPosition: [`
+        vUv = uv;
+      `],
+      fragmentFunctions: [`
+        vec2 distort (in vec2 st, float time) {
+          vec2 p = st * 2.0 - 1.0;
+          return vec2(
+            p.x + sin(p.y * PI + uTime) / (PI * 2.0), // should this really be PI * 2?
+            p.y + sin(p.x * PI + uTime) / (PI * 2.0)
+          ) / 2.0 - st + vec2(0.5);
+        }
+      `],
+      fragmentParameters: [`
+        uniform float uTime;
+        uniform sampler2D uTexture;
+      `],
+      fragmentDiffuse: [`
+        vec2 p = vUv + distort(vUv, uTime);
+        diffuseColor.rgb = texture2D(uTexture, p).rgb;
+      `],
+    })
+    material.uniforms.uTexture.value = texture
+    super(geometry, material)
+  }
+
+  get time () {
+    return this.material.uniforms.uTime.value
+  }
+
+  set time (newTime) {
+    this.material.uniforms.uTime.value = newTime
+  }
+}
\ No newline at end of file
diff --git a/loosey-goosey-1-0-0/src/style.scss b/loosey-goosey-1-0-0/src/style.scss
new file mode 100644
index 0000000..abbac66
--- /dev/null
+++ b/loosey-goosey-1-0-0/src/style.scss
@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #000;
+}
+
+.c-react-canvas {
+  display: block;
+  margin: 0 auto;
+}
\ No newline at end of file
diff --git a/lotsa-notifications/LICENSE.txt b/lotsa-notifications/LICENSE.txt
new file mode 100644
index 0000000..5e9a8d1
--- /dev/null
+++ b/lotsa-notifications/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 by Jon Kantner (https://codepen.io/jkantner/pen/XWzePgp)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/lotsa-notifications/README.md b/lotsa-notifications/README.md
new file mode 100644
index 0000000..8fba0dd
--- /dev/null
+++ b/lotsa-notifications/README.md
@@ -0,0 +1,5 @@
+# Lotsa Notifications
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jkantner/pen/XWzePgp](https://codepen.io/jkantner/pen/XWzePgp).
+
+They just keep on popping up. Close one, more may take its place!
\ No newline at end of file
diff --git a/lotsa-notifications/dist/index.html b/lotsa-notifications/dist/index.html
new file mode 100644
index 0000000..54d2a0b
--- /dev/null
+++ b/lotsa-notifications/dist/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Lotsa Notifications</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg display="none">
+	<symbol id="clock" viewBox="0 0 32 32" >
+		<circle r="15" cx="16" cy="16" fill="none" stroke="currentColor" stroke-width="2" />
+		<polyline points="16,7 16,16 23,16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+	</symbol>
+	<symbol id="error" viewBox="0 0 32 32" >
+		<circle r="15" cx="16" cy="16" fill="none" stroke="hsl(13,90%,55%)" stroke-width="2" />
+		<line x1="10" y1="10" x2="22" y2="22" stroke="hsl(13,90%,55%)" stroke-width="2" stroke-linecap="round" />
+		<line x1="22" y1="10" x2="10" y2="22" stroke="hsl(13,90%,55%)" stroke-width="2" stroke-linecap="round" />
+	</symbol>
+	<symbol id="message" viewBox="0 0 32 32" >
+		<polygon points="1,6 31,6 31,26 1,26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+		<polyline points="1,6 16,18 31,6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+	</symbol>
+	<symbol id="success" viewBox="0 0 32 32" >
+		<circle r="15" cx="16" cy="16" fill="none" stroke="hsl(93,90%,40%)" stroke-width="2" />
+		<polyline points="9,18 13,22 23,12" fill="none" stroke="hsl(93,90%,40%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+	</symbol>
+	<symbol id="up" viewBox="0 0 32 32" >
+		<circle r="15" cx="16" cy="16" fill="none" stroke="currentColor" stroke-width="2" />
+		<polyline points="11,15 16,10 21,15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+		<line x1="16" y1="10" x2="16" y2="22" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+	</symbol>
+	<symbol id="warning" viewBox="0 0 32 32" >
+		<polygon points="16,1 31,31 1,31" fill="none" stroke="hsl(33,90%,55%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+		<line x1="16" y1="12" x2="16" y2="20" stroke="hsl(33,90%,55%)" stroke-width="2" stroke-linecap="round" />
+		<line x1="16" y1="25" x2="16" y2="25" stroke="hsl(33,90%,55%)" stroke-width="3" stroke-linecap="round" />
+	</symbol>
+</svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/lotsa-notifications/dist/script.js b/lotsa-notifications/dist/script.js
new file mode 100644
index 0000000..d828d70
--- /dev/null
+++ b/lotsa-notifications/dist/script.js
@@ -0,0 +1,289 @@
+window.addEventListener("DOMContentLoaded",() => {
+	const nc = new NotificationCenter();
+});
+
+class NotificationCenter {
+	constructor() {
+		this.items = [];
+		this.itemsToKill = [];
+		this.messages = NotificationMessages();
+		this.killTimeout = null;
+
+		this.spawnNotes(3);
+	}
+	spawnNote() {
+		const id = this.random(0,2**32,true).toString(16);
+		const draw = this.random(0,this.messages.length - 1,true);
+		const message = this.messages[draw];
+		const note = new Notification({
+			id: `note-${id}`,
+			icon: message.icon,
+			title: message.title,
+			subtitle: message.subtitle,
+			actions: message.actions
+		});
+		const transY = 100 * this.items.length;
+
+		note.el.style.transform = `translateY(${transY}%)`;
+		note.el.addEventListener("click",this.killNote.bind(this,note.id));
+
+		this.items.push(note);
+	}
+	spawnNotes(amount) {
+		let count = typeof amount === "number" ? amount : this.random(1,5,true);
+
+		while (count--)
+			this.spawnNote();
+	}
+	killNote(id,e) {
+		const note = this.items.find(item => item.id === id);
+		const tar = e.target;
+
+		if (note && tar.getAttribute("data-dismiss") === id) {
+			note.el.classList.add("notification--out");
+			this.itemsToKill.push(note);
+
+			clearTimeout(this.killTimeout);
+
+			this.killTimeout = setTimeout(() => {
+				this.itemsToKill.forEach(itemToKill => {
+					document.body.removeChild(itemToKill.el);
+
+					const left = this.items.filter(item => item.id !== itemToKill.id);
+					this.items = [...left];
+				});
+
+				this.itemsToKill = [];
+
+				if (!this.items.length)
+					this.spawnNotes();
+				else
+					this.spawnNotes(this.random(0,1,true));
+
+				this.shiftNotes();
+			},note.killTime);
+		}
+	}
+	shiftNotes() {
+		this.items.forEach((item,i) => {
+			const transY = 100 * i;
+			item.el.style.transform = `translateY(${transY}%)`;
+		});
+	}
+	random(min,max,round = false) {
+		const percent = crypto.getRandomValues(new Uint32Array(1))[0] / 2**32;
+		const relativeValue = (max - min) * percent;
+
+		return min + (round === true ? Math.round(relativeValue) : +relativeValue.toFixed(2));
+	}
+}
+
+class Notification {
+	constructor(args) {
+		this.args = args;
+		this.el = null;
+		this.id = null;
+		this.killTime = 300;
+		this.init(args);
+	}
+	init(args) {
+		const {id,icon,title,subtitle,actions} = args;
+		const block = "notification";
+		const parent = document.body;
+		const xmlnsSVG = "http://www.w3.org/2000/svg";
+		const xmlnsUse = "http://www.w3.org/1999/xlink";
+
+		const note = this.newEl("div");
+		note.id = id;
+		note.className = block;
+		parent.insertBefore(note,parent.lastElementChild);
+
+		const box = this.newEl("div");
+		box.className = `${block}__box`;
+		note.appendChild(box);
+
+		const content = this.newEl("div");
+		content.className = `${block}__content`;
+		box.appendChild(content);
+
+		const _icon = this.newEl("div");
+		_icon.className = `${block}__icon`;
+		content.appendChild(_icon);
+
+		const iconSVG = this.newEl("svg",xmlnsSVG);
+		iconSVG.setAttribute("class",`${block}__icon-svg`);
+		iconSVG.setAttribute("role","img");
+		iconSVG.setAttribute("aria-label",icon);
+		iconSVG.setAttribute("width","32px");
+		iconSVG.setAttribute("height","32px");
+		_icon.appendChild(iconSVG);
+
+		const iconUse = this.newEl("use",xmlnsSVG);
+		iconUse.setAttributeNS(xmlnsUse,"href",`#${icon}`);
+		iconSVG.appendChild(iconUse);
+
+		const text = this.newEl("div");
+		text.className = `${block}__text`;
+		content.appendChild(text);
+
+		const _title = this.newEl("div");
+		_title.className = `${block}__text-title`;
+		_title.textContent = title;
+		text.appendChild(_title);
+
+		if (subtitle) {
+			const _subtitle = this.newEl("div");
+			_subtitle.className = `${block}__text-subtitle`;
+			_subtitle.textContent = subtitle;
+			text.appendChild(_subtitle);
+		}
+
+		const btns = this.newEl("div");
+		btns.className = `${block}__btns`;
+		box.appendChild(btns);
+
+		actions.forEach(action => {
+			const btn = this.newEl("button");
+			btn.className = `${block}__btn`;
+			btn.type = "button";
+			btn.setAttribute("data-dismiss",id);
+
+			const btnText = this.newEl("span");
+			btnText.className = `${block}__btn-text`;
+			btnText.textContent = action;
+
+			btn.appendChild(btnText);
+			btns.appendChild(btn);
+		});
+
+		this.el = note;
+		this.id = note.id;
+	}
+	newEl(elName,NSValue) {
+		if (NSValue)
+			return document.createElementNS(NSValue,elName);
+		else
+			return document.createElement(elName);
+	}
+}
+
+function NotificationMessages() {
+	return [
+		{
+			icon: "error",
+			title: "Oh No",
+			subtitle: "Something really bad happened.",
+			actions: ["Close"]
+		},
+		{
+			icon: "error",
+			title: "Error",
+			subtitle: "The operation completed successfully.",
+			actions: ["OK"]
+		},
+		{
+			icon: "error",
+			title: "Critical Error",
+			subtitle: "An error has occurred while trying to display an error notification.",
+			actions: ["OK"]
+		},
+		{
+			icon: "warning",
+			title: "Reminder",
+			subtitle: "You will receive more notifications.",
+			actions: ["Close"]
+		},
+		{
+			icon: "warning",
+			title: "Failed to Save Changes",
+			actions: ["Retry","Cancel"]
+		},
+		{
+			icon: "warning",
+			title: "Download Failed",
+			actions: ["Retry","Cancel"]
+		},
+		{
+			icon: "warning",
+			title: "Cannot Send Mail",
+			subtitle: "The message was rejected by the server because it is too large.",
+			actions: ["OK"]
+		},
+		{
+			icon: "warning",
+			title: "Disk Not Ejected Properly",
+			subtitle: "Eject “CopyThisFloppy” before disconnecting or turning it off.",
+			actions: ["Close"]
+		},
+		{
+			icon: "warning",
+			title: "Notifications",
+			subtitle: "Notifications may include alerts, sounds, and icon badges.",
+			actions: ["Don’t Allow","Allow"]
+		},
+		{
+			icon: "success",
+			title: "Changes Saved",
+			actions: ["OK"]
+		},
+		{
+			icon: "success",
+			title: "Download Complete",
+			actions: ["OK"]
+		},
+		{
+			icon: "success",
+			title: "Yippee",
+			subtitle: "Nothing bad happened.",
+			actions: ["OK"]
+		},
+		{
+			icon: "message",
+			title: "Mail Password Required",
+			subtitle: "Enter your password for user@domain.com.",
+			actions: ["Close","Continue"]
+		},
+		{
+			icon: "message",
+			title: "Mail",
+			subtitle: "You have 10 new messages.",
+			actions: ["Read","Dismiss"]
+		},
+		{
+			icon: "clock",
+			title: "Coffee Break",
+			subtitle: "In 5 minutes",
+			actions: ["Close","Snooze"]
+		},
+		{
+			icon: "clock",
+			title: "Muffin Time",
+			subtitle: "12:30 PM",
+			actions: ["Close","Snooze"]
+		},
+		{
+			icon: "clock",
+			title: "Hammer Time",
+			subtitle: "In 2 minutes",
+			actions: ["Close","Snooze"]
+		},
+		{
+			icon: "up",
+			title: "Upgrade Available",
+			subtitle: "Enjoy the latest technologies and refinements to your favorite apps.",
+			actions: ["Install","Details"]
+		},
+		{
+			icon: "up",
+			title: "Upgrade Waiting",
+			subtitle: "Get it now, or it won’t be long until you are far behind everyone else.",
+			actions: ["Install","Details"]
+		},
+		{
+			icon: "up",
+			title: "Upgrade Now",
+			subtitle: "The current version will soon be obsolete. What are you waiting for?",
+			actions: ["Install","Details"]
+		}
+	];
+}
\ No newline at end of file
diff --git a/lotsa-notifications/dist/style.css b/lotsa-notifications/dist/style.css
new file mode 100644
index 0000000..5162b3f
--- /dev/null
+++ b/lotsa-notifications/dist/style.css
@@ -0,0 +1,191 @@
+* {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+:root {
+	--hue: 223;
+	--bg: hsl(var(--hue),10%,90%);
+	--fg: hsl(var(--hue),10%,10%);
+	--transDur: 0.15s;
+	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
+}
+body,
+button {
+	color: var(--fg);
+	font: 1em/1.5 "DM Sans", "Helvetica Neue", Helvetica, sans-serif;
+}
+body {
+	background-color: var(--bg);
+	height: 100vh;
+	display: grid;
+	place-items: center;
+	transition: background-color var(--transDur);
+}
+.notification {
+	padding-bottom: 0.75em;
+	position: fixed;
+	top: 1.5em;
+	right: 1.5em;
+	width: 18.75em;
+	max-width: calc(100% - 3em);
+	transition: transform 0.15s ease-out;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+.notification__box,
+.notification__content,
+.notification__btns {
+	display: flex;
+}
+.notification__box,
+.notification__content {
+	align-items: center;
+}
+.notification__box {
+	animation: flyIn 0.3s ease-out;
+	background-color: hsl(0,0%,100%);
+	border-radius: 0.75em;
+	box-shadow: 0 0.5em 1em hsla(var(--hue),10%,10%,0.1);
+	height: 4em;
+	transition:
+		background-color var(--transDur),
+		color var(--transDur);
+}
+.notification--out .notification__box {
+	animation: flyOut 0.3s ease-out forwards;
+}
+.notification__content {
+	padding: 0.375em 1em;
+	width: 100%;
+	height: 100%;
+}
+.notification__icon {
+	flex-shrink: 0;
+	margin-right: 0.75em;
+	width: 2em;
+	height: 2em;
+}
+.notification__icon-svg {
+	width: 100%;
+	height: auto;
+}
+.notification__text {
+	line-height: 1.333;
+}
+.notification__text-title {
+	font-size: 0.75em;
+	font-weight: bold;
+}
+.notification__text-subtitle {
+	font-size: 0.6em;
+	opacity: 0.75;
+}
+.notification__btns {
+	box-shadow: -1px 0 0 hsla(var(--hue),10%,10%,0.15);
+	flex-direction: column;
+	flex-shrink: 0;
+	min-width: 4em;
+	height: 100%;
+	transition: box-shadow var(--transDur);
+}
+.notification__btn {
+	background-color: transparent;
+	box-shadow: 0 0 0 hsla(var(--hue),10%,10%,0.5) inset;
+	font-size: 0.6em;
+	line-height: 1;
+	font-weight: 500;
+	height: 100%;
+	padding: 0 0.5rem;
+	transition:
+		background-color var(--transDur),
+		color var(--transDur);
+	-webkit-appearance: none;
+	appearance: none;
+	-webkit-tap-highlight-color: transparent;
+}
+.notification__btn-text {
+	display: inline-block;
+	pointer-events: none;
+}
+.notification__btn:first-of-type {
+	border-radius: 0 0.75rem 0 0;
+}
+.notification__btn:last-of-type {
+	border-radius: 0 0 0.75rem 0;
+}
+.notification__btn:only-child {
+	border-radius: 0 0.75rem 0.75rem 0;
+}
+.notification__btn + .notification__btn {
+	box-shadow: 0 -1px 0 hsla(var(--hue),10%,10%,0.15);
+	font-weight: 400;
+}
+.notification__btn:active,
+.notification__btn:focus {
+	background-color: hsl(var(--hue),10%,95%);
+}
+.notification__btn:focus {
+	outline: transparent;
+}
+
+@supports selector(:focus-visible) {
+	.notification__btn:focus {
+		background-color: transparent;
+	}
+	.notification__btn:focus-visible,
+	.notification__btn:active {
+		background-color: hsl(var(--hue),10%,95%);
+	}
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: hsl(var(--hue),10%,10%);
+		--fg: hsl(var(--hue),10%,90%);
+	}
+	.notification__box {
+		background-color: hsl(var(--hue),10%,30%);
+	}
+	.notification__btns {
+		box-shadow: -1px 0 0 hsla(var(--hue),10%,90%,0.15);
+	}
+	.notification__btn + .notification__btn {
+		box-shadow: 0 -1px 0 hsla(var(--hue),10%,90%,0.15);
+	}
+	.notification__btn:active,
+	.notification__btn:focus {
+		background-color: hsl(var(--hue),10%,35%);
+	}
+
+	@supports selector(:focus-visible) {
+		.notification__btn:focus {
+			background-color: transparent;
+		}
+		.notification__btn:focus-visible,
+		.notification__btn:active {
+			background-color: hsl(var(--hue),10%,35%);
+		}
+	}
+}
+
+/* Animations */
+@keyframes flyIn {
+	from {
+		transform: translateX(calc(100% + 1.5em));
+	}
+	to {
+		transform: translateX(0);
+	}
+}
+@keyframes flyOut {
+	from {
+		transform: translateX(0);
+	}
+	to {
+		transform: translateX(calc(100% + 1.5em));
+	}
+}
\ No newline at end of file
diff --git a/lotsa-notifications/src/index.html b/lotsa-notifications/src/index.html
new file mode 100644
index 0000000..a7ee014
--- /dev/null
+++ b/lotsa-notifications/src/index.html
@@ -0,0 +1,29 @@
+<svg display="none">
+	<symbol id="clock" viewBox="0 0 32 32" >
+		<circle r="15" cx="16" cy="16" fill="none" stroke="currentColor" stroke-width="2" />
+		<polyline points="16,7 16,16 23,16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+	</symbol>
+	<symbol id="error" viewBox="0 0 32 32" >
+		<circle r="15" cx="16" cy="16" fill="none" stroke="hsl(13,90%,55%)" stroke-width="2" />
+		<line x1="10" y1="10" x2="22" y2="22" stroke="hsl(13,90%,55%)" stroke-width="2" stroke-linecap="round" />
+		<line x1="22" y1="10" x2="10" y2="22" stroke="hsl(13,90%,55%)" stroke-width="2" stroke-linecap="round" />
+	</symbol>
+	<symbol id="message" viewBox="0 0 32 32" >
+		<polygon points="1,6 31,6 31,26 1,26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+		<polyline points="1,6 16,18 31,6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+	</symbol>
+	<symbol id="success" viewBox="0 0 32 32" >
+		<circle r="15" cx="16" cy="16" fill="none" stroke="hsl(93,90%,40%)" stroke-width="2" />
+		<polyline points="9,18 13,22 23,12" fill="none" stroke="hsl(93,90%,40%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+	</symbol>
+	<symbol id="up" viewBox="0 0 32 32" >
+		<circle r="15" cx="16" cy="16" fill="none" stroke="currentColor" stroke-width="2" />
+		<polyline points="11,15 16,10 21,15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+		<line x1="16" y1="10" x2="16" y2="22" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+	</symbol>
+	<symbol id="warning" viewBox="0 0 32 32" >
+		<polygon points="16,1 31,31 1,31" fill="none" stroke="hsl(33,90%,55%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+		<line x1="16" y1="12" x2="16" y2="20" stroke="hsl(33,90%,55%)" stroke-width="2" stroke-linecap="round" />
+		<line x1="16" y1="25" x2="16" y2="25" stroke="hsl(33,90%,55%)" stroke-width="3" stroke-linecap="round" />
+	</symbol>
+</svg>
\ No newline at end of file
diff --git a/lotsa-notifications/src/script.js b/lotsa-notifications/src/script.js
new file mode 100644
index 0000000..d828d70
--- /dev/null
+++ b/lotsa-notifications/src/script.js
@@ -0,0 +1,289 @@
+window.addEventListener("DOMContentLoaded",() => {
+	const nc = new NotificationCenter();
+});
+
+class NotificationCenter {
+	constructor() {
+		this.items = [];
+		this.itemsToKill = [];
+		this.messages = NotificationMessages();
+		this.killTimeout = null;
+
+		this.spawnNotes(3);
+	}
+	spawnNote() {
+		const id = this.random(0,2**32,true).toString(16);
+		const draw = this.random(0,this.messages.length - 1,true);
+		const message = this.messages[draw];
+		const note = new Notification({
+			id: `note-${id}`,
+			icon: message.icon,
+			title: message.title,
+			subtitle: message.subtitle,
+			actions: message.actions
+		});
+		const transY = 100 * this.items.length;
+
+		note.el.style.transform = `translateY(${transY}%)`;
+		note.el.addEventListener("click",this.killNote.bind(this,note.id));
+
+		this.items.push(note);
+	}
+	spawnNotes(amount) {
+		let count = typeof amount === "number" ? amount : this.random(1,5,true);
+
+		while (count--)
+			this.spawnNote();
+	}
+	killNote(id,e) {
+		const note = this.items.find(item => item.id === id);
+		const tar = e.target;
+
+		if (note && tar.getAttribute("data-dismiss") === id) {
+			note.el.classList.add("notification--out");
+			this.itemsToKill.push(note);
+
+			clearTimeout(this.killTimeout);
+
+			this.killTimeout = setTimeout(() => {
+				this.itemsToKill.forEach(itemToKill => {
+					document.body.removeChild(itemToKill.el);
+
+					const left = this.items.filter(item => item.id !== itemToKill.id);
+					this.items = [...left];
+				});
+
+				this.itemsToKill = [];
+
+				if (!this.items.length)
+					this.spawnNotes();
+				else
+					this.spawnNotes(this.random(0,1,true));
+
+				this.shiftNotes();
+			},note.killTime);
+		}
+	}
+	shiftNotes() {
+		this.items.forEach((item,i) => {
+			const transY = 100 * i;
+			item.el.style.transform = `translateY(${transY}%)`;
+		});
+	}
+	random(min,max,round = false) {
+		const percent = crypto.getRandomValues(new Uint32Array(1))[0] / 2**32;
+		const relativeValue = (max - min) * percent;
+
+		return min + (round === true ? Math.round(relativeValue) : +relativeValue.toFixed(2));
+	}
+}
+
+class Notification {
+	constructor(args) {
+		this.args = args;
+		this.el = null;
+		this.id = null;
+		this.killTime = 300;
+		this.init(args);
+	}
+	init(args) {
+		const {id,icon,title,subtitle,actions} = args;
+		const block = "notification";
+		const parent = document.body;
+		const xmlnsSVG = "http://www.w3.org/2000/svg";
+		const xmlnsUse = "http://www.w3.org/1999/xlink";
+
+		const note = this.newEl("div");
+		note.id = id;
+		note.className = block;
+		parent.insertBefore(note,parent.lastElementChild);
+
+		const box = this.newEl("div");
+		box.className = `${block}__box`;
+		note.appendChild(box);
+
+		const content = this.newEl("div");
+		content.className = `${block}__content`;
+		box.appendChild(content);
+
+		const _icon = this.newEl("div");
+		_icon.className = `${block}__icon`;
+		content.appendChild(_icon);
+
+		const iconSVG = this.newEl("svg",xmlnsSVG);
+		iconSVG.setAttribute("class",`${block}__icon-svg`);
+		iconSVG.setAttribute("role","img");
+		iconSVG.setAttribute("aria-label",icon);
+		iconSVG.setAttribute("width","32px");
+		iconSVG.setAttribute("height","32px");
+		_icon.appendChild(iconSVG);
+
+		const iconUse = this.newEl("use",xmlnsSVG);
+		iconUse.setAttributeNS(xmlnsUse,"href",`#${icon}`);
+		iconSVG.appendChild(iconUse);
+
+		const text = this.newEl("div");
+		text.className = `${block}__text`;
+		content.appendChild(text);
+
+		const _title = this.newEl("div");
+		_title.className = `${block}__text-title`;
+		_title.textContent = title;
+		text.appendChild(_title);
+
+		if (subtitle) {
+			const _subtitle = this.newEl("div");
+			_subtitle.className = `${block}__text-subtitle`;
+			_subtitle.textContent = subtitle;
+			text.appendChild(_subtitle);
+		}
+
+		const btns = this.newEl("div");
+		btns.className = `${block}__btns`;
+		box.appendChild(btns);
+
+		actions.forEach(action => {
+			const btn = this.newEl("button");
+			btn.className = `${block}__btn`;
+			btn.type = "button";
+			btn.setAttribute("data-dismiss",id);
+
+			const btnText = this.newEl("span");
+			btnText.className = `${block}__btn-text`;
+			btnText.textContent = action;
+
+			btn.appendChild(btnText);
+			btns.appendChild(btn);
+		});
+
+		this.el = note;
+		this.id = note.id;
+	}
+	newEl(elName,NSValue) {
+		if (NSValue)
+			return document.createElementNS(NSValue,elName);
+		else
+			return document.createElement(elName);
+	}
+}
+
+function NotificationMessages() {
+	return [
+		{
+			icon: "error",
+			title: "Oh No",
+			subtitle: "Something really bad happened.",
+			actions: ["Close"]
+		},
+		{
+			icon: "error",
+			title: "Error",
+			subtitle: "The operation completed successfully.",
+			actions: ["OK"]
+		},
+		{
+			icon: "error",
+			title: "Critical Error",
+			subtitle: "An error has occurred while trying to display an error notification.",
+			actions: ["OK"]
+		},
+		{
+			icon: "warning",
+			title: "Reminder",
+			subtitle: "You will receive more notifications.",
+			actions: ["Close"]
+		},
+		{
+			icon: "warning",
+			title: "Failed to Save Changes",
+			actions: ["Retry","Cancel"]
+		},
+		{
+			icon: "warning",
+			title: "Download Failed",
+			actions: ["Retry","Cancel"]
+		},
+		{
+			icon: "warning",
+			title: "Cannot Send Mail",
+			subtitle: "The message was rejected by the server because it is too large.",
+			actions: ["OK"]
+		},
+		{
+			icon: "warning",
+			title: "Disk Not Ejected Properly",
+			subtitle: "Eject “CopyThisFloppy” before disconnecting or turning it off.",
+			actions: ["Close"]
+		},
+		{
+			icon: "warning",
+			title: "Notifications",
+			subtitle: "Notifications may include alerts, sounds, and icon badges.",
+			actions: ["Don’t Allow","Allow"]
+		},
+		{
+			icon: "success",
+			title: "Changes Saved",
+			actions: ["OK"]
+		},
+		{
+			icon: "success",
+			title: "Download Complete",
+			actions: ["OK"]
+		},
+		{
+			icon: "success",
+			title: "Yippee",
+			subtitle: "Nothing bad happened.",
+			actions: ["OK"]
+		},
+		{
+			icon: "message",
+			title: "Mail Password Required",
+			subtitle: "Enter your password for user@domain.com.",
+			actions: ["Close","Continue"]
+		},
+		{
+			icon: "message",
+			title: "Mail",
+			subtitle: "You have 10 new messages.",
+			actions: ["Read","Dismiss"]
+		},
+		{
+			icon: "clock",
+			title: "Coffee Break",
+			subtitle: "In 5 minutes",
+			actions: ["Close","Snooze"]
+		},
+		{
+			icon: "clock",
+			title: "Muffin Time",
+			subtitle: "12:30 PM",
+			actions: ["Close","Snooze"]
+		},
+		{
+			icon: "clock",
+			title: "Hammer Time",
+			subtitle: "In 2 minutes",
+			actions: ["Close","Snooze"]
+		},
+		{
+			icon: "up",
+			title: "Upgrade Available",
+			subtitle: "Enjoy the latest technologies and refinements to your favorite apps.",
+			actions: ["Install","Details"]
+		},
+		{
+			icon: "up",
+			title: "Upgrade Waiting",
+			subtitle: "Get it now, or it won’t be long until you are far behind everyone else.",
+			actions: ["Install","Details"]
+		},
+		{
+			icon: "up",
+			title: "Upgrade Now",
+			subtitle: "The current version will soon be obsolete. What are you waiting for?",
+			actions: ["Install","Details"]
+		}
+	];
+}
\ No newline at end of file
diff --git a/lotsa-notifications/src/style.css b/lotsa-notifications/src/style.css
new file mode 100644
index 0000000..5162b3f
--- /dev/null
+++ b/lotsa-notifications/src/style.css
@@ -0,0 +1,191 @@
+* {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+:root {
+	--hue: 223;
+	--bg: hsl(var(--hue),10%,90%);
+	--fg: hsl(var(--hue),10%,10%);
+	--transDur: 0.15s;
+	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
+}
+body,
+button {
+	color: var(--fg);
+	font: 1em/1.5 "DM Sans", "Helvetica Neue", Helvetica, sans-serif;
+}
+body {
+	background-color: var(--bg);
+	height: 100vh;
+	display: grid;
+	place-items: center;
+	transition: background-color var(--transDur);
+}
+.notification {
+	padding-bottom: 0.75em;
+	position: fixed;
+	top: 1.5em;
+	right: 1.5em;
+	width: 18.75em;
+	max-width: calc(100% - 3em);
+	transition: transform 0.15s ease-out;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+.notification__box,
+.notification__content,
+.notification__btns {
+	display: flex;
+}
+.notification__box,
+.notification__content {
+	align-items: center;
+}
+.notification__box {
+	animation: flyIn 0.3s ease-out;
+	background-color: hsl(0,0%,100%);
+	border-radius: 0.75em;
+	box-shadow: 0 0.5em 1em hsla(var(--hue),10%,10%,0.1);
+	height: 4em;
+	transition:
+		background-color var(--transDur),
+		color var(--transDur);
+}
+.notification--out .notification__box {
+	animation: flyOut 0.3s ease-out forwards;
+}
+.notification__content {
+	padding: 0.375em 1em;
+	width: 100%;
+	height: 100%;
+}
+.notification__icon {
+	flex-shrink: 0;
+	margin-right: 0.75em;
+	width: 2em;
+	height: 2em;
+}
+.notification__icon-svg {
+	width: 100%;
+	height: auto;
+}
+.notification__text {
+	line-height: 1.333;
+}
+.notification__text-title {
+	font-size: 0.75em;
+	font-weight: bold;
+}
+.notification__text-subtitle {
+	font-size: 0.6em;
+	opacity: 0.75;
+}
+.notification__btns {
+	box-shadow: -1px 0 0 hsla(var(--hue),10%,10%,0.15);
+	flex-direction: column;
+	flex-shrink: 0;
+	min-width: 4em;
+	height: 100%;
+	transition: box-shadow var(--transDur);
+}
+.notification__btn {
+	background-color: transparent;
+	box-shadow: 0 0 0 hsla(var(--hue),10%,10%,0.5) inset;
+	font-size: 0.6em;
+	line-height: 1;
+	font-weight: 500;
+	height: 100%;
+	padding: 0 0.5rem;
+	transition:
+		background-color var(--transDur),
+		color var(--transDur);
+	-webkit-appearance: none;
+	appearance: none;
+	-webkit-tap-highlight-color: transparent;
+}
+.notification__btn-text {
+	display: inline-block;
+	pointer-events: none;
+}
+.notification__btn:first-of-type {
+	border-radius: 0 0.75rem 0 0;
+}
+.notification__btn:last-of-type {
+	border-radius: 0 0 0.75rem 0;
+}
+.notification__btn:only-child {
+	border-radius: 0 0.75rem 0.75rem 0;
+}
+.notification__btn + .notification__btn {
+	box-shadow: 0 -1px 0 hsla(var(--hue),10%,10%,0.15);
+	font-weight: 400;
+}
+.notification__btn:active,
+.notification__btn:focus {
+	background-color: hsl(var(--hue),10%,95%);
+}
+.notification__btn:focus {
+	outline: transparent;
+}
+
+@supports selector(:focus-visible) {
+	.notification__btn:focus {
+		background-color: transparent;
+	}
+	.notification__btn:focus-visible,
+	.notification__btn:active {
+		background-color: hsl(var(--hue),10%,95%);
+	}
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: hsl(var(--hue),10%,10%);
+		--fg: hsl(var(--hue),10%,90%);
+	}
+	.notification__box {
+		background-color: hsl(var(--hue),10%,30%);
+	}
+	.notification__btns {
+		box-shadow: -1px 0 0 hsla(var(--hue),10%,90%,0.15);
+	}
+	.notification__btn + .notification__btn {
+		box-shadow: 0 -1px 0 hsla(var(--hue),10%,90%,0.15);
+	}
+	.notification__btn:active,
+	.notification__btn:focus {
+		background-color: hsl(var(--hue),10%,35%);
+	}
+
+	@supports selector(:focus-visible) {
+		.notification__btn:focus {
+			background-color: transparent;
+		}
+		.notification__btn:focus-visible,
+		.notification__btn:active {
+			background-color: hsl(var(--hue),10%,35%);
+		}
+	}
+}
+
+/* Animations */
+@keyframes flyIn {
+	from {
+		transform: translateX(calc(100% + 1.5em));
+	}
+	to {
+		transform: translateX(0);
+	}
+}
+@keyframes flyOut {
+	from {
+		transform: translateX(0);
+	}
+	to {
+		transform: translateX(calc(100% + 1.5em));
+	}
+}
\ No newline at end of file
diff --git a/love-hypnosis/README.markdown b/love-hypnosis/README.markdown
new file mode 100644
index 0000000..bbca832
--- /dev/null
+++ b/love-hypnosis/README.markdown
@@ -0,0 +1,5 @@
+# Love hypnosis
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/natszafraniec/pen/dyVZEQd](https://codepen.io/natszafraniec/pen/dyVZEQd).
+
+No comment
diff --git a/love-hypnosis/dist/index.html b/love-hypnosis/dist/index.html
new file mode 100644
index 0000000..db5bbf5
--- /dev/null
+++ b/love-hypnosis/dist/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Love hypnosis</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" role="img" viewBox="0 0 300 300">
+</svg>
+<!-- partial -->
+  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/EasePack3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/love-hypnosis/dist/script.js b/love-hypnosis/dist/script.js
new file mode 100644
index 0000000..d62890f
--- /dev/null
+++ b/love-hypnosis/dist/script.js
@@ -0,0 +1,117 @@
+(function() {
+  const svg = document.querySelector("svg");
+  const settings = {
+    animation: {
+      duration: 7.5,
+      circleCount: 10,
+      heartCount: 8
+    },
+    circle: {
+      x: 150,
+      y: 150, 
+      r: 150
+    },
+  }
+  let layers = [];
+
+  draw();
+  animate();
+
+
+  function draw() {
+    for(let i = 0; i <= settings.animation.circleCount; i++) {
+      let layer = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+
+      circle.setAttribute("cx", settings.circle.x);
+      circle.setAttribute("cy", settings.circle.y);
+      circle.setAttribute("r", settings.circle.r);
+
+      svg.append(layer);
+      layer.append(circle);
+
+      const length = circle.getTotalLength();
+      const lengthDelta = circle.getTotalLength() / settings.animation.heartCount;
+      let hearts = [];
+      let offset = lengthDelta * (i % 2) / 2;
+
+      for(let j = 0; j < settings.animation.heartCount; j++) {
+        let point = circle.getPointAtLength(offset + lengthDelta * j);
+        let heart = document.createElementNS("http://www.w3.org/2000/svg", "path");
+
+        heart.setAttribute("d", `M ${point.x - 40},${point.y - 20} a 10,-10 0,0,1 40,0 a 10,-10 0,0,1 40,0 q 0,30 -40,60 q -40,-30 -40,-60 z`);
+
+        hearts.push(heart);
+        layer.append(heart);
+      }
+
+      layers.push({
+        group: layer,
+        circle: circle,
+        hearts: hearts
+      });
+    }
+  }
+
+  function animate() {
+    let tl = gsap.timeline();
+    
+    layers.forEach((layer, i) => {
+      let direction = i % 2 ? 1 : -1;
+
+      // Setting things
+
+      gsap.set([layer.group, ...layer.hearts], {
+        transformOrigin: "50% 50%",
+        scale: 0,
+      });
+
+      gsap.set([...layer.hearts], {
+        fill: "#ff5252"
+      });
+
+      // Animating things
+
+      gsap.set(layer.circle, {
+        strokeWidth: 0,
+        stroke: "#40407a",
+        fill: "none"
+      });
+
+      tl.to(layer.group, {
+        duration: settings.animation.duration,
+        scale: Math.SQRT2,
+        delay: -settings.animation.duration / settings.animation.circleCount,
+        repeat: -1,
+        ease: "Power3.easeIn",
+      }, "<");
+
+      tl.to(layer.circle, {
+        duration: settings.animation.duration,
+        strokeWidth: 30,
+        repeat: -1,
+        ease: "Power3.easeOut",
+      }, "<");
+
+      tl.to([...layer.hearts], {
+        keyframes: [
+          {
+            scale: 1,
+            rotation: 360 * direction,
+            duration: settings.animation.duration / 2,
+            fill: "#ff5252"
+          },
+          {
+            scale: 0,
+            rotation: 720 * direction,
+            duration: settings.animation.duration / 2,
+            fill: "#ffda79"
+          }
+        ],
+        ease: "linear",
+        delay: 0,
+        repeat: -1
+      }, "<");
+    });
+  }
+}());
\ No newline at end of file
diff --git a/love-hypnosis/dist/style.css b/love-hypnosis/dist/style.css
new file mode 100644
index 0000000..e1b9c9e
--- /dev/null
+++ b/love-hypnosis/dist/style.css
@@ -0,0 +1,17 @@
+html, body {
+	height: 100%;
+}
+
+body {
+	background: #2c2c54;
+	display: grid;
+	place-items: center;
+}
+
+svg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
\ No newline at end of file
diff --git a/love-hypnosis/license.txt b/love-hypnosis/license.txt
new file mode 100644
index 0000000..dba9327
--- /dev/null
+++ b/love-hypnosis/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Natalia 🤟 (https://codepen.io/natszafraniec/pen/dyVZEQd)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/love-hypnosis/src/index.html b/love-hypnosis/src/index.html
new file mode 100644
index 0000000..13cfcc5
--- /dev/null
+++ b/love-hypnosis/src/index.html
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" role="img" viewBox="0 0 300 300">
+</svg>
\ No newline at end of file
diff --git a/love-hypnosis/src/script.js b/love-hypnosis/src/script.js
new file mode 100644
index 0000000..d62890f
--- /dev/null
+++ b/love-hypnosis/src/script.js
@@ -0,0 +1,117 @@
+(function() {
+  const svg = document.querySelector("svg");
+  const settings = {
+    animation: {
+      duration: 7.5,
+      circleCount: 10,
+      heartCount: 8
+    },
+    circle: {
+      x: 150,
+      y: 150, 
+      r: 150
+    },
+  }
+  let layers = [];
+
+  draw();
+  animate();
+
+
+  function draw() {
+    for(let i = 0; i <= settings.animation.circleCount; i++) {
+      let layer = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+
+      circle.setAttribute("cx", settings.circle.x);
+      circle.setAttribute("cy", settings.circle.y);
+      circle.setAttribute("r", settings.circle.r);
+
+      svg.append(layer);
+      layer.append(circle);
+
+      const length = circle.getTotalLength();
+      const lengthDelta = circle.getTotalLength() / settings.animation.heartCount;
+      let hearts = [];
+      let offset = lengthDelta * (i % 2) / 2;
+
+      for(let j = 0; j < settings.animation.heartCount; j++) {
+        let point = circle.getPointAtLength(offset + lengthDelta * j);
+        let heart = document.createElementNS("http://www.w3.org/2000/svg", "path");
+
+        heart.setAttribute("d", `M ${point.x - 40},${point.y - 20} a 10,-10 0,0,1 40,0 a 10,-10 0,0,1 40,0 q 0,30 -40,60 q -40,-30 -40,-60 z`);
+
+        hearts.push(heart);
+        layer.append(heart);
+      }
+
+      layers.push({
+        group: layer,
+        circle: circle,
+        hearts: hearts
+      });
+    }
+  }
+
+  function animate() {
+    let tl = gsap.timeline();
+    
+    layers.forEach((layer, i) => {
+      let direction = i % 2 ? 1 : -1;
+
+      // Setting things
+
+      gsap.set([layer.group, ...layer.hearts], {
+        transformOrigin: "50% 50%",
+        scale: 0,
+      });
+
+      gsap.set([...layer.hearts], {
+        fill: "#ff5252"
+      });
+
+      // Animating things
+
+      gsap.set(layer.circle, {
+        strokeWidth: 0,
+        stroke: "#40407a",
+        fill: "none"
+      });
+
+      tl.to(layer.group, {
+        duration: settings.animation.duration,
+        scale: Math.SQRT2,
+        delay: -settings.animation.duration / settings.animation.circleCount,
+        repeat: -1,
+        ease: "Power3.easeIn",
+      }, "<");
+
+      tl.to(layer.circle, {
+        duration: settings.animation.duration,
+        strokeWidth: 30,
+        repeat: -1,
+        ease: "Power3.easeOut",
+      }, "<");
+
+      tl.to([...layer.hearts], {
+        keyframes: [
+          {
+            scale: 1,
+            rotation: 360 * direction,
+            duration: settings.animation.duration / 2,
+            fill: "#ff5252"
+          },
+          {
+            scale: 0,
+            rotation: 720 * direction,
+            duration: settings.animation.duration / 2,
+            fill: "#ffda79"
+          }
+        ],
+        ease: "linear",
+        delay: 0,
+        repeat: -1
+      }, "<");
+    });
+  }
+}());
\ No newline at end of file
diff --git a/love-hypnosis/src/style.css b/love-hypnosis/src/style.css
new file mode 100644
index 0000000..e1b9c9e
--- /dev/null
+++ b/love-hypnosis/src/style.css
@@ -0,0 +1,17 @@
+html, body {
+	height: 100%;
+}
+
+body {
+	background: #2c2c54;
+	display: grid;
+	place-items: center;
+}
+
+svg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
\ No newline at end of file
diff --git a/magic-card/README.markdown b/magic-card/README.markdown
new file mode 100644
index 0000000..6260ecb
--- /dev/null
+++ b/magic-card/README.markdown
@@ -0,0 +1,5 @@
+# Magic Card
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/gayane-gasparyan/pen/jOmaBQK](https://codepen.io/gayane-gasparyan/pen/jOmaBQK).
+
+Yet another glowing card
diff --git a/magic-card/dist/index.html b/magic-card/dist/index.html
new file mode 100644
index 0000000..a1fe731
--- /dev/null
+++ b/magic-card/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Magic Card</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="card">
+  Magic Card
+</div>
+
+<a href="https://mythrillfiction.com/" target="_blank">Mythrill</a>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/magic-card/dist/style.css b/magic-card/dist/style.css
new file mode 100644
index 0000000..1a77f9d
--- /dev/null
+++ b/magic-card/dist/style.css
@@ -0,0 +1,102 @@
+@property --rotate {
+  syntax: "<angle>";
+  initial-value: 132deg;
+  inherits: false;
+}
+
+:root {
+  --card-height: 65vh;
+  --card-width: calc(var(--card-height) / 1.5);
+}
+
+
+body {
+  min-height: 100vh;
+  background: #212534;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  box-sizing: border-box;
+}
+
+
+.card {
+  background: #191c29;
+  width: var(--card-width);
+  height: var(--card-height);
+  padding: 3px;
+  position: relative;
+  border-radius: 6px;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  font-size: 1.5em;
+  color: rgb(88 199 250 / 0%);
+  cursor: pointer;
+  font-family: cursive;
+}
+
+.card:hover {
+  color: rgb(88 199 250 / 100%);
+  transition: color 1s;
+}
+.card:hover:before, .card:hover:after {
+  animation: none;
+  opacity: 0;
+}
+
+
+.card::before {
+  content: "";
+  width: 104%;
+  height: 102%;
+  border-radius: 8px;
+  background-image: linear-gradient(
+    var(--rotate)
+    , #5ddcff, #3c67e3 43%, #4e00c2);
+    position: absolute;
+    z-index: -1;
+    top: -1%;
+    left: -2%;
+    animation: spin 2.5s linear infinite;
+}
+
+.card::after {
+  position: absolute;
+  content: "";
+  top: calc(var(--card-height) / 6);
+  left: 0;
+  right: 0;
+  z-index: -1;
+  height: 100%;
+  width: 100%;
+  margin: 0 auto;
+  transform: scale(0.8);
+  filter: blur(calc(var(--card-height) / 6));
+  background-image: linear-gradient(
+    var(--rotate)
+    , #5ddcff, #3c67e3 43%, #4e00c2);
+    opacity: 1;
+  transition: opacity .5s;
+  animation: spin 2.5s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    --rotate: 0deg;
+  }
+  100% {
+    --rotate: 360deg;
+  }
+}
+
+a {
+  color: #212534;
+  text-decoration: none;
+  font-family: sans-serif;
+  font-weight: bold;
+  margin-top: 2rem;
+}
\ No newline at end of file
diff --git a/magic-card/license.txt b/magic-card/license.txt
new file mode 100644
index 0000000..130a73d
--- /dev/null
+++ b/magic-card/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Gayane (https://codepen.io/gayane-gasparyan/pen/jOmaBQK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/magic-card/src/index.html b/magic-card/src/index.html
new file mode 100644
index 0000000..c15fe36
--- /dev/null
+++ b/magic-card/src/index.html
@@ -0,0 +1,5 @@
+<div class="card">
+  Magic Card
+</div>
+
+<a href="https://mythrillfiction.com/" target="_blank">Mythrill</a>
\ No newline at end of file
diff --git a/magic-card/src/style.css b/magic-card/src/style.css
new file mode 100644
index 0000000..1a77f9d
--- /dev/null
+++ b/magic-card/src/style.css
@@ -0,0 +1,102 @@
+@property --rotate {
+  syntax: "<angle>";
+  initial-value: 132deg;
+  inherits: false;
+}
+
+:root {
+  --card-height: 65vh;
+  --card-width: calc(var(--card-height) / 1.5);
+}
+
+
+body {
+  min-height: 100vh;
+  background: #212534;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  box-sizing: border-box;
+}
+
+
+.card {
+  background: #191c29;
+  width: var(--card-width);
+  height: var(--card-height);
+  padding: 3px;
+  position: relative;
+  border-radius: 6px;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  font-size: 1.5em;
+  color: rgb(88 199 250 / 0%);
+  cursor: pointer;
+  font-family: cursive;
+}
+
+.card:hover {
+  color: rgb(88 199 250 / 100%);
+  transition: color 1s;
+}
+.card:hover:before, .card:hover:after {
+  animation: none;
+  opacity: 0;
+}
+
+
+.card::before {
+  content: "";
+  width: 104%;
+  height: 102%;
+  border-radius: 8px;
+  background-image: linear-gradient(
+    var(--rotate)
+    , #5ddcff, #3c67e3 43%, #4e00c2);
+    position: absolute;
+    z-index: -1;
+    top: -1%;
+    left: -2%;
+    animation: spin 2.5s linear infinite;
+}
+
+.card::after {
+  position: absolute;
+  content: "";
+  top: calc(var(--card-height) / 6);
+  left: 0;
+  right: 0;
+  z-index: -1;
+  height: 100%;
+  width: 100%;
+  margin: 0 auto;
+  transform: scale(0.8);
+  filter: blur(calc(var(--card-height) / 6));
+  background-image: linear-gradient(
+    var(--rotate)
+    , #5ddcff, #3c67e3 43%, #4e00c2);
+    opacity: 1;
+  transition: opacity .5s;
+  animation: spin 2.5s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    --rotate: 0deg;
+  }
+  100% {
+    --rotate: 360deg;
+  }
+}
+
+a {
+  color: #212534;
+  text-decoration: none;
+  font-family: sans-serif;
+  font-weight: bold;
+  margin-top: 2rem;
+}
\ No newline at end of file
diff --git a/make-the-web-less-boring/README.markdown b/make-the-web-less-boring/README.markdown
new file mode 100644
index 0000000..3a4077a
--- /dev/null
+++ b/make-the-web-less-boring/README.markdown
@@ -0,0 +1,5 @@
+# Make the web less boring
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/piccalilli/pen/QWdJgJQ](https://codepen.io/piccalilli/pen/QWdJgJQ).
+
+_Built with [Splitting](https://splitting.js.org)_
diff --git a/make-the-web-less-boring/dist/index.html b/make-the-web-less-boring/dist/index.html
new file mode 100644
index 0000000..cbfc440
--- /dev/null
+++ b/make-the-web-less-boring/dist/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Make the web less boring</title>
+  <link rel='stylesheet' href='https://unpkg.com/modern-css-reset/dist/reset.min.css'>
+<link rel='stylesheet' href='https://unpkg.com/splitting/dist/splitting.css'>
+<link rel='stylesheet' href='https://unpkg.com/splitting/dist/splitting-cells.css'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@700&amp;display=swap'>
+<link rel='stylesheet' href='https://use.typekit.net/zlj2zcu.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>
+  <span class="intro">Make the web less</span>
+  <span class="main" aria-label="boring" data-splitting>Boring</span>
+</h1>
+<!-- partial -->
+  <script src='https://unpkg.com/splitting/dist/splitting.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/make-the-web-less-boring/dist/script.js b/make-the-web-less-boring/dist/script.js
new file mode 100644
index 0000000..dc4e89e
--- /dev/null
+++ b/make-the-web-less-boring/dist/script.js
@@ -0,0 +1 @@
+Splitting();
\ No newline at end of file
diff --git a/make-the-web-less-boring/dist/style.css b/make-the-web-less-boring/dist/style.css
new file mode 100644
index 0000000..384bda4
--- /dev/null
+++ b/make-the-web-less-boring/dist/style.css
@@ -0,0 +1,78 @@
+:root {
+  --fluid-type-min: 2rem;
+  --fluid-type-max: 10rem;
+  --fluid-type-target: 5vw;
+  --color: #dbe3ea;
+}
+
+body {
+  background: #24313c;
+  color: var(--color);
+  padding: 2rem;
+  font-family: "Cabin Condensed", sans-serif;
+  text-transform: uppercase;
+  font-weight: bold;
+  display: grid;
+  place-items: center;
+}
+
+h1 > span {
+  line-height: 1;
+  font-size: clamp( var(--fluid-type-min, 1rem), calc(1rem + var(--fluid-type-target, 3vw)), var(--fluid-type-max, 1.3rem) );
+  display: block;
+}
+
+.main {
+  --fluid-type-min: 8rem;
+  --fluid-type-max: 20rem;
+  --fluid-type-target: 20vw;
+  font-family: acier-bat-gris, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 0.7;
+  margin-left: -0.06ch;
+}
+
+.main .char {
+  cursor: zoom-in;
+  transform-origin: center bottom;
+  transition: transform 400ms cubic-bezier(0.4, 0, 0.7, 1.8), color 400ms ease;
+  color: var(--color);
+  box-shadow: none;
+}
+
+.main .char:nth-child(3),
+.main .char:nth-child(4) {
+  letter-spacing: 0.02ch;
+}
+
+.main .char:hover {
+  transform: scale(1.4);
+  transition-duration: 200ms;
+  text-shadow: 0px 0px 3px black, 0px 0px 20px var(--color);
+  z-index: 1;
+}
+
+.main .char:nth-child(1):hover {
+  --color: #ffd300;
+}
+
+.main .char:nth-child(2):hover {
+  --color: #de38c8;
+}
+
+.main .char:nth-child(3):hover {
+  --color: #8b5fda;
+}
+
+.main .char:nth-child(4):hover {
+  --color: #86bbd8;
+}
+
+.main .char:nth-child(5):hover {
+  --color: #d3f6db;
+}
+
+.main .char:nth-child(6):hover {
+  --color: #eb9486;
+}
\ No newline at end of file
diff --git a/make-the-web-less-boring/license.txt b/make-the-web-less-boring/license.txt
new file mode 100644
index 0000000..ac19ce7
--- /dev/null
+++ b/make-the-web-less-boring/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Piccalilli (https://codepen.io/piccalilli/pen/QWdJgJQ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/make-the-web-less-boring/src/index.html b/make-the-web-less-boring/src/index.html
new file mode 100644
index 0000000..a8a1e1d
--- /dev/null
+++ b/make-the-web-less-boring/src/index.html
@@ -0,0 +1,4 @@
+<h1>
+  <span class="intro">Make the web less</span>
+  <span class="main" aria-label="boring" data-splitting>Boring</span>
+</h1>
\ No newline at end of file
diff --git a/make-the-web-less-boring/src/script.js b/make-the-web-less-boring/src/script.js
new file mode 100644
index 0000000..f93e764
--- /dev/null
+++ b/make-the-web-less-boring/src/script.js
@@ -0,0 +1 @@
+Splitting();
diff --git a/make-the-web-less-boring/src/style.scss b/make-the-web-less-boring/src/style.scss
new file mode 100644
index 0000000..786f993
--- /dev/null
+++ b/make-the-web-less-boring/src/style.scss
@@ -0,0 +1,82 @@
+:root {
+  --fluid-type-min: 2rem;
+  --fluid-type-max: 10rem;
+  --fluid-type-target: 5vw;
+  --color: #dbe3ea;
+}
+
+body {
+  background: #24313c;
+  color: var(--color);
+  padding: 2rem;
+  font-family: "Cabin Condensed", sans-serif;
+  text-transform: uppercase;
+  font-weight: bold;
+  display: grid;
+  place-items: center;
+}
+
+h1 > span {
+  line-height: 1;
+  font-size: clamp(
+    var(--fluid-type-min, 1rem),
+    calc(1rem + var(--fluid-type-target, 3vw)),
+    var(--fluid-type-max, 1.3rem)
+  );
+  display: block;
+}
+
+.main {
+  --fluid-type-min: 8rem;
+  --fluid-type-max: 20rem;
+  --fluid-type-target: 20vw;
+  font-family: acier-bat-gris, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 0.7;
+  margin-left: -0.06ch;
+}
+
+.main .char {
+  cursor: zoom-in;
+  transform-origin: center bottom;
+  transition: transform 400ms cubic-bezier(0.4, 0, 0.7, 1.8), color 400ms ease;
+  color: var(--color);
+  box-shadow: none;
+}
+
+.main .char:nth-child(3),
+.main .char:nth-child(4) {
+  letter-spacing: 0.02ch;
+}
+
+.main .char:hover {
+  transform: scale(1.4);
+  transition-duration: 200ms;
+  text-shadow: 0px 0px 3px black, 0px 0px 20px var(--color);
+  z-index: 1;
+}
+
+.main .char:nth-child(1):hover {
+  --color: #ffd300;
+}
+
+.main .char:nth-child(2):hover {
+  --color: #de38c8;
+}
+
+.main .char:nth-child(3):hover {
+  --color: #8b5fda;
+}
+
+.main .char:nth-child(4):hover {
+  --color: #86bbd8;
+}
+
+.main .char:nth-child(5):hover {
+  --color: #d3f6db;
+}
+
+.main .char:nth-child(6):hover {
+  --color: #eb9486;
+}
diff --git a/mars-explorer-scrolltrigger-demo/README.markdown b/mars-explorer-scrolltrigger-demo/README.markdown
new file mode 100644
index 0000000..d06d320
--- /dev/null
+++ b/mars-explorer-scrolltrigger-demo/README.markdown
@@ -0,0 +1,5 @@
+# Mars Explorer ScrollTrigger demo
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/hailedev/pen/zYrJrbj](https://codepen.io/hailedev/pen/zYrJrbj).
+
+Experiment using ScrollTrigger and threejs
diff --git a/mars-explorer-scrolltrigger-demo/dist/index.html b/mars-explorer-scrolltrigger-demo/dist/index.html
new file mode 100644
index 0000000..a81fdec
--- /dev/null
+++ b/mars-explorer-scrolltrigger-demo/dist/index.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Mars Explorer ScrollTrigger demo</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="circle">
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <circle id="circle" cx="50" cy="50" r="4" stroke="green" stroke-width="1px" fill-opacity="0"/>
+  </svg>
+</div>
+
+<div class="scroller">
+  <svg viewBox="0 0 100 65" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="0,0 20,0 50,40 80,0 100,0 50,65" stroke="green" stroke-width="1px" fill="green"/>
+  </svg>
+  <svg viewBox="0 0 100 65" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="0,0 20,0 50,40 80,0 100,0 50,65" stroke="green" stroke-width="1px" fill="green"/>
+  </svg>
+  <svg viewBox="0 0 100 65" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="0,0 20,0 50,40 80,0 100,0 50,65" stroke="green" stroke-width="1px" fill="green"/>
+  </svg>
+</div>
+
+<div class="loader">Loading<div></div><div></div><div></div></div>
+<div class="watermark">Models and resources from <a href="https://trek.nasa.gov/">NASA</a></div>
+
+<div class="section welcome"></div>
+<div class="content">
+  <div class="section olympus">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1px"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA00300_hires.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/calderaOMons_marsexpress_lg.jpg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section curiosity">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/575963main_PIA14297_full.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/673885main_PIA15986-full_full.jpg" />
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/713264main_pia16457-full_full.jpg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section valles">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/581433main_PIA00425_full.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/pia21274.jpg" />
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/pia21651.jpg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section medusae">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA00809_hires.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA23522_hires.jpg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section cydonia">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA02381_hires.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/face2001_mgs.jpg" />
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA04745_hires.jpg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section tharsis">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA00408_hires.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA02049_hires.jpg" />
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/pia11176.jpg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section deimos">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/318064main_pia11826-full_full.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/283561main_phobos2_hirise_big_full.jpg" />
+            </div>
+          </div>
+          <div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.4/polyfill.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/TextPlugin.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/ScrollTrigger.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r118/three.min.js'></script>
+<script src='https://unpkg.com/three@0.118.0/examples/js/loaders/GLTFLoader.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/mars-explorer-scrolltrigger-demo/dist/script.js b/mars-explorer-scrolltrigger-demo/dist/script.js
new file mode 100644
index 0000000..cf5586c
--- /dev/null
+++ b/mars-explorer-scrolltrigger-demo/dist/script.js
@@ -0,0 +1,280 @@
+Math.degToRad = degrees => degrees * (Math.PI / 180);
+
+class Scene {
+  constructor(urls) {
+    this._urls = urls;
+  }
+
+  init() {
+    return new Promise(resolve => {
+      let models = [];
+      const manager = new THREE.LoadingManager(() => {
+        this.setupCanvas(models);
+        resolve();
+      });
+      const loader = new THREE.GLTFLoader(manager);
+      this._urls.forEach(x => loader.load(x.url, gltf => {
+        gltf.scene.visible = x.visible;
+        models.push({ id: x.id, scene: gltf.scene });
+      }));
+    });
+  }
+  setupCanvas(models) {
+    // Camera
+    this.camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 1, 30000);
+    this.camera.position.set(0, 0, 4000);
+
+    // Scene
+    this.scene = new THREE.Scene();
+
+    // Renderer
+    this.renderer = new THREE.WebGLRenderer();
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.renderer.outputEncoding = THREE.sRGBEncoding;
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+
+    // Light
+    const ambientLight = new THREE.AmbientLight(0x111111);
+    this.scene.add(ambientLight);
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff);
+    directionalLight.position.set(2, 0, 1).normalize();
+    this.scene.add(directionalLight);
+
+    models.forEach(x => {
+      this[x.id] = x.scene;
+      this.scene.add(this[x.id]);
+    });
+
+    document.body.appendChild(this.renderer.domElement);
+
+    this.render();
+    this.animate();
+
+    window.addEventListener('resize', () => {
+      this.camera.aspect = window.innerWidth / window.innerHeight;
+      this.camera.updateProjectionMatrix();
+      this.renderer.setSize(window.innerWidth, window.innerHeight);
+      this.render();
+    }, false);
+  }
+  animate() {
+    this.render();
+    requestAnimationFrame(() => this.animate());
+  }
+  render() {
+    this.renderer.render(this.scene, this.camera);
+  }}
+
+
+class Page {
+  constructor(scene) {
+    this._scene = scene;
+  }
+
+  get mars() {
+    return this._scene.mars;
+  }
+
+  get deimos() {
+    return this._scene.deimos;
+  }
+
+  get camera() {
+    return this._scene.camera;
+  }
+
+  get content() {
+    return [
+    {
+      title: 'Olympus Mons',
+      coords: {
+        Latitude: '18.65275889',
+        Longitude: '-133.8025067' },
+
+      selector: '.olympus' },
+
+    {
+      title: 'Gale Crater',
+      coords: {
+        Latitude: '136.783441',
+        Longitude: '-5.10837943' },
+
+      selector: '.curiosity' },
+
+    {
+      title: 'Valles Marineris',
+      coords: {
+        Latitude: '-14.00586857',
+        Longitude: '-58.5876741' },
+
+      selector: '.valles' },
+
+    {
+      title: 'Medusae Fossae',
+      coords: {
+        Latitude: '-2.166284249',
+        Longitude: '-164.1956286' },
+
+      selector: '.medusae' },
+
+    {
+      title: 'Cydonia',
+      coords: {
+        Latitude: '39.66724753',
+        Longitude: '0' },
+
+      selector: '.cydonia' },
+
+    {
+      title: 'Tharsis Volcanic Region',
+      coords: {
+        Latitude: '-2.623623306',
+        Longitude: '-116.7076259' },
+
+      selector: '.tharsis' },
+
+    {
+      title: 'Deimos',
+      coords: {
+        Distance: '23,460 km',
+        Radius: '6.2 km' },
+
+      selector: '.deimos' }];
+
+
+  }
+  async init() {
+    window.onbeforeunload = function () {
+      window.scrollTo(0, 0);
+    };
+    await this._scene.init();
+    document.querySelector('.loader').style.display = 'none';
+    this.setupPlugins();
+    this.setupAnimScrollTrigger();
+    this.setupContentScrollTrigger();
+  }
+  setupPlugins() {
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.registerPlugin(TextPlugin);
+    gsap.registerPlugin(DrawSVGPlugin);
+  }
+  setupAnimScrollTrigger() {
+    const opening = new gsap.timeline().
+    fromTo(this.camera.position, { z: 2000 }, { z: 4000, ease: 'Circ.easeOut', duration: 1.5 }, 'opening').
+    fromTo(this.camera.rotation, { y: -Math.degToRad(30), x: -Math.degToRad(-5) }, { y: 0, x: 0, ease: 'Circ.easeOut', duration: 1.5 }, 'opening').
+    set(".scroller, .watermark", { visibility: "visible" });
+
+    const rotation = new gsap.timeline({
+      scrollTrigger: {
+        toggleActions: "play pause play pause",
+        trigger: ".welcome",
+        start: "top bottom",
+        end: "top -1" } }).
+
+
+    to(this.mars.rotation, { y: Math.degToRad(360), ease: 'none', repeat: -1, duration: 30 });
+
+    const animation = new gsap.timeline({
+      scrollTrigger: {
+        trigger: ".content",
+        scrub: true,
+        start: "top bottom",
+        end: "bottom bottom"
+        //markers: {startColor: "green", endColor: "red", fontSize: "12px"}
+      } }).
+
+    set(".nav svg, .circle svg", { visibility: "visible" }).
+    to(this.mars.rotation, { y: Math.degToRad(133.8025067 + 90), x: Math.degToRad(18.65275889), ease: 'power2.inOut', duration: 0.75 }, 0).
+    to(this.camera.position, { z: 3000, ease: 'linear', duration: 0.75 }, 0).
+    set(".scroller", { visibility: "hidden" }, 0.2).
+    to(this.mars.rotation, { y: -Math.degToRad(136.78344100200877 - 90), x: Math.degToRad(5.1083794384352), ease: 'power2.inOut', duration: 0.75 }, 1).
+    to(this.mars.rotation, { y: Math.degToRad(58.5876741 + 90), x: Math.degToRad(-14.00586857), ease: 'power2.inOut', duration: 0.75 }, 2).
+    to(this.mars.rotation, { y: Math.degToRad(164.1956286 + 90), x: Math.degToRad(-2.166284249), ease: 'power2.inOut', duration: 0.75 }, 3).
+    to(this.mars.rotation, { y: Math.degToRad(90), x: Math.degToRad(39.66724753), ease: 'power2.inOut', duration: 0.75 }, 4).
+    to(this.mars.rotation, { y: Math.degToRad(116.7076259 + 90), x: Math.degToRad(-2.623623306), ease: 'power2.inOut', duration: 0.75 }, 5).
+    to(this.camera.position, { z: 22000, ease: 'linear' }, 6).
+    to(this.camera.rotation, { z: Math.degToRad(10), y: Math.degToRad(10), ease: 'power2.inOut', duration: 0.75 }, 6).
+    set(this.deimos, { visible: true }, 6).
+    to(this.deimos.scale, { x: 7, y: 7, z: 7, ease: 'linear', duration: 0 }, 6).
+    fromTo(this.deimos.position, { x: -500, y: 0, z: 22000 }, { x: -170, y: 0, z: 21000, ease: 'power2.inOut', duration: 0.75 }, 6);
+  }
+  setupContentScrollTrigger() {
+    const onUpdate = function () {
+      const target = this.targets()[0];
+      const time = this.time();
+      const duration = this.duration();
+
+      if (time >= duration || time <= 0) {
+        target.classList.remove('editing');
+        return;
+      }
+      if (!target.classList.contains('editing')) {
+        target.classList.add('editing');
+      }
+    };
+
+    const getLines = obj => {
+      const lines = [];
+      Object.keys(obj).forEach(x => {
+        lines.push(`${x}: ${obj[x]}`);
+      });
+      return lines;
+    };
+
+    ScrollTrigger.addEventListener("scrollEnd", function (e) {
+      const target = document.querySelectorAll('.editing')[0];
+      if (target) {
+        target.classList.add('blink');
+      }
+    });
+
+    ScrollTrigger.addEventListener("scrollStart", function (e) {
+      const target = document.querySelectorAll('.editing')[0];
+      if (target) {
+        target.classList.remove('blink');
+      }
+    });
+
+    this.content.forEach((item, i, arr) => {
+      const timeline = new gsap.timeline({
+        scrollTrigger: {
+          trigger: item.selector,
+          scrub: true,
+          start: 'top 75%',
+          end: `bottom ${i < arr.length - 1 ? '75%' : 'bottom'}`
+          //markers: {startColor: "green", endColor: "red", fontSize: "12px"}
+        } }).
+
+      to(`${item.selector} .title`, { text: `${item.title}`, ease: 'linear', duration: 0.25, onUpdate }, 0).
+      to(`${item.selector} .lat`, { text: `${getLines(item.coords)[0]}`, ease: 'linear', duration: 0.125, onUpdate }, 0.25).
+      to(`${item.selector} .lon`, { text: `${getLines(item.coords)[1]}`, ease: 'linear', duration: 0.125, onUpdate }, 0.375).
+      fromTo(`${item.selector} polyline`, { drawSVG: 0 }, { drawSVG: '100%', duration: 0.125 }, 0.5).
+      fromTo('#circle', { drawSVG: 0 }, { drawSVG: '100%', duration: 0.125 }, 0.625).
+      set(`${item.selector} .image-container`, { visibility: 'visible' }).
+      fromTo(`${item.selector} .image-container`, { width: '0%' }, { width: '25vw', duration: 0.125 }, 0.75).
+      fromTo(`${item.selector} .image-container`, { height: '0%' }, { height: 'auto', duration: 0.125 }, 0.875);
+
+      if (i < arr.length - 1) {
+        timeline.yoyo(true).
+        repeat(1).
+        repeatDelay(0.5);
+      }
+    });
+  }}
+
+
+const urls = [
+{
+  id: 'mars',
+  url: 'https://assets.codepen.io/1443237/Mars_1_6792.glb',
+  visible: true },
+
+{
+  id: 'deimos',
+  url: 'https://assets.codepen.io/1443237/Deimos_1_1000.glb',
+  visible: false }];
+
+
+
+new Page(new Scene(urls)).init();
\ No newline at end of file
diff --git a/mars-explorer-scrolltrigger-demo/dist/style.css b/mars-explorer-scrolltrigger-demo/dist/style.css
new file mode 100644
index 0000000..5f012aa
--- /dev/null
+++ b/mars-explorer-scrolltrigger-demo/dist/style.css
@@ -0,0 +1,200 @@
+@import url(https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap);
+body {
+  margin: 0;
+  overflow-x: hidden;
+  background-color: black;
+}
+canvas {
+  position: fixed;
+  top: 0;
+}
+svg {
+  height: 100%;
+  width: 100%;
+  vector-effect: non-scaling-stroke;
+}
+.watermark {
+  position: fixed;
+  font: 18px Play;
+  color: white;
+  z-index: 3;
+  right: 0;
+  bottom: 0;
+  padding: 10px;
+  visibility: hidden;
+}
+.loader {
+  font: 68px Play;
+  font-weight: bold;
+  z-index: 3;
+  color: green;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.loader div {
+  height: 10px;
+  width: 10px;
+  background: green;
+  display: inline-block;
+  animation: load 1s ease-in alternate-reverse infinite;
+}
+.loader div + div {
+  margin-left: 4px;
+}
+.loader div:nth-child(2) {
+  animation-delay: 0.33s;
+}
+.loader div:nth-child(3) {
+  animation-delay: 0.66s;
+}
+.circle,
+.scroller {
+  z-index: 3;
+  position: fixed;
+}
+.circle {
+  height: 100%;
+  width: 100%;
+}
+.circle svg {
+  visibility: hidden;
+}
+.scroller {
+  display: flex;
+  flex-direction: column;
+  left: 50%;
+  bottom: 4%;
+  transform: translate(-50%, 0);
+  visibility: hidden;
+}
+.scroller svg {
+  width: 8vmin;
+  height: auto;
+}
+.scroller svg polygon {
+  animation: scroll 1s ease-in alternate-reverse infinite;
+}
+.scroller svg:nth-child(2) {
+  transform: translate(0, -1vmin);
+}
+.scroller svg:nth-child(2) polygon {
+  animation-delay: 0.33s;
+}
+.scroller svg:nth-child(3) {
+  transform: translate(0, -2vmin);
+}
+.scroller svg:nth-child(3) polygon {
+  animation-delay: 0.66s;
+}
+.section {
+  font-family: 'Play', sans-serif;
+  height: 100vh;
+  width: 100vw;
+  color: white;
+  z-index: 1;
+  position: relative;
+  display: inline-block;
+}
+.section__content {
+  padding: 4vmin;
+  position: fixed;
+  color: green;
+  z-index: 2;
+  top: 0;
+  height: calc(100vh - 8vmin);
+  width: calc(100vw - 8vmin);
+  display: flex;
+  flex-direction: column;
+}
+.section__content svg {
+  visibility: hidden;
+}
+.section__content .title {
+  font-size: 54px;
+  font-weight: bold;
+}
+.section__content .info {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.section__content .info__row {
+  display: flex;
+  flex-grow: 1;
+  height: 50%;
+}
+.section__content .info__row > div {
+  flex-grow: 1;
+  width: 100%;
+}
+.section__content .info__row .coords {
+  font-size: 24px;
+}
+.section__content .info__row .coords > div:last-child {
+  height: calc(100vh/2 - 4vmin - 114px);
+  width: 100%;
+}
+.section__content .info__row .image-container {
+  border: 2px solid green;
+  visibility: hidden;
+  overflow: hidden;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.section__content .info__row .image-container .image {
+  width: 100%;
+  display: block;
+}
+.section__content .editing:after {
+  content: "_";
+}
+.section__content .blink:after {
+  animation: blink 1s steps(5, start) infinite;
+}
+.section.olympus .info,
+.section.medusae .info {
+  flex-direction: row;
+}
+.section.olympus .info__row,
+.section.medusae .info__row {
+  flex-direction: column;
+  width: 50%;
+  height: 100%;
+}
+.section.olympus .info__row .image-container,
+.section.medusae .info__row .image-container {
+  width: 25vw;
+}
+.section.olympus .info__row .image-container .image,
+.section.medusae .info__row .image-container .image {
+  width: 25vw;
+}
+.section.olympus .info__row:first-child > div,
+.section.medusae .info__row:first-child > div {
+  height: 50%;
+}
+@keyframes blink {
+  to {
+    visibility: hidden;
+  }
+}
+@keyframes scroll {
+  0% {
+    fill-opacity: 0;
+  }
+  100% {
+    fill-opacity: 1;
+  }
+}
+@keyframes load {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/mars-explorer-scrolltrigger-demo/license.txt b/mars-explorer-scrolltrigger-demo/license.txt
new file mode 100644
index 0000000..52b7ca3
--- /dev/null
+++ b/mars-explorer-scrolltrigger-demo/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Hai Le (https://codepen.io/hailedev/pen/zYrJrbj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/mars-explorer-scrolltrigger-demo/src/index.html b/mars-explorer-scrolltrigger-demo/src/index.html
new file mode 100644
index 0000000..ea74402
--- /dev/null
+++ b/mars-explorer-scrolltrigger-demo/src/index.html
@@ -0,0 +1,257 @@
+<div class="circle">
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <circle id="circle" cx="50" cy="50" r="4" stroke="green" stroke-width="1px" fill-opacity="0"/>
+  </svg>
+</div>
+
+<div class="scroller">
+  <svg viewBox="0 0 100 65" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="0,0 20,0 50,40 80,0 100,0 50,65" stroke="green" stroke-width="1px" fill="green"/>
+  </svg>
+  <svg viewBox="0 0 100 65" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="0,0 20,0 50,40 80,0 100,0 50,65" stroke="green" stroke-width="1px" fill="green"/>
+  </svg>
+  <svg viewBox="0 0 100 65" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="0,0 20,0 50,40 80,0 100,0 50,65" stroke="green" stroke-width="1px" fill="green"/>
+  </svg>
+</div>
+
+<div class="loader">Loading<div></div><div></div><div></div></div>
+<div class="watermark">Models and resources from <a href="https://trek.nasa.gov/">NASA</a></div>
+
+<div class="section welcome"></div>
+<div class="content">
+  <div class="section olympus">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1px"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA00300_hires.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/calderaOMons_marsexpress_lg.jpg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section curiosity">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/575963main_PIA14297_full.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/673885main_PIA15986-full_full.jpg" />
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/713264main_pia16457-full_full.jpg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section valles">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/581433main_PIA00425_full.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/pia21274.jpg" />
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/pia21651.jpg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section medusae">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA00809_hires.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA23522_hires.jpg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section cydonia">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA02381_hires.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/face2001_mgs.jpg" />
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA04745_hires.jpg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section tharsis">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA00408_hires.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/PIA02049_hires.jpg" />
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/pia11176.jpg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section deimos">
+    <div class="section__content">
+      <div class="title"></div>
+      <div class="info">
+        <div class="info__row">
+          <div class="coords">
+            <div class="lat"></div>
+            <div class="lon"></div>
+            <div class="nav">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                <polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/318064main_pia11826-full_full.jpg" />
+            </div>
+          </div>
+        </div>
+        <div class="info__row">
+          <div>
+            <div class="image-container">
+              <img class="image" src="https://assets.codepen.io/1443237/283561main_phobos2_hirise_big_full.jpg" />
+            </div>
+          </div>
+          <div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/mars-explorer-scrolltrigger-demo/src/script.babel b/mars-explorer-scrolltrigger-demo/src/script.babel
new file mode 100644
index 0000000..491cdad
--- /dev/null
+++ b/mars-explorer-scrolltrigger-demo/src/script.babel
@@ -0,0 +1,280 @@
+Math.degToRad = degrees => degrees * (Math.PI / 180);
+
+class Scene {
+  constructor(urls) {
+    this._urls = urls;
+  }
+
+  init() {
+    return new Promise((resolve) => {
+      let models = [];
+      const manager = new THREE.LoadingManager(() => {
+        this.setupCanvas(models);
+        resolve();
+      });
+      const loader = new THREE.GLTFLoader(manager);
+      this._urls.forEach(x => loader.load(x.url, gltf => {
+        gltf.scene.visible = x.visible;
+        models.push({ id: x.id, scene: gltf.scene });
+      }))
+    });
+  }
+  setupCanvas(models) {
+    // Camera
+    this.camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 30000 );
+    this.camera.position.set(0, 0, 4000);
+
+    // Scene
+    this.scene = new THREE.Scene();
+
+    // Renderer
+    this.renderer = new THREE.WebGLRenderer();
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.renderer.outputEncoding = THREE.sRGBEncoding;
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+
+    // Light
+    const ambientLight = new THREE.AmbientLight(0x111111);
+    this.scene.add(ambientLight);
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff);
+    directionalLight.position.set(2, 0, 1).normalize();
+    this.scene.add(directionalLight);
+
+    models.forEach(x => {
+      this[x.id] = x.scene;
+      this.scene.add(this[x.id]);
+    })
+
+    document.body.appendChild(this.renderer.domElement);
+
+    this.render();
+    this.animate();
+
+    window.addEventListener('resize', () => {
+      this.camera.aspect = window.innerWidth / window.innerHeight;
+      this.camera.updateProjectionMatrix();
+      this.renderer.setSize(window.innerWidth, window.innerHeight);
+      this.render();
+    }, false);
+  }
+  animate() {
+    this.render();
+    requestAnimationFrame(() => this.animate());
+  }
+  render() {
+    this.renderer.render(this.scene, this.camera);
+  }
+}
+
+class Page {
+  constructor(scene) {
+    this._scene = scene;
+  }
+
+  get mars() {
+    return this._scene.mars;
+  }
+
+  get deimos() {
+    return this._scene.deimos;
+  }
+
+  get camera() {
+    return this._scene.camera;
+  }
+
+  get content() {
+    return     [
+      {
+        title: 'Olympus Mons',
+        coords: {
+          Latitude: '18.65275889',
+          Longitude: '-133.8025067'
+        },
+        selector: '.olympus'
+      },
+      {
+        title: 'Gale Crater',
+        coords: {
+          Latitude: '136.783441',
+          Longitude: '-5.10837943'
+        },
+        selector: '.curiosity'
+      },
+      {
+        title: 'Valles Marineris',
+        coords: {
+          Latitude: '-14.00586857',
+          Longitude: '-58.5876741'
+        },
+        selector: '.valles'
+      },
+      {
+        title: 'Medusae Fossae',
+        coords: {
+          Latitude: '-2.166284249',
+          Longitude: '-164.1956286'
+        },
+        selector: '.medusae'
+      },
+      {
+        title: 'Cydonia',
+        coords: {
+          Latitude: '39.66724753',
+          Longitude: '0'
+        },
+        selector: '.cydonia'
+      },
+      {
+        title: 'Tharsis Volcanic Region',
+        coords: {
+          Latitude: '-2.623623306',
+          Longitude: '-116.7076259'
+        },
+        selector: '.tharsis'
+      },
+      {
+        title: 'Deimos',
+        coords: {
+          Distance: '23,460 km',
+          Radius: '6.2 km'
+        },
+        selector: '.deimos'
+      },
+    ];
+  }
+  async init() {
+    window.onbeforeunload = function () {
+      window.scrollTo(0,0);
+    };
+    await this._scene.init();
+    document.querySelector('.loader').style.display = 'none';
+    this.setupPlugins();
+    this.setupAnimScrollTrigger();
+    this.setupContentScrollTrigger();
+  }
+  setupPlugins() {
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.registerPlugin(TextPlugin);
+    gsap.registerPlugin(DrawSVGPlugin);
+  }
+  setupAnimScrollTrigger() {
+    const opening = new gsap.timeline()
+      .fromTo(this.camera.position, {z: 2000}, {z: 4000, ease: 'Circ.easeOut', duration: 1.5}, 'opening')
+      .fromTo(this.camera.rotation, {y: -Math.degToRad(30), x: -Math.degToRad(-5)}, {y: 0, x: 0, ease: 'Circ.easeOut', duration: 1.5}, 'opening')
+      .set(".scroller, .watermark",{visibility: "visible"});
+
+    const rotation = new gsap.timeline({
+        scrollTrigger: {
+          toggleActions: "play pause play pause",
+          trigger: ".welcome",
+          start: "top bottom",
+          end: "top -1",
+        }
+      })
+      .to(this.mars.rotation, {y:Math.degToRad(360), ease:'none', repeat:-1, duration: 30});
+
+    const animation = new gsap.timeline({
+        scrollTrigger: {
+          trigger: ".content",
+          scrub: true,
+          start: "top bottom",
+          end: "bottom bottom",
+          //markers: {startColor: "green", endColor: "red", fontSize: "12px"}
+        }
+      })
+      .set(".nav svg, .circle svg",{visibility: "visible"})
+      .to(this.mars.rotation, {y: Math.degToRad(133.8025067+90), x: Math.degToRad(18.65275889), ease: 'power2.inOut', duration: 0.75}, 0)
+      .to(this.camera.position, {z:3000, ease: 'linear', duration: 0.75}, 0)
+      .set(".scroller",{visibility: "hidden"}, 0.2)
+      .to(this.mars.rotation, {y: -Math.degToRad(136.78344100200877-90), x: Math.degToRad(5.1083794384352), ease: 'power2.inOut', duration: 0.75}, 1)
+      .to(this.mars.rotation, {y: Math.degToRad(58.5876741+90), x: Math.degToRad(-14.00586857), ease: 'power2.inOut', duration: 0.75}, 2)
+      .to(this.mars.rotation, {y: Math.degToRad(164.1956286+90), x: Math.degToRad(-2.166284249), ease: 'power2.inOut', duration: 0.75}, 3)
+      .to(this.mars.rotation, {y: Math.degToRad(90), x: Math.degToRad(39.66724753), ease: 'power2.inOut', duration: 0.75}, 4)
+      .to(this.mars.rotation, {y: Math.degToRad(116.7076259+90), x: Math.degToRad(-2.623623306), ease: 'power2.inOut', duration: 0.75}, 5)
+      .to(this.camera.position, {z: 22000, ease: 'linear'}, 6)
+      .to(this.camera.rotation, {z: Math.degToRad(10), y: Math.degToRad(10), ease: 'power2.inOut', duration: 0.75}, 6)
+      .set(this.deimos, {visible: true}, 6)
+      .to(this.deimos.scale, {x:7, y:7, z:7, ease: 'linear', duration: 0}, 6)
+      .fromTo(this.deimos.position, {x: -500, y:0, z: 22000}, {x: -170, y: 0, z: 21000, ease: 'power2.inOut', duration: 0.75}, 6)
+  }
+  setupContentScrollTrigger(){
+    const onUpdate = function() {
+      const target = this.targets()[0];
+      const time = this.time();
+      const duration = this.duration();
+
+      if (time >= duration || time <= 0) {
+        target.classList.remove('editing');
+        return;
+      }
+      if (!target.classList.contains('editing')) {
+        target.classList.add('editing');
+      }
+    };
+
+    const getLines = obj => {
+      const lines = [];
+      Object.keys(obj).forEach(x => {
+        lines.push(`${x}: ${obj[x]}`);
+      });
+      return lines;
+    };
+
+    ScrollTrigger.addEventListener("scrollEnd", function(e){
+      const target = document.querySelectorAll('.editing')[0];
+      if (target) {
+        target.classList.add('blink');
+      }
+    });
+
+    ScrollTrigger.addEventListener("scrollStart", function(e){
+      const target = document.querySelectorAll('.editing')[0];
+      if (target) {
+        target.classList.remove('blink');
+      }
+    });
+
+    this.content.forEach((item, i, arr) => {
+      const timeline = new gsap.timeline({
+          scrollTrigger: {
+            trigger: item.selector,
+            scrub: true,
+            start: 'top 75%',
+            end: `bottom ${i < arr.length - 1 ? '75%' : 'bottom'}`,
+            //markers: {startColor: "green", endColor: "red", fontSize: "12px"}
+          }
+        })
+        .to(`${item.selector} .title`, {text:`${item.title}`, ease: 'linear', duration: 0.25, onUpdate}, 0)
+        .to(`${item.selector} .lat`, {text: `${getLines(item.coords)[0]}`, ease: 'linear', duration: 0.125, onUpdate}, 0.25)
+        .to(`${item.selector} .lon`, {text: `${getLines(item.coords)[1]}`, ease: 'linear', duration: 0.125, onUpdate}, 0.375)
+        .fromTo(`${item.selector} polyline`, {drawSVG: 0}, {drawSVG: '100%', duration: 0.125}, 0.5)
+        .fromTo('#circle', {drawSVG: 0}, {drawSVG: '100%', duration: 0.125}, 0.625)
+        .set(`${item.selector} .image-container`, {visibility: 'visible'})
+        .fromTo(`${item.selector} .image-container`, {width: '0%'}, {width: '25vw', duration: 0.125}, 0.75)
+        .fromTo(`${item.selector} .image-container`, {height: '0%'}, {height: 'auto', duration: 0.125}, 0.875);
+
+      if(i < arr.length - 1) {
+        timeline.yoyo(true)
+                .repeat(1)
+                .repeatDelay(0.5);
+      }
+    });
+  }
+}
+
+const urls =[
+  {
+    id: 'mars',
+    url: 'https://assets.codepen.io/1443237/Mars_1_6792.glb',
+    visible: true
+  },
+  {
+    id: 'deimos',
+    url: 'https://assets.codepen.io/1443237/Deimos_1_1000.glb',
+    visible: false
+  }
+];
+
+new Page(new Scene(urls)).init();
\ No newline at end of file
diff --git a/mars-explorer-scrolltrigger-demo/src/style.less b/mars-explorer-scrolltrigger-demo/src/style.less
new file mode 100644
index 0000000..46dfef4
--- /dev/null
+++ b/mars-explorer-scrolltrigger-demo/src/style.less
@@ -0,0 +1,235 @@
+@import (css) url(https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap);
+
+body {
+  margin: 0;
+  overflow-x: hidden;
+  background-color: black;
+}
+
+canvas {
+  position:fixed;
+  top: 0;
+}
+
+svg {
+  height:100%;
+  width:100%;
+  vector-effect: non-scaling-stroke;
+}
+
+.watermark {
+  position: fixed;
+  font: 18px Play;
+  color: white;
+  z-index: 3;
+  right: 0;
+  bottom: 0;
+  padding: 10px;
+  visibility: hidden;
+}
+.loader {
+  font: 68px Play;
+  font-weight: bold;
+  z-index: 3;
+  color: green;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  div {
+    + div {
+      margin-left: 4px;
+    }
+    height: 10px;
+    width: 10px;
+    background: green;
+    display: inline-block;
+
+    animation: load 1s ease-in alternate-reverse infinite;
+    &:nth-child(2) {
+      animation-delay: 0.33s;
+    }
+    &:nth-child(3) {
+      animation-delay: 0.66s;
+    }
+  }
+}
+
+.circle, .scroller {
+  z-index:3;
+  position: fixed;
+}
+.circle {
+  height:100%;
+  width:100%;
+
+  svg {
+    visibility: hidden;
+  }
+}
+.scroller {
+  display: flex;
+  flex-direction: column;
+  left: 50%;
+  bottom: 4%;
+  transform: translate(-50%, 0);
+  visibility: hidden;
+  svg {
+    width: 8vmin;
+    height: auto;
+
+    polygon {
+      animation: scroll 1s ease-in alternate-reverse infinite;
+    }
+    &:nth-child(2) {
+      transform: translate(0, -1vmin);
+      polygon {
+        animation-delay: 0.33s;
+      }
+    }
+    &:nth-child(3) {
+      transform: translate(0, -2vmin);
+      polygon {
+        animation-delay: 0.66s;
+      }
+    }
+  }
+}
+.section {
+  font-family: 'Play', sans-serif;
+  height: 100vh;
+  width: 100vw;
+  color: white;
+  z-index: 1;
+  position: relative;
+  display: inline-block;
+
+  &__content {
+    padding: 4vmin;
+    position:fixed;
+    color:green;
+    z-index: 2;
+    top:0;
+    height: calc(100vh - 8vmin);
+    width: calc(100vw - 8vmin);
+    display: flex;
+    flex-direction: column;
+
+    svg {
+      visibility: hidden;
+    }
+
+    .title {
+      font-size: 54px;
+      font-weight: bold;
+    }
+
+    .info {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+
+      &__row {
+        display: flex;
+        flex-grow: 1;
+        height: 50%;
+
+        > div {
+          flex-grow: 1;
+          width:100%;
+        }
+
+        .coords {
+          font-size: 24px;
+          > div {
+            &:last-child {
+              height: calc(100vh/2 - 4vmin - 114px);
+              width:100%;
+            }
+          }
+        }
+
+        .image-container {
+          border: 2px solid green;
+          visibility: hidden;
+          overflow: hidden;
+          position: relative;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          //max-height: 100%;
+
+          .image {
+            width: 100%;
+            display: block;
+          }
+        }
+      }
+    }
+
+    .editing {
+      &:after {
+        content: "_";
+      }
+    }
+
+    .blink {
+      &:after {
+        animation: blink 1s steps(5, start) infinite;
+      }
+    }
+  }
+
+  &.olympus, &.medusae {
+    .info {
+      flex-direction: row;
+
+      &__row {
+        flex-direction: column;
+        width: 50%;
+        height: 100%;
+        // display: inline-block;
+
+        .image-container {
+          width: 25vw;
+
+          .image {
+            width: 25vw;
+          }
+        }
+
+        &:first-child {
+          > div {
+            height: 50%;
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+@keyframes scroll {
+  0% {
+    fill-opacity: 0;
+  }
+
+  100% {
+    fill-opacity: 1;
+  }
+}
+
+@keyframes load {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/.gitignore b/material-dashboard-lite-master/.gitignore
new file mode 100644
index 0000000..49ed185
--- /dev/null
+++ b/material-dashboard-lite-master/.gitignore
@@ -0,0 +1,11 @@
+# node modules
+node_modules
+
+# bower components
+bower_components
+
+src/.sass-cache/
+
+.idea
+
+.temp
\ No newline at end of file
diff --git a/material-dashboard-lite-master/.jscsrc b/material-dashboard-lite-master/.jscsrc
new file mode 100644
index 0000000..cf2b791
--- /dev/null
+++ b/material-dashboard-lite-master/.jscsrc
@@ -0,0 +1,4 @@
+{
+  "preset": "google",
+  "requireCurlyBraces": true
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/LICENSE b/material-dashboard-lite-master/LICENSE
new file mode 100644
index 0000000..1b125e8
--- /dev/null
+++ b/material-dashboard-lite-master/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 CreativeIT
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/material-dashboard-lite-master/README.md b/material-dashboard-lite-master/README.md
new file mode 100644
index 0000000..9a15cd0
--- /dev/null
+++ b/material-dashboard-lite-master/README.md
@@ -0,0 +1,86 @@
+#Material Dashboard Lite
+
+Welcome to first dark dashboard on the Material Design Lite!
+
+![dashboard-avatar](https://trello-attachments.s3.amazonaws.com/56af74f7f1b5b81a201453c4/2000x1105/796e1dae05e88ba87162dd8bbf188e65/Darkboard_Showcase_1_3.png)
+
+Its much more fun with the [demo](http://creativeit.github.io/material-dashboard-lite/index.html).
+
+Material admin template is absolutely free for commercial usage theme, that uses google's implementation of material design -- [Material Design Lite](http://www.getmdl.io) library. It doesn’t rely on any JavaScript frameworks and aims to be responsive and optimized for cross-device usage. All components are created with CSS (scss), JavaScript (es6), and HTML5.
+
+>**Important**: We are still working on the project and there will be much more awesome, check out our [issues](https://github.com/CreativeIT/material-dashboard-lite/issues) to see what features are coming soon.
+
+#SETUP and USAGE
+The steps bellow will take you through cloning your own fork, installing dependencies and building:
+
+1. Fork and/or clone our repository. To use Git from command line, see the [Setting up Git](https://help.github.com/articles/set-up-git/) and [Fork a repo](https://help.github.com/articles/fork-a-repo/) articles. 
+  
+  ```
+    git clone https://github.com/CreativeIT/material-dashboard-lite.git
+  ```
+
+2. Open your copied repo folder in terminal and install [npm](https://www.npmjs.com/) components with command:
+  
+  ```
+    cd material-dashboard-lite
+    npm install
+  ```
+
+3. Install [bower](http://bower.io/) components with command:
+  
+  ```
+    bower install
+  ```
+
+4. Now you are able to build project with [gulp](http://gulpjs.com/):
+  
+  ```
+    gulp build
+  ```
+
+5. To see the result use command:
+  
+  ```
+    gulp serve
+  ```
+
+##Additional
+
+Since the project uses [BEM](http://getbem.com) structure with sass, it can be customized in easy way by editing `src/variables.scss` file. To take effect you must run `gulp build` in terminal again. Also you may want to use `gulp watch`, that will run default command every time you modify any file in source folder. You can use `gulp default`if you don't want to minify js-files.
+
+Google hasn't implemented select element yet ([see why here](http://37.media.tumblr.com/6a9fcffde2da977266b0ea99b15d5803/tumblr_n42cjjsriB1smcbm7o1_400.gif)), that is why the project depends on [getmdl-select plugin](https://github.com/CreativeIT/getmdl-select). Also project uses [d3](https://d3js.org/) and [nvd3](http://nvd3.org/) to build charts and chart components.
+
+
+#FEATURES
+
+*  [Material Design](http://www.google.com/design/spec/material-design/introduction.html) via [Material Design Lite](http://getmdl.io)
+
+*  Ecmascript 6 (with [babel](https://babeljs.io/))
+
+*  Responsive dark material design. DARK, Carl!
+
+*  User experience focused
+
+*  [Sass](http://sass-lang.com/)
+
+*  [Gulp](http://gulpjs.com/) build
+
+*  [D3](https://d3js.org/) and [NVD3](http://nvd3.org/)
+
+*  MIT License
+
+#Credits
+
+UI components built with [Material Design Lite](http://www.getmdl.io).
+
+Designed with passion and coffee by CreativeIT
+
+#Support the project
+
+* Star the repo
+
+* Create issue report or feature request
+
+* [Tweet about it](https://twitter.com/intent/tweet?text=Wow!%20New%20%23free%20dark%20%23dashboard%20on%20%23MaterialDesignLite!%0Ahttp://creativeit.github.io/material-dashboard-lite/index.html%0A&via=CreativeITeam&hashtags=materialDesign,responsive,UI,JS)
+
+* Follow [us on Twitter](https://twitter.com/intent/follow?screen_name=CreativeITeam)
\ No newline at end of file
diff --git a/material-dashboard-lite-master/bower.json b/material-dashboard-lite-master/bower.json
new file mode 100644
index 0000000..b8fca4e
--- /dev/null
+++ b/material-dashboard-lite-master/bower.json
@@ -0,0 +1,25 @@
+{
+  "name": "getmdl-dashboard",
+  "version": "1.0.0",
+  "homepage": "https://github.com/CreativeIT/getmdl-dashboard",
+  "authors": [
+    "CreativeIT"
+  ],
+  "description": "Free dashboard template with Material Design Lite",
+  "main": "dist/index.html",
+  "moduleType": [],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "material-design-lite": "1.1.1",
+    "d3": "3.5.14",
+    "nvd3": "1.8.2",
+    "getmdl-select": "*"
+  }
+}
diff --git a/material-dashboard-lite-master/dist/css/application.css b/material-dashboard-lite-master/dist/css/application.css
new file mode 100644
index 0000000..e8f9034
--- /dev/null
+++ b/material-dashboard-lite-master/dist/css/application.css
@@ -0,0 +1,11410 @@
+@charset "UTF-8";
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* TOOLTIP */
+/* WIDGETS & COMPONENTS */
+/* Trending */
+/* label */
+/* charts */
+/* employer form */
+/* row */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Material Design Lite */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+html {
+  color: rgba(0,0,0, 0.87);
+  font-size: 1em;
+  line-height: 1.4; }
+
+/*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * These selection rule sets have to be separate.
+ * Customize the background color to match your design.
+ */
+::selection {
+  background: #b3d4fc;
+  text-shadow: none; }
+
+/*
+ * A better looking default horizontal rule
+ */
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0; }
+
+/*
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle; }
+
+/*
+ * Remove default fieldset styles.
+ */
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0; }
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+textarea {
+  resize: vertical; }
+
+/* ==========================================================================
+   Browser Upgrade Prompt
+   ========================================================================== */
+.browserupgrade {
+  margin: 0.2em 0;
+  background: #ccc;
+  color: #000;
+  padding: 0.2em 0; }
+
+/* ==========================================================================
+   Author's custom styles
+   ========================================================================== */
+/* ==========================================================================
+   Helper classes
+   ========================================================================== */
+/*
+ * Hide visually and from screen readers:
+ */
+.hidden {
+  display: none !important; }
+
+/*
+ * Hide only visually, but have it available for screen readers:
+ * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ */
+.visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px; }
+
+/*
+ * Extends the .visuallyhidden class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ * https://www.drupal.org/node/897638
+ */
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  width: auto; }
+
+/*
+ * Hide visually and from screen readers, but maintain layout
+ */
+.invisible {
+  visibility: hidden; }
+
+/*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    `contenteditable` attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  /* 1 */
+  display: table;
+  /* 2 */ }
+
+.clearfix:after {
+  clear: both; }
+
+/* ==========================================================================
+   EXAMPLE Media Queries for Responsive Design.
+   These examples override the primary ('mobile first') styles.
+   Modify as content requires.
+   ========================================================================== */
+/* ==========================================================================
+   Print styles.
+   Inlined to avoid the additional HTTP request:
+   http://www.phpied.com/delay-loading-your-print-css/
+   ========================================================================== */
+@media print {
+  *,
+  *:before,
+  *:after,
+  *:first-letter,
+  *:first-line {
+    background: transparent !important;
+    color: #000 !important;
+    /* Black prints faster: http://www.sanbeiji.com/archives/953 */
+    box-shadow: none !important;
+    text-shadow: none !important; }
+  a,
+  a:visited {
+    text-decoration: underline; }
+  a[href]:after {
+    content: " (" attr(href) ")"; }
+  abbr[title]:after {
+    content: " (" attr(title) ")"; }
+  /*
+     * Don't show links that are fragment identifiers,
+     * or use the `javascript:` pseudo protocol
+     */
+  a[href^="#"]:after,
+  a[href^="javascript:"]:after {
+    content: ""; }
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid; }
+  /*
+     * Printing Tables:
+     * http://css-discuss.incutio.com/wiki/Printing_Tables
+     */
+  thead {
+    display: table-header-group; }
+  tr,
+  img {
+    page-break-inside: avoid; }
+  img {
+    max-width: 100% !important; }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3; }
+  h2,
+  h3 {
+    page-break-after: avoid; } }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Remove the unwanted box around FAB buttons */
+/* More info: http://goo.gl/IPwKi */
+a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
+.mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
+
+/*
+ * Make html take up the entire screen
+ * Then set touch-action to avoid touch delay on mobile IE
+ */
+html {
+  width: 100%;
+  height: 100%;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation; }
+
+/*
+* Make body take up the entire screen
+* Remove body margin so layout containers don't cause extra overflow.
+*/
+body {
+  width: 100%;
+  min-height: 100%;
+  margin: 0; }
+
+/*
+ * Main display reset for IE support.
+ * Source: http://weblog.west-wind.com/posts/2015/Jan/12/main-HTML5-Tag-not-working-in-Internet-Explorer-91011
+ */
+main {
+  display: block; }
+
+/*
+* Apply no display to elements with the hidden attribute.
+* IE 9 and 10 support.
+*/
+*[hidden] {
+  display: none !important; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+html, body {
+  font-family: "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px; }
+
+h1, h2, h3, h4, h5, h6, p {
+  margin: 0;
+  padding: 0; }
+
+/**
+  * Styles for HTML elements
+  */
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 56px;
+  font-weight: 400;
+  line-height: 1.35;
+  letter-spacing: -0.02em;
+  opacity: 0.54;
+  font-size: 0.6em; }
+
+h1 {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 56px;
+  font-weight: 400;
+  line-height: 1.35;
+  letter-spacing: -0.02em;
+  margin-top: 24px;
+  margin-bottom: 24px; }
+
+h2 {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 45px;
+  font-weight: 400;
+  line-height: 48px;
+  margin-top: 24px;
+  margin-bottom: 24px; }
+
+h3 {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 34px;
+  font-weight: 400;
+  line-height: 40px;
+  margin-top: 24px;
+  margin-bottom: 24px; }
+
+h4 {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  -moz-osx-font-smoothing: grayscale;
+  margin-top: 24px;
+  margin-bottom: 16px; }
+
+h5 {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  margin-top: 24px;
+  margin-bottom: 16px; }
+
+h6 {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.04em;
+  margin-top: 24px;
+  margin-bottom: 16px; }
+
+p {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0;
+  margin-bottom: 16px; }
+
+a {
+  color: rgb(255,64,129);
+  font-weight: 500; }
+
+blockquote {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  position: relative;
+  font-size: 24px;
+  font-weight: 300;
+  font-style: italic;
+  line-height: 1.35;
+  letter-spacing: 0.08em; }
+  blockquote:before {
+    position: absolute;
+    left: -0.5em;
+    content: '“'; }
+  blockquote:after {
+    content: '”';
+    margin-left: -0.05em; }
+
+mark {
+  background-color: #f4ff81; }
+
+dt {
+  font-weight: 700; }
+
+address {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0;
+  font-style: normal; }
+
+ul, ol {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0; }
+
+/**
+ * Class Name Styles
+ */
+.mdl-typography--display-4 {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 112px;
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: -0.04em; }
+
+.mdl-typography--display-4-color-contrast {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 112px;
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: -0.04em;
+  opacity: 0.54; }
+
+.mdl-typography--display-3 {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 56px;
+  font-weight: 400;
+  line-height: 1.35;
+  letter-spacing: -0.02em; }
+
+.mdl-typography--display-3-color-contrast {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 56px;
+  font-weight: 400;
+  line-height: 1.35;
+  letter-spacing: -0.02em;
+  opacity: 0.54; }
+
+.mdl-typography--display-2 {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 45px;
+  font-weight: 400;
+  line-height: 48px; }
+
+.mdl-typography--display-2-color-contrast {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 45px;
+  font-weight: 400;
+  line-height: 48px;
+  opacity: 0.54; }
+
+.mdl-typography--display-1 {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 34px;
+  font-weight: 400;
+  line-height: 40px; }
+
+.mdl-typography--display-1-color-contrast {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 34px;
+  font-weight: 400;
+  line-height: 40px;
+  opacity: 0.54; }
+
+.mdl-typography--headline {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  -moz-osx-font-smoothing: grayscale; }
+
+.mdl-typography--headline-color-contrast {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  -moz-osx-font-smoothing: grayscale;
+  opacity: 0.87; }
+
+.mdl-typography--title {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.02em; }
+
+.mdl-typography--title-color-contrast {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  opacity: 0.87; }
+
+.mdl-typography--subhead {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.04em; }
+
+.mdl-typography--subhead-color-contrast {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.04em;
+  opacity: 0.87; }
+
+.mdl-typography--body-2 {
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 24px;
+  letter-spacing: 0; }
+
+.mdl-typography--body-2-color-contrast {
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 24px;
+  letter-spacing: 0;
+  opacity: 0.87; }
+
+.mdl-typography--body-1 {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0; }
+
+.mdl-typography--body-1-color-contrast {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0;
+  opacity: 0.87; }
+
+.mdl-typography--body-2-force-preferred-font {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0; }
+
+.mdl-typography--body-2-force-preferred-font-color-contrast {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0;
+  opacity: 0.87; }
+
+.mdl-typography--body-1-force-preferred-font {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0; }
+
+.mdl-typography--body-1-force-preferred-font-color-contrast {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0;
+  opacity: 0.87; }
+
+.mdl-typography--caption {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0; }
+
+.mdl-typography--caption-force-preferred-font {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0; }
+
+.mdl-typography--caption-color-contrast {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0;
+  opacity: 0.54; }
+
+.mdl-typography--caption-force-preferred-font-color-contrast {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0;
+  opacity: 0.54; }
+
+.mdl-typography--menu {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0; }
+
+.mdl-typography--menu-color-contrast {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+  opacity: 0.87; }
+
+.mdl-typography--button {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 1;
+  letter-spacing: 0; }
+
+.mdl-typography--button-color-contrast {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 1;
+  letter-spacing: 0;
+  opacity: 0.87; }
+
+.mdl-typography--text-left {
+  text-align: left; }
+
+.mdl-typography--text-right {
+  text-align: right; }
+
+.mdl-typography--text-center {
+  text-align: center; }
+
+.mdl-typography--text-justify {
+  text-align: justify; }
+
+.mdl-typography--text-nowrap {
+  white-space: nowrap; }
+
+.mdl-typography--text-lowercase {
+  text-transform: lowercase; }
+
+.mdl-typography--text-uppercase {
+  text-transform: uppercase; }
+
+.mdl-typography--text-capitalize {
+  text-transform: capitalize; }
+
+.mdl-typography--font-thin {
+  font-weight: 200 !important; }
+
+.mdl-typography--font-light {
+  font-weight: 300 !important; }
+
+.mdl-typography--font-regular {
+  font-weight: 400 !important; }
+
+.mdl-typography--font-medium {
+  font-weight: 500 !important; }
+
+.mdl-typography--font-bold {
+  font-weight: 700 !important; }
+
+.mdl-typography--font-black {
+  font-weight: 900 !important; }
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  word-wrap: normal;
+  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+.mdl-color-text--red {
+  color: rgb(244,67,54) !important; }
+
+.mdl-color--red {
+  background-color: rgb(244,67,54) !important; }
+
+.mdl-color-text--red-50 {
+  color: rgb(255,235,238) !important; }
+
+.mdl-color--red-50 {
+  background-color: rgb(255,235,238) !important; }
+
+.mdl-color-text--red-100 {
+  color: rgb(255,205,210) !important; }
+
+.mdl-color--red-100 {
+  background-color: rgb(255,205,210) !important; }
+
+.mdl-color-text--red-200 {
+  color: rgb(239,154,154) !important; }
+
+.mdl-color--red-200 {
+  background-color: rgb(239,154,154) !important; }
+
+.mdl-color-text--red-300 {
+  color: rgb(229,115,115) !important; }
+
+.mdl-color--red-300 {
+  background-color: rgb(229,115,115) !important; }
+
+.mdl-color-text--red-400 {
+  color: rgb(239,83,80) !important; }
+
+.mdl-color--red-400 {
+  background-color: rgb(239,83,80) !important; }
+
+.mdl-color-text--red-500 {
+  color: rgb(244,67,54) !important; }
+
+.mdl-color--red-500 {
+  background-color: rgb(244,67,54) !important; }
+
+.mdl-color-text--red-600 {
+  color: rgb(229,57,53) !important; }
+
+.mdl-color--red-600 {
+  background-color: rgb(229,57,53) !important; }
+
+.mdl-color-text--red-700 {
+  color: rgb(211,47,47) !important; }
+
+.mdl-color--red-700 {
+  background-color: rgb(211,47,47) !important; }
+
+.mdl-color-text--red-800 {
+  color: rgb(198,40,40) !important; }
+
+.mdl-color--red-800 {
+  background-color: rgb(198,40,40) !important; }
+
+.mdl-color-text--red-900 {
+  color: rgb(183,28,28) !important; }
+
+.mdl-color--red-900 {
+  background-color: rgb(183,28,28) !important; }
+
+.mdl-color-text--red-A100 {
+  color: rgb(255,138,128) !important; }
+
+.mdl-color--red-A100 {
+  background-color: rgb(255,138,128) !important; }
+
+.mdl-color-text--red-A200 {
+  color: rgb(255,82,82) !important; }
+
+.mdl-color--red-A200 {
+  background-color: rgb(255,82,82) !important; }
+
+.mdl-color-text--red-A400 {
+  color: rgb(255,23,68) !important; }
+
+.mdl-color--red-A400 {
+  background-color: rgb(255,23,68) !important; }
+
+.mdl-color-text--red-A700 {
+  color: rgb(213,0,0) !important; }
+
+.mdl-color--red-A700 {
+  background-color: rgb(213,0,0) !important; }
+
+.mdl-color-text--pink {
+  color: rgb(233,30,99) !important; }
+
+.mdl-color--pink {
+  background-color: rgb(233,30,99) !important; }
+
+.mdl-color-text--pink-50 {
+  color: rgb(252,228,236) !important; }
+
+.mdl-color--pink-50 {
+  background-color: rgb(252,228,236) !important; }
+
+.mdl-color-text--pink-100 {
+  color: rgb(248,187,208) !important; }
+
+.mdl-color--pink-100 {
+  background-color: rgb(248,187,208) !important; }
+
+.mdl-color-text--pink-200 {
+  color: rgb(244,143,177) !important; }
+
+.mdl-color--pink-200 {
+  background-color: rgb(244,143,177) !important; }
+
+.mdl-color-text--pink-300 {
+  color: rgb(240,98,146) !important; }
+
+.mdl-color--pink-300 {
+  background-color: rgb(240,98,146) !important; }
+
+.mdl-color-text--pink-400 {
+  color: rgb(236,64,122) !important; }
+
+.mdl-color--pink-400 {
+  background-color: rgb(236,64,122) !important; }
+
+.mdl-color-text--pink-500 {
+  color: rgb(233,30,99) !important; }
+
+.mdl-color--pink-500 {
+  background-color: rgb(233,30,99) !important; }
+
+.mdl-color-text--pink-600 {
+  color: rgb(216,27,96) !important; }
+
+.mdl-color--pink-600 {
+  background-color: rgb(216,27,96) !important; }
+
+.mdl-color-text--pink-700 {
+  color: rgb(194,24,91) !important; }
+
+.mdl-color--pink-700 {
+  background-color: rgb(194,24,91) !important; }
+
+.mdl-color-text--pink-800 {
+  color: rgb(173,20,87) !important; }
+
+.mdl-color--pink-800 {
+  background-color: rgb(173,20,87) !important; }
+
+.mdl-color-text--pink-900 {
+  color: rgb(136,14,79) !important; }
+
+.mdl-color--pink-900 {
+  background-color: rgb(136,14,79) !important; }
+
+.mdl-color-text--pink-A100 {
+  color: rgb(255,128,171) !important; }
+
+.mdl-color--pink-A100 {
+  background-color: rgb(255,128,171) !important; }
+
+.mdl-color-text--pink-A200 {
+  color: rgb(255,64,129) !important; }
+
+.mdl-color--pink-A200 {
+  background-color: rgb(255,64,129) !important; }
+
+.mdl-color-text--pink-A400 {
+  color: rgb(245,0,87) !important; }
+
+.mdl-color--pink-A400 {
+  background-color: rgb(245,0,87) !important; }
+
+.mdl-color-text--pink-A700 {
+  color: rgb(197,17,98) !important; }
+
+.mdl-color--pink-A700 {
+  background-color: rgb(197,17,98) !important; }
+
+.mdl-color-text--purple {
+  color: rgb(156,39,176) !important; }
+
+.mdl-color--purple {
+  background-color: rgb(156,39,176) !important; }
+
+.mdl-color-text--purple-50 {
+  color: rgb(243,229,245) !important; }
+
+.mdl-color--purple-50 {
+  background-color: rgb(243,229,245) !important; }
+
+.mdl-color-text--purple-100 {
+  color: rgb(225,190,231) !important; }
+
+.mdl-color--purple-100 {
+  background-color: rgb(225,190,231) !important; }
+
+.mdl-color-text--purple-200 {
+  color: rgb(206,147,216) !important; }
+
+.mdl-color--purple-200 {
+  background-color: rgb(206,147,216) !important; }
+
+.mdl-color-text--purple-300 {
+  color: rgb(186,104,200) !important; }
+
+.mdl-color--purple-300 {
+  background-color: rgb(186,104,200) !important; }
+
+.mdl-color-text--purple-400 {
+  color: rgb(171,71,188) !important; }
+
+.mdl-color--purple-400 {
+  background-color: rgb(171,71,188) !important; }
+
+.mdl-color-text--purple-500 {
+  color: rgb(156,39,176) !important; }
+
+.mdl-color--purple-500 {
+  background-color: rgb(156,39,176) !important; }
+
+.mdl-color-text--purple-600 {
+  color: rgb(142,36,170) !important; }
+
+.mdl-color--purple-600 {
+  background-color: rgb(142,36,170) !important; }
+
+.mdl-color-text--purple-700 {
+  color: rgb(123,31,162) !important; }
+
+.mdl-color--purple-700 {
+  background-color: rgb(123,31,162) !important; }
+
+.mdl-color-text--purple-800 {
+  color: rgb(106,27,154) !important; }
+
+.mdl-color--purple-800 {
+  background-color: rgb(106,27,154) !important; }
+
+.mdl-color-text--purple-900 {
+  color: rgb(74,20,140) !important; }
+
+.mdl-color--purple-900 {
+  background-color: rgb(74,20,140) !important; }
+
+.mdl-color-text--purple-A100 {
+  color: rgb(234,128,252) !important; }
+
+.mdl-color--purple-A100 {
+  background-color: rgb(234,128,252) !important; }
+
+.mdl-color-text--purple-A200 {
+  color: rgb(224,64,251) !important; }
+
+.mdl-color--purple-A200 {
+  background-color: rgb(224,64,251) !important; }
+
+.mdl-color-text--purple-A400 {
+  color: rgb(213,0,249) !important; }
+
+.mdl-color--purple-A400 {
+  background-color: rgb(213,0,249) !important; }
+
+.mdl-color-text--purple-A700 {
+  color: rgb(170,0,255) !important; }
+
+.mdl-color--purple-A700 {
+  background-color: rgb(170,0,255) !important; }
+
+.mdl-color-text--deep-purple {
+  color: rgb(103,58,183) !important; }
+
+.mdl-color--deep-purple {
+  background-color: rgb(103,58,183) !important; }
+
+.mdl-color-text--deep-purple-50 {
+  color: rgb(237,231,246) !important; }
+
+.mdl-color--deep-purple-50 {
+  background-color: rgb(237,231,246) !important; }
+
+.mdl-color-text--deep-purple-100 {
+  color: rgb(209,196,233) !important; }
+
+.mdl-color--deep-purple-100 {
+  background-color: rgb(209,196,233) !important; }
+
+.mdl-color-text--deep-purple-200 {
+  color: rgb(179,157,219) !important; }
+
+.mdl-color--deep-purple-200 {
+  background-color: rgb(179,157,219) !important; }
+
+.mdl-color-text--deep-purple-300 {
+  color: rgb(149,117,205) !important; }
+
+.mdl-color--deep-purple-300 {
+  background-color: rgb(149,117,205) !important; }
+
+.mdl-color-text--deep-purple-400 {
+  color: rgb(126,87,194) !important; }
+
+.mdl-color--deep-purple-400 {
+  background-color: rgb(126,87,194) !important; }
+
+.mdl-color-text--deep-purple-500 {
+  color: rgb(103,58,183) !important; }
+
+.mdl-color--deep-purple-500 {
+  background-color: rgb(103,58,183) !important; }
+
+.mdl-color-text--deep-purple-600 {
+  color: rgb(94,53,177) !important; }
+
+.mdl-color--deep-purple-600 {
+  background-color: rgb(94,53,177) !important; }
+
+.mdl-color-text--deep-purple-700 {
+  color: rgb(81,45,168) !important; }
+
+.mdl-color--deep-purple-700 {
+  background-color: rgb(81,45,168) !important; }
+
+.mdl-color-text--deep-purple-800 {
+  color: rgb(69,39,160) !important; }
+
+.mdl-color--deep-purple-800 {
+  background-color: rgb(69,39,160) !important; }
+
+.mdl-color-text--deep-purple-900 {
+  color: rgb(49,27,146) !important; }
+
+.mdl-color--deep-purple-900 {
+  background-color: rgb(49,27,146) !important; }
+
+.mdl-color-text--deep-purple-A100 {
+  color: rgb(179,136,255) !important; }
+
+.mdl-color--deep-purple-A100 {
+  background-color: rgb(179,136,255) !important; }
+
+.mdl-color-text--deep-purple-A200 {
+  color: rgb(124,77,255) !important; }
+
+.mdl-color--deep-purple-A200 {
+  background-color: rgb(124,77,255) !important; }
+
+.mdl-color-text--deep-purple-A400 {
+  color: rgb(101,31,255) !important; }
+
+.mdl-color--deep-purple-A400 {
+  background-color: rgb(101,31,255) !important; }
+
+.mdl-color-text--deep-purple-A700 {
+  color: rgb(98,0,234) !important; }
+
+.mdl-color--deep-purple-A700 {
+  background-color: rgb(98,0,234) !important; }
+
+.mdl-color-text--indigo {
+  color: rgb(63,81,181) !important; }
+
+.mdl-color--indigo {
+  background-color: rgb(63,81,181) !important; }
+
+.mdl-color-text--indigo-50 {
+  color: rgb(232,234,246) !important; }
+
+.mdl-color--indigo-50 {
+  background-color: rgb(232,234,246) !important; }
+
+.mdl-color-text--indigo-100 {
+  color: rgb(197,202,233) !important; }
+
+.mdl-color--indigo-100 {
+  background-color: rgb(197,202,233) !important; }
+
+.mdl-color-text--indigo-200 {
+  color: rgb(159,168,218) !important; }
+
+.mdl-color--indigo-200 {
+  background-color: rgb(159,168,218) !important; }
+
+.mdl-color-text--indigo-300 {
+  color: rgb(121,134,203) !important; }
+
+.mdl-color--indigo-300 {
+  background-color: rgb(121,134,203) !important; }
+
+.mdl-color-text--indigo-400 {
+  color: rgb(92,107,192) !important; }
+
+.mdl-color--indigo-400 {
+  background-color: rgb(92,107,192) !important; }
+
+.mdl-color-text--indigo-500 {
+  color: rgb(63,81,181) !important; }
+
+.mdl-color--indigo-500 {
+  background-color: rgb(63,81,181) !important; }
+
+.mdl-color-text--indigo-600 {
+  color: rgb(57,73,171) !important; }
+
+.mdl-color--indigo-600 {
+  background-color: rgb(57,73,171) !important; }
+
+.mdl-color-text--indigo-700 {
+  color: rgb(48,63,159) !important; }
+
+.mdl-color--indigo-700 {
+  background-color: rgb(48,63,159) !important; }
+
+.mdl-color-text--indigo-800 {
+  color: rgb(40,53,147) !important; }
+
+.mdl-color--indigo-800 {
+  background-color: rgb(40,53,147) !important; }
+
+.mdl-color-text--indigo-900 {
+  color: rgb(26,35,126) !important; }
+
+.mdl-color--indigo-900 {
+  background-color: rgb(26,35,126) !important; }
+
+.mdl-color-text--indigo-A100 {
+  color: rgb(140,158,255) !important; }
+
+.mdl-color--indigo-A100 {
+  background-color: rgb(140,158,255) !important; }
+
+.mdl-color-text--indigo-A200 {
+  color: rgb(83,109,254) !important; }
+
+.mdl-color--indigo-A200 {
+  background-color: rgb(83,109,254) !important; }
+
+.mdl-color-text--indigo-A400 {
+  color: rgb(61,90,254) !important; }
+
+.mdl-color--indigo-A400 {
+  background-color: rgb(61,90,254) !important; }
+
+.mdl-color-text--indigo-A700 {
+  color: rgb(48,79,254) !important; }
+
+.mdl-color--indigo-A700 {
+  background-color: rgb(48,79,254) !important; }
+
+.mdl-color-text--blue {
+  color: rgb(33,150,243) !important; }
+
+.mdl-color--blue {
+  background-color: rgb(33,150,243) !important; }
+
+.mdl-color-text--blue-50 {
+  color: rgb(227,242,253) !important; }
+
+.mdl-color--blue-50 {
+  background-color: rgb(227,242,253) !important; }
+
+.mdl-color-text--blue-100 {
+  color: rgb(187,222,251) !important; }
+
+.mdl-color--blue-100 {
+  background-color: rgb(187,222,251) !important; }
+
+.mdl-color-text--blue-200 {
+  color: rgb(144,202,249) !important; }
+
+.mdl-color--blue-200 {
+  background-color: rgb(144,202,249) !important; }
+
+.mdl-color-text--blue-300 {
+  color: rgb(100,181,246) !important; }
+
+.mdl-color--blue-300 {
+  background-color: rgb(100,181,246) !important; }
+
+.mdl-color-text--blue-400 {
+  color: rgb(66,165,245) !important; }
+
+.mdl-color--blue-400 {
+  background-color: rgb(66,165,245) !important; }
+
+.mdl-color-text--blue-500 {
+  color: rgb(33,150,243) !important; }
+
+.mdl-color--blue-500 {
+  background-color: rgb(33,150,243) !important; }
+
+.mdl-color-text--blue-600 {
+  color: rgb(30,136,229) !important; }
+
+.mdl-color--blue-600 {
+  background-color: rgb(30,136,229) !important; }
+
+.mdl-color-text--blue-700 {
+  color: rgb(25,118,210) !important; }
+
+.mdl-color--blue-700 {
+  background-color: rgb(25,118,210) !important; }
+
+.mdl-color-text--blue-800 {
+  color: rgb(21,101,192) !important; }
+
+.mdl-color--blue-800 {
+  background-color: rgb(21,101,192) !important; }
+
+.mdl-color-text--blue-900 {
+  color: rgb(13,71,161) !important; }
+
+.mdl-color--blue-900 {
+  background-color: rgb(13,71,161) !important; }
+
+.mdl-color-text--blue-A100 {
+  color: rgb(130,177,255) !important; }
+
+.mdl-color--blue-A100 {
+  background-color: rgb(130,177,255) !important; }
+
+.mdl-color-text--blue-A200 {
+  color: rgb(68,138,255) !important; }
+
+.mdl-color--blue-A200 {
+  background-color: rgb(68,138,255) !important; }
+
+.mdl-color-text--blue-A400 {
+  color: rgb(41,121,255) !important; }
+
+.mdl-color--blue-A400 {
+  background-color: rgb(41,121,255) !important; }
+
+.mdl-color-text--blue-A700 {
+  color: rgb(41,98,255) !important; }
+
+.mdl-color--blue-A700 {
+  background-color: rgb(41,98,255) !important; }
+
+.mdl-color-text--light-blue {
+  color: rgb(3,169,244) !important; }
+
+.mdl-color--light-blue {
+  background-color: rgb(3,169,244) !important; }
+
+.mdl-color-text--light-blue-50 {
+  color: rgb(225,245,254) !important; }
+
+.mdl-color--light-blue-50 {
+  background-color: rgb(225,245,254) !important; }
+
+.mdl-color-text--light-blue-100 {
+  color: rgb(179,229,252) !important; }
+
+.mdl-color--light-blue-100 {
+  background-color: rgb(179,229,252) !important; }
+
+.mdl-color-text--light-blue-200 {
+  color: rgb(129,212,250) !important; }
+
+.mdl-color--light-blue-200 {
+  background-color: rgb(129,212,250) !important; }
+
+.mdl-color-text--light-blue-300 {
+  color: rgb(79,195,247) !important; }
+
+.mdl-color--light-blue-300 {
+  background-color: rgb(79,195,247) !important; }
+
+.mdl-color-text--light-blue-400 {
+  color: rgb(41,182,246) !important; }
+
+.mdl-color--light-blue-400 {
+  background-color: rgb(41,182,246) !important; }
+
+.mdl-color-text--light-blue-500 {
+  color: rgb(3,169,244) !important; }
+
+.mdl-color--light-blue-500 {
+  background-color: rgb(3,169,244) !important; }
+
+.mdl-color-text--light-blue-600 {
+  color: rgb(3,155,229) !important; }
+
+.mdl-color--light-blue-600 {
+  background-color: rgb(3,155,229) !important; }
+
+.mdl-color-text--light-blue-700 {
+  color: rgb(2,136,209) !important; }
+
+.mdl-color--light-blue-700 {
+  background-color: rgb(2,136,209) !important; }
+
+.mdl-color-text--light-blue-800 {
+  color: rgb(2,119,189) !important; }
+
+.mdl-color--light-blue-800 {
+  background-color: rgb(2,119,189) !important; }
+
+.mdl-color-text--light-blue-900 {
+  color: rgb(1,87,155) !important; }
+
+.mdl-color--light-blue-900 {
+  background-color: rgb(1,87,155) !important; }
+
+.mdl-color-text--light-blue-A100 {
+  color: rgb(128,216,255) !important; }
+
+.mdl-color--light-blue-A100 {
+  background-color: rgb(128,216,255) !important; }
+
+.mdl-color-text--light-blue-A200 {
+  color: rgb(64,196,255) !important; }
+
+.mdl-color--light-blue-A200 {
+  background-color: rgb(64,196,255) !important; }
+
+.mdl-color-text--light-blue-A400 {
+  color: rgb(0,176,255) !important; }
+
+.mdl-color--light-blue-A400 {
+  background-color: rgb(0,176,255) !important; }
+
+.mdl-color-text--light-blue-A700 {
+  color: rgb(0,145,234) !important; }
+
+.mdl-color--light-blue-A700 {
+  background-color: rgb(0,145,234) !important; }
+
+.mdl-color-text--cyan {
+  color: rgb(0,188,212) !important; }
+
+.mdl-color--cyan {
+  background-color: rgb(0,188,212) !important; }
+
+.mdl-color-text--cyan-50 {
+  color: rgb(224,247,250) !important; }
+
+.mdl-color--cyan-50 {
+  background-color: rgb(224,247,250) !important; }
+
+.mdl-color-text--cyan-100 {
+  color: rgb(178,235,242) !important; }
+
+.mdl-color--cyan-100 {
+  background-color: rgb(178,235,242) !important; }
+
+.mdl-color-text--cyan-200 {
+  color: rgb(128,222,234) !important; }
+
+.mdl-color--cyan-200 {
+  background-color: rgb(128,222,234) !important; }
+
+.mdl-color-text--cyan-300 {
+  color: rgb(77,208,225) !important; }
+
+.mdl-color--cyan-300 {
+  background-color: rgb(77,208,225) !important; }
+
+.mdl-color-text--cyan-400 {
+  color: rgb(38,198,218) !important; }
+
+.mdl-color--cyan-400 {
+  background-color: rgb(38,198,218) !important; }
+
+.mdl-color-text--cyan-500 {
+  color: rgb(0,188,212) !important; }
+
+.mdl-color--cyan-500 {
+  background-color: rgb(0,188,212) !important; }
+
+.mdl-color-text--cyan-600 {
+  color: rgb(0,172,193) !important; }
+
+.mdl-color--cyan-600 {
+  background-color: rgb(0,172,193) !important; }
+
+.mdl-color-text--cyan-700 {
+  color: rgb(0,151,167) !important; }
+
+.mdl-color--cyan-700 {
+  background-color: rgb(0,151,167) !important; }
+
+.mdl-color-text--cyan-800 {
+  color: rgb(0,131,143) !important; }
+
+.mdl-color--cyan-800 {
+  background-color: rgb(0,131,143) !important; }
+
+.mdl-color-text--cyan-900 {
+  color: rgb(0,96,100) !important; }
+
+.mdl-color--cyan-900 {
+  background-color: rgb(0,96,100) !important; }
+
+.mdl-color-text--cyan-A100 {
+  color: rgb(132,255,255) !important; }
+
+.mdl-color--cyan-A100 {
+  background-color: rgb(132,255,255) !important; }
+
+.mdl-color-text--cyan-A200 {
+  color: rgb(24,255,255) !important; }
+
+.mdl-color--cyan-A200 {
+  background-color: rgb(24,255,255) !important; }
+
+.mdl-color-text--cyan-A400 {
+  color: rgb(0,229,255) !important; }
+
+.mdl-color--cyan-A400 {
+  background-color: rgb(0,229,255) !important; }
+
+.mdl-color-text--cyan-A700 {
+  color: rgb(0,184,212) !important; }
+
+.mdl-color--cyan-A700 {
+  background-color: rgb(0,184,212) !important; }
+
+.mdl-color-text--teal {
+  color: rgb(0,150,136) !important; }
+
+.mdl-color--teal {
+  background-color: rgb(0,150,136) !important; }
+
+.mdl-color-text--teal-50 {
+  color: rgb(224,242,241) !important; }
+
+.mdl-color--teal-50 {
+  background-color: rgb(224,242,241) !important; }
+
+.mdl-color-text--teal-100 {
+  color: rgb(178,223,219) !important; }
+
+.mdl-color--teal-100 {
+  background-color: rgb(178,223,219) !important; }
+
+.mdl-color-text--teal-200 {
+  color: rgb(128,203,196) !important; }
+
+.mdl-color--teal-200 {
+  background-color: rgb(128,203,196) !important; }
+
+.mdl-color-text--teal-300 {
+  color: rgb(77,182,172) !important; }
+
+.mdl-color--teal-300 {
+  background-color: rgb(77,182,172) !important; }
+
+.mdl-color-text--teal-400 {
+  color: rgb(38,166,154) !important; }
+
+.mdl-color--teal-400 {
+  background-color: rgb(38,166,154) !important; }
+
+.mdl-color-text--teal-500 {
+  color: rgb(0,150,136) !important; }
+
+.mdl-color--teal-500 {
+  background-color: rgb(0,150,136) !important; }
+
+.mdl-color-text--teal-600 {
+  color: rgb(0,137,123) !important; }
+
+.mdl-color--teal-600 {
+  background-color: rgb(0,137,123) !important; }
+
+.mdl-color-text--teal-700 {
+  color: rgb(0,121,107) !important; }
+
+.mdl-color--teal-700 {
+  background-color: rgb(0,121,107) !important; }
+
+.mdl-color-text--teal-800 {
+  color: rgb(0,105,92) !important; }
+
+.mdl-color--teal-800 {
+  background-color: rgb(0,105,92) !important; }
+
+.mdl-color-text--teal-900 {
+  color: rgb(0,77,64) !important; }
+
+.mdl-color--teal-900 {
+  background-color: rgb(0,77,64) !important; }
+
+.mdl-color-text--teal-A100 {
+  color: rgb(167,255,235) !important; }
+
+.mdl-color--teal-A100 {
+  background-color: rgb(167,255,235) !important; }
+
+.mdl-color-text--teal-A200 {
+  color: rgb(100,255,218) !important; }
+
+.mdl-color--teal-A200 {
+  background-color: rgb(100,255,218) !important; }
+
+.mdl-color-text--teal-A400 {
+  color: rgb(29,233,182) !important; }
+
+.mdl-color--teal-A400 {
+  background-color: rgb(29,233,182) !important; }
+
+.mdl-color-text--teal-A700 {
+  color: rgb(0,191,165) !important; }
+
+.mdl-color--teal-A700 {
+  background-color: rgb(0,191,165) !important; }
+
+.mdl-color-text--green {
+  color: rgb(76,175,80) !important; }
+
+.mdl-color--green {
+  background-color: rgb(76,175,80) !important; }
+
+.mdl-color-text--green-50 {
+  color: rgb(232,245,233) !important; }
+
+.mdl-color--green-50 {
+  background-color: rgb(232,245,233) !important; }
+
+.mdl-color-text--green-100 {
+  color: rgb(200,230,201) !important; }
+
+.mdl-color--green-100 {
+  background-color: rgb(200,230,201) !important; }
+
+.mdl-color-text--green-200 {
+  color: rgb(165,214,167) !important; }
+
+.mdl-color--green-200 {
+  background-color: rgb(165,214,167) !important; }
+
+.mdl-color-text--green-300 {
+  color: rgb(129,199,132) !important; }
+
+.mdl-color--green-300 {
+  background-color: rgb(129,199,132) !important; }
+
+.mdl-color-text--green-400 {
+  color: rgb(102,187,106) !important; }
+
+.mdl-color--green-400 {
+  background-color: rgb(102,187,106) !important; }
+
+.mdl-color-text--green-500 {
+  color: rgb(76,175,80) !important; }
+
+.mdl-color--green-500 {
+  background-color: rgb(76,175,80) !important; }
+
+.mdl-color-text--green-600 {
+  color: rgb(67,160,71) !important; }
+
+.mdl-color--green-600 {
+  background-color: rgb(67,160,71) !important; }
+
+.mdl-color-text--green-700 {
+  color: rgb(56,142,60) !important; }
+
+.mdl-color--green-700 {
+  background-color: rgb(56,142,60) !important; }
+
+.mdl-color-text--green-800 {
+  color: rgb(46,125,50) !important; }
+
+.mdl-color--green-800 {
+  background-color: rgb(46,125,50) !important; }
+
+.mdl-color-text--green-900 {
+  color: rgb(27,94,32) !important; }
+
+.mdl-color--green-900 {
+  background-color: rgb(27,94,32) !important; }
+
+.mdl-color-text--green-A100 {
+  color: rgb(185,246,202) !important; }
+
+.mdl-color--green-A100 {
+  background-color: rgb(185,246,202) !important; }
+
+.mdl-color-text--green-A200 {
+  color: rgb(105,240,174) !important; }
+
+.mdl-color--green-A200 {
+  background-color: rgb(105,240,174) !important; }
+
+.mdl-color-text--green-A400 {
+  color: rgb(0,230,118) !important; }
+
+.mdl-color--green-A400 {
+  background-color: rgb(0,230,118) !important; }
+
+.mdl-color-text--green-A700 {
+  color: rgb(0,200,83) !important; }
+
+.mdl-color--green-A700 {
+  background-color: rgb(0,200,83) !important; }
+
+.mdl-color-text--light-green {
+  color: rgb(139,195,74) !important; }
+
+.mdl-color--light-green {
+  background-color: rgb(139,195,74) !important; }
+
+.mdl-color-text--light-green-50 {
+  color: rgb(241,248,233) !important; }
+
+.mdl-color--light-green-50 {
+  background-color: rgb(241,248,233) !important; }
+
+.mdl-color-text--light-green-100 {
+  color: rgb(220,237,200) !important; }
+
+.mdl-color--light-green-100 {
+  background-color: rgb(220,237,200) !important; }
+
+.mdl-color-text--light-green-200 {
+  color: rgb(197,225,165) !important; }
+
+.mdl-color--light-green-200 {
+  background-color: rgb(197,225,165) !important; }
+
+.mdl-color-text--light-green-300 {
+  color: rgb(174,213,129) !important; }
+
+.mdl-color--light-green-300 {
+  background-color: rgb(174,213,129) !important; }
+
+.mdl-color-text--light-green-400 {
+  color: rgb(156,204,101) !important; }
+
+.mdl-color--light-green-400 {
+  background-color: rgb(156,204,101) !important; }
+
+.mdl-color-text--light-green-500 {
+  color: rgb(139,195,74) !important; }
+
+.mdl-color--light-green-500 {
+  background-color: rgb(139,195,74) !important; }
+
+.mdl-color-text--light-green-600 {
+  color: rgb(124,179,66) !important; }
+
+.mdl-color--light-green-600 {
+  background-color: rgb(124,179,66) !important; }
+
+.mdl-color-text--light-green-700 {
+  color: rgb(104,159,56) !important; }
+
+.mdl-color--light-green-700 {
+  background-color: rgb(104,159,56) !important; }
+
+.mdl-color-text--light-green-800 {
+  color: rgb(85,139,47) !important; }
+
+.mdl-color--light-green-800 {
+  background-color: rgb(85,139,47) !important; }
+
+.mdl-color-text--light-green-900 {
+  color: rgb(51,105,30) !important; }
+
+.mdl-color--light-green-900 {
+  background-color: rgb(51,105,30) !important; }
+
+.mdl-color-text--light-green-A100 {
+  color: rgb(204,255,144) !important; }
+
+.mdl-color--light-green-A100 {
+  background-color: rgb(204,255,144) !important; }
+
+.mdl-color-text--light-green-A200 {
+  color: rgb(178,255,89) !important; }
+
+.mdl-color--light-green-A200 {
+  background-color: rgb(178,255,89) !important; }
+
+.mdl-color-text--light-green-A400 {
+  color: rgb(118,255,3) !important; }
+
+.mdl-color--light-green-A400 {
+  background-color: rgb(118,255,3) !important; }
+
+.mdl-color-text--light-green-A700 {
+  color: rgb(100,221,23) !important; }
+
+.mdl-color--light-green-A700 {
+  background-color: rgb(100,221,23) !important; }
+
+.mdl-color-text--lime {
+  color: rgb(205,220,57) !important; }
+
+.mdl-color--lime {
+  background-color: rgb(205,220,57) !important; }
+
+.mdl-color-text--lime-50 {
+  color: rgb(249,251,231) !important; }
+
+.mdl-color--lime-50 {
+  background-color: rgb(249,251,231) !important; }
+
+.mdl-color-text--lime-100 {
+  color: rgb(240,244,195) !important; }
+
+.mdl-color--lime-100 {
+  background-color: rgb(240,244,195) !important; }
+
+.mdl-color-text--lime-200 {
+  color: rgb(230,238,156) !important; }
+
+.mdl-color--lime-200 {
+  background-color: rgb(230,238,156) !important; }
+
+.mdl-color-text--lime-300 {
+  color: rgb(220,231,117) !important; }
+
+.mdl-color--lime-300 {
+  background-color: rgb(220,231,117) !important; }
+
+.mdl-color-text--lime-400 {
+  color: rgb(212,225,87) !important; }
+
+.mdl-color--lime-400 {
+  background-color: rgb(212,225,87) !important; }
+
+.mdl-color-text--lime-500 {
+  color: rgb(205,220,57) !important; }
+
+.mdl-color--lime-500 {
+  background-color: rgb(205,220,57) !important; }
+
+.mdl-color-text--lime-600 {
+  color: rgb(192,202,51) !important; }
+
+.mdl-color--lime-600 {
+  background-color: rgb(192,202,51) !important; }
+
+.mdl-color-text--lime-700 {
+  color: rgb(175,180,43) !important; }
+
+.mdl-color--lime-700 {
+  background-color: rgb(175,180,43) !important; }
+
+.mdl-color-text--lime-800 {
+  color: rgb(158,157,36) !important; }
+
+.mdl-color--lime-800 {
+  background-color: rgb(158,157,36) !important; }
+
+.mdl-color-text--lime-900 {
+  color: rgb(130,119,23) !important; }
+
+.mdl-color--lime-900 {
+  background-color: rgb(130,119,23) !important; }
+
+.mdl-color-text--lime-A100 {
+  color: rgb(244,255,129) !important; }
+
+.mdl-color--lime-A100 {
+  background-color: rgb(244,255,129) !important; }
+
+.mdl-color-text--lime-A200 {
+  color: rgb(238,255,65) !important; }
+
+.mdl-color--lime-A200 {
+  background-color: rgb(238,255,65) !important; }
+
+.mdl-color-text--lime-A400 {
+  color: rgb(198,255,0) !important; }
+
+.mdl-color--lime-A400 {
+  background-color: rgb(198,255,0) !important; }
+
+.mdl-color-text--lime-A700 {
+  color: rgb(174,234,0) !important; }
+
+.mdl-color--lime-A700 {
+  background-color: rgb(174,234,0) !important; }
+
+.mdl-color-text--yellow {
+  color: rgb(255,235,59) !important; }
+
+.mdl-color--yellow {
+  background-color: rgb(255,235,59) !important; }
+
+.mdl-color-text--yellow-50 {
+  color: rgb(255,253,231) !important; }
+
+.mdl-color--yellow-50 {
+  background-color: rgb(255,253,231) !important; }
+
+.mdl-color-text--yellow-100 {
+  color: rgb(255,249,196) !important; }
+
+.mdl-color--yellow-100 {
+  background-color: rgb(255,249,196) !important; }
+
+.mdl-color-text--yellow-200 {
+  color: rgb(255,245,157) !important; }
+
+.mdl-color--yellow-200 {
+  background-color: rgb(255,245,157) !important; }
+
+.mdl-color-text--yellow-300 {
+  color: rgb(255,241,118) !important; }
+
+.mdl-color--yellow-300 {
+  background-color: rgb(255,241,118) !important; }
+
+.mdl-color-text--yellow-400 {
+  color: rgb(255,238,88) !important; }
+
+.mdl-color--yellow-400 {
+  background-color: rgb(255,238,88) !important; }
+
+.mdl-color-text--yellow-500 {
+  color: rgb(255,235,59) !important; }
+
+.mdl-color--yellow-500 {
+  background-color: rgb(255,235,59) !important; }
+
+.mdl-color-text--yellow-600 {
+  color: rgb(253,216,53) !important; }
+
+.mdl-color--yellow-600 {
+  background-color: rgb(253,216,53) !important; }
+
+.mdl-color-text--yellow-700 {
+  color: rgb(251,192,45) !important; }
+
+.mdl-color--yellow-700 {
+  background-color: rgb(251,192,45) !important; }
+
+.mdl-color-text--yellow-800 {
+  color: rgb(249,168,37) !important; }
+
+.mdl-color--yellow-800 {
+  background-color: rgb(249,168,37) !important; }
+
+.mdl-color-text--yellow-900 {
+  color: rgb(245,127,23) !important; }
+
+.mdl-color--yellow-900 {
+  background-color: rgb(245,127,23) !important; }
+
+.mdl-color-text--yellow-A100 {
+  color: rgb(255,255,141) !important; }
+
+.mdl-color--yellow-A100 {
+  background-color: rgb(255,255,141) !important; }
+
+.mdl-color-text--yellow-A200 {
+  color: rgb(255,255,0) !important; }
+
+.mdl-color--yellow-A200 {
+  background-color: rgb(255,255,0) !important; }
+
+.mdl-color-text--yellow-A400 {
+  color: rgb(255,234,0) !important; }
+
+.mdl-color--yellow-A400 {
+  background-color: rgb(255,234,0) !important; }
+
+.mdl-color-text--yellow-A700 {
+  color: rgb(255,214,0) !important; }
+
+.mdl-color--yellow-A700 {
+  background-color: rgb(255,214,0) !important; }
+
+.mdl-color-text--amber {
+  color: rgb(255,193,7) !important; }
+
+.mdl-color--amber {
+  background-color: rgb(255,193,7) !important; }
+
+.mdl-color-text--amber-50 {
+  color: rgb(255,248,225) !important; }
+
+.mdl-color--amber-50 {
+  background-color: rgb(255,248,225) !important; }
+
+.mdl-color-text--amber-100 {
+  color: rgb(255,236,179) !important; }
+
+.mdl-color--amber-100 {
+  background-color: rgb(255,236,179) !important; }
+
+.mdl-color-text--amber-200 {
+  color: rgb(255,224,130) !important; }
+
+.mdl-color--amber-200 {
+  background-color: rgb(255,224,130) !important; }
+
+.mdl-color-text--amber-300 {
+  color: rgb(255,213,79) !important; }
+
+.mdl-color--amber-300 {
+  background-color: rgb(255,213,79) !important; }
+
+.mdl-color-text--amber-400 {
+  color: rgb(255,202,40) !important; }
+
+.mdl-color--amber-400 {
+  background-color: rgb(255,202,40) !important; }
+
+.mdl-color-text--amber-500 {
+  color: rgb(255,193,7) !important; }
+
+.mdl-color--amber-500 {
+  background-color: rgb(255,193,7) !important; }
+
+.mdl-color-text--amber-600 {
+  color: rgb(255,179,0) !important; }
+
+.mdl-color--amber-600 {
+  background-color: rgb(255,179,0) !important; }
+
+.mdl-color-text--amber-700 {
+  color: rgb(255,160,0) !important; }
+
+.mdl-color--amber-700 {
+  background-color: rgb(255,160,0) !important; }
+
+.mdl-color-text--amber-800 {
+  color: rgb(255,143,0) !important; }
+
+.mdl-color--amber-800 {
+  background-color: rgb(255,143,0) !important; }
+
+.mdl-color-text--amber-900 {
+  color: rgb(255,111,0) !important; }
+
+.mdl-color--amber-900 {
+  background-color: rgb(255,111,0) !important; }
+
+.mdl-color-text--amber-A100 {
+  color: rgb(255,229,127) !important; }
+
+.mdl-color--amber-A100 {
+  background-color: rgb(255,229,127) !important; }
+
+.mdl-color-text--amber-A200 {
+  color: rgb(255,215,64) !important; }
+
+.mdl-color--amber-A200 {
+  background-color: rgb(255,215,64) !important; }
+
+.mdl-color-text--amber-A400 {
+  color: rgb(255,196,0) !important; }
+
+.mdl-color--amber-A400 {
+  background-color: rgb(255,196,0) !important; }
+
+.mdl-color-text--amber-A700 {
+  color: rgb(255,171,0) !important; }
+
+.mdl-color--amber-A700 {
+  background-color: rgb(255,171,0) !important; }
+
+.mdl-color-text--orange {
+  color: rgb(255,152,0) !important; }
+
+.mdl-color--orange {
+  background-color: rgb(255,152,0) !important; }
+
+.mdl-color-text--orange-50 {
+  color: rgb(255,243,224) !important; }
+
+.mdl-color--orange-50 {
+  background-color: rgb(255,243,224) !important; }
+
+.mdl-color-text--orange-100 {
+  color: rgb(255,224,178) !important; }
+
+.mdl-color--orange-100 {
+  background-color: rgb(255,224,178) !important; }
+
+.mdl-color-text--orange-200 {
+  color: rgb(255,204,128) !important; }
+
+.mdl-color--orange-200 {
+  background-color: rgb(255,204,128) !important; }
+
+.mdl-color-text--orange-300 {
+  color: rgb(255,183,77) !important; }
+
+.mdl-color--orange-300 {
+  background-color: rgb(255,183,77) !important; }
+
+.mdl-color-text--orange-400 {
+  color: rgb(255,167,38) !important; }
+
+.mdl-color--orange-400 {
+  background-color: rgb(255,167,38) !important; }
+
+.mdl-color-text--orange-500 {
+  color: rgb(255,152,0) !important; }
+
+.mdl-color--orange-500 {
+  background-color: rgb(255,152,0) !important; }
+
+.mdl-color-text--orange-600 {
+  color: rgb(251,140,0) !important; }
+
+.mdl-color--orange-600 {
+  background-color: rgb(251,140,0) !important; }
+
+.mdl-color-text--orange-700 {
+  color: rgb(245,124,0) !important; }
+
+.mdl-color--orange-700 {
+  background-color: rgb(245,124,0) !important; }
+
+.mdl-color-text--orange-800 {
+  color: rgb(239,108,0) !important; }
+
+.mdl-color--orange-800 {
+  background-color: rgb(239,108,0) !important; }
+
+.mdl-color-text--orange-900 {
+  color: rgb(230,81,0) !important; }
+
+.mdl-color--orange-900 {
+  background-color: rgb(230,81,0) !important; }
+
+.mdl-color-text--orange-A100 {
+  color: rgb(255,209,128) !important; }
+
+.mdl-color--orange-A100 {
+  background-color: rgb(255,209,128) !important; }
+
+.mdl-color-text--orange-A200 {
+  color: rgb(255,171,64) !important; }
+
+.mdl-color--orange-A200 {
+  background-color: rgb(255,171,64) !important; }
+
+.mdl-color-text--orange-A400 {
+  color: rgb(255,145,0) !important; }
+
+.mdl-color--orange-A400 {
+  background-color: rgb(255,145,0) !important; }
+
+.mdl-color-text--orange-A700 {
+  color: rgb(255,109,0) !important; }
+
+.mdl-color--orange-A700 {
+  background-color: rgb(255,109,0) !important; }
+
+.mdl-color-text--deep-orange {
+  color: rgb(255,87,34) !important; }
+
+.mdl-color--deep-orange {
+  background-color: rgb(255,87,34) !important; }
+
+.mdl-color-text--deep-orange-50 {
+  color: rgb(251,233,231) !important; }
+
+.mdl-color--deep-orange-50 {
+  background-color: rgb(251,233,231) !important; }
+
+.mdl-color-text--deep-orange-100 {
+  color: rgb(255,204,188) !important; }
+
+.mdl-color--deep-orange-100 {
+  background-color: rgb(255,204,188) !important; }
+
+.mdl-color-text--deep-orange-200 {
+  color: rgb(255,171,145) !important; }
+
+.mdl-color--deep-orange-200 {
+  background-color: rgb(255,171,145) !important; }
+
+.mdl-color-text--deep-orange-300 {
+  color: rgb(255,138,101) !important; }
+
+.mdl-color--deep-orange-300 {
+  background-color: rgb(255,138,101) !important; }
+
+.mdl-color-text--deep-orange-400 {
+  color: rgb(255,112,67) !important; }
+
+.mdl-color--deep-orange-400 {
+  background-color: rgb(255,112,67) !important; }
+
+.mdl-color-text--deep-orange-500 {
+  color: rgb(255,87,34) !important; }
+
+.mdl-color--deep-orange-500 {
+  background-color: rgb(255,87,34) !important; }
+
+.mdl-color-text--deep-orange-600 {
+  color: rgb(244,81,30) !important; }
+
+.mdl-color--deep-orange-600 {
+  background-color: rgb(244,81,30) !important; }
+
+.mdl-color-text--deep-orange-700 {
+  color: rgb(230,74,25) !important; }
+
+.mdl-color--deep-orange-700 {
+  background-color: rgb(230,74,25) !important; }
+
+.mdl-color-text--deep-orange-800 {
+  color: rgb(216,67,21) !important; }
+
+.mdl-color--deep-orange-800 {
+  background-color: rgb(216,67,21) !important; }
+
+.mdl-color-text--deep-orange-900 {
+  color: rgb(191,54,12) !important; }
+
+.mdl-color--deep-orange-900 {
+  background-color: rgb(191,54,12) !important; }
+
+.mdl-color-text--deep-orange-A100 {
+  color: rgb(255,158,128) !important; }
+
+.mdl-color--deep-orange-A100 {
+  background-color: rgb(255,158,128) !important; }
+
+.mdl-color-text--deep-orange-A200 {
+  color: rgb(255,110,64) !important; }
+
+.mdl-color--deep-orange-A200 {
+  background-color: rgb(255,110,64) !important; }
+
+.mdl-color-text--deep-orange-A400 {
+  color: rgb(255,61,0) !important; }
+
+.mdl-color--deep-orange-A400 {
+  background-color: rgb(255,61,0) !important; }
+
+.mdl-color-text--deep-orange-A700 {
+  color: rgb(221,44,0) !important; }
+
+.mdl-color--deep-orange-A700 {
+  background-color: rgb(221,44,0) !important; }
+
+.mdl-color-text--brown {
+  color: rgb(121,85,72) !important; }
+
+.mdl-color--brown {
+  background-color: rgb(121,85,72) !important; }
+
+.mdl-color-text--brown-50 {
+  color: rgb(239,235,233) !important; }
+
+.mdl-color--brown-50 {
+  background-color: rgb(239,235,233) !important; }
+
+.mdl-color-text--brown-100 {
+  color: rgb(215,204,200) !important; }
+
+.mdl-color--brown-100 {
+  background-color: rgb(215,204,200) !important; }
+
+.mdl-color-text--brown-200 {
+  color: rgb(188,170,164) !important; }
+
+.mdl-color--brown-200 {
+  background-color: rgb(188,170,164) !important; }
+
+.mdl-color-text--brown-300 {
+  color: rgb(161,136,127) !important; }
+
+.mdl-color--brown-300 {
+  background-color: rgb(161,136,127) !important; }
+
+.mdl-color-text--brown-400 {
+  color: rgb(141,110,99) !important; }
+
+.mdl-color--brown-400 {
+  background-color: rgb(141,110,99) !important; }
+
+.mdl-color-text--brown-500 {
+  color: rgb(121,85,72) !important; }
+
+.mdl-color--brown-500 {
+  background-color: rgb(121,85,72) !important; }
+
+.mdl-color-text--brown-600 {
+  color: rgb(109,76,65) !important; }
+
+.mdl-color--brown-600 {
+  background-color: rgb(109,76,65) !important; }
+
+.mdl-color-text--brown-700 {
+  color: rgb(93,64,55) !important; }
+
+.mdl-color--brown-700 {
+  background-color: rgb(93,64,55) !important; }
+
+.mdl-color-text--brown-800 {
+  color: rgb(78,52,46) !important; }
+
+.mdl-color--brown-800 {
+  background-color: rgb(78,52,46) !important; }
+
+.mdl-color-text--brown-900 {
+  color: rgb(62,39,35) !important; }
+
+.mdl-color--brown-900 {
+  background-color: rgb(62,39,35) !important; }
+
+.mdl-color-text--grey {
+  color: rgb(158,158,158) !important; }
+
+.mdl-color--grey {
+  background-color: rgb(158,158,158) !important; }
+
+.mdl-color-text--grey-50 {
+  color: rgb(250,250,250) !important; }
+
+.mdl-color--grey-50 {
+  background-color: rgb(250,250,250) !important; }
+
+.mdl-color-text--grey-100 {
+  color: rgb(245,245,245) !important; }
+
+.mdl-color--grey-100 {
+  background-color: rgb(245,245,245) !important; }
+
+.mdl-color-text--grey-200 {
+  color: rgb(238,238,238) !important; }
+
+.mdl-color--grey-200 {
+  background-color: rgb(238,238,238) !important; }
+
+.mdl-color-text--grey-300 {
+  color: rgb(224,224,224) !important; }
+
+.mdl-color--grey-300 {
+  background-color: rgb(224,224,224) !important; }
+
+.mdl-color-text--grey-400 {
+  color: rgb(189,189,189) !important; }
+
+.mdl-color--grey-400 {
+  background-color: rgb(189,189,189) !important; }
+
+.mdl-color-text--grey-500 {
+  color: rgb(158,158,158) !important; }
+
+.mdl-color--grey-500 {
+  background-color: rgb(158,158,158) !important; }
+
+.mdl-color-text--grey-600 {
+  color: rgb(117,117,117) !important; }
+
+.mdl-color--grey-600 {
+  background-color: rgb(117,117,117) !important; }
+
+.mdl-color-text--grey-700 {
+  color: rgb(97,97,97) !important; }
+
+.mdl-color--grey-700 {
+  background-color: rgb(97,97,97) !important; }
+
+.mdl-color-text--grey-800 {
+  color: rgb(66,66,66) !important; }
+
+.mdl-color--grey-800 {
+  background-color: rgb(66,66,66) !important; }
+
+.mdl-color-text--grey-900 {
+  color: rgb(33,33,33) !important; }
+
+.mdl-color--grey-900 {
+  background-color: rgb(33,33,33) !important; }
+
+.mdl-color-text--blue-grey {
+  color: rgb(96,125,139) !important; }
+
+.mdl-color--blue-grey {
+  background-color: rgb(96,125,139) !important; }
+
+.mdl-color-text--blue-grey-50 {
+  color: rgb(236,239,241) !important; }
+
+.mdl-color--blue-grey-50 {
+  background-color: rgb(236,239,241) !important; }
+
+.mdl-color-text--blue-grey-100 {
+  color: rgb(207,216,220) !important; }
+
+.mdl-color--blue-grey-100 {
+  background-color: rgb(207,216,220) !important; }
+
+.mdl-color-text--blue-grey-200 {
+  color: rgb(176,190,197) !important; }
+
+.mdl-color--blue-grey-200 {
+  background-color: rgb(176,190,197) !important; }
+
+.mdl-color-text--blue-grey-300 {
+  color: rgb(144,164,174) !important; }
+
+.mdl-color--blue-grey-300 {
+  background-color: rgb(144,164,174) !important; }
+
+.mdl-color-text--blue-grey-400 {
+  color: rgb(120,144,156) !important; }
+
+.mdl-color--blue-grey-400 {
+  background-color: rgb(120,144,156) !important; }
+
+.mdl-color-text--blue-grey-500 {
+  color: rgb(96,125,139) !important; }
+
+.mdl-color--blue-grey-500 {
+  background-color: rgb(96,125,139) !important; }
+
+.mdl-color-text--blue-grey-600 {
+  color: rgb(84,110,122) !important; }
+
+.mdl-color--blue-grey-600 {
+  background-color: rgb(84,110,122) !important; }
+
+.mdl-color-text--blue-grey-700 {
+  color: rgb(69,90,100) !important; }
+
+.mdl-color--blue-grey-700 {
+  background-color: rgb(69,90,100) !important; }
+
+.mdl-color-text--blue-grey-800 {
+  color: rgb(55,71,79) !important; }
+
+.mdl-color--blue-grey-800 {
+  background-color: rgb(55,71,79) !important; }
+
+.mdl-color-text--blue-grey-900 {
+  color: rgb(38,50,56) !important; }
+
+.mdl-color--blue-grey-900 {
+  background-color: rgb(38,50,56) !important; }
+
+.mdl-color--black {
+  background-color: rgb(0,0,0) !important; }
+
+.mdl-color-text--black {
+  color: rgb(0,0,0) !important; }
+
+.mdl-color--white {
+  background-color: rgb(255,255,255) !important; }
+
+.mdl-color-text--white {
+  color: rgb(255,255,255) !important; }
+
+.mdl-color--primary {
+  background-color: rgb(0, 188, 212) !important; }
+
+.mdl-color--primary-contrast {
+  background-color: rgb(255,255,255) !important; }
+
+.mdl-color--primary-dark {
+  background-color: rgb(48,63,159) !important; }
+
+.mdl-color--accent {
+  background-color: rgb(255,64,129) !important; }
+
+.mdl-color--accent-contrast {
+  background-color: rgb(255,255,255) !important; }
+
+.mdl-color-text--primary {
+  color: rgb(0, 188, 212) !important; }
+
+.mdl-color-text--primary-contrast {
+  color: rgb(255,255,255) !important; }
+
+.mdl-color-text--primary-dark {
+  color: rgb(48,63,159) !important; }
+
+.mdl-color-text--accent {
+  color: rgb(255,64,129) !important; }
+
+.mdl-color-text--accent-contrast {
+  color: rgb(255,255,255) !important; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+.mdl-ripple {
+  background: rgb(0,0,0);
+  border-radius: 50%;
+  height: 50px;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transform: translate(-50%, -50%);
+  width: 50px;
+  overflow: hidden; }
+  .mdl-ripple.is-animating {
+    transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1); }
+  .mdl-ripple.is-visible {
+    opacity: 0.3; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+.mdl-animation--default {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+
+.mdl-animation--fast-out-slow-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+
+.mdl-animation--linear-out-slow-in {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+
+.mdl-animation--fast-out-linear-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+.mdl-badge {
+  position: relative;
+  white-space: nowrap;
+  margin-right: 24px; }
+  .mdl-badge:not([data-badge]) {
+    margin-right: auto; }
+  .mdl-badge[data-badge]:after {
+    content: attr(data-badge);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    position: absolute;
+    top: -11px;
+    right: -24px;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-weight: 600;
+    font-size: 12px;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: rgb(0, 188, 212);
+    color: rgb(255, 255, 255); }
+    .mdl-button .mdl-badge[data-badge]:after {
+      top: -10px;
+      right: -5px; }
+  .mdl-badge.mdl-badge--no-background[data-badge]:after {
+    color: rgb(255,64,129);
+    background: rgba(255,255,255,0.2);
+    box-shadow: 0 0 1px gray; }
+  .mdl-badge.mdl-badge--overlap {
+    margin-right: 10px; }
+    .mdl-badge.mdl-badge--overlap:after {
+      right: -10px; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-button {
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  color: rgb(255, 255, 255);
+  position: relative;
+  height: 36px;
+  margin: 0;
+  min-width: 64px;
+  padding: 0 16px;
+  display: inline-block;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 1;
+  letter-spacing: 0;
+  overflow: hidden;
+  will-change: box-shadow;
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+  cursor: pointer;
+  text-decoration: none;
+  text-align: center;
+  line-height: 36px;
+  vertical-align: middle; }
+  .mdl-button::-moz-focus-inner {
+    border: 0; }
+  .mdl-button:hover {
+    background-color: rgba(158,158,158, 0.20); }
+  .mdl-button:focus:not(:active) {
+    background-color: rgba(0,0,0, 0.12); }
+  .mdl-button:active {
+    background-color: rgba(158,158,158, 0.40); }
+  .mdl-button.mdl-button--colored {
+    color: rgb(255, 82, 82); }
+    .mdl-button.mdl-button--colored:focus:not(:active) {
+      background-color: rgba(0,0,0, 0.12); }
+
+input.mdl-button[type="submit"] {
+  -webkit-appearance: none; }
+
+.mdl-button--raised {
+  background: rgba(158,158,158, 0.20);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
+  .mdl-button--raised:active {
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    background-color: rgba(158,158,158, 0.40); }
+  .mdl-button--raised:focus:not(:active) {
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
+    background-color: rgba(158,158,158, 0.40); }
+  .mdl-button--raised.mdl-button--colored {
+    background: rgb(255, 82, 82);
+    color: rgb(255,255,255); }
+    .mdl-button--raised.mdl-button--colored:hover {
+      background-color: rgb(0, 188, 212); }
+    .mdl-button--raised.mdl-button--colored:active {
+      background-color: rgb(0, 188, 212); }
+    .mdl-button--raised.mdl-button--colored:focus:not(:active) {
+      background-color: rgb(0, 188, 212); }
+    .mdl-button--raised.mdl-button--colored .mdl-ripple {
+      background: rgb(255,255,255); }
+
+.mdl-button--fab {
+  border-radius: 50%;
+  font-size: 24px;
+  height: 56px;
+  margin: auto;
+  min-width: 56px;
+  width: 56px;
+  padding: 0;
+  overflow: hidden;
+  background: rgba(158,158,158, 0.20);
+  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
+  position: relative;
+  line-height: normal; }
+  .mdl-button--fab .material-icons {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-12px, -12px);
+    line-height: 24px;
+    width: 24px; }
+  .mdl-button--fab.mdl-button--mini-fab {
+    height: 40px;
+    min-width: 40px;
+    width: 40px; }
+  .mdl-button--fab .mdl-button__ripple-container {
+    border-radius: 50%;
+    -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
+  .mdl-button--fab:active {
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    background-color: rgba(158,158,158, 0.40); }
+  .mdl-button--fab:focus:not(:active) {
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
+    background-color: rgba(158,158,158, 0.40); }
+  .mdl-button--fab.mdl-button--colored {
+    background: rgb(255, 82, 82);
+    color: #ffffff; }
+    .mdl-button--fab.mdl-button--colored:hover {
+      background-color: #ff4c4c; }
+    .mdl-button--fab.mdl-button--colored:focus:not(:active) {
+      background-color: #f23d3d; }
+    .mdl-button--fab.mdl-button--colored:active {
+      background-color: #f23d3d; }
+    .mdl-button--fab.mdl-button--colored .mdl-ripple {
+      background: rgb(255,255,255); }
+
+.mdl-button--icon {
+  border-radius: 50%;
+  font-size: 24px;
+  height: 32px;
+  margin-left: 0;
+  margin-right: 0;
+  min-width: 32px;
+  width: 32px;
+  padding: 0;
+  overflow: hidden;
+  color: inherit;
+  line-height: normal; }
+  .mdl-button--icon .material-icons {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-12px, -12px);
+    line-height: 24px;
+    width: 24px; }
+  .mdl-button--icon.mdl-button--mini-icon {
+    height: 24px;
+    min-width: 24px;
+    width: 24px; }
+    .mdl-button--icon.mdl-button--mini-icon .material-icons {
+      top: 0px;
+      left: 0px; }
+  .mdl-button--icon .mdl-button__ripple-container {
+    border-radius: 50%;
+    -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
+
+.mdl-button__ripple-container {
+  display: block;
+  height: 100%;
+  left: 0px;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  z-index: 0;
+  overflow: hidden; }
+  .mdl-button[disabled] .mdl-button__ripple-container .mdl-ripple,
+  .mdl-button.mdl-button--disabled .mdl-button__ripple-container .mdl-ripple {
+    background-color: transparent; }
+
+.mdl-button--primary.mdl-button--primary {
+  color: rgb(255, 82, 82); }
+  .mdl-button--primary.mdl-button--primary .mdl-ripple {
+    background: rgb(255,255,255); }
+  .mdl-button--primary.mdl-button--primary.mdl-button--raised, .mdl-button--primary.mdl-button--primary.mdl-button--fab {
+    color: rgb(255,255,255);
+    background-color: rgb(255, 82, 82); }
+
+.mdl-button--accent.mdl-button--accent {
+  color: rgb(255, 82, 82); }
+  .mdl-button--accent.mdl-button--accent .mdl-ripple {
+    background: #ffffff; }
+  .mdl-button--accent.mdl-button--accent.mdl-button--raised, .mdl-button--accent.mdl-button--accent.mdl-button--fab {
+    color: #ffffff;
+    background-color: rgb(255, 82, 82); }
+
+.mdl-button[disabled][disabled], .mdl-button.mdl-button--disabled.mdl-button--disabled {
+  color: rgba(255, 255, 255, 0.3);
+  cursor: default;
+  background-color: transparent; }
+
+.mdl-button--fab[disabled][disabled], .mdl-button--fab.mdl-button--disabled.mdl-button--disabled {
+  background-color: #6b6b6b;
+  color: rgba(255, 255, 255, 0.3); }
+
+.mdl-button--raised[disabled][disabled], .mdl-button--raised.mdl-button--disabled.mdl-button--disabled {
+  background-color: #6b6b6b;
+  color: rgba(255, 255, 255, 0.3);
+  box-shadow: none; }
+
+.mdl-button--colored[disabled][disabled], .mdl-button--colored.mdl-button--disabled.mdl-button--disabled {
+  color: rgba(255, 255, 255, 0.3); }
+
+.mdl-button .material-icons {
+  vertical-align: middle; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+.mdl-card {
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: 400;
+  min-height: auto;
+  overflow: hidden;
+  width: auto;
+  z-index: 1;
+  position: relative;
+  background: #4e4e4e;
+  border-radius: 2px;
+  box-sizing: border-box; }
+
+.mdl-card__media {
+  background-color: rgb(255,64,129);
+  background-repeat: repeat;
+  background-position: 50% 50%;
+  background-size: cover;
+  background-origin: padding-box;
+  background-attachment: scroll;
+  box-sizing: border-box; }
+
+.mdl-card__title {
+  align-items: center;
+  color: rgba(255, 255, 255, 0.8);
+  display: block;
+  display: flex;
+  justify-content: stretch;
+  line-height: normal;
+  padding: 20px 16px;
+  perspective-origin: 165px 56px;
+  transform-origin: 165px 56px;
+  box-sizing: border-box; }
+  .mdl-card__title.mdl-card--border {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
+
+.mdl-card__title-text {
+  align-self: flex-end;
+  color: inherit;
+  display: block;
+  display: flex;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: normal;
+  overflow: hidden;
+  transform-origin: 149px 48px;
+  margin: 0; }
+
+.mdl-card__subtitle-text {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.5);
+  margin: 0; }
+
+.mdl-card__supporting-text {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 1rem;
+  line-height: 18px;
+  overflow: hidden;
+  padding: 20px 16px;
+  width: 90%; }
+
+.mdl-card__actions {
+  font-size: 16px;
+  line-height: normal;
+  width: 100%;
+  background-color: transparent;
+  padding: 8px;
+  box-sizing: border-box; }
+  .mdl-card__actions.mdl-card--border {
+    border-top: 1px solid rgba(0, 0, 0, 0.1); }
+
+.mdl-card--expand {
+  flex-grow: 1; }
+
+.mdl-card__menu {
+  position: absolute;
+  right: 16px;
+  top: 16px; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-checkbox {
+  position: relative;
+  z-index: 1;
+  vertical-align: middle;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 24px;
+  margin: 0;
+  padding: 0; }
+  .mdl-checkbox.is-upgraded {
+    padding-left: 18px; }
+
+.mdl-checkbox__input {
+  line-height: 24px; }
+  .mdl-checkbox.is-upgraded .mdl-checkbox__input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none; }
+
+.mdl-checkbox__box-outline {
+  position: absolute;
+  top: 2px;
+  left: 0;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  cursor: pointer;
+  overflow: hidden;
+  border: 2px solid rgb(255, 255, 255);
+  border-radius: 2px;
+  z-index: 2; }
+  .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
+    border: 2px solid rgb(255, 82, 82); }
+  fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline,
+  .mdl-checkbox.is-disabled .mdl-checkbox__box-outline {
+    border: 2px solid rgba(0,0,0, 0.26);
+    cursor: auto; }
+
+.mdl-checkbox__focus-helper {
+  position: absolute;
+  top: 2px;
+  left: 0;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: transparent; }
+  .mdl-checkbox.is-focused .mdl-checkbox__focus-helper {
+    box-shadow: 0 0 0px 9px rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.1); }
+  .mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper {
+    box-shadow: 0 0 0px 9px rgba(0, 188, 212, 0.26);
+    background-color: rgba(0, 188, 212, 0.26); }
+
+.mdl-checkbox__tick-outline {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  mask: url("../images/tick-mask.svg?embed");
+  background: transparent;
+  transition-duration: 0.28s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: background; }
+  .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
+    background: rgb(255, 82, 82) url("../images/tick.svg?embed"); }
+  fieldset[disabled] .mdl-checkbox.is-checked .mdl-checkbox__tick-outline,
+  .mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline {
+    background: rgba(0,0,0, 0.26) url("../images/tick.svg?embed"); }
+
+.mdl-checkbox__label {
+  position: relative;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0; }
+  fieldset[disabled] .mdl-checkbox .mdl-checkbox__label,
+  .mdl-checkbox.is-disabled .mdl-checkbox__label {
+    color: rgba(0,0,0, 0.26);
+    cursor: auto; }
+
+.mdl-checkbox__ripple-container {
+  position: absolute;
+  z-index: 2;
+  top: -6px;
+  left: -9px;
+  box-sizing: border-box;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  cursor: pointer;
+  overflow: hidden;
+  -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
+  .mdl-checkbox__ripple-container .mdl-ripple {
+    background: rgb(255, 82, 82); }
+  fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container,
+  .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container {
+    cursor: auto; }
+  fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container .mdl-ripple,
+  .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container .mdl-ripple {
+    background: transparent; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-data-table {
+  position: relative;
+  border: 1px solid rgba(255, 255, 255,0.05);
+  border-collapse: collapse;
+  white-space: nowrap;
+  font-size: 16px;
+  background-color: rgb(255,255,255); }
+  .mdl-data-table thead {
+    padding-bottom: 3px; }
+    .mdl-data-table thead .mdl-data-table__select {
+      margin-top: 0; }
+  .mdl-data-table tbody tr {
+    position: relative;
+    height: 48px;
+    transition-duration: 0.28s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: background-color; }
+    .mdl-data-table tbody tr.is-selected {
+      background-color: #4e4e4e; }
+    .mdl-data-table tbody tr:hover {
+      background-color: rgba(0, 0, 0, 0.2); }
+  .mdl-data-table td, .mdl-data-table th {
+    padding: 0 8px 12px 8px;
+    text-align: right; }
+    .mdl-data-table td:first-of-type, .mdl-data-table th:first-of-type {
+      padding-left: 24px; }
+    .mdl-data-table td:last-of-type, .mdl-data-table th:last-of-type {
+      padding-right: 24px; }
+  .mdl-data-table td {
+    position: relative;
+    vertical-align: middle;
+    height: 48px;
+    border-top: 1px solid rgba(255, 255, 255,0.05);
+    border-bottom: 1px solid rgba(255, 255, 255,0.05);
+    padding-top: 12px;
+    box-sizing: border-box; }
+    .mdl-data-table td .mdl-data-table__select {
+      vertical-align: middle; }
+  .mdl-data-table th {
+    position: relative;
+    vertical-align: bottom;
+    text-overflow: ellipsis;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 24px;
+    letter-spacing: 0;
+    height: 48px;
+    font-size: 13px;
+    color: rgb(255, 255, 255);
+    padding-bottom: 8px;
+    box-sizing: border-box; }
+    .mdl-data-table th .mdl-data-table__header--sorted-ascending, .mdl-data-table th .mdl-data-table__header--sorted-descending {
+      color: rgba(0, 0, 0, 0.87); }
+      .mdl-data-table th .mdl-data-table__header--sorted-ascending:before, .mdl-data-table th .mdl-data-table__header--sorted-descending:before {
+        font-size: 16px;
+        font-family: 'Material Icons';
+        font-weight: normal;
+        font-style: normal;
+        font-size: 24px;
+        line-height: 1;
+        letter-spacing: normal;
+        text-transform: none;
+        display: inline-block;
+        word-wrap: normal;
+        font-feature-settings: 'liga';
+        -webkit-font-feature-settings: 'liga';
+        -webkit-font-smoothing: antialiased; }
+    .mdl-data-table th .mdl-data-table__header--sorted-ascending:before {
+      content: "\e5d8"; }
+    .mdl-data-table th .mdl-data-table__header--sorted-descending:before {
+      content: "\e5db"; }
+
+.mdl-data-table__select {
+  width: 16px; }
+
+.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric {
+  text-align: left; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-dialog {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 280px; }
+  .mdl-dialog__title {
+    padding: 24px 24px 0;
+    margin: 0;
+    font-size: 2.5rem; }
+  .mdl-dialog__actions {
+    padding: 8px 8px 8px 24px;
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap; }
+    .mdl-dialog__actions > * {
+      margin-right: 8px;
+      height: 36px; }
+      .mdl-dialog__actions > *:first-child {
+        margin-right: 0; }
+    .mdl-dialog__actions--full-width {
+      padding: 0 0 8px 0; }
+      .mdl-dialog__actions--full-width > * {
+        height: 48px;
+        flex: 0 0 100%;
+        padding-right: 16px;
+        margin-right: 0;
+        text-align: right; }
+  .mdl-dialog__content {
+    padding: 20px 24px 24px 24px;
+    color: rgba(255, 255, 255, 0.8); }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-mega-footer {
+  padding: 16px 40px;
+  color: rgb(158,158,158);
+  background-color: rgb(66,66,66); }
+
+.mdl-mega-footer--top-section:after,
+.mdl-mega-footer--middle-section:after,
+.mdl-mega-footer--bottom-section:after,
+.mdl-mega-footer__top-section:after,
+.mdl-mega-footer__middle-section:after,
+.mdl-mega-footer__bottom-section:after {
+  content: '';
+  display: block;
+  clear: both; }
+
+.mdl-mega-footer--left-section,
+.mdl-mega-footer__left-section {
+  margin-bottom: 16px; }
+
+.mdl-mega-footer--right-section,
+.mdl-mega-footer__right-section {
+  margin-bottom: 16px; }
+
+.mdl-mega-footer--right-section a,
+.mdl-mega-footer__right-section a {
+  display: block;
+  margin-bottom: 16px;
+  color: inherit;
+  text-decoration: none; }
+
+@media screen and (min-width: 760px) {
+  .mdl-mega-footer--left-section,
+  .mdl-mega-footer__left-section {
+    float: left; }
+  .mdl-mega-footer--right-section,
+  .mdl-mega-footer__right-section {
+    float: right; }
+  .mdl-mega-footer--right-section a,
+  .mdl-mega-footer__right-section a {
+    display: inline-block;
+    margin-left: 16px;
+    line-height: 36px;
+    vertical-align: middle; } }
+
+.mdl-mega-footer--social-btn,
+.mdl-mega-footer__social-btn {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  margin: 0;
+  background-color: rgb(158,158,158);
+  border: none; }
+
+.mdl-mega-footer--drop-down-section,
+.mdl-mega-footer__drop-down-section {
+  display: block;
+  position: relative; }
+
+@media screen and (min-width: 760px) {
+  .mdl-mega-footer--drop-down-section,
+  .mdl-mega-footer__drop-down-section {
+    width: 33%; }
+  .mdl-mega-footer--drop-down-section:nth-child(1),
+  .mdl-mega-footer--drop-down-section:nth-child(2),
+  .mdl-mega-footer__drop-down-section:nth-child(1),
+  .mdl-mega-footer__drop-down-section:nth-child(2) {
+    float: left; }
+  .mdl-mega-footer--drop-down-section:nth-child(3),
+  .mdl-mega-footer__drop-down-section:nth-child(3) {
+    float: right; }
+    .mdl-mega-footer--drop-down-section:nth-child(3):after,
+    .mdl-mega-footer__drop-down-section:nth-child(3):after {
+      clear: right; }
+  .mdl-mega-footer--drop-down-section:nth-child(4),
+  .mdl-mega-footer__drop-down-section:nth-child(4) {
+    clear: right;
+    float: right; }
+  .mdl-mega-footer--middle-section:after,
+  .mdl-mega-footer__middle-section:after {
+    content: '';
+    display: block;
+    clear: both; }
+  .mdl-mega-footer--bottom-section,
+  .mdl-mega-footer__bottom-section {
+    padding-top: 0; } }
+
+@media screen and (min-width: 1024px) {
+  .mdl-mega-footer--drop-down-section,
+  .mdl-mega-footer--drop-down-section:nth-child(3),
+  .mdl-mega-footer--drop-down-section:nth-child(4),
+  .mdl-mega-footer__drop-down-section,
+  .mdl-mega-footer__drop-down-section:nth-child(3),
+  .mdl-mega-footer__drop-down-section:nth-child(4) {
+    width: 24%;
+    float: left; } }
+
+.mdl-mega-footer--heading-checkbox,
+.mdl-mega-footer__heading-checkbox {
+  position: absolute;
+  width: 100%;
+  height: 55.8px;
+  padding: 32px;
+  margin: 0;
+  margin-top: -16px;
+  cursor: pointer;
+  z-index: 1;
+  opacity: 0; }
+  .mdl-mega-footer--heading-checkbox + .mdl-mega-footer--heading:after,
+  .mdl-mega-footer--heading-checkbox + .mdl-mega-footer__heading:after,
+  .mdl-mega-footer__heading-checkbox + .mdl-mega-footer--heading:after,
+  .mdl-mega-footer__heading-checkbox + .mdl-mega-footer__heading:after {
+    font-family: 'Material Icons';
+    content: '\E5CE'; }
+
+.mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer--link-list,
+.mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer__link-list,
+.mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
+.mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
+.mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer--link-list,
+.mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer__link-list,
+.mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
+.mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list {
+  display: none; }
+
+.mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading:after,
+.mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading:after,
+.mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading:after,
+.mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading:after {
+  font-family: 'Material Icons';
+  content: '\E5CF'; }
+
+.mdl-mega-footer--heading,
+.mdl-mega-footer__heading {
+  position: relative;
+  width: 100%;
+  padding-right: 39.8px;
+  margin-bottom: 16px;
+  box-sizing: border-box;
+  font-size: 14px;
+  line-height: 23.8px;
+  font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: rgb(224,224,224); }
+
+.mdl-mega-footer--heading:after,
+.mdl-mega-footer__heading:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  width: 23.8px;
+  height: 23.8px;
+  background-size: cover; }
+
+.mdl-mega-footer--link-list,
+.mdl-mega-footer__link-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-bottom: 32px; }
+  .mdl-mega-footer--link-list:after,
+  .mdl-mega-footer__link-list:after {
+    clear: both;
+    display: block;
+    content: ''; }
+
+.mdl-mega-footer--link-list li,
+.mdl-mega-footer__link-list li {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0;
+  line-height: 20px; }
+
+.mdl-mega-footer--link-list a,
+.mdl-mega-footer__link-list a {
+  color: inherit;
+  text-decoration: none;
+  white-space: nowrap; }
+
+@media screen and (min-width: 760px) {
+  .mdl-mega-footer--heading-checkbox,
+  .mdl-mega-footer__heading-checkbox {
+    display: none; }
+    .mdl-mega-footer--heading-checkbox + .mdl-mega-footer--heading:after,
+    .mdl-mega-footer--heading-checkbox + .mdl-mega-footer__heading:after,
+    .mdl-mega-footer__heading-checkbox + .mdl-mega-footer--heading:after,
+    .mdl-mega-footer__heading-checkbox + .mdl-mega-footer__heading:after {
+      content: ''; }
+  .mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer--link-list,
+  .mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer__link-list,
+  .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
+  .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
+  .mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer--link-list,
+  .mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer__link-list,
+  .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
+  .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list {
+    display: block; }
+  .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading:after,
+  .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading:after,
+  .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading:after,
+  .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading:after {
+    content: ''; } }
+
+.mdl-mega-footer--bottom-section,
+.mdl-mega-footer__bottom-section {
+  padding-top: 16px;
+  margin-bottom: 16px; }
+
+.mdl-logo {
+  margin-bottom: 16px;
+  color: white; }
+
+.mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li,
+.mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li {
+  float: left;
+  margin-bottom: 0;
+  margin-right: 16px; }
+
+@media screen and (min-width: 760px) {
+  .mdl-logo {
+    float: left;
+    margin-bottom: 0;
+    margin-right: 16px; } }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+.mdl-mini-footer {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  padding: 32px 16px;
+  color: rgb(158,158,158);
+  background-color: rgb(66,66,66); }
+  .mdl-mini-footer:after {
+    content: '';
+    display: block; }
+  .mdl-mini-footer .mdl-logo {
+    line-height: 36px; }
+
+.mdl-mini-footer--link-list,
+.mdl-mini-footer__link-list {
+  display: flex;
+  flex-flow: row nowrap;
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+  .mdl-mini-footer--link-list li,
+  .mdl-mini-footer__link-list li {
+    margin-bottom: 0;
+    margin-right: 16px; }
+    @media screen and (min-width: 760px) {
+      .mdl-mini-footer--link-list li,
+      .mdl-mini-footer__link-list li {
+        line-height: 36px; } }
+  .mdl-mini-footer--link-list a,
+  .mdl-mini-footer__link-list a {
+    color: inherit;
+    text-decoration: none;
+    white-space: nowrap; }
+
+.mdl-mini-footer--left-section,
+.mdl-mini-footer__left-section {
+  display: inline-block;
+  order: 0; }
+
+.mdl-mini-footer--right-section,
+.mdl-mini-footer__right-section {
+  display: inline-block;
+  order: 1; }
+
+.mdl-mini-footer--social-btn,
+.mdl-mini-footer__social-btn {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  margin: 0;
+  background-color: rgb(158,158,158);
+  border: none; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+.mdl-icon-toggle {
+  position: relative;
+  z-index: 1;
+  vertical-align: middle;
+  display: inline-block;
+  height: 32px;
+  margin: 0;
+  padding: 0; }
+
+.mdl-icon-toggle__input {
+  line-height: 32px; }
+  .mdl-icon-toggle.is-upgraded .mdl-icon-toggle__input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none; }
+
+.mdl-icon-toggle__label {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  height: 32px;
+  width: 32px;
+  min-width: 32px;
+  color: rgb(97,97,97);
+  border-radius: 50%;
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+  text-align: center;
+  background-color: transparent;
+  will-change: background-color;
+  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
+  .mdl-icon-toggle__label.material-icons {
+    line-height: 32px;
+    font-size: 24px; }
+  .mdl-icon-toggle.is-checked .mdl-icon-toggle__label {
+    color: rgb(0, 188, 212); }
+  .mdl-icon-toggle.is-disabled .mdl-icon-toggle__label {
+    color: rgba(0,0,0, 0.26);
+    cursor: auto;
+    transition: none; }
+  .mdl-icon-toggle.is-focused .mdl-icon-toggle__label {
+    background-color: rgba(0,0,0, 0.12); }
+  .mdl-icon-toggle.is-focused.is-checked .mdl-icon-toggle__label {
+    background-color: rgba(0, 188, 212, 0.26); }
+
+.mdl-icon-toggle__ripple-container {
+  position: absolute;
+  z-index: 2;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  cursor: pointer;
+  overflow: hidden;
+  -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
+  .mdl-icon-toggle__ripple-container .mdl-ripple {
+    background: rgb(97,97,97); }
+  .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container {
+    cursor: auto; }
+  .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container .mdl-ripple {
+    background: transparent; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-list {
+  display: block;
+  padding: 0 0;
+  list-style: none; }
+
+.mdl-list__item {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  display: flex;
+  min-height: 48px;
+  box-sizing: border-box;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: 16px;
+  cursor: default;
+  color: rgb(255, 255, 255);
+  overflow: hidden; }
+  .mdl-list__item .mdl-list__item-primary-content {
+    order: 0;
+    flex-grow: 2;
+    text-decoration: none;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center; }
+    .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-icon {
+      margin-right: 16px; }
+    .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-avatar {
+      margin-right: 16px; }
+  .mdl-list__item .mdl-list__item-secondary-content {
+    display: flex;
+    flex-flow: column;
+    align-items: flex-end;
+    margin-left: 16px; }
+    .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-action label {
+      display: inline; }
+    .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-info {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1;
+      letter-spacing: 0;
+      color: rgba(255, 255, 255, 0.54); }
+    .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-sub-header {
+      padding: 0 0 0 16px; }
+
+.mdl-list__item-icon,
+.mdl-list__item-icon.material-icons {
+  height: 24px;
+  width: 24px;
+  font-size: 24px;
+  box-sizing: border-box;
+  color: rgba(255, 255, 255, 0.8); }
+
+.mdl-list__item-avatar,
+.mdl-list__item-avatar.material-icons {
+  height: 32px;
+  width: 32px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.8);
+  font-size: 32px;
+  color: white; }
+
+.mdl-list__item--two-line {
+  height: 64px; }
+  .mdl-list__item--two-line .mdl-list__item-primary-content {
+    height: 32px;
+    line-height: 20px;
+    display: block; }
+    .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-avatar {
+      float: left; }
+    .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-icon {
+      float: left;
+      margin-top: 4px; }
+    .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-secondary-content {
+      height: 32px; }
+    .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-sub-title {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 24px;
+      letter-spacing: 0;
+      line-height: 18px;
+      color: rgba(255, 255, 255, 0.54);
+      display: block;
+      padding: 0; }
+
+.mdl-list__item--three-line {
+  height: 88px; }
+  .mdl-list__item--three-line .mdl-list__item-primary-content {
+    height: 56px;
+    line-height: 20px;
+    display: block; }
+    .mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-avatar,
+    .mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-icon {
+      float: left; }
+  .mdl-list__item--three-line .mdl-list__item-secondary-content {
+    height: 56px; }
+  .mdl-list__item--three-line .mdl-list__item-text-body {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0;
+    line-height: 18px;
+    height: 56px;
+    color: rgba(255, 255, 255, 0.54);
+    display: block;
+    padding: 0; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-menu__container {
+  display: block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  position: absolute;
+  overflow: visible;
+  height: 0;
+  width: 0;
+  visibility: hidden;
+  z-index: -1; }
+  .mdl-menu__container.is-visible, .mdl-menu__container.is-animating {
+    z-index: 999;
+    visibility: visible; }
+
+.mdl-menu__outline {
+  display: block;
+  background: #4e4e4e;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 2px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  opacity: 0;
+  transform: scale(0);
+  transform-origin: 0 0;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  will-change: transform;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: -1; }
+  .mdl-menu__container.is-visible .mdl-menu__outline {
+    opacity: 1;
+    transform: scale(1);
+    z-index: 999; }
+  .mdl-menu__outline.mdl-menu--bottom-right {
+    transform-origin: 100% 0; }
+  .mdl-menu__outline.mdl-menu--top-left {
+    transform-origin: 0 100%; }
+  .mdl-menu__outline.mdl-menu--top-right {
+    transform-origin: 100% 100%; }
+
+.mdl-menu {
+  position: absolute;
+  list-style: none;
+  top: 0;
+  left: 0;
+  height: auto;
+  width: auto;
+  min-width: 124px;
+  padding: 8px 0;
+  margin: 0;
+  opacity: 0;
+  clip: rect(0 0 0 0);
+  z-index: -1; }
+  .mdl-menu__container.is-visible .mdl-menu {
+    opacity: 1;
+    z-index: 999; }
+  .mdl-menu.is-animating {
+    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), clip 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+  .mdl-menu.mdl-menu--bottom-right {
+    left: auto;
+    right: 0; }
+  .mdl-menu.mdl-menu--top-left {
+    top: auto;
+    bottom: 0; }
+  .mdl-menu.mdl-menu--top-right {
+    top: auto;
+    left: auto;
+    bottom: 0;
+    right: 0; }
+  .mdl-menu.mdl-menu--unaligned {
+    top: auto;
+    left: auto; }
+
+.mdl-menu__item {
+  display: block;
+  border: none;
+  color: rgba(0,0,0, 0.87);
+  background-color: transparent;
+  text-align: left;
+  margin: 0;
+  padding: 0 16px;
+  outline-color: rgb(189,189,189);
+  position: relative;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0;
+  text-decoration: none;
+  cursor: pointer;
+  height: 48px;
+  line-height: 48px;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  user-select: none; }
+  .mdl-menu__container.is-visible .mdl-menu__item {
+    opacity: 1; }
+  .mdl-menu__item::-moz-focus-inner {
+    border: 0; }
+  .mdl-menu__item--full-bleed-divider {
+    border-bottom: 1px solid rgba(0,0,0, 0.12); }
+  .mdl-menu__item[disabled], .mdl-menu__item[data-mdl-disabled] {
+    color: rgb(189,189,189);
+    background-color: transparent;
+    cursor: auto; }
+    .mdl-menu__item[disabled]:hover, .mdl-menu__item[data-mdl-disabled]:hover {
+      background-color: transparent; }
+    .mdl-menu__item[disabled]:focus, .mdl-menu__item[data-mdl-disabled]:focus {
+      background-color: transparent; }
+    .mdl-menu__item[disabled] .mdl-ripple, .mdl-menu__item[data-mdl-disabled] .mdl-ripple {
+      background: transparent; }
+  .mdl-menu__item:hover {
+    background-color: rgba(0, 0, 0, 0.2); }
+  .mdl-menu__item:focus {
+    outline: none;
+    background-color: rgba(0, 0, 0, 0.15); }
+  .mdl-menu__item:active {
+    background-color: rgba(0, 0, 0, 0.15); }
+
+.mdl-menu__item--ripple-container {
+  display: block;
+  height: 100%;
+  left: 0px;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  z-index: 0;
+  overflow: hidden; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+.mdl-progress {
+  display: block;
+  position: relative;
+  height: 4px;
+  width: 500px;
+  max-width: 100%; }
+
+.mdl-progress > .bar {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0%;
+  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
+
+.mdl-progress > .progressbar {
+  background-color: rgb(255, 82, 82);
+  z-index: 1;
+  left: 0; }
+
+.mdl-progress > .bufferbar {
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), linear-gradient(to right, rgb(255, 82, 82), rgb(255, 82, 82));
+  z-index: 0;
+  left: 0; }
+
+.mdl-progress > .auxbar {
+  right: 0; }
+
+@supports (-webkit-appearance: none) {
+  .mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar,
+  .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), linear-gradient(to right, rgb(255, 82, 82), rgb(255, 82, 82));
+    mask: url("../images/buffer.svg?embed"); } }
+
+.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
+.mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
+  background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(255, 82, 82), rgb(255, 82, 82)); }
+
+.mdl-progress.mdl-progress--indeterminate > .bar1,
+.mdl-progress.mdl-progress__indeterminate > .bar1 {
+  background-color: rgb(255, 82, 82);
+  animation-name: indeterminate1;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear; }
+
+.mdl-progress.mdl-progress--indeterminate > .bar3,
+.mdl-progress.mdl-progress__indeterminate > .bar3 {
+  background-image: none;
+  background-color: rgb(255, 82, 82);
+  animation-name: indeterminate2;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear; }
+
+@keyframes indeterminate1 {
+  0% {
+    left: 0%;
+    width: 0%; }
+  50% {
+    left: 25%;
+    width: 75%; }
+  75% {
+    left: 100%;
+    width: 0%; } }
+
+@keyframes indeterminate2 {
+  0% {
+    left: 0%;
+    width: 0%; }
+  50% {
+    left: 0%;
+    width: 0%; }
+  75% {
+    left: 0%;
+    width: 25%; }
+  100% {
+    left: 100%;
+    width: 0%; } }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-navigation {
+  display: flex;
+  flex-wrap: nowrap;
+  box-sizing: border-box; }
+
+.mdl-navigation__link {
+  color: rgb(66,66,66);
+  text-decoration: none;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0;
+  opacity: 0.87; }
+  .mdl-navigation__link .material-icons {
+    vertical-align: middle; }
+
+.mdl-layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  -webkit-overflow-scrolling: touch; }
+
+.mdl-layout.is-small-screen .mdl-layout--large-screen-only {
+  display: none; }
+
+.mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {
+  display: none; }
+
+.mdl-layout__container {
+  position: absolute;
+  width: 100%;
+  height: 100%; }
+
+.mdl-layout__title,
+.mdl-layout-title {
+  display: block;
+  position: relative;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  font-weight: 400;
+  box-sizing: border-box; }
+
+.mdl-layout-spacer {
+  flex-grow: 1; }
+
+.mdl-layout__drawer {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 236px;
+  height: 100%;
+  max-height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  box-sizing: border-box;
+  border-right: 1px solid rgb(224,224,224);
+  background: #202020;
+  transform: translateX(-246px);
+  transform-style: preserve-3d;
+  will-change: transform;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: transform;
+  color: rgb(66,66,66);
+  overflow: visible;
+  overflow-y: auto;
+  z-index: 5; }
+  .mdl-layout__drawer.is-visible {
+    transform: translateX(0); }
+    .mdl-layout__drawer.is-visible ~ .mdl-layout__content.mdl-layout__content {
+      overflow: hidden; }
+  .mdl-layout__drawer > * {
+    flex-shrink: 0; }
+  .mdl-layout__drawer > .mdl-layout__title,
+  .mdl-layout__drawer > .mdl-layout-title {
+    line-height: 64px;
+    padding-left: 20px; }
+    @media screen and (max-width: 1440px) {
+      .mdl-layout__drawer > .mdl-layout__title,
+      .mdl-layout__drawer > .mdl-layout-title {
+        line-height: 56px;
+        padding-left: 8px; } }
+  .mdl-layout__drawer .mdl-navigation {
+    flex-direction: column;
+    align-items: stretch;
+    padding-top: 16px; }
+    .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
+      display: block;
+      flex-shrink: 0;
+      padding: 16px 20px;
+      margin: 0;
+      color: #757575; }
+      @media screen and (max-width: 1440px) {
+        .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
+          padding: 16px 8px; } }
+      .mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover {
+        background-color: rgba(0, 0, 0, 0.25); }
+      .mdl-layout__drawer .mdl-navigation .mdl-navigation__link--current {
+        background-color: rgba(0, 0, 0, 0.25);
+        color: rgb(0, 188, 212); }
+  @media screen and (min-width: 1441px) {
+    .mdl-layout--fixed-drawer > .mdl-layout__drawer {
+      transform: translateX(0); } }
+
+.mdl-layout__drawer-button {
+  display: block;
+  position: absolute;
+  height: 48px;
+  width: 48px;
+  border: 0;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-align: center;
+  cursor: pointer;
+  font-size: 26px;
+  line-height: 50px;
+  font-family: Helvetica, Arial, sans-serif;
+  margin: 10px 12px;
+  top: 0;
+  left: 0;
+  color: rgb(0, 188, 212);
+  z-index: 4; }
+  .mdl-layout__header .mdl-layout__drawer-button {
+    position: absolute;
+    color: rgb(0, 188, 212);
+    background-color: inherit; }
+    @media screen and (max-width: 1440px) {
+      .mdl-layout__header .mdl-layout__drawer-button {
+        margin: 4px; } }
+  @media screen and (max-width: 1440px) {
+    .mdl-layout__drawer-button {
+      margin: 4px;
+      color: rgba(0, 0, 0, 0.5); } }
+  @media screen and (min-width: 1441px) {
+    .mdl-layout--fixed-drawer > .mdl-layout__drawer-button {
+      display: none; }
+    .mdl-layout--no-desktop-drawer-button .mdl-layout__drawer-button {
+      display: none; } }
+  .mdl-layout--no-drawer-button .mdl-layout__drawer-button {
+    display: none; }
+
+.mdl-layout__header {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  min-height: 64px;
+  max-height: 1000px;
+  z-index: 3;
+  background-color: #242424;
+  color: rgb(0, 188, 212);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: max-height, box-shadow; }
+  @media screen and (max-width: 1440px) {
+    .mdl-layout__header {
+      min-height: 56px; } }
+  .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > .mdl-layout__header {
+    margin-left: 236px;
+    width: calc(100% - 236px); }
+  @media screen and (min-width: 1441px) {
+    .mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__header-row {
+      padding-left: 40px; } }
+  .mdl-layout__header > .mdl-layout-icon {
+    position: absolute;
+    left: 20px;
+    top: 16px;
+    height: 32px;
+    width: 32px;
+    overflow: hidden;
+    z-index: 3;
+    display: block; }
+    @media screen and (max-width: 1440px) {
+      .mdl-layout__header > .mdl-layout-icon {
+        left: 8px;
+        top: 12px; } }
+  .mdl-layout.has-drawer .mdl-layout__header > .mdl-layout-icon {
+    display: none; }
+  .mdl-layout__header.is-compact {
+    max-height: 64px; }
+    @media screen and (max-width: 1440px) {
+      .mdl-layout__header.is-compact {
+        max-height: 56px; } }
+  .mdl-layout__header.is-compact.has-tabs {
+    height: 112px; }
+    @media screen and (max-width: 1440px) {
+      .mdl-layout__header.is-compact.has-tabs {
+        min-height: 104px; } }
+  @media screen and (max-width: 1440px) {
+    .mdl-layout__header {
+      display: none; }
+    .mdl-layout--fixed-header > .mdl-layout__header {
+      display: flex; } }
+
+.mdl-layout__header--transparent.mdl-layout__header--transparent {
+  background-color: transparent;
+  box-shadow: none; }
+
+.mdl-layout__header--seamed {
+  box-shadow: none; }
+
+.mdl-layout__header--scroll {
+  box-shadow: none; }
+
+.mdl-layout__header--waterfall {
+  box-shadow: none;
+  overflow: hidden; }
+  .mdl-layout__header--waterfall.is-casting-shadow {
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
+  .mdl-layout__header--waterfall.mdl-layout__header--waterfall-hide-top {
+    justify-content: flex-end; }
+
+.mdl-layout__header-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  align-self: stretch;
+  align-items: center;
+  height: 64px;
+  margin: 0;
+  padding: 0 20px 0 80px; }
+  .mdl-layout--no-drawer-button .mdl-layout__header-row {
+    padding-left: 20px; }
+  @media screen and (min-width: 1441px) {
+    .mdl-layout--no-desktop-drawer-button .mdl-layout__header-row {
+      padding-left: 20px; } }
+  @media screen and (max-width: 1440px) {
+    .mdl-layout__header-row {
+      height: 56px;
+      padding: 0 8px 0 72px; }
+      .mdl-layout--no-drawer-button .mdl-layout__header-row {
+        padding-left: 8px; } }
+  .mdl-layout__header-row > * {
+    flex-shrink: 0; }
+  .mdl-layout__header--scroll .mdl-layout__header-row {
+    width: 100%; }
+  .mdl-layout__header-row .mdl-navigation {
+    margin: 0;
+    padding: 0;
+    height: 64px;
+    flex-direction: row;
+    align-items: center; }
+    @media screen and (max-width: 1440px) {
+      .mdl-layout__header-row .mdl-navigation {
+        height: 56px; } }
+  .mdl-layout__header-row .mdl-navigation__link {
+    display: block;
+    color: rgb(0, 188, 212);
+    line-height: 64px;
+    padding: 0 24px; }
+    @media screen and (max-width: 1440px) {
+      .mdl-layout__header-row .mdl-navigation__link {
+        line-height: 56px;
+        padding: 0 8px; } }
+
+.mdl-layout__obfuscator {
+  background-color: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 4;
+  visibility: hidden;
+  transition-property: background-color;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+  .mdl-layout__obfuscator.is-visible {
+    background-color: rgba(0, 0, 0, 0.5);
+    visibility: visible; }
+  @supports (pointer-events: auto) {
+    .mdl-layout__obfuscator {
+      background-color: rgba(0, 0, 0, 0.5);
+      opacity: 0;
+      transition-property: opacity;
+      visibility: visible;
+      pointer-events: none; }
+      .mdl-layout__obfuscator.is-visible {
+        pointer-events: auto;
+        opacity: 1; } }
+
+.mdl-layout__content {
+  -ms-flex: 0 1 auto;
+  position: relative;
+  display: inline-block;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-grow: 1;
+  z-index: 1;
+  -webkit-overflow-scrolling: touch; }
+  .mdl-layout--fixed-drawer > .mdl-layout__content {
+    margin-left: 236px; }
+  .mdl-layout__container.has-scrolling-header .mdl-layout__content {
+    overflow: visible; }
+  @media screen and (max-width: 1440px) {
+    .mdl-layout--fixed-drawer > .mdl-layout__content {
+      margin-left: 0; }
+    .mdl-layout__container.has-scrolling-header .mdl-layout__content {
+      overflow-y: auto;
+      overflow-x: hidden; } }
+
+.mdl-layout__tab-bar {
+  height: 96px;
+  margin: 0;
+  width: calc(100% - 112px);
+  padding: 0 0 0 56px;
+  display: flex;
+  background-color: #242424;
+  overflow-y: hidden;
+  overflow-x: scroll; }
+  .mdl-layout__tab-bar::-webkit-scrollbar {
+    display: none; }
+  .mdl-layout--no-drawer-button .mdl-layout__tab-bar {
+    padding-left: -4px;
+    width: calc(100% - -8px); }
+  @media screen and (min-width: 1441px) {
+    .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar {
+      padding-left: -4px;
+      width: calc(100% - -8px); } }
+  @media screen and (max-width: 1440px) {
+    .mdl-layout__tab-bar {
+      width: calc(100% - 60px);
+      padding: 0 0 0 60px; }
+      .mdl-layout--no-drawer-button .mdl-layout__tab-bar {
+        width: calc(100% - -8px);
+        padding-left: -4px; } }
+  .mdl-layout--fixed-tabs .mdl-layout__tab-bar {
+    padding: 0;
+    overflow: hidden;
+    width: 100%; }
+
+.mdl-layout__tab-bar-container {
+  position: relative;
+  height: 48px;
+  width: 100%;
+  border: none;
+  margin: 0;
+  z-index: 2;
+  flex-grow: 0;
+  flex-shrink: 0;
+  overflow: hidden; }
+  .mdl-layout__container > .mdl-layout__tab-bar-container {
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.mdl-layout__tab-bar-button {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  height: 48px;
+  width: 56px;
+  z-index: 4;
+  text-align: center;
+  background-color: #242424;
+  color: transparent;
+  cursor: pointer;
+  user-select: none; }
+  .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar-button,
+  .mdl-layout--no-drawer-button .mdl-layout__tab-bar-button {
+    width: -4px; }
+    .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar-button .material-icons,
+    .mdl-layout--no-drawer-button .mdl-layout__tab-bar-button .material-icons {
+      position: relative;
+      left: -14px; }
+  @media screen and (max-width: 1440px) {
+    .mdl-layout__tab-bar-button {
+      display: none;
+      width: 60px; } }
+  .mdl-layout--fixed-tabs .mdl-layout__tab-bar-button {
+    display: none; }
+  .mdl-layout__tab-bar-button .material-icons {
+    line-height: 48px; }
+  .mdl-layout__tab-bar-button.is-active {
+    color: rgb(0, 188, 212); }
+
+.mdl-layout__tab-bar-left-button {
+  left: 0; }
+
+.mdl-layout__tab-bar-right-button {
+  right: 0; }
+
+.mdl-layout__tab {
+  margin: 0;
+  border: none;
+  padding: 0 24px 0 24px;
+  float: left;
+  position: relative;
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  text-decoration: none;
+  height: 48px;
+  line-height: 48px;
+  text-align: center;
+  font-weight: 500;
+  font-size: 14px;
+  text-transform: uppercase;
+  color: rgba(255,255,255, 0.6);
+  overflow: hidden; }
+  @media screen and (max-width: 1440px) {
+    .mdl-layout__tab {
+      padding: 0 12px 0 12px; } }
+  .mdl-layout--fixed-tabs .mdl-layout__tab {
+    float: none;
+    flex-grow: 1;
+    padding: 0; }
+  .mdl-layout.is-upgraded .mdl-layout__tab.is-active {
+    color: rgb(0, 188, 212); }
+  .mdl-layout.is-upgraded .mdl-layout__tab.is-active::after {
+    height: 2px;
+    width: 100%;
+    display: block;
+    content: " ";
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    background: rgb(255,64,129);
+    animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
+    transition: all 1s cubic-bezier(0.4, 0, 1, 1); }
+  .mdl-layout__tab .mdl-layout__tab-ripple-container {
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    overflow: hidden; }
+    .mdl-layout__tab .mdl-layout__tab-ripple-container .mdl-ripple {
+      background-color: rgb(0, 188, 212); }
+
+.mdl-layout__tab-panel {
+  display: block; }
+  .mdl-layout.is-upgraded .mdl-layout__tab-panel {
+    display: none; }
+  .mdl-layout.is-upgraded .mdl-layout__tab-panel.is-active {
+    display: block; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-radio {
+  position: relative;
+  font-size: 16px;
+  line-height: 24px;
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0;
+  padding-left: 0; }
+  .mdl-radio.is-upgraded {
+    padding-left: 24px; }
+
+.mdl-radio__button {
+  line-height: 24px; }
+  .mdl-radio.is-upgraded .mdl-radio__button {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none; }
+
+.mdl-radio__outer-circle {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  cursor: pointer;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  z-index: 2; }
+  .mdl-radio.is-checked .mdl-radio__outer-circle {
+    border: 2px solid rgba(0, 188, 212, 0.8); }
+  .mdl-radio__outer-circle fieldset[disabled] .mdl-radio,
+  .mdl-radio.is-disabled .mdl-radio__outer-circle {
+    border: 2px solid rgba(0,0,0, 0.26);
+    cursor: auto; }
+
+.mdl-radio__inner-circle {
+  position: absolute;
+  z-index: 1;
+  margin: 0;
+  top: 8px;
+  left: 4px;
+  box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+  cursor: pointer;
+  transition-duration: 0.28s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: transform;
+  transform: scale3d(0, 0, 0);
+  border-radius: 50%;
+  background: rgba(0, 188, 212, 0.8); }
+  .mdl-radio.is-checked .mdl-radio__inner-circle {
+    transform: scale3d(1, 1, 1); }
+  fieldset[disabled] .mdl-radio .mdl-radio__inner-circle,
+  .mdl-radio.is-disabled .mdl-radio__inner-circle {
+    background: rgba(0,0,0, 0.26);
+    cursor: auto; }
+  .mdl-radio.is-focused .mdl-radio__inner-circle {
+    box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1); }
+
+.mdl-radio__label {
+  cursor: pointer; }
+  fieldset[disabled] .mdl-radio .mdl-radio__label,
+  .mdl-radio.is-disabled .mdl-radio__label {
+    color: rgba(0,0,0, 0.26);
+    cursor: auto; }
+
+.mdl-radio__ripple-container {
+  position: absolute;
+  z-index: 2;
+  top: -9px;
+  left: -13px;
+  box-sizing: border-box;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  cursor: pointer;
+  overflow: hidden;
+  -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
+  .mdl-radio__ripple-container .mdl-ripple {
+    background: rgba(0, 188, 212, 0.8); }
+  fieldset[disabled] .mdl-radio .mdl-radio__ripple-container,
+  .mdl-radio.is-disabled .mdl-radio__ripple-container {
+    cursor: auto; }
+  fieldset[disabled] .mdl-radio .mdl-radio__ripple-container .mdl-ripple,
+  .mdl-radio.is-disabled .mdl-radio__ripple-container .mdl-ripple {
+    background: transparent; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+_:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
+  -ms-appearance: none;
+  height: 32px;
+  margin: 0; }
+
+.mdl-slider {
+  width: calc(100% - 40px);
+  margin: 0 20px; }
+  .mdl-slider.is-upgraded {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    height: 2px;
+    background: transparent;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    outline: 0;
+    padding: 0;
+    color: rgb(0, 188, 212);
+    align-self: center;
+    z-index: 1;
+    cursor: pointer;
+    /**************************** Tracks ****************************/
+    /**************************** Thumbs ****************************/
+    /**************************** 0-value ****************************/
+    /**************************** Disabled ****************************/ }
+    .mdl-slider.is-upgraded::-moz-focus-outer {
+      border: 0; }
+    .mdl-slider.is-upgraded::-ms-tooltip {
+      display: none; }
+    .mdl-slider.is-upgraded::-webkit-slider-runnable-track {
+      background: transparent; }
+    .mdl-slider.is-upgraded::-moz-range-track {
+      background: transparent;
+      border: none; }
+    .mdl-slider.is-upgraded::-ms-track {
+      background: none;
+      color: transparent;
+      height: 2px;
+      width: 100%;
+      border: none; }
+    .mdl-slider.is-upgraded::-ms-fill-lower {
+      padding: 0;
+      background: linear-gradient(to right, transparent, transparent 16px, rgb(0, 188, 212) 16px, rgb(0, 188, 212) 0); }
+    .mdl-slider.is-upgraded::-ms-fill-upper {
+      padding: 0;
+      background: linear-gradient(to left, transparent, transparent 16px, rgba(0,0,0, 0.26) 16px, rgba(0,0,0, 0.26) 0); }
+    .mdl-slider.is-upgraded::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 12px;
+      height: 12px;
+      box-sizing: border-box;
+      border-radius: 50%;
+      background: rgb(0, 188, 212);
+      border: none;
+      transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
+    .mdl-slider.is-upgraded::-moz-range-thumb {
+      -moz-appearance: none;
+      width: 12px;
+      height: 12px;
+      box-sizing: border-box;
+      border-radius: 50%;
+      background-image: none;
+      background: rgb(0, 188, 212);
+      border: none; }
+    .mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb {
+      box-shadow: 0 0 0 10px rgba(0, 188, 212, 0.26); }
+    .mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb {
+      box-shadow: 0 0 0 10px rgba(0, 188, 212, 0.26); }
+    .mdl-slider.is-upgraded:active::-webkit-slider-thumb {
+      background-image: none;
+      background: rgb(0, 188, 212);
+      transform: scale(1.5); }
+    .mdl-slider.is-upgraded:active::-moz-range-thumb {
+      background-image: none;
+      background: rgb(0, 188, 212);
+      transform: scale(1.5); }
+    .mdl-slider.is-upgraded::-ms-thumb {
+      width: 32px;
+      height: 32px;
+      border: none;
+      border-radius: 50%;
+      background: rgb(0, 188, 212);
+      transform: scale(0.375);
+      transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
+    .mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb {
+      background: radial-gradient(circle closest-side, rgb(0, 188, 212) 0%, rgb(0, 188, 212) 37.5%, rgba(0, 188, 212, 0.26) 37.5%, rgba(0, 188, 212, 0.26) 100%);
+      transform: scale(1); }
+    .mdl-slider.is-upgraded:active::-ms-thumb {
+      background: rgb(0, 188, 212);
+      transform: scale(0.5625); }
+    .mdl-slider.is-upgraded.is-lowest-value::-webkit-slider-thumb {
+      border: 2px solid rgba(0,0,0, 0.26);
+      background: transparent; }
+    .mdl-slider.is-upgraded.is-lowest-value::-moz-range-thumb {
+      border: 2px solid rgba(0,0,0, 0.26);
+      background: transparent; }
+    .mdl-slider.is-upgraded.is-lowest-value +
+.mdl-slider__background-flex > .mdl-slider__background-upper {
+      left: 6px; }
+    .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
+      box-shadow: 0 0 0 10px rgba(0,0,0, 0.12);
+      background: rgba(0,0,0, 0.12); }
+    .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb {
+      box-shadow: 0 0 0 10px rgba(0,0,0, 0.12);
+      background: rgba(0,0,0, 0.12); }
+    .mdl-slider.is-upgraded.is-lowest-value:active::-webkit-slider-thumb {
+      border: 1.6px solid rgba(0,0,0, 0.26);
+      transform: scale(1.5); }
+    .mdl-slider.is-upgraded.is-lowest-value:active +
+.mdl-slider__background-flex > .mdl-slider__background-upper {
+      left: 9px; }
+    .mdl-slider.is-upgraded.is-lowest-value:active::-moz-range-thumb {
+      border: 1.5px solid rgba(0,0,0, 0.26);
+      transform: scale(1.5); }
+    .mdl-slider.is-upgraded.is-lowest-value::-ms-thumb {
+      background: radial-gradient(circle closest-side, transparent 0%, transparent 66.67%, rgba(0,0,0, 0.26) 66.67%, rgba(0,0,0, 0.26) 100%); }
+    .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb {
+      background: radial-gradient(circle closest-side, rgba(0,0,0, 0.12) 0%, rgba(0,0,0, 0.12) 25%, rgba(0,0,0, 0.26) 25%, rgba(0,0,0, 0.26) 37.5%, rgba(0,0,0, 0.12) 37.5%, rgba(0,0,0, 0.12) 100%);
+      transform: scale(1); }
+    .mdl-slider.is-upgraded.is-lowest-value:active::-ms-thumb {
+      transform: scale(0.5625);
+      background: radial-gradient(circle closest-side, transparent 0%, transparent 77.78%, rgba(0,0,0, 0.26) 77.78%, rgba(0,0,0, 0.26) 100%); }
+    .mdl-slider.is-upgraded.is-lowest-value::-ms-fill-lower {
+      background: transparent; }
+    .mdl-slider.is-upgraded.is-lowest-value::-ms-fill-upper {
+      margin-left: 6px; }
+    .mdl-slider.is-upgraded.is-lowest-value:active::-ms-fill-upper {
+      margin-left: 9px; }
+    .mdl-slider.is-upgraded:disabled:focus::-webkit-slider-thumb, .mdl-slider.is-upgraded:disabled:active::-webkit-slider-thumb, .mdl-slider.is-upgraded:disabled::-webkit-slider-thumb {
+      transform: scale(0.667);
+      background: rgba(0,0,0, 0.26); }
+    .mdl-slider.is-upgraded:disabled:focus::-moz-range-thumb, .mdl-slider.is-upgraded:disabled:active::-moz-range-thumb, .mdl-slider.is-upgraded:disabled::-moz-range-thumb {
+      transform: scale(0.667);
+      background: rgba(0,0,0, 0.26); }
+    .mdl-slider.is-upgraded:disabled +
+.mdl-slider__background-flex > .mdl-slider__background-lower {
+      background-color: rgba(0,0,0, 0.26);
+      left: -6px; }
+    .mdl-slider.is-upgraded:disabled +
+.mdl-slider__background-flex > .mdl-slider__background-upper {
+      left: 6px; }
+    .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-webkit-slider-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-webkit-slider-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-webkit-slider-thumb {
+      border: 3px solid rgba(0,0,0, 0.26);
+      background: transparent;
+      transform: scale(0.667); }
+    .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-moz-range-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-moz-range-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-moz-range-thumb {
+      border: 3px solid rgba(0,0,0, 0.26);
+      background: transparent;
+      transform: scale(0.667); }
+    .mdl-slider.is-upgraded.is-lowest-value:disabled:active +
+.mdl-slider__background-flex > .mdl-slider__background-upper {
+      left: 6px; }
+    .mdl-slider.is-upgraded:disabled:focus::-ms-thumb, .mdl-slider.is-upgraded:disabled:active::-ms-thumb, .mdl-slider.is-upgraded:disabled::-ms-thumb {
+      transform: scale(0.25);
+      background: rgba(0,0,0, 0.26); }
+    .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-ms-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-ms-thumb {
+      transform: scale(0.25);
+      background: radial-gradient(circle closest-side, transparent 0%, transparent 50%, rgba(0,0,0, 0.26) 50%, rgba(0,0,0, 0.26) 100%); }
+    .mdl-slider.is-upgraded:disabled::-ms-fill-lower {
+      margin-right: 6px;
+      background: linear-gradient(to right, transparent, transparent 25px, rgba(0,0,0, 0.26) 25px, rgba(0,0,0, 0.26) 0); }
+    .mdl-slider.is-upgraded:disabled::-ms-fill-upper {
+      margin-left: 6px; }
+    .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-fill-upper {
+      margin-left: 6px; }
+
+.mdl-slider__ie-container {
+  height: 18px;
+  overflow: visible;
+  border: none;
+  margin: none;
+  padding: none; }
+
+.mdl-slider__container {
+  height: 18px;
+  position: relative;
+  background: none;
+  display: flex;
+  flex-direction: row; }
+
+.mdl-slider__background-flex {
+  background: transparent;
+  position: absolute;
+  height: 2px;
+  width: calc(100% - 52px);
+  top: 50%;
+  left: 0;
+  margin: 0 26px;
+  display: flex;
+  overflow: hidden;
+  border: 0;
+  padding: 0;
+  transform: translate(0, -1px); }
+
+.mdl-slider__background-lower {
+  background: rgb(0, 188, 212);
+  flex: 0;
+  position: relative;
+  border: 0;
+  padding: 0; }
+
+.mdl-slider__background-upper {
+  background: rgba(0,0,0, 0.26);
+  flex: 0;
+  position: relative;
+  border: 0;
+  padding: 0;
+  transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1); }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-snackbar {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  margin-right: -50%;
+  cursor: default;
+  background-color: #323232;
+  z-index: 10000;
+  display: flex;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  will-change: transform;
+  transform: translate(0, 80px);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
+  pointer-events: none; }
+  @media (max-width: 1151px) {
+    .mdl-snackbar {
+      width: 100%;
+      left: 0;
+      min-height: 48px;
+      max-height: 80px; } }
+  @media (min-width: 1152px) {
+    .mdl-snackbar {
+      min-width: 288px;
+      max-width: 568px;
+      border-radius: 2px; } }
+  .mdl-snackbar--active {
+    transform: translate(0, 0);
+    pointer-events: auto;
+    transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1); }
+  .mdl-snackbar__text {
+    padding: 14px 24px;
+    vertical-align: middle;
+    color: white; }
+  .mdl-snackbar__action {
+    background: transparent;
+    border: none;
+    color: rgb(255,64,129);
+    text-transform: uppercase;
+    padding: 14px 24px;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    text-transform: uppercase;
+    line-height: 1;
+    letter-spacing: 0;
+    overflow: hidden;
+    outline: none;
+    opacity: 0;
+    pointer-events: none;
+    cursor: pointer;
+    text-decoration: none;
+    text-align: center;
+    vertical-align: middle; }
+    .mdl-snackbar__action::-moz-focus-inner {
+      border: 0; }
+    .mdl-snackbar__action:not([aria-hidden]) {
+      opacity: 1;
+      pointer-events: auto; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+.mdl-spinner {
+  display: inline-block;
+  position: relative;
+  width: 28px;
+  height: 28px; }
+  .mdl-spinner:not(.is-upgraded).is-active:after {
+    content: "Loading..."; }
+  .mdl-spinner.is-upgraded.is-active {
+    animation: mdl-spinner__container-rotate 1568.23529ms linear infinite; }
+
+@keyframes mdl-spinner__container-rotate {
+  to {
+    transform: rotate(360deg); } }
+
+.mdl-spinner__layer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0; }
+
+.mdl-spinner__layer-1 {
+  border-color: rgb(66,165,245); }
+  .mdl-spinner--single-color .mdl-spinner__layer-1 {
+    border-color: rgb(0, 188, 212); }
+  .mdl-spinner.is-active .mdl-spinner__layer-1 {
+    animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
+
+.mdl-spinner__layer-2 {
+  border-color: rgb(244,67,54); }
+  .mdl-spinner--single-color .mdl-spinner__layer-2 {
+    border-color: rgb(0, 188, 212); }
+  .mdl-spinner.is-active .mdl-spinner__layer-2 {
+    animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
+
+.mdl-spinner__layer-3 {
+  border-color: rgb(253,216,53); }
+  .mdl-spinner--single-color .mdl-spinner__layer-3 {
+    border-color: rgb(0, 188, 212); }
+  .mdl-spinner.is-active .mdl-spinner__layer-3 {
+    animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
+
+.mdl-spinner__layer-4 {
+  border-color: rgb(76,175,80); }
+  .mdl-spinner--single-color .mdl-spinner__layer-4 {
+    border-color: rgb(0, 188, 212); }
+  .mdl-spinner.is-active .mdl-spinner__layer-4 {
+    animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
+
+@keyframes mdl-spinner__fill-unfill-rotate {
+  12.5% {
+    transform: rotate(135deg); }
+  25% {
+    transform: rotate(270deg); }
+  37.5% {
+    transform: rotate(405deg); }
+  50% {
+    transform: rotate(540deg); }
+  62.5% {
+    transform: rotate(675deg); }
+  75% {
+    transform: rotate(810deg); }
+  87.5% {
+    transform: rotate(945deg); }
+  to {
+    transform: rotate(1080deg); } }
+
+/**
+* HACK: Even though the intention is to have the current .mdl-spinner__layer-N
+* at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
+* to do proper subpixel rendering for the elements being animated. This is
+* especially visible in Chrome 39 on Ubuntu 14.04. See:
+*
+* - https://github.com/Polymer/paper-spinner/issues/9
+* - https://code.google.com/p/chromium/issues/detail?id=436255
+*/
+@keyframes mdl-spinner__layer-1-fade-in-out {
+  from {
+    opacity: 0.99; }
+  25% {
+    opacity: 0.99; }
+  26% {
+    opacity: 0; }
+  89% {
+    opacity: 0; }
+  90% {
+    opacity: 0.99; }
+  100% {
+    opacity: 0.99; } }
+
+@keyframes mdl-spinner__layer-2-fade-in-out {
+  from {
+    opacity: 0; }
+  15% {
+    opacity: 0; }
+  25% {
+    opacity: 0.99; }
+  50% {
+    opacity: 0.99; }
+  51% {
+    opacity: 0; } }
+
+@keyframes mdl-spinner__layer-3-fade-in-out {
+  from {
+    opacity: 0; }
+  40% {
+    opacity: 0; }
+  50% {
+    opacity: 0.99; }
+  75% {
+    opacity: 0.99; }
+  76% {
+    opacity: 0; } }
+
+@keyframes mdl-spinner__layer-4-fade-in-out {
+  from {
+    opacity: 0; }
+  65% {
+    opacity: 0; }
+  75% {
+    opacity: 0.99; }
+  90% {
+    opacity: 0.99; }
+  100% {
+    opacity: 0; } }
+
+/**
+* Patch the gap that appear between the two adjacent
+* div.mdl-spinner__circle-clipper while the spinner is rotating
+* (appears on Chrome 38, Safari 7.1, and IE 11).
+*
+* Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
+* opacity is 0.99, but still does on Safari and IE.
+*/
+.mdl-spinner__gap-patch {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 45%;
+  width: 10%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit; }
+  .mdl-spinner__gap-patch .mdl-spinner__circle {
+    width: 1000%;
+    left: -450%; }
+
+.mdl-spinner__circle-clipper {
+  display: inline-block;
+  position: relative;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit; }
+  .mdl-spinner__circle-clipper .mdl-spinner__circle {
+    width: 200%; }
+
+.mdl-spinner__circle {
+  box-sizing: border-box;
+  height: 100%;
+  border-width: 3px;
+  border-style: solid;
+  border-color: inherit;
+  border-bottom-color: transparent !important;
+  border-radius: 50%;
+  animation: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+  .mdl-spinner__left .mdl-spinner__circle {
+    border-right-color: transparent !important;
+    transform: rotate(129deg); }
+    .mdl-spinner.is-active .mdl-spinner__left .mdl-spinner__circle {
+      animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
+  .mdl-spinner__right .mdl-spinner__circle {
+    left: -100%;
+    border-left-color: transparent !important;
+    transform: rotate(-129deg); }
+    .mdl-spinner.is-active .mdl-spinner__right .mdl-spinner__circle {
+      animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
+
+@keyframes mdl-spinner__left-spin {
+  from {
+    transform: rotate(130deg); }
+  50% {
+    transform: rotate(-5deg); }
+  to {
+    transform: rotate(130deg); } }
+
+@keyframes mdl-spinner__right-spin {
+  from {
+    transform: rotate(-130deg); }
+  50% {
+    transform: rotate(5deg); }
+  to {
+    transform: rotate(-130deg); } }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-switch {
+  position: relative;
+  z-index: 1;
+  vertical-align: middle;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 24px;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
+  .mdl-switch.is-upgraded {
+    padding-left: 28px; }
+
+.mdl-switch__input {
+  line-height: 24px; }
+  .mdl-switch.is-upgraded .mdl-switch__input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none; }
+
+.mdl-switch__track {
+  background: rgba(0,0,0, 0.26);
+  position: absolute;
+  left: 0;
+  top: 5px;
+  height: 14px;
+  width: 36px;
+  border-radius: 14px;
+  cursor: pointer; }
+  .mdl-switch.is-checked .mdl-switch__track {
+    background: rgba(0, 188, 212, 0.5); }
+  .mdl-switch__track fieldset[disabled] .mdl-switch,
+  .mdl-switch.is-disabled .mdl-switch__track {
+    background: rgba(0,0,0, 0.12);
+    cursor: auto; }
+
+.mdl-switch__thumb {
+  background: rgb(250,250,250);
+  position: absolute;
+  left: 0;
+  top: 2px;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  transition-duration: 0.28s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: left; }
+  .mdl-switch.is-checked .mdl-switch__thumb {
+    background: rgb(0, 188, 212);
+    left: 16px;
+    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); }
+  .mdl-switch__thumb fieldset[disabled] .mdl-switch,
+  .mdl-switch.is-disabled .mdl-switch__thumb {
+    background: rgb(189,189,189);
+    cursor: auto; }
+
+.mdl-switch__focus-helper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-4px, -4px);
+  display: inline-block;
+  box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: transparent; }
+  .mdl-switch.is-focused .mdl-switch__focus-helper {
+    box-shadow: 0 0 0px 20px rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.1); }
+  .mdl-switch.is-focused.is-checked .mdl-switch__focus-helper {
+    box-shadow: 0 0 0px 20px rgba(0, 188, 212, 0.26);
+    background-color: rgba(0, 188, 212, 0.26); }
+
+.mdl-switch__label {
+  position: relative;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0;
+  left: 24px; }
+  .mdl-switch__label fieldset[disabled] .mdl-switch,
+  .mdl-switch.is-disabled .mdl-switch__label {
+    color: rgb(189,189,189);
+    cursor: auto; }
+
+.mdl-switch__ripple-container {
+  position: absolute;
+  z-index: 2;
+  top: -12px;
+  left: -14px;
+  box-sizing: border-box;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  cursor: pointer;
+  overflow: hidden;
+  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
+  transition-duration: 0.40s;
+  transition-timing-function: step-end;
+  transition-property: left; }
+  .mdl-switch__ripple-container .mdl-ripple {
+    background: rgb(0, 188, 212); }
+  .mdl-switch__ripple-container fieldset[disabled] .mdl-switch,
+  .mdl-switch.is-disabled .mdl-switch__ripple-container {
+    cursor: auto; }
+  fieldset[disabled] .mdl-switch .mdl-switch__ripple-container .mdl-ripple,
+  .mdl-switch.is-disabled .mdl-switch__ripple-container .mdl-ripple {
+    background: transparent; }
+  .mdl-switch.is-checked .mdl-switch__ripple-container {
+    left: 2px; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+.mdl-tabs {
+  display: block;
+  width: 100%; }
+
+.mdl-tabs__tab-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: space-between;
+  align-items: flex-start;
+  height: 48px;
+  padding: 0 0 0 0;
+  margin: 0;
+  border-bottom: 1px solid rgb(224,224,224); }
+
+.mdl-tabs__tab {
+  margin: 0;
+  border: none;
+  padding: 0 24px 0 24px;
+  float: left;
+  position: relative;
+  display: block;
+  text-decoration: none;
+  height: 48px;
+  line-height: 48px;
+  text-align: center;
+  font-weight: 500;
+  font-size: 14px;
+  text-transform: uppercase;
+  color: rgba(0,0,0, 0.54);
+  overflow: hidden; }
+  .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active {
+    color: rgba(0,0,0, 0.87); }
+  .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
+    height: 2px;
+    width: 100%;
+    display: block;
+    content: " ";
+    bottom: 0px;
+    left: 0px;
+    position: absolute;
+    background: rgb(0, 188, 212);
+    animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
+    transition: all 1s cubic-bezier(0.4, 0, 1, 1); }
+  .mdl-tabs__tab .mdl-tabs__ripple-container {
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0px;
+    top: 0px;
+    z-index: 1;
+    overflow: hidden; }
+    .mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple {
+      background: rgb(0, 188, 212); }
+
+.mdl-tabs__panel {
+  display: block; }
+  .mdl-tabs.is-upgraded .mdl-tabs__panel {
+    display: none; }
+  .mdl-tabs.is-upgraded .mdl-tabs__panel.is-active {
+    display: block; }
+
+@keyframes border-expand {
+  0% {
+    opacity: 0;
+    width: 0; }
+  100% {
+    opacity: 1;
+    width: 100%; } }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-textfield {
+  position: relative;
+  font-size: 16px;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 300px;
+  max-width: 100%;
+  margin: 0;
+  padding: 20px 0; }
+  .mdl-textfield .mdl-button {
+    position: absolute;
+    bottom: 20px; }
+
+.mdl-textfield--align-right {
+  text-align: right; }
+
+.mdl-textfield--full-width {
+  width: 100%; }
+
+.mdl-textfield--expandable {
+  min-width: 32px;
+  width: auto;
+  min-height: 32px; }
+
+.mdl-textfield__input {
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  display: block;
+  font-size: 16px;
+  font-family: "Helvetica", "Arial", sans-serif;
+  margin: 0;
+  padding: 4px 0;
+  width: 100%;
+  background: none;
+  text-align: left;
+  color: inherit; }
+  .mdl-textfield__input[type="number"] {
+    -moz-appearance: textfield; }
+  .mdl-textfield__input[type="number"]::-webkit-inner-spin-button, .mdl-textfield__input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0; }
+  .mdl-textfield.is-focused .mdl-textfield__input {
+    outline: none; }
+  .mdl-textfield.is-invalid .mdl-textfield__input {
+    border-color: rgb(213,0,0);
+    box-shadow: none; }
+  fieldset[disabled] .mdl-textfield .mdl-textfield__input,
+  .mdl-textfield.is-disabled .mdl-textfield__input {
+    background-color: transparent;
+    border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.6); }
+
+.mdl-textfield textarea.mdl-textfield__input {
+  display: block; }
+
+.mdl-textfield__label {
+  bottom: 0;
+  color: rgba(0,0,0, 0.26);
+  font-size: 16px;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  position: absolute;
+  display: block;
+  top: 24px;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: left; }
+  .mdl-textfield.is-dirty .mdl-textfield__label {
+    visibility: hidden; }
+  .mdl-textfield--floating-label .mdl-textfield__label {
+    transition-duration: 0.2s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+  fieldset[disabled] .mdl-textfield .mdl-textfield__label,
+  .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {
+    color: rgba(255, 255, 255, 0.6); }
+  .mdl-textfield--floating-label.is-focused .mdl-textfield__label,
+  .mdl-textfield--floating-label.is-dirty .mdl-textfield__label {
+    color: rgb(0, 188, 212);
+    font-size: 12px;
+    top: 4px;
+    visibility: visible; }
+  .mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder .mdl-textfield__label,
+  .mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder .mdl-textfield__label {
+    top: -16px; }
+  .mdl-textfield--floating-label.is-invalid .mdl-textfield__label {
+    color: rgb(213,0,0);
+    font-size: 12px; }
+  .mdl-textfield__label:after {
+    background-color: rgb(0, 188, 212);
+    bottom: 20px;
+    content: '';
+    height: 2px;
+    left: 45%;
+    position: absolute;
+    transition-duration: 0.2s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    visibility: hidden;
+    width: 10px; }
+  .mdl-textfield.is-focused .mdl-textfield__label:after {
+    left: 0;
+    visibility: visible;
+    width: 100%; }
+  .mdl-textfield.is-invalid .mdl-textfield__label:after {
+    background-color: rgb(213,0,0); }
+
+.mdl-textfield__error {
+  color: rgb(213,0,0);
+  position: absolute;
+  font-size: 12px;
+  margin-top: 3px;
+  visibility: hidden;
+  display: block; }
+  .mdl-textfield.is-invalid .mdl-textfield__error {
+    visibility: visible; }
+
+.mdl-textfield__expandable-holder {
+  display: inline-block;
+  position: relative;
+  margin-left: 32px;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  display: inline-block;
+  max-width: 0.1px; }
+  .mdl-textfield.is-focused .mdl-textfield__expandable-holder, .mdl-textfield.is-dirty .mdl-textfield__expandable-holder {
+    max-width: 600px; }
+  .mdl-textfield__expandable-holder .mdl-textfield__label:after {
+    bottom: 0; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+.mdl-tooltip {
+  transform: scale(0);
+  transform-origin: top center;
+  will-change: transform;
+  z-index: 999;
+  background: #353535;
+  border-radius: 2px;
+  color: rgb(255,255,255);
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 14px;
+  max-width: 170px;
+  position: fixed;
+  top: -500px;
+  left: -500px;
+  padding: 8px;
+  text-align: center; }
+
+.mdl-tooltip.is-active {
+  animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards; }
+
+.mdl-tooltip--large {
+  line-height: 14px;
+  font-size: 14px;
+  padding: 16px; }
+
+@keyframes pulse {
+  0% {
+    transform: scale(0);
+    opacity: 0; }
+  50% {
+    transform: scale(0.99); }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+    visibility: visible; } }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-shadow--2dp {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
+
+.mdl-shadow--3dp {
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); }
+
+.mdl-shadow--4dp {
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }
+
+.mdl-shadow--6dp {
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); }
+
+.mdl-shadow--8dp {
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); }
+
+.mdl-shadow--16dp {
+  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); }
+
+.mdl-shadow--24dp {
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+* NOTE: Some rules here are applied using duplicate selectors.
+* This is on purpose to increase their specificity when applied.
+* For example: `.mdl-cell--1-col-phone.mdl-cell--1-col-phone`
+*/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------*    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ==========  TYPOGRAPHY  ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+   page loading. For important text, such as the body, we want it to load
+   immediately and not wait for the web font load, whereas for other sections,
+   such as headers and titles, we're OK with things taking a bit longer to load.
+   We do have some optional classes and parameters in the mixins, in case you
+   definitely want to make sure you're using the preferred font and don't mind
+   the performance hit.
+   We should be able to improve on this once CSS Font Loading L3 becomes more
+   widely available.
+*/
+/* ==========  COLORS  ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  Color Palettes  ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ==========  IMAGES  ========== */
+/* ==========  Color & Themes  ========== */
+/* ==========  Typography  ========== */
+/* ==========  Components  ========== */
+/* ==========  Standard Buttons  ========== */
+/* ==========  Icon Toggles  ========== */
+/* ==========  Radio Buttons  ========== */
+/* ==========  Ripple effect  ========== */
+/* ==========  Layout  ========== */
+/* ==========  Content Tabs  ========== */
+/* ==========  Checkboxes  ========== */
+/* ==========  Switches  ========== */
+/* ==========  Spinner  ========== */
+/* ==========  Text fields  ========== */
+/* ==========  Card  ========== */
+/* ==========  Sliders ========== */
+/* ========== Progress ========== */
+/* ==========  List ========== */
+/* ==========  Item ========== */
+/* ==========  Dropdown menu ========== */
+/* ==========  Tooltips  ========== */
+/* ==========  Footer  ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+.mdl-grid {
+  display: flex;
+  flex-flow: row wrap;
+  margin: 0 auto 0 auto;
+  align-items: stretch; }
+  .mdl-grid.mdl-grid--no-spacing {
+    padding: 0; }
+
+.mdl-cell {
+  box-sizing: border-box; }
+
+.mdl-cell--top {
+  align-self: flex-start; }
+
+.mdl-cell--middle {
+  align-self: center; }
+
+.mdl-cell--bottom {
+  align-self: flex-end; }
+
+.mdl-cell--stretch {
+  align-self: stretch; }
+
+.mdl-grid.mdl-grid--no-spacing > .mdl-cell {
+  margin: 0; }
+
+.mdl-cell--order-1 {
+  order: 1; }
+
+.mdl-cell--order-2 {
+  order: 2; }
+
+.mdl-cell--order-3 {
+  order: 3; }
+
+.mdl-cell--order-4 {
+  order: 4; }
+
+.mdl-cell--order-5 {
+  order: 5; }
+
+.mdl-cell--order-6 {
+  order: 6; }
+
+.mdl-cell--order-7 {
+  order: 7; }
+
+.mdl-cell--order-8 {
+  order: 8; }
+
+.mdl-cell--order-9 {
+  order: 9; }
+
+.mdl-cell--order-10 {
+  order: 10; }
+
+.mdl-cell--order-11 {
+  order: 11; }
+
+.mdl-cell--order-12 {
+  order: 12; }
+
+@media (max-width: 1151px) {
+  .mdl-grid {
+    padding: 0px; }
+  .mdl-cell {
+    margin: 16px;
+    width: calc(100% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell {
+      width: 100%; }
+  .mdl-cell--hide-phone {
+    display: none !important; }
+  .mdl-cell--order-1-phone.mdl-cell--order-1-phone {
+    order: 1; }
+  .mdl-cell--order-2-phone.mdl-cell--order-2-phone {
+    order: 2; }
+  .mdl-cell--order-3-phone.mdl-cell--order-3-phone {
+    order: 3; }
+  .mdl-cell--order-4-phone.mdl-cell--order-4-phone {
+    order: 4; }
+  .mdl-cell--order-5-phone.mdl-cell--order-5-phone {
+    order: 5; }
+  .mdl-cell--order-6-phone.mdl-cell--order-6-phone {
+    order: 6; }
+  .mdl-cell--order-7-phone.mdl-cell--order-7-phone {
+    order: 7; }
+  .mdl-cell--order-8-phone.mdl-cell--order-8-phone {
+    order: 8; }
+  .mdl-cell--order-9-phone.mdl-cell--order-9-phone {
+    order: 9; }
+  .mdl-cell--order-10-phone.mdl-cell--order-10-phone {
+    order: 10; }
+  .mdl-cell--order-11-phone.mdl-cell--order-11-phone {
+    order: 11; }
+  .mdl-cell--order-12-phone.mdl-cell--order-12-phone {
+    order: 12; }
+  .mdl-cell--1-col,
+  .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
+    width: calc(25% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
+    .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
+      width: 25%; }
+  .mdl-cell--2-col,
+  .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
+    width: calc(50% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
+    .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
+      width: 50%; }
+  .mdl-cell--3-col,
+  .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
+    width: calc(75% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
+    .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
+      width: 75%; }
+  .mdl-cell--4-col,
+  .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
+    width: calc(100% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
+    .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
+      width: 100%; }
+  .mdl-cell--5-col,
+  .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
+    width: calc(100% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
+    .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
+      width: 100%; }
+  .mdl-cell--6-col,
+  .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
+    width: calc(100% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
+    .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
+      width: 100%; }
+  .mdl-cell--7-col,
+  .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
+    width: calc(100% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
+    .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
+      width: 100%; }
+  .mdl-cell--8-col,
+  .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
+    width: calc(100% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
+    .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
+      width: 100%; }
+  .mdl-cell--9-col,
+  .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
+    width: calc(100% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
+    .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
+      width: 100%; }
+  .mdl-cell--10-col,
+  .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
+    width: calc(100% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
+    .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
+      width: 100%; }
+  .mdl-cell--11-col,
+  .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
+    width: calc(100% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
+    .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
+      width: 100%; }
+  .mdl-cell--12-col,
+  .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
+    width: calc(100% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
+    .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
+      width: 100%; }
+  .mdl-cell--1-offset,
+  .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
+    margin-left: calc(25% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
+      margin-left: 25%; }
+  .mdl-cell--2-offset,
+  .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
+    margin-left: calc(50% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
+      margin-left: 50%; }
+  .mdl-cell--3-offset,
+  .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
+    margin-left: calc(75% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
+      margin-left: 75%; } }
+
+@media (min-width: 1152px) and (max-width: 1919px) {
+  .mdl-grid {
+    padding: 0px; }
+  .mdl-cell {
+    margin: 16px;
+    width: calc(33.33333% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell {
+      width: 33.33333%; }
+  .mdl-cell--hide-tablet {
+    display: none !important; }
+  .mdl-cell--order-1-tablet.mdl-cell--order-1-tablet {
+    order: 1; }
+  .mdl-cell--order-2-tablet.mdl-cell--order-2-tablet {
+    order: 2; }
+  .mdl-cell--order-3-tablet.mdl-cell--order-3-tablet {
+    order: 3; }
+  .mdl-cell--order-4-tablet.mdl-cell--order-4-tablet {
+    order: 4; }
+  .mdl-cell--order-5-tablet.mdl-cell--order-5-tablet {
+    order: 5; }
+  .mdl-cell--order-6-tablet.mdl-cell--order-6-tablet {
+    order: 6; }
+  .mdl-cell--order-7-tablet.mdl-cell--order-7-tablet {
+    order: 7; }
+  .mdl-cell--order-8-tablet.mdl-cell--order-8-tablet {
+    order: 8; }
+  .mdl-cell--order-9-tablet.mdl-cell--order-9-tablet {
+    order: 9; }
+  .mdl-cell--order-10-tablet.mdl-cell--order-10-tablet {
+    order: 10; }
+  .mdl-cell--order-11-tablet.mdl-cell--order-11-tablet {
+    order: 11; }
+  .mdl-cell--order-12-tablet.mdl-cell--order-12-tablet {
+    order: 12; }
+  .mdl-cell--1-col,
+  .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
+    width: calc(8.33333% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
+    .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
+      width: 8.33333%; }
+  .mdl-cell--2-col,
+  .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
+    width: calc(16.66667% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
+    .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
+      width: 16.66667%; }
+  .mdl-cell--3-col,
+  .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
+    width: calc(25% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
+    .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
+      width: 25%; }
+  .mdl-cell--4-col,
+  .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
+    width: calc(33.33333% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
+    .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
+      width: 33.33333%; }
+  .mdl-cell--5-col,
+  .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
+    width: calc(41.66667% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
+    .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
+      width: 41.66667%; }
+  .mdl-cell--6-col,
+  .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
+    width: calc(50% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
+    .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
+      width: 50%; }
+  .mdl-cell--7-col,
+  .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
+    width: calc(58.33333% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
+    .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
+      width: 58.33333%; }
+  .mdl-cell--8-col,
+  .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
+    width: calc(66.66667% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
+    .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
+      width: 66.66667%; }
+  .mdl-cell--9-col,
+  .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
+    width: calc(75% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
+    .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
+      width: 75%; }
+  .mdl-cell--10-col,
+  .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
+    width: calc(83.33333% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
+    .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
+      width: 83.33333%; }
+  .mdl-cell--11-col,
+  .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
+    width: calc(91.66667% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
+    .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
+      width: 91.66667%; }
+  .mdl-cell--12-col,
+  .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
+    width: calc(100% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
+    .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
+      width: 100%; }
+  .mdl-cell--1-offset,
+  .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
+    margin-left: calc(8.33333% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
+      margin-left: 8.33333%; }
+  .mdl-cell--2-offset,
+  .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
+    margin-left: calc(16.66667% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
+      margin-left: 16.66667%; }
+  .mdl-cell--3-offset,
+  .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
+    margin-left: calc(25% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
+      margin-left: 25%; }
+  .mdl-cell--4-offset,
+  .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
+    margin-left: calc(33.33333% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
+      margin-left: 33.33333%; }
+  .mdl-cell--5-offset,
+  .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
+    margin-left: calc(41.66667% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
+      margin-left: 41.66667%; }
+  .mdl-cell--6-offset,
+  .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
+    margin-left: calc(50% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
+      margin-left: 50%; }
+  .mdl-cell--7-offset,
+  .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
+    margin-left: calc(58.33333% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
+      margin-left: 58.33333%; }
+  .mdl-cell--8-offset,
+  .mdl-cell--8-offset-tablet.mdl-cell--8-offset-tablet {
+    margin-left: calc(66.66667% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--8-offset-tablet.mdl-cell--8-offset-tablet {
+      margin-left: 66.66667%; }
+  .mdl-cell--9-offset,
+  .mdl-cell--9-offset-tablet.mdl-cell--9-offset-tablet {
+    margin-left: calc(75% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--9-offset-tablet.mdl-cell--9-offset-tablet {
+      margin-left: 75%; }
+  .mdl-cell--10-offset,
+  .mdl-cell--10-offset-tablet.mdl-cell--10-offset-tablet {
+    margin-left: calc(83.33333% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--10-offset-tablet.mdl-cell--10-offset-tablet {
+      margin-left: 83.33333%; }
+  .mdl-cell--11-offset,
+  .mdl-cell--11-offset-tablet.mdl-cell--11-offset-tablet {
+    margin-left: calc(91.66667% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--11-offset-tablet.mdl-cell--11-offset-tablet {
+      margin-left: 91.66667%; } }
+
+@media (min-width: 1920px) {
+  .mdl-grid {
+    padding: 0px; }
+  .mdl-cell {
+    margin: 16px;
+    width: calc(33.33333% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell {
+      width: 33.33333%; }
+  .mdl-cell--hide-desktop {
+    display: none !important; }
+  .mdl-cell--order-1-desktop.mdl-cell--order-1-desktop {
+    order: 1; }
+  .mdl-cell--order-2-desktop.mdl-cell--order-2-desktop {
+    order: 2; }
+  .mdl-cell--order-3-desktop.mdl-cell--order-3-desktop {
+    order: 3; }
+  .mdl-cell--order-4-desktop.mdl-cell--order-4-desktop {
+    order: 4; }
+  .mdl-cell--order-5-desktop.mdl-cell--order-5-desktop {
+    order: 5; }
+  .mdl-cell--order-6-desktop.mdl-cell--order-6-desktop {
+    order: 6; }
+  .mdl-cell--order-7-desktop.mdl-cell--order-7-desktop {
+    order: 7; }
+  .mdl-cell--order-8-desktop.mdl-cell--order-8-desktop {
+    order: 8; }
+  .mdl-cell--order-9-desktop.mdl-cell--order-9-desktop {
+    order: 9; }
+  .mdl-cell--order-10-desktop.mdl-cell--order-10-desktop {
+    order: 10; }
+  .mdl-cell--order-11-desktop.mdl-cell--order-11-desktop {
+    order: 11; }
+  .mdl-cell--order-12-desktop.mdl-cell--order-12-desktop {
+    order: 12; }
+  .mdl-cell--1-col,
+  .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
+    width: calc(8.33333% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
+    .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
+      width: 8.33333%; }
+  .mdl-cell--2-col,
+  .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
+    width: calc(16.66667% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
+    .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
+      width: 16.66667%; }
+  .mdl-cell--3-col,
+  .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
+    width: calc(25% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
+    .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
+      width: 25%; }
+  .mdl-cell--4-col,
+  .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
+    width: calc(33.33333% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
+    .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
+      width: 33.33333%; }
+  .mdl-cell--5-col,
+  .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
+    width: calc(41.66667% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
+    .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
+      width: 41.66667%; }
+  .mdl-cell--6-col,
+  .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
+    width: calc(50% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
+    .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
+      width: 50%; }
+  .mdl-cell--7-col,
+  .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
+    width: calc(58.33333% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
+    .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
+      width: 58.33333%; }
+  .mdl-cell--8-col,
+  .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
+    width: calc(66.66667% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
+    .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
+      width: 66.66667%; }
+  .mdl-cell--9-col,
+  .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
+    width: calc(75% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
+    .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
+      width: 75%; }
+  .mdl-cell--10-col,
+  .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
+    width: calc(83.33333% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
+    .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
+      width: 83.33333%; }
+  .mdl-cell--11-col,
+  .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
+    width: calc(91.66667% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
+    .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
+      width: 91.66667%; }
+  .mdl-cell--12-col,
+  .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
+    width: calc(100% - 32px); }
+    .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
+    .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
+      width: 100%; }
+  .mdl-cell--1-offset,
+  .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
+    margin-left: calc(8.33333% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
+      margin-left: 8.33333%; }
+  .mdl-cell--2-offset,
+  .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
+    margin-left: calc(16.66667% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
+      margin-left: 16.66667%; }
+  .mdl-cell--3-offset,
+  .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
+    margin-left: calc(25% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
+      margin-left: 25%; }
+  .mdl-cell--4-offset,
+  .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
+    margin-left: calc(33.33333% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
+      margin-left: 33.33333%; }
+  .mdl-cell--5-offset,
+  .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
+    margin-left: calc(41.66667% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
+      margin-left: 41.66667%; }
+  .mdl-cell--6-offset,
+  .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
+    margin-left: calc(50% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
+      margin-left: 50%; }
+  .mdl-cell--7-offset,
+  .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
+    margin-left: calc(58.33333% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
+      margin-left: 58.33333%; }
+  .mdl-cell--8-offset,
+  .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
+    margin-left: calc(66.66667% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
+      margin-left: 66.66667%; }
+  .mdl-cell--9-offset,
+  .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
+    margin-left: calc(75% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
+      margin-left: 75%; }
+  .mdl-cell--10-offset,
+  .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
+    margin-left: calc(83.33333% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
+      margin-left: 83.33333%; }
+  .mdl-cell--11-offset,
+  .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
+    margin-left: calc(91.66667% + 16px); }
+    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset, .mdl-grid.mdl-grid--no-spacing >
+    .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
+      margin-left: 91.66667%; } }
+
+.mdl-layout {
+  background: #202020; }
+
+main {
+  background: url("../images/Dark_background_1920x1080.png") center top no-repeat;
+  background-size: cover;
+  margin-right: -18px; }
+
+.mdl-layout__header {
+  width: 100% !important;
+  margin-left: 0 !important; }
+
+.mdl-layout__drawer {
+  border: none; }
+  .mdl-layout__drawer header {
+    text-align: center;
+    text-transform: uppercase;
+    color: rgb(255, 255, 255);
+    height: 64px;
+    line-height: 64px;
+    background: rgba(0, 0, 0,0.85);
+    font-size: 25px;
+    font-weight: 500;
+    letter-spacing: 1px; }
+  .mdl-layout__drawer .mdl-navigation {
+    flex-grow: 1;
+    padding-top: 48px;
+    padding-bottom: 8px; }
+    .mdl-layout__drawer .mdl-navigation .mdl-layout-spacer {
+      border-bottom: 1px solid rgba(255,255,255, 0.1);
+      margin-bottom: 8px; }
+    .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
+      font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+      font-size: 13px;
+      font-weight: 500;
+      padding: 12px 0;
+      position: relative; }
+      .mdl-layout__drawer .mdl-navigation .mdl-navigation__link .material-icons {
+        font-size: 22px;
+        width: 22px; }
+      .mdl-layout__drawer .mdl-navigation .mdl-navigation__link .material-icons {
+        margin: -3px 25px 0 23px;
+        color: rgba(255, 255, 255, 0.56); }
+      .mdl-layout__drawer .mdl-navigation .mdl-navigation__link--current {
+        border-left: 2px solid rgb(0, 188, 212); }
+        .mdl-layout__drawer .mdl-navigation .mdl-navigation__link--current .material-icons {
+          color: rgb(0, 188, 212); }
+      .mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover {
+        color: rgb(0, 188, 212); }
+        .mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover .material-icons {
+          color: rgb(0, 188, 212); }
+
+.mdl-layout__header-row {
+  color: rgba(255, 255, 255, 0.8); }
+  .mdl-layout__header-row .avatar-dropdown {
+    cursor: pointer;
+    margin: 0 10px;
+    padding: 0 20px;
+    line-height: 64px; }
+    .mdl-layout__header-row .avatar-dropdown:hover {
+      background: rgba(0, 0, 0, 0.3); }
+    .mdl-layout__header-row .avatar-dropdown > img {
+      width: 32px;
+      height: 32px; }
+    .mdl-layout__header-row .avatar-dropdown > span {
+      color: rgba(255, 255, 255, 0.5);
+      padding-right: 16px; }
+  .mdl-layout__header-row .mdl-textfield {
+    padding: 23px 0; }
+  .mdl-layout__header-row .mdl-button--icon:hover {
+    background: rgba(0, 0, 0, 0.3); }
+  .mdl-layout__header-row .material-icons.mdl-badge {
+    margin: 10px;
+    cursor: pointer;
+    overflow: visible;
+    text-align: center;
+    height: 24px;
+    width: 24px;
+    min-width: 0;
+    padding: 4px 4px; }
+    .mdl-layout__header-row .material-icons.mdl-badge:hover {
+      background: rgba(0, 0, 0, 0.3); }
+    .mdl-layout__header-row .material-icons.mdl-badge.mdl-badge--overlap:after {
+      top: -3px;
+      right: -8px; }
+
+@media screen and (max-width: 1440px) {
+  .mdl-layout--fixed-drawer > .mdl-layout__content {
+    margin-left: 0; }
+  .mdl-layout--fixed-drawer > .mdl-layout__drawer {
+    transform: translateX(-246px); }
+    .mdl-layout--fixed-drawer > .mdl-layout__drawer.is-visible {
+      transform: translateX(0) !important; }
+  .mdl-layout--fixed-drawer > .mdl-layout__drawer header {
+    height: 56px;
+    line-height: 56px; }
+  .mdl-layout__header-row .avatar-dropdown {
+    line-height: 56px; } }
+
+@media screen and (max-width: 799px) {
+  .mdl-grid > .mdl-grid .mdl-cell {
+    width: 100% !important; }
+  .mdl-layout__header-row .message, .mdl-layout__header-row .notification {
+    display: none; } }
+
+.mdl-card__title {
+  background-color: rgba(0, 0, 0, 0.3); }
+
+.mdl-card__supporting-text {
+  width: calc(100% - 32px); }
+
+.mdl-card__actions {
+  background-color: rgba(255, 255, 255,0.05); }
+
+.mdl-menu {
+  width: 310px; }
+  .mdl-menu .mdl-menu__item.mdl-list__item {
+    display: flex; }
+
+.mdl-menu__outline {
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }
+
+.mdl-checkbox__tick-outline {
+  -webkit-mask: url("../images/tick-mask.svg"); }
+
+.mdl-button {
+  font-weight: 400;
+  padding-top: 1px; }
+  .mdl-button.mdl-button--mini-icon .mdl-button--colored {
+    color: rgb(255, 82, 82); }
+  .mdl-button.mdl-button--mini-icon .material-icons {
+    top: 50% !important;
+    left: 50% !important;
+    font-size: 20px; }
+
+.mdl-card__actions .mdl-button--fab {
+  position: absolute;
+  right: 24px;
+  bottom: 24px;
+  z-index: 99; }
+
+a {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 16px;
+  font-weight: 300;
+  color: rgb(0, 188, 212);
+  text-decoration: none; }
+
+.mdl-textfield {
+  width: auto; }
+  .mdl-textfield .mdl-textfield__input {
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif; }
+
+.mdl-progress {
+  min-width: 100px;
+  width: auto; }
+  .mdl-progress > .bufferbar {
+    background-image: none;
+    background-color: rgba(255, 255, 255, 0.4); }
+  .mdl-progress:focus {
+    outline: none; }
+
+.mdl-data-table {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 300;
+  background-color: #4e4e4e;
+  color: rgb(255, 255, 255);
+  border: none; }
+  .mdl-data-table tr:last-child td {
+    border: none; }
+  .mdl-data-table td:first-of-type, .mdl-data-table th:first-of-type {
+    padding-left: 16px; }
+  .mdl-data-table td:last-of-type, .mdl-data-table th:last-of-type {
+    padding-right: 16px; }
+  .mdl-data-table tr:hover {
+    background-clip: padding-box; }
+
+.label {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: white;
+  border-radius: 2px;
+  height: 12px;
+  padding: 5px 8px 5px 8px;
+  margin: 0;
+  margin-left: auto;
+  font-size: 12px;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 300;
+  line-height: 1em; }
+  .label--mini {
+    padding: 3px 8px 2px;
+    cursor: pointer;
+    vertical-align: middle; }
+  .label--transparent {
+    background-color: transparent;
+    padding: 0; }
+
+.projects-table {
+  width: 100%; }
+  .projects-table tbody td:nth-child(1) {
+    width: 1px; }
+  .projects-table tbody td:nth-child(2) {
+    width: 300px; }
+  .projects-table tbody td:nth-child(3) {
+    width: 240px; }
+  .projects-table tbody td:nth-child(4) {
+    width: 300px; }
+  .projects-table tbody td:nth-child(5) {
+    width: 200px; }
+  .projects-table tbody td:nth-child(6) {
+    width: 300px; }
+    .projects-table tbody td:nth-child(6) .mdl-progress {
+      cursor: pointer;
+      min-width: 80px;
+      max-width: 200px; }
+  .projects-table tbody .task-done {
+    padding-top: 6px !important;
+    padding-bottom: 0 !important;
+    color: rgb(255, 82, 82); }
+    .projects-table tbody .task-done .material-icons {
+      cursor: pointer; }
+
+@media screen and (max-width: 848px) {
+  .projects-table {
+    display: none; } }
+
+.mdl-tooltip {
+  padding: 5px 8px;
+  border: none; }
+
+.notifications-dropdown.mdl-list .mdl-list__item {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  font-weight: 100;
+  color: white; }
+  .notifications-dropdown.mdl-list .mdl-list__item:first-child {
+    color: rgba(255, 255, 255, 0.8); }
+  .notifications-dropdown.mdl-list .mdl-list__item .mdl-list__item-avatar {
+    padding: 4px;
+    text-align: center; }
+    .notifications-dropdown.mdl-list .mdl-list__item .mdl-list__item-avatar .material-icons {
+      vertical-align: top; }
+  .notifications-dropdown.mdl-list .mdl-list__item:last-child {
+    padding-top: 8px;
+    padding-bottom: 0; }
+
+.trending .mdl-card__supporting-text {
+  width: 100%;
+  padding: 8px 0; }
+
+.trending .mdl-list__item:hover {
+  background-color: rgba(0, 0, 0, 0.2); }
+
+.trending .mdl-list__item .mdl-list__item-secondary-content {
+  margin: 0; }
+
+.trending .material-icons {
+  line-height: 0.33333;
+  font-size: 48px; }
+
+.trending__arrow-up {
+  color: rgb(0, 188, 212); }
+
+.trending__arrow-down {
+  color: rgb(255, 82, 82); }
+
+.trending__percent {
+  text-align: right;
+  width: 40px; }
+
+.messages-dropdown .label {
+  color: rgba(255, 255, 255, 0.5); }
+
+.messages-dropdown .mdl-list__item-primary-content {
+  font-weight: 400;
+  line-height: 18px; }
+  .messages-dropdown .mdl-list__item-primary-content .mdl-list__item-avatar {
+    padding: 4px;
+    text-align: center; }
+    .messages-dropdown .mdl-list__item-primary-content .mdl-list__item-avatar .material-icons {
+      vertical-align: top; }
+    .messages-dropdown .mdl-list__item-primary-content .mdl-list__item-avatar text {
+      font-size: 19px;
+      vertical-align: middle; }
+  .messages-dropdown .mdl-list__item-primary-content .mdl-list__item-sub-title {
+    font-weight: 100;
+    font-size: 12px; }
+
+.messages-dropdown.mdl-list .mdl-list__item {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  font-weight: 100;
+  color: white; }
+  .messages-dropdown.mdl-list .mdl-list__item:first-child {
+    color: rgba(255, 255, 255, 0.8); }
+  .messages-dropdown.mdl-list .mdl-list__item:last-child {
+    padding-top: 8px;
+    padding-bottom: 0; }
+
+.mdl-list {
+  margin: 0; }
+  .mdl-list .mdl-list__item {
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-size: 16px;
+    font-weight: 300;
+    color: white;
+    letter-spacing: 0; }
+  .mdl-list .list__item--border-top {
+    background-clip: padding-box;
+    border-top: 1px solid rgba(255, 255, 255,0.1); }
+
+.todo .mdl-card__supporting-text {
+  width: 100%;
+  padding: 0;
+  min-height: 70px; }
+  .todo .mdl-card__supporting-text .mdl-list__item {
+    align-items: flex-start;
+    padding-bottom: 0; }
+    .todo .mdl-card__supporting-text .mdl-list__item .mdl-list__item-primary-content {
+      max-width: 100%;
+      word-wrap: break-word; }
+    .todo .mdl-card__supporting-text .mdl-list__item .material-icons {
+      visibility: hidden; }
+    .todo .mdl-card__supporting-text .mdl-list__item:hover .material-icons {
+      visibility: visible; }
+  .todo .mdl-card__supporting-text .mdl-checkbox {
+    height: auto;
+    padding-left: 36px; }
+  .todo .mdl-card__supporting-text .mdl-textfield {
+    width: 100%;
+    padding: 0; }
+  .todo .mdl-card__supporting-text .mdl-textfield__input {
+    padding: 2px 0; }
+  .todo .mdl-card__supporting-text .mdl-textfield__label {
+    color: rgba(255, 255, 255, 0.2);
+    top: 0; }
+    .todo .mdl-card__supporting-text .mdl-textfield__label:after {
+      background-color: rgba(255, 255, 255, 0.7);
+      bottom: 0; }
+
+.todo .mdl-card__actions {
+  margin-top: 20px; }
+
+.pie-chart__container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+  min-height: 228px; }
+  .pie-chart__container svg {
+    min-height: 200px;
+    max-width: 180px; }
+    .pie-chart__container svg .nvd3.nv-pie path {
+      fill-opacity: 1;
+      stroke-width: 0; }
+    .pie-chart__container svg .nvd3.nv-pie .nv-pie-title {
+      font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+      fill: rgb(255,255,255);
+      font-weight: 300;
+      font-size: 22px !important; }
+  .pie-chart__container .legend {
+    max-width: 140px; }
+
+.line-chart__container {
+  min-height: 280px; }
+  .line-chart__container svg {
+    height: 280px;
+    width: 100%; }
+    .line-chart__container svg .y-axis-label, .line-chart__container svg .x-axis-label {
+      font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+      font-size: 12px;
+      font-weight: 300;
+      fill: rgba(255, 255, 255,0.5); }
+    .line-chart__container svg .nv-lineChart .nv-guideline {
+      stroke: rgba(255, 255, 255,0.5);
+      stroke-width: 0.5px; }
+    .line-chart__container svg .nv-lineChart .tick {
+      opacity: 0.1 !important; }
+      .line-chart__container svg .nv-lineChart .tick.zero {
+        opacity: 0.5 !important; }
+        .line-chart__container svg .nv-lineChart .tick.zero line {
+          stroke-opacity: 1 !important; }
+    .line-chart__container svg .nv-lineChart .nv-y .domain {
+      stroke-opacity: 0 !important; }
+    .line-chart__container svg .nv-lineChart .nvd3.nv-scatter .nv-groups .nv-point.hover {
+      stroke-width: 5px; }
+  .line-chart__container .legend {
+    margin: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 16px; }
+
+.legend .legend__item {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  color: rgb(255,255,255);
+  margin: 8px 18px;
+  display: inline-block; }
+  .legend .legend__item .legend__text {
+    margin-left: 24px; }
+  .legend .legend__item .legend__mark {
+    width: 8px;
+    height: 8px;
+    margin-top: 4px; }
+
+.account-dropdown .mdl-list__item {
+  font-size: 14px; }
+  .account-dropdown .mdl-list__item:first-child {
+    font-size: 16px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    height: 64px; }
+    .account-dropdown .mdl-list__item:first-child .mdl-list__item-primary-content {
+      height: 48px;
+      line-height: 28px; }
+      .account-dropdown .mdl-list__item:first-child .mdl-list__item-primary-content .mdl-list__item-avatar {
+        height: 48px;
+        width: 48px;
+        background: url("../images/Icon.png");
+        background-size: cover; }
+      .account-dropdown .mdl-list__item:first-child .mdl-list__item-primary-content .mdl-list__item-sub-title {
+        font-weight: 300; }
+  .account-dropdown .mdl-list__item:hover .mdl-list__item-icon {
+    color: rgb(0, 188, 212); }
+
+.account-dropdown .list__item--border-top {
+  margin-top: 8px;
+  padding-top: 8px; }
+
+.settings-dropdown {
+  width: 135px; }
+  .settings-dropdown .mdl-menu__item, .settings-dropdown a {
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-size: 14px;
+    font-weight: 100;
+    color: white; }
+
+.robot {
+  height: 450px; }
+  .robot .mdl-card__supporting-text {
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-size: 16px;
+    font-weight: 300;
+    padding-bottom: 26px; }
+  .robot .mdl-card__title {
+    background: url("../images/robot.png") center center no-repeat;
+    background-size: cover; }
+    .robot .mdl-card__title .mdl-card__title-text {
+      color: rgb(255, 255, 255); }
+
+.cotoneaster {
+  height: 430px; }
+  .cotoneaster .mdl-card__supporting-text {
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-size: 16px;
+    font-weight: 300;
+    padding-bottom: 26px; }
+  .cotoneaster .mdl-card__title {
+    background: url("../images/cotoneaster.jpg") center center no-repeat;
+    background-size: cover; }
+    .cotoneaster .mdl-card__title .mdl-card__title-text {
+      color: rgb(255, 255, 255); }
+
+@media screen and (max-width: 1151px) {
+  .cotoneaster {
+    height: 329px; } }
+
+.weather {
+  height: 329px; }
+  .weather .mdl-card__supporting-text {
+    color: rgba(255, 255, 255, 0.8);
+    background: url("../images/weather_bck.png") center center no-repeat;
+    background-size: cover;
+    text-align: right;
+    padding-top: 38px;
+    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4); }
+    .weather .mdl-card__supporting-text .weather-temperature {
+      font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+      font-size: 100px;
+      line-height: 1;
+      color: rgba(255, 255, 255, 0.9); }
+      .weather .mdl-card__supporting-text .weather-temperature sup {
+        position: relative;
+        top: 13px; }
+    .weather .mdl-card__supporting-text .weather-description {
+      font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+      font-size: 18px;
+      font-weight: 300;
+      position: relative; }
+      .weather .mdl-card__supporting-text .weather-description:before {
+        width: 35px;
+        position: absolute;
+        right: 150px;
+        content: url(../images/cloudy_and_snow.svg); }
+  .weather .mdl-card__title .mdl-card__subtitle-text {
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-size: 16px;
+    font-weight: 300; }
+    .weather .mdl-card__title .mdl-card__subtitle-text .material-icons {
+      font-size: 16px;
+      top: 2px;
+      position: relative; }
+
+.employer-form {
+  padding: 0;
+  width: 670px;
+  background-color: #4e4e4e;
+  margin: 16px auto; }
+  .employer-form .mdl-radio {
+    width: 20%;
+    margin-top: 22px;
+    margin-bottom: 22px;
+    color: white; }
+    .employer-form .mdl-radio span:first-of-type {
+      margin-left: 10px; }
+  .employer-form .form__article > span {
+    float: left;
+    width: 100%;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 200; }
+  .employer-form .mdl-card__title {
+    background-color: "255,64,129";
+    height: 66px;
+    width: 100%;
+    padding-top: 16px;
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-bottom: 0;
+    display: block;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif; }
+    .employer-form .mdl-card__title h2:first-of-type {
+      font-size: 24px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 0.8);
+      line-height: 1.2em;
+      margin-top: 0;
+      margin-bottom: 0; }
+    .employer-form .mdl-card__title .mdl-card__subtitle {
+      font-size: 13px;
+      font-weight: 300;
+      color: rgba(255, 255, 255, 0.2);
+      line-height: 1.2em; }
+  .employer-form button.mdl-button.mdl-button--colored {
+    width: 68px;
+    height: 32px;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-size: 13px;
+    line-height: 13px;
+    font-weight: 400;
+    color: white;
+    background-color: rgb(0, 188, 212); }
+    .employer-form button.mdl-button.mdl-button--colored:disabled {
+      background-color: gray;
+      color: rgba(255, 255, 255, 0.6); }
+  .employer-form label {
+    font-size: 15px;
+    color: rgba(255, 255, 255, 0.6); }
+  .employer-form .form__action .mdl-checkbox .mdl-ripple {
+    background: rgb(0, 188, 212); }
+  .employer-form .form__action .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
+    border-color: rgb(0, 188, 212); }
+    .employer-form .form__action .mdl-checkbox.is-checked .mdl-checkbox__box-outline .mdl-checkbox__tick-outline {
+      background-color: rgb(0, 188, 212);
+      background-image: url("../images/tick_dark.svg?embed"); }
+
+.employer-form__general_skills {
+  margin-top: 24px; }
+  .employer-form__general_skills div {
+    width: 100%; }
+  .employer-form__general_skills h3 {
+    margin-bottom: 0;
+    margin-top: 0; }
+  .employer-form__general_skills .mdl-textfield label {
+    color: rgba(255, 255, 255, 0.6); }
+  .employer-form__general_skills .mdl-textfield--floating-label.is-focused .mdl-textfield__label {
+    color: rgb(0, 188, 212); }
+  .employer-form__general_skills textarea {
+    height: 90px; }
+
+.employer-form__contacts h3 {
+  margin-bottom: 40px; }
+
+.employer-form__contacts div .mdl-textfield.getmdl-select .mdl-textfield__input {
+  color: rgba(255, 255, 255, 0.6); }
+
+.employer-form__contacts div .mdl-textfield {
+  padding-top: 0; }
+  .employer-form__contacts div .mdl-textfield label {
+    top: 4px;
+    font-weight: 300; }
+
+.employer-form__contacts div i {
+  color: white; }
+
+.form .mdl-grid {
+  padding: 0; }
+
+.form .mdl-cell {
+  margin: 0;
+  padding-right: 30px; }
+  .form .mdl-cell.mdl-textfield.is-focused .mdl-textfield__label:after {
+    width: calc(100% - 30px); }
+  .form .mdl-cell:last-of-type {
+    padding-right: 0; }
+    .form .mdl-cell:last-of-type.mdl-textfield.is-focused .mdl-textfield__label:after {
+      width: 100%; }
+
+.form .mdl-cell--1-col {
+  width: calc(100% * 1 / 12); }
+
+.form .mdl-cell--2-col {
+  width: calc(100% * 2 / 12); }
+
+.form .mdl-cell--3-col {
+  width: calc(100% * 3 / 12); }
+
+.form .mdl-cell--4-col {
+  width: calc(100% * 4 / 12); }
+
+.form .mdl-cell--5-col {
+  width: calc(100% * 5 / 12); }
+
+.form .mdl-cell--6-col {
+  width: calc(100% * 6 / 12); }
+
+.form .mdl-cell--7-col {
+  width: calc(100% * 7 / 12); }
+
+.form .mdl-cell--8-col {
+  width: calc(100% * 8 / 12); }
+
+.form .mdl-cell--9-col {
+  width: calc(100% * 9 / 12); }
+
+.form .mdl-cell--10-col {
+  width: calc(100% * 10 / 12); }
+
+.form .mdl-cell--11-col {
+  width: calc(100% * 11 / 12); }
+
+.form .mdl-cell--12-col {
+  width: 100%; }
+
+.form__article h3 {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 20px;
+  font-weight: 300;
+  color: rgba(255, 255, 255, 0.6);
+  margin-top: 4px;
+  margin-bottom: 20px; }
+
+.form__action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 60px; }
+  .form__action .mdl-checkbox {
+    width: auto; }
+    .form__action .mdl-checkbox .mdl-checkbox__label {
+      margin-left: 10px;
+      font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+      color: white;
+      font-size: 16px;
+      font-weight: 300; }
+  .form__action .mdl-button {
+    padding: 0; }
+
+.input-group > i {
+  margin-right: 15px;
+  margin-top: 4px;
+  margin-left: 5px;
+  font-size: 20px; }
+
+.input-group img {
+  margin-top: 4px;
+  margin-left: 5px;
+  margin-right: 16px;
+  height: 18px;
+  width: 18px;
+  float: left; }
+
+.input-group label {
+  margin-top: 4px; }
+
+.input-group .mdl-textfield {
+  width: calc(100% - 40.5px); }
+
+.pull-right {
+  float: right; }
+
+.pull-left {
+  float: left; }
+
+.background-color--primary {
+  background-color: rgba(0, 188, 212, 0.9); }
+
+.background-color--secondary {
+  background-color: rgba(255, 82, 82, 0.9); }
+
+.background-color--baby-blue {
+  background-color: rgba(116, 199, 209, 0.9); }
+
+.background-color--cerulean {
+  background-color: rgba(80, 150, 215, 0.9); }
+
+.background-color--mint {
+  background-color: rgba(96, 196, 150, 0.9); }
+
+.text-color--primary {
+  color: rgba(0, 188, 212, 0.8) !important; }
+
+.text-color--secondary {
+  color: rgba(255, 82, 82, 0.8) !important; }
+
+.text-color--baby-blue {
+  color: rgba(116, 199, 209, 0.8) !important; }
+
+.text-color--cerulean {
+  color: rgba(80, 150, 215, 0.8) !important; }
+
+.text-color--mint {
+  color: rgba(96, 196, 150, 0.8) !important; }
+
+.getmdl-select .mdl-icon-toggle__label {
+  color: white; }
+
+.getmdl-select.is-focused i.material-icons {
+  color: rgb(0, 188, 212); }
+
+.getmdl-select .mdl-menu__container {
+  margin-top: -45px !important; }
+  .getmdl-select .mdl-menu__container .mdl-menu__outline {
+    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); }
+
+.getmdl-select .mdl-menu .mdl-menu__item {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  color: white;
+  font-size: 16px;
+  font-weight: 300; }
+
+.mdl-textfield input, .mdl-textfield textarea {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  color: white;
+  font-size: 16px;
+  font-weight: 300; }
+
+.mdl-textfield.is-focused.getmdl-select input, .mdl-textfield.is-focused.getmdl-select textarea {
+  font-weight: 300; }
+
+.mdl-textfield.is-focused input, .mdl-textfield.is-focused textarea {
+  font-weight: 400; }
+
+.mdl-textfield.is-disabled input {
+  border-bottom-width: 2px !important; }
diff --git a/material-dashboard-lite-master/dist/css/lib/getmdl-select.min.css b/material-dashboard-lite-master/dist/css/lib/getmdl-select.min.css
new file mode 100644
index 0000000..b1c2409
--- /dev/null
+++ b/material-dashboard-lite-master/dist/css/lib/getmdl-select.min.css
@@ -0,0 +1,3 @@
+.getmdl-select .mdl-icon-toggle__label{float:right;margin-top:-30px;color:rgba(0,0,0,0.4)}.getmdl-select.is-focused .mdl-icon-toggle__label{color:#3f51b5}.getmdl-select .mdl-menu__container{width:100% !important}.getmdl-select .mdl-menu__container .mdl-menu{width:100%}
+
+/*# sourceMappingURL=getmdl-select.min.css.map */
diff --git a/material-dashboard-lite-master/dist/css/lib/nv.d3.css b/material-dashboard-lite-master/dist/css/lib/nv.d3.css
new file mode 100644
index 0000000..21ce216
--- /dev/null
+++ b/material-dashboard-lite-master/dist/css/lib/nv.d3.css
@@ -0,0 +1,647 @@
+/* nvd3 version 1.8.2 (https://github.com/novus/nvd3) 2016-01-24 */
+.nvd3 .nv-axis {
+    pointer-events:none;
+    opacity: 1;
+}
+
+.nvd3 .nv-axis path {
+    fill: none;
+    stroke: #000;
+    stroke-opacity: .75;
+    shape-rendering: crispEdges;
+}
+
+.nvd3 .nv-axis path.domain {
+    stroke-opacity: .75;
+}
+
+.nvd3 .nv-axis.nv-x path.domain {
+    stroke-opacity: 0;
+}
+
+.nvd3 .nv-axis line {
+    fill: none;
+    stroke: #e5e5e5;
+    shape-rendering: crispEdges;
+}
+
+.nvd3 .nv-axis .zero line,
+    /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
+    stroke-opacity: .75;
+}
+
+.nvd3 .nv-axis .nv-axisMaxMin text {
+    font-weight: bold;
+}
+
+.nvd3 .x  .nv-axis .nv-axisMaxMin text,
+.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
+.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
+    text-anchor: middle
+}
+
+.nvd3 .nv-axis.nv-disabled {
+    opacity: 0;
+}
+
+.nvd3 .nv-bars rect {
+    fill-opacity: .75;
+
+    transition: fill-opacity 250ms linear;
+    -moz-transition: fill-opacity 250ms linear;
+    -webkit-transition: fill-opacity 250ms linear;
+}
+
+.nvd3 .nv-bars rect.hover {
+    fill-opacity: 1;
+}
+
+.nvd3 .nv-bars .hover rect {
+    fill: lightblue;
+}
+
+.nvd3 .nv-bars text {
+    fill: rgba(0,0,0,0);
+}
+
+.nvd3 .nv-bars .hover text {
+    fill: rgba(0,0,0,1);
+}
+
+.nvd3 .nv-multibar .nv-groups rect,
+.nvd3 .nv-multibarHorizontal .nv-groups rect,
+.nvd3 .nv-discretebar .nv-groups rect {
+    stroke-opacity: 0;
+
+    transition: fill-opacity 250ms linear;
+    -moz-transition: fill-opacity 250ms linear;
+    -webkit-transition: fill-opacity 250ms linear;
+}
+
+.nvd3 .nv-multibar .nv-groups rect:hover,
+.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
+.nvd3 .nv-candlestickBar .nv-ticks rect:hover,
+.nvd3 .nv-discretebar .nv-groups rect:hover {
+    fill-opacity: 1;
+}
+
+.nvd3 .nv-discretebar .nv-groups text,
+.nvd3 .nv-multibarHorizontal .nv-groups text {
+    font-weight: bold;
+    fill: rgba(0,0,0,1);
+    stroke: rgba(0,0,0,0);
+}
+
+/* boxplot CSS */
+.nvd3 .nv-boxplot circle {
+  fill-opacity: 0.5;
+}
+
+.nvd3 .nv-boxplot circle:hover {
+  fill-opacity: 1;
+}
+
+.nvd3 .nv-boxplot rect:hover {
+  fill-opacity: 1;
+}
+
+.nvd3 line.nv-boxplot-median {
+  stroke: black;
+}
+
+.nv-boxplot-tick:hover {
+  stroke-width: 2.5px;
+}
+/* bullet */
+.nvd3.nv-bullet { font: 10px sans-serif; }
+.nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
+.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
+.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
+.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
+.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
+.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
+.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
+.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
+.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
+.nvd3.nv-bullet .nv-subtitle { fill: #999; }
+
+
+.nvd3.nv-bullet .nv-range {
+    fill: #bababa;
+    fill-opacity: .4;
+}
+.nvd3.nv-bullet .nv-range:hover {
+    fill-opacity: .7;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick {
+    stroke-width: 1px;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover {
+    stroke-width: 2px;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect {
+    stroke: #2ca02c;
+    fill: #2ca02c;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect {
+    stroke: #d62728;
+    fill: #d62728;
+}
+
+.with-transitions .nv-candlestickBar .nv-ticks .nv-tick {
+    transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+    -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+    -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+
+}
+
+.nvd3.nv-candlestickBar .nv-ticks line {
+    stroke: #333;
+}
+
+
+.nvd3 .nv-legend .nv-disabled rect {
+    /*fill-opacity: 0;*/
+}
+
+.nvd3 .nv-check-box .nv-box {
+    fill-opacity:0;
+    stroke-width:2;
+}
+
+.nvd3 .nv-check-box .nv-check {
+    fill-opacity:0;
+    stroke-width:4;
+}
+
+.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check {
+    fill-opacity:0;
+    stroke-opacity:0;
+}
+
+.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check {
+    opacity: 0;
+}
+
+/* line plus bar */
+.nvd3.nv-linePlusBar .nv-bar rect {
+    fill-opacity: .75;
+}
+
+.nvd3.nv-linePlusBar .nv-bar rect:hover {
+    fill-opacity: 1;
+}
+.nvd3 .nv-groups path.nv-line {
+    fill: none;
+}
+
+.nvd3 .nv-groups path.nv-area {
+    stroke: none;
+}
+
+.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
+    fill-opacity: 0;
+    stroke-opacity: 0;
+}
+
+.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
+    fill-opacity: .5 !important;
+    stroke-opacity: .5 !important;
+}
+
+
+.with-transitions .nvd3 .nv-groups .nv-point {
+    transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+    -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+    -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+
+}
+
+.nvd3.nv-scatter .nv-groups .nv-point.hover,
+.nvd3 .nv-groups .nv-point.hover {
+    stroke-width: 7px;
+    fill-opacity: .95 !important;
+    stroke-opacity: .95 !important;
+}
+
+
+.nvd3 .nv-point-paths path {
+    stroke: #aaa;
+    stroke-opacity: 0;
+    fill: #eee;
+    fill-opacity: 0;
+}
+
+
+
+.nvd3 .nv-indexLine {
+    cursor: ew-resize;
+}
+
+/********************
+ * SVG CSS
+ */
+
+/********************
+  Default CSS for an svg element nvd3 used
+*/
+svg.nvd3-svg {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    display: block;
+    width:100%;
+    height:100%;
+}
+
+/********************
+  Box shadow and border radius styling
+*/
+.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
+    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+    box-shadow: 0 5px 10px rgba(0,0,0,.2);
+
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+
+.nvd3 text {
+    font: normal 12px Arial;
+}
+
+.nvd3 .title {
+    font: bold 14px Arial;
+}
+
+.nvd3 .nv-background {
+    fill: white;
+    fill-opacity: 0;
+}
+
+.nvd3.nv-noData {
+    font-size: 18px;
+    font-weight: bold;
+}
+
+
+/**********
+*  Brush
+*/
+
+.nv-brush .extent {
+    fill-opacity: .125;
+    shape-rendering: crispEdges;
+}
+
+.nv-brush .resize path {
+    fill: #eee;
+    stroke: #666;
+}
+
+
+/**********
+*  Legend
+*/
+
+.nvd3 .nv-legend .nv-series {
+    cursor: pointer;
+}
+
+.nvd3 .nv-legend .nv-disabled circle {
+    fill-opacity: 0;
+}
+
+/* focus */
+.nvd3 .nv-brush .extent {
+    fill-opacity: 0 !important;
+}
+
+.nvd3 .nv-brushBackground rect {
+    stroke: #000;
+    stroke-width: .4;
+    fill: #fff;
+    fill-opacity: .7;
+}
+
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
+    stroke-width: 1px;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
+    stroke-width: 2px;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
+    stroke: #2ca02c;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
+    stroke: #d62728;
+}
+
+
+.nvd3 .background path {
+    fill: none;
+    stroke: #EEE;
+    stroke-opacity: .4;
+    shape-rendering: crispEdges;
+}
+
+.nvd3 .foreground path {
+    fill: none;
+    stroke-opacity: .7;
+}
+
+.nvd3 .nv-parallelCoordinates-brush .extent 
+{
+    fill: #fff;
+    fill-opacity: .6;
+    stroke: gray;
+    shape-rendering: crispEdges;
+}
+
+.nvd3 .nv-parallelCoordinates .hover  {
+    fill-opacity: 1;
+	stroke-width: 3px;
+}
+
+
+.nvd3 .missingValuesline line {
+  fill: none;
+  stroke: black;
+  stroke-width: 1;
+  stroke-opacity: 1;
+  stroke-dasharray: 5, 5; 
+}
+.nvd3.nv-pie path {
+    stroke-opacity: 0;
+    transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
+    -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
+    -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
+
+}
+
+.nvd3.nv-pie .nv-pie-title {
+    font-size: 24px;
+    fill: rgba(19, 196, 249, 0.59);
+}
+
+.nvd3.nv-pie .nv-slice text {
+    stroke: #000;
+    stroke-width: 0;
+}
+
+.nvd3.nv-pie path {
+    stroke: #fff;
+    stroke-width: 1px;
+    stroke-opacity: 1;
+}
+
+.nvd3.nv-pie path {
+    fill-opacity: .7;
+}
+.nvd3.nv-pie .hover path {
+    fill-opacity: 1;
+}
+.nvd3.nv-pie .nv-label {
+    pointer-events: none;
+}
+.nvd3.nv-pie .nv-label rect {
+    fill-opacity: 0;
+    stroke-opacity: 0;
+}
+
+/* scatter */
+.nvd3 .nv-groups .nv-point.hover {
+    stroke-width: 20px;
+    stroke-opacity: .5;
+}
+
+.nvd3 .nv-scatter .nv-point.hover {
+    fill-opacity: 1;
+}
+.nv-noninteractive {
+    pointer-events: none;
+}
+
+.nv-distx, .nv-disty {
+    pointer-events: none;
+}
+
+/* sparkline */
+.nvd3.nv-sparkline path {
+    fill: none;
+}
+
+.nvd3.nv-sparklineplus g.nv-hoverValue {
+    pointer-events: none;
+}
+
+.nvd3.nv-sparklineplus .nv-hoverValue line {
+    stroke: #333;
+    stroke-width: 1.5px;
+}
+
+.nvd3.nv-sparklineplus,
+.nvd3.nv-sparklineplus g {
+    pointer-events: all;
+}
+
+.nvd3 .nv-hoverArea {
+    fill-opacity: 0;
+    stroke-opacity: 0;
+}
+
+.nvd3.nv-sparklineplus .nv-xValue,
+.nvd3.nv-sparklineplus .nv-yValue {
+    stroke-width: 0;
+    font-size: .9em;
+    font-weight: normal;
+}
+
+.nvd3.nv-sparklineplus .nv-yValue {
+    stroke: #f66;
+}
+
+.nvd3.nv-sparklineplus .nv-maxValue {
+    stroke: #2ca02c;
+    fill: #2ca02c;
+}
+
+.nvd3.nv-sparklineplus .nv-minValue {
+    stroke: #d62728;
+    fill: #d62728;
+}
+
+.nvd3.nv-sparklineplus .nv-currentValue {
+    font-weight: bold;
+    font-size: 1.1em;
+}
+/* stacked area */
+.nvd3.nv-stackedarea path.nv-area {
+    fill-opacity: .7;
+    stroke-opacity: 0;
+    transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
+    -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
+    -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
+}
+
+.nvd3.nv-stackedarea path.nv-area.hover {
+    fill-opacity: .9;
+}
+
+
+.nvd3.nv-stackedarea .nv-groups .nv-point {
+    stroke-opacity: 0;
+    fill-opacity: 0;
+}
+
+
+.nvtooltip {
+    position: absolute;
+    background-color: rgba(255,255,255,1.0);
+    color: rgba(0,0,0,1.0);
+    padding: 1px;
+    border: 1px solid rgba(0,0,0,.2);
+    z-index: 10000;
+    display: block;
+
+    font-family: Arial;
+    font-size: 13px;
+    text-align: left;
+    pointer-events: none;
+
+    white-space: nowrap;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.nvtooltip {
+    background: rgba(255,255,255, 0.8);
+    border: 1px solid rgba(0,0,0,0.5);
+    border-radius: 4px;
+}
+
+/*Give tooltips that old fade in transition by
+    putting a "with-transitions" class on the container div.
+*/
+.nvtooltip.with-transitions, .with-transitions .nvtooltip {
+    transition: opacity 50ms linear;
+    -moz-transition: opacity 50ms linear;
+    -webkit-transition: opacity 50ms linear;
+
+    transition-delay: 200ms;
+    -moz-transition-delay: 200ms;
+    -webkit-transition-delay: 200ms;
+}
+
+.nvtooltip.x-nvtooltip,
+.nvtooltip.y-nvtooltip {
+    padding: 8px;
+}
+
+.nvtooltip h3 {
+    margin: 0;
+    padding: 4px 14px;
+    line-height: 18px;
+    font-weight: normal;
+    background-color: rgba(247,247,247,0.75);
+    color: rgba(0,0,0,1.0);
+    text-align: center;
+
+    border-bottom: 1px solid #ebebeb;
+
+    -webkit-border-radius: 5px 5px 0 0;
+    -moz-border-radius: 5px 5px 0 0;
+    border-radius: 5px 5px 0 0;
+}
+
+.nvtooltip p {
+    margin: 0;
+    padding: 5px 14px;
+    text-align: center;
+}
+
+.nvtooltip span {
+    display: inline-block;
+    margin: 2px 0;
+}
+
+.nvtooltip table {
+    margin: 6px;
+    border-spacing:0;
+}
+
+
+.nvtooltip table td {
+    padding: 2px 9px 2px 0;
+    vertical-align: middle;
+}
+
+.nvtooltip table td.key {
+    font-weight: normal;
+}
+.nvtooltip table td.key.total {
+    font-weight: bold;
+}
+.nvtooltip table td.value {
+    text-align: right;
+    font-weight: bold;
+}
+
+.nvtooltip table tr.highlight td {
+    padding: 1px 9px 1px 0;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-top-style: solid;
+    border-top-width: 1px;
+}
+
+.nvtooltip table td.legend-color-guide div {
+    width: 8px;
+    height: 8px;
+    vertical-align: middle;
+}
+
+.nvtooltip table td.legend-color-guide div {
+    width: 12px;
+    height: 12px;
+    border: 1px solid #999;
+}
+
+.nvtooltip .footer {
+    padding: 3px;
+    text-align: center;
+}
+
+.nvtooltip-pending-removal {
+    pointer-events: none;
+    display: none;
+}
+
+
+/****
+Interactive Layer
+*/
+.nvd3 .nv-interactiveGuideLine {
+    pointer-events:none;
+}
+.nvd3 line.nv-guideline {
+    stroke: #ccc;
+}
diff --git a/material-dashboard-lite-master/dist/forms.html b/material-dashboard-lite-master/dist/forms.html
new file mode 100644
index 0000000..d5abb9d
--- /dev/null
+++ b/material-dashboard-lite-master/dist/forms.html
@@ -0,0 +1,515 @@
+<!doctype html>
+<!--
+  Material Design Lite
+  Copyright 2015 Google Inc. All rights reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+<head>
+    <link rel="icon" type="image/png" href="images/DB_16х16.png">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Material Dashboard Lite</title>
+
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Material Design Lite">
+
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
+    <!--
+    <link rel="canonical" href="http://www.example.com/">
+    -->
+
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300,100,700,900' rel='stylesheet'
+          type='text/css'>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- inject:css -->
+    <link rel="stylesheet" href="css/lib/getmdl-select.min.css">
+    <link rel="stylesheet" href="css/lib/nv.d3.css">
+    <link rel="stylesheet" href="css/application.css">
+    <!-- endinject -->
+
+</head>
+<body>
+    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+        <header class="mdl-layout__header">
+            <div class="mdl-layout__header-row">
+                <div class="mdl-layout-spacer"></div>
+
+                <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
+                    <label class="mdl-button mdl-js-button mdl-button--icon" for="search">
+                        <i class="material-icons">search</i>
+                    </label>
+
+                    <div class="mdl-textfield__expandable-holder">
+                        <input class="mdl-textfield__input" type="text" id="search"/>
+                        <label class="mdl-textfield__label" for="search">Enter your query...</label>
+                    </div>
+                </div>
+
+                <div class="material-icons mdl-badge mdl-badge--overlap mdl-button--icon notification" id="notification"
+                     data-badge="23">
+                    notifications_none
+                </div>
+
+                <ul class="mdl-menu mdl-list mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right mdl-shadow--2dp notifications-dropdown"
+                    for="notification">
+                    <li class="mdl-list__item">
+                        You have 23 new notifications!
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <i class="material-icons">plus_one</i>
+                        </span>
+                        <span>You have 3 new orders.</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">just now</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--secondary">
+                            <i class="material-icons">error_outline</i>
+                        </span>
+                      <span>Database error</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">1 min</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <i class="material-icons">new_releases</i>
+                        </span>
+                      <span>The Death Star is built!</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">2 hours</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <i class="material-icons">mail_outline</i>
+                        </span>
+                      <span>You have 4 new mails.</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">5 days</span>
+                    </span>
+                    </li>
+                    <li class="mdl-list__item list__item--border-top">
+                        <button href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">ALL NOTIFICATIONS</button>
+                    </li>
+                </ul>
+
+                <div class="material-icons mdl-badge mdl-badge--overlap mdl-button--icon message" id="inbox" data-badge="4">
+                    mail_outline
+                </div>
+
+                <ul class="mdl-menu mdl-list mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right mdl-shadow--2dp messages-dropdown"
+                    for="inbox">
+                    <li class="mdl-list__item">
+                        You have 4 new messages!
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <text>A</text>
+                        </span>
+                        <span>Alice</span>
+                        <span class="mdl-list__item-sub-title">Birthday Party</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">just now</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--baby-blue">
+                            <text>M</text>
+                        </span>
+                        <span>Mike</span>
+                        <span class="mdl-list__item-sub-title">No theme</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">5 min</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--cerulean">
+                            <text>D</text>
+                        </span>
+                        <span>Darth</span>
+                        <span class="mdl-list__item-sub-title">Suggestion</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">23 hours</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--mint">
+                            <text>D</text>
+                        </span>
+                        <span>Don McDuket</span>
+                        <span class="mdl-list__item-sub-title">NEWS</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">30 Nov</span>
+                    </span>
+                    </li>
+                    <li class="mdl-list__item list__item--border-top">
+                        <button href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">SHOW ALL MESSAGES</button>
+                    </li>
+                </ul>
+
+                <div class="avatar-dropdown" id="icon">
+                    <span>Luke</span>
+                    <img src="images/Icon_header.png">
+                </div>
+
+                <ul class="mdl-menu mdl-list mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect mdl-shadow--2dp account-dropdown"
+                    for="icon">
+                    <li class="mdl-list__item mdl-list__item--two-line">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="material-icons mdl-list__item-avatar"></span>
+                        <span>Luke</span>
+                        <span class="mdl-list__item-sub-title">Luke@skywalker.com</span>
+                    </span>
+                    </li>
+                    <li class="list__item--border-top"></li>
+                    <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">account_circle</i>
+                        My account
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">check_box</i>
+                        My tasks
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label background-color--primary">3 new</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">perm_contact_calendar</i>
+                        My events
+                    </span>
+                    </li>
+                    <li class="list__item--border-top"></li>
+                    <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">settings</i>
+                        Settings
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon text-color--secondary">exit_to_app</i>
+                        Log out
+                    </span>
+                    </li>
+                </ul>
+
+                <button id="more"
+                        class="mdl-button mdl-js-button mdl-button--icon">
+                    <i class="material-icons">more_vert</i>
+                </button>
+
+                <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect mdl-shadow--2dp settings-dropdown"
+                    for="more">
+                    <li class="mdl-menu__item">
+                        Settings
+                    </li>
+                    <a class="mdl-menu__item" href="https://github.com/CreativeIT/getmdl-dashboard/issues">
+                        Support
+                    </a>
+                    <li class="mdl-menu__item">
+                        F.A.Q.
+                    </li>
+                </ul>
+            </div>
+        </header>
+
+        <div class="mdl-layout__drawer">
+            <header>darkboard</header>
+            <nav class="mdl-navigation">
+                <a class="mdl-navigation__link" href="index.html">
+                    <i class="material-icons" role="presentation">dashboard</i>
+                    Dashboard
+                </a>
+                <a class="mdl-navigation__link mdl-navigation__link--current" href="forms.html">
+                    <i class="material-icons" role="presentation">person</i>
+                    Account
+                </a>
+
+                <div class="mdl-layout-spacer"></div>
+                <a class="mdl-navigation__link" href="https://github.com/CreativeIT/getmdl-dashboard">
+                    <i class="material-icons" role="presentation">link</i>
+                    GitHub
+                </a>
+            </nav>
+        </div>
+
+        <main class="mdl-layout__content mdl-color--grey-100">
+            <div class="mdl-card mdl-shadow--2dp employer-form" action="#">
+                <div class="mdl-card__title">
+                    <h2>Form</h2>
+                    <div class="mdl-card__subtitle">Please complete the form</div>
+                </div>
+
+                <div class="mdl-card__supporting-text">
+                    <form action="#" class="form">
+                        <div class="form__article">
+                            <h3>Personal data</h3>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                    <input class="mdl-textfield__input" type="text" id="firstName" value="Luke"/>
+                                    <label class="mdl-textfield__label" for="firstName">First name</label>
+                                </div>
+
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                    <input class="mdl-textfield__input" type="text" id="secondName" value="Skywalker"/>
+                                    <label class="mdl-textfield__label" for="secondName">Second name</label>
+                                </div>
+                            </div>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                    <input class="mdl-textfield__input" type="text" id="birthday" value="25 May, 1977"/>
+                                    <label class="mdl-textfield__label" for="birthday">Birthday</label>
+                                </div>
+
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
+                                    <input class="mdl-textfield__input" value="Male" type="text" id="gender" readonly tabIndex="-1"/>
+
+                                    <label class="mdl-textfield__label" for="gender">Gender</label>
+
+                                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="gender">
+                                        <li class="mdl-menu__item">Male</li>
+                                        <li class="mdl-menu__item">Female</li>
+                                    </ul>
+
+                                    <label for="gender">
+                                        <i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="form__article">
+                            <h3>Employment</h3>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                    <input class="mdl-textfield__input" type="text" value="CreativeIT" id="company" disabled/>
+                                    <label class="mdl-textfield__label" for="company">Company</label>
+                                </div>
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                    <input class="mdl-textfield__input" type="text" id="company_email" value="hello@creativit.io" disabled/>
+                                    <label class="mdl-textfield__label" for="company_email">Company email</label>
+                                </div>
+                            </div>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                    <input class="mdl-textfield__input" type="text" value="Lead developer" id="position"/>
+                                    <label class="mdl-textfield__label" for="position">Position</label>
+                                </div>
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
+                                    <input class="mdl-textfield__input" value="Senior" type="text" id="qualification" readonly tabIndex="-1"/>
+                                    <label class="mdl-textfield__label" for="qualification">Qualification</label>
+                                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown"
+                                        for="qualification">
+                                        <li class="mdl-menu__item">Young Padawan</li>
+                                        <li class="mdl-menu__item">Junior</li>
+                                        <li class="mdl-menu__item">Middle</li>
+                                        <li class="mdl-menu__item">Senior</li>
+                                    </ul>
+                                    <label for="qualification">
+                                        <i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <span>Type of employment:</span>
+
+                            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="partition-fulltime">
+                                <input type="radio" id="partition-fulltime" class="mdl-radio__button" name="employment" value="1" checked/>
+                                <span class="mdl-radio__label">Fulltime</span>
+                            </label>
+                            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="partition-partTime">
+                                <input type="radio" id="partition-partTime" class="mdl-radio__button" name="employment" value="2"/>
+                                <span class="mdl-radio__label">Part time</span>
+                            </label>
+                            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="partition-remote">
+                                <input type="radio" id="partition-remote" class="mdl-radio__button" name="employment" value="3"/>
+                                <span class="mdl-radio__label">Remote</span>
+                            </label>
+                        </div>
+
+                        <div class="form__article employer-form__contacts">
+                            <h3>Contacts</h3>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--9-col input-group">
+                                    <i class="material-icons pull-left">call</i>
+
+                                    <div class="mdl-textfield mdl-js-textfield pull-left">
+                                        <input class="mdl-textfield__input" type="text" id="phone">
+                                        <label class="mdl-textfield__label" for="phone">XXX-XX-XX</label>
+                                    </div>
+                                </div>
+
+                                <div class="mdl-cell mdl-cell--3-col mdl-textfield mdl-js-textfield getmdl-select">
+                                    <input class="mdl-textfield__input" value="Mobile" type="text" id="phone_type" readonly tabIndex="-1"/>
+                                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="phone_type">
+                                        <li class="mdl-menu__item">Mobile</li>
+                                        <li class="mdl-menu__item">Home</li>
+                                        <li class="mdl-menu__item">Work</li>
+                                    </ul>
+                                    <label for="phone_type">
+                                        <i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--9-col input-group">
+                                    <img src="images/skype.svg">
+
+                                    <div class="mdl-textfield mdl-js-textfield pull-left">
+                                        <input class="mdl-textfield__input" type="text" id="skype" value="Pilot_luke"/>
+                                        <label class="mdl-textfield__label" for="skype">Skype</label>
+                                    </div>
+                                </div>
+
+                                <div class="mdl-cell mdl-cell--3-col mdl-textfield mdl-js-textfield getmdl-select">
+                                    <input class="mdl-textfield__input" value="Personal" type="text" id="skype_type" readonly tabIndex="-1"/>
+                                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="skype_type">
+                                        <li class="mdl-menu__item">Personal</li>
+                                        <li class="mdl-menu__item">Work</li>
+                                    </ul>
+                                    <label for="skype_type">
+                                        <i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--9-col input-group">
+                                    <i class="material-icons pull-left">mail_outline</i>
+
+                                    <div class="mdl-textfield mdl-js-textfield pull-left">
+                                        <input class="mdl-textfield__input" type="text" id="email" value="luke@skywalker.com"/>
+                                        <label class="mdl-textfield__label" for="email">Email</label>
+                                    </div>
+                                </div>
+
+                                <div class="mdl-cell mdl-cell--3-col mdl-textfield mdl-js-textfield getmdl-select">
+                                    <input class="mdl-textfield__input" value="Work" type="text" id="email_type" readonly tabIndex="-1"/>
+                                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="email_type">
+                                        <li class="mdl-menu__item">Personal</li>
+                                        <li class="mdl-menu__item">Work</li>
+                                    </ul>
+                                    <label for="email_type">
+                                        <i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--9-col input-group">
+                                    <i class="material-icons pull-left">place</i>
+
+                                    <div class="mdl-textfield mdl-js-textfield pull-left">
+                                        <input class="mdl-textfield__input" type="text" id="address"/>
+                                        <label class="mdl-textfield__label" for="address">Address</label>
+                                    </div>
+                                </div>
+
+                                <div class="mdl-cell mdl-cell--3-col mdl-textfield mdl-js-textfield getmdl-select">
+                                    <input class="mdl-textfield__input" value="Home" type="text" id="address_type" readonly
+                                           tabIndex="-1"/>
+                                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="address_type">
+                                        <li class="mdl-menu__item">Home</li>
+                                        <li class="mdl-menu__item">Work</li>
+                                    </ul>
+                                    <label for="address_type">
+                                        <i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="form__article employer-form__general_skills">
+                            <h3>General skills</h3>
+
+                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                <textarea class="mdl-textfield__input" type="text" rows="3" id="AboutMe"></textarea>
+                                <label class="mdl-textfield__label" for="AboutMe">About me</label>
+                            </div>
+                        </div>
+
+                        <div class="form__action">
+                            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="isInfoReliable">
+                                <input type="checkbox" id="isInfoReliable" class="mdl-checkbox__input" required/>
+                                <span class="mdl-checkbox__label">Entered information is reliable</span>
+                            </label>
+                            <button id="submit_button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+                                Submit
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </main>
+    </div>
+
+<!-- inject:js -->
+<script src="js/d3.js"></script>
+<script src="js/getmdl-select.min.js"></script>
+<script src="js/material.js"></script>
+<script src="js/nv.d3.js"></script>
+<script src="js/widgets/employer-form/employer-form.js"></script>
+<script src="js/widgets/pie-chart/pie-chart-nvd3.js"></script>
+<script src="js/widgets/line-chart/line-chart-nvd3.js"></script>
+<script src="js/widgets/todo/todo.js"></script>
+<script src="js/widgets/table/table.js"></script>
+<!-- endinject -->
+
+</body>
+</html>
+
diff --git a/material-dashboard-lite-master/dist/images/DB_16х16_20200928204120.png b/material-dashboard-lite-master/dist/images/DB_16х16_20200928204120.png
new file mode 100644
index 0000000000000000000000000000000000000000..23136d69c44be8d9700ab78ef40755924f157bb4
GIT binary patch
literal 17739
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

literal 0
HcmV?d00001

diff --git a/material-dashboard-lite-master/dist/images/Dark_background_1920x1080_20200928204120.png b/material-dashboard-lite-master/dist/images/Dark_background_1920x1080_20200928204120.png
new file mode 100644
index 0000000000000000000000000000000000000000..d03140f6cc90cebb08b39ddbdc7a49c9034386d7
GIT binary patch
literal 28016
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

literal 0
HcmV?d00001

diff --git a/material-dashboard-lite-master/dist/images/Icon_20191114113633.png b/material-dashboard-lite-master/dist/images/Icon_20191114113633.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3a096ddebbba173108d9d8af2b4fbd70738e208
GIT binary patch
literal 36988
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
N002ovPDHLkV1i?7pK$;H

literal 0
HcmV?d00001

diff --git a/material-dashboard-lite-master/dist/images/Icon_header_20191114113633.png b/material-dashboard-lite-master/dist/images/Icon_header_20191114113633.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a3f28212f3134c364d3f9b6a38c83133a09911e
GIT binary patch
literal 35130
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
Qc>n+a07*qoM6N<$f&t12o&W#<

literal 0
HcmV?d00001

diff --git a/material-dashboard-lite-master/dist/images/cotoneaster_20191114113633.jpg b/material-dashboard-lite-master/dist/images/cotoneaster_20191114113633.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ec32d6a2b0caf67af326dbbbe0308df42a79a0da
GIT binary patch
literal 87201
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
F|JjV>0tWy9

literal 0
HcmV?d00001

diff --git a/material-dashboard-lite-master/dist/images/robot_20201001164800.png b/material-dashboard-lite-master/dist/images/robot_20201001164800.png
new file mode 100644
index 0000000000000000000000000000000000000000..decf4a6e9a1b09adba6725fe72f918e6810d2f91
GIT binary patch
literal 54298
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

literal 0
HcmV?d00001

diff --git a/material-dashboard-lite-master/dist/images/skype_20191114113633.svg b/material-dashboard-lite-master/dist/images/skype_20191114113633.svg
new file mode 100644
index 0000000..142b415
--- /dev/null
+++ b/material-dashboard-lite-master/dist/images/skype_20191114113633.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 283.5 283.5" enable-background="new 0 0 283.5 283.5" xml:space="preserve">
+<path fill="#FFFFFF" d="M266.8,168.9c-1.3-2.6-1.6-6-1.5-9c0.1-5.3,0.9-10.6,1.4-15.9c-0.2,0-0.4,0-0.7,0c0-3.7,0.1-7.3,0-11
+	c-0.1-2-0.5-4-0.8-5.9C260.6,95.8,246,70,221.4,50.1c-27.6-22.3-59.3-30.4-94.4-25.8c-2.5,0.3-5.6-0.3-7.9-1.5
+	c-14-7.1-28.8-9.8-44.1-7C26.3,24.7,1.8,75,24.4,119.2c1.1,2.1,1.3,4.7,1.4,7.1c0.2,12.1-1.2,24.4,0.4,36.3
+	C34.4,227,98.3,274,162.5,263.8c3.2-0.5,7,0.2,9.9,1.6c13.8,6.6,28.2,9.3,43.2,6.7C264.1,263.9,289.4,212.6,266.8,168.9z
+	 M185.3,221.6c-11,5.1-22.6,7.4-38.1,7.4c-18.3-0.7-37.6-4.1-53.8-17.2c-7.6-6.1-12.3-14-12.7-23.9c-0.3-6.2,1.6-11.6,7-15.1
+	c5.5-3.6,11.4-3,16.4,0.5c4,2.8,7.6,6.5,10.7,10.3c12.8,15.9,26.8,20.7,46.9,14.8c4.4-1.3,8.6-4.5,11.8-7.9
+	c7.1-7.7,5.5-18.1-3.8-22.7c-8.4-4.1-17.7-6.5-26.7-9.3c-12-3.8-24.4-6.5-36.1-11.1c-16.4-6.4-27-18.3-27.3-36.9
+	c-0.3-18.3,6.9-32.9,22.6-42.9c10.2-6.5,21.7-9.3,33.6-9.7c19.2-0.6,38,1.9,54.8,11.8c6.4,3.8,12.3,9.2,16.8,15.1
+	c5.8,7.5,4.6,17.4-1.2,22.8c-6.4,6-17.3,6.5-24.9,0.7c-3.6-2.7-6.7-5.9-10.1-8.9c-11.9-10.4-25.6-13.3-40.4-8.6
+	c-4.2,1.3-8.5,4.9-11,8.6c-4.5,6.5-2.7,13.5,4.5,16.7c8,3.6,16.5,5.8,24.9,8.5c13.7,4.4,27.8,7.8,41.1,13.3
+	c13.1,5.3,22.2,15.3,24.3,30C218.2,190.7,206.4,211.8,185.3,221.6z"/>
+</svg>
diff --git a/material-dashboard-lite-master/dist/images/weather_bck_20201001164800.png b/material-dashboard-lite-master/dist/images/weather_bck_20201001164800.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ea5c0035cf8c601e590364a24bba15761adfd68
GIT binary patch
literal 85378
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

literal 0
HcmV?d00001

diff --git a/material-dashboard-lite-master/dist/index.html b/material-dashboard-lite-master/dist/index.html
new file mode 100644
index 0000000..8381435
--- /dev/null
+++ b/material-dashboard-lite-master/dist/index.html
@@ -0,0 +1,530 @@
+<!doctype html>
+<!--
+  Material Design Lite
+  Copyright 2015 Google Inc. All rights reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+<head>
+    <link rel="icon" type="image/png" href="images/DB_16х16.png">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Material Dashboard Lite</title>
+
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Material Design Lite">
+
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
+    <!--
+    <link rel="canonical" href="http://www.example.com/">
+    -->
+
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300,100,700,900' rel='stylesheet'
+          type='text/css'>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- inject:css -->
+    <link rel="stylesheet" href="css/lib/getmdl-select.min.css">
+    <link rel="stylesheet" href="css/lib/nv.d3.css">
+    <link rel="stylesheet" href="css/application.css">
+    <!-- endinject -->
+
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header is-small-screen">
+    <header class="mdl-layout__header">
+        <div class="mdl-layout__header-row">
+            <div class="mdl-layout-spacer"></div>
+
+            <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
+                <label class="mdl-button mdl-js-button mdl-button--icon" for="search">
+                    <i class="material-icons">search</i>
+                </label>
+
+                <div class="mdl-textfield__expandable-holder">
+                    <input class="mdl-textfield__input" type="text" id="search"/>
+                    <label class="mdl-textfield__label" for="search">Enter your query...</label>
+                </div>
+            </div>
+
+            <div class="material-icons mdl-badge mdl-badge--overlap mdl-button--icon notification" id="notification"
+                 data-badge="23">
+                notifications_none
+            </div>
+
+            <ul class="mdl-menu mdl-list mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right mdl-shadow--2dp notifications-dropdown"
+                for="notification">
+                <li class="mdl-list__item">
+                    You have 23 new notifications!
+                </li>
+                <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <i class="material-icons">plus_one</i>
+                        </span>
+                        <span>You have 3 new orders.</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">just now</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--secondary">
+                            <i class="material-icons">error_outline</i>
+                        </span>
+                      <span>Database error</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">1 min</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <i class="material-icons">new_releases</i>
+                        </span>
+                      <span>The Death Star is built!</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">2 hours</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <i class="material-icons">mail_outline</i>
+                        </span>
+                      <span>You have 4 new mails.</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">5 days</span>
+                    </span>
+                </li>
+                <li class="mdl-list__item list__item--border-top">
+                    <button href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">ALL NOTIFICATIONS</button>
+                </li>
+            </ul>
+
+            <div class="material-icons mdl-badge mdl-badge--overlap mdl-button--icon message" id="inbox" data-badge="4">
+                mail_outline
+            </div>
+
+            <ul class="mdl-menu mdl-list mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right mdl-shadow--2dp messages-dropdown"
+                for="inbox">
+                <li class="mdl-list__item">
+                    You have 4 new messages!
+                </li>
+                <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <text>A</text>
+                        </span>
+                        <span>Alice</span>
+                        <span class="mdl-list__item-sub-title">Birthday Party</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">just now</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--baby-blue">
+                            <text>M</text>
+                        </span>
+                        <span>Mike</span>
+                        <span class="mdl-list__item-sub-title">No theme</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">5 min</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--cerulean">
+                            <text>D</text>
+                        </span>
+                        <span>Darth</span>
+                        <span class="mdl-list__item-sub-title">Suggestion</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">23 hours</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--mint">
+                            <text>D</text>
+                        </span>
+                        <span>Don McDuket</span>
+                        <span class="mdl-list__item-sub-title">NEWS</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">30 Nov</span>
+                    </span>
+                </li>
+                <li class="mdl-list__item list__item--border-top">
+                    <button href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">SHOW ALL MESSAGES</button>
+                </li>
+            </ul>
+
+            <div class="avatar-dropdown" id="icon">
+                <span>Luke</span>
+                <img src="images/Icon_header.png">
+            </div>
+
+            <ul class="mdl-menu mdl-list mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect mdl-shadow--2dp account-dropdown"
+                for="icon">
+                <li class="mdl-list__item mdl-list__item--two-line">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="material-icons mdl-list__item-avatar"></span>
+                        <span>Luke</span>
+                        <span class="mdl-list__item-sub-title">Luke@skywalker.com</span>
+                    </span>
+                </li>
+                <li class="list__item--border-top"></li>
+                <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">account_circle</i>
+                        My account
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">check_box</i>
+                        My tasks
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label background-color--primary">3 new</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">perm_contact_calendar</i>
+                        My events
+                    </span>
+                </li>
+                <li class="list__item--border-top"></li>
+                <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">settings</i>
+                        Settings
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon text-color--secondary">exit_to_app</i>
+                        Log out
+                    </span>
+                </li>
+            </ul>
+
+            <button id="more"
+                    class="mdl-button mdl-js-button mdl-button--icon">
+                <i class="material-icons">more_vert</i>
+            </button>
+
+            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect mdl-shadow--2dp settings-dropdown"
+                for="more">
+                <li class="mdl-menu__item">
+                    Settings
+                </li>
+                <a class="mdl-menu__item" href="https://github.com/CreativeIT/getmdl-dashboard/issues">
+                    Support
+                </a>
+                <li class="mdl-menu__item">
+                    F.A.Q.
+                </li>
+            </ul>
+        </div>
+    </header>
+
+    <div class="mdl-layout__drawer">
+        <header>darkboard</header>
+        <nav class="mdl-navigation">
+            <a class="mdl-navigation__link mdl-navigation__link--current" href="index.html">
+                <i class="material-icons" role="presentation">dashboard</i>
+                Dashboard
+            </a>
+            <a class="mdl-navigation__link" href="forms.html">
+                <i class="material-icons" role="presentation">person</i>
+                Account
+            </a>
+
+            <div class="mdl-layout-spacer"></div>
+            <a class="mdl-navigation__link" href="https://github.com/CreativeIT/getmdl-dashboard">
+                <i class="material-icons" role="presentation">link</i>
+                GitHub
+            </a>
+        </nav>
+    </div>
+
+    <main class="mdl-layout__content">
+
+        <div class="mdl-grid mdl-grid--no-spacing">
+
+            <div class="mdl-grid mdl-cell mdl-cell--9-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone mdl-cell--top">
+
+                <div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp pie-chart">
+                        <div class="mdl-card__title">
+                            <h2 class="mdl-card__title-text">My Day</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <div class="pie-chart__container">
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp weather">
+                        <div class="mdl-card__title">
+                            <h2 class="mdl-card__title-text">Now</h2>
+
+                            <div class="mdl-layout-spacer"></div>
+                            <div class="mdl-card__subtitle-text">
+                                <i class="material-icons">room</i>
+                                Minsk, Belarus
+                            </div>
+                        </div>
+                        <div class="mdl-card__supporting-text mdl-card--expand">
+                            <p class="weather-temperature">-11<sup>&deg;</sup></p>
+
+                            <p class="weather-description">
+                                Cloudy and snow
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp trending">
+                        <div class="mdl-card__title">
+                            <h2 class="mdl-card__title-text">Trending</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <ul class="mdl-list">
+                                <li class="mdl-list__item">
+                                    <span class="mdl-list__item-primary-content list__item-text">UX</span>
+                                    <span class="mdl-list__item-secondary-content">
+                                        <i class="material-icons trending__arrow-up" role="presentation">&#xE5C7</i>
+                                    </span>
+                                    <span class="mdl-list__item-secondary-content trending__percent">1 %</span>
+                                </li>
+                                <li class="mdl-list__item list__item--border-top">
+                                    <span class="mdl-list__item-primary-content list__item-text">PHP</span>
+                                    <span class="mdl-list__item-secondary-content">
+                                        <i class="material-icons trending__arrow-down" role="presentation">&#xE5C5</i>
+                                    </span>
+                                    <span class="mdl-list__item-secondary-content trending__percent">2 %</span>
+                                </li>
+                                <li class="mdl-list__item list__item--border-top">
+                                    <span class="mdl-list__item-primary-content list__item-text ">Big Data</span>
+                                    <span class="mdl-list__item-secondary-content">
+                                        <i class="material-icons trending__arrow-up" role="presentation">&#xE5C7</i>
+                                    </span>
+                                    <span class="mdl-list__item-secondary-content trending__percent">5 %</span>
+                                </li>
+                                <li class="mdl-list__item list__item--border-top">
+                                    <span class="mdl-list__item-primary-content list__item-text">Material Design</span>
+                                    <span class="mdl-list__item-secondary-content">
+                                        <i class="material-icons trending__arrow-up" role="presentation">&#xE5C7</i>
+                                    </span>
+                                    <span class="mdl-list__item-secondary-content trending__percent">18 %</span>
+                                </li>
+                                <li class="mdl-list__item list__item--border-top">
+                                    <span class="mdl-list__item-primary-content">JavaScript</span>
+                                    <span class="mdl-list__item-secondary-content">
+                                        <i class="material-icons trending__arrow-up" role="presentation">&#xE5C7</i>
+                                    </span>
+                                    <span class="mdl-list__item-secondary-content trending__percent">17 %</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mdl-cell mdl-cell--5-col-desktop mdl-cell--5-col-tablet mdl-cell--2-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp cotoneaster">
+                        <div class="mdl-card__title mdl-card--expand">
+                            <h2 class="mdl-card__title-text">Cotoneaster</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <div>
+                                Cotoneaster is a genus of flowering plants in the rose family, Roseaceae, netive to the
+                                Palaearctic region, with a strong concentration of diversity in the genus in the
+                                mountains
+                                of southwestern China and the Himalayas.
+                            </div>
+                            <a href="https://en.wikipedia.org/wiki/Cotoneaster" target="_blank">Wikipedia</a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mdl-cell mdl-cell--7-col-desktop mdl-cell--7-col-tablet mdl-cell--4-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp line-chart">
+                        <div class="mdl-card__title">
+                            <h2 class="mdl-card__title-text">Startup Financing Cycle</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <div class="line-chart__container">
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone ">
+                    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp projects-table">
+                        <thead>
+                        <tr>
+                            <th class="mdl-data-table__cell--non-numeric">Project</th>
+                            <th class="mdl-data-table__cell--non-numeric">Responsible</th>
+                            <th class="mdl-data-table__cell--non-numeric">Client contact</th>
+                            <th class="mdl-data-table__cell--non-numeric">Deadline</th>
+                            <th class="mdl-data-table__cell--non-numeric">Progress</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td class="mdl-data-table__cell--non-numeric">Darkboard</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <span class="label label--mini background-color--mint">Alex</span>
+                                <span class="label label--mini background-color--primary">Dina</span>
+                                <span class="label label--mini background-color--cerulean">Misha</span>
+                            </td>
+                            <td class="mdl-data-table__cell--non-numeric">Luke@skywalker.com</td>
+                            <td class="mdl-data-table__cell--non-numeric">Jun 15</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <div id="task1" class="mdl-progress mdl-js-progress"></div>
+                                <div class="mdl-tooltip" for="task1">
+                                    44%
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="mdl-data-table__cell--non-numeric">Big financial app</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <span class="label label--mini background-color--baby-blue">Vlada</span>
+                            </td>
+                            <td class="mdl-data-table__cell--non-numeric">Boss@financial.com</td>
+                            <td class="mdl-data-table__cell--non-numeric">Mar 1</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <div id="task2" class="mdl-progress mdl-js-progress"></div>
+                                <div class="mdl-tooltip" for="task2">
+                                    14%
+                                </div>
+                            </td>
+                        </tr>
+                        <tr class="is-selected">
+                            <td class="mdl-data-table__cell--non-numeric">New Year office decoration</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <span class="label label--mini background-color--primary">Dina</span>
+                                <span class="label label--mini background-color--baby-blue">Vlada</span>
+                            </td>
+                            <td class="mdl-data-table__cell--non-numeric">info@creativeit.io</td>
+                            <td class="mdl-data-table__cell--non-numeric">Dec 25</td>
+                            <td class="mdl-data-table__cell--non-numeric task-done">
+                                <i id="task3" class="material-icons">done</i>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="mdl-data-table__cell--non-numeric">Don't worry, be happy!!!</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <span class="label label--mini background-color--secondary">Everybody</span>
+                            </td>
+                            <td class="mdl-data-table__cell--non-numeric">Contact@happyness.com</td>
+                            <td class="mdl-data-table__cell--non-numeric">Yesterday</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <div id="task4" class="mdl-progress mdl-js-progress"></div>
+                                <div class="mdl-tooltip" for="task4">
+                                    31%
+                                </div>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <div class="mdl-grid mdl-cell mdl-cell--3-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone mdl-cell--top">
+
+                <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--6-col-tablet mdl-cell--2-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp robot">
+                        <div class="mdl-card__title mdl-card--expand">
+                            <h2 class="mdl-card__title-text">BB-8</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <div>
+                                A skittish but loyal astromech, BB-8 accompanied Poe Dameron on many missions for the
+                                Resistance helping keep his X-wing in working order.
+                            </div>
+                            <a href="http://www.starwars.com/databank/bb-8" target="_blank">Star Wars Databank</a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--6-col-tablet mdl-cell--2-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp todo">
+                        <div class="mdl-card__title">
+                            <h2 class="mdl-card__title-text">To-do list</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <ul class="mdl-list">
+
+                            </ul>
+                        </div>
+                        <div class="mdl-card__actions">
+                            <button class="mdl-button mdl-js-button mdl-js-ripple-effect">remove selected</button>
+                            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-shadow--8dp mdl-button--colored ">
+                                <i class="material-icons mdl-js-ripple-effect">add</i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+    </main>
+</div>
+
+<!-- inject:js -->
+<script src="js/d3.js"></script>
+<script src="js/getmdl-select.min.js"></script>
+<script src="js/material.js"></script>
+<script src="js/nv.d3.js"></script>
+<script src="js/widgets/employer-form/employer-form.js"></script>
+<script src="js/widgets/pie-chart/pie-chart-nvd3.js"></script>
+<script src="js/widgets/line-chart/line-chart-nvd3.js"></script>
+<script src="js/widgets/todo/todo.js"></script>
+<script src="js/widgets/table/table.js"></script>
+<!-- endinject -->
+
+</body>
+</html>
diff --git a/material-dashboard-lite-master/dist/js/d3.js b/material-dashboard-lite-master/dist/js/d3.js
new file mode 100644
index 0000000..2e70a83
--- /dev/null
+++ b/material-dashboard-lite-master/dist/js/d3.js
@@ -0,0 +1,9554 @@
+!function() {
+  var d3 = {
+    version: "3.5.16"
+  };
+  var d3_arraySlice = [].slice, d3_array = function(list) {
+    return d3_arraySlice.call(list);
+  };
+  var d3_document = this.document;
+  function d3_documentElement(node) {
+    return node && (node.ownerDocument || node.document || node).documentElement;
+  }
+  function d3_window(node) {
+    return node && (node.ownerDocument && node.ownerDocument.defaultView || node.document && node || node.defaultView);
+  }
+  if (d3_document) {
+    try {
+      d3_array(d3_document.documentElement.childNodes)[0].nodeType;
+    } catch (e) {
+      d3_array = function(list) {
+        var i = list.length, array = new Array(i);
+        while (i--) array[i] = list[i];
+        return array;
+      };
+    }
+  }
+  if (!Date.now) Date.now = function() {
+    return +new Date();
+  };
+  if (d3_document) {
+    try {
+      d3_document.createElement("DIV").style.setProperty("opacity", 0, "");
+    } catch (error) {
+      var d3_element_prototype = this.Element.prototype, d3_element_setAttribute = d3_element_prototype.setAttribute, d3_element_setAttributeNS = d3_element_prototype.setAttributeNS, d3_style_prototype = this.CSSStyleDeclaration.prototype, d3_style_setProperty = d3_style_prototype.setProperty;
+      d3_element_prototype.setAttribute = function(name, value) {
+        d3_element_setAttribute.call(this, name, value + "");
+      };
+      d3_element_prototype.setAttributeNS = function(space, local, value) {
+        d3_element_setAttributeNS.call(this, space, local, value + "");
+      };
+      d3_style_prototype.setProperty = function(name, value, priority) {
+        d3_style_setProperty.call(this, name, value + "", priority);
+      };
+    }
+  }
+  d3.ascending = d3_ascending;
+  function d3_ascending(a, b) {
+    return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+  }
+  d3.descending = function(a, b) {
+    return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
+  };
+  d3.min = function(array, f) {
+    var i = -1, n = array.length, a, b;
+    if (arguments.length === 1) {
+      while (++i < n) if ((b = array[i]) != null && b >= b) {
+        a = b;
+        break;
+      }
+      while (++i < n) if ((b = array[i]) != null && a > b) a = b;
+    } else {
+      while (++i < n) if ((b = f.call(array, array[i], i)) != null && b >= b) {
+        a = b;
+        break;
+      }
+      while (++i < n) if ((b = f.call(array, array[i], i)) != null && a > b) a = b;
+    }
+    return a;
+  };
+  d3.max = function(array, f) {
+    var i = -1, n = array.length, a, b;
+    if (arguments.length === 1) {
+      while (++i < n) if ((b = array[i]) != null && b >= b) {
+        a = b;
+        break;
+      }
+      while (++i < n) if ((b = array[i]) != null && b > a) a = b;
+    } else {
+      while (++i < n) if ((b = f.call(array, array[i], i)) != null && b >= b) {
+        a = b;
+        break;
+      }
+      while (++i < n) if ((b = f.call(array, array[i], i)) != null && b > a) a = b;
+    }
+    return a;
+  };
+  d3.extent = function(array, f) {
+    var i = -1, n = array.length, a, b, c;
+    if (arguments.length === 1) {
+      while (++i < n) if ((b = array[i]) != null && b >= b) {
+        a = c = b;
+        break;
+      }
+      while (++i < n) if ((b = array[i]) != null) {
+        if (a > b) a = b;
+        if (c < b) c = b;
+      }
+    } else {
+      while (++i < n) if ((b = f.call(array, array[i], i)) != null && b >= b) {
+        a = c = b;
+        break;
+      }
+      while (++i < n) if ((b = f.call(array, array[i], i)) != null) {
+        if (a > b) a = b;
+        if (c < b) c = b;
+      }
+    }
+    return [ a, c ];
+  };
+  function d3_number(x) {
+    return x === null ? NaN : +x;
+  }
+  function d3_numeric(x) {
+    return !isNaN(x);
+  }
+  d3.sum = function(array, f) {
+    var s = 0, n = array.length, a, i = -1;
+    if (arguments.length === 1) {
+      while (++i < n) if (d3_numeric(a = +array[i])) s += a;
+    } else {
+      while (++i < n) if (d3_numeric(a = +f.call(array, array[i], i))) s += a;
+    }
+    return s;
+  };
+  d3.mean = function(array, f) {
+    var s = 0, n = array.length, a, i = -1, j = n;
+    if (arguments.length === 1) {
+      while (++i < n) if (d3_numeric(a = d3_number(array[i]))) s += a; else --j;
+    } else {
+      while (++i < n) if (d3_numeric(a = d3_number(f.call(array, array[i], i)))) s += a; else --j;
+    }
+    if (j) return s / j;
+  };
+  d3.quantile = function(values, p) {
+    var H = (values.length - 1) * p + 1, h = Math.floor(H), v = +values[h - 1], e = H - h;
+    return e ? v + e * (values[h] - v) : v;
+  };
+  d3.median = function(array, f) {
+    var numbers = [], n = array.length, a, i = -1;
+    if (arguments.length === 1) {
+      while (++i < n) if (d3_numeric(a = d3_number(array[i]))) numbers.push(a);
+    } else {
+      while (++i < n) if (d3_numeric(a = d3_number(f.call(array, array[i], i)))) numbers.push(a);
+    }
+    if (numbers.length) return d3.quantile(numbers.sort(d3_ascending), .5);
+  };
+  d3.variance = function(array, f) {
+    var n = array.length, m = 0, a, d, s = 0, i = -1, j = 0;
+    if (arguments.length === 1) {
+      while (++i < n) {
+        if (d3_numeric(a = d3_number(array[i]))) {
+          d = a - m;
+          m += d / ++j;
+          s += d * (a - m);
+        }
+      }
+    } else {
+      while (++i < n) {
+        if (d3_numeric(a = d3_number(f.call(array, array[i], i)))) {
+          d = a - m;
+          m += d / ++j;
+          s += d * (a - m);
+        }
+      }
+    }
+    if (j > 1) return s / (j - 1);
+  };
+  d3.deviation = function() {
+    var v = d3.variance.apply(this, arguments);
+    return v ? Math.sqrt(v) : v;
+  };
+  function d3_bisector(compare) {
+    return {
+      left: function(a, x, lo, hi) {
+        if (arguments.length < 3) lo = 0;
+        if (arguments.length < 4) hi = a.length;
+        while (lo < hi) {
+          var mid = lo + hi >>> 1;
+          if (compare(a[mid], x) < 0) lo = mid + 1; else hi = mid;
+        }
+        return lo;
+      },
+      right: function(a, x, lo, hi) {
+        if (arguments.length < 3) lo = 0;
+        if (arguments.length < 4) hi = a.length;
+        while (lo < hi) {
+          var mid = lo + hi >>> 1;
+          if (compare(a[mid], x) > 0) hi = mid; else lo = mid + 1;
+        }
+        return lo;
+      }
+    };
+  }
+  var d3_bisect = d3_bisector(d3_ascending);
+  d3.bisectLeft = d3_bisect.left;
+  d3.bisect = d3.bisectRight = d3_bisect.right;
+  d3.bisector = function(f) {
+    return d3_bisector(f.length === 1 ? function(d, x) {
+      return d3_ascending(f(d), x);
+    } : f);
+  };
+  d3.shuffle = function(array, i0, i1) {
+    if ((m = arguments.length) < 3) {
+      i1 = array.length;
+      if (m < 2) i0 = 0;
+    }
+    var m = i1 - i0, t, i;
+    while (m) {
+      i = Math.random() * m-- | 0;
+      t = array[m + i0], array[m + i0] = array[i + i0], array[i + i0] = t;
+    }
+    return array;
+  };
+  d3.permute = function(array, indexes) {
+    var i = indexes.length, permutes = new Array(i);
+    while (i--) permutes[i] = array[indexes[i]];
+    return permutes;
+  };
+  d3.pairs = function(array) {
+    var i = 0, n = array.length - 1, p0, p1 = array[0], pairs = new Array(n < 0 ? 0 : n);
+    while (i < n) pairs[i] = [ p0 = p1, p1 = array[++i] ];
+    return pairs;
+  };
+  d3.transpose = function(matrix) {
+    if (!(n = matrix.length)) return [];
+    for (var i = -1, m = d3.min(matrix, d3_transposeLength), transpose = new Array(m); ++i < m; ) {
+      for (var j = -1, n, row = transpose[i] = new Array(n); ++j < n; ) {
+        row[j] = matrix[j][i];
+      }
+    }
+    return transpose;
+  };
+  function d3_transposeLength(d) {
+    return d.length;
+  }
+  d3.zip = function() {
+    return d3.transpose(arguments);
+  };
+  d3.keys = function(map) {
+    var keys = [];
+    for (var key in map) keys.push(key);
+    return keys;
+  };
+  d3.values = function(map) {
+    var values = [];
+    for (var key in map) values.push(map[key]);
+    return values;
+  };
+  d3.entries = function(map) {
+    var entries = [];
+    for (var key in map) entries.push({
+      key: key,
+      value: map[key]
+    });
+    return entries;
+  };
+  d3.merge = function(arrays) {
+    var n = arrays.length, m, i = -1, j = 0, merged, array;
+    while (++i < n) j += arrays[i].length;
+    merged = new Array(j);
+    while (--n >= 0) {
+      array = arrays[n];
+      m = array.length;
+      while (--m >= 0) {
+        merged[--j] = array[m];
+      }
+    }
+    return merged;
+  };
+  var abs = Math.abs;
+  d3.range = function(start, stop, step) {
+    if (arguments.length < 3) {
+      step = 1;
+      if (arguments.length < 2) {
+        stop = start;
+        start = 0;
+      }
+    }
+    if ((stop - start) / step === Infinity) throw new Error("infinite range");
+    var range = [], k = d3_range_integerScale(abs(step)), i = -1, j;
+    start *= k, stop *= k, step *= k;
+    if (step < 0) while ((j = start + step * ++i) > stop) range.push(j / k); else while ((j = start + step * ++i) < stop) range.push(j / k);
+    return range;
+  };
+  function d3_range_integerScale(x) {
+    var k = 1;
+    while (x * k % 1) k *= 10;
+    return k;
+  }
+  function d3_class(ctor, properties) {
+    for (var key in properties) {
+      Object.defineProperty(ctor.prototype, key, {
+        value: properties[key],
+        enumerable: false
+      });
+    }
+  }
+  d3.map = function(object, f) {
+    var map = new d3_Map();
+    if (object instanceof d3_Map) {
+      object.forEach(function(key, value) {
+        map.set(key, value);
+      });
+    } else if (Array.isArray(object)) {
+      var i = -1, n = object.length, o;
+      if (arguments.length === 1) while (++i < n) map.set(i, object[i]); else while (++i < n) map.set(f.call(object, o = object[i], i), o);
+    } else {
+      for (var key in object) map.set(key, object[key]);
+    }
+    return map;
+  };
+  function d3_Map() {
+    this._ = Object.create(null);
+  }
+  var d3_map_proto = "__proto__", d3_map_zero = "\x00";
+  d3_class(d3_Map, {
+    has: d3_map_has,
+    get: function(key) {
+      return this._[d3_map_escape(key)];
+    },
+    set: function(key, value) {
+      return this._[d3_map_escape(key)] = value;
+    },
+    remove: d3_map_remove,
+    keys: d3_map_keys,
+    values: function() {
+      var values = [];
+      for (var key in this._) values.push(this._[key]);
+      return values;
+    },
+    entries: function() {
+      var entries = [];
+      for (var key in this._) entries.push({
+        key: d3_map_unescape(key),
+        value: this._[key]
+      });
+      return entries;
+    },
+    size: d3_map_size,
+    empty: d3_map_empty,
+    forEach: function(f) {
+      for (var key in this._) f.call(this, d3_map_unescape(key), this._[key]);
+    }
+  });
+  function d3_map_escape(key) {
+    return (key += "") === d3_map_proto || key[0] === d3_map_zero ? d3_map_zero + key : key;
+  }
+  function d3_map_unescape(key) {
+    return (key += "")[0] === d3_map_zero ? key.slice(1) : key;
+  }
+  function d3_map_has(key) {
+    return d3_map_escape(key) in this._;
+  }
+  function d3_map_remove(key) {
+    return (key = d3_map_escape(key)) in this._ && delete this._[key];
+  }
+  function d3_map_keys() {
+    var keys = [];
+    for (var key in this._) keys.push(d3_map_unescape(key));
+    return keys;
+  }
+  function d3_map_size() {
+    var size = 0;
+    for (var key in this._) ++size;
+    return size;
+  }
+  function d3_map_empty() {
+    for (var key in this._) return false;
+    return true;
+  }
+  d3.nest = function() {
+    var nest = {}, keys = [], sortKeys = [], sortValues, rollup;
+    function map(mapType, array, depth) {
+      if (depth >= keys.length) return rollup ? rollup.call(nest, array) : sortValues ? array.sort(sortValues) : array;
+      var i = -1, n = array.length, key = keys[depth++], keyValue, object, setter, valuesByKey = new d3_Map(), values;
+      while (++i < n) {
+        if (values = valuesByKey.get(keyValue = key(object = array[i]))) {
+          values.push(object);
+        } else {
+          valuesByKey.set(keyValue, [ object ]);
+        }
+      }
+      if (mapType) {
+        object = mapType();
+        setter = function(keyValue, values) {
+          object.set(keyValue, map(mapType, values, depth));
+        };
+      } else {
+        object = {};
+        setter = function(keyValue, values) {
+          object[keyValue] = map(mapType, values, depth);
+        };
+      }
+      valuesByKey.forEach(setter);
+      return object;
+    }
+    function entries(map, depth) {
+      if (depth >= keys.length) return map;
+      var array = [], sortKey = sortKeys[depth++];
+      map.forEach(function(key, keyMap) {
+        array.push({
+          key: key,
+          values: entries(keyMap, depth)
+        });
+      });
+      return sortKey ? array.sort(function(a, b) {
+        return sortKey(a.key, b.key);
+      }) : array;
+    }
+    nest.map = function(array, mapType) {
+      return map(mapType, array, 0);
+    };
+    nest.entries = function(array) {
+      return entries(map(d3.map, array, 0), 0);
+    };
+    nest.key = function(d) {
+      keys.push(d);
+      return nest;
+    };
+    nest.sortKeys = function(order) {
+      sortKeys[keys.length - 1] = order;
+      return nest;
+    };
+    nest.sortValues = function(order) {
+      sortValues = order;
+      return nest;
+    };
+    nest.rollup = function(f) {
+      rollup = f;
+      return nest;
+    };
+    return nest;
+  };
+  d3.set = function(array) {
+    var set = new d3_Set();
+    if (array) for (var i = 0, n = array.length; i < n; ++i) set.add(array[i]);
+    return set;
+  };
+  function d3_Set() {
+    this._ = Object.create(null);
+  }
+  d3_class(d3_Set, {
+    has: d3_map_has,
+    add: function(key) {
+      this._[d3_map_escape(key += "")] = true;
+      return key;
+    },
+    remove: d3_map_remove,
+    values: d3_map_keys,
+    size: d3_map_size,
+    empty: d3_map_empty,
+    forEach: function(f) {
+      for (var key in this._) f.call(this, d3_map_unescape(key));
+    }
+  });
+  d3.behavior = {};
+  function d3_identity(d) {
+    return d;
+  }
+  d3.rebind = function(target, source) {
+    var i = 1, n = arguments.length, method;
+    while (++i < n) target[method = arguments[i]] = d3_rebind(target, source, source[method]);
+    return target;
+  };
+  function d3_rebind(target, source, method) {
+    return function() {
+      var value = method.apply(source, arguments);
+      return value === source ? target : value;
+    };
+  }
+  function d3_vendorSymbol(object, name) {
+    if (name in object) return name;
+    name = name.charAt(0).toUpperCase() + name.slice(1);
+    for (var i = 0, n = d3_vendorPrefixes.length; i < n; ++i) {
+      var prefixName = d3_vendorPrefixes[i] + name;
+      if (prefixName in object) return prefixName;
+    }
+  }
+  var d3_vendorPrefixes = [ "webkit", "ms", "moz", "Moz", "o", "O" ];
+  function d3_noop() {}
+  d3.dispatch = function() {
+    var dispatch = new d3_dispatch(), i = -1, n = arguments.length;
+    while (++i < n) dispatch[arguments[i]] = d3_dispatch_event(dispatch);
+    return dispatch;
+  };
+  function d3_dispatch() {}
+  d3_dispatch.prototype.on = function(type, listener) {
+    var i = type.indexOf("."), name = "";
+    if (i >= 0) {
+      name = type.slice(i + 1);
+      type = type.slice(0, i);
+    }
+    if (type) return arguments.length < 2 ? this[type].on(name) : this[type].on(name, listener);
+    if (arguments.length === 2) {
+      if (listener == null) for (type in this) {
+        if (this.hasOwnProperty(type)) this[type].on(name, null);
+      }
+      return this;
+    }
+  };
+  function d3_dispatch_event(dispatch) {
+    var listeners = [], listenerByName = new d3_Map();
+    function event() {
+      var z = listeners, i = -1, n = z.length, l;
+      while (++i < n) if (l = z[i].on) l.apply(this, arguments);
+      return dispatch;
+    }
+    event.on = function(name, listener) {
+      var l = listenerByName.get(name), i;
+      if (arguments.length < 2) return l && l.on;
+      if (l) {
+        l.on = null;
+        listeners = listeners.slice(0, i = listeners.indexOf(l)).concat(listeners.slice(i + 1));
+        listenerByName.remove(name);
+      }
+      if (listener) listeners.push(listenerByName.set(name, {
+        on: listener
+      }));
+      return dispatch;
+    };
+    return event;
+  }
+  d3.event = null;
+  function d3_eventPreventDefault() {
+    d3.event.preventDefault();
+  }
+  function d3_eventSource() {
+    var e = d3.event, s;
+    while (s = e.sourceEvent) e = s;
+    return e;
+  }
+  function d3_eventDispatch(target) {
+    var dispatch = new d3_dispatch(), i = 0, n = arguments.length;
+    while (++i < n) dispatch[arguments[i]] = d3_dispatch_event(dispatch);
+    dispatch.of = function(thiz, argumentz) {
+      return function(e1) {
+        try {
+          var e0 = e1.sourceEvent = d3.event;
+          e1.target = target;
+          d3.event = e1;
+          dispatch[e1.type].apply(thiz, argumentz);
+        } finally {
+          d3.event = e0;
+        }
+      };
+    };
+    return dispatch;
+  }
+  d3.requote = function(s) {
+    return s.replace(d3_requote_re, "\\$&");
+  };
+  var d3_requote_re = /[\\\^\$\*\+\?\|\[\]\(\)\.\{\}]/g;
+  var d3_subclass = {}.__proto__ ? function(object, prototype) {
+    object.__proto__ = prototype;
+  } : function(object, prototype) {
+    for (var property in prototype) object[property] = prototype[property];
+  };
+  function d3_selection(groups) {
+    d3_subclass(groups, d3_selectionPrototype);
+    return groups;
+  }
+  var d3_select = function(s, n) {
+    return n.querySelector(s);
+  }, d3_selectAll = function(s, n) {
+    return n.querySelectorAll(s);
+  }, d3_selectMatches = function(n, s) {
+    var d3_selectMatcher = n.matches || n[d3_vendorSymbol(n, "matchesSelector")];
+    d3_selectMatches = function(n, s) {
+      return d3_selectMatcher.call(n, s);
+    };
+    return d3_selectMatches(n, s);
+  };
+  if (typeof Sizzle === "function") {
+    d3_select = function(s, n) {
+      return Sizzle(s, n)[0] || null;
+    };
+    d3_selectAll = Sizzle;
+    d3_selectMatches = Sizzle.matchesSelector;
+  }
+  d3.selection = function() {
+    return d3.select(d3_document.documentElement);
+  };
+  var d3_selectionPrototype = d3.selection.prototype = [];
+  d3_selectionPrototype.select = function(selector) {
+    var subgroups = [], subgroup, subnode, group, node;
+    selector = d3_selection_selector(selector);
+    for (var j = -1, m = this.length; ++j < m; ) {
+      subgroups.push(subgroup = []);
+      subgroup.parentNode = (group = this[j]).parentNode;
+      for (var i = -1, n = group.length; ++i < n; ) {
+        if (node = group[i]) {
+          subgroup.push(subnode = selector.call(node, node.__data__, i, j));
+          if (subnode && "__data__" in node) subnode.__data__ = node.__data__;
+        } else {
+          subgroup.push(null);
+        }
+      }
+    }
+    return d3_selection(subgroups);
+  };
+  function d3_selection_selector(selector) {
+    return typeof selector === "function" ? selector : function() {
+      return d3_select(selector, this);
+    };
+  }
+  d3_selectionPrototype.selectAll = function(selector) {
+    var subgroups = [], subgroup, node;
+    selector = d3_selection_selectorAll(selector);
+    for (var j = -1, m = this.length; ++j < m; ) {
+      for (var group = this[j], i = -1, n = group.length; ++i < n; ) {
+        if (node = group[i]) {
+          subgroups.push(subgroup = d3_array(selector.call(node, node.__data__, i, j)));
+          subgroup.parentNode = node;
+        }
+      }
+    }
+    return d3_selection(subgroups);
+  };
+  function d3_selection_selectorAll(selector) {
+    return typeof selector === "function" ? selector : function() {
+      return d3_selectAll(selector, this);
+    };
+  }
+  var d3_nsXhtml = "http://www.w3.org/1999/xhtml";
+  var d3_nsPrefix = {
+    svg: "http://www.w3.org/2000/svg",
+    xhtml: d3_nsXhtml,
+    xlink: "http://www.w3.org/1999/xlink",
+    xml: "http://www.w3.org/XML/1998/namespace",
+    xmlns: "http://www.w3.org/2000/xmlns/"
+  };
+  d3.ns = {
+    prefix: d3_nsPrefix,
+    qualify: function(name) {
+      var i = name.indexOf(":"), prefix = name;
+      if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
+      return d3_nsPrefix.hasOwnProperty(prefix) ? {
+        space: d3_nsPrefix[prefix],
+        local: name
+      } : name;
+    }
+  };
+  d3_selectionPrototype.attr = function(name, value) {
+    if (arguments.length < 2) {
+      if (typeof name === "string") {
+        var node = this.node();
+        name = d3.ns.qualify(name);
+        return name.local ? node.getAttributeNS(name.space, name.local) : node.getAttribute(name);
+      }
+      for (value in name) this.each(d3_selection_attr(value, name[value]));
+      return this;
+    }
+    return this.each(d3_selection_attr(name, value));
+  };
+  function d3_selection_attr(name, value) {
+    name = d3.ns.qualify(name);
+    function attrNull() {
+      this.removeAttribute(name);
+    }
+    function attrNullNS() {
+      this.removeAttributeNS(name.space, name.local);
+    }
+    function attrConstant() {
+      this.setAttribute(name, value);
+    }
+    function attrConstantNS() {
+      this.setAttributeNS(name.space, name.local, value);
+    }
+    function attrFunction() {
+      var x = value.apply(this, arguments);
+      if (x == null) this.removeAttribute(name); else this.setAttribute(name, x);
+    }
+    function attrFunctionNS() {
+      var x = value.apply(this, arguments);
+      if (x == null) this.removeAttributeNS(name.space, name.local); else this.setAttributeNS(name.space, name.local, x);
+    }
+    return value == null ? name.local ? attrNullNS : attrNull : typeof value === "function" ? name.local ? attrFunctionNS : attrFunction : name.local ? attrConstantNS : attrConstant;
+  }
+  function d3_collapse(s) {
+    return s.trim().replace(/\s+/g, " ");
+  }
+  d3_selectionPrototype.classed = function(name, value) {
+    if (arguments.length < 2) {
+      if (typeof name === "string") {
+        var node = this.node(), n = (name = d3_selection_classes(name)).length, i = -1;
+        if (value = node.classList) {
+          while (++i < n) if (!value.contains(name[i])) return false;
+        } else {
+          value = node.getAttribute("class");
+          while (++i < n) if (!d3_selection_classedRe(name[i]).test(value)) return false;
+        }
+        return true;
+      }
+      for (value in name) this.each(d3_selection_classed(value, name[value]));
+      return this;
+    }
+    return this.each(d3_selection_classed(name, value));
+  };
+  function d3_selection_classedRe(name) {
+    return new RegExp("(?:^|\\s+)" + d3.requote(name) + "(?:\\s+|$)", "g");
+  }
+  function d3_selection_classes(name) {
+    return (name + "").trim().split(/^|\s+/);
+  }
+  function d3_selection_classed(name, value) {
+    name = d3_selection_classes(name).map(d3_selection_classedName);
+    var n = name.length;
+    function classedConstant() {
+      var i = -1;
+      while (++i < n) name[i](this, value);
+    }
+    function classedFunction() {
+      var i = -1, x = value.apply(this, arguments);
+      while (++i < n) name[i](this, x);
+    }
+    return typeof value === "function" ? classedFunction : classedConstant;
+  }
+  function d3_selection_classedName(name) {
+    var re = d3_selection_classedRe(name);
+    return function(node, value) {
+      if (c = node.classList) return value ? c.add(name) : c.remove(name);
+      var c = node.getAttribute("class") || "";
+      if (value) {
+        re.lastIndex = 0;
+        if (!re.test(c)) node.setAttribute("class", d3_collapse(c + " " + name));
+      } else {
+        node.setAttribute("class", d3_collapse(c.replace(re, " ")));
+      }
+    };
+  }
+  d3_selectionPrototype.style = function(name, value, priority) {
+    var n = arguments.length;
+    if (n < 3) {
+      if (typeof name !== "string") {
+        if (n < 2) value = "";
+        for (priority in name) this.each(d3_selection_style(priority, name[priority], value));
+        return this;
+      }
+      if (n < 2) {
+        var node = this.node();
+        return d3_window(node).getComputedStyle(node, null).getPropertyValue(name);
+      }
+      priority = "";
+    }
+    return this.each(d3_selection_style(name, value, priority));
+  };
+  function d3_selection_style(name, value, priority) {
+    function styleNull() {
+      this.style.removeProperty(name);
+    }
+    function styleConstant() {
+      this.style.setProperty(name, value, priority);
+    }
+    function styleFunction() {
+      var x = value.apply(this, arguments);
+      if (x == null) this.style.removeProperty(name); else this.style.setProperty(name, x, priority);
+    }
+    return value == null ? styleNull : typeof value === "function" ? styleFunction : styleConstant;
+  }
+  d3_selectionPrototype.property = function(name, value) {
+    if (arguments.length < 2) {
+      if (typeof name === "string") return this.node()[name];
+      for (value in name) this.each(d3_selection_property(value, name[value]));
+      return this;
+    }
+    return this.each(d3_selection_property(name, value));
+  };
+  function d3_selection_property(name, value) {
+    function propertyNull() {
+      delete this[name];
+    }
+    function propertyConstant() {
+      this[name] = value;
+    }
+    function propertyFunction() {
+      var x = value.apply(this, arguments);
+      if (x == null) delete this[name]; else this[name] = x;
+    }
+    return value == null ? propertyNull : typeof value === "function" ? propertyFunction : propertyConstant;
+  }
+  d3_selectionPrototype.text = function(value) {
+    return arguments.length ? this.each(typeof value === "function" ? function() {
+      var v = value.apply(this, arguments);
+      this.textContent = v == null ? "" : v;
+    } : value == null ? function() {
+      this.textContent = "";
+    } : function() {
+      this.textContent = value;
+    }) : this.node().textContent;
+  };
+  d3_selectionPrototype.html = function(value) {
+    return arguments.length ? this.each(typeof value === "function" ? function() {
+      var v = value.apply(this, arguments);
+      this.innerHTML = v == null ? "" : v;
+    } : value == null ? function() {
+      this.innerHTML = "";
+    } : function() {
+      this.innerHTML = value;
+    }) : this.node().innerHTML;
+  };
+  d3_selectionPrototype.append = function(name) {
+    name = d3_selection_creator(name);
+    return this.select(function() {
+      return this.appendChild(name.apply(this, arguments));
+    });
+  };
+  function d3_selection_creator(name) {
+    function create() {
+      var document = this.ownerDocument, namespace = this.namespaceURI;
+      return namespace === d3_nsXhtml && document.documentElement.namespaceURI === d3_nsXhtml ? document.createElement(name) : document.createElementNS(namespace, name);
+    }
+    function createNS() {
+      return this.ownerDocument.createElementNS(name.space, name.local);
+    }
+    return typeof name === "function" ? name : (name = d3.ns.qualify(name)).local ? createNS : create;
+  }
+  d3_selectionPrototype.insert = function(name, before) {
+    name = d3_selection_creator(name);
+    before = d3_selection_selector(before);
+    return this.select(function() {
+      return this.insertBefore(name.apply(this, arguments), before.apply(this, arguments) || null);
+    });
+  };
+  d3_selectionPrototype.remove = function() {
+    return this.each(d3_selectionRemove);
+  };
+  function d3_selectionRemove() {
+    var parent = this.parentNode;
+    if (parent) parent.removeChild(this);
+  }
+  d3_selectionPrototype.data = function(value, key) {
+    var i = -1, n = this.length, group, node;
+    if (!arguments.length) {
+      value = new Array(n = (group = this[0]).length);
+      while (++i < n) {
+        if (node = group[i]) {
+          value[i] = node.__data__;
+        }
+      }
+      return value;
+    }
+    function bind(group, groupData) {
+      var i, n = group.length, m = groupData.length, n0 = Math.min(n, m), updateNodes = new Array(m), enterNodes = new Array(m), exitNodes = new Array(n), node, nodeData;
+      if (key) {
+        var nodeByKeyValue = new d3_Map(), keyValues = new Array(n), keyValue;
+        for (i = -1; ++i < n; ) {
+          if (node = group[i]) {
+            if (nodeByKeyValue.has(keyValue = key.call(node, node.__data__, i))) {
+              exitNodes[i] = node;
+            } else {
+              nodeByKeyValue.set(keyValue, node);
+            }
+            keyValues[i] = keyValue;
+          }
+        }
+        for (i = -1; ++i < m; ) {
+          if (!(node = nodeByKeyValue.get(keyValue = key.call(groupData, nodeData = groupData[i], i)))) {
+            enterNodes[i] = d3_selection_dataNode(nodeData);
+          } else if (node !== true) {
+            updateNodes[i] = node;
+            node.__data__ = nodeData;
+          }
+          nodeByKeyValue.set(keyValue, true);
+        }
+        for (i = -1; ++i < n; ) {
+          if (i in keyValues && nodeByKeyValue.get(keyValues[i]) !== true) {
+            exitNodes[i] = group[i];
+          }
+        }
+      } else {
+        for (i = -1; ++i < n0; ) {
+          node = group[i];
+          nodeData = groupData[i];
+          if (node) {
+            node.__data__ = nodeData;
+            updateNodes[i] = node;
+          } else {
+            enterNodes[i] = d3_selection_dataNode(nodeData);
+          }
+        }
+        for (;i < m; ++i) {
+          enterNodes[i] = d3_selection_dataNode(groupData[i]);
+        }
+        for (;i < n; ++i) {
+          exitNodes[i] = group[i];
+        }
+      }
+      enterNodes.update = updateNodes;
+      enterNodes.parentNode = updateNodes.parentNode = exitNodes.parentNode = group.parentNode;
+      enter.push(enterNodes);
+      update.push(updateNodes);
+      exit.push(exitNodes);
+    }
+    var enter = d3_selection_enter([]), update = d3_selection([]), exit = d3_selection([]);
+    if (typeof value === "function") {
+      while (++i < n) {
+        bind(group = this[i], value.call(group, group.parentNode.__data__, i));
+      }
+    } else {
+      while (++i < n) {
+        bind(group = this[i], value);
+      }
+    }
+    update.enter = function() {
+      return enter;
+    };
+    update.exit = function() {
+      return exit;
+    };
+    return update;
+  };
+  function d3_selection_dataNode(data) {
+    return {
+      __data__: data
+    };
+  }
+  d3_selectionPrototype.datum = function(value) {
+    return arguments.length ? this.property("__data__", value) : this.property("__data__");
+  };
+  d3_selectionPrototype.filter = function(filter) {
+    var subgroups = [], subgroup, group, node;
+    if (typeof filter !== "function") filter = d3_selection_filter(filter);
+    for (var j = 0, m = this.length; j < m; j++) {
+      subgroups.push(subgroup = []);
+      subgroup.parentNode = (group = this[j]).parentNode;
+      for (var i = 0, n = group.length; i < n; i++) {
+        if ((node = group[i]) && filter.call(node, node.__data__, i, j)) {
+          subgroup.push(node);
+        }
+      }
+    }
+    return d3_selection(subgroups);
+  };
+  function d3_selection_filter(selector) {
+    return function() {
+      return d3_selectMatches(this, selector);
+    };
+  }
+  d3_selectionPrototype.order = function() {
+    for (var j = -1, m = this.length; ++j < m; ) {
+      for (var group = this[j], i = group.length - 1, next = group[i], node; --i >= 0; ) {
+        if (node = group[i]) {
+          if (next && next !== node.nextSibling) next.parentNode.insertBefore(node, next);
+          next = node;
+        }
+      }
+    }
+    return this;
+  };
+  d3_selectionPrototype.sort = function(comparator) {
+    comparator = d3_selection_sortComparator.apply(this, arguments);
+    for (var j = -1, m = this.length; ++j < m; ) this[j].sort(comparator);
+    return this.order();
+  };
+  function d3_selection_sortComparator(comparator) {
+    if (!arguments.length) comparator = d3_ascending;
+    return function(a, b) {
+      return a && b ? comparator(a.__data__, b.__data__) : !a - !b;
+    };
+  }
+  d3_selectionPrototype.each = function(callback) {
+    return d3_selection_each(this, function(node, i, j) {
+      callback.call(node, node.__data__, i, j);
+    });
+  };
+  function d3_selection_each(groups, callback) {
+    for (var j = 0, m = groups.length; j < m; j++) {
+      for (var group = groups[j], i = 0, n = group.length, node; i < n; i++) {
+        if (node = group[i]) callback(node, i, j);
+      }
+    }
+    return groups;
+  }
+  d3_selectionPrototype.call = function(callback) {
+    var args = d3_array(arguments);
+    callback.apply(args[0] = this, args);
+    return this;
+  };
+  d3_selectionPrototype.empty = function() {
+    return !this.node();
+  };
+  d3_selectionPrototype.node = function() {
+    for (var j = 0, m = this.length; j < m; j++) {
+      for (var group = this[j], i = 0, n = group.length; i < n; i++) {
+        var node = group[i];
+        if (node) return node;
+      }
+    }
+    return null;
+  };
+  d3_selectionPrototype.size = function() {
+    var n = 0;
+    d3_selection_each(this, function() {
+      ++n;
+    });
+    return n;
+  };
+  function d3_selection_enter(selection) {
+    d3_subclass(selection, d3_selection_enterPrototype);
+    return selection;
+  }
+  var d3_selection_enterPrototype = [];
+  d3.selection.enter = d3_selection_enter;
+  d3.selection.enter.prototype = d3_selection_enterPrototype;
+  d3_selection_enterPrototype.append = d3_selectionPrototype.append;
+  d3_selection_enterPrototype.empty = d3_selectionPrototype.empty;
+  d3_selection_enterPrototype.node = d3_selectionPrototype.node;
+  d3_selection_enterPrototype.call = d3_selectionPrototype.call;
+  d3_selection_enterPrototype.size = d3_selectionPrototype.size;
+  d3_selection_enterPrototype.select = function(selector) {
+    var subgroups = [], subgroup, subnode, upgroup, group, node;
+    for (var j = -1, m = this.length; ++j < m; ) {
+      upgroup = (group = this[j]).update;
+      subgroups.push(subgroup = []);
+      subgroup.parentNode = group.parentNode;
+      for (var i = -1, n = group.length; ++i < n; ) {
+        if (node = group[i]) {
+          subgroup.push(upgroup[i] = subnode = selector.call(group.parentNode, node.__data__, i, j));
+          subnode.__data__ = node.__data__;
+        } else {
+          subgroup.push(null);
+        }
+      }
+    }
+    return d3_selection(subgroups);
+  };
+  d3_selection_enterPrototype.insert = function(name, before) {
+    if (arguments.length < 2) before = d3_selection_enterInsertBefore(this);
+    return d3_selectionPrototype.insert.call(this, name, before);
+  };
+  function d3_selection_enterInsertBefore(enter) {
+    var i0, j0;
+    return function(d, i, j) {
+      var group = enter[j].update, n = group.length, node;
+      if (j != j0) j0 = j, i0 = 0;
+      if (i >= i0) i0 = i + 1;
+      while (!(node = group[i0]) && ++i0 < n) ;
+      return node;
+    };
+  }
+  d3.select = function(node) {
+    var group;
+    if (typeof node === "string") {
+      group = [ d3_select(node, d3_document) ];
+      group.parentNode = d3_document.documentElement;
+    } else {
+      group = [ node ];
+      group.parentNode = d3_documentElement(node);
+    }
+    return d3_selection([ group ]);
+  };
+  d3.selectAll = function(nodes) {
+    var group;
+    if (typeof nodes === "string") {
+      group = d3_array(d3_selectAll(nodes, d3_document));
+      group.parentNode = d3_document.documentElement;
+    } else {
+      group = d3_array(nodes);
+      group.parentNode = null;
+    }
+    return d3_selection([ group ]);
+  };
+  d3_selectionPrototype.on = function(type, listener, capture) {
+    var n = arguments.length;
+    if (n < 3) {
+      if (typeof type !== "string") {
+        if (n < 2) listener = false;
+        for (capture in type) this.each(d3_selection_on(capture, type[capture], listener));
+        return this;
+      }
+      if (n < 2) return (n = this.node()["__on" + type]) && n._;
+      capture = false;
+    }
+    return this.each(d3_selection_on(type, listener, capture));
+  };
+  function d3_selection_on(type, listener, capture) {
+    var name = "__on" + type, i = type.indexOf("."), wrap = d3_selection_onListener;
+    if (i > 0) type = type.slice(0, i);
+    var filter = d3_selection_onFilters.get(type);
+    if (filter) type = filter, wrap = d3_selection_onFilter;
+    function onRemove() {
+      var l = this[name];
+      if (l) {
+        this.removeEventListener(type, l, l.$);
+        delete this[name];
+      }
+    }
+    function onAdd() {
+      var l = wrap(listener, d3_array(arguments));
+      onRemove.call(this);
+      this.addEventListener(type, this[name] = l, l.$ = capture);
+      l._ = listener;
+    }
+    function removeAll() {
+      var re = new RegExp("^__on([^.]+)" + d3.requote(type) + "$"), match;
+      for (var name in this) {
+        if (match = name.match(re)) {
+          var l = this[name];
+          this.removeEventListener(match[1], l, l.$);
+          delete this[name];
+        }
+      }
+    }
+    return i ? listener ? onAdd : onRemove : listener ? d3_noop : removeAll;
+  }
+  var d3_selection_onFilters = d3.map({
+    mouseenter: "mouseover",
+    mouseleave: "mouseout"
+  });
+  if (d3_document) {
+    d3_selection_onFilters.forEach(function(k) {
+      if ("on" + k in d3_document) d3_selection_onFilters.remove(k);
+    });
+  }
+  function d3_selection_onListener(listener, argumentz) {
+    return function(e) {
+      var o = d3.event;
+      d3.event = e;
+      argumentz[0] = this.__data__;
+      try {
+        listener.apply(this, argumentz);
+      } finally {
+        d3.event = o;
+      }
+    };
+  }
+  function d3_selection_onFilter(listener, argumentz) {
+    var l = d3_selection_onListener(listener, argumentz);
+    return function(e) {
+      var target = this, related = e.relatedTarget;
+      if (!related || related !== target && !(related.compareDocumentPosition(target) & 8)) {
+        l.call(target, e);
+      }
+    };
+  }
+  var d3_event_dragSelect, d3_event_dragId = 0;
+  function d3_event_dragSuppress(node) {
+    var name = ".dragsuppress-" + ++d3_event_dragId, click = "click" + name, w = d3.select(d3_window(node)).on("touchmove" + name, d3_eventPreventDefault).on("dragstart" + name, d3_eventPreventDefault).on("selectstart" + name, d3_eventPreventDefault);
+    if (d3_event_dragSelect == null) {
+      d3_event_dragSelect = "onselectstart" in node ? false : d3_vendorSymbol(node.style, "userSelect");
+    }
+    if (d3_event_dragSelect) {
+      var style = d3_documentElement(node).style, select = style[d3_event_dragSelect];
+      style[d3_event_dragSelect] = "none";
+    }
+    return function(suppressClick) {
+      w.on(name, null);
+      if (d3_event_dragSelect) style[d3_event_dragSelect] = select;
+      if (suppressClick) {
+        var off = function() {
+          w.on(click, null);
+        };
+        w.on(click, function() {
+          d3_eventPreventDefault();
+          off();
+        }, true);
+        setTimeout(off, 0);
+      }
+    };
+  }
+  d3.mouse = function(container) {
+    return d3_mousePoint(container, d3_eventSource());
+  };
+  var d3_mouse_bug44083 = this.navigator && /WebKit/.test(this.navigator.userAgent) ? -1 : 0;
+  function d3_mousePoint(container, e) {
+    if (e.changedTouches) e = e.changedTouches[0];
+    var svg = container.ownerSVGElement || container;
+    if (svg.createSVGPoint) {
+      var point = svg.createSVGPoint();
+      if (d3_mouse_bug44083 < 0) {
+        var window = d3_window(container);
+        if (window.scrollX || window.scrollY) {
+          svg = d3.select("body").append("svg").style({
+            position: "absolute",
+            top: 0,
+            left: 0,
+            margin: 0,
+            padding: 0,
+            border: "none"
+          }, "important");
+          var ctm = svg[0][0].getScreenCTM();
+          d3_mouse_bug44083 = !(ctm.f || ctm.e);
+          svg.remove();
+        }
+      }
+      if (d3_mouse_bug44083) point.x = e.pageX, point.y = e.pageY; else point.x = e.clientX, 
+      point.y = e.clientY;
+      point = point.matrixTransform(container.getScreenCTM().inverse());
+      return [ point.x, point.y ];
+    }
+    var rect = container.getBoundingClientRect();
+    return [ e.clientX - rect.left - container.clientLeft, e.clientY - rect.top - container.clientTop ];
+  }
+  d3.touch = function(container, touches, identifier) {
+    if (arguments.length < 3) identifier = touches, touches = d3_eventSource().changedTouches;
+    if (touches) for (var i = 0, n = touches.length, touch; i < n; ++i) {
+      if ((touch = touches[i]).identifier === identifier) {
+        return d3_mousePoint(container, touch);
+      }
+    }
+  };
+  d3.behavior.drag = function() {
+    var event = d3_eventDispatch(drag, "drag", "dragstart", "dragend"), origin = null, mousedown = dragstart(d3_noop, d3.mouse, d3_window, "mousemove", "mouseup"), touchstart = dragstart(d3_behavior_dragTouchId, d3.touch, d3_identity, "touchmove", "touchend");
+    function drag() {
+      this.on("mousedown.drag", mousedown).on("touchstart.drag", touchstart);
+    }
+    function dragstart(id, position, subject, move, end) {
+      return function() {
+        var that = this, target = d3.event.target.correspondingElement || d3.event.target, parent = that.parentNode, dispatch = event.of(that, arguments), dragged = 0, dragId = id(), dragName = ".drag" + (dragId == null ? "" : "-" + dragId), dragOffset, dragSubject = d3.select(subject(target)).on(move + dragName, moved).on(end + dragName, ended), dragRestore = d3_event_dragSuppress(target), position0 = position(parent, dragId);
+        if (origin) {
+          dragOffset = origin.apply(that, arguments);
+          dragOffset = [ dragOffset.x - position0[0], dragOffset.y - position0[1] ];
+        } else {
+          dragOffset = [ 0, 0 ];
+        }
+        dispatch({
+          type: "dragstart"
+        });
+        function moved() {
+          var position1 = position(parent, dragId), dx, dy;
+          if (!position1) return;
+          dx = position1[0] - position0[0];
+          dy = position1[1] - position0[1];
+          dragged |= dx | dy;
+          position0 = position1;
+          dispatch({
+            type: "drag",
+            x: position1[0] + dragOffset[0],
+            y: position1[1] + dragOffset[1],
+            dx: dx,
+            dy: dy
+          });
+        }
+        function ended() {
+          if (!position(parent, dragId)) return;
+          dragSubject.on(move + dragName, null).on(end + dragName, null);
+          dragRestore(dragged);
+          dispatch({
+            type: "dragend"
+          });
+        }
+      };
+    }
+    drag.origin = function(x) {
+      if (!arguments.length) return origin;
+      origin = x;
+      return drag;
+    };
+    return d3.rebind(drag, event, "on");
+  };
+  function d3_behavior_dragTouchId() {
+    return d3.event.changedTouches[0].identifier;
+  }
+  d3.touches = function(container, touches) {
+    if (arguments.length < 2) touches = d3_eventSource().touches;
+    return touches ? d3_array(touches).map(function(touch) {
+      var point = d3_mousePoint(container, touch);
+      point.identifier = touch.identifier;
+      return point;
+    }) : [];
+  };
+  var ε = 1e-6, ε2 = ε * ε, π = Math.PI, τ = 2 * π, τε = τ - ε, halfπ = π / 2, d3_radians = π / 180, d3_degrees = 180 / π;
+  function d3_sgn(x) {
+    return x > 0 ? 1 : x < 0 ? -1 : 0;
+  }
+  function d3_cross2d(a, b, c) {
+    return (b[0] - a[0]) * (c[1] - a[1]) - (b[1] - a[1]) * (c[0] - a[0]);
+  }
+  function d3_acos(x) {
+    return x > 1 ? 0 : x < -1 ? π : Math.acos(x);
+  }
+  function d3_asin(x) {
+    return x > 1 ? halfπ : x < -1 ? -halfπ : Math.asin(x);
+  }
+  function d3_sinh(x) {
+    return ((x = Math.exp(x)) - 1 / x) / 2;
+  }
+  function d3_cosh(x) {
+    return ((x = Math.exp(x)) + 1 / x) / 2;
+  }
+  function d3_tanh(x) {
+    return ((x = Math.exp(2 * x)) - 1) / (x + 1);
+  }
+  function d3_haversin(x) {
+    return (x = Math.sin(x / 2)) * x;
+  }
+  var ρ = Math.SQRT2, ρ2 = 2, ρ4 = 4;
+  d3.interpolateZoom = function(p0, p1) {
+    var ux0 = p0[0], uy0 = p0[1], w0 = p0[2], ux1 = p1[0], uy1 = p1[1], w1 = p1[2], dx = ux1 - ux0, dy = uy1 - uy0, d2 = dx * dx + dy * dy, i, S;
+    if (d2 < ε2) {
+      S = Math.log(w1 / w0) / ρ;
+      i = function(t) {
+        return [ ux0 + t * dx, uy0 + t * dy, w0 * Math.exp(ρ * t * S) ];
+      };
+    } else {
+      var d1 = Math.sqrt(d2), b0 = (w1 * w1 - w0 * w0 + ρ4 * d2) / (2 * w0 * ρ2 * d1), b1 = (w1 * w1 - w0 * w0 - ρ4 * d2) / (2 * w1 * ρ2 * d1), r0 = Math.log(Math.sqrt(b0 * b0 + 1) - b0), r1 = Math.log(Math.sqrt(b1 * b1 + 1) - b1);
+      S = (r1 - r0) / ρ;
+      i = function(t) {
+        var s = t * S, coshr0 = d3_cosh(r0), u = w0 / (ρ2 * d1) * (coshr0 * d3_tanh(ρ * s + r0) - d3_sinh(r0));
+        return [ ux0 + u * dx, uy0 + u * dy, w0 * coshr0 / d3_cosh(ρ * s + r0) ];
+      };
+    }
+    i.duration = S * 1e3;
+    return i;
+  };
+  d3.behavior.zoom = function() {
+    var view = {
+      x: 0,
+      y: 0,
+      k: 1
+    }, translate0, center0, center, size = [ 960, 500 ], scaleExtent = d3_behavior_zoomInfinity, duration = 250, zooming = 0, mousedown = "mousedown.zoom", mousemove = "mousemove.zoom", mouseup = "mouseup.zoom", mousewheelTimer, touchstart = "touchstart.zoom", touchtime, event = d3_eventDispatch(zoom, "zoomstart", "zoom", "zoomend"), x0, x1, y0, y1;
+    if (!d3_behavior_zoomWheel) {
+      d3_behavior_zoomWheel = "onwheel" in d3_document ? (d3_behavior_zoomDelta = function() {
+        return -d3.event.deltaY * (d3.event.deltaMode ? 120 : 1);
+      }, "wheel") : "onmousewheel" in d3_document ? (d3_behavior_zoomDelta = function() {
+        return d3.event.wheelDelta;
+      }, "mousewheel") : (d3_behavior_zoomDelta = function() {
+        return -d3.event.detail;
+      }, "MozMousePixelScroll");
+    }
+    function zoom(g) {
+      g.on(mousedown, mousedowned).on(d3_behavior_zoomWheel + ".zoom", mousewheeled).on("dblclick.zoom", dblclicked).on(touchstart, touchstarted);
+    }
+    zoom.event = function(g) {
+      g.each(function() {
+        var dispatch = event.of(this, arguments), view1 = view;
+        if (d3_transitionInheritId) {
+          d3.select(this).transition().each("start.zoom", function() {
+            view = this.__chart__ || {
+              x: 0,
+              y: 0,
+              k: 1
+            };
+            zoomstarted(dispatch);
+          }).tween("zoom:zoom", function() {
+            var dx = size[0], dy = size[1], cx = center0 ? center0[0] : dx / 2, cy = center0 ? center0[1] : dy / 2, i = d3.interpolateZoom([ (cx - view.x) / view.k, (cy - view.y) / view.k, dx / view.k ], [ (cx - view1.x) / view1.k, (cy - view1.y) / view1.k, dx / view1.k ]);
+            return function(t) {
+              var l = i(t), k = dx / l[2];
+              this.__chart__ = view = {
+                x: cx - l[0] * k,
+                y: cy - l[1] * k,
+                k: k
+              };
+              zoomed(dispatch);
+            };
+          }).each("interrupt.zoom", function() {
+            zoomended(dispatch);
+          }).each("end.zoom", function() {
+            zoomended(dispatch);
+          });
+        } else {
+          this.__chart__ = view;
+          zoomstarted(dispatch);
+          zoomed(dispatch);
+          zoomended(dispatch);
+        }
+      });
+    };
+    zoom.translate = function(_) {
+      if (!arguments.length) return [ view.x, view.y ];
+      view = {
+        x: +_[0],
+        y: +_[1],
+        k: view.k
+      };
+      rescale();
+      return zoom;
+    };
+    zoom.scale = function(_) {
+      if (!arguments.length) return view.k;
+      view = {
+        x: view.x,
+        y: view.y,
+        k: null
+      };
+      scaleTo(+_);
+      rescale();
+      return zoom;
+    };
+    zoom.scaleExtent = function(_) {
+      if (!arguments.length) return scaleExtent;
+      scaleExtent = _ == null ? d3_behavior_zoomInfinity : [ +_[0], +_[1] ];
+      return zoom;
+    };
+    zoom.center = function(_) {
+      if (!arguments.length) return center;
+      center = _ && [ +_[0], +_[1] ];
+      return zoom;
+    };
+    zoom.size = function(_) {
+      if (!arguments.length) return size;
+      size = _ && [ +_[0], +_[1] ];
+      return zoom;
+    };
+    zoom.duration = function(_) {
+      if (!arguments.length) return duration;
+      duration = +_;
+      return zoom;
+    };
+    zoom.x = function(z) {
+      if (!arguments.length) return x1;
+      x1 = z;
+      x0 = z.copy();
+      view = {
+        x: 0,
+        y: 0,
+        k: 1
+      };
+      return zoom;
+    };
+    zoom.y = function(z) {
+      if (!arguments.length) return y1;
+      y1 = z;
+      y0 = z.copy();
+      view = {
+        x: 0,
+        y: 0,
+        k: 1
+      };
+      return zoom;
+    };
+    function location(p) {
+      return [ (p[0] - view.x) / view.k, (p[1] - view.y) / view.k ];
+    }
+    function point(l) {
+      return [ l[0] * view.k + view.x, l[1] * view.k + view.y ];
+    }
+    function scaleTo(s) {
+      view.k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], s));
+    }
+    function translateTo(p, l) {
+      l = point(l);
+      view.x += p[0] - l[0];
+      view.y += p[1] - l[1];
+    }
+    function zoomTo(that, p, l, k) {
+      that.__chart__ = {
+        x: view.x,
+        y: view.y,
+        k: view.k
+      };
+      scaleTo(Math.pow(2, k));
+      translateTo(center0 = p, l);
+      that = d3.select(that);
+      if (duration > 0) that = that.transition().duration(duration);
+      that.call(zoom.event);
+    }
+    function rescale() {
+      if (x1) x1.domain(x0.range().map(function(x) {
+        return (x - view.x) / view.k;
+      }).map(x0.invert));
+      if (y1) y1.domain(y0.range().map(function(y) {
+        return (y - view.y) / view.k;
+      }).map(y0.invert));
+    }
+    function zoomstarted(dispatch) {
+      if (!zooming++) dispatch({
+        type: "zoomstart"
+      });
+    }
+    function zoomed(dispatch) {
+      rescale();
+      dispatch({
+        type: "zoom",
+        scale: view.k,
+        translate: [ view.x, view.y ]
+      });
+    }
+    function zoomended(dispatch) {
+      if (!--zooming) dispatch({
+        type: "zoomend"
+      }), center0 = null;
+    }
+    function mousedowned() {
+      var that = this, dispatch = event.of(that, arguments), dragged = 0, subject = d3.select(d3_window(that)).on(mousemove, moved).on(mouseup, ended), location0 = location(d3.mouse(that)), dragRestore = d3_event_dragSuppress(that);
+      d3_selection_interrupt.call(that);
+      zoomstarted(dispatch);
+      function moved() {
+        dragged = 1;
+        translateTo(d3.mouse(that), location0);
+        zoomed(dispatch);
+      }
+      function ended() {
+        subject.on(mousemove, null).on(mouseup, null);
+        dragRestore(dragged);
+        zoomended(dispatch);
+      }
+    }
+    function touchstarted() {
+      var that = this, dispatch = event.of(that, arguments), locations0 = {}, distance0 = 0, scale0, zoomName = ".zoom-" + d3.event.changedTouches[0].identifier, touchmove = "touchmove" + zoomName, touchend = "touchend" + zoomName, targets = [], subject = d3.select(that), dragRestore = d3_event_dragSuppress(that);
+      started();
+      zoomstarted(dispatch);
+      subject.on(mousedown, null).on(touchstart, started);
+      function relocate() {
+        var touches = d3.touches(that);
+        scale0 = view.k;
+        touches.forEach(function(t) {
+          if (t.identifier in locations0) locations0[t.identifier] = location(t);
+        });
+        return touches;
+      }
+      function started() {
+        var target = d3.event.target;
+        d3.select(target).on(touchmove, moved).on(touchend, ended);
+        targets.push(target);
+        var changed = d3.event.changedTouches;
+        for (var i = 0, n = changed.length; i < n; ++i) {
+          locations0[changed[i].identifier] = null;
+        }
+        var touches = relocate(), now = Date.now();
+        if (touches.length === 1) {
+          if (now - touchtime < 500) {
+            var p = touches[0];
+            zoomTo(that, p, locations0[p.identifier], Math.floor(Math.log(view.k) / Math.LN2) + 1);
+            d3_eventPreventDefault();
+          }
+          touchtime = now;
+        } else if (touches.length > 1) {
+          var p = touches[0], q = touches[1], dx = p[0] - q[0], dy = p[1] - q[1];
+          distance0 = dx * dx + dy * dy;
+        }
+      }
+      function moved() {
+        var touches = d3.touches(that), p0, l0, p1, l1;
+        d3_selection_interrupt.call(that);
+        for (var i = 0, n = touches.length; i < n; ++i, l1 = null) {
+          p1 = touches[i];
+          if (l1 = locations0[p1.identifier]) {
+            if (l0) break;
+            p0 = p1, l0 = l1;
+          }
+        }
+        if (l1) {
+          var distance1 = (distance1 = p1[0] - p0[0]) * distance1 + (distance1 = p1[1] - p0[1]) * distance1, scale1 = distance0 && Math.sqrt(distance1 / distance0);
+          p0 = [ (p0[0] + p1[0]) / 2, (p0[1] + p1[1]) / 2 ];
+          l0 = [ (l0[0] + l1[0]) / 2, (l0[1] + l1[1]) / 2 ];
+          scaleTo(scale1 * scale0);
+        }
+        touchtime = null;
+        translateTo(p0, l0);
+        zoomed(dispatch);
+      }
+      function ended() {
+        if (d3.event.touches.length) {
+          var changed = d3.event.changedTouches;
+          for (var i = 0, n = changed.length; i < n; ++i) {
+            delete locations0[changed[i].identifier];
+          }
+          for (var identifier in locations0) {
+            return void relocate();
+          }
+        }
+        d3.selectAll(targets).on(zoomName, null);
+        subject.on(mousedown, mousedowned).on(touchstart, touchstarted);
+        dragRestore();
+        zoomended(dispatch);
+      }
+    }
+    function mousewheeled() {
+      var dispatch = event.of(this, arguments);
+      if (mousewheelTimer) clearTimeout(mousewheelTimer); else d3_selection_interrupt.call(this), 
+      translate0 = location(center0 = center || d3.mouse(this)), zoomstarted(dispatch);
+      mousewheelTimer = setTimeout(function() {
+        mousewheelTimer = null;
+        zoomended(dispatch);
+      }, 50);
+      d3_eventPreventDefault();
+      scaleTo(Math.pow(2, d3_behavior_zoomDelta() * .002) * view.k);
+      translateTo(center0, translate0);
+      zoomed(dispatch);
+    }
+    function dblclicked() {
+      var p = d3.mouse(this), k = Math.log(view.k) / Math.LN2;
+      zoomTo(this, p, location(p), d3.event.shiftKey ? Math.ceil(k) - 1 : Math.floor(k) + 1);
+    }
+    return d3.rebind(zoom, event, "on");
+  };
+  var d3_behavior_zoomInfinity = [ 0, Infinity ], d3_behavior_zoomDelta, d3_behavior_zoomWheel;
+  d3.color = d3_color;
+  function d3_color() {}
+  d3_color.prototype.toString = function() {
+    return this.rgb() + "";
+  };
+  d3.hsl = d3_hsl;
+  function d3_hsl(h, s, l) {
+    return this instanceof d3_hsl ? void (this.h = +h, this.s = +s, this.l = +l) : arguments.length < 2 ? h instanceof d3_hsl ? new d3_hsl(h.h, h.s, h.l) : d3_rgb_parse("" + h, d3_rgb_hsl, d3_hsl) : new d3_hsl(h, s, l);
+  }
+  var d3_hslPrototype = d3_hsl.prototype = new d3_color();
+  d3_hslPrototype.brighter = function(k) {
+    k = Math.pow(.7, arguments.length ? k : 1);
+    return new d3_hsl(this.h, this.s, this.l / k);
+  };
+  d3_hslPrototype.darker = function(k) {
+    k = Math.pow(.7, arguments.length ? k : 1);
+    return new d3_hsl(this.h, this.s, k * this.l);
+  };
+  d3_hslPrototype.rgb = function() {
+    return d3_hsl_rgb(this.h, this.s, this.l);
+  };
+  function d3_hsl_rgb(h, s, l) {
+    var m1, m2;
+    h = isNaN(h) ? 0 : (h %= 360) < 0 ? h + 360 : h;
+    s = isNaN(s) ? 0 : s < 0 ? 0 : s > 1 ? 1 : s;
+    l = l < 0 ? 0 : l > 1 ? 1 : l;
+    m2 = l <= .5 ? l * (1 + s) : l + s - l * s;
+    m1 = 2 * l - m2;
+    function v(h) {
+      if (h > 360) h -= 360; else if (h < 0) h += 360;
+      if (h < 60) return m1 + (m2 - m1) * h / 60;
+      if (h < 180) return m2;
+      if (h < 240) return m1 + (m2 - m1) * (240 - h) / 60;
+      return m1;
+    }
+    function vv(h) {
+      return Math.round(v(h) * 255);
+    }
+    return new d3_rgb(vv(h + 120), vv(h), vv(h - 120));
+  }
+  d3.hcl = d3_hcl;
+  function d3_hcl(h, c, l) {
+    return this instanceof d3_hcl ? void (this.h = +h, this.c = +c, this.l = +l) : arguments.length < 2 ? h instanceof d3_hcl ? new d3_hcl(h.h, h.c, h.l) : h instanceof d3_lab ? d3_lab_hcl(h.l, h.a, h.b) : d3_lab_hcl((h = d3_rgb_lab((h = d3.rgb(h)).r, h.g, h.b)).l, h.a, h.b) : new d3_hcl(h, c, l);
+  }
+  var d3_hclPrototype = d3_hcl.prototype = new d3_color();
+  d3_hclPrototype.brighter = function(k) {
+    return new d3_hcl(this.h, this.c, Math.min(100, this.l + d3_lab_K * (arguments.length ? k : 1)));
+  };
+  d3_hclPrototype.darker = function(k) {
+    return new d3_hcl(this.h, this.c, Math.max(0, this.l - d3_lab_K * (arguments.length ? k : 1)));
+  };
+  d3_hclPrototype.rgb = function() {
+    return d3_hcl_lab(this.h, this.c, this.l).rgb();
+  };
+  function d3_hcl_lab(h, c, l) {
+    if (isNaN(h)) h = 0;
+    if (isNaN(c)) c = 0;
+    return new d3_lab(l, Math.cos(h *= d3_radians) * c, Math.sin(h) * c);
+  }
+  d3.lab = d3_lab;
+  function d3_lab(l, a, b) {
+    return this instanceof d3_lab ? void (this.l = +l, this.a = +a, this.b = +b) : arguments.length < 2 ? l instanceof d3_lab ? new d3_lab(l.l, l.a, l.b) : l instanceof d3_hcl ? d3_hcl_lab(l.h, l.c, l.l) : d3_rgb_lab((l = d3_rgb(l)).r, l.g, l.b) : new d3_lab(l, a, b);
+  }
+  var d3_lab_K = 18;
+  var d3_lab_X = .95047, d3_lab_Y = 1, d3_lab_Z = 1.08883;
+  var d3_labPrototype = d3_lab.prototype = new d3_color();
+  d3_labPrototype.brighter = function(k) {
+    return new d3_lab(Math.min(100, this.l + d3_lab_K * (arguments.length ? k : 1)), this.a, this.b);
+  };
+  d3_labPrototype.darker = function(k) {
+    return new d3_lab(Math.max(0, this.l - d3_lab_K * (arguments.length ? k : 1)), this.a, this.b);
+  };
+  d3_labPrototype.rgb = function() {
+    return d3_lab_rgb(this.l, this.a, this.b);
+  };
+  function d3_lab_rgb(l, a, b) {
+    var y = (l + 16) / 116, x = y + a / 500, z = y - b / 200;
+    x = d3_lab_xyz(x) * d3_lab_X;
+    y = d3_lab_xyz(y) * d3_lab_Y;
+    z = d3_lab_xyz(z) * d3_lab_Z;
+    return new d3_rgb(d3_xyz_rgb(3.2404542 * x - 1.5371385 * y - .4985314 * z), d3_xyz_rgb(-.969266 * x + 1.8760108 * y + .041556 * z), d3_xyz_rgb(.0556434 * x - .2040259 * y + 1.0572252 * z));
+  }
+  function d3_lab_hcl(l, a, b) {
+    return l > 0 ? new d3_hcl(Math.atan2(b, a) * d3_degrees, Math.sqrt(a * a + b * b), l) : new d3_hcl(NaN, NaN, l);
+  }
+  function d3_lab_xyz(x) {
+    return x > .206893034 ? x * x * x : (x - 4 / 29) / 7.787037;
+  }
+  function d3_xyz_lab(x) {
+    return x > .008856 ? Math.pow(x, 1 / 3) : 7.787037 * x + 4 / 29;
+  }
+  function d3_xyz_rgb(r) {
+    return Math.round(255 * (r <= .00304 ? 12.92 * r : 1.055 * Math.pow(r, 1 / 2.4) - .055));
+  }
+  d3.rgb = d3_rgb;
+  function d3_rgb(r, g, b) {
+    return this instanceof d3_rgb ? void (this.r = ~~r, this.g = ~~g, this.b = ~~b) : arguments.length < 2 ? r instanceof d3_rgb ? new d3_rgb(r.r, r.g, r.b) : d3_rgb_parse("" + r, d3_rgb, d3_hsl_rgb) : new d3_rgb(r, g, b);
+  }
+  function d3_rgbNumber(value) {
+    return new d3_rgb(value >> 16, value >> 8 & 255, value & 255);
+  }
+  function d3_rgbString(value) {
+    return d3_rgbNumber(value) + "";
+  }
+  var d3_rgbPrototype = d3_rgb.prototype = new d3_color();
+  d3_rgbPrototype.brighter = function(k) {
+    k = Math.pow(.7, arguments.length ? k : 1);
+    var r = this.r, g = this.g, b = this.b, i = 30;
+    if (!r && !g && !b) return new d3_rgb(i, i, i);
+    if (r && r < i) r = i;
+    if (g && g < i) g = i;
+    if (b && b < i) b = i;
+    return new d3_rgb(Math.min(255, r / k), Math.min(255, g / k), Math.min(255, b / k));
+  };
+  d3_rgbPrototype.darker = function(k) {
+    k = Math.pow(.7, arguments.length ? k : 1);
+    return new d3_rgb(k * this.r, k * this.g, k * this.b);
+  };
+  d3_rgbPrototype.hsl = function() {
+    return d3_rgb_hsl(this.r, this.g, this.b);
+  };
+  d3_rgbPrototype.toString = function() {
+    return "#" + d3_rgb_hex(this.r) + d3_rgb_hex(this.g) + d3_rgb_hex(this.b);
+  };
+  function d3_rgb_hex(v) {
+    return v < 16 ? "0" + Math.max(0, v).toString(16) : Math.min(255, v).toString(16);
+  }
+  function d3_rgb_parse(format, rgb, hsl) {
+    var r = 0, g = 0, b = 0, m1, m2, color;
+    m1 = /([a-z]+)\((.*)\)/.exec(format = format.toLowerCase());
+    if (m1) {
+      m2 = m1[2].split(",");
+      switch (m1[1]) {
+       case "hsl":
+        {
+          return hsl(parseFloat(m2[0]), parseFloat(m2[1]) / 100, parseFloat(m2[2]) / 100);
+        }
+
+       case "rgb":
+        {
+          return rgb(d3_rgb_parseNumber(m2[0]), d3_rgb_parseNumber(m2[1]), d3_rgb_parseNumber(m2[2]));
+        }
+      }
+    }
+    if (color = d3_rgb_names.get(format)) {
+      return rgb(color.r, color.g, color.b);
+    }
+    if (format != null && format.charAt(0) === "#" && !isNaN(color = parseInt(format.slice(1), 16))) {
+      if (format.length === 4) {
+        r = (color & 3840) >> 4;
+        r = r >> 4 | r;
+        g = color & 240;
+        g = g >> 4 | g;
+        b = color & 15;
+        b = b << 4 | b;
+      } else if (format.length === 7) {
+        r = (color & 16711680) >> 16;
+        g = (color & 65280) >> 8;
+        b = color & 255;
+      }
+    }
+    return rgb(r, g, b);
+  }
+  function d3_rgb_hsl(r, g, b) {
+    var min = Math.min(r /= 255, g /= 255, b /= 255), max = Math.max(r, g, b), d = max - min, h, s, l = (max + min) / 2;
+    if (d) {
+      s = l < .5 ? d / (max + min) : d / (2 - max - min);
+      if (r == max) h = (g - b) / d + (g < b ? 6 : 0); else if (g == max) h = (b - r) / d + 2; else h = (r - g) / d + 4;
+      h *= 60;
+    } else {
+      h = NaN;
+      s = l > 0 && l < 1 ? 0 : h;
+    }
+    return new d3_hsl(h, s, l);
+  }
+  function d3_rgb_lab(r, g, b) {
+    r = d3_rgb_xyz(r);
+    g = d3_rgb_xyz(g);
+    b = d3_rgb_xyz(b);
+    var x = d3_xyz_lab((.4124564 * r + .3575761 * g + .1804375 * b) / d3_lab_X), y = d3_xyz_lab((.2126729 * r + .7151522 * g + .072175 * b) / d3_lab_Y), z = d3_xyz_lab((.0193339 * r + .119192 * g + .9503041 * b) / d3_lab_Z);
+    return d3_lab(116 * y - 16, 500 * (x - y), 200 * (y - z));
+  }
+  function d3_rgb_xyz(r) {
+    return (r /= 255) <= .04045 ? r / 12.92 : Math.pow((r + .055) / 1.055, 2.4);
+  }
+  function d3_rgb_parseNumber(c) {
+    var f = parseFloat(c);
+    return c.charAt(c.length - 1) === "%" ? Math.round(f * 2.55) : f;
+  }
+  var d3_rgb_names = d3.map({
+    aliceblue: 15792383,
+    antiquewhite: 16444375,
+    aqua: 65535,
+    aquamarine: 8388564,
+    azure: 15794175,
+    beige: 16119260,
+    bisque: 16770244,
+    black: 0,
+    blanchedalmond: 16772045,
+    blue: 255,
+    blueviolet: 9055202,
+    brown: 10824234,
+    burlywood: 14596231,
+    cadetblue: 6266528,
+    chartreuse: 8388352,
+    chocolate: 13789470,
+    coral: 16744272,
+    cornflowerblue: 6591981,
+    cornsilk: 16775388,
+    crimson: 14423100,
+    cyan: 65535,
+    darkblue: 139,
+    darkcyan: 35723,
+    darkgoldenrod: 12092939,
+    darkgray: 11119017,
+    darkgreen: 25600,
+    darkgrey: 11119017,
+    darkkhaki: 12433259,
+    darkmagenta: 9109643,
+    darkolivegreen: 5597999,
+    darkorange: 16747520,
+    darkorchid: 10040012,
+    darkred: 9109504,
+    darksalmon: 15308410,
+    darkseagreen: 9419919,
+    darkslateblue: 4734347,
+    darkslategray: 3100495,
+    darkslategrey: 3100495,
+    darkturquoise: 52945,
+    darkviolet: 9699539,
+    deeppink: 16716947,
+    deepskyblue: 49151,
+    dimgray: 6908265,
+    dimgrey: 6908265,
+    dodgerblue: 2003199,
+    firebrick: 11674146,
+    floralwhite: 16775920,
+    forestgreen: 2263842,
+    fuchsia: 16711935,
+    gainsboro: 14474460,
+    ghostwhite: 16316671,
+    gold: 16766720,
+    goldenrod: 14329120,
+    gray: 8421504,
+    green: 32768,
+    greenyellow: 11403055,
+    grey: 8421504,
+    honeydew: 15794160,
+    hotpink: 16738740,
+    indianred: 13458524,
+    indigo: 4915330,
+    ivory: 16777200,
+    khaki: 15787660,
+    lavender: 15132410,
+    lavenderblush: 16773365,
+    lawngreen: 8190976,
+    lemonchiffon: 16775885,
+    lightblue: 11393254,
+    lightcoral: 15761536,
+    lightcyan: 14745599,
+    lightgoldenrodyellow: 16448210,
+    lightgray: 13882323,
+    lightgreen: 9498256,
+    lightgrey: 13882323,
+    lightpink: 16758465,
+    lightsalmon: 16752762,
+    lightseagreen: 2142890,
+    lightskyblue: 8900346,
+    lightslategray: 7833753,
+    lightslategrey: 7833753,
+    lightsteelblue: 11584734,
+    lightyellow: 16777184,
+    lime: 65280,
+    limegreen: 3329330,
+    linen: 16445670,
+    magenta: 16711935,
+    maroon: 8388608,
+    mediumaquamarine: 6737322,
+    mediumblue: 205,
+    mediumorchid: 12211667,
+    mediumpurple: 9662683,
+    mediumseagreen: 3978097,
+    mediumslateblue: 8087790,
+    mediumspringgreen: 64154,
+    mediumturquoise: 4772300,
+    mediumvioletred: 13047173,
+    midnightblue: 1644912,
+    mintcream: 16121850,
+    mistyrose: 16770273,
+    moccasin: 16770229,
+    navajowhite: 16768685,
+    navy: 128,
+    oldlace: 16643558,
+    olive: 8421376,
+    olivedrab: 7048739,
+    orange: 16753920,
+    orangered: 16729344,
+    orchid: 14315734,
+    palegoldenrod: 15657130,
+    palegreen: 10025880,
+    paleturquoise: 11529966,
+    palevioletred: 14381203,
+    papayawhip: 16773077,
+    peachpuff: 16767673,
+    peru: 13468991,
+    pink: 16761035,
+    plum: 14524637,
+    powderblue: 11591910,
+    purple: 8388736,
+    rebeccapurple: 6697881,
+    red: 16711680,
+    rosybrown: 12357519,
+    royalblue: 4286945,
+    saddlebrown: 9127187,
+    salmon: 16416882,
+    sandybrown: 16032864,
+    seagreen: 3050327,
+    seashell: 16774638,
+    sienna: 10506797,
+    silver: 12632256,
+    skyblue: 8900331,
+    slateblue: 6970061,
+    slategray: 7372944,
+    slategrey: 7372944,
+    snow: 16775930,
+    springgreen: 65407,
+    steelblue: 4620980,
+    tan: 13808780,
+    teal: 32896,
+    thistle: 14204888,
+    tomato: 16737095,
+    turquoise: 4251856,
+    violet: 15631086,
+    wheat: 16113331,
+    white: 16777215,
+    whitesmoke: 16119285,
+    yellow: 16776960,
+    yellowgreen: 10145074
+  });
+  d3_rgb_names.forEach(function(key, value) {
+    d3_rgb_names.set(key, d3_rgbNumber(value));
+  });
+  function d3_functor(v) {
+    return typeof v === "function" ? v : function() {
+      return v;
+    };
+  }
+  d3.functor = d3_functor;
+  d3.xhr = d3_xhrType(d3_identity);
+  function d3_xhrType(response) {
+    return function(url, mimeType, callback) {
+      if (arguments.length === 2 && typeof mimeType === "function") callback = mimeType, 
+      mimeType = null;
+      return d3_xhr(url, mimeType, response, callback);
+    };
+  }
+  function d3_xhr(url, mimeType, response, callback) {
+    var xhr = {}, dispatch = d3.dispatch("beforesend", "progress", "load", "error"), headers = {}, request = new XMLHttpRequest(), responseType = null;
+    if (this.XDomainRequest && !("withCredentials" in request) && /^(http(s)?:)?\/\//.test(url)) request = new XDomainRequest();
+    "onload" in request ? request.onload = request.onerror = respond : request.onreadystatechange = function() {
+      request.readyState > 3 && respond();
+    };
+    function respond() {
+      var status = request.status, result;
+      if (!status && d3_xhrHasResponse(request) || status >= 200 && status < 300 || status === 304) {
+        try {
+          result = response.call(xhr, request);
+        } catch (e) {
+          dispatch.error.call(xhr, e);
+          return;
+        }
+        dispatch.load.call(xhr, result);
+      } else {
+        dispatch.error.call(xhr, request);
+      }
+    }
+    request.onprogress = function(event) {
+      var o = d3.event;
+      d3.event = event;
+      try {
+        dispatch.progress.call(xhr, request);
+      } finally {
+        d3.event = o;
+      }
+    };
+    xhr.header = function(name, value) {
+      name = (name + "").toLowerCase();
+      if (arguments.length < 2) return headers[name];
+      if (value == null) delete headers[name]; else headers[name] = value + "";
+      return xhr;
+    };
+    xhr.mimeType = function(value) {
+      if (!arguments.length) return mimeType;
+      mimeType = value == null ? null : value + "";
+      return xhr;
+    };
+    xhr.responseType = function(value) {
+      if (!arguments.length) return responseType;
+      responseType = value;
+      return xhr;
+    };
+    xhr.response = function(value) {
+      response = value;
+      return xhr;
+    };
+    [ "get", "post" ].forEach(function(method) {
+      xhr[method] = function() {
+        return xhr.send.apply(xhr, [ method ].concat(d3_array(arguments)));
+      };
+    });
+    xhr.send = function(method, data, callback) {
+      if (arguments.length === 2 && typeof data === "function") callback = data, data = null;
+      request.open(method, url, true);
+      if (mimeType != null && !("accept" in headers)) headers["accept"] = mimeType + ",*/*";
+      if (request.setRequestHeader) for (var name in headers) request.setRequestHeader(name, headers[name]);
+      if (mimeType != null && request.overrideMimeType) request.overrideMimeType(mimeType);
+      if (responseType != null) request.responseType = responseType;
+      if (callback != null) xhr.on("error", callback).on("load", function(request) {
+        callback(null, request);
+      });
+      dispatch.beforesend.call(xhr, request);
+      request.send(data == null ? null : data);
+      return xhr;
+    };
+    xhr.abort = function() {
+      request.abort();
+      return xhr;
+    };
+    d3.rebind(xhr, dispatch, "on");
+    return callback == null ? xhr : xhr.get(d3_xhr_fixCallback(callback));
+  }
+  function d3_xhr_fixCallback(callback) {
+    return callback.length === 1 ? function(error, request) {
+      callback(error == null ? request : null);
+    } : callback;
+  }
+  function d3_xhrHasResponse(request) {
+    var type = request.responseType;
+    return type && type !== "text" ? request.response : request.responseText;
+  }
+  d3.dsv = function(delimiter, mimeType) {
+    var reFormat = new RegExp('["' + delimiter + "\n]"), delimiterCode = delimiter.charCodeAt(0);
+    function dsv(url, row, callback) {
+      if (arguments.length < 3) callback = row, row = null;
+      var xhr = d3_xhr(url, mimeType, row == null ? response : typedResponse(row), callback);
+      xhr.row = function(_) {
+        return arguments.length ? xhr.response((row = _) == null ? response : typedResponse(_)) : row;
+      };
+      return xhr;
+    }
+    function response(request) {
+      return dsv.parse(request.responseText);
+    }
+    function typedResponse(f) {
+      return function(request) {
+        return dsv.parse(request.responseText, f);
+      };
+    }
+    dsv.parse = function(text, f) {
+      var o;
+      return dsv.parseRows(text, function(row, i) {
+        if (o) return o(row, i - 1);
+        var a = new Function("d", "return {" + row.map(function(name, i) {
+          return JSON.stringify(name) + ": d[" + i + "]";
+        }).join(",") + "}");
+        o = f ? function(row, i) {
+          return f(a(row), i);
+        } : a;
+      });
+    };
+    dsv.parseRows = function(text, f) {
+      var EOL = {}, EOF = {}, rows = [], N = text.length, I = 0, n = 0, t, eol;
+      function token() {
+        if (I >= N) return EOF;
+        if (eol) return eol = false, EOL;
+        var j = I;
+        if (text.charCodeAt(j) === 34) {
+          var i = j;
+          while (i++ < N) {
+            if (text.charCodeAt(i) === 34) {
+              if (text.charCodeAt(i + 1) !== 34) break;
+              ++i;
+            }
+          }
+          I = i + 2;
+          var c = text.charCodeAt(i + 1);
+          if (c === 13) {
+            eol = true;
+            if (text.charCodeAt(i + 2) === 10) ++I;
+          } else if (c === 10) {
+            eol = true;
+          }
+          return text.slice(j + 1, i).replace(/""/g, '"');
+        }
+        while (I < N) {
+          var c = text.charCodeAt(I++), k = 1;
+          if (c === 10) eol = true; else if (c === 13) {
+            eol = true;
+            if (text.charCodeAt(I) === 10) ++I, ++k;
+          } else if (c !== delimiterCode) continue;
+          return text.slice(j, I - k);
+        }
+        return text.slice(j);
+      }
+      while ((t = token()) !== EOF) {
+        var a = [];
+        while (t !== EOL && t !== EOF) {
+          a.push(t);
+          t = token();
+        }
+        if (f && (a = f(a, n++)) == null) continue;
+        rows.push(a);
+      }
+      return rows;
+    };
+    dsv.format = function(rows) {
+      if (Array.isArray(rows[0])) return dsv.formatRows(rows);
+      var fieldSet = new d3_Set(), fields = [];
+      rows.forEach(function(row) {
+        for (var field in row) {
+          if (!fieldSet.has(field)) {
+            fields.push(fieldSet.add(field));
+          }
+        }
+      });
+      return [ fields.map(formatValue).join(delimiter) ].concat(rows.map(function(row) {
+        return fields.map(function(field) {
+          return formatValue(row[field]);
+        }).join(delimiter);
+      })).join("\n");
+    };
+    dsv.formatRows = function(rows) {
+      return rows.map(formatRow).join("\n");
+    };
+    function formatRow(row) {
+      return row.map(formatValue).join(delimiter);
+    }
+    function formatValue(text) {
+      return reFormat.test(text) ? '"' + text.replace(/\"/g, '""') + '"' : text;
+    }
+    return dsv;
+  };
+  d3.csv = d3.dsv(",", "text/csv");
+  d3.tsv = d3.dsv("	", "text/tab-separated-values");
+  var d3_timer_queueHead, d3_timer_queueTail, d3_timer_interval, d3_timer_timeout, d3_timer_frame = this[d3_vendorSymbol(this, "requestAnimationFrame")] || function(callback) {
+    setTimeout(callback, 17);
+  };
+  d3.timer = function() {
+    d3_timer.apply(this, arguments);
+  };
+  function d3_timer(callback, delay, then) {
+    var n = arguments.length;
+    if (n < 2) delay = 0;
+    if (n < 3) then = Date.now();
+    var time = then + delay, timer = {
+      c: callback,
+      t: time,
+      n: null
+    };
+    if (d3_timer_queueTail) d3_timer_queueTail.n = timer; else d3_timer_queueHead = timer;
+    d3_timer_queueTail = timer;
+    if (!d3_timer_interval) {
+      d3_timer_timeout = clearTimeout(d3_timer_timeout);
+      d3_timer_interval = 1;
+      d3_timer_frame(d3_timer_step);
+    }
+    return timer;
+  }
+  function d3_timer_step() {
+    var now = d3_timer_mark(), delay = d3_timer_sweep() - now;
+    if (delay > 24) {
+      if (isFinite(delay)) {
+        clearTimeout(d3_timer_timeout);
+        d3_timer_timeout = setTimeout(d3_timer_step, delay);
+      }
+      d3_timer_interval = 0;
+    } else {
+      d3_timer_interval = 1;
+      d3_timer_frame(d3_timer_step);
+    }
+  }
+  d3.timer.flush = function() {
+    d3_timer_mark();
+    d3_timer_sweep();
+  };
+  function d3_timer_mark() {
+    var now = Date.now(), timer = d3_timer_queueHead;
+    while (timer) {
+      if (now >= timer.t && timer.c(now - timer.t)) timer.c = null;
+      timer = timer.n;
+    }
+    return now;
+  }
+  function d3_timer_sweep() {
+    var t0, t1 = d3_timer_queueHead, time = Infinity;
+    while (t1) {
+      if (t1.c) {
+        if (t1.t < time) time = t1.t;
+        t1 = (t0 = t1).n;
+      } else {
+        t1 = t0 ? t0.n = t1.n : d3_timer_queueHead = t1.n;
+      }
+    }
+    d3_timer_queueTail = t0;
+    return time;
+  }
+  function d3_format_precision(x, p) {
+    return p - (x ? Math.ceil(Math.log(x) / Math.LN10) : 1);
+  }
+  d3.round = function(x, n) {
+    return n ? Math.round(x * (n = Math.pow(10, n))) / n : Math.round(x);
+  };
+  var d3_formatPrefixes = [ "y", "z", "a", "f", "p", "n", "µ", "m", "", "k", "M", "G", "T", "P", "E", "Z", "Y" ].map(d3_formatPrefix);
+  d3.formatPrefix = function(value, precision) {
+    var i = 0;
+    if (value = +value) {
+      if (value < 0) value *= -1;
+      if (precision) value = d3.round(value, d3_format_precision(value, precision));
+      i = 1 + Math.floor(1e-12 + Math.log(value) / Math.LN10);
+      i = Math.max(-24, Math.min(24, Math.floor((i - 1) / 3) * 3));
+    }
+    return d3_formatPrefixes[8 + i / 3];
+  };
+  function d3_formatPrefix(d, i) {
+    var k = Math.pow(10, abs(8 - i) * 3);
+    return {
+      scale: i > 8 ? function(d) {
+        return d / k;
+      } : function(d) {
+        return d * k;
+      },
+      symbol: d
+    };
+  }
+  function d3_locale_numberFormat(locale) {
+    var locale_decimal = locale.decimal, locale_thousands = locale.thousands, locale_grouping = locale.grouping, locale_currency = locale.currency, formatGroup = locale_grouping && locale_thousands ? function(value, width) {
+      var i = value.length, t = [], j = 0, g = locale_grouping[0], length = 0;
+      while (i > 0 && g > 0) {
+        if (length + g + 1 > width) g = Math.max(1, width - length);
+        t.push(value.substring(i -= g, i + g));
+        if ((length += g + 1) > width) break;
+        g = locale_grouping[j = (j + 1) % locale_grouping.length];
+      }
+      return t.reverse().join(locale_thousands);
+    } : d3_identity;
+    return function(specifier) {
+      var match = d3_format_re.exec(specifier), fill = match[1] || " ", align = match[2] || ">", sign = match[3] || "-", symbol = match[4] || "", zfill = match[5], width = +match[6], comma = match[7], precision = match[8], type = match[9], scale = 1, prefix = "", suffix = "", integer = false, exponent = true;
+      if (precision) precision = +precision.substring(1);
+      if (zfill || fill === "0" && align === "=") {
+        zfill = fill = "0";
+        align = "=";
+      }
+      switch (type) {
+       case "n":
+        comma = true;
+        type = "g";
+        break;
+
+       case "%":
+        scale = 100;
+        suffix = "%";
+        type = "f";
+        break;
+
+       case "p":
+        scale = 100;
+        suffix = "%";
+        type = "r";
+        break;
+
+       case "b":
+       case "o":
+       case "x":
+       case "X":
+        if (symbol === "#") prefix = "0" + type.toLowerCase();
+
+       case "c":
+        exponent = false;
+
+       case "d":
+        integer = true;
+        precision = 0;
+        break;
+
+       case "s":
+        scale = -1;
+        type = "r";
+        break;
+      }
+      if (symbol === "$") prefix = locale_currency[0], suffix = locale_currency[1];
+      if (type == "r" && !precision) type = "g";
+      if (precision != null) {
+        if (type == "g") precision = Math.max(1, Math.min(21, precision)); else if (type == "e" || type == "f") precision = Math.max(0, Math.min(20, precision));
+      }
+      type = d3_format_types.get(type) || d3_format_typeDefault;
+      var zcomma = zfill && comma;
+      return function(value) {
+        var fullSuffix = suffix;
+        if (integer && value % 1) return "";
+        var negative = value < 0 || value === 0 && 1 / value < 0 ? (value = -value, "-") : sign === "-" ? "" : sign;
+        if (scale < 0) {
+          var unit = d3.formatPrefix(value, precision);
+          value = unit.scale(value);
+          fullSuffix = unit.symbol + suffix;
+        } else {
+          value *= scale;
+        }
+        value = type(value, precision);
+        var i = value.lastIndexOf("."), before, after;
+        if (i < 0) {
+          var j = exponent ? value.lastIndexOf("e") : -1;
+          if (j < 0) before = value, after = ""; else before = value.substring(0, j), after = value.substring(j);
+        } else {
+          before = value.substring(0, i);
+          after = locale_decimal + value.substring(i + 1);
+        }
+        if (!zfill && comma) before = formatGroup(before, Infinity);
+        var length = prefix.length + before.length + after.length + (zcomma ? 0 : negative.length), padding = length < width ? new Array(length = width - length + 1).join(fill) : "";
+        if (zcomma) before = formatGroup(padding + before, padding.length ? width - after.length : Infinity);
+        negative += prefix;
+        value = before + after;
+        return (align === "<" ? negative + value + padding : align === ">" ? padding + negative + value : align === "^" ? padding.substring(0, length >>= 1) + negative + value + padding.substring(length) : negative + (zcomma ? value : padding + value)) + fullSuffix;
+      };
+    };
+  }
+  var d3_format_re = /(?:([^{])?([<>=^]))?([+\- ])?([$#])?(0)?(\d+)?(,)?(\.-?\d+)?([a-z%])?/i;
+  var d3_format_types = d3.map({
+    b: function(x) {
+      return x.toString(2);
+    },
+    c: function(x) {
+      return String.fromCharCode(x);
+    },
+    o: function(x) {
+      return x.toString(8);
+    },
+    x: function(x) {
+      return x.toString(16);
+    },
+    X: function(x) {
+      return x.toString(16).toUpperCase();
+    },
+    g: function(x, p) {
+      return x.toPrecision(p);
+    },
+    e: function(x, p) {
+      return x.toExponential(p);
+    },
+    f: function(x, p) {
+      return x.toFixed(p);
+    },
+    r: function(x, p) {
+      return (x = d3.round(x, d3_format_precision(x, p))).toFixed(Math.max(0, Math.min(20, d3_format_precision(x * (1 + 1e-15), p))));
+    }
+  });
+  function d3_format_typeDefault(x) {
+    return x + "";
+  }
+  var d3_time = d3.time = {}, d3_date = Date;
+  function d3_date_utc() {
+    this._ = new Date(arguments.length > 1 ? Date.UTC.apply(this, arguments) : arguments[0]);
+  }
+  d3_date_utc.prototype = {
+    getDate: function() {
+      return this._.getUTCDate();
+    },
+    getDay: function() {
+      return this._.getUTCDay();
+    },
+    getFullYear: function() {
+      return this._.getUTCFullYear();
+    },
+    getHours: function() {
+      return this._.getUTCHours();
+    },
+    getMilliseconds: function() {
+      return this._.getUTCMilliseconds();
+    },
+    getMinutes: function() {
+      return this._.getUTCMinutes();
+    },
+    getMonth: function() {
+      return this._.getUTCMonth();
+    },
+    getSeconds: function() {
+      return this._.getUTCSeconds();
+    },
+    getTime: function() {
+      return this._.getTime();
+    },
+    getTimezoneOffset: function() {
+      return 0;
+    },
+    valueOf: function() {
+      return this._.valueOf();
+    },
+    setDate: function() {
+      d3_time_prototype.setUTCDate.apply(this._, arguments);
+    },
+    setDay: function() {
+      d3_time_prototype.setUTCDay.apply(this._, arguments);
+    },
+    setFullYear: function() {
+      d3_time_prototype.setUTCFullYear.apply(this._, arguments);
+    },
+    setHours: function() {
+      d3_time_prototype.setUTCHours.apply(this._, arguments);
+    },
+    setMilliseconds: function() {
+      d3_time_prototype.setUTCMilliseconds.apply(this._, arguments);
+    },
+    setMinutes: function() {
+      d3_time_prototype.setUTCMinutes.apply(this._, arguments);
+    },
+    setMonth: function() {
+      d3_time_prototype.setUTCMonth.apply(this._, arguments);
+    },
+    setSeconds: function() {
+      d3_time_prototype.setUTCSeconds.apply(this._, arguments);
+    },
+    setTime: function() {
+      d3_time_prototype.setTime.apply(this._, arguments);
+    }
+  };
+  var d3_time_prototype = Date.prototype;
+  function d3_time_interval(local, step, number) {
+    function round(date) {
+      var d0 = local(date), d1 = offset(d0, 1);
+      return date - d0 < d1 - date ? d0 : d1;
+    }
+    function ceil(date) {
+      step(date = local(new d3_date(date - 1)), 1);
+      return date;
+    }
+    function offset(date, k) {
+      step(date = new d3_date(+date), k);
+      return date;
+    }
+    function range(t0, t1, dt) {
+      var time = ceil(t0), times = [];
+      if (dt > 1) {
+        while (time < t1) {
+          if (!(number(time) % dt)) times.push(new Date(+time));
+          step(time, 1);
+        }
+      } else {
+        while (time < t1) times.push(new Date(+time)), step(time, 1);
+      }
+      return times;
+    }
+    function range_utc(t0, t1, dt) {
+      try {
+        d3_date = d3_date_utc;
+        var utc = new d3_date_utc();
+        utc._ = t0;
+        return range(utc, t1, dt);
+      } finally {
+        d3_date = Date;
+      }
+    }
+    local.floor = local;
+    local.round = round;
+    local.ceil = ceil;
+    local.offset = offset;
+    local.range = range;
+    var utc = local.utc = d3_time_interval_utc(local);
+    utc.floor = utc;
+    utc.round = d3_time_interval_utc(round);
+    utc.ceil = d3_time_interval_utc(ceil);
+    utc.offset = d3_time_interval_utc(offset);
+    utc.range = range_utc;
+    return local;
+  }
+  function d3_time_interval_utc(method) {
+    return function(date, k) {
+      try {
+        d3_date = d3_date_utc;
+        var utc = new d3_date_utc();
+        utc._ = date;
+        return method(utc, k)._;
+      } finally {
+        d3_date = Date;
+      }
+    };
+  }
+  d3_time.year = d3_time_interval(function(date) {
+    date = d3_time.day(date);
+    date.setMonth(0, 1);
+    return date;
+  }, function(date, offset) {
+    date.setFullYear(date.getFullYear() + offset);
+  }, function(date) {
+    return date.getFullYear();
+  });
+  d3_time.years = d3_time.year.range;
+  d3_time.years.utc = d3_time.year.utc.range;
+  d3_time.day = d3_time_interval(function(date) {
+    var day = new d3_date(2e3, 0);
+    day.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
+    return day;
+  }, function(date, offset) {
+    date.setDate(date.getDate() + offset);
+  }, function(date) {
+    return date.getDate() - 1;
+  });
+  d3_time.days = d3_time.day.range;
+  d3_time.days.utc = d3_time.day.utc.range;
+  d3_time.dayOfYear = function(date) {
+    var year = d3_time.year(date);
+    return Math.floor((date - year - (date.getTimezoneOffset() - year.getTimezoneOffset()) * 6e4) / 864e5);
+  };
+  [ "sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday" ].forEach(function(day, i) {
+    i = 7 - i;
+    var interval = d3_time[day] = d3_time_interval(function(date) {
+      (date = d3_time.day(date)).setDate(date.getDate() - (date.getDay() + i) % 7);
+      return date;
+    }, function(date, offset) {
+      date.setDate(date.getDate() + Math.floor(offset) * 7);
+    }, function(date) {
+      var day = d3_time.year(date).getDay();
+      return Math.floor((d3_time.dayOfYear(date) + (day + i) % 7) / 7) - (day !== i);
+    });
+    d3_time[day + "s"] = interval.range;
+    d3_time[day + "s"].utc = interval.utc.range;
+    d3_time[day + "OfYear"] = function(date) {
+      var day = d3_time.year(date).getDay();
+      return Math.floor((d3_time.dayOfYear(date) + (day + i) % 7) / 7);
+    };
+  });
+  d3_time.week = d3_time.sunday;
+  d3_time.weeks = d3_time.sunday.range;
+  d3_time.weeks.utc = d3_time.sunday.utc.range;
+  d3_time.weekOfYear = d3_time.sundayOfYear;
+  function d3_locale_timeFormat(locale) {
+    var locale_dateTime = locale.dateTime, locale_date = locale.date, locale_time = locale.time, locale_periods = locale.periods, locale_days = locale.days, locale_shortDays = locale.shortDays, locale_months = locale.months, locale_shortMonths = locale.shortMonths;
+    function d3_time_format(template) {
+      var n = template.length;
+      function format(date) {
+        var string = [], i = -1, j = 0, c, p, f;
+        while (++i < n) {
+          if (template.charCodeAt(i) === 37) {
+            string.push(template.slice(j, i));
+            if ((p = d3_time_formatPads[c = template.charAt(++i)]) != null) c = template.charAt(++i);
+            if (f = d3_time_formats[c]) c = f(date, p == null ? c === "e" ? " " : "0" : p);
+            string.push(c);
+            j = i + 1;
+          }
+        }
+        string.push(template.slice(j, i));
+        return string.join("");
+      }
+      format.parse = function(string) {
+        var d = {
+          y: 1900,
+          m: 0,
+          d: 1,
+          H: 0,
+          M: 0,
+          S: 0,
+          L: 0,
+          Z: null
+        }, i = d3_time_parse(d, template, string, 0);
+        if (i != string.length) return null;
+        if ("p" in d) d.H = d.H % 12 + d.p * 12;
+        var localZ = d.Z != null && d3_date !== d3_date_utc, date = new (localZ ? d3_date_utc : d3_date)();
+        if ("j" in d) date.setFullYear(d.y, 0, d.j); else if ("W" in d || "U" in d) {
+          if (!("w" in d)) d.w = "W" in d ? 1 : 0;
+          date.setFullYear(d.y, 0, 1);
+          date.setFullYear(d.y, 0, "W" in d ? (d.w + 6) % 7 + d.W * 7 - (date.getDay() + 5) % 7 : d.w + d.U * 7 - (date.getDay() + 6) % 7);
+        } else date.setFullYear(d.y, d.m, d.d);
+        date.setHours(d.H + (d.Z / 100 | 0), d.M + d.Z % 100, d.S, d.L);
+        return localZ ? date._ : date;
+      };
+      format.toString = function() {
+        return template;
+      };
+      return format;
+    }
+    function d3_time_parse(date, template, string, j) {
+      var c, p, t, i = 0, n = template.length, m = string.length;
+      while (i < n) {
+        if (j >= m) return -1;
+        c = template.charCodeAt(i++);
+        if (c === 37) {
+          t = template.charAt(i++);
+          p = d3_time_parsers[t in d3_time_formatPads ? template.charAt(i++) : t];
+          if (!p || (j = p(date, string, j)) < 0) return -1;
+        } else if (c != string.charCodeAt(j++)) {
+          return -1;
+        }
+      }
+      return j;
+    }
+    d3_time_format.utc = function(template) {
+      var local = d3_time_format(template);
+      function format(date) {
+        try {
+          d3_date = d3_date_utc;
+          var utc = new d3_date();
+          utc._ = date;
+          return local(utc);
+        } finally {
+          d3_date = Date;
+        }
+      }
+      format.parse = function(string) {
+        try {
+          d3_date = d3_date_utc;
+          var date = local.parse(string);
+          return date && date._;
+        } finally {
+          d3_date = Date;
+        }
+      };
+      format.toString = local.toString;
+      return format;
+    };
+    d3_time_format.multi = d3_time_format.utc.multi = d3_time_formatMulti;
+    var d3_time_periodLookup = d3.map(), d3_time_dayRe = d3_time_formatRe(locale_days), d3_time_dayLookup = d3_time_formatLookup(locale_days), d3_time_dayAbbrevRe = d3_time_formatRe(locale_shortDays), d3_time_dayAbbrevLookup = d3_time_formatLookup(locale_shortDays), d3_time_monthRe = d3_time_formatRe(locale_months), d3_time_monthLookup = d3_time_formatLookup(locale_months), d3_time_monthAbbrevRe = d3_time_formatRe(locale_shortMonths), d3_time_monthAbbrevLookup = d3_time_formatLookup(locale_shortMonths);
+    locale_periods.forEach(function(p, i) {
+      d3_time_periodLookup.set(p.toLowerCase(), i);
+    });
+    var d3_time_formats = {
+      a: function(d) {
+        return locale_shortDays[d.getDay()];
+      },
+      A: function(d) {
+        return locale_days[d.getDay()];
+      },
+      b: function(d) {
+        return locale_shortMonths[d.getMonth()];
+      },
+      B: function(d) {
+        return locale_months[d.getMonth()];
+      },
+      c: d3_time_format(locale_dateTime),
+      d: function(d, p) {
+        return d3_time_formatPad(d.getDate(), p, 2);
+      },
+      e: function(d, p) {
+        return d3_time_formatPad(d.getDate(), p, 2);
+      },
+      H: function(d, p) {
+        return d3_time_formatPad(d.getHours(), p, 2);
+      },
+      I: function(d, p) {
+        return d3_time_formatPad(d.getHours() % 12 || 12, p, 2);
+      },
+      j: function(d, p) {
+        return d3_time_formatPad(1 + d3_time.dayOfYear(d), p, 3);
+      },
+      L: function(d, p) {
+        return d3_time_formatPad(d.getMilliseconds(), p, 3);
+      },
+      m: function(d, p) {
+        return d3_time_formatPad(d.getMonth() + 1, p, 2);
+      },
+      M: function(d, p) {
+        return d3_time_formatPad(d.getMinutes(), p, 2);
+      },
+      p: function(d) {
+        return locale_periods[+(d.getHours() >= 12)];
+      },
+      S: function(d, p) {
+        return d3_time_formatPad(d.getSeconds(), p, 2);
+      },
+      U: function(d, p) {
+        return d3_time_formatPad(d3_time.sundayOfYear(d), p, 2);
+      },
+      w: function(d) {
+        return d.getDay();
+      },
+      W: function(d, p) {
+        return d3_time_formatPad(d3_time.mondayOfYear(d), p, 2);
+      },
+      x: d3_time_format(locale_date),
+      X: d3_time_format(locale_time),
+      y: function(d, p) {
+        return d3_time_formatPad(d.getFullYear() % 100, p, 2);
+      },
+      Y: function(d, p) {
+        return d3_time_formatPad(d.getFullYear() % 1e4, p, 4);
+      },
+      Z: d3_time_zone,
+      "%": function() {
+        return "%";
+      }
+    };
+    var d3_time_parsers = {
+      a: d3_time_parseWeekdayAbbrev,
+      A: d3_time_parseWeekday,
+      b: d3_time_parseMonthAbbrev,
+      B: d3_time_parseMonth,
+      c: d3_time_parseLocaleFull,
+      d: d3_time_parseDay,
+      e: d3_time_parseDay,
+      H: d3_time_parseHour24,
+      I: d3_time_parseHour24,
+      j: d3_time_parseDayOfYear,
+      L: d3_time_parseMilliseconds,
+      m: d3_time_parseMonthNumber,
+      M: d3_time_parseMinutes,
+      p: d3_time_parseAmPm,
+      S: d3_time_parseSeconds,
+      U: d3_time_parseWeekNumberSunday,
+      w: d3_time_parseWeekdayNumber,
+      W: d3_time_parseWeekNumberMonday,
+      x: d3_time_parseLocaleDate,
+      X: d3_time_parseLocaleTime,
+      y: d3_time_parseYear,
+      Y: d3_time_parseFullYear,
+      Z: d3_time_parseZone,
+      "%": d3_time_parseLiteralPercent
+    };
+    function d3_time_parseWeekdayAbbrev(date, string, i) {
+      d3_time_dayAbbrevRe.lastIndex = 0;
+      var n = d3_time_dayAbbrevRe.exec(string.slice(i));
+      return n ? (date.w = d3_time_dayAbbrevLookup.get(n[0].toLowerCase()), i + n[0].length) : -1;
+    }
+    function d3_time_parseWeekday(date, string, i) {
+      d3_time_dayRe.lastIndex = 0;
+      var n = d3_time_dayRe.exec(string.slice(i));
+      return n ? (date.w = d3_time_dayLookup.get(n[0].toLowerCase()), i + n[0].length) : -1;
+    }
+    function d3_time_parseMonthAbbrev(date, string, i) {
+      d3_time_monthAbbrevRe.lastIndex = 0;
+      var n = d3_time_monthAbbrevRe.exec(string.slice(i));
+      return n ? (date.m = d3_time_monthAbbrevLookup.get(n[0].toLowerCase()), i + n[0].length) : -1;
+    }
+    function d3_time_parseMonth(date, string, i) {
+      d3_time_monthRe.lastIndex = 0;
+      var n = d3_time_monthRe.exec(string.slice(i));
+      return n ? (date.m = d3_time_monthLookup.get(n[0].toLowerCase()), i + n[0].length) : -1;
+    }
+    function d3_time_parseLocaleFull(date, string, i) {
+      return d3_time_parse(date, d3_time_formats.c.toString(), string, i);
+    }
+    function d3_time_parseLocaleDate(date, string, i) {
+      return d3_time_parse(date, d3_time_formats.x.toString(), string, i);
+    }
+    function d3_time_parseLocaleTime(date, string, i) {
+      return d3_time_parse(date, d3_time_formats.X.toString(), string, i);
+    }
+    function d3_time_parseAmPm(date, string, i) {
+      var n = d3_time_periodLookup.get(string.slice(i, i += 2).toLowerCase());
+      return n == null ? -1 : (date.p = n, i);
+    }
+    return d3_time_format;
+  }
+  var d3_time_formatPads = {
+    "-": "",
+    _: " ",
+    "0": "0"
+  }, d3_time_numberRe = /^\s*\d+/, d3_time_percentRe = /^%/;
+  function d3_time_formatPad(value, fill, width) {
+    var sign = value < 0 ? "-" : "", string = (sign ? -value : value) + "", length = string.length;
+    return sign + (length < width ? new Array(width - length + 1).join(fill) + string : string);
+  }
+  function d3_time_formatRe(names) {
+    return new RegExp("^(?:" + names.map(d3.requote).join("|") + ")", "i");
+  }
+  function d3_time_formatLookup(names) {
+    var map = new d3_Map(), i = -1, n = names.length;
+    while (++i < n) map.set(names[i].toLowerCase(), i);
+    return map;
+  }
+  function d3_time_parseWeekdayNumber(date, string, i) {
+    d3_time_numberRe.lastIndex = 0;
+    var n = d3_time_numberRe.exec(string.slice(i, i + 1));
+    return n ? (date.w = +n[0], i + n[0].length) : -1;
+  }
+  function d3_time_parseWeekNumberSunday(date, string, i) {
+    d3_time_numberRe.lastIndex = 0;
+    var n = d3_time_numberRe.exec(string.slice(i));
+    return n ? (date.U = +n[0], i + n[0].length) : -1;
+  }
+  function d3_time_parseWeekNumberMonday(date, string, i) {
+    d3_time_numberRe.lastIndex = 0;
+    var n = d3_time_numberRe.exec(string.slice(i));
+    return n ? (date.W = +n[0], i + n[0].length) : -1;
+  }
+  function d3_time_parseFullYear(date, string, i) {
+    d3_time_numberRe.lastIndex = 0;
+    var n = d3_time_numberRe.exec(string.slice(i, i + 4));
+    return n ? (date.y = +n[0], i + n[0].length) : -1;
+  }
+  function d3_time_parseYear(date, string, i) {
+    d3_time_numberRe.lastIndex = 0;
+    var n = d3_time_numberRe.exec(string.slice(i, i + 2));
+    return n ? (date.y = d3_time_expandYear(+n[0]), i + n[0].length) : -1;
+  }
+  function d3_time_parseZone(date, string, i) {
+    return /^[+-]\d{4}$/.test(string = string.slice(i, i + 5)) ? (date.Z = -string, 
+    i + 5) : -1;
+  }
+  function d3_time_expandYear(d) {
+    return d + (d > 68 ? 1900 : 2e3);
+  }
+  function d3_time_parseMonthNumber(date, string, i) {
+    d3_time_numberRe.lastIndex = 0;
+    var n = d3_time_numberRe.exec(string.slice(i, i + 2));
+    return n ? (date.m = n[0] - 1, i + n[0].length) : -1;
+  }
+  function d3_time_parseDay(date, string, i) {
+    d3_time_numberRe.lastIndex = 0;
+    var n = d3_time_numberRe.exec(string.slice(i, i + 2));
+    return n ? (date.d = +n[0], i + n[0].length) : -1;
+  }
+  function d3_time_parseDayOfYear(date, string, i) {
+    d3_time_numberRe.lastIndex = 0;
+    var n = d3_time_numberRe.exec(string.slice(i, i + 3));
+    return n ? (date.j = +n[0], i + n[0].length) : -1;
+  }
+  function d3_time_parseHour24(date, string, i) {
+    d3_time_numberRe.lastIndex = 0;
+    var n = d3_time_numberRe.exec(string.slice(i, i + 2));
+    return n ? (date.H = +n[0], i + n[0].length) : -1;
+  }
+  function d3_time_parseMinutes(date, string, i) {
+    d3_time_numberRe.lastIndex = 0;
+    var n = d3_time_numberRe.exec(string.slice(i, i + 2));
+    return n ? (date.M = +n[0], i + n[0].length) : -1;
+  }
+  function d3_time_parseSeconds(date, string, i) {
+    d3_time_numberRe.lastIndex = 0;
+    var n = d3_time_numberRe.exec(string.slice(i, i + 2));
+    return n ? (date.S = +n[0], i + n[0].length) : -1;
+  }
+  function d3_time_parseMilliseconds(date, string, i) {
+    d3_time_numberRe.lastIndex = 0;
+    var n = d3_time_numberRe.exec(string.slice(i, i + 3));
+    return n ? (date.L = +n[0], i + n[0].length) : -1;
+  }
+  function d3_time_zone(d) {
+    var z = d.getTimezoneOffset(), zs = z > 0 ? "-" : "+", zh = abs(z) / 60 | 0, zm = abs(z) % 60;
+    return zs + d3_time_formatPad(zh, "0", 2) + d3_time_formatPad(zm, "0", 2);
+  }
+  function d3_time_parseLiteralPercent(date, string, i) {
+    d3_time_percentRe.lastIndex = 0;
+    var n = d3_time_percentRe.exec(string.slice(i, i + 1));
+    return n ? i + n[0].length : -1;
+  }
+  function d3_time_formatMulti(formats) {
+    var n = formats.length, i = -1;
+    while (++i < n) formats[i][0] = this(formats[i][0]);
+    return function(date) {
+      var i = 0, f = formats[i];
+      while (!f[1](date)) f = formats[++i];
+      return f[0](date);
+    };
+  }
+  d3.locale = function(locale) {
+    return {
+      numberFormat: d3_locale_numberFormat(locale),
+      timeFormat: d3_locale_timeFormat(locale)
+    };
+  };
+  var d3_locale_enUS = d3.locale({
+    decimal: ".",
+    thousands: ",",
+    grouping: [ 3 ],
+    currency: [ "$", "" ],
+    dateTime: "%a %b %e %X %Y",
+    date: "%m/%d/%Y",
+    time: "%H:%M:%S",
+    periods: [ "AM", "PM" ],
+    days: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
+    shortDays: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
+    months: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ],
+    shortMonths: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]
+  });
+  d3.format = d3_locale_enUS.numberFormat;
+  d3.geo = {};
+  function d3_adder() {}
+  d3_adder.prototype = {
+    s: 0,
+    t: 0,
+    add: function(y) {
+      d3_adderSum(y, this.t, d3_adderTemp);
+      d3_adderSum(d3_adderTemp.s, this.s, this);
+      if (this.s) this.t += d3_adderTemp.t; else this.s = d3_adderTemp.t;
+    },
+    reset: function() {
+      this.s = this.t = 0;
+    },
+    valueOf: function() {
+      return this.s;
+    }
+  };
+  var d3_adderTemp = new d3_adder();
+  function d3_adderSum(a, b, o) {
+    var x = o.s = a + b, bv = x - a, av = x - bv;
+    o.t = a - av + (b - bv);
+  }
+  d3.geo.stream = function(object, listener) {
+    if (object && d3_geo_streamObjectType.hasOwnProperty(object.type)) {
+      d3_geo_streamObjectType[object.type](object, listener);
+    } else {
+      d3_geo_streamGeometry(object, listener);
+    }
+  };
+  function d3_geo_streamGeometry(geometry, listener) {
+    if (geometry && d3_geo_streamGeometryType.hasOwnProperty(geometry.type)) {
+      d3_geo_streamGeometryType[geometry.type](geometry, listener);
+    }
+  }
+  var d3_geo_streamObjectType = {
+    Feature: function(feature, listener) {
+      d3_geo_streamGeometry(feature.geometry, listener);
+    },
+    FeatureCollection: function(object, listener) {
+      var features = object.features, i = -1, n = features.length;
+      while (++i < n) d3_geo_streamGeometry(features[i].geometry, listener);
+    }
+  };
+  var d3_geo_streamGeometryType = {
+    Sphere: function(object, listener) {
+      listener.sphere();
+    },
+    Point: function(object, listener) {
+      object = object.coordinates;
+      listener.point(object[0], object[1], object[2]);
+    },
+    MultiPoint: function(object, listener) {
+      var coordinates = object.coordinates, i = -1, n = coordinates.length;
+      while (++i < n) object = coordinates[i], listener.point(object[0], object[1], object[2]);
+    },
+    LineString: function(object, listener) {
+      d3_geo_streamLine(object.coordinates, listener, 0);
+    },
+    MultiLineString: function(object, listener) {
+      var coordinates = object.coordinates, i = -1, n = coordinates.length;
+      while (++i < n) d3_geo_streamLine(coordinates[i], listener, 0);
+    },
+    Polygon: function(object, listener) {
+      d3_geo_streamPolygon(object.coordinates, listener);
+    },
+    MultiPolygon: function(object, listener) {
+      var coordinates = object.coordinates, i = -1, n = coordinates.length;
+      while (++i < n) d3_geo_streamPolygon(coordinates[i], listener);
+    },
+    GeometryCollection: function(object, listener) {
+      var geometries = object.geometries, i = -1, n = geometries.length;
+      while (++i < n) d3_geo_streamGeometry(geometries[i], listener);
+    }
+  };
+  function d3_geo_streamLine(coordinates, listener, closed) {
+    var i = -1, n = coordinates.length - closed, coordinate;
+    listener.lineStart();
+    while (++i < n) coordinate = coordinates[i], listener.point(coordinate[0], coordinate[1], coordinate[2]);
+    listener.lineEnd();
+  }
+  function d3_geo_streamPolygon(coordinates, listener) {
+    var i = -1, n = coordinates.length;
+    listener.polygonStart();
+    while (++i < n) d3_geo_streamLine(coordinates[i], listener, 1);
+    listener.polygonEnd();
+  }
+  d3.geo.area = function(object) {
+    d3_geo_areaSum = 0;
+    d3.geo.stream(object, d3_geo_area);
+    return d3_geo_areaSum;
+  };
+  var d3_geo_areaSum, d3_geo_areaRingSum = new d3_adder();
+  var d3_geo_area = {
+    sphere: function() {
+      d3_geo_areaSum += 4 * π;
+    },
+    point: d3_noop,
+    lineStart: d3_noop,
+    lineEnd: d3_noop,
+    polygonStart: function() {
+      d3_geo_areaRingSum.reset();
+      d3_geo_area.lineStart = d3_geo_areaRingStart;
+    },
+    polygonEnd: function() {
+      var area = 2 * d3_geo_areaRingSum;
+      d3_geo_areaSum += area < 0 ? 4 * π + area : area;
+      d3_geo_area.lineStart = d3_geo_area.lineEnd = d3_geo_area.point = d3_noop;
+    }
+  };
+  function d3_geo_areaRingStart() {
+    var λ00, φ00, λ0, cosφ0, sinφ0;
+    d3_geo_area.point = function(λ, φ) {
+      d3_geo_area.point = nextPoint;
+      λ0 = (λ00 = λ) * d3_radians, cosφ0 = Math.cos(φ = (φ00 = φ) * d3_radians / 2 + π / 4), 
+      sinφ0 = Math.sin(φ);
+    };
+    function nextPoint(λ, φ) {
+      λ *= d3_radians;
+      φ = φ * d3_radians / 2 + π / 4;
+      var dλ = λ - λ0, sdλ = dλ >= 0 ? 1 : -1, adλ = sdλ * dλ, cosφ = Math.cos(φ), sinφ = Math.sin(φ), k = sinφ0 * sinφ, u = cosφ0 * cosφ + k * Math.cos(adλ), v = k * sdλ * Math.sin(adλ);
+      d3_geo_areaRingSum.add(Math.atan2(v, u));
+      λ0 = λ, cosφ0 = cosφ, sinφ0 = sinφ;
+    }
+    d3_geo_area.lineEnd = function() {
+      nextPoint(λ00, φ00);
+    };
+  }
+  function d3_geo_cartesian(spherical) {
+    var λ = spherical[0], φ = spherical[1], cosφ = Math.cos(φ);
+    return [ cosφ * Math.cos(λ), cosφ * Math.sin(λ), Math.sin(φ) ];
+  }
+  function d3_geo_cartesianDot(a, b) {
+    return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+  }
+  function d3_geo_cartesianCross(a, b) {
+    return [ a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0] ];
+  }
+  function d3_geo_cartesianAdd(a, b) {
+    a[0] += b[0];
+    a[1] += b[1];
+    a[2] += b[2];
+  }
+  function d3_geo_cartesianScale(vector, k) {
+    return [ vector[0] * k, vector[1] * k, vector[2] * k ];
+  }
+  function d3_geo_cartesianNormalize(d) {
+    var l = Math.sqrt(d[0] * d[0] + d[1] * d[1] + d[2] * d[2]);
+    d[0] /= l;
+    d[1] /= l;
+    d[2] /= l;
+  }
+  function d3_geo_spherical(cartesian) {
+    return [ Math.atan2(cartesian[1], cartesian[0]), d3_asin(cartesian[2]) ];
+  }
+  function d3_geo_sphericalEqual(a, b) {
+    return abs(a[0] - b[0]) < ε && abs(a[1] - b[1]) < ε;
+  }
+  d3.geo.bounds = function() {
+    var λ0, φ0, λ1, φ1, λ_, λ__, φ__, p0, dλSum, ranges, range;
+    var bound = {
+      point: point,
+      lineStart: lineStart,
+      lineEnd: lineEnd,
+      polygonStart: function() {
+        bound.point = ringPoint;
+        bound.lineStart = ringStart;
+        bound.lineEnd = ringEnd;
+        dλSum = 0;
+        d3_geo_area.polygonStart();
+      },
+      polygonEnd: function() {
+        d3_geo_area.polygonEnd();
+        bound.point = point;
+        bound.lineStart = lineStart;
+        bound.lineEnd = lineEnd;
+        if (d3_geo_areaRingSum < 0) λ0 = -(λ1 = 180), φ0 = -(φ1 = 90); else if (dλSum > ε) φ1 = 90; else if (dλSum < -ε) φ0 = -90;
+        range[0] = λ0, range[1] = λ1;
+      }
+    };
+    function point(λ, φ) {
+      ranges.push(range = [ λ0 = λ, λ1 = λ ]);
+      if (φ < φ0) φ0 = φ;
+      if (φ > φ1) φ1 = φ;
+    }
+    function linePoint(λ, φ) {
+      var p = d3_geo_cartesian([ λ * d3_radians, φ * d3_radians ]);
+      if (p0) {
+        var normal = d3_geo_cartesianCross(p0, p), equatorial = [ normal[1], -normal[0], 0 ], inflection = d3_geo_cartesianCross(equatorial, normal);
+        d3_geo_cartesianNormalize(inflection);
+        inflection = d3_geo_spherical(inflection);
+        var dλ = λ - λ_, s = dλ > 0 ? 1 : -1, λi = inflection[0] * d3_degrees * s, antimeridian = abs(dλ) > 180;
+        if (antimeridian ^ (s * λ_ < λi && λi < s * λ)) {
+          var φi = inflection[1] * d3_degrees;
+          if (φi > φ1) φ1 = φi;
+        } else if (λi = (λi + 360) % 360 - 180, antimeridian ^ (s * λ_ < λi && λi < s * λ)) {
+          var φi = -inflection[1] * d3_degrees;
+          if (φi < φ0) φ0 = φi;
+        } else {
+          if (φ < φ0) φ0 = φ;
+          if (φ > φ1) φ1 = φ;
+        }
+        if (antimeridian) {
+          if (λ < λ_) {
+            if (angle(λ0, λ) > angle(λ0, λ1)) λ1 = λ;
+          } else {
+            if (angle(λ, λ1) > angle(λ0, λ1)) λ0 = λ;
+          }
+        } else {
+          if (λ1 >= λ0) {
+            if (λ < λ0) λ0 = λ;
+            if (λ > λ1) λ1 = λ;
+          } else {
+            if (λ > λ_) {
+              if (angle(λ0, λ) > angle(λ0, λ1)) λ1 = λ;
+            } else {
+              if (angle(λ, λ1) > angle(λ0, λ1)) λ0 = λ;
+            }
+          }
+        }
+      } else {
+        point(λ, φ);
+      }
+      p0 = p, λ_ = λ;
+    }
+    function lineStart() {
+      bound.point = linePoint;
+    }
+    function lineEnd() {
+      range[0] = λ0, range[1] = λ1;
+      bound.point = point;
+      p0 = null;
+    }
+    function ringPoint(λ, φ) {
+      if (p0) {
+        var dλ = λ - λ_;
+        dλSum += abs(dλ) > 180 ? dλ + (dλ > 0 ? 360 : -360) : dλ;
+      } else λ__ = λ, φ__ = φ;
+      d3_geo_area.point(λ, φ);
+      linePoint(λ, φ);
+    }
+    function ringStart() {
+      d3_geo_area.lineStart();
+    }
+    function ringEnd() {
+      ringPoint(λ__, φ__);
+      d3_geo_area.lineEnd();
+      if (abs(dλSum) > ε) λ0 = -(λ1 = 180);
+      range[0] = λ0, range[1] = λ1;
+      p0 = null;
+    }
+    function angle(λ0, λ1) {
+      return (λ1 -= λ0) < 0 ? λ1 + 360 : λ1;
+    }
+    function compareRanges(a, b) {
+      return a[0] - b[0];
+    }
+    function withinRange(x, range) {
+      return range[0] <= range[1] ? range[0] <= x && x <= range[1] : x < range[0] || range[1] < x;
+    }
+    return function(feature) {
+      φ1 = λ1 = -(λ0 = φ0 = Infinity);
+      ranges = [];
+      d3.geo.stream(feature, bound);
+      var n = ranges.length;
+      if (n) {
+        ranges.sort(compareRanges);
+        for (var i = 1, a = ranges[0], b, merged = [ a ]; i < n; ++i) {
+          b = ranges[i];
+          if (withinRange(b[0], a) || withinRange(b[1], a)) {
+            if (angle(a[0], b[1]) > angle(a[0], a[1])) a[1] = b[1];
+            if (angle(b[0], a[1]) > angle(a[0], a[1])) a[0] = b[0];
+          } else {
+            merged.push(a = b);
+          }
+        }
+        var best = -Infinity, dλ;
+        for (var n = merged.length - 1, i = 0, a = merged[n], b; i <= n; a = b, ++i) {
+          b = merged[i];
+          if ((dλ = angle(a[1], b[0])) > best) best = dλ, λ0 = b[0], λ1 = a[1];
+        }
+      }
+      ranges = range = null;
+      return λ0 === Infinity || φ0 === Infinity ? [ [ NaN, NaN ], [ NaN, NaN ] ] : [ [ λ0, φ0 ], [ λ1, φ1 ] ];
+    };
+  }();
+  d3.geo.centroid = function(object) {
+    d3_geo_centroidW0 = d3_geo_centroidW1 = d3_geo_centroidX0 = d3_geo_centroidY0 = d3_geo_centroidZ0 = d3_geo_centroidX1 = d3_geo_centroidY1 = d3_geo_centroidZ1 = d3_geo_centroidX2 = d3_geo_centroidY2 = d3_geo_centroidZ2 = 0;
+    d3.geo.stream(object, d3_geo_centroid);
+    var x = d3_geo_centroidX2, y = d3_geo_centroidY2, z = d3_geo_centroidZ2, m = x * x + y * y + z * z;
+    if (m < ε2) {
+      x = d3_geo_centroidX1, y = d3_geo_centroidY1, z = d3_geo_centroidZ1;
+      if (d3_geo_centroidW1 < ε) x = d3_geo_centroidX0, y = d3_geo_centroidY0, z = d3_geo_centroidZ0;
+      m = x * x + y * y + z * z;
+      if (m < ε2) return [ NaN, NaN ];
+    }
+    return [ Math.atan2(y, x) * d3_degrees, d3_asin(z / Math.sqrt(m)) * d3_degrees ];
+  };
+  var d3_geo_centroidW0, d3_geo_centroidW1, d3_geo_centroidX0, d3_geo_centroidY0, d3_geo_centroidZ0, d3_geo_centroidX1, d3_geo_centroidY1, d3_geo_centroidZ1, d3_geo_centroidX2, d3_geo_centroidY2, d3_geo_centroidZ2;
+  var d3_geo_centroid = {
+    sphere: d3_noop,
+    point: d3_geo_centroidPoint,
+    lineStart: d3_geo_centroidLineStart,
+    lineEnd: d3_geo_centroidLineEnd,
+    polygonStart: function() {
+      d3_geo_centroid.lineStart = d3_geo_centroidRingStart;
+    },
+    polygonEnd: function() {
+      d3_geo_centroid.lineStart = d3_geo_centroidLineStart;
+    }
+  };
+  function d3_geo_centroidPoint(λ, φ) {
+    λ *= d3_radians;
+    var cosφ = Math.cos(φ *= d3_radians);
+    d3_geo_centroidPointXYZ(cosφ * Math.cos(λ), cosφ * Math.sin(λ), Math.sin(φ));
+  }
+  function d3_geo_centroidPointXYZ(x, y, z) {
+    ++d3_geo_centroidW0;
+    d3_geo_centroidX0 += (x - d3_geo_centroidX0) / d3_geo_centroidW0;
+    d3_geo_centroidY0 += (y - d3_geo_centroidY0) / d3_geo_centroidW0;
+    d3_geo_centroidZ0 += (z - d3_geo_centroidZ0) / d3_geo_centroidW0;
+  }
+  function d3_geo_centroidLineStart() {
+    var x0, y0, z0;
+    d3_geo_centroid.point = function(λ, φ) {
+      λ *= d3_radians;
+      var cosφ = Math.cos(φ *= d3_radians);
+      x0 = cosφ * Math.cos(λ);
+      y0 = cosφ * Math.sin(λ);
+      z0 = Math.sin(φ);
+      d3_geo_centroid.point = nextPoint;
+      d3_geo_centroidPointXYZ(x0, y0, z0);
+    };
+    function nextPoint(λ, φ) {
+      λ *= d3_radians;
+      var cosφ = Math.cos(φ *= d3_radians), x = cosφ * Math.cos(λ), y = cosφ * Math.sin(λ), z = Math.sin(φ), w = Math.atan2(Math.sqrt((w = y0 * z - z0 * y) * w + (w = z0 * x - x0 * z) * w + (w = x0 * y - y0 * x) * w), x0 * x + y0 * y + z0 * z);
+      d3_geo_centroidW1 += w;
+      d3_geo_centroidX1 += w * (x0 + (x0 = x));
+      d3_geo_centroidY1 += w * (y0 + (y0 = y));
+      d3_geo_centroidZ1 += w * (z0 + (z0 = z));
+      d3_geo_centroidPointXYZ(x0, y0, z0);
+    }
+  }
+  function d3_geo_centroidLineEnd() {
+    d3_geo_centroid.point = d3_geo_centroidPoint;
+  }
+  function d3_geo_centroidRingStart() {
+    var λ00, φ00, x0, y0, z0;
+    d3_geo_centroid.point = function(λ, φ) {
+      λ00 = λ, φ00 = φ;
+      d3_geo_centroid.point = nextPoint;
+      λ *= d3_radians;
+      var cosφ = Math.cos(φ *= d3_radians);
+      x0 = cosφ * Math.cos(λ);
+      y0 = cosφ * Math.sin(λ);
+      z0 = Math.sin(φ);
+      d3_geo_centroidPointXYZ(x0, y0, z0);
+    };
+    d3_geo_centroid.lineEnd = function() {
+      nextPoint(λ00, φ00);
+      d3_geo_centroid.lineEnd = d3_geo_centroidLineEnd;
+      d3_geo_centroid.point = d3_geo_centroidPoint;
+    };
+    function nextPoint(λ, φ) {
+      λ *= d3_radians;
+      var cosφ = Math.cos(φ *= d3_radians), x = cosφ * Math.cos(λ), y = cosφ * Math.sin(λ), z = Math.sin(φ), cx = y0 * z - z0 * y, cy = z0 * x - x0 * z, cz = x0 * y - y0 * x, m = Math.sqrt(cx * cx + cy * cy + cz * cz), u = x0 * x + y0 * y + z0 * z, v = m && -d3_acos(u) / m, w = Math.atan2(m, u);
+      d3_geo_centroidX2 += v * cx;
+      d3_geo_centroidY2 += v * cy;
+      d3_geo_centroidZ2 += v * cz;
+      d3_geo_centroidW1 += w;
+      d3_geo_centroidX1 += w * (x0 + (x0 = x));
+      d3_geo_centroidY1 += w * (y0 + (y0 = y));
+      d3_geo_centroidZ1 += w * (z0 + (z0 = z));
+      d3_geo_centroidPointXYZ(x0, y0, z0);
+    }
+  }
+  function d3_geo_compose(a, b) {
+    function compose(x, y) {
+      return x = a(x, y), b(x[0], x[1]);
+    }
+    if (a.invert && b.invert) compose.invert = function(x, y) {
+      return x = b.invert(x, y), x && a.invert(x[0], x[1]);
+    };
+    return compose;
+  }
+  function d3_true() {
+    return true;
+  }
+  function d3_geo_clipPolygon(segments, compare, clipStartInside, interpolate, listener) {
+    var subject = [], clip = [];
+    segments.forEach(function(segment) {
+      if ((n = segment.length - 1) <= 0) return;
+      var n, p0 = segment[0], p1 = segment[n];
+      if (d3_geo_sphericalEqual(p0, p1)) {
+        listener.lineStart();
+        for (var i = 0; i < n; ++i) listener.point((p0 = segment[i])[0], p0[1]);
+        listener.lineEnd();
+        return;
+      }
+      var a = new d3_geo_clipPolygonIntersection(p0, segment, null, true), b = new d3_geo_clipPolygonIntersection(p0, null, a, false);
+      a.o = b;
+      subject.push(a);
+      clip.push(b);
+      a = new d3_geo_clipPolygonIntersection(p1, segment, null, false);
+      b = new d3_geo_clipPolygonIntersection(p1, null, a, true);
+      a.o = b;
+      subject.push(a);
+      clip.push(b);
+    });
+    clip.sort(compare);
+    d3_geo_clipPolygonLinkCircular(subject);
+    d3_geo_clipPolygonLinkCircular(clip);
+    if (!subject.length) return;
+    for (var i = 0, entry = clipStartInside, n = clip.length; i < n; ++i) {
+      clip[i].e = entry = !entry;
+    }
+    var start = subject[0], points, point;
+    while (1) {
+      var current = start, isSubject = true;
+      while (current.v) if ((current = current.n) === start) return;
+      points = current.z;
+      listener.lineStart();
+      do {
+        current.v = current.o.v = true;
+        if (current.e) {
+          if (isSubject) {
+            for (var i = 0, n = points.length; i < n; ++i) listener.point((point = points[i])[0], point[1]);
+          } else {
+            interpolate(current.x, current.n.x, 1, listener);
+          }
+          current = current.n;
+        } else {
+          if (isSubject) {
+            points = current.p.z;
+            for (var i = points.length - 1; i >= 0; --i) listener.point((point = points[i])[0], point[1]);
+          } else {
+            interpolate(current.x, current.p.x, -1, listener);
+          }
+          current = current.p;
+        }
+        current = current.o;
+        points = current.z;
+        isSubject = !isSubject;
+      } while (!current.v);
+      listener.lineEnd();
+    }
+  }
+  function d3_geo_clipPolygonLinkCircular(array) {
+    if (!(n = array.length)) return;
+    var n, i = 0, a = array[0], b;
+    while (++i < n) {
+      a.n = b = array[i];
+      b.p = a;
+      a = b;
+    }
+    a.n = b = array[0];
+    b.p = a;
+  }
+  function d3_geo_clipPolygonIntersection(point, points, other, entry) {
+    this.x = point;
+    this.z = points;
+    this.o = other;
+    this.e = entry;
+    this.v = false;
+    this.n = this.p = null;
+  }
+  function d3_geo_clip(pointVisible, clipLine, interpolate, clipStart) {
+    return function(rotate, listener) {
+      var line = clipLine(listener), rotatedClipStart = rotate.invert(clipStart[0], clipStart[1]);
+      var clip = {
+        point: point,
+        lineStart: lineStart,
+        lineEnd: lineEnd,
+        polygonStart: function() {
+          clip.point = pointRing;
+          clip.lineStart = ringStart;
+          clip.lineEnd = ringEnd;
+          segments = [];
+          polygon = [];
+        },
+        polygonEnd: function() {
+          clip.point = point;
+          clip.lineStart = lineStart;
+          clip.lineEnd = lineEnd;
+          segments = d3.merge(segments);
+          var clipStartInside = d3_geo_pointInPolygon(rotatedClipStart, polygon);
+          if (segments.length) {
+            if (!polygonStarted) listener.polygonStart(), polygonStarted = true;
+            d3_geo_clipPolygon(segments, d3_geo_clipSort, clipStartInside, interpolate, listener);
+          } else if (clipStartInside) {
+            if (!polygonStarted) listener.polygonStart(), polygonStarted = true;
+            listener.lineStart();
+            interpolate(null, null, 1, listener);
+            listener.lineEnd();
+          }
+          if (polygonStarted) listener.polygonEnd(), polygonStarted = false;
+          segments = polygon = null;
+        },
+        sphere: function() {
+          listener.polygonStart();
+          listener.lineStart();
+          interpolate(null, null, 1, listener);
+          listener.lineEnd();
+          listener.polygonEnd();
+        }
+      };
+      function point(λ, φ) {
+        var point = rotate(λ, φ);
+        if (pointVisible(λ = point[0], φ = point[1])) listener.point(λ, φ);
+      }
+      function pointLine(λ, φ) {
+        var point = rotate(λ, φ);
+        line.point(point[0], point[1]);
+      }
+      function lineStart() {
+        clip.point = pointLine;
+        line.lineStart();
+      }
+      function lineEnd() {
+        clip.point = point;
+        line.lineEnd();
+      }
+      var segments;
+      var buffer = d3_geo_clipBufferListener(), ringListener = clipLine(buffer), polygonStarted = false, polygon, ring;
+      function pointRing(λ, φ) {
+        ring.push([ λ, φ ]);
+        var point = rotate(λ, φ);
+        ringListener.point(point[0], point[1]);
+      }
+      function ringStart() {
+        ringListener.lineStart();
+        ring = [];
+      }
+      function ringEnd() {
+        pointRing(ring[0][0], ring[0][1]);
+        ringListener.lineEnd();
+        var clean = ringListener.clean(), ringSegments = buffer.buffer(), segment, n = ringSegments.length;
+        ring.pop();
+        polygon.push(ring);
+        ring = null;
+        if (!n) return;
+        if (clean & 1) {
+          segment = ringSegments[0];
+          var n = segment.length - 1, i = -1, point;
+          if (n > 0) {
+            if (!polygonStarted) listener.polygonStart(), polygonStarted = true;
+            listener.lineStart();
+            while (++i < n) listener.point((point = segment[i])[0], point[1]);
+            listener.lineEnd();
+          }
+          return;
+        }
+        if (n > 1 && clean & 2) ringSegments.push(ringSegments.pop().concat(ringSegments.shift()));
+        segments.push(ringSegments.filter(d3_geo_clipSegmentLength1));
+      }
+      return clip;
+    };
+  }
+  function d3_geo_clipSegmentLength1(segment) {
+    return segment.length > 1;
+  }
+  function d3_geo_clipBufferListener() {
+    var lines = [], line;
+    return {
+      lineStart: function() {
+        lines.push(line = []);
+      },
+      point: function(λ, φ) {
+        line.push([ λ, φ ]);
+      },
+      lineEnd: d3_noop,
+      buffer: function() {
+        var buffer = lines;
+        lines = [];
+        line = null;
+        return buffer;
+      },
+      rejoin: function() {
+        if (lines.length > 1) lines.push(lines.pop().concat(lines.shift()));
+      }
+    };
+  }
+  function d3_geo_clipSort(a, b) {
+    return ((a = a.x)[0] < 0 ? a[1] - halfπ - ε : halfπ - a[1]) - ((b = b.x)[0] < 0 ? b[1] - halfπ - ε : halfπ - b[1]);
+  }
+  var d3_geo_clipAntimeridian = d3_geo_clip(d3_true, d3_geo_clipAntimeridianLine, d3_geo_clipAntimeridianInterpolate, [ -π, -π / 2 ]);
+  function d3_geo_clipAntimeridianLine(listener) {
+    var λ0 = NaN, φ0 = NaN, sλ0 = NaN, clean;
+    return {
+      lineStart: function() {
+        listener.lineStart();
+        clean = 1;
+      },
+      point: function(λ1, φ1) {
+        var sλ1 = λ1 > 0 ? π : -π, dλ = abs(λ1 - λ0);
+        if (abs(dλ - π) < ε) {
+          listener.point(λ0, φ0 = (φ0 + φ1) / 2 > 0 ? halfπ : -halfπ);
+          listener.point(sλ0, φ0);
+          listener.lineEnd();
+          listener.lineStart();
+          listener.point(sλ1, φ0);
+          listener.point(λ1, φ0);
+          clean = 0;
+        } else if (sλ0 !== sλ1 && dλ >= π) {
+          if (abs(λ0 - sλ0) < ε) λ0 -= sλ0 * ε;
+          if (abs(λ1 - sλ1) < ε) λ1 -= sλ1 * ε;
+          φ0 = d3_geo_clipAntimeridianIntersect(λ0, φ0, λ1, φ1);
+          listener.point(sλ0, φ0);
+          listener.lineEnd();
+          listener.lineStart();
+          listener.point(sλ1, φ0);
+          clean = 0;
+        }
+        listener.point(λ0 = λ1, φ0 = φ1);
+        sλ0 = sλ1;
+      },
+      lineEnd: function() {
+        listener.lineEnd();
+        λ0 = φ0 = NaN;
+      },
+      clean: function() {
+        return 2 - clean;
+      }
+    };
+  }
+  function d3_geo_clipAntimeridianIntersect(λ0, φ0, λ1, φ1) {
+    var cosφ0, cosφ1, sinλ0_λ1 = Math.sin(λ0 - λ1);
+    return abs(sinλ0_λ1) > ε ? Math.atan((Math.sin(φ0) * (cosφ1 = Math.cos(φ1)) * Math.sin(λ1) - Math.sin(φ1) * (cosφ0 = Math.cos(φ0)) * Math.sin(λ0)) / (cosφ0 * cosφ1 * sinλ0_λ1)) : (φ0 + φ1) / 2;
+  }
+  function d3_geo_clipAntimeridianInterpolate(from, to, direction, listener) {
+    var φ;
+    if (from == null) {
+      φ = direction * halfπ;
+      listener.point(-π, φ);
+      listener.point(0, φ);
+      listener.point(π, φ);
+      listener.point(π, 0);
+      listener.point(π, -φ);
+      listener.point(0, -φ);
+      listener.point(-π, -φ);
+      listener.point(-π, 0);
+      listener.point(-π, φ);
+    } else if (abs(from[0] - to[0]) > ε) {
+      var s = from[0] < to[0] ? π : -π;
+      φ = direction * s / 2;
+      listener.point(-s, φ);
+      listener.point(0, φ);
+      listener.point(s, φ);
+    } else {
+      listener.point(to[0], to[1]);
+    }
+  }
+  function d3_geo_pointInPolygon(point, polygon) {
+    var meridian = point[0], parallel = point[1], meridianNormal = [ Math.sin(meridian), -Math.cos(meridian), 0 ], polarAngle = 0, winding = 0;
+    d3_geo_areaRingSum.reset();
+    for (var i = 0, n = polygon.length; i < n; ++i) {
+      var ring = polygon[i], m = ring.length;
+      if (!m) continue;
+      var point0 = ring[0], λ0 = point0[0], φ0 = point0[1] / 2 + π / 4, sinφ0 = Math.sin(φ0), cosφ0 = Math.cos(φ0), j = 1;
+      while (true) {
+        if (j === m) j = 0;
+        point = ring[j];
+        var λ = point[0], φ = point[1] / 2 + π / 4, sinφ = Math.sin(φ), cosφ = Math.cos(φ), dλ = λ - λ0, sdλ = dλ >= 0 ? 1 : -1, adλ = sdλ * dλ, antimeridian = adλ > π, k = sinφ0 * sinφ;
+        d3_geo_areaRingSum.add(Math.atan2(k * sdλ * Math.sin(adλ), cosφ0 * cosφ + k * Math.cos(adλ)));
+        polarAngle += antimeridian ? dλ + sdλ * τ : dλ;
+        if (antimeridian ^ λ0 >= meridian ^ λ >= meridian) {
+          var arc = d3_geo_cartesianCross(d3_geo_cartesian(point0), d3_geo_cartesian(point));
+          d3_geo_cartesianNormalize(arc);
+          var intersection = d3_geo_cartesianCross(meridianNormal, arc);
+          d3_geo_cartesianNormalize(intersection);
+          var φarc = (antimeridian ^ dλ >= 0 ? -1 : 1) * d3_asin(intersection[2]);
+          if (parallel > φarc || parallel === φarc && (arc[0] || arc[1])) {
+            winding += antimeridian ^ dλ >= 0 ? 1 : -1;
+          }
+        }
+        if (!j++) break;
+        λ0 = λ, sinφ0 = sinφ, cosφ0 = cosφ, point0 = point;
+      }
+    }
+    return (polarAngle < -ε || polarAngle < ε && d3_geo_areaRingSum < 0) ^ winding & 1;
+  }
+  function d3_geo_clipCircle(radius) {
+    var cr = Math.cos(radius), smallRadius = cr > 0, notHemisphere = abs(cr) > ε, interpolate = d3_geo_circleInterpolate(radius, 6 * d3_radians);
+    return d3_geo_clip(visible, clipLine, interpolate, smallRadius ? [ 0, -radius ] : [ -π, radius - π ]);
+    function visible(λ, φ) {
+      return Math.cos(λ) * Math.cos(φ) > cr;
+    }
+    function clipLine(listener) {
+      var point0, c0, v0, v00, clean;
+      return {
+        lineStart: function() {
+          v00 = v0 = false;
+          clean = 1;
+        },
+        point: function(λ, φ) {
+          var point1 = [ λ, φ ], point2, v = visible(λ, φ), c = smallRadius ? v ? 0 : code(λ, φ) : v ? code(λ + (λ < 0 ? π : -π), φ) : 0;
+          if (!point0 && (v00 = v0 = v)) listener.lineStart();
+          if (v !== v0) {
+            point2 = intersect(point0, point1);
+            if (d3_geo_sphericalEqual(point0, point2) || d3_geo_sphericalEqual(point1, point2)) {
+              point1[0] += ε;
+              point1[1] += ε;
+              v = visible(point1[0], point1[1]);
+            }
+          }
+          if (v !== v0) {
+            clean = 0;
+            if (v) {
+              listener.lineStart();
+              point2 = intersect(point1, point0);
+              listener.point(point2[0], point2[1]);
+            } else {
+              point2 = intersect(point0, point1);
+              listener.point(point2[0], point2[1]);
+              listener.lineEnd();
+            }
+            point0 = point2;
+          } else if (notHemisphere && point0 && smallRadius ^ v) {
+            var t;
+            if (!(c & c0) && (t = intersect(point1, point0, true))) {
+              clean = 0;
+              if (smallRadius) {
+                listener.lineStart();
+                listener.point(t[0][0], t[0][1]);
+                listener.point(t[1][0], t[1][1]);
+                listener.lineEnd();
+              } else {
+                listener.point(t[1][0], t[1][1]);
+                listener.lineEnd();
+                listener.lineStart();
+                listener.point(t[0][0], t[0][1]);
+              }
+            }
+          }
+          if (v && (!point0 || !d3_geo_sphericalEqual(point0, point1))) {
+            listener.point(point1[0], point1[1]);
+          }
+          point0 = point1, v0 = v, c0 = c;
+        },
+        lineEnd: function() {
+          if (v0) listener.lineEnd();
+          point0 = null;
+        },
+        clean: function() {
+          return clean | (v00 && v0) << 1;
+        }
+      };
+    }
+    function intersect(a, b, two) {
+      var pa = d3_geo_cartesian(a), pb = d3_geo_cartesian(b);
+      var n1 = [ 1, 0, 0 ], n2 = d3_geo_cartesianCross(pa, pb), n2n2 = d3_geo_cartesianDot(n2, n2), n1n2 = n2[0], determinant = n2n2 - n1n2 * n1n2;
+      if (!determinant) return !two && a;
+      var c1 = cr * n2n2 / determinant, c2 = -cr * n1n2 / determinant, n1xn2 = d3_geo_cartesianCross(n1, n2), A = d3_geo_cartesianScale(n1, c1), B = d3_geo_cartesianScale(n2, c2);
+      d3_geo_cartesianAdd(A, B);
+      var u = n1xn2, w = d3_geo_cartesianDot(A, u), uu = d3_geo_cartesianDot(u, u), t2 = w * w - uu * (d3_geo_cartesianDot(A, A) - 1);
+      if (t2 < 0) return;
+      var t = Math.sqrt(t2), q = d3_geo_cartesianScale(u, (-w - t) / uu);
+      d3_geo_cartesianAdd(q, A);
+      q = d3_geo_spherical(q);
+      if (!two) return q;
+      var λ0 = a[0], λ1 = b[0], φ0 = a[1], φ1 = b[1], z;
+      if (λ1 < λ0) z = λ0, λ0 = λ1, λ1 = z;
+      var δλ = λ1 - λ0, polar = abs(δλ - π) < ε, meridian = polar || δλ < ε;
+      if (!polar && φ1 < φ0) z = φ0, φ0 = φ1, φ1 = z;
+      if (meridian ? polar ? φ0 + φ1 > 0 ^ q[1] < (abs(q[0] - λ0) < ε ? φ0 : φ1) : φ0 <= q[1] && q[1] <= φ1 : δλ > π ^ (λ0 <= q[0] && q[0] <= λ1)) {
+        var q1 = d3_geo_cartesianScale(u, (-w + t) / uu);
+        d3_geo_cartesianAdd(q1, A);
+        return [ q, d3_geo_spherical(q1) ];
+      }
+    }
+    function code(λ, φ) {
+      var r = smallRadius ? radius : π - radius, code = 0;
+      if (λ < -r) code |= 1; else if (λ > r) code |= 2;
+      if (φ < -r) code |= 4; else if (φ > r) code |= 8;
+      return code;
+    }
+  }
+  function d3_geom_clipLine(x0, y0, x1, y1) {
+    return function(line) {
+      var a = line.a, b = line.b, ax = a.x, ay = a.y, bx = b.x, by = b.y, t0 = 0, t1 = 1, dx = bx - ax, dy = by - ay, r;
+      r = x0 - ax;
+      if (!dx && r > 0) return;
+      r /= dx;
+      if (dx < 0) {
+        if (r < t0) return;
+        if (r < t1) t1 = r;
+      } else if (dx > 0) {
+        if (r > t1) return;
+        if (r > t0) t0 = r;
+      }
+      r = x1 - ax;
+      if (!dx && r < 0) return;
+      r /= dx;
+      if (dx < 0) {
+        if (r > t1) return;
+        if (r > t0) t0 = r;
+      } else if (dx > 0) {
+        if (r < t0) return;
+        if (r < t1) t1 = r;
+      }
+      r = y0 - ay;
+      if (!dy && r > 0) return;
+      r /= dy;
+      if (dy < 0) {
+        if (r < t0) return;
+        if (r < t1) t1 = r;
+      } else if (dy > 0) {
+        if (r > t1) return;
+        if (r > t0) t0 = r;
+      }
+      r = y1 - ay;
+      if (!dy && r < 0) return;
+      r /= dy;
+      if (dy < 0) {
+        if (r > t1) return;
+        if (r > t0) t0 = r;
+      } else if (dy > 0) {
+        if (r < t0) return;
+        if (r < t1) t1 = r;
+      }
+      if (t0 > 0) line.a = {
+        x: ax + t0 * dx,
+        y: ay + t0 * dy
+      };
+      if (t1 < 1) line.b = {
+        x: ax + t1 * dx,
+        y: ay + t1 * dy
+      };
+      return line;
+    };
+  }
+  var d3_geo_clipExtentMAX = 1e9;
+  d3.geo.clipExtent = function() {
+    var x0, y0, x1, y1, stream, clip, clipExtent = {
+      stream: function(output) {
+        if (stream) stream.valid = false;
+        stream = clip(output);
+        stream.valid = true;
+        return stream;
+      },
+      extent: function(_) {
+        if (!arguments.length) return [ [ x0, y0 ], [ x1, y1 ] ];
+        clip = d3_geo_clipExtent(x0 = +_[0][0], y0 = +_[0][1], x1 = +_[1][0], y1 = +_[1][1]);
+        if (stream) stream.valid = false, stream = null;
+        return clipExtent;
+      }
+    };
+    return clipExtent.extent([ [ 0, 0 ], [ 960, 500 ] ]);
+  };
+  function d3_geo_clipExtent(x0, y0, x1, y1) {
+    return function(listener) {
+      var listener_ = listener, bufferListener = d3_geo_clipBufferListener(), clipLine = d3_geom_clipLine(x0, y0, x1, y1), segments, polygon, ring;
+      var clip = {
+        point: point,
+        lineStart: lineStart,
+        lineEnd: lineEnd,
+        polygonStart: function() {
+          listener = bufferListener;
+          segments = [];
+          polygon = [];
+          clean = true;
+        },
+        polygonEnd: function() {
+          listener = listener_;
+          segments = d3.merge(segments);
+          var clipStartInside = insidePolygon([ x0, y1 ]), inside = clean && clipStartInside, visible = segments.length;
+          if (inside || visible) {
+            listener.polygonStart();
+            if (inside) {
+              listener.lineStart();
+              interpolate(null, null, 1, listener);
+              listener.lineEnd();
+            }
+            if (visible) {
+              d3_geo_clipPolygon(segments, compare, clipStartInside, interpolate, listener);
+            }
+            listener.polygonEnd();
+          }
+          segments = polygon = ring = null;
+        }
+      };
+      function insidePolygon(p) {
+        var wn = 0, n = polygon.length, y = p[1];
+        for (var i = 0; i < n; ++i) {
+          for (var j = 1, v = polygon[i], m = v.length, a = v[0], b; j < m; ++j) {
+            b = v[j];
+            if (a[1] <= y) {
+              if (b[1] > y && d3_cross2d(a, b, p) > 0) ++wn;
+            } else {
+              if (b[1] <= y && d3_cross2d(a, b, p) < 0) --wn;
+            }
+            a = b;
+          }
+        }
+        return wn !== 0;
+      }
+      function interpolate(from, to, direction, listener) {
+        var a = 0, a1 = 0;
+        if (from == null || (a = corner(from, direction)) !== (a1 = corner(to, direction)) || comparePoints(from, to) < 0 ^ direction > 0) {
+          do {
+            listener.point(a === 0 || a === 3 ? x0 : x1, a > 1 ? y1 : y0);
+          } while ((a = (a + direction + 4) % 4) !== a1);
+        } else {
+          listener.point(to[0], to[1]);
+        }
+      }
+      function pointVisible(x, y) {
+        return x0 <= x && x <= x1 && y0 <= y && y <= y1;
+      }
+      function point(x, y) {
+        if (pointVisible(x, y)) listener.point(x, y);
+      }
+      var x__, y__, v__, x_, y_, v_, first, clean;
+      function lineStart() {
+        clip.point = linePoint;
+        if (polygon) polygon.push(ring = []);
+        first = true;
+        v_ = false;
+        x_ = y_ = NaN;
+      }
+      function lineEnd() {
+        if (segments) {
+          linePoint(x__, y__);
+          if (v__ && v_) bufferListener.rejoin();
+          segments.push(bufferListener.buffer());
+        }
+        clip.point = point;
+        if (v_) listener.lineEnd();
+      }
+      function linePoint(x, y) {
+        x = Math.max(-d3_geo_clipExtentMAX, Math.min(d3_geo_clipExtentMAX, x));
+        y = Math.max(-d3_geo_clipExtentMAX, Math.min(d3_geo_clipExtentMAX, y));
+        var v = pointVisible(x, y);
+        if (polygon) ring.push([ x, y ]);
+        if (first) {
+          x__ = x, y__ = y, v__ = v;
+          first = false;
+          if (v) {
+            listener.lineStart();
+            listener.point(x, y);
+          }
+        } else {
+          if (v && v_) listener.point(x, y); else {
+            var l = {
+              a: {
+                x: x_,
+                y: y_
+              },
+              b: {
+                x: x,
+                y: y
+              }
+            };
+            if (clipLine(l)) {
+              if (!v_) {
+                listener.lineStart();
+                listener.point(l.a.x, l.a.y);
+              }
+              listener.point(l.b.x, l.b.y);
+              if (!v) listener.lineEnd();
+              clean = false;
+            } else if (v) {
+              listener.lineStart();
+              listener.point(x, y);
+              clean = false;
+            }
+          }
+        }
+        x_ = x, y_ = y, v_ = v;
+      }
+      return clip;
+    };
+    function corner(p, direction) {
+      return abs(p[0] - x0) < ε ? direction > 0 ? 0 : 3 : abs(p[0] - x1) < ε ? direction > 0 ? 2 : 1 : abs(p[1] - y0) < ε ? direction > 0 ? 1 : 0 : direction > 0 ? 3 : 2;
+    }
+    function compare(a, b) {
+      return comparePoints(a.x, b.x);
+    }
+    function comparePoints(a, b) {
+      var ca = corner(a, 1), cb = corner(b, 1);
+      return ca !== cb ? ca - cb : ca === 0 ? b[1] - a[1] : ca === 1 ? a[0] - b[0] : ca === 2 ? a[1] - b[1] : b[0] - a[0];
+    }
+  }
+  function d3_geo_conic(projectAt) {
+    var φ0 = 0, φ1 = π / 3, m = d3_geo_projectionMutator(projectAt), p = m(φ0, φ1);
+    p.parallels = function(_) {
+      if (!arguments.length) return [ φ0 / π * 180, φ1 / π * 180 ];
+      return m(φ0 = _[0] * π / 180, φ1 = _[1] * π / 180);
+    };
+    return p;
+  }
+  function d3_geo_conicEqualArea(φ0, φ1) {
+    var sinφ0 = Math.sin(φ0), n = (sinφ0 + Math.sin(φ1)) / 2, C = 1 + sinφ0 * (2 * n - sinφ0), ρ0 = Math.sqrt(C) / n;
+    function forward(λ, φ) {
+      var ρ = Math.sqrt(C - 2 * n * Math.sin(φ)) / n;
+      return [ ρ * Math.sin(λ *= n), ρ0 - ρ * Math.cos(λ) ];
+    }
+    forward.invert = function(x, y) {
+      var ρ0_y = ρ0 - y;
+      return [ Math.atan2(x, ρ0_y) / n, d3_asin((C - (x * x + ρ0_y * ρ0_y) * n * n) / (2 * n)) ];
+    };
+    return forward;
+  }
+  (d3.geo.conicEqualArea = function() {
+    return d3_geo_conic(d3_geo_conicEqualArea);
+  }).raw = d3_geo_conicEqualArea;
+  d3.geo.albers = function() {
+    return d3.geo.conicEqualArea().rotate([ 96, 0 ]).center([ -.6, 38.7 ]).parallels([ 29.5, 45.5 ]).scale(1070);
+  };
+  d3.geo.albersUsa = function() {
+    var lower48 = d3.geo.albers();
+    var alaska = d3.geo.conicEqualArea().rotate([ 154, 0 ]).center([ -2, 58.5 ]).parallels([ 55, 65 ]);
+    var hawaii = d3.geo.conicEqualArea().rotate([ 157, 0 ]).center([ -3, 19.9 ]).parallels([ 8, 18 ]);
+    var point, pointStream = {
+      point: function(x, y) {
+        point = [ x, y ];
+      }
+    }, lower48Point, alaskaPoint, hawaiiPoint;
+    function albersUsa(coordinates) {
+      var x = coordinates[0], y = coordinates[1];
+      point = null;
+      (lower48Point(x, y), point) || (alaskaPoint(x, y), point) || hawaiiPoint(x, y);
+      return point;
+    }
+    albersUsa.invert = function(coordinates) {
+      var k = lower48.scale(), t = lower48.translate(), x = (coordinates[0] - t[0]) / k, y = (coordinates[1] - t[1]) / k;
+      return (y >= .12 && y < .234 && x >= -.425 && x < -.214 ? alaska : y >= .166 && y < .234 && x >= -.214 && x < -.115 ? hawaii : lower48).invert(coordinates);
+    };
+    albersUsa.stream = function(stream) {
+      var lower48Stream = lower48.stream(stream), alaskaStream = alaska.stream(stream), hawaiiStream = hawaii.stream(stream);
+      return {
+        point: function(x, y) {
+          lower48Stream.point(x, y);
+          alaskaStream.point(x, y);
+          hawaiiStream.point(x, y);
+        },
+        sphere: function() {
+          lower48Stream.sphere();
+          alaskaStream.sphere();
+          hawaiiStream.sphere();
+        },
+        lineStart: function() {
+          lower48Stream.lineStart();
+          alaskaStream.lineStart();
+          hawaiiStream.lineStart();
+        },
+        lineEnd: function() {
+          lower48Stream.lineEnd();
+          alaskaStream.lineEnd();
+          hawaiiStream.lineEnd();
+        },
+        polygonStart: function() {
+          lower48Stream.polygonStart();
+          alaskaStream.polygonStart();
+          hawaiiStream.polygonStart();
+        },
+        polygonEnd: function() {
+          lower48Stream.polygonEnd();
+          alaskaStream.polygonEnd();
+          hawaiiStream.polygonEnd();
+        }
+      };
+    };
+    albersUsa.precision = function(_) {
+      if (!arguments.length) return lower48.precision();
+      lower48.precision(_);
+      alaska.precision(_);
+      hawaii.precision(_);
+      return albersUsa;
+    };
+    albersUsa.scale = function(_) {
+      if (!arguments.length) return lower48.scale();
+      lower48.scale(_);
+      alaska.scale(_ * .35);
+      hawaii.scale(_);
+      return albersUsa.translate(lower48.translate());
+    };
+    albersUsa.translate = function(_) {
+      if (!arguments.length) return lower48.translate();
+      var k = lower48.scale(), x = +_[0], y = +_[1];
+      lower48Point = lower48.translate(_).clipExtent([ [ x - .455 * k, y - .238 * k ], [ x + .455 * k, y + .238 * k ] ]).stream(pointStream).point;
+      alaskaPoint = alaska.translate([ x - .307 * k, y + .201 * k ]).clipExtent([ [ x - .425 * k + ε, y + .12 * k + ε ], [ x - .214 * k - ε, y + .234 * k - ε ] ]).stream(pointStream).point;
+      hawaiiPoint = hawaii.translate([ x - .205 * k, y + .212 * k ]).clipExtent([ [ x - .214 * k + ε, y + .166 * k + ε ], [ x - .115 * k - ε, y + .234 * k - ε ] ]).stream(pointStream).point;
+      return albersUsa;
+    };
+    return albersUsa.scale(1070);
+  };
+  var d3_geo_pathAreaSum, d3_geo_pathAreaPolygon, d3_geo_pathArea = {
+    point: d3_noop,
+    lineStart: d3_noop,
+    lineEnd: d3_noop,
+    polygonStart: function() {
+      d3_geo_pathAreaPolygon = 0;
+      d3_geo_pathArea.lineStart = d3_geo_pathAreaRingStart;
+    },
+    polygonEnd: function() {
+      d3_geo_pathArea.lineStart = d3_geo_pathArea.lineEnd = d3_geo_pathArea.point = d3_noop;
+      d3_geo_pathAreaSum += abs(d3_geo_pathAreaPolygon / 2);
+    }
+  };
+  function d3_geo_pathAreaRingStart() {
+    var x00, y00, x0, y0;
+    d3_geo_pathArea.point = function(x, y) {
+      d3_geo_pathArea.point = nextPoint;
+      x00 = x0 = x, y00 = y0 = y;
+    };
+    function nextPoint(x, y) {
+      d3_geo_pathAreaPolygon += y0 * x - x0 * y;
+      x0 = x, y0 = y;
+    }
+    d3_geo_pathArea.lineEnd = function() {
+      nextPoint(x00, y00);
+    };
+  }
+  var d3_geo_pathBoundsX0, d3_geo_pathBoundsY0, d3_geo_pathBoundsX1, d3_geo_pathBoundsY1;
+  var d3_geo_pathBounds = {
+    point: d3_geo_pathBoundsPoint,
+    lineStart: d3_noop,
+    lineEnd: d3_noop,
+    polygonStart: d3_noop,
+    polygonEnd: d3_noop
+  };
+  function d3_geo_pathBoundsPoint(x, y) {
+    if (x < d3_geo_pathBoundsX0) d3_geo_pathBoundsX0 = x;
+    if (x > d3_geo_pathBoundsX1) d3_geo_pathBoundsX1 = x;
+    if (y < d3_geo_pathBoundsY0) d3_geo_pathBoundsY0 = y;
+    if (y > d3_geo_pathBoundsY1) d3_geo_pathBoundsY1 = y;
+  }
+  function d3_geo_pathBuffer() {
+    var pointCircle = d3_geo_pathBufferCircle(4.5), buffer = [];
+    var stream = {
+      point: point,
+      lineStart: function() {
+        stream.point = pointLineStart;
+      },
+      lineEnd: lineEnd,
+      polygonStart: function() {
+        stream.lineEnd = lineEndPolygon;
+      },
+      polygonEnd: function() {
+        stream.lineEnd = lineEnd;
+        stream.point = point;
+      },
+      pointRadius: function(_) {
+        pointCircle = d3_geo_pathBufferCircle(_);
+        return stream;
+      },
+      result: function() {
+        if (buffer.length) {
+          var result = buffer.join("");
+          buffer = [];
+          return result;
+        }
+      }
+    };
+    function point(x, y) {
+      buffer.push("M", x, ",", y, pointCircle);
+    }
+    function pointLineStart(x, y) {
+      buffer.push("M", x, ",", y);
+      stream.point = pointLine;
+    }
+    function pointLine(x, y) {
+      buffer.push("L", x, ",", y);
+    }
+    function lineEnd() {
+      stream.point = point;
+    }
+    function lineEndPolygon() {
+      buffer.push("Z");
+    }
+    return stream;
+  }
+  function d3_geo_pathBufferCircle(radius) {
+    return "m0," + radius + "a" + radius + "," + radius + " 0 1,1 0," + -2 * radius + "a" + radius + "," + radius + " 0 1,1 0," + 2 * radius + "z";
+  }
+  var d3_geo_pathCentroid = {
+    point: d3_geo_pathCentroidPoint,
+    lineStart: d3_geo_pathCentroidLineStart,
+    lineEnd: d3_geo_pathCentroidLineEnd,
+    polygonStart: function() {
+      d3_geo_pathCentroid.lineStart = d3_geo_pathCentroidRingStart;
+    },
+    polygonEnd: function() {
+      d3_geo_pathCentroid.point = d3_geo_pathCentroidPoint;
+      d3_geo_pathCentroid.lineStart = d3_geo_pathCentroidLineStart;
+      d3_geo_pathCentroid.lineEnd = d3_geo_pathCentroidLineEnd;
+    }
+  };
+  function d3_geo_pathCentroidPoint(x, y) {
+    d3_geo_centroidX0 += x;
+    d3_geo_centroidY0 += y;
+    ++d3_geo_centroidZ0;
+  }
+  function d3_geo_pathCentroidLineStart() {
+    var x0, y0;
+    d3_geo_pathCentroid.point = function(x, y) {
+      d3_geo_pathCentroid.point = nextPoint;
+      d3_geo_pathCentroidPoint(x0 = x, y0 = y);
+    };
+    function nextPoint(x, y) {
+      var dx = x - x0, dy = y - y0, z = Math.sqrt(dx * dx + dy * dy);
+      d3_geo_centroidX1 += z * (x0 + x) / 2;
+      d3_geo_centroidY1 += z * (y0 + y) / 2;
+      d3_geo_centroidZ1 += z;
+      d3_geo_pathCentroidPoint(x0 = x, y0 = y);
+    }
+  }
+  function d3_geo_pathCentroidLineEnd() {
+    d3_geo_pathCentroid.point = d3_geo_pathCentroidPoint;
+  }
+  function d3_geo_pathCentroidRingStart() {
+    var x00, y00, x0, y0;
+    d3_geo_pathCentroid.point = function(x, y) {
+      d3_geo_pathCentroid.point = nextPoint;
+      d3_geo_pathCentroidPoint(x00 = x0 = x, y00 = y0 = y);
+    };
+    function nextPoint(x, y) {
+      var dx = x - x0, dy = y - y0, z = Math.sqrt(dx * dx + dy * dy);
+      d3_geo_centroidX1 += z * (x0 + x) / 2;
+      d3_geo_centroidY1 += z * (y0 + y) / 2;
+      d3_geo_centroidZ1 += z;
+      z = y0 * x - x0 * y;
+      d3_geo_centroidX2 += z * (x0 + x);
+      d3_geo_centroidY2 += z * (y0 + y);
+      d3_geo_centroidZ2 += z * 3;
+      d3_geo_pathCentroidPoint(x0 = x, y0 = y);
+    }
+    d3_geo_pathCentroid.lineEnd = function() {
+      nextPoint(x00, y00);
+    };
+  }
+  function d3_geo_pathContext(context) {
+    var pointRadius = 4.5;
+    var stream = {
+      point: point,
+      lineStart: function() {
+        stream.point = pointLineStart;
+      },
+      lineEnd: lineEnd,
+      polygonStart: function() {
+        stream.lineEnd = lineEndPolygon;
+      },
+      polygonEnd: function() {
+        stream.lineEnd = lineEnd;
+        stream.point = point;
+      },
+      pointRadius: function(_) {
+        pointRadius = _;
+        return stream;
+      },
+      result: d3_noop
+    };
+    function point(x, y) {
+      context.moveTo(x + pointRadius, y);
+      context.arc(x, y, pointRadius, 0, τ);
+    }
+    function pointLineStart(x, y) {
+      context.moveTo(x, y);
+      stream.point = pointLine;
+    }
+    function pointLine(x, y) {
+      context.lineTo(x, y);
+    }
+    function lineEnd() {
+      stream.point = point;
+    }
+    function lineEndPolygon() {
+      context.closePath();
+    }
+    return stream;
+  }
+  function d3_geo_resample(project) {
+    var δ2 = .5, cosMinDistance = Math.cos(30 * d3_radians), maxDepth = 16;
+    function resample(stream) {
+      return (maxDepth ? resampleRecursive : resampleNone)(stream);
+    }
+    function resampleNone(stream) {
+      return d3_geo_transformPoint(stream, function(x, y) {
+        x = project(x, y);
+        stream.point(x[0], x[1]);
+      });
+    }
+    function resampleRecursive(stream) {
+      var λ00, φ00, x00, y00, a00, b00, c00, λ0, x0, y0, a0, b0, c0;
+      var resample = {
+        point: point,
+        lineStart: lineStart,
+        lineEnd: lineEnd,
+        polygonStart: function() {
+          stream.polygonStart();
+          resample.lineStart = ringStart;
+        },
+        polygonEnd: function() {
+          stream.polygonEnd();
+          resample.lineStart = lineStart;
+        }
+      };
+      function point(x, y) {
+        x = project(x, y);
+        stream.point(x[0], x[1]);
+      }
+      function lineStart() {
+        x0 = NaN;
+        resample.point = linePoint;
+        stream.lineStart();
+      }
+      function linePoint(λ, φ) {
+        var c = d3_geo_cartesian([ λ, φ ]), p = project(λ, φ);
+        resampleLineTo(x0, y0, λ0, a0, b0, c0, x0 = p[0], y0 = p[1], λ0 = λ, a0 = c[0], b0 = c[1], c0 = c[2], maxDepth, stream);
+        stream.point(x0, y0);
+      }
+      function lineEnd() {
+        resample.point = point;
+        stream.lineEnd();
+      }
+      function ringStart() {
+        lineStart();
+        resample.point = ringPoint;
+        resample.lineEnd = ringEnd;
+      }
+      function ringPoint(λ, φ) {
+        linePoint(λ00 = λ, φ00 = φ), x00 = x0, y00 = y0, a00 = a0, b00 = b0, c00 = c0;
+        resample.point = linePoint;
+      }
+      function ringEnd() {
+        resampleLineTo(x0, y0, λ0, a0, b0, c0, x00, y00, λ00, a00, b00, c00, maxDepth, stream);
+        resample.lineEnd = lineEnd;
+        lineEnd();
+      }
+      return resample;
+    }
+    function resampleLineTo(x0, y0, λ0, a0, b0, c0, x1, y1, λ1, a1, b1, c1, depth, stream) {
+      var dx = x1 - x0, dy = y1 - y0, d2 = dx * dx + dy * dy;
+      if (d2 > 4 * δ2 && depth--) {
+        var a = a0 + a1, b = b0 + b1, c = c0 + c1, m = Math.sqrt(a * a + b * b + c * c), φ2 = Math.asin(c /= m), λ2 = abs(abs(c) - 1) < ε || abs(λ0 - λ1) < ε ? (λ0 + λ1) / 2 : Math.atan2(b, a), p = project(λ2, φ2), x2 = p[0], y2 = p[1], dx2 = x2 - x0, dy2 = y2 - y0, dz = dy * dx2 - dx * dy2;
+        if (dz * dz / d2 > δ2 || abs((dx * dx2 + dy * dy2) / d2 - .5) > .3 || a0 * a1 + b0 * b1 + c0 * c1 < cosMinDistance) {
+          resampleLineTo(x0, y0, λ0, a0, b0, c0, x2, y2, λ2, a /= m, b /= m, c, depth, stream);
+          stream.point(x2, y2);
+          resampleLineTo(x2, y2, λ2, a, b, c, x1, y1, λ1, a1, b1, c1, depth, stream);
+        }
+      }
+    }
+    resample.precision = function(_) {
+      if (!arguments.length) return Math.sqrt(δ2);
+      maxDepth = (δ2 = _ * _) > 0 && 16;
+      return resample;
+    };
+    return resample;
+  }
+  d3.geo.path = function() {
+    var pointRadius = 4.5, projection, context, projectStream, contextStream, cacheStream;
+    function path(object) {
+      if (object) {
+        if (typeof pointRadius === "function") contextStream.pointRadius(+pointRadius.apply(this, arguments));
+        if (!cacheStream || !cacheStream.valid) cacheStream = projectStream(contextStream);
+        d3.geo.stream(object, cacheStream);
+      }
+      return contextStream.result();
+    }
+    path.area = function(object) {
+      d3_geo_pathAreaSum = 0;
+      d3.geo.stream(object, projectStream(d3_geo_pathArea));
+      return d3_geo_pathAreaSum;
+    };
+    path.centroid = function(object) {
+      d3_geo_centroidX0 = d3_geo_centroidY0 = d3_geo_centroidZ0 = d3_geo_centroidX1 = d3_geo_centroidY1 = d3_geo_centroidZ1 = d3_geo_centroidX2 = d3_geo_centroidY2 = d3_geo_centroidZ2 = 0;
+      d3.geo.stream(object, projectStream(d3_geo_pathCentroid));
+      return d3_geo_centroidZ2 ? [ d3_geo_centroidX2 / d3_geo_centroidZ2, d3_geo_centroidY2 / d3_geo_centroidZ2 ] : d3_geo_centroidZ1 ? [ d3_geo_centroidX1 / d3_geo_centroidZ1, d3_geo_centroidY1 / d3_geo_centroidZ1 ] : d3_geo_centroidZ0 ? [ d3_geo_centroidX0 / d3_geo_centroidZ0, d3_geo_centroidY0 / d3_geo_centroidZ0 ] : [ NaN, NaN ];
+    };
+    path.bounds = function(object) {
+      d3_geo_pathBoundsX1 = d3_geo_pathBoundsY1 = -(d3_geo_pathBoundsX0 = d3_geo_pathBoundsY0 = Infinity);
+      d3.geo.stream(object, projectStream(d3_geo_pathBounds));
+      return [ [ d3_geo_pathBoundsX0, d3_geo_pathBoundsY0 ], [ d3_geo_pathBoundsX1, d3_geo_pathBoundsY1 ] ];
+    };
+    path.projection = function(_) {
+      if (!arguments.length) return projection;
+      projectStream = (projection = _) ? _.stream || d3_geo_pathProjectStream(_) : d3_identity;
+      return reset();
+    };
+    path.context = function(_) {
+      if (!arguments.length) return context;
+      contextStream = (context = _) == null ? new d3_geo_pathBuffer() : new d3_geo_pathContext(_);
+      if (typeof pointRadius !== "function") contextStream.pointRadius(pointRadius);
+      return reset();
+    };
+    path.pointRadius = function(_) {
+      if (!arguments.length) return pointRadius;
+      pointRadius = typeof _ === "function" ? _ : (contextStream.pointRadius(+_), +_);
+      return path;
+    };
+    function reset() {
+      cacheStream = null;
+      return path;
+    }
+    return path.projection(d3.geo.albersUsa()).context(null);
+  };
+  function d3_geo_pathProjectStream(project) {
+    var resample = d3_geo_resample(function(x, y) {
+      return project([ x * d3_degrees, y * d3_degrees ]);
+    });
+    return function(stream) {
+      return d3_geo_projectionRadians(resample(stream));
+    };
+  }
+  d3.geo.transform = function(methods) {
+    return {
+      stream: function(stream) {
+        var transform = new d3_geo_transform(stream);
+        for (var k in methods) transform[k] = methods[k];
+        return transform;
+      }
+    };
+  };
+  function d3_geo_transform(stream) {
+    this.stream = stream;
+  }
+  d3_geo_transform.prototype = {
+    point: function(x, y) {
+      this.stream.point(x, y);
+    },
+    sphere: function() {
+      this.stream.sphere();
+    },
+    lineStart: function() {
+      this.stream.lineStart();
+    },
+    lineEnd: function() {
+      this.stream.lineEnd();
+    },
+    polygonStart: function() {
+      this.stream.polygonStart();
+    },
+    polygonEnd: function() {
+      this.stream.polygonEnd();
+    }
+  };
+  function d3_geo_transformPoint(stream, point) {
+    return {
+      point: point,
+      sphere: function() {
+        stream.sphere();
+      },
+      lineStart: function() {
+        stream.lineStart();
+      },
+      lineEnd: function() {
+        stream.lineEnd();
+      },
+      polygonStart: function() {
+        stream.polygonStart();
+      },
+      polygonEnd: function() {
+        stream.polygonEnd();
+      }
+    };
+  }
+  d3.geo.projection = d3_geo_projection;
+  d3.geo.projectionMutator = d3_geo_projectionMutator;
+  function d3_geo_projection(project) {
+    return d3_geo_projectionMutator(function() {
+      return project;
+    })();
+  }
+  function d3_geo_projectionMutator(projectAt) {
+    var project, rotate, projectRotate, projectResample = d3_geo_resample(function(x, y) {
+      x = project(x, y);
+      return [ x[0] * k + δx, δy - x[1] * k ];
+    }), k = 150, x = 480, y = 250, λ = 0, φ = 0, δλ = 0, δφ = 0, δγ = 0, δx, δy, preclip = d3_geo_clipAntimeridian, postclip = d3_identity, clipAngle = null, clipExtent = null, stream;
+    function projection(point) {
+      point = projectRotate(point[0] * d3_radians, point[1] * d3_radians);
+      return [ point[0] * k + δx, δy - point[1] * k ];
+    }
+    function invert(point) {
+      point = projectRotate.invert((point[0] - δx) / k, (δy - point[1]) / k);
+      return point && [ point[0] * d3_degrees, point[1] * d3_degrees ];
+    }
+    projection.stream = function(output) {
+      if (stream) stream.valid = false;
+      stream = d3_geo_projectionRadians(preclip(rotate, projectResample(postclip(output))));
+      stream.valid = true;
+      return stream;
+    };
+    projection.clipAngle = function(_) {
+      if (!arguments.length) return clipAngle;
+      preclip = _ == null ? (clipAngle = _, d3_geo_clipAntimeridian) : d3_geo_clipCircle((clipAngle = +_) * d3_radians);
+      return invalidate();
+    };
+    projection.clipExtent = function(_) {
+      if (!arguments.length) return clipExtent;
+      clipExtent = _;
+      postclip = _ ? d3_geo_clipExtent(_[0][0], _[0][1], _[1][0], _[1][1]) : d3_identity;
+      return invalidate();
+    };
+    projection.scale = function(_) {
+      if (!arguments.length) return k;
+      k = +_;
+      return reset();
+    };
+    projection.translate = function(_) {
+      if (!arguments.length) return [ x, y ];
+      x = +_[0];
+      y = +_[1];
+      return reset();
+    };
+    projection.center = function(_) {
+      if (!arguments.length) return [ λ * d3_degrees, φ * d3_degrees ];
+      λ = _[0] % 360 * d3_radians;
+      φ = _[1] % 360 * d3_radians;
+      return reset();
+    };
+    projection.rotate = function(_) {
+      if (!arguments.length) return [ δλ * d3_degrees, δφ * d3_degrees, δγ * d3_degrees ];
+      δλ = _[0] % 360 * d3_radians;
+      δφ = _[1] % 360 * d3_radians;
+      δγ = _.length > 2 ? _[2] % 360 * d3_radians : 0;
+      return reset();
+    };
+    d3.rebind(projection, projectResample, "precision");
+    function reset() {
+      projectRotate = d3_geo_compose(rotate = d3_geo_rotation(δλ, δφ, δγ), project);
+      var center = project(λ, φ);
+      δx = x - center[0] * k;
+      δy = y + center[1] * k;
+      return invalidate();
+    }
+    function invalidate() {
+      if (stream) stream.valid = false, stream = null;
+      return projection;
+    }
+    return function() {
+      project = projectAt.apply(this, arguments);
+      projection.invert = project.invert && invert;
+      return reset();
+    };
+  }
+  function d3_geo_projectionRadians(stream) {
+    return d3_geo_transformPoint(stream, function(x, y) {
+      stream.point(x * d3_radians, y * d3_radians);
+    });
+  }
+  function d3_geo_equirectangular(λ, φ) {
+    return [ λ, φ ];
+  }
+  (d3.geo.equirectangular = function() {
+    return d3_geo_projection(d3_geo_equirectangular);
+  }).raw = d3_geo_equirectangular.invert = d3_geo_equirectangular;
+  d3.geo.rotation = function(rotate) {
+    rotate = d3_geo_rotation(rotate[0] % 360 * d3_radians, rotate[1] * d3_radians, rotate.length > 2 ? rotate[2] * d3_radians : 0);
+    function forward(coordinates) {
+      coordinates = rotate(coordinates[0] * d3_radians, coordinates[1] * d3_radians);
+      return coordinates[0] *= d3_degrees, coordinates[1] *= d3_degrees, coordinates;
+    }
+    forward.invert = function(coordinates) {
+      coordinates = rotate.invert(coordinates[0] * d3_radians, coordinates[1] * d3_radians);
+      return coordinates[0] *= d3_degrees, coordinates[1] *= d3_degrees, coordinates;
+    };
+    return forward;
+  };
+  function d3_geo_identityRotation(λ, φ) {
+    return [ λ > π ? λ - τ : λ < -π ? λ + τ : λ, φ ];
+  }
+  d3_geo_identityRotation.invert = d3_geo_equirectangular;
+  function d3_geo_rotation(δλ, δφ, δγ) {
+    return δλ ? δφ || δγ ? d3_geo_compose(d3_geo_rotationλ(δλ), d3_geo_rotationφγ(δφ, δγ)) : d3_geo_rotationλ(δλ) : δφ || δγ ? d3_geo_rotationφγ(δφ, δγ) : d3_geo_identityRotation;
+  }
+  function d3_geo_forwardRotationλ(δλ) {
+    return function(λ, φ) {
+      return λ += δλ, [ λ > π ? λ - τ : λ < -π ? λ + τ : λ, φ ];
+    };
+  }
+  function d3_geo_rotationλ(δλ) {
+    var rotation = d3_geo_forwardRotationλ(δλ);
+    rotation.invert = d3_geo_forwardRotationλ(-δλ);
+    return rotation;
+  }
+  function d3_geo_rotationφγ(δφ, δγ) {
+    var cosδφ = Math.cos(δφ), sinδφ = Math.sin(δφ), cosδγ = Math.cos(δγ), sinδγ = Math.sin(δγ);
+    function rotation(λ, φ) {
+      var cosφ = Math.cos(φ), x = Math.cos(λ) * cosφ, y = Math.sin(λ) * cosφ, z = Math.sin(φ), k = z * cosδφ + x * sinδφ;
+      return [ Math.atan2(y * cosδγ - k * sinδγ, x * cosδφ - z * sinδφ), d3_asin(k * cosδγ + y * sinδγ) ];
+    }
+    rotation.invert = function(λ, φ) {
+      var cosφ = Math.cos(φ), x = Math.cos(λ) * cosφ, y = Math.sin(λ) * cosφ, z = Math.sin(φ), k = z * cosδγ - y * sinδγ;
+      return [ Math.atan2(y * cosδγ + z * sinδγ, x * cosδφ + k * sinδφ), d3_asin(k * cosδφ - x * sinδφ) ];
+    };
+    return rotation;
+  }
+  d3.geo.circle = function() {
+    var origin = [ 0, 0 ], angle, precision = 6, interpolate;
+    function circle() {
+      var center = typeof origin === "function" ? origin.apply(this, arguments) : origin, rotate = d3_geo_rotation(-center[0] * d3_radians, -center[1] * d3_radians, 0).invert, ring = [];
+      interpolate(null, null, 1, {
+        point: function(x, y) {
+          ring.push(x = rotate(x, y));
+          x[0] *= d3_degrees, x[1] *= d3_degrees;
+        }
+      });
+      return {
+        type: "Polygon",
+        coordinates: [ ring ]
+      };
+    }
+    circle.origin = function(x) {
+      if (!arguments.length) return origin;
+      origin = x;
+      return circle;
+    };
+    circle.angle = function(x) {
+      if (!arguments.length) return angle;
+      interpolate = d3_geo_circleInterpolate((angle = +x) * d3_radians, precision * d3_radians);
+      return circle;
+    };
+    circle.precision = function(_) {
+      if (!arguments.length) return precision;
+      interpolate = d3_geo_circleInterpolate(angle * d3_radians, (precision = +_) * d3_radians);
+      return circle;
+    };
+    return circle.angle(90);
+  };
+  function d3_geo_circleInterpolate(radius, precision) {
+    var cr = Math.cos(radius), sr = Math.sin(radius);
+    return function(from, to, direction, listener) {
+      var step = direction * precision;
+      if (from != null) {
+        from = d3_geo_circleAngle(cr, from);
+        to = d3_geo_circleAngle(cr, to);
+        if (direction > 0 ? from < to : from > to) from += direction * τ;
+      } else {
+        from = radius + direction * τ;
+        to = radius - .5 * step;
+      }
+      for (var point, t = from; direction > 0 ? t > to : t < to; t -= step) {
+        listener.point((point = d3_geo_spherical([ cr, -sr * Math.cos(t), -sr * Math.sin(t) ]))[0], point[1]);
+      }
+    };
+  }
+  function d3_geo_circleAngle(cr, point) {
+    var a = d3_geo_cartesian(point);
+    a[0] -= cr;
+    d3_geo_cartesianNormalize(a);
+    var angle = d3_acos(-a[1]);
+    return ((-a[2] < 0 ? -angle : angle) + 2 * Math.PI - ε) % (2 * Math.PI);
+  }
+  d3.geo.distance = function(a, b) {
+    var Δλ = (b[0] - a[0]) * d3_radians, φ0 = a[1] * d3_radians, φ1 = b[1] * d3_radians, sinΔλ = Math.sin(Δλ), cosΔλ = Math.cos(Δλ), sinφ0 = Math.sin(φ0), cosφ0 = Math.cos(φ0), sinφ1 = Math.sin(φ1), cosφ1 = Math.cos(φ1), t;
+    return Math.atan2(Math.sqrt((t = cosφ1 * sinΔλ) * t + (t = cosφ0 * sinφ1 - sinφ0 * cosφ1 * cosΔλ) * t), sinφ0 * sinφ1 + cosφ0 * cosφ1 * cosΔλ);
+  };
+  d3.geo.graticule = function() {
+    var x1, x0, X1, X0, y1, y0, Y1, Y0, dx = 10, dy = dx, DX = 90, DY = 360, x, y, X, Y, precision = 2.5;
+    function graticule() {
+      return {
+        type: "MultiLineString",
+        coordinates: lines()
+      };
+    }
+    function lines() {
+      return d3.range(Math.ceil(X0 / DX) * DX, X1, DX).map(X).concat(d3.range(Math.ceil(Y0 / DY) * DY, Y1, DY).map(Y)).concat(d3.range(Math.ceil(x0 / dx) * dx, x1, dx).filter(function(x) {
+        return abs(x % DX) > ε;
+      }).map(x)).concat(d3.range(Math.ceil(y0 / dy) * dy, y1, dy).filter(function(y) {
+        return abs(y % DY) > ε;
+      }).map(y));
+    }
+    graticule.lines = function() {
+      return lines().map(function(coordinates) {
+        return {
+          type: "LineString",
+          coordinates: coordinates
+        };
+      });
+    };
+    graticule.outline = function() {
+      return {
+        type: "Polygon",
+        coordinates: [ X(X0).concat(Y(Y1).slice(1), X(X1).reverse().slice(1), Y(Y0).reverse().slice(1)) ]
+      };
+    };
+    graticule.extent = function(_) {
+      if (!arguments.length) return graticule.minorExtent();
+      return graticule.majorExtent(_).minorExtent(_);
+    };
+    graticule.majorExtent = function(_) {
+      if (!arguments.length) return [ [ X0, Y0 ], [ X1, Y1 ] ];
+      X0 = +_[0][0], X1 = +_[1][0];
+      Y0 = +_[0][1], Y1 = +_[1][1];
+      if (X0 > X1) _ = X0, X0 = X1, X1 = _;
+      if (Y0 > Y1) _ = Y0, Y0 = Y1, Y1 = _;
+      return graticule.precision(precision);
+    };
+    graticule.minorExtent = function(_) {
+      if (!arguments.length) return [ [ x0, y0 ], [ x1, y1 ] ];
+      x0 = +_[0][0], x1 = +_[1][0];
+      y0 = +_[0][1], y1 = +_[1][1];
+      if (x0 > x1) _ = x0, x0 = x1, x1 = _;
+      if (y0 > y1) _ = y0, y0 = y1, y1 = _;
+      return graticule.precision(precision);
+    };
+    graticule.step = function(_) {
+      if (!arguments.length) return graticule.minorStep();
+      return graticule.majorStep(_).minorStep(_);
+    };
+    graticule.majorStep = function(_) {
+      if (!arguments.length) return [ DX, DY ];
+      DX = +_[0], DY = +_[1];
+      return graticule;
+    };
+    graticule.minorStep = function(_) {
+      if (!arguments.length) return [ dx, dy ];
+      dx = +_[0], dy = +_[1];
+      return graticule;
+    };
+    graticule.precision = function(_) {
+      if (!arguments.length) return precision;
+      precision = +_;
+      x = d3_geo_graticuleX(y0, y1, 90);
+      y = d3_geo_graticuleY(x0, x1, precision);
+      X = d3_geo_graticuleX(Y0, Y1, 90);
+      Y = d3_geo_graticuleY(X0, X1, precision);
+      return graticule;
+    };
+    return graticule.majorExtent([ [ -180, -90 + ε ], [ 180, 90 - ε ] ]).minorExtent([ [ -180, -80 - ε ], [ 180, 80 + ε ] ]);
+  };
+  function d3_geo_graticuleX(y0, y1, dy) {
+    var y = d3.range(y0, y1 - ε, dy).concat(y1);
+    return function(x) {
+      return y.map(function(y) {
+        return [ x, y ];
+      });
+    };
+  }
+  function d3_geo_graticuleY(x0, x1, dx) {
+    var x = d3.range(x0, x1 - ε, dx).concat(x1);
+    return function(y) {
+      return x.map(function(x) {
+        return [ x, y ];
+      });
+    };
+  }
+  function d3_source(d) {
+    return d.source;
+  }
+  function d3_target(d) {
+    return d.target;
+  }
+  d3.geo.greatArc = function() {
+    var source = d3_source, source_, target = d3_target, target_;
+    function greatArc() {
+      return {
+        type: "LineString",
+        coordinates: [ source_ || source.apply(this, arguments), target_ || target.apply(this, arguments) ]
+      };
+    }
+    greatArc.distance = function() {
+      return d3.geo.distance(source_ || source.apply(this, arguments), target_ || target.apply(this, arguments));
+    };
+    greatArc.source = function(_) {
+      if (!arguments.length) return source;
+      source = _, source_ = typeof _ === "function" ? null : _;
+      return greatArc;
+    };
+    greatArc.target = function(_) {
+      if (!arguments.length) return target;
+      target = _, target_ = typeof _ === "function" ? null : _;
+      return greatArc;
+    };
+    greatArc.precision = function() {
+      return arguments.length ? greatArc : 0;
+    };
+    return greatArc;
+  };
+  d3.geo.interpolate = function(source, target) {
+    return d3_geo_interpolate(source[0] * d3_radians, source[1] * d3_radians, target[0] * d3_radians, target[1] * d3_radians);
+  };
+  function d3_geo_interpolate(x0, y0, x1, y1) {
+    var cy0 = Math.cos(y0), sy0 = Math.sin(y0), cy1 = Math.cos(y1), sy1 = Math.sin(y1), kx0 = cy0 * Math.cos(x0), ky0 = cy0 * Math.sin(x0), kx1 = cy1 * Math.cos(x1), ky1 = cy1 * Math.sin(x1), d = 2 * Math.asin(Math.sqrt(d3_haversin(y1 - y0) + cy0 * cy1 * d3_haversin(x1 - x0))), k = 1 / Math.sin(d);
+    var interpolate = d ? function(t) {
+      var B = Math.sin(t *= d) * k, A = Math.sin(d - t) * k, x = A * kx0 + B * kx1, y = A * ky0 + B * ky1, z = A * sy0 + B * sy1;
+      return [ Math.atan2(y, x) * d3_degrees, Math.atan2(z, Math.sqrt(x * x + y * y)) * d3_degrees ];
+    } : function() {
+      return [ x0 * d3_degrees, y0 * d3_degrees ];
+    };
+    interpolate.distance = d;
+    return interpolate;
+  }
+  d3.geo.length = function(object) {
+    d3_geo_lengthSum = 0;
+    d3.geo.stream(object, d3_geo_length);
+    return d3_geo_lengthSum;
+  };
+  var d3_geo_lengthSum;
+  var d3_geo_length = {
+    sphere: d3_noop,
+    point: d3_noop,
+    lineStart: d3_geo_lengthLineStart,
+    lineEnd: d3_noop,
+    polygonStart: d3_noop,
+    polygonEnd: d3_noop
+  };
+  function d3_geo_lengthLineStart() {
+    var λ0, sinφ0, cosφ0;
+    d3_geo_length.point = function(λ, φ) {
+      λ0 = λ * d3_radians, sinφ0 = Math.sin(φ *= d3_radians), cosφ0 = Math.cos(φ);
+      d3_geo_length.point = nextPoint;
+    };
+    d3_geo_length.lineEnd = function() {
+      d3_geo_length.point = d3_geo_length.lineEnd = d3_noop;
+    };
+    function nextPoint(λ, φ) {
+      var sinφ = Math.sin(φ *= d3_radians), cosφ = Math.cos(φ), t = abs((λ *= d3_radians) - λ0), cosΔλ = Math.cos(t);
+      d3_geo_lengthSum += Math.atan2(Math.sqrt((t = cosφ * Math.sin(t)) * t + (t = cosφ0 * sinφ - sinφ0 * cosφ * cosΔλ) * t), sinφ0 * sinφ + cosφ0 * cosφ * cosΔλ);
+      λ0 = λ, sinφ0 = sinφ, cosφ0 = cosφ;
+    }
+  }
+  function d3_geo_azimuthal(scale, angle) {
+    function azimuthal(λ, φ) {
+      var cosλ = Math.cos(λ), cosφ = Math.cos(φ), k = scale(cosλ * cosφ);
+      return [ k * cosφ * Math.sin(λ), k * Math.sin(φ) ];
+    }
+    azimuthal.invert = function(x, y) {
+      var ρ = Math.sqrt(x * x + y * y), c = angle(ρ), sinc = Math.sin(c), cosc = Math.cos(c);
+      return [ Math.atan2(x * sinc, ρ * cosc), Math.asin(ρ && y * sinc / ρ) ];
+    };
+    return azimuthal;
+  }
+  var d3_geo_azimuthalEqualArea = d3_geo_azimuthal(function(cosλcosφ) {
+    return Math.sqrt(2 / (1 + cosλcosφ));
+  }, function(ρ) {
+    return 2 * Math.asin(ρ / 2);
+  });
+  (d3.geo.azimuthalEqualArea = function() {
+    return d3_geo_projection(d3_geo_azimuthalEqualArea);
+  }).raw = d3_geo_azimuthalEqualArea;
+  var d3_geo_azimuthalEquidistant = d3_geo_azimuthal(function(cosλcosφ) {
+    var c = Math.acos(cosλcosφ);
+    return c && c / Math.sin(c);
+  }, d3_identity);
+  (d3.geo.azimuthalEquidistant = function() {
+    return d3_geo_projection(d3_geo_azimuthalEquidistant);
+  }).raw = d3_geo_azimuthalEquidistant;
+  function d3_geo_conicConformal(φ0, φ1) {
+    var cosφ0 = Math.cos(φ0), t = function(φ) {
+      return Math.tan(π / 4 + φ / 2);
+    }, n = φ0 === φ1 ? Math.sin(φ0) : Math.log(cosφ0 / Math.cos(φ1)) / Math.log(t(φ1) / t(φ0)), F = cosφ0 * Math.pow(t(φ0), n) / n;
+    if (!n) return d3_geo_mercator;
+    function forward(λ, φ) {
+      if (F > 0) {
+        if (φ < -halfπ + ε) φ = -halfπ + ε;
+      } else {
+        if (φ > halfπ - ε) φ = halfπ - ε;
+      }
+      var ρ = F / Math.pow(t(φ), n);
+      return [ ρ * Math.sin(n * λ), F - ρ * Math.cos(n * λ) ];
+    }
+    forward.invert = function(x, y) {
+      var ρ0_y = F - y, ρ = d3_sgn(n) * Math.sqrt(x * x + ρ0_y * ρ0_y);
+      return [ Math.atan2(x, ρ0_y) / n, 2 * Math.atan(Math.pow(F / ρ, 1 / n)) - halfπ ];
+    };
+    return forward;
+  }
+  (d3.geo.conicConformal = function() {
+    return d3_geo_conic(d3_geo_conicConformal);
+  }).raw = d3_geo_conicConformal;
+  function d3_geo_conicEquidistant(φ0, φ1) {
+    var cosφ0 = Math.cos(φ0), n = φ0 === φ1 ? Math.sin(φ0) : (cosφ0 - Math.cos(φ1)) / (φ1 - φ0), G = cosφ0 / n + φ0;
+    if (abs(n) < ε) return d3_geo_equirectangular;
+    function forward(λ, φ) {
+      var ρ = G - φ;
+      return [ ρ * Math.sin(n * λ), G - ρ * Math.cos(n * λ) ];
+    }
+    forward.invert = function(x, y) {
+      var ρ0_y = G - y;
+      return [ Math.atan2(x, ρ0_y) / n, G - d3_sgn(n) * Math.sqrt(x * x + ρ0_y * ρ0_y) ];
+    };
+    return forward;
+  }
+  (d3.geo.conicEquidistant = function() {
+    return d3_geo_conic(d3_geo_conicEquidistant);
+  }).raw = d3_geo_conicEquidistant;
+  var d3_geo_gnomonic = d3_geo_azimuthal(function(cosλcosφ) {
+    return 1 / cosλcosφ;
+  }, Math.atan);
+  (d3.geo.gnomonic = function() {
+    return d3_geo_projection(d3_geo_gnomonic);
+  }).raw = d3_geo_gnomonic;
+  function d3_geo_mercator(λ, φ) {
+    return [ λ, Math.log(Math.tan(π / 4 + φ / 2)) ];
+  }
+  d3_geo_mercator.invert = function(x, y) {
+    return [ x, 2 * Math.atan(Math.exp(y)) - halfπ ];
+  };
+  function d3_geo_mercatorProjection(project) {
+    var m = d3_geo_projection(project), scale = m.scale, translate = m.translate, clipExtent = m.clipExtent, clipAuto;
+    m.scale = function() {
+      var v = scale.apply(m, arguments);
+      return v === m ? clipAuto ? m.clipExtent(null) : m : v;
+    };
+    m.translate = function() {
+      var v = translate.apply(m, arguments);
+      return v === m ? clipAuto ? m.clipExtent(null) : m : v;
+    };
+    m.clipExtent = function(_) {
+      var v = clipExtent.apply(m, arguments);
+      if (v === m) {
+        if (clipAuto = _ == null) {
+          var k = π * scale(), t = translate();
+          clipExtent([ [ t[0] - k, t[1] - k ], [ t[0] + k, t[1] + k ] ]);
+        }
+      } else if (clipAuto) {
+        v = null;
+      }
+      return v;
+    };
+    return m.clipExtent(null);
+  }
+  (d3.geo.mercator = function() {
+    return d3_geo_mercatorProjection(d3_geo_mercator);
+  }).raw = d3_geo_mercator;
+  var d3_geo_orthographic = d3_geo_azimuthal(function() {
+    return 1;
+  }, Math.asin);
+  (d3.geo.orthographic = function() {
+    return d3_geo_projection(d3_geo_orthographic);
+  }).raw = d3_geo_orthographic;
+  var d3_geo_stereographic = d3_geo_azimuthal(function(cosλcosφ) {
+    return 1 / (1 + cosλcosφ);
+  }, function(ρ) {
+    return 2 * Math.atan(ρ);
+  });
+  (d3.geo.stereographic = function() {
+    return d3_geo_projection(d3_geo_stereographic);
+  }).raw = d3_geo_stereographic;
+  function d3_geo_transverseMercator(λ, φ) {
+    return [ Math.log(Math.tan(π / 4 + φ / 2)), -λ ];
+  }
+  d3_geo_transverseMercator.invert = function(x, y) {
+    return [ -y, 2 * Math.atan(Math.exp(x)) - halfπ ];
+  };
+  (d3.geo.transverseMercator = function() {
+    var projection = d3_geo_mercatorProjection(d3_geo_transverseMercator), center = projection.center, rotate = projection.rotate;
+    projection.center = function(_) {
+      return _ ? center([ -_[1], _[0] ]) : (_ = center(), [ _[1], -_[0] ]);
+    };
+    projection.rotate = function(_) {
+      return _ ? rotate([ _[0], _[1], _.length > 2 ? _[2] + 90 : 90 ]) : (_ = rotate(), 
+      [ _[0], _[1], _[2] - 90 ]);
+    };
+    return rotate([ 0, 0, 90 ]);
+  }).raw = d3_geo_transverseMercator;
+  d3.geom = {};
+  function d3_geom_pointX(d) {
+    return d[0];
+  }
+  function d3_geom_pointY(d) {
+    return d[1];
+  }
+  d3.geom.hull = function(vertices) {
+    var x = d3_geom_pointX, y = d3_geom_pointY;
+    if (arguments.length) return hull(vertices);
+    function hull(data) {
+      if (data.length < 3) return [];
+      var fx = d3_functor(x), fy = d3_functor(y), i, n = data.length, points = [], flippedPoints = [];
+      for (i = 0; i < n; i++) {
+        points.push([ +fx.call(this, data[i], i), +fy.call(this, data[i], i), i ]);
+      }
+      points.sort(d3_geom_hullOrder);
+      for (i = 0; i < n; i++) flippedPoints.push([ points[i][0], -points[i][1] ]);
+      var upper = d3_geom_hullUpper(points), lower = d3_geom_hullUpper(flippedPoints);
+      var skipLeft = lower[0] === upper[0], skipRight = lower[lower.length - 1] === upper[upper.length - 1], polygon = [];
+      for (i = upper.length - 1; i >= 0; --i) polygon.push(data[points[upper[i]][2]]);
+      for (i = +skipLeft; i < lower.length - skipRight; ++i) polygon.push(data[points[lower[i]][2]]);
+      return polygon;
+    }
+    hull.x = function(_) {
+      return arguments.length ? (x = _, hull) : x;
+    };
+    hull.y = function(_) {
+      return arguments.length ? (y = _, hull) : y;
+    };
+    return hull;
+  };
+  function d3_geom_hullUpper(points) {
+    var n = points.length, hull = [ 0, 1 ], hs = 2;
+    for (var i = 2; i < n; i++) {
+      while (hs > 1 && d3_cross2d(points[hull[hs - 2]], points[hull[hs - 1]], points[i]) <= 0) --hs;
+      hull[hs++] = i;
+    }
+    return hull.slice(0, hs);
+  }
+  function d3_geom_hullOrder(a, b) {
+    return a[0] - b[0] || a[1] - b[1];
+  }
+  d3.geom.polygon = function(coordinates) {
+    d3_subclass(coordinates, d3_geom_polygonPrototype);
+    return coordinates;
+  };
+  var d3_geom_polygonPrototype = d3.geom.polygon.prototype = [];
+  d3_geom_polygonPrototype.area = function() {
+    var i = -1, n = this.length, a, b = this[n - 1], area = 0;
+    while (++i < n) {
+      a = b;
+      b = this[i];
+      area += a[1] * b[0] - a[0] * b[1];
+    }
+    return area * .5;
+  };
+  d3_geom_polygonPrototype.centroid = function(k) {
+    var i = -1, n = this.length, x = 0, y = 0, a, b = this[n - 1], c;
+    if (!arguments.length) k = -1 / (6 * this.area());
+    while (++i < n) {
+      a = b;
+      b = this[i];
+      c = a[0] * b[1] - b[0] * a[1];
+      x += (a[0] + b[0]) * c;
+      y += (a[1] + b[1]) * c;
+    }
+    return [ x * k, y * k ];
+  };
+  d3_geom_polygonPrototype.clip = function(subject) {
+    var input, closed = d3_geom_polygonClosed(subject), i = -1, n = this.length - d3_geom_polygonClosed(this), j, m, a = this[n - 1], b, c, d;
+    while (++i < n) {
+      input = subject.slice();
+      subject.length = 0;
+      b = this[i];
+      c = input[(m = input.length - closed) - 1];
+      j = -1;
+      while (++j < m) {
+        d = input[j];
+        if (d3_geom_polygonInside(d, a, b)) {
+          if (!d3_geom_polygonInside(c, a, b)) {
+            subject.push(d3_geom_polygonIntersect(c, d, a, b));
+          }
+          subject.push(d);
+        } else if (d3_geom_polygonInside(c, a, b)) {
+          subject.push(d3_geom_polygonIntersect(c, d, a, b));
+        }
+        c = d;
+      }
+      if (closed) subject.push(subject[0]);
+      a = b;
+    }
+    return subject;
+  };
+  function d3_geom_polygonInside(p, a, b) {
+    return (b[0] - a[0]) * (p[1] - a[1]) < (b[1] - a[1]) * (p[0] - a[0]);
+  }
+  function d3_geom_polygonIntersect(c, d, a, b) {
+    var x1 = c[0], x3 = a[0], x21 = d[0] - x1, x43 = b[0] - x3, y1 = c[1], y3 = a[1], y21 = d[1] - y1, y43 = b[1] - y3, ua = (x43 * (y1 - y3) - y43 * (x1 - x3)) / (y43 * x21 - x43 * y21);
+    return [ x1 + ua * x21, y1 + ua * y21 ];
+  }
+  function d3_geom_polygonClosed(coordinates) {
+    var a = coordinates[0], b = coordinates[coordinates.length - 1];
+    return !(a[0] - b[0] || a[1] - b[1]);
+  }
+  var d3_geom_voronoiEdges, d3_geom_voronoiCells, d3_geom_voronoiBeaches, d3_geom_voronoiBeachPool = [], d3_geom_voronoiFirstCircle, d3_geom_voronoiCircles, d3_geom_voronoiCirclePool = [];
+  function d3_geom_voronoiBeach() {
+    d3_geom_voronoiRedBlackNode(this);
+    this.edge = this.site = this.circle = null;
+  }
+  function d3_geom_voronoiCreateBeach(site) {
+    var beach = d3_geom_voronoiBeachPool.pop() || new d3_geom_voronoiBeach();
+    beach.site = site;
+    return beach;
+  }
+  function d3_geom_voronoiDetachBeach(beach) {
+    d3_geom_voronoiDetachCircle(beach);
+    d3_geom_voronoiBeaches.remove(beach);
+    d3_geom_voronoiBeachPool.push(beach);
+    d3_geom_voronoiRedBlackNode(beach);
+  }
+  function d3_geom_voronoiRemoveBeach(beach) {
+    var circle = beach.circle, x = circle.x, y = circle.cy, vertex = {
+      x: x,
+      y: y
+    }, previous = beach.P, next = beach.N, disappearing = [ beach ];
+    d3_geom_voronoiDetachBeach(beach);
+    var lArc = previous;
+    while (lArc.circle && abs(x - lArc.circle.x) < ε && abs(y - lArc.circle.cy) < ε) {
+      previous = lArc.P;
+      disappearing.unshift(lArc);
+      d3_geom_voronoiDetachBeach(lArc);
+      lArc = previous;
+    }
+    disappearing.unshift(lArc);
+    d3_geom_voronoiDetachCircle(lArc);
+    var rArc = next;
+    while (rArc.circle && abs(x - rArc.circle.x) < ε && abs(y - rArc.circle.cy) < ε) {
+      next = rArc.N;
+      disappearing.push(rArc);
+      d3_geom_voronoiDetachBeach(rArc);
+      rArc = next;
+    }
+    disappearing.push(rArc);
+    d3_geom_voronoiDetachCircle(rArc);
+    var nArcs = disappearing.length, iArc;
+    for (iArc = 1; iArc < nArcs; ++iArc) {
+      rArc = disappearing[iArc];
+      lArc = disappearing[iArc - 1];
+      d3_geom_voronoiSetEdgeEnd(rArc.edge, lArc.site, rArc.site, vertex);
+    }
+    lArc = disappearing[0];
+    rArc = disappearing[nArcs - 1];
+    rArc.edge = d3_geom_voronoiCreateEdge(lArc.site, rArc.site, null, vertex);
+    d3_geom_voronoiAttachCircle(lArc);
+    d3_geom_voronoiAttachCircle(rArc);
+  }
+  function d3_geom_voronoiAddBeach(site) {
+    var x = site.x, directrix = site.y, lArc, rArc, dxl, dxr, node = d3_geom_voronoiBeaches._;
+    while (node) {
+      dxl = d3_geom_voronoiLeftBreakPoint(node, directrix) - x;
+      if (dxl > ε) node = node.L; else {
+        dxr = x - d3_geom_voronoiRightBreakPoint(node, directrix);
+        if (dxr > ε) {
+          if (!node.R) {
+            lArc = node;
+            break;
+          }
+          node = node.R;
+        } else {
+          if (dxl > -ε) {
+            lArc = node.P;
+            rArc = node;
+          } else if (dxr > -ε) {
+            lArc = node;
+            rArc = node.N;
+          } else {
+            lArc = rArc = node;
+          }
+          break;
+        }
+      }
+    }
+    var newArc = d3_geom_voronoiCreateBeach(site);
+    d3_geom_voronoiBeaches.insert(lArc, newArc);
+    if (!lArc && !rArc) return;
+    if (lArc === rArc) {
+      d3_geom_voronoiDetachCircle(lArc);
+      rArc = d3_geom_voronoiCreateBeach(lArc.site);
+      d3_geom_voronoiBeaches.insert(newArc, rArc);
+      newArc.edge = rArc.edge = d3_geom_voronoiCreateEdge(lArc.site, newArc.site);
+      d3_geom_voronoiAttachCircle(lArc);
+      d3_geom_voronoiAttachCircle(rArc);
+      return;
+    }
+    if (!rArc) {
+      newArc.edge = d3_geom_voronoiCreateEdge(lArc.site, newArc.site);
+      return;
+    }
+    d3_geom_voronoiDetachCircle(lArc);
+    d3_geom_voronoiDetachCircle(rArc);
+    var lSite = lArc.site, ax = lSite.x, ay = lSite.y, bx = site.x - ax, by = site.y - ay, rSite = rArc.site, cx = rSite.x - ax, cy = rSite.y - ay, d = 2 * (bx * cy - by * cx), hb = bx * bx + by * by, hc = cx * cx + cy * cy, vertex = {
+      x: (cy * hb - by * hc) / d + ax,
+      y: (bx * hc - cx * hb) / d + ay
+    };
+    d3_geom_voronoiSetEdgeEnd(rArc.edge, lSite, rSite, vertex);
+    newArc.edge = d3_geom_voronoiCreateEdge(lSite, site, null, vertex);
+    rArc.edge = d3_geom_voronoiCreateEdge(site, rSite, null, vertex);
+    d3_geom_voronoiAttachCircle(lArc);
+    d3_geom_voronoiAttachCircle(rArc);
+  }
+  function d3_geom_voronoiLeftBreakPoint(arc, directrix) {
+    var site = arc.site, rfocx = site.x, rfocy = site.y, pby2 = rfocy - directrix;
+    if (!pby2) return rfocx;
+    var lArc = arc.P;
+    if (!lArc) return -Infinity;
+    site = lArc.site;
+    var lfocx = site.x, lfocy = site.y, plby2 = lfocy - directrix;
+    if (!plby2) return lfocx;
+    var hl = lfocx - rfocx, aby2 = 1 / pby2 - 1 / plby2, b = hl / plby2;
+    if (aby2) return (-b + Math.sqrt(b * b - 2 * aby2 * (hl * hl / (-2 * plby2) - lfocy + plby2 / 2 + rfocy - pby2 / 2))) / aby2 + rfocx;
+    return (rfocx + lfocx) / 2;
+  }
+  function d3_geom_voronoiRightBreakPoint(arc, directrix) {
+    var rArc = arc.N;
+    if (rArc) return d3_geom_voronoiLeftBreakPoint(rArc, directrix);
+    var site = arc.site;
+    return site.y === directrix ? site.x : Infinity;
+  }
+  function d3_geom_voronoiCell(site) {
+    this.site = site;
+    this.edges = [];
+  }
+  d3_geom_voronoiCell.prototype.prepare = function() {
+    var halfEdges = this.edges, iHalfEdge = halfEdges.length, edge;
+    while (iHalfEdge--) {
+      edge = halfEdges[iHalfEdge].edge;
+      if (!edge.b || !edge.a) halfEdges.splice(iHalfEdge, 1);
+    }
+    halfEdges.sort(d3_geom_voronoiHalfEdgeOrder);
+    return halfEdges.length;
+  };
+  function d3_geom_voronoiCloseCells(extent) {
+    var x0 = extent[0][0], x1 = extent[1][0], y0 = extent[0][1], y1 = extent[1][1], x2, y2, x3, y3, cells = d3_geom_voronoiCells, iCell = cells.length, cell, iHalfEdge, halfEdges, nHalfEdges, start, end;
+    while (iCell--) {
+      cell = cells[iCell];
+      if (!cell || !cell.prepare()) continue;
+      halfEdges = cell.edges;
+      nHalfEdges = halfEdges.length;
+      iHalfEdge = 0;
+      while (iHalfEdge < nHalfEdges) {
+        end = halfEdges[iHalfEdge].end(), x3 = end.x, y3 = end.y;
+        start = halfEdges[++iHalfEdge % nHalfEdges].start(), x2 = start.x, y2 = start.y;
+        if (abs(x3 - x2) > ε || abs(y3 - y2) > ε) {
+          halfEdges.splice(iHalfEdge, 0, new d3_geom_voronoiHalfEdge(d3_geom_voronoiCreateBorderEdge(cell.site, end, abs(x3 - x0) < ε && y1 - y3 > ε ? {
+            x: x0,
+            y: abs(x2 - x0) < ε ? y2 : y1
+          } : abs(y3 - y1) < ε && x1 - x3 > ε ? {
+            x: abs(y2 - y1) < ε ? x2 : x1,
+            y: y1
+          } : abs(x3 - x1) < ε && y3 - y0 > ε ? {
+            x: x1,
+            y: abs(x2 - x1) < ε ? y2 : y0
+          } : abs(y3 - y0) < ε && x3 - x0 > ε ? {
+            x: abs(y2 - y0) < ε ? x2 : x0,
+            y: y0
+          } : null), cell.site, null));
+          ++nHalfEdges;
+        }
+      }
+    }
+  }
+  function d3_geom_voronoiHalfEdgeOrder(a, b) {
+    return b.angle - a.angle;
+  }
+  function d3_geom_voronoiCircle() {
+    d3_geom_voronoiRedBlackNode(this);
+    this.x = this.y = this.arc = this.site = this.cy = null;
+  }
+  function d3_geom_voronoiAttachCircle(arc) {
+    var lArc = arc.P, rArc = arc.N;
+    if (!lArc || !rArc) return;
+    var lSite = lArc.site, cSite = arc.site, rSite = rArc.site;
+    if (lSite === rSite) return;
+    var bx = cSite.x, by = cSite.y, ax = lSite.x - bx, ay = lSite.y - by, cx = rSite.x - bx, cy = rSite.y - by;
+    var d = 2 * (ax * cy - ay * cx);
+    if (d >= -ε2) return;
+    var ha = ax * ax + ay * ay, hc = cx * cx + cy * cy, x = (cy * ha - ay * hc) / d, y = (ax * hc - cx * ha) / d, cy = y + by;
+    var circle = d3_geom_voronoiCirclePool.pop() || new d3_geom_voronoiCircle();
+    circle.arc = arc;
+    circle.site = cSite;
+    circle.x = x + bx;
+    circle.y = cy + Math.sqrt(x * x + y * y);
+    circle.cy = cy;
+    arc.circle = circle;
+    var before = null, node = d3_geom_voronoiCircles._;
+    while (node) {
+      if (circle.y < node.y || circle.y === node.y && circle.x <= node.x) {
+        if (node.L) node = node.L; else {
+          before = node.P;
+          break;
+        }
+      } else {
+        if (node.R) node = node.R; else {
+          before = node;
+          break;
+        }
+      }
+    }
+    d3_geom_voronoiCircles.insert(before, circle);
+    if (!before) d3_geom_voronoiFirstCircle = circle;
+  }
+  function d3_geom_voronoiDetachCircle(arc) {
+    var circle = arc.circle;
+    if (circle) {
+      if (!circle.P) d3_geom_voronoiFirstCircle = circle.N;
+      d3_geom_voronoiCircles.remove(circle);
+      d3_geom_voronoiCirclePool.push(circle);
+      d3_geom_voronoiRedBlackNode(circle);
+      arc.circle = null;
+    }
+  }
+  function d3_geom_voronoiClipEdges(extent) {
+    var edges = d3_geom_voronoiEdges, clip = d3_geom_clipLine(extent[0][0], extent[0][1], extent[1][0], extent[1][1]), i = edges.length, e;
+    while (i--) {
+      e = edges[i];
+      if (!d3_geom_voronoiConnectEdge(e, extent) || !clip(e) || abs(e.a.x - e.b.x) < ε && abs(e.a.y - e.b.y) < ε) {
+        e.a = e.b = null;
+        edges.splice(i, 1);
+      }
+    }
+  }
+  function d3_geom_voronoiConnectEdge(edge, extent) {
+    var vb = edge.b;
+    if (vb) return true;
+    var va = edge.a, x0 = extent[0][0], x1 = extent[1][0], y0 = extent[0][1], y1 = extent[1][1], lSite = edge.l, rSite = edge.r, lx = lSite.x, ly = lSite.y, rx = rSite.x, ry = rSite.y, fx = (lx + rx) / 2, fy = (ly + ry) / 2, fm, fb;
+    if (ry === ly) {
+      if (fx < x0 || fx >= x1) return;
+      if (lx > rx) {
+        if (!va) va = {
+          x: fx,
+          y: y0
+        }; else if (va.y >= y1) return;
+        vb = {
+          x: fx,
+          y: y1
+        };
+      } else {
+        if (!va) va = {
+          x: fx,
+          y: y1
+        }; else if (va.y < y0) return;
+        vb = {
+          x: fx,
+          y: y0
+        };
+      }
+    } else {
+      fm = (lx - rx) / (ry - ly);
+      fb = fy - fm * fx;
+      if (fm < -1 || fm > 1) {
+        if (lx > rx) {
+          if (!va) va = {
+            x: (y0 - fb) / fm,
+            y: y0
+          }; else if (va.y >= y1) return;
+          vb = {
+            x: (y1 - fb) / fm,
+            y: y1
+          };
+        } else {
+          if (!va) va = {
+            x: (y1 - fb) / fm,
+            y: y1
+          }; else if (va.y < y0) return;
+          vb = {
+            x: (y0 - fb) / fm,
+            y: y0
+          };
+        }
+      } else {
+        if (ly < ry) {
+          if (!va) va = {
+            x: x0,
+            y: fm * x0 + fb
+          }; else if (va.x >= x1) return;
+          vb = {
+            x: x1,
+            y: fm * x1 + fb
+          };
+        } else {
+          if (!va) va = {
+            x: x1,
+            y: fm * x1 + fb
+          }; else if (va.x < x0) return;
+          vb = {
+            x: x0,
+            y: fm * x0 + fb
+          };
+        }
+      }
+    }
+    edge.a = va;
+    edge.b = vb;
+    return true;
+  }
+  function d3_geom_voronoiEdge(lSite, rSite) {
+    this.l = lSite;
+    this.r = rSite;
+    this.a = this.b = null;
+  }
+  function d3_geom_voronoiCreateEdge(lSite, rSite, va, vb) {
+    var edge = new d3_geom_voronoiEdge(lSite, rSite);
+    d3_geom_voronoiEdges.push(edge);
+    if (va) d3_geom_voronoiSetEdgeEnd(edge, lSite, rSite, va);
+    if (vb) d3_geom_voronoiSetEdgeEnd(edge, rSite, lSite, vb);
+    d3_geom_voronoiCells[lSite.i].edges.push(new d3_geom_voronoiHalfEdge(edge, lSite, rSite));
+    d3_geom_voronoiCells[rSite.i].edges.push(new d3_geom_voronoiHalfEdge(edge, rSite, lSite));
+    return edge;
+  }
+  function d3_geom_voronoiCreateBorderEdge(lSite, va, vb) {
+    var edge = new d3_geom_voronoiEdge(lSite, null);
+    edge.a = va;
+    edge.b = vb;
+    d3_geom_voronoiEdges.push(edge);
+    return edge;
+  }
+  function d3_geom_voronoiSetEdgeEnd(edge, lSite, rSite, vertex) {
+    if (!edge.a && !edge.b) {
+      edge.a = vertex;
+      edge.l = lSite;
+      edge.r = rSite;
+    } else if (edge.l === rSite) {
+      edge.b = vertex;
+    } else {
+      edge.a = vertex;
+    }
+  }
+  function d3_geom_voronoiHalfEdge(edge, lSite, rSite) {
+    var va = edge.a, vb = edge.b;
+    this.edge = edge;
+    this.site = lSite;
+    this.angle = rSite ? Math.atan2(rSite.y - lSite.y, rSite.x - lSite.x) : edge.l === lSite ? Math.atan2(vb.x - va.x, va.y - vb.y) : Math.atan2(va.x - vb.x, vb.y - va.y);
+  }
+  d3_geom_voronoiHalfEdge.prototype = {
+    start: function() {
+      return this.edge.l === this.site ? this.edge.a : this.edge.b;
+    },
+    end: function() {
+      return this.edge.l === this.site ? this.edge.b : this.edge.a;
+    }
+  };
+  function d3_geom_voronoiRedBlackTree() {
+    this._ = null;
+  }
+  function d3_geom_voronoiRedBlackNode(node) {
+    node.U = node.C = node.L = node.R = node.P = node.N = null;
+  }
+  d3_geom_voronoiRedBlackTree.prototype = {
+    insert: function(after, node) {
+      var parent, grandpa, uncle;
+      if (after) {
+        node.P = after;
+        node.N = after.N;
+        if (after.N) after.N.P = node;
+        after.N = node;
+        if (after.R) {
+          after = after.R;
+          while (after.L) after = after.L;
+          after.L = node;
+        } else {
+          after.R = node;
+        }
+        parent = after;
+      } else if (this._) {
+        after = d3_geom_voronoiRedBlackFirst(this._);
+        node.P = null;
+        node.N = after;
+        after.P = after.L = node;
+        parent = after;
+      } else {
+        node.P = node.N = null;
+        this._ = node;
+        parent = null;
+      }
+      node.L = node.R = null;
+      node.U = parent;
+      node.C = true;
+      after = node;
+      while (parent && parent.C) {
+        grandpa = parent.U;
+        if (parent === grandpa.L) {
+          uncle = grandpa.R;
+          if (uncle && uncle.C) {
+            parent.C = uncle.C = false;
+            grandpa.C = true;
+            after = grandpa;
+          } else {
+            if (after === parent.R) {
+              d3_geom_voronoiRedBlackRotateLeft(this, parent);
+              after = parent;
+              parent = after.U;
+            }
+            parent.C = false;
+            grandpa.C = true;
+            d3_geom_voronoiRedBlackRotateRight(this, grandpa);
+          }
+        } else {
+          uncle = grandpa.L;
+          if (uncle && uncle.C) {
+            parent.C = uncle.C = false;
+            grandpa.C = true;
+            after = grandpa;
+          } else {
+            if (after === parent.L) {
+              d3_geom_voronoiRedBlackRotateRight(this, parent);
+              after = parent;
+              parent = after.U;
+            }
+            parent.C = false;
+            grandpa.C = true;
+            d3_geom_voronoiRedBlackRotateLeft(this, grandpa);
+          }
+        }
+        parent = after.U;
+      }
+      this._.C = false;
+    },
+    remove: function(node) {
+      if (node.N) node.N.P = node.P;
+      if (node.P) node.P.N = node.N;
+      node.N = node.P = null;
+      var parent = node.U, sibling, left = node.L, right = node.R, next, red;
+      if (!left) next = right; else if (!right) next = left; else next = d3_geom_voronoiRedBlackFirst(right);
+      if (parent) {
+        if (parent.L === node) parent.L = next; else parent.R = next;
+      } else {
+        this._ = next;
+      }
+      if (left && right) {
+        red = next.C;
+        next.C = node.C;
+        next.L = left;
+        left.U = next;
+        if (next !== right) {
+          parent = next.U;
+          next.U = node.U;
+          node = next.R;
+          parent.L = node;
+          next.R = right;
+          right.U = next;
+        } else {
+          next.U = parent;
+          parent = next;
+          node = next.R;
+        }
+      } else {
+        red = node.C;
+        node = next;
+      }
+      if (node) node.U = parent;
+      if (red) return;
+      if (node && node.C) {
+        node.C = false;
+        return;
+      }
+      do {
+        if (node === this._) break;
+        if (node === parent.L) {
+          sibling = parent.R;
+          if (sibling.C) {
+            sibling.C = false;
+            parent.C = true;
+            d3_geom_voronoiRedBlackRotateLeft(this, parent);
+            sibling = parent.R;
+          }
+          if (sibling.L && sibling.L.C || sibling.R && sibling.R.C) {
+            if (!sibling.R || !sibling.R.C) {
+              sibling.L.C = false;
+              sibling.C = true;
+              d3_geom_voronoiRedBlackRotateRight(this, sibling);
+              sibling = parent.R;
+            }
+            sibling.C = parent.C;
+            parent.C = sibling.R.C = false;
+            d3_geom_voronoiRedBlackRotateLeft(this, parent);
+            node = this._;
+            break;
+          }
+        } else {
+          sibling = parent.L;
+          if (sibling.C) {
+            sibling.C = false;
+            parent.C = true;
+            d3_geom_voronoiRedBlackRotateRight(this, parent);
+            sibling = parent.L;
+          }
+          if (sibling.L && sibling.L.C || sibling.R && sibling.R.C) {
+            if (!sibling.L || !sibling.L.C) {
+              sibling.R.C = false;
+              sibling.C = true;
+              d3_geom_voronoiRedBlackRotateLeft(this, sibling);
+              sibling = parent.L;
+            }
+            sibling.C = parent.C;
+            parent.C = sibling.L.C = false;
+            d3_geom_voronoiRedBlackRotateRight(this, parent);
+            node = this._;
+            break;
+          }
+        }
+        sibling.C = true;
+        node = parent;
+        parent = parent.U;
+      } while (!node.C);
+      if (node) node.C = false;
+    }
+  };
+  function d3_geom_voronoiRedBlackRotateLeft(tree, node) {
+    var p = node, q = node.R, parent = p.U;
+    if (parent) {
+      if (parent.L === p) parent.L = q; else parent.R = q;
+    } else {
+      tree._ = q;
+    }
+    q.U = parent;
+    p.U = q;
+    p.R = q.L;
+    if (p.R) p.R.U = p;
+    q.L = p;
+  }
+  function d3_geom_voronoiRedBlackRotateRight(tree, node) {
+    var p = node, q = node.L, parent = p.U;
+    if (parent) {
+      if (parent.L === p) parent.L = q; else parent.R = q;
+    } else {
+      tree._ = q;
+    }
+    q.U = parent;
+    p.U = q;
+    p.L = q.R;
+    if (p.L) p.L.U = p;
+    q.R = p;
+  }
+  function d3_geom_voronoiRedBlackFirst(node) {
+    while (node.L) node = node.L;
+    return node;
+  }
+  function d3_geom_voronoi(sites, bbox) {
+    var site = sites.sort(d3_geom_voronoiVertexOrder).pop(), x0, y0, circle;
+    d3_geom_voronoiEdges = [];
+    d3_geom_voronoiCells = new Array(sites.length);
+    d3_geom_voronoiBeaches = new d3_geom_voronoiRedBlackTree();
+    d3_geom_voronoiCircles = new d3_geom_voronoiRedBlackTree();
+    while (true) {
+      circle = d3_geom_voronoiFirstCircle;
+      if (site && (!circle || site.y < circle.y || site.y === circle.y && site.x < circle.x)) {
+        if (site.x !== x0 || site.y !== y0) {
+          d3_geom_voronoiCells[site.i] = new d3_geom_voronoiCell(site);
+          d3_geom_voronoiAddBeach(site);
+          x0 = site.x, y0 = site.y;
+        }
+        site = sites.pop();
+      } else if (circle) {
+        d3_geom_voronoiRemoveBeach(circle.arc);
+      } else {
+        break;
+      }
+    }
+    if (bbox) d3_geom_voronoiClipEdges(bbox), d3_geom_voronoiCloseCells(bbox);
+    var diagram = {
+      cells: d3_geom_voronoiCells,
+      edges: d3_geom_voronoiEdges
+    };
+    d3_geom_voronoiBeaches = d3_geom_voronoiCircles = d3_geom_voronoiEdges = d3_geom_voronoiCells = null;
+    return diagram;
+  }
+  function d3_geom_voronoiVertexOrder(a, b) {
+    return b.y - a.y || b.x - a.x;
+  }
+  d3.geom.voronoi = function(points) {
+    var x = d3_geom_pointX, y = d3_geom_pointY, fx = x, fy = y, clipExtent = d3_geom_voronoiClipExtent;
+    if (points) return voronoi(points);
+    function voronoi(data) {
+      var polygons = new Array(data.length), x0 = clipExtent[0][0], y0 = clipExtent[0][1], x1 = clipExtent[1][0], y1 = clipExtent[1][1];
+      d3_geom_voronoi(sites(data), clipExtent).cells.forEach(function(cell, i) {
+        var edges = cell.edges, site = cell.site, polygon = polygons[i] = edges.length ? edges.map(function(e) {
+          var s = e.start();
+          return [ s.x, s.y ];
+        }) : site.x >= x0 && site.x <= x1 && site.y >= y0 && site.y <= y1 ? [ [ x0, y1 ], [ x1, y1 ], [ x1, y0 ], [ x0, y0 ] ] : [];
+        polygon.point = data[i];
+      });
+      return polygons;
+    }
+    function sites(data) {
+      return data.map(function(d, i) {
+        return {
+          x: Math.round(fx(d, i) / ε) * ε,
+          y: Math.round(fy(d, i) / ε) * ε,
+          i: i
+        };
+      });
+    }
+    voronoi.links = function(data) {
+      return d3_geom_voronoi(sites(data)).edges.filter(function(edge) {
+        return edge.l && edge.r;
+      }).map(function(edge) {
+        return {
+          source: data[edge.l.i],
+          target: data[edge.r.i]
+        };
+      });
+    };
+    voronoi.triangles = function(data) {
+      var triangles = [];
+      d3_geom_voronoi(sites(data)).cells.forEach(function(cell, i) {
+        var site = cell.site, edges = cell.edges.sort(d3_geom_voronoiHalfEdgeOrder), j = -1, m = edges.length, e0, s0, e1 = edges[m - 1].edge, s1 = e1.l === site ? e1.r : e1.l;
+        while (++j < m) {
+          e0 = e1;
+          s0 = s1;
+          e1 = edges[j].edge;
+          s1 = e1.l === site ? e1.r : e1.l;
+          if (i < s0.i && i < s1.i && d3_geom_voronoiTriangleArea(site, s0, s1) < 0) {
+            triangles.push([ data[i], data[s0.i], data[s1.i] ]);
+          }
+        }
+      });
+      return triangles;
+    };
+    voronoi.x = function(_) {
+      return arguments.length ? (fx = d3_functor(x = _), voronoi) : x;
+    };
+    voronoi.y = function(_) {
+      return arguments.length ? (fy = d3_functor(y = _), voronoi) : y;
+    };
+    voronoi.clipExtent = function(_) {
+      if (!arguments.length) return clipExtent === d3_geom_voronoiClipExtent ? null : clipExtent;
+      clipExtent = _ == null ? d3_geom_voronoiClipExtent : _;
+      return voronoi;
+    };
+    voronoi.size = function(_) {
+      if (!arguments.length) return clipExtent === d3_geom_voronoiClipExtent ? null : clipExtent && clipExtent[1];
+      return voronoi.clipExtent(_ && [ [ 0, 0 ], _ ]);
+    };
+    return voronoi;
+  };
+  var d3_geom_voronoiClipExtent = [ [ -1e6, -1e6 ], [ 1e6, 1e6 ] ];
+  function d3_geom_voronoiTriangleArea(a, b, c) {
+    return (a.x - c.x) * (b.y - a.y) - (a.x - b.x) * (c.y - a.y);
+  }
+  d3.geom.delaunay = function(vertices) {
+    return d3.geom.voronoi().triangles(vertices);
+  };
+  d3.geom.quadtree = function(points, x1, y1, x2, y2) {
+    var x = d3_geom_pointX, y = d3_geom_pointY, compat;
+    if (compat = arguments.length) {
+      x = d3_geom_quadtreeCompatX;
+      y = d3_geom_quadtreeCompatY;
+      if (compat === 3) {
+        y2 = y1;
+        x2 = x1;
+        y1 = x1 = 0;
+      }
+      return quadtree(points);
+    }
+    function quadtree(data) {
+      var d, fx = d3_functor(x), fy = d3_functor(y), xs, ys, i, n, x1_, y1_, x2_, y2_;
+      if (x1 != null) {
+        x1_ = x1, y1_ = y1, x2_ = x2, y2_ = y2;
+      } else {
+        x2_ = y2_ = -(x1_ = y1_ = Infinity);
+        xs = [], ys = [];
+        n = data.length;
+        if (compat) for (i = 0; i < n; ++i) {
+          d = data[i];
+          if (d.x < x1_) x1_ = d.x;
+          if (d.y < y1_) y1_ = d.y;
+          if (d.x > x2_) x2_ = d.x;
+          if (d.y > y2_) y2_ = d.y;
+          xs.push(d.x);
+          ys.push(d.y);
+        } else for (i = 0; i < n; ++i) {
+          var x_ = +fx(d = data[i], i), y_ = +fy(d, i);
+          if (x_ < x1_) x1_ = x_;
+          if (y_ < y1_) y1_ = y_;
+          if (x_ > x2_) x2_ = x_;
+          if (y_ > y2_) y2_ = y_;
+          xs.push(x_);
+          ys.push(y_);
+        }
+      }
+      var dx = x2_ - x1_, dy = y2_ - y1_;
+      if (dx > dy) y2_ = y1_ + dx; else x2_ = x1_ + dy;
+      function insert(n, d, x, y, x1, y1, x2, y2) {
+        if (isNaN(x) || isNaN(y)) return;
+        if (n.leaf) {
+          var nx = n.x, ny = n.y;
+          if (nx != null) {
+            if (abs(nx - x) + abs(ny - y) < .01) {
+              insertChild(n, d, x, y, x1, y1, x2, y2);
+            } else {
+              var nPoint = n.point;
+              n.x = n.y = n.point = null;
+              insertChild(n, nPoint, nx, ny, x1, y1, x2, y2);
+              insertChild(n, d, x, y, x1, y1, x2, y2);
+            }
+          } else {
+            n.x = x, n.y = y, n.point = d;
+          }
+        } else {
+          insertChild(n, d, x, y, x1, y1, x2, y2);
+        }
+      }
+      function insertChild(n, d, x, y, x1, y1, x2, y2) {
+        var xm = (x1 + x2) * .5, ym = (y1 + y2) * .5, right = x >= xm, below = y >= ym, i = below << 1 | right;
+        n.leaf = false;
+        n = n.nodes[i] || (n.nodes[i] = d3_geom_quadtreeNode());
+        if (right) x1 = xm; else x2 = xm;
+        if (below) y1 = ym; else y2 = ym;
+        insert(n, d, x, y, x1, y1, x2, y2);
+      }
+      var root = d3_geom_quadtreeNode();
+      root.add = function(d) {
+        insert(root, d, +fx(d, ++i), +fy(d, i), x1_, y1_, x2_, y2_);
+      };
+      root.visit = function(f) {
+        d3_geom_quadtreeVisit(f, root, x1_, y1_, x2_, y2_);
+      };
+      root.find = function(point) {
+        return d3_geom_quadtreeFind(root, point[0], point[1], x1_, y1_, x2_, y2_);
+      };
+      i = -1;
+      if (x1 == null) {
+        while (++i < n) {
+          insert(root, data[i], xs[i], ys[i], x1_, y1_, x2_, y2_);
+        }
+        --i;
+      } else data.forEach(root.add);
+      xs = ys = data = d = null;
+      return root;
+    }
+    quadtree.x = function(_) {
+      return arguments.length ? (x = _, quadtree) : x;
+    };
+    quadtree.y = function(_) {
+      return arguments.length ? (y = _, quadtree) : y;
+    };
+    quadtree.extent = function(_) {
+      if (!arguments.length) return x1 == null ? null : [ [ x1, y1 ], [ x2, y2 ] ];
+      if (_ == null) x1 = y1 = x2 = y2 = null; else x1 = +_[0][0], y1 = +_[0][1], x2 = +_[1][0], 
+      y2 = +_[1][1];
+      return quadtree;
+    };
+    quadtree.size = function(_) {
+      if (!arguments.length) return x1 == null ? null : [ x2 - x1, y2 - y1 ];
+      if (_ == null) x1 = y1 = x2 = y2 = null; else x1 = y1 = 0, x2 = +_[0], y2 = +_[1];
+      return quadtree;
+    };
+    return quadtree;
+  };
+  function d3_geom_quadtreeCompatX(d) {
+    return d.x;
+  }
+  function d3_geom_quadtreeCompatY(d) {
+    return d.y;
+  }
+  function d3_geom_quadtreeNode() {
+    return {
+      leaf: true,
+      nodes: [],
+      point: null,
+      x: null,
+      y: null
+    };
+  }
+  function d3_geom_quadtreeVisit(f, node, x1, y1, x2, y2) {
+    if (!f(node, x1, y1, x2, y2)) {
+      var sx = (x1 + x2) * .5, sy = (y1 + y2) * .5, children = node.nodes;
+      if (children[0]) d3_geom_quadtreeVisit(f, children[0], x1, y1, sx, sy);
+      if (children[1]) d3_geom_quadtreeVisit(f, children[1], sx, y1, x2, sy);
+      if (children[2]) d3_geom_quadtreeVisit(f, children[2], x1, sy, sx, y2);
+      if (children[3]) d3_geom_quadtreeVisit(f, children[3], sx, sy, x2, y2);
+    }
+  }
+  function d3_geom_quadtreeFind(root, x, y, x0, y0, x3, y3) {
+    var minDistance2 = Infinity, closestPoint;
+    (function find(node, x1, y1, x2, y2) {
+      if (x1 > x3 || y1 > y3 || x2 < x0 || y2 < y0) return;
+      if (point = node.point) {
+        var point, dx = x - node.x, dy = y - node.y, distance2 = dx * dx + dy * dy;
+        if (distance2 < minDistance2) {
+          var distance = Math.sqrt(minDistance2 = distance2);
+          x0 = x - distance, y0 = y - distance;
+          x3 = x + distance, y3 = y + distance;
+          closestPoint = point;
+        }
+      }
+      var children = node.nodes, xm = (x1 + x2) * .5, ym = (y1 + y2) * .5, right = x >= xm, below = y >= ym;
+      for (var i = below << 1 | right, j = i + 4; i < j; ++i) {
+        if (node = children[i & 3]) switch (i & 3) {
+         case 0:
+          find(node, x1, y1, xm, ym);
+          break;
+
+         case 1:
+          find(node, xm, y1, x2, ym);
+          break;
+
+         case 2:
+          find(node, x1, ym, xm, y2);
+          break;
+
+         case 3:
+          find(node, xm, ym, x2, y2);
+          break;
+        }
+      }
+    })(root, x0, y0, x3, y3);
+    return closestPoint;
+  }
+  d3.interpolateRgb = d3_interpolateRgb;
+  function d3_interpolateRgb(a, b) {
+    a = d3.rgb(a);
+    b = d3.rgb(b);
+    var ar = a.r, ag = a.g, ab = a.b, br = b.r - ar, bg = b.g - ag, bb = b.b - ab;
+    return function(t) {
+      return "#" + d3_rgb_hex(Math.round(ar + br * t)) + d3_rgb_hex(Math.round(ag + bg * t)) + d3_rgb_hex(Math.round(ab + bb * t));
+    };
+  }
+  d3.interpolateObject = d3_interpolateObject;
+  function d3_interpolateObject(a, b) {
+    var i = {}, c = {}, k;
+    for (k in a) {
+      if (k in b) {
+        i[k] = d3_interpolate(a[k], b[k]);
+      } else {
+        c[k] = a[k];
+      }
+    }
+    for (k in b) {
+      if (!(k in a)) {
+        c[k] = b[k];
+      }
+    }
+    return function(t) {
+      for (k in i) c[k] = i[k](t);
+      return c;
+    };
+  }
+  d3.interpolateNumber = d3_interpolateNumber;
+  function d3_interpolateNumber(a, b) {
+    a = +a, b = +b;
+    return function(t) {
+      return a * (1 - t) + b * t;
+    };
+  }
+  d3.interpolateString = d3_interpolateString;
+  function d3_interpolateString(a, b) {
+    var bi = d3_interpolate_numberA.lastIndex = d3_interpolate_numberB.lastIndex = 0, am, bm, bs, i = -1, s = [], q = [];
+    a = a + "", b = b + "";
+    while ((am = d3_interpolate_numberA.exec(a)) && (bm = d3_interpolate_numberB.exec(b))) {
+      if ((bs = bm.index) > bi) {
+        bs = b.slice(bi, bs);
+        if (s[i]) s[i] += bs; else s[++i] = bs;
+      }
+      if ((am = am[0]) === (bm = bm[0])) {
+        if (s[i]) s[i] += bm; else s[++i] = bm;
+      } else {
+        s[++i] = null;
+        q.push({
+          i: i,
+          x: d3_interpolateNumber(am, bm)
+        });
+      }
+      bi = d3_interpolate_numberB.lastIndex;
+    }
+    if (bi < b.length) {
+      bs = b.slice(bi);
+      if (s[i]) s[i] += bs; else s[++i] = bs;
+    }
+    return s.length < 2 ? q[0] ? (b = q[0].x, function(t) {
+      return b(t) + "";
+    }) : function() {
+      return b;
+    } : (b = q.length, function(t) {
+      for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t);
+      return s.join("");
+    });
+  }
+  var d3_interpolate_numberA = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g, d3_interpolate_numberB = new RegExp(d3_interpolate_numberA.source, "g");
+  d3.interpolate = d3_interpolate;
+  function d3_interpolate(a, b) {
+    var i = d3.interpolators.length, f;
+    while (--i >= 0 && !(f = d3.interpolators[i](a, b))) ;
+    return f;
+  }
+  d3.interpolators = [ function(a, b) {
+    var t = typeof b;
+    return (t === "string" ? d3_rgb_names.has(b.toLowerCase()) || /^(#|rgb\(|hsl\()/i.test(b) ? d3_interpolateRgb : d3_interpolateString : b instanceof d3_color ? d3_interpolateRgb : Array.isArray(b) ? d3_interpolateArray : t === "object" && isNaN(b) ? d3_interpolateObject : d3_interpolateNumber)(a, b);
+  } ];
+  d3.interpolateArray = d3_interpolateArray;
+  function d3_interpolateArray(a, b) {
+    var x = [], c = [], na = a.length, nb = b.length, n0 = Math.min(a.length, b.length), i;
+    for (i = 0; i < n0; ++i) x.push(d3_interpolate(a[i], b[i]));
+    for (;i < na; ++i) c[i] = a[i];
+    for (;i < nb; ++i) c[i] = b[i];
+    return function(t) {
+      for (i = 0; i < n0; ++i) c[i] = x[i](t);
+      return c;
+    };
+  }
+  var d3_ease_default = function() {
+    return d3_identity;
+  };
+  var d3_ease = d3.map({
+    linear: d3_ease_default,
+    poly: d3_ease_poly,
+    quad: function() {
+      return d3_ease_quad;
+    },
+    cubic: function() {
+      return d3_ease_cubic;
+    },
+    sin: function() {
+      return d3_ease_sin;
+    },
+    exp: function() {
+      return d3_ease_exp;
+    },
+    circle: function() {
+      return d3_ease_circle;
+    },
+    elastic: d3_ease_elastic,
+    back: d3_ease_back,
+    bounce: function() {
+      return d3_ease_bounce;
+    }
+  });
+  var d3_ease_mode = d3.map({
+    "in": d3_identity,
+    out: d3_ease_reverse,
+    "in-out": d3_ease_reflect,
+    "out-in": function(f) {
+      return d3_ease_reflect(d3_ease_reverse(f));
+    }
+  });
+  d3.ease = function(name) {
+    var i = name.indexOf("-"), t = i >= 0 ? name.slice(0, i) : name, m = i >= 0 ? name.slice(i + 1) : "in";
+    t = d3_ease.get(t) || d3_ease_default;
+    m = d3_ease_mode.get(m) || d3_identity;
+    return d3_ease_clamp(m(t.apply(null, d3_arraySlice.call(arguments, 1))));
+  };
+  function d3_ease_clamp(f) {
+    return function(t) {
+      return t <= 0 ? 0 : t >= 1 ? 1 : f(t);
+    };
+  }
+  function d3_ease_reverse(f) {
+    return function(t) {
+      return 1 - f(1 - t);
+    };
+  }
+  function d3_ease_reflect(f) {
+    return function(t) {
+      return .5 * (t < .5 ? f(2 * t) : 2 - f(2 - 2 * t));
+    };
+  }
+  function d3_ease_quad(t) {
+    return t * t;
+  }
+  function d3_ease_cubic(t) {
+    return t * t * t;
+  }
+  function d3_ease_cubicInOut(t) {
+    if (t <= 0) return 0;
+    if (t >= 1) return 1;
+    var t2 = t * t, t3 = t2 * t;
+    return 4 * (t < .5 ? t3 : 3 * (t - t2) + t3 - .75);
+  }
+  function d3_ease_poly(e) {
+    return function(t) {
+      return Math.pow(t, e);
+    };
+  }
+  function d3_ease_sin(t) {
+    return 1 - Math.cos(t * halfπ);
+  }
+  function d3_ease_exp(t) {
+    return Math.pow(2, 10 * (t - 1));
+  }
+  function d3_ease_circle(t) {
+    return 1 - Math.sqrt(1 - t * t);
+  }
+  function d3_ease_elastic(a, p) {
+    var s;
+    if (arguments.length < 2) p = .45;
+    if (arguments.length) s = p / τ * Math.asin(1 / a); else a = 1, s = p / 4;
+    return function(t) {
+      return 1 + a * Math.pow(2, -10 * t) * Math.sin((t - s) * τ / p);
+    };
+  }
+  function d3_ease_back(s) {
+    if (!s) s = 1.70158;
+    return function(t) {
+      return t * t * ((s + 1) * t - s);
+    };
+  }
+  function d3_ease_bounce(t) {
+    return t < 1 / 2.75 ? 7.5625 * t * t : t < 2 / 2.75 ? 7.5625 * (t -= 1.5 / 2.75) * t + .75 : t < 2.5 / 2.75 ? 7.5625 * (t -= 2.25 / 2.75) * t + .9375 : 7.5625 * (t -= 2.625 / 2.75) * t + .984375;
+  }
+  d3.interpolateHcl = d3_interpolateHcl;
+  function d3_interpolateHcl(a, b) {
+    a = d3.hcl(a);
+    b = d3.hcl(b);
+    var ah = a.h, ac = a.c, al = a.l, bh = b.h - ah, bc = b.c - ac, bl = b.l - al;
+    if (isNaN(bc)) bc = 0, ac = isNaN(ac) ? b.c : ac;
+    if (isNaN(bh)) bh = 0, ah = isNaN(ah) ? b.h : ah; else if (bh > 180) bh -= 360; else if (bh < -180) bh += 360;
+    return function(t) {
+      return d3_hcl_lab(ah + bh * t, ac + bc * t, al + bl * t) + "";
+    };
+  }
+  d3.interpolateHsl = d3_interpolateHsl;
+  function d3_interpolateHsl(a, b) {
+    a = d3.hsl(a);
+    b = d3.hsl(b);
+    var ah = a.h, as = a.s, al = a.l, bh = b.h - ah, bs = b.s - as, bl = b.l - al;
+    if (isNaN(bs)) bs = 0, as = isNaN(as) ? b.s : as;
+    if (isNaN(bh)) bh = 0, ah = isNaN(ah) ? b.h : ah; else if (bh > 180) bh -= 360; else if (bh < -180) bh += 360;
+    return function(t) {
+      return d3_hsl_rgb(ah + bh * t, as + bs * t, al + bl * t) + "";
+    };
+  }
+  d3.interpolateLab = d3_interpolateLab;
+  function d3_interpolateLab(a, b) {
+    a = d3.lab(a);
+    b = d3.lab(b);
+    var al = a.l, aa = a.a, ab = a.b, bl = b.l - al, ba = b.a - aa, bb = b.b - ab;
+    return function(t) {
+      return d3_lab_rgb(al + bl * t, aa + ba * t, ab + bb * t) + "";
+    };
+  }
+  d3.interpolateRound = d3_interpolateRound;
+  function d3_interpolateRound(a, b) {
+    b -= a;
+    return function(t) {
+      return Math.round(a + b * t);
+    };
+  }
+  d3.transform = function(string) {
+    var g = d3_document.createElementNS(d3.ns.prefix.svg, "g");
+    return (d3.transform = function(string) {
+      if (string != null) {
+        g.setAttribute("transform", string);
+        var t = g.transform.baseVal.consolidate();
+      }
+      return new d3_transform(t ? t.matrix : d3_transformIdentity);
+    })(string);
+  };
+  function d3_transform(m) {
+    var r0 = [ m.a, m.b ], r1 = [ m.c, m.d ], kx = d3_transformNormalize(r0), kz = d3_transformDot(r0, r1), ky = d3_transformNormalize(d3_transformCombine(r1, r0, -kz)) || 0;
+    if (r0[0] * r1[1] < r1[0] * r0[1]) {
+      r0[0] *= -1;
+      r0[1] *= -1;
+      kx *= -1;
+      kz *= -1;
+    }
+    this.rotate = (kx ? Math.atan2(r0[1], r0[0]) : Math.atan2(-r1[0], r1[1])) * d3_degrees;
+    this.translate = [ m.e, m.f ];
+    this.scale = [ kx, ky ];
+    this.skew = ky ? Math.atan2(kz, ky) * d3_degrees : 0;
+  }
+  d3_transform.prototype.toString = function() {
+    return "translate(" + this.translate + ")rotate(" + this.rotate + ")skewX(" + this.skew + ")scale(" + this.scale + ")";
+  };
+  function d3_transformDot(a, b) {
+    return a[0] * b[0] + a[1] * b[1];
+  }
+  function d3_transformNormalize(a) {
+    var k = Math.sqrt(d3_transformDot(a, a));
+    if (k) {
+      a[0] /= k;
+      a[1] /= k;
+    }
+    return k;
+  }
+  function d3_transformCombine(a, b, k) {
+    a[0] += k * b[0];
+    a[1] += k * b[1];
+    return a;
+  }
+  var d3_transformIdentity = {
+    a: 1,
+    b: 0,
+    c: 0,
+    d: 1,
+    e: 0,
+    f: 0
+  };
+  d3.interpolateTransform = d3_interpolateTransform;
+  function d3_interpolateTransformPop(s) {
+    return s.length ? s.pop() + "," : "";
+  }
+  function d3_interpolateTranslate(ta, tb, s, q) {
+    if (ta[0] !== tb[0] || ta[1] !== tb[1]) {
+      var i = s.push("translate(", null, ",", null, ")");
+      q.push({
+        i: i - 4,
+        x: d3_interpolateNumber(ta[0], tb[0])
+      }, {
+        i: i - 2,
+        x: d3_interpolateNumber(ta[1], tb[1])
+      });
+    } else if (tb[0] || tb[1]) {
+      s.push("translate(" + tb + ")");
+    }
+  }
+  function d3_interpolateRotate(ra, rb, s, q) {
+    if (ra !== rb) {
+      if (ra - rb > 180) rb += 360; else if (rb - ra > 180) ra += 360;
+      q.push({
+        i: s.push(d3_interpolateTransformPop(s) + "rotate(", null, ")") - 2,
+        x: d3_interpolateNumber(ra, rb)
+      });
+    } else if (rb) {
+      s.push(d3_interpolateTransformPop(s) + "rotate(" + rb + ")");
+    }
+  }
+  function d3_interpolateSkew(wa, wb, s, q) {
+    if (wa !== wb) {
+      q.push({
+        i: s.push(d3_interpolateTransformPop(s) + "skewX(", null, ")") - 2,
+        x: d3_interpolateNumber(wa, wb)
+      });
+    } else if (wb) {
+      s.push(d3_interpolateTransformPop(s) + "skewX(" + wb + ")");
+    }
+  }
+  function d3_interpolateScale(ka, kb, s, q) {
+    if (ka[0] !== kb[0] || ka[1] !== kb[1]) {
+      var i = s.push(d3_interpolateTransformPop(s) + "scale(", null, ",", null, ")");
+      q.push({
+        i: i - 4,
+        x: d3_interpolateNumber(ka[0], kb[0])
+      }, {
+        i: i - 2,
+        x: d3_interpolateNumber(ka[1], kb[1])
+      });
+    } else if (kb[0] !== 1 || kb[1] !== 1) {
+      s.push(d3_interpolateTransformPop(s) + "scale(" + kb + ")");
+    }
+  }
+  function d3_interpolateTransform(a, b) {
+    var s = [], q = [];
+    a = d3.transform(a), b = d3.transform(b);
+    d3_interpolateTranslate(a.translate, b.translate, s, q);
+    d3_interpolateRotate(a.rotate, b.rotate, s, q);
+    d3_interpolateSkew(a.skew, b.skew, s, q);
+    d3_interpolateScale(a.scale, b.scale, s, q);
+    a = b = null;
+    return function(t) {
+      var i = -1, n = q.length, o;
+      while (++i < n) s[(o = q[i]).i] = o.x(t);
+      return s.join("");
+    };
+  }
+  function d3_uninterpolateNumber(a, b) {
+    b = (b -= a = +a) || 1 / b;
+    return function(x) {
+      return (x - a) / b;
+    };
+  }
+  function d3_uninterpolateClamp(a, b) {
+    b = (b -= a = +a) || 1 / b;
+    return function(x) {
+      return Math.max(0, Math.min(1, (x - a) / b));
+    };
+  }
+  d3.layout = {};
+  d3.layout.bundle = function() {
+    return function(links) {
+      var paths = [], i = -1, n = links.length;
+      while (++i < n) paths.push(d3_layout_bundlePath(links[i]));
+      return paths;
+    };
+  };
+  function d3_layout_bundlePath(link) {
+    var start = link.source, end = link.target, lca = d3_layout_bundleLeastCommonAncestor(start, end), points = [ start ];
+    while (start !== lca) {
+      start = start.parent;
+      points.push(start);
+    }
+    var k = points.length;
+    while (end !== lca) {
+      points.splice(k, 0, end);
+      end = end.parent;
+    }
+    return points;
+  }
+  function d3_layout_bundleAncestors(node) {
+    var ancestors = [], parent = node.parent;
+    while (parent != null) {
+      ancestors.push(node);
+      node = parent;
+      parent = parent.parent;
+    }
+    ancestors.push(node);
+    return ancestors;
+  }
+  function d3_layout_bundleLeastCommonAncestor(a, b) {
+    if (a === b) return a;
+    var aNodes = d3_layout_bundleAncestors(a), bNodes = d3_layout_bundleAncestors(b), aNode = aNodes.pop(), bNode = bNodes.pop(), sharedNode = null;
+    while (aNode === bNode) {
+      sharedNode = aNode;
+      aNode = aNodes.pop();
+      bNode = bNodes.pop();
+    }
+    return sharedNode;
+  }
+  d3.layout.chord = function() {
+    var chord = {}, chords, groups, matrix, n, padding = 0, sortGroups, sortSubgroups, sortChords;
+    function relayout() {
+      var subgroups = {}, groupSums = [], groupIndex = d3.range(n), subgroupIndex = [], k, x, x0, i, j;
+      chords = [];
+      groups = [];
+      k = 0, i = -1;
+      while (++i < n) {
+        x = 0, j = -1;
+        while (++j < n) {
+          x += matrix[i][j];
+        }
+        groupSums.push(x);
+        subgroupIndex.push(d3.range(n));
+        k += x;
+      }
+      if (sortGroups) {
+        groupIndex.sort(function(a, b) {
+          return sortGroups(groupSums[a], groupSums[b]);
+        });
+      }
+      if (sortSubgroups) {
+        subgroupIndex.forEach(function(d, i) {
+          d.sort(function(a, b) {
+            return sortSubgroups(matrix[i][a], matrix[i][b]);
+          });
+        });
+      }
+      k = (τ - padding * n) / k;
+      x = 0, i = -1;
+      while (++i < n) {
+        x0 = x, j = -1;
+        while (++j < n) {
+          var di = groupIndex[i], dj = subgroupIndex[di][j], v = matrix[di][dj], a0 = x, a1 = x += v * k;
+          subgroups[di + "-" + dj] = {
+            index: di,
+            subindex: dj,
+            startAngle: a0,
+            endAngle: a1,
+            value: v
+          };
+        }
+        groups[di] = {
+          index: di,
+          startAngle: x0,
+          endAngle: x,
+          value: groupSums[di]
+        };
+        x += padding;
+      }
+      i = -1;
+      while (++i < n) {
+        j = i - 1;
+        while (++j < n) {
+          var source = subgroups[i + "-" + j], target = subgroups[j + "-" + i];
+          if (source.value || target.value) {
+            chords.push(source.value < target.value ? {
+              source: target,
+              target: source
+            } : {
+              source: source,
+              target: target
+            });
+          }
+        }
+      }
+      if (sortChords) resort();
+    }
+    function resort() {
+      chords.sort(function(a, b) {
+        return sortChords((a.source.value + a.target.value) / 2, (b.source.value + b.target.value) / 2);
+      });
+    }
+    chord.matrix = function(x) {
+      if (!arguments.length) return matrix;
+      n = (matrix = x) && matrix.length;
+      chords = groups = null;
+      return chord;
+    };
+    chord.padding = function(x) {
+      if (!arguments.length) return padding;
+      padding = x;
+      chords = groups = null;
+      return chord;
+    };
+    chord.sortGroups = function(x) {
+      if (!arguments.length) return sortGroups;
+      sortGroups = x;
+      chords = groups = null;
+      return chord;
+    };
+    chord.sortSubgroups = function(x) {
+      if (!arguments.length) return sortSubgroups;
+      sortSubgroups = x;
+      chords = null;
+      return chord;
+    };
+    chord.sortChords = function(x) {
+      if (!arguments.length) return sortChords;
+      sortChords = x;
+      if (chords) resort();
+      return chord;
+    };
+    chord.chords = function() {
+      if (!chords) relayout();
+      return chords;
+    };
+    chord.groups = function() {
+      if (!groups) relayout();
+      return groups;
+    };
+    return chord;
+  };
+  d3.layout.force = function() {
+    var force = {}, event = d3.dispatch("start", "tick", "end"), timer, size = [ 1, 1 ], drag, alpha, friction = .9, linkDistance = d3_layout_forceLinkDistance, linkStrength = d3_layout_forceLinkStrength, charge = -30, chargeDistance2 = d3_layout_forceChargeDistance2, gravity = .1, theta2 = .64, nodes = [], links = [], distances, strengths, charges;
+    function repulse(node) {
+      return function(quad, x1, _, x2) {
+        if (quad.point !== node) {
+          var dx = quad.cx - node.x, dy = quad.cy - node.y, dw = x2 - x1, dn = dx * dx + dy * dy;
+          if (dw * dw / theta2 < dn) {
+            if (dn < chargeDistance2) {
+              var k = quad.charge / dn;
+              node.px -= dx * k;
+              node.py -= dy * k;
+            }
+            return true;
+          }
+          if (quad.point && dn && dn < chargeDistance2) {
+            var k = quad.pointCharge / dn;
+            node.px -= dx * k;
+            node.py -= dy * k;
+          }
+        }
+        return !quad.charge;
+      };
+    }
+    force.tick = function() {
+      if ((alpha *= .99) < .005) {
+        timer = null;
+        event.end({
+          type: "end",
+          alpha: alpha = 0
+        });
+        return true;
+      }
+      var n = nodes.length, m = links.length, q, i, o, s, t, l, k, x, y;
+      for (i = 0; i < m; ++i) {
+        o = links[i];
+        s = o.source;
+        t = o.target;
+        x = t.x - s.x;
+        y = t.y - s.y;
+        if (l = x * x + y * y) {
+          l = alpha * strengths[i] * ((l = Math.sqrt(l)) - distances[i]) / l;
+          x *= l;
+          y *= l;
+          t.x -= x * (k = s.weight + t.weight ? s.weight / (s.weight + t.weight) : .5);
+          t.y -= y * k;
+          s.x += x * (k = 1 - k);
+          s.y += y * k;
+        }
+      }
+      if (k = alpha * gravity) {
+        x = size[0] / 2;
+        y = size[1] / 2;
+        i = -1;
+        if (k) while (++i < n) {
+          o = nodes[i];
+          o.x += (x - o.x) * k;
+          o.y += (y - o.y) * k;
+        }
+      }
+      if (charge) {
+        d3_layout_forceAccumulate(q = d3.geom.quadtree(nodes), alpha, charges);
+        i = -1;
+        while (++i < n) {
+          if (!(o = nodes[i]).fixed) {
+            q.visit(repulse(o));
+          }
+        }
+      }
+      i = -1;
+      while (++i < n) {
+        o = nodes[i];
+        if (o.fixed) {
+          o.x = o.px;
+          o.y = o.py;
+        } else {
+          o.x -= (o.px - (o.px = o.x)) * friction;
+          o.y -= (o.py - (o.py = o.y)) * friction;
+        }
+      }
+      event.tick({
+        type: "tick",
+        alpha: alpha
+      });
+    };
+    force.nodes = function(x) {
+      if (!arguments.length) return nodes;
+      nodes = x;
+      return force;
+    };
+    force.links = function(x) {
+      if (!arguments.length) return links;
+      links = x;
+      return force;
+    };
+    force.size = function(x) {
+      if (!arguments.length) return size;
+      size = x;
+      return force;
+    };
+    force.linkDistance = function(x) {
+      if (!arguments.length) return linkDistance;
+      linkDistance = typeof x === "function" ? x : +x;
+      return force;
+    };
+    force.distance = force.linkDistance;
+    force.linkStrength = function(x) {
+      if (!arguments.length) return linkStrength;
+      linkStrength = typeof x === "function" ? x : +x;
+      return force;
+    };
+    force.friction = function(x) {
+      if (!arguments.length) return friction;
+      friction = +x;
+      return force;
+    };
+    force.charge = function(x) {
+      if (!arguments.length) return charge;
+      charge = typeof x === "function" ? x : +x;
+      return force;
+    };
+    force.chargeDistance = function(x) {
+      if (!arguments.length) return Math.sqrt(chargeDistance2);
+      chargeDistance2 = x * x;
+      return force;
+    };
+    force.gravity = function(x) {
+      if (!arguments.length) return gravity;
+      gravity = +x;
+      return force;
+    };
+    force.theta = function(x) {
+      if (!arguments.length) return Math.sqrt(theta2);
+      theta2 = x * x;
+      return force;
+    };
+    force.alpha = function(x) {
+      if (!arguments.length) return alpha;
+      x = +x;
+      if (alpha) {
+        if (x > 0) {
+          alpha = x;
+        } else {
+          timer.c = null, timer.t = NaN, timer = null;
+          event.end({
+            type: "end",
+            alpha: alpha = 0
+          });
+        }
+      } else if (x > 0) {
+        event.start({
+          type: "start",
+          alpha: alpha = x
+        });
+        timer = d3_timer(force.tick);
+      }
+      return force;
+    };
+    force.start = function() {
+      var i, n = nodes.length, m = links.length, w = size[0], h = size[1], neighbors, o;
+      for (i = 0; i < n; ++i) {
+        (o = nodes[i]).index = i;
+        o.weight = 0;
+      }
+      for (i = 0; i < m; ++i) {
+        o = links[i];
+        if (typeof o.source == "number") o.source = nodes[o.source];
+        if (typeof o.target == "number") o.target = nodes[o.target];
+        ++o.source.weight;
+        ++o.target.weight;
+      }
+      for (i = 0; i < n; ++i) {
+        o = nodes[i];
+        if (isNaN(o.x)) o.x = position("x", w);
+        if (isNaN(o.y)) o.y = position("y", h);
+        if (isNaN(o.px)) o.px = o.x;
+        if (isNaN(o.py)) o.py = o.y;
+      }
+      distances = [];
+      if (typeof linkDistance === "function") for (i = 0; i < m; ++i) distances[i] = +linkDistance.call(this, links[i], i); else for (i = 0; i < m; ++i) distances[i] = linkDistance;
+      strengths = [];
+      if (typeof linkStrength === "function") for (i = 0; i < m; ++i) strengths[i] = +linkStrength.call(this, links[i], i); else for (i = 0; i < m; ++i) strengths[i] = linkStrength;
+      charges = [];
+      if (typeof charge === "function") for (i = 0; i < n; ++i) charges[i] = +charge.call(this, nodes[i], i); else for (i = 0; i < n; ++i) charges[i] = charge;
+      function position(dimension, size) {
+        if (!neighbors) {
+          neighbors = new Array(n);
+          for (j = 0; j < n; ++j) {
+            neighbors[j] = [];
+          }
+          for (j = 0; j < m; ++j) {
+            var o = links[j];
+            neighbors[o.source.index].push(o.target);
+            neighbors[o.target.index].push(o.source);
+          }
+        }
+        var candidates = neighbors[i], j = -1, l = candidates.length, x;
+        while (++j < l) if (!isNaN(x = candidates[j][dimension])) return x;
+        return Math.random() * size;
+      }
+      return force.resume();
+    };
+    force.resume = function() {
+      return force.alpha(.1);
+    };
+    force.stop = function() {
+      return force.alpha(0);
+    };
+    force.drag = function() {
+      if (!drag) drag = d3.behavior.drag().origin(d3_identity).on("dragstart.force", d3_layout_forceDragstart).on("drag.force", dragmove).on("dragend.force", d3_layout_forceDragend);
+      if (!arguments.length) return drag;
+      this.on("mouseover.force", d3_layout_forceMouseover).on("mouseout.force", d3_layout_forceMouseout).call(drag);
+    };
+    function dragmove(d) {
+      d.px = d3.event.x, d.py = d3.event.y;
+      force.resume();
+    }
+    return d3.rebind(force, event, "on");
+  };
+  function d3_layout_forceDragstart(d) {
+    d.fixed |= 2;
+  }
+  function d3_layout_forceDragend(d) {
+    d.fixed &= ~6;
+  }
+  function d3_layout_forceMouseover(d) {
+    d.fixed |= 4;
+    d.px = d.x, d.py = d.y;
+  }
+  function d3_layout_forceMouseout(d) {
+    d.fixed &= ~4;
+  }
+  function d3_layout_forceAccumulate(quad, alpha, charges) {
+    var cx = 0, cy = 0;
+    quad.charge = 0;
+    if (!quad.leaf) {
+      var nodes = quad.nodes, n = nodes.length, i = -1, c;
+      while (++i < n) {
+        c = nodes[i];
+        if (c == null) continue;
+        d3_layout_forceAccumulate(c, alpha, charges);
+        quad.charge += c.charge;
+        cx += c.charge * c.cx;
+        cy += c.charge * c.cy;
+      }
+    }
+    if (quad.point) {
+      if (!quad.leaf) {
+        quad.point.x += Math.random() - .5;
+        quad.point.y += Math.random() - .5;
+      }
+      var k = alpha * charges[quad.point.index];
+      quad.charge += quad.pointCharge = k;
+      cx += k * quad.point.x;
+      cy += k * quad.point.y;
+    }
+    quad.cx = cx / quad.charge;
+    quad.cy = cy / quad.charge;
+  }
+  var d3_layout_forceLinkDistance = 20, d3_layout_forceLinkStrength = 1, d3_layout_forceChargeDistance2 = Infinity;
+  d3.layout.hierarchy = function() {
+    var sort = d3_layout_hierarchySort, children = d3_layout_hierarchyChildren, value = d3_layout_hierarchyValue;
+    function hierarchy(root) {
+      var stack = [ root ], nodes = [], node;
+      root.depth = 0;
+      while ((node = stack.pop()) != null) {
+        nodes.push(node);
+        if ((childs = children.call(hierarchy, node, node.depth)) && (n = childs.length)) {
+          var n, childs, child;
+          while (--n >= 0) {
+            stack.push(child = childs[n]);
+            child.parent = node;
+            child.depth = node.depth + 1;
+          }
+          if (value) node.value = 0;
+          node.children = childs;
+        } else {
+          if (value) node.value = +value.call(hierarchy, node, node.depth) || 0;
+          delete node.children;
+        }
+      }
+      d3_layout_hierarchyVisitAfter(root, function(node) {
+        var childs, parent;
+        if (sort && (childs = node.children)) childs.sort(sort);
+        if (value && (parent = node.parent)) parent.value += node.value;
+      });
+      return nodes;
+    }
+    hierarchy.sort = function(x) {
+      if (!arguments.length) return sort;
+      sort = x;
+      return hierarchy;
+    };
+    hierarchy.children = function(x) {
+      if (!arguments.length) return children;
+      children = x;
+      return hierarchy;
+    };
+    hierarchy.value = function(x) {
+      if (!arguments.length) return value;
+      value = x;
+      return hierarchy;
+    };
+    hierarchy.revalue = function(root) {
+      if (value) {
+        d3_layout_hierarchyVisitBefore(root, function(node) {
+          if (node.children) node.value = 0;
+        });
+        d3_layout_hierarchyVisitAfter(root, function(node) {
+          var parent;
+          if (!node.children) node.value = +value.call(hierarchy, node, node.depth) || 0;
+          if (parent = node.parent) parent.value += node.value;
+        });
+      }
+      return root;
+    };
+    return hierarchy;
+  };
+  function d3_layout_hierarchyRebind(object, hierarchy) {
+    d3.rebind(object, hierarchy, "sort", "children", "value");
+    object.nodes = object;
+    object.links = d3_layout_hierarchyLinks;
+    return object;
+  }
+  function d3_layout_hierarchyVisitBefore(node, callback) {
+    var nodes = [ node ];
+    while ((node = nodes.pop()) != null) {
+      callback(node);
+      if ((children = node.children) && (n = children.length)) {
+        var n, children;
+        while (--n >= 0) nodes.push(children[n]);
+      }
+    }
+  }
+  function d3_layout_hierarchyVisitAfter(node, callback) {
+    var nodes = [ node ], nodes2 = [];
+    while ((node = nodes.pop()) != null) {
+      nodes2.push(node);
+      if ((children = node.children) && (n = children.length)) {
+        var i = -1, n, children;
+        while (++i < n) nodes.push(children[i]);
+      }
+    }
+    while ((node = nodes2.pop()) != null) {
+      callback(node);
+    }
+  }
+  function d3_layout_hierarchyChildren(d) {
+    return d.children;
+  }
+  function d3_layout_hierarchyValue(d) {
+    return d.value;
+  }
+  function d3_layout_hierarchySort(a, b) {
+    return b.value - a.value;
+  }
+  function d3_layout_hierarchyLinks(nodes) {
+    return d3.merge(nodes.map(function(parent) {
+      return (parent.children || []).map(function(child) {
+        return {
+          source: parent,
+          target: child
+        };
+      });
+    }));
+  }
+  d3.layout.partition = function() {
+    var hierarchy = d3.layout.hierarchy(), size = [ 1, 1 ];
+    function position(node, x, dx, dy) {
+      var children = node.children;
+      node.x = x;
+      node.y = node.depth * dy;
+      node.dx = dx;
+      node.dy = dy;
+      if (children && (n = children.length)) {
+        var i = -1, n, c, d;
+        dx = node.value ? dx / node.value : 0;
+        while (++i < n) {
+          position(c = children[i], x, d = c.value * dx, dy);
+          x += d;
+        }
+      }
+    }
+    function depth(node) {
+      var children = node.children, d = 0;
+      if (children && (n = children.length)) {
+        var i = -1, n;
+        while (++i < n) d = Math.max(d, depth(children[i]));
+      }
+      return 1 + d;
+    }
+    function partition(d, i) {
+      var nodes = hierarchy.call(this, d, i);
+      position(nodes[0], 0, size[0], size[1] / depth(nodes[0]));
+      return nodes;
+    }
+    partition.size = function(x) {
+      if (!arguments.length) return size;
+      size = x;
+      return partition;
+    };
+    return d3_layout_hierarchyRebind(partition, hierarchy);
+  };
+  d3.layout.pie = function() {
+    var value = Number, sort = d3_layout_pieSortByValue, startAngle = 0, endAngle = τ, padAngle = 0;
+    function pie(data) {
+      var n = data.length, values = data.map(function(d, i) {
+        return +value.call(pie, d, i);
+      }), a = +(typeof startAngle === "function" ? startAngle.apply(this, arguments) : startAngle), da = (typeof endAngle === "function" ? endAngle.apply(this, arguments) : endAngle) - a, p = Math.min(Math.abs(da) / n, +(typeof padAngle === "function" ? padAngle.apply(this, arguments) : padAngle)), pa = p * (da < 0 ? -1 : 1), sum = d3.sum(values), k = sum ? (da - n * pa) / sum : 0, index = d3.range(n), arcs = [], v;
+      if (sort != null) index.sort(sort === d3_layout_pieSortByValue ? function(i, j) {
+        return values[j] - values[i];
+      } : function(i, j) {
+        return sort(data[i], data[j]);
+      });
+      index.forEach(function(i) {
+        arcs[i] = {
+          data: data[i],
+          value: v = values[i],
+          startAngle: a,
+          endAngle: a += v * k + pa,
+          padAngle: p
+        };
+      });
+      return arcs;
+    }
+    pie.value = function(_) {
+      if (!arguments.length) return value;
+      value = _;
+      return pie;
+    };
+    pie.sort = function(_) {
+      if (!arguments.length) return sort;
+      sort = _;
+      return pie;
+    };
+    pie.startAngle = function(_) {
+      if (!arguments.length) return startAngle;
+      startAngle = _;
+      return pie;
+    };
+    pie.endAngle = function(_) {
+      if (!arguments.length) return endAngle;
+      endAngle = _;
+      return pie;
+    };
+    pie.padAngle = function(_) {
+      if (!arguments.length) return padAngle;
+      padAngle = _;
+      return pie;
+    };
+    return pie;
+  };
+  var d3_layout_pieSortByValue = {};
+  d3.layout.stack = function() {
+    var values = d3_identity, order = d3_layout_stackOrderDefault, offset = d3_layout_stackOffsetZero, out = d3_layout_stackOut, x = d3_layout_stackX, y = d3_layout_stackY;
+    function stack(data, index) {
+      if (!(n = data.length)) return data;
+      var series = data.map(function(d, i) {
+        return values.call(stack, d, i);
+      });
+      var points = series.map(function(d) {
+        return d.map(function(v, i) {
+          return [ x.call(stack, v, i), y.call(stack, v, i) ];
+        });
+      });
+      var orders = order.call(stack, points, index);
+      series = d3.permute(series, orders);
+      points = d3.permute(points, orders);
+      var offsets = offset.call(stack, points, index);
+      var m = series[0].length, n, i, j, o;
+      for (j = 0; j < m; ++j) {
+        out.call(stack, series[0][j], o = offsets[j], points[0][j][1]);
+        for (i = 1; i < n; ++i) {
+          out.call(stack, series[i][j], o += points[i - 1][j][1], points[i][j][1]);
+        }
+      }
+      return data;
+    }
+    stack.values = function(x) {
+      if (!arguments.length) return values;
+      values = x;
+      return stack;
+    };
+    stack.order = function(x) {
+      if (!arguments.length) return order;
+      order = typeof x === "function" ? x : d3_layout_stackOrders.get(x) || d3_layout_stackOrderDefault;
+      return stack;
+    };
+    stack.offset = function(x) {
+      if (!arguments.length) return offset;
+      offset = typeof x === "function" ? x : d3_layout_stackOffsets.get(x) || d3_layout_stackOffsetZero;
+      return stack;
+    };
+    stack.x = function(z) {
+      if (!arguments.length) return x;
+      x = z;
+      return stack;
+    };
+    stack.y = function(z) {
+      if (!arguments.length) return y;
+      y = z;
+      return stack;
+    };
+    stack.out = function(z) {
+      if (!arguments.length) return out;
+      out = z;
+      return stack;
+    };
+    return stack;
+  };
+  function d3_layout_stackX(d) {
+    return d.x;
+  }
+  function d3_layout_stackY(d) {
+    return d.y;
+  }
+  function d3_layout_stackOut(d, y0, y) {
+    d.y0 = y0;
+    d.y = y;
+  }
+  var d3_layout_stackOrders = d3.map({
+    "inside-out": function(data) {
+      var n = data.length, i, j, max = data.map(d3_layout_stackMaxIndex), sums = data.map(d3_layout_stackReduceSum), index = d3.range(n).sort(function(a, b) {
+        return max[a] - max[b];
+      }), top = 0, bottom = 0, tops = [], bottoms = [];
+      for (i = 0; i < n; ++i) {
+        j = index[i];
+        if (top < bottom) {
+          top += sums[j];
+          tops.push(j);
+        } else {
+          bottom += sums[j];
+          bottoms.push(j);
+        }
+      }
+      return bottoms.reverse().concat(tops);
+    },
+    reverse: function(data) {
+      return d3.range(data.length).reverse();
+    },
+    "default": d3_layout_stackOrderDefault
+  });
+  var d3_layout_stackOffsets = d3.map({
+    silhouette: function(data) {
+      var n = data.length, m = data[0].length, sums = [], max = 0, i, j, o, y0 = [];
+      for (j = 0; j < m; ++j) {
+        for (i = 0, o = 0; i < n; i++) o += data[i][j][1];
+        if (o > max) max = o;
+        sums.push(o);
+      }
+      for (j = 0; j < m; ++j) {
+        y0[j] = (max - sums[j]) / 2;
+      }
+      return y0;
+    },
+    wiggle: function(data) {
+      var n = data.length, x = data[0], m = x.length, i, j, k, s1, s2, s3, dx, o, o0, y0 = [];
+      y0[0] = o = o0 = 0;
+      for (j = 1; j < m; ++j) {
+        for (i = 0, s1 = 0; i < n; ++i) s1 += data[i][j][1];
+        for (i = 0, s2 = 0, dx = x[j][0] - x[j - 1][0]; i < n; ++i) {
+          for (k = 0, s3 = (data[i][j][1] - data[i][j - 1][1]) / (2 * dx); k < i; ++k) {
+            s3 += (data[k][j][1] - data[k][j - 1][1]) / dx;
+          }
+          s2 += s3 * data[i][j][1];
+        }
+        y0[j] = o -= s1 ? s2 / s1 * dx : 0;
+        if (o < o0) o0 = o;
+      }
+      for (j = 0; j < m; ++j) y0[j] -= o0;
+      return y0;
+    },
+    expand: function(data) {
+      var n = data.length, m = data[0].length, k = 1 / n, i, j, o, y0 = [];
+      for (j = 0; j < m; ++j) {
+        for (i = 0, o = 0; i < n; i++) o += data[i][j][1];
+        if (o) for (i = 0; i < n; i++) data[i][j][1] /= o; else for (i = 0; i < n; i++) data[i][j][1] = k;
+      }
+      for (j = 0; j < m; ++j) y0[j] = 0;
+      return y0;
+    },
+    zero: d3_layout_stackOffsetZero
+  });
+  function d3_layout_stackOrderDefault(data) {
+    return d3.range(data.length);
+  }
+  function d3_layout_stackOffsetZero(data) {
+    var j = -1, m = data[0].length, y0 = [];
+    while (++j < m) y0[j] = 0;
+    return y0;
+  }
+  function d3_layout_stackMaxIndex(array) {
+    var i = 1, j = 0, v = array[0][1], k, n = array.length;
+    for (;i < n; ++i) {
+      if ((k = array[i][1]) > v) {
+        j = i;
+        v = k;
+      }
+    }
+    return j;
+  }
+  function d3_layout_stackReduceSum(d) {
+    return d.reduce(d3_layout_stackSum, 0);
+  }
+  function d3_layout_stackSum(p, d) {
+    return p + d[1];
+  }
+  d3.layout.histogram = function() {
+    var frequency = true, valuer = Number, ranger = d3_layout_histogramRange, binner = d3_layout_histogramBinSturges;
+    function histogram(data, i) {
+      var bins = [], values = data.map(valuer, this), range = ranger.call(this, values, i), thresholds = binner.call(this, range, values, i), bin, i = -1, n = values.length, m = thresholds.length - 1, k = frequency ? 1 : 1 / n, x;
+      while (++i < m) {
+        bin = bins[i] = [];
+        bin.dx = thresholds[i + 1] - (bin.x = thresholds[i]);
+        bin.y = 0;
+      }
+      if (m > 0) {
+        i = -1;
+        while (++i < n) {
+          x = values[i];
+          if (x >= range[0] && x <= range[1]) {
+            bin = bins[d3.bisect(thresholds, x, 1, m) - 1];
+            bin.y += k;
+            bin.push(data[i]);
+          }
+        }
+      }
+      return bins;
+    }
+    histogram.value = function(x) {
+      if (!arguments.length) return valuer;
+      valuer = x;
+      return histogram;
+    };
+    histogram.range = function(x) {
+      if (!arguments.length) return ranger;
+      ranger = d3_functor(x);
+      return histogram;
+    };
+    histogram.bins = function(x) {
+      if (!arguments.length) return binner;
+      binner = typeof x === "number" ? function(range) {
+        return d3_layout_histogramBinFixed(range, x);
+      } : d3_functor(x);
+      return histogram;
+    };
+    histogram.frequency = function(x) {
+      if (!arguments.length) return frequency;
+      frequency = !!x;
+      return histogram;
+    };
+    return histogram;
+  };
+  function d3_layout_histogramBinSturges(range, values) {
+    return d3_layout_histogramBinFixed(range, Math.ceil(Math.log(values.length) / Math.LN2 + 1));
+  }
+  function d3_layout_histogramBinFixed(range, n) {
+    var x = -1, b = +range[0], m = (range[1] - b) / n, f = [];
+    while (++x <= n) f[x] = m * x + b;
+    return f;
+  }
+  function d3_layout_histogramRange(values) {
+    return [ d3.min(values), d3.max(values) ];
+  }
+  d3.layout.pack = function() {
+    var hierarchy = d3.layout.hierarchy().sort(d3_layout_packSort), padding = 0, size = [ 1, 1 ], radius;
+    function pack(d, i) {
+      var nodes = hierarchy.call(this, d, i), root = nodes[0], w = size[0], h = size[1], r = radius == null ? Math.sqrt : typeof radius === "function" ? radius : function() {
+        return radius;
+      };
+      root.x = root.y = 0;
+      d3_layout_hierarchyVisitAfter(root, function(d) {
+        d.r = +r(d.value);
+      });
+      d3_layout_hierarchyVisitAfter(root, d3_layout_packSiblings);
+      if (padding) {
+        var dr = padding * (radius ? 1 : Math.max(2 * root.r / w, 2 * root.r / h)) / 2;
+        d3_layout_hierarchyVisitAfter(root, function(d) {
+          d.r += dr;
+        });
+        d3_layout_hierarchyVisitAfter(root, d3_layout_packSiblings);
+        d3_layout_hierarchyVisitAfter(root, function(d) {
+          d.r -= dr;
+        });
+      }
+      d3_layout_packTransform(root, w / 2, h / 2, radius ? 1 : 1 / Math.max(2 * root.r / w, 2 * root.r / h));
+      return nodes;
+    }
+    pack.size = function(_) {
+      if (!arguments.length) return size;
+      size = _;
+      return pack;
+    };
+    pack.radius = function(_) {
+      if (!arguments.length) return radius;
+      radius = _ == null || typeof _ === "function" ? _ : +_;
+      return pack;
+    };
+    pack.padding = function(_) {
+      if (!arguments.length) return padding;
+      padding = +_;
+      return pack;
+    };
+    return d3_layout_hierarchyRebind(pack, hierarchy);
+  };
+  function d3_layout_packSort(a, b) {
+    return a.value - b.value;
+  }
+  function d3_layout_packInsert(a, b) {
+    var c = a._pack_next;
+    a._pack_next = b;
+    b._pack_prev = a;
+    b._pack_next = c;
+    c._pack_prev = b;
+  }
+  function d3_layout_packSplice(a, b) {
+    a._pack_next = b;
+    b._pack_prev = a;
+  }
+  function d3_layout_packIntersects(a, b) {
+    var dx = b.x - a.x, dy = b.y - a.y, dr = a.r + b.r;
+    return .999 * dr * dr > dx * dx + dy * dy;
+  }
+  function d3_layout_packSiblings(node) {
+    if (!(nodes = node.children) || !(n = nodes.length)) return;
+    var nodes, xMin = Infinity, xMax = -Infinity, yMin = Infinity, yMax = -Infinity, a, b, c, i, j, k, n;
+    function bound(node) {
+      xMin = Math.min(node.x - node.r, xMin);
+      xMax = Math.max(node.x + node.r, xMax);
+      yMin = Math.min(node.y - node.r, yMin);
+      yMax = Math.max(node.y + node.r, yMax);
+    }
+    nodes.forEach(d3_layout_packLink);
+    a = nodes[0];
+    a.x = -a.r;
+    a.y = 0;
+    bound(a);
+    if (n > 1) {
+      b = nodes[1];
+      b.x = b.r;
+      b.y = 0;
+      bound(b);
+      if (n > 2) {
+        c = nodes[2];
+        d3_layout_packPlace(a, b, c);
+        bound(c);
+        d3_layout_packInsert(a, c);
+        a._pack_prev = c;
+        d3_layout_packInsert(c, b);
+        b = a._pack_next;
+        for (i = 3; i < n; i++) {
+          d3_layout_packPlace(a, b, c = nodes[i]);
+          var isect = 0, s1 = 1, s2 = 1;
+          for (j = b._pack_next; j !== b; j = j._pack_next, s1++) {
+            if (d3_layout_packIntersects(j, c)) {
+              isect = 1;
+              break;
+            }
+          }
+          if (isect == 1) {
+            for (k = a._pack_prev; k !== j._pack_prev; k = k._pack_prev, s2++) {
+              if (d3_layout_packIntersects(k, c)) {
+                break;
+              }
+            }
+          }
+          if (isect) {
+            if (s1 < s2 || s1 == s2 && b.r < a.r) d3_layout_packSplice(a, b = j); else d3_layout_packSplice(a = k, b);
+            i--;
+          } else {
+            d3_layout_packInsert(a, c);
+            b = c;
+            bound(c);
+          }
+        }
+      }
+    }
+    var cx = (xMin + xMax) / 2, cy = (yMin + yMax) / 2, cr = 0;
+    for (i = 0; i < n; i++) {
+      c = nodes[i];
+      c.x -= cx;
+      c.y -= cy;
+      cr = Math.max(cr, c.r + Math.sqrt(c.x * c.x + c.y * c.y));
+    }
+    node.r = cr;
+    nodes.forEach(d3_layout_packUnlink);
+  }
+  function d3_layout_packLink(node) {
+    node._pack_next = node._pack_prev = node;
+  }
+  function d3_layout_packUnlink(node) {
+    delete node._pack_next;
+    delete node._pack_prev;
+  }
+  function d3_layout_packTransform(node, x, y, k) {
+    var children = node.children;
+    node.x = x += k * node.x;
+    node.y = y += k * node.y;
+    node.r *= k;
+    if (children) {
+      var i = -1, n = children.length;
+      while (++i < n) d3_layout_packTransform(children[i], x, y, k);
+    }
+  }
+  function d3_layout_packPlace(a, b, c) {
+    var db = a.r + c.r, dx = b.x - a.x, dy = b.y - a.y;
+    if (db && (dx || dy)) {
+      var da = b.r + c.r, dc = dx * dx + dy * dy;
+      da *= da;
+      db *= db;
+      var x = .5 + (db - da) / (2 * dc), y = Math.sqrt(Math.max(0, 2 * da * (db + dc) - (db -= dc) * db - da * da)) / (2 * dc);
+      c.x = a.x + x * dx + y * dy;
+      c.y = a.y + x * dy - y * dx;
+    } else {
+      c.x = a.x + db;
+      c.y = a.y;
+    }
+  }
+  d3.layout.tree = function() {
+    var hierarchy = d3.layout.hierarchy().sort(null).value(null), separation = d3_layout_treeSeparation, size = [ 1, 1 ], nodeSize = null;
+    function tree(d, i) {
+      var nodes = hierarchy.call(this, d, i), root0 = nodes[0], root1 = wrapTree(root0);
+      d3_layout_hierarchyVisitAfter(root1, firstWalk), root1.parent.m = -root1.z;
+      d3_layout_hierarchyVisitBefore(root1, secondWalk);
+      if (nodeSize) d3_layout_hierarchyVisitBefore(root0, sizeNode); else {
+        var left = root0, right = root0, bottom = root0;
+        d3_layout_hierarchyVisitBefore(root0, function(node) {
+          if (node.x < left.x) left = node;
+          if (node.x > right.x) right = node;
+          if (node.depth > bottom.depth) bottom = node;
+        });
+        var tx = separation(left, right) / 2 - left.x, kx = size[0] / (right.x + separation(right, left) / 2 + tx), ky = size[1] / (bottom.depth || 1);
+        d3_layout_hierarchyVisitBefore(root0, function(node) {
+          node.x = (node.x + tx) * kx;
+          node.y = node.depth * ky;
+        });
+      }
+      return nodes;
+    }
+    function wrapTree(root0) {
+      var root1 = {
+        A: null,
+        children: [ root0 ]
+      }, queue = [ root1 ], node1;
+      while ((node1 = queue.pop()) != null) {
+        for (var children = node1.children, child, i = 0, n = children.length; i < n; ++i) {
+          queue.push((children[i] = child = {
+            _: children[i],
+            parent: node1,
+            children: (child = children[i].children) && child.slice() || [],
+            A: null,
+            a: null,
+            z: 0,
+            m: 0,
+            c: 0,
+            s: 0,
+            t: null,
+            i: i
+          }).a = child);
+        }
+      }
+      return root1.children[0];
+    }
+    function firstWalk(v) {
+      var children = v.children, siblings = v.parent.children, w = v.i ? siblings[v.i - 1] : null;
+      if (children.length) {
+        d3_layout_treeShift(v);
+        var midpoint = (children[0].z + children[children.length - 1].z) / 2;
+        if (w) {
+          v.z = w.z + separation(v._, w._);
+          v.m = v.z - midpoint;
+        } else {
+          v.z = midpoint;
+        }
+      } else if (w) {
+        v.z = w.z + separation(v._, w._);
+      }
+      v.parent.A = apportion(v, w, v.parent.A || siblings[0]);
+    }
+    function secondWalk(v) {
+      v._.x = v.z + v.parent.m;
+      v.m += v.parent.m;
+    }
+    function apportion(v, w, ancestor) {
+      if (w) {
+        var vip = v, vop = v, vim = w, vom = vip.parent.children[0], sip = vip.m, sop = vop.m, sim = vim.m, som = vom.m, shift;
+        while (vim = d3_layout_treeRight(vim), vip = d3_layout_treeLeft(vip), vim && vip) {
+          vom = d3_layout_treeLeft(vom);
+          vop = d3_layout_treeRight(vop);
+          vop.a = v;
+          shift = vim.z + sim - vip.z - sip + separation(vim._, vip._);
+          if (shift > 0) {
+            d3_layout_treeMove(d3_layout_treeAncestor(vim, v, ancestor), v, shift);
+            sip += shift;
+            sop += shift;
+          }
+          sim += vim.m;
+          sip += vip.m;
+          som += vom.m;
+          sop += vop.m;
+        }
+        if (vim && !d3_layout_treeRight(vop)) {
+          vop.t = vim;
+          vop.m += sim - sop;
+        }
+        if (vip && !d3_layout_treeLeft(vom)) {
+          vom.t = vip;
+          vom.m += sip - som;
+          ancestor = v;
+        }
+      }
+      return ancestor;
+    }
+    function sizeNode(node) {
+      node.x *= size[0];
+      node.y = node.depth * size[1];
+    }
+    tree.separation = function(x) {
+      if (!arguments.length) return separation;
+      separation = x;
+      return tree;
+    };
+    tree.size = function(x) {
+      if (!arguments.length) return nodeSize ? null : size;
+      nodeSize = (size = x) == null ? sizeNode : null;
+      return tree;
+    };
+    tree.nodeSize = function(x) {
+      if (!arguments.length) return nodeSize ? size : null;
+      nodeSize = (size = x) == null ? null : sizeNode;
+      return tree;
+    };
+    return d3_layout_hierarchyRebind(tree, hierarchy);
+  };
+  function d3_layout_treeSeparation(a, b) {
+    return a.parent == b.parent ? 1 : 2;
+  }
+  function d3_layout_treeLeft(v) {
+    var children = v.children;
+    return children.length ? children[0] : v.t;
+  }
+  function d3_layout_treeRight(v) {
+    var children = v.children, n;
+    return (n = children.length) ? children[n - 1] : v.t;
+  }
+  function d3_layout_treeMove(wm, wp, shift) {
+    var change = shift / (wp.i - wm.i);
+    wp.c -= change;
+    wp.s += shift;
+    wm.c += change;
+    wp.z += shift;
+    wp.m += shift;
+  }
+  function d3_layout_treeShift(v) {
+    var shift = 0, change = 0, children = v.children, i = children.length, w;
+    while (--i >= 0) {
+      w = children[i];
+      w.z += shift;
+      w.m += shift;
+      shift += w.s + (change += w.c);
+    }
+  }
+  function d3_layout_treeAncestor(vim, v, ancestor) {
+    return vim.a.parent === v.parent ? vim.a : ancestor;
+  }
+  d3.layout.cluster = function() {
+    var hierarchy = d3.layout.hierarchy().sort(null).value(null), separation = d3_layout_treeSeparation, size = [ 1, 1 ], nodeSize = false;
+    function cluster(d, i) {
+      var nodes = hierarchy.call(this, d, i), root = nodes[0], previousNode, x = 0;
+      d3_layout_hierarchyVisitAfter(root, function(node) {
+        var children = node.children;
+        if (children && children.length) {
+          node.x = d3_layout_clusterX(children);
+          node.y = d3_layout_clusterY(children);
+        } else {
+          node.x = previousNode ? x += separation(node, previousNode) : 0;
+          node.y = 0;
+          previousNode = node;
+        }
+      });
+      var left = d3_layout_clusterLeft(root), right = d3_layout_clusterRight(root), x0 = left.x - separation(left, right) / 2, x1 = right.x + separation(right, left) / 2;
+      d3_layout_hierarchyVisitAfter(root, nodeSize ? function(node) {
+        node.x = (node.x - root.x) * size[0];
+        node.y = (root.y - node.y) * size[1];
+      } : function(node) {
+        node.x = (node.x - x0) / (x1 - x0) * size[0];
+        node.y = (1 - (root.y ? node.y / root.y : 1)) * size[1];
+      });
+      return nodes;
+    }
+    cluster.separation = function(x) {
+      if (!arguments.length) return separation;
+      separation = x;
+      return cluster;
+    };
+    cluster.size = function(x) {
+      if (!arguments.length) return nodeSize ? null : size;
+      nodeSize = (size = x) == null;
+      return cluster;
+    };
+    cluster.nodeSize = function(x) {
+      if (!arguments.length) return nodeSize ? size : null;
+      nodeSize = (size = x) != null;
+      return cluster;
+    };
+    return d3_layout_hierarchyRebind(cluster, hierarchy);
+  };
+  function d3_layout_clusterY(children) {
+    return 1 + d3.max(children, function(child) {
+      return child.y;
+    });
+  }
+  function d3_layout_clusterX(children) {
+    return children.reduce(function(x, child) {
+      return x + child.x;
+    }, 0) / children.length;
+  }
+  function d3_layout_clusterLeft(node) {
+    var children = node.children;
+    return children && children.length ? d3_layout_clusterLeft(children[0]) : node;
+  }
+  function d3_layout_clusterRight(node) {
+    var children = node.children, n;
+    return children && (n = children.length) ? d3_layout_clusterRight(children[n - 1]) : node;
+  }
+  d3.layout.treemap = function() {
+    var hierarchy = d3.layout.hierarchy(), round = Math.round, size = [ 1, 1 ], padding = null, pad = d3_layout_treemapPadNull, sticky = false, stickies, mode = "squarify", ratio = .5 * (1 + Math.sqrt(5));
+    function scale(children, k) {
+      var i = -1, n = children.length, child, area;
+      while (++i < n) {
+        area = (child = children[i]).value * (k < 0 ? 0 : k);
+        child.area = isNaN(area) || area <= 0 ? 0 : area;
+      }
+    }
+    function squarify(node) {
+      var children = node.children;
+      if (children && children.length) {
+        var rect = pad(node), row = [], remaining = children.slice(), child, best = Infinity, score, u = mode === "slice" ? rect.dx : mode === "dice" ? rect.dy : mode === "slice-dice" ? node.depth & 1 ? rect.dy : rect.dx : Math.min(rect.dx, rect.dy), n;
+        scale(remaining, rect.dx * rect.dy / node.value);
+        row.area = 0;
+        while ((n = remaining.length) > 0) {
+          row.push(child = remaining[n - 1]);
+          row.area += child.area;
+          if (mode !== "squarify" || (score = worst(row, u)) <= best) {
+            remaining.pop();
+            best = score;
+          } else {
+            row.area -= row.pop().area;
+            position(row, u, rect, false);
+            u = Math.min(rect.dx, rect.dy);
+            row.length = row.area = 0;
+            best = Infinity;
+          }
+        }
+        if (row.length) {
+          position(row, u, rect, true);
+          row.length = row.area = 0;
+        }
+        children.forEach(squarify);
+      }
+    }
+    function stickify(node) {
+      var children = node.children;
+      if (children && children.length) {
+        var rect = pad(node), remaining = children.slice(), child, row = [];
+        scale(remaining, rect.dx * rect.dy / node.value);
+        row.area = 0;
+        while (child = remaining.pop()) {
+          row.push(child);
+          row.area += child.area;
+          if (child.z != null) {
+            position(row, child.z ? rect.dx : rect.dy, rect, !remaining.length);
+            row.length = row.area = 0;
+          }
+        }
+        children.forEach(stickify);
+      }
+    }
+    function worst(row, u) {
+      var s = row.area, r, rmax = 0, rmin = Infinity, i = -1, n = row.length;
+      while (++i < n) {
+        if (!(r = row[i].area)) continue;
+        if (r < rmin) rmin = r;
+        if (r > rmax) rmax = r;
+      }
+      s *= s;
+      u *= u;
+      return s ? Math.max(u * rmax * ratio / s, s / (u * rmin * ratio)) : Infinity;
+    }
+    function position(row, u, rect, flush) {
+      var i = -1, n = row.length, x = rect.x, y = rect.y, v = u ? round(row.area / u) : 0, o;
+      if (u == rect.dx) {
+        if (flush || v > rect.dy) v = rect.dy;
+        while (++i < n) {
+          o = row[i];
+          o.x = x;
+          o.y = y;
+          o.dy = v;
+          x += o.dx = Math.min(rect.x + rect.dx - x, v ? round(o.area / v) : 0);
+        }
+        o.z = true;
+        o.dx += rect.x + rect.dx - x;
+        rect.y += v;
+        rect.dy -= v;
+      } else {
+        if (flush || v > rect.dx) v = rect.dx;
+        while (++i < n) {
+          o = row[i];
+          o.x = x;
+          o.y = y;
+          o.dx = v;
+          y += o.dy = Math.min(rect.y + rect.dy - y, v ? round(o.area / v) : 0);
+        }
+        o.z = false;
+        o.dy += rect.y + rect.dy - y;
+        rect.x += v;
+        rect.dx -= v;
+      }
+    }
+    function treemap(d) {
+      var nodes = stickies || hierarchy(d), root = nodes[0];
+      root.x = root.y = 0;
+      if (root.value) root.dx = size[0], root.dy = size[1]; else root.dx = root.dy = 0;
+      if (stickies) hierarchy.revalue(root);
+      scale([ root ], root.dx * root.dy / root.value);
+      (stickies ? stickify : squarify)(root);
+      if (sticky) stickies = nodes;
+      return nodes;
+    }
+    treemap.size = function(x) {
+      if (!arguments.length) return size;
+      size = x;
+      return treemap;
+    };
+    treemap.padding = function(x) {
+      if (!arguments.length) return padding;
+      function padFunction(node) {
+        var p = x.call(treemap, node, node.depth);
+        return p == null ? d3_layout_treemapPadNull(node) : d3_layout_treemapPad(node, typeof p === "number" ? [ p, p, p, p ] : p);
+      }
+      function padConstant(node) {
+        return d3_layout_treemapPad(node, x);
+      }
+      var type;
+      pad = (padding = x) == null ? d3_layout_treemapPadNull : (type = typeof x) === "function" ? padFunction : type === "number" ? (x = [ x, x, x, x ], 
+      padConstant) : padConstant;
+      return treemap;
+    };
+    treemap.round = function(x) {
+      if (!arguments.length) return round != Number;
+      round = x ? Math.round : Number;
+      return treemap;
+    };
+    treemap.sticky = function(x) {
+      if (!arguments.length) return sticky;
+      sticky = x;
+      stickies = null;
+      return treemap;
+    };
+    treemap.ratio = function(x) {
+      if (!arguments.length) return ratio;
+      ratio = x;
+      return treemap;
+    };
+    treemap.mode = function(x) {
+      if (!arguments.length) return mode;
+      mode = x + "";
+      return treemap;
+    };
+    return d3_layout_hierarchyRebind(treemap, hierarchy);
+  };
+  function d3_layout_treemapPadNull(node) {
+    return {
+      x: node.x,
+      y: node.y,
+      dx: node.dx,
+      dy: node.dy
+    };
+  }
+  function d3_layout_treemapPad(node, padding) {
+    var x = node.x + padding[3], y = node.y + padding[0], dx = node.dx - padding[1] - padding[3], dy = node.dy - padding[0] - padding[2];
+    if (dx < 0) {
+      x += dx / 2;
+      dx = 0;
+    }
+    if (dy < 0) {
+      y += dy / 2;
+      dy = 0;
+    }
+    return {
+      x: x,
+      y: y,
+      dx: dx,
+      dy: dy
+    };
+  }
+  d3.random = {
+    normal: function(µ, σ) {
+      var n = arguments.length;
+      if (n < 2) σ = 1;
+      if (n < 1) µ = 0;
+      return function() {
+        var x, y, r;
+        do {
+          x = Math.random() * 2 - 1;
+          y = Math.random() * 2 - 1;
+          r = x * x + y * y;
+        } while (!r || r > 1);
+        return µ + σ * x * Math.sqrt(-2 * Math.log(r) / r);
+      };
+    },
+    logNormal: function() {
+      var random = d3.random.normal.apply(d3, arguments);
+      return function() {
+        return Math.exp(random());
+      };
+    },
+    bates: function(m) {
+      var random = d3.random.irwinHall(m);
+      return function() {
+        return random() / m;
+      };
+    },
+    irwinHall: function(m) {
+      return function() {
+        for (var s = 0, j = 0; j < m; j++) s += Math.random();
+        return s;
+      };
+    }
+  };
+  d3.scale = {};
+  function d3_scaleExtent(domain) {
+    var start = domain[0], stop = domain[domain.length - 1];
+    return start < stop ? [ start, stop ] : [ stop, start ];
+  }
+  function d3_scaleRange(scale) {
+    return scale.rangeExtent ? scale.rangeExtent() : d3_scaleExtent(scale.range());
+  }
+  function d3_scale_bilinear(domain, range, uninterpolate, interpolate) {
+    var u = uninterpolate(domain[0], domain[1]), i = interpolate(range[0], range[1]);
+    return function(x) {
+      return i(u(x));
+    };
+  }
+  function d3_scale_nice(domain, nice) {
+    var i0 = 0, i1 = domain.length - 1, x0 = domain[i0], x1 = domain[i1], dx;
+    if (x1 < x0) {
+      dx = i0, i0 = i1, i1 = dx;
+      dx = x0, x0 = x1, x1 = dx;
+    }
+    domain[i0] = nice.floor(x0);
+    domain[i1] = nice.ceil(x1);
+    return domain;
+  }
+  function d3_scale_niceStep(step) {
+    return step ? {
+      floor: function(x) {
+        return Math.floor(x / step) * step;
+      },
+      ceil: function(x) {
+        return Math.ceil(x / step) * step;
+      }
+    } : d3_scale_niceIdentity;
+  }
+  var d3_scale_niceIdentity = {
+    floor: d3_identity,
+    ceil: d3_identity
+  };
+  function d3_scale_polylinear(domain, range, uninterpolate, interpolate) {
+    var u = [], i = [], j = 0, k = Math.min(domain.length, range.length) - 1;
+    if (domain[k] < domain[0]) {
+      domain = domain.slice().reverse();
+      range = range.slice().reverse();
+    }
+    while (++j <= k) {
+      u.push(uninterpolate(domain[j - 1], domain[j]));
+      i.push(interpolate(range[j - 1], range[j]));
+    }
+    return function(x) {
+      var j = d3.bisect(domain, x, 1, k) - 1;
+      return i[j](u[j](x));
+    };
+  }
+  d3.scale.linear = function() {
+    return d3_scale_linear([ 0, 1 ], [ 0, 1 ], d3_interpolate, false);
+  };
+  function d3_scale_linear(domain, range, interpolate, clamp) {
+    var output, input;
+    function rescale() {
+      var linear = Math.min(domain.length, range.length) > 2 ? d3_scale_polylinear : d3_scale_bilinear, uninterpolate = clamp ? d3_uninterpolateClamp : d3_uninterpolateNumber;
+      output = linear(domain, range, uninterpolate, interpolate);
+      input = linear(range, domain, uninterpolate, d3_interpolate);
+      return scale;
+    }
+    function scale(x) {
+      return output(x);
+    }
+    scale.invert = function(y) {
+      return input(y);
+    };
+    scale.domain = function(x) {
+      if (!arguments.length) return domain;
+      domain = x.map(Number);
+      return rescale();
+    };
+    scale.range = function(x) {
+      if (!arguments.length) return range;
+      range = x;
+      return rescale();
+    };
+    scale.rangeRound = function(x) {
+      return scale.range(x).interpolate(d3_interpolateRound);
+    };
+    scale.clamp = function(x) {
+      if (!arguments.length) return clamp;
+      clamp = x;
+      return rescale();
+    };
+    scale.interpolate = function(x) {
+      if (!arguments.length) return interpolate;
+      interpolate = x;
+      return rescale();
+    };
+    scale.ticks = function(m) {
+      return d3_scale_linearTicks(domain, m);
+    };
+    scale.tickFormat = function(m, format) {
+      return d3_scale_linearTickFormat(domain, m, format);
+    };
+    scale.nice = function(m) {
+      d3_scale_linearNice(domain, m);
+      return rescale();
+    };
+    scale.copy = function() {
+      return d3_scale_linear(domain, range, interpolate, clamp);
+    };
+    return rescale();
+  }
+  function d3_scale_linearRebind(scale, linear) {
+    return d3.rebind(scale, linear, "range", "rangeRound", "interpolate", "clamp");
+  }
+  function d3_scale_linearNice(domain, m) {
+    d3_scale_nice(domain, d3_scale_niceStep(d3_scale_linearTickRange(domain, m)[2]));
+    d3_scale_nice(domain, d3_scale_niceStep(d3_scale_linearTickRange(domain, m)[2]));
+    return domain;
+  }
+  function d3_scale_linearTickRange(domain, m) {
+    if (m == null) m = 10;
+    var extent = d3_scaleExtent(domain), span = extent[1] - extent[0], step = Math.pow(10, Math.floor(Math.log(span / m) / Math.LN10)), err = m / span * step;
+    if (err <= .15) step *= 10; else if (err <= .35) step *= 5; else if (err <= .75) step *= 2;
+    extent[0] = Math.ceil(extent[0] / step) * step;
+    extent[1] = Math.floor(extent[1] / step) * step + step * .5;
+    extent[2] = step;
+    return extent;
+  }
+  function d3_scale_linearTicks(domain, m) {
+    return d3.range.apply(d3, d3_scale_linearTickRange(domain, m));
+  }
+  function d3_scale_linearTickFormat(domain, m, format) {
+    var range = d3_scale_linearTickRange(domain, m);
+    if (format) {
+      var match = d3_format_re.exec(format);
+      match.shift();
+      if (match[8] === "s") {
+        var prefix = d3.formatPrefix(Math.max(abs(range[0]), abs(range[1])));
+        if (!match[7]) match[7] = "." + d3_scale_linearPrecision(prefix.scale(range[2]));
+        match[8] = "f";
+        format = d3.format(match.join(""));
+        return function(d) {
+          return format(prefix.scale(d)) + prefix.symbol;
+        };
+      }
+      if (!match[7]) match[7] = "." + d3_scale_linearFormatPrecision(match[8], range);
+      format = match.join("");
+    } else {
+      format = ",." + d3_scale_linearPrecision(range[2]) + "f";
+    }
+    return d3.format(format);
+  }
+  var d3_scale_linearFormatSignificant = {
+    s: 1,
+    g: 1,
+    p: 1,
+    r: 1,
+    e: 1
+  };
+  function d3_scale_linearPrecision(value) {
+    return -Math.floor(Math.log(value) / Math.LN10 + .01);
+  }
+  function d3_scale_linearFormatPrecision(type, range) {
+    var p = d3_scale_linearPrecision(range[2]);
+    return type in d3_scale_linearFormatSignificant ? Math.abs(p - d3_scale_linearPrecision(Math.max(abs(range[0]), abs(range[1])))) + +(type !== "e") : p - (type === "%") * 2;
+  }
+  d3.scale.log = function() {
+    return d3_scale_log(d3.scale.linear().domain([ 0, 1 ]), 10, true, [ 1, 10 ]);
+  };
+  function d3_scale_log(linear, base, positive, domain) {
+    function log(x) {
+      return (positive ? Math.log(x < 0 ? 0 : x) : -Math.log(x > 0 ? 0 : -x)) / Math.log(base);
+    }
+    function pow(x) {
+      return positive ? Math.pow(base, x) : -Math.pow(base, -x);
+    }
+    function scale(x) {
+      return linear(log(x));
+    }
+    scale.invert = function(x) {
+      return pow(linear.invert(x));
+    };
+    scale.domain = function(x) {
+      if (!arguments.length) return domain;
+      positive = x[0] >= 0;
+      linear.domain((domain = x.map(Number)).map(log));
+      return scale;
+    };
+    scale.base = function(_) {
+      if (!arguments.length) return base;
+      base = +_;
+      linear.domain(domain.map(log));
+      return scale;
+    };
+    scale.nice = function() {
+      var niced = d3_scale_nice(domain.map(log), positive ? Math : d3_scale_logNiceNegative);
+      linear.domain(niced);
+      domain = niced.map(pow);
+      return scale;
+    };
+    scale.ticks = function() {
+      var extent = d3_scaleExtent(domain), ticks = [], u = extent[0], v = extent[1], i = Math.floor(log(u)), j = Math.ceil(log(v)), n = base % 1 ? 2 : base;
+      if (isFinite(j - i)) {
+        if (positive) {
+          for (;i < j; i++) for (var k = 1; k < n; k++) ticks.push(pow(i) * k);
+          ticks.push(pow(i));
+        } else {
+          ticks.push(pow(i));
+          for (;i++ < j; ) for (var k = n - 1; k > 0; k--) ticks.push(pow(i) * k);
+        }
+        for (i = 0; ticks[i] < u; i++) {}
+        for (j = ticks.length; ticks[j - 1] > v; j--) {}
+        ticks = ticks.slice(i, j);
+      }
+      return ticks;
+    };
+    scale.tickFormat = function(n, format) {
+      if (!arguments.length) return d3_scale_logFormat;
+      if (arguments.length < 2) format = d3_scale_logFormat; else if (typeof format !== "function") format = d3.format(format);
+      var k = Math.max(1, base * n / scale.ticks().length);
+      return function(d) {
+        var i = d / pow(Math.round(log(d)));
+        if (i * base < base - .5) i *= base;
+        return i <= k ? format(d) : "";
+      };
+    };
+    scale.copy = function() {
+      return d3_scale_log(linear.copy(), base, positive, domain);
+    };
+    return d3_scale_linearRebind(scale, linear);
+  }
+  var d3_scale_logFormat = d3.format(".0e"), d3_scale_logNiceNegative = {
+    floor: function(x) {
+      return -Math.ceil(-x);
+    },
+    ceil: function(x) {
+      return -Math.floor(-x);
+    }
+  };
+  d3.scale.pow = function() {
+    return d3_scale_pow(d3.scale.linear(), 1, [ 0, 1 ]);
+  };
+  function d3_scale_pow(linear, exponent, domain) {
+    var powp = d3_scale_powPow(exponent), powb = d3_scale_powPow(1 / exponent);
+    function scale(x) {
+      return linear(powp(x));
+    }
+    scale.invert = function(x) {
+      return powb(linear.invert(x));
+    };
+    scale.domain = function(x) {
+      if (!arguments.length) return domain;
+      linear.domain((domain = x.map(Number)).map(powp));
+      return scale;
+    };
+    scale.ticks = function(m) {
+      return d3_scale_linearTicks(domain, m);
+    };
+    scale.tickFormat = function(m, format) {
+      return d3_scale_linearTickFormat(domain, m, format);
+    };
+    scale.nice = function(m) {
+      return scale.domain(d3_scale_linearNice(domain, m));
+    };
+    scale.exponent = function(x) {
+      if (!arguments.length) return exponent;
+      powp = d3_scale_powPow(exponent = x);
+      powb = d3_scale_powPow(1 / exponent);
+      linear.domain(domain.map(powp));
+      return scale;
+    };
+    scale.copy = function() {
+      return d3_scale_pow(linear.copy(), exponent, domain);
+    };
+    return d3_scale_linearRebind(scale, linear);
+  }
+  function d3_scale_powPow(e) {
+    return function(x) {
+      return x < 0 ? -Math.pow(-x, e) : Math.pow(x, e);
+    };
+  }
+  d3.scale.sqrt = function() {
+    return d3.scale.pow().exponent(.5);
+  };
+  d3.scale.ordinal = function() {
+    return d3_scale_ordinal([], {
+      t: "range",
+      a: [ [] ]
+    });
+  };
+  function d3_scale_ordinal(domain, ranger) {
+    var index, range, rangeBand;
+    function scale(x) {
+      return range[((index.get(x) || (ranger.t === "range" ? index.set(x, domain.push(x)) : NaN)) - 1) % range.length];
+    }
+    function steps(start, step) {
+      return d3.range(domain.length).map(function(i) {
+        return start + step * i;
+      });
+    }
+    scale.domain = function(x) {
+      if (!arguments.length) return domain;
+      domain = [];
+      index = new d3_Map();
+      var i = -1, n = x.length, xi;
+      while (++i < n) if (!index.has(xi = x[i])) index.set(xi, domain.push(xi));
+      return scale[ranger.t].apply(scale, ranger.a);
+    };
+    scale.range = function(x) {
+      if (!arguments.length) return range;
+      range = x;
+      rangeBand = 0;
+      ranger = {
+        t: "range",
+        a: arguments
+      };
+      return scale;
+    };
+    scale.rangePoints = function(x, padding) {
+      if (arguments.length < 2) padding = 0;
+      var start = x[0], stop = x[1], step = domain.length < 2 ? (start = (start + stop) / 2, 
+      0) : (stop - start) / (domain.length - 1 + padding);
+      range = steps(start + step * padding / 2, step);
+      rangeBand = 0;
+      ranger = {
+        t: "rangePoints",
+        a: arguments
+      };
+      return scale;
+    };
+    scale.rangeRoundPoints = function(x, padding) {
+      if (arguments.length < 2) padding = 0;
+      var start = x[0], stop = x[1], step = domain.length < 2 ? (start = stop = Math.round((start + stop) / 2), 
+      0) : (stop - start) / (domain.length - 1 + padding) | 0;
+      range = steps(start + Math.round(step * padding / 2 + (stop - start - (domain.length - 1 + padding) * step) / 2), step);
+      rangeBand = 0;
+      ranger = {
+        t: "rangeRoundPoints",
+        a: arguments
+      };
+      return scale;
+    };
+    scale.rangeBands = function(x, padding, outerPadding) {
+      if (arguments.length < 2) padding = 0;
+      if (arguments.length < 3) outerPadding = padding;
+      var reverse = x[1] < x[0], start = x[reverse - 0], stop = x[1 - reverse], step = (stop - start) / (domain.length - padding + 2 * outerPadding);
+      range = steps(start + step * outerPadding, step);
+      if (reverse) range.reverse();
+      rangeBand = step * (1 - padding);
+      ranger = {
+        t: "rangeBands",
+        a: arguments
+      };
+      return scale;
+    };
+    scale.rangeRoundBands = function(x, padding, outerPadding) {
+      if (arguments.length < 2) padding = 0;
+      if (arguments.length < 3) outerPadding = padding;
+      var reverse = x[1] < x[0], start = x[reverse - 0], stop = x[1 - reverse], step = Math.floor((stop - start) / (domain.length - padding + 2 * outerPadding));
+      range = steps(start + Math.round((stop - start - (domain.length - padding) * step) / 2), step);
+      if (reverse) range.reverse();
+      rangeBand = Math.round(step * (1 - padding));
+      ranger = {
+        t: "rangeRoundBands",
+        a: arguments
+      };
+      return scale;
+    };
+    scale.rangeBand = function() {
+      return rangeBand;
+    };
+    scale.rangeExtent = function() {
+      return d3_scaleExtent(ranger.a[0]);
+    };
+    scale.copy = function() {
+      return d3_scale_ordinal(domain, ranger);
+    };
+    return scale.domain(domain);
+  }
+  d3.scale.category10 = function() {
+    return d3.scale.ordinal().range(d3_category10);
+  };
+  d3.scale.category20 = function() {
+    return d3.scale.ordinal().range(d3_category20);
+  };
+  d3.scale.category20b = function() {
+    return d3.scale.ordinal().range(d3_category20b);
+  };
+  d3.scale.category20c = function() {
+    return d3.scale.ordinal().range(d3_category20c);
+  };
+  var d3_category10 = [ 2062260, 16744206, 2924588, 14034728, 9725885, 9197131, 14907330, 8355711, 12369186, 1556175 ].map(d3_rgbString);
+  var d3_category20 = [ 2062260, 11454440, 16744206, 16759672, 2924588, 10018698, 14034728, 16750742, 9725885, 12955861, 9197131, 12885140, 14907330, 16234194, 8355711, 13092807, 12369186, 14408589, 1556175, 10410725 ].map(d3_rgbString);
+  var d3_category20b = [ 3750777, 5395619, 7040719, 10264286, 6519097, 9216594, 11915115, 13556636, 9202993, 12426809, 15186514, 15190932, 8666169, 11356490, 14049643, 15177372, 8077683, 10834324, 13528509, 14589654 ].map(d3_rgbString);
+  var d3_category20c = [ 3244733, 7057110, 10406625, 13032431, 15095053, 16616764, 16625259, 16634018, 3253076, 7652470, 10607003, 13101504, 7695281, 10394312, 12369372, 14342891, 6513507, 9868950, 12434877, 14277081 ].map(d3_rgbString);
+  d3.scale.quantile = function() {
+    return d3_scale_quantile([], []);
+  };
+  function d3_scale_quantile(domain, range) {
+    var thresholds;
+    function rescale() {
+      var k = 0, q = range.length;
+      thresholds = [];
+      while (++k < q) thresholds[k - 1] = d3.quantile(domain, k / q);
+      return scale;
+    }
+    function scale(x) {
+      if (!isNaN(x = +x)) return range[d3.bisect(thresholds, x)];
+    }
+    scale.domain = function(x) {
+      if (!arguments.length) return domain;
+      domain = x.map(d3_number).filter(d3_numeric).sort(d3_ascending);
+      return rescale();
+    };
+    scale.range = function(x) {
+      if (!arguments.length) return range;
+      range = x;
+      return rescale();
+    };
+    scale.quantiles = function() {
+      return thresholds;
+    };
+    scale.invertExtent = function(y) {
+      y = range.indexOf(y);
+      return y < 0 ? [ NaN, NaN ] : [ y > 0 ? thresholds[y - 1] : domain[0], y < thresholds.length ? thresholds[y] : domain[domain.length - 1] ];
+    };
+    scale.copy = function() {
+      return d3_scale_quantile(domain, range);
+    };
+    return rescale();
+  }
+  d3.scale.quantize = function() {
+    return d3_scale_quantize(0, 1, [ 0, 1 ]);
+  };
+  function d3_scale_quantize(x0, x1, range) {
+    var kx, i;
+    function scale(x) {
+      return range[Math.max(0, Math.min(i, Math.floor(kx * (x - x0))))];
+    }
+    function rescale() {
+      kx = range.length / (x1 - x0);
+      i = range.length - 1;
+      return scale;
+    }
+    scale.domain = function(x) {
+      if (!arguments.length) return [ x0, x1 ];
+      x0 = +x[0];
+      x1 = +x[x.length - 1];
+      return rescale();
+    };
+    scale.range = function(x) {
+      if (!arguments.length) return range;
+      range = x;
+      return rescale();
+    };
+    scale.invertExtent = function(y) {
+      y = range.indexOf(y);
+      y = y < 0 ? NaN : y / kx + x0;
+      return [ y, y + 1 / kx ];
+    };
+    scale.copy = function() {
+      return d3_scale_quantize(x0, x1, range);
+    };
+    return rescale();
+  }
+  d3.scale.threshold = function() {
+    return d3_scale_threshold([ .5 ], [ 0, 1 ]);
+  };
+  function d3_scale_threshold(domain, range) {
+    function scale(x) {
+      if (x <= x) return range[d3.bisect(domain, x)];
+    }
+    scale.domain = function(_) {
+      if (!arguments.length) return domain;
+      domain = _;
+      return scale;
+    };
+    scale.range = function(_) {
+      if (!arguments.length) return range;
+      range = _;
+      return scale;
+    };
+    scale.invertExtent = function(y) {
+      y = range.indexOf(y);
+      return [ domain[y - 1], domain[y] ];
+    };
+    scale.copy = function() {
+      return d3_scale_threshold(domain, range);
+    };
+    return scale;
+  }
+  d3.scale.identity = function() {
+    return d3_scale_identity([ 0, 1 ]);
+  };
+  function d3_scale_identity(domain) {
+    function identity(x) {
+      return +x;
+    }
+    identity.invert = identity;
+    identity.domain = identity.range = function(x) {
+      if (!arguments.length) return domain;
+      domain = x.map(identity);
+      return identity;
+    };
+    identity.ticks = function(m) {
+      return d3_scale_linearTicks(domain, m);
+    };
+    identity.tickFormat = function(m, format) {
+      return d3_scale_linearTickFormat(domain, m, format);
+    };
+    identity.copy = function() {
+      return d3_scale_identity(domain);
+    };
+    return identity;
+  }
+  d3.svg = {};
+  function d3_zero() {
+    return 0;
+  }
+  d3.svg.arc = function() {
+    var innerRadius = d3_svg_arcInnerRadius, outerRadius = d3_svg_arcOuterRadius, cornerRadius = d3_zero, padRadius = d3_svg_arcAuto, startAngle = d3_svg_arcStartAngle, endAngle = d3_svg_arcEndAngle, padAngle = d3_svg_arcPadAngle;
+    function arc() {
+      var r0 = Math.max(0, +innerRadius.apply(this, arguments)), r1 = Math.max(0, +outerRadius.apply(this, arguments)), a0 = startAngle.apply(this, arguments) - halfπ, a1 = endAngle.apply(this, arguments) - halfπ, da = Math.abs(a1 - a0), cw = a0 > a1 ? 0 : 1;
+      if (r1 < r0) rc = r1, r1 = r0, r0 = rc;
+      if (da >= τε) return circleSegment(r1, cw) + (r0 ? circleSegment(r0, 1 - cw) : "") + "Z";
+      var rc, cr, rp, ap, p0 = 0, p1 = 0, x0, y0, x1, y1, x2, y2, x3, y3, path = [];
+      if (ap = (+padAngle.apply(this, arguments) || 0) / 2) {
+        rp = padRadius === d3_svg_arcAuto ? Math.sqrt(r0 * r0 + r1 * r1) : +padRadius.apply(this, arguments);
+        if (!cw) p1 *= -1;
+        if (r1) p1 = d3_asin(rp / r1 * Math.sin(ap));
+        if (r0) p0 = d3_asin(rp / r0 * Math.sin(ap));
+      }
+      if (r1) {
+        x0 = r1 * Math.cos(a0 + p1);
+        y0 = r1 * Math.sin(a0 + p1);
+        x1 = r1 * Math.cos(a1 - p1);
+        y1 = r1 * Math.sin(a1 - p1);
+        var l1 = Math.abs(a1 - a0 - 2 * p1) <= π ? 0 : 1;
+        if (p1 && d3_svg_arcSweep(x0, y0, x1, y1) === cw ^ l1) {
+          var h1 = (a0 + a1) / 2;
+          x0 = r1 * Math.cos(h1);
+          y0 = r1 * Math.sin(h1);
+          x1 = y1 = null;
+        }
+      } else {
+        x0 = y0 = 0;
+      }
+      if (r0) {
+        x2 = r0 * Math.cos(a1 - p0);
+        y2 = r0 * Math.sin(a1 - p0);
+        x3 = r0 * Math.cos(a0 + p0);
+        y3 = r0 * Math.sin(a0 + p0);
+        var l0 = Math.abs(a0 - a1 + 2 * p0) <= π ? 0 : 1;
+        if (p0 && d3_svg_arcSweep(x2, y2, x3, y3) === 1 - cw ^ l0) {
+          var h0 = (a0 + a1) / 2;
+          x2 = r0 * Math.cos(h0);
+          y2 = r0 * Math.sin(h0);
+          x3 = y3 = null;
+        }
+      } else {
+        x2 = y2 = 0;
+      }
+      if (da > ε && (rc = Math.min(Math.abs(r1 - r0) / 2, +cornerRadius.apply(this, arguments))) > .001) {
+        cr = r0 < r1 ^ cw ? 0 : 1;
+        var rc1 = rc, rc0 = rc;
+        if (da < π) {
+          var oc = x3 == null ? [ x2, y2 ] : x1 == null ? [ x0, y0 ] : d3_geom_polygonIntersect([ x0, y0 ], [ x3, y3 ], [ x1, y1 ], [ x2, y2 ]), ax = x0 - oc[0], ay = y0 - oc[1], bx = x1 - oc[0], by = y1 - oc[1], kc = 1 / Math.sin(Math.acos((ax * bx + ay * by) / (Math.sqrt(ax * ax + ay * ay) * Math.sqrt(bx * bx + by * by))) / 2), lc = Math.sqrt(oc[0] * oc[0] + oc[1] * oc[1]);
+          rc0 = Math.min(rc, (r0 - lc) / (kc - 1));
+          rc1 = Math.min(rc, (r1 - lc) / (kc + 1));
+        }
+        if (x1 != null) {
+          var t30 = d3_svg_arcCornerTangents(x3 == null ? [ x2, y2 ] : [ x3, y3 ], [ x0, y0 ], r1, rc1, cw), t12 = d3_svg_arcCornerTangents([ x1, y1 ], [ x2, y2 ], r1, rc1, cw);
+          if (rc === rc1) {
+            path.push("M", t30[0], "A", rc1, ",", rc1, " 0 0,", cr, " ", t30[1], "A", r1, ",", r1, " 0 ", 1 - cw ^ d3_svg_arcSweep(t30[1][0], t30[1][1], t12[1][0], t12[1][1]), ",", cw, " ", t12[1], "A", rc1, ",", rc1, " 0 0,", cr, " ", t12[0]);
+          } else {
+            path.push("M", t30[0], "A", rc1, ",", rc1, " 0 1,", cr, " ", t12[0]);
+          }
+        } else {
+          path.push("M", x0, ",", y0);
+        }
+        if (x3 != null) {
+          var t03 = d3_svg_arcCornerTangents([ x0, y0 ], [ x3, y3 ], r0, -rc0, cw), t21 = d3_svg_arcCornerTangents([ x2, y2 ], x1 == null ? [ x0, y0 ] : [ x1, y1 ], r0, -rc0, cw);
+          if (rc === rc0) {
+            path.push("L", t21[0], "A", rc0, ",", rc0, " 0 0,", cr, " ", t21[1], "A", r0, ",", r0, " 0 ", cw ^ d3_svg_arcSweep(t21[1][0], t21[1][1], t03[1][0], t03[1][1]), ",", 1 - cw, " ", t03[1], "A", rc0, ",", rc0, " 0 0,", cr, " ", t03[0]);
+          } else {
+            path.push("L", t21[0], "A", rc0, ",", rc0, " 0 0,", cr, " ", t03[0]);
+          }
+        } else {
+          path.push("L", x2, ",", y2);
+        }
+      } else {
+        path.push("M", x0, ",", y0);
+        if (x1 != null) path.push("A", r1, ",", r1, " 0 ", l1, ",", cw, " ", x1, ",", y1);
+        path.push("L", x2, ",", y2);
+        if (x3 != null) path.push("A", r0, ",", r0, " 0 ", l0, ",", 1 - cw, " ", x3, ",", y3);
+      }
+      path.push("Z");
+      return path.join("");
+    }
+    function circleSegment(r1, cw) {
+      return "M0," + r1 + "A" + r1 + "," + r1 + " 0 1," + cw + " 0," + -r1 + "A" + r1 + "," + r1 + " 0 1," + cw + " 0," + r1;
+    }
+    arc.innerRadius = function(v) {
+      if (!arguments.length) return innerRadius;
+      innerRadius = d3_functor(v);
+      return arc;
+    };
+    arc.outerRadius = function(v) {
+      if (!arguments.length) return outerRadius;
+      outerRadius = d3_functor(v);
+      return arc;
+    };
+    arc.cornerRadius = function(v) {
+      if (!arguments.length) return cornerRadius;
+      cornerRadius = d3_functor(v);
+      return arc;
+    };
+    arc.padRadius = function(v) {
+      if (!arguments.length) return padRadius;
+      padRadius = v == d3_svg_arcAuto ? d3_svg_arcAuto : d3_functor(v);
+      return arc;
+    };
+    arc.startAngle = function(v) {
+      if (!arguments.length) return startAngle;
+      startAngle = d3_functor(v);
+      return arc;
+    };
+    arc.endAngle = function(v) {
+      if (!arguments.length) return endAngle;
+      endAngle = d3_functor(v);
+      return arc;
+    };
+    arc.padAngle = function(v) {
+      if (!arguments.length) return padAngle;
+      padAngle = d3_functor(v);
+      return arc;
+    };
+    arc.centroid = function() {
+      var r = (+innerRadius.apply(this, arguments) + +outerRadius.apply(this, arguments)) / 2, a = (+startAngle.apply(this, arguments) + +endAngle.apply(this, arguments)) / 2 - halfπ;
+      return [ Math.cos(a) * r, Math.sin(a) * r ];
+    };
+    return arc;
+  };
+  var d3_svg_arcAuto = "auto";
+  function d3_svg_arcInnerRadius(d) {
+    return d.innerRadius;
+  }
+  function d3_svg_arcOuterRadius(d) {
+    return d.outerRadius;
+  }
+  function d3_svg_arcStartAngle(d) {
+    return d.startAngle;
+  }
+  function d3_svg_arcEndAngle(d) {
+    return d.endAngle;
+  }
+  function d3_svg_arcPadAngle(d) {
+    return d && d.padAngle;
+  }
+  function d3_svg_arcSweep(x0, y0, x1, y1) {
+    return (x0 - x1) * y0 - (y0 - y1) * x0 > 0 ? 0 : 1;
+  }
+  function d3_svg_arcCornerTangents(p0, p1, r1, rc, cw) {
+    var x01 = p0[0] - p1[0], y01 = p0[1] - p1[1], lo = (cw ? rc : -rc) / Math.sqrt(x01 * x01 + y01 * y01), ox = lo * y01, oy = -lo * x01, x1 = p0[0] + ox, y1 = p0[1] + oy, x2 = p1[0] + ox, y2 = p1[1] + oy, x3 = (x1 + x2) / 2, y3 = (y1 + y2) / 2, dx = x2 - x1, dy = y2 - y1, d2 = dx * dx + dy * dy, r = r1 - rc, D = x1 * y2 - x2 * y1, d = (dy < 0 ? -1 : 1) * Math.sqrt(Math.max(0, r * r * d2 - D * D)), cx0 = (D * dy - dx * d) / d2, cy0 = (-D * dx - dy * d) / d2, cx1 = (D * dy + dx * d) / d2, cy1 = (-D * dx + dy * d) / d2, dx0 = cx0 - x3, dy0 = cy0 - y3, dx1 = cx1 - x3, dy1 = cy1 - y3;
+    if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) cx0 = cx1, cy0 = cy1;
+    return [ [ cx0 - ox, cy0 - oy ], [ cx0 * r1 / r, cy0 * r1 / r ] ];
+  }
+  function d3_svg_line(projection) {
+    var x = d3_geom_pointX, y = d3_geom_pointY, defined = d3_true, interpolate = d3_svg_lineLinear, interpolateKey = interpolate.key, tension = .7;
+    function line(data) {
+      var segments = [], points = [], i = -1, n = data.length, d, fx = d3_functor(x), fy = d3_functor(y);
+      function segment() {
+        segments.push("M", interpolate(projection(points), tension));
+      }
+      while (++i < n) {
+        if (defined.call(this, d = data[i], i)) {
+          points.push([ +fx.call(this, d, i), +fy.call(this, d, i) ]);
+        } else if (points.length) {
+          segment();
+          points = [];
+        }
+      }
+      if (points.length) segment();
+      return segments.length ? segments.join("") : null;
+    }
+    line.x = function(_) {
+      if (!arguments.length) return x;
+      x = _;
+      return line;
+    };
+    line.y = function(_) {
+      if (!arguments.length) return y;
+      y = _;
+      return line;
+    };
+    line.defined = function(_) {
+      if (!arguments.length) return defined;
+      defined = _;
+      return line;
+    };
+    line.interpolate = function(_) {
+      if (!arguments.length) return interpolateKey;
+      if (typeof _ === "function") interpolateKey = interpolate = _; else interpolateKey = (interpolate = d3_svg_lineInterpolators.get(_) || d3_svg_lineLinear).key;
+      return line;
+    };
+    line.tension = function(_) {
+      if (!arguments.length) return tension;
+      tension = _;
+      return line;
+    };
+    return line;
+  }
+  d3.svg.line = function() {
+    return d3_svg_line(d3_identity);
+  };
+  var d3_svg_lineInterpolators = d3.map({
+    linear: d3_svg_lineLinear,
+    "linear-closed": d3_svg_lineLinearClosed,
+    step: d3_svg_lineStep,
+    "step-before": d3_svg_lineStepBefore,
+    "step-after": d3_svg_lineStepAfter,
+    basis: d3_svg_lineBasis,
+    "basis-open": d3_svg_lineBasisOpen,
+    "basis-closed": d3_svg_lineBasisClosed,
+    bundle: d3_svg_lineBundle,
+    cardinal: d3_svg_lineCardinal,
+    "cardinal-open": d3_svg_lineCardinalOpen,
+    "cardinal-closed": d3_svg_lineCardinalClosed,
+    monotone: d3_svg_lineMonotone
+  });
+  d3_svg_lineInterpolators.forEach(function(key, value) {
+    value.key = key;
+    value.closed = /-closed$/.test(key);
+  });
+  function d3_svg_lineLinear(points) {
+    return points.length > 1 ? points.join("L") : points + "Z";
+  }
+  function d3_svg_lineLinearClosed(points) {
+    return points.join("L") + "Z";
+  }
+  function d3_svg_lineStep(points) {
+    var i = 0, n = points.length, p = points[0], path = [ p[0], ",", p[1] ];
+    while (++i < n) path.push("H", (p[0] + (p = points[i])[0]) / 2, "V", p[1]);
+    if (n > 1) path.push("H", p[0]);
+    return path.join("");
+  }
+  function d3_svg_lineStepBefore(points) {
+    var i = 0, n = points.length, p = points[0], path = [ p[0], ",", p[1] ];
+    while (++i < n) path.push("V", (p = points[i])[1], "H", p[0]);
+    return path.join("");
+  }
+  function d3_svg_lineStepAfter(points) {
+    var i = 0, n = points.length, p = points[0], path = [ p[0], ",", p[1] ];
+    while (++i < n) path.push("H", (p = points[i])[0], "V", p[1]);
+    return path.join("");
+  }
+  function d3_svg_lineCardinalOpen(points, tension) {
+    return points.length < 4 ? d3_svg_lineLinear(points) : points[1] + d3_svg_lineHermite(points.slice(1, -1), d3_svg_lineCardinalTangents(points, tension));
+  }
+  function d3_svg_lineCardinalClosed(points, tension) {
+    return points.length < 3 ? d3_svg_lineLinearClosed(points) : points[0] + d3_svg_lineHermite((points.push(points[0]), 
+    points), d3_svg_lineCardinalTangents([ points[points.length - 2] ].concat(points, [ points[1] ]), tension));
+  }
+  function d3_svg_lineCardinal(points, tension) {
+    return points.length < 3 ? d3_svg_lineLinear(points) : points[0] + d3_svg_lineHermite(points, d3_svg_lineCardinalTangents(points, tension));
+  }
+  function d3_svg_lineHermite(points, tangents) {
+    if (tangents.length < 1 || points.length != tangents.length && points.length != tangents.length + 2) {
+      return d3_svg_lineLinear(points);
+    }
+    var quad = points.length != tangents.length, path = "", p0 = points[0], p = points[1], t0 = tangents[0], t = t0, pi = 1;
+    if (quad) {
+      path += "Q" + (p[0] - t0[0] * 2 / 3) + "," + (p[1] - t0[1] * 2 / 3) + "," + p[0] + "," + p[1];
+      p0 = points[1];
+      pi = 2;
+    }
+    if (tangents.length > 1) {
+      t = tangents[1];
+      p = points[pi];
+      pi++;
+      path += "C" + (p0[0] + t0[0]) + "," + (p0[1] + t0[1]) + "," + (p[0] - t[0]) + "," + (p[1] - t[1]) + "," + p[0] + "," + p[1];
+      for (var i = 2; i < tangents.length; i++, pi++) {
+        p = points[pi];
+        t = tangents[i];
+        path += "S" + (p[0] - t[0]) + "," + (p[1] - t[1]) + "," + p[0] + "," + p[1];
+      }
+    }
+    if (quad) {
+      var lp = points[pi];
+      path += "Q" + (p[0] + t[0] * 2 / 3) + "," + (p[1] + t[1] * 2 / 3) + "," + lp[0] + "," + lp[1];
+    }
+    return path;
+  }
+  function d3_svg_lineCardinalTangents(points, tension) {
+    var tangents = [], a = (1 - tension) / 2, p0, p1 = points[0], p2 = points[1], i = 1, n = points.length;
+    while (++i < n) {
+      p0 = p1;
+      p1 = p2;
+      p2 = points[i];
+      tangents.push([ a * (p2[0] - p0[0]), a * (p2[1] - p0[1]) ]);
+    }
+    return tangents;
+  }
+  function d3_svg_lineBasis(points) {
+    if (points.length < 3) return d3_svg_lineLinear(points);
+    var i = 1, n = points.length, pi = points[0], x0 = pi[0], y0 = pi[1], px = [ x0, x0, x0, (pi = points[1])[0] ], py = [ y0, y0, y0, pi[1] ], path = [ x0, ",", y0, "L", d3_svg_lineDot4(d3_svg_lineBasisBezier3, px), ",", d3_svg_lineDot4(d3_svg_lineBasisBezier3, py) ];
+    points.push(points[n - 1]);
+    while (++i <= n) {
+      pi = points[i];
+      px.shift();
+      px.push(pi[0]);
+      py.shift();
+      py.push(pi[1]);
+      d3_svg_lineBasisBezier(path, px, py);
+    }
+    points.pop();
+    path.push("L", pi);
+    return path.join("");
+  }
+  function d3_svg_lineBasisOpen(points) {
+    if (points.length < 4) return d3_svg_lineLinear(points);
+    var path = [], i = -1, n = points.length, pi, px = [ 0 ], py = [ 0 ];
+    while (++i < 3) {
+      pi = points[i];
+      px.push(pi[0]);
+      py.push(pi[1]);
+    }
+    path.push(d3_svg_lineDot4(d3_svg_lineBasisBezier3, px) + "," + d3_svg_lineDot4(d3_svg_lineBasisBezier3, py));
+    --i;
+    while (++i < n) {
+      pi = points[i];
+      px.shift();
+      px.push(pi[0]);
+      py.shift();
+      py.push(pi[1]);
+      d3_svg_lineBasisBezier(path, px, py);
+    }
+    return path.join("");
+  }
+  function d3_svg_lineBasisClosed(points) {
+    var path, i = -1, n = points.length, m = n + 4, pi, px = [], py = [];
+    while (++i < 4) {
+      pi = points[i % n];
+      px.push(pi[0]);
+      py.push(pi[1]);
+    }
+    path = [ d3_svg_lineDot4(d3_svg_lineBasisBezier3, px), ",", d3_svg_lineDot4(d3_svg_lineBasisBezier3, py) ];
+    --i;
+    while (++i < m) {
+      pi = points[i % n];
+      px.shift();
+      px.push(pi[0]);
+      py.shift();
+      py.push(pi[1]);
+      d3_svg_lineBasisBezier(path, px, py);
+    }
+    return path.join("");
+  }
+  function d3_svg_lineBundle(points, tension) {
+    var n = points.length - 1;
+    if (n) {
+      var x0 = points[0][0], y0 = points[0][1], dx = points[n][0] - x0, dy = points[n][1] - y0, i = -1, p, t;
+      while (++i <= n) {
+        p = points[i];
+        t = i / n;
+        p[0] = tension * p[0] + (1 - tension) * (x0 + t * dx);
+        p[1] = tension * p[1] + (1 - tension) * (y0 + t * dy);
+      }
+    }
+    return d3_svg_lineBasis(points);
+  }
+  function d3_svg_lineDot4(a, b) {
+    return a[0] * b[0] + a[1] * b[1] + a[2] * b[2] + a[3] * b[3];
+  }
+  var d3_svg_lineBasisBezier1 = [ 0, 2 / 3, 1 / 3, 0 ], d3_svg_lineBasisBezier2 = [ 0, 1 / 3, 2 / 3, 0 ], d3_svg_lineBasisBezier3 = [ 0, 1 / 6, 2 / 3, 1 / 6 ];
+  function d3_svg_lineBasisBezier(path, x, y) {
+    path.push("C", d3_svg_lineDot4(d3_svg_lineBasisBezier1, x), ",", d3_svg_lineDot4(d3_svg_lineBasisBezier1, y), ",", d3_svg_lineDot4(d3_svg_lineBasisBezier2, x), ",", d3_svg_lineDot4(d3_svg_lineBasisBezier2, y), ",", d3_svg_lineDot4(d3_svg_lineBasisBezier3, x), ",", d3_svg_lineDot4(d3_svg_lineBasisBezier3, y));
+  }
+  function d3_svg_lineSlope(p0, p1) {
+    return (p1[1] - p0[1]) / (p1[0] - p0[0]);
+  }
+  function d3_svg_lineFiniteDifferences(points) {
+    var i = 0, j = points.length - 1, m = [], p0 = points[0], p1 = points[1], d = m[0] = d3_svg_lineSlope(p0, p1);
+    while (++i < j) {
+      m[i] = (d + (d = d3_svg_lineSlope(p0 = p1, p1 = points[i + 1]))) / 2;
+    }
+    m[i] = d;
+    return m;
+  }
+  function d3_svg_lineMonotoneTangents(points) {
+    var tangents = [], d, a, b, s, m = d3_svg_lineFiniteDifferences(points), i = -1, j = points.length - 1;
+    while (++i < j) {
+      d = d3_svg_lineSlope(points[i], points[i + 1]);
+      if (abs(d) < ε) {
+        m[i] = m[i + 1] = 0;
+      } else {
+        a = m[i] / d;
+        b = m[i + 1] / d;
+        s = a * a + b * b;
+        if (s > 9) {
+          s = d * 3 / Math.sqrt(s);
+          m[i] = s * a;
+          m[i + 1] = s * b;
+        }
+      }
+    }
+    i = -1;
+    while (++i <= j) {
+      s = (points[Math.min(j, i + 1)][0] - points[Math.max(0, i - 1)][0]) / (6 * (1 + m[i] * m[i]));
+      tangents.push([ s || 0, m[i] * s || 0 ]);
+    }
+    return tangents;
+  }
+  function d3_svg_lineMonotone(points) {
+    return points.length < 3 ? d3_svg_lineLinear(points) : points[0] + d3_svg_lineHermite(points, d3_svg_lineMonotoneTangents(points));
+  }
+  d3.svg.line.radial = function() {
+    var line = d3_svg_line(d3_svg_lineRadial);
+    line.radius = line.x, delete line.x;
+    line.angle = line.y, delete line.y;
+    return line;
+  };
+  function d3_svg_lineRadial(points) {
+    var point, i = -1, n = points.length, r, a;
+    while (++i < n) {
+      point = points[i];
+      r = point[0];
+      a = point[1] - halfπ;
+      point[0] = r * Math.cos(a);
+      point[1] = r * Math.sin(a);
+    }
+    return points;
+  }
+  function d3_svg_area(projection) {
+    var x0 = d3_geom_pointX, x1 = d3_geom_pointX, y0 = 0, y1 = d3_geom_pointY, defined = d3_true, interpolate = d3_svg_lineLinear, interpolateKey = interpolate.key, interpolateReverse = interpolate, L = "L", tension = .7;
+    function area(data) {
+      var segments = [], points0 = [], points1 = [], i = -1, n = data.length, d, fx0 = d3_functor(x0), fy0 = d3_functor(y0), fx1 = x0 === x1 ? function() {
+        return x;
+      } : d3_functor(x1), fy1 = y0 === y1 ? function() {
+        return y;
+      } : d3_functor(y1), x, y;
+      function segment() {
+        segments.push("M", interpolate(projection(points1), tension), L, interpolateReverse(projection(points0.reverse()), tension), "Z");
+      }
+      while (++i < n) {
+        if (defined.call(this, d = data[i], i)) {
+          points0.push([ x = +fx0.call(this, d, i), y = +fy0.call(this, d, i) ]);
+          points1.push([ +fx1.call(this, d, i), +fy1.call(this, d, i) ]);
+        } else if (points0.length) {
+          segment();
+          points0 = [];
+          points1 = [];
+        }
+      }
+      if (points0.length) segment();
+      return segments.length ? segments.join("") : null;
+    }
+    area.x = function(_) {
+      if (!arguments.length) return x1;
+      x0 = x1 = _;
+      return area;
+    };
+    area.x0 = function(_) {
+      if (!arguments.length) return x0;
+      x0 = _;
+      return area;
+    };
+    area.x1 = function(_) {
+      if (!arguments.length) return x1;
+      x1 = _;
+      return area;
+    };
+    area.y = function(_) {
+      if (!arguments.length) return y1;
+      y0 = y1 = _;
+      return area;
+    };
+    area.y0 = function(_) {
+      if (!arguments.length) return y0;
+      y0 = _;
+      return area;
+    };
+    area.y1 = function(_) {
+      if (!arguments.length) return y1;
+      y1 = _;
+      return area;
+    };
+    area.defined = function(_) {
+      if (!arguments.length) return defined;
+      defined = _;
+      return area;
+    };
+    area.interpolate = function(_) {
+      if (!arguments.length) return interpolateKey;
+      if (typeof _ === "function") interpolateKey = interpolate = _; else interpolateKey = (interpolate = d3_svg_lineInterpolators.get(_) || d3_svg_lineLinear).key;
+      interpolateReverse = interpolate.reverse || interpolate;
+      L = interpolate.closed ? "M" : "L";
+      return area;
+    };
+    area.tension = function(_) {
+      if (!arguments.length) return tension;
+      tension = _;
+      return area;
+    };
+    return area;
+  }
+  d3_svg_lineStepBefore.reverse = d3_svg_lineStepAfter;
+  d3_svg_lineStepAfter.reverse = d3_svg_lineStepBefore;
+  d3.svg.area = function() {
+    return d3_svg_area(d3_identity);
+  };
+  d3.svg.area.radial = function() {
+    var area = d3_svg_area(d3_svg_lineRadial);
+    area.radius = area.x, delete area.x;
+    area.innerRadius = area.x0, delete area.x0;
+    area.outerRadius = area.x1, delete area.x1;
+    area.angle = area.y, delete area.y;
+    area.startAngle = area.y0, delete area.y0;
+    area.endAngle = area.y1, delete area.y1;
+    return area;
+  };
+  d3.svg.chord = function() {
+    var source = d3_source, target = d3_target, radius = d3_svg_chordRadius, startAngle = d3_svg_arcStartAngle, endAngle = d3_svg_arcEndAngle;
+    function chord(d, i) {
+      var s = subgroup(this, source, d, i), t = subgroup(this, target, d, i);
+      return "M" + s.p0 + arc(s.r, s.p1, s.a1 - s.a0) + (equals(s, t) ? curve(s.r, s.p1, s.r, s.p0) : curve(s.r, s.p1, t.r, t.p0) + arc(t.r, t.p1, t.a1 - t.a0) + curve(t.r, t.p1, s.r, s.p0)) + "Z";
+    }
+    function subgroup(self, f, d, i) {
+      var subgroup = f.call(self, d, i), r = radius.call(self, subgroup, i), a0 = startAngle.call(self, subgroup, i) - halfπ, a1 = endAngle.call(self, subgroup, i) - halfπ;
+      return {
+        r: r,
+        a0: a0,
+        a1: a1,
+        p0: [ r * Math.cos(a0), r * Math.sin(a0) ],
+        p1: [ r * Math.cos(a1), r * Math.sin(a1) ]
+      };
+    }
+    function equals(a, b) {
+      return a.a0 == b.a0 && a.a1 == b.a1;
+    }
+    function arc(r, p, a) {
+      return "A" + r + "," + r + " 0 " + +(a > π) + ",1 " + p;
+    }
+    function curve(r0, p0, r1, p1) {
+      return "Q 0,0 " + p1;
+    }
+    chord.radius = function(v) {
+      if (!arguments.length) return radius;
+      radius = d3_functor(v);
+      return chord;
+    };
+    chord.source = function(v) {
+      if (!arguments.length) return source;
+      source = d3_functor(v);
+      return chord;
+    };
+    chord.target = function(v) {
+      if (!arguments.length) return target;
+      target = d3_functor(v);
+      return chord;
+    };
+    chord.startAngle = function(v) {
+      if (!arguments.length) return startAngle;
+      startAngle = d3_functor(v);
+      return chord;
+    };
+    chord.endAngle = function(v) {
+      if (!arguments.length) return endAngle;
+      endAngle = d3_functor(v);
+      return chord;
+    };
+    return chord;
+  };
+  function d3_svg_chordRadius(d) {
+    return d.radius;
+  }
+  d3.svg.diagonal = function() {
+    var source = d3_source, target = d3_target, projection = d3_svg_diagonalProjection;
+    function diagonal(d, i) {
+      var p0 = source.call(this, d, i), p3 = target.call(this, d, i), m = (p0.y + p3.y) / 2, p = [ p0, {
+        x: p0.x,
+        y: m
+      }, {
+        x: p3.x,
+        y: m
+      }, p3 ];
+      p = p.map(projection);
+      return "M" + p[0] + "C" + p[1] + " " + p[2] + " " + p[3];
+    }
+    diagonal.source = function(x) {
+      if (!arguments.length) return source;
+      source = d3_functor(x);
+      return diagonal;
+    };
+    diagonal.target = function(x) {
+      if (!arguments.length) return target;
+      target = d3_functor(x);
+      return diagonal;
+    };
+    diagonal.projection = function(x) {
+      if (!arguments.length) return projection;
+      projection = x;
+      return diagonal;
+    };
+    return diagonal;
+  };
+  function d3_svg_diagonalProjection(d) {
+    return [ d.x, d.y ];
+  }
+  d3.svg.diagonal.radial = function() {
+    var diagonal = d3.svg.diagonal(), projection = d3_svg_diagonalProjection, projection_ = diagonal.projection;
+    diagonal.projection = function(x) {
+      return arguments.length ? projection_(d3_svg_diagonalRadialProjection(projection = x)) : projection;
+    };
+    return diagonal;
+  };
+  function d3_svg_diagonalRadialProjection(projection) {
+    return function() {
+      var d = projection.apply(this, arguments), r = d[0], a = d[1] - halfπ;
+      return [ r * Math.cos(a), r * Math.sin(a) ];
+    };
+  }
+  d3.svg.symbol = function() {
+    var type = d3_svg_symbolType, size = d3_svg_symbolSize;
+    function symbol(d, i) {
+      return (d3_svg_symbols.get(type.call(this, d, i)) || d3_svg_symbolCircle)(size.call(this, d, i));
+    }
+    symbol.type = function(x) {
+      if (!arguments.length) return type;
+      type = d3_functor(x);
+      return symbol;
+    };
+    symbol.size = function(x) {
+      if (!arguments.length) return size;
+      size = d3_functor(x);
+      return symbol;
+    };
+    return symbol;
+  };
+  function d3_svg_symbolSize() {
+    return 64;
+  }
+  function d3_svg_symbolType() {
+    return "circle";
+  }
+  function d3_svg_symbolCircle(size) {
+    var r = Math.sqrt(size / π);
+    return "M0," + r + "A" + r + "," + r + " 0 1,1 0," + -r + "A" + r + "," + r + " 0 1,1 0," + r + "Z";
+  }
+  var d3_svg_symbols = d3.map({
+    circle: d3_svg_symbolCircle,
+    cross: function(size) {
+      var r = Math.sqrt(size / 5) / 2;
+      return "M" + -3 * r + "," + -r + "H" + -r + "V" + -3 * r + "H" + r + "V" + -r + "H" + 3 * r + "V" + r + "H" + r + "V" + 3 * r + "H" + -r + "V" + r + "H" + -3 * r + "Z";
+    },
+    diamond: function(size) {
+      var ry = Math.sqrt(size / (2 * d3_svg_symbolTan30)), rx = ry * d3_svg_symbolTan30;
+      return "M0," + -ry + "L" + rx + ",0" + " 0," + ry + " " + -rx + ",0" + "Z";
+    },
+    square: function(size) {
+      var r = Math.sqrt(size) / 2;
+      return "M" + -r + "," + -r + "L" + r + "," + -r + " " + r + "," + r + " " + -r + "," + r + "Z";
+    },
+    "triangle-down": function(size) {
+      var rx = Math.sqrt(size / d3_svg_symbolSqrt3), ry = rx * d3_svg_symbolSqrt3 / 2;
+      return "M0," + ry + "L" + rx + "," + -ry + " " + -rx + "," + -ry + "Z";
+    },
+    "triangle-up": function(size) {
+      var rx = Math.sqrt(size / d3_svg_symbolSqrt3), ry = rx * d3_svg_symbolSqrt3 / 2;
+      return "M0," + -ry + "L" + rx + "," + ry + " " + -rx + "," + ry + "Z";
+    }
+  });
+  d3.svg.symbolTypes = d3_svg_symbols.keys();
+  var d3_svg_symbolSqrt3 = Math.sqrt(3), d3_svg_symbolTan30 = Math.tan(30 * d3_radians);
+  d3_selectionPrototype.transition = function(name) {
+    var id = d3_transitionInheritId || ++d3_transitionId, ns = d3_transitionNamespace(name), subgroups = [], subgroup, node, transition = d3_transitionInherit || {
+      time: Date.now(),
+      ease: d3_ease_cubicInOut,
+      delay: 0,
+      duration: 250
+    };
+    for (var j = -1, m = this.length; ++j < m; ) {
+      subgroups.push(subgroup = []);
+      for (var group = this[j], i = -1, n = group.length; ++i < n; ) {
+        if (node = group[i]) d3_transitionNode(node, i, ns, id, transition);
+        subgroup.push(node);
+      }
+    }
+    return d3_transition(subgroups, ns, id);
+  };
+  d3_selectionPrototype.interrupt = function(name) {
+    return this.each(name == null ? d3_selection_interrupt : d3_selection_interruptNS(d3_transitionNamespace(name)));
+  };
+  var d3_selection_interrupt = d3_selection_interruptNS(d3_transitionNamespace());
+  function d3_selection_interruptNS(ns) {
+    return function() {
+      var lock, activeId, active;
+      if ((lock = this[ns]) && (active = lock[activeId = lock.active])) {
+        active.timer.c = null;
+        active.timer.t = NaN;
+        if (--lock.count) delete lock[activeId]; else delete this[ns];
+        lock.active += .5;
+        active.event && active.event.interrupt.call(this, this.__data__, active.index);
+      }
+    };
+  }
+  function d3_transition(groups, ns, id) {
+    d3_subclass(groups, d3_transitionPrototype);
+    groups.namespace = ns;
+    groups.id = id;
+    return groups;
+  }
+  var d3_transitionPrototype = [], d3_transitionId = 0, d3_transitionInheritId, d3_transitionInherit;
+  d3_transitionPrototype.call = d3_selectionPrototype.call;
+  d3_transitionPrototype.empty = d3_selectionPrototype.empty;
+  d3_transitionPrototype.node = d3_selectionPrototype.node;
+  d3_transitionPrototype.size = d3_selectionPrototype.size;
+  d3.transition = function(selection, name) {
+    return selection && selection.transition ? d3_transitionInheritId ? selection.transition(name) : selection : d3.selection().transition(selection);
+  };
+  d3.transition.prototype = d3_transitionPrototype;
+  d3_transitionPrototype.select = function(selector) {
+    var id = this.id, ns = this.namespace, subgroups = [], subgroup, subnode, node;
+    selector = d3_selection_selector(selector);
+    for (var j = -1, m = this.length; ++j < m; ) {
+      subgroups.push(subgroup = []);
+      for (var group = this[j], i = -1, n = group.length; ++i < n; ) {
+        if ((node = group[i]) && (subnode = selector.call(node, node.__data__, i, j))) {
+          if ("__data__" in node) subnode.__data__ = node.__data__;
+          d3_transitionNode(subnode, i, ns, id, node[ns][id]);
+          subgroup.push(subnode);
+        } else {
+          subgroup.push(null);
+        }
+      }
+    }
+    return d3_transition(subgroups, ns, id);
+  };
+  d3_transitionPrototype.selectAll = function(selector) {
+    var id = this.id, ns = this.namespace, subgroups = [], subgroup, subnodes, node, subnode, transition;
+    selector = d3_selection_selectorAll(selector);
+    for (var j = -1, m = this.length; ++j < m; ) {
+      for (var group = this[j], i = -1, n = group.length; ++i < n; ) {
+        if (node = group[i]) {
+          transition = node[ns][id];
+          subnodes = selector.call(node, node.__data__, i, j);
+          subgroups.push(subgroup = []);
+          for (var k = -1, o = subnodes.length; ++k < o; ) {
+            if (subnode = subnodes[k]) d3_transitionNode(subnode, k, ns, id, transition);
+            subgroup.push(subnode);
+          }
+        }
+      }
+    }
+    return d3_transition(subgroups, ns, id);
+  };
+  d3_transitionPrototype.filter = function(filter) {
+    var subgroups = [], subgroup, group, node;
+    if (typeof filter !== "function") filter = d3_selection_filter(filter);
+    for (var j = 0, m = this.length; j < m; j++) {
+      subgroups.push(subgroup = []);
+      for (var group = this[j], i = 0, n = group.length; i < n; i++) {
+        if ((node = group[i]) && filter.call(node, node.__data__, i, j)) {
+          subgroup.push(node);
+        }
+      }
+    }
+    return d3_transition(subgroups, this.namespace, this.id);
+  };
+  d3_transitionPrototype.tween = function(name, tween) {
+    var id = this.id, ns = this.namespace;
+    if (arguments.length < 2) return this.node()[ns][id].tween.get(name);
+    return d3_selection_each(this, tween == null ? function(node) {
+      node[ns][id].tween.remove(name);
+    } : function(node) {
+      node[ns][id].tween.set(name, tween);
+    });
+  };
+  function d3_transition_tween(groups, name, value, tween) {
+    var id = groups.id, ns = groups.namespace;
+    return d3_selection_each(groups, typeof value === "function" ? function(node, i, j) {
+      node[ns][id].tween.set(name, tween(value.call(node, node.__data__, i, j)));
+    } : (value = tween(value), function(node) {
+      node[ns][id].tween.set(name, value);
+    }));
+  }
+  d3_transitionPrototype.attr = function(nameNS, value) {
+    if (arguments.length < 2) {
+      for (value in nameNS) this.attr(value, nameNS[value]);
+      return this;
+    }
+    var interpolate = nameNS == "transform" ? d3_interpolateTransform : d3_interpolate, name = d3.ns.qualify(nameNS);
+    function attrNull() {
+      this.removeAttribute(name);
+    }
+    function attrNullNS() {
+      this.removeAttributeNS(name.space, name.local);
+    }
+    function attrTween(b) {
+      return b == null ? attrNull : (b += "", function() {
+        var a = this.getAttribute(name), i;
+        return a !== b && (i = interpolate(a, b), function(t) {
+          this.setAttribute(name, i(t));
+        });
+      });
+    }
+    function attrTweenNS(b) {
+      return b == null ? attrNullNS : (b += "", function() {
+        var a = this.getAttributeNS(name.space, name.local), i;
+        return a !== b && (i = interpolate(a, b), function(t) {
+          this.setAttributeNS(name.space, name.local, i(t));
+        });
+      });
+    }
+    return d3_transition_tween(this, "attr." + nameNS, value, name.local ? attrTweenNS : attrTween);
+  };
+  d3_transitionPrototype.attrTween = function(nameNS, tween) {
+    var name = d3.ns.qualify(nameNS);
+    function attrTween(d, i) {
+      var f = tween.call(this, d, i, this.getAttribute(name));
+      return f && function(t) {
+        this.setAttribute(name, f(t));
+      };
+    }
+    function attrTweenNS(d, i) {
+      var f = tween.call(this, d, i, this.getAttributeNS(name.space, name.local));
+      return f && function(t) {
+        this.setAttributeNS(name.space, name.local, f(t));
+      };
+    }
+    return this.tween("attr." + nameNS, name.local ? attrTweenNS : attrTween);
+  };
+  d3_transitionPrototype.style = function(name, value, priority) {
+    var n = arguments.length;
+    if (n < 3) {
+      if (typeof name !== "string") {
+        if (n < 2) value = "";
+        for (priority in name) this.style(priority, name[priority], value);
+        return this;
+      }
+      priority = "";
+    }
+    function styleNull() {
+      this.style.removeProperty(name);
+    }
+    function styleString(b) {
+      return b == null ? styleNull : (b += "", function() {
+        var a = d3_window(this).getComputedStyle(this, null).getPropertyValue(name), i;
+        return a !== b && (i = d3_interpolate(a, b), function(t) {
+          this.style.setProperty(name, i(t), priority);
+        });
+      });
+    }
+    return d3_transition_tween(this, "style." + name, value, styleString);
+  };
+  d3_transitionPrototype.styleTween = function(name, tween, priority) {
+    if (arguments.length < 3) priority = "";
+    function styleTween(d, i) {
+      var f = tween.call(this, d, i, d3_window(this).getComputedStyle(this, null).getPropertyValue(name));
+      return f && function(t) {
+        this.style.setProperty(name, f(t), priority);
+      };
+    }
+    return this.tween("style." + name, styleTween);
+  };
+  d3_transitionPrototype.text = function(value) {
+    return d3_transition_tween(this, "text", value, d3_transition_text);
+  };
+  function d3_transition_text(b) {
+    if (b == null) b = "";
+    return function() {
+      this.textContent = b;
+    };
+  }
+  d3_transitionPrototype.remove = function() {
+    var ns = this.namespace;
+    return this.each("end.transition", function() {
+      var p;
+      if (this[ns].count < 2 && (p = this.parentNode)) p.removeChild(this);
+    });
+  };
+  d3_transitionPrototype.ease = function(value) {
+    var id = this.id, ns = this.namespace;
+    if (arguments.length < 1) return this.node()[ns][id].ease;
+    if (typeof value !== "function") value = d3.ease.apply(d3, arguments);
+    return d3_selection_each(this, function(node) {
+      node[ns][id].ease = value;
+    });
+  };
+  d3_transitionPrototype.delay = function(value) {
+    var id = this.id, ns = this.namespace;
+    if (arguments.length < 1) return this.node()[ns][id].delay;
+    return d3_selection_each(this, typeof value === "function" ? function(node, i, j) {
+      node[ns][id].delay = +value.call(node, node.__data__, i, j);
+    } : (value = +value, function(node) {
+      node[ns][id].delay = value;
+    }));
+  };
+  d3_transitionPrototype.duration = function(value) {
+    var id = this.id, ns = this.namespace;
+    if (arguments.length < 1) return this.node()[ns][id].duration;
+    return d3_selection_each(this, typeof value === "function" ? function(node, i, j) {
+      node[ns][id].duration = Math.max(1, value.call(node, node.__data__, i, j));
+    } : (value = Math.max(1, value), function(node) {
+      node[ns][id].duration = value;
+    }));
+  };
+  d3_transitionPrototype.each = function(type, listener) {
+    var id = this.id, ns = this.namespace;
+    if (arguments.length < 2) {
+      var inherit = d3_transitionInherit, inheritId = d3_transitionInheritId;
+      try {
+        d3_transitionInheritId = id;
+        d3_selection_each(this, function(node, i, j) {
+          d3_transitionInherit = node[ns][id];
+          type.call(node, node.__data__, i, j);
+        });
+      } finally {
+        d3_transitionInherit = inherit;
+        d3_transitionInheritId = inheritId;
+      }
+    } else {
+      d3_selection_each(this, function(node) {
+        var transition = node[ns][id];
+        (transition.event || (transition.event = d3.dispatch("start", "end", "interrupt"))).on(type, listener);
+      });
+    }
+    return this;
+  };
+  d3_transitionPrototype.transition = function() {
+    var id0 = this.id, id1 = ++d3_transitionId, ns = this.namespace, subgroups = [], subgroup, group, node, transition;
+    for (var j = 0, m = this.length; j < m; j++) {
+      subgroups.push(subgroup = []);
+      for (var group = this[j], i = 0, n = group.length; i < n; i++) {
+        if (node = group[i]) {
+          transition = node[ns][id0];
+          d3_transitionNode(node, i, ns, id1, {
+            time: transition.time,
+            ease: transition.ease,
+            delay: transition.delay + transition.duration,
+            duration: transition.duration
+          });
+        }
+        subgroup.push(node);
+      }
+    }
+    return d3_transition(subgroups, ns, id1);
+  };
+  function d3_transitionNamespace(name) {
+    return name == null ? "__transition__" : "__transition_" + name + "__";
+  }
+  function d3_transitionNode(node, i, ns, id, inherit) {
+    var lock = node[ns] || (node[ns] = {
+      active: 0,
+      count: 0
+    }), transition = lock[id], time, timer, duration, ease, tweens;
+    function schedule(elapsed) {
+      var delay = transition.delay;
+      timer.t = delay + time;
+      if (delay <= elapsed) return start(elapsed - delay);
+      timer.c = start;
+    }
+    function start(elapsed) {
+      var activeId = lock.active, active = lock[activeId];
+      if (active) {
+        active.timer.c = null;
+        active.timer.t = NaN;
+        --lock.count;
+        delete lock[activeId];
+        active.event && active.event.interrupt.call(node, node.__data__, active.index);
+      }
+      for (var cancelId in lock) {
+        if (+cancelId < id) {
+          var cancel = lock[cancelId];
+          cancel.timer.c = null;
+          cancel.timer.t = NaN;
+          --lock.count;
+          delete lock[cancelId];
+        }
+      }
+      timer.c = tick;
+      d3_timer(function() {
+        if (timer.c && tick(elapsed || 1)) {
+          timer.c = null;
+          timer.t = NaN;
+        }
+        return 1;
+      }, 0, time);
+      lock.active = id;
+      transition.event && transition.event.start.call(node, node.__data__, i);
+      tweens = [];
+      transition.tween.forEach(function(key, value) {
+        if (value = value.call(node, node.__data__, i)) {
+          tweens.push(value);
+        }
+      });
+      ease = transition.ease;
+      duration = transition.duration;
+    }
+    function tick(elapsed) {
+      var t = elapsed / duration, e = ease(t), n = tweens.length;
+      while (n > 0) {
+        tweens[--n].call(node, e);
+      }
+      if (t >= 1) {
+        transition.event && transition.event.end.call(node, node.__data__, i);
+        if (--lock.count) delete lock[id]; else delete node[ns];
+        return 1;
+      }
+    }
+    if (!transition) {
+      time = inherit.time;
+      timer = d3_timer(schedule, 0, time);
+      transition = lock[id] = {
+        tween: new d3_Map(),
+        time: time,
+        timer: timer,
+        delay: inherit.delay,
+        duration: inherit.duration,
+        ease: inherit.ease,
+        index: i
+      };
+      inherit = null;
+      ++lock.count;
+    }
+  }
+  d3.svg.axis = function() {
+    var scale = d3.scale.linear(), orient = d3_svg_axisDefaultOrient, innerTickSize = 6, outerTickSize = 6, tickPadding = 3, tickArguments_ = [ 10 ], tickValues = null, tickFormat_;
+    function axis(g) {
+      g.each(function() {
+        var g = d3.select(this);
+        var scale0 = this.__chart__ || scale, scale1 = this.__chart__ = scale.copy();
+        var ticks = tickValues == null ? scale1.ticks ? scale1.ticks.apply(scale1, tickArguments_) : scale1.domain() : tickValues, tickFormat = tickFormat_ == null ? scale1.tickFormat ? scale1.tickFormat.apply(scale1, tickArguments_) : d3_identity : tickFormat_, tick = g.selectAll(".tick").data(ticks, scale1), tickEnter = tick.enter().insert("g", ".domain").attr("class", "tick").style("opacity", ε), tickExit = d3.transition(tick.exit()).style("opacity", ε).remove(), tickUpdate = d3.transition(tick.order()).style("opacity", 1), tickSpacing = Math.max(innerTickSize, 0) + tickPadding, tickTransform;
+        var range = d3_scaleRange(scale1), path = g.selectAll(".domain").data([ 0 ]), pathUpdate = (path.enter().append("path").attr("class", "domain"), 
+        d3.transition(path));
+        tickEnter.append("line");
+        tickEnter.append("text");
+        var lineEnter = tickEnter.select("line"), lineUpdate = tickUpdate.select("line"), text = tick.select("text").text(tickFormat), textEnter = tickEnter.select("text"), textUpdate = tickUpdate.select("text"), sign = orient === "top" || orient === "left" ? -1 : 1, x1, x2, y1, y2;
+        if (orient === "bottom" || orient === "top") {
+          tickTransform = d3_svg_axisX, x1 = "x", y1 = "y", x2 = "x2", y2 = "y2";
+          text.attr("dy", sign < 0 ? "0em" : ".71em").style("text-anchor", "middle");
+          pathUpdate.attr("d", "M" + range[0] + "," + sign * outerTickSize + "V0H" + range[1] + "V" + sign * outerTickSize);
+        } else {
+          tickTransform = d3_svg_axisY, x1 = "y", y1 = "x", x2 = "y2", y2 = "x2";
+          text.attr("dy", ".32em").style("text-anchor", sign < 0 ? "end" : "start");
+          pathUpdate.attr("d", "M" + sign * outerTickSize + "," + range[0] + "H0V" + range[1] + "H" + sign * outerTickSize);
+        }
+        lineEnter.attr(y2, sign * innerTickSize);
+        textEnter.attr(y1, sign * tickSpacing);
+        lineUpdate.attr(x2, 0).attr(y2, sign * innerTickSize);
+        textUpdate.attr(x1, 0).attr(y1, sign * tickSpacing);
+        if (scale1.rangeBand) {
+          var x = scale1, dx = x.rangeBand() / 2;
+          scale0 = scale1 = function(d) {
+            return x(d) + dx;
+          };
+        } else if (scale0.rangeBand) {
+          scale0 = scale1;
+        } else {
+          tickExit.call(tickTransform, scale1, scale0);
+        }
+        tickEnter.call(tickTransform, scale0, scale1);
+        tickUpdate.call(tickTransform, scale1, scale1);
+      });
+    }
+    axis.scale = function(x) {
+      if (!arguments.length) return scale;
+      scale = x;
+      return axis;
+    };
+    axis.orient = function(x) {
+      if (!arguments.length) return orient;
+      orient = x in d3_svg_axisOrients ? x + "" : d3_svg_axisDefaultOrient;
+      return axis;
+    };
+    axis.ticks = function() {
+      if (!arguments.length) return tickArguments_;
+      tickArguments_ = d3_array(arguments);
+      return axis;
+    };
+    axis.tickValues = function(x) {
+      if (!arguments.length) return tickValues;
+      tickValues = x;
+      return axis;
+    };
+    axis.tickFormat = function(x) {
+      if (!arguments.length) return tickFormat_;
+      tickFormat_ = x;
+      return axis;
+    };
+    axis.tickSize = function(x) {
+      var n = arguments.length;
+      if (!n) return innerTickSize;
+      innerTickSize = +x;
+      outerTickSize = +arguments[n - 1];
+      return axis;
+    };
+    axis.innerTickSize = function(x) {
+      if (!arguments.length) return innerTickSize;
+      innerTickSize = +x;
+      return axis;
+    };
+    axis.outerTickSize = function(x) {
+      if (!arguments.length) return outerTickSize;
+      outerTickSize = +x;
+      return axis;
+    };
+    axis.tickPadding = function(x) {
+      if (!arguments.length) return tickPadding;
+      tickPadding = +x;
+      return axis;
+    };
+    axis.tickSubdivide = function() {
+      return arguments.length && axis;
+    };
+    return axis;
+  };
+  var d3_svg_axisDefaultOrient = "bottom", d3_svg_axisOrients = {
+    top: 1,
+    right: 1,
+    bottom: 1,
+    left: 1
+  };
+  function d3_svg_axisX(selection, x0, x1) {
+    selection.attr("transform", function(d) {
+      var v0 = x0(d);
+      return "translate(" + (isFinite(v0) ? v0 : x1(d)) + ",0)";
+    });
+  }
+  function d3_svg_axisY(selection, y0, y1) {
+    selection.attr("transform", function(d) {
+      var v0 = y0(d);
+      return "translate(0," + (isFinite(v0) ? v0 : y1(d)) + ")";
+    });
+  }
+  d3.svg.brush = function() {
+    var event = d3_eventDispatch(brush, "brushstart", "brush", "brushend"), x = null, y = null, xExtent = [ 0, 0 ], yExtent = [ 0, 0 ], xExtentDomain, yExtentDomain, xClamp = true, yClamp = true, resizes = d3_svg_brushResizes[0];
+    function brush(g) {
+      g.each(function() {
+        var g = d3.select(this).style("pointer-events", "all").style("-webkit-tap-highlight-color", "rgba(0,0,0,0)").on("mousedown.brush", brushstart).on("touchstart.brush", brushstart);
+        var background = g.selectAll(".background").data([ 0 ]);
+        background.enter().append("rect").attr("class", "background").style("visibility", "hidden").style("cursor", "crosshair");
+        g.selectAll(".extent").data([ 0 ]).enter().append("rect").attr("class", "extent").style("cursor", "move");
+        var resize = g.selectAll(".resize").data(resizes, d3_identity);
+        resize.exit().remove();
+        resize.enter().append("g").attr("class", function(d) {
+          return "resize " + d;
+        }).style("cursor", function(d) {
+          return d3_svg_brushCursor[d];
+        }).append("rect").attr("x", function(d) {
+          return /[ew]$/.test(d) ? -3 : null;
+        }).attr("y", function(d) {
+          return /^[ns]/.test(d) ? -3 : null;
+        }).attr("width", 6).attr("height", 6).style("visibility", "hidden");
+        resize.style("display", brush.empty() ? "none" : null);
+        var gUpdate = d3.transition(g), backgroundUpdate = d3.transition(background), range;
+        if (x) {
+          range = d3_scaleRange(x);
+          backgroundUpdate.attr("x", range[0]).attr("width", range[1] - range[0]);
+          redrawX(gUpdate);
+        }
+        if (y) {
+          range = d3_scaleRange(y);
+          backgroundUpdate.attr("y", range[0]).attr("height", range[1] - range[0]);
+          redrawY(gUpdate);
+        }
+        redraw(gUpdate);
+      });
+    }
+    brush.event = function(g) {
+      g.each(function() {
+        var event_ = event.of(this, arguments), extent1 = {
+          x: xExtent,
+          y: yExtent,
+          i: xExtentDomain,
+          j: yExtentDomain
+        }, extent0 = this.__chart__ || extent1;
+        this.__chart__ = extent1;
+        if (d3_transitionInheritId) {
+          d3.select(this).transition().each("start.brush", function() {
+            xExtentDomain = extent0.i;
+            yExtentDomain = extent0.j;
+            xExtent = extent0.x;
+            yExtent = extent0.y;
+            event_({
+              type: "brushstart"
+            });
+          }).tween("brush:brush", function() {
+            var xi = d3_interpolateArray(xExtent, extent1.x), yi = d3_interpolateArray(yExtent, extent1.y);
+            xExtentDomain = yExtentDomain = null;
+            return function(t) {
+              xExtent = extent1.x = xi(t);
+              yExtent = extent1.y = yi(t);
+              event_({
+                type: "brush",
+                mode: "resize"
+              });
+            };
+          }).each("end.brush", function() {
+            xExtentDomain = extent1.i;
+            yExtentDomain = extent1.j;
+            event_({
+              type: "brush",
+              mode: "resize"
+            });
+            event_({
+              type: "brushend"
+            });
+          });
+        } else {
+          event_({
+            type: "brushstart"
+          });
+          event_({
+            type: "brush",
+            mode: "resize"
+          });
+          event_({
+            type: "brushend"
+          });
+        }
+      });
+    };
+    function redraw(g) {
+      g.selectAll(".resize").attr("transform", function(d) {
+        return "translate(" + xExtent[+/e$/.test(d)] + "," + yExtent[+/^s/.test(d)] + ")";
+      });
+    }
+    function redrawX(g) {
+      g.select(".extent").attr("x", xExtent[0]);
+      g.selectAll(".extent,.n>rect,.s>rect").attr("width", xExtent[1] - xExtent[0]);
+    }
+    function redrawY(g) {
+      g.select(".extent").attr("y", yExtent[0]);
+      g.selectAll(".extent,.e>rect,.w>rect").attr("height", yExtent[1] - yExtent[0]);
+    }
+    function brushstart() {
+      var target = this, eventTarget = d3.select(d3.event.target), event_ = event.of(target, arguments), g = d3.select(target), resizing = eventTarget.datum(), resizingX = !/^(n|s)$/.test(resizing) && x, resizingY = !/^(e|w)$/.test(resizing) && y, dragging = eventTarget.classed("extent"), dragRestore = d3_event_dragSuppress(target), center, origin = d3.mouse(target), offset;
+      var w = d3.select(d3_window(target)).on("keydown.brush", keydown).on("keyup.brush", keyup);
+      if (d3.event.changedTouches) {
+        w.on("touchmove.brush", brushmove).on("touchend.brush", brushend);
+      } else {
+        w.on("mousemove.brush", brushmove).on("mouseup.brush", brushend);
+      }
+      g.interrupt().selectAll("*").interrupt();
+      if (dragging) {
+        origin[0] = xExtent[0] - origin[0];
+        origin[1] = yExtent[0] - origin[1];
+      } else if (resizing) {
+        var ex = +/w$/.test(resizing), ey = +/^n/.test(resizing);
+        offset = [ xExtent[1 - ex] - origin[0], yExtent[1 - ey] - origin[1] ];
+        origin[0] = xExtent[ex];
+        origin[1] = yExtent[ey];
+      } else if (d3.event.altKey) center = origin.slice();
+      g.style("pointer-events", "none").selectAll(".resize").style("display", null);
+      d3.select("body").style("cursor", eventTarget.style("cursor"));
+      event_({
+        type: "brushstart"
+      });
+      brushmove();
+      function keydown() {
+        if (d3.event.keyCode == 32) {
+          if (!dragging) {
+            center = null;
+            origin[0] -= xExtent[1];
+            origin[1] -= yExtent[1];
+            dragging = 2;
+          }
+          d3_eventPreventDefault();
+        }
+      }
+      function keyup() {
+        if (d3.event.keyCode == 32 && dragging == 2) {
+          origin[0] += xExtent[1];
+          origin[1] += yExtent[1];
+          dragging = 0;
+          d3_eventPreventDefault();
+        }
+      }
+      function brushmove() {
+        var point = d3.mouse(target), moved = false;
+        if (offset) {
+          point[0] += offset[0];
+          point[1] += offset[1];
+        }
+        if (!dragging) {
+          if (d3.event.altKey) {
+            if (!center) center = [ (xExtent[0] + xExtent[1]) / 2, (yExtent[0] + yExtent[1]) / 2 ];
+            origin[0] = xExtent[+(point[0] < center[0])];
+            origin[1] = yExtent[+(point[1] < center[1])];
+          } else center = null;
+        }
+        if (resizingX && move1(point, x, 0)) {
+          redrawX(g);
+          moved = true;
+        }
+        if (resizingY && move1(point, y, 1)) {
+          redrawY(g);
+          moved = true;
+        }
+        if (moved) {
+          redraw(g);
+          event_({
+            type: "brush",
+            mode: dragging ? "move" : "resize"
+          });
+        }
+      }
+      function move1(point, scale, i) {
+        var range = d3_scaleRange(scale), r0 = range[0], r1 = range[1], position = origin[i], extent = i ? yExtent : xExtent, size = extent[1] - extent[0], min, max;
+        if (dragging) {
+          r0 -= position;
+          r1 -= size + position;
+        }
+        min = (i ? yClamp : xClamp) ? Math.max(r0, Math.min(r1, point[i])) : point[i];
+        if (dragging) {
+          max = (min += position) + size;
+        } else {
+          if (center) position = Math.max(r0, Math.min(r1, 2 * center[i] - min));
+          if (position < min) {
+            max = min;
+            min = position;
+          } else {
+            max = position;
+          }
+        }
+        if (extent[0] != min || extent[1] != max) {
+          if (i) yExtentDomain = null; else xExtentDomain = null;
+          extent[0] = min;
+          extent[1] = max;
+          return true;
+        }
+      }
+      function brushend() {
+        brushmove();
+        g.style("pointer-events", "all").selectAll(".resize").style("display", brush.empty() ? "none" : null);
+        d3.select("body").style("cursor", null);
+        w.on("mousemove.brush", null).on("mouseup.brush", null).on("touchmove.brush", null).on("touchend.brush", null).on("keydown.brush", null).on("keyup.brush", null);
+        dragRestore();
+        event_({
+          type: "brushend"
+        });
+      }
+    }
+    brush.x = function(z) {
+      if (!arguments.length) return x;
+      x = z;
+      resizes = d3_svg_brushResizes[!x << 1 | !y];
+      return brush;
+    };
+    brush.y = function(z) {
+      if (!arguments.length) return y;
+      y = z;
+      resizes = d3_svg_brushResizes[!x << 1 | !y];
+      return brush;
+    };
+    brush.clamp = function(z) {
+      if (!arguments.length) return x && y ? [ xClamp, yClamp ] : x ? xClamp : y ? yClamp : null;
+      if (x && y) xClamp = !!z[0], yClamp = !!z[1]; else if (x) xClamp = !!z; else if (y) yClamp = !!z;
+      return brush;
+    };
+    brush.extent = function(z) {
+      var x0, x1, y0, y1, t;
+      if (!arguments.length) {
+        if (x) {
+          if (xExtentDomain) {
+            x0 = xExtentDomain[0], x1 = xExtentDomain[1];
+          } else {
+            x0 = xExtent[0], x1 = xExtent[1];
+            if (x.invert) x0 = x.invert(x0), x1 = x.invert(x1);
+            if (x1 < x0) t = x0, x0 = x1, x1 = t;
+          }
+        }
+        if (y) {
+          if (yExtentDomain) {
+            y0 = yExtentDomain[0], y1 = yExtentDomain[1];
+          } else {
+            y0 = yExtent[0], y1 = yExtent[1];
+            if (y.invert) y0 = y.invert(y0), y1 = y.invert(y1);
+            if (y1 < y0) t = y0, y0 = y1, y1 = t;
+          }
+        }
+        return x && y ? [ [ x0, y0 ], [ x1, y1 ] ] : x ? [ x0, x1 ] : y && [ y0, y1 ];
+      }
+      if (x) {
+        x0 = z[0], x1 = z[1];
+        if (y) x0 = x0[0], x1 = x1[0];
+        xExtentDomain = [ x0, x1 ];
+        if (x.invert) x0 = x(x0), x1 = x(x1);
+        if (x1 < x0) t = x0, x0 = x1, x1 = t;
+        if (x0 != xExtent[0] || x1 != xExtent[1]) xExtent = [ x0, x1 ];
+      }
+      if (y) {
+        y0 = z[0], y1 = z[1];
+        if (x) y0 = y0[1], y1 = y1[1];
+        yExtentDomain = [ y0, y1 ];
+        if (y.invert) y0 = y(y0), y1 = y(y1);
+        if (y1 < y0) t = y0, y0 = y1, y1 = t;
+        if (y0 != yExtent[0] || y1 != yExtent[1]) yExtent = [ y0, y1 ];
+      }
+      return brush;
+    };
+    brush.clear = function() {
+      if (!brush.empty()) {
+        xExtent = [ 0, 0 ], yExtent = [ 0, 0 ];
+        xExtentDomain = yExtentDomain = null;
+      }
+      return brush;
+    };
+    brush.empty = function() {
+      return !!x && xExtent[0] == xExtent[1] || !!y && yExtent[0] == yExtent[1];
+    };
+    return d3.rebind(brush, event, "on");
+  };
+  var d3_svg_brushCursor = {
+    n: "ns-resize",
+    e: "ew-resize",
+    s: "ns-resize",
+    w: "ew-resize",
+    nw: "nwse-resize",
+    ne: "nesw-resize",
+    se: "nwse-resize",
+    sw: "nesw-resize"
+  };
+  var d3_svg_brushResizes = [ [ "n", "e", "s", "w", "nw", "ne", "se", "sw" ], [ "e", "w" ], [ "n", "s" ], [] ];
+  var d3_time_format = d3_time.format = d3_locale_enUS.timeFormat;
+  var d3_time_formatUtc = d3_time_format.utc;
+  var d3_time_formatIso = d3_time_formatUtc("%Y-%m-%dT%H:%M:%S.%LZ");
+  d3_time_format.iso = Date.prototype.toISOString && +new Date("2000-01-01T00:00:00.000Z") ? d3_time_formatIsoNative : d3_time_formatIso;
+  function d3_time_formatIsoNative(date) {
+    return date.toISOString();
+  }
+  d3_time_formatIsoNative.parse = function(string) {
+    var date = new Date(string);
+    return isNaN(date) ? null : date;
+  };
+  d3_time_formatIsoNative.toString = d3_time_formatIso.toString;
+  d3_time.second = d3_time_interval(function(date) {
+    return new d3_date(Math.floor(date / 1e3) * 1e3);
+  }, function(date, offset) {
+    date.setTime(date.getTime() + Math.floor(offset) * 1e3);
+  }, function(date) {
+    return date.getSeconds();
+  });
+  d3_time.seconds = d3_time.second.range;
+  d3_time.seconds.utc = d3_time.second.utc.range;
+  d3_time.minute = d3_time_interval(function(date) {
+    return new d3_date(Math.floor(date / 6e4) * 6e4);
+  }, function(date, offset) {
+    date.setTime(date.getTime() + Math.floor(offset) * 6e4);
+  }, function(date) {
+    return date.getMinutes();
+  });
+  d3_time.minutes = d3_time.minute.range;
+  d3_time.minutes.utc = d3_time.minute.utc.range;
+  d3_time.hour = d3_time_interval(function(date) {
+    var timezone = date.getTimezoneOffset() / 60;
+    return new d3_date((Math.floor(date / 36e5 - timezone) + timezone) * 36e5);
+  }, function(date, offset) {
+    date.setTime(date.getTime() + Math.floor(offset) * 36e5);
+  }, function(date) {
+    return date.getHours();
+  });
+  d3_time.hours = d3_time.hour.range;
+  d3_time.hours.utc = d3_time.hour.utc.range;
+  d3_time.month = d3_time_interval(function(date) {
+    date = d3_time.day(date);
+    date.setDate(1);
+    return date;
+  }, function(date, offset) {
+    date.setMonth(date.getMonth() + offset);
+  }, function(date) {
+    return date.getMonth();
+  });
+  d3_time.months = d3_time.month.range;
+  d3_time.months.utc = d3_time.month.utc.range;
+  function d3_time_scale(linear, methods, format) {
+    function scale(x) {
+      return linear(x);
+    }
+    scale.invert = function(x) {
+      return d3_time_scaleDate(linear.invert(x));
+    };
+    scale.domain = function(x) {
+      if (!arguments.length) return linear.domain().map(d3_time_scaleDate);
+      linear.domain(x);
+      return scale;
+    };
+    function tickMethod(extent, count) {
+      var span = extent[1] - extent[0], target = span / count, i = d3.bisect(d3_time_scaleSteps, target);
+      return i == d3_time_scaleSteps.length ? [ methods.year, d3_scale_linearTickRange(extent.map(function(d) {
+        return d / 31536e6;
+      }), count)[2] ] : !i ? [ d3_time_scaleMilliseconds, d3_scale_linearTickRange(extent, count)[2] ] : methods[target / d3_time_scaleSteps[i - 1] < d3_time_scaleSteps[i] / target ? i - 1 : i];
+    }
+    scale.nice = function(interval, skip) {
+      var domain = scale.domain(), extent = d3_scaleExtent(domain), method = interval == null ? tickMethod(extent, 10) : typeof interval === "number" && tickMethod(extent, interval);
+      if (method) interval = method[0], skip = method[1];
+      function skipped(date) {
+        return !isNaN(date) && !interval.range(date, d3_time_scaleDate(+date + 1), skip).length;
+      }
+      return scale.domain(d3_scale_nice(domain, skip > 1 ? {
+        floor: function(date) {
+          while (skipped(date = interval.floor(date))) date = d3_time_scaleDate(date - 1);
+          return date;
+        },
+        ceil: function(date) {
+          while (skipped(date = interval.ceil(date))) date = d3_time_scaleDate(+date + 1);
+          return date;
+        }
+      } : interval));
+    };
+    scale.ticks = function(interval, skip) {
+      var extent = d3_scaleExtent(scale.domain()), method = interval == null ? tickMethod(extent, 10) : typeof interval === "number" ? tickMethod(extent, interval) : !interval.range && [ {
+        range: interval
+      }, skip ];
+      if (method) interval = method[0], skip = method[1];
+      return interval.range(extent[0], d3_time_scaleDate(+extent[1] + 1), skip < 1 ? 1 : skip);
+    };
+    scale.tickFormat = function() {
+      return format;
+    };
+    scale.copy = function() {
+      return d3_time_scale(linear.copy(), methods, format);
+    };
+    return d3_scale_linearRebind(scale, linear);
+  }
+  function d3_time_scaleDate(t) {
+    return new Date(t);
+  }
+  var d3_time_scaleSteps = [ 1e3, 5e3, 15e3, 3e4, 6e4, 3e5, 9e5, 18e5, 36e5, 108e5, 216e5, 432e5, 864e5, 1728e5, 6048e5, 2592e6, 7776e6, 31536e6 ];
+  var d3_time_scaleLocalMethods = [ [ d3_time.second, 1 ], [ d3_time.second, 5 ], [ d3_time.second, 15 ], [ d3_time.second, 30 ], [ d3_time.minute, 1 ], [ d3_time.minute, 5 ], [ d3_time.minute, 15 ], [ d3_time.minute, 30 ], [ d3_time.hour, 1 ], [ d3_time.hour, 3 ], [ d3_time.hour, 6 ], [ d3_time.hour, 12 ], [ d3_time.day, 1 ], [ d3_time.day, 2 ], [ d3_time.week, 1 ], [ d3_time.month, 1 ], [ d3_time.month, 3 ], [ d3_time.year, 1 ] ];
+  var d3_time_scaleLocalFormat = d3_time_format.multi([ [ ".%L", function(d) {
+    return d.getMilliseconds();
+  } ], [ ":%S", function(d) {
+    return d.getSeconds();
+  } ], [ "%I:%M", function(d) {
+    return d.getMinutes();
+  } ], [ "%I %p", function(d) {
+    return d.getHours();
+  } ], [ "%a %d", function(d) {
+    return d.getDay() && d.getDate() != 1;
+  } ], [ "%b %d", function(d) {
+    return d.getDate() != 1;
+  } ], [ "%B", function(d) {
+    return d.getMonth();
+  } ], [ "%Y", d3_true ] ]);
+  var d3_time_scaleMilliseconds = {
+    range: function(start, stop, step) {
+      return d3.range(Math.ceil(start / step) * step, +stop, step).map(d3_time_scaleDate);
+    },
+    floor: d3_identity,
+    ceil: d3_identity
+  };
+  d3_time_scaleLocalMethods.year = d3_time.year;
+  d3_time.scale = function() {
+    return d3_time_scale(d3.scale.linear(), d3_time_scaleLocalMethods, d3_time_scaleLocalFormat);
+  };
+  var d3_time_scaleUtcMethods = d3_time_scaleLocalMethods.map(function(m) {
+    return [ m[0].utc, m[1] ];
+  });
+  var d3_time_scaleUtcFormat = d3_time_formatUtc.multi([ [ ".%L", function(d) {
+    return d.getUTCMilliseconds();
+  } ], [ ":%S", function(d) {
+    return d.getUTCSeconds();
+  } ], [ "%I:%M", function(d) {
+    return d.getUTCMinutes();
+  } ], [ "%I %p", function(d) {
+    return d.getUTCHours();
+  } ], [ "%a %d", function(d) {
+    return d.getUTCDay() && d.getUTCDate() != 1;
+  } ], [ "%b %d", function(d) {
+    return d.getUTCDate() != 1;
+  } ], [ "%B", function(d) {
+    return d.getUTCMonth();
+  } ], [ "%Y", d3_true ] ]);
+  d3_time_scaleUtcMethods.year = d3_time.year.utc;
+  d3_time.scale.utc = function() {
+    return d3_time_scale(d3.scale.linear(), d3_time_scaleUtcMethods, d3_time_scaleUtcFormat);
+  };
+  d3.text = d3_xhrType(function(request) {
+    return request.responseText;
+  });
+  d3.json = function(url, callback) {
+    return d3_xhr(url, "application/json", d3_json, callback);
+  };
+  function d3_json(request) {
+    return JSON.parse(request.responseText);
+  }
+  d3.html = function(url, callback) {
+    return d3_xhr(url, "text/html", d3_html, callback);
+  };
+  function d3_html(request) {
+    var range = d3_document.createRange();
+    range.selectNode(d3_document.body);
+    return range.createContextualFragment(request.responseText);
+  }
+  d3.xml = d3_xhrType(function(request) {
+    return request.responseXML;
+  });
+  if (typeof define === "function" && define.amd) this.d3 = d3, define(d3); else if (typeof module === "object" && module.exports) module.exports = d3; else this.d3 = d3;
+}();
\ No newline at end of file
diff --git a/material-dashboard-lite-master/dist/js/getmdl-select.min.js b/material-dashboard-lite-master/dist/js/getmdl-select.min.js
new file mode 100644
index 0000000..b114afa
--- /dev/null
+++ b/material-dashboard-lite-master/dist/js/getmdl-select.min.js
@@ -0,0 +1,2 @@
+"use strict";window.onload=function(){getmdlSelect.init(".getmdl-select"),document.addEventListener("DOMNodeInserted",function(e){componentHandler.upgradeDom()},!1)};var getmdlSelect={addEventListeners:function(e){var t=e.querySelector("input"),n=e.querySelectorAll("li");[].forEach.call(n,function(e){e.onclick=function(){if(t.value=e.textContent,"createEvent"in document){var n=document.createEvent("HTMLEvents");n.initEvent("change",!1,!0),t.dispatchEvent(n)}else t.fireEvent("onchange")}})},init:function(e){var t=document.querySelectorAll(e);[].forEach.call(t,function(e){getmdlSelect.addEventListeners(e)})}};
+//# sourceMappingURL=getmdl-select.min.js.map
\ No newline at end of file
diff --git a/material-dashboard-lite-master/dist/js/material.js b/material-dashboard-lite-master/dist/js/material.js
new file mode 100644
index 0000000..a216d21
--- /dev/null
+++ b/material-dashboard-lite-master/dist/js/material.js
@@ -0,0 +1,3946 @@
+;(function() {
+"use strict";
+
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * A component handler interface using the revealing module design pattern.
+ * More details on this design pattern here:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @author Jason Mayes.
+ */
+/* exported componentHandler */
+
+// Pre-defining the componentHandler interface, for closure documentation and
+// static verification.
+var componentHandler = {
+  /**
+   * Searches existing DOM for elements of our component type and upgrades them
+   * if they have not already been upgraded.
+   *
+   * @param {string=} optJsClass the programatic name of the element class we
+   * need to create a new instance of.
+   * @param {string=} optCssClass the name of the CSS class elements of this
+   * type will have.
+   */
+  upgradeDom: function(optJsClass, optCssClass) {},
+  /**
+   * Upgrades a specific element rather than all in the DOM.
+   *
+   * @param {!Element} element The element we wish to upgrade.
+   * @param {string=} optJsClass Optional name of the class we want to upgrade
+   * the element to.
+   */
+  upgradeElement: function(element, optJsClass) {},
+  /**
+   * Upgrades a specific list of elements rather than all in the DOM.
+   *
+   * @param {!Element|!Array<!Element>|!NodeList|!HTMLCollection} elements
+   * The elements we wish to upgrade.
+   */
+  upgradeElements: function(elements) {},
+  /**
+   * Upgrades all registered components found in the current DOM. This is
+   * automatically called on window load.
+   */
+  upgradeAllRegistered: function() {},
+  /**
+   * Allows user to be alerted to any upgrades that are performed for a given
+   * component type
+   *
+   * @param {string} jsClass The class name of the MDL component we wish
+   * to hook into for any upgrades performed.
+   * @param {function(!HTMLElement)} callback The function to call upon an
+   * upgrade. This function should expect 1 parameter - the HTMLElement which
+   * got upgraded.
+   */
+  registerUpgradedCallback: function(jsClass, callback) {},
+  /**
+   * Registers a class for future use and attempts to upgrade existing DOM.
+   *
+   * @param {componentHandler.ComponentConfigPublic} config the registration configuration
+   */
+  register: function(config) {},
+  /**
+   * Downgrade either a given node, an array of nodes, or a NodeList.
+   *
+   * @param {!Node|!Array<!Node>|!NodeList} nodes
+   */
+  downgradeElements: function(nodes) {}
+};
+
+componentHandler = (function() {
+  'use strict';
+
+  /** @type {!Array<componentHandler.ComponentConfig>} */
+  var registeredComponents_ = [];
+
+  /** @type {!Array<componentHandler.Component>} */
+  var createdComponents_ = [];
+
+  var componentConfigProperty_ = 'mdlComponentConfigInternal_';
+
+  /**
+   * Searches registered components for a class we are interested in using.
+   * Optionally replaces a match with passed object if specified.
+   *
+   * @param {string} name The name of a class we want to use.
+   * @param {componentHandler.ComponentConfig=} optReplace Optional object to replace match with.
+   * @return {!Object|boolean}
+   * @private
+   */
+  function findRegisteredClass_(name, optReplace) {
+    for (var i = 0; i < registeredComponents_.length; i++) {
+      if (registeredComponents_[i].className === name) {
+        if (typeof optReplace !== 'undefined') {
+          registeredComponents_[i] = optReplace;
+        }
+        return registeredComponents_[i];
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Returns an array of the classNames of the upgraded classes on the element.
+   *
+   * @param {!Element} element The element to fetch data from.
+   * @return {!Array<string>}
+   * @private
+   */
+  function getUpgradedListOfElement_(element) {
+    var dataUpgraded = element.getAttribute('data-upgraded');
+    // Use `['']` as default value to conform the `,name,name...` style.
+    return dataUpgraded === null ? [''] : dataUpgraded.split(',');
+  }
+
+  /**
+   * Returns true if the given element has already been upgraded for the given
+   * class.
+   *
+   * @param {!Element} element The element we want to check.
+   * @param {string} jsClass The class to check for.
+   * @returns {boolean}
+   * @private
+   */
+  function isElementUpgraded_(element, jsClass) {
+    var upgradedList = getUpgradedListOfElement_(element);
+    return upgradedList.indexOf(jsClass) !== -1;
+  }
+
+  /**
+   * Searches existing DOM for elements of our component type and upgrades them
+   * if they have not already been upgraded.
+   *
+   * @param {string=} optJsClass the programatic name of the element class we
+   * need to create a new instance of.
+   * @param {string=} optCssClass the name of the CSS class elements of this
+   * type will have.
+   */
+  function upgradeDomInternal(optJsClass, optCssClass) {
+    if (typeof optJsClass === 'undefined' &&
+        typeof optCssClass === 'undefined') {
+      for (var i = 0; i < registeredComponents_.length; i++) {
+        upgradeDomInternal(registeredComponents_[i].className,
+            registeredComponents_[i].cssClass);
+      }
+    } else {
+      var jsClass = /** @type {string} */ (optJsClass);
+      if (typeof optCssClass === 'undefined') {
+        var registeredClass = findRegisteredClass_(jsClass);
+        if (registeredClass) {
+          optCssClass = registeredClass.cssClass;
+        }
+      }
+
+      var elements = document.querySelectorAll('.' + optCssClass);
+      for (var n = 0; n < elements.length; n++) {
+        upgradeElementInternal(elements[n], jsClass);
+      }
+    }
+  }
+
+  /**
+   * Upgrades a specific element rather than all in the DOM.
+   *
+   * @param {!Element} element The element we wish to upgrade.
+   * @param {string=} optJsClass Optional name of the class we want to upgrade
+   * the element to.
+   */
+  function upgradeElementInternal(element, optJsClass) {
+    // Verify argument type.
+    if (!(typeof element === 'object' && element instanceof Element)) {
+      throw new Error('Invalid argument provided to upgrade MDL element.');
+    }
+    var upgradedList = getUpgradedListOfElement_(element);
+    var classesToUpgrade = [];
+    // If jsClass is not provided scan the registered components to find the
+    // ones matching the element's CSS classList.
+    if (!optJsClass) {
+      var classList = element.classList;
+      registeredComponents_.forEach(function(component) {
+        // Match CSS & Not to be upgraded & Not upgraded.
+        if (classList.contains(component.cssClass) &&
+            classesToUpgrade.indexOf(component) === -1 &&
+            !isElementUpgraded_(element, component.className)) {
+          classesToUpgrade.push(component);
+        }
+      });
+    } else if (!isElementUpgraded_(element, optJsClass)) {
+      classesToUpgrade.push(findRegisteredClass_(optJsClass));
+    }
+
+    // Upgrade the element for each classes.
+    for (var i = 0, n = classesToUpgrade.length, registeredClass; i < n; i++) {
+      registeredClass = classesToUpgrade[i];
+      if (registeredClass) {
+        // Mark element as upgraded.
+        upgradedList.push(registeredClass.className);
+        element.setAttribute('data-upgraded', upgradedList.join(','));
+        var instance = new registeredClass.classConstructor(element);
+        instance[componentConfigProperty_] = registeredClass;
+        createdComponents_.push(instance);
+        // Call any callbacks the user has registered with this component type.
+        for (var j = 0, m = registeredClass.callbacks.length; j < m; j++) {
+          registeredClass.callbacks[j](element);
+        }
+
+        if (registeredClass.widget) {
+          // Assign per element instance for control over API
+          element[registeredClass.className] = instance;
+        }
+      } else {
+        throw new Error(
+          'Unable to find a registered component for the given class.');
+      }
+
+      var ev = document.createEvent('Events');
+      ev.initEvent('mdl-componentupgraded', true, true);
+      element.dispatchEvent(ev);
+    }
+  }
+
+  /**
+   * Upgrades a specific list of elements rather than all in the DOM.
+   *
+   * @param {!Element|!Array<!Element>|!NodeList|!HTMLCollection} elements
+   * The elements we wish to upgrade.
+   */
+  function upgradeElementsInternal(elements) {
+    if (!Array.isArray(elements)) {
+      if (typeof elements.item === 'function') {
+        elements = Array.prototype.slice.call(/** @type {Array} */ (elements));
+      } else {
+        elements = [elements];
+      }
+    }
+    for (var i = 0, n = elements.length, element; i < n; i++) {
+      element = elements[i];
+      if (element instanceof HTMLElement) {
+        upgradeElementInternal(element);
+        if (element.children.length > 0) {
+          upgradeElementsInternal(element.children);
+        }
+      }
+    }
+  }
+
+  /**
+   * Registers a class for future use and attempts to upgrade existing DOM.
+   *
+   * @param {componentHandler.ComponentConfigPublic} config
+   */
+  function registerInternal(config) {
+    // In order to support both Closure-compiled and uncompiled code accessing
+    // this method, we need to allow for both the dot and array syntax for
+    // property access. You'll therefore see the `foo.bar || foo['bar']`
+    // pattern repeated across this method.
+    var widgetMissing = (typeof config.widget === 'undefined' &&
+        typeof config['widget'] === 'undefined');
+    var widget = true;
+
+    if (!widgetMissing) {
+      widget = config.widget || config['widget'];
+    }
+
+    var newConfig = /** @type {componentHandler.ComponentConfig} */ ({
+      classConstructor: config.constructor || config['constructor'],
+      className: config.classAsString || config['classAsString'],
+      cssClass: config.cssClass || config['cssClass'],
+      widget: widget,
+      callbacks: []
+    });
+
+    registeredComponents_.forEach(function(item) {
+      if (item.cssClass === newConfig.cssClass) {
+        throw new Error('The provided cssClass has already been registered: ' + item.cssClass);
+      }
+      if (item.className === newConfig.className) {
+        throw new Error('The provided className has already been registered');
+      }
+    });
+
+    if (config.constructor.prototype
+        .hasOwnProperty(componentConfigProperty_)) {
+      throw new Error(
+          'MDL component classes must not have ' + componentConfigProperty_ +
+          ' defined as a property.');
+    }
+
+    var found = findRegisteredClass_(config.classAsString, newConfig);
+
+    if (!found) {
+      registeredComponents_.push(newConfig);
+    }
+  }
+
+  /**
+   * Allows user to be alerted to any upgrades that are performed for a given
+   * component type
+   *
+   * @param {string} jsClass The class name of the MDL component we wish
+   * to hook into for any upgrades performed.
+   * @param {function(!HTMLElement)} callback The function to call upon an
+   * upgrade. This function should expect 1 parameter - the HTMLElement which
+   * got upgraded.
+   */
+  function registerUpgradedCallbackInternal(jsClass, callback) {
+    var regClass = findRegisteredClass_(jsClass);
+    if (regClass) {
+      regClass.callbacks.push(callback);
+    }
+  }
+
+  /**
+   * Upgrades all registered components found in the current DOM. This is
+   * automatically called on window load.
+   */
+  function upgradeAllRegisteredInternal() {
+    for (var n = 0; n < registeredComponents_.length; n++) {
+      upgradeDomInternal(registeredComponents_[n].className);
+    }
+  }
+
+  /**
+   * Check the component for the downgrade method.
+   * Execute if found.
+   * Remove component from createdComponents list.
+   *
+   * @param {?componentHandler.Component} component
+   */
+  function deconstructComponentInternal(component) {
+    var componentIndex = createdComponents_.indexOf(component);
+    createdComponents_.splice(componentIndex, 1);
+
+    var upgrades = component.element_.getAttribute('data-upgraded').split(',');
+    var componentPlace = upgrades.indexOf(component[componentConfigProperty_].classAsString);
+    upgrades.splice(componentPlace, 1);
+    component.element_.setAttribute('data-upgraded', upgrades.join(','));
+
+    var ev = document.createEvent('Events');
+    ev.initEvent('mdl-componentdowngraded', true, true);
+    component.element_.dispatchEvent(ev);
+  }
+
+  /**
+   * Downgrade either a given node, an array of nodes, or a NodeList.
+   *
+   * @param {!Node|!Array<!Node>|!NodeList} nodes
+   */
+  function downgradeNodesInternal(nodes) {
+    /**
+     * Auxiliary function to downgrade a single node.
+     * @param  {!Node} node the node to be downgraded
+     */
+    var downgradeNode = function(node) {
+      createdComponents_.filter(function(item) {
+        return item.element_ === node;
+      }).forEach(deconstructComponentInternal);
+    };
+    if (nodes instanceof Array || nodes instanceof NodeList) {
+      for (var n = 0; n < nodes.length; n++) {
+        downgradeNode(nodes[n]);
+      }
+    } else if (nodes instanceof Node) {
+      downgradeNode(nodes);
+    } else {
+      throw new Error('Invalid argument provided to downgrade MDL nodes.');
+    }
+  }
+
+  // Now return the functions that should be made public with their publicly
+  // facing names...
+  return {
+    upgradeDom: upgradeDomInternal,
+    upgradeElement: upgradeElementInternal,
+    upgradeElements: upgradeElementsInternal,
+    upgradeAllRegistered: upgradeAllRegisteredInternal,
+    registerUpgradedCallback: registerUpgradedCallbackInternal,
+    register: registerInternal,
+    downgradeElements: downgradeNodesInternal
+  };
+})();
+
+/**
+ * Describes the type of a registered component type managed by
+ * componentHandler. Provided for benefit of the Closure compiler.
+ *
+ * @typedef {{
+ *   constructor: Function,
+ *   classAsString: string,
+ *   cssClass: string,
+ *   widget: (string|boolean|undefined)
+ * }}
+ */
+componentHandler.ComponentConfigPublic;  // jshint ignore:line
+
+/**
+ * Describes the type of a registered component type managed by
+ * componentHandler. Provided for benefit of the Closure compiler.
+ *
+ * @typedef {{
+ *   constructor: !Function,
+ *   className: string,
+ *   cssClass: string,
+ *   widget: (string|boolean),
+ *   callbacks: !Array<function(!HTMLElement)>
+ * }}
+ */
+componentHandler.ComponentConfig;  // jshint ignore:line
+
+/**
+ * Created component (i.e., upgraded element) type as managed by
+ * componentHandler. Provided for benefit of the Closure compiler.
+ *
+ * @typedef {{
+ *   element_: !HTMLElement,
+ *   className: string,
+ *   classAsString: string,
+ *   cssClass: string,
+ *   widget: string
+ * }}
+ */
+componentHandler.Component;  // jshint ignore:line
+
+// Export all symbols, for the benefit of Closure compiler.
+// No effect on uncompiled code.
+componentHandler['upgradeDom'] = componentHandler.upgradeDom;
+componentHandler['upgradeElement'] = componentHandler.upgradeElement;
+componentHandler['upgradeElements'] = componentHandler.upgradeElements;
+componentHandler['upgradeAllRegistered'] =
+    componentHandler.upgradeAllRegistered;
+componentHandler['registerUpgradedCallback'] =
+    componentHandler.registerUpgradedCallback;
+componentHandler['register'] = componentHandler.register;
+componentHandler['downgradeElements'] = componentHandler.downgradeElements;
+window.componentHandler = componentHandler;
+window['componentHandler'] = componentHandler;
+
+window.addEventListener('load', function() {
+  'use strict';
+
+  /**
+   * Performs a "Cutting the mustard" test. If the browser supports the features
+   * tested, adds a mdl-js class to the <html> element. It then upgrades all MDL
+   * components requiring JavaScript.
+   */
+  if ('classList' in document.createElement('div') &&
+      'querySelector' in document &&
+      'addEventListener' in window && Array.prototype.forEach) {
+    document.documentElement.classList.add('mdl-js');
+    componentHandler.upgradeAllRegistered();
+  } else {
+    /**
+     * Dummy function to avoid JS errors.
+     */
+    componentHandler.upgradeElement = function() {};
+    /**
+     * Dummy function to avoid JS errors.
+     */
+    componentHandler.register = function() {};
+  }
+});
+
+// Source: https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js
+// Adapted from https://gist.github.com/paulirish/1579671 which derived from
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+// requestAnimationFrame polyfill by Erik Möller.
+// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
+// MIT license
+if (!Date.now) {
+    /**
+   * Date.now polyfill.
+   * @return {number} the current Date
+   */
+    Date.now = function () {
+        return new Date().getTime();
+    };
+    Date['now'] = Date.now;
+}
+var vendors = [
+    'webkit',
+    'moz'
+];
+for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
+    var vp = vendors[i];
+    window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
+    window.cancelAnimationFrame = window[vp + 'CancelAnimationFrame'] || window[vp + 'CancelRequestAnimationFrame'];
+    window['requestAnimationFrame'] = window.requestAnimationFrame;
+    window['cancelAnimationFrame'] = window.cancelAnimationFrame;
+}
+if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
+    var lastTime = 0;
+    /**
+   * requestAnimationFrame polyfill.
+   * @param  {!Function} callback the callback function.
+   */
+    window.requestAnimationFrame = function (callback) {
+        var now = Date.now();
+        var nextTime = Math.max(lastTime + 16, now);
+        return setTimeout(function () {
+            callback(lastTime = nextTime);
+        }, nextTime - now);
+    };
+    window.cancelAnimationFrame = clearTimeout;
+    window['requestAnimationFrame'] = window.requestAnimationFrame;
+    window['cancelAnimationFrame'] = window.cancelAnimationFrame;
+}
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Button MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+var MaterialButton = function MaterialButton(element) {
+    this.element_ = element;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialButton'] = MaterialButton;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialButton.prototype.Constant_ = {};
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialButton.prototype.CssClasses_ = {
+    RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+    RIPPLE_CONTAINER: 'mdl-button__ripple-container',
+    RIPPLE: 'mdl-ripple'
+};
+/**
+   * Handle blur of element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialButton.prototype.blurHandler_ = function (event) {
+    if (event) {
+        this.element_.blur();
+    }
+};
+// Public methods.
+/**
+   * Disable button.
+   *
+   * @public
+   */
+MaterialButton.prototype.disable = function () {
+    this.element_.disabled = true;
+};
+MaterialButton.prototype['disable'] = MaterialButton.prototype.disable;
+/**
+   * Enable button.
+   *
+   * @public
+   */
+MaterialButton.prototype.enable = function () {
+    this.element_.disabled = false;
+};
+MaterialButton.prototype['enable'] = MaterialButton.prototype.enable;
+/**
+   * Initialize element.
+   */
+MaterialButton.prototype.init = function () {
+    if (this.element_) {
+        if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+            var rippleContainer = document.createElement('span');
+            rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+            this.rippleElement_ = document.createElement('span');
+            this.rippleElement_.classList.add(this.CssClasses_.RIPPLE);
+            rippleContainer.appendChild(this.rippleElement_);
+            this.boundRippleBlurHandler = this.blurHandler_.bind(this);
+            this.rippleElement_.addEventListener('mouseup', this.boundRippleBlurHandler);
+            this.element_.appendChild(rippleContainer);
+        }
+        this.boundButtonBlurHandler = this.blurHandler_.bind(this);
+        this.element_.addEventListener('mouseup', this.boundButtonBlurHandler);
+        this.element_.addEventListener('mouseleave', this.boundButtonBlurHandler);
+    }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialButton,
+    classAsString: 'MaterialButton',
+    cssClass: 'mdl-js-button',
+    widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Checkbox MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+var MaterialCheckbox = function MaterialCheckbox(element) {
+    this.element_ = element;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialCheckbox'] = MaterialCheckbox;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialCheckbox.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialCheckbox.prototype.CssClasses_ = {
+    INPUT: 'mdl-checkbox__input',
+    BOX_OUTLINE: 'mdl-checkbox__box-outline',
+    FOCUS_HELPER: 'mdl-checkbox__focus-helper',
+    TICK_OUTLINE: 'mdl-checkbox__tick-outline',
+    RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+    RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+    RIPPLE_CONTAINER: 'mdl-checkbox__ripple-container',
+    RIPPLE_CENTER: 'mdl-ripple--center',
+    RIPPLE: 'mdl-ripple',
+    IS_FOCUSED: 'is-focused',
+    IS_DISABLED: 'is-disabled',
+    IS_CHECKED: 'is-checked',
+    IS_UPGRADED: 'is-upgraded'
+};
+/**
+   * Handle change of state.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialCheckbox.prototype.onChange_ = function (event) {
+    this.updateClasses_();
+};
+/**
+   * Handle focus of element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialCheckbox.prototype.onFocus_ = function (event) {
+    this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+};
+/**
+   * Handle lost focus of element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialCheckbox.prototype.onBlur_ = function (event) {
+    this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+};
+/**
+   * Handle mouseup.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialCheckbox.prototype.onMouseUp_ = function (event) {
+    this.blur_();
+};
+/**
+   * Handle class updates.
+   *
+   * @private
+   */
+MaterialCheckbox.prototype.updateClasses_ = function () {
+    this.checkDisabled();
+    this.checkToggleState();
+};
+/**
+   * Add blur.
+   *
+   * @private
+   */
+MaterialCheckbox.prototype.blur_ = function () {
+    // TODO: figure out why there's a focus event being fired after our blur,
+    // so that we can avoid this hack.
+    window.setTimeout(function () {
+        this.inputElement_.blur();
+    }.bind(this), this.Constant_.TINY_TIMEOUT);
+};
+// Public methods.
+/**
+   * Check the inputs toggle state and update display.
+   *
+   * @public
+   */
+MaterialCheckbox.prototype.checkToggleState = function () {
+    if (this.inputElement_.checked) {
+        this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+    } else {
+        this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+    }
+};
+MaterialCheckbox.prototype['checkToggleState'] = MaterialCheckbox.prototype.checkToggleState;
+/**
+   * Check the inputs disabled state and update display.
+   *
+   * @public
+   */
+MaterialCheckbox.prototype.checkDisabled = function () {
+    if (this.inputElement_.disabled) {
+        this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+    } else {
+        this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+    }
+};
+MaterialCheckbox.prototype['checkDisabled'] = MaterialCheckbox.prototype.checkDisabled;
+/**
+   * Disable checkbox.
+   *
+   * @public
+   */
+MaterialCheckbox.prototype.disable = function () {
+    this.inputElement_.disabled = true;
+    this.updateClasses_();
+};
+MaterialCheckbox.prototype['disable'] = MaterialCheckbox.prototype.disable;
+/**
+   * Enable checkbox.
+   *
+   * @public
+   */
+MaterialCheckbox.prototype.enable = function () {
+    this.inputElement_.disabled = false;
+    this.updateClasses_();
+};
+MaterialCheckbox.prototype['enable'] = MaterialCheckbox.prototype.enable;
+/**
+   * Check checkbox.
+   *
+   * @public
+   */
+MaterialCheckbox.prototype.check = function () {
+    this.inputElement_.checked = true;
+    this.updateClasses_();
+};
+MaterialCheckbox.prototype['check'] = MaterialCheckbox.prototype.check;
+/**
+   * Uncheck checkbox.
+   *
+   * @public
+   */
+MaterialCheckbox.prototype.uncheck = function () {
+    this.inputElement_.checked = false;
+    this.updateClasses_();
+};
+MaterialCheckbox.prototype['uncheck'] = MaterialCheckbox.prototype.uncheck;
+/**
+   * Initialize element.
+   */
+MaterialCheckbox.prototype.init = function () {
+    if (this.element_) {
+        this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+        var boxOutline = document.createElement('span');
+        boxOutline.classList.add(this.CssClasses_.BOX_OUTLINE);
+        var tickContainer = document.createElement('span');
+        tickContainer.classList.add(this.CssClasses_.FOCUS_HELPER);
+        var tickOutline = document.createElement('span');
+        tickOutline.classList.add(this.CssClasses_.TICK_OUTLINE);
+        boxOutline.appendChild(tickOutline);
+        this.element_.appendChild(tickContainer);
+        this.element_.appendChild(boxOutline);
+        if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+            this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+            this.rippleContainerElement_ = document.createElement('span');
+            this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+            this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+            this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
+            this.boundRippleMouseUp = this.onMouseUp_.bind(this);
+            this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
+            var ripple = document.createElement('span');
+            ripple.classList.add(this.CssClasses_.RIPPLE);
+            this.rippleContainerElement_.appendChild(ripple);
+            this.element_.appendChild(this.rippleContainerElement_);
+        }
+        this.boundInputOnChange = this.onChange_.bind(this);
+        this.boundInputOnFocus = this.onFocus_.bind(this);
+        this.boundInputOnBlur = this.onBlur_.bind(this);
+        this.boundElementMouseUp = this.onMouseUp_.bind(this);
+        this.inputElement_.addEventListener('change', this.boundInputOnChange);
+        this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
+        this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
+        this.element_.addEventListener('mouseup', this.boundElementMouseUp);
+        this.updateClasses_();
+        this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+    }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialCheckbox,
+    classAsString: 'MaterialCheckbox',
+    cssClass: 'mdl-js-checkbox',
+    widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for icon toggle MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+var MaterialIconToggle = function MaterialIconToggle(element) {
+    this.element_ = element;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialIconToggle'] = MaterialIconToggle;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialIconToggle.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialIconToggle.prototype.CssClasses_ = {
+    INPUT: 'mdl-icon-toggle__input',
+    JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+    RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+    RIPPLE_CONTAINER: 'mdl-icon-toggle__ripple-container',
+    RIPPLE_CENTER: 'mdl-ripple--center',
+    RIPPLE: 'mdl-ripple',
+    IS_FOCUSED: 'is-focused',
+    IS_DISABLED: 'is-disabled',
+    IS_CHECKED: 'is-checked'
+};
+/**
+   * Handle change of state.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialIconToggle.prototype.onChange_ = function (event) {
+    this.updateClasses_();
+};
+/**
+   * Handle focus of element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialIconToggle.prototype.onFocus_ = function (event) {
+    this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+};
+/**
+   * Handle lost focus of element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialIconToggle.prototype.onBlur_ = function (event) {
+    this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+};
+/**
+   * Handle mouseup.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialIconToggle.prototype.onMouseUp_ = function (event) {
+    this.blur_();
+};
+/**
+   * Handle class updates.
+   *
+   * @private
+   */
+MaterialIconToggle.prototype.updateClasses_ = function () {
+    this.checkDisabled();
+    this.checkToggleState();
+};
+/**
+   * Add blur.
+   *
+   * @private
+   */
+MaterialIconToggle.prototype.blur_ = function () {
+    // TODO: figure out why there's a focus event being fired after our blur,
+    // so that we can avoid this hack.
+    window.setTimeout(function () {
+        this.inputElement_.blur();
+    }.bind(this), this.Constant_.TINY_TIMEOUT);
+};
+// Public methods.
+/**
+   * Check the inputs toggle state and update display.
+   *
+   * @public
+   */
+MaterialIconToggle.prototype.checkToggleState = function () {
+    if (this.inputElement_.checked) {
+        this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+    } else {
+        this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+    }
+};
+MaterialIconToggle.prototype['checkToggleState'] = MaterialIconToggle.prototype.checkToggleState;
+/**
+   * Check the inputs disabled state and update display.
+   *
+   * @public
+   */
+MaterialIconToggle.prototype.checkDisabled = function () {
+    if (this.inputElement_.disabled) {
+        this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+    } else {
+        this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+    }
+};
+MaterialIconToggle.prototype['checkDisabled'] = MaterialIconToggle.prototype.checkDisabled;
+/**
+   * Disable icon toggle.
+   *
+   * @public
+   */
+MaterialIconToggle.prototype.disable = function () {
+    this.inputElement_.disabled = true;
+    this.updateClasses_();
+};
+MaterialIconToggle.prototype['disable'] = MaterialIconToggle.prototype.disable;
+/**
+   * Enable icon toggle.
+   *
+   * @public
+   */
+MaterialIconToggle.prototype.enable = function () {
+    this.inputElement_.disabled = false;
+    this.updateClasses_();
+};
+MaterialIconToggle.prototype['enable'] = MaterialIconToggle.prototype.enable;
+/**
+   * Check icon toggle.
+   *
+   * @public
+   */
+MaterialIconToggle.prototype.check = function () {
+    this.inputElement_.checked = true;
+    this.updateClasses_();
+};
+MaterialIconToggle.prototype['check'] = MaterialIconToggle.prototype.check;
+/**
+   * Uncheck icon toggle.
+   *
+   * @public
+   */
+MaterialIconToggle.prototype.uncheck = function () {
+    this.inputElement_.checked = false;
+    this.updateClasses_();
+};
+MaterialIconToggle.prototype['uncheck'] = MaterialIconToggle.prototype.uncheck;
+/**
+   * Initialize element.
+   */
+MaterialIconToggle.prototype.init = function () {
+    if (this.element_) {
+        this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+        if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
+            this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+            this.rippleContainerElement_ = document.createElement('span');
+            this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+            this.rippleContainerElement_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT);
+            this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
+            this.boundRippleMouseUp = this.onMouseUp_.bind(this);
+            this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
+            var ripple = document.createElement('span');
+            ripple.classList.add(this.CssClasses_.RIPPLE);
+            this.rippleContainerElement_.appendChild(ripple);
+            this.element_.appendChild(this.rippleContainerElement_);
+        }
+        this.boundInputOnChange = this.onChange_.bind(this);
+        this.boundInputOnFocus = this.onFocus_.bind(this);
+        this.boundInputOnBlur = this.onBlur_.bind(this);
+        this.boundElementOnMouseUp = this.onMouseUp_.bind(this);
+        this.inputElement_.addEventListener('change', this.boundInputOnChange);
+        this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
+        this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
+        this.element_.addEventListener('mouseup', this.boundElementOnMouseUp);
+        this.updateClasses_();
+        this.element_.classList.add('is-upgraded');
+    }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialIconToggle,
+    classAsString: 'MaterialIconToggle',
+    cssClass: 'mdl-js-icon-toggle',
+    widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for dropdown MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+var MaterialMenu = function MaterialMenu(element) {
+    this.element_ = element;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialMenu'] = MaterialMenu;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialMenu.prototype.Constant_ = {
+    // Total duration of the menu animation.
+    TRANSITION_DURATION_SECONDS: 0.3,
+    // The fraction of the total duration we want to use for menu item animations.
+    TRANSITION_DURATION_FRACTION: 0.8,
+    // How long the menu stays open after choosing an option (so the user can see
+    // the ripple).
+    CLOSE_TIMEOUT: 150
+};
+/**
+   * Keycodes, for code readability.
+   *
+   * @enum {number}
+   * @private
+   */
+MaterialMenu.prototype.Keycodes_ = {
+    ENTER: 13,
+    ESCAPE: 27,
+    SPACE: 32,
+    UP_ARROW: 38,
+    DOWN_ARROW: 40
+};
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialMenu.prototype.CssClasses_ = {
+    CONTAINER: 'mdl-menu__container',
+    OUTLINE: 'mdl-menu__outline',
+    ITEM: 'mdl-menu__item',
+    ITEM_RIPPLE_CONTAINER: 'mdl-menu__item-ripple-container',
+    RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+    RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+    RIPPLE: 'mdl-ripple',
+    // Statuses
+    IS_UPGRADED: 'is-upgraded',
+    IS_VISIBLE: 'is-visible',
+    IS_ANIMATING: 'is-animating',
+    // Alignment options
+    BOTTOM_LEFT: 'mdl-menu--bottom-left',
+    // This is the default.
+    BOTTOM_RIGHT: 'mdl-menu--bottom-right',
+    TOP_LEFT: 'mdl-menu--top-left',
+    TOP_RIGHT: 'mdl-menu--top-right',
+    UNALIGNED: 'mdl-menu--unaligned'
+};
+/**
+   * Initialize element.
+   */
+MaterialMenu.prototype.init = function () {
+    if (this.element_) {
+        // Create container for the menu.
+        var container = document.createElement('div');
+        container.classList.add(this.CssClasses_.CONTAINER);
+        this.element_.parentElement.insertBefore(container, this.element_);
+        this.element_.parentElement.removeChild(this.element_);
+        container.appendChild(this.element_);
+        this.container_ = container;
+        // Create outline for the menu (shadow and background).
+        var outline = document.createElement('div');
+        outline.classList.add(this.CssClasses_.OUTLINE);
+        this.outline_ = outline;
+        container.insertBefore(outline, this.element_);
+        // Find the "for" element and bind events to it.
+        var forElId = this.element_.getAttribute('for') || this.element_.getAttribute('data-mdl-for');
+        var forEl = null;
+        if (forElId) {
+            forEl = document.getElementById(forElId);
+            if (forEl) {
+                this.forElement_ = forEl;
+                forEl.addEventListener('click', this.handleForClick_.bind(this));
+                forEl.addEventListener('keydown', this.handleForKeyboardEvent_.bind(this));
+            }
+        }
+        var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+        this.boundItemKeydown_ = this.handleItemKeyboardEvent_.bind(this);
+        this.boundItemClick_ = this.handleItemClick_.bind(this);
+        for (var i = 0; i < items.length; i++) {
+            // Add a listener to each menu item.
+            items[i].addEventListener('click', this.boundItemClick_);
+            // Add a tab index to each menu item.
+            items[i].tabIndex = '-1';
+            // Add a keyboard listener to each menu item.
+            items[i].addEventListener('keydown', this.boundItemKeydown_);
+        }
+        // Add ripple classes to each item, if the user has enabled ripples.
+        if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+            this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+            for (i = 0; i < items.length; i++) {
+                var item = items[i];
+                var rippleContainer = document.createElement('span');
+                rippleContainer.classList.add(this.CssClasses_.ITEM_RIPPLE_CONTAINER);
+                var ripple = document.createElement('span');
+                ripple.classList.add(this.CssClasses_.RIPPLE);
+                rippleContainer.appendChild(ripple);
+                item.appendChild(rippleContainer);
+                item.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+            }
+        }
+        // Copy alignment classes to the container, so the outline can use them.
+        if (this.element_.classList.contains(this.CssClasses_.BOTTOM_LEFT)) {
+            this.outline_.classList.add(this.CssClasses_.BOTTOM_LEFT);
+        }
+        if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+            this.outline_.classList.add(this.CssClasses_.BOTTOM_RIGHT);
+        }
+        if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+            this.outline_.classList.add(this.CssClasses_.TOP_LEFT);
+        }
+        if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+            this.outline_.classList.add(this.CssClasses_.TOP_RIGHT);
+        }
+        if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+            this.outline_.classList.add(this.CssClasses_.UNALIGNED);
+        }
+        container.classList.add(this.CssClasses_.IS_UPGRADED);
+    }
+};
+/**
+   * Handles a click on the "for" element, by positioning the menu and then
+   * toggling it.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+MaterialMenu.prototype.handleForClick_ = function (evt) {
+    if (this.element_ && this.forElement_) {
+        var rect = this.forElement_.getBoundingClientRect();
+        var forRect = this.forElement_.parentElement.getBoundingClientRect();
+        if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+        } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+            // Position below the "for" element, aligned to its right.
+            this.container_.style.right = forRect.right - rect.right + 'px';
+            this.container_.style.top = this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
+        } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+            // Position above the "for" element, aligned to its left.
+            this.container_.style.left = this.forElement_.offsetLeft + 'px';
+            this.container_.style.bottom = forRect.bottom - rect.top + 'px';
+        } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+            // Position above the "for" element, aligned to its right.
+            this.container_.style.right = forRect.right - rect.right + 'px';
+            this.container_.style.bottom = forRect.bottom - rect.top + 'px';
+        } else {
+            // Default: position below the "for" element, aligned to its left.
+            this.container_.style.left = this.forElement_.offsetLeft + 'px';
+            this.container_.style.top = this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
+        }
+    }
+    this.toggle(evt);
+};
+/**
+   * Handles a keyboard event on the "for" element.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+MaterialMenu.prototype.handleForKeyboardEvent_ = function (evt) {
+    if (this.element_ && this.container_ && this.forElement_) {
+        var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM + ':not([disabled])');
+        if (items && items.length > 0 && this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+            if (evt.keyCode === this.Keycodes_.UP_ARROW) {
+                evt.preventDefault();
+                items[items.length - 1].focus();
+            } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
+                evt.preventDefault();
+                items[0].focus();
+            }
+        }
+    }
+};
+/**
+   * Handles a keyboard event on an item.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+MaterialMenu.prototype.handleItemKeyboardEvent_ = function (evt) {
+    if (this.element_ && this.container_) {
+        var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM + ':not([disabled])');
+        if (items && items.length > 0 && this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+            var currentIndex = Array.prototype.slice.call(items).indexOf(evt.target);
+            if (evt.keyCode === this.Keycodes_.UP_ARROW) {
+                evt.preventDefault();
+                if (currentIndex > 0) {
+                    items[currentIndex - 1].focus();
+                } else {
+                    items[items.length - 1].focus();
+                }
+            } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
+                evt.preventDefault();
+                if (items.length > currentIndex + 1) {
+                    items[currentIndex + 1].focus();
+                } else {
+                    items[0].focus();
+                }
+            } else if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) {
+                evt.preventDefault();
+                // Send mousedown and mouseup to trigger ripple.
+                var e = new MouseEvent('mousedown');
+                evt.target.dispatchEvent(e);
+                e = new MouseEvent('mouseup');
+                evt.target.dispatchEvent(e);
+                // Send click.
+                evt.target.click();
+            } else if (evt.keyCode === this.Keycodes_.ESCAPE) {
+                evt.preventDefault();
+                this.hide();
+            }
+        }
+    }
+};
+/**
+   * Handles a click event on an item.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+MaterialMenu.prototype.handleItemClick_ = function (evt) {
+    if (evt.target.hasAttribute('disabled')) {
+        evt.stopPropagation();
+    } else {
+        // Wait some time before closing menu, so the user can see the ripple.
+        this.closing_ = true;
+        window.setTimeout(function (evt) {
+            this.hide();
+            this.closing_ = false;
+        }.bind(this), this.Constant_.CLOSE_TIMEOUT);
+    }
+};
+/**
+   * Calculates the initial clip (for opening the menu) or final clip (for closing
+   * it), and applies it. This allows us to animate from or to the correct point,
+   * that is, the point it's aligned to in the "for" element.
+   *
+   * @param {number} height Height of the clip rectangle
+   * @param {number} width Width of the clip rectangle
+   * @private
+   */
+MaterialMenu.prototype.applyClip_ = function (height, width) {
+    if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+        // Do not clip.
+        this.element_.style.clip = '';
+    } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+        // Clip to the top right corner of the menu.
+        this.element_.style.clip = 'rect(0 ' + width + 'px ' + '0 ' + width + 'px)';
+    } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+        // Clip to the bottom left corner of the menu.
+        this.element_.style.clip = 'rect(' + height + 'px 0 ' + height + 'px 0)';
+    } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+        // Clip to the bottom right corner of the menu.
+        this.element_.style.clip = 'rect(' + height + 'px ' + width + 'px ' + height + 'px ' + width + 'px)';
+    } else {
+        // Default: do not clip (same as clipping to the top left corner).
+        this.element_.style.clip = '';
+    }
+};
+/**
+   * Cleanup function to remove animation listeners.
+   *
+   * @param {Event} evt
+   * @private
+   */
+MaterialMenu.prototype.removeAnimationEndListener_ = function (evt) {
+    evt.target.classList.remove(MaterialMenu.prototype.CssClasses_.IS_ANIMATING);
+};
+/**
+   * Adds an event listener to clean up after the animation ends.
+   *
+   * @private
+   */
+MaterialMenu.prototype.addAnimationEndListener_ = function () {
+    this.element_.addEventListener('transitionend', this.removeAnimationEndListener_);
+    this.element_.addEventListener('webkitTransitionEnd', this.removeAnimationEndListener_);
+};
+/**
+   * Displays the menu.
+   *
+   * @public
+   */
+MaterialMenu.prototype.show = function (evt) {
+    if (this.element_ && this.container_ && this.outline_) {
+        // Measure the inner element.
+        var height = this.element_.getBoundingClientRect().height;
+        var width = this.element_.getBoundingClientRect().width;
+        // Apply the inner element's size to the container and outline.
+        this.container_.style.width = width + 'px';
+        this.container_.style.height = height + 'px';
+        this.outline_.style.width = width + 'px';
+        this.outline_.style.height = height + 'px';
+        var transitionDuration = this.Constant_.TRANSITION_DURATION_SECONDS * this.Constant_.TRANSITION_DURATION_FRACTION;
+        // Calculate transition delays for individual menu items, so that they fade
+        // in one at a time.
+        var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+        for (var i = 0; i < items.length; i++) {
+            var itemDelay = null;
+            if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT) || this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+                itemDelay = (height - items[i].offsetTop - items[i].offsetHeight) / height * transitionDuration + 's';
+            } else {
+                itemDelay = items[i].offsetTop / height * transitionDuration + 's';
+            }
+            items[i].style.transitionDelay = itemDelay;
+        }
+        // Apply the initial clip to the text before we start animating.
+        this.applyClip_(height, width);
+        // Wait for the next frame, turn on animation, and apply the final clip.
+        // Also make it visible. This triggers the transitions.
+        window.requestAnimationFrame(function () {
+            this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
+            this.element_.style.clip = 'rect(0 ' + width + 'px ' + height + 'px 0)';
+            this.container_.classList.add(this.CssClasses_.IS_VISIBLE);
+        }.bind(this));
+        // Clean up after the animation is complete.
+        this.addAnimationEndListener_();
+        // Add a click listener to the document, to close the menu.
+        var callback = function (e) {
+            // Check to see if the document is processing the same event that
+            // displayed the menu in the first place. If so, do nothing.
+            // Also check to see if the menu is in the process of closing itself, and
+            // do nothing in that case.
+            // Also check if the clicked element is a menu item
+            // if so, do nothing.
+            if (e !== evt && !this.closing_ && e.target.parentNode !== this.element_) {
+                document.removeEventListener('click', callback);
+                this.hide();
+            }
+        }.bind(this);
+        document.addEventListener('click', callback);
+    }
+};
+MaterialMenu.prototype['show'] = MaterialMenu.prototype.show;
+/**
+   * Hides the menu.
+   *
+   * @public
+   */
+MaterialMenu.prototype.hide = function () {
+    if (this.element_ && this.container_ && this.outline_) {
+        var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+        // Remove all transition delays; menu items fade out concurrently.
+        for (var i = 0; i < items.length; i++) {
+            items[i].style.removeProperty('transition-delay');
+        }
+        // Measure the inner element.
+        var rect = this.element_.getBoundingClientRect();
+        var height = rect.height;
+        var width = rect.width;
+        // Turn on animation, and apply the final clip. Also make invisible.
+        // This triggers the transitions.
+        this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
+        this.applyClip_(height, width);
+        this.container_.classList.remove(this.CssClasses_.IS_VISIBLE);
+        // Clean up after the animation is complete.
+        this.addAnimationEndListener_();
+    }
+};
+MaterialMenu.prototype['hide'] = MaterialMenu.prototype.hide;
+/**
+   * Displays or hides the menu, depending on current state.
+   *
+   * @public
+   */
+MaterialMenu.prototype.toggle = function (evt) {
+    if (this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+        this.hide();
+    } else {
+        this.show(evt);
+    }
+};
+MaterialMenu.prototype['toggle'] = MaterialMenu.prototype.toggle;
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialMenu,
+    classAsString: 'MaterialMenu',
+    cssClass: 'mdl-js-menu',
+    widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Progress MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+var MaterialProgress = function MaterialProgress(element) {
+    this.element_ = element;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialProgress'] = MaterialProgress;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialProgress.prototype.Constant_ = {};
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialProgress.prototype.CssClasses_ = { INDETERMINATE_CLASS: 'mdl-progress__indeterminate' };
+/**
+   * Set the current progress of the progressbar.
+   *
+   * @param {number} p Percentage of the progress (0-100)
+   * @public
+   */
+MaterialProgress.prototype.setProgress = function (p) {
+    if (this.element_.classList.contains(this.CssClasses_.INDETERMINATE_CLASS)) {
+        return;
+    }
+    this.progressbar_.style.width = p + '%';
+};
+MaterialProgress.prototype['setProgress'] = MaterialProgress.prototype.setProgress;
+/**
+   * Set the current progress of the buffer.
+   *
+   * @param {number} p Percentage of the buffer (0-100)
+   * @public
+   */
+MaterialProgress.prototype.setBuffer = function (p) {
+    this.bufferbar_.style.width = p + '%';
+    this.auxbar_.style.width = 100 - p + '%';
+};
+MaterialProgress.prototype['setBuffer'] = MaterialProgress.prototype.setBuffer;
+/**
+   * Initialize element.
+   */
+MaterialProgress.prototype.init = function () {
+    if (this.element_) {
+        var el = document.createElement('div');
+        el.className = 'progressbar bar bar1';
+        this.element_.appendChild(el);
+        this.progressbar_ = el;
+        el = document.createElement('div');
+        el.className = 'bufferbar bar bar2';
+        this.element_.appendChild(el);
+        this.bufferbar_ = el;
+        el = document.createElement('div');
+        el.className = 'auxbar bar bar3';
+        this.element_.appendChild(el);
+        this.auxbar_ = el;
+        this.progressbar_.style.width = '0%';
+        this.bufferbar_.style.width = '100%';
+        this.auxbar_.style.width = '0%';
+        this.element_.classList.add('is-upgraded');
+    }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialProgress,
+    classAsString: 'MaterialProgress',
+    cssClass: 'mdl-js-progress',
+    widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Radio MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+var MaterialRadio = function MaterialRadio(element) {
+    this.element_ = element;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialRadio'] = MaterialRadio;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialRadio.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialRadio.prototype.CssClasses_ = {
+    IS_FOCUSED: 'is-focused',
+    IS_DISABLED: 'is-disabled',
+    IS_CHECKED: 'is-checked',
+    IS_UPGRADED: 'is-upgraded',
+    JS_RADIO: 'mdl-js-radio',
+    RADIO_BTN: 'mdl-radio__button',
+    RADIO_OUTER_CIRCLE: 'mdl-radio__outer-circle',
+    RADIO_INNER_CIRCLE: 'mdl-radio__inner-circle',
+    RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+    RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+    RIPPLE_CONTAINER: 'mdl-radio__ripple-container',
+    RIPPLE_CENTER: 'mdl-ripple--center',
+    RIPPLE: 'mdl-ripple'
+};
+/**
+   * Handle change of state.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialRadio.prototype.onChange_ = function (event) {
+    // Since other radio buttons don't get change events, we need to look for
+    // them to update their classes.
+    var radios = document.getElementsByClassName(this.CssClasses_.JS_RADIO);
+    for (var i = 0; i < radios.length; i++) {
+        var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
+        // Different name == different group, so no point updating those.
+        if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
+            radios[i]['MaterialRadio'].updateClasses_();
+        }
+    }
+};
+/**
+   * Handle focus.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialRadio.prototype.onFocus_ = function (event) {
+    this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+};
+/**
+   * Handle lost focus.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialRadio.prototype.onBlur_ = function (event) {
+    this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+};
+/**
+   * Handle mouseup.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialRadio.prototype.onMouseup_ = function (event) {
+    this.blur_();
+};
+/**
+   * Update classes.
+   *
+   * @private
+   */
+MaterialRadio.prototype.updateClasses_ = function () {
+    this.checkDisabled();
+    this.checkToggleState();
+};
+/**
+   * Add blur.
+   *
+   * @private
+   */
+MaterialRadio.prototype.blur_ = function () {
+    // TODO: figure out why there's a focus event being fired after our blur,
+    // so that we can avoid this hack.
+    window.setTimeout(function () {
+        this.btnElement_.blur();
+    }.bind(this), this.Constant_.TINY_TIMEOUT);
+};
+// Public methods.
+/**
+   * Check the components disabled state.
+   *
+   * @public
+   */
+MaterialRadio.prototype.checkDisabled = function () {
+    if (this.btnElement_.disabled) {
+        this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+    } else {
+        this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+    }
+};
+MaterialRadio.prototype['checkDisabled'] = MaterialRadio.prototype.checkDisabled;
+/**
+   * Check the components toggled state.
+   *
+   * @public
+   */
+MaterialRadio.prototype.checkToggleState = function () {
+    if (this.btnElement_.checked) {
+        this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+    } else {
+        this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+    }
+};
+MaterialRadio.prototype['checkToggleState'] = MaterialRadio.prototype.checkToggleState;
+/**
+   * Disable radio.
+   *
+   * @public
+   */
+MaterialRadio.prototype.disable = function () {
+    this.btnElement_.disabled = true;
+    this.updateClasses_();
+};
+MaterialRadio.prototype['disable'] = MaterialRadio.prototype.disable;
+/**
+   * Enable radio.
+   *
+   * @public
+   */
+MaterialRadio.prototype.enable = function () {
+    this.btnElement_.disabled = false;
+    this.updateClasses_();
+};
+MaterialRadio.prototype['enable'] = MaterialRadio.prototype.enable;
+/**
+   * Check radio.
+   *
+   * @public
+   */
+MaterialRadio.prototype.check = function () {
+    this.btnElement_.checked = true;
+    this.updateClasses_();
+};
+MaterialRadio.prototype['check'] = MaterialRadio.prototype.check;
+/**
+   * Uncheck radio.
+   *
+   * @public
+   */
+MaterialRadio.prototype.uncheck = function () {
+    this.btnElement_.checked = false;
+    this.updateClasses_();
+};
+MaterialRadio.prototype['uncheck'] = MaterialRadio.prototype.uncheck;
+/**
+   * Initialize element.
+   */
+MaterialRadio.prototype.init = function () {
+    if (this.element_) {
+        this.btnElement_ = this.element_.querySelector('.' + this.CssClasses_.RADIO_BTN);
+        this.boundChangeHandler_ = this.onChange_.bind(this);
+        this.boundFocusHandler_ = this.onChange_.bind(this);
+        this.boundBlurHandler_ = this.onBlur_.bind(this);
+        this.boundMouseUpHandler_ = this.onMouseup_.bind(this);
+        var outerCircle = document.createElement('span');
+        outerCircle.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE);
+        var innerCircle = document.createElement('span');
+        innerCircle.classList.add(this.CssClasses_.RADIO_INNER_CIRCLE);
+        this.element_.appendChild(outerCircle);
+        this.element_.appendChild(innerCircle);
+        var rippleContainer;
+        if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+            this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+            rippleContainer = document.createElement('span');
+            rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+            rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+            rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER);
+            rippleContainer.addEventListener('mouseup', this.boundMouseUpHandler_);
+            var ripple = document.createElement('span');
+            ripple.classList.add(this.CssClasses_.RIPPLE);
+            rippleContainer.appendChild(ripple);
+            this.element_.appendChild(rippleContainer);
+        }
+        this.btnElement_.addEventListener('change', this.boundChangeHandler_);
+        this.btnElement_.addEventListener('focus', this.boundFocusHandler_);
+        this.btnElement_.addEventListener('blur', this.boundBlurHandler_);
+        this.element_.addEventListener('mouseup', this.boundMouseUpHandler_);
+        this.updateClasses_();
+        this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+    }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialRadio,
+    classAsString: 'MaterialRadio',
+    cssClass: 'mdl-js-radio',
+    widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Slider MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+var MaterialSlider = function MaterialSlider(element) {
+    this.element_ = element;
+    // Browser feature detection.
+    this.isIE_ = window.navigator.msPointerEnabled;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialSlider'] = MaterialSlider;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialSlider.prototype.Constant_ = {};
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialSlider.prototype.CssClasses_ = {
+    IE_CONTAINER: 'mdl-slider__ie-container',
+    SLIDER_CONTAINER: 'mdl-slider__container',
+    BACKGROUND_FLEX: 'mdl-slider__background-flex',
+    BACKGROUND_LOWER: 'mdl-slider__background-lower',
+    BACKGROUND_UPPER: 'mdl-slider__background-upper',
+    IS_LOWEST_VALUE: 'is-lowest-value',
+    IS_UPGRADED: 'is-upgraded'
+};
+/**
+   * Handle input on element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialSlider.prototype.onInput_ = function (event) {
+    this.updateValueStyles_();
+};
+/**
+   * Handle change on element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialSlider.prototype.onChange_ = function (event) {
+    this.updateValueStyles_();
+};
+/**
+   * Handle mouseup on element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialSlider.prototype.onMouseUp_ = function (event) {
+    event.target.blur();
+};
+/**
+   * Handle mousedown on container element.
+   * This handler is purpose is to not require the use to click
+   * exactly on the 2px slider element, as FireFox seems to be very
+   * strict about this.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   * @suppress {missingProperties}
+   */
+MaterialSlider.prototype.onContainerMouseDown_ = function (event) {
+    // If this click is not on the parent element (but rather some child)
+    // ignore. It may still bubble up.
+    if (event.target !== this.element_.parentElement) {
+        return;
+    }
+    // Discard the original event and create a new event that
+    // is on the slider element.
+    event.preventDefault();
+    var newEvent = new MouseEvent('mousedown', {
+        target: event.target,
+        buttons: event.buttons,
+        clientX: event.clientX,
+        clientY: this.element_.getBoundingClientRect().y
+    });
+    this.element_.dispatchEvent(newEvent);
+};
+/**
+   * Handle updating of values.
+   *
+   * @private
+   */
+MaterialSlider.prototype.updateValueStyles_ = function () {
+    // Calculate and apply percentages to div structure behind slider.
+    var fraction = (this.element_.value - this.element_.min) / (this.element_.max - this.element_.min);
+    if (fraction === 0) {
+        this.element_.classList.add(this.CssClasses_.IS_LOWEST_VALUE);
+    } else {
+        this.element_.classList.remove(this.CssClasses_.IS_LOWEST_VALUE);
+    }
+    if (!this.isIE_) {
+        this.backgroundLower_.style.flex = fraction;
+        this.backgroundLower_.style.webkitFlex = fraction;
+        this.backgroundUpper_.style.flex = 1 - fraction;
+        this.backgroundUpper_.style.webkitFlex = 1 - fraction;
+    }
+};
+// Public methods.
+/**
+   * Disable slider.
+   *
+   * @public
+   */
+MaterialSlider.prototype.disable = function () {
+    this.element_.disabled = true;
+};
+MaterialSlider.prototype['disable'] = MaterialSlider.prototype.disable;
+/**
+   * Enable slider.
+   *
+   * @public
+   */
+MaterialSlider.prototype.enable = function () {
+    this.element_.disabled = false;
+};
+MaterialSlider.prototype['enable'] = MaterialSlider.prototype.enable;
+/**
+   * Update slider value.
+   *
+   * @param {number} value The value to which to set the control (optional).
+   * @public
+   */
+MaterialSlider.prototype.change = function (value) {
+    if (typeof value !== 'undefined') {
+        this.element_.value = value;
+    }
+    this.updateValueStyles_();
+};
+MaterialSlider.prototype['change'] = MaterialSlider.prototype.change;
+/**
+   * Initialize element.
+   */
+MaterialSlider.prototype.init = function () {
+    if (this.element_) {
+        if (this.isIE_) {
+            // Since we need to specify a very large height in IE due to
+            // implementation limitations, we add a parent here that trims it down to
+            // a reasonable size.
+            var containerIE = document.createElement('div');
+            containerIE.classList.add(this.CssClasses_.IE_CONTAINER);
+            this.element_.parentElement.insertBefore(containerIE, this.element_);
+            this.element_.parentElement.removeChild(this.element_);
+            containerIE.appendChild(this.element_);
+        } else {
+            // For non-IE browsers, we need a div structure that sits behind the
+            // slider and allows us to style the left and right sides of it with
+            // different colors.
+            var container = document.createElement('div');
+            container.classList.add(this.CssClasses_.SLIDER_CONTAINER);
+            this.element_.parentElement.insertBefore(container, this.element_);
+            this.element_.parentElement.removeChild(this.element_);
+            container.appendChild(this.element_);
+            var backgroundFlex = document.createElement('div');
+            backgroundFlex.classList.add(this.CssClasses_.BACKGROUND_FLEX);
+            container.appendChild(backgroundFlex);
+            this.backgroundLower_ = document.createElement('div');
+            this.backgroundLower_.classList.add(this.CssClasses_.BACKGROUND_LOWER);
+            backgroundFlex.appendChild(this.backgroundLower_);
+            this.backgroundUpper_ = document.createElement('div');
+            this.backgroundUpper_.classList.add(this.CssClasses_.BACKGROUND_UPPER);
+            backgroundFlex.appendChild(this.backgroundUpper_);
+        }
+        this.boundInputHandler = this.onInput_.bind(this);
+        this.boundChangeHandler = this.onChange_.bind(this);
+        this.boundMouseUpHandler = this.onMouseUp_.bind(this);
+        this.boundContainerMouseDownHandler = this.onContainerMouseDown_.bind(this);
+        this.element_.addEventListener('input', this.boundInputHandler);
+        this.element_.addEventListener('change', this.boundChangeHandler);
+        this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
+        this.element_.parentElement.addEventListener('mousedown', this.boundContainerMouseDownHandler);
+        this.updateValueStyles_();
+        this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+    }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialSlider,
+    classAsString: 'MaterialSlider',
+    cssClass: 'mdl-js-slider',
+    widget: true
+});
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Snackbar MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+var MaterialSnackbar = function MaterialSnackbar(element) {
+    this.element_ = element;
+    this.textElement_ = this.element_.querySelector('.' + this.cssClasses_.MESSAGE);
+    this.actionElement_ = this.element_.querySelector('.' + this.cssClasses_.ACTION);
+    if (!this.textElement_) {
+        throw new Error('There must be a message element for a snackbar.');
+    }
+    if (!this.actionElement_) {
+        throw new Error('There must be an action element for a snackbar.');
+    }
+    this.active = false;
+    this.actionHandler_ = undefined;
+    this.message_ = undefined;
+    this.actionText_ = undefined;
+    this.queuedNotifications_ = [];
+    this.setActionHidden_(true);
+};
+window['MaterialSnackbar'] = MaterialSnackbar;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialSnackbar.prototype.Constant_ = {
+    // The duration of the snackbar show/hide animation, in ms.
+    ANIMATION_LENGTH: 250
+};
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialSnackbar.prototype.cssClasses_ = {
+    SNACKBAR: 'mdl-snackbar',
+    MESSAGE: 'mdl-snackbar__text',
+    ACTION: 'mdl-snackbar__action',
+    ACTIVE: 'mdl-snackbar--active'
+};
+/**
+   * Display the snackbar.
+   *
+   * @private
+   */
+MaterialSnackbar.prototype.displaySnackbar_ = function () {
+    this.element_.setAttribute('aria-hidden', 'true');
+    if (this.actionHandler_) {
+        this.actionElement_.textContent = this.actionText_;
+        this.actionElement_.addEventListener('click', this.actionHandler_);
+        this.setActionHidden_(false);
+    }
+    this.textElement_.textContent = this.message_;
+    this.element_.classList.add(this.cssClasses_.ACTIVE);
+    this.element_.setAttribute('aria-hidden', 'false');
+    setTimeout(this.cleanup_.bind(this), this.timeout_);
+};
+/**
+   * Show the snackbar.
+   *
+   * @param {Object} data The data for the notification.
+   * @public
+   */
+MaterialSnackbar.prototype.showSnackbar = function (data) {
+    if (data === undefined) {
+        throw new Error('Please provide a data object with at least a message to display.');
+    }
+    if (data['message'] === undefined) {
+        throw new Error('Please provide a message to be displayed.');
+    }
+    if (data['actionHandler'] && !data['actionText']) {
+        throw new Error('Please provide action text with the handler.');
+    }
+    if (this.active) {
+        this.queuedNotifications_.push(data);
+    } else {
+        this.active = true;
+        this.message_ = data['message'];
+        if (data['timeout']) {
+            this.timeout_ = data['timeout'];
+        } else {
+            this.timeout_ = 2750;
+        }
+        if (data['actionHandler']) {
+            this.actionHandler_ = data['actionHandler'];
+        }
+        if (data['actionText']) {
+            this.actionText_ = data['actionText'];
+        }
+        this.displaySnackbar_();
+    }
+};
+MaterialSnackbar.prototype['showSnackbar'] = MaterialSnackbar.prototype.showSnackbar;
+/**
+   * Check if the queue has items within it.
+   * If it does, display the next entry.
+   *
+   * @private
+   */
+MaterialSnackbar.prototype.checkQueue_ = function () {
+    if (this.queuedNotifications_.length > 0) {
+        this.showSnackbar(this.queuedNotifications_.shift());
+    }
+};
+/**
+   * Cleanup the snackbar event listeners and accessiblity attributes.
+   *
+   * @private
+   */
+MaterialSnackbar.prototype.cleanup_ = function () {
+    this.element_.classList.remove(this.cssClasses_.ACTIVE);
+    setTimeout(function () {
+        this.element_.setAttribute('aria-hidden', 'true');
+        this.textElement_.textContent = '';
+        if (!Boolean(this.actionElement_.getAttribute('aria-hidden'))) {
+            this.setActionHidden_(true);
+            this.actionElement_.textContent = '';
+            this.actionElement_.removeEventListener('click', this.actionHandler_);
+        }
+        this.actionHandler_ = undefined;
+        this.message_ = undefined;
+        this.actionText_ = undefined;
+        this.active = false;
+        this.checkQueue_();
+    }.bind(this), this.Constant_.ANIMATION_LENGTH);
+};
+/**
+   * Set the action handler hidden state.
+   *
+   * @param {boolean} value
+   * @private
+   */
+MaterialSnackbar.prototype.setActionHidden_ = function (value) {
+    if (value) {
+        this.actionElement_.setAttribute('aria-hidden', 'true');
+    } else {
+        this.actionElement_.removeAttribute('aria-hidden');
+    }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialSnackbar,
+    classAsString: 'MaterialSnackbar',
+    cssClass: 'mdl-js-snackbar',
+    widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Spinner MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @param {HTMLElement} element The element that will be upgraded.
+   * @constructor
+   */
+var MaterialSpinner = function MaterialSpinner(element) {
+    this.element_ = element;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialSpinner'] = MaterialSpinner;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialSpinner.prototype.Constant_ = { MDL_SPINNER_LAYER_COUNT: 4 };
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialSpinner.prototype.CssClasses_ = {
+    MDL_SPINNER_LAYER: 'mdl-spinner__layer',
+    MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
+    MDL_SPINNER_CIRCLE: 'mdl-spinner__circle',
+    MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
+    MDL_SPINNER_LEFT: 'mdl-spinner__left',
+    MDL_SPINNER_RIGHT: 'mdl-spinner__right'
+};
+/**
+   * Auxiliary method to create a spinner layer.
+   *
+   * @param {number} index Index of the layer to be created.
+   * @public
+   */
+MaterialSpinner.prototype.createLayer = function (index) {
+    var layer = document.createElement('div');
+    layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER);
+    layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index);
+    var leftClipper = document.createElement('div');
+    leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
+    leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);
+    var gapPatch = document.createElement('div');
+    gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);
+    var rightClipper = document.createElement('div');
+    rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
+    rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);
+    var circleOwners = [
+        leftClipper,
+        gapPatch,
+        rightClipper
+    ];
+    for (var i = 0; i < circleOwners.length; i++) {
+        var circle = document.createElement('div');
+        circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE);
+        circleOwners[i].appendChild(circle);
+    }
+    layer.appendChild(leftClipper);
+    layer.appendChild(gapPatch);
+    layer.appendChild(rightClipper);
+    this.element_.appendChild(layer);
+};
+MaterialSpinner.prototype['createLayer'] = MaterialSpinner.prototype.createLayer;
+/**
+   * Stops the spinner animation.
+   * Public method for users who need to stop the spinner for any reason.
+   *
+   * @public
+   */
+MaterialSpinner.prototype.stop = function () {
+    this.element_.classList.remove('is-active');
+};
+MaterialSpinner.prototype['stop'] = MaterialSpinner.prototype.stop;
+/**
+   * Starts the spinner animation.
+   * Public method for users who need to manually start the spinner for any reason
+   * (instead of just adding the 'is-active' class to their markup).
+   *
+   * @public
+   */
+MaterialSpinner.prototype.start = function () {
+    this.element_.classList.add('is-active');
+};
+MaterialSpinner.prototype['start'] = MaterialSpinner.prototype.start;
+/**
+   * Initialize element.
+   */
+MaterialSpinner.prototype.init = function () {
+    if (this.element_) {
+        for (var i = 1; i <= this.Constant_.MDL_SPINNER_LAYER_COUNT; i++) {
+            this.createLayer(i);
+        }
+        this.element_.classList.add('is-upgraded');
+    }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialSpinner,
+    classAsString: 'MaterialSpinner',
+    cssClass: 'mdl-js-spinner',
+    widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Checkbox MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+var MaterialSwitch = function MaterialSwitch(element) {
+    this.element_ = element;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialSwitch'] = MaterialSwitch;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialSwitch.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialSwitch.prototype.CssClasses_ = {
+    INPUT: 'mdl-switch__input',
+    TRACK: 'mdl-switch__track',
+    THUMB: 'mdl-switch__thumb',
+    FOCUS_HELPER: 'mdl-switch__focus-helper',
+    RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+    RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+    RIPPLE_CONTAINER: 'mdl-switch__ripple-container',
+    RIPPLE_CENTER: 'mdl-ripple--center',
+    RIPPLE: 'mdl-ripple',
+    IS_FOCUSED: 'is-focused',
+    IS_DISABLED: 'is-disabled',
+    IS_CHECKED: 'is-checked'
+};
+/**
+   * Handle change of state.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialSwitch.prototype.onChange_ = function (event) {
+    this.updateClasses_();
+};
+/**
+   * Handle focus of element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialSwitch.prototype.onFocus_ = function (event) {
+    this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+};
+/**
+   * Handle lost focus of element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialSwitch.prototype.onBlur_ = function (event) {
+    this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+};
+/**
+   * Handle mouseup.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialSwitch.prototype.onMouseUp_ = function (event) {
+    this.blur_();
+};
+/**
+   * Handle class updates.
+   *
+   * @private
+   */
+MaterialSwitch.prototype.updateClasses_ = function () {
+    this.checkDisabled();
+    this.checkToggleState();
+};
+/**
+   * Add blur.
+   *
+   * @private
+   */
+MaterialSwitch.prototype.blur_ = function () {
+    // TODO: figure out why there's a focus event being fired after our blur,
+    // so that we can avoid this hack.
+    window.setTimeout(function () {
+        this.inputElement_.blur();
+    }.bind(this), this.Constant_.TINY_TIMEOUT);
+};
+// Public methods.
+/**
+   * Check the components disabled state.
+   *
+   * @public
+   */
+MaterialSwitch.prototype.checkDisabled = function () {
+    if (this.inputElement_.disabled) {
+        this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+    } else {
+        this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+    }
+};
+MaterialSwitch.prototype['checkDisabled'] = MaterialSwitch.prototype.checkDisabled;
+/**
+   * Check the components toggled state.
+   *
+   * @public
+   */
+MaterialSwitch.prototype.checkToggleState = function () {
+    if (this.inputElement_.checked) {
+        this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+    } else {
+        this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+    }
+};
+MaterialSwitch.prototype['checkToggleState'] = MaterialSwitch.prototype.checkToggleState;
+/**
+   * Disable switch.
+   *
+   * @public
+   */
+MaterialSwitch.prototype.disable = function () {
+    this.inputElement_.disabled = true;
+    this.updateClasses_();
+};
+MaterialSwitch.prototype['disable'] = MaterialSwitch.prototype.disable;
+/**
+   * Enable switch.
+   *
+   * @public
+   */
+MaterialSwitch.prototype.enable = function () {
+    this.inputElement_.disabled = false;
+    this.updateClasses_();
+};
+MaterialSwitch.prototype['enable'] = MaterialSwitch.prototype.enable;
+/**
+   * Activate switch.
+   *
+   * @public
+   */
+MaterialSwitch.prototype.on = function () {
+    this.inputElement_.checked = true;
+    this.updateClasses_();
+};
+MaterialSwitch.prototype['on'] = MaterialSwitch.prototype.on;
+/**
+   * Deactivate switch.
+   *
+   * @public
+   */
+MaterialSwitch.prototype.off = function () {
+    this.inputElement_.checked = false;
+    this.updateClasses_();
+};
+MaterialSwitch.prototype['off'] = MaterialSwitch.prototype.off;
+/**
+   * Initialize element.
+   */
+MaterialSwitch.prototype.init = function () {
+    if (this.element_) {
+        this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+        var track = document.createElement('div');
+        track.classList.add(this.CssClasses_.TRACK);
+        var thumb = document.createElement('div');
+        thumb.classList.add(this.CssClasses_.THUMB);
+        var focusHelper = document.createElement('span');
+        focusHelper.classList.add(this.CssClasses_.FOCUS_HELPER);
+        thumb.appendChild(focusHelper);
+        this.element_.appendChild(track);
+        this.element_.appendChild(thumb);
+        this.boundMouseUpHandler = this.onMouseUp_.bind(this);
+        if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+            this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+            this.rippleContainerElement_ = document.createElement('span');
+            this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+            this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+            this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
+            this.rippleContainerElement_.addEventListener('mouseup', this.boundMouseUpHandler);
+            var ripple = document.createElement('span');
+            ripple.classList.add(this.CssClasses_.RIPPLE);
+            this.rippleContainerElement_.appendChild(ripple);
+            this.element_.appendChild(this.rippleContainerElement_);
+        }
+        this.boundChangeHandler = this.onChange_.bind(this);
+        this.boundFocusHandler = this.onFocus_.bind(this);
+        this.boundBlurHandler = this.onBlur_.bind(this);
+        this.inputElement_.addEventListener('change', this.boundChangeHandler);
+        this.inputElement_.addEventListener('focus', this.boundFocusHandler);
+        this.inputElement_.addEventListener('blur', this.boundBlurHandler);
+        this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
+        this.updateClasses_();
+        this.element_.classList.add('is-upgraded');
+    }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialSwitch,
+    classAsString: 'MaterialSwitch',
+    cssClass: 'mdl-js-switch',
+    widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Tabs MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {Element} element The element that will be upgraded.
+   */
+var MaterialTabs = function MaterialTabs(element) {
+    // Stores the HTML element.
+    this.element_ = element;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialTabs'] = MaterialTabs;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialTabs.prototype.Constant_ = {};
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialTabs.prototype.CssClasses_ = {
+    TAB_CLASS: 'mdl-tabs__tab',
+    PANEL_CLASS: 'mdl-tabs__panel',
+    ACTIVE_CLASS: 'is-active',
+    UPGRADED_CLASS: 'is-upgraded',
+    MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+    MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
+    MDL_RIPPLE: 'mdl-ripple',
+    MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
+};
+/**
+   * Handle clicks to a tabs component
+   *
+   * @private
+   */
+MaterialTabs.prototype.initTabs_ = function () {
+    if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
+        this.element_.classList.add(this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
+    }
+    // Select element tabs, document panels
+    this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS);
+    this.panels_ = this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS);
+    // Create new tabs for each tab element
+    for (var i = 0; i < this.tabs_.length; i++) {
+        new MaterialTab(this.tabs_[i], this);
+    }
+    this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
+};
+/**
+   * Reset tab state, dropping active classes
+   *
+   * @private
+   */
+MaterialTabs.prototype.resetTabState_ = function () {
+    for (var k = 0; k < this.tabs_.length; k++) {
+        this.tabs_[k].classList.remove(this.CssClasses_.ACTIVE_CLASS);
+    }
+};
+/**
+   * Reset panel state, droping active classes
+   *
+   * @private
+   */
+MaterialTabs.prototype.resetPanelState_ = function () {
+    for (var j = 0; j < this.panels_.length; j++) {
+        this.panels_[j].classList.remove(this.CssClasses_.ACTIVE_CLASS);
+    }
+};
+/**
+   * Initialize element.
+   */
+MaterialTabs.prototype.init = function () {
+    if (this.element_) {
+        this.initTabs_();
+    }
+};
+/**
+   * Constructor for an individual tab.
+   *
+   * @constructor
+   * @param {Element} tab The HTML element for the tab.
+   * @param {MaterialTabs} ctx The MaterialTabs object that owns the tab.
+   */
+function MaterialTab(tab, ctx) {
+    if (tab) {
+        if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
+            var rippleContainer = document.createElement('span');
+            rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
+            rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
+            var ripple = document.createElement('span');
+            ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
+            rippleContainer.appendChild(ripple);
+            tab.appendChild(rippleContainer);
+        }
+        tab.addEventListener('click', function (e) {
+            e.preventDefault();
+            var href = tab.href.split('#')[1];
+            var panel = ctx.element_.querySelector('#' + href);
+            ctx.resetTabState_();
+            ctx.resetPanelState_();
+            tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
+            panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
+        });
+    }
+}
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialTabs,
+    classAsString: 'MaterialTabs',
+    cssClass: 'mdl-js-tabs'
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Textfield MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+var MaterialTextfield = function MaterialTextfield(element) {
+    this.element_ = element;
+    this.maxRows = this.Constant_.NO_MAX_ROWS;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialTextfield'] = MaterialTextfield;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialTextfield.prototype.Constant_ = {
+    NO_MAX_ROWS: -1,
+    MAX_ROWS_ATTRIBUTE: 'maxrows'
+};
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialTextfield.prototype.CssClasses_ = {
+    LABEL: 'mdl-textfield__label',
+    INPUT: 'mdl-textfield__input',
+    IS_DIRTY: 'is-dirty',
+    IS_FOCUSED: 'is-focused',
+    IS_DISABLED: 'is-disabled',
+    IS_INVALID: 'is-invalid',
+    IS_UPGRADED: 'is-upgraded'
+};
+/**
+   * Handle input being entered.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialTextfield.prototype.onKeyDown_ = function (event) {
+    var currentRowCount = event.target.value.split('\n').length;
+    if (event.keyCode === 13) {
+        if (currentRowCount >= this.maxRows) {
+            event.preventDefault();
+        }
+    }
+};
+/**
+   * Handle focus.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialTextfield.prototype.onFocus_ = function (event) {
+    this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+};
+/**
+   * Handle lost focus.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialTextfield.prototype.onBlur_ = function (event) {
+    this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+};
+/**
+   * Handle reset event from out side.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialTextfield.prototype.onReset_ = function (event) {
+    this.updateClasses_();
+};
+/**
+   * Handle class updates.
+   *
+   * @private
+   */
+MaterialTextfield.prototype.updateClasses_ = function () {
+    this.checkDisabled();
+    this.checkValidity();
+    this.checkDirty();
+    this.checkFocus();
+};
+// Public methods.
+/**
+   * Check the disabled state and update field accordingly.
+   *
+   * @public
+   */
+MaterialTextfield.prototype.checkDisabled = function () {
+    if (this.input_.disabled) {
+        this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+    } else {
+        this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+    }
+};
+MaterialTextfield.prototype['checkDisabled'] = MaterialTextfield.prototype.checkDisabled;
+/**
+  * Check the focus state and update field accordingly.
+  *
+  * @public
+  */
+MaterialTextfield.prototype.checkFocus = function () {
+    if (Boolean(this.element_.querySelector(':focus'))) {
+        this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+    } else {
+        this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+    }
+};
+MaterialTextfield.prototype['checkFocus'] = MaterialTextfield.prototype.checkFocus;
+/**
+   * Check the validity state and update field accordingly.
+   *
+   * @public
+   */
+MaterialTextfield.prototype.checkValidity = function () {
+    if (this.input_.validity) {
+        if (this.input_.validity.valid) {
+            this.element_.classList.remove(this.CssClasses_.IS_INVALID);
+        } else {
+            this.element_.classList.add(this.CssClasses_.IS_INVALID);
+        }
+    }
+};
+MaterialTextfield.prototype['checkValidity'] = MaterialTextfield.prototype.checkValidity;
+/**
+   * Check the dirty state and update field accordingly.
+   *
+   * @public
+   */
+MaterialTextfield.prototype.checkDirty = function () {
+    if (this.input_.value && this.input_.value.length > 0) {
+        this.element_.classList.add(this.CssClasses_.IS_DIRTY);
+    } else {
+        this.element_.classList.remove(this.CssClasses_.IS_DIRTY);
+    }
+};
+MaterialTextfield.prototype['checkDirty'] = MaterialTextfield.prototype.checkDirty;
+/**
+   * Disable text field.
+   *
+   * @public
+   */
+MaterialTextfield.prototype.disable = function () {
+    this.input_.disabled = true;
+    this.updateClasses_();
+};
+MaterialTextfield.prototype['disable'] = MaterialTextfield.prototype.disable;
+/**
+   * Enable text field.
+   *
+   * @public
+   */
+MaterialTextfield.prototype.enable = function () {
+    this.input_.disabled = false;
+    this.updateClasses_();
+};
+MaterialTextfield.prototype['enable'] = MaterialTextfield.prototype.enable;
+/**
+   * Update text field value.
+   *
+   * @param {string} value The value to which to set the control (optional).
+   * @public
+   */
+MaterialTextfield.prototype.change = function (value) {
+    this.input_.value = value || '';
+    this.updateClasses_();
+};
+MaterialTextfield.prototype['change'] = MaterialTextfield.prototype.change;
+/**
+   * Initialize element.
+   */
+MaterialTextfield.prototype.init = function () {
+    if (this.element_) {
+        this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL);
+        this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+        if (this.input_) {
+            if (this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE)) {
+                this.maxRows = parseInt(this.input_.getAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE), 10);
+                if (isNaN(this.maxRows)) {
+                    this.maxRows = this.Constant_.NO_MAX_ROWS;
+                }
+            }
+            this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
+            this.boundFocusHandler = this.onFocus_.bind(this);
+            this.boundBlurHandler = this.onBlur_.bind(this);
+            this.boundResetHandler = this.onReset_.bind(this);
+            this.input_.addEventListener('input', this.boundUpdateClassesHandler);
+            this.input_.addEventListener('focus', this.boundFocusHandler);
+            this.input_.addEventListener('blur', this.boundBlurHandler);
+            this.input_.addEventListener('reset', this.boundResetHandler);
+            if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
+                // TODO: This should handle pasting multi line text.
+                // Currently doesn't.
+                this.boundKeyDownHandler = this.onKeyDown_.bind(this);
+                this.input_.addEventListener('keydown', this.boundKeyDownHandler);
+            }
+            var invalid = this.element_.classList.contains(this.CssClasses_.IS_INVALID);
+            this.updateClasses_();
+            this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+            if (invalid) {
+                this.element_.classList.add(this.CssClasses_.IS_INVALID);
+            }
+            if (this.input_.hasAttribute('autofocus')) {
+                this.element_.focus();
+                this.checkFocus();
+            }
+        }
+    }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialTextfield,
+    classAsString: 'MaterialTextfield',
+    cssClass: 'mdl-js-textfield',
+    widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Tooltip MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+var MaterialTooltip = function MaterialTooltip(element) {
+    this.element_ = element;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialTooltip'] = MaterialTooltip;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialTooltip.prototype.Constant_ = {};
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialTooltip.prototype.CssClasses_ = {
+    IS_ACTIVE: 'is-active',
+    BOTTOM: 'mdl-tooltip--bottom',
+    LEFT: 'mdl-tooltip--left',
+    RIGHT: 'mdl-tooltip--right',
+    TOP: 'mdl-tooltip--top'
+};
+/**
+   * Handle mouseenter for tooltip.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialTooltip.prototype.handleMouseEnter_ = function (event) {
+    var props = event.target.getBoundingClientRect();
+    var left = props.left + props.width / 2;
+    var top = props.top + props.height / 2;
+    var marginLeft = -1 * (this.element_.offsetWidth / 2);
+    var marginTop = -1 * (this.element_.offsetHeight / 2);
+    if (this.element_.classList.contains(this.CssClasses_.LEFT) || this.element_.classList.contains(this.CssClasses_.RIGHT)) {
+        left = props.width / 2;
+        if (top + marginTop < 0) {
+            this.element_.style.top = 0;
+            this.element_.style.marginTop = 0;
+        } else {
+            this.element_.style.top = top + 'px';
+            this.element_.style.marginTop = marginTop + 'px';
+        }
+    } else {
+        if (left + marginLeft < 0) {
+            this.element_.style.left = 0;
+            this.element_.style.marginLeft = 0;
+        } else {
+            this.element_.style.left = left + 'px';
+            this.element_.style.marginLeft = marginLeft + 'px';
+        }
+    }
+    if (this.element_.classList.contains(this.CssClasses_.TOP)) {
+        this.element_.style.top = props.top - this.element_.offsetHeight - 10 + 'px';
+    } else if (this.element_.classList.contains(this.CssClasses_.RIGHT)) {
+        this.element_.style.left = props.left + props.width + 10 + 'px';
+    } else if (this.element_.classList.contains(this.CssClasses_.LEFT)) {
+        this.element_.style.left = props.left - this.element_.offsetWidth - 10 + 'px';
+    } else {
+        this.element_.style.top = props.top + props.height + 10 + 'px';
+    }
+    this.element_.classList.add(this.CssClasses_.IS_ACTIVE);
+};
+/**
+   * Handle mouseleave for tooltip.
+   *
+   * @private
+   */
+MaterialTooltip.prototype.handleMouseLeave_ = function () {
+    this.element_.classList.remove(this.CssClasses_.IS_ACTIVE);
+};
+/**
+   * Initialize element.
+   */
+MaterialTooltip.prototype.init = function () {
+    if (this.element_) {
+        var forElId = this.element_.getAttribute('for');
+        if (forElId) {
+            this.forElement_ = document.getElementById(forElId);
+        }
+        if (this.forElement_) {
+            // It's left here because it prevents accidental text selection on Android
+            if (!this.forElement_.hasAttribute('tabindex')) {
+                this.forElement_.setAttribute('tabindex', '0');
+            }
+            this.boundMouseEnterHandler = this.handleMouseEnter_.bind(this);
+            this.boundMouseLeaveHandler = this.handleMouseLeave_.bind(this);
+            this.forElement_.addEventListener('mouseenter', this.boundMouseEnterHandler, false);
+            this.forElement_.addEventListener('touchend', this.boundMouseEnterHandler, false);
+            this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveHandler, false);
+            window.addEventListener('touchstart', this.boundMouseLeaveHandler);
+        }
+    }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialTooltip,
+    classAsString: 'MaterialTooltip',
+    cssClass: 'mdl-tooltip'
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Layout MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+var MaterialLayout = function MaterialLayout(element) {
+    this.element_ = element;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialLayout'] = MaterialLayout;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialLayout.prototype.Constant_ = {
+    MAX_WIDTH: '(max-width: 1024px)',
+    TAB_SCROLL_PIXELS: 100,
+    MENU_ICON: '&#xE5D2;',
+    CHEVRON_LEFT: 'chevron_left',
+    CHEVRON_RIGHT: 'chevron_right'
+};
+/**
+   * Keycodes, for code readability.
+   *
+   * @enum {number}
+   * @private
+   */
+MaterialLayout.prototype.Keycodes_ = {
+    ENTER: 13,
+    ESCAPE: 27,
+    SPACE: 32
+};
+/**
+   * Modes.
+   *
+   * @enum {number}
+   * @private
+   */
+MaterialLayout.prototype.Mode_ = {
+    STANDARD: 0,
+    SEAMED: 1,
+    WATERFALL: 2,
+    SCROLL: 3
+};
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialLayout.prototype.CssClasses_ = {
+    CONTAINER: 'mdl-layout__container',
+    HEADER: 'mdl-layout__header',
+    DRAWER: 'mdl-layout__drawer',
+    CONTENT: 'mdl-layout__content',
+    DRAWER_BTN: 'mdl-layout__drawer-button',
+    ICON: 'material-icons',
+    JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+    RIPPLE_CONTAINER: 'mdl-layout__tab-ripple-container',
+    RIPPLE: 'mdl-ripple',
+    RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+    HEADER_SEAMED: 'mdl-layout__header--seamed',
+    HEADER_WATERFALL: 'mdl-layout__header--waterfall',
+    HEADER_SCROLL: 'mdl-layout__header--scroll',
+    FIXED_HEADER: 'mdl-layout--fixed-header',
+    OBFUSCATOR: 'mdl-layout__obfuscator',
+    TAB_BAR: 'mdl-layout__tab-bar',
+    TAB_CONTAINER: 'mdl-layout__tab-bar-container',
+    TAB: 'mdl-layout__tab',
+    TAB_BAR_BUTTON: 'mdl-layout__tab-bar-button',
+    TAB_BAR_LEFT_BUTTON: 'mdl-layout__tab-bar-left-button',
+    TAB_BAR_RIGHT_BUTTON: 'mdl-layout__tab-bar-right-button',
+    PANEL: 'mdl-layout__tab-panel',
+    HAS_DRAWER: 'has-drawer',
+    HAS_TABS: 'has-tabs',
+    HAS_SCROLLING_HEADER: 'has-scrolling-header',
+    CASTING_SHADOW: 'is-casting-shadow',
+    IS_COMPACT: 'is-compact',
+    IS_SMALL_SCREEN: 'is-small-screen',
+    IS_DRAWER_OPEN: 'is-visible',
+    IS_ACTIVE: 'is-active',
+    IS_UPGRADED: 'is-upgraded',
+    IS_ANIMATING: 'is-animating',
+    ON_LARGE_SCREEN: 'mdl-layout--large-screen-only',
+    ON_SMALL_SCREEN: 'mdl-layout--small-screen-only'
+};
+/**
+   * Handles scrolling on the content.
+   *
+   * @private
+   */
+MaterialLayout.prototype.contentScrollHandler_ = function () {
+    if (this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)) {
+        return;
+    }
+    var headerVisible = !this.element_.classList.contains(this.CssClasses_.IS_SMALL_SCREEN) || this.element_.classList.contains(this.CssClasses_.FIXED_HEADER);
+    if (this.content_.scrollTop > 0 && !this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
+        this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
+        this.header_.classList.add(this.CssClasses_.IS_COMPACT);
+        if (headerVisible) {
+            this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
+        }
+    } else if (this.content_.scrollTop <= 0 && this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
+        this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
+        this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
+        if (headerVisible) {
+            this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
+        }
+    }
+};
+/**
+   * Handles a keyboard event on the drawer.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+MaterialLayout.prototype.keyboardEventHandler_ = function (evt) {
+    if (evt.keyCode === this.Keycodes_.ESCAPE) {
+        this.toggleDrawer();
+    }
+};
+/**
+   * Handles changes in screen size.
+   *
+   * @private
+   */
+MaterialLayout.prototype.screenSizeHandler_ = function () {
+    if (this.screenSizeMediaQuery_.matches) {
+        this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
+    } else {
+        this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
+        // Collapse drawer (if any) when moving to a large screen size.
+        if (this.drawer_) {
+            this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
+            this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
+        }
+    }
+};
+/**
+   * Handles events of drawer button.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+MaterialLayout.prototype.drawerToggleHandler_ = function (evt) {
+    if (evt && evt.type === 'keydown') {
+        if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) {
+            // prevent scrolling in drawer nav
+            evt.preventDefault();
+        } else {
+            // prevent other keys
+            return;
+        }
+    }
+    this.toggleDrawer();
+};
+/**
+   * Handles (un)setting the `is-animating` class
+   *
+   * @private
+   */
+MaterialLayout.prototype.headerTransitionEndHandler_ = function () {
+    this.header_.classList.remove(this.CssClasses_.IS_ANIMATING);
+};
+/**
+   * Handles expanding the header on click
+   *
+   * @private
+   */
+MaterialLayout.prototype.headerClickHandler_ = function () {
+    if (this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
+        this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
+        this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
+    }
+};
+/**
+   * Reset tab state, dropping active classes
+   *
+   * @private
+   */
+MaterialLayout.prototype.resetTabState_ = function (tabBar) {
+    for (var k = 0; k < tabBar.length; k++) {
+        tabBar[k].classList.remove(this.CssClasses_.IS_ACTIVE);
+    }
+};
+/**
+   * Reset panel state, droping active classes
+   *
+   * @private
+   */
+MaterialLayout.prototype.resetPanelState_ = function (panels) {
+    for (var j = 0; j < panels.length; j++) {
+        panels[j].classList.remove(this.CssClasses_.IS_ACTIVE);
+    }
+};
+/**
+  * Toggle drawer state
+  *
+  * @public
+  */
+MaterialLayout.prototype.toggleDrawer = function () {
+    var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
+    this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
+    this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
+    // Set accessibility properties.
+    if (this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) {
+        this.drawer_.setAttribute('aria-hidden', 'false');
+        drawerButton.setAttribute('aria-expanded', 'true');
+    } else {
+        this.drawer_.setAttribute('aria-hidden', 'true');
+        drawerButton.setAttribute('aria-expanded', 'false');
+    }
+};
+MaterialLayout.prototype['toggleDrawer'] = MaterialLayout.prototype.toggleDrawer;
+/**
+   * Initialize element.
+   */
+MaterialLayout.prototype.init = function () {
+    if (this.element_) {
+        var container = document.createElement('div');
+        container.classList.add(this.CssClasses_.CONTAINER);
+        this.element_.parentElement.insertBefore(container, this.element_);
+        this.element_.parentElement.removeChild(this.element_);
+        container.appendChild(this.element_);
+        var directChildren = this.element_.childNodes;
+        var numChildren = directChildren.length;
+        for (var c = 0; c < numChildren; c++) {
+            var child = directChildren[c];
+            if (child.classList && child.classList.contains(this.CssClasses_.HEADER)) {
+                this.header_ = child;
+            }
+            if (child.classList && child.classList.contains(this.CssClasses_.DRAWER)) {
+                this.drawer_ = child;
+            }
+            if (child.classList && child.classList.contains(this.CssClasses_.CONTENT)) {
+                this.content_ = child;
+            }
+        }
+        window.addEventListener('pageshow', function (e) {
+            if (e.persisted) {
+                // when page is loaded from back/forward cache
+                // trigger repaint to let layout scroll in safari
+                this.element_.style.overflowY = 'hidden';
+                requestAnimationFrame(function () {
+                    this.element_.style.overflowY = '';
+                }.bind(this));
+            }
+        }.bind(this), false);
+        if (this.header_) {
+            this.tabBar_ = this.header_.querySelector('.' + this.CssClasses_.TAB_BAR);
+        }
+        var mode = this.Mode_.STANDARD;
+        if (this.header_) {
+            if (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)) {
+                mode = this.Mode_.SEAMED;
+            } else if (this.header_.classList.contains(this.CssClasses_.HEADER_WATERFALL)) {
+                mode = this.Mode_.WATERFALL;
+                this.header_.addEventListener('transitionend', this.headerTransitionEndHandler_.bind(this));
+                this.header_.addEventListener('click', this.headerClickHandler_.bind(this));
+            } else if (this.header_.classList.contains(this.CssClasses_.HEADER_SCROLL)) {
+                mode = this.Mode_.SCROLL;
+                container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
+            }
+            if (mode === this.Mode_.STANDARD) {
+                this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
+                if (this.tabBar_) {
+                    this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW);
+                }
+            } else if (mode === this.Mode_.SEAMED || mode === this.Mode_.SCROLL) {
+                this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
+                if (this.tabBar_) {
+                    this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW);
+                }
+            } else if (mode === this.Mode_.WATERFALL) {
+                // Add and remove shadows depending on scroll position.
+                // Also add/remove auxiliary class for styling of the compact version of
+                // the header.
+                this.content_.addEventListener('scroll', this.contentScrollHandler_.bind(this));
+                this.contentScrollHandler_();
+            }
+        }
+        // Add drawer toggling button to our layout, if we have an openable drawer.
+        if (this.drawer_) {
+            var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
+            if (!drawerButton) {
+                drawerButton = document.createElement('div');
+                drawerButton.setAttribute('aria-expanded', 'false');
+                drawerButton.setAttribute('role', 'button');
+                drawerButton.setAttribute('tabindex', '0');
+                drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
+                var drawerButtonIcon = document.createElement('i');
+                drawerButtonIcon.classList.add(this.CssClasses_.ICON);
+                drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON;
+                drawerButton.appendChild(drawerButtonIcon);
+            }
+            if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) {
+                //If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well.
+                drawerButton.classList.add(this.CssClasses_.ON_LARGE_SCREEN);
+            } else if (this.drawer_.classList.contains(this.CssClasses_.ON_SMALL_SCREEN)) {
+                //If drawer has ON_SMALL_SCREEN class then add it to the drawer toggle button as well.
+                drawerButton.classList.add(this.CssClasses_.ON_SMALL_SCREEN);
+            }
+            drawerButton.addEventListener('click', this.drawerToggleHandler_.bind(this));
+            drawerButton.addEventListener('keydown', this.drawerToggleHandler_.bind(this));
+            // Add a class if the layout has a drawer, for altering the left padding.
+            // Adds the HAS_DRAWER to the elements since this.header_ may or may
+            // not be present.
+            this.element_.classList.add(this.CssClasses_.HAS_DRAWER);
+            // If we have a fixed header, add the button to the header rather than
+            // the layout.
+            if (this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)) {
+                this.header_.insertBefore(drawerButton, this.header_.firstChild);
+            } else {
+                this.element_.insertBefore(drawerButton, this.content_);
+            }
+            var obfuscator = document.createElement('div');
+            obfuscator.classList.add(this.CssClasses_.OBFUSCATOR);
+            this.element_.appendChild(obfuscator);
+            obfuscator.addEventListener('click', this.drawerToggleHandler_.bind(this));
+            this.obfuscator_ = obfuscator;
+            this.drawer_.addEventListener('keydown', this.keyboardEventHandler_.bind(this));
+            this.drawer_.setAttribute('aria-hidden', 'true');
+        }
+        // Keep an eye on screen size, and add/remove auxiliary class for styling
+        // of small screens.
+        this.screenSizeMediaQuery_ = window.matchMedia(this.Constant_.MAX_WIDTH);
+        this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
+        this.screenSizeHandler_();
+        // Initialize tabs, if any.
+        if (this.header_ && this.tabBar_) {
+            this.element_.classList.add(this.CssClasses_.HAS_TABS);
+            var tabContainer = document.createElement('div');
+            tabContainer.classList.add(this.CssClasses_.TAB_CONTAINER);
+            this.header_.insertBefore(tabContainer, this.tabBar_);
+            this.header_.removeChild(this.tabBar_);
+            var leftButton = document.createElement('div');
+            leftButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
+            leftButton.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON);
+            var leftButtonIcon = document.createElement('i');
+            leftButtonIcon.classList.add(this.CssClasses_.ICON);
+            leftButtonIcon.textContent = this.Constant_.CHEVRON_LEFT;
+            leftButton.appendChild(leftButtonIcon);
+            leftButton.addEventListener('click', function () {
+                this.tabBar_.scrollLeft -= this.Constant_.TAB_SCROLL_PIXELS;
+            }.bind(this));
+            var rightButton = document.createElement('div');
+            rightButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
+            rightButton.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON);
+            var rightButtonIcon = document.createElement('i');
+            rightButtonIcon.classList.add(this.CssClasses_.ICON);
+            rightButtonIcon.textContent = this.Constant_.CHEVRON_RIGHT;
+            rightButton.appendChild(rightButtonIcon);
+            rightButton.addEventListener('click', function () {
+                this.tabBar_.scrollLeft += this.Constant_.TAB_SCROLL_PIXELS;
+            }.bind(this));
+            tabContainer.appendChild(leftButton);
+            tabContainer.appendChild(this.tabBar_);
+            tabContainer.appendChild(rightButton);
+            // Add and remove buttons depending on scroll position.
+            var tabScrollHandler = function () {
+                if (this.tabBar_.scrollLeft > 0) {
+                    leftButton.classList.add(this.CssClasses_.IS_ACTIVE);
+                } else {
+                    leftButton.classList.remove(this.CssClasses_.IS_ACTIVE);
+                }
+                if (this.tabBar_.scrollLeft < this.tabBar_.scrollWidth - this.tabBar_.offsetWidth) {
+                    rightButton.classList.add(this.CssClasses_.IS_ACTIVE);
+                } else {
+                    rightButton.classList.remove(this.CssClasses_.IS_ACTIVE);
+                }
+            }.bind(this);
+            this.tabBar_.addEventListener('scroll', tabScrollHandler);
+            tabScrollHandler();
+            if (this.tabBar_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
+                this.tabBar_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+            }
+            // Select element tabs, document panels
+            var tabs = this.tabBar_.querySelectorAll('.' + this.CssClasses_.TAB);
+            var panels = this.content_.querySelectorAll('.' + this.CssClasses_.PANEL);
+            // Create new tabs for each tab element
+            for (var i = 0; i < tabs.length; i++) {
+                new MaterialLayoutTab(tabs[i], tabs, panels, this);
+            }
+        }
+        this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+    }
+};
+/**
+   * Constructor for an individual tab.
+   *
+   * @constructor
+   * @param {HTMLElement} tab The HTML element for the tab.
+   * @param {!Array<HTMLElement>} tabs Array with HTML elements for all tabs.
+   * @param {!Array<HTMLElement>} panels Array with HTML elements for all panels.
+   * @param {MaterialLayout} layout The MaterialLayout object that owns the tab.
+   */
+function MaterialLayoutTab(tab, tabs, panels, layout) {
+    /**
+     * Auxiliary method to programmatically select a tab in the UI.
+     */
+    function selectTab() {
+        var href = tab.href.split('#')[1];
+        var panel = layout.content_.querySelector('#' + href);
+        layout.resetTabState_(tabs);
+        layout.resetPanelState_(panels);
+        tab.classList.add(layout.CssClasses_.IS_ACTIVE);
+        panel.classList.add(layout.CssClasses_.IS_ACTIVE);
+    }
+    if (layout.tabBar_.classList.contains(layout.CssClasses_.JS_RIPPLE_EFFECT)) {
+        var rippleContainer = document.createElement('span');
+        rippleContainer.classList.add(layout.CssClasses_.RIPPLE_CONTAINER);
+        rippleContainer.classList.add(layout.CssClasses_.JS_RIPPLE_EFFECT);
+        var ripple = document.createElement('span');
+        ripple.classList.add(layout.CssClasses_.RIPPLE);
+        rippleContainer.appendChild(ripple);
+        tab.appendChild(rippleContainer);
+    }
+    tab.addEventListener('click', function (e) {
+        if (tab.getAttribute('href').charAt(0) === '#') {
+            e.preventDefault();
+            selectTab();
+        }
+    });
+    tab.show = selectTab;
+    tab.addEventListener('click', function (e) {
+        e.preventDefault();
+        var href = tab.href.split('#')[1];
+        var panel = layout.content_.querySelector('#' + href);
+        layout.resetTabState_(tabs);
+        layout.resetPanelState_(panels);
+        tab.classList.add(layout.CssClasses_.IS_ACTIVE);
+        panel.classList.add(layout.CssClasses_.IS_ACTIVE);
+    });
+}
+window['MaterialLayoutTab'] = MaterialLayoutTab;
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialLayout,
+    classAsString: 'MaterialLayout',
+    cssClass: 'mdl-js-layout'
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Data Table Card MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {Element} element The element that will be upgraded.
+   */
+var MaterialDataTable = function MaterialDataTable(element) {
+    this.element_ = element;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialDataTable'] = MaterialDataTable;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialDataTable.prototype.Constant_ = {};
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialDataTable.prototype.CssClasses_ = {
+    DATA_TABLE: 'mdl-data-table',
+    SELECTABLE: 'mdl-data-table--selectable',
+    SELECT_ELEMENT: 'mdl-data-table__select',
+    IS_SELECTED: 'is-selected',
+    IS_UPGRADED: 'is-upgraded'
+};
+/**
+   * Generates and returns a function that toggles the selection state of a
+   * single row (or multiple rows).
+   *
+   * @param {Element} checkbox Checkbox that toggles the selection state.
+   * @param {Element} row Row to toggle when checkbox changes.
+   * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
+   * @private
+   */
+MaterialDataTable.prototype.selectRow_ = function (checkbox, row, opt_rows) {
+    if (row) {
+        return function () {
+            if (checkbox.checked) {
+                row.classList.add(this.CssClasses_.IS_SELECTED);
+            } else {
+                row.classList.remove(this.CssClasses_.IS_SELECTED);
+            }
+        }.bind(this);
+    }
+    if (opt_rows) {
+        return function () {
+            var i;
+            var el;
+            if (checkbox.checked) {
+                for (i = 0; i < opt_rows.length; i++) {
+                    el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
+                    el['MaterialCheckbox'].check();
+                    opt_rows[i].classList.add(this.CssClasses_.IS_SELECTED);
+                }
+            } else {
+                for (i = 0; i < opt_rows.length; i++) {
+                    el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
+                    el['MaterialCheckbox'].uncheck();
+                    opt_rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
+                }
+            }
+        }.bind(this);
+    }
+};
+/**
+   * Creates a checkbox for a single or or multiple rows and hooks up the
+   * event handling.
+   *
+   * @param {Element} row Row to toggle when checkbox changes.
+   * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
+   * @private
+   */
+MaterialDataTable.prototype.createCheckbox_ = function (row, opt_rows) {
+    var label = document.createElement('label');
+    var labelClasses = [
+        'mdl-checkbox',
+        'mdl-js-checkbox',
+        'mdl-js-ripple-effect',
+        this.CssClasses_.SELECT_ELEMENT
+    ];
+    label.className = labelClasses.join(' ');
+    var checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.classList.add('mdl-checkbox__input');
+    if (row) {
+        checkbox.checked = row.classList.contains(this.CssClasses_.IS_SELECTED);
+        checkbox.addEventListener('change', this.selectRow_(checkbox, row));
+    } else if (opt_rows) {
+        checkbox.addEventListener('change', this.selectRow_(checkbox, null, opt_rows));
+    }
+    label.appendChild(checkbox);
+    componentHandler.upgradeElement(label, 'MaterialCheckbox');
+    return label;
+};
+/**
+   * Initialize element.
+   */
+MaterialDataTable.prototype.init = function () {
+    if (this.element_) {
+        var firstHeader = this.element_.querySelector('th');
+        var bodyRows = Array.prototype.slice.call(this.element_.querySelectorAll('tbody tr'));
+        var footRows = Array.prototype.slice.call(this.element_.querySelectorAll('tfoot tr'));
+        var rows = bodyRows.concat(footRows);
+        if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)) {
+            var th = document.createElement('th');
+            var headerCheckbox = this.createCheckbox_(null, rows);
+            th.appendChild(headerCheckbox);
+            firstHeader.parentElement.insertBefore(th, firstHeader);
+            for (var i = 0; i < rows.length; i++) {
+                var firstCell = rows[i].querySelector('td');
+                if (firstCell) {
+                    var td = document.createElement('td');
+                    if (rows[i].parentNode.nodeName.toUpperCase() === 'TBODY') {
+                        var rowCheckbox = this.createCheckbox_(rows[i]);
+                        td.appendChild(rowCheckbox);
+                    }
+                    rows[i].insertBefore(td, firstCell);
+                }
+            }
+            this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+        }
+    }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialDataTable,
+    classAsString: 'MaterialDataTable',
+    cssClass: 'mdl-js-data-table'
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+   * Class constructor for Ripple MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+var MaterialRipple = function MaterialRipple(element) {
+    this.element_ = element;
+    // Initialize instance.
+    this.init();
+};
+window['MaterialRipple'] = MaterialRipple;
+/**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+MaterialRipple.prototype.Constant_ = {
+    INITIAL_SCALE: 'scale(0.0001, 0.0001)',
+    INITIAL_SIZE: '1px',
+    INITIAL_OPACITY: '0.4',
+    FINAL_OPACITY: '0',
+    FINAL_SCALE: ''
+};
+/**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+MaterialRipple.prototype.CssClasses_ = {
+    RIPPLE_CENTER: 'mdl-ripple--center',
+    RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+    RIPPLE: 'mdl-ripple',
+    IS_ANIMATING: 'is-animating',
+    IS_VISIBLE: 'is-visible'
+};
+/**
+   * Handle mouse / finger down on element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialRipple.prototype.downHandler_ = function (event) {
+    if (!this.rippleElement_.style.width && !this.rippleElement_.style.height) {
+        var rect = this.element_.getBoundingClientRect();
+        this.boundHeight = rect.height;
+        this.boundWidth = rect.width;
+        this.rippleSize_ = Math.sqrt(rect.width * rect.width + rect.height * rect.height) * 2 + 2;
+        this.rippleElement_.style.width = this.rippleSize_ + 'px';
+        this.rippleElement_.style.height = this.rippleSize_ + 'px';
+    }
+    this.rippleElement_.classList.add(this.CssClasses_.IS_VISIBLE);
+    if (event.type === 'mousedown' && this.ignoringMouseDown_) {
+        this.ignoringMouseDown_ = false;
+    } else {
+        if (event.type === 'touchstart') {
+            this.ignoringMouseDown_ = true;
+        }
+        var frameCount = this.getFrameCount();
+        if (frameCount > 0) {
+            return;
+        }
+        this.setFrameCount(1);
+        var bound = event.currentTarget.getBoundingClientRect();
+        var x;
+        var y;
+        // Check if we are handling a keyboard click.
+        if (event.clientX === 0 && event.clientY === 0) {
+            x = Math.round(bound.width / 2);
+            y = Math.round(bound.height / 2);
+        } else {
+            var clientX = event.clientX ? event.clientX : event.touches[0].clientX;
+            var clientY = event.clientY ? event.clientY : event.touches[0].clientY;
+            x = Math.round(clientX - bound.left);
+            y = Math.round(clientY - bound.top);
+        }
+        this.setRippleXY(x, y);
+        this.setRippleStyles(true);
+        window.requestAnimationFrame(this.animFrameHandler.bind(this));
+    }
+};
+/**
+   * Handle mouse / finger up on element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+MaterialRipple.prototype.upHandler_ = function (event) {
+    // Don't fire for the artificial "mouseup" generated by a double-click.
+    if (event && event.detail !== 2) {
+        // Allow a repaint to occur before removing this class, so the animation
+        // shows for tap events, which seem to trigger a mouseup too soon after
+        // mousedown.
+        window.setTimeout(function () {
+            this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE);
+        }.bind(this), 0);
+    }
+};
+/**
+   * Initialize element.
+   */
+MaterialRipple.prototype.init = function () {
+    if (this.element_) {
+        var recentering = this.element_.classList.contains(this.CssClasses_.RIPPLE_CENTER);
+        if (!this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT_IGNORE_EVENTS)) {
+            this.rippleElement_ = this.element_.querySelector('.' + this.CssClasses_.RIPPLE);
+            this.frameCount_ = 0;
+            this.rippleSize_ = 0;
+            this.x_ = 0;
+            this.y_ = 0;
+            // Touch start produces a compat mouse down event, which would cause a
+            // second ripples. To avoid that, we use this property to ignore the first
+            // mouse down after a touch start.
+            this.ignoringMouseDown_ = false;
+            this.boundDownHandler = this.downHandler_.bind(this);
+            this.element_.addEventListener('mousedown', this.boundDownHandler);
+            this.element_.addEventListener('touchstart', this.boundDownHandler);
+            this.boundUpHandler = this.upHandler_.bind(this);
+            this.element_.addEventListener('mouseup', this.boundUpHandler);
+            this.element_.addEventListener('mouseleave', this.boundUpHandler);
+            this.element_.addEventListener('touchend', this.boundUpHandler);
+            this.element_.addEventListener('blur', this.boundUpHandler);
+            /**
+         * Getter for frameCount_.
+         * @return {number} the frame count.
+         */
+            this.getFrameCount = function () {
+                return this.frameCount_;
+            };
+            /**
+         * Setter for frameCount_.
+         * @param {number} fC the frame count.
+         */
+            this.setFrameCount = function (fC) {
+                this.frameCount_ = fC;
+            };
+            /**
+         * Getter for rippleElement_.
+         * @return {Element} the ripple element.
+         */
+            this.getRippleElement = function () {
+                return this.rippleElement_;
+            };
+            /**
+         * Sets the ripple X and Y coordinates.
+         * @param  {number} newX the new X coordinate
+         * @param  {number} newY the new Y coordinate
+         */
+            this.setRippleXY = function (newX, newY) {
+                this.x_ = newX;
+                this.y_ = newY;
+            };
+            /**
+         * Sets the ripple styles.
+         * @param  {boolean} start whether or not this is the start frame.
+         */
+            this.setRippleStyles = function (start) {
+                if (this.rippleElement_ !== null) {
+                    var transformString;
+                    var scale;
+                    var size;
+                    var offset = 'translate(' + this.x_ + 'px, ' + this.y_ + 'px)';
+                    if (start) {
+                        scale = this.Constant_.INITIAL_SCALE;
+                        size = this.Constant_.INITIAL_SIZE;
+                    } else {
+                        scale = this.Constant_.FINAL_SCALE;
+                        size = this.rippleSize_ + 'px';
+                        if (recentering) {
+                            offset = 'translate(' + this.boundWidth / 2 + 'px, ' + this.boundHeight / 2 + 'px)';
+                        }
+                    }
+                    transformString = 'translate(-50%, -50%) ' + offset + scale;
+                    this.rippleElement_.style.webkitTransform = transformString;
+                    this.rippleElement_.style.msTransform = transformString;
+                    this.rippleElement_.style.transform = transformString;
+                    if (start) {
+                        this.rippleElement_.classList.remove(this.CssClasses_.IS_ANIMATING);
+                    } else {
+                        this.rippleElement_.classList.add(this.CssClasses_.IS_ANIMATING);
+                    }
+                }
+            };
+            /**
+         * Handles an animation frame.
+         */
+            this.animFrameHandler = function () {
+                if (this.frameCount_-- > 0) {
+                    window.requestAnimationFrame(this.animFrameHandler.bind(this));
+                } else {
+                    this.setRippleStyles(false);
+                }
+            };
+        }
+    }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+    constructor: MaterialRipple,
+    classAsString: 'MaterialRipple',
+    cssClass: 'mdl-js-ripple-effect',
+    widget: false
+});
+}());
diff --git a/material-dashboard-lite-master/dist/js/nv.d3.js b/material-dashboard-lite-master/dist/js/nv.d3.js
new file mode 100644
index 0000000..b8314da
--- /dev/null
+++ b/material-dashboard-lite-master/dist/js/nv.d3.js
@@ -0,0 +1,13789 @@
+/* nvd3 version 1.8.2 (https://github.com/novus/nvd3) 2016-01-24 */
+(function(){
+
+// set up main nv object
+var nv = {};
+
+// the major global objects under the nv namespace
+nv.dev = false; //set false when in production
+nv.tooltip = nv.tooltip || {}; // For the tooltip system
+nv.utils = nv.utils || {}; // Utility subsystem
+nv.models = nv.models || {}; //stores all the possible models/components
+nv.charts = {}; //stores all the ready to use charts
+nv.logs = {}; //stores some statistics and potential error messages
+nv.dom = {}; //DOM manipulation functions
+
+nv.dispatch = d3.dispatch('render_start', 'render_end');
+
+// Function bind polyfill
+// Needed ONLY for phantomJS as it's missing until version 2.0 which is unreleased as of this comment
+// https://github.com/ariya/phantomjs/issues/10522
+// http://kangax.github.io/compat-table/es5/#Function.prototype.bind
+// phantomJS is used for running the test suite
+if (!Function.prototype.bind) {
+    Function.prototype.bind = function (oThis) {
+        if (typeof this !== "function") {
+            // closest thing possible to the ECMAScript 5 internal IsCallable function
+            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+        }
+
+        var aArgs = Array.prototype.slice.call(arguments, 1),
+            fToBind = this,
+            fNOP = function () {},
+            fBound = function () {
+                return fToBind.apply(this instanceof fNOP && oThis
+                        ? this
+                        : oThis,
+                    aArgs.concat(Array.prototype.slice.call(arguments)));
+            };
+
+        fNOP.prototype = this.prototype;
+        fBound.prototype = new fNOP();
+        return fBound;
+    };
+}
+
+//  Development render timers - disabled if dev = false
+if (nv.dev) {
+    nv.dispatch.on('render_start', function(e) {
+        nv.logs.startTime = +new Date();
+    });
+
+    nv.dispatch.on('render_end', function(e) {
+        nv.logs.endTime = +new Date();
+        nv.logs.totalTime = nv.logs.endTime - nv.logs.startTime;
+        nv.log('total', nv.logs.totalTime); // used for development, to keep track of graph generation times
+    });
+}
+
+// Logs all arguments, and returns the last so you can test things in place
+// Note: in IE8 console.log is an object not a function, and if modernizr is used
+// then calling Function.prototype.bind with with anything other than a function
+// causes a TypeError to be thrown.
+nv.log = function() {
+    if (nv.dev && window.console && console.log && console.log.apply)
+        console.log.apply(console, arguments);
+    else if (nv.dev && window.console && typeof console.log == "function" && Function.prototype.bind) {
+        var log = Function.prototype.bind.call(console.log, console);
+        log.apply(console, arguments);
+    }
+    return arguments[arguments.length - 1];
+};
+
+// print console warning, should be used by deprecated functions
+nv.deprecated = function(name, info) {
+    if (console && console.warn) {
+        console.warn('nvd3 warning: `' + name + '` has been deprecated. ', info || '');
+    }
+};
+
+// The nv.render function is used to queue up chart rendering
+// in non-blocking async functions.
+// When all queued charts are done rendering, nv.dispatch.render_end is invoked.
+nv.render = function render(step) {
+    // number of graphs to generate in each timeout loop
+    step = step || 1;
+
+    nv.render.active = true;
+    nv.dispatch.render_start();
+
+    var renderLoop = function() {
+        var chart, graph;
+
+        for (var i = 0; i < step && (graph = nv.render.queue[i]); i++) {
+            chart = graph.generate();
+            if (typeof graph.callback == typeof(Function)) graph.callback(chart);
+        }
+
+        nv.render.queue.splice(0, i);
+
+        if (nv.render.queue.length) {
+            setTimeout(renderLoop);
+        }
+        else {
+            nv.dispatch.render_end();
+            nv.render.active = false;
+        }
+    };
+
+    setTimeout(renderLoop);
+};
+
+nv.render.active = false;
+nv.render.queue = [];
+
+/*
+Adds a chart to the async rendering queue. This method can take arguments in two forms:
+nv.addGraph({
+    generate: <Function>
+    callback: <Function>
+})
+
+or
+
+nv.addGraph(<generate Function>, <callback Function>)
+
+The generate function should contain code that creates the NVD3 model, sets options
+on it, adds data to an SVG element, and invokes the chart model. The generate function
+should return the chart model.  See examples/lineChart.html for a usage example.
+
+The callback function is optional, and it is called when the generate function completes.
+*/
+nv.addGraph = function(obj) {
+    if (typeof arguments[0] === typeof(Function)) {
+        obj = {generate: arguments[0], callback: arguments[1]};
+    }
+
+    nv.render.queue.push(obj);
+
+    if (!nv.render.active) {
+        nv.render();
+    }
+};
+
+// Node/CommonJS exports
+if (typeof(module) !== 'undefined' && typeof(exports) !== 'undefined') {
+  module.exports = nv;
+}
+
+if (typeof(window) !== 'undefined') {
+  window.nv = nv;
+}
+/* Facade for queueing DOM write operations
+ * with Fastdom (https://github.com/wilsonpage/fastdom)
+ * if available.
+ * This could easily be extended to support alternate
+ * implementations in the future.
+ */
+nv.dom.write = function(callback) {
+	if (window.fastdom !== undefined) {
+		return fastdom.write(callback);
+	}
+	return callback();
+};
+
+/* Facade for queueing DOM read operations
+ * with Fastdom (https://github.com/wilsonpage/fastdom)
+ * if available.
+ * This could easily be extended to support alternate
+ * implementations in the future.
+ */
+nv.dom.read = function(callback) {
+	if (window.fastdom !== undefined) {
+		return fastdom.read(callback);
+	}
+	return callback();
+};/* Utility class to handle creation of an interactive layer.
+ This places a rectangle on top of the chart. When you mouse move over it, it sends a dispatch
+ containing the X-coordinate. It can also render a vertical line where the mouse is located.
+
+ dispatch.elementMousemove is the important event to latch onto.  It is fired whenever the mouse moves over
+ the rectangle. The dispatch is given one object which contains the mouseX/Y location.
+ It also has 'pointXValue', which is the conversion of mouseX to the x-axis scale.
+ */
+nv.interactiveGuideline = function() {
+    "use strict";
+
+    var margin = { left: 0, top: 0 } //Pass the chart's top and left magins. Used to calculate the mouseX/Y.
+        ,   width = null
+        ,   height = null
+        ,   xScale = d3.scale.linear()
+        ,   dispatch = d3.dispatch('elementMousemove', 'elementMouseout', 'elementClick', 'elementDblclick', 'elementMouseDown', 'elementMouseUp')
+        ,   showGuideLine = true
+        ,   svgContainer = null // Must pass the chart's svg, we'll use its mousemove event.
+        ,   tooltip = nv.models.tooltip()
+        ,   isMSIE = "ActiveXObject" in window // Checkt if IE by looking for activeX.
+    ;
+
+    tooltip
+        .duration(0)
+        .hideDelay(0)
+        .hidden(false);
+
+    function layer(selection) {
+        selection.each(function(data) {
+            var container = d3.select(this);
+            var availableWidth = (width || 960), availableHeight = (height || 400);
+            var wrap = container.selectAll("g.nv-wrap.nv-interactiveLineLayer")
+                .data([data]);
+            var wrapEnter = wrap.enter()
+                .append("g").attr("class", " nv-wrap nv-interactiveLineLayer");
+            wrapEnter.append("g").attr("class","nv-interactiveGuideLine");
+
+            if (!svgContainer) {
+                return;
+            }
+
+            function mouseHandler() {
+                var d3mouse = d3.mouse(this);
+                var mouseX = d3mouse[0];
+                var mouseY = d3mouse[1];
+                var subtractMargin = true;
+                var mouseOutAnyReason = false;
+                if (isMSIE) {
+                    /*
+                     D3.js (or maybe SVG.getScreenCTM) has a nasty bug in Internet Explorer 10.
+                     d3.mouse() returns incorrect X,Y mouse coordinates when mouse moving
+                     over a rect in IE 10.
+                     However, d3.event.offsetX/Y also returns the mouse coordinates
+                     relative to the triggering <rect>. So we use offsetX/Y on IE.
+                     */
+                    mouseX = d3.event.offsetX;
+                    mouseY = d3.event.offsetY;
+
+                    /*
+                     On IE, if you attach a mouse event listener to the <svg> container,
+                     it will actually trigger it for all the child elements (like <path>, <circle>, etc).
+                     When this happens on IE, the offsetX/Y is set to where ever the child element
+                     is located.
+                     As a result, we do NOT need to subtract margins to figure out the mouse X/Y
+                     position under this scenario. Removing the line below *will* cause
+                     the interactive layer to not work right on IE.
+                     */
+                    if(d3.event.target.tagName !== "svg") {
+                        subtractMargin = false;
+                    }
+
+                    if (d3.event.target.className.baseVal.match("nv-legend")) {
+                        mouseOutAnyReason = true;
+                    }
+
+                }
+
+                if(subtractMargin) {
+                    mouseX -= margin.left;
+                    mouseY -= margin.top;
+                }
+
+                /* If mouseX/Y is outside of the chart's bounds,
+                 trigger a mouseOut event.
+                 */
+                if (mouseX < 0 || mouseY < 0
+                    || mouseX > availableWidth || mouseY > availableHeight
+                    || (d3.event.relatedTarget && d3.event.relatedTarget.ownerSVGElement === undefined)
+                    || mouseOutAnyReason
+                    ) {
+
+                    if (isMSIE) {
+                        if (d3.event.relatedTarget
+                            && d3.event.relatedTarget.ownerSVGElement === undefined
+                            && (d3.event.relatedTarget.className === undefined
+                                || d3.event.relatedTarget.className.match(tooltip.nvPointerEventsClass))) {
+
+                            return;
+                        }
+                    }
+                    dispatch.elementMouseout({
+                        mouseX: mouseX,
+                        mouseY: mouseY
+                    });
+                    layer.renderGuideLine(null); //hide the guideline
+                    tooltip.hidden(true);
+                    return;
+                } else {
+                    tooltip.hidden(false);
+                }
+
+
+                var scaleIsOrdinal = typeof xScale.rangeBands === 'function';
+                var pointXValue = undefined;
+
+                // Ordinal scale has no invert method
+                if (scaleIsOrdinal) {
+                    var elementIndex = d3.bisect(xScale.range(), mouseX) - 1;
+                    // Check if mouseX is in the range band
+                    if (xScale.range()[elementIndex] + xScale.rangeBand() >= mouseX) {
+                        pointXValue = xScale.domain()[d3.bisect(xScale.range(), mouseX) - 1];
+                    }
+                    else {
+                        dispatch.elementMouseout({
+                            mouseX: mouseX,
+                            mouseY: mouseY
+                        });
+                        layer.renderGuideLine(null); //hide the guideline
+                        tooltip.hidden(true);
+                        return;
+                    }
+                }
+                else {
+                    pointXValue = xScale.invert(mouseX);
+                }
+
+                dispatch.elementMousemove({
+                    mouseX: mouseX,
+                    mouseY: mouseY,
+                    pointXValue: pointXValue
+                });
+
+                //If user double clicks the layer, fire a elementDblclick
+                if (d3.event.type === "dblclick") {
+                    dispatch.elementDblclick({
+                        mouseX: mouseX,
+                        mouseY: mouseY,
+                        pointXValue: pointXValue
+                    });
+                }
+
+                // if user single clicks the layer, fire elementClick
+                if (d3.event.type === 'click') {
+                    dispatch.elementClick({
+                        mouseX: mouseX,
+                        mouseY: mouseY,
+                        pointXValue: pointXValue
+                    });
+                }
+
+                // if user presses mouse down the layer, fire elementMouseDown
+                if (d3.event.type === 'mousedown') {
+                	dispatch.elementMouseDown({
+                		mouseX: mouseX,
+                		mouseY: mouseY,
+                		pointXValue: pointXValue
+                	});
+                }
+
+                // if user presses mouse down the layer, fire elementMouseUp
+                if (d3.event.type === 'mouseup') {
+                	dispatch.elementMouseUp({
+                		mouseX: mouseX,
+                		mouseY: mouseY,
+                		pointXValue: pointXValue
+                	});
+                }
+            }
+
+            svgContainer
+                .on("touchmove",mouseHandler)
+                .on("mousemove",mouseHandler, true)
+                .on("mouseout" ,mouseHandler,true)
+                .on("mousedown" ,mouseHandler,true)
+                .on("mouseup" ,mouseHandler,true)
+                .on("dblclick" ,mouseHandler)
+                .on("click", mouseHandler)
+            ;
+
+            layer.guideLine = null;
+            //Draws a vertical guideline at the given X postion.
+            layer.renderGuideLine = function(x) {
+                if (!showGuideLine) return;
+                if (layer.guideLine && layer.guideLine.attr("x1") === x) return;
+                nv.dom.write(function() {
+                    var line = wrap.select(".nv-interactiveGuideLine")
+                        .selectAll("line")
+                        .data((x != null) ? [nv.utils.NaNtoZero(x)] : [], String);
+                    line.enter()
+                        .append("line")
+                        .attr("class", "nv-guideline")
+                        .attr("x1", function(d) { return d;})
+                        .attr("x2", function(d) { return d;})
+                        .attr("y1", availableHeight)
+                        .attr("y2",0);
+                    line.exit().remove();
+                });
+            }
+        });
+    }
+
+    layer.dispatch = dispatch;
+    layer.tooltip = tooltip;
+
+    layer.margin = function(_) {
+        if (!arguments.length) return margin;
+        margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
+        margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
+        return layer;
+    };
+
+    layer.width = function(_) {
+        if (!arguments.length) return width;
+        width = _;
+        return layer;
+    };
+
+    layer.height = function(_) {
+        if (!arguments.length) return height;
+        height = _;
+        return layer;
+    };
+
+    layer.xScale = function(_) {
+        if (!arguments.length) return xScale;
+        xScale = _;
+        return layer;
+    };
+
+    layer.showGuideLine = function(_) {
+        if (!arguments.length) return showGuideLine;
+        showGuideLine = _;
+        return layer;
+    };
+
+    layer.svgContainer = function(_) {
+        if (!arguments.length) return svgContainer;
+        svgContainer = _;
+        return layer;
+    };
+
+    return layer;
+};
+
+/* Utility class that uses d3.bisect to find the index in a given array, where a search value can be inserted.
+ This is different from normal bisectLeft; this function finds the nearest index to insert the search value.
+
+ For instance, lets say your array is [1,2,3,5,10,30], and you search for 28.
+ Normal d3.bisectLeft will return 4, because 28 is inserted after the number 10.  But interactiveBisect will return 5
+ because 28 is closer to 30 than 10.
+
+ Unit tests can be found in: interactiveBisectTest.html
+
+ Has the following known issues:
+ * Will not work if the data points move backwards (ie, 10,9,8,7, etc) or if the data points are in random order.
+ * Won't work if there are duplicate x coordinate values.
+ */
+nv.interactiveBisect = function (values, searchVal, xAccessor) {
+    "use strict";
+    if (! (values instanceof Array)) {
+        return null;
+    }
+    var _xAccessor;
+    if (typeof xAccessor !== 'function') {
+        _xAccessor = function(d) {
+            return d.x;
+        }
+    } else {
+        _xAccessor = xAccessor;
+    }
+    var _cmp = function(d, v) {
+        // Accessors are no longer passed the index of the element along with
+        // the element itself when invoked by d3.bisector.
+        //
+        // Starting at D3 v3.4.4, d3.bisector() started inspecting the
+        // function passed to determine if it should consider it an accessor
+        // or a comparator. This meant that accessors that take two arguments
+        // (expecting an index as the second parameter) are treated as
+        // comparators where the second argument is the search value against
+        // which the first argument is compared.
+        return _xAccessor(d) - v;
+    };
+
+    var bisect = d3.bisector(_cmp).left;
+    var index = d3.max([0, bisect(values,searchVal) - 1]);
+    var currentValue = _xAccessor(values[index]);
+
+    if (typeof currentValue === 'undefined') {
+        currentValue = index;
+    }
+
+    if (currentValue === searchVal) {
+        return index; //found exact match
+    }
+
+    var nextIndex = d3.min([index+1, values.length - 1]);
+    var nextValue = _xAccessor(values[nextIndex]);
+
+    if (typeof nextValue === 'undefined') {
+        nextValue = nextIndex;
+    }
+
+    if (Math.abs(nextValue - searchVal) >= Math.abs(currentValue - searchVal)) {
+        return index;
+    } else {
+        return nextIndex
+    }
+};
+
+/*
+ Returns the index in the array "values" that is closest to searchVal.
+ Only returns an index if searchVal is within some "threshold".
+ Otherwise, returns null.
+ */
+nv.nearestValueIndex = function (values, searchVal, threshold) {
+    "use strict";
+    var yDistMax = Infinity, indexToHighlight = null;
+    values.forEach(function(d,i) {
+        var delta = Math.abs(searchVal - d);
+        if ( d != null && delta <= yDistMax && delta < threshold) {
+            yDistMax = delta;
+            indexToHighlight = i;
+        }
+    });
+    return indexToHighlight;
+};
+
+/* Model which can be instantiated to handle tooltip rendering.
+ Example usage:
+ var tip = nv.models.tooltip().gravity('w').distance(23)
+ .data(myDataObject);
+
+ tip();    //just invoke the returned function to render tooltip.
+ */
+nv.models.tooltip = function() {
+    "use strict";
+
+    /*
+    Tooltip data. If data is given in the proper format, a consistent tooltip is generated.
+    Example Format of data:
+    {
+        key: "Date",
+        value: "August 2009",
+        series: [
+            {key: "Series 1", value: "Value 1", color: "#000"},
+            {key: "Series 2", value: "Value 2", color: "#00f"}
+        ]
+    }
+    */
+    var id = "nvtooltip-" + Math.floor(Math.random() * 100000) // Generates a unique id when you create a new tooltip() object.
+        ,   data = null
+        ,   gravity = 'w'   // Can be 'n','s','e','w'. Determines how tooltip is positioned.
+        ,   distance = 25 // Distance to offset tooltip from the mouse location.
+        ,   snapDistance = 0   // Tolerance allowed before tooltip is moved from its current position (creates 'snapping' effect)
+        ,   classes = null  // Attaches additional CSS classes to the tooltip DIV that is created.
+        ,   chartContainer = null // Parent dom element of the SVG that holds the chart.
+        ,   hidden = true  // Start off hidden, toggle with hide/show functions below.
+        ,   hideDelay = 200  // Delay (in ms) before the tooltip hides after calling hide().
+        ,   tooltip = null // d3 select of the tooltip div.
+        ,   lastPosition = { left: null, top: null } // Last position the tooltip was in.
+        ,   enabled = true  // True -> tooltips are rendered. False -> don't render tooltips.
+        ,   duration = 100 // Tooltip movement duration, in ms.
+        ,   headerEnabled = true // If is to show the tooltip header.
+        ,   nvPointerEventsClass = "nv-pointer-events-none" // CSS class to specify whether element should not have mouse events.
+    ;
+
+    /*
+     Function that returns the position (relative to the viewport) the tooltip should be placed in.
+     Should return: {
+        left: <leftPos>,
+        top: <topPos>
+     }
+     */
+    var position = function() {
+        return {
+            left: d3.event !== null ? d3.event.clientX : 0,
+            top: d3.event !== null ? d3.event.clientY : 0
+        };
+    };
+
+    // Format function for the tooltip values column.
+    var valueFormatter = function(d, i) {
+        return d;
+    };
+
+    // Format function for the tooltip header value.
+    var headerFormatter = function(d) {
+        return d;
+    };
+
+    var keyFormatter = function(d, i) {
+        return d;
+    };
+
+    // By default, the tooltip model renders a beautiful table inside a DIV.
+    // You can override this function if a custom tooltip is desired.
+    var contentGenerator = function(d) {
+        if (d === null) {
+            return '';
+        }
+
+        var table = d3.select(document.createElement("table"));
+        if (headerEnabled) {
+            var theadEnter = table.selectAll("thead")
+                .data([d])
+                .enter().append("thead");
+
+            theadEnter.append("tr")
+                .append("td")
+                .attr("colspan", 3)
+                .append("strong")
+                .classed("x-value", true)
+                .html(headerFormatter(d.value));
+        }
+
+        var tbodyEnter = table.selectAll("tbody")
+            .data([d])
+            .enter().append("tbody");
+
+        var trowEnter = tbodyEnter.selectAll("tr")
+                .data(function(p) { return p.series})
+                .enter()
+                .append("tr")
+                .classed("highlight", function(p) { return p.highlight});
+
+        trowEnter.append("td")
+            .classed("legend-color-guide",true)
+            .append("div")
+            .style("background-color", function(p) { return p.color});
+
+        trowEnter.append("td")
+            .classed("key",true)
+            .classed("total",function(p) { return !!p.total})
+            .html(function(p, i) { return keyFormatter(p.key, i)});
+
+        trowEnter.append("td")
+            .classed("value",true)
+            .html(function(p, i) { return valueFormatter(p.value, i) });
+
+        trowEnter.selectAll("td").each(function(p) {
+            if (p.highlight) {
+                var opacityScale = d3.scale.linear().domain([0,1]).range(["#fff",p.color]);
+                var opacity = 0.6;
+                d3.select(this)
+                    .style("border-bottom-color", opacityScale(opacity))
+                    .style("border-top-color", opacityScale(opacity))
+                ;
+            }
+        });
+
+        var html = table.node().outerHTML;
+        if (d.footer !== undefined)
+            html += "<div class='footer'>" + d.footer + "</div>";
+        return html;
+
+    };
+
+    var dataSeriesExists = function(d) {
+        if (d && d.series) {
+            if (d.series instanceof Array) {
+                return !!d.series.length;
+            }
+            // if object, it's okay just convert to array of the object
+            if (d.series instanceof Object) {
+                d.series = [d.series];
+                return true;
+            }
+        }
+        return false;
+    };
+
+    // Calculates the gravity offset of the tooltip. Parameter is position of tooltip
+    // relative to the viewport.
+    var calcGravityOffset = function(pos) {
+        var height = tooltip.node().offsetHeight,
+            width = tooltip.node().offsetWidth,
+            clientWidth = document.documentElement.clientWidth, // Don't want scrollbars.
+            clientHeight = document.documentElement.clientHeight, // Don't want scrollbars.
+            left, top, tmp;
+
+        // calculate position based on gravity
+        switch (gravity) {
+            case 'e':
+                left = - width - distance;
+                top = - (height / 2);
+                if(pos.left + left < 0) left = distance;
+                if((tmp = pos.top + top) < 0) top -= tmp;
+                if((tmp = pos.top + top + height) > clientHeight) top -= tmp - clientHeight;
+                break;
+            case 'w':
+                left = distance;
+                top = - (height / 2);
+                if (pos.left + left + width > clientWidth) left = - width - distance;
+                if ((tmp = pos.top + top) < 0) top -= tmp;
+                if ((tmp = pos.top + top + height) > clientHeight) top -= tmp - clientHeight;
+                break;
+            case 'n':
+                left = - (width / 2) - 5; // - 5 is an approximation of the mouse's height.
+                top = distance;
+                if (pos.top + top + height > clientHeight) top = - height - distance;
+                if ((tmp = pos.left + left) < 0) left -= tmp;
+                if ((tmp = pos.left + left + width) > clientWidth) left -= tmp - clientWidth;
+                break;
+            case 's':
+                left = - (width / 2);
+                top = - height - distance;
+                if (pos.top + top < 0) top = distance;
+                if ((tmp = pos.left + left) < 0) left -= tmp;
+                if ((tmp = pos.left + left + width) > clientWidth) left -= tmp - clientWidth;
+                break;
+            case 'center':
+                left = - (width / 2);
+                top = - (height / 2);
+                break;
+            default:
+                left = 0;
+                top = 0;
+                break;
+        }
+
+        return { 'left': left, 'top': top };
+    };
+
+    /*
+     Positions the tooltip in the correct place, as given by the position() function.
+     */
+    var positionTooltip = function() {
+        nv.dom.read(function() {
+            var pos = position(),
+                gravityOffset = calcGravityOffset(pos),
+                left = pos.left + gravityOffset.left,
+                top = pos.top + gravityOffset.top;
+
+            // delay hiding a bit to avoid flickering
+            if (hidden) {
+                tooltip
+                    .interrupt()
+                    .transition()
+                    .delay(hideDelay)
+                    .duration(0)
+                    .style('opacity', 0);
+            } else {
+                // using tooltip.style('transform') returns values un-usable for tween
+                var old_translate = 'translate(' + lastPosition.left + 'px, ' + lastPosition.top + 'px)';
+                var new_translate = 'translate(' + left + 'px, ' + top + 'px)';
+                var translateInterpolator = d3.interpolateString(old_translate, new_translate);
+                var is_hidden = tooltip.style('opacity') < 0.1;
+
+                tooltip
+                    .interrupt() // cancel running transitions
+                    .transition()
+                    .duration(is_hidden ? 0 : duration)
+                    // using tween since some versions of d3 can't auto-tween a translate on a div
+                    .styleTween('transform', function (d) {
+                        return translateInterpolator;
+                    }, 'important')
+                    // Safari has its own `-webkit-transform` and does not support `transform`
+                    .styleTween('-webkit-transform', function (d) {
+                        return translateInterpolator;
+                    })
+                    .style('-ms-transform', new_translate)
+                    .style('opacity', 1);
+            }
+
+            lastPosition.left = left;
+            lastPosition.top = top;
+        });
+    };
+
+    // Creates new tooltip container, or uses existing one on DOM.
+    function initTooltip() {
+        if (!tooltip) {
+            var container = chartContainer ? chartContainer : document.body;
+
+            // Create new tooltip div if it doesn't exist on DOM.
+            tooltip = d3.select(container).append("div")
+                .attr("class", "nvtooltip " + (classes ? classes : "xy-tooltip"))
+                .attr("id", id);
+            tooltip.style("top", 0).style("left", 0);
+            tooltip.style('opacity', 0);
+            tooltip.style('position', 'fixed');
+            tooltip.selectAll("div, table, td, tr").classed(nvPointerEventsClass, true);
+            tooltip.classed(nvPointerEventsClass, true);
+        }
+    }
+
+    // Draw the tooltip onto the DOM.
+    function nvtooltip() {
+        if (!enabled) return;
+        if (!dataSeriesExists(data)) return;
+
+        nv.dom.write(function () {
+            initTooltip();
+            // Generate data and set it into tooltip.
+            // Bonus - If you override contentGenerator and return falsey you can use something like
+            //         React or Knockout to bind the data for your tooltip.
+            var newContent = contentGenerator(data);
+            if (newContent) {
+                tooltip.node().innerHTML = newContent;
+            }
+
+            positionTooltip();
+        });
+
+        return nvtooltip;
+    }
+
+    nvtooltip.nvPointerEventsClass = nvPointerEventsClass;
+    nvtooltip.options = nv.utils.optionsFunc.bind(nvtooltip);
+
+    nvtooltip._options = Object.create({}, {
+        // simple read/write options
+        duration: {get: function(){return duration;}, set: function(_){duration=_;}},
+        gravity: {get: function(){return gravity;}, set: function(_){gravity=_;}},
+        distance: {get: function(){return distance;}, set: function(_){distance=_;}},
+        snapDistance: {get: function(){return snapDistance;}, set: function(_){snapDistance=_;}},
+        classes: {get: function(){return classes;}, set: function(_){classes=_;}},
+        chartContainer: {get: function(){return chartContainer;}, set: function(_){chartContainer=_;}},
+        enabled: {get: function(){return enabled;}, set: function(_){enabled=_;}},
+        hideDelay: {get: function(){return hideDelay;}, set: function(_){hideDelay=_;}},
+        contentGenerator: {get: function(){return contentGenerator;}, set: function(_){contentGenerator=_;}},
+        valueFormatter: {get: function(){return valueFormatter;}, set: function(_){valueFormatter=_;}},
+        headerFormatter: {get: function(){return headerFormatter;}, set: function(_){headerFormatter=_;}},
+        keyFormatter: {get: function(){return keyFormatter;}, set: function(_){keyFormatter=_;}},
+        headerEnabled: {get: function(){return headerEnabled;}, set: function(_){headerEnabled=_;}},
+        position: {get: function(){return position;}, set: function(_){position=_;}},
+
+        // Deprecated options
+        fixedTop: {get: function(){return null;}, set: function(_){
+            // deprecated after 1.8.1
+            nv.deprecated('fixedTop', 'feature removed after 1.8.1');
+        }},
+        offset: {get: function(){return {left: 0, top: 0};}, set: function(_){
+            // deprecated after 1.8.1
+            nv.deprecated('offset', 'use chart.tooltip.distance() instead');
+        }},
+
+        // options with extra logic
+        hidden: {get: function(){return hidden;}, set: function(_){
+            if (hidden != _) {
+                hidden = !!_;
+                nvtooltip();
+            }
+        }},
+        data: {get: function(){return data;}, set: function(_){
+            // if showing a single data point, adjust data format with that
+            if (_.point) {
+                _.value = _.point.x;
+                _.series = _.series || {};
+                _.series.value = _.point.y;
+                _.series.color = _.point.color || _.series.color;
+            }
+            data = _;
+        }},
+
+        // read only properties
+        node: {get: function(){return tooltip.node();}, set: function(_){}},
+        id: {get: function(){return id;}, set: function(_){}}
+    });
+
+    nv.utils.initOptions(nvtooltip);
+    return nvtooltip;
+};
+
+
+/*
+Gets the browser window size
+
+Returns object with height and width properties
+ */
+nv.utils.windowSize = function() {
+    // Sane defaults
+    var size = {width: 640, height: 480};
+
+    // Most recent browsers use
+    if (window.innerWidth && window.innerHeight) {
+        size.width = window.innerWidth;
+        size.height = window.innerHeight;
+        return (size);
+    }
+
+    // IE can use depending on mode it is in
+    if (document.compatMode=='CSS1Compat' &&
+        document.documentElement &&
+        document.documentElement.offsetWidth ) {
+
+        size.width = document.documentElement.offsetWidth;
+        size.height = document.documentElement.offsetHeight;
+        return (size);
+    }
+
+    // Earlier IE uses Doc.body
+    if (document.body && document.body.offsetWidth) {
+        size.width = document.body.offsetWidth;
+        size.height = document.body.offsetHeight;
+        return (size);
+    }
+
+    return (size);
+};
+
+/*
+Binds callback function to run when window is resized
+ */
+nv.utils.windowResize = function(handler) {
+    if (window.addEventListener) {
+        window.addEventListener('resize', handler);
+    } else {
+        nv.log("ERROR: Failed to bind to window.resize with: ", handler);
+    }
+    // return object with clear function to remove the single added callback.
+    return {
+        callback: handler,
+        clear: function() {
+            window.removeEventListener('resize', handler);
+        }
+    }
+};
+
+
+/*
+Backwards compatible way to implement more d3-like coloring of graphs.
+Can take in nothing, an array, or a function/scale
+To use a normal scale, get the range and pass that because we must be able
+to take two arguments and use the index to keep backward compatibility
+*/
+nv.utils.getColor = function(color) {
+    //if you pass in nothing, get default colors back
+    if (color === undefined) {
+        return nv.utils.defaultColor();
+
+    //if passed an array, turn it into a color scale
+    // use isArray, instanceof fails if d3 range is created in an iframe
+    } else if(Array.isArray(color)) {
+        var color_scale = d3.scale.ordinal().range(color);
+        return function(d, i) {
+            var key = i === undefined ? d : i;
+            return d.color || color_scale(key);
+        };
+
+    //if passed a function or scale, return it, or whatever it may be
+    //external libs, such as angularjs-nvd3-directives use this
+    } else {
+        //can't really help it if someone passes rubbish as color
+        return color;
+    }
+};
+
+
+/*
+Default color chooser uses a color scale of 20 colors from D3
+ https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors
+ */
+nv.utils.defaultColor = function() {
+    // get range of the scale so we'll turn it into our own function.
+    return nv.utils.getColor(d3.scale.category20().range());
+};
+
+
+/*
+Returns a color function that takes the result of 'getKey' for each series and
+looks for a corresponding color from the dictionary
+*/
+nv.utils.customTheme = function(dictionary, getKey, defaultColors) {
+    // use default series.key if getKey is undefined
+    getKey = getKey || function(series) { return series.key };
+    defaultColors = defaultColors || d3.scale.category20().range();
+
+    // start at end of default color list and walk back to index 0
+    var defIndex = defaultColors.length;
+
+    return function(series, index) {
+        var key = getKey(series);
+        if (typeof dictionary[key] === 'function') {
+            return dictionary[key]();
+        } else if (dictionary[key] !== undefined) {
+            return dictionary[key];
+        } else {
+            // no match in dictionary, use a default color
+            if (!defIndex) {
+                // used all the default colors, start over
+                defIndex = defaultColors.length;
+            }
+            defIndex = defIndex - 1;
+            return defaultColors[defIndex];
+        }
+    };
+};
+
+
+/*
+From the PJAX example on d3js.org, while this is not really directly needed
+it's a very cool method for doing pjax, I may expand upon it a little bit,
+open to suggestions on anything that may be useful
+*/
+nv.utils.pjax = function(links, content) {
+
+    var load = function(href) {
+        d3.html(href, function(fragment) {
+            var target = d3.select(content).node();
+            target.parentNode.replaceChild(
+                d3.select(fragment).select(content).node(),
+                target);
+            nv.utils.pjax(links, content);
+        });
+    };
+
+    d3.selectAll(links).on("click", function() {
+        history.pushState(this.href, this.textContent, this.href);
+        load(this.href);
+        d3.event.preventDefault();
+    });
+
+    d3.select(window).on("popstate", function() {
+        if (d3.event.state) {
+            load(d3.event.state);
+        }
+    });
+};
+
+
+/*
+For when we want to approximate the width in pixels for an SVG:text element.
+Most common instance is when the element is in a display:none; container.
+Forumla is : text.length * font-size * constant_factor
+*/
+nv.utils.calcApproxTextWidth = function (svgTextElem) {
+    if (typeof svgTextElem.style === 'function'
+        && typeof svgTextElem.text === 'function') {
+
+        var fontSize = parseInt(svgTextElem.style("font-size").replace("px",""), 10);
+        var textLength = svgTextElem.text().length;
+        return textLength * fontSize * 0.5;
+    }
+    return 0;
+};
+
+
+/*
+Numbers that are undefined, null or NaN, convert them to zeros.
+*/
+nv.utils.NaNtoZero = function(n) {
+    if (typeof n !== 'number'
+        || isNaN(n)
+        || n === null
+        || n === Infinity
+        || n === -Infinity) {
+
+        return 0;
+    }
+    return n;
+};
+
+/*
+Add a way to watch for d3 transition ends to d3
+*/
+d3.selection.prototype.watchTransition = function(renderWatch){
+    var args = [this].concat([].slice.call(arguments, 1));
+    return renderWatch.transition.apply(renderWatch, args);
+};
+
+
+/*
+Helper object to watch when d3 has rendered something
+*/
+nv.utils.renderWatch = function(dispatch, duration) {
+    if (!(this instanceof nv.utils.renderWatch)) {
+        return new nv.utils.renderWatch(dispatch, duration);
+    }
+
+    var _duration = duration !== undefined ? duration : 250;
+    var renderStack = [];
+    var self = this;
+
+    this.models = function(models) {
+        models = [].slice.call(arguments, 0);
+        models.forEach(function(model){
+            model.__rendered = false;
+            (function(m){
+                m.dispatch.on('renderEnd', function(arg){
+                    m.__rendered = true;
+                    self.renderEnd('model');
+                });
+            })(model);
+
+            if (renderStack.indexOf(model) < 0) {
+                renderStack.push(model);
+            }
+        });
+    return this;
+    };
+
+    this.reset = function(duration) {
+        if (duration !== undefined) {
+            _duration = duration;
+        }
+        renderStack = [];
+    };
+
+    this.transition = function(selection, args, duration) {
+        args = arguments.length > 1 ? [].slice.call(arguments, 1) : [];
+
+        if (args.length > 1) {
+            duration = args.pop();
+        } else {
+            duration = _duration !== undefined ? _duration : 250;
+        }
+        selection.__rendered = false;
+
+        if (renderStack.indexOf(selection) < 0) {
+            renderStack.push(selection);
+        }
+
+        if (duration === 0) {
+            selection.__rendered = true;
+            selection.delay = function() { return this; };
+            selection.duration = function() { return this; };
+            return selection;
+        } else {
+            if (selection.length === 0) {
+                selection.__rendered = true;
+            } else if (selection.every( function(d){ return !d.length; } )) {
+                selection.__rendered = true;
+            } else {
+                selection.__rendered = false;
+            }
+
+            var n = 0;
+            return selection
+                .transition()
+                .duration(duration)
+                .each(function(){ ++n; })
+                .each('end', function(d, i) {
+                    if (--n === 0) {
+                        selection.__rendered = true;
+                        self.renderEnd.apply(this, args);
+                    }
+                });
+        }
+    };
+
+    this.renderEnd = function() {
+        if (renderStack.every( function(d){ return d.__rendered; } )) {
+            renderStack.forEach( function(d){ d.__rendered = false; });
+            dispatch.renderEnd.apply(this, arguments);
+        }
+    }
+
+};
+
+
+/*
+Takes multiple objects and combines them into the first one (dst)
+example:  nv.utils.deepExtend({a: 1}, {a: 2, b: 3}, {c: 4});
+gives:  {a: 2, b: 3, c: 4}
+*/
+nv.utils.deepExtend = function(dst){
+    var sources = arguments.length > 1 ? [].slice.call(arguments, 1) : [];
+    sources.forEach(function(source) {
+        for (var key in source) {
+            var isArray = dst[key] instanceof Array;
+            var isObject = typeof dst[key] === 'object';
+            var srcObj = typeof source[key] === 'object';
+
+            if (isObject && !isArray && srcObj) {
+                nv.utils.deepExtend(dst[key], source[key]);
+            } else {
+                dst[key] = source[key];
+            }
+        }
+    });
+};
+
+
+/*
+state utility object, used to track d3 states in the models
+*/
+nv.utils.state = function(){
+    if (!(this instanceof nv.utils.state)) {
+        return new nv.utils.state();
+    }
+    var state = {};
+    var _self = this;
+    var _setState = function(){};
+    var _getState = function(){ return {}; };
+    var init = null;
+    var changed = null;
+
+    this.dispatch = d3.dispatch('change', 'set');
+
+    this.dispatch.on('set', function(state){
+        _setState(state, true);
+    });
+
+    this.getter = function(fn){
+        _getState = fn;
+        return this;
+    };
+
+    this.setter = function(fn, callback) {
+        if (!callback) {
+            callback = function(){};
+        }
+        _setState = function(state, update){
+            fn(state);
+            if (update) {
+                callback();
+            }
+        };
+        return this;
+    };
+
+    this.init = function(state){
+        init = init || {};
+        nv.utils.deepExtend(init, state);
+    };
+
+    var _set = function(){
+        var settings = _getState();
+
+        if (JSON.stringify(settings) === JSON.stringify(state)) {
+            return false;
+        }
+
+        for (var key in settings) {
+            if (state[key] === undefined) {
+                state[key] = {};
+            }
+            state[key] = settings[key];
+            changed = true;
+        }
+        return true;
+    };
+
+    this.update = function(){
+        if (init) {
+            _setState(init, false);
+            init = null;
+        }
+        if (_set.call(this)) {
+            this.dispatch.change(state);
+        }
+    };
+
+};
+
+
+/*
+Snippet of code you can insert into each nv.models.* to give you the ability to
+do things like:
+chart.options({
+  showXAxis: true,
+  tooltips: true
+});
+
+To enable in the chart:
+chart.options = nv.utils.optionsFunc.bind(chart);
+*/
+nv.utils.optionsFunc = function(args) {
+    if (args) {
+        d3.map(args).forEach((function(key,value) {
+            if (typeof this[key] === "function") {
+                this[key](value);
+            }
+        }).bind(this));
+    }
+    return this;
+};
+
+
+/*
+numTicks:  requested number of ticks
+data:  the chart data
+
+returns the number of ticks to actually use on X axis, based on chart data
+to avoid duplicate ticks with the same value
+*/
+nv.utils.calcTicksX = function(numTicks, data) {
+    // find max number of values from all data streams
+    var numValues = 1;
+    var i = 0;
+    for (i; i < data.length; i += 1) {
+        var stream_len = data[i] && data[i].values ? data[i].values.length : 0;
+        numValues = stream_len > numValues ? stream_len : numValues;
+    }
+    nv.log("Requested number of ticks: ", numTicks);
+    nv.log("Calculated max values to be: ", numValues);
+    // make sure we don't have more ticks than values to avoid duplicates
+    numTicks = numTicks > numValues ? numTicks = numValues - 1 : numTicks;
+    // make sure we have at least one tick
+    numTicks = numTicks < 1 ? 1 : numTicks;
+    // make sure it's an integer
+    numTicks = Math.floor(numTicks);
+    nv.log("Calculating tick count as: ", numTicks);
+    return numTicks;
+};
+
+
+/*
+returns number of ticks to actually use on Y axis, based on chart data
+*/
+nv.utils.calcTicksY = function(numTicks, data) {
+    // currently uses the same logic but we can adjust here if needed later
+    return nv.utils.calcTicksX(numTicks, data);
+};
+
+
+/*
+Add a particular option from an options object onto chart
+Options exposed on a chart are a getter/setter function that returns chart
+on set to mimic typical d3 option chaining, e.g. svg.option1('a').option2('b');
+
+option objects should be generated via Object.create() to provide
+the option of manipulating data via get/set functions.
+*/
+nv.utils.initOption = function(chart, name) {
+    // if it's a call option, just call it directly, otherwise do get/set
+    if (chart._calls && chart._calls[name]) {
+        chart[name] = chart._calls[name];
+    } else {
+        chart[name] = function (_) {
+            if (!arguments.length) return chart._options[name];
+            chart._overrides[name] = true;
+            chart._options[name] = _;
+            return chart;
+        };
+        // calling the option as _option will ignore if set by option already
+        // so nvd3 can set options internally but the stop if set manually
+        chart['_' + name] = function(_) {
+            if (!arguments.length) return chart._options[name];
+            if (!chart._overrides[name]) {
+                chart._options[name] = _;
+            }
+            return chart;
+        }
+    }
+};
+
+
+/*
+Add all options in an options object to the chart
+*/
+nv.utils.initOptions = function(chart) {
+    chart._overrides = chart._overrides || {};
+    var ops = Object.getOwnPropertyNames(chart._options || {});
+    var calls = Object.getOwnPropertyNames(chart._calls || {});
+    ops = ops.concat(calls);
+    for (var i in ops) {
+        nv.utils.initOption(chart, ops[i]);
+    }
+};
+
+
+/*
+Inherit options from a D3 object
+d3.rebind makes calling the function on target actually call it on source
+Also use _d3options so we can track what we inherit for documentation and chained inheritance
+*/
+nv.utils.inheritOptionsD3 = function(target, d3_source, oplist) {
+    target._d3options = oplist.concat(target._d3options || []);
+    oplist.unshift(d3_source);
+    oplist.unshift(target);
+    d3.rebind.apply(this, oplist);
+};
+
+
+/*
+Remove duplicates from an array
+*/
+nv.utils.arrayUnique = function(a) {
+    return a.sort().filter(function(item, pos) {
+        return !pos || item != a[pos - 1];
+    });
+};
+
+
+/*
+Keeps a list of custom symbols to draw from in addition to d3.svg.symbol
+Necessary since d3 doesn't let you extend its list -_-
+Add new symbols by doing nv.utils.symbols.set('name', function(size){...});
+*/
+nv.utils.symbolMap = d3.map();
+
+
+/*
+Replaces d3.svg.symbol so that we can look both there and our own map
+ */
+nv.utils.symbol = function() {
+    var type,
+        size = 64;
+    function symbol(d,i) {
+        var t = type.call(this,d,i);
+        var s = size.call(this,d,i);
+        if (d3.svg.symbolTypes.indexOf(t) !== -1) {
+            return d3.svg.symbol().type(t).size(s)();
+        } else {
+            return nv.utils.symbolMap.get(t)(s);
+        }
+    }
+    symbol.type = function(_) {
+        if (!arguments.length) return type;
+        type = d3.functor(_);
+        return symbol;
+    };
+    symbol.size = function(_) {
+        if (!arguments.length) return size;
+        size = d3.functor(_);
+        return symbol;
+    };
+    return symbol;
+};
+
+
+/*
+Inherit option getter/setter functions from source to target
+d3.rebind makes calling the function on target actually call it on source
+Also track via _inherited and _d3options so we can track what we inherit
+for documentation generation purposes and chained inheritance
+*/
+nv.utils.inheritOptions = function(target, source) {
+    // inherit all the things
+    var ops = Object.getOwnPropertyNames(source._options || {});
+    var calls = Object.getOwnPropertyNames(source._calls || {});
+    var inherited = source._inherited || [];
+    var d3ops = source._d3options || [];
+    var args = ops.concat(calls).concat(inherited).concat(d3ops);
+    args.unshift(source);
+    args.unshift(target);
+    d3.rebind.apply(this, args);
+    // pass along the lists to keep track of them, don't allow duplicates
+    target._inherited = nv.utils.arrayUnique(ops.concat(calls).concat(inherited).concat(ops).concat(target._inherited || []));
+    target._d3options = nv.utils.arrayUnique(d3ops.concat(target._d3options || []));
+};
+
+
+/*
+Runs common initialize code on the svg before the chart builds
+*/
+nv.utils.initSVG = function(svg) {
+    svg.classed({'nvd3-svg':true});
+};
+
+
+/*
+Sanitize and provide default for the container height.
+*/
+nv.utils.sanitizeHeight = function(height, container) {
+    return (height || parseInt(container.style('height'), 10) || 400);
+};
+
+
+/*
+Sanitize and provide default for the container width.
+*/
+nv.utils.sanitizeWidth = function(width, container) {
+    return (width || parseInt(container.style('width'), 10) || 960);
+};
+
+
+/*
+Calculate the available height for a chart.
+*/
+nv.utils.availableHeight = function(height, container, margin) {
+    return Math.max(0,nv.utils.sanitizeHeight(height, container) - margin.top - margin.bottom);
+};
+
+/*
+Calculate the available width for a chart.
+*/
+nv.utils.availableWidth = function(width, container, margin) {
+    return Math.max(0,nv.utils.sanitizeWidth(width, container) - margin.left - margin.right);
+};
+
+/*
+Clear any rendered chart components and display a chart's 'noData' message
+*/
+nv.utils.noData = function(chart, container) {
+    var opt = chart.options(),
+        margin = opt.margin(),
+        noData = opt.noData(),
+        data = (noData == null) ? ["No Data Available."] : [noData],
+        height = nv.utils.availableHeight(null, container, margin),
+        width = nv.utils.availableWidth(null, container, margin),
+        x = margin.left + width/2,
+        y = margin.top + height/2;
+
+    //Remove any previously created chart components
+    container.selectAll('g').remove();
+
+    var noDataText = container.selectAll('.nv-noData').data(data);
+
+    noDataText.enter().append('text')
+        .attr('class', 'nvd3 nv-noData')
+        .attr('dy', '-.7em')
+        .style('text-anchor', 'middle');
+
+    noDataText
+        .attr('x', x)
+        .attr('y', y)
+        .text(function(t){ return t; });
+};
+
+/*
+ Wrap long labels.
+ */
+nv.utils.wrapTicks = function (text, width) {
+    text.each(function() {
+        var text = d3.select(this),
+            words = text.text().split(/\s+/).reverse(),
+            word,
+            line = [],
+            lineNumber = 0,
+            lineHeight = 1.1,
+            y = text.attr("y"),
+            dy = parseFloat(text.attr("dy")),
+            tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
+        while (word = words.pop()) {
+            line.push(word);
+            tspan.text(line.join(" "));
+            if (tspan.node().getComputedTextLength() > width) {
+                line.pop();
+                tspan.text(line.join(" "));
+                line = [word];
+                tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
+            }
+        }
+    });
+};
+
+/*
+Check equality of 2 array
+*/
+nv.utils.arrayEquals = function (array1, array2) {
+    if (array1 === array2)
+        return true;
+
+    if (!array1 || !array2)
+        return false;
+
+    // compare lengths - can save a lot of time 
+    if (array1.length != array2.length)
+        return false;
+
+    for (var i = 0,
+        l = array1.length; i < l; i++) {
+        // Check if we have nested arrays
+        if (array1[i] instanceof Array && array2[i] instanceof Array) {
+            // recurse into the nested arrays
+            if (!nv.arrayEquals(array1[i], array2[i]))
+                return false;
+        } else if (array1[i] != array2[i]) {
+            // Warning - two different object instances will never be equal: {x:20} != {x:20}
+            return false;
+        }
+    }
+    return true;
+};nv.models.axis = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var axis = d3.svg.axis();
+    var scale = d3.scale.linear();
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , width = 75 //only used for tickLabel currently
+        , height = 60 //only used for tickLabel currently
+        , axisLabelText = null
+        , showMaxMin = true //TODO: showMaxMin should be disabled on all ordinal scaled axes
+        , rotateLabels = 0
+        , rotateYLabel = true
+        , staggerLabels = false
+        , isOrdinal = false
+        , ticks = null
+        , axisLabelDistance = 0
+        , duration = 250
+        , dispatch = d3.dispatch('renderEnd')
+        ;
+    axis
+        .scale(scale)
+        .orient('bottom')
+        .tickFormat(function(d) { return d })
+    ;
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var scale0;
+    var renderWatch = nv.utils.renderWatch(dispatch, duration);
+
+    function chart(selection) {
+        renderWatch.reset();
+        selection.each(function(data) {
+            var container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-axis').data([data]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-axis');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            if (ticks !== null)
+                axis.ticks(ticks);
+            else if (axis.orient() == 'top' || axis.orient() == 'bottom')
+                axis.ticks(Math.abs(scale.range()[1] - scale.range()[0]) / 100);
+
+            //TODO: consider calculating width/height based on whether or not label is added, for reference in charts using this component
+            g.watchTransition(renderWatch, 'axis').call(axis);
+
+            scale0 = scale0 || axis.scale();
+
+            var fmt = axis.tickFormat();
+            if (fmt == null) {
+                fmt = scale0.tickFormat();
+            }
+
+            var axisLabel = g.selectAll('text.nv-axislabel')
+                .data([axisLabelText || null]);
+            axisLabel.exit().remove();
+
+            var xLabelMargin;
+            var axisMaxMin;
+            var w;
+            switch (axis.orient()) {
+                case 'top':
+                    axisLabel.enter().append('text').attr('class', 'nv-axislabel');
+                  w = 0;
+                  if (scale.range().length === 1) {
+                    w = isOrdinal ? scale.range()[0] * 2 + scale.rangeBand() : 0;
+                  } else if (scale.range().length === 2) {
+                    w = isOrdinal ? scale.range()[0] + scale.range()[1] + scale.rangeBand() : scale.range()[1];
+                  } else if ( scale.range().length > 2){
+                    w = scale.range()[scale.range().length-1]+(scale.range()[1]-scale.range()[0]);
+                  };
+                    axisLabel
+                        .attr('text-anchor', 'middle')
+                        .attr('y', 0)
+                        .attr('x', w/2);
+                    if (showMaxMin) {
+                        axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
+                            .data(scale.domain());
+                        axisMaxMin.enter().append('g').attr('class',function(d,i){
+                                return ['nv-axisMaxMin','nv-axisMaxMin-x',(i == 0 ? 'nv-axisMin-x':'nv-axisMax-x')].join(' ')
+                        }).append('text');
+                        axisMaxMin.exit().remove();
+                        axisMaxMin
+                            .attr('transform', function(d,i) {
+                                return 'translate(' + nv.utils.NaNtoZero(scale(d)) + ',0)'
+                            })
+                            .select('text')
+                            .attr('dy', '-0.5em')
+                            .attr('y', -axis.tickPadding())
+                            .attr('text-anchor', 'middle')
+                            .text(function(d,i) {
+                                var v = fmt(d);
+                                return ('' + v).match('NaN') ? '' : v;
+                            });
+                        axisMaxMin.watchTransition(renderWatch, 'min-max top')
+                            .attr('transform', function(d,i) {
+                                return 'translate(' + nv.utils.NaNtoZero(scale.range()[i]) + ',0)'
+                            });
+                    }
+                    break;
+                case 'bottom':
+                    xLabelMargin = axisLabelDistance + 36;
+                    var maxTextWidth = 30;
+                    var textHeight = 0;
+                    var xTicks = g.selectAll('g').select("text");
+                    var rotateLabelsRule = '';
+                    if (rotateLabels%360) {
+                        //Calculate the longest xTick width
+                        xTicks.each(function(d,i){
+                            var box = this.getBoundingClientRect();
+                            var width = box.width;
+                            textHeight = box.height;
+                            if(width > maxTextWidth) maxTextWidth = width;
+                        });
+                        rotateLabelsRule = 'rotate(' + rotateLabels + ' 0,' + (textHeight/2 + axis.tickPadding()) + ')';
+                        //Convert to radians before calculating sin. Add 30 to margin for healthy padding.
+                        var sin = Math.abs(Math.sin(rotateLabels*Math.PI/180));
+                        xLabelMargin = (sin ? sin*maxTextWidth : maxTextWidth)+30;
+                        //Rotate all xTicks
+                        xTicks
+                            .attr('transform', rotateLabelsRule)
+                            .style('text-anchor', rotateLabels%360 > 0 ? 'start' : 'end');
+                    } else {
+                        if (staggerLabels) {
+                            xTicks
+                                .attr('transform', function(d,i) {
+                                    return 'translate(0,' + (i % 2 == 0 ? '0' : '12') + ')'
+                                });
+                        } else {
+                            xTicks.attr('transform', "translate(0,0)");
+                        }
+                    }
+                    axisLabel.enter().append('text').attr('class', 'nv-axislabel');
+                    w = 0;
+                    if (scale.range().length === 1) {
+                        w = isOrdinal ? scale.range()[0] * 2 + scale.rangeBand() : 0;
+                    } else if (scale.range().length === 2) {
+                        w = isOrdinal ? scale.range()[0] + scale.range()[1] + scale.rangeBand() : scale.range()[1];
+                    } else if ( scale.range().length > 2){
+                        w = scale.range()[scale.range().length-1]+(scale.range()[1]-scale.range()[0]);
+                    };
+                    axisLabel
+                        .attr('text-anchor', 'middle')
+                        .attr('y', xLabelMargin)
+                        .attr('x', w/2);
+                    if (showMaxMin) {
+                        //if (showMaxMin && !isOrdinal) {
+                        axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
+                            //.data(scale.domain())
+                            .data([scale.domain()[0], scale.domain()[scale.domain().length - 1]]);
+                        axisMaxMin.enter().append('g').attr('class',function(d,i){
+                                return ['nv-axisMaxMin','nv-axisMaxMin-x',(i == 0 ? 'nv-axisMin-x':'nv-axisMax-x')].join(' ')
+                        }).append('text');
+                        axisMaxMin.exit().remove();
+                        axisMaxMin
+                            .attr('transform', function(d,i) {
+                                return 'translate(' + nv.utils.NaNtoZero((scale(d) + (isOrdinal ? scale.rangeBand() / 2 : 0))) + ',0)'
+                            })
+                            .select('text')
+                            .attr('dy', '.71em')
+                            .attr('y', axis.tickPadding())
+                            .attr('transform', rotateLabelsRule)
+                            .style('text-anchor', rotateLabels ? (rotateLabels%360 > 0 ? 'start' : 'end') : 'middle')
+                            .text(function(d,i) {
+                                var v = fmt(d);
+                                return ('' + v).match('NaN') ? '' : v;
+                            });
+                        axisMaxMin.watchTransition(renderWatch, 'min-max bottom')
+                            .attr('transform', function(d,i) {
+                                return 'translate(' + nv.utils.NaNtoZero((scale(d) + (isOrdinal ? scale.rangeBand() / 2 : 0))) + ',0)'
+                            });
+                    }
+
+                    break;
+                case 'right':
+                    axisLabel.enter().append('text').attr('class', 'nv-axislabel');
+                    axisLabel
+                        .style('text-anchor', rotateYLabel ? 'middle' : 'begin')
+                        .attr('transform', rotateYLabel ? 'rotate(90)' : '')
+                        .attr('y', rotateYLabel ? (-Math.max(margin.right, width) + 12) : -10) //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
+                        .attr('x', rotateYLabel ? (d3.max(scale.range()) / 2) : axis.tickPadding());
+                    if (showMaxMin) {
+                        axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
+                            .data(scale.domain());
+                       	axisMaxMin.enter().append('g').attr('class',function(d,i){
+                                return ['nv-axisMaxMin','nv-axisMaxMin-y',(i == 0 ? 'nv-axisMin-y':'nv-axisMax-y')].join(' ')
+                        }).append('text')
+                            .style('opacity', 0);
+                        axisMaxMin.exit().remove();
+                        axisMaxMin
+                            .attr('transform', function(d,i) {
+                                return 'translate(0,' + nv.utils.NaNtoZero(scale(d)) + ')'
+                            })
+                            .select('text')
+                            .attr('dy', '.32em')
+                            .attr('y', 0)
+                            .attr('x', axis.tickPadding())
+                            .style('text-anchor', 'start')
+                            .text(function(d, i) {
+                                var v = fmt(d);
+                                return ('' + v).match('NaN') ? '' : v;
+                            });
+                        axisMaxMin.watchTransition(renderWatch, 'min-max right')
+                            .attr('transform', function(d,i) {
+                                return 'translate(0,' + nv.utils.NaNtoZero(scale.range()[i]) + ')'
+                            })
+                            .select('text')
+                            .style('opacity', 1);
+                    }
+                    break;
+                case 'left':
+                    /*
+                     //For dynamically placing the label. Can be used with dynamically-sized chart axis margins
+                     var yTicks = g.selectAll('g').select("text");
+                     yTicks.each(function(d,i){
+                     var labelPadding = this.getBoundingClientRect().width + axis.tickPadding() + 16;
+                     if(labelPadding > width) width = labelPadding;
+                     });
+                     */
+                    axisLabel.enter().append('text').attr('class', 'nv-axislabel');
+                    axisLabel
+                        .style('text-anchor', rotateYLabel ? 'middle' : 'end')
+                        .attr('transform', rotateYLabel ? 'rotate(-90)' : '')
+                        .attr('y', rotateYLabel ? (-Math.max(margin.left, width) + 25 - (axisLabelDistance || 0)) : -10)
+                        .attr('x', rotateYLabel ? (-d3.max(scale.range()) / 2) : -axis.tickPadding());
+                    if (showMaxMin) {
+                        axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
+                            .data(scale.domain());
+                        axisMaxMin.enter().append('g').attr('class',function(d,i){
+                                return ['nv-axisMaxMin','nv-axisMaxMin-y',(i == 0 ? 'nv-axisMin-y':'nv-axisMax-y')].join(' ')
+                        }).append('text')
+                            .style('opacity', 0);
+                        axisMaxMin.exit().remove();
+                        axisMaxMin
+                            .attr('transform', function(d,i) {
+                                return 'translate(0,' + nv.utils.NaNtoZero(scale0(d)) + ')'
+                            })
+                            .select('text')
+                            .attr('dy', '.32em')
+                            .attr('y', 0)
+                            .attr('x', -axis.tickPadding())
+                            .attr('text-anchor', 'end')
+                            .text(function(d,i) {
+                                var v = fmt(d);
+                                return ('' + v).match('NaN') ? '' : v;
+                            });
+                        axisMaxMin.watchTransition(renderWatch, 'min-max right')
+                            .attr('transform', function(d,i) {
+                                return 'translate(0,' + nv.utils.NaNtoZero(scale.range()[i]) + ')'
+                            })
+                            .select('text')
+                            .style('opacity', 1);
+                    }
+                    break;
+            }
+            axisLabel.text(function(d) { return d });
+
+            if (showMaxMin && (axis.orient() === 'left' || axis.orient() === 'right')) {
+                //check if max and min overlap other values, if so, hide the values that overlap
+                g.selectAll('g') // the g's wrapping each tick
+                    .each(function(d,i) {
+                        d3.select(this).select('text').attr('opacity', 1);
+                        if (scale(d) < scale.range()[1] + 10 || scale(d) > scale.range()[0] - 10) { // 10 is assuming text height is 16... if d is 0, leave it!
+                            if (d > 1e-10 || d < -1e-10) // accounts for minor floating point errors... though could be problematic if the scale is EXTREMELY SMALL
+                                d3.select(this).attr('opacity', 0);
+
+                            d3.select(this).select('text').attr('opacity', 0); // Don't remove the ZERO line!!
+                        }
+                    });
+
+                //if Max and Min = 0 only show min, Issue #281
+                if (scale.domain()[0] == scale.domain()[1] && scale.domain()[0] == 0) {
+                    wrap.selectAll('g.nv-axisMaxMin').style('opacity', function (d, i) {
+                        return !i ? 1 : 0
+                    });
+                }
+            }
+
+            if (showMaxMin && (axis.orient() === 'top' || axis.orient() === 'bottom')) {
+                var maxMinRange = [];
+                wrap.selectAll('g.nv-axisMaxMin')
+                    .each(function(d,i) {
+                        try {
+                            if (i) // i== 1, max position
+                                maxMinRange.push(scale(d) - this.getBoundingClientRect().width - 4);  //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case)
+                            else // i==0, min position
+                                maxMinRange.push(scale(d) + this.getBoundingClientRect().width + 4)
+                        }catch (err) {
+                            if (i) // i== 1, max position
+                                maxMinRange.push(scale(d) - 4);  //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case)
+                            else // i==0, min position
+                                maxMinRange.push(scale(d) + 4);
+                        }
+                    });
+                // the g's wrapping each tick
+                g.selectAll('g').each(function(d, i) {
+                    if (scale(d) < maxMinRange[0] || scale(d) > maxMinRange[1]) {
+                        if (d > 1e-10 || d < -1e-10) // accounts for minor floating point errors... though could be problematic if the scale is EXTREMELY SMALL
+                            d3.select(this).remove();
+                        else
+                            d3.select(this).select('text').remove(); // Don't remove the ZERO line!!
+                    }
+                });
+            }
+
+            //Highlight zero tick line
+            g.selectAll('.tick')
+                .filter(function (d) {
+                    /*
+                    The filter needs to return only ticks at or near zero.
+                    Numbers like 0.00001 need to count as zero as well,
+                    and the arithmetic trick below solves that.
+                    */
+                    return !parseFloat(Math.round(d * 100000) / 1000000) && (d !== undefined)
+                }) 
+                .classed('zero', true);
+            
+            //store old scales for use in transitions on update
+            scale0 = scale.copy();
+
+        });
+
+        renderWatch.renderEnd('axis immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    // expose chart's sub-components
+    chart.axis = axis;
+    chart.dispatch = dispatch;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        axisLabelDistance: {get: function(){return axisLabelDistance;}, set: function(_){axisLabelDistance=_;}},
+        staggerLabels:     {get: function(){return staggerLabels;}, set: function(_){staggerLabels=_;}},
+        rotateLabels:      {get: function(){return rotateLabels;}, set: function(_){rotateLabels=_;}},
+        rotateYLabel:      {get: function(){return rotateYLabel;}, set: function(_){rotateYLabel=_;}},
+        showMaxMin:        {get: function(){return showMaxMin;}, set: function(_){showMaxMin=_;}},
+        axisLabel:         {get: function(){return axisLabelText;}, set: function(_){axisLabelText=_;}},
+        height:            {get: function(){return height;}, set: function(_){height=_;}},
+        ticks:             {get: function(){return ticks;}, set: function(_){ticks=_;}},
+        width:             {get: function(){return width;}, set: function(_){width=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top !== undefined    ? _.top    : margin.top;
+            margin.right  = _.right !== undefined  ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left !== undefined   ? _.left   : margin.left;
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration=_;
+            renderWatch.reset(duration);
+        }},
+        scale: {get: function(){return scale;}, set: function(_){
+            scale = _;
+            axis.scale(scale);
+            isOrdinal = typeof scale.rangeBands === 'function';
+            nv.utils.inheritOptionsD3(chart, scale, ['domain', 'range', 'rangeBand', 'rangeBands']);
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+    nv.utils.inheritOptionsD3(chart, axis, ['orient', 'tickValues', 'tickSubdivide', 'tickSize', 'tickPadding', 'tickFormat']);
+    nv.utils.inheritOptionsD3(chart, scale, ['domain', 'range', 'rangeBand', 'rangeBands']);
+
+    return chart;
+};
+nv.models.boxPlot = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , width = 960
+        , height = 500
+        , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
+        , x = d3.scale.ordinal()
+        , y = d3.scale.linear()
+        , getX = function(d) { return d.x }
+        , getY = function(d) { return d.y }
+        , color = nv.utils.defaultColor()
+        , container = null
+        , xDomain
+        , yDomain
+        , xRange
+        , yRange
+        , dispatch = d3.dispatch('elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
+        , duration = 250
+        , maxBoxWidth = null
+        ;
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var x0, y0;
+    var renderWatch = nv.utils.renderWatch(dispatch, duration);
+
+    function chart(selection) {
+        renderWatch.reset();
+        selection.each(function(data) {
+            var availableWidth = width - margin.left - margin.right,
+                availableHeight = height - margin.top - margin.bottom;
+
+            container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            // Setup Scales
+            x   .domain(xDomain || data.map(function(d,i) { return getX(d,i); }))
+                .rangeBands(xRange || [0, availableWidth], .1);
+
+            // if we know yDomain, no need to calculate
+            var yData = []
+            if (!yDomain) {
+                // (y-range is based on quartiles, whiskers and outliers)
+
+                // lower values
+                var yMin = d3.min(data.map(function(d) {
+                    var min_arr = [];
+
+                    min_arr.push(d.values.Q1);
+                    if (d.values.hasOwnProperty('whisker_low') && d.values.whisker_low !== null) { min_arr.push(d.values.whisker_low); }
+                    if (d.values.hasOwnProperty('outliers') && d.values.outliers !== null) { min_arr = min_arr.concat(d.values.outliers); }
+
+                    return d3.min(min_arr);
+                }));
+
+                // upper values
+                var yMax = d3.max(data.map(function(d) {
+                    var max_arr = [];
+
+                    max_arr.push(d.values.Q3);
+                    if (d.values.hasOwnProperty('whisker_high') && d.values.whisker_high !== null) { max_arr.push(d.values.whisker_high); }
+                    if (d.values.hasOwnProperty('outliers') && d.values.outliers !== null) { max_arr = max_arr.concat(d.values.outliers); }
+
+                    return d3.max(max_arr);
+                }));
+
+                yData = [ yMin, yMax ] ;
+            }
+
+            y.domain(yDomain || yData);
+            y.range(yRange || [availableHeight, 0]);
+
+            //store old scales if they exist
+            x0 = x0 || x;
+            y0 = y0 || y.copy().range([y(0),y(0)]);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap').data([data]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap');
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            var boxplots = wrap.selectAll('.nv-boxplot').data(function(d) { return d });
+            var boxEnter = boxplots.enter().append('g').style('stroke-opacity', 1e-6).style('fill-opacity', 1e-6);
+            boxplots
+                .attr('class', 'nv-boxplot')
+                .attr('transform', function(d,i,j) { return 'translate(' + (x(getX(d,i)) + x.rangeBand() * .05) + ', 0)'; })
+                .classed('hover', function(d) { return d.hover });
+            boxplots
+                .watchTransition(renderWatch, 'nv-boxplot: boxplots')
+                .style('stroke-opacity', 1)
+                .style('fill-opacity', .75)
+                .delay(function(d,i) { return i * duration / data.length })
+                .attr('transform', function(d,i) {
+                    return 'translate(' + (x(getX(d,i)) + x.rangeBand() * .05) + ', 0)';
+                });
+            boxplots.exit().remove();
+
+            // ----- add the SVG elements for each boxPlot -----
+
+            // conditionally append whisker lines
+            boxEnter.each(function(d,i) {
+              var box = d3.select(this);
+
+              ['low', 'high'].forEach(function(key) {
+                if (d.values.hasOwnProperty('whisker_' + key) && d.values['whisker_' + key] !== null) {
+                  box.append('line')
+                    .style('stroke', (d.color) ? d.color : color(d,i))
+                    .attr('class', 'nv-boxplot-whisker nv-boxplot-' + key);
+
+                  box.append('line')
+                    .style('stroke', (d.color) ? d.color : color(d,i))
+                    .attr('class', 'nv-boxplot-tick nv-boxplot-' + key);
+                }
+              });
+            });
+
+            // outliers
+            // TODO: support custom colors here
+            var outliers = boxplots.selectAll('.nv-boxplot-outlier').data(function(d) {
+                if (d.values.hasOwnProperty('outliers') && d.values.outliers !== null) { return d.values.outliers; }
+                else { return []; }
+            });
+            outliers.enter().append('circle')
+                .style('fill', function(d,i,j) { return color(d,j) }).style('stroke', function(d,i,j) { return color(d,j) })
+                .on('mouseover', function(d,i,j) {
+                    d3.select(this).classed('hover', true);
+                    dispatch.elementMouseover({
+                        series: { key: d, color: color(d,j) },
+                        e: d3.event
+                    });
+                })
+                .on('mouseout', function(d,i,j) {
+                    d3.select(this).classed('hover', false);
+                    dispatch.elementMouseout({
+                        series: { key: d, color: color(d,j) },
+                        e: d3.event
+                    });
+                })
+                .on('mousemove', function(d,i) {
+                    dispatch.elementMousemove({e: d3.event});
+                });
+
+            outliers.attr('class', 'nv-boxplot-outlier');
+            outliers
+              .watchTransition(renderWatch, 'nv-boxplot: nv-boxplot-outlier')
+                .attr('cx', x.rangeBand() * .45)
+                .attr('cy', function(d,i,j) { return y(d); })
+                .attr('r', '3');
+            outliers.exit().remove();
+
+            var box_width = function() { return (maxBoxWidth === null ? x.rangeBand() * .9 : Math.min(75, x.rangeBand() * .9)); };
+            var box_left  = function() { return x.rangeBand() * .45 - box_width()/2; };
+            var box_right = function() { return x.rangeBand() * .45 + box_width()/2; };
+
+            // update whisker lines and ticks
+            ['low', 'high'].forEach(function(key) {
+              var endpoint = (key === 'low') ? 'Q1' : 'Q3';
+
+              boxplots.select('line.nv-boxplot-whisker.nv-boxplot-' + key)
+                .watchTransition(renderWatch, 'nv-boxplot: boxplots')
+                  .attr('x1', x.rangeBand() * .45 )
+                  .attr('y1', function(d,i) { return y(d.values['whisker_' + key]); })
+                  .attr('x2', x.rangeBand() * .45 )
+                  .attr('y2', function(d,i) { return y(d.values[endpoint]); });
+
+              boxplots.select('line.nv-boxplot-tick.nv-boxplot-' + key)
+                .watchTransition(renderWatch, 'nv-boxplot: boxplots')
+                  .attr('x1', box_left )
+                  .attr('y1', function(d,i) { return y(d.values['whisker_' + key]); })
+                  .attr('x2', box_right )
+                  .attr('y2', function(d,i) { return y(d.values['whisker_' + key]); });
+            });
+
+            ['low', 'high'].forEach(function(key) {
+              boxEnter.selectAll('.nv-boxplot-' + key)
+                .on('mouseover', function(d,i,j) {
+                    d3.select(this).classed('hover', true);
+                    dispatch.elementMouseover({
+                        series: { key: d.values['whisker_' + key], color: color(d,j) },
+                        e: d3.event
+                    });
+                })
+                .on('mouseout', function(d,i,j) {
+                    d3.select(this).classed('hover', false);
+                    dispatch.elementMouseout({
+                        series: { key: d.values['whisker_' + key], color: color(d,j) },
+                        e: d3.event
+                    });
+                })
+                .on('mousemove', function(d,i) {
+                    dispatch.elementMousemove({e: d3.event});
+                });
+            });
+
+            // boxes
+            boxEnter.append('rect')
+                .attr('class', 'nv-boxplot-box')
+                // tooltip events
+                .on('mouseover', function(d,i) {
+                    d3.select(this).classed('hover', true);
+                    dispatch.elementMouseover({
+                        key: d.label,
+                        value: d.label,
+                        series: [
+                            { key: 'Q3', value: d.values.Q3, color: d.color || color(d,i) },
+                            { key: 'Q2', value: d.values.Q2, color: d.color || color(d,i) },
+                            { key: 'Q1', value: d.values.Q1, color: d.color || color(d,i) }
+                        ],
+                        data: d,
+                        index: i,
+                        e: d3.event
+                    });
+                })
+                .on('mouseout', function(d,i) {
+                    d3.select(this).classed('hover', false);
+                    dispatch.elementMouseout({
+                        key: d.label,
+                        value: d.label,
+                        series: [
+                            { key: 'Q3', value: d.values.Q3, color: d.color || color(d,i) },
+                            { key: 'Q2', value: d.values.Q2, color: d.color || color(d,i) },
+                            { key: 'Q1', value: d.values.Q1, color: d.color || color(d,i) }
+                        ],
+                        data: d,
+                        index: i,
+                        e: d3.event
+                    });
+                })
+                .on('mousemove', function(d,i) {
+                    dispatch.elementMousemove({e: d3.event});
+                });
+
+            // box transitions
+            boxplots.select('rect.nv-boxplot-box')
+              .watchTransition(renderWatch, 'nv-boxplot: boxes')
+                .attr('y', function(d,i) { return y(d.values.Q3); })
+                .attr('width', box_width)
+                .attr('x', box_left )
+
+                .attr('height', function(d,i) { return Math.abs(y(d.values.Q3) - y(d.values.Q1)) || 1 })
+                .style('fill', function(d,i) { return d.color || color(d,i) })
+                .style('stroke', function(d,i) { return d.color || color(d,i) });
+
+            // median line
+            boxEnter.append('line').attr('class', 'nv-boxplot-median');
+
+            boxplots.select('line.nv-boxplot-median')
+              .watchTransition(renderWatch, 'nv-boxplot: boxplots line')
+                .attr('x1', box_left)
+                .attr('y1', function(d,i) { return y(d.values.Q2); })
+                .attr('x2', box_right)
+                .attr('y2', function(d,i) { return y(d.values.Q2); });
+
+            //store old scales for use in transitions on update
+            x0 = x.copy();
+            y0 = y.copy();
+        });
+
+        renderWatch.renderEnd('nv-boxplot immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:   {get: function(){return width;}, set: function(_){width=_;}},
+        height:  {get: function(){return height;}, set: function(_){height=_;}},
+        maxBoxWidth: {get: function(){return maxBoxWidth;}, set: function(_){maxBoxWidth=_;}},
+        x:       {get: function(){return getX;}, set: function(_){getX=_;}},
+        y:       {get: function(){return getY;}, set: function(_){getY=_;}},
+        xScale:  {get: function(){return x;}, set: function(_){x=_;}},
+        yScale:  {get: function(){return y;}, set: function(_){y=_;}},
+        xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
+        yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
+        xRange:  {get: function(){return xRange;}, set: function(_){xRange=_;}},
+        yRange:  {get: function(){return yRange;}, set: function(_){yRange=_;}},
+        id:          {get: function(){return id;}, set: function(_){id=_;}},
+        // rectClass: {get: function(){return rectClass;}, set: function(_){rectClass=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+nv.models.boxPlotChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var boxplot = nv.models.boxPlot()
+        , xAxis = nv.models.axis()
+        , yAxis = nv.models.axis()
+        ;
+
+    var margin = {top: 15, right: 10, bottom: 50, left: 60}
+        , width = null
+        , height = null
+        , color = nv.utils.getColor()
+        , showXAxis = true
+        , showYAxis = true
+        , rightAlignYAxis = false
+        , staggerLabels = false
+        , tooltip = nv.models.tooltip()
+        , x
+        , y
+        , noData = "No Data Available."
+        , dispatch = d3.dispatch('beforeUpdate', 'renderEnd')
+        , duration = 250
+        ;
+
+    xAxis
+        .orient('bottom')
+        .showMaxMin(false)
+        .tickFormat(function(d) { return d })
+    ;
+    yAxis
+        .orient((rightAlignYAxis) ? 'right' : 'left')
+        .tickFormat(d3.format(',.1f'))
+    ;
+
+    tooltip.duration(0);
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var renderWatch = nv.utils.renderWatch(dispatch, duration);
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(boxplot);
+        if (showXAxis) renderWatch.models(xAxis);
+        if (showYAxis) renderWatch.models(yAxis);
+
+        selection.each(function(data) {
+            var container = d3.select(this),
+                that = this;
+            nv.utils.initSVG(container);
+            var availableWidth = (width  || parseInt(container.style('width')) || 960)
+                    - margin.left - margin.right,
+                availableHeight = (height || parseInt(container.style('height')) || 400)
+                    - margin.top - margin.bottom;
+
+            chart.update = function() {
+                dispatch.beforeUpdate();
+                container.transition().duration(duration).call(chart);
+            };
+            chart.container = this;
+
+            // Display No Data message if there's nothing to show. (quartiles required at minimum)
+            if (!data || !data.length ||
+                    !data.filter(function(d) { return d.values.hasOwnProperty("Q1") && d.values.hasOwnProperty("Q2") && d.values.hasOwnProperty("Q3"); }).length) {
+                var noDataText = container.selectAll('.nv-noData').data([noData]);
+
+                noDataText.enter().append('text')
+                    .attr('class', 'nvd3 nv-noData')
+                    .attr('dy', '-.7em')
+                    .style('text-anchor', 'middle');
+
+                noDataText
+                    .attr('x', margin.left + availableWidth / 2)
+                    .attr('y', margin.top + availableHeight / 2)
+                    .text(function(d) { return d });
+
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            // Setup Scales
+            x = boxplot.xScale();
+            y = boxplot.yScale().clamp(true);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-boxPlotWithAxes').data([data]);
+            var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-boxPlotWithAxes').append('g');
+            var defsEnter = gEnter.append('defs');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-x nv-axis');
+            gEnter.append('g').attr('class', 'nv-y nv-axis')
+                .append('g').attr('class', 'nv-zeroLine')
+                .append('line');
+
+            gEnter.append('g').attr('class', 'nv-barsWrap');
+
+            g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            if (rightAlignYAxis) {
+                g.select(".nv-y.nv-axis")
+                    .attr("transform", "translate(" + availableWidth + ",0)");
+            }
+
+            // Main Chart Component(s)
+            boxplot
+                .width(availableWidth)
+                .height(availableHeight);
+
+            var barsWrap = g.select('.nv-barsWrap')
+                .datum(data.filter(function(d) { return !d.disabled }))
+
+            barsWrap.transition().call(boxplot);
+
+
+            defsEnter.append('clipPath')
+                .attr('id', 'nv-x-label-clip-' + boxplot.id())
+                .append('rect');
+
+            g.select('#nv-x-label-clip-' + boxplot.id() + ' rect')
+                .attr('width', x.rangeBand() * (staggerLabels ? 2 : 1))
+                .attr('height', 16)
+                .attr('x', -x.rangeBand() / (staggerLabels ? 1 : 2 ));
+
+            // Setup Axes
+            if (showXAxis) {
+                xAxis
+                    .scale(x)
+                    .ticks( nv.utils.calcTicksX(availableWidth/100, data) )
+                    .tickSize(-availableHeight, 0);
+
+                g.select('.nv-x.nv-axis').attr('transform', 'translate(0,' + y.range()[0] + ')');
+                g.select('.nv-x.nv-axis').call(xAxis);
+
+                var xTicks = g.select('.nv-x.nv-axis').selectAll('g');
+                if (staggerLabels) {
+                    xTicks
+                        .selectAll('text')
+                        .attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '5' : '17') + ')' })
+                }
+            }
+
+            if (showYAxis) {
+                yAxis
+                    .scale(y)
+                    .ticks( Math.floor(availableHeight/36) ) // can't use nv.utils.calcTicksY with Object data
+                    .tickSize( -availableWidth, 0);
+
+                g.select('.nv-y.nv-axis').call(yAxis);
+            }
+
+            // Zero line
+            g.select(".nv-zeroLine line")
+                .attr("x1",0)
+                .attr("x2",availableWidth)
+                .attr("y1", y(0))
+                .attr("y2", y(0))
+            ;
+
+            //============================================================
+            // Event Handling/Dispatching (in chart's scope)
+            //------------------------------------------------------------
+        });
+
+        renderWatch.renderEnd('nv-boxplot chart immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Event Handling/Dispatching (out of chart's scope)
+    //------------------------------------------------------------
+
+    boxplot.dispatch.on('elementMouseover.tooltip', function(evt) {
+        tooltip.data(evt).hidden(false);
+    });
+
+    boxplot.dispatch.on('elementMouseout.tooltip', function(evt) {
+        tooltip.data(evt).hidden(true);
+    });
+
+    boxplot.dispatch.on('elementMousemove.tooltip', function(evt) {
+        tooltip();
+    });
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.boxplot = boxplot;
+    chart.xAxis = xAxis;
+    chart.yAxis = yAxis;
+    chart.tooltip = tooltip;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        staggerLabels: {get: function(){return staggerLabels;}, set: function(_){staggerLabels=_;}},
+        showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
+        showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
+        tooltipContent:    {get: function(){return tooltip;}, set: function(_){tooltip=_;}},
+        noData:    {get: function(){return noData;}, set: function(_){noData=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+            boxplot.duration(duration);
+            xAxis.duration(duration);
+            yAxis.duration(duration);
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+            boxplot.color(color);
+        }},
+        rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
+            rightAlignYAxis = _;
+            yAxis.orient( (_) ? 'right' : 'left');
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, boxplot);
+    nv.utils.initOptions(chart);
+
+    return chart;
+}
+
+// Chart design based on the recommendations of Stephen Few. Implementation
+// based on the work of Clint Ivy, Jamie Love, and Jason Davies.
+// http://projects.instantcognition.com/protovis/bulletchart/
+
+nv.models.bullet = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , orient = 'left' // TODO top & bottom
+        , reverse = false
+        , ranges = function(d) { return d.ranges }
+        , markers = function(d) { return d.markers ? d.markers : [] }
+        , measures = function(d) { return d.measures }
+        , rangeLabels = function(d) { return d.rangeLabels ? d.rangeLabels : [] }
+        , markerLabels = function(d) { return d.markerLabels ? d.markerLabels : []  }
+        , measureLabels = function(d) { return d.measureLabels ? d.measureLabels : []  }
+        , forceX = [0] // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)
+        , width = 380
+        , height = 30
+        , container = null
+        , tickFormat = null
+        , color = nv.utils.getColor(['#1f77b4'])
+        , dispatch = d3.dispatch('elementMouseover', 'elementMouseout', 'elementMousemove')
+        ;
+
+    function chart(selection) {
+        selection.each(function(d, i) {
+            var availableWidth = width - margin.left - margin.right,
+                availableHeight = height - margin.top - margin.bottom;
+
+            container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
+                markerz = markers.call(this, d, i).slice().sort(d3.descending),
+                measurez = measures.call(this, d, i).slice().sort(d3.descending),
+                rangeLabelz = rangeLabels.call(this, d, i).slice(),
+                markerLabelz = markerLabels.call(this, d, i).slice(),
+                measureLabelz = measureLabels.call(this, d, i).slice();
+
+            // Setup Scales
+            // Compute the new x-scale.
+            var x1 = d3.scale.linear()
+                .domain( d3.extent(d3.merge([forceX, rangez])) )
+                .range(reverse ? [availableWidth, 0] : [0, availableWidth]);
+
+            // Retrieve the old x-scale, if this is an update.
+            var x0 = this.__chart__ || d3.scale.linear()
+                .domain([0, Infinity])
+                .range(x1.range());
+
+            // Stash the new scale.
+            this.__chart__ = x1;
+
+            var rangeMin = d3.min(rangez), //rangez[2]
+                rangeMax = d3.max(rangez), //rangez[0]
+                rangeAvg = rangez[1];
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-bullet').data([d]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-bullet');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('rect').attr('class', 'nv-range nv-rangeMax');
+            gEnter.append('rect').attr('class', 'nv-range nv-rangeAvg');
+            gEnter.append('rect').attr('class', 'nv-range nv-rangeMin');
+            gEnter.append('rect').attr('class', 'nv-measure');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            var w0 = function(d) { return Math.abs(x0(d) - x0(0)) }, // TODO: could optimize by precalculating x0(0) and x1(0)
+                w1 = function(d) { return Math.abs(x1(d) - x1(0)) };
+            var xp0 = function(d) { return d < 0 ? x0(d) : x0(0) },
+                xp1 = function(d) { return d < 0 ? x1(d) : x1(0) };
+
+            g.select('rect.nv-rangeMax')
+                .attr('height', availableHeight)
+                .attr('width', w1(rangeMax > 0 ? rangeMax : rangeMin))
+                .attr('x', xp1(rangeMax > 0 ? rangeMax : rangeMin))
+                .datum(rangeMax > 0 ? rangeMax : rangeMin)
+
+            g.select('rect.nv-rangeAvg')
+                .attr('height', availableHeight)
+                .attr('width', w1(rangeAvg))
+                .attr('x', xp1(rangeAvg))
+                .datum(rangeAvg)
+
+            g.select('rect.nv-rangeMin')
+                .attr('height', availableHeight)
+                .attr('width', w1(rangeMax))
+                .attr('x', xp1(rangeMax))
+                .attr('width', w1(rangeMax > 0 ? rangeMin : rangeMax))
+                .attr('x', xp1(rangeMax > 0 ? rangeMin : rangeMax))
+                .datum(rangeMax > 0 ? rangeMin : rangeMax)
+
+            g.select('rect.nv-measure')
+                .style('fill', color)
+                .attr('height', availableHeight / 3)
+                .attr('y', availableHeight / 3)
+                .attr('width', measurez < 0 ?
+                    x1(0) - x1(measurez[0])
+                    : x1(measurez[0]) - x1(0))
+                .attr('x', xp1(measurez))
+                .on('mouseover', function() {
+                    dispatch.elementMouseover({
+                        value: measurez[0],
+                        label: measureLabelz[0] || 'Current',
+                        color: d3.select(this).style("fill")
+                    })
+                })
+                .on('mousemove', function() {
+                    dispatch.elementMousemove({
+                        value: measurez[0],
+                        label: measureLabelz[0] || 'Current',
+                        color: d3.select(this).style("fill")
+                    })
+                })
+                .on('mouseout', function() {
+                    dispatch.elementMouseout({
+                        value: measurez[0],
+                        label: measureLabelz[0] || 'Current',
+                        color: d3.select(this).style("fill")
+                    })
+                });
+
+            var h3 =  availableHeight / 6;
+
+            var markerData = markerz.map( function(marker, index) {
+                return {value: marker, label: markerLabelz[index]}
+            });
+            gEnter
+              .selectAll("path.nv-markerTriangle")
+              .data(markerData)
+              .enter()
+              .append('path')
+              .attr('class', 'nv-markerTriangle')
+              .attr('d', 'M0,' + h3 + 'L' + h3 + ',' + (-h3) + ' ' + (-h3) + ',' + (-h3) + 'Z')
+              .on('mouseover', function(d) {
+                dispatch.elementMouseover({
+                  value: d.value,
+                  label: d.label || 'Previous',
+                  color: d3.select(this).style("fill"),
+                  pos: [x1(d.value), availableHeight/2]
+                })
+
+              })
+              .on('mousemove', function(d) {
+                  dispatch.elementMousemove({
+                      value: d.value,
+                      label: d.label || 'Previous',
+                      color: d3.select(this).style("fill")
+                  })
+              })
+              .on('mouseout', function(d, i) {
+                  dispatch.elementMouseout({
+                      value: d.value,
+                      label: d.label || 'Previous',
+                      color: d3.select(this).style("fill")
+                  })
+              });
+
+            g.selectAll("path.nv-markerTriangle")
+              .data(markerData)
+              .attr('transform', function(d) { return 'translate(' + x1(d.value) + ',' + (availableHeight / 2) + ')' });
+
+            wrap.selectAll('.nv-range')
+                .on('mouseover', function(d,i) {
+                    var label = rangeLabelz[i] || (!i ? "Maximum" : i == 1 ? "Mean" : "Minimum");
+                    dispatch.elementMouseover({
+                        value: d,
+                        label: label,
+                        color: d3.select(this).style("fill")
+                    })
+                })
+                .on('mousemove', function() {
+                    dispatch.elementMousemove({
+                        value: measurez[0],
+                        label: measureLabelz[0] || 'Previous',
+                        color: d3.select(this).style("fill")
+                    })
+                })
+                .on('mouseout', function(d,i) {
+                    var label = rangeLabelz[i] || (!i ? "Maximum" : i == 1 ? "Mean" : "Minimum");
+                    dispatch.elementMouseout({
+                        value: d,
+                        label: label,
+                        color: d3.select(this).style("fill")
+                    })
+                });
+        });
+
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        ranges:      {get: function(){return ranges;}, set: function(_){ranges=_;}}, // ranges (bad, satisfactory, good)
+        markers:     {get: function(){return markers;}, set: function(_){markers=_;}}, // markers (previous, goal)
+        measures: {get: function(){return measures;}, set: function(_){measures=_;}}, // measures (actual, forecast)
+        forceX:      {get: function(){return forceX;}, set: function(_){forceX=_;}},
+        width:    {get: function(){return width;}, set: function(_){width=_;}},
+        height:    {get: function(){return height;}, set: function(_){height=_;}},
+        tickFormat:    {get: function(){return tickFormat;}, set: function(_){tickFormat=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        orient: {get: function(){return orient;}, set: function(_){ // left, right, top, bottom
+            orient = _;
+            reverse = orient == 'right' || orient == 'bottom';
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+    return chart;
+};
+
+
+
+// Chart design based on the recommendations of Stephen Few. Implementation
+// based on the work of Clint Ivy, Jamie Love, and Jason Davies.
+// http://projects.instantcognition.com/protovis/bulletchart/
+nv.models.bulletChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var bullet = nv.models.bullet();
+    var tooltip = nv.models.tooltip();
+
+    var orient = 'left' // TODO top & bottom
+        , reverse = false
+        , margin = {top: 5, right: 40, bottom: 20, left: 120}
+        , ranges = function(d) { return d.ranges }
+        , markers = function(d) { return d.markers ? d.markers : [] }
+        , measures = function(d) { return d.measures }
+        , width = null
+        , height = 55
+        , tickFormat = null
+	, ticks = null
+        , noData = null
+        , dispatch = d3.dispatch()
+        ;
+
+    tooltip
+        .duration(0)
+        .headerEnabled(false);
+
+    function chart(selection) {
+        selection.each(function(d, i) {
+            var container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = height - margin.top - margin.bottom,
+                that = this;
+
+            chart.update = function() { chart(selection) };
+            chart.container = this;
+
+            // Display No Data message if there's nothing to show.
+            if (!d || !ranges.call(this, d, i)) {
+                nv.utils.noData(chart, container)
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
+                markerz = markers.call(this, d, i).slice().sort(d3.descending),
+                measurez = measures.call(this, d, i).slice().sort(d3.descending);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-bulletChart').data([d]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-bulletChart');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-bulletWrap');
+            gEnter.append('g').attr('class', 'nv-titles');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            // Compute the new x-scale.
+            var x1 = d3.scale.linear()
+                .domain([0, Math.max(rangez[0], (markerz[0] || 0), measurez[0])])  // TODO: need to allow forceX and forceY, and xDomain, yDomain
+                .range(reverse ? [availableWidth, 0] : [0, availableWidth]);
+
+            // Retrieve the old x-scale, if this is an update.
+            var x0 = this.__chart__ || d3.scale.linear()
+                .domain([0, Infinity])
+                .range(x1.range());
+
+            // Stash the new scale.
+            this.__chart__ = x1;
+
+            var w0 = function(d) { return Math.abs(x0(d) - x0(0)) }, // TODO: could optimize by precalculating x0(0) and x1(0)
+                w1 = function(d) { return Math.abs(x1(d) - x1(0)) };
+
+            var title = gEnter.select('.nv-titles').append('g')
+                .attr('text-anchor', 'end')
+                .attr('transform', 'translate(-6,' + (height - margin.top - margin.bottom) / 2 + ')');
+            title.append('text')
+                .attr('class', 'nv-title')
+                .text(function(d) { return d.title; });
+
+            title.append('text')
+                .attr('class', 'nv-subtitle')
+                .attr('dy', '1em')
+                .text(function(d) { return d.subtitle; });
+
+            bullet
+                .width(availableWidth)
+                .height(availableHeight)
+
+            var bulletWrap = g.select('.nv-bulletWrap');
+            d3.transition(bulletWrap).call(bullet);
+
+            // Compute the tick format.
+            var format = tickFormat || x1.tickFormat( availableWidth / 100 );
+
+            // Update the tick groups.
+            var tick = g.selectAll('g.nv-tick')
+                .data(x1.ticks( ticks ? ticks : (availableWidth / 50) ), function(d) {
+                    return this.textContent || format(d);
+                });
+
+            // Initialize the ticks with the old scale, x0.
+            var tickEnter = tick.enter().append('g')
+                .attr('class', 'nv-tick')
+                .attr('transform', function(d) { return 'translate(' + x0(d) + ',0)' })
+                .style('opacity', 1e-6);
+
+            tickEnter.append('line')
+                .attr('y1', availableHeight)
+                .attr('y2', availableHeight * 7 / 6);
+
+            tickEnter.append('text')
+                .attr('text-anchor', 'middle')
+                .attr('dy', '1em')
+                .attr('y', availableHeight * 7 / 6)
+                .text(format);
+
+            // Transition the updating ticks to the new scale, x1.
+            var tickUpdate = d3.transition(tick)
+                .attr('transform', function(d) { return 'translate(' + x1(d) + ',0)' })
+                .style('opacity', 1);
+
+            tickUpdate.select('line')
+                .attr('y1', availableHeight)
+                .attr('y2', availableHeight * 7 / 6);
+
+            tickUpdate.select('text')
+                .attr('y', availableHeight * 7 / 6);
+
+            // Transition the exiting ticks to the new scale, x1.
+            d3.transition(tick.exit())
+                .attr('transform', function(d) { return 'translate(' + x1(d) + ',0)' })
+                .style('opacity', 1e-6)
+                .remove();
+        });
+
+        d3.timer.flush();
+        return chart;
+    }
+
+    //============================================================
+    // Event Handling/Dispatching (out of chart's scope)
+    //------------------------------------------------------------
+
+    bullet.dispatch.on('elementMouseover.tooltip', function(evt) {
+        evt['series'] = {
+            key: evt.label,
+            value: evt.value,
+            color: evt.color
+        };
+        tooltip.data(evt).hidden(false);
+    });
+
+    bullet.dispatch.on('elementMouseout.tooltip', function(evt) {
+        tooltip.hidden(true);
+    });
+
+    bullet.dispatch.on('elementMousemove.tooltip', function(evt) {
+        tooltip();
+    });
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.bullet = bullet;
+    chart.dispatch = dispatch;
+    chart.tooltip = tooltip;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        ranges:      {get: function(){return ranges;}, set: function(_){ranges=_;}}, // ranges (bad, satisfactory, good)
+        markers:     {get: function(){return markers;}, set: function(_){markers=_;}}, // markers (previous, goal)
+        measures: {get: function(){return measures;}, set: function(_){measures=_;}}, // measures (actual, forecast)
+        width:    {get: function(){return width;}, set: function(_){width=_;}},
+        height:    {get: function(){return height;}, set: function(_){height=_;}},
+        tickFormat:    {get: function(){return tickFormat;}, set: function(_){tickFormat=_;}},
+        ticks:    {get: function(){return ticks;}, set: function(_){ticks=_;}},
+        noData:    {get: function(){return noData;}, set: function(_){noData=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        orient: {get: function(){return orient;}, set: function(_){ // left, right, top, bottom
+            orient = _;
+            reverse = orient == 'right' || orient == 'bottom';
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, bullet);
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+
+
+
+nv.models.candlestickBar = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , width = null
+        , height = null
+        , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
+        , container
+        , x = d3.scale.linear()
+        , y = d3.scale.linear()
+        , getX = function(d) { return d.x }
+        , getY = function(d) { return d.y }
+        , getOpen = function(d) { return d.open }
+        , getClose = function(d) { return d.close }
+        , getHigh = function(d) { return d.high }
+        , getLow = function(d) { return d.low }
+        , forceX = []
+        , forceY = []
+        , padData     = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart
+        , clipEdge = true
+        , color = nv.utils.defaultColor()
+        , interactive = false
+        , xDomain
+        , yDomain
+        , xRange
+        , yRange
+        , dispatch = d3.dispatch('stateChange', 'changeState', 'renderEnd', 'chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove')
+        ;
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    function chart(selection) {
+        selection.each(function(data) {
+            container = d3.select(this);
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            nv.utils.initSVG(container);
+
+            // Width of the candlestick bars.
+            var barWidth = (availableWidth / data[0].values.length) * .45;
+
+            // Setup Scales
+            x.domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ));
+
+            if (padData)
+                x.range(xRange || [availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5)  / data[0].values.length ]);
+            else
+                x.range(xRange || [5 + barWidth / 2, availableWidth - barWidth / 2 - 5]);
+
+            y.domain(yDomain || [
+                    d3.min(data[0].values.map(getLow).concat(forceY)),
+                    d3.max(data[0].values.map(getHigh).concat(forceY))
+                ]
+            ).range(yRange || [availableHeight, 0]);
+
+            // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
+            if (x.domain()[0] === x.domain()[1])
+                x.domain()[0] ?
+                    x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
+                    : x.domain([-1,1]);
+
+            if (y.domain()[0] === y.domain()[1])
+                y.domain()[0] ?
+                    y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
+                    : y.domain([-1,1]);
+
+            // Setup containers and skeleton of chart
+            var wrap = d3.select(this).selectAll('g.nv-wrap.nv-candlestickBar').data([data[0].values]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-candlestickBar');
+            var defsEnter = wrapEnter.append('defs');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-ticks');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            container
+                .on('click', function(d,i) {
+                    dispatch.chartClick({
+                        data: d,
+                        index: i,
+                        pos: d3.event,
+                        id: id
+                    });
+                });
+
+            defsEnter.append('clipPath')
+                .attr('id', 'nv-chart-clip-path-' + id)
+                .append('rect');
+
+            wrap.select('#nv-chart-clip-path-' + id + ' rect')
+                .attr('width', availableWidth)
+                .attr('height', availableHeight);
+
+            g   .attr('clip-path', clipEdge ? 'url(#nv-chart-clip-path-' + id + ')' : '');
+
+            var ticks = wrap.select('.nv-ticks').selectAll('.nv-tick')
+                .data(function(d) { return d });
+            ticks.exit().remove();
+
+            var tickGroups = ticks.enter().append('g');
+
+            // The colors are currently controlled by CSS.
+            ticks
+                .attr('class', function(d, i, j) { return (getOpen(d, i) > getClose(d, i) ? 'nv-tick negative' : 'nv-tick positive') + ' nv-tick-' + j + '-' + i});
+
+            var lines = tickGroups.append('line')
+                .attr('class', 'nv-candlestick-lines')
+                .attr('transform', function(d, i) { return 'translate(' + x(getX(d, i)) + ',0)'; })
+                .attr('x1', 0)
+                .attr('y1', function(d, i) { return y(getHigh(d, i)); })
+                .attr('x2', 0)
+                .attr('y2', function(d, i) { return y(getLow(d, i)); });
+
+            var rects = tickGroups.append('rect')
+                .attr('class', 'nv-candlestick-rects nv-bars')
+                .attr('transform', function(d, i) {
+                    return 'translate(' + (x(getX(d, i)) - barWidth/2) + ','
+                    + (y(getY(d, i)) - (getOpen(d, i) > getClose(d, i) ? (y(getClose(d, i)) - y(getOpen(d, i))) : 0))
+                    + ')';
+                })
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('width', barWidth)
+                .attr('height', function(d, i) {
+                    var open = getOpen(d, i);
+                    var close = getClose(d, i);
+                    return open > close ? y(close) - y(open) : y(open) - y(close);
+                });
+
+            ticks.select('.nv-candlestick-lines').transition()
+                .attr('transform', function(d, i) { return 'translate(' + x(getX(d, i)) + ',0)'; })
+                .attr('x1', 0)
+                .attr('y1', function(d, i) { return y(getHigh(d, i)); })
+                .attr('x2', 0)
+                .attr('y2', function(d, i) { return y(getLow(d, i)); });
+
+            ticks.select('.nv-candlestick-rects').transition()
+                .attr('transform', function(d, i) {
+                    return 'translate(' + (x(getX(d, i)) - barWidth/2) + ','
+                    + (y(getY(d, i)) - (getOpen(d, i) > getClose(d, i) ? (y(getClose(d, i)) - y(getOpen(d, i))) : 0))
+                    + ')';
+                })
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('width', barWidth)
+                .attr('height', function(d, i) {
+                    var open = getOpen(d, i);
+                    var close = getClose(d, i);
+                    return open > close ? y(close) - y(open) : y(open) - y(close);
+                });
+        });
+
+        return chart;
+    }
+
+
+    //Create methods to allow outside functions to highlight a specific bar.
+    chart.highlightPoint = function(pointIndex, isHoverOver) {
+        chart.clearHighlights();
+        container.select(".nv-candlestickBar .nv-tick-0-" + pointIndex)
+            .classed("hover", isHoverOver)
+        ;
+    };
+
+    chart.clearHighlights = function() {
+        container.select(".nv-candlestickBar .nv-tick.hover")
+            .classed("hover", false)
+        ;
+    };
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:    {get: function(){return width;}, set: function(_){width=_;}},
+        height:   {get: function(){return height;}, set: function(_){height=_;}},
+        xScale:   {get: function(){return x;}, set: function(_){x=_;}},
+        yScale:   {get: function(){return y;}, set: function(_){y=_;}},
+        xDomain:  {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
+        yDomain:  {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
+        xRange:   {get: function(){return xRange;}, set: function(_){xRange=_;}},
+        yRange:   {get: function(){return yRange;}, set: function(_){yRange=_;}},
+        forceX:   {get: function(){return forceX;}, set: function(_){forceX=_;}},
+        forceY:   {get: function(){return forceY;}, set: function(_){forceY=_;}},
+        padData:  {get: function(){return padData;}, set: function(_){padData=_;}},
+        clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
+        id:       {get: function(){return id;}, set: function(_){id=_;}},
+        interactive: {get: function(){return interactive;}, set: function(_){interactive=_;}},
+
+        x:     {get: function(){return getX;}, set: function(_){getX=_;}},
+        y:     {get: function(){return getY;}, set: function(_){getY=_;}},
+        open:  {get: function(){return getOpen();}, set: function(_){getOpen=_;}},
+        close: {get: function(){return getClose();}, set: function(_){getClose=_;}},
+        high:  {get: function(){return getHigh;}, set: function(_){getHigh=_;}},
+        low:   {get: function(){return getLow;}, set: function(_){getLow=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    != undefined ? _.top    : margin.top;
+            margin.right  = _.right  != undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom != undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   != undefined ? _.left   : margin.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+    return chart;
+};
+
+nv.models.cumulativeLineChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var lines = nv.models.line()
+        , xAxis = nv.models.axis()
+        , yAxis = nv.models.axis()
+        , legend = nv.models.legend()
+        , controls = nv.models.legend()
+        , interactiveLayer = nv.interactiveGuideline()
+        , tooltip = nv.models.tooltip()
+        ;
+
+    var margin = {top: 30, right: 30, bottom: 50, left: 60}
+        , color = nv.utils.defaultColor()
+        , width = null
+        , height = null
+        , showLegend = true
+        , showXAxis = true
+        , showYAxis = true
+        , rightAlignYAxis = false
+        , showControls = true
+        , useInteractiveGuideline = false
+        , rescaleY = true
+        , x //can be accessed via chart.xScale()
+        , y //can be accessed via chart.yScale()
+        , id = lines.id()
+        , state = nv.utils.state()
+        , defaultState = null
+        , noData = null
+        , average = function(d) { return d.average }
+        , dispatch = d3.dispatch('stateChange', 'changeState', 'renderEnd')
+        , transitionDuration = 250
+        , duration = 250
+        , noErrorCheck = false  //if set to TRUE, will bypass an error check in the indexify function.
+        ;
+
+    state.index = 0;
+    state.rescaleY = rescaleY;
+
+    xAxis.orient('bottom').tickPadding(7);
+    yAxis.orient((rightAlignYAxis) ? 'right' : 'left');
+
+    tooltip.valueFormatter(function(d, i) {
+        return yAxis.tickFormat()(d, i);
+    }).headerFormatter(function(d, i) {
+        return xAxis.tickFormat()(d, i);
+    });
+
+    controls.updateState(false);
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var dx = d3.scale.linear()
+        , index = {i: 0, x: 0}
+        , renderWatch = nv.utils.renderWatch(dispatch, duration)
+        ;
+
+    var stateGetter = function(data) {
+        return function(){
+            return {
+                active: data.map(function(d) { return !d.disabled }),
+                index: index.i,
+                rescaleY: rescaleY
+            };
+        }
+    };
+
+    var stateSetter = function(data) {
+        return function(state) {
+            if (state.index !== undefined)
+                index.i = state.index;
+            if (state.rescaleY !== undefined)
+                rescaleY = state.rescaleY;
+            if (state.active !== undefined)
+                data.forEach(function(series,i) {
+                    series.disabled = !state.active[i];
+                });
+        }
+    };
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(lines);
+        if (showXAxis) renderWatch.models(xAxis);
+        if (showYAxis) renderWatch.models(yAxis);
+        selection.each(function(data) {
+            var container = d3.select(this);
+            nv.utils.initSVG(container);
+            container.classed('nv-chart-' + id, true);
+            var that = this;
+
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            chart.update = function() {
+                if (duration === 0)
+                    container.call(chart);
+                else
+                    container.transition().duration(duration).call(chart)
+            };
+            chart.container = this;
+
+            state
+                .setter(stateSetter(data), chart.update)
+                .getter(stateGetter(data))
+                .update();
+
+            // DEPRECATED set state.disableddisabled
+            state.disabled = data.map(function(d) { return !!d.disabled });
+
+            if (!defaultState) {
+                var key;
+                defaultState = {};
+                for (key in state) {
+                    if (state[key] instanceof Array)
+                        defaultState[key] = state[key].slice(0);
+                    else
+                        defaultState[key] = state[key];
+                }
+            }
+
+            var indexDrag = d3.behavior.drag()
+                .on('dragstart', dragStart)
+                .on('drag', dragMove)
+                .on('dragend', dragEnd);
+
+
+            function dragStart(d,i) {
+                d3.select(chart.container)
+                    .style('cursor', 'ew-resize');
+            }
+
+            function dragMove(d,i) {
+                index.x = d3.event.x;
+                index.i = Math.round(dx.invert(index.x));
+                updateZero();
+            }
+
+            function dragEnd(d,i) {
+                d3.select(chart.container)
+                    .style('cursor', 'auto');
+
+                // update state and send stateChange with new index
+                state.index = index.i;
+                dispatch.stateChange(state);
+            }
+
+            // Display No Data message if there's nothing to show.
+            if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
+                nv.utils.noData(chart, container)
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            // Setup Scales
+            x = lines.xScale();
+            y = lines.yScale();
+
+            if (!rescaleY) {
+                var seriesDomains = data
+                    .filter(function(series) { return !series.disabled })
+                    .map(function(series,i) {
+                        var initialDomain = d3.extent(series.values, lines.y());
+
+                        //account for series being disabled when losing 95% or more
+                        if (initialDomain[0] < -.95) initialDomain[0] = -.95;
+
+                        return [
+                                (initialDomain[0] - initialDomain[1]) / (1 + initialDomain[1]),
+                                (initialDomain[1] - initialDomain[0]) / (1 + initialDomain[0])
+                        ];
+                    });
+
+                var completeDomain = [
+                    d3.min(seriesDomains, function(d) { return d[0] }),
+                    d3.max(seriesDomains, function(d) { return d[1] })
+                ];
+
+                lines.yDomain(completeDomain);
+            } else {
+                lines.yDomain(null);
+            }
+
+            dx.domain([0, data[0].values.length - 1]) //Assumes all series have same length
+                .range([0, availableWidth])
+                .clamp(true);
+
+            var data = indexify(index.i, data);
+
+            // Setup containers and skeleton of chart
+            var interactivePointerEvents = (useInteractiveGuideline) ? "none" : "all";
+            var wrap = container.selectAll('g.nv-wrap.nv-cumulativeLine').data([data]);
+            var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-cumulativeLine').append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-interactive');
+            gEnter.append('g').attr('class', 'nv-x nv-axis').style("pointer-events","none");
+            gEnter.append('g').attr('class', 'nv-y nv-axis');
+            gEnter.append('g').attr('class', 'nv-background');
+            gEnter.append('g').attr('class', 'nv-linesWrap').style("pointer-events",interactivePointerEvents);
+            gEnter.append('g').attr('class', 'nv-avgLinesWrap').style("pointer-events","none");
+            gEnter.append('g').attr('class', 'nv-legendWrap');
+            gEnter.append('g').attr('class', 'nv-controlsWrap');
+
+            // Legend
+            if (showLegend) {
+                legend.width(availableWidth);
+
+                g.select('.nv-legendWrap')
+                    .datum(data)
+                    .call(legend);
+
+                if ( margin.top != legend.height()) {
+                    margin.top = legend.height();
+                    availableHeight = nv.utils.availableHeight(height, container, margin);
+                }
+
+                g.select('.nv-legendWrap')
+                    .attr('transform', 'translate(0,' + (-margin.top) +')')
+            }
+
+            // Controls
+            if (showControls) {
+                var controlsData = [
+                    { key: 'Re-scale y-axis', disabled: !rescaleY }
+                ];
+
+                controls
+                    .width(140)
+                    .color(['#444', '#444', '#444'])
+                    .rightAlign(false)
+                    .margin({top: 5, right: 0, bottom: 5, left: 20})
+                ;
+
+                g.select('.nv-controlsWrap')
+                    .datum(controlsData)
+                    .attr('transform', 'translate(0,' + (-margin.top) +')')
+                    .call(controls);
+            }
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            if (rightAlignYAxis) {
+                g.select(".nv-y.nv-axis")
+                    .attr("transform", "translate(" + availableWidth + ",0)");
+            }
+
+            // Show error if series goes below 100%
+            var tempDisabled = data.filter(function(d) { return d.tempDisabled });
+
+            wrap.select('.tempDisabled').remove(); //clean-up and prevent duplicates
+            if (tempDisabled.length) {
+                wrap.append('text').attr('class', 'tempDisabled')
+                    .attr('x', availableWidth / 2)
+                    .attr('y', '-.71em')
+                    .style('text-anchor', 'end')
+                    .text(tempDisabled.map(function(d) { return d.key }).join(', ') + ' values cannot be calculated for this time period.');
+            }
+
+            //Set up interactive layer
+            if (useInteractiveGuideline) {
+                interactiveLayer
+                    .width(availableWidth)
+                    .height(availableHeight)
+                    .margin({left:margin.left,top:margin.top})
+                    .svgContainer(container)
+                    .xScale(x);
+                wrap.select(".nv-interactive").call(interactiveLayer);
+            }
+
+            gEnter.select('.nv-background')
+                .append('rect');
+
+            g.select('.nv-background rect')
+                .attr('width', availableWidth)
+                .attr('height', availableHeight);
+
+            lines
+                //.x(function(d) { return d.x })
+                .y(function(d) { return d.display.y })
+                .width(availableWidth)
+                .height(availableHeight)
+                .color(data.map(function(d,i) {
+                    return d.color || color(d, i);
+                }).filter(function(d,i) { return !data[i].disabled && !data[i].tempDisabled; }));
+
+            var linesWrap = g.select('.nv-linesWrap')
+                .datum(data.filter(function(d) { return  !d.disabled && !d.tempDisabled }));
+
+            linesWrap.call(lines);
+
+            //Store a series index number in the data array.
+            data.forEach(function(d,i) {
+                d.seriesIndex = i;
+            });
+
+            var avgLineData = data.filter(function(d) {
+                return !d.disabled && !!average(d);
+            });
+
+            var avgLines = g.select(".nv-avgLinesWrap").selectAll("line")
+                .data(avgLineData, function(d) { return d.key; });
+
+            var getAvgLineY = function(d) {
+                //If average lines go off the svg element, clamp them to the svg bounds.
+                var yVal = y(average(d));
+                if (yVal < 0) return 0;
+                if (yVal > availableHeight) return availableHeight;
+                return yVal;
+            };
+
+            avgLines.enter()
+                .append('line')
+                .style('stroke-width',2)
+                .style('stroke-dasharray','10,10')
+                .style('stroke',function (d,i) {
+                    return lines.color()(d,d.seriesIndex);
+                })
+                .attr('x1',0)
+                .attr('x2',availableWidth)
+                .attr('y1', getAvgLineY)
+                .attr('y2', getAvgLineY);
+
+            avgLines
+                .style('stroke-opacity',function(d){
+                    //If average lines go offscreen, make them transparent
+                    var yVal = y(average(d));
+                    if (yVal < 0 || yVal > availableHeight) return 0;
+                    return 1;
+                })
+                .attr('x1',0)
+                .attr('x2',availableWidth)
+                .attr('y1', getAvgLineY)
+                .attr('y2', getAvgLineY);
+
+            avgLines.exit().remove();
+
+            //Create index line
+            var indexLine = linesWrap.selectAll('.nv-indexLine')
+                .data([index]);
+            indexLine.enter().append('rect').attr('class', 'nv-indexLine')
+                .attr('width', 3)
+                .attr('x', -2)
+                .attr('fill', 'red')
+                .attr('fill-opacity', .5)
+                .style("pointer-events","all")
+                .call(indexDrag);
+
+            indexLine
+                .attr('transform', function(d) { return 'translate(' + dx(d.i) + ',0)' })
+                .attr('height', availableHeight);
+
+            // Setup Axes
+            if (showXAxis) {
+                xAxis
+                    .scale(x)
+                    ._ticks( nv.utils.calcTicksX(availableWidth/70, data) )
+                    .tickSize(-availableHeight, 0);
+
+                g.select('.nv-x.nv-axis')
+                    .attr('transform', 'translate(0,' + y.range()[0] + ')');
+                g.select('.nv-x.nv-axis')
+                    .call(xAxis);
+            }
+
+            if (showYAxis) {
+                yAxis
+                    .scale(y)
+                    ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
+                    .tickSize( -availableWidth, 0);
+
+                g.select('.nv-y.nv-axis')
+                    .call(yAxis);
+            }
+
+            //============================================================
+            // Event Handling/Dispatching (in chart's scope)
+            //------------------------------------------------------------
+
+            function updateZero() {
+                indexLine
+                    .data([index]);
+
+                //When dragging the index line, turn off line transitions.
+                // Then turn them back on when done dragging.
+                var oldDuration = chart.duration();
+                chart.duration(0);
+                chart.update();
+                chart.duration(oldDuration);
+            }
+
+            g.select('.nv-background rect')
+                .on('click', function() {
+                    index.x = d3.mouse(this)[0];
+                    index.i = Math.round(dx.invert(index.x));
+
+                    // update state and send stateChange with new index
+                    state.index = index.i;
+                    dispatch.stateChange(state);
+
+                    updateZero();
+                });
+
+            lines.dispatch.on('elementClick', function(e) {
+                index.i = e.pointIndex;
+                index.x = dx(index.i);
+
+                // update state and send stateChange with new index
+                state.index = index.i;
+                dispatch.stateChange(state);
+
+                updateZero();
+            });
+
+            controls.dispatch.on('legendClick', function(d,i) {
+                d.disabled = !d.disabled;
+                rescaleY = !d.disabled;
+
+                state.rescaleY = rescaleY;
+                dispatch.stateChange(state);
+                chart.update();
+            });
+
+            legend.dispatch.on('stateChange', function(newState) {
+                for (var key in newState)
+                    state[key] = newState[key];
+                dispatch.stateChange(state);
+                chart.update();
+            });
+
+            interactiveLayer.dispatch.on('elementMousemove', function(e) {
+                lines.clearHighlights();
+                var singlePoint, pointIndex, pointXLocation, allData = [];
+
+                data
+                    .filter(function(series, i) {
+                        series.seriesIndex = i;
+                        return !series.disabled;
+                    })
+                    .forEach(function(series,i) {
+                        pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());
+                        lines.highlightPoint(i, pointIndex, true);
+                        var point = series.values[pointIndex];
+                        if (typeof point === 'undefined') return;
+                        if (typeof singlePoint === 'undefined') singlePoint = point;
+                        if (typeof pointXLocation === 'undefined') pointXLocation = chart.xScale()(chart.x()(point,pointIndex));
+                        allData.push({
+                            key: series.key,
+                            value: chart.y()(point, pointIndex),
+                            color: color(series,series.seriesIndex)
+                        });
+                    });
+
+                //Highlight the tooltip entry based on which point the mouse is closest to.
+                if (allData.length > 2) {
+                    var yValue = chart.yScale().invert(e.mouseY);
+                    var domainExtent = Math.abs(chart.yScale().domain()[0] - chart.yScale().domain()[1]);
+                    var threshold = 0.03 * domainExtent;
+                    var indexToHighlight = nv.nearestValueIndex(allData.map(function(d){return d.value}),yValue,threshold);
+                    if (indexToHighlight !== null)
+                        allData[indexToHighlight].highlight = true;
+                }
+
+                var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex), pointIndex);
+                interactiveLayer.tooltip
+                    .chartContainer(that.parentNode)
+                    .valueFormatter(function(d,i) {
+                        return yAxis.tickFormat()(d);
+                    })
+                    .data(
+                    {
+                        value: xValue,
+                        series: allData
+                    }
+                )();
+
+                interactiveLayer.renderGuideLine(pointXLocation);
+            });
+
+            interactiveLayer.dispatch.on("elementMouseout",function(e) {
+                lines.clearHighlights();
+            });
+
+            // Update chart from a state object passed to event handler
+            dispatch.on('changeState', function(e) {
+                if (typeof e.disabled !== 'undefined') {
+                    data.forEach(function(series,i) {
+                        series.disabled = e.disabled[i];
+                    });
+
+                    state.disabled = e.disabled;
+                }
+
+                if (typeof e.index !== 'undefined') {
+                    index.i = e.index;
+                    index.x = dx(index.i);
+
+                    state.index = e.index;
+
+                    indexLine
+                        .data([index]);
+                }
+
+                if (typeof e.rescaleY !== 'undefined') {
+                    rescaleY = e.rescaleY;
+                }
+
+                chart.update();
+            });
+
+        });
+
+        renderWatch.renderEnd('cumulativeLineChart immediate');
+
+        return chart;
+    }
+
+    //============================================================
+    // Event Handling/Dispatching (out of chart's scope)
+    //------------------------------------------------------------
+
+    lines.dispatch.on('elementMouseover.tooltip', function(evt) {
+        var point = {
+            x: chart.x()(evt.point),
+            y: chart.y()(evt.point),
+            color: evt.point.color
+        };
+        evt.point = point;
+        tooltip.data(evt).hidden(false);
+    });
+
+    lines.dispatch.on('elementMouseout.tooltip', function(evt) {
+        tooltip.hidden(true)
+    });
+
+    //============================================================
+    // Functions
+    //------------------------------------------------------------
+
+    var indexifyYGetter = null;
+    /* Normalize the data according to an index point. */
+    function indexify(idx, data) {
+        if (!indexifyYGetter) indexifyYGetter = lines.y();
+        return data.map(function(line, i) {
+            if (!line.values) {
+                return line;
+            }
+            var indexValue = line.values[idx];
+            if (indexValue == null) {
+                return line;
+            }
+            var v = indexifyYGetter(indexValue, idx);
+
+            //TODO: implement check below, and disable series if series loses 100% or more cause divide by 0 issue
+            if (v < -.95 && !noErrorCheck) {
+                //if a series loses more than 100%, calculations fail.. anything close can cause major distortion (but is mathematically correct till it hits 100)
+
+                line.tempDisabled = true;
+                return line;
+            }
+
+            line.tempDisabled = false;
+
+            line.values = line.values.map(function(point, pointIndex) {
+                point.display = {'y': (indexifyYGetter(point, pointIndex) - v) / (1 + v) };
+                return point;
+            });
+
+            return line;
+        })
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    // expose chart's sub-components
+    chart.dispatch = dispatch;
+    chart.lines = lines;
+    chart.legend = legend;
+    chart.controls = controls;
+    chart.xAxis = xAxis;
+    chart.yAxis = yAxis;
+    chart.interactiveLayer = interactiveLayer;
+    chart.state = state;
+    chart.tooltip = tooltip;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        rescaleY:     {get: function(){return rescaleY;}, set: function(_){rescaleY=_;}},
+        showControls:     {get: function(){return showControls;}, set: function(_){showControls=_;}},
+        showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
+        average: {get: function(){return average;}, set: function(_){average=_;}},
+        defaultState:    {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
+        noData:    {get: function(){return noData;}, set: function(_){noData=_;}},
+        showXAxis:    {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
+        showYAxis:    {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
+        noErrorCheck:    {get: function(){return noErrorCheck;}, set: function(_){noErrorCheck=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+            legend.color(color);
+        }},
+        useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){
+            useInteractiveGuideline = _;
+            if (_ === true) {
+                chart.interactive(false);
+                chart.useVoronoi(false);
+            }
+        }},
+        rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
+            rightAlignYAxis = _;
+            yAxis.orient( (_) ? 'right' : 'left');
+        }},
+        duration:    {get: function(){return duration;}, set: function(_){
+            duration = _;
+            lines.duration(duration);
+            xAxis.duration(duration);
+            yAxis.duration(duration);
+            renderWatch.reset(duration);
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, lines);
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+//TODO: consider deprecating by adding necessary features to multiBar model
+nv.models.discreteBar = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , width = 960
+        , height = 500
+        , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
+        , container
+        , x = d3.scale.ordinal()
+        , y = d3.scale.linear()
+        , getX = function(d) { return d.x }
+        , getY = function(d) { return d.y }
+        , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove
+        , color = nv.utils.defaultColor()
+        , showValues = false
+        , valueFormat = d3.format(',.2f')
+        , xDomain
+        , yDomain
+        , xRange
+        , yRange
+        , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
+        , rectClass = 'discreteBar'
+        , duration = 250
+        ;
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var x0, y0;
+    var renderWatch = nv.utils.renderWatch(dispatch, duration);
+
+    function chart(selection) {
+        renderWatch.reset();
+        selection.each(function(data) {
+            var availableWidth = width - margin.left - margin.right,
+                availableHeight = height - margin.top - margin.bottom;
+
+            container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            //add series index to each data point for reference
+            data.forEach(function(series, i) {
+                series.values.forEach(function(point) {
+                    point.series = i;
+                });
+            });
+
+            // Setup Scales
+            // remap and flatten the data for use in calculating the scales' domains
+            var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate
+                data.map(function(d) {
+                    return d.values.map(function(d,i) {
+                        return { x: getX(d,i), y: getY(d,i), y0: d.y0 }
+                    })
+                });
+
+            x   .domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))
+                .rangeBands(xRange || [0, availableWidth], .1);
+            y   .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(forceY)));
+
+            // If showValues, pad the Y axis range to account for label height
+            if (showValues) y.range(yRange || [availableHeight - (y.domain()[0] < 0 ? 12 : 0), y.domain()[1] > 0 ? 12 : 0]);
+            else y.range(yRange || [availableHeight, 0]);
+
+            //store old scales if they exist
+            x0 = x0 || x;
+            y0 = y0 || y.copy().range([y(0),y(0)]);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-discretebar').data([data]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-discretebar');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-groups');
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            //TODO: by definition, the discrete bar should not have multiple groups, will modify/remove later
+            var groups = wrap.select('.nv-groups').selectAll('.nv-group')
+                .data(function(d) { return d }, function(d) { return d.key });
+            groups.enter().append('g')
+                .style('stroke-opacity', 1e-6)
+                .style('fill-opacity', 1e-6);
+            groups.exit()
+                .watchTransition(renderWatch, 'discreteBar: exit groups')
+                .style('stroke-opacity', 1e-6)
+                .style('fill-opacity', 1e-6)
+                .remove();
+            groups
+                .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
+                .classed('hover', function(d) { return d.hover });
+            groups
+                .watchTransition(renderWatch, 'discreteBar: groups')
+                .style('stroke-opacity', 1)
+                .style('fill-opacity', .75);
+
+            var bars = groups.selectAll('g.nv-bar')
+                .data(function(d) { return d.values });
+            bars.exit().remove();
+
+            var barsEnter = bars.enter().append('g')
+                .attr('transform', function(d,i,j) {
+                    return 'translate(' + (x(getX(d,i)) + x.rangeBand() * .05 ) + ', ' + y(0) + ')'
+                })
+                .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
+                    d3.select(this).classed('hover', true);
+                    dispatch.elementMouseover({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                })
+                .on('mouseout', function(d,i) {
+                    d3.select(this).classed('hover', false);
+                    dispatch.elementMouseout({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                })
+                .on('mousemove', function(d,i) {
+                    dispatch.elementMousemove({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                })
+                .on('click', function(d,i) {
+                    var element = this;
+                    dispatch.elementClick({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill"),
+                        event: d3.event,
+                        element: element
+                    });
+                    d3.event.stopPropagation();
+                })
+                .on('dblclick', function(d,i) {
+                    dispatch.elementDblClick({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                    d3.event.stopPropagation();
+                });
+
+            barsEnter.append('rect')
+                .attr('height', 0)
+                .attr('width', x.rangeBand() * .9 / data.length )
+
+            if (showValues) {
+                barsEnter.append('text')
+                    .attr('text-anchor', 'middle')
+                ;
+
+                bars.select('text')
+                    .text(function(d,i) { return valueFormat(getY(d,i)) })
+                    .watchTransition(renderWatch, 'discreteBar: bars text')
+                    .attr('x', x.rangeBand() * .9 / 2)
+                    .attr('y', function(d,i) { return getY(d,i) < 0 ? y(getY(d,i)) - y(0) + 12 : -4 })
+
+                ;
+            } else {
+                bars.selectAll('text').remove();
+            }
+
+            bars
+                .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive' })
+                .style('fill', function(d,i) { return d.color || color(d,i) })
+                .style('stroke', function(d,i) { return d.color || color(d,i) })
+                .select('rect')
+                .attr('class', rectClass)
+                .watchTransition(renderWatch, 'discreteBar: bars rect')
+                .attr('width', x.rangeBand() * .9 / data.length);
+            bars.watchTransition(renderWatch, 'discreteBar: bars')
+                //.delay(function(d,i) { return i * 1200 / data[0].values.length })
+                .attr('transform', function(d,i) {
+                    var left = x(getX(d,i)) + x.rangeBand() * .05,
+                        top = getY(d,i) < 0 ?
+                            y(0) :
+                                y(0) - y(getY(d,i)) < 1 ?
+                            y(0) - 1 : //make 1 px positive bars show up above y=0
+                            y(getY(d,i));
+
+                    return 'translate(' + left + ', ' + top + ')'
+                })
+                .select('rect')
+                .attr('height', function(d,i) {
+                    return  Math.max(Math.abs(y(getY(d,i)) - y(0)), 1)
+                });
+
+
+            //store old scales for use in transitions on update
+            x0 = x.copy();
+            y0 = y.copy();
+
+        });
+
+        renderWatch.renderEnd('discreteBar immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:   {get: function(){return width;}, set: function(_){width=_;}},
+        height:  {get: function(){return height;}, set: function(_){height=_;}},
+        forceY:  {get: function(){return forceY;}, set: function(_){forceY=_;}},
+        showValues: {get: function(){return showValues;}, set: function(_){showValues=_;}},
+        x:       {get: function(){return getX;}, set: function(_){getX=_;}},
+        y:       {get: function(){return getY;}, set: function(_){getY=_;}},
+        xScale:  {get: function(){return x;}, set: function(_){x=_;}},
+        yScale:  {get: function(){return y;}, set: function(_){y=_;}},
+        xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
+        yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
+        xRange:  {get: function(){return xRange;}, set: function(_){xRange=_;}},
+        yRange:  {get: function(){return yRange;}, set: function(_){yRange=_;}},
+        valueFormat:    {get: function(){return valueFormat;}, set: function(_){valueFormat=_;}},
+        id:          {get: function(){return id;}, set: function(_){id=_;}},
+        rectClass: {get: function(){return rectClass;}, set: function(_){rectClass=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+
+nv.models.discreteBarChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var discretebar = nv.models.discreteBar()
+        , xAxis = nv.models.axis()
+        , yAxis = nv.models.axis()
+	, legend = nv.models.legend()
+        , tooltip = nv.models.tooltip()
+        ;
+
+    var margin = {top: 15, right: 10, bottom: 50, left: 60}
+        , width = null
+        , height = null
+        , color = nv.utils.getColor()
+	, showLegend = false
+        , showXAxis = true
+        , showYAxis = true
+        , rightAlignYAxis = false
+        , staggerLabels = false
+        , wrapLabels = false
+        , rotateLabels = 0
+        , x
+        , y
+        , noData = null
+        , dispatch = d3.dispatch('beforeUpdate','renderEnd')
+        , duration = 250
+        ;
+
+    xAxis
+        .orient('bottom')
+        .showMaxMin(false)
+        .tickFormat(function(d) { return d })
+    ;
+    yAxis
+        .orient((rightAlignYAxis) ? 'right' : 'left')
+        .tickFormat(d3.format(',.1f'))
+    ;
+
+    tooltip
+        .duration(0)
+        .headerEnabled(false)
+        .valueFormatter(function(d, i) {
+            return yAxis.tickFormat()(d, i);
+        })
+        .keyFormatter(function(d, i) {
+            return xAxis.tickFormat()(d, i);
+        });
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var renderWatch = nv.utils.renderWatch(dispatch, duration);
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(discretebar);
+        if (showXAxis) renderWatch.models(xAxis);
+        if (showYAxis) renderWatch.models(yAxis);
+
+        selection.each(function(data) {
+            var container = d3.select(this),
+                that = this;
+            nv.utils.initSVG(container);
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            chart.update = function() {
+                dispatch.beforeUpdate();
+                container.transition().duration(duration).call(chart);
+            };
+            chart.container = this;
+
+            // Display No Data message if there's nothing to show.
+            if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
+                nv.utils.noData(chart, container);
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            // Setup Scales
+            x = discretebar.xScale();
+            y = discretebar.yScale().clamp(true);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-discreteBarWithAxes').data([data]);
+            var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-discreteBarWithAxes').append('g');
+            var defsEnter = gEnter.append('defs');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-x nv-axis');
+            gEnter.append('g').attr('class', 'nv-y nv-axis')
+                .append('g').attr('class', 'nv-zeroLine')
+                .append('line');
+
+            gEnter.append('g').attr('class', 'nv-barsWrap');
+	    gEnter.append('g').attr('class', 'nv-legendWrap');
+
+            g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+	    
+            if (showLegend) {
+                legend.width(availableWidth);
+
+                g.select('.nv-legendWrap')
+                    .datum(data)
+                    .call(legend);
+
+                if ( margin.top != legend.height()) {
+                    margin.top = legend.height();
+                    availableHeight = nv.utils.availableHeight(height, container, margin);
+                }
+
+                wrap.select('.nv-legendWrap')
+                    .attr('transform', 'translate(0,' + (-margin.top) +')')
+            }
+            
+            if (rightAlignYAxis) {
+                g.select(".nv-y.nv-axis")
+                    .attr("transform", "translate(" + availableWidth + ",0)");
+            }	    
+
+            if (rightAlignYAxis) {
+                g.select(".nv-y.nv-axis")
+                    .attr("transform", "translate(" + availableWidth + ",0)");
+            }
+
+            // Main Chart Component(s)
+            discretebar
+                .width(availableWidth)
+                .height(availableHeight);
+
+            var barsWrap = g.select('.nv-barsWrap')
+                .datum(data.filter(function(d) { return !d.disabled }));
+
+            barsWrap.transition().call(discretebar);
+
+
+            defsEnter.append('clipPath')
+                .attr('id', 'nv-x-label-clip-' + discretebar.id())
+                .append('rect');
+
+            g.select('#nv-x-label-clip-' + discretebar.id() + ' rect')
+                .attr('width', x.rangeBand() * (staggerLabels ? 2 : 1))
+                .attr('height', 16)
+                .attr('x', -x.rangeBand() / (staggerLabels ? 1 : 2 ));
+
+            // Setup Axes
+            if (showXAxis) {
+                xAxis
+                    .scale(x)
+                    ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
+                    .tickSize(-availableHeight, 0);
+
+                g.select('.nv-x.nv-axis')
+                    .attr('transform', 'translate(0,' + (y.range()[0] + ((discretebar.showValues() && y.domain()[0] < 0) ? 16 : 0)) + ')');
+                g.select('.nv-x.nv-axis').call(xAxis);
+
+                var xTicks = g.select('.nv-x.nv-axis').selectAll('g');
+                if (staggerLabels) {
+                    xTicks
+                        .selectAll('text')
+                        .attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '5' : '17') + ')' })
+                }
+
+                if (rotateLabels) {
+                    xTicks
+                        .selectAll('.tick text')
+                        .attr('transform', 'rotate(' + rotateLabels + ' 0,0)')
+                        .style('text-anchor', rotateLabels > 0 ? 'start' : 'end');
+                }
+
+                if (wrapLabels) {
+                    g.selectAll('.tick text')
+                        .call(nv.utils.wrapTicks, chart.xAxis.rangeBand())
+                }
+            }
+
+            if (showYAxis) {
+                yAxis
+                    .scale(y)
+                    ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
+                    .tickSize( -availableWidth, 0);
+
+                g.select('.nv-y.nv-axis').call(yAxis);
+            }
+
+            // Zero line
+            g.select(".nv-zeroLine line")
+                .attr("x1",0)
+                .attr("x2",(rightAlignYAxis) ? -availableWidth : availableWidth)
+                .attr("y1", y(0))
+                .attr("y2", y(0))
+            ;
+        });
+
+        renderWatch.renderEnd('discreteBar chart immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Event Handling/Dispatching (out of chart's scope)
+    //------------------------------------------------------------
+
+    discretebar.dispatch.on('elementMouseover.tooltip', function(evt) {
+        evt['series'] = {
+            key: chart.x()(evt.data),
+            value: chart.y()(evt.data),
+            color: evt.color
+        };
+        tooltip.data(evt).hidden(false);
+    });
+
+    discretebar.dispatch.on('elementMouseout.tooltip', function(evt) {
+        tooltip.hidden(true);
+    });
+
+    discretebar.dispatch.on('elementMousemove.tooltip', function(evt) {
+        tooltip();
+    });
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.discretebar = discretebar;
+    chart.legend = legend;
+    chart.xAxis = xAxis;
+    chart.yAxis = yAxis;
+    chart.tooltip = tooltip;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+	showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
+        staggerLabels: {get: function(){return staggerLabels;}, set: function(_){staggerLabels=_;}},
+        rotateLabels:  {get: function(){return rotateLabels;}, set: function(_){rotateLabels=_;}},
+        wrapLabels:  {get: function(){return wrapLabels;}, set: function(_){wrapLabels=!!_;}},
+        showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
+        showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
+        noData:    {get: function(){return noData;}, set: function(_){noData=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+            discretebar.duration(duration);
+            xAxis.duration(duration);
+            yAxis.duration(duration);
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+            discretebar.color(color);
+	    legend.color(color);
+        }},
+        rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
+            rightAlignYAxis = _;
+            yAxis.orient( (_) ? 'right' : 'left');
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, discretebar);
+    nv.utils.initOptions(chart);
+
+    return chart;
+}
+
+nv.models.distribution = function() {
+    "use strict";
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , width = 400 //technically width or height depending on x or y....
+        , size = 8
+        , axis = 'x' // 'x' or 'y'... horizontal or vertical
+        , getData = function(d) { return d[axis] }  // defaults d.x or d.y
+        , color = nv.utils.defaultColor()
+        , scale = d3.scale.linear()
+        , domain
+        , duration = 250
+        , dispatch = d3.dispatch('renderEnd')
+        ;
+
+    //============================================================
+
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var scale0;
+    var renderWatch = nv.utils.renderWatch(dispatch, duration);
+
+    //============================================================
+
+
+    function chart(selection) {
+        renderWatch.reset();
+        selection.each(function(data) {
+            var availableLength = width - (axis === 'x' ? margin.left + margin.right : margin.top + margin.bottom),
+                naxis = axis == 'x' ? 'y' : 'x',
+                container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            //------------------------------------------------------------
+            // Setup Scales
+
+            scale0 = scale0 || scale;
+
+            //------------------------------------------------------------
+
+
+            //------------------------------------------------------------
+            // Setup containers and skeleton of chart
+
+            var wrap = container.selectAll('g.nv-distribution').data([data]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-distribution');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
+
+            //------------------------------------------------------------
+
+
+            var distWrap = g.selectAll('g.nv-dist')
+                .data(function(d) { return d }, function(d) { return d.key });
+
+            distWrap.enter().append('g');
+            distWrap
+                .attr('class', function(d,i) { return 'nv-dist nv-series-' + i })
+                .style('stroke', function(d,i) { return color(d, i) });
+
+            var dist = distWrap.selectAll('line.nv-dist' + axis)
+                .data(function(d) { return d.values })
+            dist.enter().append('line')
+                .attr(axis + '1', function(d,i) { return scale0(getData(d,i)) })
+                .attr(axis + '2', function(d,i) { return scale0(getData(d,i)) })
+            renderWatch.transition(distWrap.exit().selectAll('line.nv-dist' + axis), 'dist exit')
+                // .transition()
+                .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
+                .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })
+                .style('stroke-opacity', 0)
+                .remove();
+            dist
+                .attr('class', function(d,i) { return 'nv-dist' + axis + ' nv-dist' + axis + '-' + i })
+                .attr(naxis + '1', 0)
+                .attr(naxis + '2', size);
+            renderWatch.transition(dist, 'dist')
+                // .transition()
+                .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
+                .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })
+
+
+            scale0 = scale.copy();
+
+        });
+        renderWatch.renderEnd('distribution immediate');
+        return chart;
+    }
+
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+    chart.options = nv.utils.optionsFunc.bind(chart);
+    chart.dispatch = dispatch;
+
+    chart.margin = function(_) {
+        if (!arguments.length) return margin;
+        margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
+        margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
+        margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
+        margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
+        return chart;
+    };
+
+    chart.width = function(_) {
+        if (!arguments.length) return width;
+        width = _;
+        return chart;
+    };
+
+    chart.axis = function(_) {
+        if (!arguments.length) return axis;
+        axis = _;
+        return chart;
+    };
+
+    chart.size = function(_) {
+        if (!arguments.length) return size;
+        size = _;
+        return chart;
+    };
+
+    chart.getData = function(_) {
+        if (!arguments.length) return getData;
+        getData = d3.functor(_);
+        return chart;
+    };
+
+    chart.scale = function(_) {
+        if (!arguments.length) return scale;
+        scale = _;
+        return chart;
+    };
+
+    chart.color = function(_) {
+        if (!arguments.length) return color;
+        color = nv.utils.getColor(_);
+        return chart;
+    };
+
+    chart.duration = function(_) {
+        if (!arguments.length) return duration;
+        duration = _;
+        renderWatch.reset(duration);
+        return chart;
+    };
+    //============================================================
+
+
+    return chart;
+}
+nv.models.furiousLegend = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 5, right: 0, bottom: 5, left: 0}
+        , width = 400
+        , height = 20
+        , getKey = function(d) { return d.key }
+        , color = nv.utils.getColor()
+        , maxKeyLength = 20 //default value for key lengths
+        , align = true
+        , padding = 28 //define how much space between legend items. - recommend 32 for furious version
+        , rightAlign = true
+        , updateState = true   //If true, legend will update data.disabled and trigger a 'stateChange' dispatch.
+        , radioButtonMode = false   //If true, clicking legend items will cause it to behave like a radio button. (only one can be selected at a time)
+        , expanded = false
+        , dispatch = d3.dispatch('legendClick', 'legendDblclick', 'legendMouseover', 'legendMouseout', 'stateChange')
+        , vers = 'classic' //Options are "classic" and "furious"
+        ;
+
+    function chart(selection) {
+        selection.each(function(data) {
+            var availableWidth = width - margin.left - margin.right,
+                container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-legend').data([data]);
+            var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-legend').append('g');
+            var g = wrap.select('g');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            var series = g.selectAll('.nv-series')
+                .data(function(d) {
+                    if(vers != 'furious') return d;
+
+                    return d.filter(function(n) {
+                        return expanded ? true : !n.disengaged;
+                    });
+                });
+            var seriesEnter = series.enter().append('g').attr('class', 'nv-series')
+
+            var seriesShape;
+
+            if(vers == 'classic') {
+                seriesEnter.append('circle')
+                    .style('stroke-width', 2)
+                    .attr('class','nv-legend-symbol')
+                    .attr('r', 5);
+
+                seriesShape = series.select('circle');
+            } else if (vers == 'furious') {
+                seriesEnter.append('rect')
+                    .style('stroke-width', 2)
+                    .attr('class','nv-legend-symbol')
+                    .attr('rx', 3)
+                    .attr('ry', 3);
+
+                seriesShape = series.select('rect');
+
+                seriesEnter.append('g')
+                    .attr('class', 'nv-check-box')
+                    .property('innerHTML','<path d="M0.5,5 L22.5,5 L22.5,26.5 L0.5,26.5 L0.5,5 Z" class="nv-box"></path><path d="M5.5,12.8618467 L11.9185089,19.2803556 L31,0.198864511" class="nv-check"></path>')
+                    .attr('transform', 'translate(-10,-8)scale(0.5)');
+
+                var seriesCheckbox = series.select('.nv-check-box');
+
+                seriesCheckbox.each(function(d,i) {
+                    d3.select(this).selectAll('path')
+                        .attr('stroke', setTextColor(d,i));
+                });
+            }
+
+            seriesEnter.append('text')
+                .attr('text-anchor', 'start')
+                .attr('class','nv-legend-text')
+                .attr('dy', '.32em')
+                .attr('dx', '8');
+
+            var seriesText = series.select('text.nv-legend-text');
+
+            series
+                .on('mouseover', function(d,i) {
+                    dispatch.legendMouseover(d,i);  //TODO: Make consistent with other event objects
+                })
+                .on('mouseout', function(d,i) {
+                    dispatch.legendMouseout(d,i);
+                })
+                .on('click', function(d,i) {
+                    dispatch.legendClick(d,i);
+                    // make sure we re-get data in case it was modified
+                    var data = series.data();
+                    if (updateState) {
+                        if(vers =='classic') {
+                            if (radioButtonMode) {
+                                //Radio button mode: set every series to disabled,
+                                //  and enable the clicked series.
+                                data.forEach(function(series) { series.disabled = true});
+                                d.disabled = false;
+                            }
+                            else {
+                                d.disabled = !d.disabled;
+                                if (data.every(function(series) { return series.disabled})) {
+                                    //the default behavior of NVD3 legends is, if every single series
+                                    // is disabled, turn all series' back on.
+                                    data.forEach(function(series) { series.disabled = false});
+                                }
+                            }
+                        } else if(vers == 'furious') {
+                            if(expanded) {
+                                d.disengaged = !d.disengaged;
+                                d.userDisabled = d.userDisabled == undefined ? !!d.disabled : d.userDisabled;
+                                d.disabled = d.disengaged || d.userDisabled;
+                            } else if (!expanded) {
+                                d.disabled = !d.disabled;
+                                d.userDisabled = d.disabled;
+                                var engaged = data.filter(function(d) { return !d.disengaged; });
+                                if (engaged.every(function(series) { return series.userDisabled })) {
+                                    //the default behavior of NVD3 legends is, if every single series
+                                    // is disabled, turn all series' back on.
+                                    data.forEach(function(series) {
+                                        series.disabled = series.userDisabled = false;
+                                    });
+                                }
+                            }
+                        }
+                        dispatch.stateChange({
+                            disabled: data.map(function(d) { return !!d.disabled }),
+                            disengaged: data.map(function(d) { return !!d.disengaged })
+                        });
+
+                    }
+                })
+                .on('dblclick', function(d,i) {
+                    if(vers == 'furious' && expanded) return;
+                    dispatch.legendDblclick(d,i);
+                    if (updateState) {
+                        // make sure we re-get data in case it was modified
+                        var data = series.data();
+                        //the default behavior of NVD3 legends, when double clicking one,
+                        // is to set all other series' to false, and make the double clicked series enabled.
+                        data.forEach(function(series) {
+                            series.disabled = true;
+                            if(vers == 'furious') series.userDisabled = series.disabled;
+                        });
+                        d.disabled = false;
+                        if(vers == 'furious') d.userDisabled = d.disabled;
+                        dispatch.stateChange({
+                            disabled: data.map(function(d) { return !!d.disabled })
+                        });
+                    }
+                });
+
+            series.classed('nv-disabled', function(d) { return d.userDisabled });
+            series.exit().remove();
+
+            seriesText
+                .attr('fill', setTextColor)
+                .text(getKey);
+
+            //TODO: implement fixed-width and max-width options (max-width is especially useful with the align option)
+            // NEW ALIGNING CODE, TODO: clean up
+
+            var versPadding;
+            switch(vers) {
+                case 'furious' :
+                    versPadding = 23;
+                    break;
+                case 'classic' :
+                    versPadding = 20;
+            }
+
+            if (align) {
+
+                var seriesWidths = [];
+                series.each(function(d,i) {
+                    var legendText;
+                    if (getKey(d).length > maxKeyLength) { 
+                        var trimmedKey = getKey(d).substring(0, maxKeyLength);
+                        legendText = d3.select(this).select('text').text(trimmedKey + "...");
+                        d3.select(this).append("svg:title").text(getKey(d));
+                    } else {
+                        legendText = d3.select(this).select('text');
+                    } 
+                    var nodeTextLength;
+                    try {
+                        nodeTextLength = legendText.node().getComputedTextLength();
+                        // If the legendText is display:none'd (nodeTextLength == 0), simulate an error so we approximate, instead
+                        if(nodeTextLength <= 0) throw Error();
+                    }
+                    catch(e) {
+                        nodeTextLength = nv.utils.calcApproxTextWidth(legendText);
+                    }
+
+                    seriesWidths.push(nodeTextLength + padding);
+                });
+
+                var seriesPerRow = 0;
+                var legendWidth = 0;
+                var columnWidths = [];
+
+                while ( legendWidth < availableWidth && seriesPerRow < seriesWidths.length) {
+                    columnWidths[seriesPerRow] = seriesWidths[seriesPerRow];
+                    legendWidth += seriesWidths[seriesPerRow++];
+                }
+                if (seriesPerRow === 0) seriesPerRow = 1; //minimum of one series per row
+
+                while ( legendWidth > availableWidth && seriesPerRow > 1 ) {
+                    columnWidths = [];
+                    seriesPerRow--;
+
+                    for (var k = 0; k < seriesWidths.length; k++) {
+                        if (seriesWidths[k] > (columnWidths[k % seriesPerRow] || 0) )
+                            columnWidths[k % seriesPerRow] = seriesWidths[k];
+                    }
+
+                    legendWidth = columnWidths.reduce(function(prev, cur, index, array) {
+                        return prev + cur;
+                    });
+                }
+
+                var xPositions = [];
+                for (var i = 0, curX = 0; i < seriesPerRow; i++) {
+                    xPositions[i] = curX;
+                    curX += columnWidths[i];
+                }
+
+                series
+                    .attr('transform', function(d, i) {
+                        return 'translate(' + xPositions[i % seriesPerRow] + ',' + (5 + Math.floor(i / seriesPerRow) * versPadding) + ')';
+                    });
+
+                //position legend as far right as possible within the total width
+                if (rightAlign) {
+                    g.attr('transform', 'translate(' + (width - margin.right - legendWidth) + ',' + margin.top + ')');
+                }
+                else {
+                    g.attr('transform', 'translate(0' + ',' + margin.top + ')');
+                }
+
+                height = margin.top + margin.bottom + (Math.ceil(seriesWidths.length / seriesPerRow) * versPadding);
+
+            } else {
+
+                var ypos = 5,
+                    newxpos = 5,
+                    maxwidth = 0,
+                    xpos;
+                series
+                    .attr('transform', function(d, i) {
+                        var length = d3.select(this).select('text').node().getComputedTextLength() + padding;
+                        xpos = newxpos;
+
+                        if (width < margin.left + margin.right + xpos + length) {
+                            newxpos = xpos = 5;
+                            ypos += versPadding;
+                        }
+
+                        newxpos += length;
+                        if (newxpos > maxwidth) maxwidth = newxpos;
+
+                        return 'translate(' + xpos + ',' + ypos + ')';
+                    });
+
+                //position legend as far right as possible within the total width
+                g.attr('transform', 'translate(' + (width - margin.right - maxwidth) + ',' + margin.top + ')');
+
+                height = margin.top + margin.bottom + ypos + 15;
+            }
+
+            if(vers == 'furious') {
+                // Size rectangles after text is placed
+                seriesShape
+                    .attr('width', function(d,i) {
+                        return seriesText[0][i].getComputedTextLength() + 27;
+                    })
+                    .attr('height', 18)
+                    .attr('y', -9)
+                    .attr('x', -15)
+            }
+
+            seriesShape
+                .style('fill', setBGColor)
+                .style('stroke', function(d,i) { return d.color || color(d, i) });
+        });
+
+        function setTextColor(d,i) {
+            if(vers != 'furious') return '#000';
+            if(expanded) {
+                return d.disengaged ? color(d,i) : '#fff';
+            } else if (!expanded) {
+                return !!d.disabled ? color(d,i) : '#fff';
+            }
+        }
+
+        function setBGColor(d,i) {
+            if(expanded && vers == 'furious') {
+                return d.disengaged ? '#fff' : color(d,i);
+            } else {
+                return !!d.disabled ? '#fff' : color(d,i);
+            }
+        }
+
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        key:        {get: function(){return getKey;}, set: function(_){getKey=_;}},
+        align:      {get: function(){return align;}, set: function(_){align=_;}},
+        rightAlign:    {get: function(){return rightAlign;}, set: function(_){rightAlign=_;}},
+        maxKeyLength:  {get: function(){return maxKeyLength;}, set: function(_){maxKeyLength=_;}},
+        padding:       {get: function(){return padding;}, set: function(_){padding=_;}},
+        updateState:   {get: function(){return updateState;}, set: function(_){updateState=_;}},
+        radioButtonMode:    {get: function(){return radioButtonMode;}, set: function(_){radioButtonMode=_;}},
+        expanded:   {get: function(){return expanded;}, set: function(_){expanded=_;}},
+        vers:   {get: function(){return vers;}, set: function(_){vers=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+//TODO: consider deprecating and using multibar with single series for this
+nv.models.historicalBar = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , width = null
+        , height = null
+        , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
+        , container = null
+        , x = d3.scale.linear()
+        , y = d3.scale.linear()
+        , getX = function(d) { return d.x }
+        , getY = function(d) { return d.y }
+        , forceX = []
+        , forceY = [0]
+        , padData = false
+        , clipEdge = true
+        , color = nv.utils.defaultColor()
+        , xDomain
+        , yDomain
+        , xRange
+        , yRange
+        , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
+        , interactive = true
+        ;
+
+    var renderWatch = nv.utils.renderWatch(dispatch, 0);
+
+    function chart(selection) {
+        selection.each(function(data) {
+            renderWatch.reset();
+
+            container = d3.select(this);
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            nv.utils.initSVG(container);
+
+            // Setup Scales
+            x.domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ));
+
+            if (padData)
+                x.range(xRange || [availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5)  / data[0].values.length ]);
+            else
+                x.range(xRange || [0, availableWidth]);
+
+            y.domain(yDomain || d3.extent(data[0].values.map(getY).concat(forceY) ))
+                .range(yRange || [availableHeight, 0]);
+
+            // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
+            if (x.domain()[0] === x.domain()[1])
+                x.domain()[0] ?
+                    x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
+                    : x.domain([-1,1]);
+
+            if (y.domain()[0] === y.domain()[1])
+                y.domain()[0] ?
+                    y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
+                    : y.domain([-1,1]);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-historicalBar-' + id).data([data[0].values]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-historicalBar-' + id);
+            var defsEnter = wrapEnter.append('defs');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-bars');
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            container
+                .on('click', function(d,i) {
+                    dispatch.chartClick({
+                        data: d,
+                        index: i,
+                        pos: d3.event,
+                        id: id
+                    });
+                });
+
+            defsEnter.append('clipPath')
+                .attr('id', 'nv-chart-clip-path-' + id)
+                .append('rect');
+
+            wrap.select('#nv-chart-clip-path-' + id + ' rect')
+                .attr('width', availableWidth)
+                .attr('height', availableHeight);
+
+            g.attr('clip-path', clipEdge ? 'url(#nv-chart-clip-path-' + id + ')' : '');
+
+            var bars = wrap.select('.nv-bars').selectAll('.nv-bar')
+                .data(function(d) { return d }, function(d,i) {return getX(d,i)});
+            bars.exit().remove();
+
+            bars.enter().append('rect')
+                .attr('x', 0 )
+                .attr('y', function(d,i) {  return nv.utils.NaNtoZero(y(Math.max(0, getY(d,i)))) })
+                .attr('height', function(d,i) { return nv.utils.NaNtoZero(Math.abs(y(getY(d,i)) - y(0))) })
+                .attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; })
+                .on('mouseover', function(d,i) {
+                    if (!interactive) return;
+                    d3.select(this).classed('hover', true);
+                    dispatch.elementMouseover({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+
+                })
+                .on('mouseout', function(d,i) {
+                    if (!interactive) return;
+                    d3.select(this).classed('hover', false);
+                    dispatch.elementMouseout({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                })
+                .on('mousemove', function(d,i) {
+                    if (!interactive) return;
+                    dispatch.elementMousemove({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                })
+                .on('click', function(d,i) {
+                    if (!interactive) return;
+                    dispatch.elementClick({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                    d3.event.stopPropagation();
+                })
+                .on('dblclick', function(d,i) {
+                    if (!interactive) return;
+                    dispatch.elementDblClick({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                    d3.event.stopPropagation();
+                });
+
+            bars
+                .attr('fill', function(d,i) { return color(d, i); })
+                .attr('class', function(d,i,j) { return (getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive') + ' nv-bar-' + j + '-' + i })
+                .watchTransition(renderWatch, 'bars')
+                .attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; })
+                //TODO: better width calculations that don't assume always uniform data spacing;w
+                .attr('width', (availableWidth / data[0].values.length) * .9 );
+
+            bars.watchTransition(renderWatch, 'bars')
+                .attr('y', function(d,i) {
+                    var rval = getY(d,i) < 0 ?
+                        y(0) :
+                            y(0) - y(getY(d,i)) < 1 ?
+                        y(0) - 1 :
+                        y(getY(d,i));
+                    return nv.utils.NaNtoZero(rval);
+                })
+                .attr('height', function(d,i) { return nv.utils.NaNtoZero(Math.max(Math.abs(y(getY(d,i)) - y(0)),1)) });
+
+        });
+
+        renderWatch.renderEnd('historicalBar immediate');
+        return chart;
+    }
+
+    //Create methods to allow outside functions to highlight a specific bar.
+    chart.highlightPoint = function(pointIndex, isHoverOver) {
+        container
+            .select(".nv-bars .nv-bar-0-" + pointIndex)
+            .classed("hover", isHoverOver)
+        ;
+    };
+
+    chart.clearHighlights = function() {
+        container
+            .select(".nv-bars .nv-bar.hover")
+            .classed("hover", false)
+        ;
+    };
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:   {get: function(){return width;}, set: function(_){width=_;}},
+        height:  {get: function(){return height;}, set: function(_){height=_;}},
+        forceX:  {get: function(){return forceX;}, set: function(_){forceX=_;}},
+        forceY:  {get: function(){return forceY;}, set: function(_){forceY=_;}},
+        padData: {get: function(){return padData;}, set: function(_){padData=_;}},
+        x:       {get: function(){return getX;}, set: function(_){getX=_;}},
+        y:       {get: function(){return getY;}, set: function(_){getY=_;}},
+        xScale:  {get: function(){return x;}, set: function(_){x=_;}},
+        yScale:  {get: function(){return y;}, set: function(_){y=_;}},
+        xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
+        yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
+        xRange:  {get: function(){return xRange;}, set: function(_){xRange=_;}},
+        yRange:  {get: function(){return yRange;}, set: function(_){yRange=_;}},
+        clipEdge:    {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
+        id:          {get: function(){return id;}, set: function(_){id=_;}},
+        interactive: {get: function(){return interactive;}, set: function(_){interactive=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+
+nv.models.historicalBarChart = function(bar_model) {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var bars = bar_model || nv.models.historicalBar()
+        , xAxis = nv.models.axis()
+        , yAxis = nv.models.axis()
+        , legend = nv.models.legend()
+        , interactiveLayer = nv.interactiveGuideline()
+        , tooltip = nv.models.tooltip()
+        ;
+
+
+    var margin = {top: 30, right: 90, bottom: 50, left: 90}
+        , color = nv.utils.defaultColor()
+        , width = null
+        , height = null
+        , showLegend = false
+        , showXAxis = true
+        , showYAxis = true
+        , rightAlignYAxis = false
+        , useInteractiveGuideline = false
+        , x
+        , y
+        , state = {}
+        , defaultState = null
+        , noData = null
+        , dispatch = d3.dispatch('tooltipHide', 'stateChange', 'changeState', 'renderEnd')
+        , transitionDuration = 250
+        ;
+
+    xAxis.orient('bottom').tickPadding(7);
+    yAxis.orient( (rightAlignYAxis) ? 'right' : 'left');
+    tooltip
+        .duration(0)
+        .headerEnabled(false)
+        .valueFormatter(function(d, i) {
+            return yAxis.tickFormat()(d, i);
+        })
+        .headerFormatter(function(d, i) {
+            return xAxis.tickFormat()(d, i);
+        });
+
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var renderWatch = nv.utils.renderWatch(dispatch, 0);
+
+    function chart(selection) {
+        selection.each(function(data) {
+            renderWatch.reset();
+            renderWatch.models(bars);
+            if (showXAxis) renderWatch.models(xAxis);
+            if (showYAxis) renderWatch.models(yAxis);
+
+            var container = d3.select(this),
+                that = this;
+            nv.utils.initSVG(container);
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            chart.update = function() { container.transition().duration(transitionDuration).call(chart) };
+            chart.container = this;
+
+            //set state.disabled
+            state.disabled = data.map(function(d) { return !!d.disabled });
+
+            if (!defaultState) {
+                var key;
+                defaultState = {};
+                for (key in state) {
+                    if (state[key] instanceof Array)
+                        defaultState[key] = state[key].slice(0);
+                    else
+                        defaultState[key] = state[key];
+                }
+            }
+
+            // Display noData message if there's nothing to show.
+            if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
+                nv.utils.noData(chart, container)
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            // Setup Scales
+            x = bars.xScale();
+            y = bars.yScale();
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-historicalBarChart').data([data]);
+            var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-historicalBarChart').append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-x nv-axis');
+            gEnter.append('g').attr('class', 'nv-y nv-axis');
+            gEnter.append('g').attr('class', 'nv-barsWrap');
+            gEnter.append('g').attr('class', 'nv-legendWrap');
+            gEnter.append('g').attr('class', 'nv-interactive');
+
+            // Legend
+            if (showLegend) {
+                legend.width(availableWidth);
+
+                g.select('.nv-legendWrap')
+                    .datum(data)
+                    .call(legend);
+
+                if ( margin.top != legend.height()) {
+                    margin.top = legend.height();
+                    availableHeight = nv.utils.availableHeight(height, container, margin);
+                }
+
+                wrap.select('.nv-legendWrap')
+                    .attr('transform', 'translate(0,' + (-margin.top) +')')
+            }
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            if (rightAlignYAxis) {
+                g.select(".nv-y.nv-axis")
+                    .attr("transform", "translate(" + availableWidth + ",0)");
+            }
+
+            //Set up interactive layer
+            if (useInteractiveGuideline) {
+                interactiveLayer
+                    .width(availableWidth)
+                    .height(availableHeight)
+                    .margin({left:margin.left, top:margin.top})
+                    .svgContainer(container)
+                    .xScale(x);
+                wrap.select(".nv-interactive").call(interactiveLayer);
+            }
+            bars
+                .width(availableWidth)
+                .height(availableHeight)
+                .color(data.map(function(d,i) {
+                    return d.color || color(d, i);
+                }).filter(function(d,i) { return !data[i].disabled }));
+
+            var barsWrap = g.select('.nv-barsWrap')
+                .datum(data.filter(function(d) { return !d.disabled }));
+            barsWrap.transition().call(bars);
+
+            // Setup Axes
+            if (showXAxis) {
+                xAxis
+                    .scale(x)
+                    ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
+                    .tickSize(-availableHeight, 0);
+
+                g.select('.nv-x.nv-axis')
+                    .attr('transform', 'translate(0,' + y.range()[0] + ')');
+                g.select('.nv-x.nv-axis')
+                    .transition()
+                    .call(xAxis);
+            }
+
+            if (showYAxis) {
+                yAxis
+                    .scale(y)
+                    ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
+                    .tickSize( -availableWidth, 0);
+
+                g.select('.nv-y.nv-axis')
+                    .transition()
+                    .call(yAxis);
+            }
+
+            //============================================================
+            // Event Handling/Dispatching (in chart's scope)
+            //------------------------------------------------------------
+
+            interactiveLayer.dispatch.on('elementMousemove', function(e) {
+                bars.clearHighlights();
+
+                var singlePoint, pointIndex, pointXLocation, allData = [];
+                data
+                    .filter(function(series, i) {
+                        series.seriesIndex = i;
+                        return !series.disabled;
+                    })
+                    .forEach(function(series,i) {
+                        pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());
+                        bars.highlightPoint(pointIndex,true);
+                        var point = series.values[pointIndex];
+                        if (point === undefined) return;
+                        if (singlePoint === undefined) singlePoint = point;
+                        if (pointXLocation === undefined) pointXLocation = chart.xScale()(chart.x()(point,pointIndex));
+                        allData.push({
+                            key: series.key,
+                            value: chart.y()(point, pointIndex),
+                            color: color(series,series.seriesIndex),
+                            data: series.values[pointIndex]
+                        });
+                    });
+
+                var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));
+                interactiveLayer.tooltip
+                    .chartContainer(that.parentNode)
+                    .valueFormatter(function(d,i) {
+                        return yAxis.tickFormat()(d);
+                    })
+                    .data({
+                        value: xValue,
+                        index: pointIndex,
+                        series: allData
+                    })();
+
+                interactiveLayer.renderGuideLine(pointXLocation);
+
+            });
+
+            interactiveLayer.dispatch.on("elementMouseout",function(e) {
+                dispatch.tooltipHide();
+                bars.clearHighlights();
+            });
+
+            legend.dispatch.on('legendClick', function(d,i) {
+                d.disabled = !d.disabled;
+
+                if (!data.filter(function(d) { return !d.disabled }).length) {
+                    data.map(function(d) {
+                        d.disabled = false;
+                        wrap.selectAll('.nv-series').classed('disabled', false);
+                        return d;
+                    });
+                }
+
+                state.disabled = data.map(function(d) { return !!d.disabled });
+                dispatch.stateChange(state);
+
+                selection.transition().call(chart);
+            });
+
+            legend.dispatch.on('legendDblclick', function(d) {
+                //Double clicking should always enable current series, and disabled all others.
+                data.forEach(function(d) {
+                    d.disabled = true;
+                });
+                d.disabled = false;
+
+                state.disabled = data.map(function(d) { return !!d.disabled });
+                dispatch.stateChange(state);
+                chart.update();
+            });
+
+            dispatch.on('changeState', function(e) {
+                if (typeof e.disabled !== 'undefined') {
+                    data.forEach(function(series,i) {
+                        series.disabled = e.disabled[i];
+                    });
+
+                    state.disabled = e.disabled;
+                }
+
+                chart.update();
+            });
+        });
+
+        renderWatch.renderEnd('historicalBarChart immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Event Handling/Dispatching (out of chart's scope)
+    //------------------------------------------------------------
+
+    bars.dispatch.on('elementMouseover.tooltip', function(evt) {
+        evt['series'] = {
+            key: chart.x()(evt.data),
+            value: chart.y()(evt.data),
+            color: evt.color
+        };
+        tooltip.data(evt).hidden(false);
+    });
+
+    bars.dispatch.on('elementMouseout.tooltip', function(evt) {
+        tooltip.hidden(true);
+    });
+
+    bars.dispatch.on('elementMousemove.tooltip', function(evt) {
+        tooltip();
+    });
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    // expose chart's sub-components
+    chart.dispatch = dispatch;
+    chart.bars = bars;
+    chart.legend = legend;
+    chart.xAxis = xAxis;
+    chart.yAxis = yAxis;
+    chart.interactiveLayer = interactiveLayer;
+    chart.tooltip = tooltip;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
+        showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
+        showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
+        defaultState:    {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
+        noData:    {get: function(){return noData;}, set: function(_){noData=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+            legend.color(color);
+            bars.color(color);
+        }},
+        duration:    {get: function(){return transitionDuration;}, set: function(_){
+            transitionDuration=_;
+            renderWatch.reset(transitionDuration);
+            yAxis.duration(transitionDuration);
+            xAxis.duration(transitionDuration);
+        }},
+        rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
+            rightAlignYAxis = _;
+            yAxis.orient( (_) ? 'right' : 'left');
+        }},
+        useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){
+            useInteractiveGuideline = _;
+            if (_ === true) {
+                chart.interactive(false);
+            }
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, bars);
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+
+
+// ohlcChart is just a historical chart with ohlc bars and some tweaks
+nv.models.ohlcBarChart = function() {
+    var chart = nv.models.historicalBarChart(nv.models.ohlcBar());
+
+    // special default tooltip since we show multiple values per x
+    chart.useInteractiveGuideline(true);
+    chart.interactiveLayer.tooltip.contentGenerator(function(data) {
+        // we assume only one series exists for this chart
+        var d = data.series[0].data;
+        // match line colors as defined in nv.d3.css
+        var color = d.open < d.close ? "2ca02c" : "d62728";
+        return '' +
+            '<h3 style="color: #' + color + '">' + data.value + '</h3>' +
+            '<table>' +
+            '<tr><td>open:</td><td>' + chart.yAxis.tickFormat()(d.open) + '</td></tr>' +
+            '<tr><td>close:</td><td>' + chart.yAxis.tickFormat()(d.close) + '</td></tr>' +
+            '<tr><td>high</td><td>' + chart.yAxis.tickFormat()(d.high) + '</td></tr>' +
+            '<tr><td>low:</td><td>' + chart.yAxis.tickFormat()(d.low) + '</td></tr>' +
+            '</table>';
+    });
+    return chart;
+};
+
+// candlestickChart is just a historical chart with candlestick bars and some tweaks
+nv.models.candlestickBarChart = function() {
+    var chart = nv.models.historicalBarChart(nv.models.candlestickBar());
+
+    // special default tooltip since we show multiple values per x
+    chart.useInteractiveGuideline(true);
+    chart.interactiveLayer.tooltip.contentGenerator(function(data) {
+        // we assume only one series exists for this chart
+        var d = data.series[0].data;
+        // match line colors as defined in nv.d3.css
+        var color = d.open < d.close ? "2ca02c" : "d62728";
+        return '' +
+            '<h3 style="color: #' + color + '">' + data.value + '</h3>' +
+            '<table>' +
+            '<tr><td>open:</td><td>' + chart.yAxis.tickFormat()(d.open) + '</td></tr>' +
+            '<tr><td>close:</td><td>' + chart.yAxis.tickFormat()(d.close) + '</td></tr>' +
+            '<tr><td>high</td><td>' + chart.yAxis.tickFormat()(d.high) + '</td></tr>' +
+            '<tr><td>low:</td><td>' + chart.yAxis.tickFormat()(d.low) + '</td></tr>' +
+            '</table>';
+    });
+    return chart;
+};
+nv.models.legend = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 5, right: 0, bottom: 5, left: 0}
+        , width = 400
+        , height = 20
+        , getKey = function(d) { return d.key }
+        , color = nv.utils.getColor()
+        , maxKeyLength = 20 //default value for key lengths
+        , align = true
+        , padding = 32 //define how much space between legend items. - recommend 32 for furious version
+        , rightAlign = true
+        , updateState = true   //If true, legend will update data.disabled and trigger a 'stateChange' dispatch.
+        , radioButtonMode = false   //If true, clicking legend items will cause it to behave like a radio button. (only one can be selected at a time)
+        , expanded = false
+        , dispatch = d3.dispatch('legendClick', 'legendDblclick', 'legendMouseover', 'legendMouseout', 'stateChange')
+        , vers = 'classic' //Options are "classic" and "furious"
+        ;
+
+    function chart(selection) {
+        selection.each(function(data) {
+            var availableWidth = width - margin.left - margin.right,
+                container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-legend').data([data]);
+            var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-legend').append('g');
+            var g = wrap.select('g');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            var series = g.selectAll('.nv-series')
+                .data(function(d) {
+                    if(vers != 'furious') return d;
+
+                    return d.filter(function(n) {
+                        return expanded ? true : !n.disengaged;
+                    });
+                });
+
+            var seriesEnter = series.enter().append('g').attr('class', 'nv-series');
+            var seriesShape;
+
+            var versPadding;
+            switch(vers) {
+                case 'furious' :
+                    versPadding = 23;
+                    break;
+                case 'classic' :
+                    versPadding = 20;
+            }
+
+            if(vers == 'classic') {
+                seriesEnter.append('circle')
+                    .style('stroke-width', 2)
+                    .attr('class','nv-legend-symbol')
+                    .attr('r', 5);
+
+                seriesShape = series.select('circle');
+            } else if (vers == 'furious') {
+                seriesEnter.append('rect')
+                    .style('stroke-width', 2)
+                    .attr('class','nv-legend-symbol')
+                    .attr('rx', 3)
+                    .attr('ry', 3);
+                seriesShape = series.select('.nv-legend-symbol');
+
+                seriesEnter.append('g')
+                    .attr('class', 'nv-check-box')
+                    .property('innerHTML','<path d="M0.5,5 L22.5,5 L22.5,26.5 L0.5,26.5 L0.5,5 Z" class="nv-box"></path><path d="M5.5,12.8618467 L11.9185089,19.2803556 L31,0.198864511" class="nv-check"></path>')
+                    .attr('transform', 'translate(-10,-8)scale(0.5)');
+
+                var seriesCheckbox = series.select('.nv-check-box');
+
+                seriesCheckbox.each(function(d,i) {
+                    d3.select(this).selectAll('path')
+                        .attr('stroke', setTextColor(d,i));
+                });
+            }
+
+            seriesEnter.append('text')
+                .attr('text-anchor', 'start')
+                .attr('class','nv-legend-text')
+                .attr('dy', '.32em')
+                .attr('dx', '8');
+
+            var seriesText = series.select('text.nv-legend-text');
+
+            series
+                .on('mouseover', function(d,i) {
+                    dispatch.legendMouseover(d,i);  //TODO: Make consistent with other event objects
+                })
+                .on('mouseout', function(d,i) {
+                    dispatch.legendMouseout(d,i);
+                })
+                .on('click', function(d,i) {
+                    dispatch.legendClick(d,i);
+                    // make sure we re-get data in case it was modified
+                    var data = series.data();
+                    if (updateState) {
+                        if(vers =='classic') {
+                            if (radioButtonMode) {
+                                //Radio button mode: set every series to disabled,
+                                //  and enable the clicked series.
+                                data.forEach(function(series) { series.disabled = true});
+                                d.disabled = false;
+                            }
+                            else {
+                                d.disabled = !d.disabled;
+                                if (data.every(function(series) { return series.disabled})) {
+                                    //the default behavior of NVD3 legends is, if every single series
+                                    // is disabled, turn all series' back on.
+                                    data.forEach(function(series) { series.disabled = false});
+                                }
+                            }
+                        } else if(vers == 'furious') {
+                            if(expanded) {
+                                d.disengaged = !d.disengaged;
+                                d.userDisabled = d.userDisabled == undefined ? !!d.disabled : d.userDisabled;
+                                d.disabled = d.disengaged || d.userDisabled;
+                            } else if (!expanded) {
+                                d.disabled = !d.disabled;
+                                d.userDisabled = d.disabled;
+                                var engaged = data.filter(function(d) { return !d.disengaged; });
+                                if (engaged.every(function(series) { return series.userDisabled })) {
+                                    //the default behavior of NVD3 legends is, if every single series
+                                    // is disabled, turn all series' back on.
+                                    data.forEach(function(series) {
+                                        series.disabled = series.userDisabled = false;
+                                    });
+                                }
+                            }
+                        }
+                        dispatch.stateChange({
+                            disabled: data.map(function(d) { return !!d.disabled }),
+                            disengaged: data.map(function(d) { return !!d.disengaged })
+                        });
+
+                    }
+                })
+                .on('dblclick', function(d,i) {
+                    if(vers == 'furious' && expanded) return;
+                    dispatch.legendDblclick(d,i);
+                    if (updateState) {
+                        // make sure we re-get data in case it was modified
+                        var data = series.data();
+                        //the default behavior of NVD3 legends, when double clicking one,
+                        // is to set all other series' to false, and make the double clicked series enabled.
+                        data.forEach(function(series) {
+                            series.disabled = true;
+                            if(vers == 'furious') series.userDisabled = series.disabled;
+                        });
+                        d.disabled = false;
+                        if(vers == 'furious') d.userDisabled = d.disabled;
+                        dispatch.stateChange({
+                            disabled: data.map(function(d) { return !!d.disabled })
+                        });
+                    }
+                });
+
+            series.classed('nv-disabled', function(d) { return d.userDisabled });
+            series.exit().remove();
+
+            seriesText
+                .attr('fill', setTextColor)
+                .text(getKey);
+
+            //TODO: implement fixed-width and max-width options (max-width is especially useful with the align option)
+            // NEW ALIGNING CODE, TODO: clean up
+            var legendWidth = 0;
+            if (align) {
+
+                var seriesWidths = [];
+                series.each(function(d,i) {
+                    var legendText;
+                    if (getKey(d).length > maxKeyLength) { 
+                        var trimmedKey = getKey(d).substring(0, maxKeyLength);
+                        legendText = d3.select(this).select('text').text(trimmedKey + "...");
+                        d3.select(this).append("svg:title").text(getKey(d));
+                    } else {
+                        legendText = d3.select(this).select('text');
+                    } 
+                    var nodeTextLength;
+                    try {
+                        nodeTextLength = legendText.node().getComputedTextLength();
+                        // If the legendText is display:none'd (nodeTextLength == 0), simulate an error so we approximate, instead
+                        if(nodeTextLength <= 0) throw Error();
+                    }
+                    catch(e) {
+                        nodeTextLength = nv.utils.calcApproxTextWidth(legendText);
+                    }
+
+                    seriesWidths.push(nodeTextLength + padding);
+                });
+
+                var seriesPerRow = 0;
+                var columnWidths = [];
+                legendWidth = 0;
+
+                while ( legendWidth < availableWidth && seriesPerRow < seriesWidths.length) {
+                    columnWidths[seriesPerRow] = seriesWidths[seriesPerRow];
+                    legendWidth += seriesWidths[seriesPerRow++];
+                }
+                if (seriesPerRow === 0) seriesPerRow = 1; //minimum of one series per row
+
+                while ( legendWidth > availableWidth && seriesPerRow > 1 ) {
+                    columnWidths = [];
+                    seriesPerRow--;
+
+                    for (var k = 0; k < seriesWidths.length; k++) {
+                        if (seriesWidths[k] > (columnWidths[k % seriesPerRow] || 0) )
+                            columnWidths[k % seriesPerRow] = seriesWidths[k];
+                    }
+
+                    legendWidth = columnWidths.reduce(function(prev, cur, index, array) {
+                        return prev + cur;
+                    });
+                }
+
+                var xPositions = [];
+                for (var i = 0, curX = 0; i < seriesPerRow; i++) {
+                    xPositions[i] = curX;
+                    curX += columnWidths[i];
+                }
+
+                series
+                    .attr('transform', function(d, i) {
+                        return 'translate(' + xPositions[i % seriesPerRow] + ',' + (5 + Math.floor(i / seriesPerRow) * versPadding) + ')';
+                    });
+
+                //position legend as far right as possible within the total width
+                if (rightAlign) {
+                    g.attr('transform', 'translate(' + (width - margin.right - legendWidth) + ',' + margin.top + ')');
+                }
+                else {
+                    g.attr('transform', 'translate(0' + ',' + margin.top + ')');
+                }
+
+                height = margin.top + margin.bottom + (Math.ceil(seriesWidths.length / seriesPerRow) * versPadding);
+
+            } else {
+
+                var ypos = 5,
+                    newxpos = 5,
+                    maxwidth = 0,
+                    xpos;
+                series
+                    .attr('transform', function(d, i) {
+                        var length = d3.select(this).select('text').node().getComputedTextLength() + padding;
+                        xpos = newxpos;
+
+                        if (width < margin.left + margin.right + xpos + length) {
+                            newxpos = xpos = 5;
+                            ypos += versPadding;
+                        }
+
+                        newxpos += length;
+                        if (newxpos > maxwidth) maxwidth = newxpos;
+
+                        if(legendWidth < xpos + maxwidth) {
+                            legendWidth = xpos + maxwidth;
+                        }
+                        return 'translate(' + xpos + ',' + ypos + ')';
+                    });
+
+                //position legend as far right as possible within the total width
+                g.attr('transform', 'translate(' + (width - margin.right - maxwidth) + ',' + margin.top + ')');
+
+                height = margin.top + margin.bottom + ypos + 15;
+            }
+
+            if(vers == 'furious') {
+                // Size rectangles after text is placed
+                seriesShape
+                    .attr('width', function(d,i) {
+                        return seriesText[0][i].getComputedTextLength() + 27;
+                    })
+                    .attr('height', 18)
+                    .attr('y', -9)
+                    .attr('x', -15);
+
+                // The background for the expanded legend (UI)
+                gEnter.insert('rect',':first-child')
+                    .attr('class', 'nv-legend-bg')
+                    .attr('fill', '#eee')
+                    // .attr('stroke', '#444')
+                    .attr('opacity',0);
+
+                var seriesBG = g.select('.nv-legend-bg');
+
+                seriesBG
+                .transition().duration(300)
+                    .attr('x', -versPadding )
+                    .attr('width', legendWidth + versPadding - 12)
+                    .attr('height', height + 10)
+                    .attr('y', -margin.top - 10)
+                    .attr('opacity', expanded ? 1 : 0);
+
+
+            }
+
+            seriesShape
+                .style('fill', setBGColor)
+                .style('fill-opacity', setBGOpacity)
+                .style('stroke', setBGColor);
+        });
+
+        function setTextColor(d,i) {
+            if(vers != 'furious') return '#000';
+            if(expanded) {
+                return d.disengaged ? '#000' : '#fff';
+            } else if (!expanded) {
+                if(!d.color) d.color = color(d,i);
+                return !!d.disabled ? d.color : '#fff';
+            }
+        }
+
+        function setBGColor(d,i) {
+            if(expanded && vers == 'furious') {
+                return d.disengaged ? '#eee' : d.color || color(d,i);
+            } else {
+                return d.color || color(d,i);
+            }
+        }
+
+
+        function setBGOpacity(d,i) {
+            if(expanded && vers == 'furious') {
+                return 1;
+            } else {
+                return !!d.disabled ? 0 : 1;
+            }
+        }
+
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        key:        {get: function(){return getKey;}, set: function(_){getKey=_;}},
+        align:      {get: function(){return align;}, set: function(_){align=_;}},
+        maxKeyLength:   {get: function(){return maxKeyLength;}, set: function(_){maxKeyLength=_;}},
+        rightAlign:    {get: function(){return rightAlign;}, set: function(_){rightAlign=_;}},
+        padding:       {get: function(){return padding;}, set: function(_){padding=_;}},
+        updateState:   {get: function(){return updateState;}, set: function(_){updateState=_;}},
+        radioButtonMode:    {get: function(){return radioButtonMode;}, set: function(_){radioButtonMode=_;}},
+        expanded:   {get: function(){return expanded;}, set: function(_){expanded=_;}},
+        vers:   {get: function(){return vers;}, set: function(_){vers=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+
+nv.models.line = function() {
+    "use strict";
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var  scatter = nv.models.scatter()
+        ;
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , width = 960
+        , height = 500
+        , container = null
+        , strokeWidth = 1.5
+        , color = nv.utils.defaultColor() // a function that returns a color
+        , getX = function(d) { return d.x } // accessor to get the x value from a data point
+        , getY = function(d) { return d.y } // accessor to get the y value from a data point
+        , defined = function(d,i) { return !isNaN(getY(d,i)) && getY(d,i) !== null } // allows a line to be not continuous when it is not defined
+        , isArea = function(d) { return d.area } // decides if a line is an area or just a line
+        , clipEdge = false // if true, masks lines within x and y scale
+        , x //can be accessed via chart.xScale()
+        , y //can be accessed via chart.yScale()
+        , interpolate = "linear" // controls the line interpolation
+        , duration = 250
+        , dispatch = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout', 'renderEnd')
+        ;
+
+    scatter
+        .pointSize(16) // default size
+        .pointDomain([16,256]) //set to speed up calculation, needs to be unset if there is a custom size accessor
+    ;
+
+    //============================================================
+
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var x0, y0 //used to store previous scales
+        , renderWatch = nv.utils.renderWatch(dispatch, duration)
+        ;
+
+    //============================================================
+
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(scatter);
+        selection.each(function(data) {
+            container = d3.select(this);
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+            nv.utils.initSVG(container);
+
+            // Setup Scales
+            x = scatter.xScale();
+            y = scatter.yScale();
+
+            x0 = x0 || x;
+            y0 = y0 || y;
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-line').data([data]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-line');
+            var defsEnter = wrapEnter.append('defs');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-groups');
+            gEnter.append('g').attr('class', 'nv-scatterWrap');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            scatter
+                .width(availableWidth)
+                .height(availableHeight);
+
+            var scatterWrap = wrap.select('.nv-scatterWrap');
+            scatterWrap.call(scatter);
+
+            defsEnter.append('clipPath')
+                .attr('id', 'nv-edge-clip-' + scatter.id())
+                .append('rect');
+
+            wrap.select('#nv-edge-clip-' + scatter.id() + ' rect')
+                .attr('width', availableWidth)
+                .attr('height', (availableHeight > 0) ? availableHeight : 0);
+
+            g   .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + scatter.id() + ')' : '');
+            scatterWrap
+                .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + scatter.id() + ')' : '');
+
+            var groups = wrap.select('.nv-groups').selectAll('.nv-group')
+                .data(function(d) { return d }, function(d) { return d.key });
+            groups.enter().append('g')
+                .style('stroke-opacity', 1e-6)
+                .style('stroke-width', function(d) { return d.strokeWidth || strokeWidth })
+                .style('fill-opacity', 1e-6);
+
+            groups.exit().remove();
+
+            groups
+                .attr('class', function(d,i) {
+                    return (d.classed || '') + ' nv-group nv-series-' + i;
+                })
+                .classed('hover', function(d) { return d.hover })
+                .style('fill', function(d,i){ return color(d, i) })
+                .style('stroke', function(d,i){ return color(d, i)});
+            groups.watchTransition(renderWatch, 'line: groups')
+                .style('stroke-opacity', 1)
+                .style('fill-opacity', function(d) { return d.fillOpacity || .5});
+
+            var areaPaths = groups.selectAll('path.nv-area')
+                .data(function(d) { return isArea(d) ? [d] : [] }); // this is done differently than lines because I need to check if series is an area
+            areaPaths.enter().append('path')
+                .attr('class', 'nv-area')
+                .attr('d', function(d) {
+                    return d3.svg.area()
+                        .interpolate(interpolate)
+                        .defined(defined)
+                        .x(function(d,i) { return nv.utils.NaNtoZero(x0(getX(d,i))) })
+                        .y0(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })
+                        .y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
+                        //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
+                        .apply(this, [d.values])
+                });
+            groups.exit().selectAll('path.nv-area')
+                .remove();
+
+            areaPaths.watchTransition(renderWatch, 'line: areaPaths')
+                .attr('d', function(d) {
+                    return d3.svg.area()
+                        .interpolate(interpolate)
+                        .defined(defined)
+                        .x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
+                        .y0(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
+                        .y1(function(d,i) { return y( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
+                        //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
+                        .apply(this, [d.values])
+                });
+
+            var linePaths = groups.selectAll('path.nv-line')
+                .data(function(d) { return [d.values] });
+
+            linePaths.enter().append('path')
+                .attr('class', 'nv-line')
+                .attr('d',
+                    d3.svg.line()
+                    .interpolate(interpolate)
+                    .defined(defined)
+                    .x(function(d,i) { return nv.utils.NaNtoZero(x0(getX(d,i))) })
+                    .y(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })
+            );
+
+            linePaths.watchTransition(renderWatch, 'line: linePaths')
+                .attr('d',
+                    d3.svg.line()
+                    .interpolate(interpolate)
+                    .defined(defined)
+                    .x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
+                    .y(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
+            );
+
+            //store old scales for use in transitions on update
+            x0 = x.copy();
+            y0 = y.copy();
+        });
+        renderWatch.renderEnd('line immediate');
+        return chart;
+    }
+
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.scatter = scatter;
+    // Pass through events
+    scatter.dispatch.on('elementClick', function(){ dispatch.elementClick.apply(this, arguments); });
+    scatter.dispatch.on('elementMouseover', function(){ dispatch.elementMouseover.apply(this, arguments); });
+    scatter.dispatch.on('elementMouseout', function(){ dispatch.elementMouseout.apply(this, arguments); });
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        defined: {get: function(){return defined;}, set: function(_){defined=_;}},
+        interpolate:      {get: function(){return interpolate;}, set: function(_){interpolate=_;}},
+        clipEdge:    {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+            scatter.duration(duration);
+        }},
+        isArea: {get: function(){return isArea;}, set: function(_){
+            isArea = d3.functor(_);
+        }},
+        x: {get: function(){return getX;}, set: function(_){
+            getX = _;
+            scatter.x(_);
+        }},
+        y: {get: function(){return getY;}, set: function(_){
+            getY = _;
+            scatter.y(_);
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+            scatter.color(color);
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, scatter);
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+nv.models.lineChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var lines = nv.models.line()
+        , xAxis = nv.models.axis()
+        , yAxis = nv.models.axis()
+        , legend = nv.models.legend()
+        , interactiveLayer = nv.interactiveGuideline()
+        , tooltip = nv.models.tooltip()
+        , lines2 = nv.models.line()
+        , x2Axis = nv.models.axis()
+        , y2Axis = nv.models.axis()
+        , brush = d3.svg.brush()
+        ;
+
+    var margin = {top: 30, right: 20, bottom: 50, left: 60}
+        , margin2 = {top: 0, right: 20, bottom: 20, left: 60}
+        , color = nv.utils.defaultColor()
+        , width = null
+        , height = null
+        , showLegend = true
+        , showXAxis = true
+        , showYAxis = true
+        , rightAlignYAxis = false
+        , useInteractiveGuideline = false
+        , x
+        , y
+        , x2
+        , y2
+        , focusEnable = false
+        , focusShowAxisY = false
+        , focusShowAxisX = true
+        , focusHeight = 50
+        , brushExtent = null
+        , state = nv.utils.state()
+        , defaultState = null
+        , noData = null
+        , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'brush', 'stateChange', 'changeState', 'renderEnd')
+        , duration = 250
+        ;
+
+    // set options on sub-objects for this chart
+    xAxis.orient('bottom').tickPadding(7);
+    yAxis.orient(rightAlignYAxis ? 'right' : 'left');
+
+    lines.clipEdge(true).duration(0);
+    lines2.interactive(false);
+    // We don't want any points emitted for the focus chart's scatter graph.
+    lines2.pointActive(function(d) { return false; });
+
+    x2Axis.orient('bottom').tickPadding(5);
+    y2Axis.orient(rightAlignYAxis ? 'right' : 'left');
+
+    tooltip.valueFormatter(function(d, i) {
+        return yAxis.tickFormat()(d, i);
+    }).headerFormatter(function(d, i) {
+        return xAxis.tickFormat()(d, i);
+    });
+    
+    interactiveLayer.tooltip.valueFormatter(function(d, i) {
+        return yAxis.tickFormat()(d, i);
+    }).headerFormatter(function(d, i) {
+        return xAxis.tickFormat()(d, i);
+    });
+
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var renderWatch = nv.utils.renderWatch(dispatch, duration);
+
+    var stateGetter = function(data) {
+        return function(){
+            return {
+                active: data.map(function(d) { return !d.disabled; })
+            };
+        };
+    };
+
+    var stateSetter = function(data) {
+        return function(state) {
+            if (state.active !== undefined)
+                data.forEach(function(series,i) {
+                    series.disabled = !state.active[i];
+                });
+        };
+    };
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(lines);
+        renderWatch.models(lines2);
+        if (showXAxis) renderWatch.models(xAxis);
+        if (showYAxis) renderWatch.models(yAxis);
+
+        if (focusShowAxisX) renderWatch.models(x2Axis);
+        if (focusShowAxisY) renderWatch.models(y2Axis);
+        selection.each(function(data) {
+            var container = d3.select(this);
+            nv.utils.initSVG(container);
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight1 = nv.utils.availableHeight(height, container, margin) - (focusEnable ? focusHeight : 0),
+                availableHeight2 = focusHeight - margin2.top - margin2.bottom;
+
+            chart.update = function() { 
+                if( duration === 0 ) {
+                    container.call( chart );
+                } else {
+                    container.transition().duration(duration).call(chart);
+                }
+            };
+            chart.container = this;
+
+            state
+                .setter(stateSetter(data), chart.update)
+                .getter(stateGetter(data))
+                .update();
+
+            // DEPRECATED set state.disabled
+            state.disabled = data.map(function(d) { return !!d.disabled; });
+
+            if (!defaultState) {
+                var key;
+                defaultState = {};
+                for (key in state) {
+                    if (state[key] instanceof Array)
+                        defaultState[key] = state[key].slice(0);
+                    else
+                        defaultState[key] = state[key];
+                }
+            }
+
+            // Display noData message if there's nothing to show.
+            if (!data || !data.length || !data.filter(function(d) { return d.values.length; }).length) {
+                nv.utils.noData(chart, container);
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+
+            // Setup Scales
+            x = lines.xScale();
+            y = lines.yScale();
+            x2 = lines2.xScale();
+            y2 = lines2.yScale();
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-lineChart').data([data]);
+            var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-lineChart').append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-legendWrap');
+
+            var focusEnter = gEnter.append('g').attr('class', 'nv-focus');
+            focusEnter.append('g').attr('class', 'nv-background').append('rect');
+            focusEnter.append('g').attr('class', 'nv-x nv-axis');
+            focusEnter.append('g').attr('class', 'nv-y nv-axis');
+            focusEnter.append('g').attr('class', 'nv-linesWrap');
+            focusEnter.append('g').attr('class', 'nv-interactive');
+
+            var contextEnter = gEnter.append('g').attr('class', 'nv-context');
+            contextEnter.append('g').attr('class', 'nv-background').append('rect');
+            contextEnter.append('g').attr('class', 'nv-x nv-axis');
+            contextEnter.append('g').attr('class', 'nv-y nv-axis');
+            contextEnter.append('g').attr('class', 'nv-linesWrap');
+            contextEnter.append('g').attr('class', 'nv-brushBackground');
+            contextEnter.append('g').attr('class', 'nv-x nv-brush');
+
+            // Legend
+            if (showLegend) {
+                legend.width(availableWidth);
+
+                g.select('.nv-legendWrap')
+                    .datum(data)
+                    .call(legend);
+
+                if ( margin.top != legend.height()) {
+                    margin.top = legend.height();
+                    availableHeight1 = nv.utils.availableHeight(height, container, margin) - (focusEnable ? focusHeight : 0);
+                }
+
+                wrap.select('.nv-legendWrap')
+                    .attr('transform', 'translate(0,' + (-margin.top) +')');
+            }
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            if (rightAlignYAxis) {
+                g.select(".nv-y.nv-axis")
+                    .attr("transform", "translate(" + availableWidth + ",0)");
+            }
+
+            //Set up interactive layer
+            if (useInteractiveGuideline) {
+                interactiveLayer
+                    .width(availableWidth)
+                    .height(availableHeight1)
+                    .margin({left:margin.left, top:margin.top})
+                    .svgContainer(container)
+                    .xScale(x);
+                wrap.select(".nv-interactive").call(interactiveLayer);
+            }
+
+            g.select('.nv-focus .nv-background rect')
+                .attr('width', availableWidth)
+                .attr('height', availableHeight1);
+                
+            lines
+                .width(availableWidth)
+                .height(availableHeight1)
+                .color(data.map(function(d,i) {
+                    return d.color || color(d, i);
+
+                }).filter(function(d,i) { return !data[i].disabled; }));
+
+            var linesWrap = g.select('.nv-linesWrap')
+                .datum(data.filter(function(d) { return !d.disabled; }));
+
+
+            // Setup Main (Focus) Axes
+            if (showXAxis) {
+                xAxis
+                    .scale(x)
+                    ._ticks(nv.utils.calcTicksX(availableWidth/100, data) )
+                    .tickSize(-availableHeight1, 0);
+
+            }
+
+            if (showYAxis) {
+                yAxis
+                    .scale(y)
+                    ._ticks( nv.utils.calcTicksY(availableHeight1/36, data) )
+                    .tickSize( -availableWidth, 0);
+            }
+
+            //============================================================
+            // Update Axes
+            //============================================================
+            function updateXAxis() {
+              if(showXAxis) {
+                g.select('.nv-focus .nv-x.nv-axis')
+                  .transition()
+                  .duration(duration)
+                  .call(xAxis)
+                ;
+              }
+            }
+
+            function updateYAxis() {
+              if(showYAxis) {
+                g.select('.nv-focus .nv-y.nv-axis')
+                  .transition()
+                  .duration(duration)
+                  .call(yAxis)
+                ;
+              }
+            }
+            
+            g.select('.nv-focus .nv-x.nv-axis')
+                .attr('transform', 'translate(0,' + availableHeight1 + ')');
+
+            if( !focusEnable )
+            {
+                linesWrap.call(lines);
+                updateXAxis();
+                updateYAxis();
+            }
+            else
+            {
+                lines2
+                    .defined(lines.defined())
+                    .width(availableWidth)
+                    .height(availableHeight2)
+                    .color(data.map(function(d,i) {
+                        return d.color || color(d, i);
+                    }).filter(function(d,i) { return !data[i].disabled; }));
+    
+                g.select('.nv-context')
+                    .attr('transform', 'translate(0,' + ( availableHeight1 + margin.bottom + margin2.top) + ')')
+                    .style('display', focusEnable ? 'initial' : 'none')
+                ;
+    
+                var contextLinesWrap = g.select('.nv-context .nv-linesWrap')
+                    .datum(data.filter(function(d) { return !d.disabled; }))
+                    ;
+                    
+                d3.transition(contextLinesWrap).call(lines2);
+                
+            
+                // Setup Brush
+                brush
+                    .x(x2)
+                    .on('brush', function() {
+                        onBrush();
+                    });
+    
+                if (brushExtent) brush.extent(brushExtent);
+    
+                var brushBG = g.select('.nv-brushBackground').selectAll('g')
+                    .data([brushExtent || brush.extent()]);
+        
+                var brushBGenter = brushBG.enter()
+                    .append('g');
+    
+                brushBGenter.append('rect')
+                    .attr('class', 'left')
+                    .attr('x', 0)
+                    .attr('y', 0)
+                    .attr('height', availableHeight2);
+    
+                brushBGenter.append('rect')
+                    .attr('class', 'right')
+                    .attr('x', 0)
+                    .attr('y', 0)
+                    .attr('height', availableHeight2);
+    
+                var gBrush = g.select('.nv-x.nv-brush')
+                    .call(brush);
+                gBrush.selectAll('rect')
+                    .attr('height', availableHeight2);
+                gBrush.selectAll('.resize').append('path').attr('d', resizePath);
+    
+                onBrush();
+    
+                g.select('.nv-context .nv-background rect')
+                    .attr('width', availableWidth)
+                    .attr('height', availableHeight2);
+    
+                // Setup Secondary (Context) Axes
+                if (focusShowAxisX) {
+                  x2Axis
+                      .scale(x2)
+                      ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
+                      .tickSize(-availableHeight2, 0);
+      
+                  g.select('.nv-context .nv-x.nv-axis')
+                      .attr('transform', 'translate(0,' + y2.range()[0] + ')');
+                  d3.transition(g.select('.nv-context .nv-x.nv-axis'))
+                      .call(x2Axis);
+                }
+    
+                if (focusShowAxisY) {
+                  y2Axis
+                      .scale(y2)
+                      ._ticks( nv.utils.calcTicksY(availableHeight2/36, data) )
+                      .tickSize( -availableWidth, 0);
+      
+                  d3.transition(g.select('.nv-context .nv-y.nv-axis'))
+                      .call(y2Axis);
+                }
+                
+                g.select('.nv-context .nv-x.nv-axis')
+                    .attr('transform', 'translate(0,' + y2.range()[0] + ')');
+            }
+
+            //============================================================
+            // Event Handling/Dispatching (in chart's scope)
+            //------------------------------------------------------------
+
+            legend.dispatch.on('stateChange', function(newState) {
+                for (var key in newState)
+                    state[key] = newState[key];
+                dispatch.stateChange(state);
+                chart.update();
+            });
+
+            interactiveLayer.dispatch.on('elementMousemove', function(e) {
+                lines.clearHighlights();
+                var singlePoint, pointIndex, pointXLocation, allData = [];
+                data
+                    .filter(function(series, i) {
+                        series.seriesIndex = i;
+                        return !series.disabled && !series.disableTooltip;
+                    })
+                    .forEach(function(series,i) {
+                        var extent = focusEnable ? (brush.empty() ? x2.domain() : brush.extent()) : x.domain();
+                        var currentValues = series.values.filter(function(d,i) {
+                            return lines.x()(d,i) >= extent[0] && lines.x()(d,i) <= extent[1];
+                        });
+
+                        pointIndex = nv.interactiveBisect(currentValues, e.pointXValue, lines.x());
+                        var point = currentValues[pointIndex];
+                        var pointYValue = chart.y()(point, pointIndex);
+                        if (pointYValue !== null) {
+                            lines.highlightPoint(series.seriesIndex, pointIndex, true);
+                        }
+                        if (point === undefined) return;
+                        if (singlePoint === undefined) singlePoint = point;
+                        if (pointXLocation === undefined) pointXLocation = chart.xScale()(chart.x()(point,pointIndex));
+                        allData.push({
+                            key: series.key,
+                            value: pointYValue,
+                            color: color(series,series.seriesIndex),
+                            data: point
+                        });
+                    });
+                //Highlight the tooltip entry based on which point the mouse is closest to.
+                if (allData.length > 2) {
+                    var yValue = chart.yScale().invert(e.mouseY);
+                    var domainExtent = Math.abs(chart.yScale().domain()[0] - chart.yScale().domain()[1]);
+                    var threshold = 0.03 * domainExtent;
+                    var indexToHighlight = nv.nearestValueIndex(allData.map(function(d){return d.value;}),yValue,threshold);
+                    if (indexToHighlight !== null)
+                        allData[indexToHighlight].highlight = true;
+                }
+
+                interactiveLayer.tooltip
+                    .chartContainer(chart.container.parentNode)
+                    .valueFormatter(function(d,i) {
+                        return d === null ? "N/A" : yAxis.tickFormat()(d);
+                    })
+                    .data({
+                        value: chart.x()( singlePoint,pointIndex ),
+                        index: pointIndex,
+                        series: allData
+                    })();
+
+                interactiveLayer.renderGuideLine(pointXLocation);
+
+            });
+
+            interactiveLayer.dispatch.on('elementClick', function(e) {
+                var pointXLocation, allData = [];
+
+                data.filter(function(series, i) {
+                    series.seriesIndex = i;
+                    return !series.disabled;
+                }).forEach(function(series) {
+                    var pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());
+                    var point = series.values[pointIndex];
+                    if (typeof point === 'undefined') return;
+                    if (typeof pointXLocation === 'undefined') pointXLocation = chart.xScale()(chart.x()(point,pointIndex));
+                    var yPos = chart.yScale()(chart.y()(point,pointIndex));
+                    allData.push({
+                        point: point,
+                        pointIndex: pointIndex,
+                        pos: [pointXLocation, yPos],
+                        seriesIndex: series.seriesIndex,
+                        series: series
+                    });
+                });
+
+                lines.dispatch.elementClick(allData);
+            });
+
+            interactiveLayer.dispatch.on("elementMouseout",function(e) {
+                lines.clearHighlights();
+            });
+
+            dispatch.on('changeState', function(e) {
+                if (typeof e.disabled !== 'undefined' && data.length === e.disabled.length) {
+                    data.forEach(function(series,i) {
+                        series.disabled = e.disabled[i];
+                    });
+
+                    state.disabled = e.disabled;
+                }
+
+                chart.update();
+            });
+
+            //============================================================
+            // Functions
+            //------------------------------------------------------------
+    
+            // Taken from crossfilter (http://square.github.com/crossfilter/)
+            function resizePath(d) {
+                var e = +(d == 'e'),
+                    x = e ? 1 : -1,
+                    y = availableHeight2 / 3;
+                return 'M' + (0.5 * x) + ',' + y
+                    + 'A6,6 0 0 ' + e + ' ' + (6.5 * x) + ',' + (y + 6)
+                    + 'V' + (2 * y - 6)
+                    + 'A6,6 0 0 ' + e + ' ' + (0.5 * x) + ',' + (2 * y)
+                    + 'Z'
+                    + 'M' + (2.5 * x) + ',' + (y + 8)
+                    + 'V' + (2 * y - 8)
+                    + 'M' + (4.5 * x) + ',' + (y + 8)
+                    + 'V' + (2 * y - 8);
+            }
+    
+    
+            function updateBrushBG() {
+                if (!brush.empty()) brush.extent(brushExtent);
+                brushBG
+                    .data([brush.empty() ? x2.domain() : brushExtent])
+                    .each(function(d,i) {
+                        var leftWidth = x2(d[0]) - x.range()[0],
+                            rightWidth = availableWidth - x2(d[1]);
+                        d3.select(this).select('.left')
+                            .attr('width',  leftWidth < 0 ? 0 : leftWidth);
+    
+                        d3.select(this).select('.right')
+                            .attr('x', x2(d[1]))
+                            .attr('width', rightWidth < 0 ? 0 : rightWidth);
+                    });
+            }
+    
+    
+            function onBrush() {
+                brushExtent = brush.empty() ? null : brush.extent();
+                var extent = brush.empty() ? x2.domain() : brush.extent();
+    
+                //The brush extent cannot be less than one.  If it is, don't update the line chart.
+                if (Math.abs(extent[0] - extent[1]) <= 1) {
+                    return;
+                }
+    
+                dispatch.brush({extent: extent, brush: brush});
+    
+    
+                updateBrushBG();
+    
+                // Update Main (Focus)
+                var focusLinesWrap = g.select('.nv-focus .nv-linesWrap')
+                    .datum(
+                    data
+                        .filter(function(d) { return !d.disabled; })
+                        .map(function(d,i) {
+                            return {
+                                key: d.key,
+                                area: d.area,
+                                classed: d.classed,
+                                values: d.values.filter(function(d,i) {
+                                    return lines.x()(d,i) >= extent[0] && lines.x()(d,i) <= extent[1];
+                                }),
+                                disableTooltip: d.disableTooltip
+                            };
+                        })
+                );
+                focusLinesWrap.transition().duration(duration).call(lines);
+    
+    
+                // Update Main (Focus) Axes
+                updateXAxis();
+                updateYAxis();
+            }
+
+
+        });
+
+        renderWatch.renderEnd('lineChart immediate');
+        return chart;
+    }
+
+
+    //============================================================
+    // Event Handling/Dispatching (out of chart's scope)
+    //------------------------------------------------------------
+
+    lines.dispatch.on('elementMouseover.tooltip', function(evt) {
+        if(!evt.series.disableTooltip){
+            tooltip.data(evt).hidden(false);
+        }
+    });
+
+    lines.dispatch.on('elementMouseout.tooltip', function(evt) {
+        tooltip.hidden(true);
+    });
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    // expose chart's sub-components
+    chart.dispatch = dispatch;
+    chart.lines = lines;
+    chart.lines2 = lines2;
+    chart.legend = legend;
+    chart.xAxis = xAxis;
+    chart.x2Axis = x2Axis;
+    chart.yAxis = yAxis;
+    chart.y2Axis = y2Axis;
+    chart.interactiveLayer = interactiveLayer;
+    chart.tooltip = tooltip;
+    chart.state = state;
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
+        showXAxis:      {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
+        showYAxis:    {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
+        focusEnable:    {get: function(){return focusEnable;}, set: function(_){focusEnable=_;}},
+        focusHeight:     {get: function(){return height2;}, set: function(_){focusHeight=_;}},
+        focusShowAxisX:    {get: function(){return focusShowAxisX;}, set: function(_){focusShowAxisX=_;}},
+        focusShowAxisY:    {get: function(){return focusShowAxisY;}, set: function(_){focusShowAxisY=_;}},
+        brushExtent: {get: function(){return brushExtent;}, set: function(_){brushExtent=_;}},
+        defaultState:    {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
+        noData:    {get: function(){return noData;}, set: function(_){noData=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+            lines.duration(duration);
+            xAxis.duration(duration);
+            x2Axis.duration(duration);
+            yAxis.duration(duration);
+            y2Axis.duration(duration);
+        }},
+        focusMargin: {get: function(){return margin2;}, set: function(_){
+            margin2.top    = _.top    !== undefined ? _.top    : margin2.top;
+            margin2.right  = _.right  !== undefined ? _.right  : margin2.right;
+            margin2.bottom = _.bottom !== undefined ? _.bottom : margin2.bottom;
+            margin2.left   = _.left   !== undefined ? _.left   : margin2.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+            legend.color(color);
+            lines.color(color);
+        }},
+        interpolate: {get: function(){return lines.interpolate();}, set: function(_){
+            lines.interpolate(_);
+            lines2.interpolate(_);
+        }},
+        xTickFormat: {get: function(){return xAxis.tickFormat();}, set: function(_){
+            xAxis.tickFormat(_);
+            x2Axis.tickFormat(_);
+        }},
+        yTickFormat: {get: function(){return yAxis.tickFormat();}, set: function(_){
+            yAxis.tickFormat(_);
+            y2Axis.tickFormat(_);
+        }},
+        x: {get: function(){return lines.x();}, set: function(_){
+            lines.x(_);
+            lines2.x(_);
+        }},
+        y: {get: function(){return lines.y();}, set: function(_){
+            lines.y(_);
+            lines2.y(_);
+        }},
+        rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
+            rightAlignYAxis = _;
+            yAxis.orient( rightAlignYAxis ? 'right' : 'left');
+        }},
+        useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){
+            useInteractiveGuideline = _;
+            if (useInteractiveGuideline) {
+                lines.interactive(false);
+                lines.useVoronoi(false);
+            }
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, lines);
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+
+nv.models.lineWithFocusChart = function() {
+  return nv.models.lineChart()
+    .margin({ bottom: 30 }) 
+    .focusEnable( true );
+};
+nv.models.linePlusBarChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var lines = nv.models.line()
+        , lines2 = nv.models.line()
+        , bars = nv.models.historicalBar()
+        , bars2 = nv.models.historicalBar()
+        , xAxis = nv.models.axis()
+        , x2Axis = nv.models.axis()
+        , y1Axis = nv.models.axis()
+        , y2Axis = nv.models.axis()
+        , y3Axis = nv.models.axis()
+        , y4Axis = nv.models.axis()
+        , legend = nv.models.legend()
+        , brush = d3.svg.brush()
+        , tooltip = nv.models.tooltip()
+        ;
+
+    var margin = {top: 30, right: 30, bottom: 30, left: 60}
+        , margin2 = {top: 0, right: 30, bottom: 20, left: 60}
+        , width = null
+        , height = null
+        , getX = function(d) { return d.x }
+        , getY = function(d) { return d.y }
+        , color = nv.utils.defaultColor()
+        , showLegend = true
+        , focusEnable = true
+        , focusShowAxisY = false
+        , focusShowAxisX = true
+        , focusHeight = 50
+        , extent
+        , brushExtent = null
+        , x
+        , x2
+        , y1
+        , y2
+        , y3
+        , y4
+        , noData = null
+        , dispatch = d3.dispatch('brush', 'stateChange', 'changeState')
+        , transitionDuration = 0
+        , state = nv.utils.state()
+        , defaultState = null
+        , legendLeftAxisHint = ' (left axis)'
+        , legendRightAxisHint = ' (right axis)'
+        , switchYAxisOrder = false
+        ;
+
+    lines.clipEdge(true);
+    lines2.interactive(false);
+    // We don't want any points emitted for the focus chart's scatter graph.
+    lines2.pointActive(function(d) { return false });
+    xAxis.orient('bottom').tickPadding(5);
+    y1Axis.orient('left');
+    y2Axis.orient('right');
+    x2Axis.orient('bottom').tickPadding(5);
+    y3Axis.orient('left');
+    y4Axis.orient('right');
+
+    tooltip.headerEnabled(true).headerFormatter(function(d, i) {
+        return xAxis.tickFormat()(d, i);
+    });
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var getBarsAxis = function() {
+        return switchYAxisOrder
+            ? { main: y1Axis, focus: y3Axis }
+            : { main: y2Axis, focus: y4Axis }
+    }
+
+    var getLinesAxis = function() {
+        return switchYAxisOrder
+            ? { main: y2Axis, focus: y4Axis }
+            : { main: y1Axis, focus: y3Axis }
+    }
+
+    var stateGetter = function(data) {
+        return function(){
+            return {
+                active: data.map(function(d) { return !d.disabled })
+            };
+        }
+    };
+
+    var stateSetter = function(data) {
+        return function(state) {
+            if (state.active !== undefined)
+                data.forEach(function(series,i) {
+                    series.disabled = !state.active[i];
+                });
+        }
+    };
+
+    var allDisabled = function(data) {
+      return data.every(function(series) {
+        return series.disabled;
+      });
+    }
+
+    function chart(selection) {
+        selection.each(function(data) {
+            var container = d3.select(this),
+                that = this;
+            nv.utils.initSVG(container);
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight1 = nv.utils.availableHeight(height, container, margin)
+                    - (focusEnable ? focusHeight : 0),
+                availableHeight2 = focusHeight - margin2.top - margin2.bottom;
+
+            chart.update = function() { container.transition().duration(transitionDuration).call(chart); };
+            chart.container = this;
+
+            state
+                .setter(stateSetter(data), chart.update)
+                .getter(stateGetter(data))
+                .update();
+
+            // DEPRECATED set state.disableddisabled
+            state.disabled = data.map(function(d) { return !!d.disabled });
+
+            if (!defaultState) {
+                var key;
+                defaultState = {};
+                for (key in state) {
+                    if (state[key] instanceof Array)
+                        defaultState[key] = state[key].slice(0);
+                    else
+                        defaultState[key] = state[key];
+                }
+            }
+
+            // Display No Data message if there's nothing to show.
+            if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
+                nv.utils.noData(chart, container)
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            // Setup Scales
+            var dataBars = data.filter(function(d) { return !d.disabled && d.bar });
+            var dataLines = data.filter(function(d) { return !d.bar }); // removed the !d.disabled clause here to fix Issue #240
+
+            x = bars.xScale();
+            x2 = x2Axis.scale();
+
+            // select the scales and series based on the position of the yAxis
+            y1 = switchYAxisOrder ? lines.yScale() : bars.yScale();
+            y2 = switchYAxisOrder ? bars.yScale() : lines.yScale();
+            y3 = switchYAxisOrder ? lines2.yScale() : bars2.yScale();
+            y4 = switchYAxisOrder ? bars2.yScale() : lines2.yScale();
+
+            var series1 = data
+                .filter(function(d) { return !d.disabled && (switchYAxisOrder ? !d.bar : d.bar) })
+                .map(function(d) {
+                    return d.values.map(function(d,i) {
+                        return { x: getX(d,i), y: getY(d,i) }
+                    })
+                });
+
+            var series2 = data
+                .filter(function(d) { return !d.disabled && (switchYAxisOrder ? d.bar : !d.bar) })
+                .map(function(d) {
+                    return d.values.map(function(d,i) {
+                        return { x: getX(d,i), y: getY(d,i) }
+                    })
+                });
+
+            x.range([0, availableWidth]);
+
+            x2  .domain(d3.extent(d3.merge(series1.concat(series2)), function(d) { return d.x } ))
+                .range([0, availableWidth]);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-linePlusBar').data([data]);
+            var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-linePlusBar').append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-legendWrap');
+
+            // this is the main chart
+            var focusEnter = gEnter.append('g').attr('class', 'nv-focus');
+            focusEnter.append('g').attr('class', 'nv-x nv-axis');
+            focusEnter.append('g').attr('class', 'nv-y1 nv-axis');
+            focusEnter.append('g').attr('class', 'nv-y2 nv-axis');
+            focusEnter.append('g').attr('class', 'nv-barsWrap');
+            focusEnter.append('g').attr('class', 'nv-linesWrap');
+
+            // context chart is where you can focus in
+            var contextEnter = gEnter.append('g').attr('class', 'nv-context');
+            contextEnter.append('g').attr('class', 'nv-x nv-axis');
+            contextEnter.append('g').attr('class', 'nv-y1 nv-axis');
+            contextEnter.append('g').attr('class', 'nv-y2 nv-axis');
+            contextEnter.append('g').attr('class', 'nv-barsWrap');
+            contextEnter.append('g').attr('class', 'nv-linesWrap');
+            contextEnter.append('g').attr('class', 'nv-brushBackground');
+            contextEnter.append('g').attr('class', 'nv-x nv-brush');
+
+            //============================================================
+            // Legend
+            //------------------------------------------------------------
+
+            if (showLegend) {
+                var legendWidth = legend.align() ? availableWidth / 2 : availableWidth;
+                var legendXPosition = legend.align() ? legendWidth : 0;
+
+                legend.width(legendWidth);
+
+                g.select('.nv-legendWrap')
+                    .datum(data.map(function(series) {
+                        series.originalKey = series.originalKey === undefined ? series.key : series.originalKey;
+                        if(switchYAxisOrder) {
+                            series.key = series.originalKey + (series.bar ? legendRightAxisHint : legendLeftAxisHint);
+                        } else {
+                            series.key = series.originalKey + (series.bar ? legendLeftAxisHint : legendRightAxisHint);
+                        }
+                        return series;
+                    }))
+                    .call(legend);
+
+                if ( margin.top != legend.height()) {
+                    margin.top = legend.height();
+                    // FIXME: shouldn't this be "- (focusEnabled ? focusHeight : 0)"?
+                    availableHeight1 = nv.utils.availableHeight(height, container, margin) - focusHeight;
+                }
+
+                g.select('.nv-legendWrap')
+                    .attr('transform', 'translate(' + legendXPosition + ',' + (-margin.top) +')');
+            }
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            //============================================================
+            // Context chart (focus chart) components
+            //------------------------------------------------------------
+
+            // hide or show the focus context chart
+            g.select('.nv-context').style('display', focusEnable ? 'initial' : 'none');
+
+            bars2
+                .width(availableWidth)
+                .height(availableHeight2)
+                .color(data.map(function (d, i) {
+                    return d.color || color(d, i);
+                }).filter(function (d, i) {
+                    return !data[i].disabled && data[i].bar
+                }));
+            lines2
+                .width(availableWidth)
+                .height(availableHeight2)
+                .color(data.map(function (d, i) {
+                    return d.color || color(d, i);
+                }).filter(function (d, i) {
+                    return !data[i].disabled && !data[i].bar
+                }));
+
+            var bars2Wrap = g.select('.nv-context .nv-barsWrap')
+                .datum(dataBars.length ? dataBars : [
+                    {values: []}
+                ]);
+            var lines2Wrap = g.select('.nv-context .nv-linesWrap')
+                .datum(allDisabled(dataLines) ?
+                       [{values: []}] :
+                       dataLines.filter(function(dataLine) {
+                         return !dataLine.disabled;
+                       }));
+
+            g.select('.nv-context')
+                .attr('transform', 'translate(0,' + ( availableHeight1 + margin.bottom + margin2.top) + ')');
+
+            bars2Wrap.transition().call(bars2);
+            lines2Wrap.transition().call(lines2);
+
+            // context (focus chart) axis controls
+            if (focusShowAxisX) {
+                x2Axis
+                    ._ticks( nv.utils.calcTicksX(availableWidth / 100, data))
+                    .tickSize(-availableHeight2, 0);
+                g.select('.nv-context .nv-x.nv-axis')
+                    .attr('transform', 'translate(0,' + y3.range()[0] + ')');
+                g.select('.nv-context .nv-x.nv-axis').transition()
+                    .call(x2Axis);
+            }
+
+            if (focusShowAxisY) {
+                y3Axis
+                    .scale(y3)
+                    ._ticks( availableHeight2 / 36 )
+                    .tickSize( -availableWidth, 0);
+                y4Axis
+                    .scale(y4)
+                    ._ticks( availableHeight2 / 36 )
+                    .tickSize(dataBars.length ? 0 : -availableWidth, 0); // Show the y2 rules only if y1 has none
+
+                g.select('.nv-context .nv-y3.nv-axis')
+                    .style('opacity', dataBars.length ? 1 : 0)
+                    .attr('transform', 'translate(0,' + x2.range()[0] + ')');
+                g.select('.nv-context .nv-y2.nv-axis')
+                    .style('opacity', dataLines.length ? 1 : 0)
+                    .attr('transform', 'translate(' + x2.range()[1] + ',0)');
+
+                g.select('.nv-context .nv-y1.nv-axis').transition()
+                    .call(y3Axis);
+                g.select('.nv-context .nv-y2.nv-axis').transition()
+                    .call(y4Axis);
+            }
+
+            // Setup Brush
+            brush.x(x2).on('brush', onBrush);
+
+            if (brushExtent) brush.extent(brushExtent);
+
+            var brushBG = g.select('.nv-brushBackground').selectAll('g')
+                .data([brushExtent || brush.extent()]);
+
+            var brushBGenter = brushBG.enter()
+                .append('g');
+
+            brushBGenter.append('rect')
+                .attr('class', 'left')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('height', availableHeight2);
+
+            brushBGenter.append('rect')
+                .attr('class', 'right')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('height', availableHeight2);
+
+            var gBrush = g.select('.nv-x.nv-brush')
+                .call(brush);
+            gBrush.selectAll('rect')
+                //.attr('y', -5)
+                .attr('height', availableHeight2);
+            gBrush.selectAll('.resize').append('path').attr('d', resizePath);
+
+            //============================================================
+            // Event Handling/Dispatching (in chart's scope)
+            //------------------------------------------------------------
+
+            legend.dispatch.on('stateChange', function(newState) {
+                for (var key in newState)
+                    state[key] = newState[key];
+                dispatch.stateChange(state);
+                chart.update();
+            });
+
+            // Update chart from a state object passed to event handler
+            dispatch.on('changeState', function(e) {
+                if (typeof e.disabled !== 'undefined') {
+                    data.forEach(function(series,i) {
+                        series.disabled = e.disabled[i];
+                    });
+                    state.disabled = e.disabled;
+                }
+                chart.update();
+            });
+
+            //============================================================
+            // Functions
+            //------------------------------------------------------------
+
+            // Taken from crossfilter (http://square.github.com/crossfilter/)
+            function resizePath(d) {
+                var e = +(d == 'e'),
+                    x = e ? 1 : -1,
+                    y = availableHeight2 / 3;
+                return 'M' + (.5 * x) + ',' + y
+                    + 'A6,6 0 0 ' + e + ' ' + (6.5 * x) + ',' + (y + 6)
+                    + 'V' + (2 * y - 6)
+                    + 'A6,6 0 0 ' + e + ' ' + (.5 * x) + ',' + (2 * y)
+                    + 'Z'
+                    + 'M' + (2.5 * x) + ',' + (y + 8)
+                    + 'V' + (2 * y - 8)
+                    + 'M' + (4.5 * x) + ',' + (y + 8)
+                    + 'V' + (2 * y - 8);
+            }
+
+
+            function updateBrushBG() {
+                if (!brush.empty()) brush.extent(brushExtent);
+                brushBG
+                    .data([brush.empty() ? x2.domain() : brushExtent])
+                    .each(function(d,i) {
+                        var leftWidth = x2(d[0]) - x2.range()[0],
+                            rightWidth = x2.range()[1] - x2(d[1]);
+                        d3.select(this).select('.left')
+                            .attr('width',  leftWidth < 0 ? 0 : leftWidth);
+
+                        d3.select(this).select('.right')
+                            .attr('x', x2(d[1]))
+                            .attr('width', rightWidth < 0 ? 0 : rightWidth);
+                    });
+            }
+
+            function onBrush() {
+                brushExtent = brush.empty() ? null : brush.extent();
+                extent = brush.empty() ? x2.domain() : brush.extent();
+                dispatch.brush({extent: extent, brush: brush});
+                updateBrushBG();
+
+                // Prepare Main (Focus) Bars and Lines
+                bars
+                    .width(availableWidth)
+                    .height(availableHeight1)
+                    .color(data.map(function(d,i) {
+                        return d.color || color(d, i);
+                    }).filter(function(d,i) { return !data[i].disabled && data[i].bar }));
+
+                lines
+                    .width(availableWidth)
+                    .height(availableHeight1)
+                    .color(data.map(function(d,i) {
+                        return d.color || color(d, i);
+                    }).filter(function(d,i) { return !data[i].disabled && !data[i].bar }));
+
+                var focusBarsWrap = g.select('.nv-focus .nv-barsWrap')
+                    .datum(!dataBars.length ? [{values:[]}] :
+                        dataBars
+                            .map(function(d,i) {
+                                return {
+                                    key: d.key,
+                                    values: d.values.filter(function(d,i) {
+                                        return bars.x()(d,i) >= extent[0] && bars.x()(d,i) <= extent[1];
+                                    })
+                                }
+                            })
+                );
+
+                var focusLinesWrap = g.select('.nv-focus .nv-linesWrap')
+                    .datum(allDisabled(dataLines) ? [{values:[]}] :
+                           dataLines
+                           .filter(function(dataLine) { return !dataLine.disabled; })
+                           .map(function(d,i) {
+                                return {
+                                    area: d.area,
+                                    fillOpacity: d.fillOpacity,
+                                    key: d.key,
+                                    values: d.values.filter(function(d,i) {
+                                        return lines.x()(d,i) >= extent[0] && lines.x()(d,i) <= extent[1];
+                                    })
+                                }
+                            })
+                );
+
+                // Update Main (Focus) X Axis
+                if (dataBars.length && !switchYAxisOrder) {
+                    x = bars.xScale();
+                } else {
+                    x = lines.xScale();
+                }
+
+                xAxis
+                    .scale(x)
+                    ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
+                    .tickSize(-availableHeight1, 0);
+
+                xAxis.domain([Math.ceil(extent[0]), Math.floor(extent[1])]);
+
+                g.select('.nv-x.nv-axis').transition().duration(transitionDuration)
+                    .call(xAxis);
+
+                // Update Main (Focus) Bars and Lines
+                focusBarsWrap.transition().duration(transitionDuration).call(bars);
+                focusLinesWrap.transition().duration(transitionDuration).call(lines);
+
+                // Setup and Update Main (Focus) Y Axes
+                g.select('.nv-focus .nv-x.nv-axis')
+                    .attr('transform', 'translate(0,' + y1.range()[0] + ')');
+
+                y1Axis
+                    .scale(y1)
+                    ._ticks( nv.utils.calcTicksY(availableHeight1/36, data) )
+                    .tickSize(-availableWidth, 0);
+                y2Axis
+                    .scale(y2)
+                    ._ticks( nv.utils.calcTicksY(availableHeight1/36, data) )
+                    .tickSize(dataBars.length ? 0 : -availableWidth, 0); // Show the y2 rules only if y1 has none
+
+                // Calculate opacity of the axis
+                var barsOpacity = dataBars.length ? 1 : 0;
+                var linesOpacity = dataLines.length && !allDisabled(dataLines) ? 1 : 0;
+
+                var y1Opacity = switchYAxisOrder ? linesOpacity : barsOpacity;
+                var y2Opacity = switchYAxisOrder ? barsOpacity : linesOpacity;
+
+                g.select('.nv-focus .nv-y1.nv-axis')
+                    .style('opacity', y1Opacity);
+                g.select('.nv-focus .nv-y2.nv-axis')
+                    .style('opacity', y2Opacity)
+                    .attr('transform', 'translate(' + x.range()[1] + ',0)');
+
+                g.select('.nv-focus .nv-y1.nv-axis').transition().duration(transitionDuration)
+                    .call(y1Axis);
+                g.select('.nv-focus .nv-y2.nv-axis').transition().duration(transitionDuration)
+                    .call(y2Axis);
+            }
+
+            onBrush();
+
+        });
+
+        return chart;
+    }
+
+    //============================================================
+    // Event Handling/Dispatching (out of chart's scope)
+    //------------------------------------------------------------
+
+    lines.dispatch.on('elementMouseover.tooltip', function(evt) {
+        tooltip
+            .duration(100)
+            .valueFormatter(function(d, i) {
+                return getLinesAxis().main.tickFormat()(d, i);
+            })
+            .data(evt)
+            .hidden(false);
+    });
+
+    lines.dispatch.on('elementMouseout.tooltip', function(evt) {
+        tooltip.hidden(true)
+    });
+
+    bars.dispatch.on('elementMouseover.tooltip', function(evt) {
+        evt.value = chart.x()(evt.data);
+        evt['series'] = {
+            value: chart.y()(evt.data),
+            color: evt.color
+        };
+        tooltip
+            .duration(0)
+            .valueFormatter(function(d, i) {
+                return getBarsAxis().main.tickFormat()(d, i);
+            })
+            .data(evt)
+            .hidden(false);
+    });
+
+    bars.dispatch.on('elementMouseout.tooltip', function(evt) {
+        tooltip.hidden(true);
+    });
+
+    bars.dispatch.on('elementMousemove.tooltip', function(evt) {
+        tooltip();
+    });
+
+    //============================================================
+
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    // expose chart's sub-components
+    chart.dispatch = dispatch;
+    chart.legend = legend;
+    chart.lines = lines;
+    chart.lines2 = lines2;
+    chart.bars = bars;
+    chart.bars2 = bars2;
+    chart.xAxis = xAxis;
+    chart.x2Axis = x2Axis;
+    chart.y1Axis = y1Axis;
+    chart.y2Axis = y2Axis;
+    chart.y3Axis = y3Axis;
+    chart.y4Axis = y4Axis;
+    chart.tooltip = tooltip;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
+        brushExtent:    {get: function(){return brushExtent;}, set: function(_){brushExtent=_;}},
+        noData:    {get: function(){return noData;}, set: function(_){noData=_;}},
+        focusEnable:    {get: function(){return focusEnable;}, set: function(_){focusEnable=_;}},
+        focusHeight:    {get: function(){return focusHeight;}, set: function(_){focusHeight=_;}},
+        focusShowAxisX:    {get: function(){return focusShowAxisX;}, set: function(_){focusShowAxisX=_;}},
+        focusShowAxisY:    {get: function(){return focusShowAxisY;}, set: function(_){focusShowAxisY=_;}},
+        legendLeftAxisHint:    {get: function(){return legendLeftAxisHint;}, set: function(_){legendLeftAxisHint=_;}},
+        legendRightAxisHint:    {get: function(){return legendRightAxisHint;}, set: function(_){legendRightAxisHint=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        focusMargin: {get: function(){return margin2;}, set: function(_){
+            margin2.top    = _.top    !== undefined ? _.top    : margin2.top;
+            margin2.right  = _.right  !== undefined ? _.right  : margin2.right;
+            margin2.bottom = _.bottom !== undefined ? _.bottom : margin2.bottom;
+            margin2.left   = _.left   !== undefined ? _.left   : margin2.left;
+        }},
+        duration: {get: function(){return transitionDuration;}, set: function(_){
+            transitionDuration = _;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+            legend.color(color);
+        }},
+        x: {get: function(){return getX;}, set: function(_){
+            getX = _;
+            lines.x(_);
+            lines2.x(_);
+            bars.x(_);
+            bars2.x(_);
+        }},
+        y: {get: function(){return getY;}, set: function(_){
+            getY = _;
+            lines.y(_);
+            lines2.y(_);
+            bars.y(_);
+            bars2.y(_);
+        }},
+        switchYAxisOrder:    {get: function(){return switchYAxisOrder;}, set: function(_){
+            // Switch the tick format for the yAxis
+            if(switchYAxisOrder !== _) {
+                var tickFormat = y1Axis.tickFormat();
+                y1Axis.tickFormat(y2Axis.tickFormat());
+                y2Axis.tickFormat(tickFormat);
+            }
+            switchYAxisOrder=_;
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, lines);
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+
+nv.models.multiBar = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , width = 960
+        , height = 500
+        , x = d3.scale.ordinal()
+        , y = d3.scale.linear()
+        , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
+        , container = null
+        , getX = function(d) { return d.x }
+        , getY = function(d) { return d.y }
+        , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove
+        , clipEdge = true
+        , stacked = false
+        , stackOffset = 'zero' // options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function
+        , color = nv.utils.defaultColor()
+        , hideable = false
+        , barColor = null // adding the ability to set the color for each rather than the whole group
+        , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled
+        , duration = 500
+        , xDomain
+        , yDomain
+        , xRange
+        , yRange
+        , groupSpacing = 0.1
+        , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
+        ;
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var x0, y0 //used to store previous scales
+        , renderWatch = nv.utils.renderWatch(dispatch, duration)
+        ;
+
+    var last_datalength = 0;
+
+    function chart(selection) {
+        renderWatch.reset();
+        selection.each(function(data) {
+            var availableWidth = width - margin.left - margin.right,
+                availableHeight = height - margin.top - margin.bottom;
+
+            container = d3.select(this);
+            nv.utils.initSVG(container);
+            var nonStackableCount = 0;
+            // This function defines the requirements for render complete
+            var endFn = function(d, i) {
+                if (d.series === data.length - 1 && i === data[0].values.length - 1)
+                    return true;
+                return false;
+            };
+
+            if(hideable && data.length) hideable = [{
+                values: data[0].values.map(function(d) {
+                        return {
+                            x: d.x,
+                            y: 0,
+                            series: d.series,
+                            size: 0.01
+                        };}
+                )}];
+
+            if (stacked) {
+                var parsed = d3.layout.stack()
+                    .offset(stackOffset)
+                    .values(function(d){ return d.values })
+                    .y(getY)
+                (!data.length && hideable ? hideable : data);
+
+                parsed.forEach(function(series, i){
+                    // if series is non-stackable, use un-parsed data
+                    if (series.nonStackable) {
+                        data[i].nonStackableSeries = nonStackableCount++;
+                        parsed[i] = data[i];
+                    } else {
+                        // don't stack this seires on top of the nonStackable seriees
+                        if (i > 0 && parsed[i - 1].nonStackable){
+                            parsed[i].values.map(function(d,j){
+                                d.y0 -= parsed[i - 1].values[j].y;
+                                d.y1 = d.y0 + d.y;
+                            });
+                        }
+                    }
+                });
+                data = parsed;
+            }
+            //add series index and key to each data point for reference
+            data.forEach(function(series, i) {
+                series.values.forEach(function(point) {
+                    point.series = i;
+                    point.key = series.key;
+                });
+            });
+
+            // HACK for negative value stacking
+            if (stacked) {
+                data[0].values.map(function(d,i) {
+                    var posBase = 0, negBase = 0;
+                    data.map(function(d, idx) {
+                        if (!data[idx].nonStackable) {
+                            var f = d.values[i]
+                            f.size = Math.abs(f.y);
+                            if (f.y<0)  {
+                                f.y1 = negBase;
+                                negBase = negBase - f.size;
+                            } else
+                            {
+                                f.y1 = f.size + posBase;
+                                posBase = posBase + f.size;
+                            }
+                        }
+
+                    });
+                });
+            }
+            // Setup Scales
+            // remap and flatten the data for use in calculating the scales' domains
+            var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate
+                data.map(function(d, idx) {
+                    return d.values.map(function(d,i) {
+                        return { x: getX(d,i), y: getY(d,i), y0: d.y0, y1: d.y1, idx:idx }
+                    })
+                });
+
+            x.domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))
+                .rangeBands(xRange || [0, availableWidth], groupSpacing);
+
+            y.domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) {
+                var domain = d.y;
+                // increase the domain range if this series is stackable
+                if (stacked && !data[d.idx].nonStackable) {
+                    if (d.y > 0){
+                        domain = d.y1
+                    } else {
+                        domain = d.y1 + d.y
+                    }
+                }
+                return domain;
+            }).concat(forceY)))
+            .range(yRange || [availableHeight, 0]);
+
+            // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
+            if (x.domain()[0] === x.domain()[1])
+                x.domain()[0] ?
+                    x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
+                    : x.domain([-1,1]);
+
+            if (y.domain()[0] === y.domain()[1])
+                y.domain()[0] ?
+                    y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
+                    : y.domain([-1,1]);
+
+            x0 = x0 || x;
+            y0 = y0 || y;
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-multibar').data([data]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multibar');
+            var defsEnter = wrapEnter.append('defs');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-groups');
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            defsEnter.append('clipPath')
+                .attr('id', 'nv-edge-clip-' + id)
+                .append('rect');
+            wrap.select('#nv-edge-clip-' + id + ' rect')
+                .attr('width', availableWidth)
+                .attr('height', availableHeight);
+
+            g.attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : '');
+
+            var groups = wrap.select('.nv-groups').selectAll('.nv-group')
+                .data(function(d) { return d }, function(d,i) { return i });
+            groups.enter().append('g')
+                .style('stroke-opacity', 1e-6)
+                .style('fill-opacity', 1e-6);
+
+            var exitTransition = renderWatch
+                .transition(groups.exit().selectAll('rect.nv-bar'), 'multibarExit', Math.min(100, duration))
+                .attr('y', function(d, i, j) {
+                    var yVal = y0(0) || 0;
+                    if (stacked) {
+                        if (data[d.series] && !data[d.series].nonStackable) {
+                            yVal = y0(d.y0);
+                        }
+                    }
+                    return yVal;
+                })
+                .attr('height', 0)
+                .remove();
+            if (exitTransition.delay)
+                exitTransition.delay(function(d,i) {
+                    var delay = i * (duration / (last_datalength + 1)) - i;
+                    return delay;
+                });
+            groups
+                .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
+                .classed('hover', function(d) { return d.hover })
+                .style('fill', function(d,i){ return color(d, i) })
+                .style('stroke', function(d,i){ return color(d, i) });
+            groups
+                .style('stroke-opacity', 1)
+                .style('fill-opacity', 0.75);
+
+            var bars = groups.selectAll('rect.nv-bar')
+                .data(function(d) { return (hideable && !data.length) ? hideable.values : d.values });
+            bars.exit().remove();
+
+            var barsEnter = bars.enter().append('rect')
+                    .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
+                    .attr('x', function(d,i,j) {
+                        return stacked && !data[j].nonStackable ? 0 : (j * x.rangeBand() / data.length )
+                    })
+                    .attr('y', function(d,i,j) { return y0(stacked && !data[j].nonStackable ? d.y0 : 0) || 0 })
+                    .attr('height', 0)
+                    .attr('width', function(d,i,j) { return x.rangeBand() / (stacked && !data[j].nonStackable ? 1 : data.length) })
+                    .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
+                ;
+            bars
+                .style('fill', function(d,i,j){ return color(d, j, i);  })
+                .style('stroke', function(d,i,j){ return color(d, j, i); })
+                .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
+                    d3.select(this).classed('hover', true);
+                    dispatch.elementMouseover({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                })
+                .on('mouseout', function(d,i) {
+                    d3.select(this).classed('hover', false);
+                    dispatch.elementMouseout({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                })
+                .on('mousemove', function(d,i) {
+                    dispatch.elementMousemove({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                })
+                .on('click', function(d,i) {
+                    var element = this;
+                    dispatch.elementClick({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill"),
+                        event: d3.event,
+                        element: element
+                    });
+                    d3.event.stopPropagation();
+                })
+                .on('dblclick', function(d,i) {
+                    dispatch.elementDblClick({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                    d3.event.stopPropagation();
+                });
+            bars
+                .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
+                .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
+
+            if (barColor) {
+                if (!disabled) disabled = data.map(function() { return true });
+                bars
+                    .style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(  disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i]  })[j]   ).toString(); })
+                    .style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(  disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i]  })[j]   ).toString(); });
+            }
+
+            var barSelection =
+                bars.watchTransition(renderWatch, 'multibar', Math.min(250, duration))
+                    .delay(function(d,i) {
+                        return i * duration / data[0].values.length;
+                    });
+            if (stacked){
+                barSelection
+                    .attr('y', function(d,i,j) {
+                        var yVal = 0;
+                        // if stackable, stack it on top of the previous series
+                        if (!data[j].nonStackable) {
+                            yVal = y(d.y1);
+                        } else {
+                            if (getY(d,i) < 0){
+                                yVal = y(0);
+                            } else {
+                                if (y(0) - y(getY(d,i)) < -1){
+                                    yVal = y(0) - 1;
+                                } else {
+                                    yVal = y(getY(d, i)) || 0;
+                                }
+                            }
+                        }
+                        return yVal;
+                    })
+                    .attr('height', function(d,i,j) {
+                        if (!data[j].nonStackable) {
+                            return Math.max(Math.abs(y(d.y+d.y0) - y(d.y0)), 0);
+                        } else {
+                            return Math.max(Math.abs(y(getY(d,i)) - y(0)), 0) || 0;
+                        }
+                    })
+                    .attr('x', function(d,i,j) {
+                        var width = 0;
+                        if (data[j].nonStackable) {
+                            width = d.series * x.rangeBand() / data.length;
+                            if (data.length !== nonStackableCount){
+                                width = data[j].nonStackableSeries * x.rangeBand()/(nonStackableCount*2);
+                            }
+                        }
+                        return width;
+                    })
+                    .attr('width', function(d,i,j){
+                        if (!data[j].nonStackable) {
+                            return x.rangeBand();
+                        } else {
+                            // if all series are nonStacable, take the full width
+                            var width = (x.rangeBand() / nonStackableCount);
+                            // otherwise, nonStackable graph will be only taking the half-width
+                            // of the x rangeBand
+                            if (data.length !== nonStackableCount) {
+                                width = x.rangeBand()/(nonStackableCount*2);
+                            }
+                            return width;
+                        }
+                    });
+            }
+            else {
+                barSelection
+                    .attr('x', function(d,i) {
+                        return d.series * x.rangeBand() / data.length;
+                    })
+                    .attr('width', x.rangeBand() / data.length)
+                    .attr('y', function(d,i) {
+                        return getY(d,i) < 0 ?
+                            y(0) :
+                                y(0) - y(getY(d,i)) < 1 ?
+                            y(0) - 1 :
+                            y(getY(d,i)) || 0;
+                    })
+                    .attr('height', function(d,i) {
+                        return Math.max(Math.abs(y(getY(d,i)) - y(0)),1) || 0;
+                    });
+            }
+
+            //store old scales for use in transitions on update
+            x0 = x.copy();
+            y0 = y.copy();
+
+            // keep track of the last data value length for transition calculations
+            if (data[0] && data[0].values) {
+                last_datalength = data[0].values.length;
+            }
+
+        });
+
+        renderWatch.renderEnd('multibar immediate');
+
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:   {get: function(){return width;}, set: function(_){width=_;}},
+        height:  {get: function(){return height;}, set: function(_){height=_;}},
+        x:       {get: function(){return getX;}, set: function(_){getX=_;}},
+        y:       {get: function(){return getY;}, set: function(_){getY=_;}},
+        xScale:  {get: function(){return x;}, set: function(_){x=_;}},
+        yScale:  {get: function(){return y;}, set: function(_){y=_;}},
+        xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
+        yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
+        xRange:  {get: function(){return xRange;}, set: function(_){xRange=_;}},
+        yRange:  {get: function(){return yRange;}, set: function(_){yRange=_;}},
+        forceY:  {get: function(){return forceY;}, set: function(_){forceY=_;}},
+        stacked: {get: function(){return stacked;}, set: function(_){stacked=_;}},
+        stackOffset: {get: function(){return stackOffset;}, set: function(_){stackOffset=_;}},
+        clipEdge:    {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
+        disabled:    {get: function(){return disabled;}, set: function(_){disabled=_;}},
+        id:          {get: function(){return id;}, set: function(_){id=_;}},
+        hideable:    {get: function(){return hideable;}, set: function(_){hideable=_;}},
+        groupSpacing:{get: function(){return groupSpacing;}, set: function(_){groupSpacing=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }},
+        barColor:  {get: function(){return barColor;}, set: function(_){
+            barColor = _ ? nv.utils.getColor(_) : null;
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+
+    return chart;
+};nv.models.multiBarChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var multibar = nv.models.multiBar()
+        , xAxis = nv.models.axis()
+        , yAxis = nv.models.axis()
+        , interactiveLayer = nv.interactiveGuideline()
+        , legend = nv.models.legend()
+        , controls = nv.models.legend()
+        , tooltip = nv.models.tooltip()
+        ;
+
+    var margin = {top: 30, right: 20, bottom: 50, left: 60}
+        , width = null
+        , height = null
+        , color = nv.utils.defaultColor()
+        , showControls = true
+        , controlLabels = {}
+        , showLegend = true
+        , showXAxis = true
+        , showYAxis = true
+        , rightAlignYAxis = false
+        , reduceXTicks = true // if false a tick will show for every data point
+        , staggerLabels = false
+        , wrapLabels = false
+        , rotateLabels = 0
+        , x //can be accessed via chart.xScale()
+        , y //can be accessed via chart.yScale()
+        , state = nv.utils.state()
+        , defaultState = null
+        , noData = null
+        , dispatch = d3.dispatch('stateChange', 'changeState', 'renderEnd')
+        , controlWidth = function() { return showControls ? 180 : 0 }
+        , duration = 250
+        , useInteractiveGuideline = false
+        ;
+
+    state.stacked = false // DEPRECATED Maintained for backward compatibility
+
+    multibar.stacked(false);
+    xAxis
+        .orient('bottom')
+        .tickPadding(7)
+        .showMaxMin(false)
+        .tickFormat(function(d) { return d })
+    ;
+    yAxis
+        .orient((rightAlignYAxis) ? 'right' : 'left')
+        .tickFormat(d3.format(',.1f'))
+    ;
+
+    tooltip
+        .duration(0)
+        .valueFormatter(function(d, i) {
+            return yAxis.tickFormat()(d, i);
+        })
+        .headerFormatter(function(d, i) {
+            return xAxis.tickFormat()(d, i);
+        });
+
+    controls.updateState(false);
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var renderWatch = nv.utils.renderWatch(dispatch);
+    var stacked = false;
+
+    var stateGetter = function(data) {
+        return function(){
+            return {
+                active: data.map(function(d) { return !d.disabled }),
+                stacked: stacked
+            };
+        }
+    };
+
+    var stateSetter = function(data) {
+        return function(state) {
+            if (state.stacked !== undefined)
+                stacked = state.stacked;
+            if (state.active !== undefined)
+                data.forEach(function(series,i) {
+                    series.disabled = !state.active[i];
+                });
+        }
+    };
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(multibar);
+        if (showXAxis) renderWatch.models(xAxis);
+        if (showYAxis) renderWatch.models(yAxis);
+
+        selection.each(function(data) {
+            var container = d3.select(this),
+                that = this;
+            nv.utils.initSVG(container);
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            chart.update = function() {
+                if (duration === 0)
+                    container.call(chart);
+                else
+                    container.transition()
+                        .duration(duration)
+                        .call(chart);
+            };
+            chart.container = this;
+
+            state
+                .setter(stateSetter(data), chart.update)
+                .getter(stateGetter(data))
+                .update();
+
+            // DEPRECATED set state.disableddisabled
+            state.disabled = data.map(function(d) { return !!d.disabled });
+
+            if (!defaultState) {
+                var key;
+                defaultState = {};
+                for (key in state) {
+                    if (state[key] instanceof Array)
+                        defaultState[key] = state[key].slice(0);
+                    else
+                        defaultState[key] = state[key];
+                }
+            }
+
+            // Display noData message if there's nothing to show.
+            if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
+                nv.utils.noData(chart, container)
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            // Setup Scales
+            x = multibar.xScale();
+            y = multibar.yScale();
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-multiBarWithLegend').data([data]);
+            var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multiBarWithLegend').append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-x nv-axis');
+            gEnter.append('g').attr('class', 'nv-y nv-axis');
+            gEnter.append('g').attr('class', 'nv-barsWrap');
+            gEnter.append('g').attr('class', 'nv-legendWrap');
+            gEnter.append('g').attr('class', 'nv-controlsWrap');
+            gEnter.append('g').attr('class', 'nv-interactive');
+
+            // Legend
+            if (showLegend) {
+                legend.width(availableWidth - controlWidth());
+
+                g.select('.nv-legendWrap')
+                    .datum(data)
+                    .call(legend);
+
+                if ( margin.top != legend.height()) {
+                    margin.top = legend.height();
+                    availableHeight = nv.utils.availableHeight(height, container, margin);
+                }
+
+                g.select('.nv-legendWrap')
+                    .attr('transform', 'translate(' + controlWidth() + ',' + (-margin.top) +')');
+            }
+
+            // Controls
+            if (showControls) {
+                var controlsData = [
+                    { key: controlLabels.grouped || 'Grouped', disabled: multibar.stacked() },
+                    { key: controlLabels.stacked || 'Stacked', disabled: !multibar.stacked() }
+                ];
+
+                controls.width(controlWidth()).color(['#444', '#444', '#444']);
+                g.select('.nv-controlsWrap')
+                    .datum(controlsData)
+                    .attr('transform', 'translate(0,' + (-margin.top) +')')
+                    .call(controls);
+            }
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+            if (rightAlignYAxis) {
+                g.select(".nv-y.nv-axis")
+                    .attr("transform", "translate(" + availableWidth + ",0)");
+            }
+
+            // Main Chart Component(s)
+            multibar
+                .disabled(data.map(function(series) { return series.disabled }))
+                .width(availableWidth)
+                .height(availableHeight)
+                .color(data.map(function(d,i) {
+                    return d.color || color(d, i);
+                }).filter(function(d,i) { return !data[i].disabled }));
+
+
+            var barsWrap = g.select('.nv-barsWrap')
+                .datum(data.filter(function(d) { return !d.disabled }));
+
+            barsWrap.call(multibar);
+
+            // Setup Axes
+            if (showXAxis) {
+                xAxis
+                    .scale(x)
+                    ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
+                    .tickSize(-availableHeight, 0);
+
+                g.select('.nv-x.nv-axis')
+                    .attr('transform', 'translate(0,' + y.range()[0] + ')');
+                g.select('.nv-x.nv-axis')
+                    .call(xAxis);
+
+                var xTicks = g.select('.nv-x.nv-axis > g').selectAll('g');
+
+                xTicks
+                    .selectAll('line, text')
+                    .style('opacity', 1)
+
+                if (staggerLabels) {
+                    var getTranslate = function(x,y) {
+                        return "translate(" + x + "," + y + ")";
+                    };
+
+                    var staggerUp = 5, staggerDown = 17;  //pixels to stagger by
+                    // Issue #140
+                    xTicks
+                        .selectAll("text")
+                        .attr('transform', function(d,i,j) {
+                            return  getTranslate(0, (j % 2 == 0 ? staggerUp : staggerDown));
+                        });
+
+                    var totalInBetweenTicks = d3.selectAll(".nv-x.nv-axis .nv-wrap g g text")[0].length;
+                    g.selectAll(".nv-x.nv-axis .nv-axisMaxMin text")
+                        .attr("transform", function(d,i) {
+                            return getTranslate(0, (i === 0 || totalInBetweenTicks % 2 !== 0) ? staggerDown : staggerUp);
+                        });
+                }
+
+                if (wrapLabels) {
+                    g.selectAll('.tick text')
+                        .call(nv.utils.wrapTicks, chart.xAxis.rangeBand())
+                }
+
+                if (reduceXTicks)
+                    xTicks
+                        .filter(function(d,i) {
+                            return i % Math.ceil(data[0].values.length / (availableWidth / 100)) !== 0;
+                        })
+                        .selectAll('text, line')
+                        .style('opacity', 0);
+
+                if(rotateLabels)
+                    xTicks
+                        .selectAll('.tick text')
+                        .attr('transform', 'rotate(' + rotateLabels + ' 0,0)')
+                        .style('text-anchor', rotateLabels > 0 ? 'start' : 'end');
+
+                g.select('.nv-x.nv-axis').selectAll('g.nv-axisMaxMin text')
+                    .style('opacity', 1);
+            }
+
+            if (showYAxis) {
+                yAxis
+                    .scale(y)
+                    ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
+                    .tickSize( -availableWidth, 0);
+
+                g.select('.nv-y.nv-axis')
+                    .call(yAxis);
+            }
+
+            //Set up interactive layer
+            if (useInteractiveGuideline) {
+                interactiveLayer
+                    .width(availableWidth)
+                    .height(availableHeight)
+                    .margin({left:margin.left, top:margin.top})
+                    .svgContainer(container)
+                    .xScale(x);
+                wrap.select(".nv-interactive").call(interactiveLayer);
+            }
+
+            //============================================================
+            // Event Handling/Dispatching (in chart's scope)
+            //------------------------------------------------------------
+
+            legend.dispatch.on('stateChange', function(newState) {
+                for (var key in newState)
+                    state[key] = newState[key];
+                dispatch.stateChange(state);
+                chart.update();
+            });
+
+            controls.dispatch.on('legendClick', function(d,i) {
+                if (!d.disabled) return;
+                controlsData = controlsData.map(function(s) {
+                    s.disabled = true;
+                    return s;
+                });
+                d.disabled = false;
+
+                switch (d.key) {
+                    case 'Grouped':
+                    case controlLabels.grouped:
+                        multibar.stacked(false);
+                        break;
+                    case 'Stacked':
+                    case controlLabels.stacked:
+                        multibar.stacked(true);
+                        break;
+                }
+
+                state.stacked = multibar.stacked();
+                dispatch.stateChange(state);
+                chart.update();
+            });
+
+            // Update chart from a state object passed to event handler
+            dispatch.on('changeState', function(e) {
+                if (typeof e.disabled !== 'undefined') {
+                    data.forEach(function(series,i) {
+                        series.disabled = e.disabled[i];
+                    });
+                    state.disabled = e.disabled;
+                }
+                if (typeof e.stacked !== 'undefined') {
+                    multibar.stacked(e.stacked);
+                    state.stacked = e.stacked;
+                    stacked = e.stacked;
+                }
+                chart.update();
+            });
+
+            if (useInteractiveGuideline) {
+                interactiveLayer.dispatch.on('elementMousemove', function(e) {
+                    if (e.pointXValue == undefined) return;
+
+                    var singlePoint, pointIndex, pointXLocation, xValue, allData = [];
+                    data
+                        .filter(function(series, i) {
+                            series.seriesIndex = i;
+                            return !series.disabled;
+                        })
+                        .forEach(function(series,i) {
+                            pointIndex = x.domain().indexOf(e.pointXValue)
+
+                            var point = series.values[pointIndex];
+                            if (point === undefined) return;
+
+                            xValue = point.x;
+                            if (singlePoint === undefined) singlePoint = point;
+                            if (pointXLocation === undefined) pointXLocation = e.mouseX
+                            allData.push({
+                                key: series.key,
+                                value: chart.y()(point, pointIndex),
+                                color: color(series,series.seriesIndex),
+                                data: series.values[pointIndex]
+                            });
+                        });
+
+                    interactiveLayer.tooltip
+                        .chartContainer(that.parentNode)
+                        .data({
+                            value: xValue,
+                            index: pointIndex,
+                            series: allData
+                        })();
+
+                    interactiveLayer.renderGuideLine(pointXLocation);
+                });
+
+                interactiveLayer.dispatch.on("elementMouseout",function(e) {
+                    interactiveLayer.tooltip.hidden(true);
+                });
+            }
+            else {
+                multibar.dispatch.on('elementMouseover.tooltip', function(evt) {
+                    evt.value = chart.x()(evt.data);
+                    evt['series'] = {
+                        key: evt.data.key,
+                        value: chart.y()(evt.data),
+                        color: evt.color
+                    };
+                    tooltip.data(evt).hidden(false);
+                });
+
+                multibar.dispatch.on('elementMouseout.tooltip', function(evt) {
+                    tooltip.hidden(true);
+                });
+
+                multibar.dispatch.on('elementMousemove.tooltip', function(evt) {
+                    tooltip();
+                });
+            }
+        });
+
+        renderWatch.renderEnd('multibarchart immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    // expose chart's sub-components
+    chart.dispatch = dispatch;
+    chart.multibar = multibar;
+    chart.legend = legend;
+    chart.controls = controls;
+    chart.xAxis = xAxis;
+    chart.yAxis = yAxis;
+    chart.state = state;
+    chart.tooltip = tooltip;
+    chart.interactiveLayer = interactiveLayer;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
+        showControls: {get: function(){return showControls;}, set: function(_){showControls=_;}},
+        controlLabels: {get: function(){return controlLabels;}, set: function(_){controlLabels=_;}},
+        showXAxis:      {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
+        showYAxis:    {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
+        defaultState:    {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
+        noData:    {get: function(){return noData;}, set: function(_){noData=_;}},
+        reduceXTicks:    {get: function(){return reduceXTicks;}, set: function(_){reduceXTicks=_;}},
+        rotateLabels:    {get: function(){return rotateLabels;}, set: function(_){rotateLabels=_;}},
+        staggerLabels:    {get: function(){return staggerLabels;}, set: function(_){staggerLabels=_;}},
+        wrapLabels:   {get: function(){return wrapLabels;}, set: function(_){wrapLabels=!!_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            multibar.duration(duration);
+            xAxis.duration(duration);
+            yAxis.duration(duration);
+            renderWatch.reset(duration);
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+            legend.color(color);
+        }},
+        rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
+            rightAlignYAxis = _;
+            yAxis.orient( rightAlignYAxis ? 'right' : 'left');
+        }},
+        useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){
+            useInteractiveGuideline = _;
+        }},
+        barColor:  {get: function(){return multibar.barColor;}, set: function(_){
+            multibar.barColor(_);
+            legend.color(function(d,i) {return d3.rgb('#ccc').darker(i * 1.5).toString();})
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, multibar);
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+
+nv.models.multiBarHorizontal = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , width = 960
+        , height = 500
+        , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
+        , container = null
+        , x = d3.scale.ordinal()
+        , y = d3.scale.linear()
+        , getX = function(d) { return d.x }
+        , getY = function(d) { return d.y }
+        , getYerr = function(d) { return d.yErr }
+        , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove
+        , color = nv.utils.defaultColor()
+        , barColor = null // adding the ability to set the color for each rather than the whole group
+        , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled
+        , stacked = false
+        , showValues = false
+        , showBarLabels = false
+        , valuePadding = 60
+        , groupSpacing = 0.1
+        , valueFormat = d3.format(',.2f')
+        , delay = 1200
+        , xDomain
+        , yDomain
+        , xRange
+        , yRange
+        , duration = 250
+        , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
+        ;
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var x0, y0; //used to store previous scales
+    var renderWatch = nv.utils.renderWatch(dispatch, duration);
+
+    function chart(selection) {
+        renderWatch.reset();
+        selection.each(function(data) {
+            var availableWidth = width - margin.left - margin.right,
+                availableHeight = height - margin.top - margin.bottom;
+
+            container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            if (stacked)
+                data = d3.layout.stack()
+                    .offset('zero')
+                    .values(function(d){ return d.values })
+                    .y(getY)
+                (data);
+
+            //add series index and key to each data point for reference
+            data.forEach(function(series, i) {
+                series.values.forEach(function(point) {
+                    point.series = i;
+                    point.key = series.key;
+                });
+            });
+
+            // HACK for negative value stacking
+            if (stacked)
+                data[0].values.map(function(d,i) {
+                    var posBase = 0, negBase = 0;
+                    data.map(function(d) {
+                        var f = d.values[i]
+                        f.size = Math.abs(f.y);
+                        if (f.y<0)  {
+                            f.y1 = negBase - f.size;
+                            negBase = negBase - f.size;
+                        } else
+                        {
+                            f.y1 = posBase;
+                            posBase = posBase + f.size;
+                        }
+                    });
+                });
+
+            // Setup Scales
+            // remap and flatten the data for use in calculating the scales' domains
+            var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate
+                data.map(function(d) {
+                    return d.values.map(function(d,i) {
+                        return { x: getX(d,i), y: getY(d,i), y0: d.y0, y1: d.y1 }
+                    })
+                });
+
+            x.domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))
+                .rangeBands(xRange || [0, availableHeight], groupSpacing);
+
+            y.domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return stacked ? (d.y > 0 ? d.y1 + d.y : d.y1 ) : d.y }).concat(forceY)))
+
+            if (showValues && !stacked)
+                y.range(yRange || [(y.domain()[0] < 0 ? valuePadding : 0), availableWidth - (y.domain()[1] > 0 ? valuePadding : 0) ]);
+            else
+                y.range(yRange || [0, availableWidth]);
+
+            x0 = x0 || x;
+            y0 = y0 || d3.scale.linear().domain(y.domain()).range([y(0),y(0)]);
+
+            // Setup containers and skeleton of chart
+            var wrap = d3.select(this).selectAll('g.nv-wrap.nv-multibarHorizontal').data([data]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multibarHorizontal');
+            var defsEnter = wrapEnter.append('defs');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-groups');
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            var groups = wrap.select('.nv-groups').selectAll('.nv-group')
+                .data(function(d) { return d }, function(d,i) { return i });
+            groups.enter().append('g')
+                .style('stroke-opacity', 1e-6)
+                .style('fill-opacity', 1e-6);
+            groups.exit().watchTransition(renderWatch, 'multibarhorizontal: exit groups')
+                .style('stroke-opacity', 1e-6)
+                .style('fill-opacity', 1e-6)
+                .remove();
+            groups
+                .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
+                .classed('hover', function(d) { return d.hover })
+                .style('fill', function(d,i){ return color(d, i) })
+                .style('stroke', function(d,i){ return color(d, i) });
+            groups.watchTransition(renderWatch, 'multibarhorizontal: groups')
+                .style('stroke-opacity', 1)
+                .style('fill-opacity', .75);
+
+            var bars = groups.selectAll('g.nv-bar')
+                .data(function(d) { return d.values });
+            bars.exit().remove();
+
+            var barsEnter = bars.enter().append('g')
+                .attr('transform', function(d,i,j) {
+                    return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length ) + x(getX(d,i))) + ')'
+                });
+
+            barsEnter.append('rect')
+                .attr('width', 0)
+                .attr('height', x.rangeBand() / (stacked ? 1 : data.length) )
+
+            bars
+                .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
+                    d3.select(this).classed('hover', true);
+                    dispatch.elementMouseover({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                })
+                .on('mouseout', function(d,i) {
+                    d3.select(this).classed('hover', false);
+                    dispatch.elementMouseout({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                })
+                .on('mouseout', function(d,i) {
+                    dispatch.elementMouseout({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                })
+                .on('mousemove', function(d,i) {
+                    dispatch.elementMousemove({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                })
+                .on('click', function(d,i) {
+                    dispatch.elementClick({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                    d3.event.stopPropagation();
+                })
+                .on('dblclick', function(d,i) {
+                    dispatch.elementDblClick({
+                        data: d,
+                        index: i,
+                        color: d3.select(this).style("fill")
+                    });
+                    d3.event.stopPropagation();
+                });
+
+            if (getYerr(data[0],0)) {
+                barsEnter.append('polyline');
+
+                bars.select('polyline')
+                    .attr('fill', 'none')
+                    .attr('points', function(d,i) {
+                        var xerr = getYerr(d,i)
+                            , mid = 0.8 * x.rangeBand() / ((stacked ? 1 : data.length) * 2);
+                        xerr = xerr.length ? xerr : [-Math.abs(xerr), Math.abs(xerr)];
+                        xerr = xerr.map(function(e) { return y(e) - y(0); });
+                        var a = [[xerr[0],-mid], [xerr[0],mid], [xerr[0],0], [xerr[1],0], [xerr[1],-mid], [xerr[1],mid]];
+                        return a.map(function (path) { return path.join(',') }).join(' ');
+                    })
+                    .attr('transform', function(d,i) {
+                        var mid = x.rangeBand() / ((stacked ? 1 : data.length) * 2);
+                        return 'translate(' + (getY(d,i) < 0 ? 0 : y(getY(d,i)) - y(0)) + ', ' + mid + ')'
+                    });
+            }
+
+            barsEnter.append('text');
+
+            if (showValues && !stacked) {
+                bars.select('text')
+                    .attr('text-anchor', function(d,i) { return getY(d,i) < 0 ? 'end' : 'start' })
+                    .attr('y', x.rangeBand() / (data.length * 2))
+                    .attr('dy', '.32em')
+                    .text(function(d,i) {
+                        var t = valueFormat(getY(d,i))
+                            , yerr = getYerr(d,i);
+                        if (yerr === undefined)
+                            return t;
+                        if (!yerr.length)
+                            return t + '±' + valueFormat(Math.abs(yerr));
+                        return t + '+' + valueFormat(Math.abs(yerr[1])) + '-' + valueFormat(Math.abs(yerr[0]));
+                    });
+                bars.watchTransition(renderWatch, 'multibarhorizontal: bars')
+                    .select('text')
+                    .attr('x', function(d,i) { return getY(d,i) < 0 ? -4 : y(getY(d,i)) - y(0) + 4 })
+            } else {
+                bars.selectAll('text').text('');
+            }
+
+            if (showBarLabels && !stacked) {
+                barsEnter.append('text').classed('nv-bar-label',true);
+                bars.select('text.nv-bar-label')
+                    .attr('text-anchor', function(d,i) { return getY(d,i) < 0 ? 'start' : 'end' })
+                    .attr('y', x.rangeBand() / (data.length * 2))
+                    .attr('dy', '.32em')
+                    .text(function(d,i) { return getX(d,i) });
+                bars.watchTransition(renderWatch, 'multibarhorizontal: bars')
+                    .select('text.nv-bar-label')
+                    .attr('x', function(d,i) { return getY(d,i) < 0 ? y(0) - y(getY(d,i)) + 4 : -4 });
+            }
+            else {
+                bars.selectAll('text.nv-bar-label').text('');
+            }
+
+            bars
+                .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
+
+            if (barColor) {
+                if (!disabled) disabled = data.map(function() { return true });
+                bars
+                    .style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(  disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i]  })[j]   ).toString(); })
+                    .style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(  disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i]  })[j]   ).toString(); });
+            }
+
+            if (stacked)
+                bars.watchTransition(renderWatch, 'multibarhorizontal: bars')
+                    .attr('transform', function(d,i) {
+                        return 'translate(' + y(d.y1) + ',' + x(getX(d,i)) + ')'
+                    })
+                    .select('rect')
+                    .attr('width', function(d,i) {
+                        return Math.abs(y(getY(d,i) + d.y0) - y(d.y0)) || 0
+                    })
+                    .attr('height', x.rangeBand() );
+            else
+                bars.watchTransition(renderWatch, 'multibarhorizontal: bars')
+                    .attr('transform', function(d,i) {
+                        //TODO: stacked must be all positive or all negative, not both?
+                        return 'translate(' +
+                            (getY(d,i) < 0 ? y(getY(d,i)) : y(0))
+                            + ',' +
+                            (d.series * x.rangeBand() / data.length
+                                +
+                                x(getX(d,i)) )
+                            + ')'
+                    })
+                    .select('rect')
+                    .attr('height', x.rangeBand() / data.length )
+                    .attr('width', function(d,i) {
+                        return Math.max(Math.abs(y(getY(d,i)) - y(0)),1) || 0
+                    });
+
+            //store old scales for use in transitions on update
+            x0 = x.copy();
+            y0 = y.copy();
+
+        });
+
+        renderWatch.renderEnd('multibarHorizontal immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:   {get: function(){return width;}, set: function(_){width=_;}},
+        height:  {get: function(){return height;}, set: function(_){height=_;}},
+        x:       {get: function(){return getX;}, set: function(_){getX=_;}},
+        y:       {get: function(){return getY;}, set: function(_){getY=_;}},
+        yErr:       {get: function(){return getYerr;}, set: function(_){getYerr=_;}},
+        xScale:  {get: function(){return x;}, set: function(_){x=_;}},
+        yScale:  {get: function(){return y;}, set: function(_){y=_;}},
+        xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
+        yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
+        xRange:  {get: function(){return xRange;}, set: function(_){xRange=_;}},
+        yRange:  {get: function(){return yRange;}, set: function(_){yRange=_;}},
+        forceY:  {get: function(){return forceY;}, set: function(_){forceY=_;}},
+        stacked: {get: function(){return stacked;}, set: function(_){stacked=_;}},
+        showValues: {get: function(){return showValues;}, set: function(_){showValues=_;}},
+        // this shows the group name, seems pointless?
+        //showBarLabels:    {get: function(){return showBarLabels;}, set: function(_){showBarLabels=_;}},
+        disabled:     {get: function(){return disabled;}, set: function(_){disabled=_;}},
+        id:           {get: function(){return id;}, set: function(_){id=_;}},
+        valueFormat:  {get: function(){return valueFormat;}, set: function(_){valueFormat=_;}},
+        valuePadding: {get: function(){return valuePadding;}, set: function(_){valuePadding=_;}},
+        groupSpacing:{get: function(){return groupSpacing;}, set: function(_){groupSpacing=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }},
+        barColor:  {get: function(){return barColor;}, set: function(_){
+            barColor = _ ? nv.utils.getColor(_) : null;
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+
+nv.models.multiBarHorizontalChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var multibar = nv.models.multiBarHorizontal()
+        , xAxis = nv.models.axis()
+        , yAxis = nv.models.axis()
+        , legend = nv.models.legend().height(30)
+        , controls = nv.models.legend().height(30)
+        , tooltip = nv.models.tooltip()
+        ;
+
+    var margin = {top: 30, right: 20, bottom: 50, left: 60}
+        , width = null
+        , height = null
+        , color = nv.utils.defaultColor()
+        , showControls = true
+        , controlLabels = {}
+        , showLegend = true
+        , showXAxis = true
+        , showYAxis = true
+        , stacked = false
+        , x //can be accessed via chart.xScale()
+        , y //can be accessed via chart.yScale()
+        , state = nv.utils.state()
+        , defaultState = null
+        , noData = null
+        , dispatch = d3.dispatch('stateChange', 'changeState','renderEnd')
+        , controlWidth = function() { return showControls ? 180 : 0 }
+        , duration = 250
+        ;
+
+    state.stacked = false; // DEPRECATED Maintained for backward compatibility
+
+    multibar.stacked(stacked);
+
+    xAxis
+        .orient('left')
+        .tickPadding(5)
+        .showMaxMin(false)
+        .tickFormat(function(d) { return d })
+    ;
+    yAxis
+        .orient('bottom')
+        .tickFormat(d3.format(',.1f'))
+    ;
+
+    tooltip
+        .duration(0)
+        .valueFormatter(function(d, i) {
+            return yAxis.tickFormat()(d, i);
+        })
+        .headerFormatter(function(d, i) {
+            return xAxis.tickFormat()(d, i);
+        });
+
+    controls.updateState(false);
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var stateGetter = function(data) {
+        return function(){
+            return {
+                active: data.map(function(d) { return !d.disabled }),
+                stacked: stacked
+            };
+        }
+    };
+
+    var stateSetter = function(data) {
+        return function(state) {
+            if (state.stacked !== undefined)
+                stacked = state.stacked;
+            if (state.active !== undefined)
+                data.forEach(function(series,i) {
+                    series.disabled = !state.active[i];
+                });
+        }
+    };
+
+    var renderWatch = nv.utils.renderWatch(dispatch, duration);
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(multibar);
+        if (showXAxis) renderWatch.models(xAxis);
+        if (showYAxis) renderWatch.models(yAxis);
+
+        selection.each(function(data) {
+            var container = d3.select(this),
+                that = this;
+            nv.utils.initSVG(container);
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            chart.update = function() { container.transition().duration(duration).call(chart) };
+            chart.container = this;
+
+            stacked = multibar.stacked();
+
+            state
+                .setter(stateSetter(data), chart.update)
+                .getter(stateGetter(data))
+                .update();
+
+            // DEPRECATED set state.disableddisabled
+            state.disabled = data.map(function(d) { return !!d.disabled });
+
+            if (!defaultState) {
+                var key;
+                defaultState = {};
+                for (key in state) {
+                    if (state[key] instanceof Array)
+                        defaultState[key] = state[key].slice(0);
+                    else
+                        defaultState[key] = state[key];
+                }
+            }
+
+            // Display No Data message if there's nothing to show.
+            if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
+                nv.utils.noData(chart, container)
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            // Setup Scales
+            x = multibar.xScale();
+            y = multibar.yScale().clamp(true);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-multiBarHorizontalChart').data([data]);
+            var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multiBarHorizontalChart').append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-x nv-axis');
+            gEnter.append('g').attr('class', 'nv-y nv-axis')
+                .append('g').attr('class', 'nv-zeroLine')
+                .append('line');
+            gEnter.append('g').attr('class', 'nv-barsWrap');
+            gEnter.append('g').attr('class', 'nv-legendWrap');
+            gEnter.append('g').attr('class', 'nv-controlsWrap');
+
+            // Legend
+            if (showLegend) {
+                legend.width(availableWidth - controlWidth());
+
+                g.select('.nv-legendWrap')
+                    .datum(data)
+                    .call(legend);
+
+                if ( margin.top != legend.height()) {
+                    margin.top = legend.height();
+                    availableHeight = nv.utils.availableHeight(height, container, margin);
+                }
+
+                g.select('.nv-legendWrap')
+                    .attr('transform', 'translate(' + controlWidth() + ',' + (-margin.top) +')');
+            }
+
+            // Controls
+            if (showControls) {
+                var controlsData = [
+                    { key: controlLabels.grouped || 'Grouped', disabled: multibar.stacked() },
+                    { key: controlLabels.stacked || 'Stacked', disabled: !multibar.stacked() }
+                ];
+
+                controls.width(controlWidth()).color(['#444', '#444', '#444']);
+                g.select('.nv-controlsWrap')
+                    .datum(controlsData)
+                    .attr('transform', 'translate(0,' + (-margin.top) +')')
+                    .call(controls);
+            }
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            // Main Chart Component(s)
+            multibar
+                .disabled(data.map(function(series) { return series.disabled }))
+                .width(availableWidth)
+                .height(availableHeight)
+                .color(data.map(function(d,i) {
+                    return d.color || color(d, i);
+                }).filter(function(d,i) { return !data[i].disabled }));
+
+            var barsWrap = g.select('.nv-barsWrap')
+                .datum(data.filter(function(d) { return !d.disabled }));
+
+            barsWrap.transition().call(multibar);
+
+            // Setup Axes
+            if (showXAxis) {
+                xAxis
+                    .scale(x)
+                    ._ticks( nv.utils.calcTicksY(availableHeight/24, data) )
+                    .tickSize(-availableWidth, 0);
+
+                g.select('.nv-x.nv-axis').call(xAxis);
+
+                var xTicks = g.select('.nv-x.nv-axis').selectAll('g');
+
+                xTicks
+                    .selectAll('line, text');
+            }
+
+            if (showYAxis) {
+                yAxis
+                    .scale(y)
+                    ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
+                    .tickSize( -availableHeight, 0);
+
+                g.select('.nv-y.nv-axis')
+                    .attr('transform', 'translate(0,' + availableHeight + ')');
+                g.select('.nv-y.nv-axis').call(yAxis);
+            }
+
+            // Zero line
+            g.select(".nv-zeroLine line")
+                .attr("x1", y(0))
+                .attr("x2", y(0))
+                .attr("y1", 0)
+                .attr("y2", -availableHeight)
+            ;
+
+            //============================================================
+            // Event Handling/Dispatching (in chart's scope)
+            //------------------------------------------------------------
+
+            legend.dispatch.on('stateChange', function(newState) {
+                for (var key in newState)
+                    state[key] = newState[key];
+                dispatch.stateChange(state);
+                chart.update();
+            });
+
+            controls.dispatch.on('legendClick', function(d,i) {
+                if (!d.disabled) return;
+                controlsData = controlsData.map(function(s) {
+                    s.disabled = true;
+                    return s;
+                });
+                d.disabled = false;
+
+                switch (d.key) {
+                    case 'Grouped':
+                    case controlLabels.grouped:
+                        multibar.stacked(false);
+                        break;
+                    case 'Stacked':
+                    case controlLabels.stacked:
+                        multibar.stacked(true);
+                        break;
+                }
+
+                state.stacked = multibar.stacked();
+                dispatch.stateChange(state);
+                stacked = multibar.stacked();
+
+                chart.update();
+            });
+
+            // Update chart from a state object passed to event handler
+            dispatch.on('changeState', function(e) {
+
+                if (typeof e.disabled !== 'undefined') {
+                    data.forEach(function(series,i) {
+                        series.disabled = e.disabled[i];
+                    });
+
+                    state.disabled = e.disabled;
+                }
+
+                if (typeof e.stacked !== 'undefined') {
+                    multibar.stacked(e.stacked);
+                    state.stacked = e.stacked;
+                    stacked = e.stacked;
+                }
+
+                chart.update();
+            });
+        });
+        renderWatch.renderEnd('multibar horizontal chart immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Event Handling/Dispatching (out of chart's scope)
+    //------------------------------------------------------------
+
+    multibar.dispatch.on('elementMouseover.tooltip', function(evt) {
+        evt.value = chart.x()(evt.data);
+        evt['series'] = {
+            key: evt.data.key,
+            value: chart.y()(evt.data),
+            color: evt.color
+        };
+        tooltip.data(evt).hidden(false);
+    });
+
+    multibar.dispatch.on('elementMouseout.tooltip', function(evt) {
+        tooltip.hidden(true);
+    });
+
+    multibar.dispatch.on('elementMousemove.tooltip', function(evt) {
+        tooltip();
+    });
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    // expose chart's sub-components
+    chart.dispatch = dispatch;
+    chart.multibar = multibar;
+    chart.legend = legend;
+    chart.controls = controls;
+    chart.xAxis = xAxis;
+    chart.yAxis = yAxis;
+    chart.state = state;
+    chart.tooltip = tooltip;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
+        showControls: {get: function(){return showControls;}, set: function(_){showControls=_;}},
+        controlLabels: {get: function(){return controlLabels;}, set: function(_){controlLabels=_;}},
+        showXAxis:      {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
+        showYAxis:    {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
+        defaultState:    {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
+        noData:    {get: function(){return noData;}, set: function(_){noData=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+            multibar.duration(duration);
+            xAxis.duration(duration);
+            yAxis.duration(duration);
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+            legend.color(color);
+        }},
+        barColor:  {get: function(){return multibar.barColor;}, set: function(_){
+            multibar.barColor(_);
+            legend.color(function(d,i) {return d3.rgb('#ccc').darker(i * 1.5).toString();})
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, multibar);
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+nv.models.multiChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 30, right: 20, bottom: 50, left: 60},
+        color = nv.utils.defaultColor(),
+        width = null,
+        height = null,
+        showLegend = true,
+        noData = null,
+        yDomain1,
+        yDomain2,
+        getX = function(d) { return d.x },
+        getY = function(d) { return d.y},
+        interpolate = 'monotone',
+        useVoronoi = true,
+        interactiveLayer = nv.interactiveGuideline(),
+        useInteractiveGuideline = false,
+        legendRightAxisHint = ' (right axis)'
+        ;
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var x = d3.scale.linear(),
+        yScale1 = d3.scale.linear(),
+        yScale2 = d3.scale.linear(),
+
+        lines1 = nv.models.line().yScale(yScale1),
+        lines2 = nv.models.line().yScale(yScale2),
+
+        scatters1 = nv.models.scatter().yScale(yScale1),
+        scatters2 = nv.models.scatter().yScale(yScale2),
+
+        bars1 = nv.models.multiBar().stacked(false).yScale(yScale1),
+        bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),
+
+        stack1 = nv.models.stackedArea().yScale(yScale1),
+        stack2 = nv.models.stackedArea().yScale(yScale2),
+
+        xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
+        yAxis1 = nv.models.axis().scale(yScale1).orient('left'),
+        yAxis2 = nv.models.axis().scale(yScale2).orient('right'),
+
+        legend = nv.models.legend().height(30),
+        tooltip = nv.models.tooltip(),
+        dispatch = d3.dispatch();
+
+    var charts = [lines1, lines2, scatters1, scatters2, bars1, bars2, stack1, stack2];
+
+    function chart(selection) {
+        selection.each(function(data) {
+            var container = d3.select(this),
+                that = this;
+            nv.utils.initSVG(container);
+
+            chart.update = function() { container.transition().call(chart); };
+            chart.container = this;
+
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            var dataLines1 = data.filter(function(d) {return d.type == 'line' && d.yAxis == 1});
+            var dataLines2 = data.filter(function(d) {return d.type == 'line' && d.yAxis == 2});
+            var dataScatters1 = data.filter(function(d) {return d.type == 'scatter' && d.yAxis == 1});
+            var dataScatters2 = data.filter(function(d) {return d.type == 'scatter' && d.yAxis == 2});
+            var dataBars1 =  data.filter(function(d) {return d.type == 'bar'  && d.yAxis == 1});
+            var dataBars2 =  data.filter(function(d) {return d.type == 'bar'  && d.yAxis == 2});
+            var dataStack1 = data.filter(function(d) {return d.type == 'area' && d.yAxis == 1});
+            var dataStack2 = data.filter(function(d) {return d.type == 'area' && d.yAxis == 2});
+
+            // Display noData message if there's nothing to show.
+            if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
+                nv.utils.noData(chart, container);
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            var series1 = data.filter(function(d) {return !d.disabled && d.yAxis == 1})
+                .map(function(d) {
+                    return d.values.map(function(d,i) {
+                        return { x: getX(d), y: getY(d) }
+                    })
+                });
+
+            var series2 = data.filter(function(d) {return !d.disabled && d.yAxis == 2})
+                .map(function(d) {
+                    return d.values.map(function(d,i) {
+                        return { x: getX(d), y: getY(d) }
+                    })
+                });
+
+            x   .domain(d3.extent(d3.merge(series1.concat(series2)), function(d) { return getX(d) }))
+                .range([0, availableWidth]);
+
+            var wrap = container.selectAll('g.wrap.multiChart').data([data]);
+            var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multiChart').append('g');
+
+            gEnter.append('g').attr('class', 'nv-x nv-axis');
+            gEnter.append('g').attr('class', 'nv-y1 nv-axis');
+            gEnter.append('g').attr('class', 'nv-y2 nv-axis');
+            gEnter.append('g').attr('class', 'stack1Wrap');
+            gEnter.append('g').attr('class', 'stack2Wrap');
+            gEnter.append('g').attr('class', 'bars1Wrap');
+            gEnter.append('g').attr('class', 'bars2Wrap');
+            gEnter.append('g').attr('class', 'scatters1Wrap');
+            gEnter.append('g').attr('class', 'scatters2Wrap');
+            gEnter.append('g').attr('class', 'lines1Wrap');
+            gEnter.append('g').attr('class', 'lines2Wrap');
+            gEnter.append('g').attr('class', 'legendWrap');
+            gEnter.append('g').attr('class', 'nv-interactive');
+
+            var g = wrap.select('g');
+
+            var color_array = data.map(function(d,i) {
+                return data[i].color || color(d, i);
+            });
+
+            if (showLegend) {
+                var legendWidth = legend.align() ? availableWidth / 2 : availableWidth;
+                var legendXPosition = legend.align() ? legendWidth : 0;
+
+                legend.width(legendWidth);
+                legend.color(color_array);
+
+                g.select('.legendWrap')
+                    .datum(data.map(function(series) {
+                        series.originalKey = series.originalKey === undefined ? series.key : series.originalKey;
+                        series.key = series.originalKey + (series.yAxis == 1 ? '' : legendRightAxisHint);
+                        return series;
+                    }))
+                    .call(legend);
+
+                if ( margin.top != legend.height()) {
+                    margin.top = legend.height();
+                    availableHeight = nv.utils.availableHeight(height, container, margin);
+                }
+
+                g.select('.legendWrap')
+                    .attr('transform', 'translate(' + legendXPosition + ',' + (-margin.top) +')');
+            }
+
+            lines1
+                .width(availableWidth)
+                .height(availableHeight)
+                .interpolate(interpolate)
+                .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'line'}));
+            lines2
+                .width(availableWidth)
+                .height(availableHeight)
+                .interpolate(interpolate)
+                .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'line'}));
+            scatters1
+                .width(availableWidth)
+                .height(availableHeight)
+                .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'scatter'}));
+            scatters2
+                .width(availableWidth)
+                .height(availableHeight)
+                .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'scatter'}));
+            bars1
+                .width(availableWidth)
+                .height(availableHeight)
+                .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'bar'}));
+            bars2
+                .width(availableWidth)
+                .height(availableHeight)
+                .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'bar'}));
+            stack1
+                .width(availableWidth)
+                .height(availableHeight)
+                .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'area'}));
+            stack2
+                .width(availableWidth)
+                .height(availableHeight)
+                .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'area'}));
+
+            g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            var lines1Wrap = g.select('.lines1Wrap')
+                .datum(dataLines1.filter(function(d){return !d.disabled}));
+            var scatters1Wrap = g.select('.scatters1Wrap')
+                .datum(dataScatters1.filter(function(d){return !d.disabled}));
+            var bars1Wrap = g.select('.bars1Wrap')
+                .datum(dataBars1.filter(function(d){return !d.disabled}));
+            var stack1Wrap = g.select('.stack1Wrap')
+                .datum(dataStack1.filter(function(d){return !d.disabled}));
+            var lines2Wrap = g.select('.lines2Wrap')
+                .datum(dataLines2.filter(function(d){return !d.disabled}));
+            var scatters2Wrap = g.select('.scatters2Wrap')
+                .datum(dataScatters2.filter(function(d){return !d.disabled}));
+            var bars2Wrap = g.select('.bars2Wrap')
+                .datum(dataBars2.filter(function(d){return !d.disabled}));
+            var stack2Wrap = g.select('.stack2Wrap')
+                .datum(dataStack2.filter(function(d){return !d.disabled}));
+
+            var extraValue1 = dataStack1.length ? dataStack1.map(function(a){return a.values}).reduce(function(a,b){
+                return a.map(function(aVal,i){return {x: aVal.x, y: aVal.y + b[i].y}})
+            }).concat([{x:0, y:0}]) : [];
+            var extraValue2 = dataStack2.length ? dataStack2.map(function(a){return a.values}).reduce(function(a,b){
+                return a.map(function(aVal,i){return {x: aVal.x, y: aVal.y + b[i].y}})
+            }).concat([{x:0, y:0}]) : [];
+
+            yScale1 .domain(yDomain1 || d3.extent(d3.merge(series1).concat(extraValue1), function(d) { return d.y } ))
+                .range([0, availableHeight]);
+
+            yScale2 .domain(yDomain2 || d3.extent(d3.merge(series2).concat(extraValue2), function(d) { return d.y } ))
+                .range([0, availableHeight]);
+
+            lines1.yDomain(yScale1.domain());
+            scatters1.yDomain(yScale1.domain());
+            bars1.yDomain(yScale1.domain());
+            stack1.yDomain(yScale1.domain());
+
+            lines2.yDomain(yScale2.domain());
+            scatters2.yDomain(yScale2.domain());
+            bars2.yDomain(yScale2.domain());
+            stack2.yDomain(yScale2.domain());
+
+            if(dataStack1.length){d3.transition(stack1Wrap).call(stack1);}
+            if(dataStack2.length){d3.transition(stack2Wrap).call(stack2);}
+
+            if(dataBars1.length){d3.transition(bars1Wrap).call(bars1);}
+            if(dataBars2.length){d3.transition(bars2Wrap).call(bars2);}
+
+            if(dataLines1.length){d3.transition(lines1Wrap).call(lines1);}
+            if(dataLines2.length){d3.transition(lines2Wrap).call(lines2);}
+
+            if(dataScatters1.length){d3.transition(scatters1Wrap).call(scatters1);}
+            if(dataScatters2.length){d3.transition(scatters2Wrap).call(scatters2);}
+
+            xAxis
+                ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
+                .tickSize(-availableHeight, 0);
+
+            g.select('.nv-x.nv-axis')
+                .attr('transform', 'translate(0,' + availableHeight + ')');
+            d3.transition(g.select('.nv-x.nv-axis'))
+                .call(xAxis);
+
+            yAxis1
+                ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
+                .tickSize( -availableWidth, 0);
+
+
+            d3.transition(g.select('.nv-y1.nv-axis'))
+                .call(yAxis1);
+
+            yAxis2
+                ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
+                .tickSize( -availableWidth, 0);
+
+            d3.transition(g.select('.nv-y2.nv-axis'))
+                .call(yAxis2);
+
+            g.select('.nv-y1.nv-axis')
+                .classed('nv-disabled', series1.length ? false : true)
+                .attr('transform', 'translate(' + x.range()[0] + ',0)');
+
+            g.select('.nv-y2.nv-axis')
+                .classed('nv-disabled', series2.length ? false : true)
+                .attr('transform', 'translate(' + x.range()[1] + ',0)');
+
+            legend.dispatch.on('stateChange', function(newState) {
+                chart.update();
+            });
+
+            if(useInteractiveGuideline){
+                interactiveLayer
+                    .width(availableWidth)
+                    .height(availableHeight)
+                    .margin({left:margin.left, top:margin.top})
+                    .svgContainer(container)
+                    .xScale(x);
+                wrap.select(".nv-interactive").call(interactiveLayer);
+            }
+
+            //============================================================
+            // Event Handling/Dispatching
+            //------------------------------------------------------------
+
+            function mouseover_line(evt) {
+                var yaxis = data[evt.seriesIndex].yAxis === 2 ? yAxis2 : yAxis1;
+                evt.value = evt.point.x;
+                evt.series = {
+                    value: evt.point.y,
+                    color: evt.point.color,
+                    key: evt.series.key
+                };
+                tooltip
+                    .duration(0)
+                    .valueFormatter(function(d, i) {
+                        return yaxis.tickFormat()(d, i);
+                    })
+                    .data(evt)
+                    .hidden(false);
+            }
+
+            function mouseover_scatter(evt) {
+                var yaxis = data[evt.seriesIndex].yAxis === 2 ? yAxis2 : yAxis1;
+                evt.value = evt.point.x;
+                evt.series = {
+                    value: evt.point.y,
+                    color: evt.point.color,
+                    key: evt.series.key
+                };
+                tooltip
+                    .duration(100)
+                    .valueFormatter(function(d, i) {
+                        return yaxis.tickFormat()(d, i);
+                    })
+                    .data(evt)
+                    .hidden(false);
+            }
+
+            function mouseover_stack(evt) {
+                var yaxis = data[evt.seriesIndex].yAxis === 2 ? yAxis2 : yAxis1;
+                evt.point['x'] = stack1.x()(evt.point);
+                evt.point['y'] = stack1.y()(evt.point);
+                tooltip
+                    .duration(0)
+                    .valueFormatter(function(d, i) {
+                        return yaxis.tickFormat()(d, i);
+                    })
+                    .data(evt)
+                    .hidden(false);
+            }
+
+            function mouseover_bar(evt) {
+                var yaxis = data[evt.data.series].yAxis === 2 ? yAxis2 : yAxis1;
+
+                evt.value = bars1.x()(evt.data);
+                evt['series'] = {
+                    value: bars1.y()(evt.data),
+                    color: evt.color,
+                    key: evt.data.key
+                };
+                tooltip
+                    .duration(0)
+                    .valueFormatter(function(d, i) {
+                        return yaxis.tickFormat()(d, i);
+                    })
+                    .data(evt)
+                    .hidden(false);
+            }
+
+
+
+            function clearHighlights() {
+              for(var i=0, il=charts.length; i < il; i++){
+                var chart = charts[i];
+                try {
+                  chart.clearHighlights();
+                } catch(e){}
+              }
+            }
+
+            function highlightPoint(serieIndex, pointIndex, b){
+              for(var i=0, il=charts.length; i < il; i++){
+                var chart = charts[i];
+                try {
+                  chart.highlightPoint(serieIndex, pointIndex, b);
+                } catch(e){}
+              }
+            }
+
+            if(useInteractiveGuideline){
+                interactiveLayer.dispatch.on('elementMousemove', function(e) {
+                    clearHighlights();
+                    var singlePoint, pointIndex, pointXLocation, allData = [];
+                    data
+                    .filter(function(series, i) {
+                        series.seriesIndex = i;
+                        return !series.disabled;
+                    })
+                    .forEach(function(series,i) {
+                        var extent = x.domain();
+                        var currentValues = series.values.filter(function(d,i) {
+                            return chart.x()(d,i) >= extent[0] && chart.x()(d,i) <= extent[1];
+                        });
+
+                        pointIndex = nv.interactiveBisect(currentValues, e.pointXValue, chart.x());
+                        var point = currentValues[pointIndex];
+                        var pointYValue = chart.y()(point, pointIndex);
+                        if (pointYValue !== null) {
+                            highlightPoint(i, pointIndex, true);
+                        }
+                        if (point === undefined) return;
+                        if (singlePoint === undefined) singlePoint = point;
+                        if (pointXLocation === undefined) pointXLocation = x(chart.x()(point,pointIndex));
+                        allData.push({
+                            key: series.key,
+                            value: pointYValue,
+                            color: color(series,series.seriesIndex),
+                            data: point,
+                            yAxis: series.yAxis == 2 ? yAxis2 : yAxis1
+                        });
+                    });
+
+                    interactiveLayer.tooltip
+                    .chartContainer(chart.container.parentNode)
+                    .valueFormatter(function(d,i) {
+                        var yAxis = allData[i].yAxis;
+                        return d === null ? "N/A" : yAxis.tickFormat()(d);
+                    })
+                    .data({
+                        value: chart.x()( singlePoint,pointIndex ),
+                        index: pointIndex,
+                        series: allData
+                    })();
+
+                    interactiveLayer.renderGuideLine(pointXLocation);
+                });
+
+                interactiveLayer.dispatch.on("elementMouseout",function(e) {
+                    clearHighlights();
+                });
+            } else {
+                lines1.dispatch.on('elementMouseover.tooltip', mouseover_line);
+                lines2.dispatch.on('elementMouseover.tooltip', mouseover_line);
+                lines1.dispatch.on('elementMouseout.tooltip', function(evt) {
+                    tooltip.hidden(true)
+                });
+                lines2.dispatch.on('elementMouseout.tooltip', function(evt) {
+                    tooltip.hidden(true)
+                });
+
+                scatters1.dispatch.on('elementMouseover.tooltip', mouseover_scatter);
+                scatters2.dispatch.on('elementMouseover.tooltip', mouseover_scatter);
+                scatters1.dispatch.on('elementMouseout.tooltip', function(evt) {
+                    tooltip.hidden(true)
+                });
+                scatters2.dispatch.on('elementMouseout.tooltip', function(evt) {
+                    tooltip.hidden(true)
+                });
+
+                stack1.dispatch.on('elementMouseover.tooltip', mouseover_stack);
+                stack2.dispatch.on('elementMouseover.tooltip', mouseover_stack);
+                stack1.dispatch.on('elementMouseout.tooltip', function(evt) {
+                    tooltip.hidden(true)
+                });
+                stack2.dispatch.on('elementMouseout.tooltip', function(evt) {
+                    tooltip.hidden(true)
+                });
+
+                bars1.dispatch.on('elementMouseover.tooltip', mouseover_bar);
+                bars2.dispatch.on('elementMouseover.tooltip', mouseover_bar);
+
+                bars1.dispatch.on('elementMouseout.tooltip', function(evt) {
+                    tooltip.hidden(true);
+                });
+                bars2.dispatch.on('elementMouseout.tooltip', function(evt) {
+                    tooltip.hidden(true);
+                });
+                bars1.dispatch.on('elementMousemove.tooltip', function(evt) {
+                    tooltip();
+                });
+                bars2.dispatch.on('elementMousemove.tooltip', function(evt) {
+                    tooltip();
+                });
+            }
+        });
+
+        return chart;
+    }
+
+    //============================================================
+    // Global getters and setters
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.legend = legend;
+    chart.lines1 = lines1;
+    chart.lines2 = lines2;
+    chart.scatters1 = scatters1;
+    chart.scatters2 = scatters2;
+    chart.bars1 = bars1;
+    chart.bars2 = bars2;
+    chart.stack1 = stack1;
+    chart.stack2 = stack2;
+    chart.xAxis = xAxis;
+    chart.yAxis1 = yAxis1;
+    chart.yAxis2 = yAxis2;
+    chart.tooltip = tooltip;
+    chart.interactiveLayer = interactiveLayer;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
+        yDomain1:      {get: function(){return yDomain1;}, set: function(_){yDomain1=_;}},
+        yDomain2:    {get: function(){return yDomain2;}, set: function(_){yDomain2=_;}},
+        noData:    {get: function(){return noData;}, set: function(_){noData=_;}},
+        interpolate:    {get: function(){return interpolate;}, set: function(_){interpolate=_;}},
+        legendRightAxisHint:    {get: function(){return legendRightAxisHint;}, set: function(_){legendRightAxisHint=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }},
+        x: {get: function(){return getX;}, set: function(_){
+            getX = _;
+            lines1.x(_);
+            lines2.x(_);
+            scatters1.x(_);
+            scatters2.x(_);
+            bars1.x(_);
+            bars2.x(_);
+            stack1.x(_);
+            stack2.x(_);
+        }},
+        y: {get: function(){return getY;}, set: function(_){
+            getY = _;
+            lines1.y(_);
+            lines2.y(_);
+            scatters1.y(_);
+            scatters2.y(_);
+            stack1.y(_);
+            stack2.y(_);
+            bars1.y(_);
+            bars2.y(_);
+        }},
+        useVoronoi: {get: function(){return useVoronoi;}, set: function(_){
+            useVoronoi=_;
+            lines1.useVoronoi(_);
+            lines2.useVoronoi(_);
+            stack1.useVoronoi(_);
+            stack2.useVoronoi(_);
+        }},
+
+        useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){
+            useInteractiveGuideline = _;
+            if (useInteractiveGuideline) {
+                lines1.interactive(false);
+                lines1.useVoronoi(false);
+                lines2.interactive(false);
+                lines2.useVoronoi(false);
+                stack1.interactive(false);
+                stack1.useVoronoi(false);
+                stack2.interactive(false);
+                stack2.useVoronoi(false);
+                scatters1.interactive(false);
+                scatters2.interactive(false);
+            }
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+
+nv.models.ohlcBar = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , width = null
+        , height = null
+        , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
+        , container = null
+        , x = d3.scale.linear()
+        , y = d3.scale.linear()
+        , getX = function(d) { return d.x }
+        , getY = function(d) { return d.y }
+        , getOpen = function(d) { return d.open }
+        , getClose = function(d) { return d.close }
+        , getHigh = function(d) { return d.high }
+        , getLow = function(d) { return d.low }
+        , forceX = []
+        , forceY = []
+        , padData     = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart
+        , clipEdge = true
+        , color = nv.utils.defaultColor()
+        , interactive = false
+        , xDomain
+        , yDomain
+        , xRange
+        , yRange
+        , dispatch = d3.dispatch('stateChange', 'changeState', 'renderEnd', 'chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove')
+        ;
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    function chart(selection) {
+        selection.each(function(data) {
+            container = d3.select(this);
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            nv.utils.initSVG(container);
+
+            // ohlc bar width.
+            var w = (availableWidth / data[0].values.length) * .9;
+
+            // Setup Scales
+            x.domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ));
+
+            if (padData)
+                x.range(xRange || [availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5)  / data[0].values.length ]);
+            else
+                x.range(xRange || [5 + w/2, availableWidth - w/2 - 5]);
+
+            y.domain(yDomain || [
+                    d3.min(data[0].values.map(getLow).concat(forceY)),
+                    d3.max(data[0].values.map(getHigh).concat(forceY))
+                ]
+            ).range(yRange || [availableHeight, 0]);
+
+            // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
+            if (x.domain()[0] === x.domain()[1])
+                x.domain()[0] ?
+                    x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
+                    : x.domain([-1,1]);
+
+            if (y.domain()[0] === y.domain()[1])
+                y.domain()[0] ?
+                    y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
+                    : y.domain([-1,1]);
+
+            // Setup containers and skeleton of chart
+            var wrap = d3.select(this).selectAll('g.nv-wrap.nv-ohlcBar').data([data[0].values]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-ohlcBar');
+            var defsEnter = wrapEnter.append('defs');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-ticks');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            container
+                .on('click', function(d,i) {
+                    dispatch.chartClick({
+                        data: d,
+                        index: i,
+                        pos: d3.event,
+                        id: id
+                    });
+                });
+
+            defsEnter.append('clipPath')
+                .attr('id', 'nv-chart-clip-path-' + id)
+                .append('rect');
+
+            wrap.select('#nv-chart-clip-path-' + id + ' rect')
+                .attr('width', availableWidth)
+                .attr('height', availableHeight);
+
+            g   .attr('clip-path', clipEdge ? 'url(#nv-chart-clip-path-' + id + ')' : '');
+
+            var ticks = wrap.select('.nv-ticks').selectAll('.nv-tick')
+                .data(function(d) { return d });
+            ticks.exit().remove();
+
+            ticks.enter().append('path')
+                .attr('class', function(d,i,j) { return (getOpen(d,i) > getClose(d,i) ? 'nv-tick negative' : 'nv-tick positive') + ' nv-tick-' + j + '-' + i })
+                .attr('d', function(d,i) {
+                    return 'm0,0l0,'
+                        + (y(getOpen(d,i))
+                            - y(getHigh(d,i)))
+                        + 'l'
+                        + (-w/2)
+                        + ',0l'
+                        + (w/2)
+                        + ',0l0,'
+                        + (y(getLow(d,i)) - y(getOpen(d,i)))
+                        + 'l0,'
+                        + (y(getClose(d,i))
+                            - y(getLow(d,i)))
+                        + 'l'
+                        + (w/2)
+                        + ',0l'
+                        + (-w/2)
+                        + ',0z';
+                })
+                .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',' + y(getHigh(d,i)) + ')'; })
+                .attr('fill', function(d,i) { return color[0]; })
+                .attr('stroke', function(d,i) { return color[0]; })
+                .attr('x', 0 )
+                .attr('y', function(d,i) {  return y(Math.max(0, getY(d,i))) })
+                .attr('height', function(d,i) { return Math.abs(y(getY(d,i)) - y(0)) });
+
+            // the bar colors are controlled by CSS currently
+            ticks.attr('class', function(d,i,j) {
+                return (getOpen(d,i) > getClose(d,i) ? 'nv-tick negative' : 'nv-tick positive') + ' nv-tick-' + j + '-' + i;
+            });
+
+            d3.transition(ticks)
+                .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',' + y(getHigh(d,i)) + ')'; })
+                .attr('d', function(d,i) {
+                    var w = (availableWidth / data[0].values.length) * .9;
+                    return 'm0,0l0,'
+                        + (y(getOpen(d,i))
+                            - y(getHigh(d,i)))
+                        + 'l'
+                        + (-w/2)
+                        + ',0l'
+                        + (w/2)
+                        + ',0l0,'
+                        + (y(getLow(d,i))
+                            - y(getOpen(d,i)))
+                        + 'l0,'
+                        + (y(getClose(d,i))
+                            - y(getLow(d,i)))
+                        + 'l'
+                        + (w/2)
+                        + ',0l'
+                        + (-w/2)
+                        + ',0z';
+                });
+        });
+
+        return chart;
+    }
+
+
+    //Create methods to allow outside functions to highlight a specific bar.
+    chart.highlightPoint = function(pointIndex, isHoverOver) {
+        chart.clearHighlights();
+        container.select(".nv-ohlcBar .nv-tick-0-" + pointIndex)
+            .classed("hover", isHoverOver)
+        ;
+    };
+
+    chart.clearHighlights = function() {
+        container.select(".nv-ohlcBar .nv-tick.hover")
+            .classed("hover", false)
+        ;
+    };
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:    {get: function(){return width;}, set: function(_){width=_;}},
+        height:   {get: function(){return height;}, set: function(_){height=_;}},
+        xScale:   {get: function(){return x;}, set: function(_){x=_;}},
+        yScale:   {get: function(){return y;}, set: function(_){y=_;}},
+        xDomain:  {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
+        yDomain:  {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
+        xRange:   {get: function(){return xRange;}, set: function(_){xRange=_;}},
+        yRange:   {get: function(){return yRange;}, set: function(_){yRange=_;}},
+        forceX:   {get: function(){return forceX;}, set: function(_){forceX=_;}},
+        forceY:   {get: function(){return forceY;}, set: function(_){forceY=_;}},
+        padData:  {get: function(){return padData;}, set: function(_){padData=_;}},
+        clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
+        id:       {get: function(){return id;}, set: function(_){id=_;}},
+        interactive: {get: function(){return interactive;}, set: function(_){interactive=_;}},
+
+        x:     {get: function(){return getX;}, set: function(_){getX=_;}},
+        y:     {get: function(){return getY;}, set: function(_){getY=_;}},
+        open:  {get: function(){return getOpen();}, set: function(_){getOpen=_;}},
+        close: {get: function(){return getClose();}, set: function(_){getClose=_;}},
+        high:  {get: function(){return getHigh;}, set: function(_){getHigh=_;}},
+        low:   {get: function(){return getLow;}, set: function(_){getLow=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    != undefined ? _.top    : margin.top;
+            margin.right  = _.right  != undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom != undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   != undefined ? _.left   : margin.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+    return chart;
+};
+// Code adapted from Jason Davies' "Parallel Coordinates"
+// http://bl.ocks.org/jasondavies/1341281
+nv.models.parallelCoordinates = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 30, right: 0, bottom: 10, left: 0}
+        , width = null
+        , height = null
+        , x = d3.scale.ordinal()
+        , y = {}
+        , dimensionData = []
+        , enabledDimensions = []
+        , dimensionNames = []
+        , displayBrush = true
+        , color = nv.utils.defaultColor()
+        , filters = []
+        , active = []
+        , dragging = []
+        , axisWithUndefinedValues = []
+        , lineTension = 1
+        , foreground
+        , background
+        , dimensions
+        , line = d3.svg.line()
+        , axis = d3.svg.axis()
+        , dispatch = d3.dispatch('brushstart', 'brush', 'brushEnd', 'dimensionsOrder', "stateChange", 'elementClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd', 'activeChanged')
+        ;
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+
+    var renderWatch = nv.utils.renderWatch(dispatch);
+
+    function chart(selection) {
+        renderWatch.reset();
+        selection.each(function(data) {
+            var container = d3.select(this);
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            nv.utils.initSVG(container);
+
+
+           //Convert old data to new format (name, values)
+            if (data[0].values === undefined) {
+                var newData = [];
+                data.forEach(function (d) {
+                        var val = {};
+                        var key = Object.keys(d);
+                        key.forEach(function (k) { if (k !== "name") val[k] = d[k] });
+                        newData.push({ key: d.name, values: val });
+                });
+                data = newData;
+            }
+
+            var dataValues = data.map(function (d) {return d.values});
+            if (active.length === 0) {
+                active = data;
+            }; //set all active before first brush call
+            
+            dimensionNames = dimensionData.sort(function (a, b) { return a.currentPosition - b.currentPosition; }).map(function (d) { return d.key });
+            enabledDimensions = dimensionData.filter(function (d) { return !d.disabled; });
+            
+
+            // Setup Scales
+            x.rangePoints([0, availableWidth], 1).domain(enabledDimensions.map(function (d) { return d.key; }));
+
+            //Set as true if all values on an axis are missing.
+            // Extract the list of dimensions and create a scale for each.
+            var oldDomainMaxValue = {};
+            var displayMissingValuesline = false;
+
+            dimensionNames.forEach(function(d) {
+                var extent = d3.extent(dataValues, function (p) { return +p[d]; });
+                var min = extent[0];
+                var max = extent[1];
+                var onlyUndefinedValues = false;
+                //If there is no values to display on an axis, set the extent to 0
+                if (isNaN(min) || isNaN(max)) {
+                    onlyUndefinedValues = true;
+                    min = 0;
+                    max = 0;
+                }
+                //Scale axis if there is only one value
+                if (min === max) {
+                    min = min - 1;
+                    max = max + 1;
+                }
+                var f = filters.filter(function (k) { return k.dimension == d; });
+                if (f.length !== 0) {
+                    //If there is only NaN values, keep the existing domain.
+                    if (onlyUndefinedValues) {
+                        min = y[d].domain()[0];
+                        max = y[d].domain()[1];
+                    }
+                        //If the brush extent is > max (< min), keep the extent value.
+                    else if (!f[0].hasOnlyNaN && displayBrush) {
+                        min = min > f[0].extent[0] ? f[0].extent[0] : min;
+                        max = max < f[0].extent[1] ? f[0].extent[1] : max;
+                    }
+                        //If there is NaN values brushed be sure the brush extent is on the domain.
+                    else if (f[0].hasNaN) {
+                        max = max < f[0].extent[1] ? f[0].extent[1] : max;
+                        oldDomainMaxValue[d] = y[d].domain()[1];
+                        displayMissingValuesline = true;
+                    }
+                }
+                //Use 90% of (availableHeight - 12) for the axis range, 12 reprensenting the space necessary to display "undefined values" text.
+                //The remaining 10% are used to display the missingValue line.
+                y[d] = d3.scale.linear()
+                    .domain([min, max])
+                    .range([(availableHeight - 12) * 0.9, 0]);
+
+                axisWithUndefinedValues = [];
+
+                y[d].brush = d3.svg.brush().y(y[d]).on('brushstart', brushstart).on('brush', brush).on('brushend', brushend);
+            });
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-parallelCoordinates').data([data]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-parallelCoordinates');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-parallelCoordinates background');
+            gEnter.append('g').attr('class', 'nv-parallelCoordinates foreground');
+            gEnter.append('g').attr('class', 'nv-parallelCoordinates missingValuesline');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            line.interpolate('cardinal').tension(lineTension);
+            axis.orient('left');
+            var axisDrag = d3.behavior.drag()
+                        .on('dragstart', dragStart)
+                        .on('drag', dragMove)
+                        .on('dragend', dragEnd);
+
+            //Add missing value line at the bottom of the chart
+            var missingValuesline, missingValueslineText;
+            var step = x.range()[1] - x.range()[0];
+            if (!isNaN(step)) {
+                var lineData = [0 + step / 2, availableHeight - 12, availableWidth - step / 2, availableHeight - 12];
+                missingValuesline = wrap.select('.missingValuesline').selectAll('line').data([lineData]);
+                missingValuesline.enter().append('line');
+                missingValuesline.exit().remove();
+                missingValuesline.attr("x1", function(d) { return d[0]; })
+                        .attr("y1", function(d) { return d[1]; })
+                        .attr("x2", function(d) { return d[2]; })
+                        .attr("y2", function(d) { return d[3]; });
+    
+                //Add the text "undefined values" under the missing value line
+                missingValueslineText = wrap.select('.missingValuesline').selectAll('text').data(["undefined values"]);
+                missingValueslineText.append('text').data(["undefined values"]);
+                missingValueslineText.enter().append('text');
+                missingValueslineText.exit().remove();
+                missingValueslineText.attr("y", availableHeight)
+                        //To have the text right align with the missingValues line, substract 92 representing the text size.
+                        .attr("x", availableWidth - 92 - step / 2)
+                        .text(function(d) { return d; });
+            }
+            // Add grey background lines for context.
+            background = wrap.select('.background').selectAll('path').data(data);
+            background.enter().append('path');
+            background.exit().remove();
+            background.attr('d', path);
+
+            // Add blue foreground lines for focus.
+            foreground = wrap.select('.foreground').selectAll('path').data(data);
+            foreground.enter().append('path')
+            foreground.exit().remove();
+            foreground.attr('d', path)
+                .style("stroke-width", function (d, i) {
+                if (isNaN(d.strokeWidth)) { d.strokeWidth = 1;} return d.strokeWidth;})
+                .attr('stroke', function (d, i) { return d.color || color(d, i); });
+            foreground.on("mouseover", function (d, i) {
+                d3.select(this).classed('hover', true).style("stroke-width", d.strokeWidth + 2 + "px").style("stroke-opacity", 1);
+                dispatch.elementMouseover({
+                    label: d.name,
+                    color: d.color || color(d, i)
+                });
+
+            });
+            foreground.on("mouseout", function (d, i) {
+                d3.select(this).classed('hover', false).style("stroke-width", d.strokeWidth + "px").style("stroke-opacity", 0.7);
+                dispatch.elementMouseout({
+                    label: d.name,
+                    index: i
+                });
+            });
+            foreground.on('mousemove', function (d, i) {
+                dispatch.elementMousemove();
+            });
+            foreground.on('click', function (d) {
+                dispatch.elementClick({
+                    id: d.id
+                });
+            });
+            // Add a group element for each dimension.
+            dimensions = g.selectAll('.dimension').data(enabledDimensions);
+            var dimensionsEnter = dimensions.enter().append('g').attr('class', 'nv-parallelCoordinates dimension');
+
+            dimensions.attr('transform', function(d) { return 'translate(' + x(d.key) + ',0)'; });
+            dimensionsEnter.append('g').attr('class', 'nv-axis');
+
+            // Add an axis and title.
+            dimensionsEnter.append('text')
+                    .attr('class', 'nv-label')
+                .style("cursor", "move")
+                .attr('dy', '-1em')
+                .attr('text-anchor', 'middle')
+                .on("mouseover", function(d, i) {
+                    dispatch.elementMouseover({
+                        label: d.tooltip || d.key
+                    });
+                })
+                .on("mouseout", function(d, i) {
+                    dispatch.elementMouseout({
+                        label: d.tooltip
+                    });
+                })
+                .on('mousemove', function (d, i) {
+                    dispatch.elementMousemove();
+                })
+                .call(axisDrag);
+
+            dimensionsEnter.append('g').attr('class', 'nv-brushBackground');
+            dimensions.exit().remove();
+            dimensions.select('.nv-label').text(function (d) { return d.key });
+            dimensions.select('.nv-axis')
+                .each(function (d, i) {
+                    d3.select(this).call(axis.scale(y[d.key]).tickFormat(d3.format(d.format)));
+                });
+
+            // Add and store a brush for each axis.
+            restoreBrush(displayBrush);
+
+            var actives = dimensionNames.filter(function (p) { return !y[p].brush.empty(); }),
+                    extents = actives.map(function (p) { return y[p].brush.extent(); });
+            var formerActive = active.slice(0);
+
+            //Restore active values
+            active = [];
+            foreground.style("display", function (d) {
+                var isActive = actives.every(function (p, i) {
+                    if ((isNaN(d.values[p]) || isNaN(parseFloat(d.values[p]))) && extents[i][0] == y[p].brush.y().domain()[0]) {
+                        return true;
+                    }
+                    return (extents[i][0] <= d.values[p] && d.values[p] <= extents[i][1]) && !isNaN(parseFloat(d.values[p]));
+                });
+                if (isActive)
+                    active.push(d);
+                return !isActive ? "none" : null;
+
+            });
+
+            if (filters.length > 0 || !nv.utils.arrayEquals(active, formerActive)) {
+               dispatch.activeChanged(active);
+            }
+
+            // Returns the path for a given data point.
+            function path(d) {
+                return line(enabledDimensions.map(function (p) {
+                    //If value if missing, put the value on the missing value line
+                    if (isNaN(d.values[p.key]) || isNaN(parseFloat(d.values[p.key])) || displayMissingValuesline) {
+                        var domain = y[p.key].domain();
+                        var range = y[p.key].range();
+                        var min = domain[0] - (domain[1] - domain[0]) / 9;
+
+                        //If it's not already the case, allow brush to select undefined values
+                        if (axisWithUndefinedValues.indexOf(p.key) < 0) {
+
+                            var newscale = d3.scale.linear().domain([min, domain[1]]).range([availableHeight - 12, range[1]]);
+                            y[p.key].brush.y(newscale);
+                            axisWithUndefinedValues.push(p.key);
+                        }
+                        if (isNaN(d.values[p.key]) || isNaN(parseFloat(d.values[p.key]))) {
+                            return [x(p.key), y[p.key](min)];
+                        }
+                    }
+
+                    //If parallelCoordinate contain missing values show the missing values line otherwise, hide it.
+                    if (missingValuesline !== undefined) {
+                        if (axisWithUndefinedValues.length > 0 || displayMissingValuesline) {
+                            missingValuesline.style("display", "inline");
+                            missingValueslineText.style("display", "inline");
+                        } else {
+                            missingValuesline.style("display", "none");
+                            missingValueslineText.style("display", "none");
+                        }
+                    }
+                    return [x(p.key), y[p.key](d.values[p.key])];
+                }));
+            }
+
+            function restoreBrush(visible) {
+                filters.forEach(function (f) {
+                    //If filter brushed NaN values, keep the brush on the bottom of the axis.
+                    var brushDomain = y[f.dimension].brush.y().domain();
+                    if (f.hasOnlyNaN) {
+                        f.extent[1] = (y[f.dimension].domain()[1] - brushDomain[0]) * (f.extent[1] - f.extent[0]) / (oldDomainMaxValue[f.dimension] - f.extent[0]) + brushDomain[0];
+                    }
+                    if (f.hasNaN) {
+                        f.extent[0] = brushDomain[0];
+                    }
+                    if (visible)
+                        y[f.dimension].brush.extent(f.extent);
+                });
+                
+                dimensions.select('.nv-brushBackground')
+                .each(function (d) {
+                    d3.select(this).call(y[d.key].brush);
+
+                })
+                .selectAll('rect')
+                .attr('x', -8)
+                .attr('width', 16);
+            }
+            
+            // Handles a brush event, toggling the display of foreground lines.
+            function brushstart() {
+                //If brush aren't visible, show it before brushing again.
+                if (displayBrush === false) {
+                    restoreBrush(true);
+                }
+            }
+            
+            // Handles a brush event, toggling the display of foreground lines.
+            function brush() {
+                actives = dimensionNames.filter(function (p) { return !y[p].brush.empty(); }),
+                    extents = actives.map(function(p) { return y[p].brush.extent(); });
+
+                filters = []; //erase current filters
+                actives.forEach(function(d,i) {
+                    filters[i] = {
+                        dimension: d,
+                        extent: extents[i],
+                        hasNaN: false,
+                        hasOnlyNaN: false
+                    }
+                });
+
+                active = []; //erase current active list
+                foreground.style('display', function(d) {
+                    var isActive = actives.every(function(p, i) {
+                        if ((isNaN(d.values[p]) || isNaN(parseFloat(d.values[p]))) && extents[i][0] == y[p].brush.y().domain()[0]) return true;
+                        return (extents[i][0] <= d.values[p] && d.values[p] <= extents[i][1]) && !isNaN(parseFloat(d.values[p]));
+                    });
+                    if (isActive) active.push(d);
+                    return isActive ? null : 'none';
+                });
+
+                dispatch.brush({
+                    filters: filters,
+                    active: active
+                });
+            }
+            function brushend() {
+                var hasActiveBrush = actives.length > 0 ? true : false;
+                filters.forEach(function (f) {
+                    if (f.extent[0] === y[f.dimension].brush.y().domain()[0] && axisWithUndefinedValues.indexOf(f.dimension) >= 0)
+                        f.hasNaN = true;
+                    if (f.extent[1] < y[f.dimension].domain()[0])
+                        f.hasOnlyNaN = true;
+                });
+                dispatch.brushEnd(active, hasActiveBrush);
+            }
+            function dragStart(d) {
+                dragging[d.key] = this.parentNode.__origin__ = x(d.key);
+                background.attr("visibility", "hidden");
+
+            }
+
+            function dragMove(d) {
+                dragging[d.key] = Math.min(availableWidth, Math.max(0, this.parentNode.__origin__ += d3.event.x));
+                foreground.attr("d", path);
+                enabledDimensions.sort(function (a, b) { return dimensionPosition(a.key) - dimensionPosition(b.key); });
+                enabledDimensions.forEach(function (d, i) { return d.currentPosition = i; });
+                x.domain(enabledDimensions.map(function (d) { return d.key; }));
+                dimensions.attr("transform", function(d) { return "translate(" + dimensionPosition(d.key) + ")"; });
+            }
+
+            function dragEnd(d, i) {
+                delete this.parentNode.__origin__;
+                delete dragging[d.key];
+                d3.select(this.parentNode).attr("transform", "translate(" + x(d.key) + ")");
+                foreground
+                  .attr("d", path);
+                background
+                  .attr("d", path)
+                  .attr("visibility", null);
+
+                dispatch.dimensionsOrder(enabledDimensions);
+            }
+            function resetBrush() {
+                filters = [];
+                active = [];
+                dispatch.stateChange();
+            }
+            function resetDrag() {
+                dimensionName.map(function (d, i) { return d.currentPosition = d.originalPosition; });
+                dispatch.stateChange();
+            }
+
+            function dimensionPosition(d) {
+                var v = dragging[d];
+                return v == null ? x(d) : v;
+            }
+        });
+
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:         {get: function(){return width;},           set: function(_){width= _;}},
+        height:        {get: function(){return height;},          set: function(_){height= _;}},
+        dimensionData: { get: function () { return dimensionData; }, set: function (_) { dimensionData = _; } },
+        displayBrush: { get: function () { return displayBrush; }, set: function (_) { displayBrush = _; } },
+        filters: { get: function () { return filters; }, set: function (_) { filters = _; } },
+        active: { get: function () { return active; }, set: function (_) { active = _; } },
+        lineTension:   {get: function(){return lineTension;},     set: function(_){lineTension = _;}},
+
+        // deprecated options
+        dimensions: {get: function () { return dimensionData.map(function (d){return d.key}); }, set: function (_) {
+            // deprecated after 1.8.1
+            nv.deprecated('dimensions', 'use dimensionData instead');
+            if (dimensionData.length === 0) {
+                _.forEach(function (k) { dimensionData.push({ key: k }) })
+            } else {
+                _.forEach(function (k, i) { dimensionData[i].key= k })
+            }
+        }
+        },
+        dimensionNames: {get: function () { return dimensionData.map(function (d){return d.key}); }, set: function (_) {
+            // deprecated after 1.8.1
+            nv.deprecated('dimensionNames', 'use dimensionData instead');
+            dimensionNames = [];
+            if (dimensionData.length === 0) {
+                _.forEach(function (k) { dimensionData.push({ key: k }) })
+            } else {
+                _.forEach(function (k, i) { dimensionData[i].key = k })
+            }
+ 
+        }},
+        dimensionFormats: {get: function () { return dimensionData.map(function (d) { return d.format }); }, set: function (_) {
+            // deprecated after 1.8.1
+            nv.deprecated('dimensionFormats', 'use dimensionData instead');
+            if (dimensionData.length === 0) {
+                _.forEach(function (f) { dimensionData.push({ format: f }) })
+            } else {
+                _.forEach(function (f, i) { dimensionData[i].format = f })
+            }
+
+        }},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    =  _.top    !== undefined ? _.top    : margin.top;
+            margin.right  =  _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom =  _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   =  _.left   !== undefined ? _.left   : margin.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+    return chart;
+};
+nv.models.parallelCoordinatesChart = function () {
+        "use strict";
+        //============================================================
+        // Public Variables with Default Settings
+        //------------------------------------------------------------
+
+        var parallelCoordinates = nv.models.parallelCoordinates()
+        var legend = nv.models.legend()
+        var tooltip = nv.models.tooltip();
+        var dimensionTooltip = nv.models.tooltip();
+
+        var margin = { top: 0, right: 0, bottom: 0, left: 0 }
+        , width = null
+		, height = null
+        , showLegend = true
+		, color = nv.utils.defaultColor()
+        , state = nv.utils.state()
+        , dimensionData = []
+        , dimensionNames = []
+        , displayBrush = true
+        , defaultState = null
+        , noData = null
+        , dispatch = d3.dispatch('dimensionsOrder', 'brushEnd', 'stateChange', 'changeState', 'renderEnd')
+        , controlWidth = function () { return showControls ? 180 : 0 }
+        ;
+
+	    //============================================================
+	
+		//============================================================
+        // Private Variables
+        //------------------------------------------------------------
+
+        var renderWatch = nv.utils.renderWatch(dispatch);
+
+        var stateGetter = function(data) {
+            return function() {
+                return {
+                    active: data.map(function(d) { return !d.disabled })
+                };
+            }
+        };
+
+        var stateSetter = function(data) {
+            return function(state) {
+                if(state.active !== undefined) {
+                    data.forEach(function(series, i) {
+                        series.disabled = !state.active[i];
+                    });
+                }
+            }
+        };
+
+        //============================================================
+        // Chart function
+        //------------------------------------------------------------
+
+        function chart(selection) {
+            renderWatch.reset();
+            renderWatch.models(parallelCoordinates);
+
+            selection.each(function(data) {
+                var container = d3.select(this);
+                nv.utils.initSVG(container);
+
+                var that = this;
+
+                var availableWidth = nv.utils.availableWidth(width, container, margin),
+                    availableHeight = nv.utils.availableHeight(height, container, margin);
+
+                chart.update = function() { container.call(chart); };
+                chart.container = this;
+
+                state.setter(stateSetter(dimensionData), chart.update)
+                    .getter(stateGetter(dimensionData))
+                    .update();
+
+                //set state.disabled
+                state.disabled = dimensionData.map(function (d) { return !!d.disabled });
+
+                //Keep dimensions position in memory
+                dimensionData = dimensionData.map(function (d) {d.disabled = !!d.disabled; return d});
+                dimensionData.forEach(function (d, i) {
+                    d.originalPosition = isNaN(d.originalPosition) ? i : d.originalPosition;
+                    d.currentPosition = isNaN(d.currentPosition) ? i : d.currentPosition;
+                });
+
+                var currentDimensions = dimensionNames.map(function (d) { return d.key; });
+                var newDimensions = dimensionData.map(function (d) { return d.key; });
+                dimensionData.forEach(function (k, i) {
+                    var idx = currentDimensions.indexOf(k.key);
+                        if (idx < 0) {
+                            dimensionNames.splice(i, 0, k);
+                        } else {
+                            var gap = dimensionNames[idx].currentPosition - dimensionNames[idx].originalPosition;
+                            dimensionNames[idx].originalPosition = k.originalPosition;
+                            dimensionNames[idx].currentPosition = k.originalPosition + gap;
+                        }
+                });
+                //Remove old dimensions
+                dimensionNames = dimensionNames.filter(function (d) { return newDimensions.indexOf(d.key) >= 0; });
+
+               if (!defaultState) {
+                    var key;
+                    defaultState = {};
+                    for(key in state) {
+                        if(state[key] instanceof Array)
+                            defaultState[key] = state[key].slice(0);
+                        else
+                            defaultState[key] = state[key];
+                    }
+                }
+
+                // Display No Data message if there's nothing to show.
+                if(!data || !data.length) {
+                    nv.utils.noData(chart, container);
+                    return chart;
+                } else {
+                    container.selectAll('.nv-noData').remove();
+                }
+                
+                //------------------------------------------------------------
+                // Setup containers and skeleton of chart
+
+                var wrap = container.selectAll('g.nv-wrap.nv-parallelCoordinatesChart').data([data]);
+                var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-parallelCoordinatesChart').append('g');
+
+                var g = wrap.select('g');
+                
+                gEnter.append('g').attr('class', 'nv-parallelCoordinatesWrap');
+                gEnter.append('g').attr('class', 'nv-legendWrap');
+
+                g.select("rect")
+                    .attr("width", availableWidth)
+                    .attr("height", (availableHeight > 0) ? availableHeight : 0);
+
+                // Legend
+                if (showLegend) {
+                    legend.width(availableWidth)
+                        .color(function (d) { return "rgb(188,190,192)"; });
+
+                    g.select('.nv-legendWrap')
+                        .datum(dimensionNames.sort(function (a, b) { return a.originalPosition - b.originalPosition; }))
+                        .call(legend);
+
+                    if (margin.top != legend.height()) {
+                        margin.top = legend.height();
+                        availableHeight = nv.utils.availableHeight(height, container, margin);
+                    }
+                    wrap.select('.nv-legendWrap')
+                       .attr('transform', 'translate( 0 ,' + (-margin.top) + ')');
+                }
+                wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+                
+               
+
+                // Main Chart Component(s)
+                parallelCoordinates
+                    .width(availableWidth)
+                    .height(availableHeight)
+                    .dimensionData(dimensionNames)
+                    .displayBrush(displayBrush);
+		
+		        var parallelCoordinatesWrap = g.select('.nv-parallelCoordinatesWrap ')
+                  .datum(data);
+
+		        parallelCoordinatesWrap.transition().call(parallelCoordinates);
+		  
+				//============================================================
+                // Event Handling/Dispatching (in chart's scope)
+                //------------------------------------------------------------
+                //Display reset brush button
+		        parallelCoordinates.dispatch.on('brushEnd', function (active, hasActiveBrush) {
+		            if (hasActiveBrush) {
+		                displayBrush = true;
+		                dispatch.brushEnd(active);
+		            } else {
+
+		                displayBrush = false;
+		            }
+		        });
+
+		        legend.dispatch.on('stateChange', function(newState) {
+		            for(var key in newState) {
+		                state[key] = newState[key];
+		            }
+		            dispatch.stateChange(state);
+		            chart.update();
+		        });
+
+                //Update dimensions order and display reset sorting button
+		        parallelCoordinates.dispatch.on('dimensionsOrder', function (e) {
+		            dimensionNames.sort(function (a, b) { return a.currentPosition - b.currentPosition; });
+		            var isSorted = false;
+		            dimensionNames.forEach(function (d, i) {
+		                d.currentPosition = i;
+		                if (d.currentPosition !== d.originalPosition)
+		                    isSorted = true;
+		            });
+		            dispatch.dimensionsOrder(dimensionNames, isSorted);
+		        });
+
+				// Update chart from a state object passed to event handler
+                dispatch.on('changeState', function (e) {
+
+                    if (typeof e.disabled !== 'undefined') {
+                        dimensionNames.forEach(function (series, i) {
+                            series.disabled = e.disabled[i];
+                        });
+                        state.disabled = e.disabled;
+                    }
+                    chart.update();
+                });
+            });
+
+            renderWatch.renderEnd('parraleleCoordinateChart immediate');
+            return chart;
+        }
+
+		//============================================================
+        // Event Handling/Dispatching (out of chart's scope)
+        //------------------------------------------------------------
+
+        parallelCoordinates.dispatch.on('elementMouseover.tooltip', function (evt) {
+            evt['series'] = {
+                key: evt.label,
+                color: evt.color
+            };
+            tooltip.data(evt).hidden(false);
+        });
+
+        parallelCoordinates.dispatch.on('elementMouseout.tooltip', function(evt) {
+            tooltip.hidden(true)
+        });
+
+        parallelCoordinates.dispatch.on('elementMousemove.tooltip', function () {
+            tooltip();
+        });
+		 //============================================================
+        // Expose Public Variables
+        //------------------------------------------------------------
+		
+		// expose chart's sub-components
+        chart.dispatch = dispatch;
+        chart.parallelCoordinates = parallelCoordinates;
+        chart.legend = legend;
+        chart.tooltip = tooltip;
+
+        chart.options = nv.utils.optionsFunc.bind(chart);
+
+        chart._options = Object.create({}, {
+            // simple options, just get/set the necessary values
+            width: { get: function () { return width; }, set: function (_) { width = _; } },
+            height: { get: function () { return height; }, set: function (_) { height = _; } },
+            showLegend: { get: function () { return showLegend; }, set: function (_) { showLegend = _; } },
+            defaultState: { get: function () { return defaultState; }, set: function (_) { defaultState = _; } },
+            dimensionData: { get: function () { return dimensionData; }, set: function (_) { dimensionData = _; } },
+            displayBrush: { get: function () { return displayBrush; }, set: function (_) { displayBrush = _; } },
+            noData: { get: function () { return noData; }, set: function (_) { noData = _; } },
+
+            // options that require extra logic in the setter
+            margin: {
+                get: function () { return margin; },
+                set: function (_) {
+                    margin.top = _.top !== undefined ? _.top : margin.top;
+                    margin.right = _.right !== undefined ? _.right : margin.right;
+                    margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+                    margin.left = _.left !== undefined ? _.left : margin.left;
+                }
+            },
+            color: {get: function(){return color;}, set: function(_){
+                    color = nv.utils.getColor(_);
+                    legend.color(color);
+                    parallelCoordinates.color(color);
+                }}
+        });
+
+        nv.utils.inheritOptions(chart, parallelCoordinates);
+        nv.utils.initOptions(chart);
+
+        return chart;
+    };nv.models.pie = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , width = 500
+        , height = 500
+        , getX = function(d) { return d.x }
+        , getY = function(d) { return d.y }
+        , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
+        , container = null
+        , color = nv.utils.defaultColor()
+        , valueFormat = d3.format(',.2f')
+        , showLabels = true
+        , labelsOutside = false
+        , labelType = "key"
+        , labelThreshold = .02 //if slice percentage is under this, don't show label
+        , donut = false
+        , title = false
+        , growOnHover = true
+        , titleOffset = 0
+        , labelSunbeamLayout = false
+        , startAngle = false
+        , padAngle = false
+        , endAngle = false
+        , cornerRadius = 0
+        , donutRatio = 0.5
+        , arcsRadius = []
+        , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
+        ;
+
+    var arcs = [];
+    var arcsOver = [];
+
+    //============================================================
+    // chart function
+    //------------------------------------------------------------
+
+    var renderWatch = nv.utils.renderWatch(dispatch);
+
+    function chart(selection) {
+        renderWatch.reset();
+        selection.each(function(data) {
+            var availableWidth = width - margin.left - margin.right
+                , availableHeight = height - margin.top - margin.bottom
+                , radius = Math.min(availableWidth, availableHeight) / 2
+                , arcsRadiusOuter = []
+                , arcsRadiusInner = []
+                ;
+
+            container = d3.select(this)
+            if (arcsRadius.length === 0) {
+                var outer = radius - radius / 5;
+                var inner = donutRatio * radius;
+                for (var i = 0; i < data[0].length; i++) {
+                    arcsRadiusOuter.push(outer);
+                    arcsRadiusInner.push(inner);
+                }
+            } else {
+                arcsRadiusOuter = arcsRadius.map(function (d) { return (d.outer - d.outer / 5) * radius; });
+                arcsRadiusInner = arcsRadius.map(function (d) { return (d.inner - d.inner / 5) * radius; });
+                donutRatio = d3.min(arcsRadius.map(function (d) { return (d.inner - d.inner / 5); }));
+            }
+            nv.utils.initSVG(container);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('.nv-wrap.nv-pie').data(data);
+            var wrapEnter = wrap.enter().append('g').attr('class','nvd3 nv-wrap nv-pie nv-chart-' + id);
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+            var g_pie = gEnter.append('g').attr('class', 'nv-pie');
+            gEnter.append('g').attr('class', 'nv-pieLabels');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+            g.select('.nv-pie').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');
+            g.select('.nv-pieLabels').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');
+
+            //
+            container.on('click', function(d,i) {
+                dispatch.chartClick({
+                    data: d,
+                    index: i,
+                    pos: d3.event,
+                    id: id
+                });
+            });
+
+            arcs = [];
+            arcsOver = [];
+            for (var i = 0; i < data[0].length; i++) {
+
+                var arc = d3.svg.arc().outerRadius(arcsRadiusOuter[i]);
+                var arcOver = d3.svg.arc().outerRadius(arcsRadiusOuter[i] + 5);
+
+                if (startAngle !== false) {
+                    arc.startAngle(startAngle);
+                    arcOver.startAngle(startAngle);
+                }
+                if (endAngle !== false) {
+                    arc.endAngle(endAngle);
+                    arcOver.endAngle(endAngle);
+                }
+                if (donut) {
+                    arc.innerRadius(arcsRadiusInner[i]);
+                    arcOver.innerRadius(arcsRadiusInner[i]);
+                }
+
+                if (arc.cornerRadius && cornerRadius) {
+                    arc.cornerRadius(cornerRadius);
+                    arcOver.cornerRadius(cornerRadius);
+                }
+
+                arcs.push(arc);
+                arcsOver.push(arcOver);
+            }
+
+            // Setup the Pie chart and choose the data element
+            var pie = d3.layout.pie()
+                .sort(null)
+                .value(function(d) { return d.disabled ? 0 : getY(d) });
+
+            // padAngle added in d3 3.5
+            if (pie.padAngle && padAngle) {
+                pie.padAngle(padAngle);
+            }
+
+            // if title is specified and donut, put it in the middle
+            if (donut && title) {
+                g_pie.append("text").attr('class', 'nv-pie-title');
+
+                wrap.select('.nv-pie-title')
+                    .style("text-anchor", "middle")
+                    .text(function (d) {
+                        return title;
+                    })
+                    .style("font-size", (Math.min(availableWidth, availableHeight)) * donutRatio * 2 / (title.length + 2) + "px")
+                    .attr("dy", "0.35em") // trick to vertically center text
+                    .attr('transform', function(d, i) {
+                        return 'translate(0, '+ titleOffset + ')';
+                    });
+            }
+
+            var slices = wrap.select('.nv-pie').selectAll('.nv-slice').data(pie);
+            var pieLabels = wrap.select('.nv-pieLabels').selectAll('.nv-label').data(pie);
+
+            slices.exit().remove();
+            pieLabels.exit().remove();
+
+            var ae = slices.enter().append('g');
+            ae.attr('class', 'nv-slice');
+            ae.on('mouseover', function(d, i) {
+                d3.select(this).classed('hover', true);
+                if (growOnHover) {
+                    d3.select(this).select("path").transition()
+                        .duration(70)
+                        .attr("d", arcsOver[i]);
+                }
+                dispatch.elementMouseover({
+                    data: d.data,
+                    index: i,
+                    color: d3.select(this).style("fill")
+                });
+            });
+            ae.on('mouseout', function(d, i) {
+                d3.select(this).classed('hover', false);
+                if (growOnHover) {
+                    d3.select(this).select("path").transition()
+                        .duration(50)
+                        .attr("d", arcs[i]);
+                }
+                dispatch.elementMouseout({data: d.data, index: i});
+            });
+            ae.on('mousemove', function(d, i) {
+                dispatch.elementMousemove({data: d.data, index: i});
+            });
+            ae.on('click', function(d, i) {
+                var element = this;
+                dispatch.elementClick({
+                    data: d.data,
+                    index: i,
+                    color: d3.select(this).style("fill"),
+                    event: d3.event,
+                    element: element
+                });
+            });
+            ae.on('dblclick', function(d, i) {
+                dispatch.elementDblClick({
+                    data: d.data,
+                    index: i,
+                    color: d3.select(this).style("fill")
+                });
+            });
+
+            slices.attr('fill', function(d,i) { return color(d.data, i); });
+            slices.attr('stroke', function(d,i) { return color(d.data, i); });
+
+            var paths = ae.append('path').each(function(d) {
+                this._current = d;
+            });
+
+            slices.select('path')
+                .transition()
+                .attr('d', function (d, i) { return arcs[i](d); })
+                .attrTween('d', arcTween);
+
+            if (showLabels) {
+                // This does the normal label
+                var labelsArc = [];
+                for (var i = 0; i < data[0].length; i++) {
+                    labelsArc.push(arcs[i]);
+
+                    if (labelsOutside) {
+                        if (donut) {
+                            labelsArc[i] = d3.svg.arc().outerRadius(arcs[i].outerRadius());
+                            if (startAngle !== false) labelsArc[i].startAngle(startAngle);
+                            if (endAngle !== false) labelsArc[i].endAngle(endAngle);
+                        }
+                    } else if (!donut) {
+                            labelsArc[i].innerRadius(0);
+                    }
+                }
+
+                pieLabels.enter().append("g").classed("nv-label",true).each(function(d,i) {
+                    var group = d3.select(this);
+
+                    group.attr('transform', function (d, i) {
+                        if (labelSunbeamLayout) {
+                            d.outerRadius = arcsRadiusOuter[i] + 10; // Set Outer Coordinate
+                            d.innerRadius = arcsRadiusOuter[i] + 15; // Set Inner Coordinate
+                            var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);
+                            if ((d.startAngle + d.endAngle) / 2 < Math.PI) {
+                                rotateAngle -= 90;
+                            } else {
+                                rotateAngle += 90;
+                            }
+                            return 'translate(' + labelsArc[i].centroid(d) + ') rotate(' + rotateAngle + ')';
+                        } else {
+                            d.outerRadius = radius + 10; // Set Outer Coordinate
+                            d.innerRadius = radius + 15; // Set Inner Coordinate
+                            return 'translate(' + labelsArc[i].centroid(d) + ')'
+                        }
+                    });
+
+                    group.append('rect')
+                        .style('stroke', '#fff')
+                        .style('fill', '#fff')
+                        .attr("rx", 3)
+                        .attr("ry", 3);
+
+                    group.append('text')
+                        .style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
+                        .style('fill', '#000')
+                });
+
+                var labelLocationHash = {};
+                var avgHeight = 14;
+                var avgWidth = 140;
+                var createHashKey = function(coordinates) {
+                    return Math.floor(coordinates[0]/avgWidth) * avgWidth + ',' + Math.floor(coordinates[1]/avgHeight) * avgHeight;
+                };
+                var getSlicePercentage = function(d) {
+                    return (d.endAngle - d.startAngle) / (2 * Math.PI);
+                };
+
+                pieLabels.watchTransition(renderWatch, 'pie labels').attr('transform', function (d, i) {
+                    if (labelSunbeamLayout) {
+                        d.outerRadius = arcsRadiusOuter[i] + 10; // Set Outer Coordinate
+                        d.innerRadius = arcsRadiusOuter[i] + 15; // Set Inner Coordinate
+                        var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);
+                        if ((d.startAngle + d.endAngle) / 2 < Math.PI) {
+                            rotateAngle -= 90;
+                        } else {
+                            rotateAngle += 90;
+                        }
+                        return 'translate(' + labelsArc[i].centroid(d) + ') rotate(' + rotateAngle + ')';
+                    } else {
+                        d.outerRadius = radius + 10; // Set Outer Coordinate
+                        d.innerRadius = radius + 15; // Set Inner Coordinate
+
+                        /*
+                        Overlapping pie labels are not good. What this attempts to do is, prevent overlapping.
+                        Each label location is hashed, and if a hash collision occurs, we assume an overlap.
+                        Adjust the label's y-position to remove the overlap.
+                        */
+                        var center = labelsArc[i].centroid(d);
+                        var percent = getSlicePercentage(d);
+                        if (d.value && percent >= labelThreshold) {
+                            var hashKey = createHashKey(center);
+                            if (labelLocationHash[hashKey]) {
+                                center[1] -= avgHeight;
+                            }
+                            labelLocationHash[createHashKey(center)] = true;
+                        }
+                        return 'translate(' + center + ')'
+                    }
+                });
+
+                pieLabels.select(".nv-label text")
+                    .style('text-anchor', function(d,i) {
+                        //center the text on it's origin or begin/end if orthogonal aligned
+                        return labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle';
+                    })
+                    .text(function(d, i) {
+                        var percent = getSlicePercentage(d);
+                        var label = '';
+                        if (!d.value || percent < labelThreshold) return '';
+
+                        if(typeof labelType === 'function') {
+                            label = labelType(d, i, {
+                                'key': getX(d.data),
+                                'value': getY(d.data),
+                                'percent': valueFormat(percent)
+                            });
+                        } else {
+                            switch (labelType) {
+                                case 'key':
+                                    label = getX(d.data);
+                                    break;
+                                case 'value':
+                                    label = valueFormat(getY(d.data));
+                                    break;
+                                case 'percent':
+                                    label = d3.format('%')(percent);
+                                    break;
+                            }
+                        }
+                        return label;
+                    })
+                ;
+            }
+
+
+            // Computes the angle of an arc, converting from radians to degrees.
+            function angle(d) {
+                var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
+                return a > 90 ? a - 180 : a;
+            }
+
+            function arcTween(a, idx) {
+                a.endAngle = isNaN(a.endAngle) ? 0 : a.endAngle;
+                a.startAngle = isNaN(a.startAngle) ? 0 : a.startAngle;
+                if (!donut) a.innerRadius = 0;
+                var i = d3.interpolate(this._current, a);
+                this._current = i(0);
+                return function (t) {
+                    return arcs[idx](i(t));
+                };
+            }
+        });
+
+        renderWatch.renderEnd('pie immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        arcsRadius: { get: function () { return arcsRadius; }, set: function (_) { arcsRadius = _; } },
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        showLabels: {get: function(){return showLabels;}, set: function(_){showLabels=_;}},
+        title:      {get: function(){return title;}, set: function(_){title=_;}},
+        titleOffset:    {get: function(){return titleOffset;}, set: function(_){titleOffset=_;}},
+        labelThreshold: {get: function(){return labelThreshold;}, set: function(_){labelThreshold=_;}},
+        valueFormat:    {get: function(){return valueFormat;}, set: function(_){valueFormat=_;}},
+        x:          {get: function(){return getX;}, set: function(_){getX=_;}},
+        id:         {get: function(){return id;}, set: function(_){id=_;}},
+        endAngle:   {get: function(){return endAngle;}, set: function(_){endAngle=_;}},
+        startAngle: {get: function(){return startAngle;}, set: function(_){startAngle=_;}},
+        padAngle:   {get: function(){return padAngle;}, set: function(_){padAngle=_;}},
+        cornerRadius: {get: function(){return cornerRadius;}, set: function(_){cornerRadius=_;}},
+        donutRatio:   {get: function(){return donutRatio;}, set: function(_){donutRatio=_;}},
+        labelsOutside: {get: function(){return labelsOutside;}, set: function(_){labelsOutside=_;}},
+        labelSunbeamLayout: {get: function(){return labelSunbeamLayout;}, set: function(_){labelSunbeamLayout=_;}},
+        donut:              {get: function(){return donut;}, set: function(_){donut=_;}},
+        growOnHover:        {get: function(){return growOnHover;}, set: function(_){growOnHover=_;}},
+
+        // depreciated after 1.7.1
+        pieLabelsOutside: {get: function(){return labelsOutside;}, set: function(_){
+            labelsOutside=_;
+            nv.deprecated('pieLabelsOutside', 'use labelsOutside instead');
+        }},
+        // depreciated after 1.7.1
+        donutLabelsOutside: {get: function(){return labelsOutside;}, set: function(_){
+            labelsOutside=_;
+            nv.deprecated('donutLabelsOutside', 'use labelsOutside instead');
+        }},
+        // deprecated after 1.7.1
+        labelFormat: {get: function(){ return valueFormat;}, set: function(_) {
+            valueFormat=_;
+            nv.deprecated('labelFormat','use valueFormat instead');
+        }},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
+            margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
+            margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
+            margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
+        }},
+        y: {get: function(){return getY;}, set: function(_){
+            getY=d3.functor(_);
+        }},
+        color: {get: function(){return color;}, set: function(_){
+            color=nv.utils.getColor(_);
+        }},
+        labelType:          {get: function(){return labelType;}, set: function(_){
+            labelType= _ || 'key';
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+    return chart;
+};
+nv.models.pieChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var pie = nv.models.pie();
+    var legend = nv.models.legend();
+    var tooltip = nv.models.tooltip();
+
+    var margin = {top: 30, right: 20, bottom: 20, left: 20}
+        , width = null
+        , height = null
+        , showLegend = true
+        , legendPosition = "top"
+        , color = nv.utils.defaultColor()
+        , state = nv.utils.state()
+        , defaultState = null
+        , noData = null
+        , duration = 250
+        , dispatch = d3.dispatch('stateChange', 'changeState','renderEnd')
+        ;
+
+    tooltip
+        .duration(0)
+        .headerEnabled(false)
+        .valueFormatter(function(d, i) {
+            return pie.valueFormat()(d, i);
+        });
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var renderWatch = nv.utils.renderWatch(dispatch);
+
+    var stateGetter = function(data) {
+        return function(){
+            return {
+                active: data.map(function(d) { return !d.disabled })
+            };
+        }
+    };
+
+    var stateSetter = function(data) {
+        return function(state) {
+            if (state.active !== undefined) {
+                data.forEach(function (series, i) {
+                    series.disabled = !state.active[i];
+                });
+            }
+        }
+    };
+
+    //============================================================
+    // Chart function
+    //------------------------------------------------------------
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(pie);
+
+        selection.each(function(data) {
+            var container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            var that = this;
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            chart.update = function() { container.transition().call(chart); };
+            chart.container = this;
+
+            state.setter(stateSetter(data), chart.update)
+                .getter(stateGetter(data))
+                .update();
+
+            //set state.disabled
+            state.disabled = data.map(function(d) { return !!d.disabled });
+
+            if (!defaultState) {
+                var key;
+                defaultState = {};
+                for (key in state) {
+                    if (state[key] instanceof Array)
+                        defaultState[key] = state[key].slice(0);
+                    else
+                        defaultState[key] = state[key];
+                }
+            }
+
+            // Display No Data message if there's nothing to show.
+            if (!data || !data.length) {
+                nv.utils.noData(chart, container);
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-pieChart').data([data]);
+            var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-pieChart').append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-pieWrap');
+            gEnter.append('g').attr('class', 'nv-legendWrap');
+
+            // Legend
+            if (showLegend) {
+                if (legendPosition === "top") {
+                    legend.width( availableWidth ).key(pie.x());
+
+                    wrap.select('.nv-legendWrap')
+                        .datum(data)
+                        .call(legend);
+
+                    if ( margin.top != legend.height()) {
+                        margin.top = legend.height();
+                        availableHeight = nv.utils.availableHeight(height, container, margin);
+                    }
+
+                    wrap.select('.nv-legendWrap')
+                        .attr('transform', 'translate(0,' + (-margin.top) +')');
+                } else if (legendPosition === "right") {
+                    var legendWidth = nv.models.legend().width();
+                    if (availableWidth / 2 < legendWidth) {
+                        legendWidth = (availableWidth / 2)
+                    }
+                    legend.height(availableHeight).key(pie.x());
+                    legend.width(legendWidth);
+                    availableWidth -= legend.width();
+
+                    wrap.select('.nv-legendWrap')
+                        .datum(data)
+                        .call(legend)
+                        .attr('transform', 'translate(' + (availableWidth) +',0)');
+                }
+            }
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            // Main Chart Component(s)
+            pie.width(availableWidth).height(availableHeight);
+            var pieWrap = g.select('.nv-pieWrap').datum([data]);
+            d3.transition(pieWrap).call(pie);
+
+            //============================================================
+            // Event Handling/Dispatching (in chart's scope)
+            //------------------------------------------------------------
+
+            legend.dispatch.on('stateChange', function(newState) {
+                for (var key in newState) {
+                    state[key] = newState[key];
+                }
+                dispatch.stateChange(state);
+                chart.update();
+            });
+
+            // Update chart from a state object passed to event handler
+            dispatch.on('changeState', function(e) {
+                if (typeof e.disabled !== 'undefined') {
+                    data.forEach(function(series,i) {
+                        series.disabled = e.disabled[i];
+                    });
+                    state.disabled = e.disabled;
+                }
+                chart.update();
+            });
+        });
+
+        renderWatch.renderEnd('pieChart immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Event Handling/Dispatching (out of chart's scope)
+    //------------------------------------------------------------
+
+    pie.dispatch.on('elementMouseover.tooltip', function(evt) {
+        evt['series'] = {
+            key: chart.x()(evt.data),
+            value: chart.y()(evt.data),
+            color: evt.color
+        };
+        tooltip.data(evt).hidden(false);
+    });
+
+    pie.dispatch.on('elementMouseout.tooltip', function(evt) {
+        tooltip.hidden(true);
+    });
+
+    pie.dispatch.on('elementMousemove.tooltip', function(evt) {
+        tooltip();
+    });
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    // expose chart's sub-components
+    chart.legend = legend;
+    chart.dispatch = dispatch;
+    chart.pie = pie;
+    chart.tooltip = tooltip;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    // use Object get/set functionality to map between vars and chart functions
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        noData:         {get: function(){return noData;},         set: function(_){noData=_;}},
+        showLegend:     {get: function(){return showLegend;},     set: function(_){showLegend=_;}},
+        legendPosition: {get: function(){return legendPosition;}, set: function(_){legendPosition=_;}},
+        defaultState:   {get: function(){return defaultState;},   set: function(_){defaultState=_;}},
+
+        // options that require extra logic in the setter
+        color: {get: function(){return color;}, set: function(_){
+            color = _;
+            legend.color(color);
+            pie.color(color);
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+        }},
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }}
+    });
+    nv.utils.inheritOptions(chart, pie);
+    nv.utils.initOptions(chart);
+    return chart;
+};
+
+nv.models.scatter = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin       = {top: 0, right: 0, bottom: 0, left: 0}
+        , width        = null
+        , height       = null
+        , color        = nv.utils.defaultColor() // chooses color
+        , id           = Math.floor(Math.random() * 100000) //Create semi-unique ID incase user doesn't select one
+        , container    = null
+        , x            = d3.scale.linear()
+        , y            = d3.scale.linear()
+        , z            = d3.scale.linear() //linear because d3.svg.shape.size is treated as area
+        , getX         = function(d) { return d.x } // accessor to get the x value
+        , getY         = function(d) { return d.y } // accessor to get the y value
+        , getSize      = function(d) { return d.size || 1} // accessor to get the point size
+        , getShape     = function(d) { return d.shape || 'circle' } // accessor to get point shape
+        , forceX       = [] // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)
+        , forceY       = [] // List of numbers to Force into the Y scale
+        , forceSize    = [] // List of numbers to Force into the Size scale
+        , interactive  = true // If true, plots a voronoi overlay for advanced point intersection
+        , pointActive  = function(d) { return !d.notActive } // any points that return false will be filtered out
+        , padData      = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart
+        , padDataOuter = .1 //outerPadding to imitate ordinal scale outer padding
+        , clipEdge     = false // if true, masks points within x and y scale
+        , clipVoronoi  = true // if true, masks each point with a circle... can turn off to slightly increase performance
+        , showVoronoi  = false // display the voronoi areas
+        , clipRadius   = function() { return 25 } // function to get the radius for voronoi point clips
+        , xDomain      = null // Override x domain (skips the calculation from data)
+        , yDomain      = null // Override y domain
+        , xRange       = null // Override x range
+        , yRange       = null // Override y range
+        , sizeDomain   = null // Override point size domain
+        , sizeRange    = null
+        , singlePoint  = false
+        , dispatch     = d3.dispatch('elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'renderEnd')
+        , useVoronoi   = true
+        , duration     = 250
+        , interactiveUpdateDelay = 300
+        ;
+
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var x0, y0, z0 // used to store previous scales
+        , timeoutID
+        , needsUpdate = false // Flag for when the points are visually updating, but the interactive layer is behind, to disable tooltips
+        , renderWatch = nv.utils.renderWatch(dispatch, duration)
+        , _sizeRange_def = [16, 256]
+        ;
+
+    function chart(selection) {
+        renderWatch.reset();
+        selection.each(function(data) {
+            container = d3.select(this);
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            nv.utils.initSVG(container);
+
+            //add series index to each data point for reference
+            data.forEach(function(series, i) {
+                series.values.forEach(function(point) {
+                    point.series = i;
+                });
+            });
+
+            // Setup Scales
+            // remap and flatten the data for use in calculating the scales' domains
+            var seriesData = (xDomain && yDomain && sizeDomain) ? [] : // if we know xDomain and yDomain and sizeDomain, no need to calculate.... if Size is constant remember to set sizeDomain to speed up performance
+                d3.merge(
+                    data.map(function(d) {
+                        return d.values.map(function(d,i) {
+                            return { x: getX(d,i), y: getY(d,i), size: getSize(d,i) }
+                        })
+                    })
+                );
+
+            x   .domain(xDomain || d3.extent(seriesData.map(function(d) { return d.x; }).concat(forceX)))
+
+            if (padData && data[0])
+                x.range(xRange || [(availableWidth * padDataOuter +  availableWidth) / (2 *data[0].values.length), availableWidth - availableWidth * (1 + padDataOuter) / (2 * data[0].values.length)  ]);
+            //x.range([availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5)  / data[0].values.length ]);
+            else
+                x.range(xRange || [0, availableWidth]);
+
+             if (chart.yScale().name === "o") {
+                    var min = d3.min(seriesData.map(function(d) { if (d.y !== 0) return d.y; }));
+                    y.clamp(true)
+                        .domain(yDomain || d3.extent(seriesData.map(function(d) {
+                            if (d.y !== 0) return d.y;
+                            else return min * 0.1;
+                        }).concat(forceY)))
+                        .range(yRange || [availableHeight, 0]);
+                } else {
+                        y.domain(yDomain || d3.extent(seriesData.map(function (d) { return d.y;}).concat(forceY)))
+                        .range(yRange || [availableHeight, 0]);
+                }
+
+            z   .domain(sizeDomain || d3.extent(seriesData.map(function(d) { return d.size }).concat(forceSize)))
+                .range(sizeRange || _sizeRange_def);
+
+            // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
+            singlePoint = x.domain()[0] === x.domain()[1] || y.domain()[0] === y.domain()[1];
+
+            if (x.domain()[0] === x.domain()[1])
+                x.domain()[0] ?
+                    x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
+                    : x.domain([-1,1]);
+
+            if (y.domain()[0] === y.domain()[1])
+                y.domain()[0] ?
+                    y.domain([y.domain()[0] - y.domain()[0] * 0.01, y.domain()[1] + y.domain()[1] * 0.01])
+                    : y.domain([-1,1]);
+
+            if ( isNaN(x.domain()[0])) {
+                x.domain([-1,1]);
+            }
+
+            if ( isNaN(y.domain()[0])) {
+                y.domain([-1,1]);
+            }
+
+            x0 = x0 || x;
+            y0 = y0 || y;
+            z0 = z0 || z;
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-scatter').data([data]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatter nv-chart-' + id);
+            var defsEnter = wrapEnter.append('defs');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            wrap.classed('nv-single-point', singlePoint);
+            gEnter.append('g').attr('class', 'nv-groups');
+            gEnter.append('g').attr('class', 'nv-point-paths');
+            wrapEnter.append('g').attr('class', 'nv-point-clips');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            defsEnter.append('clipPath')
+                .attr('id', 'nv-edge-clip-' + id)
+                .append('rect');
+
+            wrap.select('#nv-edge-clip-' + id + ' rect')
+                .attr('width', availableWidth)
+                .attr('height', (availableHeight > 0) ? availableHeight : 0);
+
+            g.attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : '');
+
+            function updateInteractiveLayer() {
+                // Always clear needs-update flag regardless of whether or not
+                // we will actually do anything (avoids needless invocations).
+                needsUpdate = false;
+
+                if (!interactive) return false;
+
+                // inject series and point index for reference into voronoi
+                if (useVoronoi === true) {
+                    var vertices = d3.merge(data.map(function(group, groupIndex) {
+                            return group.values
+                                .map(function(point, pointIndex) {
+                                    // *Adding noise to make duplicates very unlikely
+                                    // *Injecting series and point index for reference
+                                    /* *Adding a 'jitter' to the points, because there's an issue in d3.geom.voronoi.
+                                     */
+                                    var pX = getX(point,pointIndex);
+                                    var pY = getY(point,pointIndex);
+
+                                    return [x(pX)+ Math.random() * 1e-4,
+                                            y(pY)+ Math.random() * 1e-4,
+                                        groupIndex,
+                                        pointIndex, point]; //temp hack to add noise until I think of a better way so there are no duplicates
+                                })
+                                .filter(function(pointArray, pointIndex) {
+                                    return pointActive(pointArray[4], pointIndex); // Issue #237.. move filter to after map, so pointIndex is correct!
+                                })
+                        })
+                    );
+
+                    if (vertices.length == 0) return false;  // No active points, we're done
+                    if (vertices.length < 3) {
+                        // Issue #283 - Adding 2 dummy points to the voronoi b/c voronoi requires min 3 points to work
+                        vertices.push([x.range()[0] - 20, y.range()[0] - 20, null, null]);
+                        vertices.push([x.range()[1] + 20, y.range()[1] + 20, null, null]);
+                        vertices.push([x.range()[0] - 20, y.range()[0] + 20, null, null]);
+                        vertices.push([x.range()[1] + 20, y.range()[1] - 20, null, null]);
+                    }
+
+                    // keep voronoi sections from going more than 10 outside of graph
+                    // to avoid overlap with other things like legend etc
+                    var bounds = d3.geom.polygon([
+                        [-10,-10],
+                        [-10,height + 10],
+                        [width + 10,height + 10],
+                        [width + 10,-10]
+                    ]);
+
+                    var voronoi = d3.geom.voronoi(vertices).map(function(d, i) {
+                        return {
+                            'data': bounds.clip(d),
+                            'series': vertices[i][2],
+                            'point': vertices[i][3]
+                        }
+                    });
+
+                    // nuke all voronoi paths on reload and recreate them
+                    wrap.select('.nv-point-paths').selectAll('path').remove();
+                    var pointPaths = wrap.select('.nv-point-paths').selectAll('path').data(voronoi);
+                    var vPointPaths = pointPaths
+                        .enter().append("svg:path")
+                        .attr("d", function(d) {
+                            if (!d || !d.data || d.data.length === 0)
+                                return 'M 0 0';
+                            else
+                                return "M" + d.data.join(",") + "Z";
+                        })
+                        .attr("id", function(d,i) {
+                            return "nv-path-"+i; })
+                        .attr("clip-path", function(d,i) { return "url(#nv-clip-"+id+"-"+i+")"; })
+                        ;
+
+                    // good for debugging point hover issues
+                    if (showVoronoi) {
+                        vPointPaths.style("fill", d3.rgb(230, 230, 230))
+                            .style('fill-opacity', 0.4)
+                            .style('stroke-opacity', 1)
+                            .style("stroke", d3.rgb(200,200,200));
+                    }
+
+                    if (clipVoronoi) {
+                        // voronoi sections are already set to clip,
+                        // just create the circles with the IDs they expect
+                        wrap.select('.nv-point-clips').selectAll('*').remove(); // must do * since it has sub-dom
+                        var pointClips = wrap.select('.nv-point-clips').selectAll('clipPath').data(vertices);
+                        var vPointClips = pointClips
+                            .enter().append("svg:clipPath")
+                            .attr("id", function(d, i) { return "nv-clip-"+id+"-"+i;})
+                            .append("svg:circle")
+                            .attr('cx', function(d) { return d[0]; })
+                            .attr('cy', function(d) { return d[1]; })
+                            .attr('r', clipRadius);
+                    }
+
+                    var mouseEventCallback = function(d, mDispatch) {
+                        if (needsUpdate) return 0;
+                        var series = data[d.series];
+                        if (series === undefined) return;
+                        var point  = series.values[d.point];
+                        point['color'] = color(series, d.series);
+
+                        // standardize attributes for tooltip.
+                        point['x'] = getX(point);
+                        point['y'] = getY(point);
+
+                        // can't just get box of event node since it's actually a voronoi polygon
+                        var box = container.node().getBoundingClientRect();
+                        var scrollTop  = window.pageYOffset || document.documentElement.scrollTop;
+                        var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+                        var pos = {
+                            left: x(getX(point, d.point)) + box.left + scrollLeft + margin.left + 10,
+                            top: y(getY(point, d.point)) + box.top + scrollTop + margin.top + 10
+                        };
+
+                        mDispatch({
+                            point: point,
+                            series: series,
+                            pos: pos,
+                            relativePos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
+                            seriesIndex: d.series,
+                            pointIndex: d.point
+                        });
+                    };
+
+                    pointPaths
+                        .on('click', function(d) {
+                            mouseEventCallback(d, dispatch.elementClick);
+                        })
+                        .on('dblclick', function(d) {
+                            mouseEventCallback(d, dispatch.elementDblClick);
+                        })
+                        .on('mouseover', function(d) {
+                            mouseEventCallback(d, dispatch.elementMouseover);
+                        })
+                        .on('mouseout', function(d, i) {
+                            mouseEventCallback(d, dispatch.elementMouseout);
+                        });
+
+                } else {
+                    // add event handlers to points instead voronoi paths
+                    wrap.select('.nv-groups').selectAll('.nv-group')
+                        .selectAll('.nv-point')
+                        //.data(dataWithPoints)
+                        //.style('pointer-events', 'auto') // recativate events, disabled by css
+                        .on('click', function(d,i) {
+                            //nv.log('test', d, i);
+                            if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
+                            var series = data[d.series],
+                                point  = series.values[i];
+
+                            dispatch.elementClick({
+                                point: point,
+                                series: series,
+                                pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top], //TODO: make this pos base on the page
+                                relativePos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],
+                                seriesIndex: d.series,
+                                pointIndex: i
+                            });
+                        })
+                        .on('dblclick', function(d,i) {
+                            if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
+                            var series = data[d.series],
+                                point  = series.values[i];
+
+                            dispatch.elementDblClick({
+                                point: point,
+                                series: series,
+                                pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],//TODO: make this pos base on the page
+                                relativePos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],
+                                seriesIndex: d.series,
+                                pointIndex: i
+                            });
+                        })
+                        .on('mouseover', function(d,i) {
+                            if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
+                            var series = data[d.series],
+                                point  = series.values[i];
+
+                            dispatch.elementMouseover({
+                                point: point,
+                                series: series,
+                                pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],//TODO: make this pos base on the page
+                                relativePos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],
+                                seriesIndex: d.series,
+                                pointIndex: i,
+                                color: color(d, i)
+                            });
+                        })
+                        .on('mouseout', function(d,i) {
+                            if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
+                            var series = data[d.series],
+                                point  = series.values[i];
+
+                            dispatch.elementMouseout({
+                                point: point,
+                                series: series,
+                                pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],//TODO: make this pos base on the page
+                                relativePos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],
+                                seriesIndex: d.series,
+                                pointIndex: i,
+                                color: color(d, i)
+                            });
+                        });
+                }
+            }
+
+            needsUpdate = true;
+            var groups = wrap.select('.nv-groups').selectAll('.nv-group')
+                .data(function(d) { return d }, function(d) { return d.key });
+            groups.enter().append('g')
+                .style('stroke-opacity', 1e-6)
+                .style('fill-opacity', 1e-6);
+            groups.exit()
+                .remove();
+            groups
+                .attr('class', function(d,i) {
+                    return (d.classed || '') + ' nv-group nv-series-' + i;
+                })
+                .classed('hover', function(d) { return d.hover });
+            groups.watchTransition(renderWatch, 'scatter: groups')
+                .style('fill', function(d,i) { return color(d, i) })
+                .style('stroke', function(d,i) { return color(d, i) })
+                .style('stroke-opacity', 1)
+                .style('fill-opacity', .5);
+
+            // create the points, maintaining their IDs from the original data set
+            var points = groups.selectAll('path.nv-point')
+                .data(function(d) {
+                    return d.values.map(
+                        function (point, pointIndex) {
+                            return [point, pointIndex]
+                        }).filter(
+                            function(pointArray, pointIndex) {
+                                return pointActive(pointArray[0], pointIndex)
+                            })
+                    });
+            points.enter().append('path')
+                .style('fill', function (d) { return d.color })
+                .style('stroke', function (d) { return d.color })
+                .attr('transform', function(d) {
+                    return 'translate(' + nv.utils.NaNtoZero(x0(getX(d[0],d[1]))) + ',' + nv.utils.NaNtoZero(y0(getY(d[0],d[1]))) + ')'
+                })
+                .attr('d',
+                    nv.utils.symbol()
+                    .type(function(d) { return getShape(d[0]); })
+                    .size(function(d) { return z(getSize(d[0],d[1])) })
+            );
+            points.exit().remove();
+            groups.exit().selectAll('path.nv-point')
+                .watchTransition(renderWatch, 'scatter exit')
+                .attr('transform', function(d) {
+                    return 'translate(' + nv.utils.NaNtoZero(x(getX(d[0],d[1]))) + ',' + nv.utils.NaNtoZero(y(getY(d[0],d[1]))) + ')'
+                })
+                .remove();
+            points.each(function(d) {
+                d3.select(this)
+                    .classed('nv-point', true)
+                    .classed('nv-point-' + d[1], true)
+                    .classed('nv-noninteractive', !interactive)
+                    .classed('hover',false)
+                ;
+            });
+            points
+                .watchTransition(renderWatch, 'scatter points')
+                .attr('transform', function(d) {
+                    //nv.log(d, getX(d[0],d[1]), x(getX(d[0],d[1])));
+                    return 'translate(' + nv.utils.NaNtoZero(x(getX(d[0],d[1]))) + ',' + nv.utils.NaNtoZero(y(getY(d[0],d[1]))) + ')'
+                })
+                .attr('d',
+                    nv.utils.symbol()
+                    .type(function(d) { return getShape(d[0]); })
+                    .size(function(d) { return z(getSize(d[0],d[1])) })
+            );
+
+            // Delay updating the invisible interactive layer for smoother animation
+            if( interactiveUpdateDelay )
+            {
+                clearTimeout(timeoutID); // stop repeat calls to updateInteractiveLayer
+                timeoutID = setTimeout(updateInteractiveLayer, interactiveUpdateDelay );
+            }
+            else
+            {
+                updateInteractiveLayer();
+            }
+
+            //store old scales for use in transitions on update
+            x0 = x.copy();
+            y0 = y.copy();
+            z0 = z.copy();
+
+        });
+        renderWatch.renderEnd('scatter immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    // utility function calls provided by this chart
+    chart._calls = new function() {
+        this.clearHighlights = function () {
+            nv.dom.write(function() {
+                container.selectAll(".nv-point.hover").classed("hover", false);
+            });
+            return null;
+        };
+        this.highlightPoint = function (seriesIndex, pointIndex, isHoverOver) {
+            nv.dom.write(function() {
+                container.select('.nv-groups')
+                  .selectAll(".nv-series-" + seriesIndex)
+                  .selectAll(".nv-point-" + pointIndex)
+                  .classed("hover", isHoverOver);
+            });
+        };
+    };
+
+    // trigger calls from events too
+    dispatch.on('elementMouseover.point', function(d) {
+        if (interactive) chart._calls.highlightPoint(d.seriesIndex,d.pointIndex,true);
+    });
+
+    dispatch.on('elementMouseout.point', function(d) {
+        if (interactive) chart._calls.highlightPoint(d.seriesIndex,d.pointIndex,false);
+    });
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:        {get: function(){return width;}, set: function(_){width=_;}},
+        height:       {get: function(){return height;}, set: function(_){height=_;}},
+        xScale:       {get: function(){return x;}, set: function(_){x=_;}},
+        yScale:       {get: function(){return y;}, set: function(_){y=_;}},
+        pointScale:   {get: function(){return z;}, set: function(_){z=_;}},
+        xDomain:      {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
+        yDomain:      {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
+        pointDomain:  {get: function(){return sizeDomain;}, set: function(_){sizeDomain=_;}},
+        xRange:       {get: function(){return xRange;}, set: function(_){xRange=_;}},
+        yRange:       {get: function(){return yRange;}, set: function(_){yRange=_;}},
+        pointRange:   {get: function(){return sizeRange;}, set: function(_){sizeRange=_;}},
+        forceX:       {get: function(){return forceX;}, set: function(_){forceX=_;}},
+        forceY:       {get: function(){return forceY;}, set: function(_){forceY=_;}},
+        forcePoint:   {get: function(){return forceSize;}, set: function(_){forceSize=_;}},
+        interactive:  {get: function(){return interactive;}, set: function(_){interactive=_;}},
+        pointActive:  {get: function(){return pointActive;}, set: function(_){pointActive=_;}},
+        padDataOuter: {get: function(){return padDataOuter;}, set: function(_){padDataOuter=_;}},
+        padData:      {get: function(){return padData;}, set: function(_){padData=_;}},
+        clipEdge:     {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
+        clipVoronoi:  {get: function(){return clipVoronoi;}, set: function(_){clipVoronoi=_;}},
+        clipRadius:   {get: function(){return clipRadius;}, set: function(_){clipRadius=_;}},
+        showVoronoi:   {get: function(){return showVoronoi;}, set: function(_){showVoronoi=_;}},
+        id:           {get: function(){return id;}, set: function(_){id=_;}},
+        interactiveUpdateDelay: {get:function(){return interactiveUpdateDelay;}, set: function(_){interactiveUpdateDelay=_;}},
+
+
+        // simple functor options
+        x:     {get: function(){return getX;}, set: function(_){getX = d3.functor(_);}},
+        y:     {get: function(){return getY;}, set: function(_){getY = d3.functor(_);}},
+        pointSize: {get: function(){return getSize;}, set: function(_){getSize = d3.functor(_);}},
+        pointShape: {get: function(){return getShape;}, set: function(_){getShape = d3.functor(_);}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+        }},
+        color: {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }},
+        useVoronoi: {get: function(){return useVoronoi;}, set: function(_){
+            useVoronoi = _;
+            if (useVoronoi === false) {
+                clipVoronoi = false;
+            }
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+    return chart;
+};
+
+nv.models.scatterChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var scatter      = nv.models.scatter()
+        , xAxis        = nv.models.axis()
+        , yAxis        = nv.models.axis()
+        , legend       = nv.models.legend()
+        , distX        = nv.models.distribution()
+        , distY        = nv.models.distribution()
+        , tooltip      = nv.models.tooltip()
+        ;
+
+    var margin       = {top: 30, right: 20, bottom: 50, left: 75}
+        , width        = null
+        , height       = null
+        , container    = null
+        , color        = nv.utils.defaultColor()
+        , x            = scatter.xScale()
+        , y            = scatter.yScale()
+        , showDistX    = false
+        , showDistY    = false
+        , showLegend   = true
+        , showXAxis    = true
+        , showYAxis    = true
+        , rightAlignYAxis = false
+        , state = nv.utils.state()
+        , defaultState = null
+        , dispatch = d3.dispatch('stateChange', 'changeState', 'renderEnd')
+        , noData       = null
+        , duration = 250
+        ;
+
+    scatter.xScale(x).yScale(y);
+    xAxis.orient('bottom').tickPadding(10);
+    yAxis
+        .orient((rightAlignYAxis) ? 'right' : 'left')
+        .tickPadding(10)
+    ;
+    distX.axis('x');
+    distY.axis('y');
+    tooltip
+        .headerFormatter(function(d, i) {
+            return xAxis.tickFormat()(d, i);
+        })
+        .valueFormatter(function(d, i) {
+            return yAxis.tickFormat()(d, i);
+        });
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var x0, y0
+        , renderWatch = nv.utils.renderWatch(dispatch, duration);
+
+    var stateGetter = function(data) {
+        return function(){
+            return {
+                active: data.map(function(d) { return !d.disabled })
+            };
+        }
+    };
+
+    var stateSetter = function(data) {
+        return function(state) {
+            if (state.active !== undefined)
+                data.forEach(function(series,i) {
+                    series.disabled = !state.active[i];
+                });
+        }
+    };
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(scatter);
+        if (showXAxis) renderWatch.models(xAxis);
+        if (showYAxis) renderWatch.models(yAxis);
+        if (showDistX) renderWatch.models(distX);
+        if (showDistY) renderWatch.models(distY);
+
+        selection.each(function(data) {
+            var that = this;
+
+            container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            chart.update = function() {
+                if (duration === 0)
+                    container.call(chart);
+                else
+                    container.transition().duration(duration).call(chart);
+            };
+            chart.container = this;
+
+            state
+                .setter(stateSetter(data), chart.update)
+                .getter(stateGetter(data))
+                .update();
+
+            // DEPRECATED set state.disableddisabled
+            state.disabled = data.map(function(d) { return !!d.disabled });
+
+            if (!defaultState) {
+                var key;
+                defaultState = {};
+                for (key in state) {
+                    if (state[key] instanceof Array)
+                        defaultState[key] = state[key].slice(0);
+                    else
+                        defaultState[key] = state[key];
+                }
+            }
+
+            // Display noData message if there's nothing to show.
+            if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
+                nv.utils.noData(chart, container);
+                renderWatch.renderEnd('scatter immediate');
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            // Setup Scales
+            x = scatter.xScale();
+            y = scatter.yScale();
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-scatterChart').data([data]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatterChart nv-chart-' + scatter.id());
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            // background for pointer events
+            gEnter.append('rect').attr('class', 'nvd3 nv-background').style("pointer-events","none");
+
+            gEnter.append('g').attr('class', 'nv-x nv-axis');
+            gEnter.append('g').attr('class', 'nv-y nv-axis');
+            gEnter.append('g').attr('class', 'nv-scatterWrap');
+            gEnter.append('g').attr('class', 'nv-regressionLinesWrap');
+            gEnter.append('g').attr('class', 'nv-distWrap');
+            gEnter.append('g').attr('class', 'nv-legendWrap');
+
+            if (rightAlignYAxis) {
+                g.select(".nv-y.nv-axis")
+                    .attr("transform", "translate(" + availableWidth + ",0)");
+            }
+
+            // Legend
+            if (showLegend) {
+                var legendWidth = availableWidth;
+                legend.width(legendWidth);
+
+                wrap.select('.nv-legendWrap')
+                    .datum(data)
+                    .call(legend);
+
+                if ( margin.top != legend.height()) {
+                    margin.top = legend.height();
+                    availableHeight = nv.utils.availableHeight(height, container, margin);
+                }
+
+                wrap.select('.nv-legendWrap')
+                    .attr('transform', 'translate(0' + ',' + (-margin.top) +')');
+            }
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            // Main Chart Component(s)
+            scatter
+                .width(availableWidth)
+                .height(availableHeight)
+                .color(data.map(function(d,i) {
+                    d.color = d.color || color(d, i);
+                    return d.color;
+                }).filter(function(d,i) { return !data[i].disabled }));
+
+            wrap.select('.nv-scatterWrap')
+                .datum(data.filter(function(d) { return !d.disabled }))
+                .call(scatter);
+
+
+            wrap.select('.nv-regressionLinesWrap')
+                .attr('clip-path', 'url(#nv-edge-clip-' + scatter.id() + ')');
+
+            var regWrap = wrap.select('.nv-regressionLinesWrap').selectAll('.nv-regLines')
+                .data(function (d) {
+                    return d;
+                });
+
+            regWrap.enter().append('g').attr('class', 'nv-regLines');
+
+            var regLine = regWrap.selectAll('.nv-regLine')
+                .data(function (d) {
+                    return [d]
+                });
+
+            regLine.enter()
+                .append('line').attr('class', 'nv-regLine')
+                .style('stroke-opacity', 0);
+
+            // don't add lines unless we have slope and intercept to use
+            regLine.filter(function(d) {
+                return d.intercept && d.slope;
+            })
+                .watchTransition(renderWatch, 'scatterPlusLineChart: regline')
+                .attr('x1', x.range()[0])
+                .attr('x2', x.range()[1])
+                .attr('y1', function (d, i) {
+                    return y(x.domain()[0] * d.slope + d.intercept)
+                })
+                .attr('y2', function (d, i) {
+                    return y(x.domain()[1] * d.slope + d.intercept)
+                })
+                .style('stroke', function (d, i, j) {
+                    return color(d, j)
+                })
+                .style('stroke-opacity', function (d, i) {
+                    return (d.disabled || typeof d.slope === 'undefined' || typeof d.intercept === 'undefined') ? 0 : 1
+                });
+
+            // Setup Axes
+            if (showXAxis) {
+                xAxis
+                    .scale(x)
+                    ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
+                    .tickSize( -availableHeight , 0);
+
+                g.select('.nv-x.nv-axis')
+                    .attr('transform', 'translate(0,' + y.range()[0] + ')')
+                    .call(xAxis);
+            }
+
+            if (showYAxis) {
+                yAxis
+                    .scale(y)
+                    ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
+                    .tickSize( -availableWidth, 0);
+
+                g.select('.nv-y.nv-axis')
+                    .call(yAxis);
+            }
+
+            // Setup Distribution
+            if (showDistX) {
+                distX
+                    .getData(scatter.x())
+                    .scale(x)
+                    .width(availableWidth)
+                    .color(data.map(function(d,i) {
+                        return d.color || color(d, i);
+                    }).filter(function(d,i) { return !data[i].disabled }));
+                gEnter.select('.nv-distWrap').append('g')
+                    .attr('class', 'nv-distributionX');
+                g.select('.nv-distributionX')
+                    .attr('transform', 'translate(0,' + y.range()[0] + ')')
+                    .datum(data.filter(function(d) { return !d.disabled }))
+                    .call(distX);
+            }
+
+            if (showDistY) {
+                distY
+                    .getData(scatter.y())
+                    .scale(y)
+                    .width(availableHeight)
+                    .color(data.map(function(d,i) {
+                        return d.color || color(d, i);
+                    }).filter(function(d,i) { return !data[i].disabled }));
+                gEnter.select('.nv-distWrap').append('g')
+                    .attr('class', 'nv-distributionY');
+                g.select('.nv-distributionY')
+                    .attr('transform', 'translate(' + (rightAlignYAxis ? availableWidth : -distY.size() ) + ',0)')
+                    .datum(data.filter(function(d) { return !d.disabled }))
+                    .call(distY);
+            }
+
+            //============================================================
+            // Event Handling/Dispatching (in chart's scope)
+            //------------------------------------------------------------
+
+            legend.dispatch.on('stateChange', function(newState) {
+                for (var key in newState)
+                    state[key] = newState[key];
+                dispatch.stateChange(state);
+                chart.update();
+            });
+
+            // Update chart from a state object passed to event handler
+            dispatch.on('changeState', function(e) {
+                if (typeof e.disabled !== 'undefined') {
+                    data.forEach(function(series,i) {
+                        series.disabled = e.disabled[i];
+                    });
+                    state.disabled = e.disabled;
+                }
+                chart.update();
+            });
+
+            // mouseover needs availableHeight so we just keep scatter mouse events inside the chart block
+            scatter.dispatch.on('elementMouseout.tooltip', function(evt) {
+                tooltip.hidden(true);
+                container.select('.nv-chart-' + scatter.id() + ' .nv-series-' + evt.seriesIndex + ' .nv-distx-' + evt.pointIndex)
+                    .attr('y1', 0);
+                container.select('.nv-chart-' + scatter.id() + ' .nv-series-' + evt.seriesIndex + ' .nv-disty-' + evt.pointIndex)
+                    .attr('x2', distY.size());
+            });
+
+            scatter.dispatch.on('elementMouseover.tooltip', function(evt) {
+                container.select('.nv-series-' + evt.seriesIndex + ' .nv-distx-' + evt.pointIndex)
+                    .attr('y1', evt.relativePos[1] - availableHeight);
+                container.select('.nv-series-' + evt.seriesIndex + ' .nv-disty-' + evt.pointIndex)
+                    .attr('x2', evt.relativePos[0] + distX.size());
+                tooltip.data(evt).hidden(false);
+            });
+
+            //store old scales for use in transitions on update
+            x0 = x.copy();
+            y0 = y.copy();
+
+        });
+
+        renderWatch.renderEnd('scatter with line immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    // expose chart's sub-components
+    chart.dispatch = dispatch;
+    chart.scatter = scatter;
+    chart.legend = legend;
+    chart.xAxis = xAxis;
+    chart.yAxis = yAxis;
+    chart.distX = distX;
+    chart.distY = distY;
+    chart.tooltip = tooltip;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        container:  {get: function(){return container;}, set: function(_){container=_;}},
+        showDistX:  {get: function(){return showDistX;}, set: function(_){showDistX=_;}},
+        showDistY:  {get: function(){return showDistY;}, set: function(_){showDistY=_;}},
+        showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
+        showXAxis:  {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
+        showYAxis:  {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
+        defaultState:     {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
+        noData:     {get: function(){return noData;}, set: function(_){noData=_;}},
+        duration:   {get: function(){return duration;}, set: function(_){duration=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
+            rightAlignYAxis = _;
+            yAxis.orient( (_) ? 'right' : 'left');
+        }},
+        color: {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+            legend.color(color);
+            distX.color(color);
+            distY.color(color);
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, scatter);
+    nv.utils.initOptions(chart);
+    return chart;
+};
+
+nv.models.sparkline = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 2, right: 0, bottom: 2, left: 0}
+        , width = 400
+        , height = 32
+        , container = null
+        , animate = true
+        , x = d3.scale.linear()
+        , y = d3.scale.linear()
+        , getX = function(d) { return d.x }
+        , getY = function(d) { return d.y }
+        , color = nv.utils.getColor(['#000'])
+        , xDomain
+        , yDomain
+        , xRange
+        , yRange
+        , dispatch = d3.dispatch('renderEnd')
+        ;
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var renderWatch = nv.utils.renderWatch(dispatch);
+    
+    function chart(selection) {
+        renderWatch.reset();
+        selection.each(function(data) {
+            var availableWidth = width - margin.left - margin.right,
+                availableHeight = height - margin.top - margin.bottom;
+
+            container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            // Setup Scales
+            x   .domain(xDomain || d3.extent(data, getX ))
+                .range(xRange || [0, availableWidth]);
+
+            y   .domain(yDomain || d3.extent(data, getY ))
+                .range(yRange || [availableHeight, 0]);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-sparkline').data([data]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sparkline');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
+
+            var paths = wrap.selectAll('path')
+                .data(function(d) { return [d] });
+            paths.enter().append('path');
+            paths.exit().remove();
+            paths
+                .style('stroke', function(d,i) { return d.color || color(d, i) })
+                .attr('d', d3.svg.line()
+                    .x(function(d,i) { return x(getX(d,i)) })
+                    .y(function(d,i) { return y(getY(d,i)) })
+            );
+
+            // TODO: Add CURRENT data point (Need Min, Mac, Current / Most recent)
+            var points = wrap.selectAll('circle.nv-point')
+                .data(function(data) {
+                    var yValues = data.map(function(d, i) { return getY(d,i); });
+                    function pointIndex(index) {
+                        if (index != -1) {
+                            var result = data[index];
+                            result.pointIndex = index;
+                            return result;
+                        } else {
+                            return null;
+                        }
+                    }
+                    var maxPoint = pointIndex(yValues.lastIndexOf(y.domain()[1])),
+                        minPoint = pointIndex(yValues.indexOf(y.domain()[0])),
+                        currentPoint = pointIndex(yValues.length - 1);
+                    return [minPoint, maxPoint, currentPoint].filter(function (d) {return d != null;});
+                });
+            points.enter().append('circle');
+            points.exit().remove();
+            points
+                .attr('cx', function(d,i) { return x(getX(d,d.pointIndex)) })
+                .attr('cy', function(d,i) { return y(getY(d,d.pointIndex)) })
+                .attr('r', 2)
+                .attr('class', function(d,i) {
+                    return getX(d, d.pointIndex) == x.domain()[1] ? 'nv-point nv-currentValue' :
+                            getY(d, d.pointIndex) == y.domain()[0] ? 'nv-point nv-minValue' : 'nv-point nv-maxValue'
+                });
+        });
+        
+        renderWatch.renderEnd('sparkline immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:     {get: function(){return width;}, set: function(_){width=_;}},
+        height:    {get: function(){return height;}, set: function(_){height=_;}},
+        xDomain:   {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
+        yDomain:   {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
+        xRange:    {get: function(){return xRange;}, set: function(_){xRange=_;}},
+        yRange:    {get: function(){return yRange;}, set: function(_){yRange=_;}},
+        xScale:    {get: function(){return x;}, set: function(_){x=_;}},
+        yScale:    {get: function(){return y;}, set: function(_){y=_;}},
+        animate:   {get: function(){return animate;}, set: function(_){animate=_;}},
+
+        //functor options
+        x: {get: function(){return getX;}, set: function(_){getX=d3.functor(_);}},
+        y: {get: function(){return getY;}, set: function(_){getY=d3.functor(_);}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }}
+    });
+
+    chart.dispatch = dispatch;
+    nv.utils.initOptions(chart);
+    return chart;
+};
+
+nv.models.sparklinePlus = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var sparkline = nv.models.sparkline();
+
+    var margin = {top: 15, right: 100, bottom: 10, left: 50}
+        , width = null
+        , height = null
+        , x
+        , y
+        , index = []
+        , paused = false
+        , xTickFormat = d3.format(',r')
+        , yTickFormat = d3.format(',.2f')
+        , showLastValue = true
+        , alignValue = true
+        , rightAlignValue = false
+        , noData = null
+        , dispatch = d3.dispatch('renderEnd')
+        ;
+        
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var renderWatch = nv.utils.renderWatch(dispatch);
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(sparkline);
+        selection.each(function(data) {
+            var container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            chart.update = function() { container.call(chart); };
+            chart.container = this;
+
+            // Display No Data message if there's nothing to show.
+            if (!data || !data.length) {
+                nv.utils.noData(chart, container)
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            var currentValue = sparkline.y()(data[data.length-1], data.length-1);
+
+            // Setup Scales
+            x = sparkline.xScale();
+            y = sparkline.yScale();
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-sparklineplus').data([data]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sparklineplus');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-sparklineWrap');
+            gEnter.append('g').attr('class', 'nv-valueWrap');
+            gEnter.append('g').attr('class', 'nv-hoverArea');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            // Main Chart Component(s)
+            var sparklineWrap = g.select('.nv-sparklineWrap');
+
+            sparkline.width(availableWidth).height(availableHeight);
+            sparklineWrap.call(sparkline);
+
+            if (showLastValue) {
+                var valueWrap = g.select('.nv-valueWrap');
+                var value = valueWrap.selectAll('.nv-currentValue')
+                    .data([currentValue]);
+
+                value.enter().append('text').attr('class', 'nv-currentValue')
+                    .attr('dx', rightAlignValue ? -8 : 8)
+                    .attr('dy', '.9em')
+                    .style('text-anchor', rightAlignValue ? 'end' : 'start');
+
+                value
+                    .attr('x', availableWidth + (rightAlignValue ? margin.right : 0))
+                    .attr('y', alignValue ? function (d) {
+                        return y(d)
+                    } : 0)
+                    .style('fill', sparkline.color()(data[data.length - 1], data.length - 1))
+                    .text(yTickFormat(currentValue));
+            }
+
+            gEnter.select('.nv-hoverArea').append('rect')
+                .on('mousemove', sparklineHover)
+                .on('click', function() { paused = !paused })
+                .on('mouseout', function() { index = []; updateValueLine(); });
+
+            g.select('.nv-hoverArea rect')
+                .attr('transform', function(d) { return 'translate(' + -margin.left + ',' + -margin.top + ')' })
+                .attr('width', availableWidth + margin.left + margin.right)
+                .attr('height', availableHeight + margin.top);
+
+            //index is currently global (within the chart), may or may not keep it that way
+            function updateValueLine() {
+                if (paused) return;
+
+                var hoverValue = g.selectAll('.nv-hoverValue').data(index);
+
+                var hoverEnter = hoverValue.enter()
+                    .append('g').attr('class', 'nv-hoverValue')
+                    .style('stroke-opacity', 0)
+                    .style('fill-opacity', 0);
+
+                hoverValue.exit()
+                    .transition().duration(250)
+                    .style('stroke-opacity', 0)
+                    .style('fill-opacity', 0)
+                    .remove();
+
+                hoverValue
+                    .attr('transform', function(d) { return 'translate(' + x(sparkline.x()(data[d],d)) + ',0)' })
+                    .transition().duration(250)
+                    .style('stroke-opacity', 1)
+                    .style('fill-opacity', 1);
+
+                if (!index.length) return;
+
+                hoverEnter.append('line')
+                    .attr('x1', 0)
+                    .attr('y1', -margin.top)
+                    .attr('x2', 0)
+                    .attr('y2', availableHeight);
+
+                hoverEnter.append('text').attr('class', 'nv-xValue')
+                    .attr('x', -6)
+                    .attr('y', -margin.top)
+                    .attr('text-anchor', 'end')
+                    .attr('dy', '.9em');
+
+                g.select('.nv-hoverValue .nv-xValue')
+                    .text(xTickFormat(sparkline.x()(data[index[0]], index[0])));
+
+                hoverEnter.append('text').attr('class', 'nv-yValue')
+                    .attr('x', 6)
+                    .attr('y', -margin.top)
+                    .attr('text-anchor', 'start')
+                    .attr('dy', '.9em');
+
+                g.select('.nv-hoverValue .nv-yValue')
+                    .text(yTickFormat(sparkline.y()(data[index[0]], index[0])));
+            }
+
+            function sparklineHover() {
+                if (paused) return;
+
+                var pos = d3.mouse(this)[0] - margin.left;
+
+                function getClosestIndex(data, x) {
+                    var distance = Math.abs(sparkline.x()(data[0], 0) - x);
+                    var closestIndex = 0;
+                    for (var i = 0; i < data.length; i++){
+                        if (Math.abs(sparkline.x()(data[i], i) - x) < distance) {
+                            distance = Math.abs(sparkline.x()(data[i], i) - x);
+                            closestIndex = i;
+                        }
+                    }
+                    return closestIndex;
+                }
+
+                index = [getClosestIndex(data, Math.round(x.invert(pos)))];
+                updateValueLine();
+            }
+
+        });
+        renderWatch.renderEnd('sparklinePlus immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    // expose chart's sub-components
+    chart.dispatch = dispatch;
+    chart.sparkline = sparkline;
+
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:           {get: function(){return width;}, set: function(_){width=_;}},
+        height:          {get: function(){return height;}, set: function(_){height=_;}},
+        xTickFormat:     {get: function(){return xTickFormat;}, set: function(_){xTickFormat=_;}},
+        yTickFormat:     {get: function(){return yTickFormat;}, set: function(_){yTickFormat=_;}},
+        showLastValue:   {get: function(){return showLastValue;}, set: function(_){showLastValue=_;}},
+        alignValue:      {get: function(){return alignValue;}, set: function(_){alignValue=_;}},
+        rightAlignValue: {get: function(){return rightAlignValue;}, set: function(_){rightAlignValue=_;}},
+        noData:          {get: function(){return noData;}, set: function(_){noData=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, sparkline);
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+
+nv.models.stackedArea = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , width = 960
+        , height = 500
+        , color = nv.utils.defaultColor() // a function that computes the color
+        , id = Math.floor(Math.random() * 100000) //Create semi-unique ID incase user doesn't selet one
+        , container = null
+        , getX = function(d) { return d.x } // accessor to get the x value from a data point
+        , getY = function(d) { return d.y } // accessor to get the y value from a data point
+        , defined = function(d,i) { return !isNaN(getY(d,i)) && getY(d,i) !== null } // allows a line to be not continuous when it is not defined
+        , style = 'stack'
+        , offset = 'zero'
+        , order = 'default'
+        , interpolate = 'linear'  // controls the line interpolation
+        , clipEdge = false // if true, masks lines within x and y scale
+        , x //can be accessed via chart.xScale()
+        , y //can be accessed via chart.yScale()
+        , scatter = nv.models.scatter()
+        , duration = 250
+        , dispatch =  d3.dispatch('areaClick', 'areaMouseover', 'areaMouseout','renderEnd', 'elementClick', 'elementMouseover', 'elementMouseout')
+        ;
+
+    scatter
+        .pointSize(2.2) // default size
+        .pointDomain([2.2, 2.2]) // all the same size by default
+    ;
+
+    /************************************
+     * offset:
+     *   'wiggle' (stream)
+     *   'zero' (stacked)
+     *   'expand' (normalize to 100%)
+     *   'silhouette' (simple centered)
+     *
+     * order:
+     *   'inside-out' (stream)
+     *   'default' (input order)
+     ************************************/
+
+    var renderWatch = nv.utils.renderWatch(dispatch, duration);
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(scatter);
+        selection.each(function(data) {
+            var availableWidth = width - margin.left - margin.right,
+                availableHeight = height - margin.top - margin.bottom;
+
+            container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            // Setup Scales
+            x = scatter.xScale();
+            y = scatter.yScale();
+
+            var dataRaw = data;
+            // Injecting point index into each point because d3.layout.stack().out does not give index
+            data.forEach(function(aseries, i) {
+                aseries.seriesIndex = i;
+                aseries.values = aseries.values.map(function(d, j) {
+                    d.index = j;
+                    d.seriesIndex = i;
+                    return d;
+                });
+            });
+
+            var dataFiltered = data.filter(function(series) {
+                return !series.disabled;
+            });
+
+            data = d3.layout.stack()
+                .order(order)
+                .offset(offset)
+                .values(function(d) { return d.values })  //TODO: make values customizeable in EVERY model in this fashion
+                .x(getX)
+                .y(getY)
+                .out(function(d, y0, y) {
+                    d.display = {
+                        y: y,
+                        y0: y0
+                    };
+                })
+            (dataFiltered);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-stackedarea').data([data]);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-stackedarea');
+            var defsEnter = wrapEnter.append('defs');
+            var gEnter = wrapEnter.append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-areaWrap');
+            gEnter.append('g').attr('class', 'nv-scatterWrap');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+            
+            // If the user has not specified forceY, make sure 0 is included in the domain
+            // Otherwise, use user-specified values for forceY
+            if (scatter.forceY().length == 0) {
+                scatter.forceY().push(0);
+            }
+            
+            scatter
+                .width(availableWidth)
+                .height(availableHeight)
+                .x(getX)
+                .y(function(d) {
+                    if (d.display !== undefined) { return d.display.y + d.display.y0; }
+                })
+                .forceY([0])
+                .color(data.map(function(d,i) {
+                    d.color = d.color || color(d, d.seriesIndex);
+                    return d.color;
+                }));
+
+            var scatterWrap = g.select('.nv-scatterWrap')
+                .datum(data);
+
+            scatterWrap.call(scatter);
+
+            defsEnter.append('clipPath')
+                .attr('id', 'nv-edge-clip-' + id)
+                .append('rect');
+
+            wrap.select('#nv-edge-clip-' + id + ' rect')
+                .attr('width', availableWidth)
+                .attr('height', availableHeight);
+
+            g.attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : '');
+
+            var area = d3.svg.area()
+                .defined(defined)
+                .x(function(d,i)  { return x(getX(d,i)) })
+                .y0(function(d) {
+                    return y(d.display.y0)
+                })
+                .y1(function(d) {
+                    return y(d.display.y + d.display.y0)
+                })
+                .interpolate(interpolate);
+
+            var zeroArea = d3.svg.area()
+                .defined(defined)
+                .x(function(d,i)  { return x(getX(d,i)) })
+                .y0(function(d) { return y(d.display.y0) })
+                .y1(function(d) { return y(d.display.y0) });
+
+            var path = g.select('.nv-areaWrap').selectAll('path.nv-area')
+                .data(function(d) { return d });
+
+            path.enter().append('path').attr('class', function(d,i) { return 'nv-area nv-area-' + i })
+                .attr('d', function(d,i){
+                    return zeroArea(d.values, d.seriesIndex);
+                })
+                .on('mouseover', function(d,i) {
+                    d3.select(this).classed('hover', true);
+                    dispatch.areaMouseover({
+                        point: d,
+                        series: d.key,
+                        pos: [d3.event.pageX, d3.event.pageY],
+                        seriesIndex: d.seriesIndex
+                    });
+                })
+                .on('mouseout', function(d,i) {
+                    d3.select(this).classed('hover', false);
+                    dispatch.areaMouseout({
+                        point: d,
+                        series: d.key,
+                        pos: [d3.event.pageX, d3.event.pageY],
+                        seriesIndex: d.seriesIndex
+                    });
+                })
+                .on('click', function(d,i) {
+                    d3.select(this).classed('hover', false);
+                    dispatch.areaClick({
+                        point: d,
+                        series: d.key,
+                        pos: [d3.event.pageX, d3.event.pageY],
+                        seriesIndex: d.seriesIndex
+                    });
+                });
+
+            path.exit().remove();
+            path.style('fill', function(d,i){
+                    return d.color || color(d, d.seriesIndex)
+                })
+                .style('stroke', function(d,i){ return d.color || color(d, d.seriesIndex) });
+            path.watchTransition(renderWatch,'stackedArea path')
+                .attr('d', function(d,i) {
+                    return area(d.values,i)
+                });
+
+            //============================================================
+            // Event Handling/Dispatching (in chart's scope)
+            //------------------------------------------------------------
+
+            scatter.dispatch.on('elementMouseover.area', function(e) {
+                g.select('.nv-chart-' + id + ' .nv-area-' + e.seriesIndex).classed('hover', true);
+            });
+            scatter.dispatch.on('elementMouseout.area', function(e) {
+                g.select('.nv-chart-' + id + ' .nv-area-' + e.seriesIndex).classed('hover', false);
+            });
+
+            //Special offset functions
+            chart.d3_stackedOffset_stackPercent = function(stackData) {
+                var n = stackData.length,    //How many series
+                    m = stackData[0].length,     //how many points per series
+                    i,
+                    j,
+                    o,
+                    y0 = [];
+
+                for (j = 0; j < m; ++j) { //Looping through all points
+                    for (i = 0, o = 0; i < dataRaw.length; i++) { //looping through all series
+                        o += getY(dataRaw[i].values[j]); //total y value of all series at a certian point in time.
+                    }
+
+                    if (o) for (i = 0; i < n; i++) { //(total y value of all series at point in time i) != 0
+                        stackData[i][j][1] /= o;
+                    } else { //(total y value of all series at point in time i) == 0
+                        for (i = 0; i < n; i++) {
+                            stackData[i][j][1] = 0;
+                        }
+                    }
+                }
+                for (j = 0; j < m; ++j) y0[j] = 0;
+                return y0;
+            };
+
+        });
+
+        renderWatch.renderEnd('stackedArea immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Global getters and setters
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.scatter = scatter;
+
+    scatter.dispatch.on('elementClick', function(){ dispatch.elementClick.apply(this, arguments); });
+    scatter.dispatch.on('elementMouseover', function(){ dispatch.elementMouseover.apply(this, arguments); });
+    scatter.dispatch.on('elementMouseout', function(){ dispatch.elementMouseout.apply(this, arguments); });
+
+    chart.interpolate = function(_) {
+        if (!arguments.length) return interpolate;
+        interpolate = _;
+        return chart;
+    };
+
+    chart.duration = function(_) {
+        if (!arguments.length) return duration;
+        duration = _;
+        renderWatch.reset(duration);
+        scatter.duration(duration);
+        return chart;
+    };
+
+    chart.dispatch = dispatch;
+    chart.scatter = scatter;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        defined: {get: function(){return defined;}, set: function(_){defined=_;}},
+        clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
+        offset:      {get: function(){return offset;}, set: function(_){offset=_;}},
+        order:    {get: function(){return order;}, set: function(_){order=_;}},
+        interpolate:    {get: function(){return interpolate;}, set: function(_){interpolate=_;}},
+
+        // simple functor options
+        x:     {get: function(){return getX;}, set: function(_){getX = d3.functor(_);}},
+        y:     {get: function(){return getY;}, set: function(_){getY = d3.functor(_);}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+        }},
+        style: {get: function(){return style;}, set: function(_){
+            style = _;
+            switch (style) {
+                case 'stack':
+                    chart.offset('zero');
+                    chart.order('default');
+                    break;
+                case 'stream':
+                    chart.offset('wiggle');
+                    chart.order('inside-out');
+                    break;
+                case 'stream-center':
+                    chart.offset('silhouette');
+                    chart.order('inside-out');
+                    break;
+                case 'expand':
+                    chart.offset('expand');
+                    chart.order('default');
+                    break;
+                case 'stack_percent':
+                    chart.offset(chart.d3_stackedOffset_stackPercent);
+                    chart.order('default');
+                    break;
+            }
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+            scatter.duration(duration);
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, scatter);
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+
+nv.models.stackedAreaChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var stacked = nv.models.stackedArea()
+        , xAxis = nv.models.axis()
+        , yAxis = nv.models.axis()
+        , legend = nv.models.legend()
+        , controls = nv.models.legend()
+        , interactiveLayer = nv.interactiveGuideline()
+        , tooltip = nv.models.tooltip()
+        ;
+
+    var margin = {top: 30, right: 25, bottom: 50, left: 60}
+        , width = null
+        , height = null
+        , color = nv.utils.defaultColor()
+        , showControls = true
+        , showLegend = true
+        , showXAxis = true
+        , showYAxis = true
+        , rightAlignYAxis = false
+        , useInteractiveGuideline = false
+        , showTotalInTooltip = true
+        , totalLabel = 'TOTAL'
+        , x //can be accessed via chart.xScale()
+        , y //can be accessed via chart.yScale()
+        , state = nv.utils.state()
+        , defaultState = null
+        , noData = null
+        , dispatch = d3.dispatch('stateChange', 'changeState','renderEnd')
+        , controlWidth = 250
+        , controlOptions = ['Stacked','Stream','Expanded']
+        , controlLabels = {}
+        , duration = 250
+        ;
+
+    state.style = stacked.style();
+    xAxis.orient('bottom').tickPadding(7);
+    yAxis.orient((rightAlignYAxis) ? 'right' : 'left');
+
+    tooltip
+        .headerFormatter(function(d, i) {
+            return xAxis.tickFormat()(d, i);
+        })
+        .valueFormatter(function(d, i) {
+            return yAxis.tickFormat()(d, i);
+        });
+
+    interactiveLayer.tooltip
+        .headerFormatter(function(d, i) {
+            return xAxis.tickFormat()(d, i);
+        })
+        .valueFormatter(function(d, i) {
+            return yAxis.tickFormat()(d, i);
+        });
+
+    var oldYTickFormat = null,
+        oldValueFormatter = null;
+
+    controls.updateState(false);
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var renderWatch = nv.utils.renderWatch(dispatch);
+    var style = stacked.style();
+
+    var stateGetter = function(data) {
+        return function(){
+            return {
+                active: data.map(function(d) { return !d.disabled }),
+                style: stacked.style()
+            };
+        }
+    };
+
+    var stateSetter = function(data) {
+        return function(state) {
+            if (state.style !== undefined)
+                style = state.style;
+            if (state.active !== undefined)
+                data.forEach(function(series,i) {
+                    series.disabled = !state.active[i];
+                });
+        }
+    };
+
+    var percentFormatter = d3.format('%');
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(stacked);
+        if (showXAxis) renderWatch.models(xAxis);
+        if (showYAxis) renderWatch.models(yAxis);
+
+        selection.each(function(data) {
+            var container = d3.select(this),
+                that = this;
+            nv.utils.initSVG(container);
+
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            chart.update = function() { container.transition().duration(duration).call(chart); };
+            chart.container = this;
+
+            state
+                .setter(stateSetter(data), chart.update)
+                .getter(stateGetter(data))
+                .update();
+
+            // DEPRECATED set state.disabled
+            state.disabled = data.map(function(d) { return !!d.disabled });
+
+            if (!defaultState) {
+                var key;
+                defaultState = {};
+                for (key in state) {
+                    if (state[key] instanceof Array)
+                        defaultState[key] = state[key].slice(0);
+                    else
+                        defaultState[key] = state[key];
+                }
+            }
+
+            // Display No Data message if there's nothing to show.
+            if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
+                nv.utils.noData(chart, container)
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            // Setup Scales
+            x = stacked.xScale();
+            y = stacked.yScale();
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-stackedAreaChart').data([data]);
+            var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-stackedAreaChart').append('g');
+            var g = wrap.select('g');
+
+            gEnter.append("rect").style("opacity",0);
+            gEnter.append('g').attr('class', 'nv-x nv-axis');
+            gEnter.append('g').attr('class', 'nv-y nv-axis');
+            gEnter.append('g').attr('class', 'nv-stackedWrap');
+            gEnter.append('g').attr('class', 'nv-legendWrap');
+            gEnter.append('g').attr('class', 'nv-controlsWrap');
+            gEnter.append('g').attr('class', 'nv-interactive');
+
+            g.select("rect").attr("width",availableWidth).attr("height",availableHeight);
+
+            // Legend
+            if (showLegend) {
+                var legendWidth = (showControls) ? availableWidth - controlWidth : availableWidth;
+
+                legend.width(legendWidth);
+                g.select('.nv-legendWrap').datum(data).call(legend);
+
+                if ( margin.top != legend.height()) {
+                    margin.top = legend.height();
+                    availableHeight = nv.utils.availableHeight(height, container, margin);
+                }
+
+                g.select('.nv-legendWrap')
+                    .attr('transform', 'translate(' + (availableWidth-legendWidth) + ',' + (-margin.top) +')');
+            }
+
+            // Controls
+            if (showControls) {
+                var controlsData = [
+                    {
+                        key: controlLabels.stacked || 'Stacked',
+                        metaKey: 'Stacked',
+                        disabled: stacked.style() != 'stack',
+                        style: 'stack'
+                    },
+                    {
+                        key: controlLabels.stream || 'Stream',
+                        metaKey: 'Stream',
+                        disabled: stacked.style() != 'stream',
+                        style: 'stream'
+                    },
+                    {
+                        key: controlLabels.expanded || 'Expanded',
+                        metaKey: 'Expanded',
+                        disabled: stacked.style() != 'expand',
+                        style: 'expand'
+                    },
+                    {
+                        key: controlLabels.stack_percent || 'Stack %',
+                        metaKey: 'Stack_Percent',
+                        disabled: stacked.style() != 'stack_percent',
+                        style: 'stack_percent'
+                    }
+                ];
+
+                controlWidth = (controlOptions.length/3) * 260;
+                controlsData = controlsData.filter(function(d) {
+                    return controlOptions.indexOf(d.metaKey) !== -1;
+                });
+
+                controls
+                    .width( controlWidth )
+                    .color(['#444', '#444', '#444']);
+
+                g.select('.nv-controlsWrap')
+                    .datum(controlsData)
+                    .call(controls);
+
+                if ( margin.top != Math.max(controls.height(), legend.height()) ) {
+                    margin.top = Math.max(controls.height(), legend.height());
+                    availableHeight = nv.utils.availableHeight(height, container, margin);
+                }
+
+                g.select('.nv-controlsWrap')
+                    .attr('transform', 'translate(0,' + (-margin.top) +')');
+            }
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            if (rightAlignYAxis) {
+                g.select(".nv-y.nv-axis")
+                    .attr("transform", "translate(" + availableWidth + ",0)");
+            }
+
+            //Set up interactive layer
+            if (useInteractiveGuideline) {
+                interactiveLayer
+                    .width(availableWidth)
+                    .height(availableHeight)
+                    .margin({left: margin.left, top: margin.top})
+                    .svgContainer(container)
+                    .xScale(x);
+                wrap.select(".nv-interactive").call(interactiveLayer);
+            }
+
+            stacked
+                .width(availableWidth)
+                .height(availableHeight);
+
+            var stackedWrap = g.select('.nv-stackedWrap')
+                .datum(data);
+
+            stackedWrap.transition().call(stacked);
+
+            // Setup Axes
+            if (showXAxis) {
+                xAxis.scale(x)
+                    ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
+                    .tickSize( -availableHeight, 0);
+
+                g.select('.nv-x.nv-axis')
+                    .attr('transform', 'translate(0,' + availableHeight + ')');
+
+                g.select('.nv-x.nv-axis')
+                    .transition().duration(0)
+                    .call(xAxis);
+            }
+
+            if (showYAxis) {
+                var ticks;
+                if (stacked.offset() === 'wiggle') {
+                    ticks = 0;
+                }
+                else {
+                    ticks = nv.utils.calcTicksY(availableHeight/36, data);
+                }
+                yAxis.scale(y)
+                    ._ticks(ticks)
+                    .tickSize(-availableWidth, 0);
+
+                    if (stacked.style() === 'expand' || stacked.style() === 'stack_percent') {
+                        var currentFormat = yAxis.tickFormat();
+
+                        if ( !oldYTickFormat || currentFormat !== percentFormatter )
+                            oldYTickFormat = currentFormat;
+
+                        //Forces the yAxis to use percentage in 'expand' mode.
+                        yAxis.tickFormat(percentFormatter);
+                    }
+                    else {
+                        if (oldYTickFormat) {
+                            yAxis.tickFormat(oldYTickFormat);
+                            oldYTickFormat = null;
+                        }
+                    }
+
+                g.select('.nv-y.nv-axis')
+                    .transition().duration(0)
+                    .call(yAxis);
+            }
+
+            //============================================================
+            // Event Handling/Dispatching (in chart's scope)
+            //------------------------------------------------------------
+
+            stacked.dispatch.on('areaClick.toggle', function(e) {
+                if (data.filter(function(d) { return !d.disabled }).length === 1)
+                    data.forEach(function(d) {
+                        d.disabled = false;
+                    });
+                else
+                    data.forEach(function(d,i) {
+                        d.disabled = (i != e.seriesIndex);
+                    });
+
+                state.disabled = data.map(function(d) { return !!d.disabled });
+                dispatch.stateChange(state);
+
+                chart.update();
+            });
+
+            legend.dispatch.on('stateChange', function(newState) {
+                for (var key in newState)
+                    state[key] = newState[key];
+                dispatch.stateChange(state);
+                chart.update();
+            });
+
+            controls.dispatch.on('legendClick', function(d,i) {
+                if (!d.disabled) return;
+
+                controlsData = controlsData.map(function(s) {
+                    s.disabled = true;
+                    return s;
+                });
+                d.disabled = false;
+
+                stacked.style(d.style);
+
+
+                state.style = stacked.style();
+                dispatch.stateChange(state);
+
+                chart.update();
+            });
+
+            interactiveLayer.dispatch.on('elementMousemove', function(e) {
+                stacked.clearHighlights();
+                var singlePoint, pointIndex, pointXLocation, allData = [], valueSum = 0;
+                data
+                    .filter(function(series, i) {
+                        series.seriesIndex = i;
+                        return !series.disabled;
+                    })
+                    .forEach(function(series,i) {
+                        pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());
+                        var point = series.values[pointIndex];
+                        var pointYValue = chart.y()(point, pointIndex);
+                        if (pointYValue != null) {
+                            stacked.highlightPoint(i, pointIndex, true);
+                        }
+                        if (typeof point === 'undefined') return;
+                        if (typeof singlePoint === 'undefined') singlePoint = point;
+                        if (typeof pointXLocation === 'undefined') pointXLocation = chart.xScale()(chart.x()(point,pointIndex));
+
+                        //If we are in 'expand' mode, use the stacked percent value instead of raw value.
+                        var tooltipValue = (stacked.style() == 'expand') ? point.display.y : chart.y()(point,pointIndex);
+                        allData.push({
+                            key: series.key,
+                            value: tooltipValue,
+                            color: color(series,series.seriesIndex),
+                            stackedValue: point.display
+                        });
+
+                        if (showTotalInTooltip && stacked.style() != 'expand') {
+                          valueSum += tooltipValue;
+                        };
+                    });
+
+                allData.reverse();
+
+                //Highlight the tooltip entry based on which stack the mouse is closest to.
+                if (allData.length > 2) {
+                    var yValue = chart.yScale().invert(e.mouseY);
+                    var yDistMax = Infinity, indexToHighlight = null;
+                    allData.forEach(function(series,i) {
+
+                        //To handle situation where the stacked area chart is negative, we need to use absolute values
+                        //when checking if the mouse Y value is within the stack area.
+                        yValue = Math.abs(yValue);
+                        var stackedY0 = Math.abs(series.stackedValue.y0);
+                        var stackedY = Math.abs(series.stackedValue.y);
+                        if ( yValue >= stackedY0 && yValue <= (stackedY + stackedY0))
+                        {
+                            indexToHighlight = i;
+                            return;
+                        }
+                    });
+                    if (indexToHighlight != null)
+                        allData[indexToHighlight].highlight = true;
+                }
+
+                //If we are not in 'expand' mode, add a 'Total' row to the tooltip.
+                if (showTotalInTooltip && stacked.style() != 'expand' && allData.length >= 2) {
+                    allData.push({
+                        key: totalLabel,
+                        value: valueSum,
+                        total: true
+                    });
+                }
+
+                var xValue = chart.x()(singlePoint,pointIndex);
+
+                var valueFormatter = interactiveLayer.tooltip.valueFormatter();
+                // Keeps track of the tooltip valueFormatter if the chart changes to expanded view
+                if (stacked.style() === 'expand' || stacked.style() === 'stack_percent') {
+                    if ( !oldValueFormatter ) {
+                        oldValueFormatter = valueFormatter;
+                    }
+                    //Forces the tooltip to use percentage in 'expand' mode.
+                    valueFormatter = d3.format(".1%");
+                }
+                else {
+                    if (oldValueFormatter) {
+                        valueFormatter = oldValueFormatter;
+                        oldValueFormatter = null;
+                    }
+                }
+
+                interactiveLayer.tooltip
+                    .chartContainer(that.parentNode)
+                    .valueFormatter(valueFormatter)
+                    .data(
+                    {
+                        value: xValue,
+                        series: allData
+                    }
+                )();
+
+                interactiveLayer.renderGuideLine(pointXLocation);
+
+            });
+
+            interactiveLayer.dispatch.on("elementMouseout",function(e) {
+                stacked.clearHighlights();
+            });
+
+            // Update chart from a state object passed to event handler
+            dispatch.on('changeState', function(e) {
+
+                if (typeof e.disabled !== 'undefined' && data.length === e.disabled.length) {
+                    data.forEach(function(series,i) {
+                        series.disabled = e.disabled[i];
+                    });
+
+                    state.disabled = e.disabled;
+                }
+
+                if (typeof e.style !== 'undefined') {
+                    stacked.style(e.style);
+                    style = e.style;
+                }
+
+                chart.update();
+            });
+
+        });
+
+        renderWatch.renderEnd('stacked Area chart immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Event Handling/Dispatching (out of chart's scope)
+    //------------------------------------------------------------
+
+    stacked.dispatch.on('elementMouseover.tooltip', function(evt) {
+        evt.point['x'] = stacked.x()(evt.point);
+        evt.point['y'] = stacked.y()(evt.point);
+        tooltip.data(evt).hidden(false);
+    });
+
+    stacked.dispatch.on('elementMouseout.tooltip', function(evt) {
+        tooltip.hidden(true)
+    });
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    // expose chart's sub-components
+    chart.dispatch = dispatch;
+    chart.stacked = stacked;
+    chart.legend = legend;
+    chart.controls = controls;
+    chart.xAxis = xAxis;
+    chart.yAxis = yAxis;
+    chart.interactiveLayer = interactiveLayer;
+    chart.tooltip = tooltip;
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
+        showXAxis:      {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
+        showYAxis:    {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
+        defaultState:    {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
+        noData:    {get: function(){return noData;}, set: function(_){noData=_;}},
+        showControls:    {get: function(){return showControls;}, set: function(_){showControls=_;}},
+        controlLabels:    {get: function(){return controlLabels;}, set: function(_){controlLabels=_;}},
+        controlOptions:    {get: function(){return controlOptions;}, set: function(_){controlOptions=_;}},
+        showTotalInTooltip:      {get: function(){return showTotalInTooltip;}, set: function(_){showTotalInTooltip=_;}},
+        totalLabel:      {get: function(){return totalLabel;}, set: function(_){totalLabel=_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+            stacked.duration(duration);
+            xAxis.duration(duration);
+            yAxis.duration(duration);
+        }},
+        color:  {get: function(){return color;}, set: function(_){
+            color = nv.utils.getColor(_);
+            legend.color(color);
+            stacked.color(color);
+        }},
+        rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
+            rightAlignYAxis = _;
+            yAxis.orient( rightAlignYAxis ? 'right' : 'left');
+        }},
+        useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){
+            useInteractiveGuideline = !!_;
+            chart.interactive(!_);
+            chart.useVoronoi(!_);
+            stacked.scatter.interactive(!_);
+        }}
+    });
+
+    nv.utils.inheritOptions(chart, stacked);
+    nv.utils.initOptions(chart);
+
+    return chart;
+};
+// based on http://bl.ocks.org/kerryrodden/477c1bfb081b783f80ad
+nv.models.sunburst = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var margin = {top: 0, right: 0, bottom: 0, left: 0}
+        , width = null
+        , height = null
+        , mode = "count"
+        , modes = {count: function(d) { return 1; }, size: function(d) { return d.size }}
+        , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
+        , container = null
+        , color = nv.utils.defaultColor()
+        , groupColorByParent = true
+        , duration = 500
+        , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMousemove', 'elementMouseover', 'elementMouseout', 'renderEnd')
+        ;
+
+    var x = d3.scale.linear().range([0, 2 * Math.PI]);
+    var y = d3.scale.sqrt();
+
+    var partition = d3.layout.partition()
+        .sort(null)
+        .value(function(d) { return 1; });
+
+    var arc = d3.svg.arc()
+        .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
+        .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
+        .innerRadius(function(d) { return Math.max(0, y(d.y)); })
+        .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
+
+    // Keep track of the current and previous node being displayed as the root.
+    var node, prevNode;
+    // Keep track of the root node
+    var rootNode;
+
+    //============================================================
+    // chart function
+    //------------------------------------------------------------
+
+    var renderWatch = nv.utils.renderWatch(dispatch);
+
+    function chart(selection) {
+        renderWatch.reset();
+        selection.each(function(data) {
+            container = d3.select(this);
+            var availableWidth = nv.utils.availableWidth(width, container, margin);
+            var availableHeight = nv.utils.availableHeight(height, container, margin);
+            var radius = Math.min(availableWidth, availableHeight) / 2;
+            var path;
+
+            nv.utils.initSVG(container);
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('.nv-wrap.nv-sunburst').data(data);
+            var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sunburst nv-chart-' + id);
+
+            var g = wrapEnter.selectAll('nv-sunburst');
+
+            chart.update = function() { 
+                if ( duration === 0 ) {
+                    container.call(chart);
+                } else {
+                    container.transition().duration(duration).call(chart);
+                }
+            };
+            chart.container = this;
+
+
+            wrap.attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');
+
+            container.on('click', function (d, i) {
+                dispatch.chartClick({
+                    data: d,
+                    index: i,
+                    pos: d3.event,
+                    id: id
+                });
+            });
+
+            y.range([0, radius]);
+
+            node = node || data;
+            rootNode = data[0];
+            partition.value(modes[mode] || modes["count"]);
+            path = g.data(partition.nodes).enter()
+                .append("path")
+                .attr("d", arc)
+                .style("fill", function (d) {
+                    if (d.color) {
+                        return d.color;
+                    }
+                    else if (groupColorByParent) {
+                        return color((d.children ? d : d.parent).name);
+                    }
+                    else {
+                        return color(d.name);
+                    }
+                })
+                .style("stroke", "#FFF")
+                .on("click", function(d) {
+                    if (prevNode !== node && node !== d) prevNode = node;
+                    node = d;
+                    path.transition()
+                        .duration(duration)
+                        .attrTween("d", arcTweenZoom(d));
+                })
+                .each(stash)
+                .on("dblclick", function(d) {
+                    if (prevNode.parent == d) {
+                        path.transition()
+                            .duration(duration)
+                            .attrTween("d", arcTweenZoom(rootNode));
+                    }
+                })
+                .each(stash)
+                .on('mouseover', function(d,i){
+                    d3.select(this).classed('hover', true).style('opacity', 0.8);
+                    dispatch.elementMouseover({
+                        data: d,
+                        color: d3.select(this).style("fill")
+                    });
+                })
+                .on('mouseout', function(d,i){
+                    d3.select(this).classed('hover', false).style('opacity', 1);
+                    dispatch.elementMouseout({
+                        data: d
+                    });
+                })
+                .on('mousemove', function(d,i){
+                    dispatch.elementMousemove({
+                        data: d
+                    });
+                });
+
+
+
+            // Setup for switching data: stash the old values for transition.
+            function stash(d) {
+                d.x0 = d.x;
+                d.dx0 = d.dx;
+            }
+
+            // When switching data: interpolate the arcs in data space.
+            function arcTweenData(a, i) {
+                var oi = d3.interpolate({x: a.x0, dx: a.dx0}, a);
+
+                function tween(t) {
+                    var b = oi(t);
+                    a.x0 = b.x;
+                    a.dx0 = b.dx;
+                    return arc(b);
+                }
+
+                if (i == 0) {
+                    // If we are on the first arc, adjust the x domain to match the root node
+                    // at the current zoom level. (We only need to do this once.)
+                    var xd = d3.interpolate(x.domain(), [node.x, node.x + node.dx]);
+                    return function (t) {
+                        x.domain(xd(t));
+                        return tween(t);
+                    };
+                } else {
+                    return tween;
+                }
+            }
+
+            // When zooming: interpolate the scales.
+            function arcTweenZoom(d) {
+                var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
+                    yd = d3.interpolate(y.domain(), [d.y, 1]),
+                    yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
+                return function (d, i) {
+                    return i
+                        ? function (t) {
+                        return arc(d);
+                    }
+                        : function (t) {
+                        x.domain(xd(t));
+                        y.domain(yd(t)).range(yr(t));
+                        return arc(d);
+                    };
+                };
+            }
+
+        });
+
+        renderWatch.renderEnd('sunburst immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        mode:       {get: function(){return mode;}, set: function(_){mode=_;}},
+        id:         {get: function(){return id;}, set: function(_){id=_;}},
+        duration:   {get: function(){return duration;}, set: function(_){duration=_;}},
+        groupColorByParent: {get: function(){return groupColorByParent;}, set: function(_){groupColorByParent=!!_;}},
+
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    != undefined ? _.top    : margin.top;
+            margin.right  = _.right  != undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom != undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   != undefined ? _.left   : margin.left;
+        }},
+        color: {get: function(){return color;}, set: function(_){
+            color=nv.utils.getColor(_);
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+    return chart;
+};
+nv.models.sunburstChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var sunburst = nv.models.sunburst();
+    var tooltip = nv.models.tooltip();
+
+    var margin = {top: 30, right: 20, bottom: 20, left: 20}
+        , width = null
+        , height = null
+        , color = nv.utils.defaultColor()
+        , id = Math.round(Math.random() * 100000)
+        , defaultState = null
+        , noData = null
+        , duration = 250
+        , dispatch = d3.dispatch('stateChange', 'changeState','renderEnd')
+        ;
+
+    tooltip.duration(0);
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var renderWatch = nv.utils.renderWatch(dispatch);
+    tooltip
+        .headerEnabled(false)
+        .valueFormatter(function(d, i) {
+            return d;
+        });
+
+    //============================================================
+    // Chart function
+    //------------------------------------------------------------
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(sunburst);
+
+        selection.each(function(data) {
+            var container = d3.select(this);
+            nv.utils.initSVG(container);
+
+            var that = this;
+            var availableWidth = nv.utils.availableWidth(width, container, margin),
+                availableHeight = nv.utils.availableHeight(height, container, margin);
+
+            chart.update = function() {
+                if (duration === 0) {
+                    container.call(chart);
+                } else {
+                    container.transition().duration(duration).call(chart);
+                }
+            };
+            chart.container = this;
+
+            // Display No Data message if there's nothing to show.
+            if (!data || !data.length) {
+                nv.utils.noData(chart, container);
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            // Setup containers and skeleton of chart
+            var wrap = container.selectAll('g.nv-wrap.nv-sunburstChart').data(data);
+            var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sunburstChart').append('g');
+            var g = wrap.select('g');
+
+            gEnter.append('g').attr('class', 'nv-sunburstWrap');
+
+            wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            // Main Chart Component(s)
+            sunburst.width(availableWidth).height(availableHeight);
+            var sunWrap = g.select('.nv-sunburstWrap').datum(data);
+            d3.transition(sunWrap).call(sunburst);
+
+        });
+
+        renderWatch.renderEnd('sunburstChart immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Event Handling/Dispatching (out of chart's scope)
+    //------------------------------------------------------------
+
+    sunburst.dispatch.on('elementMouseover.tooltip', function(evt) {
+        evt['series'] = {
+            key: evt.data.name,
+            value: evt.data.size,
+            color: evt.color
+        };
+        tooltip.data(evt).hidden(false);
+    });
+
+    sunburst.dispatch.on('elementMouseout.tooltip', function(evt) {
+        tooltip.hidden(true);
+    });
+
+    sunburst.dispatch.on('elementMousemove.tooltip', function(evt) {
+        tooltip();
+    });
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    // expose chart's sub-components
+    chart.dispatch = dispatch;
+    chart.sunburst = sunburst;
+    chart.tooltip = tooltip;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    // use Object get/set functionality to map between vars and chart functions
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        noData:         {get: function(){return noData;},         set: function(_){noData=_;}},
+        defaultState:   {get: function(){return defaultState;},   set: function(_){defaultState=_;}},
+
+        // options that require extra logic in the setter
+        color: {get: function(){return color;}, set: function(_){
+            color = _;
+            sunburst.color(color);
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+            sunburst.duration(duration);
+        }},
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+        }}
+    });
+    nv.utils.inheritOptions(chart, sunburst);
+    nv.utils.initOptions(chart);
+    return chart;
+};
+
+nv.version = "1.8.2";
+})();
\ No newline at end of file
diff --git a/material-dashboard-lite-master/dist/js/widgets/employer-form/employer-form.js b/material-dashboard-lite-master/dist/js/widgets/employer-form/employer-form.js
new file mode 100644
index 0000000..564625e
--- /dev/null
+++ b/material-dashboard-lite-master/dist/js/widgets/employer-form/employer-form.js
@@ -0,0 +1,13 @@
+'use strict';
+
+{
+  (function () {
+    var checkbox = document.querySelector('.employer-form .form__action .mdl-checkbox__input'),
+        button = document.querySelector('.employer-form .form__action .mdl-button');
+    button.disabled = !checkbox.checked;
+
+    checkbox.addEventListener('change', function () {
+      button.disabled = !checkbox.checked;
+    });
+  })();
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/dist/js/widgets/line-chart/line-chart-nvd3.js b/material-dashboard-lite-master/dist/js/widgets/line-chart/line-chart-nvd3.js
new file mode 100644
index 0000000..e69156a
--- /dev/null
+++ b/material-dashboard-lite-master/dist/js/widgets/line-chart/line-chart-nvd3.js
@@ -0,0 +1,242 @@
+'use strict';
+
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+{
+  (function () {
+    var LineChart = (function () {
+      function LineChart(columns, color, margin, data, nv) {
+        _classCallCheck(this, LineChart);
+
+        this.columns = columns;
+        this.color = color;
+        this.margin = margin;
+        this.data = data;
+        this.nv = nv;
+        this.maxX = 130;
+        this.drawStep = 6; // It shows how many points will be drawn in one step
+        this.durationResizeAnimation = 500;
+      }
+
+      _createClass(LineChart, [{
+        key: '_addSvgContainer',
+        value: function _addSvgContainer() {
+          this.svg = d3.select('.line-chart__container').append('div').append('svg');
+        }
+      }, {
+        key: '_getSvgSizes',
+        value: function _getSvgSizes() {
+          var svgWidth = getComputedStyle(this.svg[0][0]).width,
+              svgHeight = getComputedStyle(this.svg[0][0]).height;
+          this.svgWidth = svgWidth.slice(0, svgWidth.length - 2);
+          this.svgHeight = svgHeight.slice(0, svgHeight.length - 2) - this.margin;
+        }
+      }, {
+        key: '_addAxisLabels',
+        value: function _addAxisLabels() {
+          d3.selectAll('.line-chart__container svg .y-axis-label').remove();
+          d3.select('.line-chart__container svg').append('text').attr('class', 'y-axis-label').attr('x', '-72').attr('y', '12').attr('transform', 'rotate(-90)').text('REVENUE');
+          d3.select('.line-chart__container svg').append('text').attr('class', 'x-axis-label').text('TIME');
+        }
+      }, {
+        key: '_buildBackground',
+        value: function _buildBackground() {
+          this._addSvgContainer();
+          this._getSvgSizes();
+
+          var bars = [];
+          for (var i = 0; i < this.columns; i++) {
+            bars.push(this.svgHeight);
+          }
+
+          this.barsLayout = this.svg.append('g').attr('class', 'bars').attr('transform', 'translate(' + this.margin + ', 0)').selectAll('rect').data(bars).enter().append('rect');
+
+          this._addAxisLabels();
+
+          this._setBackgroundSizes();
+        }
+      }, {
+        key: '_setBackgroundSizes',
+        value: function _setBackgroundSizes() {
+          var availableBarWidth = (this.svgWidth - 2 * this.margin) / this.columns,
+              barWidth = availableBarWidth / 2;
+          this.barsLayout.attr('fill', this.color).attr('y', this.margin).attr('height', function (d, i) {
+            return d;
+          }).transition().duration(this.durationResizeAnimation).attr('width', barWidth).attr('x', function (d, i) {
+            return i * availableBarWidth;
+          });
+          d3.select('.line-chart__container svg .x-axis-label').transition().duration(this.durationResizeAnimation).attr('x', this.svgWidth - this.margin - 30).attr('y', this.svgHeight - this.svgHeight / 4 + this.margin + 14);
+        }
+      }, {
+        key: 'drawChart',
+        value: function drawChart() {
+          this._buildBackground();
+          this._buildLegend();
+          this._buildNvGraph();
+          this._animateGraphs();
+        }
+      }, {
+        key: '_buildNvGraph',
+        value: function _buildNvGraph() {
+          var _this = this;
+
+          this._tuneNvGraph();
+
+          nv.addGraph(function () {
+            _this.svg.datum(_this.data).transition().duration(0).call(_this.lineChart);
+            nv.utils.windowResize(_this.resizeBackground.bind(_this));
+            nv.utils.windowResize(_this.lineChart.update);
+            return _this.lineChart;
+          });
+        }
+      }, {
+        key: '_tuneNvGraph',
+        value: function _tuneNvGraph() {
+          this.lineChart = nv.models.lineChart().margin({ top: this.margin, right: this.margin, bottom: 0, left: this.margin }).useInteractiveGuideline(true).xDomain([0, 13.6]).yDomain([-1.01, 3]).showLegend(false).showYAxis(true).showXAxis(true).pointSize(5);
+
+          this.lineChart.tooltip.enabled(false);
+          this.lineChart.interactiveLayer.tooltip.enabled(false);
+
+          this.lineChart.xAxis.showMaxMin(false).tickValues([0]).tickFormat(d3.format('c'));
+
+          this.lineChart.yAxis.showMaxMin(false).ticks(10).tickFormat(d3.format('c'));
+        }
+      }, {
+        key: '_buildLegend',
+        value: function _buildLegend() {
+          var legend = d3.select('.line-chart__container').append('div').attr('class', 'legend').selectAll('.legend__item').data(this.data).enter().append('div').attr('class', 'legend__item');
+
+          legend.append('div').attr('class', 'legend__mark pull-left').style('background-color', function (d) {
+            return d.color;
+          });
+
+          legend.append('div').attr('class', 'legend__text').text(function (d) {
+            return d.key;
+          });
+        }
+      }, {
+        key: 'resizeBackground',
+        value: function resizeBackground() {
+          this._getSvgSizes();
+          this._setBackgroundSizes();
+        }
+      }, {
+        key: '_animateGraphs',
+        value: function _animateGraphs() {
+          var _this2 = this;
+
+          var i = 1;
+          this.timer = setInterval(function () {
+            _this2._calcAllGraphs(i);
+            _this2._drawNextStep(i);
+            i++;
+            _this2._checkEndOfAnimation(i);
+          }, 15);
+        }
+      }, {
+        key: '_drawNextStep',
+        value: function _drawNextStep(i) {
+          if (i % this.drawStep == 0 || i == this.maxX) {
+            this.lineChart.update();
+          }
+        }
+      }, {
+        key: '_checkEndOfAnimation',
+        value: function _checkEndOfAnimation(i) {
+          if (i == this.maxX + 1) {
+            this.lineChart.duration(this.durationResizeAnimation);
+            this.data[1].fillOpacity = 0.11;
+            this.lineChart.update();
+            clearInterval(this.timer);
+          }
+        }
+      }, {
+        key: '_calcAllGraphs',
+        value: function _calcAllGraphs(i) {
+          this._calcFirstGraph(i);
+          this._calcSecondGraph(i);
+          this._calcThirdGraph(i);
+        }
+      }, {
+        key: '_calcFirstGraph',
+        value: function _calcFirstGraph(i) {
+          var INTERVAL_1 = 28,
+              INTERVAL_2 = 71,
+              INTERVAL_3 = 110;
+          var graphAwesome = this.data[0].values;
+
+          if (i < INTERVAL_1) {
+            graphAwesome.push({ x: i / 10, y: (.0343 * i * i - .67 * i) / 14 });
+          } else {
+            if (i < INTERVAL_2) {
+              graphAwesome.push({ x: i / 10, y: -(i - 71) * (i - 71) / 1026 + 2.378 });
+            } else {
+              if (i < INTERVAL_3) {
+                graphAwesome.push({ x: i / 10, y: -4 / (i - 43) + 2.53 });
+              } else {
+                graphAwesome.push({ x: i / 10, y: (i - 114) * (i - 114) * (i - 114) / 13000 + 2.476 });
+              }
+            }
+          }
+        }
+      }, {
+        key: '_calcSecondGraph',
+        value: function _calcSecondGraph(i) {
+          var INTERVAL_1 = 30,
+              INTERVAL_2 = 82;
+          var graphGood = this.data[1].values;
+
+          if (i < INTERVAL_1) {
+            graphGood.push({ x: i / 10, y: (.03255 * i * i - .96 * i) / 16 });
+          } else {
+            if (i < INTERVAL_2) {
+              graphGood.push({ x: i / 10, y: (-.01055 * (i - 80.3) * (i - 80.3) + 27) / 15 });
+            } else {
+              graphGood.push({ x: i / 10, y: (i / 2 - 45) * (i / 2 - 45) * (i / 2 - 45) / 15000 + 1.805 });
+            }
+          }
+        }
+      }, {
+        key: '_calcThirdGraph',
+        value: function _calcThirdGraph(i) {
+          var INTERVAL_1 = 31,
+              INTERVAL_2 = 103;
+          var graphFail = this.data[2].values;
+
+          if (i < INTERVAL_1) {
+            graphFail.push({ x: i / 10, y: (.02255 * i * i - .91 * i) / 13 });
+          } else {
+            if (i < INTERVAL_2) {
+              graphFail.push({ x: i / 10, y: .82 * Math.sin((i - 45) / 21) });
+            } else {
+              graphFail.push({ x: i / 10, y: -(i - 130) * (i - 130) * (i - 130) / 64000 });
+            }
+          }
+        }
+      }]);
+
+      return LineChart;
+    })();
+
+    var data = [{
+      values: [{ x: 0, y: 0 }],
+      key: 'Awesome',
+      color: 'rgb(80, 150, 215)'
+    }, {
+      values: [{ x: 0, y: 0 }],
+      key: 'Good',
+      color: 'rgb(0, 188, 212)',
+      fillOpacity: 0.00001,
+      area: true
+    }, {
+      values: [{ x: 0, y: 0 }],
+      key: 'Fail',
+      color: 'rgb(255, 82, 82)'
+    }];
+
+    var lineChart = new LineChart(7, '#4a4a4a', 20, data, nv);
+    lineChart.drawChart();
+  })();
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/dist/js/widgets/pie-chart/pie-chart-nvd3.js b/material-dashboard-lite-master/dist/js/widgets/pie-chart/pie-chart-nvd3.js
new file mode 100644
index 0000000..f61fb37
--- /dev/null
+++ b/material-dashboard-lite-master/dist/js/widgets/pie-chart/pie-chart-nvd3.js
@@ -0,0 +1,93 @@
+'use strict';
+
+{
+  var colors = ['rgba(96, 196, 150, 1)', 'rgba(80, 150, 215, 1)', 'rgba(0, 188, 212, 1)', 'rgba(116, 199, 209, 1)', 'rgba(255, 82, 82, 1)', 'rgba(0, 0, 0, 0)'];
+
+  var data = [{
+    'key': 'Coding',
+    'y': 0,
+    'end': 9
+  }, {
+    'key': 'Eating',
+    'y': 0,
+    'end': 3
+  }, {
+    'key': 'Sleeping',
+    'y': 0,
+    'end': 3
+  }, {
+    'key': 'Meditation',
+    'y': 0,
+    'end': 3
+  }, {
+    'key': 'The fight against evil',
+    'y': 0,
+    'end': 6
+  }, {
+    'key': 'Pending',
+    'y': 23.9
+  }];
+
+  nv.addGraph(function () {
+    var innerRadius = 0.86,
+        outerRadius = 1.02;
+
+    var pieChart = nv.models.pieChart().x(function (d) {
+      return d.key;
+    }).y(function (d) {
+      return d.y;
+    }).showLabels(false).donut(true).growOnHover(true).padAngle(.04).cornerRadius(0).margin({ 'left': -10, 'right': -10, 'top': -10, 'bottom': -10 }).color(colors).arcsRadius([{ 'inner': innerRadius, 'outer': outerRadius }, { 'inner': innerRadius, 'outer': outerRadius }, { 'inner': innerRadius, 'outer': outerRadius }, { 'inner': innerRadius, 'outer': outerRadius }, { 'inner': innerRadius, 'outer': outerRadius }]).showLegend(false).title('0 hours').titleOffset(10);
+
+    pieChart.tooltip.enabled(true).hideDelay(0).headerEnabled(false).contentGenerator(function (d) {
+      if (d === null) {
+        return '';
+      }
+      d3.selectAll('.nvtooltip').classed('mdl-tooltip', true);
+      return d.data.y + ' hours';
+    });
+
+    var container = d3.select('.pie-chart__container').append('div').append('svg').datum(data).transition().duration(1200).call(pieChart);
+
+    var h = 0,
+        i = 0;
+    var timer = setInterval(animatePie, 70, data);
+
+    function animatePie(data) {
+      if (i < data.length - 1) {
+        if (data[i].y < data[i].end) {
+          data[i].y++;
+          data[data.length - 1].y--;
+          pieChart.title(h + 1 + ' hours');
+          h++;
+        } else {
+          i++;
+        }
+      } else {
+        data.splice(data.length - 1, 1);
+        clearInterval(timer);
+        return;
+      }
+      if (container[0][0]) {
+        pieChart.update();
+      } else {
+        clearInterval(timer);
+      }
+    }
+
+    d3.select('.nv-pie .nv-pie').append('image').attr('width', '30').attr('height', '30').attr('xlink:href', 'images/watch_white.svg').attr('transform', 'translate(-15,-35)');
+
+    var color = d3.scale.ordinal().range(colors);
+
+    var legend = d3.select('.pie-chart__container').append('div').attr('class', 'legend').selectAll('.legend__item').data(data.slice(0, data.length - 1)).enter().append('div').attr('class', 'legend__item');
+
+    legend.append('div').attr('class', 'legend__mark pull-left').style('background-color', function (d) {
+      return color(d.key);
+    });
+
+    legend.append('div').attr('class', 'legend__text').text(function (d) {
+      return d.key;
+    });
+
+    return pieChart;
+  });
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/dist/js/widgets/table/table.js b/material-dashboard-lite-master/dist/js/widgets/table/table.js
new file mode 100644
index 0000000..3322188
--- /dev/null
+++ b/material-dashboard-lite-master/dist/js/widgets/table/table.js
@@ -0,0 +1,24 @@
+'use strict';
+
+{
+  (function () {
+    var task1 = document.querySelector('#task1'),
+        task2 = document.querySelector('#task2'),
+        task4 = document.querySelector('#task4');
+
+    task1.addEventListener('mdl-componentupgraded', function () {
+      task1.MaterialProgress.setProgress(44);
+    });
+    task2.addEventListener('mdl-componentupgraded', function () {
+      task2.MaterialProgress.setProgress(14);
+    });
+    task4.addEventListener('mdl-componentupgraded', function () {
+      task4.MaterialProgress.setProgress(31);
+    });
+
+    setTimeout(function () {
+      document.querySelector('.projects-table .is-selected td > label').classList.add('is-checked');
+      componentHandler.upgradeDom();
+    }, 100);
+  })();
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/dist/js/widgets/todo/todo.js b/material-dashboard-lite-master/dist/js/widgets/todo/todo.js
new file mode 100644
index 0000000..e158ac0
--- /dev/null
+++ b/material-dashboard-lite-master/dist/js/widgets/todo/todo.js
@@ -0,0 +1,248 @@
+'use strict';
+
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+{
+  (function () {
+    'use strict';
+
+    /*==========MODEL==========*/
+
+    var Model = (function () {
+      function Model(database) {
+        _classCallCheck(this, Model);
+
+        this.database = database || [{
+          title: 'Fix bugs',
+          id: 1651644545,
+          completed: ''
+        }, {
+          title: 'Implement 30% of my feature',
+          id: 1651646545,
+          completed: ''
+        }, {
+          title: 'Fencing',
+          id: 5451646545,
+          completed: 'checked'
+        }, {
+          title: 'Read an article about Test-Driven Development',
+          id: 5428646545,
+          completed: ''
+        }];
+      }
+
+      /*==========VIEW==========*/
+
+      _createClass(Model, [{
+        key: 'createItem',
+        value: function createItem(title) {
+          var newItem = {
+            title: title,
+            id: new Date().getTime(),
+            completed: ''
+          };
+          this.database.push(newItem);
+          return newItem;
+        }
+      }, {
+        key: 'checkItem',
+        value: function checkItem(id) {
+          for (var i = 0; i < this.database.length; i++) {
+            if (id == this.database[i].id) {
+              this.database[i].completed = this.database[i].completed ? '' : 'checked';
+              return;
+            }
+          }
+        }
+      }, {
+        key: 'deleteItem',
+        value: function deleteItem(id) {
+          for (var i = 0; i < this.database.length; i++) {
+            if (id == this.database[i].id) {
+              this.database.splice(i, 1);
+              return;
+            }
+          }
+        }
+      }, {
+        key: 'deleteCompletedItems',
+        value: function deleteCompletedItems() {
+          for (var i = 0; i < this.database.length; i++) {
+            if (this.database[i].completed === 'checked') {
+              this.database.splice(i, 1);
+              i--;
+            }
+          }
+        }
+      }]);
+
+      return Model;
+    })();
+
+    var View = (function () {
+      function View() {
+        _classCallCheck(this, View);
+
+        this.$todoList = document.querySelector('.todo .mdl-list');
+        this.inputTemplate = '<div class="mdl-textfield mdl-js-textfield">\n                         <input class="mdl-textfield__input" type="text" id="todo-input">\n                         <label class="mdl-textfield__label" for="todo-input">What to do?..</label>\n                     </div>';
+      }
+
+      /*==========CONTROLLER==========*/
+
+      _createClass(View, [{
+        key: 'insertInput',
+        value: function insertInput() {
+          var newLi = document.createElement('li');
+          newLi.classList.add('mdl-list__item');
+          newLi.innerHTML = this._prepareTemplate({});
+          this.$todoList.appendChild(newLi);
+          View.upgradeNewMdlComponents();
+          var inputSpan = document.querySelector('.todo .mdl-list li:last-child .mdl-checkbox__label');
+          inputSpan.innerHTML = this.inputTemplate;
+          View.upgradeNewMdlComponents();
+          document.querySelector('.todo .mdl-list__item:last-child .mdl-textfield__input').focus();
+        }
+      }, {
+        key: '_prepareTemplate',
+        value: function _prepareTemplate(data) {
+          return '<span class = "mdl-list__item-primary-content">\n                        <label for="' + data.id + '" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" checkboxItem>\n                            <input type="checkbox" id="' + data.id + '" ' + data.completed + ' class="mdl-checkbox__input" />\n                            <span class="mdl-checkbox__label">' + data.title + '</span>\n                        </label>\n                    </span>\n                    <div class="mdl-list__item-secondary-content">\n                        <button for = "' + data.id + '" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored mdl-button--mini-icon pull-right" deleteItem>\n                            <i class="material-icons">clear</i>\n                        </button>\n                    </div>';
+        }
+      }, {
+        key: 'showAll',
+        value: function showAll(database) {
+          var _this = this;
+
+          this.$todoList.innerHTML = '';
+          database.forEach(function (data) {
+            var newLi = document.createElement('li');
+            newLi.classList.add('mdl-list__item');
+            newLi.innerHTML = _this._prepareTemplate(data);
+            _this.$todoList.appendChild(newLi);
+          });
+          View.upgradeNewMdlComponents();
+        }
+      }, {
+        key: 'show',
+        value: function show(data) {
+          var newLi = document.createElement('li');
+          newLi.classList.add('mdl-list__item');
+          newLi.innerHTML = this._prepareTemplate(data);
+          this.$todoList.appendChild(newLi);
+          View.upgradeNewMdlComponents();
+        }
+      }], [{
+        key: 'upgradeNewMdlComponents',
+        value: function upgradeNewMdlComponents() {
+          componentHandler.upgradeDom();
+        }
+      }]);
+
+      return View;
+    })();
+
+    var Controller = (function () {
+      function Controller(model, view) {
+        var _this2 = this;
+
+        _classCallCheck(this, Controller);
+
+        this.$addItemButton = document.querySelector('.todo .mdl-button--fab');
+        this.$removeCompletedButton = document.querySelector('.todo .mdl-card__actions .mdl-button');
+        this.model = model;
+        this.view = view;
+
+        this.view.$todoList.addEventListener('mouseup', function (event) {
+          var clickTarget = event.path[1];
+          if (clickTarget.hasAttribute('deleteItem')) {
+            var id = clickTarget.getAttribute('for');
+            _this2.model.deleteItem(id);
+            _this2.removeItem(event);
+          } else if (clickTarget.hasAttribute('checkboxItem')) {
+            _this2.check(clickTarget);
+          } else {
+            clickTarget = event.target;
+            if (clickTarget.hasAttribute('checkboxItem')) {
+              _this2.check(clickTarget);
+            }
+          }
+        });
+
+        this.$addItemButton.addEventListener('click', function () {
+          _this2.$addItemButton.setAttribute('disabled', 'true');
+          _this2.$removeCompletedButton.setAttribute('disabled', 'true');
+          _this2.view.insertInput();
+
+          var inputTextArea = document.querySelector('.todo .mdl-list__item:last-child .mdl-textfield__input');
+          inputTextArea.addEventListener('keydown', function (event) {
+            if (event.keyCode === 27) {
+              _this2.removeItem(event);
+            } else {
+              if (event.keyCode === 13) {
+                _this2.addItem(inputTextArea.value);
+                _this2.removeItem(event);
+              }
+            }
+          });
+        });
+
+        this.$removeCompletedButton.addEventListener('click', function () {
+          _this2.removeCompletedItems();
+        });
+
+        if (this.model.database != []) {
+          this.view.showAll(this.model.database);
+        }
+      }
+
+      /*==========INITIALIZE==========*/
+
+      _createClass(Controller, [{
+        key: 'addItem',
+        value: function addItem(title) {
+          if (title.trim() === '') {
+            return;
+          }
+          this.view.show(this.model.createItem(title));
+        }
+      }, {
+        key: 'removeItem',
+        value: function removeItem(clickTarget) {
+          for (var i = 0; i < clickTarget.path.length; i++) {
+            if (clickTarget.path[i].className == 'mdl-list__item') {
+              clickTarget.path[i].remove();
+              break;
+            }
+          }
+          this.$addItemButton.removeAttribute('disabled');
+          this.$removeCompletedButton.removeAttribute('disabled');
+        }
+      }, {
+        key: 'removeCompletedItems',
+        value: function removeCompletedItems() {
+          this.model.deleteCompletedItems();
+          this.view.showAll(this.model.database);
+        }
+      }, {
+        key: 'check',
+        value: function check(checkbox) {
+          var id = checkbox.getAttribute('for');
+          this.model.checkItem(id);
+        }
+      }]);
+
+      return Controller;
+    })();
+
+    var Todo = function Todo() {
+      _classCallCheck(this, Todo);
+
+      this.model = new Model();
+      this.view = new View();
+      this.controller = new Controller(this.model, this.view);
+    };
+
+    var todo = new Todo();
+  })();
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/gulpfile.js b/material-dashboard-lite-master/gulpfile.js
new file mode 100644
index 0000000..9237c41
--- /dev/null
+++ b/material-dashboard-lite-master/gulpfile.js
@@ -0,0 +1,132 @@
+var gulp = require('gulp'),
+    jscs = require('gulp-jscs'),
+    babel = require('gulp-babel'),
+    inject = require('gulp-inject'),
+    plumber = require('gulp-plumber'),
+    watch = require('gulp-watch'),
+    livereload = require('gulp-livereload'),
+    minifycss = require('gulp-minify-css'),
+    jshint = require('gulp-jshint'),
+    stylish = require('jshint-stylish'),
+    uglify = require('gulp-uglify'),
+    rename = require('gulp-rename'),
+    sass = require('gulp-sass'),
+    clean = require('gulp-clean'),
+    del = require('del'),
+    browserSync = require('browser-sync');
+
+var onError = function (err) {
+    console.log('An error occurred:', err.message);
+    this.emit('end');
+};
+
+gulp.task('check-js-style', function () {
+    gulp.src('src/**/*.js')
+        .pipe(jscs({fix: true}))
+        .pipe(jscs.reporter())
+        .pipe(jscs.reporter('fail'))
+        .pipe(gulp.dest('src'));
+});
+
+gulp.task('serve', function () {
+    var files = [
+        './dist/*.html',
+        './dist/css/**/*.css',
+        './dist/js/**/*.js'
+    ];
+
+    browserSync.init(files, {
+        server: {
+            baseDir: './dist'
+        }
+    });
+});
+
+gulp.task('scss', function () {
+    return gulp.src('./src/application.scss')
+        .pipe(plumber({errorHandler: onError}))
+        .pipe(sass())
+        .pipe(gulp.dest('./dist/css'));
+});
+
+gulp.task('babel', ['scss'], function () {
+    return gulp.src('src/**/*.js')
+        .pipe(plumber({errorHandler: onError}))
+        .pipe(babel())
+        .pipe(gulp.dest('./dist/js'));
+});
+
+gulp.task('watch', function () {
+    gulp.watch('./src/**/*.scss', ['default']);
+    gulp.watch('./src/**/*.js', ['default']);
+    gulp.watch('./src/**/*.html', ['default']);
+});
+
+gulp.task('jshint', ['babel', 'scss'], function () {
+    return gulp.src('src/**/*.js')
+        .pipe(jshint())
+        .pipe(jshint.reporter(stylish));
+});
+
+gulp.task('default', ['cleanDist', 'jshint', 'babel', 'copyJsLib', 'copyCssLib'], function () {
+    gulp.src('src/images/**/*')
+        .pipe(gulp.dest('dist/images'));
+    gulp.src('src/**/*.html')
+        .pipe(gulp.dest('dist/'))
+        .pipe(inject(gulp.src(['dist/js/**/*.js', 'dist/css/lib/*.css', 'dist/css/*.css'], {read: false}), {relative: true}))
+        .pipe(gulp.dest('dist/'));
+});
+
+gulp.task('copyJsLib', ['cleanDist'], function () {
+    return gulp.src(['bower_components/material-design-lite/material.js', 'bower_components/d3/d3.js',
+        'bower_components/nvd3/build/nv.d3.js', 'bower_components/getmdl-select/getmdl-select.min.js'])
+        .pipe(gulp.dest('dist/js'));
+});
+
+gulp.task('copyMinJsLib', ['cleanDist'], function () {
+    return gulp.src(['bower_components/material-design-lite/material.min.js', 'bower_components/d3/d3.min.js',
+        'bower_components/nvd3/build/nv.d3.min.js', 'bower_components/getmdl-select/getmdl-select.min.js'])
+        .pipe(gulp.dest('dist/js'));
+});
+
+gulp.task('copyCssLib', ['cleanDist'], function () {
+    return gulp.src(['bower_components/nvd3/build/nv.d3.css', 'bower_components/getmdl-select/getmdl-select.min.css'])
+        .pipe(gulp.dest('dist/css/lib'));
+});
+
+gulp.task('copyMinCssLib', ['cleanDist'], function () {
+    return gulp.src(['bower_components/nvd3/build/nv.d3.min.css', 'bower_components/getmdl-select/getmdl-select.min.css'])
+        .pipe(gulp.dest('dist/css/lib'));
+});
+
+gulp.task('cleanDist', function () {
+    return del('dist/**/*');
+});
+
+gulp.task('minifyJs', ['cleanDist'], function () {
+    return gulp.src('src/**/*.js')
+        .pipe(rename({suffix: '.min'}))
+        .pipe(plumber({errorHandler: onError}))
+        .pipe(babel())
+        .pipe(uglify())
+        .pipe(gulp.dest('dist/js'));
+});
+
+gulp.task('minifyCss', ['cleanDist'], function () {
+    return gulp.src('src/application.scss')
+        .pipe(plumber({errorHandler: onError}))
+        .pipe(sass())
+        .pipe(minifycss())
+        .pipe(rename({suffix: '.min'}))
+        .pipe(gulp.dest('dist/css'));
+});
+
+gulp.task('build', ['minifyJs', 'minifyCss', 'copyMinCssLib', 'copyMinJsLib'], function () {
+    gulp.src('src/*.html')
+        .pipe(gulp.dest('dist/'))
+        .pipe(inject(gulp.src(['dist/js/**/*.js', 'dist/css/lib/*.css',
+            'dist/css/*.css'], {read: false}), {relative: true}))
+        .pipe(gulp.dest('dist/'));
+    gulp.src('src/images/**/*')
+        .pipe(gulp.dest('dist/images'));
+});
\ No newline at end of file
diff --git a/material-dashboard-lite-master/package.json b/material-dashboard-lite-master/package.json
new file mode 100644
index 0000000..f4d3965
--- /dev/null
+++ b/material-dashboard-lite-master/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "getmdl-dashboard",
+  "version": "1.0.0",
+  "description": "Free dashboard template with Material Design Lite",
+  "keywords": [
+    "dashboard",
+    "admin template",
+    "mdl",
+    "getmdl",
+    "Material Design",
+    "Material Design Lite",
+    "Dark",
+    "dark material design"
+  ],
+  "main": "gulpfile.js",
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "http://www.opensource.org/licenses/mit-license.php"
+    }
+  ],
+  "devDependencies": {
+    "browser-sync": "2.9.11",
+    "del": "2.0.2",
+    "gulp": "3.9.0",
+    "gulp-babel": "5.3.0",
+    "gulp-clean": "0.3.1",
+    "gulp-inject": "3.0.0",
+    "gulp-jscs": "3.0.2",
+    "gulp-jshint": "1.12.0",
+    "gulp-livereload": "3.8.1",
+    "gulp-minify-css": "1.2.1",
+    "gulp-plumber": "1.0.1",
+    "gulp-rename": "1.2.2",
+    "gulp-sass": "2.1.0",
+    "gulp-uglify": "1.4.2",
+    "gulp-watch": "4.3.5",
+    "jshint-stylish": "2.0.1"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CreativeIT/getmdl-dashboard.git"
+  },
+  "author": "CreativeIT",
+  "bugs": {
+    "url": "https://github.com/CreativeIT/dashboard/issues"
+  },
+  "homepage": "https://github.com/CreativeIT/dashboard#readme"
+}
diff --git a/material-dashboard-lite-master/src/application.scss b/material-dashboard-lite-master/src/application.scss
new file mode 100644
index 0000000..df24a00
--- /dev/null
+++ b/material-dashboard-lite-master/src/application.scss
@@ -0,0 +1,63 @@
+@import 'variables';
+
+@import '../bower_components/material-design-lite/src/material-design-lite';
+
+@import 'mixins';
+
+@import 'layout/layout';
+
+@import 'card/card';
+
+@import 'menu/menu';
+
+@import 'checkbox/checkbox';
+
+@import 'button/button';
+
+@import 'widgets/link/link';
+
+@import 'textfield/textfield';
+
+@import 'progress/progress';
+
+@import 'data-table/data-table';
+
+@import 'label/label';
+
+@import 'widgets/table/table';
+
+@import 'tooltip/tooltip';
+
+@import 'widgets/notifications-dropdown/notifications-dropdown';
+
+@import 'widgets/trending/trending';
+
+@import 'widgets/message-notifications/messages-dropdown';
+
+@import 'list/list';
+
+@import 'widgets/todo/todo';
+
+@import 'widgets/pie-chart/pie-chart';
+
+@import 'widgets/line-chart/line-chart';
+
+@import 'widgets/chart-legend/chart-legend';
+
+@import 'widgets/account-dropdown/account-dropdown';
+
+@import 'widgets/setting-dropdown/settings-dropdown';
+
+@import 'widgets/robot/robot';
+
+@import 'widgets/cotoneaster/cotoneaster';
+
+@import 'widgets/weather/weather';
+
+@import 'widgets/employer-form/employer-form';
+
+@import 'widgets/form/form';
+
+@import 'widgets/input-group/input-group';
+
+@import 'helper';
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/button/button.scss b/material-dashboard-lite-master/src/button/button.scss
new file mode 100644
index 0000000..0cd7eaf
--- /dev/null
+++ b/material-dashboard-lite-master/src/button/button.scss
@@ -0,0 +1,22 @@
+.mdl-button {
+  font-weight: $button-font-weigth;
+  padding-top: 1px;
+
+  &.mdl-button--mini-icon {
+    .mdl-button--colored {
+      color: $button-primary-color-alt;
+    }
+    .material-icons {
+      top: 50% !important;
+      left: 50% !important;
+      font-size: 20px;
+    }
+  }
+}
+
+.mdl-card__actions .mdl-button--fab {
+  position: absolute;
+  right: 24px;
+  bottom: 24px;
+  z-index: 99;
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/card/card.scss b/material-dashboard-lite-master/src/card/card.scss
new file mode 100644
index 0000000..b8c46e2
--- /dev/null
+++ b/material-dashboard-lite-master/src/card/card.scss
@@ -0,0 +1,20 @@
+.mdl-card__title {
+  background-color: $card-title-background-color;
+}
+
+.mdl-card__supporting-text {
+  width: calc(100% - #{$card-horizontal-padding*2});
+}
+
+.mdl-card__actions {
+  background-color: $card-actions-background-color;
+}
+
+
+
+
+
+
+
+
+
diff --git a/material-dashboard-lite-master/src/checkbox/checkbox.scss b/material-dashboard-lite-master/src/checkbox/checkbox.scss
new file mode 100644
index 0000000..d3df894
--- /dev/null
+++ b/material-dashboard-lite-master/src/checkbox/checkbox.scss
@@ -0,0 +1,3 @@
+.mdl-checkbox__tick-outline {
+  -webkit-mask: url("#{$checkbox-image-path}/tick-mask.svg");
+}
diff --git a/material-dashboard-lite-master/src/data-table/data-table.scss b/material-dashboard-lite-master/src/data-table/data-table.scss
new file mode 100644
index 0000000..ca6e304
--- /dev/null
+++ b/material-dashboard-lite-master/src/data-table/data-table.scss
@@ -0,0 +1,20 @@
+.mdl-data-table {
+  @include typo-data-table;
+  background-color: $background-color;
+  color: $data-table-color;
+  border: none;
+  tr:last-child td {
+    border: none;
+  }
+  td, th {
+    &:first-of-type {
+      padding-left: 16px;
+    }
+    &:last-of-type {
+      padding-right: 16px;
+    }
+  }
+  tr:hover {
+    background-clip: padding-box;
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/forms.html b/material-dashboard-lite-master/src/forms.html
new file mode 100644
index 0000000..4d003e2
--- /dev/null
+++ b/material-dashboard-lite-master/src/forms.html
@@ -0,0 +1,503 @@
+<!doctype html>
+<!--
+  Material Design Lite
+  Copyright 2015 Google Inc. All rights reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+<head>
+    <link rel="icon" type="image/png" href="images/DB_16х16.png">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Material Dashboard Lite</title>
+
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Material Design Lite">
+
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
+    <!--
+    <link rel="canonical" href="http://www.example.com/">
+    -->
+
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300,100,700,900' rel='stylesheet'
+          type='text/css'>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- inject:css -->
+    <!-- endinject -->
+
+</head>
+<body>
+    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+        <header class="mdl-layout__header">
+            <div class="mdl-layout__header-row">
+                <div class="mdl-layout-spacer"></div>
+
+                <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
+                    <label class="mdl-button mdl-js-button mdl-button--icon" for="search">
+                        <i class="material-icons">search</i>
+                    </label>
+
+                    <div class="mdl-textfield__expandable-holder">
+                        <input class="mdl-textfield__input" type="text" id="search"/>
+                        <label class="mdl-textfield__label" for="search">Enter your query...</label>
+                    </div>
+                </div>
+
+                <div class="material-icons mdl-badge mdl-badge--overlap mdl-button--icon notification" id="notification"
+                     data-badge="23">
+                    notifications_none
+                </div>
+
+                <ul class="mdl-menu mdl-list mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right mdl-shadow--2dp notifications-dropdown"
+                    for="notification">
+                    <li class="mdl-list__item">
+                        You have 23 new notifications!
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <i class="material-icons">plus_one</i>
+                        </span>
+                        <span>You have 3 new orders.</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">just now</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--secondary">
+                            <i class="material-icons">error_outline</i>
+                        </span>
+                      <span>Database error</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">1 min</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <i class="material-icons">new_releases</i>
+                        </span>
+                      <span>The Death Star is built!</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">2 hours</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <i class="material-icons">mail_outline</i>
+                        </span>
+                      <span>You have 4 new mails.</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">5 days</span>
+                    </span>
+                    </li>
+                    <li class="mdl-list__item list__item--border-top">
+                        <button href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">ALL NOTIFICATIONS</button>
+                    </li>
+                </ul>
+
+                <div class="material-icons mdl-badge mdl-badge--overlap mdl-button--icon message" id="inbox" data-badge="4">
+                    mail_outline
+                </div>
+
+                <ul class="mdl-menu mdl-list mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right mdl-shadow--2dp messages-dropdown"
+                    for="inbox">
+                    <li class="mdl-list__item">
+                        You have 4 new messages!
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <text>A</text>
+                        </span>
+                        <span>Alice</span>
+                        <span class="mdl-list__item-sub-title">Birthday Party</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">just now</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--baby-blue">
+                            <text>M</text>
+                        </span>
+                        <span>Mike</span>
+                        <span class="mdl-list__item-sub-title">No theme</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">5 min</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--cerulean">
+                            <text>D</text>
+                        </span>
+                        <span>Darth</span>
+                        <span class="mdl-list__item-sub-title">Suggestion</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">23 hours</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--mint">
+                            <text>D</text>
+                        </span>
+                        <span>Don McDuket</span>
+                        <span class="mdl-list__item-sub-title">NEWS</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">30 Nov</span>
+                    </span>
+                    </li>
+                    <li class="mdl-list__item list__item--border-top">
+                        <button href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">SHOW ALL MESSAGES</button>
+                    </li>
+                </ul>
+
+                <div class="avatar-dropdown" id="icon">
+                    <span>Luke</span>
+                    <img src="images/Icon_header.png">
+                </div>
+
+                <ul class="mdl-menu mdl-list mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect mdl-shadow--2dp account-dropdown"
+                    for="icon">
+                    <li class="mdl-list__item mdl-list__item--two-line">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="material-icons mdl-list__item-avatar"></span>
+                        <span>Luke</span>
+                        <span class="mdl-list__item-sub-title">Luke@skywalker.com</span>
+                    </span>
+                    </li>
+                    <li class="list__item--border-top"></li>
+                    <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">account_circle</i>
+                        My account
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">check_box</i>
+                        My tasks
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label background-color--primary">3 new</span>
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">perm_contact_calendar</i>
+                        My events
+                    </span>
+                    </li>
+                    <li class="list__item--border-top"></li>
+                    <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">settings</i>
+                        Settings
+                    </span>
+                    </li>
+                    <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon text-color--secondary">exit_to_app</i>
+                        Log out
+                    </span>
+                    </li>
+                </ul>
+
+                <button id="more"
+                        class="mdl-button mdl-js-button mdl-button--icon">
+                    <i class="material-icons">more_vert</i>
+                </button>
+
+                <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect mdl-shadow--2dp settings-dropdown"
+                    for="more">
+                    <li class="mdl-menu__item">
+                        Settings
+                    </li>
+                    <a class="mdl-menu__item" href="https://github.com/CreativeIT/getmdl-dashboard/issues">
+                        Support
+                    </a>
+                    <li class="mdl-menu__item">
+                        F.A.Q.
+                    </li>
+                </ul>
+            </div>
+        </header>
+
+        <div class="mdl-layout__drawer">
+            <header>darkboard</header>
+            <nav class="mdl-navigation">
+                <a class="mdl-navigation__link" href="index.html">
+                    <i class="material-icons" role="presentation">dashboard</i>
+                    Dashboard
+                </a>
+                <a class="mdl-navigation__link mdl-navigation__link--current" href="forms.html">
+                    <i class="material-icons" role="presentation">person</i>
+                    Account
+                </a>
+
+                <div class="mdl-layout-spacer"></div>
+                <a class="mdl-navigation__link" href="https://github.com/CreativeIT/getmdl-dashboard">
+                    <i class="material-icons" role="presentation">link</i>
+                    GitHub
+                </a>
+            </nav>
+        </div>
+
+        <main class="mdl-layout__content mdl-color--grey-100">
+            <div class="mdl-card mdl-shadow--2dp employer-form" action="#">
+                <div class="mdl-card__title">
+                    <h2>Form</h2>
+                    <div class="mdl-card__subtitle">Please complete the form</div>
+                </div>
+
+                <div class="mdl-card__supporting-text">
+                    <form action="#" class="form">
+                        <div class="form__article">
+                            <h3>Personal data</h3>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                    <input class="mdl-textfield__input" type="text" id="firstName" value="Luke"/>
+                                    <label class="mdl-textfield__label" for="firstName">First name</label>
+                                </div>
+
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                    <input class="mdl-textfield__input" type="text" id="secondName" value="Skywalker"/>
+                                    <label class="mdl-textfield__label" for="secondName">Second name</label>
+                                </div>
+                            </div>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                    <input class="mdl-textfield__input" type="text" id="birthday" value="25 May, 1977"/>
+                                    <label class="mdl-textfield__label" for="birthday">Birthday</label>
+                                </div>
+
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
+                                    <input class="mdl-textfield__input" value="Male" type="text" id="gender" readonly tabIndex="-1"/>
+
+                                    <label class="mdl-textfield__label" for="gender">Gender</label>
+
+                                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="gender">
+                                        <li class="mdl-menu__item">Male</li>
+                                        <li class="mdl-menu__item">Female</li>
+                                    </ul>
+
+                                    <label for="gender">
+                                        <i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="form__article">
+                            <h3>Employment</h3>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                    <input class="mdl-textfield__input" type="text" value="CreativeIT" id="company" disabled/>
+                                    <label class="mdl-textfield__label" for="company">Company</label>
+                                </div>
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                    <input class="mdl-textfield__input" type="text" id="company_email" value="hello@creativit.io" disabled/>
+                                    <label class="mdl-textfield__label" for="company_email">Company email</label>
+                                </div>
+                            </div>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                    <input class="mdl-textfield__input" type="text" value="Lead developer" id="position"/>
+                                    <label class="mdl-textfield__label" for="position">Position</label>
+                                </div>
+                                <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
+                                    <input class="mdl-textfield__input" value="Senior" type="text" id="qualification" readonly tabIndex="-1"/>
+                                    <label class="mdl-textfield__label" for="qualification">Qualification</label>
+                                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown"
+                                        for="qualification">
+                                        <li class="mdl-menu__item">Young Padawan</li>
+                                        <li class="mdl-menu__item">Junior</li>
+                                        <li class="mdl-menu__item">Middle</li>
+                                        <li class="mdl-menu__item">Senior</li>
+                                    </ul>
+                                    <label for="qualification">
+                                        <i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <span>Type of employment:</span>
+
+                            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="partition-fulltime">
+                                <input type="radio" id="partition-fulltime" class="mdl-radio__button" name="employment" value="1" checked/>
+                                <span class="mdl-radio__label">Fulltime</span>
+                            </label>
+                            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="partition-partTime">
+                                <input type="radio" id="partition-partTime" class="mdl-radio__button" name="employment" value="2"/>
+                                <span class="mdl-radio__label">Part time</span>
+                            </label>
+                            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="partition-remote">
+                                <input type="radio" id="partition-remote" class="mdl-radio__button" name="employment" value="3"/>
+                                <span class="mdl-radio__label">Remote</span>
+                            </label>
+                        </div>
+
+                        <div class="form__article employer-form__contacts">
+                            <h3>Contacts</h3>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--9-col input-group">
+                                    <i class="material-icons pull-left">call</i>
+
+                                    <div class="mdl-textfield mdl-js-textfield pull-left">
+                                        <input class="mdl-textfield__input" type="text" id="phone">
+                                        <label class="mdl-textfield__label" for="phone">XXX-XX-XX</label>
+                                    </div>
+                                </div>
+
+                                <div class="mdl-cell mdl-cell--3-col mdl-textfield mdl-js-textfield getmdl-select">
+                                    <input class="mdl-textfield__input" value="Mobile" type="text" id="phone_type" readonly tabIndex="-1"/>
+                                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="phone_type">
+                                        <li class="mdl-menu__item">Mobile</li>
+                                        <li class="mdl-menu__item">Home</li>
+                                        <li class="mdl-menu__item">Work</li>
+                                    </ul>
+                                    <label for="phone_type">
+                                        <i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--9-col input-group">
+                                    <img src="images/skype.svg">
+
+                                    <div class="mdl-textfield mdl-js-textfield pull-left">
+                                        <input class="mdl-textfield__input" type="text" id="skype" value="Pilot_luke"/>
+                                        <label class="mdl-textfield__label" for="skype">Skype</label>
+                                    </div>
+                                </div>
+
+                                <div class="mdl-cell mdl-cell--3-col mdl-textfield mdl-js-textfield getmdl-select">
+                                    <input class="mdl-textfield__input" value="Personal" type="text" id="skype_type" readonly tabIndex="-1"/>
+                                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="skype_type">
+                                        <li class="mdl-menu__item">Personal</li>
+                                        <li class="mdl-menu__item">Work</li>
+                                    </ul>
+                                    <label for="skype_type">
+                                        <i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--9-col input-group">
+                                    <i class="material-icons pull-left">mail_outline</i>
+
+                                    <div class="mdl-textfield mdl-js-textfield pull-left">
+                                        <input class="mdl-textfield__input" type="text" id="email" value="luke@skywalker.com"/>
+                                        <label class="mdl-textfield__label" for="email">Email</label>
+                                    </div>
+                                </div>
+
+                                <div class="mdl-cell mdl-cell--3-col mdl-textfield mdl-js-textfield getmdl-select">
+                                    <input class="mdl-textfield__input" value="Work" type="text" id="email_type" readonly tabIndex="-1"/>
+                                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="email_type">
+                                        <li class="mdl-menu__item">Personal</li>
+                                        <li class="mdl-menu__item">Work</li>
+                                    </ul>
+                                    <label for="email_type">
+                                        <i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="mdl-grid">
+                                <div class="mdl-cell mdl-cell--9-col input-group">
+                                    <i class="material-icons pull-left">place</i>
+
+                                    <div class="mdl-textfield mdl-js-textfield pull-left">
+                                        <input class="mdl-textfield__input" type="text" id="address"/>
+                                        <label class="mdl-textfield__label" for="address">Address</label>
+                                    </div>
+                                </div>
+
+                                <div class="mdl-cell mdl-cell--3-col mdl-textfield mdl-js-textfield getmdl-select">
+                                    <input class="mdl-textfield__input" value="Home" type="text" id="address_type" readonly
+                                           tabIndex="-1"/>
+                                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="address_type">
+                                        <li class="mdl-menu__item">Home</li>
+                                        <li class="mdl-menu__item">Work</li>
+                                    </ul>
+                                    <label for="address_type">
+                                        <i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="form__article employer-form__general_skills">
+                            <h3>General skills</h3>
+
+                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                <textarea class="mdl-textfield__input" type="text" rows="3" id="AboutMe"></textarea>
+                                <label class="mdl-textfield__label" for="AboutMe">About me</label>
+                            </div>
+                        </div>
+
+                        <div class="form__action">
+                            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="isInfoReliable">
+                                <input type="checkbox" id="isInfoReliable" class="mdl-checkbox__input" required/>
+                                <span class="mdl-checkbox__label">Entered information is reliable</span>
+                            </label>
+                            <button id="submit_button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+                                Submit
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </main>
+    </div>
+
+<!-- inject:js -->
+<!-- endinject -->
+
+</body>
+</html>
+
diff --git a/material-dashboard-lite-master/src/helper.scss b/material-dashboard-lite-master/src/helper.scss
new file mode 100644
index 0000000..b3bfe81
--- /dev/null
+++ b/material-dashboard-lite-master/src/helper.scss
@@ -0,0 +1,91 @@
+.pull-right {
+  float: right;
+}
+
+.pull-left {
+  float: left;
+}
+
+.background-color--primary {
+   background-color: unquote("rgba(#{$color-primary}, 0.9)");
+ }
+
+.background-color--secondary {
+  background-color: unquote("rgba(#{$color-secondary}, 0.9)");
+}
+
+.background-color--baby-blue {
+  background-color: unquote("rgba(#{$color-baby-blue}, 0.9)");
+}
+
+.background-color--cerulean {
+  background-color: unquote("rgba(#{$color-cerulean}, 0.9)");
+}
+
+.background-color--mint {
+  background-color: unquote("rgba(#{$color-mint}, 0.9)");
+}
+
+.text-color--primary {
+  color: unquote("rgba(#{$color-primary}, 0.8)") !important;
+}
+
+.text-color--secondary {
+  color: unquote("rgba(#{$color-secondary}, 0.8)") !important;
+}
+
+.text-color--baby-blue {
+  color: unquote("rgba(#{$color-baby-blue}, 0.8)") !important;
+}
+
+.text-color--cerulean {
+  color: unquote("rgba(#{$color-cerulean}, 0.8)") !important;
+}
+
+.text-color--mint {
+  color: unquote("rgba(#{$color-mint}, 0.8)") !important;
+}
+
+.getmdl-select {
+  .mdl-icon-toggle__label {
+	color: white;
+    }
+
+    &.is-focused i.material-icons {
+	color: unquote("rgb(#{$color-primary})");
+    }
+
+    .mdl-menu__container {
+	margin-top: -45px !important;
+
+	.mdl-menu__outline {
+      box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+	}
+    }
+
+    .mdl-menu .mdl-menu__item {
+	@include typo-employer-form-inputs();
+    }
+}
+
+.mdl-textfield {
+    input, textarea {
+	@include typo-employer-form-inputs();
+    }
+    
+    &.is-focused {
+	&.getmdl-select {
+	    input, textarea {
+		font-weight: 300;
+	    }
+	}
+
+	input, textarea { 
+	    font-weight: 400;
+	}
+    }
+
+    &.is-disabled input{
+	border-bottom-width: 2px !important;
+    }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/images/card_20191114113633.jpg b/material-dashboard-lite-master/src/images/card_20191114113633.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b1d5832f1accfee5de517bbc0c5d295c629a52fe
GIT binary patch
literal 1446
zcmb79do+}J82)CyxhEk}Dm7*@d^MqRY1U3Ixs0(G_e-&ASwqvBk_hFJ>ab|0$)&Rn
z%3#I}tu%vlBE>=F64Dq=oNbla!n%~pF+0=lAN{+}dw$P(-}AihbDp1SRP`3n@o=TN
z0x%d1_)%SeY7B4&;OY?u(=c2E1gK#o0s$gWNEGVpLt`;0G!~6QVK!i}I1SXD)&`uG
zX3&`YdkRN_AQFd0p}(&DFH*Gux){I=Fau#G09+Ra>cUh{03!f^gX*x~KobOkRBIMG
z01N~{I0A_P|J7k|5P?ML0%$$F6=t)EqdwsPgN@zd6zP{yp*}GD`p<8y02C5|RttM|
zHBJZs2_pYf)lRwq0*|zEj5JYuWT5mb2%PqbS(OaX0%7WWYWWDDxT+xY8fAy=>iLIN
zK=sN{1l!hRXsqTL^yj&5UsH?T+>Mn5w?sehpkYA;iDW!w#C7rUgUa$<W_*)YtG{Hd
zx2)4f*hw989Gus3Pq}-|-6At_eAYIvwcnpB@DNG*BF%#Ap#rpQ1}Wwt1>#uk(a`mx
z(qKK3V&#*Rxg=;w>3X+a1?W#XD+KqWhiAWw?&H3phTTN`9q1D@fN!9t2Ph;}l5vIc
z-Ld3r!ju<8eYbOMk|Ana{y4Sm;wDz~+OAy&uKgpdxYOd}tZ6=~%y_P4sJhwiR;n!1
zyob$1bGLhXwjQAD*}bqcVKLM;yD_Iy8TcT8Uf?J+-FH5<&1p1^`jeaEPRnu+_=C+)
zV)CRzMvsk=!<i*pcf)2K(5$9KVG$**A#9ddaKd}F;Egyid=qgcNkGEUmMGR;-i5t$
zCB-kBJB<<qb_``k*-YV)Z4~SNG4_6mLFqNlyc-YaX;j}D9&W8fKR!N_67ot+mDl*O
zf)rVyLUUR)lu6O^#o`EqTo~TN+gao?PVp<^FUNZ|><z%>M0s6V9bWeD=Siw=pNoLI
zM~cYguE?XJ>KnD)jLwx~i4V2sBtir7bI*bUh%a?kCi`kWu%#iv1SD>UKZ>2TgqAar
z;}I{bsDrGBai<bLUyQkLeiK(NSnr~6<stZRk5KxlD<kC&PADCxcv!pgPUxbzx1eIE
z$_I7E3YBcXK-yNjvUfyKD7U0_+ODx*=Xj)AzBX8#K`qEx-Ll#iempC*ly05#!=9z8
z@n;YvcR=PQ@+XKZo_dy>=~P}$f8?HQbB}f2;<Qa{hulA6OV9HXQ&}FpiM+ihv#^>G
zGn3ugk#El>Mjzz!^qZAYb?uO&QBY#oFRj6(^RkNISIBq9L_<AAM_7Glt|9jlH|wu@
z4m5q{Hs(Dr!Wkrd+E>f85wH4`kKKpvnX@E&1m4T<iO7Xh>DZ6M!H6XaMRIWta%OT}
z3BR&Tfg1`d_d5ODglx*uM8w+B5@7QCKI>0k4n2%BTpI0enm(wvXx-8~U=FdLnlIv|
z@u_bst~ZK!+V5x%jFraNK1qzAVqkK>SDsM(F^e#9^2!)A(|_^86mdbRa4ls93h%v?
zMTMo46lc4qnik5XUVLRXnSgl33M^Z#MB}SY4)7*%3=>M`u^7%G@%n{zM<f2sN9p(q
z+1Ob$0tN8+(EKp{Qa8sclbbDJE9rb3Lz@733}(YIplhCwXyI<VAZerl8cei_x_ar2
zVbp$KlQG+ayk%Wx&_*&7%JVDpp-0ttHKvCZ_l4k+>pUCZra|;g6Vem*w2=85q%)s|
z;=n&XKMjoC{M%$s)^ulRuFg#iN5}HA&7EFsPqUdg?oceNu!MDDKHr80*>fGXK6V4=
p<u0*J4-zLD`HYM<cnY<u*ltdi(;vn8u<I;0A!a}rQ20po`XAVRO^5&h

literal 0
HcmV?d00001

diff --git a/material-dashboard-lite-master/src/images/cloudy_and_snow_20191114113633.svg b/material-dashboard-lite-master/src/images/cloudy_and_snow_20191114113633.svg
new file mode 100644
index 0000000..c748602
--- /dev/null
+++ b/material-dashboard-lite-master/src/images/cloudy_and_snow_20191114113633.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M35.9,26.7H12.1c-3.6,0-6.6-3-6.6-6.6v-0.7c0-3.1,2.2-5.8,5.2-6.5
+	v-0.7c0-3.6,3-6.6,6.6-6.6h0.4c2.4,0,4.7,1.4,5.8,3.5c0.7-0.2,1.5-0.4,2.2-0.4c2.7,0,5.1,1.6,6.3,4h3.8c3.6,0,6.6,3,6.6,6.6v0.7
+	C42.5,23.7,39.6,26.7,35.9,26.7z M17.3,6.6c-3.1,0-5.6,2.5-5.6,5.6V13c0,0.1,0,0.1,0,0.2l0,0.6l-0.5,0.1c-2.7,0.4-4.8,2.8-4.8,5.6
+	v0.7c0,3.1,2.5,5.6,5.6,5.6h23.8c3.1,0,5.6-2.5,5.6-5.6v-0.7c0-3.1-2.5-5.6-5.6-5.6h-4.5l-0.1-0.3c-0.9-2.2-3.1-3.7-5.5-3.7
+	c-0.8,0-1.6,0.2-2.3,0.5L23,10.4l-0.2-0.4c-0.9-2-2.9-3.3-5.1-3.3H17.3z"/>
+<g>
+	<line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="15" y1="32.2" x2="15" y2="38.6"/>
+	<line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="12.2" y1="33.8" x2="17.8" y2="37"/>
+	<line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="12.2" y1="37" x2="17.8" y2="33.8"/>
+</g>
+<g>
+	<line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="24" y1="36" x2="24" y2="42.4"/>
+	<line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="21.2" y1="37.6" x2="26.8" y2="40.8"/>
+	<line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="21.2" y1="40.8" x2="26.8" y2="37.6"/>
+</g>
+<g>
+	<line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="30.5" y1="28.5" x2="30.5" y2="34.9"/>
+	<line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="27.8" y1="30.1" x2="33.3" y2="33.3"/>
+	<line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="27.8" y1="33.3" x2="33.3" y2="30.1"/>
+</g>
+</svg>
diff --git a/material-dashboard-lite-master/src/images/imgo_20191114113633.jpg b/material-dashboard-lite-master/src/images/imgo_20191114113633.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e1131f9dc181cbca87a976225cc27ab984ab68f9
GIT binary patch
literal 901
zcmex=<NpH&0WUXCHwH#VMur3+WcYuZ!I^;x$Yo>%kxU@K!VDr=Sy-4^*jU-vz?hwr
zgN>b&osEryn}d@J1b{3aZY~}W2V@9DD-$a-Gb<N68#`DDNyPsH41ydCb_{Qr8I>5A
z1R0qH8UG()kOnyw3>aX5iIJ6sjhPcDsV>04%)kJ$k`X4!$iyrp92msHDyZnVNXgJC
zaUvT~p%jK83_zE%FoNV11sNF_nOT^DAp!$HLs$fb6b*%y92+<Ozs11A%m{Q5vmk>#
z!#}O`eLg^RfbBWybQ(|}tDo-rlhfzzw14?i+T{9TEn)47DSKn>U+N3pfAXJUnN`lA
zNq4@V?D>9j1_Kg3+hWJ$$Yn20f2%OwdK-JKYU#qhKS}x%-`T}wE!*t<;Uco&y}M^C
zrp1Nn-LJB$ZeS0qetKZ#iZ$DHP2U`x_tydDMJTPMXsp1nqyfxh0vmOKp=@_}>AY1X
zhWC41KiM8XeKzD;W}TGPT=QQXb5w18f|tIxd!D6NGcC?dHhOz>|MA7UzO8(%9?kvo
zNW5}qaiE`Gjp>VvU!M0vgjrLM#Oq(!nO|;@l=|bZ_Uj)Ho3pYskDhPaD`oI$8`Kpb
ziZPILCIhPqvIx*qS4)c*Lw%Z8urX<~Z$<W-bJw$97h3I6w>bT(-)rf+^6hbZytTE(
zkH7c#d^dMh)yZpzA`8V&e<{?1+G988V|m`q_N&gX6rUcM`TLXm>1kh|iMCG-H5LiI
zeq2C&VfDg=)r(JEchGnG?(Fp40SE2sqL#|Am-{X+_g#@GOkea%O!P}wNTk{S-vj`*
C0xZb@

literal 0
HcmV?d00001

diff --git a/material-dashboard-lite-master/src/images/skype_20191114113633.svg b/material-dashboard-lite-master/src/images/skype_20191114113633.svg
new file mode 100644
index 0000000..06b76af
--- /dev/null
+++ b/material-dashboard-lite-master/src/images/skype_20191114113633.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 283.5 283.5" enable-background="new 0 0 283.5 283.5" xml:space="preserve">
+<path fill="#FFFFFF" d="M266.8,168.9c-1.3-2.6-1.6-6-1.5-9c0.1-5.3,0.9-10.6,1.4-15.9c-0.2,0-0.4,0-0.7,0c0-3.7,0.1-7.3,0-11
+	c-0.1-2-0.5-4-0.8-5.9C260.6,95.8,246,70,221.4,50.1c-27.6-22.3-59.3-30.4-94.4-25.8c-2.5,0.3-5.6-0.3-7.9-1.5
+	c-14-7.1-28.8-9.8-44.1-7C26.3,24.7,1.8,75,24.4,119.2c1.1,2.1,1.3,4.7,1.4,7.1c0.2,12.1-1.2,24.4,0.4,36.3
+	C34.4,227,98.3,274,162.5,263.8c3.2-0.5,7,0.2,9.9,1.6c13.8,6.6,28.2,9.3,43.2,6.7C264.1,263.9,289.4,212.6,266.8,168.9z
+	 M185.3,221.6c-11,5.1-22.6,7.4-38.1,7.4c-18.3-0.7-37.6-4.1-53.8-17.2c-7.6-6.1-12.3-14-12.7-23.9c-0.3-6.2,1.6-11.6,7-15.1
+	c5.5-3.6,11.4-3,16.4,0.5c4,2.8,7.6,6.5,10.7,10.3c12.8,15.9,26.8,20.7,46.9,14.8c4.4-1.3,8.6-4.5,11.8-7.9
+	c7.1-7.7,5.5-18.1-3.8-22.7c-8.4-4.1-17.7-6.5-26.7-9.3c-12-3.8-24.4-6.5-36.1-11.1c-16.4-6.4-27-18.3-27.3-36.9
+	c-0.3-18.3,6.9-32.9,22.6-42.9c10.2-6.5,21.7-9.3,33.6-9.7c19.2-0.6,38,1.9,54.8,11.8c6.4,3.8,12.3,9.2,16.8,15.1
+	c5.8,7.5,4.6,17.4-1.2,22.8c-6.4,6-17.3,6.5-24.9,0.7c-3.6-2.7-6.7-5.9-10.1-8.9c-11.9-10.4-25.6-13.3-40.4-8.6
+	c-4.2,1.3-8.5,4.9-11,8.6c-4.5,6.5-2.7,13.5,4.5,16.7c8,3.6,16.5,5.8,24.9,8.5c13.7,4.4,27.8,7.8,41.1,13.3
+	c13.1,5.3,22.2,15.3,24.3,30C218.2,190.7,206.4,211.8,185.3,221.6z"/>
+</svg>
diff --git a/material-dashboard-lite-master/src/images/tick-mask_20191114113633.svg b/material-dashboard-lite-master/src/images/tick-mask_20191114113633.svg
new file mode 100644
index 0000000..b098920
--- /dev/null
+++ b/material-dashboard-lite-master/src/images/tick-mask_20191114113633.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   viewBox="0 0 1 1"
+   preserveAspectRatio="xMinYMin meet">
+  <defs>
+    <clipPath id="clip">
+      <path
+         d="M 0,0 0,1 1,1 1,0 0,0 z M 0.8534375,0.1671875 0.9596875,0.273125 0.429375,0.8034375 0.323125,0.9096875 0.2171875,0.8034375 0.0403125,0.626875 0.1465625,0.520625 0.323125,0.6975 0.8534375,0.1671875 z"
+         style="fill:#ffffff;fill-opacity:1;stroke:none" />
+    </clipPath>
+    <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+      <path
+         d="M 0,0 0,1 1,1 1,0 0,0 z M 0.8534375,0.1671875 0.9596875,0.273125 0.429375,0.8034375 0.323125,0.9096875 0.2171875,0.8034375 0.0403125,0.626875 0.1465625,0.520625 0.323125,0.6975 0.8534375,0.1671875 z"
+         style="fill:#ffffff;fill-opacity:1;stroke:none" />
+    </mask>
+  </defs>
+  <rect
+     width="1"
+     height="1"
+     x="0"
+     y="0"
+     clip-path="url(#clip)"
+     style="fill:#000000;fill-opacity:1;stroke:none" />
+</svg>
diff --git a/material-dashboard-lite-master/src/images/tick_20191114113633.svg b/material-dashboard-lite-master/src/images/tick_20191114113633.svg
new file mode 100644
index 0000000..b3d6ec8
--- /dev/null
+++ b/material-dashboard-lite-master/src/images/tick_20191114113633.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   viewBox="0 0 1 1"
+   preserveAspectRatio="xMinYMin meet">
+  <path
+     d="M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z"
+     id="rect3780"
+     style="fill:#ffffff;fill-opacity:1;stroke:none" />
+</svg>
diff --git a/material-dashboard-lite-master/src/images/tick_dark_20191114113633.svg b/material-dashboard-lite-master/src/images/tick_dark_20191114113633.svg
new file mode 100644
index 0000000..b6356f7
--- /dev/null
+++ b/material-dashboard-lite-master/src/images/tick_dark_20191114113633.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   viewBox="0 0 1 1"
+   preserveAspectRatio="xMinYMin meet">
+  <path
+     d="M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z"
+     id="rect3780"
+     style="fill:#4e4e4e;fill-opacity:1;stroke:none" />
+</svg>
diff --git a/material-dashboard-lite-master/src/images/watch_white_20191114113633.svg b/material-dashboard-lite-master/src/images/watch_white_20191114113633.svg
new file mode 100644
index 0000000..432b776
--- /dev/null
+++ b/material-dashboard-lite-master/src/images/watch_white_20191114113633.svg
@@ -0,0 +1,5 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
+</svg>
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/index.html b/material-dashboard-lite-master/src/index.html
new file mode 100644
index 0000000..a890cf0
--- /dev/null
+++ b/material-dashboard-lite-master/src/index.html
@@ -0,0 +1,518 @@
+<!doctype html>
+<!--
+  Material Design Lite
+  Copyright 2015 Google Inc. All rights reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+<head>
+    <link rel="icon" type="image/png" href="images/DB_16х16.png">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Material Dashboard Lite</title>
+
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Material Design Lite">
+
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
+    <!--
+    <link rel="canonical" href="http://www.example.com/">
+    -->
+
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300,100,700,900' rel='stylesheet'
+          type='text/css'>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- inject:css -->
+    <!-- endinject -->
+
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header is-small-screen">
+    <header class="mdl-layout__header">
+        <div class="mdl-layout__header-row">
+            <div class="mdl-layout-spacer"></div>
+
+            <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
+                <label class="mdl-button mdl-js-button mdl-button--icon" for="search">
+                    <i class="material-icons">search</i>
+                </label>
+
+                <div class="mdl-textfield__expandable-holder">
+                    <input class="mdl-textfield__input" type="text" id="search"/>
+                    <label class="mdl-textfield__label" for="search">Enter your query...</label>
+                </div>
+            </div>
+
+            <div class="material-icons mdl-badge mdl-badge--overlap mdl-button--icon notification" id="notification"
+                 data-badge="23">
+                notifications_none
+            </div>
+
+            <ul class="mdl-menu mdl-list mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right mdl-shadow--2dp notifications-dropdown"
+                for="notification">
+                <li class="mdl-list__item">
+                    You have 23 new notifications!
+                </li>
+                <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <i class="material-icons">plus_one</i>
+                        </span>
+                        <span>You have 3 new orders.</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">just now</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--secondary">
+                            <i class="material-icons">error_outline</i>
+                        </span>
+                      <span>Database error</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">1 min</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <i class="material-icons">new_releases</i>
+                        </span>
+                      <span>The Death Star is built!</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">2 hours</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <i class="material-icons">mail_outline</i>
+                        </span>
+                      <span>You have 4 new mails.</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label">5 days</span>
+                    </span>
+                </li>
+                <li class="mdl-list__item list__item--border-top">
+                    <button href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">ALL NOTIFICATIONS</button>
+                </li>
+            </ul>
+
+            <div class="material-icons mdl-badge mdl-badge--overlap mdl-button--icon message" id="inbox" data-badge="4">
+                mail_outline
+            </div>
+
+            <ul class="mdl-menu mdl-list mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right mdl-shadow--2dp messages-dropdown"
+                for="inbox">
+                <li class="mdl-list__item">
+                    You have 4 new messages!
+                </li>
+                <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--primary">
+                            <text>A</text>
+                        </span>
+                        <span>Alice</span>
+                        <span class="mdl-list__item-sub-title">Birthday Party</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">just now</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--baby-blue">
+                            <text>M</text>
+                        </span>
+                        <span>Mike</span>
+                        <span class="mdl-list__item-sub-title">No theme</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">5 min</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--cerulean">
+                            <text>D</text>
+                        </span>
+                        <span>Darth</span>
+                        <span class="mdl-list__item-sub-title">Suggestion</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">23 hours</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="mdl-list__item-avatar background-color--mint">
+                            <text>D</text>
+                        </span>
+                        <span>Don McDuket</span>
+                        <span class="mdl-list__item-sub-title">NEWS</span>
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label label--transparent">30 Nov</span>
+                    </span>
+                </li>
+                <li class="mdl-list__item list__item--border-top">
+                    <button href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">SHOW ALL MESSAGES</button>
+                </li>
+            </ul>
+
+            <div class="avatar-dropdown" id="icon">
+                <span>Luke</span>
+                <img src="images/Icon_header.png">
+            </div>
+
+            <ul class="mdl-menu mdl-list mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect mdl-shadow--2dp account-dropdown"
+                for="icon">
+                <li class="mdl-list__item mdl-list__item--two-line">
+                    <span class="mdl-list__item-primary-content">
+                        <span class="material-icons mdl-list__item-avatar"></span>
+                        <span>Luke</span>
+                        <span class="mdl-list__item-sub-title">Luke@skywalker.com</span>
+                    </span>
+                </li>
+                <li class="list__item--border-top"></li>
+                <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">account_circle</i>
+                        My account
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">check_box</i>
+                        My tasks
+                    </span>
+                    <span class="mdl-list__item-secondary-content">
+                      <span class="label background-color--primary">3 new</span>
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">perm_contact_calendar</i>
+                        My events
+                    </span>
+                </li>
+                <li class="list__item--border-top"></li>
+                <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon">settings</i>
+                        Settings
+                    </span>
+                </li>
+                <li class="mdl-menu__item mdl-list__item">
+                    <span class="mdl-list__item-primary-content">
+                        <i class="material-icons mdl-list__item-icon text-color--secondary">exit_to_app</i>
+                        Log out
+                    </span>
+                </li>
+            </ul>
+
+            <button id="more"
+                    class="mdl-button mdl-js-button mdl-button--icon">
+                <i class="material-icons">more_vert</i>
+            </button>
+
+            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect mdl-shadow--2dp settings-dropdown"
+                for="more">
+                <li class="mdl-menu__item">
+                    Settings
+                </li>
+                <a class="mdl-menu__item" href="https://github.com/CreativeIT/getmdl-dashboard/issues">
+                    Support
+                </a>
+                <li class="mdl-menu__item">
+                    F.A.Q.
+                </li>
+            </ul>
+        </div>
+    </header>
+
+    <div class="mdl-layout__drawer">
+        <header>darkboard</header>
+        <nav class="mdl-navigation">
+            <a class="mdl-navigation__link mdl-navigation__link--current" href="index.html">
+                <i class="material-icons" role="presentation">dashboard</i>
+                Dashboard
+            </a>
+            <a class="mdl-navigation__link" href="forms.html">
+                <i class="material-icons" role="presentation">person</i>
+                Account
+            </a>
+
+            <div class="mdl-layout-spacer"></div>
+            <a class="mdl-navigation__link" href="https://github.com/CreativeIT/getmdl-dashboard">
+                <i class="material-icons" role="presentation">link</i>
+                GitHub
+            </a>
+        </nav>
+    </div>
+
+    <main class="mdl-layout__content">
+
+        <div class="mdl-grid mdl-grid--no-spacing">
+
+            <div class="mdl-grid mdl-cell mdl-cell--9-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone mdl-cell--top">
+
+                <div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp pie-chart">
+                        <div class="mdl-card__title">
+                            <h2 class="mdl-card__title-text">My Day</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <div class="pie-chart__container">
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp weather">
+                        <div class="mdl-card__title">
+                            <h2 class="mdl-card__title-text">Now</h2>
+
+                            <div class="mdl-layout-spacer"></div>
+                            <div class="mdl-card__subtitle-text">
+                                <i class="material-icons">room</i>
+                                Minsk, Belarus
+                            </div>
+                        </div>
+                        <div class="mdl-card__supporting-text mdl-card--expand">
+                            <p class="weather-temperature">-11<sup>&deg;</sup></p>
+
+                            <p class="weather-description">
+                                Cloudy and snow
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp trending">
+                        <div class="mdl-card__title">
+                            <h2 class="mdl-card__title-text">Trending</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <ul class="mdl-list">
+                                <li class="mdl-list__item">
+                                    <span class="mdl-list__item-primary-content list__item-text">UX</span>
+                                    <span class="mdl-list__item-secondary-content">
+                                        <i class="material-icons trending__arrow-up" role="presentation">&#xE5C7</i>
+                                    </span>
+                                    <span class="mdl-list__item-secondary-content trending__percent">1 %</span>
+                                </li>
+                                <li class="mdl-list__item list__item--border-top">
+                                    <span class="mdl-list__item-primary-content list__item-text">PHP</span>
+                                    <span class="mdl-list__item-secondary-content">
+                                        <i class="material-icons trending__arrow-down" role="presentation">&#xE5C5</i>
+                                    </span>
+                                    <span class="mdl-list__item-secondary-content trending__percent">2 %</span>
+                                </li>
+                                <li class="mdl-list__item list__item--border-top">
+                                    <span class="mdl-list__item-primary-content list__item-text ">Big Data</span>
+                                    <span class="mdl-list__item-secondary-content">
+                                        <i class="material-icons trending__arrow-up" role="presentation">&#xE5C7</i>
+                                    </span>
+                                    <span class="mdl-list__item-secondary-content trending__percent">5 %</span>
+                                </li>
+                                <li class="mdl-list__item list__item--border-top">
+                                    <span class="mdl-list__item-primary-content list__item-text">Material Design</span>
+                                    <span class="mdl-list__item-secondary-content">
+                                        <i class="material-icons trending__arrow-up" role="presentation">&#xE5C7</i>
+                                    </span>
+                                    <span class="mdl-list__item-secondary-content trending__percent">18 %</span>
+                                </li>
+                                <li class="mdl-list__item list__item--border-top">
+                                    <span class="mdl-list__item-primary-content">JavaScript</span>
+                                    <span class="mdl-list__item-secondary-content">
+                                        <i class="material-icons trending__arrow-up" role="presentation">&#xE5C7</i>
+                                    </span>
+                                    <span class="mdl-list__item-secondary-content trending__percent">17 %</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mdl-cell mdl-cell--5-col-desktop mdl-cell--5-col-tablet mdl-cell--2-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp cotoneaster">
+                        <div class="mdl-card__title mdl-card--expand">
+                            <h2 class="mdl-card__title-text">Cotoneaster</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <div>
+                                Cotoneaster is a genus of flowering plants in the rose family, Roseaceae, netive to the
+                                Palaearctic region, with a strong concentration of diversity in the genus in the
+                                mountains
+                                of southwestern China and the Himalayas.
+                            </div>
+                            <a href="https://en.wikipedia.org/wiki/Cotoneaster" target="_blank">Wikipedia</a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mdl-cell mdl-cell--7-col-desktop mdl-cell--7-col-tablet mdl-cell--4-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp line-chart">
+                        <div class="mdl-card__title">
+                            <h2 class="mdl-card__title-text">Startup Financing Cycle</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <div class="line-chart__container">
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone ">
+                    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp projects-table">
+                        <thead>
+                        <tr>
+                            <th class="mdl-data-table__cell--non-numeric">Project</th>
+                            <th class="mdl-data-table__cell--non-numeric">Responsible</th>
+                            <th class="mdl-data-table__cell--non-numeric">Client contact</th>
+                            <th class="mdl-data-table__cell--non-numeric">Deadline</th>
+                            <th class="mdl-data-table__cell--non-numeric">Progress</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td class="mdl-data-table__cell--non-numeric">Darkboard</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <span class="label label--mini background-color--mint">Alex</span>
+                                <span class="label label--mini background-color--primary">Dina</span>
+                                <span class="label label--mini background-color--cerulean">Misha</span>
+                            </td>
+                            <td class="mdl-data-table__cell--non-numeric">Luke@skywalker.com</td>
+                            <td class="mdl-data-table__cell--non-numeric">Jun 15</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <div id="task1" class="mdl-progress mdl-js-progress"></div>
+                                <div class="mdl-tooltip" for="task1">
+                                    44%
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="mdl-data-table__cell--non-numeric">Big financial app</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <span class="label label--mini background-color--baby-blue">Vlada</span>
+                            </td>
+                            <td class="mdl-data-table__cell--non-numeric">Boss@financial.com</td>
+                            <td class="mdl-data-table__cell--non-numeric">Mar 1</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <div id="task2" class="mdl-progress mdl-js-progress"></div>
+                                <div class="mdl-tooltip" for="task2">
+                                    14%
+                                </div>
+                            </td>
+                        </tr>
+                        <tr class="is-selected">
+                            <td class="mdl-data-table__cell--non-numeric">New Year office decoration</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <span class="label label--mini background-color--primary">Dina</span>
+                                <span class="label label--mini background-color--baby-blue">Vlada</span>
+                            </td>
+                            <td class="mdl-data-table__cell--non-numeric">info@creativeit.io</td>
+                            <td class="mdl-data-table__cell--non-numeric">Dec 25</td>
+                            <td class="mdl-data-table__cell--non-numeric task-done">
+                                <i id="task3" class="material-icons">done</i>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="mdl-data-table__cell--non-numeric">Don't worry, be happy!!!</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <span class="label label--mini background-color--secondary">Everybody</span>
+                            </td>
+                            <td class="mdl-data-table__cell--non-numeric">Contact@happyness.com</td>
+                            <td class="mdl-data-table__cell--non-numeric">Yesterday</td>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <div id="task4" class="mdl-progress mdl-js-progress"></div>
+                                <div class="mdl-tooltip" for="task4">
+                                    31%
+                                </div>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <div class="mdl-grid mdl-cell mdl-cell--3-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone mdl-cell--top">
+
+                <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--6-col-tablet mdl-cell--2-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp robot">
+                        <div class="mdl-card__title mdl-card--expand">
+                            <h2 class="mdl-card__title-text">BB-8</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <div>
+                                A skittish but loyal astromech, BB-8 accompanied Poe Dameron on many missions for the
+                                Resistance helping keep his X-wing in working order.
+                            </div>
+                            <a href="http://www.starwars.com/databank/bb-8" target="_blank">Star Wars Databank</a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--6-col-tablet mdl-cell--2-col-phone">
+                    <div class="mdl-card mdl-shadow--2dp todo">
+                        <div class="mdl-card__title">
+                            <h2 class="mdl-card__title-text">To-do list</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <ul class="mdl-list">
+
+                            </ul>
+                        </div>
+                        <div class="mdl-card__actions">
+                            <button class="mdl-button mdl-js-button mdl-js-ripple-effect">remove selected</button>
+                            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-shadow--8dp mdl-button--colored ">
+                                <i class="material-icons mdl-js-ripple-effect">add</i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+    </main>
+</div>
+
+<!-- inject:js -->
+<!-- endinject -->
+
+</body>
+</html>
diff --git a/material-dashboard-lite-master/src/label/label.scss b/material-dashboard-lite-master/src/label/label.scss
new file mode 100644
index 0000000..ee4691b
--- /dev/null
+++ b/material-dashboard-lite-master/src/label/label.scss
@@ -0,0 +1,20 @@
+.label {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 1);
+  border-radius: 2px;
+  height: $label-height;
+  padding: $label-padding;
+  margin: 0;
+  margin-left: auto;
+  font-size: 12px;
+  @include typo-label();
+  &--mini {
+    padding: 3px 8px 2px;
+    cursor: pointer;
+    vertical-align: middle;
+  }
+  &--transparent {
+    background-color: rgba(0, 0, 0, 0);
+    padding: 0;
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/layout/layout.scss b/material-dashboard-lite-master/src/layout/layout.scss
new file mode 100644
index 0000000..20e8830
--- /dev/null
+++ b/material-dashboard-lite-master/src/layout/layout.scss
@@ -0,0 +1,146 @@
+.mdl-layout {
+  background: $layout-drawer-bg-color;
+}
+
+main {
+  background: url("../images/Dark_background_1920x1080.png") center top no-repeat;
+  background-size: cover;
+  margin-right: -18px;
+}
+
+.mdl-layout__header {
+  width: 100% !important;
+  margin-left: 0 !important;
+}
+
+.mdl-layout__drawer {
+  border: none;
+  header {
+    text-align: center;
+    text-transform: uppercase;
+    color: $layout-drawer-header-color;
+    height: $layout-header-desktop-row-height;
+    line-height: $layout-header-desktop-row-height;
+    background: $layout-drawer-header-bg-color;
+    font-size: 25px;
+    font-weight: 500;
+    letter-spacing: 1px;
+  }
+
+  & .mdl-navigation {
+    flex-grow: 1;
+    padding-top: 48px;
+    padding-bottom: 8px;
+    .mdl-layout-spacer {
+        border-bottom: 1px solid unquote("rgba(#{$color-white}, 0.1)");
+        margin-bottom: 8px;
+    }
+    & .mdl-navigation__link {
+      @include typo-layout-navigation-link;
+      padding: 12px 0;
+      position: relative;
+      .material-icons {
+        margin: -3px 25px 0 23px;
+        color: $layout-drawer-navigation-link-icon-color;
+      }
+      &--current {
+        .material-icons {
+          color: $layout-drawer-navigation-link-active-color;
+        }
+        border-left: 2px solid $layout-drawer-navigation-link-active-color;
+      }
+
+      &:hover {
+        color: $layout-drawer-navigation-link-active-color;
+        .material-icons {
+          color: $layout-drawer-navigation-link-active-color;
+        }
+      }
+    }
+  }
+}
+
+.mdl-layout__header-row {
+  color: $dropdown-menu-header-font-color;
+  .avatar-dropdown {
+    cursor: pointer;
+    margin: 0 10px;
+    padding: 0 20px;
+    line-height: $layout-header-desktop-row-height;
+
+    &:hover {
+      background: $layout-header-icon-hover-color;
+    }
+    & > img {
+      width: $layout-header-icon-size;
+      height: $layout-header-icon-size;
+    }
+    & > span {
+      color: $layout-header-name-color;
+      padding-right: 16px;
+    }
+  }
+  .mdl-textfield {
+    padding: 23px 0;
+  }
+  .mdl-button--icon {
+    &:hover {
+      background: $layout-header-icon-hover-color;
+    }
+  }
+  .material-icons.mdl-badge {
+    margin: 10px;
+    cursor: pointer;
+    overflow: visible;
+    text-align: center;
+    height: $button-fab-font-size;
+    width: $button-fab-font-size;
+    min-width: 0;
+    padding: 4px 4px;
+    &:hover {
+      background: $layout-header-icon-hover-color;
+    }
+    &.mdl-badge--overlap {
+      &:after {
+        top: -3px;
+        right: -8px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $layout-screen-size-threshold) {
+  .mdl-layout--fixed-drawer {
+    & > .mdl-layout__content {
+      margin-left: 0;
+    }
+    & > .mdl-layout__drawer {
+      transform: translateX(-$layout-drawer-width - 10px);
+      &.is-visible {
+        transform: translateX(0) !important;
+      }
+    }
+    & > .mdl-layout__drawer {
+      header {
+        height: $layout-header-mobile-row-height;
+        line-height: $layout-header-mobile-row-height;
+      }
+    }
+  }
+  .mdl-layout__header-row {
+    .avatar-dropdown {
+      line-height: $layout-header-mobile-row-height;
+    }
+  }
+}
+
+@media screen and (max-width: $phone-breakpoint - 1px) {
+  .mdl-grid > .mdl-grid .mdl-cell {
+    width: 100% !important;
+  }
+  .mdl-layout__header-row {
+    .message, .notification {
+      display: none;
+    }
+  }
+}
diff --git a/material-dashboard-lite-master/src/list/list.scss b/material-dashboard-lite-master/src/list/list.scss
new file mode 100644
index 0000000..4931da9
--- /dev/null
+++ b/material-dashboard-lite-master/src/list/list.scss
@@ -0,0 +1,11 @@
+.mdl-list {
+  margin: 0;
+  .mdl-list__item {
+    @include typo-list;
+  }
+  .list__item--border-top {
+    background-clip: padding-box;
+    border-top: $list-item-border;
+  }
+}
+
diff --git a/material-dashboard-lite-master/src/menu/menu.scss b/material-dashboard-lite-master/src/menu/menu.scss
new file mode 100644
index 0000000..70d5f15
--- /dev/null
+++ b/material-dashboard-lite-master/src/menu/menu.scss
@@ -0,0 +1,10 @@
+.mdl-menu {
+  width: $dropdown-menu-width;
+  .mdl-menu__item.mdl-list__item {
+    display: flex;
+  }
+}
+
+.mdl-menu__outline {
+  @include shadow-4dp();
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/mixins.scss b/material-dashboard-lite-master/src/mixins.scss
new file mode 100644
index 0000000..87a17fc
--- /dev/null
+++ b/material-dashboard-lite-master/src/mixins.scss
@@ -0,0 +1,165 @@
+@mixin typo-default($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  font-size: 16px;
+  font-weight: 300;
+}
+
+@mixin typo-list($usePreferred: true) {
+  @include typo-default($usePreferred);
+  color: white;
+  letter-spacing: 0;
+}
+
+@mixin typo-card-supporting-text($usePreferred: true) {
+  @include typo-default($usePreferred);
+}
+
+@mixin typo-card-subtitle-text($usePreferred: true) {
+  @include typo-default($usePreferred);
+}
+
+@mixin typo-textfield-input($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+}
+
+@mixin typo-data-table($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  font-weight: 300;
+}
+
+@mixin typo-dropdown-menu-header($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  font-size: 14px;
+  font-weight: 100;
+  color: $dropdown-menu-header-font-color;
+}
+
+@mixin typo-dropdown-menu-li($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  font-size: 14px;
+  font-weight: 100;
+  color: white;
+}
+
+@mixin typo-label($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  font-weight: 300;
+  line-height: 1em;
+}
+
+@mixin typo-message-topic($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  line-height: 1.1em;
+  span:first-of-type {
+    font-size: 15px;
+    font-weight: 500;
+    color: white;
+  }
+
+  span {
+    font-size: 12px;
+    font-weight: lighter;
+    color: rgba(255, 255, 255, 0.5);
+  }
+}
+
+@mixin typo-account-dropdown-header($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  line-height: 1.1em;
+  span:first-of-type {
+    line-height: 1.7em;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 18px;
+    font-weight: 300;
+  }
+
+  span {
+    color: rgba(255, 255, 255, 0.64);
+    line-height: 1.3em;
+    font-size: 14px;
+    font-weight: 300;
+  }
+}
+
+@mixin typo-piechart-title($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  fill: unquote("rgb(#{$color-white})");
+  font-weight: 300;
+}
+
+@mixin typo-chart-legend($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  font-weight: 300;
+  font-size: 16px;
+  color: unquote("rgb(#{$color-white})");
+}
+
+@mixin typo-linechart-axis-label($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  font-size: 12px;
+  font-weight: 300;
+}
+
+@mixin typo-weather-temperature($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  font-size: 100px;
+  line-height: 1;
+}
+
+@mixin typo-weather-description($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  font-size: 18px;
+  font-weight: 300;
+}
+
+@mixin typo-layout-navigation-link($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  font-size: 13px;
+  font-weight: 500;
+  .material-icons {
+    font-size: 22px;
+    width: 22px;
+  }
+}
+
+@mixin typo-employer-form-header($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+
+  h2:first-of-type {
+    font-size: 24px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.8); //$employer-form-color-darker;//unquote("rgb(#{$color-primary})");
+    line-height: 1.2em;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .mdl-card__subtitle {
+    font-size: 13px;
+    font-weight: 300;
+    color: rgba(255, 255, 255, 0.2); //$employer-form-color-darker;
+    line-height: 1.2em;
+  }
+}
+
+@mixin typo-employer-form-topic($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  font-size: 20px;
+  font-weight: 300;
+  color: $employer-form-color-darker;
+}
+
+@mixin typo-employer-form-inputs($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  color: $employer-form-color-brighter;
+  font-size: 16px;
+  font-weight: 300;
+}
+
+@mixin typo-employer-form-button($usePreferred: true) {
+  @include typo-preferred-font($usePreferred);
+  font-size: 13px;
+  line-height: 13px;
+  font-weight: 400;
+  color: white;
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/progress/progress.scss b/material-dashboard-lite-master/src/progress/progress.scss
new file mode 100644
index 0000000..b7a9bcd
--- /dev/null
+++ b/material-dashboard-lite-master/src/progress/progress.scss
@@ -0,0 +1,13 @@
+.mdl-progress {
+  min-width: 100px;
+  width: auto;
+  > .bufferbar {
+    background: {
+      image: none;
+      color: $progress-secondary-color;
+    }
+  }
+  &:focus {
+    outline: none;
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/textfield/textfield.scss b/material-dashboard-lite-master/src/textfield/textfield.scss
new file mode 100644
index 0000000..c2e9105
--- /dev/null
+++ b/material-dashboard-lite-master/src/textfield/textfield.scss
@@ -0,0 +1,6 @@
+.mdl-textfield {
+  width: auto;
+  .mdl-textfield__input {
+    @include typo-textfield-input;
+  }
+}
diff --git a/material-dashboard-lite-master/src/tooltip/tooltip.scss b/material-dashboard-lite-master/src/tooltip/tooltip.scss
new file mode 100644
index 0000000..a562185
--- /dev/null
+++ b/material-dashboard-lite-master/src/tooltip/tooltip.scss
@@ -0,0 +1,4 @@
+.mdl-tooltip {
+  padding: $table-tooltip-vertical-padding $table-tooltip-horizontal-padding;
+  border: none;
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/variables.scss b/material-dashboard-lite-master/src/variables.scss
new file mode 100644
index 0000000..797a6c3
--- /dev/null
+++ b/material-dashboard-lite-master/src/variables.scss
@@ -0,0 +1,270 @@
+/* ==========  IMAGES  ========== */
+$image_path: '../images';
+
+/* ==========  Color & Themes  ========== */
+$color-primary: 0, 188, 212;
+$color-secondary: 255, 82, 82;
+$color-baby-blue: 116, 199, 209;
+$color-cerulean: 80, 150, 215;
+$color-mint: 96, 196, 150;
+$color-white: 255, 255, 255;
+$color-black: 0, 0, 0;
+
+$background-color: #4e4e4e;
+$background-color-header: #242424;
+
+/* ==========  Typography  ========== */
+
+/* ==========  Components  ========== */
+
+/* ==========  Standard Buttons  ========== */
+
+// Default button colors.
+$button-secondary-color: unquote("rgb(#{$color-white})");
+// Colored button colors.
+$button-primary-color-alt: unquote("rgb(#{$color-secondary})");
+// Ripple color for colored raised buttons.
+// Disabled button colors.
+$button-primary-color-disabled: #6b6b6b;
+//background-color:
+$button-secondary-color-disabled: unquote("rgba(#{$color-white}, 0.3)");
+//color:
+// FAB colors and sizes.
+$button-fab-color-alt: unquote("rgb(#{$color-secondary})");
+
+$button-fab-text-color-alt: #ffffff;
+$button-fab-hover-color-alt: #ff4c4c;
+$button-fab-active-color-alt: #f23d3d;
+// Icon button colors and sizes.
+
+/* ==========  Icon Toggles  ========== */
+
+/* ==========  Radio Buttons  ========== */
+
+/* ==========  Ripple effect  ========== */
+
+/* ==========  Layout  ========== */
+
+// Drawer
+$layout-drawer-width: 236px;
+$layout-drawer-bg-color: #202020;
+$layout-nav-color: #202020;
+$layout-drawer-navigation-link-active-background: unquote("rgba(#{$color-black}, 0.25)");
+$layout-drawer-navigation-link-active-color: unquote("rgb(#{$color-primary})");
+$layout-nav-color: unquote("rgba(#{$color-black}, 0.25)");
+$layout-drawer-navigation-link-icon-color: unquote("rgba(#{$color-white}, 0.56)");
+$layout-drawer-header-color: unquote("rgb(#{$color-white})");
+$layout-drawer-header-bg-color: unquote("rgba(#{$color-black},0.85)");
+
+// Header
+$layout-header-text-color: unquote("rgb(#{$color-primary})");
+$layout-header-bg-color: $background-color-header;
+$layout-header-name-color: unquote("rgba(#{$color-white}, 0.5)");
+$layout-header-icon-hover-color: unquote("rgba(#{$color-black}, 0.3)");
+
+// Tabs
+
+/* ==========  Content Tabs  ========== */
+
+/* ==========  Checkboxes  ========== */
+$checkbox-off-color: unquote("rgb(#{$color-white})");
+$checkbox-color: unquote("rgb(#{$color-secondary})");
+
+/* ==========  Switches  ========== */
+
+/* ==========  Spinner  ========== */
+
+/* ==========  Text fields  ========== */
+$todo-input-text-label-color: unquote("rgba(#{$color-white}, 0.2)");
+
+$input-text-highlight-color: unquote("rgb(#{$color-primary})");
+$input-text-bottom-border-color: rgba(255, 255, 255, 0.2);
+$input-text-disabled-text-color: rgba(255, 255, 255, 0.6);
+
+//placeholder color
+$todo-input-text-highlight-color: unquote("rgba(#{$color-white}, 0.7)");
+
+//bottom line color
+
+/* ==========  Card  ========== */
+$card-background-color: $background-color;
+$card-text-color: unquote("rgba(#{$color-white}, 0.8)");
+$card-supporting-text-text-color: unquote("rgba(#{$color-white}, 0.8)");
+$card-subtitle-color: unquote("rgba(#{$color-white}, 0.5)");
+
+$card-title-background-color: unquote("rgba(#{$color-black}, 0.3)");
+$card-actions-background-color: unquote("rgba(#{$color-white},0.05)");
+$card-text-color: unquote("rgba(#{$color-white}, 0.8)");
+$card-link-color: unquote("rgb(#{$color-primary})");
+$card-href-color: unquote("rgb(#{$color-primary})");
+
+$card-title-img-color: unquote("rgb(#{$color-white})");
+$card-deg-color: unquote("rgba(#{$color-white}, 0.9)");
+
+/* ==========  Sliders ========== */
+
+/* ========== Progress ========== */
+$progress-main-color: unquote("rgb(#{$color-secondary})");
+$progress-secondary-color: unquote("rgba(#{$color-white}, 0.4)");
+
+/* ==========  List ========== */
+$list-main-text-text-color: unquote("rgb(#{$color-white})");
+$list-supporting-text-text-color: unquote("rgba(#{$color-white}, 0.54)");
+$list-icon-color: unquote("rgba(#{$color-white}, 0.8)");
+$list-icon-hover-color: unquote("rgb(#{$color-primary})");
+
+$list-border-color: unquote("rgba(#{$color-white},0.1)");
+$list-item-border: 1px solid $list-border-color;
+
+/* ==========  Item ========== */
+
+// Default Item Colors
+$default-item-focus-bg-color: unquote("rgba(#{$color-black}, 0.15)");
+$default-item-active-bg-color: unquote("rgba(#{$color-black}, 0.15)");
+$default-item-hover-bg-color: unquote("rgba(#{$color-black}, 0.2)");
+
+// Disabled Button Colors
+
+/* ==========  Dropdown menu ========== */
+$default-dropdown-bg-color: $background-color;
+
+$dropdown-menu-width: 310px;
+$dropdown-menu-header-font-color: unquote("rgba(#{$color-white}, 0.8)");
+$settings_dropdown_width: 135px;
+$account-dropdown-avatar-size: 48px;
+$messages-dropdown-label-text-color: unquote("rgba(#{$color-white}, 0.5)");
+
+/* ==========  Tooltips  ========== */
+$tooltip-background-color: #353535;
+
+/* ==========  Footer  ========== */
+
+/* TEXTFIELD */
+
+/* SWITCH */
+
+/* SPINNER */
+
+// Amount of circle the arc takes up.
+// Time it takes to expand and contract arc.
+// How much the start location of the arc should rotate each time.
+
+/* RADIO */
+$radio-off-color: unquote("rgba(#{$color-white}, 0.8)");
+$radio-color: unquote("rgba(#{$color-primary}, 0.8)");
+
+/* MENU */
+
+/* LIST */
+$list-border: 0;
+$list-bottom-padding: 16px;
+$list-avatar-text-left-distance: 64px;
+$list-icon-text-left-distance: 56px;
+$list-avatar-size: 32px;
+$list-two-line-height: 64px;
+
+/* LAYOUT */
+$layout-drawer-narrow: 236px;
+$layout-header-mobile-indent: 8px;
+$layout-header-desktop-indent: 20px;
+$layout-screen-size-threshold: 1440px;
+
+/* ICON */
+
+/* ICON TOGGLE */
+
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+
+/* CHECKBOX */
+$checkbox-button-size: 18px;
+$checkbox-padding: 0;
+
+/* CARD */
+/* Card dimensions */
+$card-height: auto;
+$card-width: auto;
+$card-title-font-size: 24px;
+$card-title-text-font-weight: 400;
+$card-vertical-padding: 20px;
+
+/* Cover image */
+
+/* BUTTON */
+$button-font-weigth: 400;
+
+/* ANIMATION */
+
+/* PROGRESS */
+
+/* BADGE */
+$badge-background: unquote("rgb(#{$color-primary})");
+$badge-color: unquote("rgb(#{$color-white})");
+
+/* SHADOWS */
+
+/* GRID */
+$grid-tablet-columns: 12;
+$grid-phone-columns: 4;
+
+$grid-desktop-gutter: 32px;
+$grid-desktop-margin: 16px;
+
+$grid-tablet-breakpoint: 1152px;
+$grid-desktop-breakpoint: 1920px;
+$phone-breakpoint: 800px;
+
+/* DATA TABLE */
+$data-table-font-size: 16px;
+$data-table-header-font-size: 13px;
+
+$data-table-color: unquote("rgb(#{$color-white})");
+$data-table-header-color: unquote("rgb(#{$color-white})");
+$data-table-divider-color: unquote("rgba(#{$color-white},0.05)");
+$data-table-hover-color: unquote("rgba(#{$color-black}, 0.2)");
+$data-table-selection-color: $background-color;
+
+$data-table-column-spacing: 16px;
+
+/* TOOLTIP */
+$tooltip-font-size: 12px;
+$table-tooltip-vertical-padding: 5px;
+$table-tooltip-horizontal-padding: 8px;
+
+//-------------------------------------------------------
+
+/* WIDGETS & COMPONENTS */
+
+/* Trending */
+$trending-arrow-size: 48px;
+$trending-arrow-up-color: unquote("rgb(#{$color-primary})");
+$trending-arrow-down-color: unquote("rgb(#{$color-secondary})");
+
+/* label */
+$label-height: 12px;
+$label-padding: 5px 8px 5px 8px;
+
+/* charts */
+$pie-chart-height: 228px;
+
+$line-chart-height: 280px;
+$line-chart-width: 100%;
+$line-chart-axis-label-color: unquote("rgba(#{$color-white},0.5)");
+$line-chart-guideline-color: unquote("rgba(#{$color-white},0.5)");
+$line-chart-guideline-width: 0.5px;
+
+$legend-mark-size: 8px;
+$legend-text-indent: $legend-mark-size + 16;
+
+/* employer form */
+$employer-form-width: 670px;
+$employer-form-color-brighter: rgba(255, 255, 255, 1);
+$employer-form-color-darker: rgba(255, 255, 255, 0.6);
+$employer-form-horizontal-padding: 15px;
+
+$weather-shadow-color: unquote("rgba(#{$color-black}, 0.4)");
+$weather-shadow-4px: 4px 4px 4px $weather-shadow-color;
+
+/* row */
+$row-col-padding: 30px;
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/account-dropdown/account-dropdown.scss b/material-dashboard-lite-master/src/widgets/account-dropdown/account-dropdown.scss
new file mode 100644
index 0000000..9eac5bc
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/account-dropdown/account-dropdown.scss
@@ -0,0 +1,31 @@
+.account-dropdown {
+  .mdl-list__item {
+    font-size: 14px;
+    &:first-child {
+      font-size: 16px;
+      padding-top: $list-min-padding/2;
+      padding-bottom: $list-min-padding/2;
+      height: $account-dropdown-avatar-size + $list-min-padding;
+      .mdl-list__item-primary-content {
+        height: $account-dropdown-avatar-size;
+        line-height: 28px;
+        .mdl-list__item-avatar {
+          height: $account-dropdown-avatar-size;
+          width: $account-dropdown-avatar-size;
+          background: url("../images/Icon.png");
+          background-size: cover;
+        }
+        .mdl-list__item-sub-title {
+          font-weight: 300;
+        }
+      }
+    }
+    &:hover .mdl-list__item-icon {
+      color: $list-icon-hover-color;
+    }
+  }
+  .list__item--border-top {
+    margin-top: 8px;
+    padding-top: 8px;
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/chart-legend/chart-legend.scss b/material-dashboard-lite-master/src/widgets/chart-legend/chart-legend.scss
new file mode 100644
index 0000000..f13462a
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/chart-legend/chart-legend.scss
@@ -0,0 +1,15 @@
+.legend {
+  .legend__item {
+    @include typo-chart-legend;
+    margin: 8px 18px;
+    display: inline-block;
+    .legend__text {
+      margin-left: $legend-text-indent;
+    }
+    .legend__mark {
+      width: $legend-mark-size;
+      height: $legend-mark-size;
+      margin-top: 4px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/cotoneaster/cotoneaster.scss b/material-dashboard-lite-master/src/widgets/cotoneaster/cotoneaster.scss
new file mode 100644
index 0000000..8e84f43
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/cotoneaster/cotoneaster.scss
@@ -0,0 +1,20 @@
+.cotoneaster {
+  height: 430px;
+  .mdl-card__supporting-text {
+    @include typo-card-supporting-text;
+    padding-bottom: 26px;
+  }
+  .mdl-card__title {
+    background: url('../images/cotoneaster.jpg') center center no-repeat;
+    background-size: cover;
+    .mdl-card__title-text {
+      color: $card-title-img-color;
+    }
+  }
+}
+
+@media screen and (max-width: $grid-tablet-breakpoint - 1px) {
+  .cotoneaster {
+    height: 329px;
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/employer-form/employer-form.js b/material-dashboard-lite-master/src/widgets/employer-form/employer-form.js
new file mode 100644
index 0000000..8364066
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/employer-form/employer-form.js
@@ -0,0 +1,9 @@
+{
+  let checkbox = document.querySelector('.employer-form .form__action .mdl-checkbox__input'),
+	button = document.querySelector('.employer-form .form__action .mdl-button');
+  button.disabled = !checkbox.checked;
+
+  checkbox.addEventListener('change', () => {
+    button.disabled = !checkbox.checked;
+  });
+}
diff --git a/material-dashboard-lite-master/src/widgets/employer-form/employer-form.scss b/material-dashboard-lite-master/src/widgets/employer-form/employer-form.scss
new file mode 100644
index 0000000..3095731
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/employer-form/employer-form.scss
@@ -0,0 +1,123 @@
+.employer-form {
+  padding: 0;
+  width: $employer-form-width;
+  background-color: $background-color;
+  margin: 16px auto;
+
+  .mdl-radio {
+    width: 20%;
+    margin-top: 22px;
+    margin-bottom: 22px;
+    color: $employer-form-color-brighter;
+
+    span:first-of-type {
+      margin-left: 10px;
+    }
+  }
+
+  .form__article > span {
+    float: left;
+    width: 100%;
+    color: $employer-form-color-darker;
+    font-weight: 200;
+  }
+
+  .mdl-card__title {
+    background-color: $color-accent;
+    height: 66px;
+    width: 100%;
+    padding-top: 16px;
+    padding-left: $employer-form-horizontal-padding;
+    padding-right: $employer-form-horizontal-padding;
+    padding-bottom: 0;
+    display: block;
+    @include typo-employer-form-header();
+  }
+
+  button.mdl-button.mdl-button--colored {
+    width: 68px;
+    height: 32px;
+    @include typo-employer-form-button();
+    background-color: unquote("rgb(#{$color-primary})");
+
+    &:disabled {
+      background-color: gray;
+      color: $employer-form-color-darker;
+    }
+  }
+
+  label {
+    font-size: 15px;
+    color: $employer-form-color-darker;
+  }
+
+  .form__action {
+
+    .mdl-checkbox {
+      .mdl-ripple {
+        background: unquote("rgb(#{$color-primary})");
+      }
+
+      &.is-checked {
+        .mdl-checkbox__box-outline {
+          border-color: unquote("rgb(#{$color-primary})");
+
+          .mdl-checkbox__tick-outline {
+            background-color: unquote("rgb(#{$color-primary})");
+            background-image: url("#{$checkbox-image-path}/tick_dark.svg?embed");
+          }
+        }
+      }
+    }
+  }
+}
+
+.employer-form__general_skills {
+  margin-top: 24px;
+
+  div {
+    width: 100%;
+  }
+
+  h3 {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
+  .mdl-textfield label {
+    color: $employer-form-color-darker;
+  }
+
+  .mdl-textfield--floating-label.is-focused .mdl-textfield__label {
+    color: unquote("rgb(#{$color-primary})");
+  }
+
+  textarea {
+    height: 90px;
+  }
+}
+
+.employer-form__contacts {
+  h3 {
+    margin-bottom: 40px;
+  }
+
+  div {
+    .mdl-textfield.getmdl-select .mdl-textfield__input {
+      color: $employer-form-color-darker;
+    }
+
+    .mdl-textfield {
+      padding-top: 0;
+
+      label {
+        top: 4px;
+        font-weight: 300;
+      }
+    }
+
+    i {
+      color: $employer-form-color-brighter;
+    }
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/form/form.scss b/material-dashboard-lite-master/src/widgets/form/form.scss
new file mode 100644
index 0000000..4afc48a
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/form/form.scss
@@ -0,0 +1,94 @@
+.form {
+  .mdl-grid {
+    padding: 0;
+  }
+
+  .mdl-cell {
+    margin: 0;
+    padding-right: $row-col-padding;
+    &.mdl-textfield.is-focused .mdl-textfield__label:after {
+      width: calc(100% - #{$row-col-padding});
+    }
+
+    &:last-of-type {
+      padding-right: 0;
+      &.mdl-textfield.is-focused .mdl-textfield__label:after {
+        width: 100%;
+      }
+    }
+  }
+
+  .mdl-cell--1-col {
+    width: calc(100% * 1 / 12);
+  }
+
+  .mdl-cell--2-col {
+    width: calc(100% * 2 / 12);
+  }
+
+  .mdl-cell--3-col {
+    width: calc(100% * 3 / 12);
+  }
+
+  .mdl-cell--4-col {
+    width: calc(100% * 4 / 12);
+  }
+
+  .mdl-cell--5-col {
+    width: calc(100% * 5 / 12);
+  }
+
+  .mdl-cell--6-col {
+    width: calc(100% * 6 / 12);
+  }
+
+  .mdl-cell--7-col {
+    width: calc(100% * 7 / 12);
+  }
+
+  .mdl-cell--8-col {
+    width: calc(100% * 8 / 12);
+  }
+
+  .mdl-cell--9-col {
+    width: calc(100% * 9 / 12);
+  }
+
+  .mdl-cell--10-col {
+    width: calc(100% * 10 / 12);
+  }
+
+  .mdl-cell--11-col {
+    width: calc(100% * 11 / 12);
+  }
+
+  .mdl-cell--12-col {
+    width: 100%;
+  }
+}
+
+.form__article {
+  h3 {
+    @include typo-employer-form-topic();
+    margin-top: 4px;
+    margin-bottom: 20px;
+  }
+}
+
+.form__action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 60px;
+
+  .mdl-checkbox {
+    width: auto;
+    .mdl-checkbox__label {
+      margin-left: 10px;
+      @include typo-employer-form-inputs();
+    }
+  }
+  .mdl-button {
+    padding: 0;
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/input-group/input-group.scss b/material-dashboard-lite-master/src/widgets/input-group/input-group.scss
new file mode 100644
index 0000000..e13742e
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/input-group/input-group.scss
@@ -0,0 +1,26 @@
+.input-group {
+
+  & > i {
+    margin-right: 15px;
+    margin-top: 4px;
+    margin-left: 5px;
+    font-size: 20px;
+  }
+
+  img {
+    margin-top: 4px;
+    margin-left: 5px;
+    margin-right: 16px;
+    height: 18px;
+    width: 18px;
+    float: left;
+  }
+
+  label {
+    margin-top: 4px;
+  }
+
+  .mdl-textfield {
+    width: calc(100% - 40.5px);
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/line-chart/line-chart-nvd3.js b/material-dashboard-lite-master/src/widgets/line-chart/line-chart-nvd3.js
new file mode 100644
index 0000000..f55444b
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/line-chart/line-chart-nvd3.js
@@ -0,0 +1,265 @@
+{
+  class LineChart {
+        constructor(columns, color, margin, data, nv) {
+          this.columns = columns;
+          this.color = color;
+          this.margin = margin;
+          this.data = data;
+          this.nv = nv;
+          this.maxX = 130;
+          this.drawStep = 6; // It shows how many points will be drawn in one step
+          this.durationResizeAnimation = 500;
+        }
+
+        _addSvgContainer() {
+          this.svg = d3.select('.line-chart__container')
+              .append('div')
+              .append('svg');
+        }
+
+        _getSvgSizes() {
+          let svgWidth = getComputedStyle(this.svg[0][0]).width,
+              svgHeight = getComputedStyle(this.svg[0][0]).height;
+          this.svgWidth = svgWidth.slice(0, svgWidth.length - 2);
+          this.svgHeight = svgHeight.slice(0, svgHeight.length - 2) - this.margin;
+        }
+
+        _addAxisLabels() {
+          d3.selectAll('.line-chart__container svg .y-axis-label')
+              .remove();
+          d3.select('.line-chart__container svg')
+              .append('text')
+              .attr('class', 'y-axis-label')
+              .attr('x', '-72')
+              .attr('y', '12')
+              .attr('transform', 'rotate(-90)')
+              .text('REVENUE');
+          d3.select('.line-chart__container svg')
+              .append('text')
+              .attr('class', 'x-axis-label')
+              .text('TIME');
+        }
+
+        _buildBackground() {
+          this._addSvgContainer();
+          this._getSvgSizes();
+
+          let bars = [];
+          for (let i = 0; i < this.columns; i++) {
+            bars.push(this.svgHeight);
+          }
+
+          this.barsLayout = this.svg.append('g')
+              .attr('class', 'bars')
+              .attr('transform', 'translate(' + this.margin + ', 0)')
+              .selectAll('rect')
+              .data(bars)
+              .enter()
+              .append('rect');
+
+          this._addAxisLabels();
+
+          this._setBackgroundSizes();
+        }
+
+        _setBackgroundSizes() {
+          let availableBarWidth = (this.svgWidth - 2 * this.margin) / this.columns,
+              barWidth = availableBarWidth / 2;
+          this.barsLayout
+              .attr('fill', this.color)
+              .attr('y', this.margin)
+                .attr('height', function(d, i) {
+                  return d;
+                })
+                .transition().duration(this.durationResizeAnimation)
+                .attr('width', barWidth)
+                .attr('x', function(d, i) {
+                  return i * availableBarWidth;
+                });
+          d3.select('.line-chart__container svg .x-axis-label')
+              .transition().duration(this.durationResizeAnimation)
+              .attr('x', this.svgWidth - this.margin - 30)
+              .attr('y', this.svgHeight - (this.svgHeight) / 4 + this.margin + 14);
+        }
+
+        drawChart() {
+          this._buildBackground();
+          this._buildLegend();
+          this._buildNvGraph();
+          this._animateGraphs();
+        }
+
+        _buildNvGraph() {
+          this._tuneNvGraph();
+
+          nv.addGraph(() => {
+            this.svg.datum(this.data)
+                .transition().duration(0)
+                .call(this.lineChart);
+            nv.utils.windowResize(this.resizeBackground.bind(this));
+            nv.utils.windowResize(this.lineChart.update);
+            return this.lineChart;
+          });
+        }
+
+        _tuneNvGraph() {
+          this.lineChart = nv.models.lineChart()
+              .margin({top: this.margin, right: this.margin, bottom: 0, left: this.margin})
+              .useInteractiveGuideline(true)
+              .xDomain([0, 13.6])
+              .yDomain([-1.01, 3])
+              .showLegend(false)
+              .showYAxis(true)
+              .showXAxis(true)
+              .pointSize(5);
+
+          this.lineChart.tooltip.enabled(false);
+          this.lineChart.interactiveLayer.tooltip.enabled(false);
+
+          this.lineChart.xAxis
+              .showMaxMin(false)
+              .tickValues([0])
+              .tickFormat(d3.format('c'));
+
+          this.lineChart.yAxis
+              .showMaxMin(false)
+              .ticks(10)
+              .tickFormat(d3.format('c'));
+        }
+
+        _buildLegend() {
+          let legend = d3.select('.line-chart__container')
+              .append('div')
+              .attr('class', 'legend')
+              .selectAll('.legend__item')
+              .data(this.data)
+              .enter()
+              .append('div')
+              .attr('class', 'legend__item');
+
+          legend.append('div')
+                .attr('class', 'legend__mark pull-left')
+                .style('background-color', d => {
+                  return d.color;
+                });
+
+          legend.append('div')
+                .attr('class', 'legend__text')
+                .text(d => {
+                  return d.key;
+                });
+        }
+
+        resizeBackground() {
+          this._getSvgSizes();
+          this._setBackgroundSizes();
+        }
+
+        _animateGraphs() {
+          let i = 1;
+          this.timer = setInterval(() => {
+            this._calcAllGraphs(i);
+            this._drawNextStep(i);
+            i++;
+            this._checkEndOfAnimation(i);
+          }, 15);
+        }
+
+        _drawNextStep(i) {
+          if (i % this.drawStep == 0 || i == this.maxX) {
+            this.lineChart.update();
+          }
+        }
+
+        _checkEndOfAnimation(i) {
+          if (i == this.maxX + 1) {
+            this.lineChart.duration(this.durationResizeAnimation);
+            this.data[1].fillOpacity = 0.11;
+            this.lineChart.update();
+            clearInterval(this.timer);
+          }
+        }
+
+        _calcAllGraphs(i) {
+          this._calcFirstGraph(i);
+          this._calcSecondGraph(i);
+          this._calcThirdGraph(i);
+        }
+
+        _calcFirstGraph(i) {
+          const INTERVAL_1 = 28,
+              INTERVAL_2 = 71,
+              INTERVAL_3 = 110;
+          let graphAwesome = this.data[0].values;
+
+          if (i < INTERVAL_1) {
+            graphAwesome.push({x: i / 10, y: (.0343 * i * i - .67 * i) / 14});
+          } else {
+            if (i < INTERVAL_2) {
+              graphAwesome.push({x: i / 10, y: -(i - 71) * (i - 71) / 1026 + 2.378});
+            } else {
+              if (i < INTERVAL_3) {
+                graphAwesome.push({x: i / 10, y: -4 / (i - 43) + 2.53});
+              } else {
+                graphAwesome.push({x: i / 10, y: ((i - 114) * (i - 114) * (i - 114)) / 13000 + 2.476});
+              }
+            }
+          }
+        }
+
+        _calcSecondGraph(i) {
+          const INTERVAL_1 = 30,
+              INTERVAL_2 = 82;
+          let graphGood = this.data[1].values;
+
+          if (i < INTERVAL_1) {
+            graphGood.push({x: i / 10, y: (.03255 * i * i - .96 * i) / 16});
+          } else {
+            if (i < INTERVAL_2) {
+              graphGood.push({x: i / 10, y: (-.01055 * (i - 80.3) * (i - 80.3) + 27) / 15});
+            } else {
+              graphGood.push({x: i / 10, y: (((i / 2) - 45) * ((i / 2) - 45) * ((i / 2) - 45)) / 15000 + 1.805});
+            }
+          }
+        }
+
+        _calcThirdGraph(i) {
+          const INTERVAL_1 = 31,
+              INTERVAL_2 = 103;
+          let graphFail = this.data[2].values;
+
+          if (i < INTERVAL_1) {
+            graphFail.push({x: i / 10, y: (.02255 * i * i - .91 * i) / 13});
+          } else {
+            if (i < INTERVAL_2) {
+              graphFail.push({x: i / 10, y: .82 * Math.sin((i - 45) / 21)});
+            } else {
+              graphFail.push({x: i / 10, y: -(i - 130) * (i - 130) * (i - 130) / 64000});
+            }
+          }
+        }
+    }
+
+  let data = [
+        {
+          values: [{x: 0, y: 0}],
+          key: 'Awesome',
+          color: 'rgb(80, 150, 215)'
+        },
+        {
+          values: [{x: 0, y: 0}],
+          key: 'Good',
+          color: 'rgb(0, 188, 212)',
+          fillOpacity: 0.00001,
+          area: true
+        },
+        {
+          values: [{x: 0, y: 0}],
+          key: 'Fail',
+          color: 'rgb(255, 82, 82)'
+        }
+    ];
+
+  let lineChart = new LineChart(7, '#4a4a4a', 20, data, nv);
+  lineChart.drawChart();
+}
diff --git a/material-dashboard-lite-master/src/widgets/line-chart/line-chart.scss b/material-dashboard-lite-master/src/widgets/line-chart/line-chart.scss
new file mode 100644
index 0000000..33cbaaf
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/line-chart/line-chart.scss
@@ -0,0 +1,40 @@
+.line-chart__container {
+  min-height: $line-chart-height;
+  svg {
+    height: $line-chart-height;
+    width: $line-chart-width;
+    .y-axis-label, .x-axis-label {
+      @include typo-linechart-axis-label;
+      fill: $line-chart-axis-label-color;
+    }
+    .nv-lineChart {
+      .nv-guideline {
+        stroke: $line-chart-guideline-color;
+        stroke-width: $line-chart-guideline-width;
+      }
+      .tick {
+        // setting?
+        opacity: 0.1 !important;
+        &.zero {
+          opacity: 0.5 !important;
+          line {
+            stroke-opacity: 1 !important;
+          }
+        }
+      }
+      .nv-y .domain {
+        stroke-opacity: 0 !important;
+      }
+      .nvd3.nv-scatter .nv-groups .nv-point.hover {
+        stroke-width: 5px;
+      }
+    }
+  }
+  .legend {
+    margin: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 16px;
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/link/link.scss b/material-dashboard-lite-master/src/widgets/link/link.scss
new file mode 100644
index 0000000..d3699ac
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/link/link.scss
@@ -0,0 +1,5 @@
+a {
+  @include typo-default;
+  color: $card-link-color;
+  text-decoration: none;
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/message-notifications/messages-dropdown.scss b/material-dashboard-lite-master/src/widgets/message-notifications/messages-dropdown.scss
new file mode 100644
index 0000000..ea6e7e5
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/message-notifications/messages-dropdown.scss
@@ -0,0 +1,36 @@
+.messages-dropdown {
+  .label {
+    color: $messages-dropdown-label-text-color;
+  }
+  .mdl-list__item-primary-content {
+    font-weight: 400;
+    line-height: 18px;
+    .mdl-list__item-avatar {
+      padding: ($list-avatar-size - $list-icon-size)/2;
+      text-align: center;
+      .material-icons {
+        vertical-align: top;
+      }
+      text {
+        font-size: 19px;
+        vertical-align: middle;
+      }
+    }
+    .mdl-list__item-sub-title {
+      font-weight: 100;
+      font-size: 12px;
+    }
+  }
+  &.mdl-list {
+    .mdl-list__item {
+      @include typo-dropdown-menu-li;
+      &:first-child {
+        color: $dropdown-menu-header-font-color;
+      }
+      &:last-child {
+        padding-top: $list-min-padding/2;
+        padding-bottom: 0;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/notifications-dropdown/notifications-dropdown.scss b/material-dashboard-lite-master/src/widgets/notifications-dropdown/notifications-dropdown.scss
new file mode 100644
index 0000000..6813011
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/notifications-dropdown/notifications-dropdown.scss
@@ -0,0 +1,19 @@
+.notifications-dropdown.mdl-list {
+  .mdl-list__item {
+    @include typo-dropdown-menu-li;
+    &:first-child {
+      color: $dropdown-menu-header-font-color;
+    }
+    .mdl-list__item-avatar {
+      padding: ($list-avatar-size - $list-icon-size)/2;
+      text-align: center;
+      .material-icons {
+        vertical-align: top;
+      }
+    }
+    &:last-child {
+      padding-top: $list-min-padding/2;
+      padding-bottom: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/pie-chart/pie-chart-nvd3.js b/material-dashboard-lite-master/src/widgets/pie-chart/pie-chart-nvd3.js
new file mode 100644
index 0000000..09d7ccd
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/pie-chart/pie-chart-nvd3.js
@@ -0,0 +1,144 @@
+{
+  var colors = [
+      'rgba(96, 196, 150, 1)',
+      'rgba(80, 150, 215, 1)',
+      'rgba(0, 188, 212, 1)',
+      'rgba(116, 199, 209, 1)',
+      'rgba(255, 82, 82, 1)',
+      'rgba(0, 0, 0, 0)'
+  ];
+
+  var data = [
+        {
+          'key': 'Coding',
+          'y': 0,
+          'end': 9
+        },
+        {
+          'key': 'Eating',
+          'y': 0,
+          'end': 3
+        },
+        {
+          'key': 'Sleeping',
+          'y': 0,
+          'end': 3
+        },
+        {
+          'key': 'Meditation',
+          'y': 0,
+          'end': 3
+        },
+        {
+          'key': 'The fight against evil',
+          'y': 0,
+          'end': 6
+        }
+        ,
+        {
+          'key': 'Pending',
+          'y': 23.9
+        }
+    ];
+
+  nv.addGraph(() => {
+    var innerRadius = 0.86,
+        outerRadius = 1.02;
+
+    var pieChart = nv.models.pieChart()
+        .x(d => {return d.key;})
+        .y(d => {return d.y;})
+        .showLabels(false)
+        .donut(true)
+        .growOnHover(true)
+        .padAngle(.04)
+        .cornerRadius(0)
+        .margin({'left': -10, 'right': -10, 'top': -10, 'bottom': -10})
+        .color(colors)
+        .arcsRadius([{'inner': innerRadius, 'outer': outerRadius},
+                     {'inner': innerRadius, 'outer': outerRadius},
+                     {'inner': innerRadius, 'outer': outerRadius},
+                     {'inner': innerRadius, 'outer': outerRadius},
+                     {'inner': innerRadius, 'outer': outerRadius}
+                    ])
+        .showLegend(false)
+        .title('0 hours')
+        .titleOffset(10);
+
+    pieChart.tooltip.enabled(true)
+        .hideDelay(0)
+        .headerEnabled(false)
+                .contentGenerator(d => {
+                  if (d === null) {
+                    return '';
+                  }
+                  d3.selectAll('.nvtooltip').classed('mdl-tooltip', true);
+                  return d.data.y + ' hours';
+                });
+
+    var container = d3.select('.pie-chart__container')
+        .append('div')
+        .append('svg')
+        .datum(data)
+        .transition().duration(1200)
+        .call(pieChart);
+
+    var h = 0, i = 0;
+    var timer = setInterval(animatePie, 70, data);
+
+    function animatePie(data) {
+      if (i < data.length - 1) {
+        if (data[i].y < data[i].end) {
+          data[i].y++;
+          data[data.length - 1].y--;
+          pieChart.title((h + 1) + ' hours');
+          h++;
+        } else {
+          i++;
+        }
+      } else {
+        data.splice(data.length - 1, 1);
+        clearInterval(timer);
+        return;
+      }
+      if (container[0][0]) {
+        pieChart.update();
+      } else {
+        clearInterval(timer);
+      }
+    }
+
+    d3.select('.nv-pie .nv-pie')
+        .append('image')
+        .attr('width', '30')
+        .attr('height', '30')
+        .attr('xlink:href', 'images/watch_white.svg')
+        .attr('transform', 'translate(-15,-35)');
+
+    var color = d3.scale.ordinal().range(colors);
+
+    var legend = d3.select('.pie-chart__container')
+        .append('div')
+        .attr('class', 'legend')
+        .selectAll('.legend__item')
+        .data(data.slice(0, data.length - 1))
+        .enter()
+        .append('div')
+        .attr('class', 'legend__item');
+
+    legend.append('div')
+        .attr('class', 'legend__mark pull-left')
+            .style('background-color', d => {
+              return color(d.key);
+            });
+
+    legend.append('div')
+        .attr('class', 'legend__text')
+            .text(d => {
+              return d.key;
+            });
+
+    return pieChart;
+  });
+}
+
diff --git a/material-dashboard-lite-master/src/widgets/pie-chart/pie-chart.scss b/material-dashboard-lite-master/src/widgets/pie-chart/pie-chart.scss
new file mode 100644
index 0000000..7b89278
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/pie-chart/pie-chart.scss
@@ -0,0 +1,25 @@
+.pie-chart__container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+  min-height: $pie-chart-height;
+  svg {
+    min-height: 200px;
+    max-width: 180px;
+    .nvd3.nv-pie {
+      path {
+        fill-opacity: 1;
+        stroke-width: 0;
+      }
+      .nv-pie-title {
+        @include typo-piechart-title;
+        font-size: 22px !important;
+      }
+    }
+  }
+  .legend {
+    max-width: 140px;
+  }
+}
+
diff --git a/material-dashboard-lite-master/src/widgets/robot/robot.scss b/material-dashboard-lite-master/src/widgets/robot/robot.scss
new file mode 100644
index 0000000..caa8902
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/robot/robot.scss
@@ -0,0 +1,14 @@
+.robot {
+  height: 450px;
+  .mdl-card__supporting-text {
+    @include typo-card-supporting-text;
+    padding-bottom: 26px;
+  }
+  .mdl-card__title {
+    background: url('../images/robot.png') center center no-repeat;
+    background-size: cover;
+    .mdl-card__title-text {
+      color: $card-title-img-color;
+    }
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/setting-dropdown/settings-dropdown.scss b/material-dashboard-lite-master/src/widgets/setting-dropdown/settings-dropdown.scss
new file mode 100644
index 0000000..0d0174a
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/setting-dropdown/settings-dropdown.scss
@@ -0,0 +1,6 @@
+.settings-dropdown {
+  width: $settings_dropdown_width;
+  .mdl-menu__item, a {
+    @include typo-dropdown-menu-li;
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/table/table.js b/material-dashboard-lite-master/src/widgets/table/table.js
new file mode 100644
index 0000000..dac5e3d
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/table/table.js
@@ -0,0 +1,20 @@
+{
+  let task1 = document.querySelector('#task1'),
+      task2 = document.querySelector('#task2'),
+      task4 = document.querySelector('#task4');
+
+  task1.addEventListener('mdl-componentupgraded', () => {
+    task1.MaterialProgress.setProgress(44);
+  });
+  task2.addEventListener('mdl-componentupgraded', () => {
+    task2.MaterialProgress.setProgress(14);
+  });
+  task4.addEventListener('mdl-componentupgraded', () => {
+    task4.MaterialProgress.setProgress(31);
+  });
+
+  setTimeout(() => {
+    document.querySelector('.projects-table .is-selected td > label').classList.add('is-checked');
+    componentHandler.upgradeDom();
+  }, 100);
+}
diff --git a/material-dashboard-lite-master/src/widgets/table/table.scss b/material-dashboard-lite-master/src/widgets/table/table.scss
new file mode 100644
index 0000000..83893d1
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/table/table.scss
@@ -0,0 +1,43 @@
+.projects-table {
+  width: 100%;
+  tbody {
+    td:nth-child(1) {
+      width: 1px;
+    }
+    td:nth-child(2) {
+      width: 300px;
+    }
+    td:nth-child(3) {
+      width: 240px;
+    }
+    td:nth-child(4) {
+      width: 300px;
+    }
+    td:nth-child(5) {
+      width: 200px;
+    }
+    td:nth-child(6) {
+      width: 300px;
+      .mdl-progress {
+        cursor: pointer;
+        min-width: 80px;
+        max-width: 200px;
+      }
+    }
+    .task-done {
+      padding-top: 6px !important;
+      padding-bottom: 0 !important;
+      color: $progress-main-color;
+      .material-icons {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 848px) {
+  .projects-table {
+    display: none;
+  }
+}
+
diff --git a/material-dashboard-lite-master/src/widgets/todo/todo.js b/material-dashboard-lite-master/src/widgets/todo/todo.js
new file mode 100644
index 0000000..0c7fa72
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/todo/todo.js
@@ -0,0 +1,229 @@
+{
+  'use strict';
+
+  /*==========MODEL==========*/
+
+  class Model {
+        constructor(database) {
+          this.database = database ||
+              [
+                    {
+                      title: 'Fix bugs',
+                      id: 1651644545,
+                      completed: ''
+                    },
+
+                    {
+                      title: 'Implement 30% of my feature',
+                      id: 1651646545,
+                      completed: ''
+                    },
+
+                    {
+                      title: 'Fencing',
+                      id: 5451646545,
+                      completed: 'checked'
+                    },
+
+                    {
+                      title: 'Read an article about Test-Driven Development',
+                      id: 5428646545,
+                      completed: ''
+                    }
+                ];
+        }
+
+        createItem(title) {
+          let newItem = {
+            title: title,
+            id: new Date().getTime(),
+            completed: ''
+          };
+          this.database.push(newItem);
+          return newItem;
+        };
+
+        checkItem(id) {
+          for (let i = 0; i < this.database.length; i++) {
+            if (id == this.database[i].id) {
+              this.database[i].completed = (this.database[i].completed) ? '' : 'checked';
+              return;
+            }
+          }
+        };
+
+        deleteItem(id) {
+          for (let i = 0; i < this.database.length; i++) {
+            if (id == this.database[i].id) {
+              this.database.splice(i, 1);
+              return;
+            }
+          }
+        };
+
+        deleteCompletedItems() {
+          for (let i = 0; i < this.database.length; i++) {
+            if (this.database[i].completed === 'checked') {
+              this.database.splice(i, 1);
+              i--;
+            }
+          }
+        };
+    }
+
+  /*==========VIEW==========*/
+
+  class View {
+        constructor() {
+          this.$todoList = document.querySelector('.todo .mdl-list');
+          this.inputTemplate =
+                `<div class="mdl-textfield mdl-js-textfield">
+                         <input class="mdl-textfield__input" type="text" id="todo-input">
+                         <label class="mdl-textfield__label" for="todo-input">What to do?..</label>
+                     </div>`;
+        }
+
+        insertInput() {
+          let newLi = document.createElement('li');
+          newLi.classList.add('mdl-list__item');
+          newLi.innerHTML = this._prepareTemplate({});
+          this.$todoList.appendChild(newLi);
+          View.upgradeNewMdlComponents();
+          let inputSpan = document.querySelector('.todo .mdl-list li:last-child .mdl-checkbox__label');
+          inputSpan.innerHTML = this.inputTemplate;
+          View.upgradeNewMdlComponents();
+          document.querySelector('.todo .mdl-list__item:last-child .mdl-textfield__input').focus();
+        }
+
+        _prepareTemplate(data) {
+          return `<span class = "mdl-list__item-primary-content">
+                        <label for="${data.id}" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" checkboxItem>
+                            <input type="checkbox" id="${data.id}" ${data.completed} class="mdl-checkbox__input" />
+                            <span class="mdl-checkbox__label">${data.title}</span>
+                        </label>
+                    </span>
+                    <div class="mdl-list__item-secondary-content">
+                        <button for = "${data.id}" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored mdl-button--mini-icon pull-right" deleteItem>
+                            <i class="material-icons">clear</i>
+                        </button>
+                    </div>`;
+        }
+
+        showAll(database) {
+          this.$todoList.innerHTML = '';
+          database.forEach(data => {
+            let newLi = document.createElement('li');
+            newLi.classList.add('mdl-list__item');
+            newLi.innerHTML = this._prepareTemplate(data);
+            this.$todoList.appendChild(newLi);
+          });
+          View.upgradeNewMdlComponents();
+        }
+
+        show(data) {
+          let newLi = document.createElement('li');
+          newLi.classList.add('mdl-list__item');
+          newLi.innerHTML = this._prepareTemplate(data);
+          this.$todoList.appendChild(newLi);
+          View.upgradeNewMdlComponents();
+        }
+
+        static upgradeNewMdlComponents() {
+          componentHandler.upgradeDom();
+        }
+    }
+
+  /*==========CONTROLLER==========*/
+
+  class Controller {
+        constructor(model, view) {
+          this.$addItemButton = document.querySelector('.todo .mdl-button--fab');
+          this.$removeCompletedButton = document.querySelector('.todo .mdl-card__actions .mdl-button');
+          this.model = model;
+          this.view = view;
+
+          this.view.$todoList.addEventListener('mouseup', event => {
+            let clickTarget = event.path[1];
+            if (clickTarget.hasAttribute('deleteItem')) {
+              let id = clickTarget.getAttribute('for');
+              this.model.deleteItem(id);
+              this.removeItem(event);
+            } else
+                    if (clickTarget.hasAttribute('checkboxItem')) {
+                      this.check(clickTarget);
+                    } else {
+                      clickTarget = event.target;
+                      if (clickTarget.hasAttribute('checkboxItem')) {
+                        this.check(clickTarget);
+                      }
+                    }
+          });
+
+          this.$addItemButton.addEventListener('click', () => {
+            this.$addItemButton.setAttribute('disabled', 'true');
+            this.$removeCompletedButton.setAttribute('disabled', 'true');
+            this.view.insertInput();
+
+            let inputTextArea = document.querySelector('.todo .mdl-list__item:last-child .mdl-textfield__input');
+            inputTextArea.addEventListener('keydown', event => {
+              if (event.keyCode === 27) {
+                this.removeItem(event);
+              } else {
+                if (event.keyCode === 13) {
+                  this.addItem(inputTextArea.value);
+                  this.removeItem(event);
+                }
+              }
+            });
+          });
+
+          this.$removeCompletedButton.addEventListener('click', () => {
+            this.removeCompletedItems();
+          });
+
+          if (this.model.database != []) {
+            this.view.showAll(this.model.database);
+          }
+        };
+
+        addItem(title) {
+          if (title.trim() === '') {
+            return;
+          }
+          this.view.show(this.model.createItem(title));
+        };
+
+        removeItem(clickTarget) {
+          for (let i = 0; i < clickTarget.path.length; i++) {
+            if (clickTarget.path[i].className == 'mdl-list__item') {
+              clickTarget.path[i].remove();
+              break;
+            }
+          }
+          this.$addItemButton.removeAttribute('disabled');
+          this.$removeCompletedButton.removeAttribute('disabled');
+        };
+
+        removeCompletedItems() {
+          this.model.deleteCompletedItems();
+          this.view.showAll(this.model.database);
+        };
+
+        check(checkbox) {
+          let id = checkbox.getAttribute('for');
+          this.model.checkItem(id);
+        };
+    }
+
+  /*==========INITIALIZE==========*/
+
+  class Todo {
+        constructor() {
+          this.model = new Model();
+          this.view = new View();
+          this.controller = new Controller(this.model, this.view);
+        }
+    }
+
+  let todo = new Todo();
+}
diff --git a/material-dashboard-lite-master/src/widgets/todo/todo.scss b/material-dashboard-lite-master/src/widgets/todo/todo.scss
new file mode 100644
index 0000000..cc902b1
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/todo/todo.scss
@@ -0,0 +1,43 @@
+.todo {
+  .mdl-card__supporting-text {
+    width: 100%;
+    padding: 0;
+    min-height: 70px;
+    .mdl-list__item {
+      align-items: flex-start;
+      padding-bottom: 0;
+      .mdl-list__item-primary-content {
+        max-width: 100%;
+        word-wrap: break-word;
+      }
+      .material-icons {
+        visibility: hidden;
+      }
+      &:hover .material-icons {
+        visibility: visible;
+      }
+    }
+    .mdl-checkbox {
+      height: auto;
+      padding-left: $checkbox-button-size*2;
+    }
+    .mdl-textfield {
+      width: 100%;
+      padding: 0;
+    }
+    .mdl-textfield__input {
+      padding: 2px 0;
+    }
+    .mdl-textfield__label {
+      color: $todo-input-text-label-color;
+      top: 0;
+      &:after {
+        background-color: $todo-input-text-highlight-color;
+        bottom: 0;
+      }
+    }
+  }
+  .mdl-card__actions {
+    margin-top: 20px;
+  }
+}
\ No newline at end of file
diff --git a/material-dashboard-lite-master/src/widgets/trending/trending.scss b/material-dashboard-lite-master/src/widgets/trending/trending.scss
new file mode 100644
index 0000000..9f0d345
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/trending/trending.scss
@@ -0,0 +1,28 @@
+.trending {
+  .mdl-card__supporting-text {
+    width: 100%;
+    padding: 8px 0;
+  }
+  .mdl-list__item {
+    &:hover {
+      background-color: $default-item-hover-bg-color;
+    }
+    .mdl-list__item-secondary-content {
+      margin: 0;
+    }
+  }
+  .material-icons {
+    line-height: 0.33333;
+    font-size: $trending-arrow-size;
+  }
+  &__arrow-up {
+    color: $trending-arrow-up-color;
+  }
+  &__arrow-down {
+    color: $trending-arrow-down-color;
+  }
+  &__percent {
+    text-align: right;
+    width: 40px;
+  }
+}
diff --git a/material-dashboard-lite-master/src/widgets/weather/weather.scss b/material-dashboard-lite-master/src/widgets/weather/weather.scss
new file mode 100644
index 0000000..43aa74c
--- /dev/null
+++ b/material-dashboard-lite-master/src/widgets/weather/weather.scss
@@ -0,0 +1,42 @@
+.weather {
+  height: 329px;
+  .mdl-card__supporting-text {
+    color: $card-text-color;
+    background: url('../images/weather_bck.png') center center no-repeat;
+    background-size: cover;
+    text-align: right;
+    padding-top: 38px;
+    text-shadow: $weather-shadow-4px;
+    .weather-temperature {
+      @include typo-weather-temperature;
+      color: $card-deg-color;
+      sup {
+        position: relative;
+        top: 13px;
+      }
+    }
+    .weather-description {
+      @include typo-weather-description;
+      position: relative;
+      &:before {
+        width: 35px;
+        position: absolute;
+        right: 150px;
+        content: url(../images/cloudy_and_snow.svg);
+      }
+    }
+
+  }
+
+  .mdl-card__title {
+    .mdl-card__subtitle-text {
+      @include typo-card-subtitle-text;
+      //color: $card-subhead-color;
+      .material-icons {
+        font-size: 16px;
+        top: 2px;
+        position: relative;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/matrix-of-cube-with-one-element/README.markdown b/matrix-of-cube-with-one-element/README.markdown
new file mode 100644
index 0000000..9c16973
--- /dev/null
+++ b/matrix-of-cube-with-one-element/README.markdown
@@ -0,0 +1,6 @@
+# matrix of cube with one element
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/t_afif/pen/PoJeqwN](https://codepen.io/t_afif/pen/PoJeqwN).
+
+CSS Tip!
+https://twitter.com/ChallengesCss/status/1477969300770144257
diff --git a/matrix-of-cube-with-one-element/dist/index.html b/matrix-of-cube-with-one-element/dist/index.html
new file mode 100644
index 0000000..7e7271e
--- /dev/null
+++ b/matrix-of-cube-with-one-element/dist/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - matrix of cube with one element</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="cube"></div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/matrix-of-cube-with-one-element/dist/style.css b/matrix-of-cube-with-one-element/dist/style.css
new file mode 100644
index 0000000..0ca7ab9
--- /dev/null
+++ b/matrix-of-cube-with-one-element/dist/style.css
@@ -0,0 +1,33 @@
+.cube {
+  --m: 4; /* number of columns */
+  --n: 5; /* number of rows */
+  --size: 40px; /* size of the cubes */
+  --gap :10px;  /* gap between cubes */
+  
+  margin: auto;
+  aspect-ratio: var(--m)/var(--n);
+  width: calc(var(--m)*(1.353*var(--size) + var(--gap)));
+  background:
+    conic-gradient(from -90deg at var(--size) calc(0.353*var(--size)),
+      #249FAB 135deg,#81C5A3 0 270deg,#26609D 0); /* update the colors here */
+  -webkit-mask:
+    linear-gradient(to bottom right,
+       #0000 calc(0.25*var(--size)),#000 0 calc(100% - calc(0.25*var(--size)) - 1.414*var(--gap)),#0000 0),
+    conic-gradient(from -90deg at right var(--gap) bottom var(--gap),#000 90deg,#0000 0);
+          mask:
+    linear-gradient(to bottom right,
+       #0000 calc(0.25*var(--size)),#000 0 calc(100% - calc(0.25*var(--size)) - 1.414*var(--gap)),#0000 0),
+    conic-gradient(from -90deg at right var(--gap) bottom var(--gap),#000 90deg,#0000 0);
+  background-size:   calc(100%/var(--m)) calc(100%/var(--n));
+  -webkit-mask-size: calc(100%/var(--m)) calc(100%/var(--n));
+          mask-size: calc(100%/var(--m)) calc(100%/var(--n));
+  -webkit-mask-composite: source-in;
+          mask-composite: intersect;
+}
+
+body {
+  background: linear-gradient(135deg,#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
+  margin:0;
+  min-height:100vh;
+  display:flex;
+}
\ No newline at end of file
diff --git a/matrix-of-cube-with-one-element/license.txt b/matrix-of-cube-with-one-element/license.txt
new file mode 100644
index 0000000..0b0b67a
--- /dev/null
+++ b/matrix-of-cube-with-one-element/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Temani Afif (https://codepen.io/t_afif/pen/PoJeqwN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/matrix-of-cube-with-one-element/src/index.html b/matrix-of-cube-with-one-element/src/index.html
new file mode 100644
index 0000000..2e31d66
--- /dev/null
+++ b/matrix-of-cube-with-one-element/src/index.html
@@ -0,0 +1 @@
+<div class="cube"></div>
\ No newline at end of file
diff --git a/matrix-of-cube-with-one-element/src/style.css b/matrix-of-cube-with-one-element/src/style.css
new file mode 100644
index 0000000..0ca7ab9
--- /dev/null
+++ b/matrix-of-cube-with-one-element/src/style.css
@@ -0,0 +1,33 @@
+.cube {
+  --m: 4; /* number of columns */
+  --n: 5; /* number of rows */
+  --size: 40px; /* size of the cubes */
+  --gap :10px;  /* gap between cubes */
+  
+  margin: auto;
+  aspect-ratio: var(--m)/var(--n);
+  width: calc(var(--m)*(1.353*var(--size) + var(--gap)));
+  background:
+    conic-gradient(from -90deg at var(--size) calc(0.353*var(--size)),
+      #249FAB 135deg,#81C5A3 0 270deg,#26609D 0); /* update the colors here */
+  -webkit-mask:
+    linear-gradient(to bottom right,
+       #0000 calc(0.25*var(--size)),#000 0 calc(100% - calc(0.25*var(--size)) - 1.414*var(--gap)),#0000 0),
+    conic-gradient(from -90deg at right var(--gap) bottom var(--gap),#000 90deg,#0000 0);
+          mask:
+    linear-gradient(to bottom right,
+       #0000 calc(0.25*var(--size)),#000 0 calc(100% - calc(0.25*var(--size)) - 1.414*var(--gap)),#0000 0),
+    conic-gradient(from -90deg at right var(--gap) bottom var(--gap),#000 90deg,#0000 0);
+  background-size:   calc(100%/var(--m)) calc(100%/var(--n));
+  -webkit-mask-size: calc(100%/var(--m)) calc(100%/var(--n));
+          mask-size: calc(100%/var(--m)) calc(100%/var(--n));
+  -webkit-mask-composite: source-in;
+          mask-composite: intersect;
+}
+
+body {
+  background: linear-gradient(135deg,#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
+  margin:0;
+  min-height:100vh;
+  display:flex;
+}
\ No newline at end of file
diff --git a/mc-escher-cube-23150-with-css-only/README.markdown b/mc-escher-cube-23150-with-css-only/README.markdown
new file mode 100644
index 0000000..d0dc485
--- /dev/null
+++ b/mc-escher-cube-23150-with-css-only/README.markdown
@@ -0,0 +1,9 @@
+# MC Escher Cube 23150 with CSS only
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/HunorMarton/pen/BazeOpE](https://codepen.io/HunorMarton/pen/BazeOpE).
+
+A recreation of MC Escher's Cube 23150. The original artwork can be found [here](https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.webshopapp.com%2Fshops%2F20277%2Ffiles%2F202231178%2F1500x4000x3%2Fmc-escher-cube-23150.jpg&imgrefurl=https%3A%2F%2Fwww.demooistemuren.nl%2Fen%2Fmc-escher-cube-23150.html&tbnid=Q14OfCq-aDUOqM&vet=12ahUKEwiA3pCeyYrtAhWL76QKHUnlDOwQMyhiegUIARCbAg..i&docid=yeUt17E7UqUGrM&w=1500&h=855&q=mc%20escher&ved=2ahUKEwiA3pCeyYrtAhWL76QKHUnlDOwQMyhiegUIARCbAg)
+
+Check out how it was made on [YouTube](https://www.youtube.com/watch?v=cNqgatGqvC8). In this video I explain 3D transformations in CSS, creating patterns with selectors, using Pug instead of HTML, and using mixins in SCSS
+
+
diff --git a/mc-escher-cube-23150-with-css-only/dist/index.html b/mc-escher-cube-23150-with-css-only/dist/index.html
new file mode 100644
index 0000000..08593a7
--- /dev/null
+++ b/mc-escher-cube-23150-with-css-only/dist/index.html
@@ -0,0 +1,1995 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - MC Escher Cube 23150 with CSS only</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="frame">
+    <div class="row">
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+      <div class="cube-holder">
+        <div class="inverse-cube">
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+          <div class="side"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div><a id="youtube" href="https://youtu.be/cNqgatGqvC8" target="_blank"><span>See how it was made</span></a>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/mc-escher-cube-23150-with-css-only/dist/script.js b/mc-escher-cube-23150-with-css-only/dist/script.js
new file mode 100644
index 0000000..ab4fb8e
--- /dev/null
+++ b/mc-escher-cube-23150-with-css-only/dist/script.js
@@ -0,0 +1,9 @@
+/*
+
+If you want to know how this pen was made, check out this video, that explains 3D transformations in CSS, creating patterns with selectors, using Pug instead of HTML and using mixins in SCSS: 
+
+https://www.youtube.com/watch?v=cNqgatGqvC8
+
+Follow me on twitter for more: https://twitter.com/HunorBorbely
+
+*/
\ No newline at end of file
diff --git a/mc-escher-cube-23150-with-css-only/dist/style.css b/mc-escher-cube-23150-with-css-only/dist/style.css
new file mode 100644
index 0000000..45c2a67
--- /dev/null
+++ b/mc-escher-cube-23150-with-css-only/dist/style.css
@@ -0,0 +1,713 @@
+@charset "UTF-8";
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  background-color: #141518;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  overflow: hidden;
+  animation-duration: 3s;
+  animation-name: zoom-out;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes zoom-out {
+  from {
+    transform: scale(2);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+.frame {
+  border: 120px solid #141518;
+  width: 1176px;
+  height: 864px;
+}
+
+.row {
+  display: flex;
+  position: relative;
+  left: -42px;
+  top: -36px;
+  z-index: -1;
+}
+.row:nth-child(2n) {
+  margin-left: 42px;
+}
+
+.cube-holder {
+  width: 84px;
+  height: 72px;
+}
+
+.inverse-cube {
+  width: inherit;
+  height: inherit;
+  transform-origin: center center;
+  transform-style: preserve-3d;
+  transform: rotateX(-35deg) rotateY(-45deg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.inverse-cube .side {
+  position: absolute;
+}
+
+/*
+
+  ╱│╲
+ ╱ │ ╲
+│ ╱ ╲ │
+│╱   ╲│
+ ╲   ╱
+  ╲ ╱
+
+*/
+/*
+
+  ╱│╲
+  ╲│╱
+
+*/
+/*
+
+  ▘
+
+*/
+/*
+
+   ╱│╲
+ ╱  │  ╲
+│  ╱ ╲  │
+│╱     ╲│
+ ╲     ╱
+   ╲ ╱
+
+*/
+/*
+
+   ╱│╲
+ ╱ ╱ ╲ ╲
+│ │╲ ╱│ │
+│╱ ╲│╱ ╲│
+ ╲     ╱
+   ╲ ╱
+
+*/
+/*
+
+   ╱│╲
+ ╱  │  ╲
+│  ╱ ╱╲ │
+│╱ ╱   ╱│
+ ╲│╲ ╱ ╱
+   ╲│╱
+
+*/
+/*
+
+   ╱│╲
+ ╱  │  ╲
+│╱ ╲ ╲  │
+│╲ ╱│  ╲│
+ ╲│╱   ╱
+   ╲ ╱
+
+*/
+/*
+
+   ╱│╲ ╱│╲
+ ╱  │ │ │  ╲
+│  ╱ ╲│╱ ╲  │╲
+│╱         ╲│  ╲
+ ╲             ╱
+   ╲         ╱
+     ╲     ╱
+       ╲ ╱
+*/
+/*
+
+   ╱│╲
+  │╱ ╲ ╲
+   ╲ ╱│ │
+    │╱ ╲│
+
+
+
+*/
+.row:nth-child(4n-3) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: #9c3131;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(1)::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 30px;
+  height: 30px;
+  background: linear-gradient(45deg, #000103 0%, #000103 50%, #d5bb97 50%, #d5bb97 100%);
+}
+
+.row:nth-child(4n-3) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateX(30px) translateY(-30px) translateZ(-30px);
+  background: #9c3131;
+  width: 120px;
+  height: 120px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(2) {
+  transform: translateX(-15px) translateZ(-30px);
+  background: #d5bb97;
+  width: 30px;
+  height: 60px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) translateX(45px);
+  background: #000103;
+  width: 30px;
+  height: 60px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(4) {
+  transform: translateX(30px) translateZ(-60px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(5) {
+  transform: rotateY(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+
+.row:nth-child(4n-3) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateX(30px) translateY(-30px) translateZ(-30px);
+  background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
+  width: 120px;
+  height: 120px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(2) {
+  transform: translateX(-15px) translateZ(-30px);
+  background: #d5bb97;
+  width: 30px;
+  height: 60px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) translateX(45px);
+  background: #000103;
+  width: 30px;
+  height: 60px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(4) {
+  transform: translateX(30px) translateZ(-60px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(5) {
+  transform: rotateY(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(4)::after {
+  content: "";
+  position: absolute;
+  left: 7.5px;
+  top: 15px;
+  width: 12px;
+  height: 24px;
+  background: linear-gradient(-45deg, #867a63 0%, #867a63 33%, #000103 33%, #000103 100%);
+}
+
+.row:nth-child(4n-3) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(1) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(2) {
+  transform: rotateY(90deg) translateX(15px) translateY(-15px) translateZ(-30px);
+  background: #000103;
+  width: 30px;
+  height: 30px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(3) {
+  transform: rotateX(90deg) translateX(-15px) translateY(-15px);
+  background: #9c3131;
+  width: 30px;
+  height: 30px;
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(4) {
+  transform: rotateY(90deg) translateX(15px) translateY(15px);
+  background: #000103;
+  width: 30px;
+  height: 30px;
+}
+
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(1),
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(2),
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(3),
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(1),
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: #9c3131;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(2),
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(3),
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(1)::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 30px;
+  height: 30px;
+  background: linear-gradient(45deg, #000103 0%, #000103 50%, #d5bb97 50%, #d5bb97 100%);
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(4) {
+  transform: rotateX(90deg) translateX(-15px) translateY(-15px);
+  background: #9c3131;
+  width: 30px;
+  height: 30px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(5) {
+  transform: translateX(-15px) translateY(15px);
+  background: #d5bb97;
+  width: 30px;
+  height: 30px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(6) {
+  transform: rotateY(90deg) translateX(15px) translateY(15px);
+  background: #000103;
+  width: 30px;
+  height: 30px;
+}
+
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(4) {
+  transform: rotateX(90deg) translateX(-15px) translateY(-15px);
+  background: #9c3131;
+  width: 30px;
+  height: 30px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(5) {
+  transform: translateX(-15px) translateY(15px);
+  background: #d5bb97;
+  width: 30px;
+  height: 30px;
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(6) {
+  transform: rotateY(90deg) translateX(15px) translateY(15px);
+  background: #000103;
+  width: 30px;
+  height: 30px;
+}
+
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-1) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: #9c3131;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-1) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-1) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(3) {
+  background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(2)::after {
+  content: "";
+  position: absolute;
+  left: 7.5px;
+  top: 15px;
+  width: 12px;
+  height: 24px;
+  background: linear-gradient(-45deg, #867a63 0%, #867a63 33%, #000103 33%, #000103 100%);
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(4) {
+  transform: rotateX(90deg) translateX(15px);
+  background: #9c3131;
+  width: 30px;
+  height: 60px;
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(5) {
+  transform: translateX(15px) translateY(15px) translateZ(30px);
+  background: #d5bb97;
+  width: 30px;
+  height: 30px;
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(5)::after {
+  content: "";
+  position: absolute;
+  left: 7.5px;
+  top: 15px;
+  width: 12px;
+  height: 24px;
+  background: linear-gradient(-45deg, #867a63 0%, #867a63 33%, #000103 33%, #000103 100%);
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(6) {
+  transform: rotateY(90deg) translateY(15px) translateZ(30px);
+  background: #000103;
+  width: 60px;
+  height: 30px;
+}
+
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: #9c3131;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(4) {
+  transform: rotateX(90deg) translateX(-15px) translateY(15px);
+  background: #9c3131;
+  width: 30px;
+  height: 30px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(5) {
+  transform: translateX(-15px) translateY(15px) translateZ(30px);
+  background: #d5bb97;
+  width: 30px;
+  height: 30px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(6) {
+  transform: rotateY(90deg) translateX(-15px) translateY(15px);
+  background: #000103;
+  width: 30px;
+  height: 30px;
+}
+
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: #9c3131;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(1)::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 30px;
+  height: 30px;
+  background: linear-gradient(45deg, #000103 0%, #000103 50%, #d5bb97 50%, #d5bb97 100%);
+}
+
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: #9c3131;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(1) {
+  transform: rotateX(90deg) translateZ(-30px);
+  background: #9c3131;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(2) {
+  transform: translateZ(-30px);
+  background: #d5bb97;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(3) {
+  transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
+  background: #000103;
+  width: 60px;
+  height: 60px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(4) {
+  transform: rotateX(90deg) translateX(-15px) translateY(15px);
+  background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
+  width: 30px;
+  height: 30px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(5) {
+  transform: translateX(-15px) translateY(15px) translateZ(30px);
+  background: #d5bb97;
+  width: 30px;
+  height: 30px;
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(6) {
+  transform: rotateY(90deg) translateX(-15px) translateY(15px);
+  background: #000103;
+  width: 30px;
+  height: 30px;
+}
+
+#youtube {
+  display: none;
+}
+
+@media (min-height: 425px) {
+  /** Youtube logo by https://codepen.io/alvaromontoro */
+  #youtube {
+    z-index: 2;
+    display: block;
+    width: 100px;
+    height: 70px;
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    background: red;
+    border-radius: 50% / 11%;
+    transform: scale(0.8);
+    transition: transform 0.5s;
+  }
+
+  #youtube:hover,
+  #youtube:focus {
+    transform: scale(0.9);
+  }
+
+  #youtube::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 7.5%;
+    left: -6%;
+    width: 112%;
+    height: 85%;
+    background: red;
+    border-radius: 9% / 50%;
+  }
+
+  #youtube::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 20px;
+    left: 40px;
+    width: 45px;
+    height: 30px;
+    border: 15px solid transparent;
+    box-sizing: border-box;
+    border-left: 30px solid white;
+  }
+
+  #youtube span {
+    font-size: 0;
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+}
\ No newline at end of file
diff --git a/mc-escher-cube-23150-with-css-only/license.txt b/mc-escher-cube-23150-with-css-only/license.txt
new file mode 100644
index 0000000..e64f055
--- /dev/null
+++ b/mc-escher-cube-23150-with-css-only/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Hunor Marton Borbely (https://codepen.io/HunorMarton/pen/BazeOpE)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/mc-escher-cube-23150-with-css-only/src/index.pug b/mc-escher-cube-23150-with-css-only/src/index.pug
new file mode 100644
index 0000000..c865151
--- /dev/null
+++ b/mc-escher-cube-23150-with-css-only/src/index.pug
@@ -0,0 +1,18 @@
+.container
+  .frame
+    - var r = 0;
+    while r++ < 13
+      .row
+        - var c = 0;
+        while c++ < 15
+          .cube-holder
+            .inverse-cube
+              .side
+              .side
+              .side
+              .side
+              .side
+              .side
+
+a#youtube(href="https://youtu.be/cNqgatGqvC8", target="_blank")
+  span See how it was made
diff --git a/mc-escher-cube-23150-with-css-only/src/script.js b/mc-escher-cube-23150-with-css-only/src/script.js
new file mode 100644
index 0000000..cbd3986
--- /dev/null
+++ b/mc-escher-cube-23150-with-css-only/src/script.js
@@ -0,0 +1,9 @@
+/*
+
+If you want to know how this pen was made, check out this video, that explains 3D transformations in CSS, creating patterns with selectors, using Pug instead of HTML and using mixins in SCSS: 
+
+https://www.youtube.com/watch?v=cNqgatGqvC8
+
+Follow me on twitter for more: https://twitter.com/HunorBorbely
+
+*/
diff --git a/mc-escher-cube-23150-with-css-only/src/style.scss b/mc-escher-cube-23150-with-css-only/src/style.scss
new file mode 100644
index 0000000..9832743
--- /dev/null
+++ b/mc-escher-cube-23150-with-css-only/src/style.scss
@@ -0,0 +1,569 @@
+// Colors
+$background-color: #141518;
+$tan: #d5bb97;
+$black: #000103;
+$brick: #9c3131;
+$gray: #867a63;
+$gray-stripes: repeating-linear-gradient(
+  90deg,
+  $gray,
+  $gray 1px,
+  lighten($gray, 15%) 1px,
+  lighten($gray, 15%) 2px
+);
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  background-color: $background-color;
+}
+
+// Align everything center, hide overflow
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  overflow: hidden;
+
+  // This zoom out effect is basically for the preview that frozes te thumbnail halfway
+  animation-duration: 3s;
+  animation-name: zoom-out;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes zoom-out {
+  from {
+    transform: scale(2);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+$size: 30px;
+
+// Dear CodePen, it's a pity that SCSS modules don't work :(
+// @use "sass:math";
+// $column-width: math.floor(math.cos(45deg) * 4 * $size);
+// $row-height: math.floor(($size * 2 + math.sin(45deg) * 4 * $size) / 2);
+$column-width: $size * 56 / 20;
+$row-height: $size * 48 / 20;
+
+.frame {
+  // Add a frame that's smaller than it's content
+  // therfore it's border will mask the content
+  // (content also needs to have a negative z-index in order for this to work)
+  border: $size * 4 solid $background-color;
+  $number-of-columns: 15;
+  $number-of-rows: 13;
+  width: $column-width * ($number-of-columns - 1);
+  height: $row-height * ($number-of-rows - 1);
+}
+
+.row {
+  display: flex; // inline block without the annoying things
+
+  // The whole content is a bit shifted to get a cut by the frame
+  position: relative;
+  left: -$column-width/2;
+  top: -$row-height/2;
+  z-index: -1;
+
+  // Every second row needs to be a bit shifted in order to get the hexagon shape
+  &:nth-child(2n) {
+    margin-left: $column-width / 2;
+  }
+}
+
+// This is only here to make debugging easier
+// You can select this element in Google Chrome element inspector and see how it looks before transforming
+.cube-holder {
+  width: $column-width;
+  height: $row-height;
+}
+
+// An inverse cube with at least 3 sides rotated in 3D
+.inverse-cube {
+  width: inherit;
+  height: inherit;
+  transform-origin: center center;
+  transform-style: preserve-3d;
+  transform: rotateX(-35deg) rotateY(-45deg); // Base rotation
+
+  // The transformation origin for the sides is the center, so make sure they are centered
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .side {
+    // The exact position of each side depends on the pattern
+    // The positions are set at the bottom
+    position: absolute;
+  }
+}
+
+/*
+
+  ╱│╲
+ ╱ │ ╲
+│ ╱ ╲ │
+│╱   ╲│
+ ╲   ╱
+  ╲ ╱
+
+*/
+@mixin base-walls($floor-color, $with-mini-roof) {
+  .side:nth-child(1) {
+    // Bottom
+    transform: rotateX(90deg) translateZ(-$size);
+    background: $floor-color;
+    width: $size * 2;
+    height: $size * 2;
+  }
+  .side:nth-child(2) {
+    // Right
+    transform: translateZ(-$size);
+    background: $tan;
+    width: $size * 2;
+    height: $size * 2;
+  }
+  .side:nth-child(3) {
+    // Left
+    transform: rotateY(90deg) rotateZ(90deg) translateZ(-$size);
+    background: $black;
+    width: $size * 2;
+    height: $size * 2;
+  }
+
+  @if $with-mini-roof {
+    @include mini-roof();
+  }
+}
+
+/*
+
+  ╱│╲
+  ╲│╱
+
+*/
+@mixin mini-roof() {
+  .side:nth-child(1)::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: $size;
+    height: $size;
+    background: linear-gradient(
+      45deg,
+      $black 0%,
+      $black 50%,
+      $tan 50%,
+      $tan 100%
+    );
+  }
+}
+
+/*
+
+  ▘
+
+*/
+@mixin window($left, $top, $width, $heigth) {
+  content: "";
+  position: absolute;
+  left: $size/4;
+  top: $size/2;
+  width: $size/2.5;
+  height: $size/1.25;
+  background: linear-gradient(
+    -45deg,
+    $gray 0%,
+    $gray 33%,
+    $black 33%,
+    $black 100%
+  );
+}
+
+/*
+
+   ╱│╲
+ ╱  │  ╲
+│  ╱ ╲  │
+│╱     ╲│
+ ╲     ╱
+   ╲ ╱
+
+*/
+// The most simple variation
+@mixin variant-a($floor-color, $with-mini-roof) {
+  @include base-walls($floor-color, $with-mini-roof);
+}
+
+/*
+
+   ╱│╲
+ ╱ ╱ ╲ ╲
+│ │╲ ╱│ │
+│╱ ╲│╱ ╲│
+ ╲     ╱
+   ╲ ╱
+
+*/
+// With a small cube inside
+@mixin variant-b($with-mini-roof) {
+  @include base-walls($gray-stripes, $with-mini-roof);
+
+  // Small cube in the middle
+  .side:nth-child(4) {
+    // Top
+    transform: rotateX(90deg) translateX(-$size/2) translateY(-$size/2);
+    background: #9c3131;
+    width: $size;
+    height: $size;
+  }
+  .side:nth-child(5) {
+    // Left
+    transform: translateX(-$size/2) translateY($size/2);
+    background: $tan;
+    width: $size;
+    height: $size;
+  }
+  .side:nth-child(6) {
+    // Right
+    transform: rotateY(90deg) translateX($size/2) translateY($size/2);
+    background: $black;
+    width: $size;
+    height: $size;
+  }
+}
+
+/*
+
+   ╱│╲
+ ╱  │  ╲
+│  ╱ ╱╲ │
+│╱ ╱   ╱│
+ ╲│╲ ╱ ╱
+   ╲│╱
+
+*/
+// With a long cube and windows
+@mixin variant-c() {
+  @include base-walls($gray-stripes, false);
+
+  .side:nth-child(3) {
+    // Set gray stripes to the left side
+    background: $gray-stripes;
+  }
+
+  // Big window
+  .side:nth-child(2)::after {
+    @include window($size/4, $size/2, $size/2.5, $size/1.25);
+  }
+
+  // Long cube
+  .side:nth-child(4) {
+    // Top
+    transform: rotateX(90deg) translateX($size/2);
+    background: #9c3131;
+    width: $size;
+    height: $size * 2;
+  }
+  .side:nth-child(5) {
+    // Left
+    transform: translateX($size/2) translateY($size/2) translateZ($size);
+    background: $tan;
+    width: $size;
+    height: $size;
+  }
+
+  // Small window
+  .side:nth-child(5)::after {
+    @include window($size/3, $size/4, $size/3, $size/1.5);
+  }
+
+  .side:nth-child(6) {
+    // Right
+    transform: rotateY(90deg) translateY($size/2) translateZ($size);
+    background: $black;
+    width: $size * 2;
+    height: $size;
+  }
+}
+
+/*
+
+   ╱│╲
+ ╱  │  ╲
+│╱ ╲ ╲  │
+│╲ ╱│  ╲│
+ ╲│╱   ╱
+   ╲ ╱
+
+*/
+// With a small cube on the side
+@mixin variant-d($floor-color, $small-cube-top) {
+  @include base-walls($floor-color, false);
+
+  // Small cube on the side
+  .side:nth-child(4) {
+    // Top
+    transform: rotateX(90deg) translateX(-$size/2) translateY($size/2);
+    background: $small-cube-top;
+    width: $size;
+    height: $size;
+  }
+  .side:nth-child(5) {
+    // Left
+    transform: translateX(-$size/2) translateY($size/2) translateZ($size);
+    background: $tan;
+    width: $size;
+    height: $size;
+  }
+
+  .side:nth-child(6) {
+    // Right
+    transform: rotateY(90deg) translateX(-$size/2) translateY($size/2);
+    background: $black;
+    width: $size;
+    height: $size;
+  }
+}
+
+/*
+
+   ╱│╲ ╱│╲
+ ╱  │ │ │  ╲
+│  ╱ ╲│╱ ╲  │╲
+│╱         ╲│  ╲
+ ╲             ╱
+   ╲         ╱
+     ╲     ╱
+       ╲ ╱
+*/
+
+// First part of the tricky ones (only works in pair with it's second part)
+// The two parts have a common foundation defined here
+// It is expected that both it's second part and the next row covers part of it
+@mixin variant-e1($floor-color, $window) {
+  .side:nth-child(1) {
+    // Bottom
+    transform: rotateX(90deg) translateX($size) translateY(-$size)
+      translateZ(-$size);
+    background: $floor-color;
+    width: $size * 4;
+    height: $size * 4;
+  }
+
+  .side:nth-child(2) {
+    // Right
+    transform: translateX(-$size/2) translateZ(-$size);
+    background: $tan;
+    width: $size;
+    height: $size * 2;
+  }
+  .side:nth-child(3) {
+    // Right overflow
+    transform: rotateY(90deg) translateX($size * 1.5);
+    background: $black;
+    width: $size;
+    height: $size * 2;
+  }
+  .side:nth-child(4) {
+    // Right overflow 2
+    transform: translateX($size) translateZ(-$size * 2);
+    background: $tan;
+    width: $size * 2;
+    height: $size * 2;
+  }
+  .side:nth-child(5) {
+    // Left
+    transform: rotateY(90deg) translateZ(-$size);
+    background: $black;
+    width: $size * 2;
+    height: $size * 2;
+  }
+
+  @if $window {
+    // Big window
+    .side:nth-child(4)::after {
+      @include window($size/4, $size/2, $size/2.5, $size/1.25);
+    }
+  }
+}
+
+/*
+
+   ╱│╲
+  │╱ ╲ ╲
+   ╲ ╱│ │
+    │╱ ╲│
+
+
+
+*/
+// Second part of the tricky one (only works in pair with it's first part)
+// The two parts have a common foundation defined at the first part
+// The left side of the small box is also overflowing from the first part
+@mixin variant-e2() {
+  .side:nth-child(1) {
+    // Right
+    transform: translateZ(-$size);
+    background: $tan;
+    width: $size * 2;
+    height: $size * 2;
+  }
+  .side:nth-child(2) {
+    // Left
+    transform: rotateY(90deg) translateX($size/2) translateY(-$size/2)
+      translateZ(-$size);
+    background: $black;
+    width: $size;
+    height: $size;
+  }
+
+  // Small cube
+  .side:nth-child(3) {
+    // Top
+    transform: rotateX(90deg) translateX(-$size/2) translateY(-$size/2);
+    background: #9c3131;
+    width: $size;
+    height: $size;
+  }
+  .side:nth-child(4) {
+    // Right
+    transform: rotateY(90deg) translateX($size/2) translateY($size/2);
+    background: $black;
+    width: $size;
+    height: $size;
+  }
+}
+
+// First row
+.row:nth-child(4n-3) .cube-holder:nth-child(3n-2) .inverse-cube {
+  @include variant-a($brick, true);
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(6n-4) .inverse-cube {
+  @include variant-e1($brick, false);
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(6n-1) .inverse-cube {
+  @include variant-e1($gray-stripes, true);
+}
+.row:nth-child(4n-3) .cube-holder:nth-child(3n-0) .inverse-cube {
+  @include variant-e2();
+}
+
+// Second row
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-4) .inverse-cube,
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-0) .inverse-cube {
+  @include variant-a($gray-stripes, false);
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-3) .inverse-cube,
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-1) .inverse-cube {
+  @include variant-a($brick, false);
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube {
+  @include variant-b(true);
+}
+.row:nth-child(4n-2) .cube-holder:nth-child(6n-2) .inverse-cube {
+  @include variant-b(false);
+}
+
+// Third row
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-2) .inverse-cube {
+  @include variant-a($gray-stripes, false);
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-1) .inverse-cube {
+  @include variant-a($brick, false);
+}
+.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube {
+  @include variant-c();
+}
+
+// Forth row
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-5) .inverse-cube {
+  @include variant-a($gray-stripes, false);
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-4) .inverse-cube {
+  @include variant-a($brick, false);
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-3) .inverse-cube {
+  @include variant-d($gray-stripes, $brick);
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-2) .inverse-cube {
+  @include variant-a($brick, true);
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-1) .inverse-cube {
+  @include variant-a($brick, false);
+}
+.row:nth-child(4n-0) .cube-holder:nth-child(6n-0) .inverse-cube {
+  @include variant-d($brick, $gray-stripes);
+}
+
+// From the fifth row the pattern repeats
+
+#youtube {
+  display: none;
+}
+@media (min-height: 425px) {
+  /** Youtube logo by https://codepen.io/alvaromontoro */
+  #youtube {
+    z-index: 2;
+    display: block;
+    width: 100px;
+    height: 70px;
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    background: red;
+    border-radius: 50% / 11%;
+    transform: scale(0.8);
+    transition: transform 0.5s;
+  }
+
+  #youtube:hover,
+  #youtube:focus {
+    transform: scale(0.9);
+  }
+
+  #youtube::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 7.5%;
+    left: -6%;
+    width: 112%;
+    height: 85%;
+    background: red;
+    border-radius: 9% / 50%;
+  }
+
+  #youtube::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 20px;
+    left: 40px;
+    width: 45px;
+    height: 30px;
+    border: 15px solid transparent;
+    box-sizing: border-box;
+    border-left: 30px solid white;
+  }
+
+  #youtube span {
+    font-size: 0;
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+}
diff --git a/meow-meow-keyboard/README.markdown b/meow-meow-keyboard/README.markdown
new file mode 100644
index 0000000..7af6d17
--- /dev/null
+++ b/meow-meow-keyboard/README.markdown
@@ -0,0 +1,5 @@
+# meow meow keyboard
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/laurenvast/pen/jOrWXej](https://codepen.io/laurenvast/pen/jOrWXej).
+
+
diff --git a/meow-meow-keyboard/dist/index.html b/meow-meow-keyboard/dist/index.html
new file mode 100644
index 0000000..1e2848a
--- /dev/null
+++ b/meow-meow-keyboard/dist/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - meow meow keyboard</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="keyandnote">
+    <div id="notes"></div>
+    <div class="keyboard" onmousemove="showCoords(event)" onmouseout="clearCoor()">
+      <!--     <button class="white" data-note="A2">A2</button>
+    <button class="black" data-note="A#2"></button>
+    <button class="white" data-note="B2">B2</button> -->
+      <button class="white" data-key="C3">C3</button>
+      <button class="black" data-key="C#3"></button>
+      <button class="white" data-key="D3">D3</button>
+      <button class="black" data-key="D#3"></button>
+      <button class="white" data-key="E3">E3</button>
+      <button class="white" data-key="F3">F3</button>
+      <button class="black" data-key="F#3"></button>
+      <button class="white" data-key="G3">G3</button>
+      <button class="black" data-key="G#3"></button>
+      <button class="white" data-key="A3">A3</button>
+      <button class="black" data-key="A#3"></button>
+      <button class="white" data-key="B3">B3</button>
+      <button class="white" data-key="C4">C4</button>
+      <button class="black" data-key="C#4"></button>
+      <button class="white" data-key="D4">D4</button>
+      <button class="black" data-key="D#4"></button>
+      <button class="white" data-key="E4">E4</button>
+      <button class="white" data-key="F4">F4</button>
+      <button class="black" data-key="F#4"></button>
+      <button class="white" data-key="G4">G4</button>
+      <button class="black" data-key="G#4"></button>
+      <button class="white" data-key="A4">A4</button>
+      <button class="black" data-key="A#4"></button>
+      <button class="white" data-key="B4">B4</button>
+      <button class="white" data-key="C5">C5</button>
+      <button class="black" data-key="C#5"></button>
+      <button class="white" data-key="D5">D5</button>
+      <button class="black" data-key="D#5"></button>
+      <button class="white" data-key="E5">E5</button>
+      <button class="white" data-key="F5">F5</button>
+      <button class="black" data-key="F#5"></button>
+      <button class="white" data-key="G5">G5</button>
+      <button class="black" data-key="G#5"></button>
+      <button class="white" data-key="A5">A5</button>
+      <button class="black" data-key="A#5"></button>
+      <button class="white" data-key="B5">B5</button>
+      <!--     <button class="white" data-key="C6">C6</button>
+    <button class="black" data-key="C#6"></button>
+    <button class="white" data-key="D6">D6</button> -->
+    </div>
+  </div>
+
+</div>
+<span id="paw" class="up">
+  <svg id="close" width="62" height="155" viewBox="0 0 62 155" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.8211 45.4678C22.133 56.7758 14.8026 120.174 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.6234 125.081 46.8865 68.5106 51.7735 41.8407C55.3527 22.3079 52.5172 17.3044 45.6117 16.0243C44.5493 7.80997 34.8816 7.1699 32.9693 12.1838C28.7198 6.63651 21.3894 12.1838 21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678Z" fill="#FFE66D" />
+    <path d="M21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678C22.133 56.7759 14.8026 120.174 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.6234 125.081 46.8865 68.5106 51.7735 41.8407C55.3527 22.3079 52.5172 17.3044 45.6117 16.0243M21.3894 16.771C21.3894 12.1838 28.7198 6.63651 32.9693 12.1838M21.3894 16.771C21.1061 19.2958 21.1981 25.0494 23.8328 27.8657M32.9693 12.1838C34.8816 7.1699 44.5493 7.80997 45.6117 16.0243M32.9693 12.1838C33.3589 14.2463 33.9043 19.6514 32.9693 24.772M45.6117 16.0243C45.8596 19.2247 45.9729 26.0735 44.443 27.8657" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M16.8211 45.4678C19.2818 50.7061 24.7796 51.0824 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C47.4453 49.1143 50.8479 48.1592 51.7735 41.8407C54.6519 22.1924 52.5172 17.3044 45.6117 16.0243C44.5493 7.80997 34.8816 7.1699 32.9693 12.1838C28.7198 6.63651 21.3894 12.1838 21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678Z" fill="#FFFCEB" />
+    <path d="M21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678C19.2818 50.7061 24.7796 51.0824 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C47.4453 49.1143 50.8479 48.1592 51.7735 41.8407C54.6519 22.1924 52.5172 17.3044 45.6117 16.0243M21.3894 16.771C21.3894 12.1838 28.7198 6.63651 32.9693 12.1838M21.3894 16.771C21.1061 19.2958 21.5081 22.8449 24.1429 25.6612M32.9693 12.1838C34.8816 7.1699 44.5493 7.80997 45.6117 16.0243M32.9693 12.1838C33.3589 14.2463 33.9043 17.7814 32.9693 22.902M45.6117 16.0243C45.8596 19.2247 45.9729 24.8241 44.443 26.6163" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M49.8789 64.5665C49.8606 64.5085 49.8424 64.4516 49.8245 64.3959C48.9048 66.5184 44.9641 71.3363 36.5592 73.6286C27.323 76.1475 33.2602 77.1902 36.1283 77.6938C36.5226 77.7631 36.8589 77.8222 37.0898 77.8735C38.7859 78.2504 46.6733 77.7906 49.8316 76.2714C49.7862 72.2899 49.796 68.3608 49.8789 64.5665ZM50.453 96.6602C47.5495 98.0283 43.3229 99.6052 38.7467 100.248C30.3622 101.426 40.5808 104.425 42.546 104.961C43.9052 105.331 47.5838 105.651 50.8934 105.316C50.738 102.504 50.5886 99.6067 50.453 96.6602ZM51.5744 116.758C46.7425 118.57 38.9895 120.343 28.5281 120.17C15.0343 119.948 32.7536 125.083 36.1266 125.954C39.7218 126.882 46.5969 127.252 52.2118 126.821C52.1108 125.193 51.9993 123.445 51.8813 121.595C51.7827 120.05 51.6797 118.434 51.5744 116.758ZM16.228 111.984C20.6373 113.202 28.8524 113.554 30.7553 113.208C31.0402 113.157 31.4552 113.097 31.9418 113.027L31.9421 113.027L31.9423 113.027C35.4829 112.519 42.8124 111.466 31.4103 108.924C23.9882 107.269 19.386 104.31 16.9517 101.975C16.7414 104.946 16.5291 107.856 16.325 110.654C16.2925 111.101 16.2601 111.544 16.228 111.984ZM17.6828 91.1044C22.4686 91.8881 29.3754 91.5642 32.7388 90.502C35.4711 89.6392 49.8245 84.5513 38.8939 84.7714C28.8401 84.9739 21.8743 82.4636 18.2844 80.3947C18.1146 83.91 17.9085 87.5077 17.6828 91.1044ZM18.6817 69.6218C21.6803 70.5551 26.1354 70.1698 27.5388 69.702C29.1306 69.1714 37.4082 66.2 30.6163 65.0326C25.2758 64.1147 20.523 61.2762 18.7161 59.903C18.7796 62.8804 18.7614 66.1539 18.6817 69.6218Z" fill="#FFD166" />
+  </svg>
+  <svg id="open" width="62" height="155" viewBox="0 0 62 155" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.9781 45.826C20.4378 54.2718 18.0792 86.6067 16.325 110.654C15.5402 121.414 14.8763 130.514 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.7037 134.488 52.342 128.818 51.8813 121.595C50.4551 99.237 48.0798 61.9983 51.7735 41.8407C51.8164 41.6066 51.8584 41.3774 51.8994 41.1531C53.1068 40.1123 54.3167 38.8833 55.3457 37.1966C56.2304 35.7466 61.3421 26.4826 57.7887 18.8935C54.9459 12.8222 48.683 16.3638 45.7959 18.8935C46.7582 14.5037 46.4621 4.6407 40.2436 3.26879C32.2484 1.5049 29.1391 8.84901 28.4729 12.8668C23.809 7.50975 18.2568 3.26879 12.4824 8.84901C8.48022 12.7167 11.372 19.5631 14.9254 23.1344C8.04066 21.1255 5.1535 23.804 3.15469 26.0361C1.15589 28.2682 1.15591 34.7413 8.04066 40.3215C10.1112 41.9998 12.4671 43.3056 14.7364 44.5634C15.4981 44.9856 16.25 45.4024 16.9781 45.826Z" fill="#FFE66D" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M16.9781 45.826C16.25 45.4024 15.4981 44.9856 14.7364 44.5634C12.4671 43.3056 10.1112 41.9998 8.04066 40.3215C1.15591 34.7413 1.15589 28.2682 3.15469 26.0361C5.1535 23.804 8.04066 21.1255 14.9254 23.1344C11.372 19.5631 8.48022 12.7167 12.4824 8.84901C18.2568 3.26879 23.809 7.50975 28.4729 12.8668C29.1391 8.84901 32.2484 1.5049 40.2436 3.26879C46.4621 4.6407 46.7582 14.5037 45.7959 18.8935C48.683 16.3638 54.9459 12.8222 57.7887 18.8935C61.3421 26.4826 56.2304 35.7466 55.3457 37.1966C54.3167 38.8833 53.1068 40.1123 51.8994 41.1531C51.1114 46.5323 48.4022 48.7118 45.7991 50.2151C45.3445 50.4777 44.8894 50.7405 44.443 51.0245C41.4408 52.9347 31.9959 53.3013 28.3878 52.1918C27.7513 51.9962 27.0561 51.8233 26.3291 51.6425C23.3631 50.905 19.1651 48.9115 16.9781 45.826Z" fill="#FFFCEB" />
+    <path d="M28.4729 12.8668C23.809 7.50975 18.2568 3.26879 12.4824 8.84901C8.48022 12.7167 11.372 19.5631 14.9254 23.1344C8.04066 21.1255 5.1535 23.804 3.15469 26.0361C1.15589 28.2682 1.15591 34.7413 8.04066 40.3215C10.1112 41.9998 12.4671 43.3056 14.7364 44.5634C15.4981 44.9856 16.25 45.4024 16.9781 45.826C19.1651 48.9115 23.3631 50.905 26.3291 51.6425C27.0561 51.8233 27.7513 51.9962 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C44.8894 50.7405 45.3445 50.4777 45.7991 50.2151C48.4022 48.7118 51.1114 46.5323 51.8994 41.1531C53.1068 40.1123 54.3167 38.8833 55.3457 37.1966C56.2304 35.7466 61.3421 26.4826 57.7887 18.8935C54.9459 12.8222 48.683 16.3638 45.7959 18.8935C46.7582 14.5037 46.4621 4.6407 40.2436 3.26879C32.2484 1.5049 29.1391 8.84901 28.4729 12.8668ZM28.4729 12.8668C28.6486 13.2445 29 14.5 29 16" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M49.8788 64.5665C49.8606 64.5085 49.8424 64.4516 49.8245 64.3959C48.9048 66.5184 44.9641 71.3363 36.5592 73.6286C27.3229 76.1475 33.2602 77.1902 36.1283 77.6939C36.5226 77.7631 36.8589 77.8222 37.0898 77.8735C38.7859 78.2504 46.6732 77.7906 49.8316 76.2714C49.7862 72.2899 49.796 68.3608 49.8788 64.5665ZM50.453 96.6602C47.5495 98.0283 43.3229 99.6052 38.7467 100.248C30.3622 101.426 40.5808 104.425 42.546 104.961C43.9052 105.331 47.5838 105.651 50.8933 105.316C50.738 102.504 50.5886 99.6067 50.453 96.6602ZM51.5744 116.758C46.7425 118.57 38.9895 120.343 28.5281 120.17C15.0343 119.948 32.7536 125.083 36.1266 125.954C39.7218 126.882 46.5968 127.252 52.2118 126.821C52.1108 125.193 51.9993 123.445 51.8813 121.595C51.7827 120.05 51.6797 118.434 51.5744 116.758ZM16.228 111.984C20.6372 113.202 28.8524 113.554 30.7553 113.208C31.0402 113.157 31.4552 113.097 31.9418 113.027L31.9421 113.027L31.9423 113.027C35.4829 112.519 42.8124 111.466 31.4103 108.924C23.9882 107.269 19.386 104.31 16.9517 101.975C16.7414 104.946 16.5291 107.856 16.325 110.654C16.2925 111.101 16.2601 111.544 16.228 111.984ZM17.6828 91.1044C22.4686 91.8881 29.3754 91.5642 32.7388 90.502C35.4711 89.6392 49.8245 84.5513 38.8939 84.7714C28.8401 84.9739 21.8743 82.4636 18.2844 80.3947C18.1146 83.91 17.9085 87.5077 17.6828 91.1044ZM18.6817 69.6218C21.6803 70.5551 26.1354 70.1698 27.5388 69.702C29.1306 69.1714 37.4082 66.2 30.6163 65.0327C25.2758 64.1147 20.523 61.2762 18.7161 59.903C18.7796 62.8804 18.7613 66.1539 18.6817 69.6218Z" fill="#FFD166" />
+  </svg>
+
+</span>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.62/Tone.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/meow-meow-keyboard/dist/script.js b/meow-meow-keyboard/dist/script.js
new file mode 100644
index 0000000..3595f1b
--- /dev/null
+++ b/meow-meow-keyboard/dist/script.js
@@ -0,0 +1,96 @@
+var paw = document.getElementById("paw");
+var keyboard = document.querySelector(".keyboard");
+
+let sampler = new Tone.Sampler({
+  urls: {
+    // F3: "cow_F3.mp3",
+    // F5: "cat_F5.mp3",
+        F4: "mariopaintmeow.mp3"
+
+  },
+  baseUrl:
+    "https://amplify-education.github.io/hackathon-Auto-Meow-Tone/samples/"
+}).toDestination();
+
+function showCoords(event) {
+  var x = event.clientX;
+  var y = event.clientY;
+  var target = event.target;
+  var coor = "X coords: " + x + ", Y coords: " + y;
+  paw.style.left = x + "px";
+  var botton = window.innerHeight - keyboard.parentElement.offsetTop - keyboard.offsetHeight;
+  
+  if (target.classList.contains("black")) {
+    paw.style.bottom = botton - 20 + "px";
+  } else if (target.classList.contains("white")) {
+    paw.style.bottom = botton - 70 + "px";
+  }
+}
+
+function clearCoor() {
+  paw.style.bottom = -120 + "px";
+}
+
+document.addEventListener("mousedown", function (e) {
+  var target = e.target;
+  if (target.hasAttribute("data-key")) {
+    paw.classList.remove("up");
+    paw.classList.add("down");
+    console.log(target.offsetWidth);
+
+    makeNotes(
+      target.getAttribute("data-key"),
+      target.offsetLeft,
+      target.offsetWidth
+    );
+
+    sampler.triggerAttackRelease(target.getAttribute("data-key"), 1);
+  }
+});
+
+document.addEventListener("mouseup", function (e) {
+  paw.classList.remove("down");
+  paw.classList.add("up");
+});
+
+function makeNotes(key, x, w) {
+  var left;
+  var height;
+  var width;
+  if (w > 35) {
+    left = x;
+    width = w - 6;
+    height = width;
+  } else {
+    left = x - w / 2;
+    width = w;
+    height = width;
+  }
+  var newnote = document.createElement("span");
+  newnote.classList.add("user");
+  newnote.setAttribute(
+    "style",
+    "margin-left:" + left + "px; width:" + width + "px;"
+  );
+  moveNotes(newnote);
+  newnote.innerHTML =
+    "<svg class='pawnote' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.8211 38.4678C10.2818 43.7061 15.7796 44.0824 19.3878 45.1918C22.9959 46.3013 32.4408 45.9347 35.443 44.0245C38.4453 42.1143 41.8479 41.1592 42.7735 34.8407C45.6519 15.1924 43.5172 10.3044 36.6117 9.02428C35.5493 0.809966 25.8816 0.169898 23.9693 5.18382C19.7198 -0.36349 12.3894 5.18382 12.3894 9.77104C1.76553 9.77104 2.40863 26.9457 7.8211 38.4678Z' fill='#FFFCEB' stroke='#FFD166' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' /><g opacity='0.4'><path d='M13 18C11.8 13.6 8.00003 16.5 7.50002 19C6.56469 23.6766 10 24.5 11 24C12 23.5 14.0909 22 13 18Z' fill='#FF6B6B' /><path d='M22 11C21.5 7.50002 18 7.50001 17 9.5C14.5917 14.3166 16.5 16.125 18 16.5C20.5 17.125 22.5331 14.7318 22 11Z' fill='#FF6B6B' /><path d='M31.5 10C30.2397 6.21914 26.8313 8.01837 26.5 11C26 15.5 28 16.5 30 16.5C31.5 16.5 33.1279 14.8836 31.5 10Z' fill='#FF6B6B' /><path d='M39.5 17C38 14.5 35.5 16.5 35 18C33.6667 22 36.5 24 38 24C40 24 41.5092 20.3486 39.5 17Z' fill='#FF6B6B' /><path d='M23.5 21.5C18.9723 21.5 17.3333 25 16.5 27C14.5 26.6667 10.7083 28.5 11 32C11.3333 36 14.5 36.5 17 36.5C19 38 20.5 39 24.5 39C27.7985 39 30.5 37.6667 31.5 36.5C33.5 36.5 37 36.02 37 32C37 28 34 27 32 27C30.5 23 28.0277 21.5 23.5 21.5Z' fill='#FF6B6B' /></g><g opacity='0.5'><path d='M29.9981 10.6811C30.0514 11.6462 29.5357 12.4593 28.8464 12.4973C28.1571 12.5354 27.5551 11.7839 27.5019 10.8188C27.4487 9.85381 27.9643 9.04067 28.6536 9.00265C29.3429 8.96462 29.9449 9.71611 29.9981 10.6811Z' fill='#FFFCEB' /><path d='M19.902 11.0648C19.7098 12.012 19.0055 12.6685 18.3289 12.5312C17.6524 12.3939 17.2597 11.5148 17.452 10.5676C17.6442 9.6204 18.3485 8.96385 19.025 9.10115C19.7016 9.23845 20.0942 10.1176 19.902 11.0648Z' fill='#FFFCEB' /><path d='M23.7186 28.2586C22.1349 29.3138 20.2025 29.1959 19.4025 27.9953C18.6025 26.7946 19.2379 24.9659 20.8216 23.9107C22.4053 22.8554 24.3376 22.9733 25.1376 24.1739C25.9376 25.3746 25.3023 27.2033 23.7186 28.2586Z' fill='#FFFCEB' /><path d='M11.3061 18.6944C11.1588 19.4199 10.6194 19.9228 10.1012 19.8176C9.58302 19.7124 9.28228 19.0391 9.4295 18.3136C9.57673 17.5881 10.1162 17.0852 10.6344 17.1904C11.1526 17.2956 11.4533 17.9689 11.3061 18.6944Z' fill='#FFFCEB' /><path d='M38.1579 18.4126C38.2286 19.1494 37.8592 19.7877 37.3329 19.8383C36.8065 19.8888 36.3225 19.3323 36.2518 18.5955C36.1811 17.8586 36.5505 17.2203 37.0768 17.1698C37.6032 17.1193 38.0872 17.6757 38.1579 18.4126Z' fill='#FFFCEB' /></g></svg>";
+  document.getElementById("notes").appendChild(newnote);
+}
+
+function moveNotes(elem) {
+  var pos = 0;
+  var max = 600;
+  var id = setInterval(frame, 10);
+
+  console.log("max" + keyboard.offsetTop);
+  function frame() {
+    if (pos == max) {
+      clearInterval(id);
+      elem.remove();
+    } else {
+      pos++;
+      elem.style.bottom = pos + "px";
+    }
+  }
+}
\ No newline at end of file
diff --git a/meow-meow-keyboard/dist/style.css b/meow-meow-keyboard/dist/style.css
new file mode 100644
index 0000000..d3708a8
--- /dev/null
+++ b/meow-meow-keyboard/dist/style.css
@@ -0,0 +1,116 @@
+@import url("https://fonts.googleapis.com/css2?family=Pragati+Narrow:wght@400;700&display=swap");
+* {
+  font-family: 'Pragati Narrow', sans-serif !important;
+}
+
+:root {
+  --keyboard-mode: #FF6B6B;
+  background: #4ECDC4;
+  overflow: hidden;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
+
+.keyandnote {
+  margin: 0 auto;
+  position: absolute;
+  bottom: 20%;
+}
+
+.keyboard {
+  font-size: 12px;
+  font-weight: 400;
+  display: inline-table;
+  padding: 24px;
+  border-radius: 20px 20px 40px 40px;
+  background: var(--keyboard-mode);
+  min-width: 884px;
+}
+.keyboard button {
+  outline: none;
+  transition: all 100ms ease-out;
+  margin: 0px;
+  padding: 0px;
+  border: none;
+  color: rgba(26, 83, 92, 0.5);
+  border-radius: 20px 20px 40px 40px;
+  cursor: none;
+}
+.keyboard button.white {
+  background: #F7FFF7;
+  width: 40px;
+  height: 140px;
+  box-shadow: inset #E6F1E6 0 -10px 0 0;
+  padding-top: 80px;
+  margin: 1px;
+}
+.keyboard button.white:active {
+  box-shadow: inset #E6F1E6 0 -2px 0 0;
+  transform: translate(0, 4px);
+  height: calc($keyboard-white-height - 8px);
+}
+.keyboard button.black {
+  background: #1A535C;
+  width: 32px;
+  height: 90px;
+  z-index: 99;
+  position: absolute;
+  transform: translate(-16px, -10px);
+  box-shadow: inset #073B4C 0 -10px 0 0, var(--keyboard-mode) 0 0 0 2px;
+}
+.keyboard button.black:active {
+  transform: translate(-16px, -2px);
+  height: calc($keyboard-black-height - 8px);
+  box-shadow: inset #073B4C 0 -2px 0 0, var(--keyboard-mode) 0 0 0 2px;
+}
+
+#notes {
+  position: absolute;
+  bottom: 160px;
+}
+#notes span {
+  border-radius: 100px;
+  position: absolute;
+  z-index: -1;
+  transform-origin: center bottom;
+}
+#notes span.user {
+  background: var(--note-user);
+  height: 40px;
+}
+#notes span.system {
+  background: var(--note-system);
+}
+#notes span svg {
+  width: 100%;
+}
+
+#paw {
+  transform: scale(1.2);
+  z-index: 999;
+  position: absolute;
+  bottom: -120px;
+  left: 500px;
+  transform: translate(-50%, 0);
+  pointer-events: none;
+  transition: bottom 100ms ease, left 50ms ease, transform 100ms ease-out;
+}
+#paw svg {
+  display: none;
+}
+#paw.up {
+  transform: translate(-50%, 0);
+}
+#paw.up #open {
+  display: block;
+}
+#paw.down {
+  transform: translate(-50%, 8px);
+}
+#paw.down #close {
+  display: block;
+}
\ No newline at end of file
diff --git a/meow-meow-keyboard/license.txt b/meow-meow-keyboard/license.txt
new file mode 100644
index 0000000..ceb9c4c
--- /dev/null
+++ b/meow-meow-keyboard/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Lauren Wang (https://codepen.io/laurenvast/pen/jOrWXej)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/meow-meow-keyboard/src/index.html b/meow-meow-keyboard/src/index.html
new file mode 100644
index 0000000..29844de
--- /dev/null
+++ b/meow-meow-keyboard/src/index.html
@@ -0,0 +1,66 @@
+<div class="container">
+  <div class="keyandnote">
+    <div id="notes"></div>
+    <div class="keyboard" onmousemove="showCoords(event)" onmouseout="clearCoor()">
+      <!--     <button class="white" data-note="A2">A2</button>
+    <button class="black" data-note="A#2"></button>
+    <button class="white" data-note="B2">B2</button> -->
+      <button class="white" data-key="C3">C3</button>
+      <button class="black" data-key="C#3"></button>
+      <button class="white" data-key="D3">D3</button>
+      <button class="black" data-key="D#3"></button>
+      <button class="white" data-key="E3">E3</button>
+      <button class="white" data-key="F3">F3</button>
+      <button class="black" data-key="F#3"></button>
+      <button class="white" data-key="G3">G3</button>
+      <button class="black" data-key="G#3"></button>
+      <button class="white" data-key="A3">A3</button>
+      <button class="black" data-key="A#3"></button>
+      <button class="white" data-key="B3">B3</button>
+      <button class="white" data-key="C4">C4</button>
+      <button class="black" data-key="C#4"></button>
+      <button class="white" data-key="D4">D4</button>
+      <button class="black" data-key="D#4"></button>
+      <button class="white" data-key="E4">E4</button>
+      <button class="white" data-key="F4">F4</button>
+      <button class="black" data-key="F#4"></button>
+      <button class="white" data-key="G4">G4</button>
+      <button class="black" data-key="G#4"></button>
+      <button class="white" data-key="A4">A4</button>
+      <button class="black" data-key="A#4"></button>
+      <button class="white" data-key="B4">B4</button>
+      <button class="white" data-key="C5">C5</button>
+      <button class="black" data-key="C#5"></button>
+      <button class="white" data-key="D5">D5</button>
+      <button class="black" data-key="D#5"></button>
+      <button class="white" data-key="E5">E5</button>
+      <button class="white" data-key="F5">F5</button>
+      <button class="black" data-key="F#5"></button>
+      <button class="white" data-key="G5">G5</button>
+      <button class="black" data-key="G#5"></button>
+      <button class="white" data-key="A5">A5</button>
+      <button class="black" data-key="A#5"></button>
+      <button class="white" data-key="B5">B5</button>
+      <!--     <button class="white" data-key="C6">C6</button>
+    <button class="black" data-key="C#6"></button>
+    <button class="white" data-key="D6">D6</button> -->
+    </div>
+  </div>
+
+</div>
+<span id="paw" class="up">
+  <svg id="close" width="62" height="155" viewBox="0 0 62 155" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.8211 45.4678C22.133 56.7758 14.8026 120.174 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.6234 125.081 46.8865 68.5106 51.7735 41.8407C55.3527 22.3079 52.5172 17.3044 45.6117 16.0243C44.5493 7.80997 34.8816 7.1699 32.9693 12.1838C28.7198 6.63651 21.3894 12.1838 21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678Z" fill="#FFE66D" />
+    <path d="M21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678C22.133 56.7759 14.8026 120.174 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.6234 125.081 46.8865 68.5106 51.7735 41.8407C55.3527 22.3079 52.5172 17.3044 45.6117 16.0243M21.3894 16.771C21.3894 12.1838 28.7198 6.63651 32.9693 12.1838M21.3894 16.771C21.1061 19.2958 21.1981 25.0494 23.8328 27.8657M32.9693 12.1838C34.8816 7.1699 44.5493 7.80997 45.6117 16.0243M32.9693 12.1838C33.3589 14.2463 33.9043 19.6514 32.9693 24.772M45.6117 16.0243C45.8596 19.2247 45.9729 26.0735 44.443 27.8657" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M16.8211 45.4678C19.2818 50.7061 24.7796 51.0824 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C47.4453 49.1143 50.8479 48.1592 51.7735 41.8407C54.6519 22.1924 52.5172 17.3044 45.6117 16.0243C44.5493 7.80997 34.8816 7.1699 32.9693 12.1838C28.7198 6.63651 21.3894 12.1838 21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678Z" fill="#FFFCEB" />
+    <path d="M21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678C19.2818 50.7061 24.7796 51.0824 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C47.4453 49.1143 50.8479 48.1592 51.7735 41.8407C54.6519 22.1924 52.5172 17.3044 45.6117 16.0243M21.3894 16.771C21.3894 12.1838 28.7198 6.63651 32.9693 12.1838M21.3894 16.771C21.1061 19.2958 21.5081 22.8449 24.1429 25.6612M32.9693 12.1838C34.8816 7.1699 44.5493 7.80997 45.6117 16.0243M32.9693 12.1838C33.3589 14.2463 33.9043 17.7814 32.9693 22.902M45.6117 16.0243C45.8596 19.2247 45.9729 24.8241 44.443 26.6163" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M49.8789 64.5665C49.8606 64.5085 49.8424 64.4516 49.8245 64.3959C48.9048 66.5184 44.9641 71.3363 36.5592 73.6286C27.323 76.1475 33.2602 77.1902 36.1283 77.6938C36.5226 77.7631 36.8589 77.8222 37.0898 77.8735C38.7859 78.2504 46.6733 77.7906 49.8316 76.2714C49.7862 72.2899 49.796 68.3608 49.8789 64.5665ZM50.453 96.6602C47.5495 98.0283 43.3229 99.6052 38.7467 100.248C30.3622 101.426 40.5808 104.425 42.546 104.961C43.9052 105.331 47.5838 105.651 50.8934 105.316C50.738 102.504 50.5886 99.6067 50.453 96.6602ZM51.5744 116.758C46.7425 118.57 38.9895 120.343 28.5281 120.17C15.0343 119.948 32.7536 125.083 36.1266 125.954C39.7218 126.882 46.5969 127.252 52.2118 126.821C52.1108 125.193 51.9993 123.445 51.8813 121.595C51.7827 120.05 51.6797 118.434 51.5744 116.758ZM16.228 111.984C20.6373 113.202 28.8524 113.554 30.7553 113.208C31.0402 113.157 31.4552 113.097 31.9418 113.027L31.9421 113.027L31.9423 113.027C35.4829 112.519 42.8124 111.466 31.4103 108.924C23.9882 107.269 19.386 104.31 16.9517 101.975C16.7414 104.946 16.5291 107.856 16.325 110.654C16.2925 111.101 16.2601 111.544 16.228 111.984ZM17.6828 91.1044C22.4686 91.8881 29.3754 91.5642 32.7388 90.502C35.4711 89.6392 49.8245 84.5513 38.8939 84.7714C28.8401 84.9739 21.8743 82.4636 18.2844 80.3947C18.1146 83.91 17.9085 87.5077 17.6828 91.1044ZM18.6817 69.6218C21.6803 70.5551 26.1354 70.1698 27.5388 69.702C29.1306 69.1714 37.4082 66.2 30.6163 65.0326C25.2758 64.1147 20.523 61.2762 18.7161 59.903C18.7796 62.8804 18.7614 66.1539 18.6817 69.6218Z" fill="#FFD166" />
+  </svg>
+  <svg id="open" width="62" height="155" viewBox="0 0 62 155" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.9781 45.826C20.4378 54.2718 18.0792 86.6067 16.325 110.654C15.5402 121.414 14.8763 130.514 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.7037 134.488 52.342 128.818 51.8813 121.595C50.4551 99.237 48.0798 61.9983 51.7735 41.8407C51.8164 41.6066 51.8584 41.3774 51.8994 41.1531C53.1068 40.1123 54.3167 38.8833 55.3457 37.1966C56.2304 35.7466 61.3421 26.4826 57.7887 18.8935C54.9459 12.8222 48.683 16.3638 45.7959 18.8935C46.7582 14.5037 46.4621 4.6407 40.2436 3.26879C32.2484 1.5049 29.1391 8.84901 28.4729 12.8668C23.809 7.50975 18.2568 3.26879 12.4824 8.84901C8.48022 12.7167 11.372 19.5631 14.9254 23.1344C8.04066 21.1255 5.1535 23.804 3.15469 26.0361C1.15589 28.2682 1.15591 34.7413 8.04066 40.3215C10.1112 41.9998 12.4671 43.3056 14.7364 44.5634C15.4981 44.9856 16.25 45.4024 16.9781 45.826Z" fill="#FFE66D" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M16.9781 45.826C16.25 45.4024 15.4981 44.9856 14.7364 44.5634C12.4671 43.3056 10.1112 41.9998 8.04066 40.3215C1.15591 34.7413 1.15589 28.2682 3.15469 26.0361C5.1535 23.804 8.04066 21.1255 14.9254 23.1344C11.372 19.5631 8.48022 12.7167 12.4824 8.84901C18.2568 3.26879 23.809 7.50975 28.4729 12.8668C29.1391 8.84901 32.2484 1.5049 40.2436 3.26879C46.4621 4.6407 46.7582 14.5037 45.7959 18.8935C48.683 16.3638 54.9459 12.8222 57.7887 18.8935C61.3421 26.4826 56.2304 35.7466 55.3457 37.1966C54.3167 38.8833 53.1068 40.1123 51.8994 41.1531C51.1114 46.5323 48.4022 48.7118 45.7991 50.2151C45.3445 50.4777 44.8894 50.7405 44.443 51.0245C41.4408 52.9347 31.9959 53.3013 28.3878 52.1918C27.7513 51.9962 27.0561 51.8233 26.3291 51.6425C23.3631 50.905 19.1651 48.9115 16.9781 45.826Z" fill="#FFFCEB" />
+    <path d="M28.4729 12.8668C23.809 7.50975 18.2568 3.26879 12.4824 8.84901C8.48022 12.7167 11.372 19.5631 14.9254 23.1344C8.04066 21.1255 5.1535 23.804 3.15469 26.0361C1.15589 28.2682 1.15591 34.7413 8.04066 40.3215C10.1112 41.9998 12.4671 43.3056 14.7364 44.5634C15.4981 44.9856 16.25 45.4024 16.9781 45.826C19.1651 48.9115 23.3631 50.905 26.3291 51.6425C27.0561 51.8233 27.7513 51.9962 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C44.8894 50.7405 45.3445 50.4777 45.7991 50.2151C48.4022 48.7118 51.1114 46.5323 51.8994 41.1531C53.1068 40.1123 54.3167 38.8833 55.3457 37.1966C56.2304 35.7466 61.3421 26.4826 57.7887 18.8935C54.9459 12.8222 48.683 16.3638 45.7959 18.8935C46.7582 14.5037 46.4621 4.6407 40.2436 3.26879C32.2484 1.5049 29.1391 8.84901 28.4729 12.8668ZM28.4729 12.8668C28.6486 13.2445 29 14.5 29 16" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M49.8788 64.5665C49.8606 64.5085 49.8424 64.4516 49.8245 64.3959C48.9048 66.5184 44.9641 71.3363 36.5592 73.6286C27.3229 76.1475 33.2602 77.1902 36.1283 77.6939C36.5226 77.7631 36.8589 77.8222 37.0898 77.8735C38.7859 78.2504 46.6732 77.7906 49.8316 76.2714C49.7862 72.2899 49.796 68.3608 49.8788 64.5665ZM50.453 96.6602C47.5495 98.0283 43.3229 99.6052 38.7467 100.248C30.3622 101.426 40.5808 104.425 42.546 104.961C43.9052 105.331 47.5838 105.651 50.8933 105.316C50.738 102.504 50.5886 99.6067 50.453 96.6602ZM51.5744 116.758C46.7425 118.57 38.9895 120.343 28.5281 120.17C15.0343 119.948 32.7536 125.083 36.1266 125.954C39.7218 126.882 46.5968 127.252 52.2118 126.821C52.1108 125.193 51.9993 123.445 51.8813 121.595C51.7827 120.05 51.6797 118.434 51.5744 116.758ZM16.228 111.984C20.6372 113.202 28.8524 113.554 30.7553 113.208C31.0402 113.157 31.4552 113.097 31.9418 113.027L31.9421 113.027L31.9423 113.027C35.4829 112.519 42.8124 111.466 31.4103 108.924C23.9882 107.269 19.386 104.31 16.9517 101.975C16.7414 104.946 16.5291 107.856 16.325 110.654C16.2925 111.101 16.2601 111.544 16.228 111.984ZM17.6828 91.1044C22.4686 91.8881 29.3754 91.5642 32.7388 90.502C35.4711 89.6392 49.8245 84.5513 38.8939 84.7714C28.8401 84.9739 21.8743 82.4636 18.2844 80.3947C18.1146 83.91 17.9085 87.5077 17.6828 91.1044ZM18.6817 69.6218C21.6803 70.5551 26.1354 70.1698 27.5388 69.702C29.1306 69.1714 37.4082 66.2 30.6163 65.0327C25.2758 64.1147 20.523 61.2762 18.7161 59.903C18.7796 62.8804 18.7613 66.1539 18.6817 69.6218Z" fill="#FFD166" />
+  </svg>
+
+</span>
\ No newline at end of file
diff --git a/meow-meow-keyboard/src/script.js b/meow-meow-keyboard/src/script.js
new file mode 100644
index 0000000..bedb2ee
--- /dev/null
+++ b/meow-meow-keyboard/src/script.js
@@ -0,0 +1,96 @@
+var paw = document.getElementById("paw");
+var keyboard = document.querySelector(".keyboard");
+
+let sampler = new Tone.Sampler({
+  urls: {
+    // F3: "cow_F3.mp3",
+    // F5: "cat_F5.mp3",
+        F4: "mariopaintmeow.mp3"
+
+  },
+  baseUrl:
+    "https://amplify-education.github.io/hackathon-Auto-Meow-Tone/samples/"
+}).toDestination();
+
+function showCoords(event) {
+  var x = event.clientX;
+  var y = event.clientY;
+  var target = event.target;
+  var coor = "X coords: " + x + ", Y coords: " + y;
+  paw.style.left = x + "px";
+  var botton = window.innerHeight - keyboard.parentElement.offsetTop - keyboard.offsetHeight;
+  
+  if (target.classList.contains("black")) {
+    paw.style.bottom = botton - 20 + "px";
+  } else if (target.classList.contains("white")) {
+    paw.style.bottom = botton - 70 + "px";
+  }
+}
+
+function clearCoor() {
+  paw.style.bottom = -120 + "px";
+}
+
+document.addEventListener("mousedown", function (e) {
+  var target = e.target;
+  if (target.hasAttribute("data-key")) {
+    paw.classList.remove("up");
+    paw.classList.add("down");
+    console.log(target.offsetWidth);
+
+    makeNotes(
+      target.getAttribute("data-key"),
+      target.offsetLeft,
+      target.offsetWidth
+    );
+
+    sampler.triggerAttackRelease(target.getAttribute("data-key"), 1);
+  }
+});
+
+document.addEventListener("mouseup", function (e) {
+  paw.classList.remove("down");
+  paw.classList.add("up");
+});
+
+function makeNotes(key, x, w) {
+  var left;
+  var height;
+  var width;
+  if (w > 35) {
+    left = x;
+    width = w - 6;
+    height = width;
+  } else {
+    left = x - w / 2;
+    width = w;
+    height = width;
+  }
+  var newnote = document.createElement("span");
+  newnote.classList.add("user");
+  newnote.setAttribute(
+    "style",
+    "margin-left:" + left + "px; width:" + width + "px;"
+  );
+  moveNotes(newnote);
+  newnote.innerHTML =
+    "<svg class='pawnote' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.8211 38.4678C10.2818 43.7061 15.7796 44.0824 19.3878 45.1918C22.9959 46.3013 32.4408 45.9347 35.443 44.0245C38.4453 42.1143 41.8479 41.1592 42.7735 34.8407C45.6519 15.1924 43.5172 10.3044 36.6117 9.02428C35.5493 0.809966 25.8816 0.169898 23.9693 5.18382C19.7198 -0.36349 12.3894 5.18382 12.3894 9.77104C1.76553 9.77104 2.40863 26.9457 7.8211 38.4678Z' fill='#FFFCEB' stroke='#FFD166' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' /><g opacity='0.4'><path d='M13 18C11.8 13.6 8.00003 16.5 7.50002 19C6.56469 23.6766 10 24.5 11 24C12 23.5 14.0909 22 13 18Z' fill='#FF6B6B' /><path d='M22 11C21.5 7.50002 18 7.50001 17 9.5C14.5917 14.3166 16.5 16.125 18 16.5C20.5 17.125 22.5331 14.7318 22 11Z' fill='#FF6B6B' /><path d='M31.5 10C30.2397 6.21914 26.8313 8.01837 26.5 11C26 15.5 28 16.5 30 16.5C31.5 16.5 33.1279 14.8836 31.5 10Z' fill='#FF6B6B' /><path d='M39.5 17C38 14.5 35.5 16.5 35 18C33.6667 22 36.5 24 38 24C40 24 41.5092 20.3486 39.5 17Z' fill='#FF6B6B' /><path d='M23.5 21.5C18.9723 21.5 17.3333 25 16.5 27C14.5 26.6667 10.7083 28.5 11 32C11.3333 36 14.5 36.5 17 36.5C19 38 20.5 39 24.5 39C27.7985 39 30.5 37.6667 31.5 36.5C33.5 36.5 37 36.02 37 32C37 28 34 27 32 27C30.5 23 28.0277 21.5 23.5 21.5Z' fill='#FF6B6B' /></g><g opacity='0.5'><path d='M29.9981 10.6811C30.0514 11.6462 29.5357 12.4593 28.8464 12.4973C28.1571 12.5354 27.5551 11.7839 27.5019 10.8188C27.4487 9.85381 27.9643 9.04067 28.6536 9.00265C29.3429 8.96462 29.9449 9.71611 29.9981 10.6811Z' fill='#FFFCEB' /><path d='M19.902 11.0648C19.7098 12.012 19.0055 12.6685 18.3289 12.5312C17.6524 12.3939 17.2597 11.5148 17.452 10.5676C17.6442 9.6204 18.3485 8.96385 19.025 9.10115C19.7016 9.23845 20.0942 10.1176 19.902 11.0648Z' fill='#FFFCEB' /><path d='M23.7186 28.2586C22.1349 29.3138 20.2025 29.1959 19.4025 27.9953C18.6025 26.7946 19.2379 24.9659 20.8216 23.9107C22.4053 22.8554 24.3376 22.9733 25.1376 24.1739C25.9376 25.3746 25.3023 27.2033 23.7186 28.2586Z' fill='#FFFCEB' /><path d='M11.3061 18.6944C11.1588 19.4199 10.6194 19.9228 10.1012 19.8176C9.58302 19.7124 9.28228 19.0391 9.4295 18.3136C9.57673 17.5881 10.1162 17.0852 10.6344 17.1904C11.1526 17.2956 11.4533 17.9689 11.3061 18.6944Z' fill='#FFFCEB' /><path d='M38.1579 18.4126C38.2286 19.1494 37.8592 19.7877 37.3329 19.8383C36.8065 19.8888 36.3225 19.3323 36.2518 18.5955C36.1811 17.8586 36.5505 17.2203 37.0768 17.1698C37.6032 17.1193 38.0872 17.6757 38.1579 18.4126Z' fill='#FFFCEB' /></g></svg>";
+  document.getElementById("notes").appendChild(newnote);
+}
+
+function moveNotes(elem) {
+  var pos = 0;
+  var max = 600;
+  var id = setInterval(frame, 10);
+
+  console.log("max" + keyboard.offsetTop);
+  function frame() {
+    if (pos == max) {
+      clearInterval(id);
+      elem.remove();
+    } else {
+      pos++;
+      elem.style.bottom = pos + "px";
+    }
+  }
+}
diff --git a/meow-meow-keyboard/src/style.scss b/meow-meow-keyboard/src/style.scss
new file mode 100644
index 0000000..7f59a22
--- /dev/null
+++ b/meow-meow-keyboard/src/style.scss
@@ -0,0 +1,158 @@
+@import url('https://fonts.googleapis.com/css2?family=Pragati+Narrow:wght@400;700&display=swap');
+
+
+* {
+  font-family: 'Pragati Narrow', sans-serif !important; 
+}
+
+$keyboard-white: #F7FFF7;
+$keyboard-white-shade: #E6F1E6;
+$keyboard-black: #1A535C;
+$keyboard-black-shade: #073B4C;
+$keyboard-label: rgba($keyboard-black, .5);
+
+$keyboard-white-width: 40px;
+$keyboard-black-width: 32px;
+$keyboard-white-height: 140px;
+$keyboard-black-height: 90px;
+
+$background:#4ECDC4;
+
+:root {
+  --keyboard-mode: #FF6B6B;
+  
+  background: $background;
+  overflow: hidden;
+}
+.container {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
+
+.keyandnote {
+   margin: 0 auto;
+  position: absolute;
+  bottom: 20%;
+}
+
+.keyboard {
+   font-size: 12px;
+  font-weight: 400;
+  display: inline-table;
+  padding: 24px;
+  border-radius: 20px 20px 40px 40px;
+  background: var(--keyboard-mode);
+  min-width: 884px;
+
+
+  button {
+    outline: none;
+    transition: all 100ms ease-out;
+    margin: 0px;
+    padding: 0px;
+    border: none;
+    color: $keyboard-label;
+    border-radius: 20px 20px 40px 40px;
+    cursor: none;
+   
+    &.white {
+      background:$keyboard-white;
+      width: $keyboard-white-width;
+      height: $keyboard-white-height;
+      box-shadow: inset $keyboard-white-shade 0 -10px 0 0;
+      padding-top: 80px;
+      margin: 1px;
+
+      &:hover {
+        // background: yellow;
+      }
+      &:active {
+        // background: pink;
+        box-shadow: inset $keyboard-white-shade 0 -2px 0 0;
+        transform: translate(0, 4px);
+      height: calc($keyboard-white-height - 8px);
+
+      }
+    }
+
+    &.black {
+      background:$keyboard-black;
+      width: $keyboard-black-width;
+      height: $keyboard-black-height;
+      z-index: 99;
+      position: absolute;
+      transform: translate($keyboard-black-width*-.5, -10px);
+      box-shadow: inset $keyboard-black-shade 0 -10px 0 0, var(--keyboard-mode) 0 0 0 2px;
+
+      
+      &:hover {
+        // background: darkblue;
+      }
+      &:active {
+        // background: pink;
+        transform: translate($keyboard-black-width*-.5, -2px);
+      height: calc($keyboard-black-height - 8px);
+
+        box-shadow: inset $keyboard-black-shade 0 -2px 0 0, var(--keyboard-mode) 0 0 0 2px;
+      }
+    }
+    
+    
+  }
+}
+
+#notes{
+    position: absolute;
+    bottom: 160px;
+
+
+  span {
+    border-radius: 100px;
+    position: absolute;
+    z-index: -1;
+    transform-origin: center bottom;
+
+    &.user {
+      background: var(--note-user);
+      height: $keyboard-white-width;
+    }
+    &.system {
+      background: var(--note-system);
+    }
+    
+    svg {
+      width: 100%;
+    }
+  }
+}
+
+#paw {
+  transform: scale(1.2);
+  z-index: 999;
+  position: absolute;
+  bottom: -120px;  
+  left: 500px;
+  transform: translate(-50%, 0);
+  pointer-events: none;
+  transition: bottom 100ms ease, left 50ms ease, transform 100ms ease-out;
+  
+  svg {
+    display: none;
+
+  }
+  
+  &.up {
+    transform: translate(-50%, 0);
+    #open{
+      display: block;
+
+    }
+  }
+  &.down {
+    transform: translate(-50%, 8px);
+    #close {
+        display: block;
+    }
+  }
+}
diff --git a/metal-buttons/README.markdown b/metal-buttons/README.markdown
new file mode 100644
index 0000000..e4e96ce
--- /dev/null
+++ b/metal-buttons/README.markdown
@@ -0,0 +1,5 @@
+# Metal Buttons
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/yuhomyan/pen/jOqvjZq](https://codepen.io/yuhomyan/pen/jOqvjZq).
+
+
diff --git a/metal-buttons/dist/index.html b/metal-buttons/dist/index.html
new file mode 100644
index 0000000..dc50789
--- /dev/null
+++ b/metal-buttons/dist/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Metal Buttons</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<header>
+   <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
+</header>
+
+<h1>Metal Buttons</h1>
+<p>Metal-like designs</p>
+<div class="frame">
+  <button class="custom-btn btn-1">Gold</button>
+  <button class="custom-btn btn-2">Gold</button>
+  <button class="custom-btn btn-3">Gold</button>
+  <button class="custom-btn btn-4">Gold</button>
+  <button class="custom-btn btn-5">Silver</button>
+  <button class="custom-btn btn-6">Silver</button>
+  <button class="custom-btn btn-7">Silver</button>
+  <button class="custom-btn btn-8">Silver</button>
+  <button class="custom-btn btn-9">Rose</button>
+  <button class="custom-btn btn-10">Rose</button>
+  <button class="custom-btn btn-11">Rose<div class="dot"></div></button>
+  <button class="custom-btn btn-12">Rose</button>
+  <button class="custom-btn btn-13">Black</button>
+  <button class="custom-btn btn-14">Black</button>
+  <button class="custom-btn btn-15">Black</button>
+  <button class="custom-btn btn-16">Black</button>
+  <p style="font-family: Andale Mono, monospace;">
+    DEERBUCKS.DESIGNING</p>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/metal-buttons/dist/style.css b/metal-buttons/dist/style.css
new file mode 100644
index 0000000..9c2f276
--- /dev/null
+++ b/metal-buttons/dist/style.css
@@ -0,0 +1,218 @@
+body {
+  background: #e0e5ec;
+}
+h1 {
+  position: relative;
+  text-align: center;
+  color: #353535;
+  font-size: 50px;
+  font-family: "Cormorant Garamond", serif;
+}
+h1:before{
+  position: absolute;
+  content: "";
+  bottom: -10px;
+  width: 35%;
+  height: 2px;
+  background-color: #98d9e1;
+background-image: linear-gradient(315deg, #fea 0%, #a95 74%);
+}
+
+p {
+  font-family: 'Lato', sans-serif;
+  font-weight: 300;
+  text-align: center;
+  font-size: 18px;
+  color: #676767;
+}
+.frame {
+  width: 90%;
+  margin: 40px auto;
+  text-align: center;
+}
+button {
+  margin: 20px;
+}
+.custom-btn {
+  width: 130px;
+  height: 40px;
+  color: #fff;
+  border-radius: 5px;
+  padding: 10px 25px;
+  font-family: 'Lato', sans-serif;
+  font-size: 16px;
+  font-weight: 900;
+  font-style: normal;
+  text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
+    text-decoration: none;
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  box-shadow: inset 0px 1px 0px rgba(255,255,255,1),0px 1px 3px rgba(0,0,0,0.3);
+  outline: none;
+  border: 1px solid #ba6;
+}
+.custom-btn:active{
+  -webkit-transform: translateY(2px);
+  transform: translateY(2px);
+}
+
+/* 1 */
+.btn-1{
+  backface-visibility: hidden;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  background: linear-gradient(180deg,#fea 0%,#dc8 49%,#a95 51%,#dc8 100%);
+  border-radius: 5px;
+}
+
+/* 2 */
+.btn-2{
+  background: linear-gradient(top, #a95, #f2f2f2 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, #a95);
+  background: -webkit-linear-gradient(top, #a95, #fea 25%, #ffffff 38%, #dc8  63%, #fea 87%, #a95);
+}
+
+/* 3 */
+.btn-3{
+  background: -webkit-gradient(linear, left top, left bottom, from(#a95), to(#fea));
+}
+
+/* 4 */
+.btn-4{
+   color: #fff;
+ background-image: -webkit-repeating-linear-gradient(left, rgba(255, 238, 170, 0) 0%, rgba(255, 238, 170, 0) 3%, rgba(255, 238, 170, .1) 3.75%),
+    -webkit-repeating-linear-gradient(left, rgba(170, 153, 85, 0) 0%, rgba(170, 153, 85, 0) 2%, rgba(170, 153, 85, .03) 2.25%),
+    -webkit-repeating-linear-gradient(left, rgba(255, 238, 170, 0) 0%, rgba(255, 238, 170, 0) .6%, rgba(255, 238, 170, .15) 1.2%),
+    
+    linear-gradient(180deg, #a95 0%, 
+    #fea 47%, 
+    #dc8 53%,
+    #fea 100%);
+  
+}
+
+/* 5 */
+.btn-5{
+  backface-visibility: hidden;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  border-color: #7c7c7c;
+  background: linear-gradient(180deg,#e6e6e6 0%,rgba(0, 0, 0, 0.25) 49%, rgba(38, 38, 38, 0.6) 51%,rgba(0, 0, 0, 0.25) 100%);
+  border-radius: 5px;
+}
+
+/* 6 */
+.btn-6{
+  border-color: #7c7c7c;
+  background: linear-gradient(top, rgba(38, 38, 38, 0.8), #e6e6e6 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, rgba(38, 38, 38, 0.8));
+  background: -webkit-linear-gradient(top, rgba(38, 38, 38, 0.5), #e6e6e6 25%, #ffffff 38%, rgba(0, 0, 0, 0.25)  63%, #e6e6e6 87%, rgba(38, 38, 38, 0.4));
+}
+
+/* 7 */
+.btn-7{
+  border-color: #7c7c7c;
+  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(#e6e6e6));
+}
+
+/* 8 */
+.btn-8{
+ border-color: #7c7c7c;
+background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
+    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
+    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
+    
+    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
+    hsl(0,0%,90%) 47%, 
+    hsl(0,0%,78%) 53%,
+    hsl(0,0%,70%)100%);
+}
+
+/* 9 */
+.btn-9{
+  backface-visibility: hidden;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  border-color: #D9A3A9;
+  background: linear-gradient(180deg,#FFE6E9 0%,#DDA6AE 49%, #B76E79 51%,#DDA6AE 100%);
+  border-radius: 5px;
+}
+
+/* 10 */
+.btn-10{
+  border-color: #D9A3A9;
+  background: linear-gradient(top, #DDA6AE, #FFE6E9 25%, #ffffff 38%, #FFE6E9 63%, #f7f7f7 87%, rgba(38, 38, 38, 0.8));
+  background: -webkit-linear-gradient(top,  #DDA6AE, #FFE6E9 25%, #ffefef 38%, #D9A3A9  63%, #FFE6E9 87%, #DDA6AE);
+}
+
+/* 11 */
+.btn-11{
+  border-color: #D9A3A9;
+  background: -webkit-gradient(linear, left top, left bottom, from(#D9A3A9), to(#FFE6E9));
+}
+
+/* 12 */
+.btn-12{
+ border-color: #D9A3A9;
+background-image: -webkit-repeating-linear-gradient(left, rgba(255, 230, 233,0) 0%, rgba(255, 230, 233,0)  3%, rgba(255, 230, 233,.1) 3.75%),
+    -webkit-repeating-linear-gradient(left, rgba(183, 110, 121,0) 0%, rgba(183, 110, 121,0)   2%, rgba(183, 110, 121, .2) 2.25%),
+    -webkit-repeating-linear-gradient(left, rgba(255, 230, 233,0) 0%, rgba(255, 230, 233,0) .6%, rgba(255, 230, 233,.3) 1.1%),
+    
+    linear-gradient(180deg, #D9A3A9  0%, 
+    rgba(255, 230, 233,1) 47%, 
+    #D9A3A9 53%,
+    rgba(255, 230, 233,.7)100%);
+}
+
+
+/* 13 */
+.btn-13{
+  backface-visibility: hidden;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  border-color: #111;
+  color: #555;
+  background: linear-gradient(180deg,#555 0%,#222 49%, #000 51%,#222 100%);
+  border-radius: 5px;
+  box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
+}
+
+/* 14 */
+.btn-14{
+  box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
+  border-color: #111;
+  color: #555;
+  background: -webkit-linear-gradient(top,  #000, #222 15%, #333 28%, #000  63%, #2f2f2f 87%, #000);
+}
+
+/* 15 */
+.btn-15{
+  box-shadow: inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,0.3);
+  border-color: #111;
+  color: #555;
+  text-shadow: -1px -1px 1px rgba(0,0,0,1);
+  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333));
+}
+
+/* 16 */
+.btn-16{
+  box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
+ border-color: #111;
+  color: #555;
+background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
+    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
+    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
+    
+    linear-gradient(180deg, hsl(0,0%,0%)  0%, 
+    hsl(0,0%,10%) 47%, 
+    hsl(0,0%,0%) 53%,
+    hsl(0,0%,10%)100%);
+}
\ No newline at end of file
diff --git a/metal-buttons/license.txt b/metal-buttons/license.txt
new file mode 100644
index 0000000..6627474
--- /dev/null
+++ b/metal-buttons/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Yuhomyan (https://codepen.io/yuhomyan/pen/jOqvjZq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/metal-buttons/src/index.html b/metal-buttons/src/index.html
new file mode 100644
index 0000000..d0330a8
--- /dev/null
+++ b/metal-buttons/src/index.html
@@ -0,0 +1,26 @@
+<header>
+   <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
+</header>
+
+<h1>Metal Buttons</h1>
+<p>Metal-like designs</p>
+<div class="frame">
+  <button class="custom-btn btn-1">Gold</button>
+  <button class="custom-btn btn-2">Gold</button>
+  <button class="custom-btn btn-3">Gold</button>
+  <button class="custom-btn btn-4">Gold</button>
+  <button class="custom-btn btn-5">Silver</button>
+  <button class="custom-btn btn-6">Silver</button>
+  <button class="custom-btn btn-7">Silver</button>
+  <button class="custom-btn btn-8">Silver</button>
+  <button class="custom-btn btn-9">Rose</button>
+  <button class="custom-btn btn-10">Rose</button>
+  <button class="custom-btn btn-11">Rose<div class="dot"></div></button>
+  <button class="custom-btn btn-12">Rose</button>
+  <button class="custom-btn btn-13">Black</button>
+  <button class="custom-btn btn-14">Black</button>
+  <button class="custom-btn btn-15">Black</button>
+  <button class="custom-btn btn-16">Black</button>
+  <p style="font-family: Andale Mono, monospace;">
+    DEERBUCKS.DESIGNING</p>
+</div>
diff --git a/metal-buttons/src/style.css b/metal-buttons/src/style.css
new file mode 100644
index 0000000..54a155c
--- /dev/null
+++ b/metal-buttons/src/style.css
@@ -0,0 +1,218 @@
+body {
+  background: #e0e5ec;
+}
+h1 {
+  position: relative;
+  text-align: center;
+  color: #353535;
+  font-size: 50px;
+  font-family: "Cormorant Garamond", serif;
+}
+h1:before{
+  position: absolute;
+  content: "";
+  bottom: -10px;
+  width: 35%;
+  height: 2px;
+  background-color: #98d9e1;
+background-image: linear-gradient(315deg, #fea 0%, #a95 74%);
+}
+
+p {
+  font-family: 'Lato', sans-serif;
+  font-weight: 300;
+  text-align: center;
+  font-size: 18px;
+  color: #676767;
+}
+.frame {
+  width: 90%;
+  margin: 40px auto;
+  text-align: center;
+}
+button {
+  margin: 20px;
+}
+.custom-btn {
+  width: 130px;
+  height: 40px;
+  color: #fff;
+  border-radius: 5px;
+  padding: 10px 25px;
+  font-family: 'Lato', sans-serif;
+  font-size: 16px;
+  font-weight: 900;
+  font-style: normal;
+  text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
+    text-decoration: none;
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  box-shadow: inset 0px 1px 0px rgba(255,255,255,1),0px 1px 3px rgba(0,0,0,0.3);
+  outline: none;
+  border: 1px solid #ba6;
+}
+.custom-btn:active{
+  -webkit-transform: translateY(2px);
+  transform: translateY(2px);
+}
+
+/* 1 */
+.btn-1{
+  backface-visibility: hidden;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  background: linear-gradient(180deg,#fea 0%,#dc8 49%,#a95 51%,#dc8 100%);
+  border-radius: 5px;
+}
+
+/* 2 */
+.btn-2{
+  background: linear-gradient(top, #a95, #f2f2f2 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, #a95);
+  background: -webkit-linear-gradient(top, #a95, #fea 25%, #ffffff 38%, #dc8  63%, #fea 87%, #a95);
+}
+
+/* 3 */
+.btn-3{
+  background: -webkit-gradient(linear, left top, left bottom, from(#a95), to(#fea));
+}
+
+/* 4 */
+.btn-4{
+   color: #fff;
+ background-image: -webkit-repeating-linear-gradient(left, rgba(255, 238, 170, 0) 0%, rgba(255, 238, 170, 0) 3%, rgba(255, 238, 170, .1) 3.75%),
+    -webkit-repeating-linear-gradient(left, rgba(170, 153, 85, 0) 0%, rgba(170, 153, 85, 0) 2%, rgba(170, 153, 85, .03) 2.25%),
+    -webkit-repeating-linear-gradient(left, rgba(255, 238, 170, 0) 0%, rgba(255, 238, 170, 0) .6%, rgba(255, 238, 170, .15) 1.2%),
+    
+    linear-gradient(180deg, #a95 0%, 
+    #fea 47%, 
+    #dc8 53%,
+    #fea 100%);
+  
+}
+
+/* 5 */
+.btn-5{
+  backface-visibility: hidden;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  border-color: #7c7c7c;
+  background: linear-gradient(180deg,#e6e6e6 0%,rgba(0, 0, 0, 0.25) 49%, rgba(38, 38, 38, 0.6) 51%,rgba(0, 0, 0, 0.25) 100%);
+  border-radius: 5px;
+}
+
+/* 6 */
+.btn-6{
+  border-color: #7c7c7c;
+  background: linear-gradient(top, rgba(38, 38, 38, 0.8), #e6e6e6 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, rgba(38, 38, 38, 0.8));
+  background: -webkit-linear-gradient(top, rgba(38, 38, 38, 0.5), #e6e6e6 25%, #ffffff 38%, rgba(0, 0, 0, 0.25)  63%, #e6e6e6 87%, rgba(38, 38, 38, 0.4));
+}
+
+/* 7 */
+.btn-7{
+  border-color: #7c7c7c;
+  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(#e6e6e6));
+}
+
+/* 8 */
+.btn-8{
+ border-color: #7c7c7c;
+background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
+    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
+    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
+    
+    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
+    hsl(0,0%,90%) 47%, 
+    hsl(0,0%,78%) 53%,
+    hsl(0,0%,70%)100%);
+}
+
+/* 9 */
+.btn-9{
+  backface-visibility: hidden;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  border-color: #D9A3A9;
+  background: linear-gradient(180deg,#FFE6E9 0%,#DDA6AE 49%, #B76E79 51%,#DDA6AE 100%);
+  border-radius: 5px;
+}
+
+/* 10 */
+.btn-10{
+  border-color: #D9A3A9;
+  background: linear-gradient(top, #DDA6AE, #FFE6E9 25%, #ffffff 38%, #FFE6E9 63%, #f7f7f7 87%, rgba(38, 38, 38, 0.8));
+  background: -webkit-linear-gradient(top,  #DDA6AE, #FFE6E9 25%, #ffefef 38%, #D9A3A9  63%, #FFE6E9 87%, #DDA6AE);
+}
+
+/* 11 */
+.btn-11{
+  border-color: #D9A3A9;
+  background: -webkit-gradient(linear, left top, left bottom, from(#D9A3A9), to(#FFE6E9));
+}
+
+/* 12 */
+.btn-12{
+ border-color: #D9A3A9;
+background-image: -webkit-repeating-linear-gradient(left, rgba(255, 230, 233,0) 0%, rgba(255, 230, 233,0)  3%, rgba(255, 230, 233,.1) 3.75%),
+    -webkit-repeating-linear-gradient(left, rgba(183, 110, 121,0) 0%, rgba(183, 110, 121,0)   2%, rgba(183, 110, 121, .2) 2.25%),
+    -webkit-repeating-linear-gradient(left, rgba(255, 230, 233,0) 0%, rgba(255, 230, 233,0) .6%, rgba(255, 230, 233,.3) 1.1%),
+    
+    linear-gradient(180deg, #D9A3A9  0%, 
+    rgba(255, 230, 233,1) 47%, 
+    #D9A3A9 53%,
+    rgba(255, 230, 233,.7)100%);
+}
+
+
+/* 13 */
+.btn-13{
+  backface-visibility: hidden;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  border-color: #111;
+  color: #555;
+  background: linear-gradient(180deg,#555 0%,#222 49%, #000 51%,#222 100%);
+  border-radius: 5px;
+  box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
+}
+
+/* 14 */
+.btn-14{
+  box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
+  border-color: #111;
+  color: #555;
+  background: -webkit-linear-gradient(top,  #000, #222 15%, #333 28%, #000  63%, #2f2f2f 87%, #000);
+}
+
+/* 15 */
+.btn-15{
+  box-shadow: inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,0.3);
+  border-color: #111;
+  color: #555;
+  text-shadow: -1px -1px 1px rgba(0,0,0,1);
+  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333));
+}
+
+/* 16 */
+.btn-16{
+  box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
+ border-color: #111;
+  color: #555;
+background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
+    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
+    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
+    
+    linear-gradient(180deg, hsl(0,0%,0%)  0%, 
+    hsl(0,0%,10%) 47%, 
+    hsl(0,0%,0%) 53%,
+    hsl(0,0%,10%)100%);
+}
diff --git a/minimal-pure-css-textile-patterns/README.markdown b/minimal-pure-css-textile-patterns/README.markdown
new file mode 100644
index 0000000..5c92542
--- /dev/null
+++ b/minimal-pure-css-textile-patterns/README.markdown
@@ -0,0 +1,5 @@
+# Minimal pure CSS textile patterns
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/thebabydino/pen/OJmpzya](https://codepen.io/thebabydino/pen/OJmpzya).
+
+
diff --git a/minimal-pure-css-textile-patterns/dist/index.html b/minimal-pure-css-textile-patterns/dist/index.html
new file mode 100644
index 0000000..cf0122d
--- /dev/null
+++ b/minimal-pure-css-textile-patterns/dist/index.html
@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Minimal pure CSS textile patterns</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Satisfy&family=Ubuntu+Mono&family=Ubuntu:wght@400;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<header>
+  <h3>Minimal, pure CSS textile patterns</h3>
+  <p>Patterns created with CSS gradients. No other images used and they are all <em>tiny</em>! All of them are under 500 bytes minified, some of them well under!</p>
+</header>
+<main class="grid">
+  <article class="item grid" data-size="175">
+    <h4>The red and the black: lumbejack plaid</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c0" type="checkbox"/>
+    <label for="c0">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#e72e33</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#020202</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#020202</span> <span class="token--len">0</span> <span class="token--len">2.83px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#e72e33</span> <span class="token--len">0</span> <span class="token--len">5.66px</span></span></span><span class="token--punc">)</span></span></span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/lumberjack-plaid-pattern-red-black-vector-1361275850" target="_blank">Pattern idea</a><a href="https://www.youtube.com/watch?v=CT4i5Nx1jJM" target="_blank">Name idea</a></footer>
+  </article>
+  <article class="item grid" data-size="180">
+    <h4>Purple and light green tartan</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c1" type="checkbox"/>
+    <label for="c1">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#d2e5b7</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#79598b</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">hsla(278, 21%, 47%, .3)</span> <span class="token--len">0</span> <span class="token--len">1px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#d2e5b7</span> <span class="token--len">0</span> <span class="token--len">2.83px</span></span></span><span class="token--punc">)</span></span> <span class="token--item"><span class="token--col">#d2e5b7</span></span></span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/seamless-fabric-pattern-stripes-diagonal-hatching-452442490" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="175">
+    <h4>Tattersall in blue and off-white</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c2" type="checkbox"/>
+    <label for="c2">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">75%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#f0efea</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#3c517c</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">2em</span> <span class="token--len">2em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#3c517c</span> <span class="token--len">0</span> <span class="token--len">1.41px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#f0efea</span> <span class="token--len">0</span> <span class="token--len">2.83px</span></span></span><span class="token--punc">)</span></span></span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/plaid-pattern-set-tattersall-blue-green-1942725841" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="90">
+    <h4>Minimalist rhombic aqua rhombi</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c3" type="checkbox"/>
+    <label for="c3">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">30deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#afe9dd</span> <span class="token--len">0%</span> <span class="token--ang">120deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#9bc3bb</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">6.928em</span></span></span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/minimalist-vector-geometric-seamless-pattern-collection-1844646445" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="225">
+    <h4>Christmas rhombi</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c4" type="checkbox"/>
+    <label for="c4">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">#fdfdfd</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">56deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-56deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">34deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#b5191d</span> <span class="token--len">0%</span> <span class="token--ang">112deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#e1d9a8</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">2.237em</span> <span class="token--len">0</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-size</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">4.474em</span> <span class="token--len">6.632em</span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/seamless-christmas-wrapping-paper-pattern-1584242947" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="335">
+    <h4>Column argyle</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c5" type="checkbox"/>
+    <label for="c5">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">hsla(0, 0%, 100%, .5)</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">--s</span><span class="token--punc">:</span> <span class="token--val"><span class="token--sep">/</span> <span class="token--len">3.632em</span> <span class="token--len">7.128em</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">63deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-63deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">27deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#93b4c5</span> <span class="token--len">0%</span> <span class="token--ang">126deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">1.816em</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">90deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#b43129</span> <span class="token--ang">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#596c7b</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">1.816em</span><span class="token--sep">/</span> <span class="token--len">7.264em</span></span></span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/argyle-pattern-diamond-shapes-background-378496120" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="315">
+    <h4>Blue, green and tan diagonal argyle</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c6" type="checkbox"/>
+    <label for="c6">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">#fff</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">--s</span><span class="token--punc">:</span> <span class="token--val"><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">6.928em</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">60deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-60deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">30deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#d6cdac</span> <span class="token--len">0%</span> <span class="token--ang">120deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">2em</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#9cb3bb</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#9cb08b</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">2em</span><span class="token--sep">/</span> <span class="token--len">8em</span> <span class="token--len">13.856em</span></span></span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-illustration/blue-green-tan-argyle-5938837" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="170">
+    <h4>Vintage green sunken cubes</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c7" type="checkbox"/>
+    <label for="c7">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#588333</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">2em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#6d983f</span> <span class="token--ang">135deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#c3d87d</span> <span class="token--len">0%</span> <span class="token--ang">225deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#79ab4a</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-size</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">4em</span> <span class="token--len">4em</span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/seamless-christmas-wrapping-paper-pattern-1584242947" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="380">
+    <h4>Tartan plaid</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c8" type="checkbox"/>
+    <label for="c8">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">25%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">0</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">80px</span> <span class="token--len">20px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fff</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">20px</span> <span class="token--len">80px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">60px</span> <span class="token--len">40px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">red</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">80px</span> <span class="token--len">20px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">40px</span> <span class="token--len">60px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fff</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">40px</span> <span class="token--len">60px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">20px</span> <span class="token--len">80px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">red</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">red</span> <span class="token--len">0</span> <span class="token--len">1.41px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0</span> <span class="token--len">2.83px</span></span></span><span class="token--punc">)</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-size</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">100px</span> <span class="token--len">100px</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">normal</span><span class="token--punc">,</span> <span class="token--keyw">normal</span><span class="token--punc">,</span> <span class="token--keyw">color</span><span class="token--punc">,</span> <span class="token--keyw">difference</span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/tartan-seamless-pattern-trendy-illustration-wallpapers-505105147" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="160">
+    <h4>Violet table cloth</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c9" type="checkbox"/>
+    <label for="c9">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#a17bb6</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fff</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#a17bb6</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fff</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">0.5em</span> <span class="token--len">0.5em</span></span></span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/violet-seamless-table-cloth-square-checkered-619757561" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="360">
+    <h4>Varicolored zigzag</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c10" type="checkbox"/>
+    <label for="c10">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">#0a0432</span> <span class="token--len">calc(50% - 4.24px)</span><span class="token--punc">,</span> <span class="token--col">#fff</span> <span class="token--len">0</span> <span class="token--len">calc(50% + 4.24px)</span><span class="token--punc">,</span> <span class="token--col">#0a0432</span> <span class="token--len">0</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">90deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fe0478</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#afec32</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#f35932</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#0affd3</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">384px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#fff</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#0a0432</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">12px</span> <span class="token--len">12px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">96px</span> <span class="token--len">72px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">6px</span><span class="token--sep">/</span> <span class="token--len">96px</span> <span class="token--len">72px</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">darken</span><span class="token--punc">,</span> <span class="token--keyw">darken</span><span class="token--punc">,</span> <span class="token--keyw">lighten</span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/varicolored-point-zigzag-pattern-decoration-background-385372471" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="335">
+    <h4>Blue 3Q argyle</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c11" type="checkbox"/>
+    <label for="c11">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">#c1986b</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">--s</span><span class="token--punc">:</span> <span class="token--val"><span class="token--sep">/</span> <span class="token--len">5.142em</span> <span class="token--len">6.128em</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">50deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-50deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">40deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#2f4d7f</span> <span class="token--len">0%</span> <span class="token--ang">100deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">2.571em</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#26a9e1</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#b87b83</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#d4b57e</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">2.571em</span><span class="token--sep">/</span> <span class="token--len">10.284em</span> <span class="token--len">12.256em</span></span></span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/argyle-blue-seamless-pattern-design-187460177" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="380">
+    <h4>Quarter overlap argyle</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c12" type="checkbox"/>
+    <label for="c12">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">#fff</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">40deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#c71585</span> <span class="token--len">0%</span> <span class="token--ang">100deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#8a2be2</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">7.714em</span> <span class="token--len">9.192em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">40deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#b3b3b3</span> <span class="token--len">0%</span> <span class="token--ang">100deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#4d4d4d</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">3.857em</span><span class="token--sep">/</span> <span class="token--len">7.714em</span> <span class="token--len">9.192em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">50deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">3.857em</span> <span class="token--len">4.596em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-50deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">3.857em</span> <span class="token--len">4.596em</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">color</span><span class="token--punc">,</span> <span class="token--keyw">difference</span><span class="token--punc">,</span> <span class="token--keyw">normal</span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/argyle-layout-design-pink-blue-253840555" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="395">
+    <h4>Autumn argyle</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c13" type="checkbox"/>
+    <label for="c13">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">#fff</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">--p</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">0%</span> <span class="token--ang">126.86deg</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">63.43deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">3em</span> <span class="token--len">6em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-63.43deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">3em</span> <span class="token--len">6em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">26.57deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#1b1c4a</span></span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--p</span><span class="token--punc">)</span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">3em</span> <span class="token--len">12em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">26.57deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#147fa3</span></span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--p</span><span class="token--punc">)</span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">6em</span><span class="token--sep">/</span> <span class="token--len">3em</span> <span class="token--len">12em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#fcb543</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#f3753b</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">6em</span> <span class="token--len">12em</span></span></span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/argyle-pattern-colorful-autumn-blue-orange-1918988069" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="485">
+    <h4>Purple stich</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c14" type="checkbox"/>
+    <label for="c14">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--a</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">#000</span> <span class="token--len">calc(50% - 5.66px)</span><span class="token--punc">,</span> <span class="token--col">#7d4caf</span> <span class="token--len">0</span> <span class="token--len">calc(50% + 5.66px)</span><span class="token--punc">,</span> <span class="token--col">#000</span> <span class="token--len">0</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">--b</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">#9f7cc7</span> <span class="token--len">0%</span> <span class="token--len">25%</span><span class="token--punc">,</span> <span class="token--col">#000</span> <span class="token--len">0%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">8px</span> <span class="token--len">8px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#000</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#cfa7ff</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">28px</span> <span class="token--len">60px</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--a</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--a</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--b</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#601286</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">4px</span> <span class="token--len">4px</span><span class="token--sep">/</span> <span class="token--len">1em</span> <span class="token--len">1em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">45deg</span> <span class="token--keyw">at</span> <span class="token--len">calc(50% + 8px)</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--b</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">225deg</span> <span class="token--keyw">at</span> <span class="token--len">calc(50% - 8px)</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--b</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">lighten</span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/seamless-backgrounds-symmetrical-patterns-pastel-colors-1630371079" target="_blank">Pattern idea</a><a href="https://www.colourlovers.com/palette/697327/Peeling_a_Violet" target="_black">Palette</a></footer>
+  </article>
+  <article class="item grid" data-size="305">
+    <h4>Blue and gold cloth</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c15" type="checkbox"/>
+    <label for="c15">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--b</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">#0c0922</span> <span class="token--len">0%</span> <span class="token--len">25%</span><span class="token--punc">,</span> <span class="token--col">#fff</span> <span class="token--len">0%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#f88f22</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#83a1f3</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#35627f</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#f5d07d</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">3em</span><span class="token--sep">/</span> <span class="token--len">12em</span> <span class="token--len">12em</span></span><span class="token--punc">,</span>  <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--b</span><span class="token--punc">)</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">12px</span> <span class="token--len">4px</span><span class="token--sep">/</span> <span class="token--len">1em</span> <span class="token--len">1em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--b</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">6em</span> <span class="token--len">6em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">225deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--b</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">6em</span> <span class="token--len">6em</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">darken</span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/trendy-seamless-pattern-designs-texture-dots-1242798334" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="370">
+    <h4>Rainbow sweater</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c16" type="checkbox"/>
+    <label for="c16">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">#000</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">--s</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">3.441em</span> <span class="token--len">4.915em</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">55deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-55deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">35deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#f2eed5</span> <span class="token--len">0%</span> <span class="token--ang">110deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">1.7205em</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#e27b38</span> <span class="token--ang">20%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#48a6a8</span> <span class="token--len">0%</span> <span class="token--ang">40%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#e8b838</span> <span class="token--len">0%</span> <span class="token--ang">60%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#de3c37</span> <span class="token--len">0%</span> <span class="token--ang">80%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#8b9d47</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">1.7205em</span> <span class="token--len">-2.4575em</span><span class="token--sep">/</span> <span class="token--len">1%</span> <span class="token--len">24.575em</span></span></span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/rhombus-seamless-pattern-103721588" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="210">
+    <h4>Purple mesh</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c17" type="checkbox"/>
+    <label for="c17">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">purple</span> <span class="token--len">0</span> <span class="token--len">2px</span><span class="token--punc">,</span></span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">0</span> <span class="token--len">4px</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">45deg</span></span><span class="token--punc">,</span><span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#eee</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">1px</span> <span class="token--len">1px</span><span class="token--sep">/</span> <span class="token--len">40px</span> <span class="token--len">40px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">90deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span></span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/background-purple-seamless-pattern-elements-geometric-178498601" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="355">
+    <h4>Menzies tartan: black and yellow</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c18" type="checkbox"/>
+    <label for="c18">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">65%</span><span class="token--punc">,</span> <span class="token--col">#ccad77</span> <span class="token--len">25%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">#000</span> <span class="token--len">0%</span> <span class="token--len">75%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">0%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">50%</span></span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">35%</span></span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">35%</span> <span class="token--len">65%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#cbaa03</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0</span> <span class="token--len">2.83px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#cbaa03</span> <span class="token--len">0</span> <span class="token--len">5.66px</span></span></span><span class="token--punc">)</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-size</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">6em</span> <span class="token--len">6em</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">lighten</span><span class="token--punc">,</span> <span class="token--keyw">darken</span><span class="token--punc">,</span> <span class="token--keyw">difference</span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/menzies-tartan-black-yellow-kilt-skirt-731703037" target="_blank">Pattern idea</a></footer>
+  </article>
+  <article class="item grid" data-size="365">
+    <h4>Tartan blues</h4>
+    <div class="wrap">
+      <div class="view"></div>
+    </div>
+    <input id="c19" type="checkbox"/>
+    <label for="c19">Show code</label>
+    <pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">25%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">0%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">6em</span> <span class="token--len">2em</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fff</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">2em</span> <span class="token--len">2em</span><span class="token--sep">/</span> <span class="token--len">8em</span> <span class="token--len">8em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">2em</span> <span class="token--len">6em</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#7cc5fc</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">4em</span><span class="token--sep">/</span> <span class="token--len">8em</span> <span class="token--len">8em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#1b3160</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#7cc5fc</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#1b3160</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fff</span> <span class="token--len">0</span> <span class="token--len">2.83px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#000</span> <span class="token--len">0</span> <span class="token--len">5.66px</span></span></span><span class="token--punc">)</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">lighten</span><span class="token--punc">,</span> <span class="token--keyw">darken</span><span class="token--punc">,</span> <span class="token--keyw">normal</span></span></span></pre>
+    <footer><a href="https://www.shutterstock.com/image-vector/tartan-seamless-pattern-trendy-illustration-wallpapers-403422859" target="_blank">Pattern idea</a></footer>
+  </article>
+</main>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/minimal-pure-css-textile-patterns/dist/script.js b/minimal-pure-css-textile-patterns/dist/script.js
new file mode 100644
index 0000000..2393f48
--- /dev/null
+++ b/minimal-pure-css-textile-patterns/dist/script.js
@@ -0,0 +1,12 @@
+const ITEMS = [...document.querySelectorAll('.item')].map(c => ({ _el: c })),
+_STYL = document.createElement('style');
+
+ITEMS.forEach((c, i) => {
+  c._view = c._el.querySelector('.view');
+  c._code = c._el.querySelector('.code');
+  c.ctext = c._code.textContent;
+  c._view.id = `v${i}`;
+});
+
+_STYL.textContent = ITEMS.map((c, i) => `#v${i} { ${c.ctext} }`).join('');
+document.body.appendChild(_STYL);
\ No newline at end of file
diff --git a/minimal-pure-css-textile-patterns/dist/style.css b/minimal-pure-css-textile-patterns/dist/style.css
new file mode 100644
index 0000000..a4299ed
--- /dev/null
+++ b/minimal-pure-css-textile-patterns/dist/style.css
@@ -0,0 +1,179 @@
+@charset "UTF-8";
+* {
+  box-sizing: inherit;
+  margin: 0;
+  font: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  overflow-x: hidden;
+  min-width: 240px;
+  background: #22242a;
+  color: #efefef;
+  font: 1em/1.25 ubuntu, trebuchet ms, sans-serif;
+}
+
+body {
+  --space: Min(4vmin, .75rem);
+}
+
+h3 {
+  font: 700 2.375em/2 satisfy, z003, segoe script, comic sans ms, cursive;
+  text-align: center;
+}
+
+p {
+  padding: var(--space);
+}
+
+.grid {
+  display: grid;
+  grid-gap: var(--space);
+  padding: var(--space);
+}
+
+main {
+  grid-template-columns: repeat(auto-fit, minmax(min(100% - 2 * var(--space), 25em), 1fr));
+  place-content: center;
+}
+
+.item {
+  border-radius: 7px;
+  box-shadow: 0 0 1px 1px #484d5a;
+  background: #1b1d22;
+  color: #f9f9f9;
+}
+.item::after {
+  display: grid;
+  grid-area: 2/1;
+  place-self: start end;
+  width: 5em;
+  height: 5em;
+  border-radius: 50%;
+  transform: rotate(30deg);
+  box-shadow: 0 0 2px 1px;
+  background: crimson;
+  place-content: center;
+  text-align: center;
+  content: "only " attr(data-size) " bytes!";
+}
+
+h4 {
+  overflow: hidden;
+  max-width: 100%;
+  font-size: 1.25em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wrap {
+  grid-area: 2/1;
+  background: #fff;
+}
+
+.view {
+  height: min(calc(25em - 4*var(--space)), calc(100vh - 8*var(--space)));
+}
+
+[type=checkbox] {
+  position: absolute;
+  right: 100vw;
+}
+[type=checkbox] + label {
+  --hlg: 0;
+  --sel: 0;
+  grid-area: 3/1;
+  justify-self: start;
+  border: solid 0.25em transparent;
+  padding: var(--space);
+  border-radius: inherit;
+  box-shadow: inherit;
+  background: rgba(50, calc(55 + var(--sel)*40), calc(75 + var(--sel)), max(var(--hlg), var(--sel))) padding-box;
+  color: #25cf5f;
+  cursor: pointer;
+}
+[type=checkbox] + label::before, [type=checkbox] + label::after {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  transform: scale(var(--sel));
+  opacity: var(--sel);
+  background: rgba(50, 55, 65, 0.85);
+  content: "";
+}
+[type=checkbox] + label::after {
+  --o: calc(var(--space) + 1.5em);
+  --g: linear-gradient(#fff 0 0);
+  transform: scale(var(--sel)) translate(calc(50% - var(--o)), calc(var(--o) - 50%)) rotate(45deg);
+  background: var(--g) 50%/4px 2.25em, var(--g) 50%/2.25em 4px red;
+  background-repeat: no-repeat;
+  clip-path: circle(1.5em);
+  filter: blur(2px) contrast(6);
+}
+[type=checkbox]:focus + label, [type=checkbox] + label:hover {
+  --hlg: 1 ;
+}
+[type=checkbox]:checked + label {
+  --sel: 1 ;
+}
+
+footer {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 8em);
+  justify-content: end;
+}
+
+a {
+  color: #1f5eff;
+  text-decoration: none;
+}
+a::before {
+  display: inline-block;
+  margin-right: 0.25em;
+  content: "🔗";
+}
+
+.code {
+  --vis: 0;
+  --not-vis: calc(1 - var(--vis));
+  display: grid;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  padding: var(--space);
+  width: min(60em, 100vw - 2 * var(--space));
+  transform: translate(calc(-50% - var(--not-vis)*100vw), -50%);
+  background: #000;
+  font-family: ubuntu mono, consolas, monaco, monospace;
+  white-space: pre-wrap;
+}
+:checked ~ .code {
+  --vis: 1 ;
+}
+
+.token--item::before {
+  content: "\a   ";
+}
+.token--prop {
+  color: #abe4ff;
+}
+.token--func {
+  color: #f39dd4;
+}
+.token--ang {
+  color: #d9abff;
+}
+.token--col {
+  color: #f8f487;
+}
+.token--len {
+  color: #bcff9b;
+}
+.token--keyw {
+  color: #ffdaab;
+}
\ No newline at end of file
diff --git a/minimal-pure-css-textile-patterns/license.txt b/minimal-pure-css-textile-patterns/license.txt
new file mode 100644
index 0000000..17786fb
--- /dev/null
+++ b/minimal-pure-css-textile-patterns/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Ana Tudor (https://codepen.io/thebabydino/pen/OJmpzya)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/minimal-pure-css-textile-patterns/src/index.pug b/minimal-pure-css-textile-patterns/src/index.pug
new file mode 100644
index 0000000..0a892d3
--- /dev/null
+++ b/minimal-pure-css-textile-patterns/src/index.pug
@@ -0,0 +1,2737 @@
+- let size, w, h, l, deg, rad, lga, cga, o = 1, u;
+
+header
+	h3 Minimal, pure CSS textile patterns
+	p Patterns created with CSS gradients. No other images used and they are all <em>tiny</em>! All of them are under 500 bytes minified, some of them well under!
+
+main.grid
+	article.item.grid(data-size='175')
+		h4 The red and the black: lumbejack plaid
+		.wrap: .view
+		input#c0(type='checkbox')
+		label(for='c0') Show code
+		pre.code
+			- size = 4;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #e72e33
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 75%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #020202
+									|  
+									span.token--len 0%
+							span.token--punc )
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{size}em
+							| 
+							span.token--len #{size}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg: span.token--ang 45deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #020202
+									|  
+									span.token--len 0
+									|  
+									span.token--len #{(2*Math.sqrt(2)).toFixed(2)}px
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #e72e33
+									|  
+									span.token--len 0
+									|  
+									span.token--len #{(4*Math.sqrt(2)).toFixed(2)}px
+							span.token--punc )
+		footer
+			a(href='https://www.shutterstock.com/image-vector/lumberjack-plaid-pattern-red-black-vector-1361275850' target='_blank') Pattern idea
+			a(href='https://www.youtube.com/watch?v=CT4i5Nx1jJM' target='_blank') Name idea
+	
+	article.item.grid(data-size='180')
+		h4 Purple and light green tartan
+		.wrap: .view
+		input#c1(type='checkbox')
+		label(for='c1') Show code
+		pre.code
+			- size = 4;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #d2e5b7
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 75%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #79598b
+									|  
+									span.token--len 0%
+							span.token--punc )
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{size}em
+							| 
+							span.token--len #{size}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg: span.token--ang 45deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col hsla(278, 21%, 47%, .3)
+									|  
+									span.token--len 0
+									|  
+									span.token--len 1px
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #d2e5b7
+									|  
+									span.token--len 0
+									|  
+									span.token--len #{(Math.sqrt(2)*2).toFixed(2)}px
+							span.token--punc )
+						|  
+						span.token--item: span.token--col #d2e5b7
+		footer
+			a(href='https://www.shutterstock.com/image-vector/seamless-fabric-pattern-stripes-diagonal-hatching-452442490' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='175')
+		h4 Tattersall in blue and off-white
+		.wrap: .view
+		input#c2(type='checkbox')
+		label(for='c2') Show code
+		pre.code
+			- size = 2;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw at
+									|  
+									span.token--len 75%
+									|  
+									span.token--len 75%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #f0efea
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 75%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #3c517c
+									|  
+									span.token--len 0%
+							span.token--punc )
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{size}em
+							| 
+							span.token--len #{size}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg: span.token--ang 45deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #3c517c
+									|  
+									span.token--len 0
+									|  
+									span.token--len #{(Math.sqrt(2)*1).toFixed(2)}px
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #f0efea
+									|  
+									span.token--len 0
+									|  
+									span.token--len #{(Math.sqrt(2)*2).toFixed(2)}px
+							span.token--punc )
+		footer
+			a(href='https://www.shutterstock.com/image-vector/plaid-pattern-set-tattersall-blue-green-1942725841' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='90')
+		h4 Minimalist rhombic aqua rhombi
+		.wrap: .view
+		input#c3(type='checkbox')
+		label(for='c3') Show code
+		pre.code
+			- l = 4, deg = 60;
+			- rad = deg*Math.PI/180;
+			- cga = .5*deg;
+			- w = +(2*l*Math.sin(.5*rad)).toFixed(3);
+			- h = +(2*l*Math.cos(.5*rad)).toFixed(3);
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang #{cga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #afe9dd
+									|  
+									span.token--len 0%
+									|  
+									span.token--ang #{180 - deg}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #9bc3bb
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{w}em
+							| 
+							span.token--len #{h}em
+		footer
+			a(href='https://www.shutterstock.com/image-vector/minimalist-vector-geometric-seamless-pattern-collection-1844646445' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='225')
+		h4 Christmas rhombi
+		.wrap: .view
+		input#c4(type='checkbox')
+		label(for='c4') Show code
+		pre.code
+			- l = 4, deg = 68;
+			- rad = deg*Math.PI/180;
+			- cga = .5*deg, lga = 90 - .5*deg;
+			- w = +(2*l*Math.sin(.5*rad)).toFixed(3);
+			- h = +(2*l*Math.cos(.5*rad)).toFixed(3);
+			span.token--decl
+				span.token--prop --l
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--col transparent
+					|  
+					span.token--len 49%
+					span.token--punc ,
+					|  
+					span.token--col #fdfdfd
+					|  
+					span.token--len 50%
+					span.token--punc ,
+					|  
+					span.token--col transparent
+					|  
+					span.token--len 51%
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{-lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang #{cga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #b5191d
+									|  
+									span.token--len 0%
+									|  
+									span.token--ang #{180 - deg}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #e1d9a8
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len #{.5*w}em
+							| 
+							span.token--len 0
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background-size
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--len #{w}em
+					|  
+					span.token--len #{h}em
+		footer
+			a(href='https://www.shutterstock.com/image-vector/seamless-christmas-wrapping-paper-pattern-1584242947' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='335')
+		h4 Column argyle
+		.wrap: .view
+		input#c5(type='checkbox')
+		label(for='c5') Show code
+		pre.code
+			- l = 4, deg = 54;
+			- rad = deg*Math.PI/180;
+			- cga = .5*deg, lga = 90 - .5*deg;
+			- w = +(2*l*Math.sin(.5*rad)).toFixed(3);
+			- h = +(2*l*Math.cos(.5*rad)).toFixed(3);
+			span.token--decl
+				span.token--prop --l
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--col transparent
+					|  
+					span.token--len 49%
+					span.token--punc ,
+					|  
+					span.token--col hsla(0, 0%, 100%, .5)
+					|  
+					span.token--len 50%
+					span.token--punc ,
+					|  
+					span.token--col transparent
+					|  
+					span.token--len 51%
+				span.token--punc ;
+			span.token--decl
+				span.token--prop --s
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--sep /
+					| 
+					span.token--len #{w}em
+					| 
+					span.token--len #{h}em
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							|  
+							span.token--func var
+							span.token--punc (
+							span.token--arg.token--prop --s
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{-lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							|  
+							span.token--func var
+							span.token--punc (
+							span.token--arg.token--prop --s
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang #{cga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #93b4c5
+									|  
+									span.token--len 0%
+									|  
+									span.token--ang #{180 - deg}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len #{.5*w}em
+							| 
+							span.token--func var
+							span.token--punc (
+							span.token--arg.token--prop --s
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang 90deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #b43129
+									|  
+									span.token--ang 50%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #596c7b
+									|  
+									span.token--len 0%
+							span.token--punc )
+							| 
+							span.token--len #{.5*w}em
+							span.token--sep /
+							| 
+							span.token--len #{2*w}em
+		footer
+			a(href='https://www.shutterstock.com/image-vector/argyle-pattern-diamond-shapes-background-378496120' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='315')
+		h4 Blue, green and tan diagonal argyle
+		.wrap: .view
+		input#c6(type='checkbox')
+		label(for='c6') Show code
+		pre.code
+			- l = 4, deg = 60;
+			- rad = deg*Math.PI/180;
+			- cga = .5*deg, lga = 90 - .5*deg;
+			- w = +(2*l*Math.sin(.5*rad)).toFixed(3);
+			- h = +(2*l*Math.cos(.5*rad)).toFixed(3);
+			span.token--decl
+				span.token--prop --l
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--col transparent
+					|  
+					span.token--len 49%
+					span.token--punc ,
+					|  
+					span.token--col #fff
+					|  
+					span.token--len 50%
+					span.token--punc ,
+					|  
+					span.token--col transparent
+					|  
+					span.token--len 51%
+				span.token--punc ;
+			span.token--decl
+				span.token--prop --s
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--sep /
+					| 
+					span.token--len #{w}em
+					| 
+					span.token--len #{h}em
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							|  
+							span.token--func var
+							span.token--punc (
+							span.token--arg.token--prop --s
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{-lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							|  
+							span.token--func var
+							span.token--punc (
+							span.token--arg.token--prop --s
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang #{cga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #d6cdac
+									|  
+									span.token--len 0%
+									|  
+									span.token--ang #{180 - deg}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len #{.5*w}em
+							| 
+							span.token--func var
+							span.token--punc (
+							span.token--arg.token--prop --s
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--col #9cb3bb
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #9cb08b
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len #{.5*w}em
+							span.token--sep /
+							| 
+							span.token--len #{2*w}em
+							| 
+							span.token--len #{2*h}em
+		footer
+			a(href='https://www.shutterstock.com/image-illustration/blue-green-tan-argyle-5938837' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='170')
+		h4 Vintage green sunken cubes
+		.wrap: .view
+		input#c7(type='checkbox')
+		label(for='c7') Show code
+		pre.code
+			- size = 4;
+			- h = +(Math.sqrt(3)*size).toFixed(2);
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang 45deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #588333
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len 0
+							| 
+							span.token--len #{.5*size}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--col #6d983f
+									|  
+									span.token--ang 135deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #c3d87d
+									|  
+									span.token--len 0%
+									|  
+									span.token--ang 225deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #79ab4a
+									|  
+									span.token--len 0%
+							span.token--punc )
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background-size
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--len #{size}em
+					|  
+					span.token--len #{size}em
+		footer
+			a(href='https://www.shutterstock.com/image-vector/seamless-christmas-wrapping-paper-pattern-1584242947' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='380')
+		h4 Tartan plaid
+		.wrap: .view
+		input#c8(type='checkbox')
+		label(for='c8') Show code
+		pre.code
+			- u = 20, size = 5*u;
+			span.token--decl
+				span.token--prop --l
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--len 25%
+					span.token--punc ,
+					|  
+					span.token--col transparent
+					|  
+					span.token--len 0
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw at
+									|  
+									span.token--len #{4*u}px
+									|  
+									span.token--len #{u}px
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #fff
+									|  
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len #{u}px
+							|  
+							span.token--len #{4*u}px
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw at
+									|  
+									span.token--len #{3*u}px
+									|  
+									span.token--len #{2*u}px
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col red
+									|  
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len #{4*u}px
+							|  
+							span.token--len #{u}px
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw at
+									|  
+									span.token--len #{2*u}px
+									|  
+									span.token--len #{3*u}px
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #fff
+									|  
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len #{2*u}px
+							|  
+							span.token--len #{3*u}px
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw at
+									|  
+									span.token--len #{u}px
+									|  
+									span.token--len #{4*u}px
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col red
+									|  
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg: span.token--ang 45deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col red
+									|  
+									span.token--len 0
+									|  
+									span.token--len #{(Math.sqrt(2)*1).toFixed(2)}px
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 0
+									|  
+									span.token--len #{(Math.sqrt(2)*2).toFixed(2)}px
+							span.token--punc )
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background-size
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--len #{size}px
+					|  
+					span.token--len #{size}px
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background-blend-mode
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--keyw normal
+					span.token--punc ,
+					|  
+					span.token--keyw normal
+					span.token--punc ,
+					|  
+					span.token--keyw color
+					span.token--punc ,
+					|  
+					span.token--keyw difference
+		footer
+			a(href='https://www.shutterstock.com/image-vector/tartan-seamless-pattern-trendy-illustration-wallpapers-505105147' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='160')
+		h4 Violet table cloth
+		.wrap: .view
+		input#c9(type='checkbox')
+		label(for='c9') Show code
+		pre.code
+			- u = .5;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #a17bb6
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 75%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #fff
+									|  
+									span.token--len 0%
+							span.token--punc )
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{8*u}em
+							|  
+							span.token--len #{8*u}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--col #a17bb6
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #fff
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{u}em
+							|  
+							span.token--len #{u}em
+		footer
+			a(href='https://www.shutterstock.com/image-vector/violet-seamless-table-cloth-square-checkered-619757561' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='360')
+		h4 Varicolored zigzag
+		.wrap: .view
+		input#c10(type='checkbox')
+		label(for='c10') Show code
+		pre.code
+			- u = 6;
+			- o = +(.5*u*Math.sqrt(2)).toFixed(2);
+			- h = 12*u, w = h + 4*u;
+			- size = 4*w;
+			span.token--decl
+				span.token--prop --l
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--col #0a0432
+					|  
+					span.token--len calc(50% - #{o}px)
+					span.token--punc ,
+					|  
+					span.token--col #fff
+					|  
+					span.token--len 0
+					|  
+					span.token--len calc(50% + #{o}px)
+					span.token--punc ,
+					|  
+					span.token--col #0a0432
+					|  
+					span.token--len 0
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang 90deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #fe0478
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #afec32
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #f35932
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 75%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #0affd3
+									|  
+									span.token--len 0%
+							span.token--punc )
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{size}px
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--col #fff
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #0a0432
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{2*u}px
+							|  
+							span.token--len #{2*u}px
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg: span.token--ang 45deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{w}px
+							|  
+							span.token--len #{h}px
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg: span.token--ang -45deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len #{u}px
+							span.token--sep /
+							| 
+							span.token--len #{w}px
+							|  
+							span.token--len #{h}px
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background-blend-mode
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--keyw darken
+					span.token--punc ,
+					|  
+					span.token--keyw darken
+					span.token--punc ,
+					|  
+					span.token--keyw lighten
+		footer
+			a(href='https://www.shutterstock.com/image-vector/varicolored-point-zigzag-pattern-decoration-background-385372471' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='335')
+		h4 Blue 3Q argyle
+		.wrap: .view
+		input#c11(type='checkbox')
+		label(for='c11') Show code
+		pre.code
+			- l = 4, deg = 80;
+			- rad = deg*Math.PI/180;
+			- cga = .5*deg, lga = 90 - .5*deg;
+			- w = +(2*l*Math.sin(.5*rad)).toFixed(3);
+			- h = +(2*l*Math.cos(.5*rad)).toFixed(3);
+			span.token--decl
+				span.token--prop --l
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--col transparent
+					|  
+					span.token--len 49%
+					span.token--punc ,
+					|  
+					span.token--col #c1986b
+					|  
+					span.token--len 50%
+					span.token--punc ,
+					|  
+					span.token--col transparent
+					|  
+					span.token--len 51%
+				span.token--punc ;
+			span.token--decl
+				span.token--prop --s
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--sep /
+					| 
+					span.token--len #{w}em
+					| 
+					span.token--len #{h}em
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							|  
+							span.token--func var
+							span.token--punc (
+							span.token--arg.token--prop --s
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{-lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							|  
+							span.token--func var
+							span.token--punc (
+							span.token--arg.token--prop --s
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang #{cga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #2f4d7f
+									|  
+									span.token--len 0%
+									|  
+									span.token--ang #{180 - deg}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len #{.5*w}em
+							| 
+							span.token--func var
+							span.token--punc (
+							span.token--arg.token--prop --s
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--col #26a9e1
+									|  
+									span.token--len 50%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #b87b83
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 75%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #d4b57e
+									|  
+									span.token--len 0%
+							span.token--punc )
+							| 
+							span.token--len #{.5*w}em
+							span.token--sep /
+							| 
+							span.token--len #{2*w}em
+							| 
+							span.token--len #{2*h}em
+		footer
+			a(href='https://www.shutterstock.com/image-vector/argyle-blue-seamless-pattern-design-187460177' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='380')
+		h4 Quarter overlap argyle
+		.wrap: .view
+		input#c12(type='checkbox')
+		label(for='c12') Show code
+		pre.code
+			- l = 3, deg = 80;
+			- rad = deg*Math.PI/180;
+			- cga = .5*deg, lga = 90 - .5*deg;
+			- w = +(2*l*Math.sin(.5*rad)).toFixed(3);
+			- h = +(2*l*Math.cos(.5*rad)).toFixed(3);
+			span.token--decl
+				span.token--prop --l
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--col transparent
+					|  
+					span.token--len 49%
+					span.token--punc ,
+					|  
+					span.token--col #fff
+					|  
+					span.token--len 50%
+					span.token--punc ,
+					|  
+					span.token--col transparent
+					|  
+					span.token--len 51%
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang #{cga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #c71585
+									|  
+									span.token--len 0%
+									|  
+									span.token--ang #{180 - deg}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #8a2be2
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{2*w}em
+							| 
+							span.token--len #{2*h}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang #{cga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #b3b3b3
+									|  
+									span.token--len 0%
+									|  
+									span.token--ang #{180 - deg}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #4d4d4d
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len #{w}em
+							span.token--sep /
+							| 
+							span.token--len #{2*w}em
+							| 
+							span.token--len #{2*h}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{w}em
+							| 
+							span.token--len #{h}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{-lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{w}em
+							| 
+							span.token--len #{h}em
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background-blend-mode
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--keyw color
+					span.token--punc ,
+					|  
+					span.token--keyw difference
+					span.token--punc ,
+					|  
+					span.token--keyw normal
+		footer
+			a(href='https://www.shutterstock.com/image-vector/argyle-layout-design-pink-blue-253840555' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='395')
+		h4 Autumn argyle
+		.wrap: .view
+		input#c13(type='checkbox')
+		label(for='c13') Show code
+		pre.code
+			- w = 3, h = 2*w;
+			- cga = +(Math.atan(w/h)*180/Math.PI).toFixed(2);
+			- deg = 2*cga, lga = 90 - cga;
+			span.token--decl
+				span.token--prop --l
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--col transparent
+					|  
+					span.token--len 49%
+					span.token--punc ,
+					|  
+					span.token--col #fff
+					|  
+					span.token--len 50%
+					span.token--punc ,
+					|  
+					span.token--col transparent
+					|  
+					span.token--len 51%
+				span.token--punc ;
+			span.token--decl
+				span.token--prop --p
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--len 0%
+					|  
+					span.token--ang #{180 - deg}deg
+					span.token--punc ,
+					|  
+					span.token--col transparent
+					|  
+					span.token--len 0%
+					|  
+					span.token--len 50%
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{w}em
+							| 
+							span.token--len #{h}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{-lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{w}em
+							| 
+							span.token--len #{h}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang #{cga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #1b1c4a
+								|  
+								span.token--func var
+								span.token--punc (
+								span.token--arg.token--prop --p
+								span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{w}em
+							| 
+							span.token--len #{2*h}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang #{cga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #147fa3
+								|  
+								span.token--func var
+								span.token--punc (
+								span.token--arg.token--prop --p
+								span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							| 
+							span.token--len #{h}em
+							span.token--sep /
+							| 
+							span.token--len #{w}em
+							| 
+							span.token--len #{2*h}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--col #fcb543
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #f3753b
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len 0
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{2*w}em
+							| 
+							span.token--len #{2*h}em
+		footer
+			a(href='https://www.shutterstock.com/image-vector/argyle-pattern-colorful-autumn-blue-orange-1918988069' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='485')
+		h4 Purple stich
+		.wrap: .view
+		input#c14(type='checkbox')
+		label(for='c14') Show code
+		pre.code
+			- l = 8, fs = 16;
+			- d = +(.5*l*Math.sqrt(2)).toFixed(2);
+			- size = 8*l;
+			span.token--decl
+				span.token--prop --a
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--col #000
+					|  
+					span.token--len calc(50% - #{d}px)
+					span.token--punc ,
+					|  
+					span.token--col #7d4caf
+					|  
+					span.token--len 0
+					|  
+					span.token--len calc(50% + #{d}px)
+					span.token--punc ,
+					|  
+					span.token--col #000
+					|  
+					span.token--len 0
+				span.token--punc ;
+			span.token--decl
+				span.token--prop --b
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--col #9f7cc7
+					|  
+					span.token--len 0%
+					|  
+					span.token--len 25%
+					span.token--punc ,
+					|  
+					span.token--col #000
+					|  
+					span.token--len 0%
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw at
+									|  
+									span.token--len #{l}px
+									|  
+									span.token--len #{l}px
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #000
+									|  
+									span.token--len 75%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #cfa7ff
+									|  
+									span.token--len 0%
+							span.token--punc )
+							| 
+							span.token--len #{.5*size - .5*l}px
+							| 
+							span.token--len #{size - .5*l}px
+							span.token--sep /
+							| 
+							span.token--len #{size/fs}em
+							| 
+							span.token--len #{size/fs}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang 45deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --a
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{size/fs}em
+							| 
+							span.token--len #{size/fs}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang -45deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --a
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{size/fs}em
+							| 
+							span.token--len #{size/fs}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --b
+									span.token--punc )
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #601286
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len #{.5*l}px
+							| 
+							span.token--len #{.5*l}px
+							span.token--sep /
+							| 
+							span.token--len #{2*l/fs}em
+							| 
+							span.token--len #{2*l/fs}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang 45deg
+									|  
+									span.token--keyw at
+									|  
+									span.token--len calc(50% + #{l}px)
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --b
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{size/fs}em
+							| 
+							span.token--len #{size/fs}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang 225deg
+									|  
+									span.token--keyw at
+									|  
+									span.token--len calc(50% - #{l}px)
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --b
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{size/fs}em
+							| 
+							span.token--len #{size/fs}em
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background-blend-mode
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--keyw lighten
+		footer
+			a(href='https://www.shutterstock.com/image-vector/seamless-backgrounds-symmetrical-patterns-pastel-colors-1630371079' target='_blank') Pattern idea
+			a(href='https://www.colourlovers.com/palette/697327/Peeling_a_Violet' target='_black') Palette
+	
+	article.item.grid(data-size='305')
+		h4 Blue and gold cloth
+		.wrap: .view
+		input#c15(type='checkbox')
+		label(for='c15') Show code
+		pre.code
+			- l = 8, fs = 16;
+			- d = +(.5*l*Math.sqrt(2)).toFixed(2);
+			- size = 12*l;
+			span.token--decl
+				span.token--prop --b
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--col #0c0922
+					|  
+					span.token--len 0%
+					|  
+					span.token--len 25%
+					span.token--punc ,
+					|  
+					span.token--col #fff
+					|  
+					span.token--len 0%
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--col #f88f22
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #83a1f3
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #35627f
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 75%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #f5d07d
+									|  
+									span.token--len 0%
+							span.token--punc )
+							| 
+							span.token--len 0
+							| 
+							span.token--len #{.5*size/fs}em
+							span.token--sep /
+							| 
+							span.token--len #{2*size/fs}em
+							| 
+							span.token--len #{2*size/fs}em
+						span.token--punc ,
+						|   
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --b
+									span.token--punc )
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len #{1.5*l}px
+							| 
+							span.token--len #{.5*l}px
+							span.token--sep /
+							| 
+							span.token--len #{2*l/fs}em
+							| 
+							span.token--len #{2*l/fs}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang 45deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --b
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{size/fs}em
+							| 
+							span.token--len #{size/fs}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang 225deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --b
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							| 
+							span.token--len 0
+							span.token--sep /
+							| 
+							span.token--len #{size/fs}em
+							| 
+							span.token--len #{size/fs}em
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background-blend-mode
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--keyw darken
+		footer
+			a(href='https://www.shutterstock.com/image-vector/trendy-seamless-pattern-designs-texture-dots-1242798334' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='370')
+		h4 Rainbow sweater
+		.wrap: .view
+		input#c16(type='checkbox')
+		label(for='c16') Show code
+		pre.code
+			- l = 3, deg = 70;
+			- rad = deg*Math.PI/180;
+			- cga = .5*deg, lga = 90 - .5*deg;
+			- w = +(2*l*Math.sin(.5*rad)).toFixed(3);
+			- h = +(2*l*Math.cos(.5*rad)).toFixed(3);
+			span.token--decl
+				span.token--prop --l
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--col transparent
+					|  
+					span.token--len 49%
+					span.token--punc ,
+					|  
+					span.token--col #000
+					|  
+					span.token--len 50%
+					span.token--punc ,
+					|  
+					span.token--col transparent
+					|  
+					span.token--len 51%
+				span.token--punc ;
+			span.token--decl
+				span.token--prop --s
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--len 0
+					span.token--sep /
+					| 
+					span.token--len #{w}em
+					| 
+					span.token--len #{h}em
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							|  
+							span.token--func var
+							span.token--punc (
+							span.token--arg.token--prop --s
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--ang #{-lga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							| 
+							span.token--len 0
+							|  
+							span.token--func var
+							span.token--punc (
+							span.token--arg.token--prop --s
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang #{cga}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #f2eed5
+									|  
+									span.token--len 0%
+									|  
+									span.token--ang #{180 - deg}deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len #{.5*w}em
+							| 
+							span.token--func var
+							span.token--punc (
+							span.token--arg.token--prop --s
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--col #e27b38
+									|  
+									span.token--ang 20%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #48a6a8
+									|  
+									span.token--len 0%
+									|  
+									span.token--ang 40%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #e8b838
+									|  
+									span.token--len 0%
+									|  
+									span.token--ang 60%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #de3c37
+									|  
+									span.token--len 0%
+									|  
+									span.token--ang 80%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #8b9d47
+									|  
+									span.token--len 0%
+							span.token--punc )
+							| 
+							span.token--len #{.5*w}em
+							|  
+							span.token--len #{-.5*h}em
+							span.token--sep /
+							| 
+							span.token--len 1%
+							| 
+							span.token--len #{5*h}em
+		footer
+			a(href='https://www.shutterstock.com/image-vector/rhombus-seamless-pattern-103721588' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='210')
+		h4 Purple mesh
+		.wrap: .view
+		input#c17(type='checkbox')
+		label(for='c17') Show code
+		pre.code
+			- o = 2, size = 20*o;
+			span.token--decl
+				span.token--prop --l
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--col purple
+					|  
+					span.token--len 0
+					|  
+					span.token--len #{o}px
+					span.token--punc ,
+				|  
+				span.token--val
+					span.token--col transparent
+					|  
+					span.token--len 0
+					|  
+					span.token--len #{2*o}px
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw from
+									|  
+									span.token--ang 45deg
+								span.token--punc ,
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #eee
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							| 
+							span.token--len #{.5*o}px
+							| 
+							span.token--len #{.5*o}px
+							span.token--sep /
+							| 
+							span.token--len #{size}px
+							| 
+							span.token--len #{size}px
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg: span.token--ang 90deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+		footer
+			a(href='https://www.shutterstock.com/image-vector/background-purple-seamless-pattern-elements-geometric-178498601' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='355')
+		h4 Menzies tartan: black and yellow
+		.wrap: .view
+		input#c18(type='checkbox')
+		label(for='c18') Show code
+		pre.code
+			- size = 6;
+			span.token--decl
+				span.token--prop --l
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--len 65%
+					span.token--punc ,
+					|  
+					span.token--col #ccad77
+					|  
+					span.token--len 25%
+					span.token--punc ,
+					|  
+					span.token--col transparent
+					|  
+					span.token--len 0%
+					|  
+					span.token--len 50%
+					span.token--punc ,
+					|  
+					span.token--col #000
+					|  
+					span.token--len 0%
+					|  
+					span.token--len 75%
+					span.token--punc ,
+					|  
+					span.token--col transparent
+					|  
+					span.token--len 0%
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw at
+									|  
+									span.token--len 50%
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw at
+									|  
+									span.token--len 35%
+								|  
+								span.token--arg
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw at
+									|  
+									span.token--len 35%
+									|  
+									span.token--len 65%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #cbaa03
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg: span.token--ang 45deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col transparent
+									|  
+									span.token--len 0
+									|  
+									span.token--len #{+(2*Math.sqrt(2)).toFixed(2)}px
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #cbaa03
+									|  
+									span.token--len 0
+									|  
+									span.token--len #{+(4*Math.sqrt(2)).toFixed(2)}px
+							span.token--punc )
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background-size
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--len #{size}em
+					|  
+					span.token--len #{size}em
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background-blend-mode
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--keyw lighten
+					span.token--punc ,
+					|  
+					span.token--keyw darken
+					span.token--punc ,
+					|  
+					span.token--keyw difference
+		footer
+			a(href='https://www.shutterstock.com/image-vector/menzies-tartan-black-yellow-kilt-skirt-731703037' target='_blank') Pattern idea
+	
+	article.item.grid(data-size='365')
+		h4 Tartan blues
+		.wrap: .view
+		input#c19(type='checkbox')
+		label(for='c19') Show code
+		pre.code
+			- u = 2, size = 4*u;
+			span.token--decl
+				span.token--prop --l
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--len 25%
+					span.token--punc ,
+					|  
+					span.token--col transparent
+					|  
+					span.token--len 0%
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--list
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw at
+									|  
+									span.token--len #{3*u}em
+									|  
+									span.token--len #{u}em
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #fff
+									|  
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							|  
+							span.token--len #{u}em
+							|  
+							span.token--len #{u}em
+							span.token--sep /
+							|  
+							span.token--len #{size}em
+							|  
+							span.token--len #{size}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--keyw at
+									|  
+									span.token--len #{u}em
+									|  
+									span.token--len #{3*u}em
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #7cc5fc
+									|  
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							|  
+							span.token--len 0
+							|  
+							span.token--len #{2*u}em
+							span.token--sep /
+							|  
+							span.token--len #{size}em
+							|  
+							span.token--len #{size}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--col #1b3160
+									|  
+									span.token--func var
+									span.token--punc (
+									span.token--arg.token--prop --l
+									span.token--punc )
+							span.token--punc )
+							|  
+							span.token--len 0
+							|  
+							span.token--len 0
+							span.token--sep /
+							|  
+							span.token--len #{2*u}em
+							|  
+							span.token--len #{2*u}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-conic-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg
+									span.token--col #7cc5fc
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 25%
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #1b3160
+									|  
+									span.token--len 0%
+									|  
+									span.token--len 50%
+							span.token--punc )
+							|  
+							span.token--len 0
+							|  
+							span.token--len 0
+							span.token--sep /
+							|  
+							span.token--len #{2*u}em
+							|  
+							span.token--len #{2*u}em
+						span.token--punc ,
+						|  
+						span.token--item
+							span.token--func repeating-linear-gradient
+							span.token--punc (
+							span.token--args
+								span.token--arg: span.token--ang 45deg
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #fff
+									|  
+									span.token--len 0
+									|  
+									span.token--len #{+(2*Math.sqrt(2)).toFixed(2)}px
+								span.token--punc ,
+								|  
+								span.token--arg
+									span.token--col #000
+									|  
+									span.token--len 0
+									|  
+									span.token--len #{+(4*Math.sqrt(2)).toFixed(2)}px
+							span.token--punc )
+				span.token--punc ;
+			span.token--decl
+				span.token--prop background-blend-mode
+				span.token--punc :
+				|  
+				span.token--val
+					span.token--keyw lighten
+					span.token--punc ,
+					|  
+					span.token--keyw darken
+					span.token--punc ,
+					|  
+					span.token--keyw normal
+		footer
+			a(href='https://www.shutterstock.com/image-vector/tartan-seamless-pattern-trendy-illustration-wallpapers-403422859' target='_blank') Pattern idea
\ No newline at end of file
diff --git a/minimal-pure-css-textile-patterns/src/script.babel b/minimal-pure-css-textile-patterns/src/script.babel
new file mode 100644
index 0000000..6fd0e98
--- /dev/null
+++ b/minimal-pure-css-textile-patterns/src/script.babel
@@ -0,0 +1,12 @@
+const ITEMS = [...document.querySelectorAll('.item')].map(c => ({ _el: c })), 
+			_STYL = document.createElement('style');
+
+ITEMS.forEach((c, i) => {
+	c._view = c._el.querySelector('.view');
+	c._code = c._el.querySelector('.code');
+	c.ctext = c._code.textContent;
+	c._view.id = `v${i}`;
+});
+
+_STYL.textContent = ITEMS.map((c, i) => `#v${i} { ${c.ctext} }`).join('');
+document.body.appendChild(_STYL)
\ No newline at end of file
diff --git a/minimal-pure-css-textile-patterns/src/style.scss b/minimal-pure-css-textile-patterns/src/style.scss
new file mode 100644
index 0000000..9db76fc
--- /dev/null
+++ b/minimal-pure-css-textile-patterns/src/style.scss
@@ -0,0 +1,173 @@
+$base: 25em;
+$btnr: 1.5em;
+
+* { box-sizing: inherit; margin: 0; font: inherit }
+
+html {
+	box-sizing: border-box;
+	overflow-x: hidden;
+	min-width: 240px;
+	background: #22242a;
+	color: #efefef;
+	font: 1em/ 1.25 ubuntu, trebuchet ms, sans-serif
+}
+
+body { --space: Min(4vmin, .75rem); }
+
+h3 {
+	font: 700 2.375em/ 2 satisfy, 
+		z003, segoe script, comic sans ms, cursive;
+	text-align: center
+}
+
+p { padding: var(--space) }
+
+.grid {
+	display: grid;
+	grid-gap: var(--space);
+	padding: var(--space)
+}
+
+main {
+	grid-template-columns: 
+		repeat(auto-fit, minmax(Min(100% - 2*var(--space), #{$base}), 1fr));
+	place-content: center
+}
+
+.item {
+	border-radius: 7px;
+	box-shadow: 0 0 1px 1px #484d5a;
+	background: #1b1d22;
+	color: #f9f9f9;
+	
+	&::after {
+		display: grid;
+		grid-area: 2/ 1;
+		place-self: start end;
+		width: 5em; height: 5em;
+		border-radius: 50%;
+		transform: rotate(30deg);
+		box-shadow: 0 0 2px 1px;
+		background: crimson;
+		place-content: center;
+		text-align: center;
+		content: 'only ' attr(data-size) ' bytes!'
+	}
+}
+
+h4 {
+	overflow: hidden;
+	max-width: 100%;
+	font-size: 1.25em;
+	text-overflow: ellipsis;
+	white-space: nowrap
+}
+
+.wrap {
+	grid-area: 2/ 1;
+	background: #fff }
+
+.view {
+	height: 
+		min(calc(#{$base} - 4*var(--space)), calc(100vh - 8*var(--space)));
+}
+
+[type='checkbox'] {
+	position: absolute;
+	right: 100vw;
+	
+	+ label {
+		--hlg: 0;
+		--sel: 0;
+		grid-area: 3/ 1;
+		justify-self: start;
+		border: solid .25em transparent;
+		padding: var(--space);
+		border-radius: inherit;
+		box-shadow: inherit;
+		background: 
+			rgba(50, calc(55 + var(--sel)*40), calc(75 + var(--sel)), max(var(--hlg), var(--sel))) padding-box;
+		color: #25cf5f;
+		cursor: pointer;
+		
+		&::before, &::after {
+			position: fixed;
+			top: 0; right: 0; bottom: 0; left: 0;
+			z-index: 1;
+			transform: scale(var(--sel));
+			opacity: var(--sel);
+			background: rgba(#323741, .85);
+			content: ''
+		}
+		
+		&::after {
+			--o: calc(var(--space) + #{$btnr});
+			--g: linear-gradient(#fff 0 0);
+			transform: 
+				scale(var(--sel)) 
+				translate(calc(50% - var(--o)), calc(var(--o) - 50%)) 
+				rotate(45deg);
+			background: 
+				var(--g) 50%/ 4px #{1.5*$btnr}, var(--g) 50%/ #{1.5*$btnr} 4px red;
+			background-repeat: no-repeat;
+			clip-path: circle($btnr);
+			filter: blur(2px) contrast(6)
+		}
+	}
+	
+	&:focus + label, & + label:hover { --hlg: 1 }
+	&:checked + label { --sel: 1 }
+}
+
+footer {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, 8em);
+	justify-content: end
+}
+
+a {
+	color: #1f5eff;
+	text-decoration: none;
+	
+	&::before {
+		display: inline-block;
+		margin-right: .25em;
+		content: '🔗'
+	}
+}
+
+.code {
+	--vis: 0;
+	--not-vis: calc(1 - var(--vis));
+	display: grid;
+	position: fixed;
+	top: 50%; left: 50%;
+	z-index: 2;
+	padding: var(--space);
+	width: Min(60em, 100vw - 2*var(--space));
+	transform: 
+		translate(calc(-50% - var(--not-vis)*100vw), -50%);
+	background: #000;
+	font-family: ubuntu mono, consolas, monaco, monospace;
+	white-space: pre-wrap;
+	
+	:checked ~ & { --vis: 1 }
+}
+
+.token {
+	&--item {
+		&::before { content: '\A   ' }
+	}
+	
+	&--prop { color: #abe4ff }
+	
+	&--func { color: #f39dd4 }
+	
+	&--ang { color: #d9abff }
+	
+	&--col { color: #f8f487 }
+	
+	&--len { color: #bcff9b }
+	
+	&--keyw { color: #ffdaab }
+}
\ No newline at end of file
diff --git a/mobile-menu/README.markdown b/mobile-menu/README.markdown
new file mode 100644
index 0000000..64b681d
--- /dev/null
+++ b/mobile-menu/README.markdown
@@ -0,0 +1,5 @@
+# Mobile Menu
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ricardoolivaalonso/pen/JjjjJOX](https://codepen.io/ricardoolivaalonso/pen/JjjjJOX).
+
+
diff --git a/mobile-menu/dist/index.html b/mobile-menu/dist/index.html
new file mode 100644
index 0000000..f899824
--- /dev/null
+++ b/mobile-menu/dist/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Mobile Menu</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="main">
+  <div class="bar"> <img class="bar__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMzgsMTRsMCw4bC0yNi4zNCwwbDcu%0D%0AMTcsLTcuMTdsLTIuODMsLTIuODNsLTEyLDEybDEyLDEybDIuODMsLTIuODNsLTcuMTcsLTcuMTds%0D%0AMzAuMzQsMGwwLC0xMmwtNCwweiIvPgogPC9nPgo8L3N2Zz4="/><img class="bar__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMjQsMTZjMi4yMSwwIDQsLTEuNzkg%0D%0ANCwtNHMtMS43OSwtNCAtNCwtNHMtNCwxLjc5IC00LDRzMS43OSw0IDQsNHptMCw0Yy0yLjIxLDAg%0D%0ALTQsMS43OSAtNCw0czEuNzksNCA0LDRzNCwtMS43OSA0LC00cy0xLjc5LC00IC00LC00em0wLDEy%0D%0AYy0yLjIxLDAgLTQsMS43OSAtNCw0czEuNzksNCA0LDRzNCwtMS43OSA0LC00cy0xLjc5LC00IC00%0D%0ALC00eiIvPgogPC9nPgo8L3N2Zz4="/></div>
+  <div class="menu">
+    <div class="menu__item" id="0-0"> <img class="menu__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZp%0D%0AbGw9IiNmZmZmZmYiIGlkPSJzdmdfMSIgZD0ibTIwLDQwbDAsLTEybDgsMGwwLDEybDEwLDBsMCwt%0D%0AMTZsNiwwbC0yMCwtMThsLTIwLDE4bDYsMGwwLDE2bDEwLDB6Ii8+CiA8L2c+Cjwvc3ZnPg=="/>
+      <div class="menu__content"><span class="menu__span">HOME</span><span class="menu__span">HOME</span></div>
+    </div>
+    <div class="menu__item" id="1-0"><img class="menu__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMjQsNDIuN2wtMi45LC0yLjYzYy0x%0D%0AMC4zLC05LjM1IC0xNy4xLC0xNS41MiAtMTcuMSwtMjMuMDdjMCwtNi4xNyA0LjgzLC0xMSAxMSwt%0D%0AMTFjMy40OCwwIDYuODIsMS42MiA5LDQuMTdjMi4xOCwtMi41NSA1LjUyLC00LjE3IDksLTQuMTdj%0D%0ANi4xNywwIDExLDQuODMgMTEsMTFjMCw3LjU1IC02LjgsMTMuNzIgLTE3LjEsMjMuMDdsLTIuOSwy%0D%0ALjYzeiIvPgogPC9nPgo8L3N2Zz4="/>
+      <div class="menu__content"><span class="menu__span">LIKES</span><span class="menu__span">LIKES</span></div>
+    </div>
+    <div class="menu__item" id="0-1"><img class="menu__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMjAsNDBsOCwwbDAsLTMybC04LDBs%0D%0AMCwzMnptLTEyLDBsOCwwbDAsLTE2bC04LDBsMCwxNnptMjQsLTIybDAsMjJsOCwwbDAsLTIybC04%0D%0ALDB6Ii8+CiA8L2c+Cjwvc3ZnPg=="/>
+      <div class="menu__content"><span class="menu__span">STATS</span><span class="menu__span">STATS</span></div>
+    </div>
+    <div class="menu__item" id="1-1"><img class="menu__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtNDIsMzhsMCwtMjhjMCwtMi4yMSAt%0D%0AMS43OSwtNCAtNCwtNGwtMjgsMGMtMi4yMSwwIC00LDEuNzkgLTQsNGwwLDI4YzAsMi4yMSAxLjc5%0D%0ALDQgNCw0bDI4LDBjMi4yMSwwIDQsLTEuNzkgNCwtNHptLTI1LC0xMWw1LDYuMDFsNywtOS4wMWw5%0D%0ALDEybC0yOCwwbDcsLTl6Ii8+CiA8L2c+Cjwvc3ZnPg=="/>
+      <div class="menu__content"><span class="menu__span">PICTURES</span><span class="menu__span">PICTURES</span></div>
+    </div>
+    <div class="menu__item" id="0-2"><img class="menu__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZp%0D%0AbGw9IiNmZmZmZmYiIGlkPSJzdmdfMSIgZD0ibTQuMDIsNDJsNDEuOTgsLTE4bC00MS45OCwtMThs%0D%0ALTAuMDIsMTRsMzAsNGwtMzAsNGwwLjAyLDE0eiIvPgogPC9nPgo8L3N2Zz4="/>
+      <div class="menu__content"><span class="menu__span">SHARE</span><span class="menu__span">SHARE</span></div>
+    </div>
+    <div class="menu__item" id="1-2"><img class="menu__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMzguODYsMjUuOTVjMC4wOCwtMC42%0D%0ANCAwLjE0LC0xLjI5IDAuMTQsLTEuOTVzLTAuMDYsLTEuMzEgLTAuMTQsLTEuOTVsNC4yMywtMy4z%0D%0AMWMwLjM4LC0wLjMgMC40OSwtMC44NCAwLjI0LC0xLjI4bC00LC02LjkzYy0wLjI1LC0wLjQzIC0w%0D%0ALjc3LC0wLjYxIC0xLjIyLC0wLjQzbC00Ljk4LDIuMDFjLTEuMDMsLTAuNzkgLTIuMTYsLTEuNDYg%0D%0ALTMuMzgsLTEuOTdsLTAuNzUsLTUuM2MtMC4wOSwtMC40NyAtMC41LC0wLjg0IC0xLC0wLjg0bC04%0D%0ALDBjLTAuNSwwIC0wLjkxLDAuMzcgLTAuOTksMC44NGwtMC43NSw1LjNjLTEuMjIsMC41MSAtMi4z%0D%0ANSwxLjE3IC0zLjM4LDEuOTdsLTQuOTgsLTIuMDFjLTAuNDUsLTAuMTcgLTAuOTcsMCAtMS4yMiww%0D%0ALjQzbC00LDYuOTNjLTAuMjUsMC40MyAtMC4xNCwwLjk3IDAuMjQsMS4yOGw0LjIyLDMuMzFjLTAu%0D%0AMDgsMC42NCAtMC4xNCwxLjI5IC0wLjE0LDEuOTVzMC4wNiwxLjMxIDAuMTQsMS45NWwtNC4yMiwz%0D%0ALjMxYy0wLjM4LDAuMyAtMC40OSwwLjg0IC0wLjI0LDEuMjhsNCw2LjkzYzAuMjUsMC40MyAwLjc3%0D%0ALDAuNjEgMS4yMiwwLjQzbDQuOTgsLTIuMDFjMS4wMywwLjc5IDIuMTYsMS40NiAzLjM4LDEuOTds%0D%0AMC43NSw1LjNjMC4wOCwwLjQ3IDAuNDksMC44NCAwLjk5LDAuODRsOCwwYzAuNSwwIDAuOTEsLTAu%0D%0AMzcgMC45OSwtMC44NGwwLjc1LC01LjNjMS4yMiwtMC41MSAyLjM1LC0xLjE3IDMuMzgsLTEuOTds%0D%0ANC45OCwyLjAxYzAuNDUsMC4xNyAwLjk3LDAgMS4yMiwtMC40M2w0LC02LjkzYzAuMjUsLTAuNDMg%0D%0AMC4xNCwtMC45NyAtMC4yNCwtMS4yOGwtNC4yMiwtMy4zMXptLTE0Ljg2LDUuMDVjLTMuODcsMCAt%0D%0ANywtMy4xMyAtNywtN3MzLjEzLC03IDcsLTdzNywzLjEzIDcsN3MtMy4xMyw3IC03LDd6Ii8+CiA8%0D%0AL2c+Cjwvc3ZnPg=="/>
+      <div class="menu__content"><span class="menu__span">SETTINGS</span><span class="menu__span">SETTINGS</span></div>
+    </div>
+    <div class="is-active" id="current"></div>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/mobile-menu/dist/script.js b/mobile-menu/dist/script.js
new file mode 100644
index 0000000..d422b90
--- /dev/null
+++ b/mobile-menu/dist/script.js
@@ -0,0 +1,21 @@
+/* Const */
+const menuItem = document.querySelectorAll(".menu__item");
+const currentItem = document.querySelector("#current");
+const mov = 140;
+/* Func */
+let getItem = (event) => {
+    let x = event.currentTarget.id.slice("-")[0];
+    let y = event.currentTarget.id.slice("-")[2];
+
+    currentItem.style.left = `${ x * mov }px`;
+    setTimeout( () =>  currentItem.style.top = `${ y * mov }px`, 200 ) ;
+
+}
+/* Main */
+let mainFunction = (event) => {
+    for (var i = 0; i < menuItem.length; i++) {
+        menuItem[i].addEventListener("click", getItem);
+    }
+}
+
+window.addEventListener("load", mainFunction);
\ No newline at end of file
diff --git a/mobile-menu/dist/style.css b/mobile-menu/dist/style.css
new file mode 100644
index 0000000..bb56646
--- /dev/null
+++ b/mobile-menu/dist/style.css
@@ -0,0 +1,118 @@
+/* variables */
+/* Reset */
+*, *::after, *::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Generic */
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  font-family: "Poppins", sans-serif;
+  font-size: 11px;
+  letter-spacing: 1px;
+  background: #F0EDFD;
+  color: #FFFFFF;
+  user-select: none;
+}
+
+/**/
+.main {
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  height: auto;
+  padding: 10px;
+  background: #7B49DD;
+  border-radius: 30px;
+  box-shadow: 0 0 40px 5px rgba(123, 73, 221, 0.25);
+}
+
+.bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  width: 100%;
+  height: 50px;
+  padding: 10px 0px;
+  margin-bottom: 10px;
+}
+.bar__icon {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  padding: 10px;
+  background: #6b34d9;
+  border-radius: 50%;
+}
+
+.menu {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 420px;
+  position: relative;
+}
+.menu__item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 140px;
+  height: 140px;
+  cursor: pointer;
+  background: transparent;
+  z-index: 100;
+  transition: 150ms;
+}
+.menu__item:hover .menu__icon {
+  animation: icon 0.1s 4;
+}
+.menu__item:hover .menu__span {
+  transform: translateY(-17px);
+  transition: 300ms;
+}
+.menu__icon {
+  width: 25px;
+  height: 25px;
+  object-fit: contain;
+  margin: 2px;
+}
+.menu__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 18px;
+  overflow: hidden;
+}
+
+/**/
+.is-active {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 140px;
+  height: 140px;
+  background: #6b34d9;
+  transition: 200ms;
+  border-radius: 20px;
+}
+
+@keyframes icon {
+  0% {
+    transform: rotateZ(-10deg);
+  }
+  100% {
+    transform: rotateZ(10deg);
+  }
+}
\ No newline at end of file
diff --git a/mobile-menu/license.txt b/mobile-menu/license.txt
new file mode 100644
index 0000000..29aba8e
--- /dev/null
+++ b/mobile-menu/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Ricardo Oliva Alonso (https://codepen.io/ricardoolivaalonso/pen/JjjjJOX)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/mobile-menu/src/index.pug b/mobile-menu/src/index.pug
new file mode 100644
index 0000000..ae7834a
--- /dev/null
+++ b/mobile-menu/src/index.pug
@@ -0,0 +1,38 @@
+div.main
+    div.bar 
+        img.bar__icon(src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMzgsMTRsMCw4bC0yNi4zNCwwbDcu%0D%0AMTcsLTcuMTdsLTIuODMsLTIuODNsLTEyLDEybDEyLDEybDIuODMsLTIuODNsLTcuMTcsLTcuMTds%0D%0AMzAuMzQsMGwwLC0xMmwtNCwweiIvPgogPC9nPgo8L3N2Zz4=")
+        img.bar__icon(src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMjQsMTZjMi4yMSwwIDQsLTEuNzkg%0D%0ANCwtNHMtMS43OSwtNCAtNCwtNHMtNCwxLjc5IC00LDRzMS43OSw0IDQsNHptMCw0Yy0yLjIxLDAg%0D%0ALTQsMS43OSAtNCw0czEuNzksNCA0LDRzNCwtMS43OSA0LC00cy0xLjc5LC00IC00LC00em0wLDEy%0D%0AYy0yLjIxLDAgLTQsMS43OSAtNCw0czEuNzksNCA0LDRzNCwtMS43OSA0LC00cy0xLjc5LC00IC00%0D%0ALC00eiIvPgogPC9nPgo8L3N2Zz4=")
+
+    div.menu
+        div.menu__item#0-0 
+            img.menu__icon(src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZp%0D%0AbGw9IiNmZmZmZmYiIGlkPSJzdmdfMSIgZD0ibTIwLDQwbDAsLTEybDgsMGwwLDEybDEwLDBsMCwt%0D%0AMTZsNiwwbC0yMCwtMThsLTIwLDE4bDYsMGwwLDE2bDEwLDB6Ii8+CiA8L2c+Cjwvc3ZnPg==")
+            div.menu__content
+                span.menu__span HOME
+                span.menu__span HOME
+        div.menu__item#1-0
+            img.menu__icon(src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMjQsNDIuN2wtMi45LC0yLjYzYy0x%0D%0AMC4zLC05LjM1IC0xNy4xLC0xNS41MiAtMTcuMSwtMjMuMDdjMCwtNi4xNyA0LjgzLC0xMSAxMSwt%0D%0AMTFjMy40OCwwIDYuODIsMS42MiA5LDQuMTdjMi4xOCwtMi41NSA1LjUyLC00LjE3IDksLTQuMTdj%0D%0ANi4xNywwIDExLDQuODMgMTEsMTFjMCw3LjU1IC02LjgsMTMuNzIgLTE3LjEsMjMuMDdsLTIuOSwy%0D%0ALjYzeiIvPgogPC9nPgo8L3N2Zz4=")
+            div.menu__content
+                span.menu__span LIKES
+                span.menu__span LIKES
+        div.menu__item#0-1
+            img.menu__icon(src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMjAsNDBsOCwwbDAsLTMybC04LDBs%0D%0AMCwzMnptLTEyLDBsOCwwbDAsLTE2bC04LDBsMCwxNnptMjQsLTIybDAsMjJsOCwwbDAsLTIybC04%0D%0ALDB6Ii8+CiA8L2c+Cjwvc3ZnPg==")
+            div.menu__content
+                span.menu__span STATS
+                span.menu__span STATS
+        div.menu__item#1-1
+            img.menu__icon(src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtNDIsMzhsMCwtMjhjMCwtMi4yMSAt%0D%0AMS43OSwtNCAtNCwtNGwtMjgsMGMtMi4yMSwwIC00LDEuNzkgLTQsNGwwLDI4YzAsMi4yMSAxLjc5%0D%0ALDQgNCw0bDI4LDBjMi4yMSwwIDQsLTEuNzkgNCwtNHptLTI1LC0xMWw1LDYuMDFsNywtOS4wMWw5%0D%0ALDEybC0yOCwwbDcsLTl6Ii8+CiA8L2c+Cjwvc3ZnPg==")
+            div.menu__content
+                span.menu__span PICTURES
+                span.menu__span PICTURES
+        div.menu__item#0-2
+            img.menu__icon(src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZp%0D%0AbGw9IiNmZmZmZmYiIGlkPSJzdmdfMSIgZD0ibTQuMDIsNDJsNDEuOTgsLTE4bC00MS45OCwtMThs%0D%0ALTAuMDIsMTRsMzAsNGwtMzAsNGwwLjAyLDE0eiIvPgogPC9nPgo8L3N2Zz4=")
+            div.menu__content
+                span.menu__span SHARE
+                span.menu__span SHARE
+        div.menu__item#1-2
+            img.menu__icon(src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMzguODYsMjUuOTVjMC4wOCwtMC42%0D%0ANCAwLjE0LC0xLjI5IDAuMTQsLTEuOTVzLTAuMDYsLTEuMzEgLTAuMTQsLTEuOTVsNC4yMywtMy4z%0D%0AMWMwLjM4LC0wLjMgMC40OSwtMC44NCAwLjI0LC0xLjI4bC00LC02LjkzYy0wLjI1LC0wLjQzIC0w%0D%0ALjc3LC0wLjYxIC0xLjIyLC0wLjQzbC00Ljk4LDIuMDFjLTEuMDMsLTAuNzkgLTIuMTYsLTEuNDYg%0D%0ALTMuMzgsLTEuOTdsLTAuNzUsLTUuM2MtMC4wOSwtMC40NyAtMC41LC0wLjg0IC0xLC0wLjg0bC04%0D%0ALDBjLTAuNSwwIC0wLjkxLDAuMzcgLTAuOTksMC44NGwtMC43NSw1LjNjLTEuMjIsMC41MSAtMi4z%0D%0ANSwxLjE3IC0zLjM4LDEuOTdsLTQuOTgsLTIuMDFjLTAuNDUsLTAuMTcgLTAuOTcsMCAtMS4yMiww%0D%0ALjQzbC00LDYuOTNjLTAuMjUsMC40MyAtMC4xNCwwLjk3IDAuMjQsMS4yOGw0LjIyLDMuMzFjLTAu%0D%0AMDgsMC42NCAtMC4xNCwxLjI5IC0wLjE0LDEuOTVzMC4wNiwxLjMxIDAuMTQsMS45NWwtNC4yMiwz%0D%0ALjMxYy0wLjM4LDAuMyAtMC40OSwwLjg0IC0wLjI0LDEuMjhsNCw2LjkzYzAuMjUsMC40MyAwLjc3%0D%0ALDAuNjEgMS4yMiwwLjQzbDQuOTgsLTIuMDFjMS4wMywwLjc5IDIuMTYsMS40NiAzLjM4LDEuOTds%0D%0AMC43NSw1LjNjMC4wOCwwLjQ3IDAuNDksMC44NCAwLjk5LDAuODRsOCwwYzAuNSwwIDAuOTEsLTAu%0D%0AMzcgMC45OSwtMC44NGwwLjc1LC01LjNjMS4yMiwtMC41MSAyLjM1LC0xLjE3IDMuMzgsLTEuOTds%0D%0ANC45OCwyLjAxYzAuNDUsMC4xNyAwLjk3LDAgMS4yMiwtMC40M2w0LC02LjkzYzAuMjUsLTAuNDMg%0D%0AMC4xNCwtMC45NyAtMC4yNCwtMS4yOGwtNC4yMiwtMy4zMXptLTE0Ljg2LDUuMDVjLTMuODcsMCAt%0D%0ANywtMy4xMyAtNywtN3MzLjEzLC03IDcsLTdzNywzLjEzIDcsN3MtMy4xMyw3IC03LDd6Ii8+CiA8%0D%0AL2c+Cjwvc3ZnPg==")
+            div.menu__content
+                span.menu__span SETTINGS
+                span.menu__span SETTINGS
+        
+        div.is-active#current
\ No newline at end of file
diff --git a/mobile-menu/src/script.js b/mobile-menu/src/script.js
new file mode 100644
index 0000000..a8c3515
--- /dev/null
+++ b/mobile-menu/src/script.js
@@ -0,0 +1,21 @@
+/* Const */
+const menuItem = document.querySelectorAll(".menu__item");
+const currentItem = document.querySelector("#current");
+const mov = 140;
+/* Func */
+let getItem = (event) => {
+    let x = event.currentTarget.id.slice("-")[0];
+    let y = event.currentTarget.id.slice("-")[2];
+
+    currentItem.style.left = `${ x * mov }px`;
+    setTimeout( () =>  currentItem.style.top = `${ y * mov }px`, 200 ) ;
+
+}
+/* Main */
+let mainFunction = (event) => {
+    for (var i = 0; i < menuItem.length; i++) {
+        menuItem[i].addEventListener("click", getItem);
+    }
+}
+
+window.addEventListener("load", mainFunction);
diff --git a/mobile-menu/src/style.scss b/mobile-menu/src/style.scss
new file mode 100644
index 0000000..c14a087
--- /dev/null
+++ b/mobile-menu/src/style.scss
@@ -0,0 +1,116 @@
+/* variables */
+$bg: #F0EDFD;
+$main: #7B49DD;
+$white: #FFFFFF;
+
+/* Reset */
+*, *::after, *::before {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+/* Generic */
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+
+    font-family: 'Poppins', sans-serif;
+    font-size: 11px;
+    letter-spacing: 1px;
+    background: $bg;
+    color: $white;
+	  user-select: none;
+}
+/**/
+.main{
+    display: flex;
+    flex-direction: column;
+    width: 300px;
+    height: auto;
+    padding: 10px;
+
+    background: $main;
+    border-radius: 30px;
+    box-shadow: 0 0 40px 5px rgba( $main, 0.25);
+
+}
+.bar{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    width: 100%;
+    height: 50px;
+
+    padding: 10px 0px;
+    margin-bottom: 10px;
+
+    &__icon{
+        width: 40px;
+        height: 40px;
+        object-fit: contain;
+        padding: 10px;
+
+        background: darken($main, 5);
+        border-radius: 50%;
+    }
+}
+.menu{
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    height: 420px;
+    position: relative;
+
+    &__item{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 140px;
+        height: 140px;
+
+        cursor: pointer;
+        background: transparent;
+        z-index: 100;
+        transition: 150ms;
+
+        &:hover .menu__icon{ animation: icon .1s 4; }
+        &:hover .menu__span{ transform: translateY(-17px); transition: 300ms;}
+    }
+    &__icon{
+        width: 25px;
+        height: 25px;
+        object-fit: contain;
+        margin: 2px;
+    }
+    &__content{
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        position: relative;
+        width: 100%;
+        height: 18px;
+        overflow: hidden;
+    }
+}
+/**/
+.is-active{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 140px;
+    height: 140px;
+    background: darken($main, 5);
+    transition: 200ms;
+    border-radius: 20px;
+}
+@keyframes icon {
+    0%{ transform: rotateZ(-10deg); }
+    100%{ transform: rotateZ(10deg); }
+}
diff --git a/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/README.markdown b/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/README.markdown
new file mode 100644
index 0000000..bcf14cc
--- /dev/null
+++ b/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/README.markdown
@@ -0,0 +1,5 @@
+# Mobile tab navigation [Vue & GSAP] #cpc-vue-tabs #codepenchallenge
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Hulass/pen/yLYEabN](https://codepen.io/Hulass/pen/yLYEabN).
+
+
diff --git a/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/dist/index.html b/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/dist/index.html
new file mode 100644
index 0000000..050884f
--- /dev/null
+++ b/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/dist/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Mobile tab navigation [Vue &amp; GSAP] #cpc-vue-tabs #codepenchallenge</title>
+  
+
+  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
+  
+  <script  src="./script.js"></script>
+
+</head>
+<body>
+
+  <div id="app"></div>
+
+  
+
+  <script>
+    if ( !window['CodePenVueComponent'] ) {
+      throw new Error('Error compiling Vue component.');
+    }
+    new Vue(CodePenVueComponent).$mount('#app');
+  </script>
+</body>
+</html>
diff --git a/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/dist/script.js b/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/dist/script.js
new file mode 100644
index 0000000..27445d1
--- /dev/null
+++ b/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/dist/script.js
@@ -0,0 +1,242 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["CodePenVueComponent"] = factory();
+	else
+		root["CodePenVueComponent"] = factory();
+})((typeof self !== 'undefined' ? self : this), function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "../../tmp/codepen/vuejs/src/pen.vue");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "../../tmp/codepen/vuejs/src/pen.vue":
+/*!**************************************!*\
+  !*** /tmp/codepen/vuejs/src/pen.vue ***!
+  \**************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _pen_vue_vue_type_template_id_0755aed5___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./pen.vue?vue&type=template&id=0755aed5& */ \"../../tmp/codepen/vuejs/src/pen.vue?vue&type=template&id=0755aed5&\");\n/* harmony import */ var _pen_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./pen.vue?vue&type=script&lang=js& */ \"../../tmp/codepen/vuejs/src/pen.vue?vue&type=script&lang=js&\");\n/* empty/unused harmony star reexport *//* harmony import */ var _pen_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./pen.vue?vue&type=style&index=0&lang=css& */ \"../../tmp/codepen/vuejs/src/pen.vue?vue&type=style&index=0&lang=css&\");\n/* harmony import */ var _var_task_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../var/task/node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n\n\n\n/* normalize component */\n\nvar component = Object(_var_task_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\n  _pen_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  _pen_vue_vue_type_template_id_0755aed5___WEBPACK_IMPORTED_MODULE_0__[\"render\"],\n  _pen_vue_vue_type_template_id_0755aed5___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"],\n  false,\n  null,\n  null,\n  null\n  \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"tmp/codepen/vuejs/src/pen.vue\"\n/* harmony default export */ __webpack_exports__[\"default\"] = (component.exports);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi4vLi4vdG1wL2NvZGVwZW4vdnVlanMvc3JjL3Blbi52dWUuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9Db2RlUGVuVnVlQ29tcG9uZW50Ly90bXAvY29kZXBlbi92dWVqcy9zcmMvcGVuLnZ1ZT81MDBiIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHJlbmRlciwgc3RhdGljUmVuZGVyRm5zIH0gZnJvbSBcIi4vcGVuLnZ1ZT92dWUmdHlwZT10ZW1wbGF0ZSZpZD0wNzU1YWVkNSZcIlxuaW1wb3J0IHNjcmlwdCBmcm9tIFwiLi9wZW4udnVlP3Z1ZSZ0eXBlPXNjcmlwdCZsYW5nPWpzJlwiXG5leHBvcnQgKiBmcm9tIFwiLi9wZW4udnVlP3Z1ZSZ0eXBlPXNjcmlwdCZsYW5nPWpzJlwiXG5pbXBvcnQgc3R5bGUwIGZyb20gXCIuL3Blbi52dWU/dnVlJnR5cGU9c3R5bGUmaW5kZXg9MCZsYW5nPWNzcyZcIlxuXG5cbi8qIG5vcm1hbGl6ZSBjb21wb25lbnQgKi9cbmltcG9ydCBub3JtYWxpemVyIGZyb20gXCIhLi4vLi4vLi4vLi4vdmFyL3Rhc2svbm9kZV9tb2R1bGVzL3Z1ZS1sb2FkZXIvbGliL3J1bnRpbWUvY29tcG9uZW50Tm9ybWFsaXplci5qc1wiXG52YXIgY29tcG9uZW50ID0gbm9ybWFsaXplcihcbiAgc2NyaXB0LFxuICByZW5kZXIsXG4gIHN0YXRpY1JlbmRlckZucyxcbiAgZmFsc2UsXG4gIG51bGwsXG4gIG51bGwsXG4gIG51bGxcbiAgXG4pXG5cbi8qIGhvdCByZWxvYWQgKi9cbmlmIChtb2R1bGUuaG90KSB7XG4gIHZhciBhcGkgPSByZXF1aXJlKFwiL3Zhci90YXNrL25vZGVfbW9kdWxlcy92dWUtaG90LXJlbG9hZC1hcGkvZGlzdC9pbmRleC5qc1wiKVxuICBhcGkuaW5zdGFsbChyZXF1aXJlKCd2dWUnKSlcbiAgaWYgKGFwaS5jb21wYXRpYmxlKSB7XG4gICAgbW9kdWxlLmhvdC5hY2NlcHQoKVxuICAgIGlmICghYXBpLmlzUmVjb3JkZWQoJzA3NTVhZWQ1JykpIHtcbiAgICAgIGFwaS5jcmVhdGVSZWNvcmQoJzA3NTVhZWQ1JywgY29tcG9uZW50Lm9wdGlvbnMpXG4gICAgfSBlbHNlIHtcbiAgICAgIGFwaS5yZWxvYWQoJzA3NTVhZWQ1JywgY29tcG9uZW50Lm9wdGlvbnMpXG4gICAgfVxuICAgIG1vZHVsZS5ob3QuYWNjZXB0KFwiLi9wZW4udnVlP3Z1ZSZ0eXBlPXRlbXBsYXRlJmlkPTA3NTVhZWQ1JlwiLCBmdW5jdGlvbiAoKSB7XG4gICAgICBhcGkucmVyZW5kZXIoJzA3NTVhZWQ1Jywge1xuICAgICAgICByZW5kZXI6IHJlbmRlcixcbiAgICAgICAgc3RhdGljUmVuZGVyRm5zOiBzdGF0aWNSZW5kZXJGbnNcbiAgICAgIH0pXG4gICAgfSlcbiAgfVxufVxuY29tcG9uZW50Lm9wdGlvbnMuX19maWxlID0gXCJ0bXAvY29kZXBlbi92dWVqcy9zcmMvcGVuLnZ1ZVwiXG5leHBvcnQgZGVmYXVsdCBjb21wb25lbnQuZXhwb3J0cyJdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSx1QkFpQkE7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///../../tmp/codepen/vuejs/src/pen.vue\n");
+
+/***/ }),
+
+/***/ "../../tmp/codepen/vuejs/src/pen.vue?vue&type=script&lang=js&":
+/*!***************************************************************!*\
+  !*** /tmp/codepen/vuejs/src/pen.vue?vue&type=script&lang=js& ***!
+  \***************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _var_task_node_modules_vue_loader_lib_index_js_vue_loader_options_pen_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../var/task/node_modules/vue-loader/lib??vue-loader-options!./pen.vue?vue&type=script&lang=js& */ \"./node_modules/vue-loader/lib/index.js?!../../tmp/codepen/vuejs/src/pen.vue?vue&type=script&lang=js&\");\n/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__[\"default\"] = (_var_task_node_modules_vue_loader_lib_index_js_vue_loader_options_pen_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[\"default\"]); //# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi4vLi4vdG1wL2NvZGVwZW4vdnVlanMvc3JjL3Blbi52dWU/dnVlJnR5cGU9c2NyaXB0Jmxhbmc9anMmLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vQ29kZVBlblZ1ZUNvbXBvbmVudC8vdG1wL2NvZGVwZW4vdnVlanMvc3JjL3Blbi52dWU/ZDcyOCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgbW9kIGZyb20gXCItIS4uLy4uLy4uLy4uL3Zhci90YXNrL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9pbmRleC5qcz8/dnVlLWxvYWRlci1vcHRpb25zIS4vcGVuLnZ1ZT92dWUmdHlwZT1zY3JpcHQmbGFuZz1qcyZcIjsgZXhwb3J0IGRlZmF1bHQgbW9kOyBleHBvcnQgKiBmcm9tIFwiLSEuLi8uLi8uLi8uLi92YXIvdGFzay9ub2RlX21vZHVsZXMvdnVlLWxvYWRlci9saWIvaW5kZXguanM/P3Z1ZS1sb2FkZXItb3B0aW9ucyEuL3Blbi52dWU/dnVlJnR5cGU9c2NyaXB0Jmxhbmc9anMmXCIiXSwibWFwcGluZ3MiOiJBQUFBO0FBQUE7QUFBQSIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///../../tmp/codepen/vuejs/src/pen.vue?vue&type=script&lang=js&\n");
+
+/***/ }),
+
+/***/ "../../tmp/codepen/vuejs/src/pen.vue?vue&type=style&index=0&lang=css&":
+/*!***********************************************************************!*\
+  !*** /tmp/codepen/vuejs/src/pen.vue?vue&type=style&index=0&lang=css& ***!
+  \***********************************************************************/
+/*! no static exports found */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _var_task_node_modules_vue_style_loader_index_js_var_task_node_modules_css_loader_dist_cjs_js_var_task_node_modules_vue_loader_lib_loaders_stylePostLoader_js_var_task_node_modules_vue_loader_lib_index_js_vue_loader_options_pen_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../var/task/node_modules/vue-style-loader!../../../../var/task/node_modules/css-loader/dist/cjs.js!../../../../var/task/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../var/task/node_modules/vue-loader/lib??vue-loader-options!./pen.vue?vue&type=style&index=0&lang=css& */ \"./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js?!../../tmp/codepen/vuejs/src/pen.vue?vue&type=style&index=0&lang=css&\");\n/* harmony import */ var _var_task_node_modules_vue_style_loader_index_js_var_task_node_modules_css_loader_dist_cjs_js_var_task_node_modules_vue_loader_lib_loaders_stylePostLoader_js_var_task_node_modules_vue_loader_lib_index_js_vue_loader_options_pen_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_var_task_node_modules_vue_style_loader_index_js_var_task_node_modules_css_loader_dist_cjs_js_var_task_node_modules_vue_loader_lib_loaders_stylePostLoader_js_var_task_node_modules_vue_loader_lib_index_js_vue_loader_options_pen_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _var_task_node_modules_vue_style_loader_index_js_var_task_node_modules_css_loader_dist_cjs_js_var_task_node_modules_vue_loader_lib_loaders_stylePostLoader_js_var_task_node_modules_vue_loader_lib_index_js_vue_loader_options_pen_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _var_task_node_modules_vue_style_loader_index_js_var_task_node_modules_css_loader_dist_cjs_js_var_task_node_modules_vue_loader_lib_loaders_stylePostLoader_js_var_task_node_modules_vue_loader_lib_index_js_vue_loader_options_pen_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_var_task_node_modules_vue_style_loader_index_js_var_task_node_modules_css_loader_dist_cjs_js_var_task_node_modules_vue_loader_lib_loaders_stylePostLoader_js_var_task_node_modules_vue_loader_lib_index_js_vue_loader_options_pen_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a); //# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi4vLi4vdG1wL2NvZGVwZW4vdnVlanMvc3JjL3Blbi52dWU/dnVlJnR5cGU9c3R5bGUmaW5kZXg9MCZsYW5nPWNzcyYuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9Db2RlUGVuVnVlQ29tcG9uZW50Ly90bXAvY29kZXBlbi92dWVqcy9zcmMvcGVuLnZ1ZT9iNGZlIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBtb2QgZnJvbSBcIi0hLi4vLi4vLi4vLi4vdmFyL3Rhc2svbm9kZV9tb2R1bGVzL3Z1ZS1zdHlsZS1sb2FkZXIvaW5kZXguanMhLi4vLi4vLi4vLi4vdmFyL3Rhc2svbm9kZV9tb2R1bGVzL2Nzcy1sb2FkZXIvZGlzdC9janMuanMhLi4vLi4vLi4vLi4vdmFyL3Rhc2svbm9kZV9tb2R1bGVzL3Z1ZS1sb2FkZXIvbGliL2xvYWRlcnMvc3R5bGVQb3N0TG9hZGVyLmpzIS4uLy4uLy4uLy4uL3Zhci90YXNrL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9pbmRleC5qcz8/dnVlLWxvYWRlci1vcHRpb25zIS4vcGVuLnZ1ZT92dWUmdHlwZT1zdHlsZSZpbmRleD0wJmxhbmc9Y3NzJlwiOyBleHBvcnQgZGVmYXVsdCBtb2Q7IGV4cG9ydCAqIGZyb20gXCItIS4uLy4uLy4uLy4uL3Zhci90YXNrL25vZGVfbW9kdWxlcy92dWUtc3R5bGUtbG9hZGVyL2luZGV4LmpzIS4uLy4uLy4uLy4uL3Zhci90YXNrL25vZGVfbW9kdWxlcy9jc3MtbG9hZGVyL2Rpc3QvY2pzLmpzIS4uLy4uLy4uLy4uL3Zhci90YXNrL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9sb2FkZXJzL3N0eWxlUG9zdExvYWRlci5qcyEuLi8uLi8uLi8uLi92YXIvdGFzay9ub2RlX21vZHVsZXMvdnVlLWxvYWRlci9saWIvaW5kZXguanM/P3Z1ZS1sb2FkZXItb3B0aW9ucyEuL3Blbi52dWU/dnVlJnR5cGU9c3R5bGUmaW5kZXg9MCZsYW5nPWNzcyZcIiJdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///../../tmp/codepen/vuejs/src/pen.vue?vue&type=style&index=0&lang=css&\n");
+
+/***/ }),
+
+/***/ "../../tmp/codepen/vuejs/src/pen.vue?vue&type=template&id=0755aed5&":
+/*!*********************************************************************!*\
+  !*** /tmp/codepen/vuejs/src/pen.vue?vue&type=template&id=0755aed5& ***!
+  \*********************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _var_task_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_var_task_node_modules_vue_loader_lib_index_js_vue_loader_options_pen_vue_vue_type_template_id_0755aed5___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../var/task/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../var/task/node_modules/vue-loader/lib??vue-loader-options!./pen.vue?vue&type=template&id=0755aed5& */ \"./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!../../tmp/codepen/vuejs/src/pen.vue?vue&type=template&id=0755aed5&\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return _var_task_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_var_task_node_modules_vue_loader_lib_index_js_vue_loader_options_pen_vue_vue_type_template_id_0755aed5___WEBPACK_IMPORTED_MODULE_0__[\"render\"]; });\n\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return _var_task_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_var_task_node_modules_vue_loader_lib_index_js_vue_loader_options_pen_vue_vue_type_template_id_0755aed5___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"]; });\n\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi4vLi4vdG1wL2NvZGVwZW4vdnVlanMvc3JjL3Blbi52dWU/dnVlJnR5cGU9dGVtcGxhdGUmaWQ9MDc1NWFlZDUmLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vQ29kZVBlblZ1ZUNvbXBvbmVudC8vdG1wL2NvZGVwZW4vdnVlanMvc3JjL3Blbi52dWU/ZGVmZCJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tIFwiLSEuLi8uLi8uLi8uLi92YXIvdGFzay9ub2RlX21vZHVsZXMvdnVlLWxvYWRlci9saWIvbG9hZGVycy90ZW1wbGF0ZUxvYWRlci5qcz8/dnVlLWxvYWRlci1vcHRpb25zIS4uLy4uLy4uLy4uL3Zhci90YXNrL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9pbmRleC5qcz8/dnVlLWxvYWRlci1vcHRpb25zIS4vcGVuLnZ1ZT92dWUmdHlwZT10ZW1wbGF0ZSZpZD0wNzU1YWVkNSZcIiJdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBOyIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///../../tmp/codepen/vuejs/src/pen.vue?vue&type=template&id=0755aed5&\n");
+
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js?!../../tmp/codepen/vuejs/src/pen.vue?vue&type=style&index=0&lang=css&":
+/*!************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!/tmp/codepen/vuejs/src/pen.vue?vue&type=style&index=0&lang=css& ***!
+  \************************************************************************************************************************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+eval("// Imports\nvar ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../var/task/node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.i, \"\\n*,\\n::before,\\n::after {\\n  box-sizing: border-box;\\n}\\nbody {\\n  background: #f3f8fe;\\n  display: flex;\\n  height: 100vh;\\n}\\n.phone {\\n  width: 25vw;\\n  min-width: 225px;\\n  max-width: 325px;\\n  height: 50vw;\\n  min-height: 450px;\\n  max-height: 650px;\\n  margin: auto;\\n  border: 2px solid black;\\n  border-radius: 30px;\\n  background: #f3f8fe;\\n  position: relative;\\n  display: grid;\\n  grid-template-columns: 100%;\\n  grid-template-rows: 10% 80% 10%;\\n  overflow: hidden;\\n}\\n.header {\\n  grid-column: 1;\\n  grid-row: 0/2;\\n}\\n.head-wr {\\n  display: flex;\\n  width: 100%;\\n  height: 100%;\\n  border-top-left-radius: 30px;\\n  border-top-right-radius: 30px;\\n  justify-content: flex-start;\\n  align-items: flex-start;\\n  gap: 3%;\\n  padding-top: 20px;\\n  padding-left: 8%;\\n  position: relative;\\n}\\n.head-wr > div {\\n  width: 2.5vw;\\n  min-width: 15px;\\n  max-width: 20px;\\n  height: 2.5vw;\\n  min-height: 15px;\\n  max-height: 20px;\\n}\\n.head-wr > div:nth-of-type(3) {\\n  width: 4vw;\\n  min-width: 30px;\\n  max-width: 40px;\\n  height: 2.5vw;\\n  min-height: 15px;\\n  max-height: 20px;\\n  position: absolute;\\n  right: 8%;\\n  transform: rotate(180deg);\\n}\\n.head-wr > div > svg {\\n  width: 100%;\\n  height: 100%;\\n  overflow: visible;\\n}\\n.content {\\n  grid-column: 1;\\n  grid-row: 2/3;\\n}\\n.main-wr {\\n  width: 100%;\\n  height: 100%;\\n  display: flex;\\n  overflow: hidden;\\n  background: lightgrey;\\n}\\n.main-wr > div {\\n  margin: auto;\\n  width: 80%;\\n  height: auto;\\n  position: relative;\\n}\\n.slide-enter,\\n.slide-leave-to {\\n  transform: translateX(120%);\\n}\\n.slide-enter-active,\\n.slide-leave-active {\\n  transition: transform 0.4s ease-out;\\n}\\n.main-wr > div > img {\\n  max-width: 100%;\\n  height: auto;\\n}\\n.tabs {\\n  grid-column: 1;\\n  grid-row: 3/4;\\n  position: relative;\\n}\\nnav {\\n  position: absolute;\\n  top: -25%;\\n  width: 100%;\\n  height: 100%;\\n}\\n.tab-nav {\\n  position: absolute;\\n  padding: 0;\\n  width: 100%;\\n  height: 100%;\\n  display: flex;\\n  justify-content: space-evenly;\\n  align-items: center;\\n  list-style-type: none;\\n  border-bottom-left-radius: 30px;\\n  border-bottom-right-radius: 30px;\\n}\\n.tab-nav > li {\\n  width: 2.5vw;\\n  min-width: 20px;\\n  max-width: 25px;\\n  height: 2.5vw;\\n  min-height: 20px;\\n  max-height: 25px;\\n  padding: 1%;\\n  top: 50%;\\n  transform: translateY(-38%);\\n  transition: opacity 0.25s ease 0.075s;\\n}\\n.tab-nav > li > svg {\\n  overflow: visible;\\n  width: 100%;\\n  height: 100%;\\n  cursor: pointer;\\n}\\n.tab-ctr {\\n  position: absolute;\\n  width: 25%;\\n  height: 100%;\\n  bottom: 0;\\n  transition: all 0.8s ease;\\n}\\n.tab-ctr > svg {\\n  width: 100%;\\n  height: 65%;\\n  overflow: visible;\\n}\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvY3NzLWxvYWRlci9kaXN0L2Nqcy5qcyEuL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9sb2FkZXJzL3N0eWxlUG9zdExvYWRlci5qcyEuL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9pbmRleC5qcz8hLi4vLi4vdG1wL2NvZGVwZW4vdnVlanMvc3JjL3Blbi52dWU/dnVlJnR5cGU9c3R5bGUmaW5kZXg9MCZsYW5nPWNzcyYuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9Db2RlUGVuVnVlQ29tcG9uZW50Ly90bXAvY29kZXBlbi92dWVqcy9zcmMvcGVuLnZ1ZT8yZWI5Il0sInNvdXJjZXNDb250ZW50IjpbIi8vIEltcG9ydHNcbnZhciBfX19DU1NfTE9BREVSX0FQSV9JTVBPUlRfX18gPSByZXF1aXJlKFwiLi4vLi4vLi4vLi4vdmFyL3Rhc2svbm9kZV9tb2R1bGVzL2Nzcy1sb2FkZXIvZGlzdC9ydW50aW1lL2FwaS5qc1wiKTtcbmV4cG9ydHMgPSBfX19DU1NfTE9BREVSX0FQSV9JTVBPUlRfX18oZmFsc2UpO1xuLy8gTW9kdWxlXG5leHBvcnRzLnB1c2goW21vZHVsZS5pZCwgXCJcXG4qLFxcbjo6YmVmb3JlLFxcbjo6YWZ0ZXIge1xcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcXG59XFxuYm9keSB7XFxuICBiYWNrZ3JvdW5kOiAjZjNmOGZlO1xcbiAgZGlzcGxheTogZmxleDtcXG4gIGhlaWdodDogMTAwdmg7XFxufVxcbi5waG9uZSB7XFxuICB3aWR0aDogMjV2dztcXG4gIG1pbi13aWR0aDogMjI1cHg7XFxuICBtYXgtd2lkdGg6IDMyNXB4O1xcbiAgaGVpZ2h0OiA1MHZ3O1xcbiAgbWluLWhlaWdodDogNDUwcHg7XFxuICBtYXgtaGVpZ2h0OiA2NTBweDtcXG4gIG1hcmdpbjogYXV0bztcXG4gIGJvcmRlcjogMnB4IHNvbGlkIGJsYWNrO1xcbiAgYm9yZGVyLXJhZGl1czogMzBweDtcXG4gIGJhY2tncm91bmQ6ICNmM2Y4ZmU7XFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XFxuICBkaXNwbGF5OiBncmlkO1xcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxMDAlO1xcbiAgZ3JpZC10ZW1wbGF0ZS1yb3dzOiAxMCUgODAlIDEwJTtcXG4gIG92ZXJmbG93OiBoaWRkZW47XFxufVxcbi5oZWFkZXIge1xcbiAgZ3JpZC1jb2x1bW46IDE7XFxuICBncmlkLXJvdzogMC8yO1xcbn1cXG4uaGVhZC13ciB7XFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgd2lkdGg6IDEwMCU7XFxuICBoZWlnaHQ6IDEwMCU7XFxuICBib3JkZXItdG9wLWxlZnQtcmFkaXVzOiAzMHB4O1xcbiAgYm9yZGVyLXRvcC1yaWdodC1yYWRpdXM6IDMwcHg7XFxuICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XFxuICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcXG4gIGdhcDogMyU7XFxuICBwYWRkaW5nLXRvcDogMjBweDtcXG4gIHBhZGRpbmctbGVmdDogOCU7XFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XFxufVxcbi5oZWFkLXdyID4gZGl2IHtcXG4gIHdpZHRoOiAyLjV2dztcXG4gIG1pbi13aWR0aDogMTVweDtcXG4gIG1heC13aWR0aDogMjBweDtcXG4gIGhlaWdodDogMi41dnc7XFxuICBtaW4taGVpZ2h0OiAxNXB4O1xcbiAgbWF4LWhlaWdodDogMjBweDtcXG59XFxuLmhlYWQtd3IgPiBkaXY6bnRoLW9mLXR5cGUoMykge1xcbiAgd2lkdGg6IDR2dztcXG4gIG1pbi13aWR0aDogMzBweDtcXG4gIG1heC13aWR0aDogNDBweDtcXG4gIGhlaWdodDogMi41dnc7XFxuICBtaW4taGVpZ2h0OiAxNXB4O1xcbiAgbWF4LWhlaWdodDogMjBweDtcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gIHJpZ2h0OiA4JTtcXG4gIHRyYW5zZm9ybTogcm90YXRlKDE4MGRlZyk7XFxufVxcbi5oZWFkLXdyID4gZGl2ID4gc3ZnIHtcXG4gIHdpZHRoOiAxMDAlO1xcbiAgaGVpZ2h0OiAxMDAlO1xcbiAgb3ZlcmZsb3c6IHZpc2libGU7XFxufVxcbi5jb250ZW50IHtcXG4gIGdyaWQtY29sdW1uOiAxO1xcbiAgZ3JpZC1yb3c6IDIvMztcXG59XFxuLm1haW4td3Ige1xcbiAgd2lkdGg6IDEwMCU7XFxuICBoZWlnaHQ6IDEwMCU7XFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcXG4gIGJhY2tncm91bmQ6IGxpZ2h0Z3JleTtcXG59XFxuLm1haW4td3IgPiBkaXYge1xcbiAgbWFyZ2luOiBhdXRvO1xcbiAgd2lkdGg6IDgwJTtcXG4gIGhlaWdodDogYXV0bztcXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcXG59XFxuLnNsaWRlLWVudGVyLFxcbi5zbGlkZS1sZWF2ZS10byB7XFxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMTIwJSk7XFxufVxcbi5zbGlkZS1lbnRlci1hY3RpdmUsXFxuLnNsaWRlLWxlYXZlLWFjdGl2ZSB7XFxuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC40cyBlYXNlLW91dDtcXG59XFxuLm1haW4td3IgPiBkaXYgPiBpbWcge1xcbiAgbWF4LXdpZHRoOiAxMDAlO1xcbiAgaGVpZ2h0OiBhdXRvO1xcbn1cXG4udGFicyB7XFxuICBncmlkLWNvbHVtbjogMTtcXG4gIGdyaWQtcm93OiAzLzQ7XFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XFxufVxcbm5hdiB7XFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XFxuICB0b3A6IC0yNSU7XFxuICB3aWR0aDogMTAwJTtcXG4gIGhlaWdodDogMTAwJTtcXG59XFxuLnRhYi1uYXYge1xcbiAgcG9zaXRpb246IGFic29sdXRlO1xcbiAgcGFkZGluZzogMDtcXG4gIHdpZHRoOiAxMDAlO1xcbiAgaGVpZ2h0OiAxMDAlO1xcbiAgZGlzcGxheTogZmxleDtcXG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtZXZlbmx5O1xcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcXG4gIGxpc3Qtc3R5bGUtdHlwZTogbm9uZTtcXG4gIGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMwcHg7XFxuICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogMzBweDtcXG59XFxuLnRhYi1uYXYgPiBsaSB7XFxuICB3aWR0aDogMi41dnc7XFxuICBtaW4td2lkdGg6IDIwcHg7XFxuICBtYXgtd2lkdGg6IDI1cHg7XFxuICBoZWlnaHQ6IDIuNXZ3O1xcbiAgbWluLWhlaWdodDogMjBweDtcXG4gIG1heC1oZWlnaHQ6IDI1cHg7XFxuICBwYWRkaW5nOiAxJTtcXG4gIHRvcDogNTAlO1xcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zOCUpO1xcbiAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjI1cyBlYXNlIDAuMDc1cztcXG59XFxuLnRhYi1uYXYgPiBsaSA+IHN2ZyB7XFxuICBvdmVyZmxvdzogdmlzaWJsZTtcXG4gIHdpZHRoOiAxMDAlO1xcbiAgaGVpZ2h0OiAxMDAlO1xcbiAgY3Vyc29yOiBwb2ludGVyO1xcbn1cXG4udGFiLWN0ciB7XFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XFxuICB3aWR0aDogMjUlO1xcbiAgaGVpZ2h0OiAxMDAlO1xcbiAgYm90dG9tOiAwO1xcbiAgdHJhbnNpdGlvbjogYWxsIDAuOHMgZWFzZTtcXG59XFxuLnRhYi1jdHIgPiBzdmcge1xcbiAgd2lkdGg6IDEwMCU7XFxuICBoZWlnaHQ6IDY1JTtcXG4gIG92ZXJmbG93OiB2aXNpYmxlO1xcbn1cXG5cIiwgXCJcIl0pO1xuLy8gRXhwb3J0c1xubW9kdWxlLmV4cG9ydHMgPSBleHBvcnRzO1xuIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTsiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js?!../../tmp/codepen/vuejs/src/pen.vue?vue&type=style&index=0&lang=css&\n");
+
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/runtime/api.js":
+/*!*****************************************************!*\
+  !*** ./node_modules/css-loader/dist/runtime/api.js ***!
+  \*****************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\n/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\n// eslint-disable-next-line func-names\nmodule.exports = function (useSourceMap) {\n  var list = []; // return the list of modules as css string\n\n  list.toString = function toString() {\n    return this.map(function (item) {\n      var content = cssWithMappingToString(item, useSourceMap);\n\n      if (item[2]) {\n        return \"@media \".concat(item[2], \" {\").concat(content, \"}\");\n      }\n\n      return content;\n    }).join('');\n  }; // import a list of modules into the list\n  // eslint-disable-next-line func-names\n\n\n  list.i = function (modules, mediaQuery, dedupe) {\n    if (typeof modules === 'string') {\n      // eslint-disable-next-line no-param-reassign\n      modules = [[null, modules, '']];\n    }\n\n    var alreadyImportedModules = {};\n\n    if (dedupe) {\n      for (var i = 0; i < this.length; i++) {\n        // eslint-disable-next-line prefer-destructuring\n        var id = this[i][0];\n\n        if (id != null) {\n          alreadyImportedModules[id] = true;\n        }\n      }\n    }\n\n    for (var _i = 0; _i < modules.length; _i++) {\n      var item = [].concat(modules[_i]);\n\n      if (dedupe && alreadyImportedModules[item[0]]) {\n        // eslint-disable-next-line no-continue\n        continue;\n      }\n\n      if (mediaQuery) {\n        if (!item[2]) {\n          item[2] = mediaQuery;\n        } else {\n          item[2] = \"\".concat(mediaQuery, \" and \").concat(item[2]);\n        }\n      }\n\n      list.push(item);\n    }\n  };\n\n  return list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n  var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring\n\n  var cssMapping = item[3];\n\n  if (!cssMapping) {\n    return content;\n  }\n\n  if (useSourceMap && typeof btoa === 'function') {\n    var sourceMapping = toComment(cssMapping);\n    var sourceURLs = cssMapping.sources.map(function (source) {\n      return \"/*# sourceURL=\".concat(cssMapping.sourceRoot || '').concat(source, \" */\");\n    });\n    return [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n  }\n\n  return [content].join('\\n');\n} // Adapted from convert-source-map (MIT)\n\n\nfunction toComment(sourceMap) {\n  // eslint-disable-next-line no-undef\n  var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n  var data = \"sourceMappingURL=data:application/json;charset=utf-8;base64,\".concat(base64);\n  return \"/*# \".concat(data, \" */\");\n}//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvY3NzLWxvYWRlci9kaXN0L3J1bnRpbWUvYXBpLmpzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vQ29kZVBlblZ1ZUNvbXBvbmVudC8uL25vZGVfbW9kdWxlcy9jc3MtbG9hZGVyL2Rpc3QvcnVudGltZS9hcGkuanM/MjRmYiJdLCJzb3VyY2VzQ29udGVudCI6WyJcInVzZSBzdHJpY3RcIjtcblxuLypcbiAgTUlUIExpY2Vuc2UgaHR0cDovL3d3dy5vcGVuc291cmNlLm9yZy9saWNlbnNlcy9taXQtbGljZW5zZS5waHBcbiAgQXV0aG9yIFRvYmlhcyBLb3BwZXJzIEBzb2tyYVxuKi9cbi8vIGNzcyBiYXNlIGNvZGUsIGluamVjdGVkIGJ5IHRoZSBjc3MtbG9hZGVyXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgZnVuYy1uYW1lc1xubW9kdWxlLmV4cG9ydHMgPSBmdW5jdGlvbiAodXNlU291cmNlTWFwKSB7XG4gIHZhciBsaXN0ID0gW107IC8vIHJldHVybiB0aGUgbGlzdCBvZiBtb2R1bGVzIGFzIGNzcyBzdHJpbmdcblxuICBsaXN0LnRvU3RyaW5nID0gZnVuY3Rpb24gdG9TdHJpbmcoKSB7XG4gICAgcmV0dXJuIHRoaXMubWFwKGZ1bmN0aW9uIChpdGVtKSB7XG4gICAgICB2YXIgY29udGVudCA9IGNzc1dpdGhNYXBwaW5nVG9TdHJpbmcoaXRlbSwgdXNlU291cmNlTWFwKTtcblxuICAgICAgaWYgKGl0ZW1bMl0pIHtcbiAgICAgICAgcmV0dXJuIFwiQG1lZGlhIFwiLmNvbmNhdChpdGVtWzJdLCBcIiB7XCIpLmNvbmNhdChjb250ZW50LCBcIn1cIik7XG4gICAgICB9XG5cbiAgICAgIHJldHVybiBjb250ZW50O1xuICAgIH0pLmpvaW4oJycpO1xuICB9OyAvLyBpbXBvcnQgYSBsaXN0IG9mIG1vZHVsZXMgaW50byB0aGUgbGlzdFxuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgZnVuYy1uYW1lc1xuXG5cbiAgbGlzdC5pID0gZnVuY3Rpb24gKG1vZHVsZXMsIG1lZGlhUXVlcnksIGRlZHVwZSkge1xuICAgIGlmICh0eXBlb2YgbW9kdWxlcyA9PT0gJ3N0cmluZycpIHtcbiAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1wYXJhbS1yZWFzc2lnblxuICAgICAgbW9kdWxlcyA9IFtbbnVsbCwgbW9kdWxlcywgJyddXTtcbiAgICB9XG5cbiAgICB2YXIgYWxyZWFkeUltcG9ydGVkTW9kdWxlcyA9IHt9O1xuXG4gICAgaWYgKGRlZHVwZSkge1xuICAgICAgZm9yICh2YXIgaSA9IDA7IGkgPCB0aGlzLmxlbmd0aDsgaSsrKSB7XG4gICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBwcmVmZXItZGVzdHJ1Y3R1cmluZ1xuICAgICAgICB2YXIgaWQgPSB0aGlzW2ldWzBdO1xuXG4gICAgICAgIGlmIChpZCAhPSBudWxsKSB7XG4gICAgICAgICAgYWxyZWFkeUltcG9ydGVkTW9kdWxlc1tpZF0gPSB0cnVlO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgZm9yICh2YXIgX2kgPSAwOyBfaSA8IG1vZHVsZXMubGVuZ3RoOyBfaSsrKSB7XG4gICAgICB2YXIgaXRlbSA9IFtdLmNvbmNhdChtb2R1bGVzW19pXSk7XG5cbiAgICAgIGlmIChkZWR1cGUgJiYgYWxyZWFkeUltcG9ydGVkTW9kdWxlc1tpdGVtWzBdXSkge1xuICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tY29udGludWVcbiAgICAgICAgY29udGludWU7XG4gICAgICB9XG5cbiAgICAgIGlmIChtZWRpYVF1ZXJ5KSB7XG4gICAgICAgIGlmICghaXRlbVsyXSkge1xuICAgICAgICAgIGl0ZW1bMl0gPSBtZWRpYVF1ZXJ5O1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIGl0ZW1bMl0gPSBcIlwiLmNvbmNhdChtZWRpYVF1ZXJ5LCBcIiBhbmQgXCIpLmNvbmNhdChpdGVtWzJdKTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICBsaXN0LnB1c2goaXRlbSk7XG4gICAgfVxuICB9O1xuXG4gIHJldHVybiBsaXN0O1xufTtcblxuZnVuY3Rpb24gY3NzV2l0aE1hcHBpbmdUb1N0cmluZyhpdGVtLCB1c2VTb3VyY2VNYXApIHtcbiAgdmFyIGNvbnRlbnQgPSBpdGVtWzFdIHx8ICcnOyAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgcHJlZmVyLWRlc3RydWN0dXJpbmdcblxuICB2YXIgY3NzTWFwcGluZyA9IGl0ZW1bM107XG5cbiAgaWYgKCFjc3NNYXBwaW5nKSB7XG4gICAgcmV0dXJuIGNvbnRlbnQ7XG4gIH1cblxuICBpZiAodXNlU291cmNlTWFwICYmIHR5cGVvZiBidG9hID09PSAnZnVuY3Rpb24nKSB7XG4gICAgdmFyIHNvdXJjZU1hcHBpbmcgPSB0b0NvbW1lbnQoY3NzTWFwcGluZyk7XG4gICAgdmFyIHNvdXJjZVVSTHMgPSBjc3NNYXBwaW5nLnNvdXJjZXMubWFwKGZ1bmN0aW9uIChzb3VyY2UpIHtcbiAgICAgIHJldHVybiBcIi8qIyBzb3VyY2VVUkw9XCIuY29uY2F0KGNzc01hcHBpbmcuc291cmNlUm9vdCB8fCAnJykuY29uY2F0KHNvdXJjZSwgXCIgKi9cIik7XG4gICAgfSk7XG4gICAgcmV0dXJuIFtjb250ZW50XS5jb25jYXQoc291cmNlVVJMcykuY29uY2F0KFtzb3VyY2VNYXBwaW5nXSkuam9pbignXFxuJyk7XG4gIH1cblxuICByZXR1cm4gW2NvbnRlbnRdLmpvaW4oJ1xcbicpO1xufSAvLyBBZGFwdGVkIGZyb20gY29udmVydC1zb3VyY2UtbWFwIChNSVQpXG5cblxuZnVuY3Rpb24gdG9Db21tZW50KHNvdXJjZU1hcCkge1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tdW5kZWZcbiAgdmFyIGJhc2U2NCA9IGJ0b2EodW5lc2NhcGUoZW5jb2RlVVJJQ29tcG9uZW50KEpTT04uc3RyaW5naWZ5KHNvdXJjZU1hcCkpKSk7XG4gIHZhciBkYXRhID0gXCJzb3VyY2VNYXBwaW5nVVJMPWRhdGE6YXBwbGljYXRpb24vanNvbjtjaGFyc2V0PXV0Zi04O2Jhc2U2NCxcIi5jb25jYXQoYmFzZTY0KTtcbiAgcmV0dXJuIFwiLyojIFwiLmNvbmNhdChkYXRhLCBcIiAqL1wiKTtcbn0iXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./node_modules/css-loader/dist/runtime/api.js\n");
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/index.js?!../../tmp/codepen/vuejs/src/pen.vue?vue&type=script&lang=js&":
+/*!*****************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib??vue-loader-options!/tmp/codepen/vuejs/src/pen.vue?vue&type=script&lang=js& ***!
+  \*****************************************************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  data() {\n    return {\n      tab: 1\n    };\n  },\n  methods: {\n    changeTab(num) {\n      this.tab = num;\n    },\n    bounceBall() {\n      let tl = gsap.timeline();\n      tl.to(\"#sphere\", {\n        cy: \"625\",\n        duration: 0.25\n      }).to(\"#sphere\", { cy: \"125\", duration: 0.25 }, \">0.3\");\n    }\n  }\n});\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvdnVlLWxvYWRlci9saWIvaW5kZXguanM/IS4uLy4uL3RtcC9jb2RlcGVuL3Z1ZWpzL3NyYy9wZW4udnVlP3Z1ZSZ0eXBlPXNjcmlwdCZsYW5nPWpzJi5qcyIsInNvdXJjZXMiOlsid2VicGFjazovL0NvZGVQZW5WdWVDb21wb25lbnQvcGVuLnZ1ZT83OTMzIl0sInNvdXJjZXNDb250ZW50IjpbIjx0ZW1wbGF0ZT5cbiAgPHNlY3Rpb24gY2xhc3M9XCJwaG9uZVwiPlxuICAgIDxkaXYgY2xhc3M9XCJoZWFkZXJcIj5cbiAgICAgIDxhcnRpY2xlIGNsYXNzPVwiaGVhZC13clwiPlxuICAgICAgICA8ZGl2PlxuICAgICAgICAgIDxzdmcgdmlld0JveD1cIjAgMCA1MTIgNTEyXCI+XG4gICAgICAgICAgICA8ZyB0cmFuc2Zvcm09XCJ0cmFuc2xhdGUoMCwyMylcIj5cbiAgICAgICAgICAgICAgPGNpcmNsZSBjeD1cIjI1NS4wMDFcIiBjeT1cIjQzMy41XCIgcj1cIjMzXCIgZmlsbD1cIiMwMDBcIiAvPlxuICAgICAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgICAgIGQ9XCJNNTA2LjYzMiwxNTQuODY0QzQ0MC45MDIsODQuMzQxLDM1MS44OTUsNDUuNTAxLDI1NS45OTcsNDUuNUMxNjAuMTA3LDQ1LjUwMSw3MS4xLDg0LjM0MSw1LjM2OSwxNTQuODY0YzcuNTMsOC4wOC03LjA4NSwyMC43MzYsMC45OTUsMjguMjY3YzguMDgxLDcuNTMsMjAuNzM2LDcuMDg2LDI4LjI2Ny0wLjk5NUM5Mi43MTEsMTE5LjgyLDE3MS4zMjcsODUuNTAxLDI1Ni4wMDQsODUuNWM4NC42NywwLjAwMSwxNjMuMjg2LDM0LjMyLDIyMS4zNjYsOTYuNjM2YzMuOTM5LDQuMjI2LDkuMjgsNi4zNjQsMTQuNjM1LDYuMzY0YzQuODgzLDAsOS43NzgtMS43NzgsMTMuNjMyLTUuMzY5QzUxMy43MTcsMTc1LjU5OSw1MTQuMTYzLDE2Mi45NDQsNTA2LjYzMiwxNTQuODY0elwiXG4gICAgICAgICAgICAgICAgZmlsbD1cIiMwMDBcIlxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgICAgIGQ9XCJNNDMzLjE5NCwyMzcuNDU4Yy00OC41ODctNDguOTU0LTExMS41MTYtNzUuOTEzLTE3Ny4xOTYtNzUuOTExYy02NS42OTUsMC4wMDEtMTI4LjYyNSwyNi45NjEtMTc3LjE5Nyw3NS45MTNjLTcuNzgsNy44NDEtNy43MzEsMjAuNTA0LDAuMTEsMjguMjg0YzcuODQxLDcuNzgsMjAuNTA0LDcuNzMxLDI4LjI4NC0wLjExYzQxLjAwNS00MS4zMjYsOTMuODUxLTY0LjA4NiwxNDguODAzLTY0LjA4N2M1NC45MzgtMC4wMDIsMTA3Ljc4NCwyMi43NTksMTQ4LjgwNCw2NC4wODljMy45MSwzLjkzOSw5LjA1Miw1LjkxMSwxNC4xOTYsNS45MTFjNS4wOTIsMCwxMC4xODgtMS45MzQsMTQuMDktNS44MDVDNDQwLjkyNywyNTcuOTYxLDQ0MC45NzUsMjQ1LjI5OCw0MzMuMTk0LDIzNy40NTh6XCJcbiAgICAgICAgICAgICAgICBmaWxsPVwiIzAwMFwiXG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICAgICAgZD1cIk0zNTMuMTUxLDMyMC4yOTJjLTI2LjAyLTI1Ljc3OS02My4zMTctNDEuNzkyLTk3LjMzOS00MS43OTJjLTAuMDA0LDAtMC4wMTEsMC0wLjAxNSwwaC0xLjQ0MWMtMC4wMDYsMC0wLjAwOSwwLTAuMDE1LDBjLTM0LjAyMywwLTcxLjMyMywxNi4wMTQtOTcuMzQyLDQxLjc5MmMtNy44NDYsNy43NzQtNy45MDUsMjAuNDM3LTAuMTMxLDI4LjI4NGMzLjkxMSwzLjk0Nyw5LjA1OSw1LjkyNCwxNC4yMDgsNS45MjRjNS4wODcsMCwxMC4xNzYtMS45MjksMTQuMDc1LTUuNzkyYzE4LjUyMy0xOC4zNTIsNDUuNjgtMzAuMjA4LDY5LjE5Mi0zMC4yMDhjMC4wMDMsMCwwLjAwNywwLDAuMDEsMGgxLjQ0N2MwLjAwNCwwLDAuMDA1LDAsMC4wMDksMGMyMy41MDksMCw1MC42NjgsMTEuODU3LDY5LjE4OSwzMC4yMDhjNy44NDYsNy43NzMsMjAuNTExLDcuNzE3LDI4LjI4NC0wLjEzMkMzNjEuMDU3LDM0MC43MywzNjAuOTk4LDMyOC4wNjYsMzUzLjE1MSwzMjAuMjkyelwiXG4gICAgICAgICAgICAgICAgZmlsbD1cIiMwMDBcIlxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgPC9nPlxuICAgICAgICAgIDwvc3ZnPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdj5cbiAgICAgICAgICA8c3ZnIHZpZXdCb3g9XCIwIDAgNTEyIDUxMlwiPlxuICAgICAgICAgICAgPGcgc3Ryb2tlPVwiIzAwMFwiIHN0cm9rZS13aWR0aD1cIjUwXCI+XG4gICAgICAgICAgICAgIDxsaW5lIHgxPVwiMjBcIiB5MT1cIjM1MFwiIHgyPVwiMjBcIiB5Mj1cIjQ5NVwiIC8+XG4gICAgICAgICAgICAgIDxsaW5lIHgxPVwiMTQwXCIgeTE9XCIyNTBcIiB4Mj1cIjE0MFwiIHkyPVwiNDk1XCIgLz5cbiAgICAgICAgICAgICAgPGxpbmUgeDE9XCIyNjBcIiB5MT1cIjE1MFwiIHgyPVwiMjYwXCIgeTI9XCI0OTVcIiAvPlxuICAgICAgICAgICAgICA8bGluZSB4MT1cIjM4MFwiIHkxPVwiNTBcIiB4Mj1cIjM4MFwiIHkyPVwiNDk1XCIgLz5cbiAgICAgICAgICAgIDwvZz5cbiAgICAgICAgICA8L3N2Zz5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXY+XG4gICAgICAgICAgPHN2ZyB2aWV3Qm94PVwiMCAwIDEwMCA2MFwiPlxuICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgZD1cIk05MS41LDM5aC0wLjZ2LThjMC0yLjItMS44LTQtMy45LTRIOWMtMi4yLDAtNCwxLjgtNCw0VjY5YzAsMi4yLDEuOCw0LDQsNGg3OGMyLjIsMCwzLjktMS44LDMuOS00di04aDAuNmMyLDAsMy41LTEuNywzLjUtMy44VjQyLjhDOTUsNDAuNyw5My40LDM5LDkxLjUsMzl6IE05MSw1N2gtNC4xTDg3LDY5TDksNjlsMC0zOGw3OCwwdjEySDkxTDkxLDU3ek02NC45LDM0LjVIODN2MzFINjQuOUg0OS4xaC0yLjNINDNIMjguOEgyNkgxM3YtMzFoMTNoMi44SDQzaDMuOWgyLjNINjQuOXpcIlxuICAgICAgICAgICAgICB0cmFuc2Zvcm09XCJ0cmFuc2xhdGUoMCAtMjUpXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9zdmc+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9hcnRpY2xlPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJjb250ZW50XCI+XG4gICAgICA8YXJ0aWNsZSBjbGFzcz1cIm1haW4td3JcIj5cbiAgICAgICAgPHRyYW5zaXRpb24gbmFtZT1cInNsaWRlXCIgbW9kZT1cIm91dC1pblwiIHYtb246bGVhdmU9XCJib3VuY2VCYWxsXCI+XG4gICAgICAgICAgPGRpdiBrZXk9XCIxXCIgdi1pZj1cInRhYiA9PSAxXCI+XG4gICAgICAgICAgICA8aW1nXG4gICAgICAgICAgICAgIHNyYz1cImh0dHBzOi8vdmVjdG9yLWlsbHVzdHJhdGlvbnMuczMuZXUtd2VzdC0zLmFtYXpvbmF3cy5jb20vdW5kcmF3LTEuc3ZnXCJcbiAgICAgICAgICAgICAgYWx0PVwiaWxsdXN0cmF0aW9uXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICA8ZGl2IGtleT1cIjJcIiB2LWVsc2UtaWY9XCJ0YWIgPT0gMlwiPlxuICAgICAgICAgICAgPGltZ1xuICAgICAgICAgICAgICBzcmM9XCJodHRwczovL3ZlY3Rvci1pbGx1c3RyYXRpb25zLnMzLmV1LXdlc3QtMy5hbWF6b25hd3MuY29tL3VuZHJhdy0yLnN2Z1wiXG4gICAgICAgICAgICAgIGFsdD1cImlsbHVzdHJhdGlvblwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxkaXYga2V5PVwiM1wiIHYtZWxzZS1pZj1cInRhYiA9PSAzXCI+XG4gICAgICAgICAgICA8aW1nXG4gICAgICAgICAgICAgIHNyYz1cImh0dHBzOi8vdmVjdG9yLWlsbHVzdHJhdGlvbnMuczMuZXUtd2VzdC0zLmFtYXpvbmF3cy5jb20vdW5kcmF3LTMuc3ZnXCJcbiAgICAgICAgICAgICAgYWx0PVwiaWxsdXN0cmF0aW9uXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBrZXk9XCI0XCIgdi1lbHNlLWlmPVwidGFiID09IDRcIj5cbiAgICAgICAgICAgIDxpbWdcbiAgICAgICAgICAgICAgc3JjPVwiaHR0cHM6Ly92ZWN0b3ItaWxsdXN0cmF0aW9ucy5zMy5ldS13ZXN0LTMuYW1hem9uYXdzLmNvbS91bmRyYXctNC5zdmdcIlxuICAgICAgICAgICAgICBhbHQ9XCJpbGx1c3RyYXRpb25cIlxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8ZGl2IGtleT1cIjVcIiB2LWVsc2U+XG4gICAgICAgICAgICA8aW1nXG4gICAgICAgICAgICAgIHNyYz1cImh0dHBzOi8vdmVjdG9yLWlsbHVzdHJhdGlvbnMuczMuZXUtd2VzdC0zLmFtYXpvbmF3cy5jb20vdW5kcmF3LTUuc3ZnXCJcbiAgICAgICAgICAgICAgYWx0PVwiaWxsdXN0cmF0aW9uXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvdHJhbnNpdGlvbj5cbiAgICAgIDwvYXJ0aWNsZT5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwidGFic1wiPlxuICAgICAgPG5hdj5cbiAgICAgICAgPHVsIGNsYXNzPVwidGFiLW5hdlwiPlxuICAgICAgICAgIDxsaSB2LWJpbmQ6c3R5bGU9XCJbdGFiID09IDEgPyB7IG9wYWNpdHk6ICcwJyB9IDogeyBvcGFjaXR5OiAnMScgfV1cIj5cbiAgICAgICAgICAgIDxzdmcgdmlld0JveD1cIjAgMCAxMDAgMTAwXCIgQGNsaWNrPVwiY2hhbmdlVGFiKDEpXCI+XG4gICAgICAgICAgICAgIDxnXG4gICAgICAgICAgICAgICAgZmlsbD1cInJnYmEoMCwwLDAsMC41KVwiXG4gICAgICAgICAgICAgICAgc3Ryb2tlPVwicmdiYSgwLDAsMCwwLjI1KVwiXG4gICAgICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPVwiNVwiXG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgICAgICAgZD1cIk0zNy4zLDFINy45QzQuMSwxLDEsNC4xLDEsNy45djI5LjRjMCwzLjgsMy4xLDYuOSw2LjksNi45aDI5LjRjMy44LDAsNi45LTMuMSw2LjktNi45VjcuOUM0NC4zLDQuMSw0MS4yLDEsMzcuMywxek0zOS45LDM3LjRjMCwxLjQtMS4xLDIuNi0yLjYsMi42SDcuOWMtMS40LDAtMi42LTEuMS0yLjYtMi42VjcuOWMwLTEuNCwxLjEtMi42LDIuNi0yLjZoMjkuNGMxLjQsMCwyLjYsMS4xLDIuNiwyLjZWMzcuNHpcIlxuICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgICAgIGQ9XCJNMzcuMyw1NS4ySDcuOWMtMy44LDAtNi45LDMuMS02LjksNi45djI5LjRjMCwzLjgsMy4xLDYuOSw2LjksNi45aDI5LjRjMy44LDAsNi45LTMuMSw2LjktNi45VjYyLjJDNDQuMyw1OC40LDQxLjIsNTUuMiwzNy4zLDU1LjJ6TTM5LjksOTEuNmMwLDEuNC0xLjEsMi42LTIuNiwyLjZINy45Yy0xLjQsMC0yLjYtMS4xLTIuNi0yLjZWNjIuMmMwLTEuNCwxLjEtMi42LDIuNi0yLjZoMjkuNGMxLjQsMCwyLjYsMS4xLDIuNiwyLjZWOTEuNnpcIlxuICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgICAgIGQ9XCJNOTIuMSwxSDYyLjZjLTMuOCwwLTYuOSwzLjEtNi45LDYuOXYyOS40YzAsMy44LDMuMSw2LjksNi45LDYuOWgyOS40YzMuOCwwLDYuOS0zLjEsNi45LTYuOVY3LjlDOTksNC4xLDk1LjksMSw5Mi4xLDF6TTk0LjYsMzcuNGMwLDEuNC0xLjEsMi42LTIuNiwyLjZINjIuNmMtMS40LDAtMi42LTEuMS0yLjYtMi42VjcuOWMwLTEuNCwxLjEtMi42LDIuNi0yLjZoMjkuNGMxLjQsMCwyLjYsMS4xLDIuNiwyLjZWMzcuNHpcIlxuICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgICAgIGQ9XCJNOTIuMSw1NS4ySDYyLjZjLTMuOCwwLTYuOSwzLjEtNi45LDYuOXYyOS40YzAsMy44LDMuMSw2LjksNi45LDYuOWgyOS40YzMuOCwwLDYuOS0zLjEsNi45LTYuOVY2Mi4yQzk5LDU4LjQsOTUuOSw1NS4yLDkyLjEsNTUuMnpNOTQuNiw5MS42YzAsMS40LTEuMSwyLjYtMi42LDIuNkg2Mi42Yy0xLjQsMC0yLjYtMS4xLTIuNi0yLjZWNjIuMmMwLTEuNCwxLjEtMi42LDIuNi0yLjZoMjkuNGMxLjQsMCwyLjYsMS4xLDIuNiwyLjZWOTEuNnpcIlxuICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgIDwvZz5cbiAgICAgICAgICAgIDwvc3ZnPlxuICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgPGxpIHYtYmluZDpzdHlsZT1cIlt0YWIgPT0gMiA/IHsgb3BhY2l0eTogJzAnIH0gOiB7IG9wYWNpdHk6ICcxJyB9XVwiPlxuICAgICAgICAgICAgPHN2ZyB2aWV3Qm94PVwiMCAwIDEwMCAxMDBcIiBAY2xpY2s9XCJjaGFuZ2VUYWIoMilcIj5cbiAgICAgICAgICAgICAgPGcgZmlsbD1cInJnYmEoMCwwLDAsMC41KVwiIHRyYW5zZm9ybT1cInRyYW5zbGF0ZSgwIC0xMClzY2FsZSgxLjE1KVwiPlxuICAgICAgICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICAgICAgICBkPVwiTTM3LjY5MywyNC4xMUg4OWMzLjMxMywwLDYtMi42ODUsNi02YzAtMy4zMTItMi42ODgtNi02LTZIMzcuNjkzYy0zLjMxMywwLTYsMi42ODctNiw2QzMxLjY5MywyMS40MjQsMzQuMzgsMjQuMTEsMzcuNjkzLDI0LjExelwiXG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgICAgICAgZD1cIk04OSw3NS44OTFIMzcuNjkzYy0zLjMxMywwLTYsMi42ODctNiw2czIuNjg3LDYsNiw2SDg5YzMuMzEzLDAsNi0yLjY4Nyw2LTZDOTUsNzguNTc4LDkyLjMxMyw3NS44OTEsODksNzUuODkxelwiXG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgICAgICAgZD1cIk04OSw0NC4wMDFIMzcuNjkzYy0zLjMxMywwLTYsMi42ODYtNiw2YzAsMy4zMTIsMi42ODcsNiw2LDZIODljMy4zMTMsMCw2LTIuNjg4LDYtNkM5NSw0Ni42ODcsOTIuMzEzLDQ0LjAwMSw4OSw0NC4wMDF6XCJcbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgIDxjaXJjbGUgY3g9XCIxMy41MDRcIiBjeT1cIjE4LjExXCIgcj1cIjguNTA0XCIgLz5cbiAgICAgICAgICAgICAgICA8Y2lyY2xlIGN4PVwiMTMuNTA0XCIgY3k9XCI1MC4wMDFcIiByPVwiOC41MDRcIiAvPlxuICAgICAgICAgICAgICAgIDxjaXJjbGUgY3g9XCIxMy41MDRcIiBjeT1cIjgxLjg5XCIgcj1cIjguNTA0XCIgLz5cbiAgICAgICAgICAgICAgPC9nPlxuICAgICAgICAgICAgPC9zdmc+XG4gICAgICAgICAgPC9saT5cbiAgICAgICAgICA8bGkgdi1iaW5kOnN0eWxlPVwiW3RhYiA9PSAzID8geyBvcGFjaXR5OiAnMCcgfSA6IHsgb3BhY2l0eTogJzEnIH1dXCI+XG4gICAgICAgICAgICA8c3ZnIHZpZXdCb3g9XCIwIDAgMTAwIDEwMFwiIEBjbGljaz1cImNoYW5nZVRhYigzKVwiPlxuICAgICAgICAgICAgICA8ZyBmaWxsPVwicmdiYSgwLDAsMCwwLjUpXCI+XG4gICAgICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgICAgIGQ9XCJNMjcuOSw1Mi42YzEsMSwyLjQsMS42LDMuOCwxLjZjMS40LDAsMi43LTAuNSwzLjgtMS42YzIuMS0yLjEsMi4xLTUuNSwwLTcuNUwyNCwzMy43aDY0LjljMi45LDAsNS4zLTIuNCw1LjMtNS4zUzkxLjgsMjMsODguOSwyM0gyNGwxMS40LTExLjRjMi4xLTIuMSwyLjEtNS41LDAtNy41Yy0yLjEtMi4xLTUuNS0yLjEtNy41LDBMNy4zLDI0LjZjLTIuMSwyLjEtMi4xLDUuNSwwLDcuNUwyNy45LDUyLjZ6XCJcbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICAgICAgICBkPVwiTTcyLjEsNDcuNGMtMi4xLTIuMS01LjUtMi4xLTcuNSwwYy0yLjEsMi4xLTIuMSw1LjUsMCw3LjVMNzYsNjYuM0gxMS4xYy0yLjksMC01LjMsMi40LTUuMyw1LjNTOC4yLDc3LDExLjEsNzdINzZMNjQuNiw4OC40Yy0yLjEsMi4xLTIuMSw1LjUsMCw3LjVjMSwxLDIuNCwxLjYsMy44LDEuNnMyLjctMC41LDMuOC0xLjZsMjAuNS0yMC41YzIuMS0yLjEsMi4xLTUuNSwwLTcuNUw3Mi4xLDQ3LjR6XCJcbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICA8L2c+XG4gICAgICAgICAgICA8L3N2Zz5cbiAgICAgICAgICA8L2xpPlxuICAgICAgICAgIDxsaSB2LWJpbmQ6c3R5bGU9XCJbdGFiID09IDQgPyB7IG9wYWNpdHk6ICcwJyB9IDogeyBvcGFjaXR5OiAnMScgfV1cIj5cbiAgICAgICAgICAgIDxzdmcgdmlld0JveD1cIjAgMCAxMDAgMTAwXCIgQGNsaWNrPVwiY2hhbmdlVGFiKDQpXCI+XG4gICAgICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICAgICAgZmlsbD1cInJnYmEoMCwwLDAsMC41KVwiXG4gICAgICAgICAgICAgICAgc3Ryb2tlPVwicmdiYSgwLDAsMCwwLjUpXCJcbiAgICAgICAgICAgICAgICBzdHJva2Utd2lkdGg9XCIyXCJcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm09XCJ0cmFuc2xhdGUoLTE3IC00MClzY2FsZSgxLjQgMS44KVwiXG4gICAgICAgICAgICAgICAgZD1cIk03OC4yMTksNzUuOTZIMjEuNzhjLTIuMjIyLDAtNC4wMy0xLjgwOC00LjAzLTQuMDNWNDIuNzk1YzAtMi4yMjIsMS44MDgtNC4wMyw0LjAzLTQuMDNoNTYuNDM4YzIuMjIzLDAsNC4wMzEsMS44MDgsNC4wMzEsNC4wM1Y3MS45M0M4Mi4yNSw3NC4xNTIsODAuNDQxLDc1Ljk2LDc4LjIxOSw3NS45NnogTTIxLjc4LDQyLjI2NmMtMC4yODgsMC0wLjUzLDAuMjQzLTAuNTMsMC41M1Y3MS45M2MwLDAuMjg3LDAuMjQzLDAuNTMsMC41MywwLjUzaDU2LjQzOGMwLjI4OCwwLDAuNTMxLTAuMjQzLDAuNTMxLTAuNTNWNDIuNzk1YzAtMC4yODctMC4yNDMtMC41My0wLjUzMS0wLjUzSDIxLjc4eiBNNzUuMTAyLDMzLjE1MyAgYzAtMC45NjYtMC43ODMtMS43NS0xLjc1LTEuNzVIMjYuNjQ4Yy0wLjk2NiwwLTEuNzUsMC43ODQtMS43NSwxLjc1czAuNzg0LDEuNzUsMS43NSwxLjc1aDQ2LjcwM0M3NC4zMTgsMzQuOTAzLDc1LjEwMiwzNC4xMTksNzUuMTAyLDMzLjE1M3pNNjkuMzk0LDI1Ljc5MWMwLTAuOTY2LTAuNzgzLTEuNzUtMS43NS0xLjc1SDMyLjM1NmMtMC45NjYsMC0xLjc1LDAuNzg0LTEuNzUsMS43NSAgczAuNzg0LDEuNzUsMS43NSwxLjc1aDM1LjI4OEM2OC42MSwyNy41NDEsNjkuMzk0LDI2Ljc1Nyw2OS4zOTQsMjUuNzkxelwiXG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8L3N2Zz5cbiAgICAgICAgICA8L2xpPlxuICAgICAgICAgIDxsaSB2LWJpbmQ6c3R5bGU9XCJbdGFiID09IDUgPyB7IG9wYWNpdHk6ICcwJyB9IDogeyBvcGFjaXR5OiAnMScgfV1cIj5cbiAgICAgICAgICAgIDxzdmcgdmlld0JveD1cIjAgMCAxMDAgMTAwXCIgQGNsaWNrPVwiY2hhbmdlVGFiKDUpXCI+XG4gICAgICAgICAgICAgIDxnXG4gICAgICAgICAgICAgICAgZmlsbD1cInJnYmEoMCwwLDAsMC41KVwiXG4gICAgICAgICAgICAgICAgc3Ryb2tlPVwicmdiYSgwLDAsMCwwLjUpXCJcbiAgICAgICAgICAgICAgICBzdHJva2Utd2lkdGg9XCI1XCJcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm09XCJ0cmFuc2xhdGUoLTcgLTEwKXNjYWxlKDEuMTgpXCJcbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICAgICAgICBkPVwiTTcwLjUsMzAuNUM3MC41LDE5LjE5NjI4OTEsNjEuMzAzNzEwOSwxMCw1MCwxMHMtMjAuNSw5LjE5NjI4OTEtMjAuNSwyMC41UzM4LjY5NjI4OTEsNTEsNTAsNTFTNzAuNSw0MS44MDM3MTA5LDcwLjUsMzAuNXpNMzEuNSwzMC41QzMxLjUsMjAuMjk4ODI4MSwzOS43OTg4MjgxLDEyLDUwLDEyczE4LjUsOC4yOTg4MjgxLDE4LjUsMTguNVM2MC4yMDExNzE5LDQ5LDUwLDQ5UzMxLjUsNDAuNzAxMTcxOSwzMS41LDMwLjV6XCJcbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICAgICAgICBkPVwiTTYwLjQxMjU5NzcsNTYuODYzMjgxMkgzOS41ODc0MDIzQzI2LjAyOTc4NTIsNTYuODYzMjgxMiwxNSw2Ny44OTM1NTQ3LDE1LDgxLjQ1MTE3MTlDMTUsODYuMTY1MDM5MSwxOC44MzQ5NjA5LDkwLDIzLjU0ODgyODEsOTBoNTIuOTAyMzQzOEM4MS4xNjUwMzkxLDkwLDg1LDg2LjE2NTAzOTEsODUsODEuNDUxMTcxOUM4NSw2Ny44OTM1NTQ3LDczLjk3MDIxNDgsNTYuODYzMjgxMiw2MC40MTI1OTc3LDU2Ljg2MzI4MTJ6TTc2LjQ1MTE3MTksODhIMjMuNTQ4ODI4MUMxOS45Mzc5ODgzLDg4LDE3LDg1LjA2MjUsMTcsODEuNDUxMTcxOWMwLTEyLjQ1NTA3ODEsMTAuMTMyODEyNS0yMi41ODc4OTA2LDIyLjU4NzQwMjMtMjIuNTg3ODkwNmgyMC44MjUxOTUzQzcyLjg2NzE4NzUsNTguODYzMjgxMiw4Myw2OC45OTYwOTM4LDgzLDgxLjQ1MTE3MTlDODMsODUuMDYyNSw4MC4wNjIwMTE3LDg4LDc2LjQ1MTE3MTksODh6XCJcbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICA8L2c+XG4gICAgICAgICAgICA8L3N2Zz5cbiAgICAgICAgICA8L2xpPlxuICAgICAgICA8L3VsPlxuICAgICAgPC9uYXY+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwidGFiLWN0clwiXG4gICAgICAgIHYtYmluZDpzdHlsZT1cIltcbiAgICAgICAgICB0YWIgPT0gMVxuICAgICAgICAgICAgPyB7IGxlZnQ6ICcxJScgfVxuICAgICAgICAgICAgOiB0YWIgPT0gMlxuICAgICAgICAgICAgPyB7IGxlZnQ6ICcxOS41JScgfVxuICAgICAgICAgICAgOiB0YWIgPT0gM1xuICAgICAgICAgICAgPyB7IGxlZnQ6ICczOCUnIH1cbiAgICAgICAgICAgIDogdGFiID09IDRcbiAgICAgICAgICAgID8geyBsZWZ0OiAnNTYuNSUnIH1cbiAgICAgICAgICAgIDogdGFiID09IDVcbiAgICAgICAgICAgID8geyBsZWZ0OiAnNzUlJyB9XG4gICAgICAgICAgICA6IG51bGxcbiAgICAgICAgXVwiXG4gICAgICA+XG4gICAgICAgIDxzdmcgdmlld0JveD1cIjAgMCAxMTAwIDYwMFwiPlxuICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICBkPVwiTSAwIDAgQyAxNTAgMCAxNTAgMzUwIDMwMCA0NTAgQyA0NTAgNTUwIDY1MCA1NTAgODAwIDQ1MCBDIDk1MCAzNTAgOTUwIDAgMTEwMCAwIFwiXG4gICAgICAgICAgICBmaWxsPVwibGlnaHRncmV5XCJcbiAgICAgICAgICAvPlxuICAgICAgICAgIDxjaXJjbGUgaWQ9XCJzcGhlcmVcIiBjeD1cIjU1MFwiIGN5PVwiMTI1XCIgcj1cIjMwMFwiIGZpbGw9XCIjZjNmOGZlXCIgLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9zZWN0aW9uPlxuPC90ZW1wbGF0ZT5cbjxzY3JpcHQ+XG5leHBvcnQgZGVmYXVsdCB7XG4gIGRhdGEoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIHRhYjogMVxuICAgIH07XG4gIH0sXG4gIG1ldGhvZHM6IHtcbiAgICBjaGFuZ2VUYWIobnVtKSB7XG4gICAgICB0aGlzLnRhYiA9IG51bTtcbiAgICB9LFxuICAgIGJvdW5jZUJhbGwoKSB7XG4gICAgICBsZXQgdGwgPSBnc2FwLnRpbWVsaW5lKCk7XG4gICAgICB0bC50byhcIiNzcGhlcmVcIiwge1xuICAgICAgICBjeTogXCI2MjVcIixcbiAgICAgICAgZHVyYXRpb246IDAuMjVcbiAgICAgIH0pLnRvKFwiI3NwaGVyZVwiLCB7IGN5OiBcIjEyNVwiLCBkdXJhdGlvbjogMC4yNSB9LCBcIj4wLjNcIik7XG4gICAgfVxuICB9XG59O1xuPC9zY3JpcHQ+XG5cbjxzdHlsZT5cbiosXG46OmJlZm9yZSxcbjo6YWZ0ZXIge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuYm9keSB7XG4gIGJhY2tncm91bmQ6ICNmM2Y4ZmU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGhlaWdodDogMTAwdmg7XG59XG4ucGhvbmUge1xuICB3aWR0aDogMjV2dztcbiAgbWluLXdpZHRoOiAyMjVweDtcbiAgbWF4LXdpZHRoOiAzMjVweDtcbiAgaGVpZ2h0OiA1MHZ3O1xuICBtaW4taGVpZ2h0OiA0NTBweDtcbiAgbWF4LWhlaWdodDogNjUwcHg7XG4gIG1hcmdpbjogYXV0bztcbiAgYm9yZGVyOiAycHggc29saWQgYmxhY2s7XG4gIGJvcmRlci1yYWRpdXM6IDMwcHg7XG4gIGJhY2tncm91bmQ6ICNmM2Y4ZmU7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxMDAlO1xuICBncmlkLXRlbXBsYXRlLXJvd3M6IDEwJSA4MCUgMTAlO1xuICBvdmVyZmxvdzogaGlkZGVuO1xufVxuXG4uaGVhZGVyIHtcbiAgZ3JpZC1jb2x1bW46IDE7XG4gIGdyaWQtcm93OiAwLzI7XG59XG4uaGVhZC13ciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMwcHg7XG4gIGJvcmRlci10b3AtcmlnaHQtcmFkaXVzOiAzMHB4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG4gIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuICBnYXA6IDMlO1xuICBwYWRkaW5nLXRvcDogMjBweDtcbiAgcGFkZGluZy1sZWZ0OiA4JTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuLmhlYWQtd3IgPiBkaXYge1xuICB3aWR0aDogMi41dnc7XG4gIG1pbi13aWR0aDogMTVweDtcbiAgbWF4LXdpZHRoOiAyMHB4O1xuICBoZWlnaHQ6IDIuNXZ3O1xuICBtaW4taGVpZ2h0OiAxNXB4O1xuICBtYXgtaGVpZ2h0OiAyMHB4O1xufVxuLmhlYWQtd3IgPiBkaXY6bnRoLW9mLXR5cGUoMykge1xuICB3aWR0aDogNHZ3O1xuICBtaW4td2lkdGg6IDMwcHg7XG4gIG1heC13aWR0aDogNDBweDtcbiAgaGVpZ2h0OiAyLjV2dztcbiAgbWluLWhlaWdodDogMTVweDtcbiAgbWF4LWhlaWdodDogMjBweDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICByaWdodDogOCU7XG4gIHRyYW5zZm9ybTogcm90YXRlKDE4MGRlZyk7XG59XG4uaGVhZC13ciA+IGRpdiA+IHN2ZyB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG92ZXJmbG93OiB2aXNpYmxlO1xufVxuLmNvbnRlbnQge1xuICBncmlkLWNvbHVtbjogMTtcbiAgZ3JpZC1yb3c6IDIvMztcbn1cbi5tYWluLXdyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgYmFja2dyb3VuZDogbGlnaHRncmV5O1xufVxuLm1haW4td3IgPiBkaXYge1xuICBtYXJnaW46IGF1dG87XG4gIHdpZHRoOiA4MCU7XG4gIGhlaWdodDogYXV0bztcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuLnNsaWRlLWVudGVyLFxuLnNsaWRlLWxlYXZlLXRvIHtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDEyMCUpO1xufVxuXG4uc2xpZGUtZW50ZXItYWN0aXZlLFxuLnNsaWRlLWxlYXZlLWFjdGl2ZSB7XG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjRzIGVhc2Utb3V0O1xufVxuLm1haW4td3IgPiBkaXYgPiBpbWcge1xuICBtYXgtd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogYXV0bztcbn1cbi50YWJzIHtcbiAgZ3JpZC1jb2x1bW46IDE7XG4gIGdyaWQtcm93OiAzLzQ7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cbm5hdiB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAtMjUlO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuLnRhYi1uYXYge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHBhZGRpbmc6IDA7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtZXZlbmx5O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG4gIGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMwcHg7XG4gIGJvcmRlci1ib3R0b20tcmlnaHQtcmFkaXVzOiAzMHB4O1xufVxuLnRhYi1uYXYgPiBsaSB7XG4gIHdpZHRoOiAyLjV2dztcbiAgbWluLXdpZHRoOiAyMHB4O1xuICBtYXgtd2lkdGg6IDI1cHg7XG4gIGhlaWdodDogMi41dnc7XG4gIG1pbi1oZWlnaHQ6IDIwcHg7XG4gIG1heC1oZWlnaHQ6IDI1cHg7XG4gIHBhZGRpbmc6IDElO1xuICB0b3A6IDUwJTtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zOCUpO1xuICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuMjVzIGVhc2UgMC4wNzVzO1xufVxuLnRhYi1uYXYgPiBsaSA+IHN2ZyB7XG4gIG92ZXJmbG93OiB2aXNpYmxlO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG4udGFiLWN0ciB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgd2lkdGg6IDI1JTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBib3R0b206IDA7XG4gIHRyYW5zaXRpb246IGFsbCAwLjhzIGVhc2U7XG59XG4udGFiLWN0ciA+IHN2ZyB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDY1JTtcbiAgb3ZlcmZsb3c6IHZpc2libGU7XG59XG48L3N0eWxlPlxuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQWlNQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTsiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/vue-loader/lib/index.js?!../../tmp/codepen/vuejs/src/pen.vue?vue&type=script&lang=js&\n");
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!../../tmp/codepen/vuejs/src/pen.vue?vue&type=template&id=0755aed5&":
+/*!***************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!/tmp/codepen/vuejs/src/pen.vue?vue&type=template&id=0755aed5& ***!
+  \***************************************************************************************************************************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"section\", { staticClass: \"phone\" }, [\n    _c(\"div\", { staticClass: \"header\" }, [\n      _c(\"article\", { staticClass: \"head-wr\" }, [\n        _c(\"div\", [\n          _c(\"svg\", { attrs: { viewBox: \"0 0 512 512\" } }, [\n            _c(\"g\", { attrs: { transform: \"translate(0,23)\" } }, [\n              _c(\"circle\", {\n                attrs: { cx: \"255.001\", cy: \"433.5\", r: \"33\", fill: \"#000\" }\n              }),\n              _vm._v(\" \"),\n              _c(\"path\", {\n                attrs: {\n                  d:\n                    \"M506.632,154.864C440.902,84.341,351.895,45.501,255.997,45.5C160.107,45.501,71.1,84.341,5.369,154.864c7.53,8.08-7.085,20.736,0.995,28.267c8.081,7.53,20.736,7.086,28.267-0.995C92.711,119.82,171.327,85.501,256.004,85.5c84.67,0.001,163.286,34.32,221.366,96.636c3.939,4.226,9.28,6.364,14.635,6.364c4.883,0,9.778-1.778,13.632-5.369C513.717,175.599,514.163,162.944,506.632,154.864z\",\n                  fill: \"#000\"\n                }\n              }),\n              _vm._v(\" \"),\n              _c(\"path\", {\n                attrs: {\n                  d:\n                    \"M433.194,237.458c-48.587-48.954-111.516-75.913-177.196-75.911c-65.695,0.001-128.625,26.961-177.197,75.913c-7.78,7.841-7.731,20.504,0.11,28.284c7.841,7.78,20.504,7.731,28.284-0.11c41.005-41.326,93.851-64.086,148.803-64.087c54.938-0.002,107.784,22.759,148.804,64.089c3.91,3.939,9.052,5.911,14.196,5.911c5.092,0,10.188-1.934,14.09-5.805C440.927,257.961,440.975,245.298,433.194,237.458z\",\n                  fill: \"#000\"\n                }\n              }),\n              _vm._v(\" \"),\n              _c(\"path\", {\n                attrs: {\n                  d:\n                    \"M353.151,320.292c-26.02-25.779-63.317-41.792-97.339-41.792c-0.004,0-0.011,0-0.015,0h-1.441c-0.006,0-0.009,0-0.015,0c-34.023,0-71.323,16.014-97.342,41.792c-7.846,7.774-7.905,20.437-0.131,28.284c3.911,3.947,9.059,5.924,14.208,5.924c5.087,0,10.176-1.929,14.075-5.792c18.523-18.352,45.68-30.208,69.192-30.208c0.003,0,0.007,0,0.01,0h1.447c0.004,0,0.005,0,0.009,0c23.509,0,50.668,11.857,69.189,30.208c7.846,7.773,20.511,7.717,28.284-0.132C361.057,340.73,360.998,328.066,353.151,320.292z\",\n                  fill: \"#000\"\n                }\n              })\n            ])\n          ])\n        ]),\n        _vm._v(\" \"),\n        _c(\"div\", [\n          _c(\"svg\", { attrs: { viewBox: \"0 0 512 512\" } }, [\n            _c(\"g\", { attrs: { stroke: \"#000\", \"stroke-width\": \"50\" } }, [\n              _c(\"line\", {\n                attrs: { x1: \"20\", y1: \"350\", x2: \"20\", y2: \"495\" }\n              }),\n              _vm._v(\" \"),\n              _c(\"line\", {\n                attrs: { x1: \"140\", y1: \"250\", x2: \"140\", y2: \"495\" }\n              }),\n              _vm._v(\" \"),\n              _c(\"line\", {\n                attrs: { x1: \"260\", y1: \"150\", x2: \"260\", y2: \"495\" }\n              }),\n              _vm._v(\" \"),\n              _c(\"line\", {\n                attrs: { x1: \"380\", y1: \"50\", x2: \"380\", y2: \"495\" }\n              })\n            ])\n          ])\n        ]),\n        _vm._v(\" \"),\n        _c(\"div\", [\n          _c(\"svg\", { attrs: { viewBox: \"0 0 100 60\" } }, [\n            _c(\"path\", {\n              attrs: {\n                d:\n                  \"M91.5,39h-0.6v-8c0-2.2-1.8-4-3.9-4H9c-2.2,0-4,1.8-4,4V69c0,2.2,1.8,4,4,4h78c2.2,0,3.9-1.8,3.9-4v-8h0.6c2,0,3.5-1.7,3.5-3.8V42.8C95,40.7,93.4,39,91.5,39z M91,57h-4.1L87,69L9,69l0-38l78,0v12H91L91,57zM64.9,34.5H83v31H64.9H49.1h-2.3H43H28.8H26H13v-31h13h2.8H43h3.9h2.3H64.9z\",\n                transform: \"translate(0 -25)\"\n              }\n            })\n          ])\n        ])\n      ])\n    ]),\n    _vm._v(\" \"),\n    _c(\"div\", { staticClass: \"content\" }, [\n      _c(\n        \"article\",\n        { staticClass: \"main-wr\" },\n        [\n          _c(\n            \"transition\",\n            {\n              attrs: { name: \"slide\", mode: \"out-in\" },\n              on: { leave: _vm.bounceBall }\n            },\n            [\n              _vm.tab == 1\n                ? _c(\"div\", { key: \"1\" }, [\n                    _c(\"img\", {\n                      attrs: {\n                        src:\n                          \"https://vector-illustrations.s3.eu-west-3.amazonaws.com/undraw-1.svg\",\n                        alt: \"illustration\"\n                      }\n                    })\n                  ])\n                : _vm.tab == 2\n                ? _c(\"div\", { key: \"2\" }, [\n                    _c(\"img\", {\n                      attrs: {\n                        src:\n                          \"https://vector-illustrations.s3.eu-west-3.amazonaws.com/undraw-2.svg\",\n                        alt: \"illustration\"\n                      }\n                    })\n                  ])\n                : _vm.tab == 3\n                ? _c(\"div\", { key: \"3\" }, [\n                    _c(\"img\", {\n                      attrs: {\n                        src:\n                          \"https://vector-illustrations.s3.eu-west-3.amazonaws.com/undraw-3.svg\",\n                        alt: \"illustration\"\n                      }\n                    })\n                  ])\n                : _vm.tab == 4\n                ? _c(\"div\", { key: \"4\" }, [\n                    _c(\"img\", {\n                      attrs: {\n                        src:\n                          \"https://vector-illustrations.s3.eu-west-3.amazonaws.com/undraw-4.svg\",\n                        alt: \"illustration\"\n                      }\n                    })\n                  ])\n                : _c(\"div\", { key: \"5\" }, [\n                    _c(\"img\", {\n                      attrs: {\n                        src:\n                          \"https://vector-illustrations.s3.eu-west-3.amazonaws.com/undraw-5.svg\",\n                        alt: \"illustration\"\n                      }\n                    })\n                  ])\n            ]\n          )\n        ],\n        1\n      )\n    ]),\n    _vm._v(\" \"),\n    _c(\"div\", { staticClass: \"tabs\" }, [\n      _c(\"nav\", [\n        _c(\"ul\", { staticClass: \"tab-nav\" }, [\n          _c(\n            \"li\",\n            { style: [_vm.tab == 1 ? { opacity: \"0\" } : { opacity: \"1\" }] },\n            [\n              _c(\n                \"svg\",\n                {\n                  attrs: { viewBox: \"0 0 100 100\" },\n                  on: {\n                    click: function($event) {\n                      return _vm.changeTab(1)\n                    }\n                  }\n                },\n                [\n                  _c(\n                    \"g\",\n                    {\n                      attrs: {\n                        fill: \"rgba(0,0,0,0.5)\",\n                        stroke: \"rgba(0,0,0,0.25)\",\n                        \"stroke-width\": \"5\"\n                      }\n                    },\n                    [\n                      _c(\"path\", {\n                        attrs: {\n                          d:\n                            \"M37.3,1H7.9C4.1,1,1,4.1,1,7.9v29.4c0,3.8,3.1,6.9,6.9,6.9h29.4c3.8,0,6.9-3.1,6.9-6.9V7.9C44.3,4.1,41.2,1,37.3,1zM39.9,37.4c0,1.4-1.1,2.6-2.6,2.6H7.9c-1.4,0-2.6-1.1-2.6-2.6V7.9c0-1.4,1.1-2.6,2.6-2.6h29.4c1.4,0,2.6,1.1,2.6,2.6V37.4z\"\n                        }\n                      }),\n                      _vm._v(\" \"),\n                      _c(\"path\", {\n                        attrs: {\n                          d:\n                            \"M37.3,55.2H7.9c-3.8,0-6.9,3.1-6.9,6.9v29.4c0,3.8,3.1,6.9,6.9,6.9h29.4c3.8,0,6.9-3.1,6.9-6.9V62.2C44.3,58.4,41.2,55.2,37.3,55.2zM39.9,91.6c0,1.4-1.1,2.6-2.6,2.6H7.9c-1.4,0-2.6-1.1-2.6-2.6V62.2c0-1.4,1.1-2.6,2.6-2.6h29.4c1.4,0,2.6,1.1,2.6,2.6V91.6z\"\n                        }\n                      }),\n                      _vm._v(\" \"),\n                      _c(\"path\", {\n                        attrs: {\n                          d:\n                            \"M92.1,1H62.6c-3.8,0-6.9,3.1-6.9,6.9v29.4c0,3.8,3.1,6.9,6.9,6.9h29.4c3.8,0,6.9-3.1,6.9-6.9V7.9C99,4.1,95.9,1,92.1,1zM94.6,37.4c0,1.4-1.1,2.6-2.6,2.6H62.6c-1.4,0-2.6-1.1-2.6-2.6V7.9c0-1.4,1.1-2.6,2.6-2.6h29.4c1.4,0,2.6,1.1,2.6,2.6V37.4z\"\n                        }\n                      }),\n                      _vm._v(\" \"),\n                      _c(\"path\", {\n                        attrs: {\n                          d:\n                            \"M92.1,55.2H62.6c-3.8,0-6.9,3.1-6.9,6.9v29.4c0,3.8,3.1,6.9,6.9,6.9h29.4c3.8,0,6.9-3.1,6.9-6.9V62.2C99,58.4,95.9,55.2,92.1,55.2zM94.6,91.6c0,1.4-1.1,2.6-2.6,2.6H62.6c-1.4,0-2.6-1.1-2.6-2.6V62.2c0-1.4,1.1-2.6,2.6-2.6h29.4c1.4,0,2.6,1.1,2.6,2.6V91.6z\"\n                        }\n                      })\n                    ]\n                  )\n                ]\n              )\n            ]\n          ),\n          _vm._v(\" \"),\n          _c(\n            \"li\",\n            { style: [_vm.tab == 2 ? { opacity: \"0\" } : { opacity: \"1\" }] },\n            [\n              _c(\n                \"svg\",\n                {\n                  attrs: { viewBox: \"0 0 100 100\" },\n                  on: {\n                    click: function($event) {\n                      return _vm.changeTab(2)\n                    }\n                  }\n                },\n                [\n                  _c(\n                    \"g\",\n                    {\n                      attrs: {\n                        fill: \"rgba(0,0,0,0.5)\",\n                        transform: \"translate(0 -10)scale(1.15)\"\n                      }\n                    },\n                    [\n                      _c(\"path\", {\n                        attrs: {\n                          d:\n                            \"M37.693,24.11H89c3.313,0,6-2.685,6-6c0-3.312-2.688-6-6-6H37.693c-3.313,0-6,2.687-6,6C31.693,21.424,34.38,24.11,37.693,24.11z\"\n                        }\n                      }),\n                      _vm._v(\" \"),\n                      _c(\"path\", {\n                        attrs: {\n                          d:\n                            \"M89,75.891H37.693c-3.313,0-6,2.687-6,6s2.687,6,6,6H89c3.313,0,6-2.687,6-6C95,78.578,92.313,75.891,89,75.891z\"\n                        }\n                      }),\n                      _vm._v(\" \"),\n                      _c(\"path\", {\n                        attrs: {\n                          d:\n                            \"M89,44.001H37.693c-3.313,0-6,2.686-6,6c0,3.312,2.687,6,6,6H89c3.313,0,6-2.688,6-6C95,46.687,92.313,44.001,89,44.001z\"\n                        }\n                      }),\n                      _vm._v(\" \"),\n                      _c(\"circle\", {\n                        attrs: { cx: \"13.504\", cy: \"18.11\", r: \"8.504\" }\n                      }),\n                      _vm._v(\" \"),\n                      _c(\"circle\", {\n                        attrs: { cx: \"13.504\", cy: \"50.001\", r: \"8.504\" }\n                      }),\n                      _vm._v(\" \"),\n                      _c(\"circle\", {\n                        attrs: { cx: \"13.504\", cy: \"81.89\", r: \"8.504\" }\n                      })\n                    ]\n                  )\n                ]\n              )\n            ]\n          ),\n          _vm._v(\" \"),\n          _c(\n            \"li\",\n            { style: [_vm.tab == 3 ? { opacity: \"0\" } : { opacity: \"1\" }] },\n            [\n              _c(\n                \"svg\",\n                {\n                  attrs: { viewBox: \"0 0 100 100\" },\n                  on: {\n                    click: function($event) {\n                      return _vm.changeTab(3)\n                    }\n                  }\n                },\n                [\n                  _c(\"g\", { attrs: { fill: \"rgba(0,0,0,0.5)\" } }, [\n                    _c(\"path\", {\n                      attrs: {\n                        d:\n                          \"M27.9,52.6c1,1,2.4,1.6,3.8,1.6c1.4,0,2.7-0.5,3.8-1.6c2.1-2.1,2.1-5.5,0-7.5L24,33.7h64.9c2.9,0,5.3-2.4,5.3-5.3S91.8,23,88.9,23H24l11.4-11.4c2.1-2.1,2.1-5.5,0-7.5c-2.1-2.1-5.5-2.1-7.5,0L7.3,24.6c-2.1,2.1-2.1,5.5,0,7.5L27.9,52.6z\"\n                      }\n                    }),\n                    _vm._v(\" \"),\n                    _c(\"path\", {\n                      attrs: {\n                        d:\n                          \"M72.1,47.4c-2.1-2.1-5.5-2.1-7.5,0c-2.1,2.1-2.1,5.5,0,7.5L76,66.3H11.1c-2.9,0-5.3,2.4-5.3,5.3S8.2,77,11.1,77H76L64.6,88.4c-2.1,2.1-2.1,5.5,0,7.5c1,1,2.4,1.6,3.8,1.6s2.7-0.5,3.8-1.6l20.5-20.5c2.1-2.1,2.1-5.5,0-7.5L72.1,47.4z\"\n                      }\n                    })\n                  ])\n                ]\n              )\n            ]\n          ),\n          _vm._v(\" \"),\n          _c(\n            \"li\",\n            { style: [_vm.tab == 4 ? { opacity: \"0\" } : { opacity: \"1\" }] },\n            [\n              _c(\n                \"svg\",\n                {\n                  attrs: { viewBox: \"0 0 100 100\" },\n                  on: {\n                    click: function($event) {\n                      return _vm.changeTab(4)\n                    }\n                  }\n                },\n                [\n                  _c(\"path\", {\n                    attrs: {\n                      fill: \"rgba(0,0,0,0.5)\",\n                      stroke: \"rgba(0,0,0,0.5)\",\n                      \"stroke-width\": \"2\",\n                      transform: \"translate(-17 -40)scale(1.4 1.8)\",\n                      d:\n                        \"M78.219,75.96H21.78c-2.222,0-4.03-1.808-4.03-4.03V42.795c0-2.222,1.808-4.03,4.03-4.03h56.438c2.223,0,4.031,1.808,4.031,4.03V71.93C82.25,74.152,80.441,75.96,78.219,75.96z M21.78,42.266c-0.288,0-0.53,0.243-0.53,0.53V71.93c0,0.287,0.243,0.53,0.53,0.53h56.438c0.288,0,0.531-0.243,0.531-0.53V42.795c0-0.287-0.243-0.53-0.531-0.53H21.78z M75.102,33.153  c0-0.966-0.783-1.75-1.75-1.75H26.648c-0.966,0-1.75,0.784-1.75,1.75s0.784,1.75,1.75,1.75h46.703C74.318,34.903,75.102,34.119,75.102,33.153zM69.394,25.791c0-0.966-0.783-1.75-1.75-1.75H32.356c-0.966,0-1.75,0.784-1.75,1.75  s0.784,1.75,1.75,1.75h35.288C68.61,27.541,69.394,26.757,69.394,25.791z\"\n                    }\n                  })\n                ]\n              )\n            ]\n          ),\n          _vm._v(\" \"),\n          _c(\n            \"li\",\n            { style: [_vm.tab == 5 ? { opacity: \"0\" } : { opacity: \"1\" }] },\n            [\n              _c(\n                \"svg\",\n                {\n                  attrs: { viewBox: \"0 0 100 100\" },\n                  on: {\n                    click: function($event) {\n                      return _vm.changeTab(5)\n                    }\n                  }\n                },\n                [\n                  _c(\n                    \"g\",\n                    {\n                      attrs: {\n                        fill: \"rgba(0,0,0,0.5)\",\n                        stroke: \"rgba(0,0,0,0.5)\",\n                        \"stroke-width\": \"5\",\n                        transform: \"translate(-7 -10)scale(1.18)\"\n                      }\n                    },\n                    [\n                      _c(\"path\", {\n                        attrs: {\n                          d:\n                            \"M70.5,30.5C70.5,19.1962891,61.3037109,10,50,10s-20.5,9.1962891-20.5,20.5S38.6962891,51,50,51S70.5,41.8037109,70.5,30.5zM31.5,30.5C31.5,20.2988281,39.7988281,12,50,12s18.5,8.2988281,18.5,18.5S60.2011719,49,50,49S31.5,40.7011719,31.5,30.5z\"\n                        }\n                      }),\n                      _vm._v(\" \"),\n                      _c(\"path\", {\n                        attrs: {\n                          d:\n                            \"M60.4125977,56.8632812H39.5874023C26.0297852,56.8632812,15,67.8935547,15,81.4511719C15,86.1650391,18.8349609,90,23.5488281,90h52.9023438C81.1650391,90,85,86.1650391,85,81.4511719C85,67.8935547,73.9702148,56.8632812,60.4125977,56.8632812zM76.4511719,88H23.5488281C19.9379883,88,17,85.0625,17,81.4511719c0-12.4550781,10.1328125-22.5878906,22.5874023-22.5878906h20.8251953C72.8671875,58.8632812,83,68.9960938,83,81.4511719C83,85.0625,80.0620117,88,76.4511719,88z\"\n                        }\n                      })\n                    ]\n                  )\n                ]\n              )\n            ]\n          )\n        ])\n      ]),\n      _vm._v(\" \"),\n      _c(\n        \"div\",\n        {\n          staticClass: \"tab-ctr\",\n          style: [\n            _vm.tab == 1\n              ? { left: \"1%\" }\n              : _vm.tab == 2\n              ? { left: \"19.5%\" }\n              : _vm.tab == 3\n              ? { left: \"38%\" }\n              : _vm.tab == 4\n              ? { left: \"56.5%\" }\n              : _vm.tab == 5\n              ? { left: \"75%\" }\n              : null\n          ]\n        },\n        [\n          _c(\"svg\", { attrs: { viewBox: \"0 0 1100 600\" } }, [\n            _c(\"path\", {\n              attrs: {\n                d:\n                  \"M 0 0 C 150 0 150 350 300 450 C 450 550 650 550 800 450 C 950 350 950 0 1100 0 \",\n                fill: \"lightgrey\"\n              }\n            }),\n            _vm._v(\" \"),\n            _c(\"circle\", {\n              attrs: {\n                id: \"sphere\",\n                cx: \"550\",\n                cy: \"125\",\n                r: \"300\",\n                fill: \"#f3f8fe\"\n              }\n            })\n          ])\n        ]\n      )\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvdnVlLWxvYWRlci9saWIvbG9hZGVycy90ZW1wbGF0ZUxvYWRlci5qcz8hLi9ub2RlX21vZHVsZXMvdnVlLWxvYWRlci9saWIvaW5kZXguanM/IS4uLy4uL3RtcC9jb2RlcGVuL3Z1ZWpzL3NyYy9wZW4udnVlP3Z1ZSZ0eXBlPXRlbXBsYXRlJmlkPTA3NTVhZWQ1Ji5qcyIsInNvdXJjZXMiOlsid2VicGFjazovL0NvZGVQZW5WdWVDb21wb25lbnQvL3RtcC9jb2RlcGVuL3Z1ZWpzL3NyYy9wZW4udnVlPzMzOWUiXSwic291cmNlc0NvbnRlbnQiOlsidmFyIHJlbmRlciA9IGZ1bmN0aW9uKCkge1xuICB2YXIgX3ZtID0gdGhpc1xuICB2YXIgX2ggPSBfdm0uJGNyZWF0ZUVsZW1lbnRcbiAgdmFyIF9jID0gX3ZtLl9zZWxmLl9jIHx8IF9oXG4gIHJldHVybiBfYyhcInNlY3Rpb25cIiwgeyBzdGF0aWNDbGFzczogXCJwaG9uZVwiIH0sIFtcbiAgICBfYyhcImRpdlwiLCB7IHN0YXRpY0NsYXNzOiBcImhlYWRlclwiIH0sIFtcbiAgICAgIF9jKFwiYXJ0aWNsZVwiLCB7IHN0YXRpY0NsYXNzOiBcImhlYWQtd3JcIiB9LCBbXG4gICAgICAgIF9jKFwiZGl2XCIsIFtcbiAgICAgICAgICBfYyhcInN2Z1wiLCB7IGF0dHJzOiB7IHZpZXdCb3g6IFwiMCAwIDUxMiA1MTJcIiB9IH0sIFtcbiAgICAgICAgICAgIF9jKFwiZ1wiLCB7IGF0dHJzOiB7IHRyYW5zZm9ybTogXCJ0cmFuc2xhdGUoMCwyMylcIiB9IH0sIFtcbiAgICAgICAgICAgICAgX2MoXCJjaXJjbGVcIiwge1xuICAgICAgICAgICAgICAgIGF0dHJzOiB7IGN4OiBcIjI1NS4wMDFcIiwgY3k6IFwiNDMzLjVcIiwgcjogXCIzM1wiLCBmaWxsOiBcIiMwMDBcIiB9XG4gICAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgICBfdm0uX3YoXCIgXCIpLFxuICAgICAgICAgICAgICBfYyhcInBhdGhcIiwge1xuICAgICAgICAgICAgICAgIGF0dHJzOiB7XG4gICAgICAgICAgICAgICAgICBkOlxuICAgICAgICAgICAgICAgICAgICBcIk01MDYuNjMyLDE1NC44NjRDNDQwLjkwMiw4NC4zNDEsMzUxLjg5NSw0NS41MDEsMjU1Ljk5Nyw0NS41QzE2MC4xMDcsNDUuNTAxLDcxLjEsODQuMzQxLDUuMzY5LDE1NC44NjRjNy41Myw4LjA4LTcuMDg1LDIwLjczNiwwLjk5NSwyOC4yNjdjOC4wODEsNy41MywyMC43MzYsNy4wODYsMjguMjY3LTAuOTk1QzkyLjcxMSwxMTkuODIsMTcxLjMyNyw4NS41MDEsMjU2LjAwNCw4NS41Yzg0LjY3LDAuMDAxLDE2My4yODYsMzQuMzIsMjIxLjM2Niw5Ni42MzZjMy45MzksNC4yMjYsOS4yOCw2LjM2NCwxNC42MzUsNi4zNjRjNC44ODMsMCw5Ljc3OC0xLjc3OCwxMy42MzItNS4zNjlDNTEzLjcxNywxNzUuNTk5LDUxNC4xNjMsMTYyLjk0NCw1MDYuNjMyLDE1NC44NjR6XCIsXG4gICAgICAgICAgICAgICAgICBmaWxsOiBcIiMwMDBcIlxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgfSksXG4gICAgICAgICAgICAgIF92bS5fdihcIiBcIiksXG4gICAgICAgICAgICAgIF9jKFwicGF0aFwiLCB7XG4gICAgICAgICAgICAgICAgYXR0cnM6IHtcbiAgICAgICAgICAgICAgICAgIGQ6XG4gICAgICAgICAgICAgICAgICAgIFwiTTQzMy4xOTQsMjM3LjQ1OGMtNDguNTg3LTQ4Ljk1NC0xMTEuNTE2LTc1LjkxMy0xNzcuMTk2LTc1LjkxMWMtNjUuNjk1LDAuMDAxLTEyOC42MjUsMjYuOTYxLTE3Ny4xOTcsNzUuOTEzYy03Ljc4LDcuODQxLTcuNzMxLDIwLjUwNCwwLjExLDI4LjI4NGM3Ljg0MSw3Ljc4LDIwLjUwNCw3LjczMSwyOC4yODQtMC4xMWM0MS4wMDUtNDEuMzI2LDkzLjg1MS02NC4wODYsMTQ4LjgwMy02NC4wODdjNTQuOTM4LTAuMDAyLDEwNy43ODQsMjIuNzU5LDE0OC44MDQsNjQuMDg5YzMuOTEsMy45MzksOS4wNTIsNS45MTEsMTQuMTk2LDUuOTExYzUuMDkyLDAsMTAuMTg4LTEuOTM0LDE0LjA5LTUuODA1QzQ0MC45MjcsMjU3Ljk2MSw0NDAuOTc1LDI0NS4yOTgsNDMzLjE5NCwyMzcuNDU4elwiLFxuICAgICAgICAgICAgICAgICAgZmlsbDogXCIjMDAwXCJcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgICBfdm0uX3YoXCIgXCIpLFxuICAgICAgICAgICAgICBfYyhcInBhdGhcIiwge1xuICAgICAgICAgICAgICAgIGF0dHJzOiB7XG4gICAgICAgICAgICAgICAgICBkOlxuICAgICAgICAgICAgICAgICAgICBcIk0zNTMuMTUxLDMyMC4yOTJjLTI2LjAyLTI1Ljc3OS02My4zMTctNDEuNzkyLTk3LjMzOS00MS43OTJjLTAuMDA0LDAtMC4wMTEsMC0wLjAxNSwwaC0xLjQ0MWMtMC4wMDYsMC0wLjAwOSwwLTAuMDE1LDBjLTM0LjAyMywwLTcxLjMyMywxNi4wMTQtOTcuMzQyLDQxLjc5MmMtNy44NDYsNy43NzQtNy45MDUsMjAuNDM3LTAuMTMxLDI4LjI4NGMzLjkxMSwzLjk0Nyw5LjA1OSw1LjkyNCwxNC4yMDgsNS45MjRjNS4wODcsMCwxMC4xNzYtMS45MjksMTQuMDc1LTUuNzkyYzE4LjUyMy0xOC4zNTIsNDUuNjgtMzAuMjA4LDY5LjE5Mi0zMC4yMDhjMC4wMDMsMCwwLjAwNywwLDAuMDEsMGgxLjQ0N2MwLjAwNCwwLDAuMDA1LDAsMC4wMDksMGMyMy41MDksMCw1MC42NjgsMTEuODU3LDY5LjE4OSwzMC4yMDhjNy44NDYsNy43NzMsMjAuNTExLDcuNzE3LDI4LjI4NC0wLjEzMkMzNjEuMDU3LDM0MC43MywzNjAuOTk4LDMyOC4wNjYsMzUzLjE1MSwzMjAuMjkyelwiLFxuICAgICAgICAgICAgICAgICAgZmlsbDogXCIjMDAwXCJcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICBdKVxuICAgICAgICAgIF0pXG4gICAgICAgIF0pLFxuICAgICAgICBfdm0uX3YoXCIgXCIpLFxuICAgICAgICBfYyhcImRpdlwiLCBbXG4gICAgICAgICAgX2MoXCJzdmdcIiwgeyBhdHRyczogeyB2aWV3Qm94OiBcIjAgMCA1MTIgNTEyXCIgfSB9LCBbXG4gICAgICAgICAgICBfYyhcImdcIiwgeyBhdHRyczogeyBzdHJva2U6IFwiIzAwMFwiLCBcInN0cm9rZS13aWR0aFwiOiBcIjUwXCIgfSB9LCBbXG4gICAgICAgICAgICAgIF9jKFwibGluZVwiLCB7XG4gICAgICAgICAgICAgICAgYXR0cnM6IHsgeDE6IFwiMjBcIiwgeTE6IFwiMzUwXCIsIHgyOiBcIjIwXCIsIHkyOiBcIjQ5NVwiIH1cbiAgICAgICAgICAgICAgfSksXG4gICAgICAgICAgICAgIF92bS5fdihcIiBcIiksXG4gICAgICAgICAgICAgIF9jKFwibGluZVwiLCB7XG4gICAgICAgICAgICAgICAgYXR0cnM6IHsgeDE6IFwiMTQwXCIsIHkxOiBcIjI1MFwiLCB4MjogXCIxNDBcIiwgeTI6IFwiNDk1XCIgfVxuICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICAgICAgX3ZtLl92KFwiIFwiKSxcbiAgICAgICAgICAgICAgX2MoXCJsaW5lXCIsIHtcbiAgICAgICAgICAgICAgICBhdHRyczogeyB4MTogXCIyNjBcIiwgeTE6IFwiMTUwXCIsIHgyOiBcIjI2MFwiLCB5MjogXCI0OTVcIiB9XG4gICAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgICBfdm0uX3YoXCIgXCIpLFxuICAgICAgICAgICAgICBfYyhcImxpbmVcIiwge1xuICAgICAgICAgICAgICAgIGF0dHJzOiB7IHgxOiBcIjM4MFwiLCB5MTogXCI1MFwiLCB4MjogXCIzODBcIiwgeTI6IFwiNDk1XCIgfVxuICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgXSlcbiAgICAgICAgICBdKVxuICAgICAgICBdKSxcbiAgICAgICAgX3ZtLl92KFwiIFwiKSxcbiAgICAgICAgX2MoXCJkaXZcIiwgW1xuICAgICAgICAgIF9jKFwic3ZnXCIsIHsgYXR0cnM6IHsgdmlld0JveDogXCIwIDAgMTAwIDYwXCIgfSB9LCBbXG4gICAgICAgICAgICBfYyhcInBhdGhcIiwge1xuICAgICAgICAgICAgICBhdHRyczoge1xuICAgICAgICAgICAgICAgIGQ6XG4gICAgICAgICAgICAgICAgICBcIk05MS41LDM5aC0wLjZ2LThjMC0yLjItMS44LTQtMy45LTRIOWMtMi4yLDAtNCwxLjgtNCw0VjY5YzAsMi4yLDEuOCw0LDQsNGg3OGMyLjIsMCwzLjktMS44LDMuOS00di04aDAuNmMyLDAsMy41LTEuNywzLjUtMy44VjQyLjhDOTUsNDAuNyw5My40LDM5LDkxLjUsMzl6IE05MSw1N2gtNC4xTDg3LDY5TDksNjlsMC0zOGw3OCwwdjEySDkxTDkxLDU3ek02NC45LDM0LjVIODN2MzFINjQuOUg0OS4xaC0yLjNINDNIMjguOEgyNkgxM3YtMzFoMTNoMi44SDQzaDMuOWgyLjNINjQuOXpcIixcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlKDAgLTI1KVwiXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0pXG4gICAgICAgICAgXSlcbiAgICAgICAgXSlcbiAgICAgIF0pXG4gICAgXSksXG4gICAgX3ZtLl92KFwiIFwiKSxcbiAgICBfYyhcImRpdlwiLCB7IHN0YXRpY0NsYXNzOiBcImNvbnRlbnRcIiB9LCBbXG4gICAgICBfYyhcbiAgICAgICAgXCJhcnRpY2xlXCIsXG4gICAgICAgIHsgc3RhdGljQ2xhc3M6IFwibWFpbi13clwiIH0sXG4gICAgICAgIFtcbiAgICAgICAgICBfYyhcbiAgICAgICAgICAgIFwidHJhbnNpdGlvblwiLFxuICAgICAgICAgICAge1xuICAgICAgICAgICAgICBhdHRyczogeyBuYW1lOiBcInNsaWRlXCIsIG1vZGU6IFwib3V0LWluXCIgfSxcbiAgICAgICAgICAgICAgb246IHsgbGVhdmU6IF92bS5ib3VuY2VCYWxsIH1cbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgICBbXG4gICAgICAgICAgICAgIF92bS50YWIgPT0gMVxuICAgICAgICAgICAgICAgID8gX2MoXCJkaXZcIiwgeyBrZXk6IFwiMVwiIH0sIFtcbiAgICAgICAgICAgICAgICAgICAgX2MoXCJpbWdcIiwge1xuICAgICAgICAgICAgICAgICAgICAgIGF0dHJzOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICBzcmM6XG4gICAgICAgICAgICAgICAgICAgICAgICAgIFwiaHR0cHM6Ly92ZWN0b3ItaWxsdXN0cmF0aW9ucy5zMy5ldS13ZXN0LTMuYW1hem9uYXdzLmNvbS91bmRyYXctMS5zdmdcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGFsdDogXCJpbGx1c3RyYXRpb25cIlxuICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgfSlcbiAgICAgICAgICAgICAgICAgIF0pXG4gICAgICAgICAgICAgICAgOiBfdm0udGFiID09IDJcbiAgICAgICAgICAgICAgICA/IF9jKFwiZGl2XCIsIHsga2V5OiBcIjJcIiB9LCBbXG4gICAgICAgICAgICAgICAgICAgIF9jKFwiaW1nXCIsIHtcbiAgICAgICAgICAgICAgICAgICAgICBhdHRyczoge1xuICAgICAgICAgICAgICAgICAgICAgICAgc3JjOlxuICAgICAgICAgICAgICAgICAgICAgICAgICBcImh0dHBzOi8vdmVjdG9yLWlsbHVzdHJhdGlvbnMuczMuZXUtd2VzdC0zLmFtYXpvbmF3cy5jb20vdW5kcmF3LTIuc3ZnXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBhbHQ6IFwiaWxsdXN0cmF0aW9uXCJcbiAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICAgICAgICBdKVxuICAgICAgICAgICAgICAgIDogX3ZtLnRhYiA9PSAzXG4gICAgICAgICAgICAgICAgPyBfYyhcImRpdlwiLCB7IGtleTogXCIzXCIgfSwgW1xuICAgICAgICAgICAgICAgICAgICBfYyhcImltZ1wiLCB7XG4gICAgICAgICAgICAgICAgICAgICAgYXR0cnM6IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHNyYzpcbiAgICAgICAgICAgICAgICAgICAgICAgICAgXCJodHRwczovL3ZlY3Rvci1pbGx1c3RyYXRpb25zLnMzLmV1LXdlc3QtMy5hbWF6b25hd3MuY29tL3VuZHJhdy0zLnN2Z1wiLFxuICAgICAgICAgICAgICAgICAgICAgICAgYWx0OiBcImlsbHVzdHJhdGlvblwiXG4gICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgICAgICAgXSlcbiAgICAgICAgICAgICAgICA6IF92bS50YWIgPT0gNFxuICAgICAgICAgICAgICAgID8gX2MoXCJkaXZcIiwgeyBrZXk6IFwiNFwiIH0sIFtcbiAgICAgICAgICAgICAgICAgICAgX2MoXCJpbWdcIiwge1xuICAgICAgICAgICAgICAgICAgICAgIGF0dHJzOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICBzcmM6XG4gICAgICAgICAgICAgICAgICAgICAgICAgIFwiaHR0cHM6Ly92ZWN0b3ItaWxsdXN0cmF0aW9ucy5zMy5ldS13ZXN0LTMuYW1hem9uYXdzLmNvbS91bmRyYXctNC5zdmdcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGFsdDogXCJpbGx1c3RyYXRpb25cIlxuICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgfSlcbiAgICAgICAgICAgICAgICAgIF0pXG4gICAgICAgICAgICAgICAgOiBfYyhcImRpdlwiLCB7IGtleTogXCI1XCIgfSwgW1xuICAgICAgICAgICAgICAgICAgICBfYyhcImltZ1wiLCB7XG4gICAgICAgICAgICAgICAgICAgICAgYXR0cnM6IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHNyYzpcbiAgICAgICAgICAgICAgICAgICAgICAgICAgXCJodHRwczovL3ZlY3Rvci1pbGx1c3RyYXRpb25zLnMzLmV1LXdlc3QtMy5hbWF6b25hd3MuY29tL3VuZHJhdy01LnN2Z1wiLFxuICAgICAgICAgICAgICAgICAgICAgICAgYWx0OiBcImlsbHVzdHJhdGlvblwiXG4gICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgICAgICAgXSlcbiAgICAgICAgICAgIF1cbiAgICAgICAgICApXG4gICAgICAgIF0sXG4gICAgICAgIDFcbiAgICAgIClcbiAgICBdKSxcbiAgICBfdm0uX3YoXCIgXCIpLFxuICAgIF9jKFwiZGl2XCIsIHsgc3RhdGljQ2xhc3M6IFwidGFic1wiIH0sIFtcbiAgICAgIF9jKFwibmF2XCIsIFtcbiAgICAgICAgX2MoXCJ1bFwiLCB7IHN0YXRpY0NsYXNzOiBcInRhYi1uYXZcIiB9LCBbXG4gICAgICAgICAgX2MoXG4gICAgICAgICAgICBcImxpXCIsXG4gICAgICAgICAgICB7IHN0eWxlOiBbX3ZtLnRhYiA9PSAxID8geyBvcGFjaXR5OiBcIjBcIiB9IDogeyBvcGFjaXR5OiBcIjFcIiB9XSB9LFxuICAgICAgICAgICAgW1xuICAgICAgICAgICAgICBfYyhcbiAgICAgICAgICAgICAgICBcInN2Z1wiLFxuICAgICAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICAgIGF0dHJzOiB7IHZpZXdCb3g6IFwiMCAwIDEwMCAxMDBcIiB9LFxuICAgICAgICAgICAgICAgICAgb246IHtcbiAgICAgICAgICAgICAgICAgICAgY2xpY2s6IGZ1bmN0aW9uKCRldmVudCkge1xuICAgICAgICAgICAgICAgICAgICAgIHJldHVybiBfdm0uY2hhbmdlVGFiKDEpXG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgIFtcbiAgICAgICAgICAgICAgICAgIF9jKFxuICAgICAgICAgICAgICAgICAgICBcImdcIixcbiAgICAgICAgICAgICAgICAgICAge1xuICAgICAgICAgICAgICAgICAgICAgIGF0dHJzOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICBmaWxsOiBcInJnYmEoMCwwLDAsMC41KVwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgc3Ryb2tlOiBcInJnYmEoMCwwLDAsMC4yNSlcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIFwic3Ryb2tlLXdpZHRoXCI6IFwiNVwiXG4gICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgICAgICBbXG4gICAgICAgICAgICAgICAgICAgICAgX2MoXCJwYXRoXCIsIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGF0dHJzOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgIGQ6XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgXCJNMzcuMywxSDcuOUM0LjEsMSwxLDQuMSwxLDcuOXYyOS40YzAsMy44LDMuMSw2LjksNi45LDYuOWgyOS40YzMuOCwwLDYuOS0zLjEsNi45LTYuOVY3LjlDNDQuMyw0LjEsNDEuMiwxLDM3LjMsMXpNMzkuOSwzNy40YzAsMS40LTEuMSwyLjYtMi42LDIuNkg3LjljLTEuNCwwLTIuNi0xLjEtMi42LTIuNlY3LjljMC0xLjQsMS4xLTIuNiwyLjYtMi42aDI5LjRjMS40LDAsMi42LDEuMSwyLjYsMi42VjM3LjR6XCJcbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICAgICAgICAgICAgICBfdm0uX3YoXCIgXCIpLFxuICAgICAgICAgICAgICAgICAgICAgIF9jKFwicGF0aFwiLCB7XG4gICAgICAgICAgICAgICAgICAgICAgICBhdHRyczoge1xuICAgICAgICAgICAgICAgICAgICAgICAgICBkOlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIFwiTTM3LjMsNTUuMkg3LjljLTMuOCwwLTYuOSwzLjEtNi45LDYuOXYyOS40YzAsMy44LDMuMSw2LjksNi45LDYuOWgyOS40YzMuOCwwLDYuOS0zLjEsNi45LTYuOVY2Mi4yQzQ0LjMsNTguNCw0MS4yLDU1LjIsMzcuMyw1NS4yek0zOS45LDkxLjZjMCwxLjQtMS4xLDIuNi0yLjYsMi42SDcuOWMtMS40LDAtMi42LTEuMS0yLjYtMi42VjYyLjJjMC0xLjQsMS4xLTIuNiwyLjYtMi42aDI5LjRjMS40LDAsMi42LDEuMSwyLjYsMi42VjkxLjZ6XCJcbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICAgICAgICAgICAgICBfdm0uX3YoXCIgXCIpLFxuICAgICAgICAgICAgICAgICAgICAgIF9jKFwicGF0aFwiLCB7XG4gICAgICAgICAgICAgICAgICAgICAgICBhdHRyczoge1xuICAgICAgICAgICAgICAgICAgICAgICAgICBkOlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIFwiTTkyLjEsMUg2Mi42Yy0zLjgsMC02LjksMy4xLTYuOSw2Ljl2MjkuNGMwLDMuOCwzLjEsNi45LDYuOSw2LjloMjkuNGMzLjgsMCw2LjktMy4xLDYuOS02LjlWNy45Qzk5LDQuMSw5NS45LDEsOTIuMSwxek05NC42LDM3LjRjMCwxLjQtMS4xLDIuNi0yLjYsMi42SDYyLjZjLTEuNCwwLTIuNi0xLjEtMi42LTIuNlY3LjljMC0xLjQsMS4xLTIuNiwyLjYtMi42aDI5LjRjMS40LDAsMi42LDEuMSwyLjYsMi42VjM3LjR6XCJcbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICAgICAgICAgICAgICBfdm0uX3YoXCIgXCIpLFxuICAgICAgICAgICAgICAgICAgICAgIF9jKFwicGF0aFwiLCB7XG4gICAgICAgICAgICAgICAgICAgICAgICBhdHRyczoge1xuICAgICAgICAgICAgICAgICAgICAgICAgICBkOlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIFwiTTkyLjEsNTUuMkg2Mi42Yy0zLjgsMC02LjksMy4xLTYuOSw2Ljl2MjkuNGMwLDMuOCwzLjEsNi45LDYuOSw2LjloMjkuNGMzLjgsMCw2LjktMy4xLDYuOS02LjlWNjIuMkM5OSw1OC40LDk1LjksNTUuMiw5Mi4xLDU1LjJ6TTk0LjYsOTEuNmMwLDEuNC0xLjEsMi42LTIuNiwyLjZINjIuNmMtMS40LDAtMi42LTEuMS0yLjYtMi42VjYyLjJjMC0xLjQsMS4xLTIuNiwyLjYtMi42aDI5LjRjMS40LDAsMi42LDEuMSwyLjYsMi42VjkxLjZ6XCJcbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgICAgICAgICBdXG4gICAgICAgICAgICAgICAgICApXG4gICAgICAgICAgICAgICAgXVxuICAgICAgICAgICAgICApXG4gICAgICAgICAgICBdXG4gICAgICAgICAgKSxcbiAgICAgICAgICBfdm0uX3YoXCIgXCIpLFxuICAgICAgICAgIF9jKFxuICAgICAgICAgICAgXCJsaVwiLFxuICAgICAgICAgICAgeyBzdHlsZTogW192bS50YWIgPT0gMiA/IHsgb3BhY2l0eTogXCIwXCIgfSA6IHsgb3BhY2l0eTogXCIxXCIgfV0gfSxcbiAgICAgICAgICAgIFtcbiAgICAgICAgICAgICAgX2MoXG4gICAgICAgICAgICAgICAgXCJzdmdcIixcbiAgICAgICAgICAgICAgICB7XG4gICAgICAgICAgICAgICAgICBhdHRyczogeyB2aWV3Qm94OiBcIjAgMCAxMDAgMTAwXCIgfSxcbiAgICAgICAgICAgICAgICAgIG9uOiB7XG4gICAgICAgICAgICAgICAgICAgIGNsaWNrOiBmdW5jdGlvbigkZXZlbnQpIHtcbiAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gX3ZtLmNoYW5nZVRhYigyKVxuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgICBbXG4gICAgICAgICAgICAgICAgICBfYyhcbiAgICAgICAgICAgICAgICAgICAgXCJnXCIsXG4gICAgICAgICAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICAgICAgICBhdHRyczoge1xuICAgICAgICAgICAgICAgICAgICAgICAgZmlsbDogXCJyZ2JhKDAsMCwwLDAuNSlcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGUoMCAtMTApc2NhbGUoMS4xNSlcIlxuICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgICAgICAgW1xuICAgICAgICAgICAgICAgICAgICAgIF9jKFwicGF0aFwiLCB7XG4gICAgICAgICAgICAgICAgICAgICAgICBhdHRyczoge1xuICAgICAgICAgICAgICAgICAgICAgICAgICBkOlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIFwiTTM3LjY5MywyNC4xMUg4OWMzLjMxMywwLDYtMi42ODUsNi02YzAtMy4zMTItMi42ODgtNi02LTZIMzcuNjkzYy0zLjMxMywwLTYsMi42ODctNiw2QzMxLjY5MywyMS40MjQsMzQuMzgsMjQuMTEsMzcuNjkzLDI0LjExelwiXG4gICAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgICAgfSksXG4gICAgICAgICAgICAgICAgICAgICAgX3ZtLl92KFwiIFwiKSxcbiAgICAgICAgICAgICAgICAgICAgICBfYyhcInBhdGhcIiwge1xuICAgICAgICAgICAgICAgICAgICAgICAgYXR0cnM6IHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgZDpcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBcIk04OSw3NS44OTFIMzcuNjkzYy0zLjMxMywwLTYsMi42ODctNiw2czIuNjg3LDYsNiw2SDg5YzMuMzEzLDAsNi0yLjY4Nyw2LTZDOTUsNzguNTc4LDkyLjMxMyw3NS44OTEsODksNzUuODkxelwiXG4gICAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgICAgfSksXG4gICAgICAgICAgICAgICAgICAgICAgX3ZtLl92KFwiIFwiKSxcbiAgICAgICAgICAgICAgICAgICAgICBfYyhcInBhdGhcIiwge1xuICAgICAgICAgICAgICAgICAgICAgICAgYXR0cnM6IHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgZDpcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBcIk04OSw0NC4wMDFIMzcuNjkzYy0zLjMxMywwLTYsMi42ODYtNiw2YzAsMy4zMTIsMi42ODcsNiw2LDZIODljMy4zMTMsMCw2LTIuNjg4LDYtNkM5NSw0Ni42ODcsOTIuMzEzLDQ0LjAwMSw4OSw0NC4wMDF6XCJcbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICAgICAgICAgICAgICBfdm0uX3YoXCIgXCIpLFxuICAgICAgICAgICAgICAgICAgICAgIF9jKFwiY2lyY2xlXCIsIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGF0dHJzOiB7IGN4OiBcIjEzLjUwNFwiLCBjeTogXCIxOC4xMVwiLCByOiBcIjguNTA0XCIgfVxuICAgICAgICAgICAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgICAgICAgICAgIF92bS5fdihcIiBcIiksXG4gICAgICAgICAgICAgICAgICAgICAgX2MoXCJjaXJjbGVcIiwge1xuICAgICAgICAgICAgICAgICAgICAgICAgYXR0cnM6IHsgY3g6IFwiMTMuNTA0XCIsIGN5OiBcIjUwLjAwMVwiLCByOiBcIjguNTA0XCIgfVxuICAgICAgICAgICAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgICAgICAgICAgIF92bS5fdihcIiBcIiksXG4gICAgICAgICAgICAgICAgICAgICAgX2MoXCJjaXJjbGVcIiwge1xuICAgICAgICAgICAgICAgICAgICAgICAgYXR0cnM6IHsgY3g6IFwiMTMuNTA0XCIsIGN5OiBcIjgxLjg5XCIsIHI6IFwiOC41MDRcIiB9XG4gICAgICAgICAgICAgICAgICAgICAgfSlcbiAgICAgICAgICAgICAgICAgICAgXVxuICAgICAgICAgICAgICAgICAgKVxuICAgICAgICAgICAgICAgIF1cbiAgICAgICAgICAgICAgKVxuICAgICAgICAgICAgXVxuICAgICAgICAgICksXG4gICAgICAgICAgX3ZtLl92KFwiIFwiKSxcbiAgICAgICAgICBfYyhcbiAgICAgICAgICAgIFwibGlcIixcbiAgICAgICAgICAgIHsgc3R5bGU6IFtfdm0udGFiID09IDMgPyB7IG9wYWNpdHk6IFwiMFwiIH0gOiB7IG9wYWNpdHk6IFwiMVwiIH1dIH0sXG4gICAgICAgICAgICBbXG4gICAgICAgICAgICAgIF9jKFxuICAgICAgICAgICAgICAgIFwic3ZnXCIsXG4gICAgICAgICAgICAgICAge1xuICAgICAgICAgICAgICAgICAgYXR0cnM6IHsgdmlld0JveDogXCIwIDAgMTAwIDEwMFwiIH0sXG4gICAgICAgICAgICAgICAgICBvbjoge1xuICAgICAgICAgICAgICAgICAgICBjbGljazogZnVuY3Rpb24oJGV2ZW50KSB7XG4gICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIF92bS5jaGFuZ2VUYWIoMylcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICAgICAgW1xuICAgICAgICAgICAgICAgICAgX2MoXCJnXCIsIHsgYXR0cnM6IHsgZmlsbDogXCJyZ2JhKDAsMCwwLDAuNSlcIiB9IH0sIFtcbiAgICAgICAgICAgICAgICAgICAgX2MoXCJwYXRoXCIsIHtcbiAgICAgICAgICAgICAgICAgICAgICBhdHRyczoge1xuICAgICAgICAgICAgICAgICAgICAgICAgZDpcbiAgICAgICAgICAgICAgICAgICAgICAgICAgXCJNMjcuOSw1Mi42YzEsMSwyLjQsMS42LDMuOCwxLjZjMS40LDAsMi43LTAuNSwzLjgtMS42YzIuMS0yLjEsMi4xLTUuNSwwLTcuNUwyNCwzMy43aDY0LjljMi45LDAsNS4zLTIuNCw1LjMtNS4zUzkxLjgsMjMsODguOSwyM0gyNGwxMS40LTExLjRjMi4xLTIuMSwyLjEtNS41LDAtNy41Yy0yLjEtMi4xLTUuNS0yLjEtNy41LDBMNy4zLDI0LjZjLTIuMSwyLjEtMi4xLDUuNSwwLDcuNUwyNy45LDUyLjZ6XCJcbiAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgICAgICAgICBfdm0uX3YoXCIgXCIpLFxuICAgICAgICAgICAgICAgICAgICBfYyhcInBhdGhcIiwge1xuICAgICAgICAgICAgICAgICAgICAgIGF0dHJzOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICBkOlxuICAgICAgICAgICAgICAgICAgICAgICAgICBcIk03Mi4xLDQ3LjRjLTIuMS0yLjEtNS41LTIuMS03LjUsMGMtMi4xLDIuMS0yLjEsNS41LDAsNy41TDc2LDY2LjNIMTEuMWMtMi45LDAtNS4zLDIuNC01LjMsNS4zUzguMiw3NywxMS4xLDc3SDc2TDY0LjYsODguNGMtMi4xLDIuMS0yLjEsNS41LDAsNy41YzEsMSwyLjQsMS42LDMuOCwxLjZzMi43LTAuNSwzLjgtMS42bDIwLjUtMjAuNWMyLjEtMi4xLDIuMS01LjUsMC03LjVMNzIuMSw0Ny40elwiXG4gICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgICAgICAgXSlcbiAgICAgICAgICAgICAgICBdXG4gICAgICAgICAgICAgIClcbiAgICAgICAgICAgIF1cbiAgICAgICAgICApLFxuICAgICAgICAgIF92bS5fdihcIiBcIiksXG4gICAgICAgICAgX2MoXG4gICAgICAgICAgICBcImxpXCIsXG4gICAgICAgICAgICB7IHN0eWxlOiBbX3ZtLnRhYiA9PSA0ID8geyBvcGFjaXR5OiBcIjBcIiB9IDogeyBvcGFjaXR5OiBcIjFcIiB9XSB9LFxuICAgICAgICAgICAgW1xuICAgICAgICAgICAgICBfYyhcbiAgICAgICAgICAgICAgICBcInN2Z1wiLFxuICAgICAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICAgIGF0dHJzOiB7IHZpZXdCb3g6IFwiMCAwIDEwMCAxMDBcIiB9LFxuICAgICAgICAgICAgICAgICAgb246IHtcbiAgICAgICAgICAgICAgICAgICAgY2xpY2s6IGZ1bmN0aW9uKCRldmVudCkge1xuICAgICAgICAgICAgICAgICAgICAgIHJldHVybiBfdm0uY2hhbmdlVGFiKDQpXG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgIFtcbiAgICAgICAgICAgICAgICAgIF9jKFwicGF0aFwiLCB7XG4gICAgICAgICAgICAgICAgICAgIGF0dHJzOiB7XG4gICAgICAgICAgICAgICAgICAgICAgZmlsbDogXCJyZ2JhKDAsMCwwLDAuNSlcIixcbiAgICAgICAgICAgICAgICAgICAgICBzdHJva2U6IFwicmdiYSgwLDAsMCwwLjUpXCIsXG4gICAgICAgICAgICAgICAgICAgICAgXCJzdHJva2Utd2lkdGhcIjogXCIyXCIsXG4gICAgICAgICAgICAgICAgICAgICAgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZSgtMTcgLTQwKXNjYWxlKDEuNCAxLjgpXCIsXG4gICAgICAgICAgICAgICAgICAgICAgZDpcbiAgICAgICAgICAgICAgICAgICAgICAgIFwiTTc4LjIxOSw3NS45NkgyMS43OGMtMi4yMjIsMC00LjAzLTEuODA4LTQuMDMtNC4wM1Y0Mi43OTVjMC0yLjIyMiwxLjgwOC00LjAzLDQuMDMtNC4wM2g1Ni40MzhjMi4yMjMsMCw0LjAzMSwxLjgwOCw0LjAzMSw0LjAzVjcxLjkzQzgyLjI1LDc0LjE1Miw4MC40NDEsNzUuOTYsNzguMjE5LDc1Ljk2eiBNMjEuNzgsNDIuMjY2Yy0wLjI4OCwwLTAuNTMsMC4yNDMtMC41MywwLjUzVjcxLjkzYzAsMC4yODcsMC4yNDMsMC41MywwLjUzLDAuNTNoNTYuNDM4YzAuMjg4LDAsMC41MzEtMC4yNDMsMC41MzEtMC41M1Y0Mi43OTVjMC0wLjI4Ny0wLjI0My0wLjUzLTAuNTMxLTAuNTNIMjEuNzh6IE03NS4xMDIsMzMuMTUzICBjMC0wLjk2Ni0wLjc4My0xLjc1LTEuNzUtMS43NUgyNi42NDhjLTAuOTY2LDAtMS43NSwwLjc4NC0xLjc1LDEuNzVzMC43ODQsMS43NSwxLjc1LDEuNzVoNDYuNzAzQzc0LjMxOCwzNC45MDMsNzUuMTAyLDM0LjExOSw3NS4xMDIsMzMuMTUzek02OS4zOTQsMjUuNzkxYzAtMC45NjYtMC43ODMtMS43NS0xLjc1LTEuNzVIMzIuMzU2Yy0wLjk2NiwwLTEuNzUsMC43ODQtMS43NSwxLjc1ICBzMC43ODQsMS43NSwxLjc1LDEuNzVoMzUuMjg4QzY4LjYxLDI3LjU0MSw2OS4zOTQsMjYuNzU3LDY5LjM5NCwyNS43OTF6XCJcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgfSlcbiAgICAgICAgICAgICAgICBdXG4gICAgICAgICAgICAgIClcbiAgICAgICAgICAgIF1cbiAgICAgICAgICApLFxuICAgICAgICAgIF92bS5fdihcIiBcIiksXG4gICAgICAgICAgX2MoXG4gICAgICAgICAgICBcImxpXCIsXG4gICAgICAgICAgICB7IHN0eWxlOiBbX3ZtLnRhYiA9PSA1ID8geyBvcGFjaXR5OiBcIjBcIiB9IDogeyBvcGFjaXR5OiBcIjFcIiB9XSB9LFxuICAgICAgICAgICAgW1xuICAgICAgICAgICAgICBfYyhcbiAgICAgICAgICAgICAgICBcInN2Z1wiLFxuICAgICAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICAgIGF0dHJzOiB7IHZpZXdCb3g6IFwiMCAwIDEwMCAxMDBcIiB9LFxuICAgICAgICAgICAgICAgICAgb246IHtcbiAgICAgICAgICAgICAgICAgICAgY2xpY2s6IGZ1bmN0aW9uKCRldmVudCkge1xuICAgICAgICAgICAgICAgICAgICAgIHJldHVybiBfdm0uY2hhbmdlVGFiKDUpXG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgIFtcbiAgICAgICAgICAgICAgICAgIF9jKFxuICAgICAgICAgICAgICAgICAgICBcImdcIixcbiAgICAgICAgICAgICAgICAgICAge1xuICAgICAgICAgICAgICAgICAgICAgIGF0dHJzOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICBmaWxsOiBcInJnYmEoMCwwLDAsMC41KVwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgc3Ryb2tlOiBcInJnYmEoMCwwLDAsMC41KVwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgXCJzdHJva2Utd2lkdGhcIjogXCI1XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlKC03IC0xMClzY2FsZSgxLjE4KVwiXG4gICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgICAgICBbXG4gICAgICAgICAgICAgICAgICAgICAgX2MoXCJwYXRoXCIsIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGF0dHJzOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgIGQ6XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgXCJNNzAuNSwzMC41QzcwLjUsMTkuMTk2Mjg5MSw2MS4zMDM3MTA5LDEwLDUwLDEwcy0yMC41LDkuMTk2Mjg5MS0yMC41LDIwLjVTMzguNjk2Mjg5MSw1MSw1MCw1MVM3MC41LDQxLjgwMzcxMDksNzAuNSwzMC41ek0zMS41LDMwLjVDMzEuNSwyMC4yOTg4MjgxLDM5Ljc5ODgyODEsMTIsNTAsMTJzMTguNSw4LjI5ODgyODEsMTguNSwxOC41UzYwLjIwMTE3MTksNDksNTAsNDlTMzEuNSw0MC43MDExNzE5LDMxLjUsMzAuNXpcIlxuICAgICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgICAgICAgICAgIF92bS5fdihcIiBcIiksXG4gICAgICAgICAgICAgICAgICAgICAgX2MoXCJwYXRoXCIsIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGF0dHJzOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgIGQ6XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgXCJNNjAuNDEyNTk3Nyw1Ni44NjMyODEySDM5LjU4NzQwMjNDMjYuMDI5Nzg1Miw1Ni44NjMyODEyLDE1LDY3Ljg5MzU1NDcsMTUsODEuNDUxMTcxOUMxNSw4Ni4xNjUwMzkxLDE4LjgzNDk2MDksOTAsMjMuNTQ4ODI4MSw5MGg1Mi45MDIzNDM4QzgxLjE2NTAzOTEsOTAsODUsODYuMTY1MDM5MSw4NSw4MS40NTExNzE5Qzg1LDY3Ljg5MzU1NDcsNzMuOTcwMjE0OCw1Ni44NjMyODEyLDYwLjQxMjU5NzcsNTYuODYzMjgxMnpNNzYuNDUxMTcxOSw4OEgyMy41NDg4MjgxQzE5LjkzNzk4ODMsODgsMTcsODUuMDYyNSwxNyw4MS40NTExNzE5YzAtMTIuNDU1MDc4MSwxMC4xMzI4MTI1LTIyLjU4Nzg5MDYsMjIuNTg3NDAyMy0yMi41ODc4OTA2aDIwLjgyNTE5NTNDNzIuODY3MTg3NSw1OC44NjMyODEyLDgzLDY4Ljk5NjA5MzgsODMsODEuNDUxMTcxOUM4Myw4NS4wNjI1LDgwLjA2MjAxMTcsODgsNzYuNDUxMTcxOSw4OHpcIlxuICAgICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICAgICAgICAgIF1cbiAgICAgICAgICAgICAgICAgIClcbiAgICAgICAgICAgICAgICBdXG4gICAgICAgICAgICAgIClcbiAgICAgICAgICAgIF1cbiAgICAgICAgICApXG4gICAgICAgIF0pXG4gICAgICBdKSxcbiAgICAgIF92bS5fdihcIiBcIiksXG4gICAgICBfYyhcbiAgICAgICAgXCJkaXZcIixcbiAgICAgICAge1xuICAgICAgICAgIHN0YXRpY0NsYXNzOiBcInRhYi1jdHJcIixcbiAgICAgICAgICBzdHlsZTogW1xuICAgICAgICAgICAgX3ZtLnRhYiA9PSAxXG4gICAgICAgICAgICAgID8geyBsZWZ0OiBcIjElXCIgfVxuICAgICAgICAgICAgICA6IF92bS50YWIgPT0gMlxuICAgICAgICAgICAgICA/IHsgbGVmdDogXCIxOS41JVwiIH1cbiAgICAgICAgICAgICAgOiBfdm0udGFiID09IDNcbiAgICAgICAgICAgICAgPyB7IGxlZnQ6IFwiMzglXCIgfVxuICAgICAgICAgICAgICA6IF92bS50YWIgPT0gNFxuICAgICAgICAgICAgICA/IHsgbGVmdDogXCI1Ni41JVwiIH1cbiAgICAgICAgICAgICAgOiBfdm0udGFiID09IDVcbiAgICAgICAgICAgICAgPyB7IGxlZnQ6IFwiNzUlXCIgfVxuICAgICAgICAgICAgICA6IG51bGxcbiAgICAgICAgICBdXG4gICAgICAgIH0sXG4gICAgICAgIFtcbiAgICAgICAgICBfYyhcInN2Z1wiLCB7IGF0dHJzOiB7IHZpZXdCb3g6IFwiMCAwIDExMDAgNjAwXCIgfSB9LCBbXG4gICAgICAgICAgICBfYyhcInBhdGhcIiwge1xuICAgICAgICAgICAgICBhdHRyczoge1xuICAgICAgICAgICAgICAgIGQ6XG4gICAgICAgICAgICAgICAgICBcIk0gMCAwIEMgMTUwIDAgMTUwIDM1MCAzMDAgNDUwIEMgNDUwIDU1MCA2NTAgNTUwIDgwMCA0NTAgQyA5NTAgMzUwIDk1MCAwIDExMDAgMCBcIixcbiAgICAgICAgICAgICAgICBmaWxsOiBcImxpZ2h0Z3JleVwiXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgX3ZtLl92KFwiIFwiKSxcbiAgICAgICAgICAgIF9jKFwiY2lyY2xlXCIsIHtcbiAgICAgICAgICAgICAgYXR0cnM6IHtcbiAgICAgICAgICAgICAgICBpZDogXCJzcGhlcmVcIixcbiAgICAgICAgICAgICAgICBjeDogXCI1NTBcIixcbiAgICAgICAgICAgICAgICBjeTogXCIxMjVcIixcbiAgICAgICAgICAgICAgICByOiBcIjMwMFwiLFxuICAgICAgICAgICAgICAgIGZpbGw6IFwiI2YzZjhmZVwiXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0pXG4gICAgICAgICAgXSlcbiAgICAgICAgXVxuICAgICAgKVxuICAgIF0pXG4gIF0pXG59XG52YXIgc3RhdGljUmVuZGVyRm5zID0gW11cbnJlbmRlci5fd2l0aFN0cmlwcGVkID0gdHJ1ZVxuXG5leHBvcnQgeyByZW5kZXIsIHN0YXRpY1JlbmRlckZucyB9Il0sIm1hcHBpbmdzIjoiQUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7Iiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!../../tmp/codepen/vuejs/src/pen.vue?vue&type=template&id=0755aed5&\n");
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js":
+/*!********************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/runtime/componentNormalizer.js ***!
+  \********************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return normalizeComponent; });\n/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nfunction normalizeComponent (\n  scriptExports,\n  render,\n  staticRenderFns,\n  functionalTemplate,\n  injectStyles,\n  scopeId,\n  moduleIdentifier, /* server only */\n  shadowMode /* vue-cli only */\n) {\n  // Vue.extend constructor export interop\n  var options = typeof scriptExports === 'function'\n    ? scriptExports.options\n    : scriptExports\n\n  // render functions\n  if (render) {\n    options.render = render\n    options.staticRenderFns = staticRenderFns\n    options._compiled = true\n  }\n\n  // functional template\n  if (functionalTemplate) {\n    options.functional = true\n  }\n\n  // scopedId\n  if (scopeId) {\n    options._scopeId = 'data-v-' + scopeId\n  }\n\n  var hook\n  if (moduleIdentifier) { // server build\n    hook = function (context) {\n      // 2.3 injection\n      context =\n        context || // cached call\n        (this.$vnode && this.$vnode.ssrContext) || // stateful\n        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n      // 2.2 with runInNewContext: true\n      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n        context = __VUE_SSR_CONTEXT__\n      }\n      // inject component styles\n      if (injectStyles) {\n        injectStyles.call(this, context)\n      }\n      // register component module identifier for async chunk inferrence\n      if (context && context._registeredComponents) {\n        context._registeredComponents.add(moduleIdentifier)\n      }\n    }\n    // used by ssr in case component is cached and beforeCreate\n    // never gets called\n    options._ssrRegister = hook\n  } else if (injectStyles) {\n    hook = shadowMode\n      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }\n      : injectStyles\n  }\n\n  if (hook) {\n    if (options.functional) {\n      // for template-only hot-reload because in that case the render fn doesn't\n      // go through the normalizer\n      options._injectStyles = hook\n      // register for functional component in vue file\n      var originalRender = options.render\n      options.render = function renderWithStyleInjection (h, context) {\n        hook.call(context)\n        return originalRender(h, context)\n      }\n    } else {\n      // inject component registration as beforeCreate hook\n      var existing = options.beforeCreate\n      options.beforeCreate = existing\n        ? [].concat(existing, hook)\n        : [hook]\n    }\n  }\n\n  return {\n    exports: scriptExports,\n    options: options\n  }\n}\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvdnVlLWxvYWRlci9saWIvcnVudGltZS9jb21wb25lbnROb3JtYWxpemVyLmpzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vQ29kZVBlblZ1ZUNvbXBvbmVudC8uL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9ydW50aW1lL2NvbXBvbmVudE5vcm1hbGl6ZXIuanM/Mjg3NyJdLCJzb3VyY2VzQ29udGVudCI6WyIvKiBnbG9iYWxzIF9fVlVFX1NTUl9DT05URVhUX18gKi9cblxuLy8gSU1QT1JUQU5UOiBEbyBOT1QgdXNlIEVTMjAxNSBmZWF0dXJlcyBpbiB0aGlzIGZpbGUgKGV4Y2VwdCBmb3IgbW9kdWxlcykuXG4vLyBUaGlzIG1vZHVsZSBpcyBhIHJ1bnRpbWUgdXRpbGl0eSBmb3IgY2xlYW5lciBjb21wb25lbnQgbW9kdWxlIG91dHB1dCBhbmQgd2lsbFxuLy8gYmUgaW5jbHVkZWQgaW4gdGhlIGZpbmFsIHdlYnBhY2sgdXNlciBidW5kbGUuXG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIG5vcm1hbGl6ZUNvbXBvbmVudCAoXG4gIHNjcmlwdEV4cG9ydHMsXG4gIHJlbmRlcixcbiAgc3RhdGljUmVuZGVyRm5zLFxuICBmdW5jdGlvbmFsVGVtcGxhdGUsXG4gIGluamVjdFN0eWxlcyxcbiAgc2NvcGVJZCxcbiAgbW9kdWxlSWRlbnRpZmllciwgLyogc2VydmVyIG9ubHkgKi9cbiAgc2hhZG93TW9kZSAvKiB2dWUtY2xpIG9ubHkgKi9cbikge1xuICAvLyBWdWUuZXh0ZW5kIGNvbnN0cnVjdG9yIGV4cG9ydCBpbnRlcm9wXG4gIHZhciBvcHRpb25zID0gdHlwZW9mIHNjcmlwdEV4cG9ydHMgPT09ICdmdW5jdGlvbidcbiAgICA/IHNjcmlwdEV4cG9ydHMub3B0aW9uc1xuICAgIDogc2NyaXB0RXhwb3J0c1xuXG4gIC8vIHJlbmRlciBmdW5jdGlvbnNcbiAgaWYgKHJlbmRlcikge1xuICAgIG9wdGlvbnMucmVuZGVyID0gcmVuZGVyXG4gICAgb3B0aW9ucy5zdGF0aWNSZW5kZXJGbnMgPSBzdGF0aWNSZW5kZXJGbnNcbiAgICBvcHRpb25zLl9jb21waWxlZCA9IHRydWVcbiAgfVxuXG4gIC8vIGZ1bmN0aW9uYWwgdGVtcGxhdGVcbiAgaWYgKGZ1bmN0aW9uYWxUZW1wbGF0ZSkge1xuICAgIG9wdGlvbnMuZnVuY3Rpb25hbCA9IHRydWVcbiAgfVxuXG4gIC8vIHNjb3BlZElkXG4gIGlmIChzY29wZUlkKSB7XG4gICAgb3B0aW9ucy5fc2NvcGVJZCA9ICdkYXRhLXYtJyArIHNjb3BlSWRcbiAgfVxuXG4gIHZhciBob29rXG4gIGlmIChtb2R1bGVJZGVudGlmaWVyKSB7IC8vIHNlcnZlciBidWlsZFxuICAgIGhvb2sgPSBmdW5jdGlvbiAoY29udGV4dCkge1xuICAgICAgLy8gMi4zIGluamVjdGlvblxuICAgICAgY29udGV4dCA9XG4gICAgICAgIGNvbnRleHQgfHwgLy8gY2FjaGVkIGNhbGxcbiAgICAgICAgKHRoaXMuJHZub2RlICYmIHRoaXMuJHZub2RlLnNzckNvbnRleHQpIHx8IC8vIHN0YXRlZnVsXG4gICAgICAgICh0aGlzLnBhcmVudCAmJiB0aGlzLnBhcmVudC4kdm5vZGUgJiYgdGhpcy5wYXJlbnQuJHZub2RlLnNzckNvbnRleHQpIC8vIGZ1bmN0aW9uYWxcbiAgICAgIC8vIDIuMiB3aXRoIHJ1bkluTmV3Q29udGV4dDogdHJ1ZVxuICAgICAgaWYgKCFjb250ZXh0ICYmIHR5cGVvZiBfX1ZVRV9TU1JfQ09OVEVYVF9fICE9PSAndW5kZWZpbmVkJykge1xuICAgICAgICBjb250ZXh0ID0gX19WVUVfU1NSX0NPTlRFWFRfX1xuICAgICAgfVxuICAgICAgLy8gaW5qZWN0IGNvbXBvbmVudCBzdHlsZXNcbiAgICAgIGlmIChpbmplY3RTdHlsZXMpIHtcbiAgICAgICAgaW5qZWN0U3R5bGVzLmNhbGwodGhpcywgY29udGV4dClcbiAgICAgIH1cbiAgICAgIC8vIHJlZ2lzdGVyIGNvbXBvbmVudCBtb2R1bGUgaWRlbnRpZmllciBmb3IgYXN5bmMgY2h1bmsgaW5mZXJyZW5jZVxuICAgICAgaWYgKGNvbnRleHQgJiYgY29udGV4dC5fcmVnaXN0ZXJlZENvbXBvbmVudHMpIHtcbiAgICAgICAgY29udGV4dC5fcmVnaXN0ZXJlZENvbXBvbmVudHMuYWRkKG1vZHVsZUlkZW50aWZpZXIpXG4gICAgICB9XG4gICAgfVxuICAgIC8vIHVzZWQgYnkgc3NyIGluIGNhc2UgY29tcG9uZW50IGlzIGNhY2hlZCBhbmQgYmVmb3JlQ3JlYXRlXG4gICAgLy8gbmV2ZXIgZ2V0cyBjYWxsZWRcbiAgICBvcHRpb25zLl9zc3JSZWdpc3RlciA9IGhvb2tcbiAgfSBlbHNlIGlmIChpbmplY3RTdHlsZXMpIHtcbiAgICBob29rID0gc2hhZG93TW9kZVxuICAgICAgPyBmdW5jdGlvbiAoKSB7IGluamVjdFN0eWxlcy5jYWxsKHRoaXMsIHRoaXMuJHJvb3QuJG9wdGlvbnMuc2hhZG93Um9vdCkgfVxuICAgICAgOiBpbmplY3RTdHlsZXNcbiAgfVxuXG4gIGlmIChob29rKSB7XG4gICAgaWYgKG9wdGlvbnMuZnVuY3Rpb25hbCkge1xuICAgICAgLy8gZm9yIHRlbXBsYXRlLW9ubHkgaG90LXJlbG9hZCBiZWNhdXNlIGluIHRoYXQgY2FzZSB0aGUgcmVuZGVyIGZuIGRvZXNuJ3RcbiAgICAgIC8vIGdvIHRocm91Z2ggdGhlIG5vcm1hbGl6ZXJcbiAgICAgIG9wdGlvbnMuX2luamVjdFN0eWxlcyA9IGhvb2tcbiAgICAgIC8vIHJlZ2lzdGVyIGZvciBmdW5jdGlvbmFsIGNvbXBvbmVudCBpbiB2dWUgZmlsZVxuICAgICAgdmFyIG9yaWdpbmFsUmVuZGVyID0gb3B0aW9ucy5yZW5kZXJcbiAgICAgIG9wdGlvbnMucmVuZGVyID0gZnVuY3Rpb24gcmVuZGVyV2l0aFN0eWxlSW5qZWN0aW9uIChoLCBjb250ZXh0KSB7XG4gICAgICAgIGhvb2suY2FsbChjb250ZXh0KVxuICAgICAgICByZXR1cm4gb3JpZ2luYWxSZW5kZXIoaCwgY29udGV4dClcbiAgICAgIH1cbiAgICB9IGVsc2Uge1xuICAgICAgLy8gaW5qZWN0IGNvbXBvbmVudCByZWdpc3RyYXRpb24gYXMgYmVmb3JlQ3JlYXRlIGhvb2tcbiAgICAgIHZhciBleGlzdGluZyA9IG9wdGlvbnMuYmVmb3JlQ3JlYXRlXG4gICAgICBvcHRpb25zLmJlZm9yZUNyZWF0ZSA9IGV4aXN0aW5nXG4gICAgICAgID8gW10uY29uY2F0KGV4aXN0aW5nLCBob29rKVxuICAgICAgICA6IFtob29rXVxuICAgIH1cbiAgfVxuXG4gIHJldHVybiB7XG4gICAgZXhwb3J0czogc2NyaXB0RXhwb3J0cyxcbiAgICBvcHRpb25zOiBvcHRpb25zXG4gIH1cbn1cbiJdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTsiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/vue-loader/lib/runtime/componentNormalizer.js\n");
+
+/***/ }),
+
+/***/ "./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js?!../../tmp/codepen/vuejs/src/pen.vue?vue&type=style&index=0&lang=css&":
+/*!********************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!/tmp/codepen/vuejs/src/pen.vue?vue&type=style&index=0&lang=css& ***!
+  \********************************************************************************************************************************************************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+eval("// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = __webpack_require__(/*! !../../../../var/task/node_modules/css-loader/dist/cjs.js!../../../../var/task/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../var/task/node_modules/vue-loader/lib??vue-loader-options!./pen.vue?vue&type=style&index=0&lang=css& */ \"./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js?!../../tmp/codepen/vuejs/src/pen.vue?vue&type=style&index=0&lang=css&\");\nif(typeof content === 'string') content = [[module.i, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = __webpack_require__(/*! ../../../../var/task/node_modules/vue-style-loader/lib/addStylesClient.js */ \"./node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"15ce9b79\", content, false, {});\n// Hot Module Replacement\nif(false) {}//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvdnVlLXN0eWxlLWxvYWRlci9pbmRleC5qcyEuL25vZGVfbW9kdWxlcy9jc3MtbG9hZGVyL2Rpc3QvY2pzLmpzIS4vbm9kZV9tb2R1bGVzL3Z1ZS1sb2FkZXIvbGliL2xvYWRlcnMvc3R5bGVQb3N0TG9hZGVyLmpzIS4vbm9kZV9tb2R1bGVzL3Z1ZS1sb2FkZXIvbGliL2luZGV4LmpzPyEuLi8uLi90bXAvY29kZXBlbi92dWVqcy9zcmMvcGVuLnZ1ZT92dWUmdHlwZT1zdHlsZSZpbmRleD0wJmxhbmc9Y3NzJi5qcyIsInNvdXJjZXMiOlsid2VicGFjazovL0NvZGVQZW5WdWVDb21wb25lbnQvL3RtcC9jb2RlcGVuL3Z1ZWpzL3NyYy9wZW4udnVlPzg2ZmUiXSwic291cmNlc0NvbnRlbnQiOlsiLy8gc3R5bGUtbG9hZGVyOiBBZGRzIHNvbWUgY3NzIHRvIHRoZSBET00gYnkgYWRkaW5nIGEgPHN0eWxlPiB0YWdcblxuLy8gbG9hZCB0aGUgc3R5bGVzXG52YXIgY29udGVudCA9IHJlcXVpcmUoXCIhIS4uLy4uLy4uLy4uL3Zhci90YXNrL25vZGVfbW9kdWxlcy9jc3MtbG9hZGVyL2Rpc3QvY2pzLmpzIS4uLy4uLy4uLy4uL3Zhci90YXNrL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9sb2FkZXJzL3N0eWxlUG9zdExvYWRlci5qcyEuLi8uLi8uLi8uLi92YXIvdGFzay9ub2RlX21vZHVsZXMvdnVlLWxvYWRlci9saWIvaW5kZXguanM/P3Z1ZS1sb2FkZXItb3B0aW9ucyEuL3Blbi52dWU/dnVlJnR5cGU9c3R5bGUmaW5kZXg9MCZsYW5nPWNzcyZcIik7XG5pZih0eXBlb2YgY29udGVudCA9PT0gJ3N0cmluZycpIGNvbnRlbnQgPSBbW21vZHVsZS5pZCwgY29udGVudCwgJyddXTtcbmlmKGNvbnRlbnQubG9jYWxzKSBtb2R1bGUuZXhwb3J0cyA9IGNvbnRlbnQubG9jYWxzO1xuLy8gYWRkIHRoZSBzdHlsZXMgdG8gdGhlIERPTVxudmFyIGFkZCA9IHJlcXVpcmUoXCIhLi4vLi4vLi4vLi4vdmFyL3Rhc2svbm9kZV9tb2R1bGVzL3Z1ZS1zdHlsZS1sb2FkZXIvbGliL2FkZFN0eWxlc0NsaWVudC5qc1wiKS5kZWZhdWx0XG52YXIgdXBkYXRlID0gYWRkKFwiMTVjZTliNzlcIiwgY29udGVudCwgZmFsc2UsIHt9KTtcbi8vIEhvdCBNb2R1bGUgUmVwbGFjZW1lbnRcbmlmKG1vZHVsZS5ob3QpIHtcbiAvLyBXaGVuIHRoZSBzdHlsZXMgY2hhbmdlLCB1cGRhdGUgdGhlIDxzdHlsZT4gdGFnc1xuIGlmKCFjb250ZW50LmxvY2Fscykge1xuICAgbW9kdWxlLmhvdC5hY2NlcHQoXCIhIS4uLy4uLy4uLy4uL3Zhci90YXNrL25vZGVfbW9kdWxlcy9jc3MtbG9hZGVyL2Rpc3QvY2pzLmpzIS4uLy4uLy4uLy4uL3Zhci90YXNrL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9sb2FkZXJzL3N0eWxlUG9zdExvYWRlci5qcyEuLi8uLi8uLi8uLi92YXIvdGFzay9ub2RlX21vZHVsZXMvdnVlLWxvYWRlci9saWIvaW5kZXguanM/P3Z1ZS1sb2FkZXItb3B0aW9ucyEuL3Blbi52dWU/dnVlJnR5cGU9c3R5bGUmaW5kZXg9MCZsYW5nPWNzcyZcIiwgZnVuY3Rpb24oKSB7XG4gICAgIHZhciBuZXdDb250ZW50ID0gcmVxdWlyZShcIiEhLi4vLi4vLi4vLi4vdmFyL3Rhc2svbm9kZV9tb2R1bGVzL2Nzcy1sb2FkZXIvZGlzdC9janMuanMhLi4vLi4vLi4vLi4vdmFyL3Rhc2svbm9kZV9tb2R1bGVzL3Z1ZS1sb2FkZXIvbGliL2xvYWRlcnMvc3R5bGVQb3N0TG9hZGVyLmpzIS4uLy4uLy4uLy4uL3Zhci90YXNrL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9pbmRleC5qcz8/dnVlLWxvYWRlci1vcHRpb25zIS4vcGVuLnZ1ZT92dWUmdHlwZT1zdHlsZSZpbmRleD0wJmxhbmc9Y3NzJlwiKTtcbiAgICAgaWYodHlwZW9mIG5ld0NvbnRlbnQgPT09ICdzdHJpbmcnKSBuZXdDb250ZW50ID0gW1ttb2R1bGUuaWQsIG5ld0NvbnRlbnQsICcnXV07XG4gICAgIHVwZGF0ZShuZXdDb250ZW50KTtcbiAgIH0pO1xuIH1cbiAvLyBXaGVuIHRoZSBtb2R1bGUgaXMgZGlzcG9zZWQsIHJlbW92ZSB0aGUgPHN0eWxlPiB0YWdzXG4gbW9kdWxlLmhvdC5kaXNwb3NlKGZ1bmN0aW9uKCkgeyB1cGRhdGUoKTsgfSk7XG59Il0sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js?!../../tmp/codepen/vuejs/src/pen.vue?vue&type=style&index=0&lang=css&\n");
+
+/***/ }),
+
+/***/ "./node_modules/vue-style-loader/lib/addStylesClient.js":
+/*!**************************************************************!*\
+  !*** ./node_modules/vue-style-loader/lib/addStylesClient.js ***!
+  \**************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return addStylesClient; });\n/* harmony import */ var _listToStyles__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./listToStyles */ \"./node_modules/vue-style-loader/lib/listToStyles.js\");\n/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n  Modified by Evan You @yyx990803\n*/\n\n\n\nvar hasDocument = typeof document !== 'undefined'\n\nif (typeof DEBUG !== 'undefined' && DEBUG) {\n  if (!hasDocument) {\n    throw new Error(\n    'vue-style-loader cannot be used in a non-browser environment. ' +\n    \"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.\"\n  ) }\n}\n\n/*\ntype StyleObject = {\n  id: number;\n  parts: Array<StyleObjectPart>\n}\n\ntype StyleObjectPart = {\n  css: string;\n  media: string;\n  sourceMap: ?string\n}\n*/\n\nvar stylesInDom = {/*\n  [id: number]: {\n    id: number,\n    refs: number,\n    parts: Array<(obj?: StyleObjectPart) => void>\n  }\n*/}\n\nvar head = hasDocument && (document.head || document.getElementsByTagName('head')[0])\nvar singletonElement = null\nvar singletonCounter = 0\nvar isProduction = false\nvar noop = function () {}\nvar options = null\nvar ssrIdKey = 'data-vue-ssr-id'\n\n// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n// tags it will allow on a page\nvar isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase())\n\nfunction addStylesClient (parentId, list, _isProduction, _options) {\n  isProduction = _isProduction\n\n  options = _options || {}\n\n  var styles = Object(_listToStyles__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(parentId, list)\n  addStylesToDom(styles)\n\n  return function update (newList) {\n    var mayRemove = []\n    for (var i = 0; i < styles.length; i++) {\n      var item = styles[i]\n      var domStyle = stylesInDom[item.id]\n      domStyle.refs--\n      mayRemove.push(domStyle)\n    }\n    if (newList) {\n      styles = Object(_listToStyles__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(parentId, newList)\n      addStylesToDom(styles)\n    } else {\n      styles = []\n    }\n    for (var i = 0; i < mayRemove.length; i++) {\n      var domStyle = mayRemove[i]\n      if (domStyle.refs === 0) {\n        for (var j = 0; j < domStyle.parts.length; j++) {\n          domStyle.parts[j]()\n        }\n        delete stylesInDom[domStyle.id]\n      }\n    }\n  }\n}\n\nfunction addStylesToDom (styles /* Array<StyleObject> */) {\n  for (var i = 0; i < styles.length; i++) {\n    var item = styles[i]\n    var domStyle = stylesInDom[item.id]\n    if (domStyle) {\n      domStyle.refs++\n      for (var j = 0; j < domStyle.parts.length; j++) {\n        domStyle.parts[j](item.parts[j])\n      }\n      for (; j < item.parts.length; j++) {\n        domStyle.parts.push(addStyle(item.parts[j]))\n      }\n      if (domStyle.parts.length > item.parts.length) {\n        domStyle.parts.length = item.parts.length\n      }\n    } else {\n      var parts = []\n      for (var j = 0; j < item.parts.length; j++) {\n        parts.push(addStyle(item.parts[j]))\n      }\n      stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }\n    }\n  }\n}\n\nfunction createStyleElement () {\n  var styleElement = document.createElement('style')\n  styleElement.type = 'text/css'\n  head.appendChild(styleElement)\n  return styleElement\n}\n\nfunction addStyle (obj /* StyleObjectPart */) {\n  var update, remove\n  var styleElement = document.querySelector('style[' + ssrIdKey + '~=\"' + obj.id + '\"]')\n\n  if (styleElement) {\n    if (isProduction) {\n      // has SSR styles and in production mode.\n      // simply do nothing.\n      return noop\n    } else {\n      // has SSR styles but in dev mode.\n      // for some reason Chrome can't handle source map in server-rendered\n      // style tags - source maps in <style> only works if the style tag is\n      // created and inserted dynamically. So we remove the server rendered\n      // styles and inject new ones.\n      styleElement.parentNode.removeChild(styleElement)\n    }\n  }\n\n  if (isOldIE) {\n    // use singleton mode for IE9.\n    var styleIndex = singletonCounter++\n    styleElement = singletonElement || (singletonElement = createStyleElement())\n    update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)\n    remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)\n  } else {\n    // use multi-style-tag mode in all other cases\n    styleElement = createStyleElement()\n    update = applyToTag.bind(null, styleElement)\n    remove = function () {\n      styleElement.parentNode.removeChild(styleElement)\n    }\n  }\n\n  update(obj)\n\n  return function updateStyle (newObj /* StyleObjectPart */) {\n    if (newObj) {\n      if (newObj.css === obj.css &&\n          newObj.media === obj.media &&\n          newObj.sourceMap === obj.sourceMap) {\n        return\n      }\n      update(obj = newObj)\n    } else {\n      remove()\n    }\n  }\n}\n\nvar replaceText = (function () {\n  var textStore = []\n\n  return function (index, replacement) {\n    textStore[index] = replacement\n    return textStore.filter(Boolean).join('\\n')\n  }\n})()\n\nfunction applyToSingletonTag (styleElement, index, remove, obj) {\n  var css = remove ? '' : obj.css\n\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = replaceText(index, css)\n  } else {\n    var cssNode = document.createTextNode(css)\n    var childNodes = styleElement.childNodes\n    if (childNodes[index]) styleElement.removeChild(childNodes[index])\n    if (childNodes.length) {\n      styleElement.insertBefore(cssNode, childNodes[index])\n    } else {\n      styleElement.appendChild(cssNode)\n    }\n  }\n}\n\nfunction applyToTag (styleElement, obj) {\n  var css = obj.css\n  var media = obj.media\n  var sourceMap = obj.sourceMap\n\n  if (media) {\n    styleElement.setAttribute('media', media)\n  }\n  if (options.ssrId) {\n    styleElement.setAttribute(ssrIdKey, obj.id)\n  }\n\n  if (sourceMap) {\n    // https://developer.chrome.com/devtools/docs/javascript-debugging\n    // this makes source maps inside style tags work properly in Chrome\n    css += '\\n/*# sourceURL=' + sourceMap.sources[0] + ' */'\n    // http://stackoverflow.com/a/26603875\n    css += '\\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'\n  }\n\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = css\n  } else {\n    while (styleElement.firstChild) {\n      styleElement.removeChild(styleElement.firstChild)\n    }\n    styleElement.appendChild(document.createTextNode(css))\n  }\n}\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvdnVlLXN0eWxlLWxvYWRlci9saWIvYWRkU3R5bGVzQ2xpZW50LmpzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vQ29kZVBlblZ1ZUNvbXBvbmVudC8uL25vZGVfbW9kdWxlcy92dWUtc3R5bGUtbG9hZGVyL2xpYi9hZGRTdHlsZXNDbGllbnQuanM/NDk5ZSJdLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICBNSVQgTGljZW5zZSBodHRwOi8vd3d3Lm9wZW5zb3VyY2Uub3JnL2xpY2Vuc2VzL21pdC1saWNlbnNlLnBocFxuICBBdXRob3IgVG9iaWFzIEtvcHBlcnMgQHNva3JhXG4gIE1vZGlmaWVkIGJ5IEV2YW4gWW91IEB5eXg5OTA4MDNcbiovXG5cbmltcG9ydCBsaXN0VG9TdHlsZXMgZnJvbSAnLi9saXN0VG9TdHlsZXMnXG5cbnZhciBoYXNEb2N1bWVudCA9IHR5cGVvZiBkb2N1bWVudCAhPT0gJ3VuZGVmaW5lZCdcblxuaWYgKHR5cGVvZiBERUJVRyAhPT0gJ3VuZGVmaW5lZCcgJiYgREVCVUcpIHtcbiAgaWYgKCFoYXNEb2N1bWVudCkge1xuICAgIHRocm93IG5ldyBFcnJvcihcbiAgICAndnVlLXN0eWxlLWxvYWRlciBjYW5ub3QgYmUgdXNlZCBpbiBhIG5vbi1icm93c2VyIGVudmlyb25tZW50LiAnICtcbiAgICBcIlVzZSB7IHRhcmdldDogJ25vZGUnIH0gaW4geW91ciBXZWJwYWNrIGNvbmZpZyB0byBpbmRpY2F0ZSBhIHNlcnZlci1yZW5kZXJpbmcgZW52aXJvbm1lbnQuXCJcbiAgKSB9XG59XG5cbi8qXG50eXBlIFN0eWxlT2JqZWN0ID0ge1xuICBpZDogbnVtYmVyO1xuICBwYXJ0czogQXJyYXk8U3R5bGVPYmplY3RQYXJ0PlxufVxuXG50eXBlIFN0eWxlT2JqZWN0UGFydCA9IHtcbiAgY3NzOiBzdHJpbmc7XG4gIG1lZGlhOiBzdHJpbmc7XG4gIHNvdXJjZU1hcDogP3N0cmluZ1xufVxuKi9cblxudmFyIHN0eWxlc0luRG9tID0gey8qXG4gIFtpZDogbnVtYmVyXToge1xuICAgIGlkOiBudW1iZXIsXG4gICAgcmVmczogbnVtYmVyLFxuICAgIHBhcnRzOiBBcnJheTwob2JqPzogU3R5bGVPYmplY3RQYXJ0KSA9PiB2b2lkPlxuICB9XG4qL31cblxudmFyIGhlYWQgPSBoYXNEb2N1bWVudCAmJiAoZG9jdW1lbnQuaGVhZCB8fCBkb2N1bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgnaGVhZCcpWzBdKVxudmFyIHNpbmdsZXRvbkVsZW1lbnQgPSBudWxsXG52YXIgc2luZ2xldG9uQ291bnRlciA9IDBcbnZhciBpc1Byb2R1Y3Rpb24gPSBmYWxzZVxudmFyIG5vb3AgPSBmdW5jdGlvbiAoKSB7fVxudmFyIG9wdGlvbnMgPSBudWxsXG52YXIgc3NySWRLZXkgPSAnZGF0YS12dWUtc3NyLWlkJ1xuXG4vLyBGb3JjZSBzaW5nbGUtdGFnIHNvbHV0aW9uIG9uIElFNi05LCB3aGljaCBoYXMgYSBoYXJkIGxpbWl0IG9uIHRoZSAjIG9mIDxzdHlsZT5cbi8vIHRhZ3MgaXQgd2lsbCBhbGxvdyBvbiBhIHBhZ2VcbnZhciBpc09sZElFID0gdHlwZW9mIG5hdmlnYXRvciAhPT0gJ3VuZGVmaW5lZCcgJiYgL21zaWUgWzYtOV1cXGIvLnRlc3QobmF2aWdhdG9yLnVzZXJBZ2VudC50b0xvd2VyQ2FzZSgpKVxuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBhZGRTdHlsZXNDbGllbnQgKHBhcmVudElkLCBsaXN0LCBfaXNQcm9kdWN0aW9uLCBfb3B0aW9ucykge1xuICBpc1Byb2R1Y3Rpb24gPSBfaXNQcm9kdWN0aW9uXG5cbiAgb3B0aW9ucyA9IF9vcHRpb25zIHx8IHt9XG5cbiAgdmFyIHN0eWxlcyA9IGxpc3RUb1N0eWxlcyhwYXJlbnRJZCwgbGlzdClcbiAgYWRkU3R5bGVzVG9Eb20oc3R5bGVzKVxuXG4gIHJldHVybiBmdW5jdGlvbiB1cGRhdGUgKG5ld0xpc3QpIHtcbiAgICB2YXIgbWF5UmVtb3ZlID0gW11cbiAgICBmb3IgKHZhciBpID0gMDsgaSA8IHN0eWxlcy5sZW5ndGg7IGkrKykge1xuICAgICAgdmFyIGl0ZW0gPSBzdHlsZXNbaV1cbiAgICAgIHZhciBkb21TdHlsZSA9IHN0eWxlc0luRG9tW2l0ZW0uaWRdXG4gICAgICBkb21TdHlsZS5yZWZzLS1cbiAgICAgIG1heVJlbW92ZS5wdXNoKGRvbVN0eWxlKVxuICAgIH1cbiAgICBpZiAobmV3TGlzdCkge1xuICAgICAgc3R5bGVzID0gbGlzdFRvU3R5bGVzKHBhcmVudElkLCBuZXdMaXN0KVxuICAgICAgYWRkU3R5bGVzVG9Eb20oc3R5bGVzKVxuICAgIH0gZWxzZSB7XG4gICAgICBzdHlsZXMgPSBbXVxuICAgIH1cbiAgICBmb3IgKHZhciBpID0gMDsgaSA8IG1heVJlbW92ZS5sZW5ndGg7IGkrKykge1xuICAgICAgdmFyIGRvbVN0eWxlID0gbWF5UmVtb3ZlW2ldXG4gICAgICBpZiAoZG9tU3R5bGUucmVmcyA9PT0gMCkge1xuICAgICAgICBmb3IgKHZhciBqID0gMDsgaiA8IGRvbVN0eWxlLnBhcnRzLmxlbmd0aDsgaisrKSB7XG4gICAgICAgICAgZG9tU3R5bGUucGFydHNbal0oKVxuICAgICAgICB9XG4gICAgICAgIGRlbGV0ZSBzdHlsZXNJbkRvbVtkb21TdHlsZS5pZF1cbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cblxuZnVuY3Rpb24gYWRkU3R5bGVzVG9Eb20gKHN0eWxlcyAvKiBBcnJheTxTdHlsZU9iamVjdD4gKi8pIHtcbiAgZm9yICh2YXIgaSA9IDA7IGkgPCBzdHlsZXMubGVuZ3RoOyBpKyspIHtcbiAgICB2YXIgaXRlbSA9IHN0eWxlc1tpXVxuICAgIHZhciBkb21TdHlsZSA9IHN0eWxlc0luRG9tW2l0ZW0uaWRdXG4gICAgaWYgKGRvbVN0eWxlKSB7XG4gICAgICBkb21TdHlsZS5yZWZzKytcbiAgICAgIGZvciAodmFyIGogPSAwOyBqIDwgZG9tU3R5bGUucGFydHMubGVuZ3RoOyBqKyspIHtcbiAgICAgICAgZG9tU3R5bGUucGFydHNbal0oaXRlbS5wYXJ0c1tqXSlcbiAgICAgIH1cbiAgICAgIGZvciAoOyBqIDwgaXRlbS5wYXJ0cy5sZW5ndGg7IGorKykge1xuICAgICAgICBkb21TdHlsZS5wYXJ0cy5wdXNoKGFkZFN0eWxlKGl0ZW0ucGFydHNbal0pKVxuICAgICAgfVxuICAgICAgaWYgKGRvbVN0eWxlLnBhcnRzLmxlbmd0aCA+IGl0ZW0ucGFydHMubGVuZ3RoKSB7XG4gICAgICAgIGRvbVN0eWxlLnBhcnRzLmxlbmd0aCA9IGl0ZW0ucGFydHMubGVuZ3RoXG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIHZhciBwYXJ0cyA9IFtdXG4gICAgICBmb3IgKHZhciBqID0gMDsgaiA8IGl0ZW0ucGFydHMubGVuZ3RoOyBqKyspIHtcbiAgICAgICAgcGFydHMucHVzaChhZGRTdHlsZShpdGVtLnBhcnRzW2pdKSlcbiAgICAgIH1cbiAgICAgIHN0eWxlc0luRG9tW2l0ZW0uaWRdID0geyBpZDogaXRlbS5pZCwgcmVmczogMSwgcGFydHM6IHBhcnRzIH1cbiAgICB9XG4gIH1cbn1cblxuZnVuY3Rpb24gY3JlYXRlU3R5bGVFbGVtZW50ICgpIHtcbiAgdmFyIHN0eWxlRWxlbWVudCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3N0eWxlJylcbiAgc3R5bGVFbGVtZW50LnR5cGUgPSAndGV4dC9jc3MnXG4gIGhlYWQuYXBwZW5kQ2hpbGQoc3R5bGVFbGVtZW50KVxuICByZXR1cm4gc3R5bGVFbGVtZW50XG59XG5cbmZ1bmN0aW9uIGFkZFN0eWxlIChvYmogLyogU3R5bGVPYmplY3RQYXJ0ICovKSB7XG4gIHZhciB1cGRhdGUsIHJlbW92ZVxuICB2YXIgc3R5bGVFbGVtZW50ID0gZG9jdW1lbnQucXVlcnlTZWxlY3Rvcignc3R5bGVbJyArIHNzcklkS2V5ICsgJ349XCInICsgb2JqLmlkICsgJ1wiXScpXG5cbiAgaWYgKHN0eWxlRWxlbWVudCkge1xuICAgIGlmIChpc1Byb2R1Y3Rpb24pIHtcbiAgICAgIC8vIGhhcyBTU1Igc3R5bGVzIGFuZCBpbiBwcm9kdWN0aW9uIG1vZGUuXG4gICAgICAvLyBzaW1wbHkgZG8gbm90aGluZy5cbiAgICAgIHJldHVybiBub29wXG4gICAgfSBlbHNlIHtcbiAgICAgIC8vIGhhcyBTU1Igc3R5bGVzIGJ1dCBpbiBkZXYgbW9kZS5cbiAgICAgIC8vIGZvciBzb21lIHJlYXNvbiBDaHJvbWUgY2FuJ3QgaGFuZGxlIHNvdXJjZSBtYXAgaW4gc2VydmVyLXJlbmRlcmVkXG4gICAgICAvLyBzdHlsZSB0YWdzIC0gc291cmNlIG1hcHMgaW4gPHN0eWxlPiBvbmx5IHdvcmtzIGlmIHRoZSBzdHlsZSB0YWcgaXNcbiAgICAgIC8vIGNyZWF0ZWQgYW5kIGluc2VydGVkIGR5bmFtaWNhbGx5LiBTbyB3ZSByZW1vdmUgdGhlIHNlcnZlciByZW5kZXJlZFxuICAgICAgLy8gc3R5bGVzIGFuZCBpbmplY3QgbmV3IG9uZXMuXG4gICAgICBzdHlsZUVsZW1lbnQucGFyZW50Tm9kZS5yZW1vdmVDaGlsZChzdHlsZUVsZW1lbnQpXG4gICAgfVxuICB9XG5cbiAgaWYgKGlzT2xkSUUpIHtcbiAgICAvLyB1c2Ugc2luZ2xldG9uIG1vZGUgZm9yIElFOS5cbiAgICB2YXIgc3R5bGVJbmRleCA9IHNpbmdsZXRvbkNvdW50ZXIrK1xuICAgIHN0eWxlRWxlbWVudCA9IHNpbmdsZXRvbkVsZW1lbnQgfHwgKHNpbmdsZXRvbkVsZW1lbnQgPSBjcmVhdGVTdHlsZUVsZW1lbnQoKSlcbiAgICB1cGRhdGUgPSBhcHBseVRvU2luZ2xldG9uVGFnLmJpbmQobnVsbCwgc3R5bGVFbGVtZW50LCBzdHlsZUluZGV4LCBmYWxzZSlcbiAgICByZW1vdmUgPSBhcHBseVRvU2luZ2xldG9uVGFnLmJpbmQobnVsbCwgc3R5bGVFbGVtZW50LCBzdHlsZUluZGV4LCB0cnVlKVxuICB9IGVsc2Uge1xuICAgIC8vIHVzZSBtdWx0aS1zdHlsZS10YWcgbW9kZSBpbiBhbGwgb3RoZXIgY2FzZXNcbiAgICBzdHlsZUVsZW1lbnQgPSBjcmVhdGVTdHlsZUVsZW1lbnQoKVxuICAgIHVwZGF0ZSA9IGFwcGx5VG9UYWcuYmluZChudWxsLCBzdHlsZUVsZW1lbnQpXG4gICAgcmVtb3ZlID0gZnVuY3Rpb24gKCkge1xuICAgICAgc3R5bGVFbGVtZW50LnBhcmVudE5vZGUucmVtb3ZlQ2hpbGQoc3R5bGVFbGVtZW50KVxuICAgIH1cbiAgfVxuXG4gIHVwZGF0ZShvYmopXG5cbiAgcmV0dXJuIGZ1bmN0aW9uIHVwZGF0ZVN0eWxlIChuZXdPYmogLyogU3R5bGVPYmplY3RQYXJ0ICovKSB7XG4gICAgaWYgKG5ld09iaikge1xuICAgICAgaWYgKG5ld09iai5jc3MgPT09IG9iai5jc3MgJiZcbiAgICAgICAgICBuZXdPYmoubWVkaWEgPT09IG9iai5tZWRpYSAmJlxuICAgICAgICAgIG5ld09iai5zb3VyY2VNYXAgPT09IG9iai5zb3VyY2VNYXApIHtcbiAgICAgICAgcmV0dXJuXG4gICAgICB9XG4gICAgICB1cGRhdGUob2JqID0gbmV3T2JqKVxuICAgIH0gZWxzZSB7XG4gICAgICByZW1vdmUoKVxuICAgIH1cbiAgfVxufVxuXG52YXIgcmVwbGFjZVRleHQgPSAoZnVuY3Rpb24gKCkge1xuICB2YXIgdGV4dFN0b3JlID0gW11cblxuICByZXR1cm4gZnVuY3Rpb24gKGluZGV4LCByZXBsYWNlbWVudCkge1xuICAgIHRleHRTdG9yZVtpbmRleF0gPSByZXBsYWNlbWVudFxuICAgIHJldHVybiB0ZXh0U3RvcmUuZmlsdGVyKEJvb2xlYW4pLmpvaW4oJ1xcbicpXG4gIH1cbn0pKClcblxuZnVuY3Rpb24gYXBwbHlUb1NpbmdsZXRvblRhZyAoc3R5bGVFbGVtZW50LCBpbmRleCwgcmVtb3ZlLCBvYmopIHtcbiAgdmFyIGNzcyA9IHJlbW92ZSA/ICcnIDogb2JqLmNzc1xuXG4gIGlmIChzdHlsZUVsZW1lbnQuc3R5bGVTaGVldCkge1xuICAgIHN0eWxlRWxlbWVudC5zdHlsZVNoZWV0LmNzc1RleHQgPSByZXBsYWNlVGV4dChpbmRleCwgY3NzKVxuICB9IGVsc2Uge1xuICAgIHZhciBjc3NOb2RlID0gZG9jdW1lbnQuY3JlYXRlVGV4dE5vZGUoY3NzKVxuICAgIHZhciBjaGlsZE5vZGVzID0gc3R5bGVFbGVtZW50LmNoaWxkTm9kZXNcbiAgICBpZiAoY2hpbGROb2Rlc1tpbmRleF0pIHN0eWxlRWxlbWVudC5yZW1vdmVDaGlsZChjaGlsZE5vZGVzW2luZGV4XSlcbiAgICBpZiAoY2hpbGROb2Rlcy5sZW5ndGgpIHtcbiAgICAgIHN0eWxlRWxlbWVudC5pbnNlcnRCZWZvcmUoY3NzTm9kZSwgY2hpbGROb2Rlc1tpbmRleF0pXG4gICAgfSBlbHNlIHtcbiAgICAgIHN0eWxlRWxlbWVudC5hcHBlbmRDaGlsZChjc3NOb2RlKVxuICAgIH1cbiAgfVxufVxuXG5mdW5jdGlvbiBhcHBseVRvVGFnIChzdHlsZUVsZW1lbnQsIG9iaikge1xuICB2YXIgY3NzID0gb2JqLmNzc1xuICB2YXIgbWVkaWEgPSBvYmoubWVkaWFcbiAgdmFyIHNvdXJjZU1hcCA9IG9iai5zb3VyY2VNYXBcblxuICBpZiAobWVkaWEpIHtcbiAgICBzdHlsZUVsZW1lbnQuc2V0QXR0cmlidXRlKCdtZWRpYScsIG1lZGlhKVxuICB9XG4gIGlmIChvcHRpb25zLnNzcklkKSB7XG4gICAgc3R5bGVFbGVtZW50LnNldEF0dHJpYnV0ZShzc3JJZEtleSwgb2JqLmlkKVxuICB9XG5cbiAgaWYgKHNvdXJjZU1hcCkge1xuICAgIC8vIGh0dHBzOi8vZGV2ZWxvcGVyLmNocm9tZS5jb20vZGV2dG9vbHMvZG9jcy9qYXZhc2NyaXB0LWRlYnVnZ2luZ1xuICAgIC8vIHRoaXMgbWFrZXMgc291cmNlIG1hcHMgaW5zaWRlIHN0eWxlIHRhZ3Mgd29yayBwcm9wZXJseSBpbiBDaHJvbWVcbiAgICBjc3MgKz0gJ1xcbi8qIyBzb3VyY2VVUkw9JyArIHNvdXJjZU1hcC5zb3VyY2VzWzBdICsgJyAqLydcbiAgICAvLyBodHRwOi8vc3RhY2tvdmVyZmxvdy5jb20vYS8yNjYwMzg3NVxuICAgIGNzcyArPSAnXFxuLyojIHNvdXJjZU1hcHBpbmdVUkw9ZGF0YTphcHBsaWNhdGlvbi9qc29uO2Jhc2U2NCwnICsgYnRvYSh1bmVzY2FwZShlbmNvZGVVUklDb21wb25lbnQoSlNPTi5zdHJpbmdpZnkoc291cmNlTWFwKSkpKSArICcgKi8nXG4gIH1cblxuICBpZiAoc3R5bGVFbGVtZW50LnN0eWxlU2hlZXQpIHtcbiAgICBzdHlsZUVsZW1lbnQuc3R5bGVTaGVldC5jc3NUZXh0ID0gY3NzXG4gIH0gZWxzZSB7XG4gICAgd2hpbGUgKHN0eWxlRWxlbWVudC5maXJzdENoaWxkKSB7XG4gICAgICBzdHlsZUVsZW1lbnQucmVtb3ZlQ2hpbGQoc3R5bGVFbGVtZW50LmZpcnN0Q2hpbGQpXG4gICAgfVxuICAgIHN0eWxlRWxlbWVudC5hcHBlbmRDaGlsZChkb2N1bWVudC5jcmVhdGVUZXh0Tm9kZShjc3MpKVxuICB9XG59XG4iXSwibWFwcGluZ3MiOiJBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTsiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/vue-style-loader/lib/addStylesClient.js\n");
+
+/***/ }),
+
+/***/ "./node_modules/vue-style-loader/lib/listToStyles.js":
+/*!***********************************************************!*\
+  !*** ./node_modules/vue-style-loader/lib/listToStyles.js ***!
+  \***********************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return listToStyles; });\n/**\n * Translates the list format produced by css-loader into something\n * easier to manipulate.\n */\nfunction listToStyles (parentId, list) {\n  var styles = []\n  var newStyles = {}\n  for (var i = 0; i < list.length; i++) {\n    var item = list[i]\n    var id = item[0]\n    var css = item[1]\n    var media = item[2]\n    var sourceMap = item[3]\n    var part = {\n      id: parentId + ':' + i,\n      css: css,\n      media: media,\n      sourceMap: sourceMap\n    }\n    if (!newStyles[id]) {\n      styles.push(newStyles[id] = { id: id, parts: [part] })\n    } else {\n      newStyles[id].parts.push(part)\n    }\n  }\n  return styles\n}\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvdnVlLXN0eWxlLWxvYWRlci9saWIvbGlzdFRvU3R5bGVzLmpzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vQ29kZVBlblZ1ZUNvbXBvbmVudC8uL25vZGVfbW9kdWxlcy92dWUtc3R5bGUtbG9hZGVyL2xpYi9saXN0VG9TdHlsZXMuanM/OWJiYyJdLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFRyYW5zbGF0ZXMgdGhlIGxpc3QgZm9ybWF0IHByb2R1Y2VkIGJ5IGNzcy1sb2FkZXIgaW50byBzb21ldGhpbmdcbiAqIGVhc2llciB0byBtYW5pcHVsYXRlLlxuICovXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBsaXN0VG9TdHlsZXMgKHBhcmVudElkLCBsaXN0KSB7XG4gIHZhciBzdHlsZXMgPSBbXVxuICB2YXIgbmV3U3R5bGVzID0ge31cbiAgZm9yICh2YXIgaSA9IDA7IGkgPCBsaXN0Lmxlbmd0aDsgaSsrKSB7XG4gICAgdmFyIGl0ZW0gPSBsaXN0W2ldXG4gICAgdmFyIGlkID0gaXRlbVswXVxuICAgIHZhciBjc3MgPSBpdGVtWzFdXG4gICAgdmFyIG1lZGlhID0gaXRlbVsyXVxuICAgIHZhciBzb3VyY2VNYXAgPSBpdGVtWzNdXG4gICAgdmFyIHBhcnQgPSB7XG4gICAgICBpZDogcGFyZW50SWQgKyAnOicgKyBpLFxuICAgICAgY3NzOiBjc3MsXG4gICAgICBtZWRpYTogbWVkaWEsXG4gICAgICBzb3VyY2VNYXA6IHNvdXJjZU1hcFxuICAgIH1cbiAgICBpZiAoIW5ld1N0eWxlc1tpZF0pIHtcbiAgICAgIHN0eWxlcy5wdXNoKG5ld1N0eWxlc1tpZF0gPSB7IGlkOiBpZCwgcGFydHM6IFtwYXJ0XSB9KVxuICAgIH0gZWxzZSB7XG4gICAgICBuZXdTdHlsZXNbaWRdLnBhcnRzLnB1c2gocGFydClcbiAgICB9XG4gIH1cbiAgcmV0dXJuIHN0eWxlc1xufVxuIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOyIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./node_modules/vue-style-loader/lib/listToStyles.js\n");
+
+/***/ })
+
+/******/ })["default"];
+});
\ No newline at end of file
diff --git a/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/license.txt b/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/license.txt
new file mode 100644
index 0000000..fb62db3
--- /dev/null
+++ b/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Hugo (https://codepen.io/Hulass/pen/yLYEabN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/src/index.html b/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/src/script.vue b/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/src/script.vue
new file mode 100644
index 0000000..b0cbea0
--- /dev/null
+++ b/mobile-tab-navigation-vue-gsap-cpc-vue-tabs-codepenchallenge/src/script.vue
@@ -0,0 +1,368 @@
+<template>
+  <section class="phone">
+    <div class="header">
+      <article class="head-wr">
+        <div>
+          <svg viewBox="0 0 512 512">
+            <g transform="translate(0,23)">
+              <circle cx="255.001" cy="433.5" r="33" fill="#000" />
+              <path
+                d="M506.632,154.864C440.902,84.341,351.895,45.501,255.997,45.5C160.107,45.501,71.1,84.341,5.369,154.864c7.53,8.08-7.085,20.736,0.995,28.267c8.081,7.53,20.736,7.086,28.267-0.995C92.711,119.82,171.327,85.501,256.004,85.5c84.67,0.001,163.286,34.32,221.366,96.636c3.939,4.226,9.28,6.364,14.635,6.364c4.883,0,9.778-1.778,13.632-5.369C513.717,175.599,514.163,162.944,506.632,154.864z"
+                fill="#000"
+              />
+              <path
+                d="M433.194,237.458c-48.587-48.954-111.516-75.913-177.196-75.911c-65.695,0.001-128.625,26.961-177.197,75.913c-7.78,7.841-7.731,20.504,0.11,28.284c7.841,7.78,20.504,7.731,28.284-0.11c41.005-41.326,93.851-64.086,148.803-64.087c54.938-0.002,107.784,22.759,148.804,64.089c3.91,3.939,9.052,5.911,14.196,5.911c5.092,0,10.188-1.934,14.09-5.805C440.927,257.961,440.975,245.298,433.194,237.458z"
+                fill="#000"
+              />
+              <path
+                d="M353.151,320.292c-26.02-25.779-63.317-41.792-97.339-41.792c-0.004,0-0.011,0-0.015,0h-1.441c-0.006,0-0.009,0-0.015,0c-34.023,0-71.323,16.014-97.342,41.792c-7.846,7.774-7.905,20.437-0.131,28.284c3.911,3.947,9.059,5.924,14.208,5.924c5.087,0,10.176-1.929,14.075-5.792c18.523-18.352,45.68-30.208,69.192-30.208c0.003,0,0.007,0,0.01,0h1.447c0.004,0,0.005,0,0.009,0c23.509,0,50.668,11.857,69.189,30.208c7.846,7.773,20.511,7.717,28.284-0.132C361.057,340.73,360.998,328.066,353.151,320.292z"
+                fill="#000"
+              />
+            </g>
+          </svg>
+        </div>
+        <div>
+          <svg viewBox="0 0 512 512">
+            <g stroke="#000" stroke-width="50">
+              <line x1="20" y1="350" x2="20" y2="495" />
+              <line x1="140" y1="250" x2="140" y2="495" />
+              <line x1="260" y1="150" x2="260" y2="495" />
+              <line x1="380" y1="50" x2="380" y2="495" />
+            </g>
+          </svg>
+        </div>
+        <div>
+          <svg viewBox="0 0 100 60">
+            <path
+              d="M91.5,39h-0.6v-8c0-2.2-1.8-4-3.9-4H9c-2.2,0-4,1.8-4,4V69c0,2.2,1.8,4,4,4h78c2.2,0,3.9-1.8,3.9-4v-8h0.6c2,0,3.5-1.7,3.5-3.8V42.8C95,40.7,93.4,39,91.5,39z M91,57h-4.1L87,69L9,69l0-38l78,0v12H91L91,57zM64.9,34.5H83v31H64.9H49.1h-2.3H43H28.8H26H13v-31h13h2.8H43h3.9h2.3H64.9z"
+              transform="translate(0 -25)"
+            />
+          </svg>
+        </div>
+      </article>
+    </div>
+    <div class="content">
+      <article class="main-wr">
+        <transition name="slide" mode="out-in" v-on:leave="bounceBall">
+          <div key="1" v-if="tab == 1">
+            <img
+              src="https://vector-illustrations.s3.eu-west-3.amazonaws.com/undraw-1.svg"
+              alt="illustration"
+            />
+          </div>
+
+          <div key="2" v-else-if="tab == 2">
+            <img
+              src="https://vector-illustrations.s3.eu-west-3.amazonaws.com/undraw-2.svg"
+              alt="illustration"
+            />
+          </div>
+          <div key="3" v-else-if="tab == 3">
+            <img
+              src="https://vector-illustrations.s3.eu-west-3.amazonaws.com/undraw-3.svg"
+              alt="illustration"
+            />
+          </div>
+          <div key="4" v-else-if="tab == 4">
+            <img
+              src="https://vector-illustrations.s3.eu-west-3.amazonaws.com/undraw-4.svg"
+              alt="illustration"
+            />
+          </div>
+          <div key="5" v-else>
+            <img
+              src="https://vector-illustrations.s3.eu-west-3.amazonaws.com/undraw-5.svg"
+              alt="illustration"
+            />
+          </div>
+        </transition>
+      </article>
+    </div>
+    <div class="tabs">
+      <nav>
+        <ul class="tab-nav">
+          <li v-bind:style="[tab == 1 ? { opacity: '0' } : { opacity: '1' }]">
+            <svg viewBox="0 0 100 100" @click="changeTab(1)">
+              <g
+                fill="rgba(0,0,0,0.5)"
+                stroke="rgba(0,0,0,0.25)"
+                stroke-width="5"
+              >
+                <path
+                  d="M37.3,1H7.9C4.1,1,1,4.1,1,7.9v29.4c0,3.8,3.1,6.9,6.9,6.9h29.4c3.8,0,6.9-3.1,6.9-6.9V7.9C44.3,4.1,41.2,1,37.3,1zM39.9,37.4c0,1.4-1.1,2.6-2.6,2.6H7.9c-1.4,0-2.6-1.1-2.6-2.6V7.9c0-1.4,1.1-2.6,2.6-2.6h29.4c1.4,0,2.6,1.1,2.6,2.6V37.4z"
+                />
+                <path
+                  d="M37.3,55.2H7.9c-3.8,0-6.9,3.1-6.9,6.9v29.4c0,3.8,3.1,6.9,6.9,6.9h29.4c3.8,0,6.9-3.1,6.9-6.9V62.2C44.3,58.4,41.2,55.2,37.3,55.2zM39.9,91.6c0,1.4-1.1,2.6-2.6,2.6H7.9c-1.4,0-2.6-1.1-2.6-2.6V62.2c0-1.4,1.1-2.6,2.6-2.6h29.4c1.4,0,2.6,1.1,2.6,2.6V91.6z"
+                />
+                <path
+                  d="M92.1,1H62.6c-3.8,0-6.9,3.1-6.9,6.9v29.4c0,3.8,3.1,6.9,6.9,6.9h29.4c3.8,0,6.9-3.1,6.9-6.9V7.9C99,4.1,95.9,1,92.1,1zM94.6,37.4c0,1.4-1.1,2.6-2.6,2.6H62.6c-1.4,0-2.6-1.1-2.6-2.6V7.9c0-1.4,1.1-2.6,2.6-2.6h29.4c1.4,0,2.6,1.1,2.6,2.6V37.4z"
+                />
+                <path
+                  d="M92.1,55.2H62.6c-3.8,0-6.9,3.1-6.9,6.9v29.4c0,3.8,3.1,6.9,6.9,6.9h29.4c3.8,0,6.9-3.1,6.9-6.9V62.2C99,58.4,95.9,55.2,92.1,55.2zM94.6,91.6c0,1.4-1.1,2.6-2.6,2.6H62.6c-1.4,0-2.6-1.1-2.6-2.6V62.2c0-1.4,1.1-2.6,2.6-2.6h29.4c1.4,0,2.6,1.1,2.6,2.6V91.6z"
+                />
+              </g>
+            </svg>
+          </li>
+          <li v-bind:style="[tab == 2 ? { opacity: '0' } : { opacity: '1' }]">
+            <svg viewBox="0 0 100 100" @click="changeTab(2)">
+              <g fill="rgba(0,0,0,0.5)" transform="translate(0 -10)scale(1.15)">
+                <path
+                  d="M37.693,24.11H89c3.313,0,6-2.685,6-6c0-3.312-2.688-6-6-6H37.693c-3.313,0-6,2.687-6,6C31.693,21.424,34.38,24.11,37.693,24.11z"
+                />
+                <path
+                  d="M89,75.891H37.693c-3.313,0-6,2.687-6,6s2.687,6,6,6H89c3.313,0,6-2.687,6-6C95,78.578,92.313,75.891,89,75.891z"
+                />
+                <path
+                  d="M89,44.001H37.693c-3.313,0-6,2.686-6,6c0,3.312,2.687,6,6,6H89c3.313,0,6-2.688,6-6C95,46.687,92.313,44.001,89,44.001z"
+                />
+                <circle cx="13.504" cy="18.11" r="8.504" />
+                <circle cx="13.504" cy="50.001" r="8.504" />
+                <circle cx="13.504" cy="81.89" r="8.504" />
+              </g>
+            </svg>
+          </li>
+          <li v-bind:style="[tab == 3 ? { opacity: '0' } : { opacity: '1' }]">
+            <svg viewBox="0 0 100 100" @click="changeTab(3)">
+              <g fill="rgba(0,0,0,0.5)">
+                <path
+                  d="M27.9,52.6c1,1,2.4,1.6,3.8,1.6c1.4,0,2.7-0.5,3.8-1.6c2.1-2.1,2.1-5.5,0-7.5L24,33.7h64.9c2.9,0,5.3-2.4,5.3-5.3S91.8,23,88.9,23H24l11.4-11.4c2.1-2.1,2.1-5.5,0-7.5c-2.1-2.1-5.5-2.1-7.5,0L7.3,24.6c-2.1,2.1-2.1,5.5,0,7.5L27.9,52.6z"
+                />
+                <path
+                  d="M72.1,47.4c-2.1-2.1-5.5-2.1-7.5,0c-2.1,2.1-2.1,5.5,0,7.5L76,66.3H11.1c-2.9,0-5.3,2.4-5.3,5.3S8.2,77,11.1,77H76L64.6,88.4c-2.1,2.1-2.1,5.5,0,7.5c1,1,2.4,1.6,3.8,1.6s2.7-0.5,3.8-1.6l20.5-20.5c2.1-2.1,2.1-5.5,0-7.5L72.1,47.4z"
+                />
+              </g>
+            </svg>
+          </li>
+          <li v-bind:style="[tab == 4 ? { opacity: '0' } : { opacity: '1' }]">
+            <svg viewBox="0 0 100 100" @click="changeTab(4)">
+              <path
+                fill="rgba(0,0,0,0.5)"
+                stroke="rgba(0,0,0,0.5)"
+                stroke-width="2"
+                transform="translate(-17 -40)scale(1.4 1.8)"
+                d="M78.219,75.96H21.78c-2.222,0-4.03-1.808-4.03-4.03V42.795c0-2.222,1.808-4.03,4.03-4.03h56.438c2.223,0,4.031,1.808,4.031,4.03V71.93C82.25,74.152,80.441,75.96,78.219,75.96z M21.78,42.266c-0.288,0-0.53,0.243-0.53,0.53V71.93c0,0.287,0.243,0.53,0.53,0.53h56.438c0.288,0,0.531-0.243,0.531-0.53V42.795c0-0.287-0.243-0.53-0.531-0.53H21.78z M75.102,33.153  c0-0.966-0.783-1.75-1.75-1.75H26.648c-0.966,0-1.75,0.784-1.75,1.75s0.784,1.75,1.75,1.75h46.703C74.318,34.903,75.102,34.119,75.102,33.153zM69.394,25.791c0-0.966-0.783-1.75-1.75-1.75H32.356c-0.966,0-1.75,0.784-1.75,1.75  s0.784,1.75,1.75,1.75h35.288C68.61,27.541,69.394,26.757,69.394,25.791z"
+              />
+            </svg>
+          </li>
+          <li v-bind:style="[tab == 5 ? { opacity: '0' } : { opacity: '1' }]">
+            <svg viewBox="0 0 100 100" @click="changeTab(5)">
+              <g
+                fill="rgba(0,0,0,0.5)"
+                stroke="rgba(0,0,0,0.5)"
+                stroke-width="5"
+                transform="translate(-7 -10)scale(1.18)"
+              >
+                <path
+                  d="M70.5,30.5C70.5,19.1962891,61.3037109,10,50,10s-20.5,9.1962891-20.5,20.5S38.6962891,51,50,51S70.5,41.8037109,70.5,30.5zM31.5,30.5C31.5,20.2988281,39.7988281,12,50,12s18.5,8.2988281,18.5,18.5S60.2011719,49,50,49S31.5,40.7011719,31.5,30.5z"
+                />
+                <path
+                  d="M60.4125977,56.8632812H39.5874023C26.0297852,56.8632812,15,67.8935547,15,81.4511719C15,86.1650391,18.8349609,90,23.5488281,90h52.9023438C81.1650391,90,85,86.1650391,85,81.4511719C85,67.8935547,73.9702148,56.8632812,60.4125977,56.8632812zM76.4511719,88H23.5488281C19.9379883,88,17,85.0625,17,81.4511719c0-12.4550781,10.1328125-22.5878906,22.5874023-22.5878906h20.8251953C72.8671875,58.8632812,83,68.9960938,83,81.4511719C83,85.0625,80.0620117,88,76.4511719,88z"
+                />
+              </g>
+            </svg>
+          </li>
+        </ul>
+      </nav>
+      <div
+        class="tab-ctr"
+        v-bind:style="[
+          tab == 1
+            ? { left: '1%' }
+            : tab == 2
+            ? { left: '19.5%' }
+            : tab == 3
+            ? { left: '38%' }
+            : tab == 4
+            ? { left: '56.5%' }
+            : tab == 5
+            ? { left: '75%' }
+            : null
+        ]"
+      >
+        <svg viewBox="0 0 1100 600">
+          <path
+            d="M 0 0 C 150 0 150 350 300 450 C 450 550 650 550 800 450 C 950 350 950 0 1100 0 "
+            fill="lightgrey"
+          />
+          <circle id="sphere" cx="550" cy="125" r="300" fill="#f3f8fe" />
+        </svg>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tab: 1
+    };
+  },
+  methods: {
+    changeTab(num) {
+      this.tab = num;
+    },
+    bounceBall() {
+      let tl = gsap.timeline();
+      tl.to("#sphere", {
+        cy: "625",
+        duration: 0.25
+      }).to("#sphere", { cy: "125", duration: 0.25 }, ">0.3");
+    }
+  }
+};
+</script>
+
+<style>
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+body {
+  background: #f3f8fe;
+  display: flex;
+  height: 100vh;
+}
+.phone {
+  width: 25vw;
+  min-width: 225px;
+  max-width: 325px;
+  height: 50vw;
+  min-height: 450px;
+  max-height: 650px;
+  margin: auto;
+  border: 2px solid black;
+  border-radius: 30px;
+  background: #f3f8fe;
+  position: relative;
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: 10% 80% 10%;
+  overflow: hidden;
+}
+
+.header {
+  grid-column: 1;
+  grid-row: 0/2;
+}
+.head-wr {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 3%;
+  padding-top: 20px;
+  padding-left: 8%;
+  position: relative;
+}
+.head-wr > div {
+  width: 2.5vw;
+  min-width: 15px;
+  max-width: 20px;
+  height: 2.5vw;
+  min-height: 15px;
+  max-height: 20px;
+}
+.head-wr > div:nth-of-type(3) {
+  width: 4vw;
+  min-width: 30px;
+  max-width: 40px;
+  height: 2.5vw;
+  min-height: 15px;
+  max-height: 20px;
+  position: absolute;
+  right: 8%;
+  transform: rotate(180deg);
+}
+.head-wr > div > svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.content {
+  grid-column: 1;
+  grid-row: 2/3;
+}
+.main-wr {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+  background: lightgrey;
+}
+.main-wr > div {
+  margin: auto;
+  width: 80%;
+  height: auto;
+  position: relative;
+}
+.slide-enter,
+.slide-leave-to {
+  transform: translateX(120%);
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.4s ease-out;
+}
+.main-wr > div > img {
+  max-width: 100%;
+  height: auto;
+}
+.tabs {
+  grid-column: 1;
+  grid-row: 3/4;
+  position: relative;
+}
+nav {
+  position: absolute;
+  top: -25%;
+  width: 100%;
+  height: 100%;
+}
+.tab-nav {
+  position: absolute;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  list-style-type: none;
+  border-bottom-left-radius: 30px;
+  border-bottom-right-radius: 30px;
+}
+.tab-nav > li {
+  width: 2.5vw;
+  min-width: 20px;
+  max-width: 25px;
+  height: 2.5vw;
+  min-height: 20px;
+  max-height: 25px;
+  padding: 1%;
+  top: 50%;
+  transform: translateY(-38%);
+  transition: opacity 0.25s ease 0.075s;
+}
+.tab-nav > li > svg {
+  overflow: visible;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.tab-ctr {
+  position: absolute;
+  width: 25%;
+  height: 100%;
+  bottom: 0;
+  transition: all 0.8s ease;
+}
+.tab-ctr > svg {
+  width: 100%;
+  height: 65%;
+  overflow: visible;
+}
+</style>
diff --git a/modern-blog-layout-with-css-grid/README.markdown b/modern-blog-layout-with-css-grid/README.markdown
new file mode 100644
index 0000000..0ff0665
--- /dev/null
+++ b/modern-blog-layout-with-css-grid/README.markdown
@@ -0,0 +1,6 @@
+# Modern Blog Layout with CSS Grid
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/TurkAysenur/pen/gOmMgpx](https://codepen.io/TurkAysenur/pen/gOmMgpx).
+
+Design by Irakli Nadirashvili
+https://dribbble.com/shots/15656415-Blog-Self-Control
diff --git a/modern-blog-layout-with-css-grid/dist/index.html b/modern-blog-layout-with-css-grid/dist/index.html
new file mode 100644
index 0000000..4f6b203
--- /dev/null
+++ b/modern-blog-layout-with-css-grid/dist/index.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Modern Blog Layout with CSS Grid</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="blog">
+ <div class="blog-part is-menu">
+  <a href="#" class="blog-menu">
+   Work
+   <svg fill="none" stroke="currentColor" stroke-width=".7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-right" viewBox="0 0 24 24">
+    <path d="M7 17L17 7M7 7h10v10" />
+   </svg>
+  </a>
+  <a href="#" class="blog-menu">Studio</a>
+  <a href="#" class="blog-menu">Blog</a>
+  <a href="#" class="blog-menu">Contact</a>
+  <a href="#" class="blog-menu mention">@MagazineDope</a>
+  <a href="#" class="blog-menu subscribe">Subscribe</a>
+ </div>
+ <div class="blog-header blog-is-sticky">
+  <div class="blog-article header-article">
+   <div class="blog-big__title">Self</div>
+   <div class="blog-menu rounded small-title">Pinned Issue</div>
+  </div>
+  <div class="blog-article page-number">
+   NO. 01
+  </div>
+ </div>
+ <div class="blog-header-container">
+  <div class="blog-header">
+   <div class="blog-article header-article">
+    <div class="blog-big__title">Esteem</div>
+    <div class="blog-menu small-title date">12.06.2021</div>
+   </div>
+   <div class="blog-article">
+    <img src="https://images.unsplash.com/photo-1496629062893-b0f566065d44?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjV8fGJsYWNrJTIwYW5kJTIwd2hpdGV8ZW58MHwwfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
+    <h2>Sharing The <span>Widespread</span> Acclaim About Motivation</h2>
+    <div class="blog-detail">
+     <span>By Richard Carnation</span>
+     <span>5 Min Read</span>
+    </div>
+    <p>Blonde received widespread acclaim, with critics praising Ocean's introspective lyrics and the album's unconventional</p>
+    <a href="#">
+     <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-right" viewBox="0 0 24 24">
+      <path d="M15 10l5 5-5 5" />
+      <path d="M4 4v7a4 4 0 004 4h12" />
+     </svg>
+     See More
+    </a>
+   </div>
+  </div>
+  <div class="blog-header">
+   <div class="blog-article header-article">
+    <div class="blog-big__title">Love</div>
+    <div class="blog-menu small-title date">12.06.2021</div>
+   </div>
+   <div class="blog-article">
+    <img src="https://images.unsplash.com/photo-1529255484355-cb73c33c04bb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTh8fGJsYWNrJTIwYW5kJTIwd2hpdGV8ZW58MHwwfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
+    <h2>Talking About <span>Vulnerability</span> During Quarantine</h2>
+    <div class="blog-detail">
+     <span>By Tom Hiddleston</span>
+     <span>5 Min Read</span>
+    </div>
+    <p>Having traveled to Turkey multiple times, with critics praising Ocean's introspective lyrics and the album's unconventional</p>
+    <a href="#">
+     <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-right" viewBox="0 0 24 24">
+      <path d="M15 10l5 5-5 5" />
+      <path d="M4 4v7a4 4 0 004 4h12" />
+     </svg>
+     See More
+    </a>
+   </div>
+  </div>
+  <div class="blog-header">
+   <div class="blog-article header-article">
+    <div class="blog-big__title">Control</div>
+    <div class="blog-menu small-title date">12.06.2021</div>
+   </div>
+   <div class="blog-article">
+    <img src="https://images.unsplash.com/photo-1616248249518-b16013cd4e42?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTkzfHxibGFjayUyMGFuZCUyMHdoaXRlfGVufDB8MHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
+    <h2>How 2020 Changed <span>Understanding</span> Of Mental Health</h2>
+    <div class="blog-detail">
+     <span>By Scarlett Witch</span>
+     <span>5 Min Read</span>
+    </div>
+    <p>Time is defines ad the indefinete continued progress, with critics praising Ocean's introspective lyrics and the album's</p>
+    <a href="#">
+     <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-right" viewBox="0 0 24 24">
+      <path d="M15 10l5 5-5 5" />
+      <path d="M4 4v7a4 4 0 004 4h12" />
+     </svg>
+     See More
+    </a>
+   </div>
+  </div>
+ </div>
+ <div class="blog-part right-blog">
+  <marquee width="100%" direction="left">
+   <span>Now And Then You Miss It Sounds Make You Cry</span>
+   <span>Now In - MoMa Sharing Exhibition NOW</span>
+   <span>NYC Opens After Long Lockdown Check</span>
+  </marquee>
+  <div class="blog-right-title-container">
+   <div class="blog-right-title">
+    Featured Articles
+   </div>
+   <div class="blog-menu rounded">See All</div>
+  </div>
+  <div class="blog-right">
+   <div class="blog-right-container">
+    <div class="blog-title-date">
+     <div class="blog-right-page">1</div>
+     <div class="date">12.06.2021</div>
+    </div>
+    <div class="blog-right-page-title">Blonde - Widespread Acclaim</div>
+    <div class="blog-right-page-subtitle">Blonde received widespread acclaim, with critics praising Ocean's introspective lyrics and the album's</div>
+   </div>
+   <div class="blog-right-container">
+    <div class="blog-title-date">
+     <div class="blog-right-page">2</div>
+     <div class="date">12.06.2021</div>
+    </div>
+    <div class="blog-right-page-title">Introspective Lyrics and Beats</div>
+    <div class="blog-right-page-subtitle">When we toured Scotland we stopped at several selft-sealing hpuses because hotels would</div>
+   </div>
+   <div class="blog-right-container">
+    <div class="blog-title-date">
+     <div class="blog-right-page">3</div>
+     <div class="date">12.06.2021</div>
+    </div>
+    <div class="blog-right-page-title">The Language Of Gris: Comples Beauty Of Monochrome</div>
+    <div class="blog-right-page-subtitle">The interior concept was conceived of by Dutch archtitect Studio Anne Holtrop who cleverly emulated</div>
+   </div>
+   <div class="blog-right-container">
+    <div class="blog-title-date">
+     <div class="blog-right-page">4</div>
+     <div class="date">12.06.2021</div>
+    </div>
+    <div class="blog-right-page-title">A24 IS LAUNCHING ITS OWN BEAUTY BRAND</div>
+    <div class="blog-right-page-subtitle">Blonde received widespread acclaim, with critics praising Ocean's introspective lyrics and the album's</div>
+   </div>
+   <div class="blog-right-container">
+    <div class="blog-title-date">
+     <div class="blog-right-page">5</div>
+     <div class="date">12.06.2021</div>
+    </div>
+    <div class="blog-right-page-title">Elon Musk's SpaceX is launching a moon satellite</div>
+    <div class="blog-right-page-subtitle">The interior concept was conceived of by Dutch archtitect Studio Anne Holtrop who cleverly emulated</div>
+   </div>
+   <div class="blog-right-container">
+    <div class="blog-title-date">
+     <div class="blog-right-page">6</div>
+     <div class="date">12.06.2021</div>
+    </div>
+    <div class="blog-right-page-title">What Happens When You Leave Your Old life Behind</div>
+    <div class="blog-right-page-subtitle">The interior concept was conceived of by Dutch archtitect Studio Anne Holtrop who cleverly emulated</div>
+   </div>
+   <div class="circle">
+    <div class="circle-title">Leave Your Old Life Behind</div>
+    <div class="circle-subtitle">Don't try to be like someone else, be yourselft. Be secure with yourself.</div>
+    <div class="circle-footer">Explore</div>
+   </div>
+  </div>
+ </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/modern-blog-layout-with-css-grid/dist/style.css b/modern-blog-layout-with-css-grid/dist/style.css
new file mode 100644
index 0000000..1cac533
--- /dev/null
+++ b/modern-blog-layout-with-css-grid/dist/style.css
@@ -0,0 +1,439 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,500&family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap");
+* {
+  outline: none;
+  box-sizing: border-box;
+}
+
+html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+
+img {
+  max-width: 100%;
+}
+
+body {
+  background-color: #121418;
+  display: flex;
+  font-family: "Inter", sans-serif;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  padding: 0 2em;
+  font-weight: 400;
+  height: 100vh;
+}
+@media screen and (max-width: 768px) {
+  body {
+    padding: 0;
+  }
+}
+
+.blog {
+  background-color: #e9e6e4;
+  max-width: 1350px;
+  display: grid;
+  height: 90vh;
+  max-height: 800px;
+  overflow: hidden;
+  grid-template-columns: 15% 20% 35% 30%;
+  grid-template-rows: 100%;
+  width: 100%;
+  padding: 40px 4px;
+  position: relative;
+}
+@media screen and (max-width: 1030px) {
+  .blog {
+    grid-template-columns: 20% 50% 30%;
+  }
+}
+@media screen and (max-width: 768px) {
+  .blog {
+    grid-template-columns: 25% 75%;
+    width: 100%;
+    max-width: none;
+  }
+}
+@media screen and (max-width: 560px) {
+  .blog {
+    grid-template-columns: 100%;
+  }
+}
+.blog-part {
+  padding: 0 20px;
+}
+.blog-part:not(:last-child) {
+  border-right: 1px solid #94918f;
+}
+.blog-menu {
+  font-size: 22px;
+  text-decoration: none;
+  color: #161419;
+  display: flex;
+  letter-spacing: -0.5px;
+  align-items: center;
+}
+@media screen and (max-width: 1260px) {
+  .blog-menu {
+    font-size: 1.6vw;
+  }
+}
+.blog-menu svg {
+  width: 22px;
+  margin-left: 4px;
+}
+.blog-menu + .blog-menu {
+  margin-top: 24px;
+}
+.blog-menu.mention {
+  margin-top: auto;
+  font-size: 19px;
+}
+@media screen and (max-width: 1260px) {
+  .blog-menu.mention {
+    font-size: 1.4vw;
+  }
+}
+.blog-menu.subscribe {
+  margin-top: 8px;
+  font-size: 19px;
+  position: relative;
+}
+@media screen and (max-width: 1260px) {
+  .blog-menu.subscribe {
+    font-size: 1.4vw;
+  }
+}
+.blog-menu.subscribe:before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  background-color: #161419;
+  left: 0;
+  border-radius: 1px;
+  margin-right: 14px;
+}
+.blog-menu.rounded:before {
+  content: "";
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  background-color: #161419;
+  margin-right: 12px;
+}
+.blog .is-menu {
+  display: flex;
+  flex-direction: column;
+}
+@media screen and (max-width: 1030px) {
+  .blog .is-menu {
+    display: none;
+  }
+}
+.blog-big__title {
+  font-size: 132px;
+  font-family: "Space Grotesk", sans-serif;
+  font-weight: 700;
+  letter-spacing: -5px;
+  line-height: 1;
+  margin-bottom: 6px;
+}
+@media screen and (max-width: 1400px) {
+  .blog-big__title {
+    font-size: 120px;
+  }
+}
+@media screen and (max-width: 1260px) {
+  .blog-big__title {
+    font-size: 9vw;
+    letter-spacing: -2px;
+  }
+}
+@media screen and (max-width: 560px) {
+  .blog-big__title {
+    font-size: 36px;
+    margin-bottom: 12px;
+  }
+}
+.blog-header {
+  display: flex;
+  flex-direction: column;
+}
+.blog-article {
+  padding: 0 20px;
+}
+.blog-article img {
+  height: 260px;
+  max-height: 22vh;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  filter: grayscale(1);
+}
+
+.page-number {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100%;
+  font-size: 72px;
+  text-align: center;
+  letter-spacing: -3px;
+  font-weight: lighter;
+  font-family: "Space Grotesk", sans-serif;
+  border-right: 1px solid #94918f;
+  white-space: nowrap;
+}
+@media screen and (max-width: 1260px) {
+  .page-number {
+    font-size: 5vw;
+  }
+}
+
+.small-title {
+  border-bottom: 1px solid #94918f;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+}
+@media screen and (max-width: 560px) {
+  .small-title {
+    font-size: 14px;
+    position: absolute;
+    top: 10px;
+    right: 24px;
+    border-bottom: 0;
+  }
+}
+
+.date {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.blog-article h2 {
+  font-size: 26px;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 8px 0 8px;
+}
+.blog-article h2 span {
+  font-family: "Playfair Display", serif;
+}
+.blog-article p {
+  line-height: 1.5;
+  margin: 14px 0;
+}
+.blog-article a {
+  color: #161419;
+  text-decoration: none;
+  font-size: 26px;
+  letter-spacing: -1px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: auto;
+  border-top: 1px solid #94918f;
+  padding-top: 14px;
+}
+.blog-article a svg {
+  width: 26px;
+  margin-right: 10px;
+}
+
+.blog-detail {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+}
+.blog-detail span {
+  font-family: "Playfair Display", serif;
+}
+
+.blog-header-container {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  -ms-scroll-snap-type: y mandatory;
+      scroll-snap-type: y mandatory;
+  border-right: 1px solid #94918f;
+}
+@media screen and (max-width: 768px) {
+  .blog-header-container {
+    border-right: 0;
+  }
+}
+.blog-header-container > * {
+  flex-shrink: 0;
+  min-height: 100%;
+  scroll-snap-align: start;
+}
+.blog-header-container .blog-article:not(.header-article) {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+marquee {
+  font-size: 20px;
+  background-color: #121418;
+  color: #e9e6e4;
+  padding: 6px 0;
+  width: calc(100% + 44px);
+  margin-left: -20px;
+  flex-shrink: 0;
+}
+marquee span:before {
+  display: inline-block;
+  content: "";
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  position: relative;
+  top: -1px;
+  vertical-align: baseline;
+  background-color: #e9e6e4;
+  margin: 0 16px;
+}
+
+.blog-right {
+  overflow: auto;
+  height: calc(100% + 60px);
+}
+.blog-right .rounded {
+  font-style: italic;
+  font-size: 18px;
+}
+.blog-right .rounded:before {
+  content: "";
+  border-radius: 50%;
+  width: 9px;
+  height: 9px;
+  background-color: #161419;
+  margin-right: 6px;
+}
+
+.blog-right-title {
+  font-size: 25px;
+  font-family: "Playfair Display", serif;
+}
+
+.blog-right-title-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #94918f;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  margin-top: 100px;
+  letter-spacing: -1px;
+}
+@media screen and (max-width: 1400px) {
+  .blog-right-title-container {
+    margin-top: 88px;
+  }
+}
+@media screen and (max-width: 1260px) {
+  .blog-right-title-container {
+    margin-top: 6vw;
+  }
+}
+@media screen and (max-width: 1030px) {
+  .blog-right-title-container {
+    margin-top: 5vw;
+  }
+}
+
+.blog-title-date {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.blog-right-page {
+  font-size: 56px;
+  margin-bottom: 16px;
+  font-family: "Space Grotesk", sans-serif;
+}
+.blog-right-page-title {
+  font-family: "Space Grotesk", sans-serif;
+  font-size: 28px;
+  font-weight: 600;
+  max-width: 16ch;
+  letter-spacing: -2px;
+}
+.blog-right-page-subtitle {
+  max-width: 33ch;
+  font-size: 15px;
+  margin-top: 12px;
+  line-height: 1.4;
+}
+
+.blog-right-container + .blog-right-container {
+  margin-top: 40px;
+}
+
+.right-blog {
+  display: flex;
+  flex-direction: column;
+}
+@media screen and (max-width: 768px) {
+  .right-blog {
+    display: none;
+  }
+}
+@media screen and (max-width: 1030px) {
+  .right-blog .blog-menu {
+    display: none;
+  }
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+.circle {
+  width: 100%;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  background-color: #121418;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  color: #e9e6e4;
+  padding: 20px;
+  text-align: center;
+  margin-top: 40px;
+}
+.circle-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  font-family: "Space Grotesk", sans-serif;
+}
+@media screen and (max-width: 1030px) {
+  .circle-title {
+    display: none;
+  }
+}
+.circle-subtitle {
+  max-width: 30ch;
+  font-size: 14px;
+  line-height: 1.3;
+  margin-bottom: 16px;
+}
+.circle-footer {
+  font-family: "Playfair Display", serif;
+  font-size: 30px;
+}
+
+@media screen and (max-width: 560px) {
+  .blog-is-sticky {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/modern-blog-layout-with-css-grid/license.txt b/modern-blog-layout-with-css-grid/license.txt
new file mode 100644
index 0000000..eddccb9
--- /dev/null
+++ b/modern-blog-layout-with-css-grid/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Aysenur Turk (https://codepen.io/TurkAysenur/pen/gOmMgpx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/modern-blog-layout-with-css-grid/src/index.html b/modern-blog-layout-with-css-grid/src/index.html
new file mode 100644
index 0000000..03d53ab
--- /dev/null
+++ b/modern-blog-layout-with-css-grid/src/index.html
@@ -0,0 +1,160 @@
+<div class="blog">
+ <div class="blog-part is-menu">
+  <a href="#" class="blog-menu">
+   Work
+   <svg fill="none" stroke="currentColor" stroke-width=".7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-right" viewBox="0 0 24 24">
+    <path d="M7 17L17 7M7 7h10v10" />
+   </svg>
+  </a>
+  <a href="#" class="blog-menu">Studio</a>
+  <a href="#" class="blog-menu">Blog</a>
+  <a href="#" class="blog-menu">Contact</a>
+  <a href="#" class="blog-menu mention">@MagazineDope</a>
+  <a href="#" class="blog-menu subscribe">Subscribe</a>
+ </div>
+ <div class="blog-header blog-is-sticky">
+  <div class="blog-article header-article">
+   <div class="blog-big__title">Self</div>
+   <div class="blog-menu rounded small-title">Pinned Issue</div>
+  </div>
+  <div class="blog-article page-number">
+   NO. 01
+  </div>
+ </div>
+ <div class="blog-header-container">
+  <div class="blog-header">
+   <div class="blog-article header-article">
+    <div class="blog-big__title">Esteem</div>
+    <div class="blog-menu small-title date">12.06.2021</div>
+   </div>
+   <div class="blog-article">
+    <img src="https://images.unsplash.com/photo-1496629062893-b0f566065d44?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjV8fGJsYWNrJTIwYW5kJTIwd2hpdGV8ZW58MHwwfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
+    <h2>Sharing The <span>Widespread</span> Acclaim About Motivation</h2>
+    <div class="blog-detail">
+     <span>By Richard Carnation</span>
+     <span>5 Min Read</span>
+    </div>
+    <p>Blonde received widespread acclaim, with critics praising Ocean's introspective lyrics and the album's unconventional</p>
+    <a href="#">
+     <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-right" viewBox="0 0 24 24">
+      <path d="M15 10l5 5-5 5" />
+      <path d="M4 4v7a4 4 0 004 4h12" />
+     </svg>
+     See More
+    </a>
+   </div>
+  </div>
+  <div class="blog-header">
+   <div class="blog-article header-article">
+    <div class="blog-big__title">Love</div>
+    <div class="blog-menu small-title date">12.06.2021</div>
+   </div>
+   <div class="blog-article">
+    <img src="https://images.unsplash.com/photo-1529255484355-cb73c33c04bb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTh8fGJsYWNrJTIwYW5kJTIwd2hpdGV8ZW58MHwwfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
+    <h2>Talking About <span>Vulnerability</span> During Quarantine</h2>
+    <div class="blog-detail">
+     <span>By Tom Hiddleston</span>
+     <span>5 Min Read</span>
+    </div>
+    <p>Having traveled to Turkey multiple times, with critics praising Ocean's introspective lyrics and the album's unconventional</p>
+    <a href="#">
+     <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-right" viewBox="0 0 24 24">
+      <path d="M15 10l5 5-5 5" />
+      <path d="M4 4v7a4 4 0 004 4h12" />
+     </svg>
+     See More
+    </a>
+   </div>
+  </div>
+  <div class="blog-header">
+   <div class="blog-article header-article">
+    <div class="blog-big__title">Control</div>
+    <div class="blog-menu small-title date">12.06.2021</div>
+   </div>
+   <div class="blog-article">
+    <img src="https://images.unsplash.com/photo-1616248249518-b16013cd4e42?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTkzfHxibGFjayUyMGFuZCUyMHdoaXRlfGVufDB8MHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
+    <h2>How 2020 Changed <span>Understanding</span> Of Mental Health</h2>
+    <div class="blog-detail">
+     <span>By Scarlett Witch</span>
+     <span>5 Min Read</span>
+    </div>
+    <p>Time is defines ad the indefinete continued progress, with critics praising Ocean's introspective lyrics and the album's</p>
+    <a href="#">
+     <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-right" viewBox="0 0 24 24">
+      <path d="M15 10l5 5-5 5" />
+      <path d="M4 4v7a4 4 0 004 4h12" />
+     </svg>
+     See More
+    </a>
+   </div>
+  </div>
+ </div>
+ <div class="blog-part right-blog">
+  <marquee width="100%" direction="left">
+   <span>Now And Then You Miss It Sounds Make You Cry</span>
+   <span>Now In - MoMa Sharing Exhibition NOW</span>
+   <span>NYC Opens After Long Lockdown Check</span>
+  </marquee>
+  <div class="blog-right-title-container">
+   <div class="blog-right-title">
+    Featured Articles
+   </div>
+   <div class="blog-menu rounded">See All</div>
+  </div>
+  <div class="blog-right">
+   <div class="blog-right-container">
+    <div class="blog-title-date">
+     <div class="blog-right-page">1</div>
+     <div class="date">12.06.2021</div>
+    </div>
+    <div class="blog-right-page-title">Blonde - Widespread Acclaim</div>
+    <div class="blog-right-page-subtitle">Blonde received widespread acclaim, with critics praising Ocean's introspective lyrics and the album's</div>
+   </div>
+   <div class="blog-right-container">
+    <div class="blog-title-date">
+     <div class="blog-right-page">2</div>
+     <div class="date">12.06.2021</div>
+    </div>
+    <div class="blog-right-page-title">Introspective Lyrics and Beats</div>
+    <div class="blog-right-page-subtitle">When we toured Scotland we stopped at several selft-sealing hpuses because hotels would</div>
+   </div>
+   <div class="blog-right-container">
+    <div class="blog-title-date">
+     <div class="blog-right-page">3</div>
+     <div class="date">12.06.2021</div>
+    </div>
+    <div class="blog-right-page-title">The Language Of Gris: Comples Beauty Of Monochrome</div>
+    <div class="blog-right-page-subtitle">The interior concept was conceived of by Dutch archtitect Studio Anne Holtrop who cleverly emulated</div>
+   </div>
+   <div class="blog-right-container">
+    <div class="blog-title-date">
+     <div class="blog-right-page">4</div>
+     <div class="date">12.06.2021</div>
+    </div>
+    <div class="blog-right-page-title">A24 IS LAUNCHING ITS OWN BEAUTY BRAND</div>
+    <div class="blog-right-page-subtitle">Blonde received widespread acclaim, with critics praising Ocean's introspective lyrics and the album's</div>
+   </div>
+   <div class="blog-right-container">
+    <div class="blog-title-date">
+     <div class="blog-right-page">5</div>
+     <div class="date">12.06.2021</div>
+    </div>
+    <div class="blog-right-page-title">Elon Musk's SpaceX is launching a moon satellite</div>
+    <div class="blog-right-page-subtitle">The interior concept was conceived of by Dutch archtitect Studio Anne Holtrop who cleverly emulated</div>
+   </div>
+   <div class="blog-right-container">
+    <div class="blog-title-date">
+     <div class="blog-right-page">6</div>
+     <div class="date">12.06.2021</div>
+    </div>
+    <div class="blog-right-page-title">What Happens When You Leave Your Old life Behind</div>
+    <div class="blog-right-page-subtitle">The interior concept was conceived of by Dutch archtitect Studio Anne Holtrop who cleverly emulated</div>
+   </div>
+   <div class="circle">
+    <div class="circle-title">Leave Your Old Life Behind</div>
+    <div class="circle-subtitle">Don't try to be like someone else, be yourselft. Be secure with yourself.</div>
+    <div class="circle-footer">Explore</div>
+   </div>
+  </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/modern-blog-layout-with-css-grid/src/style.scss b/modern-blog-layout-with-css-grid/src/style.scss
new file mode 100644
index 0000000..948de96
--- /dev/null
+++ b/modern-blog-layout-with-css-grid/src/style.scss
@@ -0,0 +1,459 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,500&family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap");
+
+* {
+ outline: none;
+ box-sizing: border-box;
+}
+
+html {
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+}
+
+img {
+ max-width: 100%;
+}
+
+$title-font: "Space Grotesk", sans-serif;
+$subtitle-font: "Inter", sans-serif;
+$italic-font: "Playfair Display", serif;
+$blog-bg: #e9e6e4;
+$body-bg: #121418;
+$title-color: #121418;
+$subtitle-color: #161419;
+$border-color: #94918f;
+
+body {
+ background-color: $body-bg;
+ display: flex;
+ font-family: $subtitle-font;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ width: 100%;
+ padding: 0 2em;
+ font-weight: 400;
+ height: 100vh;
+
+ @media screen and (max-width: 768px) {
+  padding: 0;
+ }
+}
+
+.blog {
+ background-color: $blog-bg;
+ max-width: 1350px;
+ display: grid;
+ height: 90vh;
+ max-height: 800px;
+ overflow: hidden;
+ grid-template-columns: 15% 20% 35% 30%;
+ grid-template-rows: 100%;
+ width: 100%;
+ padding: 40px 4px;
+ position: relative;
+
+ @media screen and (max-width: 1030px) {
+  grid-template-columns: 20% 50% 30%;
+ }
+
+ @media screen and (max-width: 768px) {
+  grid-template-columns: 25% 75%;
+  width: 100%;
+  max-width: none;
+ }
+
+ @media screen and (max-width: 560px) {
+  grid-template-columns: 100%;
+ }
+
+ &-part {
+  padding: 0 20px;
+
+  &:not(:last-child) {
+   border-right: 1px solid $border-color;
+  }
+ }
+
+ &-menu {
+  font-size: 22px;
+  text-decoration: none;
+  color: $subtitle-color;
+  display: flex;
+  letter-spacing: -0.5px;
+  align-items: center;
+
+  @media screen and (max-width: 1260px) {
+   font-size: 1.6vw;
+  }
+
+  svg {
+   width: 22px;
+   margin-left: 4px;
+  }
+
+  & + & {
+   margin-top: 24px;
+  }
+
+  &.mention {
+   margin-top: auto;
+   font-size: 19px;
+
+   @media screen and (max-width: 1260px) {
+    font-size: 1.4vw;
+   }
+  }
+
+  &.subscribe {
+   margin-top: 8px;
+   font-size: 19px;
+   position: relative;
+
+   @media screen and (max-width: 1260px) {
+    font-size: 1.4vw;
+   }
+
+   &:before {
+    content: "";
+    width: 16px;
+    height: 16px;
+    background-color: $subtitle-color;
+    left: 0;
+    border-radius: 1px;
+    margin-right: 14px;
+   }
+  }
+  &.rounded {
+   &:before {
+    content: "";
+    border-radius: 50%;
+    width: 12px;
+    height: 12px;
+    background-color: $subtitle-color;
+    margin-right: 12px;
+   }
+  }
+ }
+
+ .is-menu {
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (max-width: 1030px) {
+   display: none;
+  }
+ }
+
+ &-big__title {
+  font-size: 132px;
+  font-family: $title-font;
+  font-weight: 700;
+  letter-spacing: -5px;
+  line-height: 1;
+  margin-bottom: 6px;
+
+  @media screen and (max-width: 1400px) {
+   font-size: 120px;
+  }
+
+  @media screen and (max-width: 1260px) {
+   font-size: 9vw;
+   letter-spacing: -2px;
+  }
+
+  @media screen and (max-width: 560px) {
+   font-size: 36px;
+   margin-bottom: 12px;
+  }
+ }
+
+ &-header {
+  display: flex;
+  flex-direction: column;
+ }
+
+ &-article {
+  padding: 0 20px;
+
+  img {
+   height: 260px;
+   max-height: 22vh;
+   width: 100%;
+   object-fit: cover;
+   filter: grayscale(1);
+  }
+ }
+}
+
+.page-number {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ height: 100%;
+ font-size: 72px;
+ text-align: center;
+ letter-spacing: -3px;
+ font-weight: lighter;
+ font-family: $title-font;
+ border-right: 1px solid $border-color;
+ white-space: nowrap;
+
+ @media screen and (max-width: 1260px) {
+  font-size: 5vw;
+ }
+}
+
+.small-title {
+ border-bottom: 1px solid $border-color;
+ margin-bottom: 20px;
+ padding-bottom: 20px;
+
+ @media screen and (max-width: 560px) {
+  font-size: 14px;
+  position: absolute;
+  top: 10px;
+  right: 24px;
+  border-bottom: 0;
+ }
+}
+
+.date {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.blog-article {
+ h2 {
+  font-size: 26px;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 8px 0 8px;
+
+  span {
+   font-family: $italic-font;
+  }
+ }
+
+ p {
+  line-height: 1.5;
+  margin: 14px 0;
+ }
+
+ a {
+  color: $subtitle-color;
+  text-decoration: none;
+  font-size: 26px;
+  letter-spacing: -1px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: auto;
+  border-top: 1px solid $border-color;
+  padding-top: 14px;
+
+  svg {
+   width: 26px;
+   margin-right: 10px;
+  }
+ }
+}
+
+.blog-detail {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 14px;
+
+ span {
+  font-family: $italic-font;
+ }
+}
+
+.blog-header-container {
+ overflow-y: auto;
+ overflow-x: hidden;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ scroll-snap-type: y mandatory;
+ border-right: 1px solid $border-color;
+
+ @media screen and (max-width: 768px) {
+  border-right: 0;
+ }
+
+ & > * {
+  flex-shrink: 0;
+  min-height: 100%;
+  scroll-snap-align: start;
+ }
+
+ .blog-article:not(.header-article) {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+ }
+}
+
+marquee {
+ font-size: 20px;
+ background-color: $body-bg;
+ color: $blog-bg;
+ padding: 6px 0;
+ width: calc(100% + 44px);
+ margin-left: -20px;
+ flex-shrink: 0;
+
+ span:before {
+  display: inline-block;
+  content: "";
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  position: relative;
+  top: -1px;
+  vertical-align: baseline;
+  background-color: $blog-bg;
+  margin: 0 16px;
+ }
+}
+
+.blog-right {
+ overflow: auto;
+ height: calc(100% + 60px);
+ .rounded {
+  font-style: italic;
+  font-size: 18px;
+  &:before {
+   content: "";
+   border-radius: 50%;
+   width: 9px;
+   height: 9px;
+   background-color: rgb(22 20 25);
+   margin-right: 6px;
+  }
+ }
+}
+
+.blog-right-title {
+ font-size: 25px;
+ font-family: $italic-font;
+}
+
+.blog-right-title-container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid $border-color;
+ margin-bottom: 20px;
+ padding-bottom: 20px;
+ margin-top: 100px;
+ letter-spacing: -1px;
+
+ @media screen and (max-width: 1400px) {
+  margin-top: 88px;
+ }
+
+ @media screen and (max-width: 1260px) {
+  margin-top: 6vw;
+ }
+
+ @media screen and (max-width: 1030px) {
+  margin-top: 5vw;
+ }
+}
+
+.blog-title-date {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+}
+
+.blog-right-page {
+ font-size: 56px;
+ margin-bottom: 16px;
+ font-family: $title-font;
+
+ &-title {
+  font-family: $title-font;
+  font-size: 28px;
+  font-weight: 600;
+  max-width: 16ch;
+  letter-spacing: -2px;
+ }
+
+ &-subtitle {
+  max-width: 33ch;
+  font-size: 15px;
+  margin-top: 12px;
+  line-height: 1.4;
+ }
+}
+
+.blog-right-container + .blog-right-container {
+ margin-top: 40px;
+}
+
+.right-blog {
+ display: flex;
+ flex-direction: column;
+
+ @media screen and (max-width: 768px) {
+  display: none;
+ }
+
+ .blog-menu {
+  @media screen and (max-width: 1030px) {
+   display: none;
+  }
+ }
+}
+
+::-webkit-scrollbar {
+ display: none;
+}
+
+.circle {
+ width: 100%;
+ aspect-ratio: 1/1;
+ border-radius: 50%;
+ background-color: $body-bg;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ color: $blog-bg;
+ padding: 20px;
+ text-align: center;
+ margin-top: 40px;
+
+ &-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  font-family: $title-font;
+
+  @media screen and (max-width: 1030px) {
+   display: none;
+  }
+ }
+
+ &-subtitle {
+  max-width: 30ch;
+  font-size: 14px;
+  line-height: 1.3;
+  margin-bottom: 16px;
+ }
+
+ &-footer {
+  font-family: $italic-font;
+  font-size: 30px;
+ }
+}
+
+.blog-is-sticky {
+ @media screen and (max-width: 560px) {
+  display: none;
+ }
+}
diff --git a/monokai/README.markdown b/monokai/README.markdown
new file mode 100644
index 0000000..3a9e8b9
--- /dev/null
+++ b/monokai/README.markdown
@@ -0,0 +1,4 @@
+# Monokai
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/pilniczek/pen/RjVPoa](https://codepen.io/pilniczek/pen/RjVPoa).
+
+ 
\ No newline at end of file
diff --git a/monokai/dist/index.html b/monokai/dist/index.html
new file mode 100644
index 0000000..6bfbf90
--- /dev/null
+++ b/monokai/dist/index.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Monokai</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="block dark">
+  <div class="t pink-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t green-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t yellow-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t orange-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t violet-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t blue-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+</div>
+<div class="block middle">
+  <div class="pink circle">
+    <div class="t t1">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t2">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t3">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+  </div>
+  <div class="green circle">
+    <div class="t t1">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t2">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t3">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+  </div>
+  <div class="yellow circle">
+    <div class="t t1">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t2">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t3">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+  </div>
+  <div class="orange circle">
+    <div class="t t1">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t2">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t3">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+  </div>
+  <div class="violet circle">
+    <div class="t t1">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t2">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t3">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+  </div>
+  <div class="blue circle">
+    <div class="t t1">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t2">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t3">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+  </div>
+</div>
+<div class="block black">
+  <div class="t pink-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t green-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t yellow-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t orange-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t violet-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t blue-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/monokai/dist/style.css b/monokai/dist/style.css
new file mode 100644
index 0000000..7837901
--- /dev/null
+++ b/monokai/dist/style.css
@@ -0,0 +1,108 @@
+body{
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  height: 100vh;
+}
+
+.dark{
+  background-color: #282c34;
+  width: 100%;
+  -webkit-box-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+          flex-direction: row;
+  justify-content: space-around;
+  -webkit-box-align: start;
+          align-items: flex-start;
+}
+.black{
+  background-color: #16171d;
+  width: 100%;
+  -webkit-box-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+          flex-direction: row;
+  justify-content: space-around;
+  -webkit-box-align: end;
+          align-items: flex-end;
+}
+.middle{
+  background-color: #454952;
+  height: 75px;
+  width: 100%;
+  -webkit-box-align: center;
+          align-items: center;
+}
+.block{
+  padding: 0 75px;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+          flex-direction: row;
+  justify-content: space-around;
+}
+.circle{
+  height: 250px;
+  position: relative;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  justify-content: space-around;
+  -webkit-box-align: center;
+          align-items: center;
+}
+
+.c{
+  font-weight: bold;
+}
+
+.t{
+  padding: 10px;
+}
+
+.pink   { background-color: #ff6188; }
+.green  { background-color: #a9dc76; }
+.yellow { background-color: #ffd866; }
+.orange { background-color: #fc9867; }
+.violet { background-color: #ab9df2; }
+.blue   { background-color: #78dce8; }
+
+.pink-text   { color: #ff6188; }
+.green-text  { color: #a9dc76; }
+.yellow-text { color: #ffd866; }
+.orange-text { color: #fc9867; }
+.violet-text { color: #ab9df2; }
+.blue-text   { color: #78dce8; }
+
+.t1 {
+  color: #282c34;
+}
+.t2 {
+  color: #454952;
+}
+.t3 {
+  color: #16171d;
+}
+
+/*
+*   boring standards
+*/
+
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
\ No newline at end of file
diff --git a/monokai/license.txt b/monokai/license.txt
new file mode 100644
index 0000000..efaccb6
--- /dev/null
+++ b/monokai/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by pilniczek (https://codepen.io/pilniczek/pen/RjVPoa)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/monokai/src/index.html b/monokai/src/index.html
new file mode 100644
index 0000000..5f2f75c
--- /dev/null
+++ b/monokai/src/index.html
@@ -0,0 +1,138 @@
+<div class="block dark">
+  <div class="t pink-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t green-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t yellow-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t orange-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t violet-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t blue-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+</div>
+<div class="block middle">
+  <div class="pink circle">
+    <div class="t t1">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t2">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t3">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+  </div>
+  <div class="green circle">
+    <div class="t t1">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t2">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t3">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+  </div>
+  <div class="yellow circle">
+    <div class="t t1">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t2">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t3">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+  </div>
+  <div class="orange circle">
+    <div class="t t1">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t2">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t3">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+  </div>
+  <div class="violet circle">
+    <div class="t t1">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t2">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t3">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+  </div>
+  <div class="blue circle">
+    <div class="t t1">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t2">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+    <div class="t t3">
+      TextTextText<br>
+      <span class="c">TextText</span>
+   </div>
+  </div>
+</div>
+<div class="block black">
+  <div class="t pink-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t green-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t yellow-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t orange-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t violet-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+  <div class="t blue-text">
+    TextTextText<br>
+    <span class="c">TextText</span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/monokai/src/style.css b/monokai/src/style.css
new file mode 100644
index 0000000..de9202b
--- /dev/null
+++ b/monokai/src/style.css
@@ -0,0 +1,91 @@
+body{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.dark{
+  background-color: #282c34;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+.black{
+  background-color: #16171d;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+.middle{
+  background-color: #454952;
+  height: 75px;
+  width: 100%;
+  align-items: center;
+}
+.block{
+  padding: 0 75px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.circle{
+  height: 250px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.c{
+  font-weight: bold;
+}
+
+.t{
+  padding: 10px;
+}
+
+.pink   { background-color: #ff6188; }
+.green  { background-color: #a9dc76; }
+.yellow { background-color: #ffd866; }
+.orange { background-color: #fc9867; }
+.violet { background-color: #ab9df2; }
+.blue   { background-color: #78dce8; }
+
+.pink-text   { color: #ff6188; }
+.green-text  { color: #a9dc76; }
+.yellow-text { color: #ffd866; }
+.orange-text { color: #fc9867; }
+.violet-text { color: #ab9df2; }
+.blue-text   { color: #78dce8; }
+
+.t1 {
+  color: #282c34;
+}
+.t2 {
+  color: #454952;
+}
+.t3 {
+  color: #16171d;
+}
+
+/*
+*   boring standards
+*/
+
+html {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit;
+}
\ No newline at end of file
diff --git a/moonriverpure-javascript/README.markdown b/moonriverpure-javascript/README.markdown
new file mode 100644
index 0000000..5609532
--- /dev/null
+++ b/moonriverpure-javascript/README.markdown
@@ -0,0 +1,5 @@
+# moonRiver - pure JavaScript
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/toshiya-marukubo/pen/PoZazJL](https://codepen.io/toshiya-marukubo/pen/PoZazJL).
+
+Audrey Hepburn was beautiful...
diff --git a/moonriverpure-javascript/dist/index.html b/moonriverpure-javascript/dist/index.html
new file mode 100644
index 0000000..7f5674d
--- /dev/null
+++ b/moonriverpure-javascript/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - moonRiver - pure JavaScript</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canvas">Canvas not supported.</canvas>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/moonriverpure-javascript/dist/script.js b/moonriverpure-javascript/dist/script.js
new file mode 100644
index 0000000..05cf353
--- /dev/null
+++ b/moonriverpure-javascript/dist/script.js
@@ -0,0 +1,220 @@
+(function () {
+  'use strict';
+  window.addEventListener('load', function () {
+    var canvas = document.getElementById('canvas');
+
+    if (!canvas || !canvas.getContext) {
+      return false;
+    }
+
+    /********************
+      Random Number
+    ********************/
+
+    function rand(min, max) {
+      return Math.floor(Math.random() * (max - min + 1) + min);
+    }
+
+    /********************
+      Var
+    ********************/
+
+    var ctx = canvas.getContext('2d');
+    var X = canvas.width = window.innerWidth;
+    var Y = canvas.height = window.innerHeight;
+    var mouseX = X / 2;
+    var mouseY = Y / 2;
+    var shapes = [];
+    var shapeNum = Y / 4;
+
+    /********************
+      Animation
+    ********************/
+
+    window.requestAnimationFrame =
+      window.requestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      window.webkitRequestAnimationFrame ||
+      window.msRequestAnimationFrame ||
+      function(cb) {
+        setTimeout(cb, 17);
+      };
+
+    /********************
+      Shape
+    ********************/
+    
+    function Shape(ctx, x, y, i) {
+      this.ctx = ctx;
+      this.init(x, y, i);
+    }
+    
+    Shape.prototype.init = function(x, y, i) {
+      this.x = x;
+      this.y = y;
+      this.i = i;
+      this.r = 2;
+      this.a = rand(0, 360);
+      this.rad = this.a * Math.PI / 180;
+      this.ga = Math.random() * Math.random() * Math.random();
+      this.inA = Math.random();
+      this.scaleX = 100 - i / 2;
+      this.dist = shapeNum - i;
+    };
+
+    Shape.prototype.draw = function() {
+      var ctx  = this.ctx;
+      ctx.save();
+      ctx.fillStyle = 'white';
+      ctx.globalCompositeOperation = 'lighter';
+      ctx.globalAlpha = this.ga;
+      ctx.translate(Math.sin(this.rad) * this.dist + this.x, this.y);
+      ctx.scale(this.scaleX, 1);
+      ctx.translate(-Math.sin(this.rad) * this.dist - this.x, -this.y);
+      ctx.beginPath();
+      ctx.arc(Math.sin(this.rad) * this.dist + this.x, this.y, this.r, 0, Math.PI * 2, false);
+      ctx.fill();
+      ctx.restore();
+    };
+
+    Shape.prototype.updateParams = function() {
+      this.a += this.inA;
+      this.rad = this.a * Math.PI / 180;
+    };
+
+    Shape.prototype.render = function() {
+      this.updateParams();
+      this.draw();
+    };
+    
+    for (var i = 0; i < shapeNum; i++) {
+      var s = new Shape(ctx, X / 2, Y - i * 1, i);
+      shapes.push(s);
+    }
+
+    /********************
+      Moon
+    ********************/
+    
+    var radius = 150;
+
+    if (X < 768) {
+      radius = 100;
+    }
+
+    function drawMoon() {
+      ctx.save();
+      ctx.beginPath();
+      ctx.fillStyle = 'white';
+      ctx.shadowColor = 'white';
+      ctx.shadowBlur = 100;
+      ctx.arc(X / 2, Y / 3, radius, 0, Math.PI * 2, false);
+      ctx.fill();
+      ctx.restore();
+    }
+    
+    /********************
+      Kirakira
+    ********************/
+
+    var particleNum = 500;
+    var particles = [];
+    
+    function Particle(ctx, x, y) {
+      this.ctx = ctx;
+      this.init(x, y);
+    }
+    
+    Particle.prototype.init = function(x, y) {
+      this.x = x;
+      this.y = y;
+      this.r = rand(5, 10);
+      this.ga = Math.random() * Math.random() * Math.random() * Math.random();
+      this.v = {
+        x: 0,
+        y: -Math.random() * Math.random()
+      };
+      this.l = rand(10, 50);
+    };
+
+    Particle.prototype.draw = function() {
+      var ctx  = this.ctx;
+      ctx.save();
+      ctx.fillStyle = 'white';
+      ctx.globalCompositeOperation = 'lighter';
+      ctx.globalAlpha = this.ga;
+      ctx.beginPath();
+      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
+      ctx.fill();
+      ctx.restore();
+    };
+
+    Particle.prototype.updateParams = function() {
+      this.a += this.inA;
+      this.rad = this.a * Math.PI / 180;
+      this.l -= 0.1;
+      if (this.l < 0) {
+        this.init(rand(0, X), rand(Y - Y / 4, Y));
+      }
+    };
+
+    Particle.prototype.updatePositon = function() {
+      this.y += this.v.y;
+    };
+
+    Particle.prototype.render = function() {
+      this.updatePositon();
+      this.updateParams();
+      this.draw();
+    };
+    
+    for (var i = 0; i < particleNum; i++) {
+      var p = new Particle(ctx, rand(0, X), rand(Y - Y / 4, Y));
+      particles.push(p);
+    }
+
+    /********************
+      Render
+    ********************/
+    
+    function render() {
+      ctx.clearRect(0, 0, X, Y);
+      drawMoon();
+      for (var i = 0; i < shapes.length; i++) {
+        shapes[i].render(i);
+      }
+      for (var i = 0; i < particles.length; i++) {
+        particles[i].render(i);
+      }
+      requestAnimationFrame(render);
+    }
+
+    render();
+
+    /********************
+      Event
+    ********************/
+    
+    function onResize() {
+      X = canvas.width = window.innerWidth;
+      Y = canvas.height = window.innerHeight;
+      shapes = [];
+      if (X < 768) {
+        radius = 100;
+      } else {
+        radius = 150;
+      }
+      for (var i = 0; i < shapeNum; i++) {
+        var s = new Shape(ctx, X / 2, Y - i * 1, i);
+        shapes.push(s);
+      }
+    }
+
+    window.addEventListener('resize', function() {
+      onResize();
+    });
+
+  });
+  // Author
+  console.log('File Name / moonRiver.js\nCreated Date / July 10, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo');
+})();
\ No newline at end of file
diff --git a/moonriverpure-javascript/dist/style.css b/moonriverpure-javascript/dist/style.css
new file mode 100644
index 0000000..c3226e8
--- /dev/null
+++ b/moonriverpure-javascript/dist/style.css
@@ -0,0 +1,11 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+canvas#canvas {
+  display: block;
+  background: #360033;
+  background: -webkit-linear-gradient(to bottom, #0b8793, #360033);
+  background: linear-gradient(to bottom, #0b8793, #360033); 
+}
\ No newline at end of file
diff --git a/moonriverpure-javascript/license.txt b/moonriverpure-javascript/license.txt
new file mode 100644
index 0000000..869dd70
--- /dev/null
+++ b/moonriverpure-javascript/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Toshiya Marukubo (https://codepen.io/toshiya-marukubo/pen/PoZazJL)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/moonriverpure-javascript/src/index.html b/moonriverpure-javascript/src/index.html
new file mode 100644
index 0000000..01ce40f
--- /dev/null
+++ b/moonriverpure-javascript/src/index.html
@@ -0,0 +1 @@
+<canvas id="canvas">Canvas not supported.</canvas>
\ No newline at end of file
diff --git a/moonriverpure-javascript/src/script.js b/moonriverpure-javascript/src/script.js
new file mode 100644
index 0000000..05cf353
--- /dev/null
+++ b/moonriverpure-javascript/src/script.js
@@ -0,0 +1,220 @@
+(function () {
+  'use strict';
+  window.addEventListener('load', function () {
+    var canvas = document.getElementById('canvas');
+
+    if (!canvas || !canvas.getContext) {
+      return false;
+    }
+
+    /********************
+      Random Number
+    ********************/
+
+    function rand(min, max) {
+      return Math.floor(Math.random() * (max - min + 1) + min);
+    }
+
+    /********************
+      Var
+    ********************/
+
+    var ctx = canvas.getContext('2d');
+    var X = canvas.width = window.innerWidth;
+    var Y = canvas.height = window.innerHeight;
+    var mouseX = X / 2;
+    var mouseY = Y / 2;
+    var shapes = [];
+    var shapeNum = Y / 4;
+
+    /********************
+      Animation
+    ********************/
+
+    window.requestAnimationFrame =
+      window.requestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      window.webkitRequestAnimationFrame ||
+      window.msRequestAnimationFrame ||
+      function(cb) {
+        setTimeout(cb, 17);
+      };
+
+    /********************
+      Shape
+    ********************/
+    
+    function Shape(ctx, x, y, i) {
+      this.ctx = ctx;
+      this.init(x, y, i);
+    }
+    
+    Shape.prototype.init = function(x, y, i) {
+      this.x = x;
+      this.y = y;
+      this.i = i;
+      this.r = 2;
+      this.a = rand(0, 360);
+      this.rad = this.a * Math.PI / 180;
+      this.ga = Math.random() * Math.random() * Math.random();
+      this.inA = Math.random();
+      this.scaleX = 100 - i / 2;
+      this.dist = shapeNum - i;
+    };
+
+    Shape.prototype.draw = function() {
+      var ctx  = this.ctx;
+      ctx.save();
+      ctx.fillStyle = 'white';
+      ctx.globalCompositeOperation = 'lighter';
+      ctx.globalAlpha = this.ga;
+      ctx.translate(Math.sin(this.rad) * this.dist + this.x, this.y);
+      ctx.scale(this.scaleX, 1);
+      ctx.translate(-Math.sin(this.rad) * this.dist - this.x, -this.y);
+      ctx.beginPath();
+      ctx.arc(Math.sin(this.rad) * this.dist + this.x, this.y, this.r, 0, Math.PI * 2, false);
+      ctx.fill();
+      ctx.restore();
+    };
+
+    Shape.prototype.updateParams = function() {
+      this.a += this.inA;
+      this.rad = this.a * Math.PI / 180;
+    };
+
+    Shape.prototype.render = function() {
+      this.updateParams();
+      this.draw();
+    };
+    
+    for (var i = 0; i < shapeNum; i++) {
+      var s = new Shape(ctx, X / 2, Y - i * 1, i);
+      shapes.push(s);
+    }
+
+    /********************
+      Moon
+    ********************/
+    
+    var radius = 150;
+
+    if (X < 768) {
+      radius = 100;
+    }
+
+    function drawMoon() {
+      ctx.save();
+      ctx.beginPath();
+      ctx.fillStyle = 'white';
+      ctx.shadowColor = 'white';
+      ctx.shadowBlur = 100;
+      ctx.arc(X / 2, Y / 3, radius, 0, Math.PI * 2, false);
+      ctx.fill();
+      ctx.restore();
+    }
+    
+    /********************
+      Kirakira
+    ********************/
+
+    var particleNum = 500;
+    var particles = [];
+    
+    function Particle(ctx, x, y) {
+      this.ctx = ctx;
+      this.init(x, y);
+    }
+    
+    Particle.prototype.init = function(x, y) {
+      this.x = x;
+      this.y = y;
+      this.r = rand(5, 10);
+      this.ga = Math.random() * Math.random() * Math.random() * Math.random();
+      this.v = {
+        x: 0,
+        y: -Math.random() * Math.random()
+      };
+      this.l = rand(10, 50);
+    };
+
+    Particle.prototype.draw = function() {
+      var ctx  = this.ctx;
+      ctx.save();
+      ctx.fillStyle = 'white';
+      ctx.globalCompositeOperation = 'lighter';
+      ctx.globalAlpha = this.ga;
+      ctx.beginPath();
+      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
+      ctx.fill();
+      ctx.restore();
+    };
+
+    Particle.prototype.updateParams = function() {
+      this.a += this.inA;
+      this.rad = this.a * Math.PI / 180;
+      this.l -= 0.1;
+      if (this.l < 0) {
+        this.init(rand(0, X), rand(Y - Y / 4, Y));
+      }
+    };
+
+    Particle.prototype.updatePositon = function() {
+      this.y += this.v.y;
+    };
+
+    Particle.prototype.render = function() {
+      this.updatePositon();
+      this.updateParams();
+      this.draw();
+    };
+    
+    for (var i = 0; i < particleNum; i++) {
+      var p = new Particle(ctx, rand(0, X), rand(Y - Y / 4, Y));
+      particles.push(p);
+    }
+
+    /********************
+      Render
+    ********************/
+    
+    function render() {
+      ctx.clearRect(0, 0, X, Y);
+      drawMoon();
+      for (var i = 0; i < shapes.length; i++) {
+        shapes[i].render(i);
+      }
+      for (var i = 0; i < particles.length; i++) {
+        particles[i].render(i);
+      }
+      requestAnimationFrame(render);
+    }
+
+    render();
+
+    /********************
+      Event
+    ********************/
+    
+    function onResize() {
+      X = canvas.width = window.innerWidth;
+      Y = canvas.height = window.innerHeight;
+      shapes = [];
+      if (X < 768) {
+        radius = 100;
+      } else {
+        radius = 150;
+      }
+      for (var i = 0; i < shapeNum; i++) {
+        var s = new Shape(ctx, X / 2, Y - i * 1, i);
+        shapes.push(s);
+      }
+    }
+
+    window.addEventListener('resize', function() {
+      onResize();
+    });
+
+  });
+  // Author
+  console.log('File Name / moonRiver.js\nCreated Date / July 10, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo');
+})();
\ No newline at end of file
diff --git a/moonriverpure-javascript/src/style.css b/moonriverpure-javascript/src/style.css
new file mode 100644
index 0000000..c3226e8
--- /dev/null
+++ b/moonriverpure-javascript/src/style.css
@@ -0,0 +1,11 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+canvas#canvas {
+  display: block;
+  background: #360033;
+  background: -webkit-linear-gradient(to bottom, #0b8793, #360033);
+  background: linear-gradient(to bottom, #0b8793, #360033); 
+}
\ No newline at end of file
diff --git a/more-cursed-accent-color-vibes/README.markdown b/more-cursed-accent-color-vibes/README.markdown
new file mode 100644
index 0000000..6fa36c4
--- /dev/null
+++ b/more-cursed-accent-color-vibes/README.markdown
@@ -0,0 +1,5 @@
+# More cursed accent-color vibes
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/xdesro/pen/dyRNqqY](https://codepen.io/xdesro/pen/dyRNqqY).
+
+
diff --git a/more-cursed-accent-color-vibes/dist/index.html b/more-cursed-accent-color-vibes/dist/index.html
new file mode 100644
index 0000000..abbcfde
--- /dev/null
+++ b/more-cursed-accent-color-vibes/dist/index.html
@@ -0,0 +1,1017 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - More cursed accent-color vibes</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="app">
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 0; --y: 0; --rot: 0"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 0.24455151948660941; --y: 0.2265075394504598; --rot: 42.80635001174391"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 0.050998681531847445; --y: 0.6647131553733968; --rot: 85.61270002348782"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -0.6214083129159855; --y: 0.7834868911723467; --rot: 128.41905003523172"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -1.3177281402254124; --y: 0.20339696712550376; --rot: 171.22540004697564"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -1.381212620691272; --y: -0.9327537050159204; --rot: -145.96824994128048"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -0.45540683455563474; --y: -1.9474610689407932; --rot: -103.16189992953656"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 1.1541046353416087; --y: -2.027926757831125; --rot: -60.355549917792644"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 2.5425556879591067; --y: -0.8040657216533384; --rot: -17.549199906048734"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 2.7132057170027624; --y: 1.2800448184432938; --rot: 25.257150105698436"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 1.2452625952031096; --y: 3.091994854474879; --rot: 68.06350011743909"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -1.3062366459904384; --y: 3.426104240842081; --rot: 110.86985012917975"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -3.5852092300800336; --y: 1.773774161653319; --rot: 153.6762001409269"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.15526015381868; --y: -1.2294677026520608; --rot: -163.51744984732593"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -2.383310936408974; --y: -4.01218229373631; --rot: -120.71109983558529"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 1.0476875194487951; --y: -4.889003053956014; --rot: -77.90474982384463"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 4.363550806226478; --y: -3.066572811123959; --rot: -35.09839981209746"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 5.615466058916625; --y: 0.7600342441406841; --rot: 7.707950199649704"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 3.8153136837019663; --y: 4.630699892560144; --rot: 50.51430021139687"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -0.36685098644372466; --y: 6.3226996975071; --rot: 93.32065022313103"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.805851949452286; --y: 4.620414644205659; --rot: 136.12700023487818"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -6.998787019243336; --y: 0.13030832387448701; --rot: 178.93335024662537"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -5.4719651420660425; --y: -4.882148631677649; --rot: -138.26029974164052"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -0.7286836465055744; --y: -7.631958983189907; --rot: -95.45394972989337"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 4.853725223451066; --y: -6.359351496436952; --rot: -52.64759971814619"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 8.210709182887502; --y: -1.4243241058450518; --rot: -9.841249706399026"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 7.271352052637864; --y: 4.7157767586804; --rot: 32.96510030534813"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 2.212113747772741; --y: 8.723906966887878; --rot: 75.77145031708228"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.4646153165276585; --y: 8.196238233881306; --rot: 118.57780032882947"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -9.160908024203927; --y: 3.0858076117153703; --rot: 161.3841503405766"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -9.121880689272984; --y: -4.097717985741408; --rot: -155.80949964768925"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.038077870957232; --y: -9.511661520778759; --rot: -113.00314963594211"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 3.61376506222314; --y: -10.03585969674911; --rot: -70.19679962419492"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 9.766812896821598; --y: -5.060569714812679; --rot: -27.390449612447757"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 10.925578943498156; --y: 3.012668118766845; --rot: 15.415900399299412"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 6.143966569406656; --y: 9.917801465300892; --rot: 58.22225041103355"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -2.295587663304354; --y: 11.778381776801297; --rot: 101.02860042279376"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -9.956951988950944; --y: 7.278064179494227; --rot: 143.83495043451487"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -12.581668995347886; --y: -1.464940181695528; --rot: -173.35869955373798"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -8.451853003040366; --y: -9.877559456414199; --rot: -130.55234954199082"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 0.5243944426992713; --y: -13.323017235080195; --rot: -87.74599953024367"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 9.673966327471108; --y: -9.653608303258059; --rot: -44.93964951849649"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 13.990296994702298; --y: -0.5211429746469236; --rot: -2.1332995067493217"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 10.870987260252333; --y: 9.341631572261663; --rot: 40.673050504997846"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 1.6655528875074292; --y: 14.571789344141191; --rot: 83.47940051671897"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -8.877190889577752; --y: 12.091132366738764; --rot: 126.28575052846612"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -15.056300364628294; --y: 2.9015393227052857; --rot: 169.0921005402133"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -13.300780319817202; --y: -8.278507554409058; --rot: -148.10154944803955"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.22067572761745; --y: -15.433272381523658; --rot: -105.29519943629239"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 7.544713414223923; --y: -14.486375574138872; --rot: -62.48884942454522"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 15.692891070590841; --y: -5.613461287329598; --rot: -19.68249941279805"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 15.634187680959094; --y: 6.676239626956697; --rot: 23.123850598949115"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 7.0693869774670715; --y: 15.826187544928924; --rot: 65.93020061069628"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -5.674836810152686; --y: 16.73043150337872; --rot: 108.7365506224174"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -15.825134563073261; --y: 8.577010904774697; --rot: 151.54290063416457"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -17.76138937026612; --y: -4.543584350367978; --rot: -165.65074935408828"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -10.124042413278083; --y: -15.682736038669752; --rot: -122.84439934234112"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 3.286888703465229; --y: -18.713534210592947; --rot: -80.03804933059395"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 15.393109078221395; --y: -11.69743436330189; --rot: -37.23169931884679"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 19.573652696006732; --y: 1.910470600110405; --rot: 5.5746506929003825"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 13.28348292373255; --y: 14.951557825688456; --rot: 48.38100070462149"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -0.421341154974095; --y: 20.328967412920154; --rot: 91.18735071636867"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -14.354638450441703; --y: 14.867934156035657; --rot: 133.9937007281158"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -20.967257085933227; --y: 1.1722330367221983; --rot: 176.800050739863"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -16.4360966114791; --y: -13.600214678056968; --rot: -140.39359924838985"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -2.860775647155607; --y: -21.476973882302087; --rot: -97.58724923664268"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 12.687503331462077; --y: -17.972959111235376; --rot: -54.78089922489552"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 21.84735684226017; --y: -4.633656955874658; --rot: -11.974549213148348"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 19.46331283354873; --y: 11.617109421934321; --rot: 30.831800798598817"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 6.479160447048244; --y: 22.06854050229434; --rot: 73.63815081031993"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -10.3910504055665; --y: 20.891876792510068; --rot: 116.4445008220671"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -22.13165780780177; --y: 8.384559248373058; --rot: 159.25085083381427"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -22.243425760028288; --y: -9.01276930017129; --rot: -157.9427991544125"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -10.3362019182764; --y: -22.028936447675598; --rot: -115.13644914271748"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 7.487136439368194; --y: -23.50291965656032; --rot: -72.33009913097031"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 21.753787786299146; --y: -12.319607012752561; --rot: -29.523749119223133"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 24.655633416718768; --y: 5.820439725498292; --rot: 13.282600892524032"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 14.319565792578622; --y: 21.300887617416087; --rot: 56.0889509042712"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.020363327691556; --y: 25.68728632443203; --rot: 98.89530091601837"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -20.666248019745495; --y: 16.320252364188793; --rot: 141.70165092776554"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -26.584169807206504; --y: -2.0959548594187996; --rot: -175.49199906048733"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -18.305340485756357; --y: -19.847279654918186; --rot: -132.68564904874015"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 0.057581155948083516; --y: -27.33327268223823; --rot: -89.87929903699298"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 18.84284391452828; --y: -20.258126212884772; --rot: -47.07294902524581"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 27.922402857136046; --y: -2.0831271405751632; --rot: -4.266599013498643"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 22.16165550711833; --y: 17.65329439401013; --rot: 38.53975099824853"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 4.313341894980363; --y: 28.3403045056821; --rot: 81.34610100999569"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -16.280507246328927; --y: 23.998855885275685; --rot: 124.15245102174283"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -28.576769763946693; --y: 6.61911431407755; --rot: 166.95880103343794"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -25.75267114884978; --y: -14.727900047539404; --rot: -150.23484895481494"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -8.98546184266607; --y: -28.622744024184545; --rot: -107.42849894306777"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 13.000438888788777; --y: -27.406198200589216; --rot: -64.62214893132061"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 28.470423942874046; --y: -11.396464581503718; --rot: -21.81579891957343"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 28.94282493064215; --y: 11.104633493915923; --rot: 20.990551092173735"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 13.835370611186647; --y: 28.113347325227757; --rot: 63.79690110392091"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -9.048520249760422; --y: 30.346368136359473; --rot: 106.60325111566807"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -27.546474100575228; --y: 16.28470953460141; --rot: 149.40960112741524"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -31.601210429961945; --y: -6.841633124167712; --rot: -167.7840488608376"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -18.726413482314726; --y: -26.76625766147543; --rot: -124.97769884909044"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 4.494962536678156; --y: -32.69243508510585; --rot: -82.17134883734327"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 25.7707059034898; --y: -21.141944762650084; --rot: -39.3649988255961"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 33.60595777820879; --y: 2.02090233650531; --rot: 3.4413511861510613"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 23.512429280812498; --y: 24.559431371975844; --rot: 46.24770119789822"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 0.5668148681972511; --y: 34.32865419271441; --rot: 89.0540512096454"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -23.133689996547968; --y: 25.818794799939717; --rot: 131.86040122139255"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -34.84848247437296; --y: 3.253193697479579; --rot: 174.6667512330876"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -28.04191307177924; --y: -21.496407972478128; --rot: -142.5268987551652"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -6.022062883967713; --y: -35.154599553012254; --rot: -99.72054874341806"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 19.65219643097243; --y: -30.162744826001408; --rot: -56.91419873167089"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 35.23747038093965; --y: -8.856172551588644; --rot: -14.107848719923727"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 32.16248657599565; --y: 17.607353625498174; --rot: 28.698501291823447"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 11.737301303225307; --y: 35.088969180033; --rot: 71.50485130357062"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -15.369854450650442; --y: 34.0227181739437; --rot: 114.31120131531777"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -34.702471838266504; --y: 14.64637245505172; --rot: 157.11755132706494"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -35.72555003179635; --y: -12.949327199728012; --rot: -160.0760986611879"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -17.563578680799612; --y: -34.07293865177769; --rot: -117.26974864944074"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 10.357017559682696; --y: -37.25376891509818; --rot: -74.46339863769357"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 33.196986670160385; --y: -20.4685142602289; --rot: -31.657048625946395"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 38.590981215254786; --y: 7.605739934744262; --rot: 11.149301385800765"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 23.340314062008446; --y: 32.07295097011273; --rot: 53.95565139754794"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.709816282981142; --y: 39.72175261214648; --rot: 96.762001409243"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -30.700934255414023; --y: 26.157798332859052; --rot: 139.56835142099015"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -40.6317430531175; --y: -1.6850027427915772; --rot: -177.6252985672627"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -28.899622312337584; --y: -29.082844259188953; --rot: -134.81894855551553"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -1.451595583094744; --y: -41.307835996425474; --rot: -92.01259854376836"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 27.22241850619412; --y: -31.544429647478665; --rot: -49.206248532021185"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 41.73826089668896; --y: -4.681621227729245; --rot: -6.399898520274021"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 34.07100854164424; --y: 25.125236079812595; --rot: 36.40645149147315"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 7.985571799934868; --y: 41.9127079472626; --rot: 79.21280150322032"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -22.798716127135823; --y: 36.458449541282974; --rot: 122.01915151496749"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -41.82243413886714; --y: 11.342917635154492; --rot: 164.82550152671465"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -38.68630383953388; --y: -20.252102928166344; --rot: -152.3681484615382"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -14.732228948025213; --y: -41.460359745460096; --rot: -109.56179844979104"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 17.49643744930793; --y: -40.73474095936906; --rot: -66.75544843804386"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 40.82115440671581; --y: -18.131311701423513; --rot: -23.949098426296693"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 42.584704670392775; --y: 14.544515397063856; --rot: 18.85725158545047"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 21.517351335475368; --y: 39.901312041295434; --rot: 61.66360159719763"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -11.410831884347257; --y: 44.218065992890374; --rot: 104.4699516088927"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -38.69921389589663; --y: 24.867063434182203; --rot: 147.27630162063986"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -45.617772150193844; --y: -8.111512918733291; --rot: -169.917348367613"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -28.1568503470626; --y: -37.21517911163264; --rot: -127.1109983558658"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 4.664234017242289; --y: -46.767990346308444; --rot: -84.30464834411865"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 35.45150227032293; --y: -31.362962730292754; --rot: -41.49829833237149"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 47.654245269028365; --y: 1.088126348545114; --rot: 1.3080516794277945"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 34.461664923648314; --y: 33.412477470103696; --rot: 44.11440169117497"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 2.596329105310542; --y: 48.26354925083762; --rot: 86.92075170281791"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -31.10440856879586; --y: 37.42940304132385; --rot: 129.72710171456507"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -48.58452405905196; --y: 6.367418782787986; --rot: 172.53345172631225"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -40.24297462062279; --y: -28.535605328460935; --rot: -144.6601982619406"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -10.20232450389923; --y: -48.60751333379352; --rot: -101.85384825019344"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 25.716365288214067; --y: -42.87969865056352; --rot: -59.047498238446266"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 48.324684746678614; --y: -14.077261401940792; --rot: -16.241148226699103"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 45.31758478274688; --y: 22.658941294104174; --rot: 26.565201785048068"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 17.967624994489764; --y: 47.73012101448504; --rot: 69.37155179679523"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -19.377494711828742; --y: 47.53550052123318; --rot: 112.1779018085424"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -46.81989897002005; --y: 21.84814648617955; --rot: 154.9842518202896"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -49.51333518666967; --y: -15.888034450255287; --rot: -162.2093981679633"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -25.693055328089528; --y: -45.59215596662992; --rot: -119.40304815621612"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 12.208342024012008; --y: -51.23215945870835; --rot: -76.59669814446895"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 44.04714297276413; --y: -29.47624799625752; --rot: -33.79034813272178"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 52.67437931742514; --y: 8.357882983654351; --rot: 9.01600187902539"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 33.17146189616231; --y: 42.187263798243215; --rot: 51.822351890772545"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.357705140819156; --y: 53.82388322952626; --rot: 94.62870190251972"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -40.0170999838369; --y: 36.75245325137782; --rot: 137.4350519142669"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -54.66618145844418; --y: -0.23032411271523665; --rot: -179.75859807398595"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -40.193177793365365; --y: -37.54342097985905; --rot: -136.9522480622388"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.000403195413995; --y: -55.18853641882433; --rot: -94.14589805049164"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 34.77517933711878; --y: -43.46797303589167; --rot: -51.339548038744454"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 55.380083045171304; --y: -8.309416460253368; --rot: -8.533198026997288"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 46.551740892134546; --y: 31.72349073409188; --rot: 34.27315198474988"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 12.670600366206974; --y: 55.23193820128881; --rot: 77.07950199649704"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -28.401598766932885; --y: 49.420129375408926; --rot: 119.88585200824421"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -54.73729822128783; --y: 17.056942708026888; --rot: 162.69220201999138"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -52.049712115801974; --y: -24.824824533248606; --rot: -154.50144796826146"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -21.440701214100866; --y: -53.89152374397715; --rot: -111.6950979565143"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 21.010501145702563; --y: -54.41816442498046; --rot: -68.88874794476712"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 52.69221107991762; --y: -25.793578062905198; --rot: -26.082397933124184"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 56.504434650132666; --y: 16.977893416701832; --rot: 16.723952078622986"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 30.086900999358797; --y: 51.13924943425771; --rot: 59.53030209037016"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -12.748103060839094; --y: 58.28890957516135; --rot: 102.33665210211731"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -49.23486339653228; --y: 34.29180990156113; --rot: 145.1430021138645"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -59.75357265398634; --y: -8.343959863031893; --rot: -172.05064787438835"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -38.37944759398997; --y: -46.98364020406062; --rot: -129.24429786264122"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 3.7898993652419692; --y: -60.8821538942352; --rot: -86.43794785089403"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 44.392541382359155; --y: -42.32115366330776; --rot: -43.63159783914686"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 61.660270253855316; --y: -0.8881722801927414; --rot: -0.8252478273996929"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 46.088659995587186; --y: 41.47089846881982; --rot: 41.98110218434747"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 5.66302554521281; --y: 62.07555546363409; --rot: 84.78745219609463"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -38.23039263063851; --y: 49.65428672751559; --rot: 127.59380220784182"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -62.1177782480048; --y: 10.50626601279932; --rot: 170.400152219589"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -52.991137285713414; --y: -34.68501809539365; --rot: -146.79349776866388"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -15.38850319343061; --y: -61.77894798319424; --rot: -103.98714775691671"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 30.85102942170773; --y: -56.073291178786036; --rot: -61.18079774516953"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 61.05340690568768; --y: -20.27952866775519; --rot: -18.37444773342237"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 58.875993206166605; --y: 26.74687274739239; --rot: 24.431902278324795"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 25.148502476900106; --y: 59.9379080646743; --rot: 67.23825229007197"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -22.393101262645317; --y: 61.37583775628123; --rot: 110.04460230181914"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -58.431678299108036; --y: 29.9641466132553; --rot: 152.8509523135663"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -63.55094688410423; --y: -17.812275265494954; --rot: -164.34269767468655"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -34.694944403040274; --y: -56.536465612744614; --rot: -121.53634766293938"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 13.028847265033003; --y: -65.3811408847298; --rot: -78.7299976511922"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 54.25657041842388; --y: -39.3093445179465; --rot: -35.92364763944504"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 66.84810011507282; --y: 8.069032704294763; --rot: 6.882702372302121"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 43.77596830708827; --y: 51.59886022534395; --rot: 49.68905238404929"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -2.96066697821073; --y: 67.93551686006468; --rot: 92.49540239579646"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -48.57276744947577; --y: 48.063819102767845; --rot: 135.30175240754363"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -68.6292360925141; --y: 2.2669504778600884; --rot: 178.1081024192908"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -52.14249212449437; --y: -45.190270136911586; --rot: -139.08554756896206"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -7.583224157596768; --y: -68.91738403687962; --rot: -96.2791975572149"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 41.46585550202399; --y: -55.982383585639795; --rot: -53.472847545571945"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 68.7904835161919; --y: -12.956441548840877; --rot: -10.666497533824774"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 59.5548975955979; --y: 37.41646629701453; --rot: 32.13985247792239"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 18.353962245622782; --y: 68.24155513808307; --rot: 74.94620248966956"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -33.06143014239221; --y: 62.832649450263666; --rot: 117.75255250141673"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -67.26620345911334; --y: 23.742415981563713; --rot: 160.5589025131639"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -65.78966390862729; --y: -28.422372066753596; --rot: -156.63474747508897"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -29.087908382052724; --y: -65.86268735754189; --rot: -113.82839746334179"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 23.52311061571301; --y: -68.40156707321873; --rot: -71.02204745159462"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 64.03197394040846; --y: -34.35623317157015; --rot: -28.21569743984745"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 70.64577051701475; --y: 18.38953800554243; --rot: 14.590652571899717"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 39.51308951224129; --y: 61.77777541297019; --rot: 57.39700258364688"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -13.049484908085036; --y: 72.50164633586908; --rot: 100.20335259539407"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -59.106568445114114; --y: 44.52430310114961; --rot: 143.00970260714124"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -73.95069185048332; --y: -7.5325705625173365; --rot: -174.18394738111164"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -49.356049613004615; --y: -56.02759568025152; --rot: -131.37759736936448"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 1.8700390149417667; --y: -74.97668273591862; --rot: -88.57124735761728"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 52.55284914656188; --y: -53.975079042923326; --rot: -45.764897345870125"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 75.56581341929696; --y: -3.9054176120416106; --rot: -2.95854733412296"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 58.34893948151414; --y: 48.69703544757731; --rot: 39.84780267762421"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 9.759847821418493; --y: 75.70682365731989; --rot: 82.65415268937137"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -44.477522728234824; --y: 62.44619884137972; --rot: 125.46050270111856"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -75.3911102841447; --y: 15.658240326547913; --rot: 168.2668527128657"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -66.23666305075653; --y: -39.91426953289999; --rot: -148.92679727538714"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -21.56473334540042; --y: -74.6128232065567; --rot: -106.12044726363999"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 35.02973579269806; --y: -69.69158923639041; --rot: -63.314097251892804"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 73.36894481675469; --y: -27.442832353587626; --rot: -20.507747240145633"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 72.7838924339585; --y: 29.848776299982607; --rot: 22.29860277160153"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 33.25563497558872; --y: 71.6593520928734; --rot: 65.1049527833487"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -24.398517147129358; --y: 75.48834439036938; --rot: 107.91130279509588"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -69.48686076300089; --y: 38.96606163164435; --rot: 150.71765280684303"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -77.78176305805657; --y: -18.70821572412362; --rot: -166.47599718151403"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -44.53709050445544; --y: -66.85725101918555; --rot: -123.66964716976686"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 12.809104985094065; --y: -79.64319142646124; --rot: -80.86329715801969"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 63.779274383804264; --y: -49.9319953444223; --rot: -38.056947146272535"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 81.05406439137774; --y: 6.734222802187437; --rot: 4.749402865474636"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 55.114584599484516; --y: 60.26464144812204; --rot: 47.5557528772218"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -0.5182273369989925; --y: 81.99836242527766; --rot: 90.36210288896898"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -56.327990327698075; --y: 60.04944032562276; --rot: 133.16845290071615"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -82.46275088568021; --y: 5.802800543188384; --rot: 175.9748029124633"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -64.70215532263566; --y: -51.98683580105187; --rot: -141.21884707578954"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -12.19156667800084; --y: -82.43670387867472; --rot: -98.41249706404237"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 47.26149922541528; --y: -69.03956693141393; --rot: -55.606147052295206"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 81.91261168381666; --y: -18.60978364023243; --rot: -12.79979704054804"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 73.02998593422917; --y: 42.17501944940155; --rot: 30.006552971199127"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 25.018400077723378; --y: 80.88587084278326; --rot: 72.8129029829463"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -36.753045068835675; --y: 76.64341901408191; --rot: 115.61925299469347"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -79.35495611721629; --y: 31.377837997740585; --rot: 158.42560300644064"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -79.85178325404044; --y: -31.023708497333537; --rot: -158.76804698181223"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -37.64823655388623; --y: -77.32147363043869; --rot: -115.96169697006506"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 25.017482446734377; --y: -82.62911119255598; --rot: -73.15534695831788"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 74.79019462255295; --y: -43.78970083743168; --rot: -30.34899694657071"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 84.9517449958186; --y: 18.76701953335716; --rot: 12.45735306517645"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 49.76255412603159; --y: 71.7690693681121; --rot: 55.26370307692362"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -12.30697584345532; --y: 86.798518363121; --rot: 98.07005308867079"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -68.26922092936073; --y: 55.52759200341877; --rot: 140.87640310041795"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -88.15092484565407; --y: -5.673819404389143; --rot: -176.3172468878349"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -61.04633673425661; --y: -64.30491854520564; --rot: -133.5108968760877"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -1.094375383854872; --y: -88.99327133283286; --rot: -90.70454686434056"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 59.89353058579507; --y: -66.28129025911366; --rot: -47.898196852593394"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 89.31281554274875; --y: -7.958146199841308; --rot: -5.091846840846228"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 71.19618416573977; --y: 55.05545713403955; --rot: 37.71450317090094"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 14.876872881776555; --y: 89.09988644420694; --rot: 80.5208531826481"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -49.8140423877593; --y: 75.75622499461655; --rot: 123.32720319439527"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -88.3479866364789; --y: 21.809017797244937; --rot: 166.13355320603821"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -79.92833324928931; --y: -44.19546720839515; --rot: -151.06009678221463"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -28.712375078369842; --y: -87.05387581915457; --rot: -108.25374677046746"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 38.22862227481378; --y: -83.6813745045432; --rot: -65.44739675872029"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 85.21763459636722; --y: -35.544327230157; --rot: -22.64104674697312"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 86.98638104098808; --y: 31.944962427637048; --rot: 20.165303264774046"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 42.262107550670656; --y: 82.84270797949296; --rot: 62.97165327652122"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -25.37834292188653; --y: 89.81676247588888; --rot: 105.77800328826838"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -79.93592807519099; --y: 48.82306675335274; --rot: 148.58435330001555"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -92.14850391765106; --y: -18.56483842479241; --rot: -168.60929668823732"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -55.18494213427595; --y: -76.50751557470934; --rot: -125.80294667649015"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 11.542545718351278; --y: -93.96035023411497; --rot: -82.99659666474297"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 72.57105979231821; --y: -61.306127594391214; --rot: -40.1902466529958"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 95.23397509973348; --y: 4.3513711801897434; --rot: 2.6161033588555886"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 67.14594280324562; --y: 68.14347713592535; --rot: 45.42245337060276"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 2.96719577581774; --y: 95.95413357030519; --rot: 88.22880338234992"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -63.24494802892012; --y: 72.66489977926278; --rot: 131.03515339388863"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -96.10879702613569; --y: 10.370322012044568; --rot: 173.84150340563582"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -77.82496515588676; --y: -57.898832444920785; --rot: -143.35214658261702"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -17.81408135405267; --y: -95.68926942603842; --rot: -100.54579657086987"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 52.13156434614447; --y: -82.58981642189052; --rot: -57.73944655912269"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 94.69028392200806; --y: -25.25371518746304; --rot: -14.933096547375527"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 86.92509043201724; --y: 45.97252546717516; --rot: 27.87325346437164"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 32.64390141301629; --y: 93.11007900140771; --rot: 70.67960347611881"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -39.45389901118494; --y: 90.79862252708034; --rot: 113.48595348786597"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -90.95045344478063; --y: 39.93903014971573; --rot: 156.29230349961315"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -94.18067463941046; --y: -32.61050396589963; --rot: -160.90134648863972"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -47.093484509051095; --y: -88.2167995157145; --rot: -118.09499647689253"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 25.479610875698793; --y: -97.04415081498085; --rot: -75.28864646514538"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 84.91811393194573; --y: -54.0619247161888; --rot: -32.4822964533982"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 99.36479864744125; --y: 18.10074003330968; --rot: 10.324053558348963"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 60.799573814676016; --y: 81.06698630390923; --rot: 53.13040357009613"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -10.515443176415166; --y: 101.12139519367153; --rot: 95.9367535818433"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -76.67956486724601; --y: 67.26250316312805; --rot: 138.74310359359046"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -102.29591602469687; --y: -2.7670698905662663; --rot: -178.45054639466238"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -73.4079159154757; --y: -71.77549947851911; --rot: -135.6441963829152"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -5.099479970723614; --y: -102.87368615942654; --rot: -92.83784637116806"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 66.37786198766418; --y: -79.1944266708484; --rot: -50.031496359420885"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 102.84351173117682; --y: -13.038016435680486; --rot: -7.225146347673713"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 84.5823354851924; --y: 60.51304424560347; --rot: 35.58120366407345"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 21.001330626659332; --y: 102.19779134773015; --rot: 78.38755367582063"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -54.21063415006008; --y: 89.53389445433194; --rot: 121.19390368756781"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -100.93260622413504; --y: 28.9414754427568; --rot: 164.00025369931495"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -94.0135651073644; --y: -47.50327027599748; --rot: -153.1933962889379"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -36.810054044176475; --y: -99.0477882928703; --rot: -110.38704627719072"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 40.426475778349015; --y: -97.98826488994771; --rot: -67.58069626544356"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 96.54696562764339; --y: -44.55851440378622; --rot: -24.77434625369639"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 101.42760106903225; --y: 33.01847239287467; --rot: 18.03200375805078"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 52.138448135639884; --y: 93.43758465418072; --rot: 60.83835376979794"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -25.319975495180678; --y: 104.3040904536725; --rot: 103.64470378154512"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -89.73090876306557; --y: 59.50189176543479; --rot: 146.4510537932923"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -106.59336340042061; --y: -17.373971307270853; --rot: -170.74259619496058"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -66.60162857432132; --y: -85.44199308512914; --rot: -127.93624618321341"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 9.225477464601964; --y: -108.27435065607443; --rot: -85.12989617146623"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 80.58963533820359; --y: -73.39148912547944; --rot: -42.323546159719065"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 109.32945168477981; --y: 0.9212882736546057; --rot: 0.48280385202810117"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 79.82664857266828; --y: 75.1963028042835; --rot: 43.28915386377527"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 7.4902939002966455; --y: 109.74468323015553; --rot: 86.09550387552244"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -69.28803564737834; --y: 85.86391885170437; --rot: 128.9018538872696"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -109.50980697563931; --y: 15.959739573982153; --rot: 171.70820389901675"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -91.46203386961983; --y: -62.89432693361554; --rot: -145.48544608923606"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -24.43658378156523; --y: -108.61843528700666; --rot: -102.67909607748891"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 56.04797986551489; --y: -96.58192583211044; --rot: -59.872746065741744"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 107.06811414929074; --y: -32.86972668755321; --rot: -17.066396053994577"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 101.18699088774004; --y: 48.78494289083664; --rot: 25.73995395775259"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 41.20774138694976; --y: 104.86038254538292; --rot: 68.54630396949976"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -41.14412349204918; --y: 105.2433423170844; --rot: 111.35265398124693"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -102.00080766461866; --y: 49.399187039969725; --rot: 154.1590039929941"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -108.72004955635826; --y: -33.1671816043226; --rot: -163.03464599525876"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -57.39292543734431; --y: -98.49899547580898; --rot: -120.22829598351159"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 24.898303747098876; --y: -111.58936141778172; --rot: -77.42194597176442"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 94.36857634957983; --y: -65.13843905251315; --rot: -34.61559596001725"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 113.82691195264172; --y: 16.38395908581163; --rot: 8.190754051729916"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 72.58614860917736; --y: 89.6271655686165; --rot: 50.99710406347709"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -7.672638765348719; --y: 115.41190749725197; --rot: 93.80345407522425"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -84.29629872052784; --y: 79.6877281770508; --rot: 136.60980408697142"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -116.32729354630256; --y: 1.1854200254754903; --rot: 179.41615409871858"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -86.39641580539339; --y: -78.4013421255828; --rot: -137.77749588953424"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -10.138523689649176; --y: -116.5599002118414; --rot: -94.9711458777871"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 71.97137860920714; --y: -92.66731771342728; --rot: -52.16479586624837"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 116.10056514863496; --y: -19.133823888915053; --rot: -9.358445854501202"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 98.4577040766856; --y: 65.03906908887771; --rot: 33.44790415724597"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 28.117629479013978; --y: 114.94423295780724; --rot: 76.25425416899314"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -57.64049059395539; --y: 103.72729448831642; --rot: 119.06060418074031"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -113.09003021745102; --y: 37.03572687846177; --rot: 161.86695419248747"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -108.43853121156069; --y: -49.81495150177123; --rot: -155.32669579576537"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -45.833706951413916; --y: -110.54131543546522; --rot: -112.52034578401822"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 41.604784911679616; --y: -112.55683840821435; --rot: -69.71399577227103"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 107.30570336840238; --y: -54.457296441556366; --rot: -26.907645760523874"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 116.05086559290619; --y: 33.05512123078157; --rot: 15.89870425122329"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 62.85269193845181; --y: 103.39506330618534; --rot: 58.70505426297046"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -24.213641182575778; --y: 118.89271364746978; --rot: 101.51140427471762"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -98.82549108122637; --y: 70.9668943263845; --rot: 144.31775428646478"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -121.05814182303858; --y: -15.130310583496778; --rot: -172.87589570178807"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -78.7480416435306; --y: -93.61725472237056; --rot: -130.06954569004088"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 5.857098358407463; --y: -122.52675426179808; --rot: -87.26319567829373"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 87.79471383783222; --y: -86.1457382702891; --rot: -44.45684566654655"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 123.2821646847299; --y: -3.5523206159135574; --rot: -1.6504956547993859"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 93.11137836957812; --y: 81.38621297591938; --rot: 41.15585435694778"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 13.04287614121536; --y: 123.31213801554539; --rot: 83.96220436869494"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -74.4239493768212; --y: 99.59846151891168; --rot: 126.76855438044211"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -122.60870784362498; --y: 22.55842500473804; --rot: 169.57490439218927"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -105.56289850412145; --y: -66.94381569203053; --rot: -147.61874559606355"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -32.042083076347396; --y: -121.16826876939727; --rot: -104.8123955843164"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 58.98521840905603; --y: -110.96330528759077; --rot: -62.00604557256923"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 118.991642823384; --y: -41.43656523159478; --rot: -19.199695560822057"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 115.7612832196619; --y: 50.59087287691658; --rot: 23.606654450925106"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 50.684531070174984; --y: 116.08411930423951; --rot: 66.41300446267228"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -41.80657598148803; --y: 119.92168363020954; --rot: 109.21935447441945"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -112.4554675406072; --y: 59.728934345099574; --rot: 152.0257044861666"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -123.41285501791928; --y: -32.68095766809493; --rot: -165.16794550208624"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -68.51337397630775; --y: -108.11992224554453; --rot: -122.36159549033908"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 23.265212650834375; --y: -126.20687114716021; --rot: -79.55524547859191"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 103.09614129964253; --y: -76.98244449376267; --rot: -36.74889546684474"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 128.2797384660105; --y: 13.612813783048017; --rot: 6.057454544902429"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 85.08208373960953; --y: 97.40713596876354; --rot: 48.86380455664959"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -3.7792086902200306; --y: 129.6115813734259; --rot: 91.67015456839677"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -91.08017373349841; --y: 92.75991565690293; --rot: 134.47650458014394"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -130.18680398810108; --y: 6.17849861548365; --rot: 177.2828545918911"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -99.96558600386538; --y: -84.14665407894461; --rot: -139.91079539636175"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -16.201879311613457; --y: -129.99422720556444; --rot: -97.10444538461459"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 76.64195776415615; --y: -106.65108885764717; --rot: -54.29809537286741"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 129.0271999727057; --y: -26.231522607628506; --rot: -11.491745361120248"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 112.77108181007496; --y: 68.60527025954624; --rot: 31.314604650626915"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 36.20738784119458; --y: 127.28368385943435; --rot: 74.12095466237409"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -60.079380206562774; --y: 118.2831878097632; --rot: 116.92730467412125"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -124.76631016463645; --y: 46.06916374215768; --rot: 159.73365468586843"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -123.14828166999988; --y: -51.11045391604496; --rot: -157.4599953023844"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -55.75663271538385; --y: -121.48240895709783; --rot: -114.65364529063729"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 41.7477870787695; --y: -127.33075933970443; --rot: -71.84729527889009"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 117.44400962062898; --y: -65.21003794412373; --rot: -29.04094526714292"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 130.79878812510358; --y: 32.04353501278177; --rot: 13.76540474460424"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 74.37045107928319; --y: 112.66781264524464; --rot: 56.57175475635141"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -22.052422916198577; --y: 133.5245361521104; --rot: 99.37810476809858"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -107.17513258187645; --y: 83.18013825728858; --rot: 142.18445477984574"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -135.48437947318428; --y: -11.831437730310105; --rot: -175.0091952084071"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -91.58292218037087; --y: -100.99181225565721; --rot: -132.20284519665995"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 1.4395033450905843; --y: -136.65908534706813; --rot: -89.39649518491277"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 94.14810851122216; --y: -99.52453799822; --rot: -46.590145173165595"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 137.03397035455257; --y: -9.062859003209574; --rot: -3.783795161418433"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 106.95298074915456; --y: 86.67854994162097; --rot: 39.02255485032874"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 19.61388318567868; --y: 136.59903215754696; --rot: 81.8289048620759"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -78.62176722921147; --y: 113.81884215219728; --rot: 124.63525487382307"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -135.34905386141517; --y: 30.150921433086896; --rot: 167.44160488557023"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -120.07563458890385; --y: -70.0202969007704; --rot: -149.75204510289106"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -40.61081625114769; --y: -133.2836801007284; --rot: -106.94569509114389"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 60.92035947281247; --y: -125.68010017294338; --rot: -64.13934507939672"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 130.40746413665542; --y: -50.930278788230986; --rot: -21.33299506764955"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 130.59250288543436; --y: 51.371613120110055; --rot: 21.47335494409762"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 61.04627139715247; --y: 126.7298854241426; --rot: 64.27970495584478"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -41.426884175691036; --y: 134.77690183222748; --rot: 107.08605496759196"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -122.26533728915902; --y: 70.8963920709601; --rot: 149.89240497933912"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -138.2014037891645; --y: -31.141875909276077; --rot: -167.30124500891372"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -80.41925841913914; --y: -117.0330845330316; --rot: -124.49489499716657"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 20.57485718572153; --y: -140.83839330795047; --rot: -81.6885449854194"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 111.05719096713702; --y: -89.55488882393097; --rot: -38.88219497367223"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 142.66473878123836; --y: 9.786332739133; --rot: 3.9241550380749417"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 98.24507841793009; --y: 104.36641706554468; --rot: 46.73050504982211"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 1.1613030739051111; --y: 143.66197300010063; --rot: 89.53685506156927"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -96.99408810873928; --y: 106.43376753622002; --rot: 132.34320507331645"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -143.81644688203522; --y: 12.20412706168923; --rot: 175.1495550850636"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -114.06740032349228; --y: -88.97793337611631; --rot: -142.04409490318923"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -23.277060439519943; --y: -143.1194552019219; --rot: -99.23774489144208"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 80.35989712750047; --y: -121.09527121830696; --rot: -56.4313948796949"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 141.5673333210183; --y: -34.31425234728969; --rot: -13.625044867947732"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 127.46985709275125; --y: 71.18592229334091; --rot: 29.181305143799435"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 45.2494713824858; --y: 139.1615240792154; --rot: 71.9876551555466"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -61.50570796835434; --y: 133.14713289599075; --rot: 114.79400516729379"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -135.9086141923702; --y: 56.016502821128256; --rot: 157.60035517904092"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -138.08686873425611; --y: -51.37244197309913; --rot: -159.5932948092119"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -66.54954914556302; --y: -131.82033967854403; --rot: -116.78694479746474"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 40.84250991118697; --y: -142.25290641724897; --rot: -73.98059478571757"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 126.91356002331851; --y: -76.78363145869898; --rot: -31.174244773970408"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 145.61341361127816; --y: 29.975182305510746; --rot: 11.632105237776758"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 86.65498933955698; --y: 121.21020098391581; --rot: 54.438455249523926"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -18.832281543974098; --y: 148.14111386206375; --rot: 97.2448052612711"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -114.73716612346689; --y: 96.10147668515334; --rot: 140.05115527301825"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -149.8134908844051; --y: -7.477830502777525; --rot: -177.1424947152346"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -105.06295108893418; --y: -107.52621735928098; --rot: -134.3361447034874"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.022315157571606; --y: -150.61296566105327; --rot: -91.52979469174025"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 99.61382500119258; --y: -113.4816543262909; --rot: -48.72344467999309"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 150.52704504834068; --y: -15.600848912562428; --rot: -5.917094668245919"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 121.30258155310305; --y: 91.04098794680645; --rot: 36.88925534350125"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 27.18940729565258; --y: 149.54844075051773; --rot: 79.69560535524842"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -81.85302488853988; --y: 128.4738368736628; --rot: 122.50195536699559"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -147.67515769737858; --y: 38.718973516423105; --rot: 165.30830537874274"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -134.94697299953395; --y: -72.09933757159669; --rot: -151.8853446095101"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -50.12028839208231; --y: -144.9105510396176; --rot: -109.07899459776294"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 61.83314732123298; --y: -140.67731280059036; --rot: -66.27264458601576"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 141.26335116239318; --y: -61.324266146203406; --rot: -23.466294574268595"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 145.62425064327525; --y: 51.11120623075069; --rot: 19.340055437478572"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 72.2624125798569; --y: 136.74765630867796; --rot: 62.14640544922574"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -39.99348456747251; --y: 149.75153151855022; --rot: 104.95275546097291"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -131.38289259900418; --y: 82.86724308653561; --rot: 147.75910547272005"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -153.0275060824913; --y: -28.5428361114343; --rot: -169.43454451553276"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -93.072697963783; --y: -125.1937414319998; --rot: -126.62819450378561"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 16.824643289652723; --y: -155.42535986539346; --rot: -83.82184449203844"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 118.21003444945224; --y: -102.81455247144618; --rot: -41.015494480291274"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 156.92331504983173; --y: 4.906444106606361; --rot: 1.7908555314558954"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 112.03081909910945; --y: 110.46661644931646; --rot: 44.59720554320306"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 7.14245700191195; --y: 157.50480337359116; --rot: 87.40355555495022"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -102.00317682888102; --y: 120.66213953355887; --rot: 130.2099055666974"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -157.1586088788356; --y: 19.251392150014023; --rot: 173.01625557844454"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -128.65216386101463; --y: -92.86405033698321; --rot: -144.17739440980827"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -31.34874447495647; --y: -155.8789794033945; --rot: -101.37104439806113"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 83.09798810750374; --y: -135.94791459818825; --rot: -58.564694386313946"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 153.66570589259229; --y: -43.3623716714823; --rot: -15.758344374566782"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 142.5001332209827; --y: 72.75790013463957; --rot: 27.048005636971943"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 55.220036083279474; --y: 150.5241687993629; --rot: 69.8543556487191"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -61.90057053710376; --y: 148.26360694708197; --rot: 112.66070566046629"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -146.46535103713146; --y: 66.84983878492048; --rot: 155.46705567221343"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -153.1974736381683; --y: -50.58634712377614; --rot: -161.72659431603938"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -78.18065505570235; --y: -141.50581714605372; --rot: -118.92024430429224"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 38.878806959239036; --y: -157.26550279519734; --rot: -76.11389429254507"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 135.66765854316725; --y: -89.14256859955123; --rot: -33.3075442807979"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 160.43635076095347; --y: 26.84439976890417; --rot: 9.498805730949272"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 99.66730187262569; --y: 128.97840492668107; --rot: 52.30515574269643"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -14.55207118278305; --y: 162.68378838123053; --rot: 95.11150575444361"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -121.47090211508039; --y: 109.68863987271578; --rot: 137.91785576619077"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -163.98689953303352; --y: -2.072867951118531; --rot: -179.27579422206207"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -119.14284476878292; --y: -113.18315680721291; --rot: -136.46944421031492"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -10.52047260882463; --y: -164.3302490937018; --rot: -93.66309419856775"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 104.15814895481697; --y: -127.96905878495066; --rot: -50.85674418682058"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 163.70401910055782; --y: -23.153946562850003; --rot: -8.050394175073405"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 136.10969280584698; --y: 94.44361264131315; --rot: 34.75595583667376"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 35.75271823587814; --y: 162.10411203527784; --rot: 77.56230584842093"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -84.09178655901037; --y: 143.51079823863995; --rot: 120.36865586016808"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -159.5322203595879; --y: 48.241563458470715; --rot: 163.17500587191526"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -150.12241975109498; --y: -73.15913536993207; --rot: -154.01864411633758"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -60.54531855880289; --y: -155.99586162798525; --rot: -111.21229410459041"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 61.70604342202877; --y: -155.8989266040976; --rot: -68.40594409284326"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 151.50837870779702; --y: -72.58933242105728; --rot: -25.59959408109608"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 160.799320410829; --y: 49.796482471422266; --rot: 17.20675593065108"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 84.29991889319318; --y: 146.08890484580098; --rot: 60.01310594239825"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -37.49765523137981; --y: 164.78751728255565; --rot: 102.81945595414543"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -139.7622935325918; --y: 95.60480680534545; --rot: 145.62580596589257"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -167.83260246210747; --y: -24.87961672883986; --rot: -171.56784402236025"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -106.433584854971; --y: -132.55901332960988; --rot: -128.7614940106131"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 12.014875598460451; --y: -169.90905569980066; --rot: -85.95514399886592"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 124.51500803795793; --y: -116.71813862642935; --rot: -43.14879398711876"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 170.99694579195202; --y: -1.0220224186502507; --rot: -0.3424439753715917"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 126.39307704099755; --y: 115.6715228015071; --rot: 42.463906036375576"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 14.154926380052878; --y: 171.08209287830132; --rot: 85.27025604812275"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -106.07489694802906; --y: 135.39614557831777; --rot: 128.0766060598699"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -170.1561972805964; --y: 27.30652494889349; --rot: 170.8829560716171"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -143.66862367179425; --y: -95.77632457987795; --rot: -146.31069391663576"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -40.398801504475294; --y: -168.2169338592343; --rot: -103.5043439048886"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 84.83158412879035; --y: -151.15570375822546; --rot: -60.69799389314144"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 165.26801106705864; --y: -53.35349687742774; --rot: -17.89164388139427"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 157.80684955561338; --y: 73.30073828640478; --rot: 24.914706130352894"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 66.0925769652705; --y: 161.3191940879972; --rot: 67.72105614210007"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -61.24780591187778; --y: 163.57613125216463; --rot: 110.52740615384724"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -156.3862916619609; --y: 78.5387024352968; --rot: 153.3337561655944"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -168.42253541342188; --y: -48.74040769928409; --rot: -163.85989382265845"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -90.61569768950503; --y: -150.49110641503705; --rot: -121.0535438109113"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 35.84938755917565; --y: -172.31024755258179; --rot: -78.24719379916411"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 143.66134873419452; --y: -102.24901625109453; --rot: -35.440843787416945"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 175.20890546061582; --y: 22.648411829620578; --rot: 7.365506224330221"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 113.36619973401505; --y: 135.93051444715204; --rot: 50.17185623607739"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -9.213548581201897; --y: 177.09382155697287; --rot: 92.97820624782456"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -127.33772678939499; --y: 123.89732757631957; --rot: 135.78455625957173"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -177.9461726974927; --y: 4.377170583162686; --rot: 178.59090627131891"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -133.7754547546106; --y: -117.927543360213; --rot: -138.60274371693396"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -18.044203710029226; --y: -177.75315606269484; --rot: -95.79639370518679"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 107.74972898671847; --y: -142.9370347505807; --rot: -52.99004369343962"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 176.50810994576238; --y: -31.706964027151834; --rot: -10.183693681692453"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 151.32232511131278; --y: 96.85899562775397; --rot: 32.62265633005471"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 45.284295100530414; --y: 174.21059846418092; --rot: 75.42900634180188"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -85.31471065707584; --y: 158.87577303229887; --rot: 118.23535635354907"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -170.86645943092324; --y: 58.69495281525577; --rot: 161.0417063652962"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -165.54637849563946; --y: -73.18057506591816; --rot: -156.15194362295662"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -71.8580913182092; --y: -166.48781483904966; --rot: -113.34559361120947"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 60.52427331710002; --y: -171.28803261528444; --rot: -70.53924359967074"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 161.09304363601993; --y: -84.69375001783412; --rot: -27.732893587923567"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 176.05982897382128; --y: 47.41709677060848; --rot: 15.073456423823599"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 97.1233387060098; --y: 154.70671669229102; --rot: 57.879806435570764"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -33.93354276060326; --y: 179.8263458887888; --rot: 100.68615644731794"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -147.35949409081726; --y: 109.07011787107186; --rot: 143.49250645906508"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -182.55789770016304; --y: -20.150891586757517; --rot: -173.70114352918773"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -120.45967125954834; --y: -139.08798510310496; --rot: -130.89479351744058"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 6.148763810249175; --y: -184.23075335400318; --rot: -88.08844350569342"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 129.93457143585883; --y: -131.22036779234188; --rot: -45.28209349394624"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 184.82732073825406; --y: -7.991339607260402; --rot: -2.475743482199079"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 141.28380997348546; --y: 119.94719456419354; --rot: 40.33060652954809"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 22.18651166683725; --y: 184.33629542542184; --rot: 83.13695654129526"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -109.17910818819553; --y: 150.58526599647888; --rot: 125.94330655304243"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -182.7527726829166; --y: 36.3529254368521; --rot: 168.7496565647896"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -159.06408283262945; --y: -97.68859706771737; --rot: -148.44399342346327"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -50.40632904877128; --y: -180.07832182644026; --rot: -105.6376434117161"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 85.53866370191676; --y: -166.66407768282934; --rot: -62.83129339996892"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 176.32102221337766; --y: -64.26254666139022; --rot: -20.024943388221757"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 173.33390528771707; --y: 72.79668452415073; --rot: 22.781406623525413"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 77.83798241537599; --y: 171.49546040040846; --rot: 65.58775663527258"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -59.53403747811325; --y: 179.02739872060286; --rot: 108.39410664701974"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -165.62268822116457; --y: 91.05012436232536; --rot: 151.2004566587669"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -183.70388143219688; --y: -45.825703026319864; --rot: -165.99319332948593"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -103.81804533292318; --y: -158.73014177431946; --rot: -123.18684331773876"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 31.749840816009474; --y: -187.32844847528648; --rot: -80.3804933059916"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 150.85152154861203; --y: -116.06289770743459; --rot: -37.57414329424442"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 189.8722150101162; --y: 17.38734438981348; --rot: 5.232206717711176"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 127.70839906880649; --y: 142.0266341475516; --rot: 48.038556729249905"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -2.821376471867227; --y: 191.31253037699452; --rot: 90.84490674120552"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -132.30119631148747; --y: 138.68130575409347; --rot: 133.65125675274422"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -191.63315621783207; --y: 11.863112491752533; --rot: 176.45760676469985"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -148.91187137366575; --y: -121.72660216692138; --rot: -140.73604322376144"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -26.579879766425538; --y: -190.8244073383874; --rot: -97.92969321222273"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 110.35965486096877; --y: -158.33428743947994; --rot: -55.12334320026711"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 188.88325421746455; --y: -41.24189682832793; --rot: -12.316993188728379"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 166.88710333327944; --y: 98.26226396132486; --rot: 30.489356823227226"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 55.76186397999952; --y: 185.81338629247364; --rot: 73.29570683476595"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -85.50111021757735; --y: 174.51362295249658; --rot: 116.10205684672155"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -181.62523538630472; --y: 70.05273001090328; --rot: 158.9084068582603"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -181.16227549531772; --y: -72.14727948688437; --rot: -158.2852431297841"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -84.02821383123636; --y: -176.33595887238408; --rot: -115.47889311824541"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 58.27586782459233; --y: -186.786957986191; --rot: -72.6725431062898"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 169.96938241757138; --y: -97.60332494638376; --rot: -29.86619309475105"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 191.34734729825476; --y: 43.965559927048076; --rot: 12.94015691720455"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 110.69487963629098; --y: 162.5559023846407; --rot: 55.74650692874328"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -29.298183288467634; --y: 194.80917959889712; --rot: 98.55285694069889"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -154.13234821997955; --y: 123.22200970865316; --rot: 141.35920695223763"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -197.14449532797914; --y: -14.358240595125727; --rot: -175.8344430358068"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -135.10666071980688; --y: -144.74180539547996; --rot: -133.0280930242681"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -0.7675769727301278; --y: -198.33184801413526; --rot: -90.22174301231247"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 134.43339971499276; --y: -146.27407660113062; --rot: -47.41539300077373"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 198.35647544189635; --y: -15.990892728936798; --rot: -4.609042988818126"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 156.65326769146225; --y: 123.26204403369618; --rot: 38.197307022720594"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 31.222160841369835; --y: 197.21043189997178; --rot: 81.00365703467621"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -111.28814867183057; --y: 166.17745925725467; --rot: 123.81000704621492"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -194.89268046761947; --y: 46.37119304687795; --rot: 166.61635705817056"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -174.78451768153596; --y: -98.57729703103017; --rot: -150.57729293029075"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -61.34769262306458; --y: -191.40914453031232; --rot: -107.77094291833514"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 85.19988814053075; --y: -182.41735161971891; --rot: -64.96459290679641"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 186.77271795649577; --y: -76.06179245579037; --rot: -22.1582428948408"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 189.02428555431842; --y: 71.23074807047506; --rot: 20.64810711669793"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 90.42459399698917; --y: 181.00323361271052; --rot: 63.45445712865354"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -56.74871234905203; --y: 194.5594033309681; --rot: 106.26080714019227"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -174.1273901432655; --y: 104.34870388219973; --rot: 149.06715715214787"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -198.98285942396615; --y: -41.8361817080213; --rot: -168.12649283631342"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -117.74876497137926; --y: -166.17863719150543; --rot: -125.3201428243578"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 26.57865365608585; --y: -202.26115586001634; --rot: -82.51379281281908"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 157.1970194910134; --y: -130.5419785902338; --rot: -39.707442800863475"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 204.3673829228512; --y: 11.064232540449533; --rot: 3.0989072106752484"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 142.6486147825032; --y: 147.22898050531023; --rot: 45.905257222630865"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 4.616879097324417; --y: 205.28142196793763; --rot: 88.71160723416958"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -136.32712654223192; --y: 153.99250743629077; --rot: 131.51795724612518"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -204.9901088942986; --y: 20.37290493532049; --rot: 174.32430725766392"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -164.5015312194223; --y: -124.54995251267616; --rot: -142.8693427303805"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -36.11103200653532; --y: -203.48735704837804; --rot: -100.06299271884177"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 111.96153074130905; --y: -174.10805734963247; --rot: -57.256642706886154"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 200.77423857151695; --y: -51.737957411736936; --rot: -14.450292695347427"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 182.7493853346727; --y: 98.6311644676456; --rot: 28.35605731660818"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 67.16044138960142; --y: 196.85902344661244; --rot: 71.16240732814691"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -84.63300789822189; --y: 190.368147944653; --rot: 113.96875734010251"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -191.75717574946822; --y: 82.28586346612236; --rot: 156.77510735164125"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -196.91268682341243; --y: -70.04565488297403; --rot: -160.41854263640317"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -97.0227783670279; --y: -185.49130686473433; --rot: -117.61219262486445"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 54.951698490086514; --y: -202.33739630667813; --rot: -74.80584261290883"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 178.09108568366875; --y: -111.28146835844748; --rot: -31.9994926013701"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 206.60303319134792; --y: 39.43726394218934; --rot: 10.806857410585504"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 124.97448868257302; --y: 169.5931060596918; --rot: 53.61320742212423"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -23.59151755166096; --y: 209.67699039143437; --rot: 96.41955743407985"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -160.04071205629134; --y: 138.0172027766576; --rot: 139.2259074456186"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -211.53353262097374; --y: -7.506154452795005; --rot: -177.96774254242584"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -150.3283040053796; --y: -149.48378177871393; --rot: -135.16139253088713"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -8.725131927336799; --y: -212.1539924613605; --rot: -92.35504251893151"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 137.97847083447516; --y: -161.83032069822698; --rot: -49.54869250739278"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 211.52692539889148; --y: -25.00719559030544; --rot: -6.742342495437174"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 172.45010136486985; --y: 125.58691671650048; --rot: 36.064007516101555"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 41.24399570309791; --y: 209.64822265616107; --rot: 78.87035752764028"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -112.37690564512859; --y: 182.11927706211077; --rot: 121.67670753959591"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -206.52118088955513; --y: 57.33916307168622; --rot: 164.4830575511346"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -190.77469800542877; --y: -98.42150363978; --rot: -152.7105924369098"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -73.19657203323551; --y: -202.1565280731329; --rot: -109.90424242537107"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 83.79865381634824; --y: -198.35884165575348; --rot: -67.09789241341545"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 196.5724051570905; --y: -88.72091434305537; --rot: -24.291542401876733"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 204.82018966718996; --y: 68.59074212090381; --rot: 18.51480761007888"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 103.81827165422682; --y: 189.79430334401576; --rot: 61.3211576216176"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -52.88413391275203; --y: 210.11357125312622; --rot: 104.12750763357322"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -181.8549570962644; --y: 118.39668314406374; --rot: 146.93385764511194"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -214.2004707155464; --y: -36.76868399897027; --rot: -170.25979234293246"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -132.36670486146633; --y: -172.79419325282677; --rot: -127.45344233139373"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 20.33722289705075; --y: -217.04929708440818; --rot: -84.64709231943813"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 162.6587368999031; --y: -145.64195739749093; --rot: -41.840742307899404"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 218.63561402947738; --y: 3.6850222610588568; --rot: 0.9656077040562023"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 158.13965853188216; --y: 151.5019749027045; --rot: 43.77195771559494"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 13.090757451260593; --y: 218.94232843482635; --rot: 86.57830772755054"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -139.38367826532675; --y: 169.78113757915608; --rot: 129.38465773908928"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -217.95983626498833; --y: 29.89163386868442; --rot: 172.19100775104488"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -180.49232824877464; --y: -126.36968473931702; --rot: -145.00264223741644"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -46.61838084652025; --y: -215.68612460013873; --rot: -102.19629222546082"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 112.53154334821477; --y: -190.20423694457716; --rot: -59.38994221392208"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 212.12682897420086; --y: -63.17161446246713; --rot: -16.58359220196647"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 198.85338355836927; --y: 97.9461227333639; --rot: 26.22275780957225"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 79.45238340783726; --y: 207.29524541294725; --rot: 69.02910782152786"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -82.69518545418927; --y: 206.38221196074133; --rot: 111.83545783306658"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -201.21229683744065; --y: 95.36276026754945; --rot: 154.64180784502219"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -212.73946755800557; --y: -66.86493059247346; --rot: -162.5518421434391"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -110.806430157029; --y: -193.90645376993834; --rot: -119.74549213148349"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 50.54550721359464; --y: -217.88053946669544; --rot: -76.93914211994476"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 185.41360955305547; --y: -125.68927317996199; --rot: -34.132792107989154"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 221.76776505535938; --y: 33.83050142689827; --rot: 8.673557903549579"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 139.91993718789422; --y: 175.77691056690819; --rot: 51.47990791550519"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -16.816399961155582; --y: 224.3706948162938; --rot: 94.28625792704392"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -165.04654220148487; --y: 153.41039736095004; --rot: 137.09260793899952"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -225.66631575619044; --y: 0.3979666717178022; --rot: 179.89895795053823"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -166.07649918835423; --y: -153.27947161097788; --rot: -137.29469203750617"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -17.71199821188674; --y: -225.6392317331361; --rot: -94.48834202596744"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 140.53914854161093; --y: -177.8384815077344; --rot: -51.681992014011826"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 224.28179941662322; --y: -35.023912551877885; --rot: -8.8756420024731"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 188.62147636298323; --y: 126.89516578299191; --rot: 33.93070800948251"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 52.23134406630055; --y: 221.59421880576858; --rot: 76.73705802102123"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -112.42288104362935; --y: 198.35598256127787; --rot: 119.54340803297684"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -217.58457750728695; --y: 69.2319488537377; --rot: 162.34975804451557"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -206.9783099500673; --y: -97.20300229241022; --rot: -154.84389194352883"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -85.92401331256097; --y: -212.26884824736493; --rot: -112.03754193199012"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 81.32113883805532; --y: -214.43099159370485; --rot: -69.2311919200345"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 205.67083936882327; --y: -102.2070624326004; --rot: -26.424841908495775"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 220.66316120606785; --y: 64.86732063639529; --rot: 16.381508103459833"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 117.98246416628194; --y: 197.8220983451961; --rot: 59.18785811499855"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -47.935488519374836; --y: 225.63089338900377; --rot: 101.99420812695418"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -188.76176862492804; --y: 133.1540262462579; --rot: 144.8005581384929"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -229.29750443568958; --y: -30.62295822868897; --rot: -172.39309184955152"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -147.6285818417928; --y: -178.53640040010197; --rot: -129.58674183801278"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 13.029861309671153; --y: -231.63381168182406; --rot: -86.78039182605717"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 167.19971617327585; --y: -161.31656049319233; --rot: -43.97404181451845"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 232.61834962471372; --y: -4.741433923638492; --rot: -1.167691802562844"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 174.1325408322089; --y: 154.81233227142826; --rot: 41.63865820897588"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 22.586918004441326; --y: 232.2375412794088; --rot: 84.44500822093148"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -141.4414377260221; --y: 185.9957816863246; --rot: 127.25135823247022"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -230.485823500664; --y: 40.401549044817024; --rot: 170.05770824442584"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -196.83072827567298; --y: -127.16043220113441; --rot: -147.13594174403548"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -58.07987102201309; --y: -227.36572526770775; --rot: -104.32959173249674"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 112.04852490585716; --y: -206.5674903425549; --rot: -61.52324172054113"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 222.88789820771237; --y: -75.51663797022628; --rot: -18.716891709002404"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 215.1422892043549; --y: 96.1902966711689; --rot: 24.089458302953204"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 92.6074404085489; --y: 217.0710989076553; --rot: 66.89580831449194"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -79.67522760369593; --y: 222.49787089036087; --rot: 109.70215832644755"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -209.94212286320356; --y: 109.24933024418335; --rot: 152.50850833798626"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -228.58388271061534; --y: -62.59719294776444; --rot: -164.68514165005814"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -125.34144043742798; --y: -201.53569018955875; --rot: -121.87879163851943"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 45.053929991507125; --y: -233.35721080944728; --rot: -79.0724416265638"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 191.89428351542804; --y: -140.78559569110942; --rot: -36.266091615025076"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 236.78227647660185; --y: 27.146479041228627; --rot: 6.54025839693053"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 155.48691047257213; --y: 181.06793876739226; --rot: 49.34660840846926"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -8.978601659535872; --y: 238.83128922366805; --rot: 92.15295842042488"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -169.11398983779836; --y: 169.35437073068258; --rot: 134.9593084319636"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -239.48445488145975; --y: 9.343820484212072; --rot: 177.7656584439192"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -182.30139574842923; --y: -156.09676841041454; --rot: -139.4279915445421"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -27.71340266880006; --y: -238.7301372337143; --rot: -96.62164153258648"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 142.0872604930307; --y: -194.2463766715613; --rot: -53.815291521047754"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 236.56497197243735; --y: -46.021886485453194; --rot: -11.008941509092146"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 205.11318837482506; --y: 127.16272147328131; --rot: 31.797408502446586"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 64.16077782293223; --y: 232.99393203887115; --rot: 74.60375851440219"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -111.4062517715727; --y: 214.8316714691038; --rot: 117.41010852594091"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -228.03034369977053; --y: 82.02198971378938; --rot: 160.21645853789653"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -223.33808141440744; --y: -94.90633541151308; --rot: -156.97719145056476"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -99.49848623326311; --y: -221.69585299975537; --rot: -114.17084143860916"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 77.75634406213689; --y: -230.57550188431054; --rot: -71.36449142707043"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 214.02034252525212; --y: -116.48492361596932; --rot: -28.55814141511482"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 236.4942197261287; --y: 60.05400932601884; --rot: 14.248208596423904"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 132.8782847520568; --y: 205.0417987121872; --rot: 57.05455860837951"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -41.90086625169456; --y: 241.0520590767384; --rot: 99.86090861991825"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -194.8061302263857; --y: 148.5785032439769; --rot: 142.66725863187386"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -244.21467242528794; --y: -23.4016712363404; --rot: -174.52639135658745"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -163.4890732474665; --y: -183.36693824077346; --rot: -131.72004134463182"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 4.663797654206438; --y: -245.95578665979912; --rot: -88.91369133309311"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 170.78523972520708; --y: -177.51764138562302; --rot: -46.1073413211375"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 246.25740239342628; --y: -14.203387303265396; --rot: -3.300991309598772"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 190.57657711278245; --y: 157.12914515129168; --rot: 39.50535870235684"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 33.08916095936976; --y: 245.1099451364279; --rot: 82.31170871389557"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -142.4734922941509; --y: 202.58351801488269; --rot: 125.11805872585118"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -242.51236716015856; --y: 51.88209493049073; --rot: 167.92440873738988"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -213.4618866645561; --y: -126.89943808406983; --rot: -149.26924125065452"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -70.47071253764857; --y: -238.47219918797077; --rot: -106.46289123911579"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 110.49401072157845; --y: -223.1413758016646; --rot: -63.656541227160176"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 233.005551343139; --y: -88.7441499727781; --rot: -20.850191215621447"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 231.55839878256236; --y: 93.34962451826068; --rot: 21.95615879633416"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 106.59281729892633; --y: 226.1370630840458; --rot: 64.76250880787289"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -75.56356016081436; --y: 238.65650243310105; --rot: 107.5688588198285"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -217.89980216012788; --y: 123.90905534445375; --rot: 150.37520883136722"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -244.3867396502386; --y: -57.23741331617367; --rot: -166.81844115667718"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -140.58778455569805; --y: -208.33511292666216; --rot: -124.01209114513846"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 38.476514699442454; --y: -248.70799932389528; --rot: -81.20574113318285"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 197.49241466056478; --y: -156.52714190050085; --rot: -38.399391121644115"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 251.58729139315048; --y: 19.38932491267058; --rot: 4.406958890311484"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 171.62910196645558; --y: 185.42895082114993; --rot: 47.21330890185021"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -0.08680752993588484; --y: 252.9999851076137; --rot: 90.01965891380583"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -172.20949049743228; --y: 185.8000784725145; --rot: 132.82600892534455"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -252.92999883436428; --y: 19.318215948328675; --rot: 175.63235893730015"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -198.95150251036435; --y: -157.9059835752543; --rot: -141.56129105116113"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -38.71172552227772; --y: -251.36994003168374; --rot: -98.75494103920553"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 142.59717144149758; --y: -211.000373952264; --rot: -55.9485910276668"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 248.3211943012766; --y: -57.97917264662916; --rot: -13.142241015711193"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 221.86978260423214; --y: 126.36815531716002; --rot: 29.664108995827533"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 77.00615677521183; --y: 243.79396272909617; --rot: 72.47045900778313"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -109.3099245744561; --y: 231.48939584682213; --rot: 115.27680901932187"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -237.80724702881463; --y: 95.67910450225851; --rot: 158.0831590308606"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -239.79590968936142; --y: -91.51884764369254; --rot: -159.11049095718383"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -113.88594725895314; --y: -230.38878231574327; --rot: -116.30414094564509"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 73.09612835192654; --y: -246.73346036645114; --rot: -73.49779093368949"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 221.5749176367896; --y: -131.51679354881273; --rot: -30.691440922150743"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 252.25399382660643; --y: 54.147230755841946; --rot: 12.114909089804858"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 148.46459165669813; --y: 211.41044471671918; --rot: 54.92125910134358"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -34.781275734483415; --y: 256.3175907009238; --rot: 97.7276091132992"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -199.94837567049382; --y: 164.625778864463; --rot: 140.5339591248379"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -258.8927445932541; --y: -15.11041279217312; --rot: -176.6596908632065"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -179.90091322993428; --y: -187.24967075221642; --rot: -133.85334085166775"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.750829313099882; --y: -259.95659180108856; --rot: -91.04699083971217"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 173.38291751045088; --y: -194.19528408282375; --rot: -48.240640828173426"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 259.4950908566964; --y: -24.686209356359807; --rot: -5.4342908162178185"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 207.41949749732663; --y: 158.42396301682555; --rot: 37.37205919532091"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 44.57845396553024; --y: 257.50315056937495; --rot: 80.17840920727652"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -142.45550112289604; --y: 219.49003313196027; --rot: 122.98475921881524"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -253.98470555028737; --y: 64.30994749285537; --rot: 165.79110923077084"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -230.32976898019868; --y: -125.56661697802518; --rot: -151.40254075769042"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -83.76342737968106; --y: -248.95273850951446; --rot: -108.59619074573483"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 107.85229130682536; --y: -239.86847074984172; --rot: -65.78984073419609"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 242.4292489288414; --y: -102.82268090378837; --rot: -22.983490722240496"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 248.04324278389174; --y: 89.41286719685522; --rot: 19.82285928929823"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 121.37323917013995; --y: 234.44516803156344; --rot: 62.629209301253844"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -70.35348238419375; --y: 254.79893764992042; --rot: 105.43555931279256"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -225.04022029036386; --y: 139.30306420215229; --rot: 148.24190932474818"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -260.0885217573075; --y: -50.78347024474208; --rot: -168.9517406637131"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -156.50322501158277; --y: -214.26273203418197; --rot: -126.14539065175751"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 30.815732901227896; --y: -263.8733946110103; --rot: -83.33904064021878"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 202.1693880330305; --y: -172.86855857081108; --rot: -40.53269062826317"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 266.1236595752813; --y: 10.566090038620404; --rot: 2.273659383275556"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 188.29831168154203; --y: 188.82493725403955; --rot: 45.08000939523116"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 9.847392817186662; --y: 266.8183442994578; --rot: 87.88635940676988"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -174.30184929069353; --y: 202.6967598284577; --rot: 130.6927094187255"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -265.945569249026; --y: 30.30509266205884; --rot: 173.49905943026423"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -215.97379922464853; --y: -158.67992326841855; --rot: -143.69459055778017"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -50.68653000438765; --y: -263.5026630869071; --rot: -100.88824054624146"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 142.04585132153352; --y: -228.04550839715873; --rot: -58.081890534285854"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 259.4962239605882; --y: -70.87107837613475; --rot: -15.275540522747121"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 238.83467582495592; --y: 124.49273901731232; --rot: 27.530809489208487"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 90.73867818589765; --y: 253.94212606849464; --rot: 70.33715950074722"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -106.11958537078362; --y: 248.27129032720026; --rot: 113.14350951270282"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -246.86547120202135; --y: 110.1705506898966; --rot: 155.94985952424153"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -256.2929911058328; --y: -87.03072534725864; --rot: -161.24379046380287"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -129.04990783592976; --y: -238.30048528598937; --rot: -118.43744045226416"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 67.3352379868475; --y: -262.8454745720998; --rot: -75.63109044030853"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 228.2903602680401; --y: -147.26265373972535; --rot: -32.82474042876979"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 267.88285533040573; --y: 47.14632350490248; --rot: 9.98160958318581"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 164.69807358282483; --y: 216.88704203467492; --rot: 52.78795959472453"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -26.580652923022743; --y: 271.36797895348104; --rot: 95.59430960668016"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -204.150965356326; --y: 181.2495057760991; --rot: 138.40065961821887"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -273.27268445878127; --y: -5.7576939656816855; --rot: -178.79299036982553"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -196.81499331301922; --y: -190.15073718405787; --rot: -135.98664035828682"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -15.200982883478467; --y: -273.578014685713; --rot: -93.1802903463312"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 174.9627699343186; --y: -211.2979103415092; --rot: -50.37394033479248"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 272.2743730750534; --y: -36.17241413514496; --rot: -7.567590322836864"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 224.60756011209116; --y: 158.67086670366857; --rot: 35.23875968870187"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 57.03296471399923; --y: 269.36162566404323; --rot: 78.04510970065748"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -141.36576065076358; --y: 236.65974061242895; --rot: 120.8514597121962"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -264.84914743126234; --y: 77.65905681202587; --rot: 163.6578097241518"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -247.37727437348764; --y: -123.14461106623915; --rot: -153.53584026430948"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -97.92790187887937; --y: -258.75581245267716; --rot: -110.72949025235387"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 104.11045892078519; --y: -256.69049912940585; --rot: -67.92314024081514"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 251.1099276622512; --y: -117.71823141398582; --rot: -25.116790228859543"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 264.53771623074766; --y: 84.37164493595111; --rot: 17.689559782679183"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 136.91102221375434; --y: 241.94911034427236; --rot: 60.49590979421791"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -64.0411934594819; --y: 270.86559394786497; --rot: 103.30225980617351"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -231.32010982692083; --y: 155.3902117276774; --rot: 146.10860981771225"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -275.62952305631484; --y: -43.2361656457693; --rot: -171.08504017033215"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -173.04339925323708; --y: -219.27857416080553; --rot: -128.2786901587934"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 22.07698564091538; --y: -278.7939223682168; --rot: -85.47234014683784"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 205.88876293008767; --y: -189.76252870131697; --rot: -42.6659901352991"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 280.33249216053673; --y: 0.6867436496739882; --rot: 0.14035987665650942"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 205.44454881691095; --y: 191.22320763755033; --rot: 42.94670988819524"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 20.80952008300163; --y: 280.22841375191626; --rot: 85.75305990015084"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -175.36232144248604; --y: 219.9920468170307; --rot: 128.55940991168958"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -278.4744937920767; --y: 42.28554621094233; --rot: 171.36575992364516"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -233.3138515601101; --y: -158.3939603336785; --rot: -145.8278900648161"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -63.614597873506916; --y: -275.07325215022837; --rot: -103.02154005286052"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 140.41293811913945; --y: -245.32560252284142; --rot: -60.215190041321776"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 270.0369526193969; --y: -84.67020857438342; --rot: -17.408840029366168"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 255.9502810467804; --y: 121.52049789995061; --rot: 25.397509982172558"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 105.32693193939573; --y: 263.3875759902348; --rot: 68.20385999412817"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -101.82374296664001; --y: 265.1187005253753; --rot: 111.0102100056669"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -255.1567353887097; --y: 125.4610889089538; --rot: 153.8165600176225"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -272.7699524311771; --y: -81.43503031131316; --rot: -163.37708997083877"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -144.9515079158175; --y: -245.38553411505475; --rot: -120.57073995888317"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 60.47133018567064; --y: -278.8518053315895; --rot: -77.76438994734444"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 234.12436656447787; --y: -163.68025362036332; --rot: -34.95803993538885"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 283.32105430822304; --y: 39.05355535257875; --rot: 7.848310076149883"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 181.5333398235405; --y: 221.43266315132627; --rot: 50.65466008810549"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -17.305863875636945; --y: 286.1438184782186; --rot: 93.46101009964423"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -207.37858049562752; --y: 198.40142225200537; --rot: 136.26736011159983"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -287.29578461418356; --y: 4.645060534059117; --rot: 179.07371012313854"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -214.18046701020603; --y: -192.03863846216254; --rot: -138.11993986490583"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -26.67074644317008; --y: -286.76239517092216; --rot: -95.31358985336712"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 175.49730596546388; --y: -228.7723906199685; --rot: -52.50723984141152"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 284.53897935014413; --y: -48.64168659516963; --rot: -9.700889829872793"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 242.0856677187702; --y: 157.84653776740618; --rot: 33.10546018208282"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 70.42809938260717; --y: 280.6308261669259; --rot: 75.91181019362153"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -139.1852647954571; --y: 254.0359026625888; --rot: 118.71816020557716"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -275.0531988219293; --y: 91.90069541534629; --rot: 161.52451021711587"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -264.54636147704804; --y: -119.61884079734043; --rot: -155.66913977092852"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -112.93144465724124; --y: -267.83129002926376; --rot: -112.86278975938981"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 99.25844842003949; --y: -273.54846082046663; --rot: -70.0564397474342"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 259.00011829937057; --y: -133.39433958014538; --rot: -27.250089735895468"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 280.98221086313356; --y: 78.22046805606585; --rot: 15.55626027606014"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 153.1661497875734; --y: 248.60436552733867; --rot: 58.36261028759887"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -56.62581303612512; --y: 286.79660924734725; --rot: 101.16896029955447"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -236.69815658754865; --y: 172.1271635908583; --rot: 143.97531031109318"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -290.9499835709877; --y: -34.59923496324736; --rot: -173.21833967695122"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -190.16191207819276; --y: -223.3447819833947; --rot: -130.41198966541248"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 12.268603177735807; --y: -293.41028013206756; --rot: -87.60563965345688"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 208.61636494396; --y: -207.1598713012935; --rot: -44.79928964191814"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 294.1552969811433; --y: -10.23583748632665; --rot: -1.992939629962537"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 223.01613831518875; --y: 192.5934746958605; --rot: 40.81341038157618"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 32.782226344909105; --y: 293.1728596508741; --rot: 83.61976039353179"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -175.36468796599132; --y: 237.63207694326172; --rot: 126.42611040507052"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -290.4609382655363; --y: 55.23785947773607; --rot: 169.23246041702612"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -250.9159293014755; --y: -157.026101087612; --rot: -147.96118957143514"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -77.46997078487333; --y: -286.02770507598615; --rot: -105.15483955947956"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 137.680795386164; --y: -262.7833893018057; --rot: -62.34848954794083"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 279.8915318154197; --y: -99.34651688920907; --rot: -19.542139535985214"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 273.15813456431255; --y: 117.43825881055973; --rot: 23.264210475553515"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 120.73696124490048; --y: 272.08092662623716; --rot: 66.07056048750913"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -96.41376704862458; --y: 281.97231339883984; --rot: 108.87691049904787"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -262.63441066630594; --y: 141.51305279634073; --rot: 151.68326051100345"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -289.1669837697513; --y: -74.72772762022255; --rot: -165.51038947745784"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -161.5495945461521; --y: -251.60033486061553; --rot: -122.70403946591912"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 52.50499067675231; --y: -294.6925014289956; --rot: -79.8976894539635"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 239.03663763004715; --y: -180.72519741760593; --rot: -37.09133944242477"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 298.50885469257946; --y: 29.874130449679658; --rot: 5.715010569530838"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 198.92301490321523; --y: 225.01054475940973; --rot: 48.52136058106956"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -6.966701482211456; --y: 300.5859436415852; --rot: 91.32771059302517"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -209.59821295467142; --y: 216.03145402049262; --rot: 134.1340606045639"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -300.9038018494352; --y: 16.083526054122117; --rot: 176.9404106165195"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -231.94485828312705; --y: -192.88431894220406; --rot: -140.2532393719418"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -39.141347513424606; --y: -299.4527590703304; --rot: -97.44688935998617"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 174.96159631688522; --y: -246.56415850380955; --rot: -54.64053934844745"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 296.23354366774333; --y: -62.07091683842223; --rot: -11.83418933649184"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 259.7974874313778; --y: 155.93032265836902; --rot: 30.97216067504689"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 84.73654688065925; --y: 291.2573239145291; --rot: 73.7785106870025"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -135.89775974205443; --y: 271.56075442069186; --rot: 116.5848606985412"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -284.54568765555564; --y: 107.00351226304197; --rot: 159.3912107104968"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -281.7781765547557; --y: -114.97754996195869; --rot: -157.80243927796445"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -128.73885003461606; --y: -276.1305601876446; --rot: -114.99608926600888"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 93.28907235606486; --y: -290.38276288193293; --rot: -72.18973925447013"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 266.05406057790606; --y: -149.81215336030763; --rot: -29.383389242514518"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 297.31674869530667; --y: 70.95676187906948; --rot: 13.422960769024213"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 170.09635350946263; --y: 254.36829700806646; --rot: 56.22931078097982"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -48.10939580120507; --y: 302.53197706482877; --rot: 99.03566079251856"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -241.13510209695798; --y: 189.46848545637903; --rot: 141.84201080447414"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -305.99022513427263; --y: -24.87935132348002; --rot: -175.35163918398712"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -207.81043248345998; --y: -226.42570951377206; --rot: -132.54528917203152"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 1.401838687911842; --y: -307.663473012431; --rot: -89.73893916049279"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 210.32037354882107; --y: -225.0096452827842; --rot: -46.93258914853718"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 307.5341134196647; --y: -22.185885775087144; --rot: -4.126239136998464"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 240.95983118427372; --y: 192.90793365426268; --rot: 38.68011087495714"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 45.74532208215904; --y: 305.5951005948877; --rot: 81.48646088649588"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -174.28532630243345; --y: 255.56160929757309; --rot: 124.29281089845148"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -301.8500373223756; --y: 69.13753982407019; --rot: 167.09916090999022"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -268.7231275393894; --y: -154.5570468320648; --rot: -150.0944890780542"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -92.22399740941289; --y: -296.3131993003457; --rot: -107.28813906651547"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 133.83456426075298; --y: -280.36063772739595; --rot: -64.48178905455987"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 289.00949644193923; --y: -114.86736249421206; --rot: -21.67543904302114"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 290.39902515472437; --y: 112.2356923337233; --rot: 21.130910968934472"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 136.93232873945533; --y: 279.9743710718909; --rot: 63.937260980473205"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -89.88392035236984; --y: 298.7722893142683; --rot: 106.74361099242881"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -269.2536333565752; --y: 158.2864240400738; --rot: 149.54996100396752"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -305.42397271807675; --y: -66.90770757956038; --rot: -167.64368898407687"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -178.80080539927843; --y: -256.9032346790701; --rot: -124.83733897253816"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 43.43974525068416; --y: -310.30753505245957; --rot: -82.03098896058255"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 242.98898004213217; --y: -198.3510356813447; --rot: -39.22463894904382"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 313.3866702223885; --y: 19.61619042841733; --rot: 3.5817110629117908"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 216.8178375636963; --y: 227.5861809483323; --rot: 46.38806107445051"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 4.424123876148177; --y: 314.63556416756137; --rot: 89.19441108640612"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -210.77925056583584; --y: 234.0878201250646; --rot: 132.00076109794483"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -314.03909167521505; --y: 28.54049773421914; --rot: 174.80711110990043"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -250.05417365001705; --y: -192.66124333827904; --rot: -142.38653887856083"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -52.591187767494404; --y: -311.59295076943596; --rot: -99.58018886660523"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 173.33334153576362; --y: -264.6173284005114; --rot: -56.773838855066494"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 307.30373362126994; --y: -76.43424023436985; --rot: -13.967488843110884"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 277.6855733014415; --y: 152.90429156910469; --rot: 28.838861168427837"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 99.92832883779334; --y: 301.1889332962456; --rot: 71.64521118038344"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -131.489793199139; --y: 289.1756307083271; --rot: 114.45156119192218"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -293.27688603380847; --y: 122.93359231028973; --rot: 157.25791120387777"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -299.01318367015267; --y: -109.21184506522465; --rot: -159.9357387845835"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -145.31246681273785; --y: -283.6066491343978; --rot: -117.12938877262789"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 86.19805023022916; --y: -307.133352367513; --rot: -74.32303876108917"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 272.2278149122284; --y: -166.9305081939526; --rot: -31.516688749133564"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 313.4811166941818; --y: 62.58088569161166; --rot: 11.289661262405161"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 187.65719919994538; --y: 259.20026155162736; --rot: 54.096011273943894"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -38.496940038074044; --y: 318.01168225734943; --rot: 96.9023612858995"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -244.59384209189693; --y: 207.36673677770816; --rot: 139.7087112974382"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -320.69078739632806; --y: -14.086123637221853; --rot: -177.48493869060619"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -225.93879475692773; --y: -228.4880131098741; --rot: -134.67858867906745"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -10.509144079572676; --y: -321.4949491596396; --rot: -91.87223866711184"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 210.97140507900974; --y: -243.25925725239807; --rot: -49.06588865557312"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 320.4116465341179; --y: -35.144765514557925; --rot: -6.259538643617511"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 259.2209183527698; --y: 192.1413366928742; --rot: 36.546811367921215"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 59.675809135753546; --y: 317.4394395849279; --rot: 79.35316137987682"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -172.1032758090764; --y: 273.724143802167; --rot: 122.15951139141556"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -312.5880235400964; --y: 83.95736209771756; --rot: 164.96586140337115"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -286.67749060311667; --y: -150.9702499882011; --rot: -152.22778858509014"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -107.84538623510205; --y: -305.87821723508324; --rot: -109.42143857313452"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 128.86220991449352; --y: -297.99828070040513; --rot: -66.61508856159578"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 297.3418857198441; --y: -131.19757237299476; --rot: -23.80873854964019"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 307.61312516236427; --y: 105.90534927765168; --rot: 18.99761146189854"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 153.87418788773138; --y: 287.02179722047055; --rot: 61.80396147385415"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -82.2313849676296; --y: 315.4583955552705; --rot: 104.61031148539287"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -274.9714150375391; --y: 175.73891247159196; --rot: 147.41666149734846"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -321.48063950645155; --y: -57.97680168510565; --rot: -169.7769884911128"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -196.65965710456257; --y: -261.25462535142964; --rot: -126.9706384791572"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 33.282065297659116; --y: -325.6369377706304; --rot: -84.16428846761848"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 245.94540228878404; --y: -216.50936131597786; --rot: -41.35793845566287"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 327.8952004501763; --y: 8.290809474276086; --rot: 1.4484115558758628"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 235.16676392799593; --y: 229.12741198165708; --rot: 44.25476156783147"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 16.850999692724013; --y: 328.2344003713407; --rot: 87.06111157937019"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -210.89355771950525; --y: 252.51714261097146; --rot: 129.8674615913258"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -326.6447419832192; --y: 41.99591622003931; --rot: 172.67381160286453"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -268.4530177471659; --y: -191.345468651732; --rot: -144.51983838517987"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -66.9958789407554; --y: -323.1277645219545; --rot: -101.71348837364116"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 170.59293484289842; --y: -282.8748162929986; --rot: -58.90713836168553"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 317.69637856742526; --y: -91.70308331559899; --rot: -16.10078835014681"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 295.69149155014344; --y: 148.7532918118165; --rot: 26.705561661808797"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 115.97085521480436; --y: 310.3748355110714; --rot: 69.51191167334753"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -125.95075799754794; --y: 306.8210950010134; --rot: 112.31826168530313"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -301.198629849299; --y: 139.65452150540992; --rot: 155.12461169684187"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -316.1912966331878; --y: -102.31572888792755; --rot: -162.06903829120253"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -162.6122722774204; --y: -290.2143346147554; --rot: -119.26268827966383"/>
+  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 77.98403181778836; --y: -323.7398504686165; --rot: -76.45633826770822"/>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/more-cursed-accent-color-vibes/dist/style.css b/more-cursed-accent-color-vibes/dist/style.css
new file mode 100644
index 0000000..7528c59
--- /dev/null
+++ b/more-cursed-accent-color-vibes/dist/style.css
@@ -0,0 +1,24 @@
+body {
+	display: grid;
+	place-items: center;
+	background-color: #030303;
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+}
+.app {
+	position: relative;
+}
+input {
+	--absX: max(calc(var(--x) * -1), var(--x));
+	accent-color: hsl(calc(var(--absX) * 2), 100%, 50%);
+	mix-blend-mode: screen;
+	width: 5rem;
+	height: 1rem;
+	margin-left: -2.5rem;
+	top: 50%;
+	left: 50%;
+	position: absolute;
+	transform: translateX(calc(var(--x) * 3px)) translateY(calc(var(--y) * 3px))
+		rotate(calc(var(--rot) * 1deg));
+}
\ No newline at end of file
diff --git a/more-cursed-accent-color-vibes/license.txt b/more-cursed-accent-color-vibes/license.txt
new file mode 100644
index 0000000..e9ca837
--- /dev/null
+++ b/more-cursed-accent-color-vibes/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Henry Desroches (https://codepen.io/xdesro/pen/dyRNqqY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/more-cursed-accent-color-vibes/src/index.pug b/more-cursed-accent-color-vibes/src/index.pug
new file mode 100644
index 0000000..20d3d53
--- /dev/null
+++ b/more-cursed-accent-color-vibes/src/index.pug
@@ -0,0 +1,14 @@
+- let radToDeg = (radians) => radians * (180 / Math.PI);
+.app
+	each zero, val in new Array(1000).fill()
+		- let x = (val / 3) * Math.cos(radToDeg(val));
+		- let y = (val / 3) * Math.sin(radToDeg(val));
+		- let rot = radToDeg(Math.atan2(y, x) - Math.atan2(0, 0));
+		input(
+			checked="true",
+			type="range",
+			value="100",
+			min="0",
+			max="100",
+			style=`--x: ${x}; --y: ${y}; --rot: ${rot}`
+		)
diff --git a/more-cursed-accent-color-vibes/src/style.css b/more-cursed-accent-color-vibes/src/style.css
new file mode 100644
index 0000000..c30627e
--- /dev/null
+++ b/more-cursed-accent-color-vibes/src/style.css
@@ -0,0 +1,24 @@
+body {
+	display: grid;
+	place-items: center;
+	background-color: #030303;
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+}
+.app {
+	position: relative;
+}
+input {
+	--absX: max(calc(var(--x) * -1), var(--x));
+	accent-color: hsl(calc(var(--absX) * 2), 100%, 50%);
+	mix-blend-mode: screen;
+	width: 5rem;
+	height: 1rem;
+	margin-left: -2.5rem;
+	top: 50%;
+	left: 50%;
+	position: absolute;
+	transform: translateX(calc(var(--x) * 3px)) translateY(calc(var(--y) * 3px))
+		rotate(calc(var(--rot) * 1deg));
+}
diff --git a/morning/README.markdown b/morning/README.markdown
new file mode 100644
index 0000000..f3bbd24
--- /dev/null
+++ b/morning/README.markdown
@@ -0,0 +1,5 @@
+# Morning
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pavlovsk/pen/KKmKNxe](https://codepen.io/pavlovsk/pen/KKmKNxe).
+
+Waking up to a morning like this
diff --git a/morning/dist/index.html b/morning/dist/index.html
new file mode 100644
index 0000000..5f6886b
--- /dev/null
+++ b/morning/dist/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Morning</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="scene">
+  <div class="canvas-container">
+    <canvas width="150" height="75" id="canvas" class="canvas canvas1"></canvas>
+    <canvas width="150" height="75" id="canvas2" class="canvas canvas2"></canvas>
+  </div>
+  <div class="foreground"></div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/morning/dist/script.js b/morning/dist/script.js
new file mode 100644
index 0000000..c5ecb5e
--- /dev/null
+++ b/morning/dist/script.js
@@ -0,0 +1,134 @@
+// https://codepen.io/pavlovsk/pen/VRbGVP
+const { abs, floor, ceil, round, sin, PI: π } = Math;
+const random = (x = 1) => Math.random() * x;
+const rgb = (...values) => `rgb(${values.join(',')})`;
+const rgba = (...values) => `rgba(${values.join(',')})`;
+
+function nArray(n) {
+  return [...Array(n).keys()];
+}
+
+function generateGrid(size, cellCallback) {
+  return nArray(size).map((row, y) =>
+  nArray(size).map((cell, x) => cellCallback(x, y)));
+
+}
+
+function generateField({ density, offset = 0, width, height }) {
+  const pixels = nArray(width * height);
+  return pixels.
+  map((px, i) => {
+    const star = {
+      x: offset + px % width,
+      y: floor(px / width) };
+
+    // Put some colorful points if debug is enabled
+    if (Settings.debug) {
+      const isMiddle = i === width * height / 2;
+      const isLast = i === width * height - 1;
+      if (isLast) {
+        return Object.assign(star, { color: 'red' });
+      }
+      if (isMiddle) {
+        return Object.assign(star, { color: 'blue' });
+      }
+    }
+    if (random() > 1 - density) {
+      return star;
+    }
+    return null;
+  }).
+  filter(Boolean);
+}
+
+function drawSky(ctx, width, state) {
+  ctx.fillStyle = Settings.sky.bg;
+  ctx.fillRect(0, 0, width, width);
+  state.sky.shift += Settings.sky.shiftSpeed;
+}
+
+function generateStars(ctx, width, state) {
+  const { stars, fields, shift } = state.sky;
+  if (!stars.length || width * fields - shift <= width) {
+    const newStars = generateField({
+      density: Settings.sky.starDensity,
+      offset: width * fields,
+      width: width,
+      height: width }).
+    map(star => ({
+      ...star,
+      color: star.color || Settings.sky.starColor }));
+
+    stars.splice(0, 1);
+    stars.push(...newStars);
+    state.sky.fields++;
+  }
+}
+
+function drawStars(ctx, width, state) {
+  const stars = state.sky.stars;
+  stars.forEach(({ x, y, color }) => {
+    ctx.fillStyle = color;
+    const shiftedX = x - state.sky.shift;
+    ctx.fillRect(shiftedX, y, 1, 1);
+  });
+}
+
+function draw(ctx, width, state) {
+  generateStars(ctx, width, state);
+  drawSky(ctx, width, state);
+  drawStars(ctx, width, state);
+  requestAnimationFrame(() => {
+    draw(ctx, width, state);
+  });
+}
+
+function init(state, canvas) {
+  const ctx = canvas.getContext('2d');
+  draw(ctx, canvas.width, state);
+}
+
+const Settings = {
+  debug: false,
+  sky: {
+    bg: '#f5f5f5',
+    get shiftSpeed() {
+      if (Settings.debug) return 0.8;
+      return 0.05;
+    },
+    starDensity: 0.1,
+    get starColor() {
+      if (random() >= .5) {
+        return 'black';
+      }
+      if (random() >= .66) {
+        return 'hotpink';
+      }
+      if (random() >= .66) {
+        return 'crimson';
+      }
+      if (random() >= .66) {
+        return 'mediumspringgreen';
+      }
+      if (random() >= .25) {
+        return '#fd5';
+      }
+      return 'palevioletred';
+    } } };
+
+
+
+const State = {
+  sky: {
+    shift: 0,
+    fields: 0,
+    stars: [] } };
+
+
+
+const image = new Image();
+image.src = 'https://assets.codepen.io/25387/torni-clear-sm.png';
+image.onload = () => {
+  init(State, canvas);
+  init(State, canvas2);
+};
\ No newline at end of file
diff --git a/morning/dist/style.css b/morning/dist/style.css
new file mode 100644
index 0000000..aea1752
--- /dev/null
+++ b/morning/dist/style.css
@@ -0,0 +1,54 @@
+body {
+  height: 100vh;
+  display: grid;
+  place-items: center;
+  background: black;
+}
+
+.scene {
+  position: relative;
+  width: clamp(0px, 800px, 80vw);
+  height: clamp(0px, 610px, 61vw);
+}
+
+.canvas-container {
+  position: absolute;
+  width: 100%;
+  height: 99%;
+  overflow: hidden;
+  perspective: 400px;
+}
+
+.canvas {
+  position: absolute;
+  vertical-align: middle;
+  -ms-interpolation-mode: nearest-neighbor;
+      image-rendering: -moz-crisp-edges;
+      image-rendering: pixelated;
+  transform-style: preserve-3d;
+}
+
+.canvas1 {
+  top: 47%;
+  width: 60%;
+  height: 30%;
+  transform-origin: center right;
+  transform: rotateY(50deg) rotateZ(10deg);
+}
+
+.canvas2 {
+  top: 42%;
+  right: 0;
+  width: 45%;
+  height: 35%;
+  transform-origin: bottom left;
+  transform: translateX(7%) rotateY(-50deg) rotateZ(-7deg);
+}
+
+.foreground {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: url(https://assets.codepen.io/25387/torni-clear-sm.png) no-repeat center center;
+  background-size: contain;
+}
\ No newline at end of file
diff --git a/morning/license.txt b/morning/license.txt
new file mode 100644
index 0000000..e30e773
--- /dev/null
+++ b/morning/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Mustafa Enes (https://codepen.io/pavlovsk/pen/KKmKNxe)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/morning/src/index.html b/morning/src/index.html
new file mode 100644
index 0000000..1080824
--- /dev/null
+++ b/morning/src/index.html
@@ -0,0 +1,7 @@
+<div class="scene">
+  <div class="canvas-container">
+    <canvas width="150" height="75" id="canvas" class="canvas canvas1"></canvas>
+    <canvas width="150" height="75" id="canvas2" class="canvas canvas2"></canvas>
+  </div>
+  <div class="foreground"></div>
+</div>
\ No newline at end of file
diff --git a/morning/src/script.babel b/morning/src/script.babel
new file mode 100644
index 0000000..9be51bd
--- /dev/null
+++ b/morning/src/script.babel
@@ -0,0 +1,134 @@
+// https://codepen.io/pavlovsk/pen/VRbGVP
+const { abs, floor, ceil, round, sin, PI: π } = Math
+const random = (x = 1) => Math.random() * x
+const rgb = (...values) => `rgb(${values.join(',')})`
+const rgba = (...values) => `rgba(${values.join(',')})`
+
+function nArray(n) {
+  return [...Array(n).keys()]
+}
+
+function generateGrid(size, cellCallback) {
+  return nArray(size).map((row, y) => (
+    nArray(size).map((cell, x) => cellCallback(x, y))
+  ))
+}
+
+function generateField({ density, offset = 0, width, height }) {
+  const pixels = nArray(width * height)
+  return pixels
+    .map((px, i) => {
+      const star = {
+        x: offset + px % width,
+        y: floor(px / width)
+      }
+      // Put some colorful points if debug is enabled
+      if (Settings.debug) {
+        const isMiddle = i === (width * height) / 2
+        const isLast = i === width * height - 1
+        if (isLast) {
+          return Object.assign(star, { color: 'red' })
+        }
+        if (isMiddle) {
+          return Object.assign(star, { color: 'blue' })
+        }
+      }
+      if (random() > 1 - density) {
+        return star
+      }
+      return null
+    })
+    .filter(Boolean)
+}
+
+function drawSky(ctx, width, state) {
+  ctx.fillStyle = Settings.sky.bg
+  ctx.fillRect(0, 0, width, width)
+  state.sky.shift += Settings.sky.shiftSpeed
+}
+
+function generateStars(ctx, width, state) {
+  const { stars, fields, shift } = state.sky
+  if (!stars.length || width * fields - shift <= width) {
+    const newStars = generateField({
+      density: Settings.sky.starDensity,
+      offset: width * fields,
+      width: width,
+      height: width
+    }).map(star => ({
+      ...star,
+      color: star.color || Settings.sky.starColor
+    }))
+    stars.splice(0, 1)
+    stars.push(...newStars)
+    state.sky.fields++
+  }
+}
+
+function drawStars(ctx, width, state) {
+  const stars = state.sky.stars
+  stars.forEach(({ x, y, color }) => {
+    ctx.fillStyle = color
+    const shiftedX = x - state.sky.shift
+    ctx.fillRect(shiftedX, y, 1, 1)
+  })
+}
+
+function draw(ctx, width, state) {
+  generateStars(ctx, width, state)
+  drawSky(ctx, width, state)
+  drawStars(ctx, width, state)
+  requestAnimationFrame(() => {
+    draw(ctx, width, state)
+  })
+}
+
+function init(state, canvas) {
+  const ctx = canvas.getContext('2d')
+  draw(ctx, canvas.width, state)
+}
+
+const Settings = {
+  debug: false,
+  sky: {
+    bg: '#f5f5f5',
+    get shiftSpeed() {
+      if (Settings.debug) return 0.8
+      return 0.05
+    },
+    starDensity: 0.1,
+    get starColor() {
+      if (random() >= .5) {
+        return 'black'
+      }
+      if (random() >= .66) {
+        return 'hotpink'
+      }
+      if (random() >= .66) {
+        return 'crimson'
+      }
+      if (random() >= .66) {
+        return 'mediumspringgreen'
+      }
+      if (random() >= .25) {
+        return '#fd5'
+      }
+      return 'palevioletred'
+    }
+  }
+}
+
+const State = {
+  sky: {
+    shift: 0,
+    fields: 0,
+    stars: []
+  }
+}
+
+const image = new Image()
+image.src = 'https://assets.codepen.io/25387/torni-clear-sm.png'
+image.onload = () => {
+  init(State, canvas)
+  init(State, canvas2)
+}
diff --git a/morning/src/style.scss b/morning/src/style.scss
new file mode 100644
index 0000000..2118600
--- /dev/null
+++ b/morning/src/style.scss
@@ -0,0 +1,57 @@
+body {
+  height: 100vh;
+  display: grid;
+  place-items: center;
+  background: black;
+}
+
+.scene {
+  position: relative;
+  width: clamp(0px, 800px, 80vw);
+  height: clamp(0px, 610px, 61vw);
+}
+
+.canvas-container {
+  position: absolute;
+  width: 100%;
+  height: 99%;
+  overflow: hidden;
+  perspective: 400px;
+}
+
+.canvas {
+  position: absolute;
+  vertical-align: middle;
+  image-rendering: pixelated;
+  transform-style: preserve-3d;
+}
+
+.canvas1 {
+  top: 47%;
+  width: 60%;
+  height: 30%;
+  transform-origin: center right;
+  transform:
+    rotateY(50deg)
+    rotateZ(10deg);
+}
+
+.canvas2 {
+  top: 42%;
+  right: 0;
+  width: 45%;
+  height: 35%;
+  transform-origin: bottom left;
+  transform:
+    translateX(7%)
+    rotateY(-50deg)
+    rotateZ(-7deg)
+}
+
+.foreground {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: url(https://assets.codepen.io/25387/torni-clear-sm.png) no-repeat center center;
+  background-size: contain;
+}
\ No newline at end of file
diff --git a/morphing-circles-animationclick-to-show-mechanics/README.markdown b/morphing-circles-animationclick-to-show-mechanics/README.markdown
new file mode 100644
index 0000000..59bd97d
--- /dev/null
+++ b/morphing-circles-animationclick-to-show-mechanics/README.markdown
@@ -0,0 +1,6 @@
+# Morphing circles animation - Click to show mechanics 👍🤓
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jh3y/pen/GRgbLNw](https://codepen.io/jh3y/pen/GRgbLNw).
+
+ Seeing this circle animation pop up a bit the last few days and wanted to create a version where it reveals how it works at the same time.
+
+Enjoy!
\ No newline at end of file
diff --git a/morphing-circles-animationclick-to-show-mechanics/dist/index.html b/morphing-circles-animationclick-to-show-mechanics/dist/index.html
new file mode 100644
index 0000000..0dc8c3f
--- /dev/null
+++ b/morphing-circles-animationclick-to-show-mechanics/dist/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Morphing circles animation - Click to show mechanics 👍🤓</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input type="checkbox" id="show-tricks"/>
+<label for="show-tricks"></label>
+<div class="container">
+  <div class="circle"></div>
+</div>
+<h1>Click/Tap</h1>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/morphing-circles-animationclick-to-show-mechanics/dist/script.js b/morphing-circles-animationclick-to-show-mechanics/dist/script.js
new file mode 100644
index 0000000..7000ff4
--- /dev/null
+++ b/morphing-circles-animationclick-to-show-mechanics/dist/script.js
@@ -0,0 +1 @@
+// Click to reveal how this effect is being pulled off in this implementation
\ No newline at end of file
diff --git a/morphing-circles-animationclick-to-show-mechanics/dist/style.css b/morphing-circles-animationclick-to-show-mechanics/dist/style.css
new file mode 100644
index 0000000..84628e3
--- /dev/null
+++ b/morphing-circles-animationclick-to-show-mechanics/dist/style.css
@@ -0,0 +1,187 @@
+* {
+  box-sizing: border-box;
+}
+:root {
+  --primary: #b3ffb9;
+  --secondary: #4d4d4d;
+  --size: 200;
+  --speed: 1;
+}
+h1 {
+  font-size: 1.5rem;
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  opacity: 0.5;
+  font-weight: bold;
+}
+body {
+  -webkit-box-align: center;
+          align-items: center;
+  background: #666;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  min-height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+body:before {
+  border-radius: 6px;
+  box-shadow: 4px 4px 0 0 #111;
+  content: '';
+  height: calc(var(--size) * 1px);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: calc(var(--size) * 1px);
+}
+[type='checkbox'] {
+  position: fixed;
+  left: 100%;
+  opacity: 0;
+}
+label {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  z-index: 2;
+}
+:checked ~ .container {
+  --speed: 5;
+  --primary: rgba(179,255,185,0.5);
+  --secondary: rgba(77,77,77,0.5);
+  border: 4px dashed #fff;
+  overflow: visible;
+}
+:checked ~ .container:before {
+  background: #fff;
+}
+:checked ~ .container .circle {
+  border: 4px dashed #fff;
+}
+.container {
+  --primary-switch: var(--secondary);
+  --secondary-switch: var(--primary);
+  border-radius: 6px;
+  height: calc(var(--size) * 1px);
+  width: calc(var(--size) * 1px);
+  background: var(--primary);
+  position: relative;
+  overflow: hidden;
+  -webkit-animation: flip calc(var(--speed) * 4s) steps(1) infinite, bg calc(var(--speed) * 4s) steps(1) infinite;
+          animation: flip calc(var(--speed) * 4s) steps(1) infinite, bg calc(var(--speed) * 4s) steps(1) infinite;
+}
+.container:before {
+  border-radius: 50%;
+  content: '';
+  height: 10px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 10px;
+  z-index: 5;
+}
+.circle {
+  -webkit-animation: rotate calc(var(--speed) * 1s) ease-in-out infinite alternate;
+          animation: rotate calc(var(--speed) * 1s) ease-in-out infinite alternate;
+  height: 100%;
+  left: 0%;
+  position: absolute;
+  top: 40%;
+  -webkit-transform-origin: 50% 0%;
+          transform-origin: 50% 0%;
+  width: 100%;
+}
+.circle:after {
+  --primary-switch: var(--primary);
+  --secondary-switch: var(--secondary);
+  -webkit-clip-path: inset(0% 45% 90% 45% round 50% 50%);
+  -webkit-animation: clip calc(var(--speed) * 1s) ease-in-out infinite alternate, bg calc(var(--speed) * 4s) steps(1) infinite;
+          animation: clip calc(var(--speed) * 1s) ease-in-out infinite alternate, bg calc(var(--speed) * 4s) steps(1) infinite;
+  background: var(--secondary);
+  clip-path: inset(0% 45% 90% 45% round 50% 50%);
+  content: '';
+  height: 200%;
+  left: 50%;
+  position: absolute;
+  top: 0%;
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
+  -webkit-transform-origin: 50% 0;
+          transform-origin: 50% 0;
+  width: 200%;
+}
+@-webkit-keyframes flip {
+  25% {
+    -webkit-transform: rotateY(0deg) rotateX(180deg);
+            transform: rotateY(0deg) rotateX(180deg);
+  }
+  50% {
+    -webkit-transform: rotateY(180deg) rotateX(180deg);
+            transform: rotateY(180deg) rotateX(180deg);
+  }
+  75% {
+    -webkit-transform: rotateY(180deg) rotateX(0deg);
+            transform: rotateY(180deg) rotateX(0deg);
+  }
+}
+@keyframes flip {
+  25% {
+    -webkit-transform: rotateY(0deg) rotateX(180deg);
+            transform: rotateY(0deg) rotateX(180deg);
+  }
+  50% {
+    -webkit-transform: rotateY(180deg) rotateX(180deg);
+            transform: rotateY(180deg) rotateX(180deg);
+  }
+  75% {
+    -webkit-transform: rotateY(180deg) rotateX(0deg);
+            transform: rotateY(180deg) rotateX(0deg);
+  }
+}
+@-webkit-keyframes rotate {
+  to {
+    -webkit-transform: rotate(180deg) translate(0, -10%);
+            transform: rotate(180deg) translate(0, -10%);
+  }
+}
+@keyframes rotate {
+  to {
+    -webkit-transform: rotate(180deg) translate(0, -10%);
+            transform: rotate(180deg) translate(0, -10%);
+  }
+}
+@-webkit-keyframes clip {
+  to {
+    -webkit-clip-path: inset(0 0 0 0 round 0 0);
+    clip-path: inset(0 0 0 0 round 0 0);
+  }
+}
+@keyframes clip {
+  to {
+    -webkit-clip-path: inset(0 0 0 0 round 0 0);
+    clip-path: inset(0 0 0 0 round 0 0);
+  }
+}
+@-webkit-keyframes bg {
+  25% {
+    background: var(--primary-switch);
+  }
+  75% {
+    background: var(--secondary-switch);
+  }
+}
+@keyframes bg {
+  25% {
+    background: var(--primary-switch);
+  }
+  75% {
+    background: var(--secondary-switch);
+  }
+}
\ No newline at end of file
diff --git a/morphing-circles-animationclick-to-show-mechanics/license.txt b/morphing-circles-animationclick-to-show-mechanics/license.txt
new file mode 100644
index 0000000..85f8926
--- /dev/null
+++ b/morphing-circles-animationclick-to-show-mechanics/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Jhey (https://codepen.io/jh3y/pen/GRgbLNw)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/morphing-circles-animationclick-to-show-mechanics/src/index.pug b/morphing-circles-animationclick-to-show-mechanics/src/index.pug
new file mode 100644
index 0000000..6c1350b
--- /dev/null
+++ b/morphing-circles-animationclick-to-show-mechanics/src/index.pug
@@ -0,0 +1,5 @@
+input(type='checkbox', id='show-tricks')
+label(for='show-tricks')
+.container
+  .circle
+h1 Click/Tap
\ No newline at end of file
diff --git a/morphing-circles-animationclick-to-show-mechanics/src/script.babel b/morphing-circles-animationclick-to-show-mechanics/src/script.babel
new file mode 100644
index 0000000..7000ff4
--- /dev/null
+++ b/morphing-circles-animationclick-to-show-mechanics/src/script.babel
@@ -0,0 +1 @@
+// Click to reveal how this effect is being pulled off in this implementation
\ No newline at end of file
diff --git a/morphing-circles-animationclick-to-show-mechanics/src/style.styl b/morphing-circles-animationclick-to-show-mechanics/src/style.styl
new file mode 100644
index 0000000..470b0ed
--- /dev/null
+++ b/morphing-circles-animationclick-to-show-mechanics/src/style.styl
@@ -0,0 +1,132 @@
+*
+  box-sizing border-box
+
+:root
+  --primary hsla(125, 100%, 85%, 1)
+  --secondary hsla(125, 0%, 30%, 1)
+  --size 200
+  --speed 1
+
+h1
+  font-size 1.5rem
+  position fixed
+  bottom 1rem
+  right 1rem
+  opacity 0.5
+  font-weight bold
+
+body
+  align-items center
+  background hsl(125, 0%, 40%)
+  display flex
+  justify-content center
+  min-height 100vh
+  overflow hidden
+  margin 0
+
+  &:before
+    border-radius 6px
+    box-shadow 4px 4px 0 0 #111
+    content ''
+    height calc(var(--size) * 1px)
+    left 50%
+    position absolute
+    top 50%
+    transform translate(-50%, -50%)
+    width calc(var(--size) * 1px)
+
+[type='checkbox']
+  position fixed
+  left 100%
+  opacity 0
+
+label
+  position fixed
+  height 100vh
+  width 100vw
+  z-index 2
+
+:checked ~ .container
+  --speed 5
+  --primary hsla(125, 100%, 85%, 0.5)
+  --secondary hsla(125, 0%, 30%, 0.5)
+  border 4px dashed #fff
+  overflow visible
+
+  &:before
+    background hsl(0, 0%, 100%)
+
+  .circle
+    border 4px dashed #fff
+
+.container
+  --primary-switch var(--secondary)
+  --secondary-switch var(--primary)
+  border-radius 6px
+  height calc(var(--size) * 1px)
+  width calc(var(--size) * 1px)
+  background var(--primary)
+  position relative
+  overflow hidden
+  animation flip calc(var(--speed) * 4s) steps(1) infinite, bg calc(var(--speed) * 4s) steps(1) infinite
+
+  &:before
+    border-radius 50%
+    content ''
+    height 10px
+    left 50%
+    position absolute
+    top 50%
+    transform translate(-50%, -50%)
+    width 10px
+    z-index 5
+
+.circle
+  animation rotate calc(var(--speed) * 1s) ease-in-out infinite alternate
+  height 100%
+  left 0%
+  position absolute
+  top 40%
+  transform-origin 50% 0%
+  width 100%
+
+  &:after
+    --primary-switch var(--primary)
+    --secondary-switch var(--secondary)
+    $clip = inset(0% 45% 90% 45% round 50% 50%)
+    -webkit-clip-path $clip
+    animation clip calc(var(--speed) * 1s) ease-in-out infinite alternate, bg calc(var(--speed) * 4s) steps(1) infinite
+    background var(--secondary)
+    clip-path $clip
+    content ''
+    height 200%
+    left 50%
+    position absolute
+    top 0%
+    transform translate(-50%, 0)
+    transform-origin 50% 0
+    width 200%
+
+@keyframes flip
+  25%
+    transform rotateY(0deg) rotateX(180deg)
+  50%
+    transform rotateY(180deg) rotateX(180deg)
+  75%
+    transform rotateY(180deg) rotateX(0deg)
+
+@keyframes rotate
+  to
+    transform rotate(180deg) translate(0, -10%)
+
+@keyframes clip
+  to
+    $clip = inset(0 0 0 0 round 0 0)
+    -webkit-clip-path $clip
+    clip-path $clip
+
+@keyframes bg
+  25%
+    background var(--primary-switch)
+  75%
+    background var(--secondary-switch)
\ No newline at end of file
diff --git a/morphing-multi-state-button-with-view-transitions/LICENSE.txt b/morphing-multi-state-button-with-view-transitions/LICENSE.txt
new file mode 100644
index 0000000..9f241ee
--- /dev/null
+++ b/morphing-multi-state-button-with-view-transitions/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Adam Argyle (https://codepen.io/argyleink/pen/ZEmLrze)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/morphing-multi-state-button-with-view-transitions/README.md b/morphing-multi-state-button-with-view-transitions/README.md
new file mode 100644
index 0000000..9d1f548
--- /dev/null
+++ b/morphing-multi-state-button-with-view-transitions/README.md
@@ -0,0 +1,4 @@
+# Morphing multi-state button with View Transitions
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/argyleink/pen/ZEmLrze](https://codepen.io/argyleink/pen/ZEmLrze).
+
diff --git a/morphing-multi-state-button-with-view-transitions/dist/index.html b/morphing-multi-state-button-with-view-transitions/dist/index.html
new file mode 100644
index 0000000..956535d
--- /dev/null
+++ b/morphing-multi-state-button-with-view-transitions/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Morphing multi-state button with View Transitions</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<button id="demo">Do some hard work</button>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/morphing-multi-state-button-with-view-transitions/dist/script.js b/morphing-multi-state-button-with-view-transitions/dist/script.js
new file mode 100644
index 0000000..97c5b9f
--- /dev/null
+++ b/morphing-multi-state-button-with-view-transitions/dist/script.js
@@ -0,0 +1,19 @@
+const states = {
+  idle: 'Do some hard work',
+  sending: '<img aria-hidden="true" width="24" height="24" src="https://assets.codepen.io/2585/ring-resize.svg" alt="" /> working...',
+  done: 'Done!' };
+
+
+demo.onclick = () => {
+  setState('sending');
+  setTimeout(() => setState('done'), 4000);
+  setTimeout(() => setState('idle'), 6000);
+};
+
+function setState(state) {
+  if (!document.startViewTransition)
+  demo.innerHTML = states[state];else
+
+  document.startViewTransition(() =>
+  demo.innerHTML = states[state]);
+}
\ No newline at end of file
diff --git a/morphing-multi-state-button-with-view-transitions/dist/style.css b/morphing-multi-state-button-with-view-transitions/dist/style.css
new file mode 100644
index 0000000..a9f4d67
--- /dev/null
+++ b/morphing-multi-state-button-with-view-transitions/dist/style.css
@@ -0,0 +1,28 @@
+@import "https://unpkg.com/open-props" layer(design.system);
+@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);
+@import "https://unpkg.com/open-props/buttons.min.css" layer(demo.support);
+
+@layer demo {
+  @media (prefers-reduced-motion: no-preference) {
+    /* give the elements a name so they morph */
+    button {
+      view-transition-name: buy-btn;
+    }
+    
+    /* remove aspect-ratio and opt into squishing */
+    ::view-transition-old(buy-btn),
+    ::view-transition-new(buy-btn) {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+
+@layer demo.support {
+  body {
+    display: grid;
+    place-content: center;
+    padding: var(--size-5);
+    gap: var(--size-5);
+  }
+}
\ No newline at end of file
diff --git a/morphing-multi-state-button-with-view-transitions/src/index.html b/morphing-multi-state-button-with-view-transitions/src/index.html
new file mode 100644
index 0000000..3654565
--- /dev/null
+++ b/morphing-multi-state-button-with-view-transitions/src/index.html
@@ -0,0 +1 @@
+<button id="demo">Do some hard work</button> 
\ No newline at end of file
diff --git a/morphing-multi-state-button-with-view-transitions/src/script.js b/morphing-multi-state-button-with-view-transitions/src/script.js
new file mode 100644
index 0000000..04b96c0
--- /dev/null
+++ b/morphing-multi-state-button-with-view-transitions/src/script.js
@@ -0,0 +1,19 @@
+const states = {
+  idle: 'Do some hard work',
+  sending: '<img aria-hidden="true" width="24" height="24" src="https://assets.codepen.io/2585/ring-resize.svg" alt="" /> working...',
+  done: 'Done!',
+}
+
+demo.onclick = () => {
+  setState('sending')
+  setTimeout(() => setState('done'), 4000)
+  setTimeout(() => setState('idle'), 6000)
+}
+
+function setState(state) {
+  if (!document.startViewTransition)
+    demo.innerHTML = states[state]
+  else
+    document.startViewTransition(() => 
+      demo.innerHTML = states[state])
+}
\ No newline at end of file
diff --git a/morphing-multi-state-button-with-view-transitions/src/style.css b/morphing-multi-state-button-with-view-transitions/src/style.css
new file mode 100644
index 0000000..a9f4d67
--- /dev/null
+++ b/morphing-multi-state-button-with-view-transitions/src/style.css
@@ -0,0 +1,28 @@
+@import "https://unpkg.com/open-props" layer(design.system);
+@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);
+@import "https://unpkg.com/open-props/buttons.min.css" layer(demo.support);
+
+@layer demo {
+  @media (prefers-reduced-motion: no-preference) {
+    /* give the elements a name so they morph */
+    button {
+      view-transition-name: buy-btn;
+    }
+    
+    /* remove aspect-ratio and opt into squishing */
+    ::view-transition-old(buy-btn),
+    ::view-transition-new(buy-btn) {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+
+@layer demo.support {
+  body {
+    display: grid;
+    place-content: center;
+    padding: var(--size-5);
+    gap: var(--size-5);
+  }
+}
\ No newline at end of file
diff --git a/moving-mirror-web-audio-api-and-three-js/README.markdown b/moving-mirror-web-audio-api-and-three-js/README.markdown
new file mode 100644
index 0000000..3342278
--- /dev/null
+++ b/moving-mirror-web-audio-api-and-three-js/README.markdown
@@ -0,0 +1,7 @@
+# Moving Mirror✨ Web Audio API and three.js
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ScavengerFrontend/pen/BazjGJR](https://codepen.io/ScavengerFrontend/pen/BazjGJR).
+
+✨ Move your mouse over 🤍
+
+👁️ See my other works: https://codepen.io/ScavengerFrontend
diff --git a/moving-mirror-web-audio-api-and-three-js/dist/index.html b/moving-mirror-web-audio-api-and-three-js/dist/index.html
new file mode 100644
index 0000000..2352be7
--- /dev/null
+++ b/moving-mirror-web-audio-api-and-three-js/dist/index.html
@@ -0,0 +1,770 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Moving Mirror✨ Web Audio API and three.js</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- ✨ - Move your mouse over the scene ✨ -->
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script> 
+
+<div id="overlay-container">
+</div>
+<div id="scene-container">
+</div>
+
+<button id="btn-play">CLICK HERE</button>
+<div id="credits">
+   <a href="https://codepen.io/ScavengerFrontend/" target="_blank">See More</a>
+</div>
+
+<script id="checkerboardPhong-vs" type="x-shader/x-vertex">
+  
+  varying vec2 vUv;
+  varying vec3 Normal;
+  varying vec3 Position;
+
+  void main() {
+
+    vUv = uv;
+    Normal = normalize(normalMatrix * normal);
+    Position = vec3(modelViewMatrix * vec4(position, 1.0));
+    
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
+
+}
+  
+</script>
+
+<script id="checkerboardPhong-fs" type="x-shader/x-fragment">
+  
+// Antialiased checkerboard - http://www.yaldex.com/open-gl/ch17lev1sec5.html
+  
+  varying vec2 vUv;
+  varying vec3 Normal;
+  varying vec3 Position;
+
+  uniform vec3 Ka;
+  uniform vec3 Kd;
+  uniform vec3 Ks;
+  uniform vec4 LightPosition;
+  uniform vec3 LightIntensity;
+  
+  vec3 phong(vec3 col) {
+    
+    float Shininess = 100.0;
+        
+    vec3 n = normalize(Normal);
+    vec3 s = normalize(vec3(LightPosition) - Position);
+    vec3 v = normalize(vec3(-Position));
+    vec3 r = reflect(-s, n);
+
+    vec3 ambient = col;
+    vec3 diffuse = Kd * max(dot(s, n), 0.0);
+    vec3 specular = Ks * pow(max(dot(r, v), 0.0), Shininess);
+
+    return LightIntensity * (ambient + diffuse + specular);
+      
+  }
+
+  void main() {
+    
+    vec3 color;
+    vec3 color1 = vec3(0.0, 0.0, 0.0);
+    vec3 color2 = vec3(1.0, 1.0, 1.0);
+    vec3 avgColor = vec3(0.8, 0.8, 0.8);
+    float scale = 14.0;
+
+    // Determine the width of the projection of one pixel into s-t space
+    vec2 fw = fwidth(vUv);
+
+    // Determine the amount of fuzziness
+    vec2 fuzz = fw * scale * 1.125;
+
+    float fuzzMax = max(fuzz.s, fuzz.t);
+
+    // Determine the position in the checkerboard pattern
+    vec2 checkPos = fract(vUv * scale);
+
+    if (fuzzMax < 0.5) {
+      
+      // If the filter width is small enough, compute the pattern color
+      vec2 p = smoothstep(vec2(0.5), fuzz + vec2(0.5), checkPos) + (1.0 - smoothstep(vec2(0.0), fuzz, checkPos));
+
+      color = mix(color1, color2, p.x * p.y + (1.0 - p.x) * (1.0 - p.y));
+
+      // Fade in the average color when we get close to the limit
+      color = mix(color, avgColor, smoothstep(0.125, 0.5, fuzzMax));
+      
+    } else {
+      
+     // Otherwise, use only the average color
+      color = avgColor;
+    
+    }
+
+    gl_FragColor = vec4(phong(color), 1.);
+   
+  }
+  
+</script>
+
+<script>
+  
+function roundEdgedBoxGeom(width, height, depth, radius0, smoothness) {
+  
+  let shape = new THREE.Shape();
+  let eps = 0.00001;
+  let radius = radius0 - eps;
+  shape.absarc(eps, eps, eps, -Math.PI / 2, -Math.PI, true);
+  shape.absarc(eps, height - radius * 2, eps, Math.PI, Math.PI / 2, true);
+  shape.absarc(width - radius * 2, height - radius * 2, eps, Math.PI / 2, 0, true);
+  shape.absarc(width - radius * 2, eps, eps, 0, -Math.PI / 2, true);
+  
+  let geometry = new THREE.ExtrudeBufferGeometry(shape, {
+    
+    depth: depth - radius0 * 2,
+    bevelEnabled: true,
+    bevelSegments: smoothness * 2,
+    steps: 1,
+    bevelSize: radius,
+    bevelThickness: radius0,
+    curveSegments: smoothness
+    
+  });
+
+  geometry.center();
+
+  return geometry;
+
+}
+
+</script>
+
+<script>
+  
+function initMaterials() {
+  
+  const white = new THREE.MeshPhongMaterial({
+    color: 0xffffff,
+    // color: 0xffe9c9,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const green = new THREE.MeshPhongMaterial({
+    color: 0x6e9377,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const chestnut = new THREE.MeshPhongMaterial({
+    color: 0x6b1300,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const pink = new THREE.MeshPhongMaterial({
+    color: 0xff84bd,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const peach = new THREE.MeshPhongMaterial({
+    color: 0xff9977,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const grey = new THREE.MeshPhongMaterial({
+    color: 0x8e8e8e,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const black = new THREE.MeshPhongMaterial({
+    color: 0x000000,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const peachStandard = new THREE.MeshStandardMaterial({
+    color: 0x444444,
+    emissive: 0xff586b,
+    roughness: 0.0,
+    metalness: 0.2
+  });
+  
+  let uniforms = {
+    
+    Ka: { value: new THREE.Vector3(0.9, 0.9, 0.9) },
+    Kd: { value: new THREE.Vector3(0.3, 0.0, 0.15) },
+    Ks: { value: new THREE.Vector3(0.75, 0.75, 0.75) },
+    LightIntensity: { value: new THREE.Vector4(0.75, 0.75, 0.75, 1.0) },
+    LightPosition: { value: new THREE.Vector4(0, 10, -20, 1.0) },
+  
+  };
+  
+  const vertexShader = document.getElementById("checkerboardPhong-vs").text;
+  const fragmentShader = document.getElementById("checkerboardPhong-fs").text;
+  
+  const checkerboardPhong = new THREE.ShaderMaterial({
+      uniforms : uniforms,
+      vertexShader : vertexShader,
+      fragmentShader : fragmentShader,
+      side: THREE.DoubleSide
+  });
+  
+  return {
+  
+    white,
+    peach,
+    peachStandard,
+    pink, 
+    chestnut,
+    green,
+    grey,
+    black,
+    checkerboardPhong
+    
+  }
+  
+}
+  
+</script>
+
+<script>
+
+// https://codepen.io/marco_fugaro/pen/xxZWPWJ
+// UTILS FUNCTIONS
+  
+function monkeyPatch(shader, { defines = '', header = '', main = '', ...replaces }) {
+  let patchedShader = shader
+
+  const replaceAll = (str, find, rep) => str.split(find).join(rep)
+  Object.keys(replaces).forEach((key) => {
+    patchedShader = replaceAll(patchedShader, key, replaces[key])
+  })
+
+  patchedShader = patchedShader.replace(
+    'void main() {',
+    `
+    ${header}
+    void main() {
+      ${main}
+    `
+  )
+
+  return `
+    ${defines}
+    ${patchedShader}
+  `
+}
+
+// from https://github.com/hughsk/glsl-noise/blob/master/simplex/3d.glsl
+function noise() {
+  return `
+    //
+    // Description : Array and textureless GLSL 2D/3D/4D simplex
+    //               noise functions.
+    //      Author : Ian McEwan, Ashima Arts.
+    //  Maintainer : ijm
+    //     Lastmod : 20110822 (ijm)
+    //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+    //               Distributed under the MIT License. See LICENSE file.
+    //               https://github.com/ashima/webgl-noise
+    //
+
+    vec3 mod289(vec3 x) {
+      return x - floor(x * (1.0 / 289.0)) * 289.0;
+    }
+
+    vec4 mod289(vec4 x) {
+      return x - floor(x * (1.0 / 289.0)) * 289.0;
+    }
+
+    vec4 permute(vec4 x) {
+         return mod289(((x*34.0)+1.0)*x);
+    }
+
+    vec4 taylorInvSqrt(vec4 r)
+    {
+      return 1.79284291400159 - 0.85373472095314 * r;
+    }
+
+    float noise(vec3 v)
+      {
+      const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+      const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+    // First corner
+      vec3 i  = floor(v + dot(v, C.yyy) );
+      vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+    // Other corners
+      vec3 g = step(x0.yzx, x0.xyz);
+      vec3 l = 1.0 - g;
+      vec3 i1 = min( g.xyz, l.zxy );
+      vec3 i2 = max( g.xyz, l.zxy );
+
+      //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+      //   x1 = x0 - i1  + 1.0 * C.xxx;
+      //   x2 = x0 - i2  + 2.0 * C.xxx;
+      //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+      vec3 x1 = x0 - i1 + C.xxx;
+      vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+      vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+    // Permutations
+      i = mod289(i);
+      vec4 p = permute( permute( permute(
+                 i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+               + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+               + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+    // Gradients: 7x7 points over a square, mapped onto an octahedron.
+    // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+      float n_ = 0.142857142857; // 1.0/7.0
+      vec3  ns = n_ * D.wyz - D.xzx;
+
+      vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+      vec4 x_ = floor(j * ns.z);
+      vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+      vec4 x = x_ *ns.x + ns.yyyy;
+      vec4 y = y_ *ns.x + ns.yyyy;
+      vec4 h = 1.0 - abs(x) - abs(y);
+
+      vec4 b0 = vec4( x.xy, y.xy );
+      vec4 b1 = vec4( x.zw, y.zw );
+
+      //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+      //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+      vec4 s0 = floor(b0)*2.0 + 1.0;
+      vec4 s1 = floor(b1)*2.0 + 1.0;
+      vec4 sh = -step(h, vec4(0.0));
+
+      vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+      vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+      vec3 p0 = vec3(a0.xy,h.x);
+      vec3 p1 = vec3(a0.zw,h.y);
+      vec3 p2 = vec3(a1.xy,h.z);
+      vec3 p3 = vec3(a1.zw,h.w);
+
+    //Normalise gradients
+      vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+      p0 *= norm.x;
+      p1 *= norm.y;
+      p2 *= norm.z;
+      p3 *= norm.w;
+
+    // Mix final noise value
+      vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+      m = m * m;
+      return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
+                                    dot(p2,x2), dot(p3,x3) ) );
+      }
+
+  `
+}
+  
+  
+  
+</script>
+
+<script>
+  
+function getExportedPoints() {
+  
+  let wavyFramePoints = [
+    [2.1892566680908203, 5.229923725128174, 0.0] ,
+[2.237551212310791, 5.168440341949463, 0.0] ,
+[2.27828311920166, 5.106956958770752, 0.0] ,
+[2.3092093467712402, 5.045472621917725, 0.0] ,
+[2.3286285400390625, 4.983988285064697, 0.0] ,
+[2.335470676422119, 4.922504901885986, 0.0] ,
+[2.329359531402588, 4.861020565032959, 0.0] ,
+[2.31063175201416, 4.799536228179932, 0.0] ,
+[2.2803173065185547, 4.738052845001221, 0.0] ,
+[2.240086555480957, 4.67656946182251, 0.0] ,
+[2.192152976989746, 4.615085124969482, 0.0] ,
+[2.1391563415527344, 4.553600788116455, 0.0] ,
+[2.0840139389038086, 4.492117404937744, 0.0] ,
+[2.029761791229248, 4.430634021759033, 0.0] ,
+[1.9793866872787476, 4.369149684906006, 0.0] ,
+[1.9356614351272583, 4.3076653480529785, 0.0] ,
+[1.9009937047958374, 4.246181964874268, 0.0] ,
+[1.8772917985916138, 4.184698581695557, 0.0] ,
+[1.8658610582351685, 4.123214244842529, 0.0] ,
+[1.8673301935195923, 4.061729907989502, 0.0] ,
+[1.881618618965149, 4.000246524810791, 0.0] ,
+[1.9079395532608032, 3.9387621879577637, 0.0] ,
+[1.944844365119934, 3.8772788047790527, 0.0] ,
+[1.9903007745742798, 3.8157944679260254, 0.0] ,
+[2.041806221008301, 3.7543110847473145, 0.0] ,
+[2.0965256690979004, 3.692826747894287, 0.0] ,
+[2.15144681930542, 3.631343364715576, 0.0] ,
+[2.203545570373535, 3.569859027862549, 0.0] ,
+[2.249953269958496, 3.508375644683838, 0.0] ,
+[2.288115978240967, 3.4468913078308105, 0.0] ,
+[2.315932273864746, 3.385406970977783, 0.0] ,
+[2.3318710327148438, 3.3239235877990723, 0.0] ,
+[2.3350539207458496, 3.2624402046203613, 0.0] ,
+[2.3253068923950195, 3.200955867767334, 0.0] ,
+[2.303165912628174, 3.1394715309143066, 0.0] ,
+[2.2698497772216797, 3.0779881477355957, 0.0] ,
+[2.2271933555603027, 3.0165038108825684, 0.0] ,
+[2.177544116973877, 2.9550204277038574, 0.0] ,
+[2.123635768890381, 2.89353609085083, 0.0] ,
+[2.068436622619629, 2.832052707672119, 0.0] ,
+[2.0149850845336914, 2.770569324493408, 0.0] ,
+[1.9662235975265503, 2.709084987640381, 0.0] ,
+[1.9248372316360474, 2.6476006507873535, 0.0] ,
+[1.8931039571762085, 2.5861172676086426, 0.0] ,
+[1.8727713823318481, 2.5246329307556152, 0.0] ,
+[1.8649581670761108, 2.4631495475769043, 0.0] ,
+[1.870094895362854, 2.401665210723877, 0.0] ,
+[1.887898564338684, 2.3401808738708496, 0.0] ,
+[1.9173892736434937, 2.2786974906921387, 0.0] ,
+[1.956943392753601, 2.2172141075134277, 0.0] ,
+[2.004383087158203, 2.1557297706604004, 0.0] ,
+[2.0570969581604004, 2.0942463874816895, 0.0] ,
+[2.1121826171875, 2.0327625274658203, 0.0] ,
+[2.1666078567504883, 1.9712786674499512, 0.0] ,
+[2.217376232147217, 1.909794807434082, 0.0] ,
+[2.261692523956299, 1.848310947418213, 0.0] ,
+[2.297116756439209, 1.7868270874023438, 0.0] ,
+[2.321699619293213, 1.7253432273864746, 0.0] ,
+[2.334087371826172, 1.6638593673706055, 0.0] ,
+[2.333597183227539, 1.6023755073547363, 0.0] ,
+[2.3202571868896484, 1.5408916473388672, 0.0] ,
+[2.2948012351989746, 1.479407787322998, 0.0] ,
+[2.2586312294006348, 1.417923927307129, 0.0] ,
+[2.213737964630127, 1.3564400672912598, 0.0] ,
+[2.1625924110412598, 1.2949562072753906, 0.0] ,
+[2.1080117225646973, 1.2334718704223633, 0.0] ,
+[2.052999496459961, 1.1719884872436523, 0.0] ,
+[2.0005850791931152, 1.110504150390625, 0.0] ,
+[1.9536539316177368, 1.0490202903747559, 0.0] ,
+[1.9147895574569702, 0.9875364303588867, 0.0] ,
+[1.8861318826675415, 0.9260525703430176, 0.0] ,
+[1.8692578077316284, 0.8645687103271484, 0.0] ,
+[1.865097165107727, 0.8030848503112793, 0.0] ,
+[1.8738785982131958, 0.7416009902954102, 0.0] ,
+[1.895119309425354, 0.680117130279541, 0.0] ,
+[1.927648663520813, 0.6186332702636719, 0.0] ,
+[1.9696770906448364, 0.5571494102478027, 0.0] ,
+[2.018889904022217, 0.4956655502319336, 0.0] ,
+[2.0725784301757812, 0.43418169021606445, 0.0] ,
+[2.127786159515381, 0.3726978302001953, 0.0] ,
+[2.1814746856689453, 0.31121397018432617, 0.0] ,
+[2.2306876182556152, 0.24973011016845703, 0.0] ,
+[2.2727155685424805, 0.1882462501525879, 0.0] ,
+[2.3052453994750977, 0.12676191329956055, 0.0] ,
+[2.3264856338500977, 0.0652780532836914, 0.0] ,
+[2.3352675437927246, 0.0037941932678222656, 0.0] ,
+[2.331106662750244, -0.057689666748046875, 0.0] ,
+[2.31423282623291, -0.11917352676391602, 0.0] ,
+[2.2855749130249023, -0.18065738677978516, 0.0] ,
+[2.2467103004455566, -0.2421412467956543, 0.0] ,
+[2.1997790336608887, -0.30362510681152344, 0.0] ,
+[2.147364616394043, -0.3651089668273926, 0.0] ,
+[2.0923523902893066, -0.4265928268432617, 0.0] ,
+[2.037771701812744, -0.48807668685913086, 0.0] ,
+[1.9866267442703247, -0.549560546875, 0.0] ,
+[1.941733479499817, -0.6110444068908691, 0.0] ,
+[1.9055629968643188, -0.6725282669067383, 0.0] ,
+[1.880107045173645, -0.7340121269226074, 0.0] ,
+[1.8667670488357544, -0.7954959869384766, 0.0] ,
+[1.8662773370742798, -0.8569803237915039, 0.0] ,
+[1.8786646127700806, -0.918464183807373, 0.0] ,
+[1.9032474756240845, -0.9799480438232422, 0.0] ,
+[1.9386721849441528, -1.0414314270019531, 0.0] ,
+[1.9829884767532349, -1.1029157638549805, 0.0] ,
+[2.0337562561035156, -1.1643996238708496, 0.0] ,
+[2.088181972503662, -1.2258834838867188, 0.0] ,
+[2.1432671546936035, -1.287367343902588, 0.0] ,
+[2.195981502532959, -1.348851203918457, 0.0] ,
+[2.2434210777282715, -1.4103350639343262, 0.0] ,
+[2.282975196838379, -1.4718189239501953, 0.0] ,
+[2.3124656677246094, -1.5333027839660645, 0.0] ,
+[2.3302693367004395, -1.5947866439819336, 0.0] ,
+[2.3354063034057617, -1.6562705039978027, 0.0] ,
+[2.3275928497314453, -1.71775484085083, 0.0] ,
+[2.307260036468506, -1.779238224029541, 0.0] ,
+[2.275527000427246, -1.8407220840454102, 0.0] ,
+[2.234140396118164, -1.9022059440612793, 0.0] ,
+[2.1853795051574707, -1.9636898040771484, 0.0] ,
+[2.131927490234375, -2.025174140930176, 0.0] ,
+[2.076728343963623, -2.086658000946045, 0.0] ,
+[2.022819995880127, -2.148141860961914, 0.0] ,
+[1.9731711149215698, -2.209625720977783, 0.0] ,
+[1.9305142164230347, -2.2711095809936523, 0.0] ,
+[1.8971983194351196, -2.3325934410095215, 0.0] ,
+[1.875057339668274, -2.3940773010253906, 0.0] ,
+[1.8653103113174438, -2.4555611610412598, 0.0] ,
+[1.868493676185608, -2.517045021057129, 0.0] ,
+[1.8844319581985474, -2.578528881072998, 0.0] ,
+[1.9122482538223267, -2.6400132179260254, 0.0] ,
+[1.9504109621047974, -2.7014970779418945, 0.0] ,
+[1.9968191385269165, -2.7629809379577637, 0.0] ,
+[2.048917770385742, -2.8244643211364746, 0.0] ,
+[2.1038384437561035, -2.8859481811523438, 0.0] ,
+[2.158557891845703, -2.947432518005371, 0.0] ,
+[2.210063934326172, -3.0089163780212402, 0.0] ,
+[2.2555203437805176, -3.0704002380371094, 0.0] ,
+[2.2924251556396484, -3.1318840980529785, 0.0] ,
+[2.3187460899353027, -3.1933679580688477, 0.0] ,
+[2.3330345153808594, -3.254851818084717, 0.0] ,
+[2.334503650665283, -3.316335678100586, 0.0] ,
+[2.3230724334716797, -3.3778200149536133, 0.0] ,
+[2.299370765686035, -3.439303398132324, 0.0] ,
+[2.264702796936035, -3.5007872581481934, 0.0] ,
+[2.220977783203125, -3.5622711181640625, 0.0] ,
+[2.170602321624756, -3.62375545501709, 0.0] ,
+[2.1163501739501953, -3.685239315032959, 0.0] ,
+[2.0612082481384277, -3.746723175048828, 0.0] ,
+[2.008211135864258, -3.808206558227539, 0.0] ,
+[1.9602779150009155, -3.869690418243408, 0.0] ,
+[1.9200466871261597, -3.9311742782592773, 0.0] ,
+[1.8897329568862915, -3.9926581382751465, 0.0] ,
+[1.8710047006607056, -4.054141998291016, 0.0] ,
+[1.8648935556411743, -4.115625858306885, 0.0] ,
+[1.87173593044281, -4.177109718322754, 0.0] ,
+[1.8911548852920532, -4.238593578338623, 0.0] ,
+[1.9220815896987915, -4.300077438354492, 0.0] ,
+[1.9628132581710815, -4.3615617752075195, 0.0] ,
+[2.0111074447631836, -4.423045635223389, 0.0] ,
+[2.0643057823181152, -4.4845290184021, 0.0] ,
+[2.119478702545166, -4.546012878417969, 0.0] ,
+[2.1735897064208984, -4.607496738433838, 0.0] ,
+[2.2236595153808594, -4.668980598449707, 0.0] ,
+[2.2669315338134766, -4.730464935302734, 0.0] ,
+[2.301023483276367, -4.7919487953186035, 0.0] ,
+[2.3240580558776855, -4.853432655334473, 0.0] ,
+[2.3347678184509277, -4.914916515350342, 0.0] ,
+[2.3325629234313965, -4.976399898529053, 0.0] ,
+[2.3175644874572754, -5.03788423538208, 0.0] ,
+[2.2905988693237305, -5.099368095397949, 0.0] ,
+[2.25314998626709, -5.160851955413818, 0.0] ,
+[2.207279682159424, -5.2223358154296875, 0.0] ,
+[2.155513286590576, -5.283819675445557, 0.0] ,
+[-2.042383909225464, -5.283820152282715, 0.0] ,
+[-2.1676294803619385, -5.260290145874023, 0.0] ,
+[-2.219395637512207, -5.198806285858154, 0.0] ,
+[-2.265265941619873, -5.137322425842285, 0.0] ,
+[-2.3027148246765137, -5.075838565826416, 0.0] ,
+[-2.3296806812286377, -5.014354705810547, 0.0] ,
+[-2.3446788787841797, -4.9528703689575195, 0.0] ,
+[-2.346883773803711, -4.891386985778809, 0.0] ,
+[-2.3361740112304688, -4.8299031257629395, 0.0] ,
+[-2.3131394386291504, -4.76841926574707, 0.0] ,
+[-2.2790474891662598, -4.706935405731201, 0.0] ,
+[-2.2357754707336426, -4.645451545715332, 0.0] ,
+[-2.1857059001922607, -4.583967208862305, 0.0] ,
+[-2.1315948963165283, -4.5224833488464355, 0.0] ,
+[-2.0764217376708984, -4.460999488830566, 0.0] ,
+[-2.023223400115967, -4.3995161056518555, 0.0] ,
+[-1.9749292135238647, -4.338032245635986, 0.0] ,
+[-1.9341976642608643, -4.276547908782959, 0.0] ,
+[-1.9032707214355469, -4.21506404876709, 0.0] ,
+[-1.8838518857955933, -4.153580188751221, 0.0] ,
+[-1.8770097494125366, -4.092096328735352, 0.0] ,
+[-1.8831208944320679, -4.030612468719482, 0.0] ,
+[-1.9018491506576538, -3.9691286087036133, 0.0] ,
+[-1.932162880897522, -3.907644748687744, 0.0] ,
+[-1.9723941087722778, -3.846160888671875, 0.0] ,
+[-2.020327091217041, -3.784677028656006, 0.0] ,
+[-2.073324203491211, -3.723193645477295, 0.0] ,
+[-2.1284661293029785, -3.661709785461426, 0.0] ,
+[-2.182718515396118, -3.6002259254455566, 0.0] ,
+[-2.2330939769744873, -3.5387415885925293, 0.0] ,
+[-2.2768189907073975, -3.47725772857666, 0.0] ,
+[-2.3114869594573975, -3.415773868560791, 0.0] ,
+[-2.335188627243042, -3.35429048538208, 0.0] ,
+[-2.3466196060180664, -3.2928061485290527, 0.0] ,
+[-2.3451504707336426, -3.2313222885131836, 0.0] ,
+[-2.330862045288086, -3.1698384284973145, 0.0] ,
+[-2.3045411109924316, -3.1083545684814453, 0.0] ,
+[-2.267636299133301, -3.046870708465576, 0.0] ,
+[-2.222179889678955, -2.985386848449707, 0.0] ,
+[-2.1706740856170654, -2.923902988433838, 0.0] ,
+[-2.1159543991088867, -2.8624186515808105, 0.0] ,
+[-2.0610337257385254, -2.8009347915649414, 0.0] ,
+[-2.0089354515075684, -2.7394514083862305, 0.0] ,
+[-1.9625272750854492, -2.6779675483703613, 0.0] ,
+[-1.9243645668029785, -2.616483688354492, 0.0] ,
+[-1.8965482711791992, -2.554999351501465, 0.0] ,
+[-1.8806097507476807, -2.4935154914855957, 0.0] ,
+[-1.8774263858795166, -2.4320316314697266, 0.0] ,
+[-1.8871736526489258, -2.3705477714538574, 0.0] ,
+[-1.9093146324157715, -2.3090639114379883, 0.0] ,
+[-1.942630410194397, -2.2475805282592773, 0.0] ,
+[-1.9852873086929321, -2.18609619140625, 0.0] ,
+[-2.0349366664886475, -2.124612331390381, 0.0] ,
+[-2.0888447761535645, -2.0631284713745117, 0.0] ,
+[-2.1440441608428955, -2.0016446113586426, 0.0] ,
+[-2.197495937347412, -1.9401607513427734, 0.0] ,
+[-2.2462570667266846, -1.8786768913269043, 0.0] ,
+[-2.2876434326171875, -1.8171930313110352, 0.0] ,
+[-2.3193767070770264, -1.7557086944580078, 0.0] ,
+[-2.339709520339966, -1.6942253112792969, 0.0] ,
+[-2.347522735595703, -1.6327414512634277, 0.0] ,
+[-2.342386245727539, -1.5712575912475586, 0.0] ,
+[-2.32458233833313, -1.5097737312316895, 0.0] ,
+[-2.2950916290283203, -1.4482898712158203, 0.0] ,
+[-2.255537748336792, -1.3868060111999512, 0.0] ,
+[-2.2080979347229004, -1.325322151184082, 0.0] ,
+[-2.155383825302124, -1.2638378143310547, 0.0] ,
+[-2.1002984046936035, -1.2023544311523438, 0.0] ,
+[-2.045872926712036, -1.1408700942993164, 0.0] ,
+[-1.9951049089431763, -1.0793862342834473, 0.0] ,
+[-1.9507886171340942, -1.0179023742675781, 0.0] ,
+[-1.9153640270233154, -0.956418514251709, 0.0] ,
+[-1.8907811641693115, -0.8949346542358398, 0.0] ,
+[-1.8783937692642212, -0.8334507942199707, 0.0] ,
+[-1.8788834810256958, -0.7719669342041016, 0.0] ,
+[-1.892223596572876, -0.7104830741882324, 0.0] ,
+[-1.9176793098449707, -0.6489992141723633, 0.0] ,
+[-1.9538497924804688, -0.5875153541564941, 0.0] ,
+[-1.9987431764602661, -0.526031494140625, 0.0] ,
+[-2.0498881340026855, -0.46454763412475586, 0.0] ,
+[-2.1044692993164062, -0.4030637741088867, 0.0] ,
+[-2.1594812870025635, -0.3415799140930176, 0.0] ,
+[-2.211895704269409, -0.28009605407714844, 0.0] ,
+[-2.258826732635498, -0.2186121940612793, 0.0] ,
+[-2.2976913452148438, -0.15712833404541016, 0.0] ,
+[-2.3263494968414307, -0.09564447402954102, 0.0] ,
+[-2.3432230949401855, -0.03416013717651367, 0.0] ,
+[-2.347383975982666, 0.02732372283935547, 0.0] ,
+[-2.3386025428771973, 0.08880758285522461, 0.0] ,
+[-2.317362070083618, 0.15029144287109375, 0.0] ,
+[-2.284832239151001, 0.2117753028869629, 0.0] ,
+[-2.2428042888641357, 0.27325916290283203, 0.0] ,
+[-2.1935908794403076, 0.33474302291870117, 0.0] ,
+[-2.1399028301239014, 0.3962268829345703, 0.0] ,
+[-2.0846948623657227, 0.45771074295043945, 0.0] ,
+[-2.031006336212158, 0.5191946029663086, 0.0] ,
+[-1.9817934036254883, 0.5806784629821777, 0.0] ,
+[-1.9397650957107544, 0.6421623229980469, 0.0] ,
+[-1.9072356224060059, 0.703646183013916, 0.0] ,
+[-1.8859951496124268, 0.7651300430297852, 0.0] ,
+[-1.8772135972976685, 0.8266143798828125, 0.0] ,
+[-1.8813742399215698, 0.8880977630615234, 0.0] ,
+[-1.8982481956481934, 0.9495820999145508, 0.0] ,
+[-1.9269059896469116, 1.0110654830932617, 0.0] ,
+[-1.9657704830169678, 1.072549819946289, 0.0] ,
+[-2.0127017498016357, 1.134033203125, 0.0] ,
+[-2.0651161670684814, 1.1955175399780273, 0.0] ,
+[-2.1201281547546387, 1.2570013999938965, 0.0] ,
+[-2.1747090816497803, 1.3184852600097656, 0.0] ,
+[-2.2258543968200684, 1.3799691200256348, 0.0] ,
+[-2.270747661590576, 1.441452980041504, 0.0] ,
+[-2.306917905807495, 1.502936840057373, 0.0] ,
+[-2.332373857498169, 1.5644207000732422, 0.0] ,
+[-2.3457138538360596, 1.6259045600891113, 0.0] ,
+[-2.346203565597534, 1.6873884201049805, 0.0] ,
+[-2.3338160514831543, 1.7488722801208496, 0.0] ,
+[-2.3092334270477295, 1.8103561401367188, 0.0] ,
+[-2.2738089561462402, 1.871840000152588, 0.0] ,
+[-2.229492664337158, 1.933323860168457, 0.0] ,
+[-2.178724527359009, 1.9948081970214844, 0.0] ,
+[-2.1242992877960205, 2.0562915802001953, 0.0] ,
+[-2.069213390350342, 2.1177759170532227, 0.0] ,
+[-2.0164997577667236, 2.1792588233947754, 0.0] ,
+[-1.9690600633621216, 2.2407431602478027, 0.0] ,
+[-1.9295059442520142, 2.3022265434265137, 0.0] ,
+[-1.9000153541564941, 2.363710880279541, 0.0] ,
+[-1.882211446762085, 2.4251952171325684, 0.0] ,
+[-1.8770748376846313, 2.4866786003112793, 0.0] ,
+[-1.884887933731079, 2.5481629371643066, 0.0] ,
+[-1.905220627784729, 2.6096463203430176, 0.0] ,
+[-1.9369540214538574, 2.671130657196045, 0.0] ,
+[-1.9783402681350708, 2.732614040374756, 0.0] ,
+[-2.027101993560791, 2.794098377227783, 0.0] ,
+[-2.0805537700653076, 2.855581760406494, 0.0] ,
+[-2.1357526779174805, 2.9170660972595215, 0.0] ,
+[-2.1896612644195557, 2.9785494804382324, 0.0] ,
+[-2.2393102645874023, 3.0400338172912598, 0.0] ,
+[-2.2819669246673584, 3.1015172004699707, 0.0] ,
+[-2.3152830600738525, 3.163001537322998, 0.0] ,
+[-2.3374240398406982, 3.2244858741760254, 0.0] ,
+[-2.3471710681915283, 3.2859692573547363, 0.0] ,
+[-2.3439877033233643, 3.3474535942077637, 0.0] ,
+[-2.328049421310425, 3.4089369773864746, 0.0] ,
+[-2.3002331256866455, 3.470421314239502, 0.0] ,
+[-2.262070417404175, 3.531904697418213, 0.0] ,
+[-2.2156622409820557, 3.5933890342712402, 0.0] ,
+[-2.1635637283325195, 3.654872417449951, 0.0] ,
+[-2.108642816543579, 3.7163567543029785, 0.0] ,
+[-2.0539233684539795, 3.7778401374816895, 0.0] ,
+[-2.0024173259735107, 3.839324474334717, 0.0] ,
+[-1.956960916519165, 3.9008078575134277, 0.0] ,
+[-1.9200562238693237, 3.962292194366455, 0.0] ,
+[-1.8937352895736694, 4.023775577545166, 0.0] ,
+[-1.8794469833374023, 4.085259914398193, 0.0] ,
+[-1.8779778480529785, 4.146744251251221, 0.0] ,
+[-1.889408826828003, 4.208227634429932, 0.0] ,
+[-1.913110613822937, 4.269711017608643, 0.0] ,
+[-1.9477784633636475, 4.33119535446167, 0.0] ,
+[-1.9915035963058472, 4.392679691314697, 0.0] ,
+[-2.0418789386749268, 4.454163074493408, 0.0] ,
+[-2.0961310863494873, 4.515646457672119, 0.0] ,
+[-2.151273488998413, 4.5771307945251465, 0.0] ,
+[-2.204270124435425, 4.638615131378174, 0.0] ,
+[-2.2522034645080566, 4.700098514556885, 0.0] ,
+[-2.2924344539642334, 4.761581897735596, 0.0] ,
+[-2.3227486610412598, 4.823066234588623, 0.0] ,
+[-2.3414766788482666, 4.88455057144165, 0.0] ,
+[-2.347587823867798, 4.946033954620361, 0.0] ,
+[-2.340745687484741, 5.007518291473389, 0.0] ,
+[-2.321326494216919, 5.069002628326416, 0.0] ,
+[-2.2904000282287598, 5.130486011505127, 0.0] ,
+[-2.2496681213378906, 5.191969394683838, 0.0] ,
+[-2.201373815536499, 5.253453731536865, 0.0] ,
+[2.0046591758728027, 5.253453731536865, 0.0] ,
+[2.121809959411621, 5.253453731536865, 0.0]
+  ];
+  
+  let sculpturePoints = [[-1.3917511701583862, -3.1171324253082275, -3.5898947715759277] ,
+[-1.1922402381896973, -1.0718055963516235, -1.2966901063919067] ,
+[-0.5807932615280151, -2.7513058185577393, -5.373478412628174] ,
+[1.267488718032837, -1.851090431213379, -5.381288528442383] ,
+[0.1931348294019699, -0.9099960327148438, -2.8085756301879883] ,
+[-2.5284719467163086, 3.285818763743009e-07, -2.445554733276367] ,
+[-1.2505677938461304, 7.523778435825079e-07, -5.599764347076416] ,
+[1.1724963188171387, 0.4350929856300354, -5.8608903884887695] ,
+[3.412280321121216, 1.0782206058502197, -0.681460440158844] ,
+[1.6286853551864624, 0.8923431634902954, 0.35091060400009155] ,
+[0.6678873300552368, -0.8118454217910767, -1.3810076713562012] ,
+[1.842307686805725, -0.8831179141998291, -5.522668838500977] ,
+[4.667878150939941, 5.6755050081847e-07, -4.22413969039917] ,
+[5.608157157897949, 1.0994219779968262, -1.510213851928711] ,
+[4.6876091957092285, 0.2738717496395111, -0.9849551916122437] ,
+[1.5655218362808228, 2.703272819519043, -0.9420212507247925] ,
+[1.0088565349578857, 0.2771475315093994, -2.3343098163604736] ,
+[2.886371612548828, -0.46153825521469116, -2.5627846717834473] ,
+[4.184347152709961, -0.587138295173645, -2.874530553817749]];
+  
+  return {
+    
+    wavyFramePoints,
+    sculpturePoints
+    
+  }
+  
+}
+</script>
+<!-- partial -->
+  <script src='https://unpkg.com/three@0.120.1/examples/js/objects/Reflector.js'></script>
+<script src='https://threejs.org/examples/js/utils/BufferGeometryUtils.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/moving-mirror-web-audio-api-and-three-js/dist/script.js b/moving-mirror-web-audio-api-and-three-js/dist/script.js
new file mode 100644
index 0000000..747899b
--- /dev/null
+++ b/moving-mirror-web-audio-api-and-three-js/dist/script.js
@@ -0,0 +1,1009 @@
+/*
+  
+  Audio-Reactive 3D Visuals ✨ - 
+  Move your mouse over ✨
+  
+  Inspired by the Ultrafragola Mirror.
+  No 3D models have been downloaded here, everything is created with three.js.
+  
+  Thanks to:
+  
+  @EllenProbst for modifying audio data -
+  https://codepen.io/EllenProbst/pen/RQQmJK
+  
+  @prisoner849 for round-edged box and closed tube geoms -
+  https://discourse.threejs.org/t/round-edged-box
+  https://discourse.threejs.org/t/end-caps-of-tubegeometry/9655/6
+  
+  @marco_fugaro for calc vertex normals in MeshPhysicalMaterial -
+  https://discourse.threejs.org/t/calculating-vertex-normals-after-displacement-in-the-vertex-shader/16989
+  
+  Music: 'You're So Vain' by Carly Simon
+  
+  October 2020, Anna the Scavenger
+  
+*/
+
+'use strict';
+
+let scene, camera, renderer, container;
+
+let cloth, mirror, wavyFrame;
+let sculptureLeft, sculptureRight;
+let isSculptureDancing = false;
+
+let materials;
+
+// AUDIO REACTIVE MESHES
+
+let audioSpheres = [];
+let audioPastilles = [];
+
+// AUDIO
+
+const audioURL = "https://assets.codepen.io/911157/Carly_Simon_Youre_So_Vain.mp3";
+
+let isAudioPlaying = false;
+
+let analyser;
+let audioData = [];
+let freqData = [];
+
+// MOUSE
+
+let mouseX = 0;
+let time = 0;
+
+// LANDSCAPE / PORTRAIT
+
+let isMobile = /(Android|iPhone|iOS|iPod|iPad)/i.test(navigator.userAgent);
+let windowRatio = window.innerWidth / window.innerHeight;
+let isLandscape = (windowRatio > 1) ? true : false;
+
+let paramsLandscape = {
+  
+  mirrorY: 40,
+  centerLeftX: -220,
+  centerLeftY: -100
+  
+};
+
+let paramsPortrait = {
+  
+  mirrorY: 40,
+  centerLeftX: -160,
+  centerLeftY: -70
+  
+};
+
+let params = isLandscape ? paramsLandscape : paramsPortrait;
+
+// BACKGROUND RADIAL GRADIENT
+
+let bgColors = [
+  
+  // center
+  [230, 146, 181],
+  [230, 146, 181],
+  
+  // outside
+  [230, 230, 230],
+  [125, 150, 150]
+  
+];
+
+window.onload = function() {
+  
+  introAnimation();
+  init();
+  render();
+  
+};
+
+function introAnimation() {
+  
+  const overlayContainer = document.querySelector("#overlay-container");
+  const sceneContainer = document.querySelector("#scene-container");
+  
+  overlayContainer.style.animation = "fadeOut 1.1s ease-out forwards";
+  sceneContainer.style.animation = "fadeIn 1.1s ease-in forwards";
+  
+  const credits = document.querySelector('#credits');
+  credits.style.animation = "fadeIn3 8s ease-out forwards";
+  
+  const btnPlay = document.querySelector("#btn-play");
+  btnPlay.addEventListener("click", onClick);
+  btnPlay.style.animation = "fadeIn2 2.5s ease-in forwards";
+  
+}
+
+function init() {
+  
+  // CAMERA, LIGHTS, RENDERER
+  
+  initSceneBasics();
+  
+  // ALL MATERIALS AND MESHES
+  
+  materials = initMaterials();
+      
+  let count = 140;
+  initSprinkles(count);
+  
+  initMirror();
+  initWalls();
+  initCloth();
+  initSculptureLeft();
+  initSculptureRight();
+  initPastilles();
+    
+  window.addEventListener("resize", onWindowResize);
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("touchmove", onTouchMove);
+
+}
+
+function initSceneBasics() {
+  
+  container = document.querySelector("#scene-container");
+  
+  scene = new THREE.Scene();
+  
+  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1800);
+  const cameraZ = isLandscape ? 500 : 700;
+  camera.position.set(0, 20, cameraZ);
+  camera.lookAt(0, 0, 0);
+  scene.add(camera);
+  
+  const dirLight = new THREE.DirectionalLight(0xffffff, 1.7, 1.7);
+  dirLight.position.set(0, 50, -50);
+  scene.add(dirLight);
+  
+  const dirLight3 = new THREE.DirectionalLight(0xffffff, 1.2, 1.2);
+  dirLight3.position.set(0, 10, -100);
+  dirLight3.target.position.set(50, 0, -100);
+  scene.add(dirLight3.target);
+  scene.add(dirLight3);
+  
+  const dirLight2 = new THREE.DirectionalLight(0xff00ff, 1.4, 1.4);
+  dirLight2.position.set(-40, 0, 50);
+  scene.add(dirLight2);
+
+  const hemLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 1.5);
+  hemLight.position.set(20, 50, 50);
+  scene.add(hemLight);
+  
+  renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.physicallyCorrectLights = true;
+  renderer.outputEncoding = THREE.GammaEncoding;
+  renderer.gammaFactor = 2.2;
+  renderer.setPixelRatio(window.devicePixelRatio > 1.5 ? Math.min(window.devicePixelRatio, 1.5) : Math.min(window.devicePixelRatio, 1.25));
+  container.appendChild(renderer.domElement);
+  
+}
+
+function SprinkleGeometry(arc = 0.5, radius = 35, thickness = 2.5) {
+  
+  this.arc = arc * Math.PI;
+  this.torusRadius = radius;
+  this.thickness = thickness;
+  
+  // SPRINKLE MIDDLE
+  
+  this.ArcGeom = new THREE.TorusBufferGeometry(this.torusRadius, this.thickness, 10, 15, this.arc);
+  
+  let sphereRadius = this.thickness;
+  
+  // SPRINKLE END 1 - HALF CIRCLE
+  
+  this.End1Geom = new THREE.SphereBufferGeometry(sphereRadius, 10, 10, 0, Math.PI);
+  this.End1Geom.translate(0, this.torusRadius, 0);
+  this.End1Geom.rotateY(- Math.PI / 2);
+  this.End1Geom.rotateZ(- (0.5 * Math.PI - this.arc));
+  
+  // SPRINKLE END 1 - FULL CIRCLE
+  
+  this.End1SphereGeom = new THREE.SphereBufferGeometry(sphereRadius, 10, 10, 0, Math.PI * 2);
+  this.End1SphereGeom.translate(0, this.torusRadius, 0);
+  
+  // SPRINKLE END 2 - HALF CIRCLE
+  
+  this.End2Geom = new THREE.SphereBufferGeometry(sphereRadius, 10, 10, 0, Math.PI);
+  this.End2Geom.rotateX(Math.PI / 2);
+  this.End2Geom.translate(this.torusRadius, 0, 0);
+
+}
+
+function initSprinkles(n) {
+  
+  let count = n;
+  
+  const iPinkMat = new THREE.MeshPhongMaterial({
+    
+    color: 0xffffff,
+    shininess: 100,
+    specular: 0x383636
+    
+  });
+  
+  const iGreenMat = new THREE.MeshPhongMaterial({
+    
+    color: 0xffffff,
+    shininess: 100,
+    specular: 0x383636
+    
+  });
+  
+  const iBlackMat = new THREE.MeshPhongMaterial({
+    
+    color: 0xffffff,
+    shininess: 100,
+    specular: 0x383636
+    
+  });
+  
+  // Assign random colors to the sprinkles
+  
+  let color = new THREE.Color();
+  let color1 = new THREE.Color();
+  let color2 = new THREE.Color();
+  let aColorFloat32 = new Float32Array(count * 3);
+  let aColorEnd1Float32 = new Float32Array(count * 3);
+  let aColorEnd2Float32 = new Float32Array(count * 3);
+  
+  let sprinklePalette = [
+    
+    0xffffff, // white
+    0xffe9c9, 
+    0xffe9c9, 
+    0x6e9377, // green
+    0x6e9377,
+    0xff84bd, // pink
+    0xff84bd,
+    0xff9977, // peach
+    0x000000, // black
+    
+  ];
+  
+  for (let i = 0; i < count; i ++) {
+
+    color.setHex(sprinklePalette[Math.floor(Math.random() * sprinklePalette.length)]);
+    color1.setHex(sprinklePalette[Math.floor(Math.random() * sprinklePalette.length)]);
+    color2.setHex(sprinklePalette[Math.floor(Math.random() * sprinklePalette.length)]);
+    
+	  color.toArray(aColorFloat32, i * 3);
+    color1.toArray(aColorEnd1Float32, i * 3);
+    color2.toArray(aColorEnd2Float32, i * 3);
+
+	}
+    
+  const sprinkleArcGeom = new SprinkleGeometry().ArcGeom;
+  const sprinkleEnd1Geom = new SprinkleGeometry().End1Geom;
+  const sprinkleEnd2Geom = new SprinkleGeometry().End2Geom;
+  
+  sprinkleArcGeom.setAttribute('color', new THREE.InstancedBufferAttribute(aColorFloat32, 3));
+	iPinkMat.vertexColors = true;
+  
+  sprinkleEnd1Geom.setAttribute('color', new THREE.InstancedBufferAttribute(aColorEnd1Float32, 3));
+	iGreenMat.vertexColors = true;
+  
+  sprinkleEnd2Geom.setAttribute('color', new THREE.InstancedBufferAttribute(aColorEnd2Float32, 3));
+	iBlackMat.vertexColors = true;
+
+  let instancedSprinkleArc = new THREE.InstancedMesh(sprinkleArcGeom, iPinkMat, count);
+  let instancedSprinkleEnd1 = new THREE.InstancedMesh(sprinkleEnd1Geom, iGreenMat, count);
+  let instancedSprinkleEnd2 = new THREE.InstancedMesh(sprinkleEnd2Geom, iBlackMat, count);
+  
+  let dummy = new THREE.Object3D();
+  
+  for (let i = 0; i < count; i ++) {
+    
+    let theta = THREE.Math.randFloatSpread(90);
+    let phi = THREE.Math.randFloatSpread(90);
+    
+    dummy.position.set(
+      Math.floor(Math.random() * (375 - (-375)) - 375),
+      Math.floor(Math.random() * (100 - (-50)) - 50),
+      Math.floor(Math.random() * (-70 - (-270)) - 270)
+    );
+
+    dummy.rotation.set(
+      Math.random() * 2 * Math.PI,
+      Math.random() * 2 * Math.PI,
+      0
+    );
+
+    dummy.updateMatrix();
+
+    instancedSprinkleArc.setMatrixAt( i, dummy.matrix );
+    instancedSprinkleEnd1.setMatrixAt( i, dummy.matrix );
+    instancedSprinkleEnd2.setMatrixAt( i, dummy.matrix );
+
+  }
+  
+  const sprinklesGroup = new THREE.Group();
+  sprinklesGroup.add(instancedSprinkleArc);
+  sprinklesGroup.add(instancedSprinkleEnd1);
+  sprinklesGroup.add(instancedSprinkleEnd2);
+  
+  scene.add(sprinklesGroup);
+  
+}
+
+function closedCapsTube(pts, thickness, segments) {  
+  
+  const closedTubeGroup = new THREE.Group();
+  
+  // CURVE SHAPING THE SCULPTURE
+  
+  let points = pts;
+  let pScale = 1.5;
+
+  for (let i = 0; i < points.length; i++) {
+    
+    let x = points[i][0] * pScale;
+    let y = points[i][1] * pScale;
+    let z = points[i][2] * pScale;
+    points[i] = new THREE.Vector3(x, z, -y);
+    
+  }
+  
+  
+  let curve = new THREE.CatmullRomCurve3(points);
+  // console.log(points);
+  let p = curve.getPoints(20);
+  let curveSmooth = new THREE.CatmullRomCurve3(p);
+  let geom = new THREE.TubeBufferGeometry(curveSmooth, 180, thickness, 20, false);
+  let tube = new THREE.Mesh(geom, materials.peachStandard);
+  closedTubeGroup.add(tube);
+  
+  // TUBE START POINTS
+  
+  let pos = geom.attributes.position;
+  let startPoints = [];
+  startPoints.push(curve.getPoint(0));
+  
+  for (let i = 0; i <= geom.parameters.radialSegments; i++) {
+
+	  startPoints.push(new THREE.Vector3().fromBufferAttribute(pos, i));
+  
+  }
+
+  let pointsStartGeom = new THREE.BufferGeometry().setFromPoints(startPoints);
+  let psgPos = pointsStartGeom.attributes.position;
+  let indexStart = [];
+  
+  for (let i = 1; i < psgPos.count - 1; i++) {
+    
+    indexStart.push(0, i, i + 1);
+    
+  }
+  pointsStartGeom.setIndex(indexStart);
+  pointsStartGeom.computeVertexNormals();
+  
+  // CAP MESH START
+  
+  let capStart = new THREE.Mesh(pointsStartGeom, materials.peachStandard);
+  closedTubeGroup.add(capStart);
+  
+  // TUBE END POINTS
+  
+  let endPoints = [];
+  endPoints.push(curve.getPoint(1));
+  
+  for (let i = (geom.parameters.radialSegments + 1) * geom.parameters.tubularSegments; i < pos.count; i++) {
+	
+	  endPoints.push(new THREE.Vector3().fromBufferAttribute(pos, i));
+
+  }
+
+  let pointsEndGeom = new THREE.BufferGeometry().setFromPoints(endPoints);
+  let pegPos = pointsEndGeom.attributes.position;
+  let indexEnd = [];
+  
+  for (let i = 1; i < pegPos.count - 1; i++) {
+	
+    indexEnd.push(0, i + 1, i);
+    
+  }
+  pointsEndGeom.setIndex(indexEnd);
+  pointsEndGeom.computeVertexNormals();
+  
+  // CAP MESH END
+  
+  let capEnd = new THREE.Mesh(pointsEndGeom, materials.peachStandard);
+  closedTubeGroup.add(capEnd);
+  
+  return closedTubeGroup;
+  
+}
+
+function initSculptureRight() {
+  
+  sculptureRight = new THREE.Group();
+  
+  let points = getExportedPoints().sculpturePoints;
+
+  const tubeBig = closedCapsTube(points, 0.75, 240);  
+  const scale = 11;
+  tubeBig.scale.set(scale, scale, scale);
+  tubeBig.position.set(0, 70, 0);
+  sculptureRight.add(tubeBig);
+  
+  const sphereGeom = new THREE.SphereBufferGeometry(25, 20, 15);
+  
+  const sphereCheck2 = new THREE.Mesh(sphereGeom, materials.checkerboardPhong);
+  sphereCheck2.position.set(55, 30, 15);
+  sphereCheck2.rotation.x = Math.PI / 2.5;
+  sphereCheck2.rotation.z = -Math.PI / 1.25;
+  sculptureRight.add(sphereCheck2);
+  
+  const sphereCheck3 = sphereCheck2.clone();
+  sphereCheck3.position.set(-10, 60, -30);
+  sphereCheck3.rotation.x = Math.PI / 3.5;
+  sphereCheck3.rotation.z = -Math.PI / 1.5;
+  sculptureRight.add(sphereCheck3);
+  
+  const sphere = new THREE.Mesh(sphereGeom, materials.chestnut);
+  sphere.position.set(17, -45, 0);
+  sphere.scale.set(0.55, 0.55, 0.55);
+  sculptureRight.add(sphere);
+  
+  sculptureRight.position.x = 210;
+  sculptureRight.position.y = -70;
+  
+  scene.add(sculptureRight);
+  audioSpheres.push(sphereCheck2, sphereCheck3);
+  
+}
+
+function initSculptureLeft() {
+  
+  sculptureLeft = new THREE.Group();
+ 
+  const doodle = new THREE.Group();
+  
+  let thickness = 2.5;
+  let t = thickness;
+  
+  const torusGeom = new THREE.TorusBufferGeometry(22, t, 16, 20, Math.PI);
+  const torusGeom2 = new THREE.TorusBufferGeometry(22, t, 16, 20, Math.PI / 2);
+  const torusGeom3 = new THREE.TorusBufferGeometry(5, t, 16, 20, Math.PI / 2);
+  const torusGeom4 = new THREE.TorusBufferGeometry(15, t, 16, 20, Math.PI / 2);
+  const torusGeom5 = new THREE.TorusBufferGeometry(40, t, 16, 20, 0.35 * Math.PI);
+  const cylinderGeom = new THREE.CylinderBufferGeometry(t, t, 40, 11, 1);
+  
+  const torus = new THREE.Mesh(torusGeom, materials.peachStandard);
+  torus.position.set(0, 55, 0);
+  torus.rotation.x = Math.PI;
+  doodle.add(torus);
+  const torus2 = torus.clone();
+  torus2.rotation.x = 0;
+  torus2.position.copy(torus.position);
+  torus2.position.x = torus.position.x + 2 * torusGeom.parameters.radius;
+  doodle.add(torus2);
+  const torus3 = new THREE.Mesh(torusGeom2, materials.peachStandard);
+  torus3.rotation.x = Math.PI;
+  torus3.position.copy(torus2.position);
+  doodle.add(torus3);
+  const torus4 = new THREE.Mesh(torusGeom3, materials.peachStandard);
+  torus4.position.copy(torus3.position);
+  torus4.position.y = torus3.position.y - torusGeom2.parameters.radius - 2 * torusGeom3.parameters.tube;
+  torus4.rotation.z = Math.PI / 2;
+  doodle.add(torus4);
+  const cylinder = new THREE.Mesh(cylinderGeom, materials.peachStandard);
+  cylinder.position.copy(torus4.position);
+  cylinder.position.x = torus4.position.x - torusGeom3.parameters.radius;
+  cylinder.position.y = torus4.position.y - 19;
+  doodle.add(cylinder);
+  const torus5 = new THREE.Mesh(torusGeom4, materials.peachStandard);
+  torus5.position.copy(cylinder.position);
+  torus5.position.x = cylinder.position.x - torusGeom4.parameters.radius;
+  torus5.position.y = cylinder.position.y - 20;
+  torus5.rotation.x = Math.PI;
+  doodle.add(torus5);
+  const torus6 = new THREE.Mesh(torusGeom3, materials.peachStandard);
+  torus6.position.copy(torus5.position);
+  torus6.position.x = torus5.position.x;
+  torus6.rotation.y = -Math.PI;
+  torus6.rotation.x = Math.PI;
+  torus6.position.y = torus5.position.y - torusGeom4.parameters.radius + 2 * thickness;
+  doodle.add(torus6);
+  const torus7 = new THREE.Mesh(torusGeom5, materials.black);
+  torus7.position.copy(torus6.position);
+  torus7.position.x = torus6.position.x - 110;
+  torus7.position.y = torus6.position.y - 4;
+  doodle.add(torus7);
+
+  const curve = new THREE.Curve();
+  
+  sculptureLeft.add(doodle);
+  
+  const roundedBoxGeom = roundEdgedBoxGeom(50, 40, 40, 4, 5);
+  roundedBoxGeom.computeVertexNormals();
+  roundedBoxGeom.translate(0, .5, 0);
+  
+  const roundedBox = new THREE.Mesh(roundedBoxGeom, materials.chestnut);
+  roundedBox.rotation.x = - 0.4 * Math.PI;
+  sculptureLeft.add(roundedBox);
+  
+  const sphereGeom = new THREE.SphereBufferGeometry(25, 20, 15);
+  
+  const sphereCheck = new THREE.Mesh(sphereGeom, materials.checkerboardPhong);
+  sphereCheck.position.set(-30, 70, 0);
+  sphereCheck.rotation.x = Math.PI / 1.2;
+  sculptureLeft.add(sphereCheck);
+  audioSpheres.push(sphereCheck);
+  
+  let sphere = new THREE.Mesh(sphereGeom, materials.peachStandard);
+  sphere.position.set(-45, 20, 0);
+  sphere.scale.set(0.65, 0.65, 0.65);
+  sculptureLeft.add(sphere);
+  
+  let sphere2 = new THREE.Mesh(sphereGeom, materials.green);
+  sphere2.position.set(30, 86.5, 0);
+  sphere2.scale.set(0.4, 0.4, 0.4);
+  sculptureLeft.add(sphere2);
+  
+  let sphere3 = new THREE.Mesh(sphereGeom, materials.black);
+  sphere3.position.set(8, -30, 0);
+  sphere3.scale.set(0.4, 0.4, 0.4);
+  sculptureLeft.add(sphere3);
+  
+  let sphere4 = new THREE.Mesh(sphereGeom, materials.black);
+  sphere4.position.set(40, 45, 0);
+  sphere4.scale.set(0.4, 0.4, 0.4);
+  sculptureLeft.add(sphere4);
+  
+  sculptureLeft.position.x = -210;
+  sculptureLeft.position.y = -70;
+  
+  scene.add(sculptureLeft);
+  
+}
+
+function initWalls() {
+  
+  // WALLS
+  
+  let cameraZ = camera.position.z;
+  let planeZ = -500;
+  let distance = cameraZ - planeZ;
+  let viewWidth = window.innerWidth;
+  let viewHeight = window.innerHeight;
+  let aspect = camera.aspect;
+  let vFov = camera.fov * Math.PI / 180;
+  let planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
+  let planeWidthAtDistance = planeHeightAtDistance * aspect;
+  
+  let planeWidth = planeWidthAtDistance;
+  let planeHeight = planeHeightAtDistance;
+  
+  let scale = 7;
+  let planeGeom = new THREE.PlaneBufferGeometry(scale * planeWidth, scale * planeHeight);
+  planeGeom.translate(0, 0.3 * planeHeight, 0);
+
+  let beigeBasic = new THREE.MeshBasicMaterial({color: 0x91827f})
+  let wallFront = new THREE.Mesh(planeGeom, beigeBasic);
+	wallFront.position.z = 300;
+	wallFront.position.y = 0;
+	wallFront.rotateY(Math.PI);
+	scene.add(wallFront);
+    
+  let wallWidth = planeGeom.parameters.width;
+  let wallHeight = planeGeom.parameters.width;
+  
+  let wallLeft = new THREE.Mesh(planeGeom, beigeBasic);
+  wallLeft.position.copy(wallFront.position);
+  wallLeft.position.x = wallFront.position.x - wallWidth / 2;
+  wallLeft.position.z = wallFront.position.z - wallWidth / 2;
+  wallLeft.rotation.y = Math.PI / 2;
+  
+  let wallRight = new THREE.Mesh(planeGeom, beigeBasic);
+  wallRight.position.copy(wallFront.position);
+  wallRight.position.x = wallFront.position.x + wallWidth / 2;
+  wallRight.position.z = wallFront.position.z - wallWidth / 2;
+  wallRight.rotation.y = -Math.PI / 2;
+  
+  scene.add(wallLeft, wallRight);
+  
+}
+
+function initCloth() {
+  
+  const SIZE = 4;
+  const RESOLUTION = 64;
+
+  const geometry = new THREE.PlaneBufferGeometry(SIZE, SIZE, RESOLUTION, RESOLUTION).rotateX(-Math.PI / 2);
+  
+  const material = new THREE.ShaderMaterial({
+    
+    lights: true,
+    side: THREE.DoubleSide,
+    extensions: {
+      derivatives: true,
+    },
+    defines: {
+      STANDARD: '',
+      PHYSICAL: '',
+    },
+    uniforms: {
+      ...THREE.ShaderLib.physical.uniforms,
+      roughness: {value: 0.0},
+      diffuse: {value: new THREE.Color(0xffffff)},
+    
+      amplitude: {value: 0.4},
+      frequency: {value: 0.55},
+      speed: {value: 0.3},
+      time: {value: 0.0},
+    },
+
+    vertexShader: monkeyPatch(THREE.ShaderChunk.meshphysical_vert, {
+      
+    header: `
+      uniform float time;
+      uniform float amplitude;
+      uniform float speed;
+      uniform float frequency;
+      varying vec2 vUv;
+
+      ${noise()}
+      
+      // the function which defines the displacement
+      float f(vec3 point) {
+        return noise(vec3(point.x * frequency, point.z * frequency, time * speed)) * amplitude;
+      }
+    `,
+    // adapted from http://tonfilm.blogspot.com/2007/01/calculate-normals-in-shader.html
+    main: `
+      vUv = uv;
+      float displacement = f(position);
+      vec3 displaced = position + normal * f(position);
+
+      float offset = ${SIZE / RESOLUTION};
+      vec3 neighbour1 = position + vec3(offset, 0, 0);
+      vec3 neighbour2 = position + vec3(0, 0, -offset);
+      vec3 displacedNeighbour1 = neighbour1 + normal * f(neighbour1);
+      vec3 displacedNeighbour2 = neighbour2 + normal * f(neighbour2);
+
+      // https://i.ya-webdesign.com/images/vector-normals-tangent-16.png
+      vec3 tangent = displacedNeighbour1 - displaced;
+      vec3 bitangent = displacedNeighbour2 - displaced;
+
+      // https://upload.wikimedia.org/wikipedia/commons/d/d2/Right_hand_rule_cross_product.svg
+      vec3 displacedNormal = normalize(cross(tangent, bitangent));
+    `,
+
+     '#include <defaultnormal_vertex>': THREE.ShaderChunk.defaultnormal_vertex.replace(
+      // transformedNormal will be used in the lighting calculations
+      'vec3 transformedNormal = objectNormal;',
+      `vec3 transformedNormal = displacedNormal;`
+      ),
+
+      // transformed is the output position
+      '#include <displacementmap_vertex>': `
+      transformed += normal * displacement;
+      `,
+    }),
+  
+    fragmentShader: THREE.ShaderChunk.meshphysical_frag,
+    
+  });
+  
+  let scale = 40;
+  cloth = new THREE.Mesh(geometry, material);
+  cloth.position.set(0, params.mirrorY - 100, 160);
+  cloth.rotation.y = Math.PI / 4;
+  cloth.scale.set(scale, scale, scale);
+  scene.add(cloth);
+  
+}
+
+function initPastilles() {
+  
+  const cylinderGeom = new THREE.CylinderBufferGeometry(14, 14, 5, 20);
+  const checkMat = materials.checkerboardPhong;
+  
+  let pastillesNum = 7;
+  
+  for (let i = 0; i < pastillesNum; i++) {
+    
+    let p = new THREE.Mesh(cylinderGeom, checkMat);
+    p.position.x = -110 + 35 * i;
+    p.position.y = Math.floor(Math.random() * (-120 - (-160)) - 180);
+    p.position.z = Math.floor(Math.random() * (50 - (20)) - 20);
+    p.rotation.x = Math.PI * Math.random();
+    p.rotation.y = Math.PI * Math.random();
+    audioPastilles.push(p);
+    scene.add(p);
+  }
+  
+}
+
+function generateCurve() {
+  
+  let points = getExportedPoints().wavyFramePoints;
+  
+  let scale = 7.75;
+
+  for (let i = 0; i < points.length; i++) {
+    
+    let x = points[i][0] * scale;
+    let y = points[i][1] * scale;
+    let z = points[i][2] * scale;
+    points[i] = new THREE.Vector3(x, z, -y);
+    
+  }
+ 
+  let curve =  new THREE.CatmullRomCurve3(points);
+  return curve;
+   
+}
+
+function initMirror() {
+  
+  // MIRROR WAVY FRAME
+  
+  let curve = generateCurve();
+  let segments = 240;
+  let tubeRadius = 2.0;
+  
+  let tubeGeom = new THREE.TubeBufferGeometry(curve, segments, tubeRadius, 4, true);
+  tubeGeom.rotateX(Math.PI / 2);
+      
+  let baseScale = 2;
+  let zFactor = -4;
+  let scaleXFactor = 0.3;
+  let scaleYFactor = 0.15;
+  let scaleZFactor = 0.15;
+  
+  let numFrames = 5;
+  
+  wavyFrame = new THREE.Group();
+  
+  for (let i = 0; i < numFrames; i++) {
+    
+    let frame = new THREE.Mesh(tubeGeom, materials.peachStandard);
+    frame.position.set(0, 0, 0 + i * zFactor);
+    frame.scale.x = baseScale + scaleXFactor * i;
+    frame.scale.y = baseScale + scaleYFactor * i;
+    frame.scale.z = baseScale + scaleZFactor * (i + 0.1 * i);
+    wavyFrame.add(frame);
+
+  }
+  
+  wavyFrame.position.set(0, params.mirrorY, 45);
+  scene.add(wavyFrame);
+  
+  // measurements of last (biggest) frame - for mirror dimensions
+  let frameChild = wavyFrame.children[numFrames - 1].geometry;
+  frameChild.computeBoundingBox();
+  let bBox = frameChild.boundingBox;
+  let frameWidth = (bBox.max.x - bBox.min.x) * (baseScale + scaleXFactor * (numFrames - 1));
+  let frameHeight = (bBox.max.y - bBox.min.y) * (baseScale + scaleXFactor * (numFrames - 1));
+  
+  // MIRROR REFLECTOR
+  
+  let WIDTH = window.innerWidth;
+  let HEIGHT = window.innerHeight;
+  
+  let mirrorWidth = 0.85 * frameWidth;
+  let mirrorHeight = 0.95 * frameHeight;
+  let mirrorGeom = new THREE.PlaneBufferGeometry(mirrorWidth, mirrorHeight);
+  
+  mirror = new THREE.Reflector(mirrorGeom, {
+    
+	  clipBias: 0.003,
+		textureWidth: WIDTH * window.devicePixelRatio,
+	  textureHeight: HEIGHT * window.devicePixelRatio,
+		color: 0xc97c7c
+    
+	});
+    
+  mirror.position.copy(wavyFrame.position);
+  mirror.position.y = wavyFrame.position.y + 0;
+  mirror.position.z = wavyFrame.position.z - 200;
+	scene.add(mirror);
+  
+}
+
+// AUDIO 
+
+function initAudio() {
+  
+  const audio = new Audio();
+  audio.src = audioURL;
+  audio.controls = true;
+  audio.autoplay = true;
+  audio.crossOrigin = "anonymous";
+  audio.loop = true;
+  document.body.appendChild(audio);
+  
+  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  
+  const source = audioCtx.createMediaElementSource(audio);
+  const volumeControl = audioCtx.createGain();
+  source.connect(audioCtx.destination);
+  source.connect(volumeControl);
+
+  analyser = audioCtx.createAnalyser();
+  volumeControl.connect(analyser);
+  analyser.connect(audioCtx.destination);
+  analyser.fftSize = 128;
+  
+  freqData = new Uint8Array(analyser.frequencyBinCount);
+  getAudioData(freqData);
+  
+  volumeControl.gain.value = audio.volume;
+   
+}
+
+function getAudioData(data) {
+  
+	let frequencyArray = splitFrenquencyArray(data, 3);
+
+	// Make average of frequency array
+	for (let i = 0; i < frequencyArray.length; i++) {
+    
+		let average = 0;
+
+		for (let j = 0; j < frequencyArray[i].length; j++) {
+      
+			average += frequencyArray[i][j];
+      
+		}
+    
+		audioData[i] = average / frequencyArray[i].length;
+    
+	}
+  
+	return audioData;
+  
+}
+
+function splitFrenquencyArray(arr, n) {
+  
+	let tab = Object.keys(arr).map(function(key) {
+    
+		return arr[key];
+    
+	});
+  
+	let len = tab.length;
+  let result = [];
+  let i = 0;
+
+	while (i < len) {
+    
+		let size = Math.ceil((len - i) / n--);
+		result.push(tab.slice(i, i + size));
+		i += size;
+    
+	}
+
+	return result;
+  
+}
+
+function abs(a) {
+  
+  return Math.abs(a);
+  
+}
+
+function render() {
+  
+  update();
+  renderer.render(scene, camera);
+  requestAnimationFrame(render);
+	
+}
+
+function update() {
+      
+  cloth.material.uniforms.time.value = 0.1 + 3.0 * mouseX;
+  cloth.material.uniforms.diffuse.value.g = 0.0 + 1.0 * abs(mouseX * mouseX * mouseX);
+  cloth.material.uniforms.diffuse.value.r = 0.0 + 1.0 * abs(mouseX * mouseX * mouseX);
+  cloth.material.uniforms.diffuse.value.b = 0.0 + 1.0 * abs(mouseX * mouseX * mouseX);
+    
+  mirror.rotation.y = 0.2 * Math.PI * mouseX;
+  wavyFrame.rotation.y = 0.2 * Math.PI * mouseX;
+  
+  if (isAudioPlaying) {
+    
+    updateAudio();
+    sculptureLeft.position.x = -210 * Math.cos(1.5 * Math.PI * mouseX);
+    sculptureLeft.position.z = -280 * Math.sin(1.5 *Math.PI * mouseX);
+  
+    sculptureRight.position.x = 210 * Math.cos(1.5 * Math.PI * mouseX);
+    sculptureRight.position.z = 290 * Math.sin(1.5 *Math.PI * mouseX);
+    
+  }
+  
+}
+
+function updateAudio() {
+  
+  getAudioData(freqData);
+  analyser.getByteFrequencyData(freqData);
+  
+  audioSpheres.forEach(sphere => {
+    
+    sphere.scale.x = 0.9 + audioData[0] / 500;
+    sphere.scale.y = 0.9 + audioData[0] / 500;
+    sphere.scale.z = 0.9 + audioData[0] / 500;
+  
+  });
+  
+  // audioPastilles.forEach((pastille, i) => (pastille.position.y = audioData[0] / 10 - 0.9 * 170));
+  
+  audioPastilles.forEach(pastille => {
+    
+    pastille.scale.x = 0.9 + audioData[0] / 500;
+    pastille.scale.y = 0.9 + audioData[0] / 500;
+    pastille.scale.z = 0.9 + audioData[0] / 500;
+  
+  });
+  
+}
+
+// *** EVENTS ***
+
+function onMouseMove(event) {
+  
+  mouseX = (event.clientX / window.innerWidth) * 2 - 1;
+  
+  radialGradientChange(bgColors, container);
+  
+}
+
+function onTouchMove(event) {
+    
+	let x = event.changedTouches[0].clientX;
+  mouseX = (x / window.innerWidth) * 2 - 1;
+  
+  radialGradientChange(bgColors, container);
+      
+}
+
+function onWindowResize() {
+  
+  const renderTarget = mirror.getRenderTarget();
+  renderTarget.setSize(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  
+}
+
+function onClick(e) {
+  
+  e.preventDefault();
+
+  initAudio();
+  isAudioPlaying = !isAudioPlaying;
+  
+  e.target.remove();
+  
+}
+
+// BACKGROUND GRADIENT
+
+function radialGradientChange(colorsArr, element) {
+  
+  let colors = colorsArr;
+
+  element.style.background = `radial-gradient(circle, 
+rgba(
+${colors[0][0] - (colors[0][0]-colors[1][0]) * Math.abs(mouseX)},
+${colors[0][1] - (colors[0][1]-colors[1][1]) * Math.abs(mouseX)},
+${colors[0][2] - (colors[0][2]-colors[1][2]) * Math.abs(mouseX)},
+1) 0%, 
+rgba(
+${colors[2][0] - (colors[2][0]-colors[3][0]) * Math.abs(mouseX)},
+${colors[2][1] - (colors[2][1]-colors[3][1]) * Math.abs(mouseX)},
+${colors[2][2] - (colors[2][2]-colors[3][2]) * Math.abs(mouseX)},
+1) 100%)`;
+
+}
\ No newline at end of file
diff --git a/moving-mirror-web-audio-api-and-three-js/dist/style.css b/moving-mirror-web-audio-api-and-three-js/dist/style.css
new file mode 100644
index 0000000..7fa46c6
--- /dev/null
+++ b/moving-mirror-web-audio-api-and-three-js/dist/style.css
@@ -0,0 +1,162 @@
+:root {
+  --dolphin: rgb(184, 189, 189);
+  --pink: rgb(230, 146, 181);
+  --strongpink: rgb(255, 113, 193);
+  --black: rgb(0, 0, 0);
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  font-size: clamp(100%, 1rem + 2vw, 16px);
+  font-family: Arial;
+  background: radial-gradient(circle, var(--pink) 0%, var(--dolphin) 80%, var(--dolphin) 100%);
+  touch-action: pan-x;
+}
+
+#overlay-container {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background: radial-gradient(circle, var(--pink) 0%, var(--dolphin) 80%, var(--dolphin) 100%);
+  opacity: 1.0;
+}
+
+#scene-container {
+  position: absolute;
+  background: radial-gradient(circle, var(--pink) 0%, rgb(140, 147, 147) 80%, rgb(121, 150, 150) 100%);
+  opacity: 0.0;
+}
+
+button {
+  position: absolute;
+  font-size: 1.2em;
+  background: rgba(255, 166, 210, 0.0);
+  margin: 0em;
+  padding: 0.25em 3.5em;
+  font-size: 1.1em;
+  font-weight: bold;
+  border: 1.25px solid var(--black);
+  border-radius: 50%;
+  color: var(--black);
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+button:hover {
+  background: rgba(255, 166, 210, 0.75);
+}
+
+#btn-play {
+  margin: 0em;
+  font-size: 1.25em;
+  opacity: 1;
+  z-index: 5;
+  opacity: 0;
+  margin: 1.75em 1.75em;
+  padding: 1em;
+  transform: rotate(-20deg);
+}
+
+audio {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  opacity: 0.5;
+  transition: 0.2s;
+}
+
+audio:hover {
+  opacity: 1.0;
+}
+
+#credits {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+  padding: 0.75em 1em;
+  text-align: center;
+  color: var(--black);
+  opacity: 0;
+  font-size: 1.1em;
+}
+
+a {
+  color: var(--black);
+  text-decoration: none;
+}
+
+#credits a::before {
+  content: '';
+  display: inline-block;
+  position: relative;
+  transform-origin: center center;
+  top: -0.0325em;
+  height: 0.65em;
+  width: 0.65em;
+  background-color: var(--black);
+  color: var(--black);
+  border-radius: 100%;
+  margin-right: 0.35em;
+}
+
+#credits a:hover::before {
+  animation: 1.5s rotate ease-in-out infinite;
+}
+
+@keyframes rotate {
+  0% { transform: rotateY(0deg); }
+  100% { transform: rotateY(360deg); }
+}
+
+@keyframes fadeOut {
+  
+  0% { opacity: 1.0;}
+  100% { opacity: 0;}
+
+}
+
+@keyframes fadeIn {
+  
+  0% { opacity: 0.0;}
+  100% { opacity: 1;}
+
+}
+
+@keyframes fadeIn2 {
+  
+  0% { opacity: 0.0;}
+  50% { opacity: 0.0;}
+  75% { opacity: 0.0;}
+  100% { opacity: 1;}
+
+}
+
+@keyframes fadeIn3 {
+  
+  0% { opacity: 0.0;}
+  50% { opacity: 0.0;}
+  85% { opacity: 0.0;}
+  100% { opacity: 1;}
+
+}
+
+@media(max-width: 800px) {
+  
+  audio {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.0;
+    transition: 0.2s;
+  }
+  
+  #credits {
+    opacity: 0;
+  }
+
+}
\ No newline at end of file
diff --git a/moving-mirror-web-audio-api-and-three-js/license.txt b/moving-mirror-web-audio-api-and-three-js/license.txt
new file mode 100644
index 0000000..844313a
--- /dev/null
+++ b/moving-mirror-web-audio-api-and-three-js/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Anna the Scavenger (https://codepen.io/ScavengerFrontend/pen/BazjGJR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/moving-mirror-web-audio-api-and-three-js/src/index.html b/moving-mirror-web-audio-api-and-three-js/src/index.html
new file mode 100644
index 0000000..7d7f795
--- /dev/null
+++ b/moving-mirror-web-audio-api-and-three-js/src/index.html
@@ -0,0 +1,753 @@
+<!-- ✨ - Move your mouse over the scene ✨ -->
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script> 
+
+<div id="overlay-container">
+</div>
+<div id="scene-container">
+</div>
+
+<button id="btn-play">CLICK HERE</button>
+<div id="credits">
+   <a href="https://codepen.io/ScavengerFrontend/" target="_blank">See More</a>
+</div>
+
+<script id="checkerboardPhong-vs" type="x-shader/x-vertex">
+  
+  varying vec2 vUv;
+  varying vec3 Normal;
+  varying vec3 Position;
+
+  void main() {
+
+    vUv = uv;
+    Normal = normalize(normalMatrix * normal);
+    Position = vec3(modelViewMatrix * vec4(position, 1.0));
+    
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
+
+}
+  
+</script>
+
+<script id="checkerboardPhong-fs" type="x-shader/x-fragment">
+  
+// Antialiased checkerboard - http://www.yaldex.com/open-gl/ch17lev1sec5.html
+  
+  varying vec2 vUv;
+  varying vec3 Normal;
+  varying vec3 Position;
+
+  uniform vec3 Ka;
+  uniform vec3 Kd;
+  uniform vec3 Ks;
+  uniform vec4 LightPosition;
+  uniform vec3 LightIntensity;
+  
+  vec3 phong(vec3 col) {
+    
+    float Shininess = 100.0;
+        
+    vec3 n = normalize(Normal);
+    vec3 s = normalize(vec3(LightPosition) - Position);
+    vec3 v = normalize(vec3(-Position));
+    vec3 r = reflect(-s, n);
+
+    vec3 ambient = col;
+    vec3 diffuse = Kd * max(dot(s, n), 0.0);
+    vec3 specular = Ks * pow(max(dot(r, v), 0.0), Shininess);
+
+    return LightIntensity * (ambient + diffuse + specular);
+      
+  }
+
+  void main() {
+    
+    vec3 color;
+    vec3 color1 = vec3(0.0, 0.0, 0.0);
+    vec3 color2 = vec3(1.0, 1.0, 1.0);
+    vec3 avgColor = vec3(0.8, 0.8, 0.8);
+    float scale = 14.0;
+
+    // Determine the width of the projection of one pixel into s-t space
+    vec2 fw = fwidth(vUv);
+
+    // Determine the amount of fuzziness
+    vec2 fuzz = fw * scale * 1.125;
+
+    float fuzzMax = max(fuzz.s, fuzz.t);
+
+    // Determine the position in the checkerboard pattern
+    vec2 checkPos = fract(vUv * scale);
+
+    if (fuzzMax < 0.5) {
+      
+      // If the filter width is small enough, compute the pattern color
+      vec2 p = smoothstep(vec2(0.5), fuzz + vec2(0.5), checkPos) + (1.0 - smoothstep(vec2(0.0), fuzz, checkPos));
+
+      color = mix(color1, color2, p.x * p.y + (1.0 - p.x) * (1.0 - p.y));
+
+      // Fade in the average color when we get close to the limit
+      color = mix(color, avgColor, smoothstep(0.125, 0.5, fuzzMax));
+      
+    } else {
+      
+     // Otherwise, use only the average color
+      color = avgColor;
+    
+    }
+
+    gl_FragColor = vec4(phong(color), 1.);
+   
+  }
+  
+</script>
+
+<script>
+  
+function roundEdgedBoxGeom(width, height, depth, radius0, smoothness) {
+  
+  let shape = new THREE.Shape();
+  let eps = 0.00001;
+  let radius = radius0 - eps;
+  shape.absarc(eps, eps, eps, -Math.PI / 2, -Math.PI, true);
+  shape.absarc(eps, height - radius * 2, eps, Math.PI, Math.PI / 2, true);
+  shape.absarc(width - radius * 2, height - radius * 2, eps, Math.PI / 2, 0, true);
+  shape.absarc(width - radius * 2, eps, eps, 0, -Math.PI / 2, true);
+  
+  let geometry = new THREE.ExtrudeBufferGeometry(shape, {
+    
+    depth: depth - radius0 * 2,
+    bevelEnabled: true,
+    bevelSegments: smoothness * 2,
+    steps: 1,
+    bevelSize: radius,
+    bevelThickness: radius0,
+    curveSegments: smoothness
+    
+  });
+
+  geometry.center();
+
+  return geometry;
+
+}
+
+</script>
+
+<script>
+  
+function initMaterials() {
+  
+  const white = new THREE.MeshPhongMaterial({
+    color: 0xffffff,
+    // color: 0xffe9c9,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const green = new THREE.MeshPhongMaterial({
+    color: 0x6e9377,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const chestnut = new THREE.MeshPhongMaterial({
+    color: 0x6b1300,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const pink = new THREE.MeshPhongMaterial({
+    color: 0xff84bd,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const peach = new THREE.MeshPhongMaterial({
+    color: 0xff9977,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const grey = new THREE.MeshPhongMaterial({
+    color: 0x8e8e8e,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const black = new THREE.MeshPhongMaterial({
+    color: 0x000000,
+    shininess: 100,
+    specular: 0x383636
+  });
+  
+  const peachStandard = new THREE.MeshStandardMaterial({
+    color: 0x444444,
+    emissive: 0xff586b,
+    roughness: 0.0,
+    metalness: 0.2
+  });
+  
+  let uniforms = {
+    
+    Ka: { value: new THREE.Vector3(0.9, 0.9, 0.9) },
+    Kd: { value: new THREE.Vector3(0.3, 0.0, 0.15) },
+    Ks: { value: new THREE.Vector3(0.75, 0.75, 0.75) },
+    LightIntensity: { value: new THREE.Vector4(0.75, 0.75, 0.75, 1.0) },
+    LightPosition: { value: new THREE.Vector4(0, 10, -20, 1.0) },
+  
+  };
+  
+  const vertexShader = document.getElementById("checkerboardPhong-vs").text;
+  const fragmentShader = document.getElementById("checkerboardPhong-fs").text;
+  
+  const checkerboardPhong = new THREE.ShaderMaterial({
+      uniforms : uniforms,
+      vertexShader : vertexShader,
+      fragmentShader : fragmentShader,
+      side: THREE.DoubleSide
+  });
+  
+  return {
+  
+    white,
+    peach,
+    peachStandard,
+    pink, 
+    chestnut,
+    green,
+    grey,
+    black,
+    checkerboardPhong
+    
+  }
+  
+}
+  
+</script>
+
+<script>
+
+// https://codepen.io/marco_fugaro/pen/xxZWPWJ
+// UTILS FUNCTIONS
+  
+function monkeyPatch(shader, { defines = '', header = '', main = '', ...replaces }) {
+  let patchedShader = shader
+
+  const replaceAll = (str, find, rep) => str.split(find).join(rep)
+  Object.keys(replaces).forEach((key) => {
+    patchedShader = replaceAll(patchedShader, key, replaces[key])
+  })
+
+  patchedShader = patchedShader.replace(
+    'void main() {',
+    `
+    ${header}
+    void main() {
+      ${main}
+    `
+  )
+
+  return `
+    ${defines}
+    ${patchedShader}
+  `
+}
+
+// from https://github.com/hughsk/glsl-noise/blob/master/simplex/3d.glsl
+function noise() {
+  return `
+    //
+    // Description : Array and textureless GLSL 2D/3D/4D simplex
+    //               noise functions.
+    //      Author : Ian McEwan, Ashima Arts.
+    //  Maintainer : ijm
+    //     Lastmod : 20110822 (ijm)
+    //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+    //               Distributed under the MIT License. See LICENSE file.
+    //               https://github.com/ashima/webgl-noise
+    //
+
+    vec3 mod289(vec3 x) {
+      return x - floor(x * (1.0 / 289.0)) * 289.0;
+    }
+
+    vec4 mod289(vec4 x) {
+      return x - floor(x * (1.0 / 289.0)) * 289.0;
+    }
+
+    vec4 permute(vec4 x) {
+         return mod289(((x*34.0)+1.0)*x);
+    }
+
+    vec4 taylorInvSqrt(vec4 r)
+    {
+      return 1.79284291400159 - 0.85373472095314 * r;
+    }
+
+    float noise(vec3 v)
+      {
+      const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+      const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+    // First corner
+      vec3 i  = floor(v + dot(v, C.yyy) );
+      vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+    // Other corners
+      vec3 g = step(x0.yzx, x0.xyz);
+      vec3 l = 1.0 - g;
+      vec3 i1 = min( g.xyz, l.zxy );
+      vec3 i2 = max( g.xyz, l.zxy );
+
+      //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+      //   x1 = x0 - i1  + 1.0 * C.xxx;
+      //   x2 = x0 - i2  + 2.0 * C.xxx;
+      //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+      vec3 x1 = x0 - i1 + C.xxx;
+      vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+      vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+    // Permutations
+      i = mod289(i);
+      vec4 p = permute( permute( permute(
+                 i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+               + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+               + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+    // Gradients: 7x7 points over a square, mapped onto an octahedron.
+    // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+      float n_ = 0.142857142857; // 1.0/7.0
+      vec3  ns = n_ * D.wyz - D.xzx;
+
+      vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+      vec4 x_ = floor(j * ns.z);
+      vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+      vec4 x = x_ *ns.x + ns.yyyy;
+      vec4 y = y_ *ns.x + ns.yyyy;
+      vec4 h = 1.0 - abs(x) - abs(y);
+
+      vec4 b0 = vec4( x.xy, y.xy );
+      vec4 b1 = vec4( x.zw, y.zw );
+
+      //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+      //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+      vec4 s0 = floor(b0)*2.0 + 1.0;
+      vec4 s1 = floor(b1)*2.0 + 1.0;
+      vec4 sh = -step(h, vec4(0.0));
+
+      vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+      vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+      vec3 p0 = vec3(a0.xy,h.x);
+      vec3 p1 = vec3(a0.zw,h.y);
+      vec3 p2 = vec3(a1.xy,h.z);
+      vec3 p3 = vec3(a1.zw,h.w);
+
+    //Normalise gradients
+      vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+      p0 *= norm.x;
+      p1 *= norm.y;
+      p2 *= norm.z;
+      p3 *= norm.w;
+
+    // Mix final noise value
+      vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+      m = m * m;
+      return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
+                                    dot(p2,x2), dot(p3,x3) ) );
+      }
+
+  `
+}
+  
+  
+  
+</script>
+
+<script>
+  
+function getExportedPoints() {
+  
+  let wavyFramePoints = [
+    [2.1892566680908203, 5.229923725128174, 0.0] ,
+[2.237551212310791, 5.168440341949463, 0.0] ,
+[2.27828311920166, 5.106956958770752, 0.0] ,
+[2.3092093467712402, 5.045472621917725, 0.0] ,
+[2.3286285400390625, 4.983988285064697, 0.0] ,
+[2.335470676422119, 4.922504901885986, 0.0] ,
+[2.329359531402588, 4.861020565032959, 0.0] ,
+[2.31063175201416, 4.799536228179932, 0.0] ,
+[2.2803173065185547, 4.738052845001221, 0.0] ,
+[2.240086555480957, 4.67656946182251, 0.0] ,
+[2.192152976989746, 4.615085124969482, 0.0] ,
+[2.1391563415527344, 4.553600788116455, 0.0] ,
+[2.0840139389038086, 4.492117404937744, 0.0] ,
+[2.029761791229248, 4.430634021759033, 0.0] ,
+[1.9793866872787476, 4.369149684906006, 0.0] ,
+[1.9356614351272583, 4.3076653480529785, 0.0] ,
+[1.9009937047958374, 4.246181964874268, 0.0] ,
+[1.8772917985916138, 4.184698581695557, 0.0] ,
+[1.8658610582351685, 4.123214244842529, 0.0] ,
+[1.8673301935195923, 4.061729907989502, 0.0] ,
+[1.881618618965149, 4.000246524810791, 0.0] ,
+[1.9079395532608032, 3.9387621879577637, 0.0] ,
+[1.944844365119934, 3.8772788047790527, 0.0] ,
+[1.9903007745742798, 3.8157944679260254, 0.0] ,
+[2.041806221008301, 3.7543110847473145, 0.0] ,
+[2.0965256690979004, 3.692826747894287, 0.0] ,
+[2.15144681930542, 3.631343364715576, 0.0] ,
+[2.203545570373535, 3.569859027862549, 0.0] ,
+[2.249953269958496, 3.508375644683838, 0.0] ,
+[2.288115978240967, 3.4468913078308105, 0.0] ,
+[2.315932273864746, 3.385406970977783, 0.0] ,
+[2.3318710327148438, 3.3239235877990723, 0.0] ,
+[2.3350539207458496, 3.2624402046203613, 0.0] ,
+[2.3253068923950195, 3.200955867767334, 0.0] ,
+[2.303165912628174, 3.1394715309143066, 0.0] ,
+[2.2698497772216797, 3.0779881477355957, 0.0] ,
+[2.2271933555603027, 3.0165038108825684, 0.0] ,
+[2.177544116973877, 2.9550204277038574, 0.0] ,
+[2.123635768890381, 2.89353609085083, 0.0] ,
+[2.068436622619629, 2.832052707672119, 0.0] ,
+[2.0149850845336914, 2.770569324493408, 0.0] ,
+[1.9662235975265503, 2.709084987640381, 0.0] ,
+[1.9248372316360474, 2.6476006507873535, 0.0] ,
+[1.8931039571762085, 2.5861172676086426, 0.0] ,
+[1.8727713823318481, 2.5246329307556152, 0.0] ,
+[1.8649581670761108, 2.4631495475769043, 0.0] ,
+[1.870094895362854, 2.401665210723877, 0.0] ,
+[1.887898564338684, 2.3401808738708496, 0.0] ,
+[1.9173892736434937, 2.2786974906921387, 0.0] ,
+[1.956943392753601, 2.2172141075134277, 0.0] ,
+[2.004383087158203, 2.1557297706604004, 0.0] ,
+[2.0570969581604004, 2.0942463874816895, 0.0] ,
+[2.1121826171875, 2.0327625274658203, 0.0] ,
+[2.1666078567504883, 1.9712786674499512, 0.0] ,
+[2.217376232147217, 1.909794807434082, 0.0] ,
+[2.261692523956299, 1.848310947418213, 0.0] ,
+[2.297116756439209, 1.7868270874023438, 0.0] ,
+[2.321699619293213, 1.7253432273864746, 0.0] ,
+[2.334087371826172, 1.6638593673706055, 0.0] ,
+[2.333597183227539, 1.6023755073547363, 0.0] ,
+[2.3202571868896484, 1.5408916473388672, 0.0] ,
+[2.2948012351989746, 1.479407787322998, 0.0] ,
+[2.2586312294006348, 1.417923927307129, 0.0] ,
+[2.213737964630127, 1.3564400672912598, 0.0] ,
+[2.1625924110412598, 1.2949562072753906, 0.0] ,
+[2.1080117225646973, 1.2334718704223633, 0.0] ,
+[2.052999496459961, 1.1719884872436523, 0.0] ,
+[2.0005850791931152, 1.110504150390625, 0.0] ,
+[1.9536539316177368, 1.0490202903747559, 0.0] ,
+[1.9147895574569702, 0.9875364303588867, 0.0] ,
+[1.8861318826675415, 0.9260525703430176, 0.0] ,
+[1.8692578077316284, 0.8645687103271484, 0.0] ,
+[1.865097165107727, 0.8030848503112793, 0.0] ,
+[1.8738785982131958, 0.7416009902954102, 0.0] ,
+[1.895119309425354, 0.680117130279541, 0.0] ,
+[1.927648663520813, 0.6186332702636719, 0.0] ,
+[1.9696770906448364, 0.5571494102478027, 0.0] ,
+[2.018889904022217, 0.4956655502319336, 0.0] ,
+[2.0725784301757812, 0.43418169021606445, 0.0] ,
+[2.127786159515381, 0.3726978302001953, 0.0] ,
+[2.1814746856689453, 0.31121397018432617, 0.0] ,
+[2.2306876182556152, 0.24973011016845703, 0.0] ,
+[2.2727155685424805, 0.1882462501525879, 0.0] ,
+[2.3052453994750977, 0.12676191329956055, 0.0] ,
+[2.3264856338500977, 0.0652780532836914, 0.0] ,
+[2.3352675437927246, 0.0037941932678222656, 0.0] ,
+[2.331106662750244, -0.057689666748046875, 0.0] ,
+[2.31423282623291, -0.11917352676391602, 0.0] ,
+[2.2855749130249023, -0.18065738677978516, 0.0] ,
+[2.2467103004455566, -0.2421412467956543, 0.0] ,
+[2.1997790336608887, -0.30362510681152344, 0.0] ,
+[2.147364616394043, -0.3651089668273926, 0.0] ,
+[2.0923523902893066, -0.4265928268432617, 0.0] ,
+[2.037771701812744, -0.48807668685913086, 0.0] ,
+[1.9866267442703247, -0.549560546875, 0.0] ,
+[1.941733479499817, -0.6110444068908691, 0.0] ,
+[1.9055629968643188, -0.6725282669067383, 0.0] ,
+[1.880107045173645, -0.7340121269226074, 0.0] ,
+[1.8667670488357544, -0.7954959869384766, 0.0] ,
+[1.8662773370742798, -0.8569803237915039, 0.0] ,
+[1.8786646127700806, -0.918464183807373, 0.0] ,
+[1.9032474756240845, -0.9799480438232422, 0.0] ,
+[1.9386721849441528, -1.0414314270019531, 0.0] ,
+[1.9829884767532349, -1.1029157638549805, 0.0] ,
+[2.0337562561035156, -1.1643996238708496, 0.0] ,
+[2.088181972503662, -1.2258834838867188, 0.0] ,
+[2.1432671546936035, -1.287367343902588, 0.0] ,
+[2.195981502532959, -1.348851203918457, 0.0] ,
+[2.2434210777282715, -1.4103350639343262, 0.0] ,
+[2.282975196838379, -1.4718189239501953, 0.0] ,
+[2.3124656677246094, -1.5333027839660645, 0.0] ,
+[2.3302693367004395, -1.5947866439819336, 0.0] ,
+[2.3354063034057617, -1.6562705039978027, 0.0] ,
+[2.3275928497314453, -1.71775484085083, 0.0] ,
+[2.307260036468506, -1.779238224029541, 0.0] ,
+[2.275527000427246, -1.8407220840454102, 0.0] ,
+[2.234140396118164, -1.9022059440612793, 0.0] ,
+[2.1853795051574707, -1.9636898040771484, 0.0] ,
+[2.131927490234375, -2.025174140930176, 0.0] ,
+[2.076728343963623, -2.086658000946045, 0.0] ,
+[2.022819995880127, -2.148141860961914, 0.0] ,
+[1.9731711149215698, -2.209625720977783, 0.0] ,
+[1.9305142164230347, -2.2711095809936523, 0.0] ,
+[1.8971983194351196, -2.3325934410095215, 0.0] ,
+[1.875057339668274, -2.3940773010253906, 0.0] ,
+[1.8653103113174438, -2.4555611610412598, 0.0] ,
+[1.868493676185608, -2.517045021057129, 0.0] ,
+[1.8844319581985474, -2.578528881072998, 0.0] ,
+[1.9122482538223267, -2.6400132179260254, 0.0] ,
+[1.9504109621047974, -2.7014970779418945, 0.0] ,
+[1.9968191385269165, -2.7629809379577637, 0.0] ,
+[2.048917770385742, -2.8244643211364746, 0.0] ,
+[2.1038384437561035, -2.8859481811523438, 0.0] ,
+[2.158557891845703, -2.947432518005371, 0.0] ,
+[2.210063934326172, -3.0089163780212402, 0.0] ,
+[2.2555203437805176, -3.0704002380371094, 0.0] ,
+[2.2924251556396484, -3.1318840980529785, 0.0] ,
+[2.3187460899353027, -3.1933679580688477, 0.0] ,
+[2.3330345153808594, -3.254851818084717, 0.0] ,
+[2.334503650665283, -3.316335678100586, 0.0] ,
+[2.3230724334716797, -3.3778200149536133, 0.0] ,
+[2.299370765686035, -3.439303398132324, 0.0] ,
+[2.264702796936035, -3.5007872581481934, 0.0] ,
+[2.220977783203125, -3.5622711181640625, 0.0] ,
+[2.170602321624756, -3.62375545501709, 0.0] ,
+[2.1163501739501953, -3.685239315032959, 0.0] ,
+[2.0612082481384277, -3.746723175048828, 0.0] ,
+[2.008211135864258, -3.808206558227539, 0.0] ,
+[1.9602779150009155, -3.869690418243408, 0.0] ,
+[1.9200466871261597, -3.9311742782592773, 0.0] ,
+[1.8897329568862915, -3.9926581382751465, 0.0] ,
+[1.8710047006607056, -4.054141998291016, 0.0] ,
+[1.8648935556411743, -4.115625858306885, 0.0] ,
+[1.87173593044281, -4.177109718322754, 0.0] ,
+[1.8911548852920532, -4.238593578338623, 0.0] ,
+[1.9220815896987915, -4.300077438354492, 0.0] ,
+[1.9628132581710815, -4.3615617752075195, 0.0] ,
+[2.0111074447631836, -4.423045635223389, 0.0] ,
+[2.0643057823181152, -4.4845290184021, 0.0] ,
+[2.119478702545166, -4.546012878417969, 0.0] ,
+[2.1735897064208984, -4.607496738433838, 0.0] ,
+[2.2236595153808594, -4.668980598449707, 0.0] ,
+[2.2669315338134766, -4.730464935302734, 0.0] ,
+[2.301023483276367, -4.7919487953186035, 0.0] ,
+[2.3240580558776855, -4.853432655334473, 0.0] ,
+[2.3347678184509277, -4.914916515350342, 0.0] ,
+[2.3325629234313965, -4.976399898529053, 0.0] ,
+[2.3175644874572754, -5.03788423538208, 0.0] ,
+[2.2905988693237305, -5.099368095397949, 0.0] ,
+[2.25314998626709, -5.160851955413818, 0.0] ,
+[2.207279682159424, -5.2223358154296875, 0.0] ,
+[2.155513286590576, -5.283819675445557, 0.0] ,
+[-2.042383909225464, -5.283820152282715, 0.0] ,
+[-2.1676294803619385, -5.260290145874023, 0.0] ,
+[-2.219395637512207, -5.198806285858154, 0.0] ,
+[-2.265265941619873, -5.137322425842285, 0.0] ,
+[-2.3027148246765137, -5.075838565826416, 0.0] ,
+[-2.3296806812286377, -5.014354705810547, 0.0] ,
+[-2.3446788787841797, -4.9528703689575195, 0.0] ,
+[-2.346883773803711, -4.891386985778809, 0.0] ,
+[-2.3361740112304688, -4.8299031257629395, 0.0] ,
+[-2.3131394386291504, -4.76841926574707, 0.0] ,
+[-2.2790474891662598, -4.706935405731201, 0.0] ,
+[-2.2357754707336426, -4.645451545715332, 0.0] ,
+[-2.1857059001922607, -4.583967208862305, 0.0] ,
+[-2.1315948963165283, -4.5224833488464355, 0.0] ,
+[-2.0764217376708984, -4.460999488830566, 0.0] ,
+[-2.023223400115967, -4.3995161056518555, 0.0] ,
+[-1.9749292135238647, -4.338032245635986, 0.0] ,
+[-1.9341976642608643, -4.276547908782959, 0.0] ,
+[-1.9032707214355469, -4.21506404876709, 0.0] ,
+[-1.8838518857955933, -4.153580188751221, 0.0] ,
+[-1.8770097494125366, -4.092096328735352, 0.0] ,
+[-1.8831208944320679, -4.030612468719482, 0.0] ,
+[-1.9018491506576538, -3.9691286087036133, 0.0] ,
+[-1.932162880897522, -3.907644748687744, 0.0] ,
+[-1.9723941087722778, -3.846160888671875, 0.0] ,
+[-2.020327091217041, -3.784677028656006, 0.0] ,
+[-2.073324203491211, -3.723193645477295, 0.0] ,
+[-2.1284661293029785, -3.661709785461426, 0.0] ,
+[-2.182718515396118, -3.6002259254455566, 0.0] ,
+[-2.2330939769744873, -3.5387415885925293, 0.0] ,
+[-2.2768189907073975, -3.47725772857666, 0.0] ,
+[-2.3114869594573975, -3.415773868560791, 0.0] ,
+[-2.335188627243042, -3.35429048538208, 0.0] ,
+[-2.3466196060180664, -3.2928061485290527, 0.0] ,
+[-2.3451504707336426, -3.2313222885131836, 0.0] ,
+[-2.330862045288086, -3.1698384284973145, 0.0] ,
+[-2.3045411109924316, -3.1083545684814453, 0.0] ,
+[-2.267636299133301, -3.046870708465576, 0.0] ,
+[-2.222179889678955, -2.985386848449707, 0.0] ,
+[-2.1706740856170654, -2.923902988433838, 0.0] ,
+[-2.1159543991088867, -2.8624186515808105, 0.0] ,
+[-2.0610337257385254, -2.8009347915649414, 0.0] ,
+[-2.0089354515075684, -2.7394514083862305, 0.0] ,
+[-1.9625272750854492, -2.6779675483703613, 0.0] ,
+[-1.9243645668029785, -2.616483688354492, 0.0] ,
+[-1.8965482711791992, -2.554999351501465, 0.0] ,
+[-1.8806097507476807, -2.4935154914855957, 0.0] ,
+[-1.8774263858795166, -2.4320316314697266, 0.0] ,
+[-1.8871736526489258, -2.3705477714538574, 0.0] ,
+[-1.9093146324157715, -2.3090639114379883, 0.0] ,
+[-1.942630410194397, -2.2475805282592773, 0.0] ,
+[-1.9852873086929321, -2.18609619140625, 0.0] ,
+[-2.0349366664886475, -2.124612331390381, 0.0] ,
+[-2.0888447761535645, -2.0631284713745117, 0.0] ,
+[-2.1440441608428955, -2.0016446113586426, 0.0] ,
+[-2.197495937347412, -1.9401607513427734, 0.0] ,
+[-2.2462570667266846, -1.8786768913269043, 0.0] ,
+[-2.2876434326171875, -1.8171930313110352, 0.0] ,
+[-2.3193767070770264, -1.7557086944580078, 0.0] ,
+[-2.339709520339966, -1.6942253112792969, 0.0] ,
+[-2.347522735595703, -1.6327414512634277, 0.0] ,
+[-2.342386245727539, -1.5712575912475586, 0.0] ,
+[-2.32458233833313, -1.5097737312316895, 0.0] ,
+[-2.2950916290283203, -1.4482898712158203, 0.0] ,
+[-2.255537748336792, -1.3868060111999512, 0.0] ,
+[-2.2080979347229004, -1.325322151184082, 0.0] ,
+[-2.155383825302124, -1.2638378143310547, 0.0] ,
+[-2.1002984046936035, -1.2023544311523438, 0.0] ,
+[-2.045872926712036, -1.1408700942993164, 0.0] ,
+[-1.9951049089431763, -1.0793862342834473, 0.0] ,
+[-1.9507886171340942, -1.0179023742675781, 0.0] ,
+[-1.9153640270233154, -0.956418514251709, 0.0] ,
+[-1.8907811641693115, -0.8949346542358398, 0.0] ,
+[-1.8783937692642212, -0.8334507942199707, 0.0] ,
+[-1.8788834810256958, -0.7719669342041016, 0.0] ,
+[-1.892223596572876, -0.7104830741882324, 0.0] ,
+[-1.9176793098449707, -0.6489992141723633, 0.0] ,
+[-1.9538497924804688, -0.5875153541564941, 0.0] ,
+[-1.9987431764602661, -0.526031494140625, 0.0] ,
+[-2.0498881340026855, -0.46454763412475586, 0.0] ,
+[-2.1044692993164062, -0.4030637741088867, 0.0] ,
+[-2.1594812870025635, -0.3415799140930176, 0.0] ,
+[-2.211895704269409, -0.28009605407714844, 0.0] ,
+[-2.258826732635498, -0.2186121940612793, 0.0] ,
+[-2.2976913452148438, -0.15712833404541016, 0.0] ,
+[-2.3263494968414307, -0.09564447402954102, 0.0] ,
+[-2.3432230949401855, -0.03416013717651367, 0.0] ,
+[-2.347383975982666, 0.02732372283935547, 0.0] ,
+[-2.3386025428771973, 0.08880758285522461, 0.0] ,
+[-2.317362070083618, 0.15029144287109375, 0.0] ,
+[-2.284832239151001, 0.2117753028869629, 0.0] ,
+[-2.2428042888641357, 0.27325916290283203, 0.0] ,
+[-2.1935908794403076, 0.33474302291870117, 0.0] ,
+[-2.1399028301239014, 0.3962268829345703, 0.0] ,
+[-2.0846948623657227, 0.45771074295043945, 0.0] ,
+[-2.031006336212158, 0.5191946029663086, 0.0] ,
+[-1.9817934036254883, 0.5806784629821777, 0.0] ,
+[-1.9397650957107544, 0.6421623229980469, 0.0] ,
+[-1.9072356224060059, 0.703646183013916, 0.0] ,
+[-1.8859951496124268, 0.7651300430297852, 0.0] ,
+[-1.8772135972976685, 0.8266143798828125, 0.0] ,
+[-1.8813742399215698, 0.8880977630615234, 0.0] ,
+[-1.8982481956481934, 0.9495820999145508, 0.0] ,
+[-1.9269059896469116, 1.0110654830932617, 0.0] ,
+[-1.9657704830169678, 1.072549819946289, 0.0] ,
+[-2.0127017498016357, 1.134033203125, 0.0] ,
+[-2.0651161670684814, 1.1955175399780273, 0.0] ,
+[-2.1201281547546387, 1.2570013999938965, 0.0] ,
+[-2.1747090816497803, 1.3184852600097656, 0.0] ,
+[-2.2258543968200684, 1.3799691200256348, 0.0] ,
+[-2.270747661590576, 1.441452980041504, 0.0] ,
+[-2.306917905807495, 1.502936840057373, 0.0] ,
+[-2.332373857498169, 1.5644207000732422, 0.0] ,
+[-2.3457138538360596, 1.6259045600891113, 0.0] ,
+[-2.346203565597534, 1.6873884201049805, 0.0] ,
+[-2.3338160514831543, 1.7488722801208496, 0.0] ,
+[-2.3092334270477295, 1.8103561401367188, 0.0] ,
+[-2.2738089561462402, 1.871840000152588, 0.0] ,
+[-2.229492664337158, 1.933323860168457, 0.0] ,
+[-2.178724527359009, 1.9948081970214844, 0.0] ,
+[-2.1242992877960205, 2.0562915802001953, 0.0] ,
+[-2.069213390350342, 2.1177759170532227, 0.0] ,
+[-2.0164997577667236, 2.1792588233947754, 0.0] ,
+[-1.9690600633621216, 2.2407431602478027, 0.0] ,
+[-1.9295059442520142, 2.3022265434265137, 0.0] ,
+[-1.9000153541564941, 2.363710880279541, 0.0] ,
+[-1.882211446762085, 2.4251952171325684, 0.0] ,
+[-1.8770748376846313, 2.4866786003112793, 0.0] ,
+[-1.884887933731079, 2.5481629371643066, 0.0] ,
+[-1.905220627784729, 2.6096463203430176, 0.0] ,
+[-1.9369540214538574, 2.671130657196045, 0.0] ,
+[-1.9783402681350708, 2.732614040374756, 0.0] ,
+[-2.027101993560791, 2.794098377227783, 0.0] ,
+[-2.0805537700653076, 2.855581760406494, 0.0] ,
+[-2.1357526779174805, 2.9170660972595215, 0.0] ,
+[-2.1896612644195557, 2.9785494804382324, 0.0] ,
+[-2.2393102645874023, 3.0400338172912598, 0.0] ,
+[-2.2819669246673584, 3.1015172004699707, 0.0] ,
+[-2.3152830600738525, 3.163001537322998, 0.0] ,
+[-2.3374240398406982, 3.2244858741760254, 0.0] ,
+[-2.3471710681915283, 3.2859692573547363, 0.0] ,
+[-2.3439877033233643, 3.3474535942077637, 0.0] ,
+[-2.328049421310425, 3.4089369773864746, 0.0] ,
+[-2.3002331256866455, 3.470421314239502, 0.0] ,
+[-2.262070417404175, 3.531904697418213, 0.0] ,
+[-2.2156622409820557, 3.5933890342712402, 0.0] ,
+[-2.1635637283325195, 3.654872417449951, 0.0] ,
+[-2.108642816543579, 3.7163567543029785, 0.0] ,
+[-2.0539233684539795, 3.7778401374816895, 0.0] ,
+[-2.0024173259735107, 3.839324474334717, 0.0] ,
+[-1.956960916519165, 3.9008078575134277, 0.0] ,
+[-1.9200562238693237, 3.962292194366455, 0.0] ,
+[-1.8937352895736694, 4.023775577545166, 0.0] ,
+[-1.8794469833374023, 4.085259914398193, 0.0] ,
+[-1.8779778480529785, 4.146744251251221, 0.0] ,
+[-1.889408826828003, 4.208227634429932, 0.0] ,
+[-1.913110613822937, 4.269711017608643, 0.0] ,
+[-1.9477784633636475, 4.33119535446167, 0.0] ,
+[-1.9915035963058472, 4.392679691314697, 0.0] ,
+[-2.0418789386749268, 4.454163074493408, 0.0] ,
+[-2.0961310863494873, 4.515646457672119, 0.0] ,
+[-2.151273488998413, 4.5771307945251465, 0.0] ,
+[-2.204270124435425, 4.638615131378174, 0.0] ,
+[-2.2522034645080566, 4.700098514556885, 0.0] ,
+[-2.2924344539642334, 4.761581897735596, 0.0] ,
+[-2.3227486610412598, 4.823066234588623, 0.0] ,
+[-2.3414766788482666, 4.88455057144165, 0.0] ,
+[-2.347587823867798, 4.946033954620361, 0.0] ,
+[-2.340745687484741, 5.007518291473389, 0.0] ,
+[-2.321326494216919, 5.069002628326416, 0.0] ,
+[-2.2904000282287598, 5.130486011505127, 0.0] ,
+[-2.2496681213378906, 5.191969394683838, 0.0] ,
+[-2.201373815536499, 5.253453731536865, 0.0] ,
+[2.0046591758728027, 5.253453731536865, 0.0] ,
+[2.121809959411621, 5.253453731536865, 0.0]
+  ];
+  
+  let sculpturePoints = [[-1.3917511701583862, -3.1171324253082275, -3.5898947715759277] ,
+[-1.1922402381896973, -1.0718055963516235, -1.2966901063919067] ,
+[-0.5807932615280151, -2.7513058185577393, -5.373478412628174] ,
+[1.267488718032837, -1.851090431213379, -5.381288528442383] ,
+[0.1931348294019699, -0.9099960327148438, -2.8085756301879883] ,
+[-2.5284719467163086, 3.285818763743009e-07, -2.445554733276367] ,
+[-1.2505677938461304, 7.523778435825079e-07, -5.599764347076416] ,
+[1.1724963188171387, 0.4350929856300354, -5.8608903884887695] ,
+[3.412280321121216, 1.0782206058502197, -0.681460440158844] ,
+[1.6286853551864624, 0.8923431634902954, 0.35091060400009155] ,
+[0.6678873300552368, -0.8118454217910767, -1.3810076713562012] ,
+[1.842307686805725, -0.8831179141998291, -5.522668838500977] ,
+[4.667878150939941, 5.6755050081847e-07, -4.22413969039917] ,
+[5.608157157897949, 1.0994219779968262, -1.510213851928711] ,
+[4.6876091957092285, 0.2738717496395111, -0.9849551916122437] ,
+[1.5655218362808228, 2.703272819519043, -0.9420212507247925] ,
+[1.0088565349578857, 0.2771475315093994, -2.3343098163604736] ,
+[2.886371612548828, -0.46153825521469116, -2.5627846717834473] ,
+[4.184347152709961, -0.587138295173645, -2.874530553817749]];
+  
+  return {
+    
+    wavyFramePoints,
+    sculpturePoints
+    
+  }
+  
+}
+</script>
\ No newline at end of file
diff --git a/moving-mirror-web-audio-api-and-three-js/src/script.js b/moving-mirror-web-audio-api-and-three-js/src/script.js
new file mode 100644
index 0000000..747899b
--- /dev/null
+++ b/moving-mirror-web-audio-api-and-three-js/src/script.js
@@ -0,0 +1,1009 @@
+/*
+  
+  Audio-Reactive 3D Visuals ✨ - 
+  Move your mouse over ✨
+  
+  Inspired by the Ultrafragola Mirror.
+  No 3D models have been downloaded here, everything is created with three.js.
+  
+  Thanks to:
+  
+  @EllenProbst for modifying audio data -
+  https://codepen.io/EllenProbst/pen/RQQmJK
+  
+  @prisoner849 for round-edged box and closed tube geoms -
+  https://discourse.threejs.org/t/round-edged-box
+  https://discourse.threejs.org/t/end-caps-of-tubegeometry/9655/6
+  
+  @marco_fugaro for calc vertex normals in MeshPhysicalMaterial -
+  https://discourse.threejs.org/t/calculating-vertex-normals-after-displacement-in-the-vertex-shader/16989
+  
+  Music: 'You're So Vain' by Carly Simon
+  
+  October 2020, Anna the Scavenger
+  
+*/
+
+'use strict';
+
+let scene, camera, renderer, container;
+
+let cloth, mirror, wavyFrame;
+let sculptureLeft, sculptureRight;
+let isSculptureDancing = false;
+
+let materials;
+
+// AUDIO REACTIVE MESHES
+
+let audioSpheres = [];
+let audioPastilles = [];
+
+// AUDIO
+
+const audioURL = "https://assets.codepen.io/911157/Carly_Simon_Youre_So_Vain.mp3";
+
+let isAudioPlaying = false;
+
+let analyser;
+let audioData = [];
+let freqData = [];
+
+// MOUSE
+
+let mouseX = 0;
+let time = 0;
+
+// LANDSCAPE / PORTRAIT
+
+let isMobile = /(Android|iPhone|iOS|iPod|iPad)/i.test(navigator.userAgent);
+let windowRatio = window.innerWidth / window.innerHeight;
+let isLandscape = (windowRatio > 1) ? true : false;
+
+let paramsLandscape = {
+  
+  mirrorY: 40,
+  centerLeftX: -220,
+  centerLeftY: -100
+  
+};
+
+let paramsPortrait = {
+  
+  mirrorY: 40,
+  centerLeftX: -160,
+  centerLeftY: -70
+  
+};
+
+let params = isLandscape ? paramsLandscape : paramsPortrait;
+
+// BACKGROUND RADIAL GRADIENT
+
+let bgColors = [
+  
+  // center
+  [230, 146, 181],
+  [230, 146, 181],
+  
+  // outside
+  [230, 230, 230],
+  [125, 150, 150]
+  
+];
+
+window.onload = function() {
+  
+  introAnimation();
+  init();
+  render();
+  
+};
+
+function introAnimation() {
+  
+  const overlayContainer = document.querySelector("#overlay-container");
+  const sceneContainer = document.querySelector("#scene-container");
+  
+  overlayContainer.style.animation = "fadeOut 1.1s ease-out forwards";
+  sceneContainer.style.animation = "fadeIn 1.1s ease-in forwards";
+  
+  const credits = document.querySelector('#credits');
+  credits.style.animation = "fadeIn3 8s ease-out forwards";
+  
+  const btnPlay = document.querySelector("#btn-play");
+  btnPlay.addEventListener("click", onClick);
+  btnPlay.style.animation = "fadeIn2 2.5s ease-in forwards";
+  
+}
+
+function init() {
+  
+  // CAMERA, LIGHTS, RENDERER
+  
+  initSceneBasics();
+  
+  // ALL MATERIALS AND MESHES
+  
+  materials = initMaterials();
+      
+  let count = 140;
+  initSprinkles(count);
+  
+  initMirror();
+  initWalls();
+  initCloth();
+  initSculptureLeft();
+  initSculptureRight();
+  initPastilles();
+    
+  window.addEventListener("resize", onWindowResize);
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("touchmove", onTouchMove);
+
+}
+
+function initSceneBasics() {
+  
+  container = document.querySelector("#scene-container");
+  
+  scene = new THREE.Scene();
+  
+  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1800);
+  const cameraZ = isLandscape ? 500 : 700;
+  camera.position.set(0, 20, cameraZ);
+  camera.lookAt(0, 0, 0);
+  scene.add(camera);
+  
+  const dirLight = new THREE.DirectionalLight(0xffffff, 1.7, 1.7);
+  dirLight.position.set(0, 50, -50);
+  scene.add(dirLight);
+  
+  const dirLight3 = new THREE.DirectionalLight(0xffffff, 1.2, 1.2);
+  dirLight3.position.set(0, 10, -100);
+  dirLight3.target.position.set(50, 0, -100);
+  scene.add(dirLight3.target);
+  scene.add(dirLight3);
+  
+  const dirLight2 = new THREE.DirectionalLight(0xff00ff, 1.4, 1.4);
+  dirLight2.position.set(-40, 0, 50);
+  scene.add(dirLight2);
+
+  const hemLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 1.5);
+  hemLight.position.set(20, 50, 50);
+  scene.add(hemLight);
+  
+  renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.physicallyCorrectLights = true;
+  renderer.outputEncoding = THREE.GammaEncoding;
+  renderer.gammaFactor = 2.2;
+  renderer.setPixelRatio(window.devicePixelRatio > 1.5 ? Math.min(window.devicePixelRatio, 1.5) : Math.min(window.devicePixelRatio, 1.25));
+  container.appendChild(renderer.domElement);
+  
+}
+
+function SprinkleGeometry(arc = 0.5, radius = 35, thickness = 2.5) {
+  
+  this.arc = arc * Math.PI;
+  this.torusRadius = radius;
+  this.thickness = thickness;
+  
+  // SPRINKLE MIDDLE
+  
+  this.ArcGeom = new THREE.TorusBufferGeometry(this.torusRadius, this.thickness, 10, 15, this.arc);
+  
+  let sphereRadius = this.thickness;
+  
+  // SPRINKLE END 1 - HALF CIRCLE
+  
+  this.End1Geom = new THREE.SphereBufferGeometry(sphereRadius, 10, 10, 0, Math.PI);
+  this.End1Geom.translate(0, this.torusRadius, 0);
+  this.End1Geom.rotateY(- Math.PI / 2);
+  this.End1Geom.rotateZ(- (0.5 * Math.PI - this.arc));
+  
+  // SPRINKLE END 1 - FULL CIRCLE
+  
+  this.End1SphereGeom = new THREE.SphereBufferGeometry(sphereRadius, 10, 10, 0, Math.PI * 2);
+  this.End1SphereGeom.translate(0, this.torusRadius, 0);
+  
+  // SPRINKLE END 2 - HALF CIRCLE
+  
+  this.End2Geom = new THREE.SphereBufferGeometry(sphereRadius, 10, 10, 0, Math.PI);
+  this.End2Geom.rotateX(Math.PI / 2);
+  this.End2Geom.translate(this.torusRadius, 0, 0);
+
+}
+
+function initSprinkles(n) {
+  
+  let count = n;
+  
+  const iPinkMat = new THREE.MeshPhongMaterial({
+    
+    color: 0xffffff,
+    shininess: 100,
+    specular: 0x383636
+    
+  });
+  
+  const iGreenMat = new THREE.MeshPhongMaterial({
+    
+    color: 0xffffff,
+    shininess: 100,
+    specular: 0x383636
+    
+  });
+  
+  const iBlackMat = new THREE.MeshPhongMaterial({
+    
+    color: 0xffffff,
+    shininess: 100,
+    specular: 0x383636
+    
+  });
+  
+  // Assign random colors to the sprinkles
+  
+  let color = new THREE.Color();
+  let color1 = new THREE.Color();
+  let color2 = new THREE.Color();
+  let aColorFloat32 = new Float32Array(count * 3);
+  let aColorEnd1Float32 = new Float32Array(count * 3);
+  let aColorEnd2Float32 = new Float32Array(count * 3);
+  
+  let sprinklePalette = [
+    
+    0xffffff, // white
+    0xffe9c9, 
+    0xffe9c9, 
+    0x6e9377, // green
+    0x6e9377,
+    0xff84bd, // pink
+    0xff84bd,
+    0xff9977, // peach
+    0x000000, // black
+    
+  ];
+  
+  for (let i = 0; i < count; i ++) {
+
+    color.setHex(sprinklePalette[Math.floor(Math.random() * sprinklePalette.length)]);
+    color1.setHex(sprinklePalette[Math.floor(Math.random() * sprinklePalette.length)]);
+    color2.setHex(sprinklePalette[Math.floor(Math.random() * sprinklePalette.length)]);
+    
+	  color.toArray(aColorFloat32, i * 3);
+    color1.toArray(aColorEnd1Float32, i * 3);
+    color2.toArray(aColorEnd2Float32, i * 3);
+
+	}
+    
+  const sprinkleArcGeom = new SprinkleGeometry().ArcGeom;
+  const sprinkleEnd1Geom = new SprinkleGeometry().End1Geom;
+  const sprinkleEnd2Geom = new SprinkleGeometry().End2Geom;
+  
+  sprinkleArcGeom.setAttribute('color', new THREE.InstancedBufferAttribute(aColorFloat32, 3));
+	iPinkMat.vertexColors = true;
+  
+  sprinkleEnd1Geom.setAttribute('color', new THREE.InstancedBufferAttribute(aColorEnd1Float32, 3));
+	iGreenMat.vertexColors = true;
+  
+  sprinkleEnd2Geom.setAttribute('color', new THREE.InstancedBufferAttribute(aColorEnd2Float32, 3));
+	iBlackMat.vertexColors = true;
+
+  let instancedSprinkleArc = new THREE.InstancedMesh(sprinkleArcGeom, iPinkMat, count);
+  let instancedSprinkleEnd1 = new THREE.InstancedMesh(sprinkleEnd1Geom, iGreenMat, count);
+  let instancedSprinkleEnd2 = new THREE.InstancedMesh(sprinkleEnd2Geom, iBlackMat, count);
+  
+  let dummy = new THREE.Object3D();
+  
+  for (let i = 0; i < count; i ++) {
+    
+    let theta = THREE.Math.randFloatSpread(90);
+    let phi = THREE.Math.randFloatSpread(90);
+    
+    dummy.position.set(
+      Math.floor(Math.random() * (375 - (-375)) - 375),
+      Math.floor(Math.random() * (100 - (-50)) - 50),
+      Math.floor(Math.random() * (-70 - (-270)) - 270)
+    );
+
+    dummy.rotation.set(
+      Math.random() * 2 * Math.PI,
+      Math.random() * 2 * Math.PI,
+      0
+    );
+
+    dummy.updateMatrix();
+
+    instancedSprinkleArc.setMatrixAt( i, dummy.matrix );
+    instancedSprinkleEnd1.setMatrixAt( i, dummy.matrix );
+    instancedSprinkleEnd2.setMatrixAt( i, dummy.matrix );
+
+  }
+  
+  const sprinklesGroup = new THREE.Group();
+  sprinklesGroup.add(instancedSprinkleArc);
+  sprinklesGroup.add(instancedSprinkleEnd1);
+  sprinklesGroup.add(instancedSprinkleEnd2);
+  
+  scene.add(sprinklesGroup);
+  
+}
+
+function closedCapsTube(pts, thickness, segments) {  
+  
+  const closedTubeGroup = new THREE.Group();
+  
+  // CURVE SHAPING THE SCULPTURE
+  
+  let points = pts;
+  let pScale = 1.5;
+
+  for (let i = 0; i < points.length; i++) {
+    
+    let x = points[i][0] * pScale;
+    let y = points[i][1] * pScale;
+    let z = points[i][2] * pScale;
+    points[i] = new THREE.Vector3(x, z, -y);
+    
+  }
+  
+  
+  let curve = new THREE.CatmullRomCurve3(points);
+  // console.log(points);
+  let p = curve.getPoints(20);
+  let curveSmooth = new THREE.CatmullRomCurve3(p);
+  let geom = new THREE.TubeBufferGeometry(curveSmooth, 180, thickness, 20, false);
+  let tube = new THREE.Mesh(geom, materials.peachStandard);
+  closedTubeGroup.add(tube);
+  
+  // TUBE START POINTS
+  
+  let pos = geom.attributes.position;
+  let startPoints = [];
+  startPoints.push(curve.getPoint(0));
+  
+  for (let i = 0; i <= geom.parameters.radialSegments; i++) {
+
+	  startPoints.push(new THREE.Vector3().fromBufferAttribute(pos, i));
+  
+  }
+
+  let pointsStartGeom = new THREE.BufferGeometry().setFromPoints(startPoints);
+  let psgPos = pointsStartGeom.attributes.position;
+  let indexStart = [];
+  
+  for (let i = 1; i < psgPos.count - 1; i++) {
+    
+    indexStart.push(0, i, i + 1);
+    
+  }
+  pointsStartGeom.setIndex(indexStart);
+  pointsStartGeom.computeVertexNormals();
+  
+  // CAP MESH START
+  
+  let capStart = new THREE.Mesh(pointsStartGeom, materials.peachStandard);
+  closedTubeGroup.add(capStart);
+  
+  // TUBE END POINTS
+  
+  let endPoints = [];
+  endPoints.push(curve.getPoint(1));
+  
+  for (let i = (geom.parameters.radialSegments + 1) * geom.parameters.tubularSegments; i < pos.count; i++) {
+	
+	  endPoints.push(new THREE.Vector3().fromBufferAttribute(pos, i));
+
+  }
+
+  let pointsEndGeom = new THREE.BufferGeometry().setFromPoints(endPoints);
+  let pegPos = pointsEndGeom.attributes.position;
+  let indexEnd = [];
+  
+  for (let i = 1; i < pegPos.count - 1; i++) {
+	
+    indexEnd.push(0, i + 1, i);
+    
+  }
+  pointsEndGeom.setIndex(indexEnd);
+  pointsEndGeom.computeVertexNormals();
+  
+  // CAP MESH END
+  
+  let capEnd = new THREE.Mesh(pointsEndGeom, materials.peachStandard);
+  closedTubeGroup.add(capEnd);
+  
+  return closedTubeGroup;
+  
+}
+
+function initSculptureRight() {
+  
+  sculptureRight = new THREE.Group();
+  
+  let points = getExportedPoints().sculpturePoints;
+
+  const tubeBig = closedCapsTube(points, 0.75, 240);  
+  const scale = 11;
+  tubeBig.scale.set(scale, scale, scale);
+  tubeBig.position.set(0, 70, 0);
+  sculptureRight.add(tubeBig);
+  
+  const sphereGeom = new THREE.SphereBufferGeometry(25, 20, 15);
+  
+  const sphereCheck2 = new THREE.Mesh(sphereGeom, materials.checkerboardPhong);
+  sphereCheck2.position.set(55, 30, 15);
+  sphereCheck2.rotation.x = Math.PI / 2.5;
+  sphereCheck2.rotation.z = -Math.PI / 1.25;
+  sculptureRight.add(sphereCheck2);
+  
+  const sphereCheck3 = sphereCheck2.clone();
+  sphereCheck3.position.set(-10, 60, -30);
+  sphereCheck3.rotation.x = Math.PI / 3.5;
+  sphereCheck3.rotation.z = -Math.PI / 1.5;
+  sculptureRight.add(sphereCheck3);
+  
+  const sphere = new THREE.Mesh(sphereGeom, materials.chestnut);
+  sphere.position.set(17, -45, 0);
+  sphere.scale.set(0.55, 0.55, 0.55);
+  sculptureRight.add(sphere);
+  
+  sculptureRight.position.x = 210;
+  sculptureRight.position.y = -70;
+  
+  scene.add(sculptureRight);
+  audioSpheres.push(sphereCheck2, sphereCheck3);
+  
+}
+
+function initSculptureLeft() {
+  
+  sculptureLeft = new THREE.Group();
+ 
+  const doodle = new THREE.Group();
+  
+  let thickness = 2.5;
+  let t = thickness;
+  
+  const torusGeom = new THREE.TorusBufferGeometry(22, t, 16, 20, Math.PI);
+  const torusGeom2 = new THREE.TorusBufferGeometry(22, t, 16, 20, Math.PI / 2);
+  const torusGeom3 = new THREE.TorusBufferGeometry(5, t, 16, 20, Math.PI / 2);
+  const torusGeom4 = new THREE.TorusBufferGeometry(15, t, 16, 20, Math.PI / 2);
+  const torusGeom5 = new THREE.TorusBufferGeometry(40, t, 16, 20, 0.35 * Math.PI);
+  const cylinderGeom = new THREE.CylinderBufferGeometry(t, t, 40, 11, 1);
+  
+  const torus = new THREE.Mesh(torusGeom, materials.peachStandard);
+  torus.position.set(0, 55, 0);
+  torus.rotation.x = Math.PI;
+  doodle.add(torus);
+  const torus2 = torus.clone();
+  torus2.rotation.x = 0;
+  torus2.position.copy(torus.position);
+  torus2.position.x = torus.position.x + 2 * torusGeom.parameters.radius;
+  doodle.add(torus2);
+  const torus3 = new THREE.Mesh(torusGeom2, materials.peachStandard);
+  torus3.rotation.x = Math.PI;
+  torus3.position.copy(torus2.position);
+  doodle.add(torus3);
+  const torus4 = new THREE.Mesh(torusGeom3, materials.peachStandard);
+  torus4.position.copy(torus3.position);
+  torus4.position.y = torus3.position.y - torusGeom2.parameters.radius - 2 * torusGeom3.parameters.tube;
+  torus4.rotation.z = Math.PI / 2;
+  doodle.add(torus4);
+  const cylinder = new THREE.Mesh(cylinderGeom, materials.peachStandard);
+  cylinder.position.copy(torus4.position);
+  cylinder.position.x = torus4.position.x - torusGeom3.parameters.radius;
+  cylinder.position.y = torus4.position.y - 19;
+  doodle.add(cylinder);
+  const torus5 = new THREE.Mesh(torusGeom4, materials.peachStandard);
+  torus5.position.copy(cylinder.position);
+  torus5.position.x = cylinder.position.x - torusGeom4.parameters.radius;
+  torus5.position.y = cylinder.position.y - 20;
+  torus5.rotation.x = Math.PI;
+  doodle.add(torus5);
+  const torus6 = new THREE.Mesh(torusGeom3, materials.peachStandard);
+  torus6.position.copy(torus5.position);
+  torus6.position.x = torus5.position.x;
+  torus6.rotation.y = -Math.PI;
+  torus6.rotation.x = Math.PI;
+  torus6.position.y = torus5.position.y - torusGeom4.parameters.radius + 2 * thickness;
+  doodle.add(torus6);
+  const torus7 = new THREE.Mesh(torusGeom5, materials.black);
+  torus7.position.copy(torus6.position);
+  torus7.position.x = torus6.position.x - 110;
+  torus7.position.y = torus6.position.y - 4;
+  doodle.add(torus7);
+
+  const curve = new THREE.Curve();
+  
+  sculptureLeft.add(doodle);
+  
+  const roundedBoxGeom = roundEdgedBoxGeom(50, 40, 40, 4, 5);
+  roundedBoxGeom.computeVertexNormals();
+  roundedBoxGeom.translate(0, .5, 0);
+  
+  const roundedBox = new THREE.Mesh(roundedBoxGeom, materials.chestnut);
+  roundedBox.rotation.x = - 0.4 * Math.PI;
+  sculptureLeft.add(roundedBox);
+  
+  const sphereGeom = new THREE.SphereBufferGeometry(25, 20, 15);
+  
+  const sphereCheck = new THREE.Mesh(sphereGeom, materials.checkerboardPhong);
+  sphereCheck.position.set(-30, 70, 0);
+  sphereCheck.rotation.x = Math.PI / 1.2;
+  sculptureLeft.add(sphereCheck);
+  audioSpheres.push(sphereCheck);
+  
+  let sphere = new THREE.Mesh(sphereGeom, materials.peachStandard);
+  sphere.position.set(-45, 20, 0);
+  sphere.scale.set(0.65, 0.65, 0.65);
+  sculptureLeft.add(sphere);
+  
+  let sphere2 = new THREE.Mesh(sphereGeom, materials.green);
+  sphere2.position.set(30, 86.5, 0);
+  sphere2.scale.set(0.4, 0.4, 0.4);
+  sculptureLeft.add(sphere2);
+  
+  let sphere3 = new THREE.Mesh(sphereGeom, materials.black);
+  sphere3.position.set(8, -30, 0);
+  sphere3.scale.set(0.4, 0.4, 0.4);
+  sculptureLeft.add(sphere3);
+  
+  let sphere4 = new THREE.Mesh(sphereGeom, materials.black);
+  sphere4.position.set(40, 45, 0);
+  sphere4.scale.set(0.4, 0.4, 0.4);
+  sculptureLeft.add(sphere4);
+  
+  sculptureLeft.position.x = -210;
+  sculptureLeft.position.y = -70;
+  
+  scene.add(sculptureLeft);
+  
+}
+
+function initWalls() {
+  
+  // WALLS
+  
+  let cameraZ = camera.position.z;
+  let planeZ = -500;
+  let distance = cameraZ - planeZ;
+  let viewWidth = window.innerWidth;
+  let viewHeight = window.innerHeight;
+  let aspect = camera.aspect;
+  let vFov = camera.fov * Math.PI / 180;
+  let planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
+  let planeWidthAtDistance = planeHeightAtDistance * aspect;
+  
+  let planeWidth = planeWidthAtDistance;
+  let planeHeight = planeHeightAtDistance;
+  
+  let scale = 7;
+  let planeGeom = new THREE.PlaneBufferGeometry(scale * planeWidth, scale * planeHeight);
+  planeGeom.translate(0, 0.3 * planeHeight, 0);
+
+  let beigeBasic = new THREE.MeshBasicMaterial({color: 0x91827f})
+  let wallFront = new THREE.Mesh(planeGeom, beigeBasic);
+	wallFront.position.z = 300;
+	wallFront.position.y = 0;
+	wallFront.rotateY(Math.PI);
+	scene.add(wallFront);
+    
+  let wallWidth = planeGeom.parameters.width;
+  let wallHeight = planeGeom.parameters.width;
+  
+  let wallLeft = new THREE.Mesh(planeGeom, beigeBasic);
+  wallLeft.position.copy(wallFront.position);
+  wallLeft.position.x = wallFront.position.x - wallWidth / 2;
+  wallLeft.position.z = wallFront.position.z - wallWidth / 2;
+  wallLeft.rotation.y = Math.PI / 2;
+  
+  let wallRight = new THREE.Mesh(planeGeom, beigeBasic);
+  wallRight.position.copy(wallFront.position);
+  wallRight.position.x = wallFront.position.x + wallWidth / 2;
+  wallRight.position.z = wallFront.position.z - wallWidth / 2;
+  wallRight.rotation.y = -Math.PI / 2;
+  
+  scene.add(wallLeft, wallRight);
+  
+}
+
+function initCloth() {
+  
+  const SIZE = 4;
+  const RESOLUTION = 64;
+
+  const geometry = new THREE.PlaneBufferGeometry(SIZE, SIZE, RESOLUTION, RESOLUTION).rotateX(-Math.PI / 2);
+  
+  const material = new THREE.ShaderMaterial({
+    
+    lights: true,
+    side: THREE.DoubleSide,
+    extensions: {
+      derivatives: true,
+    },
+    defines: {
+      STANDARD: '',
+      PHYSICAL: '',
+    },
+    uniforms: {
+      ...THREE.ShaderLib.physical.uniforms,
+      roughness: {value: 0.0},
+      diffuse: {value: new THREE.Color(0xffffff)},
+    
+      amplitude: {value: 0.4},
+      frequency: {value: 0.55},
+      speed: {value: 0.3},
+      time: {value: 0.0},
+    },
+
+    vertexShader: monkeyPatch(THREE.ShaderChunk.meshphysical_vert, {
+      
+    header: `
+      uniform float time;
+      uniform float amplitude;
+      uniform float speed;
+      uniform float frequency;
+      varying vec2 vUv;
+
+      ${noise()}
+      
+      // the function which defines the displacement
+      float f(vec3 point) {
+        return noise(vec3(point.x * frequency, point.z * frequency, time * speed)) * amplitude;
+      }
+    `,
+    // adapted from http://tonfilm.blogspot.com/2007/01/calculate-normals-in-shader.html
+    main: `
+      vUv = uv;
+      float displacement = f(position);
+      vec3 displaced = position + normal * f(position);
+
+      float offset = ${SIZE / RESOLUTION};
+      vec3 neighbour1 = position + vec3(offset, 0, 0);
+      vec3 neighbour2 = position + vec3(0, 0, -offset);
+      vec3 displacedNeighbour1 = neighbour1 + normal * f(neighbour1);
+      vec3 displacedNeighbour2 = neighbour2 + normal * f(neighbour2);
+
+      // https://i.ya-webdesign.com/images/vector-normals-tangent-16.png
+      vec3 tangent = displacedNeighbour1 - displaced;
+      vec3 bitangent = displacedNeighbour2 - displaced;
+
+      // https://upload.wikimedia.org/wikipedia/commons/d/d2/Right_hand_rule_cross_product.svg
+      vec3 displacedNormal = normalize(cross(tangent, bitangent));
+    `,
+
+     '#include <defaultnormal_vertex>': THREE.ShaderChunk.defaultnormal_vertex.replace(
+      // transformedNormal will be used in the lighting calculations
+      'vec3 transformedNormal = objectNormal;',
+      `vec3 transformedNormal = displacedNormal;`
+      ),
+
+      // transformed is the output position
+      '#include <displacementmap_vertex>': `
+      transformed += normal * displacement;
+      `,
+    }),
+  
+    fragmentShader: THREE.ShaderChunk.meshphysical_frag,
+    
+  });
+  
+  let scale = 40;
+  cloth = new THREE.Mesh(geometry, material);
+  cloth.position.set(0, params.mirrorY - 100, 160);
+  cloth.rotation.y = Math.PI / 4;
+  cloth.scale.set(scale, scale, scale);
+  scene.add(cloth);
+  
+}
+
+function initPastilles() {
+  
+  const cylinderGeom = new THREE.CylinderBufferGeometry(14, 14, 5, 20);
+  const checkMat = materials.checkerboardPhong;
+  
+  let pastillesNum = 7;
+  
+  for (let i = 0; i < pastillesNum; i++) {
+    
+    let p = new THREE.Mesh(cylinderGeom, checkMat);
+    p.position.x = -110 + 35 * i;
+    p.position.y = Math.floor(Math.random() * (-120 - (-160)) - 180);
+    p.position.z = Math.floor(Math.random() * (50 - (20)) - 20);
+    p.rotation.x = Math.PI * Math.random();
+    p.rotation.y = Math.PI * Math.random();
+    audioPastilles.push(p);
+    scene.add(p);
+  }
+  
+}
+
+function generateCurve() {
+  
+  let points = getExportedPoints().wavyFramePoints;
+  
+  let scale = 7.75;
+
+  for (let i = 0; i < points.length; i++) {
+    
+    let x = points[i][0] * scale;
+    let y = points[i][1] * scale;
+    let z = points[i][2] * scale;
+    points[i] = new THREE.Vector3(x, z, -y);
+    
+  }
+ 
+  let curve =  new THREE.CatmullRomCurve3(points);
+  return curve;
+   
+}
+
+function initMirror() {
+  
+  // MIRROR WAVY FRAME
+  
+  let curve = generateCurve();
+  let segments = 240;
+  let tubeRadius = 2.0;
+  
+  let tubeGeom = new THREE.TubeBufferGeometry(curve, segments, tubeRadius, 4, true);
+  tubeGeom.rotateX(Math.PI / 2);
+      
+  let baseScale = 2;
+  let zFactor = -4;
+  let scaleXFactor = 0.3;
+  let scaleYFactor = 0.15;
+  let scaleZFactor = 0.15;
+  
+  let numFrames = 5;
+  
+  wavyFrame = new THREE.Group();
+  
+  for (let i = 0; i < numFrames; i++) {
+    
+    let frame = new THREE.Mesh(tubeGeom, materials.peachStandard);
+    frame.position.set(0, 0, 0 + i * zFactor);
+    frame.scale.x = baseScale + scaleXFactor * i;
+    frame.scale.y = baseScale + scaleYFactor * i;
+    frame.scale.z = baseScale + scaleZFactor * (i + 0.1 * i);
+    wavyFrame.add(frame);
+
+  }
+  
+  wavyFrame.position.set(0, params.mirrorY, 45);
+  scene.add(wavyFrame);
+  
+  // measurements of last (biggest) frame - for mirror dimensions
+  let frameChild = wavyFrame.children[numFrames - 1].geometry;
+  frameChild.computeBoundingBox();
+  let bBox = frameChild.boundingBox;
+  let frameWidth = (bBox.max.x - bBox.min.x) * (baseScale + scaleXFactor * (numFrames - 1));
+  let frameHeight = (bBox.max.y - bBox.min.y) * (baseScale + scaleXFactor * (numFrames - 1));
+  
+  // MIRROR REFLECTOR
+  
+  let WIDTH = window.innerWidth;
+  let HEIGHT = window.innerHeight;
+  
+  let mirrorWidth = 0.85 * frameWidth;
+  let mirrorHeight = 0.95 * frameHeight;
+  let mirrorGeom = new THREE.PlaneBufferGeometry(mirrorWidth, mirrorHeight);
+  
+  mirror = new THREE.Reflector(mirrorGeom, {
+    
+	  clipBias: 0.003,
+		textureWidth: WIDTH * window.devicePixelRatio,
+	  textureHeight: HEIGHT * window.devicePixelRatio,
+		color: 0xc97c7c
+    
+	});
+    
+  mirror.position.copy(wavyFrame.position);
+  mirror.position.y = wavyFrame.position.y + 0;
+  mirror.position.z = wavyFrame.position.z - 200;
+	scene.add(mirror);
+  
+}
+
+// AUDIO 
+
+function initAudio() {
+  
+  const audio = new Audio();
+  audio.src = audioURL;
+  audio.controls = true;
+  audio.autoplay = true;
+  audio.crossOrigin = "anonymous";
+  audio.loop = true;
+  document.body.appendChild(audio);
+  
+  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  
+  const source = audioCtx.createMediaElementSource(audio);
+  const volumeControl = audioCtx.createGain();
+  source.connect(audioCtx.destination);
+  source.connect(volumeControl);
+
+  analyser = audioCtx.createAnalyser();
+  volumeControl.connect(analyser);
+  analyser.connect(audioCtx.destination);
+  analyser.fftSize = 128;
+  
+  freqData = new Uint8Array(analyser.frequencyBinCount);
+  getAudioData(freqData);
+  
+  volumeControl.gain.value = audio.volume;
+   
+}
+
+function getAudioData(data) {
+  
+	let frequencyArray = splitFrenquencyArray(data, 3);
+
+	// Make average of frequency array
+	for (let i = 0; i < frequencyArray.length; i++) {
+    
+		let average = 0;
+
+		for (let j = 0; j < frequencyArray[i].length; j++) {
+      
+			average += frequencyArray[i][j];
+      
+		}
+    
+		audioData[i] = average / frequencyArray[i].length;
+    
+	}
+  
+	return audioData;
+  
+}
+
+function splitFrenquencyArray(arr, n) {
+  
+	let tab = Object.keys(arr).map(function(key) {
+    
+		return arr[key];
+    
+	});
+  
+	let len = tab.length;
+  let result = [];
+  let i = 0;
+
+	while (i < len) {
+    
+		let size = Math.ceil((len - i) / n--);
+		result.push(tab.slice(i, i + size));
+		i += size;
+    
+	}
+
+	return result;
+  
+}
+
+function abs(a) {
+  
+  return Math.abs(a);
+  
+}
+
+function render() {
+  
+  update();
+  renderer.render(scene, camera);
+  requestAnimationFrame(render);
+	
+}
+
+function update() {
+      
+  cloth.material.uniforms.time.value = 0.1 + 3.0 * mouseX;
+  cloth.material.uniforms.diffuse.value.g = 0.0 + 1.0 * abs(mouseX * mouseX * mouseX);
+  cloth.material.uniforms.diffuse.value.r = 0.0 + 1.0 * abs(mouseX * mouseX * mouseX);
+  cloth.material.uniforms.diffuse.value.b = 0.0 + 1.0 * abs(mouseX * mouseX * mouseX);
+    
+  mirror.rotation.y = 0.2 * Math.PI * mouseX;
+  wavyFrame.rotation.y = 0.2 * Math.PI * mouseX;
+  
+  if (isAudioPlaying) {
+    
+    updateAudio();
+    sculptureLeft.position.x = -210 * Math.cos(1.5 * Math.PI * mouseX);
+    sculptureLeft.position.z = -280 * Math.sin(1.5 *Math.PI * mouseX);
+  
+    sculptureRight.position.x = 210 * Math.cos(1.5 * Math.PI * mouseX);
+    sculptureRight.position.z = 290 * Math.sin(1.5 *Math.PI * mouseX);
+    
+  }
+  
+}
+
+function updateAudio() {
+  
+  getAudioData(freqData);
+  analyser.getByteFrequencyData(freqData);
+  
+  audioSpheres.forEach(sphere => {
+    
+    sphere.scale.x = 0.9 + audioData[0] / 500;
+    sphere.scale.y = 0.9 + audioData[0] / 500;
+    sphere.scale.z = 0.9 + audioData[0] / 500;
+  
+  });
+  
+  // audioPastilles.forEach((pastille, i) => (pastille.position.y = audioData[0] / 10 - 0.9 * 170));
+  
+  audioPastilles.forEach(pastille => {
+    
+    pastille.scale.x = 0.9 + audioData[0] / 500;
+    pastille.scale.y = 0.9 + audioData[0] / 500;
+    pastille.scale.z = 0.9 + audioData[0] / 500;
+  
+  });
+  
+}
+
+// *** EVENTS ***
+
+function onMouseMove(event) {
+  
+  mouseX = (event.clientX / window.innerWidth) * 2 - 1;
+  
+  radialGradientChange(bgColors, container);
+  
+}
+
+function onTouchMove(event) {
+    
+	let x = event.changedTouches[0].clientX;
+  mouseX = (x / window.innerWidth) * 2 - 1;
+  
+  radialGradientChange(bgColors, container);
+      
+}
+
+function onWindowResize() {
+  
+  const renderTarget = mirror.getRenderTarget();
+  renderTarget.setSize(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  
+}
+
+function onClick(e) {
+  
+  e.preventDefault();
+
+  initAudio();
+  isAudioPlaying = !isAudioPlaying;
+  
+  e.target.remove();
+  
+}
+
+// BACKGROUND GRADIENT
+
+function radialGradientChange(colorsArr, element) {
+  
+  let colors = colorsArr;
+
+  element.style.background = `radial-gradient(circle, 
+rgba(
+${colors[0][0] - (colors[0][0]-colors[1][0]) * Math.abs(mouseX)},
+${colors[0][1] - (colors[0][1]-colors[1][1]) * Math.abs(mouseX)},
+${colors[0][2] - (colors[0][2]-colors[1][2]) * Math.abs(mouseX)},
+1) 0%, 
+rgba(
+${colors[2][0] - (colors[2][0]-colors[3][0]) * Math.abs(mouseX)},
+${colors[2][1] - (colors[2][1]-colors[3][1]) * Math.abs(mouseX)},
+${colors[2][2] - (colors[2][2]-colors[3][2]) * Math.abs(mouseX)},
+1) 100%)`;
+
+}
\ No newline at end of file
diff --git a/moving-mirror-web-audio-api-and-three-js/src/style.css b/moving-mirror-web-audio-api-and-three-js/src/style.css
new file mode 100644
index 0000000..7fa46c6
--- /dev/null
+++ b/moving-mirror-web-audio-api-and-three-js/src/style.css
@@ -0,0 +1,162 @@
+:root {
+  --dolphin: rgb(184, 189, 189);
+  --pink: rgb(230, 146, 181);
+  --strongpink: rgb(255, 113, 193);
+  --black: rgb(0, 0, 0);
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  font-size: clamp(100%, 1rem + 2vw, 16px);
+  font-family: Arial;
+  background: radial-gradient(circle, var(--pink) 0%, var(--dolphin) 80%, var(--dolphin) 100%);
+  touch-action: pan-x;
+}
+
+#overlay-container {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background: radial-gradient(circle, var(--pink) 0%, var(--dolphin) 80%, var(--dolphin) 100%);
+  opacity: 1.0;
+}
+
+#scene-container {
+  position: absolute;
+  background: radial-gradient(circle, var(--pink) 0%, rgb(140, 147, 147) 80%, rgb(121, 150, 150) 100%);
+  opacity: 0.0;
+}
+
+button {
+  position: absolute;
+  font-size: 1.2em;
+  background: rgba(255, 166, 210, 0.0);
+  margin: 0em;
+  padding: 0.25em 3.5em;
+  font-size: 1.1em;
+  font-weight: bold;
+  border: 1.25px solid var(--black);
+  border-radius: 50%;
+  color: var(--black);
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+button:hover {
+  background: rgba(255, 166, 210, 0.75);
+}
+
+#btn-play {
+  margin: 0em;
+  font-size: 1.25em;
+  opacity: 1;
+  z-index: 5;
+  opacity: 0;
+  margin: 1.75em 1.75em;
+  padding: 1em;
+  transform: rotate(-20deg);
+}
+
+audio {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  opacity: 0.5;
+  transition: 0.2s;
+}
+
+audio:hover {
+  opacity: 1.0;
+}
+
+#credits {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+  padding: 0.75em 1em;
+  text-align: center;
+  color: var(--black);
+  opacity: 0;
+  font-size: 1.1em;
+}
+
+a {
+  color: var(--black);
+  text-decoration: none;
+}
+
+#credits a::before {
+  content: '';
+  display: inline-block;
+  position: relative;
+  transform-origin: center center;
+  top: -0.0325em;
+  height: 0.65em;
+  width: 0.65em;
+  background-color: var(--black);
+  color: var(--black);
+  border-radius: 100%;
+  margin-right: 0.35em;
+}
+
+#credits a:hover::before {
+  animation: 1.5s rotate ease-in-out infinite;
+}
+
+@keyframes rotate {
+  0% { transform: rotateY(0deg); }
+  100% { transform: rotateY(360deg); }
+}
+
+@keyframes fadeOut {
+  
+  0% { opacity: 1.0;}
+  100% { opacity: 0;}
+
+}
+
+@keyframes fadeIn {
+  
+  0% { opacity: 0.0;}
+  100% { opacity: 1;}
+
+}
+
+@keyframes fadeIn2 {
+  
+  0% { opacity: 0.0;}
+  50% { opacity: 0.0;}
+  75% { opacity: 0.0;}
+  100% { opacity: 1;}
+
+}
+
+@keyframes fadeIn3 {
+  
+  0% { opacity: 0.0;}
+  50% { opacity: 0.0;}
+  85% { opacity: 0.0;}
+  100% { opacity: 1;}
+
+}
+
+@media(max-width: 800px) {
+  
+  audio {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.0;
+    transition: 0.2s;
+  }
+  
+  #credits {
+    opacity: 0;
+  }
+
+}
\ No newline at end of file
diff --git a/multi-colored-text-with-css/README.markdown b/multi-colored-text-with-css/README.markdown
new file mode 100644
index 0000000..4a04cad
--- /dev/null
+++ b/multi-colored-text-with-css/README.markdown
@@ -0,0 +1,5 @@
+# Multi Colored Text with CSS
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/TajShireen/pen/YzZmbep](https://codepen.io/TajShireen/pen/YzZmbep).
+
+Design from: https://in.pinterest.com/pin/680184349975292472/
diff --git a/multi-colored-text-with-css/dist/index.html b/multi-colored-text-with-css/dist/index.html
new file mode 100644
index 0000000..c77b17d
--- /dev/null
+++ b/multi-colored-text-with-css/dist/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Multi Colored Text with CSS</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Exo:wght@900&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="wrapper">
+  <div class="container">
+    <h1>multi color text with css</h1>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/multi-colored-text-with-css/dist/script.js b/multi-colored-text-with-css/dist/script.js
new file mode 100644
index 0000000..d8cb147
--- /dev/null
+++ b/multi-colored-text-with-css/dist/script.js
@@ -0,0 +1 @@
+// Design from: https://in.pinterest.com/pin/680184349975292472/
\ No newline at end of file
diff --git a/multi-colored-text-with-css/dist/style.css b/multi-colored-text-with-css/dist/style.css
new file mode 100644
index 0000000..8c9348e
--- /dev/null
+++ b/multi-colored-text-with-css/dist/style.css
@@ -0,0 +1,67 @@
+* {
+  box-sizing: border-box
+}
+
+:root {
+  --color-1: #186cb8;
+  --color-2: #2a9a9f;
+  --color-3: #f1b211;
+  --color-4: #e83611;
+  --color-5: #f9002f;
+}
+
+
+.wrapper {
+  background: #000;
+  line-height: 1;
+  min-height: 100%;
+  display: grid;
+  place-items: center;
+  min-height: calc(100vh - 16px);
+}
+
+h1 {
+  font-family: "Exo", sans-serif;
+  font-size: 15vw;
+  font-weight: 900;
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  margin: auto;
+  text-transform: uppercase;
+  background: linear-gradient(219deg, 
+    var(--color-1) 19%, 
+    transparent 19%,transparent 20%, 
+    var(--color-2) 20%, var(--color-2)  39%,
+    transparent 39%,transparent 40%, 
+    var(--color-3) 40%,var(--color-3) 59% ,
+    transparent 59%,transparent 60%, 
+    var(--color-4) 60%, var(--color-4) 79%,
+    transparent 79%, transparent 80%, 
+    var(--color-5) 80%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.container {
+  padding: 1.5rem;   
+  text-align: center;
+  background: radial-gradient(circle at 1.4% 1.4% ,var(--color-1) .8%,transparent  .8% ), 
+    radial-gradient(circle at 5.5% 3%,var(--color-2) .45% ,transparent .45% ), 
+    radial-gradient(circle at 2.5% 3.5%,var(--color-3) .5% ,transparent .5% ), 
+    radial-gradient(circle at 4.5% 1.2%,var(--color-4) .25%,transparent .25% ),
+
+    radial-gradient(circle at 98% 98% ,var(--color-1) .8%,transparent  .8% ), 
+    radial-gradient(circle at 95% 95%,var(--color-2) .45% ,transparent .45% ), 
+    radial-gradient(circle at 94.5% 97.5%,var(--color-3) .5% ,transparent .5% ), 
+    radial-gradient(circle at 98.5% 95.5%,var(--color-4) .25%,transparent .25% );
+
+
+}
+
+@media screen and (min-width: 768px) {
+  h1 {
+    font-size: 6.5rem;
+  }
+}
\ No newline at end of file
diff --git a/multi-colored-text-with-css/license.txt b/multi-colored-text-with-css/license.txt
new file mode 100644
index 0000000..60d1bd1
--- /dev/null
+++ b/multi-colored-text-with-css/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Shireen Taj (https://codepen.io/TajShireen/pen/YzZmbep)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/multi-colored-text-with-css/src/index.html b/multi-colored-text-with-css/src/index.html
new file mode 100644
index 0000000..e89b5f6
--- /dev/null
+++ b/multi-colored-text-with-css/src/index.html
@@ -0,0 +1,5 @@
+<div class="wrapper">
+  <div class="container">
+    <h1>multi color text with css</h1>
+  </div>
+</div>
\ No newline at end of file
diff --git a/multi-colored-text-with-css/src/script.js b/multi-colored-text-with-css/src/script.js
new file mode 100644
index 0000000..d8cb147
--- /dev/null
+++ b/multi-colored-text-with-css/src/script.js
@@ -0,0 +1 @@
+// Design from: https://in.pinterest.com/pin/680184349975292472/
\ No newline at end of file
diff --git a/multi-colored-text-with-css/src/style.css b/multi-colored-text-with-css/src/style.css
new file mode 100644
index 0000000..8c9348e
--- /dev/null
+++ b/multi-colored-text-with-css/src/style.css
@@ -0,0 +1,67 @@
+* {
+  box-sizing: border-box
+}
+
+:root {
+  --color-1: #186cb8;
+  --color-2: #2a9a9f;
+  --color-3: #f1b211;
+  --color-4: #e83611;
+  --color-5: #f9002f;
+}
+
+
+.wrapper {
+  background: #000;
+  line-height: 1;
+  min-height: 100%;
+  display: grid;
+  place-items: center;
+  min-height: calc(100vh - 16px);
+}
+
+h1 {
+  font-family: "Exo", sans-serif;
+  font-size: 15vw;
+  font-weight: 900;
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  margin: auto;
+  text-transform: uppercase;
+  background: linear-gradient(219deg, 
+    var(--color-1) 19%, 
+    transparent 19%,transparent 20%, 
+    var(--color-2) 20%, var(--color-2)  39%,
+    transparent 39%,transparent 40%, 
+    var(--color-3) 40%,var(--color-3) 59% ,
+    transparent 59%,transparent 60%, 
+    var(--color-4) 60%, var(--color-4) 79%,
+    transparent 79%, transparent 80%, 
+    var(--color-5) 80%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.container {
+  padding: 1.5rem;   
+  text-align: center;
+  background: radial-gradient(circle at 1.4% 1.4% ,var(--color-1) .8%,transparent  .8% ), 
+    radial-gradient(circle at 5.5% 3%,var(--color-2) .45% ,transparent .45% ), 
+    radial-gradient(circle at 2.5% 3.5%,var(--color-3) .5% ,transparent .5% ), 
+    radial-gradient(circle at 4.5% 1.2%,var(--color-4) .25%,transparent .25% ),
+
+    radial-gradient(circle at 98% 98% ,var(--color-1) .8%,transparent  .8% ), 
+    radial-gradient(circle at 95% 95%,var(--color-2) .45% ,transparent .45% ), 
+    radial-gradient(circle at 94.5% 97.5%,var(--color-3) .5% ,transparent .5% ), 
+    radial-gradient(circle at 98.5% 95.5%,var(--color-4) .25%,transparent .25% );
+
+
+}
+
+@media screen and (min-width: 768px) {
+  h1 {
+    font-size: 6.5rem;
+  }
+}
\ No newline at end of file
diff --git a/music-app/README.markdown b/music-app/README.markdown
new file mode 100644
index 0000000..0059cba
--- /dev/null
+++ b/music-app/README.markdown
@@ -0,0 +1,7 @@
+# Music App
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/havardob/pen/JjJXqZm](https://codepen.io/havardob/pen/JjJXqZm).
+
+A music app concept by Sulton Handaya
+
+Made from this Dribbble shot: https://dribbble.com/shots/16355560-Online-Music-Streaming-App/attachments/8920497?mode=media 
diff --git a/music-app/dist/index.html b/music-app/dist/index.html
new file mode 100644
index 0000000..76ad75b
--- /dev/null
+++ b/music-app/dist/index.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Music App</title>
+  
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="phone">
+	<header class="header">
+		<div class="header-logo">
+			<div>
+				<span></span>
+				<span></span>
+				<span></span>
+				<span></span>
+			</div>
+		</div>
+		<div class="header-title">
+			Home
+		</div>
+		<div class="header-buttons">
+			<button class="notifications">
+				<i class="ai-bell"></i>
+			</button>
+			<button class="avatar">
+<img src="https://assets.codepen.io/285131/pexels-photo-838875.jpeg" />
+			</button>
+		</div>
+	</header>
+	<section class="title">
+		<h1>Listening Everyday</h1>
+		<p>Explore millions of music according to your taste</p>
+	</section>
+	<section class="search">
+		<div class="search-inner">
+			<button class="search-button">
+				<i class="ai-search"></i>
+			</button>
+			<input type="text" class="search-input" placeholder="Search Music" />
+
+		</div>
+	</section>
+
+	<nav class="navigation">
+		<a href="#" class="navigation-item active">Overview</a>
+		<a href="#" class="navigation-item">Songs</a>
+		<a href="#" class="navigation-item">Albums</a>
+		<a href="#" class="navigation-item">Artists</a>
+	</nav>
+	<section class="playlists">
+
+		<article class="card">
+			<div class="card-inner">
+				<span class="card-pin"></span>
+				<div class="card-image">
+					<img src="https://assets.codepen.io/285131/illustration-hand-with-cigarette-icon.jpg" />
+				</div>
+				<div class="card-content">
+					<div class="card-meta">
+						<span class="card-meta-number">20 songs</span>
+						<button class="card-meta-button">
+							<i class="ai-circle-triangle-right-fill"></i>
+						</button>
+					</div>
+					<h2 class="card-title">Alan Walker</h2>
+				</div>
+			</div>
+		</article>
+
+		<article class="card">
+			<div class="card-inner">
+				<span class="card-pin"></span>
+				<div class="card-image">
+					<img src="https://assets.codepen.io/285131/hand-drawn-monster-milkshake.jpg" />
+				</div>
+				<div class="card-content">
+					<div class="card-meta">
+						<span class="card-meta-number">20 songs</span>
+						<button class="card-meta-button">
+							<i class="ai-circle-triangle-right-fill"></i>
+						</button>
+					</div>
+					<h2 class="card-title">Tim Bergling</h2>
+				</div>
+			</div>
+		</article>
+	</section>
+	<section class="currently-playing">
+
+		<article class="card horizontal">
+			<div class="card-inner">
+				<span class="card-pin simple"></span>
+				<div class="card-image">
+					<img src="https://assets.codepen.io/285131/pink-pastel-juicy-banana.jpg" />
+				</div>
+				<div class="card-content">
+					<div class="card-meta">
+						<span class="card-meta-artist">Marshmello</span>
+						<button class="card-meta-button" style="opacity: 0;">
+							<i class="ai-circle-triangle-right-fill"></i>
+						</button>
+					</div>
+					<h2 class="card-title">Hate the Other Side
+						<span class="card-time">3:40</span>
+					</h2>
+				</div>
+				<span class="card-pin simple"></span>
+			</div>
+		</article>
+	</section>
+	<footer class="menu">
+		<div class="menu-inner">
+			<a href="#" class="menu-item active">
+				<i class="ai-home"></i>
+			</a>
+			<a href="#" class="menu-item">
+				<i class="ai-heart"></i>
+			</a>
+			<a href="#" class="menu-item">
+				<i class="ai-fire"></i>
+			</a>
+			<a href="#" class="menu-item">
+				<i class="ai-gear"></i>
+			</a>
+		</div>
+	</footer>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.com/akar-icons-fonts'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/music-app/dist/script.js b/music-app/dist/script.js
new file mode 100644
index 0000000..91557d7
--- /dev/null
+++ b/music-app/dist/script.js
@@ -0,0 +1 @@
+// Nope
\ No newline at end of file
diff --git a/music-app/dist/style.css b/music-app/dist/style.css
new file mode 100644
index 0000000..1d2eaea
--- /dev/null
+++ b/music-app/dist/style.css
@@ -0,0 +1,589 @@
+@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+:root {
+  --c-gray-100: #fbf8f2;
+  --c-gray-200: #fcfdfe;
+  --c-gray-300: #e9ebec;
+  --c-gray-400: #e3e4ea;
+  --c-gray-500: #5f5f5f;
+  --c-gray-900: #1d1d1d;
+  --c-blue-300: #a8dee2;
+  --c-blue-500: #2ab3c0;
+  --c-green-500: #80b895;
+  --c-green-300: #bad5ca;
+  --c-red-500: #ea605e;
+  --c-yellow-300: #f8e0b1;
+  --c-yellow-500: #f9bc73;
+  --rotation: -3deg;
+}
+
+body {
+  font-family: "Urbanist", sans-serif;
+  line-height: 1.5;
+  min-height: 100vh;
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+  background-color: var(--c-gray-400);
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button {
+  font: inherit;
+}
+
+.phone {
+  width: 460px;
+  border-radius: 25px;
+  overflow: hidden;
+  padding: 2rem;
+  box-shadow: 0 0 0 10px var(--c-gray-300), 0 0 0 11px var(--c-gray-200);
+  background-color: #fff;
+  position: relative;
+  z-index: 1;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.header {
+  display: grid;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  grid-template-columns: 1fr 2fr 1fr;
+}
+
+.header-logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 48px;
+  background-color: var(--c-blue-300);
+  border: 2px solid var(--c-gray-900);
+  border-radius: 15px;
+}
+.header-logo div {
+  display: flex;
+  flex-wrap: wrap;
+  width: 24px;
+  height: 24px;
+}
+.header-logo span {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--c-gray-900);
+  background-color: var(--c-yellow-500);
+  border-radius: 50%;
+}
+
+.header-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.header-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.notifications {
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  margin-right: 1rem;
+  position: relative;
+  transform-origin: center center;
+  transition: 0.15s ease;
+  cursor: pointer;
+}
+.notifications:hover, .notifications:focus {
+  transform: rotate(10deg);
+}
+.notifications i {
+  font-size: 1.75rem;
+  color: #454545;
+}
+.notifications:after {
+  right: -8px;
+  top: 3px;
+  content: "2";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  font-size: 0.75rem;
+  background-color: var(--c-red-500);
+  border-radius: 50%;
+  font-weight: 800;
+  border: 2px solid var(--c-gray-900);
+}
+
+.avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  border-radius: 15px;
+  overflow: hidden;
+  border: 3px solid #fff;
+  box-shadow: 0 8px 10px -4px rgba(0, 0, 0, 0.2);
+  transform-origin: center center;
+  transition: 0.15s ease;
+  cursor: pointer;
+}
+.avatar:hover, .avatar:focus {
+  transform: translatey(-4px);
+  box-shadow: 0 12px 14px -4px rgba(0, 0, 0, 0.3);
+}
+
+.title {
+  margin-top: 1rem;
+}
+.title h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+.title p {
+  font-size: 1rem;
+  color: var(--c-gray-500);
+  margin-top: 0.375em;
+}
+
+.search {
+  position: relative;
+  z-index: 1;
+  transition: 0.15s ease;
+}
+.search:hover, .search:focus-within {
+  transform: translatey(-2px);
+}
+
+.search-inner {
+  display: flex;
+  align-items: center;
+  border: 2px solid var(--c-gray-900);
+  border-radius: 15px;
+  height: 60px;
+  font-size: 1rem;
+  width: 100%;
+  background-color: #fff;
+  position: relative;
+  margin-top: 2rem;
+}
+.search-inner:after {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: -1;
+  width: 96%;
+  height: 100%;
+  bottom: -9px;
+  left: calc(50% - 48%);
+  border-radius: 20px;
+  border: 2px solid var(--c-gray-900);
+  background-color: var(--c-gray-100);
+  transition: 0.15s ease;
+}
+.search-inner:hover input::-moz-placeholder, .search-inner:focus-within input::-moz-placeholder {
+  color: #787878;
+}
+.search-inner:hover input:-ms-input-placeholder, .search-inner:focus-within input:-ms-input-placeholder {
+  color: #787878;
+}
+.search-inner:hover input::placeholder, .search-inner:focus-within input::placeholder {
+  color: #787878;
+}
+.search-inner:hover:after, .search-inner:focus-within:after {
+  transform: translatey(2px);
+}
+
+.search-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 15px 0 0 15px;
+  border: 0;
+  background-color: var(--c-gray-100);
+  position: relative;
+  height: 100%;
+  border-right: 2px solid var(--c-gray-900);
+  width: 70px;
+  transition: 0.15s ease;
+  cursor: pointer;
+}
+.search-button i {
+  font-size: 1.25em;
+}
+.search-button:focus, .search-button:hover {
+  background-color: var(--c-yellow-300);
+  outline: 0;
+}
+
+.search-input {
+  border: 0;
+  border-radius: 0 15px 15px 0;
+  height: 100%;
+  background-color: #fff;
+  width: 100%;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+.search-input:focus {
+  outline: 0;
+}
+.search-input::-moz-placeholder {
+  font-weight: 600;
+  color: var(--c-gray-900);
+  -moz-transition: 0.15s ease;
+  transition: 0.15s ease;
+}
+.search-input:-ms-input-placeholder {
+  font-weight: 600;
+  color: var(--c-gray-900);
+  -ms-transition: 0.15s ease;
+  transition: 0.15s ease;
+}
+.search-input::placeholder {
+  font-weight: 600;
+  color: var(--c-gray-900);
+  transition: 0.15s ease;
+}
+
+.navigation {
+  margin-top: 2rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--c-gray-900);
+  display: flex;
+  justify-content: space-between;
+}
+
+.navigation-item {
+  font-size: 1.125rem;
+  display: inline-block;
+  padding: 0 0.5rem;
+  text-decoration: none;
+  color: inherit;
+  position: relative;
+  z-index: 1;
+  font-weight: 500;
+}
+.navigation-item.active {
+  font-weight: 800;
+}
+.navigation-item.active:before {
+  background-color: var(--c-yellow-500);
+}
+.navigation-item:before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 14px;
+  background-color: transparent;
+  z-index: -1;
+  bottom: -2px;
+  left: 0;
+  transition: 0.15s ease;
+}
+.navigation-item + .navigation-item {
+  margin-left: 1.25rem;
+}
+.navigation-item:hover:before, .navigation-item:focus {
+  background-color: var(--c-yellow-500);
+}
+
+.playlists {
+  margin-top: 1.5rem;
+  display: flex;
+  padding: 2rem 0.5rem;
+}
+
+.currently-playing {
+  padding: 1rem 0.5rem;
+}
+
+.card {
+  width: 200px;
+  transform: rotate(var(--rotation));
+  transition: 0.15s ease-out;
+}
+.card:nth-child(2) {
+  margin-top: 1rem;
+  --rotation: 5deg;
+}
+.card:nth-child(2) .card-inner:after {
+  background-color: var(--c-green-300);
+}
+.card:nth-child(2) .card-pin {
+  top: 20px;
+  left: 20px;
+  transform: rotate(-5deg);
+}
+.card + .card {
+  margin-left: 2rem;
+}
+.card:hover, .card:focus-within {
+  transform: translateY(4px) rotate(var(--rotation));
+}
+.card:hover .card-inner, .card:focus-within .card-inner {
+  background-color: var(--c-gray-100);
+}
+.card:hover .card-pin:after, .card:focus-within .card-pin:after {
+  height: 54px;
+}
+.card:hover .card-pin:before, .card:focus-within .card-pin:before {
+  transform: translatey(-4px);
+}
+.card.horizontal {
+  width: 100%;
+  transform: rotate(3deg);
+}
+.card.horizontal .card-inner {
+  flex-direction: row;
+  align-items: center;
+  padding: 1rem;
+}
+.card.horizontal .card-inner:after {
+  background-color: var(--c-green-500);
+}
+.card.horizontal .card-image {
+  width: 60px;
+  height: 60px;
+  flex-shrink: 0;
+}
+.card.horizontal .card-content {
+  width: 100%;
+  margin-top: 0;
+  margin-left: 0.5rem;
+}
+.card.horizontal .card-meta-artist {
+  font-weight: 700;
+}
+.card.horizontal .card-title {
+  font-weight: 500;
+  color: var(--c-gray-500);
+  font-size: 1.125em;
+  margin-top: 0.125em;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.card.horizontal .card-time {
+  font-weight: 600;
+}
+.card.horizontal:hover .card-pin.simple:before,
+.card.horizontal:hover .card-pin.simple:after, .card.horizontal:focus-within .card-pin.simple:before,
+.card.horizontal:focus-within .card-pin.simple:after {
+  transform: none;
+}
+.card.horizontal:hover .card-pin.simple:after, .card.horizontal:focus-within .card-pin.simple:after {
+  height: 50px;
+}
+
+.card-inner {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid var(--c-gray-900);
+  border-radius: 20px;
+  padding: 0.5rem;
+  background-color: #fff;
+  position: relative;
+}
+.card-inner:after {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: -1;
+  width: 95%;
+  height: 100%;
+  bottom: -9px;
+  left: calc(50% - 47.5%);
+  border-radius: 20px;
+  border: 2px solid var(--c-gray-900);
+  background-color: var(--c-yellow-300);
+}
+
+.card-pin {
+  width: 12px;
+  height: 12px;
+  background-color: var(--c-gray-900);
+  position: absolute;
+  top: 20px;
+  left: calc(50% - 6px);
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c-gray-900);
+  transform: rotate(3deg);
+  z-index: 1;
+}
+.card-pin:before, .card-pin:after {
+  content: "";
+  display: block;
+  border-radius: 50%;
+  position: absolute;
+  transition: 0.15s ease-out;
+}
+.card-pin:before {
+  width: 12px;
+  height: 12px;
+  background-color: var(--c-gray-900);
+  border-radius: 50%;
+  left: calc(50% - 6px);
+  top: -44px;
+}
+.card-pin:after {
+  width: 6px;
+  background-color: #fff;
+  border: 1px solid;
+  border-radius: 99em;
+  height: 50px;
+  left: calc(50% - 3px);
+  bottom: 3px;
+}
+.card-pin.simple {
+  box-shadow: none;
+}
+.card-pin.simple:nth-of-type(odd) {
+  left: 10px;
+  top: 10px;
+  transform: rotate(-45deg);
+}
+.card-pin.simple:nth-of-type(even) {
+  left: calc(100% - 20px);
+  top: calc(100% - 20px);
+  transform: rotate(120deg);
+}
+
+.card-image {
+  border-radius: 15px;
+  overflow: hidden;
+  aspect-ratio: 4/3;
+  position: relative;
+}
+.card-image img {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.card-meta,
+.card-title {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.card-meta {
+  padding-top: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-meta-number {
+  color: var(--c-gray-500);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.card-meta-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  color: var(--c-gray-900);
+  flex-shrink: 0;
+  cursor: pointer;
+  padding: 0;
+  line-height: 0;
+  border-radius: 50%;
+  background-color: transparent;
+}
+.card-meta-button i {
+  font-size: 1.75rem;
+}
+.card-meta-button:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.card-title {
+  margin-top: 0.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+  padding-bottom: 0.5rem;
+}
+
+.menu-inner {
+  margin-top: 2rem;
+  display: flex;
+  justify-content: center;
+  border-radius: 15px;
+  border: 2px solid var(--c-gray-900);
+  justify-content: space-between;
+  padding: 0.75rem;
+  background-color: var(--c-blue-500);
+  position: relative;
+}
+.menu-inner:after {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: -1;
+  width: 95%;
+  height: 100%;
+  bottom: -9px;
+  left: calc(50% - 47.5%);
+  border-radius: 20px;
+  border: 2px solid var(--c-gray-900);
+  background-color: var(--c-gray-100);
+}
+
+.menu-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5rem;
+  color: #fff;
+  width: 80px;
+  border-radius: 15px;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  text-decoration: none;
+  background-color: transparent;
+  border: 2px solid transparent;
+}
+.menu-item:hover, .menu-item:focus, .menu-item.active {
+  border-color: var(--c-gray-900);
+  background-color: var(--c-yellow-500);
+  color: var(--c-gray-900);
+}
+
+*,
+*:focus {
+  outline: 0;
+}
\ No newline at end of file
diff --git a/music-app/license.txt b/music-app/license.txt
new file mode 100644
index 0000000..a2dea1c
--- /dev/null
+++ b/music-app/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Håvard Brynjulfsen (https://codepen.io/havardob/pen/JjJXqZm)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/music-app/src/index.html b/music-app/src/index.html
new file mode 100644
index 0000000..090476a
--- /dev/null
+++ b/music-app/src/index.html
@@ -0,0 +1,120 @@
+<div class="phone">
+	<header class="header">
+		<div class="header-logo">
+			<div>
+				<span></span>
+				<span></span>
+				<span></span>
+				<span></span>
+			</div>
+		</div>
+		<div class="header-title">
+			Home
+		</div>
+		<div class="header-buttons">
+			<button class="notifications">
+				<i class="ai-bell"></i>
+			</button>
+			<button class="avatar">
+<img src="https://assets.codepen.io/285131/pexels-photo-838875.jpeg" />
+			</button>
+		</div>
+	</header>
+	<section class="title">
+		<h1>Listening Everyday</h1>
+		<p>Explore millions of music according to your taste</p>
+	</section>
+	<section class="search">
+		<div class="search-inner">
+			<button class="search-button">
+				<i class="ai-search"></i>
+			</button>
+			<input type="text" class="search-input" placeholder="Search Music" />
+
+		</div>
+	</section>
+
+	<nav class="navigation">
+		<a href="#" class="navigation-item active">Overview</a>
+		<a href="#" class="navigation-item">Songs</a>
+		<a href="#" class="navigation-item">Albums</a>
+		<a href="#" class="navigation-item">Artists</a>
+	</nav>
+	<section class="playlists">
+
+		<article class="card">
+			<div class="card-inner">
+				<span class="card-pin"></span>
+				<div class="card-image">
+					<img src="https://assets.codepen.io/285131/illustration-hand-with-cigarette-icon.jpg" />
+				</div>
+				<div class="card-content">
+					<div class="card-meta">
+						<span class="card-meta-number">20 songs</span>
+						<button class="card-meta-button">
+							<i class="ai-circle-triangle-right-fill"></i>
+						</button>
+					</div>
+					<h2 class="card-title">Alan Walker</h2>
+				</div>
+			</div>
+		</article>
+
+		<article class="card">
+			<div class="card-inner">
+				<span class="card-pin"></span>
+				<div class="card-image">
+					<img src="https://assets.codepen.io/285131/hand-drawn-monster-milkshake.jpg" />
+				</div>
+				<div class="card-content">
+					<div class="card-meta">
+						<span class="card-meta-number">20 songs</span>
+						<button class="card-meta-button">
+							<i class="ai-circle-triangle-right-fill"></i>
+						</button>
+					</div>
+					<h2 class="card-title">Tim Bergling</h2>
+				</div>
+			</div>
+		</article>
+	</section>
+	<section class="currently-playing">
+
+		<article class="card horizontal">
+			<div class="card-inner">
+				<span class="card-pin simple"></span>
+				<div class="card-image">
+					<img src="https://assets.codepen.io/285131/pink-pastel-juicy-banana.jpg" />
+				</div>
+				<div class="card-content">
+					<div class="card-meta">
+						<span class="card-meta-artist">Marshmello</span>
+						<button class="card-meta-button" style="opacity: 0;">
+							<i class="ai-circle-triangle-right-fill"></i>
+						</button>
+					</div>
+					<h2 class="card-title">Hate the Other Side
+						<span class="card-time">3:40</span>
+					</h2>
+				</div>
+				<span class="card-pin simple"></span>
+			</div>
+		</article>
+	</section>
+	<footer class="menu">
+		<div class="menu-inner">
+			<a href="#" class="menu-item active">
+				<i class="ai-home"></i>
+			</a>
+			<a href="#" class="menu-item">
+				<i class="ai-heart"></i>
+			</a>
+			<a href="#" class="menu-item">
+				<i class="ai-fire"></i>
+			</a>
+			<a href="#" class="menu-item">
+				<i class="ai-gear"></i>
+			</a>
+		</div>
+	</footer>
+</div>
\ No newline at end of file
diff --git a/music-app/src/script.js b/music-app/src/script.js
new file mode 100644
index 0000000..91557d7
--- /dev/null
+++ b/music-app/src/script.js
@@ -0,0 +1 @@
+// Nope
\ No newline at end of file
diff --git a/music-app/src/style.scss b/music-app/src/style.scss
new file mode 100644
index 0000000..0697a4b
--- /dev/null
+++ b/music-app/src/style.scss
@@ -0,0 +1,612 @@
+@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+*,
+*:after,
+*:before {
+	box-sizing: border-box;
+}
+
+:root {
+	--c-gray-100: #fbf8f2;
+	--c-gray-200: #fcfdfe;
+	--c-gray-300: #e9ebec;
+	--c-gray-400: #e3e4ea;
+	--c-gray-500: #5f5f5f;
+	--c-gray-900: #1d1d1d;
+	--c-blue-300: #a8dee2;
+	--c-blue-500: #2ab3c0;
+	--c-green-500: #80b895;
+	--c-green-300: #bad5ca;
+	--c-red-500: #ea605e;
+	--c-yellow-300: #f8e0b1;
+	--c-yellow-500: #f9bc73;
+
+	--rotation: -3deg;
+}
+
+body {
+	font-family: "Urbanist", sans-serif;
+	line-height: 1.5;
+	min-height: 100vh;
+	padding-top: 5vw;
+	padding-bottom: 5vw;
+	background-color: var(--c-gray-400);
+}
+
+img {
+	display: block;
+	max-width: 100%;
+}
+
+input,
+button {
+	font: inherit;
+}
+
+.phone {
+	width: 460px;
+	border-radius: 25px;
+	overflow: hidden;
+	padding: 2rem;
+	box-shadow: 0 0 0 10px var(--c-gray-300), 0 0 0 11px var(--c-gray-200);
+	background-color: #fff;
+	position: relative;
+	z-index: 1;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.header {
+	display: grid;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 1.5rem;
+	grid-template-columns: 1fr 2fr 1fr;
+}
+
+.header-logo {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 48px;
+	height: 48px;
+	background-color: var(--c-blue-300);
+	border: 2px solid var(--c-gray-900);
+	border-radius: 15px;
+	div {
+		display: flex;
+		flex-wrap: wrap;
+		width: 24px;
+		height: 24px;
+	}
+	span {
+		display: block;
+		width: 12px;
+		height: 12px;
+		border: 2px solid var(--c-gray-900);
+		background-color: var(--c-yellow-500);
+		border-radius: 50%;
+	}
+}
+
+.header-title {
+	font-size: 1.25rem;
+	font-weight: 600;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.header-buttons {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+.notifications {
+	padding: 0;
+	border: 0;
+	background-color: transparent;
+	margin-right: 1rem;
+	position: relative;
+	transform-origin: center center;
+	transition: 0.15s ease;
+	cursor: pointer;
+	&:hover,
+	&:focus {
+		transform: rotate(10deg);
+	}
+	i {
+		font-size: 1.75rem;
+		color: #454545;
+	}
+
+	&:after {
+		right: -8px;
+		top: 3px;
+		content: "2";
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		width: 20px;
+		height: 20px;
+		font-size: 0.75rem;
+		background-color: var(--c-red-500);
+		border-radius: 50%;
+		font-weight: 800;
+		border: 2px solid var(--c-gray-900);
+	}
+}
+
+.avatar {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 48px;
+	height: 48px;
+	padding: 0;
+	border-radius: 15px;
+	overflow: hidden;
+	border: 3px solid #fff;
+	box-shadow: 0 8px 10px -4px rgba(#000, 0.2);
+	transform-origin: center center;
+	transition: 0.15s ease;
+	cursor: pointer;
+	&:hover,
+	&:focus {
+		transform: translatey(-4px);
+		box-shadow: 0 12px 14px -4px rgba(#000, 0.3);
+	}
+}
+
+.title {
+	margin-top: 1rem;
+	h1 {
+		font-size: 1.5rem;
+		font-weight: 700;
+	}
+
+	p {
+		font-size: 1rem;
+		color: var(--c-gray-500);
+		margin-top: 0.375em;
+	}
+}
+
+.search {
+	position: relative;
+	z-index: 1;
+	transition: 0.15s ease;
+	&:hover,
+	&:focus-within {
+		transform: translatey(-2px);
+	}
+}
+
+.search-inner {
+	display: flex;
+	align-items: center;
+	border: 2px solid var(--c-gray-900);
+	border-radius: 15px;
+	height: 60px;
+	font-size: 1rem;
+	width: 100%;
+	background-color: #fff;
+	position: relative;
+	margin-top: 2rem;
+	&:after {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: -1;
+		width: 96%;
+		height: 100%;
+		bottom: -9px;
+		left: calc(50% - 48%);
+		border-radius: 20px;
+		border: 2px solid var(--c-gray-900);
+		background-color: var(--c-gray-100);
+		transition: 0.15s ease;
+	}
+
+	&:hover,
+	&:focus-within {
+		input::placeholder {
+			color: #787878;
+		}
+		&:after {
+			transform: translatey(2px);
+		}
+	}
+}
+
+.search-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 15px 0 0 15px;
+	border: 0;
+	background-color: var(--c-gray-100);
+	position: relative;
+	height: 100%;
+	border-right: 2px solid var(--c-gray-900);
+	width: 70px;
+	transition: 0.15s ease;
+	cursor: pointer;
+	i {
+		font-size: 1.25em;
+	}
+
+	&:focus,
+	&:hover {
+		background-color: var(--c-yellow-300);
+		outline: 0;
+	}
+}
+
+.search-input {
+	border: 0;
+	border-radius: 0 15px 15px 0;
+	height: 100%;
+	background-color: #fff;
+	width: 100%;
+	padding-left: 1em;
+	padding-right: 1em;
+	&:focus {
+		outline: 0;
+	}
+	&::placeholder {
+		font-weight: 600;
+		color: var(--c-gray-900);
+		transition: 0.15s ease;
+	}
+}
+
+.navigation {
+	margin-top: 2rem;
+	padding-bottom: 0.75rem;
+	border-bottom: 1px solid var(--c-gray-900);
+	display: flex;
+	justify-content: space-between;
+}
+
+.navigation-item {
+	font-size: 1.125rem;
+	display: inline-block;
+	padding: 0 0.5rem;
+	text-decoration: none;
+	color: inherit;
+	position: relative;
+	z-index: 1;
+	font-weight: 500;
+	&.active {
+		font-weight: 800;
+		&:before {
+			background-color: var(--c-yellow-500);
+		}
+	}
+
+	&:before {
+		content: "";
+		display: block;
+		position: absolute;
+		width: 100%;
+		height: 14px;
+		background-color: transparent;
+		z-index: -1;
+		bottom: -2px;
+		left: 0;
+		transition: 0.15s ease;
+	}
+
+	& + & {
+		margin-left: 1.25rem;
+	}
+
+	&:hover:before,
+	&:focus {
+		background-color: var(--c-yellow-500);
+	}
+}
+
+.playlists {
+	margin-top: 1.5rem;
+	display: flex;
+	padding: 2rem 0.5rem;
+}
+
+.currently-playing {
+	padding: 1rem 0.5rem;
+}
+
+.card {
+	width: 200px;
+	transform: rotate(var(--rotation));
+	transition: 0.15s ease-out;
+
+	&:nth-child(2) {
+		margin-top: 1rem;
+		--rotation: 5deg;
+		.card-inner:after {
+			background-color: var(--c-green-300);
+		}
+
+		.card-pin {
+			top: 20px;
+			left: 20px;
+			transform: rotate(-5deg);
+		}
+	}
+
+	& + & {
+		margin-left: 2rem;
+	}
+	&:hover,
+	&:focus-within {
+		transform: translateY(4px) rotate(var(--rotation));
+
+		.card-inner {
+			background-color: var(--c-gray-100);
+		}
+		.card-pin:after {
+			height: 54px;
+		}
+
+		.card-pin:before {
+			transform: translatey(-4px);
+		}
+	}
+
+	&.horizontal {
+		width: 100%;
+		transform: rotate(3deg);
+		.card-inner {
+			flex-direction: row;
+			align-items: center;
+			padding: 1rem;
+			&:after {
+				background-color: var(--c-green-500);
+			}
+		}
+
+		.card-image {
+			width: 60px;
+			height: 60px;
+			flex-shrink: 0;
+		}
+
+		.card-content {
+			width: 100%;
+			margin-top: 0;
+			margin-left: 0.5rem;
+		}
+
+		.card-meta-artist {
+			font-weight: 700;
+		}
+
+		.card-title {
+			font-weight: 500;
+			color: var(--c-gray-500);
+			font-size: 1.125em;
+			margin-top: 0.125em;
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			justify-content: space-between;
+		}
+
+		.card-time {
+			font-weight: 600;
+		}
+
+		&:hover,
+		&:focus-within {
+			.card-pin.simple:before,
+			.card-pin.simple:after {
+				transform: none;
+			}
+
+			.card-pin.simple:after {
+				height: 50px;
+			}
+		}
+	}
+}
+
+.card-inner {
+	display: flex;
+	flex-direction: column;
+	border: 2px solid var(--c-gray-900);
+	border-radius: 20px;
+	padding: 0.5rem;
+	background-color: #fff;
+	position: relative;
+	&:after {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: -1;
+		width: 95%;
+		height: 100%;
+		bottom: -9px;
+		left: calc(50% - 47.5%);
+		border-radius: 20px;
+		border: 2px solid var(--c-gray-900);
+		background-color: var(--c-yellow-300);
+	}
+}
+
+.card-pin {
+	width: 12px;
+	height: 12px;
+	background-color: var(--c-gray-900);
+	position: absolute;
+	top: 20px;
+	left: calc(50% - 6px);
+	border-radius: 50%;
+	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c-gray-900);
+	transform: rotate(3deg);
+	z-index: 1;
+	&:before,
+	&:after {
+		content: "";
+		display: block;
+		border-radius: 50%;
+		position: absolute;
+		transition: 0.15s ease-out;
+	}
+
+	&:before {
+		width: 12px;
+		height: 12px;
+		background-color: var(--c-gray-900);
+		border-radius: 50%;
+		left: calc(50% - 6px);
+		top: -44px;
+	}
+
+	&:after {
+		width: 6px;
+		background-color: #fff;
+		border: 1px solid;
+		border-radius: 99em;
+		height: 50px;
+		left: calc(50% - 3px);
+		bottom: 3px;
+	}
+
+	&.simple {
+		box-shadow: none;
+		&:nth-of-type(odd) {
+			left: 10px;
+			top: 10px;
+			transform: rotate(-45deg);
+		}
+
+		&:nth-of-type(even) {
+			left: calc(100% - 20px);
+			top: calc(100% - 20px);
+			transform: rotate(120deg);
+		}
+	}
+}
+
+.card-image {
+	border-radius: 15px;
+	overflow: hidden;
+	aspect-ratio: 4 / 3;
+	position: relative;
+	img {
+		width: 100%;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+}
+
+.card-meta,
+.card-title {
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+}
+
+.card-meta {
+	padding-top: 0.75rem;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.card-meta-number {
+	color: var(--c-gray-500);
+	font-size: 0.875rem;
+	font-weight: 500;
+}
+
+.card-meta-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 0;
+	color: var(--c-gray-900);
+	flex-shrink: 0;
+	cursor: pointer;
+	padding: 0;
+	line-height: 0;
+	border-radius: 50%;
+	background-color: transparent;
+	i {
+		font-size: 1.75rem;
+	}
+	&:after {
+		content: "";
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+}
+
+.card-title {
+	margin-top: 0.25rem;
+	font-size: 1rem;
+	font-weight: 600;
+	padding-bottom: 0.5rem;
+}
+
+.menu-inner {
+	margin-top: 2rem;
+	display: flex;
+	justify-content: center;
+	border-radius: 15px;
+	border: 2px solid var(--c-gray-900);
+	justify-content: space-between;
+	padding: .75rem;
+	background-color: var(--c-blue-500);
+	position: relative;
+	&:after {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: -1;
+		width: 95%;
+		height: 100%;
+		bottom: -9px;
+		left: calc(50% - 47.5%);
+		border-radius: 20px;
+		border: 2px solid var(--c-gray-900);
+		background-color: var(--c-gray-100);
+	}
+}
+
+.menu-item {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 1.5rem;
+	color: #fff;
+	width: 80px;
+	border-radius: 15px;
+	padding-top: 0.375rem;
+	padding-bottom: 0.375rem;
+	text-decoration: none;
+	background-color: transparent;
+	border: 2px solid transparent;
+	&:hover,
+	&:focus, &.active {
+		border-color: var(--c-gray-900);
+		background-color: var(--c-yellow-500);
+		color: var(--c-gray-900);
+	}
+}
+
+// DO NOT USE THIS IN PRODUCTION
+*,
+*:focus {
+	outline: 0;
+}
+//
diff --git a/muson-css/README.markdown b/muson-css/README.markdown
new file mode 100644
index 0000000..950c1f6
--- /dev/null
+++ b/muson-css/README.markdown
@@ -0,0 +1,11 @@
+# muson.css
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/fossheim/pen/BapZQjK](https://codepen.io/fossheim/pen/BapZQjK).
+
+Muson toy synth drawn entirely in HTML & CSS.
+
+ Tutorials: https://fossheim.io
+ Patreon: https://patreon.com/fossheim
+ Buy Me A Coffee: https://buymeacoffee.com/fossheim
+ 
+ Inspired by the Muson toy synth.
diff --git a/muson-css/dist/index.html b/muson-css/dist/index.html
new file mode 100644
index 0000000..9026917
--- /dev/null
+++ b/muson-css/dist/index.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - muson.css</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- Page: https://fossheim.io -->
+<!-- Patreon: https://patreon.com/fossheim -->
+<!-- Buy Me A Coffee: https://buymeacoffee.com/fossheim -->
+
+<!-- Inspired by the Muson toy synth -->
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+      <div class="muson" aria-label="Muson Synth Illustration">
+        <div class="top-bar">
+          <div class="speaker-bar"><div class="speakers"></div></div>
+          <div class="muson-frame"><div class="rainbow"></div></div>
+        </div>
+        <div class="range-container" aria-hidden="true">
+          <div class="range-plate">
+            <div class="left">
+              <ul class="ranges">
+                <li>1–4</li>
+                <li>1–6</li>
+                <li>1–8</li>
+                <li>1–10</li>
+              </ul>
+              <p>Range</p>
+              <div class="slider-wrapper">
+                <div class="slider"></div>
+              </div>
+            </div>
+            <div class="center">
+              <p>Volume</p>
+              <ul>
+                <li>Lo</li>
+                <li>Med</li>
+                <li>High</li>
+              </ul>
+              <div class="switch-wrapper">
+                <div class="switch-button"></div>
+              </div>
+            </div>
+            <div class="right">
+              <p>Mode</p>
+              <ul>
+                <li>Off</li>
+                <li>Organ</li>
+                <li>Organ <br />& Synth</li>
+              </ul>
+              <div class="slider-wrapper">
+                <div class="slider"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="button-container">
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+        </div>
+        <div class="letter-container" aria-hidden="true">
+          <div>
+            <p>C</p>
+          </div>
+          <div>
+            <p>D</p>
+          </div>
+          <div>
+            <p>E</p>
+          </div>
+          <div>
+            <p>F</p>
+          </div>
+          <div>
+            <p>G</p>
+          </div>
+          <div>
+            <p>A</p>
+          </div>
+          <div>
+            <p>B</p>
+          </div>
+          <div>
+            <p>C</p>
+          </div>
+          <div>
+            <p>D</p>
+          </div>
+          <div>
+            <p>E</p>
+          </div>
+        </div>
+        <div class="key-container">
+          <div style="z-index: 12;"></div>
+          <div style="z-index: 11;"></div>
+          <div style="z-index: 10;"></div>
+          <div style="z-index: 9;"></div>
+          <div style="z-index: 8;"></div>
+          <div style="z-index: 7;"></div>
+          <div style="z-index: 6;"></div>
+          <div style="z-index: 5;"></div>
+          <div style="z-index: 4;"></div>
+          <div style="z-index: 3;"></div>
+        </div>
+        <div class="speed-container" aria-hidden="true">
+          <p>Fast</p>
+          <div class="speed-slider"></div>
+          <div class="speed-button-container">
+            <div class="speed-button"></div>
+          </div>
+          <p>Slow</p>
+        </div>
+        <div class="vol-container" aria-hidden="true">
+          <p>High</p>
+          <div class="vol-slider"></div>
+          <div class="vol-button-container">
+            <div class="vol-button"></div>
+          </div>
+          <p>Low</p>
+        </div>
+      </div>
+    </body>
+</html>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/muson-css/dist/style.css b/muson-css/dist/style.css
new file mode 100644
index 0000000..5b23867
--- /dev/null
+++ b/muson-css/dist/style.css
@@ -0,0 +1,1387 @@
+/*  
+ Page: https://fossheim.io
+ Patreon: https://patreon.com/fossheim
+ Buy Me A Coffee: https://buymeacoffee.com/fossheim
+ 
+ Inspired by the Muson toy synth.
+*/
+
+
+:root {
+    --letter-1: #2E1F23;
+    --letter-2: #1A1A24;
+
+    --button-1: #171310;
+    --button-2: #18171F;
+    --button-3: #353541;
+    --button-4: #302E33;
+
+    --center-1: #0F1622;
+    --center-2: #171D33;
+    --center-3: #222632;
+    --center-4: #313842;
+
+    --center-5: #1C1F30;
+    --center-6: #3D3A4D;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #CFD6F0;
+    background-image: linear-gradient(45deg, #CFD6F0, #F0F2FE);
+    min-height: 100vh;
+}
+
+.muson {
+    display: block;
+
+    position: absolute;
+    top: 120px;
+    top: calc(50vh - 300px);
+    left: 0;
+    right: 0;
+
+    margin: 0 auto;
+
+    width: 790px;
+    height: 610px;
+
+    border-radius: 6px;
+
+    background-color: #FFD9D0;
+    background-image: linear-gradient(
+        135deg,
+        #EFC4BB,
+        #F6D0C7,
+        #FDE0DA
+    );
+
+    box-shadow: 2px 0 1.5px -1.5px #7C5558 inset,
+        3.5px 0 2.5px -2.5px #AE857F inset,
+        4.5px 0 2.5px -2.5px #D8B5AF inset,
+        5.5px 0 2.5px -2.5px #DBBBB0 inset,
+        6.5px 0 2.5px -2.5px #DFBDB1 inset,
+        
+        -3px 0 2px -2px #F9EAE5 inset,
+        -3.5px 0 2px -2px #FFF0ED inset,
+        -4.5px 0 2px -2px #FDDFD4 inset,
+        -5.5px 0 2px -2px #FEE1DB inset,
+        
+        0 2px 2px -2px #EBCDCF inset,
+        0 4px 2px -2px #EEC8C7 inset,
+        0 5px 2px -2px #F4CFC7 inset,
+        
+        0 -2px 1.5px -1.5px #E8D4DD inset,
+        0 -4.5px 1.5px -1.5px #F4CFC7 inset,
+        0 -5px 1.5px -1.5px #FFFDFB inset,
+        
+        -30px -30px 10px rgba(114, 86, 98, 0.05),
+        -25px -25px 10px rgba(114, 86, 98, 0.1),
+        -20px -20px 10px rgba(114, 86, 98, 0.075),
+        -10px -10px 10px rgba(114, 86, 98, 0.1),
+        -5px -5px 10px rgba(114, 86, 98, 0.125),
+        -50px -90px 30px rgba(114, 86, 98, 0.15),
+        -45px -80px 30px rgba(114, 86, 98, 0.125),
+        -40px -70px 30px rgba(114, 86, 98, 0.1),
+        -35px -60px 30px rgba(114, 86, 98, 0.075),
+        -45px -50px 30px rgba(114, 86, 98, 0.05),
+        
+        -2px 0 5px rgba(137, 124, 142, 0.5),
+        0 0 10px rgba(137, 124, 142, 0.1),
+        0 0 20px rgba(137, 124, 142, 0.05),
+        0 0 50px rgba(255, 245, 250, 0.5);
+}
+
+.top-bar {
+    display: block;
+    width: 805px;
+    height: 220px;
+    margin-left: -8px;
+    border-radius: 6px 6px 2px 2px;
+    background-image: linear-gradient(#FAD2CA, #F9D1C7);
+
+    box-shadow: 2px 0 1.5px -1.5px #7C5558 inset,
+        3.5px 0 2.5px -2.5px #AE857F inset,
+        4.5px 0 2.5px -2.5px #D8B5AF inset,
+        5.5px 0 2.5px -2.5px #DBBBB0 inset,
+        6.5px 0 2.5px -2.5px #DFBDB1 inset,
+        
+        -3px 0 2px -2px #F9EAE5 inset,
+        -3.5px 0 2px -2px #FFF0ED inset,
+        -4.5px 0 2px -2px #FDDFD4 inset,
+        -5.5px 0 2px -2px #FEE1DB inset,
+        
+        0 2px 2px -2px #EBCDCF inset,
+        0 4px 2px -2px #EEC8C7 inset,
+        0 5px 2px -2px #F4CFC7 inset,
+        
+        0 -2px 1.5px -1.5px #F9D1C7 inset,
+        0 -4.5px 1.5px -1.5px #F9D1C7 inset,
+        0 -5px 1.5px -1.5px #FFEAE4 inset,
+        
+        
+        2px 12px 1.5px -6px #F9D1C7,
+        1px 11px 1.5px -6px #F9D1C7,
+        1px 10px 1.5px -6px #F9D1C7,
+        1px 9px 1.5px -5px #F9D1C7,
+        1px 8px 1.5px -5px #F9D1C7,
+        1px 7px 1.5px -5px #F9D1C7,
+        1px 6px 1.5px -5px #F9D1C7,
+        3px 5px 1.5px -2px #F9D1C7,
+        2px 4px 1.5px -2px #F9D1C7,
+        1px 3px 1.5px -2px #F9D1C7,
+        
+        3px 13px 1px -6px #F9D1C7,
+        3px 12px 4px -6px rgba(126, 80, 67, 0.25),
+        -2px 25px 30px -3px rgba(126, 80, 67, 0.025),
+        -2px 35px 35px -3px rgba(126, 80, 67, 0.075);
+
+    position: relative;
+}
+
+.muson-frame {
+    display: block;
+    width: 310px;
+    height: 165px;
+    background-color: transparent;
+    
+    position: absolute;
+    top: 25px;
+    right: 65px;
+
+    border-radius: 1px;
+
+    box-shadow: 1px -1px 1px #DEB3AC inset,
+        -2px 0 1px -1px #FFDBD3 inset,
+        0 -1.5px 1px #FFDFD3 inset,
+        0 70.25px 1px -70px #B58475;
+}
+
+.muson-frame:before {
+    content: "";
+    display: block;
+    width: 320px;
+    height: 25px;
+    border-radius: 0 0 2px 2px;
+
+    background-color: transparent;
+
+    position: absolute;
+
+    top: -25px;
+    left: -10px;
+
+    box-shadow: -0.5px 1.25px 0.75px -0.25px #D4A89D,
+        0.5px 0 0.75px -0.25px #F3C9BD,
+        0 -1px 0.5px -0.5px rgba(243, 204, 197, 1),
+        0 -1px 1px #F7CBC0 inset,
+        0 0 3px 4px #FCD1CA inset;
+}
+
+.muson-frame:after {
+    content: "";
+    display: block;
+    width: 45px;
+    height: 39px;
+    border-radius: 0.5px;
+
+    background-image: radial-gradient(rgba(255, 222, 213, 0.25), rgba(255, 222, 213, 0) 60%),
+        repeating-linear-gradient(#F8D2C5 0 24%, #FDD9C9 25% 49%, #F6D1BF 50% 74%, #FDD4C0 75% 100%);
+    background-size: 100% 100%, 4px 4px;
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+
+    opacity: 0.95;
+
+    box-shadow: 0 -1.5px 1px -0.5px #DEB3AC inset,
+        0 -2px 1px -0.5px #FFDFD3 inset,
+        -1px 0 1px #FFDED5 inset,
+        1px 0 1px -0.5px #FFDED5,
+        1px 0 1px #FBD5CA inset,
+        -1px 0 1px -0.5px #FBD5CA,
+        0 1.75px 1px -1px #B58475;
+}
+
+.rainbow {
+    display: block;
+    width: 290px;
+    height: 120px;
+
+    position: absolute;
+    top: 7px;
+    left: 8px;
+
+    background-color: #fff;
+    background-image: linear-gradient(#1E202F 0 12%,
+        #495AC2 12.5% 24.5%,
+        #1250C7 25% 37%,
+        #039CEC 37.5% 49.5%,
+        #DFC63F 50% 62%,
+        #FED13F 62.5% 74.5%,
+        #FC672F 75% 87%,
+        #FD3A48 87.5% 100%
+    );
+    
+    border-radius: 1px;
+
+    box-shadow: 0 -2px 2px -2px rgba(255, 220, 211, 1) inset,
+        0px 0 1.25px 1px #FEDDD6 inset,
+        0 0 1px 1.5px rgba(82, 58, 56, 0.5) inset,
+        0 0 2.5px 3px rgba(82, 58, 56, 0.2) inset,
+        0 0 4px 5px rgba(82, 58, 56, 0.1) inset,
+        -1px 0 1px #DDDAE3,
+        0 0 5px 3px #F6DACF;
+}
+
+.speaker-bar {
+    display: block;
+    width: 365px;
+    height: 219px;
+
+    background-color: transparent;
+    
+    border-radius: 6px 6px 2px 2px;
+    position: absolute;
+    top: 1px;
+    left: 2px;
+
+    box-shadow: 0 -10px 2px -2px #F9D1C7 inset,
+        0 0 1px #F9D1C7,
+        -10px 0 3px -3px #FFE0D3 inset,
+        5px 0 3px -3px #FFE0D3,
+        7px 0 2px -5px rgba(166, 122, 111, 0.15),
+        21px 0 3px -20px rgba(95, 64, 56, 0.15),
+        -9px -5px 5px rgba(254, 210, 201, 0.5) inset;
+
+}
+
+.speakers {
+    display: block;
+    width: 175px;
+    height: 180px;
+
+    border-radius: 100px;
+
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    top: 15px;
+
+    background-image: linear-gradient(90deg, transparent, #E8C2B6 20% 80%, transparent),
+        linear-gradient(transparent 0 12.5%, 
+            #EECEC1 12.5% 25%,
+            #67473C 37.5% 50%, 
+            #4A251F 50% 62.5%, 
+            transparent 82% 100%
+        ), linear-gradient(
+            #EEC4B4,
+            #E8C6BC
+        );
+    background-size: 6px 100%, 9px 9px, 100% 100%;
+    background-repeat: no-repeat, repeat, repeat;
+    background-position: center center, top left, top left;
+
+    box-shadow: 0 0 2px 0.5px #F9D1C7,
+        -1.75px -1.75px 1.5px -1px #F9D1C7,
+        -2px -2px 5px -2px #F9D1C7,
+
+        -5px -25px 20px -5px rgba(83, 23, 0, 0.05) inset,
+        -5px -15px 15px -5px rgba(83, 23, 0, 0.05) inset,
+        -10px -35px 30px -10px rgba(83, 23, 0, 0.025) inset,
+
+        5px 25px 20px -5px rgba(255, 243, 238, 0.1) inset,
+        5px 15px 15px -5px rgba(255, 243, 238, 0.05) inset,
+        10px 35px 30px -10px rgba(255, 243, 238, 0.025) inset,
+
+        0 0 2px 0.5px #FEDCD3 inset,
+        -2px -2px 5px -1px rgba(245, 203, 191, 0.5) inset,
+        0 14px 1px 25.5px #F6D0C7 inset,
+        0 14px 1px 26.5px #EFC1B2 inset,
+        0 14px 1px 30px #F0C3B0 inset;
+}
+
+.key-container {
+    display: grid;
+    width: 435px;
+    height: 100px;
+
+    grid-template-columns: repeat(10, 1fr);
+    column-gap: 3px;
+
+    position: absolute;
+    bottom: 35px;
+    left: 177px;
+    border-radius: 1px;
+    background-color: #821510;
+
+    box-shadow: -10px -10px 10px -5px rgba(58, 12, 2, 0.2),
+    
+        -2px 0 1px #BCA7A6 inset,
+        1px 1px 1px 1px #E8D1C9,
+        2px 2px 2px 1px #FFE3D5,
+        3px 3px 4px 1px #FDE0D2,
+        
+        -1px -1px 1px 0 #8E675F;
+}
+
+.key-container > div {
+    background-color: #fff;
+    background-image: linear-gradient(90deg,
+        #E7EDF9,
+        #F0F4FD
+    );
+    border-radius: 5px;
+    position: relative;
+    top: -3px;
+    left: -2px;
+    height: 100%;
+    height: calc(100% + 2px);
+
+
+    box-shadow: -5px 0 4px -2px #EDECFA inset,
+        -8px 0 6px -6px #EBEFF8 inset,
+        3px 0 1px -1px #E9D4CF inset,
+        6px 0 5px -5px #E1E8FA inset,
+
+        0 0 0.25px 0.25px #E9D4CF,
+        -0.75px -0.75px 1px -0.5px #E9D4CF,
+        0 1px 1px #BEA19B,
+        
+        -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
+        -7px -3px 7px rgba(201, 149, 135, 0.55),
+        -10px -10px 15px rgba(201, 149, 135, 0.25);
+}
+
+.letter-container {
+    display: grid;
+    width: 450px;
+    height: 66px;
+
+    background-color: transparent;
+
+    grid-template-columns: repeat(10, 1fr);
+    column-gap: 1px;
+
+    position: absolute;
+    bottom: 145px;
+    left: 170px;
+
+    border-radius: 3px;
+
+    box-shadow: -0.5px -0.5px 0.75px #B98A7A,
+        -2px -2px 2px #E0B9A8,
+        0.5px 0.5px 1px -0.25px #E1B8A6 inset,
+        1px 1px 1px 0.5px #E9BCA9 inset,
+        4px 4px 4px rgba(251, 228, 222, 0.25) inset;
+
+    padding: 5px;
+}
+
+.letter-container > div {
+    background-color: #19161D;
+    background-image: linear-gradient(
+        var(--letter-1) 20%,
+        var(--letter-2) 30% 50%,
+        #2C2934 50%,
+        #1C1B29,
+        #342127
+    );
+
+    border-radius: 1px;
+
+    box-shadow: 0 0.5px 0.5px #A6857E inset,
+        0 1px 2px rgba(67, 38, 40, 0.25) inset,
+        0.5px 0 0.25px rgba(105, 90, 95, 0.5),
+        
+        0 -1px 0.5px #4D3326 inset,
+        0 -15px 5px -5px #2A1A1A inset,
+        0 1px 1px #D6B6A7,
+        0 5px 3px #F0D0C1,
+        
+        0 12px 5px rgba(26, 26, 36, 0.1) inset;
+
+    position: relative;
+}
+
+.letter-container > div:nth-child(2) {
+    --letter-1: #D55622;
+    --letter-2: #E05F0B;
+}
+
+.letter-container > div:nth-child(3) {
+    --letter-1: #FE3339;
+    --letter-2: #FE3336;
+}
+
+.letter-container > div:nth-child(4) {
+    --letter-1: #F84524;
+    --letter-2: #FA5229;
+}
+
+.letter-container > div:nth-child(5) {
+    --letter-1: #F78336;
+    --letter-2: #FA9634;
+}
+
+.letter-container > div:nth-child(6) {
+    --letter-1: #FDC32A;
+    --letter-2: #FCDA47;
+}
+
+.letter-container > div:nth-child(7) {
+    --letter-1: #DEBF27;
+    --letter-2: #D8D03D;
+}
+
+.letter-container > div:nth-child(8) {
+    --letter-1: #03A7DA;
+    --letter-2: #0BB3FA;
+}
+
+.letter-container > div:nth-child(9) {
+    --letter-1: #2D50B4;
+    --letter-2: #3362CA;
+}
+
+.letter-container > div:nth-child(10) {
+    --letter-1: #734897;
+    --letter-2: #6D56BE;
+}
+
+.letter-container > div > p {
+    position: absolute;
+    bottom: 6px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    text-align: center;
+    font-size: 13px;
+    color: #E6DFEF;
+    font-family: sans-serif;
+    text-shadow: 0.15px 0 0.5px #E6DFEF,
+        -0.15px 0 0.5px #E6DFEF,
+        1px 0 1px #33292A,
+        -2px 0 2px #1A1420;
+}
+
+.button-container {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    column-gap: 1px;
+
+    width: 450px;
+    height: 65px;
+    border-radius: 2px;
+
+    position: absolute;
+    left: 170px;
+    bottom: 220px;
+
+    background-color: transparent;
+
+    box-shadow: 0 0 2px #DDABA0 inset,
+        0 0 1px #DDABA0,
+        0 -1px 2px #F1CBC2,
+        0 -1.5px 2px #FDE4DD,
+        0 1px 2px #E9CDBF,
+        0 1.5px 2px #FADACF,
+        
+        0 1.5px 1.5px -0.5px #D69C8E inset,
+        0 10px 10px -5px #E0B2A2 inset,
+        0 -10px 5px -5px rgba(178, 83, 65, 1) inset;
+}
+
+.button-container .button {
+    border-radius: 3px;
+
+    background-image: linear-gradient(
+        var(--button-1),
+        var(--button-2),
+        var(--button-3),
+        var(--button-4)
+    );
+
+    box-shadow: 0 0 0.25px var(--button-3),
+        -0.5px -0.75px 1px  rgba(241, 249, 255, 0.15) inset,
+        -0.75px -1.5px 1.5px rgba(44, 6, 13, 0.05) inset,
+    
+        0 -0.5px 0.75px 0.25px var(--button-1),
+        0 0.5px 0.75px 0.25px var(--button-4),
+
+        0 -0.75px 2px -0.75px var(--button-1),
+        0 0.75px 2px -0.75px var(--button-4),
+
+        -0.5px -2px 3px 0.75px rgba(44, 6, 13, 0.9),
+        -15px -20px 20px 2px rgba(150, 90, 64, 0.35),
+        
+        -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
+        -7px -3px 7px rgba(201, 149, 135, 0.55),
+        -10px -10px 15px rgba(201, 149, 135, 0.25);
+
+    position: relative;
+    bottom: -3px;
+    left: -1.5px;
+
+    z-index: 11;
+
+    height: 100%;
+    height: calc(100% - 3px);
+}
+
+.button-container .button:nth-child(2) {
+    --button-1: #884B36;
+    --button-2: #8A4631;
+    --button-3: #BD6E48;
+    --button-4: #C2724D;
+
+    --center-1: #AC5B3D;
+    --center-2: #AE5E43;
+    --center-3: #BD6E48;
+    --center-4: #AA624A;
+    --center-5: #AE5E3D;
+    --center-6: #C77E5B;
+
+    z-index: 10;
+}
+
+.button-container .button:nth-child(3) {
+    --button-1: #C1353E;
+    --button-2: #C22B3A;
+    --button-3: #E42D49;
+    --button-4: #E32C3E;
+
+    --center-1: #D5132B;
+    --center-2: #DD1F3B;
+    --center-3: #E42849;
+    --center-4: #E33E50;
+    --center-5: #D51A39;
+    --center-6: #F44661;
+    
+    z-index: 9;
+}
+
+.button-container .button:nth-child(4) {
+    --button-1: #CC3929;
+    --button-2: #D73825;
+    --button-3: #FD5332;
+    --button-4: #F2501F;
+
+    --center-1: #F83D1E;
+    --center-2: #FD4022;
+    --center-3: #FC4D2E;
+    --center-4: #FF5A3D;
+    --center-5: #F0361F;
+    --center-6: #FF6959;
+    
+    z-index: 8;
+}
+
+.button-container .button:nth-child(5) {
+    --button-1: #F2AC26;
+    --button-2: #F0AC19;
+    --button-3: #F0B31C;
+    --button-4: #ECAF19;
+
+    --center-1: #E8A321;
+    --center-2: #F0AD14;
+    --center-3: #F3B61D;
+    --center-4: #F1A943;
+    --center-5: #EBAA09;
+    --center-6: #FBC131;
+    
+    z-index: 7;
+}
+
+.button-container .button:nth-child(6) {
+    --button-1: #FCB829;
+    --button-2: #F7CF31;
+    --button-3: #FFDB3C;
+    --button-4: #FBDB4C;
+
+    --center-1: #FFD531;
+    --center-2: #F6DC41;
+    --center-3: #FFDA3B;
+    --center-4: #FFE470;
+    --center-5: #FFD038;
+    --center-6: #FFE160;
+    
+    z-index: 6;
+}
+
+.button-container .button:nth-child(7) {
+    --button-1: #B5D496;
+    --button-2: #A1D890;
+    --button-3: #B5F4A7;
+    --button-4: #B3EAA4;
+
+    --center-1: #BDE899;
+    --center-2: #B8ED9F;
+    --center-3: #C6F6AA;
+    --center-4: #B7E6B8;
+    --center-5: #C6F6AC;
+    --center-6: #D9FEBB;
+    
+    z-index: 5;
+}
+
+.button-container .button:nth-child(8) {
+    --button-1: #3F88B5;
+    --button-2: #3494C7;
+    --button-3: #0FCEFB;
+    --button-4: #15CAF7;
+
+    --center-1: #26B7F0;
+    --center-2: #05BEFF;
+    --center-3: #04C6FB;
+    --center-4: #23D7FF;
+    --center-5: #08C2F5;
+    --center-6: #22D9FF;
+    
+    z-index: 4;
+}
+
+.button-container .button:nth-child(9) {
+    --button-1: #4058A2;
+    --button-2: #3C5FB9;
+    --button-3: #0D7BF4;
+    --button-4: #2680F8;
+
+    --center-1: #1864DC;
+    --center-2: #0071F1;
+    --center-3: #1A7DE5;
+    --center-4: #346DD4;
+    --center-5: #016EE3;
+    --center-6: #5298F0;
+    
+    z-index: 3;
+}
+
+.button-container .button:nth-child(10) {
+    --button-1: #3D306E;
+    --button-2: #503C79;
+    --button-3: #6A5ABD;
+    --button-4: #6A5ABD;
+
+    --center-1: #5141A3;
+    --center-2: #5647AE;
+    --center-3: #6052B3;
+    --center-4: #6758AB;
+    --center-5: #574DAE;
+    --center-6: #7B6BCE;
+    
+    z-index: 2;
+}
+
+.button-container .button .center {
+    display: block;
+    width: 100%;
+    height: 35px;
+    
+    width: calc(100% + 2px);
+
+    border-radius: 2px;
+
+    position: absolute;
+    top: 15px;
+    left: -1px;
+
+    background-image: linear-gradient(
+        var(--center-1),
+        var(--center-2),
+        var(--center-3)
+    );
+
+    box-shadow: 0 0 0.5px var(--center-3),
+    
+    -3px -20px 14px 3px rgba(20, 7, 14, 0.15),
+    3px 20px 14px -3px rgba(241, 249, 255, 0.025),
+    -3px -17px 14px -3px rgba(241, 249, 255, 0.025),
+
+    0 -20px 10px -10px rgba(44, 6, 13, 0.05) inset,
+    0 -0px 10px -10px rgba(44, 6, 13, 0.05) inset,
+    0 30px 20px -10px rgba(241, 249, 255, 0.05) inset,
+    
+    0 -0.25px 0.75px 0.25px var(--center-1),
+    0 0.5px 0.75px 0.25px var(--center-3),
+
+    0 -0.75px 2px -0.75px var(--center-1),
+    0 0.75px 2px -0.75px var(--center-3),
+    
+    0 1px 1.75px -0.75px var(--center-4) inset,
+    0 -3px 4px -3px var(--center-5) inset,
+    
+    0 3px 3px -3px var(--center-6),
+    
+    0 -4px 7px -4px var(--center-1),
+    0 4px 7px -4px var(--center-6);
+}
+
+.button-container .button .center:nth-child(1) { z-index: 22; }
+.button-container .button .center:nth-child(2) { z-index: 21; }
+.button-container .button .center:nth-child(3) { z-index: 20; }
+.button-container .button .center:nth-child(4) { z-index: 19; }
+.button-container .button .center:nth-child(5) { z-index: 18; }
+.button-container .button .center:nth-child(6) { z-index: 17; }
+.button-container .button .center:nth-child(7) { z-index: 16; }
+.button-container .button .center:nth-child(8) { z-index: 15; }
+.button-container .button .center:nth-child(9) { z-index: 14; }
+.button-container .button .center:nth-child(10) { z-index: 13; }
+
+.range-container {
+    display: block;
+    width: 490px;
+    height: 92px;
+    background-color: transparent;
+
+    position: absolute;
+    left: 150px;
+    bottom: 290px;
+
+    border-radius: 0 0 6px 6px;
+
+    box-shadow: -1px 1px 3px -1px #945A42,
+        0.5px -1px 1px #945A42 inset,
+        -4px 2px 7px -2.25px #BD8974,
+        1px -1px 1px -1px #BD8974 inset,
+        1px -1px 1.5px -1px #CF9981 inset,
+        
+        -0.5px -0.5px 0.5px #FFEDE0 inset,
+        -1.5px -1.5px 2px -1px #FFE8DB inset,
+        -4px -1.5px 4px -2px #FEDACA inset,
+        
+        2px 1px 2px -1px #FEDACA,
+        
+        0 0 10px #FBDAD1,
+        -10px 10px 25px rgba(60, 3, 0, 0.015);
+}
+
+.range-plate {
+    display: block;
+    width: 455px;
+    height: 65px;
+
+    position: absolute;
+    left: 17px;
+    top: 11px;
+
+    border-radius: 1.5px;
+
+    background-color: #BBC9E6;
+
+    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
+        linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
+        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
+        radial-gradient(#7B84A3, #929CB7, #BBC9E6);
+    background-size: 100% 4px, 
+        20% 100%, 
+        200px 200px, 
+        200% 300%;
+    background-repeat: repeat, 
+        repeat, 
+        no-repeat, 
+        no-repeat;
+    background-position: center center, 
+        center center, 
+        center center, 
+        100% 50%;
+
+    box-shadow: 0 0 1px 0.25px #F6D0C7 inset,
+        0 -0.5px 0.75px 0.5px #8D6E6C inset,
+        0 0.75px 0.5px 0.25px #E7C9C7,
+        0 0.5px 2.5px 1.5px #F6D5CE,
+        
+        0 0 10px rgba(100, 98, 120, 0.25) inset;
+
+}
+
+.ranges {
+    list-style-type: none;
+    font-family: sans-serif;
+    font-weight: 600;
+    color: #1F233E;
+
+    font-size: 8px;
+    position: absolute;
+    top: 6px;
+
+    text-shadow: 0 0 0.2px #1F233E,
+        0 0 1px #BCBCD0;
+}
+
+.ranges li {
+    margin-bottom: 6px;
+}
+
+.left .ranges {
+    left: 27px;
+}
+
+.left .ranges li:first-child {
+    margin-left: 10px;
+}
+
+.left .ranges li:last-child {
+    margin-left: 6px;
+}
+
+.left .slider-wrapper {
+    width: 50px;
+    height: 50px;
+
+    background-color: #606B89;
+
+    position: absolute;
+    left: 50.25px;
+    top: 9.25px;
+
+    border-radius: 50px;
+
+    background-image: linear-gradient(20deg, #484653, #606B89, #8792AE);
+
+    box-shadow: -0.5px 0.5px 0.5px #606B89,
+        0 0 1px 0.15px #606B89 inset,
+        0 0 1px 0.25px #606B89,
+        0 0 4px 1px #7886A1,
+        
+        0 15px 10px -2px rgba(51, 46, 52, 0.25),
+
+        -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
+        
+        -12px -25px 17px 4px rgba(62, 21, 8, 0.22),
+        -30px -45px 25px 4px rgba(62, 21, 8, 0.125),
+        -45px -50px 35px 8px rgba(62, 21, 8, 0.125),
+        
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
+        
+        0 0 20px 3px rgba(202, 206, 217, 0.75);
+}
+
+.left .slider {
+    display: block;
+    width: 50px;
+    height: 50px;
+
+    background-color: black;
+
+    border-radius: 100px;
+
+    position: absolute;
+    left: -3.25px;
+    top: -3.25px;
+
+    background-image: linear-gradient(90deg, rgba(17, 18, 23, 0.5), transparent),
+        radial-gradient(#1A2332, #1C1F2D 66%, transparent 69%),
+        linear-gradient(90deg, rgba(17, 18, 23, 0.75), transparent),
+        linear-gradient(rgba(24, 31, 49, 0.9), transparent),
+        linear-gradient(45deg, transparent 30%, #7C899C, transparent 70%),
+        linear-gradient(-45deg, transparent 30%, #7C899C, transparent 70%),
+        radial-gradient(#1A2332, #1C1F2D, #10172A);
+
+    box-shadow: 0 0 1px 0.75px #10172A,
+        0 0 2px 0.75px rgba(67, 68, 88, 0.5);
+}
+
+.left p {
+    text-transform: uppercase;
+    font-family: sans-serif;
+    font-weight: 600;
+    font-size: 6.5px;
+    color: #1F233E;
+    letter-spacing: 0.75px;
+
+    position: absolute;
+    left: 107px;
+    top: 29px;
+
+    text-shadow: 0 0 0.2px #1F233E,
+        0 0 1px #959AB2;
+}
+
+.center p, .center ul li {
+    text-transform: uppercase;
+    font-family: sans-serif;
+    font-weight: 600;
+    font-size: 6px;
+    color: #1F233E;
+    letter-spacing: 0.5px;
+
+    text-shadow: 0 0 0.2px #1F233E,
+        0 0 1px #959AB2;
+
+    list-style-type: none;
+}
+
+.center p {
+    text-align: center;
+
+    position: absolute;
+    top: 6px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+}
+
+.center ul {
+    position: absolute;
+    bottom: 6px;
+    left: 200px;
+}
+
+.center ul li {
+    display: inline-block;
+    margin-right: 6px;
+}
+
+.switch-wrapper {
+    display: block;
+    width: 35px;
+    height: 17px;
+
+    background-color: #0B090E;
+
+    border-radius: 35px;
+
+    position: absolute;
+    left: 210px;
+    top: 22px;
+
+    background-image: linear-gradient(rgba(30, 31, 57, 0), rgba(30, 31, 57, 0.5), rgba(30, 31, 57, 0)),
+        linear-gradient(#09080E, #0A090F);
+
+    box-shadow: 0 0.5px 0.5px #353245 inset,
+        0 -0.25px 0.5px #4F515E inset,
+        0 -0.75px 0.75px #30354B inset,
+        0 1px 1px -0.25px #55515F inset,
+        0 1.25px 1px -0.5px #28252E inset,
+        0 0 5px 1px #1E1F39 inset,
+        
+        0 0 0.5px 0.25px #353245,
+        0 0 1px #B4B9CC,
+        0 0.15px 2.5px -0.5px #9FA5BE,
+        
+        0 10px 10px -3px rgba(208, 209, 227, 0.5),
+        0 20px 20px rgba(208, 209, 227, 0.35);
+}
+
+.switch-button {
+    display: block;
+    width: 15px;
+    height: 15px;
+    border-radius: 15px;
+
+    background-color: #140E1C;
+
+    position: absolute;
+    top: 0.35px;
+    left: 0.45px;
+
+    background-image: radial-gradient(rgba(208, 209, 227, 0.5), rgba(208, 209, 227, 0) 40%),
+        linear-gradient(90deg, #140E1C, #2D2C3C);
+
+    background-repeat: no-repeat,
+        no-repeat;
+
+    background-size: 120% 140%,
+        100% 100%;
+
+    background-position: 3px 3px,
+        top left;
+
+    box-shadow: 0 0 0.5px 0.75px #9A9CA9 inset,
+        0 0 0.15px #9A9CA9,
+        0 0 0.5px 0.25px #1B1B25,
+        0 0 1px #1E1E26,
+        
+        0 5px 10px -2px rgba(51, 46, 52, 0.25),
+
+        -5px -10px 10px 2px rgba(62, 21, 8, 0.15),
+        -10px -17px 20px 5px rgba(62, 21, 8, 0.1),
+        -20px -23px 25px 6px rgba(62, 21, 8, 0.15),
+        -30px -35px 30px 10px rgba(62, 21, 8, 0.1);
+}
+
+
+.right .slider-wrapper {
+    width: 50px;
+    height: 50px;
+
+    background-color: #606B89;
+
+    position: absolute;
+    right: 50.25px;
+    top: 9.25px;
+
+    border-radius: 50px;
+
+    background-image: linear-gradient(20deg, #3C3642, #4B485B, #535166);
+
+    box-shadow: -0.5px 0.5px 0.5px #606B89,
+        0 0 1px 0.15px #606B89 inset,
+        0 0 1px 0.25px #606B89,
+        0 0 4px 1px #7886A1,
+        
+        0 15px 10px -2px rgba(51, 46, 52, 0.25),
+
+        -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
+        
+        -12px -25px 17px 4px rgba(62, 21, 8, 0.15),
+        -30px -45px 25px 4px rgba(62, 21, 8, 0.075),
+        -45px -50px 35px 8px rgba(62, 21, 8, 0.075),
+        
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
+        
+        0 0 20px 3px rgba(202, 206, 217, 0.75);
+}
+
+.right .slider {
+    display: block;
+    width: 50px;
+    height: 50px;
+
+    background-color: black;
+
+    border-radius: 100px;
+
+    position: absolute;
+    left: 3.5px;
+    top: -3.5px;
+
+    background-image: radial-gradient(#1F273A, rgba(22, 26, 38, 1) 66%, transparent 69%),
+        linear-gradient(90deg, rgba(22, 26, 38, 0.75), transparent),
+        linear-gradient(rgba(24, 31, 49, 0.9), transparent),
+        linear-gradient(45deg, transparent 30%, #7C899C, transparent 70%),
+        linear-gradient(-45deg, transparent 30%, #7C899C, transparent 70%),
+        radial-gradient(#1F273A, #212C42, #171D2D);
+
+    box-shadow: 0 0 1px 0.75px rgba(22, 26, 38, 1),
+        0 0 2px 0.75px rgba(67, 68, 88, 0.5);
+}
+
+.right ul, .right p {
+    text-transform: uppercase;
+    font-family: sans-serif;
+    font-weight: 600;
+    color: #1F233E;
+
+    font-size: 6.5px;
+
+    letter-spacing: 0.5px;
+
+    text-shadow: 0 0 0.2px #1F233E,
+        0 0 1px #BCBCD0;
+}
+
+.right ul {
+    list-style-type: none;
+    
+    position: absolute;
+    left: 415px;
+    top: 9px;
+}
+
+.right ul li {
+    margin-bottom: 9px;
+}
+
+.right ul li:first-child {
+    margin-left: -7px;
+}
+
+.right ul li:last-child {
+    margin-left: -5px;
+}
+
+.right p {
+    position: absolute;
+    top: 30px;
+    left: 325px;
+}
+
+.speed-container {
+    display: block;
+    width: 40px;
+    height: 150px;
+
+    background-color: #656581;
+    
+    border-radius: 1px;
+
+    position: absolute;
+    left: 60px;
+    top: 360px;
+
+    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
+        linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
+        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
+        radial-gradient(#7B84A3, #929CB7, #BBC9E6);
+    background-size: 100% 4px, 
+        20% 100%, 
+        200px 200px, 
+        200% 300%;
+    background-repeat: repeat, 
+        repeat, 
+        no-repeat, 
+        no-repeat;
+    background-position: center center, 
+        center center, 
+        center center, 
+        100% 50%;
+
+
+    box-shadow: 0 0 1px #E1C3B8 inset,
+        0 0 1px 0.5px #DFC6C1,
+        0 0 2px 1px #E2C1BA,
+        0.5px 0 0.5px 0.5px #929CB7 inset,
+        -0.5px 0 0.5px 0.5px #929CB7 inset;
+}
+
+.speed-container p {
+    text-transform: uppercase;
+    font-family: sans-serif;
+    font-weight: 600;
+    color: #1F233E;
+
+    font-size: 7px;
+
+    letter-spacing: 0.5px;
+
+    text-shadow: 0 0 0.2px #1F233E,
+        0 0 1px #929CB7;
+}
+
+.speed-container p:first-child {
+    position: absolute;
+    top: 5px;
+    left: 10px;
+}
+
+.speed-container p:last-child {
+    position: absolute;
+    bottom: 3px;
+    left: 9px;
+}
+
+.speed-slider {
+    display: block;
+    width: 5px;
+    height: 100px;
+    border-radius: 6px;
+    background-color: #120D14;
+
+    position: absolute;
+    top: 25px;
+    left: 17px;
+
+    background-image: linear-gradient(#120D14, #1B0B15, #1D1419);
+
+    box-shadow: -0.75px 0 1px #9391A5 inset,
+        0.75px 0 1px #A79DA8 inset,
+        -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
+        0 0 3px #9FA7AA;
+}
+
+.speed-button-container {
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 30px;
+
+    background-color: #fff;
+
+    position: absolute;
+    top: 35px;
+    left: 8px;
+
+    background-image: linear-gradient(70deg, #63687E 80%, #9A9BBA);
+
+    box-shadow: 0 0 1px #63687E,
+        0 0 0.5px #63687E,
+        0 0 4px 0.5px #63687E;
+}
+
+.speed-button {
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 30px;
+
+    background-color: #000;
+
+    position: absolute;
+    left: -3.5px;
+    top: -1px;
+
+    background-image: radial-gradient(#353B51, #1E2736, #262739);
+
+    box-shadow: 0 0 0.5px 0.25px #262739,
+        0 0 4px rgba(19, 18, 32, 0.5),
+        
+        8px 10px 10px rgba(51, 46, 52, 0.25),
+
+        -30px -30px 30px 30px rgba(62, 21, 8, 0.1),
+        
+        -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
+        -15px -25px 20px 3px rgba(62, 21, 8, 0.1),
+        -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
+        
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.15),
+        
+        0 0 20px 3px rgba(202, 206, 217, 0.75);
+}
+
+
+.vol-container {
+    display: block;
+    width: 40px;
+    height: 150px;
+
+    background-color: #656581;
+    
+    border-radius: 1px;
+
+    position: absolute;
+    right: 60px;
+    top: 360px;
+
+    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
+        linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
+        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
+        radial-gradient(#7B84A3, #929CB7, #BBC9E6);
+    background-size: 100% 4px, 
+        20% 100%, 
+        200px 200px, 
+        200% 300%;
+    background-repeat: repeat, 
+        repeat, 
+        no-repeat, 
+        no-repeat;
+    background-position: center center, 
+        center center, 
+        center center, 
+        100% 50%;
+
+
+    box-shadow: 0 0 1px #E1C3B8 inset,
+        0 0 1px 0.5px #DFC6C1,
+        0 0 2px 1px #E2C1BA,
+        0.5px 0 0.5px 0.5px #929CB7 inset,
+        -0.5px 0 0.5px 0.5px #929CB7 inset;
+}
+
+.vol-container p {
+    text-transform: uppercase;
+    font-family: sans-serif;
+    font-weight: 600;
+    color: #1F233E;
+
+    font-size: 7px;
+
+    letter-spacing: 0.5px;
+
+    text-shadow: 0 0 0.2px #1F233E,
+        0 0 1px #929CB7;
+}
+
+.vol-container p:first-child {
+    position: absolute;
+    top: 5px;
+    left: 10px;
+}
+
+.vol-container p:last-child {
+    position: absolute;
+    bottom: 3px;
+    left: 10px;
+}
+
+.vol-slider {
+    display: block;
+    width: 5px;
+    height: 100px;
+    border-radius: 6px;
+    background-color: #120D14;
+
+    position: absolute;
+    top: 25px;
+    left: 17px;
+
+    background-image: linear-gradient(#120D14, #1B0B15, #1D1419);
+
+    box-shadow: -0.75px 0 1px #9391A5 inset,
+        0.75px 0 1px #A79DA8 inset,
+        -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
+        0 0 3px #9FA7AA;
+}
+
+.vol-button-container {
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 30px;
+
+    background-color: #fff;
+
+    position: absolute;
+    top: 60px;
+    left: 12px;
+
+    background-image: linear-gradient(70deg, #63687E 80%, #9A9BBA);
+
+    box-shadow: 0 0 1px #63687E,
+        0 0 0.5px #63687E,
+        0 0 4px 0.5px #63687E;
+}
+
+.vol-button {
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 30px;
+
+    background-color: #000;
+
+    position: absolute;
+    left: 3px;
+    top: 1px;
+
+    background-image: radial-gradient(#353B51, #1E2736, #262739);
+
+    box-shadow: 0 0 0.5px 0.25px #262739,
+        0 0 4px rgba(19, 18, 32, 0.5),
+        
+        8px 10px 10px rgba(51, 46, 52, 0.25),
+
+        -30px -30px 30px 30px rgba(62, 21, 8, 0.1),
+        
+        -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
+        -15px -25px 20px 3px rgba(62, 21, 8, 0.1),
+        -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
+        
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.15),
+        
+        0 0 20px 3px rgba(202, 206, 217, 0.75);
+}
+
+
+@media screen and (max-height: 750px) {
+  .muson {
+    transform: scale(0.89);
+  }
+}
+
+@media screen and (max-width: 670px) {
+  .muson {
+    transform: scale(0.9);
+  }
+}
\ No newline at end of file
diff --git a/muson-css/license.txt b/muson-css/license.txt
new file mode 100644
index 0000000..01797c1
--- /dev/null
+++ b/muson-css/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Sarah Fossheim (https://codepen.io/fossheim/pen/BapZQjK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/muson-css/src/index.html b/muson-css/src/index.html
new file mode 100644
index 0000000..ac1dcc4
--- /dev/null
+++ b/muson-css/src/index.html
@@ -0,0 +1,150 @@
+<!-- Page: https://fossheim.io -->
+<!-- Patreon: https://patreon.com/fossheim -->
+<!-- Buy Me A Coffee: https://buymeacoffee.com/fossheim -->
+
+<!-- Inspired by the Muson toy synth -->
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+      <div class="muson" aria-label="Muson Synth Illustration">
+        <div class="top-bar">
+          <div class="speaker-bar"><div class="speakers"></div></div>
+          <div class="muson-frame"><div class="rainbow"></div></div>
+        </div>
+        <div class="range-container" aria-hidden="true">
+          <div class="range-plate">
+            <div class="left">
+              <ul class="ranges">
+                <li>1–4</li>
+                <li>1–6</li>
+                <li>1–8</li>
+                <li>1–10</li>
+              </ul>
+              <p>Range</p>
+              <div class="slider-wrapper">
+                <div class="slider"></div>
+              </div>
+            </div>
+            <div class="center">
+              <p>Volume</p>
+              <ul>
+                <li>Lo</li>
+                <li>Med</li>
+                <li>High</li>
+              </ul>
+              <div class="switch-wrapper">
+                <div class="switch-button"></div>
+              </div>
+            </div>
+            <div class="right">
+              <p>Mode</p>
+              <ul>
+                <li>Off</li>
+                <li>Organ</li>
+                <li>Organ <br />& Synth</li>
+              </ul>
+              <div class="slider-wrapper">
+                <div class="slider"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="button-container">
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+          <div class="button">
+            <div class="center"></div>
+          </div>
+        </div>
+        <div class="letter-container" aria-hidden="true">
+          <div>
+            <p>C</p>
+          </div>
+          <div>
+            <p>D</p>
+          </div>
+          <div>
+            <p>E</p>
+          </div>
+          <div>
+            <p>F</p>
+          </div>
+          <div>
+            <p>G</p>
+          </div>
+          <div>
+            <p>A</p>
+          </div>
+          <div>
+            <p>B</p>
+          </div>
+          <div>
+            <p>C</p>
+          </div>
+          <div>
+            <p>D</p>
+          </div>
+          <div>
+            <p>E</p>
+          </div>
+        </div>
+        <div class="key-container">
+          <div style="z-index: 12;"></div>
+          <div style="z-index: 11;"></div>
+          <div style="z-index: 10;"></div>
+          <div style="z-index: 9;"></div>
+          <div style="z-index: 8;"></div>
+          <div style="z-index: 7;"></div>
+          <div style="z-index: 6;"></div>
+          <div style="z-index: 5;"></div>
+          <div style="z-index: 4;"></div>
+          <div style="z-index: 3;"></div>
+        </div>
+        <div class="speed-container" aria-hidden="true">
+          <p>Fast</p>
+          <div class="speed-slider"></div>
+          <div class="speed-button-container">
+            <div class="speed-button"></div>
+          </div>
+          <p>Slow</p>
+        </div>
+        <div class="vol-container" aria-hidden="true">
+          <p>High</p>
+          <div class="vol-slider"></div>
+          <div class="vol-button-container">
+            <div class="vol-button"></div>
+          </div>
+          <p>Low</p>
+        </div>
+      </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/muson-css/src/style.css b/muson-css/src/style.css
new file mode 100644
index 0000000..5b23867
--- /dev/null
+++ b/muson-css/src/style.css
@@ -0,0 +1,1387 @@
+/*  
+ Page: https://fossheim.io
+ Patreon: https://patreon.com/fossheim
+ Buy Me A Coffee: https://buymeacoffee.com/fossheim
+ 
+ Inspired by the Muson toy synth.
+*/
+
+
+:root {
+    --letter-1: #2E1F23;
+    --letter-2: #1A1A24;
+
+    --button-1: #171310;
+    --button-2: #18171F;
+    --button-3: #353541;
+    --button-4: #302E33;
+
+    --center-1: #0F1622;
+    --center-2: #171D33;
+    --center-3: #222632;
+    --center-4: #313842;
+
+    --center-5: #1C1F30;
+    --center-6: #3D3A4D;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #CFD6F0;
+    background-image: linear-gradient(45deg, #CFD6F0, #F0F2FE);
+    min-height: 100vh;
+}
+
+.muson {
+    display: block;
+
+    position: absolute;
+    top: 120px;
+    top: calc(50vh - 300px);
+    left: 0;
+    right: 0;
+
+    margin: 0 auto;
+
+    width: 790px;
+    height: 610px;
+
+    border-radius: 6px;
+
+    background-color: #FFD9D0;
+    background-image: linear-gradient(
+        135deg,
+        #EFC4BB,
+        #F6D0C7,
+        #FDE0DA
+    );
+
+    box-shadow: 2px 0 1.5px -1.5px #7C5558 inset,
+        3.5px 0 2.5px -2.5px #AE857F inset,
+        4.5px 0 2.5px -2.5px #D8B5AF inset,
+        5.5px 0 2.5px -2.5px #DBBBB0 inset,
+        6.5px 0 2.5px -2.5px #DFBDB1 inset,
+        
+        -3px 0 2px -2px #F9EAE5 inset,
+        -3.5px 0 2px -2px #FFF0ED inset,
+        -4.5px 0 2px -2px #FDDFD4 inset,
+        -5.5px 0 2px -2px #FEE1DB inset,
+        
+        0 2px 2px -2px #EBCDCF inset,
+        0 4px 2px -2px #EEC8C7 inset,
+        0 5px 2px -2px #F4CFC7 inset,
+        
+        0 -2px 1.5px -1.5px #E8D4DD inset,
+        0 -4.5px 1.5px -1.5px #F4CFC7 inset,
+        0 -5px 1.5px -1.5px #FFFDFB inset,
+        
+        -30px -30px 10px rgba(114, 86, 98, 0.05),
+        -25px -25px 10px rgba(114, 86, 98, 0.1),
+        -20px -20px 10px rgba(114, 86, 98, 0.075),
+        -10px -10px 10px rgba(114, 86, 98, 0.1),
+        -5px -5px 10px rgba(114, 86, 98, 0.125),
+        -50px -90px 30px rgba(114, 86, 98, 0.15),
+        -45px -80px 30px rgba(114, 86, 98, 0.125),
+        -40px -70px 30px rgba(114, 86, 98, 0.1),
+        -35px -60px 30px rgba(114, 86, 98, 0.075),
+        -45px -50px 30px rgba(114, 86, 98, 0.05),
+        
+        -2px 0 5px rgba(137, 124, 142, 0.5),
+        0 0 10px rgba(137, 124, 142, 0.1),
+        0 0 20px rgba(137, 124, 142, 0.05),
+        0 0 50px rgba(255, 245, 250, 0.5);
+}
+
+.top-bar {
+    display: block;
+    width: 805px;
+    height: 220px;
+    margin-left: -8px;
+    border-radius: 6px 6px 2px 2px;
+    background-image: linear-gradient(#FAD2CA, #F9D1C7);
+
+    box-shadow: 2px 0 1.5px -1.5px #7C5558 inset,
+        3.5px 0 2.5px -2.5px #AE857F inset,
+        4.5px 0 2.5px -2.5px #D8B5AF inset,
+        5.5px 0 2.5px -2.5px #DBBBB0 inset,
+        6.5px 0 2.5px -2.5px #DFBDB1 inset,
+        
+        -3px 0 2px -2px #F9EAE5 inset,
+        -3.5px 0 2px -2px #FFF0ED inset,
+        -4.5px 0 2px -2px #FDDFD4 inset,
+        -5.5px 0 2px -2px #FEE1DB inset,
+        
+        0 2px 2px -2px #EBCDCF inset,
+        0 4px 2px -2px #EEC8C7 inset,
+        0 5px 2px -2px #F4CFC7 inset,
+        
+        0 -2px 1.5px -1.5px #F9D1C7 inset,
+        0 -4.5px 1.5px -1.5px #F9D1C7 inset,
+        0 -5px 1.5px -1.5px #FFEAE4 inset,
+        
+        
+        2px 12px 1.5px -6px #F9D1C7,
+        1px 11px 1.5px -6px #F9D1C7,
+        1px 10px 1.5px -6px #F9D1C7,
+        1px 9px 1.5px -5px #F9D1C7,
+        1px 8px 1.5px -5px #F9D1C7,
+        1px 7px 1.5px -5px #F9D1C7,
+        1px 6px 1.5px -5px #F9D1C7,
+        3px 5px 1.5px -2px #F9D1C7,
+        2px 4px 1.5px -2px #F9D1C7,
+        1px 3px 1.5px -2px #F9D1C7,
+        
+        3px 13px 1px -6px #F9D1C7,
+        3px 12px 4px -6px rgba(126, 80, 67, 0.25),
+        -2px 25px 30px -3px rgba(126, 80, 67, 0.025),
+        -2px 35px 35px -3px rgba(126, 80, 67, 0.075);
+
+    position: relative;
+}
+
+.muson-frame {
+    display: block;
+    width: 310px;
+    height: 165px;
+    background-color: transparent;
+    
+    position: absolute;
+    top: 25px;
+    right: 65px;
+
+    border-radius: 1px;
+
+    box-shadow: 1px -1px 1px #DEB3AC inset,
+        -2px 0 1px -1px #FFDBD3 inset,
+        0 -1.5px 1px #FFDFD3 inset,
+        0 70.25px 1px -70px #B58475;
+}
+
+.muson-frame:before {
+    content: "";
+    display: block;
+    width: 320px;
+    height: 25px;
+    border-radius: 0 0 2px 2px;
+
+    background-color: transparent;
+
+    position: absolute;
+
+    top: -25px;
+    left: -10px;
+
+    box-shadow: -0.5px 1.25px 0.75px -0.25px #D4A89D,
+        0.5px 0 0.75px -0.25px #F3C9BD,
+        0 -1px 0.5px -0.5px rgba(243, 204, 197, 1),
+        0 -1px 1px #F7CBC0 inset,
+        0 0 3px 4px #FCD1CA inset;
+}
+
+.muson-frame:after {
+    content: "";
+    display: block;
+    width: 45px;
+    height: 39px;
+    border-radius: 0.5px;
+
+    background-image: radial-gradient(rgba(255, 222, 213, 0.25), rgba(255, 222, 213, 0) 60%),
+        repeating-linear-gradient(#F8D2C5 0 24%, #FDD9C9 25% 49%, #F6D1BF 50% 74%, #FDD4C0 75% 100%);
+    background-size: 100% 100%, 4px 4px;
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+
+    opacity: 0.95;
+
+    box-shadow: 0 -1.5px 1px -0.5px #DEB3AC inset,
+        0 -2px 1px -0.5px #FFDFD3 inset,
+        -1px 0 1px #FFDED5 inset,
+        1px 0 1px -0.5px #FFDED5,
+        1px 0 1px #FBD5CA inset,
+        -1px 0 1px -0.5px #FBD5CA,
+        0 1.75px 1px -1px #B58475;
+}
+
+.rainbow {
+    display: block;
+    width: 290px;
+    height: 120px;
+
+    position: absolute;
+    top: 7px;
+    left: 8px;
+
+    background-color: #fff;
+    background-image: linear-gradient(#1E202F 0 12%,
+        #495AC2 12.5% 24.5%,
+        #1250C7 25% 37%,
+        #039CEC 37.5% 49.5%,
+        #DFC63F 50% 62%,
+        #FED13F 62.5% 74.5%,
+        #FC672F 75% 87%,
+        #FD3A48 87.5% 100%
+    );
+    
+    border-radius: 1px;
+
+    box-shadow: 0 -2px 2px -2px rgba(255, 220, 211, 1) inset,
+        0px 0 1.25px 1px #FEDDD6 inset,
+        0 0 1px 1.5px rgba(82, 58, 56, 0.5) inset,
+        0 0 2.5px 3px rgba(82, 58, 56, 0.2) inset,
+        0 0 4px 5px rgba(82, 58, 56, 0.1) inset,
+        -1px 0 1px #DDDAE3,
+        0 0 5px 3px #F6DACF;
+}
+
+.speaker-bar {
+    display: block;
+    width: 365px;
+    height: 219px;
+
+    background-color: transparent;
+    
+    border-radius: 6px 6px 2px 2px;
+    position: absolute;
+    top: 1px;
+    left: 2px;
+
+    box-shadow: 0 -10px 2px -2px #F9D1C7 inset,
+        0 0 1px #F9D1C7,
+        -10px 0 3px -3px #FFE0D3 inset,
+        5px 0 3px -3px #FFE0D3,
+        7px 0 2px -5px rgba(166, 122, 111, 0.15),
+        21px 0 3px -20px rgba(95, 64, 56, 0.15),
+        -9px -5px 5px rgba(254, 210, 201, 0.5) inset;
+
+}
+
+.speakers {
+    display: block;
+    width: 175px;
+    height: 180px;
+
+    border-radius: 100px;
+
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    top: 15px;
+
+    background-image: linear-gradient(90deg, transparent, #E8C2B6 20% 80%, transparent),
+        linear-gradient(transparent 0 12.5%, 
+            #EECEC1 12.5% 25%,
+            #67473C 37.5% 50%, 
+            #4A251F 50% 62.5%, 
+            transparent 82% 100%
+        ), linear-gradient(
+            #EEC4B4,
+            #E8C6BC
+        );
+    background-size: 6px 100%, 9px 9px, 100% 100%;
+    background-repeat: no-repeat, repeat, repeat;
+    background-position: center center, top left, top left;
+
+    box-shadow: 0 0 2px 0.5px #F9D1C7,
+        -1.75px -1.75px 1.5px -1px #F9D1C7,
+        -2px -2px 5px -2px #F9D1C7,
+
+        -5px -25px 20px -5px rgba(83, 23, 0, 0.05) inset,
+        -5px -15px 15px -5px rgba(83, 23, 0, 0.05) inset,
+        -10px -35px 30px -10px rgba(83, 23, 0, 0.025) inset,
+
+        5px 25px 20px -5px rgba(255, 243, 238, 0.1) inset,
+        5px 15px 15px -5px rgba(255, 243, 238, 0.05) inset,
+        10px 35px 30px -10px rgba(255, 243, 238, 0.025) inset,
+
+        0 0 2px 0.5px #FEDCD3 inset,
+        -2px -2px 5px -1px rgba(245, 203, 191, 0.5) inset,
+        0 14px 1px 25.5px #F6D0C7 inset,
+        0 14px 1px 26.5px #EFC1B2 inset,
+        0 14px 1px 30px #F0C3B0 inset;
+}
+
+.key-container {
+    display: grid;
+    width: 435px;
+    height: 100px;
+
+    grid-template-columns: repeat(10, 1fr);
+    column-gap: 3px;
+
+    position: absolute;
+    bottom: 35px;
+    left: 177px;
+    border-radius: 1px;
+    background-color: #821510;
+
+    box-shadow: -10px -10px 10px -5px rgba(58, 12, 2, 0.2),
+    
+        -2px 0 1px #BCA7A6 inset,
+        1px 1px 1px 1px #E8D1C9,
+        2px 2px 2px 1px #FFE3D5,
+        3px 3px 4px 1px #FDE0D2,
+        
+        -1px -1px 1px 0 #8E675F;
+}
+
+.key-container > div {
+    background-color: #fff;
+    background-image: linear-gradient(90deg,
+        #E7EDF9,
+        #F0F4FD
+    );
+    border-radius: 5px;
+    position: relative;
+    top: -3px;
+    left: -2px;
+    height: 100%;
+    height: calc(100% + 2px);
+
+
+    box-shadow: -5px 0 4px -2px #EDECFA inset,
+        -8px 0 6px -6px #EBEFF8 inset,
+        3px 0 1px -1px #E9D4CF inset,
+        6px 0 5px -5px #E1E8FA inset,
+
+        0 0 0.25px 0.25px #E9D4CF,
+        -0.75px -0.75px 1px -0.5px #E9D4CF,
+        0 1px 1px #BEA19B,
+        
+        -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
+        -7px -3px 7px rgba(201, 149, 135, 0.55),
+        -10px -10px 15px rgba(201, 149, 135, 0.25);
+}
+
+.letter-container {
+    display: grid;
+    width: 450px;
+    height: 66px;
+
+    background-color: transparent;
+
+    grid-template-columns: repeat(10, 1fr);
+    column-gap: 1px;
+
+    position: absolute;
+    bottom: 145px;
+    left: 170px;
+
+    border-radius: 3px;
+
+    box-shadow: -0.5px -0.5px 0.75px #B98A7A,
+        -2px -2px 2px #E0B9A8,
+        0.5px 0.5px 1px -0.25px #E1B8A6 inset,
+        1px 1px 1px 0.5px #E9BCA9 inset,
+        4px 4px 4px rgba(251, 228, 222, 0.25) inset;
+
+    padding: 5px;
+}
+
+.letter-container > div {
+    background-color: #19161D;
+    background-image: linear-gradient(
+        var(--letter-1) 20%,
+        var(--letter-2) 30% 50%,
+        #2C2934 50%,
+        #1C1B29,
+        #342127
+    );
+
+    border-radius: 1px;
+
+    box-shadow: 0 0.5px 0.5px #A6857E inset,
+        0 1px 2px rgba(67, 38, 40, 0.25) inset,
+        0.5px 0 0.25px rgba(105, 90, 95, 0.5),
+        
+        0 -1px 0.5px #4D3326 inset,
+        0 -15px 5px -5px #2A1A1A inset,
+        0 1px 1px #D6B6A7,
+        0 5px 3px #F0D0C1,
+        
+        0 12px 5px rgba(26, 26, 36, 0.1) inset;
+
+    position: relative;
+}
+
+.letter-container > div:nth-child(2) {
+    --letter-1: #D55622;
+    --letter-2: #E05F0B;
+}
+
+.letter-container > div:nth-child(3) {
+    --letter-1: #FE3339;
+    --letter-2: #FE3336;
+}
+
+.letter-container > div:nth-child(4) {
+    --letter-1: #F84524;
+    --letter-2: #FA5229;
+}
+
+.letter-container > div:nth-child(5) {
+    --letter-1: #F78336;
+    --letter-2: #FA9634;
+}
+
+.letter-container > div:nth-child(6) {
+    --letter-1: #FDC32A;
+    --letter-2: #FCDA47;
+}
+
+.letter-container > div:nth-child(7) {
+    --letter-1: #DEBF27;
+    --letter-2: #D8D03D;
+}
+
+.letter-container > div:nth-child(8) {
+    --letter-1: #03A7DA;
+    --letter-2: #0BB3FA;
+}
+
+.letter-container > div:nth-child(9) {
+    --letter-1: #2D50B4;
+    --letter-2: #3362CA;
+}
+
+.letter-container > div:nth-child(10) {
+    --letter-1: #734897;
+    --letter-2: #6D56BE;
+}
+
+.letter-container > div > p {
+    position: absolute;
+    bottom: 6px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    text-align: center;
+    font-size: 13px;
+    color: #E6DFEF;
+    font-family: sans-serif;
+    text-shadow: 0.15px 0 0.5px #E6DFEF,
+        -0.15px 0 0.5px #E6DFEF,
+        1px 0 1px #33292A,
+        -2px 0 2px #1A1420;
+}
+
+.button-container {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    column-gap: 1px;
+
+    width: 450px;
+    height: 65px;
+    border-radius: 2px;
+
+    position: absolute;
+    left: 170px;
+    bottom: 220px;
+
+    background-color: transparent;
+
+    box-shadow: 0 0 2px #DDABA0 inset,
+        0 0 1px #DDABA0,
+        0 -1px 2px #F1CBC2,
+        0 -1.5px 2px #FDE4DD,
+        0 1px 2px #E9CDBF,
+        0 1.5px 2px #FADACF,
+        
+        0 1.5px 1.5px -0.5px #D69C8E inset,
+        0 10px 10px -5px #E0B2A2 inset,
+        0 -10px 5px -5px rgba(178, 83, 65, 1) inset;
+}
+
+.button-container .button {
+    border-radius: 3px;
+
+    background-image: linear-gradient(
+        var(--button-1),
+        var(--button-2),
+        var(--button-3),
+        var(--button-4)
+    );
+
+    box-shadow: 0 0 0.25px var(--button-3),
+        -0.5px -0.75px 1px  rgba(241, 249, 255, 0.15) inset,
+        -0.75px -1.5px 1.5px rgba(44, 6, 13, 0.05) inset,
+    
+        0 -0.5px 0.75px 0.25px var(--button-1),
+        0 0.5px 0.75px 0.25px var(--button-4),
+
+        0 -0.75px 2px -0.75px var(--button-1),
+        0 0.75px 2px -0.75px var(--button-4),
+
+        -0.5px -2px 3px 0.75px rgba(44, 6, 13, 0.9),
+        -15px -20px 20px 2px rgba(150, 90, 64, 0.35),
+        
+        -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
+        -7px -3px 7px rgba(201, 149, 135, 0.55),
+        -10px -10px 15px rgba(201, 149, 135, 0.25);
+
+    position: relative;
+    bottom: -3px;
+    left: -1.5px;
+
+    z-index: 11;
+
+    height: 100%;
+    height: calc(100% - 3px);
+}
+
+.button-container .button:nth-child(2) {
+    --button-1: #884B36;
+    --button-2: #8A4631;
+    --button-3: #BD6E48;
+    --button-4: #C2724D;
+
+    --center-1: #AC5B3D;
+    --center-2: #AE5E43;
+    --center-3: #BD6E48;
+    --center-4: #AA624A;
+    --center-5: #AE5E3D;
+    --center-6: #C77E5B;
+
+    z-index: 10;
+}
+
+.button-container .button:nth-child(3) {
+    --button-1: #C1353E;
+    --button-2: #C22B3A;
+    --button-3: #E42D49;
+    --button-4: #E32C3E;
+
+    --center-1: #D5132B;
+    --center-2: #DD1F3B;
+    --center-3: #E42849;
+    --center-4: #E33E50;
+    --center-5: #D51A39;
+    --center-6: #F44661;
+    
+    z-index: 9;
+}
+
+.button-container .button:nth-child(4) {
+    --button-1: #CC3929;
+    --button-2: #D73825;
+    --button-3: #FD5332;
+    --button-4: #F2501F;
+
+    --center-1: #F83D1E;
+    --center-2: #FD4022;
+    --center-3: #FC4D2E;
+    --center-4: #FF5A3D;
+    --center-5: #F0361F;
+    --center-6: #FF6959;
+    
+    z-index: 8;
+}
+
+.button-container .button:nth-child(5) {
+    --button-1: #F2AC26;
+    --button-2: #F0AC19;
+    --button-3: #F0B31C;
+    --button-4: #ECAF19;
+
+    --center-1: #E8A321;
+    --center-2: #F0AD14;
+    --center-3: #F3B61D;
+    --center-4: #F1A943;
+    --center-5: #EBAA09;
+    --center-6: #FBC131;
+    
+    z-index: 7;
+}
+
+.button-container .button:nth-child(6) {
+    --button-1: #FCB829;
+    --button-2: #F7CF31;
+    --button-3: #FFDB3C;
+    --button-4: #FBDB4C;
+
+    --center-1: #FFD531;
+    --center-2: #F6DC41;
+    --center-3: #FFDA3B;
+    --center-4: #FFE470;
+    --center-5: #FFD038;
+    --center-6: #FFE160;
+    
+    z-index: 6;
+}
+
+.button-container .button:nth-child(7) {
+    --button-1: #B5D496;
+    --button-2: #A1D890;
+    --button-3: #B5F4A7;
+    --button-4: #B3EAA4;
+
+    --center-1: #BDE899;
+    --center-2: #B8ED9F;
+    --center-3: #C6F6AA;
+    --center-4: #B7E6B8;
+    --center-5: #C6F6AC;
+    --center-6: #D9FEBB;
+    
+    z-index: 5;
+}
+
+.button-container .button:nth-child(8) {
+    --button-1: #3F88B5;
+    --button-2: #3494C7;
+    --button-3: #0FCEFB;
+    --button-4: #15CAF7;
+
+    --center-1: #26B7F0;
+    --center-2: #05BEFF;
+    --center-3: #04C6FB;
+    --center-4: #23D7FF;
+    --center-5: #08C2F5;
+    --center-6: #22D9FF;
+    
+    z-index: 4;
+}
+
+.button-container .button:nth-child(9) {
+    --button-1: #4058A2;
+    --button-2: #3C5FB9;
+    --button-3: #0D7BF4;
+    --button-4: #2680F8;
+
+    --center-1: #1864DC;
+    --center-2: #0071F1;
+    --center-3: #1A7DE5;
+    --center-4: #346DD4;
+    --center-5: #016EE3;
+    --center-6: #5298F0;
+    
+    z-index: 3;
+}
+
+.button-container .button:nth-child(10) {
+    --button-1: #3D306E;
+    --button-2: #503C79;
+    --button-3: #6A5ABD;
+    --button-4: #6A5ABD;
+
+    --center-1: #5141A3;
+    --center-2: #5647AE;
+    --center-3: #6052B3;
+    --center-4: #6758AB;
+    --center-5: #574DAE;
+    --center-6: #7B6BCE;
+    
+    z-index: 2;
+}
+
+.button-container .button .center {
+    display: block;
+    width: 100%;
+    height: 35px;
+    
+    width: calc(100% + 2px);
+
+    border-radius: 2px;
+
+    position: absolute;
+    top: 15px;
+    left: -1px;
+
+    background-image: linear-gradient(
+        var(--center-1),
+        var(--center-2),
+        var(--center-3)
+    );
+
+    box-shadow: 0 0 0.5px var(--center-3),
+    
+    -3px -20px 14px 3px rgba(20, 7, 14, 0.15),
+    3px 20px 14px -3px rgba(241, 249, 255, 0.025),
+    -3px -17px 14px -3px rgba(241, 249, 255, 0.025),
+
+    0 -20px 10px -10px rgba(44, 6, 13, 0.05) inset,
+    0 -0px 10px -10px rgba(44, 6, 13, 0.05) inset,
+    0 30px 20px -10px rgba(241, 249, 255, 0.05) inset,
+    
+    0 -0.25px 0.75px 0.25px var(--center-1),
+    0 0.5px 0.75px 0.25px var(--center-3),
+
+    0 -0.75px 2px -0.75px var(--center-1),
+    0 0.75px 2px -0.75px var(--center-3),
+    
+    0 1px 1.75px -0.75px var(--center-4) inset,
+    0 -3px 4px -3px var(--center-5) inset,
+    
+    0 3px 3px -3px var(--center-6),
+    
+    0 -4px 7px -4px var(--center-1),
+    0 4px 7px -4px var(--center-6);
+}
+
+.button-container .button .center:nth-child(1) { z-index: 22; }
+.button-container .button .center:nth-child(2) { z-index: 21; }
+.button-container .button .center:nth-child(3) { z-index: 20; }
+.button-container .button .center:nth-child(4) { z-index: 19; }
+.button-container .button .center:nth-child(5) { z-index: 18; }
+.button-container .button .center:nth-child(6) { z-index: 17; }
+.button-container .button .center:nth-child(7) { z-index: 16; }
+.button-container .button .center:nth-child(8) { z-index: 15; }
+.button-container .button .center:nth-child(9) { z-index: 14; }
+.button-container .button .center:nth-child(10) { z-index: 13; }
+
+.range-container {
+    display: block;
+    width: 490px;
+    height: 92px;
+    background-color: transparent;
+
+    position: absolute;
+    left: 150px;
+    bottom: 290px;
+
+    border-radius: 0 0 6px 6px;
+
+    box-shadow: -1px 1px 3px -1px #945A42,
+        0.5px -1px 1px #945A42 inset,
+        -4px 2px 7px -2.25px #BD8974,
+        1px -1px 1px -1px #BD8974 inset,
+        1px -1px 1.5px -1px #CF9981 inset,
+        
+        -0.5px -0.5px 0.5px #FFEDE0 inset,
+        -1.5px -1.5px 2px -1px #FFE8DB inset,
+        -4px -1.5px 4px -2px #FEDACA inset,
+        
+        2px 1px 2px -1px #FEDACA,
+        
+        0 0 10px #FBDAD1,
+        -10px 10px 25px rgba(60, 3, 0, 0.015);
+}
+
+.range-plate {
+    display: block;
+    width: 455px;
+    height: 65px;
+
+    position: absolute;
+    left: 17px;
+    top: 11px;
+
+    border-radius: 1.5px;
+
+    background-color: #BBC9E6;
+
+    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
+        linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
+        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
+        radial-gradient(#7B84A3, #929CB7, #BBC9E6);
+    background-size: 100% 4px, 
+        20% 100%, 
+        200px 200px, 
+        200% 300%;
+    background-repeat: repeat, 
+        repeat, 
+        no-repeat, 
+        no-repeat;
+    background-position: center center, 
+        center center, 
+        center center, 
+        100% 50%;
+
+    box-shadow: 0 0 1px 0.25px #F6D0C7 inset,
+        0 -0.5px 0.75px 0.5px #8D6E6C inset,
+        0 0.75px 0.5px 0.25px #E7C9C7,
+        0 0.5px 2.5px 1.5px #F6D5CE,
+        
+        0 0 10px rgba(100, 98, 120, 0.25) inset;
+
+}
+
+.ranges {
+    list-style-type: none;
+    font-family: sans-serif;
+    font-weight: 600;
+    color: #1F233E;
+
+    font-size: 8px;
+    position: absolute;
+    top: 6px;
+
+    text-shadow: 0 0 0.2px #1F233E,
+        0 0 1px #BCBCD0;
+}
+
+.ranges li {
+    margin-bottom: 6px;
+}
+
+.left .ranges {
+    left: 27px;
+}
+
+.left .ranges li:first-child {
+    margin-left: 10px;
+}
+
+.left .ranges li:last-child {
+    margin-left: 6px;
+}
+
+.left .slider-wrapper {
+    width: 50px;
+    height: 50px;
+
+    background-color: #606B89;
+
+    position: absolute;
+    left: 50.25px;
+    top: 9.25px;
+
+    border-radius: 50px;
+
+    background-image: linear-gradient(20deg, #484653, #606B89, #8792AE);
+
+    box-shadow: -0.5px 0.5px 0.5px #606B89,
+        0 0 1px 0.15px #606B89 inset,
+        0 0 1px 0.25px #606B89,
+        0 0 4px 1px #7886A1,
+        
+        0 15px 10px -2px rgba(51, 46, 52, 0.25),
+
+        -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
+        
+        -12px -25px 17px 4px rgba(62, 21, 8, 0.22),
+        -30px -45px 25px 4px rgba(62, 21, 8, 0.125),
+        -45px -50px 35px 8px rgba(62, 21, 8, 0.125),
+        
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
+        
+        0 0 20px 3px rgba(202, 206, 217, 0.75);
+}
+
+.left .slider {
+    display: block;
+    width: 50px;
+    height: 50px;
+
+    background-color: black;
+
+    border-radius: 100px;
+
+    position: absolute;
+    left: -3.25px;
+    top: -3.25px;
+
+    background-image: linear-gradient(90deg, rgba(17, 18, 23, 0.5), transparent),
+        radial-gradient(#1A2332, #1C1F2D 66%, transparent 69%),
+        linear-gradient(90deg, rgba(17, 18, 23, 0.75), transparent),
+        linear-gradient(rgba(24, 31, 49, 0.9), transparent),
+        linear-gradient(45deg, transparent 30%, #7C899C, transparent 70%),
+        linear-gradient(-45deg, transparent 30%, #7C899C, transparent 70%),
+        radial-gradient(#1A2332, #1C1F2D, #10172A);
+
+    box-shadow: 0 0 1px 0.75px #10172A,
+        0 0 2px 0.75px rgba(67, 68, 88, 0.5);
+}
+
+.left p {
+    text-transform: uppercase;
+    font-family: sans-serif;
+    font-weight: 600;
+    font-size: 6.5px;
+    color: #1F233E;
+    letter-spacing: 0.75px;
+
+    position: absolute;
+    left: 107px;
+    top: 29px;
+
+    text-shadow: 0 0 0.2px #1F233E,
+        0 0 1px #959AB2;
+}
+
+.center p, .center ul li {
+    text-transform: uppercase;
+    font-family: sans-serif;
+    font-weight: 600;
+    font-size: 6px;
+    color: #1F233E;
+    letter-spacing: 0.5px;
+
+    text-shadow: 0 0 0.2px #1F233E,
+        0 0 1px #959AB2;
+
+    list-style-type: none;
+}
+
+.center p {
+    text-align: center;
+
+    position: absolute;
+    top: 6px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+}
+
+.center ul {
+    position: absolute;
+    bottom: 6px;
+    left: 200px;
+}
+
+.center ul li {
+    display: inline-block;
+    margin-right: 6px;
+}
+
+.switch-wrapper {
+    display: block;
+    width: 35px;
+    height: 17px;
+
+    background-color: #0B090E;
+
+    border-radius: 35px;
+
+    position: absolute;
+    left: 210px;
+    top: 22px;
+
+    background-image: linear-gradient(rgba(30, 31, 57, 0), rgba(30, 31, 57, 0.5), rgba(30, 31, 57, 0)),
+        linear-gradient(#09080E, #0A090F);
+
+    box-shadow: 0 0.5px 0.5px #353245 inset,
+        0 -0.25px 0.5px #4F515E inset,
+        0 -0.75px 0.75px #30354B inset,
+        0 1px 1px -0.25px #55515F inset,
+        0 1.25px 1px -0.5px #28252E inset,
+        0 0 5px 1px #1E1F39 inset,
+        
+        0 0 0.5px 0.25px #353245,
+        0 0 1px #B4B9CC,
+        0 0.15px 2.5px -0.5px #9FA5BE,
+        
+        0 10px 10px -3px rgba(208, 209, 227, 0.5),
+        0 20px 20px rgba(208, 209, 227, 0.35);
+}
+
+.switch-button {
+    display: block;
+    width: 15px;
+    height: 15px;
+    border-radius: 15px;
+
+    background-color: #140E1C;
+
+    position: absolute;
+    top: 0.35px;
+    left: 0.45px;
+
+    background-image: radial-gradient(rgba(208, 209, 227, 0.5), rgba(208, 209, 227, 0) 40%),
+        linear-gradient(90deg, #140E1C, #2D2C3C);
+
+    background-repeat: no-repeat,
+        no-repeat;
+
+    background-size: 120% 140%,
+        100% 100%;
+
+    background-position: 3px 3px,
+        top left;
+
+    box-shadow: 0 0 0.5px 0.75px #9A9CA9 inset,
+        0 0 0.15px #9A9CA9,
+        0 0 0.5px 0.25px #1B1B25,
+        0 0 1px #1E1E26,
+        
+        0 5px 10px -2px rgba(51, 46, 52, 0.25),
+
+        -5px -10px 10px 2px rgba(62, 21, 8, 0.15),
+        -10px -17px 20px 5px rgba(62, 21, 8, 0.1),
+        -20px -23px 25px 6px rgba(62, 21, 8, 0.15),
+        -30px -35px 30px 10px rgba(62, 21, 8, 0.1);
+}
+
+
+.right .slider-wrapper {
+    width: 50px;
+    height: 50px;
+
+    background-color: #606B89;
+
+    position: absolute;
+    right: 50.25px;
+    top: 9.25px;
+
+    border-radius: 50px;
+
+    background-image: linear-gradient(20deg, #3C3642, #4B485B, #535166);
+
+    box-shadow: -0.5px 0.5px 0.5px #606B89,
+        0 0 1px 0.15px #606B89 inset,
+        0 0 1px 0.25px #606B89,
+        0 0 4px 1px #7886A1,
+        
+        0 15px 10px -2px rgba(51, 46, 52, 0.25),
+
+        -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
+        
+        -12px -25px 17px 4px rgba(62, 21, 8, 0.15),
+        -30px -45px 25px 4px rgba(62, 21, 8, 0.075),
+        -45px -50px 35px 8px rgba(62, 21, 8, 0.075),
+        
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
+        
+        0 0 20px 3px rgba(202, 206, 217, 0.75);
+}
+
+.right .slider {
+    display: block;
+    width: 50px;
+    height: 50px;
+
+    background-color: black;
+
+    border-radius: 100px;
+
+    position: absolute;
+    left: 3.5px;
+    top: -3.5px;
+
+    background-image: radial-gradient(#1F273A, rgba(22, 26, 38, 1) 66%, transparent 69%),
+        linear-gradient(90deg, rgba(22, 26, 38, 0.75), transparent),
+        linear-gradient(rgba(24, 31, 49, 0.9), transparent),
+        linear-gradient(45deg, transparent 30%, #7C899C, transparent 70%),
+        linear-gradient(-45deg, transparent 30%, #7C899C, transparent 70%),
+        radial-gradient(#1F273A, #212C42, #171D2D);
+
+    box-shadow: 0 0 1px 0.75px rgba(22, 26, 38, 1),
+        0 0 2px 0.75px rgba(67, 68, 88, 0.5);
+}
+
+.right ul, .right p {
+    text-transform: uppercase;
+    font-family: sans-serif;
+    font-weight: 600;
+    color: #1F233E;
+
+    font-size: 6.5px;
+
+    letter-spacing: 0.5px;
+
+    text-shadow: 0 0 0.2px #1F233E,
+        0 0 1px #BCBCD0;
+}
+
+.right ul {
+    list-style-type: none;
+    
+    position: absolute;
+    left: 415px;
+    top: 9px;
+}
+
+.right ul li {
+    margin-bottom: 9px;
+}
+
+.right ul li:first-child {
+    margin-left: -7px;
+}
+
+.right ul li:last-child {
+    margin-left: -5px;
+}
+
+.right p {
+    position: absolute;
+    top: 30px;
+    left: 325px;
+}
+
+.speed-container {
+    display: block;
+    width: 40px;
+    height: 150px;
+
+    background-color: #656581;
+    
+    border-radius: 1px;
+
+    position: absolute;
+    left: 60px;
+    top: 360px;
+
+    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
+        linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
+        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
+        radial-gradient(#7B84A3, #929CB7, #BBC9E6);
+    background-size: 100% 4px, 
+        20% 100%, 
+        200px 200px, 
+        200% 300%;
+    background-repeat: repeat, 
+        repeat, 
+        no-repeat, 
+        no-repeat;
+    background-position: center center, 
+        center center, 
+        center center, 
+        100% 50%;
+
+
+    box-shadow: 0 0 1px #E1C3B8 inset,
+        0 0 1px 0.5px #DFC6C1,
+        0 0 2px 1px #E2C1BA,
+        0.5px 0 0.5px 0.5px #929CB7 inset,
+        -0.5px 0 0.5px 0.5px #929CB7 inset;
+}
+
+.speed-container p {
+    text-transform: uppercase;
+    font-family: sans-serif;
+    font-weight: 600;
+    color: #1F233E;
+
+    font-size: 7px;
+
+    letter-spacing: 0.5px;
+
+    text-shadow: 0 0 0.2px #1F233E,
+        0 0 1px #929CB7;
+}
+
+.speed-container p:first-child {
+    position: absolute;
+    top: 5px;
+    left: 10px;
+}
+
+.speed-container p:last-child {
+    position: absolute;
+    bottom: 3px;
+    left: 9px;
+}
+
+.speed-slider {
+    display: block;
+    width: 5px;
+    height: 100px;
+    border-radius: 6px;
+    background-color: #120D14;
+
+    position: absolute;
+    top: 25px;
+    left: 17px;
+
+    background-image: linear-gradient(#120D14, #1B0B15, #1D1419);
+
+    box-shadow: -0.75px 0 1px #9391A5 inset,
+        0.75px 0 1px #A79DA8 inset,
+        -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
+        0 0 3px #9FA7AA;
+}
+
+.speed-button-container {
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 30px;
+
+    background-color: #fff;
+
+    position: absolute;
+    top: 35px;
+    left: 8px;
+
+    background-image: linear-gradient(70deg, #63687E 80%, #9A9BBA);
+
+    box-shadow: 0 0 1px #63687E,
+        0 0 0.5px #63687E,
+        0 0 4px 0.5px #63687E;
+}
+
+.speed-button {
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 30px;
+
+    background-color: #000;
+
+    position: absolute;
+    left: -3.5px;
+    top: -1px;
+
+    background-image: radial-gradient(#353B51, #1E2736, #262739);
+
+    box-shadow: 0 0 0.5px 0.25px #262739,
+        0 0 4px rgba(19, 18, 32, 0.5),
+        
+        8px 10px 10px rgba(51, 46, 52, 0.25),
+
+        -30px -30px 30px 30px rgba(62, 21, 8, 0.1),
+        
+        -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
+        -15px -25px 20px 3px rgba(62, 21, 8, 0.1),
+        -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
+        
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.15),
+        
+        0 0 20px 3px rgba(202, 206, 217, 0.75);
+}
+
+
+.vol-container {
+    display: block;
+    width: 40px;
+    height: 150px;
+
+    background-color: #656581;
+    
+    border-radius: 1px;
+
+    position: absolute;
+    right: 60px;
+    top: 360px;
+
+    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
+        linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
+        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
+        radial-gradient(#7B84A3, #929CB7, #BBC9E6);
+    background-size: 100% 4px, 
+        20% 100%, 
+        200px 200px, 
+        200% 300%;
+    background-repeat: repeat, 
+        repeat, 
+        no-repeat, 
+        no-repeat;
+    background-position: center center, 
+        center center, 
+        center center, 
+        100% 50%;
+
+
+    box-shadow: 0 0 1px #E1C3B8 inset,
+        0 0 1px 0.5px #DFC6C1,
+        0 0 2px 1px #E2C1BA,
+        0.5px 0 0.5px 0.5px #929CB7 inset,
+        -0.5px 0 0.5px 0.5px #929CB7 inset;
+}
+
+.vol-container p {
+    text-transform: uppercase;
+    font-family: sans-serif;
+    font-weight: 600;
+    color: #1F233E;
+
+    font-size: 7px;
+
+    letter-spacing: 0.5px;
+
+    text-shadow: 0 0 0.2px #1F233E,
+        0 0 1px #929CB7;
+}
+
+.vol-container p:first-child {
+    position: absolute;
+    top: 5px;
+    left: 10px;
+}
+
+.vol-container p:last-child {
+    position: absolute;
+    bottom: 3px;
+    left: 10px;
+}
+
+.vol-slider {
+    display: block;
+    width: 5px;
+    height: 100px;
+    border-radius: 6px;
+    background-color: #120D14;
+
+    position: absolute;
+    top: 25px;
+    left: 17px;
+
+    background-image: linear-gradient(#120D14, #1B0B15, #1D1419);
+
+    box-shadow: -0.75px 0 1px #9391A5 inset,
+        0.75px 0 1px #A79DA8 inset,
+        -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
+        0 0 3px #9FA7AA;
+}
+
+.vol-button-container {
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 30px;
+
+    background-color: #fff;
+
+    position: absolute;
+    top: 60px;
+    left: 12px;
+
+    background-image: linear-gradient(70deg, #63687E 80%, #9A9BBA);
+
+    box-shadow: 0 0 1px #63687E,
+        0 0 0.5px #63687E,
+        0 0 4px 0.5px #63687E;
+}
+
+.vol-button {
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 30px;
+
+    background-color: #000;
+
+    position: absolute;
+    left: 3px;
+    top: 1px;
+
+    background-image: radial-gradient(#353B51, #1E2736, #262739);
+
+    box-shadow: 0 0 0.5px 0.25px #262739,
+        0 0 4px rgba(19, 18, 32, 0.5),
+        
+        8px 10px 10px rgba(51, 46, 52, 0.25),
+
+        -30px -30px 30px 30px rgba(62, 21, 8, 0.1),
+        
+        -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
+        -15px -25px 20px 3px rgba(62, 21, 8, 0.1),
+        -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
+        
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.15),
+        
+        0 0 20px 3px rgba(202, 206, 217, 0.75);
+}
+
+
+@media screen and (max-height: 750px) {
+  .muson {
+    transform: scale(0.89);
+  }
+}
+
+@media screen and (max-width: 670px) {
+  .muson {
+    transform: scale(0.9);
+  }
+}
\ No newline at end of file
diff --git a/mutationobserver-example/README.markdown b/mutationobserver-example/README.markdown
new file mode 100644
index 0000000..0885095
--- /dev/null
+++ b/mutationobserver-example/README.markdown
@@ -0,0 +1,5 @@
+# MutationObserver Example
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/milofultz/pen/LYjPXPw](https://codepen.io/milofultz/pen/LYjPXPw).
+
+
diff --git a/mutationobserver-example/dist/index.html b/mutationobserver-example/dist/index.html
new file mode 100644
index 0000000..e5b16b8
--- /dev/null
+++ b/mutationobserver-example/dist/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - MutationObserver Example</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- 
+Ported directly from the example in Jeff Griffith's article:
+https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/ 
+-->
+
+<ol contenteditable>
+  <li>Press enter</li>
+</ol>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/mutationobserver-example/dist/script.js b/mutationobserver-example/dist/script.js
new file mode 100644
index 0000000..da75310
--- /dev/null
+++ b/mutationobserver-example/dist/script.js
@@ -0,0 +1,22 @@
+const targetNode = document.querySelector('ol');
+
+const config = {
+  attributes: true, 
+  childList: true, 
+  characterData: true
+};
+  
+const callback = mutations => {  
+  mutations.forEach(mutation => {
+    if (mutation.type === 'childList') {
+      const listValues = Array.from(targetNode.children)
+          .map(node => node.innerHTML)
+          .filter(html => html !== '<br>');
+      console.log(listValues);
+    }
+  });
+}
+
+const observer = new MutationObserver(callback);
+
+observer.observe(targetNode, config);
\ No newline at end of file
diff --git a/mutationobserver-example/dist/style.css b/mutationobserver-example/dist/style.css
new file mode 100644
index 0000000..36f778f
--- /dev/null
+++ b/mutationobserver-example/dist/style.css
@@ -0,0 +1,3 @@
+ol {
+  border: 1px solid red;
+}
\ No newline at end of file
diff --git a/mutationobserver-example/license.txt b/mutationobserver-example/license.txt
new file mode 100644
index 0000000..ecc6f3f
--- /dev/null
+++ b/mutationobserver-example/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Milo Fultz (https://codepen.io/milofultz/pen/LYjPXPw)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/mutationobserver-example/src/index.html b/mutationobserver-example/src/index.html
new file mode 100644
index 0000000..adf1958
--- /dev/null
+++ b/mutationobserver-example/src/index.html
@@ -0,0 +1,8 @@
+<!-- 
+Ported directly from the example in Jeff Griffith's article:
+https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/ 
+-->
+
+<ol contenteditable>
+  <li>Press enter</li>
+</ol>
diff --git a/mutationobserver-example/src/script.js b/mutationobserver-example/src/script.js
new file mode 100644
index 0000000..df89b88
--- /dev/null
+++ b/mutationobserver-example/src/script.js
@@ -0,0 +1,22 @@
+const targetNode = document.querySelector('ol');
+
+const config = {
+  attributes: true, 
+  childList: true, 
+  characterData: true
+};
+  
+const callback = mutations => {  
+  mutations.forEach(mutation => {
+    if (mutation.type === 'childList') {
+      const listValues = Array.from(targetNode.children)
+          .map(node => node.innerHTML)
+          .filter(html => html !== '<br>');
+      console.log(listValues);
+    }
+  });
+}
+
+const observer = new MutationObserver(callback);
+
+observer.observe(targetNode, config);
diff --git a/mutationobserver-example/src/style.css b/mutationobserver-example/src/style.css
new file mode 100644
index 0000000..8b904c2
--- /dev/null
+++ b/mutationobserver-example/src/style.css
@@ -0,0 +1,3 @@
+ol {
+  border: 1px solid red;
+}
diff --git a/native-masonry-layout-with-css-grid/README.markdown b/native-masonry-layout-with-css-grid/README.markdown
new file mode 100644
index 0000000..dc527cd
--- /dev/null
+++ b/native-masonry-layout-with-css-grid/README.markdown
@@ -0,0 +1,5 @@
+# Native Masonry Layout With CSS Grid
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/smashingmag/pen/OJbJzVB](https://codepen.io/smashingmag/pen/OJbJzVB).
+
+
diff --git a/native-masonry-layout-with-css-grid/dist/index.html b/native-masonry-layout-with-css-grid/dist/index.html
new file mode 100644
index 0000000..2f1305e
--- /dev/null
+++ b/native-masonry-layout-with-css-grid/dist/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Native Masonry Layout With CSS Grid</title>
+  <link rel='stylesheet' href='https://unpkg.com/modern-css-reset/dist/reset.min.css'>
+<link rel='stylesheet' href='https://unpkg.com/some-nice-basic-css/global.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="wrapper">
+  <ul class="masonry" role="list">
+    <li>
+      <a href="https://unsplash.com/photos/41bFeMKAa8I">
+        <img src="https://source.unsplash.com/41bFeMKAa8I/800" alt="An orange and deep-red texture" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/_4MkAq-Aycg">
+        <img src="https://source.unsplash.com/_4MkAq-Aycg/800" alt="A black background with red light streaks" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/O1qa4P4sW6w">
+        <img src="https://source.unsplash.com/O1qa4P4sW6w/800" alt="A black background with pink light streaks" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/5HnTsc9zAXY">
+        <img src="https://source.unsplash.com/5HnTsc9zAXY/800" alt="A close-up leaf" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/qPRaAr_hG6M">
+        <img src="https://source.unsplash.com/qPRaAr_hG6M/800" alt="Neon bricks on black" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/b6KyGbG_HZY">
+        <img src="https://source.unsplash.com/b6KyGbG_HZY/800" alt="Water droplets on glass" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/5MPzX_KtL8c">
+        <img src="https://source.unsplash.com/5MPzX_KtL8c/800" alt="Blue paint waves on black" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/y5V4oCR0cAA">
+        <img src="https://source.unsplash.com/y5V4oCR0cAA/800" alt="Multicoloured light streaks at night" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/QDpWdOcS-rU">
+        <img src="https://source.unsplash.com/QDpWdOcS-rU/800" alt="A close-up of firewood" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/0F3Yp4XEq4w">
+        <img src="https://source.unsplash.com/0F3Yp4XEq4w/800" alt="Abstract art sea painting" />
+      </a>
+    </li>
+  </ul>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/native-masonry-layout-with-css-grid/dist/style.css b/native-masonry-layout-with-css-grid/dist/style.css
new file mode 100644
index 0000000..03e0e7e
--- /dev/null
+++ b/native-masonry-layout-with-css-grid/dist/style.css
@@ -0,0 +1,38 @@
+.masonry {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  grid-template-rows: masonry;
+  grid-gap: 1rem;
+}
+
+/*
+
+
+
+Presentational styles
+*/
+
+body {
+  padding: 2rem 0;
+}
+
+.masonry {
+  padding: 0;
+}
+
+.masonry li {
+  margin: 0;
+}
+
+img {
+  border-radius: 1rem;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
+  max-width: 100%;
+}
+
+.wrapper {
+  width: 90vw;
+  width: clamp(16rem, 90vw, 80rem);
+  margin-left: auto;
+  margin-right: auto;
+}
\ No newline at end of file
diff --git a/native-masonry-layout-with-css-grid/license.txt b/native-masonry-layout-with-css-grid/license.txt
new file mode 100644
index 0000000..019aad9
--- /dev/null
+++ b/native-masonry-layout-with-css-grid/license.txt
@@ -0,0 +1,9 @@
+Copyright (c) 2021 by Smashing Magazine (https://codepen.io/smashingmag/pen/OJbJzVB)
+Fork of an original work Native Masonry Layout With CSS Grid (https://codepen.io/piccalilli/pen/gOwEJbz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/native-masonry-layout-with-css-grid/src/index.html b/native-masonry-layout-with-css-grid/src/index.html
new file mode 100644
index 0000000..e854b1d
--- /dev/null
+++ b/native-masonry-layout-with-css-grid/src/index.html
@@ -0,0 +1,54 @@
+<div class="wrapper">
+  <ul class="masonry" role="list">
+    <li>
+      <a href="https://unsplash.com/photos/41bFeMKAa8I">
+        <img src="https://source.unsplash.com/41bFeMKAa8I/800" alt="An orange and deep-red texture" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/_4MkAq-Aycg">
+        <img src="https://source.unsplash.com/_4MkAq-Aycg/800" alt="A black background with red light streaks" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/O1qa4P4sW6w">
+        <img src="https://source.unsplash.com/O1qa4P4sW6w/800" alt="A black background with pink light streaks" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/5HnTsc9zAXY">
+        <img src="https://source.unsplash.com/5HnTsc9zAXY/800" alt="A close-up leaf" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/qPRaAr_hG6M">
+        <img src="https://source.unsplash.com/qPRaAr_hG6M/800" alt="Neon bricks on black" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/b6KyGbG_HZY">
+        <img src="https://source.unsplash.com/b6KyGbG_HZY/800" alt="Water droplets on glass" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/5MPzX_KtL8c">
+        <img src="https://source.unsplash.com/5MPzX_KtL8c/800" alt="Blue paint waves on black" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/y5V4oCR0cAA">
+        <img src="https://source.unsplash.com/y5V4oCR0cAA/800" alt="Multicoloured light streaks at night" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/QDpWdOcS-rU">
+        <img src="https://source.unsplash.com/QDpWdOcS-rU/800" alt="A close-up of firewood" />
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/photos/0F3Yp4XEq4w">
+        <img src="https://source.unsplash.com/0F3Yp4XEq4w/800" alt="Abstract art sea painting" />
+      </a>
+    </li>
+  </ul>
+</div>
\ No newline at end of file
diff --git a/native-masonry-layout-with-css-grid/src/style.css b/native-masonry-layout-with-css-grid/src/style.css
new file mode 100644
index 0000000..17fdeb5
--- /dev/null
+++ b/native-masonry-layout-with-css-grid/src/style.css
@@ -0,0 +1,38 @@
+.masonry {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  grid-template-rows: masonry;
+  grid-gap: 1rem;
+}
+
+/*
+
+
+
+Presentational styles
+*/
+
+body {
+  padding: 2rem 0;
+}
+
+.masonry {
+  padding: 0;
+}
+
+.masonry li {
+  margin: 0;
+}
+
+img {
+  border-radius: 1rem;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
+  max-width: 100%;
+}
+
+.wrapper {
+  width: 90vw;
+  width: clamp(16rem, 90vw, 80rem);
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/neptune/README.markdown b/neptune/README.markdown
new file mode 100644
index 0000000..1256589
--- /dev/null
+++ b/neptune/README.markdown
@@ -0,0 +1,5 @@
+# Neptune
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/SiminR/pen/BajwrwJ](https://codepen.io/SiminR/pen/BajwrwJ).
+
+
diff --git a/neptune/dist/index.html b/neptune/dist/index.html
new file mode 100644
index 0000000..f25e71e
--- /dev/null
+++ b/neptune/dist/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Neptune</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<link rel="stylesheet" type="text/css" href="stylesheets/neptun.css">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link href="https://fonts.googleapis.com/css2?family=MuseoModerno&display=swap" rel="stylesheet">
+
+
+<body>
+	<div class="container">
+		<div class="planet">
+			<div class="planet_area">
+				<div class="border"></div>
+				
+				<div class="hole_1"></div>
+				<div class="hole_2"></div>
+				<div class="hole_3"></div>
+				<div class="hole_4"></div>
+				<div class="hole_5"></div>
+				<div class="hole_6"></div>
+				<div class="hole_7"></div>
+
+			</div>
+
+
+		</div>
+		
+
+		<div class="star"></div>
+		<div class="star star_2"></div>
+		<div class="star star_3"></div>
+		<div class="star star_4"></div>
+
+	</div>
+
+	<div>
+		<p class="about">Inspired From <a href="https://dribbble.com/shots/12044886-Neptune-Planet-illustration/attachments/3675122?mode=media" target="_blank">Mohammad Sharifi</a></p>
+	</div>
+
+</body>
+
+
+</html>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/neptune/dist/style.css b/neptune/dist/style.css
new file mode 100644
index 0000000..43f0356
--- /dev/null
+++ b/neptune/dist/style.css
@@ -0,0 +1,198 @@
+@charset "UTF-8";
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: #f1f1f1;
+  height: 100vh;
+}
+
+.container {
+  margin: 0 auto;
+  width: 600px;
+  height: 600px;
+  border-radius: 100%;
+  border: 10px solid white;
+  box-shadow: 4px 5px 20px 4px #00000026;
+  background: linear-gradient(-45deg, #7c64c7, #4c1469, #205db1, #3863b1);
+  background-size: 155% 127%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.planet {
+  width: 300px;
+  height: 300px;
+  background: #76aedf;
+  border-radius: 100%;
+  position: relative;
+}
+.planet::after {
+  content: "";
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  right: 0;
+  top: 0;
+  border-radius: 100%;
+  box-shadow: 0 0 0px rgba(255, 255, 255, 0.8), 0 0 0 25px rgba(0, 0, 0, 0.08), 0 0 0 55px rgba(0, 0, 0, 0.06), 0 0 0 85px rgba(0, 0, 0, 0.04);
+}
+
+.planet_area {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  border-radius: 100%;
+  background: #76aedf;
+}
+
+.border {
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  border: 9px solid #ffffff52;
+  z-index: 6;
+  position: relative;
+}
+
+.hole_1 {
+  position: absolute;
+  top: 198px;
+  right: 111px;
+  z-index: 4;
+  height: 12px;
+  width: 26px;
+  border-radius: 100%;
+  background: #dafafd;
+}
+
+.hole_2 {
+  position: absolute;
+  top: 221px;
+  left: 110px;
+  z-index: 4;
+  height: 10px;
+  width: 40px;
+  border-radius: 100%;
+  background: #dafafd;
+}
+
+.hole_3 {
+  position: absolute;
+  top: 187px;
+  left: 94px;
+  z-index: 4;
+  height: 27px;
+  width: 61px;
+  border-radius: 100%;
+  background: #69a3d6;
+}
+
+.hole_4 {
+  position: absolute;
+  top: 121px;
+  left: 138px;
+  z-index: 4;
+  height: 10px;
+  width: 29px;
+  border-radius: 100%;
+  background: #dafafd;
+}
+
+.hole_5 {
+  position: absolute;
+  top: 65px;
+  left: -287px;
+  z-index: 4;
+  height: 21px;
+  width: 400px;
+  background: #dafafd;
+  border-top-right-radius: 100%;
+  border-bottom-right-radius: 100%;
+  transform: rotate(-4deg);
+}
+
+.hole_6 {
+  position: absolute;
+  bottom: 57px;
+  right: -318px;
+  z-index: 4;
+  height: 21px;
+  width: 400px;
+  background: #dafafd;
+  border-bottom-left-radius: 100%;
+  transform: rotate(-6deg);
+}
+
+.hole_7 {
+  position: absolute;
+  top: 240px;
+  left: 62px;
+  z-index: 4;
+  height: 7px;
+  width: 8px;
+  border-radius: 100%;
+  background: #dafafd;
+}
+
+.star {
+  width: 6px;
+  height: 6px;
+  position: absolute;
+  right: 95px;
+  top: 58%;
+}
+.star::before, .star::after {
+  content: "";
+  position: absolute;
+  background-color: #c7c28f;
+  display: block;
+  left: 0;
+  width: 141.4213%;
+  /* 100% * √2 */
+  top: 0;
+  bottom: 0;
+  border-radius: 5%;
+  transform: rotate(66.66deg) skewX(45deg);
+}
+.star::after {
+  transform: rotate(156.66deg) skew(45deg);
+}
+
+.star_2 {
+  width: 3px;
+  height: 3px;
+  right: 150px;
+  top: 78%;
+}
+
+.star_3 {
+  width: 3px;
+  height: 3px;
+  left: 150px;
+  top: 19%;
+}
+
+.star_4 {
+  width: 5px;
+  height: 5px;
+  left: 50px;
+  top: 38%;
+}
+
+.about {
+  text-align: center;
+  margin-top: 30px;
+  font-size: 1em;
+  font-family: "MuseoModerno", cursive;
+}
+.about a {
+  text-decoration: none;
+  color: #76d1e9;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/neptune/license.txt b/neptune/license.txt
new file mode 100644
index 0000000..7039965
--- /dev/null
+++ b/neptune/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Simin (https://codepen.io/SiminR/pen/BajwrwJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/neptune/src/index.html b/neptune/src/index.html
new file mode 100644
index 0000000..3b00abe
--- /dev/null
+++ b/neptune/src/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<link rel="stylesheet" type="text/css" href="stylesheets/neptun.css">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link href="https://fonts.googleapis.com/css2?family=MuseoModerno&display=swap" rel="stylesheet">
+
+
+<body>
+	<div class="container">
+		<div class="planet">
+			<div class="planet_area">
+				<div class="border"></div>
+				
+				<div class="hole_1"></div>
+				<div class="hole_2"></div>
+				<div class="hole_3"></div>
+				<div class="hole_4"></div>
+				<div class="hole_5"></div>
+				<div class="hole_6"></div>
+				<div class="hole_7"></div>
+
+			</div>
+
+
+		</div>
+		
+
+		<div class="star"></div>
+		<div class="star star_2"></div>
+		<div class="star star_3"></div>
+		<div class="star star_4"></div>
+
+	</div>
+
+	<div>
+		<p class="about">Inspired From <a href="https://dribbble.com/shots/12044886-Neptune-Planet-illustration/attachments/3675122?mode=media" target="_blank">Mohammad Sharifi</a></p>
+	</div>
+
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/neptune/src/style.scss b/neptune/src/style.scss
new file mode 100644
index 0000000..467e260
--- /dev/null
+++ b/neptune/src/style.scss
@@ -0,0 +1,198 @@
+
+* {
+    box-sizing: border-box;
+}
+body {
+    background: #f1f1f1;
+    height : 100vh;
+}
+
+.container {
+    margin  : 0 auto;
+    width   : 600px;
+    height  : 600px;
+    border-radius: 100%;
+    border : 10px solid white;
+    box-shadow: 4px 5px 20px 4px #00000026;
+    background: linear-gradient(-45deg, #7c64c7, #4c1469, #205db1, #3863b1);
+    background-size: 155% 127%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+}
+
+
+.planet {
+    width   : 300px;
+    height  : 300px;
+    background: #76aedf;
+    border-radius: 100%;
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 300px;
+        height: 300px;
+        right: 0;
+        top: 0;
+        border-radius: 100%;
+        box-shadow: 0 0 0px rgba(255, 255, 255, 0.8),
+        0 0 0 25px rgba(0, 0, 0, 0.08),
+        0 0 0 55px rgba(0, 0, 0, 0.06), 
+        0 0 0 85px rgba(0, 0, 0, 0.04);
+    }
+}
+
+.planet_area {
+    width : 100%;
+    height : 100%;
+    position: relative;
+    overflow : hidden;
+    border-radius: 100%;
+    background: #76aedf;
+
+}
+.border {
+    width : 100%;
+    height : 100%;
+    border-radius: 100%;   
+    border: 9px solid #ffffff52;
+    z-index: 6;
+    position: relative;
+}
+
+
+.hole_1 {
+    position: absolute;
+    top: 198px;
+    right: 111px;
+    z-index: 4;
+    height: 12px;
+    width: 26px;
+    border-radius: 100%;
+    background: #dafafd;
+}
+
+.hole_2 {
+    position: absolute;
+    top: 221px;
+    left: 110px;
+    z-index: 4;
+    height: 10px;
+    width: 40px;
+    border-radius: 100%;
+    background: #dafafd;
+}
+.hole_3 {
+    position: absolute;
+    top: 187px;
+    left: 94px;
+    z-index: 4;
+    height: 27px;
+    width: 61px;
+    border-radius: 100%;
+    background: #69a3d6;
+}
+.hole_4 {
+    position: absolute;
+    top: 121px;
+    left: 138px;
+    z-index: 4;
+    height: 10px;
+    width: 29px;
+    border-radius: 100%;
+    background: #dafafd;
+}
+.hole_5 {
+    position: absolute;
+    top: 65px;
+    left: -287px;
+    z-index: 4;
+    height: 21px;
+    width: 400px;
+    background: #dafafd;
+    border-top-right-radius: 100%;
+    border-bottom-right-radius: 100%;
+    transform: rotate(-4deg);
+}
+.hole_6 {
+    position: absolute;
+    bottom: 57px;
+    right: -318px;
+    z-index: 4;
+    height: 21px;
+    width: 400px;
+    background: #dafafd;
+    border-bottom-left-radius: 100%;
+    transform: rotate(-6deg);
+}
+
+.hole_7 {
+    position: absolute;
+    top: 240px;
+    left: 62px;
+    z-index: 4;
+    height: 7px;
+    width: 8px;
+    border-radius: 100%;
+    background: #dafafd;
+}
+
+.star {
+    width: 6px;
+    height: 6px;
+    position: absolute;
+    right: 95px;
+    top: 58%;
+
+    &::before , &::after{
+        content: "";
+        position: absolute;
+        background-color: #c7c28f;
+        display: block;
+        left: 0;
+        width: 141.4213%; /* 100% * √2 */
+        top: 0;
+        bottom: 0;
+        border-radius: 5%;
+        transform: rotate(66.66deg) skewX(45deg);
+    }
+    &::after {
+        transform: rotate(156.66deg) skew(45deg);
+    }
+}
+
+.star_2 {
+    width: 3px;
+    height: 3px;
+    right: 150px;
+    top: 78%;
+}
+.star_3 {
+    width: 3px;
+    height: 3px;
+    left: 150px;
+    top: 19%;
+}
+.star_4 {
+    width: 5px;
+    height: 5px;
+    left: 50px;
+    top: 38%;
+}
+  
+.about {
+    text-align: center;
+    margin-top: 30px;
+    font-size: 1em;
+    font-family: 'MuseoModerno', cursive;
+
+    a {
+        text-decoration: none;
+        color     : #76d1e9;
+        font-weight: bold;
+    }
+}
\ No newline at end of file
diff --git a/neumorphic-playground/README.markdown b/neumorphic-playground/README.markdown
new file mode 100644
index 0000000..09f3107
--- /dev/null
+++ b/neumorphic-playground/README.markdown
@@ -0,0 +1,10 @@
+# Neumorphic Playground 😅
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jh3y/pen/yLNeMao](https://codepen.io/jh3y/pen/yLNeMao).
+
+ Decided I'd dive in deep with the Neumorphism stuff and play with different types of inputs and surfaces.
+
+Used this as an opportunity to refine some dat.gui techniques and try out the scroll-snap techniques from an article on CSS Tricks 👍
+
+Have fun, play around with different colors and shadows, and gain a better understanding of how this design style might or might not work in your web apps.
+
+Enjoy!
\ No newline at end of file
diff --git a/neumorphic-playground/dist/index.html b/neumorphic-playground/dist/index.html
new file mode 100644
index 0000000..374efb3
--- /dev/null
+++ b/neumorphic-playground/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Neumorphic Playground 😅</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="app"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js'></script>
+<script src='https://unpkg.com/scroll-out/dist/scroll-out.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/neumorphic-playground/dist/script.js b/neumorphic-playground/dist/script.js
new file mode 100644
index 0000000..cefd32d
--- /dev/null
+++ b/neumorphic-playground/dist/script.js
@@ -0,0 +1,445 @@
+const {
+  dat: { GUI },
+  React,
+  React: { useEffect, useRef, useState, Fragment },
+  ReactDOM: { render }
+  // ScrollOut,
+} = window;
+
+const CONFIG = {
+  COLOR: {
+    HUE: 225,
+    SATURATION: 40,
+    LIGHTNESS: 65 },
+
+  CARD: {
+    BORDER: {
+      WIDTH: 0,
+      RADIUS: 10,
+      ALPHA: 0.1 },
+
+    SHADOW: {
+      REACH: 30,
+      BLUR: 60,
+      ALPHA: 0.65 },
+
+    SIZE: {
+      HEIGHT: 200,
+      WIDTH: 200 } },
+
+
+  BUTTON: {
+    BORDER: {
+      WIDTH: 0,
+      RADIUS: 10,
+      ALPHA: 0.1 },
+
+    SHADOW: {
+      REACH: 5,
+      BLUR: 10,
+      ALPHA: 0.5 } },
+
+
+  TEXT: {
+    BORDER: {
+      WIDTH: 2,
+      RADIUS: 10,
+      ALPHA: 0.1 },
+
+    SHADOW: {
+      REACH: 4,
+      BLUR: 8,
+      ALPHA: 0.5 } },
+
+
+  RANGE: {
+    BORDER: {
+      RADIUS: 36 },
+
+    SHADOW: {
+      REACH: 4,
+      BLUR: 8,
+      ALPHA: 0.5 },
+
+    TRACK: {
+      ALPHA: 0.2 } },
+
+
+  CHECKBOX: {
+    BORDER: {
+      RADIUS: 36 },
+
+    SHADOW: {
+      REACH: 4,
+      BLUR: 8,
+      ALPHA: 0.5 } },
+
+
+  RADIO: {
+    BORDER: {
+      WIDTH: 0,
+      RADIUS: 36 },
+
+    SHADOW: {
+      REACH: 4,
+      BLUR: 8,
+      ALPHA: 0.5 } } };
+
+
+
+
+const BOUNDS = {
+  COLOR: {
+    HUE: [0, 360, 1],
+    SATURATION: [0, 100, 1],
+    LIGHTNESS: [0, 100, 1] },
+
+  CARD: {
+    BORDER: {
+      WIDTH: [0, 10, 1],
+      ALPHA: [0, 1, 0.01],
+      RADIUS: [0, 50, 1] },
+
+    SHADOW: {
+      BLUR: [0, 100, 1],
+      REACH: [0, 50, 1],
+      ALPHA: [0.2, 1, 0.01] },
+
+    SIZE: {
+      HEIGHT: [50, 300, 1],
+      WIDTH: [50, 300, 1] } },
+
+
+  BUTTON: {
+    BORDER: {
+      WIDTH: [0, 10, 1],
+      ALPHA: [0, 1, 0.01],
+      RADIUS: [0, 50, 1] },
+
+    SHADOW: {
+      BLUR: [0, 100, 1],
+      REACH: [0, 50, 1],
+      ALPHA: [0.2, 1, 0.01] } },
+
+
+  TEXT: {
+    BORDER: {
+      WIDTH: [0, 10, 1],
+      RADIUS: [0, 40, 1],
+      ALPHA: [0, 1, 0.01] },
+
+    SHADOW: {
+      REACH: [0, 20, 1],
+      BLUR: [0, 40, 1],
+      ALPHA: [0, 1, 0.1] } },
+
+
+  RANGE: {
+    BORDER: {
+      RADIUS: [0, 36, 1] },
+
+    SHADOW: {
+      REACH: [0, 20, 1],
+      BLUR: [0, 40, 1],
+      ALPHA: [0, 1, 0.1] },
+
+    TRACK: {
+      ALPHA: [0, 1, 0.01] } },
+
+
+  CHECKBOX: {
+    BORDER: {
+      RADIUS: [0, 36, 1] },
+
+    SHADOW: {
+      REACH: [0, 20, 1],
+      BLUR: [0, 40, 1],
+      ALPHA: [0, 1, 0.1] } },
+
+
+  RADIO: {
+    BORDER: {
+      WIDTH: [0, 10, 1],
+      RADIUS: [0, 36, 1] },
+
+    SHADOW: {
+      REACH: [0, 20, 1],
+      BLUR: [0, 40, 1],
+      ALPHA: [0, 1, 0.1] } } };
+
+
+
+
+const CARD_ID = '#cards';
+const BUTTON_ID = '#buttons';
+const TEXT_ID = '#texts';
+const RANGE_ID = '#ranges';
+const CHECKBOX_ID = '#checkboxes';
+const RADIO_ID = '#radios';
+const IDS = [CARD_ID, BUTTON_ID, TEXT_ID, RANGE_ID, CHECKBOX_ID, RADIO_ID];
+const App = () => {
+  const [model, setModel] = useState(0);
+  const [active, setActive] = useState(window.location.hash || IDS[0]);
+  const [next, setNext] = useState(IDS[IDS.indexOf(active) + 1]);
+  const [prev, setPrev] = useState(IDS[IDS.indexOf(active) - 1]);
+  const datRef = useRef(null);
+
+  useEffect(() => {
+    if (!datRef.current) {
+      datRef.current = new GUI({ name: 'Neumorphic Playground' });
+      const digest = (CONFIG_OBJECT, BOUNDS_OBJECT, FOLDER) => {
+        for (const category in BOUNDS_OBJECT) {
+          if (Array.isArray(BOUNDS_OBJECT[category])) {
+            FOLDER.add(
+            CONFIG_OBJECT,
+            category,
+            BOUNDS_OBJECT[category][0],
+            BOUNDS_OBJECT[category][1],
+            BOUNDS_OBJECT[category][2] ? BOUNDS_OBJECT[category][2] : 1).
+            onChange(() => setModel(new Date().getTime()));
+          } else {
+            const NEW_FOLDER = FOLDER ?
+            FOLDER.addFolder(category) :
+            datRef.current.addFolder(category);
+            digest(CONFIG_OBJECT[category], BOUNDS_OBJECT[category], NEW_FOLDER);
+          }
+        }
+      };
+      digest(CONFIG, BOUNDS);
+    }
+    // Set HSL on document
+    document.documentElement.style.setProperty('--hue', CONFIG.COLOR.HUE);
+    document.documentElement.style.setProperty(
+    '--saturation',
+    CONFIG.COLOR.SATURATION);
+
+    document.documentElement.style.setProperty(
+    '--lightness',
+    CONFIG.COLOR.LIGHTNESS);
+
+  }, [model]);
+
+  // Set up scroll out
+  useEffect(() => {
+    ScrollOut({
+      scrollingElement: document.querySelector('main'),
+      targets: 'section',
+      threshold: 0.9,
+      onShown: element => {
+        setActive(`#${element.getAttribute('id')}`);
+      } });
+
+  }, []);
+
+  useEffect(() => {
+    setNext(IDS[IDS.indexOf(active) + 1]);
+    setPrev(IDS[IDS.indexOf(active) - 1]);
+  }, [active]);
+
+  return (
+    React.createElement(Fragment, null,
+    React.createElement("main", null,
+    React.createElement("section", {
+      id: "cards",
+      style: {
+        '--neumorphic-reach': CONFIG.CARD.SHADOW.REACH,
+        '--neumorphic-blur': CONFIG.CARD.SHADOW.BLUR,
+        '--neumorphic-intensity': CONFIG.CARD.SHADOW.ALPHA,
+        '--border-width': CONFIG.CARD.BORDER.WIDTH,
+        '--border-intensity': CONFIG.CARD.BORDER.ALPHA,
+        '--border-radius': CONFIG.CARD.BORDER.RADIUS,
+        '--height': CONFIG.CARD.SIZE.HEIGHT,
+        '--width': CONFIG.CARD.SIZE.WIDTH } },
+
+    React.createElement("article", null),
+    React.createElement("h1", null, "Card")),
+
+    React.createElement("section", {
+      id: "buttons",
+      style: {
+        '--neumorphic-reach': CONFIG.BUTTON.SHADOW.REACH,
+        '--neumorphic-blur': CONFIG.BUTTON.SHADOW.BLUR,
+        '--neumorphic-intensity': CONFIG.BUTTON.SHADOW.ALPHA,
+        '--border-width': CONFIG.BUTTON.BORDER.WIDTH,
+        '--border-intensity': CONFIG.BUTTON.BORDER.ALPHA,
+        '--border-radius': CONFIG.BUTTON.BORDER.RADIUS,
+        '--margin': Math.max(
+        CONFIG.BUTTON.SHADOW.REACH,
+        CONFIG.BUTTON.SHADOW.BLUR) } },
+
+
+    React.createElement("div", { className: "buttons" },
+    React.createElement("button", null, "Click"),
+    React.createElement("button", null, "Click"),
+    React.createElement("button", null, "Click")),
+
+    React.createElement("h1", null, "Button")),
+
+    React.createElement("section", {
+      id: "texts",
+      style: {
+        '--neumorphic-reach': CONFIG.TEXT.SHADOW.REACH,
+        '--neumorphic-blur': CONFIG.TEXT.SHADOW.BLUR,
+        '--neumorphic-intensity': CONFIG.TEXT.SHADOW.ALPHA,
+        '--border-width': CONFIG.TEXT.BORDER.WIDTH,
+        '--border-intensity': CONFIG.TEXT.BORDER.ALPHA,
+        '--border-radius': CONFIG.TEXT.BORDER.RADIUS,
+        '--margin': 6 } },
+
+    React.createElement("div", { className: "texts" },
+    React.createElement("div", { className: "input" },
+    React.createElement("label", { htmlFor: "text-1" }, "Label"),
+    React.createElement("input", { id: "text-1", type: "text" })),
+
+    React.createElement("div", { className: "input" },
+    React.createElement("label", { htmlFor: "text-2" }, "Label"),
+    React.createElement("input", { id: "text-2", type: "text" })),
+
+    React.createElement("div", { className: "input" },
+    React.createElement("label", { htmlFor: "text-3" }, "Label"),
+    React.createElement("input", { id: "text-3", type: "text" }))),
+
+
+    React.createElement("h1", null, "Text")),
+
+    React.createElement("section", {
+      id: "ranges",
+      style: {
+        '--neumorphic-reach': CONFIG.RANGE.SHADOW.REACH,
+        '--neumorphic-blur': CONFIG.RANGE.SHADOW.BLUR,
+        '--neumorphic-intensity': CONFIG.RANGE.SHADOW.ALPHA,
+        '--track-intensity': CONFIG.RANGE.TRACK.ALPHA,
+        '--border-width': CONFIG.RANGE.BORDER.WIDTH,
+        '--border-intensity': CONFIG.RANGE.BORDER.ALPHA,
+        '--border-radius': CONFIG.RANGE.BORDER.RADIUS,
+        '--margin': 15 } },
+
+    React.createElement("div", { className: "ranges" },
+    React.createElement("div", { className: "input" },
+    React.createElement("label", { htmlFor: "range-1" }, "Label"),
+    React.createElement("input", {
+      id: "range-1",
+      type: "range",
+      min: "0",
+      max: "10",
+      step: "1",
+      defaultValue: "2" })),
+
+
+    React.createElement("div", { className: "input" },
+    React.createElement("label", { htmlFor: "range-2" }, "Label"),
+    React.createElement("input", {
+      id: "range-2",
+      type: "range",
+      min: "0",
+      max: "10",
+      step: "1",
+      defaultValue: "4" })),
+
+
+    React.createElement("div", { className: "input" },
+    React.createElement("label", { htmlFor: "range-3" }, "Label"),
+    React.createElement("input", {
+      id: "range-3",
+      type: "range",
+      min: "0",
+      max: "10",
+      step: "1",
+      defaultValue: "6" }))),
+
+
+
+    React.createElement("h1", null, "Range")),
+
+    React.createElement("section", {
+      id: "checkboxes",
+      style: {
+        '--neumorphic-reach': CONFIG.CHECKBOX.SHADOW.REACH,
+        '--neumorphic-blur': CONFIG.CHECKBOX.SHADOW.BLUR,
+        '--neumorphic-intensity': CONFIG.CHECKBOX.SHADOW.ALPHA,
+        '--border-width': CONFIG.CHECKBOX.BORDER.WIDTH,
+        '--border-intensity': CONFIG.CHECKBOX.BORDER.ALPHA,
+        '--border-radius': CONFIG.CHECKBOX.BORDER.RADIUS,
+        '--margin': 15 } },
+
+    React.createElement("div", { className: "checkboxes" },
+    React.createElement("div", { className: "input" },
+    React.createElement("input", { id: "check-1", type: "checkbox" }),
+    React.createElement("label", { htmlFor: "check-1" }, "Check")),
+
+    React.createElement("div", { className: "input" },
+    React.createElement("input", { id: "check-2", type: "checkbox" }),
+    React.createElement("label", { htmlFor: "check-2" }, "Check")),
+
+    React.createElement("div", { className: "input" },
+    React.createElement("input", { id: "check-3", type: "checkbox" }),
+    React.createElement("label", { htmlFor: "check-3" }, "Check"))),
+
+
+    React.createElement("h1", null, "Checkbox")),
+
+    React.createElement("section", {
+      id: "radios",
+      style: {
+        '--neumorphic-reach': CONFIG.RADIO.SHADOW.REACH,
+        '--neumorphic-blur': CONFIG.RADIO.SHADOW.BLUR,
+        '--neumorphic-intensity': CONFIG.RADIO.SHADOW.ALPHA,
+        '--border-width': CONFIG.RADIO.BORDER.WIDTH,
+        '--border-intensity': CONFIG.RADIO.BORDER.ALPHA,
+        '--border-radius': CONFIG.RADIO.BORDER.RADIUS,
+        '--margin': 15 } },
+
+    React.createElement("div", { className: "radios" },
+    React.createElement("div", { className: "input radio" },
+    React.createElement("input", { id: "radio-1-1", type: "radio", name: "radio-one", checked: true }),
+    React.createElement("label", { htmlFor: "radio-1-1" }, "Radio"),
+    React.createElement("input", { id: "radio-1-2", type: "radio", name: "radio-one" }),
+    React.createElement("label", { htmlFor: "radio-1-2" }, "Radio")),
+
+    React.createElement("div", { className: "input radio" },
+    React.createElement("input", { id: "radio-2-1", type: "radio", name: "radio-two", checked: true }),
+    React.createElement("label", { htmlFor: "radio-2-1" }, "Radio"),
+    React.createElement("input", { id: "radio-2-2", type: "radio", name: "radio-two" }),
+    React.createElement("label", { htmlFor: "radio-2-2" }, "Radio")),
+
+    React.createElement("div", { className: "input radio" },
+    React.createElement("input", { id: "radio-3-1", type: "radio", name: "radio-three", checked: true }),
+    React.createElement("label", { htmlFor: "radio-3-1" }, "Radio"),
+    React.createElement("input", { id: "radio-3-2", type: "radio", name: "radio-three" }),
+    React.createElement("label", { htmlFor: "radio-3-2" }, "Radio"))),
+
+
+    React.createElement("h1", null, "Radio"))),
+
+
+    React.createElement("footer", null,
+    IDS.map(ID => {
+      return (
+        React.createElement("a", { href: ID, key: ID, className: `${active === ID && 'active'}` },
+        `${ID.charAt(1).toUpperCase()}${ID.substr(2)}`));
+
+
+    })),
+
+    React.createElement("a", { href: next }, "Next",
+
+    React.createElement("svg", { viewBox: "0 0 24 24" },
+    React.createElement("path", {
+      fill: "currentColor",
+      d: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" }))),
+
+
+
+    React.createElement("a", { href: prev }, "Prev",
+
+    React.createElement("svg", { viewBox: "0 0 24 24" },
+    React.createElement("path", {
+      fill: "currentColor",
+      d: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" })))));
+
+
+
+
+
+};
+render(React.createElement(App, null), document.getElementById('app'));
\ No newline at end of file
diff --git a/neumorphic-playground/dist/style.css b/neumorphic-playground/dist/style.css
new file mode 100644
index 0000000..1fb4fe2
--- /dev/null
+++ b/neumorphic-playground/dist/style.css
@@ -0,0 +1,678 @@
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+body {
+  background: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  min-height: 100vh;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+}
+section {
+  -webkit-box-align: center;
+          align-items: center;
+  height: 100%;
+  scroll-snap-align: start;
+  -webkit-box-flex: 1;
+          flex: 1 0 100%;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  overflow: auto;
+  width: 100%;
+  position: relative;
+}
+#app {
+  position: relative;
+}
+#app > a {
+  --neumorphic-reach: 10;
+  --neumorphic-blur: 15;
+  --neumorphic-intensity: 0.75;
+  --default: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
+  --dark: hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 15) * 1%), var(--neumorphic-intensity));
+  --light: hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 15) * 1%), var(--neumorphic-intensity));
+  --x: calc(var(--neumorphic-reach) * 1px);
+  --y: calc(var(--neumorphic-reach) * 1px);
+  --blur: calc(var(--neumorphic-blur) * 1px);
+  --x2: calc(var(--neumorphic-reach) * -1px);
+  --y2: calc(var(--neumorphic-reach) * -1px);
+  box-shadow: var(--x) var(--y) var(--blur) var(--dark),
var(--x2) var(--y2) var(--blur) var(--light);
+  position: absolute;
+  top: 50%;
+  height: 44px;
+  width: 44px;
+  background: var(--default);
+  border-radius: 50%;
+  font-size: 0;
+}
+#app > a:visited path,
+#app > a path {
+  fill: var(--dark);
+}
+#app > a:hover path,
+#app > a:focus path {
+  fill: var(--light);
+}
+#app > a:active {
+  border: 4px solid #fff;
+}
+#app > a:active path {
+  fill: #fff;
+}
+#app > a:not([href]) {
+  border: 0;
+  cursor: not-allowed;
+}
+#app > a:not([href]) path {
+  fill: var(--dark);
+}
+#app > a:nth-of-type(1) {
+  left: 100%;
+  -webkit-transform: translate(50%, -50%);
+          transform: translate(50%, -50%);
+}
+#app > a:nth-of-type(2) {
+  right: 100%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+#app > a:nth-of-type(2) svg {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+main {
+  --neumorphic-reach: 30;
+  --neumorphic-blur: 60;
+  --neumorphic-intensity: 0.25;
+  --border-width: 0;
+  --border-intensity: 0.1;
+  --border-radius: 25;
+  --x: calc(var(--neumorphic-reach) * 1px);
+  --y: calc(var(--neumorphic-reach) * 1px);
+  --blur: calc(var(--neumorphic-blur) * 1px);
+  --x2: calc(var(--neumorphic-reach) * -1px);
+  --y2: calc(var(--neumorphic-reach) * -1px);
+  -webkit-overflow-scrolling: touch;
+  background: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
+  border: calc(var(--border-width, 0) * 1px) solid hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 15) * 1%), var(--border-intensity));
+  border-radius: calc(var(--border-radius) * 1px);
+  box-shadow: var(--x) var(--y) var(--blur) hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 15) * 1%), var(--neumorphic-intensity)),
var(--x2) var(--y2) var(--blur) hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 15) * 1%), var(--neumorphic-intensity));
+  display: -webkit-box;
+  display: flex;
+  overflow: auto;
+  overflow-y: hidden;
+  position: relative;
+  scroll-behavior: smooth;
+  -ms-scroll-snap-type: x mandatory;
+      scroll-snap-type: x mandatory;
+  height: 75vmin;
+  width: 75vmin;
+}
+footer {
+  position: absolute;
+  top: calc(100% + 60px);
+  left: 50%;
+  -webkit-transform: translate(-50%);
+          transform: translate(-50%);
+  display: -webkit-box;
+  display: flex;
+}
+footer a.active {
+  background: radial-gradient(circle at 50% 50%, hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 30) * 1%)) 20%, transparent 25%);
+}
+footer a {
+  height: 44px;
+  width: 44px;
+  border-radius: 50%;
+  font-size: 0;
+  display: block;
+  position: relative;
+  -webkit-transition: background 0.1s ease;
+  transition: background 0.1s ease;
+}
+footer a:hover:not(.active) {
+  background: radial-gradient(circle at 50% 50%, hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 10) * 1%)) 20%, transparent 25%);
+}
+footer a:after {
+  --neumorphic-reach: 4;
+  --neumorphic-blur: 8;
+  --neumorphic-intensity: 0.25;
+  --dark: hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 15) * 1%), var(--neumorphic-intensity));
+  --light: hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 15) * 1%), var(--neumorphic-intensity));
+  --x: calc(var(--neumorphic-reach) * 1px);
+  --y: calc(var(--neumorphic-reach) * 1px);
+  --blur: calc(var(--neumorphic-blur) * 1px);
+  --x2: calc(var(--neumorphic-reach) * -1px);
+  --y2: calc(var(--neumorphic-reach) * -1px);
+  content: '';
+  height: 30px;
+  width: 30px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  border-radius: 50%;
+  box-shadow: var(--x) var(--y) var(--blur) var(--dark) inset,
var(--x2) var(--y2) var(--blur) var(--light) inset;
+}
+article {
+  --x: calc(var(--neumorphic-reach) * 1px);
+  --y: calc(var(--neumorphic-reach) * 1px);
+  --blur: calc(var(--neumorphic-blur) * 1px);
+  --x2: calc(var(--neumorphic-reach) * -1px);
+  --y2: calc(var(--neumorphic-reach) * -1px);
+  background: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
+  border: calc(var(--border-width, 0) * 1px) solid hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 15) * 1%), var(--border-intensity));
+  border-radius: calc(var(--border-radius) * 1px);
+  box-shadow: var(--x) var(--y) var(--blur) hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 15) * 1%), var(--neumorphic-intensity)),
var(--x2) var(--y2) var(--blur) hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 15) * 1%), var(--neumorphic-intensity));
+  height: calc(var(--height, 100) * 1px);
+  width: calc(var(--width, 100) * 1px);
+}
+header {
+  position: fixed;
+  height: 75vmin;
+  width: 100vw;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  z-index: -1;
+}
+h1 {
+  color: hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 50) * 1%), 0.25);
+  position: absolute;
+  z-index: 2;
+  font-weight: bold;
+  bottom: 5%;
+  right: 5%;
+}
+label {
+  color: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 50) * 1%));
+}
+@supports (-webkit-appearance: none) {
+  input[type='checkbox'],
+  input[type='radio'] {
+    --default: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
+    --light: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 20) * 1%), var(--neumorphic-intensity));
+    --dark: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%), var(--neumorphic-intensity));
+    --x: calc(var(--neumorphic-reach) * 1px);
+    --y: calc(var(--neumorphic-reach) * 1px);
+    --blur: calc(var(--neumorphic-blur) * 1px);
+    --x2: calc(var(--neumorphic-reach) * -1px);
+    --y2: calc(var(--neumorphic-reach) * -1px);
+    --size: 36;
+    -webkit-appearance: none;
+    height: calc(var(--size) * 1px);
+    outline: none;
+    margin: 0;
+    box-shadow: var(--x) var(--y) var(--blur) var(--dark) inset,
var(--x2) var(--y2) var(--blur) var(--light) inset;
+    cursor: pointer;
+    border-style: solid;
+    border-color: #fff;
+    border-radius: calc(var(--border-radius) * 1px);
+    border-width: calc(var(--border-width) * 1px);
+    background: var(--default);
+    -webkit-transition: box-shadow 0.1s;
+    transition: box-shadow 0.1s;
+    width: calc(var(--size) * 1px);
+  }
+  input[type='checkbox']:checked,
+  input[type='radio']:checked {
+    background: radial-gradient(circle at center center, white 25%, transparent 25%), var(--default);
+  }
+  input[type='checkbox']:checked + label,
+  input[type='radio']:checked + label {
+    font-weight: bold;
+  }
+  input[type=radio] {
+    box-shadow: var(--x) var(--y) var(--blur) var(--dark),
var(--x2) var(--y2) var(--blur) var(--light);
+  }
+  input[type=radio]:hover {
+    --x: calc(var(--neumorphic-reach) * 2px);
+    --y: calc(var(--neumorphic-reach) * 2px);
+    --blur: calc(var(--neumorphic-blur) * 2px);
+    --x2: calc(var(--neumorphic-reach) * -2px);
+    --y2: calc(var(--neumorphic-reach) * -2px);
+  }
+  input[type=radio]:checked {
+    box-shadow: var(--x) var(--y) var(--blur) var(--dark) inset,
var(--x2) var(--y2) var(--blur) var(--light) inset;
+  }
+  input[type=range] {
+    --thumb-size: 36;
+    --thumb-border: 4;
+    --thumb-angle: 135;
+    -webkit-appearance: none;
+    background: transparent;
+    width: 100%;
+  }
+  input[type=range]:focus {
+    outline: none;
+  }
+  input[type=range]::-ms-track {
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+    cursor: pointer;
+    width: 100%;
+  }
+  input[type=range]:focus::-webkit-slider-thumb {
+    border-color: hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 10) * 1%), 1);
+  }
+  input[type=range]:focus::-moz-range-thumb {
+    border-color: hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 10) * 1%), 1);
+  }
+  input[type=range]:focus::-ms-thumb {
+    border-color: hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 10) * 1%), 1);
+  }
+  input[type=range]::-webkit-slider-thumb {
+    --light: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 20) * 1%));
+    --dark: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%));
+    --default: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
+    -webkit-appearance: none;
+    background: -webkit-gradient(linear, left top, left bottom, from(calc(var(--thumb-angle) * 1deg)), color-stop(var(--light)), to(var(--dark))), var(--default);
+    background: linear-gradient(calc(var(--thumb-angle) * 1deg), var(--light), var(--dark)), var(--default);
+    background-size: calc((var(--thumb-size) + var(--thumb-border)) * 1px) calc((var(--thumb-size) + var(--thumb-border)) * 1px);
+    background-position: calc(var(--thumb-border) * -1px) calc(var(--thumb-border) * -1px);
+    border-style: solid;
+    border-width: calc(var(--thumb-border) * 1px);
+    border-color: transparent;
+    border-radius: calc(var(--border-radius) * 1px);
+    cursor: pointer;
+    height: calc(var(--thumb-size) * 1px);
+    margin-top: 0px;
+    width: calc(var(--thumb-size) * 1px);
+  }
+  input[type=range]::-webkit-slider-thumb:hover {
+    border-color: hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%), 1);
+  }
+  input[type=range]::-webkit-slider-thumb:active {
+    border-color: #fff;
+  }
+  input[type=range]::-moz-range-thumb {
+    --light: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 20) * 1%));
+    --dark: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%));
+    --default: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
+    background: linear-gradient(calc(var(--thumb-angle) * 1deg), var(--light), var(--dark)), var(--default);
+    background-size: calc((var(--thumb-size) + var(--thumb-border)) * 1px) calc((var(--thumb-size) + var(--thumb-border)) * 1px);
+    background-position: calc(var(--thumb-border) * -1px) calc(var(--thumb-border) * -1px);
+    border-style: solid;
+    border-width: calc(var(--thumb-border) * 1px);
+    border-color: transparent;
+    border-radius: calc(var(--border-radius) * 1px);
+    cursor: pointer;
+    height: calc(var(--thumb-size) * 1px);
+    width: calc(var(--thumb-size) * 1px);
+  }
+  input[type=range]::-moz-range-thumb:hover {
+    border-color: hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%), 1);
+  }
+  input[type=range]::-moz-range-thumb:active {
+    border-color: #fff;
+  }
+  input[type=range]::-ms-thumb {
+    --light: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 20) * 1%));
+    --dark: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%));
+    --default: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
+    background: linear-gradient(calc(var(--thumb-angle) * 1deg), var(--light), var(--dark)), var(--default);
+    background-size: calc((var(--thumb-size) + var(--thumb-border)) * 1px) calc((var(--thumb-size) + var(--thumb-border)) * 1px);
+    background-position: calc(var(--thumb-border) * -1px) calc(var(--thumb-border) * -1px);
+    border-style: solid;
+    border-width: calc(var(--thumb-border) * 1px);
+    border-color: transparent;
+    border-radius: calc(var(--border-radius) * 1px);
+    cursor: pointer;
+    height: calc(var(--thumb-size) * 1px);
+    width: calc(var(--thumb-size) * 1px);
+  }
+  input[type=range]::-ms-thumb:hover {
+    border-color: hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%), 1);
+  }
+  input[type=range]::-ms-thumb:active {
+    border-color: #fff;
+  }
+  input[type=range]::-webkit-slider-runnable-track {
+    --x: calc(var(--neumorphic-reach) * 1px);
+    --y: calc(var(--neumorphic-reach) * 1px);
+    --blur: calc(var(--neumorphic-blur) * 1px);
+    --x2: calc(var(--neumorphic-reach) * -1px);
+    --y2: calc(var(--neumorphic-reach) * -1px);
+    --default: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
+    --light: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 20) * 1%));
+    --neumorphic-light: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 20) * 1%), var(--neumorphic-intensity));
+    --neumorphic-dark: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%), var(--neumorphic-intensity));
+    background: var(--default);
+    border-radius: calc(var(--border-radius) * 1px);
+    border-color: var(--light);
+    border-style: solid;
+    border-width: 0;
+    box-shadow: var(--x) var(--y) var(--blur) var(--neumorphic-dark) inset,
var(--x2) var(--y2) var(--blur) var(--neumorphic-light) inset;
+    cursor: pointer;
+    height: calc(var(--thumb-size) * 1px);
+    width: 100%;
+  }
+  input[type=range]:focus::-webkit-slider-runnable-track {
+    --track: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%), var(--track-intensity));
+    background: var(--track);
+  }
+  input[type=range]::-moz-range-track {
+    --x: calc(var(--neumorphic-reach) * 1px);
+    --y: calc(var(--neumorphic-reach) * 1px);
+    --blur: calc(var(--neumorphic-blur) * 1px);
+    --x2: calc(var(--neumorphic-reach) * -1px);
+    --y2: calc(var(--neumorphic-reach) * -1px);
+    --default: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
+    --light: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 20) * 1%));
+    --neumorphic-light: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 20) * 1%), var(--neumorphic-intensity));
+    --neumorphic-dark: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%), var(--neumorphic-intensity));
+    background: var(--default);
+    border-radius: calc(var(--border-radius) * 1px);
+    border-color: var(--light);
+    border-style: solid;
+    border-width: 0;
+    box-shadow: var(--x) var(--y) var(--blur) var(--neumorphic-dark) inset,
var(--x2) var(--y2) var(--blur) var(--neumorphic-light) inset;
+    cursor: pointer;
+    height: calc(var(--thumb-size) * 1px);
+    width: 100%;
+  }
+  input[type=range]::-ms-track {
+    --x: calc(var(--neumorphic-reach) * 1px);
+    --y: calc(var(--neumorphic-reach) * 1px);
+    --blur: calc(var(--neumorphic-blur) * 1px);
+    --x2: calc(var(--neumorphic-reach) * -1px);
+    --y2: calc(var(--neumorphic-reach) * -1px);
+    --default: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
+    --light: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 20) * 1%));
+    --neumorphic-light: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 20) * 1%), var(--neumorphic-intensity));
+    --neumorphic-dark: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%), var(--neumorphic-intensity));
+    background: var(--default);
+    border-radius: calc(var(--border-radius) * 1px);
+    border-color: var(--light);
+    border-style: solid;
+    border-width: 0;
+    box-shadow: var(--x) var(--y) var(--blur) var(--neumorphic-dark) inset,
var(--x2) var(--y2) var(--blur) var(--neumorphic-light) inset;
+    cursor: pointer;
+    height: calc(var(--thumb-size) * 1px);
+    width: 100%;
+  }
+  button {
+    --blur: calc(var(--neumorphic-blur) * 1px);
+    --x: calc(var(--neumorphic-reach) * 1px);
+    --y: calc(var(--neumorphic-reach) * 1px);
+    --x2: calc(var(--neumorphic-reach) * -1px);
+    --y2: calc(var(--neumorphic-reach) * -1px);
+    -webkit-appearance: none;
+    background: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
+    color: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 40) * 1%));
+    border: calc(var(--border-width, 0) * 1px) solid hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 15) * 1%), var(--border-intensity));
+    border-radius: calc(var(--border-radius) * 1px);
+    box-shadow: var(--x) var(--y) var(--blur) hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 15) * 1%), var(--neumorphic-intensity)),
var(--x2) var(--y2) var(--blur) hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 15) * 1%), var(--neumorphic-intensity));
+    font-size: 1rem;
+    font-weight: 500;
+    overflow: hidden;
+    outline: transparent;
+    padding: 1rem 2rem;
+    position: relative;
+    -webkit-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+  }
+  button:after {
+    bottom: 0;
+    content: '';
+    height: 15%;
+    left: 0;
+    position: absolute;
+    width: 100%;
+  }
+  button:active {
+    box-shadow: var(--x) var(--y) var(--blur) hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 15) * 1%), var(--neumorphic-intensity)) inset,
var(--x2) var(--y2) var(--blur) hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 15) * 1%), var(--neumorphic-intensity)) inset;
+  }
+  button:hover:after,
+  button:focus:after {
+    background: hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 40) * 1%), 0.35);
+  }
+  button:active:after {
+    background: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 40) * 1%));
+  }
+  button:nth-of-type(2):active {
+    background: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 40) * 1%));
+    box-shadow: none;
+    color: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 40) * 1%));
+  }
+  button:nth-of-type(3) {
+    background: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%));
+    color: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 20) * 1%));
+  }
+  button:nth-of-type(3):after {
+    display: none;
+  }
+  button:nth-of-type(3):hover,
+  button:nth-of-type(3):focus {
+    --x: calc(var(--neumorphic-reach) * 2px);
+    --y: calc(var(--neumorphic-reach) * 2px);
+    --x2: calc(var(--neumorphic-reach) * -2px);
+    --y2: calc(var(--neumorphic-reach) * -2px);
+    background: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 30) * 1%));
+  }
+  button:nth-of-type(3):active {
+    background: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 40) * 1%));
+    box-shadow: none;
+    color: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 40) * 1%));
+  }
+  [type='text'] {
+    --blur: calc(var(--neumorphic-blur) * 1px);
+    --x: calc(var(--neumorphic-reach) * 1px);
+    --y: calc(var(--neumorphic-reach) * 1px);
+    --x2: calc(var(--neumorphic-reach) * -1px);
+    --y2: calc(var(--neumorphic-reach) * -1px);
+    background: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
+    border-color: transparent;
+    border-radius: calc(var(--border-radius) * 1px);
+    border-style: solid;
+    border-width: calc(var(--border-width) * 1px);
+    font-size: 1rem;
+    outline: transparent;
+    overflow: hidden;
+    padding: 1rem 2rem;
+    box-shadow: var(--x) var(--y) var(--blur) hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 15) * 1%), var(--neumorphic-intensity)) inset,
var(--x2) var(--y2) var(--blur) hsla(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 15) * 1%), var(--neumorphic-intensity)) inset;
+  }
+  [type='text']:focus {
+    border-color: var(--highlight);
+  }
+  .buttons,
+  .texts,
+  .ranges,
+  .checkboxes,
+  .radios {
+    display: grid;
+    grid-gap: calc(var(--margin) * 4px);
+    width: 30vmin;
+  }
+  .radios,
+  .checkboxes {
+    width: auto;
+  }
+  .input {
+    -webkit-box-align: center;
+            align-items: center;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 1rem;
+  }
+  .texts .input:focus-within label,
+  .ranges .input:focus-within label {
+    font-weight: bold;
+  }
+  .texts .input:nth-of-type(1),
+  .ranges .input:nth-of-type(1) {
+    --highlight: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 20) * 1%));
+  }
+  .texts .input:nth-of-type(2),
+  .ranges .input:nth-of-type(2) {
+    --highlight: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%));
+  }
+  .texts .input:nth-of-type(3),
+  .ranges .input:nth-of-type(3) {
+    --highlight: transparent;
+  }
+  .texts .input:nth-of-type(3):focus-within label,
+  .ranges .input:nth-of-type(3):focus-within label {
+    color: #fff;
+  }
+  .ranges .input:nth-of-type(1) {
+    --track-intensity: 0;
+  }
+  .ranges .input:nth-of-type(2) input[type=range]::-webkit-slider-thumb:active {
+    --dark: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%), 1);
+    background: var(--dark);
+  }
+  .ranges .input:nth-of-type(2) input[type=range]::-moz-range-thumb:active {
+    --dark: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%), 1);
+    background: var(--dark);
+  }
+  .ranges .input:nth-of-type(2) input[type=range]::-ms-thumb:active {
+    --dark: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) - 20) * 1%), 1);
+    background: var(--dark);
+  }
+  .ranges .input:nth-of-type(3):focus-within input[type=range]::-webkit-slider-thumb {
+    --dot-alpha: 0.25;
+  }
+  .ranges .input:nth-of-type(3) input[type=range]::-webkit-slider-thumb {
+    --thumb-border: 0;
+    --dot-alpha: 0;
+    --dot-color: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 40) * 1%), var(--dot-alpha));
+    background: radial-gradient(circle at 50% 50%, var(--dot-color) 25%, transparent 25%), -webkit-gradient(linear, left top, left bottom, from(calc(var(--thumb-angle) * 1deg)), color-stop(var(--light)), to(var(--dark))), var(--default);
+    background: radial-gradient(circle at 50% 50%, var(--dot-color) 25%, transparent 25%), linear-gradient(calc(var(--thumb-angle) * 1deg), var(--light), var(--dark)), var(--default);
+  }
+  .ranges .input:nth-of-type(3) input[type=range]::-webkit-slider-thumb:focus {
+    --dot-alpha: 0.25;
+  }
+  .ranges .input:nth-of-type(3) input[type=range]::-webkit-slider-thumb:hover {
+    --dot-alpha: 0.5;
+  }
+  .ranges .input:nth-of-type(3) input[type=range]::-webkit-slider-thumb:active {
+    --dot-alpha: 1;
+    --thumb-angle: -45;
+  }
+  .ranges .input:nth-of-type(3) input[type=range]::-moz-range-thumb {
+    --thumb-border: 0;
+    --dot-alpha: 0;
+    --dot-color: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 40) * 1%), var(--dot-alpha));
+    background: radial-gradient(circle at 50% 50%, var(--dot-color) 25%, transparent 25%), linear-gradient(calc(var(--thumb-angle) * 1deg), var(--light), var(--dark)), var(--default);
+  }
+  .ranges .input:nth-of-type(3) input[type=range]::-moz-range-thumb:focus {
+    --dot-alpha: 0.25;
+  }
+  .ranges .input:nth-of-type(3) input[type=range]::-moz-range-thumb:hover {
+    --dot-alpha: 0.5;
+  }
+  .ranges .input:nth-of-type(3) input[type=range]::-moz-range-thumb:active {
+    --dot-alpha: 1;
+    --thumb-angle: -45;
+  }
+  .ranges .input:nth-of-type(3) input[type=range]::-ms-thumb {
+    --thumb-border: 0;
+    --dot-alpha: 0;
+    --dot-color: hsl(var(--hue), calc(var(--saturation) * 1%), calc((var(--lightness) + 40) * 1%), var(--dot-alpha));
+    background: radial-gradient(circle at 50% 50%, var(--dot-color) 25%, transparent 25%), linear-gradient(calc(var(--thumb-angle) * 1deg), var(--light), var(--dark)), var(--default);
+  }
+  .ranges .input:nth-of-type(3) input[type=range]::-ms-thumb:focus {
+    --dot-alpha: 0.25;
+  }
+  .ranges .input:nth-of-type(3) input[type=range]::-ms-thumb:hover {
+    --dot-alpha: 0.5;
+  }
+  .ranges .input:nth-of-type(3) input[type=range]::-ms-thumb:active {
+    --dot-alpha: 1;
+    --thumb-angle: -45;
+  }
+  .checkboxes .input input {
+    -webkit-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+  }
+  .checkboxes .input input:focus + label {
+    font-weight: bold;
+  }
+  .checkboxes .input:nth-of-type(1) input {
+    box-shadow: var(--x) var(--y) var(--blur) var(--dark),
var(--x2) var(--y2) var(--blur) var(--light);
+  }
+  .checkboxes .input:nth-of-type(1) input:hover {
+    --x: calc(var(--neumorphic-reach) * 2px);
+    --y: calc(var(--neumorphic-reach) * 2px);
+    --x2: calc(var(--neumorphic-reach) * -2px);
+    --y2: calc(var(--neumorphic-reach) * -2px);
+  }
+  .checkboxes .input:nth-of-type(1) input:focus + label {
+    font-weight: bold;
+  }
+  .checkboxes .input:nth-of-type(1) input:hover {
+    background: radial-gradient(circle at center center, hsla(0, 0%, 100%, 0.5) 25%, transparent 25%), var(--default);
+  }
+  .checkboxes .input:nth-of-type(1) input:checked {
+    background: radial-gradient(circle at center center, hsla(0, 0%, 100%, 1) 25%, transparent 25%), var(--default);
+    box-shadow: var(--x) var(--y) var(--blur) var(--dark) inset,
var(--x2) var(--y2) var(--blur) var(--light) inset;
+  }
+  .checkboxes .input:nth-of-type(2) input:hover,
+  .checkboxes .input:nth-of-type(2) input:focus {
+    --x: calc(var(--neumorphic-reach) * 2px);
+    --y: calc(var(--neumorphic-reach) * 2px);
+    --x2: calc(var(--neumorphic-reach) * -2px);
+    --y2: calc(var(--neumorphic-reach) * -2px);
+  }
+  .checkboxes .input:nth-of-type(2) input:hover {
+    background: radial-gradient(circle at center center, hsla(0, 0%, 100%, 0.5) 25%, transparent 25%), var(--default);
+  }
+  .checkboxes .input:nth-of-type(2) input:checked {
+    --neumorphic-intensity: 1;
+    background: radial-gradient(circle at center center, hsla(0, 0%, 100%, 1) 25%, var(--dark) 25%), var(--default);
+    box-shadow: none;
+  }
+  .radios .input input {
+    -webkit-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+  }
+  .radios .input input:focus + label {
+    font-weight: bold;
+  }
+  .radios .input:nth-of-type(1) input {
+    box-shadow: var(--x) var(--y) var(--blur) var(--dark),
var(--x2) var(--y2) var(--blur) var(--light);
+  }
+  .radios .input:nth-of-type(1) input:hover {
+    --x: calc(var(--neumorphic-reach) * 2px);
+    --y: calc(var(--neumorphic-reach) * 2px);
+    --x2: calc(var(--neumorphic-reach) * -2px);
+    --y2: calc(var(--neumorphic-reach) * -2px);
+  }
+  .radios .input:nth-of-type(1) input:focus + label {
+    font-weight: bold;
+  }
+  .radios .input:nth-of-type(1) input:hover {
+    background: radial-gradient(circle at center center, hsla(0, 0%, 100%, 0.5) 25%, transparent 25%), var(--default);
+  }
+  .radios .input:nth-of-type(1) input:checked {
+    background: radial-gradient(circle at center center, hsla(0, 0%, 100%, 1) 25%, transparent 25%), var(--default);
+    box-shadow: var(--x) var(--y) var(--blur) var(--dark) inset,
var(--x2) var(--y2) var(--blur) var(--light) inset;
+  }
+  .radios .input:nth-of-type(2) input:hover,
+  .radios .input:nth-of-type(2) input:focus {
+    --x: calc(var(--neumorphic-reach) * 2px);
+    --y: calc(var(--neumorphic-reach) * 2px);
+    --x2: calc(var(--neumorphic-reach) * -2px);
+    --y2: calc(var(--neumorphic-reach) * -2px);
+  }
+  .radios .input:nth-of-type(2) input:hover {
+    background: radial-gradient(circle at center center, hsla(0, 0%, 100%, 0.5) 25%, transparent 25%), var(--default);
+  }
+  .radios .input:nth-of-type(2) input:checked {
+    --neumorphic-intensity: 1;
+    background: radial-gradient(circle at center center, hsla(0, 0%, 100%, 1) 25%, var(--dark) 25%), var(--default);
+    box-shadow: none;
+  }
+}
\ No newline at end of file
diff --git a/neumorphic-playground/license.txt b/neumorphic-playground/license.txt
new file mode 100644
index 0000000..2e21aa9
--- /dev/null
+++ b/neumorphic-playground/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Jhey (https://codepen.io/jh3y/pen/yLNeMao)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/neumorphic-playground/src/index.pug b/neumorphic-playground/src/index.pug
new file mode 100644
index 0000000..4b9f0fe
--- /dev/null
+++ b/neumorphic-playground/src/index.pug
@@ -0,0 +1 @@
+#app
\ No newline at end of file
diff --git a/neumorphic-playground/src/script.babel b/neumorphic-playground/src/script.babel
new file mode 100644
index 0000000..7578269
--- /dev/null
+++ b/neumorphic-playground/src/script.babel
@@ -0,0 +1,445 @@
+const {
+  dat: { GUI },
+  React,
+  React: { useEffect, useRef, useState, Fragment },
+  ReactDOM: { render },
+  // ScrollOut,
+} = window
+
+const CONFIG = {
+  COLOR: {
+    HUE: 225,
+    SATURATION: 40,
+    LIGHTNESS: 65,
+  },
+  CARD: {
+    BORDER: {
+      WIDTH: 0,
+      RADIUS: 10,
+      ALPHA: 0.1,
+    },
+    SHADOW: {
+      REACH: 30,
+      BLUR: 60,
+      ALPHA: 0.65,
+    },
+    SIZE: {
+      HEIGHT: 200,
+      WIDTH: 200,
+    },
+  },
+  BUTTON: {
+    BORDER: {
+      WIDTH: 0,
+      RADIUS: 10,
+      ALPHA: 0.1,
+    },
+    SHADOW: {
+      REACH: 5,
+      BLUR: 10,
+      ALPHA: 0.5,
+    },
+  },
+  TEXT: {
+    BORDER: {
+      WIDTH: 2,
+      RADIUS: 10,
+      ALPHA: 0.1,
+    },
+    SHADOW: {
+      REACH: 4,
+      BLUR: 8,
+      ALPHA: 0.5,
+    },
+  },
+  RANGE: {
+    BORDER: {
+      RADIUS: 36,
+    },
+    SHADOW: {
+      REACH: 4,
+      BLUR: 8,
+      ALPHA: 0.5,
+    },
+    TRACK: {
+      ALPHA: 0.2,
+    },
+  },
+  CHECKBOX: {
+    BORDER: {
+      RADIUS: 36,
+    },
+    SHADOW: {
+      REACH: 4,
+      BLUR: 8,
+      ALPHA: 0.5,
+    },
+  },
+  RADIO: {
+    BORDER: {
+      WIDTH: 0,
+      RADIUS: 36,
+    },
+    SHADOW: {
+      REACH: 4,
+      BLUR: 8,
+      ALPHA: 0.5,
+    },
+  },
+}
+
+const BOUNDS = {
+  COLOR: {
+    HUE: [0, 360, 1],
+    SATURATION: [0, 100, 1],
+    LIGHTNESS: [0, 100, 1],
+  },
+  CARD: {
+    BORDER: {
+      WIDTH: [0, 10, 1],
+      ALPHA: [0, 1, 0.01],
+      RADIUS: [0, 50, 1],
+    },
+    SHADOW: {
+      BLUR: [0, 100, 1],
+      REACH: [0, 50, 1],
+      ALPHA: [0.2, 1, 0.01],
+    },
+    SIZE: {
+      HEIGHT: [50, 300, 1],
+      WIDTH: [50, 300, 1],
+    },
+  },
+  BUTTON: {
+    BORDER: {
+      WIDTH: [0, 10, 1],
+      ALPHA: [0, 1, 0.01],
+      RADIUS: [0, 50, 1],
+    },
+    SHADOW: {
+      BLUR: [0, 100, 1],
+      REACH: [0, 50, 1],
+      ALPHA: [0.2, 1, 0.01],
+    },
+  },
+  TEXT: {
+    BORDER: {
+      WIDTH: [0, 10, 1],
+      RADIUS: [0, 40, 1],
+      ALPHA: [0, 1, 0.01],
+    },
+    SHADOW: {
+      REACH: [0, 20, 1],
+      BLUR: [0, 40, 1],
+      ALPHA: [0, 1, 0.1],
+    },
+  },
+  RANGE: {
+    BORDER: {
+      RADIUS: [0, 36, 1],
+    },
+    SHADOW: {
+      REACH: [0, 20, 1],
+      BLUR: [0, 40, 1],
+      ALPHA: [0, 1, 0.1],
+    },
+    TRACK: {
+      ALPHA: [0, 1, 0.01],
+    },
+  },
+  CHECKBOX: {
+    BORDER: {
+      RADIUS: [0, 36, 1],
+    },
+    SHADOW: {
+      REACH: [0, 20, 1],
+      BLUR: [0, 40, 1],
+      ALPHA: [0, 1, 0.1],
+    },
+  },
+  RADIO: {
+    BORDER: {
+      WIDTH: [0, 10, 1],
+      RADIUS: [0, 36, 1],
+    },
+    SHADOW: {
+      REACH: [0, 20, 1],
+      BLUR: [0, 40, 1],
+      ALPHA: [0, 1, 0.1],
+    },
+  },
+}
+
+const CARD_ID = '#cards'
+const BUTTON_ID = '#buttons'
+const TEXT_ID = '#texts'
+const RANGE_ID = '#ranges'
+const CHECKBOX_ID = '#checkboxes'
+const RADIO_ID = '#radios'
+const IDS = [CARD_ID, BUTTON_ID, TEXT_ID, RANGE_ID, CHECKBOX_ID, RADIO_ID]
+const App = () => {
+  const [model, setModel] = useState(0)
+  const [active, setActive] = useState(window.location.hash || IDS[0])
+  const [next, setNext] = useState(IDS[IDS.indexOf(active) + 1])
+  const [prev, setPrev] = useState(IDS[IDS.indexOf(active) - 1])
+  const datRef = useRef(null)
+
+  useEffect(() => {
+    if (!datRef.current) {
+      datRef.current = new GUI({ name: 'Neumorphic Playground' })
+      const digest = (CONFIG_OBJECT, BOUNDS_OBJECT, FOLDER) => {
+        for (const category in BOUNDS_OBJECT) {
+          if (Array.isArray(BOUNDS_OBJECT[category])) {
+            FOLDER.add(
+              CONFIG_OBJECT,
+              category,
+              BOUNDS_OBJECT[category][0],
+              BOUNDS_OBJECT[category][1],
+              BOUNDS_OBJECT[category][2] ? BOUNDS_OBJECT[category][2] : 1
+            ).onChange(() => setModel(new Date().getTime()))
+          } else {
+            const NEW_FOLDER = FOLDER
+              ? FOLDER.addFolder(category)
+              : datRef.current.addFolder(category)
+            digest(CONFIG_OBJECT[category], BOUNDS_OBJECT[category], NEW_FOLDER)
+          }
+        }
+      }
+      digest(CONFIG, BOUNDS)
+    }
+    // Set HSL on document
+    document.documentElement.style.setProperty('--hue', CONFIG.COLOR.HUE)
+    document.documentElement.style.setProperty(
+      '--saturation',
+      CONFIG.COLOR.SATURATION
+    )
+    document.documentElement.style.setProperty(
+      '--lightness',
+      CONFIG.COLOR.LIGHTNESS
+    )
+  }, [model])
+
+  // Set up scroll out
+  useEffect(() => {
+    ScrollOut({
+      scrollingElement: document.querySelector('main'),
+      targets: 'section',
+      threshold: 0.9,
+      onShown: element => {
+        setActive(`#${element.getAttribute('id')}`)
+      },
+    })
+  }, [])
+
+  useEffect(() => {
+    setNext(IDS[IDS.indexOf(active) + 1])
+    setPrev(IDS[IDS.indexOf(active) - 1])
+  }, [active])
+
+  return (
+    <Fragment>
+      <main>
+        <section
+          id="cards"
+          style={{
+            '--neumorphic-reach': CONFIG.CARD.SHADOW.REACH,
+            '--neumorphic-blur': CONFIG.CARD.SHADOW.BLUR,
+            '--neumorphic-intensity': CONFIG.CARD.SHADOW.ALPHA,
+            '--border-width': CONFIG.CARD.BORDER.WIDTH,
+            '--border-intensity': CONFIG.CARD.BORDER.ALPHA,
+            '--border-radius': CONFIG.CARD.BORDER.RADIUS,
+            '--height': CONFIG.CARD.SIZE.HEIGHT,
+            '--width': CONFIG.CARD.SIZE.WIDTH,
+          }}>
+          <article />
+          <h1>Card</h1>
+        </section>
+        <section
+          id="buttons"
+          style={{
+            '--neumorphic-reach': CONFIG.BUTTON.SHADOW.REACH,
+            '--neumorphic-blur': CONFIG.BUTTON.SHADOW.BLUR,
+            '--neumorphic-intensity': CONFIG.BUTTON.SHADOW.ALPHA,
+            '--border-width': CONFIG.BUTTON.BORDER.WIDTH,
+            '--border-intensity': CONFIG.BUTTON.BORDER.ALPHA,
+            '--border-radius': CONFIG.BUTTON.BORDER.RADIUS,
+            '--margin': Math.max(
+              CONFIG.BUTTON.SHADOW.REACH,
+              CONFIG.BUTTON.SHADOW.BLUR
+            ),
+          }}>
+          <div className="buttons">
+            <button>Click</button>
+            <button>Click</button>
+            <button>Click</button>
+          </div>
+          <h1>Button</h1>
+        </section>
+        <section
+          id="texts"
+          style={{
+            '--neumorphic-reach': CONFIG.TEXT.SHADOW.REACH,
+            '--neumorphic-blur': CONFIG.TEXT.SHADOW.BLUR,
+            '--neumorphic-intensity': CONFIG.TEXT.SHADOW.ALPHA,
+            '--border-width': CONFIG.TEXT.BORDER.WIDTH,
+            '--border-intensity': CONFIG.TEXT.BORDER.ALPHA,
+            '--border-radius': CONFIG.TEXT.BORDER.RADIUS,
+            '--margin': 6,
+          }}>
+          <div className="texts">
+            <div className="input">
+              <label htmlFor="text-1">Label</label>
+              <input id="text-1" type="text" />
+            </div>
+            <div className="input">
+              <label htmlFor="text-2">Label</label>
+              <input id="text-2" type="text" />
+            </div>
+            <div className="input">
+              <label htmlFor="text-3">Label</label>
+              <input id="text-3" type="text" />
+            </div>
+          </div>
+          <h1>Text</h1>
+        </section>
+        <section
+          id="ranges"
+          style={{
+            '--neumorphic-reach': CONFIG.RANGE.SHADOW.REACH,
+            '--neumorphic-blur': CONFIG.RANGE.SHADOW.BLUR,
+            '--neumorphic-intensity': CONFIG.RANGE.SHADOW.ALPHA,
+            '--track-intensity': CONFIG.RANGE.TRACK.ALPHA,
+            '--border-width': CONFIG.RANGE.BORDER.WIDTH,
+            '--border-intensity': CONFIG.RANGE.BORDER.ALPHA,
+            '--border-radius': CONFIG.RANGE.BORDER.RADIUS,
+            '--margin': 15,
+          }}>
+          <div className="ranges">
+            <div className="input">
+              <label htmlFor="range-1">Label</label>
+              <input
+                id="range-1"
+                type="range"
+                min="0"
+                max="10"
+                step="1"
+                defaultValue="2"
+              />
+            </div>
+            <div className="input">
+              <label htmlFor="range-2">Label</label>
+              <input
+                id="range-2"
+                type="range"
+                min="0"
+                max="10"
+                step="1"
+                defaultValue="4"
+              />
+            </div>
+            <div className="input">
+              <label htmlFor="range-3">Label</label>
+              <input
+                id="range-3"
+                type="range"
+                min="0"
+                max="10"
+                step="1"
+                defaultValue="6"
+              />
+            </div>
+          </div>
+          <h1>Range</h1>
+        </section>
+        <section
+          id="checkboxes"
+          style={{
+            '--neumorphic-reach': CONFIG.CHECKBOX.SHADOW.REACH,
+            '--neumorphic-blur': CONFIG.CHECKBOX.SHADOW.BLUR,
+            '--neumorphic-intensity': CONFIG.CHECKBOX.SHADOW.ALPHA,
+            '--border-width': CONFIG.CHECKBOX.BORDER.WIDTH,
+            '--border-intensity': CONFIG.CHECKBOX.BORDER.ALPHA,
+            '--border-radius': CONFIG.CHECKBOX.BORDER.RADIUS,
+            '--margin': 15,
+          }}>
+          <div className="checkboxes">
+            <div className="input">
+              <input id="check-1" type="checkbox" />
+              <label htmlFor="check-1">Check</label>
+            </div>
+            <div className="input">
+              <input id="check-2" type="checkbox" />
+              <label htmlFor="check-2">Check</label>
+            </div>
+            <div className="input">
+              <input id="check-3" type="checkbox" />
+              <label htmlFor="check-3">Check</label>
+            </div>
+          </div>
+          <h1>Checkbox</h1>
+        </section>
+        <section
+          id="radios"
+          style={{
+            '--neumorphic-reach': CONFIG.RADIO.SHADOW.REACH,
+            '--neumorphic-blur': CONFIG.RADIO.SHADOW.BLUR,
+            '--neumorphic-intensity': CONFIG.RADIO.SHADOW.ALPHA,
+            '--border-width': CONFIG.RADIO.BORDER.WIDTH,
+            '--border-intensity': CONFIG.RADIO.BORDER.ALPHA,
+            '--border-radius': CONFIG.RADIO.BORDER.RADIUS,
+            '--margin': 15,
+          }}>
+          <div className="radios">
+            <div className="input radio">
+              <input id="radio-1-1" type="radio" name="radio-one" checked />
+              <label htmlFor="radio-1-1">Radio</label>
+              <input id="radio-1-2" type="radio" name="radio-one" />
+              <label htmlFor="radio-1-2">Radio</label>
+            </div>
+            <div className="input radio">
+              <input id="radio-2-1" type="radio" name="radio-two" checked />
+              <label htmlFor="radio-2-1">Radio</label>
+              <input id="radio-2-2" type="radio" name="radio-two" />
+              <label htmlFor="radio-2-2">Radio</label>
+            </div>
+            <div className="input radio">
+              <input id="radio-3-1" type="radio" name="radio-three" checked />
+              <label htmlFor="radio-3-1">Radio</label>
+              <input id="radio-3-2" type="radio" name="radio-three" />
+              <label htmlFor="radio-3-2">Radio</label>
+            </div>
+          </div>
+          <h1>Radio</h1>
+        </section>
+      </main>
+      <footer>
+        {IDS.map(ID => {
+          return (
+            <a href={ID} key={ID} className={`${active === ID && 'active'}`}>
+              {`${ID.charAt(1).toUpperCase()}${ID.substr(2)}`}
+            </a>
+          )
+        })}
+      </footer>
+      <a href={next}>
+        Next
+        <svg viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          />
+        </svg>
+      </a>
+      <a href={prev}>
+        Prev
+        <svg viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          />
+        </svg>
+      </a>
+    </Fragment>
+  )
+}
+render(<App />, document.getElementById('app'))
diff --git a/neumorphic-playground/src/style.styl b/neumorphic-playground/src/style.styl
new file mode 100644
index 0000000..8261067
--- /dev/null
+++ b/neumorphic-playground/src/style.styl
@@ -0,0 +1,658 @@
+*
+*:after
+*:before
+  box-sizing border-box
+
+body
+  background 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
+  font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+  min-height 100vh
+  display flex
+  align-items center
+  justify-content center
+
+section
+  align-items center
+  height 100%
+  scroll-snap-align start
+  flex 1 0 100%
+  display flex
+  justify-content center
+  overflow auto
+  width 100%
+  position relative
+
+#app
+  position relative
+
+  & > a
+    --neumorphic-reach 10
+    --neumorphic-blur 15
+    --neumorphic-intensity 0.75
+    --default 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
+    --dark 'hsla(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 15) * 1%) var(--neumorphic-intensity))
+    --light 'hsla(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 15) * 1%) var(--neumorphic-intensity))
+    --x calc(var(--neumorphic-reach) * 1px)
+    --y calc(var(--neumorphic-reach) * 1px)
+    --blur calc(var(--neumorphic-blur) * 1px)
+    --x2 calc(var(--neumorphic-reach) * -1px)
+    --y2 calc(var(--neumorphic-reach) * -1px)
+    box-shadow '%s %s %s %s,
+      %s %s %s %s' % (var(--x) var(--y) var(--blur) var(--dark) var(--x2) var(--y2) var(--blur) var(--light))
+    position absolute
+    top 50%
+    height 44px
+    width 44px
+    background var(--default)
+    border-radius 50%
+    font-size 0
+
+
+    &:visited path
+    path
+      fill var(--dark)
+
+    &:hover path
+    &:focus path
+      fill var(--light)
+
+    &:active
+        border 4px solid white
+        path
+          fill white
+
+    &:not([href])
+      border 0
+      cursor not-allowed
+      path
+        fill var(--dark)
+
+    &:nth-of-type(1)
+      left 100%
+      transform translate(50%, -50%)
+    &:nth-of-type(2)
+      right 100%
+      transform translate(-50%, -50%)
+
+      svg
+        transform rotate(180deg)
+
+main
+  --neumorphic-reach 30
+  --neumorphic-blur 60
+  --neumorphic-intensity 0.25
+  --border-width 0
+  --border-intensity 0.1
+  --border-radius 25
+  --x calc(var(--neumorphic-reach) * 1px)
+  --y calc(var(--neumorphic-reach) * 1px)
+  --blur calc(var(--neumorphic-blur) * 1px)
+  --x2 calc(var(--neumorphic-reach) * -1px)
+  --y2 calc(var(--neumorphic-reach) * -1px)
+  -webkit-overflow-scrolling touch
+  background 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
+  border '%s solid hsla(%s, %s, %s, %s)' % (calc(var(--border-width, 0) * 1px) var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 15) * 1%) var(--border-intensity))
+  border-radius calc(var(--border-radius) * 1px)
+  box-shadow '%s %s %s hsla(%s, %s, %s, %s),
+    %s %s %s hsla(%s, %s, %s, %s)' % (var(--x) var(--y) var(--blur) var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 15) * 1%) var(--neumorphic-intensity) var(--x2) var(--y2) var(--blur) var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 15) * 1%) var(--neumorphic-intensity))
+  display flex
+  overflow auto
+  overflow-y hidden
+  position relative
+  scroll-behavior smooth
+  scroll-snap-type x mandatory
+  height 75vmin
+  width 75vmin
+
+footer
+  position absolute
+  top calc(100% + 60px)
+  left 50%
+  transform translate(-50%)
+  display flex
+
+  a.active
+    background 'radial-gradient(circle at 50% 50%, hsl(%s, %s, %s) 20%, transparent 25%)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 30) * 1%))
+
+  a
+    height 44px
+    width 44px
+    border-radius 50%
+    font-size 0
+    display block
+    position relative
+    transition background .1s ease
+
+    &:hover:not(.active)
+      background 'radial-gradient(circle at 50% 50%, hsl(%s, %s, %s) 20%, transparent 25%)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 10) * 1%))
+
+    &:after
+      --neumorphic-reach 4
+      --neumorphic-blur 8
+      --neumorphic-intensity 0.25
+      --dark 'hsla(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 15) * 1%) var(--neumorphic-intensity))
+      --light 'hsla(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 15) * 1%) var(--neumorphic-intensity))
+      --x calc(var(--neumorphic-reach) * 1px)
+      --y calc(var(--neumorphic-reach) * 1px)
+      --blur calc(var(--neumorphic-blur) * 1px)
+      --x2 calc(var(--neumorphic-reach) * -1px)
+      --y2 calc(var(--neumorphic-reach) * -1px)
+      content ''
+      height 30px
+      width 30px
+      position absolute
+      top 50%
+      left 50%
+      transform translate(-50%, -50%)
+      border-radius 50%
+      box-shadow '%s %s %s %s inset,
+        %s %s %s %s inset' % (var(--x) var(--y) var(--blur) var(--dark) var(--x2) var(--y2) var(--blur) var(--light))
+
+
+article
+  --x calc(var(--neumorphic-reach) * 1px)
+  --y calc(var(--neumorphic-reach) * 1px)
+  --blur calc(var(--neumorphic-blur) * 1px)
+  --x2 calc(var(--neumorphic-reach) * -1px)
+  --y2 calc(var(--neumorphic-reach) * -1px)
+  background 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
+  border '%s solid hsla(%s, %s, %s, %s)' % (calc(var(--border-width, 0) * 1px) var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 15) * 1%) var(--border-intensity))
+  border-radius calc(var(--border-radius) * 1px)
+  box-shadow '%s %s %s hsla(%s, %s, %s, %s),
+    %s %s %s hsla(%s, %s, %s, %s)' % (var(--x) var(--y) var(--blur) var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 15) * 1%) var(--neumorphic-intensity) var(--x2) var(--y2) var(--blur) var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 15) * 1%) var(--neumorphic-intensity))
+  height calc(var(--height, 100) * 1px)
+  width calc(var(--width, 100) * 1px)
+
+header
+  position fixed
+  height 75vmin
+  width 100vw
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+  z-index -1
+
+h1
+  color 'hsla(%s, %s, %s, 0.25)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 50) * 1%))
+  position absolute
+  z-index 2
+  font-weight bold
+  bottom 5%
+  right 5%
+  // transform translate(-50%, -100%)
+
+label
+  color 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 50) * 1%))
+
+@supports(-webkit-appearance: none)
+  input[type='checkbox']
+  input[type='radio']
+    --default 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
+    --light 'hsl(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 20) * 1%) var(--neumorphic-intensity))
+    --dark 'hsl(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%) var(--neumorphic-intensity))
+    --x calc(var(--neumorphic-reach) * 1px)
+    --y calc(var(--neumorphic-reach) * 1px)
+    --blur calc(var(--neumorphic-blur) * 1px)
+    --x2 calc(var(--neumorphic-reach) * -1px)
+    --y2 calc(var(--neumorphic-reach) * -1px)
+    --size 36
+    -webkit-appearance none
+    height calc(var(--size) * 1px)
+    outline none
+    margin 0
+    box-shadow '%s %s %s %s inset,
+      %s %s %s %s inset' % (var(--x) var(--y) var(--blur) var(--dark) var(--x2) var(--y2) var(--blur) var(--light))
+    cursor pointer
+    border-style solid
+    border-color white
+    border-radius calc(var(--border-radius) * 1px)
+    border-width calc(var(--border-width) * 1px)
+    background var(--default)
+    transition box-shadow .1s
+    width calc(var(--size) * 1px)
+
+    &:checked
+      background 'radial-gradient(circle at center center, white 25%, transparent 25%), %s' % (var(--default))
+
+    &:checked + label
+      font-weight bold
+
+  input[type=radio]
+    box-shadow '%s %s %s %s,
+      %s %s %s %s' % (var(--x) var(--y) var(--blur) var(--dark) var(--x2) var(--y2) var(--blur) var(--light))
+
+    &:hover
+      --x calc(var(--neumorphic-reach) * 2px)
+      --y calc(var(--neumorphic-reach) * 2px)
+      --blur calc(var(--neumorphic-blur) * 2px)
+      --x2 calc(var(--neumorphic-reach) * -2px)
+      --y2 calc(var(--neumorphic-reach) * -2px)
+
+    &:checked
+      box-shadow '%s %s %s %s inset,
+        %s %s %s %s inset' % (var(--x) var(--y) var(--blur) var(--dark) var(--x2) var(--y2) var(--blur) var(--light))
+
+  // Range
+  input[type=range]
+    --thumb-size 36
+    --thumb-border 4
+    --thumb-angle 135
+    -webkit-appearance none
+    background transparent
+    width 100%
+
+  input[type=range]:focus
+    outline none
+
+  input[type=range]::-ms-track
+    background transparent
+    border-color transparent
+    color transparent
+    cursor pointer
+    width 100%
+
+  input[type=range]:focus::-webkit-slider-thumb
+    border-color 'hsla(%s, %s, %s, 1)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 10) * 1%))
+
+  input[type=range]:focus::-moz-range-thumb
+    border-color 'hsla(%s, %s, %s, 1)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 10) * 1%))
+
+  input[type=range]:focus::-ms-thumb
+    border-color 'hsla(%s, %s, %s, 1)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 10) * 1%))
+
+  input[type=range]::-webkit-slider-thumb
+    --light 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 20) * 1%))
+    --dark 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%))
+    --default 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
+    -webkit-appearance none
+    background 'linear-gradient(%s, %s, %s), %s' % (calc(var(--thumb-angle) * 1deg) var(--light) var(--dark) var(--default))
+    background-size calc((var(--thumb-size) + var(--thumb-border)) * 1px) calc((var(--thumb-size) + var(--thumb-border)) * 1px)
+    background-position calc(var(--thumb-border) * -1px) calc(var(--thumb-border) * -1px)
+    border-style solid
+    border-width calc(var(--thumb-border) * 1px)
+    border-color transparent
+    border-radius calc(var(--border-radius) * 1px)
+    cursor pointer
+    height calc(var(--thumb-size) * 1px)
+    margin-top 0px
+    width calc(var(--thumb-size) * 1px)
+
+    &:hover
+      border-color 'hsla(%s, %s, %s, 1)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%))
+    &:active
+      border-color white
+
+  input[type=range]::-moz-range-thumb
+    --light 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 20) * 1%))
+    --dark 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%))
+    --default 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
+    background 'linear-gradient(%s, %s, %s), %s' % (calc(var(--thumb-angle) * 1deg) var(--light) var(--dark) var(--default))
+    background-size calc((var(--thumb-size) + var(--thumb-border)) * 1px) calc((var(--thumb-size) + var(--thumb-border)) * 1px)
+    background-position calc(var(--thumb-border) * -1px) calc(var(--thumb-border) * -1px)
+    border-style solid
+    border-width calc(var(--thumb-border) * 1px)
+    border-color transparent
+    border-radius calc(var(--border-radius) * 1px)
+    cursor pointer
+    height calc(var(--thumb-size) * 1px)
+    width calc(var(--thumb-size) * 1px)
+
+    &:hover
+      border-color 'hsla(%s, %s, %s, 1)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%))
+    &:active
+      border-color white
+
+  input[type=range]::-ms-thumb
+    --light 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 20) * 1%))
+    --dark 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%))
+    --default 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
+    background 'linear-gradient(%s, %s, %s), %s' % (calc(var(--thumb-angle) * 1deg) var(--light) var(--dark) var(--default))
+    background-size calc((var(--thumb-size) + var(--thumb-border)) * 1px) calc((var(--thumb-size) + var(--thumb-border)) * 1px)
+    background-position calc(var(--thumb-border) * -1px) calc(var(--thumb-border) * -1px)
+    border-style solid
+    border-width calc(var(--thumb-border) * 1px)
+    border-color transparent
+    border-radius calc(var(--border-radius) * 1px)
+    cursor pointer
+    height calc(var(--thumb-size) * 1px)
+    width calc(var(--thumb-size) * 1px)
+
+    &:hover
+      border-color 'hsla(%s, %s, %s, 1)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%))
+    &:active
+      border-color white
+
+  input[type=range]::-webkit-slider-runnable-track
+    --x calc(var(--neumorphic-reach) * 1px)
+    --y calc(var(--neumorphic-reach) * 1px)
+    --blur calc(var(--neumorphic-blur) * 1px)
+    --x2 calc(var(--neumorphic-reach) * -1px)
+    --y2 calc(var(--neumorphic-reach) * -1px)
+    --default 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
+    --light 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 20) * 1%))
+    --neumorphic-light 'hsl(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 20) * 1%) var(--neumorphic-intensity))
+    --neumorphic-dark 'hsl(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%) var(--neumorphic-intensity))
+    background var(--default)
+    border-radius calc(var(--border-radius) * 1px)
+    border-color var(--light)
+    border-style solid
+    border-width 0
+    box-shadow '%s %s %s %s inset,
+      %s %s %s %s inset' % (var(--x) var(--y) var(--blur) var(--neumorphic-dark) var(--x2) var(--y2) var(--blur) var(--neumorphic-light))
+    cursor pointer
+    height calc(var(--thumb-size) * 1px)
+    width 100%
+
+  input[type=range]:focus::-webkit-slider-runnable-track
+    --track 'hsl(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%) var(--track-intensity))
+    background var(--track)
+
+  // input[type=range]:active::-webkit-slider-runnable-track
+  //   --track 'hsl(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%) calc(var(--track-intensity) * 2))
+  //   background var(--track)
+
+  input[type=range]::-moz-range-track
+    --x calc(var(--neumorphic-reach) * 1px)
+    --y calc(var(--neumorphic-reach) * 1px)
+    --blur calc(var(--neumorphic-blur) * 1px)
+    --x2 calc(var(--neumorphic-reach) * -1px)
+    --y2 calc(var(--neumorphic-reach) * -1px)
+    --default 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
+    --light 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 20) * 1%))
+    --neumorphic-light 'hsl(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 20) * 1%) var(--neumorphic-intensity))
+    --neumorphic-dark 'hsl(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%) var(--neumorphic-intensity))
+    background var(--default)
+    border-radius calc(var(--border-radius) * 1px)
+    border-color var(--light)
+    border-style solid
+    border-width 0
+    box-shadow '%s %s %s %s inset,
+      %s %s %s %s inset' % (var(--x) var(--y) var(--blur) var(--neumorphic-dark) var(--x2) var(--y2) var(--blur) var(--neumorphic-light))
+    cursor pointer
+    height calc(var(--thumb-size) * 1px)
+    width 100%
+
+  input[type=range]::-ms-track
+    --x calc(var(--neumorphic-reach) * 1px)
+    --y calc(var(--neumorphic-reach) * 1px)
+    --blur calc(var(--neumorphic-blur) * 1px)
+    --x2 calc(var(--neumorphic-reach) * -1px)
+    --y2 calc(var(--neumorphic-reach) * -1px)
+    --default 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
+    --light 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 20) * 1%))
+    --neumorphic-light 'hsl(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 20) * 1%) var(--neumorphic-intensity))
+    --neumorphic-dark 'hsl(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%) var(--neumorphic-intensity))
+    background var(--default)
+    border-radius calc(var(--border-radius) * 1px)
+    border-color var(--light)
+    border-style solid
+    border-width 0
+    box-shadow '%s %s %s %s inset,
+      %s %s %s %s inset' % (var(--x) var(--y) var(--blur) var(--neumorphic-dark) var(--x2) var(--y2) var(--blur) var(--neumorphic-light))
+    cursor pointer
+    height calc(var(--thumb-size) * 1px)
+    width 100%
+
+  // Buttons
+  button
+    --blur calc(var(--neumorphic-blur) * 1px)
+    --x calc(var(--neumorphic-reach) * 1px)
+    --y calc(var(--neumorphic-reach) * 1px)
+    --x2 calc(var(--neumorphic-reach) * -1px)
+    --y2 calc(var(--neumorphic-reach) * -1px)
+    -webkit-appearance none
+    background 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
+    color 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 40) * 1%))
+    border '%s solid hsla(%s, %s, %s, %s)' % (calc(var(--border-width, 0) * 1px) var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 15) * 1%) var(--border-intensity))
+    border-radius calc(var(--border-radius) * 1px)
+    box-shadow '%s %s %s hsla(%s, %s, %s, %s),
+      %s %s %s hsla(%s, %s, %s, %s)' % (var(--x) var(--y) var(--blur) var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 15) * 1%) var(--neumorphic-intensity) var(--x2) var(--y2) var(--blur) var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 15) * 1%) var(--neumorphic-intensity))
+    font-size 1rem
+    font-weight 500
+    overflow hidden
+    outline transparent
+    padding 1rem 2rem
+    position relative
+    transition all .1s ease
+
+    &:after
+      bottom 0
+      content ''
+      height 15%
+      left 0
+      position absolute
+      width 100%
+
+    &:active
+      box-shadow '%s %s %s hsla(%s, %s, %s, %s) inset,
+      %s %s %s hsla(%s, %s, %s, %s) inset' % (var(--x) var(--y) var(--blur) var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 15) * 1%) var(--neumorphic-intensity) var(--x2) var(--y2) var(--blur) var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 15) * 1%) var(--neumorphic-intensity))
+
+    &:hover:after
+    &:focus:after
+      background 'hsla(%s, %s, %s, 0.35)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 40) * 1%))
+
+    &:active:after
+      background 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 40) * 1%))
+
+    &:nth-of-type(2)
+      &:active
+        background 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 40) * 1%))
+        box-shadow none
+        color 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 40) * 1%))
+
+    &:nth-of-type(3)
+      background 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%))
+      color 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 20) * 1%))
+
+      &:after
+        display none
+
+      &:hover
+      &:focus
+        --x calc(var(--neumorphic-reach) * 2px)
+        --y calc(var(--neumorphic-reach) * 2px)
+        --x2 calc(var(--neumorphic-reach) * -2px)
+        --y2 calc(var(--neumorphic-reach) * -2px)
+        background 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 30) * 1%))
+
+      &:active
+        background 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 40) * 1%))
+        box-shadow none
+        color 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 40) * 1%))
+  // Text
+  [type='text']
+    --blur calc(var(--neumorphic-blur) * 1px)
+    --x calc(var(--neumorphic-reach) * 1px)
+    --y calc(var(--neumorphic-reach) * 1px)
+    --x2 calc(var(--neumorphic-reach) * -1px)
+    --y2 calc(var(--neumorphic-reach) * -1px)
+    background 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
+    border-color transparent
+    border-radius calc(var(--border-radius) * 1px)
+    border-style solid
+    border-width calc(var(--border-width) * 1px)
+    font-size 1rem
+    outline transparent
+    overflow hidden
+    padding 1rem 2rem
+    box-shadow '%s %s %s hsla(%s, %s, %s, %s) inset,
+      %s %s %s hsla(%s, %s, %s, %s) inset' % (var(--x) var(--y) var(--blur) var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 15) * 1%) var(--neumorphic-intensity) var(--x2) var(--y2) var(--blur) var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 15) * 1%) var(--neumorphic-intensity))
+
+    &:focus
+      border-color var(--highlight)
+
+  // Layout related fun
+  .buttons
+  .texts
+  .ranges
+  .checkboxes
+  .radios
+    display grid
+    grid-gap calc(var(--margin) * 4px)
+    width 30vmin
+
+  .radios
+  .checkboxes
+    width auto
+
+  .input
+    align-items center
+    display grid
+    grid-template-columns auto 1fr
+    grid-gap 1rem
+
+  // Label highlights for accentuating focus
+  .texts
+  .ranges
+
+    .input
+      &:focus-within label
+        font-weight bold
+
+      &:nth-of-type(1)
+        --highlight 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 20) * 1%))
+
+      &:nth-of-type(2)
+        --highlight 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%))
+
+      &:nth-of-type(3)
+        &:focus-within label
+          color white
+        --highlight transparent
+
+  .ranges .input
+    &:nth-of-type(1)
+      --track-intensity 0
+
+    &:nth-of-type(2)
+      input[type=range]::-webkit-slider-thumb:active
+        --dark 'hsl(%s, %s, %s, 1)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%))
+        background var(--dark)
+      input[type=range]::-moz-range-thumb:active
+        --dark 'hsl(%s, %s, %s, 1)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%))
+        background var(--dark)
+      input[type=range]::-ms-thumb:active
+        --dark 'hsl(%s, %s, %s, 1)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) - 20) * 1%))
+        background var(--dark)
+
+    &:nth-of-type(3)
+      &:focus-within input[type=range]::-webkit-slider-thumb
+        --dot-alpha 0.25
+      input[type=range]::-webkit-slider-thumb
+        --thumb-border 0
+        --dot-alpha 0
+        --dot-color 'hsl(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 40) * 1%) var(--dot-alpha))
+        background 'radial-gradient(circle at 50% 50%, %s 25%, transparent 25%), linear-gradient(%s, %s, %s), %s' % (var(--dot-color) calc(var(--thumb-angle) * 1deg) var(--light) var(--dark) var(--default))
+        &:focus
+          --dot-alpha 0.25
+        &:hover
+          --dot-alpha 0.5
+        &:active
+          --dot-alpha 1
+          --thumb-angle -45
+
+      input[type=range]::-moz-range-thumb
+        --thumb-border 0
+        --dot-alpha 0
+        --dot-color 'hsl(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 40) * 1%) var(--dot-alpha))
+        background 'radial-gradient(circle at 50% 50%, %s 25%, transparent 25%), linear-gradient(%s, %s, %s), %s' % (var(--dot-color) calc(var(--thumb-angle) * 1deg) var(--light) var(--dark) var(--default))
+        &:focus
+          --dot-alpha 0.25
+        &:hover
+          --dot-alpha 0.5
+        &:active
+          --dot-alpha 1
+          --thumb-angle -45
+
+      input[type=range]::-ms-thumb
+        --thumb-border 0
+        --dot-alpha 0
+        --dot-color 'hsl(%s, %s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc((var(--lightness) + 40) * 1%) var(--dot-alpha))
+        background 'radial-gradient(circle at 50% 50%, %s 25%, transparent 25%), linear-gradient(%s, %s, %s), %s' % (var(--dot-color) calc(var(--thumb-angle) * 1deg) var(--light) var(--dark) var(--default))
+        &:focus
+          --dot-alpha 0.25
+        &:hover
+          --dot-alpha 0.5
+        &:active
+          --dot-alpha 1
+          --thumb-angle -45
+
+  .checkboxes .input
+    input
+      &:focus + label
+        font-weight bold
+      transition all .1s ease
+    &:nth-of-type(1)
+      input
+        box-shadow '%s %s %s %s,
+          %s %s %s %s' % (var(--x) var(--y) var(--blur) var(--dark) var(--x2) var(--y2) var(--blur) var(--light))
+
+        &:hover
+          --x calc(var(--neumorphic-reach) * 2px)
+          --y calc(var(--neumorphic-reach) * 2px)
+          --x2 calc(var(--neumorphic-reach) * -2px)
+          --y2 calc(var(--neumorphic-reach) * -2px)
+
+        &:focus + label
+          font-weight bold
+        &:hover
+          background 'radial-gradient(circle at center center, hsla(0, 0%, 100%, 0.5) 25%, transparent 25%), %s' % (var(--default))
+        &:checked
+          background 'radial-gradient(circle at center center, hsla(0, 0%, 100%, 1) 25%, transparent 25%), %s' % (var(--default))
+          box-shadow '%s %s %s %s inset,
+            %s %s %s %s inset' % (var(--x) var(--y) var(--blur) var(--dark) var(--x2) var(--y2) var(--blur) var(--light))
+
+    &:nth-of-type(2)
+      input
+        &:hover
+        &:focus
+          --x calc(var(--neumorphic-reach) * 2px)
+          --y calc(var(--neumorphic-reach) * 2px)
+          --x2 calc(var(--neumorphic-reach) * -2px)
+          --y2 calc(var(--neumorphic-reach) * -2px)
+        &:hover
+          background 'radial-gradient(circle at center center, hsla(0, 0%, 100%, 0.5) 25%, transparent 25%), %s' % (var(--default))
+        &:checked
+          --neumorphic-intensity 1
+          background 'radial-gradient(circle at center center, hsla(0, 0%, 100%, 1) 25%, %s 25%), %s' % (var(--dark) var(--default))
+          box-shadow none
+
+  .radios .input
+    input
+      &:focus + label
+        font-weight bold
+      transition all .1s ease
+    &:nth-of-type(1)
+      input
+        box-shadow '%s %s %s %s,
+          %s %s %s %s' % (var(--x) var(--y) var(--blur) var(--dark) var(--x2) var(--y2) var(--blur) var(--light))
+
+        &:hover
+          --x calc(var(--neumorphic-reach) * 2px)
+          --y calc(var(--neumorphic-reach) * 2px)
+          --x2 calc(var(--neumorphic-reach) * -2px)
+          --y2 calc(var(--neumorphic-reach) * -2px)
+
+        &:focus + label
+          font-weight bold
+        &:hover
+          background 'radial-gradient(circle at center center, hsla(0, 0%, 100%, 0.5) 25%, transparent 25%), %s' % (var(--default))
+        &:checked
+          background 'radial-gradient(circle at center center, hsla(0, 0%, 100%, 1) 25%, transparent 25%), %s' % (var(--default))
+          box-shadow '%s %s %s %s inset,
+            %s %s %s %s inset' % (var(--x) var(--y) var(--blur) var(--dark) var(--x2) var(--y2) var(--blur) var(--light))
+
+    &:nth-of-type(2)
+      input
+        &:hover
+        &:focus
+          --x calc(var(--neumorphic-reach) * 2px)
+          --y calc(var(--neumorphic-reach) * 2px)
+          --x2 calc(var(--neumorphic-reach) * -2px)
+          --y2 calc(var(--neumorphic-reach) * -2px)
+        &:hover
+          background 'radial-gradient(circle at center center, hsla(0, 0%, 100%, 0.5) 25%, transparent 25%), %s' % (var(--default))
+        &:checked
+          --neumorphic-intensity 1
+          background 'radial-gradient(circle at center center, hsla(0, 0%, 100%, 1) 25%, %s 25%), %s' % (var(--dark) var(--default))
+          box-shadow none
\ No newline at end of file
diff --git a/neuomorphic-checkboxes/README.markdown b/neuomorphic-checkboxes/README.markdown
new file mode 100644
index 0000000..407cac1
--- /dev/null
+++ b/neuomorphic-checkboxes/README.markdown
@@ -0,0 +1,4 @@
+# Neuomorphic Checkboxes
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/braydoncoyer/pen/yLyrWOq](https://codepen.io/braydoncoyer/pen/yLyrWOq).
+
+ 
\ No newline at end of file
diff --git a/neuomorphic-checkboxes/dist/index.html b/neuomorphic-checkboxes/dist/index.html
new file mode 100644
index 0000000..3cdb503
--- /dev/null
+++ b/neuomorphic-checkboxes/dist/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Neuomorphic Checkboxes</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title></title>
+    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+  </head>
+  <body>
+  <ul>
+    <li>
+      <label>
+        <input type="checkbox" name="">
+        <div class="icon-box">
+          <i class="fa fa-home" aria-hidden="true"></i>
+        </div>
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="checkbox" name="">
+        <div class="icon-box">
+          <i class="fa fa-phone" aria-hidden="true"></i>
+        </div>
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="checkbox" name="">
+        <div class="icon-box">
+          <i class="fa fa-plane" aria-hidden="true"></i>
+        </div>
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="checkbox" name="">
+        <div class="icon-box">
+          <i class="fa fa-snowflake-o" aria-hidden="true"></i>
+        </div>
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="checkbox" name="">
+        <div class="icon-box">
+          <i class="fa fa-battery-full" aria-hidden="true"></i>
+        </div>
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="checkbox" name="">
+        <div class="icon-box">
+          <i class="fa fa-code" aria-hidden="true"></i>
+        </div>
+      </label>
+    </li>
+  </ul>
+</body>
+</html>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/neuomorphic-checkboxes/dist/style.css b/neuomorphic-checkboxes/dist/style.css
new file mode 100644
index 0000000..7a1662e
--- /dev/null
+++ b/neuomorphic-checkboxes/dist/style.css
@@ -0,0 +1,60 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #ebf5fc;
+}
+
+ul {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  border-radius: 10px;
+  padding: 20px;
+  width: 240px;
+  background: #ebf5fc;
+  box-shadow: -2px -2px 5px white, 3px 3px 5px rgba(0, 0, 0, 0.1);
+}
+ul li {
+  position: relative;
+  list-style: none;
+  text-align: center;
+  margin: 15px;
+}
+ul li label {
+  position: relative;
+  cursor: pointer;
+}
+ul li label input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+}
+ul li label :checked ~ .icon-box {
+  box-shadow: inset -2px -2px 5px white, inset 3px 3px 5px rgba(0, 0, 0, 0.1);
+}
+ul li label :checked ~ .icon-box .fa {
+  transform: scale(0.95);
+}
+ul li label .icon-box {
+  width: 60px;
+  height: 60px;
+  background: #ebf5fc;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: -2px -2px 5px white, 3px 3px 5px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}
+ul li label .icon-box .fa {
+  font-size: 30px;
+  color: #6a9bd8;
+}
\ No newline at end of file
diff --git a/neuomorphic-checkboxes/license.txt b/neuomorphic-checkboxes/license.txt
new file mode 100644
index 0000000..3ee9ccb
--- /dev/null
+++ b/neuomorphic-checkboxes/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Braydon Coyer (https://codepen.io/braydoncoyer/pen/yLyrWOq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/neuomorphic-checkboxes/src/index.html b/neuomorphic-checkboxes/src/index.html
new file mode 100644
index 0000000..3dc4fd1
--- /dev/null
+++ b/neuomorphic-checkboxes/src/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title></title>
+    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+  </head>
+  <body>
+  <ul>
+    <li>
+      <label>
+        <input type="checkbox" name="">
+        <div class="icon-box">
+          <i class="fa fa-home" aria-hidden="true"></i>
+        </div>
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="checkbox" name="">
+        <div class="icon-box">
+          <i class="fa fa-phone" aria-hidden="true"></i>
+        </div>
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="checkbox" name="">
+        <div class="icon-box">
+          <i class="fa fa-plane" aria-hidden="true"></i>
+        </div>
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="checkbox" name="">
+        <div class="icon-box">
+          <i class="fa fa-snowflake-o" aria-hidden="true"></i>
+        </div>
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="checkbox" name="">
+        <div class="icon-box">
+          <i class="fa fa-battery-full" aria-hidden="true"></i>
+        </div>
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="checkbox" name="">
+        <div class="icon-box">
+          <i class="fa fa-code" aria-hidden="true"></i>
+        </div>
+      </label>
+    </li>
+  </ul>
+</body>
+</html>
\ No newline at end of file
diff --git a/neuomorphic-checkboxes/src/style.scss b/neuomorphic-checkboxes/src/style.scss
new file mode 100644
index 0000000..f19ad9c
--- /dev/null
+++ b/neuomorphic-checkboxes/src/style.scss
@@ -0,0 +1,73 @@
+* 
+{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height:100vh;
+  background: #ebf5fc;
+}
+
+ul {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  border-radius: 10px;
+  padding: 20px;
+  width: 240px;
+  background: #ebf5fc;
+  box-shadow: -2px -2px 5px rgba(255, 255, 255, 1),
+              3px 3px 5px rgba(0, 0, 0, 0.1);
+  
+  
+  & li {
+    position: relative;
+    list-style: none;
+    text-align: center;
+    margin: 15px;
+    
+    & label {
+      position: relative; 
+      cursor: pointer;
+      
+      & input[type="checkbox"] {
+        position: absolute;
+        opacity: 0;
+      }
+      
+      & :checked ~ .icon-box {
+        box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 1),
+              inset 3px 3px 5px rgba(0, 0, 0, 0.1);
+        
+        & .fa {
+          transform: scale(0.95);
+        }
+      }
+      
+      & .icon-box {
+        width: 60px;
+        height: 60px;
+        background: #ebf5fc;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-shadow: -2px -2px 5px rgba(255, 255, 255, 1),
+              3px 3px 5px rgba(0, 0, 0, 0.1);
+        border-radius: 10px;
+        
+        & .fa {
+          font-size: 30px;
+          color: #6a9bd8;
+        }
+        
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/neuomorphism-trapped-animated-blob-v1-0/README.markdown b/neuomorphism-trapped-animated-blob-v1-0/README.markdown
new file mode 100644
index 0000000..281c75d
--- /dev/null
+++ b/neuomorphism-trapped-animated-blob-v1-0/README.markdown
@@ -0,0 +1,5 @@
+# Neuomorphism Trapped Animated Blob  V1.0
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cmlohr/pen/YzpjrKY](https://codepen.io/cmlohr/pen/YzpjrKY).
+
+This is an experiment with the checkbox.  In version one this is a simple reveal animation upon check to show the animated blob.  I also made the blob hover responsive, because why not.
diff --git a/neuomorphism-trapped-animated-blob-v1-0/dist/index.html b/neuomorphism-trapped-animated-blob-v1-0/dist/index.html
new file mode 100644
index 0000000..6e89b58
--- /dev/null
+++ b/neuomorphism-trapped-animated-blob-v1-0/dist/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Neuomorphism Trapped Animated Blob  V1.0</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="position">
+<div class="outer-cab"><div class="inner-cab"><div class="split-a"><div class="split-b"></div></div></div></div>
+  <div class="outer-frame">
+  <div class="frame">  <label class="toggleBtn" for="check">
+    
+    <div class="circle"></div>
+    <div class="grid">
+  
+  <div class="box"></div>
+  <div class="box"></div>
+  <div class="box"></div>
+  <div class="box"></div>
+  <div class="box"></div>
+  <div class="box"></div>
+  
+   <div class="box"></div>
+  <div class="box"></div>
+  <div class="box"></div>
+
+
+      </div>
+  
+</div>
+</div>
+
+    </label>
+
+
+<input id="check" type="checkbox">
+<div class="card">
+  <div class="blob"></div>
+<!--   <div class="shelf"></div> -->
+</div>
+
+
+
+
+
+
+<!-- <label for="toggleA"></label>
+<input type="checkbox" id="toggleA">
+<div class="a">1</div>
+
+<label for="toggleB"></label>
+<input type="checkbox" id="toggleB">
+<div class="b">2</div>
+
+<label for="toggleC"></label>
+<input type="checkbox" id="toggleC">
+<div class="c">3</div> -->
+
+<!-- <div class="prize"></div> -->
+  
+  </div>
+
+
+
+
+
+
+
+
+
+
+
+<!-- sm btns -->
+<a href="https://twitter.com/cmlohr"><button class="twitter-btn"><i class="fab fa-twitter"></i></button></a>
+
+<a href="https://www.linkedin.com/in/cmlohr/"><button class="in-btn"><i class="fab fa-linkedin-in"></i></button></a>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/neuomorphism-trapped-animated-blob-v1-0/dist/style.css b/neuomorphism-trapped-animated-blob-v1-0/dist/style.css
new file mode 100644
index 0000000..091c2b3
--- /dev/null
+++ b/neuomorphism-trapped-animated-blob-v1-0/dist/style.css
@@ -0,0 +1,408 @@
+*,
+*:before,
+*:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: #c9d1d1;
+}
+
+.frame {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  border-radius: 23px;
+  background: linear-gradient(145deg, #cacaca, #f0f0f0);
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0.65em;
+  bottom: 0;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  background-color: none;
+  z-index: 5;
+  overflow: hidden;
+}
+
+.outer-frame {
+  position: absolute;
+  width: 120px;
+  height: 120px;
+  border-radius: 23px;
+  background: linear-gradient(145deg, #f0f0f0, #cacaca);
+  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
+  margin: auto;
+  left: 0em;
+  right: 0;
+  top: 45em;
+  bottom: 0;
+}
+
+.circle {
+  border-radius: 50%;
+  border: 0.3em dashed #5cd6ff;
+  height: 60px;
+  width: 60px;
+  margin: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 99;
+  -webkit-animation: spin 3s linear infinite;
+  -moz-animation: spin 3s linear infinite;
+  animation: spin 3s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.grid {
+  border-radius: 25%;
+  padding: 10px;
+  width: 80px;
+  height: 80px;
+  background: #37505c;
+  display: grid;
+  grid-template-columns: auto auto auto;
+  align-items: center;
+  position: absolute;
+  overflow: hidden;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.box {
+  position: relative;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: linear-gradient(145deg, #3b5662, #324853);
+  box-shadow: 20px 20px 60px #273840, -20px -20px 60px #486878;
+  overflow: hidden;
+}
+
+.outer-frame:hover .grid {
+  background-color: #2e434d;
+}
+
+.outer-frame:hover .box {
+  border-radius: 50%;
+  background: linear-gradient(145deg, #68bce6, #7be0ff);
+  box-shadow: 20px 20px 60px #5192b3, -20px -20px 60px #96ffff;
+}
+
+.outer-frame:hover .circle {
+  opacity: 0;
+}
+
+.outer-cab {
+  width: 500px;
+  height: 500px;
+  position: absolute;
+  margin: auto;
+  left: 0em;
+  right: 0;
+  top: 0em;
+  bottom: 0;
+  overflow: hidden;
+  border-radius: 50px;
+  background: linear-gradient(145deg, #cacaca, #f0f0f0);
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  background: #e0e0e0;
+  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
+}
+
+.inner-cab {
+  width: 470px;
+  height: 470px;
+  position: absolute;
+  margin: auto;
+  left: 0em;
+  right: 0;
+  top: 0em;
+  bottom: 0;
+  overflow: hidden;
+  border-radius: 50px;
+  background: linear-gradient(145deg, #cacaca, #f0f0f0);
+  box-shadow: inset 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+
+.split-a {
+  width: 600px;
+  height: 10px;
+  background: linear-gradient(145deg, #cacaca, #f0f0f0);
+  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  position: absolute;
+  left: -0.05em;
+  right: 0;
+  top: 14em;
+  bottom: 0;
+  z-index: 50;
+}
+
+.split-b {
+  width: 600px;
+  height: 10px;
+  background: #fff;
+  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  position: absolute;
+  left: -0.05em;
+  right: 0;
+  top: 0.7em;
+  bottom: 0;
+  z-index: 50;
+}
+
+.shelf {
+  width: 500px;
+  height: 20px;
+  background: linear-gradient(145deg, #cacaca, #f0f0f0);
+  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
+  position: relative;
+  left: 0em;
+  right: 0;
+  top: 25em;
+  bottom: 0;
+}
+
+.card {
+  -webkit-transition: height 0.7s ease;
+  height: 0px;
+  width: 0px;
+  z-index: -99999;
+  background: #191919;
+  position: absolute;
+  margin: auto;
+  left: 0em;
+  right: 0;
+  top: 0em;
+  bottom: 0;
+  overflow: hidden;
+  border-radius: 50px;
+  border: 1em solid #eeeeee;
+  background: #c9d1d1;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  box-shadow: inset 22px 22px 51px #6d7171, inset -22px -22px 51px #ffffff;
+}
+
+input {
+  display: none;
+}
+
+input:checked + .card {
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  width: 500px;
+  height: 500px;
+  z-index: 6;
+}
+
+input:checked + .box {
+  border-radius: 50px;
+  background: linear-gradient(145deg, #30e227, #29be20);
+  box-shadow: 20px 20px 60px #26b31f, -20px -20px 60px #34f329;
+}
+
+.blob {
+  width: 200px;
+  height: 200px;
+  border-radius: 100% 90% 72% 100%/94% 100% 79% 93%;
+  background: linear-gradient(145deg, #7fff80, #6be66c);
+  box-shadow: inset 20px 20px 60px #53b354, inset -20px -20px 60px #9bff9c, 20px 20px 60px #53b354, -20px -20px 60px #9bff9c;
+  position: absolute;
+  margin: auto;
+  left: 0em;
+  right: 0;
+  top: 0em;
+  bottom: 0;
+  z-index: 99;
+  animation: sway 10s ease-in-out infinite both alternate;
+}
+
+@keyframes sway {
+  0%, 100% {
+    border-radius: 100% 90% 72% 100%/94% 100% 79% 93%;
+    top: 150px;
+  }
+  14% {
+    border-radius: 100% 74% 82% 100%/98% 100% 82% 91%;
+    left: 30px;
+  }
+  28% {
+    border-radius: 94% 96% 76% 82%/98% 100% 81% 42%;
+    bottom: 60px;
+  }
+  42% {
+    border-radius: 94% 96% 76% 82%/98% 100% 38% 100%;
+    left: -40px;
+  }
+  56% {
+    border-radius: 37% 96% 100% 86%/98% 90% 60% 100%;
+    top: -150px;
+  }
+  70% {
+    border-radius: 37% 96% 44% 86%/73% 100% 60% 100%;
+    right: 100px;
+  }
+  84% {
+    border-radius: 81% 96% 87% 86%/73% 100% 82% 100%;
+    right: -60px;
+  }
+}
+.blob:hover {
+  background: linear-gradient(145deg, #7bd5ff, #68b3e6);
+  box-shadow: 20px 20px 60px #62a9d9, -20px -20px 60px #84e5ff, inset 20px 20px 60px #62a9d9, inset -20px -20px 60px #84e5ff;
+}
+
+#toggleC:checked ~ .prize {
+  background-color: yellow;
+  border-radius: 50%;
+}
+
+.prize {
+  height: 50px;
+  width: 50px;
+  background-color: green;
+  margin: auto;
+  position: absolute;
+  left: 0;
+  right: 50em;
+  top: 0;
+  bottom: 0;
+}
+
+input {
+  /*   display: none; */
+}
+
+.position {
+  margin: auto;
+  position: absolute;
+  left: 0;
+  top: -9em;
+  right: 0;
+  bottom: 0;
+}
+
+/*  sm btn styles  */
+.twitter-btn {
+  position: fixed;
+  margin: auto;
+  bottom: 0;
+  background-color: #1da1f2;
+  border: 0.15em solid #1da1f2;
+  border-left: none;
+  border-bottom: none;
+  border-radius: 0% 100% 0% 0%/0% 100% 0% 93%;
+  height: 50px;
+  width: 50px;
+  cursor: pointer;
+}
+
+.in-btn {
+  position: fixed;
+  margin: auto;
+  bottom: 0;
+  right: 0;
+  border: 0.15em solid #0072b1;
+  border-right: none;
+  border-bottom: none;
+  border-radius: 100% 0% 0% 0%/100% 0% 0% 0%;
+  background-color: #0072b1;
+  height: 50px;
+  width: 50px;
+  cursor: pointer;
+}
+
+.fa-twitter {
+  position: absolute;
+  left: 0em;
+  right: 0.4em;
+  top: 0.5em;
+  bottom: 0;
+  color: #fff;
+  font-size: 1.8em;
+}
+
+.fa-linkedin-in {
+  position: absolute;
+  left: 0.4em;
+  right: 0em;
+  top: 0.55em;
+  bottom: 0;
+  color: #fff;
+  font-size: 1.8em;
+}
+
+.in-btn:hover {
+  background-color: #000;
+}
+
+.twitter-btn:hover {
+  background-color: #000;
+}
\ No newline at end of file
diff --git a/neuomorphism-trapped-animated-blob-v1-0/license.txt b/neuomorphism-trapped-animated-blob-v1-0/license.txt
new file mode 100644
index 0000000..c6868e1
--- /dev/null
+++ b/neuomorphism-trapped-animated-blob-v1-0/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Colleen Lohr 🙃 (https://codepen.io/cmlohr/pen/YzpjrKY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/neuomorphism-trapped-animated-blob-v1-0/src/index.html b/neuomorphism-trapped-animated-blob-v1-0/src/index.html
new file mode 100644
index 0000000..13d87e1
--- /dev/null
+++ b/neuomorphism-trapped-animated-blob-v1-0/src/index.html
@@ -0,0 +1,70 @@
+
+<div class="position">
+<div class="outer-cab"><div class="inner-cab"><div class="split-a"><div class="split-b"></div></div></div></div>
+  <div class="outer-frame">
+  <div class="frame">  <label class="toggleBtn" for="check">
+    
+    <div class="circle"></div>
+    <div class="grid">
+  
+  <div class="box"></div>
+  <div class="box"></div>
+  <div class="box"></div>
+  <div class="box"></div>
+  <div class="box"></div>
+  <div class="box"></div>
+  
+   <div class="box"></div>
+  <div class="box"></div>
+  <div class="box"></div>
+
+
+      </div>
+  
+</div>
+</div>
+
+    </label>
+
+
+<input id="check" type="checkbox">
+<div class="card">
+  <div class="blob"></div>
+<!--   <div class="shelf"></div> -->
+</div>
+
+
+
+
+
+
+<!-- <label for="toggleA"></label>
+<input type="checkbox" id="toggleA">
+<div class="a">1</div>
+
+<label for="toggleB"></label>
+<input type="checkbox" id="toggleB">
+<div class="b">2</div>
+
+<label for="toggleC"></label>
+<input type="checkbox" id="toggleC">
+<div class="c">3</div> -->
+
+<!-- <div class="prize"></div> -->
+  
+  </div>
+
+
+
+
+
+
+
+
+
+
+
+<!-- sm btns -->
+<a href="https://twitter.com/cmlohr"><button class="twitter-btn"><i class="fab fa-twitter"></i></button></a>
+
+<a href="https://www.linkedin.com/in/cmlohr/"><button class="in-btn"><i class="fab fa-linkedin-in"></i></button></a>
\ No newline at end of file
diff --git a/neuomorphism-trapped-animated-blob-v1-0/src/style.scss b/neuomorphism-trapped-animated-blob-v1-0/src/style.scss
new file mode 100644
index 0000000..ea74c74
--- /dev/null
+++ b/neuomorphism-trapped-animated-blob-v1-0/src/style.scss
@@ -0,0 +1,379 @@
+/* The version of Bourbon used in this Pen was 4.* */
+@import "bourbon";
+*,
+*:before,
+*:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: #c9d1d1;
+}
+
+.frame {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  border-radius: 23px;
+  background: linear-gradient(145deg, #cacaca, #f0f0f0);
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0.65em;
+  bottom: 0;
+  @include transform-style(preserve-3d);
+  background-color: none;
+  z-index: 5;
+  overflow: hidden;
+}
+.outer-frame {
+  position: absolute;
+  width: 120px;
+  height: 120px;
+  border-radius: 23px;
+  background: linear-gradient(145deg, #f0f0f0, #cacaca);
+  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
+  margin: auto;
+  left: 0em;
+  right: 0;
+  top: 45em;
+  bottom: 0;
+}
+
+.circle {
+  border-radius: 50%;
+  border: 0.3em dashed #5cd6ff;
+  height: 60px;
+  width: 60px;
+  margin: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 99;
+  @include animation(spin 3s linear infinite);
+}
+@include keyframes(spin) {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.grid {
+  border-radius: 25%;
+  padding: 10px;
+  width: 80px;
+  height: 80px;
+  background: #37505c;
+  display: grid;
+  grid-template-columns: auto auto auto;
+  align-items: center;
+  position: absolute;
+  overflow: hidden;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+.box {
+  position: relative;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: linear-gradient(145deg, #3b5662, #324853);
+  box-shadow: 20px 20px 60px #273840, -20px -20px 60px #486878;
+
+  overflow: hidden;
+}
+.outer-frame:hover .grid {
+  background-color: #2e434d;
+}
+.outer-frame:hover .box {
+  border-radius: 50%;
+  background: linear-gradient(145deg, #68bce6, #7be0ff);
+  box-shadow: 20px 20px 60px #5192b3, -20px -20px 60px #96ffff;
+}
+
+.outer-frame:hover .circle {
+  opacity: 0;
+}
+.outer-cab {
+  width: 500px;
+  height: 500px;
+  position: absolute;
+  margin: auto;
+  left: 0em;
+  right: 0;
+  top: 0em;
+  bottom: 0;
+  overflow: hidden;
+  border-radius: 50px;
+  background: linear-gradient(145deg, #cacaca, #f0f0f0);
+  @include transform-style(preserve-3d);
+  background: #e0e0e0;
+  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
+}
+.inner-cab {
+  width: 470px;
+  height: 470px;
+  position: absolute;
+  margin: auto;
+  left: 0em;
+  right: 0;
+  top: 0em;
+  bottom: 0;
+  overflow: hidden;
+  border-radius: 50px;
+  background: linear-gradient(145deg, #cacaca, #f0f0f0);
+  box-shadow: inset 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
+  @include transform-style(preserve-3d);
+}
+.split-a {
+  width: 600px;
+  height: 10px;
+  background: linear-gradient(145deg, #cacaca, #f0f0f0);
+  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
+  @include transform-style(preserve-3d);
+  position: absolute;
+  left: -0.05em;
+  right: 0;
+  top: 14em;
+  bottom: 0;
+  z-index: 50;
+}
+.split-b {
+  width: 600px;
+  height: 10px;
+  background: #fff;
+  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
+  @include transform-style(preserve-3d);
+  position: absolute;
+  left: -0.05em;
+  right: 0;
+  top: 0.7em;
+  bottom: 0;
+  z-index: 50;
+}
+.shelf {
+  width: 500px;
+  height: 20px;
+  background: linear-gradient(145deg, #cacaca, #f0f0f0);
+  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
+  position: relative;
+  left: 0em;
+  right: 0;
+  top: 25em;
+  bottom: 0;
+}
+.card {
+  -webkit-transition: height 0.7s ease;
+  height: 0px;
+  width: 0px;
+  z-index: -99999;
+  background: #191919;
+  position: absolute;
+  margin: auto;
+  left: 0em;
+  right: 0;
+  top: 0em;
+  bottom: 0;
+  overflow: hidden;
+  border-radius: 50px;
+  border: 1em solid #eeeeee;
+  background: #c9d1d1;
+  @include transform-style(preserve-3d);
+  box-shadow: inset 22px 22px 51px #6d7171, inset -22px -22px 51px #ffffff;
+}
+input {
+  display: none;
+}
+
+input:checked + .card {
+  @include transform-style(preserve-3d);
+  width: 500px;
+  height: 500px;
+  z-index: 6;
+}
+input:checked + .box {
+  border-radius: 50px;
+  background: linear-gradient(145deg, #30e227, #29be20);
+  box-shadow: 20px 20px 60px #26b31f, -20px -20px 60px #34f329;
+}
+.blob {
+  width: 200px;
+  height: 200px;
+  border-radius: 100% 90% 72% 100% / 94% 100% 79% 93%;
+  background: linear-gradient(145deg, #7fff80, #6be66c);
+  box-shadow: inset 20px 20px 60px #53b354, inset -20px -20px 60px #9bff9c,
+    20px 20px 60px #53b354, -20px -20px 60px #9bff9c;
+  position: absolute;
+  margin: auto;
+  left: 0em;
+  right: 0;
+  top: 0em;
+  bottom: 0;
+  z-index: 99;
+  animation: sway 10s ease-in-out infinite both alternate;
+}
+@keyframes sway {
+  0%,
+  100% {
+    border-radius: 100% 90% 72% 100% / 94% 100% 79% 93%;
+    top: 150px;
+  }
+  14% {
+    border-radius: 100% 74% 82% 100% / 98% 100% 82% 91%;
+    left: 30px;
+  }
+  28% {
+    border-radius: 94% 96% 76% 82% / 98% 100% 81% 42%;
+    bottom: 60px;
+  }
+  42% {
+    border-radius: 94% 96% 76% 82% / 98% 100% 38% 100%;
+    left: -40px;
+  }
+  56% {
+    border-radius: 37% 96% 100% 86% / 98% 90% 60% 100%;
+    top: -150px;
+  }
+  70% {
+    border-radius: 37% 96% 44% 86% / 73% 100% 60% 100%;
+    right: 100px;
+  }
+  84% {
+    border-radius: 81% 96% 87% 86% / 73% 100% 82% 100%;
+    right: -60px;
+  }
+}
+.blob:hover {
+background: linear-gradient(145deg, #7bd5ff, #68b3e6);
+box-shadow:  20px 20px 60px #62a9d9,
+             -20px -20px 60px #84e5ff, inset 20px 20px 60px #62a9d9,
+             inset -20px -20px 60px #84e5ff;
+}
+
+// .a {
+//   height: 20px; width: 20px;
+//   background-color: red;
+//   margin: auto;
+//   position: absolute;
+//   left: 0; right: 0; top: 0; bottom: 0;
+// }
+// #toggleA:checked ~ .a {
+// background-color: blue;
+// }
+// .b {
+//   height: 20px; width: 20px;
+//   background-color: red;
+//   margin: auto;
+//   position: absolute;
+//   left: 4em; right: 0; top: 0; bottom: 0;
+// }
+// #toggleB:checked ~ .b {
+// background-color: blue;
+// }
+// .c {
+//   height: 20px; width: 20px;
+//   background-color: red;
+//   margin: auto;
+//   position: absolute;
+//   left: 8em; right: 0; top: 0; bottom: 0;
+// }
+// #toggleC:checked ~ .c {
+// background-color: blue;
+// }
+
+#toggleC:checked ~ .prize {
+  background-color: yellow;
+  border-radius: 50%;
+}
+.prize {
+  height: 50px;
+  width: 50px;
+  background-color: green;
+  margin: auto;
+  position: absolute;
+  left: 0;
+  right: 50em;
+  top: 0;
+  bottom: 0;
+}
+input {
+  /*   display: none; */
+}
+.position {
+  margin: auto;
+  position: absolute;
+  left: 0;
+  top: -9em;
+  right: 0;
+  bottom: 0;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+/*  sm btn styles  */
+.twitter-btn {
+  position: fixed; margin: auto;
+  bottom: 0;
+  background-color: #1da1f2;
+  border: 0.15em solid #1da1f2;
+   border-left: none;
+  border-bottom: none;
+  border-radius: 0% 100% 0% 0% / 0% 100% 0% 93% ;
+    height: 50px;
+  width: 50px;
+  cursor: pointer;
+}
+.in-btn {
+  position: fixed; margin: auto;
+  bottom: 0; right: 0;
+  border: 0.15em solid #0072b1;
+  border-right: none;
+  border-bottom: none;
+  border-radius: 100% 0% 0% 0% / 100% 0% 0% 0% ;
+  background-color: #0072b1;
+    height: 50px;
+  width: 50px;
+  cursor: pointer;
+}
+.fa-twitter {
+  position: absolute;
+  left: 0em; right: .4em; top: .5em; bottom: 0;
+  color: #fff;
+  font-size: 1.8em;
+}
+.fa-linkedin-in {
+   position: absolute;
+  left: .4em; right: 0em; top: .55em; bottom: 0;
+  color: #fff;
+  font-size: 1.8em;
+}
+.in-btn:hover {
+ background-color: #000;
+}
+.twitter-btn:hover {
+  background-color: #000;
+}
diff --git a/news-section-w-tailwind-css/README.markdown b/news-section-w-tailwind-css/README.markdown
new file mode 100644
index 0000000..183e7a8
--- /dev/null
+++ b/news-section-w-tailwind-css/README.markdown
@@ -0,0 +1,5 @@
+# News Section w/ Tailwind CSS
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/knyttneve/pen/JjEJbYe](https://codepen.io/knyttneve/pen/JjEJbYe).
+
+News Section w/ Tailwind CSS
diff --git a/news-section-w-tailwind-css/dist/index.html b/news-section-w-tailwind-css/dist/index.html
new file mode 100644
index 0000000..d040f00
--- /dev/null
+++ b/news-section-w-tailwind-css/dist/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - News Section w/ Tailwind CSS</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.1/tailwind.min.css'>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="bg-yellow-700 bg-opacity-10 px-5 py-10 min-h-screen">
+  <div class="container grid grid-cols-12 md:gap-10 font-serif mx-auto">
+    <div class="md:col-span-3 col-span-12 space-y-12 py-6 flex flex-col">
+      <div class="flex flex-col">
+        <h3 class="flex items-center font-sans font-bold text-xs text-gray-600 text-opacity-40 mb-3.5">
+          <span class="w-2 h-2 rounded-full bg-red-500 flex-shrink-0 mr-2.5"></span>
+          HOT TOPIC
+        </h3>
+        <a href="#" class="font-medium hover:underline">Banjo 3 wolf moon occupy pork belly copper mug hella poutine, freegan poke</a>
+        <p class="text-gray-600 text-opacity-40 text-xs mt-3.5 font-sans">36 minutes ago by <a href="#" class="text-blue-400 hover:underline">Atticus Finch</a></p>
+      </div>
+      <div class="flex flex-col">
+        <h3 class="flex items-center font-sans font-bold text-xs text-gray-600 text-opacity-40 mb-3.5">
+          <span class="w-2 h-2 rounded-full bg-red-500 flex-shrink-0 mr-2.5"></span>
+          HOT TOPIC
+        </h3>
+        <a href="#" class="font-medium hover:underline">Synth kombucha celiac neutra blue bottle XOXO snackwave</a>
+        <p class="text-gray-600 text-opacity-40 text-xs mt-3.5 font-sans">36 minutes ago by <a href="#" class="text-blue-400 hover:underline">Runseya Kurt</a></p>
+      </div>
+      <div class="flex flex-col">
+        <h3 class="flex items-center font-sans font-bold text-xs text-gray-600 text-opacity-40 mb-3.5">
+          <span class="w-2 h-2 rounded-full bg-red-500 flex-shrink-0 mr-2.5"></span>
+          HOT TOPIC
+        </h3>
+        <a href="#" class="font-medium hover:underline">Celiac pinterest vaporware portland williamsburg edison bulb</a>
+        <p class="text-gray-600 text-opacity-40 text-xs mt-3.5 font-sans">36 minutes ago by <a href="#" class="text-blue-400 hover:underline">Smyrna Riue</a></p>
+      </div>
+      <div class="flex flex-col w-full">
+        <div class="w-full flex h-0.5 bg-yellow-700 bg-opacity-10">
+          <div class="w-1/2 bg-red-500 h-full">
+          </div>
+        </div>
+        <a href="#" class="font-sans text-xs font-bold pt-5 flex w-full">SEE MORE HOT TOPICS
+
+          <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 ml-auto text-red-500">
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+            <polyline points="12 5 19 12 12 19"></polyline>
+          </svg></a>
+      </div>
+    </div>
+    <div class="xl:col-span-6 lg:col-span-5 md:col-span-9 col-span-12 relative bg-cover bg-no-repeat bg-center flex" style="background-image:url('https://images.unsplash.com/photo-1602196885350-c986e02d0b79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=929&q=80')">
+      <span class="text-xs font-sans font-bold text-white absolute left-6 top-6 pb-2.5 border-b-2 border-red-500">ISTANBUL, TURKEY</span>
+      <div class="flex flex-col items-center justify-end text-center pt-48 flex-grow-1 px-12 pb-10 bg-gradient-to-t from-black">
+        <h3 class="flex items-center font-sans font-bold text-xs text-red-500 mb-4">
+          <span class="w-2 h-2 rounded-full bg-red-500 flex-shrink-0 mr-2.5"></span>
+          IN THE MIDDLE
+        </h3>
+        <a href="#" class="text-white text-3xl hover:underline leading-10">Flannel single-origin coffee trust fund, ethical before they sold out tilde</a>
+        <p class="text-white text-opacity-50 text-xs mt-4 font-sans">36 minutes ago by <a href="#" class="text-blue-400 hover:underline">Holden Caulfield</a></p>
+      </div>
+    </div>
+    <div class="xl:col-span-3 lg:col-span-4 md:hidden lg:block hidden py-6">
+      <div class="border-b-2 border-yellow-700 border-opacity-10 space-x-5 mb-8">
+        <button class="text-xs font-bold pb-5 font-sans border-b-2 border-red-500">LATEST</button>
+        <button class="text-xs font-bold pb-5 font-sans border-b-2 border-transparent text-gray-600 text-opacity-40">POPULAR</button>
+        <button class="text-xs font-bold pb-5 font-sans border-b-2 border-transparent text-gray-600 text-opacity-40">HOT TOPIC</button>
+      </div>
+      <div class="flex flex-col space-y-8">
+        <div class="flex">
+          <img src="https://images.unsplash.com/photo-1587459450937-8402ffa769cd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="img" class="w-20 h-20 flex-shrink-0 mr-4 object-cover" />
+          <div class="flex-grow flex flex-col">
+            <a href="#" class="mb-0.5 hover:underline">Meditation hell of lyft, vinyl man</a>
+            <p class="text-gray-600 text-opacity-40 text-xs mt-auto font-sans">5 minutes ago <a href="#" class="text-blue-400 lg:ml-2 lg:inline block hover:underline">Business</a></p>
+          </div>
+        </div>
+        <div class="flex">
+          <img src="https://images.unsplash.com/photo-1478860002487-680cc42afbeb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=934&q=80" alt="img" class="w-20 h-20 flex-shrink-0 mr-4 object-cover" />
+          <div class="flex-grow flex flex-col">
+            <a href="#" class="mb-0.5 hover:underline">Hot chicken cray VHS scenester viral poke</a>
+            <p class="text-gray-600 text-opacity-40 text-xs mt-auto font-sans">5 minutes ago <a href="#" class="text-blue-400 lg:ml-2 lg:inline block hover:underline">World</a></p>
+          </div>
+        </div>
+        <div class="flex">
+          <img src="https://images.unsplash.com/photo-1549633030-89d0743bad01?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="img" class="w-20 h-20 flex-shrink-0 mr-4 object-cover" />
+          <div class="flex-grow flex flex-col">
+            <a href="#" class="mb-0.5 hover:underline">Retro pork belly vexillologist austin</a>
+            <p class="text-gray-600 text-opacity-40 text-xs mt-auto font-sans">5 minutes ago <a href="#" class="text-blue-400 lg:ml-2 lg:inline block hover:underline">Health</a></p>
+          </div>
+        </div>
+        <div class="flex">
+          <img src="https://images.unsplash.com/photo-1594103077729-ee3404f19caa?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="img" class="w-20 h-20 flex-shrink-0 mr-4 object-cover" />
+          <div class="flex-grow flex flex-col">
+            <a href="#" class="mb-0.5 hover:underline">Pop-up next level ramps austin swag </a>
+            <p class="text-gray-600 text-opacity-40 text-xs mt-auto font-sans">5 minutes ago <a href="#" class="text-blue-400 lg:ml-2 lg:inline block hover:underline">Health</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/news-section-w-tailwind-css/license.txt b/news-section-w-tailwind-css/license.txt
new file mode 100644
index 0000000..470941c
--- /dev/null
+++ b/news-section-w-tailwind-css/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Mert Cukuren (https://codepen.io/knyttneve/pen/JjEJbYe)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/news-section-w-tailwind-css/src/index.html b/news-section-w-tailwind-css/src/index.html
new file mode 100644
index 0000000..b045889
--- /dev/null
+++ b/news-section-w-tailwind-css/src/index.html
@@ -0,0 +1,91 @@
+<div class="bg-yellow-700 bg-opacity-10 px-5 py-10 min-h-screen">
+  <div class="container grid grid-cols-12 md:gap-10 font-serif mx-auto">
+    <div class="md:col-span-3 col-span-12 space-y-12 py-6 flex flex-col">
+      <div class="flex flex-col">
+        <h3 class="flex items-center font-sans font-bold text-xs text-gray-600 text-opacity-40 mb-3.5">
+          <span class="w-2 h-2 rounded-full bg-red-500 flex-shrink-0 mr-2.5"></span>
+          HOT TOPIC
+        </h3>
+        <a href="#" class="font-medium hover:underline">Banjo 3 wolf moon occupy pork belly copper mug hella poutine, freegan poke</a>
+        <p class="text-gray-600 text-opacity-40 text-xs mt-3.5 font-sans">36 minutes ago by <a href="#" class="text-blue-400 hover:underline">Atticus Finch</a></p>
+      </div>
+      <div class="flex flex-col">
+        <h3 class="flex items-center font-sans font-bold text-xs text-gray-600 text-opacity-40 mb-3.5">
+          <span class="w-2 h-2 rounded-full bg-red-500 flex-shrink-0 mr-2.5"></span>
+          HOT TOPIC
+        </h3>
+        <a href="#" class="font-medium hover:underline">Synth kombucha celiac neutra blue bottle XOXO snackwave</a>
+        <p class="text-gray-600 text-opacity-40 text-xs mt-3.5 font-sans">36 minutes ago by <a href="#" class="text-blue-400 hover:underline">Runseya Kurt</a></p>
+      </div>
+      <div class="flex flex-col">
+        <h3 class="flex items-center font-sans font-bold text-xs text-gray-600 text-opacity-40 mb-3.5">
+          <span class="w-2 h-2 rounded-full bg-red-500 flex-shrink-0 mr-2.5"></span>
+          HOT TOPIC
+        </h3>
+        <a href="#" class="font-medium hover:underline">Celiac pinterest vaporware portland williamsburg edison bulb</a>
+        <p class="text-gray-600 text-opacity-40 text-xs mt-3.5 font-sans">36 minutes ago by <a href="#" class="text-blue-400 hover:underline">Smyrna Riue</a></p>
+      </div>
+      <div class="flex flex-col w-full">
+        <div class="w-full flex h-0.5 bg-yellow-700 bg-opacity-10">
+          <div class="w-1/2 bg-red-500 h-full">
+          </div>
+        </div>
+        <a href="#" class="font-sans text-xs font-bold pt-5 flex w-full">SEE MORE HOT TOPICS
+
+          <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 ml-auto text-red-500">
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+            <polyline points="12 5 19 12 12 19"></polyline>
+          </svg></a>
+      </div>
+    </div>
+    <div class="xl:col-span-6 lg:col-span-5 md:col-span-9 col-span-12 relative bg-cover bg-no-repeat bg-center flex" style="background-image:url('https://images.unsplash.com/photo-1602196885350-c986e02d0b79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=929&q=80')">
+      <span class="text-xs font-sans font-bold text-white absolute left-6 top-6 pb-2.5 border-b-2 border-red-500">ISTANBUL, TURKEY</span>
+      <div class="flex flex-col items-center justify-end text-center pt-48 flex-grow-1 px-12 pb-10 bg-gradient-to-t from-black">
+        <h3 class="flex items-center font-sans font-bold text-xs text-red-500 mb-4">
+          <span class="w-2 h-2 rounded-full bg-red-500 flex-shrink-0 mr-2.5"></span>
+          IN THE MIDDLE
+        </h3>
+        <a href="#" class="text-white text-3xl hover:underline leading-10">Flannel single-origin coffee trust fund, ethical before they sold out tilde</a>
+        <p class="text-white text-opacity-50 text-xs mt-4 font-sans">36 minutes ago by <a href="#" class="text-blue-400 hover:underline">Holden Caulfield</a></p>
+      </div>
+    </div>
+    <div class="xl:col-span-3 lg:col-span-4 md:hidden lg:block hidden py-6">
+      <div class="border-b-2 border-yellow-700 border-opacity-10 space-x-5 mb-8">
+        <button class="text-xs font-bold pb-5 font-sans border-b-2 border-red-500">LATEST</button>
+        <button class="text-xs font-bold pb-5 font-sans border-b-2 border-transparent text-gray-600 text-opacity-40">POPULAR</button>
+        <button class="text-xs font-bold pb-5 font-sans border-b-2 border-transparent text-gray-600 text-opacity-40">HOT TOPIC</button>
+      </div>
+      <div class="flex flex-col space-y-8">
+        <div class="flex">
+          <img src="https://images.unsplash.com/photo-1587459450937-8402ffa769cd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="img" class="w-20 h-20 flex-shrink-0 mr-4 object-cover" />
+          <div class="flex-grow flex flex-col">
+            <a href="#" class="mb-0.5 hover:underline">Meditation hell of lyft, vinyl man</a>
+            <p class="text-gray-600 text-opacity-40 text-xs mt-auto font-sans">5 minutes ago <a href="#" class="text-blue-400 lg:ml-2 lg:inline block hover:underline">Business</a></p>
+          </div>
+        </div>
+        <div class="flex">
+          <img src="https://images.unsplash.com/photo-1478860002487-680cc42afbeb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=934&q=80" alt="img" class="w-20 h-20 flex-shrink-0 mr-4 object-cover" />
+          <div class="flex-grow flex flex-col">
+            <a href="#" class="mb-0.5 hover:underline">Hot chicken cray VHS scenester viral poke</a>
+            <p class="text-gray-600 text-opacity-40 text-xs mt-auto font-sans">5 minutes ago <a href="#" class="text-blue-400 lg:ml-2 lg:inline block hover:underline">World</a></p>
+          </div>
+        </div>
+        <div class="flex">
+          <img src="https://images.unsplash.com/photo-1549633030-89d0743bad01?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="img" class="w-20 h-20 flex-shrink-0 mr-4 object-cover" />
+          <div class="flex-grow flex flex-col">
+            <a href="#" class="mb-0.5 hover:underline">Retro pork belly vexillologist austin</a>
+            <p class="text-gray-600 text-opacity-40 text-xs mt-auto font-sans">5 minutes ago <a href="#" class="text-blue-400 lg:ml-2 lg:inline block hover:underline">Health</a></p>
+          </div>
+        </div>
+        <div class="flex">
+          <img src="https://images.unsplash.com/photo-1594103077729-ee3404f19caa?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="img" class="w-20 h-20 flex-shrink-0 mr-4 object-cover" />
+          <div class="flex-grow flex flex-col">
+            <a href="#" class="mb-0.5 hover:underline">Pop-up next level ramps austin swag </a>
+            <p class="text-gray-600 text-opacity-40 text-xs mt-auto font-sans">5 minutes ago <a href="#" class="text-blue-400 lg:ml-2 lg:inline block hover:underline">Health</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/night-day/README.markdown b/night-day/README.markdown
new file mode 100644
index 0000000..1fd398e
--- /dev/null
+++ b/night-day/README.markdown
@@ -0,0 +1,4 @@
+# Night & Day
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/ste-vg/pen/oNgrYOb](https://codepen.io/ste-vg/pen/oNgrYOb).
+
+ 
\ No newline at end of file
diff --git a/night-day/dist/index.html b/night-day/dist/index.html
new file mode 100644
index 0000000..ba98c97
--- /dev/null
+++ b/night-day/dist/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Night &amp; Day</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="layout">
+	<div class="day-label">Day</div>
+	
+	<label class="container">
+	  <input id="input" type="checkbox" checked="checked">
+	  <span class="checkmark">
+		  
+		
+		<svg id="toggle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 34" width="60" height="34">
+		<defs>
+			
+
+			<clipPath id="container" >
+				<rect width="60" height="34" rx="17"/>
+			</clipPath>
+			<g id="day">
+				<rect x="0" width="60" height="34" style="fill: #61b9e5"/>
+				<g id="day-content">
+				  <g class="clouds-small">
+					<path d="M13.35,22.45a1,1,0,0,0-.44.1A1.62,1.62,0,0,0,11.29,21a1.67,1.67,0,0,0-.59.11,1.84,1.84,0,0,0-3.55.61h0a1.38,1.38,0,0,0,0,2.75h6.21a1,1,0,1,0,0-2Z" transform="translate(-2 -2)" style="fill: #d0edff"/>
+					<path d="M27.38,23.72a1.05,1.05,0,0,0-.44.1,1.63,1.63,0,0,0-2.21-1.41,1.84,1.84,0,0,0-3.56.61h0a1.38,1.38,0,1,0,0,2.75h6.21a1,1,0,0,0,0-2.05Z" transform="translate(-2 -2)" style="fill: #d0edff"/>
+					<path d="M56.7,24a1,1,0,0,0-.44.1,1.63,1.63,0,0,0-2.21-1.42,1.85,1.85,0,0,0-3.56.61h0a1.38,1.38,0,0,0,0,2.75H56.7a1,1,0,0,0,0-2Z" transform="translate(-2 -2)" style="fill: #d0edff"/>
+					<path d="M84.35,22.45a1,1,0,0,0-.44.1A1.62,1.62,0,0,0,82.29,21a1.67,1.67,0,0,0-.59.11,1.84,1.84,0,0,0-3.55.61h0a1.38,1.38,0,0,0,0,2.75h6.21a1,1,0,1,0,0-2Z" transform="translate(-2 -2)" style="fill: #d0edff"/>
+					<path d="M98.38,23.72a1.05,1.05,0,0,0-.44.1,1.63,1.63,0,0,0-2.21-1.41,1.84,1.84,0,0,0-3.56.61h0a1.38,1.38,0,1,0,0,2.75h6.21a1,1,0,0,0,0-2.05Z" transform="translate(-2 -2)" style="fill: #d0edff"/>
+					<path d="M127.7,24a1,1,0,0,0-.44.1,1.63,1.63,0,0,0-2.21-1.42,1.85,1.85,0,0,0-3.56.61h0a1.38,1.38,0,0,0,0,2.75h6.21a1,1,0,0,0,0-2Z" transform="translate(-2 -2)" style="fill: #d0edff"/>
+				  </g>
+				  <g class="clouds-medium">
+					<path d="M61.44,18.4a1.85,1.85,0,0,0-.77.18,2.85,2.85,0,0,0-2.85-2.68,3,3,0,0,0-1,.19,3.25,3.25,0,0,0-6.26,1.07h0a2.42,2.42,0,0,0,0,4.84H61.44a1.8,1.8,0,1,0,0-3.6Z" transform="translate(-2 -2)" style="fill: #e9f8ff"/>
+					<path d="M26,17.07a1.84,1.84,0,0,0-.77.17,2.86,2.86,0,0,0-2.85-2.68,2.75,2.75,0,0,0-1,.2,3.24,3.24,0,0,0-6.26,1.07h0a2.42,2.42,0,1,0,0,4.84H26a1.8,1.8,0,0,0,0-3.6Z" transform="translate(-2 -2)" style="fill: #e9f8ff"/>
+					<path d="M126.44,18.4a1.85,1.85,0,0,0-.77.18,2.85,2.85,0,0,0-2.85-2.68,3,3,0,0,0-1,.19,3.25,3.25,0,0,0-6.26,1.07h0a2.42,2.42,0,0,0,0,4.84h10.92a1.8,1.8,0,1,0,0-3.6Z" transform="translate(-2 -2)" style="fill: #e9f8ff"/>
+					<path d="M91,17.07a1.84,1.84,0,0,0-.77.17,2.86,2.86,0,0,0-2.85-2.68,2.75,2.75,0,0,0-1,.2,3.24,3.24,0,0,0-6.26,1.07h0a2.42,2.42,0,0,0,0,4.84H91a1.8,1.8,0,0,0,0-3.6Z" transform="translate(-2 -2)" style="fill: #e9f8ff"/>
+				  </g>
+				  <g class="clouds-big">
+					<path d="M24.82,10.83a3.09,3.09,0,0,0-1.29.29A4.78,4.78,0,0,0,17,7,5.43,5.43,0,0,0,6.54,8.76h0a4,4,0,1,0,0,8.09H24.82a3,3,0,0,0,0-6Z" transform="translate(-2 -2)" style="fill: #fff"/>
+					<path d="M53.6,9.45a2.37,2.37,0,0,0-1,.24,3.86,3.86,0,0,0-3.84-3.61,4.09,4.09,0,0,0-1.4.26,4.36,4.36,0,0,0-8.41,1.45h0a3.25,3.25,0,0,0,0,6.5H53.6a2.42,2.42,0,1,0,0-4.84Z" transform="translate(-2 -2)" style="fill: #fff"/>
+					<path d="M98.72,10.83a3.09,3.09,0,0,0-1.29.29A4.78,4.78,0,0,0,90.91,7a5.43,5.43,0,0,0-10.47,1.8h0a4,4,0,1,0,0,8.09H98.72a3,3,0,1,0,0-6Z" transform="translate(-2 -2)" style="fill: #fff"/>
+					<path d="M127.5,9.45a2.41,2.41,0,0,0-1,.24,3.85,3.85,0,0,0-3.84-3.61,4.09,4.09,0,0,0-1.4.26,4.36,4.36,0,0,0-8.41,1.45h0a3.25,3.25,0,0,0,0,6.5h14.7a2.42,2.42,0,0,0,0-4.84Z" transform="translate(-2 -2)" style="fill: #fff"/>
+				  </g>
+
+				</g>
+			</g>
+			<g id="night">
+				<rect width="60" height="34" style="fill: #004373"/>
+
+				<g id="night-content">
+				  <polygon class="star" points="46 4.89 46.62 6.14 48.01 6.35 47.01 7.33 47.24 8.71 46 8.06 44.76 8.71 44.99 7.33 43.99 6.35 45.38 6.14 46 4.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="58.58 21.93 59.46 23.02 60.86 22.91 60.1 24.09 60.63 25.39 59.28 25.02 58.21 25.94 58.14 24.54 56.94 23.8 58.25 23.3 58.58 21.93" style="fill: #fff5a6"/>
+				  <polygon class="star" points="40.71 12.02 40.82 13.42 42.03 14.13 40.74 14.66 40.44 16.04 39.53 14.97 38.13 15.11 38.87 13.91 38.3 12.63 39.67 12.96 40.71 12.02" style="fill: #fff5a6"/>
+				  <polygon class="star" points="5 16.89 5.62 18.14 7.01 18.35 6 19.33 6.24 20.71 5 20.06 3.76 20.71 4 19.33 2.99 18.35 4.38 18.14 5 16.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="60.57 6.97 60.79 8.36 62.05 8.97 60.8 9.6 60.61 10.99 59.62 10 58.24 10.25 58.88 9 58.22 7.76 59.6 7.99 60.57 6.97" style="fill: #fff5a6"/>
+				  <polygon class="star" points="30.91 26.12 30.86 27.52 31.98 28.36 30.63 28.74 30.18 30.07 29.4 28.91 28 28.89 28.86 27.78 28.45 26.44 29.77 26.93 30.91 26.12" style="fill: #fff5a6"/>
+				  <polygon class="star" points="17.52 13.95 18.44 15.01 19.83 14.86 19.11 16.06 19.68 17.34 18.32 17.02 17.28 17.96 17.16 16.56 15.94 15.87 17.23 15.32 17.52 13.95" style="fill: #fff5a6"/>
+				  <polygon class="star" points="60.53 16.01 61.11 16.41 61.76 16.15 61.56 16.83 62 17.37 61.3 17.39 60.92 17.98 60.69 17.32 60.01 17.14 60.56 16.71 60.53 16.01" style="fill: #fff5a6"/>
+				  <polygon class="star" points="41.99 21.89 42.31 22.52 43 22.62 42.5 23.11 42.62 23.8 41.99 23.47 41.37 23.8 41.49 23.11 40.99 22.62 41.69 22.52 41.99 21.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="63.47 26.02 63.43 26.72 63.98 27.15 63.3 27.32 63.05 27.98 62.68 27.39 61.98 27.36 62.43 26.82 62.24 26.14 62.89 26.4 63.47 26.02" style="fill: #fff5a6"/>
+				  <polygon class="star" points="36.99 9.89 37.31 10.52 38 10.62 37.5 11.11 37.62 11.8 36.99 11.47 36.37 11.8 36.49 11.11 35.99 10.62 36.69 10.52 36.99 9.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="28.5 4.89 28.65 5.2 29 5.25 28.75 5.5 28.81 5.85 28.5 5.68 28.18 5.85 28.24 5.5 27.99 5.25 28.34 5.2 28.5 4.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="28.5 12.89 28.65 13.2 29 13.25 28.75 13.5 28.81 13.85 28.5 13.68 28.18 13.85 28.24 13.5 27.99 13.25 28.34 13.2 28.5 12.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="47.75 22.96 47.72 23.31 47.98 23.54 47.64 23.61 47.5 23.94 47.32 23.63 46.97 23.6 47.21 23.34 47.13 23 47.45 23.14 47.75 22.96" style="fill: #fff5a6"/>
+				  <polygon class="star" points="51.75 31.96 51.72 32.31 51.98 32.54 51.64 32.62 51.5 32.94 51.32 32.63 50.97 32.6 51.21 32.34 51.13 32 51.45 32.15 51.75 31.96" style="fill: #fff5a6"/>
+				  <polygon class="star" points="44.69 29.93 44.7 30.28 45 30.47 44.67 30.59 44.58 30.93 44.37 30.66 44.01 30.68 44.21 30.38 44.08 30.06 44.42 30.15 44.69 29.93" style="fill: #fff5a6"/>
+				  <polygon class="star" points="24.32 10.92 24.58 11.16 24.92 11.07 24.78 11.4 24.96 11.7 24.61 11.66 24.39 11.93 24.31 11.58 23.98 11.45 24.29 11.27 24.32 10.92" style="fill: #fff5a6"/>
+				  <polygon class="star" points="24.94 13.18 24.71 13.45 24.79 13.79 24.47 13.65 24.17 13.84 24.2 13.49 23.93 13.26 24.27 13.19 24.41 12.86 24.59 13.16 24.94 13.18" style="fill: #fff5a6"/>
+				  <polygon class="star" points="32 19.89 32.31 20.52 33 20.62 32.5 21.11 32.62 21.8 32 21.47 31.37 21.8 31.49 21.11 30.99 20.62 31.68 20.52 32 19.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="19.61 21.97 20.15 22.42 20.82 22.23 20.56 22.88 20.95 23.46 20.25 23.42 19.82 23.97 19.64 23.29 18.98 23.04 19.58 22.67 19.61 21.97" style="fill: #fff5a6"/>
+				  <polygon class="star" points="9.51 8.04 9.43 8.74 9.96 9.2 9.28 9.34 9 9.98 8.65 9.37 7.96 9.31 8.43 8.79 8.27 8.11 8.91 8.4 9.51 8.04" style="fill: #fff5a6"/>
+				</g>
+			</g>
+			<clipPath id="switch" >
+				<circle id="circle" cx="19" cy="17" r="10"/>
+			</clipPath>
+		</defs>
+
+		<g clip-path="url(#container)">
+			<use id="back" href="#day"/>
+			<g clip-path="url(#switch)">
+				<use id="front" href="#night" />
+			</g>
+			<rect class="inner-shadow" width="70" height="44" rx="20"/>
+		</g>
+		
+		<rect width="60" height="44" rx="17" opacity="0"/>
+
+	</svg>
+	</span>
+	</label>
+	<div class="night-label">Night</div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script>
+<script src='https://codepen.io/ste-vg/pen/xeZOMK.js'></script>
+<script src='https://codepen.io/ste-vg/pen/zBVakw.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/night-day/dist/script.js b/night-day/dist/script.js
new file mode 100644
index 0000000..787f791
--- /dev/null
+++ b/night-day/dist/script.js
@@ -0,0 +1,69 @@
+console.clear();
+
+let duration = 0.4;
+let isDay = true;
+
+
+let back = document.getElementById('back');
+let front = document.getElementById('front');
+
+let switchTime = () => {
+	
+	back.setAttribute('href', '#' + (isDay ? 'day' : 'night'));
+	front.setAttribute('href', '#' + (isDay ? 'night' : 'day'));
+}
+let scale = 30;
+let toNightAnimation = gsap.timeline();
+
+toNightAnimation
+.to('#night-content', {duration: duration * 0.5, opacity: 1, ease: 'power2.inOut', x: 0})
+.to('#circle', {
+	duration: duration,
+	ease: 'power4.in',
+	scaleX: scale,
+	scaleY: scale,
+	x: 1,
+	transformOrigin: '100% 50%',
+}, 0)
+.to('.day-label', {duration: duration * 2, ease: 'power2.inOut', opacity: 0.2}, 0)
+.to('.night-label', {duration: duration * 2, ease: 'power2.inOut', opacity: 1}, 0)
+.set('#circle', {
+	// transformOrigin: '0% 50%',
+	scaleX:-scale,
+	// x: 8.5,
+	onUpdate: () => switchTime()
+}, duration).to('#circle', {
+	duration: duration,
+	ease: 'power4.out',
+	scaleX: -1,
+	scaleY: 1,
+	x: 2,
+}, duration)
+.to('#day-content', {duration: duration * 0.5, opacity: 0.5}, duration * 1.5)
+.to('body', {backgroundColor: '#b0b0b9', color: 'black', duration: duration * 2}, 0)
+
+let stars = Array.from(document.getElementsByClassName('star'));
+stars.map(star => gsap.to(star, {duration: 'random(0.4, 1.5)', repeat: -1, yoyo: true, opacity: 'random(0.2, 0.5)'}))
+gsap.to('.clouds-big', {duration: 15, repeat: -1, x: -74, ease: 'linear'})
+gsap.to('.clouds-medium', {duration: 20, repeat: -1, x: -65, ease: 'linear'})
+gsap.to('.clouds-small', {duration: 25, repeat: -1, x: -71, ease: 'linear'})
+
+let switchToggle = document.getElementById('input');
+switchToggle.addEventListener('change', () => toggle())
+
+let toggle = () => 
+{
+	isDay = switchToggle.checked == true;
+	if (isDay) {
+    	toNightAnimation.reverse();
+	} else {
+    	toNightAnimation.play();
+	}
+}
+
+
+
+if(CodePen.isThumbnail) toggle();
+
+toNightAnimation.reverse();
+toNightAnimation.pause();
\ No newline at end of file
diff --git a/night-day/dist/style.css b/night-day/dist/style.css
new file mode 100644
index 0000000..5f7702a
--- /dev/null
+++ b/night-day/dist/style.css
@@ -0,0 +1,76 @@
+@import url('https://fonts.googleapis.com/css?family=Lora&display=swap');
+
+body, html
+{
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	font-family: 'Lora', serif;
+	color: #303030;
+}
+
+.night-label{
+	opacity: 0.2;
+}
+
+body
+{
+	display: -webkit-box;
+	display: flex;
+	-webkit-box-align: center;
+	        align-items: center;
+	-webkit-box-pack: center;
+	        justify-content: center;
+	background-color: #FEF9EA;
+}
+
+.layout
+{
+	width: 70vw;
+	max-width: 300px;
+	min-width: 250px;
+	height: 30vh;
+	display: grid;
+	grid-template-columns: 1fr 2fr 1fr;
+	-webkit-box-pack: center;
+	        justify-content: center;
+	-webkit-box-align: center;
+	        align-items: center;
+	gap: 30px;
+	font-size: 25px;
+}
+
+.layout:nth-child(1)
+{
+	text-align: right;
+}
+
+svg
+{	
+	width: 100%;
+	height: 100%;
+	cursor: pointer;
+}
+
+#night-content
+{
+	opacity: 0.5;
+}
+
+.inner-shadow
+{
+	stroke-opacity: 0.1;
+	stroke-width: 5;
+	stroke: black;
+	fill: none;
+}
+
+.container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
\ No newline at end of file
diff --git a/night-day/license.txt b/night-day/license.txt
new file mode 100644
index 0000000..2ed1935
--- /dev/null
+++ b/night-day/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Steve Gardner (https://codepen.io/ste-vg/pen/oNgrYOb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/night-day/src/index.html b/night-day/src/index.html
new file mode 100644
index 0000000..e14a386
--- /dev/null
+++ b/night-day/src/index.html
@@ -0,0 +1,88 @@
+<div class="layout">
+	<div class="day-label">Day</div>
+	
+	<label class="container">
+	  <input id="input" type="checkbox" checked="checked">
+	  <span class="checkmark">
+		  
+		
+		<svg id="toggle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 34" width="60" height="34">
+		<defs>
+			
+
+			<clipPath id="container" >
+				<rect width="60" height="34" rx="17"/>
+			</clipPath>
+			<g id="day">
+				<rect x="0" width="60" height="34" style="fill: #61b9e5"/>
+				<g id="day-content">
+				  <g class="clouds-small">
+					<path d="M13.35,22.45a1,1,0,0,0-.44.1A1.62,1.62,0,0,0,11.29,21a1.67,1.67,0,0,0-.59.11,1.84,1.84,0,0,0-3.55.61h0a1.38,1.38,0,0,0,0,2.75h6.21a1,1,0,1,0,0-2Z" transform="translate(-2 -2)" style="fill: #d0edff"/>
+					<path d="M27.38,23.72a1.05,1.05,0,0,0-.44.1,1.63,1.63,0,0,0-2.21-1.41,1.84,1.84,0,0,0-3.56.61h0a1.38,1.38,0,1,0,0,2.75h6.21a1,1,0,0,0,0-2.05Z" transform="translate(-2 -2)" style="fill: #d0edff"/>
+					<path d="M56.7,24a1,1,0,0,0-.44.1,1.63,1.63,0,0,0-2.21-1.42,1.85,1.85,0,0,0-3.56.61h0a1.38,1.38,0,0,0,0,2.75H56.7a1,1,0,0,0,0-2Z" transform="translate(-2 -2)" style="fill: #d0edff"/>
+					<path d="M84.35,22.45a1,1,0,0,0-.44.1A1.62,1.62,0,0,0,82.29,21a1.67,1.67,0,0,0-.59.11,1.84,1.84,0,0,0-3.55.61h0a1.38,1.38,0,0,0,0,2.75h6.21a1,1,0,1,0,0-2Z" transform="translate(-2 -2)" style="fill: #d0edff"/>
+					<path d="M98.38,23.72a1.05,1.05,0,0,0-.44.1,1.63,1.63,0,0,0-2.21-1.41,1.84,1.84,0,0,0-3.56.61h0a1.38,1.38,0,1,0,0,2.75h6.21a1,1,0,0,0,0-2.05Z" transform="translate(-2 -2)" style="fill: #d0edff"/>
+					<path d="M127.7,24a1,1,0,0,0-.44.1,1.63,1.63,0,0,0-2.21-1.42,1.85,1.85,0,0,0-3.56.61h0a1.38,1.38,0,0,0,0,2.75h6.21a1,1,0,0,0,0-2Z" transform="translate(-2 -2)" style="fill: #d0edff"/>
+				  </g>
+				  <g class="clouds-medium">
+					<path d="M61.44,18.4a1.85,1.85,0,0,0-.77.18,2.85,2.85,0,0,0-2.85-2.68,3,3,0,0,0-1,.19,3.25,3.25,0,0,0-6.26,1.07h0a2.42,2.42,0,0,0,0,4.84H61.44a1.8,1.8,0,1,0,0-3.6Z" transform="translate(-2 -2)" style="fill: #e9f8ff"/>
+					<path d="M26,17.07a1.84,1.84,0,0,0-.77.17,2.86,2.86,0,0,0-2.85-2.68,2.75,2.75,0,0,0-1,.2,3.24,3.24,0,0,0-6.26,1.07h0a2.42,2.42,0,1,0,0,4.84H26a1.8,1.8,0,0,0,0-3.6Z" transform="translate(-2 -2)" style="fill: #e9f8ff"/>
+					<path d="M126.44,18.4a1.85,1.85,0,0,0-.77.18,2.85,2.85,0,0,0-2.85-2.68,3,3,0,0,0-1,.19,3.25,3.25,0,0,0-6.26,1.07h0a2.42,2.42,0,0,0,0,4.84h10.92a1.8,1.8,0,1,0,0-3.6Z" transform="translate(-2 -2)" style="fill: #e9f8ff"/>
+					<path d="M91,17.07a1.84,1.84,0,0,0-.77.17,2.86,2.86,0,0,0-2.85-2.68,2.75,2.75,0,0,0-1,.2,3.24,3.24,0,0,0-6.26,1.07h0a2.42,2.42,0,0,0,0,4.84H91a1.8,1.8,0,0,0,0-3.6Z" transform="translate(-2 -2)" style="fill: #e9f8ff"/>
+				  </g>
+				  <g class="clouds-big">
+					<path d="M24.82,10.83a3.09,3.09,0,0,0-1.29.29A4.78,4.78,0,0,0,17,7,5.43,5.43,0,0,0,6.54,8.76h0a4,4,0,1,0,0,8.09H24.82a3,3,0,0,0,0-6Z" transform="translate(-2 -2)" style="fill: #fff"/>
+					<path d="M53.6,9.45a2.37,2.37,0,0,0-1,.24,3.86,3.86,0,0,0-3.84-3.61,4.09,4.09,0,0,0-1.4.26,4.36,4.36,0,0,0-8.41,1.45h0a3.25,3.25,0,0,0,0,6.5H53.6a2.42,2.42,0,1,0,0-4.84Z" transform="translate(-2 -2)" style="fill: #fff"/>
+					<path d="M98.72,10.83a3.09,3.09,0,0,0-1.29.29A4.78,4.78,0,0,0,90.91,7a5.43,5.43,0,0,0-10.47,1.8h0a4,4,0,1,0,0,8.09H98.72a3,3,0,1,0,0-6Z" transform="translate(-2 -2)" style="fill: #fff"/>
+					<path d="M127.5,9.45a2.41,2.41,0,0,0-1,.24,3.85,3.85,0,0,0-3.84-3.61,4.09,4.09,0,0,0-1.4.26,4.36,4.36,0,0,0-8.41,1.45h0a3.25,3.25,0,0,0,0,6.5h14.7a2.42,2.42,0,0,0,0-4.84Z" transform="translate(-2 -2)" style="fill: #fff"/>
+				  </g>
+
+				</g>
+			</g>
+			<g id="night">
+				<rect width="60" height="34" style="fill: #004373"/>
+
+				<g id="night-content">
+				  <polygon class="star" points="46 4.89 46.62 6.14 48.01 6.35 47.01 7.33 47.24 8.71 46 8.06 44.76 8.71 44.99 7.33 43.99 6.35 45.38 6.14 46 4.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="58.58 21.93 59.46 23.02 60.86 22.91 60.1 24.09 60.63 25.39 59.28 25.02 58.21 25.94 58.14 24.54 56.94 23.8 58.25 23.3 58.58 21.93" style="fill: #fff5a6"/>
+				  <polygon class="star" points="40.71 12.02 40.82 13.42 42.03 14.13 40.74 14.66 40.44 16.04 39.53 14.97 38.13 15.11 38.87 13.91 38.3 12.63 39.67 12.96 40.71 12.02" style="fill: #fff5a6"/>
+				  <polygon class="star" points="5 16.89 5.62 18.14 7.01 18.35 6 19.33 6.24 20.71 5 20.06 3.76 20.71 4 19.33 2.99 18.35 4.38 18.14 5 16.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="60.57 6.97 60.79 8.36 62.05 8.97 60.8 9.6 60.61 10.99 59.62 10 58.24 10.25 58.88 9 58.22 7.76 59.6 7.99 60.57 6.97" style="fill: #fff5a6"/>
+				  <polygon class="star" points="30.91 26.12 30.86 27.52 31.98 28.36 30.63 28.74 30.18 30.07 29.4 28.91 28 28.89 28.86 27.78 28.45 26.44 29.77 26.93 30.91 26.12" style="fill: #fff5a6"/>
+				  <polygon class="star" points="17.52 13.95 18.44 15.01 19.83 14.86 19.11 16.06 19.68 17.34 18.32 17.02 17.28 17.96 17.16 16.56 15.94 15.87 17.23 15.32 17.52 13.95" style="fill: #fff5a6"/>
+				  <polygon class="star" points="60.53 16.01 61.11 16.41 61.76 16.15 61.56 16.83 62 17.37 61.3 17.39 60.92 17.98 60.69 17.32 60.01 17.14 60.56 16.71 60.53 16.01" style="fill: #fff5a6"/>
+				  <polygon class="star" points="41.99 21.89 42.31 22.52 43 22.62 42.5 23.11 42.62 23.8 41.99 23.47 41.37 23.8 41.49 23.11 40.99 22.62 41.69 22.52 41.99 21.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="63.47 26.02 63.43 26.72 63.98 27.15 63.3 27.32 63.05 27.98 62.68 27.39 61.98 27.36 62.43 26.82 62.24 26.14 62.89 26.4 63.47 26.02" style="fill: #fff5a6"/>
+				  <polygon class="star" points="36.99 9.89 37.31 10.52 38 10.62 37.5 11.11 37.62 11.8 36.99 11.47 36.37 11.8 36.49 11.11 35.99 10.62 36.69 10.52 36.99 9.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="28.5 4.89 28.65 5.2 29 5.25 28.75 5.5 28.81 5.85 28.5 5.68 28.18 5.85 28.24 5.5 27.99 5.25 28.34 5.2 28.5 4.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="28.5 12.89 28.65 13.2 29 13.25 28.75 13.5 28.81 13.85 28.5 13.68 28.18 13.85 28.24 13.5 27.99 13.25 28.34 13.2 28.5 12.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="47.75 22.96 47.72 23.31 47.98 23.54 47.64 23.61 47.5 23.94 47.32 23.63 46.97 23.6 47.21 23.34 47.13 23 47.45 23.14 47.75 22.96" style="fill: #fff5a6"/>
+				  <polygon class="star" points="51.75 31.96 51.72 32.31 51.98 32.54 51.64 32.62 51.5 32.94 51.32 32.63 50.97 32.6 51.21 32.34 51.13 32 51.45 32.15 51.75 31.96" style="fill: #fff5a6"/>
+				  <polygon class="star" points="44.69 29.93 44.7 30.28 45 30.47 44.67 30.59 44.58 30.93 44.37 30.66 44.01 30.68 44.21 30.38 44.08 30.06 44.42 30.15 44.69 29.93" style="fill: #fff5a6"/>
+				  <polygon class="star" points="24.32 10.92 24.58 11.16 24.92 11.07 24.78 11.4 24.96 11.7 24.61 11.66 24.39 11.93 24.31 11.58 23.98 11.45 24.29 11.27 24.32 10.92" style="fill: #fff5a6"/>
+				  <polygon class="star" points="24.94 13.18 24.71 13.45 24.79 13.79 24.47 13.65 24.17 13.84 24.2 13.49 23.93 13.26 24.27 13.19 24.41 12.86 24.59 13.16 24.94 13.18" style="fill: #fff5a6"/>
+				  <polygon class="star" points="32 19.89 32.31 20.52 33 20.62 32.5 21.11 32.62 21.8 32 21.47 31.37 21.8 31.49 21.11 30.99 20.62 31.68 20.52 32 19.89" style="fill: #fff5a6"/>
+				  <polygon class="star" points="19.61 21.97 20.15 22.42 20.82 22.23 20.56 22.88 20.95 23.46 20.25 23.42 19.82 23.97 19.64 23.29 18.98 23.04 19.58 22.67 19.61 21.97" style="fill: #fff5a6"/>
+				  <polygon class="star" points="9.51 8.04 9.43 8.74 9.96 9.2 9.28 9.34 9 9.98 8.65 9.37 7.96 9.31 8.43 8.79 8.27 8.11 8.91 8.4 9.51 8.04" style="fill: #fff5a6"/>
+				</g>
+			</g>
+			<clipPath id="switch" >
+				<circle id="circle" cx="19" cy="17" r="10"/>
+			</clipPath>
+		</defs>
+
+		<g clip-path="url(#container)">
+			<use id="back" href="#day"/>
+			<g clip-path="url(#switch)">
+				<use id="front" href="#night" />
+			</g>
+			<rect class="inner-shadow" width="70" height="44" rx="20"/>
+		</g>
+		
+		<rect width="60" height="44" rx="17" opacity="0"/>
+
+	</svg>
+	</span>
+	</label>
+	<div class="night-label">Night</div>
+</div>
\ No newline at end of file
diff --git a/night-day/src/script.js b/night-day/src/script.js
new file mode 100644
index 0000000..787f791
--- /dev/null
+++ b/night-day/src/script.js
@@ -0,0 +1,69 @@
+console.clear();
+
+let duration = 0.4;
+let isDay = true;
+
+
+let back = document.getElementById('back');
+let front = document.getElementById('front');
+
+let switchTime = () => {
+	
+	back.setAttribute('href', '#' + (isDay ? 'day' : 'night'));
+	front.setAttribute('href', '#' + (isDay ? 'night' : 'day'));
+}
+let scale = 30;
+let toNightAnimation = gsap.timeline();
+
+toNightAnimation
+.to('#night-content', {duration: duration * 0.5, opacity: 1, ease: 'power2.inOut', x: 0})
+.to('#circle', {
+	duration: duration,
+	ease: 'power4.in',
+	scaleX: scale,
+	scaleY: scale,
+	x: 1,
+	transformOrigin: '100% 50%',
+}, 0)
+.to('.day-label', {duration: duration * 2, ease: 'power2.inOut', opacity: 0.2}, 0)
+.to('.night-label', {duration: duration * 2, ease: 'power2.inOut', opacity: 1}, 0)
+.set('#circle', {
+	// transformOrigin: '0% 50%',
+	scaleX:-scale,
+	// x: 8.5,
+	onUpdate: () => switchTime()
+}, duration).to('#circle', {
+	duration: duration,
+	ease: 'power4.out',
+	scaleX: -1,
+	scaleY: 1,
+	x: 2,
+}, duration)
+.to('#day-content', {duration: duration * 0.5, opacity: 0.5}, duration * 1.5)
+.to('body', {backgroundColor: '#b0b0b9', color: 'black', duration: duration * 2}, 0)
+
+let stars = Array.from(document.getElementsByClassName('star'));
+stars.map(star => gsap.to(star, {duration: 'random(0.4, 1.5)', repeat: -1, yoyo: true, opacity: 'random(0.2, 0.5)'}))
+gsap.to('.clouds-big', {duration: 15, repeat: -1, x: -74, ease: 'linear'})
+gsap.to('.clouds-medium', {duration: 20, repeat: -1, x: -65, ease: 'linear'})
+gsap.to('.clouds-small', {duration: 25, repeat: -1, x: -71, ease: 'linear'})
+
+let switchToggle = document.getElementById('input');
+switchToggle.addEventListener('change', () => toggle())
+
+let toggle = () => 
+{
+	isDay = switchToggle.checked == true;
+	if (isDay) {
+    	toNightAnimation.reverse();
+	} else {
+    	toNightAnimation.play();
+	}
+}
+
+
+
+if(CodePen.isThumbnail) toggle();
+
+toNightAnimation.reverse();
+toNightAnimation.pause();
\ No newline at end of file
diff --git a/night-day/src/style.css b/night-day/src/style.css
new file mode 100644
index 0000000..97531e2
--- /dev/null
+++ b/night-day/src/style.css
@@ -0,0 +1,71 @@
+@import url('https://fonts.googleapis.com/css?family=Lora&display=swap');
+
+body, html
+{
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	font-family: 'Lora', serif;
+	color: #303030;
+}
+
+.night-label{
+	opacity: 0.2;
+}
+
+body
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #FEF9EA;
+}
+
+.layout
+{
+	width: 70vw;
+	max-width: 300px;
+	min-width: 250px;
+	height: 30vh;
+	display: grid;
+	grid-template-columns: 1fr 2fr 1fr;
+	justify-content: center;
+	align-items: center;
+	gap: 30px;
+	font-size: 25px;
+}
+
+.layout:nth-child(1)
+{
+	text-align: right;
+}
+
+svg
+{	
+	width: 100%;
+	height: 100%;
+	cursor: pointer;
+}
+
+#night-content
+{
+	opacity: 0.5;
+}
+
+.inner-shadow
+{
+	stroke-opacity: 0.1;
+	stroke-width: 5;
+	stroke: black;
+	fill: none;
+}
+
+.container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
\ No newline at end of file
diff --git a/noisy-svg-lines/README.markdown b/noisy-svg-lines/README.markdown
new file mode 100644
index 0000000..3c2d1a2
--- /dev/null
+++ b/noisy-svg-lines/README.markdown
@@ -0,0 +1,13 @@
+# Noisy SVG Lines
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/DonKarlssonSan/pen/BaBvpRw](https://codepen.io/DonKarlssonSan/pen/BaBvpRw).
+
+ Click to generate a new pattern.
+
+Press 'd' on the keyboard to trigger an SVG file download for the current pattern.
+
+Random parameters:
+
+ * noise seed
+ * noise zoom factor x
+ * noise zoom factor y
+ * y spacing between lines, also used for noise strength: the bigger y spacing - the stronger noise
\ No newline at end of file
diff --git a/noisy-svg-lines/dist/blgjlm.js b/noisy-svg-lines/dist/blgjlm.js
new file mode 100644
index 0000000..956244d
--- /dev/null
+++ b/noisy-svg-lines/dist/blgjlm.js
@@ -0,0 +1,418 @@
+// https://github.com/jwagner/simplex-noise.js
+
+/*
+ * A fast javascript implementation of simplex noise by Jonas Wagner
+ *
+ * Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.
+ * Which is based on example code by Stefan Gustavson (stegu@itn.liu.se).
+ * With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
+ * Better rank ordering method by Stefan Gustavson in 2012.
+ *
+ *
+ * Copyright (C) 2016 Jonas Wagner
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ */
+(function() {
+'use strict';
+
+var F2 = 0.5 * (Math.sqrt(3.0) - 1.0);
+var G2 = (3.0 - Math.sqrt(3.0)) / 6.0;
+var F3 = 1.0 / 3.0;
+var G3 = 1.0 / 6.0;
+var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;
+var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;
+
+function SimplexNoise(random) {
+  if (!random) random = Math.random;
+  this.p = buildPermutationTable(random);
+  this.perm = new Uint8Array(512);
+  this.permMod12 = new Uint8Array(512);
+  for (var i = 0; i < 512; i++) {
+    this.perm[i] = this.p[i & 255];
+    this.permMod12[i] = this.perm[i] % 12;
+  }
+
+}
+SimplexNoise.prototype = {
+    grad3: new Float32Array([1, 1, 0,
+                            -1, 1, 0,
+                            1, -1, 0,
+
+                            -1, -1, 0,
+                            1, 0, 1,
+                            -1, 0, 1,
+
+                            1, 0, -1,
+                            -1, 0, -1,
+                            0, 1, 1,
+
+                            0, -1, 1,
+                            0, 1, -1,
+                            0, -1, -1]),
+    grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1,
+                            0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1,
+                            1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1,
+                            -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1,
+                            1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1,
+                            -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1,
+                            1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0,
+                            -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]),
+    noise2D: function(xin, yin) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad3 = this.grad3;
+        var n0 = 0; // Noise contributions from the three corners
+        var n1 = 0;
+        var n2 = 0;
+        // Skew the input space to determine which simplex cell we're in
+        var s = (xin + yin) * F2; // Hairy factor for 2D
+        var i = Math.floor(xin + s);
+        var j = Math.floor(yin + s);
+        var t = (i + j) * G2;
+        var X0 = i - t; // Unskew the cell origin back to (x,y) space
+        var Y0 = j - t;
+        var x0 = xin - X0; // The x,y distances from the cell origin
+        var y0 = yin - Y0;
+        // For the 2D case, the simplex shape is an equilateral triangle.
+        // Determine which simplex we are in.
+        var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
+        if (x0 > y0) {
+          i1 = 1;
+          j1 = 0;
+        } // lower triangle, XY order: (0,0)->(1,0)->(1,1)
+        else {
+          i1 = 0;
+          j1 = 1;
+        } // upper triangle, YX order: (0,0)->(0,1)->(1,1)
+        // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
+        // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
+        // c = (3-sqrt(3))/6
+        var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
+        var y1 = y0 - j1 + G2;
+        var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
+        var y2 = y0 - 1.0 + 2.0 * G2;
+        // Work out the hashed gradient indices of the three simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        // Calculate the contribution from the three corners
+        var t0 = 0.5 - x0 * x0 - y0 * y0;
+        if (t0 >= 0) {
+          var gi0 = permMod12[ii + perm[jj]] * 3;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient
+        }
+        var t1 = 0.5 - x1 * x1 - y1 * y1;
+        if (t1 >= 0) {
+          var gi1 = permMod12[ii + i1 + perm[jj + j1]] * 3;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1);
+        }
+        var t2 = 0.5 - x2 * x2 - y2 * y2;
+        if (t2 >= 0) {
+          var gi2 = permMod12[ii + 1 + perm[jj + 1]] * 3;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2);
+        }
+        // Add contributions from each corner to get the final noise value.
+        // The result is scaled to return values in the interval [-1,1].
+        return 70.0 * (n0 + n1 + n2);
+      },
+    // 3D simplex noise
+    noise3D: function(xin, yin, zin) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad3 = this.grad3;
+        var n0, n1, n2, n3; // Noise contributions from the four corners
+        // Skew the input space to determine which simplex cell we're in
+        var s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3D
+        var i = Math.floor(xin + s);
+        var j = Math.floor(yin + s);
+        var k = Math.floor(zin + s);
+        var t = (i + j + k) * G3;
+        var X0 = i - t; // Unskew the cell origin back to (x,y,z) space
+        var Y0 = j - t;
+        var Z0 = k - t;
+        var x0 = xin - X0; // The x,y,z distances from the cell origin
+        var y0 = yin - Y0;
+        var z0 = zin - Z0;
+        // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
+        // Determine which simplex we are in.
+        var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
+        var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
+        if (x0 >= y0) {
+          if (y0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+          } // X Y Z order
+          else if (x0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+          } // X Z Y order
+          else {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+          } // Z X Y order
+        }
+        else { // x0<y0
+          if (y0 < z0) {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+          } // Z Y X order
+          else if (x0 < z0) {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+          } // Y Z X order
+          else {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+          } // Y X Z order
+        }
+        // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
+        // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
+        // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
+        // c = 1/6.
+        var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
+        var y1 = y0 - j1 + G3;
+        var z1 = z0 - k1 + G3;
+        var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords
+        var y2 = y0 - j2 + 2.0 * G3;
+        var z2 = z0 - k2 + 2.0 * G3;
+        var x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords
+        var y3 = y0 - 1.0 + 3.0 * G3;
+        var z3 = z0 - 1.0 + 3.0 * G3;
+        // Work out the hashed gradient indices of the four simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        var kk = k & 255;
+        // Calculate the contribution from the four corners
+        var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
+        if (t0 < 0) n0 = 0.0;
+        else {
+          var gi0 = permMod12[ii + perm[jj + perm[kk]]] * 3;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0 + grad3[gi0 + 2] * z0);
+        }
+        var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
+        if (t1 < 0) n1 = 0.0;
+        else {
+          var gi1 = permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]] * 3;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1 + grad3[gi1 + 2] * z1);
+        }
+        var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
+        if (t2 < 0) n2 = 0.0;
+        else {
+          var gi2 = permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]] * 3;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2 + grad3[gi2 + 2] * z2);
+        }
+        var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
+        if (t3 < 0) n3 = 0.0;
+        else {
+          var gi3 = permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]] * 3;
+          t3 *= t3;
+          n3 = t3 * t3 * (grad3[gi3] * x3 + grad3[gi3 + 1] * y3 + grad3[gi3 + 2] * z3);
+        }
+        // Add contributions from each corner to get the final noise value.
+        // The result is scaled to stay just inside [-1,1]
+        return 32.0 * (n0 + n1 + n2 + n3);
+      },
+    // 4D simplex noise, better simplex rank ordering method 2012-03-09
+    noise4D: function(x, y, z, w) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad4 = this.grad4;
+
+        var n0, n1, n2, n3, n4; // Noise contributions from the five corners
+        // Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
+        var s = (x + y + z + w) * F4; // Factor for 4D skewing
+        var i = Math.floor(x + s);
+        var j = Math.floor(y + s);
+        var k = Math.floor(z + s);
+        var l = Math.floor(w + s);
+        var t = (i + j + k + l) * G4; // Factor for 4D unskewing
+        var X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
+        var Y0 = j - t;
+        var Z0 = k - t;
+        var W0 = l - t;
+        var x0 = x - X0; // The x,y,z,w distances from the cell origin
+        var y0 = y - Y0;
+        var z0 = z - Z0;
+        var w0 = w - W0;
+        // For the 4D case, the simplex is a 4D shape I won't even try to describe.
+        // To find out which of the 24 possible simplices we're in, we need to
+        // determine the magnitude ordering of x0, y0, z0 and w0.
+        // Six pair-wise comparisons are performed between each possible pair
+        // of the four coordinates, and the results are used to rank the numbers.
+        var rankx = 0;
+        var ranky = 0;
+        var rankz = 0;
+        var rankw = 0;
+        if (x0 > y0) rankx++;
+        else ranky++;
+        if (x0 > z0) rankx++;
+        else rankz++;
+        if (x0 > w0) rankx++;
+        else rankw++;
+        if (y0 > z0) ranky++;
+        else rankz++;
+        if (y0 > w0) ranky++;
+        else rankw++;
+        if (z0 > w0) rankz++;
+        else rankw++;
+        var i1, j1, k1, l1; // The integer offsets for the second simplex corner
+        var i2, j2, k2, l2; // The integer offsets for the third simplex corner
+        var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner
+        // simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
+        // Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
+        // impossible. Only the 24 indices which have non-zero entries make any sense.
+        // We use a thresholding to set the coordinates in turn from the largest magnitude.
+        // Rank 3 denotes the largest coordinate.
+        i1 = rankx >= 3 ? 1 : 0;
+        j1 = ranky >= 3 ? 1 : 0;
+        k1 = rankz >= 3 ? 1 : 0;
+        l1 = rankw >= 3 ? 1 : 0;
+        // Rank 2 denotes the second largest coordinate.
+        i2 = rankx >= 2 ? 1 : 0;
+        j2 = ranky >= 2 ? 1 : 0;
+        k2 = rankz >= 2 ? 1 : 0;
+        l2 = rankw >= 2 ? 1 : 0;
+        // Rank 1 denotes the second smallest coordinate.
+        i3 = rankx >= 1 ? 1 : 0;
+        j3 = ranky >= 1 ? 1 : 0;
+        k3 = rankz >= 1 ? 1 : 0;
+        l3 = rankw >= 1 ? 1 : 0;
+        // The fifth corner has all coordinate offsets = 1, so no need to compute that.
+        var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
+        var y1 = y0 - j1 + G4;
+        var z1 = z0 - k1 + G4;
+        var w1 = w0 - l1 + G4;
+        var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
+        var y2 = y0 - j2 + 2.0 * G4;
+        var z2 = z0 - k2 + 2.0 * G4;
+        var w2 = w0 - l2 + 2.0 * G4;
+        var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
+        var y3 = y0 - j3 + 3.0 * G4;
+        var z3 = z0 - k3 + 3.0 * G4;
+        var w3 = w0 - l3 + 3.0 * G4;
+        var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
+        var y4 = y0 - 1.0 + 4.0 * G4;
+        var z4 = z0 - 1.0 + 4.0 * G4;
+        var w4 = w0 - 1.0 + 4.0 * G4;
+        // Work out the hashed gradient indices of the five simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        var kk = k & 255;
+        var ll = l & 255;
+        // Calculate the contribution from the five corners
+        var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
+        if (t0 < 0) n0 = 0.0;
+        else {
+          var gi0 = (perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32) * 4;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad4[gi0] * x0 + grad4[gi0 + 1] * y0 + grad4[gi0 + 2] * z0 + grad4[gi0 + 3] * w0);
+        }
+        var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
+        if (t1 < 0) n1 = 0.0;
+        else {
+          var gi1 = (perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32) * 4;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad4[gi1] * x1 + grad4[gi1 + 1] * y1 + grad4[gi1 + 2] * z1 + grad4[gi1 + 3] * w1);
+        }
+        var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
+        if (t2 < 0) n2 = 0.0;
+        else {
+          var gi2 = (perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32) * 4;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad4[gi2] * x2 + grad4[gi2 + 1] * y2 + grad4[gi2 + 2] * z2 + grad4[gi2 + 3] * w2);
+        }
+        var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
+        if (t3 < 0) n3 = 0.0;
+        else {
+          var gi3 = (perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32) * 4;
+          t3 *= t3;
+          n3 = t3 * t3 * (grad4[gi3] * x3 + grad4[gi3 + 1] * y3 + grad4[gi3 + 2] * z3 + grad4[gi3 + 3] * w3);
+        }
+        var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
+        if (t4 < 0) n4 = 0.0;
+        else {
+          var gi4 = (perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32) * 4;
+          t4 *= t4;
+          n4 = t4 * t4 * (grad4[gi4] * x4 + grad4[gi4 + 1] * y4 + grad4[gi4 + 2] * z4 + grad4[gi4 + 3] * w4);
+        }
+        // Sum up and scale the result to cover the range [-1,1]
+        return 27.0 * (n0 + n1 + n2 + n3 + n4);
+      }
+  };
+
+function buildPermutationTable(random) {
+  var i;
+  var p = new Uint8Array(256);
+  for (i = 0; i < 256; i++) {
+    p[i] = i;
+  }
+  for (i = 0; i < 255; i++) {
+    var r = i + ~~(random() * (256 - i));
+    var aux = p[i];
+    p[i] = p[r];
+    p[r] = aux;
+  }
+  return p;
+}
+SimplexNoise._buildPermutationTable = buildPermutationTable;
+
+// amd
+if (typeof define !== 'undefined' && define.amd) define(function() {return SimplexNoise;});
+// common js
+if (typeof exports !== 'undefined') exports.SimplexNoise = SimplexNoise;
+// browser
+else if (typeof window !== 'undefined') window.SimplexNoise = SimplexNoise;
+// nodejs
+if (typeof module !== 'undefined') {
+  module.exports = SimplexNoise;
+}
+
+})();
\ No newline at end of file
diff --git a/noisy-svg-lines/dist/index.html b/noisy-svg-lines/dist/index.html
new file mode 100644
index 0000000..f22e34e
--- /dev/null
+++ b/noisy-svg-lines/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Noisy SVG Lines</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" >
+</svg>
+<!-- partial -->
+  <script src='js/blgjlm.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/noisy-svg-lines/dist/script.js b/noisy-svg-lines/dist/script.js
new file mode 100644
index 0000000..8af5fb1
--- /dev/null
+++ b/noisy-svg-lines/dist/script.js
@@ -0,0 +1,96 @@
+/*
+  Johan Karlsson, 2019
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+
+const svgNs = "http://www.w3.org/2000/svg";
+let svg;
+let simplex;
+let xZoom, yZoom;
+let deltaY;
+
+class NoiseLine {
+  constructor(x, y, length) {
+    this.x = x;
+    this.y = y;
+    this.length = length;
+  }
+    
+  draw(groupElement) {
+    let path = document.createElementNS(svgNs, "path");
+    path.setAttribute("fill", "none");
+    path.setAttribute("stroke", "black");
+    let points = this.generatePoints();
+    let commands = this.convertPointsToCommands(points);
+    path.setAttribute("d", commands); 
+    groupElement.appendChild(path);
+  }
+  
+  generatePoints() {
+    let points = [];
+    let dx = this.length / 300;
+    for(let x = 0; x < this.length; x += dx) {
+      let y = this.y + (simplex.noise2D(x / xZoom, this.y / yZoom)) * deltaY * 2;
+      points.push(`${this.x + x}, ${y}`);
+    }
+    return points;
+  }
+  
+  convertPointsToCommands(points) {
+    let commands = [];
+    commands.push(`M ${points[0]}`);
+    for(let i = 1; i < points.length; i++) {
+      commands.push(`L ${points[i]}`);
+    }
+    return commands.join(" ");
+  }
+}
+
+function setup() {
+  svg = document.querySelector("svg");
+  document.addEventListener("click", draw);
+  document.addEventListener("keydown", onKeyDown);
+}
+
+function onKeyDown (e) {
+  if(e.code === "KeyD") {
+    download();
+  }
+}
+
+function download() {
+  let svgDoc = svg.outerHTML;
+  let filename = "noisy SVG lines.svg";
+  let element = document.createElement("a");
+  element.setAttribute("href", "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgDoc));
+  element.setAttribute("download", filename);
+  element.style.display = "none";
+  document.body.appendChild(element);
+  element.addEventListener("click", e => e.stopPropagation());
+  element.click();
+  document.body.removeChild(element);
+}
+
+function draw() {
+  simplex = new SimplexNoise();
+  let group = document.querySelector("g");
+  if(group) {
+    group.remove();
+  }
+  
+  group = document.createElementNS(svgNs, "g");
+  xZoom = Math.random() * 200 + 150;
+  yZoom = Math.random() * 400 + 300;
+  let lines = [];
+  deltaY = Math.random() * 40 + 10;
+  for(let y = 100; y <= 900; y += deltaY) {
+    line = new NoiseLine(50, y, 900);
+    lines.push(line);
+  }
+  lines.forEach(l => l.draw(group));
+  svg.appendChild(group);
+}
+
+setup();
+draw();
\ No newline at end of file
diff --git a/noisy-svg-lines/dist/style.css b/noisy-svg-lines/dist/style.css
new file mode 100644
index 0000000..775671c
--- /dev/null
+++ b/noisy-svg-lines/dist/style.css
@@ -0,0 +1,10 @@
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
diff --git a/noisy-svg-lines/license.txt b/noisy-svg-lines/license.txt
new file mode 100644
index 0000000..247d73c
--- /dev/null
+++ b/noisy-svg-lines/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Johan Karlsson (https://codepen.io/DonKarlssonSan/pen/BaBvpRw)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/noisy-svg-lines/src/blgjlm.js b/noisy-svg-lines/src/blgjlm.js
new file mode 100644
index 0000000..956244d
--- /dev/null
+++ b/noisy-svg-lines/src/blgjlm.js
@@ -0,0 +1,418 @@
+// https://github.com/jwagner/simplex-noise.js
+
+/*
+ * A fast javascript implementation of simplex noise by Jonas Wagner
+ *
+ * Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.
+ * Which is based on example code by Stefan Gustavson (stegu@itn.liu.se).
+ * With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
+ * Better rank ordering method by Stefan Gustavson in 2012.
+ *
+ *
+ * Copyright (C) 2016 Jonas Wagner
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ */
+(function() {
+'use strict';
+
+var F2 = 0.5 * (Math.sqrt(3.0) - 1.0);
+var G2 = (3.0 - Math.sqrt(3.0)) / 6.0;
+var F3 = 1.0 / 3.0;
+var G3 = 1.0 / 6.0;
+var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;
+var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;
+
+function SimplexNoise(random) {
+  if (!random) random = Math.random;
+  this.p = buildPermutationTable(random);
+  this.perm = new Uint8Array(512);
+  this.permMod12 = new Uint8Array(512);
+  for (var i = 0; i < 512; i++) {
+    this.perm[i] = this.p[i & 255];
+    this.permMod12[i] = this.perm[i] % 12;
+  }
+
+}
+SimplexNoise.prototype = {
+    grad3: new Float32Array([1, 1, 0,
+                            -1, 1, 0,
+                            1, -1, 0,
+
+                            -1, -1, 0,
+                            1, 0, 1,
+                            -1, 0, 1,
+
+                            1, 0, -1,
+                            -1, 0, -1,
+                            0, 1, 1,
+
+                            0, -1, 1,
+                            0, 1, -1,
+                            0, -1, -1]),
+    grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1,
+                            0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1,
+                            1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1,
+                            -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1,
+                            1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1,
+                            -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1,
+                            1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0,
+                            -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]),
+    noise2D: function(xin, yin) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad3 = this.grad3;
+        var n0 = 0; // Noise contributions from the three corners
+        var n1 = 0;
+        var n2 = 0;
+        // Skew the input space to determine which simplex cell we're in
+        var s = (xin + yin) * F2; // Hairy factor for 2D
+        var i = Math.floor(xin + s);
+        var j = Math.floor(yin + s);
+        var t = (i + j) * G2;
+        var X0 = i - t; // Unskew the cell origin back to (x,y) space
+        var Y0 = j - t;
+        var x0 = xin - X0; // The x,y distances from the cell origin
+        var y0 = yin - Y0;
+        // For the 2D case, the simplex shape is an equilateral triangle.
+        // Determine which simplex we are in.
+        var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
+        if (x0 > y0) {
+          i1 = 1;
+          j1 = 0;
+        } // lower triangle, XY order: (0,0)->(1,0)->(1,1)
+        else {
+          i1 = 0;
+          j1 = 1;
+        } // upper triangle, YX order: (0,0)->(0,1)->(1,1)
+        // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
+        // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
+        // c = (3-sqrt(3))/6
+        var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
+        var y1 = y0 - j1 + G2;
+        var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
+        var y2 = y0 - 1.0 + 2.0 * G2;
+        // Work out the hashed gradient indices of the three simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        // Calculate the contribution from the three corners
+        var t0 = 0.5 - x0 * x0 - y0 * y0;
+        if (t0 >= 0) {
+          var gi0 = permMod12[ii + perm[jj]] * 3;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient
+        }
+        var t1 = 0.5 - x1 * x1 - y1 * y1;
+        if (t1 >= 0) {
+          var gi1 = permMod12[ii + i1 + perm[jj + j1]] * 3;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1);
+        }
+        var t2 = 0.5 - x2 * x2 - y2 * y2;
+        if (t2 >= 0) {
+          var gi2 = permMod12[ii + 1 + perm[jj + 1]] * 3;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2);
+        }
+        // Add contributions from each corner to get the final noise value.
+        // The result is scaled to return values in the interval [-1,1].
+        return 70.0 * (n0 + n1 + n2);
+      },
+    // 3D simplex noise
+    noise3D: function(xin, yin, zin) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad3 = this.grad3;
+        var n0, n1, n2, n3; // Noise contributions from the four corners
+        // Skew the input space to determine which simplex cell we're in
+        var s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3D
+        var i = Math.floor(xin + s);
+        var j = Math.floor(yin + s);
+        var k = Math.floor(zin + s);
+        var t = (i + j + k) * G3;
+        var X0 = i - t; // Unskew the cell origin back to (x,y,z) space
+        var Y0 = j - t;
+        var Z0 = k - t;
+        var x0 = xin - X0; // The x,y,z distances from the cell origin
+        var y0 = yin - Y0;
+        var z0 = zin - Z0;
+        // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
+        // Determine which simplex we are in.
+        var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
+        var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
+        if (x0 >= y0) {
+          if (y0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+          } // X Y Z order
+          else if (x0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+          } // X Z Y order
+          else {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+          } // Z X Y order
+        }
+        else { // x0<y0
+          if (y0 < z0) {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+          } // Z Y X order
+          else if (x0 < z0) {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+          } // Y Z X order
+          else {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+          } // Y X Z order
+        }
+        // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
+        // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
+        // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
+        // c = 1/6.
+        var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
+        var y1 = y0 - j1 + G3;
+        var z1 = z0 - k1 + G3;
+        var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords
+        var y2 = y0 - j2 + 2.0 * G3;
+        var z2 = z0 - k2 + 2.0 * G3;
+        var x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords
+        var y3 = y0 - 1.0 + 3.0 * G3;
+        var z3 = z0 - 1.0 + 3.0 * G3;
+        // Work out the hashed gradient indices of the four simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        var kk = k & 255;
+        // Calculate the contribution from the four corners
+        var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
+        if (t0 < 0) n0 = 0.0;
+        else {
+          var gi0 = permMod12[ii + perm[jj + perm[kk]]] * 3;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0 + grad3[gi0 + 2] * z0);
+        }
+        var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
+        if (t1 < 0) n1 = 0.0;
+        else {
+          var gi1 = permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]] * 3;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1 + grad3[gi1 + 2] * z1);
+        }
+        var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
+        if (t2 < 0) n2 = 0.0;
+        else {
+          var gi2 = permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]] * 3;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2 + grad3[gi2 + 2] * z2);
+        }
+        var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
+        if (t3 < 0) n3 = 0.0;
+        else {
+          var gi3 = permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]] * 3;
+          t3 *= t3;
+          n3 = t3 * t3 * (grad3[gi3] * x3 + grad3[gi3 + 1] * y3 + grad3[gi3 + 2] * z3);
+        }
+        // Add contributions from each corner to get the final noise value.
+        // The result is scaled to stay just inside [-1,1]
+        return 32.0 * (n0 + n1 + n2 + n3);
+      },
+    // 4D simplex noise, better simplex rank ordering method 2012-03-09
+    noise4D: function(x, y, z, w) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad4 = this.grad4;
+
+        var n0, n1, n2, n3, n4; // Noise contributions from the five corners
+        // Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
+        var s = (x + y + z + w) * F4; // Factor for 4D skewing
+        var i = Math.floor(x + s);
+        var j = Math.floor(y + s);
+        var k = Math.floor(z + s);
+        var l = Math.floor(w + s);
+        var t = (i + j + k + l) * G4; // Factor for 4D unskewing
+        var X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
+        var Y0 = j - t;
+        var Z0 = k - t;
+        var W0 = l - t;
+        var x0 = x - X0; // The x,y,z,w distances from the cell origin
+        var y0 = y - Y0;
+        var z0 = z - Z0;
+        var w0 = w - W0;
+        // For the 4D case, the simplex is a 4D shape I won't even try to describe.
+        // To find out which of the 24 possible simplices we're in, we need to
+        // determine the magnitude ordering of x0, y0, z0 and w0.
+        // Six pair-wise comparisons are performed between each possible pair
+        // of the four coordinates, and the results are used to rank the numbers.
+        var rankx = 0;
+        var ranky = 0;
+        var rankz = 0;
+        var rankw = 0;
+        if (x0 > y0) rankx++;
+        else ranky++;
+        if (x0 > z0) rankx++;
+        else rankz++;
+        if (x0 > w0) rankx++;
+        else rankw++;
+        if (y0 > z0) ranky++;
+        else rankz++;
+        if (y0 > w0) ranky++;
+        else rankw++;
+        if (z0 > w0) rankz++;
+        else rankw++;
+        var i1, j1, k1, l1; // The integer offsets for the second simplex corner
+        var i2, j2, k2, l2; // The integer offsets for the third simplex corner
+        var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner
+        // simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
+        // Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
+        // impossible. Only the 24 indices which have non-zero entries make any sense.
+        // We use a thresholding to set the coordinates in turn from the largest magnitude.
+        // Rank 3 denotes the largest coordinate.
+        i1 = rankx >= 3 ? 1 : 0;
+        j1 = ranky >= 3 ? 1 : 0;
+        k1 = rankz >= 3 ? 1 : 0;
+        l1 = rankw >= 3 ? 1 : 0;
+        // Rank 2 denotes the second largest coordinate.
+        i2 = rankx >= 2 ? 1 : 0;
+        j2 = ranky >= 2 ? 1 : 0;
+        k2 = rankz >= 2 ? 1 : 0;
+        l2 = rankw >= 2 ? 1 : 0;
+        // Rank 1 denotes the second smallest coordinate.
+        i3 = rankx >= 1 ? 1 : 0;
+        j3 = ranky >= 1 ? 1 : 0;
+        k3 = rankz >= 1 ? 1 : 0;
+        l3 = rankw >= 1 ? 1 : 0;
+        // The fifth corner has all coordinate offsets = 1, so no need to compute that.
+        var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
+        var y1 = y0 - j1 + G4;
+        var z1 = z0 - k1 + G4;
+        var w1 = w0 - l1 + G4;
+        var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
+        var y2 = y0 - j2 + 2.0 * G4;
+        var z2 = z0 - k2 + 2.0 * G4;
+        var w2 = w0 - l2 + 2.0 * G4;
+        var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
+        var y3 = y0 - j3 + 3.0 * G4;
+        var z3 = z0 - k3 + 3.0 * G4;
+        var w3 = w0 - l3 + 3.0 * G4;
+        var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
+        var y4 = y0 - 1.0 + 4.0 * G4;
+        var z4 = z0 - 1.0 + 4.0 * G4;
+        var w4 = w0 - 1.0 + 4.0 * G4;
+        // Work out the hashed gradient indices of the five simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        var kk = k & 255;
+        var ll = l & 255;
+        // Calculate the contribution from the five corners
+        var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
+        if (t0 < 0) n0 = 0.0;
+        else {
+          var gi0 = (perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32) * 4;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad4[gi0] * x0 + grad4[gi0 + 1] * y0 + grad4[gi0 + 2] * z0 + grad4[gi0 + 3] * w0);
+        }
+        var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
+        if (t1 < 0) n1 = 0.0;
+        else {
+          var gi1 = (perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32) * 4;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad4[gi1] * x1 + grad4[gi1 + 1] * y1 + grad4[gi1 + 2] * z1 + grad4[gi1 + 3] * w1);
+        }
+        var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
+        if (t2 < 0) n2 = 0.0;
+        else {
+          var gi2 = (perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32) * 4;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad4[gi2] * x2 + grad4[gi2 + 1] * y2 + grad4[gi2 + 2] * z2 + grad4[gi2 + 3] * w2);
+        }
+        var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
+        if (t3 < 0) n3 = 0.0;
+        else {
+          var gi3 = (perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32) * 4;
+          t3 *= t3;
+          n3 = t3 * t3 * (grad4[gi3] * x3 + grad4[gi3 + 1] * y3 + grad4[gi3 + 2] * z3 + grad4[gi3 + 3] * w3);
+        }
+        var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
+        if (t4 < 0) n4 = 0.0;
+        else {
+          var gi4 = (perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32) * 4;
+          t4 *= t4;
+          n4 = t4 * t4 * (grad4[gi4] * x4 + grad4[gi4 + 1] * y4 + grad4[gi4 + 2] * z4 + grad4[gi4 + 3] * w4);
+        }
+        // Sum up and scale the result to cover the range [-1,1]
+        return 27.0 * (n0 + n1 + n2 + n3 + n4);
+      }
+  };
+
+function buildPermutationTable(random) {
+  var i;
+  var p = new Uint8Array(256);
+  for (i = 0; i < 256; i++) {
+    p[i] = i;
+  }
+  for (i = 0; i < 255; i++) {
+    var r = i + ~~(random() * (256 - i));
+    var aux = p[i];
+    p[i] = p[r];
+    p[r] = aux;
+  }
+  return p;
+}
+SimplexNoise._buildPermutationTable = buildPermutationTable;
+
+// amd
+if (typeof define !== 'undefined' && define.amd) define(function() {return SimplexNoise;});
+// common js
+if (typeof exports !== 'undefined') exports.SimplexNoise = SimplexNoise;
+// browser
+else if (typeof window !== 'undefined') window.SimplexNoise = SimplexNoise;
+// nodejs
+if (typeof module !== 'undefined') {
+  module.exports = SimplexNoise;
+}
+
+})();
\ No newline at end of file
diff --git a/noisy-svg-lines/src/index.html b/noisy-svg-lines/src/index.html
new file mode 100644
index 0000000..88a412a
--- /dev/null
+++ b/noisy-svg-lines/src/index.html
@@ -0,0 +1,2 @@
+<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" >
+</svg>
diff --git a/noisy-svg-lines/src/script.js b/noisy-svg-lines/src/script.js
new file mode 100644
index 0000000..7d9d97f
--- /dev/null
+++ b/noisy-svg-lines/src/script.js
@@ -0,0 +1,96 @@
+/*
+  Johan Karlsson, 2019
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+
+const svgNs = "http://www.w3.org/2000/svg";
+let svg;
+let simplex;
+let xZoom, yZoom;
+let deltaY;
+
+class NoiseLine {
+  constructor(x, y, length) {
+    this.x = x;
+    this.y = y;
+    this.length = length;
+  }
+    
+  draw(groupElement) {
+    let path = document.createElementNS(svgNs, "path");
+    path.setAttribute("fill", "none");
+    path.setAttribute("stroke", "black");
+    let points = this.generatePoints();
+    let commands = this.convertPointsToCommands(points);
+    path.setAttribute("d", commands); 
+    groupElement.appendChild(path);
+  }
+  
+  generatePoints() {
+    let points = [];
+    let dx = this.length / 300;
+    for(let x = 0; x < this.length; x += dx) {
+      let y = this.y + (simplex.noise2D(x / xZoom, this.y / yZoom)) * deltaY * 2;
+      points.push(`${this.x + x}, ${y}`);
+    }
+    return points;
+  }
+  
+  convertPointsToCommands(points) {
+    let commands = [];
+    commands.push(`M ${points[0]}`);
+    for(let i = 1; i < points.length; i++) {
+      commands.push(`L ${points[i]}`);
+    }
+    return commands.join(" ");
+  }
+}
+
+function setup() {
+  svg = document.querySelector("svg");
+  document.addEventListener("click", draw);
+  document.addEventListener("keydown", onKeyDown);
+}
+
+function onKeyDown (e) {
+  if(e.code === "KeyD") {
+    download();
+  }
+}
+
+function download() {
+  let svgDoc = svg.outerHTML;
+  let filename = "noisy SVG lines.svg";
+  let element = document.createElement("a");
+  element.setAttribute("href", "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgDoc));
+  element.setAttribute("download", filename);
+  element.style.display = "none";
+  document.body.appendChild(element);
+  element.addEventListener("click", e => e.stopPropagation());
+  element.click();
+  document.body.removeChild(element);
+}
+
+function draw() {
+  simplex = new SimplexNoise();
+  let group = document.querySelector("g");
+  if(group) {
+    group.remove();
+  }
+  
+  group = document.createElementNS(svgNs, "g");
+  xZoom = Math.random() * 200 + 150;
+  yZoom = Math.random() * 400 + 300;
+  let lines = [];
+  deltaY = Math.random() * 40 + 10;
+  for(let y = 100; y <= 900; y += deltaY) {
+    line = new NoiseLine(50, y, 900);
+    lines.push(line);
+  }
+  lines.forEach(l => l.draw(group));
+  svg.appendChild(group);
+}
+
+setup();
+draw();
diff --git a/noisy-svg-lines/src/style.css b/noisy-svg-lines/src/style.css
new file mode 100644
index 0000000..775671c
--- /dev/null
+++ b/noisy-svg-lines/src/style.css
@@ -0,0 +1,10 @@
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
diff --git a/noisy-vertical-svg-lines/README.markdown b/noisy-vertical-svg-lines/README.markdown
new file mode 100644
index 0000000..4a69e96
--- /dev/null
+++ b/noisy-vertical-svg-lines/README.markdown
@@ -0,0 +1,13 @@
+# Noisy Vertical SVG Lines
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/DonKarlssonSan/pen/YzPgVJY](https://codepen.io/DonKarlssonSan/pen/YzPgVJY).
+
+ Click to generate a new pattern.
+
+Press 'd' on the keyboard to trigger an SVG file download for the current pattern.
+
+Random parameters:
+
+ * noise seed
+ * noise zoom factor x
+ * noise zoom factor y
+ * y spacing between lines, also used for noise strength: the bigger y spacing - the stronger noise
\ No newline at end of file
diff --git a/noisy-vertical-svg-lines/dist/index.html b/noisy-vertical-svg-lines/dist/index.html
new file mode 100644
index 0000000..db152ce
--- /dev/null
+++ b/noisy-vertical-svg-lines/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Noisy Vertical SVG Lines</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" >
+</svg>
+<!-- partial -->
+  <script src='https://codepen.io/DonKarlssonSan/pen/bLGjLm.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/noisy-vertical-svg-lines/dist/script.js b/noisy-vertical-svg-lines/dist/script.js
new file mode 100644
index 0000000..d57fd9f
--- /dev/null
+++ b/noisy-vertical-svg-lines/dist/script.js
@@ -0,0 +1,96 @@
+/*
+  Johan Karlsson, 2019
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+
+const svgNs = "http://www.w3.org/2000/svg";
+let svg;
+let simplex;
+let xZoom, yZoom;
+let deltaX;
+
+class NoiseLine {
+  constructor(x, y, length) {
+    this.x = x;
+    this.y = y;
+    this.length = length;
+  }
+    
+  draw(groupElement) {
+    let path = document.createElementNS(svgNs, "path");
+    //path.setAttribute("fill", "none");
+    path.setAttribute("stroke", "black");
+    let points = this.generatePoints();
+    let commands = this.convertPointsToCommands(points);
+    path.setAttribute("d", commands); 
+    groupElement.appendChild(path);
+  }
+  
+  generatePoints() {
+    let points = [];
+    let dy = this.length / 300;
+    for(let y = 0; y < this.length; y += dy) {
+      let x = this.x + (simplex.noise2D(this.x / xZoom, y / yZoom)) * deltaX * 2;
+      points.push(`${x}, ${this.y + y}`);
+    }
+    return points;
+  }
+  
+  convertPointsToCommands(points) {
+    let commands = [];
+    commands.push(`M ${points[0]}`);
+    for(let i = 1; i < points.length; i++) {
+      commands.push(`L ${points[i]}`);
+    }
+    return commands.join(" ");
+  }
+}
+
+function setup() {
+  svg = document.querySelector("svg");
+  document.addEventListener("click", draw);
+  document.addEventListener("keydown", onKeyDown);
+}
+
+function onKeyDown (e) {
+  if(e.code === "KeyD") {
+    download();
+  }
+}
+
+function download() {
+  let svgDoc = svg.outerHTML;
+  let filename = "noisy-vertical-svg-lines.svg";
+  let element = document.createElement("a");
+  element.setAttribute("href", "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgDoc));
+  element.setAttribute("download", filename);
+  element.style.display = "none";
+  document.body.appendChild(element);
+  element.addEventListener("click", e => e.stopPropagation());
+  element.click();
+  document.body.removeChild(element);
+}
+
+function draw() {
+  simplex = new SimplexNoise();
+  let group = document.querySelector("g");
+  if(group) {
+    group.remove();
+  }
+  
+  group = document.createElementNS(svgNs, "g");
+  xZoom = Math.random() * 500 + 20;
+  yZoom = Math.random() * 500 + 20;
+  let lines = [];
+  deltaX = Math.random() * 15 + 5;
+  for(let x = 100; x <= 900; x += deltaX) {
+    line = new NoiseLine(x, 50, 900);
+    lines.push(line);
+  }
+  lines.forEach(l => l.draw(group));
+  svg.appendChild(group);
+}
+
+setup();
+draw();
\ No newline at end of file
diff --git a/noisy-vertical-svg-lines/dist/style.css b/noisy-vertical-svg-lines/dist/style.css
new file mode 100644
index 0000000..0b9def9
--- /dev/null
+++ b/noisy-vertical-svg-lines/dist/style.css
@@ -0,0 +1,10 @@
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/noisy-vertical-svg-lines/license.txt b/noisy-vertical-svg-lines/license.txt
new file mode 100644
index 0000000..b37d06e
--- /dev/null
+++ b/noisy-vertical-svg-lines/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Johan Karlsson (https://codepen.io/DonKarlssonSan/pen/YzPgVJY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/noisy-vertical-svg-lines/src/index.html b/noisy-vertical-svg-lines/src/index.html
new file mode 100644
index 0000000..88a412a
--- /dev/null
+++ b/noisy-vertical-svg-lines/src/index.html
@@ -0,0 +1,2 @@
+<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" >
+</svg>
diff --git a/noisy-vertical-svg-lines/src/script.js b/noisy-vertical-svg-lines/src/script.js
new file mode 100644
index 0000000..b438a6a
--- /dev/null
+++ b/noisy-vertical-svg-lines/src/script.js
@@ -0,0 +1,96 @@
+/*
+  Johan Karlsson, 2019
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+
+const svgNs = "http://www.w3.org/2000/svg";
+let svg;
+let simplex;
+let xZoom, yZoom;
+let deltaX;
+
+class NoiseLine {
+  constructor(x, y, length) {
+    this.x = x;
+    this.y = y;
+    this.length = length;
+  }
+    
+  draw(groupElement) {
+    let path = document.createElementNS(svgNs, "path");
+    //path.setAttribute("fill", "none");
+    path.setAttribute("stroke", "black");
+    let points = this.generatePoints();
+    let commands = this.convertPointsToCommands(points);
+    path.setAttribute("d", commands); 
+    groupElement.appendChild(path);
+  }
+  
+  generatePoints() {
+    let points = [];
+    let dy = this.length / 300;
+    for(let y = 0; y < this.length; y += dy) {
+      let x = this.x + (simplex.noise2D(this.x / xZoom, y / yZoom)) * deltaX * 2;
+      points.push(`${x}, ${this.y + y}`);
+    }
+    return points;
+  }
+  
+  convertPointsToCommands(points) {
+    let commands = [];
+    commands.push(`M ${points[0]}`);
+    for(let i = 1; i < points.length; i++) {
+      commands.push(`L ${points[i]}`);
+    }
+    return commands.join(" ");
+  }
+}
+
+function setup() {
+  svg = document.querySelector("svg");
+  document.addEventListener("click", draw);
+  document.addEventListener("keydown", onKeyDown);
+}
+
+function onKeyDown (e) {
+  if(e.code === "KeyD") {
+    download();
+  }
+}
+
+function download() {
+  let svgDoc = svg.outerHTML;
+  let filename = "noisy-vertical-svg-lines.svg";
+  let element = document.createElement("a");
+  element.setAttribute("href", "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgDoc));
+  element.setAttribute("download", filename);
+  element.style.display = "none";
+  document.body.appendChild(element);
+  element.addEventListener("click", e => e.stopPropagation());
+  element.click();
+  document.body.removeChild(element);
+}
+
+function draw() {
+  simplex = new SimplexNoise();
+  let group = document.querySelector("g");
+  if(group) {
+    group.remove();
+  }
+  
+  group = document.createElementNS(svgNs, "g");
+  xZoom = Math.random() * 500 + 20;
+  yZoom = Math.random() * 500 + 20;
+  let lines = [];
+  deltaX = Math.random() * 15 + 5;
+  for(let x = 100; x <= 900; x += deltaX) {
+    line = new NoiseLine(x, 50, 900);
+    lines.push(line);
+  }
+  lines.forEach(l => l.draw(group));
+  svg.appendChild(group);
+}
+
+setup();
+draw();
diff --git a/noisy-vertical-svg-lines/src/style.css b/noisy-vertical-svg-lines/src/style.css
new file mode 100644
index 0000000..775671c
--- /dev/null
+++ b/noisy-vertical-svg-lines/src/style.css
@@ -0,0 +1,10 @@
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
diff --git a/onboarding-sequence/README.markdown b/onboarding-sequence/README.markdown
new file mode 100644
index 0000000..643871a
--- /dev/null
+++ b/onboarding-sequence/README.markdown
@@ -0,0 +1,7 @@
+# Onboarding sequence
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ainalem/pen/NWxYBRq](https://codepen.io/ainalem/pen/NWxYBRq).
+
+Onboarding sequence with SVG morphing, translation, and rotation animation of SVG art.
+
+People vector created by freepik - www.freepik.com - https://www.freepik.com/free-photos-vectors/people
diff --git a/onboarding-sequence/dist/index.html b/onboarding-sequence/dist/index.html
new file mode 100644
index 0000000..7a35f9a
--- /dev/null
+++ b/onboarding-sequence/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Onboarding sequence</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="root"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/@react-spring/web@9.0.0-rc.3/index.umd.js'></script>
+<script src='https://odintsov.me/static/libs/react-use-gesture.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/onboarding-sequence/dist/script.js b/onboarding-sequence/dist/script.js
new file mode 100644
index 0000000..8be0821
--- /dev/null
+++ b/onboarding-sequence/dist/script.js
@@ -0,0 +1,1545 @@
+function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);}const { useState, useEffect } = React;
+const { useSpring, animated, config } = ReactSpring;
+const { useDrag } = ReactUseGesture;
+
+function P1() {
+  return (
+    React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "256",
+      height: "464",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      version: "1.1",
+      viewBox: "0 0 256 464",
+      xmlSpace: "preserve" },
+
+    React.createElement("defs", null,
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M1515 6513H223V5277h533v429c0 74 60 134 134 134h625z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M3334 6513h-722v-673h722z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M2612 6513H1515v-673h83v673z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M2612 6513H1598v-673h1014z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M4626 6513H3334h625v-676c8 2 18 3 27 3h640z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M3959 6513h-56v-701c16 13 35 21 56 26v676z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M3904 6513h-570v-673h10c103 0 88-65 88-188v-375h420v429c0 43 20 81 52 106z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M3344 5840h-10v-563h98v375c0 123 15 188-88 188z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M6445 6513h-722v-673h722z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M5723 6513H4626v-673h83v673z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M5723 6513H4709v-673h1014z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M7820 5277h2305v1236h56V5277h-56z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M7737 6513H6446h624V5277h750-84v1236z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M7070 6513h-56V5277h56z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M7015 6513h-570v-673c72-3 129-62 129-134v-429h441z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M6445 5840v-563h129v429c0 72-57 131-129 134z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M10126 6513H8834V5277h1292z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M8834 6513H7737V5277h83v1236z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M8834 6513H7820V5277h1014z" }))),
+
+
+    React.createElement("g", { display: "inline" },
+    React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M2685 4226L2573 4035 2471 4109 2589 4293z",
+      className: "p1-fil9",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      transform: "matrix(.096 0 0 .096 -73 -95.969)" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M174.384 313.938l-11.136 17.183c-.672 1.152-.48 2.688.48 3.648l27.648-17.663-7.392-9.408z",
+      className: "p1-fil0",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M150.097 203.061l5.184 40.223 32.543 55.966-26.976 14.496-26.303-52.318c-1.92-3.264-3.264-6.72-4.224-10.368l-6.047-23.903 25.823-24.192z",
+      className: "p1-fil10",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M132.53 257.492l-.193-.672.288.576v.096zm-2.017-5.856l-6.815-19.776 1.536-.863 5.183 20.159c0 .192.096.384.096.576z",
+      className: "p1-fil11",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M132.53 257.396l-.289-.576-1.824-5.184c-.096-.192-.096-.384-.096-.576l-5.183-20.16 24.67-14.687-17.375 41.183z",
+      className: "p1-fil12",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M1925 4446L1969 4212 1844 4219 1808 4451z",
+      className: "p1-fil9",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      transform: "matrix(.096 0 0 .096 -73 -95.969)" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M100.85 328.817l-18.623 8.544c-1.248.576-1.824 2.016-1.536 3.264h32.735l-1.248-11.904-11.424.096z",
+      className: "p1-fil0",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M145.969 191.926l-28.895-6.624c0 6.24-12.192 47.71-16.8 59.998a50.943 50.943 0 00-2.783 11.424l-5.952 65.662 30.815.384 4.704-64.03 15.071-33.695c10.464-19.296 3.84-33.023 3.84-33.023z",
+      className: "p1-fil10",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M122.834 132.984l19.871-.384s.576-24.864-13.055-25.248c-11.904-.288-13.152 15.456-13.152 15.456l6.432 10.176z",
+      className: "p1-fil13",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M130.993 109.56c.768.288 1.44.672 2.112 1.152 5.856 4.608 3.552 14.976-.864 19.968-2.4 2.784-6.143 4.32-9.695 3.36-5.184-1.344-7.296-6.816-6.72-11.904.384-3.84 2.112-7.488 4.896-10.08 2.784-2.496 6.816-3.84 10.271-2.592z",
+      className: "p1-fil14",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M133.681 127.512c1.056.864 2.688 1.056 3.936.48 1.248-.576 2.112-1.824 2.304-3.264.192-1.248-.288-2.592-1.248-3.264-.96-.672-2.592-.48-3.264.576l-1.632 5.472z",
+      className: "p1-fil14",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M134.737 124.056l.864 17.76a6.22 6.22 0 01-5.472 6.527c-3.743.48-7.007-2.496-6.911-6.336l.288-16.607z",
+      className: "p1-fil14",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M123.218 136.632v-2.4s4.992.96 8.927-3.552c0 0-2.016 4.896-8.927 5.952z",
+      className: "p1-fil15",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M136.081 125.592c.384 0 .768-.096 1.152-.384.288-.192.48-.576.48-.96 0-.576-.48-1.056-.96-1.248-.096 0-.288 0-.384.192 0 .096 0 .288.192.384.384.096.672.384.672.672a.528.528 0 01-.288.48c-.192.192-.48.288-.768.288-.192 0-.288.096-.288.288 0 .192.096.288.288.288z",
+      className: "p1-fil15",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M125.042 124.824c.096.576.864.96 1.824.864.96-.096 1.632-.672 1.536-1.344-.096-.576-.864-.96-1.824-.864-.96.096-1.632.672-1.536 1.344z",
+      className: "p1-fil16",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M120.626 125.592l-1.056-.768-.192-.384.288-.096c.096 0 .288-.192.48-.384s.288-.384.48-.48l.864-1.152c-.192.48-.384.864-.576 1.344a5.5 5.5 0 01-.384.672c-.192.192-.288.384-.576.576l.096-.48.768 1.056v.096h-.096z",
+      className: "p1-fil15",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M119.474 127.224c.384.192.768.384 1.152.48.384.096.768 0 1.152-.096.384-.096.672-.384.96-.672l.864-.96c-.096.192-.192.384-.192.672-.096.192-.192.384-.384.576a3 3 0 01-1.056.864c-.48.192-.96.192-1.44 0s-.768-.48-1.056-.864z",
+      className: "p1-fil15",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M118.034 123.864c0 .576-.768 1.056-1.632 1.056-.192 0-.384 0-.576-.096a7.767 7.767 0 010-2.112c.192 0 .384-.096.576-.096.96 0 1.632.48 1.632 1.056z",
+      className: "p1-fil16",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M124.274 120.408c0 .576 0 1.152.096 1.632.096.576.48.864.864.768.48 0 .768-.48 1.056-.96.192-.48.384-1.056.48-1.632l.192-.096.096.192c0 .576-.192 1.152-.384 1.728-.288.576-.672 1.152-1.44 1.248-.384 0-.768-.096-1.056-.288-.288-.288-.384-.576-.384-.864-.096-.576-.096-1.248.096-1.824l.192-.096.096.192z",
+      className: "p1-fil15",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M117.074 119.928c0 .48 0 .96.096 1.344.096.48.288.768.672.672.288 0 .576-.384.768-.768.192-.384.288-.864.384-1.344l.192-.096.096.192c0 .48-.096.96-.288 1.44-.192.48-.48 1.056-1.152 1.152-.288 0-.672-.096-.864-.384-.192-.288-.288-.48-.288-.768-.096-.48 0-1.056.096-1.536l.192-.096z",
+      className: "p1-fil15",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M129.842 118.776s.48-8.16 4.991-7.392c0 0-1.728-3.648-6.623-3.84-3.648-.192-7.008 1.728-9.12 4.608-1.152 1.536-2.688 4.32-3.264 6.336 1.728 0 14.016.288 14.016.288z",
+      className: "p1-fil13",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M133.585 110.616s-3.456 1.44-1.824 7.584c1.728 6.144 5.376 2.304 5.376 2.304s1.152-9.984-3.552-9.888z",
+      className: "p1-fil13",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M90.867 135.384l-.96 4.991s-18.432 44.255-9.216 46.079c7.488 1.536 25.247-11.424 25.247-11.424l-6.432-10.943-10.463 7.583s5.952-25.439 7.104-28.03c0 0 3.935-2.017 4.511-3.745.192-.672.192-1.824-2.111.288-1.056.96-3.168-.288-2.208-1.92.96-1.631 3.551-1.727 4.415.48 0 0 .864.384 1.248-.288.384-.672-1.152-3.167-3.072-3.167-1.247 0-2.303.48-2.303.48s2.303-5.856 1.824-6.048c-.48-.192-1.248-.096-3.744 6.336 0 0 1.44-5.184 1.536-5.952.096-.672-.672-1.44-1.248.192-.096.192-2.016 5.184-2.016 5.184s.48-3.552.48-3.84c.096-.768-.672-.864-1.056 0-.288.672-1.44 3.648-1.44 3.648z",
+      className: "p1-fil14",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M151.249 165.815s.672-17.856-15.552-28.703c0 0-7.391 2.88-12.863 2.303-3.84 9.696-6.528 17.088-12.096 58.175 0 0 11.52-.48 18.912.096 10.943.768 21.887-3.936 21.887-3.936l-.288-27.84z",
+      className: "p1-fil17",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M122.834 139.415L99.41 162.743s1.824 15.263 5.952 16.895l17.088-8.928.384-31.199z",
+      className: "p1-fil17",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M104.402 195.67l-8.255 1.152c-1.344.192-2.688-.768-2.88-2.208l-2.4-17.184c-.192-1.344.768-2.688 2.112-2.88l8.255-1.152c1.344-.192 2.688.768 2.88 2.208l2.4 17.184c.192 1.344-.768 2.688-2.112 2.88z",
+      className: "p1-fil18",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M162.768 179.446l-39.55 1.152v39.935s-.864 6.72 8.447 6.432c9.216-.288 24.096-1.44 24.096-1.44s5.568-2.496 6.72-8.736c1.151-6.144.287-37.439.287-37.439z",
+      className: "p1-fil19",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M155.185 182.134s-5.376-44.638-19.104-43.487c-13.727 1.152-7.295 47.999-7.295 47.999l4.607.288s-8.351-47.999 4.032-47.71c12.384.287 14.016 47.998 14.016 47.998z",
+      className: "p1-fil19",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M134.833 186.934c-1.44-2.4-2.88-4.8-4.224-7.2-3.743 1.056-7.2 1.92-10.08 2.496-2.591.48-4.991.96-6.815 1.344l-1.728.288c-1.056.192-1.728.288-1.728.288s-5.664-.768-6.912-2.784c-.288.096-.672.576-.576 1.056.384 1.728 2.112 2.688 2.112 2.688s-8.255 1.728-7.871 2.4c.48.672 6.143-.192 6.143-.192s-7.871 1.824-7.2 2.4c.289.192.673.096 6.528-.192 0 0-5.567 1.824-4.607 2.016 1.247.384 5.087-.384 5.087-.384s-3.84 1.44-3.072 1.632c.768.192 11.328-2.112 11.328-2.112s24-3.072 23.711-3.744z",
+      className: "p1-fil14",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M159.793 167.063c-9.696 5.183-9.024 4.991-16.896 7.583 0 0-6.624-13.727-10.848-22.847-1.248-2.688-.672-5.856 1.344-7.968 3.264-3.456 8.64-2.496 11.328 1.536 3.936 6.048 15.168 21.696 15.168 21.696z",
+      className: "p1-fil17",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M143.857 174.358l-6.432-12.767c-.096-.192-.288-.192-.384-.096-.192.096-.192.288-.096.384l6.432 12.767c.096.192.288.192.384.096.192-.096.192-.288.096-.384z",
+      className: "p1-fil20",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M159.313 167.35c-3.552 1.825-6.528 3.648-9.024 4.704v.096a117.894 117.894 0 01-19.776 7.68c.576 2.4 1.152 5.472 1.728 7.872 24.768-3.456 29.951-11.904 30.143-13.056.48-.864-.864-3.744-3.071-7.2z",
+      className: "p1-fil14",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }))));
+
+
+
+
+}
+
+function P2() {
+  return (
+    React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "256",
+      height: "464",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      version: "1.1",
+      viewBox: "0 0 256 464",
+      xmlSpace: "preserve" },
+
+    React.createElement("defs", null,
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M1515 6513H223V5277h533v429c0 74 60 134 134 134h625z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M3334 6513h-722v-673h722z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M2612 6513H1515v-673h83v673z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M2612 6513H1598v-673h1014z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M4626 6513H3334h625v-676c8 2 18 3 27 3h640z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M3959 6513h-56v-701c16 13 35 21 56 26v676z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M3904 6513h-570v-673h10c103 0 88-65 88-188v-375h420v429c0 43 20 81 52 106z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M3344 5840h-10v-563h98v375c0 123 15 188-88 188z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M6445 6513h-722v-673h722z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M5723 6513H4626v-673h83v673z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M5723 6513H4709v-673h1014z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M7820 5277h2305v1236h56V5277h-56z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M7737 6513H6446h624V5277h750-84v1236z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M7070 6513h-56V5277h56z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M7015 6513h-570v-673c72-3 129-62 129-134v-429h441z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M6445 5840v-563h129v429c0 72-57 131-129 134z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M10126 6513H8834V5277h1292z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M8834 6513H7737V5277h83v1236z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M8834 6513H7820V5277h1014z" }))),
+
+
+    React.createElement("g", { display: "inline" },
+    React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M5164 4197L5039 4204 5067 4451 5184 4446z",
+      className: "p2-fil21",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      transform: "matrix(.096 0 0 .096 -369.781 -95.97)" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M116.925 328.818L98.3 337.362c-1.248.576-1.824 2.016-1.536 3.264H129.5l-1.248-11.904-11.423.096z",
+      className: "p2-fil22",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M5399 4197L5274 4204 5302 4451 5419 4446z",
+      className: "p2-fil21",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      transform: "matrix(.096 0 0 .096 -369.781 -95.97)" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M139.484 328.818l-18.624 8.544c-1.247.576-1.823 2.016-1.535 3.264h32.735l-1.248-11.904-11.424.096z",
+      className: "p2-fil22",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M5378 3228L4958 3238 5024 4371 5451 4371z",
+      className: "p2-fil23",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      transform: "matrix(.096 0 0 .096 -369.781 -95.97)" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M5078 3236L5077 3238 5154 3434 5216 4372 5218 4373 5219 4371 5157 3433 5080 3237z",
+      className: "p2-fil24",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      transform: "matrix(.096 0 0 .096 -369.781 -95.97)" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M128.348 116.473a9.07 9.07 0 00-2.304 1.248c-6.431 4.991-3.84 16.223.864 21.695 2.592 2.976 6.72 4.704 10.56 3.744 5.568-1.44 7.872-7.392 7.392-12.96-.384-4.128-2.208-8.16-5.376-10.944-3.072-2.687-7.488-4.223-11.232-2.783z",
+      className: "p2-fil25",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M124.316 132.216l-.864 19.296c-.192 3.551 2.4 6.72 5.952 7.103a6.787 6.787 0 007.584-6.911l-.384-18.048-12.288-1.536z",
+      className: "p2-fil25",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M136.796 145.944v-2.688s-5.472 1.056-9.792-3.84c0 0 2.208 5.28 9.792 6.528z",
+      className: "p2-fil26",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M134.396 131.256h-.096c-.288-.288-.864.192-.48.48.576.576 1.632-.192.96-.864-.576-.576-1.632.288-1.056.96.576.672 1.632-.384.864-.864-.768-.576-1.344.672-.48 1.056.384.192.672-.48.192-.672z",
+      className: "p2-fil13",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M135.932 128.184c-1.44-.096-2.88 0-4.32.192-.672.096-.48 1.056.192.96 1.344-.192 2.688-.288 4.128-.192.672 0 .672-.96.096-.96z",
+      className: "p2-fil13",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M143.612 129.624c-.288-.288-.864.192-.48.48.576.576 1.632-.192.96-.864-.576-.576-1.632.288-1.056.96.576.672 1.632-.384.864-.864-.768-.576-1.344.672-.48 1.056.384.192.672-.48.192-.672z",
+      className: "p2-fil13",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M140.06 127.416c1.152-.48 2.496-.768 3.744-.96.576-.096.768.864.192.96-1.248.192-2.4.48-3.552.96-.576.192-.96-.672-.384-.864z",
+      className: "p2-fil13",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M126.908 120.984c1.92-.672 7.392-1.92 14.592.384l-.864-8.735s-12.48-1.44-22.271 4.224l2.112 12.095s1.055.576 2.207.288c.48.48 1.056.672 1.824.384 1.248-.384 1.536-1.728 1.728-2.88.192-1.92.48-3.84.672-5.664z",
+      className: "p2-fil13",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M122.684 130.008c2.112.096 3.84.48 4.224-1.344.384-1.632.288-9.216 3.936-7.584 2.688 1.152 4.704 1.056 8.16.096 1.44-.384 2.592.384 2.592.192 0 0-2.88-8.16-11.52-7.487-2.688.192-4.896 2.112-6.048 4.608-1.44 3.071-1.536 6.815-1.44 10.08l.096 1.535z",
+      className: "p2-fil13",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M139.484 133.752l.768-1.152.096.576c-.384-.288-.576-.576-.768-.864-.192-.288-.288-.672-.384-.96.192.288.48.576.672.768.288.192.576.384.768.384l.48.096-.288.576-1.152.864h-.192v-.192z",
+      className: "p2-fil27",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M140.828 135.672c-.288.384-.672.768-1.152.96a2.12 2.12 0 01-1.536 0c-.48-.192-.864-.576-1.152-.96-.096-.192-.288-.384-.384-.672-.096-.192-.192-.48-.192-.672l.96.96c.384.288.672.576 1.056.672.384.192.768.192 1.152.096a6.664 6.664 0 001.248-.48z",
+      className: "p2-fil28",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M140.828 135.672c-.192.48-.672.768-1.152.96-.48.192-1.056.192-1.632 0-.48-.192-.864-.576-1.152-.96-.096-.192-.288-.384-.384-.672-.096-.288-.192-.48-.192-.672.384.288.672.672 1.056.96.384.288.672.576 1.056.672.384.192.768.192 1.152.192.384-.096.864-.192 1.248-.384z",
+      className: "p2-fil27",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M131.132 131.256h-.192a3.442 3.442 0 003.456 3.456 3.442 3.442 0 003.456-3.456 3.442 3.442 0 00-3.456-3.456 3.441 3.441 0 00-3.456 3.456h.384c0-1.632 1.344-3.072 3.072-3.072 1.632 0 3.072 1.344 3.072 3.072 0 1.632-1.344 3.072-3.072 3.072s-3.072-1.344-3.072-3.072z",
+      className: "p2-fil1",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M139.868 129.432h-.192a3.442 3.442 0 003.456 3.456 3.442 3.442 0 003.456-3.456 3.442 3.442 0 00-3.456-3.456 3.442 3.442 0 00-3.456 3.456h.384c0-1.632 1.344-3.072 3.072-3.072 1.632 0 3.072 1.344 3.072 3.072 0 1.632-1.344 3.072-3.072 3.072s-3.072-1.344-3.072-3.072z",
+      className: "p2-fil1",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M125.372 135.96c-1.152.864-2.975 1.152-4.224.48-1.343-.576-2.303-2.016-2.495-3.552-.192-1.344.288-2.88 1.344-3.552 1.056-.672 2.88-.48 3.551.672z",
+      className: "p2-fil25",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M122.3 133.272c-.287 0-.575-.096-.768-.288-.191-.192-.287-.288-.287-.48 0-.288.192-.576.671-.672a.528.528 0 00.288-.48.528.528 0 00-.48-.288c-.671.192-1.151.672-1.151 1.344 0 .48.192.864.575 1.056.384.288.768.384 1.249.384a.413.413 0 00.383-.384.413.413 0 00-.383-.384z",
+      className: "p2-fil27",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M5140 2352L5139 2356 5218 2369 5219 2365z",
+      className: "p2-fil1",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      transform: "matrix(.096 0 0 .096 -369.781 -95.97)" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M5280 2348L5281 2352 5309 2348 5309 2344z",
+      className: "p2-fil1",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      transform: "matrix(.096 0 0 .096 -369.781 -95.97)" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M122.108 150.84l-.48-2.784s7.488 0 8.448 3.936c0 0 2.016-3.648 7.776-4.608v4.224l-8.16 2.495-7.68-3.36z",
+      className: "p2-fil29",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M153.308 156.695l19.583 5.088s16.224-18.047 16.991-18.623c.769-.672 10.752 2.496 10.752 2.496l-11.52 21.407c-2.783 7.008-6.911 10.944-10.847 11.136l-32.16-6.432 7.297-15.072z",
+      className: "p2-fil25",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M189.307 144.024s2.207-4.512 2.592-5.184c.767-1.728 1.92-6.048 1.92-6.048s1.343-.288 1.247 2.688c-.096 2.976.48 2.112.48 2.112s6.24-7.584 7.68-7.008c.576.192-.192 2.016-1.248 2.976s-2.112 2.496-2.112 2.496 5.856-5.28 7.2-4.416c0 0 .672.48-1.248 2.112-2.592 2.112-4.32 4.128-4.32 4.128s5.76-4.128 6.432-3.648c1.056.768-4.8 4.896-5.76 6.432 0 0 4.32-3.36 4.512-2.304.096 1.056-5.28 4.8-7.776 10.368z",
+      className: "p2-fil25",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M193.914 138.36s.48.096 1.056.672c.576.576 1.248 1.536 1.248 2.784l-.384-.096c.864-.96 1.92-1.44 2.688-1.536.768-.096 1.248 0 1.248 0 0 .096-.48.096-1.248.288a5.071 5.071 0 00-2.496 1.536l-.384.384v-.48a3.823 3.823 0 00-1.056-2.592c-.48-.576-.96-.768-.864-.864z",
+      className: "p2-fil30",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M103.101 155.927l-19.583 5.088s-16.224-18.047-16.992-18.623c-.768-.672-10.752 2.496-10.752 2.496l11.52 21.407c2.784 7.008 6.912 10.944 10.848 11.136l32.159-6.432-7.296-15.072z",
+      className: "p2-fil25",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M67.102 143.16s-2.208-4.512-2.592-5.184c-.768-1.728-1.92-6.048-1.92-6.048s-1.344-.288-1.248 2.688c.096 2.976-.48 2.112-.48 2.112s-6.24-7.584-7.68-7.008c-.576.192.192 2.016 1.248 2.976s2.112 2.496 2.112 2.496-5.855-5.28-7.2-4.416c0 0-.671.48 1.249 2.112 2.591 2.112 4.32 4.128 4.32 4.128s-5.76-4.128-6.432-3.648c-1.056.768 4.8 4.896 5.76 6.432 0 0-4.32-3.36-4.512-2.304-.096 1.056 5.28 4.8 7.775 10.272l9.6-4.704z",
+      className: "p2-fil25",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M62.494 137.496c0 .096-.384.288-.864.864-.48.576-1.056 1.536-1.056 2.592v.48l-.384-.384a5.07 5.07 0 00-2.496-1.536c-.768-.192-1.248-.192-1.248-.288 0 0 .48-.192 1.248 0 .768.096 1.92.576 2.688 1.536l-.384.096c0-1.248.672-2.304 1.248-2.784.576-.576 1.056-.672 1.056-.672z",
+      className: "p2-fil30",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M141.02 151.512c-1.728-.672-3.552-1.056-5.76-1.056-4.608 1.44-9.216 1.44-13.823 0-1.92.192-6.336.48-12.576 2.304l-25.343 8.255-3.84 17.28 28.127-4.704s-2.592 37.15-1.248 43.295l40.99-1.056-1.823-22.56.672-19.68 29.95 4.705-4.127-16.608-31.103-10.08z",
+      className: "p2-fil29",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M53.95 146.04l-7.2-4.128c-1.247-.672-1.631-2.304-.96-3.456l8.64-14.976c.672-1.248 2.208-1.632 3.456-.96l7.2 4.128c1.248.672 1.632 2.304.96 3.456l-8.64 14.976c-.672 1.248-2.304 1.632-3.456.96z",
+      className: "p2-fil18",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M171.643 268.244v.48h24.095v-36.383c0-2.976-2.4-5.376-5.375-5.376h-13.92a5.367 5.367 0 00-5.376 5.376v36.383h.48v-.48h.48v-35.903a4.404 4.404 0 014.416-4.416h13.92c2.4 0 4.415 2.016 4.415 4.416v35.423h-23.23v.48h.48-.48z",
+      className: "p2-fil22",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M178.555 229.461h10.272c1.152 0 2.016-.96 2.016-2.016 0-1.152-.96-2.016-2.016-2.016h-10.272c-1.152 0-2.016.96-2.016 2.016 0 1.152.96 2.016 2.016 2.016z",
+      className: "p2-fil31",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M165.403 340.242h29.951a6.678 6.678 0 006.72-6.72v-68.926a6.678 6.678 0 00-6.72-6.72h-29.95a6.678 6.678 0 00-6.72 6.72v68.926a6.678 6.678 0 006.72 6.72z",
+      className: "p2-fil31",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M179.13 340.242h29.952a6.678 6.678 0 006.72-6.72v-68.926a6.678 6.678 0 00-6.72-6.72h-29.951a6.678 6.678 0 00-6.72 6.72v68.926a6.678 6.678 0 006.72 6.72z",
+      className: "p2-fil32",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M205.05 326.899c.864 0 1.632-.768 1.632-1.632v-52.99c0-.865-.768-1.633-1.632-1.633-.864 0-1.632.768-1.632 1.632v52.99c0 .865.768 1.632 1.632 1.632z",
+      className: "p2-fil33",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M195.642 326.899c.864 0 1.632-.768 1.632-1.632v-52.99c0-.865-.768-1.633-1.632-1.633-.864 0-1.632.768-1.632 1.632v52.99c0 .865.768 1.632 1.632 1.632z",
+      className: "p2-fil33",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M186.33 326.899c.865 0 1.633-.768 1.633-1.632v-52.99c0-.865-.768-1.633-1.632-1.633-.864 0-1.632.768-1.632 1.632v52.99c0 .865.768 1.632 1.632 1.632z",
+      className: "p2-fil33",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }))));
+
+
+
+
+}
+
+function P3() {
+  return (
+    React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "256",
+      height: "464",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      version: "1.1",
+      viewBox: "0 0 256 464",
+      xmlSpace: "preserve" },
+
+    React.createElement("defs", null,
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M1515 6513H223V5277h533v429c0 74 60 134 134 134h625z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M3334 6513h-722v-673h722z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M2612 6513H1515v-673h83v673z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M2612 6513H1598v-673h1014z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M4626 6513H3334h625v-676c8 2 18 3 27 3h640z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M3959 6513h-56v-701c16 13 35 21 56 26v676z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M3904 6513h-570v-673h10c103 0 88-65 88-188v-375h420v429c0 43 20 81 52 106z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M3344 5840h-10v-563h98v375c0 123 15 188-88 188z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M6445 6513h-722v-673h722z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M5723 6513H4626v-673h83v673z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M5723 6513H4709v-673h1014z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M7820 5277h2305v1236h56V5277h-56z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M7737 6513H6446h624V5277h750-84v1236z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M7070 6513h-56V5277h56z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M7015 6513h-570v-673c72-3 129-62 129-134v-429h441z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M6445 5840v-563h129v429c0 72-57 131-129 134z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M10126 6513H8834V5277h1292z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M8834 6513H7737V5277h83v1236z" })),
+
+    React.createElement("clipPath", { clipRule: "nonzero" },
+    React.createElement("path", { d: "M8834 6513H7820V5277h1014z" }))),
+
+
+    React.createElement("g", { display: "inline" },
+    React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M8203 4182L8328 4189 8300 4436 8183 4431z",
+      className: "p3-fil21",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      transform: "matrix(.096 0 0 .096 -667.373 -95.97)" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M129.116 327.378l18.624 8.544c1.248.576 1.824 2.016 1.536 3.264H116.54l1.248-11.903 11.423.095z",
+      className: "p3-fil22",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M7968 4182L8093 4189 8065 4436 7948 4431z",
+      className: "p3-fil21",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      transform: "matrix(.096 0 0 .096 -667.373 -95.97)" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M106.557 327.378l18.623 8.544c1.248.576 1.824 2.016 1.536 3.264H93.981l1.248-11.903 11.424.095z",
+      className: "p3-fil22",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M7989 3176L8417 3186 8350 4342 7915 4342z",
+      className: "p3-fil34",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      transform: "matrix(.096 0 0 .096 -667.373 -95.97)" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M8219 3386L8297 3187 8291 3184 8212 3385 8149 4342 8156 4343z",
+      className: "p3-fil35",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      transform: "matrix(.096 0 0 .096 -667.373 -95.97)" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M113.469 137.496s1.152 4.032 3.84 5.856c0-.192.096-7.392.096-7.392l-4.032 1.536z",
+      className: "p3-fil22",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M121.148 120.696c-.768.192-1.535.576-2.207 1.056-6.432 4.32-4.8 15.072-.672 20.544 2.304 3.072 6.047 4.896 9.695 4.224 5.376-.96 7.968-6.432 7.872-11.712-.096-3.936-1.536-7.872-4.32-10.656-2.688-2.784-6.72-4.512-10.368-3.456z",
+      className: "p3-fil36",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M117.02 138.936c-1.151.768-2.88.864-4.031.192-1.248-.672-2.016-2.112-2.112-3.552-.096-1.344.48-2.688 1.536-3.264 1.056-.576 2.688-.288 3.36.864z",
+      className: "p3-fil36",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M116.157 135.384l-2.208 18.24c-.48 3.36 1.824 6.527 5.088 7.103 3.84.768 7.487-2.112 7.68-5.952l.96-17.087z",
+      className: "p3-fil36",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M127.004 149.208l.192-2.496s-5.28.672-8.927-4.32c0 0 1.727 5.184 8.735 6.816z",
+      className: "p3-fil26",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M125.852 135.192c-.288-.288-.768.096-.48.384.576.576 1.536-.096.96-.768-.576-.672-1.536.192-1.056.768.48.672 1.536-.192.864-.768-.672-.576-1.344.576-.576.96.384.192.672-.384.288-.576z",
+      className: "p3-fil13",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M127.484 132.312c-1.344-.192-2.784-.192-4.128-.096-.576.096-.48.96.096.96 1.248-.096 2.592-.096 3.936.096.576.096.768-.864.096-.96z",
+      className: "p3-fil13",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M134.012 134.232c-.288-.288-.768.096-.48.384.576.576 1.536-.096.96-.768-.576-.672-1.536.192-1.056.768.48.672 1.536-.192.864-.768-.672-.576-1.344.576-.576.96.384.192.672-.384.288-.576z",
+      className: "p3-fil13",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M130.46 137.88l.864-1.056.096.48c-.384-.288-.576-.576-.672-.864a1.852 1.852 0 01-.288-.96c.288.576.768 1.152 1.248 1.248l.384.096-.288.384-1.152.672h-.192v-.096z",
+      className: "p3-fil28",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M130.46 137.88l.864-1.056.096.48c-.384-.288-.576-.576-.672-.864a1.852 1.852 0 01-.288-.96c.288.576.768 1.152 1.248 1.248l.384.096-.288.384-1.152.672h-.192v-.096z",
+      className: "p3-fil28",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M131.42 131.928c1.152-.384 2.4-.576 3.648-.672.576 0 .672.864.096.864a21.642 21.642 0 00-3.456.576c-.48.192-.864-.672-.384-.864z",
+      className: "p3-fil13",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M114.717 136.248c-.288 0-.576-.096-.768-.288-.192-.192-.288-.384-.288-.48 0-.288.288-.576.672-.672.192 0 .288-.192.192-.384 0-.192-.192-.288-.384-.192a1.43 1.43 0 00-1.152 1.152v.096c0 .384.192.672.48.96.288.288.672.384 1.056.384.192 0 .288-.096.288-.288 0-.192-.096-.288-.288-.288z",
+      className: "p3-fil28",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M125.756 147c-3.072-.384-9.311-2.496-10.175-12.672l1.824-1.536s4.991 9.696 18.143 4.8c0 0-.672 7.68-6.816 9.216-.96.288-2.016.288-2.976.192z",
+      className: "p3-fil22",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M128.636 140.184l2.784-.096s-1.152 2.4-2.784.096z",
+      className: "p3-fil1",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M119.325 125.976s7.007-5.568 13.151-.768c0 0-4.512-7.487-11.615-6.047-7.2 1.44-8.832 8.735-8.544 13.247 0 0 2.304-.768 3.36.864v1.152s1.824 1.536 1.824 1.344c0-.192 4.8-6.72 1.92-9.792z",
+      className: "p3-fil22",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M119.325 125.976s8.16 2.976 14.303.96c0 0-2.016-6.144-10.464-5.28-8.447.864-3.84 4.32-3.84 4.32z",
+      className: "p3-fil22",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M169.243 165.911l-8.256-1.248c-1.344-.192-2.304-1.536-2.112-2.88l2.592-17.183c.192-1.344 1.536-2.304 2.88-2.112l8.256 1.248c1.344.192 2.304 1.536 2.112 2.88l-2.592 17.183c-.192 1.344-1.536 2.304-2.88 2.112z",
+      className: "p3-fil18",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M136.796 163.703c1.824 5.088 3.552 11.52 4.128 18.432 1.344 16.031-.48 28.99-.48 28.99l-42.623 1.249 2.496-47.23c13.824-1.057 25.151-2.017 36.48-1.537z",
+      className: "p3-fil37",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M106.269 167.351s4.128-16.223 4.416-16.415c0 0 1.536-.48 3.36-.48.576 1.056 2.016 2.496 6.24 2.592 4.895.192 5.951-1.344 6.623-2.112 5.28 1.824 9.408 3.263 9.984 10.175.288 3.744-.096 2.208 1.344 19.2l.672 8.447-36.479-.192 3.744-21.215z",
+      className: "p3-fil37",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M166.94 201.43c-15.168 5.472-29.28-17.567-29.28-17.567l13.536-11.328 11.135 14.496 2.88-27.648 8.16-.672s2.88 39.36-6.432 42.72z",
+      className: "p3-fil38",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M172.891 167.64c-2.304 0-4.704 0-7.008-.097v-1.056l-.288-2.784s-1.92-5.472-4.32-6.624c.096-.384.576-.864 1.152-.864 2.016.192 3.264 2.016 3.264 2.016s.96-9.503 1.728-9.12c.864.385.864 5.376.864 5.376s.768-7.583 1.44-6.911c.288.288 0 0 .384 6.623 0 0 1.44-5.855 1.92-4.8.48 1.345.192 5.76.192 5.76s1.152-4.511 1.536-3.647c.288.864-.96 12.96-.96 12.96s0 1.247.096 2.975z",
+      className: "p3-fil38",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M126.908 150.936s9.6-1.44 31.103 28.223l-18.623 13.727-12.384-41.95z",
+      className: "p3-fil37",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M140.06 173.783l.768 17.663c0 .192.192.288.384.288s.288-.192.288-.384l-.768-17.663c0-.192-.192-.288-.384-.288s-.288.192-.288.384z",
+      className: "p3-fil39",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M159.067 250.485h-42.43c-1.728 0-3.072-1.344-3.072-3.072v-30.911c0-1.728 1.344-3.072 3.072-3.072h42.43a3.033 3.033 0 013.072 3.072v30.91a3.033 3.033 0 01-3.072 3.073z",
+      className: "p3-fil18",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M146.492 216.214v-.672h-14.976v-3.264c0-2.016.768-3.744 2.112-5.088a7.255 7.255 0 015.088-2.112c2.016 0 3.744.768 5.088 2.112 1.248 1.344 2.112 3.072 2.112 5.088v3.936h.672v-.672.672h.672v-3.936c0-4.704-3.84-8.448-8.448-8.448-4.704 0-8.448 3.84-8.448 8.448v4.608h16.992v-.672h-.672z",
+      className: "p3-fil18",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M137.18 199.798c-.768 0-1.44.096-2.016.192l-32.83-2.784.191-9.023s-6.624-.96-13.344-.288c0 0-4.607 17.759 4.608 20.735 7.584 2.4 35.807-.096 40.895-.576.768.192 1.728.384 2.592.384 3.648 0 6.624-1.92 6.624-4.32 0-2.4-2.976-4.32-6.624-4.32z",
+      className: "p3-fil38",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M113.277 150.648s-16.512-2.112-25.824 37.535c0 0 7.008.192 15.936.383l9.792-37.918z",
+      className: "p3-fil37",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }),
+
+    React.createElement("path", {
+      fillRule: "evenodd",
+      strokeWidth: "0.096",
+      d: "M102.813 188.566l.48-11.807c0-.192-.096-.384-.288-.384-.192 0-.384.096-.384.288l-.48 11.808c0 .191.096.383.288.383.192 0 .384-.096.384-.288z",
+      className: "p3-fil39",
+      clipRule: "evenodd",
+      imageRendering: "optimizeQuality",
+      opacity: "1",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision" }))));
+
+
+
+
+}
+
+function App() {
+  const [{ x }, set] = useSpring(() => ({
+    x: 0 }));
+
+  const bind = useDrag(
+  ({ movement: [x], velocity, down, direction: [dx], tap }) => {
+    if (!down) {
+      if (x > -100) {
+        set({ x: 0 });
+      } else if (x < -300) {
+        set({ x: -400 });
+      } else {
+        set({ x: -200 });
+      }
+      return;
+    }
+    set({ x });
+  },
+  {
+    initial: () => [x.get(), 0],
+    bounds: { left: -400, right: 0, top: 0, bottom: 476 },
+    rubberband: true });
+
+
+  return (
+    React.createElement("div", { className: "App" },
+    React.createElement("div", _extends({ className: "container" }, bind()),
+    React.createElement("div", { className: "title" },
+    React.createElement("div", { className: "title1" },
+    React.createElement(animated.ul, {
+      className: "titleList",
+      style: {
+        y: x.to({
+          range: [-400, -200, 0],
+          output: [-60, -30, 0] }) } },
+
+
+
+    React.createElement("li", { className: "titleItem" }, "Outstanding"),
+    React.createElement("li", { className: "titleItem" }, "Extraordinary"),
+    React.createElement("li", { className: "titleItem" }, "Superb"))),
+
+
+    React.createElement("div", { className: "title2" }, "REAL ESTATE"),
+    React.createElement("div", { className: "title3" }, "AGENTS")),
+
+    React.createElement("svg", { className: "blob", width: "256", height: "464", viewBox: "0 0 256 464" },
+    React.createElement(animated.path, {
+      d: x.to({
+        range: [-400, -200, 0],
+        output: [
+        "M 157.81292,131.16918 C 128.33979,127.45582 59.004493,121.76045 53.287478,168.06051 47.570462,214.36057 86.454799,213.14326 77.881699,234.66986 69.308599,256.19646 59.042495,268.13837 67.634107,288.98209 76.225718,309.82581 103.27857,320.05328 138.34249,312.55156 173.40641,305.04984 204.93111,298.87002 208.02612,279.75926 211.12113,260.6485 189.48716,257.88808 188.5557,229.54606 187.62424,201.20404 212.01456,174.45091 200.8528,155.7634 189.69104,137.07589 187.28605,134.88254 157.81292,131.16918 Z",
+        "M 157.81292,131.16918 C 128.33979,127.45582 48.756902,138.1566 53.287478,168.06051 57.818054,197.96442 75.182448,197.77187 73.782662,224.42227 72.382877,251.07266 70.314846,257.89078 72.757903,278.7345 75.20096,299.57822 88.114636,303.32873 113.94876,307.60312 139.78288,311.87751 159.84171,314.24141 176.25858,295.13065 192.67546,276.01989 203.83379,256.86332 190.60522,228.5213 177.37665,200.17928 205.866,189.8223 211.10039,171.13479 216.33478,152.44728 187.28605,134.88254 157.81292,131.16918 Z",
+        "M 157.81292,131.16918 C 128.33979,127.45582 86.672992,124.83473 71.733144,166.01099 56.793295,207.18725 69.033893,203.92043 80.955976,230.57083 92.87806,257.22123 55.968217,259.9403 59.436033,279.75926 62.90385,299.57822 94.985717,299.83924 132.0922,306.16316 169.19868,312.48708 186.48544,320.38997 198.80328,288.98209 211.12113,257.57422 199.73475,245.59097 195.72902,217.24895 191.72328,188.90693 209.96504,178.54995 215.19943,159.86244 220.43382,141.17493 187.28605,134.88254 157.81292,131.16918 Z"] }),
+
+
+      style: {
+        fill: x.to({
+          range: [-400, -200, 0],
+          output: ["#fdeae7", "#d3eacf", "#eae7fd"] }) } })),
+
+
+
+
+    React.createElement(animated.div, {
+      className: "person person1",
+      style: { transform: x.to(x => `rotate(${x / 10}deg)`) } },
+
+    React.createElement(P1, null)),
+
+    React.createElement(animated.div, {
+      className: "person person2",
+      style: { transform: x.to(x => `rotate(${x / 10 + 20}deg)`) } },
+
+    React.createElement(P2, null)),
+
+    React.createElement(animated.div, {
+      className: "person person3",
+      style: { transform: x.to(x => `rotate(${x / 10 + 40}deg)`) } },
+
+    React.createElement(P3, null)),
+
+    React.createElement("div", { className: "text" }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium facere"),
+
+
+
+    React.createElement("div", { className: "navDots" },
+    React.createElement(animated.div, {
+      className: "navDot",
+      style: {
+        backgroundColor: x.to({
+          range: [-400, -200, 0],
+          output: ["#000", "#000", "#e0c5c0"] }),
+
+        transform: x.to({
+          range: [-400, -200, 0],
+          output: ["scale(1)", "scale(1)", "scale(1.2)"] }) } }),
+
+
+
+    React.createElement(animated.div, {
+      className: "navDot",
+      style: {
+        backgroundColor: x.to({
+          range: [-400, -200, 0],
+          output: ["#000", "#e0c5c0", "#000"] }),
+
+        transform: x.to({
+          range: [-400, -200, 0],
+          output: ["scale(1)", "scale(1.2)", "scale(1)"] }) } }),
+
+
+
+    React.createElement(animated.div, {
+      className: "navDot",
+      style: {
+        backgroundColor: x.to({
+          range: [-400, -200, 0],
+          output: ["#e0c5c0", "#000", "#000"] }),
+
+        transform: x.to({
+          range: [-400, -200, 0],
+          output: ["scale(1.2)", "scale(1)", "scale(1)"] }) } })))));
+
+
+
+
+
+
+
+}
+
+ReactDOM.render(
+React.createElement(App, null),
+document.getElementById("root"));
\ No newline at end of file
diff --git a/onboarding-sequence/dist/style.css b/onboarding-sequence/dist/style.css
new file mode 100644
index 0000000..be9391c
--- /dev/null
+++ b/onboarding-sequence/dist/style.css
@@ -0,0 +1,622 @@
+@import url("https://fonts.googleapis.com/css2?family=Muli&family=Sedgwick+Ave&display=swap");
+
+body {
+  margin: 0;
+}
+
+.App {
+  align-items: center;
+  background-color: #e0c5c0;
+  display: flex;
+  justify-content: center;
+  height: 100vh;
+}
+
+.container {
+  background-color: #fff;
+  border-radius: 16px;
+  height: 464px;
+  overflow: hidden;
+  position: relative;
+  width: 256px;
+}
+
+.title {
+  font-size: 20px;
+  margin-top: 28px;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.title1 {
+  font-family: "Sedgwick Ave";
+  height: 27px;
+  overflow: hidden;
+}
+
+.titleList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.titleItem {
+  height: 30px;
+}
+
+.title2 {
+  font-family: "Muli";
+}
+
+.title3 {
+  color: #999;
+  font-family: "Muli";
+  font-size: 12px;
+}
+
+.blob {
+  position: absolute;
+}
+
+.person {
+  position: absolute;
+  transform-origin: 50% 1000px;
+}
+
+.person1 {
+  transform: rotate(0);
+}
+
+.person2 {
+  transform: rotate(20deg);
+}
+
+.person3 {
+  transform: rotate(40deg);
+}
+
+.text {
+  bottom: 40px;
+  font-family: "Muli";
+  font-size: 10px;
+  line-height: 20px;
+  padding: 24px;
+  position: absolute;
+  text-align: center;
+}
+
+.navDots {
+  bottom: 32px;
+  display: flex;
+  justify-content: space-between;
+  left: 50%;
+  margin: auto;
+  position: absolute;
+  transform: translateX(-50%);
+  width: 72px;
+}
+
+.navDot {
+  background: black;
+  border-radius: 3px;
+  height: 6px;
+  width: 6px;
+}
+
+.p1-fil5 {
+  fill: #2a2d40;
+}
+
+.p1-fil7 {
+  fill: #2e2d2d;
+}
+
+.p1-fil4 {
+  fill: #ee4239;
+}
+
+.p1-fil22 {
+  fill: #212123;
+  fill-rule: nonzero;
+}
+
+.p1-fil20 {
+  fill: #222225;
+  fill-rule: nonzero;
+}
+
+.p1-fil26 {
+  fill: #28282a;
+  fill-rule: nonzero;
+}
+
+.p1-fil3 {
+  fill: #2a2d40;
+  fill-rule: nonzero;
+}
+
+.p1-fil15 {
+  fill: #2e2f30;
+  fill-rule: nonzero;
+}
+
+.p1-fil13 {
+  fill: #303b50;
+  fill-rule: nonzero;
+}
+
+.p1-fil18 {
+  fill: #34395f;
+  fill-rule: nonzero;
+}
+
+.p1-fil6 {
+  fill: #353d65;
+  fill-rule: nonzero;
+}
+
+.p1-fil12 {
+  fill: #435361;
+  fill-rule: nonzero;
+}
+
+.p1-fil39 {
+  fill: #546eb0;
+  fill-rule: nonzero;
+}
+
+.p1-fil10 {
+  fill: #6e88a4;
+  fill-rule: nonzero;
+}
+
+.p1-fil37 {
+  fill: #7a8cc5;
+  fill-rule: nonzero;
+}
+
+.p1-fil11 {
+  fill: #807e80;
+  fill-rule: nonzero;
+}
+
+.p1-fil29 {
+  fill: #897d7d;
+  fill-rule: nonzero;
+}
+
+.p1-fil27 {
+  fill: #9a5245;
+  fill-rule: nonzero;
+}
+
+.p1-fil24 {
+  fill: #a0683d;
+  fill-rule: nonzero;
+}
+
+.p1-fil21 {
+  fill: #b8d4e3;
+  fill-rule: nonzero;
+}
+
+.p1-fil31 {
+  fill: #ba3a4b;
+  fill-rule: nonzero;
+}
+
+.p1-fil35 {
+  fill: #c13538;
+  fill-rule: nonzero;
+}
+
+.p1-fil25 {
+  fill: #c77560;
+  fill-rule: nonzero;
+}
+
+.p1-fil33 {
+  fill: #d64456;
+  fill-rule: nonzero;
+}
+
+.p1-fil28 {
+  fill: #db7f7c;
+  fill-rule: nonzero;
+}
+
+.p1-fil0 {
+  fill: #e0c5c0;
+  fill-rule: nonzero;
+}
+
+.p1-fil9 {
+  fill: #e56f68;
+  fill-rule: nonzero;
+}
+
+.p1-fil32 {
+  fill: #e65261;
+  fill-rule: nonzero;
+}
+
+.p1-fil19 {
+  fill: #e76e41;
+  fill-rule: nonzero;
+}
+
+.p1-fil14 {
+  fill: #ebadab;
+  fill-rule: nonzero;
+}
+
+.p1-fil23 {
+  fill: #ed9897;
+  fill-rule: nonzero;
+}
+
+.p1-fil34 {
+  fill: #ee4239;
+  fill-rule: nonzero;
+}
+
+.p1-fil16 {
+  fill: #ef8e8a;
+  fill-rule: nonzero;
+}
+
+.p1-fil38 {
+  fill: #f09b97;
+  fill-rule: nonzero;
+}
+
+.p1-fil36 {
+  fill: #f29d99;
+  fill-rule: nonzero;
+}
+
+.p1-fil17 {
+  fill: #f5a656;
+  fill-rule: nonzero;
+}
+
+.p1-fil30 {
+  fill: #f69773;
+  fill-rule: nonzero;
+}
+
+.p1-fil2 {
+  fill: #f7d7d8;
+  fill-rule: nonzero;
+}
+
+.p1-fil8 {
+  fill: #fdeae7;
+  fill-rule: nonzero;
+}
+
+.p1-fil1 {
+  fill: #fefefe;
+  fill-rule: nonzero;
+}
+
+.p2-fil5 {
+  fill: #2a2d40;
+}
+.p2-fil7 {
+  fill: #2e2d2d;
+}
+.p2-fil4 {
+  fill: #ee4239;
+}
+.p2-fil22 {
+  fill: #212123;
+  fill-rule: nonzero;
+}
+.p2-fil20 {
+  fill: #222225;
+  fill-rule: nonzero;
+}
+.p2-fil26 {
+  fill: #28282a;
+  fill-rule: nonzero;
+}
+.p2-fil3 {
+  fill: #2a2d40;
+  fill-rule: nonzero;
+}
+.p2-fil15 {
+  fill: #2e2f30;
+  fill-rule: nonzero;
+}
+.p2-fil13 {
+  fill: #303b50;
+  fill-rule: nonzero;
+}
+.p2-fil18 {
+  fill: #34395f;
+  fill-rule: nonzero;
+}
+.p2-fil6 {
+  fill: #353d65;
+  fill-rule: nonzero;
+}
+.p2-fil12 {
+  fill: #435361;
+  fill-rule: nonzero;
+}
+.p2-fil39 {
+  fill: #546eb0;
+  fill-rule: nonzero;
+}
+.p2-fil10 {
+  fill: #6e88a4;
+  fill-rule: nonzero;
+}
+.p2-fil37 {
+  fill: #7a8cc5;
+  fill-rule: nonzero;
+}
+.p2-fil11 {
+  fill: #807e80;
+  fill-rule: nonzero;
+}
+.p2-fil29 {
+  fill: #897d7d;
+  fill-rule: nonzero;
+}
+.p2-fil27 {
+  fill: #9a5245;
+  fill-rule: nonzero;
+}
+.p2-fil24 {
+  fill: #a0683d;
+  fill-rule: nonzero;
+}
+.p2-fil21 {
+  fill: #b8d4e3;
+  fill-rule: nonzero;
+}
+.p2-fil31 {
+  fill: #ba3a4b;
+  fill-rule: nonzero;
+}
+.p2-fil35 {
+  fill: #c13538;
+  fill-rule: nonzero;
+}
+.p2-fil25 {
+  fill: #c77560;
+  fill-rule: nonzero;
+}
+.p2-fil33 {
+  fill: #d64456;
+  fill-rule: nonzero;
+}
+.p2-fil28 {
+  fill: #db7f7c;
+  fill-rule: nonzero;
+}
+.p2-fil0 {
+  fill: #e0c5c0;
+  fill-rule: nonzero;
+}
+.p2-fil9 {
+  fill: #e56f68;
+  fill-rule: nonzero;
+}
+.p2-fil32 {
+  fill: #e65261;
+  fill-rule: nonzero;
+}
+.p2-fil19 {
+  fill: #e76e41;
+  fill-rule: nonzero;
+}
+.p2-fil14 {
+  fill: #ebadab;
+  fill-rule: nonzero;
+}
+.p2-fil23 {
+  fill: #ed9897;
+  fill-rule: nonzero;
+}
+.p2-fil34 {
+  fill: #ee4239;
+  fill-rule: nonzero;
+}
+.p2-fil16 {
+  fill: #ef8e8a;
+  fill-rule: nonzero;
+}
+.p2-fil38 {
+  fill: #f09b97;
+  fill-rule: nonzero;
+}
+.p2-fil36 {
+  fill: #f29d99;
+  fill-rule: nonzero;
+}
+.p2-fil17 {
+  fill: #f5a656;
+  fill-rule: nonzero;
+}
+.p2-fil30 {
+  fill: #f69773;
+  fill-rule: nonzero;
+}
+.p2-fil2 {
+  fill: #f7d7d8;
+  fill-rule: nonzero;
+}
+.p2-fil8 {
+  fill: #fdeae7;
+  fill-rule: nonzero;
+}
+.p2-fil1 {
+  fill: #fefefe;
+  fill-rule: nonzero;
+}
+
+.p3-fil5 {
+  fill: #2a2d40;
+}
+.p3-fil7 {
+  fill: #2e2d2d;
+}
+.p3-fil4 {
+  fill: #ee4239;
+}
+.p3-fil22 {
+  fill: #212123;
+  fill-rule: nonzero;
+}
+.p3-fil20 {
+  fill: #222225;
+  fill-rule: nonzero;
+}
+.p3-fil26 {
+  fill: #28282a;
+  fill-rule: nonzero;
+}
+.p3-fil3 {
+  fill: #2a2d40;
+  fill-rule: nonzero;
+}
+.p3-fil15 {
+  fill: #2e2f30;
+  fill-rule: nonzero;
+}
+.p3-fil13 {
+  fill: #303b50;
+  fill-rule: nonzero;
+}
+.p3-fil18 {
+  fill: #34395f;
+  fill-rule: nonzero;
+}
+.p3-fil6 {
+  fill: #353d65;
+  fill-rule: nonzero;
+}
+.p3-fil12 {
+  fill: #435361;
+  fill-rule: nonzero;
+}
+.p3-fil39 {
+  fill: #546eb0;
+  fill-rule: nonzero;
+}
+.p3-fil10 {
+  fill: #6e88a4;
+  fill-rule: nonzero;
+}
+.p3-fil37 {
+  fill: #7a8cc5;
+  fill-rule: nonzero;
+}
+.p3-fil11 {
+  fill: #807e80;
+  fill-rule: nonzero;
+}
+.p3-fil29 {
+  fill: #897d7d;
+  fill-rule: nonzero;
+}
+.p3-fil27 {
+  fill: #9a5245;
+  fill-rule: nonzero;
+}
+.p3-fil24 {
+  fill: #a0683d;
+  fill-rule: nonzero;
+}
+.p3-fil21 {
+  fill: #b8d4e3;
+  fill-rule: nonzero;
+}
+.p3-fil31 {
+  fill: #ba3a4b;
+  fill-rule: nonzero;
+}
+.p3-fil35 {
+  fill: #c13538;
+  fill-rule: nonzero;
+}
+.p3-fil25 {
+  fill: #c77560;
+  fill-rule: nonzero;
+}
+.p3-fil33 {
+  fill: #d64456;
+  fill-rule: nonzero;
+}
+.p3-fil28 {
+  fill: #db7f7c;
+  fill-rule: nonzero;
+}
+.p3-fil0 {
+  fill: #e0c5c0;
+  fill-rule: nonzero;
+}
+.p3-fil9 {
+  fill: #e56f68;
+  fill-rule: nonzero;
+}
+.p3-fil32 {
+  fill: #e65261;
+  fill-rule: nonzero;
+}
+.p3-fil19 {
+  fill: #e76e41;
+  fill-rule: nonzero;
+}
+.p3-fil14 {
+  fill: #ebadab;
+  fill-rule: nonzero;
+}
+.p3-fil23 {
+  fill: #ed9897;
+  fill-rule: nonzero;
+}
+.p3-fil34 {
+  fill: #ee4239;
+  fill-rule: nonzero;
+}
+.p3-fil16 {
+  fill: #ef8e8a;
+  fill-rule: nonzero;
+}
+.p3-fil38 {
+  fill: #f09b97;
+  fill-rule: nonzero;
+}
+.p3-fil36 {
+  fill: #f29d99;
+  fill-rule: nonzero;
+}
+.p3-fil17 {
+  fill: #f5a656;
+  fill-rule: nonzero;
+}
+.p3-fil30 {
+  fill: #f69773;
+  fill-rule: nonzero;
+}
+.p3-fil2 {
+  fill: #f7d7d8;
+  fill-rule: nonzero;
+}
+.p3-fil8 {
+  fill: #fdeae7;
+  fill-rule: nonzero;
+}
+.p3-fil1 {
+  fill: #fefefe;
+  fill-rule: nonzero;
+}
\ No newline at end of file
diff --git a/onboarding-sequence/license.txt b/onboarding-sequence/license.txt
new file mode 100644
index 0000000..23bca5a
--- /dev/null
+++ b/onboarding-sequence/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Mikael Ainalem (https://codepen.io/ainalem/pen/NWxYBRq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/onboarding-sequence/src/index.html b/onboarding-sequence/src/index.html
new file mode 100644
index 0000000..98499e9
--- /dev/null
+++ b/onboarding-sequence/src/index.html
@@ -0,0 +1 @@
+<div id="root"></div>
\ No newline at end of file
diff --git a/onboarding-sequence/src/script.babel b/onboarding-sequence/src/script.babel
new file mode 100644
index 0000000..0ee9e1b
--- /dev/null
+++ b/onboarding-sequence/src/script.babel
@@ -0,0 +1,1546 @@
+const { useState, useEffect,  } = React;
+const { useSpring, animated, config } = ReactSpring;
+const { useDrag } = ReactUseGesture;
+
+function P1() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="256"
+      height="464"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      imageRendering="optimizeQuality"
+      shapeRendering="geometricPrecision"
+      textRendering="geometricPrecision"
+      version="1.1"
+      viewBox="0 0 256 464"
+      xmlSpace="preserve"
+    >
+      <defs>
+        <clipPath clipRule="nonzero">
+          <path d="M1515 6513H223V5277h533v429c0 74 60 134 134 134h625z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M3334 6513h-722v-673h722z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M2612 6513H1515v-673h83v673z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M2612 6513H1598v-673h1014z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M4626 6513H3334h625v-676c8 2 18 3 27 3h640z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M3959 6513h-56v-701c16 13 35 21 56 26v676z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M3904 6513h-570v-673h10c103 0 88-65 88-188v-375h420v429c0 43 20 81 52 106z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M3344 5840h-10v-563h98v375c0 123 15 188-88 188z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M6445 6513h-722v-673h722z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M5723 6513H4626v-673h83v673z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M5723 6513H4709v-673h1014z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M7820 5277h2305v1236h56V5277h-56z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M7737 6513H6446h624V5277h750-84v1236z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M7070 6513h-56V5277h56z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M7015 6513h-570v-673c72-3 129-62 129-134v-429h441z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M6445 5840v-563h129v429c0 72-57 131-129 134z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M10126 6513H8834V5277h1292z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M8834 6513H7737V5277h83v1236z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M8834 6513H7820V5277h1014z"></path>
+        </clipPath>
+      </defs>
+      <g display="inline">
+        <path
+          fillRule="evenodd"
+          d="M2685 4226L2573 4035 2471 4109 2589 4293z"
+          className="p1-fil9"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+          transform="matrix(.096 0 0 .096 -73 -95.969)"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M174.384 313.938l-11.136 17.183c-.672 1.152-.48 2.688.48 3.648l27.648-17.663-7.392-9.408z"
+          className="p1-fil0"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M150.097 203.061l5.184 40.223 32.543 55.966-26.976 14.496-26.303-52.318c-1.92-3.264-3.264-6.72-4.224-10.368l-6.047-23.903 25.823-24.192z"
+          className="p1-fil10"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M132.53 257.492l-.193-.672.288.576v.096zm-2.017-5.856l-6.815-19.776 1.536-.863 5.183 20.159c0 .192.096.384.096.576z"
+          className="p1-fil11"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M132.53 257.396l-.289-.576-1.824-5.184c-.096-.192-.096-.384-.096-.576l-5.183-20.16 24.67-14.687-17.375 41.183z"
+          className="p1-fil12"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          d="M1925 4446L1969 4212 1844 4219 1808 4451z"
+          className="p1-fil9"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+          transform="matrix(.096 0 0 .096 -73 -95.969)"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M100.85 328.817l-18.623 8.544c-1.248.576-1.824 2.016-1.536 3.264h32.735l-1.248-11.904-11.424.096z"
+          className="p1-fil0"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M145.969 191.926l-28.895-6.624c0 6.24-12.192 47.71-16.8 59.998a50.943 50.943 0 00-2.783 11.424l-5.952 65.662 30.815.384 4.704-64.03 15.071-33.695c10.464-19.296 3.84-33.023 3.84-33.023z"
+          className="p1-fil10"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M122.834 132.984l19.871-.384s.576-24.864-13.055-25.248c-11.904-.288-13.152 15.456-13.152 15.456l6.432 10.176z"
+          className="p1-fil13"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M130.993 109.56c.768.288 1.44.672 2.112 1.152 5.856 4.608 3.552 14.976-.864 19.968-2.4 2.784-6.143 4.32-9.695 3.36-5.184-1.344-7.296-6.816-6.72-11.904.384-3.84 2.112-7.488 4.896-10.08 2.784-2.496 6.816-3.84 10.271-2.592z"
+          className="p1-fil14"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M133.681 127.512c1.056.864 2.688 1.056 3.936.48 1.248-.576 2.112-1.824 2.304-3.264.192-1.248-.288-2.592-1.248-3.264-.96-.672-2.592-.48-3.264.576l-1.632 5.472z"
+          className="p1-fil14"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M134.737 124.056l.864 17.76a6.22 6.22 0 01-5.472 6.527c-3.743.48-7.007-2.496-6.911-6.336l.288-16.607z"
+          className="p1-fil14"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M123.218 136.632v-2.4s4.992.96 8.927-3.552c0 0-2.016 4.896-8.927 5.952z"
+          className="p1-fil15"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M136.081 125.592c.384 0 .768-.096 1.152-.384.288-.192.48-.576.48-.96 0-.576-.48-1.056-.96-1.248-.096 0-.288 0-.384.192 0 .096 0 .288.192.384.384.096.672.384.672.672a.528.528 0 01-.288.48c-.192.192-.48.288-.768.288-.192 0-.288.096-.288.288 0 .192.096.288.288.288z"
+          className="p1-fil15"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M125.042 124.824c.096.576.864.96 1.824.864.96-.096 1.632-.672 1.536-1.344-.096-.576-.864-.96-1.824-.864-.96.096-1.632.672-1.536 1.344z"
+          className="p1-fil16"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M120.626 125.592l-1.056-.768-.192-.384.288-.096c.096 0 .288-.192.48-.384s.288-.384.48-.48l.864-1.152c-.192.48-.384.864-.576 1.344a5.5 5.5 0 01-.384.672c-.192.192-.288.384-.576.576l.096-.48.768 1.056v.096h-.096z"
+          className="p1-fil15"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M119.474 127.224c.384.192.768.384 1.152.48.384.096.768 0 1.152-.096.384-.096.672-.384.96-.672l.864-.96c-.096.192-.192.384-.192.672-.096.192-.192.384-.384.576a3 3 0 01-1.056.864c-.48.192-.96.192-1.44 0s-.768-.48-1.056-.864z"
+          className="p1-fil15"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M118.034 123.864c0 .576-.768 1.056-1.632 1.056-.192 0-.384 0-.576-.096a7.767 7.767 0 010-2.112c.192 0 .384-.096.576-.096.96 0 1.632.48 1.632 1.056z"
+          className="p1-fil16"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M124.274 120.408c0 .576 0 1.152.096 1.632.096.576.48.864.864.768.48 0 .768-.48 1.056-.96.192-.48.384-1.056.48-1.632l.192-.096.096.192c0 .576-.192 1.152-.384 1.728-.288.576-.672 1.152-1.44 1.248-.384 0-.768-.096-1.056-.288-.288-.288-.384-.576-.384-.864-.096-.576-.096-1.248.096-1.824l.192-.096.096.192z"
+          className="p1-fil15"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M117.074 119.928c0 .48 0 .96.096 1.344.096.48.288.768.672.672.288 0 .576-.384.768-.768.192-.384.288-.864.384-1.344l.192-.096.096.192c0 .48-.096.96-.288 1.44-.192.48-.48 1.056-1.152 1.152-.288 0-.672-.096-.864-.384-.192-.288-.288-.48-.288-.768-.096-.48 0-1.056.096-1.536l.192-.096z"
+          className="p1-fil15"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M129.842 118.776s.48-8.16 4.991-7.392c0 0-1.728-3.648-6.623-3.84-3.648-.192-7.008 1.728-9.12 4.608-1.152 1.536-2.688 4.32-3.264 6.336 1.728 0 14.016.288 14.016.288z"
+          className="p1-fil13"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M133.585 110.616s-3.456 1.44-1.824 7.584c1.728 6.144 5.376 2.304 5.376 2.304s1.152-9.984-3.552-9.888z"
+          className="p1-fil13"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M90.867 135.384l-.96 4.991s-18.432 44.255-9.216 46.079c7.488 1.536 25.247-11.424 25.247-11.424l-6.432-10.943-10.463 7.583s5.952-25.439 7.104-28.03c0 0 3.935-2.017 4.511-3.745.192-.672.192-1.824-2.111.288-1.056.96-3.168-.288-2.208-1.92.96-1.631 3.551-1.727 4.415.48 0 0 .864.384 1.248-.288.384-.672-1.152-3.167-3.072-3.167-1.247 0-2.303.48-2.303.48s2.303-5.856 1.824-6.048c-.48-.192-1.248-.096-3.744 6.336 0 0 1.44-5.184 1.536-5.952.096-.672-.672-1.44-1.248.192-.096.192-2.016 5.184-2.016 5.184s.48-3.552.48-3.84c.096-.768-.672-.864-1.056 0-.288.672-1.44 3.648-1.44 3.648z"
+          className="p1-fil14"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M151.249 165.815s.672-17.856-15.552-28.703c0 0-7.391 2.88-12.863 2.303-3.84 9.696-6.528 17.088-12.096 58.175 0 0 11.52-.48 18.912.096 10.943.768 21.887-3.936 21.887-3.936l-.288-27.84z"
+          className="p1-fil17"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M122.834 139.415L99.41 162.743s1.824 15.263 5.952 16.895l17.088-8.928.384-31.199z"
+          className="p1-fil17"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M104.402 195.67l-8.255 1.152c-1.344.192-2.688-.768-2.88-2.208l-2.4-17.184c-.192-1.344.768-2.688 2.112-2.88l8.255-1.152c1.344-.192 2.688.768 2.88 2.208l2.4 17.184c.192 1.344-.768 2.688-2.112 2.88z"
+          className="p1-fil18"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M162.768 179.446l-39.55 1.152v39.935s-.864 6.72 8.447 6.432c9.216-.288 24.096-1.44 24.096-1.44s5.568-2.496 6.72-8.736c1.151-6.144.287-37.439.287-37.439z"
+          className="p1-fil19"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M155.185 182.134s-5.376-44.638-19.104-43.487c-13.727 1.152-7.295 47.999-7.295 47.999l4.607.288s-8.351-47.999 4.032-47.71c12.384.287 14.016 47.998 14.016 47.998z"
+          className="p1-fil19"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M134.833 186.934c-1.44-2.4-2.88-4.8-4.224-7.2-3.743 1.056-7.2 1.92-10.08 2.496-2.591.48-4.991.96-6.815 1.344l-1.728.288c-1.056.192-1.728.288-1.728.288s-5.664-.768-6.912-2.784c-.288.096-.672.576-.576 1.056.384 1.728 2.112 2.688 2.112 2.688s-8.255 1.728-7.871 2.4c.48.672 6.143-.192 6.143-.192s-7.871 1.824-7.2 2.4c.289.192.673.096 6.528-.192 0 0-5.567 1.824-4.607 2.016 1.247.384 5.087-.384 5.087-.384s-3.84 1.44-3.072 1.632c.768.192 11.328-2.112 11.328-2.112s24-3.072 23.711-3.744z"
+          className="p1-fil14"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M159.793 167.063c-9.696 5.183-9.024 4.991-16.896 7.583 0 0-6.624-13.727-10.848-22.847-1.248-2.688-.672-5.856 1.344-7.968 3.264-3.456 8.64-2.496 11.328 1.536 3.936 6.048 15.168 21.696 15.168 21.696z"
+          className="p1-fil17"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M143.857 174.358l-6.432-12.767c-.096-.192-.288-.192-.384-.096-.192.096-.192.288-.096.384l6.432 12.767c.096.192.288.192.384.096.192-.096.192-.288.096-.384z"
+          className="p1-fil20"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M159.313 167.35c-3.552 1.825-6.528 3.648-9.024 4.704v.096a117.894 117.894 0 01-19.776 7.68c.576 2.4 1.152 5.472 1.728 7.872 24.768-3.456 29.951-11.904 30.143-13.056.48-.864-.864-3.744-3.071-7.2z"
+          className="p1-fil14"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+      </g>
+    </svg>
+  );
+}
+
+function P2() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="256"
+      height="464"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      imageRendering="optimizeQuality"
+      shapeRendering="geometricPrecision"
+      textRendering="geometricPrecision"
+      version="1.1"
+      viewBox="0 0 256 464"
+      xmlSpace="preserve"
+    >
+      <defs>
+        <clipPath clipRule="nonzero">
+          <path d="M1515 6513H223V5277h533v429c0 74 60 134 134 134h625z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M3334 6513h-722v-673h722z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M2612 6513H1515v-673h83v673z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M2612 6513H1598v-673h1014z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M4626 6513H3334h625v-676c8 2 18 3 27 3h640z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M3959 6513h-56v-701c16 13 35 21 56 26v676z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M3904 6513h-570v-673h10c103 0 88-65 88-188v-375h420v429c0 43 20 81 52 106z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M3344 5840h-10v-563h98v375c0 123 15 188-88 188z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M6445 6513h-722v-673h722z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M5723 6513H4626v-673h83v673z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M5723 6513H4709v-673h1014z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M7820 5277h2305v1236h56V5277h-56z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M7737 6513H6446h624V5277h750-84v1236z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M7070 6513h-56V5277h56z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M7015 6513h-570v-673c72-3 129-62 129-134v-429h441z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M6445 5840v-563h129v429c0 72-57 131-129 134z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M10126 6513H8834V5277h1292z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M8834 6513H7737V5277h83v1236z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M8834 6513H7820V5277h1014z"></path>
+        </clipPath>
+      </defs>
+      <g display="inline">
+        <path
+          fillRule="evenodd"
+          d="M5164 4197L5039 4204 5067 4451 5184 4446z"
+          className="p2-fil21"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+          transform="matrix(.096 0 0 .096 -369.781 -95.97)"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M116.925 328.818L98.3 337.362c-1.248.576-1.824 2.016-1.536 3.264H129.5l-1.248-11.904-11.423.096z"
+          className="p2-fil22"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          d="M5399 4197L5274 4204 5302 4451 5419 4446z"
+          className="p2-fil21"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+          transform="matrix(.096 0 0 .096 -369.781 -95.97)"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M139.484 328.818l-18.624 8.544c-1.247.576-1.823 2.016-1.535 3.264h32.735l-1.248-11.904-11.424.096z"
+          className="p2-fil22"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          d="M5378 3228L4958 3238 5024 4371 5451 4371z"
+          className="p2-fil23"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+          transform="matrix(.096 0 0 .096 -369.781 -95.97)"
+        ></path>
+        <path
+          fillRule="evenodd"
+          d="M5078 3236L5077 3238 5154 3434 5216 4372 5218 4373 5219 4371 5157 3433 5080 3237z"
+          className="p2-fil24"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+          transform="matrix(.096 0 0 .096 -369.781 -95.97)"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M128.348 116.473a9.07 9.07 0 00-2.304 1.248c-6.431 4.991-3.84 16.223.864 21.695 2.592 2.976 6.72 4.704 10.56 3.744 5.568-1.44 7.872-7.392 7.392-12.96-.384-4.128-2.208-8.16-5.376-10.944-3.072-2.687-7.488-4.223-11.232-2.783z"
+          className="p2-fil25"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M124.316 132.216l-.864 19.296c-.192 3.551 2.4 6.72 5.952 7.103a6.787 6.787 0 007.584-6.911l-.384-18.048-12.288-1.536z"
+          className="p2-fil25"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M136.796 145.944v-2.688s-5.472 1.056-9.792-3.84c0 0 2.208 5.28 9.792 6.528z"
+          className="p2-fil26"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M134.396 131.256h-.096c-.288-.288-.864.192-.48.48.576.576 1.632-.192.96-.864-.576-.576-1.632.288-1.056.96.576.672 1.632-.384.864-.864-.768-.576-1.344.672-.48 1.056.384.192.672-.48.192-.672z"
+          className="p2-fil13"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M135.932 128.184c-1.44-.096-2.88 0-4.32.192-.672.096-.48 1.056.192.96 1.344-.192 2.688-.288 4.128-.192.672 0 .672-.96.096-.96z"
+          className="p2-fil13"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M143.612 129.624c-.288-.288-.864.192-.48.48.576.576 1.632-.192.96-.864-.576-.576-1.632.288-1.056.96.576.672 1.632-.384.864-.864-.768-.576-1.344.672-.48 1.056.384.192.672-.48.192-.672z"
+          className="p2-fil13"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M140.06 127.416c1.152-.48 2.496-.768 3.744-.96.576-.096.768.864.192.96-1.248.192-2.4.48-3.552.96-.576.192-.96-.672-.384-.864z"
+          className="p2-fil13"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M126.908 120.984c1.92-.672 7.392-1.92 14.592.384l-.864-8.735s-12.48-1.44-22.271 4.224l2.112 12.095s1.055.576 2.207.288c.48.48 1.056.672 1.824.384 1.248-.384 1.536-1.728 1.728-2.88.192-1.92.48-3.84.672-5.664z"
+          className="p2-fil13"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M122.684 130.008c2.112.096 3.84.48 4.224-1.344.384-1.632.288-9.216 3.936-7.584 2.688 1.152 4.704 1.056 8.16.096 1.44-.384 2.592.384 2.592.192 0 0-2.88-8.16-11.52-7.487-2.688.192-4.896 2.112-6.048 4.608-1.44 3.071-1.536 6.815-1.44 10.08l.096 1.535z"
+          className="p2-fil13"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M139.484 133.752l.768-1.152.096.576c-.384-.288-.576-.576-.768-.864-.192-.288-.288-.672-.384-.96.192.288.48.576.672.768.288.192.576.384.768.384l.48.096-.288.576-1.152.864h-.192v-.192z"
+          className="p2-fil27"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M140.828 135.672c-.288.384-.672.768-1.152.96a2.12 2.12 0 01-1.536 0c-.48-.192-.864-.576-1.152-.96-.096-.192-.288-.384-.384-.672-.096-.192-.192-.48-.192-.672l.96.96c.384.288.672.576 1.056.672.384.192.768.192 1.152.096a6.664 6.664 0 001.248-.48z"
+          className="p2-fil28"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M140.828 135.672c-.192.48-.672.768-1.152.96-.48.192-1.056.192-1.632 0-.48-.192-.864-.576-1.152-.96-.096-.192-.288-.384-.384-.672-.096-.288-.192-.48-.192-.672.384.288.672.672 1.056.96.384.288.672.576 1.056.672.384.192.768.192 1.152.192.384-.096.864-.192 1.248-.384z"
+          className="p2-fil27"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M131.132 131.256h-.192a3.442 3.442 0 003.456 3.456 3.442 3.442 0 003.456-3.456 3.442 3.442 0 00-3.456-3.456 3.441 3.441 0 00-3.456 3.456h.384c0-1.632 1.344-3.072 3.072-3.072 1.632 0 3.072 1.344 3.072 3.072 0 1.632-1.344 3.072-3.072 3.072s-3.072-1.344-3.072-3.072z"
+          className="p2-fil1"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M139.868 129.432h-.192a3.442 3.442 0 003.456 3.456 3.442 3.442 0 003.456-3.456 3.442 3.442 0 00-3.456-3.456 3.442 3.442 0 00-3.456 3.456h.384c0-1.632 1.344-3.072 3.072-3.072 1.632 0 3.072 1.344 3.072 3.072 0 1.632-1.344 3.072-3.072 3.072s-3.072-1.344-3.072-3.072z"
+          className="p2-fil1"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M125.372 135.96c-1.152.864-2.975 1.152-4.224.48-1.343-.576-2.303-2.016-2.495-3.552-.192-1.344.288-2.88 1.344-3.552 1.056-.672 2.88-.48 3.551.672z"
+          className="p2-fil25"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M122.3 133.272c-.287 0-.575-.096-.768-.288-.191-.192-.287-.288-.287-.48 0-.288.192-.576.671-.672a.528.528 0 00.288-.48.528.528 0 00-.48-.288c-.671.192-1.151.672-1.151 1.344 0 .48.192.864.575 1.056.384.288.768.384 1.249.384a.413.413 0 00.383-.384.413.413 0 00-.383-.384z"
+          className="p2-fil27"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          d="M5140 2352L5139 2356 5218 2369 5219 2365z"
+          className="p2-fil1"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+          transform="matrix(.096 0 0 .096 -369.781 -95.97)"
+        ></path>
+        <path
+          fillRule="evenodd"
+          d="M5280 2348L5281 2352 5309 2348 5309 2344z"
+          className="p2-fil1"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+          transform="matrix(.096 0 0 .096 -369.781 -95.97)"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M122.108 150.84l-.48-2.784s7.488 0 8.448 3.936c0 0 2.016-3.648 7.776-4.608v4.224l-8.16 2.495-7.68-3.36z"
+          className="p2-fil29"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M153.308 156.695l19.583 5.088s16.224-18.047 16.991-18.623c.769-.672 10.752 2.496 10.752 2.496l-11.52 21.407c-2.783 7.008-6.911 10.944-10.847 11.136l-32.16-6.432 7.297-15.072z"
+          className="p2-fil25"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M189.307 144.024s2.207-4.512 2.592-5.184c.767-1.728 1.92-6.048 1.92-6.048s1.343-.288 1.247 2.688c-.096 2.976.48 2.112.48 2.112s6.24-7.584 7.68-7.008c.576.192-.192 2.016-1.248 2.976s-2.112 2.496-2.112 2.496 5.856-5.28 7.2-4.416c0 0 .672.48-1.248 2.112-2.592 2.112-4.32 4.128-4.32 4.128s5.76-4.128 6.432-3.648c1.056.768-4.8 4.896-5.76 6.432 0 0 4.32-3.36 4.512-2.304.096 1.056-5.28 4.8-7.776 10.368z"
+          className="p2-fil25"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M193.914 138.36s.48.096 1.056.672c.576.576 1.248 1.536 1.248 2.784l-.384-.096c.864-.96 1.92-1.44 2.688-1.536.768-.096 1.248 0 1.248 0 0 .096-.48.096-1.248.288a5.071 5.071 0 00-2.496 1.536l-.384.384v-.48a3.823 3.823 0 00-1.056-2.592c-.48-.576-.96-.768-.864-.864z"
+          className="p2-fil30"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M103.101 155.927l-19.583 5.088s-16.224-18.047-16.992-18.623c-.768-.672-10.752 2.496-10.752 2.496l11.52 21.407c2.784 7.008 6.912 10.944 10.848 11.136l32.159-6.432-7.296-15.072z"
+          className="p2-fil25"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M67.102 143.16s-2.208-4.512-2.592-5.184c-.768-1.728-1.92-6.048-1.92-6.048s-1.344-.288-1.248 2.688c.096 2.976-.48 2.112-.48 2.112s-6.24-7.584-7.68-7.008c-.576.192.192 2.016 1.248 2.976s2.112 2.496 2.112 2.496-5.855-5.28-7.2-4.416c0 0-.671.48 1.249 2.112 2.591 2.112 4.32 4.128 4.32 4.128s-5.76-4.128-6.432-3.648c-1.056.768 4.8 4.896 5.76 6.432 0 0-4.32-3.36-4.512-2.304-.096 1.056 5.28 4.8 7.775 10.272l9.6-4.704z"
+          className="p2-fil25"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M62.494 137.496c0 .096-.384.288-.864.864-.48.576-1.056 1.536-1.056 2.592v.48l-.384-.384a5.07 5.07 0 00-2.496-1.536c-.768-.192-1.248-.192-1.248-.288 0 0 .48-.192 1.248 0 .768.096 1.92.576 2.688 1.536l-.384.096c0-1.248.672-2.304 1.248-2.784.576-.576 1.056-.672 1.056-.672z"
+          className="p2-fil30"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M141.02 151.512c-1.728-.672-3.552-1.056-5.76-1.056-4.608 1.44-9.216 1.44-13.823 0-1.92.192-6.336.48-12.576 2.304l-25.343 8.255-3.84 17.28 28.127-4.704s-2.592 37.15-1.248 43.295l40.99-1.056-1.823-22.56.672-19.68 29.95 4.705-4.127-16.608-31.103-10.08z"
+          className="p2-fil29"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M53.95 146.04l-7.2-4.128c-1.247-.672-1.631-2.304-.96-3.456l8.64-14.976c.672-1.248 2.208-1.632 3.456-.96l7.2 4.128c1.248.672 1.632 2.304.96 3.456l-8.64 14.976c-.672 1.248-2.304 1.632-3.456.96z"
+          className="p2-fil18"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M171.643 268.244v.48h24.095v-36.383c0-2.976-2.4-5.376-5.375-5.376h-13.92a5.367 5.367 0 00-5.376 5.376v36.383h.48v-.48h.48v-35.903a4.404 4.404 0 014.416-4.416h13.92c2.4 0 4.415 2.016 4.415 4.416v35.423h-23.23v.48h.48-.48z"
+          className="p2-fil22"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M178.555 229.461h10.272c1.152 0 2.016-.96 2.016-2.016 0-1.152-.96-2.016-2.016-2.016h-10.272c-1.152 0-2.016.96-2.016 2.016 0 1.152.96 2.016 2.016 2.016z"
+          className="p2-fil31"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M165.403 340.242h29.951a6.678 6.678 0 006.72-6.72v-68.926a6.678 6.678 0 00-6.72-6.72h-29.95a6.678 6.678 0 00-6.72 6.72v68.926a6.678 6.678 0 006.72 6.72z"
+          className="p2-fil31"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M179.13 340.242h29.952a6.678 6.678 0 006.72-6.72v-68.926a6.678 6.678 0 00-6.72-6.72h-29.951a6.678 6.678 0 00-6.72 6.72v68.926a6.678 6.678 0 006.72 6.72z"
+          className="p2-fil32"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M205.05 326.899c.864 0 1.632-.768 1.632-1.632v-52.99c0-.865-.768-1.633-1.632-1.633-.864 0-1.632.768-1.632 1.632v52.99c0 .865.768 1.632 1.632 1.632z"
+          className="p2-fil33"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M195.642 326.899c.864 0 1.632-.768 1.632-1.632v-52.99c0-.865-.768-1.633-1.632-1.633-.864 0-1.632.768-1.632 1.632v52.99c0 .865.768 1.632 1.632 1.632z"
+          className="p2-fil33"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M186.33 326.899c.865 0 1.633-.768 1.633-1.632v-52.99c0-.865-.768-1.633-1.632-1.633-.864 0-1.632.768-1.632 1.632v52.99c0 .865.768 1.632 1.632 1.632z"
+          className="p2-fil33"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+      </g>
+    </svg>
+  );
+}
+
+function P3() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="256"
+      height="464"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      imageRendering="optimizeQuality"
+      shapeRendering="geometricPrecision"
+      textRendering="geometricPrecision"
+      version="1.1"
+      viewBox="0 0 256 464"
+      xmlSpace="preserve"
+    >
+      <defs>
+        <clipPath clipRule="nonzero">
+          <path d="M1515 6513H223V5277h533v429c0 74 60 134 134 134h625z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M3334 6513h-722v-673h722z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M2612 6513H1515v-673h83v673z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M2612 6513H1598v-673h1014z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M4626 6513H3334h625v-676c8 2 18 3 27 3h640z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M3959 6513h-56v-701c16 13 35 21 56 26v676z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M3904 6513h-570v-673h10c103 0 88-65 88-188v-375h420v429c0 43 20 81 52 106z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M3344 5840h-10v-563h98v375c0 123 15 188-88 188z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M6445 6513h-722v-673h722z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M5723 6513H4626v-673h83v673z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M5723 6513H4709v-673h1014z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M7820 5277h2305v1236h56V5277h-56z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M7737 6513H6446h624V5277h750-84v1236z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M7070 6513h-56V5277h56z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M7015 6513h-570v-673c72-3 129-62 129-134v-429h441z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M6445 5840v-563h129v429c0 72-57 131-129 134z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M10126 6513H8834V5277h1292z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M8834 6513H7737V5277h83v1236z"></path>
+        </clipPath>
+        <clipPath clipRule="nonzero">
+          <path d="M8834 6513H7820V5277h1014z"></path>
+        </clipPath>
+      </defs>
+      <g display="inline">
+        <path
+          fillRule="evenodd"
+          d="M8203 4182L8328 4189 8300 4436 8183 4431z"
+          className="p3-fil21"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+          transform="matrix(.096 0 0 .096 -667.373 -95.97)"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M129.116 327.378l18.624 8.544c1.248.576 1.824 2.016 1.536 3.264H116.54l1.248-11.903 11.423.095z"
+          className="p3-fil22"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          d="M7968 4182L8093 4189 8065 4436 7948 4431z"
+          className="p3-fil21"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+          transform="matrix(.096 0 0 .096 -667.373 -95.97)"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M106.557 327.378l18.623 8.544c1.248.576 1.824 2.016 1.536 3.264H93.981l1.248-11.903 11.424.095z"
+          className="p3-fil22"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          d="M7989 3176L8417 3186 8350 4342 7915 4342z"
+          className="p3-fil34"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+          transform="matrix(.096 0 0 .096 -667.373 -95.97)"
+        ></path>
+        <path
+          fillRule="evenodd"
+          d="M8219 3386L8297 3187 8291 3184 8212 3385 8149 4342 8156 4343z"
+          className="p3-fil35"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+          transform="matrix(.096 0 0 .096 -667.373 -95.97)"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M113.469 137.496s1.152 4.032 3.84 5.856c0-.192.096-7.392.096-7.392l-4.032 1.536z"
+          className="p3-fil22"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M121.148 120.696c-.768.192-1.535.576-2.207 1.056-6.432 4.32-4.8 15.072-.672 20.544 2.304 3.072 6.047 4.896 9.695 4.224 5.376-.96 7.968-6.432 7.872-11.712-.096-3.936-1.536-7.872-4.32-10.656-2.688-2.784-6.72-4.512-10.368-3.456z"
+          className="p3-fil36"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M117.02 138.936c-1.151.768-2.88.864-4.031.192-1.248-.672-2.016-2.112-2.112-3.552-.096-1.344.48-2.688 1.536-3.264 1.056-.576 2.688-.288 3.36.864z"
+          className="p3-fil36"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M116.157 135.384l-2.208 18.24c-.48 3.36 1.824 6.527 5.088 7.103 3.84.768 7.487-2.112 7.68-5.952l.96-17.087z"
+          className="p3-fil36"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M127.004 149.208l.192-2.496s-5.28.672-8.927-4.32c0 0 1.727 5.184 8.735 6.816z"
+          className="p3-fil26"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M125.852 135.192c-.288-.288-.768.096-.48.384.576.576 1.536-.096.96-.768-.576-.672-1.536.192-1.056.768.48.672 1.536-.192.864-.768-.672-.576-1.344.576-.576.96.384.192.672-.384.288-.576z"
+          className="p3-fil13"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M127.484 132.312c-1.344-.192-2.784-.192-4.128-.096-.576.096-.48.96.096.96 1.248-.096 2.592-.096 3.936.096.576.096.768-.864.096-.96z"
+          className="p3-fil13"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M134.012 134.232c-.288-.288-.768.096-.48.384.576.576 1.536-.096.96-.768-.576-.672-1.536.192-1.056.768.48.672 1.536-.192.864-.768-.672-.576-1.344.576-.576.96.384.192.672-.384.288-.576z"
+          className="p3-fil13"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M130.46 137.88l.864-1.056.096.48c-.384-.288-.576-.576-.672-.864a1.852 1.852 0 01-.288-.96c.288.576.768 1.152 1.248 1.248l.384.096-.288.384-1.152.672h-.192v-.096z"
+          className="p3-fil28"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M130.46 137.88l.864-1.056.096.48c-.384-.288-.576-.576-.672-.864a1.852 1.852 0 01-.288-.96c.288.576.768 1.152 1.248 1.248l.384.096-.288.384-1.152.672h-.192v-.096z"
+          className="p3-fil28"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M131.42 131.928c1.152-.384 2.4-.576 3.648-.672.576 0 .672.864.096.864a21.642 21.642 0 00-3.456.576c-.48.192-.864-.672-.384-.864z"
+          className="p3-fil13"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M114.717 136.248c-.288 0-.576-.096-.768-.288-.192-.192-.288-.384-.288-.48 0-.288.288-.576.672-.672.192 0 .288-.192.192-.384 0-.192-.192-.288-.384-.192a1.43 1.43 0 00-1.152 1.152v.096c0 .384.192.672.48.96.288.288.672.384 1.056.384.192 0 .288-.096.288-.288 0-.192-.096-.288-.288-.288z"
+          className="p3-fil28"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M125.756 147c-3.072-.384-9.311-2.496-10.175-12.672l1.824-1.536s4.991 9.696 18.143 4.8c0 0-.672 7.68-6.816 9.216-.96.288-2.016.288-2.976.192z"
+          className="p3-fil22"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M128.636 140.184l2.784-.096s-1.152 2.4-2.784.096z"
+          className="p3-fil1"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M119.325 125.976s7.007-5.568 13.151-.768c0 0-4.512-7.487-11.615-6.047-7.2 1.44-8.832 8.735-8.544 13.247 0 0 2.304-.768 3.36.864v1.152s1.824 1.536 1.824 1.344c0-.192 4.8-6.72 1.92-9.792z"
+          className="p3-fil22"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M119.325 125.976s8.16 2.976 14.303.96c0 0-2.016-6.144-10.464-5.28-8.447.864-3.84 4.32-3.84 4.32z"
+          className="p3-fil22"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M169.243 165.911l-8.256-1.248c-1.344-.192-2.304-1.536-2.112-2.88l2.592-17.183c.192-1.344 1.536-2.304 2.88-2.112l8.256 1.248c1.344.192 2.304 1.536 2.112 2.88l-2.592 17.183c-.192 1.344-1.536 2.304-2.88 2.112z"
+          className="p3-fil18"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M136.796 163.703c1.824 5.088 3.552 11.52 4.128 18.432 1.344 16.031-.48 28.99-.48 28.99l-42.623 1.249 2.496-47.23c13.824-1.057 25.151-2.017 36.48-1.537z"
+          className="p3-fil37"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M106.269 167.351s4.128-16.223 4.416-16.415c0 0 1.536-.48 3.36-.48.576 1.056 2.016 2.496 6.24 2.592 4.895.192 5.951-1.344 6.623-2.112 5.28 1.824 9.408 3.263 9.984 10.175.288 3.744-.096 2.208 1.344 19.2l.672 8.447-36.479-.192 3.744-21.215z"
+          className="p3-fil37"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M166.94 201.43c-15.168 5.472-29.28-17.567-29.28-17.567l13.536-11.328 11.135 14.496 2.88-27.648 8.16-.672s2.88 39.36-6.432 42.72z"
+          className="p3-fil38"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M172.891 167.64c-2.304 0-4.704 0-7.008-.097v-1.056l-.288-2.784s-1.92-5.472-4.32-6.624c.096-.384.576-.864 1.152-.864 2.016.192 3.264 2.016 3.264 2.016s.96-9.503 1.728-9.12c.864.385.864 5.376.864 5.376s.768-7.583 1.44-6.911c.288.288 0 0 .384 6.623 0 0 1.44-5.855 1.92-4.8.48 1.345.192 5.76.192 5.76s1.152-4.511 1.536-3.647c.288.864-.96 12.96-.96 12.96s0 1.247.096 2.975z"
+          className="p3-fil38"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M126.908 150.936s9.6-1.44 31.103 28.223l-18.623 13.727-12.384-41.95z"
+          className="p3-fil37"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M140.06 173.783l.768 17.663c0 .192.192.288.384.288s.288-.192.288-.384l-.768-17.663c0-.192-.192-.288-.384-.288s-.288.192-.288.384z"
+          className="p3-fil39"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M159.067 250.485h-42.43c-1.728 0-3.072-1.344-3.072-3.072v-30.911c0-1.728 1.344-3.072 3.072-3.072h42.43a3.033 3.033 0 013.072 3.072v30.91a3.033 3.033 0 01-3.072 3.073z"
+          className="p3-fil18"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M146.492 216.214v-.672h-14.976v-3.264c0-2.016.768-3.744 2.112-5.088a7.255 7.255 0 015.088-2.112c2.016 0 3.744.768 5.088 2.112 1.248 1.344 2.112 3.072 2.112 5.088v3.936h.672v-.672.672h.672v-3.936c0-4.704-3.84-8.448-8.448-8.448-4.704 0-8.448 3.84-8.448 8.448v4.608h16.992v-.672h-.672z"
+          className="p3-fil18"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M137.18 199.798c-.768 0-1.44.096-2.016.192l-32.83-2.784.191-9.023s-6.624-.96-13.344-.288c0 0-4.607 17.759 4.608 20.735 7.584 2.4 35.807-.096 40.895-.576.768.192 1.728.384 2.592.384 3.648 0 6.624-1.92 6.624-4.32 0-2.4-2.976-4.32-6.624-4.32z"
+          className="p3-fil38"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M113.277 150.648s-16.512-2.112-25.824 37.535c0 0 7.008.192 15.936.383l9.792-37.918z"
+          className="p3-fil37"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0.096"
+          d="M102.813 188.566l.48-11.807c0-.192-.096-.384-.288-.384-.192 0-.384.096-.384.288l-.48 11.808c0 .191.096.383.288.383.192 0 .384-.096.384-.288z"
+          className="p3-fil39"
+          clipRule="evenodd"
+          imageRendering="optimizeQuality"
+          opacity="1"
+          shapeRendering="geometricPrecision"
+          textRendering="geometricPrecision"
+        ></path>
+      </g>
+    </svg>
+  );
+}
+
+function App() {
+  const [{ x }, set] = useSpring(() => ({
+    x: 0,
+  }));
+  const bind = useDrag(
+    ({ movement: [x], velocity, down, direction: [dx], tap }) => {
+      if (!down) {
+        if (x > -100) {
+          set({ x: 0 });
+        } else if (x < -300) {
+          set({ x: -400 });
+        } else {
+          set({ x: -200 });
+        }
+        return;
+      }
+      set({ x });
+    },
+    {
+      initial: () => [x.get(), 0],
+      bounds: { left: -400, right: 0, top: 0, bottom: 476 },
+      rubberband: true,
+    }
+  );
+  return (
+    <div className="App">
+      <div className="container" {...bind()}>
+        <div className="title">
+          <div className="title1">
+            <animated.ul
+              className="titleList"
+              style={{
+                y: x.to({
+                  range: [-400, -200, 0],
+                  output: [-60, -30, 0],
+                }),
+              }}
+            >
+              <li className="titleItem">Outstanding</li>
+              <li className="titleItem">Extraordinary</li>
+              <li className="titleItem">Superb</li>
+            </animated.ul>
+          </div>
+          <div className="title2">REAL ESTATE</div>
+          <div className="title3">AGENTS</div>
+        </div>
+        <svg className="blob" width="256" height="464" viewBox="0 0 256 464">
+          <animated.path
+            d={x.to({
+              range: [-400, -200, 0],
+              output: [
+                "M 157.81292,131.16918 C 128.33979,127.45582 59.004493,121.76045 53.287478,168.06051 47.570462,214.36057 86.454799,213.14326 77.881699,234.66986 69.308599,256.19646 59.042495,268.13837 67.634107,288.98209 76.225718,309.82581 103.27857,320.05328 138.34249,312.55156 173.40641,305.04984 204.93111,298.87002 208.02612,279.75926 211.12113,260.6485 189.48716,257.88808 188.5557,229.54606 187.62424,201.20404 212.01456,174.45091 200.8528,155.7634 189.69104,137.07589 187.28605,134.88254 157.81292,131.16918 Z",
+                "M 157.81292,131.16918 C 128.33979,127.45582 48.756902,138.1566 53.287478,168.06051 57.818054,197.96442 75.182448,197.77187 73.782662,224.42227 72.382877,251.07266 70.314846,257.89078 72.757903,278.7345 75.20096,299.57822 88.114636,303.32873 113.94876,307.60312 139.78288,311.87751 159.84171,314.24141 176.25858,295.13065 192.67546,276.01989 203.83379,256.86332 190.60522,228.5213 177.37665,200.17928 205.866,189.8223 211.10039,171.13479 216.33478,152.44728 187.28605,134.88254 157.81292,131.16918 Z",
+                "M 157.81292,131.16918 C 128.33979,127.45582 86.672992,124.83473 71.733144,166.01099 56.793295,207.18725 69.033893,203.92043 80.955976,230.57083 92.87806,257.22123 55.968217,259.9403 59.436033,279.75926 62.90385,299.57822 94.985717,299.83924 132.0922,306.16316 169.19868,312.48708 186.48544,320.38997 198.80328,288.98209 211.12113,257.57422 199.73475,245.59097 195.72902,217.24895 191.72328,188.90693 209.96504,178.54995 215.19943,159.86244 220.43382,141.17493 187.28605,134.88254 157.81292,131.16918 Z",
+              ],
+            })}
+            style={{
+              fill: x.to({
+                range: [-400, -200, 0],
+                output: ["#fdeae7", "#d3eacf", "#eae7fd"],
+              }),
+            }}
+          />
+        </svg>
+        <animated.div
+          className="person person1"
+          style={{ transform: x.to((x) => `rotate(${x / 10}deg)`) }}
+        >
+          <P1 />
+        </animated.div>
+        <animated.div
+          className="person person2"
+          style={{ transform: x.to((x) => `rotate(${x / 10 + 20}deg)`) }}
+        >
+          <P2 />
+        </animated.div>
+        <animated.div
+          className="person person3"
+          style={{ transform: x.to((x) => `rotate(${x / 10 + 40}deg)`) }}
+        >
+          <P3 />
+        </animated.div>
+        <div className="text">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium
+          facere
+        </div>
+        <div className="navDots">
+          <animated.div
+            className="navDot"
+            style={{
+              backgroundColor: x.to({
+                range: [-400, -200, 0],
+                output: ["#000", "#000", "#e0c5c0"],
+              }),
+              transform: x.to({
+                range: [-400, -200, 0],
+                output: ["scale(1)", "scale(1)", "scale(1.2)"],
+              }),
+            }}
+          ></animated.div>
+          <animated.div
+            className="navDot"
+            style={{
+              backgroundColor: x.to({
+                range: [-400, -200, 0],
+                output: ["#000", "#e0c5c0", "#000"],
+              }),
+              transform: x.to({
+                range: [-400, -200, 0],
+                output: ["scale(1)", "scale(1.2)", "scale(1)"],
+              }),
+            }}
+          ></animated.div>
+          <animated.div
+            className="navDot"
+            style={{
+              backgroundColor: x.to({
+                range: [-400, -200, 0],
+                output: ["#e0c5c0", "#000", "#000"],
+              }),
+              transform: x.to({
+                range: [-400, -200, 0],
+                output: ["scale(1.2)", "scale(1)", "scale(1)"],
+              }),
+            }}
+          ></animated.div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+ReactDOM.render(
+  <App />,
+  document.getElementById("root")
+);
\ No newline at end of file
diff --git a/onboarding-sequence/src/style.css b/onboarding-sequence/src/style.css
new file mode 100644
index 0000000..5b0eb55
--- /dev/null
+++ b/onboarding-sequence/src/style.css
@@ -0,0 +1,622 @@
+@import url("https://fonts.googleapis.com/css2?family=Muli&family=Sedgwick+Ave&display=swap");
+
+body {
+  margin: 0;
+}
+
+.App {
+  align-items: center;
+  background-color: #e0c5c0;
+  display: flex;
+  justify-content: center;
+  height: 100vh;
+}
+
+.container {
+  background-color: #fff;
+  border-radius: 16px;
+  height: 464px;
+  overflow: hidden;
+  position: relative;
+  width: 256px;
+}
+
+.title {
+  font-size: 20px;
+  margin-top: 28px;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.title1 {
+  font-family: "Sedgwick Ave";
+  height: 27px;
+  overflow: hidden;
+}
+
+.titleList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.titleItem {
+  height: 30px;
+}
+
+.title2 {
+  font-family: "Muli";
+}
+
+.title3 {
+  color: #999;
+  font-family: "Muli";
+  font-size: 12px;
+}
+
+.blob {
+  position: absolute;
+}
+
+.person {
+  position: absolute;
+  transform-origin: 50% 1000px;
+}
+
+.person1 {
+  transform: rotate(0);
+}
+
+.person2 {
+  transform: rotate(20deg);
+}
+
+.person3 {
+  transform: rotate(40deg);
+}
+
+.text {
+  bottom: 40px;
+  font-family: "Muli";
+  font-size: 10px;
+  line-height: 20px;
+  padding: 24px;
+  position: absolute;
+  text-align: center;
+}
+
+.navDots {
+  bottom: 32px;
+  display: flex;
+  justify-content: space-between;
+  left: 50%;
+  margin: auto;
+  position: absolute;
+  transform: translateX(-50%);
+  width: 72px;
+}
+
+.navDot {
+  background: black;
+  border-radius: 3px;
+  height: 6px;
+  width: 6px;
+}
+
+.p1-fil5 {
+  fill: #2a2d40;
+}
+
+.p1-fil7 {
+  fill: #2e2d2d;
+}
+
+.p1-fil4 {
+  fill: #ee4239;
+}
+
+.p1-fil22 {
+  fill: #212123;
+  fill-rule: nonzero;
+}
+
+.p1-fil20 {
+  fill: #222225;
+  fill-rule: nonzero;
+}
+
+.p1-fil26 {
+  fill: #28282a;
+  fill-rule: nonzero;
+}
+
+.p1-fil3 {
+  fill: #2a2d40;
+  fill-rule: nonzero;
+}
+
+.p1-fil15 {
+  fill: #2e2f30;
+  fill-rule: nonzero;
+}
+
+.p1-fil13 {
+  fill: #303b50;
+  fill-rule: nonzero;
+}
+
+.p1-fil18 {
+  fill: #34395f;
+  fill-rule: nonzero;
+}
+
+.p1-fil6 {
+  fill: #353d65;
+  fill-rule: nonzero;
+}
+
+.p1-fil12 {
+  fill: #435361;
+  fill-rule: nonzero;
+}
+
+.p1-fil39 {
+  fill: #546eb0;
+  fill-rule: nonzero;
+}
+
+.p1-fil10 {
+  fill: #6e88a4;
+  fill-rule: nonzero;
+}
+
+.p1-fil37 {
+  fill: #7a8cc5;
+  fill-rule: nonzero;
+}
+
+.p1-fil11 {
+  fill: #807e80;
+  fill-rule: nonzero;
+}
+
+.p1-fil29 {
+  fill: #897d7d;
+  fill-rule: nonzero;
+}
+
+.p1-fil27 {
+  fill: #9a5245;
+  fill-rule: nonzero;
+}
+
+.p1-fil24 {
+  fill: #a0683d;
+  fill-rule: nonzero;
+}
+
+.p1-fil21 {
+  fill: #b8d4e3;
+  fill-rule: nonzero;
+}
+
+.p1-fil31 {
+  fill: #ba3a4b;
+  fill-rule: nonzero;
+}
+
+.p1-fil35 {
+  fill: #c13538;
+  fill-rule: nonzero;
+}
+
+.p1-fil25 {
+  fill: #c77560;
+  fill-rule: nonzero;
+}
+
+.p1-fil33 {
+  fill: #d64456;
+  fill-rule: nonzero;
+}
+
+.p1-fil28 {
+  fill: #db7f7c;
+  fill-rule: nonzero;
+}
+
+.p1-fil0 {
+  fill: #e0c5c0;
+  fill-rule: nonzero;
+}
+
+.p1-fil9 {
+  fill: #e56f68;
+  fill-rule: nonzero;
+}
+
+.p1-fil32 {
+  fill: #e65261;
+  fill-rule: nonzero;
+}
+
+.p1-fil19 {
+  fill: #e76e41;
+  fill-rule: nonzero;
+}
+
+.p1-fil14 {
+  fill: #ebadab;
+  fill-rule: nonzero;
+}
+
+.p1-fil23 {
+  fill: #ed9897;
+  fill-rule: nonzero;
+}
+
+.p1-fil34 {
+  fill: #ee4239;
+  fill-rule: nonzero;
+}
+
+.p1-fil16 {
+  fill: #ef8e8a;
+  fill-rule: nonzero;
+}
+
+.p1-fil38 {
+  fill: #f09b97;
+  fill-rule: nonzero;
+}
+
+.p1-fil36 {
+  fill: #f29d99;
+  fill-rule: nonzero;
+}
+
+.p1-fil17 {
+  fill: #f5a656;
+  fill-rule: nonzero;
+}
+
+.p1-fil30 {
+  fill: #f69773;
+  fill-rule: nonzero;
+}
+
+.p1-fil2 {
+  fill: #f7d7d8;
+  fill-rule: nonzero;
+}
+
+.p1-fil8 {
+  fill: #fdeae7;
+  fill-rule: nonzero;
+}
+
+.p1-fil1 {
+  fill: #fefefe;
+  fill-rule: nonzero;
+}
+
+.p2-fil5 {
+  fill: #2a2d40;
+}
+.p2-fil7 {
+  fill: #2e2d2d;
+}
+.p2-fil4 {
+  fill: #ee4239;
+}
+.p2-fil22 {
+  fill: #212123;
+  fill-rule: nonzero;
+}
+.p2-fil20 {
+  fill: #222225;
+  fill-rule: nonzero;
+}
+.p2-fil26 {
+  fill: #28282a;
+  fill-rule: nonzero;
+}
+.p2-fil3 {
+  fill: #2a2d40;
+  fill-rule: nonzero;
+}
+.p2-fil15 {
+  fill: #2e2f30;
+  fill-rule: nonzero;
+}
+.p2-fil13 {
+  fill: #303b50;
+  fill-rule: nonzero;
+}
+.p2-fil18 {
+  fill: #34395f;
+  fill-rule: nonzero;
+}
+.p2-fil6 {
+  fill: #353d65;
+  fill-rule: nonzero;
+}
+.p2-fil12 {
+  fill: #435361;
+  fill-rule: nonzero;
+}
+.p2-fil39 {
+  fill: #546eb0;
+  fill-rule: nonzero;
+}
+.p2-fil10 {
+  fill: #6e88a4;
+  fill-rule: nonzero;
+}
+.p2-fil37 {
+  fill: #7a8cc5;
+  fill-rule: nonzero;
+}
+.p2-fil11 {
+  fill: #807e80;
+  fill-rule: nonzero;
+}
+.p2-fil29 {
+  fill: #897d7d;
+  fill-rule: nonzero;
+}
+.p2-fil27 {
+  fill: #9a5245;
+  fill-rule: nonzero;
+}
+.p2-fil24 {
+  fill: #a0683d;
+  fill-rule: nonzero;
+}
+.p2-fil21 {
+  fill: #b8d4e3;
+  fill-rule: nonzero;
+}
+.p2-fil31 {
+  fill: #ba3a4b;
+  fill-rule: nonzero;
+}
+.p2-fil35 {
+  fill: #c13538;
+  fill-rule: nonzero;
+}
+.p2-fil25 {
+  fill: #c77560;
+  fill-rule: nonzero;
+}
+.p2-fil33 {
+  fill: #d64456;
+  fill-rule: nonzero;
+}
+.p2-fil28 {
+  fill: #db7f7c;
+  fill-rule: nonzero;
+}
+.p2-fil0 {
+  fill: #e0c5c0;
+  fill-rule: nonzero;
+}
+.p2-fil9 {
+  fill: #e56f68;
+  fill-rule: nonzero;
+}
+.p2-fil32 {
+  fill: #e65261;
+  fill-rule: nonzero;
+}
+.p2-fil19 {
+  fill: #e76e41;
+  fill-rule: nonzero;
+}
+.p2-fil14 {
+  fill: #ebadab;
+  fill-rule: nonzero;
+}
+.p2-fil23 {
+  fill: #ed9897;
+  fill-rule: nonzero;
+}
+.p2-fil34 {
+  fill: #ee4239;
+  fill-rule: nonzero;
+}
+.p2-fil16 {
+  fill: #ef8e8a;
+  fill-rule: nonzero;
+}
+.p2-fil38 {
+  fill: #f09b97;
+  fill-rule: nonzero;
+}
+.p2-fil36 {
+  fill: #f29d99;
+  fill-rule: nonzero;
+}
+.p2-fil17 {
+  fill: #f5a656;
+  fill-rule: nonzero;
+}
+.p2-fil30 {
+  fill: #f69773;
+  fill-rule: nonzero;
+}
+.p2-fil2 {
+  fill: #f7d7d8;
+  fill-rule: nonzero;
+}
+.p2-fil8 {
+  fill: #fdeae7;
+  fill-rule: nonzero;
+}
+.p2-fil1 {
+  fill: #fefefe;
+  fill-rule: nonzero;
+}
+
+.p3-fil5 {
+  fill: #2a2d40;
+}
+.p3-fil7 {
+  fill: #2e2d2d;
+}
+.p3-fil4 {
+  fill: #ee4239;
+}
+.p3-fil22 {
+  fill: #212123;
+  fill-rule: nonzero;
+}
+.p3-fil20 {
+  fill: #222225;
+  fill-rule: nonzero;
+}
+.p3-fil26 {
+  fill: #28282a;
+  fill-rule: nonzero;
+}
+.p3-fil3 {
+  fill: #2a2d40;
+  fill-rule: nonzero;
+}
+.p3-fil15 {
+  fill: #2e2f30;
+  fill-rule: nonzero;
+}
+.p3-fil13 {
+  fill: #303b50;
+  fill-rule: nonzero;
+}
+.p3-fil18 {
+  fill: #34395f;
+  fill-rule: nonzero;
+}
+.p3-fil6 {
+  fill: #353d65;
+  fill-rule: nonzero;
+}
+.p3-fil12 {
+  fill: #435361;
+  fill-rule: nonzero;
+}
+.p3-fil39 {
+  fill: #546eb0;
+  fill-rule: nonzero;
+}
+.p3-fil10 {
+  fill: #6e88a4;
+  fill-rule: nonzero;
+}
+.p3-fil37 {
+  fill: #7a8cc5;
+  fill-rule: nonzero;
+}
+.p3-fil11 {
+  fill: #807e80;
+  fill-rule: nonzero;
+}
+.p3-fil29 {
+  fill: #897d7d;
+  fill-rule: nonzero;
+}
+.p3-fil27 {
+  fill: #9a5245;
+  fill-rule: nonzero;
+}
+.p3-fil24 {
+  fill: #a0683d;
+  fill-rule: nonzero;
+}
+.p3-fil21 {
+  fill: #b8d4e3;
+  fill-rule: nonzero;
+}
+.p3-fil31 {
+  fill: #ba3a4b;
+  fill-rule: nonzero;
+}
+.p3-fil35 {
+  fill: #c13538;
+  fill-rule: nonzero;
+}
+.p3-fil25 {
+  fill: #c77560;
+  fill-rule: nonzero;
+}
+.p3-fil33 {
+  fill: #d64456;
+  fill-rule: nonzero;
+}
+.p3-fil28 {
+  fill: #db7f7c;
+  fill-rule: nonzero;
+}
+.p3-fil0 {
+  fill: #e0c5c0;
+  fill-rule: nonzero;
+}
+.p3-fil9 {
+  fill: #e56f68;
+  fill-rule: nonzero;
+}
+.p3-fil32 {
+  fill: #e65261;
+  fill-rule: nonzero;
+}
+.p3-fil19 {
+  fill: #e76e41;
+  fill-rule: nonzero;
+}
+.p3-fil14 {
+  fill: #ebadab;
+  fill-rule: nonzero;
+}
+.p3-fil23 {
+  fill: #ed9897;
+  fill-rule: nonzero;
+}
+.p3-fil34 {
+  fill: #ee4239;
+  fill-rule: nonzero;
+}
+.p3-fil16 {
+  fill: #ef8e8a;
+  fill-rule: nonzero;
+}
+.p3-fil38 {
+  fill: #f09b97;
+  fill-rule: nonzero;
+}
+.p3-fil36 {
+  fill: #f29d99;
+  fill-rule: nonzero;
+}
+.p3-fil17 {
+  fill: #f5a656;
+  fill-rule: nonzero;
+}
+.p3-fil30 {
+  fill: #f69773;
+  fill-rule: nonzero;
+}
+.p3-fil2 {
+  fill: #f7d7d8;
+  fill-rule: nonzero;
+}
+.p3-fil8 {
+  fill: #fdeae7;
+  fill-rule: nonzero;
+}
+.p3-fil1 {
+  fill: #fefefe;
+  fill-rule: nonzero;
+}
diff --git a/one-hundred-rules/README.markdown b/one-hundred-rules/README.markdown
new file mode 100644
index 0000000..631bf43
--- /dev/null
+++ b/one-hundred-rules/README.markdown
@@ -0,0 +1,9 @@
+# One Hundred Rules
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/darthmall/pen/abNxMmQ](https://codepen.io/darthmall/pen/abNxMmQ).
+
+A generative design created using only &lt;hr&gt; elements and pseudo-elements.
+
+For the &lt;hr&gt; elements I restricted myself to styling only the border and the width, since that is the essential aspect of the element's presentation. One could, of course, give the element a height and use background colors and images, but at that point you might as well use a &lt;div&gt;, since the element serves no semantic purpose here. I imposed no such constraints on the pseudo-elements.
+
+Who says CSS isn't a programming language?
diff --git a/one-hundred-rules/dist/index.html b/one-hundred-rules/dist/index.html
new file mode 100644
index 0000000..e355dc5
--- /dev/null
+++ b/one-hundred-rules/dist/index.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - One Hundred Rules</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+  <hr/>
+</main>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/one-hundred-rules/dist/style.css b/one-hundred-rules/dist/style.css
new file mode 100644
index 0000000..e23d9fa
--- /dev/null
+++ b/one-hundred-rules/dist/style.css
@@ -0,0 +1,137 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+html {
+  background-color: #F2EBE3;
+}
+
+body {
+  padding: 0;
+}
+
+body {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+main {
+  display: grid;
+  grid-gap: 0;
+  grid-template-columns: repeat(10, 10vmin);
+  grid-template-rows: repeat(10, 10vmin);
+  height: 100vmin;
+  justify-items: center;
+  margin: auto;
+  overflow: visible;
+  width: 100vmin;
+}
+
+hr {
+  align-self: var(--align, center);
+  border-top: var(--border-width, 2px) var(--border-style, solid) var(--border-color, #081117);
+  transform: rotate(var(--rotate, 45deg));
+  width: var(--width, 14.14vmin);
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+  margin: 0;
+  position: relative;
+}
+hr::after, hr::before {
+  --rotate: 0deg;
+  background-image: var(--bg, linear-gradient(transparent, transparent));
+  border-radius: var(--corners, 0px);
+  height: var(--size, 0);
+  width: var(--size, 0);
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) translateY(calc(var(--border-width) / 2 * -1)) rotate(var(--rotate));
+}
+
+hr:nth-of-type(odd)::before {
+  --corners: 5vmin;
+}
+
+hr:nth-of-type(3n + 1) {
+  --border-style: dotted;
+  --border-width: 6px;
+}
+
+hr:nth-of-type(3n + 1)::before {
+  --bg: linear-gradient(
+    45deg,
+    #081117 0% 50%,
+    transparent 50% 100%
+  );
+  --size: 3vmin;
+  --rotate: -45deg;
+}
+
+hr:nth-of-type(4n + 1)::before {
+  --bg: linear-gradient(#081117, #081117);
+}
+
+hr:nth-of-type(5n + 1) {
+  --border-width: 2px;
+  --border-style: solid;
+}
+
+hr:nth-of-type(6n + 1)::before {
+  --rotate: 135deg;
+}
+
+hr:nth-of-type(6n+1)::after {
+  --bg: linear-gradient(#F2EBE3, #F2EBE3);
+  --size: 2vmin;
+  --corners: 2vmin;
+}
+
+hr:nth-of-type(7n + 1) {
+  --align: start;
+  --rotate: 0deg;
+  --width: 10vmin;
+}
+
+hr:nth-of-type(7n + 1)::after {
+  --bg: linear-gradient(#F2EBE3, #F2EBE3);
+  --corners: 2vmin;
+  --size: 2vmin;
+}
+
+hr:nth-of-type(7n + 1)::before {
+  --bg: repeating-linear-gradient(
+    #081117 0% 20%,
+    #F2EBE3 20% 40%
+  );
+  --size: 3vmin;
+}
+
+hr:nth-of-type(9n + 1)::after {
+  --size: 0px;
+}
+
+hr:nth-of-type(11n + 1) {
+  --border-style: solid;
+}
+
+hr:nth-of-type(13n + 1) {
+  --align: center;
+  --rotate: -45deg;
+  --width: 14.14vmin;
+}
+
+hr:nth-of-type(17n + 1) {
+  --border-style: dotted;
+}
+
+hr:nth-of-type(19n + 1) {
+  --border-style: double;
+}
\ No newline at end of file
diff --git a/one-hundred-rules/license.txt b/one-hundred-rules/license.txt
new file mode 100644
index 0000000..a8ca861
--- /dev/null
+++ b/one-hundred-rules/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Evan Sheehan (https://codepen.io/darthmall/pen/abNxMmQ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/one-hundred-rules/src/index.pug b/one-hundred-rules/src/index.pug
new file mode 100644
index 0000000..d5d4ddf
--- /dev/null
+++ b/one-hundred-rules/src/index.pug
@@ -0,0 +1,3 @@
+main
+  - for (var x = 1; x < 101; x++)
+    hr
diff --git a/one-hundred-rules/src/style.scss b/one-hundred-rules/src/style.scss
new file mode 100644
index 0000000..fb2616a
--- /dev/null
+++ b/one-hundred-rules/src/style.scss
@@ -0,0 +1,151 @@
+$background: #F2EBE3;
+$foreground: #081117;
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+html {
+  background-color: $background;
+}
+
+body {
+  padding: 0;
+}
+
+body {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+main {
+  display: grid;
+  grid-gap: 0;
+  grid-template-columns: repeat(10, 10vmin);
+  grid-template-rows: repeat(10, 10vmin);
+  height: 100vmin;
+  justify-items: center;
+  margin: auto;
+  overflow: visible;
+  width: 100vmin;
+}
+
+hr {
+  // These are properties are the ones we'll vary (using CSS custom 
+  // properties) for this piece
+  align-self: var(--align, center);
+  border-top:
+    var(--border-width, 2px)
+    var(--border-style, solid)
+    var(--border-color, #{$foreground});
+  transform:
+    rotate(var(--rotate, 45deg));
+  width: var(--width, 14.14vmin);
+
+  // Resets
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+  margin: 0;
+
+  // Necessary to center the ::before and ::after pseudo-elements
+  position: relative;
+
+  &::after,
+  &::before {
+    --rotate: 0deg;
+    
+    // These are properties are the ones we'll vary (using CSS custom 
+    // properties) for this piece
+    background-image:
+      var(--bg, linear-gradient(transparent, transparent));
+    border-radius: var(--corners, 0px);
+    height: var(--size, 0);
+    width: var(--size, 0);
+    
+    // Center all pseudo-elements on the grid cell.
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform:
+      translate(-50%, -50%)
+      translateY(calc(var(--border-width) / 2 * -1))
+      rotate(var(--rotate));
+  }
+}
+
+// Now we can use the Cicada Principle (hat tip to Lea Verou) to create
+// a variety of shapes and colors in our design.
+// https://lea.verou.me/2020/07/the-cicada-principle-revisited-with-css-variables/
+
+hr:nth-of-type(odd)::before {
+  --corners: 5vmin;
+}
+hr:nth-of-type(3n + 1) {
+  --border-style: dotted;
+  --border-width: 6px;
+}
+hr:nth-of-type(3n + 1)::before {
+  --bg: linear-gradient(
+    45deg,
+    #{$foreground} 0% 50%,
+    transparent 50% 100%
+  );
+  --size: 3vmin;
+  --rotate: -45deg;
+}
+hr:nth-of-type(4n + 1)::before {
+  --bg: linear-gradient(#{$foreground}, #{$foreground});
+}
+hr:nth-of-type(5n + 1) {
+  --border-width: 2px;
+  --border-style: solid;
+}
+hr:nth-of-type(6n + 1)::before {
+  --rotate: 135deg;
+}
+hr:nth-of-type(6n+1)::after {
+  --bg: linear-gradient(#{$background}, #{$background});
+  --size: 2vmin;
+  --corners: 2vmin;
+}
+hr:nth-of-type(7n + 1) {
+  --align: start;
+  --rotate: 0deg;
+  --width: 10vmin;
+}
+hr:nth-of-type(7n + 1)::after {
+  --bg: linear-gradient(#{$background}, #{$background});
+  --corners: 2vmin;
+  --size: 2vmin;
+}
+hr:nth-of-type(7n + 1)::before {
+  --bg: repeating-linear-gradient(
+    #{$foreground} 0% 20%,
+    #{$background} 20% 40%
+  );
+  --size: 3vmin;
+}
+hr:nth-of-type(9n + 1)::after {
+  --size: 0px;
+}
+hr:nth-of-type(11n + 1) {
+  --border-style: solid;
+}
+hr:nth-of-type(13n + 1) {
+  --align: center;
+  --rotate: -45deg;
+  --width: 14.14vmin;
+}
+hr:nth-of-type(17n + 1) {
+  --border-style: dotted;
+}
+hr:nth-of-type(19n + 1) {
+  --border-style: double;
+}
\ No newline at end of file
diff --git a/only-css-infinite-plug-in/README.markdown b/only-css-infinite-plug-in/README.markdown
new file mode 100644
index 0000000..dc89c04
--- /dev/null
+++ b/only-css-infinite-plug-in/README.markdown
@@ -0,0 +1,5 @@
+# Only CSS: Infinite Plug In
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/YusukeNakaya/pen/bGezNrW](https://codepen.io/YusukeNakaya/pen/bGezNrW).
+
+
diff --git a/only-css-infinite-plug-in/dist/index.html b/only-css-infinite-plug-in/dist/index.html
new file mode 100644
index 0000000..ad2ae86
--- /dev/null
+++ b/only-css-infinite-plug-in/dist/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Only CSS: Infinite Plug In</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="monitor">
+    <div class="camera -x">
+      <div class="camera -y">
+        <div class="camera -z">
+          <div class="world">
+            <div class="set">
+              <div class="hole">
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall -cover"></div>
+              </div>
+              <div class="plug">
+                <div class="in">
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                </div>
+              </div>
+            </div>
+            <div class="set">
+              <div class="hole">
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall -cover"></div>
+              </div>
+              <div class="plug">
+                <div class="in">
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                </div>
+              </div>
+            </div>
+            <div class="set">
+              <div class="hole">
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall -cover"></div>
+              </div>
+              <div class="plug">
+                <div class="in">
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                </div>
+              </div>
+            </div>
+            <div class="set">
+              <div class="hole">
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall -cover"></div>
+              </div>
+              <div class="plug">
+                <div class="in">
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                </div>
+              </div>
+            </div>
+            <div class="set">
+              <div class="hole">
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall -cover"></div>
+              </div>
+              <div class="plug">
+                <div class="in">
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                </div>
+              </div>
+            </div>
+            <div class="set">
+              <div class="hole">
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall -cover"></div>
+              </div>
+              <div class="plug">
+                <div class="in">
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                </div>
+              </div>
+            </div>
+            <div class="set">
+              <div class="hole">
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall -cover"></div>
+              </div>
+              <div class="plug">
+                <div class="in">
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                </div>
+              </div>
+            </div>
+            <div class="set">
+              <div class="hole">
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall -cover"></div>
+              </div>
+              <div class="plug">
+                <div class="in">
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                </div>
+              </div>
+            </div>
+            <div class="set">
+              <div class="hole">
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall -cover"></div>
+              </div>
+              <div class="plug">
+                <div class="in">
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                </div>
+              </div>
+            </div>
+            <div class="set">
+              <div class="hole">
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall"></div>
+                <div class="wall -cover"></div>
+              </div>
+              <div class="plug">
+                <div class="in">
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                  <div class="wall"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/only-css-infinite-plug-in/dist/style.css b/only-css-infinite-plug-in/dist/style.css
new file mode 100644
index 0000000..9713a24
--- /dev/null
+++ b/only-css-infinite-plug-in/dist/style.css
@@ -0,0 +1,4091 @@
+body {
+  background: #fff;
+  height: 100vh;
+  overflow: hidden;
+  display: -webkit-box;
+  display: flex;
+  font-family: 'Anton', sans-serif;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+}
+
+.container {
+  position: relative;
+  display: grid;
+  grid-template-rows: repeat(20, 5vh);
+  grid-template-columns: repeat(20, 5vw);
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+}
+
+.monitor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+}
+
+.trigger {
+  position: relative;
+}
+.trigger:nth-child(1):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(1):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(2):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(2):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(3):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(3):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(4):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(4):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(5):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(5):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(6):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(6):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(7):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(7):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(8):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(8):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(9):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(9):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(10):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(10):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(11):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(11):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(12):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(12):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(13):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(13):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(14):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(14):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(15):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(15):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(16):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(16):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(17):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(17):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(18):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(18):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(19):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(19):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(20):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-47deg);
+          transform: rotateX(-47deg);
+}
+.trigger:nth-child(20):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(21):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(21):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(22):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(22):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(23):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(23):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(24):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(24):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(25):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(25):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(26):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(26):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(27):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(27):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(28):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(28):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(29):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(29):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(30):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(30):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(31):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(31):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(32):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(32):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(33):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(33):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(34):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(34):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(35):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(35):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(36):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(36):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(37):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(37):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(38):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(38):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(39):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(39):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(40):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+.trigger:nth-child(40):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(41):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(41):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(42):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(42):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(43):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(43):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(44):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(44):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(45):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(45):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(46):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(46):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(47):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(47):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(48):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(48):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(49):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(49):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(50):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(50):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(51):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(51):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(52):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(52):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(53):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(53):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(54):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(54):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(55):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(55):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(56):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(56):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(57):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(57):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(58):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(58):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(59):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(59):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(60):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-43deg);
+          transform: rotateX(-43deg);
+}
+.trigger:nth-child(60):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(61):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(61):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(62):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(62):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(63):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(63):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(64):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(64):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(65):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(65):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(66):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(66):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(67):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(67):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(68):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(68):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(69):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(69):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(70):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(70):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(71):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(71):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(72):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(72):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(73):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(73):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(74):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(74):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(75):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(75):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(76):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(76):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(77):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(77):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(78):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(78):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(79):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(79):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(80):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-41deg);
+          transform: rotateX(-41deg);
+}
+.trigger:nth-child(80):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(81):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(81):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(82):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(82):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(83):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(83):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(84):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(84):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(85):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(85):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(86):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(86):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(87):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(87):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(88):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(88):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(89):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(89):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(90):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(90):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(91):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(91):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(92):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(92):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(93):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(93):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(94):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(94):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(95):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(95):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(96):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(96):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(97):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(97):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(98):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(98):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(99):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(99):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(100):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-39deg);
+          transform: rotateX(-39deg);
+}
+.trigger:nth-child(100):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(101):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(101):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(102):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(102):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(103):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(103):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(104):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(104):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(105):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(105):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(106):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(106):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(107):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(107):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(108):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(108):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(109):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(109):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(110):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(110):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(111):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(111):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(112):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(112):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(113):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(113):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(114):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(114):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(115):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(115):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(116):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(116):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(117):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(117):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(118):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(118):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(119):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(119):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(120):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-37deg);
+          transform: rotateX(-37deg);
+}
+.trigger:nth-child(120):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(121):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(121):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(122):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(122):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(123):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(123):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(124):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(124):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(125):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(125):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(126):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(126):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(127):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(127):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(128):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(128):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(129):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(129):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(130):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(130):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(131):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(131):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(132):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(132):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(133):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(133):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(134):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(134):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(135):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(135):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(136):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(136):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(137):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(137):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(138):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(138):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(139):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(139):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(140):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-35deg);
+          transform: rotateX(-35deg);
+}
+.trigger:nth-child(140):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(141):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(141):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(142):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(142):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(143):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(143):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(144):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(144):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(145):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(145):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(146):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(146):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(147):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(147):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(148):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(148):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(149):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(149):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(150):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(150):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(151):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(151):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(152):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(152):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(153):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(153):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(154):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(154):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(155):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(155):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(156):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(156):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(157):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(157):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(158):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(158):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(159):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(159):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(160):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-33deg);
+          transform: rotateX(-33deg);
+}
+.trigger:nth-child(160):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(161):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(161):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(162):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(162):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(163):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(163):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(164):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(164):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(165):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(165):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(166):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(166):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(167):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(167):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(168):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(168):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(169):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(169):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(170):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(170):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(171):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(171):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(172):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(172):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(173):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(173):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(174):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(174):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(175):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(175):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(176):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(176):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(177):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(177):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(178):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(178):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(179):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(179):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(180):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-31deg);
+          transform: rotateX(-31deg);
+}
+.trigger:nth-child(180):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(181):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(181):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(182):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(182):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(183):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(183):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(184):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(184):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(185):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(185):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(186):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(186):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(187):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(187):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(188):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(188):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(189):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(189):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(190):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(190):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(191):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(191):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(192):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(192):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(193):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(193):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(194):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(194):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(195):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(195):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(196):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(196):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(197):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(197):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(198):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(198):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(199):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(199):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(200):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-29deg);
+          transform: rotateX(-29deg);
+}
+.trigger:nth-child(200):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(201):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(201):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(202):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(202):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(203):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(203):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(204):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(204):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(205):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(205):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(206):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(206):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(207):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(207):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(208):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(208):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(209):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(209):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(210):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(210):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(211):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(211):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(212):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(212):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(213):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(213):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(214):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(214):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(215):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(215):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(216):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(216):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(217):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(217):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(218):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(218):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(219):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(219):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(220):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-27deg);
+          transform: rotateX(-27deg);
+}
+.trigger:nth-child(220):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(221):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(221):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(222):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(222):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(223):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(223):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(224):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(224):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(225):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(225):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(226):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(226):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(227):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(227):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(228):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(228):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(229):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(229):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(230):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(230):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(231):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(231):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(232):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(232):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(233):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(233):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(234):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(234):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(235):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(235):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(236):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(236):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(237):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(237):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(238):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(238):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(239):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(239):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(240):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-25deg);
+          transform: rotateX(-25deg);
+}
+.trigger:nth-child(240):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(241):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(241):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(242):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(242):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(243):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(243):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(244):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(244):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(245):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(245):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(246):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(246):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(247):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(247):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(248):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(248):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(249):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(249):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(250):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(250):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(251):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(251):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(252):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(252):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(253):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(253):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(254):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(254):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(255):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(255):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(256):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(256):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(257):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(257):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(258):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(258):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(259):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(259):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(260):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-23deg);
+          transform: rotateX(-23deg);
+}
+.trigger:nth-child(260):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(261):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(261):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(262):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(262):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(263):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(263):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(264):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(264):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(265):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(265):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(266):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(266):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(267):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(267):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(268):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(268):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(269):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(269):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(270):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(270):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(271):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(271):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(272):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(272):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(273):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(273):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(274):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(274):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(275):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(275):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(276):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(276):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(277):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(277):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(278):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(278):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(279):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(279):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(280):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-21deg);
+          transform: rotateX(-21deg);
+}
+.trigger:nth-child(280):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(281):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(281):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(282):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(282):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(283):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(283):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(284):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(284):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(285):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(285):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(286):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(286):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(287):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(287):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(288):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(288):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(289):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(289):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(290):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(290):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(291):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(291):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(292):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(292):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(293):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(293):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(294):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(294):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(295):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(295):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(296):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(296):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(297):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(297):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(298):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(298):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(299):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(299):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(300):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-19deg);
+          transform: rotateX(-19deg);
+}
+.trigger:nth-child(300):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(301):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(301):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(302):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(302):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(303):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(303):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(304):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(304):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(305):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(305):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(306):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(306):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(307):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(307):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(308):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(308):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(309):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(309):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(310):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(310):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(311):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(311):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(312):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(312):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(313):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(313):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(314):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(314):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(315):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(315):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(316):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(316):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(317):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(317):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(318):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(318):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(319):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(319):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(320):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-17deg);
+          transform: rotateX(-17deg);
+}
+.trigger:nth-child(320):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(321):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(321):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(322):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(322):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(323):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(323):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(324):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(324):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(325):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(325):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(326):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(326):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(327):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(327):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(328):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(328):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(329):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(329):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(330):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(330):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(331):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(331):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(332):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(332):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(333):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(333):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(334):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(334):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(335):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(335):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(336):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(336):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(337):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(337):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(338):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(338):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(339):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(339):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(340):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-15deg);
+          transform: rotateX(-15deg);
+}
+.trigger:nth-child(340):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(341):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(341):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(342):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(342):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(343):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(343):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(344):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(344):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(345):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(345):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(346):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(346):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(347):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(347):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(348):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(348):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(349):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(349):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(350):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(350):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(351):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(351):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(352):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(352):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(353):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(353):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(354):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(354):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(355):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(355):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(356):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(356):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(357):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(357):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(358):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(358):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(359):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(359):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(360):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-13deg);
+          transform: rotateX(-13deg);
+}
+.trigger:nth-child(360):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(361):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(361):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(362):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(362):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(363):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(363):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(364):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(364):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(365):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(365):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(366):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(366):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(367):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(367):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(368):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(368):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(369):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(369):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(370):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(370):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(371):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(371):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(372):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(372):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(373):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(373):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(374):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(374):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(375):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(375):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(376):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(376):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(377):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(377):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(378):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(378):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(379):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(379):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(380):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-11deg);
+          transform: rotateX(-11deg);
+}
+.trigger:nth-child(380):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+.trigger:nth-child(381):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(381):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-14deg);
+          transform: rotateY(-14deg);
+}
+.trigger:nth-child(382):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(382):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-16deg);
+          transform: rotateY(-16deg);
+}
+.trigger:nth-child(383):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(383):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-18deg);
+          transform: rotateY(-18deg);
+}
+.trigger:nth-child(384):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(384):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-20deg);
+          transform: rotateY(-20deg);
+}
+.trigger:nth-child(385):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(385):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-22deg);
+          transform: rotateY(-22deg);
+}
+.trigger:nth-child(386):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(386):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-24deg);
+          transform: rotateY(-24deg);
+}
+.trigger:nth-child(387):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(387):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-26deg);
+          transform: rotateY(-26deg);
+}
+.trigger:nth-child(388):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(388):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-28deg);
+          transform: rotateY(-28deg);
+}
+.trigger:nth-child(389):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(389):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-30deg);
+          transform: rotateY(-30deg);
+}
+.trigger:nth-child(390):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(390):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-32deg);
+          transform: rotateY(-32deg);
+}
+.trigger:nth-child(391):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(391):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-34deg);
+          transform: rotateY(-34deg);
+}
+.trigger:nth-child(392):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(392):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-36deg);
+          transform: rotateY(-36deg);
+}
+.trigger:nth-child(393):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(393):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-38deg);
+          transform: rotateY(-38deg);
+}
+.trigger:nth-child(394):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(394):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-40deg);
+          transform: rotateY(-40deg);
+}
+.trigger:nth-child(395):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(395):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-42deg);
+          transform: rotateY(-42deg);
+}
+.trigger:nth-child(396):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(396):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-44deg);
+          transform: rotateY(-44deg);
+}
+.trigger:nth-child(397):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(397):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-46deg);
+          transform: rotateY(-46deg);
+}
+.trigger:nth-child(398):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(398):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-48deg);
+          transform: rotateY(-48deg);
+}
+.trigger:nth-child(399):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(399):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-50deg);
+          transform: rotateY(-50deg);
+}
+.trigger:nth-child(400):hover ~ .monitor .camera.-x {
+  -webkit-transform: rotateX(-9deg);
+          transform: rotateX(-9deg);
+}
+.trigger:nth-child(400):hover ~ .monitor .camera.-y {
+  -webkit-transform: rotateY(-52deg);
+          transform: rotateY(-52deg);
+}
+
+.camera {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-transition: 500ms;
+  transition: 500ms;
+}
+.camera.-x {
+  -webkit-transform: rotateX(-30deg);
+          transform: rotateX(-30deg);
+}
+.camera.-y {
+  -webkit-transform: rotateY(-45deg);
+          transform: rotateY(-45deg);
+}
+
+.world {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translateY(200px);
+          transform: translateY(200px);
+}
+
+div {
+  position: absolute;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+}
+
+.hole {
+  -webkit-transform: translate(-50px, -50px);
+          transform: translate(-50px, -50px);
+}
+.hole .wall {
+  width: 100px;
+  height: 300px;
+  background: #ccc;
+}
+.hole .wall:nth-child(1) {
+  -webkit-transform: translateZ(50px) scaleX(1.5);
+          transform: translateZ(50px) scaleX(1.5);
+  background: #fff;
+}
+.hole .wall:nth-child(2) {
+  -webkit-transform: rotateY(90deg) translateZ(50px) scaleX(1.5);
+          transform: rotateY(90deg) translateZ(50px) scaleX(1.5);
+  background: #fff;
+}
+.hole .wall:nth-child(3) {
+  -webkit-transform: rotateY(-90deg) translateZ(50px);
+          transform: rotateY(-90deg) translateZ(50px);
+  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#000));
+  background: linear-gradient(#eee, #000);
+}
+.hole .wall:nth-child(4) {
+  -webkit-transform: rotateY(180deg) translateZ(50px);
+          transform: rotateY(180deg) translateZ(50px);
+  background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
+  background: linear-gradient(#ccc, #000);
+}
+.hole .wall:nth-child(5) {
+  -webkit-transform-origin: 0 100%;
+          transform-origin: 0 100%;
+  -webkit-transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
+          transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
+  background: #fff;
+  height: 100px;
+  -webkit-animation: cover 12000ms ease-in-out infinite;
+          animation: cover 12000ms ease-in-out infinite;
+}
+.hole .wall:nth-child(5)::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
+  background: linear-gradient(#eee, #ddd);
+  -webkit-transform: translateZ(1px);
+          transform: translateZ(1px);
+}
+
+.plug {
+  -webkit-transform: translate(-45px, -50px);
+          transform: translate(-45px, -50px);
+}
+.plug .wall {
+  width: 90px;
+  height: 90px;
+  background: #ccc;
+}
+.plug .wall:nth-child(1) {
+  -webkit-transform: translateZ(45px);
+          transform: translateZ(45px);
+}
+.plug .wall:nth-child(2) {
+  -webkit-transform: rotateY(90deg) translateZ(45px);
+          transform: rotateY(90deg) translateZ(45px);
+}
+.plug .wall:nth-child(3) {
+  -webkit-transform: rotateX(90deg) translateZ(45px);
+          transform: rotateX(90deg) translateZ(45px);
+}
+.plug .in {
+  -webkit-animation: plugIn 12000ms linear infinite;
+          animation: plugIn 12000ms linear infinite;
+}
+
+.set {
+  -webkit-animation: belt 12000ms linear infinite;
+          animation: belt 12000ms linear infinite;
+}
+.set:nth-child(1) {
+  -webkit-animation-delay: -1200ms;
+          animation-delay: -1200ms;
+}
+.set:nth-child(1) .in,
+.set:nth-child(1) .-cover {
+  -webkit-animation-delay: -1200ms;
+          animation-delay: -1200ms;
+}
+.set:nth-child(1) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#37261e), to(#55443c));
+  background: linear-gradient(0deg, #37261e, #55443c);
+}
+.set:nth-child(1) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#4b3a32), to(#695850));
+  background: linear-gradient(0deg, #4b3a32, #695850);
+}
+.set:nth-child(1) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#5f4e46), to(#7d6c64));
+  background: linear-gradient(90deg, #5f4e46, #7d6c64);
+}
+.set:nth-child(2) {
+  -webkit-animation-delay: -2400ms;
+          animation-delay: -2400ms;
+}
+.set:nth-child(2) .in,
+.set:nth-child(2) .-cover {
+  -webkit-animation-delay: -2400ms;
+          animation-delay: -2400ms;
+}
+.set:nth-child(2) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#3e997b), to(#5cb799));
+  background: linear-gradient(0deg, #3e997b, #5cb799);
+}
+.set:nth-child(2) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#52ad8f), to(#70cbad));
+  background: linear-gradient(0deg, #52ad8f, #70cbad);
+}
+.set:nth-child(2) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#66c1a3), to(#84dfc1));
+  background: linear-gradient(90deg, #66c1a3, #84dfc1);
+}
+.set:nth-child(3) {
+  -webkit-animation-delay: -3600ms;
+          animation-delay: -3600ms;
+}
+.set:nth-child(3) .in,
+.set:nth-child(3) .-cover {
+  -webkit-animation-delay: -3600ms;
+          animation-delay: -3600ms;
+}
+.set:nth-child(3) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#245374), to(#427192));
+  background: linear-gradient(0deg, #245374, #427192);
+}
+.set:nth-child(3) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#386788), to(#5685a6));
+  background: linear-gradient(0deg, #386788, #5685a6);
+}
+.set:nth-child(3) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#4c7b9c), to(#6a99ba));
+  background: linear-gradient(90deg, #4c7b9c, #6a99ba);
+}
+.set:nth-child(4) {
+  -webkit-animation-delay: -4800ms;
+          animation-delay: -4800ms;
+}
+.set:nth-child(4) .in,
+.set:nth-child(4) .-cover {
+  -webkit-animation-delay: -4800ms;
+          animation-delay: -4800ms;
+}
+.set:nth-child(4) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#22147e), to(#40329c));
+  background: linear-gradient(0deg, #22147e, #40329c);
+}
+.set:nth-child(4) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#362892), to(#5446b0));
+  background: linear-gradient(0deg, #362892, #5446b0);
+}
+.set:nth-child(4) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#4a3ca6), to(#685ac4));
+  background: linear-gradient(90deg, #4a3ca6, #685ac4);
+}
+.set:nth-child(5) {
+  -webkit-animation-delay: -6000ms;
+          animation-delay: -6000ms;
+}
+.set:nth-child(5) .in,
+.set:nth-child(5) .-cover {
+  -webkit-animation-delay: -6000ms;
+          animation-delay: -6000ms;
+}
+.set:nth-child(5) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#6233b1), to(#8051cf));
+  background: linear-gradient(0deg, #6233b1, #8051cf);
+}
+.set:nth-child(5) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#7647c5), to(#9465e3));
+  background: linear-gradient(0deg, #7647c5, #9465e3);
+}
+.set:nth-child(5) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#8a5bd9), to(#a879f7));
+  background: linear-gradient(90deg, #8a5bd9, #a879f7);
+}
+.set:nth-child(6) {
+  -webkit-animation-delay: -7200ms;
+          animation-delay: -7200ms;
+}
+.set:nth-child(6) .in,
+.set:nth-child(6) .-cover {
+  -webkit-animation-delay: -7200ms;
+          animation-delay: -7200ms;
+}
+.set:nth-child(6) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#870000), to(#a51810));
+  background: linear-gradient(0deg, #870000, #a51810);
+}
+.set:nth-child(6) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#9b0e06), to(#b92c24));
+  background: linear-gradient(0deg, #9b0e06, #b92c24);
+}
+.set:nth-child(6) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#af221a), to(#cd4038));
+  background: linear-gradient(90deg, #af221a, #cd4038);
+}
+.set:nth-child(7) {
+  -webkit-animation-delay: -8400ms;
+          animation-delay: -8400ms;
+}
+.set:nth-child(7) .in,
+.set:nth-child(7) .-cover {
+  -webkit-animation-delay: -8400ms;
+          animation-delay: -8400ms;
+}
+.set:nth-child(7) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#334f2f), to(#516d4d));
+  background: linear-gradient(0deg, #334f2f, #516d4d);
+}
+.set:nth-child(7) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#476343), to(#658161));
+  background: linear-gradient(0deg, #476343, #658161);
+}
+.set:nth-child(7) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#5b7757), to(#799575));
+  background: linear-gradient(90deg, #5b7757, #799575);
+}
+.set:nth-child(8) {
+  -webkit-animation-delay: -9600ms;
+          animation-delay: -9600ms;
+}
+.set:nth-child(8) .in,
+.set:nth-child(8) .-cover {
+  -webkit-animation-delay: -9600ms;
+          animation-delay: -9600ms;
+}
+.set:nth-child(8) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#7b1395), to(#9931b3));
+  background: linear-gradient(0deg, #7b1395, #9931b3);
+}
+.set:nth-child(8) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#8f27a9), to(#ad45c7));
+  background: linear-gradient(0deg, #8f27a9, #ad45c7);
+}
+.set:nth-child(8) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#a33bbd), to(#c159db));
+  background: linear-gradient(90deg, #a33bbd, #c159db);
+}
+.set:nth-child(9) {
+  -webkit-animation-delay: -10800ms;
+          animation-delay: -10800ms;
+}
+.set:nth-child(9) .in,
+.set:nth-child(9) .-cover {
+  -webkit-animation-delay: -10800ms;
+          animation-delay: -10800ms;
+}
+.set:nth-child(9) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#ac3188), to(#ca4fa6));
+  background: linear-gradient(0deg, #ac3188, #ca4fa6);
+}
+.set:nth-child(9) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#c0459c), to(#de63ba));
+  background: linear-gradient(0deg, #c0459c, #de63ba);
+}
+.set:nth-child(9) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#d459b0), to(#f277ce));
+  background: linear-gradient(90deg, #d459b0, #f277ce);
+}
+.set:nth-child(10) {
+  -webkit-animation-delay: -12000ms;
+          animation-delay: -12000ms;
+}
+.set:nth-child(10) .in,
+.set:nth-child(10) .-cover {
+  -webkit-animation-delay: -12000ms;
+          animation-delay: -12000ms;
+}
+.set:nth-child(10) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#5d17a9), to(#7b35c7));
+  background: linear-gradient(0deg, #5d17a9, #7b35c7);
+}
+.set:nth-child(10) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#712bbd), to(#8f49db));
+  background: linear-gradient(0deg, #712bbd, #8f49db);
+}
+.set:nth-child(10) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#853fd1), to(#a35def));
+  background: linear-gradient(90deg, #853fd1, #a35def);
+}
+.set:nth-child(11) {
+  -webkit-animation-delay: -13200ms;
+          animation-delay: -13200ms;
+}
+.set:nth-child(11) .in,
+.set:nth-child(11) .-cover {
+  -webkit-animation-delay: -13200ms;
+          animation-delay: -13200ms;
+}
+.set:nth-child(11) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#43a44e), to(#61c26c));
+  background: linear-gradient(0deg, #43a44e, #61c26c);
+}
+.set:nth-child(11) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#57b862), to(#75d680));
+  background: linear-gradient(0deg, #57b862, #75d680);
+}
+.set:nth-child(11) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#6bcc76), to(#89ea94));
+  background: linear-gradient(90deg, #6bcc76, #89ea94);
+}
+.set:nth-child(12) {
+  -webkit-animation-delay: -14400ms;
+          animation-delay: -14400ms;
+}
+.set:nth-child(12) .in,
+.set:nth-child(12) .-cover {
+  -webkit-animation-delay: -14400ms;
+          animation-delay: -14400ms;
+}
+.set:nth-child(12) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#6d1b50), to(#8b396e));
+  background: linear-gradient(0deg, #6d1b50, #8b396e);
+}
+.set:nth-child(12) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#812f64), to(#9f4d82));
+  background: linear-gradient(0deg, #812f64, #9f4d82);
+}
+.set:nth-child(12) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#954378), to(#b36196));
+  background: linear-gradient(90deg, #954378, #b36196);
+}
+.set:nth-child(13) {
+  -webkit-animation-delay: -15600ms;
+          animation-delay: -15600ms;
+}
+.set:nth-child(13) .in,
+.set:nth-child(13) .-cover {
+  -webkit-animation-delay: -15600ms;
+          animation-delay: -15600ms;
+}
+.set:nth-child(13) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#510f0d), to(#6f2d2b));
+  background: linear-gradient(0deg, #510f0d, #6f2d2b);
+}
+.set:nth-child(13) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#652321), to(#83413f));
+  background: linear-gradient(0deg, #652321, #83413f);
+}
+.set:nth-child(13) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#793735), to(#975553));
+  background: linear-gradient(90deg, #793735, #975553);
+}
+.set:nth-child(14) {
+  -webkit-animation-delay: -16800ms;
+          animation-delay: -16800ms;
+}
+.set:nth-child(14) .in,
+.set:nth-child(14) .-cover {
+  -webkit-animation-delay: -16800ms;
+          animation-delay: -16800ms;
+}
+.set:nth-child(14) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#8c6989), to(#aa87a7));
+  background: linear-gradient(0deg, #8c6989, #aa87a7);
+}
+.set:nth-child(14) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#a07d9d), to(#be9bbb));
+  background: linear-gradient(0deg, #a07d9d, #be9bbb);
+}
+.set:nth-child(14) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#b491b1), to(#d2afcf));
+  background: linear-gradient(90deg, #b491b1, #d2afcf);
+}
+.set:nth-child(15) {
+  -webkit-animation-delay: -18000ms;
+          animation-delay: -18000ms;
+}
+.set:nth-child(15) .in,
+.set:nth-child(15) .-cover {
+  -webkit-animation-delay: -18000ms;
+          animation-delay: -18000ms;
+}
+.set:nth-child(15) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#0c2f3b), to(#2a4d59));
+  background: linear-gradient(0deg, #0c2f3b, #2a4d59);
+}
+.set:nth-child(15) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#20434f), to(#3e616d));
+  background: linear-gradient(0deg, #20434f, #3e616d);
+}
+.set:nth-child(15) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#345763), to(#527581));
+  background: linear-gradient(90deg, #345763, #527581);
+}
+.set:nth-child(16) {
+  -webkit-animation-delay: -19200ms;
+          animation-delay: -19200ms;
+}
+.set:nth-child(16) .in,
+.set:nth-child(16) .-cover {
+  -webkit-animation-delay: -19200ms;
+          animation-delay: -19200ms;
+}
+.set:nth-child(16) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#66268f), to(#8444ad));
+  background: linear-gradient(0deg, #66268f, #8444ad);
+}
+.set:nth-child(16) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#7a3aa3), to(#9858c1));
+  background: linear-gradient(0deg, #7a3aa3, #9858c1);
+}
+.set:nth-child(16) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#8e4eb7), to(#ac6cd5));
+  background: linear-gradient(90deg, #8e4eb7, #ac6cd5);
+}
+.set:nth-child(17) {
+  -webkit-animation-delay: -20400ms;
+          animation-delay: -20400ms;
+}
+.set:nth-child(17) .in,
+.set:nth-child(17) .-cover {
+  -webkit-animation-delay: -20400ms;
+          animation-delay: -20400ms;
+}
+.set:nth-child(17) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#220807), to(#402625));
+  background: linear-gradient(0deg, #220807, #402625);
+}
+.set:nth-child(17) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#361c1b), to(#543a39));
+  background: linear-gradient(0deg, #361c1b, #543a39);
+}
+.set:nth-child(17) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#4a302f), to(#684e4d));
+  background: linear-gradient(90deg, #4a302f, #684e4d);
+}
+.set:nth-child(18) {
+  -webkit-animation-delay: -21600ms;
+          animation-delay: -21600ms;
+}
+.set:nth-child(18) .in,
+.set:nth-child(18) .-cover {
+  -webkit-animation-delay: -21600ms;
+          animation-delay: -21600ms;
+}
+.set:nth-child(18) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#621003), to(#802e21));
+  background: linear-gradient(0deg, #621003, #802e21);
+}
+.set:nth-child(18) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#762417), to(#944235));
+  background: linear-gradient(0deg, #762417, #944235);
+}
+.set:nth-child(18) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#8a382b), to(#a85649));
+  background: linear-gradient(90deg, #8a382b, #a85649);
+}
+.set:nth-child(19) {
+  -webkit-animation-delay: -22800ms;
+          animation-delay: -22800ms;
+}
+.set:nth-child(19) .in,
+.set:nth-child(19) .-cover {
+  -webkit-animation-delay: -22800ms;
+          animation-delay: -22800ms;
+}
+.set:nth-child(19) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#256000), to(#437e11));
+  background: linear-gradient(0deg, #256000, #437e11);
+}
+.set:nth-child(19) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#397407), to(#579225));
+  background: linear-gradient(0deg, #397407, #579225);
+}
+.set:nth-child(19) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#4d881b), to(#6ba639));
+  background: linear-gradient(90deg, #4d881b, #6ba639);
+}
+.set:nth-child(20) {
+  -webkit-animation-delay: -24000ms;
+          animation-delay: -24000ms;
+}
+.set:nth-child(20) .in,
+.set:nth-child(20) .-cover {
+  -webkit-animation-delay: -24000ms;
+          animation-delay: -24000ms;
+}
+.set:nth-child(20) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#35b333), to(#53d151));
+  background: linear-gradient(0deg, #35b333, #53d151);
+}
+.set:nth-child(20) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#49c747), to(#67e565));
+  background: linear-gradient(0deg, #49c747, #67e565);
+}
+.set:nth-child(20) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#5ddb5b), to(#7bf979));
+  background: linear-gradient(90deg, #5ddb5b, #7bf979);
+}
+.set:nth-child(21) {
+  -webkit-animation-delay: -25200ms;
+          animation-delay: -25200ms;
+}
+.set:nth-child(21) .in,
+.set:nth-child(21) .-cover {
+  -webkit-animation-delay: -25200ms;
+          animation-delay: -25200ms;
+}
+.set:nth-child(21) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#4e5b37), to(#6c7955));
+  background: linear-gradient(0deg, #4e5b37, #6c7955);
+}
+.set:nth-child(21) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#626f4b), to(#808d69));
+  background: linear-gradient(0deg, #626f4b, #808d69);
+}
+.set:nth-child(21) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#76835f), to(#94a17d));
+  background: linear-gradient(90deg, #76835f, #94a17d);
+}
+.set:nth-child(22) {
+  -webkit-animation-delay: -26400ms;
+          animation-delay: -26400ms;
+}
+.set:nth-child(22) .in,
+.set:nth-child(22) .-cover {
+  -webkit-animation-delay: -26400ms;
+          animation-delay: -26400ms;
+}
+.set:nth-child(22) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#9b9386), to(#b9b1a4));
+  background: linear-gradient(0deg, #9b9386, #b9b1a4);
+}
+.set:nth-child(22) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#afa79a), to(#cdc5b8));
+  background: linear-gradient(0deg, #afa79a, #cdc5b8);
+}
+.set:nth-child(22) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#c3bbae), to(#e1d9cc));
+  background: linear-gradient(90deg, #c3bbae, #e1d9cc);
+}
+.set:nth-child(23) {
+  -webkit-animation-delay: -27600ms;
+          animation-delay: -27600ms;
+}
+.set:nth-child(23) .in,
+.set:nth-child(23) .-cover {
+  -webkit-animation-delay: -27600ms;
+          animation-delay: -27600ms;
+}
+.set:nth-child(23) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#1d3637), to(#3b5455));
+  background: linear-gradient(0deg, #1d3637, #3b5455);
+}
+.set:nth-child(23) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#314a4b), to(#4f6869));
+  background: linear-gradient(0deg, #314a4b, #4f6869);
+}
+.set:nth-child(23) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#455e5f), to(#637c7d));
+  background: linear-gradient(90deg, #455e5f, #637c7d);
+}
+.set:nth-child(24) {
+  -webkit-animation-delay: -28800ms;
+          animation-delay: -28800ms;
+}
+.set:nth-child(24) .in,
+.set:nth-child(24) .-cover {
+  -webkit-animation-delay: -28800ms;
+          animation-delay: -28800ms;
+}
+.set:nth-child(24) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#4d9c56), to(#6bba74));
+  background: linear-gradient(0deg, #4d9c56, #6bba74);
+}
+.set:nth-child(24) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#61b06a), to(#7fce88));
+  background: linear-gradient(0deg, #61b06a, #7fce88);
+}
+.set:nth-child(24) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#75c47e), to(#93e29c));
+  background: linear-gradient(90deg, #75c47e, #93e29c);
+}
+.set:nth-child(25) {
+  -webkit-animation-delay: -30000ms;
+          animation-delay: -30000ms;
+}
+.set:nth-child(25) .in,
+.set:nth-child(25) .-cover {
+  -webkit-animation-delay: -30000ms;
+          animation-delay: -30000ms;
+}
+.set:nth-child(25) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#3b1a09), to(#593827));
+  background: linear-gradient(0deg, #3b1a09, #593827);
+}
+.set:nth-child(25) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#4f2e1d), to(#6d4c3b));
+  background: linear-gradient(0deg, #4f2e1d, #6d4c3b);
+}
+.set:nth-child(25) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#634231), to(#81604f));
+  background: linear-gradient(90deg, #634231, #81604f);
+}
+.set:nth-child(26) {
+  -webkit-animation-delay: -31200ms;
+          animation-delay: -31200ms;
+}
+.set:nth-child(26) .in,
+.set:nth-child(26) .-cover {
+  -webkit-animation-delay: -31200ms;
+          animation-delay: -31200ms;
+}
+.set:nth-child(26) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#164254), to(#346072));
+  background: linear-gradient(0deg, #164254, #346072);
+}
+.set:nth-child(26) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#2a5668), to(#487486));
+  background: linear-gradient(0deg, #2a5668, #487486);
+}
+.set:nth-child(26) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#3e6a7c), to(#5c889a));
+  background: linear-gradient(90deg, #3e6a7c, #5c889a);
+}
+.set:nth-child(27) {
+  -webkit-animation-delay: -32400ms;
+          animation-delay: -32400ms;
+}
+.set:nth-child(27) .in,
+.set:nth-child(27) .-cover {
+  -webkit-animation-delay: -32400ms;
+          animation-delay: -32400ms;
+}
+.set:nth-child(27) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#440188), to(#621fa6));
+  background: linear-gradient(0deg, #440188, #621fa6);
+}
+.set:nth-child(27) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#58159c), to(#7633ba));
+  background: linear-gradient(0deg, #58159c, #7633ba);
+}
+.set:nth-child(27) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#6c29b0), to(#8a47ce));
+  background: linear-gradient(90deg, #6c29b0, #8a47ce);
+}
+.set:nth-child(28) {
+  -webkit-animation-delay: -33600ms;
+          animation-delay: -33600ms;
+}
+.set:nth-child(28) .in,
+.set:nth-child(28) .-cover {
+  -webkit-animation-delay: -33600ms;
+          animation-delay: -33600ms;
+}
+.set:nth-child(28) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#7e041f), to(#9c223d));
+  background: linear-gradient(0deg, #7e041f, #9c223d);
+}
+.set:nth-child(28) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#921833), to(#b03651));
+  background: linear-gradient(0deg, #921833, #b03651);
+}
+.set:nth-child(28) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#a62c47), to(#c44a65));
+  background: linear-gradient(90deg, #a62c47, #c44a65);
+}
+.set:nth-child(29) {
+  -webkit-animation-delay: -34800ms;
+          animation-delay: -34800ms;
+}
+.set:nth-child(29) .in,
+.set:nth-child(29) .-cover {
+  -webkit-animation-delay: -34800ms;
+          animation-delay: -34800ms;
+}
+.set:nth-child(29) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#b30ca9), to(#d12ac7));
+  background: linear-gradient(0deg, #b30ca9, #d12ac7);
+}
+.set:nth-child(29) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#c720bd), to(#e53edb));
+  background: linear-gradient(0deg, #c720bd, #e53edb);
+}
+.set:nth-child(29) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#db34d1), to(#f952ef));
+  background: linear-gradient(90deg, #db34d1, #f952ef);
+}
+.set:nth-child(30) {
+  -webkit-animation-delay: -36000ms;
+          animation-delay: -36000ms;
+}
+.set:nth-child(30) .in,
+.set:nth-child(30) .-cover {
+  -webkit-animation-delay: -36000ms;
+          animation-delay: -36000ms;
+}
+.set:nth-child(30) .plug .wall:nth-child(1) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#3e24b2), to(#5c42d0));
+  background: linear-gradient(0deg, #3e24b2, #5c42d0);
+}
+.set:nth-child(30) .plug .wall:nth-child(2) {
+  background: -webkit-gradient(linear, left bottom, left top, from(#5238c6), to(#7056e4));
+  background: linear-gradient(0deg, #5238c6, #7056e4);
+}
+.set:nth-child(30) .plug .wall:nth-child(3) {
+  background: -webkit-gradient(linear, left top, right top, from(#664cda), to(#846af8));
+  background: linear-gradient(90deg, #664cda, #846af8);
+}
+
+@-webkit-keyframes cover {
+  0% {
+    -webkit-transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+            transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+  }
+  10% {
+    -webkit-transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+            transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+  }
+  15% {
+    -webkit-transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
+            transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
+  }
+  65% {
+    -webkit-transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
+            transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
+  }
+  70% {
+    -webkit-transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+            transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+  }
+  100% {
+    -webkit-transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+            transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+  }
+}
+
+@keyframes cover {
+  0% {
+    -webkit-transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+            transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+  }
+  10% {
+    -webkit-transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+            transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+  }
+  15% {
+    -webkit-transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
+            transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
+  }
+  65% {
+    -webkit-transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
+            transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
+  }
+  70% {
+    -webkit-transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+            transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+  }
+  100% {
+    -webkit-transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+            transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+  }
+}
+@-webkit-keyframes plugIn {
+  0% {
+    -webkit-transform: translateY(-1000px);
+            transform: translateY(-1000px);
+  }
+  54% {
+    -webkit-transform: translateY(15px);
+            transform: translateY(15px);
+  }
+  55% {
+    -webkit-transform: translateY(5px);
+            transform: translateY(5px);
+  }
+  100% {
+    -webkit-transform: translateY(5px);
+            transform: translateY(5px);
+  }
+}
+@keyframes plugIn {
+  0% {
+    -webkit-transform: translateY(-1000px);
+            transform: translateY(-1000px);
+  }
+  54% {
+    -webkit-transform: translateY(15px);
+            transform: translateY(15px);
+  }
+  55% {
+    -webkit-transform: translateY(5px);
+            transform: translateY(5px);
+  }
+  100% {
+    -webkit-transform: translateY(5px);
+            transform: translateY(5px);
+  }
+}
+@-webkit-keyframes belt {
+  0% {
+    -webkit-transform: translateZ(-800px);
+            transform: translateZ(-800px);
+  }
+  100% {
+    -webkit-transform: translateZ(1200px);
+            transform: translateZ(1200px);
+  }
+}
+@keyframes belt {
+  0% {
+    -webkit-transform: translateZ(-800px);
+            transform: translateZ(-800px);
+  }
+  100% {
+    -webkit-transform: translateZ(1200px);
+            transform: translateZ(1200px);
+  }
+}
\ No newline at end of file
diff --git a/only-css-infinite-plug-in/license.txt b/only-css-infinite-plug-in/license.txt
new file mode 100644
index 0000000..d28e08e
--- /dev/null
+++ b/only-css-infinite-plug-in/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Yusuke Nakaya (https://codepen.io/YusukeNakaya/pen/bGezNrW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/only-css-infinite-plug-in/src/index.pug b/only-css-infinite-plug-in/src/index.pug
new file mode 100644
index 0000000..9cebbeb
--- /dev/null
+++ b/only-css-infinite-plug-in/src/index.pug
@@ -0,0 +1,21 @@
+.container
+  - for (i = 0; i < 400; i++)
+    .trigger
+  .monitor
+    .camera.-x
+      .camera.-y
+        .camera.-z
+          .world
+            - for (i = 0; i < 10; i++)
+              .set
+                .hole
+                  .wall
+                  .wall
+                  .wall
+                  .wall
+                  .wall.-cover
+                .plug
+                  .in
+                    .wall
+                    .wall
+                    .wall
\ No newline at end of file
diff --git a/only-css-infinite-plug-in/src/style.scss b/only-css-infinite-plug-in/src/style.scss
new file mode 100644
index 0000000..677ad8a
--- /dev/null
+++ b/only-css-infinite-plug-in/src/style.scss
@@ -0,0 +1,245 @@
+$speed: 12000ms;
+
+body {
+  background: #fff;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  font-family: 'Anton', sans-serif;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  position: relative;
+  display: grid;
+  grid-template-rows: repeat(20, 5vh);
+  grid-template-columns: repeat(20, 5vw);
+  transform-style: preserve-3d;
+}
+
+.monitor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  transform-style: preserve-3d;
+}
+
+.trigger {
+  position: relative;
+  
+  @for $i from 1 through 20 {
+    @for $j from 1 through 20 {
+      $key: ($i - 1) * 20 + $j;
+      
+      &:nth-child(#{$key}) {
+        &:hover ~ .monitor {
+          .camera {
+            &.-x {
+              transform: rotateX(($i - 2) * 2deg - 45);
+            }
+            
+            &.-y {
+              transform: rotateY(($j - 2) * -2deg - 16);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.camera {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transition: 500ms;
+  
+  &.-x {
+    transform: rotateX(-30deg);
+  }
+  
+  &.-y {
+    transform: rotateY(-45deg);
+  }
+}
+
+.world {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translateY(200px);
+}
+
+div {
+  position: absolute;
+  transform-style: preserve-3d;
+}
+
+.hole {
+  transform: translate(-50px, -50px);
+
+  .wall {
+    width: 100px;
+    height: 300px;
+    background: #ccc;
+    
+    &:nth-child(1) {
+      transform: translateZ(50px) scaleX(1.5);
+      background: #fff;
+    }
+    
+    &:nth-child(2) {
+      transform: rotateY(90deg) translateZ(50px) scaleX(1.5);
+      background: #fff;
+    }
+    
+    &:nth-child(3) {
+      transform: rotateY(-90deg) translateZ(50px);
+      background: linear-gradient(#eee, #000);
+    }
+    
+    &:nth-child(4) {
+      transform: rotateY(180deg) translateZ(50px);
+      background: linear-gradient(#ccc, #000);
+    }
+    
+    &:nth-child(5) {
+      transform-origin: 0 100%;
+      transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
+      background: #fff;
+      height: 100px;
+      animation: cover $speed ease-in-out infinite;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(#eee, #ddd);
+        transform: translateZ(1px);
+      }
+    }
+  }
+}
+
+.plug {
+  transform: translate(-45px, -50px);
+
+  .wall {
+    width: 90px;
+    height: 90px;
+    background: #ccc;
+    
+    &:nth-child(1) {
+      transform: translateZ(45px);
+    }
+    
+    &:nth-child(2) {
+      transform: rotateY(90deg) translateZ(45px);
+    }
+    
+    &:nth-child(3) {
+      transform: rotateX(90deg) translateZ(45px);
+    }
+  }
+  
+  .in {
+    animation: plugIn $speed linear infinite;
+  }
+}
+
+.set {
+  animation: belt $speed linear infinite;
+  
+  @for $i from 1 through 30 {
+    $r: random(200);
+    $g: random(200);
+    $b: random(200);
+
+    &:nth-child(#{$i}) {
+      animation-delay: $i * $speed / -10;
+      
+      .in,
+      .-cover {
+        animation-delay: $i * $speed / -10;
+      }
+      
+      .plug {
+        .wall {
+          &:nth-child(1) {
+            background: linear-gradient(0deg, rgb($r - 20, $g - 20, $b - 20), rgb($r + 10, $g + 10, $b + 10));
+          }
+          
+          &:nth-child(2) {
+            background: linear-gradient(0deg, rgb($r, $g, $b), rgb($r + 30, $g + 30, $b + 30));
+          }
+          
+          &:nth-child(3) {
+            background: linear-gradient(90deg, rgb($r + 20, $g + 20, $b + 20), rgb($r + 50, $g + 50, $b + 50));
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes cover {
+  0% {
+    transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+  }
+  
+  10% {
+    transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+  }
+  
+  15% {
+    transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
+  }
+  
+  65% {
+    transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
+  }
+  
+  70% {
+    transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+  }
+  
+  100% {
+    transform: translateY(-100px) translateZ(-50px) rotateX(-90deg);
+  }
+}
+
+@keyframes plugIn {
+  0% {
+    transform: translateY(-1000px);
+  }
+  
+  54% {
+    transform: translateY(15px);
+  }
+  
+  55% {
+    transform: translateY(5px);
+  }
+  
+  100% {
+    transform: translateY(5px);
+  }
+}
+
+@keyframes belt {
+  0% {
+    transform: translateZ(-800px);
+  }
+  
+  100% {
+    transform: translateZ(1200px);
+  }
+}
+
diff --git a/only-css-infinite-wave/README.markdown b/only-css-infinite-wave/README.markdown
new file mode 100644
index 0000000..810256a
--- /dev/null
+++ b/only-css-infinite-wave/README.markdown
@@ -0,0 +1,4 @@
+# Only CSS: Infinite Wave 🏄
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/YusukeNakaya/pen/MMqwVw](https://codepen.io/YusukeNakaya/pen/MMqwVw).
+
+ Summer 🏄
\ No newline at end of file
diff --git a/only-css-infinite-wave/dist/index.html b/only-css-infinite-wave/dist/index.html
new file mode 100644
index 0000000..6517233
--- /dev/null
+++ b/only-css-infinite-wave/dist/index.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Only CSS: Infinite Wave 🏄</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<div class="water">
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+  <div class="pool_wrapper">
+    <div class="pool"></div>
+  </div>
+</div>
+<div class="human">
+  <div class="human_shake o-x">
+    <div class="human_shake o-y">🏄</div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/only-css-infinite-wave/dist/style.css b/only-css-infinite-wave/dist/style.css
new file mode 100644
index 0000000..1431a5b
--- /dev/null
+++ b/only-css-infinite-wave/dist/style.css
@@ -0,0 +1,1401 @@
+body {
+  background: #000;
+  height: 100vh;
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.human {
+  position: absolute;
+  top: calc(50% - 250px);
+  left: calc(50% - 1em);
+  font-size: 3rem;
+}
+.human_shake.o-x {
+  -webkit-animation: 2500ms shakeX ease-in-out infinite alternate;
+          animation: 2500ms shakeX ease-in-out infinite alternate;
+}
+.human_shake.o-y {
+  -webkit-animation: 1000ms shakeY ease-in-out infinite alternate;
+          animation: 1000ms shakeY ease-in-out infinite alternate;
+}
+
+.water {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  -webkit-filter: blur(10px) contrast(500) hue-rotate(40deg);
+          filter: blur(10px) contrast(500) hue-rotate(40deg);
+}
+
+.pool {
+  position: absolute;
+}
+.pool_wrapper:nth-child(1) {
+  -webkit-animation: rotate 12374ms -20000ms linear infinite;
+          animation: rotate 12374ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(1) .pool {
+  top: calc(50% - 318px / 2);
+  left: calc(50% - 318px / 2);
+  width: 318px;
+  height: 318px;
+  border: 8px solid #6497c4;
+  border-radius: 92% 8% 58% 42% / 57% 87% 13% 43%;
+}
+.pool_wrapper:nth-child(2) {
+  -webkit-animation: rotate 11304ms -20000ms linear infinite;
+          animation: rotate 11304ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(2) .pool {
+  top: calc(50% - 410px / 2);
+  left: calc(50% - 410px / 2);
+  width: 410px;
+  height: 410px;
+  border: 8px solid #647547;
+  border-radius: 60% 40% 45% 55% / 34% 71% 29% 66%;
+}
+.pool_wrapper:nth-child(3) {
+  -webkit-animation: rotate 11300ms -20000ms linear infinite;
+          animation: rotate 11300ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(3) .pool {
+  top: calc(50% - 508px / 2);
+  left: calc(50% - 508px / 2);
+  width: 508px;
+  height: 508px;
+  border: 8px solid #64f3c6;
+  border-radius: 90% 10% 46% 54% / 21% 65% 35% 79%;
+}
+.pool_wrapper:nth-child(4) {
+  -webkit-animation: rotate 6816ms -20000ms linear infinite;
+          animation: rotate 6816ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(4) .pool {
+  top: calc(50% - 361px / 2);
+  left: calc(50% - 361px / 2);
+  width: 361px;
+  height: 361px;
+  border: 8px solid #64dbcd;
+  border-radius: 58% 42% 35% 65% / 88% 57% 43% 12%;
+}
+.pool_wrapper:nth-child(5) {
+  -webkit-animation: rotate 9501ms -20000ms linear infinite;
+          animation: rotate 9501ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(5) .pool {
+  top: calc(50% - 537px / 2);
+  left: calc(50% - 537px / 2);
+  width: 537px;
+  height: 537px;
+  border: 8px solid #648494;
+  border-radius: 81% 19% 62% 38% / 90% 60% 40% 10%;
+}
+.pool_wrapper:nth-child(6) {
+  -webkit-animation: rotate 10532ms -20000ms linear infinite;
+          animation: rotate 10532ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(6) .pool {
+  top: calc(50% - 519px / 2);
+  left: calc(50% - 519px / 2);
+  width: 519px;
+  height: 519px;
+  border: 8px solid #64f948;
+  border-radius: 31% 69% 26% 74% / 21% 82% 18% 79%;
+}
+.pool_wrapper:nth-child(7) {
+  -webkit-animation: rotate 7968ms -20000ms linear infinite;
+          animation: rotate 7968ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(7) .pool {
+  top: calc(50% - 488px / 2);
+  left: calc(50% - 488px / 2);
+  width: 488px;
+  height: 488px;
+  border: 8px solid #648234;
+  border-radius: 84% 16% 70% 30% / 52% 98% 2% 48%;
+}
+.pool_wrapper:nth-child(8) {
+  -webkit-animation: rotate 10726ms -20000ms linear infinite;
+          animation: rotate 10726ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(8) .pool {
+  top: calc(50% - 427px / 2);
+  left: calc(50% - 427px / 2);
+  width: 427px;
+  height: 427px;
+  border: 8px solid #64bb50;
+  border-radius: 57% 43% 29% 71% / 33% 49% 51% 67%;
+}
+.pool_wrapper:nth-child(9) {
+  -webkit-animation: rotate 7572ms -20000ms linear infinite;
+          animation: rotate 7572ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(9) .pool {
+  top: calc(50% - 487px / 2);
+  left: calc(50% - 487px / 2);
+  width: 487px;
+  height: 487px;
+  border: 8px solid #64f168;
+  border-radius: 24% 76% 83% 17% / 45% 40% 60% 55%;
+}
+.pool_wrapper:nth-child(10) {
+  -webkit-animation: rotate 12601ms -20000ms linear infinite;
+          animation: rotate 12601ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(10) .pool {
+  top: calc(50% - 418px / 2);
+  left: calc(50% - 418px / 2);
+  width: 418px;
+  height: 418px;
+  border: 8px solid #64fc5c;
+  border-radius: 39% 61% 29% 71% / 24% 85% 15% 76%;
+}
+.pool_wrapper:nth-child(11) {
+  -webkit-animation: rotate 11176ms -20000ms linear infinite;
+          animation: rotate 11176ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(11) .pool {
+  top: calc(50% - 385px / 2);
+  left: calc(50% - 385px / 2);
+  width: 385px;
+  height: 385px;
+  border: 8px solid #64a93f;
+  border-radius: 27% 73% 87% 13% / 93% 87% 13% 7%;
+}
+.pool_wrapper:nth-child(12) {
+  -webkit-animation: rotate 8999ms -20000ms linear infinite;
+          animation: rotate 8999ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(12) .pool {
+  top: calc(50% - 486px / 2);
+  left: calc(50% - 486px / 2);
+  width: 486px;
+  height: 486px;
+  border: 8px solid #648653;
+  border-radius: 73% 27% 84% 16% / 47% 32% 68% 53%;
+}
+.pool_wrapper:nth-child(13) {
+  -webkit-animation: rotate 13426ms -20000ms linear infinite;
+          animation: rotate 13426ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(13) .pool {
+  top: calc(50% - 360px / 2);
+  left: calc(50% - 360px / 2);
+  width: 360px;
+  height: 360px;
+  border: 8px solid #647788;
+  border-radius: 36% 64% 26% 74% / 99% 99% 1% 1%;
+}
+.pool_wrapper:nth-child(14) {
+  -webkit-animation: rotate 14687ms -20000ms linear infinite;
+          animation: rotate 14687ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(14) .pool {
+  top: calc(50% - 378px / 2);
+  left: calc(50% - 378px / 2);
+  width: 378px;
+  height: 378px;
+  border: 8px solid #64b0a9;
+  border-radius: 85% 15% 52% 48% / 80% 26% 74% 20%;
+}
+.pool_wrapper:nth-child(15) {
+  -webkit-animation: rotate 7928ms -20000ms linear infinite;
+          animation: rotate 7928ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(15) .pool {
+  top: calc(50% - 405px / 2);
+  left: calc(50% - 405px / 2);
+  width: 405px;
+  height: 405px;
+  border: 8px solid #64d938;
+  border-radius: 54% 46% 30% 70% / 67% 68% 32% 33%;
+}
+.pool_wrapper:nth-child(16) {
+  -webkit-animation: rotate 5911ms -20000ms linear infinite;
+          animation: rotate 5911ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(16) .pool {
+  top: calc(50% - 519px / 2);
+  left: calc(50% - 519px / 2);
+  width: 519px;
+  height: 519px;
+  border: 8px solid #64c8c0;
+  border-radius: 58% 42% 28% 72% / 27% 75% 25% 73%;
+}
+.pool_wrapper:nth-child(17) {
+  -webkit-animation: rotate 10499ms -20000ms linear infinite;
+          animation: rotate 10499ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(17) .pool {
+  top: calc(50% - 360px / 2);
+  left: calc(50% - 360px / 2);
+  width: 360px;
+  height: 360px;
+  border: 8px solid #647e94;
+  border-radius: 83% 17% 59% 41% / 97% 35% 65% 3%;
+}
+.pool_wrapper:nth-child(18) {
+  -webkit-animation: rotate 8765ms -20000ms linear infinite;
+          animation: rotate 8765ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(18) .pool {
+  top: calc(50% - 513px / 2);
+  left: calc(50% - 513px / 2);
+  width: 513px;
+  height: 513px;
+  border: 8px solid #64e091;
+  border-radius: 93% 7% 44% 56% / 38% 65% 35% 62%;
+}
+.pool_wrapper:nth-child(19) {
+  -webkit-animation: rotate 12982ms -20000ms linear infinite;
+          animation: rotate 12982ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(19) .pool {
+  top: calc(50% - 543px / 2);
+  left: calc(50% - 543px / 2);
+  width: 543px;
+  height: 543px;
+  border: 8px solid #648e69;
+  border-radius: 94% 6% 92% 8% / 47% 43% 57% 53%;
+}
+.pool_wrapper:nth-child(20) {
+  -webkit-animation: rotate 10782ms -20000ms linear infinite;
+          animation: rotate 10782ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(20) .pool {
+  top: calc(50% - 499px / 2);
+  left: calc(50% - 499px / 2);
+  width: 499px;
+  height: 499px;
+  border: 8px solid #647c43;
+  border-radius: 60% 40% 48% 52% / 91% 84% 16% 9%;
+}
+.pool_wrapper:nth-child(21) {
+  -webkit-animation: rotate 5416ms -20000ms linear infinite;
+          animation: rotate 5416ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(21) .pool {
+  top: calc(50% - 429px / 2);
+  left: calc(50% - 429px / 2);
+  width: 429px;
+  height: 429px;
+  border: 8px solid #64f6b1;
+  border-radius: 30% 70% 80% 20% / 84% 81% 19% 16%;
+}
+.pool_wrapper:nth-child(22) {
+  -webkit-animation: rotate 6372ms -20000ms linear infinite;
+          animation: rotate 6372ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(22) .pool {
+  top: calc(50% - 450px / 2);
+  left: calc(50% - 450px / 2);
+  width: 450px;
+  height: 450px;
+  border: 8px solid #64aaaf;
+  border-radius: 34% 66% 54% 46% / 39% 53% 47% 61%;
+}
+.pool_wrapper:nth-child(23) {
+  -webkit-animation: rotate 5693ms -20000ms linear infinite;
+          animation: rotate 5693ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(23) .pool {
+  top: calc(50% - 531px / 2);
+  left: calc(50% - 531px / 2);
+  width: 531px;
+  height: 531px;
+  border: 8px solid #647d58;
+  border-radius: 91% 9% 52% 48% / 56% 73% 27% 44%;
+}
+.pool_wrapper:nth-child(24) {
+  -webkit-animation: rotate 10047ms -20000ms linear infinite;
+          animation: rotate 10047ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(24) .pool {
+  top: calc(50% - 436px / 2);
+  left: calc(50% - 436px / 2);
+  width: 436px;
+  height: 436px;
+  border: 8px solid #64f0c3;
+  border-radius: 31% 69% 52% 48% / 69% 84% 16% 31%;
+}
+.pool_wrapper:nth-child(25) {
+  -webkit-animation: rotate 13607ms -20000ms linear infinite;
+          animation: rotate 13607ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(25) .pool {
+  top: calc(50% - 377px / 2);
+  left: calc(50% - 377px / 2);
+  width: 377px;
+  height: 377px;
+  border: 8px solid #64de67;
+  border-radius: 73% 27% 65% 35% / 23% 38% 62% 77%;
+}
+.pool_wrapper:nth-child(26) {
+  -webkit-animation: rotate 9596ms -20000ms linear infinite;
+          animation: rotate 9596ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(26) .pool {
+  top: calc(50% - 475px / 2);
+  left: calc(50% - 475px / 2);
+  width: 475px;
+  height: 475px;
+  border: 8px solid #6477b8;
+  border-radius: 49% 51% 87% 13% / 28% 99% 1% 72%;
+}
+.pool_wrapper:nth-child(27) {
+  -webkit-animation: rotate 11871ms -20000ms linear infinite;
+          animation: rotate 11871ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(27) .pool {
+  top: calc(50% - 307px / 2);
+  left: calc(50% - 307px / 2);
+  width: 307px;
+  height: 307px;
+  border: 8px solid #64985b;
+  border-radius: 56% 44% 90% 10% / 34% 41% 59% 66%;
+}
+.pool_wrapper:nth-child(28) {
+  -webkit-animation: rotate 6288ms -20000ms linear infinite;
+          animation: rotate 6288ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(28) .pool {
+  top: calc(50% - 304px / 2);
+  left: calc(50% - 304px / 2);
+  width: 304px;
+  height: 304px;
+  border: 8px solid #64866c;
+  border-radius: 80% 20% 42% 58% / 36% 53% 47% 64%;
+}
+.pool_wrapper:nth-child(29) {
+  -webkit-animation: rotate 5428ms -20000ms linear infinite;
+          animation: rotate 5428ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(29) .pool {
+  top: calc(50% - 382px / 2);
+  left: calc(50% - 382px / 2);
+  width: 382px;
+  height: 382px;
+  border: 8px solid #64f578;
+  border-radius: 25% 75% 55% 45% / 29% 25% 75% 71%;
+}
+.pool_wrapper:nth-child(30) {
+  -webkit-animation: rotate 11054ms -20000ms linear infinite;
+          animation: rotate 11054ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(30) .pool {
+  top: calc(50% - 364px / 2);
+  left: calc(50% - 364px / 2);
+  width: 364px;
+  height: 364px;
+  border: 8px solid #649e67;
+  border-radius: 29% 71% 47% 53% / 82% 98% 2% 18%;
+}
+.pool_wrapper:nth-child(31) {
+  -webkit-animation: rotate 10548ms -20000ms linear infinite;
+          animation: rotate 10548ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(31) .pool {
+  top: calc(50% - 425px / 2);
+  left: calc(50% - 425px / 2);
+  width: 425px;
+  height: 425px;
+  border: 8px solid #64ca56;
+  border-radius: 32% 68% 30% 70% / 55% 49% 51% 45%;
+}
+.pool_wrapper:nth-child(32) {
+  -webkit-animation: rotate 11601ms -20000ms linear infinite;
+          animation: rotate 11601ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(32) .pool {
+  top: calc(50% - 522px / 2);
+  left: calc(50% - 522px / 2);
+  width: 522px;
+  height: 522px;
+  border: 8px solid #6483c5;
+  border-radius: 76% 24% 54% 46% / 73% 79% 21% 27%;
+}
+.pool_wrapper:nth-child(33) {
+  -webkit-animation: rotate 6742ms -20000ms linear infinite;
+          animation: rotate 6742ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(33) .pool {
+  top: calc(50% - 309px / 2);
+  left: calc(50% - 309px / 2);
+  width: 309px;
+  height: 309px;
+  border: 8px solid #64f935;
+  border-radius: 38% 62% 64% 36% / 60% 49% 51% 40%;
+}
+.pool_wrapper:nth-child(34) {
+  -webkit-animation: rotate 9830ms -20000ms linear infinite;
+          animation: rotate 9830ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(34) .pool {
+  top: calc(50% - 469px / 2);
+  left: calc(50% - 469px / 2);
+  width: 469px;
+  height: 469px;
+  border: 8px solid #6475cd;
+  border-radius: 34% 66% 40% 60% / 43% 27% 73% 57%;
+}
+.pool_wrapper:nth-child(35) {
+  -webkit-animation: rotate 11509ms -20000ms linear infinite;
+          animation: rotate 11509ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(35) .pool {
+  top: calc(50% - 369px / 2);
+  left: calc(50% - 369px / 2);
+  width: 369px;
+  height: 369px;
+  border: 8px solid #64c047;
+  border-radius: 67% 33% 37% 63% / 90% 24% 76% 10%;
+}
+.pool_wrapper:nth-child(36) {
+  -webkit-animation: rotate 8654ms -20000ms linear infinite;
+          animation: rotate 8654ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(36) .pool {
+  top: calc(50% - 516px / 2);
+  left: calc(50% - 516px / 2);
+  width: 516px;
+  height: 516px;
+  border: 8px solid #6483c6;
+  border-radius: 32% 68% 54% 46% / 47% 91% 9% 53%;
+}
+.pool_wrapper:nth-child(37) {
+  -webkit-animation: rotate 5558ms -20000ms linear infinite;
+          animation: rotate 5558ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(37) .pool {
+  top: calc(50% - 456px / 2);
+  left: calc(50% - 456px / 2);
+  width: 456px;
+  height: 456px;
+  border: 8px solid #64c269;
+  border-radius: 37% 63% 30% 70% / 31% 70% 30% 69%;
+}
+.pool_wrapper:nth-child(38) {
+  -webkit-animation: rotate 5051ms -20000ms linear infinite;
+          animation: rotate 5051ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(38) .pool {
+  top: calc(50% - 436px / 2);
+  left: calc(50% - 436px / 2);
+  width: 436px;
+  height: 436px;
+  border: 8px solid #649786;
+  border-radius: 79% 21% 89% 11% / 81% 50% 50% 19%;
+}
+.pool_wrapper:nth-child(39) {
+  -webkit-animation: rotate 11312ms -20000ms linear infinite;
+          animation: rotate 11312ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(39) .pool {
+  top: calc(50% - 419px / 2);
+  left: calc(50% - 419px / 2);
+  width: 419px;
+  height: 419px;
+  border: 8px solid #64ab4e;
+  border-radius: 43% 57% 89% 11% / 100% 79% 21% 0%;
+}
+.pool_wrapper:nth-child(40) {
+  -webkit-animation: rotate 12125ms -20000ms linear infinite;
+          animation: rotate 12125ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(40) .pool {
+  top: calc(50% - 538px / 2);
+  left: calc(50% - 538px / 2);
+  width: 538px;
+  height: 538px;
+  border: 8px solid #648c61;
+  border-radius: 92% 8% 86% 14% / 25% 81% 19% 75%;
+}
+.pool_wrapper:nth-child(41) {
+  -webkit-animation: rotate 11263ms -20000ms linear infinite;
+          animation: rotate 11263ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(41) .pool {
+  top: calc(50% - 542px / 2);
+  left: calc(50% - 542px / 2);
+  width: 542px;
+  height: 542px;
+  border: 8px solid #64738a;
+  border-radius: 30% 70% 81% 19% / 25% 30% 70% 75%;
+}
+.pool_wrapper:nth-child(42) {
+  -webkit-animation: rotate 6685ms -20000ms linear infinite;
+          animation: rotate 6685ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(42) .pool {
+  top: calc(50% - 405px / 2);
+  left: calc(50% - 405px / 2);
+  width: 405px;
+  height: 405px;
+  border: 8px solid #64db3e;
+  border-radius: 25% 75% 39% 61% / 75% 27% 73% 25%;
+}
+.pool_wrapper:nth-child(43) {
+  -webkit-animation: rotate 13957ms -20000ms linear infinite;
+          animation: rotate 13957ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(43) .pool {
+  top: calc(50% - 389px / 2);
+  left: calc(50% - 389px / 2);
+  width: 389px;
+  height: 389px;
+  border: 8px solid #647d81;
+  border-radius: 95% 5% 89% 11% / 60% 38% 62% 40%;
+}
+.pool_wrapper:nth-child(44) {
+  -webkit-animation: rotate 5149ms -20000ms linear infinite;
+          animation: rotate 5149ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(44) .pool {
+  top: calc(50% - 314px / 2);
+  left: calc(50% - 314px / 2);
+  width: 314px;
+  height: 314px;
+  border: 8px solid #64f45e;
+  border-radius: 83% 17% 59% 41% / 44% 99% 1% 56%;
+}
+.pool_wrapper:nth-child(45) {
+  -webkit-animation: rotate 14024ms -20000ms linear infinite;
+          animation: rotate 14024ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(45) .pool {
+  top: calc(50% - 332px / 2);
+  left: calc(50% - 332px / 2);
+  width: 332px;
+  height: 332px;
+  border: 8px solid #64f451;
+  border-radius: 27% 73% 44% 56% / 42% 90% 10% 58%;
+}
+.pool_wrapper:nth-child(46) {
+  -webkit-animation: rotate 13324ms -20000ms linear infinite;
+          animation: rotate 13324ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(46) .pool {
+  top: calc(50% - 476px / 2);
+  left: calc(50% - 476px / 2);
+  width: 476px;
+  height: 476px;
+  border: 8px solid #64d64d;
+  border-radius: 56% 44% 48% 52% / 66% 40% 60% 34%;
+}
+.pool_wrapper:nth-child(47) {
+  -webkit-animation: rotate 11262ms -20000ms linear infinite;
+          animation: rotate 11262ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(47) .pool {
+  top: calc(50% - 340px / 2);
+  left: calc(50% - 340px / 2);
+  width: 340px;
+  height: 340px;
+  border: 8px solid #646b78;
+  border-radius: 27% 73% 81% 19% / 89% 68% 32% 11%;
+}
+.pool_wrapper:nth-child(48) {
+  -webkit-animation: rotate 6820ms -20000ms linear infinite;
+          animation: rotate 6820ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(48) .pool {
+  top: calc(50% - 439px / 2);
+  left: calc(50% - 439px / 2);
+  width: 439px;
+  height: 439px;
+  border: 8px solid #648649;
+  border-radius: 80% 20% 37% 63% / 77% 87% 13% 23%;
+}
+.pool_wrapper:nth-child(49) {
+  -webkit-animation: rotate 10721ms -20000ms linear infinite;
+          animation: rotate 10721ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(49) .pool {
+  top: calc(50% - 325px / 2);
+  left: calc(50% - 325px / 2);
+  width: 325px;
+  height: 325px;
+  border: 8px solid #64ec48;
+  border-radius: 28% 72% 95% 5% / 54% 78% 22% 46%;
+}
+.pool_wrapper:nth-child(50) {
+  -webkit-animation: rotate 13237ms -20000ms linear infinite;
+          animation: rotate 13237ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(50) .pool {
+  top: calc(50% - 504px / 2);
+  left: calc(50% - 504px / 2);
+  width: 504px;
+  height: 504px;
+  border: 8px solid #64dfc4;
+  border-radius: 88% 12% 39% 61% / 23% 46% 54% 77%;
+}
+.pool_wrapper:nth-child(51) {
+  -webkit-animation: rotate 8081ms -20000ms linear infinite;
+          animation: rotate 8081ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(51) .pool {
+  top: calc(50% - 453px / 2);
+  left: calc(50% - 453px / 2);
+  width: 453px;
+  height: 453px;
+  border: 8px solid #64f567;
+  border-radius: 44% 56% 46% 54% / 65% 49% 51% 35%;
+}
+.pool_wrapper:nth-child(52) {
+  -webkit-animation: rotate 14990ms -20000ms linear infinite;
+          animation: rotate 14990ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(52) .pool {
+  top: calc(50% - 514px / 2);
+  left: calc(50% - 514px / 2);
+  width: 514px;
+  height: 514px;
+  border: 8px solid #64f374;
+  border-radius: 34% 66% 46% 54% / 72% 56% 44% 28%;
+}
+.pool_wrapper:nth-child(53) {
+  -webkit-animation: rotate 6584ms -20000ms linear infinite;
+          animation: rotate 6584ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(53) .pool {
+  top: calc(50% - 537px / 2);
+  left: calc(50% - 537px / 2);
+  width: 537px;
+  height: 537px;
+  border: 8px solid #6482c9;
+  border-radius: 63% 37% 26% 74% / 46% 42% 58% 54%;
+}
+.pool_wrapper:nth-child(54) {
+  -webkit-animation: rotate 12336ms -20000ms linear infinite;
+          animation: rotate 12336ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(54) .pool {
+  top: calc(50% - 525px / 2);
+  left: calc(50% - 525px / 2);
+  width: 525px;
+  height: 525px;
+  border: 8px solid #64f35f;
+  border-radius: 83% 17% 74% 26% / 99% 61% 39% 1%;
+}
+.pool_wrapper:nth-child(55) {
+  -webkit-animation: rotate 13608ms -20000ms linear infinite;
+          animation: rotate 13608ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(55) .pool {
+  top: calc(50% - 508px / 2);
+  left: calc(50% - 508px / 2);
+  width: 508px;
+  height: 508px;
+  border: 8px solid #647847;
+  border-radius: 73% 27% 85% 15% / 48% 37% 63% 52%;
+}
+.pool_wrapper:nth-child(56) {
+  -webkit-animation: rotate 9730ms -20000ms linear infinite;
+          animation: rotate 9730ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(56) .pool {
+  top: calc(50% - 398px / 2);
+  left: calc(50% - 398px / 2);
+  width: 398px;
+  height: 398px;
+  border: 8px solid #64d4a4;
+  border-radius: 60% 40% 30% 70% / 27% 41% 59% 73%;
+}
+.pool_wrapper:nth-child(57) {
+  -webkit-animation: rotate 9249ms -20000ms linear infinite;
+          animation: rotate 9249ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(57) .pool {
+  top: calc(50% - 355px / 2);
+  left: calc(50% - 355px / 2);
+  width: 355px;
+  height: 355px;
+  border: 8px solid #646b39;
+  border-radius: 62% 38% 90% 10% / 44% 65% 35% 56%;
+}
+.pool_wrapper:nth-child(58) {
+  -webkit-animation: rotate 7904ms -20000ms linear infinite;
+          animation: rotate 7904ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(58) .pool {
+  top: calc(50% - 464px / 2);
+  left: calc(50% - 464px / 2);
+  width: 464px;
+  height: 464px;
+  border: 8px solid #64fc99;
+  border-radius: 57% 43% 66% 34% / 36% 49% 51% 64%;
+}
+.pool_wrapper:nth-child(59) {
+  -webkit-animation: rotate 11986ms -20000ms linear infinite;
+          animation: rotate 11986ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(59) .pool {
+  top: calc(50% - 534px / 2);
+  left: calc(50% - 534px / 2);
+  width: 534px;
+  height: 534px;
+  border: 8px solid #646548;
+  border-radius: 27% 73% 56% 44% / 38% 100% 0% 62%;
+}
+.pool_wrapper:nth-child(60) {
+  -webkit-animation: rotate 5560ms -20000ms linear infinite;
+          animation: rotate 5560ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(60) .pool {
+  top: calc(50% - 533px / 2);
+  left: calc(50% - 533px / 2);
+  width: 533px;
+  height: 533px;
+  border: 8px solid #648a3a;
+  border-radius: 58% 42% 22% 78% / 59% 59% 41% 41%;
+}
+.pool_wrapper:nth-child(61) {
+  -webkit-animation: rotate 8670ms -20000ms linear infinite;
+          animation: rotate 8670ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(61) .pool {
+  top: calc(50% - 468px / 2);
+  left: calc(50% - 468px / 2);
+  width: 468px;
+  height: 468px;
+  border: 8px solid #6470ac;
+  border-radius: 85% 15% 91% 9% / 26% 52% 48% 74%;
+}
+.pool_wrapper:nth-child(62) {
+  -webkit-animation: rotate 6854ms -20000ms linear infinite;
+          animation: rotate 6854ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(62) .pool {
+  top: calc(50% - 450px / 2);
+  left: calc(50% - 450px / 2);
+  width: 450px;
+  height: 450px;
+  border: 8px solid #64e687;
+  border-radius: 58% 42% 66% 34% / 67% 61% 39% 33%;
+}
+.pool_wrapper:nth-child(63) {
+  -webkit-animation: rotate 11721ms -20000ms linear infinite;
+          animation: rotate 11721ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(63) .pool {
+  top: calc(50% - 413px / 2);
+  left: calc(50% - 413px / 2);
+  width: 413px;
+  height: 413px;
+  border: 8px solid #6479b8;
+  border-radius: 60% 40% 58% 42% / 86% 71% 29% 14%;
+}
+.pool_wrapper:nth-child(64) {
+  -webkit-animation: rotate 12503ms -20000ms linear infinite;
+          animation: rotate 12503ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(64) .pool {
+  top: calc(50% - 546px / 2);
+  left: calc(50% - 546px / 2);
+  width: 546px;
+  height: 546px;
+  border: 8px solid #649dac;
+  border-radius: 55% 45% 93% 7% / 71% 63% 37% 29%;
+}
+.pool_wrapper:nth-child(65) {
+  -webkit-animation: rotate 9011ms -20000ms linear infinite;
+          animation: rotate 9011ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(65) .pool {
+  top: calc(50% - 474px / 2);
+  left: calc(50% - 474px / 2);
+  width: 474px;
+  height: 474px;
+  border: 8px solid #64ea6e;
+  border-radius: 30% 70% 83% 17% / 69% 91% 9% 31%;
+}
+.pool_wrapper:nth-child(66) {
+  -webkit-animation: rotate 12092ms -20000ms linear infinite;
+          animation: rotate 12092ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(66) .pool {
+  top: calc(50% - 543px / 2);
+  left: calc(50% - 543px / 2);
+  width: 543px;
+  height: 543px;
+  border: 8px solid #64874b;
+  border-radius: 84% 16% 81% 19% / 50% 87% 13% 50%;
+}
+.pool_wrapper:nth-child(67) {
+  -webkit-animation: rotate 12678ms -20000ms linear infinite;
+          animation: rotate 12678ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(67) .pool {
+  top: calc(50% - 434px / 2);
+  left: calc(50% - 434px / 2);
+  width: 434px;
+  height: 434px;
+  border: 8px solid #64c1a2;
+  border-radius: 26% 74% 94% 6% / 26% 60% 40% 74%;
+}
+.pool_wrapper:nth-child(68) {
+  -webkit-animation: rotate 14845ms -20000ms linear infinite;
+          animation: rotate 14845ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(68) .pool {
+  top: calc(50% - 429px / 2);
+  left: calc(50% - 429px / 2);
+  width: 429px;
+  height: 429px;
+  border: 8px solid #64867b;
+  border-radius: 80% 20% 79% 21% / 24% 54% 46% 76%;
+}
+.pool_wrapper:nth-child(69) {
+  -webkit-animation: rotate 13899ms -20000ms linear infinite;
+          animation: rotate 13899ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(69) .pool {
+  top: calc(50% - 524px / 2);
+  left: calc(50% - 524px / 2);
+  width: 524px;
+  height: 524px;
+  border: 8px solid #647591;
+  border-radius: 95% 5% 87% 13% / 77% 85% 15% 23%;
+}
+.pool_wrapper:nth-child(70) {
+  -webkit-animation: rotate 8095ms -20000ms linear infinite;
+          animation: rotate 8095ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(70) .pool {
+  top: calc(50% - 323px / 2);
+  left: calc(50% - 323px / 2);
+  width: 323px;
+  height: 323px;
+  border: 8px solid #64c178;
+  border-radius: 57% 43% 61% 39% / 40% 54% 46% 60%;
+}
+.pool_wrapper:nth-child(71) {
+  -webkit-animation: rotate 5035ms -20000ms linear infinite;
+          animation: rotate 5035ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(71) .pool {
+  top: calc(50% - 389px / 2);
+  left: calc(50% - 389px / 2);
+  width: 389px;
+  height: 389px;
+  border: 8px solid #64b27b;
+  border-radius: 69% 31% 94% 6% / 32% 73% 27% 68%;
+}
+.pool_wrapper:nth-child(72) {
+  -webkit-animation: rotate 9842ms -20000ms linear infinite;
+          animation: rotate 9842ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(72) .pool {
+  top: calc(50% - 455px / 2);
+  left: calc(50% - 455px / 2);
+  width: 455px;
+  height: 455px;
+  border: 8px solid #647ebc;
+  border-radius: 50% 50% 55% 45% / 97% 25% 75% 3%;
+}
+.pool_wrapper:nth-child(73) {
+  -webkit-animation: rotate 5052ms -20000ms linear infinite;
+          animation: rotate 5052ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(73) .pool {
+  top: calc(50% - 519px / 2);
+  left: calc(50% - 519px / 2);
+  width: 519px;
+  height: 519px;
+  border: 8px solid #649ac7;
+  border-radius: 43% 57% 58% 42% / 39% 36% 64% 61%;
+}
+.pool_wrapper:nth-child(74) {
+  -webkit-animation: rotate 14214ms -20000ms linear infinite;
+          animation: rotate 14214ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(74) .pool {
+  top: calc(50% - 414px / 2);
+  left: calc(50% - 414px / 2);
+  width: 414px;
+  height: 414px;
+  border: 8px solid #64b7a4;
+  border-radius: 50% 50% 78% 22% / 29% 79% 21% 71%;
+}
+.pool_wrapper:nth-child(75) {
+  -webkit-animation: rotate 6428ms -20000ms linear infinite;
+          animation: rotate 6428ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(75) .pool {
+  top: calc(50% - 490px / 2);
+  left: calc(50% - 490px / 2);
+  width: 490px;
+  height: 490px;
+  border: 8px solid #64c761;
+  border-radius: 88% 12% 99% 1% / 49% 45% 55% 51%;
+}
+.pool_wrapper:nth-child(76) {
+  -webkit-animation: rotate 9748ms -20000ms linear infinite;
+          animation: rotate 9748ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(76) .pool {
+  top: calc(50% - 333px / 2);
+  left: calc(50% - 333px / 2);
+  width: 333px;
+  height: 333px;
+  border: 8px solid #6480b3;
+  border-radius: 59% 41% 47% 53% / 32% 67% 33% 68%;
+}
+.pool_wrapper:nth-child(77) {
+  -webkit-animation: rotate 9885ms -20000ms linear infinite;
+          animation: rotate 9885ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(77) .pool {
+  top: calc(50% - 313px / 2);
+  left: calc(50% - 313px / 2);
+  width: 313px;
+  height: 313px;
+  border: 8px solid #64c486;
+  border-radius: 54% 46% 27% 73% / 47% 95% 5% 53%;
+}
+.pool_wrapper:nth-child(78) {
+  -webkit-animation: rotate 8639ms -20000ms linear infinite;
+          animation: rotate 8639ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(78) .pool {
+  top: calc(50% - 362px / 2);
+  left: calc(50% - 362px / 2);
+  width: 362px;
+  height: 362px;
+  border: 8px solid #646f5c;
+  border-radius: 83% 17% 37% 63% / 48% 81% 19% 52%;
+}
+.pool_wrapper:nth-child(79) {
+  -webkit-animation: rotate 6382ms -20000ms linear infinite;
+          animation: rotate 6382ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(79) .pool {
+  top: calc(50% - 432px / 2);
+  left: calc(50% - 432px / 2);
+  width: 432px;
+  height: 432px;
+  border: 8px solid #64ac8d;
+  border-radius: 70% 30% 51% 49% / 97% 35% 65% 3%;
+}
+.pool_wrapper:nth-child(80) {
+  -webkit-animation: rotate 6528ms -20000ms linear infinite;
+          animation: rotate 6528ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(80) .pool {
+  top: calc(50% - 335px / 2);
+  left: calc(50% - 335px / 2);
+  width: 335px;
+  height: 335px;
+  border: 8px solid #64e0a3;
+  border-radius: 30% 70% 31% 69% / 53% 80% 20% 47%;
+}
+.pool_wrapper:nth-child(81) {
+  -webkit-animation: rotate 11030ms -20000ms linear infinite;
+          animation: rotate 11030ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(81) .pool {
+  top: calc(50% - 508px / 2);
+  left: calc(50% - 508px / 2);
+  width: 508px;
+  height: 508px;
+  border: 8px solid #64ac5c;
+  border-radius: 47% 53% 95% 5% / 73% 84% 16% 27%;
+}
+.pool_wrapper:nth-child(82) {
+  -webkit-animation: rotate 11042ms -20000ms linear infinite;
+          animation: rotate 11042ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(82) .pool {
+  top: calc(50% - 331px / 2);
+  left: calc(50% - 331px / 2);
+  width: 331px;
+  height: 331px;
+  border: 8px solid #64db82;
+  border-radius: 92% 8% 50% 50% / 71% 28% 72% 29%;
+}
+.pool_wrapper:nth-child(83) {
+  -webkit-animation: rotate 6388ms -20000ms linear infinite;
+          animation: rotate 6388ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(83) .pool {
+  top: calc(50% - 362px / 2);
+  left: calc(50% - 362px / 2);
+  width: 362px;
+  height: 362px;
+  border: 8px solid #64944d;
+  border-radius: 93% 7% 65% 35% / 88% 32% 68% 12%;
+}
+.pool_wrapper:nth-child(84) {
+  -webkit-animation: rotate 12736ms -20000ms linear infinite;
+          animation: rotate 12736ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(84) .pool {
+  top: calc(50% - 385px / 2);
+  left: calc(50% - 385px / 2);
+  width: 385px;
+  height: 385px;
+  border: 8px solid #647062;
+  border-radius: 70% 30% 89% 11% / 29% 61% 39% 71%;
+}
+.pool_wrapper:nth-child(85) {
+  -webkit-animation: rotate 12577ms -20000ms linear infinite;
+          animation: rotate 12577ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(85) .pool {
+  top: calc(50% - 381px / 2);
+  left: calc(50% - 381px / 2);
+  width: 381px;
+  height: 381px;
+  border: 8px solid #64808c;
+  border-radius: 61% 39% 75% 25% / 70% 49% 51% 30%;
+}
+.pool_wrapper:nth-child(86) {
+  -webkit-animation: rotate 12927ms -20000ms linear infinite;
+          animation: rotate 12927ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(86) .pool {
+  top: calc(50% - 363px / 2);
+  left: calc(50% - 363px / 2);
+  width: 363px;
+  height: 363px;
+  border: 8px solid #64e187;
+  border-radius: 65% 35% 48% 52% / 40% 31% 69% 60%;
+}
+.pool_wrapper:nth-child(87) {
+  -webkit-animation: rotate 5750ms -20000ms linear infinite;
+          animation: rotate 5750ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(87) .pool {
+  top: calc(50% - 382px / 2);
+  left: calc(50% - 382px / 2);
+  width: 382px;
+  height: 382px;
+  border: 8px solid #64c238;
+  border-radius: 49% 51% 37% 63% / 99% 68% 32% 1%;
+}
+.pool_wrapper:nth-child(88) {
+  -webkit-animation: rotate 5436ms -20000ms linear infinite;
+          animation: rotate 5436ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(88) .pool {
+  top: calc(50% - 349px / 2);
+  left: calc(50% - 349px / 2);
+  width: 349px;
+  height: 349px;
+  border: 8px solid #649a94;
+  border-radius: 62% 38% 86% 14% / 51% 32% 68% 49%;
+}
+.pool_wrapper:nth-child(89) {
+  -webkit-animation: rotate 12430ms -20000ms linear infinite;
+          animation: rotate 12430ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(89) .pool {
+  top: calc(50% - 355px / 2);
+  left: calc(50% - 355px / 2);
+  width: 355px;
+  height: 355px;
+  border: 8px solid #649a72;
+  border-radius: 69% 31% 97% 3% / 43% 24% 76% 57%;
+}
+.pool_wrapper:nth-child(90) {
+  -webkit-animation: rotate 9726ms -20000ms linear infinite;
+          animation: rotate 9726ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(90) .pool {
+  top: calc(50% - 511px / 2);
+  left: calc(50% - 511px / 2);
+  width: 511px;
+  height: 511px;
+  border: 8px solid #648797;
+  border-radius: 25% 75% 88% 12% / 69% 60% 40% 31%;
+}
+.pool_wrapper:nth-child(91) {
+  -webkit-animation: rotate 8278ms -20000ms linear infinite;
+          animation: rotate 8278ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(91) .pool {
+  top: calc(50% - 328px / 2);
+  left: calc(50% - 328px / 2);
+  width: 328px;
+  height: 328px;
+  border: 8px solid #64944a;
+  border-radius: 55% 45% 88% 12% / 50% 70% 30% 50%;
+}
+.pool_wrapper:nth-child(92) {
+  -webkit-animation: rotate 13455ms -20000ms linear infinite;
+          animation: rotate 13455ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(92) .pool {
+  top: calc(50% - 477px / 2);
+  left: calc(50% - 477px / 2);
+  width: 477px;
+  height: 477px;
+  border: 8px solid #64cb7e;
+  border-radius: 95% 5% 83% 17% / 92% 31% 69% 8%;
+}
+.pool_wrapper:nth-child(93) {
+  -webkit-animation: rotate 12684ms -20000ms linear infinite;
+          animation: rotate 12684ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(93) .pool {
+  top: calc(50% - 463px / 2);
+  left: calc(50% - 463px / 2);
+  width: 463px;
+  height: 463px;
+  border: 8px solid #64b97b;
+  border-radius: 42% 58% 98% 2% / 66% 63% 37% 34%;
+}
+.pool_wrapper:nth-child(94) {
+  -webkit-animation: rotate 6510ms -20000ms linear infinite;
+          animation: rotate 6510ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(94) .pool {
+  top: calc(50% - 407px / 2);
+  left: calc(50% - 407px / 2);
+  width: 407px;
+  height: 407px;
+  border: 8px solid #647b62;
+  border-radius: 52% 48% 65% 35% / 42% 29% 71% 58%;
+}
+.pool_wrapper:nth-child(95) {
+  -webkit-animation: rotate 5624ms -20000ms linear infinite;
+          animation: rotate 5624ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(95) .pool {
+  top: calc(50% - 409px / 2);
+  left: calc(50% - 409px / 2);
+  width: 409px;
+  height: 409px;
+  border: 8px solid #649763;
+  border-radius: 23% 77% 57% 43% / 76% 55% 45% 24%;
+}
+.pool_wrapper:nth-child(96) {
+  -webkit-animation: rotate 5584ms -20000ms linear infinite;
+          animation: rotate 5584ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(96) .pool {
+  top: calc(50% - 497px / 2);
+  left: calc(50% - 497px / 2);
+  width: 497px;
+  height: 497px;
+  border: 8px solid #64c79e;
+  border-radius: 25% 75% 87% 13% / 87% 31% 69% 13%;
+}
+.pool_wrapper:nth-child(97) {
+  -webkit-animation: rotate 7481ms -20000ms linear infinite;
+          animation: rotate 7481ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(97) .pool {
+  top: calc(50% - 470px / 2);
+  left: calc(50% - 470px / 2);
+  width: 470px;
+  height: 470px;
+  border: 8px solid #6490c0;
+  border-radius: 100% 0% 26% 74% / 69% 93% 7% 31%;
+}
+.pool_wrapper:nth-child(98) {
+  -webkit-animation: rotate 10711ms -20000ms linear infinite;
+          animation: rotate 10711ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(98) .pool {
+  top: calc(50% - 435px / 2);
+  left: calc(50% - 435px / 2);
+  width: 435px;
+  height: 435px;
+  border: 8px solid #64b489;
+  border-radius: 28% 72% 25% 75% / 22% 36% 64% 78%;
+}
+.pool_wrapper:nth-child(99) {
+  -webkit-animation: rotate 12094ms -20000ms linear infinite;
+          animation: rotate 12094ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(99) .pool {
+  top: calc(50% - 438px / 2);
+  left: calc(50% - 438px / 2);
+  width: 438px;
+  height: 438px;
+  border: 8px solid #647b61;
+  border-radius: 24% 76% 91% 9% / 96% 77% 23% 4%;
+}
+.pool_wrapper:nth-child(100) {
+  -webkit-animation: rotate 14776ms -20000ms linear infinite;
+          animation: rotate 14776ms -20000ms linear infinite;
+  mix-blend-mode: screen;
+}
+.pool_wrapper:nth-child(100) .pool {
+  top: calc(50% - 413px / 2);
+  left: calc(50% - 413px / 2);
+  width: 413px;
+  height: 413px;
+  border: 8px solid #64f545;
+  border-radius: 93% 7% 36% 64% / 48% 89% 11% 52%;
+}
+
+@-webkit-keyframes rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+@keyframes rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes shakeX {
+  0% {
+    -webkit-transform: translateX(-10px);
+            transform: translateX(-10px);
+  }
+  100% {
+    -webkit-transform: translateX(10px);
+            transform: translateX(10px);
+  }
+}
+@keyframes shakeX {
+  0% {
+    -webkit-transform: translateX(-10px);
+            transform: translateX(-10px);
+  }
+  100% {
+    -webkit-transform: translateX(10px);
+            transform: translateX(10px);
+  }
+}
+@-webkit-keyframes shakeY {
+  0% {
+    -webkit-transform: translateY(-10px);
+            transform: translateY(-10px);
+  }
+  100% {
+    -webkit-transform: translateY(10px);
+            transform: translateY(10px);
+  }
+}
+@keyframes shakeY {
+  0% {
+    -webkit-transform: translateY(-10px);
+            transform: translateY(-10px);
+  }
+  100% {
+    -webkit-transform: translateY(10px);
+            transform: translateY(10px);
+  }
+}
diff --git a/only-css-infinite-wave/license.txt b/only-css-infinite-wave/license.txt
new file mode 100644
index 0000000..c19bb22
--- /dev/null
+++ b/only-css-infinite-wave/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Yusuke Nakaya (https://codepen.io/YusukeNakaya/pen/MMqwVw)
+
+
+Fork of an original work by Yusuke Nakaya (https://codepen.io/YusukeNakaya/pen/xmGvOZ)
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/only-css-infinite-wave/src/index.pug b/only-css-infinite-wave/src/index.pug
new file mode 100644
index 0000000..ba292cf
--- /dev/null
+++ b/only-css-infinite-wave/src/index.pug
@@ -0,0 +1,7 @@
+.water
+  - for (i = 0; i < 60; i++)
+    .pool_wrapper
+      .pool
+.human
+  .human_shake.o-x
+    .human_shake.o-y 🏄
diff --git a/only-css-infinite-wave/src/style.scss b/only-css-infinite-wave/src/style.scss
new file mode 100644
index 0000000..8787d56
--- /dev/null
+++ b/only-css-infinite-wave/src/style.scss
@@ -0,0 +1,92 @@
+body {
+  background: #000;
+  height: 100vh;
+  overflow: hidden;
+  user-select: none;
+}
+
+.human {
+  position: absolute;
+  top: calc(50% - 250px);
+  left: calc(50% - 1em);
+  font-size: 3rem;
+  
+  &_shake {
+    &.o-x {
+      animation: 2500ms shakeX ease-in-out infinite alternate;
+    }
+    
+    &.o-y {
+      animation: 1000ms shakeY ease-in-out infinite alternate;
+    }
+  }
+}
+
+.water {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  filter: blur(10px) contrast(500) hue-rotate(40deg);
+}
+
+.pool {
+  position: absolute;
+  
+  @for $i from 1 through 100 {
+    &_wrapper:nth-child(#{$i}) {
+      animation: rotate random(10000) + 5000ms -20000ms linear infinite;
+      mix-blend-mode: screen;
+    }
+
+    &_wrapper:nth-child(#{$i}) & {
+      $size: random(250) + 300px;
+      top: calc(50% - #{$size} / 2);
+      left: calc(50% - #{$size} / 2);
+      width: $size;
+      height: $size;
+      border: 8px solid rgba(100, random(155) + 100, random(155) + 50, 1);
+      $pattern1: random(80) + 20;
+      $pattern2: 100 - $pattern1;
+      $pattern3: random(80) + 20;
+      $pattern4: 100 - $pattern3;
+      $pattern5: random(80) + 20;
+      $pattern6: 100 - $pattern5;
+      $pattern7: random(80) + 20;
+      $pattern8: 100 - $pattern7;
+      border-radius: #{$pattern3 + 0%} #{$pattern4 + 0%} #{$pattern1 + 0%} #{$pattern2 + 0%} / #{$pattern5 + 0%} #{$pattern7 + 0%} #{$pattern8 + 0%} #{$pattern6 + 0%};
+    }
+  }  
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes shakeX {
+  0% {
+    transform: translateX(-10px);
+  }
+  
+  100% {
+    transform: translateX(10px);
+  }
+}
+
+@keyframes shakeY {
+  0% {
+    transform: translateY(-10px);
+  }
+  
+  100% {
+    transform: translateY(10px);
+  }
+}
\ No newline at end of file
diff --git a/only-css-moon-clip/README.markdown b/only-css-moon-clip/README.markdown
new file mode 100644
index 0000000..77ca3eb
--- /dev/null
+++ b/only-css-moon-clip/README.markdown
@@ -0,0 +1,5 @@
+# Only CSS: Moon Clip🌜
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/YusukeNakaya/pen/abNdeOj](https://codepen.io/YusukeNakaya/pen/abNdeOj).
+
+🌜
diff --git a/only-css-moon-clip/dist/index.html b/only-css-moon-clip/dist/index.html
new file mode 100644
index 0000000..7e8322a
--- /dev/null
+++ b/only-css-moon-clip/dist/index.html
@@ -0,0 +1,583 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Only CSS: Moon Clip🌜</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="night">
+  <div class="window">
+    <div class="stars">
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+    </div>
+    <div class="stars">
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="shooting"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/only-css-moon-clip/dist/style.css b/only-css-moon-clip/dist/style.css
new file mode 100644
index 0000000..f48cc99
--- /dev/null
+++ b/only-css-moon-clip/dist/style.css
@@ -0,0 +1,1694 @@
+body {
+  background: #ffe645;
+  height: 100vh;
+  overflow: hidden;
+  display: -webkit-box;
+  display: flex;
+  font-family: 'Anton', sans-serif;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+}
+
+.night {
+  position: relative;
+  width: 300px;
+  height: 300px;
+}
+.night::after {
+  content: '';
+  position: absolute;
+  left: 35%;
+  width: 100%;
+  height: 100%;
+  background: #ffe645;
+  border-radius: 100%;
+  -webkit-transform: scale(1.1);
+          transform: scale(1.1);
+}
+.night::before {
+  content: '';
+  position: absolute;
+  bottom: -3%;
+  left: -10%;
+  width: 70%;
+  height: 6%;
+  background: #edcd2b;
+  border-radius: 100%;
+}
+
+.window {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(-45deg, #0a1433 0%, #222b3f 100%);
+  border-radius: 100%;
+  overflow: hidden;
+}
+
+.star {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+}
+.star:nth-child(1) {
+  top: 46%;
+  left: 82%;
+  background: #c6c6c6;
+}
+.star:nth-child(2) {
+  top: 8%;
+  left: 58%;
+  background: #555555;
+}
+.star:nth-child(3) {
+  top: 80%;
+  left: 64%;
+  background: #3c3c3c;
+}
+.star:nth-child(4) {
+  top: 75%;
+  left: 49%;
+  background: #cccccc;
+}
+.star:nth-child(5) {
+  top: 41%;
+  left: 100%;
+  background: #a3a3a3;
+}
+.star:nth-child(6) {
+  top: 72%;
+  left: 26%;
+  background: #f8f8f8;
+}
+.star:nth-child(7) {
+  top: 48%;
+  left: 99%;
+  background: #373737;
+}
+.star:nth-child(8) {
+  top: 24%;
+  left: 32%;
+  background: #0b0b0b;
+}
+.star:nth-child(9) {
+  top: 6%;
+  left: 12%;
+  background: #686868;
+}
+.star:nth-child(10) {
+  top: 5%;
+  left: 30%;
+  background: #ececec;
+}
+.star:nth-child(11) {
+  top: 35%;
+  left: 13%;
+  background: #8d8d8d;
+}
+.star:nth-child(12) {
+  top: 2%;
+  left: 40%;
+  background: #3b3b3b;
+}
+.star:nth-child(13) {
+  top: 98%;
+  left: 35%;
+  background: #cecece;
+}
+.star:nth-child(14) {
+  top: 53%;
+  left: 14%;
+  background: #d2d2d2;
+}
+.star:nth-child(15) {
+  top: 42%;
+  left: 47%;
+  background: #5b5b5b;
+}
+.star:nth-child(16) {
+  top: 19%;
+  left: 43%;
+  background: #d1d1d1;
+}
+.star:nth-child(17) {
+  top: 38%;
+  left: 52%;
+  background: #c7c7c7;
+}
+.star:nth-child(18) {
+  top: 8%;
+  left: 80%;
+  background: #c3c3c3;
+}
+.star:nth-child(19) {
+  top: 45%;
+  left: 15%;
+  background: #101010;
+}
+.star:nth-child(20) {
+  top: 100%;
+  left: 19%;
+  background: #ededed;
+}
+.star:nth-child(21) {
+  top: 49%;
+  left: 54%;
+  background: #171717;
+}
+.star:nth-child(22) {
+  top: 23%;
+  left: 42%;
+  background: #b7b7b7;
+}
+.star:nth-child(23) {
+  top: 97%;
+  left: 8%;
+  background: #636363;
+}
+.star:nth-child(24) {
+  top: 25%;
+  left: 51%;
+  background: #0c0c0c;
+}
+.star:nth-child(25) {
+  top: 62%;
+  left: 82%;
+  background: #e3e3e3;
+}
+.star:nth-child(26) {
+  top: 24%;
+  left: 26%;
+  background: #060606;
+}
+.star:nth-child(27) {
+  top: 59%;
+  left: 32%;
+  background: #c2c2c2;
+}
+.star:nth-child(28) {
+  top: 64%;
+  left: 24%;
+  background: #030303;
+}
+.star:nth-child(29) {
+  top: 14%;
+  left: 5%;
+  background: #8d8d8d;
+}
+.star:nth-child(30) {
+  top: 6%;
+  left: 98%;
+  background: #dfdfdf;
+}
+.star:nth-child(31) {
+  top: 94%;
+  left: 28%;
+  background: #7c7c7c;
+}
+.star:nth-child(32) {
+  top: 94%;
+  left: 40%;
+  background: #c9c9c9;
+}
+.star:nth-child(33) {
+  top: 92%;
+  left: 61%;
+  background: #e9e9e9;
+}
+.star:nth-child(34) {
+  top: 80%;
+  left: 2%;
+  background: #818181;
+}
+.star:nth-child(35) {
+  top: 5%;
+  left: 90%;
+  background: #bababa;
+}
+.star:nth-child(36) {
+  top: 32%;
+  left: 2%;
+  background: #e9e9e9;
+}
+.star:nth-child(37) {
+  top: 40%;
+  left: 23%;
+  background: #e8e8e8;
+}
+.star:nth-child(38) {
+  top: 21%;
+  left: 13%;
+  background: #eeeeee;
+}
+.star:nth-child(39) {
+  top: 87%;
+  left: 27%;
+  background: #121212;
+}
+.star:nth-child(40) {
+  top: 75%;
+  left: 35%;
+  background: #fafafa;
+}
+.star:nth-child(41) {
+  top: 30%;
+  left: 79%;
+  background: #5f5f5f;
+}
+.star:nth-child(42) {
+  top: 78%;
+  left: 19%;
+  background: #828282;
+}
+.star:nth-child(43) {
+  top: 2%;
+  left: 87%;
+  background: #333333;
+}
+.star:nth-child(44) {
+  top: 8%;
+  left: 71%;
+  background: #d1d1d1;
+}
+.star:nth-child(45) {
+  top: 73%;
+  left: 87%;
+  background: #b4b4b4;
+}
+.star:nth-child(46) {
+  top: 29%;
+  left: 94%;
+  background: #ababab;
+}
+.star:nth-child(47) {
+  top: 9%;
+  left: 53%;
+  background: #f3f3f3;
+}
+.star:nth-child(48) {
+  top: 43%;
+  left: 59%;
+  background: #f2f2f2;
+}
+.star:nth-child(49) {
+  top: 61%;
+  left: 57%;
+  background: #757575;
+}
+.star:nth-child(50) {
+  top: 92%;
+  left: 2%;
+  background: #595959;
+}
+.star:nth-child(51) {
+  top: 56%;
+  left: 11%;
+  background: #c6c6c6;
+}
+.star:nth-child(52) {
+  top: 91%;
+  left: 77%;
+  background: #131313;
+}
+.star:nth-child(53) {
+  top: 27%;
+  left: 54%;
+  background: #393939;
+}
+.star:nth-child(54) {
+  top: 76%;
+  left: 9%;
+  background: #c4c4c4;
+}
+.star:nth-child(55) {
+  top: 76%;
+  left: 77%;
+  background: #cfcfcf;
+}
+.star:nth-child(56) {
+  top: 1%;
+  left: 28%;
+  background: #c9c9c9;
+}
+.star:nth-child(57) {
+  top: 33%;
+  left: 64%;
+  background: #5c5c5c;
+}
+.star:nth-child(58) {
+  top: 72%;
+  left: 14%;
+  background: #d6d6d6;
+}
+.star:nth-child(59) {
+  top: 56%;
+  left: 26%;
+  background: #6d6d6d;
+}
+.star:nth-child(60) {
+  top: 65%;
+  left: 22%;
+  background: #8b8b8b;
+}
+.star:nth-child(61) {
+  top: 5%;
+  left: 56%;
+  background: #efefef;
+}
+.star:nth-child(62) {
+  top: 92%;
+  left: 40%;
+  background: #b1b1b1;
+}
+.star:nth-child(63) {
+  top: 74%;
+  left: 15%;
+  background: #262626;
+}
+.star:nth-child(64) {
+  top: 18%;
+  left: 70%;
+  background: #363636;
+}
+.star:nth-child(65) {
+  top: 49%;
+  left: 29%;
+  background: #b2b2b2;
+}
+.star:nth-child(66) {
+  top: 41%;
+  left: 7%;
+  background: #999999;
+}
+.star:nth-child(67) {
+  top: 18%;
+  left: 22%;
+  background: #020202;
+}
+.star:nth-child(68) {
+  top: 24%;
+  left: 33%;
+  background: #3e3e3e;
+}
+.star:nth-child(69) {
+  top: 36%;
+  left: 88%;
+  background: #acacac;
+}
+.star:nth-child(70) {
+  top: 68%;
+  left: 99%;
+  background: #555555;
+}
+.star:nth-child(71) {
+  top: 28%;
+  left: 10%;
+  background: #4a4a4a;
+}
+.star:nth-child(72) {
+  top: 5%;
+  left: 2%;
+  background: #7b7b7b;
+}
+.star:nth-child(73) {
+  top: 10%;
+  left: 35%;
+  background: #333333;
+}
+.star:nth-child(74) {
+  top: 19%;
+  left: 83%;
+  background: #b0b0b0;
+}
+.star:nth-child(75) {
+  top: 94%;
+  left: 99%;
+  background: #d7d7d7;
+}
+.star:nth-child(76) {
+  top: 41%;
+  left: 6%;
+  background: #969696;
+}
+.star:nth-child(77) {
+  top: 77%;
+  left: 60%;
+  background: #929292;
+}
+.star:nth-child(78) {
+  top: 2%;
+  left: 76%;
+  background: #676767;
+}
+.star:nth-child(79) {
+  top: 74%;
+  left: 49%;
+  background: #414141;
+}
+.star:nth-child(80) {
+  top: 4%;
+  left: 66%;
+  background: #343434;
+}
+.star:nth-child(81) {
+  top: 80%;
+  left: 79%;
+  background: #191919;
+}
+.star:nth-child(82) {
+  top: 81%;
+  left: 91%;
+  background: #d5d5d5;
+}
+.star:nth-child(83) {
+  top: 8%;
+  left: 31%;
+  background: #c4c4c4;
+}
+.star:nth-child(84) {
+  top: 87%;
+  left: 85%;
+  background: #929292;
+}
+.star:nth-child(85) {
+  top: 95%;
+  left: 54%;
+  background: #232323;
+}
+.star:nth-child(86) {
+  top: 76%;
+  left: 93%;
+  background: #686868;
+}
+.star:nth-child(87) {
+  top: 71%;
+  left: 2%;
+  background: #8e8e8e;
+}
+.star:nth-child(88) {
+  top: 59%;
+  left: 7%;
+  background: #606060;
+}
+.star:nth-child(89) {
+  top: 46%;
+  left: 33%;
+  background: #151515;
+}
+.star:nth-child(90) {
+  top: 18%;
+  left: 61%;
+  background: #2b2b2b;
+}
+.star:nth-child(91) {
+  top: 68%;
+  left: 9%;
+  background: #dbdbdb;
+}
+.star:nth-child(92) {
+  top: 18%;
+  left: 20%;
+  background: #8e8e8e;
+}
+.star:nth-child(93) {
+  top: 78%;
+  left: 74%;
+  background: #e1e1e1;
+}
+.star:nth-child(94) {
+  top: 72%;
+  left: 1%;
+  background: #191919;
+}
+.star:nth-child(95) {
+  top: 76%;
+  left: 30%;
+  background: #101010;
+}
+.star:nth-child(96) {
+  top: 4%;
+  left: 22%;
+  background: #353535;
+}
+.star:nth-child(97) {
+  top: 28%;
+  left: 22%;
+  background: #373737;
+}
+.star:nth-child(98) {
+  top: 13%;
+  left: 25%;
+  background: #464646;
+}
+.star:nth-child(99) {
+  top: 17%;
+  left: 83%;
+  background: #cccccc;
+}
+.star:nth-child(100) {
+  top: 93%;
+  left: 69%;
+  background: #cdcdcd;
+}
+.star:nth-child(101) {
+  top: 12%;
+  left: 43%;
+  background: #202020;
+}
+.star:nth-child(102) {
+  top: 6%;
+  left: 68%;
+  background: #c5c5c5;
+}
+.star:nth-child(103) {
+  top: 8%;
+  left: 29%;
+  background: #b6b6b6;
+}
+.star:nth-child(104) {
+  top: 22%;
+  left: 8%;
+  background: #a5a5a5;
+}
+.star:nth-child(105) {
+  top: 76%;
+  left: 68%;
+  background: #080808;
+}
+.star:nth-child(106) {
+  top: 50%;
+  left: 14%;
+  background: #dfdfdf;
+}
+.star:nth-child(107) {
+  top: 96%;
+  left: 40%;
+  background: #e9e9e9;
+}
+.star:nth-child(108) {
+  top: 19%;
+  left: 31%;
+  background: #cbcbcb;
+}
+.star:nth-child(109) {
+  top: 83%;
+  left: 5%;
+  background: #a0a0a0;
+}
+.star:nth-child(110) {
+  top: 46%;
+  left: 91%;
+  background: #0f0f0f;
+}
+.star:nth-child(111) {
+  top: 86%;
+  left: 38%;
+  background: #868686;
+}
+.star:nth-child(112) {
+  top: 35%;
+  left: 79%;
+  background: #434343;
+}
+.star:nth-child(113) {
+  top: 3%;
+  left: 33%;
+  background: #cacaca;
+}
+.star:nth-child(114) {
+  top: 71%;
+  left: 53%;
+  background: #c1c1c1;
+}
+.star:nth-child(115) {
+  top: 70%;
+  left: 51%;
+  background: #080808;
+}
+.star:nth-child(116) {
+  top: 86%;
+  left: 10%;
+  background: #a7a7a7;
+}
+.star:nth-child(117) {
+  top: 47%;
+  left: 80%;
+  background: #e0e0e0;
+}
+.star:nth-child(118) {
+  top: 16%;
+  left: 71%;
+  background: #0c0c0c;
+}
+.star:nth-child(119) {
+  top: 30%;
+  left: 76%;
+  background: #5f5f5f;
+}
+.star:nth-child(120) {
+  top: 93%;
+  left: 41%;
+  background: #e9e9e9;
+}
+.star:nth-child(121) {
+  top: 99%;
+  left: 9%;
+  background: #7c7c7c;
+}
+.star:nth-child(122) {
+  top: 39%;
+  left: 57%;
+  background: #3a3a3a;
+}
+.star:nth-child(123) {
+  top: 58%;
+  left: 28%;
+  background: #212121;
+}
+.star:nth-child(124) {
+  top: 35%;
+  left: 59%;
+  background: #dadada;
+}
+.star:nth-child(125) {
+  top: 77%;
+  left: 76%;
+  background: #424242;
+}
+.star:nth-child(126) {
+  top: 73%;
+  left: 46%;
+  background: #6a6a6a;
+}
+.star:nth-child(127) {
+  top: 72%;
+  left: 79%;
+  background: #c9c9c9;
+}
+.star:nth-child(128) {
+  top: 79%;
+  left: 87%;
+  background: #313131;
+}
+.star:nth-child(129) {
+  top: 12%;
+  left: 2%;
+  background: #585858;
+}
+.star:nth-child(130) {
+  top: 96%;
+  left: 21%;
+  background: #e7e7e7;
+}
+.star:nth-child(131) {
+  top: 31%;
+  left: 82%;
+  background: #1a1a1a;
+}
+.star:nth-child(132) {
+  top: 93%;
+  left: 64%;
+  background: #0c0c0c;
+}
+.star:nth-child(133) {
+  top: 91%;
+  left: 53%;
+  background: #a5a5a5;
+}
+.star:nth-child(134) {
+  top: 10%;
+  left: 15%;
+  background: #818181;
+}
+.star:nth-child(135) {
+  top: 9%;
+  left: 25%;
+  background: #c2c2c2;
+}
+.star:nth-child(136) {
+  top: 90%;
+  left: 14%;
+  background: #5c5c5c;
+}
+.star:nth-child(137) {
+  top: 2%;
+  left: 78%;
+  background: #515151;
+}
+.star:nth-child(138) {
+  top: 91%;
+  left: 47%;
+  background: #cbcbcb;
+}
+.star:nth-child(139) {
+  top: 42%;
+  left: 71%;
+  background: #aaaaaa;
+}
+.star:nth-child(140) {
+  top: 51%;
+  left: 13%;
+  background: #030303;
+}
+.star:nth-child(141) {
+  top: 51%;
+  left: 61%;
+  background: #7f7f7f;
+}
+.star:nth-child(142) {
+  top: 54%;
+  left: 62%;
+  background: #525252;
+}
+.star:nth-child(143) {
+  top: 75%;
+  left: 21%;
+  background: dimgray;
+}
+.star:nth-child(144) {
+  top: 51%;
+  left: 17%;
+  background: #cfcfcf;
+}
+.star:nth-child(145) {
+  top: 84%;
+  left: 69%;
+  background: #777777;
+}
+.star:nth-child(146) {
+  top: 24%;
+  left: 49%;
+  background: #d7d7d7;
+}
+.star:nth-child(147) {
+  top: 42%;
+  left: 3%;
+  background: #939393;
+}
+.star:nth-child(148) {
+  top: 74%;
+  left: 17%;
+  background: #1f1f1f;
+}
+.star:nth-child(149) {
+  top: 9%;
+  left: 42%;
+  background: #747474;
+}
+.star:nth-child(150) {
+  top: 96%;
+  left: 95%;
+  background: #5f5f5f;
+}
+.star:nth-child(151) {
+  top: 86%;
+  left: 52%;
+  background: #f2f2f2;
+}
+.star:nth-child(152) {
+  top: 14%;
+  left: 92%;
+  background: #313131;
+}
+.star:nth-child(153) {
+  top: 11%;
+  left: 12%;
+  background: #d6d6d6;
+}
+.star:nth-child(154) {
+  top: 94%;
+  left: 63%;
+  background: #d9d9d9;
+}
+.star:nth-child(155) {
+  top: 3%;
+  left: 69%;
+  background: #636363;
+}
+.star:nth-child(156) {
+  top: 43%;
+  left: 36%;
+  background: #4a4a4a;
+}
+.star:nth-child(157) {
+  top: 43%;
+  left: 26%;
+  background: #606060;
+}
+.star:nth-child(158) {
+  top: 43%;
+  left: 87%;
+  background: #080808;
+}
+.star:nth-child(159) {
+  top: 17%;
+  left: 64%;
+  background: #333333;
+}
+.star:nth-child(160) {
+  top: 81%;
+  left: 100%;
+  background: #040404;
+}
+.star:nth-child(161) {
+  top: 13%;
+  left: 81%;
+  background: #eeeeee;
+}
+.star:nth-child(162) {
+  top: 87%;
+  left: 90%;
+  background: #1c1c1c;
+}
+.star:nth-child(163) {
+  top: 41%;
+  left: 65%;
+  background: #303030;
+}
+.star:nth-child(164) {
+  top: 83%;
+  left: 64%;
+  background: whitesmoke;
+}
+.star:nth-child(165) {
+  top: 73%;
+  left: 39%;
+  background: #bebebe;
+}
+.star:nth-child(166) {
+  top: 60%;
+  left: 92%;
+  background: #2d2d2d;
+}
+.star:nth-child(167) {
+  top: 97%;
+  left: 64%;
+  background: #818181;
+}
+.star:nth-child(168) {
+  top: 68%;
+  left: 62%;
+  background: #969696;
+}
+.star:nth-child(169) {
+  top: 50%;
+  left: 25%;
+  background: #acacac;
+}
+.star:nth-child(170) {
+  top: 58%;
+  left: 9%;
+  background: #353535;
+}
+.star:nth-child(171) {
+  top: 99%;
+  left: 63%;
+  background: #070707;
+}
+.star:nth-child(172) {
+  top: 42%;
+  left: 9%;
+  background: #6b6b6b;
+}
+.star:nth-child(173) {
+  top: 2%;
+  left: 85%;
+  background: #1b1b1b;
+}
+.star:nth-child(174) {
+  top: 77%;
+  left: 62%;
+  background: #2a2a2a;
+}
+.star:nth-child(175) {
+  top: 65%;
+  left: 98%;
+  background: #969696;
+}
+.star:nth-child(176) {
+  top: 53%;
+  left: 82%;
+  background: #1f1f1f;
+}
+.star:nth-child(177) {
+  top: 92%;
+  left: 93%;
+  background: #b0b0b0;
+}
+.star:nth-child(178) {
+  top: 49%;
+  left: 87%;
+  background: #313131;
+}
+.star:nth-child(179) {
+  top: 96%;
+  left: 48%;
+  background: #a7a7a7;
+}
+.star:nth-child(180) {
+  top: 92%;
+  left: 1%;
+  background: #a1a1a1;
+}
+.star:nth-child(181) {
+  top: 29%;
+  left: 31%;
+  background: #3a3a3a;
+}
+.star:nth-child(182) {
+  top: 38%;
+  left: 32%;
+  background: #a7a7a7;
+}
+.star:nth-child(183) {
+  top: 53%;
+  left: 98%;
+  background: #797979;
+}
+.star:nth-child(184) {
+  top: 35%;
+  left: 22%;
+  background: #1a1a1a;
+}
+.star:nth-child(185) {
+  top: 30%;
+  left: 91%;
+  background: #c5c5c5;
+}
+.star:nth-child(186) {
+  top: 47%;
+  left: 87%;
+  background: #8f8f8f;
+}
+.star:nth-child(187) {
+  top: 62%;
+  left: 34%;
+  background: #575757;
+}
+.star:nth-child(188) {
+  top: 10%;
+  left: 10%;
+  background: #b2b2b2;
+}
+.star:nth-child(189) {
+  top: 2%;
+  left: 3%;
+  background: #7e7e7e;
+}
+.star:nth-child(190) {
+  top: 11%;
+  left: 23%;
+  background: #141414;
+}
+.star:nth-child(191) {
+  top: 82%;
+  left: 55%;
+  background: #2a2a2a;
+}
+.star:nth-child(192) {
+  top: 53%;
+  left: 86%;
+  background: #e7e7e7;
+}
+.star:nth-child(193) {
+  top: 39%;
+  left: 1%;
+  background: #959595;
+}
+.star:nth-child(194) {
+  top: 12%;
+  left: 17%;
+  background: #5b5b5b;
+}
+.star:nth-child(195) {
+  top: 62%;
+  left: 62%;
+  background: #7d7d7d;
+}
+.star:nth-child(196) {
+  top: 55%;
+  left: 90%;
+  background: #161616;
+}
+.star:nth-child(197) {
+  top: 83%;
+  left: 65%;
+  background: #a4a4a4;
+}
+.star:nth-child(198) {
+  top: 37%;
+  left: 10%;
+  background: #979797;
+}
+.star:nth-child(199) {
+  top: 35%;
+  left: 81%;
+  background: #dadada;
+}
+.star:nth-child(200) {
+  top: 57%;
+  left: 26%;
+  background: #4c4c4c;
+}
+.star:nth-child(201) {
+  top: 36%;
+  left: 87%;
+  background: #fefefe;
+}
+.star:nth-child(202) {
+  top: 82%;
+  left: 15%;
+  background: #505050;
+}
+.star:nth-child(203) {
+  top: 29%;
+  left: 61%;
+  background: #909090;
+}
+.star:nth-child(204) {
+  top: 92%;
+  left: 6%;
+  background: #1f1f1f;
+}
+.star:nth-child(205) {
+  top: 17%;
+  left: 91%;
+  background: #050505;
+}
+.star:nth-child(206) {
+  top: 5%;
+  left: 35%;
+  background: #3e3e3e;
+}
+.star:nth-child(207) {
+  top: 18%;
+  left: 71%;
+  background: #dbdbdb;
+}
+.star:nth-child(208) {
+  top: 19%;
+  left: 86%;
+  background: #545454;
+}
+.star:nth-child(209) {
+  top: 100%;
+  left: 62%;
+  background: #a2a2a2;
+}
+.star:nth-child(210) {
+  top: 37%;
+  left: 23%;
+  background: #292929;
+}
+.star:nth-child(211) {
+  top: 48%;
+  left: 46%;
+  background: #dddddd;
+}
+.star:nth-child(212) {
+  top: 74%;
+  left: 42%;
+  background: #323232;
+}
+.star:nth-child(213) {
+  top: 91%;
+  left: 97%;
+  background: #a3a3a3;
+}
+.star:nth-child(214) {
+  top: 23%;
+  left: 13%;
+  background: #4e4e4e;
+}
+.star:nth-child(215) {
+  top: 60%;
+  left: 45%;
+  background: #6e6e6e;
+}
+.star:nth-child(216) {
+  top: 83%;
+  left: 38%;
+  background: #313131;
+}
+.star:nth-child(217) {
+  top: 44%;
+  left: 82%;
+  background: #393939;
+}
+.star:nth-child(218) {
+  top: 26%;
+  left: 54%;
+  background: #181818;
+}
+.star:nth-child(219) {
+  top: 49%;
+  left: 80%;
+  background: #4d4d4d;
+}
+.star:nth-child(220) {
+  top: 55%;
+  left: 11%;
+  background: #3b3b3b;
+}
+.star:nth-child(221) {
+  top: 72%;
+  left: 52%;
+  background: #424242;
+}
+.star:nth-child(222) {
+  top: 81%;
+  left: 6%;
+  background: #5c5c5c;
+}
+.star:nth-child(223) {
+  top: 35%;
+  left: 34%;
+  background: #6a6a6a;
+}
+.star:nth-child(224) {
+  top: 81%;
+  left: 50%;
+  background: #747474;
+}
+.star:nth-child(225) {
+  top: 20%;
+  left: 56%;
+  background: #919191;
+}
+.star:nth-child(226) {
+  top: 38%;
+  left: 51%;
+  background: #555555;
+}
+.star:nth-child(227) {
+  top: 66%;
+  left: 37%;
+  background: #888888;
+}
+.star:nth-child(228) {
+  top: 1%;
+  left: 80%;
+  background: #eaeaea;
+}
+.star:nth-child(229) {
+  top: 99%;
+  left: 90%;
+  background: #565656;
+}
+.star:nth-child(230) {
+  top: 13%;
+  left: 81%;
+  background: #404040;
+}
+.star:nth-child(231) {
+  top: 49%;
+  left: 88%;
+  background: #f8f8f8;
+}
+.star:nth-child(232) {
+  top: 79%;
+  left: 39%;
+  background: #454545;
+}
+.star:nth-child(233) {
+  top: 75%;
+  left: 2%;
+  background: #e9e9e9;
+}
+.star:nth-child(234) {
+  top: 88%;
+  left: 95%;
+  background: #f1f1f1;
+}
+.star:nth-child(235) {
+  top: 32%;
+  left: 79%;
+  background: #9c9c9c;
+}
+.star:nth-child(236) {
+  top: 91%;
+  left: 22%;
+  background: #595959;
+}
+.star:nth-child(237) {
+  top: 69%;
+  left: 86%;
+  background: #424242;
+}
+.star:nth-child(238) {
+  top: 98%;
+  left: 73%;
+  background: #f9f9f9;
+}
+.star:nth-child(239) {
+  top: 13%;
+  left: 80%;
+  background: #040404;
+}
+.star:nth-child(240) {
+  top: 4%;
+  left: 81%;
+  background: #787878;
+}
+.star:nth-child(241) {
+  top: 22%;
+  left: 80%;
+  background: #b6b6b6;
+}
+.star:nth-child(242) {
+  top: 67%;
+  left: 82%;
+  background: #f8f8f8;
+}
+.star:nth-child(243) {
+  top: 34%;
+  left: 96%;
+  background: #919191;
+}
+.star:nth-child(244) {
+  top: 3%;
+  left: 60%;
+  background: #b1b1b1;
+}
+.star:nth-child(245) {
+  top: 7%;
+  left: 90%;
+  background: #dddddd;
+}
+.star:nth-child(246) {
+  top: 7%;
+  left: 14%;
+  background: #a0a0a0;
+}
+.star:nth-child(247) {
+  top: 87%;
+  left: 98%;
+  background: #2f2f2f;
+}
+.star:nth-child(248) {
+  top: 99%;
+  left: 97%;
+  background: #afafaf;
+}
+.star:nth-child(249) {
+  top: 95%;
+  left: 28%;
+  background: #919191;
+}
+.star:nth-child(250) {
+  top: 43%;
+  left: 97%;
+  background: #a2a2a2;
+}
+
+.stars {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-animation: slide 30000ms linear infinite;
+          animation: slide 30000ms linear infinite;
+}
+.stars:nth-child(2) {
+  left: 100%;
+}
+
+.shooting {
+  position: absolute;
+  width: 50px;
+  height: 1px;
+  background: -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(90deg, white, rgba(255, 255, 255, 0));
+  background: -webkit-gradient(linear, left top, right top, from(#0093e9), to(rgba(128, 208, 199, 0)));
+  background: linear-gradient(90deg, #0093e9 0%, rgba(128, 208, 199, 0) 100%);
+  opacity: 0;
+  -webkit-animation: shooting 5000ms linear infinite;
+          animation: shooting 5000ms linear infinite;
+}
+.shooting:nth-child(1) {
+  top: 29%;
+  left: 70%;
+  -webkit-animation-delay: 2479ms;
+          animation-delay: 2479ms;
+}
+.shooting:nth-child(2) {
+  top: 49%;
+  left: 53%;
+  -webkit-animation-delay: 8696ms;
+          animation-delay: 8696ms;
+}
+.shooting:nth-child(3) {
+  top: 70%;
+  left: 6%;
+  -webkit-animation-delay: 823ms;
+          animation-delay: 823ms;
+}
+.shooting:nth-child(4) {
+  top: 85%;
+  left: 85%;
+  -webkit-animation-delay: 369ms;
+          animation-delay: 369ms;
+}
+.shooting:nth-child(5) {
+  top: 17%;
+  left: 40%;
+  -webkit-animation-delay: 6915ms;
+          animation-delay: 6915ms;
+}
+.shooting:nth-child(6) {
+  top: 86%;
+  left: 24%;
+  -webkit-animation-delay: 2157ms;
+          animation-delay: 2157ms;
+}
+.shooting:nth-child(7) {
+  top: 38%;
+  left: 45%;
+  -webkit-animation-delay: 4039ms;
+          animation-delay: 4039ms;
+}
+.shooting:nth-child(8) {
+  top: 45%;
+  left: 100%;
+  -webkit-animation-delay: 8816ms;
+          animation-delay: 8816ms;
+}
+.shooting:nth-child(9) {
+  top: 69%;
+  left: 84%;
+  -webkit-animation-delay: 1810ms;
+          animation-delay: 1810ms;
+}
+.shooting:nth-child(10) {
+  top: 60%;
+  left: 23%;
+  -webkit-animation-delay: 8062ms;
+          animation-delay: 8062ms;
+}
+.shooting:nth-child(11) {
+  top: 85%;
+  left: 9%;
+  -webkit-animation-delay: 2264ms;
+          animation-delay: 2264ms;
+}
+.shooting:nth-child(12) {
+  top: 85%;
+  left: 63%;
+  -webkit-animation-delay: 7104ms;
+          animation-delay: 7104ms;
+}
+.shooting:nth-child(13) {
+  top: 68%;
+  left: 20%;
+  -webkit-animation-delay: 3627ms;
+          animation-delay: 3627ms;
+}
+.shooting:nth-child(14) {
+  top: 55%;
+  left: 43%;
+  -webkit-animation-delay: 8826ms;
+          animation-delay: 8826ms;
+}
+.shooting:nth-child(15) {
+  top: 83%;
+  left: 41%;
+  -webkit-animation-delay: 3376ms;
+          animation-delay: 3376ms;
+}
+.shooting:nth-child(16) {
+  top: 40%;
+  left: 92%;
+  -webkit-animation-delay: 1143ms;
+          animation-delay: 1143ms;
+}
+.shooting:nth-child(17) {
+  top: 68%;
+  left: 72%;
+  -webkit-animation-delay: 1322ms;
+          animation-delay: 1322ms;
+}
+.shooting:nth-child(18) {
+  top: 24%;
+  left: 83%;
+  -webkit-animation-delay: 6454ms;
+          animation-delay: 6454ms;
+}
+.shooting:nth-child(19) {
+  top: 61%;
+  left: 32%;
+  -webkit-animation-delay: 9315ms;
+          animation-delay: 9315ms;
+}
+.shooting:nth-child(20) {
+  top: 84%;
+  left: 80%;
+  -webkit-animation-delay: 3728ms;
+          animation-delay: 3728ms;
+}
+.shooting:nth-child(21) {
+  top: 72%;
+  left: 32%;
+  -webkit-animation-delay: 4112ms;
+          animation-delay: 4112ms;
+}
+.shooting:nth-child(22) {
+  top: 21%;
+  left: 9%;
+  -webkit-animation-delay: 49ms;
+          animation-delay: 49ms;
+}
+.shooting:nth-child(23) {
+  top: 7%;
+  left: 60%;
+  -webkit-animation-delay: 4679ms;
+          animation-delay: 4679ms;
+}
+.shooting:nth-child(24) {
+  top: 94%;
+  left: 52%;
+  -webkit-animation-delay: 6532ms;
+          animation-delay: 6532ms;
+}
+.shooting:nth-child(25) {
+  top: 1%;
+  left: 55%;
+  -webkit-animation-delay: 1611ms;
+          animation-delay: 1611ms;
+}
+.shooting:nth-child(26) {
+  top: 35%;
+  left: 49%;
+  -webkit-animation-delay: 4247ms;
+          animation-delay: 4247ms;
+}
+.shooting:nth-child(27) {
+  top: 89%;
+  left: 99%;
+  -webkit-animation-delay: 6910ms;
+          animation-delay: 6910ms;
+}
+.shooting:nth-child(28) {
+  top: 97%;
+  left: 14%;
+  -webkit-animation-delay: 9387ms;
+          animation-delay: 9387ms;
+}
+.shooting:nth-child(29) {
+  top: 100%;
+  left: 58%;
+  -webkit-animation-delay: 4365ms;
+          animation-delay: 4365ms;
+}
+.shooting:nth-child(30) {
+  top: 46%;
+  left: 63%;
+  -webkit-animation-delay: 5957ms;
+          animation-delay: 5957ms;
+}
+.shooting:nth-child(31) {
+  top: 70%;
+  left: 43%;
+  -webkit-animation-delay: 3018ms;
+          animation-delay: 3018ms;
+}
+.shooting:nth-child(32) {
+  top: 30%;
+  left: 83%;
+  -webkit-animation-delay: 603ms;
+          animation-delay: 603ms;
+}
+.shooting:nth-child(33) {
+  top: 69%;
+  left: 52%;
+  -webkit-animation-delay: 8493ms;
+          animation-delay: 8493ms;
+}
+.shooting:nth-child(34) {
+  top: 59%;
+  left: 32%;
+  -webkit-animation-delay: 3521ms;
+          animation-delay: 3521ms;
+}
+.shooting:nth-child(35) {
+  top: 36%;
+  left: 48%;
+  -webkit-animation-delay: 5323ms;
+          animation-delay: 5323ms;
+}
+.shooting:nth-child(36) {
+  top: 30%;
+  left: 64%;
+  -webkit-animation-delay: 2259ms;
+          animation-delay: 2259ms;
+}
+.shooting:nth-child(37) {
+  top: 50%;
+  left: 74%;
+  -webkit-animation-delay: 4824ms;
+          animation-delay: 4824ms;
+}
+.shooting:nth-child(38) {
+  top: 91%;
+  left: 52%;
+  -webkit-animation-delay: 2743ms;
+          animation-delay: 2743ms;
+}
+.shooting:nth-child(39) {
+  top: 58%;
+  left: 46%;
+  -webkit-animation-delay: 3613ms;
+          animation-delay: 3613ms;
+}
+.shooting:nth-child(40) {
+  top: 10%;
+  left: 79%;
+  -webkit-animation-delay: 5120ms;
+          animation-delay: 5120ms;
+}
+.shooting:nth-child(41) {
+  top: 54%;
+  left: 46%;
+  -webkit-animation-delay: 5392ms;
+          animation-delay: 5392ms;
+}
+.shooting:nth-child(42) {
+  top: 49%;
+  left: 89%;
+  -webkit-animation-delay: 4280ms;
+          animation-delay: 4280ms;
+}
+.shooting:nth-child(43) {
+  top: 38%;
+  left: 45%;
+  -webkit-animation-delay: 3282ms;
+          animation-delay: 3282ms;
+}
+.shooting:nth-child(44) {
+  top: 19%;
+  left: 32%;
+  -webkit-animation-delay: 6227ms;
+          animation-delay: 6227ms;
+}
+.shooting:nth-child(45) {
+  top: 94%;
+  left: 5%;
+  -webkit-animation-delay: 6255ms;
+          animation-delay: 6255ms;
+}
+.shooting:nth-child(46) {
+  top: 68%;
+  left: 41%;
+  -webkit-animation-delay: 5359ms;
+          animation-delay: 5359ms;
+}
+.shooting:nth-child(47) {
+  top: 56%;
+  left: 73%;
+  -webkit-animation-delay: 5452ms;
+          animation-delay: 5452ms;
+}
+.shooting:nth-child(48) {
+  top: 1%;
+  left: 67%;
+  -webkit-animation-delay: 7076ms;
+          animation-delay: 7076ms;
+}
+.shooting:nth-child(49) {
+  top: 60%;
+  left: 90%;
+  -webkit-animation-delay: 1267ms;
+          animation-delay: 1267ms;
+}
+.shooting:nth-child(50) {
+  top: 64%;
+  left: 55%;
+  -webkit-animation-delay: 8297ms;
+          animation-delay: 8297ms;
+}
+
+@-webkit-keyframes shooting {
+  0% {
+    opacity: 0;
+    -webkit-transform: rotateZ(-30deg) translateX(0) scaleX(0);
+            transform: rotateZ(-30deg) translateX(0) scaleX(0);
+  }
+  25% {
+    opacity: 1;
+    -webkit-transform: rotateZ(-30deg) transalteX(-200%) scaleX(1);
+            transform: rotateZ(-30deg) transalteX(-200%) scaleX(1);
+  }
+  50% {
+    opacity: 0;
+    -webkit-transform: rotateZ(-30deg) translateX(-400%) scaleX(2);
+            transform: rotateZ(-30deg) translateX(-400%) scaleX(2);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: rotateZ(-30deg) translateX(-400%) scaleX(2);
+            transform: rotateZ(-30deg) translateX(-400%) scaleX(2);
+  }
+}
+
+@keyframes shooting {
+  0% {
+    opacity: 0;
+    -webkit-transform: rotateZ(-30deg) translateX(0) scaleX(0);
+            transform: rotateZ(-30deg) translateX(0) scaleX(0);
+  }
+  25% {
+    opacity: 1;
+    -webkit-transform: rotateZ(-30deg) transalteX(-200%) scaleX(1);
+            transform: rotateZ(-30deg) transalteX(-200%) scaleX(1);
+  }
+  50% {
+    opacity: 0;
+    -webkit-transform: rotateZ(-30deg) translateX(-400%) scaleX(2);
+            transform: rotateZ(-30deg) translateX(-400%) scaleX(2);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: rotateZ(-30deg) translateX(-400%) scaleX(2);
+            transform: rotateZ(-30deg) translateX(-400%) scaleX(2);
+  }
+}
+@-webkit-keyframes slide {
+  0% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+  100% {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
+@keyframes slide {
+  0% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+  100% {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
\ No newline at end of file
diff --git a/only-css-moon-clip/license.txt b/only-css-moon-clip/license.txt
new file mode 100644
index 0000000..33ebadf
--- /dev/null
+++ b/only-css-moon-clip/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Yusuke Nakaya (https://codepen.io/YusukeNakaya/pen/abNdeOj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/only-css-moon-clip/src/index.pug b/only-css-moon-clip/src/index.pug
new file mode 100644
index 0000000..f030ca8
--- /dev/null
+++ b/only-css-moon-clip/src/index.pug
@@ -0,0 +1,8 @@
+.night
+  .window
+    - for (i = 0; i < 2; i++)
+      .stars
+        - for (j = 0; j < 30; j++)
+          .shooting
+        - for (j = 0; j < 250; j++)
+          .star
\ No newline at end of file
diff --git a/only-css-moon-clip/src/style.scss b/only-css-moon-clip/src/style.scss
new file mode 100644
index 0000000..c56d909
--- /dev/null
+++ b/only-css-moon-clip/src/style.scss
@@ -0,0 +1,126 @@
+$moonColor: #ffe645;
+$moonSize: 300px;
+
+body {
+  background: $moonColor;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  font-family: 'Anton', sans-serif;
+  justify-content: center;
+  align-items: center;
+}
+
+.night {
+  position: relative;
+  width: $moonSize;
+  height: $moonSize;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    left: 35%;
+    width: 100%;
+    height: 100%;
+    background: $moonColor;
+    border-radius: 100%;
+    transform: scale(1.1);
+  }
+  
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: -3%;
+    left: -10%;
+    width: 70%;
+    height: 6%;
+    background: #edcd2b;
+    border-radius: 100%;
+  }
+}
+
+.window {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(-45deg, #0a1433 0%,#222b3f 100%);
+  border-radius: 100%;
+  overflow: hidden;
+}
+
+.star {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  
+  @for $i from 1 through 250 {
+    $light: random(255);
+    &:nth-child(#{$i}) {
+      top: random(100) + 0%;
+      left: random(100) + 0%;
+      background: rgb($light, $light, $light);
+    }
+  }
+}
+
+.stars {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  animation: slide 30000ms linear infinite;
+  
+  &:nth-child(2) {
+    left: 100%;
+  }
+}
+
+.shooting {
+  position: absolute;
+  width: 50px;
+  height: 1px;
+  background: linear-gradient(90deg, rgba(#fff, 1), rgba(#fff, 0));
+  background: linear-gradient(90deg, rgba(#0093E9, 1) 0%, rgba(#80D0C7, 0) 100%);
+  opacity: 0;
+  animation: shooting 5000ms linear infinite;
+
+  @for $i from 1 through 50 {
+    &:nth-child(#{$i}) {
+      top: random(100) + 0%;
+      left: random(100) + 0%;
+      animation-delay: random(9999) * 1ms;
+    }
+  }
+}
+
+@keyframes shooting {
+  0% {
+    opacity: 0;
+    transform: rotateZ(-30deg) translateX(0) scaleX(0);
+  }
+  
+  25% {
+    opacity: 1;
+    transform: rotateZ(-30deg) transalteX(-200%) scaleX(1);
+  }
+  
+  50% {
+    opacity: 0;
+    transform: rotateZ(-30deg) translateX(-400%) scaleX(2);
+  }
+  
+  100% {
+    opacity: 0;
+    transform: rotateZ(-30deg) translateX(-400%) scaleX(2);
+  }
+}
+
+
+@keyframes slide {
+  0% {
+    transform: translateX(0);
+  }
+  
+  100% {
+    transform: translateX(-100%);
+  }
+}
\ No newline at end of file
diff --git a/only-css-mt-fuji/README.markdown b/only-css-mt-fuji/README.markdown
new file mode 100644
index 0000000..b4a7536
--- /dev/null
+++ b/only-css-mt-fuji/README.markdown
@@ -0,0 +1,4 @@
+# Only CSS: Mt. Fuji
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/YusukeNakaya/pen/PayOEz](https://codepen.io/YusukeNakaya/pen/PayOEz).
+
+ located on Honshū, is the highest mountain in Japan at 3,776.24 m (12,389 ft), 2nd-highest peak of an island (volcanic) in Asia, and 7th-highest peak of an island in the world.  Do you want to climb the Mt. Fuji? Welcome to Japan :)
\ No newline at end of file
diff --git a/only-css-mt-fuji/dist/index.html b/only-css-mt-fuji/dist/index.html
new file mode 100644
index 0000000..310b5b2
--- /dev/null
+++ b/only-css-mt-fuji/dist/index.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Only CSS: Mt. Fuji</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<div class="book">
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <div class="interface"></div>
+  <ul class="pages">
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+    <li class="page">
+      <div class="mountain"></div>
+      <div class="cloud"></div>
+    </li>
+  </ul>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/only-css-mt-fuji/dist/style.css b/only-css-mt-fuji/dist/style.css
new file mode 100644
index 0000000..3ea7128
--- /dev/null
+++ b/only-css-mt-fuji/dist/style.css
@@ -0,0 +1,5779 @@
+body {
+  background: linear-gradient(to bottom, #6496c8 0%, #ffc8ff 100%);
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  font-family: 'Anton', sans-serif;
+  justify-content: center;
+  align-items: center;
+  -webkit-perspective: 1000px;
+          perspective: 1000px;
+}
+
+.book {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+}
+
+.pages {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  pointer-events: none;
+}
+
+.cloud {
+  position: absolute;
+  background: white;
+  border-radius: 999px;
+}
+.cloud::before {
+  content: '';
+  position: absolute;
+  background: white;
+  border-radius: 999px;
+}
+.cloud::after {
+  content: '';
+  position: absolute;
+  background: white;
+  border-radius: 999px;
+}
+
+.mountain {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 50%;
+  height: 80%;
+  background: linear-gradient(to bottom, white 0%, white 30%, #32c8c8 50%, #3264c8 100%);
+  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
+          clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+
+.page {
+  position: absolute;
+  width: 480px;
+  height: 270px;
+  border: 10px solid white;
+  overflow: hidden;
+  box-sizing: border-box;
+  -webkit-transform-origin: 0 50%;
+          transform-origin: 0 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  transition: 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975);
+  border-left: none;
+}
+.page:nth-child(1)::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 250px;
+  height: 250px;
+  background: #f02814;
+  border-radius: 100%;
+  -webkit-transform: translate(10px, -80px);
+          transform: translate(10px, -80px);
+}
+.page:nth-child(1) .cloud {
+  top: 84%;
+  left: 32%;
+  width: 80px;
+  height: 54px;
+}
+.page:nth-child(1) .cloud::before {
+  width: 109px;
+  height: 43px;
+  -webkit-transform: translate(34%, -14%);
+          transform: translate(34%, -14%);
+}
+.page:nth-child(1) .cloud::after {
+  width: 116px;
+  height: 40px;
+  -webkit-transform: translate(-46%, 4%);
+          transform: translate(-46%, 4%);
+}
+.page:nth-child(2) .cloud {
+  top: 99%;
+  left: 45%;
+  width: 102px;
+  height: 33px;
+}
+.page:nth-child(2) .cloud::before {
+  width: 84px;
+  height: 38px;
+  -webkit-transform: translate(7%, -21%);
+          transform: translate(7%, -21%);
+}
+.page:nth-child(2) .cloud::after {
+  width: 63px;
+  height: 31px;
+  -webkit-transform: translate(30%, -49%);
+          transform: translate(30%, -49%);
+}
+.page:nth-child(3) .cloud {
+  top: 81%;
+  left: 98%;
+  width: 95px;
+  height: 52px;
+}
+.page:nth-child(3) .cloud::before {
+  width: 166px;
+  height: 35px;
+  -webkit-transform: translate(-15%, -4%);
+          transform: translate(-15%, -4%);
+}
+.page:nth-child(3) .cloud::after {
+  width: 91px;
+  height: 33px;
+  -webkit-transform: translate(-29%, 2%);
+          transform: translate(-29%, 2%);
+}
+.page:nth-child(4) .cloud {
+  top: 58%;
+  left: 86%;
+  width: 104px;
+  height: 32px;
+}
+.page:nth-child(4) .cloud::before {
+  width: 100px;
+  height: 40px;
+  -webkit-transform: translate(31%, -28%);
+          transform: translate(31%, -28%);
+}
+.page:nth-child(4) .cloud::after {
+  width: 118px;
+  height: 45px;
+  -webkit-transform: translate(-35%, -45%);
+          transform: translate(-35%, -45%);
+}
+.page:nth-child(5) .cloud {
+  top: 93%;
+  left: 100%;
+  width: 134px;
+  height: 33px;
+}
+.page:nth-child(5) .cloud::before {
+  width: 146px;
+  height: 60px;
+  -webkit-transform: translate(-6%, -16%);
+          transform: translate(-6%, -16%);
+}
+.page:nth-child(5) .cloud::after {
+  width: 117px;
+  height: 35px;
+  -webkit-transform: translate(43%, 28%);
+          transform: translate(43%, 28%);
+}
+.page:nth-child(6) .cloud {
+  top: 63%;
+  left: 83%;
+  width: 88px;
+  height: 44px;
+}
+.page:nth-child(6) .cloud::before {
+  width: 135px;
+  height: 39px;
+  -webkit-transform: translate(21%, -29%);
+          transform: translate(21%, -29%);
+}
+.page:nth-child(6) .cloud::after {
+  width: 124px;
+  height: 50px;
+  -webkit-transform: translate(-37%, -8%);
+          transform: translate(-37%, -8%);
+}
+.page:nth-child(7) .cloud {
+  top: 64%;
+  left: 28%;
+  width: 151px;
+  height: 35px;
+}
+.page:nth-child(7) .cloud::before {
+  width: 90px;
+  height: 49px;
+  -webkit-transform: translate(-17%, -29%);
+          transform: translate(-17%, -29%);
+}
+.page:nth-child(7) .cloud::after {
+  width: 150px;
+  height: 37px;
+  -webkit-transform: translate(13%, 10%);
+          transform: translate(13%, 10%);
+}
+.page:nth-child(8) .cloud {
+  top: 85%;
+  left: 24%;
+  width: 94px;
+  height: 52px;
+}
+.page:nth-child(8) .cloud::before {
+  width: 109px;
+  height: 43px;
+  -webkit-transform: translate(-16%, 44%);
+          transform: translate(-16%, 44%);
+}
+.page:nth-child(8) .cloud::after {
+  width: 124px;
+  height: 54px;
+  -webkit-transform: translate(50%, -25%);
+          transform: translate(50%, -25%);
+}
+.page:nth-child(9) .cloud {
+  top: 64%;
+  left: 76%;
+  width: 121px;
+  height: 59px;
+}
+.page:nth-child(9) .cloud::before {
+  width: 77px;
+  height: 39px;
+  -webkit-transform: translate(-12%, -32%);
+          transform: translate(-12%, -32%);
+}
+.page:nth-child(9) .cloud::after {
+  width: 150px;
+  height: 51px;
+  -webkit-transform: translate(9%, 2%);
+          transform: translate(9%, 2%);
+}
+.page:nth-child(10) .cloud {
+  top: 63%;
+  left: 44%;
+  width: 148px;
+  height: 32px;
+}
+.page:nth-child(10) .cloud::before {
+  width: 104px;
+  height: 48px;
+  -webkit-transform: translate(26%, -22%);
+          transform: translate(26%, -22%);
+}
+.page:nth-child(10) .cloud::after {
+  width: 81px;
+  height: 56px;
+  -webkit-transform: translate(25%, -5%);
+          transform: translate(25%, -5%);
+}
+.page:nth-child(11) .cloud {
+  top: 91%;
+  left: 70%;
+  width: 102px;
+  height: 54px;
+}
+.page:nth-child(11) .cloud::before {
+  width: 144px;
+  height: 50px;
+  -webkit-transform: translate(-30%, -4%);
+          transform: translate(-30%, -4%);
+}
+.page:nth-child(11) .cloud::after {
+  width: 60px;
+  height: 50px;
+  -webkit-transform: translate(-24%, 4%);
+          transform: translate(-24%, 4%);
+}
+.page:nth-child(12) .cloud {
+  top: 84%;
+  left: 9%;
+  width: 169px;
+  height: 40px;
+}
+.page:nth-child(12) .cloud::before {
+  width: 142px;
+  height: 57px;
+  -webkit-transform: translate(-38%, 19%);
+          transform: translate(-38%, 19%);
+}
+.page:nth-child(12) .cloud::after {
+  width: 130px;
+  height: 35px;
+  -webkit-transform: translate(20%, 14%);
+          transform: translate(20%, 14%);
+}
+.page:nth-child(13) .cloud {
+  top: 82%;
+  left: 71%;
+  width: 154px;
+  height: 45px;
+}
+.page:nth-child(13) .cloud::before {
+  width: 174px;
+  height: 53px;
+  -webkit-transform: translate(-28%, -41%);
+          transform: translate(-28%, -41%);
+}
+.page:nth-child(13) .cloud::after {
+  width: 147px;
+  height: 56px;
+  -webkit-transform: translate(16%, 8%);
+          transform: translate(16%, 8%);
+}
+.page:nth-child(14) .cloud {
+  top: 66%;
+  left: 27%;
+  width: 128px;
+  height: 60px;
+}
+.page:nth-child(14) .cloud::before {
+  width: 110px;
+  height: 37px;
+  -webkit-transform: translate(-17%, 17%);
+          transform: translate(-17%, 17%);
+}
+.page:nth-child(14) .cloud::after {
+  width: 153px;
+  height: 31px;
+  -webkit-transform: translate(41%, -38%);
+          transform: translate(41%, -38%);
+}
+.page:nth-child(15) .cloud {
+  top: 75%;
+  left: 59%;
+  width: 126px;
+  height: 53px;
+}
+.page:nth-child(15) .cloud::before {
+  width: 168px;
+  height: 54px;
+  -webkit-transform: translate(45%, 50%);
+          transform: translate(45%, 50%);
+}
+.page:nth-child(15) .cloud::after {
+  width: 118px;
+  height: 47px;
+  -webkit-transform: translate(-48%, 26%);
+          transform: translate(-48%, 26%);
+}
+.page:nth-child(16) .cloud {
+  top: 80%;
+  left: 25%;
+  width: 98px;
+  height: 31px;
+}
+.page:nth-child(16) .cloud::before {
+  width: 130px;
+  height: 53px;
+  -webkit-transform: translate(-48%, -10%);
+          transform: translate(-48%, -10%);
+}
+.page:nth-child(16) .cloud::after {
+  width: 59px;
+  height: 58px;
+  -webkit-transform: translate(-13%, -10%);
+          transform: translate(-13%, -10%);
+}
+.page:nth-child(17) .cloud {
+  top: 55%;
+  left: 76%;
+  width: 99px;
+  height: 43px;
+}
+.page:nth-child(17) .cloud::before {
+  width: 92px;
+  height: 60px;
+  -webkit-transform: translate(-12%, -7%);
+          transform: translate(-12%, -7%);
+}
+.page:nth-child(17) .cloud::after {
+  width: 57px;
+  height: 51px;
+  -webkit-transform: translate(-1%, -29%);
+          transform: translate(-1%, -29%);
+}
+.page:nth-child(18) .cloud {
+  top: 67%;
+  left: 38%;
+  width: 92px;
+  height: 58px;
+}
+.page:nth-child(18) .cloud::before {
+  width: 130px;
+  height: 44px;
+  -webkit-transform: translate(-14%, 21%);
+          transform: translate(-14%, 21%);
+}
+.page:nth-child(18) .cloud::after {
+  width: 95px;
+  height: 36px;
+  -webkit-transform: translate(12%, 26%);
+          transform: translate(12%, 26%);
+}
+.page:nth-child(19) .cloud {
+  top: 99%;
+  left: 48%;
+  width: 113px;
+  height: 41px;
+}
+.page:nth-child(19) .cloud::before {
+  width: 55px;
+  height: 49px;
+  -webkit-transform: translate(28%, 45%);
+          transform: translate(28%, 45%);
+}
+.page:nth-child(19) .cloud::after {
+  width: 170px;
+  height: 37px;
+  -webkit-transform: translate(4%, -33%);
+          transform: translate(4%, -33%);
+}
+.page:nth-child(20) .cloud {
+  top: 94%;
+  left: 44%;
+  width: 171px;
+  height: 50px;
+}
+.page:nth-child(20) .cloud::before {
+  width: 160px;
+  height: 46px;
+  -webkit-transform: translate(-26%, 18%);
+          transform: translate(-26%, 18%);
+}
+.page:nth-child(20) .cloud::after {
+  width: 55px;
+  height: 44px;
+  -webkit-transform: translate(-40%, -44%);
+          transform: translate(-40%, -44%);
+}
+.page:nth-child(21) .cloud {
+  top: 51%;
+  left: 51%;
+  width: 158px;
+  height: 41px;
+}
+.page:nth-child(21) .cloud::before {
+  width: 61px;
+  height: 35px;
+  -webkit-transform: translate(-2%, 26%);
+          transform: translate(-2%, 26%);
+}
+.page:nth-child(21) .cloud::after {
+  width: 160px;
+  height: 37px;
+  -webkit-transform: translate(-44%, 46%);
+          transform: translate(-44%, 46%);
+}
+.page:nth-child(22) .cloud {
+  top: 65%;
+  left: 21%;
+  width: 80px;
+  height: 56px;
+}
+.page:nth-child(22) .cloud::before {
+  width: 65px;
+  height: 36px;
+  -webkit-transform: translate(13%, 22%);
+          transform: translate(13%, 22%);
+}
+.page:nth-child(22) .cloud::after {
+  width: 104px;
+  height: 49px;
+  -webkit-transform: translate(-1%, -13%);
+          transform: translate(-1%, -13%);
+}
+.page:nth-child(23) .cloud {
+  top: 83%;
+  left: 98%;
+  width: 131px;
+  height: 40px;
+}
+.page:nth-child(23) .cloud::before {
+  width: 159px;
+  height: 35px;
+  -webkit-transform: translate(-10%, 4%);
+          transform: translate(-10%, 4%);
+}
+.page:nth-child(23) .cloud::after {
+  width: 150px;
+  height: 48px;
+  -webkit-transform: translate(26%, -1%);
+          transform: translate(26%, -1%);
+}
+.page:nth-child(24) .cloud {
+  top: 92%;
+  left: 38%;
+  width: 53px;
+  height: 41px;
+}
+.page:nth-child(24) .cloud::before {
+  width: 126px;
+  height: 42px;
+  -webkit-transform: translate(-8%, 8%);
+          transform: translate(-8%, 8%);
+}
+.page:nth-child(24) .cloud::after {
+  width: 140px;
+  height: 54px;
+  -webkit-transform: translate(-7%, 20%);
+          transform: translate(-7%, 20%);
+}
+.page:nth-child(25) .cloud {
+  top: 89%;
+  left: 27%;
+  width: 58px;
+  height: 57px;
+}
+.page:nth-child(25) .cloud::before {
+  width: 76px;
+  height: 32px;
+  -webkit-transform: translate(-3%, 8%);
+          transform: translate(-3%, 8%);
+}
+.page:nth-child(25) .cloud::after {
+  width: 142px;
+  height: 52px;
+  -webkit-transform: translate(10%, -14%);
+          transform: translate(10%, -14%);
+}
+.page:nth-child(26) .cloud {
+  top: 99%;
+  left: 20%;
+  width: 106px;
+  height: 47px;
+}
+.page:nth-child(26) .cloud::before {
+  width: 128px;
+  height: 51px;
+  -webkit-transform: translate(-24%, 47%);
+          transform: translate(-24%, 47%);
+}
+.page:nth-child(26) .cloud::after {
+  width: 71px;
+  height: 47px;
+  -webkit-transform: translate(-48%, -9%);
+          transform: translate(-48%, -9%);
+}
+.page:nth-child(27) .cloud {
+  top: 95%;
+  left: 70%;
+  width: 77px;
+  height: 33px;
+}
+.page:nth-child(27) .cloud::before {
+  width: 145px;
+  height: 39px;
+  -webkit-transform: translate(16%, 28%);
+          transform: translate(16%, 28%);
+}
+.page:nth-child(27) .cloud::after {
+  width: 144px;
+  height: 58px;
+  -webkit-transform: translate(40%, -24%);
+          transform: translate(40%, -24%);
+}
+.page:nth-child(28) .cloud {
+  top: 99%;
+  left: 68%;
+  width: 151px;
+  height: 42px;
+}
+.page:nth-child(28) .cloud::before {
+  width: 66px;
+  height: 43px;
+  -webkit-transform: translate(39%, 16%);
+          transform: translate(39%, 16%);
+}
+.page:nth-child(28) .cloud::after {
+  width: 88px;
+  height: 40px;
+  -webkit-transform: translate(6%, -44%);
+          transform: translate(6%, -44%);
+}
+.page:nth-child(29) .cloud {
+  top: 92%;
+  left: 89%;
+  width: 150px;
+  height: 42px;
+}
+.page:nth-child(29) .cloud::before {
+  width: 121px;
+  height: 33px;
+  -webkit-transform: translate(-49%, 30%);
+          transform: translate(-49%, 30%);
+}
+.page:nth-child(29) .cloud::after {
+  width: 66px;
+  height: 44px;
+  -webkit-transform: translate(-19%, -28%);
+          transform: translate(-19%, -28%);
+}
+.page:nth-child(30) .cloud {
+  top: 88%;
+  left: 19%;
+  width: 119px;
+  height: 43px;
+}
+.page:nth-child(30) .cloud::before {
+  width: 114px;
+  height: 52px;
+  -webkit-transform: translate(-1%, -37%);
+          transform: translate(-1%, -37%);
+}
+.page:nth-child(30) .cloud::after {
+  width: 158px;
+  height: 45px;
+  -webkit-transform: translate(-15%, -30%);
+          transform: translate(-15%, -30%);
+}
+.page:nth-child(31) .cloud {
+  top: 71%;
+  left: 27%;
+  width: 70px;
+  height: 42px;
+}
+.page:nth-child(31) .cloud::before {
+  width: 59px;
+  height: 50px;
+  -webkit-transform: translate(14%, 26%);
+          transform: translate(14%, 26%);
+}
+.page:nth-child(31) .cloud::after {
+  width: 51px;
+  height: 58px;
+  -webkit-transform: translate(28%, -27%);
+          transform: translate(28%, -27%);
+}
+.page:nth-child(32) .cloud {
+  top: 92%;
+  left: 39%;
+  width: 108px;
+  height: 57px;
+}
+.page:nth-child(32) .cloud::before {
+  width: 107px;
+  height: 53px;
+  -webkit-transform: translate(-26%, 6%);
+          transform: translate(-26%, 6%);
+}
+.page:nth-child(32) .cloud::after {
+  width: 133px;
+  height: 36px;
+  -webkit-transform: translate(33%, 40%);
+          transform: translate(33%, 40%);
+}
+.page:nth-child(33) .cloud {
+  top: 74%;
+  left: 90%;
+  width: 83px;
+  height: 49px;
+}
+.page:nth-child(33) .cloud::before {
+  width: 153px;
+  height: 43px;
+  -webkit-transform: translate(8%, 19%);
+          transform: translate(8%, 19%);
+}
+.page:nth-child(33) .cloud::after {
+  width: 59px;
+  height: 58px;
+  -webkit-transform: translate(-41%, 17%);
+          transform: translate(-41%, 17%);
+}
+.page:nth-child(34) .cloud {
+  top: 90%;
+  left: 39%;
+  width: 173px;
+  height: 31px;
+}
+.page:nth-child(34) .cloud::before {
+  width: 69px;
+  height: 48px;
+  -webkit-transform: translate(41%, -19%);
+          transform: translate(41%, -19%);
+}
+.page:nth-child(34) .cloud::after {
+  width: 121px;
+  height: 31px;
+  -webkit-transform: translate(-40%, -20%);
+          transform: translate(-40%, -20%);
+}
+.page:nth-child(35) .cloud {
+  top: 95%;
+  left: 85%;
+  width: 56px;
+  height: 37px;
+}
+.page:nth-child(35) .cloud::before {
+  width: 122px;
+  height: 32px;
+  -webkit-transform: translate(-3%, 8%);
+          transform: translate(-3%, 8%);
+}
+.page:nth-child(35) .cloud::after {
+  width: 74px;
+  height: 33px;
+  -webkit-transform: translate(-2%, -31%);
+          transform: translate(-2%, -31%);
+}
+.page:nth-child(36) .cloud {
+  top: 52%;
+  left: 8%;
+  width: 62px;
+  height: 42px;
+}
+.page:nth-child(36) .cloud::before {
+  width: 164px;
+  height: 35px;
+  -webkit-transform: translate(22%, -39%);
+          transform: translate(22%, -39%);
+}
+.page:nth-child(36) .cloud::after {
+  width: 117px;
+  height: 43px;
+  -webkit-transform: translate(-40%, 11%);
+          transform: translate(-40%, 11%);
+}
+
+.interface {
+  flex: 1;
+  box-sizing: border-box;
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(0.2777777778deg);
+          transform: translateY(-50%) rotateY(0.2777777778deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(0.5555555556deg);
+          transform: translateY(-50%) rotateY(0.5555555556deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(0.8333333333deg);
+          transform: translateY(-50%) rotateY(0.8333333333deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(1.1111111111deg);
+          transform: translateY(-50%) rotateY(1.1111111111deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(1.3888888889deg);
+          transform: translateY(-50%) rotateY(1.3888888889deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(1.6666666667deg);
+          transform: translateY(-50%) rotateY(1.6666666667deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(1.9444444444deg);
+          transform: translateY(-50%) rotateY(1.9444444444deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(2.2222222222deg);
+          transform: translateY(-50%) rotateY(2.2222222222deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(2.5deg);
+          transform: translateY(-50%) rotateY(2.5deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(2.7777777778deg);
+          transform: translateY(-50%) rotateY(2.7777777778deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(3.0555555556deg);
+          transform: translateY(-50%) rotateY(3.0555555556deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(3.3333333333deg);
+          transform: translateY(-50%) rotateY(3.3333333333deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(3.6111111111deg);
+          transform: translateY(-50%) rotateY(3.6111111111deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(3.8888888889deg);
+          transform: translateY(-50%) rotateY(3.8888888889deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(4.1666666667deg);
+          transform: translateY(-50%) rotateY(4.1666666667deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(4.4444444444deg);
+          transform: translateY(-50%) rotateY(4.4444444444deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(4.7222222222deg);
+          transform: translateY(-50%) rotateY(4.7222222222deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(5deg);
+          transform: translateY(-50%) rotateY(5deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(5.2777777778deg);
+          transform: translateY(-50%) rotateY(5.2777777778deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(5.5555555556deg);
+          transform: translateY(-50%) rotateY(5.5555555556deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(5.8333333333deg);
+          transform: translateY(-50%) rotateY(5.8333333333deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(6.1111111111deg);
+          transform: translateY(-50%) rotateY(6.1111111111deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(6.3888888889deg);
+          transform: translateY(-50%) rotateY(6.3888888889deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(6.6666666667deg);
+          transform: translateY(-50%) rotateY(6.6666666667deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(6.9444444444deg);
+          transform: translateY(-50%) rotateY(6.9444444444deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(7.2222222222deg);
+          transform: translateY(-50%) rotateY(7.2222222222deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(7.5deg);
+          transform: translateY(-50%) rotateY(7.5deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(7.7777777778deg);
+          transform: translateY(-50%) rotateY(7.7777777778deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(8.0555555556deg);
+          transform: translateY(-50%) rotateY(8.0555555556deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(8.3333333333deg);
+          transform: translateY(-50%) rotateY(8.3333333333deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(8.6111111111deg);
+          transform: translateY(-50%) rotateY(8.6111111111deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(8.8888888889deg);
+          transform: translateY(-50%) rotateY(8.8888888889deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(9.1666666667deg);
+          transform: translateY(-50%) rotateY(9.1666666667deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(9.4444444444deg);
+          transform: translateY(-50%) rotateY(9.4444444444deg);
+}
+.interface:nth-child(1):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(9.7222222222deg);
+          transform: translateY(-50%) rotateY(9.7222222222deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(0.5555555556deg);
+          transform: translateY(-50%) rotateY(0.5555555556deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(1.1111111111deg);
+          transform: translateY(-50%) rotateY(1.1111111111deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(1.6666666667deg);
+          transform: translateY(-50%) rotateY(1.6666666667deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(2.2222222222deg);
+          transform: translateY(-50%) rotateY(2.2222222222deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(2.7777777778deg);
+          transform: translateY(-50%) rotateY(2.7777777778deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(3.3333333333deg);
+          transform: translateY(-50%) rotateY(3.3333333333deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(3.8888888889deg);
+          transform: translateY(-50%) rotateY(3.8888888889deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(4.4444444444deg);
+          transform: translateY(-50%) rotateY(4.4444444444deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(5deg);
+          transform: translateY(-50%) rotateY(5deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(5.5555555556deg);
+          transform: translateY(-50%) rotateY(5.5555555556deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(6.1111111111deg);
+          transform: translateY(-50%) rotateY(6.1111111111deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(6.6666666667deg);
+          transform: translateY(-50%) rotateY(6.6666666667deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(7.2222222222deg);
+          transform: translateY(-50%) rotateY(7.2222222222deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(7.7777777778deg);
+          transform: translateY(-50%) rotateY(7.7777777778deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(8.3333333333deg);
+          transform: translateY(-50%) rotateY(8.3333333333deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(8.8888888889deg);
+          transform: translateY(-50%) rotateY(8.8888888889deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(9.4444444444deg);
+          transform: translateY(-50%) rotateY(9.4444444444deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(10deg);
+          transform: translateY(-50%) rotateY(10deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(10.5555555556deg);
+          transform: translateY(-50%) rotateY(10.5555555556deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(11.1111111111deg);
+          transform: translateY(-50%) rotateY(11.1111111111deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(11.6666666667deg);
+          transform: translateY(-50%) rotateY(11.6666666667deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(12.2222222222deg);
+          transform: translateY(-50%) rotateY(12.2222222222deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(12.7777777778deg);
+          transform: translateY(-50%) rotateY(12.7777777778deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(13.3333333333deg);
+          transform: translateY(-50%) rotateY(13.3333333333deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(13.8888888889deg);
+          transform: translateY(-50%) rotateY(13.8888888889deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(14.4444444444deg);
+          transform: translateY(-50%) rotateY(14.4444444444deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(15deg);
+          transform: translateY(-50%) rotateY(15deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(15.5555555556deg);
+          transform: translateY(-50%) rotateY(15.5555555556deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(16.1111111111deg);
+          transform: translateY(-50%) rotateY(16.1111111111deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(16.6666666667deg);
+          transform: translateY(-50%) rotateY(16.6666666667deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(17.2222222222deg);
+          transform: translateY(-50%) rotateY(17.2222222222deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(17.7777777778deg);
+          transform: translateY(-50%) rotateY(17.7777777778deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(18.3333333333deg);
+          transform: translateY(-50%) rotateY(18.3333333333deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(18.8888888889deg);
+          transform: translateY(-50%) rotateY(18.8888888889deg);
+}
+.interface:nth-child(2):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(19.4444444444deg);
+          transform: translateY(-50%) rotateY(19.4444444444deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(0.8333333333deg);
+          transform: translateY(-50%) rotateY(0.8333333333deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(1.6666666667deg);
+          transform: translateY(-50%) rotateY(1.6666666667deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(2.5deg);
+          transform: translateY(-50%) rotateY(2.5deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(3.3333333333deg);
+          transform: translateY(-50%) rotateY(3.3333333333deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(4.1666666667deg);
+          transform: translateY(-50%) rotateY(4.1666666667deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(5deg);
+          transform: translateY(-50%) rotateY(5deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(5.8333333333deg);
+          transform: translateY(-50%) rotateY(5.8333333333deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(6.6666666667deg);
+          transform: translateY(-50%) rotateY(6.6666666667deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(7.5deg);
+          transform: translateY(-50%) rotateY(7.5deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(8.3333333333deg);
+          transform: translateY(-50%) rotateY(8.3333333333deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(9.1666666667deg);
+          transform: translateY(-50%) rotateY(9.1666666667deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(10deg);
+          transform: translateY(-50%) rotateY(10deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(10.8333333333deg);
+          transform: translateY(-50%) rotateY(10.8333333333deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(11.6666666667deg);
+          transform: translateY(-50%) rotateY(11.6666666667deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(12.5deg);
+          transform: translateY(-50%) rotateY(12.5deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(13.3333333333deg);
+          transform: translateY(-50%) rotateY(13.3333333333deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(14.1666666667deg);
+          transform: translateY(-50%) rotateY(14.1666666667deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(15deg);
+          transform: translateY(-50%) rotateY(15deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(15.8333333333deg);
+          transform: translateY(-50%) rotateY(15.8333333333deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(16.6666666667deg);
+          transform: translateY(-50%) rotateY(16.6666666667deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(17.5deg);
+          transform: translateY(-50%) rotateY(17.5deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(18.3333333333deg);
+          transform: translateY(-50%) rotateY(18.3333333333deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(19.1666666667deg);
+          transform: translateY(-50%) rotateY(19.1666666667deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(20deg);
+          transform: translateY(-50%) rotateY(20deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(20.8333333333deg);
+          transform: translateY(-50%) rotateY(20.8333333333deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(21.6666666667deg);
+          transform: translateY(-50%) rotateY(21.6666666667deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(22.5deg);
+          transform: translateY(-50%) rotateY(22.5deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(23.3333333333deg);
+          transform: translateY(-50%) rotateY(23.3333333333deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(24.1666666667deg);
+          transform: translateY(-50%) rotateY(24.1666666667deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(25deg);
+          transform: translateY(-50%) rotateY(25deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(25.8333333333deg);
+          transform: translateY(-50%) rotateY(25.8333333333deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(26.6666666667deg);
+          transform: translateY(-50%) rotateY(26.6666666667deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(27.5deg);
+          transform: translateY(-50%) rotateY(27.5deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(28.3333333333deg);
+          transform: translateY(-50%) rotateY(28.3333333333deg);
+}
+.interface:nth-child(3):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(29.1666666667deg);
+          transform: translateY(-50%) rotateY(29.1666666667deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(1.1111111111deg);
+          transform: translateY(-50%) rotateY(1.1111111111deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(2.2222222222deg);
+          transform: translateY(-50%) rotateY(2.2222222222deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(3.3333333333deg);
+          transform: translateY(-50%) rotateY(3.3333333333deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(4.4444444444deg);
+          transform: translateY(-50%) rotateY(4.4444444444deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(5.5555555556deg);
+          transform: translateY(-50%) rotateY(5.5555555556deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(6.6666666667deg);
+          transform: translateY(-50%) rotateY(6.6666666667deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(7.7777777778deg);
+          transform: translateY(-50%) rotateY(7.7777777778deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(8.8888888889deg);
+          transform: translateY(-50%) rotateY(8.8888888889deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(10deg);
+          transform: translateY(-50%) rotateY(10deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(11.1111111111deg);
+          transform: translateY(-50%) rotateY(11.1111111111deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(12.2222222222deg);
+          transform: translateY(-50%) rotateY(12.2222222222deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(13.3333333333deg);
+          transform: translateY(-50%) rotateY(13.3333333333deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(14.4444444444deg);
+          transform: translateY(-50%) rotateY(14.4444444444deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(15.5555555556deg);
+          transform: translateY(-50%) rotateY(15.5555555556deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(16.6666666667deg);
+          transform: translateY(-50%) rotateY(16.6666666667deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(17.7777777778deg);
+          transform: translateY(-50%) rotateY(17.7777777778deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(18.8888888889deg);
+          transform: translateY(-50%) rotateY(18.8888888889deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(20deg);
+          transform: translateY(-50%) rotateY(20deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(21.1111111111deg);
+          transform: translateY(-50%) rotateY(21.1111111111deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(22.2222222222deg);
+          transform: translateY(-50%) rotateY(22.2222222222deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(23.3333333333deg);
+          transform: translateY(-50%) rotateY(23.3333333333deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(24.4444444444deg);
+          transform: translateY(-50%) rotateY(24.4444444444deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(25.5555555556deg);
+          transform: translateY(-50%) rotateY(25.5555555556deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(26.6666666667deg);
+          transform: translateY(-50%) rotateY(26.6666666667deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(27.7777777778deg);
+          transform: translateY(-50%) rotateY(27.7777777778deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(28.8888888889deg);
+          transform: translateY(-50%) rotateY(28.8888888889deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(30deg);
+          transform: translateY(-50%) rotateY(30deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(31.1111111111deg);
+          transform: translateY(-50%) rotateY(31.1111111111deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(32.2222222222deg);
+          transform: translateY(-50%) rotateY(32.2222222222deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(33.3333333333deg);
+          transform: translateY(-50%) rotateY(33.3333333333deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(34.4444444444deg);
+          transform: translateY(-50%) rotateY(34.4444444444deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(35.5555555556deg);
+          transform: translateY(-50%) rotateY(35.5555555556deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(36.6666666667deg);
+          transform: translateY(-50%) rotateY(36.6666666667deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(37.7777777778deg);
+          transform: translateY(-50%) rotateY(37.7777777778deg);
+}
+.interface:nth-child(4):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(38.8888888889deg);
+          transform: translateY(-50%) rotateY(38.8888888889deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(1.3888888889deg);
+          transform: translateY(-50%) rotateY(1.3888888889deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(2.7777777778deg);
+          transform: translateY(-50%) rotateY(2.7777777778deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(4.1666666667deg);
+          transform: translateY(-50%) rotateY(4.1666666667deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(5.5555555556deg);
+          transform: translateY(-50%) rotateY(5.5555555556deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(6.9444444444deg);
+          transform: translateY(-50%) rotateY(6.9444444444deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(8.3333333333deg);
+          transform: translateY(-50%) rotateY(8.3333333333deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(9.7222222222deg);
+          transform: translateY(-50%) rotateY(9.7222222222deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(11.1111111111deg);
+          transform: translateY(-50%) rotateY(11.1111111111deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(12.5deg);
+          transform: translateY(-50%) rotateY(12.5deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(13.8888888889deg);
+          transform: translateY(-50%) rotateY(13.8888888889deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(15.2777777778deg);
+          transform: translateY(-50%) rotateY(15.2777777778deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(16.6666666667deg);
+          transform: translateY(-50%) rotateY(16.6666666667deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(18.0555555556deg);
+          transform: translateY(-50%) rotateY(18.0555555556deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(19.4444444444deg);
+          transform: translateY(-50%) rotateY(19.4444444444deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(20.8333333333deg);
+          transform: translateY(-50%) rotateY(20.8333333333deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(22.2222222222deg);
+          transform: translateY(-50%) rotateY(22.2222222222deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(23.6111111111deg);
+          transform: translateY(-50%) rotateY(23.6111111111deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(25deg);
+          transform: translateY(-50%) rotateY(25deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(26.3888888889deg);
+          transform: translateY(-50%) rotateY(26.3888888889deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(27.7777777778deg);
+          transform: translateY(-50%) rotateY(27.7777777778deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(29.1666666667deg);
+          transform: translateY(-50%) rotateY(29.1666666667deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(30.5555555556deg);
+          transform: translateY(-50%) rotateY(30.5555555556deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(31.9444444444deg);
+          transform: translateY(-50%) rotateY(31.9444444444deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(33.3333333333deg);
+          transform: translateY(-50%) rotateY(33.3333333333deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(34.7222222222deg);
+          transform: translateY(-50%) rotateY(34.7222222222deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(36.1111111111deg);
+          transform: translateY(-50%) rotateY(36.1111111111deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(37.5deg);
+          transform: translateY(-50%) rotateY(37.5deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(38.8888888889deg);
+          transform: translateY(-50%) rotateY(38.8888888889deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(40.2777777778deg);
+          transform: translateY(-50%) rotateY(40.2777777778deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(41.6666666667deg);
+          transform: translateY(-50%) rotateY(41.6666666667deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(43.0555555556deg);
+          transform: translateY(-50%) rotateY(43.0555555556deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(44.4444444444deg);
+          transform: translateY(-50%) rotateY(44.4444444444deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(45.8333333333deg);
+          transform: translateY(-50%) rotateY(45.8333333333deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(47.2222222222deg);
+          transform: translateY(-50%) rotateY(47.2222222222deg);
+}
+.interface:nth-child(5):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(48.6111111111deg);
+          transform: translateY(-50%) rotateY(48.6111111111deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(1.6666666667deg);
+          transform: translateY(-50%) rotateY(1.6666666667deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(3.3333333333deg);
+          transform: translateY(-50%) rotateY(3.3333333333deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(5deg);
+          transform: translateY(-50%) rotateY(5deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(6.6666666667deg);
+          transform: translateY(-50%) rotateY(6.6666666667deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(8.3333333333deg);
+          transform: translateY(-50%) rotateY(8.3333333333deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(10deg);
+          transform: translateY(-50%) rotateY(10deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(11.6666666667deg);
+          transform: translateY(-50%) rotateY(11.6666666667deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(13.3333333333deg);
+          transform: translateY(-50%) rotateY(13.3333333333deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(15deg);
+          transform: translateY(-50%) rotateY(15deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(16.6666666667deg);
+          transform: translateY(-50%) rotateY(16.6666666667deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(18.3333333333deg);
+          transform: translateY(-50%) rotateY(18.3333333333deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(20deg);
+          transform: translateY(-50%) rotateY(20deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(21.6666666667deg);
+          transform: translateY(-50%) rotateY(21.6666666667deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(23.3333333333deg);
+          transform: translateY(-50%) rotateY(23.3333333333deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(25deg);
+          transform: translateY(-50%) rotateY(25deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(26.6666666667deg);
+          transform: translateY(-50%) rotateY(26.6666666667deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(28.3333333333deg);
+          transform: translateY(-50%) rotateY(28.3333333333deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(30deg);
+          transform: translateY(-50%) rotateY(30deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(31.6666666667deg);
+          transform: translateY(-50%) rotateY(31.6666666667deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(33.3333333333deg);
+          transform: translateY(-50%) rotateY(33.3333333333deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(35deg);
+          transform: translateY(-50%) rotateY(35deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(36.6666666667deg);
+          transform: translateY(-50%) rotateY(36.6666666667deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(38.3333333333deg);
+          transform: translateY(-50%) rotateY(38.3333333333deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(40deg);
+          transform: translateY(-50%) rotateY(40deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(41.6666666667deg);
+          transform: translateY(-50%) rotateY(41.6666666667deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(43.3333333333deg);
+          transform: translateY(-50%) rotateY(43.3333333333deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(45deg);
+          transform: translateY(-50%) rotateY(45deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(46.6666666667deg);
+          transform: translateY(-50%) rotateY(46.6666666667deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(48.3333333333deg);
+          transform: translateY(-50%) rotateY(48.3333333333deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(50deg);
+          transform: translateY(-50%) rotateY(50deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(51.6666666667deg);
+          transform: translateY(-50%) rotateY(51.6666666667deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(53.3333333333deg);
+          transform: translateY(-50%) rotateY(53.3333333333deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(55deg);
+          transform: translateY(-50%) rotateY(55deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(56.6666666667deg);
+          transform: translateY(-50%) rotateY(56.6666666667deg);
+}
+.interface:nth-child(6):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(58.3333333333deg);
+          transform: translateY(-50%) rotateY(58.3333333333deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(1.9444444444deg);
+          transform: translateY(-50%) rotateY(1.9444444444deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(3.8888888889deg);
+          transform: translateY(-50%) rotateY(3.8888888889deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(5.8333333333deg);
+          transform: translateY(-50%) rotateY(5.8333333333deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(7.7777777778deg);
+          transform: translateY(-50%) rotateY(7.7777777778deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(9.7222222222deg);
+          transform: translateY(-50%) rotateY(9.7222222222deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(11.6666666667deg);
+          transform: translateY(-50%) rotateY(11.6666666667deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(13.6111111111deg);
+          transform: translateY(-50%) rotateY(13.6111111111deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(15.5555555556deg);
+          transform: translateY(-50%) rotateY(15.5555555556deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(17.5deg);
+          transform: translateY(-50%) rotateY(17.5deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(19.4444444444deg);
+          transform: translateY(-50%) rotateY(19.4444444444deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(21.3888888889deg);
+          transform: translateY(-50%) rotateY(21.3888888889deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(23.3333333333deg);
+          transform: translateY(-50%) rotateY(23.3333333333deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(25.2777777778deg);
+          transform: translateY(-50%) rotateY(25.2777777778deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(27.2222222222deg);
+          transform: translateY(-50%) rotateY(27.2222222222deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(29.1666666667deg);
+          transform: translateY(-50%) rotateY(29.1666666667deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(31.1111111111deg);
+          transform: translateY(-50%) rotateY(31.1111111111deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(33.0555555556deg);
+          transform: translateY(-50%) rotateY(33.0555555556deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(35deg);
+          transform: translateY(-50%) rotateY(35deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(36.9444444444deg);
+          transform: translateY(-50%) rotateY(36.9444444444deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(38.8888888889deg);
+          transform: translateY(-50%) rotateY(38.8888888889deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(40.8333333333deg);
+          transform: translateY(-50%) rotateY(40.8333333333deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(42.7777777778deg);
+          transform: translateY(-50%) rotateY(42.7777777778deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(44.7222222222deg);
+          transform: translateY(-50%) rotateY(44.7222222222deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(46.6666666667deg);
+          transform: translateY(-50%) rotateY(46.6666666667deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(48.6111111111deg);
+          transform: translateY(-50%) rotateY(48.6111111111deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(50.5555555556deg);
+          transform: translateY(-50%) rotateY(50.5555555556deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(52.5deg);
+          transform: translateY(-50%) rotateY(52.5deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(54.4444444444deg);
+          transform: translateY(-50%) rotateY(54.4444444444deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(56.3888888889deg);
+          transform: translateY(-50%) rotateY(56.3888888889deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(58.3333333333deg);
+          transform: translateY(-50%) rotateY(58.3333333333deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(60.2777777778deg);
+          transform: translateY(-50%) rotateY(60.2777777778deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(62.2222222222deg);
+          transform: translateY(-50%) rotateY(62.2222222222deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(64.1666666667deg);
+          transform: translateY(-50%) rotateY(64.1666666667deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(66.1111111111deg);
+          transform: translateY(-50%) rotateY(66.1111111111deg);
+}
+.interface:nth-child(7):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(68.0555555556deg);
+          transform: translateY(-50%) rotateY(68.0555555556deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(2.2222222222deg);
+          transform: translateY(-50%) rotateY(2.2222222222deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(4.4444444444deg);
+          transform: translateY(-50%) rotateY(4.4444444444deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(6.6666666667deg);
+          transform: translateY(-50%) rotateY(6.6666666667deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(8.8888888889deg);
+          transform: translateY(-50%) rotateY(8.8888888889deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(11.1111111111deg);
+          transform: translateY(-50%) rotateY(11.1111111111deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(13.3333333333deg);
+          transform: translateY(-50%) rotateY(13.3333333333deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(15.5555555556deg);
+          transform: translateY(-50%) rotateY(15.5555555556deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(17.7777777778deg);
+          transform: translateY(-50%) rotateY(17.7777777778deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(20deg);
+          transform: translateY(-50%) rotateY(20deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(22.2222222222deg);
+          transform: translateY(-50%) rotateY(22.2222222222deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(24.4444444444deg);
+          transform: translateY(-50%) rotateY(24.4444444444deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(26.6666666667deg);
+          transform: translateY(-50%) rotateY(26.6666666667deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(28.8888888889deg);
+          transform: translateY(-50%) rotateY(28.8888888889deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(31.1111111111deg);
+          transform: translateY(-50%) rotateY(31.1111111111deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(33.3333333333deg);
+          transform: translateY(-50%) rotateY(33.3333333333deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(35.5555555556deg);
+          transform: translateY(-50%) rotateY(35.5555555556deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(37.7777777778deg);
+          transform: translateY(-50%) rotateY(37.7777777778deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(40deg);
+          transform: translateY(-50%) rotateY(40deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(42.2222222222deg);
+          transform: translateY(-50%) rotateY(42.2222222222deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(44.4444444444deg);
+          transform: translateY(-50%) rotateY(44.4444444444deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(46.6666666667deg);
+          transform: translateY(-50%) rotateY(46.6666666667deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(48.8888888889deg);
+          transform: translateY(-50%) rotateY(48.8888888889deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(51.1111111111deg);
+          transform: translateY(-50%) rotateY(51.1111111111deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(53.3333333333deg);
+          transform: translateY(-50%) rotateY(53.3333333333deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(55.5555555556deg);
+          transform: translateY(-50%) rotateY(55.5555555556deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(57.7777777778deg);
+          transform: translateY(-50%) rotateY(57.7777777778deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(60deg);
+          transform: translateY(-50%) rotateY(60deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(62.2222222222deg);
+          transform: translateY(-50%) rotateY(62.2222222222deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(64.4444444444deg);
+          transform: translateY(-50%) rotateY(64.4444444444deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(66.6666666667deg);
+          transform: translateY(-50%) rotateY(66.6666666667deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(68.8888888889deg);
+          transform: translateY(-50%) rotateY(68.8888888889deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(71.1111111111deg);
+          transform: translateY(-50%) rotateY(71.1111111111deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(73.3333333333deg);
+          transform: translateY(-50%) rotateY(73.3333333333deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(75.5555555556deg);
+          transform: translateY(-50%) rotateY(75.5555555556deg);
+}
+.interface:nth-child(8):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(77.7777777778deg);
+          transform: translateY(-50%) rotateY(77.7777777778deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(2.5deg);
+          transform: translateY(-50%) rotateY(2.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(5deg);
+          transform: translateY(-50%) rotateY(5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(7.5deg);
+          transform: translateY(-50%) rotateY(7.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(10deg);
+          transform: translateY(-50%) rotateY(10deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(12.5deg);
+          transform: translateY(-50%) rotateY(12.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(15deg);
+          transform: translateY(-50%) rotateY(15deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(17.5deg);
+          transform: translateY(-50%) rotateY(17.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(20deg);
+          transform: translateY(-50%) rotateY(20deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(22.5deg);
+          transform: translateY(-50%) rotateY(22.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(25deg);
+          transform: translateY(-50%) rotateY(25deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(27.5deg);
+          transform: translateY(-50%) rotateY(27.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(30deg);
+          transform: translateY(-50%) rotateY(30deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(32.5deg);
+          transform: translateY(-50%) rotateY(32.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(35deg);
+          transform: translateY(-50%) rotateY(35deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(37.5deg);
+          transform: translateY(-50%) rotateY(37.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(40deg);
+          transform: translateY(-50%) rotateY(40deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(42.5deg);
+          transform: translateY(-50%) rotateY(42.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(45deg);
+          transform: translateY(-50%) rotateY(45deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(47.5deg);
+          transform: translateY(-50%) rotateY(47.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(50deg);
+          transform: translateY(-50%) rotateY(50deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(52.5deg);
+          transform: translateY(-50%) rotateY(52.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(55deg);
+          transform: translateY(-50%) rotateY(55deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(57.5deg);
+          transform: translateY(-50%) rotateY(57.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(60deg);
+          transform: translateY(-50%) rotateY(60deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(62.5deg);
+          transform: translateY(-50%) rotateY(62.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(65deg);
+          transform: translateY(-50%) rotateY(65deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(67.5deg);
+          transform: translateY(-50%) rotateY(67.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(70deg);
+          transform: translateY(-50%) rotateY(70deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(72.5deg);
+          transform: translateY(-50%) rotateY(72.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(75deg);
+          transform: translateY(-50%) rotateY(75deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(77.5deg);
+          transform: translateY(-50%) rotateY(77.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(80deg);
+          transform: translateY(-50%) rotateY(80deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(82.5deg);
+          transform: translateY(-50%) rotateY(82.5deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(85deg);
+          transform: translateY(-50%) rotateY(85deg);
+}
+.interface:nth-child(9):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(87.5deg);
+          transform: translateY(-50%) rotateY(87.5deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(2.7777777778deg);
+          transform: translateY(-50%) rotateY(2.7777777778deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(5.5555555556deg);
+          transform: translateY(-50%) rotateY(5.5555555556deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(8.3333333333deg);
+          transform: translateY(-50%) rotateY(8.3333333333deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(11.1111111111deg);
+          transform: translateY(-50%) rotateY(11.1111111111deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(13.8888888889deg);
+          transform: translateY(-50%) rotateY(13.8888888889deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(16.6666666667deg);
+          transform: translateY(-50%) rotateY(16.6666666667deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(19.4444444444deg);
+          transform: translateY(-50%) rotateY(19.4444444444deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(22.2222222222deg);
+          transform: translateY(-50%) rotateY(22.2222222222deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(25deg);
+          transform: translateY(-50%) rotateY(25deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(27.7777777778deg);
+          transform: translateY(-50%) rotateY(27.7777777778deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(30.5555555556deg);
+          transform: translateY(-50%) rotateY(30.5555555556deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(33.3333333333deg);
+          transform: translateY(-50%) rotateY(33.3333333333deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(36.1111111111deg);
+          transform: translateY(-50%) rotateY(36.1111111111deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(38.8888888889deg);
+          transform: translateY(-50%) rotateY(38.8888888889deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(41.6666666667deg);
+          transform: translateY(-50%) rotateY(41.6666666667deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(44.4444444444deg);
+          transform: translateY(-50%) rotateY(44.4444444444deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(47.2222222222deg);
+          transform: translateY(-50%) rotateY(47.2222222222deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(50deg);
+          transform: translateY(-50%) rotateY(50deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(52.7777777778deg);
+          transform: translateY(-50%) rotateY(52.7777777778deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(55.5555555556deg);
+          transform: translateY(-50%) rotateY(55.5555555556deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(58.3333333333deg);
+          transform: translateY(-50%) rotateY(58.3333333333deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(61.1111111111deg);
+          transform: translateY(-50%) rotateY(61.1111111111deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(63.8888888889deg);
+          transform: translateY(-50%) rotateY(63.8888888889deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(66.6666666667deg);
+          transform: translateY(-50%) rotateY(66.6666666667deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(69.4444444444deg);
+          transform: translateY(-50%) rotateY(69.4444444444deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(72.2222222222deg);
+          transform: translateY(-50%) rotateY(72.2222222222deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(75deg);
+          transform: translateY(-50%) rotateY(75deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(77.7777777778deg);
+          transform: translateY(-50%) rotateY(77.7777777778deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(80.5555555556deg);
+          transform: translateY(-50%) rotateY(80.5555555556deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(83.3333333333deg);
+          transform: translateY(-50%) rotateY(83.3333333333deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(86.1111111111deg);
+          transform: translateY(-50%) rotateY(86.1111111111deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(88.8888888889deg);
+          transform: translateY(-50%) rotateY(88.8888888889deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(91.6666666667deg);
+          transform: translateY(-50%) rotateY(91.6666666667deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(94.4444444444deg);
+          transform: translateY(-50%) rotateY(94.4444444444deg);
+}
+.interface:nth-child(10):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(97.2222222222deg);
+          transform: translateY(-50%) rotateY(97.2222222222deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(3.0555555556deg);
+          transform: translateY(-50%) rotateY(3.0555555556deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(6.1111111111deg);
+          transform: translateY(-50%) rotateY(6.1111111111deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(9.1666666667deg);
+          transform: translateY(-50%) rotateY(9.1666666667deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(12.2222222222deg);
+          transform: translateY(-50%) rotateY(12.2222222222deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(15.2777777778deg);
+          transform: translateY(-50%) rotateY(15.2777777778deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(18.3333333333deg);
+          transform: translateY(-50%) rotateY(18.3333333333deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(21.3888888889deg);
+          transform: translateY(-50%) rotateY(21.3888888889deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(24.4444444444deg);
+          transform: translateY(-50%) rotateY(24.4444444444deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(27.5deg);
+          transform: translateY(-50%) rotateY(27.5deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(30.5555555556deg);
+          transform: translateY(-50%) rotateY(30.5555555556deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(33.6111111111deg);
+          transform: translateY(-50%) rotateY(33.6111111111deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(36.6666666667deg);
+          transform: translateY(-50%) rotateY(36.6666666667deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(39.7222222222deg);
+          transform: translateY(-50%) rotateY(39.7222222222deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(42.7777777778deg);
+          transform: translateY(-50%) rotateY(42.7777777778deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(45.8333333333deg);
+          transform: translateY(-50%) rotateY(45.8333333333deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(48.8888888889deg);
+          transform: translateY(-50%) rotateY(48.8888888889deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(51.9444444444deg);
+          transform: translateY(-50%) rotateY(51.9444444444deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(55deg);
+          transform: translateY(-50%) rotateY(55deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(58.0555555556deg);
+          transform: translateY(-50%) rotateY(58.0555555556deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(61.1111111111deg);
+          transform: translateY(-50%) rotateY(61.1111111111deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(64.1666666667deg);
+          transform: translateY(-50%) rotateY(64.1666666667deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(67.2222222222deg);
+          transform: translateY(-50%) rotateY(67.2222222222deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(70.2777777778deg);
+          transform: translateY(-50%) rotateY(70.2777777778deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(73.3333333333deg);
+          transform: translateY(-50%) rotateY(73.3333333333deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(76.3888888889deg);
+          transform: translateY(-50%) rotateY(76.3888888889deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(79.4444444444deg);
+          transform: translateY(-50%) rotateY(79.4444444444deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(82.5deg);
+          transform: translateY(-50%) rotateY(82.5deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(85.5555555556deg);
+          transform: translateY(-50%) rotateY(85.5555555556deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(88.6111111111deg);
+          transform: translateY(-50%) rotateY(88.6111111111deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(91.6666666667deg);
+          transform: translateY(-50%) rotateY(91.6666666667deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(94.7222222222deg);
+          transform: translateY(-50%) rotateY(94.7222222222deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(97.7777777778deg);
+          transform: translateY(-50%) rotateY(97.7777777778deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(100.8333333333deg);
+          transform: translateY(-50%) rotateY(100.8333333333deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(103.8888888889deg);
+          transform: translateY(-50%) rotateY(103.8888888889deg);
+}
+.interface:nth-child(11):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(106.9444444444deg);
+          transform: translateY(-50%) rotateY(106.9444444444deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(3.3333333333deg);
+          transform: translateY(-50%) rotateY(3.3333333333deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(6.6666666667deg);
+          transform: translateY(-50%) rotateY(6.6666666667deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(10deg);
+          transform: translateY(-50%) rotateY(10deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(13.3333333333deg);
+          transform: translateY(-50%) rotateY(13.3333333333deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(16.6666666667deg);
+          transform: translateY(-50%) rotateY(16.6666666667deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(20deg);
+          transform: translateY(-50%) rotateY(20deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(23.3333333333deg);
+          transform: translateY(-50%) rotateY(23.3333333333deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(26.6666666667deg);
+          transform: translateY(-50%) rotateY(26.6666666667deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(30deg);
+          transform: translateY(-50%) rotateY(30deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(33.3333333333deg);
+          transform: translateY(-50%) rotateY(33.3333333333deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(36.6666666667deg);
+          transform: translateY(-50%) rotateY(36.6666666667deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(40deg);
+          transform: translateY(-50%) rotateY(40deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(43.3333333333deg);
+          transform: translateY(-50%) rotateY(43.3333333333deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(46.6666666667deg);
+          transform: translateY(-50%) rotateY(46.6666666667deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(50deg);
+          transform: translateY(-50%) rotateY(50deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(53.3333333333deg);
+          transform: translateY(-50%) rotateY(53.3333333333deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(56.6666666667deg);
+          transform: translateY(-50%) rotateY(56.6666666667deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(60deg);
+          transform: translateY(-50%) rotateY(60deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(63.3333333333deg);
+          transform: translateY(-50%) rotateY(63.3333333333deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(66.6666666667deg);
+          transform: translateY(-50%) rotateY(66.6666666667deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(70deg);
+          transform: translateY(-50%) rotateY(70deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(73.3333333333deg);
+          transform: translateY(-50%) rotateY(73.3333333333deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(76.6666666667deg);
+          transform: translateY(-50%) rotateY(76.6666666667deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(80deg);
+          transform: translateY(-50%) rotateY(80deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(83.3333333333deg);
+          transform: translateY(-50%) rotateY(83.3333333333deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(86.6666666667deg);
+          transform: translateY(-50%) rotateY(86.6666666667deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(90deg);
+          transform: translateY(-50%) rotateY(90deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(93.3333333333deg);
+          transform: translateY(-50%) rotateY(93.3333333333deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(96.6666666667deg);
+          transform: translateY(-50%) rotateY(96.6666666667deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(100deg);
+          transform: translateY(-50%) rotateY(100deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(103.3333333333deg);
+          transform: translateY(-50%) rotateY(103.3333333333deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(106.6666666667deg);
+          transform: translateY(-50%) rotateY(106.6666666667deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(110deg);
+          transform: translateY(-50%) rotateY(110deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(113.3333333333deg);
+          transform: translateY(-50%) rotateY(113.3333333333deg);
+}
+.interface:nth-child(12):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(116.6666666667deg);
+          transform: translateY(-50%) rotateY(116.6666666667deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(3.6111111111deg);
+          transform: translateY(-50%) rotateY(3.6111111111deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(7.2222222222deg);
+          transform: translateY(-50%) rotateY(7.2222222222deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(10.8333333333deg);
+          transform: translateY(-50%) rotateY(10.8333333333deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(14.4444444444deg);
+          transform: translateY(-50%) rotateY(14.4444444444deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(18.0555555556deg);
+          transform: translateY(-50%) rotateY(18.0555555556deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(21.6666666667deg);
+          transform: translateY(-50%) rotateY(21.6666666667deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(25.2777777778deg);
+          transform: translateY(-50%) rotateY(25.2777777778deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(28.8888888889deg);
+          transform: translateY(-50%) rotateY(28.8888888889deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(32.5deg);
+          transform: translateY(-50%) rotateY(32.5deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(36.1111111111deg);
+          transform: translateY(-50%) rotateY(36.1111111111deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(39.7222222222deg);
+          transform: translateY(-50%) rotateY(39.7222222222deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(43.3333333333deg);
+          transform: translateY(-50%) rotateY(43.3333333333deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(46.9444444444deg);
+          transform: translateY(-50%) rotateY(46.9444444444deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(50.5555555556deg);
+          transform: translateY(-50%) rotateY(50.5555555556deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(54.1666666667deg);
+          transform: translateY(-50%) rotateY(54.1666666667deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(57.7777777778deg);
+          transform: translateY(-50%) rotateY(57.7777777778deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(61.3888888889deg);
+          transform: translateY(-50%) rotateY(61.3888888889deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(65deg);
+          transform: translateY(-50%) rotateY(65deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(68.6111111111deg);
+          transform: translateY(-50%) rotateY(68.6111111111deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(72.2222222222deg);
+          transform: translateY(-50%) rotateY(72.2222222222deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(75.8333333333deg);
+          transform: translateY(-50%) rotateY(75.8333333333deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(79.4444444444deg);
+          transform: translateY(-50%) rotateY(79.4444444444deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(83.0555555556deg);
+          transform: translateY(-50%) rotateY(83.0555555556deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(86.6666666667deg);
+          transform: translateY(-50%) rotateY(86.6666666667deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(90.2777777778deg);
+          transform: translateY(-50%) rotateY(90.2777777778deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(93.8888888889deg);
+          transform: translateY(-50%) rotateY(93.8888888889deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(97.5deg);
+          transform: translateY(-50%) rotateY(97.5deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(101.1111111111deg);
+          transform: translateY(-50%) rotateY(101.1111111111deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(104.7222222222deg);
+          transform: translateY(-50%) rotateY(104.7222222222deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(108.3333333333deg);
+          transform: translateY(-50%) rotateY(108.3333333333deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(111.9444444444deg);
+          transform: translateY(-50%) rotateY(111.9444444444deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(115.5555555556deg);
+          transform: translateY(-50%) rotateY(115.5555555556deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(119.1666666667deg);
+          transform: translateY(-50%) rotateY(119.1666666667deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(122.7777777778deg);
+          transform: translateY(-50%) rotateY(122.7777777778deg);
+}
+.interface:nth-child(13):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(126.3888888889deg);
+          transform: translateY(-50%) rotateY(126.3888888889deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(3.8888888889deg);
+          transform: translateY(-50%) rotateY(3.8888888889deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(7.7777777778deg);
+          transform: translateY(-50%) rotateY(7.7777777778deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(11.6666666667deg);
+          transform: translateY(-50%) rotateY(11.6666666667deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(15.5555555556deg);
+          transform: translateY(-50%) rotateY(15.5555555556deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(19.4444444444deg);
+          transform: translateY(-50%) rotateY(19.4444444444deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(23.3333333333deg);
+          transform: translateY(-50%) rotateY(23.3333333333deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(27.2222222222deg);
+          transform: translateY(-50%) rotateY(27.2222222222deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(31.1111111111deg);
+          transform: translateY(-50%) rotateY(31.1111111111deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(35deg);
+          transform: translateY(-50%) rotateY(35deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(38.8888888889deg);
+          transform: translateY(-50%) rotateY(38.8888888889deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(42.7777777778deg);
+          transform: translateY(-50%) rotateY(42.7777777778deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(46.6666666667deg);
+          transform: translateY(-50%) rotateY(46.6666666667deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(50.5555555556deg);
+          transform: translateY(-50%) rotateY(50.5555555556deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(54.4444444444deg);
+          transform: translateY(-50%) rotateY(54.4444444444deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(58.3333333333deg);
+          transform: translateY(-50%) rotateY(58.3333333333deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(62.2222222222deg);
+          transform: translateY(-50%) rotateY(62.2222222222deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(66.1111111111deg);
+          transform: translateY(-50%) rotateY(66.1111111111deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(70deg);
+          transform: translateY(-50%) rotateY(70deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(73.8888888889deg);
+          transform: translateY(-50%) rotateY(73.8888888889deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(77.7777777778deg);
+          transform: translateY(-50%) rotateY(77.7777777778deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(81.6666666667deg);
+          transform: translateY(-50%) rotateY(81.6666666667deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(85.5555555556deg);
+          transform: translateY(-50%) rotateY(85.5555555556deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(89.4444444444deg);
+          transform: translateY(-50%) rotateY(89.4444444444deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(93.3333333333deg);
+          transform: translateY(-50%) rotateY(93.3333333333deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(97.2222222222deg);
+          transform: translateY(-50%) rotateY(97.2222222222deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(101.1111111111deg);
+          transform: translateY(-50%) rotateY(101.1111111111deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(105deg);
+          transform: translateY(-50%) rotateY(105deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(108.8888888889deg);
+          transform: translateY(-50%) rotateY(108.8888888889deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(112.7777777778deg);
+          transform: translateY(-50%) rotateY(112.7777777778deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(116.6666666667deg);
+          transform: translateY(-50%) rotateY(116.6666666667deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(120.5555555556deg);
+          transform: translateY(-50%) rotateY(120.5555555556deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(124.4444444444deg);
+          transform: translateY(-50%) rotateY(124.4444444444deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(128.3333333333deg);
+          transform: translateY(-50%) rotateY(128.3333333333deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(132.2222222222deg);
+          transform: translateY(-50%) rotateY(132.2222222222deg);
+}
+.interface:nth-child(14):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(136.1111111111deg);
+          transform: translateY(-50%) rotateY(136.1111111111deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(4.1666666667deg);
+          transform: translateY(-50%) rotateY(4.1666666667deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(8.3333333333deg);
+          transform: translateY(-50%) rotateY(8.3333333333deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(12.5deg);
+          transform: translateY(-50%) rotateY(12.5deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(16.6666666667deg);
+          transform: translateY(-50%) rotateY(16.6666666667deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(20.8333333333deg);
+          transform: translateY(-50%) rotateY(20.8333333333deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(25deg);
+          transform: translateY(-50%) rotateY(25deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(29.1666666667deg);
+          transform: translateY(-50%) rotateY(29.1666666667deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(33.3333333333deg);
+          transform: translateY(-50%) rotateY(33.3333333333deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(37.5deg);
+          transform: translateY(-50%) rotateY(37.5deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(41.6666666667deg);
+          transform: translateY(-50%) rotateY(41.6666666667deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(45.8333333333deg);
+          transform: translateY(-50%) rotateY(45.8333333333deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(50deg);
+          transform: translateY(-50%) rotateY(50deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(54.1666666667deg);
+          transform: translateY(-50%) rotateY(54.1666666667deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(58.3333333333deg);
+          transform: translateY(-50%) rotateY(58.3333333333deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(62.5deg);
+          transform: translateY(-50%) rotateY(62.5deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(66.6666666667deg);
+          transform: translateY(-50%) rotateY(66.6666666667deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(70.8333333333deg);
+          transform: translateY(-50%) rotateY(70.8333333333deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(75deg);
+          transform: translateY(-50%) rotateY(75deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(79.1666666667deg);
+          transform: translateY(-50%) rotateY(79.1666666667deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(83.3333333333deg);
+          transform: translateY(-50%) rotateY(83.3333333333deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(87.5deg);
+          transform: translateY(-50%) rotateY(87.5deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(91.6666666667deg);
+          transform: translateY(-50%) rotateY(91.6666666667deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(95.8333333333deg);
+          transform: translateY(-50%) rotateY(95.8333333333deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(100deg);
+          transform: translateY(-50%) rotateY(100deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(104.1666666667deg);
+          transform: translateY(-50%) rotateY(104.1666666667deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(108.3333333333deg);
+          transform: translateY(-50%) rotateY(108.3333333333deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(112.5deg);
+          transform: translateY(-50%) rotateY(112.5deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(116.6666666667deg);
+          transform: translateY(-50%) rotateY(116.6666666667deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(120.8333333333deg);
+          transform: translateY(-50%) rotateY(120.8333333333deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(125deg);
+          transform: translateY(-50%) rotateY(125deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(129.1666666667deg);
+          transform: translateY(-50%) rotateY(129.1666666667deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(133.3333333333deg);
+          transform: translateY(-50%) rotateY(133.3333333333deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(137.5deg);
+          transform: translateY(-50%) rotateY(137.5deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(141.6666666667deg);
+          transform: translateY(-50%) rotateY(141.6666666667deg);
+}
+.interface:nth-child(15):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(145.8333333333deg);
+          transform: translateY(-50%) rotateY(145.8333333333deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(4.4444444444deg);
+          transform: translateY(-50%) rotateY(4.4444444444deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(8.8888888889deg);
+          transform: translateY(-50%) rotateY(8.8888888889deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(13.3333333333deg);
+          transform: translateY(-50%) rotateY(13.3333333333deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(17.7777777778deg);
+          transform: translateY(-50%) rotateY(17.7777777778deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(22.2222222222deg);
+          transform: translateY(-50%) rotateY(22.2222222222deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(26.6666666667deg);
+          transform: translateY(-50%) rotateY(26.6666666667deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(31.1111111111deg);
+          transform: translateY(-50%) rotateY(31.1111111111deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(35.5555555556deg);
+          transform: translateY(-50%) rotateY(35.5555555556deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(40deg);
+          transform: translateY(-50%) rotateY(40deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(44.4444444444deg);
+          transform: translateY(-50%) rotateY(44.4444444444deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(48.8888888889deg);
+          transform: translateY(-50%) rotateY(48.8888888889deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(53.3333333333deg);
+          transform: translateY(-50%) rotateY(53.3333333333deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(57.7777777778deg);
+          transform: translateY(-50%) rotateY(57.7777777778deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(62.2222222222deg);
+          transform: translateY(-50%) rotateY(62.2222222222deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(66.6666666667deg);
+          transform: translateY(-50%) rotateY(66.6666666667deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(71.1111111111deg);
+          transform: translateY(-50%) rotateY(71.1111111111deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(75.5555555556deg);
+          transform: translateY(-50%) rotateY(75.5555555556deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(80deg);
+          transform: translateY(-50%) rotateY(80deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(84.4444444444deg);
+          transform: translateY(-50%) rotateY(84.4444444444deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(88.8888888889deg);
+          transform: translateY(-50%) rotateY(88.8888888889deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(93.3333333333deg);
+          transform: translateY(-50%) rotateY(93.3333333333deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(97.7777777778deg);
+          transform: translateY(-50%) rotateY(97.7777777778deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(102.2222222222deg);
+          transform: translateY(-50%) rotateY(102.2222222222deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(106.6666666667deg);
+          transform: translateY(-50%) rotateY(106.6666666667deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(111.1111111111deg);
+          transform: translateY(-50%) rotateY(111.1111111111deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(115.5555555556deg);
+          transform: translateY(-50%) rotateY(115.5555555556deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(120deg);
+          transform: translateY(-50%) rotateY(120deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(124.4444444444deg);
+          transform: translateY(-50%) rotateY(124.4444444444deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(128.8888888889deg);
+          transform: translateY(-50%) rotateY(128.8888888889deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(133.3333333333deg);
+          transform: translateY(-50%) rotateY(133.3333333333deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(137.7777777778deg);
+          transform: translateY(-50%) rotateY(137.7777777778deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(142.2222222222deg);
+          transform: translateY(-50%) rotateY(142.2222222222deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(146.6666666667deg);
+          transform: translateY(-50%) rotateY(146.6666666667deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(151.1111111111deg);
+          transform: translateY(-50%) rotateY(151.1111111111deg);
+}
+.interface:nth-child(16):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(155.5555555556deg);
+          transform: translateY(-50%) rotateY(155.5555555556deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(4.7222222222deg);
+          transform: translateY(-50%) rotateY(4.7222222222deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(9.4444444444deg);
+          transform: translateY(-50%) rotateY(9.4444444444deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(14.1666666667deg);
+          transform: translateY(-50%) rotateY(14.1666666667deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(18.8888888889deg);
+          transform: translateY(-50%) rotateY(18.8888888889deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(23.6111111111deg);
+          transform: translateY(-50%) rotateY(23.6111111111deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(28.3333333333deg);
+          transform: translateY(-50%) rotateY(28.3333333333deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(33.0555555556deg);
+          transform: translateY(-50%) rotateY(33.0555555556deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(37.7777777778deg);
+          transform: translateY(-50%) rotateY(37.7777777778deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(42.5deg);
+          transform: translateY(-50%) rotateY(42.5deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(47.2222222222deg);
+          transform: translateY(-50%) rotateY(47.2222222222deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(51.9444444444deg);
+          transform: translateY(-50%) rotateY(51.9444444444deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(56.6666666667deg);
+          transform: translateY(-50%) rotateY(56.6666666667deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(61.3888888889deg);
+          transform: translateY(-50%) rotateY(61.3888888889deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(66.1111111111deg);
+          transform: translateY(-50%) rotateY(66.1111111111deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(70.8333333333deg);
+          transform: translateY(-50%) rotateY(70.8333333333deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(75.5555555556deg);
+          transform: translateY(-50%) rotateY(75.5555555556deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(80.2777777778deg);
+          transform: translateY(-50%) rotateY(80.2777777778deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(85deg);
+          transform: translateY(-50%) rotateY(85deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(89.7222222222deg);
+          transform: translateY(-50%) rotateY(89.7222222222deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(94.4444444444deg);
+          transform: translateY(-50%) rotateY(94.4444444444deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(99.1666666667deg);
+          transform: translateY(-50%) rotateY(99.1666666667deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(103.8888888889deg);
+          transform: translateY(-50%) rotateY(103.8888888889deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(108.6111111111deg);
+          transform: translateY(-50%) rotateY(108.6111111111deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(113.3333333333deg);
+          transform: translateY(-50%) rotateY(113.3333333333deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(118.0555555556deg);
+          transform: translateY(-50%) rotateY(118.0555555556deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(122.7777777778deg);
+          transform: translateY(-50%) rotateY(122.7777777778deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(127.5deg);
+          transform: translateY(-50%) rotateY(127.5deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(132.2222222222deg);
+          transform: translateY(-50%) rotateY(132.2222222222deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(136.9444444444deg);
+          transform: translateY(-50%) rotateY(136.9444444444deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(141.6666666667deg);
+          transform: translateY(-50%) rotateY(141.6666666667deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(146.3888888889deg);
+          transform: translateY(-50%) rotateY(146.3888888889deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(151.1111111111deg);
+          transform: translateY(-50%) rotateY(151.1111111111deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(155.8333333333deg);
+          transform: translateY(-50%) rotateY(155.8333333333deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(160.5555555556deg);
+          transform: translateY(-50%) rotateY(160.5555555556deg);
+}
+.interface:nth-child(17):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(165.2777777778deg);
+          transform: translateY(-50%) rotateY(165.2777777778deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(5deg);
+          transform: translateY(-50%) rotateY(5deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(10deg);
+          transform: translateY(-50%) rotateY(10deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(15deg);
+          transform: translateY(-50%) rotateY(15deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(20deg);
+          transform: translateY(-50%) rotateY(20deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(25deg);
+          transform: translateY(-50%) rotateY(25deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(30deg);
+          transform: translateY(-50%) rotateY(30deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(35deg);
+          transform: translateY(-50%) rotateY(35deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(40deg);
+          transform: translateY(-50%) rotateY(40deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(45deg);
+          transform: translateY(-50%) rotateY(45deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(50deg);
+          transform: translateY(-50%) rotateY(50deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(55deg);
+          transform: translateY(-50%) rotateY(55deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(60deg);
+          transform: translateY(-50%) rotateY(60deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(65deg);
+          transform: translateY(-50%) rotateY(65deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(70deg);
+          transform: translateY(-50%) rotateY(70deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(75deg);
+          transform: translateY(-50%) rotateY(75deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(80deg);
+          transform: translateY(-50%) rotateY(80deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(85deg);
+          transform: translateY(-50%) rotateY(85deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(90deg);
+          transform: translateY(-50%) rotateY(90deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(95deg);
+          transform: translateY(-50%) rotateY(95deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(100deg);
+          transform: translateY(-50%) rotateY(100deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(105deg);
+          transform: translateY(-50%) rotateY(105deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(110deg);
+          transform: translateY(-50%) rotateY(110deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(115deg);
+          transform: translateY(-50%) rotateY(115deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(120deg);
+          transform: translateY(-50%) rotateY(120deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(125deg);
+          transform: translateY(-50%) rotateY(125deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(130deg);
+          transform: translateY(-50%) rotateY(130deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(135deg);
+          transform: translateY(-50%) rotateY(135deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(140deg);
+          transform: translateY(-50%) rotateY(140deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(145deg);
+          transform: translateY(-50%) rotateY(145deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(150deg);
+          transform: translateY(-50%) rotateY(150deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(155deg);
+          transform: translateY(-50%) rotateY(155deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(160deg);
+          transform: translateY(-50%) rotateY(160deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(165deg);
+          transform: translateY(-50%) rotateY(165deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(170deg);
+          transform: translateY(-50%) rotateY(170deg);
+}
+.interface:nth-child(18):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(175deg);
+          transform: translateY(-50%) rotateY(175deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(5.2777777778deg);
+          transform: translateY(-50%) rotateY(5.2777777778deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(10.5555555556deg);
+          transform: translateY(-50%) rotateY(10.5555555556deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(15.8333333333deg);
+          transform: translateY(-50%) rotateY(15.8333333333deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(21.1111111111deg);
+          transform: translateY(-50%) rotateY(21.1111111111deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(26.3888888889deg);
+          transform: translateY(-50%) rotateY(26.3888888889deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(31.6666666667deg);
+          transform: translateY(-50%) rotateY(31.6666666667deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(36.9444444444deg);
+          transform: translateY(-50%) rotateY(36.9444444444deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(42.2222222222deg);
+          transform: translateY(-50%) rotateY(42.2222222222deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(47.5deg);
+          transform: translateY(-50%) rotateY(47.5deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(52.7777777778deg);
+          transform: translateY(-50%) rotateY(52.7777777778deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(58.0555555556deg);
+          transform: translateY(-50%) rotateY(58.0555555556deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(63.3333333333deg);
+          transform: translateY(-50%) rotateY(63.3333333333deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(68.6111111111deg);
+          transform: translateY(-50%) rotateY(68.6111111111deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(73.8888888889deg);
+          transform: translateY(-50%) rotateY(73.8888888889deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(79.1666666667deg);
+          transform: translateY(-50%) rotateY(79.1666666667deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(84.4444444444deg);
+          transform: translateY(-50%) rotateY(84.4444444444deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(89.7222222222deg);
+          transform: translateY(-50%) rotateY(89.7222222222deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(95deg);
+          transform: translateY(-50%) rotateY(95deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(100.2777777778deg);
+          transform: translateY(-50%) rotateY(100.2777777778deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(105.5555555556deg);
+          transform: translateY(-50%) rotateY(105.5555555556deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(110.8333333333deg);
+          transform: translateY(-50%) rotateY(110.8333333333deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(116.1111111111deg);
+          transform: translateY(-50%) rotateY(116.1111111111deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(121.3888888889deg);
+          transform: translateY(-50%) rotateY(121.3888888889deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(126.6666666667deg);
+          transform: translateY(-50%) rotateY(126.6666666667deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(131.9444444444deg);
+          transform: translateY(-50%) rotateY(131.9444444444deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(137.2222222222deg);
+          transform: translateY(-50%) rotateY(137.2222222222deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(142.5deg);
+          transform: translateY(-50%) rotateY(142.5deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(147.7777777778deg);
+          transform: translateY(-50%) rotateY(147.7777777778deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(153.0555555556deg);
+          transform: translateY(-50%) rotateY(153.0555555556deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(158.3333333333deg);
+          transform: translateY(-50%) rotateY(158.3333333333deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(163.6111111111deg);
+          transform: translateY(-50%) rotateY(163.6111111111deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(168.8888888889deg);
+          transform: translateY(-50%) rotateY(168.8888888889deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(174.1666666667deg);
+          transform: translateY(-50%) rotateY(174.1666666667deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(179.4444444444deg);
+          transform: translateY(-50%) rotateY(179.4444444444deg);
+}
+.interface:nth-child(19):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(184.7222222222deg);
+          transform: translateY(-50%) rotateY(184.7222222222deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(5.5555555556deg);
+          transform: translateY(-50%) rotateY(5.5555555556deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(11.1111111111deg);
+          transform: translateY(-50%) rotateY(11.1111111111deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(16.6666666667deg);
+          transform: translateY(-50%) rotateY(16.6666666667deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(22.2222222222deg);
+          transform: translateY(-50%) rotateY(22.2222222222deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(27.7777777778deg);
+          transform: translateY(-50%) rotateY(27.7777777778deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(33.3333333333deg);
+          transform: translateY(-50%) rotateY(33.3333333333deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(38.8888888889deg);
+          transform: translateY(-50%) rotateY(38.8888888889deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(44.4444444444deg);
+          transform: translateY(-50%) rotateY(44.4444444444deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(50deg);
+          transform: translateY(-50%) rotateY(50deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(55.5555555556deg);
+          transform: translateY(-50%) rotateY(55.5555555556deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(61.1111111111deg);
+          transform: translateY(-50%) rotateY(61.1111111111deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(66.6666666667deg);
+          transform: translateY(-50%) rotateY(66.6666666667deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(72.2222222222deg);
+          transform: translateY(-50%) rotateY(72.2222222222deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(77.7777777778deg);
+          transform: translateY(-50%) rotateY(77.7777777778deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(83.3333333333deg);
+          transform: translateY(-50%) rotateY(83.3333333333deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(88.8888888889deg);
+          transform: translateY(-50%) rotateY(88.8888888889deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(94.4444444444deg);
+          transform: translateY(-50%) rotateY(94.4444444444deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(100deg);
+          transform: translateY(-50%) rotateY(100deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(105.5555555556deg);
+          transform: translateY(-50%) rotateY(105.5555555556deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(111.1111111111deg);
+          transform: translateY(-50%) rotateY(111.1111111111deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(116.6666666667deg);
+          transform: translateY(-50%) rotateY(116.6666666667deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(122.2222222222deg);
+          transform: translateY(-50%) rotateY(122.2222222222deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(127.7777777778deg);
+          transform: translateY(-50%) rotateY(127.7777777778deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(133.3333333333deg);
+          transform: translateY(-50%) rotateY(133.3333333333deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(138.8888888889deg);
+          transform: translateY(-50%) rotateY(138.8888888889deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(144.4444444444deg);
+          transform: translateY(-50%) rotateY(144.4444444444deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(150deg);
+          transform: translateY(-50%) rotateY(150deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(155.5555555556deg);
+          transform: translateY(-50%) rotateY(155.5555555556deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(161.1111111111deg);
+          transform: translateY(-50%) rotateY(161.1111111111deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(166.6666666667deg);
+          transform: translateY(-50%) rotateY(166.6666666667deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(172.2222222222deg);
+          transform: translateY(-50%) rotateY(172.2222222222deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(177.7777777778deg);
+          transform: translateY(-50%) rotateY(177.7777777778deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(183.3333333333deg);
+          transform: translateY(-50%) rotateY(183.3333333333deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(188.8888888889deg);
+          transform: translateY(-50%) rotateY(188.8888888889deg);
+}
+.interface:nth-child(20):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(194.4444444444deg);
+          transform: translateY(-50%) rotateY(194.4444444444deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(5.8333333333deg);
+          transform: translateY(-50%) rotateY(5.8333333333deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(11.6666666667deg);
+          transform: translateY(-50%) rotateY(11.6666666667deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(17.5deg);
+          transform: translateY(-50%) rotateY(17.5deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(23.3333333333deg);
+          transform: translateY(-50%) rotateY(23.3333333333deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(29.1666666667deg);
+          transform: translateY(-50%) rotateY(29.1666666667deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(35deg);
+          transform: translateY(-50%) rotateY(35deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(40.8333333333deg);
+          transform: translateY(-50%) rotateY(40.8333333333deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(46.6666666667deg);
+          transform: translateY(-50%) rotateY(46.6666666667deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(52.5deg);
+          transform: translateY(-50%) rotateY(52.5deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(58.3333333333deg);
+          transform: translateY(-50%) rotateY(58.3333333333deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(64.1666666667deg);
+          transform: translateY(-50%) rotateY(64.1666666667deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(70deg);
+          transform: translateY(-50%) rotateY(70deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(75.8333333333deg);
+          transform: translateY(-50%) rotateY(75.8333333333deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(81.6666666667deg);
+          transform: translateY(-50%) rotateY(81.6666666667deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(87.5deg);
+          transform: translateY(-50%) rotateY(87.5deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(93.3333333333deg);
+          transform: translateY(-50%) rotateY(93.3333333333deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(99.1666666667deg);
+          transform: translateY(-50%) rotateY(99.1666666667deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(105deg);
+          transform: translateY(-50%) rotateY(105deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(110.8333333333deg);
+          transform: translateY(-50%) rotateY(110.8333333333deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(116.6666666667deg);
+          transform: translateY(-50%) rotateY(116.6666666667deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(122.5deg);
+          transform: translateY(-50%) rotateY(122.5deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(128.3333333333deg);
+          transform: translateY(-50%) rotateY(128.3333333333deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(134.1666666667deg);
+          transform: translateY(-50%) rotateY(134.1666666667deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(140deg);
+          transform: translateY(-50%) rotateY(140deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(145.8333333333deg);
+          transform: translateY(-50%) rotateY(145.8333333333deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(151.6666666667deg);
+          transform: translateY(-50%) rotateY(151.6666666667deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(157.5deg);
+          transform: translateY(-50%) rotateY(157.5deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(163.3333333333deg);
+          transform: translateY(-50%) rotateY(163.3333333333deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(169.1666666667deg);
+          transform: translateY(-50%) rotateY(169.1666666667deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(175deg);
+          transform: translateY(-50%) rotateY(175deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(180.8333333333deg);
+          transform: translateY(-50%) rotateY(180.8333333333deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(186.6666666667deg);
+          transform: translateY(-50%) rotateY(186.6666666667deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(192.5deg);
+          transform: translateY(-50%) rotateY(192.5deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(198.3333333333deg);
+          transform: translateY(-50%) rotateY(198.3333333333deg);
+}
+.interface:nth-child(21):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(204.1666666667deg);
+          transform: translateY(-50%) rotateY(204.1666666667deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(6.1111111111deg);
+          transform: translateY(-50%) rotateY(6.1111111111deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(12.2222222222deg);
+          transform: translateY(-50%) rotateY(12.2222222222deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(18.3333333333deg);
+          transform: translateY(-50%) rotateY(18.3333333333deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(24.4444444444deg);
+          transform: translateY(-50%) rotateY(24.4444444444deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(30.5555555556deg);
+          transform: translateY(-50%) rotateY(30.5555555556deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(36.6666666667deg);
+          transform: translateY(-50%) rotateY(36.6666666667deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(42.7777777778deg);
+          transform: translateY(-50%) rotateY(42.7777777778deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(48.8888888889deg);
+          transform: translateY(-50%) rotateY(48.8888888889deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(55deg);
+          transform: translateY(-50%) rotateY(55deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(61.1111111111deg);
+          transform: translateY(-50%) rotateY(61.1111111111deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(67.2222222222deg);
+          transform: translateY(-50%) rotateY(67.2222222222deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(73.3333333333deg);
+          transform: translateY(-50%) rotateY(73.3333333333deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(79.4444444444deg);
+          transform: translateY(-50%) rotateY(79.4444444444deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(85.5555555556deg);
+          transform: translateY(-50%) rotateY(85.5555555556deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(91.6666666667deg);
+          transform: translateY(-50%) rotateY(91.6666666667deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(97.7777777778deg);
+          transform: translateY(-50%) rotateY(97.7777777778deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(103.8888888889deg);
+          transform: translateY(-50%) rotateY(103.8888888889deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(110deg);
+          transform: translateY(-50%) rotateY(110deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(116.1111111111deg);
+          transform: translateY(-50%) rotateY(116.1111111111deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(122.2222222222deg);
+          transform: translateY(-50%) rotateY(122.2222222222deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(128.3333333333deg);
+          transform: translateY(-50%) rotateY(128.3333333333deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(134.4444444444deg);
+          transform: translateY(-50%) rotateY(134.4444444444deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(140.5555555556deg);
+          transform: translateY(-50%) rotateY(140.5555555556deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(146.6666666667deg);
+          transform: translateY(-50%) rotateY(146.6666666667deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(152.7777777778deg);
+          transform: translateY(-50%) rotateY(152.7777777778deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(158.8888888889deg);
+          transform: translateY(-50%) rotateY(158.8888888889deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(165deg);
+          transform: translateY(-50%) rotateY(165deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(171.1111111111deg);
+          transform: translateY(-50%) rotateY(171.1111111111deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(177.2222222222deg);
+          transform: translateY(-50%) rotateY(177.2222222222deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(183.3333333333deg);
+          transform: translateY(-50%) rotateY(183.3333333333deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(189.4444444444deg);
+          transform: translateY(-50%) rotateY(189.4444444444deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(195.5555555556deg);
+          transform: translateY(-50%) rotateY(195.5555555556deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(201.6666666667deg);
+          transform: translateY(-50%) rotateY(201.6666666667deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(207.7777777778deg);
+          transform: translateY(-50%) rotateY(207.7777777778deg);
+}
+.interface:nth-child(22):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(213.8888888889deg);
+          transform: translateY(-50%) rotateY(213.8888888889deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(6.3888888889deg);
+          transform: translateY(-50%) rotateY(6.3888888889deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(12.7777777778deg);
+          transform: translateY(-50%) rotateY(12.7777777778deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(19.1666666667deg);
+          transform: translateY(-50%) rotateY(19.1666666667deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(25.5555555556deg);
+          transform: translateY(-50%) rotateY(25.5555555556deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(31.9444444444deg);
+          transform: translateY(-50%) rotateY(31.9444444444deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(38.3333333333deg);
+          transform: translateY(-50%) rotateY(38.3333333333deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(44.7222222222deg);
+          transform: translateY(-50%) rotateY(44.7222222222deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(51.1111111111deg);
+          transform: translateY(-50%) rotateY(51.1111111111deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(57.5deg);
+          transform: translateY(-50%) rotateY(57.5deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(63.8888888889deg);
+          transform: translateY(-50%) rotateY(63.8888888889deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(70.2777777778deg);
+          transform: translateY(-50%) rotateY(70.2777777778deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(76.6666666667deg);
+          transform: translateY(-50%) rotateY(76.6666666667deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(83.0555555556deg);
+          transform: translateY(-50%) rotateY(83.0555555556deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(89.4444444444deg);
+          transform: translateY(-50%) rotateY(89.4444444444deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(95.8333333333deg);
+          transform: translateY(-50%) rotateY(95.8333333333deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(102.2222222222deg);
+          transform: translateY(-50%) rotateY(102.2222222222deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(108.6111111111deg);
+          transform: translateY(-50%) rotateY(108.6111111111deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(115deg);
+          transform: translateY(-50%) rotateY(115deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(121.3888888889deg);
+          transform: translateY(-50%) rotateY(121.3888888889deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(127.7777777778deg);
+          transform: translateY(-50%) rotateY(127.7777777778deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(134.1666666667deg);
+          transform: translateY(-50%) rotateY(134.1666666667deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(140.5555555556deg);
+          transform: translateY(-50%) rotateY(140.5555555556deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(146.9444444444deg);
+          transform: translateY(-50%) rotateY(146.9444444444deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(153.3333333333deg);
+          transform: translateY(-50%) rotateY(153.3333333333deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(159.7222222222deg);
+          transform: translateY(-50%) rotateY(159.7222222222deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(166.1111111111deg);
+          transform: translateY(-50%) rotateY(166.1111111111deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(172.5deg);
+          transform: translateY(-50%) rotateY(172.5deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(178.8888888889deg);
+          transform: translateY(-50%) rotateY(178.8888888889deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(185.2777777778deg);
+          transform: translateY(-50%) rotateY(185.2777777778deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(191.6666666667deg);
+          transform: translateY(-50%) rotateY(191.6666666667deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(198.0555555556deg);
+          transform: translateY(-50%) rotateY(198.0555555556deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(204.4444444444deg);
+          transform: translateY(-50%) rotateY(204.4444444444deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(210.8333333333deg);
+          transform: translateY(-50%) rotateY(210.8333333333deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(217.2222222222deg);
+          transform: translateY(-50%) rotateY(217.2222222222deg);
+}
+.interface:nth-child(23):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(223.6111111111deg);
+          transform: translateY(-50%) rotateY(223.6111111111deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(6.6666666667deg);
+          transform: translateY(-50%) rotateY(6.6666666667deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(13.3333333333deg);
+          transform: translateY(-50%) rotateY(13.3333333333deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(20deg);
+          transform: translateY(-50%) rotateY(20deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(26.6666666667deg);
+          transform: translateY(-50%) rotateY(26.6666666667deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(33.3333333333deg);
+          transform: translateY(-50%) rotateY(33.3333333333deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(40deg);
+          transform: translateY(-50%) rotateY(40deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(46.6666666667deg);
+          transform: translateY(-50%) rotateY(46.6666666667deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(53.3333333333deg);
+          transform: translateY(-50%) rotateY(53.3333333333deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(60deg);
+          transform: translateY(-50%) rotateY(60deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(66.6666666667deg);
+          transform: translateY(-50%) rotateY(66.6666666667deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(73.3333333333deg);
+          transform: translateY(-50%) rotateY(73.3333333333deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(80deg);
+          transform: translateY(-50%) rotateY(80deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(86.6666666667deg);
+          transform: translateY(-50%) rotateY(86.6666666667deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(93.3333333333deg);
+          transform: translateY(-50%) rotateY(93.3333333333deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(100deg);
+          transform: translateY(-50%) rotateY(100deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(106.6666666667deg);
+          transform: translateY(-50%) rotateY(106.6666666667deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(113.3333333333deg);
+          transform: translateY(-50%) rotateY(113.3333333333deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(120deg);
+          transform: translateY(-50%) rotateY(120deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(126.6666666667deg);
+          transform: translateY(-50%) rotateY(126.6666666667deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(133.3333333333deg);
+          transform: translateY(-50%) rotateY(133.3333333333deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(140deg);
+          transform: translateY(-50%) rotateY(140deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(146.6666666667deg);
+          transform: translateY(-50%) rotateY(146.6666666667deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(153.3333333333deg);
+          transform: translateY(-50%) rotateY(153.3333333333deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(160deg);
+          transform: translateY(-50%) rotateY(160deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(166.6666666667deg);
+          transform: translateY(-50%) rotateY(166.6666666667deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(173.3333333333deg);
+          transform: translateY(-50%) rotateY(173.3333333333deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(180deg);
+          transform: translateY(-50%) rotateY(180deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(186.6666666667deg);
+          transform: translateY(-50%) rotateY(186.6666666667deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(193.3333333333deg);
+          transform: translateY(-50%) rotateY(193.3333333333deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(200deg);
+          transform: translateY(-50%) rotateY(200deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(206.6666666667deg);
+          transform: translateY(-50%) rotateY(206.6666666667deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(213.3333333333deg);
+          transform: translateY(-50%) rotateY(213.3333333333deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(220deg);
+          transform: translateY(-50%) rotateY(220deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(226.6666666667deg);
+          transform: translateY(-50%) rotateY(226.6666666667deg);
+}
+.interface:nth-child(24):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(233.3333333333deg);
+          transform: translateY(-50%) rotateY(233.3333333333deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(6.9444444444deg);
+          transform: translateY(-50%) rotateY(6.9444444444deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(13.8888888889deg);
+          transform: translateY(-50%) rotateY(13.8888888889deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(20.8333333333deg);
+          transform: translateY(-50%) rotateY(20.8333333333deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(27.7777777778deg);
+          transform: translateY(-50%) rotateY(27.7777777778deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(34.7222222222deg);
+          transform: translateY(-50%) rotateY(34.7222222222deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(41.6666666667deg);
+          transform: translateY(-50%) rotateY(41.6666666667deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(48.6111111111deg);
+          transform: translateY(-50%) rotateY(48.6111111111deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(55.5555555556deg);
+          transform: translateY(-50%) rotateY(55.5555555556deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(62.5deg);
+          transform: translateY(-50%) rotateY(62.5deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(69.4444444444deg);
+          transform: translateY(-50%) rotateY(69.4444444444deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(76.3888888889deg);
+          transform: translateY(-50%) rotateY(76.3888888889deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(83.3333333333deg);
+          transform: translateY(-50%) rotateY(83.3333333333deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(90.2777777778deg);
+          transform: translateY(-50%) rotateY(90.2777777778deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(97.2222222222deg);
+          transform: translateY(-50%) rotateY(97.2222222222deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(104.1666666667deg);
+          transform: translateY(-50%) rotateY(104.1666666667deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(111.1111111111deg);
+          transform: translateY(-50%) rotateY(111.1111111111deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(118.0555555556deg);
+          transform: translateY(-50%) rotateY(118.0555555556deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(125deg);
+          transform: translateY(-50%) rotateY(125deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(131.9444444444deg);
+          transform: translateY(-50%) rotateY(131.9444444444deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(138.8888888889deg);
+          transform: translateY(-50%) rotateY(138.8888888889deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(145.8333333333deg);
+          transform: translateY(-50%) rotateY(145.8333333333deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(152.7777777778deg);
+          transform: translateY(-50%) rotateY(152.7777777778deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(159.7222222222deg);
+          transform: translateY(-50%) rotateY(159.7222222222deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(166.6666666667deg);
+          transform: translateY(-50%) rotateY(166.6666666667deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(173.6111111111deg);
+          transform: translateY(-50%) rotateY(173.6111111111deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(180.5555555556deg);
+          transform: translateY(-50%) rotateY(180.5555555556deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(187.5deg);
+          transform: translateY(-50%) rotateY(187.5deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(194.4444444444deg);
+          transform: translateY(-50%) rotateY(194.4444444444deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(201.3888888889deg);
+          transform: translateY(-50%) rotateY(201.3888888889deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(208.3333333333deg);
+          transform: translateY(-50%) rotateY(208.3333333333deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(215.2777777778deg);
+          transform: translateY(-50%) rotateY(215.2777777778deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(222.2222222222deg);
+          transform: translateY(-50%) rotateY(222.2222222222deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(229.1666666667deg);
+          transform: translateY(-50%) rotateY(229.1666666667deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(236.1111111111deg);
+          transform: translateY(-50%) rotateY(236.1111111111deg);
+}
+.interface:nth-child(25):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(243.0555555556deg);
+          transform: translateY(-50%) rotateY(243.0555555556deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(7.2222222222deg);
+          transform: translateY(-50%) rotateY(7.2222222222deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(14.4444444444deg);
+          transform: translateY(-50%) rotateY(14.4444444444deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(21.6666666667deg);
+          transform: translateY(-50%) rotateY(21.6666666667deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(28.8888888889deg);
+          transform: translateY(-50%) rotateY(28.8888888889deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(36.1111111111deg);
+          transform: translateY(-50%) rotateY(36.1111111111deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(43.3333333333deg);
+          transform: translateY(-50%) rotateY(43.3333333333deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(50.5555555556deg);
+          transform: translateY(-50%) rotateY(50.5555555556deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(57.7777777778deg);
+          transform: translateY(-50%) rotateY(57.7777777778deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(65deg);
+          transform: translateY(-50%) rotateY(65deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(72.2222222222deg);
+          transform: translateY(-50%) rotateY(72.2222222222deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(79.4444444444deg);
+          transform: translateY(-50%) rotateY(79.4444444444deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(86.6666666667deg);
+          transform: translateY(-50%) rotateY(86.6666666667deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(93.8888888889deg);
+          transform: translateY(-50%) rotateY(93.8888888889deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(101.1111111111deg);
+          transform: translateY(-50%) rotateY(101.1111111111deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(108.3333333333deg);
+          transform: translateY(-50%) rotateY(108.3333333333deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(115.5555555556deg);
+          transform: translateY(-50%) rotateY(115.5555555556deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(122.7777777778deg);
+          transform: translateY(-50%) rotateY(122.7777777778deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(130deg);
+          transform: translateY(-50%) rotateY(130deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(137.2222222222deg);
+          transform: translateY(-50%) rotateY(137.2222222222deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(144.4444444444deg);
+          transform: translateY(-50%) rotateY(144.4444444444deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(151.6666666667deg);
+          transform: translateY(-50%) rotateY(151.6666666667deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(158.8888888889deg);
+          transform: translateY(-50%) rotateY(158.8888888889deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(166.1111111111deg);
+          transform: translateY(-50%) rotateY(166.1111111111deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(173.3333333333deg);
+          transform: translateY(-50%) rotateY(173.3333333333deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(180.5555555556deg);
+          transform: translateY(-50%) rotateY(180.5555555556deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(187.7777777778deg);
+          transform: translateY(-50%) rotateY(187.7777777778deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(195deg);
+          transform: translateY(-50%) rotateY(195deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(202.2222222222deg);
+          transform: translateY(-50%) rotateY(202.2222222222deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(209.4444444444deg);
+          transform: translateY(-50%) rotateY(209.4444444444deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(216.6666666667deg);
+          transform: translateY(-50%) rotateY(216.6666666667deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(223.8888888889deg);
+          transform: translateY(-50%) rotateY(223.8888888889deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(231.1111111111deg);
+          transform: translateY(-50%) rotateY(231.1111111111deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(238.3333333333deg);
+          transform: translateY(-50%) rotateY(238.3333333333deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(245.5555555556deg);
+          transform: translateY(-50%) rotateY(245.5555555556deg);
+}
+.interface:nth-child(26):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(252.7777777778deg);
+          transform: translateY(-50%) rotateY(252.7777777778deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(7.5deg);
+          transform: translateY(-50%) rotateY(7.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(15deg);
+          transform: translateY(-50%) rotateY(15deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(22.5deg);
+          transform: translateY(-50%) rotateY(22.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(30deg);
+          transform: translateY(-50%) rotateY(30deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(37.5deg);
+          transform: translateY(-50%) rotateY(37.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(45deg);
+          transform: translateY(-50%) rotateY(45deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(52.5deg);
+          transform: translateY(-50%) rotateY(52.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(60deg);
+          transform: translateY(-50%) rotateY(60deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(67.5deg);
+          transform: translateY(-50%) rotateY(67.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(75deg);
+          transform: translateY(-50%) rotateY(75deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(82.5deg);
+          transform: translateY(-50%) rotateY(82.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(90deg);
+          transform: translateY(-50%) rotateY(90deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(97.5deg);
+          transform: translateY(-50%) rotateY(97.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(105deg);
+          transform: translateY(-50%) rotateY(105deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(112.5deg);
+          transform: translateY(-50%) rotateY(112.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(120deg);
+          transform: translateY(-50%) rotateY(120deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(127.5deg);
+          transform: translateY(-50%) rotateY(127.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(135deg);
+          transform: translateY(-50%) rotateY(135deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(142.5deg);
+          transform: translateY(-50%) rotateY(142.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(150deg);
+          transform: translateY(-50%) rotateY(150deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(157.5deg);
+          transform: translateY(-50%) rotateY(157.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(165deg);
+          transform: translateY(-50%) rotateY(165deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(172.5deg);
+          transform: translateY(-50%) rotateY(172.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(180deg);
+          transform: translateY(-50%) rotateY(180deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(187.5deg);
+          transform: translateY(-50%) rotateY(187.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(195deg);
+          transform: translateY(-50%) rotateY(195deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(202.5deg);
+          transform: translateY(-50%) rotateY(202.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(210deg);
+          transform: translateY(-50%) rotateY(210deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(217.5deg);
+          transform: translateY(-50%) rotateY(217.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(225deg);
+          transform: translateY(-50%) rotateY(225deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(232.5deg);
+          transform: translateY(-50%) rotateY(232.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(240deg);
+          transform: translateY(-50%) rotateY(240deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(247.5deg);
+          transform: translateY(-50%) rotateY(247.5deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(255deg);
+          transform: translateY(-50%) rotateY(255deg);
+}
+.interface:nth-child(27):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(262.5deg);
+          transform: translateY(-50%) rotateY(262.5deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(7.7777777778deg);
+          transform: translateY(-50%) rotateY(7.7777777778deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(15.5555555556deg);
+          transform: translateY(-50%) rotateY(15.5555555556deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(23.3333333333deg);
+          transform: translateY(-50%) rotateY(23.3333333333deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(31.1111111111deg);
+          transform: translateY(-50%) rotateY(31.1111111111deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(38.8888888889deg);
+          transform: translateY(-50%) rotateY(38.8888888889deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(46.6666666667deg);
+          transform: translateY(-50%) rotateY(46.6666666667deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(54.4444444444deg);
+          transform: translateY(-50%) rotateY(54.4444444444deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(62.2222222222deg);
+          transform: translateY(-50%) rotateY(62.2222222222deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(70deg);
+          transform: translateY(-50%) rotateY(70deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(77.7777777778deg);
+          transform: translateY(-50%) rotateY(77.7777777778deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(85.5555555556deg);
+          transform: translateY(-50%) rotateY(85.5555555556deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(93.3333333333deg);
+          transform: translateY(-50%) rotateY(93.3333333333deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(101.1111111111deg);
+          transform: translateY(-50%) rotateY(101.1111111111deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(108.8888888889deg);
+          transform: translateY(-50%) rotateY(108.8888888889deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(116.6666666667deg);
+          transform: translateY(-50%) rotateY(116.6666666667deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(124.4444444444deg);
+          transform: translateY(-50%) rotateY(124.4444444444deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(132.2222222222deg);
+          transform: translateY(-50%) rotateY(132.2222222222deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(140deg);
+          transform: translateY(-50%) rotateY(140deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(147.7777777778deg);
+          transform: translateY(-50%) rotateY(147.7777777778deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(155.5555555556deg);
+          transform: translateY(-50%) rotateY(155.5555555556deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(163.3333333333deg);
+          transform: translateY(-50%) rotateY(163.3333333333deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(171.1111111111deg);
+          transform: translateY(-50%) rotateY(171.1111111111deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(178.8888888889deg);
+          transform: translateY(-50%) rotateY(178.8888888889deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(186.6666666667deg);
+          transform: translateY(-50%) rotateY(186.6666666667deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(194.4444444444deg);
+          transform: translateY(-50%) rotateY(194.4444444444deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(202.2222222222deg);
+          transform: translateY(-50%) rotateY(202.2222222222deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(210deg);
+          transform: translateY(-50%) rotateY(210deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(217.7777777778deg);
+          transform: translateY(-50%) rotateY(217.7777777778deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(225.5555555556deg);
+          transform: translateY(-50%) rotateY(225.5555555556deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(233.3333333333deg);
+          transform: translateY(-50%) rotateY(233.3333333333deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(241.1111111111deg);
+          transform: translateY(-50%) rotateY(241.1111111111deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(248.8888888889deg);
+          transform: translateY(-50%) rotateY(248.8888888889deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(256.6666666667deg);
+          transform: translateY(-50%) rotateY(256.6666666667deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(264.4444444444deg);
+          transform: translateY(-50%) rotateY(264.4444444444deg);
+}
+.interface:nth-child(28):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(272.2222222222deg);
+          transform: translateY(-50%) rotateY(272.2222222222deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(8.0555555556deg);
+          transform: translateY(-50%) rotateY(8.0555555556deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(16.1111111111deg);
+          transform: translateY(-50%) rotateY(16.1111111111deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(24.1666666667deg);
+          transform: translateY(-50%) rotateY(24.1666666667deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(32.2222222222deg);
+          transform: translateY(-50%) rotateY(32.2222222222deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(40.2777777778deg);
+          transform: translateY(-50%) rotateY(40.2777777778deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(48.3333333333deg);
+          transform: translateY(-50%) rotateY(48.3333333333deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(56.3888888889deg);
+          transform: translateY(-50%) rotateY(56.3888888889deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(64.4444444444deg);
+          transform: translateY(-50%) rotateY(64.4444444444deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(72.5deg);
+          transform: translateY(-50%) rotateY(72.5deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(80.5555555556deg);
+          transform: translateY(-50%) rotateY(80.5555555556deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(88.6111111111deg);
+          transform: translateY(-50%) rotateY(88.6111111111deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(96.6666666667deg);
+          transform: translateY(-50%) rotateY(96.6666666667deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(104.7222222222deg);
+          transform: translateY(-50%) rotateY(104.7222222222deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(112.7777777778deg);
+          transform: translateY(-50%) rotateY(112.7777777778deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(120.8333333333deg);
+          transform: translateY(-50%) rotateY(120.8333333333deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(128.8888888889deg);
+          transform: translateY(-50%) rotateY(128.8888888889deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(136.9444444444deg);
+          transform: translateY(-50%) rotateY(136.9444444444deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(145deg);
+          transform: translateY(-50%) rotateY(145deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(153.0555555556deg);
+          transform: translateY(-50%) rotateY(153.0555555556deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(161.1111111111deg);
+          transform: translateY(-50%) rotateY(161.1111111111deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(169.1666666667deg);
+          transform: translateY(-50%) rotateY(169.1666666667deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(177.2222222222deg);
+          transform: translateY(-50%) rotateY(177.2222222222deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(185.2777777778deg);
+          transform: translateY(-50%) rotateY(185.2777777778deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(193.3333333333deg);
+          transform: translateY(-50%) rotateY(193.3333333333deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(201.3888888889deg);
+          transform: translateY(-50%) rotateY(201.3888888889deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(209.4444444444deg);
+          transform: translateY(-50%) rotateY(209.4444444444deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(217.5deg);
+          transform: translateY(-50%) rotateY(217.5deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(225.5555555556deg);
+          transform: translateY(-50%) rotateY(225.5555555556deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(233.6111111111deg);
+          transform: translateY(-50%) rotateY(233.6111111111deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(241.6666666667deg);
+          transform: translateY(-50%) rotateY(241.6666666667deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(249.7222222222deg);
+          transform: translateY(-50%) rotateY(249.7222222222deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(257.7777777778deg);
+          transform: translateY(-50%) rotateY(257.7777777778deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(265.8333333333deg);
+          transform: translateY(-50%) rotateY(265.8333333333deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(273.8888888889deg);
+          transform: translateY(-50%) rotateY(273.8888888889deg);
+}
+.interface:nth-child(29):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(281.9444444444deg);
+          transform: translateY(-50%) rotateY(281.9444444444deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(8.3333333333deg);
+          transform: translateY(-50%) rotateY(8.3333333333deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(16.6666666667deg);
+          transform: translateY(-50%) rotateY(16.6666666667deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(25deg);
+          transform: translateY(-50%) rotateY(25deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(33.3333333333deg);
+          transform: translateY(-50%) rotateY(33.3333333333deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(41.6666666667deg);
+          transform: translateY(-50%) rotateY(41.6666666667deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(50deg);
+          transform: translateY(-50%) rotateY(50deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(58.3333333333deg);
+          transform: translateY(-50%) rotateY(58.3333333333deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(66.6666666667deg);
+          transform: translateY(-50%) rotateY(66.6666666667deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(75deg);
+          transform: translateY(-50%) rotateY(75deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(83.3333333333deg);
+          transform: translateY(-50%) rotateY(83.3333333333deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(91.6666666667deg);
+          transform: translateY(-50%) rotateY(91.6666666667deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(100deg);
+          transform: translateY(-50%) rotateY(100deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(108.3333333333deg);
+          transform: translateY(-50%) rotateY(108.3333333333deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(116.6666666667deg);
+          transform: translateY(-50%) rotateY(116.6666666667deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(125deg);
+          transform: translateY(-50%) rotateY(125deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(133.3333333333deg);
+          transform: translateY(-50%) rotateY(133.3333333333deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(141.6666666667deg);
+          transform: translateY(-50%) rotateY(141.6666666667deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(150deg);
+          transform: translateY(-50%) rotateY(150deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(158.3333333333deg);
+          transform: translateY(-50%) rotateY(158.3333333333deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(166.6666666667deg);
+          transform: translateY(-50%) rotateY(166.6666666667deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(175deg);
+          transform: translateY(-50%) rotateY(175deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(183.3333333333deg);
+          transform: translateY(-50%) rotateY(183.3333333333deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(191.6666666667deg);
+          transform: translateY(-50%) rotateY(191.6666666667deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(200deg);
+          transform: translateY(-50%) rotateY(200deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(208.3333333333deg);
+          transform: translateY(-50%) rotateY(208.3333333333deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(216.6666666667deg);
+          transform: translateY(-50%) rotateY(216.6666666667deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(225deg);
+          transform: translateY(-50%) rotateY(225deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(233.3333333333deg);
+          transform: translateY(-50%) rotateY(233.3333333333deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(241.6666666667deg);
+          transform: translateY(-50%) rotateY(241.6666666667deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(250deg);
+          transform: translateY(-50%) rotateY(250deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(258.3333333333deg);
+          transform: translateY(-50%) rotateY(258.3333333333deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(266.6666666667deg);
+          transform: translateY(-50%) rotateY(266.6666666667deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(275deg);
+          transform: translateY(-50%) rotateY(275deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(283.3333333333deg);
+          transform: translateY(-50%) rotateY(283.3333333333deg);
+}
+.interface:nth-child(30):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(291.6666666667deg);
+          transform: translateY(-50%) rotateY(291.6666666667deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(8.6111111111deg);
+          transform: translateY(-50%) rotateY(8.6111111111deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(17.2222222222deg);
+          transform: translateY(-50%) rotateY(17.2222222222deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(25.8333333333deg);
+          transform: translateY(-50%) rotateY(25.8333333333deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(34.4444444444deg);
+          transform: translateY(-50%) rotateY(34.4444444444deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(43.0555555556deg);
+          transform: translateY(-50%) rotateY(43.0555555556deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(51.6666666667deg);
+          transform: translateY(-50%) rotateY(51.6666666667deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(60.2777777778deg);
+          transform: translateY(-50%) rotateY(60.2777777778deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(68.8888888889deg);
+          transform: translateY(-50%) rotateY(68.8888888889deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(77.5deg);
+          transform: translateY(-50%) rotateY(77.5deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(86.1111111111deg);
+          transform: translateY(-50%) rotateY(86.1111111111deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(94.7222222222deg);
+          transform: translateY(-50%) rotateY(94.7222222222deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(103.3333333333deg);
+          transform: translateY(-50%) rotateY(103.3333333333deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(111.9444444444deg);
+          transform: translateY(-50%) rotateY(111.9444444444deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(120.5555555556deg);
+          transform: translateY(-50%) rotateY(120.5555555556deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(129.1666666667deg);
+          transform: translateY(-50%) rotateY(129.1666666667deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(137.7777777778deg);
+          transform: translateY(-50%) rotateY(137.7777777778deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(146.3888888889deg);
+          transform: translateY(-50%) rotateY(146.3888888889deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(155deg);
+          transform: translateY(-50%) rotateY(155deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(163.6111111111deg);
+          transform: translateY(-50%) rotateY(163.6111111111deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(172.2222222222deg);
+          transform: translateY(-50%) rotateY(172.2222222222deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(180.8333333333deg);
+          transform: translateY(-50%) rotateY(180.8333333333deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(189.4444444444deg);
+          transform: translateY(-50%) rotateY(189.4444444444deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(198.0555555556deg);
+          transform: translateY(-50%) rotateY(198.0555555556deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(206.6666666667deg);
+          transform: translateY(-50%) rotateY(206.6666666667deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(215.2777777778deg);
+          transform: translateY(-50%) rotateY(215.2777777778deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(223.8888888889deg);
+          transform: translateY(-50%) rotateY(223.8888888889deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(232.5deg);
+          transform: translateY(-50%) rotateY(232.5deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(241.1111111111deg);
+          transform: translateY(-50%) rotateY(241.1111111111deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(249.7222222222deg);
+          transform: translateY(-50%) rotateY(249.7222222222deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(258.3333333333deg);
+          transform: translateY(-50%) rotateY(258.3333333333deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(266.9444444444deg);
+          transform: translateY(-50%) rotateY(266.9444444444deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(275.5555555556deg);
+          transform: translateY(-50%) rotateY(275.5555555556deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(284.1666666667deg);
+          transform: translateY(-50%) rotateY(284.1666666667deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(292.7777777778deg);
+          transform: translateY(-50%) rotateY(292.7777777778deg);
+}
+.interface:nth-child(31):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(301.3888888889deg);
+          transform: translateY(-50%) rotateY(301.3888888889deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(8.8888888889deg);
+          transform: translateY(-50%) rotateY(8.8888888889deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(17.7777777778deg);
+          transform: translateY(-50%) rotateY(17.7777777778deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(26.6666666667deg);
+          transform: translateY(-50%) rotateY(26.6666666667deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(35.5555555556deg);
+          transform: translateY(-50%) rotateY(35.5555555556deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(44.4444444444deg);
+          transform: translateY(-50%) rotateY(44.4444444444deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(53.3333333333deg);
+          transform: translateY(-50%) rotateY(53.3333333333deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(62.2222222222deg);
+          transform: translateY(-50%) rotateY(62.2222222222deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(71.1111111111deg);
+          transform: translateY(-50%) rotateY(71.1111111111deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(80deg);
+          transform: translateY(-50%) rotateY(80deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(88.8888888889deg);
+          transform: translateY(-50%) rotateY(88.8888888889deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(97.7777777778deg);
+          transform: translateY(-50%) rotateY(97.7777777778deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(106.6666666667deg);
+          transform: translateY(-50%) rotateY(106.6666666667deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(115.5555555556deg);
+          transform: translateY(-50%) rotateY(115.5555555556deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(124.4444444444deg);
+          transform: translateY(-50%) rotateY(124.4444444444deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(133.3333333333deg);
+          transform: translateY(-50%) rotateY(133.3333333333deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(142.2222222222deg);
+          transform: translateY(-50%) rotateY(142.2222222222deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(151.1111111111deg);
+          transform: translateY(-50%) rotateY(151.1111111111deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(160deg);
+          transform: translateY(-50%) rotateY(160deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(168.8888888889deg);
+          transform: translateY(-50%) rotateY(168.8888888889deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(177.7777777778deg);
+          transform: translateY(-50%) rotateY(177.7777777778deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(186.6666666667deg);
+          transform: translateY(-50%) rotateY(186.6666666667deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(195.5555555556deg);
+          transform: translateY(-50%) rotateY(195.5555555556deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(204.4444444444deg);
+          transform: translateY(-50%) rotateY(204.4444444444deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(213.3333333333deg);
+          transform: translateY(-50%) rotateY(213.3333333333deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(222.2222222222deg);
+          transform: translateY(-50%) rotateY(222.2222222222deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(231.1111111111deg);
+          transform: translateY(-50%) rotateY(231.1111111111deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(240deg);
+          transform: translateY(-50%) rotateY(240deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(248.8888888889deg);
+          transform: translateY(-50%) rotateY(248.8888888889deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(257.7777777778deg);
+          transform: translateY(-50%) rotateY(257.7777777778deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(266.6666666667deg);
+          transform: translateY(-50%) rotateY(266.6666666667deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(275.5555555556deg);
+          transform: translateY(-50%) rotateY(275.5555555556deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(284.4444444444deg);
+          transform: translateY(-50%) rotateY(284.4444444444deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(293.3333333333deg);
+          transform: translateY(-50%) rotateY(293.3333333333deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(302.2222222222deg);
+          transform: translateY(-50%) rotateY(302.2222222222deg);
+}
+.interface:nth-child(32):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(311.1111111111deg);
+          transform: translateY(-50%) rotateY(311.1111111111deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(9.1666666667deg);
+          transform: translateY(-50%) rotateY(9.1666666667deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(18.3333333333deg);
+          transform: translateY(-50%) rotateY(18.3333333333deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(27.5deg);
+          transform: translateY(-50%) rotateY(27.5deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(36.6666666667deg);
+          transform: translateY(-50%) rotateY(36.6666666667deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(45.8333333333deg);
+          transform: translateY(-50%) rotateY(45.8333333333deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(55deg);
+          transform: translateY(-50%) rotateY(55deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(64.1666666667deg);
+          transform: translateY(-50%) rotateY(64.1666666667deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(73.3333333333deg);
+          transform: translateY(-50%) rotateY(73.3333333333deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(82.5deg);
+          transform: translateY(-50%) rotateY(82.5deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(91.6666666667deg);
+          transform: translateY(-50%) rotateY(91.6666666667deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(100.8333333333deg);
+          transform: translateY(-50%) rotateY(100.8333333333deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(110deg);
+          transform: translateY(-50%) rotateY(110deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(119.1666666667deg);
+          transform: translateY(-50%) rotateY(119.1666666667deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(128.3333333333deg);
+          transform: translateY(-50%) rotateY(128.3333333333deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(137.5deg);
+          transform: translateY(-50%) rotateY(137.5deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(146.6666666667deg);
+          transform: translateY(-50%) rotateY(146.6666666667deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(155.8333333333deg);
+          transform: translateY(-50%) rotateY(155.8333333333deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(165deg);
+          transform: translateY(-50%) rotateY(165deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(174.1666666667deg);
+          transform: translateY(-50%) rotateY(174.1666666667deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(183.3333333333deg);
+          transform: translateY(-50%) rotateY(183.3333333333deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(192.5deg);
+          transform: translateY(-50%) rotateY(192.5deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(201.6666666667deg);
+          transform: translateY(-50%) rotateY(201.6666666667deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(210.8333333333deg);
+          transform: translateY(-50%) rotateY(210.8333333333deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(220deg);
+          transform: translateY(-50%) rotateY(220deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(229.1666666667deg);
+          transform: translateY(-50%) rotateY(229.1666666667deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(238.3333333333deg);
+          transform: translateY(-50%) rotateY(238.3333333333deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(247.5deg);
+          transform: translateY(-50%) rotateY(247.5deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(256.6666666667deg);
+          transform: translateY(-50%) rotateY(256.6666666667deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(265.8333333333deg);
+          transform: translateY(-50%) rotateY(265.8333333333deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(275deg);
+          transform: translateY(-50%) rotateY(275deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(284.1666666667deg);
+          transform: translateY(-50%) rotateY(284.1666666667deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(293.3333333333deg);
+          transform: translateY(-50%) rotateY(293.3333333333deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(302.5deg);
+          transform: translateY(-50%) rotateY(302.5deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(311.6666666667deg);
+          transform: translateY(-50%) rotateY(311.6666666667deg);
+}
+.interface:nth-child(33):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(320.8333333333deg);
+          transform: translateY(-50%) rotateY(320.8333333333deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(9.4444444444deg);
+          transform: translateY(-50%) rotateY(9.4444444444deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(18.8888888889deg);
+          transform: translateY(-50%) rotateY(18.8888888889deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(28.3333333333deg);
+          transform: translateY(-50%) rotateY(28.3333333333deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(37.7777777778deg);
+          transform: translateY(-50%) rotateY(37.7777777778deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(47.2222222222deg);
+          transform: translateY(-50%) rotateY(47.2222222222deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(56.6666666667deg);
+          transform: translateY(-50%) rotateY(56.6666666667deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(66.1111111111deg);
+          transform: translateY(-50%) rotateY(66.1111111111deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(75.5555555556deg);
+          transform: translateY(-50%) rotateY(75.5555555556deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(85deg);
+          transform: translateY(-50%) rotateY(85deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(94.4444444444deg);
+          transform: translateY(-50%) rotateY(94.4444444444deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(103.8888888889deg);
+          transform: translateY(-50%) rotateY(103.8888888889deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(113.3333333333deg);
+          transform: translateY(-50%) rotateY(113.3333333333deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(122.7777777778deg);
+          transform: translateY(-50%) rotateY(122.7777777778deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(132.2222222222deg);
+          transform: translateY(-50%) rotateY(132.2222222222deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(141.6666666667deg);
+          transform: translateY(-50%) rotateY(141.6666666667deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(151.1111111111deg);
+          transform: translateY(-50%) rotateY(151.1111111111deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(160.5555555556deg);
+          transform: translateY(-50%) rotateY(160.5555555556deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(170deg);
+          transform: translateY(-50%) rotateY(170deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(179.4444444444deg);
+          transform: translateY(-50%) rotateY(179.4444444444deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(188.8888888889deg);
+          transform: translateY(-50%) rotateY(188.8888888889deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(198.3333333333deg);
+          transform: translateY(-50%) rotateY(198.3333333333deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(207.7777777778deg);
+          transform: translateY(-50%) rotateY(207.7777777778deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(217.2222222222deg);
+          transform: translateY(-50%) rotateY(217.2222222222deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(226.6666666667deg);
+          transform: translateY(-50%) rotateY(226.6666666667deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(236.1111111111deg);
+          transform: translateY(-50%) rotateY(236.1111111111deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(245.5555555556deg);
+          transform: translateY(-50%) rotateY(245.5555555556deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(255deg);
+          transform: translateY(-50%) rotateY(255deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(264.4444444444deg);
+          transform: translateY(-50%) rotateY(264.4444444444deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(273.8888888889deg);
+          transform: translateY(-50%) rotateY(273.8888888889deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(283.3333333333deg);
+          transform: translateY(-50%) rotateY(283.3333333333deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(292.7777777778deg);
+          transform: translateY(-50%) rotateY(292.7777777778deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(302.2222222222deg);
+          transform: translateY(-50%) rotateY(302.2222222222deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(311.6666666667deg);
+          transform: translateY(-50%) rotateY(311.6666666667deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(321.1111111111deg);
+          transform: translateY(-50%) rotateY(321.1111111111deg);
+}
+.interface:nth-child(34):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(330.5555555556deg);
+          transform: translateY(-50%) rotateY(330.5555555556deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(9.7222222222deg);
+          transform: translateY(-50%) rotateY(9.7222222222deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(19.4444444444deg);
+          transform: translateY(-50%) rotateY(19.4444444444deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(29.1666666667deg);
+          transform: translateY(-50%) rotateY(29.1666666667deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(38.8888888889deg);
+          transform: translateY(-50%) rotateY(38.8888888889deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(48.6111111111deg);
+          transform: translateY(-50%) rotateY(48.6111111111deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(58.3333333333deg);
+          transform: translateY(-50%) rotateY(58.3333333333deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(68.0555555556deg);
+          transform: translateY(-50%) rotateY(68.0555555556deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(77.7777777778deg);
+          transform: translateY(-50%) rotateY(77.7777777778deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(87.5deg);
+          transform: translateY(-50%) rotateY(87.5deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(97.2222222222deg);
+          transform: translateY(-50%) rotateY(97.2222222222deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(106.9444444444deg);
+          transform: translateY(-50%) rotateY(106.9444444444deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(116.6666666667deg);
+          transform: translateY(-50%) rotateY(116.6666666667deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(126.3888888889deg);
+          transform: translateY(-50%) rotateY(126.3888888889deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(136.1111111111deg);
+          transform: translateY(-50%) rotateY(136.1111111111deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(145.8333333333deg);
+          transform: translateY(-50%) rotateY(145.8333333333deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(155.5555555556deg);
+          transform: translateY(-50%) rotateY(155.5555555556deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(165.2777777778deg);
+          transform: translateY(-50%) rotateY(165.2777777778deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(175deg);
+          transform: translateY(-50%) rotateY(175deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(184.7222222222deg);
+          transform: translateY(-50%) rotateY(184.7222222222deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(194.4444444444deg);
+          transform: translateY(-50%) rotateY(194.4444444444deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(204.1666666667deg);
+          transform: translateY(-50%) rotateY(204.1666666667deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(213.8888888889deg);
+          transform: translateY(-50%) rotateY(213.8888888889deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(223.6111111111deg);
+          transform: translateY(-50%) rotateY(223.6111111111deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(233.3333333333deg);
+          transform: translateY(-50%) rotateY(233.3333333333deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(243.0555555556deg);
+          transform: translateY(-50%) rotateY(243.0555555556deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(252.7777777778deg);
+          transform: translateY(-50%) rotateY(252.7777777778deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(262.5deg);
+          transform: translateY(-50%) rotateY(262.5deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(272.2222222222deg);
+          transform: translateY(-50%) rotateY(272.2222222222deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(281.9444444444deg);
+          transform: translateY(-50%) rotateY(281.9444444444deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(291.6666666667deg);
+          transform: translateY(-50%) rotateY(291.6666666667deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(301.3888888889deg);
+          transform: translateY(-50%) rotateY(301.3888888889deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(311.1111111111deg);
+          transform: translateY(-50%) rotateY(311.1111111111deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(320.8333333333deg);
+          transform: translateY(-50%) rotateY(320.8333333333deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(330.5555555556deg);
+          transform: translateY(-50%) rotateY(330.5555555556deg);
+}
+.interface:nth-child(35):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(340.2777777778deg);
+          transform: translateY(-50%) rotateY(340.2777777778deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(2) {
+  -webkit-transform: translateY(-50%) rotateY(10deg);
+          transform: translateY(-50%) rotateY(10deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(3) {
+  -webkit-transform: translateY(-50%) rotateY(20deg);
+          transform: translateY(-50%) rotateY(20deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(4) {
+  -webkit-transform: translateY(-50%) rotateY(30deg);
+          transform: translateY(-50%) rotateY(30deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(5) {
+  -webkit-transform: translateY(-50%) rotateY(40deg);
+          transform: translateY(-50%) rotateY(40deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(6) {
+  -webkit-transform: translateY(-50%) rotateY(50deg);
+          transform: translateY(-50%) rotateY(50deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(7) {
+  -webkit-transform: translateY(-50%) rotateY(60deg);
+          transform: translateY(-50%) rotateY(60deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(8) {
+  -webkit-transform: translateY(-50%) rotateY(70deg);
+          transform: translateY(-50%) rotateY(70deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(9) {
+  -webkit-transform: translateY(-50%) rotateY(80deg);
+          transform: translateY(-50%) rotateY(80deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(10) {
+  -webkit-transform: translateY(-50%) rotateY(90deg);
+          transform: translateY(-50%) rotateY(90deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(11) {
+  -webkit-transform: translateY(-50%) rotateY(100deg);
+          transform: translateY(-50%) rotateY(100deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(12) {
+  -webkit-transform: translateY(-50%) rotateY(110deg);
+          transform: translateY(-50%) rotateY(110deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(13) {
+  -webkit-transform: translateY(-50%) rotateY(120deg);
+          transform: translateY(-50%) rotateY(120deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(14) {
+  -webkit-transform: translateY(-50%) rotateY(130deg);
+          transform: translateY(-50%) rotateY(130deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(15) {
+  -webkit-transform: translateY(-50%) rotateY(140deg);
+          transform: translateY(-50%) rotateY(140deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(16) {
+  -webkit-transform: translateY(-50%) rotateY(150deg);
+          transform: translateY(-50%) rotateY(150deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(17) {
+  -webkit-transform: translateY(-50%) rotateY(160deg);
+          transform: translateY(-50%) rotateY(160deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(18) {
+  -webkit-transform: translateY(-50%) rotateY(170deg);
+          transform: translateY(-50%) rotateY(170deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(19) {
+  -webkit-transform: translateY(-50%) rotateY(180deg);
+          transform: translateY(-50%) rotateY(180deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(20) {
+  -webkit-transform: translateY(-50%) rotateY(190deg);
+          transform: translateY(-50%) rotateY(190deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(21) {
+  -webkit-transform: translateY(-50%) rotateY(200deg);
+          transform: translateY(-50%) rotateY(200deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(22) {
+  -webkit-transform: translateY(-50%) rotateY(210deg);
+          transform: translateY(-50%) rotateY(210deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(23) {
+  -webkit-transform: translateY(-50%) rotateY(220deg);
+          transform: translateY(-50%) rotateY(220deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(24) {
+  -webkit-transform: translateY(-50%) rotateY(230deg);
+          transform: translateY(-50%) rotateY(230deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(25) {
+  -webkit-transform: translateY(-50%) rotateY(240deg);
+          transform: translateY(-50%) rotateY(240deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(26) {
+  -webkit-transform: translateY(-50%) rotateY(250deg);
+          transform: translateY(-50%) rotateY(250deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(27) {
+  -webkit-transform: translateY(-50%) rotateY(260deg);
+          transform: translateY(-50%) rotateY(260deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(28) {
+  -webkit-transform: translateY(-50%) rotateY(270deg);
+          transform: translateY(-50%) rotateY(270deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(29) {
+  -webkit-transform: translateY(-50%) rotateY(280deg);
+          transform: translateY(-50%) rotateY(280deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(30) {
+  -webkit-transform: translateY(-50%) rotateY(290deg);
+          transform: translateY(-50%) rotateY(290deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(31) {
+  -webkit-transform: translateY(-50%) rotateY(300deg);
+          transform: translateY(-50%) rotateY(300deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(32) {
+  -webkit-transform: translateY(-50%) rotateY(310deg);
+          transform: translateY(-50%) rotateY(310deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(33) {
+  -webkit-transform: translateY(-50%) rotateY(320deg);
+          transform: translateY(-50%) rotateY(320deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(34) {
+  -webkit-transform: translateY(-50%) rotateY(330deg);
+          transform: translateY(-50%) rotateY(330deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(35) {
+  -webkit-transform: translateY(-50%) rotateY(340deg);
+          transform: translateY(-50%) rotateY(340deg);
+}
+.interface:nth-child(36):hover ~ .pages .page:nth-child(36) {
+  -webkit-transform: translateY(-50%) rotateY(350deg);
+          transform: translateY(-50%) rotateY(350deg);
+}
diff --git a/only-css-mt-fuji/license.txt b/only-css-mt-fuji/license.txt
new file mode 100644
index 0000000..ebe5918
--- /dev/null
+++ b/only-css-mt-fuji/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Yusuke Nakaya (https://codepen.io/YusukeNakaya/pen/PayOEz)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/only-css-mt-fuji/src/index.pug b/only-css-mt-fuji/src/index.pug
new file mode 100644
index 0000000..3a430cc
--- /dev/null
+++ b/only-css-mt-fuji/src/index.pug
@@ -0,0 +1,11 @@
+- var density = 10;
+
+.book
+  - for (i = 0; i < 360 / density; i++)
+    .interface
+
+  ul.pages
+    - for (i = 0; i < 360 / density; i++)
+      li.page
+        .mountain
+        .cloud
\ No newline at end of file
diff --git a/only-css-mt-fuji/src/style.scss b/only-css-mt-fuji/src/style.scss
new file mode 100644
index 0000000..6db68e4
--- /dev/null
+++ b/only-css-mt-fuji/src/style.scss
@@ -0,0 +1,142 @@
+body {
+  background: linear-gradient(to bottom, rgba(100, 150, 200, 1) 0%, rgba(255, 200, 255, 1) 100%);
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  font-family: 'Anton', sans-serif;
+  justify-content: center;
+  align-items: center;
+  perspective: 1000px;
+}
+
+$density: 10;
+$pageSize: 30;
+$borderWidth: 10px;
+$pageCount: 360 / $density;
+$cloudColor: rgba(255, 255, 255, 1);
+$borderColor: rgba(255, 255, 255, 1);
+$mountainColor: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(50, 200, 200, 1) 50%, rgba(50, 100, 200, 1) 100%);
+$pageColor: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1) 100%);
+
+.book {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+}
+
+.pages {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-style: preserve-3d;
+  pointer-events: none;
+}
+
+.cloud {
+  position: absolute;
+  background: $cloudColor;
+  border-radius: 999px;
+  // filter: blur(10px) contrast(15);
+  
+  &::before {
+    content: '';
+    position: absolute;
+    background: $cloudColor;
+    border-radius: 999px;
+  }
+  
+  &::after {
+    content: '';
+    position: absolute;
+    background: $cloudColor;
+    border-radius: 999px;
+  }
+}
+
+.mountain {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 50%;
+  height: 80%;
+  background: $mountainColor;
+  clip-path: polygon(
+    0 0,
+    100% 100%,
+    0 100%
+  );
+}
+
+.page {
+  position: absolute;
+  width: $pageSize * 16px;
+  height: $pageSize * 9px;
+  border: $borderWidth solid $borderColor;
+  // background: $pageColor;
+  overflow: hidden;
+  box-sizing: border-box;
+  transform-origin: 0 50%;
+  transform: translateY(-50%);
+  transform-style: preserve-3d;
+  transition: 1000ms cubic-bezier(0.545, 0.080, 0.520, 0.975);
+  border-left: none;
+  
+  &:nth-child(1) {
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      width: 250px;
+      height: 250px;
+      background: rgba(240, 40, 20, 1);
+      border-radius: 100%;
+      transform: translate(10px, -80px);
+    }
+  }
+
+  @for $i from 1 through $pageCount {
+    &:nth-child(#{$i}) {
+      // transform: translateY(-50%) rotateY($i * 360 / $pageCount + 0deg);
+      
+      .cloud {
+        top: random(50) + 50%;
+        left: random(100) + 0%;
+        width: random(130) + 50px;
+        height: random(30) + 30px;
+        
+        &::before {
+          width: random(130) + 50px;
+          height: random(30) + 30px;
+          transform: translate(random(100) - 50%, random(100) - 50%)
+        }
+        
+        &::after {
+          width: random(130) + 50px;
+          height: random(30) + 30px;
+          transform: translate(random(100) - 50%, random(100) - 50%)
+        }
+      }
+    }
+  }
+}
+
+.interface {
+  flex: 1;
+  box-sizing: border-box;
+  
+  @for $i from 1 through $pageCount {
+    &:nth-child(#{$i}) {
+      &:hover ~ .pages .page {
+        @for $j from 2 through $pageCount {
+          &:nth-child(#{$j}) {
+            $max: 360 / $pageCount * $i;
+            $single: $max / $pageCount;
+            transform: translateY(-50%) rotateY($single * ($j - 1) + 0deg);
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/only-css-satellite/README.markdown b/only-css-satellite/README.markdown
new file mode 100644
index 0000000..cca48f2
--- /dev/null
+++ b/only-css-satellite/README.markdown
@@ -0,0 +1,5 @@
+# Only CSS: Satellite
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/YusukeNakaya/pen/VwPZyzY](https://codepen.io/YusukeNakaya/pen/VwPZyzY).
+
+
diff --git a/only-css-satellite/dist/index.html b/only-css-satellite/dist/index.html
new file mode 100644
index 0000000..8283bae
--- /dev/null
+++ b/only-css-satellite/dist/index.html
@@ -0,0 +1,777 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Only CSS: Satellite</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="trigger"></div>
+  <div class="monitor">
+    <div class="camera -z">
+      <div class="camera -y">
+        <div class="camera -x">
+          <div class="ball">
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+            <div class="line">
+              <div class="rotate">
+                <div class="panel">
+                  <div class="graphic"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/only-css-satellite/dist/style.css b/only-css-satellite/dist/style.css
new file mode 100644
index 0000000..5eb69c5
--- /dev/null
+++ b/only-css-satellite/dist/style.css
@@ -0,0 +1,4690 @@
+body {
+  background: #171819;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  perspective: 400px;
+}
+
+div {
+  transform-style: preserve-3d;
+  position: absolute;
+}
+
+.container {
+  position: relative;
+  display: grid;
+  grid-template-rows: repeat(20, 5vh);
+  grid-template-columns: repeat(20, 5vw);
+  transform-style: preserve-3d;
+}
+.container::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 400px;
+  height: 400px;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 100%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 60px 50px black inset;
+}
+
+.monitor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  transform-style: preserve-3d;
+}
+
+.trigger {
+  position: relative;
+}
+.trigger:nth-child(1):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(1):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(2):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(2):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(3):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(3):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(4):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(4):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(5):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(5):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(6):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(6):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(7):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(7):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(8):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(8):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(9):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(9):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(10):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(10):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(11):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(11):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(12):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(12):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(13):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(13):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(14):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(14):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(15):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(15):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(16):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(16):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(17):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(17):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(18):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(18):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(19):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(19):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(20):hover ~ .monitor .camera.-x {
+  transform: rotateX(-88deg);
+}
+.trigger:nth-child(20):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(21):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(21):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(22):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(22):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(23):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(23):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(24):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(24):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(25):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(25):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(26):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(26):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(27):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(27):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(28):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(28):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(29):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(29):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(30):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(30):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(31):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(31):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(32):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(32):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(33):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(33):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(34):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(34):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(35):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(35):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(36):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(36):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(37):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(37):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(38):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(38):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(39):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(39):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(40):hover ~ .monitor .camera.-x {
+  transform: rotateX(-80deg);
+}
+.trigger:nth-child(40):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(41):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(41):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(42):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(42):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(43):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(43):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(44):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(44):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(45):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(45):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(46):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(46):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(47):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(47):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(48):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(48):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(49):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(49):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(50):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(50):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(51):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(51):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(52):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(52):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(53):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(53):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(54):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(54):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(55):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(55):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(56):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(56):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(57):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(57):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(58):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(58):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(59):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(59):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(60):hover ~ .monitor .camera.-x {
+  transform: rotateX(-72deg);
+}
+.trigger:nth-child(60):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(61):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(61):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(62):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(62):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(63):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(63):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(64):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(64):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(65):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(65):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(66):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(66):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(67):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(67):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(68):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(68):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(69):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(69):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(70):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(70):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(71):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(71):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(72):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(72):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(73):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(73):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(74):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(74):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(75):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(75):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(76):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(76):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(77):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(77):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(78):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(78):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(79):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(79):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(80):hover ~ .monitor .camera.-x {
+  transform: rotateX(-64deg);
+}
+.trigger:nth-child(80):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(81):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(81):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(82):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(82):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(83):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(83):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(84):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(84):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(85):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(85):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(86):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(86):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(87):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(87):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(88):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(88):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(89):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(89):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(90):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(90):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(91):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(91):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(92):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(92):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(93):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(93):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(94):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(94):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(95):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(95):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(96):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(96):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(97):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(97):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(98):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(98):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(99):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(99):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(100):hover ~ .monitor .camera.-x {
+  transform: rotateX(-56deg);
+}
+.trigger:nth-child(100):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(101):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(101):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(102):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(102):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(103):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(103):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(104):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(104):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(105):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(105):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(106):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(106):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(107):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(107):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(108):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(108):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(109):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(109):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(110):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(110):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(111):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(111):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(112):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(112):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(113):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(113):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(114):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(114):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(115):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(115):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(116):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(116):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(117):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(117):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(118):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(118):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(119):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(119):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(120):hover ~ .monitor .camera.-x {
+  transform: rotateX(-48deg);
+}
+.trigger:nth-child(120):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(121):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(121):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(122):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(122):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(123):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(123):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(124):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(124):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(125):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(125):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(126):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(126):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(127):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(127):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(128):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(128):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(129):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(129):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(130):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(130):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(131):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(131):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(132):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(132):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(133):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(133):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(134):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(134):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(135):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(135):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(136):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(136):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(137):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(137):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(138):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(138):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(139):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(139):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(140):hover ~ .monitor .camera.-x {
+  transform: rotateX(-40deg);
+}
+.trigger:nth-child(140):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(141):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(141):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(142):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(142):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(143):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(143):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(144):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(144):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(145):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(145):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(146):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(146):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(147):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(147):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(148):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(148):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(149):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(149):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(150):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(150):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(151):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(151):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(152):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(152):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(153):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(153):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(154):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(154):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(155):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(155):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(156):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(156):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(157):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(157):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(158):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(158):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(159):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(159):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(160):hover ~ .monitor .camera.-x {
+  transform: rotateX(-32deg);
+}
+.trigger:nth-child(160):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(161):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(161):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(162):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(162):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(163):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(163):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(164):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(164):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(165):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(165):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(166):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(166):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(167):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(167):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(168):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(168):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(169):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(169):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(170):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(170):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(171):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(171):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(172):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(172):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(173):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(173):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(174):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(174):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(175):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(175):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(176):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(176):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(177):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(177):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(178):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(178):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(179):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(179):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(180):hover ~ .monitor .camera.-x {
+  transform: rotateX(-24deg);
+}
+.trigger:nth-child(180):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(181):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(181):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(182):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(182):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(183):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(183):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(184):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(184):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(185):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(185):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(186):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(186):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(187):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(187):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(188):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(188):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(189):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(189):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(190):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(190):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(191):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(191):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(192):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(192):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(193):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(193):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(194):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(194):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(195):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(195):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(196):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(196):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(197):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(197):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(198):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(198):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(199):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(199):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(200):hover ~ .monitor .camera.-x {
+  transform: rotateX(-16deg);
+}
+.trigger:nth-child(200):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(201):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(201):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(202):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(202):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(203):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(203):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(204):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(204):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(205):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(205):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(206):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(206):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(207):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(207):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(208):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(208):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(209):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(209):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(210):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(210):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(211):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(211):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(212):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(212):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(213):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(213):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(214):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(214):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(215):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(215):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(216):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(216):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(217):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(217):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(218):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(218):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(219):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(219):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(220):hover ~ .monitor .camera.-x {
+  transform: rotateX(-8deg);
+}
+.trigger:nth-child(220):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(221):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(221):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(222):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(222):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(223):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(223):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(224):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(224):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(225):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(225):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(226):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(226):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(227):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(227):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(228):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(228):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(229):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(229):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(230):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(230):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(231):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(231):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(232):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(232):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(233):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(233):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(234):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(234):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(235):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(235):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(236):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(236):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(237):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(237):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(238):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(238):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(239):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(239):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(240):hover ~ .monitor .camera.-x {
+  transform: rotateX(0deg);
+}
+.trigger:nth-child(240):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(241):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(241):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(242):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(242):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(243):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(243):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(244):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(244):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(245):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(245):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(246):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(246):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(247):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(247):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(248):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(248):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(249):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(249):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(250):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(250):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(251):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(251):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(252):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(252):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(253):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(253):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(254):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(254):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(255):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(255):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(256):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(256):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(257):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(257):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(258):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(258):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(259):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(259):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(260):hover ~ .monitor .camera.-x {
+  transform: rotateX(8deg);
+}
+.trigger:nth-child(260):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(261):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(261):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(262):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(262):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(263):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(263):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(264):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(264):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(265):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(265):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(266):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(266):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(267):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(267):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(268):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(268):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(269):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(269):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(270):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(270):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(271):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(271):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(272):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(272):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(273):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(273):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(274):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(274):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(275):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(275):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(276):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(276):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(277):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(277):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(278):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(278):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(279):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(279):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(280):hover ~ .monitor .camera.-x {
+  transform: rotateX(16deg);
+}
+.trigger:nth-child(280):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(281):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(281):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(282):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(282):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(283):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(283):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(284):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(284):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(285):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(285):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(286):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(286):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(287):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(287):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(288):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(288):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(289):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(289):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(290):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(290):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(291):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(291):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(292):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(292):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(293):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(293):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(294):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(294):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(295):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(295):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(296):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(296):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(297):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(297):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(298):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(298):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(299):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(299):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(300):hover ~ .monitor .camera.-x {
+  transform: rotateX(24deg);
+}
+.trigger:nth-child(300):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(301):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(301):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(302):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(302):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(303):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(303):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(304):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(304):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(305):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(305):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(306):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(306):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(307):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(307):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(308):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(308):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(309):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(309):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(310):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(310):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(311):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(311):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(312):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(312):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(313):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(313):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(314):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(314):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(315):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(315):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(316):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(316):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(317):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(317):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(318):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(318):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(319):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(319):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(320):hover ~ .monitor .camera.-x {
+  transform: rotateX(32deg);
+}
+.trigger:nth-child(320):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(321):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(321):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(322):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(322):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(323):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(323):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(324):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(324):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(325):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(325):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(326):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(326):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(327):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(327):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(328):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(328):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(329):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(329):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(330):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(330):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(331):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(331):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(332):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(332):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(333):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(333):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(334):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(334):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(335):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(335):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(336):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(336):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(337):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(337):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(338):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(338):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(339):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(339):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(340):hover ~ .monitor .camera.-x {
+  transform: rotateX(40deg);
+}
+.trigger:nth-child(340):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(341):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(341):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(342):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(342):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(343):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(343):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(344):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(344):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(345):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(345):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(346):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(346):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(347):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(347):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(348):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(348):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(349):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(349):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(350):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(350):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(351):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(351):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(352):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(352):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(353):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(353):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(354):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(354):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(355):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(355):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(356):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(356):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(357):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(357):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(358):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(358):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(359):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(359):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(360):hover ~ .monitor .camera.-x {
+  transform: rotateX(48deg);
+}
+.trigger:nth-child(360):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(361):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(361):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(362):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(362):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(363):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(363):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(364):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(364):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(365):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(365):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(366):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(366):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(367):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(367):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(368):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(368):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(369):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(369):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(370):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(370):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(371):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(371):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(372):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(372):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(373):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(373):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(374):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(374):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(375):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(375):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(376):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(376):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(377):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(377):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(378):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(378):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(379):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(379):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(380):hover ~ .monitor .camera.-x {
+  transform: rotateX(56deg);
+}
+.trigger:nth-child(380):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+.trigger:nth-child(381):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(381):hover ~ .monitor .camera.-y {
+  transform: rotateY(-80deg);
+}
+.trigger:nth-child(382):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(382):hover ~ .monitor .camera.-y {
+  transform: rotateY(-72deg);
+}
+.trigger:nth-child(383):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(383):hover ~ .monitor .camera.-y {
+  transform: rotateY(-64deg);
+}
+.trigger:nth-child(384):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(384):hover ~ .monitor .camera.-y {
+  transform: rotateY(-56deg);
+}
+.trigger:nth-child(385):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(385):hover ~ .monitor .camera.-y {
+  transform: rotateY(-48deg);
+}
+.trigger:nth-child(386):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(386):hover ~ .monitor .camera.-y {
+  transform: rotateY(-40deg);
+}
+.trigger:nth-child(387):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(387):hover ~ .monitor .camera.-y {
+  transform: rotateY(-32deg);
+}
+.trigger:nth-child(388):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(388):hover ~ .monitor .camera.-y {
+  transform: rotateY(-24deg);
+}
+.trigger:nth-child(389):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(389):hover ~ .monitor .camera.-y {
+  transform: rotateY(-16deg);
+}
+.trigger:nth-child(390):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(390):hover ~ .monitor .camera.-y {
+  transform: rotateY(-8deg);
+}
+.trigger:nth-child(391):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(391):hover ~ .monitor .camera.-y {
+  transform: rotateY(0deg);
+}
+.trigger:nth-child(392):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(392):hover ~ .monitor .camera.-y {
+  transform: rotateY(8deg);
+}
+.trigger:nth-child(393):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(393):hover ~ .monitor .camera.-y {
+  transform: rotateY(16deg);
+}
+.trigger:nth-child(394):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(394):hover ~ .monitor .camera.-y {
+  transform: rotateY(24deg);
+}
+.trigger:nth-child(395):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(395):hover ~ .monitor .camera.-y {
+  transform: rotateY(32deg);
+}
+.trigger:nth-child(396):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(396):hover ~ .monitor .camera.-y {
+  transform: rotateY(40deg);
+}
+.trigger:nth-child(397):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(397):hover ~ .monitor .camera.-y {
+  transform: rotateY(48deg);
+}
+.trigger:nth-child(398):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(398):hover ~ .monitor .camera.-y {
+  transform: rotateY(56deg);
+}
+.trigger:nth-child(399):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(399):hover ~ .monitor .camera.-y {
+  transform: rotateY(64deg);
+}
+.trigger:nth-child(400):hover ~ .monitor .camera.-x {
+  transform: rotateX(64deg);
+}
+.trigger:nth-child(400):hover ~ .monitor .camera.-y {
+  transform: rotateY(72deg);
+}
+
+.camera {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  transition: 500ms;
+}
+.camera.-x {
+  transform: rotateX(0deg);
+}
+.camera.-y {
+  transform: rotateY(0deg);
+}
+
+.graphic {
+  top: -5px;
+  left: -15px;
+  width: 30px;
+  height: 10px;
+  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
+          clip-path: polygon(0 0, 100% 50%, 0 100%);
+  background: #fff;
+}
+
+.panel {
+  transform: translateZ(200px);
+}
+
+.line:nth-child(1) {
+  transform: rotateX(-19deg);
+}
+.line:nth-child(1) .rotate {
+  -webkit-animation-delay: -5246ms;
+          animation-delay: -5246ms;
+  -webkit-animation-duration: 6615ms;
+          animation-duration: 6615ms;
+}
+.line:nth-child(1) .graphic {
+  -webkit-animation: rotateX 5816ms -1576ms linear infinite;
+          animation: rotateX 5816ms -1576ms linear infinite;
+}
+.line:nth-child(2) {
+  transform: rotateX(-18deg);
+}
+.line:nth-child(2) .rotate {
+  -webkit-animation-delay: -7725ms;
+          animation-delay: -7725ms;
+  -webkit-animation-duration: 7682ms;
+          animation-duration: 7682ms;
+}
+.line:nth-child(2) .graphic {
+  -webkit-animation: rotateX 5354ms -3257ms linear infinite;
+          animation: rotateX 5354ms -3257ms linear infinite;
+}
+.line:nth-child(3) {
+  transform: rotateX(-17deg);
+}
+.line:nth-child(3) .rotate {
+  -webkit-animation-delay: -6434ms;
+          animation-delay: -6434ms;
+  -webkit-animation-duration: 6770ms;
+          animation-duration: 6770ms;
+}
+.line:nth-child(3) .graphic {
+  -webkit-animation: rotateX 5870ms -5872ms linear infinite;
+          animation: rotateX 5870ms -5872ms linear infinite;
+}
+.line:nth-child(4) {
+  transform: rotateX(-16deg);
+}
+.line:nth-child(4) .rotate {
+  -webkit-animation-delay: -2317ms;
+          animation-delay: -2317ms;
+  -webkit-animation-duration: 7173ms;
+          animation-duration: 7173ms;
+}
+.line:nth-child(4) .graphic {
+  -webkit-animation: rotateX 4256ms -3870ms linear infinite;
+          animation: rotateX 4256ms -3870ms linear infinite;
+}
+.line:nth-child(5) {
+  transform: rotateX(-15deg);
+}
+.line:nth-child(5) .rotate {
+  -webkit-animation-delay: -4955ms;
+          animation-delay: -4955ms;
+  -webkit-animation-duration: 6401ms;
+          animation-duration: 6401ms;
+}
+.line:nth-child(5) .graphic {
+  -webkit-animation: rotateX 5286ms -1367ms linear infinite;
+          animation: rotateX 5286ms -1367ms linear infinite;
+}
+.line:nth-child(6) {
+  transform: rotateX(-14deg);
+}
+.line:nth-child(6) .rotate {
+  -webkit-animation-delay: -9032ms;
+          animation-delay: -9032ms;
+  -webkit-animation-duration: 5042ms;
+          animation-duration: 5042ms;
+}
+.line:nth-child(6) .graphic {
+  -webkit-animation: rotateX 3394ms -3331ms linear infinite;
+          animation: rotateX 3394ms -3331ms linear infinite;
+}
+.line:nth-child(7) {
+  transform: rotateX(-13deg);
+}
+.line:nth-child(7) .rotate {
+  -webkit-animation-delay: -9110ms;
+          animation-delay: -9110ms;
+  -webkit-animation-duration: 7420ms;
+          animation-duration: 7420ms;
+}
+.line:nth-child(7) .graphic {
+  -webkit-animation: rotateX 3213ms -5133ms linear infinite;
+          animation: rotateX 3213ms -5133ms linear infinite;
+}
+.line:nth-child(8) {
+  transform: rotateX(-12deg);
+}
+.line:nth-child(8) .rotate {
+  -webkit-animation-delay: -9187ms;
+          animation-delay: -9187ms;
+  -webkit-animation-duration: 6347ms;
+          animation-duration: 6347ms;
+}
+.line:nth-child(8) .graphic {
+  -webkit-animation: rotateX 3799ms -4103ms linear infinite;
+          animation: rotateX 3799ms -4103ms linear infinite;
+}
+.line:nth-child(9) {
+  transform: rotateX(-11deg);
+}
+.line:nth-child(9) .rotate {
+  -webkit-animation-delay: -1183ms;
+          animation-delay: -1183ms;
+  -webkit-animation-duration: 6004ms;
+          animation-duration: 6004ms;
+}
+.line:nth-child(9) .graphic {
+  -webkit-animation: rotateX 5023ms -2239ms linear infinite;
+          animation: rotateX 5023ms -2239ms linear infinite;
+}
+.line:nth-child(10) {
+  transform: rotateX(-10deg);
+}
+.line:nth-child(10) .rotate {
+  -webkit-animation-delay: -3814ms;
+          animation-delay: -3814ms;
+  -webkit-animation-duration: 6317ms;
+          animation-duration: 6317ms;
+}
+.line:nth-child(10) .graphic {
+  -webkit-animation: rotateX 4470ms -5484ms linear infinite;
+          animation: rotateX 4470ms -5484ms linear infinite;
+}
+.line:nth-child(11) {
+  transform: rotateX(-9deg);
+}
+.line:nth-child(11) .rotate {
+  -webkit-animation-delay: -3810ms;
+          animation-delay: -3810ms;
+  -webkit-animation-duration: 7191ms;
+          animation-duration: 7191ms;
+}
+.line:nth-child(11) .graphic {
+  -webkit-animation: rotateX 5334ms -5153ms linear infinite;
+          animation: rotateX 5334ms -5153ms linear infinite;
+}
+.line:nth-child(12) {
+  transform: rotateX(-8deg);
+}
+.line:nth-child(12) .rotate {
+  -webkit-animation-delay: -5002ms;
+          animation-delay: -5002ms;
+  -webkit-animation-duration: 5139ms;
+          animation-duration: 5139ms;
+}
+.line:nth-child(12) .graphic {
+  -webkit-animation: rotateX 3771ms -1191ms linear infinite;
+          animation: rotateX 3771ms -1191ms linear infinite;
+}
+.line:nth-child(13) {
+  transform: rotateX(-7deg);
+}
+.line:nth-child(13) .rotate {
+  -webkit-animation-delay: -4240ms;
+          animation-delay: -4240ms;
+  -webkit-animation-duration: 5260ms;
+          animation-duration: 5260ms;
+}
+.line:nth-child(13) .graphic {
+  -webkit-animation: rotateX 4078ms -4516ms linear infinite;
+          animation: rotateX 4078ms -4516ms linear infinite;
+}
+.line:nth-child(14) {
+  transform: rotateX(-6deg);
+}
+.line:nth-child(14) .rotate {
+  -webkit-animation-delay: -7391ms;
+          animation-delay: -7391ms;
+  -webkit-animation-duration: 6470ms;
+          animation-duration: 6470ms;
+}
+.line:nth-child(14) .graphic {
+  -webkit-animation: rotateX 4648ms -1031ms linear infinite;
+          animation: rotateX 4648ms -1031ms linear infinite;
+}
+.line:nth-child(15) {
+  transform: rotateX(-5deg);
+}
+.line:nth-child(15) .rotate {
+  -webkit-animation-delay: -79ms;
+          animation-delay: -79ms;
+  -webkit-animation-duration: 6735ms;
+          animation-duration: 6735ms;
+}
+.line:nth-child(15) .graphic {
+  -webkit-animation: rotateX 5041ms -77ms linear infinite;
+          animation: rotateX 5041ms -77ms linear infinite;
+}
+.line:nth-child(16) {
+  transform: rotateX(-4deg);
+}
+.line:nth-child(16) .rotate {
+  -webkit-animation-delay: -890ms;
+          animation-delay: -890ms;
+  -webkit-animation-duration: 5766ms;
+          animation-duration: 5766ms;
+}
+.line:nth-child(16) .graphic {
+  -webkit-animation: rotateX 5796ms -3454ms linear infinite;
+          animation: rotateX 5796ms -3454ms linear infinite;
+}
+.line:nth-child(17) {
+  transform: rotateX(-3deg);
+}
+.line:nth-child(17) .rotate {
+  -webkit-animation-delay: -5277ms;
+          animation-delay: -5277ms;
+  -webkit-animation-duration: 6173ms;
+          animation-duration: 6173ms;
+}
+.line:nth-child(17) .graphic {
+  -webkit-animation: rotateX 4489ms -4256ms linear infinite;
+          animation: rotateX 4489ms -4256ms linear infinite;
+}
+.line:nth-child(18) {
+  transform: rotateX(-2deg);
+}
+.line:nth-child(18) .rotate {
+  -webkit-animation-delay: -4726ms;
+          animation-delay: -4726ms;
+  -webkit-animation-duration: 5319ms;
+          animation-duration: 5319ms;
+}
+.line:nth-child(18) .graphic {
+  -webkit-animation: rotateX 4472ms -4697ms linear infinite;
+          animation: rotateX 4472ms -4697ms linear infinite;
+}
+.line:nth-child(19) {
+  transform: rotateX(-1deg);
+}
+.line:nth-child(19) .rotate {
+  -webkit-animation-delay: -1480ms;
+          animation-delay: -1480ms;
+  -webkit-animation-duration: 7392ms;
+          animation-duration: 7392ms;
+}
+.line:nth-child(19) .graphic {
+  -webkit-animation: rotateX 3284ms -2377ms linear infinite;
+          animation: rotateX 3284ms -2377ms linear infinite;
+}
+.line:nth-child(20) {
+  transform: rotateX(0deg);
+}
+.line:nth-child(20) .rotate {
+  -webkit-animation-delay: -7028ms;
+          animation-delay: -7028ms;
+  -webkit-animation-duration: 5434ms;
+          animation-duration: 5434ms;
+}
+.line:nth-child(20) .graphic {
+  -webkit-animation: rotateX 4633ms -4703ms linear infinite;
+          animation: rotateX 4633ms -4703ms linear infinite;
+}
+.line:nth-child(21) {
+  transform: rotateX(1deg);
+}
+.line:nth-child(21) .rotate {
+  -webkit-animation-delay: -9946ms;
+          animation-delay: -9946ms;
+  -webkit-animation-duration: 6107ms;
+          animation-duration: 6107ms;
+}
+.line:nth-child(21) .graphic {
+  -webkit-animation: rotateX 4620ms -228ms linear infinite;
+          animation: rotateX 4620ms -228ms linear infinite;
+}
+.line:nth-child(22) {
+  transform: rotateX(2deg);
+}
+.line:nth-child(22) .rotate {
+  -webkit-animation-delay: -344ms;
+          animation-delay: -344ms;
+  -webkit-animation-duration: 7809ms;
+          animation-duration: 7809ms;
+}
+.line:nth-child(22) .graphic {
+  -webkit-animation: rotateX 5784ms -5918ms linear infinite;
+          animation: rotateX 5784ms -5918ms linear infinite;
+}
+.line:nth-child(23) {
+  transform: rotateX(3deg);
+}
+.line:nth-child(23) .rotate {
+  -webkit-animation-delay: -2647ms;
+          animation-delay: -2647ms;
+  -webkit-animation-duration: 5028ms;
+          animation-duration: 5028ms;
+}
+.line:nth-child(23) .graphic {
+  -webkit-animation: rotateX 4955ms -5318ms linear infinite;
+          animation: rotateX 4955ms -5318ms linear infinite;
+}
+.line:nth-child(24) {
+  transform: rotateX(4deg);
+}
+.line:nth-child(24) .rotate {
+  -webkit-animation-delay: -6273ms;
+          animation-delay: -6273ms;
+  -webkit-animation-duration: 7871ms;
+          animation-duration: 7871ms;
+}
+.line:nth-child(24) .graphic {
+  -webkit-animation: rotateX 5340ms -1157ms linear infinite;
+          animation: rotateX 5340ms -1157ms linear infinite;
+}
+.line:nth-child(25) {
+  transform: rotateX(5deg);
+}
+.line:nth-child(25) .rotate {
+  -webkit-animation-delay: -4547ms;
+          animation-delay: -4547ms;
+  -webkit-animation-duration: 5515ms;
+          animation-duration: 5515ms;
+}
+.line:nth-child(25) .graphic {
+  -webkit-animation: rotateX 5428ms -1392ms linear infinite;
+          animation: rotateX 5428ms -1392ms linear infinite;
+}
+.line:nth-child(26) {
+  transform: rotateX(6deg);
+}
+.line:nth-child(26) .rotate {
+  -webkit-animation-delay: -8264ms;
+          animation-delay: -8264ms;
+  -webkit-animation-duration: 6528ms;
+          animation-duration: 6528ms;
+}
+.line:nth-child(26) .graphic {
+  -webkit-animation: rotateX 4791ms -1093ms linear infinite;
+          animation: rotateX 4791ms -1093ms linear infinite;
+}
+.line:nth-child(27) {
+  transform: rotateX(7deg);
+}
+.line:nth-child(27) .rotate {
+  -webkit-animation-delay: -5437ms;
+          animation-delay: -5437ms;
+  -webkit-animation-duration: 7696ms;
+          animation-duration: 7696ms;
+}
+.line:nth-child(27) .graphic {
+  -webkit-animation: rotateX 3332ms -5697ms linear infinite;
+          animation: rotateX 3332ms -5697ms linear infinite;
+}
+.line:nth-child(28) {
+  transform: rotateX(8deg);
+}
+.line:nth-child(28) .rotate {
+  -webkit-animation-delay: -9521ms;
+          animation-delay: -9521ms;
+  -webkit-animation-duration: 7447ms;
+          animation-duration: 7447ms;
+}
+.line:nth-child(28) .graphic {
+  -webkit-animation: rotateX 3274ms -3800ms linear infinite;
+          animation: rotateX 3274ms -3800ms linear infinite;
+}
+.line:nth-child(29) {
+  transform: rotateX(9deg);
+}
+.line:nth-child(29) .rotate {
+  -webkit-animation-delay: -7331ms;
+          animation-delay: -7331ms;
+  -webkit-animation-duration: 7255ms;
+          animation-duration: 7255ms;
+}
+.line:nth-child(29) .graphic {
+  -webkit-animation: rotateX 5293ms -5522ms linear infinite;
+          animation: rotateX 5293ms -5522ms linear infinite;
+}
+.line:nth-child(30) {
+  transform: rotateX(10deg);
+}
+.line:nth-child(30) .rotate {
+  -webkit-animation-delay: -6745ms;
+          animation-delay: -6745ms;
+  -webkit-animation-duration: 6943ms;
+          animation-duration: 6943ms;
+}
+.line:nth-child(30) .graphic {
+  -webkit-animation: rotateX 3068ms -5839ms linear infinite;
+          animation: rotateX 3068ms -5839ms linear infinite;
+}
+.line:nth-child(31) {
+  transform: rotateX(11deg);
+}
+.line:nth-child(31) .rotate {
+  -webkit-animation-delay: -6734ms;
+          animation-delay: -6734ms;
+  -webkit-animation-duration: 7355ms;
+          animation-duration: 7355ms;
+}
+.line:nth-child(31) .graphic {
+  -webkit-animation: rotateX 4523ms -4920ms linear infinite;
+          animation: rotateX 4523ms -4920ms linear infinite;
+}
+.line:nth-child(32) {
+  transform: rotateX(12deg);
+}
+.line:nth-child(32) .rotate {
+  -webkit-animation-delay: -5272ms;
+          animation-delay: -5272ms;
+  -webkit-animation-duration: 5267ms;
+          animation-duration: 5267ms;
+}
+.line:nth-child(32) .graphic {
+  -webkit-animation: rotateX 3752ms -4589ms linear infinite;
+          animation: rotateX 3752ms -4589ms linear infinite;
+}
+.line:nth-child(33) {
+  transform: rotateX(13deg);
+}
+.line:nth-child(33) .rotate {
+  -webkit-animation-delay: -8525ms;
+          animation-delay: -8525ms;
+  -webkit-animation-duration: 6758ms;
+          animation-duration: 6758ms;
+}
+.line:nth-child(33) .graphic {
+  -webkit-animation: rotateX 3087ms -3501ms linear infinite;
+          animation: rotateX 3087ms -3501ms linear infinite;
+}
+.line:nth-child(34) {
+  transform: rotateX(14deg);
+}
+.line:nth-child(34) .rotate {
+  -webkit-animation-delay: -1389ms;
+          animation-delay: -1389ms;
+  -webkit-animation-duration: 7821ms;
+          animation-duration: 7821ms;
+}
+.line:nth-child(34) .graphic {
+  -webkit-animation: rotateX 4568ms -3331ms linear infinite;
+          animation: rotateX 4568ms -3331ms linear infinite;
+}
+.line:nth-child(35) {
+  transform: rotateX(15deg);
+}
+.line:nth-child(35) .rotate {
+  -webkit-animation-delay: -3835ms;
+          animation-delay: -3835ms;
+  -webkit-animation-duration: 7095ms;
+          animation-duration: 7095ms;
+}
+.line:nth-child(35) .graphic {
+  -webkit-animation: rotateX 5840ms -4134ms linear infinite;
+          animation: rotateX 5840ms -4134ms linear infinite;
+}
+.line:nth-child(36) {
+  transform: rotateX(16deg);
+}
+.line:nth-child(36) .rotate {
+  -webkit-animation-delay: -1596ms;
+          animation-delay: -1596ms;
+  -webkit-animation-duration: 5780ms;
+          animation-duration: 5780ms;
+}
+.line:nth-child(36) .graphic {
+  -webkit-animation: rotateX 4736ms -281ms linear infinite;
+          animation: rotateX 4736ms -281ms linear infinite;
+}
+.line:nth-child(37) {
+  transform: rotateX(17deg);
+}
+.line:nth-child(37) .rotate {
+  -webkit-animation-delay: -2166ms;
+          animation-delay: -2166ms;
+  -webkit-animation-duration: 6770ms;
+          animation-duration: 6770ms;
+}
+.line:nth-child(37) .graphic {
+  -webkit-animation: rotateX 3879ms -5516ms linear infinite;
+          animation: rotateX 3879ms -5516ms linear infinite;
+}
+.line:nth-child(38) {
+  transform: rotateX(18deg);
+}
+.line:nth-child(38) .rotate {
+  -webkit-animation-delay: -7572ms;
+          animation-delay: -7572ms;
+  -webkit-animation-duration: 5008ms;
+          animation-duration: 5008ms;
+}
+.line:nth-child(38) .graphic {
+  -webkit-animation: rotateX 5891ms -5324ms linear infinite;
+          animation: rotateX 5891ms -5324ms linear infinite;
+}
+.line:nth-child(39) {
+  transform: rotateX(19deg);
+}
+.line:nth-child(39) .rotate {
+  -webkit-animation-delay: -2898ms;
+          animation-delay: -2898ms;
+  -webkit-animation-duration: 6708ms;
+          animation-duration: 6708ms;
+}
+.line:nth-child(39) .graphic {
+  -webkit-animation: rotateX 3851ms -2520ms linear infinite;
+          animation: rotateX 3851ms -2520ms linear infinite;
+}
+.line:nth-child(40) {
+  transform: rotateX(20deg);
+}
+.line:nth-child(40) .rotate {
+  -webkit-animation-delay: -1443ms;
+          animation-delay: -1443ms;
+  -webkit-animation-duration: 5744ms;
+          animation-duration: 5744ms;
+}
+.line:nth-child(40) .graphic {
+  -webkit-animation: rotateX 5594ms -748ms linear infinite;
+          animation: rotateX 5594ms -748ms linear infinite;
+}
+.line:nth-child(41) {
+  transform: rotateX(21deg);
+}
+.line:nth-child(41) .rotate {
+  -webkit-animation-delay: -1173ms;
+          animation-delay: -1173ms;
+  -webkit-animation-duration: 5187ms;
+          animation-duration: 5187ms;
+}
+.line:nth-child(41) .graphic {
+  -webkit-animation: rotateX 4489ms -771ms linear infinite;
+          animation: rotateX 4489ms -771ms linear infinite;
+}
+.line:nth-child(42) {
+  transform: rotateX(22deg);
+}
+.line:nth-child(42) .rotate {
+  -webkit-animation-delay: -9739ms;
+          animation-delay: -9739ms;
+  -webkit-animation-duration: 6866ms;
+          animation-duration: 6866ms;
+}
+.line:nth-child(42) .graphic {
+  -webkit-animation: rotateX 5290ms -4920ms linear infinite;
+          animation: rotateX 5290ms -4920ms linear infinite;
+}
+.line:nth-child(43) {
+  transform: rotateX(23deg);
+}
+.line:nth-child(43) .rotate {
+  -webkit-animation-delay: -6042ms;
+          animation-delay: -6042ms;
+  -webkit-animation-duration: 6738ms;
+          animation-duration: 6738ms;
+}
+.line:nth-child(43) .graphic {
+  -webkit-animation: rotateX 3832ms -5269ms linear infinite;
+          animation: rotateX 3832ms -5269ms linear infinite;
+}
+.line:nth-child(44) {
+  transform: rotateX(24deg);
+}
+.line:nth-child(44) .rotate {
+  -webkit-animation-delay: -2374ms;
+          animation-delay: -2374ms;
+  -webkit-animation-duration: 6122ms;
+          animation-duration: 6122ms;
+}
+.line:nth-child(44) .graphic {
+  -webkit-animation: rotateX 3811ms -394ms linear infinite;
+          animation: rotateX 3811ms -394ms linear infinite;
+}
+.line:nth-child(45) {
+  transform: rotateX(25deg);
+}
+.line:nth-child(45) .rotate {
+  -webkit-animation-delay: -3221ms;
+          animation-delay: -3221ms;
+  -webkit-animation-duration: 7741ms;
+          animation-duration: 7741ms;
+}
+.line:nth-child(45) .graphic {
+  -webkit-animation: rotateX 5240ms -5861ms linear infinite;
+          animation: rotateX 5240ms -5861ms linear infinite;
+}
+.line:nth-child(46) {
+  transform: rotateX(26deg);
+}
+.line:nth-child(46) .rotate {
+  -webkit-animation-delay: -3364ms;
+          animation-delay: -3364ms;
+  -webkit-animation-duration: 7337ms;
+          animation-duration: 7337ms;
+}
+.line:nth-child(46) .graphic {
+  -webkit-animation: rotateX 5549ms -5975ms linear infinite;
+          animation: rotateX 5549ms -5975ms linear infinite;
+}
+.line:nth-child(47) {
+  transform: rotateX(27deg);
+}
+.line:nth-child(47) .rotate {
+  -webkit-animation-delay: -1801ms;
+          animation-delay: -1801ms;
+  -webkit-animation-duration: 7171ms;
+          animation-duration: 7171ms;
+}
+.line:nth-child(47) .graphic {
+  -webkit-animation: rotateX 5952ms -4519ms linear infinite;
+          animation: rotateX 5952ms -4519ms linear infinite;
+}
+.line:nth-child(48) {
+  transform: rotateX(28deg);
+}
+.line:nth-child(48) .rotate {
+  -webkit-animation-delay: -3183ms;
+          animation-delay: -3183ms;
+  -webkit-animation-duration: 5415ms;
+          animation-duration: 5415ms;
+}
+.line:nth-child(48) .graphic {
+  -webkit-animation: rotateX 4658ms -5461ms linear infinite;
+          animation: rotateX 4658ms -5461ms linear infinite;
+}
+.line:nth-child(49) {
+  transform: rotateX(29deg);
+}
+.line:nth-child(49) .rotate {
+  -webkit-animation-delay: -6589ms;
+          animation-delay: -6589ms;
+  -webkit-animation-duration: 7516ms;
+          animation-duration: 7516ms;
+}
+.line:nth-child(49) .graphic {
+  -webkit-animation: rotateX 5406ms -2672ms linear infinite;
+          animation: rotateX 5406ms -2672ms linear infinite;
+}
+.line:nth-child(50) {
+  transform: rotateX(30deg);
+}
+.line:nth-child(50) .rotate {
+  -webkit-animation-delay: -1177ms;
+          animation-delay: -1177ms;
+  -webkit-animation-duration: 6015ms;
+          animation-duration: 6015ms;
+}
+.line:nth-child(50) .graphic {
+  -webkit-animation: rotateX 5330ms -1815ms linear infinite;
+          animation: rotateX 5330ms -1815ms linear infinite;
+}
+
+.rotate {
+  -webkit-animation: rotateY 5000ms linear infinite;
+          animation: rotateY 5000ms linear infinite;
+}
+
+.particle {
+  width: 1px;
+  height: 1px;
+  background: #fff;
+}
+.particle:nth-child(1) {
+  transform: translate3d(-224.25px, 70.5px, -265px) rotateY(360deg);
+  -webkit-animation: flash 300ms -7953ms infinite alternate;
+          animation: flash 300ms -7953ms infinite alternate;
+}
+.particle:nth-child(2) {
+  transform: translate3d(-84.75px, 61px, 100px) rotateY(2deg);
+  -webkit-animation: flash 300ms -891ms infinite alternate;
+          animation: flash 300ms -891ms infinite alternate;
+}
+.particle:nth-child(3) {
+  transform: translate3d(184px, 203px, 275px) rotateY(12deg);
+  -webkit-animation: flash 300ms -85ms infinite alternate;
+          animation: flash 300ms -85ms infinite alternate;
+}
+.particle:nth-child(4) {
+  transform: translate3d(25px, -73.5px, -93px) rotateY(215deg);
+  -webkit-animation: flash 300ms -2519ms infinite alternate;
+          animation: flash 300ms -2519ms infinite alternate;
+}
+.particle:nth-child(5) {
+  transform: translate3d(-393.5px, -89.75px, -380.25px) rotateY(331deg);
+  -webkit-animation: flash 300ms -940ms infinite alternate;
+          animation: flash 300ms -940ms infinite alternate;
+}
+.particle:nth-child(6) {
+  transform: translate3d(-629px, 289.5px, 21px) rotateY(230deg);
+  -webkit-animation: flash 300ms -3068ms infinite alternate;
+          animation: flash 300ms -3068ms infinite alternate;
+}
+.particle:nth-child(7) {
+  transform: translate3d(132.5px, -51.75px, -564px) rotateY(121deg);
+  -webkit-animation: flash 300ms -7317ms infinite alternate;
+          animation: flash 300ms -7317ms infinite alternate;
+}
+.particle:nth-child(8) {
+  transform: translate3d(-405.75px, -286px, 213px) rotateY(104deg);
+  -webkit-animation: flash 300ms -6676ms infinite alternate;
+          animation: flash 300ms -6676ms infinite alternate;
+}
+.particle:nth-child(9) {
+  transform: translate3d(228px, 19.75px, -433.25px) rotateY(170deg);
+  -webkit-animation: flash 300ms -7747ms infinite alternate;
+          animation: flash 300ms -7747ms infinite alternate;
+}
+.particle:nth-child(10) {
+  transform: translate3d(-55.5px, -32.75px, 367px) rotateY(20deg);
+  -webkit-animation: flash 300ms -3360ms infinite alternate;
+          animation: flash 300ms -3360ms infinite alternate;
+}
+.particle:nth-child(11) {
+  transform: translate3d(-151.75px, 271.5px, 60px) rotateY(157deg);
+  -webkit-animation: flash 300ms -221ms infinite alternate;
+          animation: flash 300ms -221ms infinite alternate;
+}
+.particle:nth-child(12) {
+  transform: translate3d(418.75px, -297.25px, 499px) rotateY(81deg);
+  -webkit-animation: flash 300ms -990ms infinite alternate;
+          animation: flash 300ms -990ms infinite alternate;
+}
+.particle:nth-child(13) {
+  transform: translate3d(364.5px, -519.25px, -115.75px) rotateY(188deg);
+  -webkit-animation: flash 300ms -9493ms infinite alternate;
+          animation: flash 300ms -9493ms infinite alternate;
+}
+.particle:nth-child(14) {
+  transform: translate3d(-220px, 215.5px, 103px) rotateY(248deg);
+  -webkit-animation: flash 300ms -7926ms infinite alternate;
+          animation: flash 300ms -7926ms infinite alternate;
+}
+.particle:nth-child(15) {
+  transform: translate3d(8px, 65.75px, 540px) rotateY(316deg);
+  -webkit-animation: flash 300ms -2766ms infinite alternate;
+          animation: flash 300ms -2766ms infinite alternate;
+}
+.particle:nth-child(16) {
+  transform: translate3d(198.75px, 156px, 442px) rotateY(264deg);
+  -webkit-animation: flash 300ms -8166ms infinite alternate;
+          animation: flash 300ms -8166ms infinite alternate;
+}
+.particle:nth-child(17) {
+  transform: translate3d(188.75px, -236.75px, 322.5px) rotateY(275deg);
+  -webkit-animation: flash 300ms -4734ms infinite alternate;
+          animation: flash 300ms -4734ms infinite alternate;
+}
+.particle:nth-child(18) {
+  transform: translate3d(356px, 286.75px, 217.75px) rotateY(41deg);
+  -webkit-animation: flash 300ms -2895ms infinite alternate;
+          animation: flash 300ms -2895ms infinite alternate;
+}
+.particle:nth-child(19) {
+  transform: translate3d(-8.75px, -408.25px, -769.5px) rotateY(213deg);
+  -webkit-animation: flash 300ms -7056ms infinite alternate;
+          animation: flash 300ms -7056ms infinite alternate;
+}
+.particle:nth-child(20) {
+  transform: translate3d(-142.25px, -135.75px, 294.25px) rotateY(37deg);
+  -webkit-animation: flash 300ms -674ms infinite alternate;
+          animation: flash 300ms -674ms infinite alternate;
+}
+.particle:nth-child(21) {
+  transform: translate3d(416.5px, 426.5px, 64.5px) rotateY(3deg);
+  -webkit-animation: flash 300ms -5785ms infinite alternate;
+          animation: flash 300ms -5785ms infinite alternate;
+}
+.particle:nth-child(22) {
+  transform: translate3d(-133.25px, 556px, -27.5px) rotateY(174deg);
+  -webkit-animation: flash 300ms -9694ms infinite alternate;
+          animation: flash 300ms -9694ms infinite alternate;
+}
+.particle:nth-child(23) {
+  transform: translate3d(89.25px, 531.25px, -186.25px) rotateY(247deg);
+  -webkit-animation: flash 300ms -7248ms infinite alternate;
+          animation: flash 300ms -7248ms infinite alternate;
+}
+.particle:nth-child(24) {
+  transform: translate3d(-636.5px, -333.75px, 3.5px) rotateY(100deg);
+  -webkit-animation: flash 300ms -4734ms infinite alternate;
+          animation: flash 300ms -4734ms infinite alternate;
+}
+.particle:nth-child(25) {
+  transform: translate3d(-272.5px, -403.75px, -373px) rotateY(226deg);
+  -webkit-animation: flash 300ms -5616ms infinite alternate;
+          animation: flash 300ms -5616ms infinite alternate;
+}
+.particle:nth-child(26) {
+  transform: translate3d(0px, -44.25px, 17.75px) rotateY(195deg);
+  -webkit-animation: flash 300ms -1047ms infinite alternate;
+          animation: flash 300ms -1047ms infinite alternate;
+}
+.particle:nth-child(27) {
+  transform: translate3d(36.25px, 1px, 27.75px) rotateY(197deg);
+  -webkit-animation: flash 300ms -8327ms infinite alternate;
+          animation: flash 300ms -8327ms infinite alternate;
+}
+.particle:nth-child(28) {
+  transform: translate3d(-41px, 367px, 453.75px) rotateY(250deg);
+  -webkit-animation: flash 300ms -1835ms infinite alternate;
+          animation: flash 300ms -1835ms infinite alternate;
+}
+.particle:nth-child(29) {
+  transform: translate3d(142.75px, 212.25px, 234.5px) rotateY(312deg);
+  -webkit-animation: flash 300ms -4033ms infinite alternate;
+          animation: flash 300ms -4033ms infinite alternate;
+}
+.particle:nth-child(30) {
+  transform: translate3d(345.75px, -13.25px, -204.25px) rotateY(125deg);
+  -webkit-animation: flash 300ms -1845ms infinite alternate;
+          animation: flash 300ms -1845ms infinite alternate;
+}
+.particle:nth-child(31) {
+  transform: translate3d(111px, -33.75px, -323px) rotateY(185deg);
+  -webkit-animation: flash 300ms -4506ms infinite alternate;
+          animation: flash 300ms -4506ms infinite alternate;
+}
+.particle:nth-child(32) {
+  transform: translate3d(-67.25px, 265.25px, -272.25px) rotateY(70deg);
+  -webkit-animation: flash 300ms -5189ms infinite alternate;
+          animation: flash 300ms -5189ms infinite alternate;
+}
+.particle:nth-child(33) {
+  transform: translate3d(-332.25px, -67.75px, 81.25px) rotateY(186deg);
+  -webkit-animation: flash 300ms -3805ms infinite alternate;
+          animation: flash 300ms -3805ms infinite alternate;
+}
+.particle:nth-child(34) {
+  transform: translate3d(110.75px, 385.25px, -335.25px) rotateY(12deg);
+  -webkit-animation: flash 300ms -9459ms infinite alternate;
+          animation: flash 300ms -9459ms infinite alternate;
+}
+.particle:nth-child(35) {
+  transform: translate3d(367px, 659px, -289.5px) rotateY(212deg);
+  -webkit-animation: flash 300ms -8755ms infinite alternate;
+          animation: flash 300ms -8755ms infinite alternate;
+}
+.particle:nth-child(36) {
+  transform: translate3d(-4.25px, 44.5px, 207px) rotateY(283deg);
+  -webkit-animation: flash 300ms -2895ms infinite alternate;
+          animation: flash 300ms -2895ms infinite alternate;
+}
+.particle:nth-child(37) {
+  transform: translate3d(224.25px, -382.5px, -18.5px) rotateY(356deg);
+  -webkit-animation: flash 300ms -6727ms infinite alternate;
+          animation: flash 300ms -6727ms infinite alternate;
+}
+.particle:nth-child(38) {
+  transform: translate3d(-35px, -343.5px, 412.75px) rotateY(104deg);
+  -webkit-animation: flash 300ms -5980ms infinite alternate;
+          animation: flash 300ms -5980ms infinite alternate;
+}
+.particle:nth-child(39) {
+  transform: translate3d(355.5px, 193px, -120.75px) rotateY(93deg);
+  -webkit-animation: flash 300ms -6785ms infinite alternate;
+          animation: flash 300ms -6785ms infinite alternate;
+}
+.particle:nth-child(40) {
+  transform: translate3d(-463px, 16.25px, 236.75px) rotateY(88deg);
+  -webkit-animation: flash 300ms -6378ms infinite alternate;
+          animation: flash 300ms -6378ms infinite alternate;
+}
+.particle:nth-child(41) {
+  transform: translate3d(-108.25px, 233px, -309.25px) rotateY(250deg);
+  -webkit-animation: flash 300ms -1943ms infinite alternate;
+          animation: flash 300ms -1943ms infinite alternate;
+}
+.particle:nth-child(42) {
+  transform: translate3d(185.5px, -268.5px, -52.25px) rotateY(22deg);
+  -webkit-animation: flash 300ms -4708ms infinite alternate;
+          animation: flash 300ms -4708ms infinite alternate;
+}
+.particle:nth-child(43) {
+  transform: translate3d(128.5px, -461.5px, 137px) rotateY(76deg);
+  -webkit-animation: flash 300ms -2763ms infinite alternate;
+          animation: flash 300ms -2763ms infinite alternate;
+}
+.particle:nth-child(44) {
+  transform: translate3d(345px, -266.5px, -576.75px) rotateY(74deg);
+  -webkit-animation: flash 300ms -2606ms infinite alternate;
+          animation: flash 300ms -2606ms infinite alternate;
+}
+.particle:nth-child(45) {
+  transform: translate3d(185.25px, -225.75px, -1.5px) rotateY(284deg);
+  -webkit-animation: flash 300ms -5447ms infinite alternate;
+          animation: flash 300ms -5447ms infinite alternate;
+}
+.particle:nth-child(46) {
+  transform: translate3d(83.75px, -13px, 315.25px) rotateY(190deg);
+  -webkit-animation: flash 300ms -9732ms infinite alternate;
+          animation: flash 300ms -9732ms infinite alternate;
+}
+.particle:nth-child(47) {
+  transform: translate3d(-245.25px, -265px, 502px) rotateY(152deg);
+  -webkit-animation: flash 300ms -906ms infinite alternate;
+          animation: flash 300ms -906ms infinite alternate;
+}
+.particle:nth-child(48) {
+  transform: translate3d(26.75px, 38.25px, 176.75px) rotateY(79deg);
+  -webkit-animation: flash 300ms -5860ms infinite alternate;
+          animation: flash 300ms -5860ms infinite alternate;
+}
+.particle:nth-child(49) {
+  transform: translate3d(41.75px, -623.75px, 456.75px) rotateY(101deg);
+  -webkit-animation: flash 300ms -9775ms infinite alternate;
+          animation: flash 300ms -9775ms infinite alternate;
+}
+.particle:nth-child(50) {
+  transform: translate3d(-48.25px, 542.75px, 130.25px) rotateY(91deg);
+  -webkit-animation: flash 300ms -7637ms infinite alternate;
+          animation: flash 300ms -7637ms infinite alternate;
+}
+.particle:nth-child(51) {
+  transform: translate3d(416px, -164.75px, -173.25px) rotateY(16deg);
+  -webkit-animation: flash 300ms -2800ms infinite alternate;
+          animation: flash 300ms -2800ms infinite alternate;
+}
+.particle:nth-child(52) {
+  transform: translate3d(277.5px, -153.5px, -27.5px) rotateY(186deg);
+  -webkit-animation: flash 300ms -2366ms infinite alternate;
+          animation: flash 300ms -2366ms infinite alternate;
+}
+.particle:nth-child(53) {
+  transform: translate3d(347.75px, -12.25px, 426.25px) rotateY(211deg);
+  -webkit-animation: flash 300ms -5985ms infinite alternate;
+          animation: flash 300ms -5985ms infinite alternate;
+}
+.particle:nth-child(54) {
+  transform: translate3d(-149.25px, -180.75px, -159px) rotateY(226deg);
+  -webkit-animation: flash 300ms -7622ms infinite alternate;
+          animation: flash 300ms -7622ms infinite alternate;
+}
+.particle:nth-child(55) {
+  transform: translate3d(197.25px, 209.25px, -85.25px) rotateY(51deg);
+  -webkit-animation: flash 300ms -5910ms infinite alternate;
+          animation: flash 300ms -5910ms infinite alternate;
+}
+.particle:nth-child(56) {
+  transform: translate3d(-98.5px, -692.25px, 415.5px) rotateY(261deg);
+  -webkit-animation: flash 300ms -7558ms infinite alternate;
+          animation: flash 300ms -7558ms infinite alternate;
+}
+.particle:nth-child(57) {
+  transform: translate3d(-127.5px, 99px, 449.25px) rotateY(303deg);
+  -webkit-animation: flash 300ms -3437ms infinite alternate;
+          animation: flash 300ms -3437ms infinite alternate;
+}
+.particle:nth-child(58) {
+  transform: translate3d(-165px, 22.5px, 296px) rotateY(321deg);
+  -webkit-animation: flash 300ms -2645ms infinite alternate;
+          animation: flash 300ms -2645ms infinite alternate;
+}
+.particle:nth-child(59) {
+  transform: translate3d(114.25px, -26.75px, 307.5px) rotateY(265deg);
+  -webkit-animation: flash 300ms -655ms infinite alternate;
+          animation: flash 300ms -655ms infinite alternate;
+}
+.particle:nth-child(60) {
+  transform: translate3d(151px, 305.5px, 33.25px) rotateY(288deg);
+  -webkit-animation: flash 300ms -9691ms infinite alternate;
+          animation: flash 300ms -9691ms infinite alternate;
+}
+.particle:nth-child(61) {
+  transform: translate3d(111.5px, -371.5px, -314.25px) rotateY(26deg);
+  -webkit-animation: flash 300ms -3497ms infinite alternate;
+          animation: flash 300ms -3497ms infinite alternate;
+}
+.particle:nth-child(62) {
+  transform: translate3d(-406.5px, -96.75px, -51px) rotateY(45deg);
+  -webkit-animation: flash 300ms -3371ms infinite alternate;
+          animation: flash 300ms -3371ms infinite alternate;
+}
+.particle:nth-child(63) {
+  transform: translate3d(-182.75px, 269px, -300px) rotateY(15deg);
+  -webkit-animation: flash 300ms -6010ms infinite alternate;
+          animation: flash 300ms -6010ms infinite alternate;
+}
+.particle:nth-child(64) {
+  transform: translate3d(-87.5px, 406px, 377.25px) rotateY(30deg);
+  -webkit-animation: flash 300ms -4576ms infinite alternate;
+          animation: flash 300ms -4576ms infinite alternate;
+}
+.particle:nth-child(65) {
+  transform: translate3d(-281.5px, -10.5px, 385.25px) rotateY(163deg);
+  -webkit-animation: flash 300ms -9689ms infinite alternate;
+          animation: flash 300ms -9689ms infinite alternate;
+}
+.particle:nth-child(66) {
+  transform: translate3d(178px, 318.75px, 327.75px) rotateY(306deg);
+  -webkit-animation: flash 300ms -3088ms infinite alternate;
+          animation: flash 300ms -3088ms infinite alternate;
+}
+.particle:nth-child(67) {
+  transform: translate3d(-68px, 179.25px, -407px) rotateY(272deg);
+  -webkit-animation: flash 300ms -2598ms infinite alternate;
+          animation: flash 300ms -2598ms infinite alternate;
+}
+.particle:nth-child(68) {
+  transform: translate3d(-293.5px, -526px, 58.75px) rotateY(62deg);
+  -webkit-animation: flash 300ms -5005ms infinite alternate;
+          animation: flash 300ms -5005ms infinite alternate;
+}
+.particle:nth-child(69) {
+  transform: translate3d(-2.25px, -77.25px, -138px) rotateY(116deg);
+  -webkit-animation: flash 300ms -8559ms infinite alternate;
+          animation: flash 300ms -8559ms infinite alternate;
+}
+.particle:nth-child(70) {
+  transform: translate3d(-432.25px, 327px, -79.75px) rotateY(303deg);
+  -webkit-animation: flash 300ms -2892ms infinite alternate;
+          animation: flash 300ms -2892ms infinite alternate;
+}
+.particle:nth-child(71) {
+  transform: translate3d(196.25px, -471px, 410.5px) rotateY(331deg);
+  -webkit-animation: flash 300ms -5315ms infinite alternate;
+          animation: flash 300ms -5315ms infinite alternate;
+}
+.particle:nth-child(72) {
+  transform: translate3d(-46.75px, -119.5px, 39.5px) rotateY(299deg);
+  -webkit-animation: flash 300ms -9254ms infinite alternate;
+          animation: flash 300ms -9254ms infinite alternate;
+}
+.particle:nth-child(73) {
+  transform: translate3d(182.25px, -99.75px, -189.25px) rotateY(141deg);
+  -webkit-animation: flash 300ms -3948ms infinite alternate;
+          animation: flash 300ms -3948ms infinite alternate;
+}
+.particle:nth-child(74) {
+  transform: translate3d(246.25px, 232.5px, -589.5px) rotateY(85deg);
+  -webkit-animation: flash 300ms -5584ms infinite alternate;
+          animation: flash 300ms -5584ms infinite alternate;
+}
+.particle:nth-child(75) {
+  transform: translate3d(173.75px, -196.5px, -242px) rotateY(262deg);
+  -webkit-animation: flash 300ms -2521ms infinite alternate;
+          animation: flash 300ms -2521ms infinite alternate;
+}
+.particle:nth-child(76) {
+  transform: translate3d(-381px, 199.25px, 12.75px) rotateY(279deg);
+  -webkit-animation: flash 300ms -3725ms infinite alternate;
+          animation: flash 300ms -3725ms infinite alternate;
+}
+.particle:nth-child(77) {
+  transform: translate3d(117.5px, 191.75px, -273.5px) rotateY(331deg);
+  -webkit-animation: flash 300ms -2613ms infinite alternate;
+          animation: flash 300ms -2613ms infinite alternate;
+}
+.particle:nth-child(78) {
+  transform: translate3d(243.5px, -126.75px, -15.75px) rotateY(83deg);
+  -webkit-animation: flash 300ms -7205ms infinite alternate;
+          animation: flash 300ms -7205ms infinite alternate;
+}
+.particle:nth-child(79) {
+  transform: translate3d(290.75px, -230.5px, -195.25px) rotateY(353deg);
+  -webkit-animation: flash 300ms -2169ms infinite alternate;
+          animation: flash 300ms -2169ms infinite alternate;
+}
+.particle:nth-child(80) {
+  transform: translate3d(205.25px, 83px, -45px) rotateY(123deg);
+  -webkit-animation: flash 300ms -4446ms infinite alternate;
+          animation: flash 300ms -4446ms infinite alternate;
+}
+.particle:nth-child(81) {
+  transform: translate3d(-44.25px, -382.25px, 200.75px) rotateY(39deg);
+  -webkit-animation: flash 300ms -8304ms infinite alternate;
+          animation: flash 300ms -8304ms infinite alternate;
+}
+.particle:nth-child(82) {
+  transform: translate3d(-243.25px, 98.5px, -325.25px) rotateY(13deg);
+  -webkit-animation: flash 300ms -6338ms infinite alternate;
+          animation: flash 300ms -6338ms infinite alternate;
+}
+.particle:nth-child(83) {
+  transform: translate3d(-243px, 222.5px, -309.5px) rotateY(99deg);
+  -webkit-animation: flash 300ms -985ms infinite alternate;
+          animation: flash 300ms -985ms infinite alternate;
+}
+.particle:nth-child(84) {
+  transform: translate3d(-43.75px, -398.25px, 270.25px) rotateY(46deg);
+  -webkit-animation: flash 300ms -9083ms infinite alternate;
+          animation: flash 300ms -9083ms infinite alternate;
+}
+.particle:nth-child(85) {
+  transform: translate3d(333px, -184px, -397px) rotateY(350deg);
+  -webkit-animation: flash 300ms -233ms infinite alternate;
+          animation: flash 300ms -233ms infinite alternate;
+}
+.particle:nth-child(86) {
+  transform: translate3d(478.75px, 165.25px, 206.25px) rotateY(160deg);
+  -webkit-animation: flash 300ms -3372ms infinite alternate;
+          animation: flash 300ms -3372ms infinite alternate;
+}
+.particle:nth-child(87) {
+  transform: translate3d(243.25px, 289.25px, -64.25px) rotateY(53deg);
+  -webkit-animation: flash 300ms -346ms infinite alternate;
+          animation: flash 300ms -346ms infinite alternate;
+}
+.particle:nth-child(88) {
+  transform: translate3d(-125.75px, -255.5px, -548.25px) rotateY(219deg);
+  -webkit-animation: flash 300ms -5750ms infinite alternate;
+          animation: flash 300ms -5750ms infinite alternate;
+}
+.particle:nth-child(89) {
+  transform: translate3d(168px, -195.75px, 119.5px) rotateY(9deg);
+  -webkit-animation: flash 300ms -1355ms infinite alternate;
+          animation: flash 300ms -1355ms infinite alternate;
+}
+.particle:nth-child(90) {
+  transform: translate3d(-136.75px, -224.5px, 114px) rotateY(263deg);
+  -webkit-animation: flash 300ms -5164ms infinite alternate;
+          animation: flash 300ms -5164ms infinite alternate;
+}
+.particle:nth-child(91) {
+  transform: translate3d(-52.25px, -152.5px, 198.5px) rotateY(11deg);
+  -webkit-animation: flash 300ms -9533ms infinite alternate;
+          animation: flash 300ms -9533ms infinite alternate;
+}
+.particle:nth-child(92) {
+  transform: translate3d(170.25px, -376px, 157.75px) rotateY(181deg);
+  -webkit-animation: flash 300ms -4595ms infinite alternate;
+          animation: flash 300ms -4595ms infinite alternate;
+}
+.particle:nth-child(93) {
+  transform: translate3d(-272px, -207.75px, -576px) rotateY(312deg);
+  -webkit-animation: flash 300ms -3404ms infinite alternate;
+          animation: flash 300ms -3404ms infinite alternate;
+}
+.particle:nth-child(94) {
+  transform: translate3d(-58.25px, 322.25px, -30.5px) rotateY(331deg);
+  -webkit-animation: flash 300ms -5714ms infinite alternate;
+          animation: flash 300ms -5714ms infinite alternate;
+}
+.particle:nth-child(95) {
+  transform: translate3d(-150px, -490.5px, 323px) rotateY(167deg);
+  -webkit-animation: flash 300ms -7090ms infinite alternate;
+          animation: flash 300ms -7090ms infinite alternate;
+}
+.particle:nth-child(96) {
+  transform: translate3d(100.25px, 193.25px, 447.75px) rotateY(33deg);
+  -webkit-animation: flash 300ms -1259ms infinite alternate;
+          animation: flash 300ms -1259ms infinite alternate;
+}
+.particle:nth-child(97) {
+  transform: translate3d(-106.5px, -189px, 140.5px) rotateY(157deg);
+  -webkit-animation: flash 300ms -3925ms infinite alternate;
+          animation: flash 300ms -3925ms infinite alternate;
+}
+.particle:nth-child(98) {
+  transform: translate3d(-73.25px, 309.5px, -521.5px) rotateY(360deg);
+  -webkit-animation: flash 300ms -4002ms infinite alternate;
+          animation: flash 300ms -4002ms infinite alternate;
+}
+.particle:nth-child(99) {
+  transform: translate3d(-64.5px, -97.5px, -336.25px) rotateY(153deg);
+  -webkit-animation: flash 300ms -6835ms infinite alternate;
+          animation: flash 300ms -6835ms infinite alternate;
+}
+.particle:nth-child(100) {
+  transform: translate3d(390.75px, 35.5px, -176.75px) rotateY(251deg);
+  -webkit-animation: flash 300ms -5619ms infinite alternate;
+          animation: flash 300ms -5619ms infinite alternate;
+}
+.particle:nth-child(101) {
+  transform: translate3d(266.25px, -91px, -301.75px) rotateY(166deg);
+  -webkit-animation: flash 300ms -2614ms infinite alternate;
+          animation: flash 300ms -2614ms infinite alternate;
+}
+.particle:nth-child(102) {
+  transform: translate3d(180.25px, -486.75px, -109px) rotateY(76deg);
+  -webkit-animation: flash 300ms -5081ms infinite alternate;
+          animation: flash 300ms -5081ms infinite alternate;
+}
+.particle:nth-child(103) {
+  transform: translate3d(3.5px, 422px, -74.25px) rotateY(123deg);
+  -webkit-animation: flash 300ms -265ms infinite alternate;
+          animation: flash 300ms -265ms infinite alternate;
+}
+.particle:nth-child(104) {
+  transform: translate3d(-481.75px, -172.5px, -340px) rotateY(218deg);
+  -webkit-animation: flash 300ms -361ms infinite alternate;
+          animation: flash 300ms -361ms infinite alternate;
+}
+.particle:nth-child(105) {
+  transform: translate3d(90px, 139.5px, -92.75px) rotateY(200deg);
+  -webkit-animation: flash 300ms -3271ms infinite alternate;
+          animation: flash 300ms -3271ms infinite alternate;
+}
+.particle:nth-child(106) {
+  transform: translate3d(28.75px, 166.5px, 4.25px) rotateY(184deg);
+  -webkit-animation: flash 300ms -3042ms infinite alternate;
+          animation: flash 300ms -3042ms infinite alternate;
+}
+.particle:nth-child(107) {
+  transform: translate3d(258.75px, 215.25px, -95.25px) rotateY(202deg);
+  -webkit-animation: flash 300ms -5955ms infinite alternate;
+          animation: flash 300ms -5955ms infinite alternate;
+}
+.particle:nth-child(108) {
+  transform: translate3d(469.25px, 52.5px, -28px) rotateY(30deg);
+  -webkit-animation: flash 300ms -5672ms infinite alternate;
+          animation: flash 300ms -5672ms infinite alternate;
+}
+.particle:nth-child(109) {
+  transform: translate3d(-150.75px, -251.25px, 177.5px) rotateY(17deg);
+  -webkit-animation: flash 300ms -4897ms infinite alternate;
+          animation: flash 300ms -4897ms infinite alternate;
+}
+.particle:nth-child(110) {
+  transform: translate3d(339px, 456.75px, 57px) rotateY(265deg);
+  -webkit-animation: flash 300ms -267ms infinite alternate;
+          animation: flash 300ms -267ms infinite alternate;
+}
+.particle:nth-child(111) {
+  transform: translate3d(-39.5px, -519.75px, 255px) rotateY(318deg);
+  -webkit-animation: flash 300ms -4912ms infinite alternate;
+          animation: flash 300ms -4912ms infinite alternate;
+}
+.particle:nth-child(112) {
+  transform: translate3d(-81.25px, -92.5px, -7.5px) rotateY(238deg);
+  -webkit-animation: flash 300ms -6860ms infinite alternate;
+          animation: flash 300ms -6860ms infinite alternate;
+}
+.particle:nth-child(113) {
+  transform: translate3d(-291px, -147.25px, 11.75px) rotateY(281deg);
+  -webkit-animation: flash 300ms -3424ms infinite alternate;
+          animation: flash 300ms -3424ms infinite alternate;
+}
+.particle:nth-child(114) {
+  transform: translate3d(-146.5px, 36.5px, 48px) rotateY(35deg);
+  -webkit-animation: flash 300ms -8765ms infinite alternate;
+          animation: flash 300ms -8765ms infinite alternate;
+}
+.particle:nth-child(115) {
+  transform: translate3d(136.75px, -383.75px, -17.75px) rotateY(178deg);
+  -webkit-animation: flash 300ms -8556ms infinite alternate;
+          animation: flash 300ms -8556ms infinite alternate;
+}
+.particle:nth-child(116) {
+  transform: translate3d(27.5px, -540.25px, 259.5px) rotateY(273deg);
+  -webkit-animation: flash 300ms -9851ms infinite alternate;
+          animation: flash 300ms -9851ms infinite alternate;
+}
+.particle:nth-child(117) {
+  transform: translate3d(323.75px, -92.5px, -80px) rotateY(114deg);
+  -webkit-animation: flash 300ms -6066ms infinite alternate;
+          animation: flash 300ms -6066ms infinite alternate;
+}
+.particle:nth-child(118) {
+  transform: translate3d(319.75px, -116.5px, -486.25px) rotateY(298deg);
+  -webkit-animation: flash 300ms -5670ms infinite alternate;
+          animation: flash 300ms -5670ms infinite alternate;
+}
+.particle:nth-child(119) {
+  transform: translate3d(-312.5px, 46.5px, -69.25px) rotateY(132deg);
+  -webkit-animation: flash 300ms -2164ms infinite alternate;
+          animation: flash 300ms -2164ms infinite alternate;
+}
+.particle:nth-child(120) {
+  transform: translate3d(-527px, 14.25px, -486.25px) rotateY(154deg);
+  -webkit-animation: flash 300ms -1700ms infinite alternate;
+          animation: flash 300ms -1700ms infinite alternate;
+}
+.particle:nth-child(121) {
+  transform: translate3d(120.25px, -59.25px, -426.75px) rotateY(174deg);
+  -webkit-animation: flash 300ms -9937ms infinite alternate;
+          animation: flash 300ms -9937ms infinite alternate;
+}
+.particle:nth-child(122) {
+  transform: translate3d(-72.5px, 420px, 342px) rotateY(167deg);
+  -webkit-animation: flash 300ms -6516ms infinite alternate;
+          animation: flash 300ms -6516ms infinite alternate;
+}
+.particle:nth-child(123) {
+  transform: translate3d(14px, -506.5px, -278.25px) rotateY(348deg);
+  -webkit-animation: flash 300ms -8578ms infinite alternate;
+          animation: flash 300ms -8578ms infinite alternate;
+}
+.particle:nth-child(124) {
+  transform: translate3d(444px, -123.5px, 106px) rotateY(231deg);
+  -webkit-animation: flash 300ms -4456ms infinite alternate;
+          animation: flash 300ms -4456ms infinite alternate;
+}
+.particle:nth-child(125) {
+  transform: translate3d(-72.5px, -256.5px, 310.75px) rotateY(308deg);
+  -webkit-animation: flash 300ms -5774ms infinite alternate;
+          animation: flash 300ms -5774ms infinite alternate;
+}
+.particle:nth-child(126) {
+  transform: translate3d(2.5px, 40.5px, -26.75px) rotateY(153deg);
+  -webkit-animation: flash 300ms -492ms infinite alternate;
+          animation: flash 300ms -492ms infinite alternate;
+}
+.particle:nth-child(127) {
+  transform: translate3d(-7px, -312.5px, -48.25px) rotateY(331deg);
+  -webkit-animation: flash 300ms -7013ms infinite alternate;
+          animation: flash 300ms -7013ms infinite alternate;
+}
+.particle:nth-child(128) {
+  transform: translate3d(-399.25px, -162px, 176px) rotateY(224deg);
+  -webkit-animation: flash 300ms -4547ms infinite alternate;
+          animation: flash 300ms -4547ms infinite alternate;
+}
+.particle:nth-child(129) {
+  transform: translate3d(-569.75px, 515px, 98px) rotateY(300deg);
+  -webkit-animation: flash 300ms -3142ms infinite alternate;
+          animation: flash 300ms -3142ms infinite alternate;
+}
+.particle:nth-child(130) {
+  transform: translate3d(-132.75px, -89.75px, 5.5px) rotateY(7deg);
+  -webkit-animation: flash 300ms -7228ms infinite alternate;
+          animation: flash 300ms -7228ms infinite alternate;
+}
+.particle:nth-child(131) {
+  transform: translate3d(-316.75px, 253.5px, -76.5px) rotateY(301deg);
+  -webkit-animation: flash 300ms -4004ms infinite alternate;
+          animation: flash 300ms -4004ms infinite alternate;
+}
+.particle:nth-child(132) {
+  transform: translate3d(464.75px, -484px, 198.5px) rotateY(268deg);
+  -webkit-animation: flash 300ms -4099ms infinite alternate;
+          animation: flash 300ms -4099ms infinite alternate;
+}
+.particle:nth-child(133) {
+  transform: translate3d(-691.75px, -113.25px, 74.5px) rotateY(324deg);
+  -webkit-animation: flash 300ms -4988ms infinite alternate;
+          animation: flash 300ms -4988ms infinite alternate;
+}
+.particle:nth-child(134) {
+  transform: translate3d(-443.5px, 376px, -117.5px) rotateY(46deg);
+  -webkit-animation: flash 300ms -3812ms infinite alternate;
+          animation: flash 300ms -3812ms infinite alternate;
+}
+.particle:nth-child(135) {
+  transform: translate3d(-332.75px, 310px, 91.25px) rotateY(357deg);
+  -webkit-animation: flash 300ms -2161ms infinite alternate;
+          animation: flash 300ms -2161ms infinite alternate;
+}
+.particle:nth-child(136) {
+  transform: translate3d(244.5px, 244.25px, 54.5px) rotateY(219deg);
+  -webkit-animation: flash 300ms -5149ms infinite alternate;
+          animation: flash 300ms -5149ms infinite alternate;
+}
+.particle:nth-child(137) {
+  transform: translate3d(-92.5px, 376.25px, -106.25px) rotateY(146deg);
+  -webkit-animation: flash 300ms -4877ms infinite alternate;
+          animation: flash 300ms -4877ms infinite alternate;
+}
+.particle:nth-child(138) {
+  transform: translate3d(104.25px, -473.5px, -228px) rotateY(10deg);
+  -webkit-animation: flash 300ms -9833ms infinite alternate;
+          animation: flash 300ms -9833ms infinite alternate;
+}
+.particle:nth-child(139) {
+  transform: translate3d(-159.25px, -113.75px, 481.25px) rotateY(301deg);
+  -webkit-animation: flash 300ms -3000ms infinite alternate;
+          animation: flash 300ms -3000ms infinite alternate;
+}
+.particle:nth-child(140) {
+  transform: translate3d(118.25px, -6px, 7px) rotateY(159deg);
+  -webkit-animation: flash 300ms -3431ms infinite alternate;
+          animation: flash 300ms -3431ms infinite alternate;
+}
+.particle:nth-child(141) {
+  transform: translate3d(239.5px, 85.25px, 402.5px) rotateY(282deg);
+  -webkit-animation: flash 300ms -3788ms infinite alternate;
+          animation: flash 300ms -3788ms infinite alternate;
+}
+.particle:nth-child(142) {
+  transform: translate3d(340px, 309px, -700px) rotateY(213deg);
+  -webkit-animation: flash 300ms -6174ms infinite alternate;
+          animation: flash 300ms -6174ms infinite alternate;
+}
+.particle:nth-child(143) {
+  transform: translate3d(441.5px, -104px, -70px) rotateY(224deg);
+  -webkit-animation: flash 300ms -6797ms infinite alternate;
+          animation: flash 300ms -6797ms infinite alternate;
+}
+.particle:nth-child(144) {
+  transform: translate3d(-106.75px, -251.25px, 101.25px) rotateY(112deg);
+  -webkit-animation: flash 300ms -9604ms infinite alternate;
+          animation: flash 300ms -9604ms infinite alternate;
+}
+.particle:nth-child(145) {
+  transform: translate3d(429px, 344px, -25px) rotateY(340deg);
+  -webkit-animation: flash 300ms -567ms infinite alternate;
+          animation: flash 300ms -567ms infinite alternate;
+}
+.particle:nth-child(146) {
+  transform: translate3d(426.25px, 170.5px, -325.5px) rotateY(350deg);
+  -webkit-animation: flash 300ms -9166ms infinite alternate;
+          animation: flash 300ms -9166ms infinite alternate;
+}
+.particle:nth-child(147) {
+  transform: translate3d(110.25px, -11.5px, 114.75px) rotateY(153deg);
+  -webkit-animation: flash 300ms -9847ms infinite alternate;
+          animation: flash 300ms -9847ms infinite alternate;
+}
+.particle:nth-child(148) {
+  transform: translate3d(-465.75px, -448.75px, 4.25px) rotateY(354deg);
+  -webkit-animation: flash 300ms -486ms infinite alternate;
+          animation: flash 300ms -486ms infinite alternate;
+}
+.particle:nth-child(149) {
+  transform: translate3d(-435.75px, 263px, 263.75px) rotateY(289deg);
+  -webkit-animation: flash 300ms -4321ms infinite alternate;
+          animation: flash 300ms -4321ms infinite alternate;
+}
+.particle:nth-child(150) {
+  transform: translate3d(255.25px, 170.25px, 282.75px) rotateY(50deg);
+  -webkit-animation: flash 300ms -310ms infinite alternate;
+          animation: flash 300ms -310ms infinite alternate;
+}
+.particle:nth-child(151) {
+  transform: translate3d(81.75px, -297.25px, 142.25px) rotateY(209deg);
+  -webkit-animation: flash 300ms -1552ms infinite alternate;
+          animation: flash 300ms -1552ms infinite alternate;
+}
+.particle:nth-child(152) {
+  transform: translate3d(-449.75px, 17.5px, -374.25px) rotateY(293deg);
+  -webkit-animation: flash 300ms -2213ms infinite alternate;
+          animation: flash 300ms -2213ms infinite alternate;
+}
+.particle:nth-child(153) {
+  transform: translate3d(-33.25px, 254.75px, 337.75px) rotateY(107deg);
+  -webkit-animation: flash 300ms -3696ms infinite alternate;
+          animation: flash 300ms -3696ms infinite alternate;
+}
+.particle:nth-child(154) {
+  transform: translate3d(-380.5px, 391px, -174.5px) rotateY(307deg);
+  -webkit-animation: flash 300ms -1034ms infinite alternate;
+          animation: flash 300ms -1034ms infinite alternate;
+}
+.particle:nth-child(155) {
+  transform: translate3d(-508px, -182.75px, 373.25px) rotateY(137deg);
+  -webkit-animation: flash 300ms -6175ms infinite alternate;
+          animation: flash 300ms -6175ms infinite alternate;
+}
+.particle:nth-child(156) {
+  transform: translate3d(-359.25px, -124.75px, 89.25px) rotateY(297deg);
+  -webkit-animation: flash 300ms -805ms infinite alternate;
+          animation: flash 300ms -805ms infinite alternate;
+}
+.particle:nth-child(157) {
+  transform: translate3d(-639.5px, -268.75px, -120.25px) rotateY(158deg);
+  -webkit-animation: flash 300ms -1709ms infinite alternate;
+          animation: flash 300ms -1709ms infinite alternate;
+}
+.particle:nth-child(158) {
+  transform: translate3d(280.5px, 5.25px, 141.25px) rotateY(145deg);
+  -webkit-animation: flash 300ms -4583ms infinite alternate;
+          animation: flash 300ms -4583ms infinite alternate;
+}
+.particle:nth-child(159) {
+  transform: translate3d(-93.75px, 201px, -148.5px) rotateY(29deg);
+  -webkit-animation: flash 300ms -4079ms infinite alternate;
+          animation: flash 300ms -4079ms infinite alternate;
+}
+.particle:nth-child(160) {
+  transform: translate3d(-10.75px, -46.75px, 103.5px) rotateY(158deg);
+  -webkit-animation: flash 300ms -5108ms infinite alternate;
+          animation: flash 300ms -5108ms infinite alternate;
+}
+.particle:nth-child(161) {
+  transform: translate3d(0.25px, 216.75px, 360.5px) rotateY(5deg);
+  -webkit-animation: flash 300ms -8312ms infinite alternate;
+          animation: flash 300ms -8312ms infinite alternate;
+}
+.particle:nth-child(162) {
+  transform: translate3d(-509.5px, -466.75px, 130.25px) rotateY(103deg);
+  -webkit-animation: flash 300ms -904ms infinite alternate;
+          animation: flash 300ms -904ms infinite alternate;
+}
+.particle:nth-child(163) {
+  transform: translate3d(87.75px, 91.5px, 616px) rotateY(67deg);
+  -webkit-animation: flash 300ms -290ms infinite alternate;
+          animation: flash 300ms -290ms infinite alternate;
+}
+.particle:nth-child(164) {
+  transform: translate3d(85px, 117.75px, 139.25px) rotateY(123deg);
+  -webkit-animation: flash 300ms -9628ms infinite alternate;
+          animation: flash 300ms -9628ms infinite alternate;
+}
+.particle:nth-child(165) {
+  transform: translate3d(416.75px, 10.5px, -58.25px) rotateY(14deg);
+  -webkit-animation: flash 300ms -962ms infinite alternate;
+          animation: flash 300ms -962ms infinite alternate;
+}
+.particle:nth-child(166) {
+  transform: translate3d(365.5px, -13.75px, -191.25px) rotateY(266deg);
+  -webkit-animation: flash 300ms -4712ms infinite alternate;
+          animation: flash 300ms -4712ms infinite alternate;
+}
+.particle:nth-child(167) {
+  transform: translate3d(-75.25px, 186.5px, 586.5px) rotateY(220deg);
+  -webkit-animation: flash 300ms -9785ms infinite alternate;
+          animation: flash 300ms -9785ms infinite alternate;
+}
+.particle:nth-child(168) {
+  transform: translate3d(360.25px, 16.5px, -37.75px) rotateY(295deg);
+  -webkit-animation: flash 300ms -5125ms infinite alternate;
+          animation: flash 300ms -5125ms infinite alternate;
+}
+.particle:nth-child(169) {
+  transform: translate3d(-147.25px, 248px, 341.75px) rotateY(286deg);
+  -webkit-animation: flash 300ms -6884ms infinite alternate;
+          animation: flash 300ms -6884ms infinite alternate;
+}
+.particle:nth-child(170) {
+  transform: translate3d(181.25px, -635px, -85.25px) rotateY(132deg);
+  -webkit-animation: flash 300ms -1256ms infinite alternate;
+          animation: flash 300ms -1256ms infinite alternate;
+}
+.particle:nth-child(171) {
+  transform: translate3d(5.75px, -27.25px, -323px) rotateY(30deg);
+  -webkit-animation: flash 300ms -5772ms infinite alternate;
+          animation: flash 300ms -5772ms infinite alternate;
+}
+.particle:nth-child(172) {
+  transform: translate3d(456.25px, 281px, 291.25px) rotateY(108deg);
+  -webkit-animation: flash 300ms -5184ms infinite alternate;
+          animation: flash 300ms -5184ms infinite alternate;
+}
+.particle:nth-child(173) {
+  transform: translate3d(262.25px, 19.25px, 126.25px) rotateY(236deg);
+  -webkit-animation: flash 300ms -1597ms infinite alternate;
+          animation: flash 300ms -1597ms infinite alternate;
+}
+.particle:nth-child(174) {
+  transform: translate3d(-256.75px, 101.75px, 402.75px) rotateY(296deg);
+  -webkit-animation: flash 300ms -1941ms infinite alternate;
+          animation: flash 300ms -1941ms infinite alternate;
+}
+.particle:nth-child(175) {
+  transform: translate3d(226.25px, -230.5px, 4px) rotateY(26deg);
+  -webkit-animation: flash 300ms -7376ms infinite alternate;
+          animation: flash 300ms -7376ms infinite alternate;
+}
+.particle:nth-child(176) {
+  transform: translate3d(64px, 152px, -107px) rotateY(123deg);
+  -webkit-animation: flash 300ms -7520ms infinite alternate;
+          animation: flash 300ms -7520ms infinite alternate;
+}
+.particle:nth-child(177) {
+  transform: translate3d(89px, 223.5px, -389px) rotateY(204deg);
+  -webkit-animation: flash 300ms -9418ms infinite alternate;
+          animation: flash 300ms -9418ms infinite alternate;
+}
+.particle:nth-child(178) {
+  transform: translate3d(142.75px, 239px, -247px) rotateY(3deg);
+  -webkit-animation: flash 300ms -3880ms infinite alternate;
+          animation: flash 300ms -3880ms infinite alternate;
+}
+.particle:nth-child(179) {
+  transform: translate3d(423.5px, 362.25px, -302.25px) rotateY(237deg);
+  -webkit-animation: flash 300ms -6719ms infinite alternate;
+          animation: flash 300ms -6719ms infinite alternate;
+}
+.particle:nth-child(180) {
+  transform: translate3d(4px, 512.75px, -416px) rotateY(63deg);
+  -webkit-animation: flash 300ms -5713ms infinite alternate;
+          animation: flash 300ms -5713ms infinite alternate;
+}
+.particle:nth-child(181) {
+  transform: translate3d(12.5px, 10px, 545.75px) rotateY(298deg);
+  -webkit-animation: flash 300ms -2902ms infinite alternate;
+          animation: flash 300ms -2902ms infinite alternate;
+}
+.particle:nth-child(182) {
+  transform: translate3d(355.5px, -172.75px, 299px) rotateY(63deg);
+  -webkit-animation: flash 300ms -3755ms infinite alternate;
+          animation: flash 300ms -3755ms infinite alternate;
+}
+.particle:nth-child(183) {
+  transform: translate3d(-682.75px, -246.5px, 25.75px) rotateY(351deg);
+  -webkit-animation: flash 300ms -6013ms infinite alternate;
+          animation: flash 300ms -6013ms infinite alternate;
+}
+.particle:nth-child(184) {
+  transform: translate3d(-521px, 205.75px, -25.25px) rotateY(22deg);
+  -webkit-animation: flash 300ms -1853ms infinite alternate;
+          animation: flash 300ms -1853ms infinite alternate;
+}
+.particle:nth-child(185) {
+  transform: translate3d(-266.25px, 206px, -327.25px) rotateY(62deg);
+  -webkit-animation: flash 300ms -9585ms infinite alternate;
+          animation: flash 300ms -9585ms infinite alternate;
+}
+.particle:nth-child(186) {
+  transform: translate3d(-271px, 235.5px, 342.25px) rotateY(100deg);
+  -webkit-animation: flash 300ms -8540ms infinite alternate;
+          animation: flash 300ms -8540ms infinite alternate;
+}
+.particle:nth-child(187) {
+  transform: translate3d(-115px, -12.25px, 250.25px) rotateY(68deg);
+  -webkit-animation: flash 300ms -718ms infinite alternate;
+          animation: flash 300ms -718ms infinite alternate;
+}
+.particle:nth-child(188) {
+  transform: translate3d(269.75px, 157.25px, -285.75px) rotateY(125deg);
+  -webkit-animation: flash 300ms -3608ms infinite alternate;
+          animation: flash 300ms -3608ms infinite alternate;
+}
+.particle:nth-child(189) {
+  transform: translate3d(-415.25px, -86.25px, 33px) rotateY(318deg);
+  -webkit-animation: flash 300ms -9533ms infinite alternate;
+          animation: flash 300ms -9533ms infinite alternate;
+}
+.particle:nth-child(190) {
+  transform: translate3d(-520.25px, -120.75px, 0.25px) rotateY(260deg);
+  -webkit-animation: flash 300ms -3970ms infinite alternate;
+          animation: flash 300ms -3970ms infinite alternate;
+}
+.particle:nth-child(191) {
+  transform: translate3d(-311.25px, -422px, -208.25px) rotateY(42deg);
+  -webkit-animation: flash 300ms -8148ms infinite alternate;
+          animation: flash 300ms -8148ms infinite alternate;
+}
+.particle:nth-child(192) {
+  transform: translate3d(7.75px, -91.75px, -87px) rotateY(85deg);
+  -webkit-animation: flash 300ms -1145ms infinite alternate;
+          animation: flash 300ms -1145ms infinite alternate;
+}
+.particle:nth-child(193) {
+  transform: translate3d(72.5px, -395px, -66.5px) rotateY(53deg);
+  -webkit-animation: flash 300ms -6788ms infinite alternate;
+          animation: flash 300ms -6788ms infinite alternate;
+}
+.particle:nth-child(194) {
+  transform: translate3d(-5.25px, -43.5px, -219.25px) rotateY(295deg);
+  -webkit-animation: flash 300ms -9291ms infinite alternate;
+          animation: flash 300ms -9291ms infinite alternate;
+}
+.particle:nth-child(195) {
+  transform: translate3d(-87.5px, 193.5px, 158.5px) rotateY(277deg);
+  -webkit-animation: flash 300ms -2085ms infinite alternate;
+          animation: flash 300ms -2085ms infinite alternate;
+}
+.particle:nth-child(196) {
+  transform: translate3d(230.75px, -394.75px, 259.25px) rotateY(344deg);
+  -webkit-animation: flash 300ms -8974ms infinite alternate;
+          animation: flash 300ms -8974ms infinite alternate;
+}
+.particle:nth-child(197) {
+  transform: translate3d(-49.5px, -434.5px, 444.75px) rotateY(182deg);
+  -webkit-animation: flash 300ms -4012ms infinite alternate;
+          animation: flash 300ms -4012ms infinite alternate;
+}
+.particle:nth-child(198) {
+  transform: translate3d(-403.25px, -426.75px, 517.75px) rotateY(100deg);
+  -webkit-animation: flash 300ms -1786ms infinite alternate;
+          animation: flash 300ms -1786ms infinite alternate;
+}
+.particle:nth-child(199) {
+  transform: translate3d(53.25px, 302.25px, 113px) rotateY(168deg);
+  -webkit-animation: flash 300ms -7513ms infinite alternate;
+          animation: flash 300ms -7513ms infinite alternate;
+}
+.particle:nth-child(200) {
+  transform: translate3d(-254.5px, 11.75px, -43.75px) rotateY(97deg);
+  -webkit-animation: flash 300ms -8104ms infinite alternate;
+          animation: flash 300ms -8104ms infinite alternate;
+}
+.particle:nth-child(201) {
+  transform: translate3d(-101.5px, 460.5px, -155.25px) rotateY(89deg);
+  -webkit-animation: flash 300ms -891ms infinite alternate;
+          animation: flash 300ms -891ms infinite alternate;
+}
+.particle:nth-child(202) {
+  transform: translate3d(-518.75px, -28px, -484.5px) rotateY(111deg);
+  -webkit-animation: flash 300ms -8312ms infinite alternate;
+          animation: flash 300ms -8312ms infinite alternate;
+}
+.particle:nth-child(203) {
+  transform: translate3d(-11.25px, 502.25px, -82.5px) rotateY(71deg);
+  -webkit-animation: flash 300ms -3050ms infinite alternate;
+          animation: flash 300ms -3050ms infinite alternate;
+}
+.particle:nth-child(204) {
+  transform: translate3d(269.75px, -220px, 107.5px) rotateY(349deg);
+  -webkit-animation: flash 300ms -8662ms infinite alternate;
+          animation: flash 300ms -8662ms infinite alternate;
+}
+.particle:nth-child(205) {
+  transform: translate3d(462.75px, 5.75px, 425.5px) rotateY(111deg);
+  -webkit-animation: flash 300ms -1373ms infinite alternate;
+          animation: flash 300ms -1373ms infinite alternate;
+}
+.particle:nth-child(206) {
+  transform: translate3d(-96.5px, -167px, -308.75px) rotateY(227deg);
+  -webkit-animation: flash 300ms -2834ms infinite alternate;
+          animation: flash 300ms -2834ms infinite alternate;
+}
+.particle:nth-child(207) {
+  transform: translate3d(-440.25px, 356.75px, 128.5px) rotateY(45deg);
+  -webkit-animation: flash 300ms -6164ms infinite alternate;
+          animation: flash 300ms -6164ms infinite alternate;
+}
+.particle:nth-child(208) {
+  transform: translate3d(524px, -312.25px, -1px) rotateY(90deg);
+  -webkit-animation: flash 300ms -5517ms infinite alternate;
+          animation: flash 300ms -5517ms infinite alternate;
+}
+.particle:nth-child(209) {
+  transform: translate3d(-272.75px, 263.25px, 69.5px) rotateY(96deg);
+  -webkit-animation: flash 300ms -9882ms infinite alternate;
+          animation: flash 300ms -9882ms infinite alternate;
+}
+.particle:nth-child(210) {
+  transform: translate3d(187.25px, 115px, -297.25px) rotateY(70deg);
+  -webkit-animation: flash 300ms -8042ms infinite alternate;
+          animation: flash 300ms -8042ms infinite alternate;
+}
+.particle:nth-child(211) {
+  transform: translate3d(104.25px, 349.5px, -299.25px) rotateY(326deg);
+  -webkit-animation: flash 300ms -5841ms infinite alternate;
+          animation: flash 300ms -5841ms infinite alternate;
+}
+.particle:nth-child(212) {
+  transform: translate3d(-360.25px, 65.5px, -280.75px) rotateY(40deg);
+  -webkit-animation: flash 300ms -7512ms infinite alternate;
+          animation: flash 300ms -7512ms infinite alternate;
+}
+.particle:nth-child(213) {
+  transform: translate3d(62.5px, -135.25px, 222.5px) rotateY(149deg);
+  -webkit-animation: flash 300ms -2804ms infinite alternate;
+          animation: flash 300ms -2804ms infinite alternate;
+}
+.particle:nth-child(214) {
+  transform: translate3d(95.5px, -669.75px, -177px) rotateY(229deg);
+  -webkit-animation: flash 300ms -3242ms infinite alternate;
+          animation: flash 300ms -3242ms infinite alternate;
+}
+.particle:nth-child(215) {
+  transform: translate3d(377.25px, -73px, -362.75px) rotateY(282deg);
+  -webkit-animation: flash 300ms -1017ms infinite alternate;
+          animation: flash 300ms -1017ms infinite alternate;
+}
+.particle:nth-child(216) {
+  transform: translate3d(136px, -78.25px, 510.75px) rotateY(339deg);
+  -webkit-animation: flash 300ms -5428ms infinite alternate;
+          animation: flash 300ms -5428ms infinite alternate;
+}
+.particle:nth-child(217) {
+  transform: translate3d(353.25px, 269px, 125.5px) rotateY(76deg);
+  -webkit-animation: flash 300ms -8344ms infinite alternate;
+          animation: flash 300ms -8344ms infinite alternate;
+}
+.particle:nth-child(218) {
+  transform: translate3d(-515.75px, -28.25px, -61.5px) rotateY(119deg);
+  -webkit-animation: flash 300ms -6561ms infinite alternate;
+          animation: flash 300ms -6561ms infinite alternate;
+}
+.particle:nth-child(219) {
+  transform: translate3d(-205.75px, 133px, 139px) rotateY(208deg);
+  -webkit-animation: flash 300ms -6550ms infinite alternate;
+          animation: flash 300ms -6550ms infinite alternate;
+}
+.particle:nth-child(220) {
+  transform: translate3d(222.25px, -217.5px, -402.75px) rotateY(333deg);
+  -webkit-animation: flash 300ms -6780ms infinite alternate;
+          animation: flash 300ms -6780ms infinite alternate;
+}
+.particle:nth-child(221) {
+  transform: translate3d(25.25px, -217.25px, -120.5px) rotateY(32deg);
+  -webkit-animation: flash 300ms -658ms infinite alternate;
+          animation: flash 300ms -658ms infinite alternate;
+}
+.particle:nth-child(222) {
+  transform: translate3d(89.5px, 267px, 259.75px) rotateY(190deg);
+  -webkit-animation: flash 300ms -9647ms infinite alternate;
+          animation: flash 300ms -9647ms infinite alternate;
+}
+.particle:nth-child(223) {
+  transform: translate3d(339px, 436px, -14.75px) rotateY(273deg);
+  -webkit-animation: flash 300ms -4448ms infinite alternate;
+          animation: flash 300ms -4448ms infinite alternate;
+}
+.particle:nth-child(224) {
+  transform: translate3d(-667.5px, -178.75px, -14px) rotateY(142deg);
+  -webkit-animation: flash 300ms -7530ms infinite alternate;
+          animation: flash 300ms -7530ms infinite alternate;
+}
+.particle:nth-child(225) {
+  transform: translate3d(-248px, 139.25px, -211px) rotateY(254deg);
+  -webkit-animation: flash 300ms -6907ms infinite alternate;
+          animation: flash 300ms -6907ms infinite alternate;
+}
+.particle:nth-child(226) {
+  transform: translate3d(-20px, -84.5px, -194px) rotateY(270deg);
+  -webkit-animation: flash 300ms -4511ms infinite alternate;
+          animation: flash 300ms -4511ms infinite alternate;
+}
+.particle:nth-child(227) {
+  transform: translate3d(120.75px, -389.5px, -142.75px) rotateY(25deg);
+  -webkit-animation: flash 300ms -6450ms infinite alternate;
+          animation: flash 300ms -6450ms infinite alternate;
+}
+.particle:nth-child(228) {
+  transform: translate3d(-79.5px, -221.5px, 47.5px) rotateY(277deg);
+  -webkit-animation: flash 300ms -7254ms infinite alternate;
+          animation: flash 300ms -7254ms infinite alternate;
+}
+.particle:nth-child(229) {
+  transform: translate3d(-189.5px, -226.75px, 188.75px) rotateY(92deg);
+  -webkit-animation: flash 300ms -9591ms infinite alternate;
+          animation: flash 300ms -9591ms infinite alternate;
+}
+.particle:nth-child(230) {
+  transform: translate3d(214.25px, 63.5px, -8.5px) rotateY(170deg);
+  -webkit-animation: flash 300ms -2633ms infinite alternate;
+          animation: flash 300ms -2633ms infinite alternate;
+}
+.particle:nth-child(231) {
+  transform: translate3d(-324.5px, -126.25px, 166.25px) rotateY(135deg);
+  -webkit-animation: flash 300ms -3613ms infinite alternate;
+          animation: flash 300ms -3613ms infinite alternate;
+}
+.particle:nth-child(232) {
+  transform: translate3d(173.5px, 131.75px, -48.75px) rotateY(168deg);
+  -webkit-animation: flash 300ms -7611ms infinite alternate;
+          animation: flash 300ms -7611ms infinite alternate;
+}
+.particle:nth-child(233) {
+  transform: translate3d(212.25px, -2.75px, 126px) rotateY(348deg);
+  -webkit-animation: flash 300ms -9210ms infinite alternate;
+          animation: flash 300ms -9210ms infinite alternate;
+}
+.particle:nth-child(234) {
+  transform: translate3d(33.25px, 28.75px, -506px) rotateY(312deg);
+  -webkit-animation: flash 300ms -9404ms infinite alternate;
+          animation: flash 300ms -9404ms infinite alternate;
+}
+.particle:nth-child(235) {
+  transform: translate3d(141px, -306.5px, -69.25px) rotateY(279deg);
+  -webkit-animation: flash 300ms -148ms infinite alternate;
+          animation: flash 300ms -148ms infinite alternate;
+}
+.particle:nth-child(236) {
+  transform: translate3d(13px, -30.25px, -30px) rotateY(157deg);
+  -webkit-animation: flash 300ms -6605ms infinite alternate;
+          animation: flash 300ms -6605ms infinite alternate;
+}
+.particle:nth-child(237) {
+  transform: translate3d(-196px, -542px, 243.75px) rotateY(284deg);
+  -webkit-animation: flash 300ms -5408ms infinite alternate;
+          animation: flash 300ms -5408ms infinite alternate;
+}
+.particle:nth-child(238) {
+  transform: translate3d(11.25px, -274.5px, -66px) rotateY(302deg);
+  -webkit-animation: flash 300ms -2393ms infinite alternate;
+          animation: flash 300ms -2393ms infinite alternate;
+}
+.particle:nth-child(239) {
+  transform: translate3d(-303.25px, 439.25px, -37.25px) rotateY(212deg);
+  -webkit-animation: flash 300ms -509ms infinite alternate;
+          animation: flash 300ms -509ms infinite alternate;
+}
+.particle:nth-child(240) {
+  transform: translate3d(341px, -568.5px, -25.5px) rotateY(221deg);
+  -webkit-animation: flash 300ms -9459ms infinite alternate;
+          animation: flash 300ms -9459ms infinite alternate;
+}
+.particle:nth-child(241) {
+  transform: translate3d(-335px, -802px, 287px) rotateY(49deg);
+  -webkit-animation: flash 300ms -6515ms infinite alternate;
+          animation: flash 300ms -6515ms infinite alternate;
+}
+.particle:nth-child(242) {
+  transform: translate3d(506.25px, -319.5px, 166.5px) rotateY(143deg);
+  -webkit-animation: flash 300ms -9812ms infinite alternate;
+          animation: flash 300ms -9812ms infinite alternate;
+}
+.particle:nth-child(243) {
+  transform: translate3d(-167px, 312.5px, 405.75px) rotateY(169deg);
+  -webkit-animation: flash 300ms -1030ms infinite alternate;
+          animation: flash 300ms -1030ms infinite alternate;
+}
+.particle:nth-child(244) {
+  transform: translate3d(245.75px, 64.5px, -505px) rotateY(30deg);
+  -webkit-animation: flash 300ms -6142ms infinite alternate;
+          animation: flash 300ms -6142ms infinite alternate;
+}
+.particle:nth-child(245) {
+  transform: translate3d(280.25px, -104.25px, 248.5px) rotateY(14deg);
+  -webkit-animation: flash 300ms -1563ms infinite alternate;
+          animation: flash 300ms -1563ms infinite alternate;
+}
+.particle:nth-child(246) {
+  transform: translate3d(-258.25px, 458.75px, -286px) rotateY(134deg);
+  -webkit-animation: flash 300ms -9007ms infinite alternate;
+          animation: flash 300ms -9007ms infinite alternate;
+}
+.particle:nth-child(247) {
+  transform: translate3d(111.25px, 78.25px, -37px) rotateY(261deg);
+  -webkit-animation: flash 300ms -5250ms infinite alternate;
+          animation: flash 300ms -5250ms infinite alternate;
+}
+.particle:nth-child(248) {
+  transform: translate3d(152.25px, -333px, -304.75px) rotateY(166deg);
+  -webkit-animation: flash 300ms -3295ms infinite alternate;
+          animation: flash 300ms -3295ms infinite alternate;
+}
+.particle:nth-child(249) {
+  transform: translate3d(-241.25px, -305.25px, 104px) rotateY(116deg);
+  -webkit-animation: flash 300ms -3999ms infinite alternate;
+          animation: flash 300ms -3999ms infinite alternate;
+}
+.particle:nth-child(250) {
+  transform: translate3d(-607px, -65px, -304px) rotateY(181deg);
+  -webkit-animation: flash 300ms -6975ms infinite alternate;
+          animation: flash 300ms -6975ms infinite alternate;
+}
+.particle:nth-child(251) {
+  transform: translate3d(246.75px, -32.5px, 361.75px) rotateY(210deg);
+  -webkit-animation: flash 300ms -383ms infinite alternate;
+          animation: flash 300ms -383ms infinite alternate;
+}
+.particle:nth-child(252) {
+  transform: translate3d(-203.75px, 70.25px, 139.25px) rotateY(80deg);
+  -webkit-animation: flash 300ms -8648ms infinite alternate;
+          animation: flash 300ms -8648ms infinite alternate;
+}
+.particle:nth-child(253) {
+  transform: translate3d(-205.5px, -262.25px, -340.5px) rotateY(257deg);
+  -webkit-animation: flash 300ms -1578ms infinite alternate;
+          animation: flash 300ms -1578ms infinite alternate;
+}
+.particle:nth-child(254) {
+  transform: translate3d(-453px, -329px, -5.5px) rotateY(45deg);
+  -webkit-animation: flash 300ms -9731ms infinite alternate;
+          animation: flash 300ms -9731ms infinite alternate;
+}
+.particle:nth-child(255) {
+  transform: translate3d(89.5px, 9.25px, -90.75px) rotateY(339deg);
+  -webkit-animation: flash 300ms -592ms infinite alternate;
+          animation: flash 300ms -592ms infinite alternate;
+}
+.particle:nth-child(256) {
+  transform: translate3d(170px, -395.5px, 46.25px) rotateY(349deg);
+  -webkit-animation: flash 300ms -8270ms infinite alternate;
+          animation: flash 300ms -8270ms infinite alternate;
+}
+.particle:nth-child(257) {
+  transform: translate3d(223.5px, 341px, 404px) rotateY(150deg);
+  -webkit-animation: flash 300ms -8221ms infinite alternate;
+          animation: flash 300ms -8221ms infinite alternate;
+}
+.particle:nth-child(258) {
+  transform: translate3d(-284.75px, 451.5px, 359.25px) rotateY(253deg);
+  -webkit-animation: flash 300ms -6199ms infinite alternate;
+          animation: flash 300ms -6199ms infinite alternate;
+}
+.particle:nth-child(259) {
+  transform: translate3d(297px, -355.25px, 283.75px) rotateY(45deg);
+  -webkit-animation: flash 300ms -3551ms infinite alternate;
+          animation: flash 300ms -3551ms infinite alternate;
+}
+.particle:nth-child(260) {
+  transform: translate3d(292.75px, 67.75px, 209.5px) rotateY(10deg);
+  -webkit-animation: flash 300ms -6402ms infinite alternate;
+          animation: flash 300ms -6402ms infinite alternate;
+}
+.particle:nth-child(261) {
+  transform: translate3d(-234.5px, -170px, -414.25px) rotateY(145deg);
+  -webkit-animation: flash 300ms -6222ms infinite alternate;
+          animation: flash 300ms -6222ms infinite alternate;
+}
+.particle:nth-child(262) {
+  transform: translate3d(460.5px, -142px, -9.5px) rotateY(252deg);
+  -webkit-animation: flash 300ms -3466ms infinite alternate;
+          animation: flash 300ms -3466ms infinite alternate;
+}
+.particle:nth-child(263) {
+  transform: translate3d(7.5px, -502.5px, 214.25px) rotateY(208deg);
+  -webkit-animation: flash 300ms -3543ms infinite alternate;
+          animation: flash 300ms -3543ms infinite alternate;
+}
+.particle:nth-child(264) {
+  transform: translate3d(314.5px, -190.25px, -95.25px) rotateY(138deg);
+  -webkit-animation: flash 300ms -1364ms infinite alternate;
+          animation: flash 300ms -1364ms infinite alternate;
+}
+.particle:nth-child(265) {
+  transform: translate3d(-103.75px, -25.5px, 636.75px) rotateY(166deg);
+  -webkit-animation: flash 300ms -989ms infinite alternate;
+          animation: flash 300ms -989ms infinite alternate;
+}
+.particle:nth-child(266) {
+  transform: translate3d(95.75px, -161px, -57.25px) rotateY(207deg);
+  -webkit-animation: flash 300ms -3042ms infinite alternate;
+          animation: flash 300ms -3042ms infinite alternate;
+}
+.particle:nth-child(267) {
+  transform: translate3d(249px, -259px, -167px) rotateY(169deg);
+  -webkit-animation: flash 300ms -2643ms infinite alternate;
+          animation: flash 300ms -2643ms infinite alternate;
+}
+.particle:nth-child(268) {
+  transform: translate3d(-34.75px, 125.5px, 170px) rotateY(124deg);
+  -webkit-animation: flash 300ms -3387ms infinite alternate;
+          animation: flash 300ms -3387ms infinite alternate;
+}
+.particle:nth-child(269) {
+  transform: translate3d(425px, 766.25px, -115.5px) rotateY(98deg);
+  -webkit-animation: flash 300ms -9912ms infinite alternate;
+          animation: flash 300ms -9912ms infinite alternate;
+}
+.particle:nth-child(270) {
+  transform: translate3d(506.5px, 209.25px, -233.25px) rotateY(143deg);
+  -webkit-animation: flash 300ms -1471ms infinite alternate;
+          animation: flash 300ms -1471ms infinite alternate;
+}
+.particle:nth-child(271) {
+  transform: translate3d(351.75px, 62px, -361.5px) rotateY(255deg);
+  -webkit-animation: flash 300ms -7076ms infinite alternate;
+          animation: flash 300ms -7076ms infinite alternate;
+}
+.particle:nth-child(272) {
+  transform: translate3d(595.75px, 172.75px, 128.5px) rotateY(139deg);
+  -webkit-animation: flash 300ms -5743ms infinite alternate;
+          animation: flash 300ms -5743ms infinite alternate;
+}
+.particle:nth-child(273) {
+  transform: translate3d(212px, -170.5px, 79px) rotateY(164deg);
+  -webkit-animation: flash 300ms -5954ms infinite alternate;
+          animation: flash 300ms -5954ms infinite alternate;
+}
+.particle:nth-child(274) {
+  transform: translate3d(-98px, 84.5px, 152px) rotateY(315deg);
+  -webkit-animation: flash 300ms -3669ms infinite alternate;
+          animation: flash 300ms -3669ms infinite alternate;
+}
+.particle:nth-child(275) {
+  transform: translate3d(-198px, -175.25px, -423.5px) rotateY(253deg);
+  -webkit-animation: flash 300ms -7525ms infinite alternate;
+          animation: flash 300ms -7525ms infinite alternate;
+}
+.particle:nth-child(276) {
+  transform: translate3d(-195.25px, -354.75px, -349.25px) rotateY(192deg);
+  -webkit-animation: flash 300ms -4774ms infinite alternate;
+          animation: flash 300ms -4774ms infinite alternate;
+}
+.particle:nth-child(277) {
+  transform: translate3d(-56.25px, 399.5px, -325.5px) rotateY(53deg);
+  -webkit-animation: flash 300ms -3149ms infinite alternate;
+          animation: flash 300ms -3149ms infinite alternate;
+}
+.particle:nth-child(278) {
+  transform: translate3d(421px, 239.5px, 58.75px) rotateY(238deg);
+  -webkit-animation: flash 300ms -277ms infinite alternate;
+          animation: flash 300ms -277ms infinite alternate;
+}
+.particle:nth-child(279) {
+  transform: translate3d(-706.25px, 130.75px, 127.75px) rotateY(176deg);
+  -webkit-animation: flash 300ms -9482ms infinite alternate;
+          animation: flash 300ms -9482ms infinite alternate;
+}
+.particle:nth-child(280) {
+  transform: translate3d(-49.75px, -301.75px, 7.75px) rotateY(300deg);
+  -webkit-animation: flash 300ms -6402ms infinite alternate;
+          animation: flash 300ms -6402ms infinite alternate;
+}
+.particle:nth-child(281) {
+  transform: translate3d(14px, 389px, 193px) rotateY(149deg);
+  -webkit-animation: flash 300ms -3863ms infinite alternate;
+          animation: flash 300ms -3863ms infinite alternate;
+}
+.particle:nth-child(282) {
+  transform: translate3d(209px, -302.25px, -176.25px) rotateY(205deg);
+  -webkit-animation: flash 300ms -1070ms infinite alternate;
+          animation: flash 300ms -1070ms infinite alternate;
+}
+.particle:nth-child(283) {
+  transform: translate3d(-39.75px, 131.75px, -82.5px) rotateY(330deg);
+  -webkit-animation: flash 300ms -455ms infinite alternate;
+          animation: flash 300ms -455ms infinite alternate;
+}
+.particle:nth-child(284) {
+  transform: translate3d(179.25px, 218.75px, -16.75px) rotateY(351deg);
+  -webkit-animation: flash 300ms -5640ms infinite alternate;
+          animation: flash 300ms -5640ms infinite alternate;
+}
+.particle:nth-child(285) {
+  transform: translate3d(485.5px, 402.25px, -224px) rotateY(134deg);
+  -webkit-animation: flash 300ms -9329ms infinite alternate;
+          animation: flash 300ms -9329ms infinite alternate;
+}
+.particle:nth-child(286) {
+  transform: translate3d(203.75px, 254.25px, -12.25px) rotateY(323deg);
+  -webkit-animation: flash 300ms -2421ms infinite alternate;
+          animation: flash 300ms -2421ms infinite alternate;
+}
+.particle:nth-child(287) {
+  transform: translate3d(-279.25px, 36.75px, 4.5px) rotateY(83deg);
+  -webkit-animation: flash 300ms -4818ms infinite alternate;
+          animation: flash 300ms -4818ms infinite alternate;
+}
+.particle:nth-child(288) {
+  transform: translate3d(126px, -448.25px, 41.75px) rotateY(60deg);
+  -webkit-animation: flash 300ms -583ms infinite alternate;
+          animation: flash 300ms -583ms infinite alternate;
+}
+.particle:nth-child(289) {
+  transform: translate3d(-9.75px, 105.75px, 149.75px) rotateY(36deg);
+  -webkit-animation: flash 300ms -3048ms infinite alternate;
+          animation: flash 300ms -3048ms infinite alternate;
+}
+.particle:nth-child(290) {
+  transform: translate3d(335.5px, 61.75px, 14.75px) rotateY(96deg);
+  -webkit-animation: flash 300ms -3610ms infinite alternate;
+          animation: flash 300ms -3610ms infinite alternate;
+}
+.particle:nth-child(291) {
+  transform: translate3d(-398.25px, -52.75px, 5.5px) rotateY(206deg);
+  -webkit-animation: flash 300ms -7069ms infinite alternate;
+          animation: flash 300ms -7069ms infinite alternate;
+}
+.particle:nth-child(292) {
+  transform: translate3d(303.75px, -315px, 510.25px) rotateY(354deg);
+  -webkit-animation: flash 300ms -1511ms infinite alternate;
+          animation: flash 300ms -1511ms infinite alternate;
+}
+.particle:nth-child(293) {
+  transform: translate3d(-341.75px, 340.75px, 251.75px) rotateY(233deg);
+  -webkit-animation: flash 300ms -1933ms infinite alternate;
+          animation: flash 300ms -1933ms infinite alternate;
+}
+.particle:nth-child(294) {
+  transform: translate3d(290.5px, 463.25px, -496px) rotateY(127deg);
+  -webkit-animation: flash 300ms -55ms infinite alternate;
+          animation: flash 300ms -55ms infinite alternate;
+}
+.particle:nth-child(295) {
+  transform: translate3d(-351.5px, -777.5px, -331px) rotateY(104deg);
+  -webkit-animation: flash 300ms -6720ms infinite alternate;
+          animation: flash 300ms -6720ms infinite alternate;
+}
+.particle:nth-child(296) {
+  transform: translate3d(-300px, -279px, 442.25px) rotateY(89deg);
+  -webkit-animation: flash 300ms -1852ms infinite alternate;
+          animation: flash 300ms -1852ms infinite alternate;
+}
+.particle:nth-child(297) {
+  transform: translate3d(151.5px, -128px, 9.75px) rotateY(96deg);
+  -webkit-animation: flash 300ms -6824ms infinite alternate;
+          animation: flash 300ms -6824ms infinite alternate;
+}
+.particle:nth-child(298) {
+  transform: translate3d(406.75px, -559.25px, 172.75px) rotateY(347deg);
+  -webkit-animation: flash 300ms -1201ms infinite alternate;
+          animation: flash 300ms -1201ms infinite alternate;
+}
+.particle:nth-child(299) {
+  transform: translate3d(-16px, 166px, 143px) rotateY(52deg);
+  -webkit-animation: flash 300ms -7556ms infinite alternate;
+          animation: flash 300ms -7556ms infinite alternate;
+}
+.particle:nth-child(300) {
+  transform: translate3d(178.25px, 139.75px, 40.5px) rotateY(71deg);
+  -webkit-animation: flash 300ms -7199ms infinite alternate;
+          animation: flash 300ms -7199ms infinite alternate;
+}
+
+@-webkit-keyframes rotateY {
+  0% {
+    transform: rotateY(0deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes rotateY {
+  0% {
+    transform: rotateY(0deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+@-webkit-keyframes rotateX {
+  0% {
+    transform: rotateX(0deg);
+  }
+  100% {
+    transform: rotateX(360deg);
+  }
+}
+@keyframes rotateX {
+  0% {
+    transform: rotateX(0deg);
+  }
+  100% {
+    transform: rotateX(360deg);
+  }
+}
+@-webkit-keyframes flash {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes flash {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
\ No newline at end of file
diff --git a/only-css-satellite/license.txt b/only-css-satellite/license.txt
new file mode 100644
index 0000000..9238e14
--- /dev/null
+++ b/only-css-satellite/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Yusuke Nakaya (https://codepen.io/YusukeNakaya/pen/VwPZyzY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/only-css-satellite/src/index.pug b/only-css-satellite/src/index.pug
new file mode 100644
index 0000000..02a3416
--- /dev/null
+++ b/only-css-satellite/src/index.pug
@@ -0,0 +1,20 @@
+mixin cameras
+  .container
+    - for (i = 0; i < 400; i++)
+      .trigger
+    .monitor
+      .camera.-z
+        .camera.-y
+          .camera.-x
+            block
+
++cameras
+  .ball
+    //- .particles
+    //-   -for (i = 0; i < 200; i++)
+    //-     .particle
+    - for (i = 0; i < 50; i++)
+      .line
+        .rotate
+          .panel
+            .graphic
\ No newline at end of file
diff --git a/only-css-satellite/src/style.scss b/only-css-satellite/src/style.scss
new file mode 100644
index 0000000..498c855
--- /dev/null
+++ b/only-css-satellite/src/style.scss
@@ -0,0 +1,184 @@
+body {
+  background: #171819;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  perspective: 400px;
+}
+
+div {
+  transform-style: preserve-3d;
+  position: absolute;
+}
+
+.container {
+  position: relative;
+  display: grid;
+  grid-template-rows: repeat(20, 5vh);
+  grid-template-columns: repeat(20, 5vw);
+  transform-style: preserve-3d;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 400px;
+    height: 400px;
+    background: rgba(#000, 0.8);
+    border-radius: 100%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 0 60px 50px rgba(#000, 1) inset;
+  }
+}
+
+.monitor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  transform-style: preserve-3d;
+}
+
+.trigger {
+  position: relative;
+  
+  @for $i from 1 through 20 {
+    @for $j from 1 through 20 {
+      $key: ($i - 1) * 20 + $j;
+      
+      &:nth-child(#{$key}) {
+        &:hover ~ .monitor {
+          .camera {
+            &.-x {
+              transform: rotateX(($i - 8) * 8deg - 32);
+            }
+            
+            &.-y {
+              transform: rotateY(($j - 8) * 8deg - 24);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.camera {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  transition: 500ms;
+  
+  &.-x {
+    transform: rotateX(0deg);
+  }
+  
+  &.-y {
+    transform: rotateY(0deg);
+  }
+}
+
+.graphic {
+  top: -5px;
+  left: -15px;
+  width: 30px;
+  height: 10px;
+  clip-path: polygon(
+    0 0,
+    100% 50%,
+    0 100%
+  );
+  background: #fff;
+}
+
+.panel {
+  transform: translateZ(200px);
+}
+
+.line {
+  @for $i from 1 through 50 {
+    &:nth-child(#{$i}) {
+      transform: rotateX(1deg * $i - 20deg);
+      
+      .rotate {
+        animation-delay: random(10000) * -1ms;
+        animation-duration: random(3000) + 5000ms;
+      }
+      
+      .graphic {
+        animation: rotateX random(3000) + 3000ms random(6000) * -1ms linear infinite;
+      }
+    }
+  }
+}
+
+.rotate {
+  animation: rotateY 5000ms linear infinite;
+}
+
+.particle {
+  width: 1px;
+  height: 1px;
+  background: #fff;
+
+  @for $i from 1 through 300 {
+    &:nth-child(#{$i}) {
+      $range: 2000;
+      $x1: (random($range) + random($range)) / 2;
+      $x2: (random($range) + random($range)) / 2;
+      $y1: (random($range) + random($range)) / 2;
+      $y2: (random($range) + random($range)) / 2;
+      $z1: (random($range) + random($range)) / 2;
+      $z2: (random($range) + random($range)) / 2;
+      
+      transform:
+        translate3d(
+          #{($x1 + $x2) / 2 - $range / 2}px,
+          #{($y1 + $y2) / 2 - $range / 2}px,
+          #{($z1 + $z2) / 2 - $range / 2}px
+        )
+        rotateY(
+          random(360) + 0deg
+        );
+      animation: flash 300ms random(10000) * -1ms infinite alternate;
+    }
+  }
+}
+
+@keyframes rotateY {
+  0% {
+    transform: rotateY(0deg);
+  }
+  
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes rotateX {
+  0% {
+    transform: rotateX(0deg);
+  }
+  
+  100% {
+    transform: rotateX(360deg);
+  }
+}
+
+@keyframes flash {
+  0% {
+    opacity: 1;
+  }
+  
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/only-css-wave-dots/README.markdown b/only-css-wave-dots/README.markdown
new file mode 100644
index 0000000..cd12879
--- /dev/null
+++ b/only-css-wave-dots/README.markdown
@@ -0,0 +1,5 @@
+# Only CSS: Wave dots
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/YusukeNakaya/pen/eYBzZjY](https://codepen.io/YusukeNakaya/pen/eYBzZjY).
+
+
diff --git a/only-css-wave-dots/dist/index.html b/only-css-wave-dots/dist/index.html
new file mode 100644
index 0000000..49f0c1c
--- /dev/null
+++ b/only-css-wave-dots/dist/index.html
@@ -0,0 +1,923 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Only CSS: Wave dots</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="camera -x">
+  <div class="camera -y">
+    <div class="camera -z">
+      <div class="sea">
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wave">
+          <div class="counter -z">
+            <div class="counter -y">
+              <div class="counter -x">
+                <div class="graphic"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/only-css-wave-dots/dist/style.css b/only-css-wave-dots/dist/style.css
new file mode 100644
index 0000000..251667c
--- /dev/null
+++ b/only-css-wave-dots/dist/style.css
@@ -0,0 +1,533 @@
+body {
+  background: linear-gradient(0deg, #1b2735 0%, #090a0f 100%);
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  font-family: "Anton", sans-serif;
+  justify-content: center;
+  align-items: center;
+  perspective: 500px;
+}
+
+div {
+  transform-style: preserve-3d;
+}
+
+.camera {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.camera.-x {
+  transform: rotateX(60deg);
+}
+.camera.-y {
+  trannsform: rotateY(0deg);
+}
+.camera.-z {
+  -webkit-animation: rotateZ 30000ms linear infinite;
+          animation: rotateZ 30000ms linear infinite;
+}
+
+.sea {
+  position: relative;
+  display: grid;
+  grid-template-rows: repeat(10, 7.5%);
+  grid-template-columns: repeat(10, 7.5%);
+  grid-gap: 2.5%;
+  width: 250px;
+  height: 250px;
+}
+
+.counter {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.counter.-x {
+  transform: rotateX(-60deg);
+}
+.counter.-y {
+  transform: rotateY(0deg);
+}
+.counter.-z {
+  animation: rotateZ 30000ms linear infinite reverse;
+}
+
+.graphic {
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at 0 3px, #fff, #6094B3 60%, #25335E);
+  border-radius: 100%;
+  filter: drop-shadow(0 100px 12px rgba(96, 148, 179, 0.2));
+}
+
+.wave:nth-child(1) {
+  -webkit-animation: wave 1000ms -30ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -30ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(2) {
+  -webkit-animation: wave 1000ms -60ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -60ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(3) {
+  -webkit-animation: wave 1000ms -90ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -90ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(4) {
+  -webkit-animation: wave 1000ms -120ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -120ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(5) {
+  -webkit-animation: wave 1000ms -150ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -150ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(6) {
+  -webkit-animation: wave 1000ms -180ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -180ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(7) {
+  -webkit-animation: wave 1000ms -210ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -210ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(8) {
+  -webkit-animation: wave 1000ms -240ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -240ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(9) {
+  -webkit-animation: wave 1000ms -270ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -270ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(10) {
+  -webkit-animation: wave 1000ms -300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(11) {
+  -webkit-animation: wave 1000ms -330ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -330ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(12) {
+  -webkit-animation: wave 1000ms -360ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -360ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(13) {
+  -webkit-animation: wave 1000ms -390ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -390ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(14) {
+  -webkit-animation: wave 1000ms -420ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -420ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(15) {
+  -webkit-animation: wave 1000ms -450ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -450ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(16) {
+  -webkit-animation: wave 1000ms -480ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -480ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(17) {
+  -webkit-animation: wave 1000ms -510ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -510ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(18) {
+  -webkit-animation: wave 1000ms -540ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -540ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(19) {
+  -webkit-animation: wave 1000ms -570ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -570ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(20) {
+  -webkit-animation: wave 1000ms -600ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -600ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(21) {
+  -webkit-animation: wave 1000ms -630ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -630ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(22) {
+  -webkit-animation: wave 1000ms -660ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -660ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(23) {
+  -webkit-animation: wave 1000ms -690ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -690ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(24) {
+  -webkit-animation: wave 1000ms -720ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -720ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(25) {
+  -webkit-animation: wave 1000ms -750ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -750ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(26) {
+  -webkit-animation: wave 1000ms -780ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -780ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(27) {
+  -webkit-animation: wave 1000ms -810ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -810ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(28) {
+  -webkit-animation: wave 1000ms -840ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -840ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(29) {
+  -webkit-animation: wave 1000ms -870ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -870ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(30) {
+  -webkit-animation: wave 1000ms -900ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -900ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(31) {
+  -webkit-animation: wave 1000ms -930ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -930ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(32) {
+  -webkit-animation: wave 1000ms -960ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -960ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(33) {
+  -webkit-animation: wave 1000ms -990ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -990ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(34) {
+  -webkit-animation: wave 1000ms -1020ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1020ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(35) {
+  -webkit-animation: wave 1000ms -1050ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1050ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(36) {
+  -webkit-animation: wave 1000ms -1080ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1080ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(37) {
+  -webkit-animation: wave 1000ms -1110ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1110ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(38) {
+  -webkit-animation: wave 1000ms -1140ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1140ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(39) {
+  -webkit-animation: wave 1000ms -1170ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1170ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(40) {
+  -webkit-animation: wave 1000ms -1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(41) {
+  -webkit-animation: wave 1000ms -1230ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1230ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(42) {
+  -webkit-animation: wave 1000ms -1260ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1260ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(43) {
+  -webkit-animation: wave 1000ms -1290ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1290ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(44) {
+  -webkit-animation: wave 1000ms -1320ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1320ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(45) {
+  -webkit-animation: wave 1000ms -1350ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1350ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(46) {
+  -webkit-animation: wave 1000ms -1380ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1380ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(47) {
+  -webkit-animation: wave 1000ms -1410ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1410ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(48) {
+  -webkit-animation: wave 1000ms -1440ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1440ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(49) {
+  -webkit-animation: wave 1000ms -1470ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1470ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(50) {
+  -webkit-animation: wave 1000ms -1500ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1500ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(51) {
+  -webkit-animation: wave 1000ms -1530ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1530ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(52) {
+  -webkit-animation: wave 1000ms -1560ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1560ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(53) {
+  -webkit-animation: wave 1000ms -1590ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1590ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(54) {
+  -webkit-animation: wave 1000ms -1620ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1620ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(55) {
+  -webkit-animation: wave 1000ms -1650ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1650ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(56) {
+  -webkit-animation: wave 1000ms -1680ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1680ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(57) {
+  -webkit-animation: wave 1000ms -1710ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1710ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(58) {
+  -webkit-animation: wave 1000ms -1740ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1740ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(59) {
+  -webkit-animation: wave 1000ms -1770ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1770ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(60) {
+  -webkit-animation: wave 1000ms -1800ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1800ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(61) {
+  -webkit-animation: wave 1000ms -1830ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1830ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(62) {
+  -webkit-animation: wave 1000ms -1860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(63) {
+  -webkit-animation: wave 1000ms -1890ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1890ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(64) {
+  -webkit-animation: wave 1000ms -1920ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1920ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(65) {
+  -webkit-animation: wave 1000ms -1950ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1950ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(66) {
+  -webkit-animation: wave 1000ms -1980ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -1980ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(67) {
+  -webkit-animation: wave 1000ms -2010ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2010ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(68) {
+  -webkit-animation: wave 1000ms -2040ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2040ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(69) {
+  -webkit-animation: wave 1000ms -2070ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2070ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(70) {
+  -webkit-animation: wave 1000ms -2100ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2100ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(71) {
+  -webkit-animation: wave 1000ms -2130ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2130ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(72) {
+  -webkit-animation: wave 1000ms -2160ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2160ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(73) {
+  -webkit-animation: wave 1000ms -2190ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2190ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(74) {
+  -webkit-animation: wave 1000ms -2220ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2220ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(75) {
+  -webkit-animation: wave 1000ms -2250ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2250ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(76) {
+  -webkit-animation: wave 1000ms -2280ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2280ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(77) {
+  -webkit-animation: wave 1000ms -2310ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2310ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(78) {
+  -webkit-animation: wave 1000ms -2340ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2340ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(79) {
+  -webkit-animation: wave 1000ms -2370ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2370ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(80) {
+  -webkit-animation: wave 1000ms -2400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(81) {
+  -webkit-animation: wave 1000ms -2430ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2430ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(82) {
+  -webkit-animation: wave 1000ms -2460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(83) {
+  -webkit-animation: wave 1000ms -2490ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2490ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(84) {
+  -webkit-animation: wave 1000ms -2520ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2520ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(85) {
+  -webkit-animation: wave 1000ms -2550ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2550ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(86) {
+  -webkit-animation: wave 1000ms -2580ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2580ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(87) {
+  -webkit-animation: wave 1000ms -2610ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2610ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(88) {
+  -webkit-animation: wave 1000ms -2640ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2640ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(89) {
+  -webkit-animation: wave 1000ms -2670ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2670ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(90) {
+  -webkit-animation: wave 1000ms -2700ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2700ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(91) {
+  -webkit-animation: wave 1000ms -2730ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2730ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(92) {
+  -webkit-animation: wave 1000ms -2760ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2760ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(93) {
+  -webkit-animation: wave 1000ms -2790ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2790ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(94) {
+  -webkit-animation: wave 1000ms -2820ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2820ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(95) {
+  -webkit-animation: wave 1000ms -2850ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2850ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(96) {
+  -webkit-animation: wave 1000ms -2880ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2880ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(97) {
+  -webkit-animation: wave 1000ms -2910ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2910ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(98) {
+  -webkit-animation: wave 1000ms -2940ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2940ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(99) {
+  -webkit-animation: wave 1000ms -2970ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -2970ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+.wave:nth-child(100) {
+  -webkit-animation: wave 1000ms -3000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+          animation: wave 1000ms -3000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+
+@-webkit-keyframes rotateX {
+  0% {
+    transform: rotateX(0deg);
+  }
+  100% {
+    transform: rotateX(360deg);
+  }
+}
+
+@keyframes rotateX {
+  0% {
+    transform: rotateX(0deg);
+  }
+  100% {
+    transform: rotateX(360deg);
+  }
+}
+@-webkit-keyframes rotateY {
+  0% {
+    transform: rotateY(0deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+@keyframes rotateY {
+  0% {
+    transform: rotateY(0deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+@-webkit-keyframes rotateZ {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+@keyframes rotateZ {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+@-webkit-keyframes wave {
+  0% {
+    transform: translateZ(0);
+  }
+  100% {
+    transform: translateZ(30px);
+  }
+}
+@keyframes wave {
+  0% {
+    transform: translateZ(0);
+  }
+  100% {
+    transform: translateZ(30px);
+  }
+}
\ No newline at end of file
diff --git a/only-css-wave-dots/license.txt b/only-css-wave-dots/license.txt
new file mode 100644
index 0000000..3a5584a
--- /dev/null
+++ b/only-css-wave-dots/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Yusuke Nakaya (https://codepen.io/YusukeNakaya/pen/eYBzZjY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/only-css-wave-dots/src/index.pug b/only-css-wave-dots/src/index.pug
new file mode 100644
index 0000000..306cda0
--- /dev/null
+++ b/only-css-wave-dots/src/index.pug
@@ -0,0 +1,10 @@
+.camera.-x
+  .camera.-y
+    .camera.-z
+      .sea
+        - for (i = 0; i < 100; i++)
+          .wave
+            .counter.-z
+              .counter.-y
+                .counter.-x
+                  .graphic
\ No newline at end of file
diff --git a/only-css-wave-dots/src/style.scss b/only-css-wave-dots/src/style.scss
new file mode 100644
index 0000000..800b4e1
--- /dev/null
+++ b/only-css-wave-dots/src/style.scss
@@ -0,0 +1,124 @@
+body {
+  background: linear-gradient(0deg, #1b2735 0%, #090a0f 100%);
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  font-family: 'Anton', sans-serif;
+  justify-content: center;
+  align-items: center;
+  perspective: 500px;
+}
+
+div {
+  transform-style: preserve-3d;
+}
+
+$seaSize: 250px;
+$waveGap: 2.5%;
+$waveSize: 10%;
+$angleX: 60deg;
+
+.camera {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+  &.-x {
+    transform: rotateX($angleX);
+  }
+  
+  &.-y {
+    trannsform: rotateY(0deg);
+  }
+  
+  &.-z {
+    animation: rotateZ 30000ms linear infinite;
+  }
+}
+
+.sea {
+  position: relative;
+  display: grid;
+  grid-template-rows: repeat(10, $waveSize - $waveGap);
+  grid-template-columns: repeat(10, $waveSize - $waveGap);
+  grid-gap: $waveGap;
+  width: $seaSize;
+  height: $seaSize;
+}
+
+.counter {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  
+  &.-x {
+    transform: rotateX(-$angleX);
+  }
+  
+  &.-y {
+    transform: rotateY(0deg);
+  }
+  
+  &.-z {
+    animation: rotateZ 30000ms linear infinite reverse;
+  }
+}
+
+.graphic {
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at 0 3px, #fff, #6094B3 60%, #25335E);
+  border-radius: 100%;
+  filter: drop-shadow(0 100px 12px rgba(#6094B3, 0.2));
+}
+
+.wave {
+  @for $i from 1 through 100 {
+    &:nth-child(#{$i}) {
+      animation: wave 1000ms $i * -30ms cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite alternate;
+    }
+  }
+}
+
+@keyframes rotateX {
+  0% {
+    transform: rotateX(0deg);
+  }
+  
+  100% {
+    transform: rotateX(360deg);
+  }
+}
+
+@keyframes rotateY {
+  0% {
+    transform: rotateY(0deg);
+  }
+  
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes rotateZ {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@keyframes wave {
+  0% {
+    transform: translateZ(0);
+  }
+  
+  100% {
+    transform: translateZ(30px);
+  }
+}
diff --git a/orange-and-blue-distance-field-spiral/README.markdown b/orange-and-blue-distance-field-spiral/README.markdown
new file mode 100644
index 0000000..724d918
--- /dev/null
+++ b/orange-and-blue-distance-field-spiral/README.markdown
@@ -0,0 +1,5 @@
+# Orange and blue distance field spiral
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/terabaud/pen/poogqxq](https://codepen.io/terabaud/pen/poogqxq).
+
+
diff --git a/orange-and-blue-distance-field-spiral/dist/index.html b/orange-and-blue-distance-field-spiral/dist/index.html
new file mode 100644
index 0000000..209d2e1
--- /dev/null
+++ b/orange-and-blue-distance-field-spiral/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Orange and blue distance field spiral</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canv"></canvas>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/orange-and-blue-distance-field-spiral/dist/script.js b/orange-and-blue-distance-field-spiral/dist/script.js
new file mode 100644
index 0000000..43cb3fe
--- /dev/null
+++ b/orange-and-blue-distance-field-spiral/dist/script.js
@@ -0,0 +1,151 @@
+import GLea from 'https://terabaud.github.io/glea/dist/glea.js';
+
+// this is just for code highlighting in VSCode
+// via the glsl-literal extension
+const glsl = x => x;
+
+const frag = glsl`
+precision highp float;
+uniform float time;
+uniform float width;
+uniform float height;
+uniform sampler2D texture;
+const float PI = 3.141592654;
+const float DEG = PI / 180.0;
+const int ITERS = 10000;
+
+
+vec2 coords() {
+  float vmin = min(width, height);
+  return vec2((gl_FragCoord.x - width * .5) / vmin,
+              (gl_FragCoord.y - height * .5) / vmin);
+}
+
+vec2 rotate(vec2 p, float a) {
+  return vec2(p.x * cos(a) - p.y * sin(a),
+              p.x * sin(a) + p.y * cos(a));
+}
+
+vec2 repeat(in vec2 p, in vec2 c) {
+  return mod(p, c) - 0.5 * c;
+}
+
+// Distance functions by Inigo Quilez
+// https://iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm
+float circle(in vec2 p, in vec2 pos, float radius) {
+  return length((p - pos)) - radius;
+}
+
+float distanceField(vec2 p) {
+  float d = 10000.0; 
+  for (int i = 0; i < 250; i++) {
+    vec2 point = vec2(cos(float(i)) * float(i), sin(float(i)) * float(i));
+    d = min(d, circle(p, point, 3.0));
+  }
+  return d;
+}
+
+// check if is prime, works for numbers 1 .. 900
+bool isPrime(int n) {
+  if (n <= 3) {
+    return (n > 1) ? true : false;
+  }
+  if (mod(float(n), 2.0) == 0.0 || mod(float(n), 3.0) == 0.0) {
+    return false;
+  }
+  int i = 5;
+  for (int j = 0; j < 30; j++) {
+    if (i * i > n) {
+      return true;
+    }
+    if (mod(float(n), float(i)) == 0.0 || mod(float(n), float(i + 2)) == 0.0) {
+      return false;
+    }
+    i += 6;
+  } 
+  return false;
+}
+
+float primeDistanceField(vec2 p) {
+  float d = 10000.0; 
+  for (int i = 0; i < 250; i++) {
+    if (isPrime(i)) {
+      vec2 point = vec2(cos(float(i)) * float(i), sin(float(i)) * float(i));
+      d = min(d, circle(p, point, 3.0));
+    }
+  }
+  return d;
+}
+
+vec3 shade(in vec2 p)
+{
+  vec3 background = vec3(.1, .3, .7);
+  vec3 foreground = vec3(.7, .3, .1);
+  float sdf = distanceField(p);
+  if (sdf < 0.0) {
+    return foreground;
+  }
+
+  vec3 col = background;
+  
+  // Darken around surface
+  col = mix(col, col*1.0-exp(-2.0 * abs(sdf)), 0.4);
+  
+  // repeating lines
+  col *= 0.8 + 0.2*cos(1.25*sdf - time * .5);
+  return col;
+}
+
+
+void main () {
+  vec2 p0 = coords();
+  float zoom = 150.0 + sin(time * .05)*100.0;
+  vec2 p1 = rotate(p0 * zoom, time * DEG);
+  vec3 col = shade(p1);
+  gl_FragColor = vec4(col, 1.0);
+}
+`
+
+const vert = glsl`
+precision mediump float;
+attribute vec2 position;
+
+void main () {
+  gl_Position = vec4(position, 0, 1.0);
+}
+`
+
+
+
+
+let texture = null;
+
+const glea = new GLea({
+  shaders: [
+    GLea.fragmentShader(frag),
+    GLea.vertexShader(vert)
+  ],
+  buffers: {
+    'position': GLea.buffer(2, [1, 1,  -1, 1,  1,-1,  -1,-1])
+  }
+}).create();
+
+function loop(time) {
+  const { gl } = glea;
+  glea.clear();
+  glea.uni('width', glea.width);
+  glea.uni('height', glea.height);
+  glea.uni('time', time * .005);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  requestAnimationFrame(loop);
+}
+
+function setup() {
+  const { gl } = glea;
+  window.addEventListener('resize', () => {
+    glea.resize();
+  });
+  loop(0);
+}
+
+setup();
\ No newline at end of file
diff --git a/orange-and-blue-distance-field-spiral/dist/style.css b/orange-and-blue-distance-field-spiral/dist/style.css
new file mode 100644
index 0000000..46b47cb
--- /dev/null
+++ b/orange-and-blue-distance-field-spiral/dist/style.css
@@ -0,0 +1,9 @@
+body {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+  width: 100vw;
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/orange-and-blue-distance-field-spiral/license.txt b/orange-and-blue-distance-field-spiral/license.txt
new file mode 100644
index 0000000..e728b3c
--- /dev/null
+++ b/orange-and-blue-distance-field-spiral/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Lea Rosema (https://codepen.io/terabaud/pen/poogqxq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/orange-and-blue-distance-field-spiral/src/index.html b/orange-and-blue-distance-field-spiral/src/index.html
new file mode 100644
index 0000000..65d982a
--- /dev/null
+++ b/orange-and-blue-distance-field-spiral/src/index.html
@@ -0,0 +1 @@
+<canvas id="canv"></canvas>
\ No newline at end of file
diff --git a/orange-and-blue-distance-field-spiral/src/script.js b/orange-and-blue-distance-field-spiral/src/script.js
new file mode 100644
index 0000000..c9e3f04
--- /dev/null
+++ b/orange-and-blue-distance-field-spiral/src/script.js
@@ -0,0 +1,151 @@
+import GLea from 'https://terabaud.github.io/glea/dist/glea.js';
+
+// this is just for code highlighting in VSCode
+// via the glsl-literal extension
+const glsl = x => x;
+
+const frag = glsl`
+precision highp float;
+uniform float time;
+uniform float width;
+uniform float height;
+uniform sampler2D texture;
+const float PI = 3.141592654;
+const float DEG = PI / 180.0;
+const int ITERS = 10000;
+
+
+vec2 coords() {
+  float vmin = min(width, height);
+  return vec2((gl_FragCoord.x - width * .5) / vmin,
+              (gl_FragCoord.y - height * .5) / vmin);
+}
+
+vec2 rotate(vec2 p, float a) {
+  return vec2(p.x * cos(a) - p.y * sin(a),
+              p.x * sin(a) + p.y * cos(a));
+}
+
+vec2 repeat(in vec2 p, in vec2 c) {
+  return mod(p, c) - 0.5 * c;
+}
+
+// Distance functions by Inigo Quilez
+// https://iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm
+float circle(in vec2 p, in vec2 pos, float radius) {
+  return length((p - pos)) - radius;
+}
+
+float distanceField(vec2 p) {
+  float d = 10000.0; 
+  for (int i = 0; i < 250; i++) {
+    vec2 point = vec2(cos(float(i)) * float(i), sin(float(i)) * float(i));
+    d = min(d, circle(p, point, 3.0));
+  }
+  return d;
+}
+
+// check if is prime, works for numbers 1 .. 900
+bool isPrime(int n) {
+  if (n <= 3) {
+    return (n > 1) ? true : false;
+  }
+  if (mod(float(n), 2.0) == 0.0 || mod(float(n), 3.0) == 0.0) {
+    return false;
+  }
+  int i = 5;
+  for (int j = 0; j < 30; j++) {
+    if (i * i > n) {
+      return true;
+    }
+    if (mod(float(n), float(i)) == 0.0 || mod(float(n), float(i + 2)) == 0.0) {
+      return false;
+    }
+    i += 6;
+  } 
+  return false;
+}
+
+float primeDistanceField(vec2 p) {
+  float d = 10000.0; 
+  for (int i = 0; i < 250; i++) {
+    if (isPrime(i)) {
+      vec2 point = vec2(cos(float(i)) * float(i), sin(float(i)) * float(i));
+      d = min(d, circle(p, point, 3.0));
+    }
+  }
+  return d;
+}
+
+vec3 shade(in vec2 p)
+{
+  vec3 background = vec3(.1, .3, .7);
+  vec3 foreground = vec3(.7, .3, .1);
+  float sdf = distanceField(p);
+  if (sdf < 0.0) {
+    return foreground;
+  }
+
+  vec3 col = background;
+  
+  // Darken around surface
+  col = mix(col, col*1.0-exp(-2.0 * abs(sdf)), 0.4);
+  
+  // repeating lines
+  col *= 0.8 + 0.2*cos(1.25*sdf - time * .5);
+  return col;
+}
+
+
+void main () {
+  vec2 p0 = coords();
+  float zoom = 150.0 + sin(time * .05)*100.0;
+  vec2 p1 = rotate(p0 * zoom, time * DEG);
+  vec3 col = shade(p1);
+  gl_FragColor = vec4(col, 1.0);
+}
+`
+
+const vert = glsl`
+precision mediump float;
+attribute vec2 position;
+
+void main () {
+  gl_Position = vec4(position, 0, 1.0);
+}
+`
+
+
+
+
+let texture = null;
+
+const glea = new GLea({
+  shaders: [
+    GLea.fragmentShader(frag),
+    GLea.vertexShader(vert)
+  ],
+  buffers: {
+    'position': GLea.buffer(2, [1, 1,  -1, 1,  1,-1,  -1,-1])
+  }
+}).create();
+
+function loop(time) {
+  const { gl } = glea;
+  glea.clear();
+  glea.uni('width', glea.width);
+  glea.uni('height', glea.height);
+  glea.uni('time', time * .005);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  requestAnimationFrame(loop);
+}
+
+function setup() {
+  const { gl } = glea;
+  window.addEventListener('resize', () => {
+    glea.resize();
+  });
+  loop(0);
+}
+
+setup();
diff --git a/orange-and-blue-distance-field-spiral/src/style.css b/orange-and-blue-distance-field-spiral/src/style.css
new file mode 100644
index 0000000..46b47cb
--- /dev/null
+++ b/orange-and-blue-distance-field-spiral/src/style.css
@@ -0,0 +1,9 @@
+body {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+  width: 100vw;
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/p5js-svg-flow-field/README.markdown b/p5js-svg-flow-field/README.markdown
new file mode 100644
index 0000000..a460afa
--- /dev/null
+++ b/p5js-svg-flow-field/README.markdown
@@ -0,0 +1,5 @@
+# P5js SVG Flow Field
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/MWvYvdw](https://codepen.io/cobra_winfrey/pen/MWvYvdw).
+
+
diff --git a/p5js-svg-flow-field/dist/index.html b/p5js-svg-flow-field/dist/index.html
new file mode 100644
index 0000000..9673bd4
--- /dev/null
+++ b/p5js-svg-flow-field/dist/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - P5js SVG Flow Field</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg id="gradients" width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+     <linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="0">
+        <stop offset="0%" stop-color="#7d2cac"/>
+        <stop offset="100%" stop-color="transparent"/>
+     </linearGradient>
+    <linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="0">
+        <stop offset="0%" stop-color="transparent"/>
+        <stop offset="100%" stop-color="#5cbbdd"/>
+     </linearGradient>
+    <linearGradient gradientUnits="userSpaceOnUse" id="Gradient3" x1="0" x2="1" y1="0" y2="0">
+        <stop offset="-25%" stop-color="#5cbbdd"/>
+        <stop offset="50%" stop-color="transparent"/>
+        <stop offset="125%" stop-color="#5cbbdd"/>
+     </linearGradient>
+    <linearGradient id="Gradient4" x1="0" x2="1" y1="0" y2="0">
+        <stop offset="0%" stop-color="transparent"/>
+        <stop offset="100%" stop-color="#deb84d"/>
+     </linearGradient>
+  </defs>
+</svg>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js'></script>
+<script src='https://unpkg.com/p5.js-svg@1.1.1/dist/p5.svg.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/p5js-svg-flow-field/dist/script.js b/p5js-svg-flow-field/dist/script.js
new file mode 100644
index 0000000..4d18b8d
--- /dev/null
+++ b/p5js-svg-flow-field/dist/script.js
@@ -0,0 +1,96 @@
+let offset = 0;
+let xoff = 0;
+let xoff2 = 0;
+let yoff = 0;
+let strokeWarp;
+let strokeOffset = 5;
+let xOffset = 5;
+let strokeSize = 3;
+let totalCount = 0;
+let strokeVariant = 2;
+let body = document.body;
+
+function draw() {
+  totalCount++;
+  noStroke();
+  noFill();
+  for (b = 0; b < 80 - (strokeSize * 2); b++) {
+    for (k = 0; k < 1; k++) {
+      if (totalCount < 2) {
+        xOffset = (int(random(1, 15))/100) + .825;
+        beginShape();
+        for (i = 0; i < numVertices; i++) {
+          strokeVariant = random(2.25, 3.5);
+          var offset =
+            map(
+              noise(
+                cos((TWO_PI / numVertices) * i) + 144,
+                sin((TWO_PI / numVertices) * i) + 144,
+                xoff
+              ),
+              0,
+              1,
+              -strokeWarp,
+              strokeWarp
+            ) * strokeWarp;
+
+          curveVertex(
+            -50 + i * (1.5 * strokeSize) + offset,
+            -55 + b  * ((strokeOffset * strokeSize)) + offset
+          );
+
+          if (random(1) > xOffset) {
+            endShape();
+            strokeWeight(strokeVariant * strokeSize);
+            beginShape();
+            stroke(0);
+          }
+          xoff += 0.0000125 * (strokeSize * strokeOffset);
+        }
+        endShape();
+      }
+    }
+  }
+  if (totalCount == 2) {
+    body.style.setProperty("--rotate", int(random(1,5)) );
+    body.style.setProperty("--opacity", 1/int(random(1,7)));
+    body.style.setProperty("--opacity2", 1/int(random(1,7)));
+    body.style.setProperty("--display", "var(--none" + int(random(1,40)) + ")");
+    var elem = document.querySelector("div");
+    var clone = elem.cloneNode(true);
+    clone.id = "toplayer";
+    elem.after(clone);
+    body.classList.add("loaded");
+    setTimeout(() => {  
+      body.classList.remove("loading");
+    }, 50);
+  }
+}
+
+function setup() {
+  totalCount = 0;
+  strokeSize = 3;
+  strokeOffset = int(random(5, 7));
+  strokeWarp = ((strokeSize/1.25) + (strokeOffset * 1.5)) / 2;
+  createCanvas(600, 600, SVG);
+  frameRate(5);
+  numVertices = 200;
+}
+
+body.addEventListener(
+  "click",
+  function (event) {
+    body.classList.add("loading");
+    strokeSize = random(2, 4.25);
+    strokeOffset = int(random(4, 6));
+    strokeWarp = (strokeSize + (strokeOffset * 1.5)) / 2;
+    numVertices = 260 - (int(strokeSize) * 25);
+    let overlay = document.getElementById("toplayer");
+    setTimeout(() => { 
+      overlay.remove();
+      clear();
+      totalCount = 0;
+    }, 500);
+  },
+  false
+);
\ No newline at end of file
diff --git a/p5js-svg-flow-field/dist/style.css b/p5js-svg-flow-field/dist/style.css
new file mode 100644
index 0000000..174cd06
--- /dev/null
+++ b/p5js-svg-flow-field/dist/style.css
@@ -0,0 +1,160 @@
+body {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+  --none30: none;
+}
+body:after {
+  content: "click me";
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  bottom: 10px;
+  font-size: 10px;
+  font-family: "Futura";
+  text-transform: uppercase;
+  font-weight: 900;
+}
+body:before {
+  content: "";
+  position: absolute;
+  width: 600px;
+  height: 600px;
+  z-index: 10;
+  background: #fff;
+  left: calc(50% - 300px);
+  top: calc(50% - 300px);
+  transition: opacity 0.5s ease-in-out;
+  transition-delay: 0.5s;
+  opacity: 0;
+}
+body.loading.loaded {
+  pointer-events: none;
+}
+body.loading.loaded:before {
+  opacity: 1;
+}
+body.loaded main {
+  opacity: 1;
+}
+body main {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.5s ease-in-out;
+}
+@media (max-width: 800px) {
+  body main {
+    transform: scale(0.75);
+  }
+}
+body main > div {
+  transition: 0.3s ease-in-out;
+  max-width: 600px;
+  max-height: 600px;
+  position: relative;
+}
+body main > div#toplayer {
+  z-index: 2;
+  position: absolute;
+  left: calc(50% - 300px);
+  top: calc(50% - 300px);
+  -webkit-mask: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent, rgba(0, 0, 0, 0.25)), url("data:image/png;base64,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") 50% 50%/20px 20px repeat;
+          mask: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent, rgba(0, 0, 0, 0.25)), url("data:image/png;base64,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") 50% 50%/20px 20px repeat;
+  filter: contrast(1);
+  transition: opacity 0.5s ease-in-out;
+  transition-delay: 1s;
+}
+body main > div#toplayer:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform: rotate(calc((var(--rotate) * 3) * 90deg));
+  background: radial-gradient(circle at bottom, #7d2cac, transparent 60%);
+}
+body main > div#toplayer g path {
+  stroke: url(#Gradient1);
+}
+body main > div#toplayer g path:nth-of-type(even) {
+  stroke: url(#Gradient2);
+}
+body main > div#toplayer g path:nth-of-type(17n) {
+  stroke: url(#Gradient4);
+}
+body main > div#toplayer g path:nth-of-type(12n) {
+  stroke: url(#Gradient3);
+}
+body main > div:not(#toplayer) {
+  box-shadow: 0 0 0 20px #fff, 0 40px 40px -10px rgba(0, 0, 0, 0.5);
+  background: #deb84d;
+}
+body main > div:not(#toplayer):before, body main > div:not(#toplayer):after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to right, #7d2cac 50%, transparent);
+  -webkit-mask: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent, rgba(0, 0, 0, 0.25)), url("data:image/png;base64,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") 50% 50%/20px 20px repeat;
+          mask: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent, rgba(0, 0, 0, 0.25)), url("data:image/png;base64,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") 50% 50%/20px 20px repeat;
+  filter: contrast(2);
+  transform: rotate(calc(var(--rotate) * 90deg));
+  z-index: 2;
+  opacity: var(--opacity2);
+}
+body main > div:not(#toplayer):after {
+  background: #7d2cac;
+  -webkit-mask: url("data:image/png;base64,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") 50% 50%/20px 20px repeat, radial-gradient(circle at top, #000, transparent 60%) 50% -250px/100% 100% no-repeat;
+          mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAMAAAC5KTl3AAAAgVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABtFS1lAAAAK3RSTlMWi3QSa1uQOKBWCTwcb6V4gWInTWYOqQSGfa6XLyszmyABlFFJXySxQ0BGn2PQBgAAC4NJREFUWMMV1kWO5UAQRdFk5kwzs/33v8Cunr7ZUehKAdaRUAse99ozDjF5BqswrPKm7btzJ2tRziN3rMYXC236humIV5Our7nHWnVdFOBojW2XVnkeu1IZHNJH5OPHj9TjgVxBGBwAAmp60WoA1gBBvg3XMFhxUQ4KuLqx0CritYZPPXinsOqB7I76+OHaZlPzLEcftrqOlOwjeXvuEuH6t6emkaofgVUDIb4fEZB6CmRAeFCTq11lxbAgUyx4rXkqlH9I4bTUDRRVD1xjbqb9HyUBn7rhtr1x+x9Y0e3BdX31/loYvZaLxqnjbRuokz+pPG7WebnSNKE3yE6Tka4aDEDMVYr6Neq126c+ZR2nzzm3yyiC7PGWG/1uueqZudrVGYNdsgOMDvt1cI8CXu63QIcPvYNY8z870WwYazTS7DqpDEknZqS0AFXObWUxTaw0q5pnHlq4oQImakpLfJkmErdvAfhsc7lod0DVT4tuob25C0tQjzdiFObCz7U7eaKGP3s6yQVgQ/y+q+nY6K5dfV75iXzcNlGIP38aj22sVwtWWKMRb7B5HoHPaBvI1Ve5TSXATi66vV6utxsV+aZNFu+93VvlrG/oj8Wp67YT8l+Oq6PjwdGatFm7SEAP13kE0y9CEcf9qhtEWCMIq5AGq71moEAI9vrmFcmO8+7ZyDnmRN/VUaFkM2ce8KuBGFzDMmY6myLfQGra2ofgHhbJRXuRDZ4H+HmliWBHXQ0ysLGfv6FetbxtxzRgIZWjIsGVFl5imPXeyvVyayNek+dSWzjXd4t310YBdaF8sXeKs481PjsXbAtIru2+wHbv3GVh3sQY6Dnu6pF3pZ714VYdDi9A5GkXR/6xgaZN/tpQ8wVV3zeBuB+njoBNE4wjc+uA523ysXGd/P2sntmOb3OdHNWP5OVrxD3eJHdtH8QVkEIAqCor3hReR96yqt6PkTQfenllooQ447h6tOrnnuzwA8fMpq+jqg1oW8fTYYIncAYpVeTvkEFr/khQSbjoE8ykx9049OkE5MQEO9lC24tT7DwThQgf4Fhf8nGgAo3GYaON3crODpOr2pu5dBABz69t7F5yJBBo+r6QJdeLDWEoO7r1tceR3haA7gc7eZrCvpxSXXeKpo4P+hRixo9DeOFbqQVjKyWfBg9pnrEZKzK7R437YTTwhfoySG/YOCt3fs4aXlU3FjKortqQ6XyXaD0+Y/8VoqpyU9TRW45eN4oBxAH8Y/jLnNXfELJW+/p/MgO9Z+mBli2qqAP7dV/Arc2+YZRZwtBW8/p32y5ZsEuCS4O5AAgfR7Dde7zhiGfgvurQkfAXIrUG61rmxc2EZo18ph4vaWZI+QM0JdsbNlBJlPlwf9uguujQJy0j7TgTHdtRnjybTg55Hkk9S6l2rpYahumSewKHVosa1bh2Y6r9JGkdKvIDN/eeAwScrfjoLkCxWJuFZQ53FNP5w9XbQd1HhgHcVB/0fATG3sUUid1RTfc2+7pZVKldFSsaEK0v4k90tapQOk2HIbMhaJQtrUEL5+3sDanh8sOpbYRoQoqXWu6SQcUTQL9jzOrXNPWCJwXge4U7tlU1hkF012cAmvp8llQxf1IEMcw14pURxVOWATz4ITnYQjuF+vDXg5hgoiqXzO6mS91FQUBheURHIJxUeU1i3P0WOMpsm7vFYk0JJi/Ev+X3FwYD69cARPuP5GIc0PxoAFjcLRbNur0iMTrQmBBNYJ2ngU4x7SWfdTRl52Bqv7LmYW3C1CyTCPTHeWWIAM/Whm32COHsaj+2UQ739XB9t6NV0o9E9b7CW3XNiXzi9e0KiE+3rntukdIDBWrU2jsfQWuyFJRANxq8StHVv1JPy2C3Byco7qdNbASrnNXZ8G0L/Wp/pif4Ai9aEZ9Bb+TRx+REBdGlkF/s0dUdMSMr+6YCbuGxqPWdzcdqutvqkBzCksFcwAtjf55TeuH79M6AQa7r5PLeXxMFIlQKrXP9VJ275WGX+ptpf+tvTDBsecPnYQAlAWrVbRVJ7K2pRHwIjtSpbX96Y/lbKk6ZWXlBmh15r8yAWQsYxXgBOXYMAfHnUXF+rDqnB8bXDRtAn7bCziIqetSboK3NexMePvsCRLvmsoREA+kH8j4HWFpnNEaWgOmR7xyXHfTaz3slHc/YA6H6tl/L8d5tPcIwwD0tjvRaq3Y5BmYBSDClpv0VIX4s8D0XK3sPdpAb94HjPLkgboEz9EdZATW6ZdcmQvtKUwoWw+nAVKA7IcdY1UHnvNnIBplKci+knzewLz5/GGnzkGuuGky+0LTjtGBGR85EQICDqKChnm5pH3Z44nnWAk1YRdyu3g7QoFZ0h8jkr2ffjKmi+Qvsp+9GvNGZHmgW+YQAGUw7PPt8IPKbdy432vhKtRJjKWcSqq7helj81o3nfmaxVZ7Sqie8OOBk9WsyTD/ab7fQ5aWwQeJvnH6+ayo4IdIkOSBJjzXkgr+1TPhAx1AXDsxtCCj3TzQTLA1p782f7a8vdgPfwwrXmZxxbqo2h+6Zlo6mcMY4V7cFBOLm17VCvx9Qa2tAnkxEB+KYyQgbgAAnmNDOdOO6y2Cb+lke1MWQc9o+EMdQf7ubIG3Ek8GZ4k1PtGjbhwgOMPp5Em59JMVk/jU8/aF73Xcrd3UBNZyueQu0/xz2aGtZT8CRziOax2BWFXaeDzgZNV7oRtUzFoijoETf3xkAFFk3OMb7SgPh5wxU1+MygDIp9gZChH2qEcpgLh8pBIK90PXT1ZSU+ZExFK4Vm4GL/J7+K13lS5dQkW4HQwl6GX4yLqu8GhGWS2k75yel5IZIfFNdAL0NpKr2N5dQesBnxa42DLgJd6agS1jJsp1mO1dip7PU4P6diLLoTsZ4m3Q0QweiqeFfIGPLgF6v6mSVv6xe85VBD/1Mpe3AurRbcJ9SEo8NszNVy8rOCEexyIFcJRvYAlI/wk2I7r3p60FFLQXoH2q9xri/m41svRPbW0/EnPn2DWsmk0IiPpB60aa3+hiFfWuC8ZvWKEd9LxAk3HcOof6d77RewPaPsGw5lQAHcZN2vx1448u9pLfMLGQ3BSRRjBzRhKt7HcCw/7aqjtCDs5q76b4ZGphxN2th1WeXYlfnozX3ebKtX4Te11hf1tZP1diiGjIDAB1cR4Sb9rcFPC/nBARjlgDxd+tCBb1t91j71xJcgGjT3g/dUFnXXNiDrxkyoHANPk58ACPUa42hj8tgGrhiXOCmygxFZBiT2wyAJTDJ4wJEPmp6JIrDaSWYNqv4xH2wwdSTGYb3E0pXnS39nmLUsqoVZxzSoegqzd0o06wdbTXsaHGL+IF4JtIcXddTcD/dCd8hVf+fWPSV553kjMmMEULLS8HcgmptDO955dLGX78PjiDA6IsTHPm5IA6bc5ha0gaGkoEttXuxU11B2dOJ65/Q08tEF1+Y9cr2Nh/VECfQ33GyvR/gsdN1LuIeLpKMCAF2yRr769g9/4aJLZNRI71m2S91+Kp+Q0zubTcxoG2/6gm1Q79wkMj2XNO2ui7nWw8ULtu27CCvqTGX2PffD+xcwgh/TrOKvGZMM5jRFGDTn4NO/lwnDR/GY/waDZtkWDUPI0O8ztcFVqp6r2ZW+2bvkJ3raptYagFqu95VdIaml2CIp6CKets34x+fH2C+zH4cVFO7vj+6k2FU39PtRhWluYeZ3gDz1TLB9K2v7SD9gJU1qDxoRDrAWcrFGLyndhdtd0505+gEP79adK8fmFCWNYC+ahzVNcRH79E8dA1iqX/N0qq22xcOc20ALxLDspEj4QCFBQMgaIwoKbxr0Bd7Sbws6GiRK6tqoPfpiCle23axejRLyO1I+ahsEpWrzT5ZsCyS5RcY9jMfENFxSnhKsrfW8JHH6/rdQUMfmQPT3Uz9gY0C/pu1yuCnrPUvio0a1qMEosA/EwIzzid7cqsAAAAASUVORK5CYII=") 50% 50%/20px 20px repeat, radial-gradient(circle at top, #000, transparent 60%) 50% -250px/100% 100% no-repeat;
+  filter: contrast(2);
+  transform: rotate(calc((var(--rotate) * 2) * 90deg));
+  z-index: 0;
+  opacity: var(--opacity);
+}
+body #gradients {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+body svg {
+  width: 600px;
+  height: 600px;
+  z-index: 2;
+  position: relative;
+  transition: opacity 1s ease-in-out;
+  transition-delay: 1s;
+  transform: rotate(calc(var(--rotate) * -90deg));
+}
+body svg > g {
+  transform: scale(1, 1);
+}
+body svg > g path {
+  stroke: #151223;
+}
+body svg > g path:nth-of-type(13n), body svg > g path:nth-of-type(14n) {
+  stroke: #7d2cac;
+}
+body svg > g path:nth-of-type(12n) {
+  display: var(--display);
+}
+body svg > g path:nth-of-type(3n) {
+  stroke: url(#Gradient3);
+}
+body svg > g path:nth-of-type(4n) {
+  stroke-dashoffset: 20px;
+  stroke-dasharray: 80px;
+}
\ No newline at end of file
diff --git a/p5js-svg-flow-field/license.txt b/p5js-svg-flow-field/license.txt
new file mode 100644
index 0000000..c0c8e41
--- /dev/null
+++ b/p5js-svg-flow-field/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/MWvYvdw)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/p5js-svg-flow-field/src/index.html b/p5js-svg-flow-field/src/index.html
new file mode 100644
index 0000000..ef623d5
--- /dev/null
+++ b/p5js-svg-flow-field/src/index.html
@@ -0,0 +1,21 @@
+<svg id="gradients" width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+     <linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="0">
+        <stop offset="0%" stop-color="#7d2cac"/>
+        <stop offset="100%" stop-color="transparent"/>
+     </linearGradient>
+    <linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="0">
+        <stop offset="0%" stop-color="transparent"/>
+        <stop offset="100%" stop-color="#5cbbdd"/>
+     </linearGradient>
+    <linearGradient gradientUnits="userSpaceOnUse" id="Gradient3" x1="0" x2="1" y1="0" y2="0">
+        <stop offset="-25%" stop-color="#5cbbdd"/>
+        <stop offset="50%" stop-color="transparent"/>
+        <stop offset="125%" stop-color="#5cbbdd"/>
+     </linearGradient>
+    <linearGradient id="Gradient4" x1="0" x2="1" y1="0" y2="0">
+        <stop offset="0%" stop-color="transparent"/>
+        <stop offset="100%" stop-color="#deb84d"/>
+     </linearGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/p5js-svg-flow-field/src/script.js b/p5js-svg-flow-field/src/script.js
new file mode 100644
index 0000000..e78b49d
--- /dev/null
+++ b/p5js-svg-flow-field/src/script.js
@@ -0,0 +1,97 @@
+let offset = 0;
+let xoff = 0;
+let xoff2 = 0;
+let yoff = 0;
+let strokeWarp;
+let strokeOffset = 5;
+let xOffset = 5;
+let strokeSize = 3;
+let totalCount = 0;
+let strokeVariant = 2;
+let body = document.body;
+
+function draw() {
+  totalCount++;
+  noStroke();
+  noFill();
+  for (b = 0; b < 80 - (strokeSize * 2); b++) {
+    for (k = 0; k < 1; k++) {
+      if (totalCount < 2) {
+        xOffset = (int(random(1, 15))/100) + .825;
+        beginShape();
+        for (i = 0; i < numVertices; i++) {
+          strokeVariant = random(2.25, 3.5);
+          var offset =
+            map(
+              noise(
+                cos((TWO_PI / numVertices) * i) + 144,
+                sin((TWO_PI / numVertices) * i) + 144,
+                xoff
+              ),
+              0,
+              1,
+              -strokeWarp,
+              strokeWarp
+            ) * strokeWarp;
+
+          curveVertex(
+            -50 + i * (1.5 * strokeSize) + offset,
+            -55 + b  * ((strokeOffset * strokeSize)) + offset
+          );
+
+          if (random(1) > xOffset) {
+            endShape();
+            strokeWeight(strokeVariant * strokeSize);
+            beginShape();
+            stroke(0);
+          }
+          xoff += 0.0000125 * (strokeSize * strokeOffset);
+        }
+        endShape();
+      }
+    }
+  }
+  if (totalCount == 2) {
+    body.style.setProperty("--rotate", int(random(1,5)) );
+    body.style.setProperty("--opacity", 1/int(random(1,7)));
+    body.style.setProperty("--opacity2", 1/int(random(1,7)));
+    body.style.setProperty("--display", "var(--none" + int(random(1,40)) + ")");
+    var elem = document.querySelector("div");
+    var clone = elem.cloneNode(true);
+    clone.id = "toplayer";
+    elem.after(clone);
+    body.classList.add("loaded");
+    setTimeout(() => {  
+      body.classList.remove("loading");
+    }, 50);
+  }
+}
+
+function setup() {
+  totalCount = 0;
+  strokeSize = 3;
+  strokeOffset = int(random(5, 7));
+  strokeWarp = ((strokeSize/1.25) + (strokeOffset * 1.5)) / 2;
+  createCanvas(600, 600, SVG);
+  frameRate(5);
+  numVertices = 200;
+}
+
+body.addEventListener(
+  "click",
+  function (event) {
+    body.classList.add("loading");
+    strokeSize = random(2, 4.25);
+    strokeOffset = int(random(4, 6));
+    strokeWarp = (strokeSize + (strokeOffset * 1.5)) / 2;
+    numVertices = 260 - (int(strokeSize) * 25);
+    let overlay = document.getElementById("toplayer");
+    setTimeout(() => { 
+      overlay.remove();
+      clear();
+      totalCount = 0;
+    }, 500);
+  },
+  false
+);
+
diff --git a/p5js-svg-flow-field/src/style.scss b/p5js-svg-flow-field/src/style.scss
new file mode 100644
index 0000000..b81be27
--- /dev/null
+++ b/p5js-svg-flow-field/src/style.scss
@@ -0,0 +1,167 @@
+$noise: url('data:image/png;base64,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') 50% 50% / 20px 20px repeat;
+$db: #151223;
+$p: #7d2cac;
+$y: #deb84d;
+$bl: #5cbbdd;
+
+
+body{
+  height:100vh;
+  width:100vw;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  overflow:hidden;
+  cursor:pointer;
+  --none30: none;
+  &:after{
+    content:'click me';
+    position:absolute;
+    width:100%;
+    text-align:center;
+    bottom:10px;
+    font-size:10px;
+    font-family:'Futura';
+    text-transform:uppercase;
+    font-weight:900;
+  }
+  &:before{
+    content:'';
+    position:absolute;
+    width:600px;
+    height:600px;
+    z-index:10;
+    background:#fff;
+    left:calc(50% - 300px);
+    top:calc(50% - 300px);
+    transition:opacity 0.5s ease-in-out;
+    transition-delay:0.5s;
+    opacity:0;
+    
+  }
+  &.loading.loaded{
+    pointer-events:none;
+    &:before{
+      opacity:1;
+    }
+  }
+  &.loaded{
+    main{
+      opacity:1;
+    }
+  }
+  main{
+    position:absolute;
+    opacity:0;
+    width:100%;
+    height:100%;
+    left:0;
+    top:0;
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    transition:opacity 0.5s ease-in-out;
+    @media (max-width:800px){
+      transform:scale(0.75);
+    }
+  }
+  main > div{
+    transition:0.3s ease-in-out;
+    max-width:600px;
+    max-height:600px;
+    position:relative;
+    &#toplayer{
+      z-index:2;
+      position:absolute;
+      left:calc(50% - 300px);
+      top:calc(50% - 300px);
+      mask:linear-gradient(to right, rgba(0,0,0,0.25), transparent, rgba(0,0,0,0.25)),  $noise;
+      filter:contrast(1);
+      transition:opacity 0.5s ease-in-out;
+      transition-delay:1s;
+      &:before{
+        content:'';
+        position:absolute;
+        width:100%;
+        height:100%;
+        left:0;
+        top:0;
+        transform:rotate(calc((var(--rotate) * 3) * 90deg));
+        background:radial-gradient(circle at bottom, $p, transparent 60%);
+      }
+      g{
+        path{
+          stroke:url(#Gradient1);
+          &:nth-of-type(even){
+            stroke:url(#Gradient2);
+          }
+          &:nth-of-type(17n){
+          stroke:url(#Gradient4);
+          }
+          &:nth-of-type(12n){
+          stroke:url(#Gradient3);
+          }
+        }
+      }
+    }
+    &:not(#toplayer){
+      box-shadow:0 0 0 20px #fff, 0 40px 40px -10px rgba(0,0,0,0.5);
+      background:$y;
+      &:before, &:after{
+        content:'';
+        position:absolute;
+        left:0;
+        top:0;
+        width:100%;
+        height:100%;
+        background:linear-gradient(to right, $p 50%, transparent);
+        mask:linear-gradient(to right, rgba(0,0,0,0.25), transparent, rgba(0,0,0,0.25)),  $noise;
+        filter:contrast(2);
+        transform:rotate(calc(var(--rotate) * 90deg));
+        z-index:2;
+        opacity:var(--opacity2);
+      }
+      &:after{
+        background:$p;
+        mask:$noise, radial-gradient(circle at top, #000, transparent 60%) 50% -250px / 100% 100% no-repeat;
+        filter:contrast(2);
+        transform:rotate(calc((var(--rotate) * 2) * 90deg));
+        z-index:0;
+        opacity:var(--opacity);
+      }
+    }
+  }
+  #gradients{
+    position:absolute;
+    opacity:0;
+    pointer-events:none;
+  }
+  svg{      
+    width:600px;
+    height:600px;
+    z-index:2;
+    position:relative;
+    transition:opacity 1s ease-in-out;
+    transition-delay:1s;
+    transform:rotate(calc(var(--rotate) * -90deg));
+    > g {
+      transform:scale(1,1);
+      path{
+        stroke:$db;
+        &:nth-of-type(13n), &:nth-of-type(14n){
+          stroke:$p;
+        }
+        &:nth-of-type(12n){
+          display:var(--display);
+        }
+        &:nth-of-type(3n){
+          stroke:url(#Gradient3);
+        }
+        &:nth-of-type(4n){
+          stroke-dashoffset:20px;
+          stroke-dasharray:80px;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/pagination-buttons/README.markdown b/pagination-buttons/README.markdown
new file mode 100644
index 0000000..3909697
--- /dev/null
+++ b/pagination-buttons/README.markdown
@@ -0,0 +1,4 @@
+# Pagination Buttons
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/himalayasingh/pen/WmNKjE](https://codepen.io/himalayasingh/pen/WmNKjE).
+
+ Pagination buttons for mobile apps.
\ No newline at end of file
diff --git a/pagination-buttons/dist/index.html b/pagination-buttons/dist/index.html
new file mode 100644
index 0000000..a8453b3
--- /dev/null
+++ b/pagination-buttons/dist/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Pagination Buttons</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="app">
+  <div class="button active"></div>
+  <div class="button"></div>
+  <div class="button"></div>
+  <div class="button"></div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/pagination-buttons/dist/script.js b/pagination-buttons/dist/script.js
new file mode 100644
index 0000000..bf68a0b
--- /dev/null
+++ b/pagination-buttons/dist/script.js
@@ -0,0 +1,19 @@
+$(function()
+{
+    var button = $('.button');
+
+    function switchToNext()
+    {
+        var _this = $(this);
+        
+        if(_this.hasClass('active'))
+            return false;
+        else
+        {
+            $('.button.active').removeClass('active');
+            _this.addClass('active');
+        }
+    }
+
+    button.on('click',switchToNext);
+});
\ No newline at end of file
diff --git a/pagination-buttons/dist/style.css b/pagination-buttons/dist/style.css
new file mode 100644
index 0000000..6c136bf
--- /dev/null
+++ b/pagination-buttons/dist/style.css
@@ -0,0 +1,45 @@
+body
+{
+    height: 100%;
+    margin: 0;
+    user-select: none;
+    -webkit-tap-highlight-color:transparent;
+    background-color: #E91E63;
+}
+
+#app
+{
+    position: absolute;
+    top: 50%;
+    right:0;
+    left: 0;
+    width: 180px;
+    height: 20px;
+    margin: 0 auto;
+    transform: translateY(-50%);
+    overflow: hidden;
+    z-index:1;
+}
+
+.button
+{
+    width: 20px;
+    height: 20px;
+    float: left;
+    margin-right: 20px;
+    background-color: #fff;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: 0.3s ease width;
+}
+
+.button:last-child
+{
+    margin-right: 0;
+}
+
+.button.active
+{
+    width: 60px;
+    cursor: auto;
+}
\ No newline at end of file
diff --git a/pagination-buttons/license.txt b/pagination-buttons/license.txt
new file mode 100644
index 0000000..ee04ccc
--- /dev/null
+++ b/pagination-buttons/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Himalaya Singh (https://codepen.io/himalayasingh/pen/WmNKjE)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/pagination-buttons/src/index.html b/pagination-buttons/src/index.html
new file mode 100644
index 0000000..dab20ed
--- /dev/null
+++ b/pagination-buttons/src/index.html
@@ -0,0 +1,6 @@
+<div id="app">
+  <div class="button active"></div>
+  <div class="button"></div>
+  <div class="button"></div>
+  <div class="button"></div>
+</div>
\ No newline at end of file
diff --git a/pagination-buttons/src/script.js b/pagination-buttons/src/script.js
new file mode 100644
index 0000000..bf68a0b
--- /dev/null
+++ b/pagination-buttons/src/script.js
@@ -0,0 +1,19 @@
+$(function()
+{
+    var button = $('.button');
+
+    function switchToNext()
+    {
+        var _this = $(this);
+        
+        if(_this.hasClass('active'))
+            return false;
+        else
+        {
+            $('.button.active').removeClass('active');
+            _this.addClass('active');
+        }
+    }
+
+    button.on('click',switchToNext);
+});
\ No newline at end of file
diff --git a/pagination-buttons/src/style.css b/pagination-buttons/src/style.css
new file mode 100644
index 0000000..6c136bf
--- /dev/null
+++ b/pagination-buttons/src/style.css
@@ -0,0 +1,45 @@
+body
+{
+    height: 100%;
+    margin: 0;
+    user-select: none;
+    -webkit-tap-highlight-color:transparent;
+    background-color: #E91E63;
+}
+
+#app
+{
+    position: absolute;
+    top: 50%;
+    right:0;
+    left: 0;
+    width: 180px;
+    height: 20px;
+    margin: 0 auto;
+    transform: translateY(-50%);
+    overflow: hidden;
+    z-index:1;
+}
+
+.button
+{
+    width: 20px;
+    height: 20px;
+    float: left;
+    margin-right: 20px;
+    background-color: #fff;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: 0.3s ease width;
+}
+
+.button:last-child
+{
+    margin-right: 0;
+}
+
+.button.active
+{
+    width: 60px;
+    cursor: auto;
+}
\ No newline at end of file
diff --git a/panda-button/README.markdown b/panda-button/README.markdown
new file mode 100644
index 0000000..ced2b97
--- /dev/null
+++ b/panda-button/README.markdown
@@ -0,0 +1,5 @@
+# panda button
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Ma5a/pen/bGgxaYy](https://codepen.io/Ma5a/pen/bGgxaYy).
+
+Click on the button, and a panda rolls out and dances around the screen.
diff --git a/panda-button/dist/index.html b/panda-button/dist/index.html
new file mode 100644
index 0000000..da7df2b
--- /dev/null
+++ b/panda-button/dist/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - panda button</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+</style>
+
+<body>
+
+  <div class="wrapper">
+
+    <button>
+      <div class="panda_face">
+        <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 91.7 71.3" >
+          <path class="panda_icon panda_white" d="M86.6,20.4v15.3h5.1v20.4h-5.1v5.1h-5.1v5H71.3v5.1H20.4v-5.1H10.2v-5H5.1v-5.1H0V35.7h5.1V20.4L25.5,5.1h40.7L86.6,20.4z"/>
+          <path class="panda_icon pink" d="M40.7,45.8h10.2v5.1H40.7V45.8z M10.2,25.4H5.1v-5.1H0V10.2h5.1V5.1h5.1V0h10.2v5.1h5.1v5.1h-5.1v5.1h-5.1v5h-5.1V25.4z
+            M30.5,45.8h-5v5.1H15.3V35.6h5.1v-5.1h10.1V45.8z M61.1,56H56v5.1H35.6V56H56v-5.1h5.1V56z M76.4,50.9H66.2v-5.1h-5.1V30.5h10.2
+          v5.1h5.1V50.9z M91.7,20.3h-5.1v5.1h-5.1v-5.1h-5.1v-5h-5.1v-5.1h-5.1V5.1h5.1V0h10.2v5.1h5.1v5.1h5.1V20.3z"/>
+        </svg>
+      </div>
+      <span>panda!</span>
+    </button>
+  </div>
+    
+  <div class="sign">
+    by masahito / <a href="http://www.ma5a.com/" >ma5a.com</a>
+  </div>
+  
+  <div class="cover"></div>
+</body>
+</html>
+
+<path class="panda_icon panda_white" d="M86.6,20.4v15.3h5.1v20.4h-5.1v5.1h-5.1v5H71.3v5.1H20.4v-5.1H10.2v-5H5.1v-5.1H0V35.7h5.1V20.4L25.5,5.1h40.7
+	L86.6,20.4z"/>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/panda-button/dist/script.js b/panda-button/dist/script.js
new file mode 100644
index 0000000..276504f
--- /dev/null
+++ b/panda-button/dist/script.js
@@ -0,0 +1,262 @@
+function init() {
+  
+  const spriteSvg = color =>{  
+    return `
+      <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 2117.1 177.4" >
+  <path class="panda_white" d="M1893.1,133.9l-76.9,8.4l-4.8-3l-5.1,0v-5.1h-5.1v-15.3l20.4-14h50.9l20.6,14V133.9z M1785.9,88.3V73h5.1V62.8
+    h5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v-5.1l5.1,0l31.6-3.9l44.8,8.8l8.3,10.4v7.9l-71.4,36.2L1785.9,88.3z"/>
+  <g>
+    <path class="panda_white" d="M556.7,88.5l0-30.3h5.1v-5.1h5.1V42.9h5.1v-5.1h5.1v-5.1h10.2v-5l50.9,0v5l25.5,0v55.8L556.7,88.5z
+        M656.9,102.8l11.9,6.4v10.1l-5.1,21.8l-20.4,3.7h-5.1v5.1h-40.7l-25.6-4.3l-5-21.2v-5.1l10.6-16.5H656.9z"/>
+  </g>
+  <path class="panda_white" d="M208.8,93.7V83.5h5.1V73.3h5.1l0-25.5l15.3,0h10.2v-5.1h35.6v5.1l25.5,0l0,15.3h5.1v10.2h5.1v15.3h-5.1v5.1
+    l0,20.3l10.2,0v5.1h-5.1l-0.1,20.4h-30.5v5.1h-30.5v-5.1l-29.4,0l-6.3-10.2v-5.1h-5.1v-5.1h-5.1V114L208.8,93.7z"/>
+  <g>
+    <g>
+      <path class="panda_white" d="M1172,48v-5.1h5.1 M1177.1,42.9h10.2V48h5.1v5.1h5.1v10.2h5.1v30.5l-15.3,30.6v10.2h-5.1v5.1l-12.8,10.2
+        l-38.2,0v-5.1H1121v-5.1l51-91.7 M1135.8,49.6l11.5,44.2l-41.6,40.8h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1V88.7
+        L1135.8,49.6z"/>
+    </g>
+    <path class="${color}" d="M1202.6,88.7h5.1v5.1h5v5.1h5.1v15.3h-5.1v10.2h-10.1v5.1h-15.3v-5.1h-5.1v-15.3h5.1V98.9h5.1v-5.1h10.2
+      L1202.6,88.7z M1177.1,58.2v-5.1h10.2v5.1h5.1v10.2h-10.2v-5.1h-5.1V58.2 M1177.1,139.7h5.1v10.2h-5.1v5.1h-15.3v-5.1h-5.1v-10.2
+      H1177.1 M1121.1,37.8h10.1v-5.1h20.4v-5.1h15.3v5.1h5.1v56.1h-5.1V104h-5.1v10.2h-5.1v5.1h-5.1v5.1h-5.1v5.1h-5.1v5.1h-10.2v5.1
+      h-20.3v-5.1h-5.1v-10.2h5.1v-5.1h5.1v-5.1h5.1v-5.1h5V104h5.1V93.8h5.1V58.2h-5.1v10.2h-5v5.1h-5.1v5.1h-10.2v5.1h-10.2v5.1h-20.4
+      V78.6h5.1V68.4h5.1v-5.1h5.1v-5.1h5.1V48h10.2v-5.1h5.1v-5.1L1121.1,37.8"/>
+  </g>
+  <g>
+    <path class="panda_white" d="M1514.2,139.5v5.1h-5v5.1h-25.5v-5.1h-5.1v-5h-5.1v-5.1h-5.1v-5.1h-5.1v-5.7l-20.4-35.1V73.3l15.3-25.5h5.1v-5
+      h5.1v-5.1h10.2v-5.1h10.2v-5.1h10.2L1514.2,139.5z M1539.7,42.8h5.1v5.1h5.1V53h5.1v5.1l-20.4,63h-10.2l-15.8-32.8l-0.2-49
+      l5.8-11.8h5.1v5.1h10.2v5.1h5.1v5.1L1539.7,42.8"/>
+    <path class="${color}" d="M1458.2,129.3H1448v-5.1h-5.1v-5.1h-5.1V93.6h5.1v-5.1h15.3v5.1h5.1v30.6h-5.1L1458.2,129.3z M1458.2,63.1
+      h-5.1v5.1h-5.1v5.1h-5.1v-5.1h-5.1V58h5.1v-5.1h5.1v-5h10.2V63.1z M1504.1,134.4v10.2h-15.3v-5.1h-5.1v-5.1h5.1v-5.1h10.2v5.1
+      L1504.1,134.4z M1509.1,134.4v-5.1h-5v-5.1h-5.1V114h-5.1v-5.1h-5.1v-5.1h-5.1V93.6h-5.1V47.8h5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v-5
+      h15.2v61h5.1v10.2h5.1v10.2h5.1v5.1h5.1V83.4h5.1V68.2h5.1v-5.1h5.1V58h5.1v5.1h5.1v10.2h5.1V114h-5.1v10.2h-5.1v5.1h-10.2v5.1
+      h-5.1v15.3h-25.5v-10.2h-5.1L1509.1,134.4"/>
+  </g>
+  <g>
+    <path class="panda_white" d="M793.7,32.7v5.1h10.2l35.6,20.4v5.1h5.1v6.6l5.1,8.9l0,35.4h-5.1v10.2h-5.1v5.1h-5.1l-81.5-71.3v-5.1h-5.1
+      V42.9h5.1v-5.1h5.1v-5.1L793.7,32.7z M821.3,126.8l2.9,12.9v5.1h-5.1v5.1h-10.2v5.1h-30.5v-6.3L747,98.6l3.4-14.1l20.6-2.8
+      L821.3,126.8z"/>
+    <path class="${color}" d="M844.6,68.3h10.2v5.1H865v15.3h-5.1v5.1h-5.1v5.1h-10.2L844.6,68.3L844.6,68.3z M839.5,47.9v10.2h-5.1v5.1
+      h-15.3v-5.1H814V53h-5.1v-5.1h-5.1V32.6h5.1v-5.1h15.3v5.1h10.2v5.1h5.1V47.9 M763.1,42.8h5.1v-5.1h10.2v10.2h-5.1V53H758v-5.1h5.1
+      V42.8z M752.9,53v5.1h25.5v5.1h10.2v5.1h5.1v5.1h5.1v5.1h5.1v5.1H814v5.1h5.1v5.1h5.1v5.1h5.1V109h5.1v25.5h-5.1v5.1h-10.2v-5.1
+      H814v-5.1h-5.1v-5.1h-5.1v-5.1h-5v-5.1h-5.1v-5h-5.1V104h-5.1v-5.1h-15.3v-5.1H758v-5.1h-5.1v10.2h5.1v5.1h5.1v5h5.1v10.2h5.1v10.2
+      h5.1v20.4h-15.3v-5.1H758v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-10.1h-5.1V78.5h5.1v-5.1h-5.1V58.1h5.1V53H752.9z"/>
+  </g>
+  <path class="${color}" d="M577.1,129.5v5.1h10.2v5.1h10.2V155h-5.1v5.1h-15.3V155H572v-5.1h-5.1v-10.2h-5.1v-10.2h5.1v-5.1h5.1v5.1H577.1
+    z M582.2,58.2h5.1v-5.1h5.1V48h5.1v5.1h5.1v5.1v5.1v5.1h-5.1v5.1h-15.3L582.2,58.2L582.2,58.2z M597.5,17.5h5.1v-5.1h20.3v5.1h10.2
+    v20.3H628l0,0v5.1h-15.3v-5.1h-5.1v-5h-5v-5.1h-5.1L597.5,17.5L597.5,17.5z M663.7,155h-5.1v5.1h-10.2V155h-5.1v-15.3h10.2v-5.1h5.1
+    v-5.1h5.1v-10.2h5.1v25.5h-5.1V155z M658.6,53.1V42.9h-5.1V32.7h5.1v-5h10.2v5h5.1V48h-5.1l0,0v5.1H658.6z M668.8,109.2h-51v5.1
+    h-40.7v5h-10.2v-15.2h-5.1V99h-5.1v-5.1h-5.1v-5.1h-5.1V78.6h5.1v-5.1h15.3v5.1h15.3v5.1h50.9v-5.1h25.5v-5.1h5.1v-5.1h25.5v20.4
+    h-5.1v5.1H679V99h-10.2l0,0V109.2z"/>
+  <g>
+    <polyline class="${color}" points="1962.2,83.6 1962.2,78.5 1962.2,73.4 1967.3,73.4 1967.3,73.4 1967.3,73.4 1967.3,68.3 1967.3,63.2 
+      1972.4,63.2 1972.4,63.2 1972.4,63.2 1972.4,58.1 1972.4,53 1977.5,53 1977.5,53.1 1977.5,53 1977.5,48 1982.6,48 1982.6,48 
+      1982.6,48 1982.6,42.9 1987.7,42.9 1987.7,37.8 1992.8,37.8 1992.8,37.8 1997.8,37.8 1997.9,37.8 1997.8,37.8 1997.8,32.7 
+      2002.9,32.7 2008,32.7 2013.1,32.7 2013.1,32.7 2013.1,32.7 2013.1,32.7 2013.1,32.7 2013.1,27.6 2018.2,27.6 2023.3,27.6 
+      2023.3,27.6 2028.4,27.6 2033.5,27.6 2038.6,27.6 2038.6,27.6 2043.7,27.6 2048.8,27.6 2048.8,32.7 2048.8,32.7 2048.8,32.7 
+      2053.9,32.7 2059,32.7 2059,37.8 2064.1,37.8 2064.1,37.8 2069.2,37.8 2069.2,42.9 2074.3,42.9 2074.3,48 2074.3,48 2079.4,48 
+      2079.4,53 2079.4,53.1 2079.4,58.1 2079.3,58.1 2079.4,58.1 2084.4,58.1 2084.4,63.2 2084.4,63.2 2084.4,63.2 2089.5,63.2 
+      2089.5,68.3 2089.5,73.4 2094.6,73.4 2094.6,78.5 2094.6,83.6 2094.6,88.7 2094.6,88.7 2094.6,93.8 2094.6,98.9 2094.6,104 
+      2094.6,109.1 2089.5,109.1 2089.5,114.2 2089.5,114.2 2089.5,119.3 2084.4,119.3 2084.4,124.4 2084.4,129.5 2079.4,129.5 
+      2079.4,129.4 2079.4,129.5 2079.3,129.5 2079.4,129.5 2079.4,134.5 2074.3,134.5 2074.3,134.5 2074.3,139.6 2069.2,139.6 
+      2069.2,144.7 2064.1,144.7 2064.1,144.7 2059,144.7 2059,149.8 2053.9,149.8 2048.8,149.8 2048.8,154.9 2043.7,154.9 2038.6,154.9 
+      2038.6,154.9 2033.5,154.9 2028.4,154.9 2023.3,154.9 2023.3,154.9 2018.2,154.9 2013.1,154.9 2013.1,154.9 2008,154.9 2008,149.8 
+      2002.9,149.8 1997.9,149.8 1997.8,149.8 1992.8,149.8 1992.8,144.7 1992.8,144.7 1992.8,144.7 1987.7,144.7 1987.7,139.6 
+      1982.6,139.6 1982.6,139.6 1977.5,139.6 1977.5,134.5 1977.5,129.5 1977.5,129.4 1977.5,129.5 1972.4,129.5 1972.4,124.4 
+      1972.4,119.3 1967.3,119.3 1967.3,114.2 1967.3,114.2 1967.3,109.1 1967.3,104 1967.3,104 1967.3,104 1962.2,104 1962.2,98.9 
+      1962.2,93.8 1962.2,88.7 1962.2,88.7 1962.2,83.6 	"/>
+  </g>
+  <path class="${color}" d="M1811.4,144.5v-5.1h5.1v-5.1h10.2v-5.1h10.2v-5.1h50.9V119h-5.1v-5.1h-10.2v-5.1h-50.9v5.1h-10.2v5.1h-10.2v5.1
+    h-5.1V119h-5.1v-15.3h-5.1V88.5h5.1v-5.1h10.2v-5.1h5.1v-5.1h10.2v-5.1h5.1V63h10.2v-5.1h45.8V63h20.4v-5.1h-5.1v-5.1h-10.2v-5.1
+    h-45.8v-5.1h-20.4v-5.1h5.1v-5.1h15.3v-5.1h35.6v5.1h10.2v5.1h10.2v5.1h5.1v5.1h5.1v5.1h5.1v5.1h5.1v10.2h5.1v10.2h5.1v30.5h-5.1
+    v5.1h-5.1v10.2h-5.1v10.2H1898v5.1h-5.1v5.1h-10.2v5.1h-10.2v5.1h-40.7v-5.1h-15.3v-5.1H1811.4z"/>
+  <g>
+    <path class="panda_white" d="M929.4,134.7h-5.1v-5.1h-5.1v-5.1h5.1l0.4-42l20.8-32.7L962.7,89l0.6,50.4L960,155h-5.1v-5.1h-10.2v-5.1h-5.1
+      v-5h-10.2V134.7 M1010.9,139.8h-5.1v5h-10.2v5.1h-10.2v5.1h-10.2v-5.1h5.1l-19.6-90.7L960,43v-5.1h5v-5.1h5.1v-5.1h15.3v5.1h5.1
+      v5.1h5.1V43h5.1v5.1h5.1v5.1h5.1v9.1l15.1,0.6v31.1h5.3v15.3h-5.1v5.1h-5.1v5.1h-5.1v15.3h-5.1L1010.9,139.8z"/>
+    <path class="${color}" d="M985.4,53.2h-10.2v-5.1h-5.1V37.9h15.3V43h5.1v5.1h-5.1V53.2z M985.4,144.8h-5.1v5.1h-5.1v5.1H960V93.9h-5.1
+      V83.7h-5.1V73.5h-5.1v-5.1h-5.1V99h-5.1v15.3h-5.1v5.1h-5.1v5.1h-5.1v-5.1h-5.1v-10.2H909V68.4h5.1V58.2h5.1v-5h10.2v-5.1h5.1V32.8
+      h5.1v-5.1h15.3v5.1h5.1V43h5.1v10.2h5v5h5.1v10.2h5.1v5.1h5.1v5.1h5.1v10.2h5.1v45.9h-5.1v5h-5.1L985.4,144.8z M1036.4,124.5h-5.1
+      v5.1h-5.1v5.1H1016v-5.1h-5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v5.1h5.1L1036.4,124.5L1036.4,124.5z M1036.4,88.8h-5.1v5.1H1016
+      v-5.1h-5.1V58.2h5.1v-5h10.2v5h5.1v5.1h5.1L1036.4,88.8L1036.4,88.8z"/>
+  </g>
+  <g>
+    <path class="panda_white" d="M149.5,68.2V58h-5.1V47.8l-4.6-20.5l-20.9,0.1v-5.1h-10.2v-5.1H73.1v5.1H62.9l-16.6,5.1l-3.9,5l0.1,20.5h-5.1
+      l0,33H27.3l-0.1,34.9h20.4v13.8l25.5-0.2v5.1l65.7,0l0.3-15.3h5.3v-5.1h5.1v-10.2L149.5,68.2z"/>
+    <path class="${color}" d="M98.7,63.1H88.5V58h10.2V63.1z M103.8,73.3H83.4v-5.1h-5.1v-5.1h5.1v5.1h20.4V73.3z M124.1,42.7v5.1h5.1v5.1
+      h5.1v10.2H119V58h-5.1V42.7H124.1z M149.6,42.7h-5.1v5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1V22.3h5.1v-5.1h10.2v5.1h5.1v5.1h5.1
+      L149.6,42.7L149.6,42.7z M103.8,134.4H119v-5.1h10.2v-5.1h10.2v30.6h-5.1v5H119v-5h-5.1v-5.1h-5.1v-5.1h-5V134.4z M68.1,42.7h5.1
+      V58h-5.1v5.1H57.9V58h-5.1V47.8h5.1v-5.1H68.1 M52.8,17.2h5.1v5.1H63v5.1h-5.1v5.1h-5.1v5.1h-5.1v5.1h-5.1 M42.6,42.7h-5.1V27.4
+      h5.1v-5.1h5.1v-5.1h5.1 M22.3,139.5h-5.1v-20.4h5.1V114h5v-5.1h20.4v5.1h5.1v5.1h5.1v5.1H63v10.2h-5.1v5.1h-5.1v5.1H42.6v5.1H32.4
+      v-5.1H22.3V139.5z M52.8,78.3h5.1v5.1h66.2v-5.1h15.3v-5.1h5.1v-5h5.1v10.1h15.3v5.1h5.1v15.3h-5.1v5.1h-5.1v5.1h-15.3v-5.1h-10.2
+      v-5.1h-10.2v-5.1H52.8v5.1H27.3v-5.1h-5V83.4h-5.1v-5.1h-5.1v-5H7V52.9h5.1v-5.1h10.2v5.1h5.1V58h5v5.1h5.1v5.1h5.1v5h5.1v5.1
+      L52.8,78.3"/>
+  </g>
+  <path class="${color}" d="M285.3,42.7h5.1v-5.1h15.3v5.1h5.1v5.1h5.1V58h-5.1v5.1h-5.1V58h-5.1v-5.1h-5.1v-5.1h-10.2L285.3,42.7
+    L285.3,42.7z M280.2,68.2h5.1v-5.1h10.2v5.1h5.1v10.2h-5.1v5.1h-10.2v-5.1h-5.1V68.2z M259.8,73.3H270v5.1h-10.2V73.3z M254.8,83.5
+    h20.3v5.1h-20.3V83.5z M244.6,68.2v10.2h-5.1v5.1h-15.3V73.3h5.1v-5.1h5.1v-5.1h5.1v5.1L244.6,68.2z M208.9,47.8h5.1v-5.1h15.3v5.1
+    h5.1v5.1h-5.1V58h-5.1v5.1h-5.1v5.1H214v-5.1h-5.1V47.8z M239.5,154.8v5.1h-15.3v-5.1h-5.1v-25.5h15.3v5.1h10.2v5.1h5.1v10.2h-5.1
+    v5.1L239.5,154.8z M321,144.6v5.1h-5.1v5.1h-15.3v-5.1h-5.1v-5.1h-5.1v-10.2h10.2v-5.1h10.2v-5.1h5.1v-5.1h10.2v25.5H321z
+      M341.4,98.8h-5.1v5h-5.1v5.1h-5.1v5.1h-25.5v-5.1h-61.1v5.1h-45.9v-5.1h-5.1V93.7h5.1v-5.1h15.3v5.1h101.9v-5.1h5.1v-5.1h5.1v-5.1
+    h10.2v5.1h5.1v5.1h5.1L341.4,98.8L341.4,98.8z"/>
+  <g>
+    <path class="panda_white" d="M380.1,108.9v10.2h5.1v5.1h5.3l0.3,15.3l65.7,0v-5.1l25.5,0.2v-13.8h20.4l-0.1-34.9h-10.1l0-33h-5.1l0.1-20.5
+      l-3.9-5l-16.6-5.1h-10.2v-5.1h-35.6v5.1h-10.2v5.1l-20.9-0.1l-4.6,20.5V58h-5.1v10.2L380.1,108.9z"/>
+    <path class="${color}" d="M430.9,58h10.2v5.1h-10.2V58z M425.8,68.2h20.4v-5.1h5.1v5.1h-5.1v5.1h-20.4V68.2z M415.7,42.7V58h-5.1v5.1
+      h-15.3V52.9h5.1v-5.1h5.1v-5.1H415.7z M380,42.7V27.4h5.1v-5.1h5.1v-5.1h10.2v5.1h5.1v10.2h-5.1v5.1h-5.1v5.1h-5.1v5.1h-5.1v-5.1
+      H380L380,42.7z M425.8,144.6h-5v5.1h-5.1v5.1h-5.1v5h-15.3v-5h-5.1v-30.6h10.2v5.1h10.2v5.1h15.2V144.6z M461.5,42.7h10.2v5.1h5.1
+      V58h-5.1v5.1h-10.2V58h-5.1V42.7H461.5 M487,42.7h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h5.1v-5.1h5.1 M476.8,17.2h5.1v5.1h5.1
+      v5.1h5.1v15.3H487 M507.3,144.6h-10.1v5.1H487v-5.1h-10.2v-5.1h-5.1v-5.1h-5.1v-10.2h5.1v-5.1h5.1V114h5.1v-5.1h20.4v5.1h5v5.1h5.1
+      v20.4h-5.1V144.6z M476.8,78.3h5.1v-5.1h5.1v-5h5.1v-5.1h5.1V58h5v-5.1h5.1v-5.1h10.2v5.1h5.1v20.4h-5.1v5h-5.1v5.1h-5.1v10.2h-5
+      v5.1h-25.5v-5.1h-71.3v5.1h-10.2v5.1h-10.2v5.1h-15.3v-5.1h-5.1v-5.1h-5.1V83.4h5.1v-5.1H380V68.2h5.1v5h5.1v5.1h15.3v5.1h66.2
+      v-5.1L476.8,78.3"/>
+  </g>
+  <g>
+    <path class="panda_white" d="M1295.2,60.5l-2.9-12.9v-5.1h5.1v-5.1h10.2v-5.1h30.5v6.3l31.4,50.1l-3.4,14.1l-20.6,2.8L1295.2,60.5z
+        M1322.8,154.6v-5.1h-10.2l-35.6-20.4V124h-5.1v-5.8l-5.1-13l0-32.2h5.1V62.9h5.1v-5.1h5.1l81.5,71.3v5.1h5.1v10.2h-5.1v5.1h-5.1
+      v5.1H1322.8z"/>
+    <path class="${color}" d="M1271.9,119h-10.2v-5.1h-10.2V98.6h5.1v-5.1h5.1v-5.1h10.2V119L1271.9,119z M1277,139.4v-10.2h5.1v-5.1h15.3
+      v5.1h5.1v5.1h5.1v5.1h5.1v15.3h-5.1v5.1h-15.3v-5.1h-10.2v-5.1h-5.1V139.4 M1353.4,144.5h-5.1v5.1h-10.2v-10.2h5.1v-5.1h15.3v5.1
+      h-5.1V144.5z M1363.6,134.3v-5.1h-25.5v-5.1h-10.2V119h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-10.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1V78.3
+      h-5.1V52.8h5.1v-5.1h10.2v5.1h5.1v5.1h5.1V63h5.1v5.1h5v5.1h5.1v5h5.1v5.1h5.1v5.1h15.3v5.1h10.2v5.1h5.1V88.4h-5.1v-5.1h-5.1v-5
+      h-5.1V68.1h-5.1V57.9h-5.1V37.5h15.3v5.1h5.1v5.1h5.1v5.1h5.1v5.1h5.1V63h5.1v5.1h5.1v10.1h5.1v30.6h-5.1v5.1h5.1v15.3h-5.1v5.1
+      H1363.6z"/>
+  </g>
+  <g>
+    <g>
+      <path class="panda_white" d="M1650.3,139.3v5.1h-5.1 M1645.2,144.4H1635v-5.1h-5.1v-5.1h-5.1V124h-5.1V93.5l15.3-30.6V52.7h5.1v-5.1
+        l12.8-10.2l38.2,0v5.1h10.2v5.1l-51,91.7 M1686.5,137.7L1675,93.5l41.6-40.8h5.1v5.1h5.1v5.1h5.1V68h5.1v5.1h5.1v25.5
+        L1686.5,137.7z"/>
+    </g>
+    <path class="${color}" d="M1619.7,98.6h-5.1v-5.1h-5v-5.1h-5.1V73.1h5.1V62.9h10.1v-5.1h15.3v5.1h5.1v15.3h-5.1v10.2h-5.1v5.1h-10.2
+      L1619.7,98.6z M1645.2,129.1v5.1H1635v-5.1h-5.1v-10.2h10.2v5.1h5.1V129.1 M1645.2,47.6h-5.1V37.4h5.1v-5.1h15.3v5.1h5.1v10.2
+      H1645.2 M1701.2,149.5h-10.1v5.1h-20.4v5.1h-15.3v-5.1h-5.1V98.5h5.1V83.3h5.1V73.1h5.1V68h5.1v-5.1h5.1v-5.1h5.1v-5.1h10.2v-5.1
+      h20.3v5.1h5.1v10.2h-5.1V68h-5.1v5.1h-5.1v5.1h-5v5.1h-5.1v10.2h-5.1v35.6h5.1v-10.2h5v-5.1h5.1v-5.1h10.2v-5.1h10.2v-5.1h20.4
+      v10.2h-5.1v10.2h-5.1v5.1h-5.1v5.1h-5.1v10.2h-10.2v5.1h-5.1v5.1H1701.2"/>
+  </g>
+  </svg>
+    `
+  }
+
+  const colorVariations = [
+    'blue',
+    'green',
+    'pink',
+    'brown',
+    'dark_brown'
+  ]
+
+  const animationPattern = [ 
+    11,11,11,11,10,
+    9,8,7,6,5,4,
+    9,8,7,6,5,4,
+    3,2,1,0
+  ]
+
+  const frameSize = 45
+
+  //rolling animation
+  const animateSprite = (target, speed) => {
+    let i = 0
+    target.style.margin = `0px 0px 0px -${(animationPattern[i] * frameSize)}px`
+
+    setInterval(function () {
+      target.style.margin = `0px 0px 0px -${(animationPattern[i] * frameSize)}px`
+      if (animationPattern[i] === 0) {
+        i -= 2
+      } else {
+        i++
+      }
+    }, speed)
+  }
+
+  
+  const pandaFace = document.querySelector('.panda_face')
+  const button = document.querySelector('button')
+  const cover = document.querySelector('.cover')
+  const pandaIcon = document.querySelectorAll('.panda_icon')
+  let pandaPos = pandaFace.getBoundingClientRect()
+  let pandaColor = pandaIcon[1].classList[1]
+  let pandaSwitch = true
+
+
+  const movePanda = target =>{
+    target.style.transition = '10s'
+    const randomTop = Math.ceil(Math.random() * 100)
+    target.style.zIndex = randomTop
+    target.style.top = `${randomTop}%`
+    target.style.left = `${Math.ceil(Math.random() * 100)}%`
+  }
+
+
+  const animateButton = () =>{
+    pandaColor = pandaIcon[1].classList[1]
+    button.classList.add('animate')
+    pandaIcon.forEach(ele=>ele.classList.add(pandaColor))
+    pandaFace.classList.remove('fade_in')
+  }
+
+
+  const completeButtonAnimation = () =>{
+    button.classList.remove('animate')
+    pandaFace.classList.remove('hide')
+    pandaFace.classList.add('fade_in')
+    pandaIcon[1].classList.add(colorVariations[Math.floor(Math.random() * colorVariations.length)])
+    pandaSwitch = true
+  }
+
+
+  const createAndAnimatePanda = () =>{
+    const panda = document.createElement('div')
+    panda.classList.add('panda')
+    panda.style.top = `${pandaPos.y - 10}px`
+    panda.style.left = `${pandaPos.x - 10}px`
+    cover.appendChild(panda)
+
+    const inner = document.createElement('div')
+    inner.classList.add('panda_inner')
+    inner.style.width = `${frameSize * 12}px`
+    inner.innerHTML = spriteSvg(pandaColor)
+    panda.appendChild(inner)
+
+    animateSprite(inner, 110)
+    pandaFace.classList.add('hide')
+
+    setTimeout(()=>{
+      panda.style.left = `${pandaPos.x > 300 ? pandaPos.x - 300 : 50}px`
+      pandaIcon.forEach(ele=>ele.classList.remove(pandaColor))
+    }, 40)
+
+    setTimeout(()=>{
+      movePanda(panda)
+      setInterval(()=>{
+        movePanda(panda)
+      },4000)
+    }, 2000)
+  }
+  
+
+  const triggerPanda = ()=>{  
+    if (!pandaSwitch) return   
+    pandaSwitch = false
+
+    animateButton()
+
+    setTimeout(()=>{
+      createAndAnimatePanda()
+
+      setTimeout(()=>{
+        completeButtonAnimation()
+      },1200)  
+
+    },560)
+  }
+
+  button.addEventListener('click', triggerPanda)
+
+  window.addEventListener('resize', ()=>pandaPos = pandaFace.getBoundingClientRect())
+
+}
+
+window.addEventListener('DOMContentLoaded', init)
\ No newline at end of file
diff --git a/panda-button/dist/style.css b/panda-button/dist/style.css
new file mode 100644
index 0000000..d16f2d5
--- /dev/null
+++ b/panda-button/dist/style.css
@@ -0,0 +1,206 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  background-color: #423a41;
+  overflow: hidden;
+}
+
+.cover {
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  pointer-events: none;
+}
+
+.wrapper {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.panda_face.hide { opacity: 0; }
+
+span { margin-left:12px; }
+
+.sign {
+  position: absolute;
+  color: white;
+  bottom: 10px;
+  right: 10px;
+  font-size: 10px;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.panda {
+  position: absolute;
+  height: 45px;
+  width: 45px;
+  overflow: hidden;
+  transition: 2s;
+}
+
+.panda_inner {
+  height: 100%;
+}
+
+.panda_inner svg {
+  height: 100%;
+  width: auto;
+}
+
+button {
+  width: 180px;
+  padding: 10px 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: solid rgb(131, 88, 59);
+  border-width:2px 2px 7px 2px;
+  border-radius: 10px;
+  background-color: rgb(83, 39, 9);
+  font-family: 'Press Start 2P', cursive;
+  font-size: 15px;
+  color: white;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+button:hover {
+  border-width:2px 2px 4px 2px;
+  margin-top: 3px;
+}
+
+button:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px hotpink;
+}
+
+.panda_face {
+  position: relative;
+  height: 25px;
+  width: auto;
+}
+
+.panda_face {
+  opacity: 1;
+}
+
+.panda_face svg {
+  height: 100%;
+  width: auto;
+}
+
+.panda_white { fill: white; }
+.blue { fill: #12b7e9; }
+.green { fill: rgb(43, 163, 113); }
+.pink { fill: hotpink;}
+.brown { fill: rgb(126, 80, 62);}
+.dark_brown { fill: rgb(53, 34, 27);}
+
+button:hover .panda_face {
+  animation: bop infinite 0.5s;
+}
+
+@keyframes bop {
+  0% {
+    top: 0;
+    transform: scale(1);
+  }
+  50% {
+    top: -5px;
+    transform: scale(0.95,1.05);
+  }
+  90% {
+    transform: scale(1.1,0.9);
+  }
+  100% {
+    top: 0;
+    transform: scale(1);
+  }
+}
+
+button.animate svg {
+  animation: spin infinite linear 0.5s;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(-720deg);
+  }
+}
+
+@keyframes fadeout {
+  0% { 
+    opacity: 1;
+  }
+  90% { 
+    opacity: 0;
+  }
+  100% { 
+    opacity: 0;
+    display: none;
+  }
+} 
+
+button:hover .fade_in,
+.panda_face.fade_in {
+  animation: fade_in forwards 0.5s;
+}
+
+@keyframes fade_in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+button.animate {
+  border-color: rgb(58, 28, 9);
+  transform-origin: bottom right;
+  animation: shake ease forwards 0.5s;
+}
+
+@keyframes shake {
+  0% { 
+    transform-origin: bottom right;
+    transform: translate(0,0) rotate(0deg);
+  }
+  40% { 
+    transform: translate(5px,0) rotate(45deg);
+  }
+  70% {
+    transform-origin: bottom right; 
+    transform: translate(5px,0) rotate(45deg);
+  }
+  85% { 
+    transform-origin: bottom left; 
+    transform: translate(0,0) rotate(-20deg);
+  }
+  95% { 
+    transform: translate(0,0) rotate(0deg);
+  }
+  100% { 
+    transform-origin: bottom right;
+    transform: translate(0,0) rotate(0deg);
+  }
+}
\ No newline at end of file
diff --git a/panda-button/license.txt b/panda-button/license.txt
new file mode 100644
index 0000000..e951f41
--- /dev/null
+++ b/panda-button/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Masahito Leo Takeuchi (https://codepen.io/Ma5a/pen/bGgxaYy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/panda-button/src/index.html b/panda-button/src/index.html
new file mode 100644
index 0000000..8300e4b
--- /dev/null
+++ b/panda-button/src/index.html
@@ -0,0 +1,31 @@
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+</style>
+
+<body>
+
+  <div class="wrapper">
+
+    <button>
+      <div class="panda_face">
+        <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 91.7 71.3" >
+          <path class="panda_icon panda_white" d="M86.6,20.4v15.3h5.1v20.4h-5.1v5.1h-5.1v5H71.3v5.1H20.4v-5.1H10.2v-5H5.1v-5.1H0V35.7h5.1V20.4L25.5,5.1h40.7L86.6,20.4z"/>
+          <path class="panda_icon pink" d="M40.7,45.8h10.2v5.1H40.7V45.8z M10.2,25.4H5.1v-5.1H0V10.2h5.1V5.1h5.1V0h10.2v5.1h5.1v5.1h-5.1v5.1h-5.1v5h-5.1V25.4z
+            M30.5,45.8h-5v5.1H15.3V35.6h5.1v-5.1h10.1V45.8z M61.1,56H56v5.1H35.6V56H56v-5.1h5.1V56z M76.4,50.9H66.2v-5.1h-5.1V30.5h10.2
+          v5.1h5.1V50.9z M91.7,20.3h-5.1v5.1h-5.1v-5.1h-5.1v-5h-5.1v-5.1h-5.1V5.1h5.1V0h10.2v5.1h5.1v5.1h5.1V20.3z"/>
+        </svg>
+      </div>
+      <span>panda!</span>
+    </button>
+  </div>
+    
+  <div class="sign">
+    by masahito / <a href="http://www.ma5a.com/" >ma5a.com</a>
+  </div>
+  
+  <div class="cover"></div>
+</body>
+</html>
+
+<path class="panda_icon panda_white" d="M86.6,20.4v15.3h5.1v20.4h-5.1v5.1h-5.1v5H71.3v5.1H20.4v-5.1H10.2v-5H5.1v-5.1H0V35.7h5.1V20.4L25.5,5.1h40.7
+	L86.6,20.4z"/>
\ No newline at end of file
diff --git a/panda-button/src/script.js b/panda-button/src/script.js
new file mode 100644
index 0000000..d1918de
--- /dev/null
+++ b/panda-button/src/script.js
@@ -0,0 +1,265 @@
+function init() {
+  
+  const spriteSvg = color =>{  
+    return `
+      <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 2117.1 177.4" >
+  <path class="panda_white" d="M1893.1,133.9l-76.9,8.4l-4.8-3l-5.1,0v-5.1h-5.1v-15.3l20.4-14h50.9l20.6,14V133.9z M1785.9,88.3V73h5.1V62.8
+    h5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v-5.1l5.1,0l31.6-3.9l44.8,8.8l8.3,10.4v7.9l-71.4,36.2L1785.9,88.3z"/>
+  <g>
+    <path class="panda_white" d="M556.7,88.5l0-30.3h5.1v-5.1h5.1V42.9h5.1v-5.1h5.1v-5.1h10.2v-5l50.9,0v5l25.5,0v55.8L556.7,88.5z
+        M656.9,102.8l11.9,6.4v10.1l-5.1,21.8l-20.4,3.7h-5.1v5.1h-40.7l-25.6-4.3l-5-21.2v-5.1l10.6-16.5H656.9z"/>
+  </g>
+  <path class="panda_white" d="M208.8,93.7V83.5h5.1V73.3h5.1l0-25.5l15.3,0h10.2v-5.1h35.6v5.1l25.5,0l0,15.3h5.1v10.2h5.1v15.3h-5.1v5.1
+    l0,20.3l10.2,0v5.1h-5.1l-0.1,20.4h-30.5v5.1h-30.5v-5.1l-29.4,0l-6.3-10.2v-5.1h-5.1v-5.1h-5.1V114L208.8,93.7z"/>
+  <g>
+    <g>
+      <path class="panda_white" d="M1172,48v-5.1h5.1 M1177.1,42.9h10.2V48h5.1v5.1h5.1v10.2h5.1v30.5l-15.3,30.6v10.2h-5.1v5.1l-12.8,10.2
+        l-38.2,0v-5.1H1121v-5.1l51-91.7 M1135.8,49.6l11.5,44.2l-41.6,40.8h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1V88.7
+        L1135.8,49.6z"/>
+    </g>
+    <path class="${color}" d="M1202.6,88.7h5.1v5.1h5v5.1h5.1v15.3h-5.1v10.2h-10.1v5.1h-15.3v-5.1h-5.1v-15.3h5.1V98.9h5.1v-5.1h10.2
+      L1202.6,88.7z M1177.1,58.2v-5.1h10.2v5.1h5.1v10.2h-10.2v-5.1h-5.1V58.2 M1177.1,139.7h5.1v10.2h-5.1v5.1h-15.3v-5.1h-5.1v-10.2
+      H1177.1 M1121.1,37.8h10.1v-5.1h20.4v-5.1h15.3v5.1h5.1v56.1h-5.1V104h-5.1v10.2h-5.1v5.1h-5.1v5.1h-5.1v5.1h-5.1v5.1h-10.2v5.1
+      h-20.3v-5.1h-5.1v-10.2h5.1v-5.1h5.1v-5.1h5.1v-5.1h5V104h5.1V93.8h5.1V58.2h-5.1v10.2h-5v5.1h-5.1v5.1h-10.2v5.1h-10.2v5.1h-20.4
+      V78.6h5.1V68.4h5.1v-5.1h5.1v-5.1h5.1V48h10.2v-5.1h5.1v-5.1L1121.1,37.8"/>
+  </g>
+  <g>
+    <path class="panda_white" d="M1514.2,139.5v5.1h-5v5.1h-25.5v-5.1h-5.1v-5h-5.1v-5.1h-5.1v-5.1h-5.1v-5.7l-20.4-35.1V73.3l15.3-25.5h5.1v-5
+      h5.1v-5.1h10.2v-5.1h10.2v-5.1h10.2L1514.2,139.5z M1539.7,42.8h5.1v5.1h5.1V53h5.1v5.1l-20.4,63h-10.2l-15.8-32.8l-0.2-49
+      l5.8-11.8h5.1v5.1h10.2v5.1h5.1v5.1L1539.7,42.8"/>
+    <path class="${color}" d="M1458.2,129.3H1448v-5.1h-5.1v-5.1h-5.1V93.6h5.1v-5.1h15.3v5.1h5.1v30.6h-5.1L1458.2,129.3z M1458.2,63.1
+      h-5.1v5.1h-5.1v5.1h-5.1v-5.1h-5.1V58h5.1v-5.1h5.1v-5h10.2V63.1z M1504.1,134.4v10.2h-15.3v-5.1h-5.1v-5.1h5.1v-5.1h10.2v5.1
+      L1504.1,134.4z M1509.1,134.4v-5.1h-5v-5.1h-5.1V114h-5.1v-5.1h-5.1v-5.1h-5.1V93.6h-5.1V47.8h5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v-5
+      h15.2v61h5.1v10.2h5.1v10.2h5.1v5.1h5.1V83.4h5.1V68.2h5.1v-5.1h5.1V58h5.1v5.1h5.1v10.2h5.1V114h-5.1v10.2h-5.1v5.1h-10.2v5.1
+      h-5.1v15.3h-25.5v-10.2h-5.1L1509.1,134.4"/>
+  </g>
+  <g>
+    <path class="panda_white" d="M793.7,32.7v5.1h10.2l35.6,20.4v5.1h5.1v6.6l5.1,8.9l0,35.4h-5.1v10.2h-5.1v5.1h-5.1l-81.5-71.3v-5.1h-5.1
+      V42.9h5.1v-5.1h5.1v-5.1L793.7,32.7z M821.3,126.8l2.9,12.9v5.1h-5.1v5.1h-10.2v5.1h-30.5v-6.3L747,98.6l3.4-14.1l20.6-2.8
+      L821.3,126.8z"/>
+    <path class="${color}" d="M844.6,68.3h10.2v5.1H865v15.3h-5.1v5.1h-5.1v5.1h-10.2L844.6,68.3L844.6,68.3z M839.5,47.9v10.2h-5.1v5.1
+      h-15.3v-5.1H814V53h-5.1v-5.1h-5.1V32.6h5.1v-5.1h15.3v5.1h10.2v5.1h5.1V47.9 M763.1,42.8h5.1v-5.1h10.2v10.2h-5.1V53H758v-5.1h5.1
+      V42.8z M752.9,53v5.1h25.5v5.1h10.2v5.1h5.1v5.1h5.1v5.1h5.1v5.1H814v5.1h5.1v5.1h5.1v5.1h5.1V109h5.1v25.5h-5.1v5.1h-10.2v-5.1
+      H814v-5.1h-5.1v-5.1h-5.1v-5.1h-5v-5.1h-5.1v-5h-5.1V104h-5.1v-5.1h-15.3v-5.1H758v-5.1h-5.1v10.2h5.1v5.1h5.1v5h5.1v10.2h5.1v10.2
+      h5.1v20.4h-15.3v-5.1H758v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-10.1h-5.1V78.5h5.1v-5.1h-5.1V58.1h5.1V53H752.9z"/>
+  </g>
+  <path class="${color}" d="M577.1,129.5v5.1h10.2v5.1h10.2V155h-5.1v5.1h-15.3V155H572v-5.1h-5.1v-10.2h-5.1v-10.2h5.1v-5.1h5.1v5.1H577.1
+    z M582.2,58.2h5.1v-5.1h5.1V48h5.1v5.1h5.1v5.1v5.1v5.1h-5.1v5.1h-15.3L582.2,58.2L582.2,58.2z M597.5,17.5h5.1v-5.1h20.3v5.1h10.2
+    v20.3H628l0,0v5.1h-15.3v-5.1h-5.1v-5h-5v-5.1h-5.1L597.5,17.5L597.5,17.5z M663.7,155h-5.1v5.1h-10.2V155h-5.1v-15.3h10.2v-5.1h5.1
+    v-5.1h5.1v-10.2h5.1v25.5h-5.1V155z M658.6,53.1V42.9h-5.1V32.7h5.1v-5h10.2v5h5.1V48h-5.1l0,0v5.1H658.6z M668.8,109.2h-51v5.1
+    h-40.7v5h-10.2v-15.2h-5.1V99h-5.1v-5.1h-5.1v-5.1h-5.1V78.6h5.1v-5.1h15.3v5.1h15.3v5.1h50.9v-5.1h25.5v-5.1h5.1v-5.1h25.5v20.4
+    h-5.1v5.1H679V99h-10.2l0,0V109.2z"/>
+  <g>
+    <polyline class="${color}" points="1962.2,83.6 1962.2,78.5 1962.2,73.4 1967.3,73.4 1967.3,73.4 1967.3,73.4 1967.3,68.3 1967.3,63.2 
+      1972.4,63.2 1972.4,63.2 1972.4,63.2 1972.4,58.1 1972.4,53 1977.5,53 1977.5,53.1 1977.5,53 1977.5,48 1982.6,48 1982.6,48 
+      1982.6,48 1982.6,42.9 1987.7,42.9 1987.7,37.8 1992.8,37.8 1992.8,37.8 1997.8,37.8 1997.9,37.8 1997.8,37.8 1997.8,32.7 
+      2002.9,32.7 2008,32.7 2013.1,32.7 2013.1,32.7 2013.1,32.7 2013.1,32.7 2013.1,32.7 2013.1,27.6 2018.2,27.6 2023.3,27.6 
+      2023.3,27.6 2028.4,27.6 2033.5,27.6 2038.6,27.6 2038.6,27.6 2043.7,27.6 2048.8,27.6 2048.8,32.7 2048.8,32.7 2048.8,32.7 
+      2053.9,32.7 2059,32.7 2059,37.8 2064.1,37.8 2064.1,37.8 2069.2,37.8 2069.2,42.9 2074.3,42.9 2074.3,48 2074.3,48 2079.4,48 
+      2079.4,53 2079.4,53.1 2079.4,58.1 2079.3,58.1 2079.4,58.1 2084.4,58.1 2084.4,63.2 2084.4,63.2 2084.4,63.2 2089.5,63.2 
+      2089.5,68.3 2089.5,73.4 2094.6,73.4 2094.6,78.5 2094.6,83.6 2094.6,88.7 2094.6,88.7 2094.6,93.8 2094.6,98.9 2094.6,104 
+      2094.6,109.1 2089.5,109.1 2089.5,114.2 2089.5,114.2 2089.5,119.3 2084.4,119.3 2084.4,124.4 2084.4,129.5 2079.4,129.5 
+      2079.4,129.4 2079.4,129.5 2079.3,129.5 2079.4,129.5 2079.4,134.5 2074.3,134.5 2074.3,134.5 2074.3,139.6 2069.2,139.6 
+      2069.2,144.7 2064.1,144.7 2064.1,144.7 2059,144.7 2059,149.8 2053.9,149.8 2048.8,149.8 2048.8,154.9 2043.7,154.9 2038.6,154.9 
+      2038.6,154.9 2033.5,154.9 2028.4,154.9 2023.3,154.9 2023.3,154.9 2018.2,154.9 2013.1,154.9 2013.1,154.9 2008,154.9 2008,149.8 
+      2002.9,149.8 1997.9,149.8 1997.8,149.8 1992.8,149.8 1992.8,144.7 1992.8,144.7 1992.8,144.7 1987.7,144.7 1987.7,139.6 
+      1982.6,139.6 1982.6,139.6 1977.5,139.6 1977.5,134.5 1977.5,129.5 1977.5,129.4 1977.5,129.5 1972.4,129.5 1972.4,124.4 
+      1972.4,119.3 1967.3,119.3 1967.3,114.2 1967.3,114.2 1967.3,109.1 1967.3,104 1967.3,104 1967.3,104 1962.2,104 1962.2,98.9 
+      1962.2,93.8 1962.2,88.7 1962.2,88.7 1962.2,83.6 	"/>
+  </g>
+  <path class="${color}" d="M1811.4,144.5v-5.1h5.1v-5.1h10.2v-5.1h10.2v-5.1h50.9V119h-5.1v-5.1h-10.2v-5.1h-50.9v5.1h-10.2v5.1h-10.2v5.1
+    h-5.1V119h-5.1v-15.3h-5.1V88.5h5.1v-5.1h10.2v-5.1h5.1v-5.1h10.2v-5.1h5.1V63h10.2v-5.1h45.8V63h20.4v-5.1h-5.1v-5.1h-10.2v-5.1
+    h-45.8v-5.1h-20.4v-5.1h5.1v-5.1h15.3v-5.1h35.6v5.1h10.2v5.1h10.2v5.1h5.1v5.1h5.1v5.1h5.1v5.1h5.1v10.2h5.1v10.2h5.1v30.5h-5.1
+    v5.1h-5.1v10.2h-5.1v10.2H1898v5.1h-5.1v5.1h-10.2v5.1h-10.2v5.1h-40.7v-5.1h-15.3v-5.1H1811.4z"/>
+  <g>
+    <path class="panda_white" d="M929.4,134.7h-5.1v-5.1h-5.1v-5.1h5.1l0.4-42l20.8-32.7L962.7,89l0.6,50.4L960,155h-5.1v-5.1h-10.2v-5.1h-5.1
+      v-5h-10.2V134.7 M1010.9,139.8h-5.1v5h-10.2v5.1h-10.2v5.1h-10.2v-5.1h5.1l-19.6-90.7L960,43v-5.1h5v-5.1h5.1v-5.1h15.3v5.1h5.1
+      v5.1h5.1V43h5.1v5.1h5.1v5.1h5.1v9.1l15.1,0.6v31.1h5.3v15.3h-5.1v5.1h-5.1v5.1h-5.1v15.3h-5.1L1010.9,139.8z"/>
+    <path class="${color}" d="M985.4,53.2h-10.2v-5.1h-5.1V37.9h15.3V43h5.1v5.1h-5.1V53.2z M985.4,144.8h-5.1v5.1h-5.1v5.1H960V93.9h-5.1
+      V83.7h-5.1V73.5h-5.1v-5.1h-5.1V99h-5.1v15.3h-5.1v5.1h-5.1v5.1h-5.1v-5.1h-5.1v-10.2H909V68.4h5.1V58.2h5.1v-5h10.2v-5.1h5.1V32.8
+      h5.1v-5.1h15.3v5.1h5.1V43h5.1v10.2h5v5h5.1v10.2h5.1v5.1h5.1v5.1h5.1v10.2h5.1v45.9h-5.1v5h-5.1L985.4,144.8z M1036.4,124.5h-5.1
+      v5.1h-5.1v5.1H1016v-5.1h-5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v5.1h5.1L1036.4,124.5L1036.4,124.5z M1036.4,88.8h-5.1v5.1H1016
+      v-5.1h-5.1V58.2h5.1v-5h10.2v5h5.1v5.1h5.1L1036.4,88.8L1036.4,88.8z"/>
+  </g>
+  <g>
+    <path class="panda_white" d="M149.5,68.2V58h-5.1V47.8l-4.6-20.5l-20.9,0.1v-5.1h-10.2v-5.1H73.1v5.1H62.9l-16.6,5.1l-3.9,5l0.1,20.5h-5.1
+      l0,33H27.3l-0.1,34.9h20.4v13.8l25.5-0.2v5.1l65.7,0l0.3-15.3h5.3v-5.1h5.1v-10.2L149.5,68.2z"/>
+    <path class="${color}" d="M98.7,63.1H88.5V58h10.2V63.1z M103.8,73.3H83.4v-5.1h-5.1v-5.1h5.1v5.1h20.4V73.3z M124.1,42.7v5.1h5.1v5.1
+      h5.1v10.2H119V58h-5.1V42.7H124.1z M149.6,42.7h-5.1v5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1V22.3h5.1v-5.1h10.2v5.1h5.1v5.1h5.1
+      L149.6,42.7L149.6,42.7z M103.8,134.4H119v-5.1h10.2v-5.1h10.2v30.6h-5.1v5H119v-5h-5.1v-5.1h-5.1v-5.1h-5V134.4z M68.1,42.7h5.1
+      V58h-5.1v5.1H57.9V58h-5.1V47.8h5.1v-5.1H68.1 M52.8,17.2h5.1v5.1H63v5.1h-5.1v5.1h-5.1v5.1h-5.1v5.1h-5.1 M42.6,42.7h-5.1V27.4
+      h5.1v-5.1h5.1v-5.1h5.1 M22.3,139.5h-5.1v-20.4h5.1V114h5v-5.1h20.4v5.1h5.1v5.1h5.1v5.1H63v10.2h-5.1v5.1h-5.1v5.1H42.6v5.1H32.4
+      v-5.1H22.3V139.5z M52.8,78.3h5.1v5.1h66.2v-5.1h15.3v-5.1h5.1v-5h5.1v10.1h15.3v5.1h5.1v15.3h-5.1v5.1h-5.1v5.1h-15.3v-5.1h-10.2
+      v-5.1h-10.2v-5.1H52.8v5.1H27.3v-5.1h-5V83.4h-5.1v-5.1h-5.1v-5H7V52.9h5.1v-5.1h10.2v5.1h5.1V58h5v5.1h5.1v5.1h5.1v5h5.1v5.1
+      L52.8,78.3"/>
+  </g>
+  <path class="${color}" d="M285.3,42.7h5.1v-5.1h15.3v5.1h5.1v5.1h5.1V58h-5.1v5.1h-5.1V58h-5.1v-5.1h-5.1v-5.1h-10.2L285.3,42.7
+    L285.3,42.7z M280.2,68.2h5.1v-5.1h10.2v5.1h5.1v10.2h-5.1v5.1h-10.2v-5.1h-5.1V68.2z M259.8,73.3H270v5.1h-10.2V73.3z M254.8,83.5
+    h20.3v5.1h-20.3V83.5z M244.6,68.2v10.2h-5.1v5.1h-15.3V73.3h5.1v-5.1h5.1v-5.1h5.1v5.1L244.6,68.2z M208.9,47.8h5.1v-5.1h15.3v5.1
+    h5.1v5.1h-5.1V58h-5.1v5.1h-5.1v5.1H214v-5.1h-5.1V47.8z M239.5,154.8v5.1h-15.3v-5.1h-5.1v-25.5h15.3v5.1h10.2v5.1h5.1v10.2h-5.1
+    v5.1L239.5,154.8z M321,144.6v5.1h-5.1v5.1h-15.3v-5.1h-5.1v-5.1h-5.1v-10.2h10.2v-5.1h10.2v-5.1h5.1v-5.1h10.2v25.5H321z
+      M341.4,98.8h-5.1v5h-5.1v5.1h-5.1v5.1h-25.5v-5.1h-61.1v5.1h-45.9v-5.1h-5.1V93.7h5.1v-5.1h15.3v5.1h101.9v-5.1h5.1v-5.1h5.1v-5.1
+    h10.2v5.1h5.1v5.1h5.1L341.4,98.8L341.4,98.8z"/>
+  <g>
+    <path class="panda_white" d="M380.1,108.9v10.2h5.1v5.1h5.3l0.3,15.3l65.7,0v-5.1l25.5,0.2v-13.8h20.4l-0.1-34.9h-10.1l0-33h-5.1l0.1-20.5
+      l-3.9-5l-16.6-5.1h-10.2v-5.1h-35.6v5.1h-10.2v5.1l-20.9-0.1l-4.6,20.5V58h-5.1v10.2L380.1,108.9z"/>
+    <path class="${color}" d="M430.9,58h10.2v5.1h-10.2V58z M425.8,68.2h20.4v-5.1h5.1v5.1h-5.1v5.1h-20.4V68.2z M415.7,42.7V58h-5.1v5.1
+      h-15.3V52.9h5.1v-5.1h5.1v-5.1H415.7z M380,42.7V27.4h5.1v-5.1h5.1v-5.1h10.2v5.1h5.1v10.2h-5.1v5.1h-5.1v5.1h-5.1v5.1h-5.1v-5.1
+      H380L380,42.7z M425.8,144.6h-5v5.1h-5.1v5.1h-5.1v5h-15.3v-5h-5.1v-30.6h10.2v5.1h10.2v5.1h15.2V144.6z M461.5,42.7h10.2v5.1h5.1
+      V58h-5.1v5.1h-10.2V58h-5.1V42.7H461.5 M487,42.7h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h5.1v-5.1h5.1 M476.8,17.2h5.1v5.1h5.1
+      v5.1h5.1v15.3H487 M507.3,144.6h-10.1v5.1H487v-5.1h-10.2v-5.1h-5.1v-5.1h-5.1v-10.2h5.1v-5.1h5.1V114h5.1v-5.1h20.4v5.1h5v5.1h5.1
+      v20.4h-5.1V144.6z M476.8,78.3h5.1v-5.1h5.1v-5h5.1v-5.1h5.1V58h5v-5.1h5.1v-5.1h10.2v5.1h5.1v20.4h-5.1v5h-5.1v5.1h-5.1v10.2h-5
+      v5.1h-25.5v-5.1h-71.3v5.1h-10.2v5.1h-10.2v5.1h-15.3v-5.1h-5.1v-5.1h-5.1V83.4h5.1v-5.1H380V68.2h5.1v5h5.1v5.1h15.3v5.1h66.2
+      v-5.1L476.8,78.3"/>
+  </g>
+  <g>
+    <path class="panda_white" d="M1295.2,60.5l-2.9-12.9v-5.1h5.1v-5.1h10.2v-5.1h30.5v6.3l31.4,50.1l-3.4,14.1l-20.6,2.8L1295.2,60.5z
+        M1322.8,154.6v-5.1h-10.2l-35.6-20.4V124h-5.1v-5.8l-5.1-13l0-32.2h5.1V62.9h5.1v-5.1h5.1l81.5,71.3v5.1h5.1v10.2h-5.1v5.1h-5.1
+      v5.1H1322.8z"/>
+    <path class="${color}" d="M1271.9,119h-10.2v-5.1h-10.2V98.6h5.1v-5.1h5.1v-5.1h10.2V119L1271.9,119z M1277,139.4v-10.2h5.1v-5.1h15.3
+      v5.1h5.1v5.1h5.1v5.1h5.1v15.3h-5.1v5.1h-15.3v-5.1h-10.2v-5.1h-5.1V139.4 M1353.4,144.5h-5.1v5.1h-10.2v-10.2h5.1v-5.1h15.3v5.1
+      h-5.1V144.5z M1363.6,134.3v-5.1h-25.5v-5.1h-10.2V119h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-10.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1V78.3
+      h-5.1V52.8h5.1v-5.1h10.2v5.1h5.1v5.1h5.1V63h5.1v5.1h5v5.1h5.1v5h5.1v5.1h5.1v5.1h15.3v5.1h10.2v5.1h5.1V88.4h-5.1v-5.1h-5.1v-5
+      h-5.1V68.1h-5.1V57.9h-5.1V37.5h15.3v5.1h5.1v5.1h5.1v5.1h5.1v5.1h5.1V63h5.1v5.1h5.1v10.1h5.1v30.6h-5.1v5.1h5.1v15.3h-5.1v5.1
+      H1363.6z"/>
+  </g>
+  <g>
+    <g>
+      <path class="panda_white" d="M1650.3,139.3v5.1h-5.1 M1645.2,144.4H1635v-5.1h-5.1v-5.1h-5.1V124h-5.1V93.5l15.3-30.6V52.7h5.1v-5.1
+        l12.8-10.2l38.2,0v5.1h10.2v5.1l-51,91.7 M1686.5,137.7L1675,93.5l41.6-40.8h5.1v5.1h5.1v5.1h5.1V68h5.1v5.1h5.1v25.5
+        L1686.5,137.7z"/>
+    </g>
+    <path class="${color}" d="M1619.7,98.6h-5.1v-5.1h-5v-5.1h-5.1V73.1h5.1V62.9h10.1v-5.1h15.3v5.1h5.1v15.3h-5.1v10.2h-5.1v5.1h-10.2
+      L1619.7,98.6z M1645.2,129.1v5.1H1635v-5.1h-5.1v-10.2h10.2v5.1h5.1V129.1 M1645.2,47.6h-5.1V37.4h5.1v-5.1h15.3v5.1h5.1v10.2
+      H1645.2 M1701.2,149.5h-10.1v5.1h-20.4v5.1h-15.3v-5.1h-5.1V98.5h5.1V83.3h5.1V73.1h5.1V68h5.1v-5.1h5.1v-5.1h5.1v-5.1h10.2v-5.1
+      h20.3v5.1h5.1v10.2h-5.1V68h-5.1v5.1h-5.1v5.1h-5v5.1h-5.1v10.2h-5.1v35.6h5.1v-10.2h5v-5.1h5.1v-5.1h10.2v-5.1h10.2v-5.1h20.4
+      v10.2h-5.1v10.2h-5.1v5.1h-5.1v5.1h-5.1v10.2h-10.2v5.1h-5.1v5.1H1701.2"/>
+  </g>
+  </svg>
+    `
+  }
+
+  const colorVariations = [
+    'blue',
+    'green',
+    'pink',
+    'brown',
+    'dark_brown'
+  ]
+
+  const animationPattern = [ 
+    11,11,11,11,10,
+    9,8,7,6,5,4,
+    9,8,7,6,5,4,
+    3,2,1,0
+  ]
+
+  const frameSize = 45
+
+  //rolling animation
+  const animateSprite = (target, speed) => {
+    let i = 0
+    target.style.margin = `0px 0px 0px -${(animationPattern[i] * frameSize)}px`
+
+    setInterval(function () {
+      target.style.margin = `0px 0px 0px -${(animationPattern[i] * frameSize)}px`
+      if (animationPattern[i] === 0) {
+        i -= 2
+      } else {
+        i++
+      }
+    }, speed)
+  }
+
+  
+  const pandaFace = document.querySelector('.panda_face')
+  const button = document.querySelector('button')
+  const cover = document.querySelector('.cover')
+  const pandaIcon = document.querySelectorAll('.panda_icon')
+  let pandaPos = pandaFace.getBoundingClientRect()
+  let pandaColor = pandaIcon[1].classList[1]
+  let pandaSwitch = true
+
+
+  const movePanda = target =>{
+    target.style.transition = '10s'
+    const randomTop = Math.ceil(Math.random() * 100)
+    target.style.zIndex = randomTop
+    target.style.top = `${randomTop}%`
+    target.style.left = `${Math.ceil(Math.random() * 100)}%`
+  }
+
+
+  const animateButton = () =>{
+    pandaColor = pandaIcon[1].classList[1]
+    button.classList.add('animate')
+    pandaIcon.forEach(ele=>ele.classList.add(pandaColor))
+    pandaFace.classList.remove('fade_in')
+  }
+
+
+  const completeButtonAnimation = () =>{
+    button.classList.remove('animate')
+    pandaFace.classList.remove('hide')
+    pandaFace.classList.add('fade_in')
+    pandaIcon[1].classList.add(colorVariations[Math.floor(Math.random() * colorVariations.length)])
+    pandaSwitch = true
+  }
+
+
+  const createAndAnimatePanda = () =>{
+    const panda = document.createElement('div')
+    panda.classList.add('panda')
+    panda.style.top = `${pandaPos.y - 10}px`
+    panda.style.left = `${pandaPos.x - 10}px`
+    cover.appendChild(panda)
+
+    const inner = document.createElement('div')
+    inner.classList.add('panda_inner')
+    inner.style.width = `${frameSize * 12}px`
+    inner.innerHTML = spriteSvg(pandaColor)
+    panda.appendChild(inner)
+
+    animateSprite(inner, 110)
+    pandaFace.classList.add('hide')
+
+    setTimeout(()=>{
+      panda.style.left = `${pandaPos.x > 300 ? pandaPos.x - 300 : 50}px`
+      pandaIcon.forEach(ele=>ele.classList.remove(pandaColor))
+    }, 40)
+
+    setTimeout(()=>{
+      movePanda(panda)
+      setInterval(()=>{
+        movePanda(panda)
+      },4000)
+    }, 2000)
+  }
+  
+
+  const triggerPanda = ()=>{  
+    if (!pandaSwitch) return   
+    pandaSwitch = false
+
+    animateButton()
+
+    setTimeout(()=>{
+      createAndAnimatePanda()
+
+      setTimeout(()=>{
+        completeButtonAnimation()
+      },1200)  
+
+    },560)
+  }
+
+  button.addEventListener('click', triggerPanda)
+
+  window.addEventListener('resize', ()=>pandaPos = pandaFace.getBoundingClientRect())
+
+}
+
+window.addEventListener('DOMContentLoaded', init)
+
+
+
diff --git a/panda-button/src/style.css b/panda-button/src/style.css
new file mode 100644
index 0000000..683a7cc
--- /dev/null
+++ b/panda-button/src/style.css
@@ -0,0 +1,207 @@
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  background-color: #423a41;
+  overflow: hidden;
+}
+
+.cover {
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  pointer-events: none;
+}
+
+.wrapper {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.panda_face.hide { opacity: 0; }
+
+span { margin-left:12px; }
+
+.sign {
+  position: absolute;
+  color: white;
+  bottom: 10px;
+  right: 10px;
+  font-size: 10px;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.panda {
+  position: absolute;
+  height: 45px;
+  width: 45px;
+  overflow: hidden;
+  transition: 2s;
+}
+
+.panda_inner {
+  height: 100%;
+}
+
+.panda_inner svg {
+  height: 100%;
+  width: auto;
+}
+
+button {
+  width: 180px;
+  padding: 10px 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: solid rgb(131, 88, 59);
+  border-width:2px 2px 7px 2px;
+  border-radius: 10px;
+  background-color: rgb(83, 39, 9);
+  font-family: 'Press Start 2P', cursive;
+  font-size: 15px;
+  color: white;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+button:hover {
+  border-width:2px 2px 4px 2px;
+  margin-top: 3px;
+}
+
+button:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px hotpink;
+}
+
+.panda_face {
+  position: relative;
+  height: 25px;
+  width: auto;
+}
+
+.panda_face {
+  opacity: 1;
+}
+
+.panda_face svg {
+  height: 100%;
+  width: auto;
+}
+
+.panda_white { fill: white; }
+.blue { fill: #12b7e9; }
+.green { fill: rgb(43, 163, 113); }
+.pink { fill: hotpink;}
+.brown { fill: rgb(126, 80, 62);}
+.dark_brown { fill: rgb(53, 34, 27);}
+
+button:hover .panda_face {
+  animation: bop infinite 0.5s;
+}
+
+@keyframes bop {
+  0% {
+    top: 0;
+    transform: scale(1);
+  }
+  50% {
+    top: -5px;
+    transform: scale(0.95,1.05);
+  }
+  90% {
+    transform: scale(1.1,0.9);
+  }
+  100% {
+    top: 0;
+    transform: scale(1);
+  }
+}
+
+button.animate svg {
+  animation: spin infinite linear 0.5s;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(-720deg);
+  }
+}
+
+@keyframes fadeout {
+  0% { 
+    opacity: 1;
+  }
+  90% { 
+    opacity: 0;
+  }
+  100% { 
+    opacity: 0;
+    display: none;
+  }
+} 
+
+button:hover .fade_in,
+.panda_face.fade_in {
+  animation: fade_in forwards 0.5s;
+}
+
+@keyframes fade_in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+button.animate {
+  border-color: rgb(58, 28, 9);
+  transform-origin: bottom right;
+  animation: shake ease forwards 0.5s;
+}
+
+@keyframes shake {
+  0% { 
+    transform-origin: bottom right;
+    transform: translate(0,0) rotate(0deg);
+  }
+  40% { 
+    transform: translate(5px,0) rotate(45deg);
+  }
+  70% {
+    transform-origin: bottom right; 
+    transform: translate(5px,0) rotate(45deg);
+  }
+  85% { 
+    transform-origin: bottom left; 
+    transform: translate(0,0) rotate(-20deg);
+  }
+  95% { 
+    transform: translate(0,0) rotate(0deg);
+  }
+  100% { 
+    transform-origin: bottom right;
+    transform: translate(0,0) rotate(0deg);
+  }
+}
diff --git a/pantone-color-chips/README.markdown b/pantone-color-chips/README.markdown
new file mode 100644
index 0000000..d7e50d2
--- /dev/null
+++ b/pantone-color-chips/README.markdown
@@ -0,0 +1,12 @@
+# Pantone Color Chips
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jackiezen/pen/vYGPQZK](https://codepen.io/jackiezen/pen/vYGPQZK).
+
+CodePen Challenge: September 2020 — So! Much! HTML!
+---------
+100 Details/Summary Elements
+---------
+---
+Click on the Pantone color chip to toggle between the Pantone color name and the hex value.  
+Drag the color chips to move around!  
+This pen is also fully responsive.
diff --git a/pantone-color-chips/dist/index.html b/pantone-color-chips/dist/index.html
new file mode 100644
index 0000000..b507a01
--- /dev/null
+++ b/pantone-color-chips/dist/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Pantone Color Chips</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+	<details id="desc">
+		<summary>
+			<ul>
+				<li>Click on color chip to toggle between Pantone color and Hex value</li>
+				<li>Drag color chips to rearrange</li>
+				<li>Refresh for new colors</li>
+				<ul>
+		</summary>
+	</details>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/pantone-color-chips/dist/script.js b/pantone-color-chips/dist/script.js
new file mode 100644
index 0000000..63cec50
--- /dev/null
+++ b/pantone-color-chips/dist/script.js
@@ -0,0 +1,67 @@
+// credit to https://codepen.io/jackcranston/pen/GdvYwd for random pantone color generator snippet
+
+const target = document.querySelector(".container");
+var colorCount = 100; // change this to choose number of colors
+$(document).ready(function () {
+	$(".container").hide(0).delay(500).fadeIn(500);
+});
+fetch(
+	"https://raw.githubusercontent.com/Margaret2/pantone-colors/master/pantone-colors.json"
+)
+	.then((res) => {
+		return res.json();
+	})
+	.then((data) => {
+		for (i = 0; i < colorCount; i++) {
+			var randNum = Math.ceil(Math.random() * data.names.length);
+			createColor(data, randNum);
+			scatterCards();
+		}
+		show(0);
+	})
+	.catch((err) => {
+		console.log(err);
+	});
+
+function createColor(colors, randNum) {
+	target.innerHTML += `<details>
+  <summary style="background:${colors.values[randNum]}" class="color">
+  <div class="color-title">
+  <h1>${colors.names[randNum]}</h1>
+</div>
+</summary>
+<div class="color-codes"><h1>${colors.values[randNum]}</h1>
+</div>
+</details>`;
+}
+
+function show(i) {
+	var boxes = document.querySelectorAll("details");
+	if (i < colorCount) {
+		setTimeout(function () {
+			boxes[i].classList.add("active");
+			i++;
+			show(i);
+		}, 100);
+	}
+}
+
+function scatterCards() {
+	$("details")
+		.each(function () {
+			var rNum = Math.random() * 50 - 2;
+			rNum *= Math.floor(Math.random() * 2) == 1 ? 1 : -1;
+			var x = Math.random() * 50 - 5;
+			var y = Math.random() * 50 - 5;
+			x *= Math.floor(Math.random() * 2) == 1 ? 1 : -1;
+			y *= Math.floor(Math.random() * 2) == 1 ? 1 : -1;
+
+			$(this).css({
+				"-webkit-transform": "rotate(" + rNum + "2deg)",
+				"-moz-transform": "rotate(" + rNum + "2deg)",
+				top: x,
+				left: y
+			});
+		})
+		.draggable({ stack: "details" });
+}
\ No newline at end of file
diff --git a/pantone-color-chips/dist/style.css b/pantone-color-chips/dist/style.css
new file mode 100644
index 0000000..1f769fe
--- /dev/null
+++ b/pantone-color-chips/dist/style.css
@@ -0,0 +1,125 @@
+* {
+	box-sizing: border-box;
+	--color-size: 200px;
+	outline: none;
+}
+
+body {
+	font-family: "Arial", sans-serif;
+	text-transform: uppercase;
+	background: #f4d1cc;
+	color: #343434;
+}
+
+.container {
+	display: flex;
+	flex-wrap: wrap;
+	width: 100%;
+	/* 	padding: 50px; */
+	justify-content: center;
+	overflow: hidden;
+}
+
+details {
+	min-width: var(--color-size);
+	height: calc((var(--color-size) / 2) * 3);
+	position: relative;
+	width: var(--color-size);
+	margin: 10px;
+	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+	user-select: none;
+	text-transform: uppercase;
+	font-family: "Arial", sans-serif;
+}
+
+.color-title {
+	pointer-events: none;
+}
+
+summary {
+	width: 100%;
+	height: var(--color-size);
+	cursor: pointer;
+}
+
+.color-title,
+.color-codes {
+	background: white;
+	padding: 15px;
+	height: calc((var(--color-size)) / 2);
+	position: absolute;
+	width: 100%;
+	bottom: 0;
+}
+
+.color-title:before,
+.color-codes:before {
+	position: absolute;
+	font-size: 26px;
+	letter-spacing: -1px;
+	font-weight: 800;
+}
+
+.color-title:before {
+	content: "pantone";
+}
+
+.color-codes:before {
+	content: "hex";
+}
+
+details > summary::-webkit-details-marker {
+	display: none;
+}
+
+h1 {
+	margin-top: 30px;
+	font-size: 16px;
+	font-weight: 600;
+}
+
+#desc {
+	background: #fff;
+	z-index: 100;
+	padding: 20px;
+}
+
+#desc ul {
+	list-style-type: none;
+	padding-left: 15px;
+}
+
+#desc li::before {
+	content: "•";
+	display: inline-block;
+	width: 1em;
+	margin-left: -1em;
+}
+
+#desc li:nth-child(1):before {
+	color: #a22452;
+}
+
+#desc li:nth-child(2):before {
+	color: #5487a4;
+}
+
+#desc li:nth-child(3):before {
+	color: #e7aa56;
+}
+
+#desc li {
+	margin-bottom: 10px;
+	font-size: 16px;
+	font-weight: 600;
+	line-height: 1.25;
+}
+
+#desc summary {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
\ No newline at end of file
diff --git a/pantone-color-chips/license.txt b/pantone-color-chips/license.txt
new file mode 100644
index 0000000..104ff3e
--- /dev/null
+++ b/pantone-color-chips/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Jackie Zen (https://codepen.io/jackiezen/pen/vYGPQZK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/pantone-color-chips/src/index.html b/pantone-color-chips/src/index.html
new file mode 100644
index 0000000..8d46b55
--- /dev/null
+++ b/pantone-color-chips/src/index.html
@@ -0,0 +1,11 @@
+<div class="container">
+	<details id="desc">
+		<summary>
+			<ul>
+				<li>Click on color chip to toggle between Pantone color and Hex value</li>
+				<li>Drag color chips to rearrange</li>
+				<li>Refresh for new colors</li>
+				<ul>
+		</summary>
+	</details>
+</div>
\ No newline at end of file
diff --git a/pantone-color-chips/src/script.js b/pantone-color-chips/src/script.js
new file mode 100644
index 0000000..89ee44b
--- /dev/null
+++ b/pantone-color-chips/src/script.js
@@ -0,0 +1,67 @@
+// credit to https://codepen.io/jackcranston/pen/GdvYwd for random pantone color generator snippet
+
+const target = document.querySelector(".container");
+var colorCount = 100; // change this to choose number of colors
+$(document).ready(function () {
+	$(".container").hide(0).delay(500).fadeIn(500);
+});
+fetch(
+	"https://raw.githubusercontent.com/Margaret2/pantone-colors/master/pantone-colors.json"
+)
+	.then((res) => {
+		return res.json();
+	})
+	.then((data) => {
+		for (i = 0; i < colorCount; i++) {
+			var randNum = Math.ceil(Math.random() * data.names.length);
+			createColor(data, randNum);
+			scatterCards();
+		}
+		show(0);
+	})
+	.catch((err) => {
+		console.log(err);
+	});
+
+function createColor(colors, randNum) {
+	target.innerHTML += `<details>
+  <summary style="background:${colors.values[randNum]}" class="color">
+  <div class="color-title">
+  <h1>${colors.names[randNum]}</h1>
+</div>
+</summary>
+<div class="color-codes"><h1>${colors.values[randNum]}</h1>
+</div>
+</details>`;
+}
+
+function show(i) {
+	var boxes = document.querySelectorAll("details");
+	if (i < colorCount) {
+		setTimeout(function () {
+			boxes[i].classList.add("active");
+			i++;
+			show(i);
+		}, 100);
+	}
+}
+
+function scatterCards() {
+	$("details")
+		.each(function () {
+			var rNum = Math.random() * 50 - 2;
+			rNum *= Math.floor(Math.random() * 2) == 1 ? 1 : -1;
+			var x = Math.random() * 50 - 5;
+			var y = Math.random() * 50 - 5;
+			x *= Math.floor(Math.random() * 2) == 1 ? 1 : -1;
+			y *= Math.floor(Math.random() * 2) == 1 ? 1 : -1;
+
+			$(this).css({
+				"-webkit-transform": "rotate(" + rNum + "2deg)",
+				"-moz-transform": "rotate(" + rNum + "2deg)",
+				top: x,
+				left: y
+			});
+		})
+		.draggable({ stack: "details" });
+}
diff --git a/pantone-color-chips/src/style.css b/pantone-color-chips/src/style.css
new file mode 100644
index 0000000..61cfda6
--- /dev/null
+++ b/pantone-color-chips/src/style.css
@@ -0,0 +1,125 @@
+* {
+	box-sizing: border-box;
+	--color-size: 200px;
+	outline: none;
+}
+
+body {
+	font-family: "Arial", sans-serif;
+	text-transform: uppercase;
+	background: #f4d1cc;
+	color: #343434;
+}
+
+.container {
+	display: flex;
+	flex-wrap: wrap;
+	width: 100%;
+	/* 	padding: 50px; */
+	justify-content: center;
+	overflow: hidden;
+}
+
+details {
+	min-width: var(--color-size);
+	height: calc((var(--color-size) / 2) * 3);
+	position: relative;
+	width: var(--color-size);
+	margin: 10px;
+	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+	user-select: none;
+	text-transform: uppercase;
+	font-family: "Arial", sans-serif;
+}
+
+.color-title {
+	pointer-events: none;
+}
+
+summary {
+	width: 100%;
+	height: var(--color-size);
+	cursor: pointer;
+}
+
+.color-title,
+.color-codes {
+	background: white;
+	padding: 15px;
+	height: calc((var(--color-size)) / 2);
+	position: absolute;
+	width: 100%;
+	bottom: 0;
+}
+
+.color-title:before,
+.color-codes:before {
+	position: absolute;
+	font-size: 26px;
+	letter-spacing: -1px;
+	font-weight: 800;
+}
+
+.color-title:before {
+	content: "pantone";
+}
+
+.color-codes:before {
+	content: "hex";
+}
+
+details > summary::-webkit-details-marker {
+	display: none;
+}
+
+h1 {
+	margin-top: 30px;
+	font-size: 16px;
+	font-weight: 600;
+}
+
+#desc {
+	background: #fff;
+	z-index: 100;
+	padding: 20px;
+}
+
+#desc ul {
+	list-style-type: none;
+	padding-left: 15px;
+}
+
+#desc li::before {
+	content: "•";
+	display: inline-block;
+	width: 1em;
+	margin-left: -1em;
+}
+
+#desc li:nth-child(1):before {
+	color: #a22452;
+}
+
+#desc li:nth-child(2):before {
+	color: #5487a4;
+}
+
+#desc li:nth-child(3):before {
+	color: #e7aa56;
+}
+
+#desc li {
+	margin-bottom: 10px;
+	font-size: 16px;
+	font-weight: 600;
+	line-height: 1.25;
+}
+
+#desc summary {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
diff --git a/paper-chase/README.markdown b/paper-chase/README.markdown
new file mode 100644
index 0000000..90c77d9
--- /dev/null
+++ b/paper-chase/README.markdown
@@ -0,0 +1,4 @@
+# Paper Chase
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/gOpzozo](https://codepen.io/cobra_winfrey/pen/gOpzozo).
+
+ 
\ No newline at end of file
diff --git a/paper-chase/dist/index.html b/paper-chase/dist/index.html
new file mode 100644
index 0000000..158090d
--- /dev/null
+++ b/paper-chase/dist/index.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Paper Chase</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id='sidewalk'>
+  <div class='lines'></div>
+</div>
+<div class='wrap'>
+  <div class='roll'>
+    <div class='body'>
+      <div class='face'>
+        <div class='eye'></div>
+        <div class='mouth'></div>
+      </div>
+      <div class='paper'></div>
+    </div>
+    <div class='leg'>
+      <div class='inner'>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+      </div>
+    </div>
+    <div class='leg'>
+      <div class='inner'>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class='wrap'>
+  <div class='roll'>
+    <div class='body'>
+      <div class='face'>
+        <div class='eye'></div>
+        <div class='mouth'></div>
+      </div>
+      <div class='paper'></div>
+    </div>
+    <div class='leg'>
+      <div class='inner'>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+      </div>
+    </div>
+    <div class='leg'>
+      <div class='inner'>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+        <div class='segment'></div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/paper-chase/dist/style.css b/paper-chase/dist/style.css
new file mode 100644
index 0000000..8ac28d5
--- /dev/null
+++ b/paper-chase/dist/style.css
@@ -0,0 +1,800 @@
+html {
+  font-size: 2.9vmin;
+}
+
+body {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  height: 100vh;
+  overflow: hidden;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #19b6ff), color-stop(50%, #222), color-stop(#222), to(#ccc));
+  background: linear-gradient(to bottom, #19b6ff 50%, #222 50%, #222 calc(50% + 0.25rem), #ccc calc(50% + 0.25rem));
+  -webkit-perspective: 3rem;
+          perspective: 3rem;
+}
+body * {
+  box-sizing: border-box;
+}
+body #sidewalk {
+  position: absolute;
+  width: 400vw;
+  height: 100vh;
+  top: calc(50% + 0.25rem);
+  background: repeating-linear-gradient(to right, #222, #222 0.15rem, transparent 0.15rem, transparent 10rem);
+  z-index: 0;
+  left: -100%;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-transform: translateX(0) rotateX(10deg);
+          transform: translateX(0) rotateX(10deg);
+  -webkit-transform-origin: top;
+          transform-origin: top;
+  -webkit-animation: sidewalk 0.5s linear infinite;
+          animation: sidewalk 0.5s linear infinite;
+}
+@-webkit-keyframes sidewalk {
+  to {
+    -webkit-transform: translateX(10rem) rotateX(10deg);
+            transform: translateX(10rem) rotateX(10deg);
+  }
+}
+@keyframes sidewalk {
+  to {
+    -webkit-transform: translateX(10rem) rotateX(10deg);
+            transform: translateX(10rem) rotateX(10deg);
+  }
+}
+body #sidewalk:before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 10%;
+  top: calc(-10% - 0.25rem);
+  left: 0;
+  -webkit-transform: rotateX(-10deg);
+          transform: rotateX(-10deg);
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  background: -webkit-gradient(linear, left top, left bottom, from(#222), color-stop(0.15rem, #222), color-stop(0.15rem, #60d54a));
+  background: linear-gradient(to bottom, #222, #222 0.15rem, #60d54a 0.15rem);
+}
+body .wrap {
+  width: 10rem;
+  height: 10rem;
+  z-index: 2;
+  position: absolute;
+}
+body .wrap:nth-of-type(2) {
+  top: calc(50% + 10rem);
+  -webkit-transform: scaleY(-1) skewX(-40deg) translateX(5rem);
+          transform: scaleY(-1) skewX(-40deg) translateX(5rem);
+  -webkit-filter: brightness(0) blur(3px);
+          filter: brightness(0) blur(3px);
+  opacity: 0.05;
+}
+body .wrap:nth-of-type(2) .roll {
+  -webkit-animation: charge3 2s ease-in-out infinite alternate, charge4 1s ease-in-out infinite alternate;
+          animation: charge3 2s ease-in-out infinite alternate, charge4 1s ease-in-out infinite alternate;
+}
+@-webkit-keyframes charge3 {
+  to {
+    -webkit-transform: translateX(-3rem) scale(0.9) skewX(5deg) scaleY(1.2);
+            transform: translateX(-3rem) scale(0.9) skewX(5deg) scaleY(1.2);
+  }
+}
+@keyframes charge3 {
+  to {
+    -webkit-transform: translateX(-3rem) scale(0.9) skewX(5deg) scaleY(1.2);
+            transform: translateX(-3rem) scale(0.9) skewX(5deg) scaleY(1.2);
+  }
+}
+@-webkit-keyframes charge4 {
+  to {
+    left: calc(50% - 10rem);
+    top: calc(50% - 6.5rem);
+  }
+}
+@keyframes charge4 {
+  to {
+    left: calc(50% - 10rem);
+    top: calc(50% - 6.5rem);
+  }
+}
+body .wrap .roll {
+  width: 7rem;
+  height: 7rem;
+  top: calc(50% - 3.5rem);
+  position: absolute;
+  left: calc(50% - 5rem);
+  -webkit-animation: charge 2s ease-in-out infinite alternate, charge2 1s ease-in-out infinite alternate;
+          animation: charge 2s ease-in-out infinite alternate, charge2 1s ease-in-out infinite alternate;
+}
+@-webkit-keyframes charge {
+  to {
+    -webkit-transform: translateX(-3rem) scale(0.9) skewX(5deg);
+            transform: translateX(-3rem) scale(0.9) skewX(5deg);
+  }
+}
+@keyframes charge {
+  to {
+    -webkit-transform: translateX(-3rem) scale(0.9) skewX(5deg);
+            transform: translateX(-3rem) scale(0.9) skewX(5deg);
+  }
+}
+@-webkit-keyframes charge2 {
+  to {
+    left: calc(50% - 10rem);
+    top: calc(50% - 0.5rem);
+  }
+}
+@keyframes charge2 {
+  to {
+    left: calc(50% - 10rem);
+    top: calc(50% - 0.5rem);
+  }
+}
+body .wrap .roll .body {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  box-shadow: -0.25rem 0 0 0 #222, 0.25rem 0 0 #fff;
+  background: #fff;
+  -webkit-animation: bounce 0.125s ease-in-out infinite alternate;
+          animation: bounce 0.125s ease-in-out infinite alternate;
+}
+@-webkit-keyframes bounce {
+  from {
+    -webkit-transform: rotate(-2.5deg) translateY(0rem);
+            transform: rotate(-2.5deg) translateY(0rem);
+  }
+  to {
+    -webkit-transform: rotate(2.5deg) translateY(0.25rem);
+            transform: rotate(2.5deg) translateY(0.25rem);
+  }
+}
+@keyframes bounce {
+  from {
+    -webkit-transform: rotate(-2.5deg) translateY(0rem);
+            transform: rotate(-2.5deg) translateY(0rem);
+  }
+  to {
+    -webkit-transform: rotate(2.5deg) translateY(0.25rem);
+            transform: rotate(2.5deg) translateY(0.25rem);
+  }
+}
+body .wrap .roll .body:before, body .wrap .roll .body:after {
+  content: '';
+  height: 4rem;
+  width: 7rem;
+  border-radius: 350rem / 200rem;
+  position: absolute;
+  box-shadow: 0 0 0 0.25rem #222;
+  left: 0;
+  top: -2rem;
+}
+body .wrap .roll .body:before {
+  background: radial-gradient(ellipse at center, #222 1rem, #fff 1rem);
+}
+body .wrap .roll .body:after {
+  border: 0.25rem solid #222;
+  border-color: transparent #222 #222 #222;
+  box-shadow: none;
+  left: -0.25rem;
+  bottom: -2rem;
+  top: auto;
+  background: #fff;
+  z-index: 9;
+  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, #000));
+  -webkit-mask: linear-gradient(to bottom, transparent 50%, #000 50%);
+          mask: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, #000));
+          mask: linear-gradient(to bottom, transparent 50%, #000 50%);
+}
+body .wrap .roll .leg {
+  position: absolute;
+  width: 0.5rem;
+  height: 0.5rem;
+  bottom: -1.5rem;
+  border-radius: 100%;
+  left: 1.5rem;
+  z-index: -1;
+  -webkit-transform: scaleX(-1) rotate(0deg);
+          transform: scaleX(-1) rotate(0deg);
+  -webkit-animation: run2 0.25s linear infinite alternate;
+          animation: run2 0.25s linear infinite alternate;
+}
+body .wrap .roll .leg:last-of-type {
+  -webkit-animation-delay: -0.125s;
+          animation-delay: -0.125s;
+  left: 4rem;
+  bottom: -2.25rem;
+}
+body .wrap .roll .leg:last-of-type .inner {
+  -webkit-animation-delay: -0.125s;
+          animation-delay: -0.125s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:last-of-type:before {
+  -webkit-transform: rotate(-10deg);
+          transform: rotate(-10deg);
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(1) {
+  -webkit-animation-delay: -0.1277777778s;
+          animation-delay: -0.1277777778s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(2) {
+  -webkit-animation-delay: -0.1305555556s;
+          animation-delay: -0.1305555556s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(3) {
+  -webkit-animation-delay: -0.1333333333s;
+          animation-delay: -0.1333333333s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(4) {
+  -webkit-animation-delay: -0.1361111111s;
+          animation-delay: -0.1361111111s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(5) {
+  -webkit-animation-delay: -0.1388888889s;
+          animation-delay: -0.1388888889s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(6) {
+  -webkit-animation-delay: -0.1416666667s;
+          animation-delay: -0.1416666667s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(7) {
+  -webkit-animation-delay: -0.1444444444s;
+          animation-delay: -0.1444444444s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(8) {
+  -webkit-animation-delay: -0.1472222222s;
+          animation-delay: -0.1472222222s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(9) {
+  -webkit-animation-delay: -0.15s;
+          animation-delay: -0.15s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(10) {
+  -webkit-animation-delay: -0.1527777778s;
+          animation-delay: -0.1527777778s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(11) {
+  -webkit-animation-delay: -0.1555555556s;
+          animation-delay: -0.1555555556s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(12) {
+  -webkit-animation-delay: -0.1583333333s;
+          animation-delay: -0.1583333333s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(13) {
+  -webkit-animation-delay: -0.1611111111s;
+          animation-delay: -0.1611111111s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(14) {
+  -webkit-animation-delay: -0.1638888889s;
+          animation-delay: -0.1638888889s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(15) {
+  -webkit-animation-delay: -0.1666666667s;
+          animation-delay: -0.1666666667s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(16) {
+  -webkit-animation-delay: -0.1694444444s;
+          animation-delay: -0.1694444444s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(17) {
+  -webkit-animation-delay: -0.1722222222s;
+          animation-delay: -0.1722222222s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(18) {
+  -webkit-animation-delay: -0.175s;
+          animation-delay: -0.175s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(19) {
+  -webkit-animation-delay: -0.1777777778s;
+          animation-delay: -0.1777777778s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(20) {
+  -webkit-animation-delay: -0.1805555556s;
+          animation-delay: -0.1805555556s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(21) {
+  -webkit-animation-delay: -0.1833333333s;
+          animation-delay: -0.1833333333s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(22) {
+  -webkit-animation-delay: -0.1861111111s;
+          animation-delay: -0.1861111111s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(23) {
+  -webkit-animation-delay: -0.1888888889s;
+          animation-delay: -0.1888888889s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(24) {
+  -webkit-animation-delay: -0.1916666667s;
+          animation-delay: -0.1916666667s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(25) {
+  -webkit-animation-delay: -0.1944444444s;
+          animation-delay: -0.1944444444s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(26) {
+  -webkit-animation-delay: -0.1972222222s;
+          animation-delay: -0.1972222222s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(27) {
+  -webkit-animation-delay: -0.2s;
+          animation-delay: -0.2s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(28) {
+  -webkit-animation-delay: -0.2027777778s;
+          animation-delay: -0.2027777778s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(29) {
+  -webkit-animation-delay: -0.2055555556s;
+          animation-delay: -0.2055555556s;
+}
+body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(30) {
+  -webkit-animation-delay: -0.2083333333s;
+          animation-delay: -0.2083333333s;
+}
+@-webkit-keyframes run2 {
+  to {
+    -webkit-transform: scaleX(-1) rotate(60deg);
+            transform: scaleX(-1) rotate(60deg);
+  }
+}
+@keyframes run2 {
+  to {
+    -webkit-transform: scaleX(-1) rotate(60deg);
+            transform: scaleX(-1) rotate(60deg);
+  }
+}
+body .wrap .roll .leg .inner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  -webkit-animation: run3 0.25s linear infinite alternate;
+          animation: run3 0.25s linear infinite alternate;
+  -webkit-transform-origin: top;
+          transform-origin: top;
+  -webkit-transform: rotate(-40deg);
+          transform: rotate(-40deg);
+}
+@-webkit-keyframes run3 {
+  to {
+    -webkit-transform: translateX(-0.5rem) translateY(-0.5rem) rotate(50deg);
+            transform: translateX(-0.5rem) translateY(-0.5rem) rotate(50deg);
+  }
+}
+@keyframes run3 {
+  to {
+    -webkit-transform: translateX(-0.5rem) translateY(-0.5rem) rotate(50deg);
+            transform: translateX(-0.5rem) translateY(-0.5rem) rotate(50deg);
+  }
+}
+body .wrap .roll .leg .segment {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  left: 0;
+  background: #222;
+  -webkit-animation: run 0.25s linear infinite alternate;
+          animation: run 0.25s linear infinite alternate;
+}
+body .wrap .roll .leg .segment:last-of-type:before {
+  content: '';
+  position: absolute;
+  width: 250%;
+  height: 100%;
+  border-radius: 800rem;
+  left: 0;
+  bottom: 0;
+  background: #222;
+  -webkit-transform-origin: left;
+          transform-origin: left;
+}
+body .wrap .roll .leg .segment:nth-of-type(1) {
+  -webkit-transform-origin: 0.0833333333rem -0.25rem;
+          transform-origin: 0.0833333333rem -0.25rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(2) {
+  -webkit-transform-origin: 0.1666666667rem -0.5rem;
+          transform-origin: 0.1666666667rem -0.5rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(3) {
+  -webkit-transform-origin: 0.25rem -0.75rem;
+          transform-origin: 0.25rem -0.75rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(4) {
+  -webkit-transform-origin: 0.3333333333rem -1rem;
+          transform-origin: 0.3333333333rem -1rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(5) {
+  -webkit-transform-origin: 0.4166666667rem -1.25rem;
+          transform-origin: 0.4166666667rem -1.25rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(6) {
+  -webkit-transform-origin: 0.5rem -1.5rem;
+          transform-origin: 0.5rem -1.5rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(7) {
+  -webkit-transform-origin: 0.5833333333rem -1.75rem;
+          transform-origin: 0.5833333333rem -1.75rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(8) {
+  -webkit-transform-origin: 0.6666666667rem -2rem;
+          transform-origin: 0.6666666667rem -2rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(9) {
+  -webkit-transform-origin: 0.75rem -2.25rem;
+          transform-origin: 0.75rem -2.25rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(10) {
+  -webkit-transform-origin: 0.8333333333rem -2.5rem;
+          transform-origin: 0.8333333333rem -2.5rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(11) {
+  -webkit-transform-origin: 0.9166666667rem -2.75rem;
+          transform-origin: 0.9166666667rem -2.75rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(12) {
+  -webkit-transform-origin: 1rem -3rem;
+          transform-origin: 1rem -3rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(13) {
+  -webkit-transform-origin: 1.0833333333rem -3.25rem;
+          transform-origin: 1.0833333333rem -3.25rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(14) {
+  -webkit-transform-origin: 1.1666666667rem -3.5rem;
+          transform-origin: 1.1666666667rem -3.5rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(15) {
+  -webkit-transform-origin: 1.25rem -3.75rem;
+          transform-origin: 1.25rem -3.75rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(16) {
+  -webkit-transform-origin: 1.3333333333rem -4rem;
+          transform-origin: 1.3333333333rem -4rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(17) {
+  -webkit-transform-origin: 1.4166666667rem -4.25rem;
+          transform-origin: 1.4166666667rem -4.25rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(18) {
+  -webkit-transform-origin: 1.5rem -4.5rem;
+          transform-origin: 1.5rem -4.5rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(19) {
+  -webkit-transform-origin: 1.5833333333rem -4.75rem;
+          transform-origin: 1.5833333333rem -4.75rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(20) {
+  -webkit-transform-origin: 1.6666666667rem -5rem;
+          transform-origin: 1.6666666667rem -5rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(21) {
+  -webkit-transform-origin: 1.75rem -5.25rem;
+          transform-origin: 1.75rem -5.25rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(22) {
+  -webkit-transform-origin: 1.8333333333rem -5.5rem;
+          transform-origin: 1.8333333333rem -5.5rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(23) {
+  -webkit-transform-origin: 1.9166666667rem -5.75rem;
+          transform-origin: 1.9166666667rem -5.75rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(24) {
+  -webkit-transform-origin: 2rem -6rem;
+          transform-origin: 2rem -6rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(25) {
+  -webkit-transform-origin: 2.0833333333rem -6.25rem;
+          transform-origin: 2.0833333333rem -6.25rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(26) {
+  -webkit-transform-origin: 2.1666666667rem -6.5rem;
+          transform-origin: 2.1666666667rem -6.5rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(27) {
+  -webkit-transform-origin: 2.25rem -6.75rem;
+          transform-origin: 2.25rem -6.75rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(28) {
+  -webkit-transform-origin: 2.3333333333rem -7rem;
+          transform-origin: 2.3333333333rem -7rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(29) {
+  -webkit-transform-origin: 2.4166666667rem -7.25rem;
+          transform-origin: 2.4166666667rem -7.25rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(30) {
+  -webkit-transform-origin: 2.5rem -7.5rem;
+          transform-origin: 2.5rem -7.5rem;
+}
+body .wrap .roll .leg .segment:nth-of-type(1) {
+  top: 0rem;
+  -webkit-animation-delay: -0.0027777778s;
+          animation-delay: -0.0027777778s;
+}
+body .wrap .roll .leg .segment:nth-of-type(2) {
+  top: 0.05rem;
+  -webkit-animation-delay: -0.0055555556s;
+          animation-delay: -0.0055555556s;
+}
+body .wrap .roll .leg .segment:nth-of-type(3) {
+  top: 0.1rem;
+  -webkit-animation-delay: -0.0083333333s;
+          animation-delay: -0.0083333333s;
+}
+body .wrap .roll .leg .segment:nth-of-type(4) {
+  top: 0.15rem;
+  -webkit-animation-delay: -0.0111111111s;
+          animation-delay: -0.0111111111s;
+}
+body .wrap .roll .leg .segment:nth-of-type(5) {
+  top: 0.2rem;
+  -webkit-animation-delay: -0.0138888889s;
+          animation-delay: -0.0138888889s;
+}
+body .wrap .roll .leg .segment:nth-of-type(6) {
+  top: 0.25rem;
+  -webkit-animation-delay: -0.0166666667s;
+          animation-delay: -0.0166666667s;
+}
+body .wrap .roll .leg .segment:nth-of-type(7) {
+  top: 0.3rem;
+  -webkit-animation-delay: -0.0194444444s;
+          animation-delay: -0.0194444444s;
+}
+body .wrap .roll .leg .segment:nth-of-type(8) {
+  top: 0.35rem;
+  -webkit-animation-delay: -0.0222222222s;
+          animation-delay: -0.0222222222s;
+}
+body .wrap .roll .leg .segment:nth-of-type(9) {
+  top: 0.4rem;
+  -webkit-animation-delay: -0.025s;
+          animation-delay: -0.025s;
+}
+body .wrap .roll .leg .segment:nth-of-type(10) {
+  top: 0.45rem;
+  -webkit-animation-delay: -0.0277777778s;
+          animation-delay: -0.0277777778s;
+}
+body .wrap .roll .leg .segment:nth-of-type(11) {
+  top: 0.5rem;
+  -webkit-animation-delay: -0.0305555556s;
+          animation-delay: -0.0305555556s;
+}
+body .wrap .roll .leg .segment:nth-of-type(12) {
+  top: 0.55rem;
+  -webkit-animation-delay: -0.0333333333s;
+          animation-delay: -0.0333333333s;
+}
+body .wrap .roll .leg .segment:nth-of-type(13) {
+  top: 0.6rem;
+  -webkit-animation-delay: -0.0361111111s;
+          animation-delay: -0.0361111111s;
+}
+body .wrap .roll .leg .segment:nth-of-type(14) {
+  top: 0.65rem;
+  -webkit-animation-delay: -0.0388888889s;
+          animation-delay: -0.0388888889s;
+}
+body .wrap .roll .leg .segment:nth-of-type(15) {
+  top: 0.7rem;
+  -webkit-animation-delay: -0.0416666667s;
+          animation-delay: -0.0416666667s;
+}
+body .wrap .roll .leg .segment:nth-of-type(16) {
+  top: 0.75rem;
+  -webkit-animation-delay: -0.0444444444s;
+          animation-delay: -0.0444444444s;
+}
+body .wrap .roll .leg .segment:nth-of-type(17) {
+  top: 0.8rem;
+  -webkit-animation-delay: -0.0472222222s;
+          animation-delay: -0.0472222222s;
+}
+body .wrap .roll .leg .segment:nth-of-type(18) {
+  top: 0.85rem;
+  -webkit-animation-delay: -0.05s;
+          animation-delay: -0.05s;
+}
+body .wrap .roll .leg .segment:nth-of-type(19) {
+  top: 0.9rem;
+  -webkit-animation-delay: -0.0527777778s;
+          animation-delay: -0.0527777778s;
+}
+body .wrap .roll .leg .segment:nth-of-type(20) {
+  top: 0.95rem;
+  -webkit-animation-delay: -0.0555555556s;
+          animation-delay: -0.0555555556s;
+}
+body .wrap .roll .leg .segment:nth-of-type(21) {
+  top: 1rem;
+  -webkit-animation-delay: -0.0583333333s;
+          animation-delay: -0.0583333333s;
+}
+body .wrap .roll .leg .segment:nth-of-type(22) {
+  top: 1.05rem;
+  -webkit-animation-delay: -0.0611111111s;
+          animation-delay: -0.0611111111s;
+}
+body .wrap .roll .leg .segment:nth-of-type(23) {
+  top: 1.1rem;
+  -webkit-animation-delay: -0.0638888889s;
+          animation-delay: -0.0638888889s;
+}
+body .wrap .roll .leg .segment:nth-of-type(24) {
+  top: 1.15rem;
+  -webkit-animation-delay: -0.0666666667s;
+          animation-delay: -0.0666666667s;
+}
+body .wrap .roll .leg .segment:nth-of-type(25) {
+  top: 1.2rem;
+  -webkit-animation-delay: -0.0694444444s;
+          animation-delay: -0.0694444444s;
+}
+body .wrap .roll .leg .segment:nth-of-type(26) {
+  top: 1.25rem;
+  -webkit-animation-delay: -0.0722222222s;
+          animation-delay: -0.0722222222s;
+}
+body .wrap .roll .leg .segment:nth-of-type(27) {
+  top: 1.3rem;
+  -webkit-animation-delay: -0.075s;
+          animation-delay: -0.075s;
+}
+body .wrap .roll .leg .segment:nth-of-type(28) {
+  top: 1.35rem;
+  -webkit-animation-delay: -0.0777777778s;
+          animation-delay: -0.0777777778s;
+}
+body .wrap .roll .leg .segment:nth-of-type(29) {
+  top: 1.4rem;
+  -webkit-animation-delay: -0.0805555556s;
+          animation-delay: -0.0805555556s;
+}
+body .wrap .roll .leg .segment:nth-of-type(30) {
+  top: 1.45rem;
+  -webkit-animation-delay: -0.0833333333s;
+          animation-delay: -0.0833333333s;
+}
+@-webkit-keyframes run {
+  to {
+    -webkit-transform: rotate(-20deg);
+            transform: rotate(-20deg);
+  }
+}
+@keyframes run {
+  to {
+    -webkit-transform: rotate(-20deg);
+            transform: rotate(-20deg);
+  }
+}
+body .wrap .roll .paper {
+  position: absolute;
+  height: 7.25rem;
+  width: 18rem;
+  left: calc(100% + 0.125rem);
+  top: 0rem;
+  overflow: hidden;
+  background: -webkit-gradient(linear, right top, left top, color-stop(0.3rem, #222), color-stop(0.3rem, transparent)) 100% calc(50% - 0.15rem)/100% 6.6rem no-repeat, repeating-linear-gradient(to bottom, transparent, transparent 0.75rem, #fff 0.75rem, #fff 1rem, transparent 1rem), repeating-linear-gradient(to right, #222, #222 0.25rem, transparent 0.25rem, transparent 6rem) 50% 50%/100% 5rem repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(5%, transparent), color-stop(5%, #fff), color-stop(95%, #fff), color-stop(95%, transparent)) 50% 50%/100% no-repeat;
+  background: linear-gradient(to left, #222 0.3rem, transparent 0.3rem) 100% calc(50% - 0.15rem)/100% 6.6rem no-repeat, repeating-linear-gradient(to bottom, transparent, transparent 0.75rem, #fff 0.75rem, #fff 1rem, transparent 1rem), repeating-linear-gradient(to right, #222, #222 0.25rem, transparent 0.25rem, transparent 6rem) 50% 50%/100% 5rem repeat-x, linear-gradient(to bottom, transparent 5%, #fff 5%, #fff 95%, transparent 95%) 50% 50%/100% no-repeat;
+  background-position: 100%, calc(50% - 0.1rem), 50% 50%, 0rem 50%, 50% 50%;
+  -webkit-animation: sheets 3s linear infinite, bounce2 0.125s ease-in-out infinite alternate;
+          animation: sheets 3s linear infinite, bounce2 0.125s ease-in-out infinite alternate;
+}
+@-webkit-keyframes bounce2 {
+  from {
+    -webkit-transform: rotate(2.5deg) translateY(0.25rem);
+            transform: rotate(2.5deg) translateY(0.25rem);
+  }
+  to {
+    -webkit-transform: rotate(-2.5deg) translateY(-0.25rem);
+            transform: rotate(-2.5deg) translateY(-0.25rem);
+  }
+}
+@keyframes bounce2 {
+  from {
+    -webkit-transform: rotate(2.5deg) translateY(0.25rem);
+            transform: rotate(2.5deg) translateY(0.25rem);
+  }
+  to {
+    -webkit-transform: rotate(-2.5deg) translateY(-0.25rem);
+            transform: rotate(-2.5deg) translateY(-0.25rem);
+  }
+}
+@-webkit-keyframes sheets {
+  to {
+    background-position: 100% calc(50% - 0.1rem), 50% 50%, 42rem 50%, 50% 50%;
+  }
+}
+@keyframes sheets {
+  to {
+    background-position: 100% calc(50% - 0.1rem), 50% 50%, 42rem 50%, 50% 50%;
+  }
+}
+body .wrap .roll .paper:before, body .wrap .roll .paper:after {
+  content: '____________________________________';
+  color: transparent;
+  text-decoration: underline;
+  -webkit-text-decoration-style: wavy;
+          text-decoration-style: wavy;
+  -webkit-text-decoration-color: #222;
+          text-decoration-color: #222;
+  font-size: 2rem;
+  line-height: 2;
+  -webkit-transform: scaleX(3) translateY(0);
+          transform: scaleX(3) translateY(0);
+  display: inline-block;
+  font-weight: 100;
+  top: -2.8rem;
+  position: absolute;
+  right: 0;
+  -webkit-animation: flap 1s linear infinite;
+          animation: flap 1s linear infinite;
+}
+@-webkit-keyframes flap {
+  to {
+    -webkit-transform: scaleX(3) translateX(4.5rem);
+            transform: scaleX(3) translateX(4.5rem);
+  }
+}
+@keyframes flap {
+  to {
+    -webkit-transform: scaleX(3) translateX(4.5rem);
+            transform: scaleX(3) translateX(4.5rem);
+  }
+}
+body .wrap .roll .paper:after {
+  top: auto;
+  bottom: -0.5rem;
+}
+body .wrap .roll .face {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 500rem;
+  position: absolute;
+  z-index: 10;
+  top: 5rem;
+  left: 0.5rem;
+}
+body .wrap .roll .face .eye {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  background: #222;
+  left: 0;
+  top: 0;
+}
+body .wrap .roll .face .eye:before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: inherit;
+  border-radius: 100%;
+  left: 2.5rem;
+}
+body .wrap .roll .face .mouth {
+  position: absolute;
+  width: 1.25rem;
+  height: 0.75rem;
+  background: #222;
+  border-radius: 0.25rem 0.25rem 20rem 20rem;
+  top: 1.5rem;
+  left: 1rem;
+}
\ No newline at end of file
diff --git a/paper-chase/license.txt b/paper-chase/license.txt
new file mode 100644
index 0000000..9152220
--- /dev/null
+++ b/paper-chase/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/gOpzozo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/paper-chase/src/index.haml b/paper-chase/src/index.haml
new file mode 100644
index 0000000..7ffcef4
--- /dev/null
+++ b/paper-chase/src/index.haml
@@ -0,0 +1,15 @@
+#sidewalk
+ .lines
+-2.times do
+ .wrap
+  .roll
+   .body
+    .face
+     .eye
+     .mouth
+    .paper
+   -2.times do
+    .leg
+     .inner
+      -30.times do
+       .segment
\ No newline at end of file
diff --git a/paper-chase/src/style.scss b/paper-chase/src/style.scss
new file mode 100644
index 0000000..f1ca4a9
--- /dev/null
+++ b/paper-chase/src/style.scss
@@ -0,0 +1,309 @@
+html{
+  font-size:2.9vmin;
+}
+
+body{
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  height:100vh;
+  overflow:hidden;
+  background:linear-gradient(to bottom, #19b6ff 50%, #222 50%, #222 calc(50% + 0.25rem), #ccc calc(50% + 0.25rem));
+  perspective:3rem;
+  *{
+    box-sizing:border-box;
+  }
+  #sidewalk{
+    position:absolute;
+    width:400vw;
+    height:100vh;
+    top:calc(50% + 0.25rem);
+    background:repeating-linear-gradient(to right, #222, #222 0.15rem, transparent 0.15rem, transparent 10rem);
+    z-index:0;
+    left:-100%;
+    transform-style:preserve-3d;
+    transform:translateX(0) rotateX(10deg);
+    transform-origin:top;
+    animation:sidewalk 0.5s linear infinite;
+    @keyframes sidewalk{
+      to{
+        transform:translateX(10rem) rotateX(10deg);
+      }
+    }
+    &:before{
+      content:'';
+      position:absolute;
+      width:100%;
+      height:10%;
+      top:calc(-10% - 0.25rem);
+      left:0;
+      transform:rotateX(-10deg);
+      transform-style:preserve-3d;
+      background:linear-gradient(to bottom, #222, #222 0.15rem, #60d54a 0.15rem);
+    }
+  }
+  .wrap{
+    width:10rem;
+    height:10rem;
+    z-index:2;
+    position:absolute;
+    &:nth-of-type(2){
+      top:calc(50% + 10rem);
+      transform:scaleY(-1) skewX(-40deg) translateX(5rem);
+      filter:brightness(0) blur(3px);
+      opacity:0.05;
+      .roll{
+        animation:charge3 2s ease-in-out infinite alternate, charge4 1s ease-in-out infinite alternate;
+      
+      @keyframes charge3{
+        to{
+          transform:translateX(-3rem) scale(0.9) skewX(5deg) scaleY(1.2);
+        }
+      }
+      @keyframes charge4{
+        to{
+          left:calc(50% - 10rem);
+          top:calc(50% - 6.5rem);
+        }
+      }
+      }
+    }
+    .roll{
+      width:7rem;
+      height:7rem;
+      top:calc(50% - 3.5rem);
+      position:absolute;
+      left:calc(50% - 5rem);
+      animation:charge 2s ease-in-out infinite alternate, charge2 1s ease-in-out infinite alternate;
+      
+      @keyframes charge{
+        to{
+          transform:translateX(-3rem) scale(0.9) skewX(5deg);
+        }
+      }
+      @keyframes charge2{
+        to{
+          left:calc(50% - 10rem);
+          top:calc(50% - 0.5rem);
+        }
+      }
+      .body{
+        position:absolute;
+        width:100%;
+        height:100%;
+        left:0;
+        top:0;
+        box-shadow:-0.25rem 0 0 0 #222, 0.25rem 0 0 #fff;
+        background:#fff;
+        animation:bounce 0.125s ease-in-out infinite alternate;
+        @keyframes bounce{
+          from{
+            transform:rotate(-2.5deg) translateY(0rem);
+          }
+          to{
+            transform:rotate(2.5deg) translateY(0.25rem);
+          }
+        }
+        &:before, &:after{
+          content:'';
+          height:4rem;
+          width:7rem;
+          border-radius:350rem / 200rem;
+          position:absolute;
+          box-shadow:0 0 0 0.25rem #222;
+          left:0;
+          top:-2rem;
+        }
+        &:before{
+          background:radial-gradient(ellipse at center, #222 1rem, #fff 1rem);
+        }
+        &:after{
+          border:0.25rem solid #222;
+          border-color:transparent #222 #222 #222;
+          box-shadow:none;
+          left:-0.25rem;
+          bottom:-2rem;
+          top:auto;
+          background:#fff;
+          z-index:9;
+          mask:linear-gradient(to bottom, transparent 50%, #000 50%);
+        }
+      }
+      .leg{
+        position:absolute;
+        width:0.5rem;
+        height:0.5rem;
+        bottom:-1.5rem;
+        border-radius:100%;
+        left:1.5rem;
+        z-index:-1;
+        transform:scaleX(-1) rotate(0deg);
+        animation:run2 0.25s linear infinite alternate;
+        &:last-of-type{
+          animation-delay:-0.125s;
+          left:4rem;
+          bottom:-2.25rem;
+          .inner{
+            animation-delay:-0.125s;
+            .segment{
+              &:last-of-type{
+                &:before{
+                  transform:rotate(-10deg);
+                }
+              }
+              @for $i from 1 through 30{
+            &:nth-of-type(#{$i}){
+              animation-delay:#{($i/-360) - 0.125}s;
+            }
+          }
+            }
+          }
+        }
+        @keyframes run2{
+          to{
+            transform:scaleX(-1) rotate(60deg);
+          }
+        }
+        .inner{
+          position:absolute;
+          width:100%;
+          height:100%;
+          left:0;
+          top:0;
+          animation:run3 0.25s linear infinite alternate;
+          transform-origin:top;
+          transform:rotate(-40deg);
+          @keyframes run3{
+            to{
+              transform:translateX(-0.5rem) translateY(-0.5rem) rotate(50deg);
+            }
+          }
+        }
+        .segment{
+          position:absolute;
+          width:100%;
+          height:100%;
+          border-radius:100%;
+          left:0;
+          background:#222;
+          &:last-of-type{
+            &:before{
+              content:'';
+              position:absolute;
+              width:250%;
+              height:100%;
+              border-radius:800rem;
+              left:0;
+              bottom:0;
+              background:#222;
+              transform-origin:left;
+            }
+          }
+          @for $i from 1 through 30{
+            &:nth-of-type(#{$i}){
+              transform-origin:#{$i/12}rem #{$i * -0.25}rem;
+            }
+          }
+          @for $i from 1 through 30{
+            &:nth-of-type(#{$i}){
+              top:#{($i - 1) * 0.05}rem;
+              animation-delay:#{$i/-360}s;
+            }
+          }
+          animation:run 0.25s linear infinite alternate;
+          @keyframes run{
+            to{
+              transform:rotate(-20deg);
+            }
+          }
+        }
+        
+      }
+      .paper{
+        position:absolute;
+        height:7.25rem;
+        width:18rem;
+        left:calc(100% + 0.125rem);
+        top:0rem;
+        overflow:hidden;
+        background:linear-gradient(to left, #222 0.3rem, transparent 0.3rem) 100% calc(50% - 0.15rem) / 100% 6.6rem no-repeat, repeating-linear-gradient(to bottom, transparent, transparent 0.75rem, #fff 0.75rem, #fff 1rem, transparent 1rem), repeating-linear-gradient(to right, #222, #222 0.25rem, transparent 0.25rem, transparent 6rem) 50% 50% / 100% 5rem repeat-x, linear-gradient(to bottom, transparent 5%, #fff 5%, #fff 95%, transparent 95%) 50% 50% / 100% no-repeat;
+        background-position:100%, calc(50% - 0.1rem), 50% 50%, 0rem 50%, 50% 50%;
+        animation:sheets 3s linear infinite, bounce2 0.125s ease-in-out infinite alternate;
+        @keyframes bounce2{
+          from{
+            transform:rotate(2.5deg) translateY(0.25rem);
+          }
+          to{
+            transform:rotate(-2.5deg) translateY(-0.25rem);
+          }
+        }
+        @keyframes sheets{
+          to{
+            background-position:100% calc(50% - 0.1rem), 50% 50%, 42rem 50%, 50% 50%;
+          }
+        }
+        &:before, &:after{
+          content:'____________________________________';
+          color:transparent;
+          text-decoration:underline;
+          text-decoration-style:wavy;
+          text-decoration-color:#222;
+          font-size:2rem;
+          line-height:2;
+          transform:scaleX(3) translateY(0);
+          display:inline-block;
+          font-weight:100;
+          top:-2.8rem;
+          position:absolute;
+          right:0;
+          animation:flap 1s linear infinite;
+          @keyframes flap{
+            to{
+              transform:scaleX(3) translateX(4.5rem);
+            }
+          }
+        }
+        &:after{
+          top:auto;
+          bottom:-0.5rem;
+        }
+      }
+      .face{
+        width:0.75rem;
+        height:0.75rem;
+        border-radius:500rem;
+        position:absolute;
+        z-index:10;
+        top:5rem;
+        left:0.5rem;
+        .eye{
+          position:absolute;
+          width:100%;
+          height:100%;
+          border-radius:100%;
+          background:#222;
+          left:0;
+          top:0;
+          &:before{
+            content:'';
+            position:absolute;
+            width:100%;
+            height:100%;
+            background:inherit;
+            border-radius:100%;
+            left:2.5rem;
+          }
+        }
+        .mouth{
+          position:absolute;
+          width:1.25rem;
+          height:0.75rem;
+          background:#222;
+          border-radius:0.25rem 0.25rem 20rem 20rem;
+          top:1.5rem;
+          left:1rem;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/paper-cut-text-effect/README.markdown b/paper-cut-text-effect/README.markdown
new file mode 100644
index 0000000..4af73fa
--- /dev/null
+++ b/paper-cut-text-effect/README.markdown
@@ -0,0 +1,7 @@
+# Paper Cut Text Effect! ✂️
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ykadosh/pen/PoWgbbj](https://codepen.io/ykadosh/pen/PoWgbbj).
+
+This effect is achieved by layering 3 instances of the text, one for the cutoff, one for the overlaying characters, and one for the shadow.
+
+The text is selectable just like regular text.
diff --git a/paper-cut-text-effect/dist/index.html b/paper-cut-text-effect/dist/index.html
new file mode 100644
index 0000000..455da13
--- /dev/null
+++ b/paper-cut-text-effect/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Paper Cut Text Effect! ✂️</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/paper-cut-text-effect/dist/script.js b/paper-cut-text-effect/dist/script.js
new file mode 100644
index 0000000..bd86ef8
--- /dev/null
+++ b/paper-cut-text-effect/dist/script.js
@@ -0,0 +1,25 @@
+import React from 'https://cdn.skypack.dev/react';
+import ReactDOM from 'https://cdn.skypack.dev/react-dom';
+
+const Text = ({ value }) => /*#__PURE__*/
+React.createElement("div", { className: "text" },
+value.split('').map((char) => /*#__PURE__*/
+React.createElement("div", { className: "letter" }, /*#__PURE__*/
+React.createElement("span", { className: "source" }, char), /*#__PURE__*/
+React.createElement("span", { className: "shadow" }, char), /*#__PURE__*/
+React.createElement("span", { className: "overlay" }, char))));
+
+
+
+
+
+const App = () => /*#__PURE__*/
+React.createElement("div", { className: "app" }, /*#__PURE__*/
+React.createElement(Text, { value: "PAPER" }), /*#__PURE__*/
+React.createElement(Text, { value: "CUT!" }));
+
+
+
+ReactDOM.render( /*#__PURE__*/
+React.createElement(App, null),
+document.body);
\ No newline at end of file
diff --git a/paper-cut-text-effect/dist/style.css b/paper-cut-text-effect/dist/style.css
new file mode 100644
index 0000000..7aa81f4
--- /dev/null
+++ b/paper-cut-text-effect/dist/style.css
@@ -0,0 +1,83 @@
+@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap");
+body, html {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  font-family: "Raleway", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #eaece5;
+}
+
+.text {
+  font-size: 8em;
+  position: relative;
+  text-transform: full-width;
+  display: flex;
+}
+.text .letter {
+  position: relative;
+  display: flex;
+}
+.text .letter:nth-child(2) span {
+  animation-delay: 0.2s;
+}
+.text .letter:nth-child(3) span {
+  animation-delay: 0.4s;
+}
+.text .letter:nth-child(4) span {
+  animation-delay: 0.6s;
+}
+.text .letter:nth-child(5) span {
+  animation-delay: 0.8s;
+}
+.text .letter .source {
+  color: gray;
+  -webkit-text-stroke: 0.01em rgba(0, 0, 0, 0.3);
+  display: flex;
+}
+.text .letter .overlay, .text .letter .shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  user-select: none;
+}
+.text .letter .overlay {
+  background-image: linear-gradient(90deg, white 50%, #eff0eb);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  transform: rotateY(-30deg) skew(0, -10deg);
+  transform-origin: left;
+  animation: overlay 3s infinite ease-out;
+}
+.text .letter .shadow {
+  filter: blur(5px);
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 30%, transparent);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  transform: skew(0, 20deg) translateY(0.1em) translateX(0.05em);
+  animation: shadow 3s infinite;
+}
+
+@keyframes shadow {
+  0%, 20%, 100% {
+    transform: skew(0, 20deg) translateY(0.1em) translateX(0.05em);
+    opacity: 1;
+  }
+  10% {
+    transform: skew(0, 0) translateY(0) translateX(0);
+    opacity: 0;
+  }
+}
+@keyframes overlay {
+  0%, 20%, 100% {
+    transform: rotateY(-30deg) skew(0, -10deg);
+  }
+  10% {
+    transform: rotateY(0deg) skew(0, 0);
+  }
+}
\ No newline at end of file
diff --git a/paper-cut-text-effect/license.txt b/paper-cut-text-effect/license.txt
new file mode 100644
index 0000000..2eaeea3
--- /dev/null
+++ b/paper-cut-text-effect/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Yoav Kadosh (https://codepen.io/ykadosh/pen/PoWgbbj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/paper-cut-text-effect/src/index.html b/paper-cut-text-effect/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/paper-cut-text-effect/src/script.babel b/paper-cut-text-effect/src/script.babel
new file mode 100644
index 0000000..a2f2c03
--- /dev/null
+++ b/paper-cut-text-effect/src/script.babel
@@ -0,0 +1,26 @@
+import React from 'https://cdn.skypack.dev/react';
+import ReactDOM from 'https://cdn.skypack.dev/react-dom';
+
+const Text = ({value}) => (
+  <div className='text'>
+    {value.split('').map(char => (
+      <div className='letter'>
+        <span className='source'>{char}</span>
+        <span className='shadow'>{char}</span>
+        <span className='overlay'>{char}</span>
+      </div>
+    ))}
+  </div>
+);
+
+const App = () => (
+  <div className='app'>
+    <Text value='PAPER'/>
+    <Text value='CUT!'/>
+  </div>
+);
+
+ReactDOM.render(
+  <App/>,
+  document.body
+);
\ No newline at end of file
diff --git a/paper-cut-text-effect/src/style.scss b/paper-cut-text-effect/src/style.scss
new file mode 100644
index 0000000..4c0db85
--- /dev/null
+++ b/paper-cut-text-effect/src/style.scss
@@ -0,0 +1,85 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap');
+
+$color-light-gray: #eaece5;
+
+body, html {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  font-family: 'Raleway', sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $color-light-gray;
+}
+
+.text {
+  font-size: 8em;
+  position: relative;
+  text-transform: full-width;
+  display: flex;
+  
+  .letter {
+    position: relative;
+    display: flex;
+    
+    &:nth-child(2) span {animation-delay: 0.2s}
+    &:nth-child(3) span {animation-delay: 0.4s}
+    &:nth-child(4) span {animation-delay: 0.6s}
+    &:nth-child(5) span {animation-delay: 0.8s}
+    
+    .source {
+      color: gray;
+      -webkit-text-stroke: 0.01em rgba(black, 0.3);
+      display: flex;
+    }
+    
+    .overlay, .shadow {
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      user-select: none;
+    }
+    
+    .overlay {
+      background-image: linear-gradient(90deg, white 50%, lighten($color-light-gray, 2));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      transform: rotateY(-30deg) skew(0, -10deg);
+      transform-origin: left;
+      animation: overlay 3s infinite ease-out;
+    }
+    
+    .shadow {
+      filter: blur(5px);
+      background-image: linear-gradient(90deg, rgba(black, 0.4) 30%, transparent);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      transform: skew(0, 20deg) translateY(0.1em) translateX(0.05em);
+      animation: shadow 3s infinite;
+    }
+  }
+}
+
+@keyframes shadow {
+  0%, 20%, 100% {
+    transform: skew(0, 20deg) translateY(0.1em) translateX(0.05em);
+    opacity: 1;
+  }
+  10% {
+    transform: skew(0, 0) translateY(0) translateX(0);
+    opacity: 0;
+  }
+}
+
+@keyframes overlay {
+  0%, 20%, 100% {
+    transform: rotateY(-30deg) skew(0, -10deg);
+  }
+  10% {
+    transform: rotateY(0deg) skew(0, 0);
+  }
+}
\ No newline at end of file
diff --git a/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/README.markdown b/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/README.markdown
new file mode 100644
index 0000000..73fe151
--- /dev/null
+++ b/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/README.markdown
@@ -0,0 +1,22 @@
+# ➰📃 Paper Pirouette | 3D CSS-only flying page animation tutorial | @keyframers 2.18.0
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/team/keyframers/pen/YzKjoev](https://codepen.io/team/keyframers/pen/YzKjoev).
+
+ David Khourshid and Stephen Shaw recreate a beautiful 3D isometric flying paper animation using CSS only!
+
+* ⏰ Streamed live on September 16, 2019 at https://twitch.tv/keyframers
+* 💡 Inspiration: https://dribbble.com/shots/7127901-Dialog/attachments/131339
+* 📺 Video: https://youtu.be/Fdq95qVG7F4
+* 💻 Code: https://cdpn.io/pen/YzKjoev
+
+Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!
+
+* Like & subscribe on YouTube at https://youtube.com/keyframers
+* Follow & tweet us at https://twitter.com/keyframers.
+* Join the live streams & subscribe on Twitch http://twitch.tv/keyframers 
+* Support us on Patreon at https://patreon.com/keyframers 
+
+Topics covered:
+
+* CSS Variables
+* Segments for creating smooth curves 
+* 3D CSS transforms and 3D transform-origin
\ No newline at end of file
diff --git a/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/dist/index.html b/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/dist/index.html
new file mode 100644
index 0000000..a60d88b
--- /dev/null
+++ b/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/dist/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>➰📃 Paper Pirouette | 3D CSS-only flying page animation tutorial | @keyframers 2.18.0</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<a href="https://youtu.be/Fdq95qVG7F4" target="_blank" data-keyframers-credit style="color: #FFF"></a>
+<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
+
+<div id="app">
+  <div class="papers" style="--total: 5">
+    
+    <div class="paper -rogue" style="--i: 0">
+      <div class="segment">
+        <div class="segment">
+          <div class="segment">
+            <div class="segment">
+              <div class="segment"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="paper" style="--i: 1">
+      <div class="segment">
+        <div class="segment">
+          <div class="segment">
+            <div class="segment">
+              <div class="segment"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="paper" style="--i: 2">
+      <div class="segment">
+        <div class="segment">
+          <div class="segment">
+            <div class="segment">
+              <div class="segment"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+        
+    <div class="paper" style="--i: 3">
+      <div class="segment">
+        <div class="segment">
+          <div class="segment">
+            <div class="segment">
+              <div class="segment"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="paper" style="--i: 4">
+      <div class="segment">
+        <div class="segment">
+          <div class="segment">
+            <div class="segment">
+              <div class="segment"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+  <div class="shadow">
+    <div class="paper-shadow" style="--i: 0"></div>
+    <div class="paper-shadow" style="--i: 1"></div>
+    <div class="paper-shadow" style="--i: 2"></div>
+    <div class="paper-shadow" style="--i: 3"></div>
+    <div class="paper-shadow" style="--i: 4"></div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/dist/style.css b/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/dist/style.css
new file mode 100644
index 0000000..bd543fa
--- /dev/null
+++ b/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/dist/style.css
@@ -0,0 +1,268 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+  position: relative;
+}
+
+* {
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+}
+
+:root {
+  --duration: 3.2s;
+  --stagger: .65s;
+  --easing: cubic-bezier(.36,.07,.25,1);
+  --offscreen: 130vmax;
+  --color-bg: #EF735A;
+  --color-blue: #384969;
+  --color-shadow: #211842;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--color-bg);
+}
+
+#app {
+  height: 70vmin;
+  width: 40vmin;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  -webkit-transform: translateX(25vw) rotateX(-20deg) rotateY(-55deg);
+          transform: translateX(25vw) rotateX(-20deg) rotateY(-55deg);
+  background: var(--color-blue);
+  border-radius: 2vmin;
+  -webkit-perspective: 10000px;
+          perspective: 10000px;
+}
+#app:before {
+  border: 10vmin solid white;
+  border-left-width: 2vmin;
+  border-right-width: 2vmin;
+  border-radius: inherit;
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  border: 10vmin solid white;
+  border-left-width: 2vmin;
+  border-right-width: 2vmin;
+  background: var(--color-blue);
+}
+#app > .papers, #app:before {
+  -webkit-transform: translateZ(3vmin);
+          transform: translateZ(3vmin);
+}
+#app:after {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background: inherit;
+  border-radius: inherit;
+  -webkit-transform: translateZ(1.5vmin);
+          transform: translateZ(1.5vmin);
+}
+#app > .shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-transform-origin: bottom center;
+          transform-origin: bottom center;
+  -webkit-transform: rotateX(90deg);
+          transform: rotateX(90deg);
+  background: var(--color-shadow);
+  border-radius: inherit;
+}
+
+.paper-shadow {
+  background: var(--color-shadow);
+  height: 50%;
+  width: 100%;
+  position: absolute;
+  top: calc(100% + 3vmin);
+  left: 0;
+  -webkit-transform-origin: top center;
+          transform-origin: top center;
+  -webkit-animation: shadow-in var(--duration) var(--easing) infinite;
+          animation: shadow-in var(--duration) var(--easing) infinite;
+  -webkit-animation-delay: calc(var(--i) * var(--stagger));
+          animation-delay: calc(var(--i) * var(--stagger));
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+}
+@-webkit-keyframes shadow-in {
+  0%,5% {
+    -webkit-transform: scale(0.8, 1) translateY(var(--offscreen));
+            transform: scale(0.8, 1) translateY(var(--offscreen));
+  }
+  100% {
+    -webkit-transform: scale(0.8, 0);
+            transform: scale(0.8, 0);
+  }
+}
+@keyframes shadow-in {
+  0%,5% {
+    -webkit-transform: scale(0.8, 1) translateY(var(--offscreen));
+            transform: scale(0.8, 1) translateY(var(--offscreen));
+  }
+  100% {
+    -webkit-transform: scale(0.8, 0);
+            transform: scale(0.8, 0);
+  }
+}
+.papers {
+  width: 30vmin;
+  height: 40vmin;
+  background: white;
+}
+
+.paper {
+  --segments: 5;
+  --segment: calc(100% * 1 / var(--segments));
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  -webkit-animation: fly-in var(--duration) var(--easing) infinite;
+          animation: fly-in var(--duration) var(--easing) infinite;
+  -webkit-animation-delay: calc( (var(--i) * var(--stagger)) );
+          animation-delay: calc( (var(--i) * var(--stagger)) );
+}
+@-webkit-keyframes fly-in {
+  0%, 2% {
+    -webkit-transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg);
+            transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg);
+  }
+  80%, 100% {
+    -webkit-transform: translateZ(0px) translateY(0%) rotateX(0deg);
+            transform: translateZ(0px) translateY(0%) rotateX(0deg);
+  }
+}
+@keyframes fly-in {
+  0%, 2% {
+    -webkit-transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg);
+            transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg);
+  }
+  80%, 100% {
+    -webkit-transform: translateZ(0px) translateY(0%) rotateX(0deg);
+            transform: translateZ(0px) translateY(0%) rotateX(0deg);
+  }
+}
+.paper > .segment {
+  height: var(--segment);
+}
+
+.segment {
+  --rotate: 20deg;
+  height: 100%;
+  -webkit-transform-origin: top center;
+          transform-origin: top center;
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-top: none;
+  border-bottom: none;
+  -webkit-animation: inherit;
+          animation: inherit;
+  -webkit-animation-name: curve-paper;
+          animation-name: curve-paper;
+}
+.segment > .segment {
+  top: 98%;
+}
+@-webkit-keyframes curve-paper {
+  0%, 2% {
+    -webkit-transform: rotateX(var(--rotate, 0deg));
+            transform: rotateX(var(--rotate, 0deg));
+  }
+  90%, 100% {
+    -webkit-transform: rotateX(0deg);
+            transform: rotateX(0deg);
+  }
+}
+@keyframes curve-paper {
+  0%, 2% {
+    -webkit-transform: rotateX(var(--rotate, 0deg));
+            transform: rotateX(var(--rotate, 0deg));
+  }
+  90%, 100% {
+    -webkit-transform: rotateX(0deg);
+            transform: rotateX(0deg);
+  }
+}
+/* ---------------------------------- */
+.paper.-rogue {
+  -webkit-transform-origin: top center -5vmin;
+          transform-origin: top center -5vmin;
+}
+.paper.-rogue .segment {
+  --rotate: 30deg;
+  -webkit-animation-name: curve-rogue-paper;
+          animation-name: curve-rogue-paper;
+}
+@-webkit-keyframes curve-rogue-paper {
+  0%, 50% {
+    -webkit-transform: rotateX(var(--rotate));
+            transform: rotateX(var(--rotate));
+  }
+  100% {
+    -webkit-transform: rotateX(0deg);
+            transform: rotateX(0deg);
+  }
+}
+@keyframes curve-rogue-paper {
+  0%, 50% {
+    -webkit-transform: rotateX(var(--rotate));
+            transform: rotateX(var(--rotate));
+  }
+  100% {
+    -webkit-transform: rotateX(0deg);
+            transform: rotateX(0deg);
+  }
+}
+.paper.-rogue > .segment {
+  -webkit-animation: inherit;
+          animation: inherit;
+  -webkit-animation-name: rogue-paper;
+          animation-name: rogue-paper;
+  -webkit-transform-origin: left top 20vmin;
+          transform-origin: left top 20vmin;
+}
+@-webkit-keyframes rogue-paper {
+  0%, 2% {
+    -webkit-transform: rotateX(1.5turn);
+            transform: rotateX(1.5turn);
+  }
+  80%, 100% {
+    -webkit-transform: rotateX(0turn);
+            transform: rotateX(0turn);
+  }
+}
+@keyframes rogue-paper {
+  0%, 2% {
+    -webkit-transform: rotateX(1.5turn);
+            transform: rotateX(1.5turn);
+  }
+  80%, 100% {
+    -webkit-transform: rotateX(0turn);
+            transform: rotateX(0turn);
+  }
+}
diff --git a/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/license.txt b/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/license.txt
new file mode 100644
index 0000000..4450a47
--- /dev/null
+++ b/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by @keyframers (https://codepen.io/team/keyframers/pen/YzKjoev)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/src/index.html b/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/src/index.html
new file mode 100644
index 0000000..90d9a41
--- /dev/null
+++ b/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/src/index.html
@@ -0,0 +1,76 @@
+<a href="https://youtu.be/Fdq95qVG7F4" target="_blank" data-keyframers-credit style="color: #FFF"></a>
+<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
+
+<div id="app">
+  <div class="papers" style="--total: 5">
+    
+    <div class="paper -rogue" style="--i: 0">
+      <div class="segment">
+        <div class="segment">
+          <div class="segment">
+            <div class="segment">
+              <div class="segment"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="paper" style="--i: 1">
+      <div class="segment">
+        <div class="segment">
+          <div class="segment">
+            <div class="segment">
+              <div class="segment"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="paper" style="--i: 2">
+      <div class="segment">
+        <div class="segment">
+          <div class="segment">
+            <div class="segment">
+              <div class="segment"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+        
+    <div class="paper" style="--i: 3">
+      <div class="segment">
+        <div class="segment">
+          <div class="segment">
+            <div class="segment">
+              <div class="segment"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="paper" style="--i: 4">
+      <div class="segment">
+        <div class="segment">
+          <div class="segment">
+            <div class="segment">
+              <div class="segment"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+  <div class="shadow">
+    <div class="paper-shadow" style="--i: 0"></div>
+    <div class="paper-shadow" style="--i: 1"></div>
+    <div class="paper-shadow" style="--i: 2"></div>
+    <div class="paper-shadow" style="--i: 3"></div>
+    <div class="paper-shadow" style="--i: 4"></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/src/style.scss b/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/src/style.scss
new file mode 100644
index 0000000..dcd5ba4
--- /dev/null
+++ b/paper-pirouette-3d-css-only-flying-page-animation-tutorial-keyframers-2-18-0/src/style.scss
@@ -0,0 +1,205 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+  position: relative;
+}
+
+* {
+  transform-style: preserve-3d;
+}
+
+:root {
+  --duration: 3.2s;
+  --stagger: .65s;
+  --easing: cubic-bezier(.36,.07,.25,1);
+  --offscreen: 130vmax;
+  //cubic-bezier(.5, 0, .4, 1);
+  --color-bg: #EF735A;
+  --color-blue: #384969;
+  --color-shadow: #211842;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--color-bg);
+}
+
+#app {
+  height: 70vmin;
+  width: 40vmin;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translateX(25vw) rotateX(-20deg) rotateY(-55deg);
+  background: var(--color-blue);
+  border-radius: 2vmin;
+  perspective: 10000px;
+  
+  &:before {
+    border: 10vmin solid white;
+    border-left-width: 2vmin;
+    border-right-width: 2vmin;
+    border-radius: inherit;
+    content: '';
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    border: 10vmin solid white;
+    border-left-width: 2vmin;
+    border-right-width: 2vmin;
+    background: var(--color-blue);
+  }
+  
+  > .papers, &:before {
+    transform: translateZ(3vmin);
+  }
+  
+  &:after {
+    content: '';
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background: inherit;
+    border-radius: inherit;
+    transform: translateZ(1.5vmin);
+  }
+  
+  > .shadow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform-origin: bottom center;
+    transform: rotateX(90deg);
+    background: var(--color-shadow);
+    border-radius: inherit;
+  }
+}
+
+.paper-shadow {
+  background: var(--color-shadow);
+  height: 50%;
+  width: 100%;
+  position: absolute;
+  top: calc(100% + 3vmin);
+  left: 0;
+  transform-origin: top center;
+  animation: shadow-in var(--duration) var(--easing) infinite;
+  animation-delay: calc(var(--i) * var(--stagger));
+  animation-fill-mode: both;
+  
+  @keyframes shadow-in {
+    0%,5% {
+      transform: scale(.8, 1) translateY(var(--offscreen));
+    }
+    100% {
+      transform: scale(.8,0);
+    }
+  }
+}
+
+.papers {
+  width: 30vmin;
+  height: 40vmin;
+  background: white;
+}
+
+.paper {
+  --segments: 5;
+  --segment: calc(100% * 1 / var(--segments));
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  
+  
+  animation: fly-in var(--duration) var(--easing) infinite;
+  animation-delay: calc(
+    (var(--i) * var(--stagger))
+  );
+  
+  @keyframes fly-in {
+    0%, 2% {
+      transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg);
+    }
+    80%, 100% {
+      transform: translateZ(0px) translateY(0%) rotateX(0deg);
+    }
+  }
+  
+  > .segment {
+    height: var(--segment);
+  }
+}
+
+
+.segment {
+  --rotate: 20deg;
+  height: 100%;
+  transform-origin: top center;
+  background: white;
+  border: 1px solid rgba(black, 0.2);
+  border-top: none;
+  border-bottom: none;
+  
+  > .segment {
+    top: 98%;
+  }
+  
+  animation: inherit;
+  animation-name: curve-paper;
+  
+  @keyframes curve-paper {
+    0%, 2% { transform: rotateX(var(--rotate,0deg)); }
+    90%, 100% { transform: rotateX(0deg); }
+  }
+
+}
+
+/* ---------------------------------- */
+
+.paper.-rogue {
+  transform-origin: top center -5vmin;
+  
+  .segment {
+    --rotate: 30deg;
+    animation-name: curve-rogue-paper;
+
+    @keyframes curve-rogue-paper {
+      0%, 50% { transform: rotateX(var(--rotate)); }
+      100% { transform: rotateX(0deg); }
+    }
+  }
+  
+  // First segment of the paper
+  > .segment {
+    animation: inherit;
+    animation-name: rogue-paper;
+    transform-origin: left top 20vmin;
+  
+    @keyframes rogue-paper {
+      0%, 2% {
+        transform: rotateX(1.5turn) 
+      }
+      80%, 100% {
+        transform: rotateX(0turn);
+      }
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/particle-photos/README.markdown b/particle-photos/README.markdown
new file mode 100644
index 0000000..bb046f1
--- /dev/null
+++ b/particle-photos/README.markdown
@@ -0,0 +1,7 @@
+# Particle Photos
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/callumacrae/pen/eYWWmXv](https://codepen.io/callumacrae/pen/eYWWmXv).
+
+Generative particle art with user uploadable photos.
+
+Source: https://github.com/callumacrae/sketchbook/blob/master/src/views/ParticlePhotoWebgl.vue
diff --git a/particle-photos/dist/index.html b/particle-photos/dist/index.html
new file mode 100644
index 0000000..b8d8d4c
--- /dev/null
+++ b/particle-photos/dist/index.html
@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Particle Photos</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- this pen was built and maintained in https://github.com/callumacrae/sketchbook/blob/master/src/views/ParticlePhotoWebgl.vue -->
+
+<p class="loading">loading…</p>
+
+<div class="canvas-container" style="display: none">
+  <canvas
+          ref="canvas"
+          @click="status = status === 'playing' ? 'paused' : 'playing'"
+          @dragenter.prevent
+          @dragleave.prevent
+          @dragover.prevent
+          @drop.prevent="handleDrop"
+          ></canvas>
+  <GlobalEvents target="window" @resize="setSize" />
+
+  <div class="help-container" v-show="showHelp || showIosWarning">
+    <div class="help" v-show="showIosWarning">
+      <h2 style="color: red">WARNING</h2>
+      <p>
+        Due to a bug in how iOS handles webgl instancing, this animation
+        performs incredibly poorly on iOS—to the point where it doesn't really
+        work at all. On my phone, it runs at 0.0075 fps and makes my phone
+        heat up to the temperature of the sun.
+      </p>
+
+      <p>
+        I'd recommend trying this on desktop (it also just looks better), but
+        if you really want to see what happens on iOS, you can
+        <a
+           href
+           @click.prevent="
+                           showIosWarning = false;
+                           status = 'playing';
+                           "
+           >
+          proceed anyway</a
+          >.
+      </p>
+    </div>
+    <div class="help" v-show="showHelp">
+      <h2>Instructions</h2>
+
+      <p>
+        This experiment visualises images as collections of animated coloured
+        particles.
+      </p>
+
+      <p>
+        In addition to providing a few images (selectable on the configuration
+        in the top right of the screen), it also allows you to upload your own
+        by dragging and dropping them onto the canvas.
+      </p>
+
+      <p>
+        Through a bit of experimentation, I've found the following makes the
+        best images:
+      </p>
+
+      <ul>
+        <li>
+          Lower resolution images or blurred images work better as it prevents
+          the particles from changing size and colour too quickly as they move
+          about. Most of the demo images are lower than 500px wide.
+        </li>
+
+        <li>
+          Images with lots of contrast between lighter and darker areas make
+          more effective graphics. Similarly, images where the details are on
+          the lighter parts of the images and the backgrounds are dark also
+          look better.
+        </li>
+
+        <li>
+          Some images, especially images with finer details, look better with
+          a high number of smaller points (adjust pointSizeMultiplier), while
+          others look better with a low number of larger points.
+        </li>
+      </ul>
+
+      <p>
+        To export high quality videos from this you'll need to
+        <a href="https://github.com/callumacrae/sketchbook">clone the repo</a>
+        and look for the <code>this.record</code> call in
+        ParticlePhotoWebgl.vue (or ask me for help on Twitter!)
+      </p>
+    </div>
+  </div>
+
+  <p class="status" v-show="status === 'paused' && !showIosWarning" @click="status = 'playing'">
+    paused, click to resume
+  </p>
+
+  <a
+     v-if="!showIosWarning"
+     class="toggle-help-link"
+     href
+     @click.prevent="showHelp = !showHelp"
+     >
+    toggle help
+  </a>
+</div>
+
+<script type="nojs" id="vs">
+precision mediump float;
+
+//
+// Description : Array and textureless GLSL 2D simplex noise function.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : stegu
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//               https://github.com/stegu/webgl-noise
+// 
+
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec2 mod289(vec2 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec3 permute(vec3 x) {
+  return mod289(((x*34.0)+10.0)*x);
+}
+
+float noise2d(vec2 v)
+  {
+  const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
+                      0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
+                     -0.577350269189626,  // -1.0 + 2.0 * C.x
+                      0.024390243902439); // 1.0 / 41.0
+// First corner
+  vec2 i  = floor(v + dot(v, C.yy) );
+  vec2 x0 = v -   i + dot(i, C.xx);
+
+// Other corners
+  vec2 i1;
+  //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
+  //i1.y = 1.0 - i1.x;
+  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  // x0 = x0 - 0.0 + 0.0 * C.xx ;
+  // x1 = x0 - i1 + 1.0 * C.xx ;
+  // x2 = x0 - 1.0 + 2.0 * C.xx ;
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+
+// Permutations
+  i = mod289(i); // Avoid truncation effects in permutation
+  vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+		+ i.x + vec3(0.0, i1.x, 1.0 ));
+
+  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
+  m = m*m ;
+  m = m*m ;
+
+// Gradients: 41 points uniformly over a line, mapped onto a diamond.
+// The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)
+
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+
+// Normalise gradients implicitly by scaling m
+// Approximation of: m *= inversesqrt( a0*a0 + h*h );
+  m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
+
+// Compute final noise value at P
+  vec3 g;
+  g.x  = a0.x  * x0.x  + h.x  * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
+
+attribute float a_x;
+attribute float a_initial_offset;
+attribute float a_speed;
+
+uniform float u_time;
+uniform sampler2D u_image_texture;
+uniform float u_width;
+uniform float u_x_in_noise_multiplier;
+uniform float u_x_out_noise_multiplier;
+uniform float u_y_in_noise_multiplier;
+uniform float u_y_out_noise_multiplier;
+uniform float u_point_size_multiplier;
+
+varying vec2 v_position;
+varying float v_initial_offset;
+
+void main() {
+  vec2 position = vec2(2.0 * a_x - 1.0, 0.0);
+
+  float offset_y = mod(a_initial_offset + 1.0 + a_speed * u_time / 500000.0, 2.0) - 1.0;
+
+  position.x += noise2d(
+      vec2(a_x * u_x_in_noise_multiplier + 123.4, offset_y * 0.5 + u_time / 100000.0)
+    ) * u_x_out_noise_multiplier;
+  position.y += offset_y + noise2d(
+      vec2(a_x * u_y_in_noise_multiplier, u_time / 10000.0 + 100.0)
+    ) * u_y_out_noise_multiplier;
+
+  position.y *= 1.1;
+
+  v_position = position;
+  v_initial_offset = a_initial_offset;
+
+  gl_Position = vec4(position, 0.0, 1.0);
+  gl_PointSize = u_width / 660.0 * u_point_size_multiplier;
+}
+</script>
+
+<script type="nojs" id="fs">
+precision mediump float;
+
+uniform sampler2D u_image_texture;
+uniform float u_radius_val_exponent;
+uniform float u_alpha_val_exponent;
+uniform float u_alpha_val_multiplier;
+uniform bool u_color;
+uniform float u_twinkle_frequency;
+uniform float u_twinkle_intensity;
+uniform float u_twinkle_factor;
+
+varying vec2 v_position;
+varying float v_initial_offset;
+
+void main() {
+  vec2 position = v_position;
+  position.y *= -1.0;
+
+  vec4 texture_color = texture2D(u_image_texture, (position + 1.0) / 2.0);
+
+  // http://www.johndcook.com/blog/2009/08/24/algorithms-convert-color-grayscale/
+  // The alpha multiplication stops random transparent white pixels from ruining everything
+  float intensity = (0.21 * texture_color.r + 0.71 * texture_color.g + 0.07 * texture_color.b) * texture_color.a;
+
+  float radius_val = pow(intensity, u_radius_val_exponent);
+  float alpha_val = pow(intensity, u_alpha_val_exponent) * u_alpha_val_multiplier;
+
+  float twinkle_y_normalised = abs(mod((position.y - v_initial_offset * 123.0) * 100.0, u_twinkle_frequency * 2.0) - u_twinkle_frequency);
+  float twinkle_value = 1.0 - u_twinkle_factor + u_twinkle_factor * smoothstep(
+      u_twinkle_frequency * (1.0 - 1.0 / u_twinkle_intensity / u_twinkle_frequency * 5.0),
+      u_twinkle_frequency,
+      twinkle_y_normalised
+    );
+
+  vec2 pc = (gl_PointCoord - 0.5) * 2.0;
+  float dist = sqrt(pc.x * pc.x + pc.y * pc.y);
+  float alpha = alpha_val * smoothstep(radius_val, radius_val - 0.1, dist) * twinkle_value;
+
+  gl_FragColor = vec4(u_color ? texture_color.rgb : vec3(1.0), alpha);
+}
+
+</script>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script><script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/particle-photos/dist/script.js b/particle-photos/dist/script.js
new file mode 100644
index 0000000..2faca80
--- /dev/null
+++ b/particle-photos/dist/script.js
@@ -0,0 +1,335 @@
+import * as twgl from 'https://cdn.skypack.dev/twgl.js/dist/4.x/twgl-full.module';
+import * as dat from 'https://cdn.skypack.dev/dat.gui';
+import Stats from 'https://cdn.skypack.dev/stats.js';
+
+import * as random from 'https://cdn.skypack.dev/@callumacrae/utils@0.2.4/built/random';
+
+// This is mostly for displaying warnings
+const isAndroid = /android/i.test(navigator.userAgent);
+const isIos = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+const isMobile = isAndroid || isIos;
+
+const imageData = {
+  sunset: {
+    src:
+      'https://sketchbook.macr.ae/assets/particle-photos/leo-nagle-TLuNQu-5xP4-unsplash-small-blurred.jpg',
+    ratio: 2 / 3,
+    configPreset: {
+      particles: isMobile ? 20e3 : 40e3,
+      color: true,
+      radiusValExponent: 1.5,
+      alphaValMultiplier: 0.85,
+      alphaValExponent: 1.2,
+      pointSizeMultiplier: isMobile ? 20 : 10,
+      twinkleFactor: 0
+    }
+  },
+  woman: {
+    src:
+      'https://sketchbook.macr.ae/assets/particle-photos/thea-hoyer-CrJyu9HoeBg-unsplash-small-blurred.jpg',
+    ratio: 2 / 3,
+    configPreset: {
+      color: false,
+      particles: 30e3,
+      radiusValExponent: 2,
+      alphaValExponent: 1.5,
+      alphaValMultiplier: 0.85,
+      pointSizeMultiplier: 10,
+      twinkleFactor: 0
+    }
+  },
+  zebra: {
+    src:
+      'https://sketchbook.macr.ae/assets/particle-photos/frida-bredesen-c_cPNXlovvY-unsplash-small-blurred.png',
+    ratio: 1,
+    configPreset: {
+      color: false,
+      particles: 30e3,
+      radiusValExponent: 2,
+      alphaValExponent: 1.5,
+      alphaValMultiplier: 1,
+      pointSizeMultiplier: 10,
+      twinkleFrequency: 12,
+      twinkleIntensity: 25,
+      twinkleFactor: 0.7
+    }
+  },
+  'bucket hat': {
+    src: 'https://sketchbook.macr.ae/assets/particle-photos/brandon-webb-FwjkcL9Hpx8-unsplash-small.jpg',
+    ratio: 3 / 2,
+    configPreset: {
+      color: true,
+      radiusValExponent: 0.7,
+      alphaValExponent: 0.7,
+      alphaValMultiplier: 1,
+      pointSizeMultiplier: 7,
+      twinkleFactor: 0
+    }
+  },
+  rhino: {
+    src: 'https://sketchbook.macr.ae/assets/particle-photos/rhino.jpeg',
+    ratio: 422 / 222,
+    configPreset: {
+      particles: 50e3,
+      radiusValExponent: 1.3,
+      alphaValExponent: 0.1,
+      alphaValMultiplier: 1,
+      color: true,
+      pointSizeMultiplier: 8,
+      twinkleFactor: 0.8
+    }
+  }
+};
+
+new Vue({
+  el: '.canvas-container',
+  data: () => {
+    const image = 'rhino';
+
+    return {
+      status: 'playing',
+      width: undefined,
+      height: undefined,
+      showHelp: false,
+      showIosWarning: false,
+      userTexture: undefined,
+      config: {
+        // Init config
+        particles: 40e3,
+        particleBaseSpeed: isMobile ? 8 : 5,
+
+        // Shader config
+        radiusValExponent: 1.5,
+        alphaValExponent: 1.2,
+        alphaValMultiplier: 0.85,
+        color: true,
+        xInNoiseMultiplier: 200, // Not user configurable, bit buggy
+        xOutNoiseMultiplier: isMobile ? 0.4 : 0.2,
+        yInNoiseMultiplier: 1234, // Not user configurable, pointless
+        yOutNoiseMultiplier: isMobile ? 0.004 : 0.002,
+        pointSizeMultiplier: 10,
+        twinkleFrequency: 12,
+        twinkleIntensity: 25,
+        twinkleFactor: 0,
+
+        image,
+        ...imageData[image].configPreset
+      }
+    };
+  },
+  mounted() {
+    document.querySelector('.loading').style.display = 'none';
+    this.$el.style.display = 'flex';
+
+    this.setSize();
+    this.init().then(() => {
+      this.frame();
+    });
+
+    const gui = new dat.GUI();
+    this.gui = gui;
+
+    gui
+      .add(this.config, 'image', Object.keys(imageData).concat('user'))
+      .listen();
+    gui.add(this.config, 'particles', 5000, 100000, 1000).listen();
+    gui.add(this.config, 'particleBaseSpeed', 0, 50).listen();
+    gui.add(this.config, 'radiusValExponent', 0.1, 10).listen();
+    gui.add(this.config, 'alphaValExponent', 0.1, 10).listen();
+    gui.add(this.config, 'alphaValMultiplier', 0.1, 1).listen();
+    gui.add(this.config, 'color').listen();
+    gui.add(this.config, 'xOutNoiseMultiplier', 0, 1).listen();
+    gui.add(this.config, 'yOutNoiseMultiplier', 0, 0.1).listen();
+    gui.add(this.config, 'pointSizeMultiplier', 1, 30).listen();
+    gui.add(this.config, 'twinkleFrequency', 1, 50).listen();
+    gui.add(this.config, 'twinkleIntensity', 1, 50).listen();
+    gui.add(this.config, 'twinkleFactor', 0, 1).listen();
+
+    this.stats = new Stats();
+    this.stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+    document.body.appendChild(this.stats.dom);
+
+    if (isIos) {
+      this.status = 'paused';
+      this.showIosWarning = true;
+      gui.close();
+    }
+  },
+  beforeDestroy() {
+    cancelAnimationFrame(this.frameId);
+
+    if (this.gui) {
+      this.gui.destroy();
+    }
+    if (this.stats) {
+      this.stats.dom.remove();
+      delete this.stats;
+    }
+  },
+  methods: {
+    setSize() {
+      const canvas = this.$refs.canvas;
+      this.gl = canvas.getContext('webgl', { preserveDrawingBuffer: true });
+
+      this.dpr = window.devicePixelRatio;
+      if (window.innerWidth < window.innerHeight * this.imageData.ratio) {
+        this.width = window.innerWidth * this.dpr;
+        this.height = (window.innerWidth / this.imageData.ratio) * this.dpr;
+      } else {
+        this.height = window.innerHeight * this.dpr;
+        this.width = window.innerHeight * this.imageData.ratio * this.dpr;
+      }
+
+      canvas.width = this.width;
+      canvas.height = this.height;
+    },
+    init() {
+      const { gl, config } = this;
+
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+
+      this.programInfo = twgl.createProgramInfo(gl, ['vs', 'fs']);
+
+      const particleData = {
+        xs: [],
+        initialOffsets: [],
+        speeds: []
+      };
+      for (let i = 0; i < config.particles; i++) {
+        particleData.xs.push(i / config.particles);
+        particleData.initialOffsets.push(random.range(-1, 1));
+        particleData.speeds.push(random.range(0, config.particleBaseSpeed));
+      }
+
+      this.particleData = particleData;
+
+      twgl.setAttributePrefix('a_');
+      this.bufferInfo = twgl.createBufferInfoFromArrays(gl, {
+        x: {
+          numComponents: 1,
+          data: particleData.xs
+        },
+        initial_offset: {
+          numComponents: 1,
+          data: particleData.initialOffsets
+        },
+        speed: {
+          numComponents: 1,
+          data: particleData.speeds
+        }
+      });
+      twgl.setBuffersAndAttributes(gl, this.programInfo, this.bufferInfo);
+
+      if (this.images) {
+        return Promise.resolve();
+      }
+
+      return new Promise(resolve => {
+        // Use a blurred image instead of sampling an area of more than one pixel
+        // in the fragment shader - do the work ahead of time!
+        this.images = twgl.createTextures(gl, imageData, resolve);
+      });
+    },
+    frame(timestamp = 0) {
+      if (this.status !== 'recording') {
+        this.frameId = requestAnimationFrame(this.frame);
+      }
+
+      if (this.status === 'paused') {
+        return;
+      }
+
+      this.stats.begin();
+
+      const { gl, programInfo, bufferInfo, width, height, config } = this;
+
+      gl.viewport(0, 0, width, height);
+      gl.useProgram(programInfo.program);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+
+      const uniforms = {
+        u_time: timestamp,
+        u_image_texture:
+          config.image === 'user'
+            ? this.userTexture.texture
+            : this.images[config.image],
+        u_width: width,
+        u_height: height,
+        u_dpr: this.dpr,
+        u_radius_val_exponent: config.radiusValExponent,
+        u_alpha_val_exponent: config.alphaValExponent,
+        u_alpha_val_multiplier: config.alphaValMultiplier,
+        u_color: config.color,
+        u_x_in_noise_multiplier: config.xInNoiseMultiplier,
+        u_x_out_noise_multiplier: config.xOutNoiseMultiplier,
+        u_y_in_noise_multiplier: config.yInNoiseMultiplier,
+        u_y_out_noise_multiplier: config.yOutNoiseMultiplier,
+        u_point_size_multiplier: config.pointSizeMultiplier,
+        u_twinkle_frequency: config.twinkleFrequency,
+        u_twinkle_intensity: config.twinkleIntensity,
+        u_twinkle_factor: config.twinkleFactor
+      };
+
+      twgl.setUniforms(programInfo, uniforms);
+      twgl.drawBufferInfo(gl, bufferInfo, gl.POINTS);
+
+      this.stats.end();
+    },
+    handleDrop(e) {
+      const image = e.dataTransfer.files[0];
+      if (!image.type.startsWith('image/')) {
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = () => {
+        const img = document.createElement('img');
+
+        img.onload = () => {
+          const texture = twgl.createTexture(this.gl, { src: img });
+          this.userTexture = { texture, ratio: img.width / img.height };
+          this.config.image = 'user';
+          this.setSize();
+
+          if (img.width > 500 && img.height > 500) {
+            setTimeout(() => {
+              alert(
+                'Heads up, this works better with low resolution images: see the help for more info'
+              );
+            });
+          }
+        };
+
+        img.src = reader.result;
+      };
+      reader.readAsDataURL(image);
+    }
+  },
+  computed: {
+    imageData() {
+      return this.config.image === 'user'
+        ? this.userTexture
+        : imageData[this.config.image];
+    }
+  },
+  watch: {
+    'config.particles': 'init',
+    'config.particleBaseSpeed': 'init',
+    'config.image'(image, oldImage) {
+      if (image === 'user' && !this.userTexture) {
+        alert('Drag and drop an image onto this window to test your own image');
+        this.config.image = oldImage;
+        return;
+      }
+
+      this.setSize();
+
+      if (this.imageData.configPreset) {
+        for (let [key, value] of Object.entries(this.imageData.configPreset)) {
+          this.config[key] = value;
+        }
+      }
+    }
+  }
+});
\ No newline at end of file
diff --git a/particle-photos/dist/style.css b/particle-photos/dist/style.css
new file mode 100644
index 0000000..bb760d5
--- /dev/null
+++ b/particle-photos/dist/style.css
@@ -0,0 +1,75 @@
+body {
+  margin: 0;
+  background-color: black;
+}
+
+.loading {
+  color: white;
+}
+
+.canvas-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-family: sans-serif;
+
+  background-color: black;
+}
+
+canvas {
+  max-height: 100vh;
+  max-width: 100vw;
+}
+
+.toggle-help-link {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+
+  font-size: 12px;
+  text-decoration: none;
+
+  color: lightgrey;
+}
+
+.status {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+
+  font-size: 12px;
+
+  color: lightgrey;
+}
+
+.help-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: rgba(0, 0, 0, 0.4);
+  color: white;
+  backdrop-filter: blur(3px);
+}
+
+.help-container .help {
+  width: 90%;
+  max-width: 500px;
+}
+
+.help li {
+  margin-bottom: 1em;
+}
+
+.help a {
+  color: inherit;
+}
\ No newline at end of file
diff --git a/particle-photos/license.txt b/particle-photos/license.txt
new file mode 100644
index 0000000..c1f79cb
--- /dev/null
+++ b/particle-photos/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Callum Macrae (https://codepen.io/callumacrae/pen/eYWWmXv)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/particle-photos/src/index.html b/particle-photos/src/index.html
new file mode 100644
index 0000000..2e0b7b9
--- /dev/null
+++ b/particle-photos/src/index.html
@@ -0,0 +1,258 @@
+<!-- this pen was built and maintained in https://github.com/callumacrae/sketchbook/blob/master/src/views/ParticlePhotoWebgl.vue -->
+
+<p class="loading">loading…</p>
+
+<div class="canvas-container" style="display: none">
+  <canvas
+          ref="canvas"
+          @click="status = status === 'playing' ? 'paused' : 'playing'"
+          @dragenter.prevent
+          @dragleave.prevent
+          @dragover.prevent
+          @drop.prevent="handleDrop"
+          ></canvas>
+  <GlobalEvents target="window" @resize="setSize" />
+
+  <div class="help-container" v-show="showHelp || showIosWarning">
+    <div class="help" v-show="showIosWarning">
+      <h2 style="color: red">WARNING</h2>
+      <p>
+        Due to a bug in how iOS handles webgl instancing, this animation
+        performs incredibly poorly on iOS—to the point where it doesn't really
+        work at all. On my phone, it runs at 0.0075 fps and makes my phone
+        heat up to the temperature of the sun.
+      </p>
+
+      <p>
+        I'd recommend trying this on desktop (it also just looks better), but
+        if you really want to see what happens on iOS, you can
+        <a
+           href
+           @click.prevent="
+                           showIosWarning = false;
+                           status = 'playing';
+                           "
+           >
+          proceed anyway</a
+          >.
+      </p>
+    </div>
+    <div class="help" v-show="showHelp">
+      <h2>Instructions</h2>
+
+      <p>
+        This experiment visualises images as collections of animated coloured
+        particles.
+      </p>
+
+      <p>
+        In addition to providing a few images (selectable on the configuration
+        in the top right of the screen), it also allows you to upload your own
+        by dragging and dropping them onto the canvas.
+      </p>
+
+      <p>
+        Through a bit of experimentation, I've found the following makes the
+        best images:
+      </p>
+
+      <ul>
+        <li>
+          Lower resolution images or blurred images work better as it prevents
+          the particles from changing size and colour too quickly as they move
+          about. Most of the demo images are lower than 500px wide.
+        </li>
+
+        <li>
+          Images with lots of contrast between lighter and darker areas make
+          more effective graphics. Similarly, images where the details are on
+          the lighter parts of the images and the backgrounds are dark also
+          look better.
+        </li>
+
+        <li>
+          Some images, especially images with finer details, look better with
+          a high number of smaller points (adjust pointSizeMultiplier), while
+          others look better with a low number of larger points.
+        </li>
+      </ul>
+
+      <p>
+        To export high quality videos from this you'll need to
+        <a href="https://github.com/callumacrae/sketchbook">clone the repo</a>
+        and look for the <code>this.record</code> call in
+        ParticlePhotoWebgl.vue (or ask me for help on Twitter!)
+      </p>
+    </div>
+  </div>
+
+  <p class="status" v-show="status === 'paused' && !showIosWarning" @click="status = 'playing'">
+    paused, click to resume
+  </p>
+
+  <a
+     v-if="!showIosWarning"
+     class="toggle-help-link"
+     href
+     @click.prevent="showHelp = !showHelp"
+     >
+    toggle help
+  </a>
+</div>
+
+<script type="nojs" id="vs">
+precision mediump float;
+
+//
+// Description : Array and textureless GLSL 2D simplex noise function.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : stegu
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//               https://github.com/stegu/webgl-noise
+// 
+
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec2 mod289(vec2 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec3 permute(vec3 x) {
+  return mod289(((x*34.0)+10.0)*x);
+}
+
+float noise2d(vec2 v)
+  {
+  const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
+                      0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
+                     -0.577350269189626,  // -1.0 + 2.0 * C.x
+                      0.024390243902439); // 1.0 / 41.0
+// First corner
+  vec2 i  = floor(v + dot(v, C.yy) );
+  vec2 x0 = v -   i + dot(i, C.xx);
+
+// Other corners
+  vec2 i1;
+  //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
+  //i1.y = 1.0 - i1.x;
+  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  // x0 = x0 - 0.0 + 0.0 * C.xx ;
+  // x1 = x0 - i1 + 1.0 * C.xx ;
+  // x2 = x0 - 1.0 + 2.0 * C.xx ;
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+
+// Permutations
+  i = mod289(i); // Avoid truncation effects in permutation
+  vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+		+ i.x + vec3(0.0, i1.x, 1.0 ));
+
+  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
+  m = m*m ;
+  m = m*m ;
+
+// Gradients: 41 points uniformly over a line, mapped onto a diamond.
+// The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)
+
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+
+// Normalise gradients implicitly by scaling m
+// Approximation of: m *= inversesqrt( a0*a0 + h*h );
+  m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
+
+// Compute final noise value at P
+  vec3 g;
+  g.x  = a0.x  * x0.x  + h.x  * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
+
+attribute float a_x;
+attribute float a_initial_offset;
+attribute float a_speed;
+
+uniform float u_time;
+uniform sampler2D u_image_texture;
+uniform float u_width;
+uniform float u_x_in_noise_multiplier;
+uniform float u_x_out_noise_multiplier;
+uniform float u_y_in_noise_multiplier;
+uniform float u_y_out_noise_multiplier;
+uniform float u_point_size_multiplier;
+
+varying vec2 v_position;
+varying float v_initial_offset;
+
+void main() {
+  vec2 position = vec2(2.0 * a_x - 1.0, 0.0);
+
+  float offset_y = mod(a_initial_offset + 1.0 + a_speed * u_time / 500000.0, 2.0) - 1.0;
+
+  position.x += noise2d(
+      vec2(a_x * u_x_in_noise_multiplier + 123.4, offset_y * 0.5 + u_time / 100000.0)
+    ) * u_x_out_noise_multiplier;
+  position.y += offset_y + noise2d(
+      vec2(a_x * u_y_in_noise_multiplier, u_time / 10000.0 + 100.0)
+    ) * u_y_out_noise_multiplier;
+
+  position.y *= 1.1;
+
+  v_position = position;
+  v_initial_offset = a_initial_offset;
+
+  gl_Position = vec4(position, 0.0, 1.0);
+  gl_PointSize = u_width / 660.0 * u_point_size_multiplier;
+}
+</script>
+
+<script type="nojs" id="fs">
+precision mediump float;
+
+uniform sampler2D u_image_texture;
+uniform float u_radius_val_exponent;
+uniform float u_alpha_val_exponent;
+uniform float u_alpha_val_multiplier;
+uniform bool u_color;
+uniform float u_twinkle_frequency;
+uniform float u_twinkle_intensity;
+uniform float u_twinkle_factor;
+
+varying vec2 v_position;
+varying float v_initial_offset;
+
+void main() {
+  vec2 position = v_position;
+  position.y *= -1.0;
+
+  vec4 texture_color = texture2D(u_image_texture, (position + 1.0) / 2.0);
+
+  // http://www.johndcook.com/blog/2009/08/24/algorithms-convert-color-grayscale/
+  // The alpha multiplication stops random transparent white pixels from ruining everything
+  float intensity = (0.21 * texture_color.r + 0.71 * texture_color.g + 0.07 * texture_color.b) * texture_color.a;
+
+  float radius_val = pow(intensity, u_radius_val_exponent);
+  float alpha_val = pow(intensity, u_alpha_val_exponent) * u_alpha_val_multiplier;
+
+  float twinkle_y_normalised = abs(mod((position.y - v_initial_offset * 123.0) * 100.0, u_twinkle_frequency * 2.0) - u_twinkle_frequency);
+  float twinkle_value = 1.0 - u_twinkle_factor + u_twinkle_factor * smoothstep(
+      u_twinkle_frequency * (1.0 - 1.0 / u_twinkle_intensity / u_twinkle_frequency * 5.0),
+      u_twinkle_frequency,
+      twinkle_y_normalised
+    );
+
+  vec2 pc = (gl_PointCoord - 0.5) * 2.0;
+  float dist = sqrt(pc.x * pc.x + pc.y * pc.y);
+  float alpha = alpha_val * smoothstep(radius_val, radius_val - 0.1, dist) * twinkle_value;
+
+  gl_FragColor = vec4(u_color ? texture_color.rgb : vec3(1.0), alpha);
+}
+
+</script>
\ No newline at end of file
diff --git a/particle-photos/src/script.js b/particle-photos/src/script.js
new file mode 100644
index 0000000..f6434e9
--- /dev/null
+++ b/particle-photos/src/script.js
@@ -0,0 +1,335 @@
+import * as twgl from 'https://cdn.skypack.dev/twgl.js/dist/4.x/twgl-full.module';
+import * as dat from 'https://cdn.skypack.dev/dat.gui';
+import Stats from 'https://cdn.skypack.dev/stats.js';
+
+import * as random from 'https://cdn.skypack.dev/@callumacrae/utils@0.2.4/built/random';
+
+// This is mostly for displaying warnings
+const isAndroid = /android/i.test(navigator.userAgent);
+const isIos = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+const isMobile = isAndroid || isIos;
+
+const imageData = {
+  sunset: {
+    src:
+      'https://sketchbook.macr.ae/assets/particle-photos/leo-nagle-TLuNQu-5xP4-unsplash-small-blurred.jpg',
+    ratio: 2 / 3,
+    configPreset: {
+      particles: isMobile ? 20e3 : 40e3,
+      color: true,
+      radiusValExponent: 1.5,
+      alphaValMultiplier: 0.85,
+      alphaValExponent: 1.2,
+      pointSizeMultiplier: isMobile ? 20 : 10,
+      twinkleFactor: 0
+    }
+  },
+  woman: {
+    src:
+      'https://sketchbook.macr.ae/assets/particle-photos/thea-hoyer-CrJyu9HoeBg-unsplash-small-blurred.jpg',
+    ratio: 2 / 3,
+    configPreset: {
+      color: false,
+      particles: 30e3,
+      radiusValExponent: 2,
+      alphaValExponent: 1.5,
+      alphaValMultiplier: 0.85,
+      pointSizeMultiplier: 10,
+      twinkleFactor: 0
+    }
+  },
+  zebra: {
+    src:
+      'https://sketchbook.macr.ae/assets/particle-photos/frida-bredesen-c_cPNXlovvY-unsplash-small-blurred.png',
+    ratio: 1,
+    configPreset: {
+      color: false,
+      particles: 30e3,
+      radiusValExponent: 2,
+      alphaValExponent: 1.5,
+      alphaValMultiplier: 1,
+      pointSizeMultiplier: 10,
+      twinkleFrequency: 12,
+      twinkleIntensity: 25,
+      twinkleFactor: 0.7
+    }
+  },
+  'bucket hat': {
+    src: 'https://sketchbook.macr.ae/assets/particle-photos/brandon-webb-FwjkcL9Hpx8-unsplash-small.jpg',
+    ratio: 3 / 2,
+    configPreset: {
+      color: true,
+      radiusValExponent: 0.7,
+      alphaValExponent: 0.7,
+      alphaValMultiplier: 1,
+      pointSizeMultiplier: 7,
+      twinkleFactor: 0
+    }
+  },
+  rhino: {
+    src: 'https://sketchbook.macr.ae/assets/particle-photos/rhino.jpeg',
+    ratio: 422 / 222,
+    configPreset: {
+      particles: 50e3,
+      radiusValExponent: 1.3,
+      alphaValExponent: 0.1,
+      alphaValMultiplier: 1,
+      color: true,
+      pointSizeMultiplier: 8,
+      twinkleFactor: 0.8
+    }
+  }
+};
+
+new Vue({
+  el: '.canvas-container',
+  data: () => {
+    const image = 'rhino';
+
+    return {
+      status: 'playing',
+      width: undefined,
+      height: undefined,
+      showHelp: false,
+      showIosWarning: false,
+      userTexture: undefined,
+      config: {
+        // Init config
+        particles: 40e3,
+        particleBaseSpeed: isMobile ? 8 : 5,
+
+        // Shader config
+        radiusValExponent: 1.5,
+        alphaValExponent: 1.2,
+        alphaValMultiplier: 0.85,
+        color: true,
+        xInNoiseMultiplier: 200, // Not user configurable, bit buggy
+        xOutNoiseMultiplier: isMobile ? 0.4 : 0.2,
+        yInNoiseMultiplier: 1234, // Not user configurable, pointless
+        yOutNoiseMultiplier: isMobile ? 0.004 : 0.002,
+        pointSizeMultiplier: 10,
+        twinkleFrequency: 12,
+        twinkleIntensity: 25,
+        twinkleFactor: 0,
+
+        image,
+        ...imageData[image].configPreset
+      }
+    };
+  },
+  mounted() {
+    document.querySelector('.loading').style.display = 'none';
+    this.$el.style.display = 'flex';
+
+    this.setSize();
+    this.init().then(() => {
+      this.frame();
+    });
+
+    const gui = new dat.GUI();
+    this.gui = gui;
+
+    gui
+      .add(this.config, 'image', Object.keys(imageData).concat('user'))
+      .listen();
+    gui.add(this.config, 'particles', 5000, 100000, 1000).listen();
+    gui.add(this.config, 'particleBaseSpeed', 0, 50).listen();
+    gui.add(this.config, 'radiusValExponent', 0.1, 10).listen();
+    gui.add(this.config, 'alphaValExponent', 0.1, 10).listen();
+    gui.add(this.config, 'alphaValMultiplier', 0.1, 1).listen();
+    gui.add(this.config, 'color').listen();
+    gui.add(this.config, 'xOutNoiseMultiplier', 0, 1).listen();
+    gui.add(this.config, 'yOutNoiseMultiplier', 0, 0.1).listen();
+    gui.add(this.config, 'pointSizeMultiplier', 1, 30).listen();
+    gui.add(this.config, 'twinkleFrequency', 1, 50).listen();
+    gui.add(this.config, 'twinkleIntensity', 1, 50).listen();
+    gui.add(this.config, 'twinkleFactor', 0, 1).listen();
+
+    this.stats = new Stats();
+    this.stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+    document.body.appendChild(this.stats.dom);
+
+    if (isIos) {
+      this.status = 'paused';
+      this.showIosWarning = true;
+      gui.close();
+    }
+  },
+  beforeDestroy() {
+    cancelAnimationFrame(this.frameId);
+
+    if (this.gui) {
+      this.gui.destroy();
+    }
+    if (this.stats) {
+      this.stats.dom.remove();
+      delete this.stats;
+    }
+  },
+  methods: {
+    setSize() {
+      const canvas = this.$refs.canvas;
+      this.gl = canvas.getContext('webgl', { preserveDrawingBuffer: true });
+
+      this.dpr = window.devicePixelRatio;
+      if (window.innerWidth < window.innerHeight * this.imageData.ratio) {
+        this.width = window.innerWidth * this.dpr;
+        this.height = (window.innerWidth / this.imageData.ratio) * this.dpr;
+      } else {
+        this.height = window.innerHeight * this.dpr;
+        this.width = window.innerHeight * this.imageData.ratio * this.dpr;
+      }
+
+      canvas.width = this.width;
+      canvas.height = this.height;
+    },
+    init() {
+      const { gl, config } = this;
+
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+
+      this.programInfo = twgl.createProgramInfo(gl, ['vs', 'fs']);
+
+      const particleData = {
+        xs: [],
+        initialOffsets: [],
+        speeds: []
+      };
+      for (let i = 0; i < config.particles; i++) {
+        particleData.xs.push(i / config.particles);
+        particleData.initialOffsets.push(random.range(-1, 1));
+        particleData.speeds.push(random.range(0, config.particleBaseSpeed));
+      }
+
+      this.particleData = particleData;
+
+      twgl.setAttributePrefix('a_');
+      this.bufferInfo = twgl.createBufferInfoFromArrays(gl, {
+        x: {
+          numComponents: 1,
+          data: particleData.xs
+        },
+        initial_offset: {
+          numComponents: 1,
+          data: particleData.initialOffsets
+        },
+        speed: {
+          numComponents: 1,
+          data: particleData.speeds
+        }
+      });
+      twgl.setBuffersAndAttributes(gl, this.programInfo, this.bufferInfo);
+
+      if (this.images) {
+        return Promise.resolve();
+      }
+
+      return new Promise(resolve => {
+        // Use a blurred image instead of sampling an area of more than one pixel
+        // in the fragment shader - do the work ahead of time!
+        this.images = twgl.createTextures(gl, imageData, resolve);
+      });
+    },
+    frame(timestamp = 0) {
+      if (this.status !== 'recording') {
+        this.frameId = requestAnimationFrame(this.frame);
+      }
+
+      if (this.status === 'paused') {
+        return;
+      }
+
+      this.stats.begin();
+
+      const { gl, programInfo, bufferInfo, width, height, config } = this;
+
+      gl.viewport(0, 0, width, height);
+      gl.useProgram(programInfo.program);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+
+      const uniforms = {
+        u_time: timestamp,
+        u_image_texture:
+          config.image === 'user'
+            ? this.userTexture.texture
+            : this.images[config.image],
+        u_width: width,
+        u_height: height,
+        u_dpr: this.dpr,
+        u_radius_val_exponent: config.radiusValExponent,
+        u_alpha_val_exponent: config.alphaValExponent,
+        u_alpha_val_multiplier: config.alphaValMultiplier,
+        u_color: config.color,
+        u_x_in_noise_multiplier: config.xInNoiseMultiplier,
+        u_x_out_noise_multiplier: config.xOutNoiseMultiplier,
+        u_y_in_noise_multiplier: config.yInNoiseMultiplier,
+        u_y_out_noise_multiplier: config.yOutNoiseMultiplier,
+        u_point_size_multiplier: config.pointSizeMultiplier,
+        u_twinkle_frequency: config.twinkleFrequency,
+        u_twinkle_intensity: config.twinkleIntensity,
+        u_twinkle_factor: config.twinkleFactor
+      };
+
+      twgl.setUniforms(programInfo, uniforms);
+      twgl.drawBufferInfo(gl, bufferInfo, gl.POINTS);
+
+      this.stats.end();
+    },
+    handleDrop(e) {
+      const image = e.dataTransfer.files[0];
+      if (!image.type.startsWith('image/')) {
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = () => {
+        const img = document.createElement('img');
+
+        img.onload = () => {
+          const texture = twgl.createTexture(this.gl, { src: img });
+          this.userTexture = { texture, ratio: img.width / img.height };
+          this.config.image = 'user';
+          this.setSize();
+
+          if (img.width > 500 && img.height > 500) {
+            setTimeout(() => {
+              alert(
+                'Heads up, this works better with low resolution images: see the help for more info'
+              );
+            });
+          }
+        };
+
+        img.src = reader.result;
+      };
+      reader.readAsDataURL(image);
+    }
+  },
+  computed: {
+    imageData() {
+      return this.config.image === 'user'
+        ? this.userTexture
+        : imageData[this.config.image];
+    }
+  },
+  watch: {
+    'config.particles': 'init',
+    'config.particleBaseSpeed': 'init',
+    'config.image'(image, oldImage) {
+      if (image === 'user' && !this.userTexture) {
+        alert('Drag and drop an image onto this window to test your own image');
+        this.config.image = oldImage;
+        return;
+      }
+
+      this.setSize();
+
+      if (this.imageData.configPreset) {
+        for (let [key, value] of Object.entries(this.imageData.configPreset)) {
+          this.config[key] = value;
+        }
+      }
+    }
+  }
+});
diff --git a/particle-photos/src/style.css b/particle-photos/src/style.css
new file mode 100644
index 0000000..bb760d5
--- /dev/null
+++ b/particle-photos/src/style.css
@@ -0,0 +1,75 @@
+body {
+  margin: 0;
+  background-color: black;
+}
+
+.loading {
+  color: white;
+}
+
+.canvas-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-family: sans-serif;
+
+  background-color: black;
+}
+
+canvas {
+  max-height: 100vh;
+  max-width: 100vw;
+}
+
+.toggle-help-link {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+
+  font-size: 12px;
+  text-decoration: none;
+
+  color: lightgrey;
+}
+
+.status {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+
+  font-size: 12px;
+
+  color: lightgrey;
+}
+
+.help-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: rgba(0, 0, 0, 0.4);
+  color: white;
+  backdrop-filter: blur(3px);
+}
+
+.help-container .help {
+  width: 90%;
+  max-width: 500px;
+}
+
+.help li {
+  margin-bottom: 1em;
+}
+
+.help a {
+  color: inherit;
+}
\ No newline at end of file
diff --git a/pdf-flyer-generator/README.markdown b/pdf-flyer-generator/README.markdown
new file mode 100644
index 0000000..d52a62a
--- /dev/null
+++ b/pdf-flyer-generator/README.markdown
@@ -0,0 +1,4 @@
+# PDF Flyer generator
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/massimo-cassandro/pen/qOrJNx](https://codepen.io/massimo-cassandro/pen/qOrJNx).
+
+ A simple tool to generate a pdf flyer using JSpdf
\ No newline at end of file
diff --git a/pdf-flyer-generator/dist/index.html b/pdf-flyer-generator/dist/index.html
new file mode 100644
index 0000000..28fa771
--- /dev/null
+++ b/pdf-flyer-generator/dist/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>PDF Flyer generator</title>
+  
+<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container-fluid flyer-builder">
+		<h1>Flyer Builder</h1>
+		<p><em>The preview doesn't work  with Chrome or Safari in this demo since it has been loaded in a iframe. Use Firefox or try at <a href="http://www.primominuto.net/articoli/pdf_flyer/flyer.html">www.primominuto.net/articoli/pdf_flyer/flyer.html</a></em></p>
+	
+		<div class="row">
+				<div class="col-sm-6 loc_form">
+
+						<div class="form-group">
+								<label for="flyer-image" class="control-label">Image</label>
+								<input id="flyer-image" type="file" tabindex="1">
+						</div>
+
+						<div class="row">
+								<div class="col-sm-7">
+										<div class="form-group">
+												<label for="flyer-title" class="control-label">Title</label>
+												<input required class="form-control" id="flyer-title" placeholder="Main title" value="Really incredible!!" maxlength="255" type="text" tabindex="2">
+										</div>
+								</div>
+								<div class="col-sm-3">
+										<div class="form-group">
+												<label for="flyer-title-size" class="control-label">Size (pt)</label>
+												<input required class="form-control" id="flyer-title-size" value="60" min="1" step="1" type="number" tabindex="3" title="Title size: tune it to fit the available space">
+										</div>
+								</div>
+								<div class="col-sm-2">
+										<div class="form-group">
+												<label for="flyer-title-color" class="control-label">Color</label>
+												<input required class="form-control" id="flyer-title-color" value="#0080FF" type="color" tabindex="4" title="Title color">
+										</div>
+								</div>
+						</div>
+
+						<div class="form-group">
+								<label class="control-label" for="flyer-description">Description</label>
+								<textarea class="form-control" id="flyer-description" placeholder="Insert a short description taking care of the available space">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, nihil officia neque ad expedita consequatur quae! Voluptate, incidunt, earum, sit, eveniet harum ratione expedita quibusdam possimus sed laboriosam dolore ut recusandae eos. Ipsa,natus pariatur iste dolorum optio nostrum consectetur!</textarea>
+						</div>
+
+						<div class="row">
+								<div class="col-sm-4">
+										<div class="form-group">
+												<label for="flyer-price" class="control-label">Price</label>
+												<input required class="form-control" id="flyer-price" placeholder="Enter price (w/o decimals)" value="100" type="number" tabindex="5" step="any" min="0">
+										</div>
+								</div>
+								<div class="col-sm-3">
+										<div class="form-group">
+												<label for="flyer-price-currency" class="control-label">Currency</label>
+												<select required class="form-control" id="flyer-price-currency" tabindex="6">
+														<option value="&euro;">&euro;</option>
+														<option value="$">$</option>
+														<option value="&pound;">&pound;</option>
+												</select>
+										</div>
+								</div>
+								<div class="col-sm-2">
+										<div class="form-group">
+												<label for="flyer-price-color" class="control-label">Color</label>
+												<input required class="form-control" id="flyer-price-color" value="#cc0000" type="color" tabindex="8" title="Price color">
+										</div>
+								</div>
+						</div>
+						<hr>
+						<div class="row">
+								<div class="col-sm-6">
+										<div class="form-group">
+												<button id="flyer_preview_btn" type="button" class="btn btn-primary btn-block" tabindex="9">Update preview</button>
+										</div>
+								</div>
+								<div class="col-sm-6">
+										<div class="form-group text-right">
+												<button id="flyer_download_btn" type="button" class="btn btn-default btn-xs btn-block" tabindex="10">Download</button>
+										</div>
+								</div>
+						</div>
+
+				</div>
+
+				<div class="col-sm-6">
+						<iframe id="pdf_preview" type="application/pdf" src=""></iframe>
+				</div>
+
+		</div>
+</div>
+<!-- partial -->
+  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script src='http://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/pdf-flyer-generator/dist/script.js b/pdf-flyer-generator/dist/script.js
new file mode 100644
index 0000000..16f5533
--- /dev/null
+++ b/pdf-flyer-generator/dist/script.js
@@ -0,0 +1,385 @@
+/* jshint undef:false, newcap: false, unused:false */
+
+(function(API) {
+		API.textAlign = function(txt, options, x, y) {
+				options = options || {};
+				// Use the options align property to specify desired text alignment
+				// Param x will be ignored if desired text alignment is 'center'.
+				// Usage of options can easily extend the function to apply different text
+				// styles and sizes
+
+				// Get current font size
+				var fontSize = this.internal.getFontSize();
+
+				// Get page width
+				var pageWidth = this.internal.pageSize.width;
+
+				// Get the actual text's width
+				// You multiply the unit width of your string by your font size and divide
+				// by the internal scale factor. The division is necessary
+				// for the case where you use units other than 'pt' in the constructor
+				// of jsPDF.
+
+				var txtWidth = this.getStringUnitWidth(txt) * fontSize / this.internal.scaleFactor;
+
+				if (options.align === "center") {
+
+						// Calculate text's x coordinate
+						x = (pageWidth - txtWidth) / 2;
+
+				} else if (options.align === "centerAtX") { // center on X value
+
+						x = x - (txtWidth / 2);
+
+				} else if (options.align === "right") {
+
+						x = x - txtWidth;
+				}
+
+				// Draw text at x,y
+				this.text(txt, x, y);
+		};
+		/*
+		    API.textWidth = function(txt) {
+			    var fontSize = this.internal.getFontSize();
+		        return this.getStringUnitWidth(txt)*fontSize / this.internal.scaleFactor;
+		    };
+		*/
+
+		API.getLineHeight = function(txt) {
+				return this.internal.getLineHeight();
+		};
+
+})(jsPDF.API);
+
+(function() {
+		"use strict";
+
+		/*
+		Refs:
+		https://mrrio.github.io/jsPDF/
+		https://github.com/MrRio/jsPDF
+		https://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html
+	*/
+
+		// some variables
+		var agency_logo = {
+						src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAEdCAMAAADD1fMAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRFAHC6RpjOtdbr1uj0f7jd7/b7////IYLCvV4sVgAAIv1JREFUeNrsnYvao6oOQE0I5v3feFqvqIQEqv61k5z9nT17tIrAIhcCdL1LiwTGR5UXAb3RWqTzKmgS6rqOwkMKG4m7DrzRHJD75NXj3og8YViOMBY2eqs5ILdZLN0kjF/e7xDmorqN5YDcJkuveyEC32tpBeqSgnqzOSB3WS3dRpi+UY1EhG0xgzecA3Kfi76VrwsS4bGM5A3ngNxuYSX973sYCcSZArqN5YDc1P+6vPBX6JE8He6mOyB/q0AWRuJ30tH5VIgDcpMU+uDoj/yNOxwzfseWXp8KcUDu8H87Vfh2hyQQ6MVCJ8QB+VMLa6NIbktFCQhsK5I3ngNyk4tu6pEMl2sSIxzMPhXigNwjNFkraNYkF/kkL5/DWgScSu1TIQ7ITS56jErI6KBKwslsWN89xHcj+FSIA3Kjiz4vB7GqkXEgPwGTiHVszBMg4FMhDsitLvqcgBUJ6nrrS5u0cBLeZFSiwVPg91VSd9MdkFskJl109Upqh/RRn7xJwTIrr+tE1WAkM+c4FnRJr/RArwNyg4W1jMZDKBe6aHdHBK1ylE8eyCshNACCnm7igNyiQGAzQOMw3TEaLtW21kXCA7RjQScdkq7w8jZ0QD6UwMDSP7BNjoVtInlE/nM+Fi9jKMug5SCXoJ8Tt78ckEo3oyBvKtalSGFwJWL/11pkYHUoTBy0BrzD0cbZf58lcUBsKsTUFcNiuIy6ZDJt/kyH8JyPGF5/4ndZeCbECEhwDeKA2GwsoynD68jLi9s+D8f36hIclRfNiPI6QxOMgJDz4YCcp0JePTIcdMn6J+hNab8nKY7BHaexAAd3g4OtKK5AHBCjExLA5NDSamFN3vmiQcalF2NQCa6zuoDC6Gq8VQemBdj6FtFg+XkuvANiR8RkYW1820A8bJIFyXQDb288U28AYaQxZEUzpRIgncnGCtEJcUBOUyGJ2bJMhcfFrILxv2DTOxnPUCZrQlfEaTKfJo3Gm2IlOflosBpdgTggJ4Z6k0mQwcKauxctsSScMwSXIOvrnsgQGjJH3ulb02/SZbM0aypYnJAEhXdU7RhQcA/EATlFhSgzaxCWjjj1vmFHkzVnNr4tL0pTaXno0vNcwzv3kIeELBUWxkE3TcG18Y+zMqIFldEJgT6dvYyrvtN0ovPhgJyqQrplUn0ZtGn+w9hLZ0AWUIawV5oLJTko2wjYmoAbYUlwSS6GkUwYeOD1p5TcqFLIDogDUqdCrDFaXvzieWr9HVYN3R4Qfmdrjf37ncQbC4BQGiYY3JmXhfXWSm9qaRuzfauvkZBRkS16DKI1wcQViAPSgoh1OWufRK5CMm8IU0+e/v1CAkcLCVYVlAdkM/cdllXwiynVz37J7OG8caNpJmSIFNCwPVcwuzrggDgglWJVIQwYunQSZBjy34ubpp7NAyCzV7+NuGYBGRNuw8G/hsHvGGbr6d3/Y78YUm/1Ms0Rrl58RdaL8+GAXKZCdqqEwxLyneyk4d+TAhnUwOoRQC7++rbJ4owFHmbBkyLy8oTRtYlT/GCQisxiVyAOSAMgWA/IZGDh6oaPVtAABiced8QA3cGhWCwsxmX3lNSTAFimXV46asj2miYIp7/leR8VqlrA5Xg4IC2E7HxcLf2Q6WX0T2GkaUMsnvo4zx57siYcBUDe3vz7/8IGEBjz6SdXBzYzltDNisum9MgViANySiRrryKiPi7TavvPHfb1VzD/7TsU/A5iTQ4DZUysEZp5ehHXWFi/qCjcLjynZULfELZi2oPvW/Y6IOcYWW/PQN/nB2CXAQVr2kniUgx7HeY0yIjGfAWXWFicMr12jv3ixjAaNpIbosV7Il2BOCCnqJB3343LqbHmfF9Y/fWtS3H4zzmGNTrfkXc6JiyA8LwX3eqEmGyr3JIuVyAOSDMh+fMDjEvPAcOSaDt7B0EFJFn3CptpluWP/ZjoNd8SzMUZf0I+ie6AXOOlz73XvuvoskoEV7MrTenNAJJskxXmvC5a1s7S7g6oUh7LQ6U3ujggHyiQbWq7fddRXoOuSwgLKb8AcMwNfssUBBu0VsB3B49xuHvQBO90RXMB0qPh2KO8DshJfEAnzHLPUr1b3Gbnz7lrDjjQIQd3hmfxESLjGBuuQGNw3mNJKfpmcg5IowTDzgZtO/MOK57Cdlb84KQsqIw9/O1p1G+3uD/CPfhEoQNylgJhaSnh3lNpWSbIQ1+fbakVkD5ZiLUeQcJNSxGPZ1wJ3+QbYjkg9YL2vIzPdx1lWDfpPWsH0kxBSV5A7OKAnKFApOE24HfszLtEmGuY91MRHJBqkbM2RJ8Wib8AjsIJu1z/TQ6IS16BlNcQij+7chcsUwigYC1B2zc5IC41CkQ1SMIfQaKdOx2UJEsXB8QsQdsUq/8qSCznTUd1ab2LA2IVOGGFUcBbNrAGsu06DRVzmC4OSFG0xYRGg2RI2rqQkveko9WnUtdH+myhA2IW1Tyqi/pUJU6ZbaqqyQvDbsNOiANygofebrIHpM89k8ZDpC07UHio1wE5S4F8Mt6+Nx2tVigMSw7XJTajr5xyQOyjrWlDwo/G27ErjoegU/bU5/Ev35eXbK0P+m80UeihXgfkvN70KKcWfu+THJA/4wPZYGIxP8hkjzGEgC/brvRP8KW3Doi9O2kSn3UeU7SIN70DYu5P+j+P+6TYl//n4oC4uDggLi4OiIuLA+Li4oC4uDggLi4OiIuLA+Li4oC4uLg4IC4uDoiLiwPi4uKAuLg4IC4uDoiLiwPi4uKAuLg4IC4uDoiLi4sD4uLigLi4OCAuLg6Ii4sD4uLigLi4OCAuLg6Ii4sD4uLi4oC4uJwKSESokdcvQv7K++ikivfOT1k3ISf5pUIZg1SW3K3FV1xxNohcs1S4JDxqKDlhfsv2qs8q3kxi21q/Gg/t2st95vVOS8HDcGrXtgwIdA8gfd3hen35REymUPlaMhREemXoyXzA8vAKvvVQ8cIHQc1hooGUoxSrzkovHthWOGnIOIhA9vi3IBaQtcPjIq23rL2Lxr74lYAov+C6igS1El+1FVlqfqgCJPCdx11G6W2hdOk45KsHD0qflaWpWAeBP21ZoZggFDB/3HtScOTtAJw87msB0cbtqopMCoxy3w7iYEs1gAgQcn+N5M9qHqpHuHQ8Ne2IUobmUIN9sQ7Ch0cBR+lWkAqIxYJj7tpUed8LiPob3TyMGUDyowkJ497cAlADSHaIhMsOY8oqiqBd0hjLEVLzWcWbizokq+G2LkimXaXvnd55eCPE4pgJs831xYCo47Zqs2D2+GWST2feV/D6BqoBJDNEXnmc+LF/L12scEmz0sCiQwqfFUrOymeEiIAcX7oUMIgFj2zoi18JiPorrdflATmOGCRUVtpHoAaQgyMKlx7md+A6iJcyBZFOeAddLRQ/a38zWVwn09HSJJ47v7cP0ndyU8veDwgPIbZNNe//preO22StSLJ6pEHkj6oA2XYAvviwy62i2LytcKnslR1732EcVsJyxZvLhICxN2E52rABOHljWg2h+y5A4Ijt4csyTsRUGYG4wg8BqcJR7jQgDI9x06Jrw6QFAmkou/x09MLbUKmv9LsgpjzlaKKyN2O/eVNBQ4hkE0oiW7tS2ViRxsWQ/dv3lBfxXwMyTUNlFAZnCgXHdke7tSoCsnkuCP0pFH6D2REIJFV0/dwty/YJl00X2pWfysHems/C0s3h2ARkHFPYWkIBEMg+LB+kvx2QKGmQ5K/y5jHmbFuw9RpWhq9Mo3JpPEQdw6tnCGV67ZcyhsdGU8biFKD6WbF4c+Yi2egrFwGky5BrvXBoU/5TQFhutVxsItsp0erOyd8pD4QkDk4SIPhoQI4Ko6xCqj6rFpC0c6LFt+GyYcfarFjaejHrHd0NCMmtFqyAFAwkkYIgt073ISDh0YDwoY5isf9dCwhaVAiW+y8KzZ61DRIbJe+13Q0IFlqNrYCgzRDGgkkLEjwgjmCihcwPBiTXI5MfHBMXrwWk/O5MQ4SyYYfq0AeZjkR/CEgstBpYAenZ5M1RISoC0hMaAKEHAwKZKsLqbn0eIBYVovnynG/2PCCsxOhvBgRKrYZmQGw2VgkQ8Zrs3IjtEh4MCGcG41By8S4GpDdEkUEJBwteOmefm70V/wwQKrVaNANis7FKGKEKSMXAxY8FJD9gl1zlqwEhfS5Emy/JW0gxXwn5uoG/AgSLrcZWQIJpuooLGElx3iBzJwMCjwUkP9hCoehXA2KwsbQpd8xqQMz/pFNiWzcDUm41sgLSm6apS/HsKMCDcs2TOln9PEDy5nppOuJqQKI69AVtEUHeSxfCk0LdwN8AAuVWQzMgmhm6rydznJdaAIlPBSToFmy4GRDJxc6XLt+Bs48Qoi/Cl+LfAELlVotNgIAhymuO88rTIKXgCT8UEIGEWBh+LgdEnU3HTjOwsyZi3kfvNb/yXkCC0mpgBYSqATHGeaEJEHooIFLA/y8BQS1NgrSU4yxjknMpfSn+BSCstRq1AMKGKK85zgu2RGrMmipPA2STuiv8hO/2QYLmXoKaz51TjJJzKZRwSUm7FRDQWg1bAOkMfcYc52VZdZfmp/iZGkQqI8ij+OUapNfcSx2QnJcu2c7iUAB/AAiprXYdIMY4ry2tT/BongZIkMpY+NTrAWHlDYalVRkvHcru43FMDH8ASFBbDU4EpLzyJR/nLUyDFAHBRwIizpYWchCuBwSUpu06Lc6b89IljQjil/LtgLBeC2QEBOsBMcV5C9MgRUDiIwEROcC/BETJRUTDkr9j8EEc+eRJUbodENBbLZwHCCorrLNx3lZAxuHmaYCIKc3yerKbAUG9XYPJSxcblkR3K34MCIa69kNDq3EDIMEEiCnOW5gGKTccPR0Q1O3PmwDBsgtOysCX9dIjWaKZOfekrhkmJJatDzHWtF8wtBqcpkFIASRrXzQDEp4IiDzKdJbf3AAI1LfrwUuPxehk4W1UDQhMPaNbKh4r2o8trUaXAWKK8xamQRTVzw8HpAGdiwBR9oUACyAHz0LsLFFevx0qARnUVAIIFpd9HQtMllaLp0Wx9hVpivNyMyDwPEAKo4y8Iu16QPrOukZYLsXeSy/4loXkea4DZNACMa4+CBSTzQ+/RVOr8VmAHDYms8R5S0kOZUDw2YCw0Tu5G5CoBSfzcd69l14wnaFsY9Xpj+n5XVIKDtb2i6ZWg7MA2VekJc4bS88sAxKfDQjIv6G7AWHV2VPjvBsvPSZth8WFors+gjWAjDTETZgXOqsOgT3pxVarAyTfTseKNMR5sTQsKeFHfhwg9KWAQKmiUR34Dl56usg8lDsKHTCz6g9Mi7vdqMeiQ2D/brHVwkmAHCvSEOctTYNogNCvAgJ/CQhpsRc9oxEShcJRMTUOmNXoj2Vc3e1DYtiaGaRVqkqh2hdMkQpIJs5L1qXO+X2dHwaIYn0/BRDSvfTiwAcybWQFBLe/3m+zoBMCpTmqXi7UmYCAHsb6BJAX2Q8GhJ4CCNgA2Xrp5nbd2dZoBGRZ7hB3gMwPVwmBkg7v5UJZAEFTlNcU5wXjMpzsdXBAzgGkaD+DOvAdvfRyuxaWZgcbIPNu0cvTk0Wy82LTqLUfWRs01m7aEI2AGOK8DYCEZL+13wSk+ypAOnXgO3rpJR99PyGwD6jZ9Ufy00wPBs3JtzdoCCogUV9QeKxIQ5y3GBnJlyWpwhCeBQg/EJDYqQPf4SEQyn1la41HqS+KfZsPnSa3HRfFsxrUYNag6oLM5WJjnBe3bWYuC1qy7b8UkO4BgEjbTLAW5920Vs2MAFXWfMxsG9jlLHm4ERD9pJW5WFX785ZHmuxL+TcBwW8HRO0BGw9T6fysW2wyH5BRPV326XQfIKB+D+4HD0ucF835PZi85kpAAhKZ0t1+CZBSJioZ2lW0saXcWrLcpOiPzTd0G++i6cmfAaJuLrZWJFTEeakaEL4UkAC2EMjFgIQvAmTZolMFJHdIaOwNNlaNClnXmWwCuVIwhG4CBNXVUmtFQkWcl8xzT+nM+2WAJEdXxasBwQIg+H2AcHH/YGEiTO763KpChL4v5rzhPYCA3kgLIKXDUPZ1B7WA8IWARKx5ws8CErJdGXQrOwMI6UNRVXMlx1NtZwLlWfFwByBBVyBrRZa0De8KUZwGyZQFuwsB2ep9jKcDEh4BSH7XIdBPgcIKQKLJEiu9YpfRabzvIkDA8L4uB4gW5+VKQPhKQMaNYHAapvh8DYIPBCQs7a6b2fpEWL6OzO2VbEy5X7gv9hy8AZB059WoDL9U3Ih5D4h56mksC3YXAhLWRGkwjGr/CSBLcDKi6jSwbUYxp25idScOBUAiNwQAmgGJZBkScEXCHucNlYDwlYAk69OCYej5TwBZgpPFgU9wQsBYf2ZDKLCUsCYUpCJA1ggIEpsM87Uie3ucF+1hEexzx/2cCcjwnSEujyJ7feJWfhGQoG/hewSEeqsKYaMKCVIl5TGCeCkgXcUHJxVpj/NWAGJQ3J8BstlBD/RnQGeSpwOSnFSmhjLROE042CWRm/JNgnAEeLZpuCYb63NAGA2P73trnLfTpkHuBQRToB2QnV/Bpli/3Uc/tC5XtdMx2TwbIQv9nYAU+Ugr0hrnjV8FyGanRgfkEJzs9Tjv3kvniqi6PdqU3cagy7QMV/FxNSBJRdrjvOVpEAfk7wEJyQimnkS1b7CqGuS6ltqVtMuAV8fHGT5IwU6MyS32OC9/KyDsgByCk70e56Wuxq9oVSFrBn4WEGhJgTzJSZeDAmlF2uO8dQPSDYBw8ihyQJJpkF467LngpWNfU4UVESc49K4uW+LbAZFbaFMsc5xXKdD9gKRnW6ADsoneG+K8fd3sH7aqkCWDMh4BYVum0CmAMAAYrSxqAQQV+/P+KNbUpuiAHIOTljBW5UIobktZXLsGHQDBtlWK7ROFPYIF801FWuO82trIjT2WTMBdCAiuL26vT/g5QNgICNV1eKyICufrOO4B4VY+PsjFIsOU56bvlsIdm30LKqr7XXmRLweErD76fwLI5nY9zkuVc3/tKmTKW6TtvlgRP8xVbUtWRP2zOf1Ea5xXW7l8KAtdCEhy6GG0NG8DIPHhgOhxXqzzKeIHKmQaLcMWkGb98Vm6O6kqZFOR0QhIVwtIvDIXa7UlyOJh/uyCqSgFJw1x3r7S6Y5VceGcDoENINSsPz5cUcjKd28r0hrn1aryWBa4OllxGJHY4mH+F0tutzFTPc6rdpRyHKZuf5NRh6RnFEaufshJgGiLUXeAGMNYmmrNpN5fCAjMX4CmwezKTRu+BhDaFqhB6dsMJesyzsxMIySAUGUC73mAHNbKlqK89YDYywIXrwd5/5I74+7glwHS3wwIaYAEtV0bAWnONxkJ4blsSxyaW/k4b1+s0mmCsa+K8yrVkilLuA6Q+cAJslnD/wUgu8C6DgjWAhKbJwvn7kArIAjN+uPMrUdRifLa47xKu+fKAt2lS26nyRmODkjSWNzrA9+mEis6e9Pi9PV9ExJd/7FcujfvriKtcd4GQC7cWVHfHO9CQL5zb97d3XVxXhsgaLK21e/+a0CUBcm7iqyM81JNWeDaXU1sWUT9/7G7e9iVVe/+9YD0bSsLvw2QcgBjX5GVcd4qQK7b3Z2qmvZ/OB9kF5yszOc1AoKfuOlfCQhoUd7aMBZWzslcBEjdtvkXAsLfAgjtK18d1RoA2UV6wy8CQhk76DJA1iNWIlBFTwIy9i77QfSfAHLWIZ6AnwMCCiDB0K52QOLuZBv6yE1/JiB1cd5YWZa1NSqOYEO96rnGDP4SQGrqwAQIycHJkwDBXQ2HE2ysLwfkUJF1cd6+EZCqQzxJB4RqAilfck463AAI95aBrwIQKMVt8HcBYVM9gXWe8NxjoFkFpG6x5oWAUN/8WecCcrgZzwGkK1nd9IOAHC6Uwh32DSoVQEJX0TmCat0uW5LRgwDB7gxAunJsH+z93whIKBgV/HuALOd3rrtv1sR5qREQqugckVRAuM5NbAEE5X7QCAhcCQgua6NnoZMAKcW4m+JY3w0IFldlq2GsVkC4pnOw1vFpUz261v8UEPnIl/zWbbbP+hyQYG1X+gAQ6AtuOv7ngARrlFcBJHYVnSNommHfsume3dkMuJMB6ZoACd0ZgAShWA073BgB4VLghn4OkHJFqnHeRkCwpnOQAkg8ZIEE5TDhFkB6GyChb/6sJkAkbuEyQPZm1KYELRm53w0I1AHCtuVSGiBQ0zm0bRimxSCcugdQHNA+BiTUo6N/1seAgLld+RNAKO/FNicsPhoQLc7btwFS0zmC4nyHaQqd0qmbyfLo43mAiCtSQxMgx89qAkQKrnHdwFcDCJT6xM9pEK4DhIzTIGVAqjqHtph/Xm6Lm5cVT0RsAkR0xQtrmuUrkc4HhAq2sME0tgLCpT6BvwaIUpFKnBfaAKnqHFB+0aRA4qzqIX3/mYDQqYCMBF8GSLgQkP3F8MuAaBWpxHkbAYGKzhFML6JFafAdgJDpQlGDdOcAAvoiOWuc1wwIFawQ+jFAMPP3aVRIAYqaAKnqHKQAsu74Q6kDjacDghZA0AoInQQI5+1/yhQ0KCObGZCSjfVrgFCuQqjgZJwBCNZ0DigDgmsxN07I+YAEi5VjBgROAkRwCCnnM8NJgJQCvb8KSJA+uOzUYxMgNaNnNOV8QfIQkIe6jwAxWTnGn8y0fQxIUKK8vXXgqwKE5KHj1wABbdK4HOdtA4QrOgcqgKQ7gkPS9lj6VRsg0iWW+522DvBjQKTBm3PlUfJ57YCAPGr+GiDZiuzNcd6+BZCq0RMUQFIFmDohNwJSqN6qz2oBRGlyqCHADsjexoLfBST/12yN8zYBUjN6RiVcFtIGi0mRLwBE6EAlA6Pqs1oAgfz0fsiWJ54GiJzR+2OARHWBQzHOC02A1IyeqLwJN5WSBHrpfECCHlFFIyB4FiCCeYdq1Jk+AoT/F0CEigRjnLcNkJrOAcqbtittExuruAlpGyCCYjWu4dc/qwGQqFheaG7XOkB21/HnAcHeHO4wJjfLgFSNnlwFSGIAwAWA5PsX2PIUIGfrfAqI1KcvBwT+E0CEirTGeZsAoYrOoW53tdurYY2PQamZGwHJjxslD7XqsxoAASFNUDgRshznrQFk66aHnwUEqtzRQ1mwBRCu6BxQCch6PGQxGb8RkJjziGMp+b/qsxoA4bIJx7194KsEZLs/1s/mYoFuO2PFBIfltlDTOdgISNi2H5Yn0lsBSfsjZroVV7vWHwIi7sduiLDgZ4BsBwPDAqFnAmJIgi/FeWMDIDXmBarhANy9YbaxyjnyrYBQppTFCE7VZ9UDIllYUrvGEwERpiv7/wMQY5y3oSxV5gVZAdlvLByKPnozIDGjLbg0emqew2eAiFmlaPCJ6ENA8pFu+C1AxIq0xXm5BZAa84LVit+nas3AlC3AVkDSq3joMZkyVn1WNSAkuT9YXGdwEiDJNsj0iY/+BEDQFq/ZPw0aylJjXgTDq3hnYLCF32ZAjjhAsVNlPwu7cwAJrGR6FQGBTwFJjvKCT3z0swGJtttMgIgVaYvztgBSY16QARDajVypSxBPB+RgUCn6VPMcLIm50pMiq5H0WDPwmZZ1ZLcwCSab4i5A8CNAOFsloWYwAZM+1Ve6qZ1DW+CT3jSPZjFYAiqdHJrtSlHbPuJ2AI1cbJj8Z7GemMv6kwLUByfLEZZqQGYriz+ysE4AJNhmr8UsEPHnbAFEDmORtchh3v5SO8xiqPXMVpnqisK1LNstsULUWpmsl47DP6Ji0FV9FnTG4Drva3J/bmm0hOGO6zy5083T/VLe986m/FGQ9wxAtmswgtJVjt/Pwt9TZ3DSDy+0nHYWld2Edp0jcMXNQpPh7r+HThNZGdd3n1e4lL+j7V4ta+TQ5ZUnSRklZQZiqZeBDRDrAtMrAdkdcyUdorS/rcOYGzeSr0C9hnMvRB3VyF0NIKGKJglm2g6fNJYjqN02YehwKZS1gpIdyxWfdRiao50POdU0FNs1ytckD64ICMe/AOQ4GOdGxdyYjUL94sGc3tZkpOILoxpQs+iPNDTLHwGy0Pg+0CwsD3sV+mWHHE2FjLZC/VKhJ1ly/9TPolJvI66pGzK3a3qVbFVe/Ki2Iwo/BCQ7GKPtNhDadNAtKI6VoLxQs1NN+iN/gHcLIMXxlUw3k3wJo0WHNPJRrAMItieRVfsf25VDifqcDpn2yCAEU1VdD4gwGKPtNhC6bMi0chDHmf0LlRR0m/6Yfx6x+xSQkgsTbbdi+ZKmQ8hsiVXVQbBU0LZ8R+0fDe2qdJ89IANXe73P1NrHu7P1x7FJ1NvCflxBcTQB9YXlRUxG/bHZfeRDQPaND6IPISobjKHC89x2Ds4MnXhGHYwdsWj170f5jKUUi+2KhWsZHZLszbutdA79XwBCtg4jD1eSHQviI6WmOL6N6oqcf58RJ214Cuv3vVyRaTw4Npqs3ORLOTbjikjWI+y7ms8qXpYriOFIpvgOLHxdsIbHhlsxU+mMH3TyjzQICYK22zYb62H6++OtU2/SXxiPzzaVJfs+tN1sMG/H75v6TFg/aMuR+HnBVtUJI8nrjhrE9lnKzUG+iPi+GA3vjcV2DdbuM7duOFZ6q/Nx3ky6i8vvigPi4uKAuLg4IC4uDoiLiwPi4uKAuLg4IC4uDoiLiwPi4uKAuLi4OCAuLg6Ii4sD4uLigLi4OCAuLg6Ii4sD4uLigLi4OCAuLg6Ii4uLA+Li4oC4uDggLi4OiIuLA+Li4oC4uDggLlkJOOxHCwDrlrUuDojLeydl4DcX4+mYYcCE37uew6f7Kbs4II8XBMhi8NIoMB4O4MrEAfmP8SgeSRFo1CWtmiTOB1e7KnJAHsmH4cCvMGiSOkbe510A7A+qyZ414uKAfK9nTmuPjmWQrIxEHJSOfJyTM+KAPEeB4Pqn16Bf6P+xHw5kJVTg2J1QN8bERoEJHECveAfkaYAMolhAgXLnXa5XOSWDMMNBJLKclOjigHyHxO0Z7RG0+wcIMiogUR0vVwO1RzghDsgzANk56WT4xRD73eia5JRWMLjh79PE3cpyQJ4hm4NvLUGm2IfBl5gZiQTLYePWbg8dedTXAXmIG7LEptAehMWZkbDSURGdCh17xTsgT5EwJplUDuqYBHOH2G3NzztvTAfk93XP4nnUTpO7BnFA/gPTbKJj9j8qIIEOvAIdkP8Bj5fnEeeZczCmNUbyKJYD8tMSYVIbcXFjZo/knTWvW2Y+D+KAPLLjL553URtM0x47rz6sbvs7LTH/+3HKxA0sB+SJeNDEBs/dPKsLpshuNui1y1QcU7HGdHda0nvZ7SsH5IluBa+zGYs2ONhLY7JJV8rJLefzOh4OyDP52CcRjstAdjOAODkf+vPGFSG8ze31JbwOyEMlvDpwELyNZdCfZj6grpfHdyq917AD8miRQq+JxzHh4TaSA/J/AhIl3330OthsXbk4ID8nkLOw+q1pVVgt5eKA/LwGYYGQZKmgW1cOyH8qkbP6IaxLBcEdEAfkP5YwehrLUvL3VqRJlHZIuuJs6m5YwrnscVwH5McJyW/Vg+Nyj8lfT2ZGIh7mBN2Nd0B+VBBycGyXCmI6kT6vJ5w395lhcTvMAflNRySsnVzcu3rECDAOrOy37h22BnJCHBDXNFI645Dz6NsnOiD/tb8CpT0Sgy/4cED+b3nPmoC01U9Et7EckP9cf7xDVXO679aNH3aW8xVRDsh/7IKs+bzLrnHT+VQ0TZV4JTkg/zEfGwD2O7rb91d0cUB+0v3gEA9ex3D651uNRJ9Jd0D+c/0hI+BwOCD/u39eu5zQxQH5nwTYpwAdEBfRhvIJDgfEpeChsxtYDoiLbGH5DKAD4uKAOCAujSaW14ED4iIKdr6k1gFxKdhYyUoPD/g6IC47CbwS4hFfB8RlLxHmPRuCL4pyQFwyfgh0QAHJc04cEJe8FnnvYOIG1rfJPwEGAAoLBPDggh+JAAAAAElFTkSuQmCC',
+						w: 800,
+						h: 285
+				},
+				agency_name = 'Travel & Holidays',
+				agency_site_url = 'www.travelandholidays.com',
+				footer = agency_name + ' - ' + agency_site_url,
+
+				page_size = 'a4',
+				page_width = 210, // mm
+				page_margin = 10, // mm
+				content_width = page_width - (page_margin * 2), // available width for the content
+
+				_y, _x, // drawing coord
+				color_array, _string, lineHeight, y_correction, // some variables
+
+				vspace = 10 // standard vertical space between elements
+
+		;
+
+		// some variables
+		var can_display_preview = true, // if true a preview of the PDF can be displayed in the iframe,
+				// this value is set to false if the browser can't display the preview
+				preview_container = $('#pdf_preview'),
+				update_preview_button = $('#flyer_preview_btn'),
+				download_button = $('#flyer_download_btn');
+
+		// preview can be displayed?
+		if (navigator.msSaveBlob) { // older IE
+				update_preview_button.prop('disabled', true);
+				can_display_preview = false;
+				preview_container.replaceWith(
+						'<div class="no_iframe">' +
+						'<div>' +
+						"The preview can't be displayed" +
+						'</div>' +
+						'</div>'
+				);
+		}
+
+		// utilities
+		var hex2rgb = function(hex_string) {
+						if (/^#/.test(hex_string)) {
+								hex_string = hex_string.substr(1);
+						}
+						if (hex_string.length === 3) {
+								hex_string = hex_string.replace(/\w/, function(match) {
+										return String(match) + String(match);
+								});
+						}
+
+						return {
+								red: parseInt(hex_string.substr(0, 2), 16),
+								green: parseInt(hex_string.substr(2, 2), 16),
+								blue: parseInt(hex_string.substr(4, 2), 16)
+						};
+				},
+
+				px2mm = function(pixel) {
+						// px to inches
+						var inches = pixel / 72;
+						return inches * 25.4;
+				},
+
+				mm2px = function(millimeters) {
+						// mm to inches
+						var inches = millimeters / 25.4;
+						return inches * 72;
+				},
+
+				// function to calculate and check img sizes
+				imgSizes = function(img_w, img_h, img_mm_w) {
+						/*
+			img_w and img_h represent the original image size, in pixel
+			img_mm_w is the desidered rendered image size, in millimeters
+
+		*/
+
+						if (img_mm_w > content_width) { // this should be never used...
+								img_mm_w = content_width;
+						}
+
+						if (mm2px(img_mm_w) > img_w) {
+								throw 'The `img_mm_w` parameter is too big';
+						}
+
+						var img_mm_h = Math.round((px2mm(img_h) * img_mm_w) / px2mm(img_w));
+
+						return {
+								w: img_mm_w,
+								h: img_mm_h,
+								centered_x: (page_width - img_mm_w) / 2
+						};
+				};
+
+		try {
+
+				// image reading
+				// More info at https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
+				// for more examples about file api
+				// take a look at https://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser
+
+				var flyer_img = $('#flyer-image'),
+						img_data = null;
+
+				$('#flyer-image').change(function() {
+
+						// temporary disabling buttons while parsing image
+						update_preview_button.prop('disabled', true);
+						download_button.prop('disabled', true);
+
+						/*
+				getting the file
+
+				flyer_img[0] : transforms the jQuery reference to a DOM object
+				files[0]     : refers to the file the the user has chosen
+
+				use `console.log(user_file);` to show some info about the file
+
+			*/
+
+						var user_file = flyer_img[0].files[0];
+
+						img_data = {
+								type: user_file.type === 'image/jpeg' ? 'JPEG' : 'PNG' // maybe you should add some controls to prevent loading of other file types
+						};
+
+						var reader = new FileReader();
+						reader.onload = function(event) {
+								img_data.src = event.target.result;
+
+								// we need this to get img dimensions
+								var user_img = new Image();
+								user_img.onload = function() {
+										img_data.w = user_img.width;
+										img_data.h = user_img.height;
+
+										// restoring buttons
+										download_button.prop('disabled', false);
+										if (can_display_preview) {
+												update_preview_button.prop('disabled', false);
+										}
+								};
+								user_img.src = img_data.src;
+						};
+
+						//when the file is read it triggers the onload event above.
+						reader.readAsDataURL(user_file);
+				});
+
+				//!pdf builder
+				var createPDF = function(update_preview) {
+						/*
+				update_preview:
+					==> true: shows pdf online
+					==> false: downloads the pdf
+			*/
+
+						_y = page_margin; // vertical starting point
+
+						// form data
+						var flyer_title = $('#flyer-title').val(),
+								flyer_title_size = $('#flyer-title-size').val(),
+								flyer_title_color = $('#flyer-title-color').val(),
+								flyer_description = $('#flyer-description').val(),
+								flyer_price = $('#flyer-price').val(),
+								flyer_price_currency = $('#flyer-price-currency').val(),
+								flyer_price_color = $('#flyer-price-color').val();
+
+						var pdf = new jsPDF('p', 'mm', page_size),
+								text_baseline,
+
+								// some colors:
+								light_grey = 237,
+								grey = 128,
+								black = 0,
+								white = 255;
+
+						// Optional - set properties of the document
+						pdf.setProperties({
+								title: flyer_title,
+								subject: footer,
+								author: 'me',
+								creator: 'Flyer Builder & jsPDF'
+						});
+
+						// !logo
+						var logo_sizes = imgSizes(agency_logo.w, agency_logo.h, 60);
+						pdf.addImage(agency_logo.src, 'PNG', logo_sizes.centered_x, _y, logo_sizes.w, logo_sizes.h);
+
+						// fonts initializing
+						pdf.setFont("helvetica");
+						pdf.setFontType("bold");
+
+						// !main title
+						color_array = hex2rgb(flyer_title_color);
+						pdf.setTextColor(color_array.red, color_array.green, color_array.blue);
+
+						pdf.setFontSize(flyer_title_size);
+
+						lineHeight = px2mm(pdf.getLineHeight(flyer_title));
+
+						_y += (logo_sizes.h + vspace + lineHeight);
+
+						pdf.textAlign(flyer_title, {
+								align: "center"
+						}, 0, _y);
+
+						_y += vspace;
+
+						// !user image
+						if (img_data) {
+								var img_sizes = imgSizes(img_data.w, img_data.h, content_width);
+								pdf.addImage(img_data.src, img_data.type, img_sizes.centered_x, _y, img_sizes.w, img_sizes.h);
+								_y += img_sizes.h;
+
+						} else {
+								// if we haven't an image, a grey box with a text is added
+
+								var box_height = 80;
+
+								pdf.setFillColor(light_grey);
+								pdf.roundedRect(page_margin, _y, content_width, box_height, 5, 5, 'F');
+								pdf.setFontSize(60);
+								pdf.setTextColor(white);
+								_string = 'SPECIAL OFFER';
+								lineHeight = px2mm(pdf.getLineHeight(_string));
+
+								// y_correction: value to be added to y coord of the grey box to have text vertically centered
+								// it is empirically calculated adding 1/3 of text line height to half box height
+								y_correction = box_height / 2 + lineHeight / 3;
+
+								pdf.textAlign(_string, {
+										align: "center"
+								}, 0, _y + y_correction);
+
+								_y += box_height;
+						}
+
+						// !price
+						// first: creating a circle that overlaps the bottom side of the image
+						var circle_radius = 30;
+						color_array = hex2rgb(flyer_price_color);
+						pdf.setFillColor(color_array.red, color_array.green, color_array.blue);
+
+						// _x and _y refer to center of the circle
+						_x = content_width - circle_radius; // circle ends at `page_margin` millimeters from the image right side
+
+						pdf.circle(_x, _y, circle_radius, 'F'); // circle overlaps image for 1/2 of its height
+
+						pdf.setFontSize(60);
+						pdf.setFont("times");
+						pdf.setFontType("bold");
+
+						_string = flyer_price_currency + parseInt(flyer_price); // decimals are removed
+
+						lineHeight = px2mm(pdf.getLineHeight(_string));
+						y_correction = lineHeight / 3;
+
+						pdf.setTextColor(white);
+						pdf.textAlign(_string, {
+								align: "centerAtX"
+						}, _x, _y + y_correction);
+
+						// !description
+						if (flyer_description) {
+								pdf.setFontSize(20);
+								pdf.setFont("helvetica");
+								pdf.setFontType("italic");
+								pdf.setTextColor(grey);
+
+								var lineWidth = content_width - (circle_radius * 2) - (page_margin * 2);
+								_y += page_margin;
+
+								var line_height = 12; // mm
+
+								var description_lines = pdf.splitTextToSize(flyer_description, lineWidth);
+								//pdf.text(page_margin, _y, description_lines); // doesn't allows to change line spacing
+
+								for (var i = 0; i < description_lines.length; i++) {
+										pdf.text(page_margin, _y, description_lines[i]);
+										_y += line_height;
+								}
+
+						}
+
+						// !footer
+						_y = 287;
+						pdf.setFontSize(9);
+						pdf.setFontType("normal");
+						pdf.setTextColor(black);
+						pdf.textAlign(footer, {
+								align: "center"
+						}, 0, _y);
+
+						// ****************************
+						// output
+						if (update_preview) {
+								preview_container.attr('src', pdf.output('datauristring'));
+						} else {
+								pdf.save('flyer ' + flyer_title + '.pdf');
+						}
+
+				}; // end createPDF
+
+				// !buttons
+				update_preview_button.click(function() {
+						createPDF(true);
+				});
+
+				$('#flyer_download_btn').click(function() {
+						createPDF(false);
+				});
+
+		} catch (e) {
+				console.log(e);
+		}
+
+})();
\ No newline at end of file
diff --git a/pdf-flyer-generator/dist/style.css b/pdf-flyer-generator/dist/style.css
new file mode 100644
index 0000000..8a85aef
--- /dev/null
+++ b/pdf-flyer-generator/dist/style.css
@@ -0,0 +1,26 @@
+.flyer-builder {
+  position: relative;
+  height: 100%;
+}
+.flyer-builder iframe,
+.flyer-builder .no_iframe {
+  width: 100%;
+  height: 400px;
+  border: 1px solid #666;
+  background-color: #ddd;
+}
+.flyer-builder .no_iframe > div {
+  width: 80%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  font-weight: normal;
+}
+@media all and (min-width: 768px) {
+  .flyer-builder .btn.btn-block {
+    display: inline;
+    width: auto;
+  }
+}
diff --git a/pdf-flyer-generator/license.txt b/pdf-flyer-generator/license.txt
new file mode 100644
index 0000000..f20c36c
--- /dev/null
+++ b/pdf-flyer-generator/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Massimo Cassandro (https://codepen.io/massimo-cassandro/pen/qOrJNx)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/pdf-flyer-generator/src/index.html b/pdf-flyer-generator/src/index.html
new file mode 100644
index 0000000..1fedd75
--- /dev/null
+++ b/pdf-flyer-generator/src/index.html
@@ -0,0 +1,84 @@
+<div class="container-fluid flyer-builder">
+		<h1>Flyer Builder</h1>
+		<p><em>The preview doesn't work  with Chrome or Safari in this demo since it has been loaded in a iframe. Use Firefox or try at <a href="http://www.primominuto.net/articoli/pdf_flyer/flyer.html">www.primominuto.net/articoli/pdf_flyer/flyer.html</a></em></p>
+	
+		<div class="row">
+				<div class="col-sm-6 loc_form">
+
+						<div class="form-group">
+								<label for="flyer-image" class="control-label">Image</label>
+								<input id="flyer-image" type="file" tabindex="1">
+						</div>
+
+						<div class="row">
+								<div class="col-sm-7">
+										<div class="form-group">
+												<label for="flyer-title" class="control-label">Title</label>
+												<input required class="form-control" id="flyer-title" placeholder="Main title" value="Really incredible!!" maxlength="255" type="text" tabindex="2">
+										</div>
+								</div>
+								<div class="col-sm-3">
+										<div class="form-group">
+												<label for="flyer-title-size" class="control-label">Size (pt)</label>
+												<input required class="form-control" id="flyer-title-size" value="60" min="1" step="1" type="number" tabindex="3" title="Title size: tune it to fit the available space">
+										</div>
+								</div>
+								<div class="col-sm-2">
+										<div class="form-group">
+												<label for="flyer-title-color" class="control-label">Color</label>
+												<input required class="form-control" id="flyer-title-color" value="#0080FF" type="color" tabindex="4" title="Title color">
+										</div>
+								</div>
+						</div>
+
+						<div class="form-group">
+								<label class="control-label" for="flyer-description">Description</label>
+								<textarea class="form-control" id="flyer-description" placeholder="Insert a short description taking care of the available space">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, nihil officia neque ad expedita consequatur quae! Voluptate, incidunt, earum, sit, eveniet harum ratione expedita quibusdam possimus sed laboriosam dolore ut recusandae eos. Ipsa,natus pariatur iste dolorum optio nostrum consectetur!</textarea>
+						</div>
+
+						<div class="row">
+								<div class="col-sm-4">
+										<div class="form-group">
+												<label for="flyer-price" class="control-label">Price</label>
+												<input required class="form-control" id="flyer-price" placeholder="Enter price (w/o decimals)" value="100" type="number" tabindex="5" step="any" min="0">
+										</div>
+								</div>
+								<div class="col-sm-3">
+										<div class="form-group">
+												<label for="flyer-price-currency" class="control-label">Currency</label>
+												<select required class="form-control" id="flyer-price-currency" tabindex="6">
+														<option value="&euro;">&euro;</option>
+														<option value="$">$</option>
+														<option value="&pound;">&pound;</option>
+												</select>
+										</div>
+								</div>
+								<div class="col-sm-2">
+										<div class="form-group">
+												<label for="flyer-price-color" class="control-label">Color</label>
+												<input required class="form-control" id="flyer-price-color" value="#cc0000" type="color" tabindex="8" title="Price color">
+										</div>
+								</div>
+						</div>
+						<hr>
+						<div class="row">
+								<div class="col-sm-6">
+										<div class="form-group">
+												<button id="flyer_preview_btn" type="button" class="btn btn-primary btn-block" tabindex="9">Update preview</button>
+										</div>
+								</div>
+								<div class="col-sm-6">
+										<div class="form-group text-right">
+												<button id="flyer_download_btn" type="button" class="btn btn-default btn-xs btn-block" tabindex="10">Download</button>
+										</div>
+								</div>
+						</div>
+
+				</div>
+
+				<div class="col-sm-6">
+						<iframe id="pdf_preview" type="application/pdf" src=""></iframe>
+				</div>
+
+		</div>
+</div>
\ No newline at end of file
diff --git a/pdf-flyer-generator/src/script.js b/pdf-flyer-generator/src/script.js
new file mode 100644
index 0000000..16f5533
--- /dev/null
+++ b/pdf-flyer-generator/src/script.js
@@ -0,0 +1,385 @@
+/* jshint undef:false, newcap: false, unused:false */
+
+(function(API) {
+		API.textAlign = function(txt, options, x, y) {
+				options = options || {};
+				// Use the options align property to specify desired text alignment
+				// Param x will be ignored if desired text alignment is 'center'.
+				// Usage of options can easily extend the function to apply different text
+				// styles and sizes
+
+				// Get current font size
+				var fontSize = this.internal.getFontSize();
+
+				// Get page width
+				var pageWidth = this.internal.pageSize.width;
+
+				// Get the actual text's width
+				// You multiply the unit width of your string by your font size and divide
+				// by the internal scale factor. The division is necessary
+				// for the case where you use units other than 'pt' in the constructor
+				// of jsPDF.
+
+				var txtWidth = this.getStringUnitWidth(txt) * fontSize / this.internal.scaleFactor;
+
+				if (options.align === "center") {
+
+						// Calculate text's x coordinate
+						x = (pageWidth - txtWidth) / 2;
+
+				} else if (options.align === "centerAtX") { // center on X value
+
+						x = x - (txtWidth / 2);
+
+				} else if (options.align === "right") {
+
+						x = x - txtWidth;
+				}
+
+				// Draw text at x,y
+				this.text(txt, x, y);
+		};
+		/*
+		    API.textWidth = function(txt) {
+			    var fontSize = this.internal.getFontSize();
+		        return this.getStringUnitWidth(txt)*fontSize / this.internal.scaleFactor;
+		    };
+		*/
+
+		API.getLineHeight = function(txt) {
+				return this.internal.getLineHeight();
+		};
+
+})(jsPDF.API);
+
+(function() {
+		"use strict";
+
+		/*
+		Refs:
+		https://mrrio.github.io/jsPDF/
+		https://github.com/MrRio/jsPDF
+		https://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html
+	*/
+
+		// some variables
+		var agency_logo = {
+						src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAEdCAMAAADD1fMAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRFAHC6RpjOtdbr1uj0f7jd7/b7////IYLCvV4sVgAAIv1JREFUeNrsnYvao6oOQE0I5v3feFqvqIQEqv61k5z9nT17tIrAIhcCdL1LiwTGR5UXAb3RWqTzKmgS6rqOwkMKG4m7DrzRHJD75NXj3og8YViOMBY2eqs5ILdZLN0kjF/e7xDmorqN5YDcJkuveyEC32tpBeqSgnqzOSB3WS3dRpi+UY1EhG0xgzecA3Kfi76VrwsS4bGM5A3ngNxuYSX973sYCcSZArqN5YDc1P+6vPBX6JE8He6mOyB/q0AWRuJ30tH5VIgDcpMU+uDoj/yNOxwzfseWXp8KcUDu8H87Vfh2hyQQ6MVCJ8QB+VMLa6NIbktFCQhsK5I3ngNyk4tu6pEMl2sSIxzMPhXigNwjNFkraNYkF/kkL5/DWgScSu1TIQ7ITS56jErI6KBKwslsWN89xHcj+FSIA3Kjiz4vB7GqkXEgPwGTiHVszBMg4FMhDsitLvqcgBUJ6nrrS5u0cBLeZFSiwVPg91VSd9MdkFskJl109Upqh/RRn7xJwTIrr+tE1WAkM+c4FnRJr/RArwNyg4W1jMZDKBe6aHdHBK1ylE8eyCshNACCnm7igNyiQGAzQOMw3TEaLtW21kXCA7RjQScdkq7w8jZ0QD6UwMDSP7BNjoVtInlE/nM+Fi9jKMug5SCXoJ8Tt78ckEo3oyBvKtalSGFwJWL/11pkYHUoTBy0BrzD0cbZf58lcUBsKsTUFcNiuIy6ZDJt/kyH8JyPGF5/4ndZeCbECEhwDeKA2GwsoynD68jLi9s+D8f36hIclRfNiPI6QxOMgJDz4YCcp0JePTIcdMn6J+hNab8nKY7BHaexAAd3g4OtKK5AHBCjExLA5NDSamFN3vmiQcalF2NQCa6zuoDC6Gq8VQemBdj6FtFg+XkuvANiR8RkYW1820A8bJIFyXQDb288U28AYaQxZEUzpRIgncnGCtEJcUBOUyGJ2bJMhcfFrILxv2DTOxnPUCZrQlfEaTKfJo3Gm2IlOflosBpdgTggJ4Z6k0mQwcKauxctsSScMwSXIOvrnsgQGjJH3ulb02/SZbM0aypYnJAEhXdU7RhQcA/EATlFhSgzaxCWjjj1vmFHkzVnNr4tL0pTaXno0vNcwzv3kIeELBUWxkE3TcG18Y+zMqIFldEJgT6dvYyrvtN0ovPhgJyqQrplUn0ZtGn+w9hLZ0AWUIawV5oLJTko2wjYmoAbYUlwSS6GkUwYeOD1p5TcqFLIDogDUqdCrDFaXvzieWr9HVYN3R4Qfmdrjf37ncQbC4BQGiYY3JmXhfXWSm9qaRuzfauvkZBRkS16DKI1wcQViAPSgoh1OWufRK5CMm8IU0+e/v1CAkcLCVYVlAdkM/cdllXwiynVz37J7OG8caNpJmSIFNCwPVcwuzrggDgglWJVIQwYunQSZBjy34ubpp7NAyCzV7+NuGYBGRNuw8G/hsHvGGbr6d3/Y78YUm/1Ms0Rrl58RdaL8+GAXKZCdqqEwxLyneyk4d+TAhnUwOoRQC7++rbJ4owFHmbBkyLy8oTRtYlT/GCQisxiVyAOSAMgWA/IZGDh6oaPVtAABiced8QA3cGhWCwsxmX3lNSTAFimXV46asj2miYIp7/leR8VqlrA5Xg4IC2E7HxcLf2Q6WX0T2GkaUMsnvo4zx57siYcBUDe3vz7/8IGEBjz6SdXBzYzltDNisum9MgViANySiRrryKiPi7TavvPHfb1VzD/7TsU/A5iTQ4DZUysEZp5ehHXWFi/qCjcLjynZULfELZi2oPvW/Y6IOcYWW/PQN/nB2CXAQVr2kniUgx7HeY0yIjGfAWXWFicMr12jv3ixjAaNpIbosV7Il2BOCCnqJB3343LqbHmfF9Y/fWtS3H4zzmGNTrfkXc6JiyA8LwX3eqEmGyr3JIuVyAOSDMh+fMDjEvPAcOSaDt7B0EFJFn3CptpluWP/ZjoNd8SzMUZf0I+ie6AXOOlz73XvuvoskoEV7MrTenNAJJskxXmvC5a1s7S7g6oUh7LQ6U3ujggHyiQbWq7fddRXoOuSwgLKb8AcMwNfssUBBu0VsB3B49xuHvQBO90RXMB0qPh2KO8DshJfEAnzHLPUr1b3Gbnz7lrDjjQIQd3hmfxESLjGBuuQGNw3mNJKfpmcg5IowTDzgZtO/MOK57Cdlb84KQsqIw9/O1p1G+3uD/CPfhEoQNylgJhaSnh3lNpWSbIQ1+fbakVkD5ZiLUeQcJNSxGPZ1wJ3+QbYjkg9YL2vIzPdx1lWDfpPWsH0kxBSV5A7OKAnKFApOE24HfszLtEmGuY91MRHJBqkbM2RJ8Wib8AjsIJu1z/TQ6IS16BlNcQij+7chcsUwigYC1B2zc5IC41CkQ1SMIfQaKdOx2UJEsXB8QsQdsUq/8qSCznTUd1ab2LA2IVOGGFUcBbNrAGsu06DRVzmC4OSFG0xYRGg2RI2rqQkveko9WnUtdH+myhA2IW1Tyqi/pUJU6ZbaqqyQvDbsNOiANygofebrIHpM89k8ZDpC07UHio1wE5S4F8Mt6+Nx2tVigMSw7XJTajr5xyQOyjrWlDwo/G27ErjoegU/bU5/Ev35eXbK0P+m80UeihXgfkvN70KKcWfu+THJA/4wPZYGIxP8hkjzGEgC/brvRP8KW3Doi9O2kSn3UeU7SIN70DYu5P+j+P+6TYl//n4oC4uDggLi4OiIuLA+Li4oC4uDggLi4OiIuLA+Li4oC4uLg4IC4uDoiLiwPi4uKAuLg4IC4uDoiLiwPi4uKAuLg4IC4uDoiLi4sD4uLigLi4OCAuLg6Ii4sD4uLigLi4OCAuLg6Ii4sD4uLi4oC4uJwKSESokdcvQv7K++ikivfOT1k3ISf5pUIZg1SW3K3FV1xxNohcs1S4JDxqKDlhfsv2qs8q3kxi21q/Gg/t2st95vVOS8HDcGrXtgwIdA8gfd3hen35REymUPlaMhREemXoyXzA8vAKvvVQ8cIHQc1hooGUoxSrzkovHthWOGnIOIhA9vi3IBaQtcPjIq23rL2Lxr74lYAov+C6igS1El+1FVlqfqgCJPCdx11G6W2hdOk45KsHD0qflaWpWAeBP21ZoZggFDB/3HtScOTtAJw87msB0cbtqopMCoxy3w7iYEs1gAgQcn+N5M9qHqpHuHQ8Ne2IUobmUIN9sQ7Ch0cBR+lWkAqIxYJj7tpUed8LiPob3TyMGUDyowkJ497cAlADSHaIhMsOY8oqiqBd0hjLEVLzWcWbizokq+G2LkimXaXvnd55eCPE4pgJs831xYCo47Zqs2D2+GWST2feV/D6BqoBJDNEXnmc+LF/L12scEmz0sCiQwqfFUrOymeEiIAcX7oUMIgFj2zoi18JiPorrdflATmOGCRUVtpHoAaQgyMKlx7md+A6iJcyBZFOeAddLRQ/a38zWVwn09HSJJ47v7cP0ndyU8veDwgPIbZNNe//preO22StSLJ6pEHkj6oA2XYAvviwy62i2LytcKnslR1732EcVsJyxZvLhICxN2E52rABOHljWg2h+y5A4Ijt4csyTsRUGYG4wg8BqcJR7jQgDI9x06Jrw6QFAmkou/x09MLbUKmv9LsgpjzlaKKyN2O/eVNBQ4hkE0oiW7tS2ViRxsWQ/dv3lBfxXwMyTUNlFAZnCgXHdke7tSoCsnkuCP0pFH6D2REIJFV0/dwty/YJl00X2pWfysHems/C0s3h2ARkHFPYWkIBEMg+LB+kvx2QKGmQ5K/y5jHmbFuw9RpWhq9Mo3JpPEQdw6tnCGV67ZcyhsdGU8biFKD6WbF4c+Yi2egrFwGky5BrvXBoU/5TQFhutVxsItsp0erOyd8pD4QkDk4SIPhoQI4Ko6xCqj6rFpC0c6LFt+GyYcfarFjaejHrHd0NCMmtFqyAFAwkkYIgt073ISDh0YDwoY5isf9dCwhaVAiW+y8KzZ61DRIbJe+13Q0IFlqNrYCgzRDGgkkLEjwgjmCihcwPBiTXI5MfHBMXrwWk/O5MQ4SyYYfq0AeZjkR/CEgstBpYAenZ5M1RISoC0hMaAKEHAwKZKsLqbn0eIBYVovnynG/2PCCsxOhvBgRKrYZmQGw2VgkQ8Zrs3IjtEh4MCGcG41By8S4GpDdEkUEJBwteOmefm70V/wwQKrVaNANis7FKGKEKSMXAxY8FJD9gl1zlqwEhfS5Emy/JW0gxXwn5uoG/AgSLrcZWQIJpuooLGElx3iBzJwMCjwUkP9hCoehXA2KwsbQpd8xqQMz/pFNiWzcDUm41sgLSm6apS/HsKMCDcs2TOln9PEDy5nppOuJqQKI69AVtEUHeSxfCk0LdwN8AAuVWQzMgmhm6rydznJdaAIlPBSToFmy4GRDJxc6XLt+Bs48Qoi/Cl+LfAELlVotNgIAhymuO88rTIKXgCT8UEIGEWBh+LgdEnU3HTjOwsyZi3kfvNb/yXkCC0mpgBYSqATHGeaEJEHooIFLA/y8BQS1NgrSU4yxjknMpfSn+BSCstRq1AMKGKK85zgu2RGrMmipPA2STuiv8hO/2QYLmXoKaz51TjJJzKZRwSUm7FRDQWg1bAOkMfcYc52VZdZfmp/iZGkQqI8ij+OUapNfcSx2QnJcu2c7iUAB/AAiprXYdIMY4ry2tT/BongZIkMpY+NTrAWHlDYalVRkvHcru43FMDH8ASFBbDU4EpLzyJR/nLUyDFAHBRwIizpYWchCuBwSUpu06Lc6b89IljQjil/LtgLBeC2QEBOsBMcV5C9MgRUDiIwEROcC/BETJRUTDkr9j8EEc+eRJUbodENBbLZwHCCorrLNx3lZAxuHmaYCIKc3yerKbAUG9XYPJSxcblkR3K34MCIa69kNDq3EDIMEEiCnOW5gGKTccPR0Q1O3PmwDBsgtOysCX9dIjWaKZOfekrhkmJJatDzHWtF8wtBqcpkFIASRrXzQDEp4IiDzKdJbf3AAI1LfrwUuPxehk4W1UDQhMPaNbKh4r2o8trUaXAWKK8xamQRTVzw8HpAGdiwBR9oUACyAHz0LsLFFevx0qARnUVAIIFpd9HQtMllaLp0Wx9hVpivNyMyDwPEAKo4y8Iu16QPrOukZYLsXeSy/4loXkea4DZNACMa4+CBSTzQ+/RVOr8VmAHDYms8R5S0kOZUDw2YCw0Tu5G5CoBSfzcd69l14wnaFsY9Xpj+n5XVIKDtb2i6ZWg7MA2VekJc4bS88sAxKfDQjIv6G7AWHV2VPjvBsvPSZth8WFors+gjWAjDTETZgXOqsOgT3pxVarAyTfTseKNMR5sTQsKeFHfhwg9KWAQKmiUR34Dl56usg8lDsKHTCz6g9Mi7vdqMeiQ2D/brHVwkmAHCvSEOctTYNogNCvAgJ/CQhpsRc9oxEShcJRMTUOmNXoj2Vc3e1DYtiaGaRVqkqh2hdMkQpIJs5L1qXO+X2dHwaIYn0/BRDSvfTiwAcybWQFBLe/3m+zoBMCpTmqXi7UmYCAHsb6BJAX2Q8GhJ4CCNgA2Xrp5nbd2dZoBGRZ7hB3gMwPVwmBkg7v5UJZAEFTlNcU5wXjMpzsdXBAzgGkaD+DOvAdvfRyuxaWZgcbIPNu0cvTk0Wy82LTqLUfWRs01m7aEI2AGOK8DYCEZL+13wSk+ypAOnXgO3rpJR99PyGwD6jZ9Ufy00wPBs3JtzdoCCogUV9QeKxIQ5y3GBnJlyWpwhCeBQg/EJDYqQPf4SEQyn1la41HqS+KfZsPnSa3HRfFsxrUYNag6oLM5WJjnBe3bWYuC1qy7b8UkO4BgEjbTLAW5920Vs2MAFXWfMxsG9jlLHm4ERD9pJW5WFX785ZHmuxL+TcBwW8HRO0BGw9T6fysW2wyH5BRPV326XQfIKB+D+4HD0ucF835PZi85kpAAhKZ0t1+CZBSJioZ2lW0saXcWrLcpOiPzTd0G++i6cmfAaJuLrZWJFTEeakaEL4UkAC2EMjFgIQvAmTZolMFJHdIaOwNNlaNClnXmWwCuVIwhG4CBNXVUmtFQkWcl8xzT+nM+2WAJEdXxasBwQIg+H2AcHH/YGEiTO763KpChL4v5rzhPYCA3kgLIKXDUPZ1B7WA8IWARKx5ws8CErJdGXQrOwMI6UNRVXMlx1NtZwLlWfFwByBBVyBrRZa0De8KUZwGyZQFuwsB2ep9jKcDEh4BSH7XIdBPgcIKQKLJEiu9YpfRabzvIkDA8L4uB4gW5+VKQPhKQMaNYHAapvh8DYIPBCQs7a6b2fpEWL6OzO2VbEy5X7gv9hy8AZB059WoDL9U3Ih5D4h56mksC3YXAhLWRGkwjGr/CSBLcDKi6jSwbUYxp25idScOBUAiNwQAmgGJZBkScEXCHucNlYDwlYAk69OCYej5TwBZgpPFgU9wQsBYf2ZDKLCUsCYUpCJA1ggIEpsM87Uie3ucF+1hEexzx/2cCcjwnSEujyJ7feJWfhGQoG/hewSEeqsKYaMKCVIl5TGCeCkgXcUHJxVpj/NWAGJQ3J8BstlBD/RnQGeSpwOSnFSmhjLROE042CWRm/JNgnAEeLZpuCYb63NAGA2P73trnLfTpkHuBQRToB2QnV/Bpli/3Uc/tC5XtdMx2TwbIQv9nYAU+Ugr0hrnjV8FyGanRgfkEJzs9Tjv3kvniqi6PdqU3cagy7QMV/FxNSBJRdrjvOVpEAfk7wEJyQimnkS1b7CqGuS6ltqVtMuAV8fHGT5IwU6MyS32OC9/KyDsgByCk70e56Wuxq9oVSFrBn4WEGhJgTzJSZeDAmlF2uO8dQPSDYBw8ihyQJJpkF467LngpWNfU4UVESc49K4uW+LbAZFbaFMsc5xXKdD9gKRnW6ADsoneG+K8fd3sH7aqkCWDMh4BYVum0CmAMAAYrSxqAQQV+/P+KNbUpuiAHIOTljBW5UIobktZXLsGHQDBtlWK7ROFPYIF801FWuO82trIjT2WTMBdCAiuL26vT/g5QNgICNV1eKyICufrOO4B4VY+PsjFIsOU56bvlsIdm30LKqr7XXmRLweErD76fwLI5nY9zkuVc3/tKmTKW6TtvlgRP8xVbUtWRP2zOf1Ea5xXW7l8KAtdCEhy6GG0NG8DIPHhgOhxXqzzKeIHKmQaLcMWkGb98Vm6O6kqZFOR0QhIVwtIvDIXa7UlyOJh/uyCqSgFJw1x3r7S6Y5VceGcDoENINSsPz5cUcjKd28r0hrn1aryWBa4OllxGJHY4mH+F0tutzFTPc6rdpRyHKZuf5NRh6RnFEaufshJgGiLUXeAGMNYmmrNpN5fCAjMX4CmwezKTRu+BhDaFqhB6dsMJesyzsxMIySAUGUC73mAHNbKlqK89YDYywIXrwd5/5I74+7glwHS3wwIaYAEtV0bAWnONxkJ4blsSxyaW/k4b1+s0mmCsa+K8yrVkilLuA6Q+cAJslnD/wUgu8C6DgjWAhKbJwvn7kArIAjN+uPMrUdRifLa47xKu+fKAt2lS26nyRmODkjSWNzrA9+mEis6e9Pi9PV9ExJd/7FcujfvriKtcd4GQC7cWVHfHO9CQL5zb97d3XVxXhsgaLK21e/+a0CUBcm7iqyM81JNWeDaXU1sWUT9/7G7e9iVVe/+9YD0bSsLvw2QcgBjX5GVcd4qQK7b3Z2qmvZ/OB9kF5yszOc1AoKfuOlfCQhoUd7aMBZWzslcBEjdtvkXAsLfAgjtK18d1RoA2UV6wy8CQhk76DJA1iNWIlBFTwIy9i77QfSfAHLWIZ6AnwMCCiDB0K52QOLuZBv6yE1/JiB1cd5YWZa1NSqOYEO96rnGDP4SQGrqwAQIycHJkwDBXQ2HE2ysLwfkUJF1cd6+EZCqQzxJB4RqAilfck463AAI95aBrwIQKMVt8HcBYVM9gXWe8NxjoFkFpG6x5oWAUN/8WecCcrgZzwGkK1nd9IOAHC6Uwh32DSoVQEJX0TmCat0uW5LRgwDB7gxAunJsH+z93whIKBgV/HuALOd3rrtv1sR5qREQqugckVRAuM5NbAEE5X7QCAhcCQgua6NnoZMAKcW4m+JY3w0IFldlq2GsVkC4pnOw1vFpUz261v8UEPnIl/zWbbbP+hyQYG1X+gAQ6AtuOv7ngARrlFcBJHYVnSNommHfsume3dkMuJMB6ZoACd0ZgAShWA073BgB4VLghn4OkHJFqnHeRkCwpnOQAkg8ZIEE5TDhFkB6GyChb/6sJkAkbuEyQPZm1KYELRm53w0I1AHCtuVSGiBQ0zm0bRimxSCcugdQHNA+BiTUo6N/1seAgLld+RNAKO/FNicsPhoQLc7btwFS0zmC4nyHaQqd0qmbyfLo43mAiCtSQxMgx89qAkQKrnHdwFcDCJT6xM9pEK4DhIzTIGVAqjqHtph/Xm6Lm5cVT0RsAkR0xQtrmuUrkc4HhAq2sME0tgLCpT6BvwaIUpFKnBfaAKnqHFB+0aRA4qzqIX3/mYDQqYCMBF8GSLgQkP3F8MuAaBWpxHkbAYGKzhFML6JFafAdgJDpQlGDdOcAAvoiOWuc1wwIFawQ+jFAMPP3aVRIAYqaAKnqHKQAsu74Q6kDjacDghZA0AoInQQI5+1/yhQ0KCObGZCSjfVrgFCuQqjgZJwBCNZ0DigDgmsxN07I+YAEi5VjBgROAkRwCCnnM8NJgJQCvb8KSJA+uOzUYxMgNaNnNOV8QfIQkIe6jwAxWTnGn8y0fQxIUKK8vXXgqwKE5KHj1wABbdK4HOdtA4QrOgcqgKQ7gkPS9lj6VRsg0iWW+522DvBjQKTBm3PlUfJ57YCAPGr+GiDZiuzNcd6+BZCq0RMUQFIFmDohNwJSqN6qz2oBRGlyqCHADsjexoLfBST/12yN8zYBUjN6RiVcFtIGi0mRLwBE6EAlA6Pqs1oAgfz0fsiWJ54GiJzR+2OARHWBQzHOC02A1IyeqLwJN5WSBHrpfECCHlFFIyB4FiCCeYdq1Jk+AoT/F0CEigRjnLcNkJrOAcqbtittExuruAlpGyCCYjWu4dc/qwGQqFheaG7XOkB21/HnAcHeHO4wJjfLgFSNnlwFSGIAwAWA5PsX2PIUIGfrfAqI1KcvBwT+E0CEirTGeZsAoYrOoW53tdurYY2PQamZGwHJjxslD7XqsxoAASFNUDgRshznrQFk66aHnwUEqtzRQ1mwBRCu6BxQCch6PGQxGb8RkJjziGMp+b/qsxoA4bIJx7194KsEZLs/1s/mYoFuO2PFBIfltlDTOdgISNi2H5Yn0lsBSfsjZroVV7vWHwIi7sduiLDgZ4BsBwPDAqFnAmJIgi/FeWMDIDXmBarhANy9YbaxyjnyrYBQppTFCE7VZ9UDIllYUrvGEwERpiv7/wMQY5y3oSxV5gVZAdlvLByKPnozIDGjLbg0emqew2eAiFmlaPCJ6ENA8pFu+C1AxIq0xXm5BZAa84LVit+nas3AlC3AVkDSq3joMZkyVn1WNSAkuT9YXGdwEiDJNsj0iY/+BEDQFq/ZPw0aylJjXgTDq3hnYLCF32ZAjjhAsVNlPwu7cwAJrGR6FQGBTwFJjvKCT3z0swGJtttMgIgVaYvztgBSY16QARDajVypSxBPB+RgUCn6VPMcLIm50pMiq5H0WDPwmZZ1ZLcwCSab4i5A8CNAOFsloWYwAZM+1Ve6qZ1DW+CT3jSPZjFYAiqdHJrtSlHbPuJ2AI1cbJj8Z7GemMv6kwLUByfLEZZqQGYriz+ysE4AJNhmr8UsEPHnbAFEDmORtchh3v5SO8xiqPXMVpnqisK1LNstsULUWpmsl47DP6Ji0FV9FnTG4Drva3J/bmm0hOGO6zy5083T/VLe986m/FGQ9wxAtmswgtJVjt/Pwt9TZ3DSDy+0nHYWld2Edp0jcMXNQpPh7r+HThNZGdd3n1e4lL+j7V4ta+TQ5ZUnSRklZQZiqZeBDRDrAtMrAdkdcyUdorS/rcOYGzeSr0C9hnMvRB3VyF0NIKGKJglm2g6fNJYjqN02YehwKZS1gpIdyxWfdRiao50POdU0FNs1ytckD64ICMe/AOQ4GOdGxdyYjUL94sGc3tZkpOILoxpQs+iPNDTLHwGy0Pg+0CwsD3sV+mWHHE2FjLZC/VKhJ1ly/9TPolJvI66pGzK3a3qVbFVe/Ki2Iwo/BCQ7GKPtNhDadNAtKI6VoLxQs1NN+iN/gHcLIMXxlUw3k3wJo0WHNPJRrAMItieRVfsf25VDifqcDpn2yCAEU1VdD4gwGKPtNhC6bMi0chDHmf0LlRR0m/6Yfx6x+xSQkgsTbbdi+ZKmQ8hsiVXVQbBU0LZ8R+0fDe2qdJ89IANXe73P1NrHu7P1x7FJ1NvCflxBcTQB9YXlRUxG/bHZfeRDQPaND6IPISobjKHC89x2Ds4MnXhGHYwdsWj170f5jKUUi+2KhWsZHZLszbutdA79XwBCtg4jD1eSHQviI6WmOL6N6oqcf58RJ214Cuv3vVyRaTw4Npqs3ORLOTbjikjWI+y7ms8qXpYriOFIpvgOLHxdsIbHhlsxU+mMH3TyjzQICYK22zYb62H6++OtU2/SXxiPzzaVJfs+tN1sMG/H75v6TFg/aMuR+HnBVtUJI8nrjhrE9lnKzUG+iPi+GA3vjcV2DdbuM7duOFZ6q/Nx3ky6i8vvigPi4uKAuLg4IC4uDoiLiwPi4uKAuLg4IC4uDoiLiwPi4uKAuLi4OCAuLg6Ii4sD4uLigLi4OCAuLg6Ii4sD4uLigLi4OCAuLg6Ii4uLA+Li4oC4uDggLi4OiIuLA+Li4oC4uDggLlkJOOxHCwDrlrUuDojLeydl4DcX4+mYYcCE37uew6f7Kbs4II8XBMhi8NIoMB4O4MrEAfmP8SgeSRFo1CWtmiTOB1e7KnJAHsmH4cCvMGiSOkbe510A7A+qyZ414uKAfK9nTmuPjmWQrIxEHJSOfJyTM+KAPEeB4Pqn16Bf6P+xHw5kJVTg2J1QN8bERoEJHECveAfkaYAMolhAgXLnXa5XOSWDMMNBJLKclOjigHyHxO0Z7RG0+wcIMiogUR0vVwO1RzghDsgzANk56WT4xRD73eia5JRWMLjh79PE3cpyQJ4hm4NvLUGm2IfBl5gZiQTLYePWbg8dedTXAXmIG7LEptAehMWZkbDSURGdCh17xTsgT5EwJplUDuqYBHOH2G3NzztvTAfk93XP4nnUTpO7BnFA/gPTbKJj9j8qIIEOvAIdkP8Bj5fnEeeZczCmNUbyKJYD8tMSYVIbcXFjZo/knTWvW2Y+D+KAPLLjL553URtM0x47rz6sbvs7LTH/+3HKxA0sB+SJeNDEBs/dPKsLpshuNui1y1QcU7HGdHda0nvZ7SsH5IluBa+zGYs2ONhLY7JJV8rJLefzOh4OyDP52CcRjstAdjOAODkf+vPGFSG8ze31JbwOyEMlvDpwELyNZdCfZj6grpfHdyq917AD8miRQq+JxzHh4TaSA/J/AhIl3330OthsXbk4ID8nkLOw+q1pVVgt5eKA/LwGYYGQZKmgW1cOyH8qkbP6IaxLBcEdEAfkP5YwehrLUvL3VqRJlHZIuuJs6m5YwrnscVwH5McJyW/Vg+Nyj8lfT2ZGIh7mBN2Nd0B+VBBycGyXCmI6kT6vJ5w395lhcTvMAflNRySsnVzcu3rECDAOrOy37h22BnJCHBDXNFI645Dz6NsnOiD/tb8CpT0Sgy/4cED+b3nPmoC01U9Et7EckP9cf7xDVXO679aNH3aW8xVRDsh/7IKs+bzLrnHT+VQ0TZV4JTkg/zEfGwD2O7rb91d0cUB+0v3gEA9ex3D651uNRJ9Jd0D+c/0hI+BwOCD/u39eu5zQxQH5nwTYpwAdEBfRhvIJDgfEpeChsxtYDoiLbGH5DKAD4uKAOCAujSaW14ED4iIKdr6k1gFxKdhYyUoPD/g6IC47CbwS4hFfB8RlLxHmPRuCL4pyQFwyfgh0QAHJc04cEJe8FnnvYOIG1rfJPwEGAAoLBPDggh+JAAAAAElFTkSuQmCC',
+						w: 800,
+						h: 285
+				},
+				agency_name = 'Travel & Holidays',
+				agency_site_url = 'www.travelandholidays.com',
+				footer = agency_name + ' - ' + agency_site_url,
+
+				page_size = 'a4',
+				page_width = 210, // mm
+				page_margin = 10, // mm
+				content_width = page_width - (page_margin * 2), // available width for the content
+
+				_y, _x, // drawing coord
+				color_array, _string, lineHeight, y_correction, // some variables
+
+				vspace = 10 // standard vertical space between elements
+
+		;
+
+		// some variables
+		var can_display_preview = true, // if true a preview of the PDF can be displayed in the iframe,
+				// this value is set to false if the browser can't display the preview
+				preview_container = $('#pdf_preview'),
+				update_preview_button = $('#flyer_preview_btn'),
+				download_button = $('#flyer_download_btn');
+
+		// preview can be displayed?
+		if (navigator.msSaveBlob) { // older IE
+				update_preview_button.prop('disabled', true);
+				can_display_preview = false;
+				preview_container.replaceWith(
+						'<div class="no_iframe">' +
+						'<div>' +
+						"The preview can't be displayed" +
+						'</div>' +
+						'</div>'
+				);
+		}
+
+		// utilities
+		var hex2rgb = function(hex_string) {
+						if (/^#/.test(hex_string)) {
+								hex_string = hex_string.substr(1);
+						}
+						if (hex_string.length === 3) {
+								hex_string = hex_string.replace(/\w/, function(match) {
+										return String(match) + String(match);
+								});
+						}
+
+						return {
+								red: parseInt(hex_string.substr(0, 2), 16),
+								green: parseInt(hex_string.substr(2, 2), 16),
+								blue: parseInt(hex_string.substr(4, 2), 16)
+						};
+				},
+
+				px2mm = function(pixel) {
+						// px to inches
+						var inches = pixel / 72;
+						return inches * 25.4;
+				},
+
+				mm2px = function(millimeters) {
+						// mm to inches
+						var inches = millimeters / 25.4;
+						return inches * 72;
+				},
+
+				// function to calculate and check img sizes
+				imgSizes = function(img_w, img_h, img_mm_w) {
+						/*
+			img_w and img_h represent the original image size, in pixel
+			img_mm_w is the desidered rendered image size, in millimeters
+
+		*/
+
+						if (img_mm_w > content_width) { // this should be never used...
+								img_mm_w = content_width;
+						}
+
+						if (mm2px(img_mm_w) > img_w) {
+								throw 'The `img_mm_w` parameter is too big';
+						}
+
+						var img_mm_h = Math.round((px2mm(img_h) * img_mm_w) / px2mm(img_w));
+
+						return {
+								w: img_mm_w,
+								h: img_mm_h,
+								centered_x: (page_width - img_mm_w) / 2
+						};
+				};
+
+		try {
+
+				// image reading
+				// More info at https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
+				// for more examples about file api
+				// take a look at https://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser
+
+				var flyer_img = $('#flyer-image'),
+						img_data = null;
+
+				$('#flyer-image').change(function() {
+
+						// temporary disabling buttons while parsing image
+						update_preview_button.prop('disabled', true);
+						download_button.prop('disabled', true);
+
+						/*
+				getting the file
+
+				flyer_img[0] : transforms the jQuery reference to a DOM object
+				files[0]     : refers to the file the the user has chosen
+
+				use `console.log(user_file);` to show some info about the file
+
+			*/
+
+						var user_file = flyer_img[0].files[0];
+
+						img_data = {
+								type: user_file.type === 'image/jpeg' ? 'JPEG' : 'PNG' // maybe you should add some controls to prevent loading of other file types
+						};
+
+						var reader = new FileReader();
+						reader.onload = function(event) {
+								img_data.src = event.target.result;
+
+								// we need this to get img dimensions
+								var user_img = new Image();
+								user_img.onload = function() {
+										img_data.w = user_img.width;
+										img_data.h = user_img.height;
+
+										// restoring buttons
+										download_button.prop('disabled', false);
+										if (can_display_preview) {
+												update_preview_button.prop('disabled', false);
+										}
+								};
+								user_img.src = img_data.src;
+						};
+
+						//when the file is read it triggers the onload event above.
+						reader.readAsDataURL(user_file);
+				});
+
+				//!pdf builder
+				var createPDF = function(update_preview) {
+						/*
+				update_preview:
+					==> true: shows pdf online
+					==> false: downloads the pdf
+			*/
+
+						_y = page_margin; // vertical starting point
+
+						// form data
+						var flyer_title = $('#flyer-title').val(),
+								flyer_title_size = $('#flyer-title-size').val(),
+								flyer_title_color = $('#flyer-title-color').val(),
+								flyer_description = $('#flyer-description').val(),
+								flyer_price = $('#flyer-price').val(),
+								flyer_price_currency = $('#flyer-price-currency').val(),
+								flyer_price_color = $('#flyer-price-color').val();
+
+						var pdf = new jsPDF('p', 'mm', page_size),
+								text_baseline,
+
+								// some colors:
+								light_grey = 237,
+								grey = 128,
+								black = 0,
+								white = 255;
+
+						// Optional - set properties of the document
+						pdf.setProperties({
+								title: flyer_title,
+								subject: footer,
+								author: 'me',
+								creator: 'Flyer Builder & jsPDF'
+						});
+
+						// !logo
+						var logo_sizes = imgSizes(agency_logo.w, agency_logo.h, 60);
+						pdf.addImage(agency_logo.src, 'PNG', logo_sizes.centered_x, _y, logo_sizes.w, logo_sizes.h);
+
+						// fonts initializing
+						pdf.setFont("helvetica");
+						pdf.setFontType("bold");
+
+						// !main title
+						color_array = hex2rgb(flyer_title_color);
+						pdf.setTextColor(color_array.red, color_array.green, color_array.blue);
+
+						pdf.setFontSize(flyer_title_size);
+
+						lineHeight = px2mm(pdf.getLineHeight(flyer_title));
+
+						_y += (logo_sizes.h + vspace + lineHeight);
+
+						pdf.textAlign(flyer_title, {
+								align: "center"
+						}, 0, _y);
+
+						_y += vspace;
+
+						// !user image
+						if (img_data) {
+								var img_sizes = imgSizes(img_data.w, img_data.h, content_width);
+								pdf.addImage(img_data.src, img_data.type, img_sizes.centered_x, _y, img_sizes.w, img_sizes.h);
+								_y += img_sizes.h;
+
+						} else {
+								// if we haven't an image, a grey box with a text is added
+
+								var box_height = 80;
+
+								pdf.setFillColor(light_grey);
+								pdf.roundedRect(page_margin, _y, content_width, box_height, 5, 5, 'F');
+								pdf.setFontSize(60);
+								pdf.setTextColor(white);
+								_string = 'SPECIAL OFFER';
+								lineHeight = px2mm(pdf.getLineHeight(_string));
+
+								// y_correction: value to be added to y coord of the grey box to have text vertically centered
+								// it is empirically calculated adding 1/3 of text line height to half box height
+								y_correction = box_height / 2 + lineHeight / 3;
+
+								pdf.textAlign(_string, {
+										align: "center"
+								}, 0, _y + y_correction);
+
+								_y += box_height;
+						}
+
+						// !price
+						// first: creating a circle that overlaps the bottom side of the image
+						var circle_radius = 30;
+						color_array = hex2rgb(flyer_price_color);
+						pdf.setFillColor(color_array.red, color_array.green, color_array.blue);
+
+						// _x and _y refer to center of the circle
+						_x = content_width - circle_radius; // circle ends at `page_margin` millimeters from the image right side
+
+						pdf.circle(_x, _y, circle_radius, 'F'); // circle overlaps image for 1/2 of its height
+
+						pdf.setFontSize(60);
+						pdf.setFont("times");
+						pdf.setFontType("bold");
+
+						_string = flyer_price_currency + parseInt(flyer_price); // decimals are removed
+
+						lineHeight = px2mm(pdf.getLineHeight(_string));
+						y_correction = lineHeight / 3;
+
+						pdf.setTextColor(white);
+						pdf.textAlign(_string, {
+								align: "centerAtX"
+						}, _x, _y + y_correction);
+
+						// !description
+						if (flyer_description) {
+								pdf.setFontSize(20);
+								pdf.setFont("helvetica");
+								pdf.setFontType("italic");
+								pdf.setTextColor(grey);
+
+								var lineWidth = content_width - (circle_radius * 2) - (page_margin * 2);
+								_y += page_margin;
+
+								var line_height = 12; // mm
+
+								var description_lines = pdf.splitTextToSize(flyer_description, lineWidth);
+								//pdf.text(page_margin, _y, description_lines); // doesn't allows to change line spacing
+
+								for (var i = 0; i < description_lines.length; i++) {
+										pdf.text(page_margin, _y, description_lines[i]);
+										_y += line_height;
+								}
+
+						}
+
+						// !footer
+						_y = 287;
+						pdf.setFontSize(9);
+						pdf.setFontType("normal");
+						pdf.setTextColor(black);
+						pdf.textAlign(footer, {
+								align: "center"
+						}, 0, _y);
+
+						// ****************************
+						// output
+						if (update_preview) {
+								preview_container.attr('src', pdf.output('datauristring'));
+						} else {
+								pdf.save('flyer ' + flyer_title + '.pdf');
+						}
+
+				}; // end createPDF
+
+				// !buttons
+				update_preview_button.click(function() {
+						createPDF(true);
+				});
+
+				$('#flyer_download_btn').click(function() {
+						createPDF(false);
+				});
+
+		} catch (e) {
+				console.log(e);
+		}
+
+})();
\ No newline at end of file
diff --git a/pdf-flyer-generator/src/style.less b/pdf-flyer-generator/src/style.less
new file mode 100644
index 0000000..4d237da
--- /dev/null
+++ b/pdf-flyer-generator/src/style.less
@@ -0,0 +1,32 @@
+.flyer-builder {
+	position: relative;
+	height: 100%;
+
+
+	& iframe,
+	.no_iframe {
+		width:100%;
+		height:400px;
+		border:1px solid #666;
+		background-color: #ddd;
+	}
+
+	& .no_iframe {
+		& > div {
+			//margin:0 .3em;
+			width:80%;
+			position: absolute;
+			top:50%;
+			left:50%;
+			transform: translate(-50%, -50%);
+			font-weight: normal;
+		}
+	}
+
+	@media all and (min-width:768px) {
+		& .btn.btn-block {
+			display: inline;
+			width: auto;
+		}
+	}
+}
\ No newline at end of file
diff --git a/pen-export-MbpPja/LICENSE.txt b/pen-export-MbpPja/LICENSE.txt
new file mode 100644
index 0000000..23f6110
--- /dev/null
+++ b/pen-export-MbpPja/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 by john (https://codepen.io/johnzondr/pen/MbpPja)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/pen-export-MbpPja/README.md b/pen-export-MbpPja/README.md
new file mode 100644
index 0000000..7114977
--- /dev/null
+++ b/pen-export-MbpPja/README.md
@@ -0,0 +1,4 @@
+# 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/johnzondr/pen/MbpPja](https://codepen.io/johnzondr/pen/MbpPja).
+
diff --git a/pen-export-MbpPja/index.html b/pen-export-MbpPja/index.html
new file mode 100644
index 0000000..d0d0ef0
--- /dev/null
+++ b/pen-export-MbpPja/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - A Pen by john</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="search-container">
+  <div class="search-item">one</div>
+  <div class="search-item">two</div>
+  <div class="search-item">three</div>
+  <div class="search-item">four</div>
+  <div class="search-item">five</div>
+  <div class="search-item">six</div>
+  <div class="search-item">five</div>
+  <div class="search-item">six</div>
+  <div class="search-item">one</div>
+  <div class="search-item">two</div>
+  <div class="search-item">three</div>
+  
+  <div class="search-placeholder"></div>
+  <div class="search-placeholder"></div>
+  <div class="search-placeholder"></div>
+  <div class="search-placeholder"></div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/pen-export-MbpPja/style.css b/pen-export-MbpPja/style.css
new file mode 100644
index 0000000..1b73f41
--- /dev/null
+++ b/pen-export-MbpPja/style.css
@@ -0,0 +1,29 @@
+* * {
+  box-sizing: border-box;
+}
+
+.search-container {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 900px;
+}
+
+.search-item {
+  padding: 30px 10px;
+  border: 1px solid grey;
+  text-align: center;
+  margin: 5px;
+  width: 150px;
+  flex-basis: 150px;
+  flex-grow: 1;
+}
+
+.search-placeholder {
+  width: 150px;
+  height: 2px;
+  margin: 5px;
+  background-color: red;
+  
+  flex-basis: 150px;
+  flex-grow: 1;
+}
\ No newline at end of file
diff --git a/pen-export-tqdmv/LICENSE.txt b/pen-export-tqdmv/LICENSE.txt
new file mode 100644
index 0000000..ff43fc7
--- /dev/null
+++ b/pen-export-tqdmv/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 by Anand Davaasuren (https://codepen.io/at80/pen/kyOdeK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/pen-export-tqdmv/README.md b/pen-export-tqdmv/README.md
new file mode 100644
index 0000000..9b2ec46
--- /dev/null
+++ b/pen-export-tqdmv/README.md
@@ -0,0 +1,4 @@
+# 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/at80/pen/kyOdeK](https://codepen.io/at80/pen/kyOdeK).
+
diff --git a/pen-export-tqdmv/dist/index.html b/pen-export-tqdmv/dist/index.html
new file mode 100644
index 0000000..a38d9a6
--- /dev/null
+++ b/pen-export-tqdmv/dist/index.html
@@ -0,0 +1,305 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - A Pen by Anand Davaasuren</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="sakura"></canvas>
+<div class="btnbg">
+</div>
+
+<!-- sakura shader -->
+<script id="sakura_point_vsh" type="x-shader/x_vertex">
+uniform mat4 uProjection;
+uniform mat4 uModelview;
+uniform vec3 uResolution;
+uniform vec3 uOffset;
+uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius
+uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
+
+attribute vec3 aPosition;
+attribute vec3 aEuler;
+attribute vec2 aMisc; //x:size, y:fade
+
+varying vec3 pposition;
+varying float psize;
+varying float palpha;
+varying float pdist;
+
+//varying mat3 rotMat;
+varying vec3 normX;
+varying vec3 normY;
+varying vec3 normZ;
+varying vec3 normal;
+
+varying float diffuse;
+varying float specular;
+varying float rstop;
+varying float distancefade;
+
+void main(void) {
+    // Projection is based on vertical angle
+    vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);
+    gl_Position = uProjection * pos;
+    gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;
+    
+    pposition = pos.xyz;
+    psize = aMisc.x;
+    pdist = length(pos.xyz);
+    palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);
+    
+    vec3 elrsn = sin(aEuler);
+    vec3 elrcs = cos(aEuler);
+    mat3 rotx = mat3(
+        1.0, 0.0, 0.0,
+        0.0, elrcs.x, elrsn.x,
+        0.0, -elrsn.x, elrcs.x
+    );
+    mat3 roty = mat3(
+        elrcs.y, 0.0, -elrsn.y,
+        0.0, 1.0, 0.0,
+        elrsn.y, 0.0, elrcs.y
+    );
+    mat3 rotz = mat3(
+        elrcs.z, elrsn.z, 0.0, 
+        -elrsn.z, elrcs.z, 0.0,
+        0.0, 0.0, 1.0
+    );
+    mat3 rotmat = rotx * roty * rotz;
+    normal = rotmat[2];
+    
+    mat3 trrotm = mat3(
+        rotmat[0][0], rotmat[1][0], rotmat[2][0],
+        rotmat[0][1], rotmat[1][1], rotmat[2][1],
+        rotmat[0][2], rotmat[1][2], rotmat[2][2]
+    );
+    normX = trrotm[0];
+    normY = trrotm[1];
+    normZ = trrotm[2];
+    
+    const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);
+    
+    float tmpdfs = dot(lit, normal);
+    if(tmpdfs < 0.0) {
+        normal = -normal;
+        tmpdfs = dot(lit, normal);
+    }
+    diffuse = 0.4 + tmpdfs;
+    
+    vec3 eyev = normalize(-pos.xyz);
+    if(dot(eyev, normal) > 0.0) {
+        vec3 hv = normalize(eyev + lit);
+        specular = pow(max(dot(hv, normal), 0.0), 20.0);
+    }
+    else {
+        specular = 0.0;
+    }
+    
+    rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);
+    rstop = pow(rstop, 0.5);
+    //-0.69315 = ln(0.5)
+    distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
+}
+</script>
+<script id="sakura_point_fsh" type="x-shader/x_fragment">
+#ifdef GL_ES
+//precision mediump float;
+precision highp float;
+#endif
+
+uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius
+uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
+
+const vec3 fadeCol = vec3(0.08, 0.03, 0.06);
+
+varying vec3 pposition;
+varying float psize;
+varying float palpha;
+varying float pdist;
+
+//varying mat3 rotMat;
+varying vec3 normX;
+varying vec3 normY;
+varying vec3 normZ;
+varying vec3 normal;
+
+varying float diffuse;
+varying float specular;
+varying float rstop;
+varying float distancefade;
+
+float ellipse(vec2 p, vec2 o, vec2 r) {
+    vec2 lp = (p - o) / r;
+    return length(lp) - 1.0;
+}
+
+void main(void) {
+    vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;
+    vec3 d = vec3(0.0, 0.0, -1.0);
+    float nd = normZ.z; //dot(-normZ, d);
+    if(abs(nd) < 0.0001) discard;
+    
+    float np = dot(normZ, p);
+    vec3 tp = p + d * np / nd;
+    vec2 coord = vec2(dot(normX, tp), dot(normY, tp));
+    
+    //angle = 15 degree
+    const float flwrsn = 0.258819045102521;
+    const float flwrcs = 0.965925826289068;
+    mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);
+    vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;
+    
+    float r;
+    if(flwrp.x < 0.0) {
+        r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);
+    }
+    else {
+        r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);
+    }
+    
+    if(r > rstop) discard;
+    
+    vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);
+    float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));
+    col *= vec3(1.0, grady, grady);
+    col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));
+    col = col * diffuse + specular;
+    
+    col = mix(fadeCol, col, distancefade);
+    
+    float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;
+    alpha = smoothstep(0.0, 1.0, alpha) * palpha;
+    
+    gl_FragColor = vec4(col * 0.5, alpha);
+}
+</script>
+<!-- effects -->
+<script id="fx_common_vsh" type="x-shader/x_vertex">
+uniform vec3 uResolution;
+attribute vec2 aPosition;
+
+varying vec2 texCoord;
+varying vec2 screenCoord;
+
+void main(void) {
+    gl_Position = vec4(aPosition, 0.0, 1.0);
+    texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
+    screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
+}
+</script>
+<script id="bg_fsh" type="x-shader/x_fragment">
+#ifdef GL_ES
+//precision mediump float;
+precision highp float;
+#endif
+
+uniform vec2 uTimes;
+
+varying vec2 texCoord;
+varying vec2 screenCoord;
+
+void main(void) {
+    vec3 col;
+    float c;
+    vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
+    c = exp(-pow(length(tmpv) * 1.8, 2.0));
+    col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
+    gl_FragColor = vec4(col * 0.5, 1.0);
+}
+</script>
+<script id="fx_brightbuf_fsh" type="x-shader/x_fragment">
+#ifdef GL_ES
+//precision mediump float;
+precision highp float;
+#endif
+uniform sampler2D uSrc;
+uniform vec2 uDelta;
+
+varying vec2 texCoord;
+varying vec2 screenCoord;
+
+void main(void) {
+    vec4 col = texture2D(uSrc, texCoord);
+    gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
+}
+</script>
+<script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">
+#ifdef GL_ES
+//precision mediump float;
+precision highp float;
+#endif
+uniform sampler2D uSrc;
+uniform vec2 uDelta;
+uniform vec4 uBlurDir; //dir(x, y), stride(z, w)
+
+varying vec2 texCoord;
+varying vec2 screenCoord;
+
+void main(void) {
+    vec4 col = texture2D(uSrc, texCoord);
+    col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);
+    col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);
+    col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);
+    col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);
+    gl_FragColor = col / 5.0;
+}
+</script>
+<!-- effect fragment shader template -->
+<script id="fx_common_fsh" type="x-shader/x_fragment">
+#ifdef GL_ES
+//precision mediump float;
+precision highp float;
+#endif
+uniform sampler2D uSrc;
+uniform vec2 uDelta;
+
+varying vec2 texCoord;
+varying vec2 screenCoord;
+
+void main(void) {
+    gl_FragColor = texture2D(uSrc, texCoord);
+}
+</script>
+<!-- post processing -->
+<script id="pp_final_vsh" type="x-shader/x_vertex">
+uniform vec3 uResolution;
+attribute vec2 aPosition;
+varying vec2 texCoord;
+varying vec2 screenCoord;
+void main(void) {
+    gl_Position = vec4(aPosition, 0.0, 1.0);
+    texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
+    screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
+}
+</script>
+<script id="pp_final_fsh" type="x-shader/x_fragment">
+#ifdef GL_ES
+//precision mediump float;
+precision highp float;
+#endif
+uniform sampler2D uSrc;
+uniform sampler2D uBloom;
+uniform vec2 uDelta;
+varying vec2 texCoord;
+varying vec2 screenCoord;
+void main(void) {
+    vec4 srccol = texture2D(uSrc, texCoord) * 2.0;
+    vec4 bloomcol = texture2D(uBloom, texCoord);
+    vec4 col;
+    col = srccol + bloomcol * (vec4(1.0) + srccol);
+    col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);
+    col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)
+    
+    gl_FragColor = vec4(col.rgb, 1.0);
+    gl_FragColor.a = 1.0;
+}
+</script>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/pen-export-tqdmv/dist/script.js b/pen-export-tqdmv/dist/script.js
new file mode 100644
index 0000000..f84c927
--- /dev/null
+++ b/pen-export-tqdmv/dist/script.js
@@ -0,0 +1,802 @@
+// Utilities
+var Vector3 = {};
+var Matrix44 = {};
+Vector3.create = function(x, y, z) {
+    return {'x':x, 'y':y, 'z':z};
+};
+Vector3.dot = function (v0, v1) {
+    return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;
+};
+Vector3.cross = function (v, v0, v1) {
+    v.x = v0.y * v1.z - v0.z * v1.y;
+    v.y = v0.z * v1.x - v0.x * v1.z;
+    v.z = v0.x * v1.y - v0.y * v1.x;
+};
+Vector3.normalize = function (v) {
+    var l = v.x * v.x + v.y * v.y + v.z * v.z;
+    if(l > 0.00001) {
+        l = 1.0 / Math.sqrt(l);
+        v.x *= l;
+        v.y *= l;
+        v.z *= l;
+    }
+};
+Vector3.arrayForm = function(v) {
+    if(v.array) {
+        v.array[0] = v.x;
+        v.array[1] = v.y;
+        v.array[2] = v.z;
+    }
+    else {
+        v.array = new Float32Array([v.x, v.y, v.z]);
+    }
+    return v.array;
+};
+Matrix44.createIdentity = function () {
+    return new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]);
+};
+Matrix44.loadProjection = function (m, aspect, vdeg, near, far) {
+    var h = near * Math.tan(vdeg * Math.PI / 180.0 * 0.5) * 2.0;
+    var w = h * aspect;
+    
+    m[0] = 2.0 * near / w;
+    m[1] = 0.0;
+    m[2] = 0.0;
+    m[3] = 0.0;
+    
+    m[4] = 0.0;
+    m[5] = 2.0 * near / h;
+    m[6] = 0.0;
+    m[7] = 0.0;
+    
+    m[8] = 0.0;
+    m[9] = 0.0;
+    m[10] = -(far + near) / (far - near);
+    m[11] = -1.0;
+    
+    m[12] = 0.0;
+    m[13] = 0.0;
+    m[14] = -2.0 * far * near / (far - near);
+    m[15] = 0.0;
+};
+Matrix44.loadLookAt = function (m, vpos, vlook, vup) {
+    var frontv = Vector3.create(vpos.x - vlook.x, vpos.y - vlook.y, vpos.z - vlook.z);
+    Vector3.normalize(frontv);
+    var sidev = Vector3.create(1.0, 0.0, 0.0);
+    Vector3.cross(sidev, vup, frontv);
+    Vector3.normalize(sidev);
+    var topv = Vector3.create(1.0, 0.0, 0.0);
+    Vector3.cross(topv, frontv, sidev);
+    Vector3.normalize(topv);
+    
+    m[0] = sidev.x;
+    m[1] = topv.x;
+    m[2] = frontv.x;
+    m[3] = 0.0;
+    
+    m[4] = sidev.y;
+    m[5] = topv.y;
+    m[6] = frontv.y;
+    m[7] = 0.0;
+    
+    m[8] = sidev.z;
+    m[9] = topv.z;
+    m[10] = frontv.z;
+    m[11] = 0.0;
+    
+    m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);
+    m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);
+    m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);
+    m[15] = 1.0;
+};
+
+//
+var timeInfo = {
+    'start':0, 'prev':0, // Date
+    'delta':0, 'elapsed':0 // Number(sec)
+};
+
+//
+var gl;
+var renderSpec = {
+    'width':0,
+    'height':0,
+    'aspect':1,
+    'array':new Float32Array(3),
+    'halfWidth':0,
+    'halfHeight':0,
+    'halfArray':new Float32Array(3)
+    // and some render targets. see setViewport()
+};
+renderSpec.setSize = function(w, h) {
+    renderSpec.width = w;
+    renderSpec.height = h;
+    renderSpec.aspect = renderSpec.width / renderSpec.height;
+    renderSpec.array[0] = renderSpec.width;
+    renderSpec.array[1] = renderSpec.height;
+    renderSpec.array[2] = renderSpec.aspect;
+    
+    renderSpec.halfWidth = Math.floor(w / 2);
+    renderSpec.halfHeight = Math.floor(h / 2);
+    renderSpec.halfArray[0] = renderSpec.halfWidth;
+    renderSpec.halfArray[1] = renderSpec.halfHeight;
+    renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;
+};
+
+function deleteRenderTarget(rt) {
+    gl.deleteFramebuffer(rt.frameBuffer);
+    gl.deleteRenderbuffer(rt.renderBuffer);
+    gl.deleteTexture(rt.texture);
+}
+
+function createRenderTarget(w, h) {
+    var ret = {
+        'width':w,
+        'height':h,
+        'sizeArray':new Float32Array([w, h, w / h]),
+        'dtxArray':new Float32Array([1.0 / w, 1.0 / h])
+    };
+    ret.frameBuffer = gl.createFramebuffer();
+    ret.renderBuffer = gl.createRenderbuffer();
+    ret.texture = gl.createTexture();
+    
+    gl.bindTexture(gl.TEXTURE_2D, ret.texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    
+    gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, ret.texture, 0);
+    
+    gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);
+    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);
+    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, ret.renderBuffer);
+    
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    
+    return ret;
+}
+
+function compileShader(shtype, shsrc) {
+	var retsh = gl.createShader(shtype);
+	
+	gl.shaderSource(retsh, shsrc);
+	gl.compileShader(retsh);
+	
+	if(!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {
+		var errlog = gl.getShaderInfoLog(retsh);
+		gl.deleteShader(retsh);
+		console.error(errlog);
+		return null;
+	}
+	return retsh;
+}
+
+function createShader(vtxsrc, frgsrc, uniformlist, attrlist) {
+    var vsh = compileShader(gl.VERTEX_SHADER, vtxsrc);
+    var fsh = compileShader(gl.FRAGMENT_SHADER, frgsrc);
+    
+    if(vsh == null || fsh == null) {
+        return null;
+    }
+    
+    var prog = gl.createProgram();
+    gl.attachShader(prog, vsh);
+    gl.attachShader(prog, fsh);
+    
+    gl.deleteShader(vsh);
+    gl.deleteShader(fsh);
+    
+    gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+        var errlog = gl.getProgramInfoLog(prog);
+        console.error(errlog);
+        return null;
+    }
+    
+    if(uniformlist) {
+        prog.uniforms = {};
+        for(var i = 0; i < uniformlist.length; i++) {
+            prog.uniforms[uniformlist[i]] = gl.getUniformLocation(prog, uniformlist[i]);
+        }
+    }
+    
+    if(attrlist) {
+        prog.attributes = {};
+        for(var i = 0; i < attrlist.length; i++) {
+            var attr = attrlist[i];
+            prog.attributes[attr] = gl.getAttribLocation(prog, attr);
+        }
+    }
+    
+    return prog;
+}
+
+function useShader(prog) {
+    gl.useProgram(prog);
+    for(var attr in prog.attributes) {
+        gl.enableVertexAttribArray(prog.attributes[attr]);;
+    }
+}
+
+function unuseShader(prog) {
+    for(var attr in prog.attributes) {
+        gl.disableVertexAttribArray(prog.attributes[attr]);;
+    }
+    gl.useProgram(null);
+}
+
+/////
+var projection = {
+    'angle':60,
+    'nearfar':new Float32Array([0.1, 100.0]),
+    'matrix':Matrix44.createIdentity()
+};
+var camera = {
+    'position':Vector3.create(0, 0, 100),
+    'lookat':Vector3.create(0, 0, 0),
+    'up':Vector3.create(0, 1, 0),
+    'dof':Vector3.create(10.0, 4.0, 8.0),
+    'matrix':Matrix44.createIdentity()
+};
+
+var pointFlower = {};
+var meshFlower = {};
+var sceneStandBy = false;
+
+var BlossomParticle = function () {
+    this.velocity = new Array(3);
+    this.rotation = new Array(3);
+    this.position = new Array(3);
+    this.euler = new Array(3);
+    this.size = 1.0;
+    this.alpha = 1.0;
+    this.zkey = 0.0;
+};
+
+BlossomParticle.prototype.setVelocity = function (vx, vy, vz) {
+    this.velocity[0] = vx;
+    this.velocity[1] = vy;
+    this.velocity[2] = vz;
+};
+
+BlossomParticle.prototype.setRotation = function (rx, ry, rz) {
+    this.rotation[0] = rx;
+    this.rotation[1] = ry;
+    this.rotation[2] = rz;
+};
+
+BlossomParticle.prototype.setPosition = function (nx, ny, nz) {
+    this.position[0] = nx;
+    this.position[1] = ny;
+    this.position[2] = nz;
+};
+
+BlossomParticle.prototype.setEulerAngles = function (rx, ry, rz) {
+    this.euler[0] = rx;
+    this.euler[1] = ry;
+    this.euler[2] = rz;
+};
+
+BlossomParticle.prototype.setSize = function (s) {
+    this.size = s;
+};
+
+BlossomParticle.prototype.update = function (dt, et) {
+    this.position[0] += this.velocity[0] * dt;
+    this.position[1] += this.velocity[1] * dt;
+    this.position[2] += this.velocity[2] * dt;
+    
+    this.euler[0] += this.rotation[0] * dt;
+    this.euler[1] += this.rotation[1] * dt;
+    this.euler[2] += this.rotation[2] * dt;
+};
+
+function createPointFlowers() {
+    // get point sizes
+    var prm = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);
+    renderSpec.pointSize = {'min':prm[0], 'max':prm[1]};
+    
+    var vtxsrc = document.getElementById("sakura_point_vsh").textContent;
+    var frgsrc = document.getElementById("sakura_point_fsh").textContent;
+    
+    pointFlower.program = createShader(
+        vtxsrc, frgsrc,
+        ['uProjection', 'uModelview', 'uResolution', 'uOffset', 'uDOF', 'uFade'],
+        ['aPosition', 'aEuler', 'aMisc']
+    );
+    
+    useShader(pointFlower.program);
+    pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);
+    pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);
+    
+    // paramerters: velocity[3], rotate[3]
+    pointFlower.numFlowers = 1600;
+    pointFlower.particles = new Array(pointFlower.numFlowers);
+    // vertex attributes {position[3], euler_xyz[3], size[1]}
+    pointFlower.dataArray = new Float32Array(pointFlower.numFlowers * (3 + 3 + 2));
+    pointFlower.positionArrayOffset = 0;
+    pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;
+    pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;
+    
+    pointFlower.buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    
+    unuseShader(pointFlower.program);
+    
+    for(var i = 0; i < pointFlower.numFlowers; i++) {
+        pointFlower.particles[i] = new BlossomParticle();
+    }
+}
+
+function initPointFlowers() {
+    //area
+    pointFlower.area = Vector3.create(20.0, 20.0, 20.0);
+    pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;
+    
+    pointFlower.fader.x = 10.0; //env fade start
+    pointFlower.fader.y = pointFlower.area.z; //env fade half
+    pointFlower.fader.z = 0.1;  //near fade start
+    
+    //particles
+    var PI2 = Math.PI * 2.0;
+    var tmpv3 = Vector3.create(0, 0, 0);
+    var tmpv = 0;
+    var symmetryrand = function() {return (Math.random() * 2.0 - 1.0);};
+    for(var i = 0; i < pointFlower.numFlowers; i++) {
+        var tmpprtcl = pointFlower.particles[i];
+        
+        //velocity
+        tmpv3.x = symmetryrand() * 0.3 + 0.8;
+        tmpv3.y = symmetryrand() * 0.2 - 1.0;
+        tmpv3.z = symmetryrand() * 0.3 + 0.5;
+        Vector3.normalize(tmpv3);
+        tmpv = 2.0 + Math.random() * 1.0;
+        tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);
+        
+        //rotation
+        tmpprtcl.setRotation(
+            symmetryrand() * PI2 * 0.5,
+            symmetryrand() * PI2 * 0.5,
+            symmetryrand() * PI2 * 0.5
+        );
+        
+        //position
+        tmpprtcl.setPosition(
+            symmetryrand() * pointFlower.area.x,
+            symmetryrand() * pointFlower.area.y,
+            symmetryrand() * pointFlower.area.z
+        );
+        
+        //euler
+        tmpprtcl.setEulerAngles(
+            Math.random() * Math.PI * 2.0,
+            Math.random() * Math.PI * 2.0,
+            Math.random() * Math.PI * 2.0
+        );
+        
+        //size
+        tmpprtcl.setSize(0.9 + Math.random() * 0.1);
+    }
+}
+
+function renderPointFlowers() {
+    //update
+    var PI2 = Math.PI * 2.0;
+    var limit = [pointFlower.area.x, pointFlower.area.y, pointFlower.area.z];
+    var repeatPos = function (prt, cmp, limit) {
+        if(Math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {
+            //out of area
+            if(prt.position[cmp] > 0) {
+                prt.position[cmp] -= limit * 2.0;
+            }
+            else {
+                prt.position[cmp] += limit * 2.0;
+            }
+        }
+    };
+    var repeatEuler = function (prt, cmp) {
+        prt.euler[cmp] = prt.euler[cmp] % PI2;
+        if(prt.euler[cmp] < 0.0) {
+            prt.euler[cmp] += PI2;
+        }
+    };
+    
+    for(var i = 0; i < pointFlower.numFlowers; i++) {
+        var prtcl = pointFlower.particles[i];
+        prtcl.update(timeInfo.delta, timeInfo.elapsed);
+        repeatPos(prtcl, 0, pointFlower.area.x);
+        repeatPos(prtcl, 1, pointFlower.area.y);
+        repeatPos(prtcl, 2, pointFlower.area.z);
+        repeatEuler(prtcl, 0);
+        repeatEuler(prtcl, 1);
+        repeatEuler(prtcl, 2);
+        
+        prtcl.alpha = 1.0;//(pointFlower.area.z - prtcl.position[2]) * 0.5;
+        
+        prtcl.zkey = (camera.matrix[2] * prtcl.position[0]
+                    + camera.matrix[6] * prtcl.position[1]
+                    + camera.matrix[10] * prtcl.position[2]
+                    + camera.matrix[14]);
+    }
+    
+    // sort
+    pointFlower.particles.sort(function(p0, p1){return p0.zkey - p1.zkey;});
+    
+    // update data
+    var ipos = pointFlower.positionArrayOffset;
+    var ieuler = pointFlower.eulerArrayOffset;
+    var imisc = pointFlower.miscArrayOffset;
+    for(var i = 0; i < pointFlower.numFlowers; i++) {
+        var prtcl = pointFlower.particles[i];
+        pointFlower.dataArray[ipos] = prtcl.position[0];
+        pointFlower.dataArray[ipos + 1] = prtcl.position[1];
+        pointFlower.dataArray[ipos + 2] = prtcl.position[2];
+        ipos += 3;
+        pointFlower.dataArray[ieuler] = prtcl.euler[0];
+        pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];
+        pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];
+        ieuler += 3;
+        pointFlower.dataArray[imisc] = prtcl.size;
+        pointFlower.dataArray[imisc + 1] = prtcl.alpha;
+        imisc += 2;
+    }
+    
+    //draw
+    gl.enable(gl.BLEND);
+    //gl.disable(gl.DEPTH_TEST);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    
+    var prog = pointFlower.program;
+    useShader(prog);
+    
+    gl.uniformMatrix4fv(prog.uniforms.uProjection, false, projection.matrix);
+    gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);
+    gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
+    gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));
+    gl.uniform3fv(prog.uniforms.uFade, Vector3.arrayForm(pointFlower.fader));
+    
+    gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
+    
+    gl.vertexAttribPointer(prog.attributes.aPosition, 3, gl.FLOAT, false, 0, pointFlower.positionArrayOffset * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(prog.attributes.aEuler, 3, gl.FLOAT, false, 0, pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(prog.attributes.aMisc, 2, gl.FLOAT, false, 0, pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT);
+    
+    // doubler
+    for(var i = 1; i < 2; i++) {
+        var zpos = i * -2.0;
+        pointFlower.offset[0] = pointFlower.area.x * -1.0;
+        pointFlower.offset[1] = pointFlower.area.y * -1.0;
+        pointFlower.offset[2] = pointFlower.area.z * zpos;
+        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+        
+        pointFlower.offset[0] = pointFlower.area.x * -1.0;
+        pointFlower.offset[1] = pointFlower.area.y *  1.0;
+        pointFlower.offset[2] = pointFlower.area.z * zpos;
+        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+        
+        pointFlower.offset[0] = pointFlower.area.x *  1.0;
+        pointFlower.offset[1] = pointFlower.area.y * -1.0;
+        pointFlower.offset[2] = pointFlower.area.z * zpos;
+        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+        
+        pointFlower.offset[0] = pointFlower.area.x *  1.0;
+        pointFlower.offset[1] = pointFlower.area.y *  1.0;
+        pointFlower.offset[2] = pointFlower.area.z * zpos;
+        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+    }
+    
+    //main
+    pointFlower.offset[0] = 0.0;
+    pointFlower.offset[1] = 0.0;
+    pointFlower.offset[2] = 0.0;
+    gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+    gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+    
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    unuseShader(prog);
+    
+    gl.enable(gl.DEPTH_TEST);
+    gl.disable(gl.BLEND);
+}
+
+// effects
+//common util
+function createEffectProgram(vtxsrc, frgsrc, exunifs, exattrs) {
+    var ret = {};
+    var unifs = ['uResolution', 'uSrc', 'uDelta'];
+    if(exunifs) {
+        unifs = unifs.concat(exunifs);
+    }
+    var attrs = ['aPosition'];
+    if(exattrs) {
+        attrs = attrs.concat(exattrs);
+    }
+    
+    ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);
+    useShader(ret.program);
+    
+    ret.dataArray = new Float32Array([
+        -1.0, -1.0,
+         1.0, -1.0,
+        -1.0,  1.0,
+         1.0,  1.0
+    ]);
+    ret.buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);
+    
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    unuseShader(ret.program);
+    
+    return ret;
+}
+
+// basic usage
+// useEffect(prog, srctex({'texture':texid, 'dtxArray':(f32)[dtx, dty]})); //basic initialize
+// gl.uniform**(...); //additional uniforms
+// drawEffect()
+// unuseEffect(prog)
+// TEXTURE0 makes src
+function useEffect(fxobj, srctex) {
+    var prog = fxobj.program;
+    useShader(prog);
+    gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
+    
+    if(srctex != null) {
+        gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);
+        gl.uniform1i(prog.uniforms.uSrc, 0);
+        
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, srctex.texture);
+    }
+}
+function drawEffect(fxobj) {
+    gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);
+    gl.vertexAttribPointer(fxobj.program.attributes.aPosition, 2, gl.FLOAT, false, 0, 0);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+function unuseEffect(fxobj) {
+    unuseShader(fxobj.program);
+}
+
+var effectLib = {};
+function createEffectLib() {
+    
+    var vtxsrc, frgsrc;
+    //common
+    var cmnvtxsrc = document.getElementById("fx_common_vsh").textContent;
+    
+    //background
+    frgsrc = document.getElementById("bg_fsh").textContent;
+    effectLib.sceneBg = createEffectProgram(cmnvtxsrc, frgsrc, ['uTimes'], null);
+    
+    // make brightpixels buffer
+    frgsrc = document.getElementById("fx_brightbuf_fsh").textContent;
+    effectLib.mkBrightBuf = createEffectProgram(cmnvtxsrc, frgsrc, null, null);
+    
+    // direction blur
+    frgsrc = document.getElementById("fx_dirblur_r4_fsh").textContent;
+    effectLib.dirBlur = createEffectProgram(cmnvtxsrc, frgsrc, ['uBlurDir'], null);
+    
+    //final composite
+    vtxsrc = document.getElementById("pp_final_vsh").textContent;
+    frgsrc = document.getElementById("pp_final_fsh").textContent;
+    effectLib.finalComp = createEffectProgram(vtxsrc, frgsrc, ['uBloom'], null);
+}
+
+// background
+function createBackground() {
+    //console.log("create background");
+}
+function initBackground() {
+    //console.log("init background");
+}
+function renderBackground() {
+    gl.disable(gl.DEPTH_TEST);
+    
+    useEffect(effectLib.sceneBg, null);
+    gl.uniform2f(effectLib.sceneBg.program.uniforms.uTimes, timeInfo.elapsed, timeInfo.delta);
+    drawEffect(effectLib.sceneBg);
+    unuseEffect(effectLib.sceneBg);
+    
+    gl.enable(gl.DEPTH_TEST);
+}
+
+// post process
+var postProcess = {};
+function createPostProcess() {
+    //console.log("create post process");
+}
+function initPostProcess() {
+    //console.log("init post process");
+}
+
+function renderPostProcess() {
+    gl.enable(gl.TEXTURE_2D);
+    gl.disable(gl.DEPTH_TEST);
+    var bindRT = function (rt, isclear) {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);
+        gl.viewport(0, 0, rt.width, rt.height);
+        if(isclear) {
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        }
+    };
+    
+    //make bright buff
+    bindRT(renderSpec.wHalfRT0, true);
+    useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);
+    drawEffect(effectLib.mkBrightBuf);
+    unuseEffect(effectLib.mkBrightBuf);
+    
+    // make bloom
+    for(var i = 0; i < 2; i++) {
+        var p = 1.5 + 1 * i;
+        var s = 2.0 + 1 * i;
+        bindRT(renderSpec.wHalfRT1, true);
+        useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);
+        gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, p, 0.0, s, 0.0);
+        drawEffect(effectLib.dirBlur);
+        unuseEffect(effectLib.dirBlur);
+        
+        bindRT(renderSpec.wHalfRT0, true);
+        useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);
+        gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, 0.0, p, 0.0, s);
+        drawEffect(effectLib.dirBlur);
+        unuseEffect(effectLib.dirBlur);
+    }
+    
+    //display
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.viewport(0, 0, renderSpec.width, renderSpec.height);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    
+    useEffect(effectLib.finalComp, renderSpec.mainRT);
+    gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);
+    drawEffect(effectLib.finalComp);
+    unuseEffect(effectLib.finalComp);
+    
+    gl.enable(gl.DEPTH_TEST);
+}
+
+/////
+var SceneEnv = {};
+function createScene() {
+    createEffectLib();
+    createBackground();
+    createPointFlowers();
+    createPostProcess();
+    sceneStandBy = true;
+}
+
+function initScene() {
+    initBackground();
+    initPointFlowers();
+    initPostProcess();
+    
+    //camera.position.z = 17.320508;
+    camera.position.z = pointFlower.area.z + projection.nearfar[0];
+    projection.angle = Math.atan2(pointFlower.area.y, camera.position.z + pointFlower.area.z) * 180.0 / Math.PI * 2.0;
+    Matrix44.loadProjection(projection.matrix, renderSpec.aspect, projection.angle, projection.nearfar[0], projection.nearfar[1]);
+}
+
+function renderScene() {
+    //draw
+    Matrix44.loadLookAt(camera.matrix, camera.position, camera.lookat, camera.up);
+    
+    gl.enable(gl.DEPTH_TEST);
+    
+    //gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);
+    gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);
+    gl.clearColor(0.005, 0, 0.05, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    
+    renderBackground();
+    renderPointFlowers();
+    renderPostProcess();
+}
+
+/////
+function onResize(e) {
+    makeCanvasFullScreen(document.getElementById("sakura"));
+    setViewports();
+    if(sceneStandBy) {
+        initScene();
+    }
+}
+
+function setViewports() {
+    renderSpec.setSize(gl.canvas.width, gl.canvas.height);
+    
+    gl.clearColor(0.2, 0.2, 0.5, 1.0);
+    gl.viewport(0, 0, renderSpec.width, renderSpec.height);
+    
+    var rtfunc = function (rtname, rtw, rth) {
+        var rt = renderSpec[rtname];
+        if(rt) deleteRenderTarget(rt);
+        renderSpec[rtname] = createRenderTarget(rtw, rth);
+    };
+    rtfunc('mainRT', renderSpec.width, renderSpec.height);
+    rtfunc('wFullRT0', renderSpec.width, renderSpec.height);
+    rtfunc('wFullRT1', renderSpec.width, renderSpec.height);
+    rtfunc('wHalfRT0', renderSpec.halfWidth, renderSpec.halfHeight);
+    rtfunc('wHalfRT1', renderSpec.halfWidth, renderSpec.halfHeight);
+}
+
+function render() {
+    renderScene();
+}
+
+var animating = true;
+function toggleAnimation(elm) {
+    animating ^= true;
+    if(animating) animate();
+    if(elm) {
+        elm.innerHTML = animating? "Stop":"Start";
+    }
+}
+
+function stepAnimation() {
+    if(!animating) animate();
+}
+
+function animate() {
+    var curdate = new Date();
+    timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;
+    timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;
+    timeInfo.prev = curdate;
+    
+    if(animating) requestAnimationFrame(animate);
+    render();
+}
+
+function makeCanvasFullScreen(canvas) {
+    var b = document.body;
+	var d = document.documentElement;
+	fullw = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
+	fullh = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
+	canvas.width = fullw;
+	canvas.height = fullh;
+}
+
+window.addEventListener('load', function(e) {
+    var canvas = document.getElementById("sakura");
+    try {
+        makeCanvasFullScreen(canvas);
+        gl = canvas.getContext('experimental-webgl');
+    } catch(e) {
+        alert("WebGL not supported." + e);
+        console.error(e);
+        return;
+    }
+    
+    window.addEventListener('resize', onResize);
+    
+    setViewports();
+    createScene();
+    initScene();
+    
+    timeInfo.start = new Date();
+    timeInfo.prev = timeInfo.start;
+    animate();
+});
+
+//set window.requestAnimationFrame
+(function (w, r) {
+    w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); };
+})(window, 'equestAnimationFrame');
\ No newline at end of file
diff --git a/pen-export-tqdmv/dist/style.css b/pen-export-tqdmv/dist/style.css
new file mode 100644
index 0000000..0f285d0
--- /dev/null
+++ b/pen-export-tqdmv/dist/style.css
@@ -0,0 +1,15 @@
+body {
+    padding:0;
+    margin:0;
+    overflow:hidden;
+	height: 600px;
+}
+canvas {
+    padding:0;
+    margin:0;
+}
+div.btnbg {
+    position:fixed;
+    left:0;
+    top:0;
+}
\ No newline at end of file
diff --git a/pen-export-tqdmv/src/index.html b/pen-export-tqdmv/src/index.html
new file mode 100644
index 0000000..afae28e
--- /dev/null
+++ b/pen-export-tqdmv/src/index.html
@@ -0,0 +1,290 @@
+<canvas id="sakura"></canvas>
+<div class="btnbg">
+</div>
+
+<!-- sakura shader -->
+<script id="sakura_point_vsh" type="x-shader/x_vertex">
+uniform mat4 uProjection;
+uniform mat4 uModelview;
+uniform vec3 uResolution;
+uniform vec3 uOffset;
+uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius
+uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
+
+attribute vec3 aPosition;
+attribute vec3 aEuler;
+attribute vec2 aMisc; //x:size, y:fade
+
+varying vec3 pposition;
+varying float psize;
+varying float palpha;
+varying float pdist;
+
+//varying mat3 rotMat;
+varying vec3 normX;
+varying vec3 normY;
+varying vec3 normZ;
+varying vec3 normal;
+
+varying float diffuse;
+varying float specular;
+varying float rstop;
+varying float distancefade;
+
+void main(void) {
+    // Projection is based on vertical angle
+    vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);
+    gl_Position = uProjection * pos;
+    gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;
+    
+    pposition = pos.xyz;
+    psize = aMisc.x;
+    pdist = length(pos.xyz);
+    palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);
+    
+    vec3 elrsn = sin(aEuler);
+    vec3 elrcs = cos(aEuler);
+    mat3 rotx = mat3(
+        1.0, 0.0, 0.0,
+        0.0, elrcs.x, elrsn.x,
+        0.0, -elrsn.x, elrcs.x
+    );
+    mat3 roty = mat3(
+        elrcs.y, 0.0, -elrsn.y,
+        0.0, 1.0, 0.0,
+        elrsn.y, 0.0, elrcs.y
+    );
+    mat3 rotz = mat3(
+        elrcs.z, elrsn.z, 0.0, 
+        -elrsn.z, elrcs.z, 0.0,
+        0.0, 0.0, 1.0
+    );
+    mat3 rotmat = rotx * roty * rotz;
+    normal = rotmat[2];
+    
+    mat3 trrotm = mat3(
+        rotmat[0][0], rotmat[1][0], rotmat[2][0],
+        rotmat[0][1], rotmat[1][1], rotmat[2][1],
+        rotmat[0][2], rotmat[1][2], rotmat[2][2]
+    );
+    normX = trrotm[0];
+    normY = trrotm[1];
+    normZ = trrotm[2];
+    
+    const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);
+    
+    float tmpdfs = dot(lit, normal);
+    if(tmpdfs < 0.0) {
+        normal = -normal;
+        tmpdfs = dot(lit, normal);
+    }
+    diffuse = 0.4 + tmpdfs;
+    
+    vec3 eyev = normalize(-pos.xyz);
+    if(dot(eyev, normal) > 0.0) {
+        vec3 hv = normalize(eyev + lit);
+        specular = pow(max(dot(hv, normal), 0.0), 20.0);
+    }
+    else {
+        specular = 0.0;
+    }
+    
+    rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);
+    rstop = pow(rstop, 0.5);
+    //-0.69315 = ln(0.5)
+    distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
+}
+</script>
+<script id="sakura_point_fsh" type="x-shader/x_fragment">
+#ifdef GL_ES
+//precision mediump float;
+precision highp float;
+#endif
+
+uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius
+uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
+
+const vec3 fadeCol = vec3(0.08, 0.03, 0.06);
+
+varying vec3 pposition;
+varying float psize;
+varying float palpha;
+varying float pdist;
+
+//varying mat3 rotMat;
+varying vec3 normX;
+varying vec3 normY;
+varying vec3 normZ;
+varying vec3 normal;
+
+varying float diffuse;
+varying float specular;
+varying float rstop;
+varying float distancefade;
+
+float ellipse(vec2 p, vec2 o, vec2 r) {
+    vec2 lp = (p - o) / r;
+    return length(lp) - 1.0;
+}
+
+void main(void) {
+    vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;
+    vec3 d = vec3(0.0, 0.0, -1.0);
+    float nd = normZ.z; //dot(-normZ, d);
+    if(abs(nd) < 0.0001) discard;
+    
+    float np = dot(normZ, p);
+    vec3 tp = p + d * np / nd;
+    vec2 coord = vec2(dot(normX, tp), dot(normY, tp));
+    
+    //angle = 15 degree
+    const float flwrsn = 0.258819045102521;
+    const float flwrcs = 0.965925826289068;
+    mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);
+    vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;
+    
+    float r;
+    if(flwrp.x < 0.0) {
+        r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);
+    }
+    else {
+        r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);
+    }
+    
+    if(r > rstop) discard;
+    
+    vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);
+    float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));
+    col *= vec3(1.0, grady, grady);
+    col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));
+    col = col * diffuse + specular;
+    
+    col = mix(fadeCol, col, distancefade);
+    
+    float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;
+    alpha = smoothstep(0.0, 1.0, alpha) * palpha;
+    
+    gl_FragColor = vec4(col * 0.5, alpha);
+}
+</script>
+<!-- effects -->
+<script id="fx_common_vsh" type="x-shader/x_vertex">
+uniform vec3 uResolution;
+attribute vec2 aPosition;
+
+varying vec2 texCoord;
+varying vec2 screenCoord;
+
+void main(void) {
+    gl_Position = vec4(aPosition, 0.0, 1.0);
+    texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
+    screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
+}
+</script>
+<script id="bg_fsh" type="x-shader/x_fragment">
+#ifdef GL_ES
+//precision mediump float;
+precision highp float;
+#endif
+
+uniform vec2 uTimes;
+
+varying vec2 texCoord;
+varying vec2 screenCoord;
+
+void main(void) {
+    vec3 col;
+    float c;
+    vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
+    c = exp(-pow(length(tmpv) * 1.8, 2.0));
+    col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
+    gl_FragColor = vec4(col * 0.5, 1.0);
+}
+</script>
+<script id="fx_brightbuf_fsh" type="x-shader/x_fragment">
+#ifdef GL_ES
+//precision mediump float;
+precision highp float;
+#endif
+uniform sampler2D uSrc;
+uniform vec2 uDelta;
+
+varying vec2 texCoord;
+varying vec2 screenCoord;
+
+void main(void) {
+    vec4 col = texture2D(uSrc, texCoord);
+    gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
+}
+</script>
+<script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">
+#ifdef GL_ES
+//precision mediump float;
+precision highp float;
+#endif
+uniform sampler2D uSrc;
+uniform vec2 uDelta;
+uniform vec4 uBlurDir; //dir(x, y), stride(z, w)
+
+varying vec2 texCoord;
+varying vec2 screenCoord;
+
+void main(void) {
+    vec4 col = texture2D(uSrc, texCoord);
+    col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);
+    col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);
+    col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);
+    col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);
+    gl_FragColor = col / 5.0;
+}
+</script>
+<!-- effect fragment shader template -->
+<script id="fx_common_fsh" type="x-shader/x_fragment">
+#ifdef GL_ES
+//precision mediump float;
+precision highp float;
+#endif
+uniform sampler2D uSrc;
+uniform vec2 uDelta;
+
+varying vec2 texCoord;
+varying vec2 screenCoord;
+
+void main(void) {
+    gl_FragColor = texture2D(uSrc, texCoord);
+}
+</script>
+<!-- post processing -->
+<script id="pp_final_vsh" type="x-shader/x_vertex">
+uniform vec3 uResolution;
+attribute vec2 aPosition;
+varying vec2 texCoord;
+varying vec2 screenCoord;
+void main(void) {
+    gl_Position = vec4(aPosition, 0.0, 1.0);
+    texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
+    screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
+}
+</script>
+<script id="pp_final_fsh" type="x-shader/x_fragment">
+#ifdef GL_ES
+//precision mediump float;
+precision highp float;
+#endif
+uniform sampler2D uSrc;
+uniform sampler2D uBloom;
+uniform vec2 uDelta;
+varying vec2 texCoord;
+varying vec2 screenCoord;
+void main(void) {
+    vec4 srccol = texture2D(uSrc, texCoord) * 2.0;
+    vec4 bloomcol = texture2D(uBloom, texCoord);
+    vec4 col;
+    col = srccol + bloomcol * (vec4(1.0) + srccol);
+    col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);
+    col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)
+    
+    gl_FragColor = vec4(col.rgb, 1.0);
+    gl_FragColor.a = 1.0;
+}
+</script>
\ No newline at end of file
diff --git a/pen-export-tqdmv/src/script.js b/pen-export-tqdmv/src/script.js
new file mode 100644
index 0000000..f84c927
--- /dev/null
+++ b/pen-export-tqdmv/src/script.js
@@ -0,0 +1,802 @@
+// Utilities
+var Vector3 = {};
+var Matrix44 = {};
+Vector3.create = function(x, y, z) {
+    return {'x':x, 'y':y, 'z':z};
+};
+Vector3.dot = function (v0, v1) {
+    return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;
+};
+Vector3.cross = function (v, v0, v1) {
+    v.x = v0.y * v1.z - v0.z * v1.y;
+    v.y = v0.z * v1.x - v0.x * v1.z;
+    v.z = v0.x * v1.y - v0.y * v1.x;
+};
+Vector3.normalize = function (v) {
+    var l = v.x * v.x + v.y * v.y + v.z * v.z;
+    if(l > 0.00001) {
+        l = 1.0 / Math.sqrt(l);
+        v.x *= l;
+        v.y *= l;
+        v.z *= l;
+    }
+};
+Vector3.arrayForm = function(v) {
+    if(v.array) {
+        v.array[0] = v.x;
+        v.array[1] = v.y;
+        v.array[2] = v.z;
+    }
+    else {
+        v.array = new Float32Array([v.x, v.y, v.z]);
+    }
+    return v.array;
+};
+Matrix44.createIdentity = function () {
+    return new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]);
+};
+Matrix44.loadProjection = function (m, aspect, vdeg, near, far) {
+    var h = near * Math.tan(vdeg * Math.PI / 180.0 * 0.5) * 2.0;
+    var w = h * aspect;
+    
+    m[0] = 2.0 * near / w;
+    m[1] = 0.0;
+    m[2] = 0.0;
+    m[3] = 0.0;
+    
+    m[4] = 0.0;
+    m[5] = 2.0 * near / h;
+    m[6] = 0.0;
+    m[7] = 0.0;
+    
+    m[8] = 0.0;
+    m[9] = 0.0;
+    m[10] = -(far + near) / (far - near);
+    m[11] = -1.0;
+    
+    m[12] = 0.0;
+    m[13] = 0.0;
+    m[14] = -2.0 * far * near / (far - near);
+    m[15] = 0.0;
+};
+Matrix44.loadLookAt = function (m, vpos, vlook, vup) {
+    var frontv = Vector3.create(vpos.x - vlook.x, vpos.y - vlook.y, vpos.z - vlook.z);
+    Vector3.normalize(frontv);
+    var sidev = Vector3.create(1.0, 0.0, 0.0);
+    Vector3.cross(sidev, vup, frontv);
+    Vector3.normalize(sidev);
+    var topv = Vector3.create(1.0, 0.0, 0.0);
+    Vector3.cross(topv, frontv, sidev);
+    Vector3.normalize(topv);
+    
+    m[0] = sidev.x;
+    m[1] = topv.x;
+    m[2] = frontv.x;
+    m[3] = 0.0;
+    
+    m[4] = sidev.y;
+    m[5] = topv.y;
+    m[6] = frontv.y;
+    m[7] = 0.0;
+    
+    m[8] = sidev.z;
+    m[9] = topv.z;
+    m[10] = frontv.z;
+    m[11] = 0.0;
+    
+    m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);
+    m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);
+    m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);
+    m[15] = 1.0;
+};
+
+//
+var timeInfo = {
+    'start':0, 'prev':0, // Date
+    'delta':0, 'elapsed':0 // Number(sec)
+};
+
+//
+var gl;
+var renderSpec = {
+    'width':0,
+    'height':0,
+    'aspect':1,
+    'array':new Float32Array(3),
+    'halfWidth':0,
+    'halfHeight':0,
+    'halfArray':new Float32Array(3)
+    // and some render targets. see setViewport()
+};
+renderSpec.setSize = function(w, h) {
+    renderSpec.width = w;
+    renderSpec.height = h;
+    renderSpec.aspect = renderSpec.width / renderSpec.height;
+    renderSpec.array[0] = renderSpec.width;
+    renderSpec.array[1] = renderSpec.height;
+    renderSpec.array[2] = renderSpec.aspect;
+    
+    renderSpec.halfWidth = Math.floor(w / 2);
+    renderSpec.halfHeight = Math.floor(h / 2);
+    renderSpec.halfArray[0] = renderSpec.halfWidth;
+    renderSpec.halfArray[1] = renderSpec.halfHeight;
+    renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;
+};
+
+function deleteRenderTarget(rt) {
+    gl.deleteFramebuffer(rt.frameBuffer);
+    gl.deleteRenderbuffer(rt.renderBuffer);
+    gl.deleteTexture(rt.texture);
+}
+
+function createRenderTarget(w, h) {
+    var ret = {
+        'width':w,
+        'height':h,
+        'sizeArray':new Float32Array([w, h, w / h]),
+        'dtxArray':new Float32Array([1.0 / w, 1.0 / h])
+    };
+    ret.frameBuffer = gl.createFramebuffer();
+    ret.renderBuffer = gl.createRenderbuffer();
+    ret.texture = gl.createTexture();
+    
+    gl.bindTexture(gl.TEXTURE_2D, ret.texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    
+    gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, ret.texture, 0);
+    
+    gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);
+    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);
+    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, ret.renderBuffer);
+    
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    
+    return ret;
+}
+
+function compileShader(shtype, shsrc) {
+	var retsh = gl.createShader(shtype);
+	
+	gl.shaderSource(retsh, shsrc);
+	gl.compileShader(retsh);
+	
+	if(!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {
+		var errlog = gl.getShaderInfoLog(retsh);
+		gl.deleteShader(retsh);
+		console.error(errlog);
+		return null;
+	}
+	return retsh;
+}
+
+function createShader(vtxsrc, frgsrc, uniformlist, attrlist) {
+    var vsh = compileShader(gl.VERTEX_SHADER, vtxsrc);
+    var fsh = compileShader(gl.FRAGMENT_SHADER, frgsrc);
+    
+    if(vsh == null || fsh == null) {
+        return null;
+    }
+    
+    var prog = gl.createProgram();
+    gl.attachShader(prog, vsh);
+    gl.attachShader(prog, fsh);
+    
+    gl.deleteShader(vsh);
+    gl.deleteShader(fsh);
+    
+    gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+        var errlog = gl.getProgramInfoLog(prog);
+        console.error(errlog);
+        return null;
+    }
+    
+    if(uniformlist) {
+        prog.uniforms = {};
+        for(var i = 0; i < uniformlist.length; i++) {
+            prog.uniforms[uniformlist[i]] = gl.getUniformLocation(prog, uniformlist[i]);
+        }
+    }
+    
+    if(attrlist) {
+        prog.attributes = {};
+        for(var i = 0; i < attrlist.length; i++) {
+            var attr = attrlist[i];
+            prog.attributes[attr] = gl.getAttribLocation(prog, attr);
+        }
+    }
+    
+    return prog;
+}
+
+function useShader(prog) {
+    gl.useProgram(prog);
+    for(var attr in prog.attributes) {
+        gl.enableVertexAttribArray(prog.attributes[attr]);;
+    }
+}
+
+function unuseShader(prog) {
+    for(var attr in prog.attributes) {
+        gl.disableVertexAttribArray(prog.attributes[attr]);;
+    }
+    gl.useProgram(null);
+}
+
+/////
+var projection = {
+    'angle':60,
+    'nearfar':new Float32Array([0.1, 100.0]),
+    'matrix':Matrix44.createIdentity()
+};
+var camera = {
+    'position':Vector3.create(0, 0, 100),
+    'lookat':Vector3.create(0, 0, 0),
+    'up':Vector3.create(0, 1, 0),
+    'dof':Vector3.create(10.0, 4.0, 8.0),
+    'matrix':Matrix44.createIdentity()
+};
+
+var pointFlower = {};
+var meshFlower = {};
+var sceneStandBy = false;
+
+var BlossomParticle = function () {
+    this.velocity = new Array(3);
+    this.rotation = new Array(3);
+    this.position = new Array(3);
+    this.euler = new Array(3);
+    this.size = 1.0;
+    this.alpha = 1.0;
+    this.zkey = 0.0;
+};
+
+BlossomParticle.prototype.setVelocity = function (vx, vy, vz) {
+    this.velocity[0] = vx;
+    this.velocity[1] = vy;
+    this.velocity[2] = vz;
+};
+
+BlossomParticle.prototype.setRotation = function (rx, ry, rz) {
+    this.rotation[0] = rx;
+    this.rotation[1] = ry;
+    this.rotation[2] = rz;
+};
+
+BlossomParticle.prototype.setPosition = function (nx, ny, nz) {
+    this.position[0] = nx;
+    this.position[1] = ny;
+    this.position[2] = nz;
+};
+
+BlossomParticle.prototype.setEulerAngles = function (rx, ry, rz) {
+    this.euler[0] = rx;
+    this.euler[1] = ry;
+    this.euler[2] = rz;
+};
+
+BlossomParticle.prototype.setSize = function (s) {
+    this.size = s;
+};
+
+BlossomParticle.prototype.update = function (dt, et) {
+    this.position[0] += this.velocity[0] * dt;
+    this.position[1] += this.velocity[1] * dt;
+    this.position[2] += this.velocity[2] * dt;
+    
+    this.euler[0] += this.rotation[0] * dt;
+    this.euler[1] += this.rotation[1] * dt;
+    this.euler[2] += this.rotation[2] * dt;
+};
+
+function createPointFlowers() {
+    // get point sizes
+    var prm = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);
+    renderSpec.pointSize = {'min':prm[0], 'max':prm[1]};
+    
+    var vtxsrc = document.getElementById("sakura_point_vsh").textContent;
+    var frgsrc = document.getElementById("sakura_point_fsh").textContent;
+    
+    pointFlower.program = createShader(
+        vtxsrc, frgsrc,
+        ['uProjection', 'uModelview', 'uResolution', 'uOffset', 'uDOF', 'uFade'],
+        ['aPosition', 'aEuler', 'aMisc']
+    );
+    
+    useShader(pointFlower.program);
+    pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);
+    pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);
+    
+    // paramerters: velocity[3], rotate[3]
+    pointFlower.numFlowers = 1600;
+    pointFlower.particles = new Array(pointFlower.numFlowers);
+    // vertex attributes {position[3], euler_xyz[3], size[1]}
+    pointFlower.dataArray = new Float32Array(pointFlower.numFlowers * (3 + 3 + 2));
+    pointFlower.positionArrayOffset = 0;
+    pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;
+    pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;
+    
+    pointFlower.buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    
+    unuseShader(pointFlower.program);
+    
+    for(var i = 0; i < pointFlower.numFlowers; i++) {
+        pointFlower.particles[i] = new BlossomParticle();
+    }
+}
+
+function initPointFlowers() {
+    //area
+    pointFlower.area = Vector3.create(20.0, 20.0, 20.0);
+    pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;
+    
+    pointFlower.fader.x = 10.0; //env fade start
+    pointFlower.fader.y = pointFlower.area.z; //env fade half
+    pointFlower.fader.z = 0.1;  //near fade start
+    
+    //particles
+    var PI2 = Math.PI * 2.0;
+    var tmpv3 = Vector3.create(0, 0, 0);
+    var tmpv = 0;
+    var symmetryrand = function() {return (Math.random() * 2.0 - 1.0);};
+    for(var i = 0; i < pointFlower.numFlowers; i++) {
+        var tmpprtcl = pointFlower.particles[i];
+        
+        //velocity
+        tmpv3.x = symmetryrand() * 0.3 + 0.8;
+        tmpv3.y = symmetryrand() * 0.2 - 1.0;
+        tmpv3.z = symmetryrand() * 0.3 + 0.5;
+        Vector3.normalize(tmpv3);
+        tmpv = 2.0 + Math.random() * 1.0;
+        tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);
+        
+        //rotation
+        tmpprtcl.setRotation(
+            symmetryrand() * PI2 * 0.5,
+            symmetryrand() * PI2 * 0.5,
+            symmetryrand() * PI2 * 0.5
+        );
+        
+        //position
+        tmpprtcl.setPosition(
+            symmetryrand() * pointFlower.area.x,
+            symmetryrand() * pointFlower.area.y,
+            symmetryrand() * pointFlower.area.z
+        );
+        
+        //euler
+        tmpprtcl.setEulerAngles(
+            Math.random() * Math.PI * 2.0,
+            Math.random() * Math.PI * 2.0,
+            Math.random() * Math.PI * 2.0
+        );
+        
+        //size
+        tmpprtcl.setSize(0.9 + Math.random() * 0.1);
+    }
+}
+
+function renderPointFlowers() {
+    //update
+    var PI2 = Math.PI * 2.0;
+    var limit = [pointFlower.area.x, pointFlower.area.y, pointFlower.area.z];
+    var repeatPos = function (prt, cmp, limit) {
+        if(Math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {
+            //out of area
+            if(prt.position[cmp] > 0) {
+                prt.position[cmp] -= limit * 2.0;
+            }
+            else {
+                prt.position[cmp] += limit * 2.0;
+            }
+        }
+    };
+    var repeatEuler = function (prt, cmp) {
+        prt.euler[cmp] = prt.euler[cmp] % PI2;
+        if(prt.euler[cmp] < 0.0) {
+            prt.euler[cmp] += PI2;
+        }
+    };
+    
+    for(var i = 0; i < pointFlower.numFlowers; i++) {
+        var prtcl = pointFlower.particles[i];
+        prtcl.update(timeInfo.delta, timeInfo.elapsed);
+        repeatPos(prtcl, 0, pointFlower.area.x);
+        repeatPos(prtcl, 1, pointFlower.area.y);
+        repeatPos(prtcl, 2, pointFlower.area.z);
+        repeatEuler(prtcl, 0);
+        repeatEuler(prtcl, 1);
+        repeatEuler(prtcl, 2);
+        
+        prtcl.alpha = 1.0;//(pointFlower.area.z - prtcl.position[2]) * 0.5;
+        
+        prtcl.zkey = (camera.matrix[2] * prtcl.position[0]
+                    + camera.matrix[6] * prtcl.position[1]
+                    + camera.matrix[10] * prtcl.position[2]
+                    + camera.matrix[14]);
+    }
+    
+    // sort
+    pointFlower.particles.sort(function(p0, p1){return p0.zkey - p1.zkey;});
+    
+    // update data
+    var ipos = pointFlower.positionArrayOffset;
+    var ieuler = pointFlower.eulerArrayOffset;
+    var imisc = pointFlower.miscArrayOffset;
+    for(var i = 0; i < pointFlower.numFlowers; i++) {
+        var prtcl = pointFlower.particles[i];
+        pointFlower.dataArray[ipos] = prtcl.position[0];
+        pointFlower.dataArray[ipos + 1] = prtcl.position[1];
+        pointFlower.dataArray[ipos + 2] = prtcl.position[2];
+        ipos += 3;
+        pointFlower.dataArray[ieuler] = prtcl.euler[0];
+        pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];
+        pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];
+        ieuler += 3;
+        pointFlower.dataArray[imisc] = prtcl.size;
+        pointFlower.dataArray[imisc + 1] = prtcl.alpha;
+        imisc += 2;
+    }
+    
+    //draw
+    gl.enable(gl.BLEND);
+    //gl.disable(gl.DEPTH_TEST);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    
+    var prog = pointFlower.program;
+    useShader(prog);
+    
+    gl.uniformMatrix4fv(prog.uniforms.uProjection, false, projection.matrix);
+    gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);
+    gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
+    gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));
+    gl.uniform3fv(prog.uniforms.uFade, Vector3.arrayForm(pointFlower.fader));
+    
+    gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
+    
+    gl.vertexAttribPointer(prog.attributes.aPosition, 3, gl.FLOAT, false, 0, pointFlower.positionArrayOffset * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(prog.attributes.aEuler, 3, gl.FLOAT, false, 0, pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(prog.attributes.aMisc, 2, gl.FLOAT, false, 0, pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT);
+    
+    // doubler
+    for(var i = 1; i < 2; i++) {
+        var zpos = i * -2.0;
+        pointFlower.offset[0] = pointFlower.area.x * -1.0;
+        pointFlower.offset[1] = pointFlower.area.y * -1.0;
+        pointFlower.offset[2] = pointFlower.area.z * zpos;
+        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+        
+        pointFlower.offset[0] = pointFlower.area.x * -1.0;
+        pointFlower.offset[1] = pointFlower.area.y *  1.0;
+        pointFlower.offset[2] = pointFlower.area.z * zpos;
+        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+        
+        pointFlower.offset[0] = pointFlower.area.x *  1.0;
+        pointFlower.offset[1] = pointFlower.area.y * -1.0;
+        pointFlower.offset[2] = pointFlower.area.z * zpos;
+        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+        
+        pointFlower.offset[0] = pointFlower.area.x *  1.0;
+        pointFlower.offset[1] = pointFlower.area.y *  1.0;
+        pointFlower.offset[2] = pointFlower.area.z * zpos;
+        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+    }
+    
+    //main
+    pointFlower.offset[0] = 0.0;
+    pointFlower.offset[1] = 0.0;
+    pointFlower.offset[2] = 0.0;
+    gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+    gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+    
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    unuseShader(prog);
+    
+    gl.enable(gl.DEPTH_TEST);
+    gl.disable(gl.BLEND);
+}
+
+// effects
+//common util
+function createEffectProgram(vtxsrc, frgsrc, exunifs, exattrs) {
+    var ret = {};
+    var unifs = ['uResolution', 'uSrc', 'uDelta'];
+    if(exunifs) {
+        unifs = unifs.concat(exunifs);
+    }
+    var attrs = ['aPosition'];
+    if(exattrs) {
+        attrs = attrs.concat(exattrs);
+    }
+    
+    ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);
+    useShader(ret.program);
+    
+    ret.dataArray = new Float32Array([
+        -1.0, -1.0,
+         1.0, -1.0,
+        -1.0,  1.0,
+         1.0,  1.0
+    ]);
+    ret.buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);
+    
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    unuseShader(ret.program);
+    
+    return ret;
+}
+
+// basic usage
+// useEffect(prog, srctex({'texture':texid, 'dtxArray':(f32)[dtx, dty]})); //basic initialize
+// gl.uniform**(...); //additional uniforms
+// drawEffect()
+// unuseEffect(prog)
+// TEXTURE0 makes src
+function useEffect(fxobj, srctex) {
+    var prog = fxobj.program;
+    useShader(prog);
+    gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
+    
+    if(srctex != null) {
+        gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);
+        gl.uniform1i(prog.uniforms.uSrc, 0);
+        
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, srctex.texture);
+    }
+}
+function drawEffect(fxobj) {
+    gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);
+    gl.vertexAttribPointer(fxobj.program.attributes.aPosition, 2, gl.FLOAT, false, 0, 0);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+function unuseEffect(fxobj) {
+    unuseShader(fxobj.program);
+}
+
+var effectLib = {};
+function createEffectLib() {
+    
+    var vtxsrc, frgsrc;
+    //common
+    var cmnvtxsrc = document.getElementById("fx_common_vsh").textContent;
+    
+    //background
+    frgsrc = document.getElementById("bg_fsh").textContent;
+    effectLib.sceneBg = createEffectProgram(cmnvtxsrc, frgsrc, ['uTimes'], null);
+    
+    // make brightpixels buffer
+    frgsrc = document.getElementById("fx_brightbuf_fsh").textContent;
+    effectLib.mkBrightBuf = createEffectProgram(cmnvtxsrc, frgsrc, null, null);
+    
+    // direction blur
+    frgsrc = document.getElementById("fx_dirblur_r4_fsh").textContent;
+    effectLib.dirBlur = createEffectProgram(cmnvtxsrc, frgsrc, ['uBlurDir'], null);
+    
+    //final composite
+    vtxsrc = document.getElementById("pp_final_vsh").textContent;
+    frgsrc = document.getElementById("pp_final_fsh").textContent;
+    effectLib.finalComp = createEffectProgram(vtxsrc, frgsrc, ['uBloom'], null);
+}
+
+// background
+function createBackground() {
+    //console.log("create background");
+}
+function initBackground() {
+    //console.log("init background");
+}
+function renderBackground() {
+    gl.disable(gl.DEPTH_TEST);
+    
+    useEffect(effectLib.sceneBg, null);
+    gl.uniform2f(effectLib.sceneBg.program.uniforms.uTimes, timeInfo.elapsed, timeInfo.delta);
+    drawEffect(effectLib.sceneBg);
+    unuseEffect(effectLib.sceneBg);
+    
+    gl.enable(gl.DEPTH_TEST);
+}
+
+// post process
+var postProcess = {};
+function createPostProcess() {
+    //console.log("create post process");
+}
+function initPostProcess() {
+    //console.log("init post process");
+}
+
+function renderPostProcess() {
+    gl.enable(gl.TEXTURE_2D);
+    gl.disable(gl.DEPTH_TEST);
+    var bindRT = function (rt, isclear) {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);
+        gl.viewport(0, 0, rt.width, rt.height);
+        if(isclear) {
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        }
+    };
+    
+    //make bright buff
+    bindRT(renderSpec.wHalfRT0, true);
+    useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);
+    drawEffect(effectLib.mkBrightBuf);
+    unuseEffect(effectLib.mkBrightBuf);
+    
+    // make bloom
+    for(var i = 0; i < 2; i++) {
+        var p = 1.5 + 1 * i;
+        var s = 2.0 + 1 * i;
+        bindRT(renderSpec.wHalfRT1, true);
+        useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);
+        gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, p, 0.0, s, 0.0);
+        drawEffect(effectLib.dirBlur);
+        unuseEffect(effectLib.dirBlur);
+        
+        bindRT(renderSpec.wHalfRT0, true);
+        useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);
+        gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, 0.0, p, 0.0, s);
+        drawEffect(effectLib.dirBlur);
+        unuseEffect(effectLib.dirBlur);
+    }
+    
+    //display
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.viewport(0, 0, renderSpec.width, renderSpec.height);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    
+    useEffect(effectLib.finalComp, renderSpec.mainRT);
+    gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);
+    drawEffect(effectLib.finalComp);
+    unuseEffect(effectLib.finalComp);
+    
+    gl.enable(gl.DEPTH_TEST);
+}
+
+/////
+var SceneEnv = {};
+function createScene() {
+    createEffectLib();
+    createBackground();
+    createPointFlowers();
+    createPostProcess();
+    sceneStandBy = true;
+}
+
+function initScene() {
+    initBackground();
+    initPointFlowers();
+    initPostProcess();
+    
+    //camera.position.z = 17.320508;
+    camera.position.z = pointFlower.area.z + projection.nearfar[0];
+    projection.angle = Math.atan2(pointFlower.area.y, camera.position.z + pointFlower.area.z) * 180.0 / Math.PI * 2.0;
+    Matrix44.loadProjection(projection.matrix, renderSpec.aspect, projection.angle, projection.nearfar[0], projection.nearfar[1]);
+}
+
+function renderScene() {
+    //draw
+    Matrix44.loadLookAt(camera.matrix, camera.position, camera.lookat, camera.up);
+    
+    gl.enable(gl.DEPTH_TEST);
+    
+    //gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);
+    gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);
+    gl.clearColor(0.005, 0, 0.05, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    
+    renderBackground();
+    renderPointFlowers();
+    renderPostProcess();
+}
+
+/////
+function onResize(e) {
+    makeCanvasFullScreen(document.getElementById("sakura"));
+    setViewports();
+    if(sceneStandBy) {
+        initScene();
+    }
+}
+
+function setViewports() {
+    renderSpec.setSize(gl.canvas.width, gl.canvas.height);
+    
+    gl.clearColor(0.2, 0.2, 0.5, 1.0);
+    gl.viewport(0, 0, renderSpec.width, renderSpec.height);
+    
+    var rtfunc = function (rtname, rtw, rth) {
+        var rt = renderSpec[rtname];
+        if(rt) deleteRenderTarget(rt);
+        renderSpec[rtname] = createRenderTarget(rtw, rth);
+    };
+    rtfunc('mainRT', renderSpec.width, renderSpec.height);
+    rtfunc('wFullRT0', renderSpec.width, renderSpec.height);
+    rtfunc('wFullRT1', renderSpec.width, renderSpec.height);
+    rtfunc('wHalfRT0', renderSpec.halfWidth, renderSpec.halfHeight);
+    rtfunc('wHalfRT1', renderSpec.halfWidth, renderSpec.halfHeight);
+}
+
+function render() {
+    renderScene();
+}
+
+var animating = true;
+function toggleAnimation(elm) {
+    animating ^= true;
+    if(animating) animate();
+    if(elm) {
+        elm.innerHTML = animating? "Stop":"Start";
+    }
+}
+
+function stepAnimation() {
+    if(!animating) animate();
+}
+
+function animate() {
+    var curdate = new Date();
+    timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;
+    timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;
+    timeInfo.prev = curdate;
+    
+    if(animating) requestAnimationFrame(animate);
+    render();
+}
+
+function makeCanvasFullScreen(canvas) {
+    var b = document.body;
+	var d = document.documentElement;
+	fullw = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
+	fullh = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
+	canvas.width = fullw;
+	canvas.height = fullh;
+}
+
+window.addEventListener('load', function(e) {
+    var canvas = document.getElementById("sakura");
+    try {
+        makeCanvasFullScreen(canvas);
+        gl = canvas.getContext('experimental-webgl');
+    } catch(e) {
+        alert("WebGL not supported." + e);
+        console.error(e);
+        return;
+    }
+    
+    window.addEventListener('resize', onResize);
+    
+    setViewports();
+    createScene();
+    initScene();
+    
+    timeInfo.start = new Date();
+    timeInfo.prev = timeInfo.start;
+    animate();
+});
+
+//set window.requestAnimationFrame
+(function (w, r) {
+    w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); };
+})(window, 'equestAnimationFrame');
\ No newline at end of file
diff --git a/pen-export-tqdmv/src/style.css b/pen-export-tqdmv/src/style.css
new file mode 100644
index 0000000..0f285d0
--- /dev/null
+++ b/pen-export-tqdmv/src/style.css
@@ -0,0 +1,15 @@
+body {
+    padding:0;
+    margin:0;
+    overflow:hidden;
+	height: 600px;
+}
+canvas {
+    padding:0;
+    margin:0;
+}
+div.btnbg {
+    position:fixed;
+    left:0;
+    top:0;
+}
\ No newline at end of file
diff --git a/phone-reflection/README.markdown b/phone-reflection/README.markdown
new file mode 100644
index 0000000..0517729
--- /dev/null
+++ b/phone-reflection/README.markdown
@@ -0,0 +1,6 @@
+# Phone Reflection
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/lukes611/pen/ZEGedby](https://codepen.io/lukes611/pen/ZEGedby).
+
+ A pen representing a person using their phone in darkness, lit in complimentary colors / textures.
+
+Click the Safari button to change to the remix texture.
\ No newline at end of file
diff --git a/phone-reflection/dist/index.html b/phone-reflection/dist/index.html
new file mode 100644
index 0000000..acee051
--- /dev/null
+++ b/phone-reflection/dist/index.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Phone Reflection</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="hint">click safari</div>
+        <div class="socials-container">
+          <!-- codepen -->
+          <a class="social-link" target="_blank" href="https://codepen.io/lukes611">
+            <div class="social-wrapper codepen">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.95 78.95">
+                <title>codepen</title>
+                <g id="codepen">
+                  <path id="code-pen-3" d="M12.66,30.35l26.5-17.51a.82.82,0,0,1,.9,0L66.41,30.48a.16.16,0,0,1,0,.26l-27,17.71L12.66,30.87A.31.31,0,0,1,12.66,30.35Z" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                  <path id="code-pen-2" d="M12.26,48.26V30.91a.56.56,0,0,1,.25-.46L39.25,12.78a.23.23,0,0,1,.36.19l-.18,17.52L66.57,48.42a0,0,0,0,0,0,0V30.94a.17.17,0,0,0-.27-.15L39.43,48.45V66a.22.22,0,0,1-.34.19L12.42,48.55A.34.34,0,0,1,12.26,48.26Z" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                  <path id="code-pen-1" d="M12.58,48.14,39.29,30.65a.38.38,0,0,1,.41,0L66.52,48.24a.36.36,0,0,1,0,.61L39.57,66.18a.36.36,0,0,1-.4,0L12.58,48.76A.37.37,0,0,1,12.58,48.14Z" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                </g>
+              </svg>
+            </div>
+          </a>
+
+          <!-- twitter -->
+          <a class="social-link" target="_blank" href="https://twitter.com/Lukes611">
+            <div class="social-wrapper twit">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.95 78.95">
+                <title>twitter</title>
+                <g id="twitter">
+                  <path id="twitter-icon" d="M39.66,28.54a.52.52,0,0,0,.51-.57c-.17-2.24-.31-10.75,7.29-14.3a14.25,14.25,0,0,1,16.22,2.5.51.51,0,0,0,.48.16,41.73,41.73,0,0,0,6.67-2.18.72.72,0,0,1,.93,1,14.81,14.81,0,0,1-3.23,4.19.52.52,0,0,0,.44.91c1.08-.21,2.39-.5,3.47-.81a.58.58,0,0,1,.6.94c-1.48,1.8-3.75,4.34-5.13,5.06a.49.49,0,0,0-.29.43c-.1,2.39-.81,18.35-9.29,26.94-8.91,9-24.37,20.73-49.2,9a.52.52,0,0,1,.19-1c3.67-.21,11.33-1.06,16.45-4.52A.75.75,0,0,0,25.51,55c-2.86-.7-8.55-3-10.64-8.8a.53.53,0,0,1,.55-.69c.65.06,1.62.12,2.55.13a.71.71,0,0,0,.36-1.32c-3.12-1.71-8.41-5.65-8.72-12a.52.52,0,0,1,.7-.51,32.7,32.7,0,0,0,3.19,1,.64.64,0,0,0,.59-1.08c-2.44-2.35-6.44-7.83-2.87-16.42a.54.54,0,0,1,.9-.13C14.47,18,24.45,28.89,39.66,28.54Z" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                </g>
+              </svg>
+            </div>
+          </a>
+
+          <!-- instagram -->
+          <a class="social-link" target="_blank" href="https://www.instagram.com/sip.wave/">
+            <div class="social-wrapper insta">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.95 78.95">
+                <title>insta</title>
+                <g id="insta">
+                  <rect id="insta-rect" x="10.03" y="10.66" width="58.89" height="57.64" rx="14.16" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                  <circle id="insta-circ" cx="39.47" cy="41.08" r="12.93" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                  <circle id="insta-circ-2" cx="57.2" cy="22.78" r="3.38" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                </g>
+              </svg>
+            </div>
+          </a>
+        </div>
+
+        <svg id="woman" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 505.12 1304.22">
+          <defs>
+            <clipPath id="clip-path">
+              <polygon points="81.08 481.05 78.65 348.32 135.46 352.49 137.88 485.22 81.08 481.05" style="fill:none" />
+            </clipPath>
+          </defs>
+          <g id="body">
+            <path id="left-leg" d="M20.93,973.44s-76.29,62.22-92.59,90.37-25.92,47.4-45.92,96.29-96.52,199.13-96.52,199.13,47.64,23.93,66.69,12c1.19-3.57,132.17-222.67,131-226.24s196.48-64.31,215.53-97.65S20.93,973.44,20.93,973.44Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="right-leg" d="M-44.13,939.49s216.22,161.08,325.51,140.76,178-58.15,158.33-185c-7-35-51.3-84-51.3-84L210.17,815,154,886.43l-169.58-62s-77.23-42-111.56,45.77-127.21,254.08-136.36,258c0,1.31,20.91,36.46,57.51,26.73,0,.72,129.46-94.18,158.84-213Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <g id="leg-crease">
+              <path d="M154.1,886.21c14.92,4.17,29.65,8.93,44.33,13.88s29.24,10.18,43.68,15.77q10.83,4.21,21.52,8.74t21.15,9.62c7,3.38,13.81,7,20.43,11,.83.51,1.66,1,2.48,1.52l2.43,1.6c.8.53,1.62,1,2.41,1.61l2.35,1.71a61.11,61.11,0,0,1,8.73,7.65h0a101.6,101.6,0,0,0-18.54-13.84c-6.62-4-13.48-7.6-20.44-11s-14-6.51-21.16-9.54-14.31-5.88-21.53-8.66c-14.45-5.54-29-10.71-43.72-15.62q-11-3.68-22.08-7.16c-7.37-2.36-14.77-4.61-22.16-6.91Z" style="fill:#f2ff7f" />
+            </g>
+            <path id="left-arm" d="M87,450.64l20,21.29-17.31,22.4c-16,91.25,24.3,137.84,24.3,137.84A539.58,539.58,0,0,1,149,559.05l20.52-11.53,53.94,5.16s-26.34,44.77-33.64,77.09-55.48,79.85-62.3,87.1-32,9.38-61.39-10.66S45.62,568.49,46.47,563.38,51.38,496.1,58.24,472V460.35Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="dark-top" d="M273,434.3l-3.94,16.06c-.09.39-1.29.77-1.65.91-5.75,2.17-52.37,19.52-59.65,35.09a1.22,1.22,0,0,0-.05.84c1.51,4.85,13.78,51.55,13.14,52.83s-24.52,51.2-25.58,53.41a1,1,0,0,1-.08.14c-.78,1.17-11.56,18.78-1.74,87.53,10.19,71.29,15.28,64.74,16.73,133.85,0,.73,91.85,36.17,177.47-3.28a1.19,1.19,0,0,0,.69-1.2c-.87-9.17-8.44-90.35,15-113.77,24-24,1.05-124.55-.29-130.29a1.23,1.23,0,0,1,0-.54c.63-2.62,6.26-22,33.26-11.2.73,2.18,1.62-40.4-33.3-55.68-34.68-15.18-28.07-29.26-43.49-68.95a1.19,1.19,0,0,0-1.17-.76l-85.39,4C272.4,433.27,273.11,433.78,273,434.3Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="highlighted-pink-top" d="M267.4,576.7l46.77-8.47c-3.22-29,88.78-2.06,88.78-2.06s-20.91-32.69,8-21.08c.73,2.18,42.92-50.22,8-65.5s-44-10-59.79-50.34l-87.14,4-4.1,17.15s-50.54,11.13-85.73,54.07c-10.13,12.36-16.25,25.1-33.37,54.54,0,0,38.68-11.11,56.71,13.72l-9.34,20C211.23,582.35,267.4,576.7,267.4,576.7Z" style="fill:#ff3fa6" />
+            <path id="highlighted-yellow-top" d="M455.86,511.72c-36.59-51.66-77.11-33-96.69-82.47L333,430.46s-15.29,9.9-17.76,15.19c1.7,45-26.34,90.8-47.79,131.05,42.83-3.51,94.89,38.44,144.86,44.07,0,0,39.26,5.29,43.6-4.78C469.81,583.54,482.26,555.89,455.86,511.72Z" style="fill:#f2ff7f" />
+            <g id="arm-crease">
+              <path d="M114.33,632c2.13,3.27,4.27,6.55,6.5,9.76q1.69,2.4,3.51,4.69a21.26,21.26,0,0,0,4.13,4.13h0A19.92,19.92,0,0,1,124,646.7c-1.32-1.46-2.54-3-3.74-4.56a105.07,105.07,0,0,1-6.59-9.77Z" style="fill:#f2ff7f" />
+            </g>
+            <path id="right-under-arm" d="M374.83,611.11s-4.66-4.43,30.15-51.22c-1.62,3.39-1.84,3.75-1.84,3.75-2.65,13.7-18.89,43-18.89,43l-3.34,7.09Z" style="opacity:0.49" />
+            <path id="left-sleeve-outline" d="M205.3,572.46s-13.77-23.3-56.47-13.38" style="fill:none;stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="arm-pit" d="M205.82,572.24l9.79-18.17-6.43-6.55s-3.26,12.8-5.22,22.42A14,14,0,0,1,205.82,572.24Z" style="opacity:0.49" />
+          </g>
+          <g id="hair-wrapper">
+            <path id="black-hair-bg" d="M171.3,426.34c2.57,2.06,12.44-4.36,12.44-4.36s3.35,15,16.55,23.67c.33.23,1.69-13.14,9.47-14.41.34-.24,9.33,14,18.19,14.51.41.47,5.82-15.77,13.94-11.37,1,.68,14.14,11.27,14.14,11.27l12-14.41,23.63-13.45s43.37-23.15,56.16-4.31,47.12,14.13,47.12,14.13c-12.95-4.68-10.77-24.23-10.77-24.23l19.51,5.39-4-20.19c11.44,12.11,33.65,8.75,33.65,8.75l-9.42-12.79c12-3.16,23.55,5.38,23.55,5.38L442,369.06l26.25,11.44c7.05-5.56-.68-25.57-.68-25.57,10.09-2.73,31,10.76,31.64,10.76-23.5-95.48-65.93-160.7-134.51-191.14-47.27-17.65-76.39-18.55-104-15.63C133,177.68,90,345.94,171.3,426.34Z" style="fill:#ff3fa6" />
+            <path id="black-hair" d="M166.76,426.34c2.57,2.06,12.45-4.36,12.45-4.36s3.34,15,16.54,23.67c.33.23,1.69-13.14,9.47-14.41.34-.24,9.33,14,18.2,14.51.4.47,5.82-15.77,13.93-11.37,1,.68,14.14,11.27,14.14,11.27l12-14.41,23.62-13.45s43.38-23.15,56.16-4.31,47.12,14.13,47.12,14.13c-12.95-4.68-10.77-24.23-10.77-24.23l19.52,5.39-4-20.19c11.44,12.11,33.65,8.75,33.65,8.75l-9.42-12.79c12-3.16,23.55,5.38,23.55,5.38l-5.38-20.86,26.25,11.44c7.06-5.56-.68-25.57-.68-25.57,10.1-2.73,31,10.76,31.64,10.76C471.2,270.21,428.78,205,360.19,174.55c-47.27-17.65-76.39-18.55-104-15.63C128.47,177.68,85.48,345.94,166.76,426.34Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="bottom-right-yellow-hair" d="M430.51,271.39a33,33,0,0,0-25.94-8.81s4.26,15-2.86,20.4c-11.86-6.12-25.25-5.37-25.25-5.37s9.7,13.69,6.92,17.48c-8.38-6.71-19.57-.35-20.06,11.45-4.48-19.84-24.51-10.17-24.51-10.17s-4.57-33.36-24.23-50c0,0,17.05-4,29.83,5.1,2.55-7-6.33-15.9-6.33-15.9s13.63-2.17,18.33,3.46c6.9-5.72-.35-19.37-.35-19.37s13.92.61,15.16,6.39c4.34-.23,5.1-14.5,2-24.71C418.88,216.66,430.33,254,430.51,271.39Z" style="fill:#f2ff7f" />
+            <path id="bottom-right-pink-hair" d="M479.86,339.76s-15.66,2.15-21.46-5.36c-15.39,4.05-7.08,21.29-7.08,21.29s-22.76-8.57-28.32-4.41l2.48,21.41s-16.66-.36-28-9.38c-5.71,6.45,5.31,13.62,5.31,13.62a29.13,29.13,0,0,1-20.53,0c-2.57,2.57,0,14.52,0,14.52l-12.75-3.9c-5.81,6-5.39,27.21-5.39,27.21s-16.57-33.56-19.74-63.48c4.73-9.37,16.78-.37,19.82-4.44,2.61-3.47-1.06-17.34-1.06-17.34s16.29,5.69,20.18,2.43c-3.8-6.23,1.06-19.31,1.06-19.31s19.92,8.45,23.37,3.64c-9.26-4.95-9.92-19-9.92-19s17.71,6.61,21.6,2.8c-11.3-4.47-2.83-25.81-2.83-25.81s11.54,16.75,19.87,7.91c4.72-4.28,2.53-26.48,2.53-26.48S465.52,282.75,479.86,339.76Z" style="fill:#ff3fa6" />
+            <path id="right-center-hair-line" d="M244.63,226.09s35.18-25,52.09-5.89l-8.91-12.47s31.6-1.33,35.16,14.69C323,222.42,304.8,161,244.63,226.09Z" style="fill:#f2ff7f" />
+            <path id="pink-top-hair-line" d="M237.35,189.66s3.28-25.11,23-23.91c0,0-14.24,9.42-8.61,11.93,0,0,7.45-.86,11.09,0A39.09,39.09,0,0,0,237.35,189.66Z" style="fill:#ff3fa6" />
+            <path id="left-hair-line-top" d="M202.29,207.23s-19.34,4.3-20.87,15.34c0,0-7.37-5.21,0-16.87-.31,0-6.1-3.51-8.88,4.38" style="fill:none;stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="medium-left-pink" d="M131.38,296.47l14.5-8.07,5.23,5.19,9-5.19,5.08,5.94,1.58-12.62-5.21,2.18-8.7-11.32L151.69,282l-15.34-9.43C132.29,281.74,131.38,296.47,131.38,296.47Z" style="fill:#ff3fa6" />
+            <path id="bottom-left-yellow" d="M151,352.81c1.89,3.21,2.32,7.26,13.95,5,0,0,.36,12.92,16.3,26.55,0,0-14.77-.78-17.8-4-.2-.1,1.21,15.79,4.45,16.6.1-.1-9.41-1.41-11.13-3.54,0,.2-2.63,9.72,0,12.25.1.3-22.77-30.06-22.07-56.78.11.3,7.06,18,12.17,14.87C144.87,362.26,149.37,358.92,151,352.81Z" style="fill:#f2ff7f" />
+          </g>
+          <g id="face-wrapper">
+            <path id="pink-face" d="M173.41,263.37s8.56-45.94,40.48-35.82,21.81,9.34,35.82,4.67,37.37-3,48.27,12.51,25.7,56,25.7,64.58l7.51,1.72s8.56-14.51,17.49-13,15.62,17.49,8.55,29.4-14.88,14.88-24.55,13c.37.37,27.51,92.28,27.51,92.28s-45.74,27.53-88.53,2.6c.37,0,3.34-27.16,3.34-27.16s-27.9,13.39-38.69,13.76-16-.74-21.58-3.34-39.81-48.75-39.81-48.75-10.13-9.69-7.82-45.76C172.31,287.22,166.69,300.16,173.41,263.37Z" style="fill:#ff3fa6" />
+            <path id="neck-shadow" d="M275,408.15s37.68-15,39.43-22.77c0,.15,4.83,24.89-41.44,40.45Z" style="opacity:0.3" />
+            <path id="face-shadow" d="M228.35,403.07c-5.65-8.32-7.18-10.69-8.37-17.69s-1.8-22.07-1.8-22.07l-5.52-3.62.54-2.39,5-5S226.35,305,223.42,272c-2.44-27.39,1-35,4.39-39.87-3.46-1.18-7.95-2.69-13.92-4.58-31.92-10.12-40.48,35.82-40.48,35.82-6.72,36.79-1.1,23.85-6.31,60.69-2.31,36.07,7.82,45.76,7.82,45.76s34.23,46.14,39.81,48.75c4.72,2.2,9.19,3.33,17,3.41l.74-.55S234,411.4,228.35,403.07Z" style="fill:#f2ff7f" />
+            <g id="nose">
+              <path d="M218.24,351.3a7.05,7.05,0,0,1-1.28,4.5,7.93,7.93,0,0,1-1.6,1.91,4.06,4.06,0,0,1-2.63,1.07l.84-1.38h0c.26.54.57,1.14.87,1.69a18.38,18.38,0,0,0,1,1.61,6.15,6.15,0,0,0,1.23,1.35,13.28,13.28,0,0,0,1.49,1v.52a2.6,2.6,0,0,1-2.3-.32,7.44,7.44,0,0,1-1.75-1.43,12.88,12.88,0,0,1-2.37-3.64h0l-.55-1,1.39-.39a3.39,3.39,0,0,0,1.33-.78,9.55,9.55,0,0,0,1.34-1.41,19.86,19.86,0,0,1,2.86-3.35Z" />
+            </g>
+            <path id="mouth" d="M212.66,382.86l20.62-2s11.95.31,13.52,4.47-8.89,2.19-14.91,3.28a124.09,124.09,0,0,1-15,1.31Z" />
+            <path id="right-ear-section" d="M315.18,445.67c26.93-.9,45-13,45-13s-27.14-91.91-27.51-92.28c9.67,1.86,17.49-1.12,24.55-13s.38-27.91-8.55-29.4-17.49,13-17.49,13l-7.51-1.72c0-8.57-14.79-49.06-25.7-64.58a30.1,30.1,0,0,0-6.31-6.57C297.64,264,319.31,364.46,315.18,445.67Z" style="fill:#f2ff7f" />
+            <path d="M271,431.64s27.78,29.28,95.07-.91l.62,1.8s-66.49,31-96.16.48Z" style="opacity:0.24" />
+          </g>
+          <g id="eyes">
+            <g id="left-arch">
+              <path d="M212.34,313a95.44,95.44,0,0,0-9.43-4.95,44.79,44.79,0,0,0-9.76-3.31,23.31,23.31,0,0,0-9.73-.07,21.5,21.5,0,0,0-4.57,1.67,37.1,37.1,0,0,0-4.39,2.81l-.77-.63a15.35,15.35,0,0,1,3.52-4.54,16,16,0,0,1,5.13-3,20.91,20.91,0,0,1,11.7-.22,36.28,36.28,0,0,1,10.37,4.48,41.37,41.37,0,0,1,8.58,7Z" />
+            </g>
+            <g id="right-arch">
+              <path d="M251.1,312.83a16.93,16.93,0,0,1,4.27-5.1,21.4,21.4,0,0,1,5.84-3.44,25.07,25.07,0,0,1,13.46-1.23A36.36,36.36,0,0,1,287,307.74a45.71,45.71,0,0,1,10,8.13l-.61.79c-3.76-1.94-7.4-3.88-11.14-5.43a48.54,48.54,0,0,0-11.36-3.33,28.7,28.7,0,0,0-22,5.54Z" />
+            </g>
+            <ellipse id="left-ball" cx="191.3" cy="319.64" rx="8.74" ry="12.29" />
+            <ellipse id="riight-ball" cx="262.19" cy="323.82" rx="8.74" ry="13.14" />
+          </g>
+          <g id="brows">
+            <path id="left" d="M171.39,291.92s31-8.81,40.34-4.54c4.61-.53,9.39-8.26-.72-9.45s-38.16.93-38.22,6.33S166.41,291.65,171.39,291.92Z" />
+            <path id="right" d="M296.57,293.59S266,283.29,256.5,287.1c-4.58-.75-9-8.7,1.17-9.4s38.07,2.77,37.87,8.17S301.56,293.56,296.57,293.59Z" />
+          </g>
+          <g id="phone">
+            <path id="front" d="M83.11,328.88l54.47.48A10.3,10.3,0,0,1,147.77,339L158,505.5a10.3,10.3,0,0,1-12.28,10.73L91.06,505.4A10.3,10.3,0,0,1,82.78,496l-10-156.12A10.31,10.31,0,0,1,83.11,328.88Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="back" d="M78.2,329.05l54.47.47a10.3,10.3,0,0,1,10.19,9.67l10.21,166.47a10.29,10.29,0,0,1-12.28,10.73L86.15,505.56a10.3,10.3,0,0,1-8.28-9.44L67.84,340A10.28,10.28,0,0,1,78.2,329.05Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <polygon id="phone-p1" points="145.68 360.15 146.66 373.3 149.26 373.01 148.45 359.75 145.68 360.15" style="stroke:#a2ab55;stroke-miterlimit:10;stroke-width:0.75px" />
+            <polygon id="phone-p2" points="146.9 375.16 147.88 388.31 150.48 388.02 149.67 374.76 146.9 375.16" style="stroke:#a2ab55;stroke-miterlimit:10;stroke-width:0.75px" />
+          </g>
+          <g id="safari-log">
+            <g style="isolation:isolate">
+              <g style="clip-path:url(#clip-path)">
+                <path d="M115.67,406.66l-8.43,6.12-5.78,9,8.43-6.12,5.78-9m-6.91,19.94c-6.12-.45-11.18-6.36-11.31-13.21s4.73-12,10.86-11.57,11.2,6.36,11.32,13.2-4.74,12-10.87,11.58m-.47-25.67c-6.53-.48-11.74,5.07-11.6,12.38s5.55,13.63,12.09,14.11,11.75-5.05,11.61-12.37-5.55-13.64-12.1-14.12" id="safari-clip" style="fill:#323232" />
+                <path d="M101.46,421.82l5.78-9,8.43-6.12-5.78,9-8.43,6.12m6.85-20c-6.13-.45-11,4.73-10.86,11.57s5.19,12.76,11.31,13.21,11-4.73,10.87-11.58-5.19-12.75-11.32-13.2" />
+                <path d="M108.78,427.42c-6.54-.48-12-6.79-12.09-14.11s5.07-12.86,11.6-12.38,12,6.81,12.1,14.12-5.07,12.85-11.61,12.37m22.37-75.25L78.7,350.78l7.64,130.65,51.54,3.79-6.73-133" />
+              </g>
+            </g>
+          </g>
+          <g id="arms-1">
+            <path id="right-arm" d="M455.86,616c-26.71-22.21-69.62-9.76-69.62-9.76L403,566.16s-25.51,70.35-64.26,108.08c0,.34-64.58-78.84-78.51-108.08s-42.83-75.46-46.91-78.86-23.58-44.18-23.58-44.18-9.15-8.82-20.71-12.56-25.77-7.68-25.77-7.68-8.16-1.63-11.11,3.92S120.68,439.22,122,444.12,132.11,448,132.11,448s-6.81,4.9-6.34,9.15-.52,14.71,3.4,17l14.23,10.93c7.18,3.92,37.74,22.52,41,27.42s10,9,15.3,23,63.71,143,89.37,176.77S325,746,325,746s22,9.53,44-10.27,57.18-57.91,66.71-78.43c4.91-10.58,12.67-23.83,20.17-41.3" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="left-hand" d="M55.64,483.94s-6.26-34.29,2.6-50.37c4.69-8.53,15.15-16.11,22.08-15.8,3.72.16,25.09-3,29.66,6.16,3.94,7.92-1,20.28-1.42,23-1,5.9-9.66,11.55-19.14,14.86-7.35,2.55-15.43,11.07-14.11,19.14" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+          </g>
+          <g id="Layer_12" data-name="Layer 12">
+            <polygon id="pink-face-box" points="207.55 219.31 212.66 464.38 337.18 460.37 325.93 219.31 207.55 219.31" style="fill:#7ff6ff;opacity:0.41000000000000003" />
+            <polygon id="right-ear-section-box" points="266.88 235.42 310.23 461.24 400.48 438.6 353.58 216.05 266.88 235.42" style="fill:#7ff6ff;opacity:0.41000000000000003" />
+            <polygon id="shirt-box" points="199.71 373.3 128.47 579.85 446.93 668.95 515.88 461.24 199.71 373.3" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="face-shadow-box" points="143.53 210.41 173.2 439.35 257.78 427.56 229.81 196.19 143.53 210.41" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="bottom-right-pink-hair-box" points="306.26 340.28 366.66 429.29 505.12 326.84 441.81 238.16 306.26 340.28" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="bottom-right-yellow-hair-box" points="293.06 242.52 361.35 340.28 459.21 262.54 382.71 178.93 293.06 242.52" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="right-center-hair-line-box" points="237.34 238.16 330.98 224.35 325.93 180.58 233.4 196.19 237.34 238.16" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="pink-top-haiir-line-box" points="239.78 198.94 272.99 179.64 260.73 158.92 225.56 177.68 239.78 198.94" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="medium-left-pink-box" points="174.08 272.58 125.38 267.02 120.9 301.7 166.76 305.1 174.08 272.58" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="bottom-left-yellow-box" points="118.52 363.31 154.07 411.78 191.3 385.38 154.91 340.28 118.52 363.31" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon onclick="togglePattern()" id="safari-box" points="83.78 417.6 111.58 439.96 132.88 411.85 104.76 390.77 83.78 417.6" style="fill:#ff3fa6;opacity:0.25" />
+            <polyline id="safari-pointer" points="100.43 422.41 110.14 415.56 107.19 412.8" style="fill:#262626;opacity:0.38" />
+          </g>
+        </svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/phone-reflection/dist/script.js b/phone-reflection/dist/script.js
new file mode 100644
index 0000000..4ce6932
--- /dev/null
+++ b/phone-reflection/dist/script.js
@@ -0,0 +1,847 @@
+const Colors = (() => {
+  // main
+  const main = {
+    primary: "#ff3388",
+    secondary: "#33bbff"
+  };
+
+  // original
+  const original = {
+    primary: "#ff3fa6",
+    secondary: "#f2ff7f"
+  };
+
+  // pg
+  const pg = {
+    primary: "#FF3388",
+    secondary: "#33FFAA"
+  };
+
+  // goldBlue
+  const goldBlue = {
+    primary: "#465CFA",
+    secondary: "#FAE446"
+  };
+
+  // pink
+  const pink = {
+    primary: "#DC1A93",
+    secondary: "#E841A9"
+  };
+
+  let color = main;
+  const rand = Math.floor(Math.random() * 1000);
+  const colorVariantToRange = new Map([
+    [original, [0, 5]],
+    [pg, [5, 8]],
+    [goldBlue, [8, 80]],
+    [pink, [80, 82]]
+  ]);
+  for (let [variant, range] of colorVariantToRange) {
+    if (rand >= range[0] && rand < range[1]) color = variant;
+  }
+
+  return {
+    bg: "#000000",
+    loadingColor: "#424242",
+    ...color
+  };
+})();
+
+class Point2D {
+  constructor(x = 0, y = 0) {
+    this.x = x;
+    this.y = y;
+  }
+
+  mag() {
+    return Math.sqrt(this.x * this.x + this.y * this.y);
+  }
+
+  scale(s) {
+    return new Point2D(this.x * s, this.y * s);
+  }
+
+  unit() {
+    return this.scale(1 / this.mag());
+  }
+
+  add(p2) {
+    return new Point2D(this.x + p2.x, this.y + p2.y);
+  }
+
+  sub(p2) {
+    return new Point2D(this.x - p2.x, this.y - p2.y);
+  }
+
+  norm() {
+    return new Point2D(-this.y, this.x);
+  }
+
+  dot(p2) {
+    return this.x * p2.x + this.y * p2.y;
+  }
+}
+
+class ContainerBox {
+  constructor(ptsIn, flippy = 0) {
+    let indices = [0, 1, 2, 3];
+    switch (flippy) {
+      case 1:
+        indices = [1, 2, 3, 0];
+        break;
+      case 2:
+        indices = [2, 3, 0, 1];
+        break;
+      case 3:
+        indices = [3, 0, 1, 2];
+        break;
+      default:
+        indices = [0, 1, 2, 3];
+    }
+    this.points = indices.map(i => ptsIn[i]);
+    this.xAx = this.points[3].sub(this.points[0]);
+    this.xAxUnit = this.xAx.unit();
+    this.wid = this.xAx.mag();
+    this.yAx = this.points[1].sub(this.points[0]);
+    this.yAxUnit = this.yAx.unit();
+    this.hei = this.yAx.mag();
+    this.up = this.getUp();
+    this.r = this.getRotation();
+  }
+
+  makeRandomPoint(padding = 1) {
+    const xs = Math.random() * (this.wid - padding * 2);
+    const ys = Math.random() * (this.hei - padding * 2);
+    return this.xAxUnit
+      .scale(xs)
+      .add(this.yAxUnit.scale(ys))
+      .add(this.points[0]);
+  }
+
+  makeRandomPointAtBottom(padding = 1) {
+    const xs = Math.random() * (this.wid * 1.1);
+    const ys = 0.99 * this.hei + padding;
+    return this.xAxUnit
+      .scale(xs)
+      .add(this.yAxUnit.scale(ys))
+      .add(this.points[0]);
+  }
+
+  getUp() {
+    return this.points[0].sub(this.points[1]).unit();
+  }
+
+  aboveBox(p) {
+    const i = 3;
+    const j = 0;
+    const vNorm = this.points[j]
+      .sub(this.points[i])
+      .unit()
+      .norm();
+    const x = p.sub(this.points[i]);
+    const y = x.dot(vNorm);
+    return y > 0;
+  }
+
+  getRotation() {
+    return Math.atan2(this.xAx.y, this.xAx.x);
+  }
+}
+
+function darken(hexColor, scalar = 0.5, opacity) {
+  const col = {
+    r: parseInt(hexColor.substring(1, 3), 16),
+    g: parseInt(hexColor.substring(3, 5), 16),
+    b: parseInt(hexColor.substring(5), 16),
+    a: opacity !== undefined ? opacity : 1
+  };
+  return `rgba(${col.r * scalar}, ${col.g * scalar}, ${col.b * scalar}, ${
+    col.a
+  })`;
+}
+
+function randomColor(minV, opacity) {
+  const r = Math.random() * (255 - minV) + minV;
+  const g = Math.random() * (255 - minV) + minV;
+  const b = Math.random() * (255 - minV) + minV;
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+
+function svgPolyElementToPointsList(polyElement) {
+  const rv = [];
+  const list = polyElement
+    .getAttribute("points")
+    .split(" ")
+    .map(Number);
+  for (let i = 0; i < list.length; i += 2) {
+    rv.push(new Point2D(list[i], list[i + 1]));
+  }
+  return rv;
+}
+
+function createSvgElement(type, attributes) {
+  const svgUrl = "http://www.w3.org/2000/svg";
+  const element = document.createElementNS(svgUrl, type);
+  Object.keys(attributes).forEach(k =>
+    element.setAttributeNS(null, k, attributes[k])
+  );
+  return element;
+}
+
+function watchSize() {
+  const svg = document.querySelector("#woman");
+
+  function setOptimalSize() {
+    const W = window.innerWidth;
+    const H = window.innerHeight;
+    // original viewBox = 0 0 1189.68 1549
+    // console.log(`WH: ${Math.round(W*100/H)}`);
+    if (W < H) {
+      const topLeft = new Point2D(83, 50);
+      const size = new Point2D(418, 630).sub(topLeft);
+      const heightAdjust = H / W;
+      size.y = heightAdjust * size.x;
+      const midY = size.y / 2;
+      topLeft.y = (630 - 50) / 1.5 - midY;
+
+      svg.style.width = "100vw";
+      svg.style.height = "auto";
+      svg.setAttribute(
+        "viewBox",
+        `${topLeft.x} ${topLeft.y} ${size.x} ${size.y}`
+      );
+    } else {
+      const topLeft = new Point2D(0, 146);
+      const size = new Point2D(505, 629).sub(topLeft);
+      const widthAdjust = W / H;
+      size.x = widthAdjust * size.y;
+      const midX = size.x / 2;
+      topLeft.x = 505 / 2 - midX;
+      svg.style.width = "auto";
+      svg.style.height = "100vh";
+      svg.setAttribute(
+        "viewBox",
+        `${topLeft.x} ${topLeft.y} ${size.x} ${size.y}`
+      );
+    }
+  }
+
+  setOptimalSize();
+  window.onresize = setOptimalSize;
+}
+
+watchSize();
+
+const PATTERN_MAPS = new Map();
+const SK_INC = 2;
+
+async function chessPattern(w, h, { color = red, size = 8 }) {
+  const SK = window.devicePixelRatio * 1;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const W = Math.ceil(w * SK);
+  const H = Math.ceil(h * SK);
+  canvas.width = Math.ceil(W);
+  canvas.height = Math.ceil(H * 2);
+
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, W, H * 2);
+
+  const sqSize = size * 5 * SK;
+
+  for (let i = 0; i < Math.round(W / sqSize); i++) {
+    const cols =
+      i % 2 === 0 ? [color, darken(color, 0.9)] : [darken(color, 0.9), color];
+    for (let j = 0; j < Math.floor(H / sqSize) + 1; j++) {
+      const x = sqSize * i;
+      const y = sqSize * j;
+      const width = sqSize;
+      const height = sqSize;
+      ctx.fillStyle = cols[j % 2];
+      ctx.fillRect(x, y, width, height);
+      ctx.fillRect(x, y + H, width, height);
+    }
+  }
+
+  return {
+    canvas
+  };
+}
+
+function chunkUpRects(rects, chunkWidth, spacing, H, variation) {
+  const out = [];
+  for (let i = 0; i < rects.length; i++) {
+    const rect = rects[i];
+    let m = rect.x;
+    const endX = rect.x + rect.width;
+    while (m < endX) {
+      let distLeft = endX - m;
+      const randScalar = 1 + (Math.random() - 0.5) * variation;
+      const len = randScalar * chunkWidth;
+      const word = {
+        x: m,
+        y: rect.y,
+        width: len
+      };
+      out.push(word);
+      out.push({ ...word, y: word.y + H });
+
+      m = m + word.width + spacing;
+      distLeft = endX - m;
+
+      if (distLeft < chunkWidth) {
+        break;
+      }
+    }
+  }
+  return out;
+}
+
+async function glowTextPattern(
+  w,
+  h,
+  { N = 300, color = "red", size = 4, seed }
+) {
+  const SK = window.devicePixelRatio + SK_INC;
+  const height = 10 * SK;
+  const chunkWidth = 30 * SK;
+  const gap = 2 * SK;
+  const totalSize = height + gap;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const W = Math.ceil(w * SK);
+  const H = Math.ceil(h * SK);
+  canvas.width = Math.ceil(W);
+  canvas.height = Math.ceil(H * 2);
+
+  const bgColor = darken(color, 0.6);
+
+  ctx.fillStyle = bgColor;
+  ctx.fillRect(0, 0, W, H * 2);
+
+  const key = `textPattern-${seed || ""}`;
+  const radius = height / 2;
+
+  let rects = [];
+  if (seed && PATTERN_MAPS.has(key)) {
+    rects = PATTERN_MAPS.get(key);
+  } else {
+    for (let j = 0; j < Math.floor(H / totalSize); j++) {
+      const x =
+        Math.random() < 0.8 ? Math.floor(Math.random() * 4) * 10 * SK : 0;
+      const y = totalSize * j;
+      const width = W - (x + radius * 2);
+      rects.push({ x, y, width });
+      if (Math.random() < 0.14) j += 1;
+    }
+    rects = chunkUpRects(rects, chunkWidth, radius / 2, H, 0.8);
+    if (seed) {
+      PATTERN_MAPS.set(key, rects);
+    }
+  }
+
+  const glowFillPerc = 0.05;
+
+  ctx.fillStyle = color;
+  for (let i = 0; i < rects.length; i++) {
+    const { x, y, width } = rects[i];
+
+    const c1 = new Point2D(x + radius, y + radius);
+    const radialGrad1 = ctx.createRadialGradient(
+      c1.x,
+      c1.y,
+      0,
+      c1.x,
+      c1.y,
+      radius
+    );
+    radialGrad1.addColorStop(0, color);
+    radialGrad1.addColorStop(glowFillPerc / 2, color);
+    radialGrad1.addColorStop(1, darken(color, 1, 0));
+    ctx.fillStyle = radialGrad1;
+    ctx.fillRect(x, y, radius * 2, radius * 2);
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(x + radius, y, radius, radius * 2);
+
+    const c2 = new Point2D(x + width - radius, y + radius);
+    const radialGrad2 = ctx.createRadialGradient(
+      c2.x,
+      c2.y,
+      0,
+      c2.x,
+      c2.y,
+      radius
+    );
+    radialGrad2.addColorStop(0, color);
+    radialGrad2.addColorStop(glowFillPerc / 2, color);
+    radialGrad2.addColorStop(1, darken(color, 1, 0));
+    ctx.fillStyle = radialGrad2;
+    ctx.fillRect(x + width - radius * 2, y, radius * 2, radius * 2);
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(x + width - radius * 2, y, radius, radius * 2);
+
+    const linearGradient = ctx.createLinearGradient(0, y, 0, y + height);
+    linearGradient.addColorStop(0, darken(color, 1, 0));
+    linearGradient.addColorStop(0.5 - glowFillPerc, color);
+    linearGradient.addColorStop(0.5 + glowFillPerc, color);
+    linearGradient.addColorStop(1, darken(color, 1, 0));
+
+    ctx.fillStyle = linearGradient;
+    ctx.fillRect(x + radius, y, width - radius * 2, height);
+    ctx.fillStyle = "white";
+    ctx.fillRect(x + radius, y + height / 2 - 1, width - radius * 2, 1);
+  }
+
+  return {
+    canvas
+  };
+}
+
+async function textPattern(w, h, { N = 300, color = "red", size = 4, seed }) {
+  const SK = window.devicePixelRatio * 1; // todo(luke): draw fast v then slow v
+  const height = 7 * SK;
+  const gap = 2 * SK;
+  const totalSize = height + gap;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const W = Math.ceil(w * SK);
+  const H = Math.ceil(h * SK);
+  canvas.width = Math.ceil(W);
+  canvas.height = Math.ceil(H * 2);
+
+  ctx.fillStyle = darken(color, 0.8);
+  ctx.fillRect(0, 0, W, H * 2);
+
+  const key = `textPattern-${seed || ""}`;
+
+  let rects = [];
+  if (seed && PATTERN_MAPS.has(key)) {
+    rects = PATTERN_MAPS.get(key);
+  } else {
+    for (let j = 0; j < Math.floor(H / totalSize) + 1; j++) {
+      const x =
+        Math.random() < 0.8 ? Math.floor(Math.random() * 4) * 10 * SK : 0;
+      const y = totalSize * j;
+      const width = W - x;
+      rects.push({ x, y, width });
+      if (Math.random() < 0.4) j += 2;
+    }
+    if (seed) {
+      PATTERN_MAPS.set(key, rects);
+    }
+  }
+
+  ctx.fillStyle = color;
+  for (let i = 0; i < rects.length; i++) {
+    const { x, y, width } = rects[i];
+    ctx.fillRect(x, y, width, height);
+    ctx.fillRect(x, y + H, width, height);
+  }
+
+  return {
+    canvas
+  };
+}
+
+async function layeredBubbles(w, h, { N = 300, color = "red", size = 4 }) {
+  const SK = window.devicePixelRatio + SK_INC;
+
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const W = Math.ceil(w * SK);
+  const H = Math.ceil(h * SK);
+  canvas.width = Math.ceil(W);
+  canvas.height = Math.ceil(H * 2);
+
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, W, H * 2);
+
+  for (let i = 0; i < N * 6; i++) {
+    const r = (size * SK) / 1;
+    const cy = Math.random() * (H + r);
+    const cx = Math.random() * (W + r);
+    const fill = darken(color, Math.random() * 0.4 + 1);
+    ctx.fillStyle = fill;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(cx, cy + H, r, 0, 2 * Math.PI);
+    ctx.fill();
+  }
+  return {
+    canvas
+  };
+}
+
+async function coloredBubbles(
+  w,
+  h,
+  { N = 300, color = "#ff0000", size = 4, secondaryColor = "#00ff00" }
+) {
+  const SK = window.devicePixelRatio * 1;
+
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const W = Math.ceil(w * SK);
+  const H = Math.ceil(h * SK);
+  canvas.width = Math.ceil(W);
+  canvas.height = Math.ceil(H * 2);
+
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, W, H * 2);
+
+  for (let i = 0; i < N * 6; i++) {
+    const r = size * SK;
+    const cy = Math.random() * (H + r);
+    const cx = Math.random() * (W + r);
+    let fill = Math.random() < 0.8 ? color : secondaryColor;
+    fill = darken(fill, Math.random() * 0.4 + 1, Math.random() * 0.2 + 0.1);
+    ctx.fillStyle = fill;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(cx, cy + H, r, 0, 2 * Math.PI);
+    ctx.fill();
+  }
+  return {
+    canvas
+  };
+}
+
+const svg = document.querySelector("#woman");
+const svgUrl = "http://www.w3.org/2000/svg";
+
+//color socials
+function colorSocials() {
+  try {
+    const color = Colors.secondary;
+    document.querySelector("#twitter-icon").style.stroke = color;
+    document.querySelector("#insta-rect").style.stroke = color;
+    document.querySelector("#insta-circ").style.stroke = color;
+    document.querySelector("#insta-circ-2").style.stroke = color;
+    [1, 2, 3].forEach(
+      i => (document.querySelector(`#code-pen-${i}`).style.stroke = color)
+    );
+  } catch (e) {}
+}
+colorSocials();
+
+async function createAnimationObjects({ shapeId, boxId, flippy = 0, options }) {
+  const boundsRect = document.querySelector(`#${boxId}`);
+  if (!boundsRect) {
+    console.log("cant find", boxId);
+    return () => {};
+  }
+  // grab bounds points
+  const boundsPoints = svgPolyElementToPointsList(boundsRect);
+  const containerBox = new ContainerBox(boundsPoints, flippy);
+  const vector = containerBox.getUp();
+  boundsRect.style.opacity = "0";
+  const angle = Math.atan2(vector.y, vector.x) * 57.3;
+
+  const patternHolder = createSvgElement("g", {});
+  const canvasImgElement = createSvgElement("image", {
+    width: containerBox.wid,
+    height: containerBox.hei * 2,
+    href: ""
+  });
+  patternHolder.appendChild(canvasImgElement);
+
+  // insert this group right after
+  const mainPath = document.querySelector(`#${shapeId}`);
+  mainPath.style.opacity = 0;
+  const g = createSvgElement("g", {});
+  mainPath.parentNode.insertBefore(g, mainPath.nextElementSibling);
+
+  const clipId = `mange-` + Math.floor(Math.random() * 200000);
+  const clipPath = createSvgElement("clipPath", {});
+  clipPath.id = clipId;
+  clipPath.innerHTML = `<path d=${mainPath.getAttribute("d")}></path>`;
+  g.appendChild(clipPath);
+  g.setAttribute("clip-path", `url(#${clipId})`);
+  if (mainPath.getAttribute("transform"))
+    g.setAttribute("transform", mainPath.getAttribute("transform"));
+  g.appendChild(patternHolder);
+
+  const topLeftCorner = containerBox.points[0];
+  patternHolder.style.transform = `translate(${topLeftCorner.x}px, ${
+    topLeftCorner.y
+  }px) rotateZ(${angle + 90}deg) translate(0px, 0px)`;
+
+  return {
+    step: (offset = 0) => {
+      const Y = -offset % containerBox.hei;
+      patternHolder.style.transform = `translate(${topLeftCorner.x}px, ${
+        topLeftCorner.y
+      }px) rotateZ(${angle + 90}deg) translate(0px, ${Y}px)`;
+    },
+    imgElement: canvasImgElement,
+    options,
+    patternSpec: {
+      width: containerBox.wid,
+      height: containerBox.hei
+    },
+    originalShape: mainPath
+  };
+}
+
+const pathsToGo = [
+  {
+    shapeId: "pink-face",
+    boxId: "pink-face-box",
+    options: {
+      N: 800 * 0.7,
+      color: Colors.primary,
+      secondaryColor: Colors.secondary,
+      size: 8
+    }
+  },
+  {
+    shapeId: "highlighted-yellow-top",
+    boxId: "shirt-box",
+    options: {
+      N: 1200 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8,
+      seed: "shirt"
+    }
+  },
+  {
+    shapeId: "highlighted-pink-top",
+    boxId: "shirt-box",
+    options: {
+      N: 1200 * 0.7,
+      color: Colors.primary,
+      secondaryColor: Colors.secondary,
+      size: 8,
+      seed: "shirt"
+    }
+  },
+  {
+    shapeId: "right-ear-section",
+    boxId: "right-ear-section-box",
+    options: {
+      N: 400 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8
+    }
+  },
+  {
+    shapeId: "face-shadow",
+    boxId: "face-shadow-box",
+    options: {
+      N: 400 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8
+    }
+  },
+  {
+    shapeId: "bottom-right-pink-hair",
+    boxId: "bottom-right-pink-hair-box",
+    options: {
+      N: 200 * 0.7,
+      color: Colors.primary,
+      secondaryColor: Colors.secondary,
+      size: 8
+    }
+  },
+  {
+    shapeId: "bottom-right-yellow-hair",
+    boxId: "bottom-right-yellow-hair-box",
+    options: {
+      N: 200 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8
+    }
+  },
+  {
+    shapeId: "right-center-hair-line",
+    boxId: "right-center-hair-line-box",
+    options: {
+      N: 50 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8
+    },
+    flippy: 3
+  },
+  {
+    shapeId: "pink-top-hair-line",
+    boxId: "pink-top-haiir-line-box",
+    options: {
+      N: 20 * 0.7,
+      color: Colors.primary,
+      secondaryColor: Colors.secondary,
+      size: 8
+    },
+    flippy: 3
+  },
+  {
+    shapeId: "medium-left-pink",
+    boxId: "medium-left-pink-box",
+    options: {
+      N: 20 * 0.7,
+      color: Colors.primary,
+      secondaryColor: Colors.secondary,
+      size: 8
+    },
+    flippy: 1
+  },
+  {
+    shapeId: "bottom-left-yellow",
+    boxId: "bottom-left-yellow-box",
+    options: {
+      N: 20 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8
+    }
+  },
+  {
+    shapeId: "safari-clip",
+    boxId: "safari-box",
+    options: {
+      N: 13 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8
+    }
+  }
+];
+
+const items = [
+  { id: "dark-top", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "highlighted-yellow-top", fill: Colors.secondary },
+  { id: "highlighted-pink-top", fill: Colors.primary },
+  { id: "left-arm", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "arm-crease", stroke: Colors.secondary },
+  { id: "left-sleeve-outline", stroke: Colors.secondary },
+  { id: "left-sleeve-outline", stroke: Colors.secondary },
+  { id: "black-hair-bg", fill: Colors.primary },
+  { id: "black-hair", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "bottom-right-yellow-hair", fill: Colors.secondary },
+  { id: "bottom-right-pink-hair", fill: Colors.primary },
+  { id: "right-center-hair-line", fill: Colors.secondary },
+  { id: "pink-top-hair-line", fill: Colors.primary },
+  { id: "left-hair-line-top", stroke: Colors.secondary },
+  { id: "medium-left-pink", fill: Colors.primary },
+  { id: "bottom-left-yellow", fill: Colors.secondary },
+  { id: "pink-face", fill: Colors.primary },
+  { id: "face-shadow", fill: Colors.secondary },
+  { id: "right-ear-section", fill: Colors.secondary },
+  { id: "left-hand", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "right-arm", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "back", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "front", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "phone-p1", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "phone-p2", fill: Colors.bg, stroke: Colors.secondary }
+];
+
+pathsToGo.forEach(i => (document.getElementById(i.boxId).style.opacity = 0));
+function updateColors(isLoading = false) {
+  items.forEach(item => {
+    const e = document.getElementById(item.id);
+    if (!e) {
+      console.log("could not find", item.id);
+      return;
+    }
+    if (item.stroke)
+      e.style.stroke = isLoading ? Colors.loadingColor : item.stroke;
+    if (item.fill) e.style.fill = isLoading ? "black" : item.fill;
+  });
+}
+updateColors(true);
+svg.style.animationName = "loading";
+var togglePattern = () => {};
+
+async function start() {
+  const animationObjects = await Promise.all(
+    pathsToGo.map(p => createAnimationObjects(p))
+  );
+  let isChanging = false;
+  function redraw(offset) {
+    animationObjects.forEach(x => x.step(offset));
+  }
+
+  function setLoading() {
+    updateColors(true);
+    svg.style.animationName = "loading";
+    for (let obj of animationObjects) {
+      obj.imgElement.style.opacity = 0;
+      obj.originalShape.style.opacity = 1;
+    }
+  }
+
+  async function changePatterns(patternFn) {
+    if (isChanging) return false;
+    isChanging = true;
+    updateColors(true);
+    svg.style.animationName = "loading";
+    setLoading();
+    await new Promise(r => setTimeout(r, 50));
+    const animationObjectToPattern = new Map();
+    for (let obj of animationObjects) {
+      const pattern = await patternFn(
+        obj.patternSpec.width,
+        obj.patternSpec.height,
+        obj.options
+      );
+      animationObjectToPattern.set(obj, pattern.canvas.toDataURL());
+    }
+    for ([obj, pattern] of animationObjectToPattern) {
+      obj.imgElement.setAttribute("href", pattern);
+    }
+    await new Promise(r => setTimeout(r, 50));
+    animationObjects.forEach(obj => {
+      obj.imgElement.style.opacity = 1;
+      obj.originalShape.style.opacity = 0;
+    });
+    svg.style.animationName = "none";
+    svg.style.opacity = 1;
+    updateColors(false);
+
+    isChanging = false;
+    return true;
+  }
+  changePatterns(layeredBubbles);
+  let isLayeredBubbles = true;
+  togglePattern = async () => {
+    if (isLayeredBubbles) {
+      const changed = await changePatterns(glowTextPattern);
+      if (changed) isLayeredBubbles = false;
+    } else {
+      const changed = await changePatterns(layeredBubbles);
+      if (changed) isLayeredBubbles = true;
+    }
+  };
+
+  let offset = 0;
+  const useScroll = window.location.search.includes("scroll");
+  if (useScroll) {
+    addEventListener("scroll", () => {
+      offset = window.scrollY;
+    });
+    document.body.style.height = "77000px";
+  }
+
+  let lastRedraw = 0;
+  let lastDelta = 0;
+  function step(delta) {
+    const timePassed = delta - lastDelta;
+    const scalar = timePassed / 16;
+    if (lastRedraw !== offset) redraw(offset * 0.1);
+    lastRedraw = offset;
+    if (!useScroll) offset += 4 * scalar;
+    lastDelta = delta;
+    requestAnimationFrame(step);
+  }
+  requestAnimationFrame(step);
+}
+setTimeout(start, 20);
\ No newline at end of file
diff --git a/phone-reflection/dist/style.css b/phone-reflection/dist/style.css
new file mode 100644
index 0000000..5401082
--- /dev/null
+++ b/phone-reflection/dist/style.css
@@ -0,0 +1,127 @@
+body {
+  margin: 0;
+  background-color: black;
+  color: white;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+#woman {
+  opacity: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  animation-duration: 500ms;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+@keyframes loading {
+  0% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.socials-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 16px;
+  z-index: 100;
+  display: grid;
+  grid-auto-flow: rows;
+  grid-gap: 12px;
+}
+
+.social-link {
+  cursor: pointer;
+}
+
+.social-wrapper {
+  width: 50px;
+  height: 50px;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  position: relative;
+  animation-name: social-anim;
+  animation-timing-function: ease-in;
+  animation-iteration-count: 1;
+  animation-duration: 600ms;
+  animation-delay: 1200ms;
+  opacity: 0;
+  animation-fill-mode: forwards;
+}
+
+@media (max-width: 600px) {
+  .social-wrapper {
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.twit {
+  animation-delay: 1400ms;
+}
+.insta {
+  animation-delay: 1600ms;
+}
+
+.social-wrapper > svg {
+  width: 100%;
+  height: auto;
+}
+
+@keyframes social-anim {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
+.hint {
+  position: fixed;
+  top: 16px;
+  left: calc(50% - 100px);
+  padding: 8px;
+  width: 150px;
+  background-color: black;
+  text-align: center;
+  z-index: 200;
+  border-radius: 20px;
+  font-family: helvetica;
+  font-size: 14px;
+  animation-name: hint-anim;
+  animation-duration: 4s;
+  animation-delay: 6s;
+  animation-fill-mode: forwards;
+  opacity: 0;
+}
+
+@keyframes hint-anim {
+  0% {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  40% {
+    opacity: 0.8;
+    transform: translateY(0px);
+  }
+  60% {
+    opacity: 0.8;
+    transform: translateY(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+}
\ No newline at end of file
diff --git a/phone-reflection/license.txt b/phone-reflection/license.txt
new file mode 100644
index 0000000..f76766d
--- /dev/null
+++ b/phone-reflection/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by luke lincoln (https://codepen.io/lukes611/pen/ZEGedby)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/phone-reflection/src/index.html b/phone-reflection/src/index.html
new file mode 100644
index 0000000..616d712
--- /dev/null
+++ b/phone-reflection/src/index.html
@@ -0,0 +1,136 @@
+        <div class="hint">click safari</div>
+        <div class="socials-container">
+          <!-- codepen -->
+          <a class="social-link" target="_blank" href="https://codepen.io/lukes611">
+            <div class="social-wrapper codepen">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.95 78.95">
+                <title>codepen</title>
+                <g id="codepen">
+                  <path id="code-pen-3" d="M12.66,30.35l26.5-17.51a.82.82,0,0,1,.9,0L66.41,30.48a.16.16,0,0,1,0,.26l-27,17.71L12.66,30.87A.31.31,0,0,1,12.66,30.35Z" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                  <path id="code-pen-2" d="M12.26,48.26V30.91a.56.56,0,0,1,.25-.46L39.25,12.78a.23.23,0,0,1,.36.19l-.18,17.52L66.57,48.42a0,0,0,0,0,0,0V30.94a.17.17,0,0,0-.27-.15L39.43,48.45V66a.22.22,0,0,1-.34.19L12.42,48.55A.34.34,0,0,1,12.26,48.26Z" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                  <path id="code-pen-1" d="M12.58,48.14,39.29,30.65a.38.38,0,0,1,.41,0L66.52,48.24a.36.36,0,0,1,0,.61L39.57,66.18a.36.36,0,0,1-.4,0L12.58,48.76A.37.37,0,0,1,12.58,48.14Z" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                </g>
+              </svg>
+            </div>
+          </a>
+
+          <!-- twitter -->
+          <a class="social-link" target="_blank" href="https://twitter.com/Lukes611">
+            <div class="social-wrapper twit">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.95 78.95">
+                <title>twitter</title>
+                <g id="twitter">
+                  <path id="twitter-icon" d="M39.66,28.54a.52.52,0,0,0,.51-.57c-.17-2.24-.31-10.75,7.29-14.3a14.25,14.25,0,0,1,16.22,2.5.51.51,0,0,0,.48.16,41.73,41.73,0,0,0,6.67-2.18.72.72,0,0,1,.93,1,14.81,14.81,0,0,1-3.23,4.19.52.52,0,0,0,.44.91c1.08-.21,2.39-.5,3.47-.81a.58.58,0,0,1,.6.94c-1.48,1.8-3.75,4.34-5.13,5.06a.49.49,0,0,0-.29.43c-.1,2.39-.81,18.35-9.29,26.94-8.91,9-24.37,20.73-49.2,9a.52.52,0,0,1,.19-1c3.67-.21,11.33-1.06,16.45-4.52A.75.75,0,0,0,25.51,55c-2.86-.7-8.55-3-10.64-8.8a.53.53,0,0,1,.55-.69c.65.06,1.62.12,2.55.13a.71.71,0,0,0,.36-1.32c-3.12-1.71-8.41-5.65-8.72-12a.52.52,0,0,1,.7-.51,32.7,32.7,0,0,0,3.19,1,.64.64,0,0,0,.59-1.08c-2.44-2.35-6.44-7.83-2.87-16.42a.54.54,0,0,1,.9-.13C14.47,18,24.45,28.89,39.66,28.54Z" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                </g>
+              </svg>
+            </div>
+          </a>
+
+          <!-- instagram -->
+          <a class="social-link" target="_blank" href="https://www.instagram.com/sip.wave/">
+            <div class="social-wrapper insta">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.95 78.95">
+                <title>insta</title>
+                <g id="insta">
+                  <rect id="insta-rect" x="10.03" y="10.66" width="58.89" height="57.64" rx="14.16" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                  <circle id="insta-circ" cx="39.47" cy="41.08" r="12.93" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                  <circle id="insta-circ-2" cx="57.2" cy="22.78" r="3.38" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
+                </g>
+              </svg>
+            </div>
+          </a>
+        </div>
+
+        <svg id="woman" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 505.12 1304.22">
+          <defs>
+            <clipPath id="clip-path">
+              <polygon points="81.08 481.05 78.65 348.32 135.46 352.49 137.88 485.22 81.08 481.05" style="fill:none" />
+            </clipPath>
+          </defs>
+          <g id="body">
+            <path id="left-leg" d="M20.93,973.44s-76.29,62.22-92.59,90.37-25.92,47.4-45.92,96.29-96.52,199.13-96.52,199.13,47.64,23.93,66.69,12c1.19-3.57,132.17-222.67,131-226.24s196.48-64.31,215.53-97.65S20.93,973.44,20.93,973.44Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="right-leg" d="M-44.13,939.49s216.22,161.08,325.51,140.76,178-58.15,158.33-185c-7-35-51.3-84-51.3-84L210.17,815,154,886.43l-169.58-62s-77.23-42-111.56,45.77-127.21,254.08-136.36,258c0,1.31,20.91,36.46,57.51,26.73,0,.72,129.46-94.18,158.84-213Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <g id="leg-crease">
+              <path d="M154.1,886.21c14.92,4.17,29.65,8.93,44.33,13.88s29.24,10.18,43.68,15.77q10.83,4.21,21.52,8.74t21.15,9.62c7,3.38,13.81,7,20.43,11,.83.51,1.66,1,2.48,1.52l2.43,1.6c.8.53,1.62,1,2.41,1.61l2.35,1.71a61.11,61.11,0,0,1,8.73,7.65h0a101.6,101.6,0,0,0-18.54-13.84c-6.62-4-13.48-7.6-20.44-11s-14-6.51-21.16-9.54-14.31-5.88-21.53-8.66c-14.45-5.54-29-10.71-43.72-15.62q-11-3.68-22.08-7.16c-7.37-2.36-14.77-4.61-22.16-6.91Z" style="fill:#f2ff7f" />
+            </g>
+            <path id="left-arm" d="M87,450.64l20,21.29-17.31,22.4c-16,91.25,24.3,137.84,24.3,137.84A539.58,539.58,0,0,1,149,559.05l20.52-11.53,53.94,5.16s-26.34,44.77-33.64,77.09-55.48,79.85-62.3,87.1-32,9.38-61.39-10.66S45.62,568.49,46.47,563.38,51.38,496.1,58.24,472V460.35Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="dark-top" d="M273,434.3l-3.94,16.06c-.09.39-1.29.77-1.65.91-5.75,2.17-52.37,19.52-59.65,35.09a1.22,1.22,0,0,0-.05.84c1.51,4.85,13.78,51.55,13.14,52.83s-24.52,51.2-25.58,53.41a1,1,0,0,1-.08.14c-.78,1.17-11.56,18.78-1.74,87.53,10.19,71.29,15.28,64.74,16.73,133.85,0,.73,91.85,36.17,177.47-3.28a1.19,1.19,0,0,0,.69-1.2c-.87-9.17-8.44-90.35,15-113.77,24-24,1.05-124.55-.29-130.29a1.23,1.23,0,0,1,0-.54c.63-2.62,6.26-22,33.26-11.2.73,2.18,1.62-40.4-33.3-55.68-34.68-15.18-28.07-29.26-43.49-68.95a1.19,1.19,0,0,0-1.17-.76l-85.39,4C272.4,433.27,273.11,433.78,273,434.3Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="highlighted-pink-top" d="M267.4,576.7l46.77-8.47c-3.22-29,88.78-2.06,88.78-2.06s-20.91-32.69,8-21.08c.73,2.18,42.92-50.22,8-65.5s-44-10-59.79-50.34l-87.14,4-4.1,17.15s-50.54,11.13-85.73,54.07c-10.13,12.36-16.25,25.1-33.37,54.54,0,0,38.68-11.11,56.71,13.72l-9.34,20C211.23,582.35,267.4,576.7,267.4,576.7Z" style="fill:#ff3fa6" />
+            <path id="highlighted-yellow-top" d="M455.86,511.72c-36.59-51.66-77.11-33-96.69-82.47L333,430.46s-15.29,9.9-17.76,15.19c1.7,45-26.34,90.8-47.79,131.05,42.83-3.51,94.89,38.44,144.86,44.07,0,0,39.26,5.29,43.6-4.78C469.81,583.54,482.26,555.89,455.86,511.72Z" style="fill:#f2ff7f" />
+            <g id="arm-crease">
+              <path d="M114.33,632c2.13,3.27,4.27,6.55,6.5,9.76q1.69,2.4,3.51,4.69a21.26,21.26,0,0,0,4.13,4.13h0A19.92,19.92,0,0,1,124,646.7c-1.32-1.46-2.54-3-3.74-4.56a105.07,105.07,0,0,1-6.59-9.77Z" style="fill:#f2ff7f" />
+            </g>
+            <path id="right-under-arm" d="M374.83,611.11s-4.66-4.43,30.15-51.22c-1.62,3.39-1.84,3.75-1.84,3.75-2.65,13.7-18.89,43-18.89,43l-3.34,7.09Z" style="opacity:0.49" />
+            <path id="left-sleeve-outline" d="M205.3,572.46s-13.77-23.3-56.47-13.38" style="fill:none;stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="arm-pit" d="M205.82,572.24l9.79-18.17-6.43-6.55s-3.26,12.8-5.22,22.42A14,14,0,0,1,205.82,572.24Z" style="opacity:0.49" />
+          </g>
+          <g id="hair-wrapper">
+            <path id="black-hair-bg" d="M171.3,426.34c2.57,2.06,12.44-4.36,12.44-4.36s3.35,15,16.55,23.67c.33.23,1.69-13.14,9.47-14.41.34-.24,9.33,14,18.19,14.51.41.47,5.82-15.77,13.94-11.37,1,.68,14.14,11.27,14.14,11.27l12-14.41,23.63-13.45s43.37-23.15,56.16-4.31,47.12,14.13,47.12,14.13c-12.95-4.68-10.77-24.23-10.77-24.23l19.51,5.39-4-20.19c11.44,12.11,33.65,8.75,33.65,8.75l-9.42-12.79c12-3.16,23.55,5.38,23.55,5.38L442,369.06l26.25,11.44c7.05-5.56-.68-25.57-.68-25.57,10.09-2.73,31,10.76,31.64,10.76-23.5-95.48-65.93-160.7-134.51-191.14-47.27-17.65-76.39-18.55-104-15.63C133,177.68,90,345.94,171.3,426.34Z" style="fill:#ff3fa6" />
+            <path id="black-hair" d="M166.76,426.34c2.57,2.06,12.45-4.36,12.45-4.36s3.34,15,16.54,23.67c.33.23,1.69-13.14,9.47-14.41.34-.24,9.33,14,18.2,14.51.4.47,5.82-15.77,13.93-11.37,1,.68,14.14,11.27,14.14,11.27l12-14.41,23.62-13.45s43.38-23.15,56.16-4.31,47.12,14.13,47.12,14.13c-12.95-4.68-10.77-24.23-10.77-24.23l19.52,5.39-4-20.19c11.44,12.11,33.65,8.75,33.65,8.75l-9.42-12.79c12-3.16,23.55,5.38,23.55,5.38l-5.38-20.86,26.25,11.44c7.06-5.56-.68-25.57-.68-25.57,10.1-2.73,31,10.76,31.64,10.76C471.2,270.21,428.78,205,360.19,174.55c-47.27-17.65-76.39-18.55-104-15.63C128.47,177.68,85.48,345.94,166.76,426.34Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="bottom-right-yellow-hair" d="M430.51,271.39a33,33,0,0,0-25.94-8.81s4.26,15-2.86,20.4c-11.86-6.12-25.25-5.37-25.25-5.37s9.7,13.69,6.92,17.48c-8.38-6.71-19.57-.35-20.06,11.45-4.48-19.84-24.51-10.17-24.51-10.17s-4.57-33.36-24.23-50c0,0,17.05-4,29.83,5.1,2.55-7-6.33-15.9-6.33-15.9s13.63-2.17,18.33,3.46c6.9-5.72-.35-19.37-.35-19.37s13.92.61,15.16,6.39c4.34-.23,5.1-14.5,2-24.71C418.88,216.66,430.33,254,430.51,271.39Z" style="fill:#f2ff7f" />
+            <path id="bottom-right-pink-hair" d="M479.86,339.76s-15.66,2.15-21.46-5.36c-15.39,4.05-7.08,21.29-7.08,21.29s-22.76-8.57-28.32-4.41l2.48,21.41s-16.66-.36-28-9.38c-5.71,6.45,5.31,13.62,5.31,13.62a29.13,29.13,0,0,1-20.53,0c-2.57,2.57,0,14.52,0,14.52l-12.75-3.9c-5.81,6-5.39,27.21-5.39,27.21s-16.57-33.56-19.74-63.48c4.73-9.37,16.78-.37,19.82-4.44,2.61-3.47-1.06-17.34-1.06-17.34s16.29,5.69,20.18,2.43c-3.8-6.23,1.06-19.31,1.06-19.31s19.92,8.45,23.37,3.64c-9.26-4.95-9.92-19-9.92-19s17.71,6.61,21.6,2.8c-11.3-4.47-2.83-25.81-2.83-25.81s11.54,16.75,19.87,7.91c4.72-4.28,2.53-26.48,2.53-26.48S465.52,282.75,479.86,339.76Z" style="fill:#ff3fa6" />
+            <path id="right-center-hair-line" d="M244.63,226.09s35.18-25,52.09-5.89l-8.91-12.47s31.6-1.33,35.16,14.69C323,222.42,304.8,161,244.63,226.09Z" style="fill:#f2ff7f" />
+            <path id="pink-top-hair-line" d="M237.35,189.66s3.28-25.11,23-23.91c0,0-14.24,9.42-8.61,11.93,0,0,7.45-.86,11.09,0A39.09,39.09,0,0,0,237.35,189.66Z" style="fill:#ff3fa6" />
+            <path id="left-hair-line-top" d="M202.29,207.23s-19.34,4.3-20.87,15.34c0,0-7.37-5.21,0-16.87-.31,0-6.1-3.51-8.88,4.38" style="fill:none;stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="medium-left-pink" d="M131.38,296.47l14.5-8.07,5.23,5.19,9-5.19,5.08,5.94,1.58-12.62-5.21,2.18-8.7-11.32L151.69,282l-15.34-9.43C132.29,281.74,131.38,296.47,131.38,296.47Z" style="fill:#ff3fa6" />
+            <path id="bottom-left-yellow" d="M151,352.81c1.89,3.21,2.32,7.26,13.95,5,0,0,.36,12.92,16.3,26.55,0,0-14.77-.78-17.8-4-.2-.1,1.21,15.79,4.45,16.6.1-.1-9.41-1.41-11.13-3.54,0,.2-2.63,9.72,0,12.25.1.3-22.77-30.06-22.07-56.78.11.3,7.06,18,12.17,14.87C144.87,362.26,149.37,358.92,151,352.81Z" style="fill:#f2ff7f" />
+          </g>
+          <g id="face-wrapper">
+            <path id="pink-face" d="M173.41,263.37s8.56-45.94,40.48-35.82,21.81,9.34,35.82,4.67,37.37-3,48.27,12.51,25.7,56,25.7,64.58l7.51,1.72s8.56-14.51,17.49-13,15.62,17.49,8.55,29.4-14.88,14.88-24.55,13c.37.37,27.51,92.28,27.51,92.28s-45.74,27.53-88.53,2.6c.37,0,3.34-27.16,3.34-27.16s-27.9,13.39-38.69,13.76-16-.74-21.58-3.34-39.81-48.75-39.81-48.75-10.13-9.69-7.82-45.76C172.31,287.22,166.69,300.16,173.41,263.37Z" style="fill:#ff3fa6" />
+            <path id="neck-shadow" d="M275,408.15s37.68-15,39.43-22.77c0,.15,4.83,24.89-41.44,40.45Z" style="opacity:0.3" />
+            <path id="face-shadow" d="M228.35,403.07c-5.65-8.32-7.18-10.69-8.37-17.69s-1.8-22.07-1.8-22.07l-5.52-3.62.54-2.39,5-5S226.35,305,223.42,272c-2.44-27.39,1-35,4.39-39.87-3.46-1.18-7.95-2.69-13.92-4.58-31.92-10.12-40.48,35.82-40.48,35.82-6.72,36.79-1.1,23.85-6.31,60.69-2.31,36.07,7.82,45.76,7.82,45.76s34.23,46.14,39.81,48.75c4.72,2.2,9.19,3.33,17,3.41l.74-.55S234,411.4,228.35,403.07Z" style="fill:#f2ff7f" />
+            <g id="nose">
+              <path d="M218.24,351.3a7.05,7.05,0,0,1-1.28,4.5,7.93,7.93,0,0,1-1.6,1.91,4.06,4.06,0,0,1-2.63,1.07l.84-1.38h0c.26.54.57,1.14.87,1.69a18.38,18.38,0,0,0,1,1.61,6.15,6.15,0,0,0,1.23,1.35,13.28,13.28,0,0,0,1.49,1v.52a2.6,2.6,0,0,1-2.3-.32,7.44,7.44,0,0,1-1.75-1.43,12.88,12.88,0,0,1-2.37-3.64h0l-.55-1,1.39-.39a3.39,3.39,0,0,0,1.33-.78,9.55,9.55,0,0,0,1.34-1.41,19.86,19.86,0,0,1,2.86-3.35Z" />
+            </g>
+            <path id="mouth" d="M212.66,382.86l20.62-2s11.95.31,13.52,4.47-8.89,2.19-14.91,3.28a124.09,124.09,0,0,1-15,1.31Z" />
+            <path id="right-ear-section" d="M315.18,445.67c26.93-.9,45-13,45-13s-27.14-91.91-27.51-92.28c9.67,1.86,17.49-1.12,24.55-13s.38-27.91-8.55-29.4-17.49,13-17.49,13l-7.51-1.72c0-8.57-14.79-49.06-25.7-64.58a30.1,30.1,0,0,0-6.31-6.57C297.64,264,319.31,364.46,315.18,445.67Z" style="fill:#f2ff7f" />
+            <path d="M271,431.64s27.78,29.28,95.07-.91l.62,1.8s-66.49,31-96.16.48Z" style="opacity:0.24" />
+          </g>
+          <g id="eyes">
+            <g id="left-arch">
+              <path d="M212.34,313a95.44,95.44,0,0,0-9.43-4.95,44.79,44.79,0,0,0-9.76-3.31,23.31,23.31,0,0,0-9.73-.07,21.5,21.5,0,0,0-4.57,1.67,37.1,37.1,0,0,0-4.39,2.81l-.77-.63a15.35,15.35,0,0,1,3.52-4.54,16,16,0,0,1,5.13-3,20.91,20.91,0,0,1,11.7-.22,36.28,36.28,0,0,1,10.37,4.48,41.37,41.37,0,0,1,8.58,7Z" />
+            </g>
+            <g id="right-arch">
+              <path d="M251.1,312.83a16.93,16.93,0,0,1,4.27-5.1,21.4,21.4,0,0,1,5.84-3.44,25.07,25.07,0,0,1,13.46-1.23A36.36,36.36,0,0,1,287,307.74a45.71,45.71,0,0,1,10,8.13l-.61.79c-3.76-1.94-7.4-3.88-11.14-5.43a48.54,48.54,0,0,0-11.36-3.33,28.7,28.7,0,0,0-22,5.54Z" />
+            </g>
+            <ellipse id="left-ball" cx="191.3" cy="319.64" rx="8.74" ry="12.29" />
+            <ellipse id="riight-ball" cx="262.19" cy="323.82" rx="8.74" ry="13.14" />
+          </g>
+          <g id="brows">
+            <path id="left" d="M171.39,291.92s31-8.81,40.34-4.54c4.61-.53,9.39-8.26-.72-9.45s-38.16.93-38.22,6.33S166.41,291.65,171.39,291.92Z" />
+            <path id="right" d="M296.57,293.59S266,283.29,256.5,287.1c-4.58-.75-9-8.7,1.17-9.4s38.07,2.77,37.87,8.17S301.56,293.56,296.57,293.59Z" />
+          </g>
+          <g id="phone">
+            <path id="front" d="M83.11,328.88l54.47.48A10.3,10.3,0,0,1,147.77,339L158,505.5a10.3,10.3,0,0,1-12.28,10.73L91.06,505.4A10.3,10.3,0,0,1,82.78,496l-10-156.12A10.31,10.31,0,0,1,83.11,328.88Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="back" d="M78.2,329.05l54.47.47a10.3,10.3,0,0,1,10.19,9.67l10.21,166.47a10.29,10.29,0,0,1-12.28,10.73L86.15,505.56a10.3,10.3,0,0,1-8.28-9.44L67.84,340A10.28,10.28,0,0,1,78.2,329.05Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <polygon id="phone-p1" points="145.68 360.15 146.66 373.3 149.26 373.01 148.45 359.75 145.68 360.15" style="stroke:#a2ab55;stroke-miterlimit:10;stroke-width:0.75px" />
+            <polygon id="phone-p2" points="146.9 375.16 147.88 388.31 150.48 388.02 149.67 374.76 146.9 375.16" style="stroke:#a2ab55;stroke-miterlimit:10;stroke-width:0.75px" />
+          </g>
+          <g id="safari-log">
+            <g style="isolation:isolate">
+              <g style="clip-path:url(#clip-path)">
+                <path d="M115.67,406.66l-8.43,6.12-5.78,9,8.43-6.12,5.78-9m-6.91,19.94c-6.12-.45-11.18-6.36-11.31-13.21s4.73-12,10.86-11.57,11.2,6.36,11.32,13.2-4.74,12-10.87,11.58m-.47-25.67c-6.53-.48-11.74,5.07-11.6,12.38s5.55,13.63,12.09,14.11,11.75-5.05,11.61-12.37-5.55-13.64-12.1-14.12" id="safari-clip" style="fill:#323232" />
+                <path d="M101.46,421.82l5.78-9,8.43-6.12-5.78,9-8.43,6.12m6.85-20c-6.13-.45-11,4.73-10.86,11.57s5.19,12.76,11.31,13.21,11-4.73,10.87-11.58-5.19-12.75-11.32-13.2" />
+                <path d="M108.78,427.42c-6.54-.48-12-6.79-12.09-14.11s5.07-12.86,11.6-12.38,12,6.81,12.1,14.12-5.07,12.85-11.61,12.37m22.37-75.25L78.7,350.78l7.64,130.65,51.54,3.79-6.73-133" />
+              </g>
+            </g>
+          </g>
+          <g id="arms-1">
+            <path id="right-arm" d="M455.86,616c-26.71-22.21-69.62-9.76-69.62-9.76L403,566.16s-25.51,70.35-64.26,108.08c0,.34-64.58-78.84-78.51-108.08s-42.83-75.46-46.91-78.86-23.58-44.18-23.58-44.18-9.15-8.82-20.71-12.56-25.77-7.68-25.77-7.68-8.16-1.63-11.11,3.92S120.68,439.22,122,444.12,132.11,448,132.11,448s-6.81,4.9-6.34,9.15-.52,14.71,3.4,17l14.23,10.93c7.18,3.92,37.74,22.52,41,27.42s10,9,15.3,23,63.71,143,89.37,176.77S325,746,325,746s22,9.53,44-10.27,57.18-57.91,66.71-78.43c4.91-10.58,12.67-23.83,20.17-41.3" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+            <path id="left-hand" d="M55.64,483.94s-6.26-34.29,2.6-50.37c4.69-8.53,15.15-16.11,22.08-15.8,3.72.16,25.09-3,29.66,6.16,3.94,7.92-1,20.28-1.42,23-1,5.9-9.66,11.55-19.14,14.86-7.35,2.55-15.43,11.07-14.11,19.14" style="stroke:#f2ff7f;stroke-miterlimit:10" />
+          </g>
+          <g id="Layer_12" data-name="Layer 12">
+            <polygon id="pink-face-box" points="207.55 219.31 212.66 464.38 337.18 460.37 325.93 219.31 207.55 219.31" style="fill:#7ff6ff;opacity:0.41000000000000003" />
+            <polygon id="right-ear-section-box" points="266.88 235.42 310.23 461.24 400.48 438.6 353.58 216.05 266.88 235.42" style="fill:#7ff6ff;opacity:0.41000000000000003" />
+            <polygon id="shirt-box" points="199.71 373.3 128.47 579.85 446.93 668.95 515.88 461.24 199.71 373.3" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="face-shadow-box" points="143.53 210.41 173.2 439.35 257.78 427.56 229.81 196.19 143.53 210.41" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="bottom-right-pink-hair-box" points="306.26 340.28 366.66 429.29 505.12 326.84 441.81 238.16 306.26 340.28" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="bottom-right-yellow-hair-box" points="293.06 242.52 361.35 340.28 459.21 262.54 382.71 178.93 293.06 242.52" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="right-center-hair-line-box" points="237.34 238.16 330.98 224.35 325.93 180.58 233.4 196.19 237.34 238.16" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="pink-top-haiir-line-box" points="239.78 198.94 272.99 179.64 260.73 158.92 225.56 177.68 239.78 198.94" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="medium-left-pink-box" points="174.08 272.58 125.38 267.02 120.9 301.7 166.76 305.1 174.08 272.58" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon id="bottom-left-yellow-box" points="118.52 363.31 154.07 411.78 191.3 385.38 154.91 340.28 118.52 363.31" style="fill:#ff3fa6;opacity:0.25" />
+            <polygon onclick="togglePattern()" id="safari-box" points="83.78 417.6 111.58 439.96 132.88 411.85 104.76 390.77 83.78 417.6" style="fill:#ff3fa6;opacity:0.25" />
+            <polyline id="safari-pointer" points="100.43 422.41 110.14 415.56 107.19 412.8" style="fill:#262626;opacity:0.38" />
+          </g>
+        </svg>
\ No newline at end of file
diff --git a/phone-reflection/src/script.js b/phone-reflection/src/script.js
new file mode 100644
index 0000000..97d1e33
--- /dev/null
+++ b/phone-reflection/src/script.js
@@ -0,0 +1,847 @@
+const Colors = (() => {
+  // main
+  const main = {
+    primary: "#ff3388",
+    secondary: "#33bbff"
+  };
+
+  // original
+  const original = {
+    primary: "#ff3fa6",
+    secondary: "#f2ff7f"
+  };
+
+  // pg
+  const pg = {
+    primary: "#FF3388",
+    secondary: "#33FFAA"
+  };
+
+  // goldBlue
+  const goldBlue = {
+    primary: "#465CFA",
+    secondary: "#FAE446"
+  };
+
+  // pink
+  const pink = {
+    primary: "#DC1A93",
+    secondary: "#E841A9"
+  };
+
+  let color = main;
+  const rand = Math.floor(Math.random() * 1000);
+  const colorVariantToRange = new Map([
+    [original, [0, 5]],
+    [pg, [5, 8]],
+    [goldBlue, [8, 80]],
+    [pink, [80, 82]]
+  ]);
+  for (let [variant, range] of colorVariantToRange) {
+    if (rand >= range[0] && rand < range[1]) color = variant;
+  }
+
+  return {
+    bg: "#000000",
+    loadingColor: "#424242",
+    ...color
+  };
+})();
+
+class Point2D {
+  constructor(x = 0, y = 0) {
+    this.x = x;
+    this.y = y;
+  }
+
+  mag() {
+    return Math.sqrt(this.x * this.x + this.y * this.y);
+  }
+
+  scale(s) {
+    return new Point2D(this.x * s, this.y * s);
+  }
+
+  unit() {
+    return this.scale(1 / this.mag());
+  }
+
+  add(p2) {
+    return new Point2D(this.x + p2.x, this.y + p2.y);
+  }
+
+  sub(p2) {
+    return new Point2D(this.x - p2.x, this.y - p2.y);
+  }
+
+  norm() {
+    return new Point2D(-this.y, this.x);
+  }
+
+  dot(p2) {
+    return this.x * p2.x + this.y * p2.y;
+  }
+}
+
+class ContainerBox {
+  constructor(ptsIn, flippy = 0) {
+    let indices = [0, 1, 2, 3];
+    switch (flippy) {
+      case 1:
+        indices = [1, 2, 3, 0];
+        break;
+      case 2:
+        indices = [2, 3, 0, 1];
+        break;
+      case 3:
+        indices = [3, 0, 1, 2];
+        break;
+      default:
+        indices = [0, 1, 2, 3];
+    }
+    this.points = indices.map(i => ptsIn[i]);
+    this.xAx = this.points[3].sub(this.points[0]);
+    this.xAxUnit = this.xAx.unit();
+    this.wid = this.xAx.mag();
+    this.yAx = this.points[1].sub(this.points[0]);
+    this.yAxUnit = this.yAx.unit();
+    this.hei = this.yAx.mag();
+    this.up = this.getUp();
+    this.r = this.getRotation();
+  }
+
+  makeRandomPoint(padding = 1) {
+    const xs = Math.random() * (this.wid - padding * 2);
+    const ys = Math.random() * (this.hei - padding * 2);
+    return this.xAxUnit
+      .scale(xs)
+      .add(this.yAxUnit.scale(ys))
+      .add(this.points[0]);
+  }
+
+  makeRandomPointAtBottom(padding = 1) {
+    const xs = Math.random() * (this.wid * 1.1);
+    const ys = 0.99 * this.hei + padding;
+    return this.xAxUnit
+      .scale(xs)
+      .add(this.yAxUnit.scale(ys))
+      .add(this.points[0]);
+  }
+
+  getUp() {
+    return this.points[0].sub(this.points[1]).unit();
+  }
+
+  aboveBox(p) {
+    const i = 3;
+    const j = 0;
+    const vNorm = this.points[j]
+      .sub(this.points[i])
+      .unit()
+      .norm();
+    const x = p.sub(this.points[i]);
+    const y = x.dot(vNorm);
+    return y > 0;
+  }
+
+  getRotation() {
+    return Math.atan2(this.xAx.y, this.xAx.x);
+  }
+}
+
+function darken(hexColor, scalar = 0.5, opacity) {
+  const col = {
+    r: parseInt(hexColor.substring(1, 3), 16),
+    g: parseInt(hexColor.substring(3, 5), 16),
+    b: parseInt(hexColor.substring(5), 16),
+    a: opacity !== undefined ? opacity : 1
+  };
+  return `rgba(${col.r * scalar}, ${col.g * scalar}, ${col.b * scalar}, ${
+    col.a
+  })`;
+}
+
+function randomColor(minV, opacity) {
+  const r = Math.random() * (255 - minV) + minV;
+  const g = Math.random() * (255 - minV) + minV;
+  const b = Math.random() * (255 - minV) + minV;
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+
+function svgPolyElementToPointsList(polyElement) {
+  const rv = [];
+  const list = polyElement
+    .getAttribute("points")
+    .split(" ")
+    .map(Number);
+  for (let i = 0; i < list.length; i += 2) {
+    rv.push(new Point2D(list[i], list[i + 1]));
+  }
+  return rv;
+}
+
+function createSvgElement(type, attributes) {
+  const svgUrl = "http://www.w3.org/2000/svg";
+  const element = document.createElementNS(svgUrl, type);
+  Object.keys(attributes).forEach(k =>
+    element.setAttributeNS(null, k, attributes[k])
+  );
+  return element;
+}
+
+function watchSize() {
+  const svg = document.querySelector("#woman");
+
+  function setOptimalSize() {
+    const W = window.innerWidth;
+    const H = window.innerHeight;
+    // original viewBox = 0 0 1189.68 1549
+    // console.log(`WH: ${Math.round(W*100/H)}`);
+    if (W < H) {
+      const topLeft = new Point2D(83, 50);
+      const size = new Point2D(418, 630).sub(topLeft);
+      const heightAdjust = H / W;
+      size.y = heightAdjust * size.x;
+      const midY = size.y / 2;
+      topLeft.y = (630 - 50) / 1.5 - midY;
+
+      svg.style.width = "100vw";
+      svg.style.height = "auto";
+      svg.setAttribute(
+        "viewBox",
+        `${topLeft.x} ${topLeft.y} ${size.x} ${size.y}`
+      );
+    } else {
+      const topLeft = new Point2D(0, 146);
+      const size = new Point2D(505, 629).sub(topLeft);
+      const widthAdjust = W / H;
+      size.x = widthAdjust * size.y;
+      const midX = size.x / 2;
+      topLeft.x = 505 / 2 - midX;
+      svg.style.width = "auto";
+      svg.style.height = "100vh";
+      svg.setAttribute(
+        "viewBox",
+        `${topLeft.x} ${topLeft.y} ${size.x} ${size.y}`
+      );
+    }
+  }
+
+  setOptimalSize();
+  window.onresize = setOptimalSize;
+}
+
+watchSize();
+
+const PATTERN_MAPS = new Map();
+const SK_INC = 2;
+
+async function chessPattern(w, h, { color = red, size = 8 }) {
+  const SK = window.devicePixelRatio * 1;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const W = Math.ceil(w * SK);
+  const H = Math.ceil(h * SK);
+  canvas.width = Math.ceil(W);
+  canvas.height = Math.ceil(H * 2);
+
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, W, H * 2);
+
+  const sqSize = size * 5 * SK;
+
+  for (let i = 0; i < Math.round(W / sqSize); i++) {
+    const cols =
+      i % 2 === 0 ? [color, darken(color, 0.9)] : [darken(color, 0.9), color];
+    for (let j = 0; j < Math.floor(H / sqSize) + 1; j++) {
+      const x = sqSize * i;
+      const y = sqSize * j;
+      const width = sqSize;
+      const height = sqSize;
+      ctx.fillStyle = cols[j % 2];
+      ctx.fillRect(x, y, width, height);
+      ctx.fillRect(x, y + H, width, height);
+    }
+  }
+
+  return {
+    canvas
+  };
+}
+
+function chunkUpRects(rects, chunkWidth, spacing, H, variation) {
+  const out = [];
+  for (let i = 0; i < rects.length; i++) {
+    const rect = rects[i];
+    let m = rect.x;
+    const endX = rect.x + rect.width;
+    while (m < endX) {
+      let distLeft = endX - m;
+      const randScalar = 1 + (Math.random() - 0.5) * variation;
+      const len = randScalar * chunkWidth;
+      const word = {
+        x: m,
+        y: rect.y,
+        width: len
+      };
+      out.push(word);
+      out.push({ ...word, y: word.y + H });
+
+      m = m + word.width + spacing;
+      distLeft = endX - m;
+
+      if (distLeft < chunkWidth) {
+        break;
+      }
+    }
+  }
+  return out;
+}
+
+async function glowTextPattern(
+  w,
+  h,
+  { N = 300, color = "red", size = 4, seed }
+) {
+  const SK = window.devicePixelRatio + SK_INC;
+  const height = 10 * SK;
+  const chunkWidth = 30 * SK;
+  const gap = 2 * SK;
+  const totalSize = height + gap;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const W = Math.ceil(w * SK);
+  const H = Math.ceil(h * SK);
+  canvas.width = Math.ceil(W);
+  canvas.height = Math.ceil(H * 2);
+
+  const bgColor = darken(color, 0.6);
+
+  ctx.fillStyle = bgColor;
+  ctx.fillRect(0, 0, W, H * 2);
+
+  const key = `textPattern-${seed || ""}`;
+  const radius = height / 2;
+
+  let rects = [];
+  if (seed && PATTERN_MAPS.has(key)) {
+    rects = PATTERN_MAPS.get(key);
+  } else {
+    for (let j = 0; j < Math.floor(H / totalSize); j++) {
+      const x =
+        Math.random() < 0.8 ? Math.floor(Math.random() * 4) * 10 * SK : 0;
+      const y = totalSize * j;
+      const width = W - (x + radius * 2);
+      rects.push({ x, y, width });
+      if (Math.random() < 0.14) j += 1;
+    }
+    rects = chunkUpRects(rects, chunkWidth, radius / 2, H, 0.8);
+    if (seed) {
+      PATTERN_MAPS.set(key, rects);
+    }
+  }
+
+  const glowFillPerc = 0.05;
+
+  ctx.fillStyle = color;
+  for (let i = 0; i < rects.length; i++) {
+    const { x, y, width } = rects[i];
+
+    const c1 = new Point2D(x + radius, y + radius);
+    const radialGrad1 = ctx.createRadialGradient(
+      c1.x,
+      c1.y,
+      0,
+      c1.x,
+      c1.y,
+      radius
+    );
+    radialGrad1.addColorStop(0, color);
+    radialGrad1.addColorStop(glowFillPerc / 2, color);
+    radialGrad1.addColorStop(1, darken(color, 1, 0));
+    ctx.fillStyle = radialGrad1;
+    ctx.fillRect(x, y, radius * 2, radius * 2);
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(x + radius, y, radius, radius * 2);
+
+    const c2 = new Point2D(x + width - radius, y + radius);
+    const radialGrad2 = ctx.createRadialGradient(
+      c2.x,
+      c2.y,
+      0,
+      c2.x,
+      c2.y,
+      radius
+    );
+    radialGrad2.addColorStop(0, color);
+    radialGrad2.addColorStop(glowFillPerc / 2, color);
+    radialGrad2.addColorStop(1, darken(color, 1, 0));
+    ctx.fillStyle = radialGrad2;
+    ctx.fillRect(x + width - radius * 2, y, radius * 2, radius * 2);
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(x + width - radius * 2, y, radius, radius * 2);
+
+    const linearGradient = ctx.createLinearGradient(0, y, 0, y + height);
+    linearGradient.addColorStop(0, darken(color, 1, 0));
+    linearGradient.addColorStop(0.5 - glowFillPerc, color);
+    linearGradient.addColorStop(0.5 + glowFillPerc, color);
+    linearGradient.addColorStop(1, darken(color, 1, 0));
+
+    ctx.fillStyle = linearGradient;
+    ctx.fillRect(x + radius, y, width - radius * 2, height);
+    ctx.fillStyle = "white";
+    ctx.fillRect(x + radius, y + height / 2 - 1, width - radius * 2, 1);
+  }
+
+  return {
+    canvas
+  };
+}
+
+async function textPattern(w, h, { N = 300, color = "red", size = 4, seed }) {
+  const SK = window.devicePixelRatio * 1; // todo(luke): draw fast v then slow v
+  const height = 7 * SK;
+  const gap = 2 * SK;
+  const totalSize = height + gap;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const W = Math.ceil(w * SK);
+  const H = Math.ceil(h * SK);
+  canvas.width = Math.ceil(W);
+  canvas.height = Math.ceil(H * 2);
+
+  ctx.fillStyle = darken(color, 0.8);
+  ctx.fillRect(0, 0, W, H * 2);
+
+  const key = `textPattern-${seed || ""}`;
+
+  let rects = [];
+  if (seed && PATTERN_MAPS.has(key)) {
+    rects = PATTERN_MAPS.get(key);
+  } else {
+    for (let j = 0; j < Math.floor(H / totalSize) + 1; j++) {
+      const x =
+        Math.random() < 0.8 ? Math.floor(Math.random() * 4) * 10 * SK : 0;
+      const y = totalSize * j;
+      const width = W - x;
+      rects.push({ x, y, width });
+      if (Math.random() < 0.4) j += 2;
+    }
+    if (seed) {
+      PATTERN_MAPS.set(key, rects);
+    }
+  }
+
+  ctx.fillStyle = color;
+  for (let i = 0; i < rects.length; i++) {
+    const { x, y, width } = rects[i];
+    ctx.fillRect(x, y, width, height);
+    ctx.fillRect(x, y + H, width, height);
+  }
+
+  return {
+    canvas
+  };
+}
+
+async function layeredBubbles(w, h, { N = 300, color = "red", size = 4 }) {
+  const SK = window.devicePixelRatio + SK_INC;
+
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const W = Math.ceil(w * SK);
+  const H = Math.ceil(h * SK);
+  canvas.width = Math.ceil(W);
+  canvas.height = Math.ceil(H * 2);
+
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, W, H * 2);
+
+  for (let i = 0; i < N * 6; i++) {
+    const r = (size * SK) / 1;
+    const cy = Math.random() * (H + r);
+    const cx = Math.random() * (W + r);
+    const fill = darken(color, Math.random() * 0.4 + 1);
+    ctx.fillStyle = fill;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(cx, cy + H, r, 0, 2 * Math.PI);
+    ctx.fill();
+  }
+  return {
+    canvas
+  };
+}
+
+async function coloredBubbles(
+  w,
+  h,
+  { N = 300, color = "#ff0000", size = 4, secondaryColor = "#00ff00" }
+) {
+  const SK = window.devicePixelRatio * 1;
+
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const W = Math.ceil(w * SK);
+  const H = Math.ceil(h * SK);
+  canvas.width = Math.ceil(W);
+  canvas.height = Math.ceil(H * 2);
+
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, W, H * 2);
+
+  for (let i = 0; i < N * 6; i++) {
+    const r = size * SK;
+    const cy = Math.random() * (H + r);
+    const cx = Math.random() * (W + r);
+    let fill = Math.random() < 0.8 ? color : secondaryColor;
+    fill = darken(fill, Math.random() * 0.4 + 1, Math.random() * 0.2 + 0.1);
+    ctx.fillStyle = fill;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(cx, cy + H, r, 0, 2 * Math.PI);
+    ctx.fill();
+  }
+  return {
+    canvas
+  };
+}
+
+const svg = document.querySelector("#woman");
+const svgUrl = "http://www.w3.org/2000/svg";
+
+//color socials
+function colorSocials() {
+  try {
+    const color = Colors.secondary;
+    document.querySelector("#twitter-icon").style.stroke = color;
+    document.querySelector("#insta-rect").style.stroke = color;
+    document.querySelector("#insta-circ").style.stroke = color;
+    document.querySelector("#insta-circ-2").style.stroke = color;
+    [1, 2, 3].forEach(
+      i => (document.querySelector(`#code-pen-${i}`).style.stroke = color)
+    );
+  } catch (e) {}
+}
+colorSocials();
+
+async function createAnimationObjects({ shapeId, boxId, flippy = 0, options }) {
+  const boundsRect = document.querySelector(`#${boxId}`);
+  if (!boundsRect) {
+    console.log("cant find", boxId);
+    return () => {};
+  }
+  // grab bounds points
+  const boundsPoints = svgPolyElementToPointsList(boundsRect);
+  const containerBox = new ContainerBox(boundsPoints, flippy);
+  const vector = containerBox.getUp();
+  boundsRect.style.opacity = "0";
+  const angle = Math.atan2(vector.y, vector.x) * 57.3;
+
+  const patternHolder = createSvgElement("g", {});
+  const canvasImgElement = createSvgElement("image", {
+    width: containerBox.wid,
+    height: containerBox.hei * 2,
+    href: ""
+  });
+  patternHolder.appendChild(canvasImgElement);
+
+  // insert this group right after
+  const mainPath = document.querySelector(`#${shapeId}`);
+  mainPath.style.opacity = 0;
+  const g = createSvgElement("g", {});
+  mainPath.parentNode.insertBefore(g, mainPath.nextElementSibling);
+
+  const clipId = `mange-` + Math.floor(Math.random() * 200000);
+  const clipPath = createSvgElement("clipPath", {});
+  clipPath.id = clipId;
+  clipPath.innerHTML = `<path d=${mainPath.getAttribute("d")}></path>`;
+  g.appendChild(clipPath);
+  g.setAttribute("clip-path", `url(#${clipId})`);
+  if (mainPath.getAttribute("transform"))
+    g.setAttribute("transform", mainPath.getAttribute("transform"));
+  g.appendChild(patternHolder);
+
+  const topLeftCorner = containerBox.points[0];
+  patternHolder.style.transform = `translate(${topLeftCorner.x}px, ${
+    topLeftCorner.y
+  }px) rotateZ(${angle + 90}deg) translate(0px, 0px)`;
+
+  return {
+    step: (offset = 0) => {
+      const Y = -offset % containerBox.hei;
+      patternHolder.style.transform = `translate(${topLeftCorner.x}px, ${
+        topLeftCorner.y
+      }px) rotateZ(${angle + 90}deg) translate(0px, ${Y}px)`;
+    },
+    imgElement: canvasImgElement,
+    options,
+    patternSpec: {
+      width: containerBox.wid,
+      height: containerBox.hei
+    },
+    originalShape: mainPath
+  };
+}
+
+const pathsToGo = [
+  {
+    shapeId: "pink-face",
+    boxId: "pink-face-box",
+    options: {
+      N: 800 * 0.7,
+      color: Colors.primary,
+      secondaryColor: Colors.secondary,
+      size: 8
+    }
+  },
+  {
+    shapeId: "highlighted-yellow-top",
+    boxId: "shirt-box",
+    options: {
+      N: 1200 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8,
+      seed: "shirt"
+    }
+  },
+  {
+    shapeId: "highlighted-pink-top",
+    boxId: "shirt-box",
+    options: {
+      N: 1200 * 0.7,
+      color: Colors.primary,
+      secondaryColor: Colors.secondary,
+      size: 8,
+      seed: "shirt"
+    }
+  },
+  {
+    shapeId: "right-ear-section",
+    boxId: "right-ear-section-box",
+    options: {
+      N: 400 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8
+    }
+  },
+  {
+    shapeId: "face-shadow",
+    boxId: "face-shadow-box",
+    options: {
+      N: 400 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8
+    }
+  },
+  {
+    shapeId: "bottom-right-pink-hair",
+    boxId: "bottom-right-pink-hair-box",
+    options: {
+      N: 200 * 0.7,
+      color: Colors.primary,
+      secondaryColor: Colors.secondary,
+      size: 8
+    }
+  },
+  {
+    shapeId: "bottom-right-yellow-hair",
+    boxId: "bottom-right-yellow-hair-box",
+    options: {
+      N: 200 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8
+    }
+  },
+  {
+    shapeId: "right-center-hair-line",
+    boxId: "right-center-hair-line-box",
+    options: {
+      N: 50 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8
+    },
+    flippy: 3
+  },
+  {
+    shapeId: "pink-top-hair-line",
+    boxId: "pink-top-haiir-line-box",
+    options: {
+      N: 20 * 0.7,
+      color: Colors.primary,
+      secondaryColor: Colors.secondary,
+      size: 8
+    },
+    flippy: 3
+  },
+  {
+    shapeId: "medium-left-pink",
+    boxId: "medium-left-pink-box",
+    options: {
+      N: 20 * 0.7,
+      color: Colors.primary,
+      secondaryColor: Colors.secondary,
+      size: 8
+    },
+    flippy: 1
+  },
+  {
+    shapeId: "bottom-left-yellow",
+    boxId: "bottom-left-yellow-box",
+    options: {
+      N: 20 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8
+    }
+  },
+  {
+    shapeId: "safari-clip",
+    boxId: "safari-box",
+    options: {
+      N: 13 * 0.7,
+      color: Colors.secondary,
+      secondaryColor: Colors.primary,
+      size: 8
+    }
+  }
+];
+
+const items = [
+  { id: "dark-top", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "highlighted-yellow-top", fill: Colors.secondary },
+  { id: "highlighted-pink-top", fill: Colors.primary },
+  { id: "left-arm", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "arm-crease", stroke: Colors.secondary },
+  { id: "left-sleeve-outline", stroke: Colors.secondary },
+  { id: "left-sleeve-outline", stroke: Colors.secondary },
+  { id: "black-hair-bg", fill: Colors.primary },
+  { id: "black-hair", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "bottom-right-yellow-hair", fill: Colors.secondary },
+  { id: "bottom-right-pink-hair", fill: Colors.primary },
+  { id: "right-center-hair-line", fill: Colors.secondary },
+  { id: "pink-top-hair-line", fill: Colors.primary },
+  { id: "left-hair-line-top", stroke: Colors.secondary },
+  { id: "medium-left-pink", fill: Colors.primary },
+  { id: "bottom-left-yellow", fill: Colors.secondary },
+  { id: "pink-face", fill: Colors.primary },
+  { id: "face-shadow", fill: Colors.secondary },
+  { id: "right-ear-section", fill: Colors.secondary },
+  { id: "left-hand", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "right-arm", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "back", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "front", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "phone-p1", fill: Colors.bg, stroke: Colors.secondary },
+  { id: "phone-p2", fill: Colors.bg, stroke: Colors.secondary }
+];
+
+pathsToGo.forEach(i => (document.getElementById(i.boxId).style.opacity = 0));
+function updateColors(isLoading = false) {
+  items.forEach(item => {
+    const e = document.getElementById(item.id);
+    if (!e) {
+      console.log("could not find", item.id);
+      return;
+    }
+    if (item.stroke)
+      e.style.stroke = isLoading ? Colors.loadingColor : item.stroke;
+    if (item.fill) e.style.fill = isLoading ? "black" : item.fill;
+  });
+}
+updateColors(true);
+svg.style.animationName = "loading";
+var togglePattern = () => {};
+
+async function start() {
+  const animationObjects = await Promise.all(
+    pathsToGo.map(p => createAnimationObjects(p))
+  );
+  let isChanging = false;
+  function redraw(offset) {
+    animationObjects.forEach(x => x.step(offset));
+  }
+
+  function setLoading() {
+    updateColors(true);
+    svg.style.animationName = "loading";
+    for (let obj of animationObjects) {
+      obj.imgElement.style.opacity = 0;
+      obj.originalShape.style.opacity = 1;
+    }
+  }
+
+  async function changePatterns(patternFn) {
+    if (isChanging) return false;
+    isChanging = true;
+    updateColors(true);
+    svg.style.animationName = "loading";
+    setLoading();
+    await new Promise(r => setTimeout(r, 50));
+    const animationObjectToPattern = new Map();
+    for (let obj of animationObjects) {
+      const pattern = await patternFn(
+        obj.patternSpec.width,
+        obj.patternSpec.height,
+        obj.options
+      );
+      animationObjectToPattern.set(obj, pattern.canvas.toDataURL());
+    }
+    for ([obj, pattern] of animationObjectToPattern) {
+      obj.imgElement.setAttribute("href", pattern);
+    }
+    await new Promise(r => setTimeout(r, 50));
+    animationObjects.forEach(obj => {
+      obj.imgElement.style.opacity = 1;
+      obj.originalShape.style.opacity = 0;
+    });
+    svg.style.animationName = "none";
+    svg.style.opacity = 1;
+    updateColors(false);
+
+    isChanging = false;
+    return true;
+  }
+  changePatterns(layeredBubbles);
+  let isLayeredBubbles = true;
+  togglePattern = async () => {
+    if (isLayeredBubbles) {
+      const changed = await changePatterns(glowTextPattern);
+      if (changed) isLayeredBubbles = false;
+    } else {
+      const changed = await changePatterns(layeredBubbles);
+      if (changed) isLayeredBubbles = true;
+    }
+  };
+
+  let offset = 0;
+  const useScroll = window.location.search.includes("scroll");
+  if (useScroll) {
+    addEventListener("scroll", () => {
+      offset = window.scrollY;
+    });
+    document.body.style.height = "77000px";
+  }
+
+  let lastRedraw = 0;
+  let lastDelta = 0;
+  function step(delta) {
+    const timePassed = delta - lastDelta;
+    const scalar = timePassed / 16;
+    if (lastRedraw !== offset) redraw(offset * 0.1);
+    lastRedraw = offset;
+    if (!useScroll) offset += 4 * scalar;
+    lastDelta = delta;
+    requestAnimationFrame(step);
+  }
+  requestAnimationFrame(step);
+}
+setTimeout(start, 20);
diff --git a/phone-reflection/src/style.css b/phone-reflection/src/style.css
new file mode 100644
index 0000000..eff9a4c
--- /dev/null
+++ b/phone-reflection/src/style.css
@@ -0,0 +1,127 @@
+body {
+  margin: 0;
+  background-color: black;
+  color: white;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+#woman {
+  opacity: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  animation-duration: 500ms;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+@keyframes loading {
+  0% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.socials-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 16px;
+  z-index: 100;
+  display: grid;
+  grid-auto-flow: rows;
+  grid-gap: 12px;
+}
+
+.social-link {
+  cursor: pointer;
+}
+
+.social-wrapper {
+  width: 50px;
+  height: 50px;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  position: relative;
+  animation-name: social-anim;
+  animation-timing-function: ease-in;
+  animation-iteration-count: 1;
+  animation-duration: 600ms;
+  animation-delay: 1200ms;
+  opacity: 0;
+  animation-fill-mode: forwards;
+}
+
+@media (max-width: 600px) {
+  .social-wrapper {
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.twit {
+  animation-delay: 1400ms;
+}
+.insta {
+  animation-delay: 1600ms;
+}
+
+.social-wrapper > svg {
+  width: 100%;
+  height: auto;
+}
+
+@keyframes social-anim {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
+.hint {
+  position: fixed;
+  top: 16px;
+  left: calc(50% - 100px);
+  padding: 8px;
+  width: 150px;
+  background-color: black;
+  text-align: center;
+  z-index: 200;
+  border-radius: 20px;
+  font-family: helvetica;
+  font-size: 14px;
+  animation-name: hint-anim;
+  animation-duration: 4s;
+  animation-delay: 6s;
+  animation-fill-mode: forwards;
+  opacity: 0;
+}
+
+@keyframes hint-anim {
+  0% {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  40% {
+    opacity: 0.8;
+    transform: translateY(0px);
+  }
+  60% {
+    opacity: 0.8;
+    transform: translateY(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+}
diff --git a/pie-chart-with-pure-css/README.markdown b/pie-chart-with-pure-css/README.markdown
new file mode 100644
index 0000000..07b7334
--- /dev/null
+++ b/pie-chart-with-pure-css/README.markdown
@@ -0,0 +1,5 @@
+# Pie Chart With Pure CSS
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ananyaneogi/pen/mYmrMJ](https://codepen.io/ananyaneogi/pen/mYmrMJ).
+
+
diff --git a/pie-chart-with-pure-css/dist/index.html b/pie-chart-with-pure-css/dist/index.html
new file mode 100644
index 0000000..4ad703a
--- /dev/null
+++ b/pie-chart-with-pure-css/dist/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Pie Chart With Pure CSS</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="pie-chart"></div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/pie-chart-with-pure-css/dist/style.css b/pie-chart-with-pure-css/dist/style.css
new file mode 100644
index 0000000..4919b6b
--- /dev/null
+++ b/pie-chart-with-pure-css/dist/style.css
@@ -0,0 +1,13 @@
+.pie-chart {
+  width: 340px;
+  height: 340px;
+  background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%);
+  border-radius: 50%;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/pie-chart-with-pure-css/license.txt b/pie-chart-with-pure-css/license.txt
new file mode 100644
index 0000000..0cab927
--- /dev/null
+++ b/pie-chart-with-pure-css/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Ananya Neogi (https://codepen.io/ananyaneogi/pen/mYmrMJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/pie-chart-with-pure-css/src/index.html b/pie-chart-with-pure-css/src/index.html
new file mode 100644
index 0000000..aa872ad
--- /dev/null
+++ b/pie-chart-with-pure-css/src/index.html
@@ -0,0 +1 @@
+<div class="pie-chart"></div>
\ No newline at end of file
diff --git a/pie-chart-with-pure-css/src/style.css b/pie-chart-with-pure-css/src/style.css
new file mode 100644
index 0000000..1e111b0
--- /dev/null
+++ b/pie-chart-with-pure-css/src/style.css
@@ -0,0 +1,13 @@
+.pie-chart {
+  width: 340px;
+  height: 340px;
+  background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%);
+  border-radius: 50%;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
diff --git a/piet-mondrian-s-css-grid/README.markdown b/piet-mondrian-s-css-grid/README.markdown
new file mode 100644
index 0000000..ea31fa9
--- /dev/null
+++ b/piet-mondrian-s-css-grid/README.markdown
@@ -0,0 +1,5 @@
+# Piet Mondrian's CSS Grid
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Lasanja___/pen/oNwpNrb](https://codepen.io/Lasanja___/pen/oNwpNrb).
+
+
diff --git a/piet-mondrian-s-css-grid/dist/index.html b/piet-mondrian-s-css-grid/dist/index.html
new file mode 100644
index 0000000..5d89f1d
--- /dev/null
+++ b/piet-mondrian-s-css-grid/dist/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Piet Mondrian&#39;s CSS Grid</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<section>
+  <div class="square1"></div>
+  <div class="square2"></div>
+  <div class="square3"></div>
+  <div class="square4"></div>
+  <div class="square5"></div>
+  <div class="square6"></div>
+  <div class="square7"></div>
+  <div class="square8"></div>
+  <div class="square9"></div>
+  <div class="square10"></div>
+  <div class="square11"></div>
+  <div class="square12"></div>
+  <div class="square13"></div>
+  <div class="square14"></div>
+  <div class="square15"></div>
+  <div class="square17"></div>
+  <div class="square18"></div>
+  <div class="square19"></div>
+  <div class="square20"></div>
+</section>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/piet-mondrian-s-css-grid/dist/style.css b/piet-mondrian-s-css-grid/dist/style.css
new file mode 100644
index 0000000..e26ccdc
--- /dev/null
+++ b/piet-mondrian-s-css-grid/dist/style.css
@@ -0,0 +1,86 @@
+:root {
+  box-sizing: border-box;
+  font-size: calc(.5em + 1vw);
+  background-color: var(--color-cream);
+  
+  --color-blue: #005899;
+  --color-red: #d12312;
+  --color-cream:#eddec3;
+  --color-yellow: #f6cf31;
+  --color-grey: #ced5dd;
+  --color-black: black;
+  --color-white: #dddddd;
+}
+
+*, ::before,::after {
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  height: 100vh;
+}
+section {
+  margin: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
+  grid-gap: .2em;
+  background-color: var(--color-black);
+  border: .2rem solid var(--color-black);
+}
+section div {
+  border: .1rem solid var(--color-black);
+  min-width: 2em;
+  min-height: 2em;
+  background-color: var(--color-white);
+}
+.square1 {
+  grid-column: 1/3;
+  background-color: var(--color-grey);
+}
+
+.square2 {
+grid-column: 3/5;
+}
+
+.square3 {
+grid-column: 5/8;
+    background-color: var(--color-yellow);
+}
+.square4 {
+  grid-row: 2/8;
+}
+
+.square5 {
+  grid-column:2/5;
+  grid-row:2/10;
+  background-color: var(--color-red);
+}
+.square6 {
+  grid-column:5/8;
+  grid-row: 2/7;
+  background-color: var(--color-yellow);
+}
+
+.square8 {
+  background-color: var(--color-grey);
+}
+
+.square11 {
+  grid-column: 5/8;
+    background-color: var(--color-blue);
+}
+.square13 {
+  grid-column: 3/5;
+    background-color: var(--color-yellow);
+}
+
+.square15 {
+  background-color: var(--color-red);
+}
+
+.square19 {
+  grid-column: 4/7;
+  background-color: var(--color-grey);
+}
\ No newline at end of file
diff --git a/piet-mondrian-s-css-grid/license.txt b/piet-mondrian-s-css-grid/license.txt
new file mode 100644
index 0000000..dda4f51
--- /dev/null
+++ b/piet-mondrian-s-css-grid/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Lasanja (https://codepen.io/Lasanja___/pen/oNwpNrb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/piet-mondrian-s-css-grid/src/index.html b/piet-mondrian-s-css-grid/src/index.html
new file mode 100644
index 0000000..8018f88
--- /dev/null
+++ b/piet-mondrian-s-css-grid/src/index.html
@@ -0,0 +1,21 @@
+<section>
+  <div class="square1"></div>
+  <div class="square2"></div>
+  <div class="square3"></div>
+  <div class="square4"></div>
+  <div class="square5"></div>
+  <div class="square6"></div>
+  <div class="square7"></div>
+  <div class="square8"></div>
+  <div class="square9"></div>
+  <div class="square10"></div>
+  <div class="square11"></div>
+  <div class="square12"></div>
+  <div class="square13"></div>
+  <div class="square14"></div>
+  <div class="square15"></div>
+  <div class="square17"></div>
+  <div class="square18"></div>
+  <div class="square19"></div>
+  <div class="square20"></div>
+</section>
\ No newline at end of file
diff --git a/piet-mondrian-s-css-grid/src/style.css b/piet-mondrian-s-css-grid/src/style.css
new file mode 100644
index 0000000..e26ccdc
--- /dev/null
+++ b/piet-mondrian-s-css-grid/src/style.css
@@ -0,0 +1,86 @@
+:root {
+  box-sizing: border-box;
+  font-size: calc(.5em + 1vw);
+  background-color: var(--color-cream);
+  
+  --color-blue: #005899;
+  --color-red: #d12312;
+  --color-cream:#eddec3;
+  --color-yellow: #f6cf31;
+  --color-grey: #ced5dd;
+  --color-black: black;
+  --color-white: #dddddd;
+}
+
+*, ::before,::after {
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  height: 100vh;
+}
+section {
+  margin: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
+  grid-gap: .2em;
+  background-color: var(--color-black);
+  border: .2rem solid var(--color-black);
+}
+section div {
+  border: .1rem solid var(--color-black);
+  min-width: 2em;
+  min-height: 2em;
+  background-color: var(--color-white);
+}
+.square1 {
+  grid-column: 1/3;
+  background-color: var(--color-grey);
+}
+
+.square2 {
+grid-column: 3/5;
+}
+
+.square3 {
+grid-column: 5/8;
+    background-color: var(--color-yellow);
+}
+.square4 {
+  grid-row: 2/8;
+}
+
+.square5 {
+  grid-column:2/5;
+  grid-row:2/10;
+  background-color: var(--color-red);
+}
+.square6 {
+  grid-column:5/8;
+  grid-row: 2/7;
+  background-color: var(--color-yellow);
+}
+
+.square8 {
+  background-color: var(--color-grey);
+}
+
+.square11 {
+  grid-column: 5/8;
+    background-color: var(--color-blue);
+}
+.square13 {
+  grid-column: 3/5;
+    background-color: var(--color-yellow);
+}
+
+.square15 {
+  background-color: var(--color-red);
+}
+
+.square19 {
+  grid-column: 4/7;
+  background-color: var(--color-grey);
+}
\ No newline at end of file
diff --git a/pill-styled-radio-buttons-fully-scaleable/README.markdown b/pill-styled-radio-buttons-fully-scaleable/README.markdown
new file mode 100644
index 0000000..c9d78b8
--- /dev/null
+++ b/pill-styled-radio-buttons-fully-scaleable/README.markdown
@@ -0,0 +1,5 @@
+# Pill styled radio buttons | Fully scaleable 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/havardob/pen/dyYXBBr](https://codepen.io/havardob/pen/dyYXBBr).
+
+Custom radio button style using only CSS (SCSS) by taking advantage of sibling selectors and the :checked psuedo class. 
diff --git a/pill-styled-radio-buttons-fully-scaleable/dist/index.html b/pill-styled-radio-buttons-fully-scaleable/dist/index.html
new file mode 100644
index 0000000..6acdad1
--- /dev/null
+++ b/pill-styled-radio-buttons-fully-scaleable/dist/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Pill styled radio buttons | Fully scaleable </title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+	<form>
+		<label>
+			<input type="radio" name="radio" checked/>
+			<span>HTML</span>
+		</label>
+		<label>
+			<input type="radio" name="radio"/>
+			<span>CSS</span>
+		</label>
+		<label>
+			<input type="radio" name="radio"/>
+			<span>Javascript</span>
+		</label>
+	</form>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/pill-styled-radio-buttons-fully-scaleable/dist/style.css b/pill-styled-radio-buttons-fully-scaleable/dist/style.css
new file mode 100644
index 0000000..1600219
--- /dev/null
+++ b/pill-styled-radio-buttons-fully-scaleable/dist/style.css
@@ -0,0 +1,81 @@
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+.container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  padding: 20px;
+}
+
+body {
+  font-family: "Inter", sans-serif;
+  color: #340417;
+  font-size: calc(1em + 1.25vw);
+  background-color: #f4e7ec;
+}
+
+form {
+  display: -webkit-box;
+  display: flex;
+  flex-wrap: wrap;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+}
+
+label {
+  display: -webkit-box;
+  display: flex;
+  cursor: pointer;
+  font-weight: 500;
+}
+label input {
+  display: none;
+}
+label input:checked + span {
+  background-color: #edd8e0;
+}
+label input:checked + span:before {
+  box-shadow: inset 0 0 0 0.4375em #900c3f;
+}
+label span {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  margin-bottom: 0.375em;
+  padding: 0.375em 0.75em 0.375em 0.375em;
+  border-radius: 99em;
+  -webkit-transition: 0.25s ease;
+  transition: 0.25s ease;
+}
+label span:hover {
+  background-color: #edd8e0;
+}
+label span:before {
+  display: -webkit-box;
+  display: flex;
+  flex-shrink: 0;
+  content: "";
+  background-color: #fff;
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 50%;
+  margin-right: 0.375em;
+  -webkit-transition: 0.25s ease;
+  transition: 0.25s ease;
+  box-shadow: inset 0 0 0 0.125em #900c3f;
+}
\ No newline at end of file
diff --git a/pill-styled-radio-buttons-fully-scaleable/license.txt b/pill-styled-radio-buttons-fully-scaleable/license.txt
new file mode 100644
index 0000000..b2c44fe
--- /dev/null
+++ b/pill-styled-radio-buttons-fully-scaleable/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Håvard Brynjulfsen (https://codepen.io/havardob/pen/dyYXBBr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/pill-styled-radio-buttons-fully-scaleable/src/index.html b/pill-styled-radio-buttons-fully-scaleable/src/index.html
new file mode 100644
index 0000000..1f82556
--- /dev/null
+++ b/pill-styled-radio-buttons-fully-scaleable/src/index.html
@@ -0,0 +1,16 @@
+<div class="container">
+	<form>
+		<label>
+			<input type="radio" name="radio" checked/>
+			<span>HTML</span>
+		</label>
+		<label>
+			<input type="radio" name="radio"/>
+			<span>CSS</span>
+		</label>
+		<label>
+			<input type="radio" name="radio"/>
+			<span>Javascript</span>
+		</label>
+	</form>
+</div>
\ No newline at end of file
diff --git a/pill-styled-radio-buttons-fully-scaleable/src/style.scss b/pill-styled-radio-buttons-fully-scaleable/src/style.scss
new file mode 100644
index 0000000..1b7b483
--- /dev/null
+++ b/pill-styled-radio-buttons-fully-scaleable/src/style.scss
@@ -0,0 +1,75 @@
+*,
+*:after,
+*:before {
+	box-sizing: border-box;
+}
+
+// Codepen spesific styling - only to center the elements in the pen preview and viewport
+.container {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 20px;
+}
+// End Codepen spesific styling
+
+
+$primary-color: #900c3f;
+$text-color: mix(#000, $primary-color, 64%);
+
+body {
+	font-family: "Inter", sans-serif;
+	color: $text-color;
+	font-size: calc(1em + 1.25vw);
+	background-color: mix(#fff, $primary-color, 90%);
+}
+
+form {
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: column;
+}
+
+label {
+	display: flex;
+	cursor: pointer;
+	font-weight: 500;
+	input {
+		display: none;
+		&:checked + span {
+			background-color: mix(#fff, $primary-color, 84%);
+			&:before {
+				box-shadow: inset 0 0 0 0.4375em $primary-color;
+			}
+		}
+	}
+	span {
+		display: flex;
+		align-items: center;
+		margin-bottom: 0.375em;
+		padding: 0.375em 0.75em 0.375em 0.375em;
+		border-radius: 99em; // or something higher...
+		transition: 0.25s ease;
+		&:hover {
+			background-color: mix(#fff, $primary-color, 84%);
+		}
+		&:before {
+			display: flex;
+			flex-shrink: 0;
+			content: "";
+			background-color: #fff;
+			width: 1.5em;
+			height: 1.5em;
+			border-radius: 50%;
+			margin-right: 0.375em;
+			transition: 0.25s ease;
+			box-shadow: inset 0 0 0 0.125em $primary-color;
+		}
+	}
+}
diff --git a/pixi-sprite-bubbles/README.markdown b/pixi-sprite-bubbles/README.markdown
new file mode 100644
index 0000000..b124c2e
--- /dev/null
+++ b/pixi-sprite-bubbles/README.markdown
@@ -0,0 +1,4 @@
+# Pixi Sprite Bubbles
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/JuanFuentes/pen/jONVOOL](https://codepen.io/JuanFuentes/pen/jONVOOL).
+
+ Sprite bubbles with displacement map for water effect
\ No newline at end of file
diff --git a/pixi-sprite-bubbles/dist/742d19fae30395a25522f43c1.js b/pixi-sprite-bubbles/dist/742d19fae30395a25522f43c1.js
new file mode 100644
index 0000000..281fcc6
--- /dev/null
+++ b/pixi-sprite-bubbles/dist/742d19fae30395a25522f43c1.js
@@ -0,0 +1,60 @@
+var Vector = function(_x, _y) {
+    this.x = _x || 1;
+    this.y = _y || 0;
+    this.setAngle = function(angle) {
+        var length = this.getLength();
+        this.x = Math.cos(angle) * length;
+        this.y = Math.sin(angle) * length;
+    }
+    this.getAngle = function() {
+        return Math.atan2(this.y, this.x);
+    }
+    this.setLength = function(length) {
+        var angle = this.getAngle();
+        this.x = Math.cos(angle) * length;
+        this.y = Math.sin(angle) * length;
+    }
+    this.getLength = function() {
+        return Math.sqrt(this.x * this.x + this.y * this.y);
+    }
+    this.add = function(v2) {
+        return {
+            x: this.x + v2.x,
+            y: this.y + v2.y
+        };
+    }
+    this.sub = function(v2) {
+        return {
+            x: this.x - v2.x,
+            y: this.y - v2.y
+        };
+    }
+    this.mult = function(val) {
+        return {
+            x: this.x * val,
+            y: this.y * val
+        };
+    }
+    this.divide = function(val) {
+        return {
+            x: this.x / val,
+            y: this.y / val
+        };
+    }
+    this.addTo = function(v2) {
+        this.x += v2.x;
+        this.y += v2.y;
+    }
+    this.subtractFrom = function(v2) {
+        this.x -= v2.x;
+        this.y -= v2.y;
+    }
+    this.multiplyBy = function(val) {
+        this.x *= val;
+        this.y *= val;
+    }
+    this.divideBy = function(val) {
+        this.x /= val;
+        this.y /= val;
+    }
+};
\ No newline at end of file
diff --git a/pixi-sprite-bubbles/dist/index.html b/pixi-sprite-bubbles/dist/index.html
new file mode 100644
index 0000000..a2cb61f
--- /dev/null
+++ b/pixi-sprite-bubbles/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Pixi Sprite Bubbles</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<p>Drag!</p>
+<!-- partial -->
+  <script src='js/742d19fae30395a25522f43c1.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.1/pixi.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/pixi-sprite-bubbles/dist/script.js b/pixi-sprite-bubbles/dist/script.js
new file mode 100644
index 0000000..7adb07d
--- /dev/null
+++ b/pixi-sprite-bubbles/dist/script.js
@@ -0,0 +1,127 @@
+var app, graphics, container;
+var mousedown = false, bubbles = [];
+var displacementSprite, displacementFilter;
+function init() {
+    app = new PIXI.Application({
+        width: window.innerWidth,
+        height: window.innerHeight,
+        backgroundColor: 0x000,
+        resizeTo: window,
+        antialias: true
+    });
+    container = new PIXI.Container();
+    graphics = new PIXI.Graphics();
+    app.stage.addChild(graphics);
+    app.stage.addChild(container);
+
+    document.body.appendChild(app.view);
+    for (var i = 0; i < 300; i++) {
+        var bubble = new Bubble({
+            x: Math.random() * app.screen.width,
+            y: Math.random() * app.screen.height
+        });
+        container.addChild(bubble.sprite);
+        bubbles.push(bubble);
+    }
+    displacement();
+    addEvents();
+}
+
+function addEvents() {
+    document.addEventListener("mousedown", function(e) {
+        mousedown = true;
+    });
+    document.addEventListener("mouseup", function(e) {
+        mousedown = false;
+    });
+    document.addEventListener("mousemove", function(e) {
+        if (!mousedown) return false;
+        var bubble = new Bubble({
+            x: e.clientX,
+            y: e.clientY
+        });
+        container.addChild(bubble.sprite);
+        bubbles.push(bubble);
+    }, false);
+}
+
+function displacement() {
+    displacementSprite = PIXI.Sprite.from('https://res.cloudinary.com/dvxikybyi/image/upload/v1486634113/2yYayZk_vqsyzx.png');
+    displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
+    displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
+    displacementFilter.padding = 0;
+
+    displacementSprite.position = container.position;
+
+    app.stage.addChild(displacementSprite);
+
+    container.filters = [displacementFilter];
+
+    displacementFilter.scale.x = 50;
+    displacementFilter.scale.y = 50;
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+    render();
+}
+
+function removeBubble(_bubble) {
+    var index = bubbles.indexOf(_bubble);
+    bubbles.splice(index, 1);
+    container.removeChildren(index, index+1);
+}
+
+function render() {
+    for (var i = 0; i < bubbles.length; i++) {
+        var bubble = bubbles[i];
+        if (bubble.isDead()) removeBubble(bubble);
+        else bubble.draw(graphics);
+    }
+    displacementSprite.x++;
+    if (displacementSprite.x > displacementSprite.width) {
+        displacementSprite.x = 0;
+    }
+}
+
+var Bubble = function(args) {
+    if (args === undefined) args = {};
+    this.sprite = PIXI.Sprite.from('https://res.cloudinary.com/losrodriguez/image/upload/v1566328006/black_bubble_g9jolh.png');
+    this.position = new Vector(args.x, args.y);
+    this.init = function() {
+        this.velocity = new Vector(Math.random() * 0.1 - 0.05, -0.01);
+        this.acceleration = new Vector(Math.random() * 0.01 - 0.05, -0.01);
+        this.pressure = new Vector(Math.random() * 0.1 - 0.05, -0.1);
+        this.waterResistance = new Vector(Math.random() * 0.1 - 0.05, -0.1);
+        this.scale = Math.random() * 0.5;
+        this.mass = Math.random() * 0.1;
+    	this.sprite.rotation = Math.random() * Math.PI;
+        this.draw();
+    }
+    this.draw = function(_graphics) {
+        this.update();
+        this.sprite.x = this.position.x;
+        this.sprite.y = this.position.y;
+        this.sprite.scale.set(this.scale);
+    }
+    this.applyForce = function(_force) {
+        var f = _force.mult(this.mass);
+        this.acceleration.addTo(f);
+    }
+    this.update = function() {
+        this.applyForce(this.pressure);
+        this.applyForce(this.waterResistance);
+        this.velocity.addTo(this.acceleration);
+        this.position.addTo(this.velocity);
+        this.acceleration.mult(0);
+        this.scale -= 0.005;
+    }
+    this.isDead = function()  {
+        return (this.scale < 0.0);
+    }
+    this.init();
+    return this;
+}
+
+init();
+animate();
\ No newline at end of file
diff --git a/pixi-sprite-bubbles/dist/style.css b/pixi-sprite-bubbles/dist/style.css
new file mode 100644
index 0000000..415b301
--- /dev/null
+++ b/pixi-sprite-bubbles/dist/style.css
@@ -0,0 +1,15 @@
+body {
+	margin: 0;
+	padding: 0;
+	text-align: center;
+	text-transform: uppercase;
+	font-family: Arial, Helvetica, sans-serif;
+	overflow: hidden;
+}
+p {
+	position: absolute;
+	color: #fff;
+	width: 100%;
+	bottom: 45%;
+	pointer-events: none;
+}
\ No newline at end of file
diff --git a/pixi-sprite-bubbles/license.txt b/pixi-sprite-bubbles/license.txt
new file mode 100644
index 0000000..bfea196
--- /dev/null
+++ b/pixi-sprite-bubbles/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Juan Fuentes (https://codepen.io/JuanFuentes/pen/jONVOOL)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/pixi-sprite-bubbles/src/742d19fae30395a25522f43c1.js b/pixi-sprite-bubbles/src/742d19fae30395a25522f43c1.js
new file mode 100644
index 0000000..281fcc6
--- /dev/null
+++ b/pixi-sprite-bubbles/src/742d19fae30395a25522f43c1.js
@@ -0,0 +1,60 @@
+var Vector = function(_x, _y) {
+    this.x = _x || 1;
+    this.y = _y || 0;
+    this.setAngle = function(angle) {
+        var length = this.getLength();
+        this.x = Math.cos(angle) * length;
+        this.y = Math.sin(angle) * length;
+    }
+    this.getAngle = function() {
+        return Math.atan2(this.y, this.x);
+    }
+    this.setLength = function(length) {
+        var angle = this.getAngle();
+        this.x = Math.cos(angle) * length;
+        this.y = Math.sin(angle) * length;
+    }
+    this.getLength = function() {
+        return Math.sqrt(this.x * this.x + this.y * this.y);
+    }
+    this.add = function(v2) {
+        return {
+            x: this.x + v2.x,
+            y: this.y + v2.y
+        };
+    }
+    this.sub = function(v2) {
+        return {
+            x: this.x - v2.x,
+            y: this.y - v2.y
+        };
+    }
+    this.mult = function(val) {
+        return {
+            x: this.x * val,
+            y: this.y * val
+        };
+    }
+    this.divide = function(val) {
+        return {
+            x: this.x / val,
+            y: this.y / val
+        };
+    }
+    this.addTo = function(v2) {
+        this.x += v2.x;
+        this.y += v2.y;
+    }
+    this.subtractFrom = function(v2) {
+        this.x -= v2.x;
+        this.y -= v2.y;
+    }
+    this.multiplyBy = function(val) {
+        this.x *= val;
+        this.y *= val;
+    }
+    this.divideBy = function(val) {
+        this.x /= val;
+        this.y /= val;
+    }
+};
\ No newline at end of file
diff --git a/pixi-sprite-bubbles/src/index.html b/pixi-sprite-bubbles/src/index.html
new file mode 100644
index 0000000..7ba1704
--- /dev/null
+++ b/pixi-sprite-bubbles/src/index.html
@@ -0,0 +1 @@
+<p>Drag!</p>
\ No newline at end of file
diff --git a/pixi-sprite-bubbles/src/script.js b/pixi-sprite-bubbles/src/script.js
new file mode 100644
index 0000000..7adb07d
--- /dev/null
+++ b/pixi-sprite-bubbles/src/script.js
@@ -0,0 +1,127 @@
+var app, graphics, container;
+var mousedown = false, bubbles = [];
+var displacementSprite, displacementFilter;
+function init() {
+    app = new PIXI.Application({
+        width: window.innerWidth,
+        height: window.innerHeight,
+        backgroundColor: 0x000,
+        resizeTo: window,
+        antialias: true
+    });
+    container = new PIXI.Container();
+    graphics = new PIXI.Graphics();
+    app.stage.addChild(graphics);
+    app.stage.addChild(container);
+
+    document.body.appendChild(app.view);
+    for (var i = 0; i < 300; i++) {
+        var bubble = new Bubble({
+            x: Math.random() * app.screen.width,
+            y: Math.random() * app.screen.height
+        });
+        container.addChild(bubble.sprite);
+        bubbles.push(bubble);
+    }
+    displacement();
+    addEvents();
+}
+
+function addEvents() {
+    document.addEventListener("mousedown", function(e) {
+        mousedown = true;
+    });
+    document.addEventListener("mouseup", function(e) {
+        mousedown = false;
+    });
+    document.addEventListener("mousemove", function(e) {
+        if (!mousedown) return false;
+        var bubble = new Bubble({
+            x: e.clientX,
+            y: e.clientY
+        });
+        container.addChild(bubble.sprite);
+        bubbles.push(bubble);
+    }, false);
+}
+
+function displacement() {
+    displacementSprite = PIXI.Sprite.from('https://res.cloudinary.com/dvxikybyi/image/upload/v1486634113/2yYayZk_vqsyzx.png');
+    displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
+    displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
+    displacementFilter.padding = 0;
+
+    displacementSprite.position = container.position;
+
+    app.stage.addChild(displacementSprite);
+
+    container.filters = [displacementFilter];
+
+    displacementFilter.scale.x = 50;
+    displacementFilter.scale.y = 50;
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+    render();
+}
+
+function removeBubble(_bubble) {
+    var index = bubbles.indexOf(_bubble);
+    bubbles.splice(index, 1);
+    container.removeChildren(index, index+1);
+}
+
+function render() {
+    for (var i = 0; i < bubbles.length; i++) {
+        var bubble = bubbles[i];
+        if (bubble.isDead()) removeBubble(bubble);
+        else bubble.draw(graphics);
+    }
+    displacementSprite.x++;
+    if (displacementSprite.x > displacementSprite.width) {
+        displacementSprite.x = 0;
+    }
+}
+
+var Bubble = function(args) {
+    if (args === undefined) args = {};
+    this.sprite = PIXI.Sprite.from('https://res.cloudinary.com/losrodriguez/image/upload/v1566328006/black_bubble_g9jolh.png');
+    this.position = new Vector(args.x, args.y);
+    this.init = function() {
+        this.velocity = new Vector(Math.random() * 0.1 - 0.05, -0.01);
+        this.acceleration = new Vector(Math.random() * 0.01 - 0.05, -0.01);
+        this.pressure = new Vector(Math.random() * 0.1 - 0.05, -0.1);
+        this.waterResistance = new Vector(Math.random() * 0.1 - 0.05, -0.1);
+        this.scale = Math.random() * 0.5;
+        this.mass = Math.random() * 0.1;
+    	this.sprite.rotation = Math.random() * Math.PI;
+        this.draw();
+    }
+    this.draw = function(_graphics) {
+        this.update();
+        this.sprite.x = this.position.x;
+        this.sprite.y = this.position.y;
+        this.sprite.scale.set(this.scale);
+    }
+    this.applyForce = function(_force) {
+        var f = _force.mult(this.mass);
+        this.acceleration.addTo(f);
+    }
+    this.update = function() {
+        this.applyForce(this.pressure);
+        this.applyForce(this.waterResistance);
+        this.velocity.addTo(this.acceleration);
+        this.position.addTo(this.velocity);
+        this.acceleration.mult(0);
+        this.scale -= 0.005;
+    }
+    this.isDead = function()  {
+        return (this.scale < 0.0);
+    }
+    this.init();
+    return this;
+}
+
+init();
+animate();
\ No newline at end of file
diff --git a/pixi-sprite-bubbles/src/style.css b/pixi-sprite-bubbles/src/style.css
new file mode 100644
index 0000000..415b301
--- /dev/null
+++ b/pixi-sprite-bubbles/src/style.css
@@ -0,0 +1,15 @@
+body {
+	margin: 0;
+	padding: 0;
+	text-align: center;
+	text-transform: uppercase;
+	font-family: Arial, Helvetica, sans-serif;
+	overflow: hidden;
+}
+p {
+	position: absolute;
+	color: #fff;
+	width: 100%;
+	bottom: 45%;
+	pointer-events: none;
+}
\ No newline at end of file
diff --git a/planetary-vignettes/README.markdown b/planetary-vignettes/README.markdown
new file mode 100644
index 0000000..bd8b9e1
--- /dev/null
+++ b/planetary-vignettes/README.markdown
@@ -0,0 +1,8 @@
+# Planetary Vignettes
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/sweaver2112/pen/wvayoKB](https://codepen.io/sweaver2112/pen/wvayoKB).
+
+ Generated WebGL "planetoid"  style animated patterns.   Click anywhere for new planetoid, or engage the Demo Mode for a fresh pattern every few seconds.
+
+Advanced (Debug) Panel:  This panel displays the long  series of randomized twiddle factors that make up a pattern. The string  values (`numerator`,`denominator` , etc) are GLSL fragments that are compiled directly into the webGL program.   While the advanced panel can certainly be used to tinker with patterns, it is mostly for debug purposes.  
+
+The operands in these string fragments are the following variables in the code: `col1` (color1),`col2` (color2),`col2` (color3), `s1` (shape1, calculated from color1), `s2` (shape2), `s3` (shape3),  `s4` (shape4, calculated from all colors), `dArg` (distance from center), and `surface` (thin layer at planet surface), and `tri1-tri4`, which are triangle shapes.
\ No newline at end of file
diff --git a/planetary-vignettes/dist/index.html b/planetary-vignettes/dist/index.html
new file mode 100644
index 0000000..c0a45e1
--- /dev/null
+++ b/planetary-vignettes/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Planetary Vignettes</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<body>
+  <p id="controls"></p>
+  <canvas id="canvas"></canvas>
+</body>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/planetary-vignettes/dist/script.js b/planetary-vignettes/dist/script.js
new file mode 100644
index 0000000..60f1b62
--- /dev/null
+++ b/planetary-vignettes/dist/script.js
@@ -0,0 +1,634 @@
+(function () {
+  var canvas = document.getElementById("canvas");
+  canvas.width = Math.min(window.innerWidth, window.innerHeight);
+  canvas.height = canvas.width;
+  var gl = canvas.getContext("webgl");
+  canvas.addEventListener("click", function (ev) {
+    generateOptions(false, Math.random() > .75); /*75% of the time, stick with a safer preset expression, otherwise generate random combinator*/
+  });
+  var myoptions;
+  var modes = ["multiply", "divide", "add", "subtract", "flip divide", "flip subtract"];/*colorMode*/
+  var operators = ["none", "add", "subtract", "multiply", "divide"];/*colorOperator and motionOperator*/
+  var functions = ["none", "sine", "tan"];
+  var primaryColors = ["#000000", "#ffffff", "#ff0000", "#00ff00", "#0000ff", "#ff00ff", "#00ffff", "#ffff00", "#ff6600", "#7f00ff", "#808080", "#800000", "#808000", "#008000", "#800080", "#008080", "#000080"];
+  var hueColors = primaryColors.filter(c => c != "#000000" && c != "#ffffff");
+  var timeFunctions = ["none", "sine", "sine + cos"];
+  var gui;
+  var demoMode = false;
+  var demoInterval = 7;
+  var time = 0.0;
+  /*safer combinations of the colors and shapes that don't produce lots of black screens (unlike the randomly generated GLSL frargments which do):*/
+  var presets = [{
+      numerator: "s1+s2/s4",
+      denominator: "s4-s1-s2+s3"
+    },
+    {
+      numerator: "s1+s2/s4",
+      denominator: "s4-s1-col2+col3"
+    },
+    {
+      numerator: "s2*col2-col3",
+      denominator: "s4+s3*s1"
+    },
+    {
+      numerator: "col2 + col1",
+      denominator: "s4+s3*s1"
+    }
+  ];
+  var panelExpressions = [
+    "col1+col2+col3",
+    "s1+s2+s3",
+    "s1*col1+s2*col2+s3*col3"
+  ];
+ 
+  /*cool patterns. load one of these on first load*/
+  var currentTheme;
+  var themes = [
+    {"name":"Generated"},
+    {"name":"Eye of the Beholder","color1":"#4add49","color2":"#7caaf8","color3":"#bc0fcc","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"s1","denominator2":"s1","panel":"s1*col1+s2*col2+s3*col3","colorMode":"flip subtract","colorOperator1":"none","colorOperator2":"none","time":0.0065,"timeFunc":"sine + cos","distanceModifier":0.4,"rotation":8,"rotFactor1":1,"rotFactor2":-1,"theta":9,"thetaFunc":"none","periodicMultiplier":10,"motionMultiplier":2,"motionIterations":2,"iterationMotion1":true,"iterationMotion2":true,"motionOperator1":"divide","motionOperator2":"multiply","pixelation":0,"useTwo":true,"innerRadius":0.4,"useDifferent":false},
+    {"name":"Sinusoid","numerator":"col2 + col1","denominator":"s4+s3*s1","numerator2":"s1+s2/s4","denominator2":"s4-s1-s2+s3","panel":"col1+col2+col3","colorMode":"multiply","color1":"#8d14ee","color2":"#72e068","color3":"#000000","rotation":-1,"rotFactor1":1,"rotFactor2":-1,"theta":6,"time":-.01,"timeFunc":"none","distanceModifier":0.1,"periodicMultiplier":0,"motionIterations":2,"motionMultiplier":0.62,"iterationMotion1":false,"iterationMotion2":true,"colorOperator1":"add","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"subtract","thetaFunc":"sine","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Flor de Llama","numerator":"s1+s2/s4","denominator":"s4-s1-s2+s3","numerator2":"col2 + col1","denominator2":"s4+s3*s1","panel":"s1+s2+s3","colorMode":"divide","color1":"#1f607e","color2":"#f019c6","color3":"#a6343e","rotation":-9,"rotFactor1":1,"rotFactor2":-1,"theta":6,"time":-0.0070,"timeFunc":"sine + cos","distanceModifier":1.2673,"periodicMultiplier":6,"motionIterations":2,"motionMultiplier":1.2372,"iterationMotion1":true,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"add","motionOperator2":"subtract","thetaFunc":"sine","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Cosmic Tomato","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"s1+s2/s4","denominator2":"s4-s1-s2+s3","panel":"s1*col1+s2*col2+s3*col3","colorMode":"flip subtract","color1":"#9d32f5","color2":"#54760d","color3":"#f78596","rotation":0,"rotFactor1":-2,"rotFactor2":0,"theta":-2,"time":0.003,"timeFunc":"none","distanceModifier":0.156,"periodicMultiplier":9,"motionIterations":1,"motionMultiplier":0.375,"iterationMotion1":false,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"multiply","thetaFunc":"sine","pixelation":0,"useTwo":false,"useDifferent":true,"innerRadius":0.189},
+    {"name":"Prismatic Charm","numerator":"col2 + col1","denominator":"s4+s3*s1","numerator2":"s1+s2/s4","denominator2":"s4-s1-col2+col3","panel":"s1+s2+s3","colorMode":"subtract","color1":"#b05a18","color2":"#c46171","color3":"#ffffff","rotation":3,"rotFactor1":1,"rotFactor2":-1,"theta":-4,"time":-0.008,"timeFunc":"none","distanceModifier":0.58,"periodicMultiplier":2,"motionIterations":2,"motionMultiplier":0.74,"iterationMotion1":true,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"multiply","motionOperator2":"add","thetaFunc":"none","pixelation":158,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Orange Crush","numerator":"s2*col2-col3","denominator":"s4+s3*s1","numerator2":"s1+s2/s4","denominator2":"s4-s1-col2+col3","panel":"s1*col1+s2*col2+s3*col3","colorMode":"subtract","color1":"#691157","color2":"#ffff00","color3":"#177691","rotation":6,"rotFactor1":1,"rotFactor2":-1,"theta":-10,"time":0.003,"timeFunc":"sine","distanceModifier":-1.34,"periodicMultiplier":10,"motionIterations":1,"motionMultiplier":1.20,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"subtract","motionOperator2":"multiply","thetaFunc":"sine","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Cosmic Bloom","numerator":"s1+s2/s4","denominator":"s4-s1-s2+s3","numerator2":"s2*col2-col3","denominator2":"s4+s3*s1","panel":"s1+s2+s3","colorMode":"divide","color1":"#354ffa","color2":"#5fe483","color3":"#62be30","rotation":4,"rotFactor1":1,"rotFactor2":-1,"theta":-3,"time":0.003,"timeFunc":"none","distanceModifier":.17,"periodicMultiplier":6,"motionIterations":0,"motionMultiplier":1.9,"iterationMotion1":false,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"multiply","motionOperator2":"add","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Virus","numerator":"s4 + dArg - col1 ","denominator":"s3 + surface","numerator2":"col3 - col1 * s2 ","denominator2":"col1","panel":"s1+s2+s3","colorMode":"add","color1":"#b7f48c","color2":"#d1720c","color3":"#000000","rotation":-1,"rotFactor1":1,"rotFactor2":-1,"theta":-4,"time":0.0078,"timeFunc":"none","distanceModifier":-0.0415,"periodicMultiplier":0,"motionIterations":0,"motionMultiplier":0.2892,"iterationMotion1":false,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"add","motionOperator2":"subtract","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},/*"c3:#b46ce9"*/
+    {"name":"Snowflake","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"s1+s2/s4","denominator2":"s4-s1-col2+col3","panel":"col1+col2+col3","colorMode":"add","color1":"#dae216","color2":"#a6c12f","color3":"#eb8dd3","rotation":10,"rotFactor1":1,"rotFactor2":-1,"theta":-9,"time":-0.003,"timeFunc":"none","distanceModifier":-1.49,"periodicMultiplier":0,"motionIterations":0,"motionMultiplier":1.64,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"add","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Pixie","numerator":"col2 + s3","denominator":"s3 - s4","numerator2":"s1 + col2 + dArg  / col2 ","denominator2":"col1 + s4 * s3  - col2 ","panel":"s1+s2+s3","colorMode":"multiply","color1":"#3b8aad","color2":"#94c7a9","color3":"#36efd1","rotation":0,"rotFactor1":-1,"rotFactor2":2,"theta":6,"time":0.0045,"timeFunc":"none","distanceModifier":-0.3959,"periodicMultiplier":8,"motionIterations":2,"motionMultiplier":1.2988,"iterationMotion1":true,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"add","thetaFunc":"sine","pixelation":196,"useTwo":false,"useDifferent":false,"innerRadius":0.3590},
+    {"name":"Tie-fighter","numerator":"s1+s2/s4","denominator":"s4-s1-s2+s3","numerator2":"s2*col2-col3","denominator2":"s4+s3*s1","panel":"s1*col1+s2*col2+s3*col3","colorMode":"flip subtract","color1":"#50e7e5","color2":"#ff00ff","color3":"#e287f1","rotation":0,"rotFactor1":1,"rotFactor2":-1,"theta":2,"time":-0.01,"timeFunc":"none","distanceModifier":-1.46,"periodicMultiplier":1,"motionIterations":1,"motionMultiplier":1.79,"iterationMotion1":true,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"multiply","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Carpet Ride","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"col2 + col1","denominator2":"s4+s3*s1","panel":"col1+col2+col3","colorMode":"add","color1":"#be5557","color2":"#704df7","color3":"#81d820","rotation":2,"rotFactor1":1,"rotFactor2":-1,"theta":6,"time":-0.0108,"timeFunc":"none","distanceModifier":-1.5942,"periodicMultiplier":8,"motionIterations":1,"motionMultiplier":0.2714,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"add","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Chlorophyll","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"s1+s2/s4","denominator2":"s4-s1-s2+s3","panel":"col1+col2+col3","colorMode":"subtract","color1":"#c487cb","color2":"#00ff00","color3":"#1e1c80","rotation":-3,"rotFactor1":1,"rotFactor2":-1,"theta":9,"time":-0.0094,"timeFunc":"none","distanceModifier":0.1387,"periodicMultiplier":9,"motionIterations":2,"motionMultiplier":1.5999,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"subtract","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Lace","numerator":"s1+s2/s4","denominator":"s4-s1-s2+s3","numerator2":"col2 + col1","denominator2":"s4+s3*s1","panel":"col1+col2+col3","colorMode":"multiply","color1":"#edde34","color2":"#e0f076","color3":"#faa0a8","rotation":-5,"rotFactor1":1,"rotFactor2":-1,"theta":5,"time":-0.0057,"timeFunc":"none","distanceModifier":-1.0695,"periodicMultiplier":10,"motionIterations":1,"motionMultiplier":0.349,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"add","motionOperator2":"divide","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Throwing Star","numerator":"s1+s2/s4","denominator":"s4-s1-s2+s3","numerator2":"s1+s2/s4","denominator2":"s4-s1-s2+s3","panel":"col1+col2+col3","colorMode":"flip divide","color1":"#1e50b5","color2":"#808000","color3":"#e4921f","rotation":-3,"rotFactor1":1,"rotFactor2":-1,"theta":5,"time":-0.0057,"timeFunc":"none","distanceModifier":0.297,"periodicMultiplier":0,"motionIterations":2,"motionMultiplier":1.7,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"subtract","thetaFunc":"none","pixelation":179,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Kaleidoscope","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"t+s1+s2/s4","denominator2":"s4-s1-col2+col3","panel":"s1*col1+s2*col2+s3*col3","colorMode":"add","color1":"#c9a30c","color2":"#354a83","color3":"#0d90b9","rotation":4,"rotFactor1":1,"rotFactor2":-1,"theta":-12,"time":-0.0034,"timeFunc":"none","distanceModifier":0.6896,"periodicMultiplier":4,"motionIterations":1,"motionMultiplier":0.3291,"iterationMotion1":false,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"multiply","motionOperator2":"subtract","thetaFunc":"sine","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Planet Plaid","numerator":"s1 + surface - s2  + s4  - col2 ","denominator":"s3 * s2 + s1  + s4 ","numerator2":"s4 / dArg + col2 ","denominator2":"col3 / s2 + surface  * col3  + s2 ","panel":"s1+s2+s3","colorMode":"divide","color1":"#5e22eb","color2":"#f4367d","color3":"#f95b56","rotation":4,"rotFactor1":1,"rotFactor2":-1,"theta":-6,"time":-0.0049,"timeFunc":"none","distanceModifier":-1.7720,"periodicMultiplier":7,"motionIterations":2,"motionMultiplier":1.8759,"iterationMotion1":false,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"multiply","motionOperator2":"divide","thetaFunc":"sine","pixelation":110,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Crystal Ball","numerator":"col2 + col1","denominator":"s4+s3*s1","numerator2":"s1+s2/s4","denominator2":"s4-s1-s2+s3","panel":"s1*col1+s2*col2+s3*col3","colorMode":"subtract","color1":"#71a8a0","color2":"#0c3eeb","color3":"#df7bdc","rotation":-7,"rotFactor1":1,"rotFactor2":-1,"theta":3,"time":0.0076,"timeFunc":"none","distanceModifier":-1.6879,"periodicMultiplier":2,"motionIterations":2,"motionMultiplier":0.5590,"iterationMotion1":true,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"subtract","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"4-Leaf Clover","numerator":"s4 - col2 / dArg ","denominator":"s1 + col1 / surface  + col2  + s2 ","numerator2":"s1 + col3 / surface  + col2 ","denominator2":"surface - s1 - s4  + s1 ","panel":"s1*col1+s2*col2+s3*col3","colorMode":"divide","color1":"#2beb47","color2":"#06c3bc","color3":"#470f28","rotation":2,"rotFactor1":1,"rotFactor2":-1,"theta":2,"time":0.0039,"timeFunc":"none","distanceModifier":-0.3765,"periodicMultiplier":2,"motionIterations":1,"motionMultiplier":0.7453,"iterationMotion1":false,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"subtract","motionOperator2":"divide","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"White Christmas","numerator":"s2*col2-col3","denominator":"s4+s3*s1","numerator2":"s2*col2-col3","denominator2":"s4+s3*s1","panel":"s1+s2+s3","colorMode":"flip subtract","color1":"#16746e","color2":"#7cc3d2","color3":"#94de3b","rotation":9,"rotFactor1":1,"rotFactor2":-1,"theta":-12,"time":-0.0030,"timeFunc":"none","distanceModifier":0.4001,"periodicMultiplier":4,"motionIterations":2,"motionMultiplier":0.1668,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"multiply","motionOperator2":"multiply","thetaFunc":"sine","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Radioactive","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"col2 + col1","denominator2":"s4+s3*s1","panel":"s1+s2+s3","colorMode":"add","color1":"#fa6d91","color2":"#e87e6b","color3":"#ffffff","rotation":-9,"rotFactor1":1,"rotFactor2":-1,"theta":3,"time":0.002,"timeFunc":"none","distanceModifier":0.1079,"periodicMultiplier":0,"motionIterations":1,"motionMultiplier":1.9417,"iterationMotion1":false,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"multiply","motionOperator2":"multiply","thetaFunc":"sine","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Bloodshot","numerator":"col2 + col1","denominator":"s4+s3*s1","numerator2":"s1+s2/s4","denominator2":"s4-s1-s2+s3","panel":"s1+s2+s3","colorMode":"flip subtract","color1":"#cd70a9","color2":"#03e9c2","color3":"#c4acbd","rotation":4,"rotFactor1":1,"rotFactor2":-1,"theta":5,"time":-0.0002,"timeFunc":"none","distanceModifier":-0.2232,"periodicMultiplier":0,"motionIterations":0,"motionMultiplier":1.6077,"iterationMotion1":false,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"divide","thetaFunc":"none","pixelation":136,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Ring of Power", "numerator":"s3 * col3","denominator":"s1 - col2","numerator2":"s4 - col1","denominator2":"col1 - tri4","panel":"col1+col2+col3","colorMode":"flip divide","color1":"#590e82","color2":"#73485b","color3":"#555122","rotation":1,"rotFactor1":1,"rotFactor2":-1,"theta":-3,"time":-0.0012,"timeFunc":"none","distanceModifier":1.2779,"periodicMultiplier":10,"motionIterations":2,"motionMultiplier":1.7584,"iterationMotion1":true,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"subtract","motionOperator2":"divide","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Sundial","numerator":"s1+s2/s4","denominator":"s4-s1-s2+s3","numerator2":"s1+s2/s4","denominator2":"s4-s1-col2+col3","panel":"col1+col2+col3","colorMode":"divide","color1":"#c7532e","color2":"#eda4ca","color3":"#1559f5","rotation":3,"rotFactor1":1,"rotFactor2":-1,"theta":-7,"time":-0.0018,"timeFunc":"none","distanceModifier":0.8520,"periodicMultiplier":6,"motionIterations":0,"motionMultiplier":0.0434,"iterationMotion1":false,"iterationMotion2":true,"colorOperator1":"subtract","colorOperator2":"add","motionOperator1":"divide","motionOperator2":"none","thetaFunc":"tan","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Amulet","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"s1+s2/s4","denominator2":"s4-s1-col2+col3","panel":"s1+s2+s3","colorMode":"divide","color1":"#1be19f","color2":"#0e62a6","color3":"#5a31f3","rotation":4,"rotFactor1":1,"rotFactor2":-1,"theta":-8,"time":-0.0094,"timeFunc":"sine + cos","distanceModifier":-1.1319,"periodicMultiplier":0,"motionIterations":2,"motionMultiplier":1.4210,"iterationMotion1":false,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"add","motionOperator1":"subtract","motionOperator2":"multiply","thetaFunc":"sine","pixelation":292,"useTwo":true,"useDifferent":false,"innerRadius":0.4}
+  ]
+
+  /*INIT*/
+  window.addEventListener("resize", onWindowResize, false);
+  generateOptions(true, false);
+  if(canvas.width<360) gui.close();
+  draw();
+  autoClick();
+  /*END INIT*/
+
+  function generateOptions(isDefault, isRandomMode, theme) {
+    let defaults = new DefaultOptions();
+    if(isDefault) { /*load a preset on first load*/
+      let randoTheme = pick(themes.filter(th=>th.name!="Generated"));
+      currentTheme = randoTheme.name;
+      myoptions = Object.assign(randoTheme, defaults)
+    } else if(theme && theme!="Generated") { /*or user picked a theme*/
+      let t = themes.filter(th=>th.name==theme)[0];
+      myoptions = Object.assign(t, defaults);
+    } else { /*or it's random generation time. even then, sometimes use a preset*/
+      if(Math.random()>.75){
+        let randoTheme = pick(themes.filter(th=>th.name!="Generated"));
+        currentTheme = randoTheme.name;
+        myoptions = Object.assign(randoTheme, defaults)
+      } else {
+        currentTheme = "Generated";
+        myoptions = new RandomOptions(isRandomMode)
+      }
+    }
+    console.log(JSON.stringify(myoptions));
+    generateWEBGL();
+    genGui();
+ 
+  }
+
+  var timeoutID;
+  function autoClick() {
+    if (myoptions.demoMode) {
+      generateOptions(false, Math.random() > .75);
+    }
+    if (timeoutID) window.clearInterval(timeoutID);
+    timeoutID = setInterval(autoClick, myoptions.demoInterval * 1000);
+  }
+
+  function onWindowResize() {
+    canvas.width = Math.min(window.innerHeight, window.innerWidth);
+    canvas.height = canvas.width;
+
+    gl.viewport(0, 0, canvas.width, canvas.height);
+    gl.uniform1f(widthHandle, canvas.width);
+    gl.uniform1f(heightHandle, canvas.height);
+  }
+  
+  function DefaultOptions(){
+
+    this.theme = "Generated";
+    this.demoMode = demoMode;
+    this.demoInterval = demoInterval;
+  }
+
+  function RandomOptions(randomMode) {
+
+    this.theme = "Generated";
+    this.demoMode = demoMode;
+    this.demoInterval = demoInterval;
+
+    let preset = pick(presets);
+    let preset2 = pick(presets);
+    this.numerator = randomMode ? combinator(getRandomInt(1, 5)) : preset.numerator;
+    this.denominator = randomMode ? combinator(getRandomInt(1, 5)) : preset.denominator;
+    this.numerator2 = randomMode ? combinator(getRandomInt(1, 5)) : preset2.numerator;
+    this.denominator2 = randomMode ? combinator(getRandomInt(1, 5)) : preset2.denominator;
+    this.panel = pick(panelExpressions);
+
+    this.colorMode = pick(modes);
+
+    this.color1 = tinycolor.random().toHexString();
+    /*(if we're using a randomly generated color expression, use only random colors (safer, less zeros)):*/
+    this.color2 = !randomMode && Math.random() > 0.75 ? pick(hueColors) : tinycolor.random().toHexString();
+    this.color3 = !randomMode && Math.random() > 0.75 ? pick(primaryColors) : tinycolor.random().toHexString();
+    this.rotation = getRandomInt(-10, 10);
+    this.rotFactor1 = getRandomInt(-2, 2);
+    this.rotFactor2 = getRandomInt(-2, 2);
+
+    this.theta = getRandomInt(-12, 12);
+    this.time = Math.random() * 0.03 - 0.015;
+    this.timeFunc = Math.random() > 0.33 ? "none" : pick(timeFunctions);
+    this.distanceModifier = getRandomFloat(-2, 2);
+
+    this.periodicMultiplier = Math.random() < 0.25 ? 0 : getRandomInt(0, 10);
+    this.motionIterations = getRandomInt(0, 2);
+    this.motionMultiplier = getRandomFloat(0, 2);
+    this.iterationMotion1 = Math.random() > 0.5;
+    this.iterationMotion2 = Math.random() > 0.5;
+
+    this.colorOperator1 = pick(operators);
+    this.colorOperator2 = pick(operators);
+
+    this.motionOperator1 = pick(operators);
+    this.motionOperator2 = pick(operators);
+
+    this.thetaFunc = Math.random() > 0.25 ? pick(["none", "sine"]) : pick(functions); /*tangent only sometimes*/
+    this.pixelation = Math.random() > 0.75 ? getRandomInt(10, 300) : 0;
+
+    this.useTwo = Math.random() > .5;
+    this.useDifferent = Math.random() > .66;
+    this.innerRadius = getRandomFloat(.05, .4);
+
+    //interlace mode: both positions are same size and they rotate opposite
+    if (Math.random() > .5) {
+      this.useTwo = true;
+      this.useDifferent = false;
+      this.innerRadius = .4;
+      this.rotFactor1 = 1.0;
+      this.rotFactor2 = (-1.0);
+    }
+  }
+
+  var wasClosed;
+  var advancedWasClosed;
+  var f1;
+  function genGui() {
+    setValue();
+    myoptions.theme = currentTheme || "Generated";
+    wasClosed = gui && gui.closed;
+    advancedWasClosed = f1 && f1.closed;
+    gui && gui.destroy();
+    gui = new dat.GUI();
+    
+    if (wasClosed) gui.close();
+    
+    gui.add(myoptions, "theme", themes.map(th=>th.name)).onChange(presetChange);
+    gui.add(myoptions, "demoMode").onChange(demoModeChange);
+    gui.add(myoptions, "demoInterval", 1, 30, 1).onChange(demoIntervalChange);
+    f1 = gui.addFolder("advanced");
+    if(advancedWasClosed===false) f1.open();
+    
+    f1.addColor(myoptions, "color1").onChange(setValue);
+    f1.addColor(myoptions, "color2").onChange(setValue);
+    f1.addColor(myoptions, "color3").onChange(setValue);
+
+    f1.add(myoptions, "numerator").onFinishChange(numeratorChanged);
+    f1.add(myoptions, "denominator").onFinishChange(numeratorChanged);
+    f1.add(myoptions, "numerator2").onFinishChange(numeratorChanged);
+    f1.add(myoptions, "denominator2").onFinishChange(numeratorChanged);
+    f1.add(myoptions, "colorMode", modes).onChange(setValue);
+    f1.add(myoptions, "panel").onFinishChange(setValue);
+
+    f1.add(myoptions, "colorOperator1", operators).onChange(setValue);
+    f1.add(myoptions, "colorOperator2", operators).onChange(setValue);
+
+    f1.add(myoptions, "time", -0.015, 0.015).onChange(setValue);
+    f1.add(myoptions, "timeFunc", timeFunctions).onChange(setValue);
+    f1.add(myoptions, "distanceModifier", -2, 2).onChange(setValue);
+
+    f1.add(myoptions, "rotation", -10, 10).onChange(setValue); /*overall rotation factor*/
+    f1.add(myoptions, "rotFactor1", -2, 2, .5).onChange(setValue); /*per position rotation factors*/
+    f1.add(myoptions, "rotFactor2", -2, 2, .5).onChange(setValue);
+
+    f1.add(myoptions, "theta", -12, 12).onChange(setValue);
+    f1.add(myoptions, "thetaFunc", functions).onChange(setValue);
+    f1.add(myoptions, "periodicMultiplier", 0, 20).onChange(setValue);
+
+    f1.add(myoptions, "motionMultiplier", 0.0, 2.0).onChange(setValue);
+    f1.add(myoptions, "motionIterations", 0, 10).onChange(setValue);
+    f1.add(myoptions, "iterationMotion1").onChange(setValue);
+    f1.add(myoptions, "iterationMotion2").onChange(setValue);
+    f1.add(myoptions, "motionOperator1", operators).onChange(setValue);
+    f1.add(myoptions, "motionOperator2", operators).onChange(setValue);
+
+    f1.add(myoptions, "pixelation", 0, 300).onChange(setValue);
+    f1.add(myoptions, "useTwo").onChange(setValue);
+    f1.add(myoptions, "innerRadius", 0, 1).onChange(setValue);
+    f1.add(myoptions, "useDifferent").onChange(setValue);
+
+    function demoIntervalChange() {
+      demoInterval = myoptions.demoInterval;
+    }
+
+    function demoModeChange() {
+      demoMode = myoptions.demoMode;
+    }
+
+    function numeratorChanged() {
+      generateWEBGL();
+      genGui();
+    }
+
+    function presetChange() {
+      currentTheme = myoptions.theme;
+      generateOptions(false, false, myoptions.theme);
+    }
+  }
+
+  function setValue() {
+    /*send the control panel values to webGL*/
+    time = 0.0;
+    var col1 = tinycolor(myoptions.color1);
+    col1.red = col1._r / 255;
+    col1.green = col1._g / 255;
+    col1.blue = col1._b / 255;
+    var col2 = tinycolor(myoptions.color2);
+    col2.red = col2._r / 255;
+    col2.green = col2._g / 255;
+    col2.blue = col2._b / 255;
+    var col3 = tinycolor(myoptions.color3);
+    col3.red = col3._r / 255;
+    col3.green = col3._g / 255;
+    col3.blue = col3._b / 255;
+
+    gl.uniform3f(getUniformLocation(program, "color1"), col1.red, col1.green, col1.blue);
+    gl.uniform3f(getUniformLocation(program, "color2"), col2.red, col2.green, col2.blue);
+    gl.uniform3f(getUniformLocation(program, "color3"), col3.red, col3.green, col3.blue);
+    gl.uniform1i(getUniformLocation(program, "colorMode"), modes.indexOf(myoptions.colorMode));
+    gl.uniform1i(getUniformLocation(program, "colorOperator1"), operators.indexOf(myoptions.colorOperator1));
+    gl.uniform1i(getUniformLocation(program, "colorOperator2"), operators.indexOf(myoptions.colorOperator2));
+
+    gl.uniform1f(getUniformLocation(program, "motionMultiplier"), myoptions.motionMultiplier);
+    gl.uniform1f(getUniformLocation(program, "motionIterations"), myoptions.motionIterations);
+    gl.uniform1f(getUniformLocation(program, "iterationMotion1"), myoptions.iterationMotion1);
+    gl.uniform1f(getUniformLocation(program, "iterationMotion2"), myoptions.iterationMotion2);
+    gl.uniform1i(getUniformLocation(program, "motionOperator1"), operators.indexOf(myoptions.motionOperator1));
+    gl.uniform1i(getUniformLocation(program, "motionOperator2"), operators.indexOf(myoptions.motionOperator2));
+
+    gl.uniform1f(getUniformLocation(program, "rotation"), myoptions.rotation);
+    gl.uniform1f(getUniformLocation(program, "rotFactor1"), myoptions.rotFactor1);
+    gl.uniform1f(getUniformLocation(program, "rotFactor2"), myoptions.rotFactor2);
+
+    gl.uniform1f(getUniformLocation(program, "thetaM"), parseInt(myoptions.theta)); /*theta multiplier*/
+    gl.uniform1i(getUniformLocation(program, "thetaFunc"), functions.indexOf(myoptions.thetaFunc));
+    gl.uniform1f(getUniformLocation(program, "periodicMultiplier"), myoptions.periodicMultiplier);
+    gl.uniform1i(getUniformLocation(program, "timeFunc"), timeFunctions.indexOf(myoptions.timeFunc));
+    gl.uniform1f(getUniformLocation(program, "distanceModifier"), myoptions.distanceModifier);
+    gl.uniform1f(getUniformLocation(program, "pixelation"), myoptions.pixelation);
+
+    gl.uniform1f(getUniformLocation(program, "useTwo"), myoptions.useTwo);
+    gl.uniform1f(getUniformLocation(program, "useDifferent"), myoptions.useDifferent);
+    gl.uniform1f(getUniformLocation(program, "innerRadius"), myoptions.innerRadius);
+  }
+
+  //************** Shader sources **************
+  function vertex() {
+    return `
+      attribute vec2 position;
+      void main() {
+        gl_Position = vec4(position, 0.0, 1.0);
+      }
+      `;
+  }
+
+  function fragment(numerator, denominator, numerator2, denominator2, panel) {
+    var fragmentSource = `
+    #define PI 3.1415
+    precision highp float;
+    
+    uniform int colorMode;
+    uniform vec3 color1;
+    uniform vec3 color2;
+    uniform vec3 color3;
+    uniform float rotation;
+    uniform float thetaM;
+    uniform int thetaFunc;
+    uniform float motionMultiplier;
+    uniform float motionIterations;
+    uniform bool iterationMotion1;
+    uniform bool iterationMotion2;
+    uniform int colorOperator1;
+    uniform int colorOperator2;
+    uniform int motionOperator1;
+    uniform int motionOperator2;
+    uniform float periodicMultiplier;
+    uniform int timeFunc;
+    uniform float distanceModifier;
+    uniform float pixelation;
+    uniform float rotFactor1;
+    uniform float rotFactor2;
+    
+    uniform bool useTwo;
+    uniform bool useDifferent;
+    uniform float innerRadius;
+    
+    uniform float width;
+    uniform float height;
+    vec2 resolution = vec2(width, height);
+    uniform float time;
+    
+    vec2 rotate(vec2 _st, float _angle) {
+        _st -= 0.5;
+        _st =  mat2(cos(_angle),-sin(_angle), sin(_angle),cos(_angle)) * _st;
+        _st.y += 0.5;
+        _st.x += .5;
+        return _st;
+    }
+    
+    vec4 generatePlanetoid(float radius, bool isDifferent, float clockwise, float x, float y){
+    
+      //set up positions and time
+      vec2 uv = gl_FragCoord.xy/resolution.xy;
+      float t = mod(time, 20.0);
+      vec2 pos = uv;
+      pos = vec2(x, y)-pos;
+    
+      if(pixelation>0.0){
+        uv = fract(uv*pixelation);
+      }
+      //calculate distances and angles
+      float d = length(pos)*1.0;/*distance from center*/
+      float id = distanceModifier - d;/*inverse distance, greater near the center*/
+      float theta = -(atan(pos.y, pos.x))*(clockwise);
+      float rot = (clockwise * rotation) + (id+1.0);
+    
+      rot *= timeFunc == 0 ? t :
+             timeFunc == 1 ? sin(t/4.0) :
+             (.5*sin(t/3.0)+.5*cos(t/4.0));
+    
+      rot = thetaFunc == 0 ? rot + (thetaM*theta) :
+            thetaFunc == 1 ? rot + sin(thetaM*theta) :
+            rot +  tan(thetaM*theta);
+       
+      //rotate both positions
+      pos = rotate(pos, rot);
+      uv = rotate(uv, rot);
+    
+      vec3 col1 = color1;
+      vec3 col2 = color2;
+      vec3 col3 = color3;
+    
+    //motionIterations:  using color1+pos and color2+uv inside these loops
+      float m = motionMultiplier;
+      for(float i = 1.0; i < 30.0; i+=1.0){ 
+          if(i<motionIterations){
+            uv.x += m*col2.x*(cos(id*i)*uv.y*uv.x);
+            if(iterationMotion1) {
+                float firstArg = m/2.0*col2.y*(cos(col2.z)/d*i);
+                uv  = motionOperator1 == 0 ? uv :
+                  motionOperator1 == 1 ? uv + firstArg: 
+                  motionOperator1 == 2 ? uv - firstArg : 
+                  motionOperator1 == 3 ? uv * firstArg : 
+                  uv / firstArg;
+            }
+            pos.y += m*col1.x*(sin(2.0*i));
+            if(iterationMotion2) {
+                float secondArg = (m/2.0*col1.y*col1.z*(1.0/d*i));
+                pos = motionOperator2 == 0 ? pos : 
+                  motionOperator2 == 1 ? pos + secondArg : 
+                  motionOperator2 == 2 ? pos - secondArg : 
+                  motionOperator2 == 3 ? pos * secondArg : 
+                  pos / secondArg;
+            }
+          }  
+       }
+              
+      //shapes (floats) (used combinator expressions)
+      float tri1 = step(pos.y, pos.x);
+      float tri2 = step(1.0-pos.x, pos.y);
+      float tri3 = step(pos.x, pos.y);
+      float tri4 = step(1.0-pos.y, pos.x);
+
+      //shapes (calculated vec3's)
+      vec3 s1 = ((col1.z-col1.y))*col1.x*(cos(rot+id*abs(pos.xyx)/(col1)));
+      vec3 s2 = (col2.x-col2.y)*col2.z*cos(id*abs(uv.xyx)/(col2));
+      vec3 s3 = (col3.z-col3.x)*col3.y*sin(+d+rot+uv.xyx+pos.xyx);
+      
+      //for shapes 1 and 2, combine with distance/inverseDistance
+      float dArg = smoothstep(radius,0.0, clamp(d, 0.0, 1.0));
+      float surface = smoothstep(radius, radius-.02, d);
+      s1 = s1/surface;
+      s2 = s2/surface;
+      s3 /= surface;
+      col1 /= surface;
+      col2 /= surface;
+      col3 /= dArg;
+
+    //for shapes 1 and 2, combine with distance
+    s1 = colorOperator1 == 0 ? s1 : 
+    colorOperator1 == 1 ? s1+dArg :
+    colorOperator1 == 2 ? s1-dArg :
+    colorOperator1 == 3 ? s1*dArg :
+        s1/dArg; 
+    s2 = colorOperator2 == 0 ? s2 :
+        colorOperator2 == 1 ? s2+dArg :
+        colorOperator2 == 2 ? s2-dArg :
+        colorOperator2 == 3 ? s2*dArg :
+        s2/dArg;
+    
+    
+      float arg = (d+rot+uv.x);
+      vec3 s4 = mix(s1, s2, col3/cos(arg*periodicMultiplier));
+      s4 /= dArg;
+    
+      vec4 panel = vec4(((${panel})/3.0),1.0);
+      vec4 thing = vec4((${numerator})/(${denominator}),1.0);
+      vec4 different = vec4((${numerator2})/(${denominator2}),1.0);
+      if(isDifferent) thing = different;
+    
+      vec4 rez = colorMode == 0 ? panel * thing : 
+                     colorMode == 1 ? panel / thing : 
+                     colorMode == 2 ? panel + thing :
+                     colorMode == 3 ? panel - thing :
+                     colorMode == 4 ? thing / panel :
+                     thing - panel;
+      return clamp(rez, 0.0, 1.0);
+    }
+    void main(){  
+    
+        vec4 rez1 = vec4(0.0);
+        /*vec4 generatePlanetoid(float radius, bool isDifferent, float clockwise, float x, float y)*/
+        /* x and y values are always .5 (center) */
+        rez1 += 1.5*generatePlanetoid(.4, false, rotFactor1, .5,.5);
+        vec4 rez2 = 1.5*generatePlanetoid(innerRadius, useDifferent, rotFactor2, .5,.5);
+        
+        if(rez2.x >= 1.0) rez2.x = 0.0;
+        if(rez2.y >= 1.0) rez2.y = 0.0;
+        if(rez2.z >= 1.0) rez2.z = 0.0;
+        if(rez1.x >= 1.0) rez1.x = 0.0;
+        if(rez1.y >= 1.0) rez1.y = 0.0;
+        if(rez1.z >= 1.0) rez1.z = 0.0;
+        
+        vec4 result = rez1;
+        if(useTwo) result += rez2;
+        if(result.x >= 1.0) result.x = 0.0;
+        if(result.y >= 1.0) result.y = 0.0;
+        if(result.z >= 1.0) result.z = 0.0;
+    
+        gl_FragColor = result;
+        //rez1-(rez1*rez2)
+       }
+    `;
+    return fragmentSource;
+  }
+
+  var widthHandle, heightHandle, timeHandle, program;
+  /*DRAW function*/
+  function draw() {
+
+    time += myoptions.time;
+    gl.uniform1f(timeHandle, time);
+    //Draw a triangle strip connecting vertices 0-4
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    requestAnimationFrame(draw);
+  }
+
+  /*generate WEBGL*/
+  function generateWEBGL() {
+    //Create vertex and fragment shaders
+    var vertexShader = compileShader(vertex(), gl.VERTEX_SHADER);
+    var fragmentShader = compileShader(
+      fragment(myoptions.numerator, myoptions.denominator, myoptions.numerator2, myoptions.denominator2, myoptions.panel),
+      gl.FRAGMENT_SHADER
+    );
+
+    //Create shader programs
+    program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+
+    gl.useProgram(program);
+
+    //Set up rectangle covering entire canvas
+    var vertexData = new Float32Array([
+      -1.0,
+      1.0, // top left
+      -1.0,
+      -1.0, // bottom left
+      1.0,
+      1.0, // top right
+      1.0,
+      -1.0 // bottom right
+    ]);
+
+    //Create vertex buffer
+    var vertexDataBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
+
+    // Layout of our data in the vertex buffer
+    var positionHandle = getAttribLocation(program, "position");
+
+    gl.enableVertexAttribArray(positionHandle);
+    gl.vertexAttribPointer(
+      positionHandle,
+      2, // position is a vec2 (2 values per component)
+      gl.FLOAT, // each component is a float
+      false, // don't normalize values
+      2 * 4, // two 4 byte float components per vertex (32 bit float is 4 bytes)
+      0 // how many bytes inside the buffer to start from
+    );
+
+    //Set uniform handle
+    timeHandle = getUniformLocation(program, "time");
+    widthHandle = getUniformLocation(program, "width");
+    heightHandle = getUniformLocation(program, "height");
+    gl.uniform1f(widthHandle, canvas.width);
+    gl.uniform1f(heightHandle, canvas.height);
+  }
+
+  /*HELPERS*/
+  function compileShader(shaderSource, shaderType) {
+    var shader = gl.createShader(shaderType);
+    gl.shaderSource(shader, shaderSource);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
+    }
+    return shader;
+  }
+
+  function getAttribLocation(program, name) {
+    var attributeLocation = gl.getAttribLocation(program, name);
+    if (attributeLocation === -1) {
+      throw "Cannot find attribute " + name + ".";
+    }
+    return attributeLocation;
+  }
+
+  function getUniformLocation(program, name) {
+    var attributeLocation = gl.getUniformLocation(program, name);
+    if (attributeLocation === -1) {
+      throw "Cannot find uniform " + name + ".";
+    }
+    return attributeLocation;
+  }
+
+  function pick(arr) {
+    return arr[Math.floor(Math.random() * arr.length)];
+  }
+
+  function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  function getRandomFloat(min, max) {
+    return Math.random() * (max - min) + min;
+  }
+
+  function combinator(isNumerator, numTerms) {
+    /*fairly dumb string generator, returns string like: `col2*col3-s1`*/
+    /*will not pick same operand twice in a row*/
+    let shapes = ["s1", "s2", "s3", "s4", "col1", "col2", "col3"];/*vec3's*/
+    let floats = ["dArg", "surface", "tri1", "tri2", "tri3", "tri4"];
+    let everything = [...shapes, ...floats];
+    let ops = ["+", "-", "+", "+", "-", "*", "/"];/*would prefer more plusses than minuses in these strings*/
+    var result, lastPick;
+    if (numTerms == 1) {
+      result = pick(shapes);
+    } else {
+      /*ensure at least one shape (can't be an all single value (float) expression, we need a vec3*/
+      lastPick = isNumerator? pick(shapes) : pick(everything);
+      result = lastPick + " " + pick(ops);
+      lastPick = pick(everything.filter(o => o != lastPick));
+      result += " " + lastPick;
+      for (let i = 2; i < numTerms; i++) {
+        lastPick = pick(everything.filter(o => o != lastPick));
+        result += ` ${pick(ops)} ${lastPick} `;
+      }
+    }
+    return result;
+  }
+})("sweaverD.com");
\ No newline at end of file
diff --git a/planetary-vignettes/dist/style.css b/planetary-vignettes/dist/style.css
new file mode 100644
index 0000000..c171059
--- /dev/null
+++ b/planetary-vignettes/dist/style.css
@@ -0,0 +1,21 @@
+body {
+  background-color: #000;    
+  margin: 0;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:100vw;
+  height:100vh;
+}
+
+canvas {
+  padding:10px;
+}
+
+@media only screen and (min-width: 1000px) {
+  canvas {
+    padding:20px;
+  }
+}
\ No newline at end of file
diff --git a/planetary-vignettes/license.txt b/planetary-vignettes/license.txt
new file mode 100644
index 0000000..341a038
--- /dev/null
+++ b/planetary-vignettes/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Scott Weaver (https://codepen.io/sweaver2112/pen/wvayoKB)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/planetary-vignettes/src/index.html b/planetary-vignettes/src/index.html
new file mode 100644
index 0000000..79739fc
--- /dev/null
+++ b/planetary-vignettes/src/index.html
@@ -0,0 +1,4 @@
+<body>
+  <p id="controls"></p>
+  <canvas id="canvas"></canvas>
+</body>
\ No newline at end of file
diff --git a/planetary-vignettes/src/script.js b/planetary-vignettes/src/script.js
new file mode 100644
index 0000000..60f1b62
--- /dev/null
+++ b/planetary-vignettes/src/script.js
@@ -0,0 +1,634 @@
+(function () {
+  var canvas = document.getElementById("canvas");
+  canvas.width = Math.min(window.innerWidth, window.innerHeight);
+  canvas.height = canvas.width;
+  var gl = canvas.getContext("webgl");
+  canvas.addEventListener("click", function (ev) {
+    generateOptions(false, Math.random() > .75); /*75% of the time, stick with a safer preset expression, otherwise generate random combinator*/
+  });
+  var myoptions;
+  var modes = ["multiply", "divide", "add", "subtract", "flip divide", "flip subtract"];/*colorMode*/
+  var operators = ["none", "add", "subtract", "multiply", "divide"];/*colorOperator and motionOperator*/
+  var functions = ["none", "sine", "tan"];
+  var primaryColors = ["#000000", "#ffffff", "#ff0000", "#00ff00", "#0000ff", "#ff00ff", "#00ffff", "#ffff00", "#ff6600", "#7f00ff", "#808080", "#800000", "#808000", "#008000", "#800080", "#008080", "#000080"];
+  var hueColors = primaryColors.filter(c => c != "#000000" && c != "#ffffff");
+  var timeFunctions = ["none", "sine", "sine + cos"];
+  var gui;
+  var demoMode = false;
+  var demoInterval = 7;
+  var time = 0.0;
+  /*safer combinations of the colors and shapes that don't produce lots of black screens (unlike the randomly generated GLSL frargments which do):*/
+  var presets = [{
+      numerator: "s1+s2/s4",
+      denominator: "s4-s1-s2+s3"
+    },
+    {
+      numerator: "s1+s2/s4",
+      denominator: "s4-s1-col2+col3"
+    },
+    {
+      numerator: "s2*col2-col3",
+      denominator: "s4+s3*s1"
+    },
+    {
+      numerator: "col2 + col1",
+      denominator: "s4+s3*s1"
+    }
+  ];
+  var panelExpressions = [
+    "col1+col2+col3",
+    "s1+s2+s3",
+    "s1*col1+s2*col2+s3*col3"
+  ];
+ 
+  /*cool patterns. load one of these on first load*/
+  var currentTheme;
+  var themes = [
+    {"name":"Generated"},
+    {"name":"Eye of the Beholder","color1":"#4add49","color2":"#7caaf8","color3":"#bc0fcc","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"s1","denominator2":"s1","panel":"s1*col1+s2*col2+s3*col3","colorMode":"flip subtract","colorOperator1":"none","colorOperator2":"none","time":0.0065,"timeFunc":"sine + cos","distanceModifier":0.4,"rotation":8,"rotFactor1":1,"rotFactor2":-1,"theta":9,"thetaFunc":"none","periodicMultiplier":10,"motionMultiplier":2,"motionIterations":2,"iterationMotion1":true,"iterationMotion2":true,"motionOperator1":"divide","motionOperator2":"multiply","pixelation":0,"useTwo":true,"innerRadius":0.4,"useDifferent":false},
+    {"name":"Sinusoid","numerator":"col2 + col1","denominator":"s4+s3*s1","numerator2":"s1+s2/s4","denominator2":"s4-s1-s2+s3","panel":"col1+col2+col3","colorMode":"multiply","color1":"#8d14ee","color2":"#72e068","color3":"#000000","rotation":-1,"rotFactor1":1,"rotFactor2":-1,"theta":6,"time":-.01,"timeFunc":"none","distanceModifier":0.1,"periodicMultiplier":0,"motionIterations":2,"motionMultiplier":0.62,"iterationMotion1":false,"iterationMotion2":true,"colorOperator1":"add","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"subtract","thetaFunc":"sine","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Flor de Llama","numerator":"s1+s2/s4","denominator":"s4-s1-s2+s3","numerator2":"col2 + col1","denominator2":"s4+s3*s1","panel":"s1+s2+s3","colorMode":"divide","color1":"#1f607e","color2":"#f019c6","color3":"#a6343e","rotation":-9,"rotFactor1":1,"rotFactor2":-1,"theta":6,"time":-0.0070,"timeFunc":"sine + cos","distanceModifier":1.2673,"periodicMultiplier":6,"motionIterations":2,"motionMultiplier":1.2372,"iterationMotion1":true,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"add","motionOperator2":"subtract","thetaFunc":"sine","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Cosmic Tomato","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"s1+s2/s4","denominator2":"s4-s1-s2+s3","panel":"s1*col1+s2*col2+s3*col3","colorMode":"flip subtract","color1":"#9d32f5","color2":"#54760d","color3":"#f78596","rotation":0,"rotFactor1":-2,"rotFactor2":0,"theta":-2,"time":0.003,"timeFunc":"none","distanceModifier":0.156,"periodicMultiplier":9,"motionIterations":1,"motionMultiplier":0.375,"iterationMotion1":false,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"multiply","thetaFunc":"sine","pixelation":0,"useTwo":false,"useDifferent":true,"innerRadius":0.189},
+    {"name":"Prismatic Charm","numerator":"col2 + col1","denominator":"s4+s3*s1","numerator2":"s1+s2/s4","denominator2":"s4-s1-col2+col3","panel":"s1+s2+s3","colorMode":"subtract","color1":"#b05a18","color2":"#c46171","color3":"#ffffff","rotation":3,"rotFactor1":1,"rotFactor2":-1,"theta":-4,"time":-0.008,"timeFunc":"none","distanceModifier":0.58,"periodicMultiplier":2,"motionIterations":2,"motionMultiplier":0.74,"iterationMotion1":true,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"multiply","motionOperator2":"add","thetaFunc":"none","pixelation":158,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Orange Crush","numerator":"s2*col2-col3","denominator":"s4+s3*s1","numerator2":"s1+s2/s4","denominator2":"s4-s1-col2+col3","panel":"s1*col1+s2*col2+s3*col3","colorMode":"subtract","color1":"#691157","color2":"#ffff00","color3":"#177691","rotation":6,"rotFactor1":1,"rotFactor2":-1,"theta":-10,"time":0.003,"timeFunc":"sine","distanceModifier":-1.34,"periodicMultiplier":10,"motionIterations":1,"motionMultiplier":1.20,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"subtract","motionOperator2":"multiply","thetaFunc":"sine","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Cosmic Bloom","numerator":"s1+s2/s4","denominator":"s4-s1-s2+s3","numerator2":"s2*col2-col3","denominator2":"s4+s3*s1","panel":"s1+s2+s3","colorMode":"divide","color1":"#354ffa","color2":"#5fe483","color3":"#62be30","rotation":4,"rotFactor1":1,"rotFactor2":-1,"theta":-3,"time":0.003,"timeFunc":"none","distanceModifier":.17,"periodicMultiplier":6,"motionIterations":0,"motionMultiplier":1.9,"iterationMotion1":false,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"multiply","motionOperator2":"add","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Virus","numerator":"s4 + dArg - col1 ","denominator":"s3 + surface","numerator2":"col3 - col1 * s2 ","denominator2":"col1","panel":"s1+s2+s3","colorMode":"add","color1":"#b7f48c","color2":"#d1720c","color3":"#000000","rotation":-1,"rotFactor1":1,"rotFactor2":-1,"theta":-4,"time":0.0078,"timeFunc":"none","distanceModifier":-0.0415,"periodicMultiplier":0,"motionIterations":0,"motionMultiplier":0.2892,"iterationMotion1":false,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"add","motionOperator2":"subtract","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},/*"c3:#b46ce9"*/
+    {"name":"Snowflake","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"s1+s2/s4","denominator2":"s4-s1-col2+col3","panel":"col1+col2+col3","colorMode":"add","color1":"#dae216","color2":"#a6c12f","color3":"#eb8dd3","rotation":10,"rotFactor1":1,"rotFactor2":-1,"theta":-9,"time":-0.003,"timeFunc":"none","distanceModifier":-1.49,"periodicMultiplier":0,"motionIterations":0,"motionMultiplier":1.64,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"add","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Pixie","numerator":"col2 + s3","denominator":"s3 - s4","numerator2":"s1 + col2 + dArg  / col2 ","denominator2":"col1 + s4 * s3  - col2 ","panel":"s1+s2+s3","colorMode":"multiply","color1":"#3b8aad","color2":"#94c7a9","color3":"#36efd1","rotation":0,"rotFactor1":-1,"rotFactor2":2,"theta":6,"time":0.0045,"timeFunc":"none","distanceModifier":-0.3959,"periodicMultiplier":8,"motionIterations":2,"motionMultiplier":1.2988,"iterationMotion1":true,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"add","thetaFunc":"sine","pixelation":196,"useTwo":false,"useDifferent":false,"innerRadius":0.3590},
+    {"name":"Tie-fighter","numerator":"s1+s2/s4","denominator":"s4-s1-s2+s3","numerator2":"s2*col2-col3","denominator2":"s4+s3*s1","panel":"s1*col1+s2*col2+s3*col3","colorMode":"flip subtract","color1":"#50e7e5","color2":"#ff00ff","color3":"#e287f1","rotation":0,"rotFactor1":1,"rotFactor2":-1,"theta":2,"time":-0.01,"timeFunc":"none","distanceModifier":-1.46,"periodicMultiplier":1,"motionIterations":1,"motionMultiplier":1.79,"iterationMotion1":true,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"multiply","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Carpet Ride","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"col2 + col1","denominator2":"s4+s3*s1","panel":"col1+col2+col3","colorMode":"add","color1":"#be5557","color2":"#704df7","color3":"#81d820","rotation":2,"rotFactor1":1,"rotFactor2":-1,"theta":6,"time":-0.0108,"timeFunc":"none","distanceModifier":-1.5942,"periodicMultiplier":8,"motionIterations":1,"motionMultiplier":0.2714,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"add","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Chlorophyll","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"s1+s2/s4","denominator2":"s4-s1-s2+s3","panel":"col1+col2+col3","colorMode":"subtract","color1":"#c487cb","color2":"#00ff00","color3":"#1e1c80","rotation":-3,"rotFactor1":1,"rotFactor2":-1,"theta":9,"time":-0.0094,"timeFunc":"none","distanceModifier":0.1387,"periodicMultiplier":9,"motionIterations":2,"motionMultiplier":1.5999,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"subtract","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Lace","numerator":"s1+s2/s4","denominator":"s4-s1-s2+s3","numerator2":"col2 + col1","denominator2":"s4+s3*s1","panel":"col1+col2+col3","colorMode":"multiply","color1":"#edde34","color2":"#e0f076","color3":"#faa0a8","rotation":-5,"rotFactor1":1,"rotFactor2":-1,"theta":5,"time":-0.0057,"timeFunc":"none","distanceModifier":-1.0695,"periodicMultiplier":10,"motionIterations":1,"motionMultiplier":0.349,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"add","motionOperator2":"divide","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Throwing Star","numerator":"s1+s2/s4","denominator":"s4-s1-s2+s3","numerator2":"s1+s2/s4","denominator2":"s4-s1-s2+s3","panel":"col1+col2+col3","colorMode":"flip divide","color1":"#1e50b5","color2":"#808000","color3":"#e4921f","rotation":-3,"rotFactor1":1,"rotFactor2":-1,"theta":5,"time":-0.0057,"timeFunc":"none","distanceModifier":0.297,"periodicMultiplier":0,"motionIterations":2,"motionMultiplier":1.7,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"subtract","thetaFunc":"none","pixelation":179,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Kaleidoscope","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"t+s1+s2/s4","denominator2":"s4-s1-col2+col3","panel":"s1*col1+s2*col2+s3*col3","colorMode":"add","color1":"#c9a30c","color2":"#354a83","color3":"#0d90b9","rotation":4,"rotFactor1":1,"rotFactor2":-1,"theta":-12,"time":-0.0034,"timeFunc":"none","distanceModifier":0.6896,"periodicMultiplier":4,"motionIterations":1,"motionMultiplier":0.3291,"iterationMotion1":false,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"multiply","motionOperator2":"subtract","thetaFunc":"sine","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Planet Plaid","numerator":"s1 + surface - s2  + s4  - col2 ","denominator":"s3 * s2 + s1  + s4 ","numerator2":"s4 / dArg + col2 ","denominator2":"col3 / s2 + surface  * col3  + s2 ","panel":"s1+s2+s3","colorMode":"divide","color1":"#5e22eb","color2":"#f4367d","color3":"#f95b56","rotation":4,"rotFactor1":1,"rotFactor2":-1,"theta":-6,"time":-0.0049,"timeFunc":"none","distanceModifier":-1.7720,"periodicMultiplier":7,"motionIterations":2,"motionMultiplier":1.8759,"iterationMotion1":false,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"multiply","motionOperator2":"divide","thetaFunc":"sine","pixelation":110,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Crystal Ball","numerator":"col2 + col1","denominator":"s4+s3*s1","numerator2":"s1+s2/s4","denominator2":"s4-s1-s2+s3","panel":"s1*col1+s2*col2+s3*col3","colorMode":"subtract","color1":"#71a8a0","color2":"#0c3eeb","color3":"#df7bdc","rotation":-7,"rotFactor1":1,"rotFactor2":-1,"theta":3,"time":0.0076,"timeFunc":"none","distanceModifier":-1.6879,"periodicMultiplier":2,"motionIterations":2,"motionMultiplier":0.5590,"iterationMotion1":true,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"subtract","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"4-Leaf Clover","numerator":"s4 - col2 / dArg ","denominator":"s1 + col1 / surface  + col2  + s2 ","numerator2":"s1 + col3 / surface  + col2 ","denominator2":"surface - s1 - s4  + s1 ","panel":"s1*col1+s2*col2+s3*col3","colorMode":"divide","color1":"#2beb47","color2":"#06c3bc","color3":"#470f28","rotation":2,"rotFactor1":1,"rotFactor2":-1,"theta":2,"time":0.0039,"timeFunc":"none","distanceModifier":-0.3765,"periodicMultiplier":2,"motionIterations":1,"motionMultiplier":0.7453,"iterationMotion1":false,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"subtract","motionOperator2":"divide","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"White Christmas","numerator":"s2*col2-col3","denominator":"s4+s3*s1","numerator2":"s2*col2-col3","denominator2":"s4+s3*s1","panel":"s1+s2+s3","colorMode":"flip subtract","color1":"#16746e","color2":"#7cc3d2","color3":"#94de3b","rotation":9,"rotFactor1":1,"rotFactor2":-1,"theta":-12,"time":-0.0030,"timeFunc":"none","distanceModifier":0.4001,"periodicMultiplier":4,"motionIterations":2,"motionMultiplier":0.1668,"iterationMotion1":true,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"multiply","motionOperator2":"multiply","thetaFunc":"sine","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Radioactive","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"col2 + col1","denominator2":"s4+s3*s1","panel":"s1+s2+s3","colorMode":"add","color1":"#fa6d91","color2":"#e87e6b","color3":"#ffffff","rotation":-9,"rotFactor1":1,"rotFactor2":-1,"theta":3,"time":0.002,"timeFunc":"none","distanceModifier":0.1079,"periodicMultiplier":0,"motionIterations":1,"motionMultiplier":1.9417,"iterationMotion1":false,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"multiply","motionOperator2":"multiply","thetaFunc":"sine","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Bloodshot","numerator":"col2 + col1","denominator":"s4+s3*s1","numerator2":"s1+s2/s4","denominator2":"s4-s1-s2+s3","panel":"s1+s2+s3","colorMode":"flip subtract","color1":"#cd70a9","color2":"#03e9c2","color3":"#c4acbd","rotation":4,"rotFactor1":1,"rotFactor2":-1,"theta":5,"time":-0.0002,"timeFunc":"none","distanceModifier":-0.2232,"periodicMultiplier":0,"motionIterations":0,"motionMultiplier":1.6077,"iterationMotion1":false,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"divide","motionOperator2":"divide","thetaFunc":"none","pixelation":136,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Ring of Power", "numerator":"s3 * col3","denominator":"s1 - col2","numerator2":"s4 - col1","denominator2":"col1 - tri4","panel":"col1+col2+col3","colorMode":"flip divide","color1":"#590e82","color2":"#73485b","color3":"#555122","rotation":1,"rotFactor1":1,"rotFactor2":-1,"theta":-3,"time":-0.0012,"timeFunc":"none","distanceModifier":1.2779,"periodicMultiplier":10,"motionIterations":2,"motionMultiplier":1.7584,"iterationMotion1":true,"iterationMotion2":false,"colorOperator1":"none","colorOperator2":"none","motionOperator1":"subtract","motionOperator2":"divide","thetaFunc":"none","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Sundial","numerator":"s1+s2/s4","denominator":"s4-s1-s2+s3","numerator2":"s1+s2/s4","denominator2":"s4-s1-col2+col3","panel":"col1+col2+col3","colorMode":"divide","color1":"#c7532e","color2":"#eda4ca","color3":"#1559f5","rotation":3,"rotFactor1":1,"rotFactor2":-1,"theta":-7,"time":-0.0018,"timeFunc":"none","distanceModifier":0.8520,"periodicMultiplier":6,"motionIterations":0,"motionMultiplier":0.0434,"iterationMotion1":false,"iterationMotion2":true,"colorOperator1":"subtract","colorOperator2":"add","motionOperator1":"divide","motionOperator2":"none","thetaFunc":"tan","pixelation":0,"useTwo":true,"useDifferent":false,"innerRadius":0.4},
+    {"name":"Amulet","numerator":"s1+s2/s4","denominator":"s4-s1-col2+col3","numerator2":"s1+s2/s4","denominator2":"s4-s1-col2+col3","panel":"s1+s2+s3","colorMode":"divide","color1":"#1be19f","color2":"#0e62a6","color3":"#5a31f3","rotation":4,"rotFactor1":1,"rotFactor2":-1,"theta":-8,"time":-0.0094,"timeFunc":"sine + cos","distanceModifier":-1.1319,"periodicMultiplier":0,"motionIterations":2,"motionMultiplier":1.4210,"iterationMotion1":false,"iterationMotion2":true,"colorOperator1":"none","colorOperator2":"add","motionOperator1":"subtract","motionOperator2":"multiply","thetaFunc":"sine","pixelation":292,"useTwo":true,"useDifferent":false,"innerRadius":0.4}
+  ]
+
+  /*INIT*/
+  window.addEventListener("resize", onWindowResize, false);
+  generateOptions(true, false);
+  if(canvas.width<360) gui.close();
+  draw();
+  autoClick();
+  /*END INIT*/
+
+  function generateOptions(isDefault, isRandomMode, theme) {
+    let defaults = new DefaultOptions();
+    if(isDefault) { /*load a preset on first load*/
+      let randoTheme = pick(themes.filter(th=>th.name!="Generated"));
+      currentTheme = randoTheme.name;
+      myoptions = Object.assign(randoTheme, defaults)
+    } else if(theme && theme!="Generated") { /*or user picked a theme*/
+      let t = themes.filter(th=>th.name==theme)[0];
+      myoptions = Object.assign(t, defaults);
+    } else { /*or it's random generation time. even then, sometimes use a preset*/
+      if(Math.random()>.75){
+        let randoTheme = pick(themes.filter(th=>th.name!="Generated"));
+        currentTheme = randoTheme.name;
+        myoptions = Object.assign(randoTheme, defaults)
+      } else {
+        currentTheme = "Generated";
+        myoptions = new RandomOptions(isRandomMode)
+      }
+    }
+    console.log(JSON.stringify(myoptions));
+    generateWEBGL();
+    genGui();
+ 
+  }
+
+  var timeoutID;
+  function autoClick() {
+    if (myoptions.demoMode) {
+      generateOptions(false, Math.random() > .75);
+    }
+    if (timeoutID) window.clearInterval(timeoutID);
+    timeoutID = setInterval(autoClick, myoptions.demoInterval * 1000);
+  }
+
+  function onWindowResize() {
+    canvas.width = Math.min(window.innerHeight, window.innerWidth);
+    canvas.height = canvas.width;
+
+    gl.viewport(0, 0, canvas.width, canvas.height);
+    gl.uniform1f(widthHandle, canvas.width);
+    gl.uniform1f(heightHandle, canvas.height);
+  }
+  
+  function DefaultOptions(){
+
+    this.theme = "Generated";
+    this.demoMode = demoMode;
+    this.demoInterval = demoInterval;
+  }
+
+  function RandomOptions(randomMode) {
+
+    this.theme = "Generated";
+    this.demoMode = demoMode;
+    this.demoInterval = demoInterval;
+
+    let preset = pick(presets);
+    let preset2 = pick(presets);
+    this.numerator = randomMode ? combinator(getRandomInt(1, 5)) : preset.numerator;
+    this.denominator = randomMode ? combinator(getRandomInt(1, 5)) : preset.denominator;
+    this.numerator2 = randomMode ? combinator(getRandomInt(1, 5)) : preset2.numerator;
+    this.denominator2 = randomMode ? combinator(getRandomInt(1, 5)) : preset2.denominator;
+    this.panel = pick(panelExpressions);
+
+    this.colorMode = pick(modes);
+
+    this.color1 = tinycolor.random().toHexString();
+    /*(if we're using a randomly generated color expression, use only random colors (safer, less zeros)):*/
+    this.color2 = !randomMode && Math.random() > 0.75 ? pick(hueColors) : tinycolor.random().toHexString();
+    this.color3 = !randomMode && Math.random() > 0.75 ? pick(primaryColors) : tinycolor.random().toHexString();
+    this.rotation = getRandomInt(-10, 10);
+    this.rotFactor1 = getRandomInt(-2, 2);
+    this.rotFactor2 = getRandomInt(-2, 2);
+
+    this.theta = getRandomInt(-12, 12);
+    this.time = Math.random() * 0.03 - 0.015;
+    this.timeFunc = Math.random() > 0.33 ? "none" : pick(timeFunctions);
+    this.distanceModifier = getRandomFloat(-2, 2);
+
+    this.periodicMultiplier = Math.random() < 0.25 ? 0 : getRandomInt(0, 10);
+    this.motionIterations = getRandomInt(0, 2);
+    this.motionMultiplier = getRandomFloat(0, 2);
+    this.iterationMotion1 = Math.random() > 0.5;
+    this.iterationMotion2 = Math.random() > 0.5;
+
+    this.colorOperator1 = pick(operators);
+    this.colorOperator2 = pick(operators);
+
+    this.motionOperator1 = pick(operators);
+    this.motionOperator2 = pick(operators);
+
+    this.thetaFunc = Math.random() > 0.25 ? pick(["none", "sine"]) : pick(functions); /*tangent only sometimes*/
+    this.pixelation = Math.random() > 0.75 ? getRandomInt(10, 300) : 0;
+
+    this.useTwo = Math.random() > .5;
+    this.useDifferent = Math.random() > .66;
+    this.innerRadius = getRandomFloat(.05, .4);
+
+    //interlace mode: both positions are same size and they rotate opposite
+    if (Math.random() > .5) {
+      this.useTwo = true;
+      this.useDifferent = false;
+      this.innerRadius = .4;
+      this.rotFactor1 = 1.0;
+      this.rotFactor2 = (-1.0);
+    }
+  }
+
+  var wasClosed;
+  var advancedWasClosed;
+  var f1;
+  function genGui() {
+    setValue();
+    myoptions.theme = currentTheme || "Generated";
+    wasClosed = gui && gui.closed;
+    advancedWasClosed = f1 && f1.closed;
+    gui && gui.destroy();
+    gui = new dat.GUI();
+    
+    if (wasClosed) gui.close();
+    
+    gui.add(myoptions, "theme", themes.map(th=>th.name)).onChange(presetChange);
+    gui.add(myoptions, "demoMode").onChange(demoModeChange);
+    gui.add(myoptions, "demoInterval", 1, 30, 1).onChange(demoIntervalChange);
+    f1 = gui.addFolder("advanced");
+    if(advancedWasClosed===false) f1.open();
+    
+    f1.addColor(myoptions, "color1").onChange(setValue);
+    f1.addColor(myoptions, "color2").onChange(setValue);
+    f1.addColor(myoptions, "color3").onChange(setValue);
+
+    f1.add(myoptions, "numerator").onFinishChange(numeratorChanged);
+    f1.add(myoptions, "denominator").onFinishChange(numeratorChanged);
+    f1.add(myoptions, "numerator2").onFinishChange(numeratorChanged);
+    f1.add(myoptions, "denominator2").onFinishChange(numeratorChanged);
+    f1.add(myoptions, "colorMode", modes).onChange(setValue);
+    f1.add(myoptions, "panel").onFinishChange(setValue);
+
+    f1.add(myoptions, "colorOperator1", operators).onChange(setValue);
+    f1.add(myoptions, "colorOperator2", operators).onChange(setValue);
+
+    f1.add(myoptions, "time", -0.015, 0.015).onChange(setValue);
+    f1.add(myoptions, "timeFunc", timeFunctions).onChange(setValue);
+    f1.add(myoptions, "distanceModifier", -2, 2).onChange(setValue);
+
+    f1.add(myoptions, "rotation", -10, 10).onChange(setValue); /*overall rotation factor*/
+    f1.add(myoptions, "rotFactor1", -2, 2, .5).onChange(setValue); /*per position rotation factors*/
+    f1.add(myoptions, "rotFactor2", -2, 2, .5).onChange(setValue);
+
+    f1.add(myoptions, "theta", -12, 12).onChange(setValue);
+    f1.add(myoptions, "thetaFunc", functions).onChange(setValue);
+    f1.add(myoptions, "periodicMultiplier", 0, 20).onChange(setValue);
+
+    f1.add(myoptions, "motionMultiplier", 0.0, 2.0).onChange(setValue);
+    f1.add(myoptions, "motionIterations", 0, 10).onChange(setValue);
+    f1.add(myoptions, "iterationMotion1").onChange(setValue);
+    f1.add(myoptions, "iterationMotion2").onChange(setValue);
+    f1.add(myoptions, "motionOperator1", operators).onChange(setValue);
+    f1.add(myoptions, "motionOperator2", operators).onChange(setValue);
+
+    f1.add(myoptions, "pixelation", 0, 300).onChange(setValue);
+    f1.add(myoptions, "useTwo").onChange(setValue);
+    f1.add(myoptions, "innerRadius", 0, 1).onChange(setValue);
+    f1.add(myoptions, "useDifferent").onChange(setValue);
+
+    function demoIntervalChange() {
+      demoInterval = myoptions.demoInterval;
+    }
+
+    function demoModeChange() {
+      demoMode = myoptions.demoMode;
+    }
+
+    function numeratorChanged() {
+      generateWEBGL();
+      genGui();
+    }
+
+    function presetChange() {
+      currentTheme = myoptions.theme;
+      generateOptions(false, false, myoptions.theme);
+    }
+  }
+
+  function setValue() {
+    /*send the control panel values to webGL*/
+    time = 0.0;
+    var col1 = tinycolor(myoptions.color1);
+    col1.red = col1._r / 255;
+    col1.green = col1._g / 255;
+    col1.blue = col1._b / 255;
+    var col2 = tinycolor(myoptions.color2);
+    col2.red = col2._r / 255;
+    col2.green = col2._g / 255;
+    col2.blue = col2._b / 255;
+    var col3 = tinycolor(myoptions.color3);
+    col3.red = col3._r / 255;
+    col3.green = col3._g / 255;
+    col3.blue = col3._b / 255;
+
+    gl.uniform3f(getUniformLocation(program, "color1"), col1.red, col1.green, col1.blue);
+    gl.uniform3f(getUniformLocation(program, "color2"), col2.red, col2.green, col2.blue);
+    gl.uniform3f(getUniformLocation(program, "color3"), col3.red, col3.green, col3.blue);
+    gl.uniform1i(getUniformLocation(program, "colorMode"), modes.indexOf(myoptions.colorMode));
+    gl.uniform1i(getUniformLocation(program, "colorOperator1"), operators.indexOf(myoptions.colorOperator1));
+    gl.uniform1i(getUniformLocation(program, "colorOperator2"), operators.indexOf(myoptions.colorOperator2));
+
+    gl.uniform1f(getUniformLocation(program, "motionMultiplier"), myoptions.motionMultiplier);
+    gl.uniform1f(getUniformLocation(program, "motionIterations"), myoptions.motionIterations);
+    gl.uniform1f(getUniformLocation(program, "iterationMotion1"), myoptions.iterationMotion1);
+    gl.uniform1f(getUniformLocation(program, "iterationMotion2"), myoptions.iterationMotion2);
+    gl.uniform1i(getUniformLocation(program, "motionOperator1"), operators.indexOf(myoptions.motionOperator1));
+    gl.uniform1i(getUniformLocation(program, "motionOperator2"), operators.indexOf(myoptions.motionOperator2));
+
+    gl.uniform1f(getUniformLocation(program, "rotation"), myoptions.rotation);
+    gl.uniform1f(getUniformLocation(program, "rotFactor1"), myoptions.rotFactor1);
+    gl.uniform1f(getUniformLocation(program, "rotFactor2"), myoptions.rotFactor2);
+
+    gl.uniform1f(getUniformLocation(program, "thetaM"), parseInt(myoptions.theta)); /*theta multiplier*/
+    gl.uniform1i(getUniformLocation(program, "thetaFunc"), functions.indexOf(myoptions.thetaFunc));
+    gl.uniform1f(getUniformLocation(program, "periodicMultiplier"), myoptions.periodicMultiplier);
+    gl.uniform1i(getUniformLocation(program, "timeFunc"), timeFunctions.indexOf(myoptions.timeFunc));
+    gl.uniform1f(getUniformLocation(program, "distanceModifier"), myoptions.distanceModifier);
+    gl.uniform1f(getUniformLocation(program, "pixelation"), myoptions.pixelation);
+
+    gl.uniform1f(getUniformLocation(program, "useTwo"), myoptions.useTwo);
+    gl.uniform1f(getUniformLocation(program, "useDifferent"), myoptions.useDifferent);
+    gl.uniform1f(getUniformLocation(program, "innerRadius"), myoptions.innerRadius);
+  }
+
+  //************** Shader sources **************
+  function vertex() {
+    return `
+      attribute vec2 position;
+      void main() {
+        gl_Position = vec4(position, 0.0, 1.0);
+      }
+      `;
+  }
+
+  function fragment(numerator, denominator, numerator2, denominator2, panel) {
+    var fragmentSource = `
+    #define PI 3.1415
+    precision highp float;
+    
+    uniform int colorMode;
+    uniform vec3 color1;
+    uniform vec3 color2;
+    uniform vec3 color3;
+    uniform float rotation;
+    uniform float thetaM;
+    uniform int thetaFunc;
+    uniform float motionMultiplier;
+    uniform float motionIterations;
+    uniform bool iterationMotion1;
+    uniform bool iterationMotion2;
+    uniform int colorOperator1;
+    uniform int colorOperator2;
+    uniform int motionOperator1;
+    uniform int motionOperator2;
+    uniform float periodicMultiplier;
+    uniform int timeFunc;
+    uniform float distanceModifier;
+    uniform float pixelation;
+    uniform float rotFactor1;
+    uniform float rotFactor2;
+    
+    uniform bool useTwo;
+    uniform bool useDifferent;
+    uniform float innerRadius;
+    
+    uniform float width;
+    uniform float height;
+    vec2 resolution = vec2(width, height);
+    uniform float time;
+    
+    vec2 rotate(vec2 _st, float _angle) {
+        _st -= 0.5;
+        _st =  mat2(cos(_angle),-sin(_angle), sin(_angle),cos(_angle)) * _st;
+        _st.y += 0.5;
+        _st.x += .5;
+        return _st;
+    }
+    
+    vec4 generatePlanetoid(float radius, bool isDifferent, float clockwise, float x, float y){
+    
+      //set up positions and time
+      vec2 uv = gl_FragCoord.xy/resolution.xy;
+      float t = mod(time, 20.0);
+      vec2 pos = uv;
+      pos = vec2(x, y)-pos;
+    
+      if(pixelation>0.0){
+        uv = fract(uv*pixelation);
+      }
+      //calculate distances and angles
+      float d = length(pos)*1.0;/*distance from center*/
+      float id = distanceModifier - d;/*inverse distance, greater near the center*/
+      float theta = -(atan(pos.y, pos.x))*(clockwise);
+      float rot = (clockwise * rotation) + (id+1.0);
+    
+      rot *= timeFunc == 0 ? t :
+             timeFunc == 1 ? sin(t/4.0) :
+             (.5*sin(t/3.0)+.5*cos(t/4.0));
+    
+      rot = thetaFunc == 0 ? rot + (thetaM*theta) :
+            thetaFunc == 1 ? rot + sin(thetaM*theta) :
+            rot +  tan(thetaM*theta);
+       
+      //rotate both positions
+      pos = rotate(pos, rot);
+      uv = rotate(uv, rot);
+    
+      vec3 col1 = color1;
+      vec3 col2 = color2;
+      vec3 col3 = color3;
+    
+    //motionIterations:  using color1+pos and color2+uv inside these loops
+      float m = motionMultiplier;
+      for(float i = 1.0; i < 30.0; i+=1.0){ 
+          if(i<motionIterations){
+            uv.x += m*col2.x*(cos(id*i)*uv.y*uv.x);
+            if(iterationMotion1) {
+                float firstArg = m/2.0*col2.y*(cos(col2.z)/d*i);
+                uv  = motionOperator1 == 0 ? uv :
+                  motionOperator1 == 1 ? uv + firstArg: 
+                  motionOperator1 == 2 ? uv - firstArg : 
+                  motionOperator1 == 3 ? uv * firstArg : 
+                  uv / firstArg;
+            }
+            pos.y += m*col1.x*(sin(2.0*i));
+            if(iterationMotion2) {
+                float secondArg = (m/2.0*col1.y*col1.z*(1.0/d*i));
+                pos = motionOperator2 == 0 ? pos : 
+                  motionOperator2 == 1 ? pos + secondArg : 
+                  motionOperator2 == 2 ? pos - secondArg : 
+                  motionOperator2 == 3 ? pos * secondArg : 
+                  pos / secondArg;
+            }
+          }  
+       }
+              
+      //shapes (floats) (used combinator expressions)
+      float tri1 = step(pos.y, pos.x);
+      float tri2 = step(1.0-pos.x, pos.y);
+      float tri3 = step(pos.x, pos.y);
+      float tri4 = step(1.0-pos.y, pos.x);
+
+      //shapes (calculated vec3's)
+      vec3 s1 = ((col1.z-col1.y))*col1.x*(cos(rot+id*abs(pos.xyx)/(col1)));
+      vec3 s2 = (col2.x-col2.y)*col2.z*cos(id*abs(uv.xyx)/(col2));
+      vec3 s3 = (col3.z-col3.x)*col3.y*sin(+d+rot+uv.xyx+pos.xyx);
+      
+      //for shapes 1 and 2, combine with distance/inverseDistance
+      float dArg = smoothstep(radius,0.0, clamp(d, 0.0, 1.0));
+      float surface = smoothstep(radius, radius-.02, d);
+      s1 = s1/surface;
+      s2 = s2/surface;
+      s3 /= surface;
+      col1 /= surface;
+      col2 /= surface;
+      col3 /= dArg;
+
+    //for shapes 1 and 2, combine with distance
+    s1 = colorOperator1 == 0 ? s1 : 
+    colorOperator1 == 1 ? s1+dArg :
+    colorOperator1 == 2 ? s1-dArg :
+    colorOperator1 == 3 ? s1*dArg :
+        s1/dArg; 
+    s2 = colorOperator2 == 0 ? s2 :
+        colorOperator2 == 1 ? s2+dArg :
+        colorOperator2 == 2 ? s2-dArg :
+        colorOperator2 == 3 ? s2*dArg :
+        s2/dArg;
+    
+    
+      float arg = (d+rot+uv.x);
+      vec3 s4 = mix(s1, s2, col3/cos(arg*periodicMultiplier));
+      s4 /= dArg;
+    
+      vec4 panel = vec4(((${panel})/3.0),1.0);
+      vec4 thing = vec4((${numerator})/(${denominator}),1.0);
+      vec4 different = vec4((${numerator2})/(${denominator2}),1.0);
+      if(isDifferent) thing = different;
+    
+      vec4 rez = colorMode == 0 ? panel * thing : 
+                     colorMode == 1 ? panel / thing : 
+                     colorMode == 2 ? panel + thing :
+                     colorMode == 3 ? panel - thing :
+                     colorMode == 4 ? thing / panel :
+                     thing - panel;
+      return clamp(rez, 0.0, 1.0);
+    }
+    void main(){  
+    
+        vec4 rez1 = vec4(0.0);
+        /*vec4 generatePlanetoid(float radius, bool isDifferent, float clockwise, float x, float y)*/
+        /* x and y values are always .5 (center) */
+        rez1 += 1.5*generatePlanetoid(.4, false, rotFactor1, .5,.5);
+        vec4 rez2 = 1.5*generatePlanetoid(innerRadius, useDifferent, rotFactor2, .5,.5);
+        
+        if(rez2.x >= 1.0) rez2.x = 0.0;
+        if(rez2.y >= 1.0) rez2.y = 0.0;
+        if(rez2.z >= 1.0) rez2.z = 0.0;
+        if(rez1.x >= 1.0) rez1.x = 0.0;
+        if(rez1.y >= 1.0) rez1.y = 0.0;
+        if(rez1.z >= 1.0) rez1.z = 0.0;
+        
+        vec4 result = rez1;
+        if(useTwo) result += rez2;
+        if(result.x >= 1.0) result.x = 0.0;
+        if(result.y >= 1.0) result.y = 0.0;
+        if(result.z >= 1.0) result.z = 0.0;
+    
+        gl_FragColor = result;
+        //rez1-(rez1*rez2)
+       }
+    `;
+    return fragmentSource;
+  }
+
+  var widthHandle, heightHandle, timeHandle, program;
+  /*DRAW function*/
+  function draw() {
+
+    time += myoptions.time;
+    gl.uniform1f(timeHandle, time);
+    //Draw a triangle strip connecting vertices 0-4
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    requestAnimationFrame(draw);
+  }
+
+  /*generate WEBGL*/
+  function generateWEBGL() {
+    //Create vertex and fragment shaders
+    var vertexShader = compileShader(vertex(), gl.VERTEX_SHADER);
+    var fragmentShader = compileShader(
+      fragment(myoptions.numerator, myoptions.denominator, myoptions.numerator2, myoptions.denominator2, myoptions.panel),
+      gl.FRAGMENT_SHADER
+    );
+
+    //Create shader programs
+    program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+
+    gl.useProgram(program);
+
+    //Set up rectangle covering entire canvas
+    var vertexData = new Float32Array([
+      -1.0,
+      1.0, // top left
+      -1.0,
+      -1.0, // bottom left
+      1.0,
+      1.0, // top right
+      1.0,
+      -1.0 // bottom right
+    ]);
+
+    //Create vertex buffer
+    var vertexDataBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
+
+    // Layout of our data in the vertex buffer
+    var positionHandle = getAttribLocation(program, "position");
+
+    gl.enableVertexAttribArray(positionHandle);
+    gl.vertexAttribPointer(
+      positionHandle,
+      2, // position is a vec2 (2 values per component)
+      gl.FLOAT, // each component is a float
+      false, // don't normalize values
+      2 * 4, // two 4 byte float components per vertex (32 bit float is 4 bytes)
+      0 // how many bytes inside the buffer to start from
+    );
+
+    //Set uniform handle
+    timeHandle = getUniformLocation(program, "time");
+    widthHandle = getUniformLocation(program, "width");
+    heightHandle = getUniformLocation(program, "height");
+    gl.uniform1f(widthHandle, canvas.width);
+    gl.uniform1f(heightHandle, canvas.height);
+  }
+
+  /*HELPERS*/
+  function compileShader(shaderSource, shaderType) {
+    var shader = gl.createShader(shaderType);
+    gl.shaderSource(shader, shaderSource);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
+    }
+    return shader;
+  }
+
+  function getAttribLocation(program, name) {
+    var attributeLocation = gl.getAttribLocation(program, name);
+    if (attributeLocation === -1) {
+      throw "Cannot find attribute " + name + ".";
+    }
+    return attributeLocation;
+  }
+
+  function getUniformLocation(program, name) {
+    var attributeLocation = gl.getUniformLocation(program, name);
+    if (attributeLocation === -1) {
+      throw "Cannot find uniform " + name + ".";
+    }
+    return attributeLocation;
+  }
+
+  function pick(arr) {
+    return arr[Math.floor(Math.random() * arr.length)];
+  }
+
+  function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  function getRandomFloat(min, max) {
+    return Math.random() * (max - min) + min;
+  }
+
+  function combinator(isNumerator, numTerms) {
+    /*fairly dumb string generator, returns string like: `col2*col3-s1`*/
+    /*will not pick same operand twice in a row*/
+    let shapes = ["s1", "s2", "s3", "s4", "col1", "col2", "col3"];/*vec3's*/
+    let floats = ["dArg", "surface", "tri1", "tri2", "tri3", "tri4"];
+    let everything = [...shapes, ...floats];
+    let ops = ["+", "-", "+", "+", "-", "*", "/"];/*would prefer more plusses than minuses in these strings*/
+    var result, lastPick;
+    if (numTerms == 1) {
+      result = pick(shapes);
+    } else {
+      /*ensure at least one shape (can't be an all single value (float) expression, we need a vec3*/
+      lastPick = isNumerator? pick(shapes) : pick(everything);
+      result = lastPick + " " + pick(ops);
+      lastPick = pick(everything.filter(o => o != lastPick));
+      result += " " + lastPick;
+      for (let i = 2; i < numTerms; i++) {
+        lastPick = pick(everything.filter(o => o != lastPick));
+        result += ` ${pick(ops)} ${lastPick} `;
+      }
+    }
+    return result;
+  }
+})("sweaverD.com");
\ No newline at end of file
diff --git a/planetary-vignettes/src/style.css b/planetary-vignettes/src/style.css
new file mode 100644
index 0000000..03138f0
--- /dev/null
+++ b/planetary-vignettes/src/style.css
@@ -0,0 +1,23 @@
+body {
+  background-color: #000;    
+  margin: 0;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:100vw;
+  height:100vh;
+}
+
+canvas {
+  padding:10px;
+}
+
+@media only screen and (min-width: 1000px) {
+  canvas {
+    padding:20px;
+  }
+}
+
+
diff --git a/platonics/README.markdown b/platonics/README.markdown
new file mode 100644
index 0000000..1ebd438
--- /dev/null
+++ b/platonics/README.markdown
@@ -0,0 +1,5 @@
+# Platonics
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shubniggurath/pen/XWpYpON](https://codepen.io/shubniggurath/pen/XWpYpON).
+
+
diff --git a/platonics/dist/index.html b/platonics/dist/index.html
new file mode 100644
index 0000000..986cfec
--- /dev/null
+++ b/platonics/dist/index.html
@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Platonics</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script id="vertexShader_buffer" type="x-shader/x-vertex">attribute vec4 a_position;  
+  uniform mat4 u_modelViewMatrix;
+  uniform mat4 u_projectionMatrix;
+  
+  void main() {
+    gl_Position = a_position;
+  }
+</script>
+<script id="fragmentShader_under" type="x-shader/x-vertex">
+  #extension GL_EXT_shader_texture_lod : enable
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform float u_time;
+  uniform vec2 u_mouse;
+  uniform sampler2D u_noise;
+  
+  uniform vec2 u_cam;
+  
+  uniform samplerCube u_environment;
+  
+  /* Raymarching constants */
+  /* --------------------- */
+  const float MAX_TRACE_DISTANCE = 8.;             // max trace distance
+  const float INTERSECTION_PRECISION = 0.001;       // precision of the intersection
+  const int NUM_OF_TRACE_STEPS = 100;               // max number of trace steps
+  const float STEP_MULTIPLIER = .8;                 // the step mutliplier - ie, how much further to progress on each step
+  
+  /* Structures */
+  /* ---------- */
+  struct Camera {
+    vec3 ro;
+    vec3 rd;
+    vec3 forward;
+    vec3 right;
+    vec3 up;
+    float FOV;
+  };
+  struct Surface {
+    float len;
+    vec3 position;
+    vec3 colour;
+    float id;
+    float steps;
+    float AO;
+  };
+  struct Model {
+    float dist;
+    vec3 colour;
+    float id;
+  };
+  
+  vec2 getScreenSpace() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    return uv;
+  }
+  
+  float easeInOutCubic(float d) {
+    if (d < 0.5) return 4. * pow(d, 3.);
+    return 1. - pow(-2. * d + 2., 3.) * .5;
+  }
+  float easeInOutExpo(float k) {
+    if(k == 0.) return 0.;
+    if(k == 1.) return 1.;
+    k *= 2.;
+    if(k < 1.) return .5 * pow(1024., k - 1.);
+    return .5 * ( -pow(2., -10. * (k - 1.)) + 2. );
+  }
+  
+  /*--------------------------------
+  /  Modelling
+  / -------------------------------- */
+  float smin(float a, float b, float k) {
+      float res = exp(-k*a) + exp(-k*b);
+      return -log(res)/k;
+  }
+
+  mat4 rotationMatrix(vec3 axis, float angle) {
+    axis = normalize(axis);
+    float s = sin(angle);
+    float c = cos(angle);
+    float oc = 1.0 - c;
+
+    return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
+                  oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
+                  oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
+                  0.0,                                0.0,                                0.0,                                1.0);
+}
+  
+  float udBox( vec3 p, vec3 b ) {
+    return length(max(abs(p)-b,0.0));
+  }
+  
+  float t = 0.;
+  Model model(vec3 p) {
+    float d = length(p) - .2;
+    // vec3 colour = vec3(1,0,0);
+    
+    d = 100.;
+    vec3 colour2 = vec3(0);
+    vec3 colour1 = vec3(0);
+    vec3 colour = vec3(1);
+    
+    vec3 pos1, pos2 = vec3(0,0,0);
+    vec3 endpos1 = vec3(-.25, 0, 0);
+    vec3 endpos2 = vec3(.25, 0, 0);
+    
+    pos1 = mix(vec3(0), endpos1, t);
+    pos2 = mix(vec3(0), endpos2, t);
+    
+    vec3 _p = p;
+    
+    for(float i = 0.; i < 3.; i++) {
+      vec3 c;
+      vec3 pos = vec3(0);
+      if(i == 1.) {
+        pos = pos1;
+        c = colour2;
+      }
+      if(i == 2.) {
+        pos = pos2;
+        c = colour1;
+      }
+      p = _p + pos;
+      float t5 = u_time / 5. * (i + 1.);
+      p = (rotationMatrix(vec3(cos(t5), sin(t5), .5), u_time / 3. ) * vec4(p, 1.)).xyz;
+      if(d == 100.) {
+        d = udBox(p, vec3(.1));
+      } else {
+        float d1 = udBox(p, vec3(.1));
+        float ddiff = (d1 - d)/d1;
+        d = smin(d, d1, mix(90., 20., t));
+        colour = mix(c, colour, smoothstep(0., 1., ddiff * .7)); // This mixes the colours together based on the gradient produced by the smin
+      }
+    }
+    
+    return Model(d, colour, 1.);
+  }
+  Model map( vec3 p ){
+    return model(p);
+  }
+  
+  Surface calcIntersection( in Camera cam ){
+    float h =  INTERSECTION_PRECISION*2.0;
+    float rayDepth = 0.0;
+    float hitDepth = -1.0;
+    float id = -1.;
+    float steps = 0.;
+    float ao = 0.;
+    vec3 position;
+    vec3 colour;
+
+    for( int i=0; i< NUM_OF_TRACE_STEPS ; i++ ) {
+      if( abs(h) < INTERSECTION_PRECISION || rayDepth > MAX_TRACE_DISTANCE ) break;
+      position = cam.ro+cam.rd*rayDepth;
+      Model m = map( position );
+      h = m.dist;
+      rayDepth += h * STEP_MULTIPLIER;
+      id = m.id;
+      steps += 1.;
+      ao += max(h, 0.);
+      colour = m.colour;
+    }
+
+    if( rayDepth < MAX_TRACE_DISTANCE ) hitDepth = rayDepth;
+    if( rayDepth >= MAX_TRACE_DISTANCE ) id = -1.0;
+
+    return Surface( hitDepth, position, colour, id, steps, ao );
+  }
+  Camera getCamera(in vec2 uv, in vec3 pos, in vec3 target) {
+    vec3 forward = normalize(target - pos);
+    vec3 right = normalize(vec3(forward.z, 0., -forward.x));
+    vec3 up = normalize(cross(forward, right));
+    
+    float FOV = .6;
+    
+    return Camera(
+      pos,
+      normalize(forward + FOV * uv.x * right + FOV * uv.y * up),
+      forward,
+      right,
+      up,
+      FOV
+    );
+  }
+  
+  
+  float softshadow( in vec3 ro, in vec3 rd, in float mint, in float tmax ) {
+    float res = 1.0;
+    float t = mint;
+    for( int i=0; i<16; i++ ) {
+      float h = map( ro + rd*t ).dist;
+      res = min( res, 8.0*h/t );
+      t += clamp( h, 0.02, 0.10 );
+      if( h<0.001 || t>tmax ) break;
+    }
+    return clamp( res, 0.0, 1.0 );
+  }
+  float calcAO( in vec3 pos, in vec3 nor ) {
+    float occ = 0.0;
+    float sca = 1.0;
+    for( int i=0; i<5; i++ )
+    {
+      float hr = 0.01 + 0.12*float(i)/4.0;
+      vec3 aopos =  nor * hr + pos;
+      float dd = map( aopos ).dist;
+      occ += -(dd-hr)*sca;
+      sca *= 0.95;
+    }
+    return clamp( 1.0 - 3.0*occ, 0.0, 1.0 );    
+  }
+  // This is here to provide a fallback for devices that don't support GL_EXT_shader_texture_lod
+  vec4 cubeTexture(samplerCube map, vec3 uv, float lod) {
+    #ifdef GL_EXT_shader_texture_lod
+    return textureCubeLodEXT(map, uv, lod);
+    #endif
+    return textureCube(map, uv);
+  }
+  vec3 shade(Surface surface, vec3 nor, vec3 ref, Camera cam) {
+    
+    vec3 col = surface.colour;
+    vec3 pos = surface.position;
+    
+    vec3 I = normalize(pos - cam.ro);
+    vec3 R = reflect(I, nor);
+    vec3 reflection = cubeTexture(u_environment, R, 5.).rgb;
+    // reflection *= 0.;
+    // col = reflection;
+    // lighitng        
+    float occ = 1./surface.AO;
+    vec3  lig = normalize( vec3(-0.6, 0.7, -0.) );
+    float amb = clamp( 0.5+0.5*nor.y, 0.0, 1.0 );
+    float dif = clamp( dot( nor, lig ), 0.0, 1.0 );
+    float bac = clamp( dot( nor, normalize(vec3(-lig.x,0.0,-lig.z))), 0.0, 1.0 )*clamp( 1.0-pos.y,0.0,1.0);
+    // float dom = smoothstep( -0.1, 0.1, ref.y );
+    float fre = pow( clamp(1.0+dot(nor,cam.rd),0.0,1.0), 2.0 );
+    float spe = pow(clamp( dot( ref, lig ), 0.0, 1.0 ),4.0);
+
+    // dif *= softshadow( pos, lig, 0.02, 2.5 );
+    //dom *= softshadow( pos, ref, 0.02, 2.5 );
+
+    vec3 lin = vec3(0.0);
+    lin += 1.20*dif*vec3(.95,0.80,0.60);
+    lin += 1.20*spe*vec3(1.00,0.85,0.55)*dif;
+    lin += 0.80*amb*vec3(0.50,0.70,.80)*occ;
+    //lin += 0.30*dom*vec3(0.50,0.70,1.00)*occ;
+    lin += 0.30*bac*vec3(0.25,0.25,0.25)*occ;
+    lin += 0.20*fre*vec3(1.00,1.00,1.00)*occ;
+    col = col*lin;
+    
+    col += reflection * .5;
+
+    return col;
+  }
+  
+  // Calculates the normal by taking a very small distance,
+  // remapping the function, and getting normal for that
+  vec3 calcNormal( in vec3 pos ){
+    vec3 eps = vec3( 0.001, 0.0, 0.0 );
+    vec3 nor = vec3(
+      map(pos+eps.xyy).dist - map(pos-eps.xyy).dist,
+      map(pos+eps.yxy).dist - map(pos-eps.yxy).dist,
+      map(pos+eps.yyx).dist - map(pos-eps.yyx).dist );
+    return normalize(nor);
+  }
+  
+  vec3 render(Surface surface, Camera cam, vec2 uv) {
+    vec3 colour = vec3(.4,.4,.45);
+    vec3 colourB = vec3(.1, .1, .1);
+    
+    colour = mix(colourB, colour, smoothstep(1., 0., (length(uv) - surface.steps/100.) * (1.+smoothstep(-1., -1.5, -abs(cam.ro.z))*.5)));
+    
+    // colour = mix(vec3(.5,0,.3), vec3(0,.5,0), smoothstep(-1., -1.5, cam.ro.z))+surface.steps/100.;
+    
+    // colour -= texture2D(u_noise, uv).rgb;
+    
+    if (surface.id == 1.){
+      vec3 surfaceNormal = calcNormal( surface.position );
+      vec3 ref = reflect(cam.rd, surfaceNormal);
+      colour = surfaceNormal;
+      colour = shade(surface, surfaceNormal, ref, cam);
+    }
+
+    return colour;
+  }
+  
+  void main() {
+    vec2 uv = getScreenSpace();
+    
+    t = easeInOutExpo( smoothstep(0., 1., sin(u_time * .25) * 2.) );
+    
+    float camd = mix(.8, 1.5, t);
+    
+    float c = cos(u_cam.x);
+    float s = sin(u_cam.x);
+    mat3 xrot = mat3(
+      c, 0, s,
+      0, 1, 0,
+      -s, 0, c
+    );
+    // c = cos(u_cam.y);
+    // s = sin(u_cam.y);
+    // mat3 yrot = mat3(
+    //   1, 0, 0,
+    //   0, c, -s,
+    //   0, s, c
+    // );
+    // xrot *= yrot;
+    
+    vec3 campos = vec3( 0, 0, camd ) * xrot;
+    // campos += vec3( 0, cos(u_cam.y)*camd, sin(u_cam.y)*camd );
+    
+    // Camera cam = getCamera(uv, mix(vec3(0,0,-.8), vec3(0,0,-1.5), t), vec3(0));
+    // Camera cam = getCamera(uv, vec3(0.,0.,1.25), vec3(0, 0, 0));
+    Camera cam = getCamera(uv, campos, vec3(0));
+    
+    Surface surface = calcIntersection(cam);
+    
+    gl_FragColor = vec4(render(surface, cam, uv), 1.);
+    // gl_FragColor = vec4(vec3(surface.steps/100.), 1.);
+  }
+</script>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/platonics/dist/script.js b/platonics/dist/script.js
new file mode 100644
index 0000000..cb9a085
--- /dev/null
+++ b/platonics/dist/script.js
@@ -0,0 +1,1306 @@
+function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}function _classPrivateFieldSet(receiver, privateMap, value) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to set private field on non-instance");}if (descriptor.set) {descriptor.set.call(receiver, value);} else {if (!descriptor.writable) {throw new TypeError("attempted to set read only private field");}descriptor.value = value;}return value;}function _classPrivateFieldGet(receiver, privateMap) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to get private field on non-instance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}function _classStaticPrivateFieldSpecGet(receiver, classConstructor, descriptor) {if (receiver !== classConstructor) {throw new TypeError("Private static access of wrong provenance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}import { Vec2, Vec3, Mat2, Mat3, Mat4, Quat } from 'https://cdn.skypack.dev/wtc-math';
+
+import gifJs from 'https://cdn.skypack.dev/gif.js';
+
+console.clear();
+
+// Determine whether a number is a power of 2
+function powerOf2(v) {
+  return v && !(v & v - 1);
+}
+// Return the next greatest power of 2
+function nextPow2(v) {
+  v--;
+  v |= v >> 1;
+  v |= v >> 2;
+  v |= v >> 4;
+  v |= v >> 8;
+  v |= v >> 16;
+  v++;
+  return v;
+}
+// Update a provided image to the nearest power of 2 in size.
+const pow2Image = c => {
+  const newWidth = powerOf2(c.width) ? c.width : nextPow2(c.width);
+  const newHeight = powerOf2(c.height) ? c.height : nextPow2(c.height);
+  const _c = document.createElement('canvas');
+  const ctx = _c.getContext('2d');
+  _c.width = newWidth;
+  _c.height = newHeight;
+  ctx.drawImage(c, 0, 0, newWidth, newHeight);
+  return _c;
+};
+const asyncImageLoad = function (img, src) {
+  return new Promise((resolve, reject) => {
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+};
+const glEnumToString = function () {
+  const haveEnumsForType = {};
+  const enums = {};
+
+  function addEnums(gl) {
+    const type = gl.constructor.name;
+    if (!haveEnumsForType[type]) {
+      for (const key in gl) {
+        if (typeof gl[key] === 'number') {
+          const existing = enums[gl[key]];
+          enums[gl[key]] = existing ? `${existing} | ${key}` : key;
+        }
+      }
+      haveEnumsForType[type] = true;
+    }
+  }
+
+  return function glEnumToString(gl, value) {
+    addEnums(gl);
+    return enums[value] || (typeof value === 'number' ? `0x${value.toString(16)}` : value);
+  };
+}();
+const addExtensions = ctx => {
+  // Set up the extensions
+  ctx.getExtension('OES_standard_derivatives');
+  ctx.getExtension('EXT_shader_texture_lod');
+  ctx.getExtension('OES_texture_float');
+  ctx.getExtension('WEBGL_color_buffer_float');
+  ctx.getExtension('OES_texture_float_linear');
+  ctx.getExtension('EXT_color_buffer_float');
+};
+function createContext(c, opt_attribs, params) {
+  const ctx = c.getContext("webgl", params) || this._el.getContext("experimental-webgl", params);
+
+  addExtensions(ctx);
+
+  return ctx;
+}
+
+const quatToMat4 = q => {
+  if (q.array) q = q.array; // This just transforms a provided vector into to an array.
+
+  if (q instanceof Array && q.length >= 4) {
+    const [x, y, z, w] = q;
+    const [x2, y2, z2] = q.map(x => x * 2.);
+
+    const xx = x * x2,
+    yx = y * x2,
+    yy = y * y2,
+    zx = z * x2,
+    zy = z * y2,
+    zz = z * z2,
+    wx = w * x2,
+    wy = w * y2,
+    wz = w * z2;
+
+    return new Mat4(
+    1 - yy - zz, yx - wz, zx + wy, 0,
+    yx + wz, 1 - xx - zz, zy - wx, 0,
+    zx - wy, zy + wx, 1 - xx - yy, 0,
+    0, 0, 0, 1);
+
+  }
+};var _blending = new WeakMap();var _blendingEnabled = new WeakMap();var _buffers = new WeakMap();
+
+class Renderer {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(canvas, options) {_defineProperty(this, "isWebgl2", false);_blending.set(this, { writable: true, value: void 0 });_blendingEnabled.set(this, { writable: true, value: false });_buffers.set(this, { writable: true, value: [] });
+    options = Object.assign({}, _classStaticPrivateFieldSpecGet(Renderer, Renderer, _defaultOptions), options);
+    this.width = options.width;
+    this.height = options.height;
+    this.pxRatio = options.pxRatio;
+    this.clearing = options.clearing;
+    this.depthTesting = options.depthTesting;
+    this.canvas = canvas || document.createElement('canvas');
+    this.canvas.width = this.width * this.pxRatio;
+    this.canvas.height = this.height * this.pxRatio;
+    this.premultipliedAlpha = options.premultipliedAlpha;
+
+    this.ctx = this.canvas.getContext("webgl", options) || this.canvas.getContext("experimental-webgl", options);
+
+    this.ctx.viewportWidth = this.canvas.width;
+    this.ctx.viewportHeight = this.canvas.height;
+
+    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [this.canvas.width, this.canvas.height]);
+
+    this.addExtensions();
+  }
+  resize(w, h, ratio) {
+    this.width = w;
+    this.height = h;
+    this.pxRatio = ratio || this.pxRatio;
+    this.canvas.width = this.width * this.pxRatio;
+    this.canvas.height = this.height * this.pxRatio;
+
+    this.ctx.viewportWidth = this.canvas.width;
+    this.ctx.viewportHeight = this.canvas.height;
+
+    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [this.canvas.width, this.canvas.height]);
+  }
+  setViewport(dimensions) {
+    let w = this.width * this.pxRatio;
+    let h = this.height * this.pxRatio;
+    if (dimensions) {
+      w = dimensions[0];
+      h = dimensions[1];
+    }
+    this.ctx.viewport(0, 0, w, h);
+    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [w, h]);
+  }
+  addExtensions() {
+    this.ctx.getExtension('OES_standard_derivatives');
+    this.ctx.getExtension('EXT_shader_texture_lod');
+    this.ctx.getExtension('OES_texture_float');
+    this.ctx.getExtension('WEBGL_color_buffer_float');
+    this.ctx.getExtension('OES_texture_float_linear');
+    this.ctx.getExtension('EXT_color_buffer_float');
+  }
+  linkBuffer(buffer) {
+    let hasBuffer = false;
+    _classPrivateFieldGet(this, _buffers).forEach(b => {
+      if (buffer === b) hasBuffer = true;
+    });
+    if (!hasBuffer) {
+      this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, buffer.buffer);
+      this.ctx.bufferData(
+      this.ctx.ARRAY_BUFFER,
+      buffer.data,
+      buffer.drawType);
+    }
+    buffer.link(this.currentProgram.program);
+  }
+  setupProgram(program, buffers, attributes, uniforms) {
+    this.currentProgram = program;
+    this.ctx.useProgram(program.program);
+
+    this.premultiplied = program.premultiplied;
+
+    this.depthTesting = program.depthTesting;
+
+
+    if (program.blending === Program.BLENDING_NORMAL && program.transparent === false) {
+      this.blending = Program.BLENDING_OFF;
+    } else {
+      this.blending = program.blending;
+    }
+
+    this.clearColour = program.clearColour;
+    const a = this.clearColour[3];
+    // console.log('prem', this.premultipliedAlpha)
+    if (this.premultipliedAlpha) this.clearColour = this.clearColour.map((c, i) => c * a);
+
+    this.ctx.clearColor(...this.clearColour);
+
+    // TODO: Unlink unused buffers during this setup phase as well.
+    buffers.forEach(buffer => {
+      this.linkBuffer(buffer);
+    });
+
+    // this.ctx.enable(ctx.DEPTH_TEST);
+    if (this.depthTesting) this.ctx.enable(ctx.DEPTH_TEST);else
+    this.ctx.disable(ctx.DEPTH_TEST);
+
+    uniforms.forEach(uniform => {
+      uniform.bind(program.program);
+    });
+    this.uniformResolution.bind(program.program);
+  }
+  render(points, buffer) {
+    this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, (buffer === null || buffer === void 0 ? void 0 : buffer.fb) || null);
+    if (this.clearing) {
+      this.ctx.clear(this.ctx.COLOR_BUFFER_BIT);
+
+      if (this.depthTesting) this.ctx.clear(this.ctx.DEPTH_BUFFER_BIT);
+    }
+    switch (this.currentProgram.renderType) {
+      case Program.RENDER_TRIANGLES:
+        this.ctx.drawArrays(this.ctx.TRIANGLES, 0, points);
+        break;
+      case Program.RENDER_STRIP:
+        this.ctx.drawArrays(this.ctx.TRIANGLE_STRIP, 0, points);
+        break;
+      case Program.RENDER_LINES:
+        this.ctx.drawArrays(this.ctx.LINE_STRIP, 0, points);
+        break;
+      case Program.RENDER_LINELOOP:
+        this.ctx.drawArrays(this.ctx.LINE_LOOP, 0, points);
+        break;
+      case Program.RENDER_POINTS:
+        this.ctx.drawArrays(this.ctx.POINTS, 0, points);
+        break;}
+
+
+  }
+
+  /* SETTERS AND GETTERS */
+  get blending() {
+    return _classPrivateFieldGet(this, _blending) || Program.BLENDING_NORMAL;
+  }
+  set blending(blending) {
+
+    if (blending === Renderer.BLENDING_DEBUG) {
+
+      if (!this.breakLog) {
+        console.log(blending, Renderer.BLENDING_OFF, this.premultiplied);
+        this.breakLog = true;
+      }
+      _classPrivateFieldSet(this, _blending, blending);
+      this.ctx.enable(this.ctx.BLEND);
+      this.ctx.blendFuncSeparate(this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA, this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA);
+      return;
+    }
+
+    _classPrivateFieldSet(this, _blending, blending);
+    if (blending === Renderer.BLENDING_OFF) {
+      this.ctx.disable(this.ctx.BLEND);
+      _classPrivateFieldSet(this, _blendingEnabled, false);
+      return;
+    }
+    if (_classPrivateFieldGet(this, _blendingEnabled) === false) {
+      this.ctx.enable(this.ctx.BLEND);
+      // this.ctx.alphaFunc(this.ctx.GL_GREATER, 0.5);
+      // this.ctx.enable(this.ctx.GL_ALPHA_TEST);
+      _classPrivateFieldSet(this, _blendingEnabled, true);
+    }
+
+    if (this.premultiplied) {
+      switch (this.blending) {
+        case Renderer.BLENDING_NORMAL:
+          this.ctx.blendFuncSeparate(this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA, this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA);
+          break;
+        case Renderer.BLENDING_ADDITIVE:
+          this.ctx.blendFunc(this.ctx.ONE, this.ctx.ONE);
+          break;
+        case Renderer.BLENDING_SUBTRACTIVE:
+          this.ctx.blendFuncSeparate(this.ctx.ZERO, this.ctx.ZERO, this.ctx.ONE_MINUS_SRC_COLOR, this.ctx.ONE_MINUS_SRC_ALPHA);
+          break;
+        case Renderer.BLENDING_MULTIPLY:
+          this.ctx.blendFuncSeparate(this.ctx.ZERO, this.ctx.SRC_COLOR, this.ctx.ZERO, this.ctx.SRC_ALPHA);
+          break;}
+
+    } else {
+      switch (this.blending) {
+        case Renderer.BLENDING_NORMAL:
+          this.ctx.blendFuncSeparate(this.ctx.SRC_ALPHA, this.ctx.ONE_MINUS_SRC_ALPHA, this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA);
+          break;
+        case Renderer.BLENDING_ADDITIVE:
+          this.ctx.blendFunc(this.ctx.SRC_ALPHA, this.ctx.ONE);
+          break;
+        case Renderer.BLENDING_SUBTRACTIVE:
+          this.ctx.blendFunc(this.ctx.ZERO, this.ctx.ONE_MINUS_SRC_COLOR);
+          break;
+        case Renderer.BLENDING_MULTIPLY:
+          this.ctx.blendFunc(this.ctx.ZERO, this.ctx.SRC_COLOR);
+          break;}
+
+    }
+  }}var _defaultOptions = { writable: true, value: { width: 512, height: 512, pxRatio: Math.min(window.devicePixelRatio, 2), clearing: true, depthTesting: true, premultipliedAlpha: true } };_defineProperty(Renderer, "BLENDING_DEBUG", -1);_defineProperty(Renderer, "BLENDING_NORMAL", 1);_defineProperty(Renderer, "BLENDING_ADDITIVE", 2);_defineProperty(Renderer, "BLENDING_SUBTRACTIVE", 4);_defineProperty(Renderer, "BLENDING_MULTIPLY", 8);_defineProperty(Renderer, "BLENDING_OFF", 16);
+
+class Buffer {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(ctx, data, options) {
+    this.ctx = ctx;
+    this.name = name;
+    options = Object.assign({}, _classStaticPrivateFieldSpecGet(Buffer, Buffer, _defaults), options);
+    this.attributes = options.attributes.map(a => Object.assign({}, _classStaticPrivateFieldSpecGet(Buffer, Buffer, _defaultAttribute), a));
+
+    this.normalized = options.normalized;
+    this.drawType = options.drawType;
+    this.type = options.type;
+    if (data instanceof Array) data = new Float32Array(data);
+    this.data = data;
+    this.buffer = ctx.createBuffer();
+  }
+
+  link(program, hasBuffer = false) {
+    let location = this.ctx.getAttribLocation(program, `a_${this.name}`);
+
+    this.attributes.forEach(attribute => {
+      const location = this.ctx.getAttribLocation(program, `a_${attribute.name}`);
+      this.ctx.vertexAttribPointer(location, attribute.numComponents, this.type, this.normalized, attribute.stride, attribute.offset);
+      this.ctx.enableVertexAttribArray(location);
+    });
+  }
+
+  get length() {
+    return this.data.length;
+  }}var _defaultAttribute = { writable: true, value: { numComponents: 2, offset: 0, stride: 0 } };var _defaults = { writable: true, value: { attributes: [{ name: 'position' }], normalized: false, drawType: window.WebGLRenderingContext.STATIC_DRAW, type: window.WebGLRenderingContext.FLOAT } };var _vShader = new WeakMap();var _fShader = new WeakMap();var _p = new WeakMap();var _renderType = new WeakMap();
+
+class Program {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(ctx, vertexShaderSource, fragmentShaderSource, options = {}) {_vShader.set(this, { writable: true, value: void 0 });_fShader.set(this, { writable: true, value: void 0 });_p.set(this, { writable: true, value: void 0 });_renderType.set(this, { writable: true, value: void 0 });
+    options = Object.assign({}, _classStaticPrivateFieldSpecGet(Program, Program, _defaultOptions2), options);
+
+    this.ctx = ctx;
+
+    this.renderType = options.renderType;
+
+    this.clearColour = options.clearColour;
+    this.blending = options.blending;
+    this.premultiplied = options.premultiplied;
+    this.transparent = options.transparent;
+    this.depthTesting = options.depthTesting;
+
+    // Create the shaders
+    this.vShader = Program.createShaderOfType(this.ctx, this.ctx.VERTEX_SHADER, vertexShaderSource);
+    this.fShader = Program.createShaderOfType(this.ctx, this.ctx.FRAGMENT_SHADER, fragmentShaderSource);
+
+    // Create the program and link the shaders
+    _classPrivateFieldSet(this, _p, this.ctx.createProgram());
+    this.ctx.attachShader(_classPrivateFieldGet(this, _p), this.vShader);
+    this.ctx.attachShader(_classPrivateFieldGet(this, _p), this.fShader);
+
+    this.ctx.linkProgram(_classPrivateFieldGet(this, _p));
+
+    // Check the result of linking
+    var linked = this.ctx.getProgramParameter(_classPrivateFieldGet(this, _p), this.ctx.LINK_STATUS);
+    if (!linked) {
+      var error = this.ctx.getProgramInfoLog(_classPrivateFieldGet(this, _p));
+      console.log('Failed to link program: ' + error);
+      this.ctx.deleteProgram(_classPrivateFieldGet(this, _p));
+      this.ctx.deleteShader(this.fShader);
+      this.ctx.deleteShader(this.vShader);
+    }
+  }
+
+  get program() {
+    return _classPrivateFieldGet(this, _p);
+  }
+
+  /* SETTERS AND GETTERS */
+
+  set renderType(value) {
+    if ([
+    Program.RENDER_TRIANGLES,
+    Program.RENDER_STRIP,
+    Program.RENDER_LINES,
+    Program.RENDER_LINELOOP,
+    Program.RENDER_POINTS].
+    indexOf(value) > -1) _classPrivateFieldSet(this, _renderType, value);
+  }
+  get renderType() {
+    return _classPrivateFieldGet(this, _renderType);
+  }
+
+  /**
+   * Static Methods
+   */
+
+  /**
+   * Create a shader of a given type given a context, type and source.
+   *
+    * @static
+   * @param  {WebGLContext} ctx The context under which to create the shader
+   * @param  {WebGLShaderType} type The shader type, vertex or fragment
+   * @param  {string} source The shader source.
+   * @return {WebGLShader} The created shader
+   */
+  static createShaderOfType(ctx, type, source) {
+    const shader = ctx.createShader(type);
+    ctx.shaderSource(shader, source);
+    ctx.compileShader(shader);
+
+    // Check the compile status
+    const compiled = ctx.getShaderParameter(shader, ctx.COMPILE_STATUS);
+    if (!compiled) {
+      // Something went wrong during compilation; get the error
+      const lastError = ctx.getShaderInfoLog(shader);
+      console.error(`${Program.addLineNumbersWithError(source, lastError)}\nError compiling ${glEnumToString(ctx, type)}: ${lastError}`);
+      ctx.deleteShader(shader);
+      return null;
+    }
+
+    return shader;
+  }
+  static addLineNumbersWithError(src, log = '') {
+    console.log(src);
+    const errorRE = /ERROR:\s*\d+:(\d+)/gi;
+    // Note: Error message formats are not defined by any spec so this may or may not work.
+    const matches = [...log.matchAll(errorRE)];
+    const lineNoToErrorMap = new Map(matches.map((m, ndx) => {
+      const lineNo = parseInt(m[1]);
+      const next = matches[ndx + 1];
+      const end = next ? next.index : log.length;
+      const msg = log.substring(m.index, end);
+      return [lineNo - 1, msg];
+    }));
+    return src.split('\n').map((line, lineNo) => {
+      const err = lineNoToErrorMap.get(lineNo);
+      return `${lineNo + 1}: ${line}${err ? `\n\n^^^ ${err}` : ''}`;
+    }).join('\n');
+  }}_defineProperty(Program, "RENDER_TRIANGLES", 0);_defineProperty(Program, "RENDER_STRIP", 1);_defineProperty(Program, "RENDER_LINES", 2);_defineProperty(Program, "RENDER_LINELOOP", 4);_defineProperty(Program, "RENDER_POINTS", 8);var _defaultOptions2 = { writable: true, value: { renderType: Program.RENDER_TRIANGLES, clearColour: [1.0, 1.0, 1.0, 1.0], blending: Renderer.BLENDING_OFF, premultiplied: true, transparent: false, depthTesting: true } };var _prefix = new WeakMap();
+
+class Uniform {
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(ctx, name, type, value) {_prefix.set(this, { writable: true, value: 'u' });
+    this.ctx = ctx;
+    this.name = name;
+    this.type = type;
+    this.value = value;
+  }
+
+  prebind() {
+
+  }
+
+  bind(program) {
+    this.prebind(program);
+    const location = this.ctx.getUniformLocation(program, `${_classPrivateFieldGet(this, _prefix)}_${this.name}`);
+    switch (this.type) {
+      case Uniform.TYPE_INT:
+        if (!isNaN(this.value)) this.ctx.uniform1i(location, this.value);
+        break;
+      case Uniform.TYPE_FLOAT:
+        if (!isNaN(this.value)) this.ctx.uniform1f(location, this.value);
+        break;
+      case Uniform.TYPE_V2:
+        if (this.value instanceof Array && this.value.length === 2.) this.ctx.uniform2fv(location, this.value);
+        break;
+      case Uniform.TYPE_V3:
+        if (this.value instanceof Array && this.value.length === 3.) this.ctx.uniform3fv(location, this.value);
+        break;
+      case Uniform.TYPE_V4:
+        if (this.value instanceof Array && this.value.length === 4.) this.ctx.uniform4fv(location, this.value);
+        break;
+      case Uniform.TYPE_BOOL:
+        if (!isNaN(this.value)) this.ctx.uniform1i(location, this.value);
+        break;
+      case Uniform.TYPE_M2:
+        if (this.value instanceof Array && this.value.length === 4.) this.ctx.uniformMatrix2fv(location, false, this.value);
+      case Uniform.TYPE_M3:
+        if (this.value instanceof Array && this.value.length === 9.) this.ctx.uniformMatrix3fv(location, false, this.value);
+      case Uniform.TYPE_M4:
+        if (this.value instanceof Array && this.value.length === 16.) this.ctx.uniformMatrix4fv(location, false, this.value);
+        break;}
+
+  }}_defineProperty(Uniform, "TYPE_INT", 0);_defineProperty(Uniform, "TYPE_FLOAT", 1);_defineProperty(Uniform, "TYPE_V2", 2);_defineProperty(Uniform, "TYPE_V3", 3);_defineProperty(Uniform, "TYPE_V4", 4);_defineProperty(Uniform, "TYPE_BOOL", 5);_defineProperty(Uniform, "TYPE_M2", 6);_defineProperty(Uniform, "TYPE_M3", 7);_defineProperty(Uniform, "TYPE_M4", 8);var _prefix2 = new WeakMap();
+
+class Texture extends Uniform {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(ctx, name, options) {
+    super(ctx, name, 0, null);_prefix2.set(this, { writable: true, value: 's' });
+    options = Object.assign({}, _classStaticPrivateFieldSpecGet(Texture, Texture, _defaultOptions3), options);
+    this.textureType = options.textureType;
+    this.minFilter = options.minFilter;
+    this.magFilter = options.magFilter;
+    this.makePowerOf2 = options.makePowerOf2;
+    this.generateMipMap = options.generateMipMap;
+    this.url = options.url;
+    this.data = options.data;
+    this.value = Texture.masteri++;
+    this.textureTarget = options.textureTarget;
+  }
+  async preload() {
+    const store = {};
+
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+
+    await asyncImageLoad(img, this.url);
+
+    if (this.makePowerOf2) this.image = pow2Image(img);else
+    this.image = img;
+
+    // this.loadTexture(gl, n, store);
+    return this;
+  }
+
+  prebind(program) {
+    // Just an initialisation optimisation here.
+    // Hopefully this works
+    if (this.currentProgram === program) return;
+    this.currentProgram = program;
+
+    if (this.textureTarget == window.WebGLRenderingContext.TEXTURE_CUBE_MAP) {
+      this.ctx.activeTexture(this.ctx.TEXTURE0 + this.value);
+      // Create a texture.
+      var tex = this.ctx.createTexture();
+      this.ctx.bindTexture(this.ctx.TEXTURE_CUBE_MAP, tex);
+      this.data.forEach(faceInfo => {
+        const { target, img } = faceInfo;
+
+        // Upload the canvas to the cubemap face.
+        const level = 0;
+        const internalFormat = this.ctx.RGBA;
+        const format = this.ctx.RGBA;
+        const type = this.ctx.UNSIGNED_BYTE;
+        this.ctx.texImage2D(target, level, internalFormat, format, type, img);
+      });
+      this.ctx.generateMipmap(this.ctx.TEXTURE_CUBE_MAP);
+      this.ctx.texParameteri(this.ctx.TEXTURE_CUBE_MAP, this.ctx.TEXTURE_MIN_FILTER, this.ctx.LINEAR_MIPMAP_LINEAR);
+      return;
+    }
+
+    if (!this.image && !this.data) return;
+
+    if (!window.log || window.log < 3) {
+      window.log = window.log ? window.log + 1 : 1;
+      console.log('ss');
+    }
+
+    this.ctx.activeTexture(this.ctx.TEXTURE0 + this.value);
+
+    const texture = this.ctx.createTexture(); // Create the texture object
+
+    // this.ctx.pixelStorei(this.ctx.UNPACK_FLIP_Y_WEBGL, true);
+    this.ctx.bindTexture(this.textureTarget, texture);
+
+    if (this.textureTarget == window.WebGLRenderingContext.TEXTURE_2D) {
+      // Set the parameters based on the passed type
+      // In WebGL images are wrapped by default, so we don't need to check for that
+      if (this.textureType === Texture.IMAGETYPE_MIRROR) {
+        this.ctx.texParameteri(this.textureTarget, this.ctx.TEXTURE_WRAP_S, this.ctx.MIRRORED_REPEAT);
+        this.ctx.texParameteri(this.textureTarget, this.ctx.TEXTURE_WRAP_T, this.ctx.MIRRORED_REPEAT);
+      } else if (this.textureType === Texture.IMAGETYPE_REGULAR) {
+        this.ctx.texParameteri(this.textureTarget, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.textureTarget, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+      }
+
+      this.ctx.texParameteri(this.textureTarget, this.ctx.TEXTURE_MIN_FILTER, this.minFilter);
+      this.ctx.texParameteri(this.textureTarget, this.ctx.TEXTURE_MAG_FILTER, this.magFilter);
+
+      // Upload the image into the texture.
+      if (this.data) {
+        this.ctx.texImage2D(this.textureTarget, 0, this.ctx.RGBA, this.ctx.RGBA, this.ctx.UNSIGNED_BYTE, this.data);
+      } else {
+        this.ctx.texImage2D(this.textureTarget, 0, this.ctx.RGBA, this.ctx.RGBA, this.ctx.UNSIGNED_BYTE, this.image);
+      }
+    }
+
+
+    if (!window.log1 || window.log1 < 3) {
+      window.log1 = window.log1 ? window.log1 + 1 : 1;
+      console.log(this.textureTarget, this.ctx.TEXTURE_CUBE_MAP);
+    }
+
+    if (this.generateMipMap) this.ctx.generateMipmap(this.textureTarget);
+  }}var _defaultOptions3 = { writable: true, value: { textureType: 0, minFilter: window.WebGLRenderingContext.LINEAR, magFilter: window.WebGLRenderingContext.LINEAR, makePowerOf2: false, generateMipMap: false, textureTarget: window.WebGLRenderingContext.TEXTURE_2D } };_defineProperty(Texture, "masteri", 0);_defineProperty(Texture, "IMAGETYPE_REGULAR", 0);_defineProperty(Texture, "IMAGETYPE_TILE", 1);_defineProperty(Texture, "IMAGETYPE_MIRROR", 2);var _fb = new WeakMap();var _fb2 = new WeakMap();var _activeFB = new WeakMap();var _name = new WeakMap();var _width = new WeakMap();var _height = new WeakMap();var _pxRatio = new WeakMap();var _tiling = new WeakMap();var _texdepth = new WeakMap();var _data = new WeakMap();
+
+class FrameBuffer {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(renderer, name, options) {_fb.set(this, { writable: true, value: void 0 });_fb2.set(this, { writable: true, value: void 0 });_activeFB.set(this, { writable: true, value: void 0 });_name.set(this, { writable: true, value: void 0 });_width.set(this, { writable: true, value: void 0 });_height.set(this, { writable: true, value: void 0 });_pxRatio.set(this, { writable: true, value: void 0 });_tiling.set(this, { writable: true, value: Texture.IMAGETYPE_REGULAR });_texdepth.set(this, { writable: true, value: FrameBuffer.TEXTYPE_HALF_FLOAT_OES });_data.set(this, { writable: true, value: void 0 });
+    options = Object.assign({}, _classStaticPrivateFieldSpecGet(FrameBuffer, FrameBuffer, _defaultOptions4), options);
+
+    this.width = options.width;
+    this.height = options.height;
+    this.pxRatio = options.pxRatio;
+    this.tiling = options.tiling;
+    this.texdepth = options.texdepth;
+    this.depthTesting = options.depthTesting;
+
+    _classPrivateFieldSet(this, _name, name);
+    this.value = Texture.masteri++;
+
+    this.ctx = renderer.ctx;
+    this.renderer = renderer;
+
+    this.data = options.data;
+
+    _classPrivateFieldSet(this, _fb, this.createFrameBuffer());
+    _classPrivateFieldSet(this, _fb2, this.createFrameBuffer());
+    _classPrivateFieldSet(this, _activeFB, _classPrivateFieldGet(this, _fb));
+  }
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+    _classPrivateFieldSet(this, _fb, this.createFrameBuffer());
+    _classPrivateFieldSet(this, _fb2, this.createFrameBuffer());
+    _classPrivateFieldSet(this, _activeFB, _classPrivateFieldGet(this, _fb));
+  }
+  createFrameBuffer() {
+    const targetTexture = this.ctx.createTexture();
+    this.ctx.bindTexture(this.ctx.TEXTURE_2D, targetTexture);
+    {
+      // define size and format of level 0
+      const level = 0;
+      let internalFormat = this.ctx.RGBA;
+      const border = 0;
+      let format = this.ctx.RGBA;
+      let t;
+      if (this.texdepth === FrameBuffer.TEXTYPE_FLOAT) {
+        const e = this.ctx.getExtension('OES_texture_float');
+        t = this.ctx.FLOAT;
+        // internalFormat = this.ctx.FLOAT;
+        // format = this.ctx.FLOAT;
+      } else if (this.texdepth & FrameBuffer.TEXTYPE_HALF_FLOAT_OES) {
+        // t = gl.renderer.isWebgl2 ? e.HALF_FLOAT : e.HALF_FLOAT_OES;
+        //     gl.renderer.extensions['OES_texture_half_float'] ? gl.renderer.extensions['OES_texture_half_float'].HALF_FLOAT_OES : 
+        //     gl.UNSIGNED_BYTE;
+        const e = this.ctx.getExtension('OES_texture_half_float');
+        t = this.renderer.isWebgl2 ? this.ctx.HALF_FLOAT : e.HALF_FLOAT_OES;
+        // format = gl.RGBA;
+        if (this.renderer.isWebgl2) {
+          internalFormat = this.ctx.RGBA16F;
+        }
+        // internalFormat = gl.RGB32F;
+        // format = gl.RGB32F;
+        // window.gl = gl
+        // t = e.HALF_FLOAT_OES;
+      } else {
+        t = this.ctx.UNSIGNED_BYTE;
+      }
+      const type = t;
+      const data = this.data;
+      this.ctx.texImage2D(this.ctx.TEXTURE_2D, level, internalFormat,
+      this.width * this.pxRatio, this.height * this.pxRatio, border,
+      format, type, data);
+      // gl.generateMipmap(gl.TEXTURE_2D);
+
+      // set the filtering so we don't need mips
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.NEAREST);
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.NEAREST);
+
+      // Set the parameters based on the passed type
+      if (this.tiling === Texture.IMAGETYPE_TILE) {
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.REPEAT);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.REPEAT);
+      } else if (this.tiling === Texture.IMAGETYPE_MIRROR) {
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.MIRRORED_REPEAT);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.MIRRORED_REPEAT);
+      } else if (this.tiling === Texture.IMAGETYPE_REGULAR) {
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+      }
+    }
+
+    // Create and bind the framebuffer
+    const fb = this.ctx.createFramebuffer();
+    this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, fb);
+
+    if (this.depthTesting) {
+      var ext = this.ctx.getExtension('WEBGL_depth_texture');
+      let depth = this.ctx.createTexture();
+      this.ctx.bindTexture(this.ctx.TEXTURE_2D, depth);
+      this.ctx.texImage2D(
+      this.ctx.TEXTURE_2D, 0, this.ctx.DEPTH_COMPONENT, this.width * this.pxRatio, this.height * this.pxRatio, 0, this.ctx.DEPTH_COMPONENT, this.ctx.UNSIGNED_SHORT, null);
+      this.ctx.framebufferTexture2D(this.ctx.FRAMEBUFFER, this.ctx.DEPTH_ATTACHMENT, this.ctx.TEXTURE_2D, depth, 0);
+    }
+
+    // attach the texture as the first color attachment
+    const attachmentPoint = this.ctx.COLOR_ATTACHMENT0;
+    const level = 0;
+    this.ctx.framebufferTexture2D(
+    this.ctx.FRAMEBUFFER,
+    attachmentPoint,
+    this.ctx.TEXTURE_2D,
+    targetTexture,
+    level);
+
+    return {
+      fb: fb,
+      frameTexture: targetTexture };
+
+  }
+  bind() {
+    // find the active texture based on the index
+    let uniform = this.ctx.getUniformLocation(this.renderer.currentProgram.program, `b_${_classPrivateFieldGet(this, _name)}`);
+
+    // Set the texture unit to the uniform
+    this.ctx.uniform1i(uniform, this.value);
+    this.ctx.activeTexture(this.ctx.TEXTURE0 + this.value);
+    // Bind the texture
+    this.ctx.bindTexture(this.ctx.TEXTURE_2D, _classPrivateFieldGet(this, _activeFB).frameTexture);
+  }
+  render(n) {
+    this.bind();
+
+    // Finally, ping-pong the texture
+    _classPrivateFieldSet(this, _activeFB, _classPrivateFieldGet(this, _activeFB) === _classPrivateFieldGet(this, _fb) ? _classPrivateFieldGet(this, _fb2) : _classPrivateFieldGet(this, _fb));
+
+    // this.renderer.render(n, this.#activeFB);
+    this.renderer.render(n, _classPrivateFieldGet(this, _activeFB), [this.width, this.height]);
+  }
+
+  set data(value) {
+    if (value instanceof Float32Array) _classPrivateFieldSet(this, _data, value);
+  }
+  get data() {
+    return _classPrivateFieldGet(this, _data) || null;
+  }
+  set width(value) {
+    if (value > 0) _classPrivateFieldSet(this, _width, value);
+  }
+  get width() {
+    return _classPrivateFieldGet(this, _width) || 1;
+  }
+  set height(value) {
+    if (value > 0) _classPrivateFieldSet(this, _height, value);
+  }
+  get height() {
+    return _classPrivateFieldGet(this, _height) || 1;
+  }
+  set pxRatio(value) {
+    if (value > 0) _classPrivateFieldSet(this, _pxRatio, value);
+  }
+  get pxRatio() {
+    return _classPrivateFieldGet(this, _pxRatio) || 1;
+  }
+  set tiling(value) {
+    if ([Texture.IMAGETYPE_REGULAR, Texture.IMAGETYPE_TILE, Texture.IMAGETYPE_MIRROR].indexOf(value) > -1) _classPrivateFieldSet(this, _tiling, value);
+  }
+  get tiling() {
+    return _classPrivateFieldGet(this, _tiling);
+  }
+  set texdepth(value) {
+    if ([FrameBuffer.TEXTYPE_FLOAT, FrameBuffer.TEXTYPE_UNSIGNED_BYTE, FrameBuffer.TEXTYPE_HALF_FLOAT_OES].indexOf(value) > -1) _classPrivateFieldSet(this, _texdepth, value);
+  }
+  get texdepth() {
+    return _classPrivateFieldGet(this, _texdepth);
+  }}var _defaultOptions4 = { writable: true, value: { width: 512, height: 512, pxRatio: Math.min(window.devicePixelRatio, 2), tiling: Texture.IMAGETYPE_REGULAR, texdepth: FrameBuffer.TEXTYPE_HALF_FLOAT_OES, data: null, depthTesting: false } };_defineProperty(FrameBuffer, "TEXTYPE_FLOAT", 0);_defineProperty(FrameBuffer, "TEXTYPE_UNSIGNED_BYTE", 1);_defineProperty(FrameBuffer, "TEXTYPE_HALF_FLOAT_OES", 2);var _fov = new WeakMap();var _aspect = new WeakMap();var _near = new WeakMap();var _far = new WeakMap();var _pos = new WeakMap();var _target = new WeakMap();var _up = new WeakMap();var _updateDebounce = new WeakMap();var _model = new WeakMap();var _view = new WeakMap();var _proj = new WeakMap();var _MVP = new WeakMap();var _u_model = new WeakMap();var _u_view = new WeakMap();var _u_proj = new WeakMap();var _u_MVP = new WeakMap();var _q = new WeakMap();var _name2 = new WeakMap();
+
+class Camera {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  constructor(renderer, name, options) {_fov.set(this, { writable: true, value: void 0 });_aspect.set(this, { writable: true, value: void 0 });_near.set(this, { writable: true, value: void 0 });_far.set(this, { writable: true, value: void 0 });_pos.set(this, { writable: true, value: void 0 });_target.set(this, { writable: true, value: void 0 });_up.set(this, { writable: true, value: void 0 });_updateDebounce.set(this, { writable: true, value: void 0 });_model.set(this, { writable: true, value: void 0 });_view.set(this, { writable: true, value: void 0 });_proj.set(this, { writable: true, value: void 0 });_MVP.set(this, { writable: true, value: void 0 });_u_model.set(this, { writable: true, value: void 0 });_u_view.set(this, { writable: true, value: void 0 });_u_proj.set(this, { writable: true, value: void 0 });_u_MVP.set(this, { writable: true, value: void 0 });_q.set(this, { writable: true, value: void 0 });_name2.set(this, { writable: true, value: void 0 });
+    options = Object.assign({}, _classStaticPrivateFieldSpecGet(Camera, Camera, _defaultOptions5), options);
+
+    this.renderer = renderer;
+    this.ctx = renderer.ctx;
+
+    this.fov = options.fov;
+    this.aspect = options.aspect;
+    this.near = options.near;
+    this.far = options.far;
+    this.pos = options.pos;
+    this.target = options.target;
+    this.up = options.up;
+
+    this.q = new Quat();
+
+    this.name = name;
+
+    this.update(true);
+  }
+  set q(value) {
+    if (value instanceof Quat) {
+      _classPrivateFieldSet(this, _q, value);
+      _classPrivateFieldSet(this, _model, quatToMat4(_classPrivateFieldGet(this, _q)));
+      _classPrivateFieldSet(this, _u_model, new Uniform(this.ctx, 'm_model', Uniform.TYPE_M4, _classPrivateFieldGet(this, _model).array));
+    }
+  }
+  get q() {
+    return _classPrivateFieldGet(this, _q) || new Quat();
+  }
+  update(nt = false) {
+    clearTimeout(_classPrivateFieldGet(this, _updateDebounce));
+    // this.#updateDebounce = setTimeout(() => {
+    _classPrivateFieldSet(this, _model, new Mat4());
+    _classPrivateFieldSet(this, _view, Mat4.lookAt(this.pos, this.target, this.up));
+    _classPrivateFieldSet(this, _proj, Mat4.perspective(this.fov, this.aspect, this.near, this.far));
+    _classPrivateFieldSet(this, _MVP, _classPrivateFieldGet(this, _proj).multiplyNew(_classPrivateFieldGet(this, _view)).multiply(_classPrivateFieldGet(this, _model)));
+
+    _classPrivateFieldSet(this, _u_view, new Uniform(this.ctx, 'm_view', Uniform.TYPE_M4, _classPrivateFieldGet(this, _view).array));
+    _classPrivateFieldSet(this, _u_proj, new Uniform(this.ctx, 'm_proj', Uniform.TYPE_M4, _classPrivateFieldGet(this, _proj).array));
+    _classPrivateFieldSet(this, _u_MVP, new Uniform(this.ctx, 'm_MVP', Uniform.TYPE_M4, _classPrivateFieldGet(this, _MVP).array));
+
+    this.setup = true;
+    // }, nt ? 0 : 50);
+  }
+
+  set name(value) {
+    if (typeof value === 'string') _classPrivateFieldSet(this, _name2, value);
+  }
+  get name() {
+    return _classPrivateFieldGet(this, _name2) || 'camera';
+  }
+  set fov(value) {
+    if (!isNaN(value)) _classPrivateFieldSet(this, _fov, value);
+  }
+  get fov() {
+    return _classPrivateFieldGet(this, _fov);
+  }
+  set aspect(value) {
+    if (!isNaN(value)) _classPrivateFieldSet(this, _aspect, value);
+  }
+  get aspect() {
+    return _classPrivateFieldGet(this, _aspect);
+  }
+  set near(value) {
+    if (!isNaN(value)) _classPrivateFieldSet(this, _near, value);
+  }
+  get near() {
+    return _classPrivateFieldGet(this, _near);
+  }
+  set far(value) {
+    if (!isNaN(value)) _classPrivateFieldSet(this, _far, value);
+  }
+  get far() {
+    return _classPrivateFieldGet(this, _far);
+  }
+  set pos(value) {
+    if (value instanceof Vec3) _classPrivateFieldSet(this, _pos, value);
+  }
+  get pos() {
+    return _classPrivateFieldGet(this, _pos);
+  }
+  set target(value) {
+    if (value instanceof Vec3) _classPrivateFieldSet(this, _target, value);
+  }
+  get target() {
+    return _classPrivateFieldGet(this, _target);
+  }
+  set up(value) {
+    if (value instanceof Vec3) _classPrivateFieldSet(this, _up, value);
+  }
+  get up() {
+    return _classPrivateFieldGet(this, _up);
+  }
+  get u_model() {
+    return _classPrivateFieldGet(this, _u_model);
+  }
+  get u_view() {
+    return _classPrivateFieldGet(this, _u_view);
+  }
+  get u_proj() {
+    return _classPrivateFieldGet(this, _u_proj);
+  }
+  get u_MVP() {
+    return _classPrivateFieldGet(this, _u_MVP);
+  }
+  get uniforms() {
+    return [this.u_model, this.u_view, this.u_proj, this.u_MVP];
+  }}var _defaultOptions5 = { writable: true, value: { fov: 30 * Math.PI / 180, aspect: window.innerWidth / window.innerHeight, near: .5, far: 100, pos: new Vec3(3, 1, -5), target: new Vec3(0, 0, 0), up: new Vec3(0, 1, 0) } };
+
+
+const dimensions = [window.innerWidth, window.innerHeight];
+
+const canvas = document.createElement('canvas');
+document.body.appendChild(canvas);
+
+const renderer = new Renderer(canvas, { width: dimensions[0], height: dimensions[1], alpha: false, premultipliedAlpha: true, preserveDrawingBuffer: true });
+const ctx = renderer.ctx;
+
+let drawing = new Float32Array([-1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0]);
+
+const drawBuffer = new Buffer(ctx, drawing);
+
+const vertexShader_buffer = document.getElementById('vertexShader_buffer').innerText;
+
+const programMain = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_under').innerText, {
+  clearColour: [.15, .15, 0.25, 1.],
+  renderType: Program.RENDER_STRIP });
+
+
+const time = new Uniform(ctx, 'time', Uniform.TYPE_FLOAT, 100);
+const uDelta = new Uniform(ctx, 'delta', Uniform.TYPE_FLOAT, 100);
+const mouse = new Uniform(ctx, 'mouse', Uniform.TYPE_V2, [0., 0.]);
+
+// const noise = new Texture(ctx, 'noise', {
+//   textureType: Texture.IMAGETYPE_TILE,
+//   url: 'https://assets.codepen.io/982762/noise.png'
+// });
+
+// Load all our textures. We only initiate the instance once all images are loaded.
+const loadedTextures = {};
+const textures = [
+{
+  name: 'noise',
+  url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',
+  type: Texture.IMAGETYPE_TILE,
+  img: null },
+{
+  name: 'cube_NEGATIVE_Z',
+  url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/miramar_bk.jpg',
+  img: null,
+  defer: true },
+{
+  name: 'cube_NEGATIVE_X',
+  url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/miramar_lf.jpg',
+  img: null,
+  defer: true },
+{
+  name: 'cube_POSITIVE_Z',
+  url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/miramar_ft.jpg',
+  img: null,
+  defer: true },
+{
+  name: 'cube_NEGATIVE_Y',
+  url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/miramar_dn.jpg',
+  img: null,
+  defer: true },
+{
+  name: 'cube_POSITIVE_Y',
+  url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/miramar_up.jpg',
+  img: null,
+  defer: true },
+{
+  name: 'cube_POSITIVE_X',
+  url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/miramar_rt.jpg',
+  img: null,
+  defer: true }];
+
+
+const loadImage = function (imageObject) {
+  let img = document.createElement('img');
+  img.crossOrigin = "anonymous";
+
+  return new Promise((resolve, reject) => {
+    img.addEventListener('load', e => {
+      imageObject.img = img;
+      resolve(imageObject);
+    });
+    img.addEventListener('error', e => {
+      reject(e);
+    });
+    img.src = imageObject.url;
+  });
+};
+const loadTextures = function (textures) {
+  return new Promise((resolve, reject) => {
+    const loadTexture = pointer => {
+      if (pointer >= textures.length || pointer > 10) {
+        resolve(textures);
+        return;
+      };
+      const imageObject = textures[pointer];
+
+      const p = loadImage(imageObject);
+      p.then(
+      result => {
+        if (!result.defer) {
+          // twodWebGL.addTexture(result.name, result.type, result.img);
+          loadedTextures[result.name] = new Texture(ctx, result.name, {
+            textureType: result.type,
+            data: result.img });
+
+        }
+      },
+      error => {
+        console.log('error', error);
+      }).finally(e => {
+        loadTexture(pointer + 1);
+      });
+    };
+    loadTexture(0);
+  });
+
+};
+
+loadTextures(textures).then(
+result => {
+
+  const gl = renderer.ctx;
+
+
+  const faceInfos = [
+  { target: gl.TEXTURE_CUBE_MAP_POSITIVE_X },
+  { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_X },
+  { target: gl.TEXTURE_CUBE_MAP_POSITIVE_Y },
+  { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y },
+  { target: gl.TEXTURE_CUBE_MAP_POSITIVE_Z },
+  { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z }];
+
+
+  textures.forEach(tex => {
+    if (tex.name === 'cube_POSITIVE_X') {
+      faceInfos[4].img = tex.img;
+    } else if (tex.name === 'cube_NEGATIVE_X') {
+      faceInfos[5].img = tex.img;
+    } else if (tex.name === 'cube_POSITIVE_Y') {
+      faceInfos[3].img = tex.img;
+    } else if (tex.name === 'cube_NEGATIVE_Y') {
+      faceInfos[2].img = tex.img;
+    } else if (tex.name === 'cube_POSITIVE_Z') {
+      faceInfos[0].img = tex.img;
+    } else if (tex.name === 'cube_NEGATIVE_Z') {
+      faceInfos[1].img = tex.img;
+    }
+  });
+
+  console.log(faceInfos);
+
+  loadedTextures['env'] = new Texture(ctx, 'environment', {
+    textureType: result.type,
+    data: faceInfos,
+    textureTarget: gl.TEXTURE_CUBE_MAP,
+    generateMipMap: true });
+
+
+  requestAnimationFrame(run);
+
+  //     gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
+  //     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+  //     twodWebGL.pushTexture('cube_env', texture, faceInfos, gl.TEXTURE_CUBE_MAP, false);
+
+  //     twodWebGL.initTextures();
+  //     // twodWebGL.render();
+  //     twodWebGL.running = true;
+},
+error => {
+  console.log('error');
+});
+
+
+// noise.preload().then((n) => {
+//   requestAnimationFrame(run);
+// });
+
+let pointerdown = false;
+let lastPos = new Vec2();
+window.addEventListener('pointerdown', e => {
+  pointerdown = true;
+  lastPos = new Vec2(e.x, e.y);
+});
+window.addEventListener('pointerup', e => {
+  pointerdown = false;
+});
+window.addEventListener('pointermove', e => {
+  if (pointerdown) {
+    let newPos = new Vec2(e.x, e.y);
+    mouse.value = newPos.array;
+  }
+});
+
+let playing = true;
+const setPlaying = value => {
+  playing = value;
+};
+
+let autoTransitionTimer = 0;
+let timeToTransition = 0;
+const setupValues = i => {
+  dimensions[0] = window.innerWidth;
+  dimensions[1] = window.innerHeight;
+
+  time.value = -10000;
+};
+
+setupValues(0);
+
+let timeout;
+window.addEventListener('resize', () => {
+  clearTimeout(timeout);
+  timeout = setTimeout(() => {
+    dimensions[0] = window.innerWidth;
+    dimensions[1] = window.innerHeight;
+    renderer.resize(dimensions[0], dimensions[1]);
+  }, 100);
+});
+
+const cam = new Uniform(renderer.ctx, 'cam', Uniform.TYPE_V2, [0, 0.]);
+let pointermoving = false;
+let pointerTimeout;
+window.addEventListener('pointerdown', e => {
+  pointerdown = true;
+  pointerTimeout = setTimeout(() => {
+    pointermoving = true;
+  }, 200);
+  lastPos = new Vec2(e.x, e.y);
+});
+window.addEventListener('pointerup', e => {
+  pointerdown = false;
+  pointermoving = false;
+  clearTimeout(pointerTimeout);
+});
+window.addEventListener('pointermove', e => {
+  if (pointerdown) {
+    let newPos = new Vec2(e.x, e.y);
+    let diff = newPos.clone().subtract(lastPos);
+    lastPos = newPos.clone();
+    cam.value[0] -= diff.x * -.01;
+    cam.value[1] -= diff.y * -.01;
+  }
+});
+
+const opx = renderer.pxRatio;
+let then = 0;
+// let framenum = 0;
+// let framesPerFrame = 10;
+// let gif = new gifJs({
+//   workers: 2,
+//   quality: 10
+// });
+// gif.on('finished', function(blob) {
+//   console.log('ss')
+//   window.open(URL.createObjectURL(blob));
+// });
+
+// const offscreenCanvas = document.createElement("canvas");
+// offscreenCanvas.className = 'osc';
+// offscreenCanvas.width = canvas.width;
+// offscreenCanvas.height = canvas.height;
+// const osctx = offscreenCanvas.getContext("2d");
+// document.body.appendChild(offscreenCanvas);
+
+let gifDone = false;
+const run = delta => {
+
+  //   if(framenum < 10 * framesPerFrame) {
+  //     if(framenum % framesPerFrame == 0) {
+  //       // gif.addFrame(canvas, {delay: 100});
+
+  //       osctx.drawImage(canvas,0,0);
+
+  //       gif.addFrame(offscreenCanvas, {copy: true, delay: 100});
+  //       // gif.addFrame(ctx, {copy: true});
+  //     }
+  //     framenum++;
+  //   } else if(gifDone === false) {
+  //     console.log(framenum)
+
+  //     gif.render();
+
+  //     window.gif = gif;
+
+  //     gifDone = true;
+  //   }
+
+  let now = Date.now() / 1000;
+  let _delta = now - then;
+  then = now;
+
+  if (_delta > 1000) {
+    requestAnimationFrame(run);
+    return;
+  }
+
+  if (playing) {
+
+    uDelta.value = Math.min(_delta, 0.5);
+    time.value += _delta;
+
+    // console.log(loadedTextures.noise.value);
+    // console.log(loadedTextures.env.value);
+
+    renderer.setViewport();
+    renderer.setupProgram(programMain, [drawBuffer], [], [time, mouse, loadedTextures.noise, loadedTextures.env, cam]);
+    renderer.render(4);
+    // console.log(loadedTextures)
+
+
+    requestAnimationFrame(run);
+  }
+};
\ No newline at end of file
diff --git a/platonics/dist/style.css b/platonics/dist/style.css
new file mode 100644
index 0000000..a10ea16
--- /dev/null
+++ b/platonics/dist/style.css
@@ -0,0 +1,60 @@
+body {
+  background: #666;
+  margin: 0;
+  overflow: hidden;
+}
+canvas {
+  height: 100vh;
+  width: 100vw;
+  touch-action: none;
+}
+.osc {
+  left: 0px;
+  position: fixed;
+  top: 0px;
+}
+
+.button {
+  position: fixed;
+  z-index: 10;
+  right: 0;
+  bottom: 0;
+}
+.controls {
+  position: fixed;
+  z-index: 10;
+  left: 0;
+  bottom: 0;
+}
+.playpause {
+  background: #AAB;
+  padding: 10px;
+}
+.playpause label {
+  display: block;
+  box-sizing: border-box;
+
+  width: 0;
+  height: 20px;
+
+  cursor: pointer;
+
+  border-color: transparent transparent transparent #202020;
+  transition: 100ms all ease;
+  will-change: border-width;
+
+  border-style: double;
+  border-width: 0px 0 0px 20px;
+}
+.playpause input[type='checkbox'] {
+  visibility: hidden;
+}
+.playpause.checked label {
+  border-style: double;
+  border-width: 0px 0 0px 20px;
+}
+.playpause label {
+  border-style: solid;
+  border-width: 10px 0 10px 20px;
+}
+/* } */
\ No newline at end of file
diff --git a/platonics/license.txt b/platonics/license.txt
new file mode 100644
index 0000000..751a576
--- /dev/null
+++ b/platonics/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Liam Egan (https://codepen.io/shubniggurath/pen/XWpYpON)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/platonics/src/index.html b/platonics/src/index.html
new file mode 100644
index 0000000..adea1cf
--- /dev/null
+++ b/platonics/src/index.html
@@ -0,0 +1,323 @@
+<script id="vertexShader_buffer" type="x-shader/x-vertex">attribute vec4 a_position;  
+  uniform mat4 u_modelViewMatrix;
+  uniform mat4 u_projectionMatrix;
+  
+  void main() {
+    gl_Position = a_position;
+  }
+</script>
+<script id="fragmentShader_under" type="x-shader/x-vertex">
+  #extension GL_EXT_shader_texture_lod : enable
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform float u_time;
+  uniform vec2 u_mouse;
+  uniform sampler2D u_noise;
+  
+  uniform vec2 u_cam;
+  
+  uniform samplerCube u_environment;
+  
+  /* Raymarching constants */
+  /* --------------------- */
+  const float MAX_TRACE_DISTANCE = 8.;             // max trace distance
+  const float INTERSECTION_PRECISION = 0.001;       // precision of the intersection
+  const int NUM_OF_TRACE_STEPS = 100;               // max number of trace steps
+  const float STEP_MULTIPLIER = .8;                 // the step mutliplier - ie, how much further to progress on each step
+  
+  /* Structures */
+  /* ---------- */
+  struct Camera {
+    vec3 ro;
+    vec3 rd;
+    vec3 forward;
+    vec3 right;
+    vec3 up;
+    float FOV;
+  };
+  struct Surface {
+    float len;
+    vec3 position;
+    vec3 colour;
+    float id;
+    float steps;
+    float AO;
+  };
+  struct Model {
+    float dist;
+    vec3 colour;
+    float id;
+  };
+  
+  vec2 getScreenSpace() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    return uv;
+  }
+  
+  float easeInOutCubic(float d) {
+    if (d < 0.5) return 4. * pow(d, 3.);
+    return 1. - pow(-2. * d + 2., 3.) * .5;
+  }
+  float easeInOutExpo(float k) {
+    if(k == 0.) return 0.;
+    if(k == 1.) return 1.;
+    k *= 2.;
+    if(k < 1.) return .5 * pow(1024., k - 1.);
+    return .5 * ( -pow(2., -10. * (k - 1.)) + 2. );
+  }
+  
+  /*--------------------------------
+  /  Modelling
+  / -------------------------------- */
+  float smin(float a, float b, float k) {
+      float res = exp(-k*a) + exp(-k*b);
+      return -log(res)/k;
+  }
+
+  mat4 rotationMatrix(vec3 axis, float angle) {
+    axis = normalize(axis);
+    float s = sin(angle);
+    float c = cos(angle);
+    float oc = 1.0 - c;
+
+    return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
+                  oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
+                  oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
+                  0.0,                                0.0,                                0.0,                                1.0);
+}
+  
+  float udBox( vec3 p, vec3 b ) {
+    return length(max(abs(p)-b,0.0));
+  }
+  
+  float t = 0.;
+  Model model(vec3 p) {
+    float d = length(p) - .2;
+    // vec3 colour = vec3(1,0,0);
+    
+    d = 100.;
+    vec3 colour2 = vec3(0);
+    vec3 colour1 = vec3(0);
+    vec3 colour = vec3(1);
+    
+    vec3 pos1, pos2 = vec3(0,0,0);
+    vec3 endpos1 = vec3(-.25, 0, 0);
+    vec3 endpos2 = vec3(.25, 0, 0);
+    
+    pos1 = mix(vec3(0), endpos1, t);
+    pos2 = mix(vec3(0), endpos2, t);
+    
+    vec3 _p = p;
+    
+    for(float i = 0.; i < 3.; i++) {
+      vec3 c;
+      vec3 pos = vec3(0);
+      if(i == 1.) {
+        pos = pos1;
+        c = colour2;
+      }
+      if(i == 2.) {
+        pos = pos2;
+        c = colour1;
+      }
+      p = _p + pos;
+      float t5 = u_time / 5. * (i + 1.);
+      p = (rotationMatrix(vec3(cos(t5), sin(t5), .5), u_time / 3. ) * vec4(p, 1.)).xyz;
+      if(d == 100.) {
+        d = udBox(p, vec3(.1));
+      } else {
+        float d1 = udBox(p, vec3(.1));
+        float ddiff = (d1 - d)/d1;
+        d = smin(d, d1, mix(90., 20., t));
+        colour = mix(c, colour, smoothstep(0., 1., ddiff * .7)); // This mixes the colours together based on the gradient produced by the smin
+      }
+    }
+    
+    return Model(d, colour, 1.);
+  }
+  Model map( vec3 p ){
+    return model(p);
+  }
+  
+  Surface calcIntersection( in Camera cam ){
+    float h =  INTERSECTION_PRECISION*2.0;
+    float rayDepth = 0.0;
+    float hitDepth = -1.0;
+    float id = -1.;
+    float steps = 0.;
+    float ao = 0.;
+    vec3 position;
+    vec3 colour;
+
+    for( int i=0; i< NUM_OF_TRACE_STEPS ; i++ ) {
+      if( abs(h) < INTERSECTION_PRECISION || rayDepth > MAX_TRACE_DISTANCE ) break;
+      position = cam.ro+cam.rd*rayDepth;
+      Model m = map( position );
+      h = m.dist;
+      rayDepth += h * STEP_MULTIPLIER;
+      id = m.id;
+      steps += 1.;
+      ao += max(h, 0.);
+      colour = m.colour;
+    }
+
+    if( rayDepth < MAX_TRACE_DISTANCE ) hitDepth = rayDepth;
+    if( rayDepth >= MAX_TRACE_DISTANCE ) id = -1.0;
+
+    return Surface( hitDepth, position, colour, id, steps, ao );
+  }
+  Camera getCamera(in vec2 uv, in vec3 pos, in vec3 target) {
+    vec3 forward = normalize(target - pos);
+    vec3 right = normalize(vec3(forward.z, 0., -forward.x));
+    vec3 up = normalize(cross(forward, right));
+    
+    float FOV = .6;
+    
+    return Camera(
+      pos,
+      normalize(forward + FOV * uv.x * right + FOV * uv.y * up),
+      forward,
+      right,
+      up,
+      FOV
+    );
+  }
+  
+  
+  float softshadow( in vec3 ro, in vec3 rd, in float mint, in float tmax ) {
+    float res = 1.0;
+    float t = mint;
+    for( int i=0; i<16; i++ ) {
+      float h = map( ro + rd*t ).dist;
+      res = min( res, 8.0*h/t );
+      t += clamp( h, 0.02, 0.10 );
+      if( h<0.001 || t>tmax ) break;
+    }
+    return clamp( res, 0.0, 1.0 );
+  }
+  float calcAO( in vec3 pos, in vec3 nor ) {
+    float occ = 0.0;
+    float sca = 1.0;
+    for( int i=0; i<5; i++ )
+    {
+      float hr = 0.01 + 0.12*float(i)/4.0;
+      vec3 aopos =  nor * hr + pos;
+      float dd = map( aopos ).dist;
+      occ += -(dd-hr)*sca;
+      sca *= 0.95;
+    }
+    return clamp( 1.0 - 3.0*occ, 0.0, 1.0 );    
+  }
+  // This is here to provide a fallback for devices that don't support GL_EXT_shader_texture_lod
+  vec4 cubeTexture(samplerCube map, vec3 uv, float lod) {
+    #ifdef GL_EXT_shader_texture_lod
+    return textureCubeLodEXT(map, uv, lod);
+    #endif
+    return textureCube(map, uv);
+  }
+  vec3 shade(Surface surface, vec3 nor, vec3 ref, Camera cam) {
+    
+    vec3 col = surface.colour;
+    vec3 pos = surface.position;
+    
+    vec3 I = normalize(pos - cam.ro);
+    vec3 R = reflect(I, nor);
+    vec3 reflection = cubeTexture(u_environment, R, 5.).rgb;
+    // reflection *= 0.;
+    // col = reflection;
+    // lighitng        
+    float occ = 1./surface.AO;
+    vec3  lig = normalize( vec3(-0.6, 0.7, -0.) );
+    float amb = clamp( 0.5+0.5*nor.y, 0.0, 1.0 );
+    float dif = clamp( dot( nor, lig ), 0.0, 1.0 );
+    float bac = clamp( dot( nor, normalize(vec3(-lig.x,0.0,-lig.z))), 0.0, 1.0 )*clamp( 1.0-pos.y,0.0,1.0);
+    // float dom = smoothstep( -0.1, 0.1, ref.y );
+    float fre = pow( clamp(1.0+dot(nor,cam.rd),0.0,1.0), 2.0 );
+    float spe = pow(clamp( dot( ref, lig ), 0.0, 1.0 ),4.0);
+
+    // dif *= softshadow( pos, lig, 0.02, 2.5 );
+    //dom *= softshadow( pos, ref, 0.02, 2.5 );
+
+    vec3 lin = vec3(0.0);
+    lin += 1.20*dif*vec3(.95,0.80,0.60);
+    lin += 1.20*spe*vec3(1.00,0.85,0.55)*dif;
+    lin += 0.80*amb*vec3(0.50,0.70,.80)*occ;
+    //lin += 0.30*dom*vec3(0.50,0.70,1.00)*occ;
+    lin += 0.30*bac*vec3(0.25,0.25,0.25)*occ;
+    lin += 0.20*fre*vec3(1.00,1.00,1.00)*occ;
+    col = col*lin;
+    
+    col += reflection * .5;
+
+    return col;
+  }
+  
+  // Calculates the normal by taking a very small distance,
+  // remapping the function, and getting normal for that
+  vec3 calcNormal( in vec3 pos ){
+    vec3 eps = vec3( 0.001, 0.0, 0.0 );
+    vec3 nor = vec3(
+      map(pos+eps.xyy).dist - map(pos-eps.xyy).dist,
+      map(pos+eps.yxy).dist - map(pos-eps.yxy).dist,
+      map(pos+eps.yyx).dist - map(pos-eps.yyx).dist );
+    return normalize(nor);
+  }
+  
+  vec3 render(Surface surface, Camera cam, vec2 uv) {
+    vec3 colour = vec3(.4,.4,.45);
+    vec3 colourB = vec3(.1, .1, .1);
+    
+    colour = mix(colourB, colour, smoothstep(1., 0., (length(uv) - surface.steps/100.) * (1.+smoothstep(-1., -1.5, -abs(cam.ro.z))*.5)));
+    
+    // colour = mix(vec3(.5,0,.3), vec3(0,.5,0), smoothstep(-1., -1.5, cam.ro.z))+surface.steps/100.;
+    
+    // colour -= texture2D(u_noise, uv).rgb;
+    
+    if (surface.id == 1.){
+      vec3 surfaceNormal = calcNormal( surface.position );
+      vec3 ref = reflect(cam.rd, surfaceNormal);
+      colour = surfaceNormal;
+      colour = shade(surface, surfaceNormal, ref, cam);
+    }
+
+    return colour;
+  }
+  
+  void main() {
+    vec2 uv = getScreenSpace();
+    
+    t = easeInOutExpo( smoothstep(0., 1., sin(u_time * .25) * 2.) );
+    
+    float camd = mix(.8, 1.5, t);
+    
+    float c = cos(u_cam.x);
+    float s = sin(u_cam.x);
+    mat3 xrot = mat3(
+      c, 0, s,
+      0, 1, 0,
+      -s, 0, c
+    );
+    // c = cos(u_cam.y);
+    // s = sin(u_cam.y);
+    // mat3 yrot = mat3(
+    //   1, 0, 0,
+    //   0, c, -s,
+    //   0, s, c
+    // );
+    // xrot *= yrot;
+    
+    vec3 campos = vec3( 0, 0, camd ) * xrot;
+    // campos += vec3( 0, cos(u_cam.y)*camd, sin(u_cam.y)*camd );
+    
+    // Camera cam = getCamera(uv, mix(vec3(0,0,-.8), vec3(0,0,-1.5), t), vec3(0));
+    // Camera cam = getCamera(uv, vec3(0.,0.,1.25), vec3(0, 0, 0));
+    Camera cam = getCamera(uv, campos, vec3(0));
+    
+    Surface surface = calcIntersection(cam);
+    
+    gl_FragColor = vec4(render(surface, cam, uv), 1.);
+    // gl_FragColor = vec4(vec3(surface.steps/100.), 1.);
+  }
+</script>
\ No newline at end of file
diff --git a/platonics/src/script.babel b/platonics/src/script.babel
new file mode 100644
index 0000000..221f365
--- /dev/null
+++ b/platonics/src/script.babel
@@ -0,0 +1,1306 @@
+import { Vec2, Vec3, Mat2, Mat3, Mat4, Quat } from 'https://cdn.skypack.dev/wtc-math';
+
+import gifJs from 'https://cdn.skypack.dev/gif.js';
+
+console.clear();
+
+// Determine whether a number is a power of 2
+function powerOf2(v) {
+  return v && !(v & (v - 1));
+}
+// Return the next greatest power of 2
+function nextPow2( v ) {
+  v--;
+  v |= v >> 1;
+  v |= v >> 2;
+  v |= v >> 4;
+  v |= v >> 8;
+  v |= v >> 16;
+  v++;
+  return v;
+}
+// Update a provided image to the nearest power of 2 in size.
+const pow2Image = (c) => {
+  const newWidth = powerOf2(c.width) ? c.width : nextPow2(c.width);
+  const newHeight = powerOf2(c.height) ? c.height : nextPow2(c.height);
+  const _c = document.createElement('canvas');
+  const ctx = _c.getContext('2d');
+  _c.width = newWidth;
+  _c.height = newHeight;
+  ctx.drawImage(c, 0, 0, newWidth, newHeight);
+  return _c;
+}
+const asyncImageLoad = function(img, src) {
+  return new Promise((resolve, reject) => {
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  })
+}
+const glEnumToString = (function() {
+  const haveEnumsForType = {};
+  const enums = {};
+
+  function addEnums(gl) {
+    const type = gl.constructor.name;
+    if (!haveEnumsForType[type]) {
+      for (const key in gl) {
+        if (typeof gl[key] === 'number') {
+          const existing = enums[gl[key]];
+          enums[gl[key]] = existing ? `${existing} | ${key}` : key;
+        }
+      }
+      haveEnumsForType[type] = true;
+    }
+  }
+
+  return function glEnumToString(gl, value) {
+    addEnums(gl);
+    return enums[value] || (typeof value === 'number' ? `0x${value.toString(16)}` : value);
+  };
+}());
+const addExtensions = (ctx) => {
+  // Set up the extensions
+  ctx.getExtension('OES_standard_derivatives');
+  ctx.getExtension('EXT_shader_texture_lod');
+  ctx.getExtension('OES_texture_float');
+  ctx.getExtension('WEBGL_color_buffer_float');
+  ctx.getExtension('OES_texture_float_linear');
+  ctx.getExtension('EXT_color_buffer_float');
+}
+function createContext(c, opt_attribs, params) {
+  const ctx = c.getContext("webgl", params) || this._el.getContext("experimental-webgl", params);
+  
+  addExtensions(ctx);
+  
+  return ctx;
+}
+
+const quatToMat4 = (q) => {
+    if(q.array) q = q.array; // This just transforms a provided vector into to an array.
+    
+    if(q instanceof Array && q.length >= 4) {
+      const [x, y, z, w] = q;
+      const [x2, y2, z2] = q.map(x => x * 2.);
+      
+      const xx = x * x2,
+            yx = y * x2,
+            yy = y * y2,
+            zx = z * x2,
+            zy = z * y2,
+            zz = z * z2,
+            wx = w * x2,
+            wy = w * y2,
+            wz = w * z2;
+      
+      return new Mat4(
+        1 - yy -zz, yx -wz, zx + wy, 0, 
+        yx + wz, 1 - xx - zz, zy - wx, 0, 
+        zx - wy, zy + wx, 1 - xx - yy, 0,
+        0, 0, 0, 1
+      );
+    }
+  }
+
+class Renderer {
+  static #defaultOptions = {
+    width: 512,
+    height: 512,
+    pxRatio: Math.min(window.devicePixelRatio, 2),
+    clearing: true,
+    depthTesting: true,
+    premultipliedAlpha: true
+  }
+    
+  static BLENDING_DEBUG      = -1;
+  static BLENDING_NORMAL      = 1;
+  static BLENDING_ADDITIVE    = 2;
+  static BLENDING_SUBTRACTIVE = 4;
+  static BLENDING_MULTIPLY    = 8;
+  static BLENDING_OFF         = 16;
+
+  isWebgl2 = false;
+
+  #blending;
+  #blendingEnabled = false;
+  #buffers = [];
+
+  constructor(canvas, options) {
+    options = Object.assign({}, Renderer.#defaultOptions, options);
+    this.width = options.width;
+    this.height = options.height;
+    this.pxRatio = options.pxRatio;
+    this.clearing = options.clearing;
+    this.depthTesting = options.depthTesting;
+    this.canvas = canvas || document.createElement('canvas');
+    this.canvas.width = this.width * this.pxRatio;
+    this.canvas.height = this.height * this.pxRatio;
+    this.premultipliedAlpha = options.premultipliedAlpha;
+    
+    this.ctx = this.canvas.getContext("webgl", options) || this.canvas.getContext("experimental-webgl", options);
+    
+    this.ctx.viewportWidth = this.canvas.width;
+    this.ctx.viewportHeight = this.canvas.height;
+    
+    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [this.canvas.width, this.canvas.height]);
+    
+    this.addExtensions();
+  }
+  resize(w, h, ratio) {
+    this.width = w;
+    this.height = h;
+    this.pxRatio = ratio || this.pxRatio;
+    this.canvas.width = this.width * this.pxRatio;
+    this.canvas.height = this.height * this.pxRatio;
+    
+    this.ctx.viewportWidth = this.canvas.width;
+    this.ctx.viewportHeight = this.canvas.height;
+    
+    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [this.canvas.width, this.canvas.height]);
+  }
+  setViewport(dimensions) {
+    let w = this.width*this.pxRatio;
+    let h = this.height*this.pxRatio;
+    if(dimensions) {
+      w = dimensions[0];
+      h = dimensions[1];
+    }
+    this.ctx.viewport(0, 0, w, h);
+    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [w, h]);
+  }
+  addExtensions() {
+    this.ctx.getExtension('OES_standard_derivatives');
+    this.ctx.getExtension('EXT_shader_texture_lod');
+    this.ctx.getExtension('OES_texture_float');
+    this.ctx.getExtension('WEBGL_color_buffer_float');
+    this.ctx.getExtension('OES_texture_float_linear');
+    this.ctx.getExtension('EXT_color_buffer_float');
+  }
+  linkBuffer(buffer) {
+    let hasBuffer = false;
+    this.#buffers.forEach((b) => {
+      if(buffer === b) hasBuffer = true;
+    });
+    if(!hasBuffer) {
+      this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, buffer.buffer);
+      this.ctx.bufferData(
+        this.ctx.ARRAY_BUFFER,
+        buffer.data,
+        buffer.drawType);
+    }
+    buffer.link(this.currentProgram.program);
+  }
+  setupProgram(program, buffers, attributes, uniforms) {
+    this.currentProgram = program;
+    this.ctx.useProgram(program.program);
+    
+    this.premultiplied = program.premultiplied;
+    
+    this.depthTesting = program.depthTesting;
+    
+    
+    if(program.blending === Program.BLENDING_NORMAL && program.transparent === false ) {
+      this.blending = Program.BLENDING_OFF;
+    } else {
+      this.blending = program.blending;
+    }
+    
+    this.clearColour = program.clearColour;
+    const a = this.clearColour[3];
+    // console.log('prem', this.premultipliedAlpha)
+    if(this.premultipliedAlpha) this.clearColour = this.clearColour.map((c, i) => c * a );
+    
+    this.ctx.clearColor(...this.clearColour);
+    
+    // TODO: Unlink unused buffers during this setup phase as well.
+    buffers.forEach(buffer => {
+      this.linkBuffer(buffer);
+    });
+      
+    // this.ctx.enable(ctx.DEPTH_TEST);
+    if(this.depthTesting) this.ctx.enable(ctx.DEPTH_TEST);
+    else this.ctx.disable(ctx.DEPTH_TEST);
+    
+    uniforms.forEach(uniform => {
+      uniform.bind(program.program);
+    });
+    this.uniformResolution.bind(program.program);
+  }
+  render(points, buffer) {
+    this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, buffer?.fb || null);
+    if(this.clearing) {
+      this.ctx.clear( this.ctx.COLOR_BUFFER_BIT );
+      
+      if(this.depthTesting) this.ctx.clear( this.ctx.DEPTH_BUFFER_BIT );
+    }
+    switch(this.currentProgram.renderType) {
+      case Program.RENDER_TRIANGLES: 
+        this.ctx.drawArrays(this.ctx.TRIANGLES, 0, points);
+        break;
+      case Program.RENDER_STRIP: 
+        this.ctx.drawArrays(this.ctx.TRIANGLE_STRIP, 0, points);
+        break;
+      case Program.RENDER_LINES: 
+        this.ctx.drawArrays(this.ctx.LINE_STRIP, 0, points);
+        break;
+      case Program.RENDER_LINELOOP: 
+        this.ctx.drawArrays(this.ctx.LINE_LOOP, 0, points);
+        break;
+      case Program.RENDER_POINTS: 
+        this.ctx.drawArrays(this.ctx.POINTS, 0, points);
+        break;
+    }
+    
+  }
+
+  /* SETTERS AND GETTERS */
+  get blending() {
+    return this.#blending || Program.BLENDING_NORMAL;
+  }
+  set blending(blending) {
+    
+    if(blending === Renderer.BLENDING_DEBUG) {
+      
+      if(!this.breakLog) {
+        console.log(blending, Renderer.BLENDING_OFF, this.premultiplied)
+        this.breakLog = true;
+      }
+      this.#blending = blending;
+      this.ctx.enable(this.ctx.BLEND);
+        this.ctx.blendFuncSeparate( this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA, this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA );
+      return;
+    }
+    
+    this.#blending = blending;
+    if(blending === Renderer.BLENDING_OFF) {
+      this.ctx.disable(this.ctx.BLEND);
+      this.#blendingEnabled = false;
+      return;
+    }
+		if ( this.#blendingEnabled === false ) {
+      this.ctx.enable(this.ctx.BLEND);
+      // this.ctx.alphaFunc(this.ctx.GL_GREATER, 0.5);
+      // this.ctx.enable(this.ctx.GL_ALPHA_TEST);
+			this.#blendingEnabled = true;
+		}
+    
+		if( this.premultiplied ) {
+      switch (this.blending) {
+        case Renderer.BLENDING_NORMAL:
+          this.ctx.blendFuncSeparate( this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA, this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA );
+          break;
+        case Renderer.BLENDING_ADDITIVE: 
+          this.ctx.blendFunc( this.ctx.ONE, this.ctx.ONE );
+          break;
+        case Renderer.BLENDING_SUBTRACTIVE: 
+          this.ctx.blendFuncSeparate( this.ctx.ZERO, this.ctx.ZERO, this.ctx.ONE_MINUS_SRC_COLOR, this.ctx.ONE_MINUS_SRC_ALPHA );
+          break;
+        case Renderer.BLENDING_MULTIPLY:
+          this.ctx.blendFuncSeparate( this.ctx.ZERO, this.ctx.SRC_COLOR, this.ctx.ZERO, this.ctx.SRC_ALPHA );
+          break;
+      }
+    } else {
+      switch (this.blending) {
+        case Renderer.BLENDING_NORMAL: 
+          this.ctx.blendFuncSeparate( this.ctx.SRC_ALPHA, this.ctx.ONE_MINUS_SRC_ALPHA, this.ctx.ONE, this.ctx.ONE_MINUS_SRC_ALPHA );
+          break;
+        case Renderer.BLENDING_ADDITIVE: 
+          this.ctx.blendFunc( this.ctx.SRC_ALPHA, this.ctx.ONE );
+          break;
+        case Renderer.BLENDING_SUBTRACTIVE: 
+          this.ctx.blendFunc( this.ctx.ZERO, this.ctx.ONE_MINUS_SRC_COLOR );
+          break;
+        case Renderer.BLENDING_MULTIPLY:
+          this.ctx.blendFunc( this.ctx.ZERO, this.ctx.SRC_COLOR );
+          break;
+      }
+    }
+  }
+}
+class Buffer {
+  static #defaultAttribute = {
+        numComponents: 2,
+        offset: 0,
+        stride: 0
+      };
+  static #defaults = {
+    attributes: [{
+        name: 'position'
+      }
+    ],
+    normalized: false,
+    drawType: window.WebGLRenderingContext.STATIC_DRAW,
+    type: window.WebGLRenderingContext.FLOAT
+  }
+  constructor(ctx, data, options) {
+    this.ctx = ctx;
+    this.name = name;
+    options = Object.assign({}, Buffer.#defaults, options);
+    this.attributes = options.attributes.map(a => Object.assign({}, Buffer.#defaultAttribute, a));
+    
+    this.normalized = options.normalized;
+    this.drawType = options.drawType;
+    this.type = options.type;
+    if(data instanceof Array) data = new Float32Array(data);
+    this.data = data;
+    this.buffer = ctx.createBuffer();
+  }
+
+  link(program, hasBuffer = false) {
+    let location = this.ctx.getAttribLocation(program, `a_${this.name}`);
+    
+    this.attributes.forEach(attribute => {
+      const location = this.ctx.getAttribLocation(program, `a_${attribute.name}`);
+      this.ctx.vertexAttribPointer(location, attribute.numComponents, this.type, this.normalized, attribute.stride, attribute.offset);
+      this.ctx.enableVertexAttribArray(location);
+    });
+  }
+
+  get length() {
+    return this.data.length;
+  }
+}
+class Program {
+  
+  static RENDER_TRIANGLES     = 0;
+  static RENDER_STRIP         = 1;
+  static RENDER_LINES         = 2;
+  static RENDER_LINELOOP      = 4;
+  static RENDER_POINTS        = 8;
+  
+  static #defaultOptions = {
+    renderType: Program.RENDER_TRIANGLES,
+    clearColour: [1.0, 1.0, 1.0, 1.0],
+    blending: Renderer.BLENDING_OFF,
+    premultiplied: true,
+    transparent: false,
+    depthTesting: true
+  }
+  
+  #vShader
+  #fShader
+  #p
+  #renderType
+  
+  constructor(ctx, vertexShaderSource, fragmentShaderSource, options = {}) {
+    options = Object.assign({}, Program.#defaultOptions, options);
+    
+    this.ctx = ctx;
+    
+    this.renderType = options.renderType;
+    
+    this.clearColour = options.clearColour;
+    this.blending = options.blending;
+    this.premultiplied = options.premultiplied;
+    this.transparent = options.transparent;
+    this.depthTesting = options.depthTesting;
+    
+    // Create the shaders
+    this.vShader = Program.createShaderOfType(this.ctx, this.ctx.VERTEX_SHADER, vertexShaderSource);
+    this.fShader = Program.createShaderOfType(this.ctx, this.ctx.FRAGMENT_SHADER, fragmentShaderSource);
+    
+    // Create the program and link the shaders
+    this.#p = this.ctx.createProgram();
+    this.ctx.attachShader(this.#p, this.vShader);
+    this.ctx.attachShader(this.#p, this.fShader);
+    
+    this.ctx.linkProgram(this.#p);
+    
+    // Check the result of linking
+    var linked = this.ctx.getProgramParameter(this.#p, this.ctx.LINK_STATUS);
+    if (!linked) {
+      var error = this.ctx.getProgramInfoLog(this.#p);
+      console.log('Failed to link program: ' + error);
+      this.ctx.deleteProgram(this.#p);
+      this.ctx.deleteShader(this.fShader);
+      this.ctx.deleteShader(this.vShader);
+    }
+  }
+  
+  get program() {
+    return this.#p;
+  }
+
+  /* SETTERS AND GETTERS */
+
+  set renderType(value) {
+    if([
+      Program.RENDER_TRIANGLES,
+      Program.RENDER_STRIP,
+      Program.RENDER_LINES,
+      Program.RENDER_LINELOOP,
+      Program.RENDER_POINTS
+    ].indexOf(value) > -1) this.#renderType = value;
+  }
+  get renderType() {
+    return this.#renderType;
+  }
+  
+  /**
+   * Static Methods
+   */
+
+	/**
+	 * Create a shader of a given type given a context, type and source.
+	 *
+   * @static
+	 * @param  {WebGLContext} ctx The context under which to create the shader
+	 * @param  {WebGLShaderType} type The shader type, vertex or fragment
+	 * @param  {string} source The shader source.
+	 * @return {WebGLShader} The created shader
+	 */
+  static createShaderOfType(ctx, type, source) {
+    const shader = ctx.createShader(type);
+    ctx.shaderSource(shader, source);
+    ctx.compileShader(shader);
+    
+    // Check the compile status
+    const compiled = ctx.getShaderParameter(shader, ctx.COMPILE_STATUS);
+    if (!compiled) {
+      // Something went wrong during compilation; get the error
+      const lastError = ctx.getShaderInfoLog(shader);
+      console.error(`${Program.addLineNumbersWithError(source, lastError)}\nError compiling ${glEnumToString(ctx, type)}: ${lastError}`);
+      ctx.deleteShader(shader);
+      return null;
+    }
+    
+    return shader;
+  }
+  static addLineNumbersWithError(src, log = '') {
+    console.log(src)
+    const errorRE = /ERROR:\s*\d+:(\d+)/gi;
+    // Note: Error message formats are not defined by any spec so this may or may not work.
+    const matches = [...log.matchAll(errorRE)];
+    const lineNoToErrorMap = new Map(matches.map((m, ndx) => {
+      const lineNo = parseInt(m[1]);
+      const next = matches[ndx + 1];
+      const end = next ? next.index : log.length;
+      const msg = log.substring(m.index, end);
+      return [lineNo - 1, msg];
+    }));
+    return src.split('\n').map((line, lineNo) => {
+      const err = lineNoToErrorMap.get(lineNo);
+      return `${lineNo + 1}: ${line}${err ? `\n\n^^^ ${err}` : ''}`;
+    }).join('\n');
+  }
+}
+class Uniform {
+  static TYPE_INT = 0
+  static TYPE_FLOAT = 1
+  static TYPE_V2 = 2
+  static TYPE_V3 = 3
+  static TYPE_V4 = 4
+  static TYPE_BOOL = 5
+  static TYPE_M2 = 6
+  static TYPE_M3 = 7
+  static TYPE_M4 = 8
+  
+  #prefix = 'u'
+  
+  constructor(ctx, name, type, value) {
+    this.ctx = ctx;
+    this.name = name;
+    this.type = type;
+    this.value = value;
+  }
+  
+  prebind() {
+    
+  }
+  
+  bind(program) {
+    this.prebind(program);
+    const location = this.ctx.getUniformLocation(program, `${this.#prefix}_${this.name}`);
+    switch(this.type) {
+      case Uniform.TYPE_INT : 
+        if(!isNaN(this.value)) this.ctx.uniform1i( location, this.value );
+        break;
+      case Uniform.TYPE_FLOAT : 
+        if(!isNaN(this.value)) this.ctx.uniform1f( location, this.value);
+        break;
+      case Uniform.TYPE_V2 : 
+        if(this.value instanceof Array && this.value.length === 2.) this.ctx.uniform2fv( location, this.value);
+        break;
+      case Uniform.TYPE_V3 : 
+        if(this.value instanceof Array && this.value.length === 3.) this.ctx.uniform3fv( location, this.value);
+        break;
+      case Uniform.TYPE_V4 : 
+        if(this.value instanceof Array && this.value.length === 4.) this.ctx.uniform4fv( location, this.value);
+        break;
+      case Uniform.TYPE_BOOL : 
+        if(!isNaN(this.value)) this.ctx.uniform1i( location, this.value);
+        break;
+      case Uniform.TYPE_M2 : 
+        if(this.value instanceof Array && this.value.length === 4.) this.ctx.uniformMatrix2fv( location, false, this.value);
+      case Uniform.TYPE_M3 : 
+        if(this.value instanceof Array && this.value.length === 9.) this.ctx.uniformMatrix3fv( location, false, this.value);
+      case Uniform.TYPE_M4 : 
+        if(this.value instanceof Array && this.value.length === 16.) this.ctx.uniformMatrix4fv( location, false, this.value);
+        break;
+    }
+  }
+}
+class Texture extends Uniform {
+  #prefix = 's'
+  static #defaultOptions = {
+    textureType: 0,
+    minFilter: window.WebGLRenderingContext.LINEAR,
+    magFilter: window.WebGLRenderingContext.LINEAR,
+    makePowerOf2: false,
+    generateMipMap: false,
+    textureTarget: window.WebGLRenderingContext.TEXTURE_2D
+  }
+  static masteri = 0
+  
+  static IMAGETYPE_REGULAR = 0
+  static IMAGETYPE_TILE = 1
+  static IMAGETYPE_MIRROR = 2
+  
+  constructor(ctx, name, options) {
+    super(ctx, name, 0, null);
+    options = Object.assign({}, Texture.#defaultOptions, options);
+    this.textureType = options.textureType;
+    this.minFilter = options.minFilter;
+    this.magFilter = options.magFilter;
+    this.makePowerOf2 = options.makePowerOf2;
+    this.generateMipMap = options.generateMipMap;
+    this.url = options.url;
+    this.data = options.data;
+    this.value = Texture.masteri++;
+    this.textureTarget = options.textureTarget;
+  }
+  async preload() {
+    const store = {};
+
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+
+    await asyncImageLoad(img, this.url);
+    
+    if(this.makePowerOf2) this.image = pow2Image(img);
+    else this.image = img;
+
+    // this.loadTexture(gl, n, store);
+    return this;
+  }
+  
+  prebind(program) {
+    // Just an initialisation optimisation here.
+    // Hopefully this works
+    if(this.currentProgram === program) return;
+    this.currentProgram = program;
+    
+    if(this.textureTarget == window.WebGLRenderingContext.TEXTURE_CUBE_MAP) {
+      this.ctx.activeTexture(this.ctx.TEXTURE0 + this.value);
+      // Create a texture.
+      var tex = this.ctx.createTexture();
+      this.ctx.bindTexture(this.ctx.TEXTURE_CUBE_MAP, tex);
+      this.data.forEach((faceInfo) => {
+        const {target, img} = faceInfo;
+
+        // Upload the canvas to the cubemap face.
+        const level = 0;
+        const internalFormat = this.ctx.RGBA;
+        const format = this.ctx.RGBA;
+        const type = this.ctx.UNSIGNED_BYTE;
+        this.ctx.texImage2D(target, level, internalFormat, format, type, img);
+      });
+      this.ctx.generateMipmap(this.ctx.TEXTURE_CUBE_MAP);
+  this.ctx.texParameteri(this.ctx.TEXTURE_CUBE_MAP, this.ctx.TEXTURE_MIN_FILTER, this.ctx.LINEAR_MIPMAP_LINEAR);
+      return;
+    }
+    
+    if(!this.image && !this.data) return;
+    
+    if(!window.log || window.log < 3) {
+      window.log = window.log ? window.log+1 : 1;
+      console.log('ss')
+    }
+    
+    this.ctx.activeTexture(this.ctx.TEXTURE0 + this.value);
+    
+    const texture = this.ctx.createTexture(); // Create the texture object
+    
+    // this.ctx.pixelStorei(this.ctx.UNPACK_FLIP_Y_WEBGL, true);
+    this.ctx.bindTexture(this.textureTarget, texture);
+    
+    if(this.textureTarget == window.WebGLRenderingContext.TEXTURE_2D) {
+      // Set the parameters based on the passed type
+      // In WebGL images are wrapped by default, so we don't need to check for that
+      if(this.textureType === Texture.IMAGETYPE_MIRROR) {
+        this.ctx.texParameteri(this.textureTarget, this.ctx.TEXTURE_WRAP_S, this.ctx.MIRRORED_REPEAT);
+        this.ctx.texParameteri(this.textureTarget, this.ctx.TEXTURE_WRAP_T, this.ctx.MIRRORED_REPEAT);
+      } else if(this.textureType === Texture.IMAGETYPE_REGULAR) {
+        this.ctx.texParameteri(this.textureTarget, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.textureTarget, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+      }
+
+      this.ctx.texParameteri(this.textureTarget, this.ctx.TEXTURE_MIN_FILTER, this.minFilter);
+      this.ctx.texParameteri(this.textureTarget, this.ctx.TEXTURE_MAG_FILTER, this.magFilter);
+    
+      // Upload the image into the texture.
+      if(this.data) {
+        this.ctx.texImage2D(this.textureTarget, 0, this.ctx.RGBA, this.ctx.RGBA, this.ctx.UNSIGNED_BYTE, this.data);
+      } else {
+        this.ctx.texImage2D(this.textureTarget, 0, this.ctx.RGBA, this.ctx.RGBA, this.ctx.UNSIGNED_BYTE, this.image);
+      }
+    }
+    
+    
+    if(!window.log1 || window.log1 < 3) {
+      window.log1 = window.log1 ? window.log1+1 : 1;
+      console.log(this.textureTarget, this.ctx.TEXTURE_CUBE_MAP)
+    }
+    
+    if(this.generateMipMap) this.ctx.generateMipmap(this.textureTarget);
+  }
+}
+class FrameBuffer {
+  static #defaultOptions = {
+    width: 512,
+    height: 512,
+    pxRatio: Math.min(window.devicePixelRatio, 2),
+    tiling: Texture.IMAGETYPE_REGULAR,
+    texdepth: FrameBuffer.TEXTYPE_HALF_FLOAT_OES,
+    data: null,
+    depthTesting: false
+  }
+  static TEXTYPE_FLOAT = 0
+  static TEXTYPE_UNSIGNED_BYTE = 1
+  static TEXTYPE_HALF_FLOAT_OES = 2
+
+  #fb1
+  #fb2
+  #activeFB
+  #name
+  #width
+  #height
+  #pxRatio
+  #tiling = Texture.IMAGETYPE_REGULAR
+  #texdepth = FrameBuffer.TEXTYPE_HALF_FLOAT_OES
+  #data;
+
+  constructor(renderer, name, options) {
+    options = Object.assign({}, FrameBuffer.#defaultOptions, options);
+    
+    this.width = options.width;
+    this.height = options.height;
+    this.pxRatio = options.pxRatio;
+    this.tiling = options.tiling;
+    this.texdepth = options.texdepth;
+    this.depthTesting = options.depthTesting;
+    
+    this.#name = name;
+    this.value = Texture.masteri++;
+    
+    this.ctx = renderer.ctx;
+    this.renderer = renderer;
+    
+    this.data = options.data;
+    
+    this.#fb1 = this.createFrameBuffer();
+    this.#fb2 = this.createFrameBuffer();
+    this.#activeFB = this.#fb1;
+  }
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+    this.#fb1 = this.createFrameBuffer();
+    this.#fb2 = this.createFrameBuffer();
+    this.#activeFB = this.#fb1;
+  }
+  createFrameBuffer() {
+    const targetTexture = this.ctx.createTexture();
+    this.ctx.bindTexture(this.ctx.TEXTURE_2D, targetTexture);
+    {
+      // define size and format of level 0
+      const level = 0;
+      let internalFormat = this.ctx.RGBA;
+      const border = 0;
+      let format = this.ctx.RGBA;
+      let t;
+      if(this.texdepth === FrameBuffer.TEXTYPE_FLOAT) {
+        const e = this.ctx.getExtension('OES_texture_float');
+        t = this.ctx.FLOAT;
+        // internalFormat = this.ctx.FLOAT;
+        // format = this.ctx.FLOAT;
+      } else if(this.texdepth & FrameBuffer.TEXTYPE_HALF_FLOAT_OES) {
+        // t = gl.renderer.isWebgl2 ? e.HALF_FLOAT : e.HALF_FLOAT_OES;
+        //     gl.renderer.extensions['OES_texture_half_float'] ? gl.renderer.extensions['OES_texture_half_float'].HALF_FLOAT_OES : 
+        //     gl.UNSIGNED_BYTE;
+        const e = this.ctx.getExtension('OES_texture_half_float');
+        t = this.renderer.isWebgl2 ? this.ctx.HALF_FLOAT : e.HALF_FLOAT_OES;
+        // format = gl.RGBA;
+        if(this.renderer.isWebgl2) {
+          internalFormat = this.ctx.RGBA16F;
+        }
+        // internalFormat = gl.RGB32F;
+        // format = gl.RGB32F;
+        // window.gl = gl
+        // t = e.HALF_FLOAT_OES;
+      } else {
+        t = this.ctx.UNSIGNED_BYTE;
+      }
+      const type = t;
+      const data = this.data;
+      this.ctx.texImage2D(this.ctx.TEXTURE_2D, level, internalFormat,
+                    this.width*this.pxRatio, this.height*this.pxRatio, border,
+                    format, type, data);
+      // gl.generateMipmap(gl.TEXTURE_2D);
+
+      // set the filtering so we don't need mips
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.NEAREST);
+      this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.NEAREST);
+      
+      // Set the parameters based on the passed type
+      if(this.tiling === Texture.IMAGETYPE_TILE) {
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.REPEAT);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.REPEAT);
+      } else if(this.tiling === Texture.IMAGETYPE_MIRROR) {
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.MIRRORED_REPEAT);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.MIRRORED_REPEAT);
+      } else if(this.tiling === Texture.IMAGETYPE_REGULAR) {
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+      }
+    }
+    
+    // Create and bind the framebuffer
+    const fb = this.ctx.createFramebuffer();
+    this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, fb);
+    
+    if(this.depthTesting) {
+      var ext = this.ctx.getExtension('WEBGL_depth_texture');
+      let depth = this.ctx.createTexture();
+      this.ctx.bindTexture(this.ctx.TEXTURE_2D, depth);
+      this.ctx.texImage2D(
+        this.ctx.TEXTURE_2D, 0, this.ctx.DEPTH_COMPONENT, this.width*this.pxRatio, this.height*this.pxRatio, 0, this.ctx.DEPTH_COMPONENT, this.ctx.UNSIGNED_SHORT, null);
+      this.ctx.framebufferTexture2D(this.ctx.FRAMEBUFFER, this.ctx.DEPTH_ATTACHMENT, this.ctx.TEXTURE_2D, depth, 0);
+    }
+
+    // attach the texture as the first color attachment
+    const attachmentPoint = this.ctx.COLOR_ATTACHMENT0;
+    const level = 0;
+    this.ctx.framebufferTexture2D(
+      this.ctx.FRAMEBUFFER, 
+      attachmentPoint, 
+      this.ctx.TEXTURE_2D, 
+      targetTexture, 
+      level);
+
+    return {
+      fb: fb,
+      frameTexture: targetTexture
+    };
+  }
+  bind() {
+    // find the active texture based on the index
+    let uniform = this.ctx.getUniformLocation(this.renderer.currentProgram.program, `b_${this.#name}`);
+    
+    // Set the texture unit to the uniform
+    this.ctx.uniform1i(uniform, this.value);
+    this.ctx.activeTexture(this.ctx.TEXTURE0 + this.value);
+    // Bind the texture
+    this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.#activeFB.frameTexture);
+  }
+  render(n) {
+    this.bind();
+    
+    // Finally, ping-pong the texture
+    this.#activeFB = this.#activeFB === this.#fb1 ? this.#fb2 : this.#fb1;
+    
+    // this.renderer.render(n, this.#activeFB);
+    this.renderer.render(n, this.#activeFB, [this.width, this.height]);
+  }
+
+  set data(value) {
+    if(value instanceof Float32Array) this.#data = value;
+  }
+  get data() {
+    return this.#data || null;
+  }
+  set width(value) {
+    if(value > 0) this.#width = value;
+  }
+  get width() {
+    return this.#width || 1;
+  }
+  set height(value) {
+    if(value > 0) this.#height = value;
+  }
+  get height() {
+    return this.#height || 1;
+  }
+  set pxRatio(value) {
+    if(value > 0) this.#pxRatio = value;
+  }
+  get pxRatio() {
+    return this.#pxRatio || 1;
+  }
+  set tiling(value) {
+    if([Texture.IMAGETYPE_REGULAR, Texture.IMAGETYPE_TILE, Texture.IMAGETYPE_MIRROR].indexOf(value) > -1) this.#tiling = value;
+  }
+  get tiling() {
+    return this.#tiling;
+  }
+  set texdepth(value) {
+    if([FrameBuffer.TEXTYPE_FLOAT, FrameBuffer.TEXTYPE_UNSIGNED_BYTE, FrameBuffer.TEXTYPE_HALF_FLOAT_OES].indexOf(value) > -1) this.#texdepth = value;
+  }
+  get texdepth() {
+    return this.#texdepth;
+  }
+}
+class Camera {
+  static #defaultOptions = {
+    fov: 30 * Math.PI / 180,
+    aspect: window.innerWidth / window.innerHeight,
+    near: .5,
+    far: 100,
+    pos: new Vec3(3, 1, -5),
+    target: new Vec3(0, 0, 0),
+    up: new Vec3(0, 1, 0)
+  }
+
+  #fov
+  #aspect
+  #near
+  #far
+  #pos
+  #target
+  #up
+  #updateDebounce
+  
+  #model
+  #view
+  #proj
+  #MVP
+  
+  #u_model
+  #u_view
+  #u_proj
+  #u_MVP
+  
+  #q
+  
+  #name
+  
+  constructor(renderer, name, options) {
+    options = Object.assign({}, Camera.#defaultOptions, options);
+    
+    this.renderer = renderer; 
+    this.ctx = renderer.ctx;
+    
+    this.fov = options.fov;
+    this.aspect = options.aspect;
+    this.near = options.near;
+    this.far = options.far;
+    this.pos = options.pos;
+    this.target = options.target;
+    this.up = options.up;
+    
+    this.q = new Quat();
+    
+    this.name = name;
+    
+    this.update(true);
+  }
+  set q(value) {
+    if(value instanceof Quat) {
+      this.#q = value;
+      this.#model = quatToMat4(this.#q);
+      this.#u_model = new Uniform(this.ctx, 'm_model', Uniform.TYPE_M4, this.#model.array);
+    }
+  }
+  get q() {
+    return this.#q || new Quat();
+  }
+  update(nt = false) {
+    clearTimeout(this.#updateDebounce);
+    // this.#updateDebounce = setTimeout(() => {
+      this.#model = new Mat4();
+      this.#view = Mat4.lookAt(this.pos, this.target, this.up);
+      this.#proj = Mat4.perspective(this.fov, this.aspect, this.near, this.far);
+      this.#MVP = this.#proj.multiplyNew(this.#view).multiply(this.#model);
+      
+      this.#u_view = new Uniform(this.ctx, 'm_view', Uniform.TYPE_M4, this.#view.array);
+      this.#u_proj = new Uniform(this.ctx, 'm_proj', Uniform.TYPE_M4, this.#proj.array);
+      this.#u_MVP = new Uniform(this.ctx, 'm_MVP', Uniform.TYPE_M4, this.#MVP.array);
+      
+      this.setup = true;
+    // }, nt ? 0 : 50);
+  }
+
+  set name(value) {
+    if(typeof value === 'string') this.#name = value;
+  }
+  get name() {
+    return this.#name || 'camera';
+  }
+  set fov(value) {
+    if(!isNaN(value)) this.#fov = value;
+  }
+  get fov() {
+    return this.#fov;
+  }
+  set aspect(value) {
+    if(!isNaN(value)) this.#aspect = value;
+  }
+  get aspect() {
+    return this.#aspect;
+  }
+  set near(value) {
+    if(!isNaN(value)) this.#near = value;
+  }
+  get near() {
+    return this.#near;
+  }
+  set far(value) {
+    if(!isNaN(value)) this.#far = value;
+  }
+  get far() {
+    return this.#far;
+  }
+  set pos(value) {
+    if(value instanceof Vec3) this.#pos = value;
+  }
+  get pos() {
+    return this.#pos;
+  }
+  set target(value) {
+    if(value instanceof Vec3) this.#target = value;
+  }
+  get target() {
+    return this.#target;
+  }
+  set up(value) {
+    if(value instanceof Vec3) this.#up = value;
+  }
+  get up() {
+    return this.#up;
+  }
+  get u_model() {
+    return this.#u_model;
+  }
+  get u_view() {
+    return this.#u_view;
+  }
+  get u_proj() {
+    return this.#u_proj;
+  }
+  get u_MVP() {
+    return this.#u_MVP;
+  }
+  get uniforms() {
+    return [this.u_model, this.u_view, this.u_proj, this.u_MVP];
+  }
+}
+
+const dimensions = [window.innerWidth, window.innerHeight];
+
+const canvas = document.createElement('canvas');
+document.body.appendChild(canvas);
+
+const renderer = new Renderer(canvas, { width: dimensions[0], height: dimensions[1], alpha: false, premultipliedAlpha: true, preserveDrawingBuffer: true });
+const ctx = renderer.ctx;
+
+let drawing = new Float32Array([ -1.0,  1.0,   1.0,  1.0,   -1.0, -1.0,   1.0, -1.0]);
+
+const drawBuffer = new Buffer(ctx, drawing);
+
+const vertexShader_buffer = document.getElementById('vertexShader_buffer').innerText;
+
+const programMain = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_under').innerText, { 
+  clearColour: [.15, .15, 0.25, 1.],
+  renderType: Program.RENDER_STRIP
+});
+
+const time = new Uniform(ctx, 'time', Uniform.TYPE_FLOAT, 100);
+const uDelta = new Uniform(ctx, 'delta', Uniform.TYPE_FLOAT, 100);
+const mouse = new Uniform(ctx, 'mouse', Uniform.TYPE_V2, [0.,0.]);
+
+// const noise = new Texture(ctx, 'noise', {
+//   textureType: Texture.IMAGETYPE_TILE,
+//   url: 'https://assets.codepen.io/982762/noise.png'
+// });
+
+// Load all our textures. We only initiate the instance once all images are loaded.
+const loadedTextures = {};
+const textures = [
+  {
+    name: 'noise',
+    url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',
+    type: Texture.IMAGETYPE_TILE,
+    img: null
+  },{
+    name: 'cube_NEGATIVE_Z',
+    url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/miramar_bk.jpg',
+    img: null,
+    defer: true
+  },{
+    name: 'cube_NEGATIVE_X',
+    url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/miramar_lf.jpg',
+    img: null,
+    defer: true
+  },{
+    name: 'cube_POSITIVE_Z',
+    url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/miramar_ft.jpg',
+    img: null,
+    defer: true
+  },{
+    name: 'cube_NEGATIVE_Y',
+    url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/miramar_dn.jpg',
+    img: null,
+    defer: true
+  },{
+    name: 'cube_POSITIVE_Y',
+    url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/miramar_up.jpg',
+    img: null,
+    defer: true
+  },{
+    name: 'cube_POSITIVE_X',
+    url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/miramar_rt.jpg',
+    img: null,
+    defer: true
+  }
+];
+const loadImage = function (imageObject) {
+  let img = document.createElement('img');
+  img.crossOrigin="anonymous";
+  
+  return new Promise((resolve, reject) => {
+    img.addEventListener('load', (e) => {
+      imageObject.img = img;
+      resolve(imageObject);
+    });
+    img.addEventListener('error', (e) => {
+      reject(e);
+    });
+    img.src = imageObject.url
+  });
+}
+const loadTextures = function(textures) {
+  return new Promise((resolve, reject) => {
+    const loadTexture = (pointer) => {
+      if(pointer >= textures.length || pointer > 10) {
+        resolve(textures);
+        return;
+      };
+      const imageObject = textures[pointer];
+
+      const p = loadImage(imageObject);
+      p.then(
+        (result) => {
+          if(!result.defer) {
+            // twodWebGL.addTexture(result.name, result.type, result.img);
+            loadedTextures[result.name] = (new Texture(ctx, result.name, {
+               textureType: result.type,
+               data: result.img
+            }));
+          }
+        },
+        (error) => {
+          console.log('error', error)
+        }).finally((e) => {
+          loadTexture(pointer+1);
+      });
+    }
+    loadTexture(0);
+  });
+  
+}
+
+loadTextures(textures).then(
+  (result) => {
+    
+    const gl = renderer.ctx;
+
+
+    const faceInfos = [
+      { target: gl.TEXTURE_CUBE_MAP_POSITIVE_X },
+      { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_X },
+      { target: gl.TEXTURE_CUBE_MAP_POSITIVE_Y },
+      { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y },
+      { target: gl.TEXTURE_CUBE_MAP_POSITIVE_Z },
+      { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z },
+    ];
+
+    textures.forEach((tex) => {
+      if(tex.name === 'cube_POSITIVE_X') {
+        faceInfos[4].img = tex.img;
+      } else if(tex.name === 'cube_NEGATIVE_X') {
+        faceInfos[5].img = tex.img;
+      } else if(tex.name === 'cube_POSITIVE_Y') {
+        faceInfos[3].img = tex.img;
+      } else if(tex.name === 'cube_NEGATIVE_Y') {
+        faceInfos[2].img = tex.img;
+      } else if(tex.name === 'cube_POSITIVE_Z') {
+        faceInfos[0].img = tex.img;
+      } else if(tex.name === 'cube_NEGATIVE_Z') {
+        faceInfos[1].img = tex.img;
+      }
+    });
+    
+    console.log(faceInfos)
+    
+    loadedTextures['env'] = (new Texture(ctx, 'environment', {
+      textureType: result.type,
+      data: faceInfos,
+      textureTarget: gl.TEXTURE_CUBE_MAP,
+      generateMipMap: true
+    }));
+    
+    requestAnimationFrame(run);
+    
+//     gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
+//     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+//     twodWebGL.pushTexture('cube_env', texture, faceInfos, gl.TEXTURE_CUBE_MAP, false);
+    
+//     twodWebGL.initTextures();
+//     // twodWebGL.render();
+//     twodWebGL.running = true;
+  },
+  (error) => {
+    console.log('error');
+  }
+);
+
+// noise.preload().then((n) => {
+//   requestAnimationFrame(run);
+// });
+
+let pointerdown = false;
+let lastPos = new Vec2();
+window.addEventListener('pointerdown', (e) => {
+  pointerdown = true;
+  lastPos = new Vec2(e.x, e.y);
+});
+window.addEventListener('pointerup', (e) => {
+  pointerdown = false;
+});
+window.addEventListener('pointermove', (e) => {
+  if(pointerdown) {
+    let newPos = new Vec2(e.x, e.y);
+    mouse.value = newPos.array;
+  }
+});
+
+let playing = true;
+const setPlaying = (value) => {
+  playing = value;
+}
+
+let autoTransitionTimer = 0;
+let timeToTransition = 0;
+const setupValues = (i) => {
+  dimensions[0] = window.innerWidth;
+  dimensions[1] = window.innerHeight;
+  
+  time.value = -10000;
+}
+
+setupValues(0);
+
+let timeout;
+window.addEventListener('resize', () => {
+  clearTimeout(timeout);
+  timeout = setTimeout(() => {
+    dimensions[0] = window.innerWidth;
+    dimensions[1] = window.innerHeight;
+    renderer.resize(dimensions[0], dimensions[1]);
+  }, 100);
+});
+
+const cam = new Uniform(renderer.ctx, 'cam', Uniform.TYPE_V2, [0, 0.]);
+let pointermoving = false;
+let pointerTimeout;
+window.addEventListener('pointerdown', (e) => {
+  pointerdown = true;
+  pointerTimeout = setTimeout(() => {
+    pointermoving = true;
+  }, 200)
+  lastPos = new Vec2(e.x, e.y);
+});
+window.addEventListener('pointerup', (e) => {
+  pointerdown = false;
+  pointermoving = false;
+  clearTimeout(pointerTimeout);
+});
+window.addEventListener('pointermove', (e) => {
+  if(pointerdown) {
+    let newPos = new Vec2(e.x, e.y);
+    let diff = newPos.clone().subtract(lastPos);
+    lastPos = newPos.clone();
+    cam.value[0] -= diff.x * -.01;
+    cam.value[1] -= diff.y * -.01;
+  }
+});
+
+const opx = renderer.pxRatio;
+let then = 0;
+// let framenum = 0;
+// let framesPerFrame = 10;
+// let gif = new gifJs({
+//   workers: 2,
+//   quality: 10
+// });
+// gif.on('finished', function(blob) {
+//   console.log('ss')
+//   window.open(URL.createObjectURL(blob));
+// });
+
+// const offscreenCanvas = document.createElement("canvas");
+// offscreenCanvas.className = 'osc';
+// offscreenCanvas.width = canvas.width;
+// offscreenCanvas.height = canvas.height;
+// const osctx = offscreenCanvas.getContext("2d");
+// document.body.appendChild(offscreenCanvas);
+
+let gifDone = false;
+const run = (delta) => {
+  
+//   if(framenum < 10 * framesPerFrame) {
+//     if(framenum % framesPerFrame == 0) {
+//       // gif.addFrame(canvas, {delay: 100});
+
+//       osctx.drawImage(canvas,0,0);
+
+//       gif.addFrame(offscreenCanvas, {copy: true, delay: 100});
+//       // gif.addFrame(ctx, {copy: true});
+//     }
+//     framenum++;
+//   } else if(gifDone === false) {
+//     console.log(framenum)
+
+//     gif.render();
+    
+//     window.gif = gif;
+    
+//     gifDone = true;
+//   }
+  
+	let now = Date.now() / 1000;
+	let _delta = now - then;
+	then = now;
+  
+  if(_delta > 1000) {
+    requestAnimationFrame(run);
+    return;
+  }
+  
+  if(playing) {
+
+  uDelta.value = Math.min(_delta, 0.5);
+  time.value += _delta;
+    
+  // console.log(loadedTextures.noise.value);
+  // console.log(loadedTextures.env.value);
+  
+  renderer.setViewport();
+  renderer.setupProgram(programMain, [drawBuffer], [], [time, mouse, loadedTextures.noise, loadedTextures.env, cam]);
+  renderer.render(4);
+    // console.log(loadedTextures)
+    
+  
+  requestAnimationFrame(run);
+}
+}
\ No newline at end of file
diff --git a/platonics/src/style.css b/platonics/src/style.css
new file mode 100644
index 0000000..a10ea16
--- /dev/null
+++ b/platonics/src/style.css
@@ -0,0 +1,60 @@
+body {
+  background: #666;
+  margin: 0;
+  overflow: hidden;
+}
+canvas {
+  height: 100vh;
+  width: 100vw;
+  touch-action: none;
+}
+.osc {
+  left: 0px;
+  position: fixed;
+  top: 0px;
+}
+
+.button {
+  position: fixed;
+  z-index: 10;
+  right: 0;
+  bottom: 0;
+}
+.controls {
+  position: fixed;
+  z-index: 10;
+  left: 0;
+  bottom: 0;
+}
+.playpause {
+  background: #AAB;
+  padding: 10px;
+}
+.playpause label {
+  display: block;
+  box-sizing: border-box;
+
+  width: 0;
+  height: 20px;
+
+  cursor: pointer;
+
+  border-color: transparent transparent transparent #202020;
+  transition: 100ms all ease;
+  will-change: border-width;
+
+  border-style: double;
+  border-width: 0px 0 0px 20px;
+}
+.playpause input[type='checkbox'] {
+  visibility: hidden;
+}
+.playpause.checked label {
+  border-style: double;
+  border-width: 0px 0 0px 20px;
+}
+.playpause label {
+  border-style: solid;
+  border-width: 10px 0 10px 20px;
+}
+/* } */
\ No newline at end of file
diff --git a/play-with-header-on-page-transitions/README.markdown b/play-with-header-on-page-transitions/README.markdown
new file mode 100644
index 0000000..ddb4f5d
--- /dev/null
+++ b/play-with-header-on-page-transitions/README.markdown
@@ -0,0 +1,4 @@
+# Play with Header on Page Transitions
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/pehaa/pen/wvBLpNK](https://codepen.io/pehaa/pen/wvBLpNK).
+
+ Inspired by the header from my personal website https://pehaa.com built with Nuxt.js
diff --git a/play-with-header-on-page-transitions/dist/index.html b/play-with-header-on-page-transitions/dist/index.html
new file mode 100644
index 0000000..380af05
--- /dev/null
+++ b/play-with-header-on-page-transitions/dist/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Play with Header on Page Transitions</title>
+  <link href="https://fonts.googleapis.com/css?family=Trocchi|Anton" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="app">
+  <div :class="['bg', bg]">
+    <header>
+      <nav>
+        <ul>
+          <li><a class="link-bio" href="#bio" @click="bg = 'bio'">Bio</a></li>
+          <li><a class="link-projects" href="#projects" @click="bg = 'projects'">Projects</a></li>
+          <li><a class="link-find-me" href="#findme" @click="bg = 'find-me'">Find Me</a></li>
+        </ul>
+      </nav>
+      <div class="transition transition-bio"></div>
+      <div class="transition transition-projects"></div>
+      <div class="transition transition-find-me"></div>
+      <h1>Header</h1>
+    </header>
+    <div class="dots dots1"></div>
+    <div class="dots dots2"></div>
+    <main>
+      <transition name="slide-fade" mode="out-in">
+        <p key="bio" v-if="bg==='bio'">Hi! I'm a bio page.</p>
+        <p key="projects" v-if="bg==='projects'">This is a projects page.</p>
+        <p key="find-me" v-if="bg==='find-me'">See <a href="https://pehaa.com" target="_blank" rel="noopener">pehaa.com</a> for the complete website (built with Nuxt.js).</p>
+      <transition>
+    </main>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/play-with-header-on-page-transitions/dist/script.js b/play-with-header-on-page-transitions/dist/script.js
new file mode 100644
index 0000000..6f1b37c
--- /dev/null
+++ b/play-with-header-on-page-transitions/dist/script.js
@@ -0,0 +1,7 @@
+new Vue({
+  el: '#app',
+  data() {
+    return {
+      bg: 'bio' };
+
+  } });
\ No newline at end of file
diff --git a/play-with-header-on-page-transitions/dist/style.css b/play-with-header-on-page-transitions/dist/style.css
new file mode 100644
index 0000000..9366858
--- /dev/null
+++ b/play-with-header-on-page-transitions/dist/style.css
@@ -0,0 +1,276 @@
+:root {
+  --purple-brown: #231f20;
+  --egg-shell: #e8e4d2;
+  --dark-peach: #e26961;
+  --border-width: .75rem;
+  --dots-gap: 10px;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Trocchi, Georgia, serif;
+  line-height: 1.5;
+  color: var(--egg-shell);
+}
+
+a {
+  color: inherit;
+}
+
+.bg {
+  background: inherit;
+  min-height: 100vh;
+  padding: 25vh 0 1.5rem;
+  -webkit-transition: background 0s 1s, color .6s;
+  transition: background 0s 1s, color .6s;
+}
+
+.projects {
+  color: var(--purple-brown);
+}
+
+.bg:after {
+  content: "";
+  border: var(--border-width) solid;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 12;
+  pointer-events: none;
+  -webkit-transition: 1s;
+  transition: 1s;
+}
+
+.bio,
+.link-bio {
+  background: var(--purple-brown);
+}
+
+.bio h1 {
+  background-color: var(--dark-peach);
+}
+
+.projects,
+.link-projects {
+  background: var(--egg-shell);
+}
+
+.find-me,
+.link-find-me {
+  background: var(--dark-peach);
+}
+
+.transition {
+  width: 1rem;
+  height: 1rem;
+  top: 0;
+  display: block;
+  position: absolute;
+  opacity: 0;
+  -webkit-transition: -webkit-transform .6s ease-in-out;
+  transition: -webkit-transform .6s ease-in-out;
+  transition: transform .6s ease-in-out;
+  transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
+  width: 100%;
+  height: 100vh;
+  -webkit-transform: scale(0.1);
+          transform: scale(0.1);
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+}
+
+.transition-bio {
+  left: 0;
+  background: var(--purple-brown);
+}
+
+.transition-projects {
+  left: 7.5rem;
+  background: var(--egg-shell);
+}
+
+.transition-find-me {
+  left: 15rem;
+  background: var(--dark-peach);
+}
+
+.bio .transition-bio,
+.projects .transition-projects,
+.find-me .transition-find-me {
+  opacity: 1;
+}
+
+.bio .transition-bio {
+  -webkit-transform: scale(1);
+          transform: scale(1);
+}
+
+.projects .transition-projects {
+  -webkit-transform: scale(1) translateX(-7.5rem);
+          transform: scale(1) translateX(-7.5rem);
+}
+
+.find-me .transition-find-me {
+  -webkit-transform: scale(1) translateX(-15rem);
+          transform: scale(1) translateX(-15rem);
+}
+
+.dots:before,
+.dots:after {
+  content: "";
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  opacity: .5;
+  z-index: 11;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--dark-peach)), color-stop(0, transparent));
+  background-image: linear-gradient(var(--dark-peach) 20%, transparent 0);
+  background-size: 100% var(--dots-gap);
+  background-position: 0 0;
+  -webkit-animation: movebg .2s linear infinite;
+          animation: movebg .2s linear infinite;
+  will-change: transform;
+  width: 2px;
+}
+
+.dots1:before {
+  left: 5%;
+}
+
+.dots1:after {
+  left: 15%;
+}
+
+.dots2:before {
+  right: 75%;
+}
+
+.dots2:after {
+  right: 5%;
+}
+
+.dots:after {
+  animation-direction: reverse;
+}
+
+.projects .dots:before,
+.projects .dots:after {
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--purple-brown)), color-stop(0, transparent));
+  background-image: linear-gradient(var(--purple-brown) 20%, transparent 0);
+}
+
+.find-me .dots:before,
+.find-me .dots:after {
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--egg-shell)), color-stop(0, transparent));
+  background-image: linear-gradient(var(--egg-shell) 20%, transparent 0);
+}
+
+@-webkit-keyframes movebg {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+  100% {
+    -webkit-transform: translate3d(0, var(--dots-gap), 0);
+            transform: translate3d(0, var(--dots-gap), 0);
+  }
+}
+
+@keyframes movebg {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+  100% {
+    -webkit-transform: translate3d(0, var(--dots-gap), 0);
+            transform: translate3d(0, var(--dots-gap), 0);
+  }
+}
+h1 {
+  font-family: "Anton", sans-serif;
+  text-align: center;
+  margin: 0;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000), color-stop(0.5, #000), color-stop(1, transparent));
+  -webkit-transition: background-position 1s, background-color 1s;
+  transition: background-position 1s, background-color 1s;
+  text-align: center;
+  font-size: calc(28vw + 1rem);
+  font-weight: 400;
+  line-height: 1;
+  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/tw-o.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/tw6-o.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/tw5-o.png");
+  background-size: 45vw auto, 45vw auto, 30vw auto;
+  background-repeat: repeat-x;
+  background-position: 0px 15%, 200px 25%, -50px 2vw;
+}
+
+.projects h1 {
+  background-color: var(--dark-peach);
+  background-position: -120px 15%, 230px 20%, -100px 3vw;
+}
+
+.find-me h1 {
+  background-color: var(--egg-shell);
+  background-position: -240px 15%, 260px 25%, -150px 1vw;
+}
+
+nav {
+  position: fixed;
+  top: var(--border-width);
+  left: var(--border-width);
+  z-index: 10;
+}
+nav ul {
+  list-style: none;
+  display: -webkit-box;
+  display: flex;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+nav li {
+  -webkit-box-flex: 1;
+          flex: 1 0 7.5rem;
+}
+nav a {
+  display: block;
+  padding: .75rem 0 .5rem;
+  color: var(--egg-shell);
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  font-size: .875rem;
+}
+nav .link-projects {
+  color: var(--purple-brown);
+}
+
+main {
+  position: relative;
+  max-width: 36rem;
+  padding: 0 1.5rem;
+  margin: -3rem auto 0;
+  font-size: 2rem;
+}
+
+.slide-fade-enter-active {
+  -webkit-transition: all 1s ease;
+  transition: all 1s ease;
+}
+
+.slide-fade-leave-active {
+  -webkit-transition: all .5s;
+  transition: all .5s;
+}
+
+.slide-fade-enter, .slide-fade-leave-to {
+  -webkit-transform: translateY(2rem);
+          transform: translateY(2rem);
+  opacity: 0;
+}
\ No newline at end of file
diff --git a/play-with-header-on-page-transitions/license.txt b/play-with-header-on-page-transitions/license.txt
new file mode 100644
index 0000000..4110e5d
--- /dev/null
+++ b/play-with-header-on-page-transitions/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Paulina Hetman (https://codepen.io/pehaa/pen/wvBLpNK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/play-with-header-on-page-transitions/src/index.html b/play-with-header-on-page-transitions/src/index.html
new file mode 100644
index 0000000..e60c027
--- /dev/null
+++ b/play-with-header-on-page-transitions/src/index.html
@@ -0,0 +1,26 @@
+<div id="app">
+  <div :class="['bg', bg]">
+    <header>
+      <nav>
+        <ul>
+          <li><a class="link-bio" href="#bio" @click="bg = 'bio'">Bio</a></li>
+          <li><a class="link-projects" href="#projects" @click="bg = 'projects'">Projects</a></li>
+          <li><a class="link-find-me" href="#findme" @click="bg = 'find-me'">Find Me</a></li>
+        </ul>
+      </nav>
+      <div class="transition transition-bio"></div>
+      <div class="transition transition-projects"></div>
+      <div class="transition transition-find-me"></div>
+      <h1>Header</h1>
+    </header>
+    <div class="dots dots1"></div>
+    <div class="dots dots2"></div>
+    <main>
+      <transition name="slide-fade" mode="out-in">
+        <p key="bio" v-if="bg==='bio'">Hi! I'm a bio page.</p>
+        <p key="projects" v-if="bg==='projects'">This is a projects page.</p>
+        <p key="find-me" v-if="bg==='find-me'">See <a href="https://pehaa.com" target="_blank" rel="noopener">pehaa.com</a> for the complete website (built with Nuxt.js).</p>
+      <transition>
+    </main>
+  </div>
+</div>
\ No newline at end of file
diff --git a/play-with-header-on-page-transitions/src/script.babel b/play-with-header-on-page-transitions/src/script.babel
new file mode 100644
index 0000000..58767cb
--- /dev/null
+++ b/play-with-header-on-page-transitions/src/script.babel
@@ -0,0 +1,8 @@
+new Vue({
+  el: '#app',
+  data() {
+    return {
+      bg: 'bio'
+    }
+  }
+})
\ No newline at end of file
diff --git a/play-with-header-on-page-transitions/src/style.scss b/play-with-header-on-page-transitions/src/style.scss
new file mode 100644
index 0000000..4300b16
--- /dev/null
+++ b/play-with-header-on-page-transitions/src/style.scss
@@ -0,0 +1,241 @@
+:root {
+	--purple-brown: #231f20;
+	--egg-shell: #e8e4d2;
+	--dark-peach: #e26961;
+  --border-width: .75rem;
+  --dots-gap: 10px;
+}
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+body {
+  font-family: Trocchi, Georgia, serif;
+  line-height: 1.5;
+  color: var(--egg-shell);
+}
+a {
+  color: inherit;
+}
+
+.bg {
+  background: inherit;
+  min-height: 100vh;
+  padding: 25vh 0 1.5rem;
+  transition: background 0s 1s, color .6s;
+}
+.projects {
+  color: var(--purple-brown);
+}
+
+// marie-louise
+.bg:after {
+	content: "";
+	border: var(--border-width) solid;
+	position: fixed;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+  z-index: 12;
+  pointer-events: none;
+  transition: 1s;
+}
+
+.bio,
+.link-bio {
+  background: var(--purple-brown);
+}
+
+.bio h1 {
+  background-color: var(--dark-peach);
+}
+.projects,
+.link-projects {
+  background: var(--egg-shell);
+}
+
+.find-me,
+.link-find-me {
+  background: var(--dark-peach);
+}
+
+// bg transition
+
+.transition {
+  width: 1rem;
+  height: 1rem;
+  top: 0;
+  display: block;
+  position: absolute;
+  opacity: 0;
+  transition: transform .6s ease-in-out;
+  width: 100%;
+  height: 100vh;
+  transform: scale(0.1);
+  transform-origin: 0 0;
+}
+.transition-bio {
+  left: 0;
+  background: var(--purple-brown);
+}
+.transition-projects {
+  left: 7.5rem;
+  background: var(--egg-shell);
+}
+.transition-find-me {
+  left: 15rem;
+  background: var(--dark-peach);
+}
+
+.bio .transition-bio,
+.projects .transition-projects,
+.find-me .transition-find-me {
+  opacity: 1;
+}
+.bio .transition-bio {
+  transform: scale(1);
+}
+.projects .transition-projects {
+  transform: scale(1) translateX(-7.5rem) ;
+}
+.find-me .transition-find-me {
+  transform: scale(1) translateX(-15rem) ;
+}
+
+// dots
+
+.dots:before,
+.dots:after {
+  content: "";
+  position: fixed;
+	top: 0;
+	bottom: 0;
+	opacity: .5;
+	z-index: 11;
+	background-image: linear-gradient(var(--dark-peach) 20%,transparent 0);
+  background-size: 100% var(--dots-gap);
+  background-position: 0 0;
+	animation: movebg .2s linear infinite;
+	will-change: transform;	
+	width: 2px;
+}
+
+.dots1:before {
+  left: 5%;
+}
+.dots1:after {
+  left: 15%;
+}
+.dots2:before {
+  right: 75%;
+}
+.dots2:after {
+  right: 5%;
+}
+
+.dots:after {
+  animation-direction: reverse;
+}
+
+.projects {
+  .dots:before,
+  .dots:after {
+    background-image: linear-gradient(var(--purple-brown) 20%,transparent 0);
+  }
+}
+.find-me {
+  .dots:before,
+  .dots:after {
+    background-image: linear-gradient(var(--egg-shell) 20%,transparent 0);
+  }
+}
+
+@keyframes movebg {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, var(--dots-gap), 0);
+  }
+}
+
+// h1
+
+h1 {
+  font-family: "Anton", sans-serif;
+  text-align: center;
+  margin: 0;
+  -webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	-webkit-mask-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(.5,#000),color-stop(1,transparent));
+	transition: background-position 1s, background-color 1s;
+	text-align: center;
+	font-size: calc(28vw + 1rem);
+  font-weight: 400;
+	line-height: 1;
+  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/tw-o.png'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/tw6-o.png'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/tw5-o.png');
+  background-size: 45vw auto, 45vw auto, 30vw auto;
+  background-repeat: repeat-x;
+  background-position: 0px 15%, 200px 25%, -50px 2vw;
+}
+.projects h1 {
+  background-color: var(--dark-peach);
+  background-position: -120px 15%, 230px 20%, -100px 3vw;
+}
+.find-me h1 {
+  background-color: var(--egg-shell);
+  background-position: -240px 15%, 260px 25%, -150px 1vw;
+}
+
+
+nav {
+  position: fixed;
+  top: var(--border-width);
+  left: var(--border-width);
+  z-index: 10;
+  ul {
+    list-style: none;
+    display: flex;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+  }
+  li {
+    flex: 1 0 7.5rem;
+  }
+  a {
+    display: block;
+    padding: .75rem 0 .5rem;
+    color: var(--egg-shell);
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: .875rem;
+  }
+  .link-projects {
+    color: var(--purple-brown);
+  }
+}
+
+// main
+
+main {
+  position: relative;
+  max-width: 36rem;
+  padding: 0 1.5rem;
+  margin: -3rem auto 0;
+  font-size: 2rem;
+}
+
+// main transitions
+
+.slide-fade-enter-active {
+  transition: all 1s ease;
+}
+.slide-fade-leave-active {
+  transition: all .5s;
+}
+.slide-fade-enter, .slide-fade-leave-to {
+  transform: translateY(2rem);
+  opacity: 0;
+}
\ No newline at end of file
diff --git a/playlist-artwork-for-cover-lover/README.markdown b/playlist-artwork-for-cover-lover/README.markdown
new file mode 100644
index 0000000..ca0029b
--- /dev/null
+++ b/playlist-artwork-for-cover-lover/README.markdown
@@ -0,0 +1,4 @@
+# Playlist artwork for "Cover Lover"
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/danielgivens/pen/eYNPKmL](https://codepen.io/danielgivens/pen/eYNPKmL).
+
+ An excuse to experiment with 3d modeling and webgl shaders to create a visual for this playlist of cover songs https://open.spotify.com/playlist/64lTO7UojBC6xoDljFdrVu?si=TrNM3S4eR16qpxHwNIYUbg
\ No newline at end of file
diff --git a/playlist-artwork-for-cover-lover/dist/index.html b/playlist-artwork-for-cover-lover/dist/index.html
new file mode 100644
index 0000000..205e9bf
--- /dev/null
+++ b/playlist-artwork-for-cover-lover/dist/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Playlist artwork for &quot;Cover Lover&quot;</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!--
+check out the playlist here:
+https://open.spotify.com/playlist/64lTO7UojBC6xoDljFdrVu?si=i6Shy45qSkWm34HgPsl4Xg
+-->
+<script id="vertexShader" type="x-shader/x-vertex">
+uniform float mRefractionRatio;
+uniform float mFresnelBias;
+uniform float mFresnelScale;
+uniform float mFresnelPower;
+
+varying vec3 vReflect;
+varying vec3 vRefract[3];
+varying float vReflectionFactor;
+
+varying vec2 f_uv;
+varying vec3 f_normal;
+varying vec3 f_position;
+void main() {
+	f_uv = uv;
+	f_normal = normalize( normalMatrix * normal );
+	f_position = position;
+	
+	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+	vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
+	
+	vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
+	
+	vec3 I = worldPosition.xyz - cameraPosition;
+	
+	vReflect = reflect( I, worldNormal );
+	vRefract[0] = refract( normalize( I ), worldNormal, mRefractionRatio );
+	vRefract[1] = refract( normalize( I ), worldNormal, mRefractionRatio * 0.99 );
+	vRefract[2] = refract( normalize( I ), worldNormal, mRefractionRatio * 0.98 );
+	vReflectionFactor = mFresnelBias + mFresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), mFresnelPower );
+	
+	gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+</script>
+<script id="fragmentShader" type="x-shader/x-fragment">
+uniform samplerCube tCube;
+
+varying vec3 vReflect;
+varying vec3 vRefract[3];
+varying float vReflectionFactor;
+	
+uniform sampler2D texture;
+uniform int u_useTexture;
+uniform vec3 u_albedo;
+uniform vec3 u_ambient;
+uniform vec3 u_lightPos;
+uniform vec3 u_lightCol;
+uniform float u_lightIntensity;
+uniform vec3 CamPos;
+
+varying vec3 f_position;
+varying vec3 f_normal;
+varying vec2 f_uv;
+
+void main() {
+	vec4 color = vec4(u_albedo, 1.0);
+	
+	if (u_useTexture == 1) {
+		color = texture2D(texture, f_uv);
+	}
+	float d = clamp(dot(f_normal, normalize(u_lightPos - f_position)), 0.0, 1.0);
+	float t = clamp(dot(f_normal, normalize(CamPos - f_position)), 0.0, 1.0);
+	
+	float red = 0.5 + 0.5*(cos(6.28*(t)));
+	float green = 0.5 + 0.5*(cos(6.28*(t+0.33)));
+	float blue = 0.5 + 0.5*(cos(6.28*(t+0.67)));
+	
+	vec3 iridescent_color = vec3(red, green, blue);
+	
+	vec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );
+	vec4 refractedColor = vec4( 1.0 );
+	
+	refractedColor.r = mix(textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r, red, 0.8);
+	refractedColor.g = mix(textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g, green, 0.8);
+	refractedColor.b = mix(textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b, blue, 0.8);
+	gl_FragColor = mix( refractedColor, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) );
+}
+</script>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/OBJLoader.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/playlist-artwork-for-cover-lover/dist/script.js b/playlist-artwork-for-cover-lover/dist/script.js
new file mode 100644
index 0000000..b649e06
--- /dev/null
+++ b/playlist-artwork-for-cover-lover/dist/script.js
@@ -0,0 +1,103 @@
+var container;
+var camera, scene, renderer, textureCube, object;
+var mouseX = 0, mouseY = 0;
+var clock = new THREE.Clock();
+var path = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/';
+var format = ".png";
+var order = ["sky", "sky", "sky", "sky", "cov", "sky"];
+var urls = [];
+order.forEach(side => {urls.push(`${path}${side}${format}`);});
+var loaded = false;
+init();
+
+function init() {
+	renderer = new THREE.WebGLRenderer({antialias:true, alpha: true });
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	container = document.createElement( 'div' );
+	document.body.appendChild( container );
+	container.appendChild( renderer.domElement );
+	var textureCube = new THREE.CubeTextureLoader().load(urls);
+	textureCube.format = THREE.RGBFormat;
+	
+	height = window.innerHeight;
+	width = window.innerWidth;
+	camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
+	camera.position.z =-200;
+	scene = new THREE.Scene();
+	//renderer.setClearColor( 0x000000, 0 );
+	scene.background = new THREE.Color( 0x111111 );
+	
+	var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
+	scene.add( ambientLight );
+	var pointLight = new THREE.PointLight( 0xffffff, 0.9);
+	camera.add( pointLight );
+	scene.add( camera );
+	uniforms = {
+		mRefractionRatio: { value: 0.96 },
+		mFresnelBias: { value: 0.05 },
+		mFresnelPower: { value: 2.0 },
+		mFresnelScale: { value: 0.5 },
+		tCube: { value: textureCube },
+		texture: {type: 't',value: null},
+		u_useTexture: {type: 'i',value: true},
+		u_albedo: {type: 'v3',value: new THREE.Color(0x000000)},
+		u_ambient: {type: 'v3',value: new THREE.Color(0x000000)},
+		u_lightPos: {type: 'v3',value: new THREE.Vector3(-600, 0, 400)},
+		u_lightCol: {type: 'v3',value: new THREE.Color(0xffffff)},
+		u_lightIntensity: {type: 'f',value: .6},
+		CamPos: {type: 'v3',value:  new THREE.Vector3(-600, 0, 400)}
+	}
+	group = new THREE.Group();
+	material = new THREE.ShaderMaterial( {
+		uniforms: uniforms,
+		vertexShader: document.getElementById( 'vertexShader' ).textContent,
+		fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+	});			
+	var manager = new THREE.LoadingManager( function(){
+		object.traverse( function ( child ) {
+			if ( child.isMesh ) {
+				child.material = material;
+				child.material.side = THREE.DoubleSide;
+			} 
+		});
+		scale = 90;
+		object.scale.set(scale,scale,scale);
+		group.position.y = 3;
+		//group.rotation.y =Math.PI * -.5;
+		object.castShadow = true;
+		object.receiveShadow = true;
+		group.add(object);
+		scene.add( group );
+		;		
+	} );
+	var loader = new THREE.OBJLoader( manager );
+	loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/heart10.obj', function ( obj ) {
+		object = obj;
+		loaded = true;
+		animate();
+	});
+
+	window.addEventListener( 'resize', onWindowResize, false );
+}
+function onWindowResize() {
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+	renderer.setSize( window.innerWidth, window.innerHeight );
+}
+function animate() {
+	requestAnimationFrame( animate );
+	render();
+}
+function render() {
+	timer = 0.001 * Date.now();
+	if(loaded){
+		group.rotation.x = Math.sin(timer * .5  ) * (Math.PI / 4) * -.5;
+		group.rotation.y = (Math.PI / 2) + Math.sin(timer * .125  ) * (Math.PI);
+		group.rotation.z = Math.sin(timer * .25  ) * (Math.PI / 8);
+		group.position.z = Math.sin(timer *.125  ) * -20;
+	}
+	camera.lookAt( scene.position );
+	camera.position.y = -5;
+	renderer.render( scene, camera );
+}
\ No newline at end of file
diff --git a/playlist-artwork-for-cover-lover/dist/style.css b/playlist-artwork-for-cover-lover/dist/style.css
new file mode 100644
index 0000000..abafe84
--- /dev/null
+++ b/playlist-artwork-for-cover-lover/dist/style.css
@@ -0,0 +1,3 @@
+html, body {
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/playlist-artwork-for-cover-lover/license.txt b/playlist-artwork-for-cover-lover/license.txt
new file mode 100644
index 0000000..63ac0eb
--- /dev/null
+++ b/playlist-artwork-for-cover-lover/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Daniel Givens (https://codepen.io/danielgivens/pen/eYNPKmL)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/playlist-artwork-for-cover-lover/src/index.html b/playlist-artwork-for-cover-lover/src/index.html
new file mode 100644
index 0000000..456b616
--- /dev/null
+++ b/playlist-artwork-for-cover-lover/src/index.html
@@ -0,0 +1,82 @@
+<!--
+check out the playlist here:
+https://open.spotify.com/playlist/64lTO7UojBC6xoDljFdrVu?si=i6Shy45qSkWm34HgPsl4Xg
+-->
+<script id="vertexShader" type="x-shader/x-vertex">
+uniform float mRefractionRatio;
+uniform float mFresnelBias;
+uniform float mFresnelScale;
+uniform float mFresnelPower;
+
+varying vec3 vReflect;
+varying vec3 vRefract[3];
+varying float vReflectionFactor;
+
+varying vec2 f_uv;
+varying vec3 f_normal;
+varying vec3 f_position;
+void main() {
+	f_uv = uv;
+	f_normal = normalize( normalMatrix * normal );
+	f_position = position;
+	
+	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+	vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
+	
+	vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
+	
+	vec3 I = worldPosition.xyz - cameraPosition;
+	
+	vReflect = reflect( I, worldNormal );
+	vRefract[0] = refract( normalize( I ), worldNormal, mRefractionRatio );
+	vRefract[1] = refract( normalize( I ), worldNormal, mRefractionRatio * 0.99 );
+	vRefract[2] = refract( normalize( I ), worldNormal, mRefractionRatio * 0.98 );
+	vReflectionFactor = mFresnelBias + mFresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), mFresnelPower );
+	
+	gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+</script>
+<script id="fragmentShader" type="x-shader/x-fragment">
+uniform samplerCube tCube;
+
+varying vec3 vReflect;
+varying vec3 vRefract[3];
+varying float vReflectionFactor;
+	
+uniform sampler2D texture;
+uniform int u_useTexture;
+uniform vec3 u_albedo;
+uniform vec3 u_ambient;
+uniform vec3 u_lightPos;
+uniform vec3 u_lightCol;
+uniform float u_lightIntensity;
+uniform vec3 CamPos;
+
+varying vec3 f_position;
+varying vec3 f_normal;
+varying vec2 f_uv;
+
+void main() {
+	vec4 color = vec4(u_albedo, 1.0);
+	
+	if (u_useTexture == 1) {
+		color = texture2D(texture, f_uv);
+	}
+	float d = clamp(dot(f_normal, normalize(u_lightPos - f_position)), 0.0, 1.0);
+	float t = clamp(dot(f_normal, normalize(CamPos - f_position)), 0.0, 1.0);
+	
+	float red = 0.5 + 0.5*(cos(6.28*(t)));
+	float green = 0.5 + 0.5*(cos(6.28*(t+0.33)));
+	float blue = 0.5 + 0.5*(cos(6.28*(t+0.67)));
+	
+	vec3 iridescent_color = vec3(red, green, blue);
+	
+	vec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );
+	vec4 refractedColor = vec4( 1.0 );
+	
+	refractedColor.r = mix(textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r, red, 0.8);
+	refractedColor.g = mix(textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g, green, 0.8);
+	refractedColor.b = mix(textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b, blue, 0.8);
+	gl_FragColor = mix( refractedColor, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) );
+}
+</script>
\ No newline at end of file
diff --git a/playlist-artwork-for-cover-lover/src/script.js b/playlist-artwork-for-cover-lover/src/script.js
new file mode 100644
index 0000000..b649e06
--- /dev/null
+++ b/playlist-artwork-for-cover-lover/src/script.js
@@ -0,0 +1,103 @@
+var container;
+var camera, scene, renderer, textureCube, object;
+var mouseX = 0, mouseY = 0;
+var clock = new THREE.Clock();
+var path = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/';
+var format = ".png";
+var order = ["sky", "sky", "sky", "sky", "cov", "sky"];
+var urls = [];
+order.forEach(side => {urls.push(`${path}${side}${format}`);});
+var loaded = false;
+init();
+
+function init() {
+	renderer = new THREE.WebGLRenderer({antialias:true, alpha: true });
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	container = document.createElement( 'div' );
+	document.body.appendChild( container );
+	container.appendChild( renderer.domElement );
+	var textureCube = new THREE.CubeTextureLoader().load(urls);
+	textureCube.format = THREE.RGBFormat;
+	
+	height = window.innerHeight;
+	width = window.innerWidth;
+	camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
+	camera.position.z =-200;
+	scene = new THREE.Scene();
+	//renderer.setClearColor( 0x000000, 0 );
+	scene.background = new THREE.Color( 0x111111 );
+	
+	var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
+	scene.add( ambientLight );
+	var pointLight = new THREE.PointLight( 0xffffff, 0.9);
+	camera.add( pointLight );
+	scene.add( camera );
+	uniforms = {
+		mRefractionRatio: { value: 0.96 },
+		mFresnelBias: { value: 0.05 },
+		mFresnelPower: { value: 2.0 },
+		mFresnelScale: { value: 0.5 },
+		tCube: { value: textureCube },
+		texture: {type: 't',value: null},
+		u_useTexture: {type: 'i',value: true},
+		u_albedo: {type: 'v3',value: new THREE.Color(0x000000)},
+		u_ambient: {type: 'v3',value: new THREE.Color(0x000000)},
+		u_lightPos: {type: 'v3',value: new THREE.Vector3(-600, 0, 400)},
+		u_lightCol: {type: 'v3',value: new THREE.Color(0xffffff)},
+		u_lightIntensity: {type: 'f',value: .6},
+		CamPos: {type: 'v3',value:  new THREE.Vector3(-600, 0, 400)}
+	}
+	group = new THREE.Group();
+	material = new THREE.ShaderMaterial( {
+		uniforms: uniforms,
+		vertexShader: document.getElementById( 'vertexShader' ).textContent,
+		fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+	});			
+	var manager = new THREE.LoadingManager( function(){
+		object.traverse( function ( child ) {
+			if ( child.isMesh ) {
+				child.material = material;
+				child.material.side = THREE.DoubleSide;
+			} 
+		});
+		scale = 90;
+		object.scale.set(scale,scale,scale);
+		group.position.y = 3;
+		//group.rotation.y =Math.PI * -.5;
+		object.castShadow = true;
+		object.receiveShadow = true;
+		group.add(object);
+		scene.add( group );
+		;		
+	} );
+	var loader = new THREE.OBJLoader( manager );
+	loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/heart10.obj', function ( obj ) {
+		object = obj;
+		loaded = true;
+		animate();
+	});
+
+	window.addEventListener( 'resize', onWindowResize, false );
+}
+function onWindowResize() {
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+	renderer.setSize( window.innerWidth, window.innerHeight );
+}
+function animate() {
+	requestAnimationFrame( animate );
+	render();
+}
+function render() {
+	timer = 0.001 * Date.now();
+	if(loaded){
+		group.rotation.x = Math.sin(timer * .5  ) * (Math.PI / 4) * -.5;
+		group.rotation.y = (Math.PI / 2) + Math.sin(timer * .125  ) * (Math.PI);
+		group.rotation.z = Math.sin(timer * .25  ) * (Math.PI / 8);
+		group.position.z = Math.sin(timer *.125  ) * -20;
+	}
+	camera.lookAt( scene.position );
+	camera.position.y = -5;
+	renderer.render( scene, camera );
+}
\ No newline at end of file
diff --git a/playlist-artwork-for-cover-lover/src/style.scss b/playlist-artwork-for-cover-lover/src/style.scss
new file mode 100644
index 0000000..d9b0a58
--- /dev/null
+++ b/playlist-artwork-for-cover-lover/src/style.scss
@@ -0,0 +1 @@
+html, body{overflow:hidden;}
\ No newline at end of file
diff --git a/plot-direction/README.markdown b/plot-direction/README.markdown
new file mode 100644
index 0000000..52ca278
--- /dev/null
+++ b/plot-direction/README.markdown
@@ -0,0 +1,5 @@
+# Plot direction
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/yuanchuan/pen/ZEXwVxx](https://codepen.io/yuanchuan/pen/ZEXwVxx).
+
+
diff --git a/plot-direction/dist/index.html b/plot-direction/dist/index.html
new file mode 100644
index 0000000..2843e4c
--- /dev/null
+++ b/plot-direction/dist/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Plot direction</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main>
+  <graph>
+    <css-doodle use="var(--rule)">
+      @offset: @plot(
+        direction: auto
+      );
+    </css-doodle>
+<pre>
+@offset: @plot(
+  direction: auto
+);
+</pre>
+  </graph>
+
+  <graph>
+    <css-doodle use="var(--rule)">
+      @offset: @plot(
+        direction: reverse
+      );
+    </css-doodle>
+<pre>
+@offset: @plot(
+  direction: reverse
+);
+</pre>
+  </graph>
+
+  <graph>
+    <css-doodle use="var(--rule)">
+      @offset: @plot(
+        direction: auto 90deg;
+      );
+    </css-doodle>
+<pre>
+@offset: @plot(
+  direction: auto 90deg
+);
+</pre>
+  </graph>
+
+
+  <graph>
+    <css-doodle use="var(--rule)">
+      @offset: @plot(
+        direction: auto -90deg;
+      );
+    </css-doodle>
+<pre>
+@offset: @plot(
+  direction: auto -90deg
+);
+</pre>
+  </graph>
+
+  <graph>
+    <css-doodle use="var(--rule)">
+      @offset: @plot(
+        direction: 90deg;
+      );
+    </css-doodle>
+<pre>
+@offset: @plot(
+  direction: 90deg
+);
+</pre>
+  </graph>
+
+  <graph>
+    <css-doodle use="var(--rule)">
+      @offset: @plot(
+        r: .75;
+        direction: auto -.15turn;
+      );
+    </css-doodle>
+<pre>
+@offset: @plot(
+  r: .8;
+  direction: auto -.15turn
+);
+</pre>
+  </graph>
+
+</main>
+<!-- partial -->
+  <script src='https://unpkg.com/css-doodle@0.24.0/css-doodle.min.js'></script>
+</body>
+</html>
diff --git a/plot-direction/dist/style.css b/plot-direction/dist/style.css
new file mode 100644
index 0000000..5c7d961
--- /dev/null
+++ b/plot-direction/dist/style.css
@@ -0,0 +1,51 @@
+* {
+  box-sizing: border-box;
+}
+html, body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  background: #999;
+  display: grid;
+  place-items: center;
+}
+
+main {
+  display: grid;
+  gap: 1em;
+  max-width: 90vw;
+  width: 1100px;
+  padding: 8vmin;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+graph {
+  margin: auto;
+  width: 100%;
+  height: 400px;
+  background: #ecefee;
+  display: flex;
+  flex-direction: column;
+  box-shadow:
+    -5px 5px 10px #0002,
+    -1px 1px 5px #0009;
+}
+
+pre {
+  box-shadow: inset .5em 0 0 #000;
+  background: #fff;
+  font-size: 16px;
+  padding: 1em 2em;
+  line-height: 1.2;
+  margin: 0;
+}
+
+css-doodle {
+  margin: auto;
+  --rule: (
+    @grid: 15x1 / 160px;
+    @size: 20px 40px;
+    background: #000;
+    clip-path: @shape(triangle);
+  );
+}
\ No newline at end of file
diff --git a/plot-direction/license.txt b/plot-direction/license.txt
new file mode 100644
index 0000000..b6af4e5
--- /dev/null
+++ b/plot-direction/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by yuanchuan (https://codepen.io/yuanchuan/pen/ZEXwVxx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/plot-direction/src/index.html b/plot-direction/src/index.html
new file mode 100644
index 0000000..7015ca6
--- /dev/null
+++ b/plot-direction/src/index.html
@@ -0,0 +1,83 @@
+<main>
+  <graph>
+    <css-doodle use="var(--rule)">
+      @offset: @plot(
+        direction: auto
+      );
+    </css-doodle>
+<pre>
+@offset: @plot(
+  direction: auto
+);
+</pre>
+  </graph>
+
+  <graph>
+    <css-doodle use="var(--rule)">
+      @offset: @plot(
+        direction: reverse
+      );
+    </css-doodle>
+<pre>
+@offset: @plot(
+  direction: reverse
+);
+</pre>
+  </graph>
+
+  <graph>
+    <css-doodle use="var(--rule)">
+      @offset: @plot(
+        direction: auto 90deg;
+      );
+    </css-doodle>
+<pre>
+@offset: @plot(
+  direction: auto 90deg
+);
+</pre>
+  </graph>
+
+
+  <graph>
+    <css-doodle use="var(--rule)">
+      @offset: @plot(
+        direction: auto -90deg;
+      );
+    </css-doodle>
+<pre>
+@offset: @plot(
+  direction: auto -90deg
+);
+</pre>
+  </graph>
+
+  <graph>
+    <css-doodle use="var(--rule)">
+      @offset: @plot(
+        direction: 90deg;
+      );
+    </css-doodle>
+<pre>
+@offset: @plot(
+  direction: 90deg
+);
+</pre>
+  </graph>
+
+  <graph>
+    <css-doodle use="var(--rule)">
+      @offset: @plot(
+        r: .75;
+        direction: auto -.15turn;
+      );
+    </css-doodle>
+<pre>
+@offset: @plot(
+  r: .8;
+  direction: auto -.15turn
+);
+</pre>
+  </graph>
+
+</main> 
\ No newline at end of file
diff --git a/plot-direction/src/style.css b/plot-direction/src/style.css
new file mode 100644
index 0000000..8705814
--- /dev/null
+++ b/plot-direction/src/style.css
@@ -0,0 +1,51 @@
+* {
+  box-sizing: border-box;
+}
+html, body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  background: #999;
+  display: grid;
+  place-items: center;
+}
+
+main {
+  display: grid;
+  gap: 1em;
+  max-width: 90vw;
+  width: 1100px;
+  padding: 8vmin;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+graph {
+  margin: auto;
+  width: 100%;
+  height: 400px;
+  background: #ecefee;
+  display: flex;
+  flex-direction: column;
+  box-shadow:
+    -5px 5px 10px #0002,
+    -1px 1px 5px #0009;
+}
+
+pre {
+  box-shadow: inset .5em 0 0 #000;
+  background: #fff;
+  font-size: 16px;
+  padding: 1em 2em;
+  line-height: 1.2;
+  margin: 0;
+}
+
+css-doodle {
+  margin: auto;
+  --rule: (
+    @grid: 15x1 / 160px;
+    @size: 20px 40px;
+    background: #000;
+    clip-path: @shape(triangle);
+  );
+} 
\ No newline at end of file
diff --git a/pop-the-bubbles-three-js-scene/README.markdown b/pop-the-bubbles-three-js-scene/README.markdown
new file mode 100644
index 0000000..bc83b25
--- /dev/null
+++ b/pop-the-bubbles-three-js-scene/README.markdown
@@ -0,0 +1,7 @@
+# Pop the bubbles! Three.js scene 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/stivaliserna/pen/GRNxGrR](https://codepen.io/stivaliserna/pen/GRNxGrR).
+
+Having fun with the raycaster! ^^
+
+Inspired by: https://www.instagram.com/p/B81yhq1nwHz/
diff --git a/pop-the-bubbles-three-js-scene/dist/index.html b/pop-the-bubbles-three-js-scene/dist/index.html
new file mode 100644
index 0000000..6110e35
--- /dev/null
+++ b/pop-the-bubbles-three-js-scene/dist/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Pop the bubbles! Three.js scene </title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="sky"></div>
+  <div id="canvas"></div>
+</div>
+<script type="x-shader/x-vertex" id="vertexshader">
+
+  varying vec2 vUv;
+
+      void main() {
+
+        vUv = uv;
+
+        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+      }
+    </script>
+
+<script type="x-shader/x-fragment" id="fragmentshader">
+
+  uniform sampler2D baseTexture;
+      uniform sampler2D bloomTexture;
+
+      varying vec2 vUv;
+
+      void main() {
+
+        gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
+
+      }
+    </script>
+<!-- partial -->
+  <script src='https://unpkg.com/three@0.123.0/build/three.min.js'></script>
+<script src='https://unpkg.com/three@0.123.0/examples/js/loaders/GLTFLoader.js'></script>
+<script src='https://unpkg.com/three@0.123.0/examples/js/loaders/RGBELoader.js'></script>
+<script src='https://unpkg.com/three@0.123.0/examples/js/controls/OrbitControls.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/pop-the-bubbles-three-js-scene/dist/script.js b/pop-the-bubbles-three-js-scene/dist/script.js
new file mode 100644
index 0000000..64928b7
--- /dev/null
+++ b/pop-the-bubbles-three-js-scene/dist/script.js
@@ -0,0 +1,369 @@
+let scene,
+  camera,
+  controls,
+  fieldOfView,
+  aspectRatio,
+  nearPlane,
+  farPlane,
+  renderer,
+  container,
+  hdrCubeRenderTarget,
+  HEIGHT,
+  WIDTH,
+  hdrEquirect,
+  tinky,
+  particles,
+  raycaster;
+
+const params = {
+  color: 0x21024f,
+  transmission: 0.9,
+  envMapIntensity: 10,
+  lightIntensity: 1,
+  exposure: 0.5
+};
+
+const spheres = [];
+
+const meshes = {};
+
+const generateTexture = () => {
+  const canvas = document.createElement("canvas");
+  canvas.width = 2;
+  canvas.height = 2;
+
+  const context = canvas.getContext("2d");
+  context.fillStyle = "white";
+  context.fillRect(0, 1, 2, 1);
+
+  return canvas;
+};
+
+const createScene = () => {
+  HEIGHT = window.innerHeight;
+  WIDTH = window.innerWidth;
+
+  raycaster = new THREE.Raycaster();
+
+  scene = new THREE.Scene();
+
+  aspectRatio = WIDTH / HEIGHT;
+  fieldOfView = 60;
+  nearPlane = 1;
+  farPlane = 10000;
+  camera = new THREE.PerspectiveCamera(
+    fieldOfView,
+    aspectRatio,
+    nearPlane,
+    farPlane
+  );
+
+  camera.position.x = 0;
+  camera.position.z = 500;
+  camera.position.y = -10;
+
+  renderer = new THREE.WebGLRenderer({
+    alpha: true,
+    antialias: true
+  });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(WIDTH, HEIGHT);
+
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 2;
+
+  container = document.getElementById("canvas");
+  container.appendChild(renderer.domElement);
+
+  window.addEventListener("resize", handleWindowResize, false);
+
+  scene.add(tinky);
+
+  controls = new THREE.OrbitControls(camera, renderer.domElement);
+  controls.maxDistance = 1000;
+  controls.maxAzimuthAngle = 1;
+  controls.minAzimuthAngle = -1;
+};
+
+const positionElements = () => {
+  meshes.bigStar.position.y = -1.7;
+  meshes.bigStar.position.x = -2.2;
+  meshes.bigStar.position.z = 0.8;
+  meshes.bigStar.rotation.z = -0.5;
+
+  meshes.littleStar.position.y = -1.75;
+  meshes.littleStar.position.x = 1.75;
+  meshes.littleStar.position.z = 0.6;
+  meshes.littleStar.rotation.z = 0.5;
+
+  meshes.planet.position.y = 1.3;
+  meshes.planet.position.x = 2.6;
+  meshes.planet.position.z = 1;
+
+  meshes.ClosedLeftEye.visible = false;
+  meshes.ClosedRightEye.visible = false;
+};
+
+const handleWindowResize = () => {
+  HEIGHT = window.innerHeight;
+  WIDTH = window.innerWidth;
+  renderer.setSize(WIDTH, HEIGHT);
+  camera.aspect = WIDTH / HEIGHT;
+  camera.updateProjectionMatrix();
+};
+
+const createLights = () => {
+  const ambientLight = new THREE.AmbientLight(0xaa54f0, 1);
+
+  const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1);
+  directionalLight1.position.set(-2, 2, 5);
+
+  const directionalLight2 = new THREE.DirectionalLight(0xfff000, 1);
+  directionalLight2.position.set(-2, 4, 4);
+  directionalLight2.castShadow = true;
+
+  scene.add(ambientLight, directionalLight1, directionalLight2);
+};
+
+const createBubbles = () => {
+  const pmremGenerator = new THREE.PMREMGenerator(renderer);
+  hdrCubeRenderTarget = pmremGenerator.fromEquirectangular(hdrEquirect);
+  hdrEquirect.dispose();
+  pmremGenerator.dispose();
+
+  const bubbleTexture = new THREE.CanvasTexture(generateTexture());
+  bubbleTexture.repeat.set(1);
+
+  const bubbleMaterial = new THREE.MeshPhysicalMaterial({
+    color: params.color,
+    metalness: 0,
+    roughness: 0,
+    alphaMap: bubbleTexture,
+    alphaTest: 0.5,
+    envMap: hdrCubeRenderTarget.texture,
+    envMapIntensity: params.envMapIntensity,
+    depthWrite: false,
+    transmission: params.transmission,
+    opacity: 1,
+    transparent: true
+  });
+
+  const bubbleMaterial1b = new THREE.MeshPhysicalMaterial().copy(
+    bubbleMaterial
+  );
+  bubbleMaterial1b.side = THREE.BackSide;
+
+  const bubbleGeometry1 = new THREE.SphereBufferGeometry(170, 64, 32);
+  const bubbleGeometry2 = new THREE.SphereBufferGeometry(55, 64, 32);
+  const bubbleGeometry3 = new THREE.SphereBufferGeometry(30, 64, 32);
+  const bubbleGeometry4 = new THREE.SphereBufferGeometry(70, 64, 32);
+
+  let bubble1 = new THREE.Mesh(bubbleGeometry1, bubbleMaterial1b);
+  bubble1.position.z = 15;
+
+  let bubble2 = new THREE.Mesh(bubbleGeometry2, bubbleMaterial1b);
+  bubble2.position.y = -135;
+  bubble2.position.x = -175;
+  bubble2.position.z = 75;
+
+  let bubble3 = new THREE.Mesh(bubbleGeometry3, bubbleMaterial1b);
+  bubble3.position.y = -136;
+  bubble3.position.x = 137;
+  bubble3.position.z = 50;
+
+  let bubble4 = new THREE.Mesh(bubbleGeometry4, bubbleMaterial1b);
+  bubble4.position.y = 100;
+  bubble4.position.x = 210;
+  bubble4.position.z = 70;
+
+  scene.add(bubble1, bubble2, bubble3, bubble4);
+};
+
+const createParticles = () => {
+  const particlesGeometry = new THREE.BufferGeometry();
+
+  const color = new THREE.Color();
+  let components = [];
+
+  const count = 400;
+  const positions = new Float32Array(count * 3);
+  const colors = new Float32Array(count * 3);
+
+  for (let i = 0; i < count; i++) {
+    if (i % 3 === 0) {
+      color.setHSL(Math.random(), 1, 0.5);
+      components = [color.r, color.g, color.b];
+    }
+    positions[i] = (Math.random() - 0.5) * 1000;
+    colors[i] = components[i % 3];
+  }
+
+  particlesGeometry.setAttribute(
+    "position",
+    new THREE.BufferAttribute(positions, 3)
+  );
+
+  particlesGeometry.setAttribute(
+    "color",
+    new THREE.BufferAttribute(colors, 3, true)
+  );
+
+  const textureLoader = new THREE.TextureLoader();
+  const particlesTexture = textureLoader.load(
+    "https://mrp.vercel.app/magic_05.png"
+  );
+  const particlesMaterial = new THREE.PointsMaterial({
+    size: 17,
+    alphaMap: particlesTexture,
+    transparent: true,
+    depthWrite: false,
+    blending: THREE.AdditiveBlending,
+    vertexColors: true
+  });
+
+  particles = new THREE.Points(particlesGeometry, particlesMaterial);
+
+  scene.add(particles);
+};
+
+window.addEventListener("click", (event) => {
+  raycaster.setFromCamera(
+    new THREE.Vector2(
+      (event.clientX / window.innerWidth) * 2 - 1,
+      -(event.clientY / window.innerHeight) * 2 + 1
+    ),
+    camera
+  );
+
+  const intersects = raycaster.intersectObjects(spheres);
+
+  for (let i = 0; i < intersects.length; i++) {
+    const sphere = intersects[i].object;
+    scene.remove(sphere);
+    spheres.splice(spheres.indexOf(sphere), 1);
+  }
+});
+
+const time = new THREE.Clock();
+
+const loop = () => {
+  const elapsedTime = time.getElapsedTime();
+  const elapsedTimeInMs = Math.round(elapsedTime * 1000);
+
+  controls.update();
+
+  particles.rotation.y = elapsedTime * 0.02;
+
+  for (const sphere of spheres) {
+    const radius = 350;
+    const speed = 0.02 + 0.01 * sphere.randomness;
+    const heightAngle = elapsedTime * speed + sphere.randomness;
+    const thetaAngle = elapsedTime * -speed + sphere.randomness * 0.5;
+
+    sphere.position.x = radius * Math.cos(thetaAngle) * Math.sin(heightAngle);
+    sphere.position.y = radius * Math.sin(thetaAngle) * Math.sin(heightAngle);
+    sphere.position.z = radius * Math.cos(heightAngle);
+  }
+
+  if (meshes.planet) {
+    meshes.planet.rotation.y += 0.002;
+    meshes.planet.rotation.z += 0.002;
+  }
+
+  if (elapsedTimeInMs % 3000 > 2750) {
+    meshes.RightEye.visible = false;
+    meshes.LeftEye.visible = false;
+    meshes.ClosedLeftEye.visible = true;
+    meshes.ClosedRightEye.visible = true;
+  } else {
+    meshes.ClosedLeftEye.visible = false;
+    meshes.ClosedRightEye.visible = false;
+    meshes.RightEye.visible = true;
+    meshes.LeftEye.visible = true;
+  }
+
+  renderer.render(scene, camera);
+
+  requestAnimationFrame(loop);
+};
+
+const main = async () => {
+  hdrEquirect = await new THREE.RGBELoader()
+    .setDataType(THREE.UnsignedByteType)
+    .load("https://stivs-assets.s3.us-east-2.amazonaws.com/mrp/env.hdr");
+
+  await new Promise((resolve) => {
+    new THREE.GLTFLoader().load("https://stivs-assets.s3.us-east-2.amazonaws.com/mrp/model.gltf", (gltf) => {
+      tinky = gltf.scene;
+      tinky.castShadow = true;
+      tinky.receiveShadow = true;
+      tinky.scale.set(80, 80, 80);
+
+      tinky.children.forEach((el) => {
+        el.receiveShadow = true;
+        meshes[el.name] = el;
+      });
+
+      resolve();
+    });
+  });
+
+  positionElements();
+  createScene();
+  createLights();
+  createBubbles();
+  createParticles();
+
+  const bubbleGeometry5 = new THREE.SphereBufferGeometry(10, 64, 32);
+  const pmremGenerator = new THREE.PMREMGenerator(renderer);
+  hdrCubeRenderTarget = pmremGenerator.fromEquirectangular(hdrEquirect);
+  hdrEquirect.dispose();
+  pmremGenerator.dispose();
+
+  const bubbleTexture = new THREE.CanvasTexture(generateTexture());
+  bubbleTexture.repeat.set(1);
+
+  const bubbleMaterial = new THREE.MeshPhysicalMaterial({
+    color: params.color,
+    metalness: 0,
+    roughness: 0,
+    alphaMap: bubbleTexture,
+    alphaTest: 0.5,
+    envMap: hdrCubeRenderTarget.texture,
+    envMapIntensity: params.envMapIntensity,
+    depthWrite: false,
+    transmission: params.transmission,
+    opacity: 1,
+    transparent: true
+  });
+
+  const bubbleMaterial1b = new THREE.MeshPhysicalMaterial().copy(
+    bubbleMaterial
+  );
+  bubbleMaterial1b.side = THREE.BackSide;
+
+  setInterval(() => {
+    if (spheres.length > 20) return;
+
+    const mesh = new THREE.Mesh(bubbleGeometry5, bubbleMaterial1b);
+
+    mesh.position.x = Math.random() * 1350 - 725;
+    mesh.position.y = Math.random() * 1350 - 725;
+    mesh.position.z = Math.random() * 1350 - 725;
+
+    mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
+
+    mesh.randomness = Math.random() * 50;
+
+    spheres.push(mesh);
+
+    scene.add(mesh);
+  }, 2000);
+
+  renderer.render(scene, camera);
+  loop();
+};
+
+main();
\ No newline at end of file
diff --git a/pop-the-bubbles-three-js-scene/dist/style.css b/pop-the-bubbles-three-js-scene/dist/style.css
new file mode 100644
index 0000000..39cd4cb
--- /dev/null
+++ b/pop-the-bubbles-three-js-scene/dist/style.css
@@ -0,0 +1,34 @@
+html,
+body {
+  margin: 0;
+  height: 100%;
+  background: #22124a;
+  overflow: hidden;
+  perspective: 10rem;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: relative;
+}
+
+#canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.sky {
+  width: 100%;
+  height: 100%;
+  opacity: 0.5;
+  background: url("https://stivs-assets.s3.us-east-2.amazonaws.com/mrp/background.png") repeat;
+  background-size: cover;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
\ No newline at end of file
diff --git a/pop-the-bubbles-three-js-scene/license.txt b/pop-the-bubbles-three-js-scene/license.txt
new file mode 100644
index 0000000..199e42b
--- /dev/null
+++ b/pop-the-bubbles-three-js-scene/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Stívali Serna (https://codepen.io/stivaliserna/pen/GRNxGrR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/pop-the-bubbles-three-js-scene/src/index.html b/pop-the-bubbles-three-js-scene/src/index.html
new file mode 100644
index 0000000..878f381
--- /dev/null
+++ b/pop-the-bubbles-three-js-scene/src/index.html
@@ -0,0 +1,30 @@
+<div class="container">
+  <div class="sky"></div>
+  <div id="canvas"></div>
+</div>
+<script type="x-shader/x-vertex" id="vertexshader">
+
+  varying vec2 vUv;
+
+      void main() {
+
+        vUv = uv;
+
+        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+      }
+    </script>
+
+<script type="x-shader/x-fragment" id="fragmentshader">
+
+  uniform sampler2D baseTexture;
+      uniform sampler2D bloomTexture;
+
+      varying vec2 vUv;
+
+      void main() {
+
+        gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
+
+      }
+    </script>
\ No newline at end of file
diff --git a/pop-the-bubbles-three-js-scene/src/script.js b/pop-the-bubbles-three-js-scene/src/script.js
new file mode 100644
index 0000000..76e96c2
--- /dev/null
+++ b/pop-the-bubbles-three-js-scene/src/script.js
@@ -0,0 +1,369 @@
+let scene,
+  camera,
+  controls,
+  fieldOfView,
+  aspectRatio,
+  nearPlane,
+  farPlane,
+  renderer,
+  container,
+  hdrCubeRenderTarget,
+  HEIGHT,
+  WIDTH,
+  hdrEquirect,
+  tinky,
+  particles,
+  raycaster;
+
+const params = {
+  color: 0x21024f,
+  transmission: 0.9,
+  envMapIntensity: 10,
+  lightIntensity: 1,
+  exposure: 0.5
+};
+
+const spheres = [];
+
+const meshes = {};
+
+const generateTexture = () => {
+  const canvas = document.createElement("canvas");
+  canvas.width = 2;
+  canvas.height = 2;
+
+  const context = canvas.getContext("2d");
+  context.fillStyle = "white";
+  context.fillRect(0, 1, 2, 1);
+
+  return canvas;
+};
+
+const createScene = () => {
+  HEIGHT = window.innerHeight;
+  WIDTH = window.innerWidth;
+
+  raycaster = new THREE.Raycaster();
+
+  scene = new THREE.Scene();
+
+  aspectRatio = WIDTH / HEIGHT;
+  fieldOfView = 60;
+  nearPlane = 1;
+  farPlane = 10000;
+  camera = new THREE.PerspectiveCamera(
+    fieldOfView,
+    aspectRatio,
+    nearPlane,
+    farPlane
+  );
+
+  camera.position.x = 0;
+  camera.position.z = 500;
+  camera.position.y = -10;
+
+  renderer = new THREE.WebGLRenderer({
+    alpha: true,
+    antialias: true
+  });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(WIDTH, HEIGHT);
+
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 2;
+
+  container = document.getElementById("canvas");
+  container.appendChild(renderer.domElement);
+
+  window.addEventListener("resize", handleWindowResize, false);
+
+  scene.add(tinky);
+
+  controls = new THREE.OrbitControls(camera, renderer.domElement);
+  controls.maxDistance = 1000;
+  controls.maxAzimuthAngle = 1;
+  controls.minAzimuthAngle = -1;
+};
+
+const positionElements = () => {
+  meshes.bigStar.position.y = -1.7;
+  meshes.bigStar.position.x = -2.2;
+  meshes.bigStar.position.z = 0.8;
+  meshes.bigStar.rotation.z = -0.5;
+
+  meshes.littleStar.position.y = -1.75;
+  meshes.littleStar.position.x = 1.75;
+  meshes.littleStar.position.z = 0.6;
+  meshes.littleStar.rotation.z = 0.5;
+
+  meshes.planet.position.y = 1.3;
+  meshes.planet.position.x = 2.6;
+  meshes.planet.position.z = 1;
+
+  meshes.ClosedLeftEye.visible = false;
+  meshes.ClosedRightEye.visible = false;
+};
+
+const handleWindowResize = () => {
+  HEIGHT = window.innerHeight;
+  WIDTH = window.innerWidth;
+  renderer.setSize(WIDTH, HEIGHT);
+  camera.aspect = WIDTH / HEIGHT;
+  camera.updateProjectionMatrix();
+};
+
+const createLights = () => {
+  const ambientLight = new THREE.AmbientLight(0xaa54f0, 1);
+
+  const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1);
+  directionalLight1.position.set(-2, 2, 5);
+
+  const directionalLight2 = new THREE.DirectionalLight(0xfff000, 1);
+  directionalLight2.position.set(-2, 4, 4);
+  directionalLight2.castShadow = true;
+
+  scene.add(ambientLight, directionalLight1, directionalLight2);
+};
+
+const createBubbles = () => {
+  const pmremGenerator = new THREE.PMREMGenerator(renderer);
+  hdrCubeRenderTarget = pmremGenerator.fromEquirectangular(hdrEquirect);
+  hdrEquirect.dispose();
+  pmremGenerator.dispose();
+
+  const bubbleTexture = new THREE.CanvasTexture(generateTexture());
+  bubbleTexture.repeat.set(1);
+
+  const bubbleMaterial = new THREE.MeshPhysicalMaterial({
+    color: params.color,
+    metalness: 0,
+    roughness: 0,
+    alphaMap: bubbleTexture,
+    alphaTest: 0.5,
+    envMap: hdrCubeRenderTarget.texture,
+    envMapIntensity: params.envMapIntensity,
+    depthWrite: false,
+    transmission: params.transmission,
+    opacity: 1,
+    transparent: true
+  });
+
+  const bubbleMaterial1b = new THREE.MeshPhysicalMaterial().copy(
+    bubbleMaterial
+  );
+  bubbleMaterial1b.side = THREE.BackSide;
+
+  const bubbleGeometry1 = new THREE.SphereBufferGeometry(170, 64, 32);
+  const bubbleGeometry2 = new THREE.SphereBufferGeometry(55, 64, 32);
+  const bubbleGeometry3 = new THREE.SphereBufferGeometry(30, 64, 32);
+  const bubbleGeometry4 = new THREE.SphereBufferGeometry(70, 64, 32);
+
+  let bubble1 = new THREE.Mesh(bubbleGeometry1, bubbleMaterial1b);
+  bubble1.position.z = 15;
+
+  let bubble2 = new THREE.Mesh(bubbleGeometry2, bubbleMaterial1b);
+  bubble2.position.y = -135;
+  bubble2.position.x = -175;
+  bubble2.position.z = 75;
+
+  let bubble3 = new THREE.Mesh(bubbleGeometry3, bubbleMaterial1b);
+  bubble3.position.y = -136;
+  bubble3.position.x = 137;
+  bubble3.position.z = 50;
+
+  let bubble4 = new THREE.Mesh(bubbleGeometry4, bubbleMaterial1b);
+  bubble4.position.y = 100;
+  bubble4.position.x = 210;
+  bubble4.position.z = 70;
+
+  scene.add(bubble1, bubble2, bubble3, bubble4);
+};
+
+const createParticles = () => {
+  const particlesGeometry = new THREE.BufferGeometry();
+
+  const color = new THREE.Color();
+  let components = [];
+
+  const count = 400;
+  const positions = new Float32Array(count * 3);
+  const colors = new Float32Array(count * 3);
+
+  for (let i = 0; i < count; i++) {
+    if (i % 3 === 0) {
+      color.setHSL(Math.random(), 1, 0.5);
+      components = [color.r, color.g, color.b];
+    }
+    positions[i] = (Math.random() - 0.5) * 1000;
+    colors[i] = components[i % 3];
+  }
+
+  particlesGeometry.setAttribute(
+    "position",
+    new THREE.BufferAttribute(positions, 3)
+  );
+
+  particlesGeometry.setAttribute(
+    "color",
+    new THREE.BufferAttribute(colors, 3, true)
+  );
+
+  const textureLoader = new THREE.TextureLoader();
+  const particlesTexture = textureLoader.load(
+    "https://mrp.vercel.app/magic_05.png"
+  );
+  const particlesMaterial = new THREE.PointsMaterial({
+    size: 17,
+    alphaMap: particlesTexture,
+    transparent: true,
+    depthWrite: false,
+    blending: THREE.AdditiveBlending,
+    vertexColors: true
+  });
+
+  particles = new THREE.Points(particlesGeometry, particlesMaterial);
+
+  scene.add(particles);
+};
+
+window.addEventListener("click", (event) => {
+  raycaster.setFromCamera(
+    new THREE.Vector2(
+      (event.clientX / window.innerWidth) * 2 - 1,
+      -(event.clientY / window.innerHeight) * 2 + 1
+    ),
+    camera
+  );
+
+  const intersects = raycaster.intersectObjects(spheres);
+
+  for (let i = 0; i < intersects.length; i++) {
+    const sphere = intersects[i].object;
+    scene.remove(sphere);
+    spheres.splice(spheres.indexOf(sphere), 1);
+  }
+});
+
+const time = new THREE.Clock();
+
+const loop = () => {
+  const elapsedTime = time.getElapsedTime();
+  const elapsedTimeInMs = Math.round(elapsedTime * 1000);
+
+  controls.update();
+
+  particles.rotation.y = elapsedTime * 0.02;
+
+  for (const sphere of spheres) {
+    const radius = 350;
+    const speed = 0.02 + 0.01 * sphere.randomness;
+    const heightAngle = elapsedTime * speed + sphere.randomness;
+    const thetaAngle = elapsedTime * -speed + sphere.randomness * 0.5;
+
+    sphere.position.x = radius * Math.cos(thetaAngle) * Math.sin(heightAngle);
+    sphere.position.y = radius * Math.sin(thetaAngle) * Math.sin(heightAngle);
+    sphere.position.z = radius * Math.cos(heightAngle);
+  }
+
+  if (meshes.planet) {
+    meshes.planet.rotation.y += 0.002;
+    meshes.planet.rotation.z += 0.002;
+  }
+
+  if (elapsedTimeInMs % 3000 > 2750) {
+    meshes.RightEye.visible = false;
+    meshes.LeftEye.visible = false;
+    meshes.ClosedLeftEye.visible = true;
+    meshes.ClosedRightEye.visible = true;
+  } else {
+    meshes.ClosedLeftEye.visible = false;
+    meshes.ClosedRightEye.visible = false;
+    meshes.RightEye.visible = true;
+    meshes.LeftEye.visible = true;
+  }
+
+  renderer.render(scene, camera);
+
+  requestAnimationFrame(loop);
+};
+
+const main = async () => {
+  hdrEquirect = await new THREE.RGBELoader()
+    .setDataType(THREE.UnsignedByteType)
+    .load("https://stivs-assets.s3.us-east-2.amazonaws.com/mrp/env.hdr");
+
+  await new Promise((resolve) => {
+    new THREE.GLTFLoader().load("https://stivs-assets.s3.us-east-2.amazonaws.com/mrp/model.gltf", (gltf) => {
+      tinky = gltf.scene;
+      tinky.castShadow = true;
+      tinky.receiveShadow = true;
+      tinky.scale.set(80, 80, 80);
+
+      tinky.children.forEach((el) => {
+        el.receiveShadow = true;
+        meshes[el.name] = el;
+      });
+
+      resolve();
+    });
+  });
+
+  positionElements();
+  createScene();
+  createLights();
+  createBubbles();
+  createParticles();
+
+  const bubbleGeometry5 = new THREE.SphereBufferGeometry(10, 64, 32);
+  const pmremGenerator = new THREE.PMREMGenerator(renderer);
+  hdrCubeRenderTarget = pmremGenerator.fromEquirectangular(hdrEquirect);
+  hdrEquirect.dispose();
+  pmremGenerator.dispose();
+
+  const bubbleTexture = new THREE.CanvasTexture(generateTexture());
+  bubbleTexture.repeat.set(1);
+
+  const bubbleMaterial = new THREE.MeshPhysicalMaterial({
+    color: params.color,
+    metalness: 0,
+    roughness: 0,
+    alphaMap: bubbleTexture,
+    alphaTest: 0.5,
+    envMap: hdrCubeRenderTarget.texture,
+    envMapIntensity: params.envMapIntensity,
+    depthWrite: false,
+    transmission: params.transmission,
+    opacity: 1,
+    transparent: true
+  });
+
+  const bubbleMaterial1b = new THREE.MeshPhysicalMaterial().copy(
+    bubbleMaterial
+  );
+  bubbleMaterial1b.side = THREE.BackSide;
+
+  setInterval(() => {
+    if (spheres.length > 20) return;
+
+    const mesh = new THREE.Mesh(bubbleGeometry5, bubbleMaterial1b);
+
+    mesh.position.x = Math.random() * 1350 - 725;
+    mesh.position.y = Math.random() * 1350 - 725;
+    mesh.position.z = Math.random() * 1350 - 725;
+
+    mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
+
+    mesh.randomness = Math.random() * 50;
+
+    spheres.push(mesh);
+
+    scene.add(mesh);
+  }, 2000);
+
+  renderer.render(scene, camera);
+  loop();
+};
+
+main();
diff --git a/pop-the-bubbles-three-js-scene/src/style.css b/pop-the-bubbles-three-js-scene/src/style.css
new file mode 100644
index 0000000..d534e85
--- /dev/null
+++ b/pop-the-bubbles-three-js-scene/src/style.css
@@ -0,0 +1,34 @@
+html,
+body {
+  margin: 0;
+  height: 100%;
+  background: #22124a;
+  overflow: hidden;
+  perspective: 10rem;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: relative;
+}
+
+#canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.sky {
+  width: 100%;
+  height: 100%;
+  opacity: 0.5;
+  background: url("https://stivs-assets.s3.us-east-2.amazonaws.com/mrp/background.png") repeat;
+  background-size: cover;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
diff --git a/popcssicles/README.markdown b/popcssicles/README.markdown
new file mode 100644
index 0000000..5867476
--- /dev/null
+++ b/popcssicles/README.markdown
@@ -0,0 +1,5 @@
+# PopCSSicles
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/wvMmjMJ](https://codepen.io/cobra_winfrey/pen/wvMmjMJ).
+
+
diff --git a/popcssicles/dist/index.html b/popcssicles/dist/index.html
new file mode 100644
index 0000000..013cdc0
--- /dev/null
+++ b/popcssicles/dist/index.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - PopCSSicles</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id='frame'>
+  <div class='popwrap'>
+    <div class='inner'>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+    </div>
+  </div>
+  <div class='popwrap'>
+    <div class='inner'>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+    </div>
+  </div>
+  <div class='popwrap'>
+    <div class='inner'>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+    </div>
+  </div>
+  <div class='popwrap'>
+    <div class='inner'>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+    </div>
+  </div>
+  <div class='popwrap'>
+    <div class='inner'>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+    </div>
+  </div>
+  <div class='popwrap'>
+    <div class='inner'>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+    </div>
+  </div>
+  <div class='popwrap'>
+    <div class='inner'>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+    </div>
+  </div>
+  <div class='popwrap'>
+    <div class='inner'>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+    </div>
+  </div>
+  <div class='popwrap'>
+    <div class='inner'>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+      <div class='cell'></div>
+    </div>
+  </div>
+</div>
+<svg version='1.1' xmlns='http://www.w3.org/2000/svg'>
+  <defs>
+    <filter id='filter'>
+      <feturbulence basefrequency='0.05 0.05' id='turbulence' numoctaves='2' result='noise' seed='9' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement' in2='fractalNoise' in='SourceGraphic' scale='90'></fedisplacementmap>
+    </filter>
+  </defs>
+</svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/popcssicles/dist/script.js b/popcssicles/dist/script.js
new file mode 100644
index 0000000..a27b122
--- /dev/null
+++ b/popcssicles/dist/script.js
@@ -0,0 +1,19 @@
+let repeat = 1;
+
+function draw(){
+  document.querySelectorAll(".cell").forEach(cell => { 
+    cell.style.setProperty("--size",((Math.floor(Math.random() * 10) + 1)));
+    cell.style.setProperty("--angle",((Math.floor(Math.random() * 360) + 1))+ "deg");
+    cell.style.setProperty("--radius",((Math.floor(Math.random() * 300) + 1)) + '%');
+    cell.style.setProperty("--radius2",((Math.floor(Math.random() * 300) + 1)) + '%');
+    cell.style.setProperty("--radius3",((Math.floor(Math.random() * 300) + 1)) + '%');
+    cell.style.setProperty("--radius4",((Math.floor(Math.random() * 300) + 1)) + '%');
+  });
+    
+};
+
+draw();
+
+if (repeat == 1){
+  setInterval(function(){ draw(); }, 4000);
+}
\ No newline at end of file
diff --git a/popcssicles/dist/style.css b/popcssicles/dist/style.css
new file mode 100644
index 0000000..42769f5
--- /dev/null
+++ b/popcssicles/dist/style.css
@@ -0,0 +1,294 @@
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  background: radial-gradient(circle at center, #ffffff, #fffe9b);
+}
+body #frame {
+  position: relative;
+  width: 70vw;
+  height: 70vw;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  grid-column-gap: 12.5vw;
+  grid-row-gap: 3vw;
+  opacity: 0;
+  -webkit-animation: fadeIn 3s ease-in-out 1 forwards;
+          animation: fadeIn 3s ease-in-out 1 forwards;
+}
+@-webkit-keyframes fadeIn {
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+body .popwrap {
+  position: relative;
+  -webkit-transform: translateX(5vw) rotate(15deg) scaleX(-1) scale(1.15);
+          transform: translateX(5vw) rotate(15deg) scaleX(-1) scale(1.15);
+  -webkit-animation: backnforth 3s ease-in-out infinite alternate;
+          animation: backnforth 3s ease-in-out infinite alternate;
+}
+@-webkit-keyframes backnforth {
+  to {
+    -webkit-transform: translateX(5vw) rotate(-15deg) scaleX(-1) scale(1.15);
+            transform: translateX(5vw) rotate(-15deg) scaleX(-1) scale(1.15);
+  }
+}
+@keyframes backnforth {
+  to {
+    -webkit-transform: translateX(5vw) rotate(-15deg) scaleX(-1) scale(1.15);
+            transform: translateX(5vw) rotate(-15deg) scaleX(-1) scale(1.15);
+  }
+}
+body .popwrap:nth-of-type(4) {
+  -webkit-animation: backnforth5 3s ease-in-out infinite alternate;
+          animation: backnforth5 3s ease-in-out infinite alternate;
+  -webkit-transform: translateX(-5vw) rotate(15deg) scaleX(-1) scale(1.15);
+          transform: translateX(-5vw) rotate(15deg) scaleX(-1) scale(1.15);
+}
+@-webkit-keyframes backnforth5 {
+  to {
+    -webkit-transform: translateX(-5vw) rotate(-15deg) scaleX(-1) scale(1.35);
+            transform: translateX(-5vw) rotate(-15deg) scaleX(-1) scale(1.35);
+  }
+}
+@keyframes backnforth5 {
+  to {
+    -webkit-transform: translateX(-5vw) rotate(-15deg) scaleX(-1) scale(1.35);
+            transform: translateX(-5vw) rotate(-15deg) scaleX(-1) scale(1.35);
+  }
+}
+body .popwrap:nth-of-type(5) {
+  -webkit-animation: backnforth5 3s ease-in-out infinite alternate;
+          animation: backnforth5 3s ease-in-out infinite alternate;
+  -webkit-transform: translateX(-5vw) rotate(15deg) scaleX(-1) scale(1.15);
+          transform: translateX(-5vw) rotate(15deg) scaleX(-1) scale(1.15);
+}
+@keyframes backnforth5 {
+  to {
+    -webkit-transform: translateX(-5vw) rotate(-15deg) scaleX(-1) scale(1.35);
+            transform: translateX(-5vw) rotate(-15deg) scaleX(-1) scale(1.35);
+  }
+}
+body .popwrap:nth-of-type(6) {
+  -webkit-animation: backnforth5 3s ease-in-out infinite alternate;
+          animation: backnforth5 3s ease-in-out infinite alternate;
+  -webkit-transform: translateX(-5vw) rotate(15deg) scaleX(-1) scale(1.15);
+          transform: translateX(-5vw) rotate(15deg) scaleX(-1) scale(1.15);
+}
+@keyframes backnforth5 {
+  to {
+    -webkit-transform: translateX(-5vw) rotate(-15deg) scaleX(-1) scale(1.35);
+            transform: translateX(-5vw) rotate(-15deg) scaleX(-1) scale(1.35);
+  }
+}
+body .popwrap:after {
+  content: '';
+  position: absolute;
+  width: 1.5vw;
+  height: 50%;
+  background: rgba(0, 0, 0, 0.1);
+  box-shadow: 2.5vw 0 0 rgba(0, 0, 0, 0.1), -2.5vw 0 0 rgba(0, 0, 0, 0.1);
+  border-radius: 1vw;
+  z-index: 10;
+  left: 50%;
+  top: 15%;
+  -webkit-animation: backnforth4 3s ease-in-out infinite alternate;
+          animation: backnforth4 3s ease-in-out infinite alternate;
+}
+@-webkit-keyframes backnforth4 {
+  to {
+    -webkit-transform: translateX(-1.15vw);
+            transform: translateX(-1.15vw);
+  }
+}
+@keyframes backnforth4 {
+  to {
+    -webkit-transform: translateX(-1.15vw);
+            transform: translateX(-1.15vw);
+  }
+}
+body .popwrap:before {
+  content: '';
+  position: absolute;
+  width: 2vw;
+  height: 50%;
+  bottom: 0;
+  z-index: 0;
+  left: calc(50% - 1vw);
+  background: -webkit-gradient(linear, right top, left top, from(#e9dfc4), color-stop(1%, #e9dfc4), color-stop(2%, #ede3c8), color-stop(24%, #ede3c8), color-stop(25%, #ebddc3), color-stop(48%, #e9dfc4), color-stop(49%, #ebddc3), color-stop(52%, #e6d8bd), color-stop(53%, #e6d8bd), color-stop(54%, #e9dbc0), color-stop(55%, #e6d8bd), color-stop(56%, #e6d8bd), color-stop(57%, #e9dbc0), color-stop(58%, #e6d8bd), color-stop(73%, #e6d8bd), color-stop(74%, #e9dbc0), color-stop(98%, #e9dbc0), to(#ebddc3));
+  background: linear-gradient(to left, #e9dfc4 0%, #e9dfc4 1%, #ede3c8 2%, #ede3c8 24%, #ebddc3 25%, #e9dfc4 48%, #ebddc3 49%, #e6d8bd 52%, #e6d8bd 53%, #e9dbc0 54%, #e6d8bd 55%, #e6d8bd 56%, #e9dbc0 57%, #e6d8bd 58%, #e6d8bd 73%, #e9dbc0 74%, #e9dbc0 98%, #ebddc3 100%);
+  border-radius: 0 0 50vw 50vw;
+  box-shadow: inset 0.25vw 0 0 rgba(0, 0, 0, 0.15);
+  -webkit-animation: backnforth3 3s ease-in-out infinite alternate;
+          animation: backnforth3 3s ease-in-out infinite alternate;
+}
+@-webkit-keyframes backnforth3 {
+  to {
+    box-shadow: inset -0.25vw 0 0 rgba(0, 0, 0, 0.15);
+  }
+}
+@keyframes backnforth3 {
+  to {
+    box-shadow: inset -0.25vw 0 0 rgba(0, 0, 0, 0.15);
+  }
+}
+body .popwrap:nth-of-type(even) {
+  -webkit-animation-delay: -1.5s;
+          animation-delay: -1.5s;
+}
+body .popwrap:nth-of-type(even):before, body .popwrap:nth-of-type(even):after {
+  -webkit-animation-delay: -1.5s;
+          animation-delay: -1.5s;
+}
+body .popwrap:nth-of-type(even):after {
+  background: rgba(0, 0, 0, 0.3);
+  box-shadow: 2.5vw 0 0 rgba(0, 0, 0, 0.3), -2.5vw 0 0 rgba(0, 0, 0, 0.3);
+}
+body .popwrap:nth-of-type(even) .inner:before {
+  -webkit-animation-delay: -1.5s;
+          animation-delay: -1.5s;
+}
+body .popwrap:nth-of-type(even) .inner .cell:before {
+  background: radial-gradient(circle at center, #896DBF 30%, #4E1D77 30%, #4E1D77 60%, #42B7B7 60%), #42B7B7;
+}
+body .popwrap:nth-of-type(3):after, body .popwrap:nth-of-type(4):after, body .popwrap:nth-of-type(9):after {
+  background: rgba(0, 0, 0, 0.15);
+  box-shadow: 2.5vw 0 0 rgba(0, 0, 0, 0.15), -2.5vw 0 0 rgba(0, 0, 0, 0.15);
+}
+body .popwrap:nth-of-type(3) .inner .cell:before, body .popwrap:nth-of-type(4) .inner .cell:before, body .popwrap:nth-of-type(9) .inner .cell:before {
+  background: radial-gradient(circle at center, #F67280 30%, #6C5B7B 30%, #6C5B7B 60%, #F8B195 60%), #F8B195;
+}
+body .popwrap .inner {
+  position: absolute;
+  width: 75%;
+  height: 75%;
+  top: 0;
+  left: 12.5%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  background: #ff0080;
+  overflow: hidden;
+  border-radius: 50vw 50vw 10vw 10vw;
+  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+  z-index: 8;
+  -webkit-mask: radial-gradient(circle at bottom, #000 34%, transparent 34%) 50% -10vw/100% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(5vw, transparent), color-stop(5vw, #000));
+  -webkit-mask: radial-gradient(circle at bottom, #000 34%, transparent 34%) 50% -10vw/100% 100% no-repeat, linear-gradient(to bottom, transparent 5vw, #000 5vw);
+          mask: radial-gradient(circle at bottom, #000 34%, transparent 34%) 50% -10vw/100% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(5vw, transparent), color-stop(5vw, #000));
+          mask: radial-gradient(circle at bottom, #000 34%, transparent 34%) 50% -10vw/100% 100% no-repeat, linear-gradient(to bottom, transparent 5vw, #000 5vw);
+}
+body .popwrap .inner:before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  left: 0;
+  top: 0;
+  box-shadow: inset 1.5vw 0 0 rgba(0, 0, 0, 0.15);
+  border-radius: inherit;
+  -webkit-animation: backnforth2 3s ease-in-out infinite alternate;
+          animation: backnforth2 3s ease-in-out infinite alternate;
+}
+@-webkit-keyframes backnforth2 {
+  to {
+    box-shadow: inset -1.5vw 0 0 rgba(0, 0, 0, 0.15);
+  }
+}
+@keyframes backnforth2 {
+  to {
+    box-shadow: inset -1.5vw 0 0 rgba(0, 0, 0, 0.15);
+  }
+}
+body .popwrap .inner:after {
+  content: '';
+  position: absolute;
+  width: 50vw;
+  height: 50vw;
+  -webkit-transition: -webkit-transform 4s ease-in-out;
+  transition: -webkit-transform 4s ease-in-out;
+  transition: transform 4s ease-in-out;
+  transition: transform 4s ease-in-out, -webkit-transform 4s ease-in-out;
+  -webkit-transform: scale(var(--scale));
+          transform: scale(var(--scale));
+  -webkit-backdrop-filter: url(#filter);
+          backdrop-filter: url(#filter);
+  z-index: 9;
+  left: -12.5vw;
+  top: -12.5vw;
+}
+body .popwrap .cell {
+  position: relative;
+  z-index: 0;
+}
+body .popwrap .cell:before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at center, #40e0d0 30%, #ff8c00 30%, #ff8c00 60%, #ff0080 60%), #ff0080;
+  left: 0;
+  top: 0;
+  -webkit-transform: scale(calc(var(--size) * 0.5)) rotate(var(--angle));
+          transform: scale(calc(var(--size) * 0.5)) rotate(var(--angle));
+  border-radius: var(--radius) var(--radius2) var(--radius3) var(--radius4);
+  -webkit-transition: 4s ease-in-out;
+  transition: 4s ease-in-out;
+}
+body .popwrap .cell:nth-of-type(1):before {
+  -webkit-transition-delay: 0.025s;
+          transition-delay: 0.025s;
+}
+body .popwrap .cell:nth-of-type(2):before {
+  -webkit-transition-delay: 0.05s;
+          transition-delay: 0.05s;
+}
+body .popwrap .cell:nth-of-type(3):before {
+  -webkit-transition-delay: 0.075s;
+          transition-delay: 0.075s;
+}
+body .popwrap .cell:nth-of-type(4):before {
+  -webkit-transition-delay: 0.1s;
+          transition-delay: 0.1s;
+}
+body .popwrap .cell:nth-of-type(5):before {
+  -webkit-transition-delay: 0.125s;
+          transition-delay: 0.125s;
+}
+body .popwrap .cell:nth-of-type(6):before {
+  -webkit-transition-delay: 0.15s;
+          transition-delay: 0.15s;
+}
+body .popwrap .cell:nth-of-type(7):before {
+  -webkit-transition-delay: 0.175s;
+          transition-delay: 0.175s;
+}
+body .popwrap .cell:nth-of-type(8):before {
+  -webkit-transition-delay: 0.2s;
+          transition-delay: 0.2s;
+}
+body .popwrap .cell:nth-of-type(9):before {
+  -webkit-transition-delay: 0.225s;
+          transition-delay: 0.225s;
+}
+body svg {
+  position: absolute;
+}
\ No newline at end of file
diff --git a/popcssicles/license.txt b/popcssicles/license.txt
new file mode 100644
index 0000000..e3065a3
--- /dev/null
+++ b/popcssicles/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/wvMmjMJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/popcssicles/src/index.haml b/popcssicles/src/index.haml
new file mode 100644
index 0000000..1ffea54
--- /dev/null
+++ b/popcssicles/src/index.haml
@@ -0,0 +1,12 @@
+#frame
+ -9.times do
+  .popwrap
+   .inner
+    -9.times do
+     .cell
+
+%svg{:version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
+ %defs
+  %filter#filter
+   %feturbulence#turbulence{:basefrequency => "0.05 0.05", :numoctaves => "2", :result => "noise", :seed => "9", :type => "fractalNoise"}
+   %fedisplacementmap#displacement{:in => "SourceGraphic", :in2 => "fractalNoise", :scale => "90"}
\ No newline at end of file
diff --git a/popcssicles/src/script.js b/popcssicles/src/script.js
new file mode 100644
index 0000000..080293d
--- /dev/null
+++ b/popcssicles/src/script.js
@@ -0,0 +1,21 @@
+let repeat = 1;
+
+function draw(){
+  document.querySelectorAll(".cell").forEach(cell => { 
+    cell.style.setProperty("--size",((Math.floor(Math.random() * 10) + 1)));
+    cell.style.setProperty("--angle",((Math.floor(Math.random() * 360) + 1))+ "deg");
+    cell.style.setProperty("--radius",((Math.floor(Math.random() * 300) + 1)) + '%');
+    cell.style.setProperty("--radius2",((Math.floor(Math.random() * 300) + 1)) + '%');
+    cell.style.setProperty("--radius3",((Math.floor(Math.random() * 300) + 1)) + '%');
+    cell.style.setProperty("--radius4",((Math.floor(Math.random() * 300) + 1)) + '%');
+  });
+    
+};
+
+draw();
+
+if (repeat == 1){
+  setInterval(function(){ draw(); }, 4000);
+}
+
+
diff --git a/popcssicles/src/style.scss b/popcssicles/src/style.scss
new file mode 100644
index 0000000..7429b75
--- /dev/null
+++ b/popcssicles/src/style.scss
@@ -0,0 +1,196 @@
+body{
+  width:100vw;
+  height:100vh;
+  overflow:hidden;
+  display:grid;
+  place-items:center;
+  background: radial-gradient(circle at center, #ffffff, #fffe9b);
+  #frame{
+    position:relative;
+    width:70vw;
+    height:70vw;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-column-gap:12.5vw;
+    grid-row-gap: 3vw;
+    opacity:0;
+    animation:fadeIn 3s ease-in-out 1 forwards;
+    @keyframes fadeIn{
+      50%{
+        opacity:0;
+      }
+      100%{
+        opacity:1;
+      }
+    }
+  }
+  .popwrap{
+    position:relative;
+    transform:translateX(5vw) rotate(15deg) scaleX(-1) scale(1.15);
+    animation:backnforth 3s ease-in-out infinite alternate;
+    @keyframes backnforth{
+      to{
+        transform:translateX(5vw) rotate(-15deg) scaleX(-1) scale(1.15);
+      }
+    }
+    @for $i from 4 through 6{
+      &:nth-of-type(#{$i}){
+        animation:backnforth5 3s ease-in-out infinite alternate;
+        transform:translateX(-5vw) rotate(15deg) scaleX(-1) scale(1.15);
+        @keyframes backnforth5{
+          to{
+            transform:translateX(-5vw) rotate(-15deg) scaleX(-1) scale(1.35);
+          }
+        }
+      }
+    }
+    &:after{
+      content:'';
+      position:absolute;
+      width:1.5vw;
+      height:50%;
+      background:rgba(0,0,0,0.1);
+      box-shadow:2.5vw 0 0 rgba(0,0,0,0.1), -2.5vw 0 0 rgba(0,0,0,0.1);
+      border-radius:1vw;
+      z-index:10;
+      left:50%;
+      top:15%;
+      animation:backnforth4 3s ease-in-out infinite alternate;
+      @keyframes backnforth4{
+        to{
+          transform:translateX(-1.15vw);
+        }
+      }
+    }
+    &:before{
+      content:'';
+      position:absolute;
+      width:2vw;
+      height:50%;
+      bottom:0;
+      z-index:0;
+      left:calc(50% - 1vw);
+      background:linear-gradient(to left, rgba(233,223,196,1) 0%, rgba(233,223,196,1) 1%, rgba(237,227,200,1) 2%, rgba(237,227,200,1) 24%, rgba(235,221,195,1) 25%, rgba(233,223,196,1) 48%, rgba(235,221,195,1) 49%, rgba(230,216,189,1) 52%, rgba(230,216,189,1) 53%, rgba(233,219,192,1) 54%, rgba(230,216,189,1) 55%, rgba(230,216,189,1) 56%, rgba(233,219,192,1) 57%, rgba(230,216,189,1) 58%, rgba(230,216,189,1) 73%, rgba(233,219,192,1) 74%, rgba(233,219,192,1) 98%, rgba(235,221,195,1) 100%);
+      border-radius:0 0 50vw 50vw;
+      box-shadow:inset 0.25vw 0 0 rgba(0,0,0,0.15);
+      animation:backnforth3 3s ease-in-out infinite alternate;
+      @keyframes backnforth3{
+        to{
+          box-shadow:inset -0.25vw 0 0 rgba(0,0,0,0.15);
+        }
+      }
+    }
+    &:nth-of-type(even){
+      animation-delay:-1.5s;
+      &:before, &:after{
+        animation-delay:-1.5s;
+      }
+      &:after{
+        background:rgba(0,0,0,0.3);
+      box-shadow:2.5vw 0 0 rgba(0,0,0,0.3), -2.5vw 0 0 rgba(0,0,0,0.3);
+      }
+      .inner{
+        &:before{
+          animation-delay:-1.5s;
+        }
+      }
+      .inner{
+        .cell{
+          &:before{
+            background: radial-gradient(circle at center, #896DBF 30%, #4E1D77 30%, #4E1D77 60%, #42B7B7 60%), 
+      #42B7B7;
+          }
+        }
+      }
+    }
+    &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(9){
+      &:after{
+        background:rgba(0,0,0,0.15);
+      box-shadow:2.5vw 0 0 rgba(0,0,0,0.15), -2.5vw 0 0 rgba(0,0,0,0.15);
+      }
+      .inner{
+        .cell{
+          &:before{
+            background: radial-gradient(circle at center, #F67280 30%, #6C5B7B 30%, #6C5B7B 60%, #F8B195 60%), 
+      #F8B195;
+          }
+        }
+      }
+    }
+   .inner{
+    position:absolute;
+    width:75%;
+    height:75%;
+    top:0;
+    left:12.5%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    background:#ff0080;
+    overflow:hidden;
+    border-radius:50vw 50vw 10vw 10vw;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+    z-index:8;
+    mask:radial-gradient(circle at bottom, #000 34%, transparent 34%) 50% -10vw / 100% 100% no-repeat, linear-gradient(to bottom, transparent 5vw, #000 5vw);
+    &:before{
+      content:'';
+      position:absolute;
+      width:100%;
+      height:100%;
+      z-index:10;
+      left:0;
+      top:0;
+      box-shadow:inset 1.5vw 0 0 rgba(0,0,0,0.15);
+      border-radius:inherit;
+      animation:backnforth2 3s ease-in-out infinite alternate;
+      @keyframes backnforth2{
+        to{
+          box-shadow:inset -1.5vw 0 0 rgba(0,0,0,0.15);
+        }
+      }
+    }
+    &:after{
+      content:'';
+      position:absolute;
+      width:50vw;
+      height:50vw;
+      transition:transform 4s ease-in-out;
+      transform:scale(var(--scale));
+      backdrop-filter:url(#filter);
+      z-index:9;
+      left:-12.5vw;
+      top:-12.5vw;
+    }
+  }
+  .cell{
+    position:relative;
+    z-index:0;
+    &:before{
+      content:'';
+      position:absolute;
+      width:100%;
+      height:100%;
+      background: radial-gradient(circle at center, #40e0d0 30%, #ff8c00 30%, #ff8c00 60%, #ff0080 60%), 
+    #ff0080;
+      left:0;
+      top:0;
+      transform:scale(calc(var(--size) * 0.5)) rotate(var(--angle));
+      border-radius:var(--radius) var(--radius2) var(--radius3) var(--radius4);
+      transition:4s ease-in-out;
+    }
+    @for $i from 1 through 9{
+        &:nth-of-type(#{$i}){
+          &:before{
+            transition-delay:#{$i/40}s;
+          }
+        }
+      }
+    }
+  }
+  svg{
+    position:absolute;
+  }
+}
\ No newline at end of file
diff --git a/potion-container/README.markdown b/potion-container/README.markdown
new file mode 100644
index 0000000..df4253f
--- /dev/null
+++ b/potion-container/README.markdown
@@ -0,0 +1,5 @@
+# Potion container
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/co0kie/pen/QWwLYOo](https://codepen.io/co0kie/pen/QWwLYOo).
+
+CSS filter experiment
diff --git a/potion-container/dist/index.html b/potion-container/dist/index.html
new file mode 100644
index 0000000..7d52b74
--- /dev/null
+++ b/potion-container/dist/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Potion container</title>
+  <style>
+body{
+    display: flex;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    background-color: black;
+}
+</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="wall">
+  <div class="c">
+    <span class="l"></span>
+    <span class="b">
+      <i></i>
+      <i></i>
+    </span>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/potion-container/dist/script.js b/potion-container/dist/script.js
new file mode 100644
index 0000000..cfec77f
--- /dev/null
+++ b/potion-container/dist/script.js
@@ -0,0 +1 @@
+// https://dribbble.com/shots/8770456-Lavalamp
\ No newline at end of file
diff --git a/potion-container/dist/style.css b/potion-container/dist/style.css
new file mode 100644
index 0000000..4a5e142
--- /dev/null
+++ b/potion-container/dist/style.css
@@ -0,0 +1,183 @@
+:root {
+  --w: 125px;
+  --h: 210px;
+  --cColor: rgb(27, 255, 0);
+  --cColor2: rgb(24, 234, 255);
+}
+
+.wall {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.wall::before {
+  content: '';
+  position: absolute;
+  border-radius: 47% 53% 45% 55% / 67% 59% 41% 33%;
+  margin: auto;
+  width: 0;
+  height: 0;
+  left: 0;
+  right: -70px;
+  z-index: -1;
+  top: -30px;
+  opacity: 0.3;
+  bottom: -180px;
+  animation: s 9s linear infinite forwards;
+}
+.wall::after {
+  content: '';
+  position: absolute;
+  border-radius: 47% 53% 45% 55% / 67% 59% 41% 33%;
+  margin: auto;
+  width: 0;
+  height: 0;
+  left: -30px;
+  right: 0;
+  z-index: -1;
+  bottom: -180px;
+  opacity: 0.3;
+  top: 0;
+  animation: s 12s linear infinite forwards;
+  animation-direction: reverse;
+  animation-duration: 10s;
+}
+
+.c {
+  width: var(--w);
+  height: var(--h);
+  margin: auto;
+  border-width: 3px;
+  border-style: solid;
+  animation: b 9s linear infinite forwards;
+  border-radius: 50px;
+  position: relative;
+  overflow: hidden;
+  background-image: radial-gradient(rgba(0, 0, 0, 0.11) 65%, rgba(148, 13, 144, 0.99) 100%);
+}
+
+.l::after, .l::before {
+  content: '';
+  position: absolute;
+  animation: rotate1 10s linear infinite;
+  background-image: linear-gradient(45deg, #1bff00, #18eaff);
+  width: 194px;
+  height: 194px;
+  border-radius: 40% 60% 38% 62% / 53% 35% 65% 47%;
+  bottom: -178px;
+  right: -38px;
+  transform: scale(1.1) skew(20deg);
+  z-index: -1;
+  border: 1px solid #01d5ff;
+  opacity: 0.9;
+}
+.l::after {
+  animation-direction: reverse;
+  animation-duration: 20s;
+  right: -20px;
+  bottom: -180px;
+}
+
+.b {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  background-color: black;
+  z-index: -2;
+  filter: contrast(20);
+}
+.b i:nth-child(2)::before {
+  animation-duration: 25s;
+  width: 50px;
+  height: 50px;
+  background-image: linear-gradient(45deg, rgba(76, 249, 225, 0.64), #456bd4);
+}
+.b i:nth-child(2)::after {
+  animation-play-state: paused;
+  margin-top: 255px;
+  width: 80px;
+  height: 22px;
+}
+.b i::before {
+  content: '';
+  position: absolute;
+  border-radius: 47% 53% 45% 55% / 67% 59% 41% 33%;
+  background-image: linear-gradient(45deg, rgba(0, 196, 255, 0.64), #fdff70);
+  width: 40px;
+  height: 50px;
+  top: 20px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  z-index: 0;
+  filter: blur(10px);
+  animation: rotate1 9s linear infinite, yAxis 10s linear infinite alternate-reverse forwards, bs 5s linear infinite;
+}
+.b i::after {
+  content: '';
+  position: absolute;
+  border-radius: 47% 53% 45% 55% / 67% 59% 41% 33%;
+  background-image: linear-gradient(45deg, #7ffb4c, rgba(166, 255, 255, 0.84));
+  width: 60px;
+  height: 52px;
+  top: 70px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  z-index: 0;
+  filter: blur(10px);
+  animation: rotate1 8s linear infinite, yAxis 20s linear infinite alternate forwards;
+}
+
+@keyframes rotate1 {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes yAxis {
+  from {
+    top: -60px;
+    border-radius: 17% 53% 45% 55% / 67% 59% 41% 33%;
+  }
+  to {
+    top: 210px;
+    border-radius: 97% 33% 65% 55% / 87% 29% 41% 33%;
+  }
+}
+@keyframes b {
+  from {
+    border-color: var(--cColor);
+  }
+  50% {
+    border-color: var(--cColor2);
+  }
+  to {
+    border-color: var(--cColor);
+  }
+}
+@keyframes bs {
+  from {
+    box-shadow: 0px 0px 0px 2px #edff57;
+  }
+  50% {
+    box-shadow: 0px 0px 0px 10px #00c4ff;
+  }
+  to {
+    box-shadow: 0px 0px 0px 1px #edff57;
+  }
+}
+@keyframes s {
+  from {
+    box-shadow: 0 0 50px 40px #00BCD4;
+  }
+  50% {
+    box-shadow: 0 0 50px 45px #edff57;
+  }
+  to {
+    box-shadow: 0 0 50px 40px #00BCD4;
+  }
+}
\ No newline at end of file
diff --git a/potion-container/license.txt b/potion-container/license.txt
new file mode 100644
index 0000000..7647ab2
--- /dev/null
+++ b/potion-container/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by co0kie (https://codepen.io/co0kie/pen/QWwLYOo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/potion-container/src/index.html b/potion-container/src/index.html
new file mode 100644
index 0000000..b20cd64
--- /dev/null
+++ b/potion-container/src/index.html
@@ -0,0 +1,9 @@
+<div class="wall">
+  <div class="c">
+    <span class="l"></span>
+    <span class="b">
+      <i></i>
+      <i></i>
+    </span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/potion-container/src/script.js b/potion-container/src/script.js
new file mode 100644
index 0000000..cfec77f
--- /dev/null
+++ b/potion-container/src/script.js
@@ -0,0 +1 @@
+// https://dribbble.com/shots/8770456-Lavalamp
\ No newline at end of file
diff --git a/potion-container/src/style.scss b/potion-container/src/style.scss
new file mode 100644
index 0000000..17a4a0f
--- /dev/null
+++ b/potion-container/src/style.scss
@@ -0,0 +1,186 @@
+:root{
+    --w: 125px;
+    --h: 210px;
+    --cColor: rgb(27, 255, 0);
+    --cColor2: rgb(24, 234, 255);
+}
+.wall{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    &::before{
+        content: '';
+        position: absolute;
+        border-radius: 47% 53% 45% 55% / 67% 59% 41% 33%;
+        margin: auto;
+        width: 0;
+        height: 0;
+        left: 0;
+        right: -70px;
+        z-index: -1;
+        top: -30px;
+        opacity: 0.3;
+        bottom: -180px;
+        animation: s 9s linear infinite forwards;
+    }
+    &::after{
+        content: '';
+        position: absolute;
+        border-radius: 47% 53% 45% 55% / 67% 59% 41% 33%;
+        margin: auto;
+        width: 0;
+        height: 0;
+        left: -30px;
+        right: 0;
+        z-index: -1;
+        bottom: -180px;
+        opacity: 0.3;
+        top: 0;
+        animation: s 12s linear infinite forwards;
+        animation-direction: reverse;
+        animation-duration: 10s;
+    }
+}
+.c{
+    width: var(--w);
+    height: var(--h);
+    margin: auto;
+    border-width: 3px;
+    border-style: solid;
+    animation: b 9s linear infinite forwards;
+    border-radius: 50px;
+    position: relative;
+    overflow: hidden;
+    background-image: radial-gradient(rgba(0, 0, 0, 0.11) 65%,rgba(148, 13, 144, 0.99) 100%);
+}
+.l{
+    &::after,
+    &::before{
+        content: '';
+        position: absolute;
+        animation: rotate1 10s linear infinite;
+        background-image: linear-gradient(45deg, rgb(27, 255, 0), rgb(24, 234, 255));
+        width: 194px;
+        height: 194px;
+        border-radius: 40% 60% 38% 62% / 53% 35% 65% 47%;
+        bottom: -178px;
+        right: -38px;
+        transform: scale(1.1) skew(20deg);
+        z-index: -1;
+        border: 1px solid #01d5ff;
+        opacity: 0.9;
+    }
+    &::after{
+        animation-direction: reverse;
+        animation-duration: 20s;
+        right: -20px;
+        bottom: -180px;
+    }
+}
+.b{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    background-color: black;
+    z-index: -2;
+    filter: contrast(20);
+    i:nth-child(2){
+        &::before{
+            animation-duration: 25s;
+            width: 50px;
+            height: 50px;
+            background-image: linear-gradient(45deg, rgba(76, 249, 225, 0.64), rgb(69, 107, 212));
+        }
+        &::after{
+            animation-play-state: paused;
+            margin-top: 255px;
+            width: 80px;
+            height: 22px;
+        }
+    }
+    i{
+        &::before{
+            content: '';
+            position: absolute;
+            border-radius: 47% 53% 45% 55% / 67% 59% 41% 33%;
+            background-image: linear-gradient(45deg, rgba(0, 196, 255, 0.64), rgb(253, 255, 112));
+            width: 40px;
+            height: 50px;
+            top: 20px;
+            left: 0;
+            right: 0;
+            margin: auto;
+            z-index: 0;
+            filter: blur(10px);
+            animation: rotate1 9s linear infinite, yAxis 10s linear infinite alternate-reverse forwards, bs 5s linear infinite;
+        }
+        &::after{
+            content: '';
+            position: absolute;
+            border-radius: 47% 53% 45% 55% / 67% 59% 41% 33%;
+            background-image: linear-gradient(45deg, #7ffb4c, rgba(166, 255, 255, 0.84));
+            width: 60px;
+            height: 52px;
+            top: 70px;
+            left: 0;
+            right: 0;
+            margin: auto;
+            z-index: 0;
+            filter: blur(10px);
+            animation: rotate1 8s linear infinite, yAxis 20s linear infinite alternate forwards;
+        }
+    }
+}
+
+@keyframes rotate1{
+    from{
+        transform: rotate(0);
+    }
+    to{
+        transform: rotate(360deg);
+    }
+}
+@keyframes yAxis{
+    from{
+        top: -60px;
+        border-radius: 17% 53% 45% 55% / 67% 59% 41% 33%;
+    }
+    to{
+        top: 210px;
+        border-radius: 97% 33% 65% 55% / 87% 29% 41% 33%;
+    }
+}
+@keyframes b{
+    from{
+        border-color: var(--cColor);
+    }
+    50%{
+        border-color: var(--cColor2);
+    }
+    to{
+        border-color: var(--cColor);
+    }
+}
+@keyframes bs{
+    from{
+        box-shadow: 0px 0px 0px 2px rgb(237, 255, 87);
+    }
+    50%{
+        box-shadow: 0px 0px 0px 10px #00c4ff;
+    }
+    to{
+        box-shadow: 0px 0px 0px 1px rgb(237, 255, 87);
+    }
+}
+@keyframes s{
+    from{
+        box-shadow: 0 0 50px 40px #00BCD4;
+    }
+    50%{
+        box-shadow: 0 0 50px 45px rgb(237, 255, 87);
+    }
+    to{
+        box-shadow: 0 0 50px 40px #00BCD4;
+    }
+}
\ No newline at end of file
diff --git a/practice-canvas2d/README.markdown b/practice-canvas2d/README.markdown
new file mode 100644
index 0000000..d1957ab
--- /dev/null
+++ b/practice-canvas2d/README.markdown
@@ -0,0 +1,5 @@
+# Practice / Canvas2D
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/toshiya-marukubo/pen/OJjjmqa](https://codepen.io/toshiya-marukubo/pen/OJjjmqa).
+
+
diff --git a/practice-canvas2d/dist/index.html b/practice-canvas2d/dist/index.html
new file mode 100644
index 0000000..28711cf
--- /dev/null
+++ b/practice-canvas2d/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Practice / Canvas2D</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js'></script><script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/practice-canvas2d/dist/script.js b/practice-canvas2d/dist/script.js
new file mode 100644
index 0000000..25a2759
--- /dev/null
+++ b/practice-canvas2d/dist/script.js
@@ -0,0 +1,345 @@
+import {Ease} from 'https://assets.codepen.io/3919397/ease.js';
+import {Utils} from 'https://assets.codepen.io/3919397/utilities.js';
+
+let gui, canvas, c, width, height, frameSize, id, ease, shapes, size, scale, num, maxDist, hexPoints;
+
+const setupGui = () => {
+  gui = new dat.GUI();
+  
+  gui.params = {
+    timeScale: 0.0005,
+    ease: 'easeInOutQuart',
+    number: 1,
+    scale: 150,
+    frame: false,
+    start: () => start(),
+    stop: () => stop()
+  };
+
+  gui.ctrls = {
+    timeScale: gui.add(gui.params, 'timeScale', 0.0001, 0.005, 0.0001),
+    ease: gui.add(gui.params, 'ease', Ease.returnEaseType())
+      .onChange(() => initialize()),
+    number: gui.add(gui.params, 'number', 1, 30, 1)
+      .onChange(() => initialize()),
+    scale: gui.add(gui.params, 'scale', 1, 500, 1)
+      .onChange(() => initialize()),
+    frame: gui.add(gui.params, 'frame', false),
+    start: gui.add(gui.params, 'start'),
+    stop: gui.add(gui.params, 'stop')
+  };
+  
+  gui.close();
+};
+
+const addFrame = () => {
+  c.rect(
+    width / 2 - frameSize / 2,
+    height / 2 - frameSize / 2,
+    frameSize,
+    frameSize
+  );
+  c.clip();
+};
+
+const setupCanvas = () => {
+  canvas = document.createElement('canvas');
+  document.getElementsByTagName('body')[0].appendChild(canvas);
+  c = canvas.getContext('2d');
+};
+
+const initialize = () => {
+  if (id) {
+    cancelAnimationFrame(id);
+  }
+
+  width = canvas.width = window.innerWidth;
+  height = canvas.height = window.innerHeight;
+  
+  ease = Ease.returnEaseFunc(gui.params.ease);
+  
+  shapes = new Array();
+  scale = gui.params.scale;
+  num = gui.params.number;
+  frameSize = Math.min(width * 0.9, height * 0.9);
+  maxDist = 0;
+    
+  hexPoints = getPolygonPoints(360, 4);
+  shapes = getSquareGrid(num);
+  
+  draw(0);
+};
+
+const getSquareGrid = (num) => {
+  const vectors = new Array();
+  
+  for (let x = -num; x <= num; x++) {
+    for (let y = -num; y <= num; y++) {
+      vectors.push([x, y]);
+    }
+  }
+  
+  const tmp = new Array();
+  
+  for (let i = 0; i < vectors.length; i++) {
+    const params = {};
+    const x = vectors[i][0] * scale;
+    const y = vectors[i][1] * scale;
+    const d = Math.sqrt(x * x + y * y);
+    
+    params.x = x;
+    params.y = y;
+    params.d = d;
+    params.i = i;
+    
+    maxDist = Math.max(d, maxDist);
+    
+    tmp.push(params);
+  }
+  
+  size = Math.floor(scale * Math.sqrt(2) / 2);
+  //size = scale / 2;
+  
+  return tmp;
+};
+
+const getHexGrid = (num) => {
+  const vectors = new Array();
+  
+  for (let x = -num; x <= num; x++) {
+    for (let y = -num; y <= num; y++) {
+      for (let z = -num; z <= num; z++) {
+        if (x + y + z === 0) {
+          vectors.push([x, y]);
+        }
+      } 
+    }
+  }
+  
+  const tmp = new Array();
+  
+  for (let i = 0; i < vectors.length; i++) {
+    const params = {};
+    const x = Math.sqrt(3) * (vectors[i][0] + vectors[i][1] / 2) / 2 * scale;
+    const y = 3 / 2 * vectors[i][1] / 2 * scale;
+    const d = Math.sqrt(x * x + y * y);
+    
+    params.x = x;
+    params.y = y;
+    params.d = d;
+    
+    maxDist = Math.max(d, maxDist);
+    
+    tmp.push(params);
+  }
+  
+  size = Math.sqrt(3) * (scale / 2) / 2;
+  
+  return tmp;
+};
+
+const getSquareGrid2 = (num) => {
+  const tmp = new Array();  
+  const ajust = num * scale / 2 - scale / 2;
+  
+  for (let y = 0; y < num; y++) {
+    for (let x = 0; x < num; x++) {
+      const params = {};
+      const i = y * num + x;
+      
+      let ny = scale * y - ajust;
+      let nx = scale * x - ajust;
+      
+      if (y % 2 === 0) {
+        nx += scale / 2;
+      }
+      
+      const d = Math.sqrt(nx * nx + ny * ny);
+      
+      params.x = nx;
+      params.y = ny;
+      params.d = d;
+      params.i = i;
+      params.col = x;
+      params.row = y;
+      
+      maxDist = Math.max(dist, maxDist);
+      
+      tmp.push(params);
+    }
+  }
+  
+  size = scale / 2;
+  
+  return tmp;
+};
+
+const getCircleGrid = (num) => {
+  const tmp = new Array();
+  
+  for (let k = 1; k <= num; k++) {
+    for (let j = 0; j < k * num; j++) {
+      const params = {};
+      const i = k * k * num + j;
+      const x = Math.cos(Math.PI * 2 / (num * k) * j) * k * scale * 0.4;
+      const y = Math.sin(Math.PI * 2 / (num * k) * j) * k * scale * 0.4;
+      const d = Math.sqrt(x * x + y * y);
+      
+      params.x = x;
+      params.y = y;
+      params.d = d;
+      params.i = i;
+      
+      maxDist = Math.max(d, maxDist);
+      
+      tmp.push(params);
+    }
+  }
+  
+  size = Math.floor(scale * 0.4 * 2 * Math.PI / num / 2);
+  
+  return tmp;
+};
+
+const getPolygonPoints = (number, poly) => {
+  const tmp = new Array();
+  
+  for (let j = 0; j < poly; j++) {
+    for (let i = 0; i < number / poly; i++) {
+      const x = Math.cos(j / poly * Math.PI * 2);
+      const y = Math.sin(j / poly * Math.PI * 2);
+      
+      let nx, ny;
+      
+      if (j === poly - 1) {
+        nx = Math.cos(0);
+        ny = Math.sin(0);
+      } else {
+        nx = Math.cos((j + 1) / poly * Math.PI * 2);
+        ny = Math.sin((j + 1) / poly * Math.PI * 2);
+      }
+      
+      const sx = x + (nx - x) * (i / (number / poly));
+      const sy = y + (ny - y) * (i / (number / poly));
+      
+      tmp.push([sx, sy]);
+    } 
+  }
+  
+  return tmp;
+};
+
+const getNewPoints = (t) => {
+  const tmp = new Array();
+  
+  for (let i = 0; i < number; i++) {
+    let x, y;
+    
+    tmp.push([x, y]);
+  }
+  
+  return tmp;
+};
+
+const drawPolygon = (x, y, num, size, fillStyle, strokeStyle) => {
+  c.save();
+  
+  c.fillStyle = fillStyle;
+  c.strokeStyle = strokeStyle;
+  
+  c.beginPath();
+  for (let i = 0; i < num; i++) {
+    const nx = Math.cos(i / num * Math.PI * 2) * size + x;
+    const ny = Math.sin(i / num * Math.PI * 2) * size + y;
+    
+    if (i === 0) {
+      c.moveTo(nx, ny);
+    } else {
+      c.lineTo(nx, ny);
+    }
+  }
+  c.closePath();
+  //c.fill();
+  c.stroke();
+  
+  c.restore();
+};
+
+const draw = (t) => {
+  t *= gui.params.timeScale;
+  
+  c.save();
+  c.fillStyle = 'rgba(0, 0, 0, 0.03)';
+  c.fillRect(0, 0, width, height); 
+  //c.clearRect(0, 0, width, height);
+  
+  if (gui.params.frame) addFrame();
+  
+  c.translate(width / 2, height / 2);
+  
+  c.lineCap = 'round';
+  c.lineWidth = 30;
+  
+  for (let i = 0; i < shapes.length; i++) {
+    let scaledT = (t - (shapes[i].d / maxDist)) % 1;
+    scaledT = ease(Math.abs(scaledT));
+    
+    const x = shapes[i].x;
+    const y = shapes[i].y;
+    
+    c.save();
+    
+    c.translate(x, y);
+    c.rotate(Math.PI / 2);
+    c.translate(-x, -y);
+    
+    let index = Math.floor(Utils.map(scaledT, 0, 1, 0, hexPoints.length - 1));
+    let endex = Math.ceil(Utils.map(scaledT, 0, 1, index + 1, hexPoints.length - 1));
+
+    c.strokeStyle = `hsl(${360 * scaledT}, 80%, 60%)`;
+    
+    c.translate(x, y);
+    c.beginPath();
+    c.moveTo(hexPoints[index][0] * size, hexPoints[index][1] * size);
+    for (let i = index; i < endex; i++) {
+      if (endex === hexPoints.length - 1) {
+        c.lineTo(hexPoints[0][0] * size, hexPoints[0][1] * size);
+      } else {
+        c.lineTo(hexPoints[i][0] * size, hexPoints[i][1] * size);
+      }
+    }
+    c.stroke();
+    
+    c.restore();
+  }
+  
+  c.restore();
+  
+  id = requestAnimationFrame(draw);
+};
+
+const start = () => {
+  initialize();
+};
+
+const stop = () => {
+  if (id) {
+    cancelAnimationFrame(id);
+    id = null;
+  }
+};
+
+(() => {
+  window.addEventListener('DOMContentLoaded', () => {
+    console.clear();
+
+    setupGui();
+    setupCanvas();
+    
+    initialize();
+  });
+
+  window.addEventListener('resize', () => {
+    initialize();
+  });
+})();
\ No newline at end of file
diff --git a/practice-canvas2d/dist/style.css b/practice-canvas2d/dist/style.css
new file mode 100644
index 0000000..b5ac5b4
--- /dev/null
+++ b/practice-canvas2d/dist/style.css
@@ -0,0 +1,22 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+html,
+body {
+  height: 100%;
+  width: 100%;
+  font-family: serif;
+  overflow: hidden;
+  position: relative;
+}
+canvas {
+  display: block;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background: #000;
+}
\ No newline at end of file
diff --git a/practice-canvas2d/license.txt b/practice-canvas2d/license.txt
new file mode 100644
index 0000000..0cc8d28
--- /dev/null
+++ b/practice-canvas2d/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Toshiya Marukubo (https://codepen.io/toshiya-marukubo/pen/OJjjmqa)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/practice-canvas2d/src/index.pug b/practice-canvas2d/src/index.pug
new file mode 100644
index 0000000..e69de29
diff --git a/practice-canvas2d/src/script.js b/practice-canvas2d/src/script.js
new file mode 100644
index 0000000..25a2759
--- /dev/null
+++ b/practice-canvas2d/src/script.js
@@ -0,0 +1,345 @@
+import {Ease} from 'https://assets.codepen.io/3919397/ease.js';
+import {Utils} from 'https://assets.codepen.io/3919397/utilities.js';
+
+let gui, canvas, c, width, height, frameSize, id, ease, shapes, size, scale, num, maxDist, hexPoints;
+
+const setupGui = () => {
+  gui = new dat.GUI();
+  
+  gui.params = {
+    timeScale: 0.0005,
+    ease: 'easeInOutQuart',
+    number: 1,
+    scale: 150,
+    frame: false,
+    start: () => start(),
+    stop: () => stop()
+  };
+
+  gui.ctrls = {
+    timeScale: gui.add(gui.params, 'timeScale', 0.0001, 0.005, 0.0001),
+    ease: gui.add(gui.params, 'ease', Ease.returnEaseType())
+      .onChange(() => initialize()),
+    number: gui.add(gui.params, 'number', 1, 30, 1)
+      .onChange(() => initialize()),
+    scale: gui.add(gui.params, 'scale', 1, 500, 1)
+      .onChange(() => initialize()),
+    frame: gui.add(gui.params, 'frame', false),
+    start: gui.add(gui.params, 'start'),
+    stop: gui.add(gui.params, 'stop')
+  };
+  
+  gui.close();
+};
+
+const addFrame = () => {
+  c.rect(
+    width / 2 - frameSize / 2,
+    height / 2 - frameSize / 2,
+    frameSize,
+    frameSize
+  );
+  c.clip();
+};
+
+const setupCanvas = () => {
+  canvas = document.createElement('canvas');
+  document.getElementsByTagName('body')[0].appendChild(canvas);
+  c = canvas.getContext('2d');
+};
+
+const initialize = () => {
+  if (id) {
+    cancelAnimationFrame(id);
+  }
+
+  width = canvas.width = window.innerWidth;
+  height = canvas.height = window.innerHeight;
+  
+  ease = Ease.returnEaseFunc(gui.params.ease);
+  
+  shapes = new Array();
+  scale = gui.params.scale;
+  num = gui.params.number;
+  frameSize = Math.min(width * 0.9, height * 0.9);
+  maxDist = 0;
+    
+  hexPoints = getPolygonPoints(360, 4);
+  shapes = getSquareGrid(num);
+  
+  draw(0);
+};
+
+const getSquareGrid = (num) => {
+  const vectors = new Array();
+  
+  for (let x = -num; x <= num; x++) {
+    for (let y = -num; y <= num; y++) {
+      vectors.push([x, y]);
+    }
+  }
+  
+  const tmp = new Array();
+  
+  for (let i = 0; i < vectors.length; i++) {
+    const params = {};
+    const x = vectors[i][0] * scale;
+    const y = vectors[i][1] * scale;
+    const d = Math.sqrt(x * x + y * y);
+    
+    params.x = x;
+    params.y = y;
+    params.d = d;
+    params.i = i;
+    
+    maxDist = Math.max(d, maxDist);
+    
+    tmp.push(params);
+  }
+  
+  size = Math.floor(scale * Math.sqrt(2) / 2);
+  //size = scale / 2;
+  
+  return tmp;
+};
+
+const getHexGrid = (num) => {
+  const vectors = new Array();
+  
+  for (let x = -num; x <= num; x++) {
+    for (let y = -num; y <= num; y++) {
+      for (let z = -num; z <= num; z++) {
+        if (x + y + z === 0) {
+          vectors.push([x, y]);
+        }
+      } 
+    }
+  }
+  
+  const tmp = new Array();
+  
+  for (let i = 0; i < vectors.length; i++) {
+    const params = {};
+    const x = Math.sqrt(3) * (vectors[i][0] + vectors[i][1] / 2) / 2 * scale;
+    const y = 3 / 2 * vectors[i][1] / 2 * scale;
+    const d = Math.sqrt(x * x + y * y);
+    
+    params.x = x;
+    params.y = y;
+    params.d = d;
+    
+    maxDist = Math.max(d, maxDist);
+    
+    tmp.push(params);
+  }
+  
+  size = Math.sqrt(3) * (scale / 2) / 2;
+  
+  return tmp;
+};
+
+const getSquareGrid2 = (num) => {
+  const tmp = new Array();  
+  const ajust = num * scale / 2 - scale / 2;
+  
+  for (let y = 0; y < num; y++) {
+    for (let x = 0; x < num; x++) {
+      const params = {};
+      const i = y * num + x;
+      
+      let ny = scale * y - ajust;
+      let nx = scale * x - ajust;
+      
+      if (y % 2 === 0) {
+        nx += scale / 2;
+      }
+      
+      const d = Math.sqrt(nx * nx + ny * ny);
+      
+      params.x = nx;
+      params.y = ny;
+      params.d = d;
+      params.i = i;
+      params.col = x;
+      params.row = y;
+      
+      maxDist = Math.max(dist, maxDist);
+      
+      tmp.push(params);
+    }
+  }
+  
+  size = scale / 2;
+  
+  return tmp;
+};
+
+const getCircleGrid = (num) => {
+  const tmp = new Array();
+  
+  for (let k = 1; k <= num; k++) {
+    for (let j = 0; j < k * num; j++) {
+      const params = {};
+      const i = k * k * num + j;
+      const x = Math.cos(Math.PI * 2 / (num * k) * j) * k * scale * 0.4;
+      const y = Math.sin(Math.PI * 2 / (num * k) * j) * k * scale * 0.4;
+      const d = Math.sqrt(x * x + y * y);
+      
+      params.x = x;
+      params.y = y;
+      params.d = d;
+      params.i = i;
+      
+      maxDist = Math.max(d, maxDist);
+      
+      tmp.push(params);
+    }
+  }
+  
+  size = Math.floor(scale * 0.4 * 2 * Math.PI / num / 2);
+  
+  return tmp;
+};
+
+const getPolygonPoints = (number, poly) => {
+  const tmp = new Array();
+  
+  for (let j = 0; j < poly; j++) {
+    for (let i = 0; i < number / poly; i++) {
+      const x = Math.cos(j / poly * Math.PI * 2);
+      const y = Math.sin(j / poly * Math.PI * 2);
+      
+      let nx, ny;
+      
+      if (j === poly - 1) {
+        nx = Math.cos(0);
+        ny = Math.sin(0);
+      } else {
+        nx = Math.cos((j + 1) / poly * Math.PI * 2);
+        ny = Math.sin((j + 1) / poly * Math.PI * 2);
+      }
+      
+      const sx = x + (nx - x) * (i / (number / poly));
+      const sy = y + (ny - y) * (i / (number / poly));
+      
+      tmp.push([sx, sy]);
+    } 
+  }
+  
+  return tmp;
+};
+
+const getNewPoints = (t) => {
+  const tmp = new Array();
+  
+  for (let i = 0; i < number; i++) {
+    let x, y;
+    
+    tmp.push([x, y]);
+  }
+  
+  return tmp;
+};
+
+const drawPolygon = (x, y, num, size, fillStyle, strokeStyle) => {
+  c.save();
+  
+  c.fillStyle = fillStyle;
+  c.strokeStyle = strokeStyle;
+  
+  c.beginPath();
+  for (let i = 0; i < num; i++) {
+    const nx = Math.cos(i / num * Math.PI * 2) * size + x;
+    const ny = Math.sin(i / num * Math.PI * 2) * size + y;
+    
+    if (i === 0) {
+      c.moveTo(nx, ny);
+    } else {
+      c.lineTo(nx, ny);
+    }
+  }
+  c.closePath();
+  //c.fill();
+  c.stroke();
+  
+  c.restore();
+};
+
+const draw = (t) => {
+  t *= gui.params.timeScale;
+  
+  c.save();
+  c.fillStyle = 'rgba(0, 0, 0, 0.03)';
+  c.fillRect(0, 0, width, height); 
+  //c.clearRect(0, 0, width, height);
+  
+  if (gui.params.frame) addFrame();
+  
+  c.translate(width / 2, height / 2);
+  
+  c.lineCap = 'round';
+  c.lineWidth = 30;
+  
+  for (let i = 0; i < shapes.length; i++) {
+    let scaledT = (t - (shapes[i].d / maxDist)) % 1;
+    scaledT = ease(Math.abs(scaledT));
+    
+    const x = shapes[i].x;
+    const y = shapes[i].y;
+    
+    c.save();
+    
+    c.translate(x, y);
+    c.rotate(Math.PI / 2);
+    c.translate(-x, -y);
+    
+    let index = Math.floor(Utils.map(scaledT, 0, 1, 0, hexPoints.length - 1));
+    let endex = Math.ceil(Utils.map(scaledT, 0, 1, index + 1, hexPoints.length - 1));
+
+    c.strokeStyle = `hsl(${360 * scaledT}, 80%, 60%)`;
+    
+    c.translate(x, y);
+    c.beginPath();
+    c.moveTo(hexPoints[index][0] * size, hexPoints[index][1] * size);
+    for (let i = index; i < endex; i++) {
+      if (endex === hexPoints.length - 1) {
+        c.lineTo(hexPoints[0][0] * size, hexPoints[0][1] * size);
+      } else {
+        c.lineTo(hexPoints[i][0] * size, hexPoints[i][1] * size);
+      }
+    }
+    c.stroke();
+    
+    c.restore();
+  }
+  
+  c.restore();
+  
+  id = requestAnimationFrame(draw);
+};
+
+const start = () => {
+  initialize();
+};
+
+const stop = () => {
+  if (id) {
+    cancelAnimationFrame(id);
+    id = null;
+  }
+};
+
+(() => {
+  window.addEventListener('DOMContentLoaded', () => {
+    console.clear();
+
+    setupGui();
+    setupCanvas();
+    
+    initialize();
+  });
+
+  window.addEventListener('resize', () => {
+    initialize();
+  });
+})();
\ No newline at end of file
diff --git a/practice-canvas2d/src/style.styl b/practice-canvas2d/src/style.styl
new file mode 100644
index 0000000..5aa1af5
--- /dev/null
+++ b/practice-canvas2d/src/style.styl
@@ -0,0 +1,20 @@
+*
+  margin: 0;
+  padding: 0;
+
+html, body
+  height: 100%;
+  width: 100%;
+  font-family: serif;
+  overflow: hidden;
+  position: relative;
+  
+canvas
+  display: block;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background: #000;
\ No newline at end of file
diff --git a/procedural-pathways/README.markdown b/procedural-pathways/README.markdown
new file mode 100644
index 0000000..0b48f3c
--- /dev/null
+++ b/procedural-pathways/README.markdown
@@ -0,0 +1,5 @@
+# Procedural Pathways
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/jOBMWQW](https://codepen.io/cobra_winfrey/pen/jOBMWQW).
+
+generative CSS stairways
diff --git a/procedural-pathways/dist/index.html b/procedural-pathways/dist/index.html
new file mode 100644
index 0000000..57158d7
--- /dev/null
+++ b/procedural-pathways/dist/index.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Procedural Pathways</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id='wrap'>
+  <div class='row'>
+    <div class='rowwrap'>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+    </div>
+  </div>
+  <div class='row'>
+    <div class='rowwrap'>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+    </div>
+  </div>
+  <div class='row'>
+    <div class='rowwrap'>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+    </div>
+  </div>
+  <div class='row'>
+    <div class='rowwrap'>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+    </div>
+  </div>
+  <div class='row'>
+    <div class='rowwrap'>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+      <div class='cell'>
+        <div class='mask'></div>
+        <div class='inner'></div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/procedural-pathways/dist/script.js b/procedural-pathways/dist/script.js
new file mode 100644
index 0000000..edac37f
--- /dev/null
+++ b/procedural-pathways/dist/script.js
@@ -0,0 +1,25 @@
+function draw(){
+  document.querySelectorAll(".row").forEach(row => { 
+    row.style.setProperty("--shift",((Math.floor(Math.random() * 20) - 10)));
+  });
+  document.body.style.setProperty("--rotation",((Math.floor(Math.random() * 360) + 1)) + 'deg');
+  document.querySelectorAll(".cell").forEach(cell => { 
+    cell.style.setProperty("--rotation",((Math.floor(Math.random() * 360) + 1)) + 'deg');
+    cell.style.setProperty("--shift",((Math.floor(Math.random() * 3) + 2)));
+    for (var i = 0; i < 10; i++) {
+      cell.classList.remove('class' + i);
+      cell.classList.remove('eye' + i);
+      document.body.classList.remove('color' + i);
+    }
+    document.body.classList.add('color' + ((Math.floor(Math.random() * 4) + 0)));
+    cell.classList.add('class' + ((Math.floor(Math.random() * 4) + 0)));
+    cell.classList.add('eye' + ((Math.floor(Math.random() * 10) + 0)));
+  });
+};
+  
+draw();
+
+document.addEventListener('click', function (event) {
+document.body.classList.toggle('loading');
+  setTimeout(() => { draw(); document.body.classList.toggle('loading'); }, 1000);
+}, false);
\ No newline at end of file
diff --git a/procedural-pathways/dist/style.css b/procedural-pathways/dist/style.css
new file mode 100644
index 0000000..5965476
--- /dev/null
+++ b/procedural-pathways/dist/style.css
@@ -0,0 +1,407 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+body:before {
+  content: 'click to regenerate';
+  position: absolute;
+  font-family: Futura;
+  font-size: 10px;
+  bottom: 5px;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  color: #151223;
+}
+body.color1 #wrap:before {
+  background: radial-gradient(ellipse at top, #ffffff 25%, #deb84d 125%);
+}
+body.color2 #wrap:before {
+  background: radial-gradient(ellipse at top, #ffffff 25%, #7d2cac 125%);
+}
+body.color3 #wrap:before {
+  background: radial-gradient(ellipse at top, #deb84d 25%, #ffffff 125%);
+}
+body.color4 #wrap:before {
+  background: radial-gradient(ellipse at top, #deb84d 25%, #151223 125%);
+}
+body.loading #wrap:before {
+  opacity: 0;
+}
+body.loading #wrap .row:before {
+  transform: translateX(0);
+  opacity: 1;
+}
+body.loading #wrap .row:nth-of-type(even):before {
+  transform: translateX(0);
+}
+body #wrap {
+  zoom: 0.75;
+  cursor: pointer;
+  width: 800px;
+  min-width: 800px;
+  min-height: 800px;
+  height: 800px;
+  background: #151223;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  position: relative;
+  box-shadow: 0 0 0 20px #fff, 0 0 1px 20.5px #f1eff7, 0 40px 100px -50px #151223;
+}
+body #wrap:before, body #wrap:after {
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: radial-gradient(ellipse at top, #ffffff 25%, #deb84d 125%);
+  z-index: 15;
+  transform: rotate(calc(var(--rotation) * 90));
+  mix-blend-mode: overlay;
+  opacity: 1;
+  transition: opacity 1s ease-in-out;
+}
+body #wrap:after {
+  -webkit-mask: url("data:image/png;base64,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");
+}
+body #wrap .row {
+  transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  position: relative;
+  box-sizing: border-box;
+  z-index: 1;
+  background: #151223;
+}
+body #wrap .row:before {
+  content: '';
+  position: absolute;
+  z-index: 10;
+  width: 300%;
+  left: -75%;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), #151223 25%, #151223 75%, rgba(255, 255, 255, 0));
+  height: 105%;
+  top: -2.5%;
+  transition: 0.5s ease-in-out;
+  transform: translateX(-100%);
+  opacity: 0;
+}
+body #wrap .row:nth-of-type(1):before {
+  transition-delay: 0.05s;
+}
+body #wrap .row:nth-of-type(2):before {
+  transition-delay: 0.1s;
+}
+body #wrap .row:nth-of-type(3):before {
+  transition-delay: 0.15s;
+}
+body #wrap .row:nth-of-type(4):before {
+  transition-delay: 0.2s;
+}
+body #wrap .row:nth-of-type(5):before {
+  transition-delay: 0.25s;
+}
+body #wrap .row .rowwrap {
+  -webkit-box-reflect: left -1px;
+}
+body #wrap .row:nth-of-type(even) {
+  z-index: 9;
+}
+body #wrap .row:nth-of-type(even):before {
+  transform: translateX(100%);
+}
+body #wrap .row .rowwrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: calc((var(--shift) * 5px) + 50px);
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  filter: blur(0.5px);
+}
+body #wrap .row * {
+  transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+body #wrap .row *:before, body #wrap .row *:after {
+  transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+body #wrap .row:nth-of-type(1) {
+  z-index: 1;
+}
+body #wrap .row:nth-of-type(2) {
+  z-index: 2;
+}
+body #wrap .row:nth-of-type(3) {
+  z-index: 3;
+}
+body #wrap .row:nth-of-type(4) {
+  z-index: 4;
+}
+body #wrap .row:nth-of-type(5) {
+  z-index: 5;
+}
+body #wrap .row .cell {
+  position: relative;
+  background: #151223;
+  z-index: 0;
+}
+body #wrap .row .cell:nth-of-type(even) {
+  transform: scaleX(-1);
+}
+body #wrap .row .cell.class0.eye1 .mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 9;
+}
+body #wrap .row .cell.class0.eye1 .mask:before, body #wrap .row .cell.class0.eye1 .mask:after {
+  content: '';
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  background: radial-gradient(circle at center, #151223 5px, #5cbbdd 5px, #207999 15px, #ffffff 10px, #ffffff 20px, #aaaaaa) calc(var(--shift) * 2px) calc(var(--shift) * 2px);
+  border-radius: 100%;
+  left: calc(50% - 30px);
+  bottom: 55px;
+  transform: rotate(var(--rotation));
+}
+body #wrap .row .cell.class0.eye1 .mask:before {
+  background: linear-gradient(to top, #151223 -50%, rgba(255, 255, 255, 0));
+  transform-origin: 25% 100%;
+  transform: skewX(-35deg) scaleY(0.75) scaleX(1.5);
+}
+body #wrap .row .cell.class0:nth-of-type(even) .mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  box-shadow: inset 0 20px 0 #151223;
+  z-index: 9;
+  display: block;
+}
+body #wrap .row .cell.class0:nth-of-type(even) + .cell.class2 .mask {
+  box-shadow: inset 0 20px 0 #151223;
+  left: -20px;
+}
+body #wrap .row .cell.class0:nth-of-type(even) + .cell.class2 .mask:before, body #wrap .row .cell.class0:nth-of-type(even) + .cell.class2 .mask:after {
+  margin-left: 20px;
+}
+body #wrap .row .cell.class0:nth-of-type(even) + .class1 .mask:before, body #wrap .row .cell.class0:nth-of-type(even) + .class1 .mask:after, body #wrap .row .cell.class0:nth-of-type(even) + .class3 .mask:before, body #wrap .row .cell.class0:nth-of-type(even) + .class3 .mask:after {
+  content: '';
+  position: absolute;
+  width: 40px;
+  height: 25px;
+  background: #151223;
+  left: 70px;
+  top: 10px;
+}
+body #wrap .row .cell.class0:nth-of-type(even) + .class1 .mask:after, body #wrap .row .cell.class0:nth-of-type(even) + .class3 .mask:after {
+  width: 20px;
+  left: 95px;
+  top: 25px;
+  height: 20px;
+  transform: skewY(-45deg);
+}
+body #wrap .row .cell.class0:nth-of-type(even) + .cell .mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  box-shadow: inset 0 20px 0 #151223;
+  z-index: 9;
+  display: block;
+}
+body #wrap .row .cell.class0 .inner:before, body #wrap .row .cell.class2 .inner:before {
+  background: linear-gradient(-135deg, #151223 30px, rgba(255, 255, 255, 0) 30px) -40px -2px/80px 80px no-repeat, linear-gradient(-135deg, rgba(255, 255, 255, 0) 30px, #151223 30px) -40px calc(100% + 40px)/80px 80px no-repeat, linear-gradient(to bottom, rgba(255, 255, 255, 0) 80px, #7d2cac 80px) 100% 50%/75% 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0% 100%/25% 75% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0% 0%/25% 75% no-repeat;
+}
+body #wrap .row .cell.class0 .inner:after, body #wrap .row .cell.class2 .inner:after {
+  background: linear-gradient(-135deg, #151223 30px, rgba(255, 255, 255, 0) 30px) -40px -2px/80px 80px no-repeat, linear-gradient(-135deg, rgba(255, 255, 255, 0) 30px, #151223 30px) -40px calc(100% + 40px)/80px 80px no-repeat, linear-gradient(to bottom, rgba(255, 255, 255, 0) 80px, #deb84d 80px, #deb84d 120px, #7d2cac 120px) 100% 50%/75% 100% no-repeat, linear-gradient(to bottom, #7d2cac 40px, #151223) 0% 100%/25% 75% no-repeat, linear-gradient(to bottom, #deb84d, #deb84d) 0% 0%/25% 75% no-repeat;
+}
+body #wrap .row .cell.class1 {
+  z-index: 1;
+}
+body #wrap .row .cell.class1:before {
+  content: '';
+  position: absolute;
+  width: 20%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  height: 20px;
+  bottom: 0;
+  background: #151223;
+  z-index: 9;
+}
+body #wrap .row .cell.class2 {
+  z-index: 3;
+}
+body #wrap .row .cell.class2:nth-of-type(3n):before, body #wrap .row .cell.class2:nth-of-type(3n):after, body #wrap .row .cell.class2:nth-of-type(3n) .mask {
+  transform: translateX(20px);
+}
+body #wrap .row .cell.class2:nth-of-type(3n) + .cell.class2 .mask {
+  background: linear-gradient(to top, #151223 -25%, rgba(255, 255, 255, 0) 50%), linear-gradient(to bottom, #151223 40px, rgba(255, 255, 255, 0) 40px), linear-gradient(to left, #7d2cac, #7d2cac);
+}
+body #wrap .row .cell.class2 + .cell.class0, body #wrap .row .cell.class2 + .cell.class2 {
+  z-index: 0;
+}
+body #wrap .row .cell.class2 + .cell.class0:before, body #wrap .row .cell.class2 + .cell.class0:after, body #wrap .row .cell.class2 + .cell.class2:before, body #wrap .row .cell.class2 + .cell.class2:after {
+  display: none;
+}
+body #wrap .row .cell.class2 + .cell.class0:nth-of-type(odd), body #wrap .row .cell.class2 + .cell.class2:nth-of-type(odd) {
+  transform: translateX(40px);
+}
+body #wrap .row .cell.class2 + .cell.class0:nth-of-type(odd) .mask, body #wrap .row .cell.class2 + .cell.class2:nth-of-type(odd) .mask {
+  display: none;
+}
+body #wrap .row .cell.class2 + .cell.class0:nth-of-type(odd):nth-of-type(5n), body #wrap .row .cell.class2 + .cell.class2:nth-of-type(odd):nth-of-type(5n) {
+  transform: translateX(40px);
+}
+body #wrap .row .cell.class2 + .cell.class0:nth-of-type(odd):nth-of-type(5n):before, body #wrap .row .cell.class2 + .cell.class2:nth-of-type(odd):nth-of-type(5n):before {
+  left: -40px;
+  width: 40px;
+}
+body #wrap .row .cell.class2 + .cell.class0:nth-of-type(odd):nth-of-type(3n):before, body #wrap .row .cell.class2 + .cell.class2:nth-of-type(odd):nth-of-type(3n):before {
+  transform: translateX(0px);
+}
+body #wrap .row .cell.class2 + .cell.class0:nth-of-type(odd):before, body #wrap .row .cell.class2 + .cell.class2:nth-of-type(odd):before {
+  content: '';
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(to right, #deb84d, #e6c978, #deb84d);
+  left: -40px;
+  border-radius: 0px;
+  top: 0;
+  box-shadow: 0px 0px;
+  border: none;
+  display: block;
+}
+body #wrap .row .cell.class2 .mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 9;
+}
+body #wrap .row .cell.class2 .mask:before {
+  content: '';
+  width: 70px;
+  height: 60px;
+  background: linear-gradient(-45deg, #151223 50%, rgba(255, 255, 255, 0) 50%);
+  position: absolute;
+  z-index: 20;
+  bottom: 0px;
+  left: 70px;
+}
+body #wrap .row .cell.class2 .mask:after {
+  content: '';
+  position: absolute;
+  width: 60%;
+  height: 75%;
+  bottom: 0;
+  box-shadow: inset calc(16px * var(--shift)) 0 0px #151223;
+  border: 10px solid;
+  border-right: 20px solid;
+  border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
+  border-bottom: none;
+  box-sizing: border-box;
+  z-index: 9;
+  left: 40%;
+  -webkit-mask: linear-gradient(to right, rgba(0, 0, 0, 0) -25%, #000000 70%);
+  border-radius: 500px 500px 0 0 / 525px 525px 0 0;
+}
+body #wrap .row .cell.class2 + .cell.class2 .mask {
+  z-index: 9;
+  width: 75%;
+  right: 0;
+  left: auto;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 80px, #e6c978 80px, #deb84d 120px, #7d2cac 100px);
+}
+body #wrap .row .cell.class2 + .cell.class2 .mask:before, body #wrap .row .cell.class2 + .cell.class2 .mask:after {
+  display: none;
+}
+body #wrap .row .cell.class2:before, body #wrap .row .cell.class2:after {
+  content: '';
+  position: absolute;
+  width: 60%;
+  height: 75%;
+  bottom: 0;
+  background: #151223;
+  box-shadow: inset calc(15px * var(--shift)) 0 0px #5cbbdd, 10px 0 0 #7d2cac, 20px 0 0 #7d2cac;
+  box-sizing: border-box;
+  border: 10px solid;
+  border-right: 20px solid;
+  border-color: #7d2cac #7d2cac rgba(255, 255, 255, 0) #7d2cac;
+  border-bottom: none;
+  z-index: 9;
+  left: 40%;
+  border-radius: 500px 500px 0 0 / 525px 525px 0 0;
+}
+body #wrap .row .cell.class2:after {
+  z-index: 19;
+  box-shadow: inset 40px 0 0 #151223, 10px 0 0 #151223;
+  border-color: #151223 #151223 rgba(255, 255, 255, 0) #151223;
+  -webkit-mask: linear-gradient(to bottom, #000000 -20%, rgba(255, 255, 255, 0) 60%);
+}
+body #wrap .row .cell.class3 {
+  overflow: visible;
+  z-index: 2;
+}
+body #wrap .row .cell.class3:before {
+  content: '';
+  width: 100%;
+  height: 75%;
+  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 30%, #7d2cac 30%, #7d2cac 50%, rgba(255, 255, 255, 0) 50%);
+  position: absolute;
+  z-index: 9;
+  left: 0;
+  bottom: 0;
+}
+body #wrap .row .cell .inner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+body #wrap .row .cell .inner:before, body #wrap .row .cell .inner:after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  background: linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 130px -100px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 110px -120px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 90px -140px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 70px -160px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 50px -180px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 30px 40px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 50px 60px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 70px 80px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 90px 100px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 110px 120px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2QyY2FjIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiMxNTEyMjMiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2QyY2FjIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), repeating-linear-gradient(135deg, #7d2cac, #7d2cac 14px, #42175b 14px, #42175b 28px, #42175b 28px) 31px 0px / 120px 120px no-repeat;
+  background: linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 130px -100px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 110px -120px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 90px -140px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 70px -160px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 50px -180px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 30px 40px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 50px 60px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 70px 80px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 90px 100px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 110px 120px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(135deg, #7d2cac 50px, rgba(255, 255, 255, 0) 50px), linear-gradient(45deg, #151223 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(-45deg, #7d2cac 65px, rgba(255, 255, 255, 0) 65px), repeating-linear-gradient(135deg, #7d2cac, #7d2cac 14px, #42175b 14px, #42175b 28px, #42175b 28px) 31px 0px / 120px 120px no-repeat;
+  -webkit-mask: linear-gradient(to left, #000000 calc(var(--shift) * 10%), rgba(255, 255, 255, 0));
+}
+body #wrap .row .cell .inner:after {
+  z-index: 1;
+  background: linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 130px -100px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 110px -120px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 90px -140px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 70px -160px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 50px -180px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 30px 40px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 50px 60px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 70px 80px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 90px 100px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 110px 120px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGViODRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiMxNTEyMjMiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGViODRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), repeating-linear-gradient(135deg, #deb84d, #deb84d 14px, #a6831f 14px, #a6831f 28px, #a6831f 28px) 31px 0px / 120px 120px no-repeat;
+  background: linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 130px -100px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 110px -120px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 90px -140px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 70px -160px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 50px -180px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 30px 40px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 50px 60px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 70px 80px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 90px 100px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 110px 120px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(135deg, #deb84d 50px, rgba(255, 255, 255, 0) 50px), linear-gradient(45deg, #151223 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(-45deg, #deb84d 65px, rgba(255, 255, 255, 0) 65px), repeating-linear-gradient(135deg, #deb84d, #deb84d 14px, #a6831f 14px, #a6831f 28px, #a6831f 28px) 31px 0px / 120px 120px no-repeat;
+  -webkit-mask: none;
+}
\ No newline at end of file
diff --git a/procedural-pathways/license.txt b/procedural-pathways/license.txt
new file mode 100644
index 0000000..cd44900
--- /dev/null
+++ b/procedural-pathways/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/jOBMWQW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/procedural-pathways/src/index.haml b/procedural-pathways/src/index.haml
new file mode 100644
index 0000000..1d66c62
--- /dev/null
+++ b/procedural-pathways/src/index.haml
@@ -0,0 +1,8 @@
+#wrap
+ -5.times do
+  .row
+   .rowwrap
+    -5.times do
+     .cell
+      .mask
+      .inner
diff --git a/procedural-pathways/src/script.js b/procedural-pathways/src/script.js
new file mode 100644
index 0000000..6bd8004
--- /dev/null
+++ b/procedural-pathways/src/script.js
@@ -0,0 +1,25 @@
+function draw(){
+  document.querySelectorAll(".row").forEach(row => { 
+    row.style.setProperty("--shift",((Math.floor(Math.random() * 20) - 10)));
+  });
+  document.body.style.setProperty("--rotation",((Math.floor(Math.random() * 360) + 1)) + 'deg');
+  document.querySelectorAll(".cell").forEach(cell => { 
+    cell.style.setProperty("--rotation",((Math.floor(Math.random() * 360) + 1)) + 'deg');
+    cell.style.setProperty("--shift",((Math.floor(Math.random() * 3) + 2)));
+    for (var i = 0; i < 10; i++) {
+      cell.classList.remove('class' + i);
+      cell.classList.remove('eye' + i);
+      document.body.classList.remove('color' + i);
+    }
+    document.body.classList.add('color' + ((Math.floor(Math.random() * 4) + 0)));
+    cell.classList.add('class' + ((Math.floor(Math.random() * 4) + 0)));
+    cell.classList.add('eye' + ((Math.floor(Math.random() * 10) + 0)));
+  });
+};
+  
+draw();
+
+document.addEventListener('click', function (event) {
+document.body.classList.toggle('loading');
+  setTimeout(() => { draw(); document.body.classList.toggle('loading'); }, 1000);
+}, false);
diff --git a/procedural-pathways/src/style.scss b/procedural-pathways/src/style.scss
new file mode 100644
index 0000000..a893a9e
--- /dev/null
+++ b/procedural-pathways/src/style.scss
@@ -0,0 +1,455 @@
+@import "compass";
+
+@function steps($color, $bg, $color2, $number) {
+  $gradient: compact();
+  @for $i from 1 through $number {
+    $steps1: linear-gradient(to bottom, $color 0%, $color 100%) ((($i + 1) * 20px) - 10px) (($i + 1) * 20px);
+    $steps2: linear-gradient(to bottom, $bg 0%, $bg) ((($i + 2) * 20px) - 10px) (($i * 20px) - ($number * 40px));
+    
+    
+    $gradient: linear-gradient(to bottom, $bg calc(100% - 80px), rgba(255,255,255,0) calc(100% - 80px)) 100% 0% / 10px 100% no-repeat, $steps2 +  / 20px 100% no-repeat, linear-gradient(to bottom, $color, $color) 0px 40px / 40px calc(100% - 120px) no-repeat, $gradient, $steps1 +  / 20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, $color, $color) #{($number + 1) * 20}px #{($number + 1) * 20}px / 40px 100% no-repeat;
+    
+  }
+  @return $gradient, linear-gradient(135deg, $color2 50px, rgba(255,255,255,0) 50px), linear-gradient(45deg, $bg 40%, rgba(255,255,255,0) 40%), linear-gradient(-45deg, $color2 65px, rgba(255,255,255,0) 65px), repeating-linear-gradient(135deg, $color2, $color2 14px, darken($color2, 20%) 14px, darken($color2, 20%) 28px, darken($color2, 20%) 28px) 31px 0px / #{($number + 1) * 20}px 120px no-repeat;
+}
+
+$noise: url('data:image/png;base64,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');
+
+$db: #151223;
+$p: #7d2cac;
+$y: #deb84d;
+$bl: #5cbbdd;
+$t: rgba(255,255,255,0);
+
+body{
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  height:100vh;
+  width:100vw;
+  overflow:hidden;
+  &:before{
+    content:'click to regenerate';
+    position:absolute;
+    font-family:Futura;
+    font-size:10px;
+    bottom:5px;
+    left:0;
+    width:100%;
+    text-align:center;
+    color:$db;
+  }
+  &.color1{
+    #wrap{
+      &:before{
+        background:radial-gradient(ellipse at top, #fff 25%, $y 125%);
+      }
+    }
+  }
+  &.color2{
+    #wrap{
+      &:before{
+        background:radial-gradient(ellipse at top, #fff 25%, $p 125%);
+      }
+    }
+  }
+  &.color3{
+    #wrap{
+      &:before{
+        background:radial-gradient(ellipse at top, $y 25%, #fff 125%);
+      }
+    }
+  }
+  &.color4{
+    #wrap{
+      &:before{
+        background:radial-gradient(ellipse at top, $y 25%, $db 125%);
+      }
+    }
+  }
+  &.loading{
+    #wrap{
+      &:before{
+        opacity:0;
+      }
+      .row{
+        &:before{
+          transform:translateX(0);
+          opacity:1;
+        }
+        &:nth-of-type(even){
+          &:before{
+            transform:translateX(0);
+          }
+        }
+      }
+    }
+  }
+  #wrap{
+    zoom:0.75;
+    cursor:pointer;
+    width:800px;
+    min-width:800px;
+    min-height:800px;
+    height:800px;
+    background:$db;
+    overflow:hidden;
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    position:relative;
+    box-shadow:0 0 0 20px #fff, 0 0 1px 20.5px lighten($db, 85%), 0 40px 100px -50px $db;
+    &:before, &:after{
+      content:'';
+      pointer-events:none;
+      position:absolute;
+      width:100%;
+      height:100%;
+      left:0;
+      top:0;
+      background:radial-gradient(ellipse at top, #fff 25%, $y 125%);
+      z-index:15;
+      transform:rotate(calc(var(--rotation) * 90));
+      mix-blend-mode:overlay;
+      opacity:1;
+      transition:opacity 1s ease-in-out;
+    }
+    &:after{
+      -webkit-mask:$noise;
+    }
+    .row{
+      transform-style:preserve-3d;
+      backface-visibility:hidden;
+      position:relative;
+      box-sizing:border-box;
+      z-index:1;
+      background:$db;
+      &:before{
+        content:'';
+        position:absolute;
+        z-index:10;
+        width:300%;
+        left:-75%;
+        background:linear-gradient(to right, $t, $db 25%, $db 75%, $t);
+        height:105%;
+        top:-2.5%;
+        transition:0.5s ease-in-out;
+        transform:translateX(-100%);
+        opacity:0;
+      }
+      @for $i from 1 through 5{
+        &:nth-of-type(#{$i}){
+          &:before{
+            transition-delay:#{$i/20}s;
+          }
+        }
+      }
+      .rowwrap{
+         -webkit-box-reflect:left -1px;
+      }
+      &:nth-of-type(even){
+        z-index:9;
+        &:before{
+          transform:translateX(100%);
+        }
+      }
+      .rowwrap{
+        position:absolute;
+        width:100%;
+        height:100%;
+        top:0;
+        left:calc((var(--shift) * 5px) + 50px);
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        grid-template-rows: repeat(1, 1fr);
+        grid-column-gap: 0px;
+        grid-row-gap: 0px;
+        filter:blur(0.5px);
+      }
+      *{
+        transform-style:preserve-3d;
+        backface-visibility:hidden;
+        &:before, &:after{
+          transform-style:preserve-3d;
+          backface-visibility:hidden;
+        }
+      }
+      @for $i from 1 through 5{
+        &:nth-of-type(#{$i}){
+          z-index:#{$i};
+        }
+      }
+    }
+    .row .cell{
+      position:relative;
+      background:$db;
+      z-index:0;
+      &:nth-of-type(even){
+        transform:scaleX(-1);
+      }
+      &.class0{
+        &.eye1{
+          .mask{
+            position:absolute;
+            width:100%;
+            height:100%;
+            left:0;
+            top:0;
+            z-index:9;
+            &:before, &:after{
+              content:'';
+              position:absolute;
+              width:60px;
+              height:60px;
+              background:radial-gradient(circle at center, $db 5px, $bl 5px, darken($bl, 25%) 15px, #fff 10px, #fff 20px, #aaa) calc(var(--shift) * 2px) calc(var(--shift) * 2px);
+              border-radius:100%;
+              left:calc(50% - 30px);
+              bottom:55px;
+              transform:rotate(var(--rotation));
+            }
+            &:before{
+              background:linear-gradient(to top, $db -50%, $t);
+              transform-origin:25% 100%;
+              transform:skewX(-35deg) scaleY(0.75) scaleX(1.5);
+            }
+          }
+        }
+        &:nth-of-type(even){
+          .mask{
+            position:absolute;
+            width:100%;
+            height:100%;
+            left:0;
+            top:0;
+            box-shadow:inset 0 20px 0 $db;
+            z-index:9;
+            display:block;
+          }
+          & + .cell.class2{
+            .mask{
+              box-shadow:inset 0 20px 0 $db;
+              left:-20px;
+              &:before, &:after{
+                margin-left:20px;
+              }
+            }
+          }
+          & + .class1, & + .class3{
+            .mask{
+              &:before, &:after{
+                content:'';
+                position:absolute;
+                width:40px;
+                height:25px;
+                background:$db;
+                left:70px;
+                top:10px;
+              }
+              &:after{
+                width:20px;
+                left:95px;
+                top:25px;
+                height:20px;
+                transform:skewY(-45deg);
+              }
+            }
+          }
+          & + .cell .mask{
+            position:absolute;
+            width:100%;
+            height:100%;
+            left:0;
+            top:0;
+            box-shadow:inset 0 20px 0 $db;
+            z-index:9;
+            display:block;
+          }
+        }
+      }
+      &.class0, &.class2{
+        .inner{
+          &:before{
+            background:linear-gradient(-135deg, $db 30px, $t 30px) -40px -2px / 80px 80px no-repeat, linear-gradient(-135deg, $t 30px, $db 30px) -40px calc(100% + 40px) / 80px 80px no-repeat, linear-gradient(to bottom, $t 80px, $p 80px) 100% 50% / 75% 100% no-repeat, linear-gradient(to bottom, $p, $p) 0% 100% / 25% 75% no-repeat, linear-gradient(to bottom, $p, $p) 0% 0% / 25% 75% no-repeat;
+          }
+          &:after{
+            background:linear-gradient(-135deg, $db 30px, $t 30px) -40px -2px / 80px 80px no-repeat, linear-gradient(-135deg, $t 30px, $db 30px) -40px calc(100% + 40px) / 80px 80px no-repeat, linear-gradient(to bottom, $t 80px, $y 80px, $y 120px, $p 120px)  100% 50% / 75% 100% no-repeat, linear-gradient(to bottom, $p 40px, $db) 0% 100% / 25% 75% no-repeat, linear-gradient(to bottom, $y, $y) 0% 0% / 25% 75% no-repeat;
+          }
+        }
+      }
+      &.class1{
+        z-index:1;
+        &:before{
+          content:'';
+          position:absolute;
+          width:20%;
+          left:50%;
+          transform:translate(-50%, 0);
+          height:20px;
+          bottom:0;
+          background:$db;
+          z-index:9;
+        }
+      }
+      &.class2{
+        z-index:3;
+        &:nth-of-type(3n){
+          &:before, &:after, .mask{
+            transform:translateX(20px);
+          }
+          & + .cell.class2{
+            .mask{
+              background:linear-gradient(to top, $db -25%, $t 50%), linear-gradient(to bottom, $db 40px, $t 40px), linear-gradient(to left, $p, $p);
+            }
+          }
+        }
+        & + .cell.class0, & + .cell.class2{
+          z-index:0;
+          &:before, &:after{
+            display:none;
+          }
+          &:nth-of-type(odd){
+            transform:translateX(40px);
+            .mask{
+              display:none;
+            }
+            &:nth-of-type(5n){
+              transform:translateX(40px);
+              &:before{
+                left:-40px;
+                width:40px;
+              }
+            }
+            &:nth-of-type(3n){
+              &:before{
+               transform:translateX(0px);
+              }
+            }
+            &:before{
+              content:'';
+              position:absolute;
+              width:40px;
+              height:40px;
+              background:linear-gradient(to right, $y, lighten($y, 10%), $y);
+              left:-40px;
+              border-radius:0px;
+              top:0;
+              box-shadow:0px 0px;
+              border:none;
+              display:block;
+            }
+          }
+        }
+        .mask{
+          position:absolute;
+          width:100%;
+          height:100%;
+          left:0;
+          top:0;
+          z-index:9;
+          &:before{
+            content:'';
+            width:70px;
+            height:60px;
+            background:linear-gradient(-45deg, $db 50%, $t 50%);
+            position:absolute;
+            z-index:20;
+            bottom:0px;
+            left:70px;
+          }
+          &:after{
+            content:'';
+            position:absolute;
+            width:60%;
+            height:75%;
+            bottom:0;
+            box-shadow:inset calc(16px * var(--shift)) 0 0px $db;
+            border:10px solid;
+            border-right:20px solid;
+            border-color:$t $t $t $t;
+            border-bottom:none;
+            box-sizing:border-box;
+            z-index:9;
+            left:40%;
+            -webkit-mask:linear-gradient(to right, transparent -25%, #000 70%);
+            border-radius:500px 500px 0 0 / 525px 525px 0 0;
+          }
+        }
+        & + .cell.class2{
+          .mask{
+            z-index:9;
+            width:75%;
+            right:0;
+            left:auto;
+            background:linear-gradient(to bottom, $t 80px, lighten($y, 10%) 80px, $y 120px, $p 100px);
+            &:before, &:after{
+              display:none;
+            }
+          }
+        }
+        &:before, &:after{
+          content:'';
+          position:absolute;
+          width:60%;
+          height:75%;
+          bottom:0;
+          background:$db;
+          box-shadow:inset calc(15px * var(--shift)) 0 0px $bl, 10px 0 0 $p, 20px 0 0 $p;
+          box-sizing:border-box;
+          border:10px solid;
+          border-right:20px solid;
+          border-color:$p $p $t $p;
+          border-bottom:none;
+          z-index:9;
+          left:40%;
+          border-radius:500px 500px 0 0 / 525px 525px 0 0;
+        }
+        &:after{
+          z-index:19;
+          box-shadow:inset 40px 0 0 $db, 10px 0 0 $db;
+          border-color:$db $db $t $db;
+          -webkit-mask:linear-gradient(to bottom, #000 -20%, rgba(255,255,255,0) 60%);
+        }
+      }
+      &.class3{
+        overflow:visible;
+        z-index:2;
+        &:before{
+          content:'';
+          width:100%;
+          height:75%;
+          background:linear-gradient(45deg, $t 30%, $p 30%, $p 50%, $t 50%);
+          position:absolute;
+          z-index:9;
+          left:0;
+          bottom:0;
+        }
+      }
+      .inner{
+        position:absolute;
+        width:100%;
+        height:100%;
+        left:0;
+        top:0;
+        z-index:2;
+        &:before, &:after{
+          content:'';
+          position:absolute;
+          width:100%;
+          height:100%;
+          top:0;
+          left:0;
+          z-index:2;
+          @include background(steps($p, $db, $p, 5));
+          -webkit-mask:linear-gradient(to left, #000 calc(var(--shift) * 10%), rgba(255,255,255,0));
+        }
+        &:after{
+          z-index:1;
+          @include background(steps($p, $db, $y, 5));
+          -webkit-mask:none;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/product-showcase-ui/README.markdown b/product-showcase-ui/README.markdown
new file mode 100644
index 0000000..130e0f7
--- /dev/null
+++ b/product-showcase-ui/README.markdown
@@ -0,0 +1,7 @@
+# Product Showcase UI
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/TurkAysenur/pen/gORaboY](https://codepen.io/TurkAysenur/pen/gORaboY).
+
+Inspired by Francesco Zagami
+https://dribbble.com/shots/15292175-Product-Carousel-Experience
+
diff --git a/product-showcase-ui/dist/index.html b/product-showcase-ui/dist/index.html
new file mode 100644
index 0000000..adf56f5
--- /dev/null
+++ b/product-showcase-ui/dist/index.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Product Showcase UI</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://unpkg.com/swiper/swiper-bundle.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+	<div class="header">
+		<a class="menu-icon" href="#">
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
+			</svg>
+		</a>
+		<img class="logo" src="https://cdn.shopify.com/s/files/1/0689/1443/files/CLOSCA-LOGO-WEB-BLACK_130x@2x.png?v=1559116993" />
+		<div class="header-menu">
+			<a href="#">Mask</a>
+			<a href="#">Helmet</a>
+			<a href="#">Bottle</a>
+			<a href="#">Accessories</a>
+		</div>
+		<div class="header-icons">
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+			</svg>
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+				<path d="M437.02 330.98c-27.883-27.882-61.071-48.523-97.281-61.018C378.521 243.251 404 198.548 404 148 404 66.393 337.607 0 256 0S108 66.393 108 148c0 50.548 25.479 95.251 64.262 121.962-36.21 12.495-69.398 33.136-97.281 61.018C26.629 379.333 0 443.62 0 512h40c0-119.103 96.897-216 216-216s216 96.897 216 216h40c0-68.38-26.629-132.667-74.98-181.02zM256 256c-59.551 0-108-48.448-108-108S196.449 40 256 40s108 48.448 108 108-48.449 108-108 108z" />
+			</svg>
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208.955 208.955">
+				<path d="M190.85 200.227L178.135 58.626a7.5 7.5 0 00-7.47-6.829h-26.221V39.971c0-22.04-17.93-39.971-39.969-39.971-22.038 0-39.966 17.931-39.966 39.971v11.826H38.27a7.5 7.5 0 00-7.47 6.829L18.035 200.784a7.5 7.5 0 007.47 8.17h157.946a7.5 7.5 0 007.399-8.727zM79.509 39.971c0-13.769 11.2-24.971 24.967-24.971 13.768 0 24.969 11.202 24.969 24.971v11.826H79.509V39.971zm-45.8 153.984L45.127 66.797h19.382v13.412a7.5 7.5 0 007.5 7.5 7.5 7.5 0 007.5-7.5V66.797h49.936v13.412a7.5 7.5 0 007.5 7.5 7.5 7.5 0 007.5-7.5V66.797h19.364l11.418 127.158H33.709z" />
+			</svg>
+		</div>
+	</div>
+	<div class="mySwiper">
+		<div class="main-wrapper swiper-wrapper">
+			<div class="main swiper-slide" id="beach">
+				<div class="left-side">
+					<div class="main-wrapper">
+						<h3 class="main-header">Closca Bottle</h3>
+						<h1 class="main-title">Beach</h1>
+						<h2 class="main-subtitle">€ 39.90</h2>
+					</div>
+					<div class="main-content">
+						<div class="main-content__title">In 20 years, there could be more plastic in our oceans than fish.</div>
+						<div class="main-content__subtitle">Plastic pollution injures more than 100.000 marine animals every year.It takes around 450 years for one plastic bottle to decompose.</div>
+						<div class="more-menu">
+							Shop Now
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<line x1="-5" y1="12" x2="19" y2="12" />
+								<line x1="15" y1="16" x2="19" y2="12" />
+								<line x1="15" y1="8" x2="19" y2="12" />
+							</svg>
+						</div>
+					</div>
+				</div>
+				<div class="center">
+					<div class="right-side__img">
+						<img class="bottle-bg" src="https://cdn.shopify.com/s/files/1/0689/1443/t/34/assets/Beach_1920.jpg?v=1029210661698833530" alt="">
+						<img class="bottle-img" src="https://cdn.shopify.com/s/files/1/0689/1443/t/34/assets/bottle_beach.png?v=11784267851598469514" />
+					</div>
+				</div>
+			</div>
+			<div class="main swiper-slide" id="savanna">
+				<div class="left-side">
+					<div class="main-wrapper">
+						<h3 class="main-header">Closca Bottle</h3>
+						<h1 class="main-title">Savanna</h1>
+						<h2 class="main-subtitle">€ 39.90</h2>
+					</div>
+					<div class="main-content">
+						<div class="main-content__title">The Earth’s area affected by desertification is approx 11 times India’s size.
+						</div>
+						<div class="main-content__subtitle">The Savannas act as a carbon sink, absorbing CO2 from the atmosphere and helping to maintain the balance of global temperatures.</div>
+						<div class="more-menu">
+							Shop Now
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<line x1="-5" y1="12" x2="19" y2="12" />
+								<line x1="15" y1="16" x2="19" y2="12" />
+								<line x1="15" y1="8" x2="19" y2="12" />
+							</svg>
+						</div>
+					</div>
+				</div>
+				<div class="center">
+					<div class="right-side__img">
+						<img class="bottle-bg" src="https://images.unsplash.com/photo-1613109526778-27605f1f27d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80" alt="">
+						<img class="bottle-img" src="https://cdn.shopify.com/s/files/1/0689/1443/t/34/assets/savanna_OK.png?v=4783820813181844557" />
+					</div>
+				</div>
+			</div>
+			<div class="main swiper-slide" id="glacier">
+				<div class="left-side">
+					<div class="main-wrapper">
+						<h3 class="main-header">Closca Bottle</h3>
+						<h1 class="main-title">Glacier</h1>
+						<h2 class="main-subtitle">€ 39.90</h2>
+					</div>
+					<div class="main-content">
+						<div class="main-content__title">Glaciers contain 75% of the World's freshwater.
+						</div>
+						<div class="main-content__subtitle">The effects of melting ice glaciers are biodiversity loss, the rising of the sea level and the deficiency of freshwater, among others.</div>
+						<div class="more-menu">
+							Shop Now
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<line x1="-5" y1="12" x2="19" y2="12" />
+								<line x1="15" y1="16" x2="19" y2="12" />
+								<line x1="15" y1="8" x2="19" y2="12" />
+							</svg>
+						</div>
+					</div>
+				</div>
+				<div class="center">
+					<div class="right-side__img">
+						<img class="bottle-bg" src="https://www.discover-the-world.com/app/uploads/2018/05/chile-patagonia-calving-glacier-is-1150x863-c-default.jpg" alt="">
+						<img class="bottle-img" src="https://cdn.shopify.com/s/files/1/0689/1443/t/34/assets/Glacier_OK.png?v=7185877315400411030" />
+					</div>
+				</div>
+			</div>
+			<div class="main swiper-slide" id="coral">
+				<div class="left-side">
+					<div class="main-wrapper">
+						<h3 class="main-header">Closca Bottle</h3>
+						<h1 class="main-title">Coral</h1>
+						<h2 class="main-subtitle">€ 39.90</h2>
+					</div>
+					<div class="main-content">
+						<div class="main-content__title">We will have lost 60% of our coral reefs by 2030.
+						</div>
+						<div class="main-content__subtitle">Coral reefs are essential to humans, as they protect the shorelines and are a source of
+							nutrients and habitat for thousands of marine species.</div>
+						<div class="more-menu">
+							Shop Now
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<line x1="-5" y1="12" x2="19" y2="12" />
+								<line x1="15" y1="16" x2="19" y2="12" />
+								<line x1="15" y1="8" x2="19" y2="12" />
+							</svg>
+						</div>
+					</div>
+				</div>
+				<div class="center">
+					<div class="right-side__img">
+						<img class="bottle-bg" src="https://images.unsplash.com/photo-1546500840-ae38253aba9b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3260&q=80" alt="">
+						<img class="bottle-img" src="https://cdn.shopify.com/s/files/1/0689/1443/t/34/assets/Coral_OK.png?v=14596995446202437119" />
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="button-wrapper">
+		<div class="swiper-button swiper-prev-button">
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+			</svg>
+		</div>
+		<div class="swiper-button swiper-next-button">
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+			</svg>
+		</div>
+	</div>
+	<div class="swiper-pagination"></div>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.com/swiper/swiper-bundle.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/product-showcase-ui/dist/script.js b/product-showcase-ui/dist/script.js
new file mode 100644
index 0000000..2cb75a7
--- /dev/null
+++ b/product-showcase-ui/dist/script.js
@@ -0,0 +1,16 @@
+var swiper = new Swiper(".mySwiper", {
+  navigation: {
+    nextEl: ".swiper-next-button",
+    prevEl: ".swiper-prev-button" },
+
+  effect: "fade",
+  loop: "infinite",
+  pagination: {
+    el: ".swiper-pagination",
+    type: "fraction" } });
+
+
+
+swiper.on('slideChange', function (sld) {
+  document.body.setAttribute('data-sld', sld.realIndex);
+});
\ No newline at end of file
diff --git a/product-showcase-ui/dist/style.css b/product-showcase-ui/dist/style.css
new file mode 100644
index 0000000..e54d6be
--- /dev/null
+++ b/product-showcase-ui/dist/style.css
@@ -0,0 +1,394 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");
+:root {
+  --body-color: #2c2d2a;
+  --savanna-bg: #e9bf8b;
+  --beach-bg: #e7dfcf;
+  --glacier-bg: #b6d6c8;
+  --coral-bg: #e86357;
+  --arrow-fill: #333231;
+  --body-font: "Montserrat", sans-serif;
+  --italic-font: "EB Garamond", serif;
+}
+
+* {
+  box-sizing: border-box;
+  outline: none;
+}
+
+img {
+  max-width: 100%;
+}
+
+a {
+  text-decoration: none;
+  color: var(--body-color);
+}
+
+h1,
+h2,
+h3 {
+  margin: 0;
+}
+
+body {
+  font-family: var(--body-font);
+  background-color: #1d1e20;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 2em;
+  width: 100%;
+  height: 100vh;
+  color: var(--body-color);
+}
+@media (max-width: 480px) {
+  body {
+    padding: 0;
+  }
+}
+
+.container {
+  max-width: 1100px;
+  border-radius: 4px;
+  max-height: 680px;
+  height: 90vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  scroll-behavior: smooth;
+  background-color: #e6decf;
+  padding: 0 30px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+@media (max-width: 480px) {
+  .container {
+    height: 100%;
+    max-height: 100%;
+  }
+}
+
+.logo {
+  width: 116px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  height: 62px;
+  width: 100%;
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-weight: 600;
+  font-size: 15px;
+  border-bottom: 1px solid rgba(44, 45, 42, 0.25);
+  position: sticky;
+  top: 0;
+  left: 0;
+  background-color: var(--beach-bg);
+  z-index: 6;
+}
+@media (max-width: 575px) {
+  .header {
+    width: calc(100% + 20px);
+    margin-left: -10px;
+  }
+}
+.header-menu {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+@media screen and (max-width: 740px) {
+  .header-menu {
+    display: none;
+  }
+}
+.header-menu a:not(:first-child) {
+  margin-left: 30px;
+}
+.header .menu-icon {
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+}
+.header .menu-icon svg {
+  width: 22px;
+}
+.header-icons {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+.header-icons svg {
+  width: 18px;
+}
+.header-icons svg:not(:last-child) {
+  margin-right: 20px;
+}
+
+.left-side {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  max-width: 320px;
+}
+@media screen and (max-width: 930px) {
+  .left-side {
+    text-align: center;
+    max-width: 450px;
+  }
+}
+
+.mySwiper {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+}
+
+.main {
+  padding: 42px 0 30px;
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+}
+@media screen and (max-width: 930px) {
+  .main {
+    flex-direction: column-reverse;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.main-header {
+  text-transform: uppercase;
+  font-size: 14px;
+  letter-spacing: 4px;
+  font-weight: 600;
+  transition-delay: 0.2s;
+}
+.main-title {
+  font-family: var(--italic-font);
+  font-size: 100px;
+  font-weight: 400;
+  margin-top: 10px;
+  line-height: 1em;
+  transition-delay: 0.3s;
+}
+.main-subtitle {
+  font-family: var(--italic-font);
+  font-weight: 400;
+  font-size: 32px;
+  margin-top: 14px;
+  margin-bottom: 60px;
+  transition-delay: 0.4s;
+}
+.main-content__title {
+  font-size: 26px;
+  font-family: var(--italic-font);
+  font-style: italic;
+  margin-bottom: 14px;
+  transition-delay: 0.2s;
+}
+.main-content__subtitle {
+  font-size: 14px;
+  line-height: 1.5;
+  margin-bottom: 24px;
+  letter-spacing: -0.01em;
+  transition-delay: 0.3s;
+}
+.main-content .more-menu {
+  font-size: 13px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  transition-delay: 0.4s;
+}
+@media screen and (max-width: 930px) {
+  .main-content .more-menu {
+    justify-content: center;
+  }
+}
+.main-content .more-menu svg {
+  width: 28px;
+  height: 18px;
+  margin-left: 10px;
+}
+
+.center {
+  display: flex;
+  margin-left: 120px;
+  position: relative;
+  flex-shrink: 0;
+}
+@media screen and (max-width: 930px) {
+  .center {
+    margin-left: 0;
+    margin-bottom: 56px;
+  }
+}
+.center .bottle-bg {
+  width: 320px;
+  height: 450px;
+  object-fit: cover;
+  border-radius: 160px;
+}
+@media screen and (max-width: 930px) {
+  .center .bottle-bg {
+    width: 260px;
+    height: 390px;
+  }
+}
+@media screen and (max-width: 575px) {
+  .center .bottle-bg {
+    width: 220px;
+    height: 340px;
+  }
+}
+.center .bottle-img {
+  position: absolute;
+  top: 25%;
+  left: 0;
+  transform: scale(1.6);
+}
+
+.swiper-pagination {
+  position: absolute;
+  right: 30px;
+  left: auto;
+  top: 100px;
+  width: auto;
+  bottom: auto;
+  z-index: 2;
+  font-size: 14px;
+  font-family: var(--body-font);
+  font-weight: 500;
+}
+
+.button-wrapper {
+  position: absolute;
+  right: 30px;
+  bottom: 20px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+}
+@media screen and (max-width: 930px) {
+  .button-wrapper {
+    top: 0;
+    left: 0;
+    width: 100%;
+    justify-content: space-between;
+    padding: 0 60px;
+  }
+}
+@media screen and (max-width: 575px) {
+  .button-wrapper {
+    padding: 0 20px;
+  }
+}
+.button-wrapper svg {
+  width: 28px;
+}
+.button-wrapper .swiper-button {
+  border: 1px solid var(--body-color);
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(to right, var(--body-color) 40%, transparent 0%);
+  background-size: 200% 100%;
+  background-position: right bottom;
+  transition: all 0.3s ease-out;
+  cursor: pointer;
+}
+.button-wrapper .swiper-button + .swiper-button {
+  margin-left: 16px;
+}
+@media screen and (max-width: 930px) {
+  .button-wrapper .swiper-button + .swiper-button {
+    margin-left: 0;
+  }
+}
+.button-wrapper .swiper-button:hover {
+  background-color: var(--body-color);
+  background-position: left bottom;
+}
+.button-wrapper .swiper-button:hover svg {
+  stroke: #fff;
+}
+.button-wrapper .swiper-prev-button {
+  background: linear-gradient(to left, var(--body-color) 40%, transparent 0%);
+  background-size: 200% 100%;
+  background-position: left bottom;
+  transition: all 0.3s ease-out;
+}
+.button-wrapper .swiper-prev-button svg {
+  transform: rotate(-180deg);
+}
+.button-wrapper .swiper-prev-button:hover {
+  background-position: right bottom;
+}
+
+.swiper-slide {
+  opacity: 0 !important;
+  transition: 0.4s;
+}
+.swiper-slide-active {
+  opacity: 1 !important;
+}
+
+.swiper-slide .main-wrapper > *,
+.swiper-slide .main-content > * {
+  transform: translateY(-30px);
+  opacity: 0;
+  transition-duration: 0.8s;
+}
+
+.swiper-slide-active .main-wrapper > *,
+.swiper-slide-active .main-content > * {
+  transform: none;
+  opacity: 1;
+}
+
+.swiper-slide .bottle-bg {
+  transition-duration: 0.6s;
+  opacity: 0;
+  object-position: 60%;
+}
+
+.swiper-slide-active .bottle-bg {
+  opacity: 1;
+  transform: none;
+  object-position: 50%;
+}
+
+.swiper-slide .bottle-img {
+  transition-duration: 0.8s;
+  transform: scale(1.2);
+  opacity: 0;
+}
+
+.swiper-slide-active .bottle-img {
+  opacity: 1;
+  transform: scale(1.6);
+}
+
+[data-sld="1"] .container,
+[data-sld="1"] .header {
+  background-color: var(--savanna-bg);
+}
+
+[data-sld="2"] .container,
+[data-sld="2"] .header {
+  background-color: var(--glacier-bg);
+}
+
+[data-sld="3"] .container,
+[data-sld="3"] .header {
+  background-color: var(--coral-bg);
+}
\ No newline at end of file
diff --git a/product-showcase-ui/license.txt b/product-showcase-ui/license.txt
new file mode 100644
index 0000000..00c1a8d
--- /dev/null
+++ b/product-showcase-ui/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Aysenur Turk (https://codepen.io/TurkAysenur/pen/gORaboY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/product-showcase-ui/src/index.html b/product-showcase-ui/src/index.html
new file mode 100644
index 0000000..0fe3bb8
--- /dev/null
+++ b/product-showcase-ui/src/index.html
@@ -0,0 +1,160 @@
+<div class="container">
+	<div class="header">
+		<a class="menu-icon" href="#">
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
+			</svg>
+		</a>
+		<img class="logo" src="https://cdn.shopify.com/s/files/1/0689/1443/files/CLOSCA-LOGO-WEB-BLACK_130x@2x.png?v=1559116993" />
+		<div class="header-menu">
+			<a href="#">Mask</a>
+			<a href="#">Helmet</a>
+			<a href="#">Bottle</a>
+			<a href="#">Accessories</a>
+		</div>
+		<div class="header-icons">
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+			</svg>
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+				<path d="M437.02 330.98c-27.883-27.882-61.071-48.523-97.281-61.018C378.521 243.251 404 198.548 404 148 404 66.393 337.607 0 256 0S108 66.393 108 148c0 50.548 25.479 95.251 64.262 121.962-36.21 12.495-69.398 33.136-97.281 61.018C26.629 379.333 0 443.62 0 512h40c0-119.103 96.897-216 216-216s216 96.897 216 216h40c0-68.38-26.629-132.667-74.98-181.02zM256 256c-59.551 0-108-48.448-108-108S196.449 40 256 40s108 48.448 108 108-48.449 108-108 108z" />
+			</svg>
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208.955 208.955">
+				<path d="M190.85 200.227L178.135 58.626a7.5 7.5 0 00-7.47-6.829h-26.221V39.971c0-22.04-17.93-39.971-39.969-39.971-22.038 0-39.966 17.931-39.966 39.971v11.826H38.27a7.5 7.5 0 00-7.47 6.829L18.035 200.784a7.5 7.5 0 007.47 8.17h157.946a7.5 7.5 0 007.399-8.727zM79.509 39.971c0-13.769 11.2-24.971 24.967-24.971 13.768 0 24.969 11.202 24.969 24.971v11.826H79.509V39.971zm-45.8 153.984L45.127 66.797h19.382v13.412a7.5 7.5 0 007.5 7.5 7.5 7.5 0 007.5-7.5V66.797h49.936v13.412a7.5 7.5 0 007.5 7.5 7.5 7.5 0 007.5-7.5V66.797h19.364l11.418 127.158H33.709z" />
+			</svg>
+		</div>
+	</div>
+	<div class="mySwiper">
+		<div class="main-wrapper swiper-wrapper">
+			<div class="main swiper-slide" id="beach">
+				<div class="left-side">
+					<div class="main-wrapper">
+						<h3 class="main-header">Closca Bottle</h3>
+						<h1 class="main-title">Beach</h1>
+						<h2 class="main-subtitle">€ 39.90</h2>
+					</div>
+					<div class="main-content">
+						<div class="main-content__title">In 20 years, there could be more plastic in our oceans than fish.</div>
+						<div class="main-content__subtitle">Plastic pollution injures more than 100.000 marine animals every year.It takes around 450 years for one plastic bottle to decompose.</div>
+						<div class="more-menu">
+							Shop Now
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<line x1="-5" y1="12" x2="19" y2="12" />
+								<line x1="15" y1="16" x2="19" y2="12" />
+								<line x1="15" y1="8" x2="19" y2="12" />
+							</svg>
+						</div>
+					</div>
+				</div>
+				<div class="center">
+					<div class="right-side__img">
+						<img class="bottle-bg" src="https://cdn.shopify.com/s/files/1/0689/1443/t/34/assets/Beach_1920.jpg?v=1029210661698833530" alt="">
+						<img class="bottle-img" src="https://cdn.shopify.com/s/files/1/0689/1443/t/34/assets/bottle_beach.png?v=11784267851598469514" />
+					</div>
+				</div>
+			</div>
+			<div class="main swiper-slide" id="savanna">
+				<div class="left-side">
+					<div class="main-wrapper">
+						<h3 class="main-header">Closca Bottle</h3>
+						<h1 class="main-title">Savanna</h1>
+						<h2 class="main-subtitle">€ 39.90</h2>
+					</div>
+					<div class="main-content">
+						<div class="main-content__title">The Earth’s area affected by desertification is approx 11 times India’s size.
+						</div>
+						<div class="main-content__subtitle">The Savannas act as a carbon sink, absorbing CO2 from the atmosphere and helping to maintain the balance of global temperatures.</div>
+						<div class="more-menu">
+							Shop Now
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<line x1="-5" y1="12" x2="19" y2="12" />
+								<line x1="15" y1="16" x2="19" y2="12" />
+								<line x1="15" y1="8" x2="19" y2="12" />
+							</svg>
+						</div>
+					</div>
+				</div>
+				<div class="center">
+					<div class="right-side__img">
+						<img class="bottle-bg" src="https://images.unsplash.com/photo-1613109526778-27605f1f27d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80" alt="">
+						<img class="bottle-img" src="https://cdn.shopify.com/s/files/1/0689/1443/t/34/assets/savanna_OK.png?v=4783820813181844557" />
+					</div>
+				</div>
+			</div>
+			<div class="main swiper-slide" id="glacier">
+				<div class="left-side">
+					<div class="main-wrapper">
+						<h3 class="main-header">Closca Bottle</h3>
+						<h1 class="main-title">Glacier</h1>
+						<h2 class="main-subtitle">€ 39.90</h2>
+					</div>
+					<div class="main-content">
+						<div class="main-content__title">Glaciers contain 75% of the World's freshwater.
+						</div>
+						<div class="main-content__subtitle">The effects of melting ice glaciers are biodiversity loss, the rising of the sea level and the deficiency of freshwater, among others.</div>
+						<div class="more-menu">
+							Shop Now
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<line x1="-5" y1="12" x2="19" y2="12" />
+								<line x1="15" y1="16" x2="19" y2="12" />
+								<line x1="15" y1="8" x2="19" y2="12" />
+							</svg>
+						</div>
+					</div>
+				</div>
+				<div class="center">
+					<div class="right-side__img">
+						<img class="bottle-bg" src="https://www.discover-the-world.com/app/uploads/2018/05/chile-patagonia-calving-glacier-is-1150x863-c-default.jpg" alt="">
+						<img class="bottle-img" src="https://cdn.shopify.com/s/files/1/0689/1443/t/34/assets/Glacier_OK.png?v=7185877315400411030" />
+					</div>
+				</div>
+			</div>
+			<div class="main swiper-slide" id="coral">
+				<div class="left-side">
+					<div class="main-wrapper">
+						<h3 class="main-header">Closca Bottle</h3>
+						<h1 class="main-title">Coral</h1>
+						<h2 class="main-subtitle">€ 39.90</h2>
+					</div>
+					<div class="main-content">
+						<div class="main-content__title">We will have lost 60% of our coral reefs by 2030.
+						</div>
+						<div class="main-content__subtitle">Coral reefs are essential to humans, as they protect the shorelines and are a source of
+							nutrients and habitat for thousands of marine species.</div>
+						<div class="more-menu">
+							Shop Now
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<line x1="-5" y1="12" x2="19" y2="12" />
+								<line x1="15" y1="16" x2="19" y2="12" />
+								<line x1="15" y1="8" x2="19" y2="12" />
+							</svg>
+						</div>
+					</div>
+				</div>
+				<div class="center">
+					<div class="right-side__img">
+						<img class="bottle-bg" src="https://images.unsplash.com/photo-1546500840-ae38253aba9b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3260&q=80" alt="">
+						<img class="bottle-img" src="https://cdn.shopify.com/s/files/1/0689/1443/t/34/assets/Coral_OK.png?v=14596995446202437119" />
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="button-wrapper">
+		<div class="swiper-button swiper-prev-button">
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+			</svg>
+		</div>
+		<div class="swiper-button swiper-next-button">
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+			</svg>
+		</div>
+	</div>
+	<div class="swiper-pagination"></div>
+</div>
\ No newline at end of file
diff --git a/product-showcase-ui/src/script.babel b/product-showcase-ui/src/script.babel
new file mode 100644
index 0000000..ab5953f
--- /dev/null
+++ b/product-showcase-ui/src/script.babel
@@ -0,0 +1,16 @@
+var swiper = new Swiper(".mySwiper", {
+	navigation: {
+		nextEl: ".swiper-next-button",
+		prevEl: ".swiper-prev-button"
+	},
+	effect: "fade",
+	loop: "infinite",
+	pagination: {
+          el: ".swiper-pagination",
+          type: "fraction",
+        }
+});
+
+swiper.on('slideChange', function(sld) {
+	document.body.setAttribute('data-sld', sld.realIndex);
+})
\ No newline at end of file
diff --git a/product-showcase-ui/src/style.scss b/product-showcase-ui/src/style.scss
new file mode 100644
index 0000000..603272e
--- /dev/null
+++ b/product-showcase-ui/src/style.scss
@@ -0,0 +1,409 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");
+
+:root {
+	--body-color: #2c2d2a;
+	--savanna-bg: #e9bf8b;
+	--beach-bg: #e7dfcf;
+	--glacier-bg: #b6d6c8;
+	--coral-bg: #e86357;
+	--arrow-fill: #333231;
+	--body-font: "Montserrat", sans-serif;
+	--italic-font: "EB Garamond", serif;
+}
+
+* {
+	box-sizing: border-box;
+	outline: none;
+}
+
+img {
+	max-width: 100%;
+}
+
+a {
+	text-decoration: none;
+	color: var(--body-color);
+}
+
+h1,
+h2,
+h3 {
+	margin: 0;
+}
+
+body {
+	font-family: var(--body-font);
+	background-color: #1d1e20;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	padding: 2em;
+	width: 100%;
+	height: 100vh;
+	color: var(--body-color);
+	
+	@media (max-width: 480px) {
+		padding: 0;
+	}
+}
+
+.container {
+	max-width: 1100px;
+	border-radius: 4px;
+	max-height: 680px;
+	height: 90vh;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	scroll-behavior: smooth;
+	background-color: #e6decf;
+	padding: 0 30px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	position: relative;
+		@media (max-width: 480px) {
+		height: 100%;
+		max-height: 100%;
+	}
+}
+
+.logo {
+	width: 116px;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	height: 62px;
+	width: 100%;
+	white-space: nowrap;
+	flex-shrink: 0;
+	font-weight: 600;
+	font-size: 15px;
+	border-bottom: 1px solid rgba(44, 45, 42, 0.25);
+	position: sticky;
+	top: 0;
+	left: 0;
+	background-color: var(--beach-bg);
+	z-index: 6;
+	
+	@media (max-width: 575px) {
+		width: calc(100% + 20px);
+    margin-left: -10px;
+	}
+
+	&-menu {
+		display: flex;
+		align-items: center;
+		margin-left: auto;
+		
+		@media screen and (max-width: 740px) {
+			display: none;
+		}
+
+		a:not(:first-child) {
+			margin-left: 30px;
+		}
+	}
+
+	.menu-icon {
+		display: flex;
+		align-items: center;
+		margin-right: 20px;
+
+		svg {
+			width: 22px;
+		}
+	}
+
+	&-icons {
+		margin-left: auto;
+		display: flex;
+		align-items: center;
+
+		svg {
+			width: 18px;
+
+			&:not(:last-child) {
+				margin-right: 20px;
+			}
+		}
+	}
+}
+
+.left-side {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	max-width: 320px;
+	
+	@media screen and (max-width: 930px) {
+		text-align: center;
+		max-width: 450px;
+	}
+}
+
+.mySwiper {
+	display: flex;
+	flex-grow: 1;
+	position: relative;
+}
+
+.main {
+	padding: 42px 0 30px;
+	display: flex;
+	flex-grow: 1;
+	position: relative;
+
+	@media screen and (max-width: 930px) {
+		flex-direction: column-reverse;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&-header {
+		text-transform: uppercase;
+		font-size: 14px;
+		letter-spacing: 4px;
+		font-weight: 600;
+		transition-delay: 0.2s;
+	}
+
+	&-title {
+		font-family: var(--italic-font);
+		font-size: 100px;
+		font-weight: 400;
+		margin-top: 10px;
+		line-height: 1em;
+		transition-delay: 0.3s;
+	}
+
+	&-subtitle {
+		font-family: var(--italic-font);
+		font-weight: 400;
+		font-size: 32px;
+		margin-top: 14px;
+		margin-bottom: 60px;
+		transition-delay: 0.4s;
+	}
+
+	&-content {
+		&__title {
+			font-size: 26px;
+			font-family: var(--italic-font);
+			font-style: italic;
+			margin-bottom: 14px;
+			transition-delay: 0.2s;
+		}
+
+		&__subtitle {
+			font-size: 14px;
+			line-height: 1.5;
+			margin-bottom: 24px;
+			letter-spacing: -0.01em;
+			transition-delay: 0.3s;
+		}
+
+		.more-menu {
+			font-size: 13px;
+			font-weight: 500;
+			display: flex;
+			align-items: center;
+			transition-delay: 0.4s;
+			
+			@media screen and (max-width: 930px) {
+				justify-content: center;
+			}
+
+			svg {
+				width: 28px;
+				height: 18px;
+				margin-left: 10px;
+			}
+		}
+	}
+}
+
+.center {
+	display: flex;
+	margin-left: 120px;
+	position: relative;
+	flex-shrink: 0;
+
+	@media screen and (max-width: 930px) {
+		margin-left: 0;
+		margin-bottom: 56px;
+	}
+
+	.bottle-bg {
+		width: 320px;
+		height: 450px;
+		object-fit: cover;
+		border-radius: 160px;
+
+		@media screen and (max-width: 930px) {
+			width: 260px;
+			height: 390px;
+		}
+		@media screen and (max-width: 575px) {
+			width: 220px;
+			height: 340px;
+		}
+	}
+
+	.bottle-img {
+		position: absolute;
+		top: 25%;
+		left: 0;
+		transform: scale(1.6);
+	}
+}
+
+.swiper-pagination {
+	position: absolute;
+	right: 30px;
+	left: auto;
+	top: 100px;
+	width: auto;
+	bottom: auto;
+	z-index: 2;
+	font-size: 14px;
+	font-family: var(--body-font);
+	font-weight: 500;
+}
+
+.button-wrapper {
+	position: absolute;
+	right: 30px;
+	bottom: 20px;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+
+	@media screen and (max-width: 930px) {
+		top: 0;
+		left: 0;
+		width: 100%;
+		justify-content: space-between;
+		padding: 0 60px;
+	}
+	
+	@media screen and (max-width: 575px) {
+		padding: 0 20px;
+	}
+
+	svg {
+		width: 28px;
+	}
+
+	.swiper-button {
+		border: 1px solid var(--body-color);
+		border-radius: 50%;
+		width: 44px;
+		height: 44px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: linear-gradient(to right, var(--body-color) 40%, transparent 0%);
+		background-size: 200% 100%;
+		background-position: right bottom;
+		transition: all 0.3s ease-out;
+		cursor: pointer;
+
+		& + .swiper-button {
+			margin-left: 16px;
+
+			@media screen and (max-width: 930px) {
+				margin-left: 0;
+			}
+		}
+
+		&:hover {
+			background-color: var(--body-color);
+			background-position: left bottom;
+			svg {
+				stroke: #fff;
+			}
+		}
+	}
+
+	.swiper-prev-button {
+		background: linear-gradient(to left, var(--body-color) 40%, transparent 0%);
+		background-size: 200% 100%;
+		background-position: left bottom;
+		transition: all 0.3s ease-out;
+		svg {
+			transform: rotate(-180deg);
+		}
+		&:hover {
+			background-position: right bottom;
+		}
+	}
+}
+
+.swiper-slide {
+	opacity: 0 !important;
+	transition: 0.4s;
+	&-active {
+		opacity: 1 !important;
+	}
+}
+
+.swiper-slide .main-wrapper > *,
+.swiper-slide .main-content > * {
+	transform: translateY(-30px);
+	opacity: 0;
+	transition-duration: 0.8s;
+}
+
+.swiper-slide-active .main-wrapper > *,
+.swiper-slide-active .main-content > * {
+	transform: none;
+	opacity: 1;
+}
+
+.swiper-slide .bottle-bg {
+	transition-duration: 0.6s;
+	opacity: 0;
+	object-position: 60%;
+}
+
+.swiper-slide-active .bottle-bg {
+	opacity: 1;
+	transform: none;
+	object-position: 50%;
+}
+
+.swiper-slide .bottle-img {
+	transition-duration: 0.8s;
+	transform: scale(1.2);
+	opacity: 0;
+}
+
+.swiper-slide-active .bottle-img {
+	opacity: 1;
+	transform: scale(1.6);
+}
+
+[data-sld="1"] {
+	.container,
+	.header {
+		background-color: var(--savanna-bg);
+	}
+}
+
+[data-sld="2"] {
+	.container,
+	.header {
+		background-color: var(--glacier-bg);
+	}
+}
+
+[data-sld="3"] {
+	.container,
+	.header {
+		background-color: var(--coral-bg);
+	}
+}
diff --git a/products-dashboard-ui/README.markdown b/products-dashboard-ui/README.markdown
new file mode 100644
index 0000000..953bb87
--- /dev/null
+++ b/products-dashboard-ui/README.markdown
@@ -0,0 +1,5 @@
+# Products Dashboard UI
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/aybukeceylan/pen/PopNYeJ](https://codepen.io/aybukeceylan/pen/PopNYeJ).
+
+Inspired by: https://dribbble.com/shots/15346148-Product-List
diff --git a/products-dashboard-ui/dist/index.html b/products-dashboard-ui/dist/index.html
new file mode 100644
index 0000000..5229d13
--- /dev/null
+++ b/products-dashboard-ui/dist/index.html
@@ -0,0 +1,361 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Products Dashboard UI</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="app-container">
+  <div class="sidebar">
+    <div class="sidebar-header">
+      <div class="app-icon">
+        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M507.606 371.054a187.217 187.217 0 00-23.051-19.606c-17.316 19.999-37.648 36.808-60.572 50.041-35.508 20.505-75.893 31.452-116.875 31.711 21.762 8.776 45.224 13.38 69.396 13.38 49.524 0 96.084-19.286 131.103-54.305a15 15 0 004.394-10.606 15.028 15.028 0 00-4.395-10.615zM27.445 351.448a187.392 187.392 0 00-23.051 19.606C1.581 373.868 0 377.691 0 381.669s1.581 7.793 4.394 10.606c35.019 35.019 81.579 54.305 131.103 54.305 24.172 0 47.634-4.604 69.396-13.38-40.985-.259-81.367-11.206-116.879-31.713-22.922-13.231-43.254-30.04-60.569-50.039zM103.015 375.508c24.937 14.4 53.928 24.056 84.837 26.854-53.409-29.561-82.274-70.602-95.861-94.135-14.942-25.878-25.041-53.917-30.063-83.421-14.921.64-29.775 2.868-44.227 6.709-6.6 1.576-11.507 7.517-11.507 14.599 0 1.312.172 2.618.512 3.885 15.32 57.142 52.726 100.35 96.309 125.509zM324.148 402.362c30.908-2.799 59.9-12.454 84.837-26.854 43.583-25.159 80.989-68.367 96.31-125.508.34-1.267.512-2.573.512-3.885 0-7.082-4.907-13.023-11.507-14.599-14.452-3.841-29.306-6.07-44.227-6.709-5.022 29.504-15.121 57.543-30.063 83.421-13.588 23.533-42.419 64.554-95.862 94.134zM187.301 366.948c-15.157-24.483-38.696-71.48-38.696-135.903 0-32.646 6.043-64.401 17.945-94.529-16.394-9.351-33.972-16.623-52.273-21.525-8.004-2.142-16.225 2.604-18.37 10.605-16.372 61.078-4.825 121.063 22.064 167.631 16.325 28.275 39.769 54.111 69.33 73.721zM324.684 366.957c29.568-19.611 53.017-45.451 69.344-73.73 26.889-46.569 38.436-106.553 22.064-167.631-2.145-8.001-10.366-12.748-18.37-10.605-18.304 4.902-35.883 12.176-52.279 21.529 11.9 30.126 17.943 61.88 17.943 94.525.001 64.478-23.58 111.488-38.702 135.912zM266.606 69.813c-2.813-2.813-6.637-4.394-10.615-4.394a15 15 0 00-10.606 4.394c-39.289 39.289-66.78 96.005-66.78 161.231 0 65.256 27.522 121.974 66.78 161.231 2.813 2.813 6.637 4.394 10.615 4.394s7.793-1.581 10.606-4.394c39.248-39.247 66.78-95.96 66.78-161.231.001-65.256-27.511-121.964-66.78-161.231z"/></svg>
+      </div>
+    </div>
+    <ul class="sidebar-list">
+      <li class="sidebar-list-item">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+          <span>Home</span>
+        </a>
+      </li>
+      <li class="sidebar-list-item active">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-bag"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
+          <span>Products</span>
+        </a>
+      </li>
+      <li class="sidebar-list-item">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>
+          <span>Statistics</span>
+        </a>
+      </li>
+      <li class="sidebar-list-item">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-inbox"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
+          <span>Inbox</span>
+        </a>
+      </li>
+      <li class="sidebar-list-item">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+          <span>Notifications</span>
+        </a>
+      </li>
+    </ul>
+    <div class="account-info">
+      <div class="account-info-picture">
+        <img src="https://images.unsplash.com/photo-1527736947477-2790e28f3443?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTE2fHx3b21hbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="Account">
+      </div>
+      <div class="account-info-name">Monica G.</div>
+      <button class="account-info-more">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+      </button>
+    </div>
+  </div>
+  <div class="app-content">
+    <div class="app-content-header">
+      <h1 class="app-content-headerText">Products</h1>
+      <button class="mode-switch" title="Switch Theme">
+        <svg class="moon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="24" height="24" viewBox="0 0 24 24">
+          <defs></defs>
+          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
+        </svg>
+      </button>
+      <button class="app-content-headerButton">Add Product</button>
+    </div>
+    <div class="app-content-actions">
+      <input class="search-bar" placeholder="Search..." type="text">
+      <div class="app-content-actions-wrapper">
+        <div class="filter-button-wrapper">
+          <button class="action-button filter jsFilter"><span>Filter</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg></button>
+          <div class="filter-menu">
+            <label>Category</label>
+            <select>
+              <option>All Categories</option>
+              <option>Furniture</option>                     <option>Decoration</option>
+              <option>Kitchen</option>
+              <option>Bathroom</option>
+            </select>
+            <label>Status</label>
+            <select>
+              <option>All Status</option>
+              <option>Active</option>
+              <option>Disabled</option>
+            </select>
+            <div class="filter-menu-buttons">
+              <button class="filter-button reset">
+                Reset
+              </button>
+              <button class="filter-button apply">
+                Apply
+              </button>
+            </div>
+          </div>
+        </div>
+        <button class="action-button list active" title="List View">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+        </button>
+        <button class="action-button grid" title="Grid View">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+        </button>
+      </div>
+    </div>
+    <div class="products-area-wrapper tableView">
+      <div class="products-header">
+        <div class="product-cell image">
+          Items
+          <button class="sort-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M496.1 138.3L375.7 17.9c-7.9-7.9-20.6-7.9-28.5 0L226.9 138.3c-7.9 7.9-7.9 20.6 0 28.5 7.9 7.9 20.6 7.9 28.5 0l85.7-85.7v352.8c0 11.3 9.1 20.4 20.4 20.4 11.3 0 20.4-9.1 20.4-20.4V81.1l85.7 85.7c7.9 7.9 20.6 7.9 28.5 0 7.9-7.8 7.9-20.6 0-28.5zM287.1 347.2c-7.9-7.9-20.6-7.9-28.5 0l-85.7 85.7V80.1c0-11.3-9.1-20.4-20.4-20.4-11.3 0-20.4 9.1-20.4 20.4v352.8l-85.7-85.7c-7.9-7.9-20.6-7.9-28.5 0-7.9 7.9-7.9 20.6 0 28.5l120.4 120.4c7.9 7.9 20.6 7.9 28.5 0l120.4-120.4c7.8-7.9 7.8-20.7-.1-28.5z"/></svg>
+          </button>
+        </div>
+        <div class="product-cell category">Category<button class="sort-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M496.1 138.3L375.7 17.9c-7.9-7.9-20.6-7.9-28.5 0L226.9 138.3c-7.9 7.9-7.9 20.6 0 28.5 7.9 7.9 20.6 7.9 28.5 0l85.7-85.7v352.8c0 11.3 9.1 20.4 20.4 20.4 11.3 0 20.4-9.1 20.4-20.4V81.1l85.7 85.7c7.9 7.9 20.6 7.9 28.5 0 7.9-7.8 7.9-20.6 0-28.5zM287.1 347.2c-7.9-7.9-20.6-7.9-28.5 0l-85.7 85.7V80.1c0-11.3-9.1-20.4-20.4-20.4-11.3 0-20.4 9.1-20.4 20.4v352.8l-85.7-85.7c-7.9-7.9-20.6-7.9-28.5 0-7.9 7.9-7.9 20.6 0 28.5l120.4 120.4c7.9 7.9 20.6 7.9 28.5 0l120.4-120.4c7.8-7.9 7.8-20.7-.1-28.5z"/></svg>
+          </button></div>
+        <div class="product-cell status-cell">Status<button class="sort-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M496.1 138.3L375.7 17.9c-7.9-7.9-20.6-7.9-28.5 0L226.9 138.3c-7.9 7.9-7.9 20.6 0 28.5 7.9 7.9 20.6 7.9 28.5 0l85.7-85.7v352.8c0 11.3 9.1 20.4 20.4 20.4 11.3 0 20.4-9.1 20.4-20.4V81.1l85.7 85.7c7.9 7.9 20.6 7.9 28.5 0 7.9-7.8 7.9-20.6 0-28.5zM287.1 347.2c-7.9-7.9-20.6-7.9-28.5 0l-85.7 85.7V80.1c0-11.3-9.1-20.4-20.4-20.4-11.3 0-20.4 9.1-20.4 20.4v352.8l-85.7-85.7c-7.9-7.9-20.6-7.9-28.5 0-7.9 7.9-7.9 20.6 0 28.5l120.4 120.4c7.9 7.9 20.6 7.9 28.5 0l120.4-120.4c7.8-7.9 7.8-20.7-.1-28.5z"/></svg>
+          </button></div>
+        <div class="product-cell sales">Sales<button class="sort-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M496.1 138.3L375.7 17.9c-7.9-7.9-20.6-7.9-28.5 0L226.9 138.3c-7.9 7.9-7.9 20.6 0 28.5 7.9 7.9 20.6 7.9 28.5 0l85.7-85.7v352.8c0 11.3 9.1 20.4 20.4 20.4 11.3 0 20.4-9.1 20.4-20.4V81.1l85.7 85.7c7.9 7.9 20.6 7.9 28.5 0 7.9-7.8 7.9-20.6 0-28.5zM287.1 347.2c-7.9-7.9-20.6-7.9-28.5 0l-85.7 85.7V80.1c0-11.3-9.1-20.4-20.4-20.4-11.3 0-20.4 9.1-20.4 20.4v352.8l-85.7-85.7c-7.9-7.9-20.6-7.9-28.5 0-7.9 7.9-7.9 20.6 0 28.5l120.4 120.4c7.9 7.9 20.6 7.9 28.5 0l120.4-120.4c7.8-7.9 7.8-20.7-.1-28.5z"/></svg>
+          </button></div>
+        <div class="product-cell stock">Stock<button class="sort-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M496.1 138.3L375.7 17.9c-7.9-7.9-20.6-7.9-28.5 0L226.9 138.3c-7.9 7.9-7.9 20.6 0 28.5 7.9 7.9 20.6 7.9 28.5 0l85.7-85.7v352.8c0 11.3 9.1 20.4 20.4 20.4 11.3 0 20.4-9.1 20.4-20.4V81.1l85.7 85.7c7.9 7.9 20.6 7.9 28.5 0 7.9-7.8 7.9-20.6 0-28.5zM287.1 347.2c-7.9-7.9-20.6-7.9-28.5 0l-85.7 85.7V80.1c0-11.3-9.1-20.4-20.4-20.4-11.3 0-20.4 9.1-20.4 20.4v352.8l-85.7-85.7c-7.9-7.9-20.6-7.9-28.5 0-7.9 7.9-7.9 20.6 0 28.5l120.4 120.4c7.9 7.9 20.6 7.9 28.5 0l120.4-120.4c7.8-7.9 7.8-20.7-.1-28.5z"/></svg>
+          </button></div>
+        <div class="product-cell price">Price<button class="sort-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M496.1 138.3L375.7 17.9c-7.9-7.9-20.6-7.9-28.5 0L226.9 138.3c-7.9 7.9-7.9 20.6 0 28.5 7.9 7.9 20.6 7.9 28.5 0l85.7-85.7v352.8c0 11.3 9.1 20.4 20.4 20.4 11.3 0 20.4-9.1 20.4-20.4V81.1l85.7 85.7c7.9 7.9 20.6 7.9 28.5 0 7.9-7.8 7.9-20.6 0-28.5zM287.1 347.2c-7.9-7.9-20.6-7.9-28.5 0l-85.7 85.7V80.1c0-11.3-9.1-20.4-20.4-20.4-11.3 0-20.4 9.1-20.4 20.4v352.8l-85.7-85.7c-7.9-7.9-20.6-7.9-28.5 0-7.9 7.9-7.9 20.6 0 28.5l120.4 120.4c7.9 7.9 20.6 7.9 28.5 0l120.4-120.4c7.8-7.9 7.8-20.7-.1-28.5z"/></svg>
+          </button></div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="product">
+            <span>Ocean</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Furniture</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>11</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>36</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$560</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1484154218962-a197022b5858?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8a2l0Y2hlbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Lou</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Kitchen</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status disabled">Disabled</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>6</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>46</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$710</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Yellow</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Decoration</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>61</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>56</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$360</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1595526114035-0d45ed16cfbf?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8YmVkcm9vbXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Dreamy</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Bedroom</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status disabled">Disabled</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>41</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>66</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$260</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1554995207-c18c203602cb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8aW50ZXJpb3J8ZW58MHwwfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Boheme</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Furniture</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>32</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>40</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$350</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1507652313519-d4e9174996dd?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGludGVyaW9yfGVufDB8MHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Sky</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Bathroom</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status disabled">Disabled</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>22</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>44</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$160</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1516455590571-18256e5bb9ff?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzB8fGludGVyaW9yfGVufDB8MHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Midnight</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Furniture</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>23</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>45</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$340</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1554995207-c18c203602cb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8aW50ZXJpb3J8ZW58MHwwfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Boheme</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Furniture</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>32</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>40</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$350</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1511389026070-a14ae610a1be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzR8fGludGVyaW9yfGVufDB8MHwwfHw%3D&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Palm</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Decoration</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>24</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>46</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$60</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1600494603989-9650cf6ddd3d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTV8fGludGVyaW9yfGVufDB8MHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Forest</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Living Room</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>41</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>16</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$270</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1560448204-603b3fc33ddc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Njd8fGludGVyaW9yfGVufDB8MHwwfHw%3D&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Sand</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Living Room</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status disabled">Disabled</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>52</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>16</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$230</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1533779283484-8ad4940aa3a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8ODd8fGludGVyaW9yfGVufDB8MHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Autumn</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Decoration</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>21</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>46</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$252</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1554995207-c18c203602cb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8aW50ZXJpb3J8ZW58MHwwfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Boheme</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Furniture</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>32</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>40</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$350</div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/products-dashboard-ui/dist/script.js b/products-dashboard-ui/dist/script.js
new file mode 100644
index 0000000..3145b6c
--- /dev/null
+++ b/products-dashboard-ui/dist/script.js
@@ -0,0 +1,24 @@
+document.querySelector(".jsFilter").addEventListener("click", function () {
+  document.querySelector(".filter-menu").classList.toggle("active");
+});
+
+document.querySelector(".grid").addEventListener("click", function () {
+  document.querySelector(".list").classList.remove("active");
+  document.querySelector(".grid").classList.add("active");
+  document.querySelector(".products-area-wrapper").classList.add("gridView");
+  document
+    .querySelector(".products-area-wrapper")
+    .classList.remove("tableView");
+});
+
+document.querySelector(".list").addEventListener("click", function () {
+  document.querySelector(".list").classList.add("active");
+  document.querySelector(".grid").classList.remove("active");
+  document.querySelector(".products-area-wrapper").classList.remove("gridView");
+  document.querySelector(".products-area-wrapper").classList.add("tableView");
+});
+
+var modeSwitch = document.querySelector('.mode-switch');
+modeSwitch.addEventListener('click', function () {                      document.documentElement.classList.toggle('light');
+ modeSwitch.classList.toggle('active');
+});
\ No newline at end of file
diff --git a/products-dashboard-ui/dist/style.css b/products-dashboard-ui/dist/style.css
new file mode 100644
index 0000000..f1dbaed
--- /dev/null
+++ b/products-dashboard-ui/dist/style.css
@@ -0,0 +1,605 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --app-bg: #101827;
+  --sidebar: rgba(21, 30, 47,1);
+  --sidebar-main-color: #fff;
+  --table-border: #1a2131;
+  --table-header: #1a2131;
+  --app-content-main-color: #fff;
+  --sidebar-link: #fff;
+  --sidebar-active-link: #1d283c;
+  --sidebar-hover-link: #1a2539;
+  --action-color: #2869ff;
+  --action-color-hover: #6291fd;
+  --app-content-secondary-color: #1d283c;
+  --filter-reset: #2c394f;
+  --filter-shadow: rgba(16, 24, 39, 0.8) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+}
+
+.light:root {
+  --app-bg: #fff;
+  --sidebar: #f3f6fd;
+  --app-content-secondary-color: #f3f6fd;
+  --app-content-main-color: #1f1c2e;
+  --sidebar-link: #1f1c2e;
+  --sidebar-hover-link: rgba(195, 207, 244, 0.5);
+  --sidebar-active-link: rgba(195, 207, 244, 1);
+  --sidebar-main-color: #1f1c2e;
+  --filter-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+}
+
+body, html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  overflow: hidden;
+  font-family: "Poppins", sans-serif;
+  background-color: var(--app-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.app-container {
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  max-width: 1280px;
+  display: flex;
+  overflow: hidden;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  max-width: 2000px;
+  margin: 0 auto;
+}
+
+.sidebar {
+  flex-basis: 200px;
+  max-width: 200px;
+  flex-shrink: 0;
+  background-color: var(--sidebar);
+  display: flex;
+  flex-direction: column;
+}
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+}
+.sidebar-list {
+  list-style-type: none;
+  padding: 0;
+}
+.sidebar-list-item {
+  position: relative;
+  margin-bottom: 4px;
+}
+.sidebar-list-item a {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 10px 16px;
+  color: var(--sidebar-link);
+  text-decoration: none;
+  font-size: 14px;
+  line-height: 24px;
+}
+.sidebar-list-item svg {
+  margin-right: 8px;
+}
+.sidebar-list-item:hover {
+  background-color: var(--sidebar-hover-link);
+}
+.sidebar-list-item.active {
+  background-color: var(--sidebar-active-link);
+}
+.sidebar-list-item.active:before {
+  content: "";
+  position: absolute;
+  right: 0;
+  background-color: var(--action-color);
+  height: 100%;
+  width: 4px;
+}
+@media screen and (max-width: 1024px) {
+  .sidebar {
+    display: none;
+  }
+}
+
+.mode-switch {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  color: var(--app-content-main-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  margin-right: 8px;
+  cursor: pointer;
+}
+.mode-switch .moon {
+  fill: var(--app-content-main-color);
+}
+
+.mode-switch.active .moon {
+  fill: none;
+}
+
+.account-info {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  margin-top: auto;
+}
+.account-info-picture {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.account-info-picture img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.account-info-name {
+  font-size: 14px;
+  color: var(--sidebar-main-color);
+  margin: 0 8px;
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.account-info-more {
+  color: var(--sidebar-main-color);
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  margin-left: auto;
+}
+
+.app-icon {
+  color: var(--sidebar-main-color);
+}
+.app-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.app-content {
+  padding: 16px;
+  background-color: var(--app-bg);
+  height: 100%;
+  flex: 1;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.app-content-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 4px;
+}
+.app-content-headerText {
+  color: var(--app-content-main-color);
+  font-size: 24px;
+  line-height: 32px;
+  margin: 0;
+}
+.app-content-headerButton {
+  background-color: var(--action-color);
+  color: #fff;
+  font-size: 14px;
+  line-height: 24px;
+  border: none;
+  border-radius: 4px;
+  height: 32px;
+  padding: 0 16px;
+  transition: 0.2s;
+  cursor: pointer;
+}
+.app-content-headerButton:hover {
+  background-color: var(--action-color-hover);
+}
+.app-content-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 4px;
+}
+.app-content-actions-wrapper {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+@media screen and (max-width: 520px) {
+  .app-content-actions {
+    flex-direction: column;
+  }
+  .app-content-actions .search-bar {
+    max-width: 100%;
+    order: 2;
+  }
+  .app-content-actions .app-content-actions-wrapper {
+    padding-bottom: 16px;
+    order: 1;
+  }
+}
+
+.search-bar {
+  background-color: var(--app-content-secondary-color);
+  border: 1px solid var(--app-content-secondary-color);
+  color: var(--app-content-main-color);
+  font-size: 14px;
+  line-height: 24px;
+  border-radius: 4px;
+  padding: 0px 10px 0px 32px;
+  height: 32px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
+  background-size: 16px;
+  background-repeat: no-repeat;
+  background-position: left 10px center;
+  width: 100%;
+  max-width: 320px;
+  transition: 0.2s;
+}
+.light .search-bar {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f1c2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
+}
+.search-bar:placeholder {
+  color: var(--app-content-main-color);
+}
+.search-bar:hover {
+  border-color: var(--action-color-hover);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236291fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
+}
+.search-bar:focus {
+  outline: none;
+  border-color: var(--action-color);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232869ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
+}
+
+.action-button {
+  border-radius: 4px;
+  height: 32px;
+  background-color: var(--app-content-secondary-color);
+  border: 1px solid var(--app-content-secondary-color);
+  display: flex;
+  align-items: center;
+  color: var(--app-content-main-color);
+  font-size: 14px;
+  margin-left: 8px;
+  cursor: pointer;
+}
+.action-button span {
+  margin-right: 4px;
+}
+.action-button:hover {
+  border-color: var(--action-color-hover);
+}
+.action-button:focus, .action-button.active {
+  outline: none;
+  color: var(--action-color);
+  border-color: var(--action-color);
+}
+
+.filter-button-wrapper {
+  position: relative;
+}
+
+.filter-menu {
+  background-color: var(--app-content-secondary-color);
+  position: absolute;
+  top: calc(100% + 16px);
+  right: -74px;
+  border-radius: 4px;
+  padding: 8px;
+  width: 220px;
+  z-index: 2;
+  box-shadow: var(--filter-shadow);
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.2s;
+}
+.filter-menu:before {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid var(--app-content-secondary-color);
+  bottom: 100%;
+  left: 50%;
+  transform: translatex(-50%);
+}
+.filter-menu.active {
+  visibility: visible;
+  opacity: 1;
+  top: calc(100% + 8px);
+}
+.filter-menu label {
+  display: block;
+  font-size: 14px;
+  color: var(--app-content-main-color);
+  margin-bottom: 8px;
+}
+.filter-menu select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  padding: 8px 24px 8px 8px;
+  background-position: right 4px center;
+  border: 1px solid var(--app-content-main-color);
+  border-radius: 4px;
+  color: var(--app-content-main-color);
+  font-size: 12px;
+  background-color: transparent;
+  margin-bottom: 16px;
+  width: 100%;
+}
+.filter-menu select option {
+  font-size: 14px;
+}
+.light .filter-menu select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f1c2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+}
+.filter-menu select:hover {
+  border-color: var(--action-color-hover);
+}
+.filter-menu select:focus, .filter-menu select.active {
+  outline: none;
+  color: var(--action-color);
+  border-color: var(--action-color);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232869ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+}
+
+.filter-menu-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.filter-button {
+  border-radius: 2px;
+  font-size: 12px;
+  padding: 4px 8px;
+  cursor: pointer;
+  border: none;
+  color: #fff;
+}
+.filter-button.apply {
+  background-color: var(--action-color);
+}
+.filter-button.reset {
+  background-color: var(--filter-reset);
+}
+
+.products-area-wrapper {
+  width: 100%;
+  max-height: 100%;
+  overflow: auto;
+  padding: 0 4px;
+}
+
+.tableView .products-header {
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  background-color: var(--app-content-secondary-color);
+  position: sticky;
+  top: 0;
+}
+.tableView .products-row {
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+}
+.tableView .products-row:hover {
+  box-shadow: var(--filter-shadow);
+  background-color: var(--app-content-secondary-color);
+}
+.tableView .products-row .cell-more-button {
+  display: none;
+}
+.tableView .product-cell {
+  flex: 1;
+  padding: 8px 16px;
+  color: var(--app-content-main-color);
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+.tableView .product-cell img {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  margin-right: 6px;
+}
+@media screen and (max-width: 780px) {
+  .tableView .product-cell {
+    font-size: 12px;
+  }
+  .tableView .product-cell.image span {
+    display: none;
+  }
+  .tableView .product-cell.image {
+    flex: 0.2;
+  }
+}
+@media screen and (max-width: 520px) {
+  .tableView .product-cell.category, .tableView .product-cell.sales {
+    display: none;
+  }
+  .tableView .product-cell.status-cell {
+    flex: 0.4;
+  }
+  .tableView .product-cell.stock, .tableView .product-cell.price {
+    flex: 0.2;
+  }
+}
+@media screen and (max-width: 480px) {
+  .tableView .product-cell.stock {
+    display: none;
+  }
+  .tableView .product-cell.price {
+    flex: 0.4;
+  }
+}
+.tableView .sort-button {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--app-content-main-color);
+  margin-left: 4px;
+  display: flex;
+  align-items: center;
+}
+.tableView .sort-button:hover {
+  color: var(--action-color);
+}
+.tableView .sort-button svg {
+  width: 12px;
+}
+.tableView .cell-label {
+  display: none;
+}
+
+.status {
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  font-size: 12px;
+}
+.status:before {
+  content: "";
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  margin-right: 4px;
+}
+.status.active {
+  color: #2ba972;
+  background-color: rgba(43, 169, 114, 0.2);
+}
+.status.active:before {
+  background-color: #2ba972;
+}
+.status.disabled {
+  color: #59719d;
+  background-color: rgba(89, 113, 157, 0.2);
+}
+.status.disabled:before {
+  background-color: #59719d;
+}
+
+.gridView {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -8px;
+}
+@media screen and (max-width: 520px) {
+  .gridView {
+    margin: 0;
+  }
+}
+.gridView .products-header {
+  display: none;
+}
+.gridView .products-row {
+  margin: 8px;
+  width: calc(25% - 16px);
+  background-color: var(--app-content-secondary-color);
+  padding: 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: transform 0.2s;
+  position: relative;
+}
+.gridView .products-row:hover {
+  transform: scale(1.01);
+  box-shadow: var(--filter-shadow);
+}
+.gridView .products-row:hover .cell-more-button {
+  display: flex;
+}
+@media screen and (max-width: 1024px) {
+  .gridView .products-row {
+    width: calc(33.3% - 16px);
+  }
+}
+@media screen and (max-width: 820px) {
+  .gridView .products-row {
+    width: calc(50% - 16px);
+  }
+}
+@media screen and (max-width: 520px) {
+  .gridView .products-row {
+    width: 100%;
+    margin: 8px 0;
+  }
+  .gridView .products-row:hover {
+    transform: none;
+  }
+}
+.gridView .products-row .cell-more-button {
+  border: none;
+  padding: 0;
+  border-radius: 4px;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background-color: rgba(16, 24, 39, 0.7);
+  color: #fff;
+  cursor: pointer;
+  display: none;
+}
+.gridView .product-cell {
+  color: var(--app-content-main-color);
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+.gridView .product-cell:not(.image) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.gridView .product-cell.image span {
+  font-size: 18px;
+  line-height: 24px;
+}
+.gridView .product-cell img {
+  width: 100%;
+  height: 140px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+.gridView .cell-label {
+  opacity: 0.6;
+}
\ No newline at end of file
diff --git a/products-dashboard-ui/license.txt b/products-dashboard-ui/license.txt
new file mode 100644
index 0000000..14d917f
--- /dev/null
+++ b/products-dashboard-ui/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Aybüke Ceylan (https://codepen.io/aybukeceylan/pen/PopNYeJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/products-dashboard-ui/src/index.html b/products-dashboard-ui/src/index.html
new file mode 100644
index 0000000..c990460
--- /dev/null
+++ b/products-dashboard-ui/src/index.html
@@ -0,0 +1,345 @@
+<div class="app-container">
+  <div class="sidebar">
+    <div class="sidebar-header">
+      <div class="app-icon">
+        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M507.606 371.054a187.217 187.217 0 00-23.051-19.606c-17.316 19.999-37.648 36.808-60.572 50.041-35.508 20.505-75.893 31.452-116.875 31.711 21.762 8.776 45.224 13.38 69.396 13.38 49.524 0 96.084-19.286 131.103-54.305a15 15 0 004.394-10.606 15.028 15.028 0 00-4.395-10.615zM27.445 351.448a187.392 187.392 0 00-23.051 19.606C1.581 373.868 0 377.691 0 381.669s1.581 7.793 4.394 10.606c35.019 35.019 81.579 54.305 131.103 54.305 24.172 0 47.634-4.604 69.396-13.38-40.985-.259-81.367-11.206-116.879-31.713-22.922-13.231-43.254-30.04-60.569-50.039zM103.015 375.508c24.937 14.4 53.928 24.056 84.837 26.854-53.409-29.561-82.274-70.602-95.861-94.135-14.942-25.878-25.041-53.917-30.063-83.421-14.921.64-29.775 2.868-44.227 6.709-6.6 1.576-11.507 7.517-11.507 14.599 0 1.312.172 2.618.512 3.885 15.32 57.142 52.726 100.35 96.309 125.509zM324.148 402.362c30.908-2.799 59.9-12.454 84.837-26.854 43.583-25.159 80.989-68.367 96.31-125.508.34-1.267.512-2.573.512-3.885 0-7.082-4.907-13.023-11.507-14.599-14.452-3.841-29.306-6.07-44.227-6.709-5.022 29.504-15.121 57.543-30.063 83.421-13.588 23.533-42.419 64.554-95.862 94.134zM187.301 366.948c-15.157-24.483-38.696-71.48-38.696-135.903 0-32.646 6.043-64.401 17.945-94.529-16.394-9.351-33.972-16.623-52.273-21.525-8.004-2.142-16.225 2.604-18.37 10.605-16.372 61.078-4.825 121.063 22.064 167.631 16.325 28.275 39.769 54.111 69.33 73.721zM324.684 366.957c29.568-19.611 53.017-45.451 69.344-73.73 26.889-46.569 38.436-106.553 22.064-167.631-2.145-8.001-10.366-12.748-18.37-10.605-18.304 4.902-35.883 12.176-52.279 21.529 11.9 30.126 17.943 61.88 17.943 94.525.001 64.478-23.58 111.488-38.702 135.912zM266.606 69.813c-2.813-2.813-6.637-4.394-10.615-4.394a15 15 0 00-10.606 4.394c-39.289 39.289-66.78 96.005-66.78 161.231 0 65.256 27.522 121.974 66.78 161.231 2.813 2.813 6.637 4.394 10.615 4.394s7.793-1.581 10.606-4.394c39.248-39.247 66.78-95.96 66.78-161.231.001-65.256-27.511-121.964-66.78-161.231z"/></svg>
+      </div>
+    </div>
+    <ul class="sidebar-list">
+      <li class="sidebar-list-item">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+          <span>Home</span>
+        </a>
+      </li>
+      <li class="sidebar-list-item active">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-bag"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
+          <span>Products</span>
+        </a>
+      </li>
+      <li class="sidebar-list-item">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>
+          <span>Statistics</span>
+        </a>
+      </li>
+      <li class="sidebar-list-item">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-inbox"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
+          <span>Inbox</span>
+        </a>
+      </li>
+      <li class="sidebar-list-item">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+          <span>Notifications</span>
+        </a>
+      </li>
+    </ul>
+    <div class="account-info">
+      <div class="account-info-picture">
+        <img src="https://images.unsplash.com/photo-1527736947477-2790e28f3443?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTE2fHx3b21hbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="Account">
+      </div>
+      <div class="account-info-name">Monica G.</div>
+      <button class="account-info-more">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+      </button>
+    </div>
+  </div>
+  <div class="app-content">
+    <div class="app-content-header">
+      <h1 class="app-content-headerText">Products</h1>
+      <button class="mode-switch" title="Switch Theme">
+        <svg class="moon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="24" height="24" viewBox="0 0 24 24">
+          <defs></defs>
+          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
+        </svg>
+      </button>
+      <button class="app-content-headerButton">Add Product</button>
+    </div>
+    <div class="app-content-actions">
+      <input class="search-bar" placeholder="Search..." type="text">
+      <div class="app-content-actions-wrapper">
+        <div class="filter-button-wrapper">
+          <button class="action-button filter jsFilter"><span>Filter</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg></button>
+          <div class="filter-menu">
+            <label>Category</label>
+            <select>
+              <option>All Categories</option>
+              <option>Furniture</option>                     <option>Decoration</option>
+              <option>Kitchen</option>
+              <option>Bathroom</option>
+            </select>
+            <label>Status</label>
+            <select>
+              <option>All Status</option>
+              <option>Active</option>
+              <option>Disabled</option>
+            </select>
+            <div class="filter-menu-buttons">
+              <button class="filter-button reset">
+                Reset
+              </button>
+              <button class="filter-button apply">
+                Apply
+              </button>
+            </div>
+          </div>
+        </div>
+        <button class="action-button list active" title="List View">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+        </button>
+        <button class="action-button grid" title="Grid View">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+        </button>
+      </div>
+    </div>
+    <div class="products-area-wrapper tableView">
+      <div class="products-header">
+        <div class="product-cell image">
+          Items
+          <button class="sort-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M496.1 138.3L375.7 17.9c-7.9-7.9-20.6-7.9-28.5 0L226.9 138.3c-7.9 7.9-7.9 20.6 0 28.5 7.9 7.9 20.6 7.9 28.5 0l85.7-85.7v352.8c0 11.3 9.1 20.4 20.4 20.4 11.3 0 20.4-9.1 20.4-20.4V81.1l85.7 85.7c7.9 7.9 20.6 7.9 28.5 0 7.9-7.8 7.9-20.6 0-28.5zM287.1 347.2c-7.9-7.9-20.6-7.9-28.5 0l-85.7 85.7V80.1c0-11.3-9.1-20.4-20.4-20.4-11.3 0-20.4 9.1-20.4 20.4v352.8l-85.7-85.7c-7.9-7.9-20.6-7.9-28.5 0-7.9 7.9-7.9 20.6 0 28.5l120.4 120.4c7.9 7.9 20.6 7.9 28.5 0l120.4-120.4c7.8-7.9 7.8-20.7-.1-28.5z"/></svg>
+          </button>
+        </div>
+        <div class="product-cell category">Category<button class="sort-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M496.1 138.3L375.7 17.9c-7.9-7.9-20.6-7.9-28.5 0L226.9 138.3c-7.9 7.9-7.9 20.6 0 28.5 7.9 7.9 20.6 7.9 28.5 0l85.7-85.7v352.8c0 11.3 9.1 20.4 20.4 20.4 11.3 0 20.4-9.1 20.4-20.4V81.1l85.7 85.7c7.9 7.9 20.6 7.9 28.5 0 7.9-7.8 7.9-20.6 0-28.5zM287.1 347.2c-7.9-7.9-20.6-7.9-28.5 0l-85.7 85.7V80.1c0-11.3-9.1-20.4-20.4-20.4-11.3 0-20.4 9.1-20.4 20.4v352.8l-85.7-85.7c-7.9-7.9-20.6-7.9-28.5 0-7.9 7.9-7.9 20.6 0 28.5l120.4 120.4c7.9 7.9 20.6 7.9 28.5 0l120.4-120.4c7.8-7.9 7.8-20.7-.1-28.5z"/></svg>
+          </button></div>
+        <div class="product-cell status-cell">Status<button class="sort-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M496.1 138.3L375.7 17.9c-7.9-7.9-20.6-7.9-28.5 0L226.9 138.3c-7.9 7.9-7.9 20.6 0 28.5 7.9 7.9 20.6 7.9 28.5 0l85.7-85.7v352.8c0 11.3 9.1 20.4 20.4 20.4 11.3 0 20.4-9.1 20.4-20.4V81.1l85.7 85.7c7.9 7.9 20.6 7.9 28.5 0 7.9-7.8 7.9-20.6 0-28.5zM287.1 347.2c-7.9-7.9-20.6-7.9-28.5 0l-85.7 85.7V80.1c0-11.3-9.1-20.4-20.4-20.4-11.3 0-20.4 9.1-20.4 20.4v352.8l-85.7-85.7c-7.9-7.9-20.6-7.9-28.5 0-7.9 7.9-7.9 20.6 0 28.5l120.4 120.4c7.9 7.9 20.6 7.9 28.5 0l120.4-120.4c7.8-7.9 7.8-20.7-.1-28.5z"/></svg>
+          </button></div>
+        <div class="product-cell sales">Sales<button class="sort-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M496.1 138.3L375.7 17.9c-7.9-7.9-20.6-7.9-28.5 0L226.9 138.3c-7.9 7.9-7.9 20.6 0 28.5 7.9 7.9 20.6 7.9 28.5 0l85.7-85.7v352.8c0 11.3 9.1 20.4 20.4 20.4 11.3 0 20.4-9.1 20.4-20.4V81.1l85.7 85.7c7.9 7.9 20.6 7.9 28.5 0 7.9-7.8 7.9-20.6 0-28.5zM287.1 347.2c-7.9-7.9-20.6-7.9-28.5 0l-85.7 85.7V80.1c0-11.3-9.1-20.4-20.4-20.4-11.3 0-20.4 9.1-20.4 20.4v352.8l-85.7-85.7c-7.9-7.9-20.6-7.9-28.5 0-7.9 7.9-7.9 20.6 0 28.5l120.4 120.4c7.9 7.9 20.6 7.9 28.5 0l120.4-120.4c7.8-7.9 7.8-20.7-.1-28.5z"/></svg>
+          </button></div>
+        <div class="product-cell stock">Stock<button class="sort-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M496.1 138.3L375.7 17.9c-7.9-7.9-20.6-7.9-28.5 0L226.9 138.3c-7.9 7.9-7.9 20.6 0 28.5 7.9 7.9 20.6 7.9 28.5 0l85.7-85.7v352.8c0 11.3 9.1 20.4 20.4 20.4 11.3 0 20.4-9.1 20.4-20.4V81.1l85.7 85.7c7.9 7.9 20.6 7.9 28.5 0 7.9-7.8 7.9-20.6 0-28.5zM287.1 347.2c-7.9-7.9-20.6-7.9-28.5 0l-85.7 85.7V80.1c0-11.3-9.1-20.4-20.4-20.4-11.3 0-20.4 9.1-20.4 20.4v352.8l-85.7-85.7c-7.9-7.9-20.6-7.9-28.5 0-7.9 7.9-7.9 20.6 0 28.5l120.4 120.4c7.9 7.9 20.6 7.9 28.5 0l120.4-120.4c7.8-7.9 7.8-20.7-.1-28.5z"/></svg>
+          </button></div>
+        <div class="product-cell price">Price<button class="sort-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M496.1 138.3L375.7 17.9c-7.9-7.9-20.6-7.9-28.5 0L226.9 138.3c-7.9 7.9-7.9 20.6 0 28.5 7.9 7.9 20.6 7.9 28.5 0l85.7-85.7v352.8c0 11.3 9.1 20.4 20.4 20.4 11.3 0 20.4-9.1 20.4-20.4V81.1l85.7 85.7c7.9 7.9 20.6 7.9 28.5 0 7.9-7.8 7.9-20.6 0-28.5zM287.1 347.2c-7.9-7.9-20.6-7.9-28.5 0l-85.7 85.7V80.1c0-11.3-9.1-20.4-20.4-20.4-11.3 0-20.4 9.1-20.4 20.4v352.8l-85.7-85.7c-7.9-7.9-20.6-7.9-28.5 0-7.9 7.9-7.9 20.6 0 28.5l120.4 120.4c7.9 7.9 20.6 7.9 28.5 0l120.4-120.4c7.8-7.9 7.8-20.7-.1-28.5z"/></svg>
+          </button></div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="product">
+            <span>Ocean</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Furniture</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>11</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>36</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$560</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1484154218962-a197022b5858?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8a2l0Y2hlbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Lou</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Kitchen</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status disabled">Disabled</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>6</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>46</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$710</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Yellow</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Decoration</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>61</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>56</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$360</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1595526114035-0d45ed16cfbf?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8YmVkcm9vbXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Dreamy</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Bedroom</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status disabled">Disabled</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>41</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>66</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$260</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1554995207-c18c203602cb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8aW50ZXJpb3J8ZW58MHwwfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Boheme</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Furniture</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>32</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>40</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$350</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1507652313519-d4e9174996dd?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGludGVyaW9yfGVufDB8MHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Sky</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Bathroom</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status disabled">Disabled</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>22</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>44</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$160</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1516455590571-18256e5bb9ff?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzB8fGludGVyaW9yfGVufDB8MHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Midnight</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Furniture</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>23</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>45</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$340</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1554995207-c18c203602cb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8aW50ZXJpb3J8ZW58MHwwfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Boheme</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Furniture</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>32</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>40</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$350</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1511389026070-a14ae610a1be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzR8fGludGVyaW9yfGVufDB8MHwwfHw%3D&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Palm</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Decoration</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>24</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>46</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$60</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1600494603989-9650cf6ddd3d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTV8fGludGVyaW9yfGVufDB8MHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Forest</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Living Room</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>41</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>16</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$270</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1560448204-603b3fc33ddc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Njd8fGludGVyaW9yfGVufDB8MHwwfHw%3D&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Sand</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Living Room</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status disabled">Disabled</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>52</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>16</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$230</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1533779283484-8ad4940aa3a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8ODd8fGludGVyaW9yfGVufDB8MHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Autumn</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Decoration</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>21</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>46</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$252</div>
+      </div>
+      <div class="products-row">
+        <button class="cell-more-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+        </button>
+          <div class="product-cell image">
+            <img src="https://images.unsplash.com/photo-1554995207-c18c203602cb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8aW50ZXJpb3J8ZW58MHwwfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="product">
+            <span>Boheme</span>
+          </div>
+        <div class="product-cell category"><span class="cell-label">Category:</span>Furniture</div>
+        <div class="product-cell status-cell">
+          <span class="cell-label">Status:</span>
+          <span class="status active">Active</span>
+        </div>
+        <div class="product-cell sales"><span class="cell-label">Sales:</span>32</div>
+        <div class="product-cell stock"><span class="cell-label">Stock:</span>40</div>
+        <div class="product-cell price"><span class="cell-label">Price:</span>$350</div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/products-dashboard-ui/src/script.js b/products-dashboard-ui/src/script.js
new file mode 100644
index 0000000..3145b6c
--- /dev/null
+++ b/products-dashboard-ui/src/script.js
@@ -0,0 +1,24 @@
+document.querySelector(".jsFilter").addEventListener("click", function () {
+  document.querySelector(".filter-menu").classList.toggle("active");
+});
+
+document.querySelector(".grid").addEventListener("click", function () {
+  document.querySelector(".list").classList.remove("active");
+  document.querySelector(".grid").classList.add("active");
+  document.querySelector(".products-area-wrapper").classList.add("gridView");
+  document
+    .querySelector(".products-area-wrapper")
+    .classList.remove("tableView");
+});
+
+document.querySelector(".list").addEventListener("click", function () {
+  document.querySelector(".list").classList.add("active");
+  document.querySelector(".grid").classList.remove("active");
+  document.querySelector(".products-area-wrapper").classList.remove("gridView");
+  document.querySelector(".products-area-wrapper").classList.add("tableView");
+});
+
+var modeSwitch = document.querySelector('.mode-switch');
+modeSwitch.addEventListener('click', function () {                      document.documentElement.classList.toggle('light');
+ modeSwitch.classList.toggle('active');
+});
\ No newline at end of file
diff --git a/products-dashboard-ui/src/style.scss b/products-dashboard-ui/src/style.scss
new file mode 100644
index 0000000..60e2b6d
--- /dev/null
+++ b/products-dashboard-ui/src/style.scss
@@ -0,0 +1,636 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
+
+* { box-sizing: border-box; }
+
+:root {
+  --app-bg: #101827;
+  --sidebar: rgba(21, 30, 47,1);
+  --sidebar-main-color: #fff;
+  --table-border: #1a2131;
+  --table-header: #1a2131;
+  --app-content-main-color: #fff;
+  --sidebar-link: #fff;
+  --sidebar-active-link: #1d283c;
+  --sidebar-hover-link: #1a2539;
+  --action-color: #2869ff;
+  --action-color-hover: #6291fd;
+  --app-content-secondary-color: #1d283c;
+  --filter-reset: #2c394f;
+  --filter-shadow: rgba(16, 24, 39, 0.8) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+}
+
+.light:root {
+  --app-bg: #fff;
+  --sidebar: #f3f6fd;
+  --app-content-secondary-color: #f3f6fd;
+  --app-content-main-color: #1f1c2e;
+  --sidebar-link: #1f1c2e;
+  --sidebar-hover-link: rgba(195, 207, 244, 0.5);
+  --sidebar-active-link: rgba(195, 207, 244, 1);
+  --sidebar-main-color: #1f1c2e;
+  --filter-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+}
+
+$font-small: 14px;
+$font-medium: 16px;
+$font-large: 24px;
+
+body, html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  overflow: hidden;
+  font-family: 'Poppins', sans-serif;
+  background-color: var(--app-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.app-container {
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  max-width: 1280px;
+  display: flex;
+  overflow: hidden;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  max-width: 2000px;
+  margin: 0 auto;
+}
+
+.sidebar {
+  flex-basis: 200px;
+  max-width: 200px;
+  flex-shrink: 0;
+  background-color: var(--sidebar);
+  display: flex;
+  flex-direction: column;
+  
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+  }
+  
+  &-list {
+    list-style-type: none;
+    padding: 0;
+    
+    &-item {
+      position: relative;
+      margin-bottom: 4px;
+      
+      a {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: 10px 16px;
+        color: var(--sidebar-link);
+        text-decoration: none;
+        font-size: $font-small;
+        line-height: 24px;
+      }
+      
+      svg { margin-right: 8px; }
+      
+      &:hover { background-color: var(--sidebar-hover-link); }
+      
+      &.active {
+        background-color: var(--sidebar-active-link);
+        
+        &:before {
+          content: '';
+          position: absolute;
+          right: 0;
+          background-color: var(--action-color);
+          height: 100%;
+          width: 4px;
+        }
+      }
+    }
+  }
+  
+  @media screen and (max-width: 1024px) {&{
+      display: none;
+  }}
+}
+
+.mode-switch {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  color: var(--app-content-main-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  margin-right: 8px;
+  cursor: pointer;
+  
+  .moon {
+    fill: var(--app-content-main-color);
+  }
+}
+
+.mode-switch.active .moon {
+  fill: none;
+}
+
+.account-info {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  margin-top: auto;
+  
+  &-picture {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  
+  &-name {
+    font-size: $font-small;
+    color: var(--sidebar-main-color);
+    margin: 0 8px;
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  &-more {
+    color: var(--sidebar-main-color);
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    margin-left: auto;
+  }
+}
+
+.app-icon {
+  color: var(--sidebar-main-color);
+  
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.app-content {
+  padding: 16px;
+  background-color: var(--app-bg);
+  height: 100%;
+  flex: 1;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4px;
+  }
+  
+  &-headerText {
+    color: var(--app-content-main-color);
+    font-size: $font-large;
+    line-height: 32px;
+    margin: 0;
+  }
+  
+  &-headerButton {
+    background-color: var(--action-color);
+    color: #fff;
+    font-size: $font-small;
+    line-height: 24px;
+    border: none;
+    border-radius: 4px;
+    height: 32px;
+    padding: 0 16px;
+    transition: .2s;
+    cursor: pointer;
+    
+    &:hover {
+      background-color: var(--action-color-hover);
+    }
+  }
+  
+  &-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 4px;
+    
+    &-wrapper {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+    }
+    
+    @media screen and (max-width: 520px) {&{
+      flex-direction: column;
+      
+      .search-bar { max-width: 100%; order: 2; }
+      .app-content-actions-wrapper { padding-bottom: 16px; order: 1; }
+    }}
+  }
+}
+
+@mixin searchIcon($color) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23#{$color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
+}
+
+.search-bar {
+  background-color: var(--app-content-secondary-color);
+  border: 1px solid var(--app-content-secondary-color);
+  color: var(--app-content-main-color);
+  font-size: $font-small;
+  line-height: 24px;
+  border-radius: 4px;
+  padding: 0px 10px 0px 32px;
+  height: 32px;
+  @include searchIcon('fff');
+  background-size: 16px;
+  background-repeat: no-repeat;
+  background-position: left 10px center;
+  width: 100%;
+  max-width: 320px;
+  transition: .2s;
+  
+  .light & { @include searchIcon('1f1c2e'); }
+  
+  &:placeholder { color: var(--app-content-main-color); }
+  
+  &:hover {
+    border-color: var(--action-color-hover);
+    @include searchIcon('6291fd');
+  }
+  
+  &:focus {
+    outline: none;
+    border-color: var(--action-color);
+    @include searchIcon('2869ff');
+  }
+}
+
+.action-button {
+  border-radius: 4px;
+  height: 32px;
+  background-color: var(--app-content-secondary-color);
+  border: 1px solid var(--app-content-secondary-color);
+  display: flex;
+  align-items: center;
+  color: var(--app-content-main-color);
+  font-size: $font-small;
+  margin-left: 8px;
+  cursor: pointer;
+  
+  span { margin-right: 4px; }
+  
+   &:hover {
+    border-color: var(--action-color-hover);
+  }
+  
+  &:focus, &.active {
+    outline: none;
+    color: var(--action-color);
+    border-color: var(--action-color);
+  }
+}
+
+.filter-button-wrapper {
+  position: relative;
+}
+
+@mixin arrowDown($color) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23#{$color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+}
+
+.filter-menu {
+   background-color: var(--app-content-secondary-color);
+  position: absolute;
+  top: calc(100% + 16px);
+  right: -74px;
+  border-radius: 4px;
+  padding: 8px;
+  width: 220px;
+  z-index: 2;
+  box-shadow: var(--filter-shadow);
+  
+  visibility: hidden;
+  opacity: 0;
+  transition: .2s;
+  
+  &:before {
+    content: '';
+    position: absolute;
+    width: 0; 
+    height: 0; 
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+
+    border-bottom: 5px solid var(--app-content-secondary-color);
+    bottom: 100%;
+    left: 50%;
+    transform: translatex(-50%);
+  }
+  
+  &.active {
+    visibility: visible;
+    opacity: 1;
+    top: calc(100% + 8px);
+  }
+  
+  label {
+    display: block;
+    font-size: $font-small;
+    color: var(--app-content-main-color);
+    margin-bottom: 8px;
+  }
+  
+  select {
+    appearance: none;
+    @include arrowDown('fff');
+    background-repeat: no-repeat;
+    padding: 8px 24px 8px 8px;
+    background-position: right 4px center;
+    border: 1px solid var(--app-content-main-color);
+    border-radius: 4px;
+    color: var(--app-content-main-color);
+    font-size: 12px;
+    background-color: transparent;
+    margin-bottom: 16px;
+    width: 100%;
+    option { font-size: 14px; }
+    
+    .light & {
+      @include arrowDown('1f1c2e');
+    }
+    
+    &:hover {
+      border-color: var(--action-color-hover);
+    }
+
+    &:focus, &.active {
+      outline: none;
+      color: var(--action-color);
+      border-color: var(--action-color);
+      @include arrowDown('2869ff');
+    }
+  }
+}
+
+.filter-menu-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.filter-button {
+  border-radius: 2px;
+  font-size: 12px;
+  padding: 4px 8px;
+  cursor: pointer;
+  border: none;
+  color: #fff;
+  
+  &.apply {
+    background-color: var(--action-color);
+  }
+  
+  &.reset {
+    background-color: var(--filter-reset);
+  }
+}
+
+.products-area-wrapper {
+  width: 100%;
+  max-height: 100%;
+  overflow: auto;
+  padding: 0 4px;
+}
+
+.tableView {
+  .products-header {
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    background-color: var(--app-content-secondary-color);
+    position: sticky;
+    top: 0;
+  }
+  
+  .products-row {
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    
+    &:hover {
+      box-shadow: var(--filter-shadow);
+      background-color: var(--app-content-secondary-color);
+    }
+    
+    .cell-more-button {
+      display: none;
+    }
+  }
+  
+  .product-cell {
+    flex: 1;
+    padding: 8px 16px;
+    color: var(--app-content-main-color);
+    font-size: $font-small;
+    display: flex;
+    align-items: center;
+        
+    img {
+      width: 32px;
+      height: 32px;
+      border-radius: 6px;
+      margin-right: 6px;
+    }
+    
+    @media screen and (max-width: 780px) {&{
+      font-size: 12px;
+      &.image span { display: none; }
+      &.image { flex: 0.2; }
+    }}
+      
+    @media screen and (max-width: 520px) {&{      
+      &.category, &.sales {
+        display: none;
+      }
+      &.status-cell { flex: 0.4; }
+      &.stock, &.price { flex: 0.2; }
+    }}
+    
+    @media screen and (max-width: 480px) {&{
+      &.stock { display: none; }
+      &.price { flex: 0.4; }
+    }}
+  }
+  
+  .sort-button {
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--app-content-main-color);
+    margin-left: 4px;
+    display: flex;
+    align-items: center;
+    
+    &:hover { color: var(--action-color); }
+    svg { width: 12px; }
+  }
+  
+  .cell-label {
+    display: none;
+  }
+}
+
+.status {
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  font-size: 12px;
+  
+  &:before {
+    content: '';
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    margin-right: 4px;
+  }
+  
+  &.active {
+    color: #2ba972;
+    background-color: rgba(43, 169, 114, 0.2);
+    
+    &:before {
+      background-color: #2ba972;
+    }
+  }
+  
+  &.disabled {
+    color: #59719d;
+    background-color: rgba(89, 113, 157, 0.2);
+    
+    &:before {
+      background-color: #59719d;
+    }
+  }
+}
+
+.gridView {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -8px;
+  
+  @media screen and (max-width: 520px) {&{
+    margin: 0;
+  }}
+  
+  .products-header {
+    display: none;
+  }
+  
+  .products-row {
+    margin: 8px;
+    width: calc(25% - 16px);
+    background-color: var(--app-content-secondary-color);
+    padding: 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: transform .2s;
+    position: relative;
+    
+    &:hover {
+      transform: scale(1.01);
+      box-shadow: var(--filter-shadow);
+      
+      .cell-more-button {
+        display: flex;
+      }
+    }
+    
+    @media screen and (max-width: 1024px) {&{
+      width: calc(33.3% - 16px);
+    }}
+    
+    @media screen and (max-width: 820px) {&{
+      width: calc(50% - 16px);
+    }}
+    
+    @media screen and (max-width: 520px) {&{
+      width: 100%;
+      margin: 8px 0;
+      
+      &:hover {
+        transform: none;
+      }
+    }}
+    
+    .cell-more-button {
+      border: none;
+      padding: 0;
+      border-radius: 4px;
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width:24px;
+      height: 24px;
+      background-color: rgba(16, 24, 39, 0.7);
+      color: #fff;
+      cursor: pointer;
+      display: none;
+    }
+  }
+  
+  .product-cell {
+    color: var(--app-content-main-color);
+    font-size: $font-small;
+    margin-bottom: 8px;
+    
+    &:not(.image) {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    
+    &.image  span {
+      font-size: 18px;
+      line-height: 24px;
+    }
+
+    img {
+      width: 100%;
+      height: 140px;
+      object-fit: cover;
+      border-radius: 4px;
+      margin-bottom: 16px;
+    }
+  }
+  
+  .cell-label { opacity: 0.6; }
+}
\ No newline at end of file
diff --git a/profusion-2/README.markdown b/profusion-2/README.markdown
new file mode 100644
index 0000000..7ffdd93
--- /dev/null
+++ b/profusion-2/README.markdown
@@ -0,0 +1,16 @@
+# Profusion #2
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cathbailh/pen/gOGMWgK](https://codepen.io/cathbailh/pen/gOGMWgK).
+
+Forked from [Toshiya Marukubo]https://codepen.io/toshiya-marukubo/)'s Pen [Practice/Canvas2D](https://codepen.io/toshiya-marukubo/pen/dyzZzrE)
+
+AND
+
+from [Nate Wiley](https://codepen.io/natewiley/)'s Pen [GgdjOa](https://codepen.io/natewiley/pen/GgdjOa/)
+
+AND
+
+from[maxew](https://codepen.io/maxew33)'s pen [CodePen Home
+pure css animation kaleidoscope](https://codepen.io/maxew33/pen/VwWqqor)
+
+Photo : [panneau-garden-party-rifle-paper-co](https://static.etoffe.com/197355-extra_large/panneau-garden-party-rifle-paper-co.jpg) © DR
diff --git a/profusion-2/dist/index.html b/profusion-2/dist/index.html
new file mode 100644
index 0000000..6be390d
--- /dev/null
+++ b/profusion-2/dist/index.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Profusion #2</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+body{margin:0 auto;}
+svg{position:absolute;}
+</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://codepen.io/leimapapa/pen/eYRzEgY.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<section>
+  <div class="kaleidoscope">
+    <div class="container">
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+      <div class="tile">
+        <div class="texture"></div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/sketch.js/1.0.0/sketch.min.js'></script>
+<script src='https://assets.codepen.io/3919397/grid.js'></script><script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/profusion-2/dist/script.js b/profusion-2/dist/script.js
new file mode 100644
index 0000000..cde5dfe
--- /dev/null
+++ b/profusion-2/dist/script.js
@@ -0,0 +1,314 @@
+import {Ease}   from 'https://assets.codepen.io/194946/ease.js';
+import {Utils}  from 'https://assets.codepen.io/194946/utilities.js';
+import {Vector} from 'https://assets.codepen.io/194946/vector.js';
+import {Points} from 'https://assets.codepen.io/194946/points.js';
+import {Grid}   from 'https://assets.codepen.io/194946/grids.js';
+
+let gui, canvas, c, width, height, frameSize, id,
+    ease, shapes, scale, size, number, maxDist, vector, points, newPoints;
+
+const setupGui = () => {
+  gui = new dat.GUI();
+  
+  gui.params = {
+    tScale: 0.00002,
+    ease: 'easeInOutSine',
+    number: 3,
+    scale: 35,
+    frame: false,
+    start: () => start(),
+    stop: () => stop()
+  };
+
+  gui.ctrls = {
+    tScale: gui.add(gui.params, 'tScale', 0.1, 0.005, 0.0005),
+    ease: gui.add(gui.params, 'ease', Ease.returnEaseType())
+      .onChange(() => initialize()),
+    number: gui.add(gui.params, 'number', 1, 30, 1)
+      .onChange(() => initialize()),
+    scale: gui.add(gui.params, 'scale', 1, 300, 1)
+      .onChange(() => initialize()),
+    frame: gui.add(gui.params, 'frame', false),
+    start: gui.add(gui.params, 'start'),
+    stop: gui.add(gui.params, 'stop')
+  };
+  
+  gui.close();
+};
+
+const initialize = () => {
+  if (id) {
+    cancelAnimationFrame(id);
+  }
+
+  vector = new Vector();
+  ease = Ease.returnEaseFunc(gui.params.ease);
+  
+  width = canvas.width = window.innerWidth;
+  height = canvas.height = window.innerHeight;
+  frameSize = Math.min(width * 1, height *1);
+    
+  scale = gui.params.scale;
+  number = gui.params.number;
+  
+  points = Points.rose(vector, 560, 15, 6);
+  
+  // choise shape size
+  size = Math.floor(scale * Math.sqrt(2) / 1.2);
+  //size = Math.pow(scale / 2,1.0925); // square
+  shapes = Grid.square(vector, number, scale);
+  /*
+  size = gui.params.scale;
+  
+  const tmp = {
+    v: vector.create(0, 0),
+    d: 1
+  };
+  
+  shapes = [tmp, tmp, tmp];
+  */
+  maxDist = Grid.maxDist(shapes);
+  
+  draw(1);
+};
+
+const drawShape = (points, x, y, size) => {
+  c.save();
+  
+  c.beginPath();
+  for (let i = 0; i < points.length; i++) {
+    if (i === -1) {
+      c.moveTo(points[i].getX() * size * x, points[i].getY() * size * y);
+    } else {
+      c.lineTo(points[i].getX() * size*1.5* x, points[i].getY() * size * y);
+    }
+  }
+  c.closePath();
+  //c.fill();
+  c.stroke();
+  
+  c.restore();
+};
+
+const drawPoints = (points, x, y, size, pointSize) => {
+  c.save();
+  
+  for (let i = 0; i < points.length; i++) {
+    const nx = points[i].getX() * size + x;
+    const ny = points[i].getY() * size + y;
+    
+    c.beginPath();
+    c.arc(nx, ny, pointSize, 0, Math.PI * .12, false);
+    c.fill();
+    c.stroke();
+  }
+   c.globalCompositeOperation = 'color';
+  c.restore();
+};
+
+const drawTrailLine = (t, points, size) => {
+  const index = Math.floor(Utils.map(t, 0, 1, 0, points.length - 1));
+  const endex = Math.ceil(Utils.map(t, 0, 1, index + 1, points.length - 1));
+  
+  const color = `hsla(${360 * t*.82}, 80%, 60%,0.5)`;
+  
+  c.strokeStyle = color;
+  c.shadowColor = color;
+  c.shadowBlur = 20;
+
+  c.beginPath();
+  c.moveTo(points[index].getX() * size, points[index].getY() * size);
+  for (let i = index; i < endex; i++) {
+    const p = points[i];
+    
+    c.lineTo(p.getX() * size, p.getY() * size);
+  }
+  c.stroke(); 
+	c.globalCompositeOperation = 'color-burn';
+};
+
+const getNewPoints = (t, pointA, pointB) => {
+  const tmp = new Array();
+
+  for (let i = 0; i < rose.length; i++) {
+    let x, y;
+    
+    if (t < 1.5) {
+      x = Utils.map(t, 0.5, 0.5, pointA[i].getX(), pointB[i].getX());
+      y = Utils.map(t, 0, 0.5, pointA[i].getY(), pointB[i].getY());
+    } else {
+      x = Utils.map(t, 0.5, 10, pointB[i].getX(), pointA[i].getX());
+      y = Utils.map(t, 0.5, 10, pointB[i].getY(), pointA[i].getY());
+    }
+    
+    const v = vector.create(x, y);
+
+    tmp.push(v);
+  }
+
+  return tmp;
+};
+
+const draw = (t) => {
+  t *= gui.params.tScale;
+  
+  c.save();
+  
+  c.fillStyle = 'hsla(296, 100%, 50%, 0.08)';
+  c.fillRect(0, 0, width, height);
+  //c.clearRect(0, 0, width, height);
+  
+  if (gui.params.frame) addFrame();
+  
+  c.translate(width / 2, height / 2);
+  
+  c.lineWidth = 1;
+  c.lineCap = 'round';
+  c.globalCompositeOperation = 'color';
+  
+  for (let i = 0; i < shapes.length; i++) {
+    const s = shapes[i];
+    const x = s.v.getX();
+    const y = s.v.getY();
+    
+    let scaledT = (t + s.d / maxDist / Math.PI * 12) % 95;
+    //let scaledT = t % 1;
+    scaledT = ease(Math.abs(scaledT));
+    
+    c.save();
+   
+    c.translate(x, y);
+    if (scaledT < 0.05) {
+      c.scale(Utils.map(scaledT, 0, 0.0085, .1, .5), Utils.map(scaledT, 0, 0.05, 1, 1.5));
+    } else {
+      c.scale(Utils.map(scaledT, 0.5, 1, 1.5, 1), Utils.map(scaledT, 0.5, 1, 1.5, 1));
+    }
+   
+   
+    
+    c.translate(x, y);
+    c.rotate(Math.PI - 0.4);
+    
+    //newPoints = getNewPoints(scaledT, rose, lissajous);
+    
+    drawTrailLine(scaledT, points, size);
+    
+    //drawShape(points, x, y, size, 1);
+    
+    c.restore();
+  }
+  
+  c.restore();
+  
+  id = requestAnimationFrame(draw);
+};
+
+const addFrame = () => {
+  c.rect(
+    width / 2 - frameSize / 2,
+    height / 2 - frameSize / 2,
+    frameSize,
+    frameSize
+  );
+  c.clip();
+};
+
+const setupCanvas = () => {
+  canvas = document.createElement('canvas');
+  document.getElementsByTagName('body')[0].appendChild(canvas);
+  c = canvas.getContext('2d');
+};
+
+const start = () => {
+  initialize();
+};
+
+const stop = () => {
+  if (id) {
+    cancelAnimationFrame(id);
+    id = null;
+  }
+};
+
+(() => {
+  window.addEventListener('DOMContentLoaded', () => {
+    console.clear();
+
+    setupGui();
+    setupCanvas();
+    
+    initialize();
+  });
+
+  window.addEventListener('resize', () => {
+    initialize();
+  });
+})();
+
+
+
+
+//////
+
+
+var s = Sketch.create({autoclear: false});
+var particles = [];
+var max = 100;
+var clearColor = "hsla(34,100%,50%,0.1)";
+var hue = 0;
+
+function P(){}
+
+P.prototype = {
+  constructor: P,
+  init: function(){
+    this.r = random(100) + 200;
+    this.x = s.width/2;
+    this.y = s.height/2;
+    this.vx = random(-5, 5);
+    this.vy = random(-5, 5);
+    this.color = "hsla("+hue+", 100%, 50%, .2)";
+    this.life = 0;
+    this.maxLife = random(100);
+  },
+  draw: function(){
+    s.strokeStyle = this.color;
+    s.beginPath();
+    s.globalCompositeOperation = "xor";
+    s.arc(this.x, this.y, this.r, 0, TWO_PI);
+		s.stroke();
+    this.update();
+  },
+  update: function(){
+    this.x += this.vx;
+    this.y += this.vy;
+    this.life++;
+    if(this.life >= this.maxLife || this.r <= .0000002){
+      this.init();
+    }
+  }
+};
+
+
+s.setup = function(){
+  for(var i=0; i<max; i++){
+    setTimeout(function(){
+      var p = new P();
+      p.init();
+    	  particles.push(p)
+    }, i * 75);
+  }
+};
+
+s.update = function(){
+  s.fillStyle = clearColor;
+  s.globalCompositeOperation = "source-over";
+  s.fillRect(0,0,s.width,s.height);
+  hue += .65;
+};
+
+s.draw = function(){
+  for(var i in particles){
+    particles[i].draw();
+  }
+};
\ No newline at end of file
diff --git a/profusion-2/dist/style.css b/profusion-2/dist/style.css
new file mode 100644
index 0000000..973ea92
--- /dev/null
+++ b/profusion-2/dist/style.css
@@ -0,0 +1,258 @@
+:root {
+  --tile-length: 17.5vmin;
+  --animation-duration: 338s;
+  --bg:
+    hsla(314,100%,50%,1);
+  --bg2:
+    hsla(314,100%,50%,1);
+  --ease:
+    cubic-bezier(1.00,1.33,.10,-1.33);
+  --ease2:
+     cubic-bezier(1,-1.33,.10,1.33);
+  --ease3:
+       cubic-bezier(0.59,15.33,.10,14.33);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+section {
+  height: 100vh;
+  width: 100vw;
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  overflow: hidden;
+  opacity: 0;
+  -webkit-animation: appear 1050s 1s var(--ease3) 1 forwards;
+          animation: appear 1050s 1s var(--ease3) 1 forwards;
+}
+
+@-webkit-keyframes appear {
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes appear {
+  100% {
+    opacity: 1;
+  }
+}
+.dg {
+  display: none;
+  opacity: 0;
+  z-index: 200 !important;
+}
+
+canvas {
+  display: block;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 101;
+  mix-blend-mode: exclusion;
+  filter: invert(1) contrast(2);
+  -webkit-animation: appear2 57s 7s var(--ease2) 1 forwards;
+          animation: appear2 57s 7s var(--ease2) 1 forwards;
+}
+
+@-webkit-keyframes appear2 {
+  100% {
+    mix-blend-mode: difference;
+    filter: invert(1) contrast(1);
+  }
+}
+
+@keyframes appear2 {
+  100% {
+    mix-blend-mode: difference;
+    filter: invert(1) contrast(1);
+  }
+}
+.kaleidoscope {
+  position: relative;
+  width: calc(6 * .866 * var(--tile-length));
+  height: 90vmin;
+  -webkit-animation: rotation var(--animation-duration) var(--ease) infinite;
+          animation: rotation var(--animation-duration) var(--ease) infinite;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.kaleidoscope:after {
+  content: "";
+  position: absolute;
+  height: inherit;
+  width: inherit;
+  background: radial-gradient(circle at center, transparent 15%, var(--bg2) 60%);
+  z-index: 100;
+}
+
+.container {
+  position: absolute;
+  width: calc(2 * var(--tile-length));
+  height: calc(2 * var(--tile-length));
+  border-radius: 50%;
+  overflow: hidden;
+  transform: translate(calc(var(--tile-length) * -0.134 ), -50%);
+}
+
+.container:nth-child(1) {
+  top: 50%;
+  left: 0%;
+}
+
+.container:nth-child(2) {
+  top: 50%;
+  left: calc(2 * calc(var(--tile-length) * 0.866 ));
+}
+
+.container:nth-child(3) {
+  top: 50%;
+  left: calc(4 * calc(var(--tile-length) * 0.866 ));
+}
+
+.container:nth-child(4) {
+  top: calc(50% - calc(1.5 * var(--tile-length)));
+  left: calc(var(--tile-length) * 0.866 );
+}
+
+.container:nth-child(5) {
+  top: calc(50% - calc(1.5 * var(--tile-length)));
+  left: calc(3 * var(--tile-length) * 0.866 );
+}
+
+.container:nth-child(6) {
+  top: calc(50% + calc(1.5 * var(--tile-length)));
+  left: calc(var(--tile-length) * 0.866 );
+}
+
+.container:nth-child(7) {
+  top: calc(50% + calc(1.5 * var(--tile-length)));
+  left: calc(3 * var(--tile-length) * 0.866 );
+}
+
+@-webkit-keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.tile {
+  position: absolute;
+  top: 28%;
+  left: 25%;
+  width: var(--tile-length);
+  height: calc(var(--tile-length) * 0.866);
+  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tile:nth-child(1) {
+  transform: rotate(30deg) translateY(50%) scaleX(-1);
+}
+
+.tile:nth-child(2) {
+  transform: rotate(90deg) translateY(50%);
+}
+
+.tile:nth-child(3) {
+  transform: rotate(150deg) translateY(50%) scaleX(-1);
+}
+
+.tile:nth-child(4) {
+  transform: rotate(210deg) translateY(50%);
+}
+
+.tile:nth-child(5) {
+  transform: rotate(270deg) translateY(50%) scaleX(-1);
+}
+
+.tile:nth-child(6) {
+  transform: rotate(330deg) translateY(50%);
+}
+
+.texture {
+  position: absolute;
+  height: calc(1.75 * var(--tile-length));
+  width: calc(1.75 * var(--tile-length));
+  background-image: url(https://assets.codepen.io/194946/panneau-garden-party-rifle-paper-co.jpg);
+  background-size: 100%;
+  -webkit-animation: rotation var(--animation-duration) var(--ease2) infinite;
+          animation: rotation var(--animation-duration) var(--ease2) infinite;
+}
+
+.link {
+  position: fixed;
+  z-index: 10;
+  left: calc(2.5vmin - .75rem);
+  bottom: calc(2.5vmin - .75rem);
+  font-size: 1.5rem;
+  font-family: arial, sans-serif;
+  color: whitesmoke;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.my-name {
+  position: relative;
+}
+
+.before, .after {
+  overflow: hidden;
+  width: 0px;
+  transition: width 0.5s;
+  transform-origin: right;
+}
+
+.before-text {
+  display: inline-block;
+  width: auto;
+  text-align: right;
+}
+
+.after-text {
+  display: flex;
+  align-items: center;
+  width: auto;
+  height: 3rem;
+  transform-origin: top center;
+}
+
+.link:hover .before {
+  width: 2.5rem;
+}
+
+.link:hover .after {
+  width: 4rem;
+}
+
+.link:hover .spin {
+  display: inline-block;
+  transition: 0.5s transform 0.5s ease-in-out;
+  transform: rotate(360deg);
+}
\ No newline at end of file
diff --git a/profusion-2/license.txt b/profusion-2/license.txt
new file mode 100644
index 0000000..fcb0105
--- /dev/null
+++ b/profusion-2/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Bailh (https://codepen.io/cathbailh/pen/gOGMWgK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/profusion-2/src/index.pug b/profusion-2/src/index.pug
new file mode 100644
index 0000000..3a1642e
--- /dev/null
+++ b/profusion-2/src/index.pug
@@ -0,0 +1,93 @@
+section
+  .kaleidoscope
+    .container
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+    .container
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+    .container
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+    .container
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+    .container
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+    .container
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+    .container
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
+      .tile
+        .texture
diff --git a/profusion-2/src/script.js b/profusion-2/src/script.js
new file mode 100644
index 0000000..ebceb79
--- /dev/null
+++ b/profusion-2/src/script.js
@@ -0,0 +1,315 @@
+import {Ease}   from 'https://assets.codepen.io/194946/ease.js';
+import {Utils}  from 'https://assets.codepen.io/194946/utilities.js';
+import {Vector} from 'https://assets.codepen.io/194946/vector.js';
+import {Points} from 'https://assets.codepen.io/194946/points.js';
+import {Grid}   from 'https://assets.codepen.io/194946/grids.js';
+
+let gui, canvas, c, width, height, frameSize, id,
+    ease, shapes, scale, size, number, maxDist, vector, points, newPoints;
+
+const setupGui = () => {
+  gui = new dat.GUI();
+  
+  gui.params = {
+    tScale: 0.00002,
+    ease: 'easeInOutSine',
+    number: 3,
+    scale: 35,
+    frame: false,
+    start: () => start(),
+    stop: () => stop()
+  };
+
+  gui.ctrls = {
+    tScale: gui.add(gui.params, 'tScale', 0.1, 0.005, 0.0005),
+    ease: gui.add(gui.params, 'ease', Ease.returnEaseType())
+      .onChange(() => initialize()),
+    number: gui.add(gui.params, 'number', 1, 30, 1)
+      .onChange(() => initialize()),
+    scale: gui.add(gui.params, 'scale', 1, 300, 1)
+      .onChange(() => initialize()),
+    frame: gui.add(gui.params, 'frame', false),
+    start: gui.add(gui.params, 'start'),
+    stop: gui.add(gui.params, 'stop')
+  };
+  
+  gui.close();
+};
+
+const initialize = () => {
+  if (id) {
+    cancelAnimationFrame(id);
+  }
+
+  vector = new Vector();
+  ease = Ease.returnEaseFunc(gui.params.ease);
+  
+  width = canvas.width = window.innerWidth;
+  height = canvas.height = window.innerHeight;
+  frameSize = Math.min(width * 1, height *1);
+    
+  scale = gui.params.scale;
+  number = gui.params.number;
+  
+  points = Points.rose(vector, 560, 15, 6);
+  
+  // choise shape size
+  size = Math.floor(scale * Math.sqrt(2) / 1.2);
+  //size = Math.pow(scale / 2,1.0925); // square
+  shapes = Grid.square(vector, number, scale);
+  /*
+  size = gui.params.scale;
+  
+  const tmp = {
+    v: vector.create(0, 0),
+    d: 1
+  };
+  
+  shapes = [tmp, tmp, tmp];
+  */
+  maxDist = Grid.maxDist(shapes);
+  
+  draw(1);
+};
+
+const drawShape = (points, x, y, size) => {
+  c.save();
+  
+  c.beginPath();
+  for (let i = 0; i < points.length; i++) {
+    if (i === -1) {
+      c.moveTo(points[i].getX() * size * x, points[i].getY() * size * y);
+    } else {
+      c.lineTo(points[i].getX() * size*1.5* x, points[i].getY() * size * y);
+    }
+  }
+  c.closePath();
+  //c.fill();
+  c.stroke();
+  
+  c.restore();
+};
+
+const drawPoints = (points, x, y, size, pointSize) => {
+  c.save();
+  
+  for (let i = 0; i < points.length; i++) {
+    const nx = points[i].getX() * size + x;
+    const ny = points[i].getY() * size + y;
+    
+    c.beginPath();
+    c.arc(nx, ny, pointSize, 0, Math.PI * .12, false);
+    c.fill();
+    c.stroke();
+  }
+   c.globalCompositeOperation = 'color';
+  c.restore();
+};
+
+const drawTrailLine = (t, points, size) => {
+  const index = Math.floor(Utils.map(t, 0, 1, 0, points.length - 1));
+  const endex = Math.ceil(Utils.map(t, 0, 1, index + 1, points.length - 1));
+  
+  const color = `hsla(${360 * t*.82}, 80%, 60%,0.5)`;
+  
+  c.strokeStyle = color;
+  c.shadowColor = color;
+  c.shadowBlur = 20;
+
+  c.beginPath();
+  c.moveTo(points[index].getX() * size, points[index].getY() * size);
+  for (let i = index; i < endex; i++) {
+    const p = points[i];
+    
+    c.lineTo(p.getX() * size, p.getY() * size);
+  }
+  c.stroke(); 
+	c.globalCompositeOperation = 'color-burn';
+};
+
+const getNewPoints = (t, pointA, pointB) => {
+  const tmp = new Array();
+
+  for (let i = 0; i < rose.length; i++) {
+    let x, y;
+    
+    if (t < 1.5) {
+      x = Utils.map(t, 0.5, 0.5, pointA[i].getX(), pointB[i].getX());
+      y = Utils.map(t, 0, 0.5, pointA[i].getY(), pointB[i].getY());
+    } else {
+      x = Utils.map(t, 0.5, 10, pointB[i].getX(), pointA[i].getX());
+      y = Utils.map(t, 0.5, 10, pointB[i].getY(), pointA[i].getY());
+    }
+    
+    const v = vector.create(x, y);
+
+    tmp.push(v);
+  }
+
+  return tmp;
+};
+
+const draw = (t) => {
+  t *= gui.params.tScale;
+  
+  c.save();
+  
+  c.fillStyle = 'hsla(296, 100%, 50%, 0.08)';
+  c.fillRect(0, 0, width, height);
+  //c.clearRect(0, 0, width, height);
+  
+  if (gui.params.frame) addFrame();
+  
+  c.translate(width / 2, height / 2);
+  
+  c.lineWidth = 1;
+  c.lineCap = 'round';
+  c.globalCompositeOperation = 'color';
+  
+  for (let i = 0; i < shapes.length; i++) {
+    const s = shapes[i];
+    const x = s.v.getX();
+    const y = s.v.getY();
+    
+    let scaledT = (t + s.d / maxDist / Math.PI * 12) % 95;
+    //let scaledT = t % 1;
+    scaledT = ease(Math.abs(scaledT));
+    
+    c.save();
+   
+    c.translate(x, y);
+    if (scaledT < 0.05) {
+      c.scale(Utils.map(scaledT, 0, 0.0085, .1, .5), Utils.map(scaledT, 0, 0.05, 1, 1.5));
+    } else {
+      c.scale(Utils.map(scaledT, 0.5, 1, 1.5, 1), Utils.map(scaledT, 0.5, 1, 1.5, 1));
+    }
+   
+   
+    
+    c.translate(x, y);
+    c.rotate(Math.PI - 0.4);
+    
+    //newPoints = getNewPoints(scaledT, rose, lissajous);
+    
+    drawTrailLine(scaledT, points, size);
+    
+    //drawShape(points, x, y, size, 1);
+    
+    c.restore();
+  }
+  
+  c.restore();
+  
+  id = requestAnimationFrame(draw);
+};
+
+const addFrame = () => {
+  c.rect(
+    width / 2 - frameSize / 2,
+    height / 2 - frameSize / 2,
+    frameSize,
+    frameSize
+  );
+  c.clip();
+};
+
+const setupCanvas = () => {
+  canvas = document.createElement('canvas');
+  document.getElementsByTagName('body')[0].appendChild(canvas);
+  c = canvas.getContext('2d');
+};
+
+const start = () => {
+  initialize();
+};
+
+const stop = () => {
+  if (id) {
+    cancelAnimationFrame(id);
+    id = null;
+  }
+};
+
+(() => {
+  window.addEventListener('DOMContentLoaded', () => {
+    console.clear();
+
+    setupGui();
+    setupCanvas();
+    
+    initialize();
+  });
+
+  window.addEventListener('resize', () => {
+    initialize();
+  });
+})();
+
+
+
+
+//////
+
+
+var s = Sketch.create({autoclear: false});
+var particles = [];
+var max = 100;
+var clearColor = "hsla(34,100%,50%,0.1)";
+var hue = 0;
+
+function P(){}
+
+P.prototype = {
+  constructor: P,
+  init: function(){
+    this.r = random(100) + 200;
+    this.x = s.width/2;
+    this.y = s.height/2;
+    this.vx = random(-5, 5);
+    this.vy = random(-5, 5);
+    this.color = "hsla("+hue+", 100%, 50%, .2)";
+    this.life = 0;
+    this.maxLife = random(100);
+  },
+  draw: function(){
+    s.strokeStyle = this.color;
+    s.beginPath();
+    s.globalCompositeOperation = "xor";
+    s.arc(this.x, this.y, this.r, 0, TWO_PI);
+		s.stroke();
+    this.update();
+  },
+  update: function(){
+    this.x += this.vx;
+    this.y += this.vy;
+    this.life++;
+    if(this.life >= this.maxLife || this.r <= .0000002){
+      this.init();
+    }
+  }
+};
+
+
+s.setup = function(){
+  for(var i=0; i<max; i++){
+    setTimeout(function(){
+      var p = new P();
+      p.init();
+    	  particles.push(p)
+    }, i * 75);
+  }
+};
+
+s.update = function(){
+  s.fillStyle = clearColor;
+  s.globalCompositeOperation = "source-over";
+  s.fillRect(0,0,s.width,s.height);
+  hue += .65;
+};
+
+s.draw = function(){
+  for(var i in particles){
+    particles[i].draw();
+  }
+};
+
diff --git a/profusion-2/src/style.scss b/profusion-2/src/style.scss
new file mode 100644
index 0000000..deb503f
--- /dev/null
+++ b/profusion-2/src/style.scss
@@ -0,0 +1,249 @@
+:root{
+    --tile-length: 17.5vmin;
+    --animation-duration: 338s;
+    --bg:
+      hsla(314,100%,50%,1);
+    --bg2:
+      hsla(314,100%,50%,1);
+    --ease:
+      cubic-bezier(1.00,1.33,.10,-1.33);
+   --ease2:
+      cubic-bezier(1,-1.33,.10,1.33);
+	--ease3:
+      cubic-bezier(0.59,15.33,.10,14.33);
+}
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+section{
+    height: 100vh;
+    width: 100vw;
+    background:var(--bg);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    overflow: hidden;
+	  opacity:0;
+	  animation:appear 1050s  1s var(--ease3) 1 forwards;
+}
+
+@keyframes appear{
+	100%{
+		opacity:1;
+	}
+}
+
+.dg {
+  display: none;
+  opacity: 0;
+  z-index: 200 !important;
+}
+
+
+
+canvas {
+  display: block;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 101;
+	mix-blend-mode: exclusion;
+	filter: invert(1) contrast(2) ;
+  animation:appear2 57s 7s var(--ease2) 1 forwards;
+}
+
+@keyframes appear2{
+	100%{
+		mix-blend-mode: difference;
+		filter: invert(1) contrast(1);
+	}
+}
+
+.kaleidoscope{
+    position: relative;
+    width: calc(6 * .866 * var(--tile-length));
+    height: 90vmin;
+    animation: rotation var(--animation-duration) var(--ease) infinite;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+.kaleidoscope:after{
+    content:'';
+    position:absolute;
+    height: inherit;
+    width: inherit;
+    background: radial-gradient(circle at center, transparent 15%, var(--bg2) 60%);
+    z-index: 100;
+	
+}
+
+.container{
+    position: absolute;
+    width: calc(2 * var(--tile-length));
+    height: calc(2 * var(--tile-length));
+    border-radius: 50%;
+    overflow: hidden;
+    transform: translate( calc(var(--tile-length) * -0.134 ), -50%);
+}
+
+.container:nth-child(1){
+    top: 50%;
+    left: 0%;
+}
+
+.container:nth-child(2){
+    top: 50%;
+    left: calc(2 * calc(var(--tile-length) * 0.866 ));
+}
+
+.container:nth-child(3){
+    top: 50%;
+    left: calc(4 * calc(var(--tile-length) * 0.866 ));
+}
+
+.container:nth-child(4){
+    top: calc(50% - calc(1.5 * var(--tile-length)));
+    left: calc(var(--tile-length) * 0.866 );
+}
+
+.container:nth-child(5){
+    top: calc(50% - calc(1.5 * var(--tile-length)));
+    left: calc(3 * var(--tile-length) * 0.866 );
+}
+
+.container:nth-child(6){
+    top: calc(50% + calc(1.5 * var(--tile-length)));
+    left: calc(var(--tile-length) * 0.866 );
+}
+
+.container:nth-child(7){
+    top: calc(50% + calc(1.5 * var(--tile-length)));
+    left: calc(3 * var(--tile-length) * 0.866 );
+}
+
+@-webkit-keyframes rotation{
+    from{
+        transform: rotate(0deg);
+    }
+    to{
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes rotation{
+    from{
+        transform: rotate(0deg);
+    }
+    to{
+        transform: rotate(360deg);
+    }
+}
+
+.tile{
+    position: absolute;
+    top: 28%;
+    left: 25%;
+    width: var(--tile-length);
+    height: calc(var(--tile-length) * 0.866);
+    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.tile:nth-child(1){
+    transform: rotate(30deg) translateY(50%) scaleX(-1);
+}
+
+.tile:nth-child(2){
+    transform: rotate(90deg) translateY(50%);
+}
+
+.tile:nth-child(3){
+    transform: rotate(150deg) translateY(50%) scaleX(-1);
+}
+
+.tile:nth-child(4){
+    transform: rotate(210deg) translateY(50%);
+}
+
+.tile:nth-child(5){
+    transform: rotate(270deg) translateY(50%) scaleX(-1);
+}
+
+.tile:nth-child(6){
+    transform: rotate(330deg) translateY(50%);
+}
+
+.texture{
+    position: absolute;
+    height: calc(1.75 * var(--tile-length));
+    width: calc(1.75 * var(--tile-length));
+    background-image: url(https://assets.codepen.io/194946/panneau-garden-party-rifle-paper-co.jpg);
+    background-size: 100%;
+            animation: rotation var(--animation-duration) var(--ease2) infinite;
+}
+
+
+.link {
+  position: fixed;
+  z-index: 10;
+  left: calc(2.5vmin - .75rem);
+  bottom: calc(2.5vmin - .75rem);
+  font-size: 1.5rem;
+  font-family: arial, sans-serif;
+  color: whitesmoke;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.my-name {
+  position: relative;
+}
+
+.before, .after {
+  overflow: hidden;
+  width: 0px;
+  transition: width .5s;
+  transform-origin: right;
+}
+
+.before-text {
+  display: inline-block;
+  width: auto;
+  text-align: right;
+}
+
+.after-text {
+  display: flex;
+  align-items: center;
+  width: auto;
+  height: 3rem;
+  transform-origin: top center;
+}
+
+.link:hover .before {
+  width: 2.5rem;
+}
+
+.link:hover .after {
+  width: 4rem;
+}
+
+.link:hover .spin {
+  display: inline-block;
+  transition: .5s transform .5s ease-in-out;
+  transform: rotate(360deg);
+}
\ No newline at end of file
diff --git a/project-management-dashboard-ui/LICENSE.txt b/project-management-dashboard-ui/LICENSE.txt
new file mode 100644
index 0000000..1430afa
--- /dev/null
+++ b/project-management-dashboard-ui/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Aybüke Ceylan (https://codepen.io/aybukeceylan/pen/OJRNbZp)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/project-management-dashboard-ui/README.md b/project-management-dashboard-ui/README.md
new file mode 100644
index 0000000..e0f2c6f
--- /dev/null
+++ b/project-management-dashboard-ui/README.md
@@ -0,0 +1,5 @@
+# Project Management Dashboard UI
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/aybukeceylan/pen/OJRNbZp](https://codepen.io/aybukeceylan/pen/OJRNbZp).
+
+https://dribbble.com/shots/14038313-Project-Management-Dashboard-UX-UI-Design
\ No newline at end of file
diff --git a/project-management-dashboard-ui/dist/index.html b/project-management-dashboard-ui/dist/index.html
new file mode 100644
index 0000000..2380ad2
--- /dev/null
+++ b/project-management-dashboard-ui/dist/index.html
@@ -0,0 +1,466 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Project Management Dashboard UI</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="app-container">
+  <div class="app-header">
+    <div class="app-header-left">
+      <span class="app-icon"></span>
+      <p class="app-name">Portfolio</p>
+      <div class="search-wrapper">
+        <input class="search-input" type="text" placeholder="Search">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-search" viewBox="0 0 24 24">
+          <defs></defs>
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="M21 21l-4.35-4.35"></path>
+        </svg>
+      </div>
+    </div>
+    <div class="app-header-right">
+      <button class="mode-switch" title="Switch Theme">
+        <svg class="moon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="24" height="24" viewBox="0 0 24 24">
+          <defs></defs>
+          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
+        </svg>
+      </button>
+      <button class="add-btn" title="Add New Project">
+        <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+          <line x1="12" y1="5" x2="12" y2="19" />
+          <line x1="5" y1="12" x2="19" y2="12" /></svg>
+      </button>
+      <button class="notification-btn">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
+          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+          <path d="M13.73 21a2 2 0 0 1-3.46 0" /></svg>
+      </button>
+      <button class="profile-btn">
+        <img src="https://assets.codepen.io/3306515/IMG_2025.jpg" />
+        <span>Aybüke C.</span>
+      </button>
+    </div>
+    <button class="messages-btn">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle">
+        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" /></svg>
+    </button>
+  </div>
+  <div class="app-content">
+    <div class="app-sidebar">
+      <a href="" class="app-sidebar-link active">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
+          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+          <polyline points="9 22 9 12 15 12 15 22" /></svg>
+      </a>
+      <a href="" class="app-sidebar-link">
+        <svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-pie-chart" viewBox="0 0 24 24">
+          <defs />
+          <path d="M21.21 15.89A10 10 0 118 2.83M22 12A10 10 0 0012 2v10z" />
+        </svg>
+      </a>
+      <a href="" class="app-sidebar-link">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+          <line x1="16" y1="2" x2="16" y2="6" />
+          <line x1="8" y1="2" x2="8" y2="6" />
+          <line x1="3" y1="10" x2="21" y2="10" /></svg>
+      </a>
+      <a href="" class="app-sidebar-link">
+        <svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-settings" viewBox="0 0 24 24">
+          <defs />
+          <circle cx="12" cy="12" r="3" />
+          <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
+        </svg>
+      </a>
+    </div>
+    <div class="projects-section">
+      <div class="projects-section-header">
+        <p>Projects</p>
+        <p class="time">December, 12</p>
+      </div>
+      <div class="projects-section-line">
+        <div class="projects-status">
+          <div class="item-status">
+            <span class="status-number">45</span>
+            <span class="status-type">In Progress</span>
+          </div>
+          <div class="item-status">
+            <span class="status-number">24</span>
+            <span class="status-type">Upcoming</span>
+          </div>
+          <div class="item-status">
+            <span class="status-number">62</span>
+            <span class="status-type">Total Projects</span>
+          </div>
+        </div>
+        <div class="view-actions">
+          <button class="view-btn list-view" title="List View">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list">
+              <line x1="8" y1="6" x2="21" y2="6" />
+              <line x1="8" y1="12" x2="21" y2="12" />
+              <line x1="8" y1="18" x2="21" y2="18" />
+              <line x1="3" y1="6" x2="3.01" y2="6" />
+              <line x1="3" y1="12" x2="3.01" y2="12" />
+              <line x1="3" y1="18" x2="3.01" y2="18" /></svg>
+          </button>
+          <button class="view-btn grid-view active" title="Grid View">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid">
+              <rect x="3" y="3" width="7" height="7" />
+              <rect x="14" y="3" width="7" height="7" />
+              <rect x="14" y="14" width="7" height="7" />
+              <rect x="3" y="14" width="7" height="7" /></svg>
+          </button>
+        </div>
+      </div>
+      <div class="project-boxes jsGridView">
+        <div class="project-box-wrapper">
+          <div class="project-box" style="background-color: #fee4cb;">
+            <div class="project-box-header">
+              <span>December 10, 2020</span>
+              <div class="more-wrapper">
+                <button class="project-btn-more">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
+                    <circle cx="12" cy="12" r="1" />
+                    <circle cx="12" cy="5" r="1" />
+                    <circle cx="12" cy="19" r="1" /></svg>
+                </button>
+          </div>
+        </div>
+        <div class="project-box-content-header">
+          <p class="box-content-header">Web Designing</p>
+          <p class="box-content-subheader">Prototyping</p>
+        </div>
+        <div class="box-progress-wrapper">
+          <p class="box-progress-header">Progress</p>
+          <div class="box-progress-bar">
+            <span class="box-progress" style="width: 60%; background-color: #ff942e"></span>
+          </div>
+          <p class="box-progress-percentage">60%</p>
+        </div>
+        <div class="project-box-footer">
+          <div class="participants">
+            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="participant">
+            <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="participant">
+            <button class="add-participant" style="color: #ff942e;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </button>
+          </div>
+          <div class="days-left" style="color: #ff942e;">
+            2 Days Left
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="project-box-wrapper">
+      <div class="project-box" style="background-color: #e9e7fd;">
+        <div class="project-box-header">
+          <span>December 10, 2020</span>
+          <div class="more-wrapper">
+            <button class="project-btn-more">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="12" cy="5" r="1" />
+                <circle cx="12" cy="19" r="1" /></svg>
+            </button>
+          </div>
+        </div>
+        <div class="project-box-content-header">
+          <p class="box-content-header">Testing</p>
+          <p class="box-content-subheader">Prototyping</p>
+        </div>
+        <div class="box-progress-wrapper">
+          <p class="box-progress-header">Progress</p>
+          <div class="box-progress-bar">
+            <span class="box-progress" style="width: 50%; background-color: #4f3ff0"></span>
+          </div>
+          <p class="box-progress-percentage">50%</p>
+        </div>
+        <div class="project-box-footer">
+          <div class="participants">
+            <img src="https://images.unsplash.com/photo-1596815064285-45ed8a9c0463?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1215&q=80" alt="participant">
+            <img src="https://images.unsplash.com/photo-1583195764036-6dc248ac07d9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2555&q=80" alt="participant">
+            <button class="add-participant" style="color: #4f3ff0;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </button>
+          </div>
+          <div class="days-left" style="color: #4f3ff0;">
+            2 Days Left
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="project-box-wrapper">
+      <div class="project-box">
+        <div class="project-box-header">
+          <span>December 10, 2020</span>
+          <div class="more-wrapper">
+            <button class="project-btn-more">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="12" cy="5" r="1" />
+                <circle cx="12" cy="19" r="1" /></svg>
+            </button>
+          </div>
+        </div>
+        <div class="project-box-content-header">
+          <p class="box-content-header">Svg Animations</p>
+          <p class="box-content-subheader">Prototyping</p>
+        </div>
+        <div class="box-progress-wrapper">
+          <p class="box-progress-header">Progress</p>
+          <div class="box-progress-bar">
+            <span class="box-progress" style="width: 80%; background-color: #096c86"></span>
+          </div>
+          <p class="box-progress-percentage">80%</p>
+        </div>
+        <div class="project-box-footer">
+          <div class="participants">
+            <img src="https://images.unsplash.com/photo-1587628604439-3b9a0aa7a163?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjR8fHdvbWFufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="participant">
+            <img src="https://images.unsplash.com/photo-1596815064285-45ed8a9c0463?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1215&q=80" alt="participant">
+            <button class="add-participant" style="color: #096c86;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </button>
+          </div>
+          <div class="days-left" style="color: #096c86;">
+            2 Days Left
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="project-box-wrapper">
+      <div class="project-box" style="background-color: #ffd3e2;">
+        <div class="project-box-header">
+          <span>December 10, 2020</span>
+          <div class="more-wrapper">
+            <button class="project-btn-more">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="12" cy="5" r="1" />
+                <circle cx="12" cy="19" r="1" /></svg>
+            </button>
+          </div>
+        </div>
+        <div class="project-box-content-header">
+          <p class="box-content-header">UI Development</p>
+          <p class="box-content-subheader">Prototyping</p>
+        </div>
+        <div class="box-progress-wrapper">
+          <p class="box-progress-header">Progress</p>
+          <div class="box-progress-bar">
+            <span class="box-progress" style="width: 20%; background-color: #df3670"></span>
+          </div>
+          <p class="box-progress-percentage">20%</p>
+        </div>
+        <div class="project-box-footer">
+          <div class="participants">
+            <img src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="participant">
+            <img src="https://images.unsplash.com/photo-1587628604439-3b9a0aa7a163?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjR8fHdvbWFufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="participant">
+            <button class="add-participant" style="color: #df3670;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </button>
+          </div>
+          <div class="days-left" style="color: #df3670;">
+            2 Days Left
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="project-box-wrapper">
+      <div class="project-box" style="background-color: #c8f7dc;">
+        <div class="project-box-header">
+          <span>December 10, 2020</span>
+          <div class="more-wrapper">
+            <button class="project-btn-more">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="12" cy="5" r="1" />
+                <circle cx="12" cy="19" r="1" /></svg>
+            </button>
+          </div>
+        </div>
+        <div class="project-box-content-header">
+          <p class="box-content-header">Data Analysis</p>
+          <p class="box-content-subheader">Prototyping</p>
+        </div>
+        <div class="box-progress-wrapper">
+          <p class="box-progress-header">Progress</p>
+          <div class="box-progress-bar">
+            <span class="box-progress" style="width: 60%; background-color: #34c471"></span>
+          </div>
+          <p class="box-progress-percentage">60%</p>
+        </div>
+        <div class="project-box-footer">
+          <div class="participants">
+            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="participant">
+            <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="participant">
+            <button class="add-participant" style="color: #34c471;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </button>
+          </div>
+          <div class="days-left" style="color: #34c471;">
+            2 Days Left
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="project-box-wrapper">
+      <div class="project-box" style="background-color: #d5deff;">
+        <div class="project-box-header">
+          <span>December 10, 2020</span>
+          <div class="more-wrapper">
+            <button class="project-btn-more">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="12" cy="5" r="1" />
+                <circle cx="12" cy="19" r="1" /></svg>
+            </button>
+          </div>
+        </div>
+        <div class="project-box-content-header">
+          <p class="box-content-header">Web Designing</p>
+          <p class="box-content-subheader">Prototyping</p>
+        </div>
+        <div class="box-progress-wrapper">
+          <p class="box-progress-header">Progress</p>
+          <div class="box-progress-bar">
+            <span class="box-progress" style="width: 40%; background-color: #4067f9"></span>
+          </div>
+          <p class="box-progress-percentage">40%</p>
+        </div>
+        <div class="project-box-footer">
+          <div class="participants">
+            <img src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="participant">
+            <img src="https://images.unsplash.com/photo-1583195764036-6dc248ac07d9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2555&q=80" alt="participant">
+            <button class="add-participant" style="color: #4067f9;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </button>
+          </div>
+          <div class="days-left" style="color: #4067f9;">
+            2 Days Left
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="messages-section">
+  <button class="messages-close">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="15" y1="9" x2="9" y2="15" />
+      <line x1="9" y1="9" x2="15" y2="15" /></svg>
+  </button>
+  <div class="projects-section-header">
+    <p>Client Messages</p>
+  </div>
+  <div class="messages">
+    <div class="message-box">
+      <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="profile image">
+      <div class="message-content">
+        <div class="message-header">
+          <div class="name">Stephanie</div>
+          <div class="star-checkbox">
+            <input type="checkbox" id="star-1">
+            <label for="star-1">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
+            </label>
+          </div>
+        </div>
+        <p class="message-line">
+          I got your first assignment. It was quite good. 🥳 We can continue with the next assignment.
+        </p>
+        <p class="message-line time">
+          Dec, 12
+        </p>
+      </div>
+    </div>
+    <div class="message-box">
+      <img src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="profile image">
+      <div class="message-content">
+        <div class="message-header">
+          <div class="name">Mark</div>
+          <div class="star-checkbox">
+            <input type="checkbox" id="star-2">
+            <label for="star-2">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
+            </label>
+          </div>
+        </div>
+        <p class="message-line">
+          Hey, can tell me about progress of project? I'm waiting for your response.
+        </p>
+        <p class="message-line time">
+          Dec, 12
+        </p>
+      </div>
+    </div>
+    <div class="message-box">
+      <img src="https://images.unsplash.com/photo-1543965170-4c01a586684e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NDZ8fG1hbnxlbnwwfDB8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="profile image">
+      <div class="message-content">
+        <div class="message-header">
+          <div class="name">David</div>
+          <div class="star-checkbox">
+            <input type="checkbox" id="star-3">
+            <label for="star-3">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
+            </label>
+          </div>
+        </div>
+        <p class="message-line">
+          Awesome! 🤩 I like it. We can schedule a meeting for the next one.
+        </p>
+        <p class="message-line time">
+          Dec, 12
+        </p>
+      </div>
+    </div>
+    <div class="message-box">
+      <img src="https://images.unsplash.com/photo-1533993192821-2cce3a8267d1?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTl8fHdvbWFuJTIwbW9kZXJufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="profile image">
+      <div class="message-content">
+        <div class="message-header">
+          <div class="name">Jessica</div>
+          <div class="star-checkbox">
+            <input type="checkbox" id="star-4">
+            <label for="star-4">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
+            </label>
+          </div>
+        </div>
+        <p class="message-line">
+          I am really impressed! Can't wait to see the final result.
+        </p>
+        <p class="message-line time">
+          Dec, 11
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/project-management-dashboard-ui/dist/script.js b/project-management-dashboard-ui/dist/script.js
new file mode 100644
index 0000000..b4be09d
--- /dev/null
+++ b/project-management-dashboard-ui/dist/script.js
@@ -0,0 +1,33 @@
+document.addEventListener('DOMContentLoaded', function () {
+  var modeSwitch = document.querySelector('.mode-switch');
+
+  modeSwitch.addEventListener('click', function () {                     document.documentElement.classList.toggle('dark');
+    modeSwitch.classList.toggle('active');
+  });
+  
+  var listView = document.querySelector('.list-view');
+  var gridView = document.querySelector('.grid-view');
+  var projectsList = document.querySelector('.project-boxes');
+  
+  listView.addEventListener('click', function () {
+    gridView.classList.remove('active');
+    listView.classList.add('active');
+    projectsList.classList.remove('jsGridView');
+    projectsList.classList.add('jsListView');
+  });
+  
+  gridView.addEventListener('click', function () {
+    gridView.classList.add('active');
+    listView.classList.remove('active');
+    projectsList.classList.remove('jsListView');
+    projectsList.classList.add('jsGridView');
+  });
+  
+  document.querySelector('.messages-btn').addEventListener('click', function () {
+    document.querySelector('.messages-section').classList.add('show');
+  });
+  
+  document.querySelector('.messages-close').addEventListener('click', function() {
+    document.querySelector('.messages-section').classList.remove('show');
+  });
+});
\ No newline at end of file
diff --git a/project-management-dashboard-ui/dist/style.css b/project-management-dashboard-ui/dist/style.css
new file mode 100644
index 0000000..49b49c5
--- /dev/null
+++ b/project-management-dashboard-ui/dist/style.css
@@ -0,0 +1,862 @@
+@charset "UTF-8";
+@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --app-container: #f3f6fd;
+  --main-color: #1f1c2e;
+  --secondary-color: #4A4A4A;
+  --link-color: #1f1c2e;
+  --link-color-hover: #c3cff4;
+  --link-color-active: #fff;
+  --link-color-active-bg: #1f1c2e;
+  --projects-section: #fff;
+  --message-box-hover: #fafcff;
+  --message-box-border: #e9ebf0;
+  --more-list-bg: #fff;
+  --more-list-bg-hover: #f6fbff;
+  --more-list-shadow: rgba(209, 209, 209, 0.4);
+  --button-bg: #1f1c24;
+  --search-area-bg: #fff;
+  --star: #1ff1c2e;
+  --message-btn: #fff;
+}
+
+.dark:root {
+  --app-container: #1f1d2b;
+  --app-container: #111827;
+  --main-color: #fff;
+  --secondary-color: rgba(255,255,255,.8);
+  --projects-section: #1f2937;
+  --link-color: rgba(255,255,255,.8);
+  --link-color-hover: rgba(195, 207, 244, 0.1);
+  --link-color-active-bg: rgba(195, 207, 244, 0.2);
+  --button-bg: #1f2937;
+  --search-area-bg: #1f2937;
+  --message-box-hover: #243244;
+  --message-box-border: rgba(255,255,255,.1);
+  --star: #ffd92c;
+  --light-font: rgba(255,255,255,.8);
+  --more-list-bg: #2f3142;
+  --more-list-bg-hover: rgba(195, 207, 244, 0.1);
+  --more-list-shadow: rgba(195, 207, 244, 0.1);
+  --message-btn: rgba(195, 207, 244, 0.1);
+}
+
+html, body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+}
+
+body {
+  font-family: "DM Sans", sans-serif;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  background-color: var(--app-container);
+}
+
+button, a {
+  cursor: pointer;
+}
+
+.app-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--app-container);
+  transition: 0.2s;
+  max-width: 1800px;
+}
+.app-container button, .app-container input, .app-container optgroup, .app-container select, .app-container textarea {
+  font-family: "DM Sans", sans-serif;
+}
+.app-content {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  padding: 16px 24px 24px 0;
+}
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 16px 24px;
+  position: relative;
+}
+.app-header-left, .app-header-right {
+  display: flex;
+  align-items: center;
+}
+.app-header-left {
+  flex-grow: 1;
+}
+.app-header-right button {
+  margin-left: 10px;
+}
+.app-icon {
+  width: 26px;
+  height: 2px;
+  border-radius: 4px;
+  background-color: var(--main-color);
+  position: relative;
+}
+.app-icon:before, .app-icon:after {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 2px;
+  border-radius: 4px;
+  background-color: var(--main-color);
+  left: 50%;
+  transform: translatex(-50%);
+}
+.app-icon:before {
+  top: -6px;
+}
+.app-icon:after {
+  bottom: -6px;
+}
+.app-name {
+  color: var(--main-color);
+  margin: 0;
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 700;
+  margin: 0 32px;
+}
+
+.mode-switch {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  color: var(--main-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.search-wrapper {
+  border-radius: 20px;
+  background-color: var(--search-area-bg);
+  padding-right: 12px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 480px;
+  color: var(--light-font);
+  box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
+  overflow: hidden;
+}
+.dark .search-wrapper {
+  box-shadow: none;
+}
+
+.search-input {
+  border: none;
+  flex: 1;
+  outline: none;
+  height: 100%;
+  padding: 0 20px;
+  font-size: 16px;
+  background-color: var(--search-area-bg);
+  color: var(--main-color);
+}
+.search-input:placeholder {
+  color: var(--main-color);
+  opacity: 0.6;
+}
+
+.add-btn {
+  color: #fff;
+  background-color: var(--button-bg);
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.notification-btn {
+  color: var(--main-color);
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.profile-btn {
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  padding-left: 12px;
+  border-left: 2px solid #ddd;
+}
+.profile-btn img {
+  width: 32px;
+  height: 32px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 50%;
+  margin-right: 4px;
+}
+.profile-btn span {
+  color: var(--main-color);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+}
+
+.page-content  {
+  flex: 1;
+  width: 100%;
+}
+
+.app-sidebar {
+  padding: 40px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.app-sidebar-link {
+  color: var(--main-color);
+  color: var(--link-color);
+  margin: 16px 0;
+  transition: 0.2s;
+  border-radius: 50%;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.app-sidebar-link:hover {
+  background-color: var(--link-color-hover);
+  color: var(--link-color-active);
+}
+.app-sidebar-link.active {
+  background-color: var(--link-color-active-bg);
+  color: var(--link-color-active);
+}
+
+.projects-section {
+  flex: 2;
+  background-color: var(--projects-section);
+  border-radius: 32px;
+  padding: 32px 32px 0 32px;
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.projects-section-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 32px;
+}
+.projects-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  color: var(--main-color);
+}
+.projects-section-header p {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 700;
+  opacity: 0.9;
+  margin: 0;
+  color: var(--main-color);
+}
+.projects-section-header .time {
+  font-size: 20px;
+}
+
+.projects-status {
+  display: flex;
+}
+
+.item-status {
+  display: flex;
+  flex-direction: column;
+  margin-right: 16px;
+}
+.item-status:not(:last-child) .status-type:after {
+  content: "";
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translatey(-50%);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  border: 1px solid var(--secondary-color);
+}
+
+.status-number {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 700;
+  color: var(--main-color);
+}
+
+.status-type {
+  position: relative;
+  padding-right: 24px;
+  color: var(--secondary-color);
+}
+
+.view-actions {
+  display: flex;
+  align-items: center;
+}
+
+.view-btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px;
+  border-radius: 4px;
+  background-color: transparent;
+  border: none;
+  color: var(--main-color);
+  margin-left: 8px;
+  transition: 0.2s;
+}
+.view-btn.active {
+  background-color: var(--link-color-active-bg);
+  color: var(--link-color-active);
+}
+.view-btn:not(.active):hover {
+  background-color: var(--link-color-hover);
+  color: var(--link-color-active);
+}
+
+.messages-section {
+  flex-shrink: 0;
+  padding-bottom: 32px;
+  background-color: var(--projects-section);
+  margin-left: 24px;
+  flex: 1;
+  width: 100%;
+  border-radius: 30px;
+  position: relative;
+  overflow: auto;
+  transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1);
+}
+.messages-section .messages-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 3;
+  border: none;
+  background-color: transparent;
+  color: var(--main-color);
+  display: none;
+}
+.messages-section.show {
+  transform: translateX(0);
+  opacity: 1;
+  margin-left: 0;
+}
+.messages-section .projects-section-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 32px 24px 0 24px;
+  background-color: var(--projects-section);
+}
+
+.message-box {
+  border-top: 1px solid var(--message-box-border);
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+.message-box:hover {
+  background-color: var(--message-box-hover);
+  border-top-color: var(--link-color-hover);
+}
+.message-box:hover + .message-box {
+  border-top-color: var(--link-color-hover);
+}
+.message-box img {
+  border-radius: 50%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 40px;
+  height: 40px;
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.message-header .name {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+  color: var(--main-color);
+  margin: 0;
+}
+
+.message-content {
+  padding-left: 16px;
+  width: 100%;
+}
+
+.star-checkbox input {
+  opacity: 0;
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+.star-checkbox label {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.dark .star-checkbox {
+  color: var(--secondary-color);
+}
+.dark .star-checkbox input:checked + label {
+  color: var(--star);
+}
+.star-checkbox input:checked + label svg {
+  fill: var(--star);
+  transition: 0.2s;
+}
+
+.message-line {
+  font-size: 14px;
+  line-height: 20px;
+  margin: 8px 0;
+  color: var(--secondary-color);
+  opacity: 0.7;
+}
+.message-line.time {
+  text-align: right;
+  margin-bottom: 0;
+}
+
+.project-boxes {
+  margin: 0 -8px;
+  overflow-y: auto;
+}
+.project-boxes.jsGridView {
+  display: flex;
+  flex-wrap: wrap;
+}
+.project-boxes.jsGridView .project-box-wrapper {
+  width: 33.3%;
+}
+.project-boxes.jsListView .project-box {
+  display: flex;
+  border-radius: 10px;
+  position: relative;
+}
+.project-boxes.jsListView .project-box > * {
+  margin-right: 24px;
+}
+.project-boxes.jsListView .more-wrapper {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+}
+.project-boxes.jsListView .project-box-content-header {
+  order: 1;
+  max-width: 120px;
+}
+.project-boxes.jsListView .project-box-header {
+  order: 2;
+}
+.project-boxes.jsListView .project-box-footer {
+  order: 3;
+  padding-top: 0;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.project-boxes.jsListView .project-box-footer:after {
+  display: none;
+}
+.project-boxes.jsListView .participants {
+  margin-bottom: 8px;
+}
+.project-boxes.jsListView .project-box-content-header p {
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.project-boxes.jsListView .project-box-header > span {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  font-size: 12px;
+}
+.project-boxes.jsListView .box-progress-wrapper {
+  order: 3;
+  flex: 1;
+}
+
+.project-box {
+  --main-color-card: #dbf6fd;
+  border-radius: 30px;
+  padding: 16px;
+  background-color: var(--main-color-card);
+}
+.project-box-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  color: var(--main-color);
+}
+.project-box-header span {
+  color: #4A4A4A;
+  opacity: 0.7;
+  font-size: 14px;
+  line-height: 16px;
+}
+.project-box-content-header {
+  text-align: center;
+  margin-bottom: 16px;
+}
+.project-box-content-header p {
+  margin: 0;
+}
+.project-box-wrapper {
+  padding: 8px;
+  transition: 0.2s;
+}
+
+.project-btn-more {
+  padding: 0;
+  height: 14px;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  background-color: transparent;
+  border: none;
+  flex-shrink: 0;
+  /*&:after, &:before {
+    content: '';
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--main-color);
+    opacity: .8;
+    left: 50%;
+    transform: translatex(-50%);
+  }
+
+  &:before { top: 0;}
+  &:after { bottom: 0; }*/
+}
+
+.more-wrapper {
+  position: relative;
+}
+
+.box-content-header {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+  opacity: 0.7;
+}
+
+.box-content-subheader {
+  font-size: 14px;
+  line-height: 24px;
+  opacity: 0.7;
+}
+
+.box-progress {
+  display: block;
+  height: 4px;
+  border-radius: 6px;
+}
+.box-progress-bar {
+  width: 100%;
+  height: 4px;
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: #fff;
+  margin: 8px 0;
+}
+.box-progress-header {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 16px;
+  margin: 0;
+}
+.box-progress-percentage {
+  text-align: right;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 16px;
+}
+
+.project-box-footer {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 16px;
+  position: relative;
+}
+.project-box-footer:after {
+  content: "";
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.6);
+  width: calc(100% + 32px);
+  top: 0;
+  left: -16px;
+  height: 1px;
+}
+
+.participants {
+  display: flex;
+  align-items: center;
+}
+.participants img {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  overflow: hidden;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.participants img:not(:first-child) {
+  margin-left: -8px;
+}
+
+.add-participant {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: none;
+  background-color: rgba(255, 255, 255, 0.6);
+  margin-left: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+
+.days-left {
+  background-color: rgba(255, 255, 255, 0.6);
+  font-size: 12px;
+  border-radius: 20px;
+  flex-shrink: 0;
+  padding: 6px 16px;
+  font-weight: 700;
+}
+
+.mode-switch.active .moon {
+  fill: var(--main-color);
+}
+
+.messages-btn {
+  border-radius: 4px 0 0 4px;
+  position: absolute;
+  right: 0;
+  top: 58px;
+  background-color: var(--message-btn);
+  border: none;
+  color: var(--main-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 4px;
+  display: none;
+}
+
+@media screen and (max-width: 980px) {
+  .project-boxes.jsGridView .project-box-wrapper {
+    width: 50%;
+  }
+
+  .status-number, .status-type {
+    font-size: 14px;
+  }
+
+  .status-type:after {
+    width: 4px;
+    height: 4px;
+  }
+
+  .item-status {
+    margin-right: 0;
+  }
+}
+@media screen and (max-width: 880px) {
+  .messages-section {
+    transform: translateX(100%);
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    width: 100%;
+  }
+  .messages-section .messages-close {
+    display: block;
+  }
+
+  .messages-btn {
+    display: flex;
+  }
+}
+@media screen and (max-width: 720px) {
+  .app-name, .profile-btn span {
+    display: none;
+  }
+
+  .add-btn, .notification-btn, .mode-switch {
+    width: 20px;
+    height: 20px;
+  }
+  .add-btn svg, .notification-btn svg, .mode-switch svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .app-header-right button {
+    margin-left: 4px;
+  }
+}
+@media screen and (max-width: 520px) {
+  .projects-section {
+    overflow: auto;
+  }
+
+  .project-boxes {
+    overflow-y: visible;
+  }
+
+  .app-sidebar, .app-icon {
+    display: none;
+  }
+
+  .app-content {
+    padding: 16px 12px 24px 12px;
+  }
+
+  .status-number, .status-type {
+    font-size: 10px;
+  }
+
+  .view-btn {
+    width: 24px;
+    height: 24px;
+  }
+
+  .app-header {
+    padding: 16px 10px;
+  }
+
+  .search-input {
+    max-width: 120px;
+  }
+
+  .project-boxes.jsGridView .project-box-wrapper {
+    width: 100%;
+  }
+
+  .projects-section {
+    padding: 24px 16px 0 16px;
+  }
+
+  .profile-btn img {
+    width: 24px;
+    height: 24px;
+  }
+
+  .app-header {
+    padding: 10px;
+  }
+
+  .projects-section-header p,
+.projects-section-header .time {
+    font-size: 18px;
+  }
+
+  .status-type {
+    padding-right: 4px;
+  }
+  .status-type:after {
+    display: none;
+  }
+
+  .search-input {
+    font-size: 14px;
+  }
+
+  .messages-btn {
+    top: 48px;
+  }
+
+  .box-content-header {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  .box-content-subheader {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  .project-boxes.jsListView .project-box-header > span {
+    font-size: 10px;
+  }
+
+  .box-progress-header {
+    font-size: 12px;
+  }
+
+  .box-progress-percentage {
+    font-size: 10px;
+  }
+
+  .days-left {
+    font-size: 8px;
+    padding: 6px 6px;
+    text-align: center;
+  }
+
+  .project-boxes.jsListView .project-box > * {
+    margin-right: 10px;
+  }
+
+  .project-boxes.jsListView .more-wrapper {
+    right: 2px;
+    top: 10px;
+  }
+}
\ No newline at end of file
diff --git a/project-management-dashboard-ui/src/index.html b/project-management-dashboard-ui/src/index.html
new file mode 100644
index 0000000..f7162f7
--- /dev/null
+++ b/project-management-dashboard-ui/src/index.html
@@ -0,0 +1,450 @@
+<div class="app-container">
+  <div class="app-header">
+    <div class="app-header-left">
+      <span class="app-icon"></span>
+      <p class="app-name">Portfolio</p>
+      <div class="search-wrapper">
+        <input class="search-input" type="text" placeholder="Search">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-search" viewBox="0 0 24 24">
+          <defs></defs>
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="M21 21l-4.35-4.35"></path>
+        </svg>
+      </div>
+    </div>
+    <div class="app-header-right">
+      <button class="mode-switch" title="Switch Theme">
+        <svg class="moon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="24" height="24" viewBox="0 0 24 24">
+          <defs></defs>
+          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
+        </svg>
+      </button>
+      <button class="add-btn" title="Add New Project">
+        <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+          <line x1="12" y1="5" x2="12" y2="19" />
+          <line x1="5" y1="12" x2="19" y2="12" /></svg>
+      </button>
+      <button class="notification-btn">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
+          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+          <path d="M13.73 21a2 2 0 0 1-3.46 0" /></svg>
+      </button>
+      <button class="profile-btn">
+        <img src="https://assets.codepen.io/3306515/IMG_2025.jpg" />
+        <span>Aybüke C.</span>
+      </button>
+    </div>
+    <button class="messages-btn">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle">
+        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" /></svg>
+    </button>
+  </div>
+  <div class="app-content">
+    <div class="app-sidebar">
+      <a href="" class="app-sidebar-link active">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
+          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+          <polyline points="9 22 9 12 15 12 15 22" /></svg>
+      </a>
+      <a href="" class="app-sidebar-link">
+        <svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-pie-chart" viewBox="0 0 24 24">
+          <defs />
+          <path d="M21.21 15.89A10 10 0 118 2.83M22 12A10 10 0 0012 2v10z" />
+        </svg>
+      </a>
+      <a href="" class="app-sidebar-link">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+          <line x1="16" y1="2" x2="16" y2="6" />
+          <line x1="8" y1="2" x2="8" y2="6" />
+          <line x1="3" y1="10" x2="21" y2="10" /></svg>
+      </a>
+      <a href="" class="app-sidebar-link">
+        <svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-settings" viewBox="0 0 24 24">
+          <defs />
+          <circle cx="12" cy="12" r="3" />
+          <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
+        </svg>
+      </a>
+    </div>
+    <div class="projects-section">
+      <div class="projects-section-header">
+        <p>Projects</p>
+        <p class="time">December, 12</p>
+      </div>
+      <div class="projects-section-line">
+        <div class="projects-status">
+          <div class="item-status">
+            <span class="status-number">45</span>
+            <span class="status-type">In Progress</span>
+          </div>
+          <div class="item-status">
+            <span class="status-number">24</span>
+            <span class="status-type">Upcoming</span>
+          </div>
+          <div class="item-status">
+            <span class="status-number">62</span>
+            <span class="status-type">Total Projects</span>
+          </div>
+        </div>
+        <div class="view-actions">
+          <button class="view-btn list-view" title="List View">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list">
+              <line x1="8" y1="6" x2="21" y2="6" />
+              <line x1="8" y1="12" x2="21" y2="12" />
+              <line x1="8" y1="18" x2="21" y2="18" />
+              <line x1="3" y1="6" x2="3.01" y2="6" />
+              <line x1="3" y1="12" x2="3.01" y2="12" />
+              <line x1="3" y1="18" x2="3.01" y2="18" /></svg>
+          </button>
+          <button class="view-btn grid-view active" title="Grid View">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid">
+              <rect x="3" y="3" width="7" height="7" />
+              <rect x="14" y="3" width="7" height="7" />
+              <rect x="14" y="14" width="7" height="7" />
+              <rect x="3" y="14" width="7" height="7" /></svg>
+          </button>
+        </div>
+      </div>
+      <div class="project-boxes jsGridView">
+        <div class="project-box-wrapper">
+          <div class="project-box" style="background-color: #fee4cb;">
+            <div class="project-box-header">
+              <span>December 10, 2020</span>
+              <div class="more-wrapper">
+                <button class="project-btn-more">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
+                    <circle cx="12" cy="12" r="1" />
+                    <circle cx="12" cy="5" r="1" />
+                    <circle cx="12" cy="19" r="1" /></svg>
+                </button>
+          </div>
+        </div>
+        <div class="project-box-content-header">
+          <p class="box-content-header">Web Designing</p>
+          <p class="box-content-subheader">Prototyping</p>
+        </div>
+        <div class="box-progress-wrapper">
+          <p class="box-progress-header">Progress</p>
+          <div class="box-progress-bar">
+            <span class="box-progress" style="width: 60%; background-color: #ff942e"></span>
+          </div>
+          <p class="box-progress-percentage">60%</p>
+        </div>
+        <div class="project-box-footer">
+          <div class="participants">
+            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="participant">
+            <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="participant">
+            <button class="add-participant" style="color: #ff942e;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </button>
+          </div>
+          <div class="days-left" style="color: #ff942e;">
+            2 Days Left
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="project-box-wrapper">
+      <div class="project-box" style="background-color: #e9e7fd;">
+        <div class="project-box-header">
+          <span>December 10, 2020</span>
+          <div class="more-wrapper">
+            <button class="project-btn-more">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="12" cy="5" r="1" />
+                <circle cx="12" cy="19" r="1" /></svg>
+            </button>
+          </div>
+        </div>
+        <div class="project-box-content-header">
+          <p class="box-content-header">Testing</p>
+          <p class="box-content-subheader">Prototyping</p>
+        </div>
+        <div class="box-progress-wrapper">
+          <p class="box-progress-header">Progress</p>
+          <div class="box-progress-bar">
+            <span class="box-progress" style="width: 50%; background-color: #4f3ff0"></span>
+          </div>
+          <p class="box-progress-percentage">50%</p>
+        </div>
+        <div class="project-box-footer">
+          <div class="participants">
+            <img src="https://images.unsplash.com/photo-1596815064285-45ed8a9c0463?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1215&q=80" alt="participant">
+            <img src="https://images.unsplash.com/photo-1583195764036-6dc248ac07d9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2555&q=80" alt="participant">
+            <button class="add-participant" style="color: #4f3ff0;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </button>
+          </div>
+          <div class="days-left" style="color: #4f3ff0;">
+            2 Days Left
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="project-box-wrapper">
+      <div class="project-box">
+        <div class="project-box-header">
+          <span>December 10, 2020</span>
+          <div class="more-wrapper">
+            <button class="project-btn-more">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="12" cy="5" r="1" />
+                <circle cx="12" cy="19" r="1" /></svg>
+            </button>
+          </div>
+        </div>
+        <div class="project-box-content-header">
+          <p class="box-content-header">Svg Animations</p>
+          <p class="box-content-subheader">Prototyping</p>
+        </div>
+        <div class="box-progress-wrapper">
+          <p class="box-progress-header">Progress</p>
+          <div class="box-progress-bar">
+            <span class="box-progress" style="width: 80%; background-color: #096c86"></span>
+          </div>
+          <p class="box-progress-percentage">80%</p>
+        </div>
+        <div class="project-box-footer">
+          <div class="participants">
+            <img src="https://images.unsplash.com/photo-1587628604439-3b9a0aa7a163?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjR8fHdvbWFufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="participant">
+            <img src="https://images.unsplash.com/photo-1596815064285-45ed8a9c0463?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1215&q=80" alt="participant">
+            <button class="add-participant" style="color: #096c86;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </button>
+          </div>
+          <div class="days-left" style="color: #096c86;">
+            2 Days Left
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="project-box-wrapper">
+      <div class="project-box" style="background-color: #ffd3e2;">
+        <div class="project-box-header">
+          <span>December 10, 2020</span>
+          <div class="more-wrapper">
+            <button class="project-btn-more">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="12" cy="5" r="1" />
+                <circle cx="12" cy="19" r="1" /></svg>
+            </button>
+          </div>
+        </div>
+        <div class="project-box-content-header">
+          <p class="box-content-header">UI Development</p>
+          <p class="box-content-subheader">Prototyping</p>
+        </div>
+        <div class="box-progress-wrapper">
+          <p class="box-progress-header">Progress</p>
+          <div class="box-progress-bar">
+            <span class="box-progress" style="width: 20%; background-color: #df3670"></span>
+          </div>
+          <p class="box-progress-percentage">20%</p>
+        </div>
+        <div class="project-box-footer">
+          <div class="participants">
+            <img src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="participant">
+            <img src="https://images.unsplash.com/photo-1587628604439-3b9a0aa7a163?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjR8fHdvbWFufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="participant">
+            <button class="add-participant" style="color: #df3670;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </button>
+          </div>
+          <div class="days-left" style="color: #df3670;">
+            2 Days Left
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="project-box-wrapper">
+      <div class="project-box" style="background-color: #c8f7dc;">
+        <div class="project-box-header">
+          <span>December 10, 2020</span>
+          <div class="more-wrapper">
+            <button class="project-btn-more">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="12" cy="5" r="1" />
+                <circle cx="12" cy="19" r="1" /></svg>
+            </button>
+          </div>
+        </div>
+        <div class="project-box-content-header">
+          <p class="box-content-header">Data Analysis</p>
+          <p class="box-content-subheader">Prototyping</p>
+        </div>
+        <div class="box-progress-wrapper">
+          <p class="box-progress-header">Progress</p>
+          <div class="box-progress-bar">
+            <span class="box-progress" style="width: 60%; background-color: #34c471"></span>
+          </div>
+          <p class="box-progress-percentage">60%</p>
+        </div>
+        <div class="project-box-footer">
+          <div class="participants">
+            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="participant">
+            <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="participant">
+            <button class="add-participant" style="color: #34c471;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </button>
+          </div>
+          <div class="days-left" style="color: #34c471;">
+            2 Days Left
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="project-box-wrapper">
+      <div class="project-box" style="background-color: #d5deff;">
+        <div class="project-box-header">
+          <span>December 10, 2020</span>
+          <div class="more-wrapper">
+            <button class="project-btn-more">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="12" cy="5" r="1" />
+                <circle cx="12" cy="19" r="1" /></svg>
+            </button>
+          </div>
+        </div>
+        <div class="project-box-content-header">
+          <p class="box-content-header">Web Designing</p>
+          <p class="box-content-subheader">Prototyping</p>
+        </div>
+        <div class="box-progress-wrapper">
+          <p class="box-progress-header">Progress</p>
+          <div class="box-progress-bar">
+            <span class="box-progress" style="width: 40%; background-color: #4067f9"></span>
+          </div>
+          <p class="box-progress-percentage">40%</p>
+        </div>
+        <div class="project-box-footer">
+          <div class="participants">
+            <img src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="participant">
+            <img src="https://images.unsplash.com/photo-1583195764036-6dc248ac07d9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2555&q=80" alt="participant">
+            <button class="add-participant" style="color: #4067f9;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </button>
+          </div>
+          <div class="days-left" style="color: #4067f9;">
+            2 Days Left
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="messages-section">
+  <button class="messages-close">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="15" y1="9" x2="9" y2="15" />
+      <line x1="9" y1="9" x2="15" y2="15" /></svg>
+  </button>
+  <div class="projects-section-header">
+    <p>Client Messages</p>
+  </div>
+  <div class="messages">
+    <div class="message-box">
+      <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="profile image">
+      <div class="message-content">
+        <div class="message-header">
+          <div class="name">Stephanie</div>
+          <div class="star-checkbox">
+            <input type="checkbox" id="star-1">
+            <label for="star-1">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
+            </label>
+          </div>
+        </div>
+        <p class="message-line">
+          I got your first assignment. It was quite good. 🥳 We can continue with the next assignment.
+        </p>
+        <p class="message-line time">
+          Dec, 12
+        </p>
+      </div>
+    </div>
+    <div class="message-box">
+      <img src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="profile image">
+      <div class="message-content">
+        <div class="message-header">
+          <div class="name">Mark</div>
+          <div class="star-checkbox">
+            <input type="checkbox" id="star-2">
+            <label for="star-2">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
+            </label>
+          </div>
+        </div>
+        <p class="message-line">
+          Hey, can tell me about progress of project? I'm waiting for your response.
+        </p>
+        <p class="message-line time">
+          Dec, 12
+        </p>
+      </div>
+    </div>
+    <div class="message-box">
+      <img src="https://images.unsplash.com/photo-1543965170-4c01a586684e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NDZ8fG1hbnxlbnwwfDB8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="profile image">
+      <div class="message-content">
+        <div class="message-header">
+          <div class="name">David</div>
+          <div class="star-checkbox">
+            <input type="checkbox" id="star-3">
+            <label for="star-3">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
+            </label>
+          </div>
+        </div>
+        <p class="message-line">
+          Awesome! 🤩 I like it. We can schedule a meeting for the next one.
+        </p>
+        <p class="message-line time">
+          Dec, 12
+        </p>
+      </div>
+    </div>
+    <div class="message-box">
+      <img src="https://images.unsplash.com/photo-1533993192821-2cce3a8267d1?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTl8fHdvbWFuJTIwbW9kZXJufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="profile image">
+      <div class="message-content">
+        <div class="message-header">
+          <div class="name">Jessica</div>
+          <div class="star-checkbox">
+            <input type="checkbox" id="star-4">
+            <label for="star-4">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
+            </label>
+          </div>
+        </div>
+        <p class="message-line">
+          I am really impressed! Can't wait to see the final result.
+        </p>
+        <p class="message-line time">
+          Dec, 11
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+</div>
\ No newline at end of file
diff --git a/project-management-dashboard-ui/src/script.js b/project-management-dashboard-ui/src/script.js
new file mode 100644
index 0000000..b4be09d
--- /dev/null
+++ b/project-management-dashboard-ui/src/script.js
@@ -0,0 +1,33 @@
+document.addEventListener('DOMContentLoaded', function () {
+  var modeSwitch = document.querySelector('.mode-switch');
+
+  modeSwitch.addEventListener('click', function () {                     document.documentElement.classList.toggle('dark');
+    modeSwitch.classList.toggle('active');
+  });
+  
+  var listView = document.querySelector('.list-view');
+  var gridView = document.querySelector('.grid-view');
+  var projectsList = document.querySelector('.project-boxes');
+  
+  listView.addEventListener('click', function () {
+    gridView.classList.remove('active');
+    listView.classList.add('active');
+    projectsList.classList.remove('jsGridView');
+    projectsList.classList.add('jsListView');
+  });
+  
+  gridView.addEventListener('click', function () {
+    gridView.classList.add('active');
+    listView.classList.remove('active');
+    projectsList.classList.remove('jsListView');
+    projectsList.classList.add('jsGridView');
+  });
+  
+  document.querySelector('.messages-btn').addEventListener('click', function () {
+    document.querySelector('.messages-section').classList.add('show');
+  });
+  
+  document.querySelector('.messages-close').addEventListener('click', function() {
+    document.querySelector('.messages-section').classList.remove('show');
+  });
+});
\ No newline at end of file
diff --git a/project-management-dashboard-ui/src/style.scss b/project-management-dashboard-ui/src/style.scss
new file mode 100644
index 0000000..a46187e
--- /dev/null
+++ b/project-management-dashboard-ui/src/style.scss
@@ -0,0 +1,910 @@
+@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --app-container: #f3f6fd;
+  --main-color: #1f1c2e;
+  --secondary-color: #4A4A4A;
+  --link-color: #1f1c2e;
+  --link-color-hover: #c3cff4;
+  --link-color-active: #fff;
+  --link-color-active-bg: #1f1c2e;
+  --projects-section: #fff;
+  --message-box-hover: #fafcff;
+  --message-box-border: #e9ebf0;
+  --more-list-bg: #fff;
+  --more-list-bg-hover:  #f6fbff;
+  --more-list-shadow: rgba(209, 209, 209, 0.4);
+  --button-bg: #1f1c24;
+  --search-area-bg: #fff;
+  --star: #1ff1c2e;
+  --message-btn: #fff;
+}
+
+.dark:root {
+  --app-container: #1f1d2b;
+  --app-container: #111827;
+  --main-color: #fff;
+  --secondary-color: rgba(255,255,255,.8);
+  --projects-section: #1f2937;
+  --link-color: rgba(255,255,255,.8);
+  --link-color-hover: rgba(195, 207, 244, 0.1);
+  --link-color-active-bg: rgba(195, 207, 244, 0.2);
+  --button-bg: #1f2937;
+  --search-area-bg: #1f2937;
+  --message-box-hover: #243244;
+  --message-box-border: rgba(255,255,255,.1);
+  --star: #ffd92c;
+  --light-font: rgba(255,255,255,.8);
+  --more-list-bg: #2f3142;
+  --more-list-bg-hover:  rgba(195, 207, 244, 0.1);
+  --more-list-shadow: rgba(195, 207, 244, 0.1);
+  --message-btn: rgba(195, 207, 244, 0.1);
+}
+
+html, body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+}
+
+body {
+  font-family: 'DM Sans', sans-serif;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  background-color: var(--app-container);
+}
+
+button, a {
+  cursor: pointer;
+}
+
+.app {
+  &-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--app-container);
+    transition: .2s;
+    max-width: 1800px;
+    
+    button, input, optgroup, select, textarea {
+      font-family: 'DM Sans', sans-serif;
+    }
+  }
+  
+  &-content {
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+    padding: 16px 24px 24px 0;
+  }
+  
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 16px 24px;
+    position: relative;
+    
+    &-left, &-right {
+      display: flex;
+      align-items: center;
+    }
+    
+    &-left { flex-grow: 1; } 
+    
+    &-right button {
+      margin-left: 10px; 
+    }
+  }
+  
+  &-icon {
+    width: 26px;
+    height: 2px;
+    border-radius: 4px;
+    background-color: var(--main-color);
+    position: relative;
+    
+    &:before, &:after {
+      content: '';
+      position: absolute;
+      width: 12px;
+      height: 2px;
+      border-radius: 4px;
+      background-color: var(--main-color);
+      left: 50%;
+      transform: translatex(-50%);
+    }
+    
+    &:before { top: -6px; }
+    &:after { bottom: -6px; }
+  }
+  
+  &-name {
+    color: var(--main-color);
+    margin: 0;
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 700;
+    margin: 0 32px;
+  }
+}
+
+.mode-switch {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  color: var(--main-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.search-wrapper {
+  border-radius: 20px;
+  background-color: var(--search-area-bg);
+  padding-right: 12px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 480px;
+  color: var(--light-font);
+  box-shadow: 0 2px 6px 0 rgba(136,148,171,.2),0 24px 20px -24px rgba(71,82,107,.1);
+  overflow: hidden;
+  
+  .dark & { box-shadow: none; }
+}
+
+.search-input {
+  border: none;
+  flex: 1;
+  outline: none;
+  height: 100%;
+  padding: 0 20px;
+  font-size: 16px;
+  background-color: var(--search-area-bg);
+  color: var(--main-color);
+  
+  &:placeholder {
+    color: var(--main-color);
+    opacity: .6;
+  }
+}
+
+.add-btn {
+  color: #fff;
+  background-color: var(--button-bg);
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.notification-btn {
+  color: var(--main-color);
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.profile-btn {
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  padding-left: 12px;
+  border-left: 2px solid #ddd;
+  
+  img {
+    width: 32px;
+    height: 32px;
+    object-fit: cover;
+    border-radius: 50%;
+    margin-right: 4px;
+  }
+  
+  span {
+    color: var(--main-color);
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+  }
+}
+
+.page-content {
+  flex: 1;
+  width: 100%;
+}
+
+.app-sidebar {
+  padding: 40px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  
+  &-link {
+    color: var(--main-color);
+    color: var(--link-color);
+    margin: 16px 0;
+    transition: .2s;
+    border-radius: 50%;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    &:hover {
+      background-color: var(--link-color-hover);
+      color: var(--link-color-active);
+    }
+
+    &.active {
+      background-color: var(--link-color-active-bg);
+      color: var(--link-color-active);
+    }
+  }
+}
+
+.projects-section {
+  flex: 2;
+  background-color: var(--projects-section);
+  border-radius: 32px;
+  padding: 32px 32px 0 32px;
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  
+  &-line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 32px;
+  }
+  
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    color: var(--main-color);
+    
+    p {
+      font-size: 24px;
+      line-height: 32px;
+      font-weight: 700;
+      opacity: .9;
+      margin: 0;
+      color: var(--main-color);
+    }
+    
+    .time {
+      font-size: 20px;
+    }
+  }
+}
+
+.projects-status {
+  display: flex;
+}
+
+.item-status {
+  display: flex;
+  flex-direction: column;
+  margin-right: 16px;
+  
+  &:not(:last-child) .status-type:after {
+    content: '';
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translatey(-50%);
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    border: 1px solid var(--secondary-color);
+  }
+}
+
+.status-number {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 700;
+  color: var(--main-color);
+}
+
+.status-type {
+  position: relative;
+  padding-right: 24px;
+  color: var(--secondary-color);
+}
+
+.view-actions {
+  display: flex;
+  align-items: center;
+}
+
+
+.view-btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px;
+  border-radius: 4px;
+  background-color: transparent;
+  border: none;
+  color: var(--main-color);
+  margin-left: 8px;
+  transition: .2s;
+  
+  &.active {
+    background-color: var(--link-color-active-bg);
+    color: var(--link-color-active);
+  }
+  
+  &:not(.active):hover {
+    background-color:  var(--link-color-hover);
+    color: var(--link-color-active);
+  }
+}
+
+
+.messages-section {
+  flex-shrink: 0;
+  padding-bottom: 32px;
+  background-color: var(--projects-section);
+  margin-left: 24px;
+  flex: 1;
+  width: 100%;
+  border-radius: 30px;
+  position: relative;
+  overflow: auto;
+  transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1);
+  
+  .messages-close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 3;
+    border: none;
+    background-color: transparent;
+    color: var(--main-color);
+    display: none;
+  }
+  
+  &.show {
+    transform: translateX(0);
+    opacity: 1;
+    margin-left: 0;
+  }
+  
+  .projects-section-header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 32px 24px 0 24px;
+    background-color:  var(--projects-section);
+  }
+}
+
+.message-box {
+  border-top: 1px solid var(--message-box-border);
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  
+  &:hover {
+    background-color: var(--message-box-hover);
+    border-top-color: var(--link-color-hover);
+    
+    + .message-box {
+      border-top-color: var(--link-color-hover);
+    }
+  }
+  
+  img {
+    border-radius: 50%;
+    object-fit: cover;
+    width: 40px;
+    height: 40px;
+  }
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  
+   .name {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    color: var(--main-color);
+     margin: 0;
+  }
+}
+
+.message-content {
+  padding-left: 16px;
+  width: 100%;
+}
+
+.star-checkbox {
+  input {
+    opacity: 0;
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+  
+  label {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  
+  .dark & {
+    color: var(--secondary-color);
+    
+    
+    
+    input:checked + label {
+      color: var(--star);
+    }
+  }
+  
+  input:checked + label svg {
+    fill: var(--star);
+    transition: .2s;
+  }
+}
+
+.message-line {
+  font-size: 14px;
+  line-height: 20px;
+  margin: 8px 0;
+  color: var(--secondary-color);
+  opacity: .7;
+  
+  &.time {
+    text-align: right;
+    margin-bottom: 0;
+  }
+}
+
+.project-boxes {
+  margin: 0 -8px;
+  overflow-y: auto;
+  
+  &.jsGridView {
+    display: flex;
+    flex-wrap: wrap;
+    
+    .project-box-wrapper {
+      width: 33.3%;
+    }
+  }
+  
+  &.jsListView {
+    .project-box {
+      display: flex;
+      border-radius: 10px;
+      position: relative;
+      > * {
+        margin-right: 24px;
+      }
+    }
+    
+    .more-wrapper {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+    }
+    
+    .project-box-content-header {
+      order: 1;
+      max-width: 120px;
+    }
+    
+    .project-box-header {
+      order: 2;
+    }
+    
+    .project-box-footer {
+      order: 3;
+      padding-top: 0;
+      flex-direction: column;
+      justify-content: flex-start;
+    }
+    
+    .project-box-footer:after {
+      display: none;
+    }
+    
+    .participants {
+      margin-bottom: 8px;
+    }
+    
+    .project-box-content-header p {
+      text-align: left;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    
+    .project-box-header > span {
+      position: absolute;
+      bottom: 16px;
+      left: 16px;
+      font-size: 12px;
+    }
+    
+    .box-progress-wrapper {
+      order: 3;
+      flex: 1;
+    }
+  }
+}
+
+.project-box {
+  --main-color-card: #dbf6fd;
+  border-radius: 30px;
+  padding: 16px;
+  background-color: var(--main-color-card);
+  
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    color: var(--main-color);
+    
+    span {
+      color: #4A4A4A;
+      opacity: .7;
+      font-size: 14px;
+      line-height: 16px;
+    }
+  }
+  
+  &-content-header {
+    text-align: center;
+    margin-bottom: 16px;
+    
+    p { margin: 0; }
+  }
+  
+  &-wrapper {
+    padding: 8px;
+    transition: .2s;
+  }
+}
+
+.project-btn-more {
+  padding: 0;
+  height: 14px;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  background-color: transparent;
+  border: none;
+  flex-shrink: 0;
+  
+  /*&:after, &:before {
+    content: '';
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--main-color);
+    opacity: .8;
+    left: 50%;
+    transform: translatex(-50%);
+  }
+  
+  &:before { top: 0;}
+  &:after { bottom: 0; }*/
+}
+
+.more-wrapper {
+  position: relative;
+}
+
+.box-content-header {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+  opacity: .7;
+}
+
+.box-content-subheader {
+  font-size: 14px;
+  line-height: 24px;
+  opacity: .7;
+}
+
+.box-progress {
+  display: block;
+  height: 4px;
+  border-radius: 6px;
+  
+  &-bar {
+    width: 100%;
+    height: 4px;
+    border-radius: 6px;
+    overflow: hidden;
+    background-color: #fff;
+    margin: 8px 0;
+  }
+  
+  &-header {
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 16px;
+    margin: 0;
+  }
+  
+  &-wrapper {
+    
+  }
+  
+  &-percentage {
+    text-align: right;
+    margin: 0;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 16px;
+  }
+}
+
+.project-box-footer {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 16px;
+  position: relative;
+  
+  &:after {
+    content: '';
+    position: absolute;
+    background-color: rgba(255,255,255,0.6);;
+    width: calc(100% + 32px);
+    top: 0;
+    left: -16px;
+    height: 1px;
+  }
+}
+
+.participants {
+  display: flex;
+  align-items: center;
+  
+  img {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    overflow: hidden;
+    object-fit: cover;
+    
+    &:not(:first-child) {
+      margin-left: -8px;
+    }
+  }
+}
+
+.add-participant {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: none;
+  background-color: rgba(255,255,255,0.6);
+  margin-left: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+
+.days-left {
+  background-color: rgba(255,255,255,0.6);
+  font-size: 12px;
+  border-radius: 20px;
+  flex-shrink: 0;
+  padding: 6px 16px;
+  font-weight: 700;
+}
+
+.mode-switch.active .moon {
+  fill: var(--main-color);
+}
+
+.messages-btn {
+  border-radius: 4px 0 0 4px;
+  position: absolute;
+  right: 0;
+  top: 58px;
+  background-color: var(--message-btn);
+  border: none;
+  color: var(--main-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 4px;
+  display: none;
+}
+
+@media screen and (max-width: 980px) {
+  .project-boxes.jsGridView .project-box-wrapper {
+    width: 50%;
+  }
+  
+  .status-number, .status-type {
+    font-size: 14px;
+  }
+  
+  .status-type:after {
+    width: 4px;
+    height: 4px;
+  }
+  
+  .item-status { margin-right: 0; }
+}
+
+@media screen and (max-width: 880px) {
+  .messages-section {
+    transform: translateX(100%);
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    width: 100%;
+    
+    .messages-close { display: block; }
+  }
+  
+  .messages-btn { display: flex; }
+}
+
+@media screen and (max-width: 720px) {
+  .app-name, .profile-btn span { display: none; }
+  
+  .add-btn, .notification-btn, .mode-switch {
+    width: 20px;
+    height: 20px;
+    
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  
+  .app-header-right button {
+    margin-left: 4px;
+  }
+}
+
+@media screen and (max-width: 520px) {
+  .projects-section { overflow: auto; }
+  .project-boxes { overflow-y: visible; }
+  
+  .app-sidebar, .app-icon { display: none; }
+  
+  .app-content { padding: 16px 12px 24px 12px;}
+  
+  .status-number, .status-type {
+    font-size: 10px;
+  }
+  
+  .view-btn {
+    width: 24px;
+    height: 24px;
+  }
+  
+  .app-header {
+    padding: 16px 10px;
+  }
+  
+  .search-input {
+    max-width: 120px;
+  }
+  
+  .project-boxes.jsGridView .project-box-wrapper {
+    width: 100%;
+  }
+  
+  .projects-section {
+    padding: 24px 16px 0 16px;
+  }
+  
+  .profile-btn img {
+    width: 24px;
+    height: 24px;
+  }
+  
+  .app-header {
+    padding: 10px;
+  }
+  
+  .projects-section-header p,
+  .projects-section-header .time{
+    font-size: 18px;
+  }
+  
+  .status-type {
+    padding-right: 4px;
+    
+    &:after {
+      display: none;
+    }
+  }
+  
+  .search-input {
+    font-size: 14px;
+  }
+  
+  .messages-btn { top: 48px; }
+
+  .box-content-header {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  .box-content-subheader {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  .project-boxes.jsListView .project-box-header > span {
+    font-size: 10px;
+  }
+
+  .box-progress-header {
+    font-size: 12px;
+  }
+
+  .box-progress-percentage {
+    font-size: 10px;
+  }
+
+  .days-left {
+    font-size: 8px;
+    padding: 6px 6px;
+    text-align: center;
+  }
+
+  .project-boxes.jsListView .project-box > * {
+    margin-right: 10px;
+  }
+
+  .project-boxes.jsListView .more-wrapper {
+    right: 2px;
+    top: 10px;
+  }
+}
\ No newline at end of file
diff --git a/psychedelic-jellyfish-shader/README.markdown b/psychedelic-jellyfish-shader/README.markdown
new file mode 100644
index 0000000..9c63966
--- /dev/null
+++ b/psychedelic-jellyfish-shader/README.markdown
@@ -0,0 +1,5 @@
+# Psychedelic Jellyfish Shader
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/perbyhring/pen/jOLVVGw](https://codepen.io/perbyhring/pen/jOLVVGw).
+
+
diff --git a/psychedelic-jellyfish-shader/dist/index.html b/psychedelic-jellyfish-shader/dist/index.html
new file mode 100644
index 0000000..9603d30
--- /dev/null
+++ b/psychedelic-jellyfish-shader/dist/index.html
@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Psychedelic Jellyfish Shader</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canvas" />
+
+<script type="x-shader" id="shader_vertex">
+#define PI 3.1415926535897932384626433832795
+
+float TAU = PI * 2.0;
+
+uniform float u_time;
+uniform float u_width;
+uniform float u_bump_frequency;
+uniform float u_bump_scale;
+
+varying vec3 v_pos;
+varying vec3 v_orig_pos;
+varying vec3 v_view_pos;
+varying float v_bumps;
+
+const float bump_iterations = 7.0;
+
+void main() {
+
+  
+  vec4 model_position = modelMatrix * vec4(position, 1.0);
+
+  vec3 pos = position;
+
+  pos.xz *= u_width - (0.05 + smoothstep(0.0, -0.3, position.y) * -0.3) * u_width * 0.3;
+  
+  pos.xz *= 1.0 - sin((pos.y + u_time * 0.2 * TAU) * 2.0) * 0.2;
+  pos.y *= 1.0 - sin((pos.y + (u_time + 0.3) * 0.2 * TAU) * 2.0) * .6;
+  
+  float bumps = 0.0;
+
+  for (float i = 1.0; i < bump_iterations; i += 1.0) {
+    float bump_scalar = (pos.y * 0.5 - 1.0) * u_bump_frequency * pow(i, 1.4);
+    float bump_noise = snoise4(vec4(
+      pos.x * bump_scalar,
+      pos.y * bump_scalar + u_time * 0.1,
+      pos.z * bump_scalar,
+      u_time * 0.1 * pow(i, 1.0)
+    ));
+    bump_noise = abs(bump_noise);
+    bumps += bump_noise * u_bump_scale / i * sin(((pos.y + u_time * 0.2 * TAU) - PI * .5) * 2.0);
+  }
+  pos *= 1.0 + bumps;
+
+
+  pos.xz *= 1.0 - smoothstep(0.2, 0.1, position.y) * 0.35;
+
+  model_position.xyz = pos;
+
+  vec4 view_position = viewMatrix * model_position;
+  vec4 projected_position = projectionMatrix * view_position;
+
+  gl_Position = projected_position;
+
+  v_pos = vec3(model_position.xyz);
+  v_view_pos = vec3(view_position.xyz);
+  v_bumps = bumps;
+  v_orig_pos = position;
+}
+</script>
+
+<script type="x-shader" id="shader_fragment">
+uniform float u_time;
+
+varying vec3 v_pos;
+varying vec3 v_view_pos;
+varying vec3 v_orig_pos;
+varying float v_bumps;
+
+void main() {
+
+  vec3 color_dark = vec3(0, 0, 0);
+  vec3 color_light = vec3(240, 230, 243);
+
+  vec3 color = mix(color_dark, color_light, v_bumps * 0.002);
+
+  color = mix(color, color_light, (1.5 + v_pos.y * 0.5) * 0.0008);
+
+  float noise = snoise4(vec4(
+    v_pos.x + v_orig_pos.y * 32.0,
+    v_orig_pos.y * v_pos.y * 0.1,
+    v_pos.z + v_orig_pos.y * 32.0,
+    u_time
+  ));
+  noise = noise * 0.25 * smoothstep(0.1, 0.2, v_orig_pos.y);
+  color -= noise;
+  color.r *= 1.0 + distance(v_pos.xyz, vec3(0.0,v_orig_pos.y,0.0)) * 0.5;
+  color.b += noise * v_pos.y;
+
+  color.r *= 1.3;
+  color.g *= v_pos.y + 0.5;
+  color.b *= v_pos.y + 0.5;
+  color.b += (1.0 - color.r) * 0.4;
+
+  color *= .9;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+</script>
+
+<script type="x-shader" id="shader_simplexNoise4D">
+	//
+// Description : Array and textureless GLSL 2D/3D/4D simplex
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : ijm
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//
+
+vec4 mod289(vec4 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0; }
+
+float mod289(float x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0; }
+
+vec4 permute(vec4 x) {
+     return mod289(((x*34.0)+1.0)*x);
+}
+
+float permute(float x) {
+     return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float taylorInvSqrt(float r)
+{
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+vec4 grad4(float j, vec4 ip)
+  {
+  const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
+  vec4 p,s;
+
+  p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
+  p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
+  s = vec4(lessThan(p, vec4(0.0)));
+  p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;
+
+  return p;
+  }
+
+// (sqrt(5) - 1)/4 = F4, used once below
+#define F4 0.309016994374947451
+
+float snoise4(vec4 v)
+  {
+  const vec4  C = vec4( 0.138196601125011,  // (5 - sqrt(5))/20  G4
+                        0.276393202250021,  // 2 * G4
+                        0.414589803375032,  // 3 * G4
+                       -0.447213595499958); // -1 + 4 * G4
+
+// First corner
+  vec4 i  = floor(v + dot(v, vec4(F4)) );
+  vec4 x0 = v -   i + dot(i, C.xxxx);
+
+// Other corners
+
+// Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)
+  vec4 i0;
+  vec3 isX = step( x0.yzw, x0.xxx );
+  vec3 isYZ = step( x0.zww, x0.yyz );
+//  i0.x = dot( isX, vec3( 1.0 ) );
+  i0.x = isX.x + isX.y + isX.z;
+  i0.yzw = 1.0 - isX;
+//  i0.y += dot( isYZ.xy, vec2( 1.0 ) );
+  i0.y += isYZ.x + isYZ.y;
+  i0.zw += 1.0 - isYZ.xy;
+  i0.z += isYZ.z;
+  i0.w += 1.0 - isYZ.z;
+
+  // i0 now contains the unique values 0,1,2,3 in each channel
+  vec4 i3 = clamp( i0, 0.0, 1.0 );
+  vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );
+  vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );
+
+  //  x0 = x0 - 0.0 + 0.0 * C.xxxx
+  //  x1 = x0 - i1  + 1.0 * C.xxxx
+  //  x2 = x0 - i2  + 2.0 * C.xxxx
+  //  x3 = x0 - i3  + 3.0 * C.xxxx
+  //  x4 = x0 - 1.0 + 4.0 * C.xxxx
+  vec4 x1 = x0 - i1 + C.xxxx;
+  vec4 x2 = x0 - i2 + C.yyyy;
+  vec4 x3 = x0 - i3 + C.zzzz;
+  vec4 x4 = x0 + C.wwww;
+
+// Permutations
+  i = mod289(i);
+  float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);
+  vec4 j1 = permute( permute( permute( permute (
+             i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))
+           + i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))
+           + i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))
+           + i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));
+
+// Gradients: 7x7x6 points over a cube, mapped onto a 4-cross polytope
+// 7*7*6 = 294, which is close to the ring size 17*17 = 289.
+  vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;
+
+  vec4 p0 = grad4(j0,   ip);
+  vec4 p1 = grad4(j1.x, ip);
+  vec4 p2 = grad4(j1.y, ip);
+  vec4 p3 = grad4(j1.z, ip);
+  vec4 p4 = grad4(j1.w, ip);
+
+// Normalise gradients
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+  p4 *= taylorInvSqrt(dot(p4,p4));
+
+// Mix contributions from the five corners
+  vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);
+  vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4)            ), 0.0);
+  m0 = m0 * m0;
+  m1 = m1 * m1;
+  return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))
+               + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;
+
+  }
+
+
+</script>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/psychedelic-jellyfish-shader/dist/script.js b/psychedelic-jellyfish-shader/dist/script.js
new file mode 100644
index 0000000..ffea349
--- /dev/null
+++ b/psychedelic-jellyfish-shader/dist/script.js
@@ -0,0 +1,58 @@
+import * as THREE from "https://cdn.skypack.dev/three@0.133.1";
+import { OrbitControls } from "https://cdn.skypack.dev/three@0.133.1/examples/jsm/controls/OrbitControls";
+
+const getAspectRatio = () => canvas.offsetWidth / canvas.offsetHeight;
+
+const renderer = new THREE.WebGLRenderer({
+  antialias: true,
+  powerPreference: 'high-performance',
+  canvas });
+
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x331144);
+
+const camera = new THREE.PerspectiveCamera(45, getAspectRatio(), 0.01, 1000);
+camera.position.set(0, 3, 8);
+camera.lookAt(0, 0, 0);
+scene.add(camera);
+
+const controls = new OrbitControls(camera, canvas);
+
+const geometry = new THREE.DodecahedronGeometry(1, 32);
+geometry.rotateX(Math.PI * -.5);
+
+const material = new THREE.ShaderMaterial({
+  vertexShader: shader_simplexNoise4D.textContent + shader_vertex.textContent,
+  fragmentShader: shader_simplexNoise4D.textContent + shader_fragment.textContent,
+  uniforms: {
+    u_time: { value: 0.0 },
+    u_width: { value: 1.3 },
+    u_bump_frequency: { value: 0.3 },
+    u_bump_scale: { value: 0.4 } } });
+
+
+
+const mesh = new THREE.Mesh(geometry, material);
+mesh.position.y = .15;
+scene.add(mesh);
+
+const clock = new THREE.Clock();
+clock.start();
+const loop = () => {
+  const delta = clock.getDelta();
+  material.uniforms.u_time.value += delta;
+  renderer.render(scene, camera);
+  requestAnimationFrame(loop);
+};
+loop();
+
+const update_size = () => {
+  renderer.setSize(canvas.offsetWidth, canvas.offsetHeight, false);
+  camera.aspect = getAspectRatio();
+  camera.updateProjectionMatrix();
+};
+
+window.addEventListener('resize', update_size);
+
+update_size();
\ No newline at end of file
diff --git a/psychedelic-jellyfish-shader/dist/style.css b/psychedelic-jellyfish-shader/dist/style.css
new file mode 100644
index 0000000..1a0ef76
--- /dev/null
+++ b/psychedelic-jellyfish-shader/dist/style.css
@@ -0,0 +1,10 @@
+html, body {
+  margin: 0;
+  overflow: hidden;
+}
+
+#canvas {
+  display: block;
+  width: 100vw;
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/psychedelic-jellyfish-shader/license.txt b/psychedelic-jellyfish-shader/license.txt
new file mode 100644
index 0000000..432c91c
--- /dev/null
+++ b/psychedelic-jellyfish-shader/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Per Byhring (https://codepen.io/perbyhring/pen/jOLVVGw)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/psychedelic-jellyfish-shader/src/index.html b/psychedelic-jellyfish-shader/src/index.html
new file mode 100644
index 0000000..1f904b3
--- /dev/null
+++ b/psychedelic-jellyfish-shader/src/index.html
@@ -0,0 +1,234 @@
+<canvas id="canvas" />
+
+<script type="x-shader" id="shader_vertex">
+#define PI 3.1415926535897932384626433832795
+
+float TAU = PI * 2.0;
+
+uniform float u_time;
+uniform float u_width;
+uniform float u_bump_frequency;
+uniform float u_bump_scale;
+
+varying vec3 v_pos;
+varying vec3 v_orig_pos;
+varying vec3 v_view_pos;
+varying float v_bumps;
+
+const float bump_iterations = 7.0;
+
+void main() {
+
+  
+  vec4 model_position = modelMatrix * vec4(position, 1.0);
+
+  vec3 pos = position;
+
+  pos.xz *= u_width - (0.05 + smoothstep(0.0, -0.3, position.y) * -0.3) * u_width * 0.3;
+  
+  pos.xz *= 1.0 - sin((pos.y + u_time * 0.2 * TAU) * 2.0) * 0.2;
+  pos.y *= 1.0 - sin((pos.y + (u_time + 0.3) * 0.2 * TAU) * 2.0) * .6;
+  
+  float bumps = 0.0;
+
+  for (float i = 1.0; i < bump_iterations; i += 1.0) {
+    float bump_scalar = (pos.y * 0.5 - 1.0) * u_bump_frequency * pow(i, 1.4);
+    float bump_noise = snoise4(vec4(
+      pos.x * bump_scalar,
+      pos.y * bump_scalar + u_time * 0.1,
+      pos.z * bump_scalar,
+      u_time * 0.1 * pow(i, 1.0)
+    ));
+    bump_noise = abs(bump_noise);
+    bumps += bump_noise * u_bump_scale / i * sin(((pos.y + u_time * 0.2 * TAU) - PI * .5) * 2.0);
+  }
+  pos *= 1.0 + bumps;
+
+
+  pos.xz *= 1.0 - smoothstep(0.2, 0.1, position.y) * 0.35;
+
+  model_position.xyz = pos;
+
+  vec4 view_position = viewMatrix * model_position;
+  vec4 projected_position = projectionMatrix * view_position;
+
+  gl_Position = projected_position;
+
+  v_pos = vec3(model_position.xyz);
+  v_view_pos = vec3(view_position.xyz);
+  v_bumps = bumps;
+  v_orig_pos = position;
+}
+</script>
+
+<script type="x-shader" id="shader_fragment">
+uniform float u_time;
+
+varying vec3 v_pos;
+varying vec3 v_view_pos;
+varying vec3 v_orig_pos;
+varying float v_bumps;
+
+void main() {
+
+  vec3 color_dark = vec3(0, 0, 0);
+  vec3 color_light = vec3(240, 230, 243);
+
+  vec3 color = mix(color_dark, color_light, v_bumps * 0.002);
+
+  color = mix(color, color_light, (1.5 + v_pos.y * 0.5) * 0.0008);
+
+  float noise = snoise4(vec4(
+    v_pos.x + v_orig_pos.y * 32.0,
+    v_orig_pos.y * v_pos.y * 0.1,
+    v_pos.z + v_orig_pos.y * 32.0,
+    u_time
+  ));
+  noise = noise * 0.25 * smoothstep(0.1, 0.2, v_orig_pos.y);
+  color -= noise;
+  color.r *= 1.0 + distance(v_pos.xyz, vec3(0.0,v_orig_pos.y,0.0)) * 0.5;
+  color.b += noise * v_pos.y;
+
+  color.r *= 1.3;
+  color.g *= v_pos.y + 0.5;
+  color.b *= v_pos.y + 0.5;
+  color.b += (1.0 - color.r) * 0.4;
+
+  color *= .9;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+</script>
+
+<script type="x-shader" id="shader_simplexNoise4D">
+	//
+// Description : Array and textureless GLSL 2D/3D/4D simplex
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : ijm
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//
+
+vec4 mod289(vec4 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0; }
+
+float mod289(float x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0; }
+
+vec4 permute(vec4 x) {
+     return mod289(((x*34.0)+1.0)*x);
+}
+
+float permute(float x) {
+     return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float taylorInvSqrt(float r)
+{
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+vec4 grad4(float j, vec4 ip)
+  {
+  const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
+  vec4 p,s;
+
+  p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
+  p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
+  s = vec4(lessThan(p, vec4(0.0)));
+  p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;
+
+  return p;
+  }
+
+// (sqrt(5) - 1)/4 = F4, used once below
+#define F4 0.309016994374947451
+
+float snoise4(vec4 v)
+  {
+  const vec4  C = vec4( 0.138196601125011,  // (5 - sqrt(5))/20  G4
+                        0.276393202250021,  // 2 * G4
+                        0.414589803375032,  // 3 * G4
+                       -0.447213595499958); // -1 + 4 * G4
+
+// First corner
+  vec4 i  = floor(v + dot(v, vec4(F4)) );
+  vec4 x0 = v -   i + dot(i, C.xxxx);
+
+// Other corners
+
+// Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)
+  vec4 i0;
+  vec3 isX = step( x0.yzw, x0.xxx );
+  vec3 isYZ = step( x0.zww, x0.yyz );
+//  i0.x = dot( isX, vec3( 1.0 ) );
+  i0.x = isX.x + isX.y + isX.z;
+  i0.yzw = 1.0 - isX;
+//  i0.y += dot( isYZ.xy, vec2( 1.0 ) );
+  i0.y += isYZ.x + isYZ.y;
+  i0.zw += 1.0 - isYZ.xy;
+  i0.z += isYZ.z;
+  i0.w += 1.0 - isYZ.z;
+
+  // i0 now contains the unique values 0,1,2,3 in each channel
+  vec4 i3 = clamp( i0, 0.0, 1.0 );
+  vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );
+  vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );
+
+  //  x0 = x0 - 0.0 + 0.0 * C.xxxx
+  //  x1 = x0 - i1  + 1.0 * C.xxxx
+  //  x2 = x0 - i2  + 2.0 * C.xxxx
+  //  x3 = x0 - i3  + 3.0 * C.xxxx
+  //  x4 = x0 - 1.0 + 4.0 * C.xxxx
+  vec4 x1 = x0 - i1 + C.xxxx;
+  vec4 x2 = x0 - i2 + C.yyyy;
+  vec4 x3 = x0 - i3 + C.zzzz;
+  vec4 x4 = x0 + C.wwww;
+
+// Permutations
+  i = mod289(i);
+  float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);
+  vec4 j1 = permute( permute( permute( permute (
+             i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))
+           + i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))
+           + i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))
+           + i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));
+
+// Gradients: 7x7x6 points over a cube, mapped onto a 4-cross polytope
+// 7*7*6 = 294, which is close to the ring size 17*17 = 289.
+  vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;
+
+  vec4 p0 = grad4(j0,   ip);
+  vec4 p1 = grad4(j1.x, ip);
+  vec4 p2 = grad4(j1.y, ip);
+  vec4 p3 = grad4(j1.z, ip);
+  vec4 p4 = grad4(j1.w, ip);
+
+// Normalise gradients
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+  p4 *= taylorInvSqrt(dot(p4,p4));
+
+// Mix contributions from the five corners
+  vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);
+  vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4)            ), 0.0);
+  m0 = m0 * m0;
+  m1 = m1 * m1;
+  return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))
+               + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;
+
+  }
+
+
+</script>
\ No newline at end of file
diff --git a/psychedelic-jellyfish-shader/src/script.babel b/psychedelic-jellyfish-shader/src/script.babel
new file mode 100644
index 0000000..acf0019
--- /dev/null
+++ b/psychedelic-jellyfish-shader/src/script.babel
@@ -0,0 +1,58 @@
+import * as THREE from "https://cdn.skypack.dev/three@0.133.1";
+import { OrbitControls } from "https://cdn.skypack.dev/three@0.133.1/examples/jsm/controls/OrbitControls";
+
+const getAspectRatio = () => canvas.offsetWidth / canvas.offsetHeight
+
+const renderer = new THREE.WebGLRenderer({
+	antialias: true,
+	powerPreference: 'high-performance',
+	canvas
+});
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x331144)
+
+const camera = new THREE.PerspectiveCamera(45, getAspectRatio(), 0.01, 1000);
+camera.position.set(0,3,8)
+camera.lookAt(0,0,0)
+scene.add(camera);
+
+const controls = new OrbitControls(camera, canvas)
+
+const geometry = new THREE.DodecahedronGeometry(1, 32)
+geometry.rotateX(Math.PI * -.5)
+
+const material = new THREE.ShaderMaterial({
+  vertexShader: shader_simplexNoise4D.textContent + shader_vertex.textContent,
+  fragmentShader: shader_simplexNoise4D.textContent + shader_fragment.textContent,
+  uniforms: {
+    u_time: { value: 0.0 },
+    u_width: { value: 1.3 },
+    u_bump_frequency: { value: 0.3 },
+    u_bump_scale: { value: 0.4 }
+  }
+})
+
+const mesh = new THREE.Mesh(geometry, material)
+mesh.position.y = .15
+scene.add(mesh)
+
+const clock = new THREE.Clock()
+clock.start()
+const loop = () => {
+	const delta = clock.getDelta()
+	material.uniforms.u_time.value += delta
+	renderer.render(scene, camera)
+	requestAnimationFrame(loop)
+}
+loop()
+
+const update_size = () => {
+	renderer.setSize(canvas.offsetWidth, canvas.offsetHeight, false)
+	camera.aspect = getAspectRatio()
+	camera.updateProjectionMatrix()
+}
+
+window.addEventListener('resize', update_size)
+
+update_size()
diff --git a/psychedelic-jellyfish-shader/src/style.scss b/psychedelic-jellyfish-shader/src/style.scss
new file mode 100644
index 0000000..c4c0d01
--- /dev/null
+++ b/psychedelic-jellyfish-shader/src/style.scss
@@ -0,0 +1,10 @@
+html, body {
+	margin:0;
+	overflow:hidden;
+}
+
+#canvas {
+	display:block;
+	width:100vw;
+	height:100vh;
+}
\ No newline at end of file
diff --git a/psychedelic-waves/README.markdown b/psychedelic-waves/README.markdown
new file mode 100644
index 0000000..e03d099
--- /dev/null
+++ b/psychedelic-waves/README.markdown
@@ -0,0 +1,5 @@
+# Psychedelic waves
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Yakudoo/pen/rJjOJx](https://codepen.io/Yakudoo/pen/rJjOJx).
+
+Exploring curl noise to make psychedelic backgrounds. 
diff --git a/psychedelic-waves/dist/index.html b/psychedelic-waves/dist/index.html
new file mode 100644
index 0000000..4950cb9
--- /dev/null
+++ b/psychedelic-waves/dist/index.html
@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Psychedelic waves</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="world"></div>
+<div class="title">
+	<p>Looking at these waves for 1 minute<br/>will bring you 56% more serenity*</p>
+<p class="remark">* According to a very serious and reliable study conducted by myself.</p>
+
+	<div class="credits">
+ <a href="https://codepen.io/Yakudoo/" target="blank">my other codepens</a> | <a href="https://www.epic.net" target="blank">epic.net</a></div>
+	
+</div>
+
+
+<script type="x-shader/x-fragment" id="fragmentShader">
+	precision highp float;
+
+	uniform float uTime;
+	uniform vec2 uMousePosition;
+	uniform float uHue;
+	uniform float uHueVariation;
+	uniform float uDensity;
+	uniform float uDisplacement;
+	uniform float uGradient;
+	
+	varying vec2 vUv;
+
+	float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
+	vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
+	vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);}
+
+	float rand(vec2 co){
+		return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
+	}
+
+	float hue2rgb(float f1, float f2, float hue) {
+			if (hue < 0.0)
+					hue += 1.0;
+			else if (hue > 1.0)
+					hue -= 1.0;
+			float res;
+			if ((6.0 * hue) < 1.0)
+					res = f1 + (f2 - f1) * 6.0 * hue;
+			else if ((2.0 * hue) < 1.0)
+					res = f2;
+			else if ((3.0 * hue) < 2.0)
+					res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
+			else
+					res = f1;
+			return res;
+	}
+
+	vec3 hsl2rgb(vec3 hsl) {
+			vec3 rgb;
+
+			if (hsl.y == 0.0) {
+					rgb = vec3(hsl.z); // Luminance
+			} else {
+					float f2;
+
+					if (hsl.z < 0.5)
+							f2 = hsl.z * (1.0 + hsl.y);
+					else
+							f2 = hsl.z + hsl.y - hsl.y * hsl.z;
+
+					float f1 = 2.0 * hsl.z - f2;
+
+					rgb.r = hue2rgb(f1, f2, hsl.x + (1.0/3.0));
+					rgb.g = hue2rgb(f1, f2, hsl.x);
+					rgb.b = hue2rgb(f1, f2, hsl.x - (1.0/3.0));
+			}
+			return rgb;
+	}
+
+	vec3 hsl2rgb(float h, float s, float l) {
+			return hsl2rgb(vec3(h, s, l));
+	}
+
+	float noise(vec3 p){
+			vec3 a = floor(p);
+			vec3 d = p - a;
+			d = d * d * (3.0 - 2.0 * d);
+
+			vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
+			vec4 k1 = perm(b.xyxy);
+			vec4 k2 = perm(k1.xyxy + b.zzww);
+
+			vec4 c = k2 + a.zzzz;
+			vec4 k3 = perm(c);
+			vec4 k4 = perm(c + 1.0);
+
+			vec4 o1 = fract(k3 * (1.0 / 41.0));
+			vec4 o2 = fract(k4 * (1.0 / 41.0));
+
+			vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
+			vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);
+
+			return o4.y * d.y + o4.x * (1.0 - d.y);
+	}
+
+	vec2 fade(vec2 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
+
+	float cnoise(vec2 P){
+			vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
+			vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
+			Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
+			vec4 ix = Pi.xzxz;
+			vec4 iy = Pi.yyww;
+			vec4 fx = Pf.xzxz;
+			vec4 fy = Pf.yyww;
+			vec4 i = perm(perm(ix) + iy);
+			vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
+			vec4 gy = abs(gx) - 0.5;
+			vec4 tx = floor(gx + 0.5);
+			gx = gx - tx;
+			vec2 g00 = vec2(gx.x,gy.x);
+			vec2 g10 = vec2(gx.y,gy.y);
+			vec2 g01 = vec2(gx.z,gy.z);
+			vec2 g11 = vec2(gx.w,gy.w);
+			vec4 norm = 1.79284291400159 - 0.85373472095314 *
+			vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
+			g00 *= norm.x;
+			g01 *= norm.y;
+			g10 *= norm.z;
+			g11 *= norm.w;
+			float n00 = dot(g00, vec2(fx.x, fy.x));
+			float n10 = dot(g10, vec2(fx.y, fy.y));
+			float n01 = dot(g01, vec2(fx.z, fy.z));
+			float n11 = dot(g11, vec2(fx.w, fy.w));
+			vec2 fade_xy = fade(Pf.xy);
+			vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
+			float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
+			return 2.3 * n_xy;
+	}
+
+	void main () {
+		float mouseDistance = length(vUv - uMousePosition);
+		float t = uTime * .005;
+		float elevation =  vUv.y * uDensity * 30.0;
+		
+		float shadow = smoothstep(0.0, .3 + sin(t * 5.0 * 3.14) * .1 , mouseDistance);
+		elevation += shadow * 5.0;
+		
+		float displacement = cnoise( vec2( t + vUv.y * 2.0, t + vUv.x * 3.0 )) * uDisplacement * 3.0 ;
+
+		elevation += displacement * 4.0;
+		elevation *= 2.0 + cnoise( vec2( t + vUv.y * 1.0, t + .5)) * 2.0 ;
+		
+		//elevation += cnoise ( vec2 (elevation * .1, t * 3.0) );
+
+		float light = .9 + fract(elevation) ;
+		light *= .9 + (1.0 - (displacement * displacement)) * .1;
+		elevation = floor(elevation);
+		//elevation += uGradient * .25;
+	
+		float hue =  uHue + shadow * .1 + cnoise( vec2( elevation * .10, .1 + t)) * uHueVariation;
+		float saturation = .6;;
+		float brightness =  - (1.0 - shadow) * .1 + .5  - smoothstep( 0.0, .9,  cnoise( vec2( elevation * .5, .4 + t * 5.0)) ) * .1;
+
+
+		vec3 hslCol = vec3( hue, saturation, brightness);
+		vec3 col = hsl2rgb(hslCol) * vec3(light, 1.0, 1.0);
+		
+		
+		/* circle:
+		float d = length(vUv- vec2(.5,.5));
+		float radius = .1;// + (t * .1);
+		float stroke = 0.001;
+		float smoothing = .0005;
+		d = smoothstep(radius, radius+smoothing, d) - smoothstep(radius+stroke, radius+stroke+smoothing, d);
+		
+		col += d;// * 10.0;
+		*/
+		
+		gl_FragColor = vec4(col, 1.);
+	}
+</script>  
+
+<script type="x-shader/x-vertex" id="vertexShader">  
+  // attributes of our mesh
+	attribute vec3 position;
+	attribute vec2 uv;
+
+	// built-in uniforms from ThreeJS camera and Object3D
+	uniform mat4 projectionMatrix;
+	uniform mat4 modelViewMatrix;
+	uniform mat3 normalMatrix;
+
+	// custom uniforms to build up our tubes
+	uniform float uTime;
+	uniform vec2 uMousePosition;
+
+	// pass a few things along to the vertex shader
+	varying vec2 vUv;
+
+	void main() {
+		vUv = uv;
+		vec4 pos = vec4(position, 1.0);
+		gl_Position = pos;
+	}
+</script>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/psychedelic-waves/dist/script.js b/psychedelic-waves/dist/script.js
new file mode 100644
index 0000000..f62f559
--- /dev/null
+++ b/psychedelic-waves/dist/script.js
@@ -0,0 +1,155 @@
+class World {
+  constructor(width, height) {
+
+    this.renderer = new THREE.WebGLRenderer({
+      alpha: true,
+      antialias: true });
+
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.setSize(width, height);
+    this.container = document.getElementsByClassName("world")[0];
+    this.scene = new THREE.Scene();
+    this.width = width;
+    this.height = height;
+    this.aspectRatio = width / height;
+    this.fieldOfView = 50;
+    var nearPlane = .1;
+    var farPlane = 20000;
+    this.camera = new THREE.PerspectiveCamera(this.fieldOfView, this.aspectRatio, nearPlane, farPlane);
+    this.camera.position.z = 200;
+    this.container.appendChild(this.renderer.domElement);
+    this.timer = 0;
+    this.mousePos = { x: 0, y: 0 };
+    this.targetMousePos = { x: 0, y: 0 };
+    this.createPlane();
+    this.render();
+  }
+
+  createPlane() {
+    this.material = new THREE.RawShaderMaterial({
+      vertexShader: document.getElementById('vertexShader').textContent,
+      fragmentShader: document.getElementById('fragmentShader').textContent,
+
+      uniforms: {
+        uTime: { type: 'f', value: 0 },
+        uHue: { type: 'f', value: .5 },
+        uHueVariation: { type: 'f', value: 1 },
+        uGradient: { type: 'f', value: 1 },
+        uDensity: { type: 'f', value: 1 },
+        uDisplacement: { type: 'f', value: 1 },
+        uMousePosition: { type: 'v2', value: new THREE.Vector2(0.5, 0.5) } } });
+
+
+    this.planeGeometry = new THREE.PlaneGeometry(2, 2, 1, 1);
+
+    this.plane = new THREE.Mesh(this.planeGeometry, this.material);
+    this.scene.add(this.plane);
+  }
+
+  render() {
+    this.timer += parameters.speed;
+    this.plane.material.uniforms.uTime.value = this.timer;
+
+    this.mousePos.x += (this.targetMousePos.x - this.mousePos.x) * .1;
+    this.mousePos.y += (this.targetMousePos.y - this.mousePos.y) * .1;
+
+    if (this.plane) {
+      this.plane.material.uniforms.uMousePosition.value = new THREE.Vector2(this.mousePos.x, this.mousePos.y);
+    }
+
+    this.renderer.render(this.scene, this.camera);
+  }
+
+  loop() {
+    this.render();
+    requestAnimationFrame(this.loop.bind(this));
+  }
+
+  updateSize(w, h) {
+    this.renderer.setSize(w, h);
+    this.camera.aspect = w / h;
+    this.camera.updateProjectionMatrix();
+  }
+  mouseMove(mousePos) {
+    this.targetMousePos.x = mousePos.px;
+    this.targetMousePos.y = mousePos.py;
+  }}
+;
+
+document.addEventListener("DOMContentLoaded", domIsReady);
+let mousePos = { x: 0, y: 0, px: 0, py: 0 };
+let world;
+let gui = new dat.GUI();
+
+
+let parameters = {
+  speed: .2,
+  hue: .5,
+  hueVariation: 1,
+  gradient: .3,
+  density: .5,
+  displacement: .66 };
+
+
+
+function domIsReady() {
+  world = new World(this.container, this.renderer, window.innerWidth, window.innerHeight);
+  window.addEventListener('resize', handleWindowResize, false);
+  document.addEventListener("mousemove", handleMouseMove, false);
+  handleWindowResize();
+  world.loop();
+  initGui();
+}
+
+var guiHue;
+
+function initGui() {
+  gui.width = 250;
+  guiSpeed = gui.add(parameters, 'speed').min(.1).max(1).step(.01).name('speed');
+  guiHue = gui.add(parameters, 'hue').min(0).max(1).step(.01).name('hue');
+  guiVariation = gui.add(parameters, 'hueVariation').min(0).max(1).step(.01).name('hue variation');
+  //guiGradient = gui.add(parameters, 'gradient').min(0).max(1).step(.01).name('inner gradient');
+  guiDensity = gui.add(parameters, 'density').min(0).max(1).step(.01).name('density');
+  guiDisp = gui.add(parameters, 'displacement').min(0).max(1).step(.01).name('displacement');
+
+  guiHue.onChange(function (value) {
+    updateParameters();
+  });
+
+  guiVariation.onChange(function (value) {
+    updateParameters();
+  });
+  /*
+  guiGradient.onChange( function(value) {
+  	updateParameters();
+  });
+  */
+  guiDensity.onChange(function (value) {
+    updateParameters();
+  });
+
+  guiDisp.onChange(function (value) {
+    updateParameters();
+  });
+  updateParameters();
+}
+
+function updateParameters() {
+  world.plane.material.uniforms.uHue.value = parameters.hue;
+  world.plane.material.uniforms.uHueVariation.value = parameters.hueVariation;
+  //world.plane.material.uniforms.uGradient.value = parameters.gradient;
+  world.plane.material.uniforms.uDensity.value = parameters.density;
+  world.plane.material.uniforms.uDisplacement.value = parameters.displacement;
+}
+
+function handleWindowResize() {
+  world.updateSize(window.innerWidth, window.innerHeight);
+}
+
+function handleMouseMove(e) {
+  mousePos.x = e.clientX;
+  mousePos.y = e.clientY;
+  mousePos.px = mousePos.x / window.innerWidth;
+  mousePos.py = 1.0 - mousePos.y / window.innerHeight;
+  world.mouseMove(mousePos);
+}
\ No newline at end of file
diff --git a/psychedelic-waves/dist/style.css b/psychedelic-waves/dist/style.css
new file mode 100644
index 0000000..63835f8
--- /dev/null
+++ b/psychedelic-waves/dist/style.css
@@ -0,0 +1,58 @@
+@import url("https://fonts.googleapis.com/css?family=Poppins:400,900");
+body {
+  overflow: hidden;
+}
+
+canvas {
+  display: block;
+}
+
+.world {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #FF4066;
+}
+
+.title {
+  position: absolute;
+  color: white;
+  width: calc 20%;
+  font-size: 24px;
+  font-weight: 900;
+  font-family: "Poppins";
+  letter-spacing: 1px;
+  bottom: 40px;
+  left: 40px;
+}
+
+.remark {
+  position: relative;
+  color: white;
+  font-size: 10px;
+  font-family: "Poppins";
+  font-weight: 400;
+  letter-spacing: 1px;
+  line-height: 1.5;
+}
+
+.credits {
+  position: relative;
+  color: white;
+  margin-top: 20px;
+  font-size: 10px;
+  font-family: "Poppins", sans-serif;
+  font-weight: 900;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+}
+
+.credits a {
+  color: white;
+  text-decoration: none;
+}
+
+.credits a:hover {
+  color: blue;
+  text-decoration: none;
+}
\ No newline at end of file
diff --git a/psychedelic-waves/license.txt b/psychedelic-waves/license.txt
new file mode 100644
index 0000000..ae562a9
--- /dev/null
+++ b/psychedelic-waves/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Karim Maaloul (https://codepen.io/Yakudoo/pen/rJjOJx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/psychedelic-waves/src/index.html b/psychedelic-waves/src/index.html
new file mode 100644
index 0000000..f25d1f6
--- /dev/null
+++ b/psychedelic-waves/src/index.html
@@ -0,0 +1,198 @@
+<div class="world"></div>
+<div class="title">
+	<p>Looking at these waves for 1 minute<br/>will bring you 56% more serenity*</p>
+<p class="remark">* According to a very serious and reliable study conducted by myself.</p>
+
+	<div class="credits">
+ <a href="https://codepen.io/Yakudoo/" target="blank">my other codepens</a> | <a href="https://www.epic.net" target="blank">epic.net</a></div>
+	
+</div>
+
+
+<script type="x-shader/x-fragment" id="fragmentShader">
+	precision highp float;
+
+	uniform float uTime;
+	uniform vec2 uMousePosition;
+	uniform float uHue;
+	uniform float uHueVariation;
+	uniform float uDensity;
+	uniform float uDisplacement;
+	uniform float uGradient;
+	
+	varying vec2 vUv;
+
+	float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
+	vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
+	vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);}
+
+	float rand(vec2 co){
+		return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
+	}
+
+	float hue2rgb(float f1, float f2, float hue) {
+			if (hue < 0.0)
+					hue += 1.0;
+			else if (hue > 1.0)
+					hue -= 1.0;
+			float res;
+			if ((6.0 * hue) < 1.0)
+					res = f1 + (f2 - f1) * 6.0 * hue;
+			else if ((2.0 * hue) < 1.0)
+					res = f2;
+			else if ((3.0 * hue) < 2.0)
+					res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
+			else
+					res = f1;
+			return res;
+	}
+
+	vec3 hsl2rgb(vec3 hsl) {
+			vec3 rgb;
+
+			if (hsl.y == 0.0) {
+					rgb = vec3(hsl.z); // Luminance
+			} else {
+					float f2;
+
+					if (hsl.z < 0.5)
+							f2 = hsl.z * (1.0 + hsl.y);
+					else
+							f2 = hsl.z + hsl.y - hsl.y * hsl.z;
+
+					float f1 = 2.0 * hsl.z - f2;
+
+					rgb.r = hue2rgb(f1, f2, hsl.x + (1.0/3.0));
+					rgb.g = hue2rgb(f1, f2, hsl.x);
+					rgb.b = hue2rgb(f1, f2, hsl.x - (1.0/3.0));
+			}
+			return rgb;
+	}
+
+	vec3 hsl2rgb(float h, float s, float l) {
+			return hsl2rgb(vec3(h, s, l));
+	}
+
+	float noise(vec3 p){
+			vec3 a = floor(p);
+			vec3 d = p - a;
+			d = d * d * (3.0 - 2.0 * d);
+
+			vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
+			vec4 k1 = perm(b.xyxy);
+			vec4 k2 = perm(k1.xyxy + b.zzww);
+
+			vec4 c = k2 + a.zzzz;
+			vec4 k3 = perm(c);
+			vec4 k4 = perm(c + 1.0);
+
+			vec4 o1 = fract(k3 * (1.0 / 41.0));
+			vec4 o2 = fract(k4 * (1.0 / 41.0));
+
+			vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
+			vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);
+
+			return o4.y * d.y + o4.x * (1.0 - d.y);
+	}
+
+	vec2 fade(vec2 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
+
+	float cnoise(vec2 P){
+			vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
+			vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
+			Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
+			vec4 ix = Pi.xzxz;
+			vec4 iy = Pi.yyww;
+			vec4 fx = Pf.xzxz;
+			vec4 fy = Pf.yyww;
+			vec4 i = perm(perm(ix) + iy);
+			vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
+			vec4 gy = abs(gx) - 0.5;
+			vec4 tx = floor(gx + 0.5);
+			gx = gx - tx;
+			vec2 g00 = vec2(gx.x,gy.x);
+			vec2 g10 = vec2(gx.y,gy.y);
+			vec2 g01 = vec2(gx.z,gy.z);
+			vec2 g11 = vec2(gx.w,gy.w);
+			vec4 norm = 1.79284291400159 - 0.85373472095314 *
+			vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
+			g00 *= norm.x;
+			g01 *= norm.y;
+			g10 *= norm.z;
+			g11 *= norm.w;
+			float n00 = dot(g00, vec2(fx.x, fy.x));
+			float n10 = dot(g10, vec2(fx.y, fy.y));
+			float n01 = dot(g01, vec2(fx.z, fy.z));
+			float n11 = dot(g11, vec2(fx.w, fy.w));
+			vec2 fade_xy = fade(Pf.xy);
+			vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
+			float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
+			return 2.3 * n_xy;
+	}
+
+	void main () {
+		float mouseDistance = length(vUv - uMousePosition);
+		float t = uTime * .005;
+		float elevation =  vUv.y * uDensity * 30.0;
+		
+		float shadow = smoothstep(0.0, .3 + sin(t * 5.0 * 3.14) * .1 , mouseDistance);
+		elevation += shadow * 5.0;
+		
+		float displacement = cnoise( vec2( t + vUv.y * 2.0, t + vUv.x * 3.0 )) * uDisplacement * 3.0 ;
+
+		elevation += displacement * 4.0;
+		elevation *= 2.0 + cnoise( vec2( t + vUv.y * 1.0, t + .5)) * 2.0 ;
+		
+		//elevation += cnoise ( vec2 (elevation * .1, t * 3.0) );
+
+		float light = .9 + fract(elevation) ;
+		light *= .9 + (1.0 - (displacement * displacement)) * .1;
+		elevation = floor(elevation);
+		//elevation += uGradient * .25;
+	
+		float hue =  uHue + shadow * .1 + cnoise( vec2( elevation * .10, .1 + t)) * uHueVariation;
+		float saturation = .6;;
+		float brightness =  - (1.0 - shadow) * .1 + .5  - smoothstep( 0.0, .9,  cnoise( vec2( elevation * .5, .4 + t * 5.0)) ) * .1;
+
+
+		vec3 hslCol = vec3( hue, saturation, brightness);
+		vec3 col = hsl2rgb(hslCol) * vec3(light, 1.0, 1.0);
+		
+		
+		/* circle:
+		float d = length(vUv- vec2(.5,.5));
+		float radius = .1;// + (t * .1);
+		float stroke = 0.001;
+		float smoothing = .0005;
+		d = smoothstep(radius, radius+smoothing, d) - smoothstep(radius+stroke, radius+stroke+smoothing, d);
+		
+		col += d;// * 10.0;
+		*/
+		
+		gl_FragColor = vec4(col, 1.);
+	}
+</script>  
+
+<script type="x-shader/x-vertex" id="vertexShader">  
+  // attributes of our mesh
+	attribute vec3 position;
+	attribute vec2 uv;
+
+	// built-in uniforms from ThreeJS camera and Object3D
+	uniform mat4 projectionMatrix;
+	uniform mat4 modelViewMatrix;
+	uniform mat3 normalMatrix;
+
+	// custom uniforms to build up our tubes
+	uniform float uTime;
+	uniform vec2 uMousePosition;
+
+	// pass a few things along to the vertex shader
+	varying vec2 vUv;
+
+	void main() {
+		vUv = uv;
+		vec4 pos = vec4(position, 1.0);
+		gl_Position = pos;
+	}
+</script>
diff --git a/psychedelic-waves/src/script.babel b/psychedelic-waves/src/script.babel
new file mode 100644
index 0000000..121807e
--- /dev/null
+++ b/psychedelic-waves/src/script.babel
@@ -0,0 +1,155 @@
+class World {
+  constructor(width, height) {
+
+    this.renderer = new THREE.WebGLRenderer({
+      alpha: true,
+      antialias: true
+    });
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.setSize(width, height);
+    this.container = document.getElementsByClassName("world")[0];
+    this.scene = new THREE.Scene();
+    this.width = width;
+    this.height = height;
+    this.aspectRatio = width / height;
+    this.fieldOfView = 50;
+    var nearPlane = .1;
+    var farPlane = 20000;
+    this.camera = new THREE.PerspectiveCamera(this.fieldOfView, this.aspectRatio, nearPlane, farPlane);
+		this.camera.position.z = 200;
+		this.container.appendChild(this.renderer.domElement);
+    this.timer = 0;
+		this.mousePos = {x:0, y:0};
+		this.targetMousePos = {x:0, y:0};
+    this.createPlane();
+		this.render();
+  }
+
+  createPlane(){
+    this.material = new THREE.RawShaderMaterial({
+      vertexShader: document.getElementById( 'vertexShader' ).textContent,
+      fragmentShader: document.getElementById('fragmentShader').textContent,
+     
+      uniforms: { 
+				uTime: { type: 'f', value: 0 },
+				uHue: {type: 'f', value: .5},
+				uHueVariation: {type: 'f', value: 1},
+				uGradient: {type: 'f', value: 1},
+				uDensity: {type: 'f', value: 1},
+				uDisplacement: {type: 'f', value: 1},				
+				uMousePosition: {type: 'v2', value: new THREE.Vector2( 0.5, 0.5 ) }
+    	}
+    });
+    this.planeGeometry = new THREE.PlaneGeometry(2, 2, 1, 1);
+
+    this.plane = new THREE.Mesh(this.planeGeometry, this.material);
+		this.scene.add(this.plane);
+  }
+	
+  render() {
+    this.timer += parameters.speed;
+		this.plane.material.uniforms.uTime.value = this.timer;
+		
+		this.mousePos.x += (this.targetMousePos.x - this.mousePos.x) * .1;
+		this.mousePos.y += (this.targetMousePos.y - this.mousePos.y) * .1;
+		
+		if (this.plane){
+			this.plane.material.uniforms.uMousePosition.value = new THREE.Vector2(this.mousePos.x, this.mousePos.y);
+		}
+		
+		this.renderer.render(this.scene, this.camera);
+  }
+
+  loop() {
+    this.render();
+    requestAnimationFrame(this.loop.bind(this));
+  }
+
+  updateSize(w, h) {
+    this.renderer.setSize(w, h);
+    this.camera.aspect = w / h;
+    this.camera.updateProjectionMatrix();
+  }
+  mouseMove(mousePos) {
+		this.targetMousePos.x = mousePos.px;
+		this.targetMousePos.y = mousePos.py;
+  }
+};
+
+document.addEventListener("DOMContentLoaded", domIsReady);
+let mousePos = {x:0, y:0, px:0, py:0};
+let world;
+let gui = new dat.GUI();
+
+
+let parameters = {
+  speed: .2,
+	hue: .5,
+	hueVariation: 1,
+	gradient: .3,
+	density: .5,
+	displacement: .66,
+	
+}
+
+function domIsReady() {
+	world = new World(this.container, this.renderer, window.innerWidth, window.innerHeight);
+	window.addEventListener('resize', handleWindowResize, false);
+	document.addEventListener("mousemove", handleMouseMove, false);
+	handleWindowResize();
+	world.loop();
+	initGui();
+}
+
+var guiHue;
+
+function initGui(){
+	gui.width = 250;
+  guiSpeed = gui.add(parameters, 'speed').min(.1).max(1).step(.01).name('speed');
+	guiHue = gui.add(parameters, 'hue').min(0).max(1).step(.01).name('hue');
+	guiVariation = gui.add(parameters, 'hueVariation').min(0).max(1).step(.01).name('hue variation');
+	//guiGradient = gui.add(parameters, 'gradient').min(0).max(1).step(.01).name('inner gradient');
+	guiDensity = gui.add(parameters, 'density').min(0).max(1).step(.01).name('density');
+	guiDisp = gui.add(parameters, 'displacement').min(0).max(1).step(.01).name('displacement');
+	
+	guiHue.onChange( function(value) {
+		updateParameters();
+	});
+	
+	guiVariation.onChange( function(value) {
+		updateParameters();
+	});
+	/*
+	guiGradient.onChange( function(value) {
+		updateParameters();
+	});
+	*/
+	guiDensity.onChange( function(value) {
+		updateParameters();
+	});
+	
+	guiDisp.onChange( function(value) {
+		updateParameters();
+	});
+	updateParameters();
+}
+
+function updateParameters(){
+	world.plane.material.uniforms.uHue.value = parameters.hue;
+	world.plane.material.uniforms.uHueVariation.value = parameters.hueVariation;
+	//world.plane.material.uniforms.uGradient.value = parameters.gradient;
+	world.plane.material.uniforms.uDensity.value = parameters.density;
+	world.plane.material.uniforms.uDisplacement.value = parameters.displacement;
+}
+
+function handleWindowResize() {
+    world.updateSize(window.innerWidth, window.innerHeight);
+}
+
+function handleMouseMove(e) {
+    mousePos.x = e.clientX;
+    mousePos.y = e.clientY;
+    mousePos.px = mousePos.x / window.innerWidth;
+    mousePos.py = 1.0 - mousePos.y / window.innerHeight;
+    world.mouseMove(mousePos);
+}
\ No newline at end of file
diff --git a/psychedelic-waves/src/style.scss b/psychedelic-waves/src/style.scss
new file mode 100644
index 0000000..85b0027
--- /dev/null
+++ b/psychedelic-waves/src/style.scss
@@ -0,0 +1,59 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins:400,900');
+
+body{
+	overflow: hidden;
+}
+canvas { 
+	display: block; 
+}
+
+.world{
+  position: absolute;
+  width:100%;
+  height:100%;
+  background: #FF4066;
+}
+
+.title{
+  position: absolute;
+  color: white;
+	width: calc (100%-80);
+  font-size: 24px;
+	font-weight: 900;
+  font-family: "Poppins";
+  //text-align: right;
+  letter-spacing: 1px;
+  bottom: 40px;
+  left: 40px;
+	//display: none;
+}
+
+.remark{
+  position: relative;
+  color: white;
+  font-size: 10px;
+  font-family: "Poppins";
+  font-weight: 400;
+  letter-spacing: 1px;
+	line-height:1.5;
+	//display: none;
+}
+
+.credits{
+  position:relative;
+	color:white;
+	margin-top:20px;
+  font-size:10px;
+	font-family:"Poppins", sans-serif;
+	font-weight: 900;
+	letter-spacing: 3px;
+  text-transform: uppercase;
+}
+.credits a {
+  color:white;
+	text-decoration: none;
+}
+.credits a:hover {
+  color:blue;
+	text-decoration: none;
+}
\ No newline at end of file
diff --git a/pulse-animation-in-svg-or-css3/README.markdown b/pulse-animation-in-svg-or-css3/README.markdown
new file mode 100644
index 0000000..a0d1667
--- /dev/null
+++ b/pulse-animation-in-svg-or-css3/README.markdown
@@ -0,0 +1,5 @@
+# pulse animation in SVG or CSS3
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/rauno/pen/OJbEgLN](https://codepen.io/rauno/pen/OJbEgLN).
+
+
diff --git a/pulse-animation-in-svg-or-css3/dist/index.html b/pulse-animation-in-svg-or-css3/dist/index.html
new file mode 100644
index 0000000..4e4a507
--- /dev/null
+++ b/pulse-animation-in-svg-or-css3/dist/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - pulse animation in SVG or CSS3</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="pulse-container">
+  <div class="pulse-box">
+    <svg class="pulse-svg" width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <circle class="circle first-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
+      <circle class="circle second-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
+      <circle class="circle third-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
+      <circle class="circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
+    </svg>
+  </div>
+
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/pulse-animation-in-svg-or-css3/dist/style.css b/pulse-animation-in-svg-or-css3/dist/style.css
new file mode 100644
index 0000000..2eb8bc3
--- /dev/null
+++ b/pulse-animation-in-svg-or-css3/dist/style.css
@@ -0,0 +1,70 @@
+.pulse-box {
+  float: left;
+  width: 50%;
+  height: 250px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* pulse in SVG */
+svg.pulse-svg {
+  overflow: visible;
+}
+svg.pulse-svg .first-circle, svg.pulse-svg .third-circle, svg.pulse-svg .second-circle {
+  fill: #f00;
+  transform: scale(0.5);
+  transform-origin: center center;
+  animation: pulse-me 3s linear infinite;
+}
+svg.pulse-svg .second-circle {
+  animation-delay: 1s;
+}
+svg.pulse-svg .third-circle {
+  animation-delay: 2s;
+}
+
+/* pulse in CSS */
+.pulse-css {
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  background: tomato;
+  position: relative;
+}
+.pulse-css:before, .pulse-css:after {
+  content: "";
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  background-color: tomato;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  transform: scale(0.5);
+  transform-origin: center center;
+  animation: pulse-me 3s linear infinite;
+}
+.pulse-css:after {
+  animation-delay: 2s;
+}
+
+@keyframes pulse-me {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  70% {
+    opacity: 0.09;
+  }
+  100% {
+    transform: scale(5);
+    opacity: 0;
+  }
+}
\ No newline at end of file
diff --git a/pulse-animation-in-svg-or-css3/license.txt b/pulse-animation-in-svg-or-css3/license.txt
new file mode 100644
index 0000000..d08f5c2
--- /dev/null
+++ b/pulse-animation-in-svg-or-css3/license.txt
@@ -0,0 +1,9 @@
+Copyright (c) 2022 by Rauno (https://codepen.io/rauno/pen/OJbEgLN)
+Fork of an original work pulse animation in SVG or CSS3 (https://codepen.io/athimannil/pen/MaXxwv
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/pulse-animation-in-svg-or-css3/src/index.html b/pulse-animation-in-svg-or-css3/src/index.html
new file mode 100644
index 0000000..09c3bba
--- /dev/null
+++ b/pulse-animation-in-svg-or-css3/src/index.html
@@ -0,0 +1,11 @@
+<div class="pulse-container">
+  <div class="pulse-box">
+    <svg class="pulse-svg" width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <circle class="circle first-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
+      <circle class="circle second-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
+      <circle class="circle third-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
+      <circle class="circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
+    </svg>
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/pulse-animation-in-svg-or-css3/src/style.scss b/pulse-animation-in-svg-or-css3/src/style.scss
new file mode 100644
index 0000000..cc17104
--- /dev/null
+++ b/pulse-animation-in-svg-or-css3/src/style.scss
@@ -0,0 +1,74 @@
+@mixin circle($circleSize) {
+  width: $circleSize;
+  height: $circleSize;
+  border-radius: $circleSize/2;
+}
+
+.pulse-box {
+  float: left;
+  width: 50%;
+  height: 250px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* pulse in SVG */
+svg.pulse-svg {
+  overflow: visible;
+  .first-circle {
+    fill: #f00;
+    transform: scale(0.5);
+    transform-origin: center center;
+    animation: pulse-me 3s linear infinite;
+  }
+  .second-circle {
+    @extend .first-circle;
+    animation-delay: 1s;
+  }
+  .third-circle {
+    @extend .first-circle;
+    animation-delay: 2s;
+  }
+}
+
+/* pulse in CSS */
+.pulse-css {
+  @include circle(50px);
+  background: tomato;
+  position: relative;
+  &:before,
+  &:after {
+    content: "";
+    @include circle(50px);
+    background-color: tomato;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    transform: scale(0.5);
+    transform-origin: center center;
+    animation: pulse-me 3s linear infinite;
+  }
+  &:after {
+    animation-delay: 2s;
+  }
+}
+
+@keyframes pulse-me {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  70% {
+    opacity: 0.09;
+  }
+  100% {
+    transform: scale(5);
+    opacity: 0;
+  }
+}
diff --git a/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/README.markdown b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/README.markdown
new file mode 100644
index 0000000..f958321
--- /dev/null
+++ b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/README.markdown
@@ -0,0 +1,5 @@
+# Pure CSS Coverflow with CSS ScrollTimeline (+ Scroll Snapping)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/bramus/pen/xxRZZdK](https://codepen.io/bramus/pen/xxRZZdK).
+
+
diff --git a/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/dist/index.html b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/dist/index.html
new file mode 100644
index 0000000..24e4b4a
--- /dev/null
+++ b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/dist/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Pure CSS Coverflow with CSS ScrollTimeline (+ Scroll Snapping)</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input type="checkbox" id="debug" />
+<ul class="cards" id="cards">
+    <li id="card_0">
+        <img src="https://locirecords.com/wp-content/uploads/2021/01/Front-1024x1024.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_1">
+        <img src="http://locirecords.com/wp-content/uploads/2020/12/A-Thousand-Clouds-Front-Cover-1024x1024.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_2">
+        <img src="http://locirecords.com/wp-content/uploads/2020/10/Odd-World-EP-SMALL-1024x1024.png" width="1200" height="1200" />
+    </li>
+    <li id="card_3">
+        <img src="https://locirecords.com/wp-content/uploads/2020/10/Forest-Blue-Pre-LR-1024x1024.png" width="1200" height="1200" />
+    </li>
+    <li id="card_4">
+        <img src="http://locirecords.com/wp-content/uploads/2020/08/MOM-Remixes-1024x1024.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_5">
+        <img src="https://locirecords.com/wp-content/uploads/2020/12/ALONE-TOGETHER-remix-V71-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_6">
+        <img src="https://locirecords.com/wp-content/uploads/2020/09/Nature-Therapy-Pre-LR-550x550.png" width="1200" height="1200" />
+    </li>
+    <li id="card_7">
+        <img src="https://locirecords.com/wp-content/uploads/2020/10/Deep-Dive-Ambient-Edits-V8-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_8">
+        <img src="https://locirecords.com/wp-content/uploads/2020/08/Alpine-Koresma-x-Aroth-Artwork-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_9">
+        <img src="https://locirecords.com/wp-content/uploads/2020/07/Out-Of-the-Dark-Cover-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_11">
+        <img src="https://locirecords.com/wp-content/uploads/2020/07/2020-06-07-Marley-Carroll-Single-Blue-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_12">
+        <img src="https://locirecords.com/wp-content/uploads/2020/07/Deep-Dive-EP-Cover-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_13">
+        <img src="https://locirecords.com/wp-content/uploads/2020/07/Blackrose-Cover-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_14">
+        <img src="https://locirecords.com/wp-content/uploads/2020/06/FW-Imagine-Gold-Remixes2-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_15">
+        <img src="https://locirecords.com/wp-content/uploads/2020/04/We-Are-COVER-MAIN-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_16">
+        <img src="https://locirecords.com/wp-content/uploads/2020/06/Bath-House-Flat-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_17">
+        <img src="https://locirecords.com/wp-content/uploads/2020/03/Pronoia-JPG-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_18">
+        <img src="https://locirecords.com/wp-content/uploads/2020/03/Lapa9Theory-Cracking-Stores-no-Loci-logo-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_19">
+        <img src="https://locirecords.com/wp-content/uploads/2020/02/EMANCIPATOR_MOM_AlbumCover-2000px-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_20">
+        <img src="https://locirecords.com/wp-content/uploads/2020/01/MURGE-ep-cvr-3000x3000-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_21">
+        <img src="https://locirecords.com/wp-content/uploads/2020/01/Emancipator_Laybrinth-ART-01-4000x4000-at-300dpi-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_22">
+        <img src="https://locirecords.com/wp-content/uploads/2020/01/cover-550x550.jpg" width="1200" height="1200" />
+    </li>
+</ul>
+
+<div class="warning">⚠️ Your browser does not support CSS Scroll-Linked Animations, so this demo won't work. If you're feeling adventurous use Chrome 89 with “Experimental Web Platform Features” enabled. Alternatively you can check out <a href="https://codepen.io/bramus/pen/PobZbBV" target="_top">a JS-based ScrollTimeline version <em>(with polyfills)</em></a> or <a href="https://twitter.com/bramus/status/1357391991114502144" target="_top" rel="noopener noreferrer">a recording of this demo</a></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/dist/script.js b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/dist/script.js
new file mode 100644
index 0000000..e4500e4
--- /dev/null
+++ b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/dist/script.js
@@ -0,0 +1,39 @@
+// @note: This is a little helper to quickly generate a Scroll Timeline for each li, as selector() requires an id until https://github.com/w3c/csswg-drafts/issues/5884 is resolved
+// It only generates CSS, so this demo is still pure CSS ;)
+const generateCSS = () => {
+  let css = '';
+  document.querySelectorAll('li').forEach((li, i) => {
+    const id = li.getAttribute('id');
+
+    css = `
+      ${css}
+
+      @scroll-timeline scroll-in-cards-${id} {
+        source: selector(#cards);
+        orientation: inline;
+        start: selector(#${id}) end 0;
+        end: selector(#${id}) start 0;
+        time-range: 1s;
+      }
+
+      /* Adjust the li on scroll (z-index) */
+      #${id} {
+        animation-timeline: scroll-in-cards-${id};
+      }   
+
+      /* Adjust the album cover on scroll (perspective) */
+      #${id} > img {
+        animation-timeline: scroll-in-cards-${id};
+      }   
+    `;
+  });
+  return css;
+}
+
+const injectCSS = (css) => {
+  const style = document.createElement('style');
+  style.innerHTML = css;
+  document.head.appendChild(style);
+}
+
+injectCSS(generateCSS());
\ No newline at end of file
diff --git a/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/dist/style.css b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/dist/style.css
new file mode 100644
index 0000000..0d28044
--- /dev/null
+++ b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/dist/style.css
@@ -0,0 +1,219 @@
+/*
+  🐛 Bug #1
+
+     I expected that the initial rendering should show card_0 at
+     50% animation progress, as it's positioned halfway the scrollport.
+     It — and its siblings — start at 0% though, no matter their position.
+
+     When scrolling horizontally you see the first few items "catch up"
+     with their animation state. By hitting item 8 the animation renders
+     as expected: the item shown in the middle is animated at 50%.
+
+     You can see the same "wrong" behavior when getting to the end: the
+     last few items tend to run their animation short. By the time card_30
+     is in the center it's animation progress is 100%, whereas I expected
+     it to be at 50%.
+
+ ✅ Bug #2
+
+     When enabling scroll-snapping on .cards, the whole animation
+     freaks out …
+
+     👉 Fixed by animating the elements inside the li's, not the li's
+        themselves.
+
+  🐛 Bug #3
+
+     The z-indexes aren't animated perfectly … from the right you'll see
+     that the cover will appear over the preceding one for a little while.
+
+     Above that it can — or cannot — be OK after a refresh.
+*/
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+:root {
+  --cover-size: 15rem;
+}
+
+body {
+  background: #111;
+  min-height: 100vh;
+  font-family: sans-serif;
+
+  display: flex;
+  place-items: center;
+}
+
+.cards {
+  list-style: none;
+  overflow: scroll;
+  width: 100%;
+  white-space: nowrap;
+
+  scroll-snap-type: x mandatory;
+  outline: 1px solid #333;
+  background: rgba(0 0 0 / 0.5);
+}
+
+.cards li {
+  display: inline-block;
+  width: var(--cover-size);
+  height: var(--cover-size);
+  scroll-snap-align: center;
+}
+
+.cards li img {
+  dislay: block;
+  width: var(--cover-size);
+  height: var(--cover-size);
+}
+
+.cards {
+  max-width: calc(var(--cover-size) * 6);
+  margin: 0 auto;
+  padding: calc(var(--cover-size) / 2) calc(50% - (var(--cover-size) / 2));
+}
+
+/* Show warning for older browser */
+.warning {
+  position: fixed;
+  bottom: 1em;
+  right: 1em;
+  left: 1em;
+  padding: 1em;
+  border: 1px solid black;
+  z-index: 9999;
+  text-align: center;
+  color: black;
+  background: rgba(255 255 225 / 0.9);
+}
+
+.warning a {
+  color: blue;
+}
+
+@supports (animation-timeline: works) {
+  
+  /* Hide Warning */
+  .warning {
+    display: none;
+  }
+  
+  .cards {
+    perspective: 40em;
+  }
+  
+  /* Our animations */
+  @keyframes adjust-z-index {
+    0% {
+      z-index: 1;
+    }
+    35% {
+      z-index: 100;
+    }
+    50% {
+      z-index: 10000;
+    }
+    65% {
+      z-index: 100;
+    }
+    100% {
+      z-index: 1;
+    }
+  }
+
+  @keyframes rotate-cover {
+    0% {
+      transform: translateX(-100%) rotateY(-45deg);
+    }
+    35% {
+      transform: translateX(0) rotateY(-45deg);
+    }
+    50% {
+      transform: rotateY(0deg) translateZ(1em) scale(1.5);
+    }
+    65% {
+      transform: translateX(0) rotateY(45deg);
+    }
+    100% {
+      transform: translateX(100%) rotateY(45deg);
+    }
+  }
+  
+  /* 👀 Looking for the @scroll-timeline? You won't find those here but in
+        the JS pane. Using JavaScript we generate the timeliens and attach
+        them. We do this because we need to generate a Scroll Timeline for 
+        each li, as selector() requires an id. This is quite cumbersome so
+        we resort to JS for now.
+  
+        Relevant Bug: https://github.com/w3c/csswg-drafts/issues/5884
+        
+        No worries: the JS only generates CSS, so this demo is still pure
+        CSS.
+  */
+
+  /* 🪝 Attach animations. Note that we attach a faux animation-timeline
+        to prevent our animations from starting on load.
+  
+        We also apply the first part of our animation to the elements.
+        This way we prevent a FOUC.
+  */
+  .cards li {
+    animation: 1s linear adjust-z-index both;
+    animation-timeline: faux-animation-timeline;
+    /* Prevent FOUC */
+    position: relative;
+    z-index: 1;
+
+	will-change: z-index;
+  }
+
+  .cards li > img {
+    animation: 1s linear rotate-cover both;
+    animation-timeline: faux-animation-timeline;
+    /* Prevent FOUC */
+    transform: translateX(-150%) rotateY(-45deg);
+
+	will-change: transform;
+  }
+}
+
+#debug {
+  position: absolute;
+  top: 1em;
+  left: 1em;
+}
+#debug::after {
+  content: " Show Debug";
+  margin-left: 1.5em;
+  color: white;
+  white-space: nowrap;
+}
+
+#debug:checked + .cards {
+  border: 1px solid lime;
+}
+
+#debug:checked + .cards li {
+  text-align: center;
+  color: white;
+  border: 1px solid blue;
+}
+
+#debug:checked + .cards li::before {
+  content: attr(id);
+  display: block;
+  position: absolute;
+  inset: 0;
+  line-height: var(--cover-size);
+  opacity: 0.5;
+}
+
+#debug:checked + .cards li img {
+  opacity: 0.5;
+}
\ No newline at end of file
diff --git a/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/license.txt b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/license.txt
new file mode 100644
index 0000000..9da71f9
--- /dev/null
+++ b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Bramus (https://codepen.io/bramus/pen/xxRZZdK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/src/index.html b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/src/index.html
new file mode 100644
index 0000000..2c585b6
--- /dev/null
+++ b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/src/index.html
@@ -0,0 +1,71 @@
+<input type="checkbox" id="debug" />
+<ul class="cards" id="cards">
+    <li id="card_0">
+        <img src="https://locirecords.com/wp-content/uploads/2021/01/Front-1024x1024.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_1">
+        <img src="http://locirecords.com/wp-content/uploads/2020/12/A-Thousand-Clouds-Front-Cover-1024x1024.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_2">
+        <img src="http://locirecords.com/wp-content/uploads/2020/10/Odd-World-EP-SMALL-1024x1024.png" width="1200" height="1200" />
+    </li>
+    <li id="card_3">
+        <img src="https://locirecords.com/wp-content/uploads/2020/10/Forest-Blue-Pre-LR-1024x1024.png" width="1200" height="1200" />
+    </li>
+    <li id="card_4">
+        <img src="http://locirecords.com/wp-content/uploads/2020/08/MOM-Remixes-1024x1024.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_5">
+        <img src="https://locirecords.com/wp-content/uploads/2020/12/ALONE-TOGETHER-remix-V71-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_6">
+        <img src="https://locirecords.com/wp-content/uploads/2020/09/Nature-Therapy-Pre-LR-550x550.png" width="1200" height="1200" />
+    </li>
+    <li id="card_7">
+        <img src="https://locirecords.com/wp-content/uploads/2020/10/Deep-Dive-Ambient-Edits-V8-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_8">
+        <img src="https://locirecords.com/wp-content/uploads/2020/08/Alpine-Koresma-x-Aroth-Artwork-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_9">
+        <img src="https://locirecords.com/wp-content/uploads/2020/07/Out-Of-the-Dark-Cover-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_11">
+        <img src="https://locirecords.com/wp-content/uploads/2020/07/2020-06-07-Marley-Carroll-Single-Blue-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_12">
+        <img src="https://locirecords.com/wp-content/uploads/2020/07/Deep-Dive-EP-Cover-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_13">
+        <img src="https://locirecords.com/wp-content/uploads/2020/07/Blackrose-Cover-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_14">
+        <img src="https://locirecords.com/wp-content/uploads/2020/06/FW-Imagine-Gold-Remixes2-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_15">
+        <img src="https://locirecords.com/wp-content/uploads/2020/04/We-Are-COVER-MAIN-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_16">
+        <img src="https://locirecords.com/wp-content/uploads/2020/06/Bath-House-Flat-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_17">
+        <img src="https://locirecords.com/wp-content/uploads/2020/03/Pronoia-JPG-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_18">
+        <img src="https://locirecords.com/wp-content/uploads/2020/03/Lapa9Theory-Cracking-Stores-no-Loci-logo-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_19">
+        <img src="https://locirecords.com/wp-content/uploads/2020/02/EMANCIPATOR_MOM_AlbumCover-2000px-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_20">
+        <img src="https://locirecords.com/wp-content/uploads/2020/01/MURGE-ep-cvr-3000x3000-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_21">
+        <img src="https://locirecords.com/wp-content/uploads/2020/01/Emancipator_Laybrinth-ART-01-4000x4000-at-300dpi-550x550.jpg" width="1200" height="1200" />
+    </li>
+    <li id="card_22">
+        <img src="https://locirecords.com/wp-content/uploads/2020/01/cover-550x550.jpg" width="1200" height="1200" />
+    </li>
+</ul>
+
+<div class="warning">⚠️ Your browser does not support CSS Scroll-Linked Animations, so this demo won't work. If you're feeling adventurous use Chrome 89 with “Experimental Web Platform Features” enabled. Alternatively you can check out <a href="https://codepen.io/bramus/pen/PobZbBV" target="_top">a JS-based ScrollTimeline version <em>(with polyfills)</em></a> or <a href="https://twitter.com/bramus/status/1357391991114502144" target="_top" rel="noopener noreferrer">a recording of this demo</a></div>
\ No newline at end of file
diff --git a/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/src/script.js b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/src/script.js
new file mode 100644
index 0000000..e4500e4
--- /dev/null
+++ b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/src/script.js
@@ -0,0 +1,39 @@
+// @note: This is a little helper to quickly generate a Scroll Timeline for each li, as selector() requires an id until https://github.com/w3c/csswg-drafts/issues/5884 is resolved
+// It only generates CSS, so this demo is still pure CSS ;)
+const generateCSS = () => {
+  let css = '';
+  document.querySelectorAll('li').forEach((li, i) => {
+    const id = li.getAttribute('id');
+
+    css = `
+      ${css}
+
+      @scroll-timeline scroll-in-cards-${id} {
+        source: selector(#cards);
+        orientation: inline;
+        start: selector(#${id}) end 0;
+        end: selector(#${id}) start 0;
+        time-range: 1s;
+      }
+
+      /* Adjust the li on scroll (z-index) */
+      #${id} {
+        animation-timeline: scroll-in-cards-${id};
+      }   
+
+      /* Adjust the album cover on scroll (perspective) */
+      #${id} > img {
+        animation-timeline: scroll-in-cards-${id};
+      }   
+    `;
+  });
+  return css;
+}
+
+const injectCSS = (css) => {
+  const style = document.createElement('style');
+  style.innerHTML = css;
+  document.head.appendChild(style);
+}
+
+injectCSS(generateCSS());
\ No newline at end of file
diff --git a/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/src/style.css b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/src/style.css
new file mode 100644
index 0000000..0d28044
--- /dev/null
+++ b/pure-css-coverflow-with-css-scrolltimeline-scroll-snapping/src/style.css
@@ -0,0 +1,219 @@
+/*
+  🐛 Bug #1
+
+     I expected that the initial rendering should show card_0 at
+     50% animation progress, as it's positioned halfway the scrollport.
+     It — and its siblings — start at 0% though, no matter their position.
+
+     When scrolling horizontally you see the first few items "catch up"
+     with their animation state. By hitting item 8 the animation renders
+     as expected: the item shown in the middle is animated at 50%.
+
+     You can see the same "wrong" behavior when getting to the end: the
+     last few items tend to run their animation short. By the time card_30
+     is in the center it's animation progress is 100%, whereas I expected
+     it to be at 50%.
+
+ ✅ Bug #2
+
+     When enabling scroll-snapping on .cards, the whole animation
+     freaks out …
+
+     👉 Fixed by animating the elements inside the li's, not the li's
+        themselves.
+
+  🐛 Bug #3
+
+     The z-indexes aren't animated perfectly … from the right you'll see
+     that the cover will appear over the preceding one for a little while.
+
+     Above that it can — or cannot — be OK after a refresh.
+*/
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+:root {
+  --cover-size: 15rem;
+}
+
+body {
+  background: #111;
+  min-height: 100vh;
+  font-family: sans-serif;
+
+  display: flex;
+  place-items: center;
+}
+
+.cards {
+  list-style: none;
+  overflow: scroll;
+  width: 100%;
+  white-space: nowrap;
+
+  scroll-snap-type: x mandatory;
+  outline: 1px solid #333;
+  background: rgba(0 0 0 / 0.5);
+}
+
+.cards li {
+  display: inline-block;
+  width: var(--cover-size);
+  height: var(--cover-size);
+  scroll-snap-align: center;
+}
+
+.cards li img {
+  dislay: block;
+  width: var(--cover-size);
+  height: var(--cover-size);
+}
+
+.cards {
+  max-width: calc(var(--cover-size) * 6);
+  margin: 0 auto;
+  padding: calc(var(--cover-size) / 2) calc(50% - (var(--cover-size) / 2));
+}
+
+/* Show warning for older browser */
+.warning {
+  position: fixed;
+  bottom: 1em;
+  right: 1em;
+  left: 1em;
+  padding: 1em;
+  border: 1px solid black;
+  z-index: 9999;
+  text-align: center;
+  color: black;
+  background: rgba(255 255 225 / 0.9);
+}
+
+.warning a {
+  color: blue;
+}
+
+@supports (animation-timeline: works) {
+  
+  /* Hide Warning */
+  .warning {
+    display: none;
+  }
+  
+  .cards {
+    perspective: 40em;
+  }
+  
+  /* Our animations */
+  @keyframes adjust-z-index {
+    0% {
+      z-index: 1;
+    }
+    35% {
+      z-index: 100;
+    }
+    50% {
+      z-index: 10000;
+    }
+    65% {
+      z-index: 100;
+    }
+    100% {
+      z-index: 1;
+    }
+  }
+
+  @keyframes rotate-cover {
+    0% {
+      transform: translateX(-100%) rotateY(-45deg);
+    }
+    35% {
+      transform: translateX(0) rotateY(-45deg);
+    }
+    50% {
+      transform: rotateY(0deg) translateZ(1em) scale(1.5);
+    }
+    65% {
+      transform: translateX(0) rotateY(45deg);
+    }
+    100% {
+      transform: translateX(100%) rotateY(45deg);
+    }
+  }
+  
+  /* 👀 Looking for the @scroll-timeline? You won't find those here but in
+        the JS pane. Using JavaScript we generate the timeliens and attach
+        them. We do this because we need to generate a Scroll Timeline for 
+        each li, as selector() requires an id. This is quite cumbersome so
+        we resort to JS for now.
+  
+        Relevant Bug: https://github.com/w3c/csswg-drafts/issues/5884
+        
+        No worries: the JS only generates CSS, so this demo is still pure
+        CSS.
+  */
+
+  /* 🪝 Attach animations. Note that we attach a faux animation-timeline
+        to prevent our animations from starting on load.
+  
+        We also apply the first part of our animation to the elements.
+        This way we prevent a FOUC.
+  */
+  .cards li {
+    animation: 1s linear adjust-z-index both;
+    animation-timeline: faux-animation-timeline;
+    /* Prevent FOUC */
+    position: relative;
+    z-index: 1;
+
+	will-change: z-index;
+  }
+
+  .cards li > img {
+    animation: 1s linear rotate-cover both;
+    animation-timeline: faux-animation-timeline;
+    /* Prevent FOUC */
+    transform: translateX(-150%) rotateY(-45deg);
+
+	will-change: transform;
+  }
+}
+
+#debug {
+  position: absolute;
+  top: 1em;
+  left: 1em;
+}
+#debug::after {
+  content: " Show Debug";
+  margin-left: 1.5em;
+  color: white;
+  white-space: nowrap;
+}
+
+#debug:checked + .cards {
+  border: 1px solid lime;
+}
+
+#debug:checked + .cards li {
+  text-align: center;
+  color: white;
+  border: 1px solid blue;
+}
+
+#debug:checked + .cards li::before {
+  content: attr(id);
+  display: block;
+  position: absolute;
+  inset: 0;
+  line-height: var(--cover-size);
+  opacity: 0.5;
+}
+
+#debug:checked + .cards li img {
+  opacity: 0.5;
+}
\ No newline at end of file
diff --git a/pure-css-cyberpunk-2077-buttons/README.markdown b/pure-css-cyberpunk-2077-buttons/README.markdown
new file mode 100644
index 0000000..75ef977
--- /dev/null
+++ b/pure-css-cyberpunk-2077-buttons/README.markdown
@@ -0,0 +1,5 @@
+# Pure CSS Cyberpunk 2077 Buttons 😎
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jh3y/pen/PoGbxLp](https://codepen.io/jh3y/pen/PoGbxLp).
+
+
diff --git a/pure-css-cyberpunk-2077-buttons/dist/index.html b/pure-css-cyberpunk-2077-buttons/dist/index.html
new file mode 100644
index 0000000..606ed72
--- /dev/null
+++ b/pure-css-cyberpunk-2077-buttons/dist/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Pure CSS Cyberpunk 2077 Buttons 😎</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<button class="cybr-btn">
+  Cyber<span aria-hidden>_</span>
+  <span aria-hidden class="cybr-btn__glitch">Cyber_</span>
+  <span aria-hidden class="cybr-btn__tag">R25</span>
+</button>
+<button class="cybr-btn">
+  Buttons<span aria-hidden>_</span>
+  <span aria-hidden class="cybr-btn__glitch">Buttons_</span>
+  <span aria-hidden class="cybr-btn__tag">R25</span>
+</button>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/pure-css-cyberpunk-2077-buttons/dist/script.js b/pure-css-cyberpunk-2077-buttons/dist/script.js
new file mode 100644
index 0000000..03576ed
--- /dev/null
+++ b/pure-css-cyberpunk-2077-buttons/dist/script.js
@@ -0,0 +1 @@
+// 404
\ No newline at end of file
diff --git a/pure-css-cyberpunk-2077-buttons/dist/style.css b/pure-css-cyberpunk-2077-buttons/dist/style.css
new file mode 100644
index 0000000..1b3f792
--- /dev/null
+++ b/pure-css-cyberpunk-2077-buttons/dist/style.css
@@ -0,0 +1,290 @@
+@font-face {
+  font-family: Cyber;
+  src: url("https://assets.codepen.io/605876/Blender-Pro-Bold.otf");
+  font-display: swap;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 100vh;
+  font-family: 'Cyber', sans-serif;
+  background: linear-gradient(90deg, #f5ed00 70%, #e6de00 70%), #fff700;
+}
+
+body .cybr-btn + .cybr-btn {
+  margin-top: 2rem;
+}
+
+.cybr-btn {
+  --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 1%));
+  --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%);
+  --primary-hue: 0;
+  --primary-lightness: 50;
+  --color: hsl(0, 0%, 100%);
+  --font-size: 26px;
+  --shadow-primary-hue: 180;
+  --label-size: 9px;
+  --shadow-secondary-hue: 60;
+  --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
+  --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);
+  --border: 4px;
+  --shimmy-distance: 5;
+  --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
+  --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
+  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
+  --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
+  --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
+  --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
+  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
+  font-family: 'Cyber', sans-serif;
+  color: var(--color);
+  cursor: pointer;
+  background: transparent;
+  text-transform: uppercase;
+  font-size: var(--font-size);
+  outline: transparent;
+  letter-spacing: 2px;
+  position: relative;
+  font-weight: 700;
+  border: 0;
+  min-width: 300px;
+  height: 75px;
+  line-height: 75px;
+  transition: background 0.2s;
+}
+
+.cybr-btn:hover {
+  --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.8%));
+}
+.cybr-btn:active {
+  --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.6%));
+}
+
+.cybr-btn:after,
+.cybr-btn:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-clip-path: var(--clip);
+          clip-path: var(--clip);
+  z-index: -1;
+}
+
+.cybr-btn:before {
+  background: var(--shadow-primary);
+  transform: translate(var(--border), 0);
+}
+
+.cybr-btn:after {
+  background: var(--primary);
+}
+
+.cybr-btn__tag {
+  position: absolute;
+  padding: 1px 4px;
+  letter-spacing: 1px;
+  line-height: 1;
+  bottom: -5%;
+  right: 5%;
+  font-weight: normal;
+  color: hsl(0, 0%, 0%);
+  font-size: var(--label-size);
+}
+
+.cybr-btn__glitch {
+  position: absolute;
+  top: calc(var(--border) * -1);
+  left: calc(var(--border) * -1);
+  right: calc(var(--border) * -1);
+  bottom: calc(var(--border) * -1);
+  background: var(--shadow-primary);
+  text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
+  -webkit-clip-path: var(--clip);
+          clip-path: var(--clip);
+  -webkit-animation: glitch 2s infinite;
+          animation: glitch 2s infinite;
+  display: none;
+}
+
+.cybr-btn:hover .cybr-btn__glitch {
+  display: block;
+}
+
+.cybr-btn__glitch:before {
+  content: '';
+  position: absolute;
+  top: calc(var(--border) * 1);
+  right: calc(var(--border) * 1);
+  bottom: calc(var(--border) * 1);
+  left: calc(var(--border) * 1);
+  -webkit-clip-path: var(--clip);
+          clip-path: var(--clip);
+  background: var(--primary);
+  z-index: -1;
+}
+
+@-webkit-keyframes glitch {
+  0% {
+    -webkit-clip-path: var(--clip-one);
+            clip-path: var(--clip-one);
+  }
+  2%, 8% {
+    -webkit-clip-path: var(--clip-two);
+            clip-path: var(--clip-two);
+    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
+  }
+  6% {
+    -webkit-clip-path: var(--clip-two);
+            clip-path: var(--clip-two);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  9% {
+    -webkit-clip-path: var(--clip-two);
+            clip-path: var(--clip-two);
+    transform: translate(0, 0);
+  }
+  10% {
+    -webkit-clip-path: var(--clip-three);
+            clip-path: var(--clip-three);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  13% {
+    -webkit-clip-path: var(--clip-three);
+            clip-path: var(--clip-three);
+    transform: translate(0, 0);
+  }
+  14%, 21% {
+    -webkit-clip-path: var(--clip-four);
+            clip-path: var(--clip-four);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  25% {
+    -webkit-clip-path: var(--clip-five);
+            clip-path: var(--clip-five);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  30% {
+    -webkit-clip-path: var(--clip-five);
+            clip-path: var(--clip-five);
+    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
+  }
+  35%, 45% {
+    -webkit-clip-path: var(--clip-six);
+            clip-path: var(--clip-six);
+    transform: translate(calc(var(--shimmy-distance) * -1%));
+  }
+  40% {
+    -webkit-clip-path: var(--clip-six);
+            clip-path: var(--clip-six);
+    transform: translate(calc(var(--shimmy-distance) * 1%));
+  }
+  50% {
+    -webkit-clip-path: var(--clip-six);
+            clip-path: var(--clip-six);
+    transform: translate(0, 0);
+  }
+  55% {
+    -webkit-clip-path: var(--clip-seven);
+            clip-path: var(--clip-seven);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  60% {
+    -webkit-clip-path: var(--clip-seven);
+            clip-path: var(--clip-seven);
+    transform: translate(0, 0);
+  }
+  31%, 61%, 100% {
+    -webkit-clip-path: var(--clip-four);
+            clip-path: var(--clip-four);
+  }
+}
+
+@keyframes glitch {
+  0% {
+    -webkit-clip-path: var(--clip-one);
+            clip-path: var(--clip-one);
+  }
+  2%, 8% {
+    -webkit-clip-path: var(--clip-two);
+            clip-path: var(--clip-two);
+    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
+  }
+  6% {
+    -webkit-clip-path: var(--clip-two);
+            clip-path: var(--clip-two);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  9% {
+    -webkit-clip-path: var(--clip-two);
+            clip-path: var(--clip-two);
+    transform: translate(0, 0);
+  }
+  10% {
+    -webkit-clip-path: var(--clip-three);
+            clip-path: var(--clip-three);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  13% {
+    -webkit-clip-path: var(--clip-three);
+            clip-path: var(--clip-three);
+    transform: translate(0, 0);
+  }
+  14%, 21% {
+    -webkit-clip-path: var(--clip-four);
+            clip-path: var(--clip-four);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  25% {
+    -webkit-clip-path: var(--clip-five);
+            clip-path: var(--clip-five);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  30% {
+    -webkit-clip-path: var(--clip-five);
+            clip-path: var(--clip-five);
+    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
+  }
+  35%, 45% {
+    -webkit-clip-path: var(--clip-six);
+            clip-path: var(--clip-six);
+    transform: translate(calc(var(--shimmy-distance) * -1%));
+  }
+  40% {
+    -webkit-clip-path: var(--clip-six);
+            clip-path: var(--clip-six);
+    transform: translate(calc(var(--shimmy-distance) * 1%));
+  }
+  50% {
+    -webkit-clip-path: var(--clip-six);
+            clip-path: var(--clip-six);
+    transform: translate(0, 0);
+  }
+  55% {
+    -webkit-clip-path: var(--clip-seven);
+            clip-path: var(--clip-seven);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  60% {
+    -webkit-clip-path: var(--clip-seven);
+            clip-path: var(--clip-seven);
+    transform: translate(0, 0);
+  }
+  31%, 61%, 100% {
+    -webkit-clip-path: var(--clip-four);
+            clip-path: var(--clip-four);
+  }
+}
+
+.cybr-btn:nth-of-type(2) {
+  --primary-hue: 260;
+}
\ No newline at end of file
diff --git a/pure-css-cyberpunk-2077-buttons/license.txt b/pure-css-cyberpunk-2077-buttons/license.txt
new file mode 100644
index 0000000..a9ae890
--- /dev/null
+++ b/pure-css-cyberpunk-2077-buttons/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Jhey (https://codepen.io/jh3y/pen/PoGbxLp)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/pure-css-cyberpunk-2077-buttons/src/index.html b/pure-css-cyberpunk-2077-buttons/src/index.html
new file mode 100644
index 0000000..8657d24
--- /dev/null
+++ b/pure-css-cyberpunk-2077-buttons/src/index.html
@@ -0,0 +1,10 @@
+<button class="cybr-btn">
+  Cyber<span aria-hidden>_</span>
+  <span aria-hidden class="cybr-btn__glitch">Cyber_</span>
+  <span aria-hidden class="cybr-btn__tag">R25</span>
+</button>
+<button class="cybr-btn">
+  Buttons<span aria-hidden>_</span>
+  <span aria-hidden class="cybr-btn__glitch">Buttons_</span>
+  <span aria-hidden class="cybr-btn__tag">R25</span>
+</button>
\ No newline at end of file
diff --git a/pure-css-cyberpunk-2077-buttons/src/script.babel b/pure-css-cyberpunk-2077-buttons/src/script.babel
new file mode 100644
index 0000000..03576ed
--- /dev/null
+++ b/pure-css-cyberpunk-2077-buttons/src/script.babel
@@ -0,0 +1 @@
+// 404
\ No newline at end of file
diff --git a/pure-css-cyberpunk-2077-buttons/src/style.css b/pure-css-cyberpunk-2077-buttons/src/style.css
new file mode 100644
index 0000000..a9067fc
--- /dev/null
+++ b/pure-css-cyberpunk-2077-buttons/src/style.css
@@ -0,0 +1,195 @@
+@font-face {
+  font-family: Cyber;
+  src: url("https://assets.codepen.io/605876/Blender-Pro-Bold.otf");
+  font-display: swap;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 100vh;
+  font-family: 'Cyber', sans-serif;
+  background: linear-gradient(90deg, #f5ed00 70%, #e6de00 70%), #fff700;
+}
+
+body .cybr-btn + .cybr-btn {
+  margin-top: 2rem;
+}
+
+.cybr-btn {
+  --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 1%));
+  --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%);
+  --primary-hue: 0;
+  --primary-lightness: 50;
+  --color: hsl(0, 0%, 100%);
+  --font-size: 26px;
+  --shadow-primary-hue: 180;
+  --label-size: 9px;
+  --shadow-secondary-hue: 60;
+  --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
+  --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);
+  --border: 4px;
+  --shimmy-distance: 5;
+  --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
+  --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
+  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
+  --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
+  --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
+  --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
+  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
+  font-family: 'Cyber', sans-serif;
+  color: var(--color);
+  cursor: pointer;
+  background: transparent;
+  text-transform: uppercase;
+  font-size: var(--font-size);
+  outline: transparent;
+  letter-spacing: 2px;
+  position: relative;
+  font-weight: 700;
+  border: 0;
+  min-width: 300px;
+  height: 75px;
+  line-height: 75px;
+  transition: background 0.2s;
+}
+
+.cybr-btn:hover {
+  --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.8%));
+}
+.cybr-btn:active {
+  --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.6%));
+}
+
+.cybr-btn:after,
+.cybr-btn:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  clip-path: var(--clip);
+  z-index: -1;
+}
+
+.cybr-btn:before {
+  background: var(--shadow-primary);
+  transform: translate(var(--border), 0);
+}
+
+.cybr-btn:after {
+  background: var(--primary);
+}
+
+.cybr-btn__tag {
+  position: absolute;
+  padding: 1px 4px;
+  letter-spacing: 1px;
+  line-height: 1;
+  bottom: -5%;
+  right: 5%;
+  font-weight: normal;
+  color: hsl(0, 0%, 0%);
+  font-size: var(--label-size);
+}
+
+.cybr-btn__glitch {
+  position: absolute;
+  top: calc(var(--border) * -1);
+  left: calc(var(--border) * -1);
+  right: calc(var(--border) * -1);
+  bottom: calc(var(--border) * -1);
+  background: var(--shadow-primary);
+  text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
+  clip-path: var(--clip);
+  animation: glitch 2s infinite;
+  display: none;
+}
+
+.cybr-btn:hover .cybr-btn__glitch {
+  display: block;
+}
+
+.cybr-btn__glitch:before {
+  content: '';
+  position: absolute;
+  top: calc(var(--border) * 1);
+  right: calc(var(--border) * 1);
+  bottom: calc(var(--border) * 1);
+  left: calc(var(--border) * 1);
+  clip-path: var(--clip);
+  background: var(--primary);
+  z-index: -1;
+}
+
+@keyframes glitch {
+  0% {
+    clip-path: var(--clip-one);
+  }
+  2%, 8% {
+    clip-path: var(--clip-two);
+    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
+  }
+  6% {
+    clip-path: var(--clip-two);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  9% {
+    clip-path: var(--clip-two);
+    transform: translate(0, 0);
+  }
+  10% {
+    clip-path: var(--clip-three);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  13% {
+    clip-path: var(--clip-three);
+    transform: translate(0, 0);
+  }
+  14%, 21% {
+    clip-path: var(--clip-four);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  25% {
+    clip-path: var(--clip-five);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  30% {
+    clip-path: var(--clip-five);
+    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
+  }
+  35%, 45% {
+    clip-path: var(--clip-six);
+    transform: translate(calc(var(--shimmy-distance) * -1%));
+  }
+  40% {
+    clip-path: var(--clip-six);
+    transform: translate(calc(var(--shimmy-distance) * 1%));
+  }
+  50% {
+    clip-path: var(--clip-six);
+    transform: translate(0, 0);
+  }
+  55% {
+    clip-path: var(--clip-seven);
+    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
+  }
+  60% {
+    clip-path: var(--clip-seven);
+    transform: translate(0, 0);
+  }
+  31%, 61%, 100% {
+    clip-path: var(--clip-four);
+  }
+}
+
+.cybr-btn:nth-of-type(2) {
+  --primary-hue: 260;
+}
\ No newline at end of file
diff --git a/pure-css-eye/README.markdown b/pure-css-eye/README.markdown
new file mode 100644
index 0000000..74785a5
--- /dev/null
+++ b/pure-css-eye/README.markdown
@@ -0,0 +1,5 @@
+# Pure CSS "Eye"
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/miocene/pen/rNOVWor](https://codepen.io/miocene/pen/rNOVWor).
+
+
diff --git a/pure-css-eye/dist/index.html b/pure-css-eye/dist/index.html
new file mode 100644
index 0000000..b226982
--- /dev/null
+++ b/pure-css-eye/dist/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Pure CSS &quot;Eye&quot;</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="eye"></div>
+
+<div class="circle-1"></div>
+<div class="circle-2"></div>
+<div class="circle-3"></div>
+<div class="circle-4"></div>
+<div class="circle-5"></div>
+<div class="circle-6"></div>
+<div class="circle-7"></div>
+<div class="circle-8"></div>
+<div class="circle-9"></div>
+<div class="circle-10"></div>
+<div class="circle-11"></div>
+<div class="circle-12"></div>
+<div class="circle-13"></div>
+<div class="circle-14"></div>
+
+<div class="glitch"></div>
+
+<div class="fragment-1"></div>
+<div class="fragment-2"></div>
+<div class="fragment-3"></div>
+
+
+<svg width="190" height="190" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<defs>
+		<clipPath id='bagel1'>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M95 190C147.467 190 190 147.467 190 95C190 42.533 147.467 0 95 0C42.533 0 0 42.533 0 95C0 147.467 42.533 190 95 190ZM95 120C108.807 120 120 108.807 120 95C120 81.1929 108.807 70 95 70C81.1929 70 70 81.1929 70 95C70 108.807 81.1929 120 95 120Z" />
+		</clipPath>
+		<clipPath id='bagel2'>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M71 142C110.212 142 142 110.212 142 71C142 31.7878 110.212 0 71 0C31.7878 0 0 31.7878 0 71C0 110.212 31.7878 142 71 142ZM71 139C108.555 139 139 108.555 139 71C139 33.4446 108.555 3 71 3C33.4446 3 3 33.4446 3 71C3 108.555 33.4446 139 71 139Z" />
+		</clipPath>
+		<clipPath id='bagel3'>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M60 120C93.1372 120 120 93.1372 120 60C120 26.8628 93.1372 0 60 0C26.8628 0 0 26.8628 0 60C0 93.1372 26.8628 120 60 120ZM60 115C90.3757 115 115 90.3757 115 60C115 29.6243 90.3757 5 60 5C29.6243 5 5 29.6243 5 60C5 90.3757 29.6243 115 60 115Z" />
+		</clipPath>
+		<clipPath id='bagel4'>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M38 76C58.9868 76 76 58.9868 76 38C76 17.0132 58.9868 0 38 0C17.0132 0 0 17.0132 0 38C0 58.9868 17.0132 76 38 76ZM38 72C56.7777 72 72 56.7776 72 38C72 19.2224 56.7777 4 38 4C19.2223 4 4 19.2224 4 38C4 56.7776 19.2223 72 38 72Z" />
+		</clipPath>
+	</defs>
+</svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/pure-css-eye/dist/script.js b/pure-css-eye/dist/script.js
new file mode 100644
index 0000000..057cfc3
--- /dev/null
+++ b/pure-css-eye/dist/script.js
@@ -0,0 +1 @@
+// based on image by Gleb Kuznetsov https://dribbble.com/shots/10117266-Eye-visual
\ No newline at end of file
diff --git a/pure-css-eye/dist/style.css b/pure-css-eye/dist/style.css
new file mode 100644
index 0000000..eb1614d
--- /dev/null
+++ b/pure-css-eye/dist/style.css
@@ -0,0 +1,681 @@
+html, body {
+	padding: 0; margin: 0;
+}
+
+body {
+	position: relative;
+	width: 100vw;
+	min-width: 800px;
+	height: 100vh;
+	min-height: 600px;
+	background: linear-gradient(-45deg, #8691b3, #edeef3);
+}
+	body *, body *:before, body *:after {
+		content: '';
+		position: absolute;
+		top: 50%; left: 50%;
+	}
+
+
+.eye {
+	width: 332px; height: 332px;
+	transform: translate(-50%, -50%);
+	border-radius: 50%;
+	background: #EBEDF3;
+	filter: blur(5px);
+
+	animation: eyeAnimation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes eyeAnimation {
+	0%, 33%, 100% {
+		box-shadow: inset -8px -13px 20px -10px rgba(230, 230, 236, 0.04), 64px 55px 40px -40px #38406A, 20px 18px 30px -10px #38406A, inset -70px -50px 60px -30px #4b6398, inset -90px -90px 70px -90px #697398, inset -70px -50px 100px -40px #697398, inset 80px 50px 80px -50px #eeeef3, -25px -15px 50px -10px #F6F6FB, 14px -1px 50px -10px #7e7ea9, 1px 9px 50px -10px #7e7ea9, inset -90px 40px 60px -20px rgba(116, 66, 255, 0.1), inset -90px -120px 60px -20px rgba(116, 66, 255, 0.1);
+    transform: translate(-50%, -50%) scale(1.25);
+	}
+	65% {
+		box-shadow: inset -8px -13px 60px -10px rgba(230, 230, 236, 0.2), 44px 35px 20px -20px #687294, 11px 9px 9px -4px #6e799d, inset -100px -70px 40px -110px #6A789C, inset -90px -90px 70px -90px #697398, inset -70px -50px 100px -40px #697398, inset 80px 50px 80px -50px #eeeef3, -25px -15px 30px -10px #F6F6FB;
+		transform: translate(-50%, -50%) scale(1);
+	}
+}
+
+
+	.eye::after {
+		width: 160px; height: 160px;
+		border-radius: 50%;
+		box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
+
+		animation: pupilAnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
+							 pupilAnimationView 4s ease infinite;
+	}
+@keyframes pupilAnimationSize {
+	0%, 30%, 100% { transform: translate(-50%, -50%) scale(0.85); }
+	40%, 90% 			{ transform: translate(-50%, -50%) scale(0.5); }
+}
+@keyframes pupilAnimationView {
+	0%, 30%, 100% {
+		box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
+	}
+	60%, 66% {
+		box-shadow: inset -50px -20px 30px 0px rgba(231, 226, 245, 0), inset 10px 10px 70px -27px rgba(47, 44, 76, 0), 0px 0px 10px 7px hsla(256, 49%, 92%, 0);
+	}
+	90% {
+		box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
+	}
+}
+
+
+.circle-1 {
+	width: 475px; height: 475px;
+	border-radius: 50%;
+	border: 1px solid transparent;
+	border-right-color: rgba(223, 228, 255, 0.6);
+
+	animation: circle1AnimationOpacity 4s ease infinite,
+						 circle1AnimationMove 4s ease infinite;
+}
+@keyframes circle1AnimationMove {
+	00%, 100% 		{ transform: translate(-50%, -50%) rotate(49deg); }
+	07% 					{ transform: translate(-50%, -50%) rotate(38deg); }
+	12%, 19%, 68% { transform: translate(-50%, -50%) rotate(42deg); }
+	26%, 30% 			{ transform: translate(-50%, -50%) rotate(82deg); }
+	73% 					{ transform: translate(-50%, -50%) rotate(34deg); }
+	87%, 92% 			{ transform: translate(-50%, -50%) rotate(69deg); }
+	94% 					{ transform: translate(-50%, -50%) rotate(65deg); }
+}
+@keyframes circle1AnimationOpacity {
+	00%, 27%, 73%, 100% { opacity: 1; }
+	30%, 70% 						{ opacity: 0; }
+}
+
+
+.circle-2 {
+	width: 475px; height: 475px;
+	border-radius: 50%;
+	border: 1px solid transparent;
+	border-right-color: rgba(223, 228, 255, 0.6);
+
+	animation: circle2AnimationOpacity 4s ease infinite,
+						 circle2AnimationMove 4s ease infinite;
+}
+@keyframes circle2AnimationMove {
+	0%, 100% { transform: translate(-50%, -50%) rotate(229deg); }
+	9% 			 { transform: translate(-50%, -50%) rotate(220deg); }
+	14%, 21% { transform: translate(-50%, -50%) rotate(225deg); }
+	29%, 67% { transform: translate(-50%, -50%) rotate(262deg); }
+	82% 		 { transform: translate(-50%, -50%) rotate(241deg); }
+	90%, 94% { transform: translate(-50%, -50%) rotate(249deg); }
+	99% 		 { transform: translate(-50%, -50%) rotate(245deg); }
+}
+@keyframes circle2AnimationOpacity {
+	0%, 27%, 79%, 100% { opacity: 1; }
+	30%, 76% 					 { opacity: 0; }
+}
+
+
+.circle-3 {
+	left: calc(50% + 93px);
+	top: calc(50% - 189px);
+	width: 106px; height: 280px;
+	overflow: hidden;
+}
+	.circle-3::before {
+		left: -275%;
+		top: -4%;
+		width: 393px;
+		height: 393px;
+		border-radius: 50%;
+		border: 1px solid transparent;
+		border-right-color: rgba(223, 228, 255, 0.6);
+
+		animation: circle3Animation 4s ease infinite;
+	}
+@keyframes circle3Animation {
+	0%   { transform: rotate(-3deg); }
+	20%  { transform: rotate(-107deg); }
+	79%  { transform: rotate(-286deg); }
+	100% { transform: rotate(-364deg); }
+}
+
+
+.circle-4 {
+	width: 295px; height: 295px;
+	border-radius: 50%;
+	border: 1px solid transparent;
+	border-right-color: rgb(251, 251, 251);
+	border-left-color: rgba(251, 251, 251, 0.2);
+
+	animation: circle4AnimationMove 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 circle4AnimationOpacity 4s ease infinite;
+}
+@keyframes circle4AnimationMove {
+	0%, 100% { transform: translate(-50%, -50%) rotate(219deg) scale(1); }
+	6% 			 { transform: translate(-50%, -50%) rotate(221deg) scale(0.9); }
+	16% 		 { transform: translate(-50%, -50%) rotate(302deg) scale(0.9); }
+	22% 		 { transform: translate(-50%, -50%) rotate(307deg) scale(0.9); }
+	29% 		 { transform: translate(-50%, -50%) rotate(312deg) scale(0.93); }
+	33% 		 { transform: translate(-50%, -50%) rotate(310deg) scale(0.93); }
+	36% 		 { transform: translate(-50%, -50%) rotate(300deg) scale(0.7); }
+	39% 		 { transform: translate(-50%, -50%) rotate(220deg) scale(0.92); }
+	50%, 57% { transform: translate(-50%, -50%) rotate(248deg) scale(0.92); }
+	66% 		 { transform: translate(-50%, -50%) rotate(225deg) scale(0.92); }
+	73%, 81% { transform: translate(-50%, -50%) rotate(243deg) scale(0.92); }
+	93% 		 { transform: translate(-50%, -50%) rotate(215deg) scale(1); }
+}
+@keyframes circle4AnimationOpacity {
+	00%, 33%, 50%, 100% { opacity: 1; }
+	36%, 39% { opacity: 0; }
+}
+
+
+.circle-5 {
+	width: 100px; height: 100px;
+	transform: translate(-50%, -50%);
+	
+	animation: circle5AnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 circle5AnimationView 4s ease infinite;
+}
+	.circle-5::before {
+		width: 173px; height: 173px;
+		border-radius: 50%;
+		border: 1px solid rgb(251, 251, 251);
+		transform: translate(-50%, -50%);
+	}
+	.circle-5::after {
+		width: 177px; height: 177px;
+		border-radius: 50%;
+		border: 1px solid rgb(251, 251, 251);
+		transform: translate(-50%, -50%);
+	}
+@keyframes circle5AnimationSize {
+	0%, 38%, 82.82%, 100% { transform: translate(-50%, -50%) scale(1); }
+	45%, 75.44% 					{ transform: translate(-50%, -50%) scale(0.7); }
+}
+@keyframes circle5AnimationView {
+	0%, 5.7%, 7.4%, 9.8%, 11.5%, 14%, 15.6%, 18.9%, 21.3%, 23.8%, 25.4%, 28.7%, 35.3%, 42%, 77.9%, 82.7%, 83.6%, 85.2%, 86.1%, 91.8%, 93.5%, 97.6%, 100% { opacity: 1; }
+	2.5%, 6.6%, 8.2%, 10.7%, 14.8%, 18%, 20.5%, 22.1%, 24.6%, 27.9%, 36%, 88.6% { opacity: 0.5; }
+	47%, 77.8%, 82.8%, 83.5%, 85.3%, 86%, 90.2%, 92.7%, 96.8%, 99.2% { opacity: 0; }
+}
+
+
+.circle-6 {
+	top: 50%; left: 50%;
+	width: 190px; height: 190px;
+	background: repeating-conic-gradient(from 0deg, rgba(179, 221, 255, 0.4) 0deg 1deg, transparent 1deg 2deg);
+	clip-path: url(#bagel1);
+	border-radius: 50%;
+
+	animation: circle6Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes circle6Animation {
+	0% {
+		transform: translate(-50%, -50%) scale(1);
+	}
+	8%, 35% {
+		transform: translate(-50%, -50%) scale(0.93);
+		opacity: 1;
+	}
+	40%, 90% {
+		transform: translate(-50%, -50%) scale(0.2);
+		opacity: 0;
+	}
+	95%, 100% {
+		transform: translate(-50%, -50%) scale(1);
+		opacity: 1;
+	}
+}
+
+.circle-7 {
+	top: 50%; left: 50%;
+	width: 142px; height: 142px;
+	filter: blur(1px);
+
+	animation: circle6Animation 4s -0.1s cubic-bezier(1, 0, 1, 1) infinite;
+}
+	.circle-7::before {
+		top: 0; left: 0;
+		width: 100%; height: 100%;
+		background: repeating-conic-gradient(from 0deg, rgba(114, 87, 187, 0.6) 0deg 2deg, transparent 2deg 8deg);
+		clip-path: url(#bagel2);
+		border-radius: 50%;
+	}
+
+
+.circle-8 {
+	top: 50%; left: 50%;
+	width: 120px; height: 120px;
+	background: repeating-conic-gradient(from 0deg, rgba(236, 247, 255, 0.68) 0deg 1deg, transparent 1deg 2deg);
+	clip-path: url(#bagel3);
+	border-radius: 50%;
+
+	animation: circle6Animation 4s -0.13s cubic-bezier(1, 0, 1, 1) infinite;
+}
+
+
+.circle-9 {
+	top: 50%; left: 50%;
+	width: 76px; height: 76px;
+	background: repeating-conic-gradient(from 0deg, rgba(236, 247, 255, 0.68) 0deg 1deg, transparent 1deg 2deg);
+	clip-path: url(#bagel4);
+	border-radius: 50%;
+
+	animation: circle6Animation 4s -0.16s cubic-bezier(1, 0, 1, 1) infinite;
+}
+
+
+.circle-10 {
+	top: 50%; left: 50%;
+	width: 190px; height: 190px;
+	background: radial-gradient(rgba(230, 245, 255, 0.6), rgba(201, 243, 255, 0.5), rgba(74, 105, 160, 0.3), transparent 70%);
+	clip-path: url(#bagel1);
+	border-radius: 50%;
+
+	animation: circle10Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes circle10Animation {
+	0% {
+		transform: translate(-50%, -50%) scale(1);
+	}
+	4%, 30% {
+		transform: translate(-50%, -50%) scale(0.93);
+		opacity: 1;
+	}
+	35%, 93% {
+		transform: translate(-50%, -50%) scale(0);
+		opacity: 0;
+	}
+	98%, 100% {
+		transform: translate(-50%, -50%) scale(1);
+		opacity: 1;
+	}
+}
+
+
+.circle-11 {
+	top: 50%; left: 50%;
+	width: 190px; height: 190px;
+	background: repeating-conic-gradient(from 0deg, rgba(229, 243, 255, 0.1) 0deg 1deg, transparent 1deg 8deg, rgba(229, 243, 255, 0.3) 8deg 9deg, transparent 9deg 10deg, rgba(229, 243, 255, 0.1) 10deg 11deg, transparent 11deg 72deg);
+	clip-path: url(#bagel1);
+	border-radius: 50%;
+
+	animation: circle11Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes circle11Animation {
+	0%, 98%, 100% {
+		transform: translate(-50%, -50%) rotate(0deg);
+		opacity: 1;
+	}
+	15% {
+		transform: translate(-50%, -50%) rotate(45deg);
+	}
+	25% {
+		transform: translate(-50%, -50%) rotate(-10deg);
+	}
+	30% {
+		opacity: 1;
+	}
+	35% {
+		transform: translate(-50%, -50%) rotate(-20deg);
+		opacity: 0;
+	}
+	93% {
+		transform: translate(-50%, -50%) rotate(80deg);
+		opacity: 0;
+	}
+}
+
+
+.circle-12 {
+	top: 50%; left: 50%;
+	width: 190px; height: 190px;
+	background: repeating-conic-gradient(from 0deg, rgba(208, 233, 255, 0.2) 20deg 21deg, transparent 21deg 40deg, rgba(192, 223, 249, 0.25) 40deg 41deg, transparent 41deg 43deg, rgba(179, 220, 255, 0.15) 43deg 44deg, transparent 44deg 76deg);
+	clip-path: url(#bagel1);
+	border-radius: 50%;
+
+	animation: circle12Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes circle12Animation {
+	0%, 96%, 100% {
+		transform: translate(-50%, -50%) rotate(0deg);
+		opacity: 1;
+	}
+	10% {
+		transform: translate(-50%, -50%) rotate(45deg);
+	}
+	25% {
+		transform: translate(-50%, -50%) rotate(-45deg);
+	}
+	30% {
+		opacity: 1;
+	}
+	35% {
+		transform: translate(-50%, -50%) rotate(50deg);
+		opacity: 0;
+	}
+	93% {
+		transform: translate(-50%, -50%) rotate(-90deg);
+		opacity: 0;
+	}
+}
+
+
+.circle-13 {
+	width: 100px; height: 100px;
+	transform: translate(-50%, -50%);
+	animation: circle13AnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 circle13AnimationView 4s ease infinite;
+}
+	.circle-13::before {
+		width: 110px; height: 110px;
+		border-radius: 50%;
+		border: 1px solid rgb(251, 251, 251);
+		transform: translate(-50%, -50%);
+	}
+	.circle-13::after {
+		width: 120px; height: 120px;
+		border-radius: 50%;
+		border: 1px solid rgba(251, 251, 251, 0.5);
+		transform: translate(-50%, -50%);
+	}
+@keyframes circle13AnimationSize {
+	0%, 32%, 86%, 100% { transform: translate(-50%, -50%) scale(1); }
+	38%, 82% { transform: translate(-50%, -50%) scale(0.2); }
+}
+@keyframes circle13AnimationView {
+	/* подвигать */
+	0% { opacity: 1; }
+	2.5% { opacity: 0.5; }
+	5.7% { opacity: 1; }
+	6.6% { opacity: 0.5; }
+	7.4% { opacity: 1; }
+	8.2% { opacity: 0.5; }
+	9.8% { opacity: 1; }
+	10.7% { opacity: 0.5; }
+	11.5%, 14% { opacity: 1; }
+	14.8% { opacity: 0.5; }
+	15.6% { opacity: 1; }
+	18% { opacity: 0.5; }
+	18.9% { opacity: 1; }
+	20.5% { opacity: 0.5; }
+	21.3% { opacity: 1; }
+	22.1% { opacity: 0.5; }
+	23.8% { opacity: 1; }
+	24.6% { opacity: 0.5; }
+	25.4% { opacity: 1; }
+	27.9% { opacity: 0.5; }
+	28.7%, 32% { opacity: 1; }
+	38% { opacity: 0; }
+	82% { opacity: 0; }
+	86% { opacity: 1; }
+	88.6% { opacity: 0.5; }
+	90.2% { opacity: 0; }
+	91.8% { opacity: 1; }
+	92.7% { opacity: 0; }
+	93.5% { opacity: 1; }
+	96.8% { opacity: 0; }
+	97.6% { opacity: 1; }
+	99.2% { opacity: 0; }
+	100% { opacity: 1; }
+}
+
+.circle-14 {
+	width: 100px; height: 100px;
+	transform: translate(-50%, -50%);
+	animation: circle13AnimationSize 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite,
+						 circle14AnimationView 4s ease infinite;
+}
+	.circle-14::before {
+		width: 70px; height: 70px;
+		border-radius: 50%;
+		border: 1px solid rgba(251, 251, 251, 0.5);
+		transform: translate(-50%, -50%);
+	}
+	.circle-14::after {
+		width: 95px; height: 95px;
+		border-radius: 50%;
+		border: 1px solid rgba(251, 251, 251, 0.3);
+		transform: translate(-50%, -50%);
+	}
+
+@keyframes circle14AnimationView {
+	/* подвигать */
+	0% { opacity: 1; }
+	2.5% { opacity: 0.5; }
+	5.7% { opacity: 1; }
+	6.6% { opacity: 0.5; }
+	7.4% { opacity: 1; }
+	8.2% { opacity: 0.5; }
+	9.8% { opacity: 1; }
+	10.7% { opacity: 0.5; }
+	11.5%, 14% { opacity: 1; }
+	14.8% { opacity: 0.5; }
+	15.6% { opacity: 1; }
+	18% { opacity: 0.5; }
+	18.9% { opacity: 1; }
+	20.5% { opacity: 0.5; }
+	21.3% { opacity: 1; }
+	22.1% { opacity: 0.5; }
+	23.8% { opacity: 1; }
+	24.6% { opacity: 0.5; }
+	25.4% { opacity: 1; }
+	27.9% { opacity: 0.5; }
+	28.7%, 32% { opacity: 1; }
+	38% { opacity: 0; }
+	82% { opacity: 0; }
+	86% { opacity: 1; }
+	88.6% { opacity: 0.5; }
+	90.2% { opacity: 0; }
+	91.8% { opacity: 1; }
+	92.7% { opacity: 0; }
+	93.5% { opacity: 1; }
+	96.8% { opacity: 0; }
+	97.6% { opacity: 1; }
+	99.2% { opacity: 0; }
+	100% { opacity: 1; }
+}
+
+
+.glitch {
+	width: 2px; height: 2px;
+	box-shadow: -21px -75px #8AC7ED, -16px -78px #8AC7ED, -8px -78px #8AC7ED, -5px -77px #8AC7ED, -2px -79px #8AC7ED, 10px -79px #8AC7ED, 25px -73px #8AC7ED, 41px -71px #8AC7ED, 44px -68px #8AC7ED, -26px -72px #8AC7ED, -45px -62px #8AC7ED, -65px -57px #8AC7ED, 59px -49px #8AC7ED, 67px -52px #8AC7ED, 37px -69px #8AC7ED, 43px -62px #8AC7ED, 39px -62px #8AC7ED, 17px -71px #8AC7ED, 28px -67px #8AC7ED, 65px -32px #8AC7ED, 73px -24px #8AC7ED, 67px -25px #8AC7ED, 76px -14px #8AC7ED, 70px -18px #8AC7ED, 82px 21px #8AC7ED, 79px 20px #8AC7ED, 72px 15px #8AC7ED, 55px 45px #8AC7ED, 48px 51px #8AC7ED, 43px 58px #8AC7ED, 37px 57px #8AC7ED, 36px 63px #8AC7ED, 32px 76px #8AC7ED, 35px 70px #8AC7ED, 25px 71px #8AC7ED, 20px 75px #8AC7ED, 5px 70px #8AC7ED, 7px 75px #8AC7ED, -5px 79px #8AC7ED, 3px 78px #8AC7ED, -1px 77px #8AC7ED, -13px 78px #8AC7ED, -15px 82px #8AC7ED, -20px 76px #8AC7ED, -18px 78px #8AC7ED, -17px 75px #8AC7ED, -22px 72px #8AC7ED, -34px 72px #8AC7ED, -36px 69px #8AC7ED, -43px 74px #8AC7ED, -41px 72px #8AC7ED, -42px 69px #8AC7ED, -38px 66px #8AC7ED, -43px 63px #8AC7ED, -37px 61px #8AC7ED, -56px 66px #8AC7ED, -54px 61px #8AC7ED, -58px 54px #8AC7ED, -60px 41px #8AC7ED, -50px 56px #8AC7ED, -54px 57px #8AC7ED, -60px 52px #8AC7ED, -74px 35px #8AC7ED, -76px 18px #8AC7ED, -74px 25px #8AC7ED, -69px 23px #8AC7ED, -84px 13px #8AC7ED, -73px 3px #8AC7ED, -80px -1px #8AC7ED, -79px -4px #8AC7ED, -79px -7px #8AC7ED, -70px -11px #8AC7ED, -67px -23px #8AC7ED, -84px -13px #8AC7ED, -71px -42px #8AC7ED, -61px -49px #8AC7ED, -58px -43px #8AC7ED, -55px -50px #8AC7ED, -32px -72px #8AC7ED, -80px -30px #8AC7ED, -59px -20px #8AC7ED, -79px 12px #8AC7ED, -76px 1px #8AC7ED, 8px 57px #8AC7ED, 59px 36px #8AC7ED, 60px 46px #8AC7ED, 54px 59px #8AC7ED, 44px 52px #8AC7ED, -31px 20px #8AC7ED, -56px 2px #8AC7ED, 47px 35px #8AC7ED, 70px 6px #8AC7ED, 60px -2px #8AC7ED,
+							-21px -75px 0 1px rgba(255, 255, 255, 0.1), -16px -78px 0 1px rgba(255, 255, 255, 0.1), -8px -78px 0 1px rgba(255, 255, 255, 0.1), -5px -77px 0 1px rgba(255, 255, 255, 0.1), -2px -79px 0 1px rgba(255, 255, 255, 0.1), 10px -79px 0 1px rgba(255, 255, 255, 0.1), 25px -73px 0 1px rgba(255, 255, 255, 0.1), 41px -71px 0 1px rgba(255, 255, 255, 0.1), 44px -68px 0 1px rgba(255, 255, 255, 0.1), -26px -72px 0 1px rgba(255, 255, 255, 0.1), -45px -62px 0 1px rgba(255, 255, 255, 0.1), -65px -57px 0 1px rgba(255, 255, 255, 0.1), 59px -49px 0 1px rgba(255, 255, 255, 0.1), 67px -52px 0 1px rgba(255, 255, 255, 0.1), 37px -69px 0 1px rgba(255, 255, 255, 0.1), 43px -62px 0 1px rgba(255, 255, 255, 0.1), 39px -62px 0 1px rgba(255, 255, 255, 0.1), 17px -71px 0 1px rgba(255, 255, 255, 0.1), 28px -67px 0 1px rgba(255, 255, 255, 0.1), 65px -32px 0 1px rgba(255, 255, 255, 0.1), 73px -24px 0 1px rgba(255, 255, 255, 0.1), 67px -25px 0 1px rgba(255, 255, 255, 0.1), 76px -14px 0 1px rgba(255, 255, 255, 0.1), 70px -18px 0 1px rgba(255, 255, 255, 0.1), 82px 21px 0 1px rgba(255, 255, 255, 0.1), 79px 20px 0 1px rgba(255, 255, 255, 0.1), 72px 15px 0 1px rgba(255, 255, 255, 0.1), 55px 45px 0 1px rgba(255, 255, 255, 0.1), 48px 51px 0 1px rgba(255, 255, 255, 0.1), 43px 58px 0 1px rgba(255, 255, 255, 0.1), 37px 57px 0 1px rgba(255, 255, 255, 0.1), 36px 63px 0 1px rgba(255, 255, 255, 0.1), 32px 76px 0 1px rgba(255, 255, 255, 0.1), 35px 70px 0 1px rgba(255, 255, 255, 0.1), 25px 71px 0 1px rgba(255, 255, 255, 0.1), 20px 75px 0 1px rgba(255, 255, 255, 0.1), 5px 70px 0 1px rgba(255, 255, 255, 0.1), 7px 75px 0 1px rgba(255, 255, 255, 0.1), -5px 79px 0 1px rgba(255, 255, 255, 0.1), 3px 78px 0 1px rgba(255, 255, 255, 0.1), -1px 77px 0 1px rgba(255, 255, 255, 0.1), -13px 78px 0 1px rgba(255, 255, 255, 0.1), -15px 82px 0 1px rgba(255, 255, 255, 0.1), -20px 76px 0 1px rgba(255, 255, 255, 0.1), -18px 78px 0 1px rgba(255, 255, 255, 0.1), -17px 75px 0 1px rgba(255, 255, 255, 0.1), -22px 72px 0 1px rgba(255, 255, 255, 0.1), -34px 72px 0 1px rgba(255, 255, 255, 0.1), -36px 69px 0 1px rgba(255, 255, 255, 0.1), -43px 74px 0 1px rgba(255, 255, 255, 0.1), -41px 72px 0 1px rgba(255, 255, 255, 0.1), -42px 69px 0 1px rgba(255, 255, 255, 0.1), -38px 66px 0 1px rgba(255, 255, 255, 0.1), -43px 63px 0 1px rgba(255, 255, 255, 0.1), -37px 61px 0 1px rgba(255, 255, 255, 0.1), -56px 66px 0 1px rgba(255, 255, 255, 0.1), -54px 61px 0 1px rgba(255, 255, 255, 0.1), -58px 54px 0 1px rgba(255, 255, 255, 0.1), -60px 41px 0 1px rgba(255, 255, 255, 0.1), -50px 56px 0 1px rgba(255, 255, 255, 0.1), -54px 57px 0 1px rgba(255, 255, 255, 0.1), -60px 52px 0 1px rgba(255, 255, 255, 0.1), -74px 35px 0 1px rgba(255, 255, 255, 0.1), -76px 18px 0 1px rgba(255, 255, 255, 0.1), -74px 25px 0 1px rgba(255, 255, 255, 0.1), -69px 23px 0 1px rgba(255, 255, 255, 0.1), -84px 13px 0 1px rgba(255, 255, 255, 0.1), -73px 3px 0 1px rgba(255, 255, 255, 0.1), -80px -1px 0 1px rgba(255, 255, 255, 0.1), -79px -4px 0 1px rgba(255, 255, 255, 0.1), -79px -7px 0 1px rgba(255, 255, 255, 0.1), -70px -11px 0 1px rgba(255, 255, 255, 0.1), -67px -23px 0 1px rgba(255, 255, 255, 0.1), -84px -13px 0 1px rgba(255, 255, 255, 0.1), -71px -42px 0 1px rgba(255, 255, 255, 0.1), -61px -49px 0 1px rgba(255, 255, 255, 0.1), -58px -43px 0 1px rgba(255, 255, 255, 0.1), -55px -50px 0 1px rgba(255, 255, 255, 0.1), -32px -72px 0 1px rgba(255, 255, 255, 0.1), -80px -30px 0 1px rgba(255, 255, 255, 0.1), -59px -20px 0 1px rgba(255, 255, 255, 0.1), -79px 12px 0 1px rgba(255, 255, 255, 0.1), -76px 1px 0 1px rgba(255, 255, 255, 0.1), 8px 57px 0 1px rgba(255, 255, 255, 0.1), 59px 36px 0 1px rgba(255, 255, 255, 0.1), 60px 46px 0 1px rgba(255, 255, 255, 0.1), 54px 59px 0 1px rgba(255, 255, 255, 0.1), 44px 52px 0 1px rgba(255, 255, 255, 0.1), -31px 20px 0 1px rgba(255, 255, 255, 0.1), -56px 2px 0 1px rgba(255, 255, 255, 0.1), 47px 35px 0 1px rgba(255, 255, 255, 0.1), 70px 6px 0 1px rgba(255, 255, 255, 0.1), 60px -2px 0 1px rgba(255, 255, 255, 0.1);
+	filter: blur(1px);
+
+	animation: glitchAnimationOpacity 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 glitchAnimationMove 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 glitchAnimationBright 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes glitchAnimationOpacity {
+	0%, 30%, 96%, 100% { opacity: 1; }
+	35%, 93% 					 { opacity: 0; }
+}
+@keyframes glitchAnimationMove {
+	0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
+	35%, 65% { transform: translate(-50%, -50%) rotate(4320deg); }
+}
+@keyframes glitchAnimationBright {
+	0%, 100% { filter: blur(1px); }
+	35%, 65% { filter: blur(1px) brightness(1.8); }
+}
+
+
+.fragment-1::before {
+	width: 6px; height: 6px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+	
+	animation: fragment1BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment1BeforeAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(71px, -181px);
+		opacity: 1;
+	}
+	37% {
+		transform: rotate(15deg) translate(71px, -181px);
+		opacity: 1;
+	}
+	37.1%, 76.9% {
+		opacity: 0;
+	}
+	77% {
+		transform: rotate(-2deg) translate(71px, -181px);
+		opacity: 1;
+	}
+	90% {
+		transform: rotate(-9deg) translate(71px, -181px);
+	}
+}
+
+
+.fragment-1::after {
+	width: 6px; height: 6px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment1AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment1AfterAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(285px, 48px);
+		opacity: 1;
+	}
+	7% {
+		transform: rotate(5deg) translate(285px, 48px);
+	}
+	22% {
+		transform: rotate(-1deg) translate(285px, 48px);
+	}
+	40% {
+		transform: rotate(-3deg) translate(285px, 48px);
+		opacity: 1;
+	}
+	40.1%, 81.9% {
+		opacity: 0;
+	}
+	82% {
+		transform: rotate(-15deg) translate(285px, 48px);
+		opacity: 1;
+	}
+}
+
+
+.fragment-2::after {
+	width: 6px; height: 6px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment2AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment2AfterAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(-220px, 162px);
+		opacity: 1;
+	}
+	46% {
+		transform: rotate(-8deg) translate(-220px, 162px);
+		opacity: 1;
+	}
+	46.1%, 97.9% {
+		opacity: 0;
+	}
+	98% {
+		transform: rotate(2deg) translate(-220px, 162px);
+		opacity: 1;
+	}
+}
+
+
+.fragment-2::before {
+	width: 6px; height: 6px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment2BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment2BeforeAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(284px, 111px);
+		opacity: 1;
+	}
+	2% {
+		transform: rotate(2deg) translate(284px, 111px);
+	}
+	9% {
+		transform: rotate(-5deg) translate(284px, 111px);
+	}
+	15%, 22% {
+		transform: rotate(-3deg) translate(284px, 111px);
+	}
+	27% {
+		transform: rotate(-2deg) translate(284px, 111px);
+		opacity: 1;
+	}
+	38.9% {
+		transform: rotate(-9deg) translate(284px, 111px);
+	}
+	39%, 76.9% {
+		opacity: 0;
+	}
+	77% {
+		transform: rotate(-9deg) translate(284px, 111px);
+		opacity: 1;
+	}
+}
+
+
+.fragment-3::after {
+	width: 6px; height: 6px;
+	background: rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment3AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment3AfterAnimationMove {
+	0%, 4.9%, 65.1%, 100% {
+		opacity: 0;
+	}
+	5% {
+		transform: rotate(0deg) translate(183px, 198px);
+		opacity: 1;
+	}
+	16% {
+		transform: rotate(-9deg) translate(284px, 111px);
+		opacity: 1;
+	}
+	16.1%, 60.9% {
+		opacity: 0;
+	}
+	61% {
+		transform: rotate(5deg) translate(284px, 111px);
+		opacity: 1;
+	}
+	65% {
+		transform: rotate(10deg) translate(284px, 111px);
+		opacity: 1;
+	}
+}
+
+
+.fragment-3::before {
+	width: 6px; height: 6px;
+	background: rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment3BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment3BeforeAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(-253px, -126px);
+		opacity: 1;
+	}
+	22% {
+		transform: rotate(25deg) translate(-253px, -126px);
+		opacity: 1;
+	}
+	22.1%, 95.9% {
+		opacity: 0;
+	}
+	96% {
+		transform: rotate(-5deg) translate(-253px, -126px);
+		opacity: 1;
+	}
+}
\ No newline at end of file
diff --git a/pure-css-eye/license.txt b/pure-css-eye/license.txt
new file mode 100644
index 0000000..aca483e
--- /dev/null
+++ b/pure-css-eye/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Julia Miocene (https://codepen.io/miocene/pen/rNOVWor)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/pure-css-eye/src/index.html b/pure-css-eye/src/index.html
new file mode 100644
index 0000000..77df0af
--- /dev/null
+++ b/pure-css-eye/src/index.html
@@ -0,0 +1,40 @@
+<div class="eye"></div>
+
+<div class="circle-1"></div>
+<div class="circle-2"></div>
+<div class="circle-3"></div>
+<div class="circle-4"></div>
+<div class="circle-5"></div>
+<div class="circle-6"></div>
+<div class="circle-7"></div>
+<div class="circle-8"></div>
+<div class="circle-9"></div>
+<div class="circle-10"></div>
+<div class="circle-11"></div>
+<div class="circle-12"></div>
+<div class="circle-13"></div>
+<div class="circle-14"></div>
+
+<div class="glitch"></div>
+
+<div class="fragment-1"></div>
+<div class="fragment-2"></div>
+<div class="fragment-3"></div>
+
+
+<svg width="190" height="190" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<defs>
+		<clipPath id='bagel1'>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M95 190C147.467 190 190 147.467 190 95C190 42.533 147.467 0 95 0C42.533 0 0 42.533 0 95C0 147.467 42.533 190 95 190ZM95 120C108.807 120 120 108.807 120 95C120 81.1929 108.807 70 95 70C81.1929 70 70 81.1929 70 95C70 108.807 81.1929 120 95 120Z" />
+		</clipPath>
+		<clipPath id='bagel2'>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M71 142C110.212 142 142 110.212 142 71C142 31.7878 110.212 0 71 0C31.7878 0 0 31.7878 0 71C0 110.212 31.7878 142 71 142ZM71 139C108.555 139 139 108.555 139 71C139 33.4446 108.555 3 71 3C33.4446 3 3 33.4446 3 71C3 108.555 33.4446 139 71 139Z" />
+		</clipPath>
+		<clipPath id='bagel3'>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M60 120C93.1372 120 120 93.1372 120 60C120 26.8628 93.1372 0 60 0C26.8628 0 0 26.8628 0 60C0 93.1372 26.8628 120 60 120ZM60 115C90.3757 115 115 90.3757 115 60C115 29.6243 90.3757 5 60 5C29.6243 5 5 29.6243 5 60C5 90.3757 29.6243 115 60 115Z" />
+		</clipPath>
+		<clipPath id='bagel4'>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M38 76C58.9868 76 76 58.9868 76 38C76 17.0132 58.9868 0 38 0C17.0132 0 0 17.0132 0 38C0 58.9868 17.0132 76 38 76ZM38 72C56.7777 72 72 56.7776 72 38C72 19.2224 56.7777 4 38 4C19.2223 4 4 19.2224 4 38C4 56.7776 19.2223 72 38 72Z" />
+		</clipPath>
+	</defs>
+</svg>
\ No newline at end of file
diff --git a/pure-css-eye/src/script.js b/pure-css-eye/src/script.js
new file mode 100644
index 0000000..057cfc3
--- /dev/null
+++ b/pure-css-eye/src/script.js
@@ -0,0 +1 @@
+// based on image by Gleb Kuznetsov https://dribbble.com/shots/10117266-Eye-visual
\ No newline at end of file
diff --git a/pure-css-eye/src/style.css b/pure-css-eye/src/style.css
new file mode 100644
index 0000000..eb1614d
--- /dev/null
+++ b/pure-css-eye/src/style.css
@@ -0,0 +1,681 @@
+html, body {
+	padding: 0; margin: 0;
+}
+
+body {
+	position: relative;
+	width: 100vw;
+	min-width: 800px;
+	height: 100vh;
+	min-height: 600px;
+	background: linear-gradient(-45deg, #8691b3, #edeef3);
+}
+	body *, body *:before, body *:after {
+		content: '';
+		position: absolute;
+		top: 50%; left: 50%;
+	}
+
+
+.eye {
+	width: 332px; height: 332px;
+	transform: translate(-50%, -50%);
+	border-radius: 50%;
+	background: #EBEDF3;
+	filter: blur(5px);
+
+	animation: eyeAnimation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes eyeAnimation {
+	0%, 33%, 100% {
+		box-shadow: inset -8px -13px 20px -10px rgba(230, 230, 236, 0.04), 64px 55px 40px -40px #38406A, 20px 18px 30px -10px #38406A, inset -70px -50px 60px -30px #4b6398, inset -90px -90px 70px -90px #697398, inset -70px -50px 100px -40px #697398, inset 80px 50px 80px -50px #eeeef3, -25px -15px 50px -10px #F6F6FB, 14px -1px 50px -10px #7e7ea9, 1px 9px 50px -10px #7e7ea9, inset -90px 40px 60px -20px rgba(116, 66, 255, 0.1), inset -90px -120px 60px -20px rgba(116, 66, 255, 0.1);
+    transform: translate(-50%, -50%) scale(1.25);
+	}
+	65% {
+		box-shadow: inset -8px -13px 60px -10px rgba(230, 230, 236, 0.2), 44px 35px 20px -20px #687294, 11px 9px 9px -4px #6e799d, inset -100px -70px 40px -110px #6A789C, inset -90px -90px 70px -90px #697398, inset -70px -50px 100px -40px #697398, inset 80px 50px 80px -50px #eeeef3, -25px -15px 30px -10px #F6F6FB;
+		transform: translate(-50%, -50%) scale(1);
+	}
+}
+
+
+	.eye::after {
+		width: 160px; height: 160px;
+		border-radius: 50%;
+		box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
+
+		animation: pupilAnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
+							 pupilAnimationView 4s ease infinite;
+	}
+@keyframes pupilAnimationSize {
+	0%, 30%, 100% { transform: translate(-50%, -50%) scale(0.85); }
+	40%, 90% 			{ transform: translate(-50%, -50%) scale(0.5); }
+}
+@keyframes pupilAnimationView {
+	0%, 30%, 100% {
+		box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
+	}
+	60%, 66% {
+		box-shadow: inset -50px -20px 30px 0px rgba(231, 226, 245, 0), inset 10px 10px 70px -27px rgba(47, 44, 76, 0), 0px 0px 10px 7px hsla(256, 49%, 92%, 0);
+	}
+	90% {
+		box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
+	}
+}
+
+
+.circle-1 {
+	width: 475px; height: 475px;
+	border-radius: 50%;
+	border: 1px solid transparent;
+	border-right-color: rgba(223, 228, 255, 0.6);
+
+	animation: circle1AnimationOpacity 4s ease infinite,
+						 circle1AnimationMove 4s ease infinite;
+}
+@keyframes circle1AnimationMove {
+	00%, 100% 		{ transform: translate(-50%, -50%) rotate(49deg); }
+	07% 					{ transform: translate(-50%, -50%) rotate(38deg); }
+	12%, 19%, 68% { transform: translate(-50%, -50%) rotate(42deg); }
+	26%, 30% 			{ transform: translate(-50%, -50%) rotate(82deg); }
+	73% 					{ transform: translate(-50%, -50%) rotate(34deg); }
+	87%, 92% 			{ transform: translate(-50%, -50%) rotate(69deg); }
+	94% 					{ transform: translate(-50%, -50%) rotate(65deg); }
+}
+@keyframes circle1AnimationOpacity {
+	00%, 27%, 73%, 100% { opacity: 1; }
+	30%, 70% 						{ opacity: 0; }
+}
+
+
+.circle-2 {
+	width: 475px; height: 475px;
+	border-radius: 50%;
+	border: 1px solid transparent;
+	border-right-color: rgba(223, 228, 255, 0.6);
+
+	animation: circle2AnimationOpacity 4s ease infinite,
+						 circle2AnimationMove 4s ease infinite;
+}
+@keyframes circle2AnimationMove {
+	0%, 100% { transform: translate(-50%, -50%) rotate(229deg); }
+	9% 			 { transform: translate(-50%, -50%) rotate(220deg); }
+	14%, 21% { transform: translate(-50%, -50%) rotate(225deg); }
+	29%, 67% { transform: translate(-50%, -50%) rotate(262deg); }
+	82% 		 { transform: translate(-50%, -50%) rotate(241deg); }
+	90%, 94% { transform: translate(-50%, -50%) rotate(249deg); }
+	99% 		 { transform: translate(-50%, -50%) rotate(245deg); }
+}
+@keyframes circle2AnimationOpacity {
+	0%, 27%, 79%, 100% { opacity: 1; }
+	30%, 76% 					 { opacity: 0; }
+}
+
+
+.circle-3 {
+	left: calc(50% + 93px);
+	top: calc(50% - 189px);
+	width: 106px; height: 280px;
+	overflow: hidden;
+}
+	.circle-3::before {
+		left: -275%;
+		top: -4%;
+		width: 393px;
+		height: 393px;
+		border-radius: 50%;
+		border: 1px solid transparent;
+		border-right-color: rgba(223, 228, 255, 0.6);
+
+		animation: circle3Animation 4s ease infinite;
+	}
+@keyframes circle3Animation {
+	0%   { transform: rotate(-3deg); }
+	20%  { transform: rotate(-107deg); }
+	79%  { transform: rotate(-286deg); }
+	100% { transform: rotate(-364deg); }
+}
+
+
+.circle-4 {
+	width: 295px; height: 295px;
+	border-radius: 50%;
+	border: 1px solid transparent;
+	border-right-color: rgb(251, 251, 251);
+	border-left-color: rgba(251, 251, 251, 0.2);
+
+	animation: circle4AnimationMove 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 circle4AnimationOpacity 4s ease infinite;
+}
+@keyframes circle4AnimationMove {
+	0%, 100% { transform: translate(-50%, -50%) rotate(219deg) scale(1); }
+	6% 			 { transform: translate(-50%, -50%) rotate(221deg) scale(0.9); }
+	16% 		 { transform: translate(-50%, -50%) rotate(302deg) scale(0.9); }
+	22% 		 { transform: translate(-50%, -50%) rotate(307deg) scale(0.9); }
+	29% 		 { transform: translate(-50%, -50%) rotate(312deg) scale(0.93); }
+	33% 		 { transform: translate(-50%, -50%) rotate(310deg) scale(0.93); }
+	36% 		 { transform: translate(-50%, -50%) rotate(300deg) scale(0.7); }
+	39% 		 { transform: translate(-50%, -50%) rotate(220deg) scale(0.92); }
+	50%, 57% { transform: translate(-50%, -50%) rotate(248deg) scale(0.92); }
+	66% 		 { transform: translate(-50%, -50%) rotate(225deg) scale(0.92); }
+	73%, 81% { transform: translate(-50%, -50%) rotate(243deg) scale(0.92); }
+	93% 		 { transform: translate(-50%, -50%) rotate(215deg) scale(1); }
+}
+@keyframes circle4AnimationOpacity {
+	00%, 33%, 50%, 100% { opacity: 1; }
+	36%, 39% { opacity: 0; }
+}
+
+
+.circle-5 {
+	width: 100px; height: 100px;
+	transform: translate(-50%, -50%);
+	
+	animation: circle5AnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 circle5AnimationView 4s ease infinite;
+}
+	.circle-5::before {
+		width: 173px; height: 173px;
+		border-radius: 50%;
+		border: 1px solid rgb(251, 251, 251);
+		transform: translate(-50%, -50%);
+	}
+	.circle-5::after {
+		width: 177px; height: 177px;
+		border-radius: 50%;
+		border: 1px solid rgb(251, 251, 251);
+		transform: translate(-50%, -50%);
+	}
+@keyframes circle5AnimationSize {
+	0%, 38%, 82.82%, 100% { transform: translate(-50%, -50%) scale(1); }
+	45%, 75.44% 					{ transform: translate(-50%, -50%) scale(0.7); }
+}
+@keyframes circle5AnimationView {
+	0%, 5.7%, 7.4%, 9.8%, 11.5%, 14%, 15.6%, 18.9%, 21.3%, 23.8%, 25.4%, 28.7%, 35.3%, 42%, 77.9%, 82.7%, 83.6%, 85.2%, 86.1%, 91.8%, 93.5%, 97.6%, 100% { opacity: 1; }
+	2.5%, 6.6%, 8.2%, 10.7%, 14.8%, 18%, 20.5%, 22.1%, 24.6%, 27.9%, 36%, 88.6% { opacity: 0.5; }
+	47%, 77.8%, 82.8%, 83.5%, 85.3%, 86%, 90.2%, 92.7%, 96.8%, 99.2% { opacity: 0; }
+}
+
+
+.circle-6 {
+	top: 50%; left: 50%;
+	width: 190px; height: 190px;
+	background: repeating-conic-gradient(from 0deg, rgba(179, 221, 255, 0.4) 0deg 1deg, transparent 1deg 2deg);
+	clip-path: url(#bagel1);
+	border-radius: 50%;
+
+	animation: circle6Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes circle6Animation {
+	0% {
+		transform: translate(-50%, -50%) scale(1);
+	}
+	8%, 35% {
+		transform: translate(-50%, -50%) scale(0.93);
+		opacity: 1;
+	}
+	40%, 90% {
+		transform: translate(-50%, -50%) scale(0.2);
+		opacity: 0;
+	}
+	95%, 100% {
+		transform: translate(-50%, -50%) scale(1);
+		opacity: 1;
+	}
+}
+
+.circle-7 {
+	top: 50%; left: 50%;
+	width: 142px; height: 142px;
+	filter: blur(1px);
+
+	animation: circle6Animation 4s -0.1s cubic-bezier(1, 0, 1, 1) infinite;
+}
+	.circle-7::before {
+		top: 0; left: 0;
+		width: 100%; height: 100%;
+		background: repeating-conic-gradient(from 0deg, rgba(114, 87, 187, 0.6) 0deg 2deg, transparent 2deg 8deg);
+		clip-path: url(#bagel2);
+		border-radius: 50%;
+	}
+
+
+.circle-8 {
+	top: 50%; left: 50%;
+	width: 120px; height: 120px;
+	background: repeating-conic-gradient(from 0deg, rgba(236, 247, 255, 0.68) 0deg 1deg, transparent 1deg 2deg);
+	clip-path: url(#bagel3);
+	border-radius: 50%;
+
+	animation: circle6Animation 4s -0.13s cubic-bezier(1, 0, 1, 1) infinite;
+}
+
+
+.circle-9 {
+	top: 50%; left: 50%;
+	width: 76px; height: 76px;
+	background: repeating-conic-gradient(from 0deg, rgba(236, 247, 255, 0.68) 0deg 1deg, transparent 1deg 2deg);
+	clip-path: url(#bagel4);
+	border-radius: 50%;
+
+	animation: circle6Animation 4s -0.16s cubic-bezier(1, 0, 1, 1) infinite;
+}
+
+
+.circle-10 {
+	top: 50%; left: 50%;
+	width: 190px; height: 190px;
+	background: radial-gradient(rgba(230, 245, 255, 0.6), rgba(201, 243, 255, 0.5), rgba(74, 105, 160, 0.3), transparent 70%);
+	clip-path: url(#bagel1);
+	border-radius: 50%;
+
+	animation: circle10Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes circle10Animation {
+	0% {
+		transform: translate(-50%, -50%) scale(1);
+	}
+	4%, 30% {
+		transform: translate(-50%, -50%) scale(0.93);
+		opacity: 1;
+	}
+	35%, 93% {
+		transform: translate(-50%, -50%) scale(0);
+		opacity: 0;
+	}
+	98%, 100% {
+		transform: translate(-50%, -50%) scale(1);
+		opacity: 1;
+	}
+}
+
+
+.circle-11 {
+	top: 50%; left: 50%;
+	width: 190px; height: 190px;
+	background: repeating-conic-gradient(from 0deg, rgba(229, 243, 255, 0.1) 0deg 1deg, transparent 1deg 8deg, rgba(229, 243, 255, 0.3) 8deg 9deg, transparent 9deg 10deg, rgba(229, 243, 255, 0.1) 10deg 11deg, transparent 11deg 72deg);
+	clip-path: url(#bagel1);
+	border-radius: 50%;
+
+	animation: circle11Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes circle11Animation {
+	0%, 98%, 100% {
+		transform: translate(-50%, -50%) rotate(0deg);
+		opacity: 1;
+	}
+	15% {
+		transform: translate(-50%, -50%) rotate(45deg);
+	}
+	25% {
+		transform: translate(-50%, -50%) rotate(-10deg);
+	}
+	30% {
+		opacity: 1;
+	}
+	35% {
+		transform: translate(-50%, -50%) rotate(-20deg);
+		opacity: 0;
+	}
+	93% {
+		transform: translate(-50%, -50%) rotate(80deg);
+		opacity: 0;
+	}
+}
+
+
+.circle-12 {
+	top: 50%; left: 50%;
+	width: 190px; height: 190px;
+	background: repeating-conic-gradient(from 0deg, rgba(208, 233, 255, 0.2) 20deg 21deg, transparent 21deg 40deg, rgba(192, 223, 249, 0.25) 40deg 41deg, transparent 41deg 43deg, rgba(179, 220, 255, 0.15) 43deg 44deg, transparent 44deg 76deg);
+	clip-path: url(#bagel1);
+	border-radius: 50%;
+
+	animation: circle12Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes circle12Animation {
+	0%, 96%, 100% {
+		transform: translate(-50%, -50%) rotate(0deg);
+		opacity: 1;
+	}
+	10% {
+		transform: translate(-50%, -50%) rotate(45deg);
+	}
+	25% {
+		transform: translate(-50%, -50%) rotate(-45deg);
+	}
+	30% {
+		opacity: 1;
+	}
+	35% {
+		transform: translate(-50%, -50%) rotate(50deg);
+		opacity: 0;
+	}
+	93% {
+		transform: translate(-50%, -50%) rotate(-90deg);
+		opacity: 0;
+	}
+}
+
+
+.circle-13 {
+	width: 100px; height: 100px;
+	transform: translate(-50%, -50%);
+	animation: circle13AnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 circle13AnimationView 4s ease infinite;
+}
+	.circle-13::before {
+		width: 110px; height: 110px;
+		border-radius: 50%;
+		border: 1px solid rgb(251, 251, 251);
+		transform: translate(-50%, -50%);
+	}
+	.circle-13::after {
+		width: 120px; height: 120px;
+		border-radius: 50%;
+		border: 1px solid rgba(251, 251, 251, 0.5);
+		transform: translate(-50%, -50%);
+	}
+@keyframes circle13AnimationSize {
+	0%, 32%, 86%, 100% { transform: translate(-50%, -50%) scale(1); }
+	38%, 82% { transform: translate(-50%, -50%) scale(0.2); }
+}
+@keyframes circle13AnimationView {
+	/* подвигать */
+	0% { opacity: 1; }
+	2.5% { opacity: 0.5; }
+	5.7% { opacity: 1; }
+	6.6% { opacity: 0.5; }
+	7.4% { opacity: 1; }
+	8.2% { opacity: 0.5; }
+	9.8% { opacity: 1; }
+	10.7% { opacity: 0.5; }
+	11.5%, 14% { opacity: 1; }
+	14.8% { opacity: 0.5; }
+	15.6% { opacity: 1; }
+	18% { opacity: 0.5; }
+	18.9% { opacity: 1; }
+	20.5% { opacity: 0.5; }
+	21.3% { opacity: 1; }
+	22.1% { opacity: 0.5; }
+	23.8% { opacity: 1; }
+	24.6% { opacity: 0.5; }
+	25.4% { opacity: 1; }
+	27.9% { opacity: 0.5; }
+	28.7%, 32% { opacity: 1; }
+	38% { opacity: 0; }
+	82% { opacity: 0; }
+	86% { opacity: 1; }
+	88.6% { opacity: 0.5; }
+	90.2% { opacity: 0; }
+	91.8% { opacity: 1; }
+	92.7% { opacity: 0; }
+	93.5% { opacity: 1; }
+	96.8% { opacity: 0; }
+	97.6% { opacity: 1; }
+	99.2% { opacity: 0; }
+	100% { opacity: 1; }
+}
+
+.circle-14 {
+	width: 100px; height: 100px;
+	transform: translate(-50%, -50%);
+	animation: circle13AnimationSize 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite,
+						 circle14AnimationView 4s ease infinite;
+}
+	.circle-14::before {
+		width: 70px; height: 70px;
+		border-radius: 50%;
+		border: 1px solid rgba(251, 251, 251, 0.5);
+		transform: translate(-50%, -50%);
+	}
+	.circle-14::after {
+		width: 95px; height: 95px;
+		border-radius: 50%;
+		border: 1px solid rgba(251, 251, 251, 0.3);
+		transform: translate(-50%, -50%);
+	}
+
+@keyframes circle14AnimationView {
+	/* подвигать */
+	0% { opacity: 1; }
+	2.5% { opacity: 0.5; }
+	5.7% { opacity: 1; }
+	6.6% { opacity: 0.5; }
+	7.4% { opacity: 1; }
+	8.2% { opacity: 0.5; }
+	9.8% { opacity: 1; }
+	10.7% { opacity: 0.5; }
+	11.5%, 14% { opacity: 1; }
+	14.8% { opacity: 0.5; }
+	15.6% { opacity: 1; }
+	18% { opacity: 0.5; }
+	18.9% { opacity: 1; }
+	20.5% { opacity: 0.5; }
+	21.3% { opacity: 1; }
+	22.1% { opacity: 0.5; }
+	23.8% { opacity: 1; }
+	24.6% { opacity: 0.5; }
+	25.4% { opacity: 1; }
+	27.9% { opacity: 0.5; }
+	28.7%, 32% { opacity: 1; }
+	38% { opacity: 0; }
+	82% { opacity: 0; }
+	86% { opacity: 1; }
+	88.6% { opacity: 0.5; }
+	90.2% { opacity: 0; }
+	91.8% { opacity: 1; }
+	92.7% { opacity: 0; }
+	93.5% { opacity: 1; }
+	96.8% { opacity: 0; }
+	97.6% { opacity: 1; }
+	99.2% { opacity: 0; }
+	100% { opacity: 1; }
+}
+
+
+.glitch {
+	width: 2px; height: 2px;
+	box-shadow: -21px -75px #8AC7ED, -16px -78px #8AC7ED, -8px -78px #8AC7ED, -5px -77px #8AC7ED, -2px -79px #8AC7ED, 10px -79px #8AC7ED, 25px -73px #8AC7ED, 41px -71px #8AC7ED, 44px -68px #8AC7ED, -26px -72px #8AC7ED, -45px -62px #8AC7ED, -65px -57px #8AC7ED, 59px -49px #8AC7ED, 67px -52px #8AC7ED, 37px -69px #8AC7ED, 43px -62px #8AC7ED, 39px -62px #8AC7ED, 17px -71px #8AC7ED, 28px -67px #8AC7ED, 65px -32px #8AC7ED, 73px -24px #8AC7ED, 67px -25px #8AC7ED, 76px -14px #8AC7ED, 70px -18px #8AC7ED, 82px 21px #8AC7ED, 79px 20px #8AC7ED, 72px 15px #8AC7ED, 55px 45px #8AC7ED, 48px 51px #8AC7ED, 43px 58px #8AC7ED, 37px 57px #8AC7ED, 36px 63px #8AC7ED, 32px 76px #8AC7ED, 35px 70px #8AC7ED, 25px 71px #8AC7ED, 20px 75px #8AC7ED, 5px 70px #8AC7ED, 7px 75px #8AC7ED, -5px 79px #8AC7ED, 3px 78px #8AC7ED, -1px 77px #8AC7ED, -13px 78px #8AC7ED, -15px 82px #8AC7ED, -20px 76px #8AC7ED, -18px 78px #8AC7ED, -17px 75px #8AC7ED, -22px 72px #8AC7ED, -34px 72px #8AC7ED, -36px 69px #8AC7ED, -43px 74px #8AC7ED, -41px 72px #8AC7ED, -42px 69px #8AC7ED, -38px 66px #8AC7ED, -43px 63px #8AC7ED, -37px 61px #8AC7ED, -56px 66px #8AC7ED, -54px 61px #8AC7ED, -58px 54px #8AC7ED, -60px 41px #8AC7ED, -50px 56px #8AC7ED, -54px 57px #8AC7ED, -60px 52px #8AC7ED, -74px 35px #8AC7ED, -76px 18px #8AC7ED, -74px 25px #8AC7ED, -69px 23px #8AC7ED, -84px 13px #8AC7ED, -73px 3px #8AC7ED, -80px -1px #8AC7ED, -79px -4px #8AC7ED, -79px -7px #8AC7ED, -70px -11px #8AC7ED, -67px -23px #8AC7ED, -84px -13px #8AC7ED, -71px -42px #8AC7ED, -61px -49px #8AC7ED, -58px -43px #8AC7ED, -55px -50px #8AC7ED, -32px -72px #8AC7ED, -80px -30px #8AC7ED, -59px -20px #8AC7ED, -79px 12px #8AC7ED, -76px 1px #8AC7ED, 8px 57px #8AC7ED, 59px 36px #8AC7ED, 60px 46px #8AC7ED, 54px 59px #8AC7ED, 44px 52px #8AC7ED, -31px 20px #8AC7ED, -56px 2px #8AC7ED, 47px 35px #8AC7ED, 70px 6px #8AC7ED, 60px -2px #8AC7ED,
+							-21px -75px 0 1px rgba(255, 255, 255, 0.1), -16px -78px 0 1px rgba(255, 255, 255, 0.1), -8px -78px 0 1px rgba(255, 255, 255, 0.1), -5px -77px 0 1px rgba(255, 255, 255, 0.1), -2px -79px 0 1px rgba(255, 255, 255, 0.1), 10px -79px 0 1px rgba(255, 255, 255, 0.1), 25px -73px 0 1px rgba(255, 255, 255, 0.1), 41px -71px 0 1px rgba(255, 255, 255, 0.1), 44px -68px 0 1px rgba(255, 255, 255, 0.1), -26px -72px 0 1px rgba(255, 255, 255, 0.1), -45px -62px 0 1px rgba(255, 255, 255, 0.1), -65px -57px 0 1px rgba(255, 255, 255, 0.1), 59px -49px 0 1px rgba(255, 255, 255, 0.1), 67px -52px 0 1px rgba(255, 255, 255, 0.1), 37px -69px 0 1px rgba(255, 255, 255, 0.1), 43px -62px 0 1px rgba(255, 255, 255, 0.1), 39px -62px 0 1px rgba(255, 255, 255, 0.1), 17px -71px 0 1px rgba(255, 255, 255, 0.1), 28px -67px 0 1px rgba(255, 255, 255, 0.1), 65px -32px 0 1px rgba(255, 255, 255, 0.1), 73px -24px 0 1px rgba(255, 255, 255, 0.1), 67px -25px 0 1px rgba(255, 255, 255, 0.1), 76px -14px 0 1px rgba(255, 255, 255, 0.1), 70px -18px 0 1px rgba(255, 255, 255, 0.1), 82px 21px 0 1px rgba(255, 255, 255, 0.1), 79px 20px 0 1px rgba(255, 255, 255, 0.1), 72px 15px 0 1px rgba(255, 255, 255, 0.1), 55px 45px 0 1px rgba(255, 255, 255, 0.1), 48px 51px 0 1px rgba(255, 255, 255, 0.1), 43px 58px 0 1px rgba(255, 255, 255, 0.1), 37px 57px 0 1px rgba(255, 255, 255, 0.1), 36px 63px 0 1px rgba(255, 255, 255, 0.1), 32px 76px 0 1px rgba(255, 255, 255, 0.1), 35px 70px 0 1px rgba(255, 255, 255, 0.1), 25px 71px 0 1px rgba(255, 255, 255, 0.1), 20px 75px 0 1px rgba(255, 255, 255, 0.1), 5px 70px 0 1px rgba(255, 255, 255, 0.1), 7px 75px 0 1px rgba(255, 255, 255, 0.1), -5px 79px 0 1px rgba(255, 255, 255, 0.1), 3px 78px 0 1px rgba(255, 255, 255, 0.1), -1px 77px 0 1px rgba(255, 255, 255, 0.1), -13px 78px 0 1px rgba(255, 255, 255, 0.1), -15px 82px 0 1px rgba(255, 255, 255, 0.1), -20px 76px 0 1px rgba(255, 255, 255, 0.1), -18px 78px 0 1px rgba(255, 255, 255, 0.1), -17px 75px 0 1px rgba(255, 255, 255, 0.1), -22px 72px 0 1px rgba(255, 255, 255, 0.1), -34px 72px 0 1px rgba(255, 255, 255, 0.1), -36px 69px 0 1px rgba(255, 255, 255, 0.1), -43px 74px 0 1px rgba(255, 255, 255, 0.1), -41px 72px 0 1px rgba(255, 255, 255, 0.1), -42px 69px 0 1px rgba(255, 255, 255, 0.1), -38px 66px 0 1px rgba(255, 255, 255, 0.1), -43px 63px 0 1px rgba(255, 255, 255, 0.1), -37px 61px 0 1px rgba(255, 255, 255, 0.1), -56px 66px 0 1px rgba(255, 255, 255, 0.1), -54px 61px 0 1px rgba(255, 255, 255, 0.1), -58px 54px 0 1px rgba(255, 255, 255, 0.1), -60px 41px 0 1px rgba(255, 255, 255, 0.1), -50px 56px 0 1px rgba(255, 255, 255, 0.1), -54px 57px 0 1px rgba(255, 255, 255, 0.1), -60px 52px 0 1px rgba(255, 255, 255, 0.1), -74px 35px 0 1px rgba(255, 255, 255, 0.1), -76px 18px 0 1px rgba(255, 255, 255, 0.1), -74px 25px 0 1px rgba(255, 255, 255, 0.1), -69px 23px 0 1px rgba(255, 255, 255, 0.1), -84px 13px 0 1px rgba(255, 255, 255, 0.1), -73px 3px 0 1px rgba(255, 255, 255, 0.1), -80px -1px 0 1px rgba(255, 255, 255, 0.1), -79px -4px 0 1px rgba(255, 255, 255, 0.1), -79px -7px 0 1px rgba(255, 255, 255, 0.1), -70px -11px 0 1px rgba(255, 255, 255, 0.1), -67px -23px 0 1px rgba(255, 255, 255, 0.1), -84px -13px 0 1px rgba(255, 255, 255, 0.1), -71px -42px 0 1px rgba(255, 255, 255, 0.1), -61px -49px 0 1px rgba(255, 255, 255, 0.1), -58px -43px 0 1px rgba(255, 255, 255, 0.1), -55px -50px 0 1px rgba(255, 255, 255, 0.1), -32px -72px 0 1px rgba(255, 255, 255, 0.1), -80px -30px 0 1px rgba(255, 255, 255, 0.1), -59px -20px 0 1px rgba(255, 255, 255, 0.1), -79px 12px 0 1px rgba(255, 255, 255, 0.1), -76px 1px 0 1px rgba(255, 255, 255, 0.1), 8px 57px 0 1px rgba(255, 255, 255, 0.1), 59px 36px 0 1px rgba(255, 255, 255, 0.1), 60px 46px 0 1px rgba(255, 255, 255, 0.1), 54px 59px 0 1px rgba(255, 255, 255, 0.1), 44px 52px 0 1px rgba(255, 255, 255, 0.1), -31px 20px 0 1px rgba(255, 255, 255, 0.1), -56px 2px 0 1px rgba(255, 255, 255, 0.1), 47px 35px 0 1px rgba(255, 255, 255, 0.1), 70px 6px 0 1px rgba(255, 255, 255, 0.1), 60px -2px 0 1px rgba(255, 255, 255, 0.1);
+	filter: blur(1px);
+
+	animation: glitchAnimationOpacity 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 glitchAnimationMove 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 glitchAnimationBright 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes glitchAnimationOpacity {
+	0%, 30%, 96%, 100% { opacity: 1; }
+	35%, 93% 					 { opacity: 0; }
+}
+@keyframes glitchAnimationMove {
+	0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
+	35%, 65% { transform: translate(-50%, -50%) rotate(4320deg); }
+}
+@keyframes glitchAnimationBright {
+	0%, 100% { filter: blur(1px); }
+	35%, 65% { filter: blur(1px) brightness(1.8); }
+}
+
+
+.fragment-1::before {
+	width: 6px; height: 6px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+	
+	animation: fragment1BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment1BeforeAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(71px, -181px);
+		opacity: 1;
+	}
+	37% {
+		transform: rotate(15deg) translate(71px, -181px);
+		opacity: 1;
+	}
+	37.1%, 76.9% {
+		opacity: 0;
+	}
+	77% {
+		transform: rotate(-2deg) translate(71px, -181px);
+		opacity: 1;
+	}
+	90% {
+		transform: rotate(-9deg) translate(71px, -181px);
+	}
+}
+
+
+.fragment-1::after {
+	width: 6px; height: 6px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment1AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment1AfterAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(285px, 48px);
+		opacity: 1;
+	}
+	7% {
+		transform: rotate(5deg) translate(285px, 48px);
+	}
+	22% {
+		transform: rotate(-1deg) translate(285px, 48px);
+	}
+	40% {
+		transform: rotate(-3deg) translate(285px, 48px);
+		opacity: 1;
+	}
+	40.1%, 81.9% {
+		opacity: 0;
+	}
+	82% {
+		transform: rotate(-15deg) translate(285px, 48px);
+		opacity: 1;
+	}
+}
+
+
+.fragment-2::after {
+	width: 6px; height: 6px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment2AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment2AfterAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(-220px, 162px);
+		opacity: 1;
+	}
+	46% {
+		transform: rotate(-8deg) translate(-220px, 162px);
+		opacity: 1;
+	}
+	46.1%, 97.9% {
+		opacity: 0;
+	}
+	98% {
+		transform: rotate(2deg) translate(-220px, 162px);
+		opacity: 1;
+	}
+}
+
+
+.fragment-2::before {
+	width: 6px; height: 6px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment2BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment2BeforeAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(284px, 111px);
+		opacity: 1;
+	}
+	2% {
+		transform: rotate(2deg) translate(284px, 111px);
+	}
+	9% {
+		transform: rotate(-5deg) translate(284px, 111px);
+	}
+	15%, 22% {
+		transform: rotate(-3deg) translate(284px, 111px);
+	}
+	27% {
+		transform: rotate(-2deg) translate(284px, 111px);
+		opacity: 1;
+	}
+	38.9% {
+		transform: rotate(-9deg) translate(284px, 111px);
+	}
+	39%, 76.9% {
+		opacity: 0;
+	}
+	77% {
+		transform: rotate(-9deg) translate(284px, 111px);
+		opacity: 1;
+	}
+}
+
+
+.fragment-3::after {
+	width: 6px; height: 6px;
+	background: rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment3AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment3AfterAnimationMove {
+	0%, 4.9%, 65.1%, 100% {
+		opacity: 0;
+	}
+	5% {
+		transform: rotate(0deg) translate(183px, 198px);
+		opacity: 1;
+	}
+	16% {
+		transform: rotate(-9deg) translate(284px, 111px);
+		opacity: 1;
+	}
+	16.1%, 60.9% {
+		opacity: 0;
+	}
+	61% {
+		transform: rotate(5deg) translate(284px, 111px);
+		opacity: 1;
+	}
+	65% {
+		transform: rotate(10deg) translate(284px, 111px);
+		opacity: 1;
+	}
+}
+
+
+.fragment-3::before {
+	width: 6px; height: 6px;
+	background: rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment3BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment3BeforeAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(-253px, -126px);
+		opacity: 1;
+	}
+	22% {
+		transform: rotate(25deg) translate(-253px, -126px);
+		opacity: 1;
+	}
+	22.1%, 95.9% {
+		opacity: 0;
+	}
+	96% {
+		transform: rotate(-5deg) translate(-253px, -126px);
+		opacity: 1;
+	}
+}
\ No newline at end of file
diff --git a/pure-css-halftone-portrait-from-jpg-source/README.markdown b/pure-css-halftone-portrait-from-jpg-source/README.markdown
new file mode 100644
index 0000000..5b55ba8
--- /dev/null
+++ b/pure-css-halftone-portrait-from-jpg-source/README.markdown
@@ -0,0 +1,9 @@
+# Pure CSS halftone portrait from .jpg source
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/thebabydino/pen/LYGGwrm](https://codepen.io/thebabydino/pen/LYGGwrm).
+
+Needs support for blend modes to work, so no pre-Chromium Edge.
+
+---
+
+Dedicated to the memory of someone dear who passed away in 2019. Missing you every day.
diff --git a/pure-css-halftone-portrait-from-jpg-source/dist/index.html b/pure-css-halftone-portrait-from-jpg-source/dist/index.html
new file mode 100644
index 0000000..f7069a5
--- /dev/null
+++ b/pure-css-halftone-portrait-from-jpg-source/dist/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Pure CSS halftone portrait from .jpg source</title>
+  <link rel="stylesheet" href="./style.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<article class='noproc'>
+  <h3>No image filter</h3>
+  <section>
+    <h4>original image</h4>
+    <div class='original'></div>
+    <h4>Halftone result</h4>
+    <div class='halftone'></div>
+  </section>
+</article>
+
+<article class='filter'>
+  <h3>Filter image beforehand</h3>
+  <section>
+    <h4>original image</h4>
+    <div class='original'></div>
+    <h4>Halftone result</h4>
+    <div class='halftone'></div>
+  </section>
+</article>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/pure-css-halftone-portrait-from-jpg-source/dist/style.css b/pure-css-halftone-portrait-from-jpg-source/dist/style.css
new file mode 100644
index 0000000..c2358c6
--- /dev/null
+++ b/pure-css-halftone-portrait-from-jpg-source/dist/style.css
@@ -0,0 +1,74 @@
+* {
+  margin: 0;
+}
+
+body {
+  font: 1em/1.125 trebuchet ms, verdana, sans-serif;
+  text-align: center;
+}
+
+article {
+  margin-bottom: 0.5em;
+}
+
+h3 {
+  font-size: 1.75em;
+  line-height: 2;
+}
+
+section {
+  --w: Min(calc(100vw - 1.5em), 30em);
+  --h: calc(1.5*var(--w));
+  display: grid;
+  place-content: center;
+  grid-gap: 0 0.5em;
+  --dots: radial-gradient(circle, #000, #fff) 0 0/5px 5px round;
+}
+
+h4 {
+  font-size: 1.25em;
+  text-transform: uppercase;
+}
+@media (min-width: 60.5em) {
+  h4 {
+    grid-row: 1;
+  }
+}
+
+div {
+  width: var(--w);
+  height: var(--h);
+  background: var(--lyr0, var(--img)) var(--sep,  ) var(--lyr1,  );
+}
+
+.halftone {
+  --lyr1: var(--dots);
+  filter: contrast(9);
+}
+
+.noproc {
+  --img: url(https://assets.codepen.io/2017/portrait_woman.jpg) 50%/cover;
+}
+.noproc .halftone {
+  --sep: ,;
+  background-blend-mode: screen;
+}
+
+.filter {
+  --img: url(https://assets.codepen.io/2017/portrait_tiger.jpg) 50%/cover;
+}
+.filter .halftone {
+  --lyr0:  ;
+  position: relative;
+}
+.filter .halftone::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--img);
+  filter: brightness(1.25) contrast(1.25) grayscale(1);
+  mix-blend-mode: screen;
+  content: "";
+}
\ No newline at end of file
diff --git a/pure-css-halftone-portrait-from-jpg-source/license.txt b/pure-css-halftone-portrait-from-jpg-source/license.txt
new file mode 100644
index 0000000..5e8cc1b
--- /dev/null
+++ b/pure-css-halftone-portrait-from-jpg-source/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Ana Tudor (https://codepen.io/thebabydino/pen/LYGGwrm)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/pure-css-halftone-portrait-from-jpg-source/src/index.html b/pure-css-halftone-portrait-from-jpg-source/src/index.html
new file mode 100644
index 0000000..2f94476
--- /dev/null
+++ b/pure-css-halftone-portrait-from-jpg-source/src/index.html
@@ -0,0 +1,19 @@
+<article class='noproc'>
+  <h3>No image filter</h3>
+  <section>
+    <h4>original image</h4>
+    <div class='original'></div>
+    <h4>Halftone result</h4>
+    <div class='halftone'></div>
+  </section>
+</article>
+
+<article class='filter'>
+  <h3>Filter image beforehand</h3>
+  <section>
+    <h4>original image</h4>
+    <div class='original'></div>
+    <h4>Halftone result</h4>
+    <div class='halftone'></div>
+  </section>
+</article>
\ No newline at end of file
diff --git a/pure-css-halftone-portrait-from-jpg-source/src/style.scss b/pure-css-halftone-portrait-from-jpg-source/src/style.scss
new file mode 100644
index 0000000..aec0299
--- /dev/null
+++ b/pure-css-halftone-portrait-from-jpg-source/src/style.scss
@@ -0,0 +1,73 @@
+$a: 2;
+$b: 3;
+$bg-0: url(https://assets.codepen.io/2017/portrait_woman.jpg) 50%/ cover;
+$bg-1: url(https://assets.codepen.io/2017/portrait_tiger.jpg) 50%/ cover;
+$g: .5em;
+$w: 30em;
+$bp-max: 2*$w + $g;
+$d: 5px;
+
+* { margin: 0 }
+
+body {
+  font: 1em/1.125 trebuchet ms, verdana, sans-serif;
+  text-align: center
+}
+
+article { margin-bottom: $g }
+
+h3 { font-size: 1.75em; line-height: 2 }
+
+section {
+  --w: Min(calc(100vw - 1.5em), #{$w});
+  --h: calc(#{$b/$a}*var(--w));
+  display: grid;
+  place-content: center;
+  grid-gap: 0 $g;
+  --dots: radial-gradient(circle, #000, #fff) 0 0/#{$d $d} round;
+}
+
+h4 {
+  font-size: 1.25em;
+  text-transform: uppercase;
+  
+  @media (min-width: #{$bp-max}) { grid-row: 1 }
+}
+
+div {
+  width: var(--w);
+  height: var(--h);
+  background: var(--lyr0, var(--img)) var(--sep, #{unquote(' ')}) var(--lyr1, #{unquote(' ')});
+}
+
+.halftone {
+  --lyr1: var(--dots);
+  filter: contrast(9)
+}
+
+.noproc {
+  --img: #{$bg-0};
+  
+  .halftone {
+    --sep: #{unquote(',')};
+    background-blend-mode: screen
+  }
+}
+
+.filter {
+  --img: #{$bg-1};
+  
+  .halftone {
+    --lyr0: #{unquote(' ')};
+    position: relative;
+    
+    &::after {
+      position: absolute;
+      top: 0; right: 0; bottom: 0; left: 0;
+      background: var(--img);
+      filter: brightness(1.25) contrast(1.25) grayscale(1);
+      mix-blend-mode: screen;
+      content: ''
+    }
+  }
+}
\ No newline at end of file
diff --git a/pure-css-halloween-zipper/README.markdown b/pure-css-halloween-zipper/README.markdown
new file mode 100644
index 0000000..dbe9e99
--- /dev/null
+++ b/pure-css-halloween-zipper/README.markdown
@@ -0,0 +1,33 @@
+# Pure CSS Halloween zipper 🎃🦇🕸️🕷️🧙‍♀️🧹
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/thebabydino/pen/abZmLWN](https://codepen.io/thebabydino/pen/abZmLWN).
+
+[See me code this](https://youtu.be/R6lbhfvMNGk) in 10 minutes.
+
+---
+
+If the work I've been putting out for over 8 years (celebrated my 8th CodePen anniversary in June) has helped you in any way or you just like it and you wish me to be able to continue putting out stuff, please consider one of the following:
+
+* being a cool cat 😼🎩 and becoming a patron on Patreon
+
+[![become a patron button](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/anatudor)
+
+* getting me something off my Amazon WishList 
+
+[🎁 🇺🇸](https://www.amazon.com/gp/registry/wishlist/2Y3C4722GXH0I/) / [🎁 🇬🇧](https://www.amazon.co.uk/gp/registry/wishlist/2I25W7U0KADSR/)
+
+* or at least sharing this to show the rest of the world what can be done with CSS these days
+
+---
+
+[Radius computation explainer demo](https://codepen.io/thebabydino/pen/rVgeva).
+
+[Original .gif](https://borrachas.tumblr.com/post/129909963734/27).
+
+![the gif itself](https://64.media.tumblr.com/f4feb0adfce805ddb9473f31b1db4cbe/tumblr_nvab8cEah61rlkdy0o1_r1_640.gifv)
+
+Palette: [Trick or Treat](https://www.colourlovers.com/palette/54697/Trick_or_Treat).
+
+---
+
+Dedicated to the memory of someone dear who passed away in 2019. Missing you every day.
diff --git a/pure-css-halloween-zipper/dist/https___codepen_io_thebab.css b/pure-css-halloween-zipper/dist/https___codepen_io_thebab.css
new file mode 100644
index 0000000..1063945
--- /dev/null
+++ b/pure-css-halloween-zipper/dist/https___codepen_io_thebab.css
@@ -0,0 +1,40 @@
+#btn--yp {
+	box-sizing: content-box;
+	position: fixed;
+	z-index: 9;
+	bottom: 1em; right: 1em;
+	border: solid 1em transparent;
+	width: 4.625em; height: 3.25em;
+	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/icon-yp.svg) 50%/ cover content-box;
+	font: 16px/ 1.25 trebuchet ms, sans-serif;
+	text-indent: 200vw;
+	text-shadow: none;
+	filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);
+	transition: .5s;
+	white-space: nowrap;
+	
+	&:before {
+		box-sizing: inherit;
+		position: absolute;
+		left: 0; bottom: 100%;
+		margin: 1em -.5em;
+		padding: .5em;
+		width: 100%;
+		border-radius: 5px;
+		background: #e8e0e0;
+		color: #000;
+		text-align: center;
+		text-decoration: none;
+		text-indent: 0vw;
+		white-space: normal;
+		animation: float 1s ease-in-out infinite alternate;
+		content: attr(data-txt)
+	}
+		
+	&:hover, &:focus {
+		outline: none;
+		filter: grayscale(0) drop-shadow(0 0 1px crimson);
+	}
+}
+
+@keyframes float { to { transform: translateY(.75em) } }
\ No newline at end of file
diff --git a/pure-css-halloween-zipper/dist/index.html b/pure-css-halloween-zipper/dist/index.html
new file mode 100644
index 0000000..e185d18
--- /dev/null
+++ b/pure-css-halloween-zipper/dist/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Pure CSS Halloween zipper 🎃🦇🕸️🕷️🧙‍♀️🧹</title>
+  <script>const ID='R6lbhfvMNGk'</script><link rel="stylesheet" href="./style.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<body style="--n: 64; --tan: 0.049126849769467254">
+  <div class="seg" style="--k: 63"></div>
+  <div class="seg" style="--k: 62"></div>
+  <div class="seg" style="--k: 61"></div>
+  <div class="seg" style="--k: 60"></div>
+  <div class="seg" style="--k: 59"></div>
+  <div class="seg" style="--k: 58"></div>
+  <div class="seg" style="--k: 57"></div>
+  <div class="seg" style="--k: 56"></div>
+  <div class="seg" style="--k: 55"></div>
+  <div class="seg" style="--k: 54"></div>
+  <div class="seg" style="--k: 53"></div>
+  <div class="seg" style="--k: 52"></div>
+  <div class="seg" style="--k: 51"></div>
+  <div class="seg" style="--k: 50"></div>
+  <div class="seg" style="--k: 49"></div>
+  <div class="seg" style="--k: 48"></div>
+  <div class="seg" style="--k: 47"></div>
+  <div class="seg" style="--k: 46"></div>
+  <div class="seg" style="--k: 45"></div>
+  <div class="seg" style="--k: 44"></div>
+  <div class="seg" style="--k: 43"></div>
+  <div class="seg" style="--k: 42"></div>
+  <div class="seg" style="--k: 41"></div>
+  <div class="seg" style="--k: 40"></div>
+  <div class="seg" style="--k: 39"></div>
+  <div class="seg" style="--k: 38"></div>
+  <div class="seg" style="--k: 37"></div>
+  <div class="seg" style="--k: 36"></div>
+  <div class="seg" style="--k: 35"></div>
+  <div class="seg" style="--k: 34"></div>
+  <div class="seg" style="--k: 33"></div>
+  <div class="seg" style="--k: 32"></div>
+  <div class="seg" style="--k: 31"></div>
+  <div class="seg" style="--k: 30"></div>
+  <div class="seg" style="--k: 29"></div>
+  <div class="seg" style="--k: 28"></div>
+  <div class="seg" style="--k: 27"></div>
+  <div class="seg" style="--k: 26"></div>
+  <div class="seg" style="--k: 25"></div>
+  <div class="seg" style="--k: 24"></div>
+  <div class="seg" style="--k: 23"></div>
+  <div class="seg" style="--k: 22"></div>
+  <div class="seg" style="--k: 21"></div>
+  <div class="seg" style="--k: 20"></div>
+  <div class="seg" style="--k: 19"></div>
+  <div class="seg" style="--k: 18"></div>
+  <div class="seg" style="--k: 17"></div>
+  <div class="seg" style="--k: 16"></div>
+  <div class="seg" style="--k: 15"></div>
+  <div class="seg" style="--k: 14"></div>
+  <div class="seg" style="--k: 13"></div>
+  <div class="seg" style="--k: 12"></div>
+  <div class="seg" style="--k: 11"></div>
+  <div class="seg" style="--k: 10"></div>
+  <div class="seg" style="--k: 9"></div>
+  <div class="seg" style="--k: 8"></div>
+  <div class="seg" style="--k: 7"></div>
+  <div class="seg" style="--k: 6"></div>
+  <div class="seg" style="--k: 5"></div>
+  <div class="seg" style="--k: 4"></div>
+  <div class="seg" style="--k: 3"></div>
+  <div class="seg" style="--k: 2"></div>
+  <div class="seg" style="--k: 1"></div>
+  <div class="seg" style="--k: 0"></div>
+</body>
+<!-- partial -->
+  <script src='https://codepen.io/thebabydino/pen/evPbxv.js'></script>
+</body>
+</html>
diff --git a/pure-css-halloween-zipper/dist/style.css b/pure-css-halloween-zipper/dist/style.css
new file mode 100644
index 0000000..66f51ea
--- /dev/null
+++ b/pure-css-halloween-zipper/dist/style.css
@@ -0,0 +1,81 @@
+#btn--yp {
+  box-sizing: content-box;
+  position: fixed;
+  z-index: 9;
+  bottom: 1em;
+  right: 1em;
+  border: solid 1em transparent;
+  width: 4.625em;
+  height: 3.25em;
+  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/icon-yp.svg) 50%/cover content-box;
+  font: 16px/ 1.25 trebuchet ms, sans-serif;
+  text-indent: 200vw;
+  text-shadow: none;
+  filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);
+  transition: .5s;
+  white-space: nowrap;
+}
+#btn--yp:before {
+  box-sizing: inherit;
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  margin: 1em -.5em;
+  padding: .5em;
+  width: 100%;
+  border-radius: 5px;
+  background: #e8e0e0;
+  color: #000;
+  text-align: center;
+  text-decoration: none;
+  text-indent: 0vw;
+  white-space: normal;
+  animation: float 1s ease-in-out infinite alternate;
+  content: attr(data-txt);
+}
+#btn--yp:hover, #btn--yp:focus {
+  outline: none;
+  filter: grayscale(0) drop-shadow(0 0 1px crimson);
+}
+
+@keyframes float {
+  to {
+    transform: translateY(0.75em);
+  }
+}
+body {
+  background: #130912;
+}
+
+.seg {
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 5em;
+  height: 6px;
+  transform: translate(-50%, -50%) rotate(calc(var(--k)/var(--n)*1turn)) translate(calc(6px/var(--tan) + .5*5em));
+}
+.seg::before, .seg::after {
+  --i: 0;
+  --sgn-i: calc(1 - 2*var(--i));
+  flex: 1;
+  margin: 0 1px;
+  border-radius: 3px;
+  transform-origin: calc(var(--i)*100%);
+  background: linear-gradient(calc(var(--sgn-i)*-90deg), #3e1c33, #602749, #b14623, #f6921d);
+  animation: zip 1s ease-out calc((var(--k)/var(--n) - 1)*2*1s) infinite alternate;
+  content: "";
+}
+.seg::after {
+  --i: 1 ;
+}
+
+@keyframes zip {
+  0%, 50% {
+    transform: none;
+  }
+  75%, 100% {
+    transform: rotate(calc(var(--sgn-i)*68deg));
+  }
+}
\ No newline at end of file
diff --git a/pure-css-halloween-zipper/license.txt b/pure-css-halloween-zipper/license.txt
new file mode 100644
index 0000000..8445404
--- /dev/null
+++ b/pure-css-halloween-zipper/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Ana Tudor (https://codepen.io/thebabydino/pen/abZmLWN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/pure-css-halloween-zipper/src/https___codepen_io_thebab.css b/pure-css-halloween-zipper/src/https___codepen_io_thebab.css
new file mode 100644
index 0000000..1063945
--- /dev/null
+++ b/pure-css-halloween-zipper/src/https___codepen_io_thebab.css
@@ -0,0 +1,40 @@
+#btn--yp {
+	box-sizing: content-box;
+	position: fixed;
+	z-index: 9;
+	bottom: 1em; right: 1em;
+	border: solid 1em transparent;
+	width: 4.625em; height: 3.25em;
+	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/icon-yp.svg) 50%/ cover content-box;
+	font: 16px/ 1.25 trebuchet ms, sans-serif;
+	text-indent: 200vw;
+	text-shadow: none;
+	filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);
+	transition: .5s;
+	white-space: nowrap;
+	
+	&:before {
+		box-sizing: inherit;
+		position: absolute;
+		left: 0; bottom: 100%;
+		margin: 1em -.5em;
+		padding: .5em;
+		width: 100%;
+		border-radius: 5px;
+		background: #e8e0e0;
+		color: #000;
+		text-align: center;
+		text-decoration: none;
+		text-indent: 0vw;
+		white-space: normal;
+		animation: float 1s ease-in-out infinite alternate;
+		content: attr(data-txt)
+	}
+		
+	&:hover, &:focus {
+		outline: none;
+		filter: grayscale(0) drop-shadow(0 0 1px crimson);
+	}
+}
+
+@keyframes float { to { transform: translateY(.75em) } }
\ No newline at end of file
diff --git a/pure-css-halloween-zipper/src/index.pug b/pure-css-halloween-zipper/src/index.pug
new file mode 100644
index 0000000..bfdd926
--- /dev/null
+++ b/pure-css-halloween-zipper/src/index.pug
@@ -0,0 +1,6 @@
+- let n = 64;
+- let tan = Math.tan(.5*2*Math.PI/n);
+
+body(style=`--n: ${n}; --tan: ${tan}`)
+	while n--
+		.seg(style=`--k: ${n}`)
\ No newline at end of file
diff --git a/pure-css-halloween-zipper/src/style.scss b/pure-css-halloween-zipper/src/style.scss
new file mode 100644
index 0000000..1ad6c93
--- /dev/null
+++ b/pure-css-halloween-zipper/src/style.scss
@@ -0,0 +1,39 @@
+// #130912, #3e1c33, #602749, #b14623, #f6921d
+$w: 5em;
+$h: 6px;
+$p: 50%;
+$t: 1s;
+
+body { background: #130912 }
+
+.seg {
+	display: flex;
+	position: absolute;
+	top: 50%; left: 50%;
+	width: $w; height: $h;
+	transform: 
+		translate(-50%, -50%) 
+		rotate(calc(var(--k)/var(--n)*1turn))
+		translate(calc(#{$h}/var(--tan) + .5*#{$w}));
+	
+	&::before, &::after {
+		--i: 0;
+		--sgn-i: calc(1 - 2*var(--i));
+		flex: 1;
+		margin: 0 1px;
+		border-radius: .5*$h;
+		transform-origin: calc(var(--i)*100%);
+		background: 
+			linear-gradient(calc(var(--sgn-i)*-90deg), 
+					#3e1c33, #602749, #b14623, #f6921d);
+		animation: zip $t ease-out calc((var(--k)/var(--n) - 1)*2*#{$t}) infinite alternate;
+		content: ''
+	}
+	
+	&::after { --i: 1 }
+}
+
+@keyframes zip {
+	0%, #{$p} { transform: none }
+	#{.5*($p + 100%)}, 100% { transform: rotate(calc(var(--sgn-i)*68deg)) }
+}
\ No newline at end of file
diff --git a/pure-css-monument-valley-ii-not-for-safari/README.markdown b/pure-css-monument-valley-ii-not-for-safari/README.markdown
new file mode 100644
index 0000000..1b9f1b0
--- /dev/null
+++ b/pure-css-monument-valley-ii-not-for-safari/README.markdown
@@ -0,0 +1,5 @@
+# Pure CSS Monument Valley II (not for safari)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/miocene/pen/NWRWQpX](https://codepen.io/miocene/pen/NWRWQpX).
+
+
diff --git a/pure-css-monument-valley-ii-not-for-safari/dist/index.html b/pure-css-monument-valley-ii-not-for-safari/dist/index.html
new file mode 100644
index 0000000..f5ddb1e
--- /dev/null
+++ b/pure-css-monument-valley-ii-not-for-safari/dist/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Pure CSS Monument Valley II (not for safari)</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<head>
+	<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@200;500&display=swap&text=THEOASIinwhchYUNGWDR" rel="stylesheet">
+</head>
+<body>
+	<div class="frame">
+		<div class="scene">
+			<div class="building-1">
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div>
+					<div></div>
+				</div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div class="mooving-part-1">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="mooving-part-2">
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="rocks">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="Ro">
+					<div class="Ro_1">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro_2">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro_3">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro_4">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+				</div>
+				<div class="Girl">
+					<div class="Girl_1">
+						<div class="Girl__legl"></div>
+						<div class="Girl__legr"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl_2">
+						<div class="Girl__legl"></div>
+						<div class="Girl__legr"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl_3">
+						<div class="Girl__legl"></div>
+						<div class="Girl__legr"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl_4">
+						<div class="Girl__legr"></div>
+						<div class="Girl__legl"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+				</div>
+			</div>
+			<div class="building-2">
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div class="mooving-part-1">
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="mooving-part-2"></div>
+				<div class="mooving-part-3">
+					<div></div>
+				</div>
+				<div class="mooving-part-4">
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="mooving-part-5">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div class="cloud1"></div>
+					<div class="cloud2"></div>
+					<div class="cloud3"></div>
+					<div class="cloud4"></div>
+				</div>
+				<div class="mooving-part-6">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div class="cloud1"></div>
+					<div class="cloud2"></div>
+					<div class="cloud3"></div>
+					<div class="cloud4"></div>
+				</div>
+				<div class="mooving-bridge">
+					<div class="mooving-bridge-cloud">
+						<div></div>
+					</div>
+					<div class="mooving-bridge-part1">
+						<div></div>
+					</div>
+					<div class="mooving-bridge-part2">
+						<div></div>
+					</div>
+					<div class="mooving-bridge-part3">
+						<div></div>
+						<div></div>
+					</div>
+					<div class="mooving-bridge-part4">
+						<div></div>
+						<div></div>
+					</div>
+					<div class="mooving-bridge-part5">
+						<div></div>
+						<div></div>
+					</div>
+					<div class="mooving-bridge-part6">
+						<div></div>
+						<div></div>
+						<div></div>
+					</div>
+				</div>
+				<div class="rocks">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="Ro">
+					<div class="Ro__armr"></div>
+					<div class="Ro_1">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro_2">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro_3">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro_4">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro__arml"></div>
+				</div>
+				<div class="Girl">
+					<div class="Girl_1">
+						<div class="Girl__legl"></div>
+						<div class="Girl__legr"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl_2">
+						<div class="Girl__legl"></div>
+						<div class="Girl__legr"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl_3">
+						<div class="Girl__legl"></div>
+						<div class="Girl__legr"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl_4">
+						<div class="Girl__legr"></div>
+						<div class="Girl__legl"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl__arml"></div>
+				</div>
+
+				<div class="building-3">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div class="mooving-part-1">
+						<div>
+							<div></div>
+							<div></div>
+							<div></div>
+						</div>
+					</div>
+					<div class="mooving-part-2">
+						<div></div>
+						<div></div>
+						<div></div>
+					</div>
+					<div class="mooving-part-3">
+						<div></div>
+						<div></div>
+					</div>
+					<div class="mooving-part-4"></div>
+				</div>
+			</div>
+		</div>
+		<div class="cover">
+			<h1>The Oasis</h1>
+			<h3>in which</h3>
+			<h2>Young Eyes See New Wonders</h2>
+			<div class="cover__button"></div>
+		</div>
+	</div>
+</body>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/pure-css-monument-valley-ii-not-for-safari/dist/style.css b/pure-css-monument-valley-ii-not-for-safari/dist/style.css
new file mode 100644
index 0000000..023326e
--- /dev/null
+++ b/pure-css-monument-valley-ii-not-for-safari/dist/style.css
@@ -0,0 +1,7355 @@
+html, body {
+	height: 100vh; width: 100vw;
+	min-height: 60vw;
+	padding: 0; margin: 0;
+	background: black;
+	--animation: 90s infinite;
+}
+
+body::after {
+	content: '';
+	position: absolute;
+	display: block;
+	top: 0; left: 50%;
+	width: 454px; height: 798px;
+	transform: translateX(-50%);
+
+	animation: frame var(--animation) ease;
+}
+
+.frame {
+	position: relative;
+	width: 454px; height: 798px;
+	margin: auto;
+	background: #3D2E36;
+	overflow: hidden;
+}
+
+.scene {
+	position: relative;
+	font-size: 4px;
+	perspective: 100000px;
+	animation: scene var(--animation) linear;
+}
+
+.scene *, .scene *:before, .scene *:after {
+		content: '';
+		position: absolute;
+		transform-style: preserve-3d;
+		transform-origin: 0 0 0;
+	}
+
+.cover {
+	position: absolute;
+	width: 100%; height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	mix-blend-mode: hard-light;
+	font-family: "Prompt", sans-serif;
+	color: white;
+	z-index: 999;
+	
+	animation: cover var(--animation) ease;
+}
+
+.cover::before {
+		content: "│││";
+    width: 296px; height: 48px;
+    border-bottom: 2px solid white;
+    font-size: 22px;
+    text-align: center;
+    letter-spacing: -15px;
+		line-height: 16px;
+	}
+
+.cover h1 {
+    margin: 40px 0 26px;
+		font-size: 58px;
+    font-weight: 500;
+    text-transform: uppercase;
+    line-height: 67px;
+	}
+
+.cover h2 {
+    width: 296px;
+    margin: 36px 0 84px;
+    font-weight: 200;
+    font-size: 21px;
+		text-transform: uppercase;
+    text-align: center;
+    line-height: 24px;
+    letter-spacing: -1px;
+	}
+
+.cover h3 {
+    width: 296px;
+		margin: 0;
+    font-weight: 200;
+    font-size: 15px;
+		line-height: 6px;
+    text-align: center;
+    background: linear-gradient(0deg, white, white) 0px 2px / 105px 2px no-repeat, linear-gradient(0deg, white, white) 191px 2px / 105px 2px no-repeat;
+	}
+
+.cover .cover__button {
+		position: relative;
+    width: 42px; height: 42px;
+    border-radius: 99em;
+		box-shadow: inset 0 0 0 4px white;
+		transform-origin: center center;
+
+		animation: coverButton var(--animation) ease;
+	}
+
+.cover .cover__button::before {
+			content: '';
+			position: absolute;
+			top: -4px; left: -4px;
+			width: 50px; height: 50px;
+			border-radius: 99em;
+			box-shadow: 0 0 0 2px white;
+		}
+
+.cover .cover__button::after {
+			content: '';
+			position: absolute;
+			top: -4px; left: -4px;
+			width: 50px; height: 50px;
+			border-radius: 999em;
+			box-shadow: 0 0 0 1px white;
+			transform-origin: center center;
+
+			animation: coverButtonShadow var(--animation) ease;
+		}
+
+.building-1 {
+	width: 15em; height: 15em;
+	background: var(--top-default-light);
+	transform: translate(25em, 176em) rotateX(55deg) rotateZ(-45deg);
+	transform-style: preserve-3d;
+	
+	--left-default-light: #FF676A;
+	--left-default-dark: #E34848;
+	--left-accent-light: #FFD4A3;
+	--left-accent-dark: #EDB88C;
+	
+	--top-default-light: #FF8D7F;
+	--top-default-dark: #F36E5A;
+	--top-accent-light: #FFF8F5;
+	--top-accent-dark: #FCD3D7;
+	
+	--right-default-light: #904872;
+	--right-default-dark: #6F305B;
+	--right-accent-light: #E6A79C;
+	--right-accent-dark: #C88884;
+	
+	--left-window-inner: #461336;
+	--left-window-v: #66274C;
+	--right-window-v: #973B5D;
+	--right-window-inner: #742849;
+	--left-window-h: #9B3C4D;
+	--right-window-h: #A14C6D;
+}
+
+.building-1::before {
+		width: 100%; height: 39em;
+		background: var(--right-default-light);
+		transform: translateY(15em) rotateX(-90deg);
+	}
+
+.building-1 > div:nth-child(1) {
+    height: 8em; width: 1em;
+    background: var(--top-default-light);
+		transform: translateY(-8em) translateZ(8em);
+	}
+
+.building-1 > div:nth-child(1)::before {
+			width: 62em; height: 23em;
+    	background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 1.5em/2em 3.5em repeat-y, var(--left-default-light);
+			clip-path: polygon(0em 0em, 62em 0em, 62em 23em, 23em 23em, 23em 8em, 15em 8em, 15em 0em, 7em 0em, 7em 8em, 0em 8em);
+			transform: rotateY(90deg) translateX(-15em);
+		}
+
+.building-1 > div:nth-child(1)::after {
+			width: 8em; height: 8em;
+			background: var(--left-default-light);
+			transform: translateX(1em) rotateY(-90deg);
+		}
+
+.building-1 > div:nth-child(2) {
+    height: 62em; width: 15em;
+    background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 2em/3em 2em repeat-x, var(--right-default-light);
+    transform: translate(15em, -39em) translateZ(-47em) rotateX(-90deg);
+    transform-origin: bottom left;
+	}
+
+.building-1 > div:nth-child(2)::before {
+			height: 23em; width: 15em;
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 0.75em 2em/3em 2em repeat-x, var(--right-default-light);
+			clip-path: polygon(0em 0em, 15em 0em, 15em 23em, 0em 23em, 0em 15em, 1em 15em, 1em 7em, 0em 7em);
+			transform: translate(-15em, -8em) translateZ(-23em);
+		}
+
+.building-1 > div:nth-child(2)::after {
+			height: 70em; width: 23em;
+			background: linear-gradient(var(--left-default-dark), var(--left-default-dark)) 1.5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 8.5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 12em 10em/1.5em 2em no-repeat, var(--left-default-light);
+			clip-path: polygon(0em 8em, 0em 70em, 23em 70em, 23em 0em, 22em 0em, 22em 1em, 21em 1em, 21em 2em, 20em 2em, 20em 3em, 19em 3em, 19em 4em, 18em 4em, 18em 5em, 17em 5em, 17em 6em, 16em 6em, 16em 7em, 15em 7em, 15em 8em);
+			transform: translateY(-8em) rotateY(90deg);
+		}
+
+.building-1 > div:nth-child(3) {
+		height: 8em; width: 95em;
+    background: linear-gradient(var(--top-default-dark), var(--top-default-dark)) 0em 1em/95em 0.3em no-repeat, linear-gradient(var(--top-default-dark), var(--top-default-dark)) 0em 7em/95em 0.3em no-repeat, var(--top-default-light);
+		transform: translateY(-8em) translateZ(23em);
+	}
+
+.building-1 > div:nth-child(3)::before {
+			height: 15em; width: 15em;
+			background: var(--top-default-light);
+			clip-path: polygon(0em 0em, 8em 0em, 8em 4em, 9.2em 5.9em, 11.3em 7em, 15em 7em, 15em 15em, 0em 15em);
+			transform: translate(15em, 16em) translateZ(-8em);
+		}
+
+.building-1 > div:nth-child(3)::after {
+			height: 30em; width: 72em;
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 2em/3em 2em repeat-x, var(--right-default-light);
+			clip-path: polygon(0em 0em, 72em 0em, 72em 28em, 46em 28em, 46em 18em, 45em 15em, 44em 13em, 43em 11.7em, 42em 10.6em, 41em 9.8em, 40em 9.1em, 39em 8.6em, 37em 8em, 35em 8em, 31em 8.3em, 30em 8.5em, 29em 8.9em, 27em 10.1em, 26em 11.1em, 25em 12.3em, 24em 13.7em, 23.4em 15.5em, 23em 30em, 0em 30em);
+			transform: translate(23em, 8em) rotateX(-90deg);
+		}
+
+.building-1 > div:nth-child(4) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translateX(15em) translateZ(23em);
+	}
+
+.building-1 > div:nth-child(4)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(4)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(5) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+		transform: translate(15em, 3em) translateZ(20em);
+	}
+
+.building-1 > div:nth-child(5)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(5)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(6) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(15em, 6em) translateZ(17em);
+	}
+
+.building-1 > div:nth-child(6)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(6)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: rotateX(90deg);
+		}
+
+.building-1 > div:nth-child(7) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(15em, 1em) translateZ(22em) rotateX(90deg);
+	}
+
+.building-1 > div:nth-child(7)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(7)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(8) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(15em, 4em) translateZ(19em) rotateX(90deg);
+	}
+
+.building-1 > div:nth-child(8)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(8)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-4em) translateZ(-4em);
+		}
+
+.building-1 > div:nth-child(9) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+		transform: translate(15em, 7em) translateZ(16em) rotateX(90deg);
+	}
+
+.building-1 > div:nth-child(9)::before {
+			width: 6em; height: 3em;
+			background: var(--right-default-light);
+			transform: translate(-14em, 7em) translateZ(8em);
+		}
+
+.building-1 > div:nth-child(9)::after {
+			width: 6em; height: 3em;
+			background: var(--left-default-light);
+			transform: translate(-14em, 7em) translateZ(8em) rotateY(-90deg);
+		}
+
+.building-1 > div:nth-child(10) {
+		width: 6em; height: 6em;
+    background: var(--top-default-light);
+    transform: translate(1em, -7em) translateZ(26em);
+	}
+
+.building-1 > div:nth-child(10)::before {
+			width: 22.9em; height: 24em;
+			background: var(--top-default-light);
+			clip-path: polygon(0em 0em, 23em 0em, 23em 16.3em, 12em 16.3em, 12em 16.3em, 12em 16.3em, 13em 15.6em, 14em 15em, 15em 13em, 15em 11em, 14em 9.3em, 13em 8.6em, 12em 7.8em, 0em 7.8em);
+			transform: translate(67.9em, 7.3em) translateZ(-25.9em);
+
+		}
+
+.building-1 > div:nth-child(10)::after {
+			width: 1em; height: 7.7em;
+			background: var(--top-default-light);
+			transform: translate(82em, 15.4em) translateZ(-35em);
+		}
+
+.building-1 > div:nth-child(11) {
+		width: 1em; height: 7.7em;
+    background: var(--top-default-light);
+    transform: translate(82em, 8.4em) translateZ(-10em);
+	}
+
+.building-1 > div:nth-child(11)::before {
+			width: 1em; height: 7.7em;
+			background: var(--top-default-light);
+			transform: translateX(-1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(11)::after {
+			width: 1em; height: 7.7em;
+			background: var(--top-default-light);
+			transform: translateX(-2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(12) {
+		width: 1em; height: 7.7em;
+    background: var(--top-default-light);
+    transform: translate(79em, 8.4em) translateZ(-13em);
+	}
+
+.building-1 > div:nth-child(12)::before {
+			width: 1em; height: 7.7em;
+			background: var(--top-default-light);
+			transform: translateX(-1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(12)::after {
+			width: 1em; height: 7.7em;
+			background: var(--top-default-light);
+			transform: translateX(-2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(13) {
+		width: 1em; height: 7.7em;
+    background: var(--left-default-light);
+    transform: translate(82em, 8.3em) translateZ(-10.0em) rotateY(90deg);
+	}
+
+.building-1 > div:nth-child(13)::before {
+			width: 1em; height: 7.7em;
+			background: var(--left-default-light);
+			transform: translateX(-1em) translateZ(1em);
+		}
+
+.building-1 > div:nth-child(13)::after {
+			width: 1em; height: 7.7em;
+			background: var(--left-default-light);
+			transform: translateX(-2em) translateZ(2em);
+		}
+
+.building-1 > div:nth-child(14) {
+		width: 1em; height: 7.7em;
+    background: var(--left-default-light);
+    transform: translate(81em, 8.3em) translateZ(-12em) rotateY(-90deg);
+	}
+
+.building-1 > div:nth-child(14)::before {
+			width: 1em; height: 7.7em;
+			background: var(--left-default-light);
+			transform: translateX(-1em) translateZ(1em);
+		}
+
+.building-1 > div:nth-child(14)::after {
+			width: 1em; height: 7.7em;
+			background: var(--left-default-light);
+			transform: translateX(-2em) translateZ(2em);
+		}
+
+.building-1 > div:nth-child(15) {
+		width: 1em; height: 7.7em;
+    background: var(--left-default-light);
+    transform: translate(78em, 8.3em) translateZ(-15em) rotateY(-90deg);
+	}
+
+.building-1 > div:nth-child(15)::before {
+			width: 1em; height: 8em;
+			background: var(--left-default-light);
+			transform: translateX(-1em) translateZ(1em);
+		}
+
+.building-1 > div:nth-child(15)::after {
+			width: 80em; height: 56em;
+			background: var(--left-default-light);
+			clip-path: polygon(0em 0em, 80em 0em, 80em 8em, 75em 8em, 67em 8.2em, 67em 16.1em, 51em 16.1em, 51em 24.1em, 50em 24.1em, 50em 25.1em, 49em 25.1em, 49em 26.1em, 48em 26.1em, 48em 27.1em, 47em 27.1em, 47em 28.1em, 46em 28.1em, 46em 29.1em, 45em 29.1em, 45em 30.1em, 44em 30.1em, 44em 31.1em, 43em 31.1em, 43em 32.1em, 42em 32.1em, 42em 33em, 41em 33em, 41em 34em, 40em 34em, 40em 35em, 39em 35em, 39em 36em, 38em 36em, 38em 37em, 37em 37em, 37em 38em, 36em 38em, 36em 39em, 35em 39em, 35em 55.1em, 0em 55.1em);
+			transform: translate(-52em, -16.4em) translateZ(9em);
+		}
+
+.building-1 > div:nth-child(16) {
+		width: 8em; height: 8em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 5px var(--top-default-light), inset 0 0 0 7px var(--top-default-dark);
+    transform: translate(69em, 8em) translateZ(-16em);
+	}
+
+.building-1 > div:nth-child(16)::before {
+			width: 16em; height: 7.7em;
+			background: var(--top-default-light);
+			transform: translateX(14.4em) translateY(1em) translateZ(8.5em);
+		}
+
+.building-1 > div:nth-child(16)::after {
+			width: 22em; height: 19.5em;
+			background: linear-gradient(90deg, var(--right-default-light) 50%, var(--left-default-light));
+			transform: translateY(0em) translateZ(-3.5em) rotateX(90deg);
+		}
+
+.building-1 > div:nth-child(17) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(69em, 16em) translateZ(-17em);
+	}
+
+.building-1 > div:nth-child(17)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(17)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(18) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(69em, 19em) translateZ(-20em);
+	}
+
+.building-1 > div:nth-child(18)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(18)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(19) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(69em, 22em) translateZ(-23em);
+	}
+
+.building-1 > div:nth-child(19)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(19)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(20) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(69em, 25em) translateZ(-26em);
+	}
+
+.building-1 > div:nth-child(20)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(20)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(21) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(69em, 28em) translateZ(-29em);
+	}
+
+.building-1 > div:nth-child(21)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(21)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(22) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(69em, 16em) translateZ(-17em) rotateX(90deg);
+	}
+
+.building-1 > div:nth-child(22)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(22)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(23) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(69em, 19em) translateZ(-20em) rotateX(90deg);
+	}
+
+.building-1 > div:nth-child(23)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(23)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(24) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(69em, 22em) translateZ(-23em) rotateX(90deg);
+	}
+
+.building-1 > div:nth-child(24)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(24)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(25) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(69em, 25em) translateZ(-26em) rotateX(90deg);
+	}
+
+.building-1 > div:nth-child(25)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(25)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(26) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(69em, 28em) translateZ(-29em) rotateX(90deg);
+	}
+
+.building-1 > div:nth-child(26)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+
+.building-1 > div:nth-child(26)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+
+.building-1 > div:nth-child(27) {
+		width: 8em; height: 16em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 5px var(--top-default-light), inset 0 0 0 7px var(--top-default-dark);
+    transform: translate(69em, 31em) translateZ(-32em);
+	}
+
+.building-1 > div:nth-child(27)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: rotateX(90deg);
+		}
+
+.building-1 > div:nth-child(27)::after {
+			width: 19.5em; height: 16em;
+			background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 16em 2.5em/2em 3em repeat-y, var(--left-default-light);
+			transform: translateX(8em) rotateY(-90deg);
+		}
+
+.building-1 > div:nth-child(28) {
+		width: 31.2em; height: 24em;
+    background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 29.4em 1.6em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 27.7em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 25.9em 1.6em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 24.2em 3em/1.7em 3em repeat-y, var(--left-default-light);
+    transform: translateX(92em) translateZ(-0.2em) rotateY(-90deg);
+	}
+
+.building-1 > div:nth-child(28)::before {
+			width: 86em; height: 47em;
+			background: var(--right-default-light);
+			clip-path: polygon(0em 0em, 0em 47em, 56em 47em, 56em 46em, 57em 46em, 57em 45em, 58em 45em, 58em 44em, 59em 44em, 59em 43em, 60em 43em, 60em 42em, 61em 42em, 61em 41em, 62em 41em, 62em 40em, 63em 40em, 63em 24em, 90em 24em, 90em 0em);
+			transform: translate(-71em, 16em) translateZ(-32em) rotateX(90deg);
+		}
+
+.building-1 > div:nth-child(28)::after {
+			width: 54.5em; height: 24em;
+			background: var(--right-default-light);
+			clip-path: polygon(0em 0em, 0em 24em, 35em 24em, 35em 16em, 54.5em 16em, 54.5em 0em);
+			transform: translate(-67em, 47em) translateZ(-1em) rotateX(90deg);
+		}
+
+.building-1 > div:nth-child(29) {
+		width: 16em; height: 16em;
+    background: conic-gradient(var(--top-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--top-default-dark) 180deg, var(--top-default-dark) 270deg, transparent 270deg) 0em 0em/4em 4em repeat, var(--top-default-light);
+    transform: translate(77em, 31em) translateZ(-12.5em);
+	}
+
+.building-1 > div:nth-child(29)::before {
+			width: 12em; height: 12em;
+			background: var(--top-default-light);
+			transform: translate(2em, 2em) translateZ(4em);
+		}
+
+.building-1 > div:nth-child(29)::after {
+			width: 4em; height: 12em;
+			background: var(--left-default-light);
+			transform: translate(2em, 2em) rotateY(-90deg);
+		}
+
+.building-1 > div:nth-child(30) {
+		width: 12em; height: 4em;
+    background: var(--right-default-light);
+    transform: translate(79em, 45em) translateZ(-12.5em) rotateX(90deg);
+	}
+
+.building-1 > div:nth-child(30)::before {
+			width: 26em; height: 1em;
+			background: var(--right-default-light);
+			transform: translate(12em, 35.5em) translateZ(20em);
+		}
+
+.building-1 > div:nth-child(30)::after {
+			width: 26em; height: 1em;
+			background: var(--left-default-light);
+			transform: translate(12em, 35.5em) translateZ(46em) rotateY(90deg);
+		}
+
+.building-1 > div:nth-child(31) {
+		width: 26em; height: 26em;
+    background: var(--top-default-light);
+    transform: translate(91em, -1em) translateZ(24em);
+	}
+
+.building-1 > div:nth-child(31)::before {
+			width: 24em; height: 7em;
+			background: var(--right-default-light);
+			transform: translate(1em, 25em) translateZ(0em) rotateX(90deg);
+		}
+
+.building-1 > div:nth-child(31)::after {
+			width: 20em; height: 6em;
+			background: var(--right-default-light);
+			transform: translate(3em, 23em) translateZ(5em) rotateX(90deg);
+		}
+
+.building-1 > div:nth-child(32) {
+		width: 24em; height: 24em;
+    background: var(--top-default-light);
+    transform: translateX(92em) translateZ(31em);
+	}
+
+.building-1 > div:nth-child(32)::before {
+			width: 24em; height: 24em;
+			background: var(--top-default-light);
+			transform: translateZ(3em);
+		}
+
+.building-1 > div:nth-child(32)::after {
+			width: 20em; height: 20em;
+			background: var(--top-default-light);
+			transform: translate(2em, 2em) translateZ(4em);
+		}
+
+.building-1 > div:nth-child(33) {
+		width: 4em; height: 20em;
+    background: var(--left-default-light);
+    transform: translate(94em, 2em) translateZ(31em) rotateY(-90deg);
+	}
+
+.building-1 > div:nth-child(33)::before {
+			width: 1em; height: 24em;
+			background: var(--left-default-light);
+			transform: translate(2em, -2em) translateZ(2em);
+		}
+
+.building-1 > div:nth-child(33)::after {
+			width: 1em; height: 24em;
+			background: var(--right-default-light);
+			transform: translate(2em, 22em) translateZ(-22em) rotateX(90deg);
+		}
+
+.building-1 > div:nth-child(34) {
+		width: 65em; height: 2em;
+    background: var(--left-default-dark);
+    transform: translate(3em, -5em) translateZ(9em) rotateY(-90deg);
+	}
+
+.building-1 > div:nth-child(34)::before {
+			width: 65em; height: 4em;
+			background: var(--left-default-light);
+			clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
+			transform: translate(1em, -1em) translateZ(1em);
+		}
+
+.building-1 > div:nth-child(34)::after {
+			width: 65em; height: 4em;
+			background: var(--right-default-light);
+			clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
+			transform: translate(1em, 3em) translateZ(1em) rotateX(-90deg);
+		}
+
+.building-1 > div:nth-child(35) {
+		width: 2em; height: 65em;
+    background: linear-gradient(180deg, var(--right-default-dark) 96%, transparent 0%);
+    transform: translate(3em, -3em) translateZ(10em) rotateX(90deg);
+	}
+
+.building-1 > div:nth-child(35)::before {
+			width: 1em; height: 65em;
+			background: var(--right-default-light);
+			transform: translateX(-1em) translateZ(2em);
+		}
+
+.building-1 > div:nth-child(35)::after {
+			width: 1em; height: 65em;
+			background: var(--left-default-light);
+			transform: translateX(2em) rotateY(90deg);
+		}
+
+.building-1 > div:nth-child(36) {
+    width: 6em; height: 6em;
+    background: var(--top-default-light);
+		transform: translate(87em, -7em) translateZ(26em);
+	}
+
+.building-1 > div:nth-child(36)::before {
+			width: 6em; height: 3em;
+			background: var(--right-default-light);
+			transform: translateY(6em) translateZ(-3em) rotateX(90deg);
+		}
+
+.building-1 > div:nth-child(36)::after {
+			width: 3em; height: 6em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+
+.building-1 > div:nth-child(37) {
+    width: 27em; height: 2em;
+    background: var(--left-default-dark);
+		transform: translate(89em, -5em) translateZ(26em) rotateY(-90deg);
+	}
+
+.building-1 > div:nth-child(37)::before {
+			width: 27em; height: 4em;
+			background: var(--left-default-light);
+			clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
+			transform: translateY(-1em) translateZ(1em);
+		}
+
+.building-1 > div:nth-child(37)::after {
+			width: 27em; height: 4em;
+			background: var(--right-default-light);
+			clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
+			transform: translateY(3em) translateZ(1em) rotateX(-90deg);
+		}
+
+.building-1 > div:nth-child(38) {
+    width: 2em; height: 27em;
+    background: var(--right-default-dark);
+    transform: translate(89em, -3em) translateZ(26em) rotateX(90deg);
+	}
+
+.building-1 > div:nth-child(38)::before {
+			width: 1em; height: 27em;
+			background: var(--right-default-light);
+			transform: translateX(-1em) translateZ(2em);
+		}
+
+.building-1 > div:nth-child(38)::after {
+			width: 1em; height: 27em;
+			background: var(--left-default-light);
+			transform: translateX(2em) rotateY(90deg);
+		}
+
+.building-1 > div:nth-child(39) {
+    width: 6em; height: 6em;
+    background: var(--top-default-light);
+		transform: translate(87em, -7em) translateZ(57em);
+	}
+
+.building-1 > div:nth-child(39)::before {
+			width: 6em; height: 3em;
+			background: var(--right-default-light);
+			transform: translateY(6em) translateZ(-3em) rotateX(90deg);
+		}
+
+.building-1 > div:nth-child(39)::after {
+			width: 3em; height: 6em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+
+.building-1 > div:nth-child(40) {
+		width: 6em; height: 40em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 3px var(--top-default-light), inset 0 0 0 5px var(--top-default-dark);
+    transform: translate(87em, -41em) translateZ(60em);
+	}
+
+.building-1 > div:nth-child(40)::before {
+			width: 6em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateY(40em) translateZ(-2em) rotateX(90deg);
+		}
+
+.building-1 > div:nth-child(40)::after {
+			width: 2em; height: 40em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+
+.building-1 > div:nth-child(41) {
+		width: 6em; height: 6em;
+    background: var(--top-default-light);
+    transform: translate(79em, -85em) translateZ(19em);
+	}
+
+.building-1 > div:nth-child(41)::before {
+			width: 6em; height: 3em;
+			background: var(--right-default-light);
+			transform: translateY(6em) translateZ(-3em) rotateX(90deg);
+		}
+
+.building-1 > div:nth-child(41)::after {
+			width: 3em; height: 6em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+
+.building-1 > div:nth-child(42) {
+		width: 53em; height: 6em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 3px var(--top-default-light), inset 0 0 0 5px var(--top-default-dark);
+    transform: translate(79em, -85em) translateZ(22em);
+	}
+
+.building-1 > div:nth-child(42)::before {
+			width: 53em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateY(6em) translateZ(-2em) rotateX(90deg);
+		}
+
+.building-1 > div:nth-child(42)::after {
+			width: 2em; height: 6em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+
+.building-1 > div:nth-child(43) {
+    transform: translateY(15em) translateZ(55em);
+	}
+
+.building-1 > div:nth-child(43)::before {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(18em, 8em) translateZ(-50em) rotateX(-90deg);
+		}
+
+.building-1 > div:nth-child(43)::after {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(26em, 8em) translateZ(-50em) rotateX(-90deg);
+		}
+
+.building-1 > div:nth-child(44) {
+		width: 2em; height: 6em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+		border-right: 3px solid var(--right-window-v);
+		border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+    transform: translate(11em, 15em) translateZ(-6em) rotateX(-90deg);
+	}
+
+.building-1 > div:nth-child(44)::before {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateX(-8em);
+		}
+
+.building-1 > div:nth-child(44)::after {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(69em, 20em) translateZ(32em);
+		}
+
+.building-1 > div:nth-child(45) {
+		width: 2em; height: 7em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+		border-right: 3px solid var(--right-window-v);
+		border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+    transform: translate(88em, 47em) translateZ(-27em) rotateX(-90deg);
+	}
+
+.building-1 > div:nth-child(45)::before {
+			width: 2.5em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(30em, -35em) translateZ(-31em);
+		}
+
+.building-1 > div:nth-child(45)::after {
+			width: 2.5em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(15em, -35em) translateZ(-31em);
+		}
+
+.building-1 > div:nth-child(46) {
+		width: 2.5em; height: 7em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+		border-right: 3px solid var(--right-window-v);
+		border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+    transform: translate(110.5em, 16em) translateZ(8em) rotateX(-90deg);
+	}
+
+.building-1 > div:nth-child(46)::before {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--left-window-v);
+			border-left: 3px solid #A42037;
+			border-bottom: 3px solid var(--left-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(-111em, 14em) translateZ(-6em) rotateY(-90deg);
+		}
+
+.building-1 > div:nth-child(46)::after {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--left-window-v);
+			border-left: 3px solid #A42037;
+			border-bottom: 3px solid var(--left-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(-111em, 14em) translateZ(-14em) rotateY(-90deg);
+		}
+
+.building-1 > div:nth-child(47) {
+		width: 6em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+    border-top: 3px solid var(--left-window-v);
+    border-right: 3px solid var(--left-window-h);
+    border-radius: 2em 0 0 2em;
+    transform: translate(68em, 34em) translateZ(-37em) rotateY(90deg);
+	}
+
+.building-1 > div:nth-child(47)::before {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-right: 3px solid var(--left-window-h);
+			border-radius: 2em 0 0 2em;
+			transform: translateY(6em);
+		}
+
+.building-1 > div:nth-child(47)::after {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-right: 3px solid var(--left-window-h);
+			border-radius: 2em 0 0 2em;
+			transform: translateY(-8em);
+		}
+
+.building-1 > div:nth-child(48) {
+		width: 7em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+    border-top: 3px solid var(--left-window-v);
+    border-right: 3px solid var(--left-window-h);
+    border-radius: 2em 0 0 2em;
+    transform: translate(91em, 14em) translateZ(17em) rotateY(90deg);
+	}
+
+.building-1 > div:nth-child(48)::before {
+			width: 7em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-right: 3px solid var(--left-window-h);
+			border-radius: 2em 0 0 2em;
+			transform: translateY(-8em);
+		}
+
+.building-1 > div:nth-child(48)::after {
+			border-top: 5em solid transparent;
+			border-bottom: 5em solid transparent;
+			border-right: 10em solid var(--left-accent-light);
+			transform: translate(17.1em, 19.2em) translateZ(-5.9em) rotateY(30deg);
+		}
+
+.building-1 > div:nth-child(49) {
+		width: 18em; height: 18em;
+    background: var(--top-accent-light);
+    transform: translate(95em, 3em) translateZ(36em);
+	}
+
+.building-1 > div:nth-child(49)::before {
+			border-right: 5em solid transparent;
+			border-left: 5em solid transparent;
+			border-bottom: 10em solid var(--right-accent-light);
+			transform: translate(-15em, 36em) translateZ(-36em) rotateX(-60deg);
+		}
+
+.building-1 > div:nth-child(49)::after {
+			width: 1em; height: 18em;
+			background: var(--left-accent-light);
+			transform: rotateY(90deg);
+		}
+
+.building-1 > div:nth-child(50) {
+		width: 15em; height: 15em;
+    transform: translate(96em, 4em) translateZ(36em);
+	}
+
+.building-1 > div:nth-child(50)::before {
+			border-bottom: 8em solid transparent;
+			border-top: 8em solid transparent;
+			border-left: 16em solid var(--left-accent-light);
+			transform: rotateY(-60deg);
+		}
+
+.building-1 > div:nth-child(50)::after {
+			border-right: 8em solid transparent;
+			border-left: 8em solid transparent;
+			border-top: 16em solid var(--right-accent-light);
+			transform: translate(0em, 16em) rotateX(120deg);
+		}
+
+.building-1 > div:nth-child(51) {
+		width: 18em; height: 1em;
+    background: var(--right-accent-light);
+    transform: translate(95em, 21em) translateZ(36em) rotateX(-90deg);
+	}
+
+.building-1 > div:nth-child(52) {
+		width: 3em; height: 3em;
+    transform: translate(103em, 10em) translateZ(53em);
+	}
+
+.building-1 > div:nth-child(52)::before {
+			border-left: 1.5em solid transparent;
+			border-right: 1.5em solid transparent;
+			border-top: 3em solid var(--left-accent-light);
+			transform: rotateZ(90deg) rotateX(-240deg);
+		}
+
+.building-1 > div:nth-child(52)::after {
+			border-left: 1.5em solid transparent;
+			border-right: 1.5em solid transparent;
+			border-top: 3em solid var(--right-accent-light);
+			transform: translateY(3em) rotateX(120deg);
+		}
+
+.building-1 > div:nth-child(52) > div:nth-child(1)::before {
+				border-left: 1.5em solid transparent;
+				border-right: 1.5em solid transparent;
+				border-top: 3em solid var(--left-accent-dark);
+				transform: rotateZ(90deg) rotateX(-120deg);
+			}
+
+.building-1 > div:nth-child(52) > div:nth-child(1)::after {
+				border-left: 1.5em solid transparent;
+				border-right: 1.5em solid transparent;
+				border-top: 3em solid var(--right-accent-dark);
+				transform: translateY(3em) rotateX(240deg);
+			}
+
+.building-1 > div:nth-child(53) {
+		width: 65em; height: 2em;
+    background: var(--left-default-dark);
+    transform: translate(85.7em, -88em) translateZ(-53em) rotateY(-90deg);
+	}
+
+.building-1 > div:nth-child(53)::before {
+			width: 65em; height: 4.4em;
+			background: var(--left-default-light);
+			clip-path: polygon(0em 0em, 0em 1.1em, 65em 1.1em, 65em 3.1em, 0em 3.1em, 0em 4.1em, 65em 4.1em, 65em 0em);
+			transform: translateY(-0.8em) translateZ(1.23em);
+		}
+
+.building-1 > div:nth-child(53)::after {
+			width: 65em; height: 4.5em;
+			background: var(--right-default-light);
+			clip-path: polygon(0em 0em, 0em 1.1em, 65em 1.1em, 65em 3.0em, 0em 3.0em, 0em 4.0em, 65em 4.1em, 65em 0em);
+    	transform: translateY(3em) translateZ(1em) rotateX(-90deg);
+		}
+
+.building-1 > div:nth-child(54) {
+		width: 1em; height: 65em;
+    background: var(--right-default-dark);
+    transform: translate(81.7em, -80.9em) translateZ(-49em) rotateX(90deg);
+	}
+
+.building-1 > div:nth-child(54)::before {
+			width: 0.9em; height: 65em;
+			background: var(--right-default-light);
+			transform: translateX(-2em) translateZ(2em);
+		}
+
+.building-1 > div:nth-child(54)::after {
+			width: 1.1em; height: 65em;
+			background: var(--left-default-light);
+			transform: translateX(1em) rotateY(90deg);
+		}
+
+.building-1 > div:nth-child(55) {
+		width: 6em; height: 6em;
+    background: var(--top-default-light);
+    transform: translate(87em, -46em) translateZ(75em);
+	}
+
+.building-1 > div:nth-child(55)::before {
+			width: 6em; height: 15em;
+			background: var(--right-default-light);
+			transform: translateY(6em) rotateX(-90deg);
+		}
+
+.building-1 > div:nth-child(55)::after {
+			width: 15em; height: 6em;
+			background: var(--left-default-light);
+			clip-path: polygon(0em 0em, 15em 0em, 15em 1em, 4em 1em, 3em 1.2em, 2em 1.7em, 1em 2.8em, 1em 3.6em, 2em 4.7em, 3em 5em, 15em 5em, 15em 6em, 0em 6em);
+			transform: rotateY(90deg);
+		}
+
+.building-1 > div:nth-child(56) {
+    width: 4em; height: 4em;
+    background: var(--top-default-light);
+		transform: translate(88em, -45em) translateZ(76em);
+	}
+
+.building-1 > div:nth-child(56)::before {
+			width: 1em; height: 4em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+
+.building-1 > div:nth-child(56)::after {
+			width: 4em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(4em) rotateX(-90deg);
+		}
+
+.building-1 > div:nth-child(57) {
+		width: 4em; height: 14em;
+    background: linear-gradient(90deg, #6C507C, #2B2258);
+		transform: translate(87em, -45em) translateZ(74em) rotateX(-90deg);
+	}
+
+.building-1 > div:nth-child(57)::before {
+			border-bottom: 1em solid transparent;
+			border-top: 1em solid transparent;
+			border-left: 2em solid var(--left-accent-light);
+			transform: translate(2em, -2em) translateZ(1em) rotateX(90deg) rotateY(-60deg);
+		}
+
+.building-1 > div:nth-child(57)::after {
+			border-right: 1em solid transparent;
+			border-left: 1em solid transparent;
+			border-top: 2em solid var(--right-accent-light);
+			transform: translate(2em, -2em) translateZ(3em) rotateX(-150deg);
+		}
+
+.building-1 > .mooving-part-1 {
+    width: 8em; height: 24em;
+    background: var(--top-accent-light);
+		box-shadow: inset 0 0 0 3px var(--top-accent-light), inset 0 0 0 5px var(--top-accent-dark);
+		transform: translate(71em, -52em) translateZ(23em);
+		animation: b1Mp1 var(--animation) linear;
+	}
+
+.building-1 > .mooving-part-1::before {
+			width: 16em; height: 24em;
+			background: linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 9em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 10.8em 1.5em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 12.6em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 14.3em 1.5em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 16.1em 3em/1.7em 3em repeat-y, var(--left-accent-light);
+			clip-path: polygon(0em 0em, 0em 24em, 8em 24em, 8em 0em, 9em 0em, 9em 24em, 17em 24em, 17em 0em);
+			transform: rotateY(90deg);
+		}
+
+.building-1 > .mooving-part-1::after {
+			width: 8em; height: 24em;
+			background: var(--top-accent-dark);
+			transform: translateZ(-9em);
+		}
+
+.building-1 > .mooving-part-1 > div:nth-child(1) {
+			width: 2em; height: 2em;
+			background: var(--right-accent-dark);
+			transform: translateY(7em) translateZ(-17em) rotateX(-90deg);
+		}
+
+.building-1 > .mooving-part-1 > div:nth-child(1)::before {
+				width: 24em; height: 2em;
+				background: var(--left-accent-light);
+				clip-path: polygon(0em 0em, 0em 2em, 8em 2em, 8em 0em, 9em 0em, 9em 2em, 16em 2em, 16em 0em, 17em 0em, 17em 2em, 26em 2em, 26em 0em);
+				transform: translateZ(17em) rotateY(90deg);
+			}
+
+.building-1 > .mooving-part-1 > div:nth-child(1)::after {
+				width: 2em; height: 2em;
+				background: var(--right-accent-dark);
+				transform: translateZ(8em);
+			}
+
+.building-1 > .mooving-part-1 > div:nth-child(2) {
+			width: 8em; height: 2em;
+			background: var(--right-accent-light);
+			transform: translateY(24em) translateZ(-17em) rotateX(-90deg);
+		}
+
+.building-1 > .mooving-part-1 > div:nth-child(2)::before {
+				width: 8em; height: 16em;
+				background: linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 9em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 1.5em 10.6em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 12.1em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 1.5em 13.6em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 15.1em/3em 1.5em repeat-x, var(--right-accent-light);
+				clip-path: polygon(0em 0em, 0em 8em, 8em 8em, 8em 9em, 0em 9em, 0em 16em, 8em 16em, 8em 0em);
+				transform: translateY(-17em);
+			}
+
+.building-1 > .mooving-part-1 > div:nth-child(2)::after {
+				width: 8em; height: 24em;
+				background: var(--top-accent-dark);
+				transform: rotateX(-90deg);
+			}
+
+.building-1 > .mooving-part-1 > div:nth-child(3) {
+			width: 8em; height: 4em;
+			background: var(--right-accent-light);
+			transform: translate(-1em, 6em) translateZ(-2em) rotateX(-90deg);
+			animation: b1Mp1RightPart var(--animation) ease;
+		}
+
+.building-1 > .mooving-part-1 > div:nth-child(3)::before {
+				width: 8em; height: 4em;
+				background: var(--top-accent-light);
+				transform: rotateX(-90deg);
+				animation: b1Mp1TopPart var(--animation) ease;
+			}
+
+.building-1 > .mooving-part-1 > div:nth-child(3)::after {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				border: 1em solid var(--left-accent-light);
+				background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
+				transform: rotateY(90deg);
+				animation: b1Mp1LeftPart var(--animation) ease;
+			}
+
+.building-1 > .mooving-part-1 > div:nth-child(4) {
+			width: 8em; height: 4em;
+			background: var(--right-accent-light);
+			transform: translate(-1em, 14em) translateZ(-2em) rotateX(-90deg);
+			animation: b1Mp1RightPart var(--animation) ease;
+		}
+
+.building-1 > .mooving-part-1 > div:nth-child(4)::before {
+				width: 8em; height: 4em;
+				background: var(--top-accent-light);
+				transform: rotateX(-90deg);
+				animation: b1Mp1TopPart var(--animation) ease;
+			}
+
+.building-1 > .mooving-part-1 > div:nth-child(4)::after {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				border: 1em solid var(--left-accent-light);
+				background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
+				transform: rotateY(90deg);
+				animation: b1Mp1LeftPart var(--animation) ease;
+			}
+
+.building-1 > .mooving-part-1 > div:nth-child(5) {
+			width: 8em; height: 4em;
+			background: var(--right-accent-light);
+			transform: translate(-1em, 22em) translateZ(-2em) rotateX(-90deg);
+			animation: b1Mp1RightPart var(--animation) ease;
+		}
+
+.building-1 > .mooving-part-1 > div:nth-child(5)::before {
+				width: 8em; height: 4em;
+				background: var(--top-accent-light);
+				transform: rotateX(-90deg);
+				animation: b1Mp1TopPart var(--animation) ease;
+			}
+
+.building-1 > .mooving-part-1 > div:nth-child(5)::after {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				border: 1em solid var(--left-accent-light);
+				background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
+				transform: rotateY(90deg);
+				animation: b1Mp1LeftPart var(--animation) ease;
+			}
+
+.building-1 > .mooving-part-2 {
+    width: 24em; height: 8em;
+    background: var(--top-accent-light);
+    box-shadow: inset 0 3px var(--top-accent-light), inset 0 -3px var(--top-accent-light), inset 0 4px var(--top-accent-dark), inset 0 -4px var(--top-accent-dark);
+		transform: translate(30em, 15em) translateZ(-18em);
+		animation: b1Mp2 var(--animation) linear;
+	}
+
+.building-1 > .mooving-part-2::before {
+			width: 24em; height: 62em;
+			background: linear-gradient(0deg, transparent 63%, var(--right-accent-light) 63%, var(--right-accent-light) 88%, transparent 0%), conic-gradient(var(--right-accent-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-accent-dark) 180deg, var(--right-accent-dark) 270deg, transparent 270deg) 0em 0em/3em 3em repeat, var(--right-accent-light);
+			transform: translateY(8em) rotateX(-90deg);
+		}
+
+.building-1 > .mooving-part-2 > div:nth-child(1) {
+			width: 4em; height: 1em;
+			background: var(--top-accent-light);
+			transform: translate(10em, 8em) translateZ(-6em);
+			animation: b1Mp2TopPart var(--animation) ease;
+		}
+
+.building-1 > .mooving-part-2 > div:nth-child(1)::before {
+				width: 4em; height: 1em;
+				background: var(--left-accent-light);
+				transform: rotateY(90deg);
+				animation: b1Mp2LeftPart var(--animation) ease;
+			}
+
+.building-1 > .mooving-part-2 > div:nth-child(1)::after {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				border: 1em solid var(--right-accent-light);
+				background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
+				transform: translateY(1em) rotateX(-90deg);
+				animation: b1Mp2RightPart var(--animation) ease;
+			}
+
+.building-1 > .mooving-part-2 > div:nth-child(2) {
+			width: 4em; height: 1em;
+			background: var(--top-accent-light);
+			transform: translate(10em, 8em) translateZ(-13.5em);
+			animation: b1Mp2TopPart var(--animation) ease;
+		}
+
+.building-1 > .mooving-part-2 > div:nth-child(2)::before {
+				width: 4em; height: 1em;
+				background: var(--left-accent-light);
+				transform: rotateY(90deg);
+				animation: b1Mp2LeftPart var(--animation) ease;
+			}
+
+.building-1 > .mooving-part-2 > div:nth-child(2)::after {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				border: 1em solid var(--right-accent-light);
+				background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
+				transform: translateY(1em) rotateX(-90deg);
+				animation: b1Mp2RightPart var(--animation) ease;
+			}
+
+.building-1 > .mooving-part-2 > div:nth-child(3) {
+			width: 4em; height: 1em;
+			background: var(--top-accent-light);
+			transform: translate(10em, 8em) translateZ(-21em);
+			animation: b1Mp2TopPart var(--animation) ease;
+		}
+
+.building-1 > .mooving-part-2 > div:nth-child(3)::before {
+				width: 4em; height: 1em;
+				background: var(--left-accent-light);
+				transform: rotateY(90deg);
+				animation: b1Mp2LeftPart var(--animation) ease;
+			}
+
+.building-1 > .mooving-part-2 > div:nth-child(3)::after {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				border: 1em solid var(--right-accent-light);
+				background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
+				transform: translateY(1em) rotateX(-90deg);
+				animation: b1Mp2RightPart var(--animation) ease;
+			}
+
+.building-1 > .rocks::before {
+			width: 10em; height: 10em;
+			background: linear-gradient(45deg, #42313C 50%, transparent 0%);
+			transform: translateY(-8em) translateZ(-31em) rotateX(-45deg) rotateY(-190deg);
+		}
+
+.building-1 > .rocks::after {
+			width: 10em; height: 10em;
+			background: linear-gradient(-134deg, #2E222F 51%, transparent 0%);
+			transform: translateY(-8em) translateZ(-30em) rotateX(-23deg) rotateY(-233deg) rotateZ(-14deg);
+		}
+
+.building-1 > .rocks > div:nth-child(1) {
+			width: 6em; height: 8em;
+			background: #604854;
+			transform: translateY(-2em) translateZ(-32em) rotateX(-3deg) rotateY(160deg) rotateZ(-2deg);
+		}
+
+.building-1 > .rocks > div:nth-child(1)::before {
+				width: 7em; height: 9em;
+				background: linear-gradient(195deg, transparent 19%, #553E4A 0%, #553E4A 92%, transparent 0%);
+				transform: translateX(6em) rotateY(-41deg);
+			}
+
+.building-1 > .rocks > div:nth-child(1)::after {
+				width: 11em; height: 8em;
+				background: linear-gradient(41deg, #453344 76%, transparent 0%);
+				transform: translateY(8em) rotateX(76deg);
+			}
+
+.building-1 > .rocks > div:nth-child(2) {
+			width: 7em; height: 7em;
+			background: linear-gradient(215deg, #473444 70%, transparent 0%);
+			transform: translate(-7em, 10em) translateZ(-32em) rotateX(-20deg) rotateZ(10deg);
+		}
+
+.building-1 > .rocks > div:nth-child(2)::before {
+				width: 10em; height: 6em;
+				background: linear-gradient(195deg, #3B2735 70%, transparent 0%);
+				transform: rotateY(90deg);
+			}
+
+.building-1 > .rocks > div:nth-child(2)::after {
+				width: 7.7em; height: 10em;
+				background: linear-gradient(7deg, #2C2230 91%, transparent 0%);
+				transform: translateY(3.4em) rotateX(-75deg) rotateY(-27deg);
+			}
+
+.building-1 > .rocks > div:nth-child(3) {
+			width: 19em; height: 14em;
+			background: linear-gradient(145deg, #44313C 46%, transparent 0%);
+			transform: translate(15em, 15em) translateZ(-38em) rotateX(-47deg) rotateY(180deg);
+		}
+
+.building-1 > .rocks > div:nth-child(3)::before {
+				width: 6em; height: 19em;
+				background: linear-gradient(113deg, transparent 7%, #684D5A 8%, #684D5A 55%, transparent 0%);
+				transform: translate(-40em, 10em) translateZ(-2em) rotateX(-46deg);
+			}
+
+.building-1 > .rocks > div:nth-child(3)::after {
+				width: 10em; height: 7em;
+				background: linear-gradient(175deg, #623D4C 50%, transparent 0%);
+				transform: translate(-34em, 10em) translateZ(-2em) rotateX(-53deg) rotateY(-70deg);
+			}
+
+.building-1 > .rocks > div:nth-child(4) {
+			width: 16.2em; height: 11em;
+			background: linear-gradient(123deg, #573F4B 70%, transparent 0%);
+			transform: translate(49em, 26em) translateZ(-44em) rotateX(-30deg) rotateY(-8deg) rotateZ(48deg);
+		}
+
+.building-1 > .rocks > div:nth-child(4)::before {
+				width: 11em; height: 13em;
+				background: linear-gradient(136deg, #3F2A31 53%, transparent 0%), linear-gradient(141deg, #3F2A31 57%, transparent 0%);
+				transform: translateX(16.2em) rotateX(-20deg) rotateY(-60deg) rotateZ(52deg);
+			}
+
+.building-1 > .rocks > div:nth-child(4)::after {
+				width: 4em; height: 17em;
+				background: linear-gradient(78deg, transparent 31%, #5A4551 31%, #5A4551 44%, transparent 0%), linear-gradient(72deg, transparent 23%, #5A4551 23%, #5A4551 38%, transparent 0%);
+				transform: translate(19em, 11em) translateZ(11em) rotateY(40deg) rotateZ(58deg);
+			}
+
+.building-1 > .rocks > div:nth-child(5) {
+			width: 5em; height: 9em;
+			background: linear-gradient(143deg, #4F3945 57%, transparent 0%) 0em 6em / 5em 3em no-repeat, linear-gradient(125deg, #4F3945 30%, transparent 0%), linear-gradient(76deg, #4F3945 65%, transparent 0%) 0em 0em / 6em 6em no-repeat;
+			transform: translate(46em, 55.5em) translateZ(-39em) rotateX(-62deg) rotateY(-20deg) rotateZ(86deg);
+		}
+
+.building-1 > .rocks > div:nth-child(6) {
+			width: 35em; height: 34em;
+			background: #3d2f36;
+			transform: translate(20em, 23em) translateZ(-47em) rotateX(-90deg);
+		}
+.building-2 {
+	width: 15em; height: 15em;
+	background: var(--top-default-light);
+	transform: translate(15em, -78em) rotateX(55deg) rotateZ(-45deg);
+	transform-style: preserve-3d;
+	animation: secondBuilding var(--animation);
+
+	--left-default-light: #F94B68;
+	--left-default-dark: #E23A53;
+	--left-accent-light: #FFD4A2;
+	--left-accent-dark: #F1C097;
+
+	--top-default-light: #FE817C;
+	--top-default-dark: #FF6D68;
+	--top-accent-light: #ffefdc;
+	--top-accent-dark: #f9d1c1;
+	
+	--right-default-light: #AC2F5A;
+	--right-default-dark: #9E1945;
+	--right-accent-light: #C18D90;
+	--right-accent-dark: #B57578;
+
+	--left-window-inner: #6F082D;
+	--left-window-v: #BF3B5B;
+	--left-window-h: #D0556E;
+	
+	--right-window-inner: #720A30;
+	--right-window-v: #9B294A;
+	--right-window-h: #B64F71;
+}
+.building-2::before {
+		width: 100%; height: 19em;
+		background: var(--right-default-light);
+    transform: translateY(15em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
+	}
+.building-2::after {
+		width: 330em; height: 301em;
+    background: radial-gradient(#a7a2a7, transparent 73%) 128em 133em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 128em 270em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 8em 150em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 38em 230em/60em 16em no-repeat, radial-gradient(#ada6ad, transparent 73%) 138em 210em/80em 22em no-repeat, linear-gradient(26deg, #3D2E36 40%, #3D2E36 100%) 248em 0em/58em 70em no-repeat, linear-gradient(26deg, #3D2E36 40%, #3D2E36 100%) 0em 0em/160em 140em no-repeat, linear-gradient(26deg, #979298 40%, #c2b0b2 100%);
+    transform: translate(142em, -150em) translateZ(-160em) rotateX(90deg) rotateY(90deg) rotateZ(0deg);
+}
+.building-2 > div:nth-child(1) {
+		width: 19em; height: 15em;
+		background: var(--left-default-light);
+    transform: rotateY(90deg);
+	}
+.building-2 > div:nth-child(1)::before {
+			width: 46em; height: 7em;
+			background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 0.8em/2em 3.5em repeat-y, var(--left-default-light);
+			transform: translate(-46em, 8em) translateZ(15em);
+		}
+.building-2 > div:nth-child(1)::after {
+			width: 62em; height: 54em;
+			background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 1.4em/2em 3.5em repeat-y, var(--left-default-light);
+			clip-path: polygon(0em 0em, 62em 0em, 62em 33em, 9em 33em, 9em 38em, 62em 38em, 62em 54em, 0em 54em);
+			transform: translate(-68em, -24em) translateZ(31em);
+		}
+.building-2 > div:nth-child(2) {
+		width: 25em; height: 7em;
+		background: var(--top-default-light);
+    box-shadow: inset -10.6em 0em var(--top-default-light), inset 0em 0em 0em 1.1em var(--top-default-light), inset 0em 0em 0em 1.5em var(--top-default-dark), inset -11em 0em var(--top-default-dark);
+    transform: translate(15em, 8em) translateZ(46em);
+	}
+.building-2 > div:nth-child(2)::before {
+			width: 16em; height: 65em;
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 1.4em/3em 2em repeat-x, var(--right-default-light);
+			transform: translateY(7em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(2)::after {
+			width: 8em; height: 54em;
+			background: var(--top-default-light);
+			transform: translate(16em, -32em) translateZ(22em);
+		}
+.building-2 > div:nth-child(3) {
+		width: 8em; height: 53.4em;
+    background: var(--right-default-light);
+    transform: translate(31em, 30em) translateZ(68em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(3)::before {
+			width: 15em; height: 48em;
+			background: conic-gradient(var(--right-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-default-dark) 180deg, var(--right-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--right-default-light);
+			box-shadow: inset 0 16em var(--right-default-light), inset 0 -15.5em var(--right-default-light);
+			clip-path: polygon(0em 0em, 3em 0em, 3em 2em, 5em 2em, 5em 0em, 10em 0em, 10em 2em, 12em 2em, 12em 0em, 15em 0em, 15em 48em, 0em 48em);
+			transform: translate(-15em, 13em) translateZ(-30em);
+		}
+.building-2 > div:nth-child(3)::after {
+			width: 15em; height: 48em;
+			background: conic-gradient(var(--left-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-default-dark) 180deg, var(--left-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--left-default-light);
+    	box-shadow: inset 0 16em var(--left-default-light), inset 0 -15.5em var(--left-default-light);
+			clip-path: polygon(0em 0em, 3em 0em, 3em 2em, 5em 2em, 5em 0em, 10em 0em, 10em 2em, 12em 2em, 12em 0em, 15em 0em, 15em 48em, 0em 48em);
+			transform: translate(-15em, 13em) translateZ(-30em) rotateY(90deg);
+		}
+.building-2 > div:nth-child(4) {
+		width: 15em; height: 15em;
+    background: var(--top-default-light);
+    transform: translate(16em, -15em) translateZ(53em);
+	}
+.building-2 > div:nth-child(4)::before {
+			width: 15em; height: 15em;
+			background: var(--top-default-light);
+			clip-path: polygon(3em 0em, 15em 0em, 15em 15em, 0em 15em, 0em 0em, 3em 0em, 3em 1em, 1em 1em, 1em 3em, 0em 3em, 0em 5em, 1em 5em, 1em 10em, 0em 10em, 0em 12em, 1em 12em, 1em 14em, 3em 14em, 3em 15em, 5em 15em, 5em 14em, 10em 14em, 10em 15em, 12em 15em, 12em 14em, 14em 14em, 14em 12em, 15em 12em, 15em 10em, 14em 10em, 14em 5em, 15em 5em, 15em 3em, 14em 3em, 14em 1em, 12em 1em, 12em 0em, 10em 0em, 10em 1em, 5em 1em, 5em 0em);
+			transform: translateZ(2em);
+		}
+.building-2 > div:nth-child(4)::after {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateY(3em) rotateX(90deg);
+		}
+.building-2 > div:nth-child(5) {
+		width: 1em; height: 2em;
+    background: var(--right-default-light);
+    box-shadow: 14em 0em var(--right-default-light);
+    transform: translate(15em, -4em) translateZ(54em) rotateX(90deg);
+	}
+.building-2 > div:nth-child(5)::before {
+			width: 1em; height: 2em;
+			background: var(--left-default-light);
+			box-shadow: -14em 0em var(--left-default-light);
+			transform: translateX(5em) translateZ(-4em) rotateY(90deg);
+		}
+.building-2 > div:nth-child(5)::after {
+			width: 1em; height: 2em;
+			background: var(--left-default-light);
+			transform: translateX(12em) translateZ(-4em) rotateY(90deg);
+		}
+.building-2 > div:nth-child(6) {
+		width: 13em; height: 13em;
+		transform: translate(17em, -14em) translateZ(53em);
+	}
+.building-2 > div:nth-child(6)::before {
+			width: 13.5em; height: 13em;
+			background: var(--top-accent-light);
+			clip-path: polygon(0em 0em, 13.5em 6.5em, 0em 13em);
+			transform: rotateY(-61deg);
+		}
+.building-2 > div:nth-child(6)::after {
+			bottom: 0;
+			height: 13.5em; width: 13em;
+			background: var(--top-accent-dark);
+			clip-path: polygon(0em 13.5em, 6.5em 0em, 13em 13.5em);
+			transform-origin: bottom center;
+			transform: rotateX(-61deg);
+		}
+.building-2 > div:nth-child(7) {
+		width: 2em; height: 6em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+    border-right: 3px solid var(--right-window-v);
+    border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+    transform: translate(3em, 15em) translateZ(-4em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(7)::before {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateX(7em);
+		}
+.building-2 > div:nth-child(7)::after {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-left: 3px solid var(--left-window-v);
+			border-bottom: 3px solid var(--left-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateX(-3em) translateZ(-5em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(8) {
+		width: 6em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+		border-left: 3px solid var(--left-window-h);
+		border-top: 3px solid var(--left-window-v);
+    border-radius: 0 2em 2em 0;
+    transform: translateY(2em) translateZ(-11em) rotateY(-90deg);
+	}
+.building-2 > div:nth-child(8)::before {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translate(52em, -9em) translateZ(-16em);
+		}
+.building-2 > div:nth-child(8)::after {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translate(52em, -16em) translateZ(-16em);
+		}
+.building-2 > div:nth-child(9) {
+		width: 2em; height: 6em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+    border-right: 3px solid var(--right-window-v);
+    border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+		transform: translateX(19em) translateZ(48em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(9)::before {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateX(7em);
+		}
+.building-2 > div:nth-child(9)::after {
+			width: 3em; height: 2em;
+			background: var(--right-default-light);
+			box-shadow: 7em 0em var(--right-default-light), 2em 0em var(--right-default-light);
+			transform: translate(11em, -7em) translateZ(-10em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(10) {
+		width: 6em; height: 13em;
+    background: linear-gradient(90deg, #B83C63 10%, #792249 10%, #541538 100%);
+    transform: translate(31em, 9em) translateZ(59em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(10)::before {
+			width: 26em; height: 30em;
+			background: var(--top-default-light);
+			clip-path: polygon(0em 0em, 15em 0em, 15em 16em, 26em 16em, 26em 19em, 15em 30em, 8em 30em, 8em 7em, 0em 7em);
+			transform: translateY(44em) translateZ(21em) rotateX(90deg);
+		}
+.building-2 > div:nth-child(10)::after {
+			width: 7em; height: 25em;
+			background: var(--right-default-light);
+			transform: translate(8em, 44em) translateZ(51em);
+		}
+.building-2 > div:nth-child(11) {
+		width: 7em; height: 20em;
+    background: var(--right-default-light);
+    transform: translate(32em, 37em) translateZ(15em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(11)::before {
+			width: 23em; height: 25em;
+			background: var(--left-default-light);
+			transform: translateX(7em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(11)::after {
+			width: 45em; height: 61em;
+			background: var(--left-default-light);
+			clip-path: polygon(0em 0em, 8em 0em, 8em 1em, 9em 1em, 9em 2em, 10em 2em, 10em 3em, 11em 3em, 11em 4em, 12em 4em, 12em 5em, 13em 5em, 13em 6em, 14em 6em, 14em 7em, 23em 7em, 23em 8em, 24em 8em, 24em 9em, 25em 9em, 25em 10em, 26em 10em, 26em 11em, 27em 11em, 27em 12em, 28em 12em, 28em 13em, 29em 13em, 29em 14em, 30em 14em, 30em 15em, 31em 15em, 31em 16em, 32em 16em, 32em 17em, 33em 17em, 33em 18em, 34em 18em, 34em 19em, 35em 19em, 35em 20em, 36em 20em, 36em 21em, 37em 21em, 37em 22em, 45em 28em, 45em 61em, 22em 61em, 22em 23em, 16em 23em, 16em 61em, 0em 61em);
+			transform: translate(14em, -38em) translateZ(-7em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(12) {
+		width: 11em; height: 11em;
+    transform: translate(2em, 2em);
+	}
+.building-2 > div:nth-child(12)::before {
+			width: 11em; height: 11em;
+			box-sizing: border-box;
+			border-bottom: 5.5em solid transparent;
+			border-top: 5.5em solid transparent;
+			border-left: 11em solid var(--top-accent-light);
+			transform: rotateY(-60deg);
+		}
+.building-2 > div:nth-child(12)::after {
+			width: 11em; height: 11em;
+			box-sizing: border-box;
+			border-left: 5.5em solid transparent;
+			border-right: 5.5em solid transparent;
+			border-bottom: 11em solid var(--top-accent-dark);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+.building-2 > div:nth-child(13) {
+		width: 15em; height: 15em;
+    background: var(--top-default-light);
+    transform: translate(23em, 40em) translateZ(8em);
+	}
+.building-2 > div:nth-child(13)::before {
+			width: 15em; height: 25em;
+			background: linear-gradient(180deg, transparent 24%, var(--right-default-light) 0%), conic-gradient(var(--right-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-default-dark) 180deg, var(--right-default-dark) 270deg, transparent 270deg) 1.5em 0em/3em 3em repeat, var(--right-default-light);
+			transform: translateY(15em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(13)::after {
+			width: 25em; height: 15em;
+			background: linear-gradient(90deg, transparent 24%, var(--left-default-light) 0%), conic-gradient(var(--left-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-default-dark) 180deg, var(--left-default-dark) 270deg, transparent 270deg) 1.5em 0em/3em 3em repeat, var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+.building-2 > div:nth-child(14) {
+		width: 6em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+    border-top: 3px solid var(--left-window-v);
+    border-left: 3px solid var(--left-window-h);
+    border-radius: 0 2em 2em 0;
+    transform: translate(23em, 42em) translateZ(-7em) rotateY(-90deg);
+	}
+.building-2 > div:nth-child(14)::before {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translate(-1em, 7em);
+		}
+.building-2 > div:nth-child(14)::after {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-bottom: 3px solid var(--right-window-v);
+			border-left: 3px solid var(--right-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translateY(13em) translateZ(-3em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(15) {
+		width: 13em; height: 13em;
+    transform: translate(24em, 41em) translateZ(8em);
+	}
+.building-2 > div:nth-child(15)::before {
+			border-top: 6.5em solid transparent;
+			border-bottom: 6.5em solid transparent;
+			border-left: 13em solid var(--top-accent-light);
+			transform: rotateY(-60deg);
+		}
+.building-2 > div:nth-child(15)::after {
+			border-right: 6.5em solid transparent;
+			border-left: 6.5em solid transparent;
+			border-bottom: 13em solid var(--top-accent-dark);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+.building-2 > div:nth-child(16) {
+		width: 7em; height: 8em;
+    background: var(--right-default-light);
+    transform: translate(-45em, 83em) translateZ(-50em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(16)::before {
+			width: 14em; height: 14em;
+			clip-path: polygon(0em 0em, 0em 14em, 14em 14em, 14em 7em, 7em 7em, 7em 0em);
+			background-image: linear-gradient(312deg, var(--top-default-light) 2.7em, transparent 0em) -1.5em -1.5em/7em 7em, linear-gradient(132deg, var(--top-default-light) 2.7em, transparent 0em) 1.9em 1.5em/7em 7em, linear-gradient(312deg, var(--top-default-dark) 3.4em, transparent 0em) -1em -1em/7em 7em, linear-gradient(132deg, var(--top-default-dark) 3.4em, transparent 0em) 1.4em 1em/7em 7em;
+			background-color: var(--top-default-light);
+			transform: rotateX(-90deg);
+		}
+.building-2 > div:nth-child(16)::after {
+			width: 14em; height: 8em;
+			background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+.building-2 > div:nth-child(17) {
+		width: 6em; height: 6em;
+    transform: translate(-30em, 69em) translateZ(-35em);
+	}
+.building-2 > div:nth-child(17)::before {
+			border-top: 3em solid transparent;
+			border-bottom: 3em solid transparent;
+			border-left: 6em solid var(--left-accent-light);
+			transform: rotateY(-60deg);
+		}
+.building-2 > div:nth-child(17)::after {
+			border-right: 3em solid transparent;
+			border-left: 3em solid transparent;
+			border-bottom: 6em solid var(--right-accent-light);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+.building-2 > div:nth-child(18) {
+		width: 6em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+    border-top: 3px solid var(--left-window-v);
+    border-left: 3px solid var(--left-window-h);
+    border-radius: 0 2em 2em 0;
+    transform: translate(-31em, 71em) translateZ(-46em) rotateY(-90deg);
+    z-index: 1;
+	}
+.building-2 > div:nth-child(18)::before {
+			width: 20em; height: 8em;
+			background: var(--right-default-dark);
+			transform: translate(-5em, -27em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(18)::after {
+			width: 22em; height: 14em;
+			background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 18em 0em/2em 2em repeat-y, var(--left-default-light);
+			transform: translate(-19em, 9em) translateZ(-14em);
+		}
+.building-2 > div:nth-child(19) {
+		width: 8em; height: 16em;
+    background: var(--top-default-light);
+    box-shadow: inset 0em 7.5em 0 1.7em var(--top-default-light), inset 0em 0em 0 1.7em var(--top-default-light), inset 0em 0em 0 2em var(--top-default-dark), inset 0em 7.5em 0 2em var(--top-default-dark);
+    transform: translate(46em, 22em) translateZ(53em);
+	}
+.building-2 > div:nth-child(19)::before {
+			width: 8em; height: 9em;
+			background: var(--top-default-light);
+    	box-shadow: inset 0 0 0 1.7em var(--top-default-light), inset 0 0 0 2em var(--top-default-dark);
+			transform: translateY(22em) translateZ(-7em);
+		}
+.building-2 > div:nth-child(19)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(21em) translateZ(-6em);
+		}
+.building-2 > div:nth-child(20) {
+		width: 15.3em; height: 22em;
+    background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.2em 2em/2.5em 2em repeat-x, var(--right-default-light);
+    transform: translate(-17.3em, 95em) translateZ(-42em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(20)::before {
+			width: 15.3em; height: 14em;
+			background: var(--top-default-light);
+			transform: rotateX(-90deg);
+		}
+.building-2 > div:nth-child(20)::after {
+			width: 15em; height: 34em;
+			background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0em 1.5em/2em 2em repeat-x, var(--left-default-light);
+			transform: translate(23.3em, -15em) rotateY(90deg);
+		}
+.building-2 > div:nth-child(21) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 38em) translateZ(52em);
+	}
+.building-2 > div:nth-child(21)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(21)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-2 > div:nth-child(22) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 41em) translateZ(49em);
+	}
+.building-2 > div:nth-child(22)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(22)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateZ(1em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(23) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(46em, 38em) translateZ(53em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(23)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+.building-2 > div:nth-child(23)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+.building-2 > div:nth-child(24) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(46em, 42em) translateZ(49em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(24)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+.building-2 > div:nth-child(24)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+.building-2 > div:nth-child(25) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(46em, 53em) translateZ(46em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(25)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+.building-2 > div:nth-child(25)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+.building-2 > div:nth-child(26) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(46em, 56em) translateZ(43em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(26)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+.building-2 > div:nth-child(26)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+.building-2 > div:nth-child(27) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(46em, 59em) translateZ(40em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(27)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+.building-2 > div:nth-child(27)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+.building-2 > div:nth-child(28) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(46em, 62em) translateZ(37em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(28)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+.building-2 > div:nth-child(28)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+.building-2 > div:nth-child(29) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+		transform: translate(46em, 65em) translateZ(34em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(29)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+.building-2 > div:nth-child(29)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+.building-2 > div:nth-child(30) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 53em) translateZ(45em);
+	}
+.building-2 > div:nth-child(30)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(30)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-2 > div:nth-child(31) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 56em) translateZ(42em);
+	}
+.building-2 > div:nth-child(31)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(31)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-2 > div:nth-child(32) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 59em) translateZ(39em);
+	}
+.building-2 > div:nth-child(32)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(32)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-2 > div:nth-child(33) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 62em) translateZ(36em);
+	}
+.building-2 > div:nth-child(33)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(33)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-2 > div:nth-child(34) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 65em) translateZ(33em);
+	}
+.building-2 > div:nth-child(34)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(34)::after {
+			width: 7em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translateY(-10em) translateZ(-5em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(35) {
+		width: 7em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+		border-top: 3px solid var(--left-window-v);
+		border-left: 3px solid var(--left-window-h);
+    border-radius: 0 2em 2em 0;
+    transform: translate(46em, 41em) translateZ(27em) rotateY(-90deg);
+	}
+.building-2 > div:nth-child(35)::before {
+			width: 7em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translate(-1em, -8em);
+		}
+.building-2 > div:nth-child(35)::after {
+			width: 15em; height: 6em;
+			background: linear-gradient(0deg, #3e212f, transparent), linear-gradient(90deg, #6d324c 10%, transparent 0%) -2em 0em/6em 3em repeat-x, linear-gradient(90deg, #733a55 10%, #814364 0%) 0em 0em/1em 6em repeat-x;
+			transform: translate(-12.8em, 4.3em) translateZ(0em) rotateX(-90deg);
+			animation: b2Door1 var(--animation);
+		}
+.building-2 > div:nth-child(36) {
+		width: 19em; height: 16em;
+		background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 15em 1.8em/2em 3.5em repeat-y, var(--left-default-light);
+		transform: translate(40em, -9em) translateZ(57em) rotateY(-90deg);
+	}
+.building-2 > div:nth-child(36)::before {
+			width: 19em; height: 16em;
+			background: linear-gradient(var(--right-default-dark) 50%, transparent 0%) 15em 1.8em/2em 3.5em repeat-y, var(--right-default-light);
+			transform: translateY(16em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(36)::after {
+			width: 16em; height: 16em;
+			background: conic-gradient(var(--top-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--top-default-dark) 180deg, var(--top-default-dark) 270deg, transparent 270deg) 0em 0em/4em 4em repeat, var(--top-default-light);
+			transform: translateX(19em) rotateY(90deg);;
+		}
+.building-2 > div:nth-child(37) {
+		width: 16em; height: 12em;
+    background: var(--left-default-light);
+    transform: translate(41em, -7em) translateZ(62em) rotateY(-90deg);
+	}
+.building-2 > div:nth-child(37)::before {
+			width: 16em; height: 12em;
+			background: var(--right-default-light);
+			transform: translateY(12em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(37)::after {
+			width: 12em; height: 12em;
+			background: var(--top-default-light);
+			transform: translateX(16em) rotateY(90deg);
+		}
+.building-2 > div:nth-child(38) {
+		width: 8em; height: 8em;
+    transform: translate(43em, -5em) translateZ(78em);
+	}
+.building-2 > div:nth-child(38)::before {
+			box-sizing: border-box;
+			border-bottom: 4em solid transparent;
+			border-top: 4em solid transparent;
+			border-left: 8em solid var(--top-accent-light);
+			transform: rotateY(-60deg);
+		}
+.building-2 > div:nth-child(38)::after {
+			box-sizing: border-box;
+			border-left: 4em solid transparent;
+			border-right: 4em solid transparent;
+			border-bottom: 8em solid var(--top-accent-dark);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+.building-2 > div:nth-child(39) {
+		width: 16em; height: 8em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
+    transform: translate(39em, -24em) translateZ(75em);
+	}
+.building-2 > div:nth-child(39)::before {
+			width: 16em; height: 21em;
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.9em 1.8em/3.5em 2em repeat-x, var(--right-default-light);
+			transform: translateY(8em)rotateX(-90deg);
+		}
+.building-2 > div:nth-child(39)::after {
+			width: 38em; height: 15em;
+			background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 16.4em 2.7em/2em 3.5em repeat-y, var(--left-default-light);
+			clip-path: polygon(0em 0em, 0em 7em, 15em 7em, 15em 15em, 38em 15em, 38em 0em);
+			transform: translateY(-7em) translateZ(15em) rotateY(90deg);
+		}
+.building-2 > div:nth-child(40) {
+		width: 7em; height: 7em;
+    background: var(--top-default-light);
+    transform: translate(39em, -31em) translateZ(90em);
+	}
+.building-2 > div:nth-child(40)::before {
+			width: 7em; height: 15em;
+			background: var(--right-default-light);
+			clip-path: polygon(0em 0em, 7em 0em, 7em 15em, 6em 15em, 6em 3em, 1em 3em, 1em 15em, 0em 15em);
+			transform: translateY(7em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(40)::after {
+			width: 18em; height: 6em;
+			background: linear-gradient(0deg, #FF6081 8%, #BB3C54 8%, #852146);
+			transform: translate(6em, 1em) translateZ(-3em) rotateY(90deg);
+		}
+.building-2 > div:nth-child(41) {
+		width: 5em; height: 5em;
+    background: var(--top-default-light);
+    transform: translate(40em, -30em) translateZ(91em);
+	}
+.building-2 > div:nth-child(41)::before {
+			width: 5em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateY(5em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(41)::after {
+			width: 2em; height: 5em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+.building-2 > div:nth-child(42) {
+		width: 4em; height: 4em;
+    transform: translate(40.5em, -29.5em) translateZ(91em);
+	}
+.building-2 > div:nth-child(42)::before {
+			box-sizing: border-box;
+			border-bottom: 2em solid transparent;
+			border-top: 2em solid transparent;
+			border-left: 4em solid var(--top-accent-light);
+			transform: rotateY(-60deg);
+		}
+.building-2 > div:nth-child(42)::after {
+			box-sizing: border-box;
+			border-left: 2em solid transparent;
+			border-right: 2em solid transparent;
+			border-bottom: 4em solid var(--top-accent-dark);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+.building-2 > div:nth-child(43) {
+		width: 6em; height: 2em;
+    background: var(--left-window-inner);
+    border-top: 0.5em solid var(--left-window-v);
+    border-left: 0.5em solid var(--left-window-h);
+    border-radius: 0 2em 2em 0;
+    box-sizing: border-box;
+    transform: translate(39em, -29em) translateZ(76em) rotateY(-90deg);
+	}
+.building-2 > div:nth-child(43)::before {
+			width: 33em; height: 16em;
+			background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 13em 2.7em/2em 3.5em repeat-y, var(--left-default-light);
+			transform: translate(-37.5em, 49.5em) translateZ(-50em);
+		}
+.building-2 > div:nth-child(43)::after {
+			width: 48em; height: 16em;
+			background: linear-gradient(var(--right-default-dark) 50%, transparent 0%) 28em -0.5em/2em 3.5em repeat-y, var(--right-default-light);
+			transform: translate(-52.5em, 65.5em) translateZ(-66em) rotateX(90deg);
+		}
+.building-2 > div:nth-child(44) {
+		width: 18em; height: 18em;
+    background: var(--top-default-light);
+    transform: translate(88em, 20em) translateZ(73em);
+	}
+.building-2 > div:nth-child(44)::before {
+			width: 18em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(18em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(44)::after {
+			width: 1em; height: 18em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+.building-2 > div:nth-child(45) {
+		width: 18em; height: 18em;
+    background: var(--top-default-light);
+    transform: translate(88em, 20em) translateZ(75em);
+	}
+.building-2 > div:nth-child(45)::before {
+			width: 18em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(18em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(45)::after {
+			width: 1em; height: 18em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+.building-2 > div:nth-child(46) {
+		width: 16em; height: 16em;
+    background: var(--top-default-light);
+    transform: translate(89em, 21em) translateZ(76em);
+	}
+.building-2 > div:nth-child(46)::before {
+			width: 14em; height: 14em;
+			background: var(--top-default-light);
+			transform: translate(1em, 1em) translateZ(1em);
+		}
+.building-2 > div:nth-child(46)::after {
+			width: 1em; height: 14em;
+			background: var(--left-default-light);
+			transform: translate(1em, 1em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(47) {
+		width: 14em; height: 1em;
+    background: var(--right-default-light);
+		transform: translate(90em, 36em) translateZ(77em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(47)::before {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(2em, 7em) translateZ(1em);
+		}
+.building-2 > div:nth-child(47)::after {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(10em, 7em) translateZ(1em);
+		}
+.building-2 > div:nth-child(48) {
+		width: 6em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+    border-top: 3px solid var(--left-window-v);
+    border-left: 3px solid var(--left-window-h);
+    border-radius: 0 2em 2em 0;
+    transform: translate(89em, 32em) translateZ(64em) rotateY(-90deg);
+	}
+.building-2 > div:nth-child(48)::before {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translate(-1em, -9em);
+		}
+.building-2 > div:nth-child(48)::after {
+			width: 33em; height: 8em;
+			background: var(--right-default-light);
+			transform: translate(-72.6em, 42.2em) translateZ(43em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(49) {
+		width: 12em; height: 12em;
+    transform: translate(91em, 23em) translateZ(77em);
+	}
+.building-2 > div:nth-child(49)::before {
+			border-top: 6em solid transparent;
+			border-bottom: 6em solid transparent;
+			border-left: 12em solid var(--top-accent-light);
+			transform: rotateY(-60deg);
+		}
+.building-2 > div:nth-child(49)::after {
+			border-right: 6em solid transparent;
+			border-left: 6em solid transparent;
+			border-bottom: 12em solid var(--top-accent-dark);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+.building-2 > div:nth-child(50) {
+		width: 8em; height: 23em;
+		background: var(--top-default-light);
+    box-shadow: inset 0 0 0 1.7em var(--top-default-light), inset 0 0 0 2em var(--top-default-dark);
+    transform: translate(-31em, 38em) translateZ(-21em);
+	}
+.building-2 > div:nth-child(50)::before {
+			width: 8em; height: 29em;
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--right-default-light);
+			transform: translateY(23em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(50)::after {
+			width: 23em; height: 29em;
+			clip-path: polygon(0em 0em, 0em 29em, 7em 29em, 7em 9em, 15em 9em, 15em 29em, 23em 29em, 23em 0em);
+			background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--left-default-light);
+			transform: rotateX(-90deg) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(51) {
+		width: 8em; height: 8em;
+    background: var(--top-default-light);
+    transform: translate(-31em, 68em) translateZ(-35em);
+	}
+.building-2 > div:nth-child(51)::before {
+			width: 16em; height: 23em;
+			clip-path: polygon(8em 0em, 8em 15em, 0em 15em, 0em 23em, 16em 23em, 16em 0em);
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--right-default-light);
+			transform: translate(-8em, 8em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(51)::after {
+			width: 8em; height: 17em;
+			background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--left-default-light);
+			transform: rotateX(-90deg) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(52) {
+		width: 10em; height: 10em;
+    transform: translate(-15em, 83em) translateZ(-42em);
+	}
+.building-2 > div:nth-child(52)::before {
+			border-top: 5em solid transparent;
+			border-bottom: 5em solid transparent;
+			border-left: 10em solid var(--left-accent-light);
+			transform: rotateY(-60deg);
+		}
+.building-2 > div:nth-child(52)::after {
+			border-right: 5em solid transparent;
+			border-left: 5em solid transparent;
+			border-bottom: 10em solid var(--right-accent-light);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+.building-2 > div:nth-child(53) {
+		width: 15em; height: 15em;
+    background: var(--top-default-light);
+    transform: translate(6em, 80em) translateZ(-27em);
+	}
+.building-2 > div:nth-child(53)::before {
+			width: 15em; height: 34em;
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1em 1.5em/2.5em 2em repeat-x, var(--right-default-light);
+			transform: translateY(15em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(53)::after {
+			width: 7em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translateY(3em) translateZ(-19em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(54) {
+		width: 7em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+    border-top: 3px solid var(--left-window-v);
+    border-left: 3px solid var(--left-window-h);
+    border-radius: 0 2em 2em 0;
+    transform: translate(6em, 90em) translateZ(-46em) rotateY(-90deg);
+	}
+.building-2 > div:nth-child(54)::before {
+			width: 7em; height: 2em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-bottom: 3px solid var(--right-window-v);
+			border-left: 3px solid var(--right-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translateY(5em) translateZ(-2em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(54)::after {
+			width: 7em; height: 2em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-bottom: 3px solid var(--right-window-v);
+			border-left: 3px solid var(--right-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translateY(5em) translateZ(-8em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(55) {
+		width: 11em; height: 11em;
+    transform: translate(8em, 82em) translateZ(-27em);
+	}
+.building-2 > div:nth-child(55)::before {
+			border-top: 5.5em solid transparent;
+			border-bottom: 5.5em solid transparent;
+			border-left: 11em solid var(--left-accent-light);
+			transform: rotateY(-60deg);
+		}
+.building-2 > div:nth-child(55)::after {
+			border-right: 5.5em solid transparent;
+			border-left: 5.5em solid transparent;
+			border-bottom: 11em solid var(--right-accent-light);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+.building-2 > div:nth-child(56) {
+		width: 8em; height: 8em;
+    background: var(--top-default-light);
+    transform: translate(-9em, 109em) translateZ(-58em);
+	}
+.building-2 > div:nth-child(56)::before {
+			width: 4em; height: 8em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+.building-2 > div:nth-child(56)::after {
+			width: 8em; height: 4em;
+			background: var(--right-default-light);
+			transform: translateY(8em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(57) {
+		width: 2em; height: 3em;
+		background: var(--left-default-light);
+		box-shadow: 0em 5em var(--left-default-light), 0em 7em var(--left-default-light), 0em 12em var(--left-default-light), 0em 14em var(--left-default-light), 0em 19em var(--left-default-light);
+    transform: translate(109em, 67em) translateZ(31em) rotateY(-90deg);
+	}
+.building-2 > div:nth-child(57)::before {
+			width: 11em; height: 22em;
+			clip-path: polygon(0em 0em, 10em 0em, 11em 2em, 11em 3em, 9em 6em, 8em 8em, 8em 22em, 0em 22em);
+			background: var(--top-default-light);
+			transform: translateZ(-1em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(57)::after {
+			width: 1em; height: 3em;
+			background: var(--top-default-light);
+			box-shadow: 0em 5em var(--top-default-light), 0em 7em var(--top-default-light), 0em 12em var(--top-default-light), 0em 14em var(--top-default-light), 0em 19em var(--top-default-light);
+			transform: translateX(2em) translateZ(-1em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(58) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 89em) translateZ(30em);
+	}
+.building-2 > div:nth-child(58)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(58)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-2 > div:nth-child(59) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 92em) translateZ(27em);
+	}
+.building-2 > div:nth-child(59)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(59)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-2 > div:nth-child(60) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 95em) translateZ(24em);
+	}
+.building-2 > div:nth-child(60)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: rotateX(90deg);
+		}
+.building-2 > div:nth-child(60)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(-1em) rotateX(90deg);
+		}
+.building-2 > div:nth-child(61) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 94em) translateZ(25em) rotateX(90deg);
+	}
+.building-2 > div:nth-child(61)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+.building-2 > div:nth-child(61)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+.building-2 > div:nth-child(62) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 91em) translateZ(28em) rotateX(90deg);
+	}
+.building-2 > div:nth-child(62)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+.building-2 > div:nth-child(62)::after {
+			width: 8em; height: 3em;
+			clip-path: polygon(0em 0em, 8em 0em, 8em 3em, 7em 3em, 7em 1em, 0em 1em);
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+.building-2 > div:nth-child(63) {
+		width: 2em; height: 3em;
+    background: var(--left-default-light);
+    box-shadow: 0em 5em var(--left-default-light), 0em 7em var(--left-default-light), 0em 12em var(--left-default-light), 0em 14em var(--left-default-light), 0em 19em var(--left-default-light);
+    transform: translate(109em, 96em) translateZ(23em) rotateY(-90deg);
+	}
+.building-2 > div:nth-child(63)::before {
+			width: 8em; height: 22em;
+			background: var(--top-default-light);
+			transform: translateZ(-1em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(63)::after {
+			width: 1em; height: 3em;
+			background: var(--top-default-light);
+			box-shadow: 0em 5em var(--top-default-light), 0em 7em var(--top-default-light), 0em 12em var(--top-default-light), 0em 14em var(--top-default-light), 0em 19em var(--top-default-light);
+			transform: translateX(2em) translateZ(-1em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(64) {
+		width: 2em; height: 3em;
+    background: var(--left-default-light);
+    box-shadow: 0em 5em var(--left-default-light), 0em 7em var(--left-default-light), 0em 12em var(--left-default-light), 0em 14em var(--left-default-light), 0em 19em var(--left-default-light);
+    transform: translate(109em, 118em) rotateY(-90deg);
+	}
+.building-2 > div:nth-child(64)::before {
+			width: 8em; height: 22em;
+			background: var(--top-default-light);
+			transform: translateZ(-1em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(64)::after {
+			width: 1em; height: 3em;
+			background: var(--top-default-light);
+			box-shadow: 0em 5em var(--top-default-light), 0em 7em var(--top-default-light), 0em 12em var(--top-default-light), 0em 14em var(--top-default-light), 0em 19em var(--top-default-light);
+			transform: translateX(2em) translateZ(-1em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(65) {
+		width: 1em; height: 2em;
+    background: var(--right-default-light);
+    transform: translate(109em, 99em) translateZ(23em) rotateX(90deg);
+	}
+.building-2 > div:nth-child(65)::before {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(-7em);
+		}
+.building-2 > div:nth-child(65)::after {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(-14em);
+		}
+.building-2 > div:nth-child(66) {
+		width: 1em; height: 2em;
+    background: var(--right-default-light);
+    transform: translate(109em, 70em) translateZ(31em) rotateX(90deg);
+	}
+.building-2 > div:nth-child(66)::before {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(-7em);
+		}
+.building-2 > div:nth-child(66)::after {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(-14em);
+		}
+.building-2 > div:nth-child(67) {
+		width: 1em; height: 2em;
+    background: var(--right-default-light);
+    transform: translate(111em, 121em) translateZ(-2em) rotateX(90deg);
+	}
+.building-2 > div:nth-child(67)::before {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(-7em);
+		}
+.building-2 > div:nth-child(67)::after {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(-14em);
+		}
+.building-2 > div:nth-child(68) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 140em) translateZ(-1em);
+	}
+.building-2 > div:nth-child(68)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(68)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-2 > div:nth-child(69) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 143em) translateZ(-4em);
+	}
+.building-2 > div:nth-child(69)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(69)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-2 > div:nth-child(70) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 146em) translateZ(-7em);
+	}
+.building-2 > div:nth-child(70)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(70)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-2 > div:nth-child(71) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 149em) translateZ(-10em);
+	}
+.building-2 > div:nth-child(71)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(71)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-2 > div:nth-child(72) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 152em) translateZ(-13em);
+	}
+.building-2 > div:nth-child(72)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(72)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-2 > div:nth-child(73) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 152em) translateZ(-13em) rotateX(90deg);
+	}
+.building-2 > div:nth-child(73)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+.building-2 > div:nth-child(73)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+.building-2 > div:nth-child(74) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 155em) translateZ(-16em) rotateX(90deg);
+	}
+.building-2 > div:nth-child(74)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(4em) translateZ(4em);
+		}
+.building-2 > div:nth-child(74)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(5em) translateZ(5em);
+		}
+.building-2 > div:nth-child(75) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 149em) translateZ(-10em) rotateX(90deg);
+	}
+.building-2 > div:nth-child(75)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+.building-2 > div:nth-child(75)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+.building-2 > div:nth-child(76) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 146em) translateZ(-7em) rotateX(90deg);
+	}
+.building-2 > div:nth-child(76)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+.building-2 > div:nth-child(76)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+.building-2 > div:nth-child(77) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 143em) translateZ(-4em) rotateX(90deg);
+	}
+.building-2 > div:nth-child(77)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+.building-2 > div:nth-child(77)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+.building-2 > div:nth-child(78) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 140em) translateZ(-1em) rotateX(90deg);
+	}
+.building-2 > div:nth-child(78)::before {
+			width: 8em; height: 25em;
+			clip-path: polygon(0em 0em, 8em 0em, 8em 1em, 2em 1em, 2em 2em, 6em 2em, 6em 1em, 6em 3em, 2em 3em, 2em 4em, 6em 4em, 6em 3em, 6em 5em, 2em 5em, 2em 6em, 6em 6em, 6em 5em, 6em 7em, 2em 7em, 2em 8em, 6em 8em, 6em 7em, 6em 9em, 2em 9em, 2em 10em, 6em 10em, 6em 9em, 6em 11em, 2em 11em, 2em 12em, 6em 12em, 6em 11em, 6em 13em, 2em 13em, 2em 14em, 6em 14em, 6em 13em, 6em 15em, 2em 15em, 2em 16em, 6em 16em, 6em 15em, 6em 17em, 2em 17em, 2em 18em, 6em 18em, 6em 17em, 6em 19em, 2em 19em, 2em 20em, 6em 20em, 6em 19em, 6em 21em, 2em 21em, 2em 22em, 6em 22em, 6em 21em, 6em 23em, 6em 1em, 8em 1em, 8em 25em, 7em 25em, 7em 23em, 0em 23em);
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(22em);
+		}
+.building-2 > div:nth-child(78)::after {
+			width: 1em; height: 23em;
+			background: var(--left-default-light);
+			transform: translate(6em, 1em) translateZ(22em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(79) {
+		width: 4em; height: 2em;
+    background: var(--left-default-dark);
+    transform: translate(104em, 116em) translateZ(1em);
+	}
+.building-2 > div:nth-child(79)::before {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(2em);
+		}
+.building-2 > div:nth-child(79)::after {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(4em);
+		}
+.building-2 > div:nth-child(80) {
+		width: 4em; height: 2em;
+    background: var(--left-default-dark);
+    transform: translate(104em, 116em) translateZ(7em);
+	}
+.building-2 > div:nth-child(80)::before {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(2em);
+		}
+.building-2 > div:nth-child(80)::after {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(4em);
+		}
+.building-2 > div:nth-child(81) {
+		width: 4em; height: 2em;
+    background: var(--left-default-dark);
+    transform: translate(104em, 116em) translateZ(13em);
+	}
+.building-2 > div:nth-child(81)::before {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(2em);
+		}
+.building-2 > div:nth-child(81)::after {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(4em);
+		}
+.building-2 > div:nth-child(82) {
+		width: 4em; height: 2em;
+    background: var(--left-default-dark);
+    transform: translate(104em, 116em) translateZ(19em);
+	}
+.building-2 > div:nth-child(82)::before {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(2em);
+		}
+.building-2 > div:nth-child(82)::after {
+			width: 86em; height: 102em;
+			clip-path: polygon(47em 112em, 47em 88em, 46em 88em, 46em 87em, 45em 87em, 45em 86em, 44em 86em, 44em 85em, 43em 85em, 43em 84em, 42em 84em, 42em 83em, 41em 83em, 41em 82em, 40em 82em, 40em 81em, 39em 81em, 39em 80em, 38em 80em, 38em 79em, 37em 79em, 37em 78em, 36em 78em, 36em 77em, 35em 77em, 35em 76em, 34em 76em, 34em 75em, 33em 75em, 33em 74em, 32em 74em, 32em 73em, 31em 73em, 31em 51em, 8em 51em, 8em 29em, 7em 29em, 7em 28em, 6em 28em, 6em 27em, 5em 27em, 5em 26em, 4em 26em, 4em 25em, 3em 25em, 3em 24em, 2em 24em, 2em 23em, 1em 23em, 1em 22em, 0em 22em, 0em 0em, 86em 0em, 86em 71em, 55em 71em, 55em 94em, 86em 94em, 86em 112em);
+			background: var(--left-default-light);
+			transform: translate(-2em, -49em) translateZ(12em) rotateY(90deg);
+		}
+.building-2 > div:nth-child(83) {
+		width: 8em; height: 14em;
+    background: var(--top-default-light);
+    transform: translate(102em, 155em) translateZ(-16em);
+	}
+.building-2 > div:nth-child(83)::before {
+			width: 8em; height: 39em;
+			background: var(--right-default-light);
+			transform: translateY(14em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(83)::after {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translate(7em, -34em) translateZ(18em) rotateX(-90deg);
+		}
+.building-2 > div:nth-child(84) {
+		width: 1em; height: 2em;
+    background: var(--right-default-light);
+    transform: translate(109em, 128em) translateZ(2em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(84)::before {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(7em);
+		}
+.building-2 > div:nth-child(84)::after {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(12em);
+		}
+.building-2 > div:nth-child(85) {
+		width: 5em; height: 31em;
+    background: var(--right-default-dark);
+    transform: translate(102em, 138em) translateZ(-24em) rotateX(-90deg);
+	}
+.building-2 > div:nth-child(85)::before {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-left: 3px solid var(--left-window-v);
+			border-bottom: 3px solid var(--left-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateY(-13em) translateZ(-2em) rotateY(-90deg);
+		}
+.building-2 > div:nth-child(85)::after {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-left: 3px solid var(--left-window-v);
+			border-bottom: 3px solid var(--left-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateY(-3em) translateZ(26em) rotateY(-90deg);
+		}
+.building-2 > .mooving-part-1 {
+		width: 8em; height: 15em;
+    background: var(--top-accent-light);
+    box-shadow: inset 0 0 0 1em var(--top-accent-light), inset 0 0 0 1.2em var(--top-accent-dark);
+		animation: b2Mp1 var(--animation) linear;
+	}
+.building-2 > .mooving-part-1::before {
+			width: 70em; height: 15em;
+			background: var(--left-accent-light);
+			transform: rotateY(90deg);
+		}
+.building-2 > .mooving-part-1::after {
+			width: 8em; height: 70em;
+			background: var(--right-accent-light);
+			transform: translateY(15em)rotateX(-90deg);
+		}
+.building-2 > .mooving-part-1 > div:nth-child(1) {
+			width: 1em; height: 5em;
+			transform: translate(-1em, 5em) translateZ(-2em);
+			animation: b2Mp1TopPart var(--animation) ease;
+		}
+.building-2 > .mooving-part-1 > div:nth-child(1)::before {
+				width: 1em; height: 5em;
+				transform: translateY(5em) rotateX(-90deg);
+				animation: b2Mp1RightPart var(--animation) ease;
+			}
+.building-2 > .mooving-part-1 > div:nth-child(1)::after {
+				width: 5em; height: 5em;
+				box-sizing: border-box;
+				transform: rotateY(90deg);
+				animation: b2Mp1LeftPart var(--animation) ease;
+			}
+.building-2 > .mooving-part-1 > div:nth-child(2) {
+			width: 1em; height: 5em;
+			transform: translate(-1em, 5em) translateZ(-10em);
+			animation: b2Mp1TopPart var(--animation) ease;
+		}
+.building-2 > .mooving-part-1 > div:nth-child(2)::before {
+				width: 1em; height: 5em;
+				transform: translateY(5em) rotateX(-90deg);
+				animation: b2Mp1RightPart var(--animation) ease;
+			}
+.building-2 > .mooving-part-1 > div:nth-child(2)::after {
+				width: 5em; height: 5em;
+				box-sizing: border-box;
+				transform: rotateY(90deg);
+				animation: b2Mp1LeftPart var(--animation) ease;
+			}
+.building-2 > .mooving-part-1 > div:nth-child(3) {
+			width: 1em; height: 5em;
+			transform: translateX(-1em) translateY(5em) translateZ(-18em);
+			animation: b2Mp1TopPart var(--animation) ease;
+		}
+.building-2 > .mooving-part-1 > div:nth-child(3)::before {
+				width: 1em; height: 5em;
+				transform: translateY(5em) rotateX(-90deg);
+				animation: b2Mp1RightPart var(--animation) ease;
+			}
+.building-2 > .mooving-part-1 > div:nth-child(3)::after {
+				width: 5em; height: 5em;
+				box-sizing: border-box;
+				transform: rotateY(90deg);
+				animation: b2Mp1LeftPart var(--animation) ease;
+			}
+.building-2 > .mooving-part-2 {
+		width: 17em; height: 7em;
+    background: var(--top-accent-light);
+    box-shadow: inset 0 0 0 1em var(--top-accent-light), inset 0 0 0 1.2em var(--top-accent-dark);
+		animation: b2Mp2 var(--animation) linear;
+	}
+.building-2 > .mooving-part-2::before {
+			width: 60em; height: 7em;
+			background: linear-gradient(90deg, transparent 22.5%, var(--left-accent-light) 0%), conic-gradient(var(--left-accent-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-accent-dark) 180deg, var(--left-accent-dark) 270deg, transparent 270deg) 1.5em 0em/3em 3em repeat, var(--left-accent-light);
+			transform: rotateY(90deg);
+		}
+.building-2 > .mooving-part-2::after {
+			width: 17em; height: 60em;
+			background: linear-gradient(180deg, transparent 22.5%, var(--right-accent-light) 0%), conic-gradient(var(--right-accent-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-accent-dark) 180deg, var(--right-accent-dark) 270deg, transparent 270deg) 0em 0em/3em 3em repeat, var(--right-accent-light);
+			transform: translateY(7em) rotateX(-90deg);
+		}
+.building-2 > .mooving-part-3 {
+		width: 15em; height: 7em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
+		animation: b2Mp3 var(--animation) linear;
+	}
+.building-2 > .mooving-part-3::before {
+			width: 15em; height: 7em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+.building-2 > .mooving-part-3::after {
+			width: 15em; height: 60em;
+			background: linear-gradient(90deg, transparent 50%, var(--right-default-dark) 0%) 1.5em 1.7em/3.3em 2.1em repeat-x, var(--right-default-light);
+			clip-path: polygon(0em 0em, 15em 0em, 15em 60em, 14em 60em, 14em 9em, 8em 9em, 8em 60em, 0em 60em);
+			transform: translateY(7em) rotateX(-90deg);
+		}
+.building-2 > .mooving-part-3 > div {
+			width: 15em; height: 7em;
+			background: linear-gradient(0deg, #E75776 8%, var(--right-default-dark) 8%, #771B3E 100%);
+			transform: translateX(14em) translateZ(-7em) rotateY(90deg);
+		}
+.building-2 > .mooving-part-4 {
+		width: 8em; height: 23em;
+		background: var(--top-accent-light);
+    box-shadow: inset 0 0 0 1em var(--top-accent-light), inset 0 0 0 1.2em var(--top-accent-dark);
+		animation: b2Mp4 var(--animation) linear;
+	}
+.building-2 > .mooving-part-4::before {
+			width: 7em; height: 23em;
+			background: var(--left-accent-light);
+			transform: rotateY(90deg);
+		}
+.building-2 > .mooving-part-4::after {
+			width: 8em; height: 7em;
+			background: var(--right-accent-light);
+			transform: translateY(23em) rotateX(-90deg);
+		}
+.building-2 > .mooving-part-4 > div:nth-child(1) {
+			width: 1em; height: 5em;
+			transform: translate(-1em, 2em) translateZ(-1em);
+			animation: b2Mp4TopPart var(--animation) ease;
+		}
+.building-2 > .mooving-part-4 > div:nth-child(1)::before {
+				width: 1em; height: 5em;
+				transform: translateY(5em) rotateX(-90deg);
+				animation: b2Mp4RightPart var(--animation) ease;
+			}
+.building-2 > .mooving-part-4 > div:nth-child(1)::after {
+				width: 5em; height: 5em;
+				box-sizing: border-box;
+				transform: rotateY(90deg);
+				animation: b2Mp4LeftPart var(--animation) ease;
+			}
+.building-2 > .mooving-part-4 > div:nth-child(2) {
+			width: 1em; height: 5em;
+			transform: translate(-1em, 9em) translateZ(-1em);
+			animation: b2Mp4TopPart var(--animation) ease;
+		}
+.building-2 > .mooving-part-4 > div:nth-child(2)::before {
+				width: 1em; height: 5em;
+				transform: translateY(5em) rotateX(-90deg);
+				animation: b2Mp4RightPart var(--animation) ease;
+			}
+.building-2 > .mooving-part-4 > div:nth-child(2)::after {
+				width: 5em; height: 5em;
+				box-sizing: border-box;
+				transform: rotateY(90deg);
+				animation: b2Mp4LeftPart var(--animation) ease;
+			}
+.building-2 > .mooving-part-4 > div:nth-child(3) {
+			width: 1em; height: 5em;
+			transform: translate(-1em, 16em) translateZ(-1em);
+			animation: b2Mp4TopPart var(--animation) ease;
+		}
+.building-2 > .mooving-part-4 > div:nth-child(3)::before {
+				width: 1em; height: 5em;
+				transform: translateY(5em) rotateX(-90deg);
+				animation: b2Mp4RightPart var(--animation) ease;
+			}
+.building-2 > .mooving-part-4 > div:nth-child(3)::after {
+				width: 5em; height: 5em;
+				box-sizing: border-box;
+				transform: rotateY(90deg);
+				animation: b2Mp4LeftPart var(--animation) ease;
+			}
+.building-2 > .mooving-part-5 {
+		width: 8em; height: 16em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
+		animation: b2Mp5 var(--animation) linear;
+	}
+.building-2 > .mooving-part-5::before {
+			width: 44em; height: 31em;
+			clip-path: polygon(0em 0em, 0em 9em, 1em 9em, 1em 10em, 2em 10em, 2em 11em, 3em 11em, 3em 12em, 4em 12em, 4em 13em, 5em 13em, 5em 14em, 6em 14em, 6em 15em, 7em 15em, 7em 16em, 8em 16em, 8em 31em, 44em 31em, 44em 0em);
+			background: var(--right-default-light);
+			transform: translate(8em, -15em) translateZ(8em) rotateY(90deg);
+		}
+.building-2 > .mooving-part-5::after {
+			width: 44em; height: 31em;
+			clip-path: polygon(0em 0em, 0em 9em, 1em 9em, 1em 10em, 2em 10em, 2em 11em, 3em 11em, 3em 12em, 4em 12em, 4em 13em, 5em 13em, 5em 14em, 6em 14em, 6em 15em, 7em 15em, 7em 16em, 8em 16em, 8em 31em, 44em 31em, 44em 0em);
+			background: var(--left-default-light);
+			transform: translateY(-15em) translateZ(8em) rotateY(90deg);
+		}
+.building-2 > .mooving-part-5 > div:nth-child(1) {
+			width: 8em; height: 36em;
+			background: var(--right-default-light);
+			transform: translateY(16em) rotateX(-90deg);
+		}
+.building-2 > .mooving-part-5 > div:nth-child(1)::before {
+				width: 23em; height: 9em;
+				background: var(--top-default-light);
+    		box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
+				transform: translateY(-8em) translateZ(-31em) rotateX(90deg);
+			}
+.building-2 > .mooving-part-5 > div:nth-child(1)::after {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(-7em) translateZ(-22em) rotateX(90deg);
+			}
+.building-2 > .mooving-part-5 > div:nth-child(2) {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(-5em) translateZ(6em);
+		}
+.building-2 > .mooving-part-5 > div:nth-child(2)::before {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(1em) translateZ(-1em);
+			}
+.building-2 > .mooving-part-5 > div:nth-child(2)::after {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(2em) translateZ(-2em);
+			}
+.building-2 > .mooving-part-5 > div:nth-child(3) {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(-2em) translateZ(3em);
+		}
+.building-2 > .mooving-part-5 > div:nth-child(3)::before {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(1em) translateZ(-1em);
+			}
+.building-2 > .mooving-part-5 > div:nth-child(3)::after {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(2em) translateZ(-2em);
+			}
+.building-2 > .mooving-part-5 > div:nth-child(4) {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) rotateX(90deg);
+		}
+.building-2 > .mooving-part-5 > div:nth-child(4)::before {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(1em) translateZ(1em);
+			}
+.building-2 > .mooving-part-5 > div:nth-child(4)::after {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(2em) translateZ(2em);
+			}
+.building-2 > .mooving-part-5 > div:nth-child(5) {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(3em) rotateX(90deg);
+		}
+.building-2 > .mooving-part-5 > div:nth-child(5)::before {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(1em) translateZ(1em);
+			}
+.building-2 > .mooving-part-5 > div:nth-child(5)::after {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(2em) translateZ(2em);
+			}
+.building-2 > .mooving-part-5 > div:nth-child(6) {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-5em) translateZ(6em) rotateX(90deg);
+		}
+.building-2 > .mooving-part-5 > div:nth-child(6)::before {
+				width: 23em; height: 43em;
+				background: linear-gradient(90deg, #9F2F52 50%, transparent 0%) 0em 38em/4em 2.5em repeat-x, #B33E60;
+				transform: translateY(-41em) translateZ(1em);
+			}
+.building-2 > .mooving-part-5 > div:nth-child(7) {
+			width: 44em; height: 9em;
+			background: var(--right-default-light);
+			transform: translate(23em, -15em) translateZ(8em) rotateY(90deg);
+		}
+.building-2 > .mooving-part-5 > .cloud1 {
+			width: 8em; height: 36em;
+			transform: translate(0em, 16em) translateZ(0em) rotateX(-90deg);
+			overflow: hidden;
+		}
+.building-2 > .mooving-part-5 > .cloud1::before {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-21em, 16em);
+				animation: b2Mp5Cloud1 var(--animation) linear;
+			}
+.building-2 > .mooving-part-5 > .cloud1::after {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-12em, 17em);
+				animation: b2Mp5Cloud2 var(--animation) linear;
+			}
+.building-2 > .mooving-part-5 > .cloud2 {
+			width: 36em; height: 31em;
+			transform: translate(0em, -15em) translateZ(0em) rotateY(90deg);
+			overflow: hidden;
+		}
+.building-2 > .mooving-part-5 > .cloud2::before {
+				width: 60em; height: 60em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(6em, -30em);
+				animation: b2Mp5Cloud3 var(--animation) linear;
+			}
+.building-2 > .mooving-part-5 > .cloud2::after {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(16em, 11em);
+				animation: b2Mp5Cloud4 var(--animation) linear;
+			}
+.building-2 > .mooving-part-5 > .cloud3 {
+			width: 22em; height: 36em;
+			transform: translate(8em, 16em) translateZ(0em) rotateX(-90deg) rotateY(90deg);
+			overflow: hidden;
+		}
+.building-2 > .mooving-part-5 > .cloud3::before {
+				width: 60em; height: 60em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-30em, 6em);
+				animation: b2Mp5Cloud5 var(--animation) linear;
+			}
+.building-2 > .mooving-part-5 > .cloud3::after {
+				width: 70em; height: 70em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-13em, 1em);
+				animation: b2Mp5Cloud6 var(--animation) linear;
+			}
+.building-2 > .mooving-part-5 > .cloud4 {
+			width: 15em; height: 44em;
+			transform: translate(8em, -6em) translateZ(8em) rotateX(-90deg);
+			overflow: hidden;
+		}
+.building-2 > .mooving-part-5 > .cloud4::before {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-20em, 24em);
+				animation: b2Mp5Cloud7 var(--animation) linear;
+			}
+.building-2 > .mooving-part-5 > .cloud4::after {
+				width: 60em; height: 60em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-15em, 14em);
+				animation: b2Mp5Cloud8 var(--animation) linear;
+			}
+.building-2 > .mooving-part-5 > .cloud5 {
+			width: 9em; height: 44em;
+			transform: translate(23em, -6em) translateZ(8em) rotateX(-90deg) rotateY(90deg);
+			overflow: hidden;
+		}
+.building-2 > .mooving-part-5 > .cloud5::before {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-20em, 24em);
+				animation: b2Mp5Cloud9 var(--animation) linear;
+			}
+.building-2 > .mooving-part-5 > .cloud5::after {
+				width: 60em; height: 60em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-21em, 14em);
+				animation: b2Mp5Cloud10 var(--animation) linear;
+			}
+.building-2 > .mooving-part-6 {
+		width: 8em; height: 32em;
+    background: var(--right-default-light);
+		transform: translate(69em, -1em) translateZ(83em) rotateX(-90deg);
+		animation: b2Mp6 var(--animation) linear;
+	}
+.building-2 > .mooving-part-6::before {
+			width: 8em; height: 45em;
+			clip-path: polygon(1em 0em, 1em 5em, 1em 6em, 0em 6em, 0em 6em, 1em 6em, 1em 45em, 8em 45em, 8em 0em);
+			background: linear-gradient(90deg, #FF778E 17%, #B04356 17%, #822745);
+			transform: rotateY(90deg) translate(7em, -21em) translateZ(7em);
+		}
+.building-2 > .mooving-part-6::after {
+			width: 9em; height: 40em;
+			clip-path: polygon(0em 8em, 0em 45em, 8em 45em, 8em 0em, 7em 0em, 7em 1em, 6em 1em, 6em 2em, 5em 2em, 5em 3em, 4em 3em, 4em 4em, 3em 4em, 3em 5em, 2em 5em, 2em 6em, 1em 6em, 1em 7em, 0em 7em);
+			background: var(--left-default-light);
+			transform: rotateY(90deg) translateY(-8em) translateZ(0em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(1) {
+			width: 7em; height: 11em;
+			background: linear-gradient(14deg, var(--top-default-light) 17%, #B43D5B 50%);
+			transform: rotateX(90deg) translate(1em, -18em) translateZ(8em);
+			z-index: 1;
+		}
+.building-2 > .mooving-part-6 > div:nth-child(1)::before {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translate(-1em, 11em) translateZ(-1em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(1)::after {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translate(-1em, 12em) translateZ(-2em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(2) {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg) translateY(-5em) translateZ(5em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(2)::before {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(1em) translateZ(-1em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(2)::after {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(2em) translateZ(-2em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(3) {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg) translateY(-2em) translateZ(2em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(3)::before {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(1em) translateZ(-1em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(3)::after {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(-90deg) translateY(1em) translateZ(2em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(4) {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-1em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(4)::before {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(-1em) translateZ(-1em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(4)::after {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(-2em) translateZ(-2em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(5) {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-5em) translateZ(-4em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(5)::before {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(-1em) translateZ(-1em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(5)::after {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(-2em) translateZ(-2em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(6) {
+			width: 7em; height: 1em;
+			background: var(--right-default-light);
+			transform: translate(1em, -8em) translateZ(-7em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(6)::before {
+				width: 23em; height: 55em;
+				clip-path: polygon(0em 5em, 0em 61em, 8em 61em, 8em 6em, 14em 6em, 14em 61em, 23em 61em, 23em 5em, 17em 5em, 11.5em 0em, 6em 5em);
+				background: linear-gradient(0deg, var(--right-default-light) 56%, transparent 56%, transparent 69%, var(--right-default-light) 69%, var(--right-default-light) 82%, transparent 82%, transparent 92%, var(--right-default-light) 0%), conic-gradient(var(--right-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-default-dark) 180deg, var(--right-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--right-default-light);
+				transform: translate(-8em, -19em) translateZ(-1em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(6)::after {
+				width: 23em; height: 50em;
+				background: linear-gradient(0deg, var(--left-default-light) 56%, transparent 56%, transparent 69%, var(--left-default-light) 69%, var(--left-default-light) 88%, transparent 0%), conic-gradient(var(--left-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-default-dark) 180deg, var(--left-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--left-default-light);
+				transform: rotateY(-90deg) translate(-24em, -14em) translateZ(8em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(7) {
+			width: 25em; height: 25em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg) translate(-8em, -32em) translateZ(0em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(7)::before {
+				width: 25em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(7)::after {
+				width: 1em; height: 25em;
+				background: var(--left-default-light);
+				transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(8) {
+			width: 25em; height: 25em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg) translate(-8em, -32em) translateZ(8em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(8)::before {
+				width: 25em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(8)::after {
+				width: 1em; height: 25em;
+				background: var(--left-default-light);
+				transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(9) {
+			width: 25em; height: 25em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg) translate(-8em, -32em) translateZ(16em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(9)::before {
+				width: 25em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(9)::after {
+				width: 1em; height: 25em;
+				background: var(--left-default-light);
+				transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(10) {
+			width: 25em; height: 25em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg) translate(-8em, -32em) translateZ(23em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(10)::before {
+				width: 25em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(10)::after {
+				width: 1em; height: 25em;
+				background: var(--left-default-light);
+				transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(11) {
+			width: 6em; height: 1em;
+			background: var(--left-default-light);
+			transform: rotateX(90deg) translateY(-9em) translateZ(23em) rotateY(-42deg);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(11)::before {
+				width: 8em; height: 4em;
+				background: var(--left-default-light);
+				transform: rotateY(42deg) translate(-1em, -4em) rotateY(-42deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(11)::after {
+				border-left: 5.7em solid transparent;
+				border-right: 5.7em solid transparent;
+				border-top: 5.4em solid var(--right-default-light);
+				transform: rotateY(42deg) rotateX(90deg) translateX(-1em);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(12) {
+			width: 6em; height: 6em;
+			transform: rotateX(90deg) translate(-7em, -15em) translateZ(23em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(12)::before {
+				box-sizing: border-box;
+				border-bottom: 3em solid transparent;
+				border-top: 3em solid transparent;
+				border-left: 6em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(12)::after {
+				box-sizing: border-box;
+				border-left: 3em solid transparent;
+				border-right: 3em solid transparent;
+				border-bottom: 6em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(13) {
+			width: 6em; height: 6em;
+			transform: rotateX(90deg) translate(-7em, -30em) translateZ(23em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(13)::before {
+				box-sizing: border-box;
+				border-bottom: 3em solid transparent;
+				border-top: 3em solid transparent;
+				border-left: 6em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(13)::after {
+				box-sizing: border-box;
+				border-left: 3em solid transparent;
+				border-right: 3em solid transparent;
+				border-bottom: 6em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(14) {
+			width: 6em; height: 6em;
+			transform: rotateX(90deg) translate(-7em, -22.5em) translateZ(23em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(14)::before {
+				box-sizing: border-box;
+				border-bottom: 3em solid transparent;
+				border-top: 3em solid transparent;
+				border-left: 6em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(14)::after {
+				box-sizing: border-box;
+				border-left: 3em solid transparent;
+				border-right: 3em solid transparent;
+				border-bottom: 6em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(15) {
+			width: 6em; height: 6em;
+			transform: rotateX(90deg) translate(10em, -15em) translateZ(23em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(15)::before {
+				box-sizing: border-box;
+				border-bottom: 3em solid transparent;
+				border-top: 3em solid transparent;
+				border-left: 6em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(15)::after {
+				box-sizing: border-box;
+				border-left: 3em solid transparent;
+				border-right: 3em solid transparent;
+				border-bottom: 6em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(16) {
+			width: 6em; height: 6em;
+			transform: rotateX(90deg) translate(10em, -30em) translateZ(23em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(16)::before {
+				box-sizing: border-box;
+				border-bottom: 3em solid transparent;
+				border-top: 3em solid transparent;
+				border-left: 6em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(16)::after {
+				box-sizing: border-box;
+				border-left: 3em solid transparent;
+				border-right: 3em solid transparent;
+				border-bottom: 6em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(17) {
+			width: 6em; height: 6em;
+			transform: rotateX(90deg) translate(10em, -22.5em) translateZ(23em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(17)::before {
+				box-sizing: border-box;
+				border-bottom: 3em solid transparent;
+				border-top: 3em solid transparent;
+				border-left: 6em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(17)::after {
+				box-sizing: border-box;
+				border-left: 3em solid transparent;
+				border-right: 3em solid transparent;
+				border-bottom: 6em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(18) {
+			width: 14em; height: 14em;
+			transform: rotateX(90deg) translate(-2.5em, -27em) translateZ(23em);
+		}
+.building-2 > .mooving-part-6 > div:nth-child(18)::before {
+				box-sizing: border-box;
+				border-bottom: 7em solid transparent;
+				border-top: 7em solid transparent;
+				border-left: 14em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+.building-2 > .mooving-part-6 > div:nth-child(18)::after {
+				box-sizing: border-box;
+				border-left: 7em solid transparent;
+				border-right: 7em solid transparent;
+				border-bottom: 14em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+.building-2 > .mooving-part-6 > .cloud1 {
+			width: 8em; height: 32em;
+			overflow: hidden;
+		}
+.building-2 > .mooving-part-6 > .cloud1::before {
+				width: 30em; height: 30em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-50%, 8em);
+				animation: b2Mp6Cloud1 var(--animation) linear;
+			}
+.building-2 > .mooving-part-6 > .cloud1::after {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-11em, 3em);
+				animation: b2Mp6Cloud2 var(--animation) linear;
+			}
+.building-2 > .mooving-part-6 > .cloud2 {
+			width: 9em; height: 40em;
+			clip-path: polygon(0em 8em, 0em 45em, 8em 45em, 8em 0em, 7em 0em, 7em 1em, 6em 1em, 6em 2em, 5em 2em, 5em 3em, 4em 3em, 4em 4em, 3em 4em, 3em 5em, 2em 5em, 2em 6em, 1em 6em, 1em 7em, 0em 7em);
+			transform: rotateY(90deg) translateY(-8em);
+			overflow: hidden;
+		}
+.building-2 > .mooving-part-6 > .cloud2::before {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-50%, 9em);
+				animation: b2Mp6Cloud3 var(--animation) linear;
+			}
+.building-2 > .mooving-part-6 > .cloud3 {
+			width: 23em; height: 55em;
+			clip-path: polygon(0em 5em, 0em 61em, 8em 61em, 8em 6em, 14em 6em, 14em 61em, 23em 61em, 23em 5em, 17em 5em, 11.5em 0em, 6em 5em);
+			transform: translate(-7em, -25em) translateZ(-8em);
+			overflow: hidden;
+		}
+.building-2 > .mooving-part-6 > .cloud3::before {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-50%, 25em);
+				animation: b2Mp6Cloud4 var(--animation) linear;
+			}
+.building-2 > .mooving-part-6 > .cloud4 {
+			width: 23em; height: 50em;
+			transform: rotateY(-90deg) translate(-31em, -22em) translateZ(7em);
+			overflow: hidden;
+		}
+.building-2 > .mooving-part-6 > .cloud4::before {
+				width: 50em; height: 50em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-1em, 18em);
+				animation: b2Mp6Cloud5 var(--animation) linear;
+			}
+.building-2 > .mooving-part-6 > .cloud4::after {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-20em, 18em);
+				animation: b2Mp6Cloud6 var(--animation) linear;
+			}
+.building-2 > .mooving-bridge {
+		width: 56em; height: 8em;
+		transform: translate(46em, 67em) translateZ(31em);
+	}
+.building-2 > .mooving-bridge::before {
+			width: 8em; height: 9.8em;
+			background: var(--top-default-dark);
+			transform: rotateX(-37deg);
+		}
+.building-2 > .mooving-bridge > .mooving-bridge-cloud {
+			transform: translateX(25em);
+		}
+.building-2 > .mooving-bridge > .mooving-bridge-cloud::before {
+				width: 23em; height: 30em;
+				background: var(--left-default-light);
+				border-radius: 50%;
+				filter: blur(6em);
+				animation: BridgeCloud1 var(--animation);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-cloud::after {
+				width: 40em; height: 40em;
+				background: var(--left-default-light);
+				border-radius: 50%;
+				filter: blur(6em);
+				animation: BridgeCloud4 var(--animation);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-cloud > div:nth-child(1)::before {
+					width: 30em; height: 30em;
+					background: var(--left-default-light);
+					border-radius: 50%;
+					filter: blur(16px);
+					animation: BridgeCloud2 var(--animation);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-cloud > div:nth-child(1)::after {
+					width: 70em; height: 70em;
+					background: var(--left-default-light);
+					border-radius: 50%;
+					filter: blur(50px);
+					opacity: 0.6;
+					animation: BridgeCloud3 var(--animation);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part1 {
+			width: 13em; height: 8em;
+			background: var(--top-default-light);
+			box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 1.5em 0em var(--top-default-light), inset 1.7em 0 var(--top-default-dark), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+			animation: Bridge1 var(--animation);
+		}
+.building-2 > .mooving-bridge > .mooving-bridge-part1::before {
+				width: 13em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(-90deg);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part1::after {
+				width: 13em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(-90deg) translateZ(8em);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part1 > div:nth-child(1) {
+				width: 13em; height: 8em;
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 1.5em 0em var(--top-default-light), inset 1.7em 0 var(--top-default-dark), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: translateZ(-1em);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part1 > div:nth-child(1)::before {
+					width: 1em; height: 8em;
+					background: var(--left-default-light);
+					transform: rotateY(-90deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part1 > div:nth-child(1)::after {
+					width: 1em; height: 8em;
+					background: var(--left-default-light);
+					transform: rotateY(-90deg) translateZ(-13em);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part2 {
+			width: 8em; height: 6em;
+			background: var(--right-default-light);
+			animation: Bridge2 var(--animation);
+		}
+.building-2 > .mooving-bridge > .mooving-bridge-part2::before {
+				border-top: 6em solid var(--left-default-light);
+				border-right: 8em solid transparent;
+				transform: rotateY(90deg);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part2::after {
+				border-top: 6em solid var(--left-default-light);
+				border-right: 8em solid transparent;
+				transform: rotateY(90deg) translateZ(7em);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part2 > div:nth-child(1) {
+				width: 8em; height: 8em;
+				background: var(--top-default-light);
+				transform: rotateX(-90deg);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part2 > div:nth-child(1)::before {
+					width: 8em; height: 8em;
+					background: var(--top-default-light);
+					transform: rotateX(-37deg) scaleY(1.26);
+					transform-origin: bottom center;
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part3 {
+			width: 13em; height: 1em;
+			background: var(--right-default-light);
+			animation: Bridge3 var(--animation);
+		}
+.building-2 > .mooving-bridge > .mooving-bridge-part3::before {
+				width: 12em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateZ(8em);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part3::after {
+				width: 13em; height: 8em;
+				clip-path: polygon(0em 0em, 13em 0em, 11em 2em, 12em 3em, 9em 6em, 12em 8em, 0em 8em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part3 > div:nth-child(1) {
+				width: 3.5em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateX(8.5em) translateZ(8em) rotateY(-34deg);
+				transform-origin: right center;
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part3 > div:nth-child(1)::before {
+					width: 4.3em; height: 1em;
+					background: var(--left-default-light);
+					transform: rotateY(81deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part3 > div:nth-child(1)::after {
+					width: 2em; height: 1em;
+					background: var(--right-default-light);
+					transform: translateX(0.7em) translateZ(-4.1em) rotateY(170deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part3 > div:nth-child(2) {
+				width: 8em; height: 1em;
+				background: var(--left-default-light);
+				transform: rotateY(-90deg);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part3 > div:nth-child(2)::before {
+					width: 13em; height: 8em;
+					clip-path: polygon(0em 0em, 13em 0em, 11em 2em, 12em 3em, 9em 6em, 12em 8em, 0em 8em);
+					background: var(--top-default-light);
+					box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+					transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg) translateZ(-1em);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part3 > div:nth-child(2)::after {
+					width: 4em; height: 1em;
+					background: var(--left-default-light);
+					transform: translateZ(-13em) rotateY(-47deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part4 {
+			width: 6em; height: 1em;
+			background: var(--right-default-light);
+			animation: Bridge4 var(--animation);
+		}
+.building-2 > .mooving-bridge > .mooving-bridge-part4::before {
+				width: 13em; height: 8em;
+				clip-path: polygon(4em 0em, 2em 2em, 3em 3em, 0em 6em, 3em 8em, 13em 8em, 10em 0em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg) translateX(-4em);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part4::after {
+				width: 13em; height: 8em;
+				clip-path: polygon(4em 0em, 2em 2em, 3em 3em, 0em 6em, 3em 8em, 13em 8em, 10em 0em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg) translateX(-4em) translateZ(-1em);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part4 > div:nth-child(1) {
+				width: 3em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateY(-135deg);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part4 > div:nth-child(1)::before {
+					width: 3em; height: 1em;
+					background: var(--left-default-light);
+					transform: translateX(3em) rotateY(96deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part4 > div:nth-child(1)::after {
+					width: 4em; height: 1em;
+					background: var(--right-default-light);
+					transform: translateX(3em) translateZ(-1.3em) rotateY(2deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part4 > div:nth-child(2) {
+				width: 10em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateX(-1em) translateZ(8em);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part4 > div:nth-child(2)::before {
+					width: 3.6em; height: 1em;
+					background: var(--left-default-light);
+					transform: rotateY(147deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part4 > div:nth-child(2)::after {
+					width: 8.4em; height: 1em;
+					background: var(--left-default-light);
+					transform: translateX(10em) rotateY(111deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part5 {
+			width: 16em; height: 1em;
+			background: var(--right-default-light);
+			animation: Bridge5 var(--animation);
+		}
+.building-2 > .mooving-bridge > .mooving-bridge-part5::before {
+				width: 16em; height: 8em;
+				clip-path: polygon(0em 0em, 3em 8em, 13em 8em, 15em 5em, 14em 3em, 16em 0em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part5::after {
+				width: 16em; height: 8em;
+				clip-path: polygon(0em 0em, 3em 8em, 13em 8em, 15em 5em, 14em 3em, 16em 0em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg) translateZ(-1em);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part5 > div:nth-child(1) {
+				width: 8.4em; height: 1em;
+				background: var(--left-default-light);
+				transform: rotateY(-70deg);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part5 > div:nth-child(1)::before {
+					width: 4em; height: 1em;
+					background: var(--left-default-light);
+					transform: translateX(5.5em) translateZ(-15em) rotateY(-54deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part5 > div:nth-child(1)::after {
+					width: 2.9em; height: 1em;
+					background: var(--right-default-light);
+					transform: translateX(7em) translateZ(-12em) rotateY(6deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part5 > div:nth-child(2) {
+				width: 10.2em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateX(13em) translateZ(8em) rotateY(180deg);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part5 > div:nth-child(2)::before {
+					width: 3.2em; height: 1em;
+					background: var(--left-default-light);
+					transform: rotateY(-123deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part6 {
+			width: 6em; height: 1em;
+			background: var(--right-default-light);
+			animation: Bridge6 var(--animation);
+		}
+.building-2 > .mooving-bridge > .mooving-bridge-part6::before {
+				width: 11em; height: 8em;
+				clip-path: polygon(3em 0em, 1em 3em, 2em 5em, 0em 8em, 11em 8em, 10em 6em, 10em 4em, 8em 2em, 9em 0em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset -1.5em 0em var(--top-default-light), inset -1.7em 0 var(--top-default-dark), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg) translateX(-3em);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part6::after {
+				width: 11em; height: 8em;
+				clip-path: polygon(3em 0em, 1em 3em, 2em 5em, 0em 8em, 11em 8em, 10em 6em, 10em 4em, 8em 2em, 9em 0em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg) translateX(-3em) translateZ(-1em);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(1) {
+				width: 3.7em; height: 1em;
+				background: var(--left-default-light);
+				transform: rotateY(-124deg);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(1)::before {
+					width: 100%; height: 1em;
+					background: var(--right-default-light);
+					transform: rotateY(-121deg);
+					transform-origin: right center;
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(1)::after {
+					width: 7em; height: 1em;
+					background: var(--left-default-light);
+					transform: rotateY(-121deg) translate(-6em, -6em) rotateY(-57deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(2) {
+				width: 11em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateX(-3em) translateZ(8em);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(2)::before {
+					width: 3em; height: 1em;
+					background: var(--left-default-light);
+					transform: translateX(11em) rotateY(118deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(2)::after {
+					width: 2em; height: 1em;
+					background: var(--right-default-light);
+					transform: translateX(10em) translateZ(-2em) rotateY(89deg);
+				}
+.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(3) {
+				width: 2.4em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateX(6em) rotateY(-117deg);
+			}
+.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(3)::before {
+					width: 2.9em; height: 1em;
+					background: var(--left-default-light);
+					transform: translateX(2.4em) rotateY(75deg);
+				}
+.building-2 > .rocks::before {
+			width: 10em; height: 16em;
+			background: #3D2E36;
+			transform: translateZ(-12em) rotateX(-26deg) rotateY(-180deg);
+		}
+.building-2 > .rocks::after {
+			width: 32em; height: 51em;
+			background: linear-gradient(102deg, #3D2E36 76%, transparent 0%);
+			transform: translate(-9em, 15em) translateZ(-27em) rotateX(0deg) rotateY(-41deg) rotateZ(0deg);
+		}
+.building-2 > .rocks > div:nth-child(1) {
+			width: 22em; height: 14em;
+			background: #3D2E36;
+			transform: translate(23em, 55em) translateZ(-17em) rotateY(-47deg);
+		}
+.building-2 > .rocks > div:nth-child(1)::before {
+				width: 22em; height: 20em;
+				background: linear-gradient(109deg, #3D2E36 76%, transparent 0%);
+				transform: translate(8em, 5em) translateZ(-5em) rotateY(-4deg);
+			}
+.building-2 > .rocks > div:nth-child(1)::after {
+				width: 20em; height: 23em;
+				background: linear-gradient(100deg, #3D2E36, #3D2E36) 0em 0em/12em 23em no-repeat, linear-gradient(15deg, #3D2E36 43%, transparent 0%) 11em -5em/11em 11em no-repeat, linear-gradient(100deg, #3D2E36 79%, transparent 0%) 9em 6em/11em 17em no-repeat;
+				transform: translate(-17em, -15em) translateZ(10em) rotateY(13deg);
+			}
+.building-2 > .rocks > div:nth-child(2) {
+			width: 26em; height: 78em;
+			background: #3D2E36;
+			border-radius: 0 0 26em 0 / 0 0 5em 0;
+			transform-origin: right top;
+			transform: translate(83em, -115em) translateZ(10em) rotateX(38deg) rotateY(-90deg);
+		}
+.building-2 > .rocks > div:nth-child(2)::before {
+				width: 60em; height: 21em;
+				background: #3D2E36;
+				border-radius: 0 0 3em 0;
+				transform-origin: top right;
+				transform: translate(-43em, 67em) skewY(-46deg) rotateZ(21deg);
+			}
+.building-2 > .rocks > div:nth-child(2)::after {
+				width: 30em; height: 37em;
+				background: linear-gradient(98deg, #3D2E36 82%, transparent 0%) 0em 18em / 29em 19em no-repeat, linear-gradient(110deg, #3D2E36 90%, transparent 0%) 0em 14em / 29em 4em no-repeat, linear-gradient(93deg, #3D2E36 95%, transparent 0%) 0em 0em / 29em 14em no-repeat;
+				transform-origin: top right;
+				transform: translate(-49em, 137em) translateZ(20em) rotateZ(52deg);
+			}
+.building-2 > .rocks > div:nth-child(3) {
+			width: 46em; height: 21em;
+			background: #3D2E36;
+			transform-origin: top left;
+			transform: translate(39em, 1em) translateZ(59em) rotateX(-23deg);
+		}
+.building-2 > .rocks > div:nth-child(3)::before {
+				width: 38em; height: 20em;
+				background: #3D2E36;
+				transform-origin: top center;
+				transform: translate(10em, 21em) rotateX(-29deg);
+			}
+.building-2 > .rocks > div:nth-child(3)::after {
+				width: 25em; height: 20em;
+				background: #3D2E36;
+				transform: translate(20em, -18em);
+			}
+.building-2 > .rocks > div:nth-child(4) {
+			width: 26em; height: 83em;
+			background: #3D2E36;
+			transform-origin: top left;
+			transform: translate(109em, 35em) translateZ(24em) rotateX(-26deg) rotateY(90deg);
+		}
+.building-2 > .rocks > div:nth-child(4)::before {
+				width: 75em; height: 8em;
+				background: #3D2E36;
+				transform: translate(19.7em, 59.4em) translateZ(-13em) rotateY(90deg) rotateX(48deg);
+			}
+.building-2 > .rocks > div:nth-child(4)::after {
+				width: 30em; height: 32em;
+				background: #3D2E36;
+				transform: translate(-9em, -7em) translateZ(-51em) rotateX(90deg) rotateY(49deg);
+			}
+.building-2 > .rocks > div:nth-child(5) {
+			width: 52em; height: 90em;
+			background: linear-gradient(136deg, #3d2e36 36%, transparent 0%);
+			transform-origin: top right;
+			transform: translate(50em, 66em) translateZ(13em) rotateY(-90deg);
+		}
+.building-2 > .rocks > div:nth-child(5)::before {
+				width: 14em; height: 76em;
+				background: #3d2e36;
+				transform: translate(32em, 8em) translateZ(6em) rotateX(90deg) rotateY(155deg);
+			}
+.building-2 > .rocks > div:nth-child(5)::after {
+				width: 30em; height: 43em;
+				background: #3d2f36;
+				transform: translate(51em, -13em) translateZ(48em) rotateX(-90deg) rotateY(-132deg);
+			}
+.building-2 > .rocks > div:nth-child(6) {
+			width: 90em; height: 8em;
+			background: #3d2e36;
+			transform: translate(21em, 82.3em) translateZ(-27em) rotateX(-38deg);
+		}
+.building-2 > .rocks > div:nth-child(6)::before {
+				width: 90em; height: 12em;
+				background: #3d2e36;
+				transform: translateY(8em) rotateX(-26deg);
+			}
+.building-2 > .rocks > div:nth-child(6)::after {
+				width: 54em; height: 54em;
+				background: #3d2e36;
+				border-radius: 0 5em 0 0 / 0 15em 0 0;
+				transform: translate(79em, -16em) translateZ(-4em) rotateX(-42deg) rotateY(-90deg) skewX(15deg);
+			}
+.building-2 > .rocks > div:nth-child(7) {
+			width: 90em; height: 8em;
+			background: #3d2e36;
+			transform: translate(21em, 94em) translateZ(-42em) rotateX(-49deg);
+		}
+.building-2 > .rocks > div:nth-child(7)::before {
+				width: 90em; height: 10em;
+				background: #3d2e36;
+				transform: translateY(8em) rotateX(-15deg);
+			}
+.building-2 > .rocks > div:nth-child(7)::after {
+				width: 90em; height: 20em;
+				background: #3d2e36;
+				transform: translateY(17.5em) translateZ(-2.6em) rotateX(-21deg);
+			}
+.building-2 > .rocks > div:nth-child(8) {
+			width: 97em; height: 11em;
+			background: #3d2e36;
+			transform: translate(21em, 109em) translateZ(-72em) rotateX(-49deg);
+		}
+.building-2 > .rocks > div:nth-child(8)::before {
+				width: 120em; height: 40em;
+				background: #3d2e36;
+				transform: translate(-13em, 11em) rotateX(20deg);
+			}
+.building-2 > .rocks > div:nth-child(8)::after {
+				width: 75em; height: 22em;
+				background: #3d2e36;
+				transform: translateY(-38em) translateZ(9em) rotateX(-96deg) rotateY(-90deg);
+			}
+.building-2 > .rocks > div:nth-child(9) {
+			width: 20em; height: 20em;
+			background: #3d2e36;
+			transform: translate(-11em, 124em) translateZ(-85em) rotateX(-30deg);
+		}
+.building-2 > .rocks > div:nth-child(9)::before {
+				width: 29em; height: 60em;
+				background: linear-gradient(-20deg, #3d2e36 84%, transparent 0%);
+				transform: translate(114em, 39em) translateZ(20em) rotateX(-30deg);
+			}
+.building-2 > .rocks > div:nth-child(9)::after {
+				width: 8em; height: 20em;
+				background: #3d2e36;
+				transform: translate(88em, 76em) translateZ(36em) rotateX(-30deg);
+			}
+.building-2 > .rocks > div:nth-child(10) {
+			width: 20em; height: 40em;
+			background: linear-gradient(-104deg, #3d2e36 66%, transparent 0%);
+			transform: translate(77em, 194em) translateZ(-86em) rotateY(150deg);
+		}
+.building-2 > .rocks > div:nth-child(10)::before {
+				width: 40em; height: 29em;
+				background: linear-gradient(-119deg, #3d2e36 70%, transparent 0%);
+				transform: translate(63em, -5em) translateZ(-27em) rotateY(-57deg);
+			}
+.building-2 > .rocks > div:nth-child(10)::after {
+				width: 41em; height: 26em;
+				background: #3d2e36;
+				transform: translate(68em, -20em) translateZ(-21em) rotateX(80deg);
+			}
+.building-2 > .rocks > div:nth-child(11) {
+			width: 20em; height: 21em;
+			background: linear-gradient(-48deg, #3d2e36 40%, transparent 0%), linear-gradient(-125deg, #3d2e36 40%, transparent 0%);
+			transform: translateY(179em) translateZ(-100em) rotateY(100deg);
+		}
+.building-2 > .rocks > div:nth-child(11)::before {
+				width: 14em; height: 20em;
+				background: linear-gradient(-32deg, #3d2e36 83%, transparent 0%);
+				transform: translate(3.7em, 20em) translateZ(-3em) rotateX(97deg) rotateY(18deg);
+			}
+.building-3 {
+	width: 18em; height: 18em;
+	background: var(--top-default-light);
+	transform: translate(115em, 151em) translateZ(-16em) rotateX(0deg);
+	transform-style: preserve-3d;
+
+	animation: thirdBuilding var(--animation);
+
+	--left-default-light: #953552;
+	--left-default-dark: #88213D;
+	--left-accent-light: #7B2237;
+	--left-accent-dark: #701329;
+	
+	--top-default-light: #D25A6C;
+	--top-default-dark: #BF394D;
+	--top-accent-light: #B25B78;
+	--top-accent-dark: #9E4662;
+	
+	--right-default-light: #722C41;
+	--right-default-dark: #681A33;
+	--right-accent-light: #4C1325;
+	--right-accent-dark: #320716;
+	
+	--right-window-inner: #300829;
+	--right-window-v: #56203E;
+	--right-window-h: #6A2B46;
+}
+.building-3::before {
+		width: 1em; height: 18em;
+    background: var(--left-default-light);
+    transform: rotateY(90deg);
+	}
+.building-3::after {
+		width: 18em; height: 1em;
+    background: var(--right-default-light);
+    transform: translateY(18em) rotateX(-90deg);
+	}
+.building-3 > div:nth-child(1) {
+		width: 18em; height: 18em;
+    background: var(--top-default-light);
+    transform: translateZ(2em);
+	}
+.building-3 > div:nth-child(1)::before {
+			width: 1em; height: 18em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+.building-3 > div:nth-child(1)::after {
+			width: 18em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(18em) rotateX(-90deg);
+		}
+.building-3 > div:nth-child(2) {
+		width: 16em; height: 16em;
+    background: var(--top-default-light);
+    transform: translate(1em, 1em) translateZ(3em);
+	}
+.building-3 > div:nth-child(2)::before {
+			width: 50em; height: 16em;
+			clip-path: polygon(0em 0em, 0em 2em, 2em 2em, 2em 5em, 0em 5em, 0em 11em, 2em 11em, 2em 14em, 0em 14em, 0em 16em, 50em 16em, 50em 0em);
+			background: var(--left-default-light);
+			transform: translateZ(2em) rotateY(90deg);
+		}
+.building-3 > div:nth-child(2)::after {
+			width: 140em; height: 16em;
+			clip-path: polygon(0em 0em, 0em 2em, 2em 2em, 2em 5em, 0em 5em, 0em 11em, 2em 11em, 2em 14em, 0em 14em, 0em 16em, 140em 16em, 140em 0em);
+			background: var(--right-default-light);
+			transform: translateY(16em) translateZ(2em) rotateY(90deg) rotateX(90deg);
+		}
+.building-3 > div:nth-child(3) {
+		width: 1em; height: 2em;
+    background: var(--right-default-light);
+    box-shadow: 15em 0em var(--right-default-light);
+    transform: translate(1em, 3em) translateZ(5em) rotateX(-90deg);
+	}
+.building-3 > div:nth-child(3)::before {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			box-shadow: 15em 0em var(--right-default-light);
+			transform: translateZ(9em);
+		}
+.building-3 > div:nth-child(3)::after {
+			width: 1em; height: 1em;
+			background: var(--top-default-light);
+			box-shadow: 0em 1em var(--top-default-light), 0em 5em var(--top-default-light), 0em 6em var(--top-default-light), 0em 7em var(--top-default-light), 0em 8em var(--top-default-light), 0em 9em var(--top-default-light), 0em 10em var(--top-default-light), 0em 14em var(--top-default-light), 0em 15em var(--top-default-light), 15em 1em var(--top-default-light), 15em 5em var(--top-default-light), 15em 6em var(--top-default-light), 15em 7em var(--top-default-light), 15em 8em var(--top-default-light), 15em 9em var(--top-default-light), 15em 10em var(--top-default-light), 15em 14em var(--top-default-light), 15em 15em var(--top-default-light), 1em 0em var(--top-default-light), 5em 0em var(--top-default-light), 6em 0em var(--top-default-light), 7em 0em var(--top-default-light), 8em 0em var(--top-default-light), 9em 0em var(--top-default-light), 10em 0em var(--top-default-light), 14em 0em var(--top-default-light), 15em 0em var(--top-default-light), 1em 15em var(--top-default-light), 5em 15em var(--top-default-light), 6em 15em var(--top-default-light), 7em 15em var(--top-default-light), 8em 15em var(--top-default-light), 9em 15em var(--top-default-light), 10em 15em var(--top-default-light), 14em 15em var(--top-default-light);
+			transform: translateZ(-2em) rotateX(90deg);
+		}
+.building-3 > div:nth-child(4) {
+		width: 2em; height: 1em;
+    background: var(--left-default-light);
+    box-shadow: 0em 15em var(--left-default-light);
+    transform: translate(6em, 1em) translateZ(5em) rotateY(90deg);
+	}
+.building-3 > div:nth-child(4)::before {
+			width: 3em; height: 16em;
+			clip-path: polygon(0em 0em, 0em 16em, 3em 16em, 3em 14em, 1em 14em, 1em 11em, 3em 11em, 3em 5em, 1em 5em, 1em 2em, 3em 2em, 3em 0em);
+			background: var(--left-default-light);
+			transform: translateX(3em) translateZ(10em) rotateY(-180deg);
+		}
+.building-3 > div:nth-child(4)::after {
+			width: 3em; height: 16em;
+			clip-path: polygon(0em 0em, 0em 16em, 3em 16em, 3em 14em, 1em 14em, 1em 11em, 3em 11em, 3em 5em, 1em 5em, 1em 2em, 3em 2em, 3em 0em);
+			background: var(--right-default-light);
+			transform: translate(3em, 1em) translateZ(-5em) rotateX(90deg) rotateY(180deg);
+		}
+.building-3 > div:nth-child(5) {
+		width: 2em; height: 1em;
+    background: var(--left-default-light);
+    box-shadow: 0em 15em var(--left-default-light);
+		transform: translate(15em, 1em) translateZ(5em) rotateY(90deg);
+	}
+.building-3 > div:nth-child(5)::before {
+			width: 7em; height: 10em;
+			clip-path: polygon(0em 0em, 7em 0em, 7em 4em, 4em 4em, 4em 6em, 7em 6em, 7em 10em, 0em 10em);
+			background: var(--left-default-light);
+			transform: translate(-5em, 3em) translateZ(-11em);
+		}
+.building-3 > div:nth-child(5)::after {
+			width: 7em; height: 10em;
+			clip-path: polygon(0em 0em, 7em 0em, 7em 4em, 4em 4em, 4em 6em, 7em 6em, 7em 10em, 0em 10em);
+			background: var(--right-default-light);
+			transform: translate(-5em, 13em) translateZ(-11em) rotateX(90deg);
+		}
+.building-3 > div:nth-child(6) {
+		width: 10em; height: 10em;
+    background: var(--top-default-light);
+    transform: translate(4em, 4em) translateZ(10em);
+	}
+.building-3 > div:nth-child(6)::before {
+			border-left: 4em solid transparent;
+			border-right: 4em solid transparent;
+			border-top: 7em solid var(--right-accent-light);
+			transform: translate(1em, 9em) rotateX(128deg);
+		}
+.building-3 > div:nth-child(6)::after {
+			border-bottom: 4em solid transparent;
+			border-top: 4em solid transparent;
+			border-left: 7em solid var(--left-accent-light);
+			transform: translate(1em, 1em) rotateY(-58deg);
+		}
+.building-3 > div:nth-child(7) {
+		width: 3em; height: 3em;
+    background: var(--right-default-dark);
+    transform: translate(4em, 8em) translateZ(3em) rotateX(90deg);
+	}
+.building-3 > div:nth-child(7)::before {
+			width: 2em; height: 3em;
+			background: var(--left-default-dark);
+			transform: translateX(6em) translateZ(-4em) rotateY(90deg);
+		}
+.building-3 > div:nth-child(7)::after {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-top: 3px solid var(--right-window-h);
+			border-radius: 0 0 2em 2em;
+			transform: translate(-1em, -12em) translateZ(-10em);
+		}
+.building-3 > div:nth-child(8) {
+		width: 1em; height: 2em;
+    background: var(--top-default-light);
+    box-shadow: 0 5em var(--top-default-light), 0 7em var(--top-default-light), 0 12em var(--top-default-light), 0 14em var(--top-default-light), 0 19em var(--top-default-light), 0 21em var(--top-default-light), 0 26em var(--top-default-light);
+    transform: translate(-21em, 6em) translateZ(-27em);
+	}
+.building-3 > div:nth-child(8)::before {
+			width: 8em; height: 36em;
+			background: var(--top-default-light);
+			transform: translateY(-8em) translateZ(-1em);
+		}
+.building-3 > div:nth-child(8)::after {
+			width: 20em; height: 36em;
+			clip-path: polygon(0em 8em, 1em 8em, 1em 0em, 20em 0em, 20em 17em, 11em 17em, 11em 28em, 20em 28em, 20em 36em, 0em 36em, 0em 34em, 1em 34em, 1em 31em, 0em 31em, 0em 27em, 1em 27em, 1em 24em, 0em 24em, 0em 20em, 1em 20em, 1em 17em, 0em 17em, 0em 13em, 1em 13em, 1em 10em, 0em 10em);
+			background: var(--left-default-light);
+			transform: translateY(-8em) rotateY(90deg);
+		}
+.building-3 > div:nth-child(9) {
+		width: 1em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(-21em, 8em) translateZ(-27em) rotateX(-90deg);
+	}
+.building-3 > div:nth-child(9)::before {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateZ(7em);
+		}
+.building-3 > div:nth-child(9)::after {
+			width: 49em; height: 60em;
+			clip-path: polygon(0em 60em, 0em 9em, 4em 9em, 4em 10em, 7em 10em, 7em 9em, 12em 9em, 12em 10em, 15em 10em, 15em 9em, 20em 9em, 20em 10em, 23em 10em, 23em 9em, 28em 9em, 28em 10em, 31em 10em, 31em 9em, 36em 9em, 36em 10em, 39em 10em, 39em 9em, 41em 9em, 41em 0em, 43em 0em, 43em 1em, 47em 1em, 47em 0em, 49em 0em, 49em 60em);
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1em 13em/3em 2em repeat-x, var(--right-default-light);
+			transform: translateX(-41em) translateZ(26em);
+		}
+.building-3 > div:nth-child(10) {
+		width: 2em; height: 1em;
+    background: var(--top-default-light);
+    box-shadow: 6em 0 var(--top-default-light);
+    transform: translate(-21em, 33em) translateZ(-27em);
+	}
+.building-3 > div:nth-child(10)::before {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-11em) rotateX(-90deg);
+		}
+.building-3 > div:nth-child(10)::after {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-4em) rotateX(-90deg);
+		}
+.building-3 > div:nth-child(11) {
+		width: 1em; height: 1em;
+    background: var(--top-default-light);
+		box-shadow: -31em -36em var(--top-default-light), -32em -36em var(--top-default-light), -36em -36em var(--top-default-light), -37em -36em var(--top-default-light), -38em -36em var(--top-default-light), -39em -33em var(--top-default-light), -39em -32em var(--top-default-light), -39em -31em var(--top-default-light), -39em -30em var(--top-default-light), -39em -29em var(--top-default-light), -39em -25em var(--top-default-light), -39em -24em var(--top-default-light), -39em -23em var(--top-default-light), -39em -22em var(--top-default-light), -39em -21em var(--top-default-light), -39em -17em var(--top-default-light), -39em -16em var(--top-default-light), -39em -15em var(--top-default-light), -39em -14em var(--top-default-light), -39em -13em var(--top-default-light), -39em -9em var(--top-default-light), -39em -8em var(--top-default-light), -39em -7em var(--top-default-light), -39em -6em var(--top-default-light), -39em -5em var(--top-default-light), -39em -1em var(--top-default-light), -38em 0 var(--top-default-light), -36em 0 var(--top-default-light), -30em 0 var(--top-default-light), -28em 0 var(--top-default-light), -22em 0 var(--top-default-light), -20em 0 var(--top-default-light), -14em 0 var(--top-default-light), -12em 0 var(--top-default-light), -6em 0 var(--top-default-light), -4em 0 var(--top-default-light), 1em 0 var(--top-default-light), -5em 0 var(--top-default-light), -7em 0 var(--top-default-light), -8em 0 var(--top-default-light), -13em 0 var(--top-default-light), -15em 0 var(--top-default-light), -16em 0 var(--top-default-light), -21em 0 var(--top-default-light), -23em 0 var(--top-default-light), -24em 0 var(--top-default-light), -29em 0 var(--top-default-light), -31em 0 var(--top-default-light), -32em 0 var(--top-default-light), -37em 0 var(--top-default-light), -39em 0 var(--top-default-light);
+    transform: translate(-23em, 33em) translateZ(-36em);
+	}
+.building-3 > div:nth-child(11)::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+.building-3 > div:nth-child(11)::after {
+			width: 10em; height: 60em;
+			background: var(--right-default-light);
+			transform: translate(8em, -5em) translateZ(8em) rotateX(-90deg);
+		}
+.building-3 > div:nth-child(12) {
+		width: 1em; height: 1em;
+    background: var(--left-default-light);
+    transform: translate(-31em, 33em) translateZ(-36em) rotateY(90deg);
+	}
+.building-3 > div:nth-child(12)::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateZ(-8em);
+		}
+.building-3 > div:nth-child(12)::after {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateZ(-16em);
+		}
+.building-3 > div:nth-child(13) {
+		width: 1em; height: 1em;
+    background: var(--left-default-light);
+    transform: translate(-55em, 33em) translateZ(-36em) rotateY(90deg);
+	}
+.building-3 > div:nth-child(13)::before {
+			width: 48em; height: 57em;
+			clip-path: polygon(0em 0em, 0em 57em, 8em 57em, 8em 44em, 47em 44em, 47em 43em, 8em 43em, 8em 8em, 16em 8em, 16em 0em);
+			background: var(--top-default-light);
+			transform: translate(1em, -43em) translateZ(-14em) rotateY(-90deg);
+		}
+.building-3 > div:nth-child(13)::after {
+			width: 9em; height: 13em;
+			background: var(--right-default-dark);
+			transform: translate(2em, -18em) translateZ(34em) rotateX(90deg);
+		}
+.building-3 > div:nth-child(14) {
+		width: 2em; height: 7em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+    border-right: 3px solid var(--right-window-v);
+    border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+    transform: translate(-32em, 34em) translateZ(-50em) rotateX(-90deg);
+	}
+.building-3 > div:nth-child(14)::before {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateX(16em);
+		}
+.building-3 > div:nth-child(14)::after {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			transform: translate(-30em, -14em) translateZ(-5em);
+		}
+.building-3 > div:nth-child(15) {
+		width: 1em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(-62em, 21em) translateZ(-36em) rotateX(-90deg);
+	}
+.building-3 > div:nth-child(15)::before {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateZ(-8em);
+		}
+.building-3 > div:nth-child(15)::after {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateZ(-16em);
+		}
+.building-3 > div:nth-child(16) {
+		width: 1em; height: 2em;
+    background: var(--left-default-light);
+    box-shadow: 0 32em var(--left-default-light), 0 27em var(--left-default-light), 0 26em var(--left-default-light), 0 24em var(--left-default-light), 0 19em var(--left-default-light), 0 18em var(--left-default-light), 0 16em var(--left-default-light), 0 9em var(--left-default-light), 0 11em var(--left-default-light), 0 8em var(--left-default-light), 0 2em var(--left-default-light), 0 3em var(--left-default-light);
+    transform: translateX(-62em) translateZ(-36em) rotateY(90deg);
+	}
+.building-3 > div:nth-child(16)::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateY(-3em) translateZ(1em);
+		}
+.building-3 > div:nth-child(16)::after {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateY(-3em) translateZ(7em);
+		}
+.building-3 > div:nth-child(17) {
+		width: 1em; height: 8em;
+    background: var(--top-default-light);
+    transform: translate(-70em, 39em) translateZ(-38em);
+	}
+.building-3 > div:nth-child(17)::before {
+			width: 8em; height: 10em;
+			clip-path: polygon(0em 0em, 2em 0em, 2em 1em, 6em 1em, 6em 0em, 8em 0em, 8em 10em, 0em 10em);
+			background: var(--right-default-light);
+			transform: translate(9em, -41em) translateZ(2em) rotateX(-90deg);
+		}
+.building-3 > div:nth-child(17)::after {
+			width: 1em; height: 8em;
+			background: var(--top-default-light);
+			transform: translateX(-1em) translateZ(-1em);
+		}
+.building-3 > div:nth-child(18) {
+		width: 1em; height: 8em;
+    background: var(--top-default-light);
+    transform: translate(-72em, 39em) translateZ(-40em);
+	}
+.building-3 > div:nth-child(18)::before {
+			width: 59em; height: 81em;
+			clip-path: polygon(0em 0em, 0em 57em, 0.1em 58.8em, 0.5em 61em, 1.2em 63.1em, 2.5em 65.6em, 4.1em 67.7em, 5.9em 69.4em, 8.2em 71em, 9.9em 71.8em, 11.3em 72.3em, 12.9em 72.7em, 14.2em 72.9em, 16em 73em, 28em 73em, 28em 74em, 29em 74em, 29em 75em, 30em 75em, 30em 76em, 31em 76em, 31em 77em, 32em 77em, 32em 78em, 33em 78em, 33em 79em, 34em 79em, 34em 80em, 35em 80em, 35em 81em, 59em 81em, 59em 0em);
+			background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 3em 13em/2em 3em repeat-y, var(--left-default-light);
+    	box-shadow: inset 0 -32em var(--left-default-light);
+			transform: translate(3em, -49em) translateZ(3em) rotateY(90deg);
+		}
+.building-3 > div:nth-child(18)::after {
+			width: 1em; height: 8em;
+			background: var(--top-default-light);
+			transform: translateX(-1em) translateZ(-1em);
+		}
+.building-3 > div:nth-child(19) {
+		width: 41em; height: 25em;
+    border-radius: 0 0 0 16em;
+    background: linear-gradient(135deg, var(--top-default-light) 15%, var(--right-default-light) 70%);
+    transform: translate(-61em, 38em) translateZ(-37em) rotateY(90deg);
+	}
+.building-3 > div:nth-child(19)::before {
+			width: 1em; height: 8em;
+			background: var(--top-default-light);
+			transform: translate(5em, 1em) translateZ(-12em) rotateY(90deg);
+		}
+.building-3 > div:nth-child(19)::after {
+			width: 1em; height: 8em;
+			background: var(--top-default-light);
+			transform: translate(6em, 1em) translateZ(-13em) rotateY(90deg);
+		}
+.building-3 > div:nth-child(20) {
+		width: 1em; height: 8em;
+    background: var(--left-default-light);
+    transform: translate(-70em, 39em) translateZ(-38em) rotateY(90deg);
+	}
+.building-3 > div:nth-child(20)::before {
+			width: 1em; height: 8em;
+			background: var(--left-default-light);
+			transform: translateX(1em) translateZ(-1em);
+		}
+.building-3 > div:nth-child(20)::after {
+			width: 1em; height: 8em;
+			background: var(--left-default-light);
+			transform: translateX(2em) translateZ(-2em);
+		}
+.building-3 > div:nth-child(21) {
+		width: 1em; height: 8em;
+    background: var(--left-default-light);
+    transform: translate(-73em, 39em) translateZ(-41em) rotateY(90deg);
+	}
+.building-3 > div:nth-child(21)::before {
+			width: 1em; height: 8em;
+			background: var(--left-default-light);
+			transform: translateX(1em) translateZ(-1em);
+		}
+.building-3 > div:nth-child(21)::after {
+			width: 1em; height: 8em;
+			background: var(--left-default-light);
+			transform: translateX(2em) translateZ(-2em);
+		}
+.building-3 > div:nth-child(22) {
+		width: 23em; height: 8em;
+    background: var(--top-default-light);
+    transform: translate(-98em, 39em) translateZ(-44em);
+	}
+.building-3 > div:nth-child(22)::before {
+			width: 25em; height: 8em;
+			clip-path: polygon(1em 0em, 1em 7em, 0em 7em, 0em 8em, 25em 8em, 25em 0em);
+			background: var(--left-default-light);
+			transform: translateZ(1em) rotateY(90deg);
+		}
+.building-3 > div:nth-child(22)::after {
+			width: 29em; height: 59em;
+			clip-path: polygon(0em 7em, 0em 59em, 29em 59em, 29em 0em, 29em 1em, 28em 1em, 28em 2em, 27em 2em, 27em 3em, 26em 3em, 26em 4em, 25em 4em, 25em 5em, 24em 5em, 24em 6em, 23em 6em, 23em 7em, 22em 7em, 22em 6em, 20em 6em, 20em 7em, 17em 7em, 17em 6em, 12em 6em, 12em 7em, 9em 7em, 9em 6em, 4em 6em, 4em 7em, 2em 7em, 2em 6em, 0em 6em);
+			background: var(--right-default-light);
+			transform: translateY(8em) translateZ(7em) rotateX(-90deg);
+		}
+.building-3 > div:nth-child(23) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(-69em, 63em) translateZ(-65em);
+	}
+.building-3 > div:nth-child(23)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-3 > div:nth-child(23)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-3 > div:nth-child(24) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(-69em, 66em) translateZ(-68em);
+	}
+.building-3 > div:nth-child(24)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-3 > div:nth-child(24)::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+.building-3 > div:nth-child(25) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(-69em, 69em) translateZ(-71em);
+	}
+.building-3 > div:nth-child(25)::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+.building-3 > div:nth-child(25)::after {
+			width: 8em; height: 24em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(-1em) rotateX(-90deg);
+		}
+.building-3 > div:nth-child(26) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(-69em, 70em) translateZ(-71em) rotateX(-90deg);
+	}
+.building-3 > div:nth-child(26)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+.building-3 > div:nth-child(26)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+.building-3 > div:nth-child(27) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(-69em, 67em) translateZ(-68em) rotateX(-90deg);
+	}
+.building-3 > div:nth-child(27)::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+.building-3 > div:nth-child(27)::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+.building-3 > div:nth-child(28) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(-69em, 64em) translateZ(-65em) rotateX(-90deg);
+	}
+.building-3 > div:nth-child(28)::before {
+			width: 63em; height: 70em;
+			clip-path: polygon(63em 0em, 61em 0em, 61em 1em, 58em 1em, 58em 0em, 53em 0em, 53em 1em, 50em 1em, 50em 0em, 45em 0em, 45em 1em, 42em 1em, 42em 0em, 37em 0em, 37em 1em, 34em 1em, 34em 0em, 29em 0em, 29em 1em, 26em 1em, 26em 0em, 21em 0em, 21em 1em, 18em 1em, 18em 0em, 13em 0em, 13em 1em, 10em 1em, 10em 0em, 5em 0em, 5em 1em, 2em 1em, 2em 0em, 0em 0em, 0em 70em, 63em 70em);
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1em 4em/3em 2em repeat-x, var(--right-default-light);;
+			transform: translate(-85em, -20em) translateZ(-41em);
+		}
+.building-3 > div:nth-child(28)::after {
+			width: 63em; height: 1em;
+			background: var(--top-default-light);
+			transform: translate(-87em, -19em) translateZ(-42em) rotateX(90deg);
+		}
+.building-3 > div:nth-child(29) {
+		width: 2em; height: 1em;
+    background: var(--top-default-light);
+    box-shadow: -5em 0 var(--top-default-light), -8em 0 var(--top-default-light), -7em 0 var(--top-default-light), -13em 0 var(--top-default-light), -14em 0 var(--top-default-light), -16em 0 var(--top-default-light), -21em 0 var(--top-default-light), -22em 0 var(--top-default-light), -24em 0 var(--top-default-light), -29em 0 var(--top-default-light), -30em 0 var(--top-default-light), -32em 0 var(--top-default-light), -37em 0 var(--top-default-light), -38em 0 var(--top-default-light), -40em 0 var(--top-default-light), -45em 0 var(--top-default-light), -46em 0 var(--top-default-light), -48em 0 var(--top-default-light), -53em 0 var(--top-default-light), -55em 0 var(--top-default-light), -56em 0 var(--top-default-light), -61em 0 var(--top-default-light);
+    transform: translate(-93em, 22em) translateZ(-45em);
+	}
+.building-3 > div:nth-child(29)::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+.building-3 > div:nth-child(29)::after {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateX(-8em) rotateY(90deg);
+		}
+.building-3 > div:nth-child(30) {
+		width: 1em; height: 1em;
+    background: var(--left-default-light);
+    transform: translate(-109em, 22em) translateZ(-45em) rotateY(90deg);
+	}
+.building-3 > div:nth-child(30)::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateZ(-8em);
+		}
+.building-3 > div:nth-child(30)::after {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateZ(-16em);
+		}
+.building-3 > div:nth-child(31) {
+		width: 1em; height: 1em;
+    background: var(--left-default-light);
+    transform: translate(-133em, 22em) translateZ(-45em) rotateY(90deg);
+	}
+.building-3 > div:nth-child(31)::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateZ(-8em);
+		}
+.building-3 > div:nth-child(31)::after {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateZ(-16em);
+		}
+.building-3 > div:nth-child(32) {
+		width: 70em; height: 1em;
+    background: var(--left-default-light);
+    transform: translate(-150em, 22em) translateZ(-45em) rotateY(90deg);
+	}
+.building-3 > div:nth-child(32)::before {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(11em, 2em) translateZ(19em) rotateX(-90deg) rotateZ(-90deg);
+		}
+.building-3 > div:nth-child(32)::after {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(11em, 2em) translateZ(34em) rotateX(-90deg) rotateZ(-90deg);
+		}
+.building-3 > div:nth-child(33) {
+		width: 19em; height: 30em;
+    background: var(--left-default-light);
+    transform: translate(-106em, 66em) translateZ(-66em) rotateX(-90deg) rotateY(90deg);
+	}
+.building-3 > div:nth-child(33)::before {
+			width: 19em; height: 8em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg);
+		}
+.building-3 > div:nth-child(33)::after {
+			width: 8em; height: 30em;
+			background: var(--right-default-light);
+			transform: rotateY(-90deg);
+		}
+.building-3 > div:nth-child(34) {
+		width: 8em; height: 14em;
+		background: var(--top-default-light);
+		transform: translate(-38em, 43em) translateZ(-51em);
+	}
+.building-3 > div:nth-child(34)::before {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(-61em, -20em) translateZ(-6em) rotateX(-90deg);
+		}
+.building-3 > div:nth-child(34)::after {
+			width: 8em; height: 20em;
+			background: var(--top-default-light);
+			transform: translate(-77em, -15em) translateZ(-20em);
+		}
+.building-3 > div:nth-child(35) {
+		width: 1em; height: 2em;
+    background: var(--top-default-light);
+    box-shadow: -7em 0em var(--top-default-light), -7em 12em var(--top-default-light), -7em 7em var(--top-default-light), -7em 5em var(--top-default-light), 0em 12em var(--top-default-light), 0em 7em var(--top-default-light), 0em 5em var(--top-default-light);
+    transform: translate(-31em, 43em) translateZ(-50em);
+	}
+.building-3 > div:nth-child(35)::before {
+			width: 32em; height: 14em;
+			clip-path: polygon(0em 0em, 32em 0em, 32em 14em, 0em 14em, 0em 12em, 1em 12em, 1em 9em, 0em 9em, 0em 5em, 1em 5em, 1em 2em, 0em 2em);
+			background: var(--left-default-light);
+			transform: translateX(-7em) rotateY(90deg);
+		}
+.building-3 > div:nth-child(35)::after {
+			width: 8em; height: 32em;
+			clip-path: polygon(0em 0em, 2em 0em, 2em 1em, 6em 1em, 6em 0em, 8em 0em, 8em 32em, 0em 32em);
+			background: var(--right-default-light);
+			transform: translate(-7em, 14em) rotateX(-90deg);
+		}
+.building-3 > div:nth-child(36) {
+		width: 1em; height: 2em;
+    background: var(--left-default-light);
+    box-shadow: 0 12em var(--left-default-light), 0 7em var(--left-default-light), 0 5em var(--left-default-light);
+    transform: translate(-31em, 43em) translateZ(-50em) rotateY(90deg);
+	}
+.building-3 > div:nth-child(36)::before {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			box-shadow: 0 7em var(--right-default-light);
+			transform: translateY(2em) translateZ(1em) rotateX(-90deg);
+		}
+.building-3 > div:nth-child(36)::after {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			box-shadow: 0 7em var(--right-default-light);
+			transform: translateY(9em) translateZ(1em) rotateX(-90deg);
+		}
+.building-3 > div:nth-child(37) {
+		width: 2em; height: 1em;
+    background: var(--top-default-light);
+    box-shadow: -6em 0em var(--top-default-light);
+    transform: translate(-32em, 56em) translateZ(-50em);
+	}
+.building-3 > div:nth-child(37)::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+.building-3 > div:nth-child(37)::after {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(-3em, 1em) translateZ(-13em) rotateX(-90deg);
+		}
+.building-3 > div:nth-child(38) {
+		width: 1em; height: 1em;
+    background: var(--top-default-light);
+    box-shadow: 0 1em var(--top-default-light), 0 5em var(--top-default-light), 0 6em var(--top-default-light), 0 7em var(--top-default-light), 0 8em var(--top-default-light), 0 12em var(--top-default-light), 0 13em var(--top-default-light), 0 14em var(--top-default-light), 0 15em var(--top-default-light), 0 18em var(--top-default-light), 0 19em var(--top-default-light), 1em 19em var(--top-default-light), 6em 19em var(--top-default-light), 7em 19em var(--top-default-light), 7em 0 var(--top-default-light), 7em 1em var(--top-default-light), 7em 5em var(--top-default-light), 7em 6em var(--top-default-light), 7em 7em var(--top-default-light), 7em 8em var(--top-default-light), 7em 12em var(--top-default-light), 7em 13em var(--top-default-light), 7em 14em var(--top-default-light), 7em 15em var(--top-default-light), 7em 18em var(--top-default-light), 7em 19em var(--top-default-light);
+    transform: translate(-115em, 28em) translateZ(-70em);
+	}
+.building-3 > div:nth-child(38)::before {
+			width: 31em; height: 20em;
+			clip-path: polygon(0em 0em, 31em 0em, 31em 20em, 0em 20em, 0em 18em, 1em 18em, 1em 16em, 0em 16em, 0em 12em, 1em 12em, 1em 9em, 0em 9em, 0em 5em, 1em 5em, 1em 2em, 0em 2em);
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+.building-3 > div:nth-child(38)::after {
+			width: 8em; height: 31em;
+			clip-path: polygon(0em 0em, 0em 31em, 8em 31em, 8em 0em, 6em 0em, 6em 1em, 2em 1em, 2em 0em);
+			background: var(--right-default-light);
+			transform: translateY(20em) rotateX(-90deg);
+		}
+.building-3 > div:nth-child(39) {
+		width: 1em; height: 1em;
+    background: var(--right-default-light);
+    box-shadow: 7em 0 var(--right-default-light);
+    transform: translate(-115em, 30em) translateZ(-70em) rotateX(-90deg);
+	}
+.building-3 > div:nth-child(39)::before {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			box-shadow: 7em 0 var(--right-default-light);
+			transform: translateZ(7em);
+		}
+.building-3 > div:nth-child(39)::after {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			box-shadow: 7em 0 var(--right-default-light);
+			transform: translateZ(14em)
+		}
+.building-3 > div:nth-child(40) {
+		width: 2em; height: 1em;
+    background: var(--left-default-light);
+    box-shadow: 5em 0 var(--left-default-light), 7em 0 var(--left-default-light), 12em 0 var(--left-default-light), 14em 0 var(--left-default-light), 18em 0 var(--left-default-light);
+    transform: translate(-108em, 28em) translateZ(-70em) rotateX(-90deg) rotateY(-90deg);
+	}
+.building-3 > div:nth-child(40)::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateX(19em) translateZ(1em);
+		}
+.building-3 > div:nth-child(40)::after {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(20em, 12em) translateZ(3em) rotateY(90deg);
+		}
+.building-3 > div:nth-child(41) {
+		width: 16em; height: 16em;
+    background: var(--top-default-light);
+    transform: translate(1em, 1em) translateZ(3em);
+	}
+.building-3 > div:nth-child(41)::before {
+			width: 55em; height: 16em;
+			clip-path: polygon(0em 0em, 55em 0em, 55em 16em, 0em 16em, 0em 14em, 2em 14em, 2em 11em, 0em 11em, 0em 5em, 2em 5em, 2em 2em, 0em 2em);
+			background: var(--left-default-light);
+			transform: translateZ(2em) rotateY(90deg);
+		}
+.building-3 > div:nth-child(41)::after {
+			width: 100em; height: 16em;
+			clip-path: polygon(0em 0em, 100em 0em, 100em 16em, 0em 16em, 0em 14em, 2em 14em, 2em 11em, 0em 11em, 0em 5em, 2em 5em, 2em 2em, 0em 2em);
+			background: var(--right-default-light);
+			transform: translateY(16em) translateZ(2em) rotateZ(-90deg) rotateY(90deg);
+		}
+.building-3 > div:nth-child(42) {
+		width: 2em; height: 7em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+    border-right: 3px solid var(--right-window-v);
+    border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+    transform: translate(8em, 20em) rotateX(-90deg);
+	}
+.building-3 > .mooving-part-1 {
+		width: 8em; height: 30em;
+    background: var(--right-accent-light);
+		animation: b3Mp1 var(--animation);
+	}
+.building-3 > .mooving-part-1::before {
+			width: 8em; height: 10em;
+			background: var(--top-accent-light);
+			transform: translateY(-6em) translateZ(-8em) rotateX(53deg);
+		}
+.building-3 > .mooving-part-1::after {
+			width: 8em; height: 36em;
+			clip-path: polygon(0em 6em, 8em 0em, 8em 36em, 0em 36em);
+			background: var(--left-accent-light);
+			transform: translateY(-6em) rotateY(90deg);
+		}
+.building-3 > .mooving-part-1 > div {
+			width: 8em; height: 22em;
+			background: var(--right-accent-light);
+			transform-origin: bottom center;
+			animation: b3Mp1DIV var(--animation);
+		}
+.building-3 > .mooving-part-1 > div::before {
+				width: 8em; height: 8em;
+				background: var(--top-accent-light);
+				transform: rotateX(-90deg);
+			}
+.building-3 > .mooving-part-1 > div::after {
+				width: 8em; height: 22em;
+				clip-path: polygon(0em 0em, 8em 0em, 8em 16em, 0em 22em);
+				background: var(--left-accent-light);
+				transform: rotateY(90deg);
+			}
+.building-3 > .mooving-part-1 > div > div:nth-child(1) {
+				width: 8em; height: 16em;
+				background: var(--top-accent-light);
+				transform: translateZ(-8em);
+			}
+.building-3 > .mooving-part-1 > div > div:nth-child(1)::before {
+					width: 1em; height: 4em;
+					background: var(--top-accent-light);
+					transform: translate(-1em, 4em) translateZ(2em);
+				}
+.building-3 > .mooving-part-1 > div > div:nth-child(1)::after {
+					width: 1em; height: 4em;
+					background: var(--top-accent-light);
+					transform: translate(-1em, 12em) translateZ(2em);
+				}
+.building-3 > .mooving-part-1 > div > div:nth-child(2) {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				transform: translate(-1em, 4em) translateZ(-2em) rotateY(90deg);
+				animation: b3Mp1LeftPart var(--animation);
+			}
+.building-3 > .mooving-part-1 > div > div:nth-child(2)::before {
+					width: 1em; height: 4em;
+					transform: translate(-1em, -1em) rotateY(-90deg);
+					animation: b3Mp1RightPart var(--animation);
+				}
+.building-3 > .mooving-part-1 > div > div:nth-child(2)::after {
+					width: 4em; height: 1em;
+					transform: translate(-1em, -1em) rotateX(90deg);
+					animation: b3Mp1TopPart var(--animation);
+				}
+.building-3 > .mooving-part-1 > div > div:nth-child(3) {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				transform: translate(-1em, 12em) translateZ(-2em) rotateY(90deg);
+				animation: b3Mp1LeftPart var(--animation);
+			}
+.building-3 > .mooving-part-1 > div > div:nth-child(3)::before {
+					width: 1em; height: 4em;
+					transform: translate(-1em, -1em) rotateY(-90deg);
+					animation: b3Mp1RightPart var(--animation);
+				}
+.building-3 > .mooving-part-1 > div > div:nth-child(3)::after {
+					width: 4em; height: 1em;
+					transform: translate(-1em, -1em) rotateX(90deg);
+					animation: b3Mp1TopPart var(--animation);
+				}
+.building-3 > .mooving-part-2 {
+		width: 8em; height: 19em;
+    background: var(--left-default-light);
+		animation: b3Mp2 var(--animation);
+	}
+.building-3 > .mooving-part-2::before {
+			width: 29em; height: 24em;
+			clip-path: polygon(0em 0em, 29em 0em, 29em 23em, 28em 23em, 28em 22em, 27em 22em, 27em 21em, 26em 21em, 26em 20em, 25em 20em, 25em 19em, 0em 19em);
+			background: var(--top-default-light);
+			transform: rotateY(90deg);
+		}
+.building-3 > .mooving-part-2::after {
+			width: 29em; height: 24em;
+			clip-path: polygon(0em 0em, 29em 0em, 29em 23em, 28em 23em, 28em 22em, 27em 22em, 27em 21em, 26em 21em, 26em 20em, 25em 20em, 25em 19em, 0em 19em);
+			background: var(--top-default-light);
+			transform: translateX(8em) rotateY(90deg);
+		}
+.building-3 > .mooving-part-2 > div:nth-child(1) {
+			width: 1em; height: 8em;
+			background: var(--left-default-light);
+			transform: translate(8em, 21em) translateZ(-27em) rotateZ(90deg);
+		}
+.building-3 > .mooving-part-2 > div:nth-child(1)::before {
+				width: 1em; height: 8em;
+				background: var(--left-default-light);
+				transform: translateX(-1em) translateZ(1em);
+			}
+.building-3 > .mooving-part-2 > div:nth-child(1)::after {
+				width: 1em; height: 8em;
+				background: var(--left-default-light);
+				transform: translateX(-2em) translateZ(2em);
+			}
+.building-3 > .mooving-part-2 > div:nth-child(2) {
+			width: 1em; height: 8em;
+			background: var(--right-default-light);
+			transform: translate(8em, 23em) translateZ(-29em) rotateX(90deg) rotateY(0deg) rotateZ(90deg);
+		}
+.building-3 > .mooving-part-2 > div:nth-child(2)::before {
+				width: 25em; height: 8em;
+				background: var(--right-default-light);
+				transform: translateX(4em) translateZ(3em) translateZ(1em);
+			}
+.building-3 > .mooving-part-2 > div:nth-child(2)::after {
+				width: 1em; height: 8em;
+				background: var(--left-default-light);
+				transform: translateX(1em) rotateY(-90deg);
+			}
+.building-3 > .mooving-part-2 > div:nth-child(3) {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(22em) translateZ(-28em) rotateX(90deg);
+		}
+.building-3 > .mooving-part-2 > div:nth-child(3)::before {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(1em) translateZ(1em);
+			}
+.building-3 > .mooving-part-2 > div:nth-child(3)::after {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(2em) translateZ(2em);
+			}
+.building-3 > .mooving-part-3 {
+		width: 16em; height: 8em;
+    background: var(--top-accent-light);
+		animation: b3Mp3 var(--animation);
+	}
+.building-3 > .mooving-part-3::before {
+			width: 8em; height: 8em;
+			background: var(--left-accent-light);
+			transform: rotateY(90deg);
+		}
+.building-3 > .mooving-part-3::after {
+			width: 16em; height: 8em;
+			background: var(--right-accent-light);
+			transform: translateY(8em) rotateX(-90deg);
+		}
+.building-3 > .mooving-part-3 > div:nth-child(1) {
+			width: 4em; height: 4em;
+			box-sizing: border-box;
+			transform: translate(3em, 9em) translateZ(-2em) rotateX(-90deg);
+			animation: b3Mp3RightPart var(--animation);
+		}
+.building-3 > .mooving-part-3 > div:nth-child(1)::before {
+				width: 1em; height: 4em;
+				transform: translate(-1em, -1em) rotateY(90deg);
+				animation: b3Mp3LeftPart var(--animation);
+			}
+.building-3 > .mooving-part-3 > div:nth-child(1)::after {
+				width: 4em; height: 1em;
+				transform: translate(-1em, -1em) rotateX(-90deg);
+				animation: b3Mp3TopPart var(--animation);
+			}
+.building-3 > .mooving-part-3 > div:nth-child(2) {
+			width: 4em; height: 4em;
+			box-sizing: border-box;
+			transform: translate(10em, 9em) translateZ(-2em) rotateX(-90deg);
+			animation: b3Mp3RightPart var(--animation);
+		}
+.building-3 > .mooving-part-3 > div:nth-child(2)::before {
+				width: 1em; height: 4em;
+				transform: translate(-1em, -1em) rotateY(90deg);
+				animation: b3Mp3LeftPart var(--animation);
+			}
+.building-3 > .mooving-part-3 > div:nth-child(2)::after {
+				width: 4em; height: 1em;
+				transform: translate(-1em, -1em) rotateX(-90deg);
+				animation: b3Mp3TopPart var(--animation);
+			}
+.building-3 > .mooving-part-4 {
+		width: 8em; height: 8em;
+    background: var(--top-default-light);
+		animation: b3Mp4 var(--animation);
+	}
+.building-3 > .mooving-part-4::before {
+			width: 28em; height: 8em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+.building-3 > .mooving-part-4::after {
+			width: 8em; height: 30em;
+			background: var(--right-default-light);
+			transform: translateY(8em) rotateX(-90deg);
+		}
+
+.Ro {
+	transform-style: preserve-3d;
+	animation: ro var(--animation) linear;
+}
+
+.Ro > .Ro_1 {
+		animation: ro1 var(--animation) linear;
+	}
+
+.Ro > .Ro_1::before {
+			width: 140px; height: 268px;
+			background: conic-gradient(from 0.46turn at 34% -19%, #1a3468, 25deg, transparent, 25deg, transparent), linear-gradient(90deg, transparent 21%, #1a3468 21%, #1a3468 54%, transparent 21%);
+			border-radius: 0 0 35px 110px/0 0 35px 47px;
+			transform: translate(-10px, -414px) skewY(17deg);
+		}
+
+.Ro > .Ro_1 > .Ro__head {
+			width: 178px; height: 164px;
+			background: #1a3468;
+			box-shadow: inset 50px 35px 0 -40px white;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-50px, -562px) skew(13deg, 15deg);
+		}
+
+.Ro > .Ro_1 > .Ro__head::before {
+				width: 122px; height: 114px;
+				background: #1a3468;
+				border-radius: 50%;
+				transform: translate(116px, 116px);
+			}
+
+.Ro > .Ro_1 > .Ro__legl {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro1LegL var(--animation) ease;
+		}
+
+.Ro > .Ro_1 > .Ro__legl::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) 21px 73px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) 2px 81px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 29px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 29px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80%/0 13px 7px 17%;
+				transform-origin: 42px 13px;
+				animation: ro1KneeL var(--animation) ease;
+			}
+
+.Ro > .Ro_1 > .Ro__legr {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro1LegR var(--animation) ease;
+		}
+
+.Ro > .Ro_1 > .Ro__legr::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) 22px 73px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) 1px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 29px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 29px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80%/0 13px 7px 17%;
+				transform-origin: 42px 13px;
+				animation: ro1KneeR var(--animation) ease;
+			}
+
+.Ro > .Ro_1 > .Ro__dress {
+			width: 66px; height: 309px;
+			background: radial-gradient(#1a3468 71%, transparent 0%) 11px -17px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e, #f06687);
+			border-radius: 19px 36px 38px 45px/220px 250px 72px 112px;
+			transform-origin: top left;
+			transform: translate(5px, -370px) skewY(8deg) rotate(-3deg);
+		}
+
+.Ro > .Ro_1 > .Ro__dress::before {
+				width: 52px; height: 324px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) 3px -22px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e -8%, #f06687 100%);
+				border-radius: 19px 36px 38px 45px/220px 250px 72px 112px;
+				transform-origin: top left;
+				transform: translate(22px, 9px) skewY(8deg) rotate(-11deg);
+			}
+
+.Ro > .Ro_1 > .Ro__dress::after {
+				width: 43px; height: 309px;
+				background: linear-gradient(180deg, #f9ac3e -13%, #f06687 100%);
+				border-radius: 0px 0px 13px 40px/0px 0px 80px 120px;
+				transform-origin: top right;
+				transform: translate(7px, 21px) skewY(8deg) rotate(-30deg);
+			}
+
+.Ro > .Ro_1 > .Ro__dress > div {
+				width: 12px; height: 261px;
+				background: linear-gradient(180deg, #f9ac3e -8%, #f06687);
+				border-radius: 0 0 2px 10px/0 0 0px 70px;
+				transform-origin: top right;
+				transform: translate(48px, 18px) skewY(8deg) rotate(-30deg);
+			}
+
+.Ro > .Ro_1 > .Ro__dress > div::before {
+					width: 56px; height: 261px;
+					background: linear-gradient(180deg, #f9ac3e -5%, #f06687 100%);
+					border-radius: 0 0 42px 23px/0 0 100px 90px;
+					transform-origin: top left;
+					transform: translate(-27px, -28px) skewY(8deg) rotate(46deg);
+				}
+
+.Ro > .Ro_1 > .Ro__dress > div::after {
+					width: 8px;
+					height: 193px;
+					background: linear-gradient(180deg, #f9ac3e, #f06687);
+					border-radius: 0 0 5px 5px/0 0 22px 50px;
+					transform-origin: top left;
+					transform: translate(-41px, -16px) skewY(8deg) rotate(49deg);
+				}
+
+.Ro > .Ro_2 {
+		animation: ro2 var(--animation) linear;
+	}
+
+.Ro > .Ro_2::before {
+			width: 140px; height: 268px;
+			background: conic-gradient(from 0.46turn at 34% -19%, #1a3468, 25deg, transparent, 25deg, transparent), linear-gradient(90deg, transparent 21%, #1a3468 21%, #1a3468 54%, transparent 21%);
+			border-radius: 0 0 110px 35px/0 0 47px 35px;
+			transform: translate(-10px, -414px) skewY(17deg);
+		}
+
+.Ro > .Ro_2 > .Ro__head {
+			width: 178px; height: 164px;
+			background: #1a3468;
+			box-shadow: inset -50px 16px 0 -40px white;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-50px, -562px) skew(13deg, 15deg);
+		}
+
+.Ro > .Ro_2 > .Ro__head::before {
+				width: 122px; height: 114px;
+				background: #1a3468;
+				border-radius: 50%;
+				transform: translate(-81px, 69px);
+			}
+
+.Ro > .Ro_2 > .Ro__legl {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro2LegL var(--animation) ease;
+		}
+
+.Ro > .Ro_2 > .Ro__legl::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) -115px 75px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) -8px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 0px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 17% 7px;
+				transform-origin: 13px 13px;
+				animation: ro2KneeL var(--animation) ease;
+			}
+
+.Ro > .Ro_2 > .Ro__legr {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro2LegR var(--animation) ease;
+		}
+
+.Ro > .Ro_2 > .Ro__legr::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) -115px 75px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) -8px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 0px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 17% 7px;
+				transform-origin: 13px 13px;
+				animation: ro2KneeR var(--animation) ease;
+			}
+
+.Ro > .Ro_2 > .Ro__dress {
+			width: 74px; height: 287px;
+			background: radial-gradient(#1a3468 71%, transparent 0%) 17px -20px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e, #f06687);
+			border-radius: 36px 19px 45px 38px/250px 220px 112px 72px;
+			transform-origin: top left;
+			transform: translate(7px, -368px) skewY(8deg) rotate(5deg);
+		}
+
+.Ro > .Ro_2 > .Ro__dress::before {
+				width: 67px; height: 278px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) 17px -24px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e -1%, #f06687 100%);
+				border-radius: 36px 19px 45px 38px/250px 220px 112px 72px;
+				transform-origin: top left;
+				transform: translate(-13px, -15px) skewY(8deg) rotate(15deg);
+			}
+
+.Ro > .Ro_2 > .Ro__dress::after {
+				width: 53px; height: 256px;
+				background: linear-gradient(180deg, #f9ac3e -7%, #f06687 100%);
+				border-radius: 0px 0px 40px 13px/0px 0px 120px 80px;
+				transform-origin: top left;
+				transform: translate(11px, -5px) skewY(8deg) rotate(39deg);
+			}
+
+.Ro > .Ro_2 > .Ro__dress > div {
+				width: 8px; height: 227px;
+				background: linear-gradient(180deg, #f9ac3e, #f06687);
+				border-radius: 0 0 0px 6px/0 0 0px 70px;
+				transform-origin: top right;
+				transform: translate(57px, 18px) skewY(8deg) rotate(-22deg);
+			}
+
+.Ro > .Ro_2 > .Ro__dress > div::before {
+					width: 62px; height: 243px;
+					background: linear-gradient(180deg, #f9ac3e -16%, #f06687 100%);
+					border-radius: 0 0 23px 42px/0 0 90px 100px;
+					transform-origin: top right;
+					transform: translate(-54px, 24px) skewY(8deg) rotate(3deg);
+				}
+
+.Ro > .Ro_2 > .Ro__dress > div::after {
+					width: 8px; height: 193px;
+					background: linear-gradient(180deg, #f9ac3e, #f06687);
+					border-radius: 0 0 5px 5px/0 0 50px 22px;
+					transform-origin: top left;
+					transform: translate(-69px, -16px) skewY(8deg) rotate(58deg);
+				}
+
+.Ro > .Ro_3 {
+		animation: ro3 var(--animation) linear;
+	}
+
+.Ro > .Ro_3::before {
+			width: 140px; height: 268px;
+			background: conic-gradient(from 0.46turn at 34% -19%, #1a3468, 25deg, transparent, 25deg, transparent), linear-gradient(90deg, transparent 21%, #1a3468 21%, #1a3468 54%, transparent 21%);
+			border-radius: 0 0 35px 110px / 0 0 35px 47px;
+			transform: translate(-10px, -414px) skewY(17deg);
+		}
+
+.Ro > .Ro_3::after {
+			width: 32px; height: 211px;
+			background: linear-gradient(180deg, #f9ac3e, #f06687);
+			border-radius: 0 0 36px 25px / 0 0 62px 52px;
+			transform-origin: top left;
+			transform: translate(19px, -389px) rotate(24deg);
+			z-index: -1;
+		}
+
+.Ro > .Ro_3 > .Ro__head {
+			width: 178px; height: 164px;
+			background: #1a3468;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-50px, -562px) skew(13deg, 15deg);
+		}
+
+.Ro > .Ro_3 > .Ro__head::before {
+				width: 122px; height: 114px;
+				background: #1a3468;
+				border-radius: 50%;
+				transform: translate(139px, -11px);
+			}
+
+.Ro > .Ro_3 > .Ro__head::after {
+				width: 100%; height: 100%;
+				background: radial-gradient(ellipse 80px 110px, white 74%, transparent 0%) -41px 3px no-repeat;
+				border-radius: 50%;
+			}
+
+.Ro > .Ro_3 > .Ro__legl {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro3LegL var(--animation) ease;
+		}
+
+.Ro > .Ro_3 > .Ro__legl::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) 17px 74px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) 0px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 29px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 29px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80% / 0 13px 7px 17%;
+				transform-origin: 42px 13px;
+				animation: ro3KneeL var(--animation) ease;
+			}
+
+.Ro > .Ro_3 > .Ro__legr {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro3LegR var(--animation) ease;
+		}
+
+.Ro > .Ro_3 > .Ro__legr::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) 17px 74px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) 0px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 29px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 29px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80% / 0 13px 7px 17%;
+				transform-origin: 42px 13px;
+				animation: ro3KneeR var(--animation) ease;
+			}
+
+.Ro > .Ro_3 > .Ro__dress {
+			width: 74px; height: 287px;
+			background: radial-gradient(#1a3468 71%, transparent 0%) 6px -20px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e, #f06687);
+			border-radius: 19px 36px 38px 45px/220px 250px 72px 112px;
+			transform-origin: top left;
+			transform: translate(19px, -368px) skewY(8deg) rotate(-1deg);
+		}
+
+.Ro > .Ro_3 > .Ro__dress::before {
+				width: 68px; height: 313px;
+				background: linear-gradient(180deg, #f9ac3e -15%, #f06687 100%);
+				border-radius: 19px 36px 38px 45px/220px 250px 72px 112px;
+				transform-origin: top left;
+				transform: translateY(17px) skewY(8deg) rotate(-23deg);
+			}
+
+.Ro > .Ro_3 > .Ro__dress::after {
+				width: 53px; height: 302px;
+				background: linear-gradient(180deg, #f9ac3e -16%, #f06687 100%);
+				border-radius: 0px 0px 13px 40px/0px 0px 80px 120px;
+				transform-origin: top left;
+				transform: translate(9px, 33px) skewY(8deg) rotate(-42deg);
+			}
+
+.Ro > .Ro_3 > .Ro__dress > div {
+				width: 8px; height: 107px;
+				background: linear-gradient(180deg, #f9ac3e, #f06687);
+				border-radius: 0 0 6px 0px/0 0 70px 0px;
+				transform-origin: top left;
+				transform: translate(-16px, 23px) skewY(8deg) rotate(26deg);
+			}
+
+.Ro > .Ro_3 > .Ro__dress > div::before {
+					width: 22px; height: 243px;
+					background: linear-gradient(180deg, #f9ac3e, #f06687);
+					border-radius: 0 0 10px 12px/0 0 20px 60px;
+					transform-origin: top left;
+					transform: translate(50px, -6px) skewY(8deg) rotate(-90deg);
+				}
+
+.Ro > .Ro_3 > .Ro__dress > div::after {
+					width: 11px; height: 133px;
+					background: linear-gradient(180deg, #f9ac3e, #f06687);
+					border-radius: 0 0 5px 5px/0 0 50px 22px;
+					transform-origin: top right;
+					transform: translate(57px, -36px) skewY(8deg) rotate(-90deg);
+				}
+
+.Ro > .Ro_4 {
+		animation: ro4 var(--animation) linear;
+	}
+
+.Ro > .Ro_4::before {
+			width: 140px; height: 268px;
+			background: conic-gradient(from 0.46turn at 34% -25%, #1a3468, 25deg, transparent, 25deg, transparent), linear-gradient(90deg, transparent 21%, #1a3468 21%, #1a3468 54%, transparent 21%);
+			border-radius: 0 0 35px 110px/0 0 35px 47px;
+			transform: translate(-10px, -414px) skewY(10deg);
+		}
+
+.Ro > .Ro_4::after {
+			width: 19px; height: 311px;
+			background: linear-gradient(180deg, #f9ac3e, #f06687);
+			border-radius: 0 0 15px 36px/0 0 82px 142px;
+			transform-origin: top right;
+			transform: translate(47px, -362px) rotate(-19deg);
+			z-index: -1;
+		}
+
+.Ro > .Ro_4 > .Ro__head {
+			width: 178px; height: 164px;
+			background: #1a3468;
+			border-radius: 50%;
+			transform-origin: center center;
+			animation: ro4Head var(--animation);
+		}
+
+.Ro > .Ro_4 > .Ro__head::before {
+				width: 122px; height: 114px;
+				background: #1a3468;
+				border-radius: 50%;
+				transform: translate(-81px, -51px);
+			}
+
+.Ro > .Ro_4 > .Ro__head::after {
+				width: 100%; height: 100%;
+				background: radial-gradient(ellipse 80px 110px, white 74%, transparent 0%) 31px 5px no-repeat;
+				border-radius: 50%;
+				transform-origin: center center;
+				animation: ro4Face var(--animation);
+			}
+
+.Ro > .Ro_4 > .Ro__legl {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro4LegL var(--animation) ease;
+		}
+
+.Ro > .Ro_4 > .Ro__legl::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) -119px 73px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) -9px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 0px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 17% 7px;
+				transform-origin: 13px 13px;
+				animation: ro4KneeL var(--animation) ease;
+			}
+
+.Ro > .Ro_4 > .Ro__legr {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro4LegR var(--animation) ease;
+		}
+
+.Ro > .Ro_4 > .Ro__legr::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) -119px 73px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) -9px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 0px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 17% 7px;
+				transform-origin: 13px 13px;
+				animation: ro4KneeR var(--animation) ease;
+			}
+
+.Ro > .Ro_4 > .Ro__dress {
+			width: 74px; height: 287px;
+			background: radial-gradient(#1a3468 71%, transparent 0%) 24px -16px/52px 26px no-repeat, linear-gradient(180deg, #f9ac3e, #f06687);
+			border-radius: 36px 19px 45px 38px/250px 220px 112px 72px;
+			transform-origin: top left;
+			transform: translate(-3px, -390px) skewY(24deg) rotate(2deg);
+		}
+
+.Ro > .Ro_4 > .Ro__dress::before {
+				width: 68px; height: 287px;
+				background: linear-gradient(180deg, #f9ac3e -15%, #f06687 100%);
+				border-radius: 36px 19px 45px 38px/250px 220px 112px 72px;
+				transform-origin: top left;
+				transform: translate(2px, -9px) skewY(11deg) rotate(20deg);
+			}
+
+.Ro > .Ro_4 > .Ro__dress::after {
+				width: 53px; height: 282px;
+				background: linear-gradient(180deg, #f9ac3e -16%, #f06687 100%);
+				border-radius: 0px 0px 40px 13px/0px 0px 120px 80px;
+				transform-origin: top left;
+				transform: translate(21px, -2px) skewY(8deg) rotate(42deg);
+			}
+
+.Ro > .Ro_4 > .Ro__dress > div {
+				width: 8px; height: 107px;
+				background: linear-gradient(180deg, #f9ac3e -40%, #f06687);
+				border-radius: 0 0 0px 6px/0 0 0px 70px;
+				transform-origin: top left;
+				transform: translate(96px, 73px) skewY(8deg) rotate(-31deg);
+			}
+
+.Ro > .Ro_4 > .Ro__dress > div::before {
+					width: 24px; height: 243px;
+					background: linear-gradient(180deg, #f9ac3e, #f06687);
+					border-radius: 0 0 12px 10px/0 0 60px 20px;
+					transform-origin: top left;
+					transform: translate(-57px, -86px) skewY(8deg) rotate(72deg);
+				}
+
+.Ro > .Ro_4 > .Ro__dress > div::after {
+					width: 11px; height: 133px;
+					background: linear-gradient(180deg, #f9ac3e -10%, #f06687);
+					border-radius: 0 0 5px 5px/0 0 50px 22px;
+					transform-origin: top left;
+					transform: translate(-83px, -81px) skewY(8deg) rotate(77deg);
+				}
+
+.Ro > .Ro__arml {
+		width: 1px; height: 9px;
+		border-radius: 20px;
+		border-radius: 1px;
+    transform-origin: top center;
+		animation: roArmL var(--animation) linear;
+	}
+
+.Ro > .Ro__arml::before {
+			width: 1px; height: 9px;
+			border-radius: 20px;
+			border-radius: 1px;
+			transform-origin: 0.5px 1px;
+			animation: roHandL var(--animation) linear;
+		}
+
+.Ro > .Ro__armr {
+		width: 1px; height: 9px;
+		border-radius: 20px;
+		border-radius: 1px;
+    transform-origin: top center;
+		z-index: -1;
+		animation: roArmR var(--animation) linear;
+	}
+
+.Ro > .Ro__armr::before {
+			width: 1px; height: 9px;
+			border-radius: 20px;
+			border-radius: 1px;
+			transform-origin: 0.5px 1px;
+			animation: roHandR var(--animation) linear;
+		}
+
+.Girl {
+	transform-style: preserve-3d;
+	animation: girl var(--animation) linear;
+}
+
+.Girl > .Girl_1 {
+		animation: girl1 var(--animation) linear;
+	}
+
+.Girl > .Girl_1 > .Girl__dress {
+			width: 194px; height: 228px;
+			background: conic-gradient(from 0rad at 25% 16%, transparent 0deg 183deg, white 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% 0%, transparent 0deg 150deg, #d62939 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% -20%, transparent 0deg 159deg, #d62939 159deg 203deg, transparent 0deg 360deg);
+			border-radius: 0 0 45px 178px/0 0 41px 87px;
+			transform-origin: top left;
+			transform: translate(-51px, -335px) skewY(15deg);
+		}
+
+.Girl > .Girl_1 > .Girl__head {
+			width: 172px; height: 163px;
+			background: white;
+			box-shadow: inset -230px -97px 0 -120px #d62939;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-33px, -446px) skew(13deg, 15deg);
+		}
+
+.Girl > .Girl_1 > .Girl__head::before {
+				left: 50%;
+				width: 124px; height: 159px;
+				background: linear-gradient(-136deg, #d62939 66%, transparent 0%);
+				border-radius: 0 110px 26px 20px/0 55px 104px 20px;
+				transform-origin: top left;
+				transform: translate(33px, 6px) rotate(29deg);
+			}
+
+.Girl > .Girl_1 > .Girl__legl {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl1LegL var(--animation) ease;
+		}
+
+.Girl > .Girl_1 > .Girl__legl::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) 17px 29px/155px 54px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) 2px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 18px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 18px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80%/0 13px 7px 34%;
+				transform-origin: 31px 13px;
+				animation: girl1KneeL var(--animation) ease;
+			}
+
+.Girl > .Girl_1 > .Girl__legr {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl1LegR var(--animation) ease;
+		}
+
+.Girl > .Girl_1 > .Girl__legr::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) 17px 29px/155px 54px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) 2px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 18px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 18px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80%/0 13px 7px 34%;
+				transform-origin: 31px 13px;
+				animation: girl1KneeR var(--animation) ease;
+			}
+
+.Girl > .Girl__arml {
+		width: 1px; height: 5px;
+    border-radius: 1px;
+    transform-origin: top center;
+		animation: girlArmL var(--animation);
+	}
+
+.Girl > .Girl__arml::before {
+			width: 1px; height: 5px;
+			border-radius: 1px;
+			transform-origin: top center;
+			animation: girlHandL var(--animation);
+		}
+
+.Girl > .Girl_2 {
+		animation: girl2 var(--animation) linear;
+	}
+
+.Girl > .Girl_2 > .Girl__dress {
+			width: 194px; height: 228px;
+			background: conic-gradient(from 0rad at 67% 16%, transparent 0deg 150deg, white 0deg 172deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% -20%, transparent 0deg 150deg, #d62939 150deg 200deg, transparent 0deg 360deg);
+			border-radius: 0 0 178px 45px/0 0 87px 41px;
+			transform-origin: top left;
+			transform: translate(-41px, -368px) skewY(35deg);
+		}
+
+.Girl > .Girl_2 > .Girl__head {
+			width: 172px; height: 163px;
+			background: white;
+			box-shadow: inset 210px 0px 0 -90px #d62939;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-33px, -446px) skew(15deg, 16deg);
+		}
+
+.Girl > .Girl_2 > .Girl__head::before {
+				left: -50%;
+				width: 124px; height: 159px;
+				background: linear-gradient(136deg, #d62939 66%, transparent 0%);
+				border-radius: 110px 0 20px 26px/55px 0 20px 104px;
+				transform-origin: top right;
+				transform: translateX(41px);
+			}
+
+.Girl > .Girl_2 > .Girl__legl {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl2LegL var(--animation) ease;
+		}
+
+.Girl > .Girl_2 > .Girl__legl::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) -149px 39px/185px 34px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) -14px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 0px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 34% 7px;
+				transform-origin: 13px 13px;
+				animation: girl2KneeL var(--animation) ease;
+			}
+
+.Girl > .Girl_2 > .Girl__legr {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl2LegR var(--animation) ease;
+		}
+
+.Girl > .Girl_2 > .Girl__legr::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) -149px 39px/185px 34px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) -14px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 0px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 34% 7px;
+				transform-origin: 13px 13px;
+				animation: girl2KneeR var(--animation) ease;
+			}
+
+.Girl > .Girl_3 {
+		animation: girl3 var(--animation) linear;
+	}
+
+.Girl > .Girl_3 > .Girl__dress {
+			width: 194px; height: 228px;
+			background: radial-gradient(ellipse 25px 30px, white 74%, transparent 0%) -46px -35px no-repeat, conic-gradient(from 0rad at 36% 33%, transparent 0deg 149deg, white 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 19% 28%, transparent 0deg 143deg, white 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% 0%, transparent 0deg 147deg, #d62939 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% -20%, transparent 0deg 159deg, #d62939 159deg 203deg, transparent 0deg 360deg);
+			border-radius: 0 0 45px 178px / 0 0 41px 87px;
+			transform-origin: top left;
+			transform: translate(-51px, -335px) skewY(15deg);
+		}
+
+.Girl > .Girl_3 > .Girl__head {
+			width: 172px; height: 163px;
+			background: #d62939;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-33px, -446px) skew(13deg, 15deg);
+		}
+
+.Girl > .Girl_3 > .Girl__head::before {
+				left: 50%;
+				width: 124px; height: 159px;
+				background: linear-gradient(-136deg, #d62939 66%, transparent 0%);
+				border-radius: 0 110px 26px 20px / 0 55px 104px 20px;
+			}
+
+.Girl > .Girl_3 > .Girl__head::after {
+				width: 100%; height: 100%;
+				background: radial-gradient(ellipse 92px 108px, white 74%, transparent 0%) -26px -11px no-repeat;
+				border-radius: 50%;
+				transform: translate(-16px, 27px) rotate(-18deg);
+			}
+
+.Girl > .Girl_3 > .Girl__legl {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl3LegL var(--animation) ease;
+		}
+
+.Girl > .Girl_3 > .Girl__legl::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) 17px 29px/155px 54px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) 2px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 18px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 18px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80%/0 13px 7px 34%;
+				transform-origin: 31px 13px;
+				animation: girl3KneeL var(--animation) ease;
+			}
+
+.Girl > .Girl_3 > .Girl__legr {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl3LegR var(--animation) ease;
+		}
+
+.Girl > .Girl_3 > .Girl__legr::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) 17px 29px/155px 54px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) 2px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 18px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 18px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80%/0 13px 7px 34%;
+				transform-origin: 31px 13px;
+				animation: girl3KneeR var(--animation) ease;
+			}
+
+.Girl > .Girl_4 {
+		animation: girl4 var(--animation) linear;
+	}
+
+.Girl > .Girl_4 > .Girl__dress {
+			width: 194px; height: 228px;
+			background: radial-gradient(ellipse 27px 25px, white 74%, transparent 0%) 30px -42px no-repeat, conic-gradient(from 0rad at 56% 28%, transparent 0deg 149deg, white 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 74% 27%, transparent 0deg 149deg, white 0deg 213deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% 0%, transparent 0deg 183deg, #d62939 0deg 208deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% -20%, transparent 0deg 150deg, #d62939 150deg 200deg, transparent 0deg 360deg);
+			border-radius: 0 0 178px 45px/0 0 87px 41px;
+			transform-origin: top left;
+			transform: translate(-41px, -368px) skewY(35deg);
+		}
+
+.Girl > .Girl_4 > .Girl__head {
+			width: 172px; height: 163px;
+			background: #d62939;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-33px, -446px) skew(15deg, 16deg);
+		}
+
+.Girl > .Girl_4 > .Girl__head::before {
+				left: -50%;
+				width: 124px; height: 159px;
+				background: linear-gradient(136deg, #d62939 66%, transparent 0%);
+				border-radius: 110px 0 20px 26px/55px 0 20px 104px;
+				transform-origin: top right;
+				transform: translate(68px, 2px) rotate(15deg);
+			}
+
+.Girl > .Girl_4 > .Girl__head::after {
+				width: 100%; height: 100%;
+				background: radial-gradient(ellipse 102px 108px, white 74%, transparent 0%) 24px 25px no-repeat;
+				border-radius: 50%;
+			}
+
+.Girl > .Girl_4 > .Girl__legl {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl4LegL var(--animation) ease;
+		}
+
+.Girl > .Girl_4 > .Girl__legl::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) -149px 39px/185px 34px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) -14px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 0px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 34% 7px;
+				transform-origin: 13px 13px;
+				animation: girl4KneeL var(--animation) ease;
+			}
+
+.Girl > .Girl_4 > .Girl__legr {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl4LegR var(--animation) ease;
+		}
+
+.Girl > .Girl_4 > .Girl__legr::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) -149px 39px/185px 34px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) -14px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 0px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 34% 7px;
+				transform-origin: 13px 13px;
+				animation: girl4KneeR var(--animation) ease;
+			}
+
+
+
+/* COMMON */
+@keyframes frame {
+  0%, 1%, 100% { background: black; }
+	3.1%, 98% { background: transparent; }
+}
+@keyframes scene {
+  0%, 1%     { opacity: 0; }
+	3.1%, 100% { opacity: 1; }
+  
+  00.00%, 30.11% { transform: translate(-57px, -136px); }
+  31.96%, 56.97% { transform: translate(-51px, 966px); }
+  58.23%         { transform: translate(-64px, 946px); }
+  58.38%         { transform: translate(-64px, 942px); }
+  58.89%         { transform: translate(-74px, 932px); }
+  59.48%         { transform: translate(-83px, 916px); }
+  59.93%         { transform: translate(-92px, 904px); }
+  60.52%         { transform: translate(-106px, 884px); }
+  60.96%         { transform: translate(-116px, 870px); }
+  61.40%         { transform: translate(-126px, 853px); }
+  62.43%         { transform: translate(-153px, 814px); }
+  62.66%         { transform: translate(-165px, 809px); }
+  63.25%         { transform: translate(-180px, 783px); }
+  63.54%         { transform: translate(-188px, 767px); }
+  63.84%         { transform: translate(-200px, 760px); }
+  64.21%         { transform: translate(-212px, 743px); }
+  64.80%         { transform: translate(-231px, 714px); }
+  65.02%         { transform: translate(-239px, 704px); }
+  65.61%         { transform: translate(-259px, 676px); }
+  66.20%         { transform: translate(-276px, 647px); }
+  66.72%         { transform: translate(-294px, 623px); }
+  67.31%         { transform: translate(-313px, 595px); }
+  67.75%         { transform: translate(-329px, 584px); }
+  68.34%         { transform: translate(-347px, 558px); }
+  68.86%         { transform: translate(-364px, 535px); }
+  69.30%         { transform: translate(-378px, 516px); }
+  70.18%         { transform: translate(-403px, 481px); }
+  71.36%         { transform: translate(-433px, 439px); }
+  72.47%         { transform: translate(-453px, 406px); }
+  76.60%, 100.0% { transform: translate(-488px, 355px); }
+}
+
+
+
+/* COVER */
+@keyframes cover {
+  0%, 1% {
+    background: radial-gradient(#9a0000a1 0%, black 0%);
+    opacity: 0;
+  }
+	3.09% {
+    background: radial-gradient(#9a0000a1 0%, black 100%);
+    opacity: 1;
+  }
+  7.82% { opacity: 1; }
+  9.44%, 100% { opacity: 0; }
+}
+@keyframes coverButton {
+  0%, 3.17%, 7.53%, 100% { opacity: 0; }
+  4.35%, 6.49%           { opacity: 1; }
+  
+  6.42%, 6.86% { transform: scale(1); }
+  6.49%        { transform: scale(1.25); }
+}
+@keyframes coverButtonShadow {
+  3.25%, 5.09%, 6.57%, 7.53% { opacity: 0; }
+  4.43%, 6.79% { opacity: 0.4; }
+  
+  3.25%, 6.57% { transform: scale(1); }
+  5.09%, 7.53% { transform: scale(1.9); }
+}
+
+
+
+/* FIRST BUILDING */
+@keyframes firstBuilding {
+  0%, 31.96%   { opacity: 1; }
+  31.97%, 100% { opacity: 0;}
+}
+@keyframes b1Mp2 {
+  0%, 11.66%, 12.18%, 12.40% { transform: translate(30em, 15em) translateZ(-18em); }
+  11.81% { transform: translate(30em, 15em) translateZ(-17em); }
+  12.03% { transform: translate(30em, 15em) translateZ(-18em); }
+  12.10% { transform: translate(30em, 15em) translateZ(-17.5em); }
+  12.69%, 100% { transform: translate(30em, 15em) translateZ(15em); }
+}
+  @keyframes b1Mp2TopPart {
+    00.00%, 11.59%, 12.25%, 12.32%, 13.51%, 100.0% { background: var(--top-accent-light); }
+    11.66%, 11.81%, 12.40%, 13.06% { background: white; }
+  }
+  @keyframes b1Mp2LeftPart {
+    00.00%, 11.59%, 12.25%, 12.32%, 13.51%, 100.0% { background: var(--left-accent-light); }
+    11.66%, 11.81%, 12.40%, 13.06% { background: white; }
+  }
+  @keyframes b1Mp2RightPart {
+    00.00%, 11.59%, 12.25%, 12.32%, 13.51%, 100.0% {
+      border-color: var(--right-accent-light);
+      background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
+      box-shadow: 0 0 6em 2em transparent; }
+    
+    11.66%, 11.81%, 12.40%, 13.06% {
+      border-color: white;
+      background: linear-gradient(45deg, white 50%, white 0%);
+      box-shadow: 0 0 6em 2em white; }
+  }
+@keyframes b1Mp1 {
+  00.00%, 19.19% { transform: translate(78em, -58em) translateZ(23em); }
+  19.78%, 25.46% { transform: translate(78em, -32em) translateZ(23em); }
+  25.83%, 100.0% { transform: translate(78em, -78em) translateZ(23em); }
+}
+  @keyframes b1Mp1LeftPart {
+    00.00%, 19.19%, 20.81%, 25.46%, 26.57%, 100.0% {
+      border-color: var(--left-accent-light);
+      background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
+      box-shadow: 0 0 6em 2em transparent; }
+    
+    19.41%, 20.37%, 25.53%, 26.13% {
+      border-color: white;
+      background: linear-gradient(45deg, white 50%, white 0%);
+      box-shadow: 0 0 6em 2em white; }
+  }
+  @keyframes b1Mp1TopPart {
+    00.00%, 19.19%, 20.81%, 25.46%, 26.57%, 100.0% { background: var(--top-accent-light); }
+    19.41%, 20.37%, 25.53%, 26.13% { background: white; }
+  }
+  @keyframes b1Mp1RightPart {
+    00.00%, 19.19%, 20.81%, 25.46%, 26.57%, 100.0% { background: var(--right-accent-light); }
+    19.41%, 20.37%, 25.53%, 26.13% { background: white; }
+  }
+
+
+
+
+/* SECOND BUILDING */
+@keyframes secondBuilding {
+  00.00%, 55.05%, 58.89%, 100.0% { transform: translate(15em, -78em) rotateX(55deg) rotateZ(-45deg); }
+  55.20% { transform: translate(15em, -78em) translate(0.75em, 0em) rotateX(55deg) rotateZ(-45deg); }
+  55.35% { transform: translate(15em, -78em) translate(0.5em, 1.5em) rotateX(55deg) rotateZ(-45deg); }
+  55.50% { transform: translate(15em, -78em) translate(-1em, 1.25em) rotateX(55deg) rotateZ(-45deg); }
+  55.65% { transform: translate(15em, -78em) translate(1em, -0.5em) rotateX(55deg) rotateZ(-45deg); }
+  55.79% { transform: translate(15em, -78em) translate(-0.5em, -0.75em) rotateX(55deg) rotateZ(-45deg); }
+  55.94% { transform: translate(15em, -78em) translate(-0.75em, 0.75em) rotateX(55deg) rotateZ(-45deg); }
+  56.09% { transform: translate(15em, -78em) translate(-0.25em, 0.5em) rotateX(55deg) rotateZ(-45deg); }
+  56.24% { transform: translate(15em, -78em) translate(0.5em, 0.5em) rotateX(55deg) rotateZ(-45deg); }
+  56.38% { transform: translate(15em, -78em) translate(-0.75em, 0.75em) rotateX(55deg) rotateZ(-45deg); }
+  56.53% { transform: translate(15em, -78em) translate(0.75em, -1em) rotateX(55deg) rotateZ(-45deg); }
+  56.68% { transform: translate(15em, -78em) translate(-0.75em, -0.5em) rotateX(55deg) rotateZ(-45deg); }
+  56.83% { transform: translate(15em, -78em) translate(-0.5em, -0.5em) rotateX(55deg) rotateZ(-45deg); }
+  56.97% { transform: translate(15em, -78em) translate(0.75em, 0.5em) rotateX(55deg) rotateZ(-45deg); }
+  57.12% { transform: translate(15em, -78em) translate(-0.75em, -0.75em) rotateX(55deg) rotateZ(-45deg); }
+}
+@keyframes b2Mp1 {
+  00.00%, 35.65%, 36.97%, 40.00%, 41.70%, 42.36%, 46.05%, 100.0% { transform: translate(15em, 15em) translateZ(46em); }
+  35.87%, 36.68%, 40.37%, 41.48% { transform: translate(15em, 15em) translateZ(15em); }
+  43.62%, 45.83% { transform: translate(15em, 15em) translateZ(30em); }
+}
+  @keyframes b2Mp1TopPart {
+    00.00%, 35.57%, 37.86%, 39.93%, 44.50%, 45.76%, 46.79%, 100.0% { background: var(--top-accent-light); }
+    35.65%, 37.42%, 40.00%, 43.62%, 45.83%, 46.35% { background: white; }
+  }
+  @keyframes b2Mp1RightPart {
+    00.00%, 35.57%, 37.86%, 39.93%, 44.50%, 45.76%, 46.79%, 100.0% { background: var(--right-accent-light); }
+    35.65%, 37.42%, 40.00%, 43.62%, 45.83%, 46.35% { background: white; }
+  }
+  @keyframes b2Mp1LeftPart {
+    00.00%, 35.57%, 37.86%, 39.93%, 44.50%, 45.76%, 46.79%, 100.0% {
+      border: 1em solid var(--left-accent-light);
+      background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
+      box-shadow: 0 0 6em 2em transparent; }
+    
+    35.65%, 37.42%, 40.00%, 43.62%, 45.83%, 46.35% {
+      border: 1em solid white;
+      background: linear-gradient(45deg, white 50%, white 0%);
+      box-shadow: 0 0 6em 2em white; }
+  }
+@keyframes b2Mp2 {
+  00.00%, 35.65%, 36.97%, 40.00%, 41.70%, 42.36%, 46.05%, 100.0% { transform: translate(15em, 30em) translateZ(15em); }
+  35.87%, 36.68%, 40.37%, 41.48% { transform: translate(15em, 30em) translateZ(46em); }
+  43.62%, 45.83% { transform: translate(15em, 30em) translateZ(30em); }
+}
+@keyframes b2Mp3 {
+  00.00%, 55.13% { transform: translate(39em, 23em) translateZ(75em); }
+  55.87%, 55.94% { transform: translate(39em, 23em) translateZ(55em); }
+  56.01%, 100.0% { transform: translate(39em, 23em) translateZ(53em); }
+}
+@keyframes b2Mp4 {
+  00.00%, 49.74% { transform: translate(31em, 7em) translateZ(75em); }
+  50.18% { transform: translate(31em, -23em) translateZ(75em); }
+  49.96%, 50.63%, 52.47% { transform: translate(31em, -24em) translateZ(75em); }
+  52.77%, 100.0% { transform: translate(31em, 7em) translateZ(75em); }
+}
+  @keyframes b2Mp4TopPart {
+    00.00%, 49.74%, 50.63%, 52.47%, 53.73%, 100.0% { background: var(--top-accent-light); }
+    49.82%, 49.96%, 52.55%, 52.77% { background: white; }
+  }
+  @keyframes b2Mp4RightPart {
+    00.00%, 49.74%, 50.63%, 52.47%, 53.73%, 100.0% { background: var(--right-accent-light); }
+    49.82%, 49.96%, 52.55%, 52.77% { background: white; }
+  }
+  @keyframes b2Mp4LeftPart {
+    00.00%, 49.74%, 50.63%, 52.47%, 53.73%, 100.0% {
+      border: 1em solid var(--left-accent-light);
+      background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
+      box-shadow: 0 0 6em 2em transparent; }
+    
+    49.82%, 49.96%, 52.55%, 52.77% {
+      border: 1em solid white;
+      background: linear-gradient(45deg, white 50%, white 0%);
+      box-shadow: 0 0 6em 2em white; }
+  }
+@keyframes b2Mp5 {
+  00.00%, 56.24% { transform: translate(54em, 14em) translateZ(75em); }
+  56.97% { transform: translate(54em, 15em) translateZ(74em); }
+  58.23% { transform: translate(54em, 24em) translateZ(68em); }
+  58.38% { transform: translate(54em, 25em) translateZ(67em); }
+  58.89% { transform: translate(54em, 30em) translateZ(63em); }
+  59.48% { transform: translate(54em, 35em) translateZ(57em); }
+  59.93% { transform: translate(54em, 40em) translateZ(53em); }
+  60.52% { transform: translate(54em, 47em) translateZ(47em); }
+  60.96% { transform: translate(54em, 51em) translateZ(41em); }
+  61.40% { transform: translate(54em, 55em) translateZ(20em); }
+  62.43% { transform: translate(54em, 65em) translateZ(17em); }
+  62.66% { transform: translate(54em, 67em) translateZ(17em); }
+  63.25% { transform: translate(54em, 71em) translateZ(15em); }
+  63.54% { transform: translate(54em, 74em) translateZ(13em) rotateY(7deg) rotateZ(26deg); }
+  63.84% { transform: translate(54em, 77em) translateZ(9em) rotateY(14deg) rotateZ(48deg); }
+  64.21% { transform: translate(54em, 80em) translateZ(9em) rotateX(-11deg) rotateY(14deg) rotateZ(64deg); }
+  64.80% { transform: translate(54em, 84em) translateZ(1em) rotateX(-9deg) rotateY(6deg) rotateZ(83deg); }
+  65.02% { transform: translate(54em, 84em) translateZ(-4em) rotateX(-9deg) rotateY(4deg) rotateZ(92deg); }
+  65.61% { transform: translate(52em, 83em) translateZ(-9em) rotateX(-5deg) rotateY(-11deg) rotateZ(95deg); }
+  66.20% { transform: translate(51em, 90em) translateZ(-16em) rotateX(-8deg) rotateY(-11deg) rotateZ(95deg); }
+  66.72% { transform: translate(44em, 90em) translateZ(-18em) rotateX(-7deg) rotateY(4deg) rotateZ(95deg); }
+  67.31% { transform: translate(45em, 89em) translateZ(-27em) rotateX(-15deg) rotateY(6deg) rotateZ(86deg); }
+  67.75% { transform: translate(46em, 89em) translateZ(-30em) rotateX(-13deg) rotateY(5deg) rotateZ(86deg); }
+  68.34% { transform: translate(46em, 91em) translateZ(-36em) rotateX(-3deg) rotateY(3deg) rotateZ(90deg); }
+  68.86% { transform: translate(46em, 93em) translateZ(-40em) rotateX(-3deg) rotateZ(90deg); }
+  69.30% { transform: translate(46em, 94em) translateZ(-41em) rotateZ(90deg); }
+  70.18% { transform: translate(46em, 102em) translateZ(-53em) rotateX(10deg) rotateZ(90deg); }
+  71.36% { transform: translate(31em, 115em) translateZ(-69em) rotateX(9deg) rotateZ(90deg); }
+  72.47%, 100.0% { transform: translate(18em, 151em) translateZ(-69em) rotateZ(90deg); }
+}
+  @keyframes b2Mp5Cloud1 {
+    00.00%, 56.97% { transform: translate(-21em, 16em) scale(0); }
+    58.23% { transform: translate(-21em, 16em) scale(0.8); }
+    60.29% { transform: translate(-21em, 16em) scale(1); }
+    61.62% { transform: translate(-21em, 16em) scale(0.7); }
+    62.58% { transform: translate(-21em, 16em) scale(1); }
+    63.76% { transform: translate(-21em, 16em) scale(0.9); }
+    64.87% { transform: translate(-21em, 16em) scale(1); }
+    66.12% { transform: translate(-21em, 16em) scale(0.7); }
+    67.01% { transform: translate(-21em, 16em) scale(1); }
+    68.04% { transform: translate(-21em, 16em) scale(0.8); }
+    69.59% { transform: translate(-21em, 16em) scale(1); }
+    71.29% { transform: translate(-21em, 16em) scale(0.9); }
+    74.91%, 100.0% { transform: translate(-21em, 16em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud2 {
+    00.00%, 56.97% { transform: translate(-12em, 17em) scale(0); }
+    58.23% { transform: translate(-12em, 17em) scale(0.9); }
+    58.89% { transform: translate(-12em, 17em) scale(0.7); }
+    60.29% { transform: translate(-12em, 17em) scale(1); }
+    61.25% { transform: translate(-12em, 17em) scale(0.8); }
+    62.14% { transform: translate(-12em, 17em) scale(1); }
+    63.62% { transform: translate(-12em, 17em) scale(0.9); }
+    64.65% { transform: translate(-12em, 17em) scale(1); }
+    65.39% { transform: translate(-12em, 17em) scale(0.7); }
+    66.05% { transform: translate(-12em, 17em) scale(1); }
+    67.23% { transform: translate(-12em, 17em) scale(0.9); }
+    68.78% { transform: translate(-12em, 17em) scale(1); }
+    69.52% { transform: translate(-12em, 17em) scale(0.8); }
+    70.26% { transform: translate(-12em, 17em) scale(1); }
+    71.07% { transform: translate(-12em, 17em) scale(0.9); }
+    72.32% { transform: translate(-12em, 17em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(-12em, 17em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud3 {
+    00.00%, 56.97% { transform: translate(6em, -30em) scale(0); }
+    58.23% { transform: translate(6em, -30em) scale(0.9); }
+    58.67% { transform: translate(6em, -30em) scale(0.7); }
+    58.97% { transform: translate(6em, -30em) scale(1); }
+    60.07% { transform: translate(6em, -30em) scale(0.8); }
+    61.03% { transform: translate(6em, -30em) scale(1); }
+    62.58% { transform: translate(6em, -30em) scale(0.9); }
+    64.06% { transform: translate(6em, -30em) scale(1); }
+    64.94% { transform: translate(6em, -30em) scale(0.7); }
+    65.90% { transform: translate(6em, -30em) scale(1); }
+    67.38% { transform: translate(6em, -30em) scale(0.9); }
+    68.34% { transform: translate(6em, -30em) scale(1); }
+    69.22% { transform: translate(6em, -30em) scale(0.7); }
+    70.18% { transform: translate(6em, -30em) scale(1); }
+    71.00% { transform: translate(6em, -30em) scale(0.8); }
+    72.32% { transform: translate(6em, -30em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(6em, -30em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud4 {
+    00.00%, 56.97% { transform: translate(16em, 11em) scale(0); }
+    58.23% { transform: translate(16em, 11em) scale(0.9); }
+    60.22% { transform: translate(16em, 11em) scale(0.7); }
+    61.11% { transform: translate(16em, 11em) scale(1); }
+    61.84% { transform: translate(16em, 11em) scale(0.8); }
+    62.29% { transform: translate(16em, 11em) scale(1); }
+    63.54% { transform: translate(16em, 11em) scale(0.9); }
+    65.02% { transform: translate(16em, 11em) scale(1); }
+    65.68% { transform: translate(16em, 11em) scale(0.8); }
+    66.35% { transform: translate(16em, 11em) scale(1); }
+    67.67% { transform: translate(16em, 11em) scale(0.7); }
+    68.49% { transform: translate(16em, 11em) scale(1); }
+    69.89% { transform: translate(16em, 11em) scale(0.8); }
+    70.41% { transform: translate(16em, 11em) scale(1); }
+    71.22% { transform: translate(16em, 11em) scale(0.9); }
+    72.03% { transform: translate(16em, 11em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(16em, 11em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud5 {
+    00.00%, 56.97% { transform: translate(-30em, 6em) scale(0); }
+    58.23% { transform: translate(-30em, 6em) scale(0.9); }
+    58.82% { transform: translate(-30em, 6em) scale(0.7); }
+    59.26% { transform: translate(-30em, 6em) scale(1); }
+    60.59% { transform: translate(-30em, 6em) scale(0.8); }
+    61.11% { transform: translate(-30em, 6em) scale(1); }
+    62.36% { transform: translate(-30em, 6em) scale(0.9); }
+    62.80% { transform: translate(-30em, 6em) scale(1); }
+    63.54% { transform: translate(-30em, 6em) scale(0.8); }
+    64.87% { transform: translate(-30em, 6em) scale(1); }
+    65.83% { transform: translate(-30em, 6em) scale(0.8); }
+    66.86% { transform: translate(-30em, 6em) scale(1); }
+    67.60% { transform: translate(-30em, 6em) scale(0.8); }
+    68.78% { transform: translate(-30em, 6em) scale(1); }
+    70.26% { transform: translate(-30em, 6em) scale(0.9); }
+    70.92% { transform: translate(-30em, 6em) scale(1); }
+    74.91%, 100.0% { transform: translate(-30em, 6em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud6 {
+    00.00%, 56.97% { transform: translate(-13em, 1em) scale(0); }
+    58.23% { transform: translate(-13em, 1em) scale(0.7); }
+    60.29% { transform: translate(-13em, 1em) scale(1); }
+    61.62% { transform: translate(-13em, 1em) scale(0.9); }
+    62.58% { transform: translate(-13em, 1em) scale(1); }
+    63.76% { transform: translate(-13em, 1em) scale(0.8); }
+    64.87% { transform: translate(-13em, 1em) scale(1); }
+    66.12% { transform: translate(-13em, 1em) scale(0.7); }
+    67.01% { transform: translate(-13em, 1em) scale(1); }
+    68.04% { transform: translate(-13em, 1em) scale(0.7); }
+    69.59% { transform: translate(-13em, 1em) scale(1); }
+    71.29% { transform: translate(-13em, 1em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(-13em, 1em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud7 {
+    00.00%, 56.97% { transform: translate(-20em, 24em) scale(0); }
+    58.23% { transform: translate(-20em, 24em) scale(0.9); }
+    58.89% { transform: translate(-20em, 24em) scale(0.7); }
+    60.29% { transform: translate(-20em, 24em) scale(1); }
+    61.25% { transform: translate(-20em, 24em) scale(0.8); }
+    62.14% { transform: translate(-20em, 24em) scale(1); }
+    63.62% { transform: translate(-20em, 24em) scale(0.9); }
+    64.65% { transform: translate(-20em, 24em) scale(1); }
+    65.39% { transform: translate(-20em, 24em) scale(0.7); }
+    66.05% { transform: translate(-20em, 24em) scale(1); }
+    67.23% { transform: translate(-20em, 24em) scale(0.9); }
+    68.78% { transform: translate(-20em, 24em) scale(1); }
+    69.52% { transform: translate(-20em, 24em) scale(0.8); }
+    70.26% { transform: translate(-20em, 24em) scale(1); }
+    71.07% { transform: translate(-20em, 24em) scale(0.9); }
+    72.32% { transform: translate(-20em, 24em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(-20em, 24em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud8 {
+    00.00%, 56.97% { transform: translate(-15em, 14em) scale(0); }
+    58.23% { transform: translate(-15em, 14em) scale(0.9); }
+    58.67% { transform: translate(-15em, 14em) scale(0.7); }
+    58.97% { transform: translate(-15em, 14em) scale(1); }
+    60.07% { transform: translate(-15em, 14em) scale(0.8); }
+    61.03% { transform: translate(-15em, 14em) scale(1); }
+    62.58% { transform: translate(-15em, 14em) scale(0.9); }
+    64.06% { transform: translate(-15em, 14em) scale(1); }
+    64.94% { transform: translate(-15em, 14em) scale(0.7); }
+    65.90% { transform: translate(-15em, 14em) scale(1); }
+    67.38% { transform: translate(-15em, 14em) scale(0.9); }
+    68.34% { transform: translate(-15em, 14em) scale(1); }
+    69.22% { transform: translate(-15em, 14em) scale(0.7); }
+    70.18% { transform: translate(-15em, 14em) scale(1); }
+    71.00% { transform: translate(-15em, 14em) scale(0.7); }
+    72.32% { transform: translate(-15em, 14em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(-15em, 14em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud9 {
+    00.00%, 56.97% { transform: translate(-20em, 24em) scale(0); }
+    58.23% { transform: translate(-20em, 24em) scale(0.8); }
+    60.22% { transform: translate(-20em, 24em) scale(0.7); }
+    61.11% { transform: translate(-20em, 24em) scale(1); }
+    61.84% { transform: translate(-20em, 24em) scale(0.9); }
+    62.29% { transform: translate(-20em, 24em) scale(1); }
+    63.54% { transform: translate(-20em, 24em) scale(0.8); }
+    65.02% { transform: translate(-20em, 24em) scale(1); }
+    65.68% { transform: translate(-20em, 24em) scale(0.9); }
+    66.35% { transform: translate(-20em, 24em) scale(1); }
+    67.67% { transform: translate(-20em, 24em) scale(0.8); }
+    68.49% { transform: translate(-20em, 24em) scale(1); }
+    69.89% { transform: translate(-20em, 24em) scale(0.9); }
+    70.41% { transform: translate(-20em, 24em) scale(1); }
+    71.22% { transform: translate(-20em, 24em) scale(0.8); }
+    72.03% { transform: translate(-20em, 24em) scale(0.9); }
+    74.91%, 100.0% { transform: translate(-20em, 24em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud10 {
+    00.00%, 56.97% { transform: translate(-21em, 14em) scale(0); }
+    58.23% { transform: translate(-21em, 14em) scale(0.9); }
+    58.82% { transform: translate(-21em, 14em) scale(0.7); }
+    59.26% { transform: translate(-21em, 14em) scale(1); }
+    60.59% { transform: translate(-21em, 14em) scale(0.8); }
+    61.11% { transform: translate(-21em, 14em) scale(1); }
+    62.36% { transform: translate(-21em, 14em) scale(0.9); }
+    62.80% { transform: translate(-21em, 14em) scale(1); }
+    63.54% { transform: translate(-21em, 14em) scale(0.8); }
+    64.87% { transform: translate(-21em, 14em) scale(1); }
+    65.83% { transform: translate(-21em, 14em) scale(0.8); }
+    66.86% { transform: translate(-21em, 14em) scale(1); }
+    67.60% { transform: translate(-21em, 14em) scale(0.8); }
+    68.78% { transform: translate(-21em, 14em) scale(1); }
+    70.26% { transform: translate(-21em, 14em) scale(0.9); }
+    70.92% { transform: translate(-21em, 14em) scale(1); }
+    74.91%, 100.0% { transform: translate(-21em, 14em) scale(0); }
+  }
+@keyframes b2Mp6 {
+  00.00%, 56.97% { transform: translate(69em, -1em) translateZ(83em) rotateX(-90deg); }
+  58.23% { transform: translate(69em, 3em) translateZ(82em) rotateX(-90deg); }
+  58.38% { transform: translate(69em, 4em) translateZ(81em) rotateX(-90deg); }
+  58.89% { transform: translate(69em, 8em) translateZ(81em) rotateX(-90deg); }
+  59.48% { transform: translate(69em, 11em) translateZ(78em) rotateX(-90deg); }
+  59.93% { transform: translate(69em, 15em) translateZ(77em) rotateX(-90deg); }
+  60.52% { transform: translate(69em, 20em) translateZ(74em) rotateX(-90deg); }
+  60.96% { transform: translate(69em, 24em) translateZ(72em) rotateX(-90deg); }
+  61.40% { transform: translate(69em, 29em) translateZ(70em) rotateX(-90deg); }
+  62.43% { transform: translate(69em, 39em) translateZ(63em) rotateX(-90deg); }
+  62.66% { transform: translate(69em, 42em) translateZ(63em) rotateX(-90deg); }
+  63.25% { transform: translate(69em, 48em) translateZ(58em) rotateX(-90deg); }
+  63.54% { transform: translate(69em, 52em) translateZ(56em) rotateX(-90deg); }
+  63.84% { transform: translate(69em, 55em) translateZ(54em) rotateX(-90deg); }
+  64.21% { transform: translate(69em, 59em) translateZ(51em) rotateX(-90deg); }
+  64.80% { transform: translate(69em, 66em) translateZ(45em) rotateX(-90deg); }
+  65.02% { transform: translate(69em, 67em) translateZ(43em) rotateX(-90deg); }
+  65.61% { transform: translate(76em, 67em) translateZ(30em) rotateX(-90deg); }
+  66.20% { transform: translate(74em, 75em) translateZ(25em) rotateX(-90deg); }
+  66.72% { transform: translate(76em, 78em) translateZ(17em) rotateX(-90deg);  }
+  67.31% { transform: translate(76em, 80em) translateZ(10em) rotateX(-90deg); }
+  67.75% { transform: translate(76em, 87em) translateZ(1em) rotateX(-90deg); }
+  68.34% { transform: translate(76em, 90em) translateZ(-4em) rotateX(-90deg); }
+  68.86% { transform: translate(76em, 94em) translateZ(-12em) rotateX(-90deg); }
+  69.30% { transform: translate(76em, 101em) translateZ(-19em) rotateX(-90deg); }
+  70.18% { transform: translate(76em, 104em) translateZ(-26em) rotateX(-90deg); }
+  71.36% { transform: translate(76em, 111em) translateZ(-42em) rotateX(-90deg); }
+  72.47% { transform: translate(76em, 114em) translateZ(-46em) rotateX(-90deg); }
+  74.91%, 100.0% { transform: translate(54em, 141em) translateZ(-53em) rotateX(-90deg); }
+}
+  @keyframes b2Mp6Cloud1 {
+    00.00%, 56.97% { transform: translate(-50%, 17em) scale(0); }
+    58.23% { transform: translate(-50%, 17em) scale(1); }
+    60.29% { transform: translate(-50%, 17em) scale(0.9); }
+    61.62% { transform: translate(-50%, 17em) scale(1); }
+    62.58% { transform: translate(-50%, 17em) scale(0.8); }
+    63.76% { transform: translate(-50%, 17em) scale(0.9); }
+    64.87% { transform: translate(-50%, 17em) scale(1); }
+    66.12% { transform: translate(-50%, 17em) scale(0.7); }
+    67.01% { transform: translate(-50%, 17em) scale(1); }
+    68.04% { transform: translate(-50%, 17em) scale(0.9); }
+    69.59% { transform: translate(-50%, 17em) scale(1); }
+    71.29% { transform: translate(-50%, 17em) scale(0.7); }
+    74.91%, 100.0% { transform: translate(-50%, 17em) scale(0); }
+  }
+  @keyframes b2Mp6Cloud2 {
+    00.00%, 56.97% { transform: translate(-11em, 11em) scale(0); }
+    58.23% { transform: translate(-11em, 11em) scale(1); }
+    58.89% { transform: translate(-11em, 11em) scale(0.7); }
+    60.29% { transform: translate(-11em, 11em) scale(1); }
+    61.25% { transform: translate(-11em, 11em) scale(0.9); }
+    62.14% { transform: translate(-11em, 11em) scale(1); }
+    63.62% { transform: translate(-11em, 11em) scale(0.8); }
+    64.65% { transform: translate(-11em, 11em) scale(1); }
+    65.39% { transform: translate(-11em, 11em) scale(0.9); }
+    66.05% { transform: translate(-11em, 11em) scale(1); }
+    67.23% { transform: translate(-11em, 11em) scale(0.8); }
+    68.78% { transform: translate(-11em, 11em) scale(1); }
+    69.52% { transform: translate(-11em, 11em) scale(0.9); }
+    70.26% { transform: translate(-11em, 11em) scale(1); }
+    71.07% { transform: translate(-11em, 11em) scale(0.7); }
+    72.32% { transform: translate(-11em, 11em) scale(1); }
+    74.91%, 100.0% { transform: translate(-11em, 11em) scale(0); }
+  }
+  @keyframes b2Mp6Cloud3 {
+    00.00%, 56.97% { transform: translate(-50%, 20em) scale(0); }
+    58.23% { transform: translate(-50%, 20em) scale(0.8); }
+    58.67% { transform: translate(-50%, 20em) scale(1); }
+    58.97% { transform: translate(-50%, 20em) scale(0.9); }
+    60.07% { transform: translate(-50%, 20em) scale(1); }
+    61.03% { transform: translate(-50%, 20em) scale(0.7); }
+    62.58% { transform: translate(-50%, 20em) scale(1); }
+    64.06% { transform: translate(-50%, 20em) scale(0.9); }
+    64.94% { transform: translate(-50%, 20em) scale(1); }
+    65.90% { transform: translate(-50%, 20em) scale(0.8); }
+    67.38% { transform: translate(-50%, 20em) scale(1); }
+    68.34% { transform: translate(-50%, 20em) scale(0.9); }
+    69.22% { transform: translate(-50%, 20em) scale(1); }
+    70.18% { transform: translate(-50%, 20em) scale(0.7); }
+    71.00% { transform: translate(-50%, 20em) scale(1); }
+    72.32% { transform: translate(-50%, 20em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(-50%, 20em) scale(0); }
+  }
+  @keyframes b2Mp6Cloud4 {
+    00.00%, 56.97% { transform: translate(-50%, 32em) scale(0); }
+    58.23% { transform: translate(-50%, 32em) scale(0.8); }
+    60.22% { transform: translate(-50%, 32em) scale(1); }
+    61.11% { transform: translate(-50%, 32em) scale(0.9); }
+    61.84% { transform: translate(-50%, 32em) scale(1); }
+    62.29% { transform: translate(-50%, 32em) scale(0.7); }
+    63.54% { transform: translate(-50%, 32em) scale(1); }
+    65.02% { transform: translate(-50%, 32em) scale(0.9); }
+    65.68% { transform: translate(-50%, 32em) scale(1); }
+    66.35% { transform: translate(-50%, 32em) scale(0.8); }
+    67.67% { transform: translate(-50%, 32em) scale(1); }
+    68.49% { transform: translate(-50%, 32em) scale(0.9); }
+    69.89% { transform: translate(-50%, 32em) scale(1); }
+    70.41% { transform: translate(-50%, 32em) scale(0.7); }
+    71.22% { transform: translate(-50%, 32em) scale(1); }
+    72.03% { transform: translate(-50%, 32em) scale(0.9); }
+    74.91%, 100.0% { transform: translate(-50%, 32em) scale(0); }
+  }
+  @keyframes b2Mp6Cloud5 {
+    00.00%, 56.97% { transform:  translate(-1em, 25em) scale(0); }
+    58.23% { transform:  translate(-1em, 25em) scale(0.7); }
+    58.67% { transform:  translate(-1em, 25em) scale(1); }
+    58.97% { transform:  translate(-1em, 25em) scale(0.8); }
+    60.07% { transform:  translate(-1em, 25em) scale(1); }
+    61.03% { transform:  translate(-1em, 25em) scale(0.9); }
+    62.58% { transform:  translate(-1em, 25em) scale(1); }
+    64.06% { transform:  translate(-1em, 25em) scale(0.8); }
+    64.94% { transform:  translate(-1em, 25em) scale(1); }
+    65.90% { transform:  translate(-1em, 25em) scale(0.8); }
+    67.38% { transform:  translate(-1em, 25em) scale(1); }
+    68.34% { transform:  translate(-1em, 25em) scale(0.9); }
+    69.22% { transform:  translate(-1em, 25em) scale(1); }
+    70.18% { transform:  translate(-1em, 25em) scale(0.7); }
+    71.00% { transform:  translate(-1em, 25em) scale(1); }
+    72.32% { transform:  translate(-1em, 25em) scale(0.8); }
+    74.91%, 100.0% { transform:  translate(-1em, 25em) scale(0); }
+  }
+  @keyframes b2Mp6Cloud6 {
+    00.00%, 56.97% { transform: translate(-20em, 30em) scale(0); }
+    58.23% { transform: translate(-20em, 30em) scale(1); }
+    60.29% { transform: translate(-20em, 30em) scale(0.7); }
+    61.62% { transform: translate(-20em, 30em) scale(1); }
+    62.58% { transform: translate(-20em, 30em) scale(0.9); }
+    63.76% { transform: translate(-20em, 30em) scale(0.8); }
+    64.87% { transform: translate(-20em, 30em) scale(1); }
+    66.12% { transform: translate(-20em, 30em) scale(0.7); }
+    67.01% { transform: translate(-20em, 30em) scale(1); }
+    68.04% { transform: translate(-20em, 30em) scale(0.9); }
+    69.59% { transform: translate(-20em, 30em) scale(1); }
+    71.29% { transform: translate(-20em, 30em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(-20em, 30em) scale(0); }
+  }
+@keyframes Bridge1 {
+  00.00%, 66.72% { transform: translate(0em, 0em) translateZ(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  66.79% { transform: translate(6em, 7em) translateZ(6em) rotateX(10deg) rotateY(-30deg) rotateZ(50deg); }
+  67.31% { transform: translate(-3em, 37em) translateZ(22em) rotateX(-20deg) rotateY(10deg) rotateZ(30deg); }
+  67.75% { transform: translate(1em, 37em) translateZ(1em) rotateX(-110deg) rotateY(0deg) rotateZ(40deg); }
+  68.34% { transform: translate(-9em, 55em) translateZ(-28em) rotateX(-90deg) rotateY(16deg) rotateZ(30deg); }
+  68.86% { transform: translate(-29em, 105em) translateZ(-68em) rotateX(-80deg) rotateY(-14deg) rotateZ(40deg); }
+  69.30% { transform: translate(-29em, 155em) translateZ(-118em) rotateX(-80deg) rotateY(-14deg) rotateZ(40deg); }
+  69.31%, 100.0% { transform: translate(-999em, 999em) translateZ(-118em) rotateX(-80deg) rotateY(-14deg) rotateZ(40deg); }
+}
+@keyframes Bridge2 {
+  00.00%, 66.72% { transform: translate(0em, 8em) translateZ(0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
+  66.79% { transform: translate(-5em, 11em) translateZ(0em) rotateX(-110deg) rotateY(8deg) rotateZ(-30deg); }
+  67.31% { transform: translate(-11em, 31em) translateZ(0em) rotateX(-90deg) rotateY(-2deg) rotateZ(-30deg); }
+  67.75% { transform: translate(-4em, 56em) translateZ(8em) rotateX(-110deg) rotateY(18deg) rotateZ(70deg); }
+  68.34% { transform: translate(-12em, 78em) translateZ(-25em) rotateX(-90deg) rotateY(-72deg) rotateZ(100deg); }
+  68.86% { transform: translate(-21em, 101em) translateZ(-66em) rotateX(-130deg) rotateY(-109deg) rotateZ(100deg); }
+  69.30% { transform: translate(-21em, 191em) translateZ(-96em) rotateX(-100deg) rotateY(-159deg) rotateZ(140deg); }
+  69.31%, 100.0% { transform: translate(-999em, 999em) translateZ(-96em) rotateX(-100deg) rotateY(-159deg) rotateZ(140deg); }
+}
+@keyframes Bridge3 {
+  00.00%, 66.72% { transform: translate(13em, 0em) translateZ(0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
+  66.79% { transform: translate(17em, 7em) translateZ(10em) rotateX(-70deg) rotateY(-50deg) rotateZ(-10deg); }
+  67.31% { transform: translate(17em, 30em) translateZ(13em) rotateX(-30deg) rotateY(-50deg) rotateZ(-10deg); }
+  67.75% { transform: translate(2em, 82em) translateZ(29em) rotateX(0deg) rotateY(-100deg) rotateZ(-7deg); }
+  68.34% { transform: translate(2em, 96em) translateZ(-18em) rotateX(-60deg) rotateY(-130deg) rotateZ(-27deg); }
+  68.86% { transform: translate(2em, 146em) translateZ(-48em) rotateX(-40deg) rotateY(-150deg) rotateZ(-7deg); }
+  69.30% { transform: translate(2em, 196em) translateZ(-68em) rotateX(-20deg) rotateY(-170deg) rotateZ(13deg); }
+  69.31%, 100.0% { transform: translate(999em, 999em) translateZ(-68em) rotateX(-20deg) rotateY(-170deg) rotateZ(13deg); }
+}
+@keyframes Bridge4 {
+  00.00%, 66.72% { transform: translate(26em, 0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
+  66.79% { transform: translate(28em, 8em) translateZ(3em) rotateX(-70deg) rotateY(20deg) rotateZ(0deg); }
+  67.31% { transform: translate(30em, 32em) translateZ(3em) rotateX(-4deg) rotateY(20deg) rotateZ(0deg); }
+  67.75% { transform: translate(33em, 51em) translateZ(2em) rotateX(-14deg) rotateY(0deg) rotateZ(-10deg); }
+  68.34% { transform: translate(33em, 63em) translateZ(-46em) rotateX(6deg) rotateY(10deg) rotateZ(-20deg); }
+  68.86% { transform: translate(19em, 102em) translateZ(-86em) rotateX(16deg) rotateY(-40deg) rotateZ(-50deg); }
+  69.30% { transform: translate(19em, 162em) translateZ(-116em) rotateX(26deg) rotateY(-60deg) rotateZ(-60deg); }
+  69.31%, 100.0% { transform: translate(999em, 999em) translateZ(-116em) rotateX(26deg) rotateY(-60deg) rotateZ(-60deg); }
+}
+@keyframes Bridge5 {
+  00.00%, 66.72% { transform: translate(32em, 0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
+  66.79% { transform: translate(42em, 4em) translateZ(10em) rotateX(-70deg) rotateY(-50deg) rotateZ(-10deg); }
+  67.31% { transform: translate(43em, 28em) translateZ(-3em) rotateX(10deg) rotateY(-10deg) rotateZ(20deg); }
+  67.75% { transform: translate(42em, 54em) translateZ(8em) rotateX(-120deg) rotateY(-60deg) rotateZ(70deg); }
+  68.34% { transform: translate(42em, 79em) translateZ(-29em) rotateX(-160deg) rotateY(-77deg) rotateZ(70deg); }
+  68.86% { transform: translate(24em, 87em) translateZ(-79em) rotateX(10deg) rotateY(-90deg) rotateZ(73deg); }
+  69.30% { transform: translate(24em, 109em) translateZ(-109em) rotateX(20deg) rotateY(-100deg) rotateZ(83deg); }
+  69.31%, 100.0% { transform: translate(999em, 999em) translateZ(-109em) rotateX(20deg) rotateY(-100deg) rotateZ(83deg); }
+}
+@keyframes Bridge6 {
+  00.00%, 66.72% { transform: translate(48em, 0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
+  66.79% { transform: translate(51em, 4em) translateZ(10em) rotateX(-110deg) rotateY(-20deg) rotateZ(-30deg); }
+  67.31% { transform: translate(57em, 20em) translateZ(4em) rotateX(-150deg) rotateY(-50deg) rotateZ(-60deg); }
+  67.75% { transform: translate(53em, 45em) translateZ(-10em) rotateX(-100deg) rotateY(-20deg) rotateZ(-60deg); }
+  68.34% { transform: translate(53em, 54em) translateZ(-42em) rotateX(-110deg) rotateY(-30deg) rotateZ(-73deg); }
+  68.86% { transform: translate(39em, 89em) translateZ(-74em) rotateX(-130deg) rotateY(-50deg) rotateZ(-73deg); }
+  69.30% { transform: translate(39em, 107em) translateZ(-94em) rotateX(-140deg) rotateY(-60deg) rotateZ(-53deg); }
+  69.31%, 100.0% { transform: translate(999em, 999em) translateZ(-94em) rotateX(-140deg) rotateY(-60deg) rotateZ(-53deg); }
+}
+@keyframes BridgeCloud1 {
+  00.00%, 66.20% { transform: translate(-16em, -1em)rotateY(-90deg) scale(0); }
+  66.72% { transform: translate(-22em, -1em)rotateY(-90deg) scale(1); }
+  69.37%, 100.0% { transform: translate(-22em, -1em)rotateY(-90deg) scale(0); }
+}
+@keyframes BridgeCloud2 {
+  00.00%, 66.20% { transform: translate(2em, -4em) translateZ(-6em) rotateY(-90deg) scale(0); }
+  66.72% { transform: translate(13em, -4em) translateZ(-6em) rotateY(-90deg) scale(1); }
+  69.37%, 100.0% { transform: translate(13em, -4em) translateZ(-6em) rotateY(-90deg) scale(0); }
+}
+@keyframes BridgeCloud3 {
+  00.00%, 66.20% { transform: translate(-25em, -24em) translateZ(6em) scale(0); }
+  66.72% { transform: translate(-25em, -24em) translateZ(6em) scale(1); }
+  69.37%, 100.0% { transform: translate(-25em, -24em) translateZ(6em) scale(0); }
+}
+@keyframes BridgeCloud4 {
+  00.00%, 66.20% { transform: translate(-2em, -7em) translateZ(-10em) rotateY(-90deg) scale(0); }
+  66.72% { transform: translate(-5em, -7em) translateZ(-10em) rotateY(-90deg) scale(1); }
+  69.37%, 100.0% { transform: translate(-5em, -7em) translateZ(-10em) rotateY(-90deg) scale(0); }
+}
+@keyframes b2Door1 {
+  00.00%, 34.10% {
+    background: linear-gradient(0deg, #3e212f, transparent), linear-gradient(90deg, #6d324c 10%, transparent 0%) -2em 0em/6em 3em repeat-x, linear-gradient(90deg, #733a55 10%, #814364 0%) 0em 0em/1em 6em repeat-x;
+    transform: translate(-12.8em, 4.3em) translateZ(0em) rotateX(-90deg); }
+  35.06%, 100.0% {
+    background: linear-gradient(90deg, #6d324c 10%, transparent 0%) -2em 0em/6em 3em repeat-x, linear-gradient(90deg, #733a55 10%, #814364 0%) 0em 0em/1em 6em repeat-x;
+    transform: translate(-12.8em, 4.3em) translateZ(0em) rotateX(0deg); }
+}
+
+
+
+/* THIRD BUILDING */
+@keyframes thirdBuilding {
+  00.00%, 31.96% { transform: translate(145em, 151em) translateZ(-16em) rotateX(0deg); }
+  31.97%, 100.0% { transform: translate(115em, 151em) translateZ(-16em) rotateX(0deg); }
+}
+@keyframes b3Mp1 {
+  00.00%, 77.64% { transform: translate(-106em, 47em) translateZ(-88em) rotateX(-90deg); }
+  77.79%, 81.99% { transform: translate(-106em, 47em) translateZ(-51em) rotateX(-90deg); }
+  82.29%, 100.0% { transform: translate(-106em, 47em) translateZ(-67em) rotateX(-90deg); }
+}
+  @keyframes b3Mp1DIV {
+    00.00%, 79.11% { transform: translateY(-22em) translateZ(0em) rotateX(0deg); }
+    79.26% { transform: translateY(-22em) translateZ(0em) rotateX(-2deg); }
+    79.41% { transform: translateY(-19em) translateZ(3em) rotateX(-9deg); }
+    79.63% { transform: translateY(-15em) translateZ(5em) rotateX(-18deg); }
+    79.70% { transform: translateY(-7em) translateZ(6em) rotateX(-21deg); }
+    79.93% { transform: translateY(-7em) translateZ(6em) rotateX(-90deg); }
+    81.99% { transform: translateY(-7em) translateZ(13em) rotateX(-90deg); }
+    82.29%, 100.0% { transform: translateY(-23em) translateZ(-3em) rotateX(-90deg); }
+  }
+  @keyframes b3Mp1TopPart {
+    00.00%, 77.64%, 78.60%, 81.99%, 83.32%, 100.0% { background: var(--top-accent-light); }
+    77.71%, 78.08%, 82.07%, 82.73% { background: white; }
+  }
+  @keyframes b3Mp1RightPart {
+    00.00%, 77.64%, 78.60%, 81.99%, 83.32%, 100.0% { background: var(--right-accent-light); }
+    77.71%, 78.08%, 82.07%, 82.73% { background: white; }
+  }
+  @keyframes b3Mp1LeftPart {
+    00.00%, 77.64%, 78.60%, 81.99%, 83.32%, 100.0% {
+      border: 1em solid var(--left-accent-light);
+      background: linear-gradient(45deg, var(--right-accent-dark) 50%, var(--left-accent-dark) 0%);
+      box-shadow: 0 0 6em 2em transparent; }
+    
+    77.71%, 78.08%, 82.07%, 82.73% {
+      border-color: white;
+      background: linear-gradient(45deg, white 50%, white 0%);
+      box-shadow: 0 0 6em 2em white; }
+  }
+@keyframes b3Mp2 {
+  00.00%, 72.77% { transform: translate(-98em, 55em) translateZ(-96em) rotateY(-90deg) rotateZ(-90deg); }
+  73.95% { transform: translate(-98em, 47em) translateZ(-96em) rotateY(-90deg) rotateZ(0deg); }
+  74.10% { transform: translate(-98em, 48em) translateZ(-96em) rotateY(-90deg) rotateZ(-7deg); }
+  74.32%, 100.0% { transform: translate(-98em, 47em) translateZ(-96em) rotateY(-90deg) rotateZ(0deg); }
+}
+@keyframes b3Mp3 {
+  00.00%, 76.60% { transform: translate(-37em, -2em) translateZ(-28em); }
+  76.90%, 92.91% { transform: translate(-53em, -10em) translateZ(-37em); }
+  93.14%, 100.0% { transform: translate(-37em, -2em) translateZ(-28em); }
+}
+  @keyframes b3Mp3TopPart {
+    00.00%, 76.60%, 77.64%, 92.91%, 94.17%, 100.0% { background: var(--top-accent-light); }
+    76.90%, 77.19%, 92.99%, 93.14% { background: white; }
+  }
+  @keyframes b3Mp3LeftPart {
+    00.00%, 76.60%, 77.64%, 92.91%, 94.17%, 100.0% { background: var(--left-accent-light); }
+    76.90%, 77.19%, 92.99%, 93.14% { background: white; }
+  }
+  @keyframes b3Mp3RightPart {
+    00.00%, 76.60%, 77.64%, 92.91%, 94.17%, 100.0% {
+      border: 1em solid var(--right-accent-light);
+      background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
+      box-shadow: 0 0 6em 2em transparent; }
+
+    76.90%, 77.19%, 92.99%, 93.14% {
+      border-color: white;
+      background: linear-gradient(45deg, white 50%, white 0%);
+      box-shadow: 0 0 6em 2em white; }
+  }
+@keyframes b3Mp4 {
+  00.00%, 94.76% { transform: translate(-13em, 18em) translateZ(0em); }
+  95.13%, 95.28%, 100.0% { transform: translate(-13em, 18em) translateZ(-28em); }
+  95.20% { transform: translate(-13em, 18em) translateZ(-25em); }
+}
+
+
+
+/* RO */
+@keyframes ro {
+  00.00% { transform: translate(72em, 35em) translateZ(-32em) rotateX(0deg) rotateZ(0deg); }
+  09.96% { transform: translate(72em, 35em) translateZ(-32em) rotateX(0deg) rotateZ(0deg); }
+  10.18% { transform: translate(72em, 32em) translateZ(-32em) rotateX(0deg) rotateZ(0deg); }
+  11.22% { transform: translate(72em, 16em) translateZ(-16em) rotateX(0deg) rotateZ(0deg); }
+  11.51% { transform: translate(72em, 12em) translateZ(-16em) rotateX(0deg) rotateZ(0deg); }
+  13.51% { transform: translate(72em, 12em) translateZ(-16em) rotateX(0deg) rotateZ(0deg); }
+  13.73% { transform: translate(75em, 12em) translateZ(-15em) rotateX(0deg) rotateZ(0deg); }
+  14.17% { transform: translate(75em, 21em) translateZ(1em) rotateX(0deg) rotateZ(0deg); }
+  14.83% { transform: translate(86em, 21em) translateZ(1em) rotateX(0deg) rotateZ(0deg); }
+  15.50% { transform: translate(70em, 20em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  18.08% { transform: translate(18em, 19em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  18.60% { transform: translate(18em, 10em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  19.19% { transform: translate(18em, 1em) translateZ(23em) rotateX(0deg) rotateZ(0deg); }
+  19.41% { transform: translate(18em, -3em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  20.81% { transform: translate(18em, -3em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  23.76% { transform: translate(80em, -3em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  25.02% { transform: translate(80em, -27em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  25.46% { transform: translate(80em, -27em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  25.83% { transform: translate(80em, -74em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  26.86% { transform: translate(80em, -74em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  27.23% { transform: translate(43em, -43em) translateZ(61em) rotateX(0deg) rotateZ(0deg); }
+  29.52% { transform: translate(92em, -43em) translateZ(61em) rotateX(0deg) rotateZ(0deg); }
+  31.96% { transform: translate(50em, 50em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  32.47% { transform: translate(41em, 50em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  32.84% { transform: translate(41em, 42em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  37.93% { transform: translate(41em, 42em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  38.30% { transform: translate(41em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  39.48% { transform: translate(17em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  40.00% { transform: translate(17em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  40.37% { transform: translate(17em, 34em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
+  41.48% { transform: translate(17em, 34em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
+  41.70% { transform: translate(17em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  42.36% { transform: translate(17em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  43.62% { transform: translate(17em, 34em) translateZ(31em) rotateX(0deg) rotateZ(0deg); }
+  44.50% { transform: translate(17em, 34em) translateZ(31em) rotateX(0deg) rotateZ(0deg); }
+  45.39% { transform: translate(17em, 20em) translateZ(31em) rotateX(0deg) rotateZ(0deg); }
+  45.83% { transform: translate(17em, 20em) translateZ(31em) rotateX(0deg) rotateZ(0deg); }
+  46.05% { transform: translate(17em, 20em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
+  47.23% { transform: translate(17em, 20em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
+  47.60% { transform: translate(17em, 13em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
+  48.41% { transform: translate(35em, 13em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
+  48.63% { transform: translate(42em, -29em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  49.08% { transform: translate(42em, -19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  49.52% { transform: translate(49em, -19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  50.77% { transform: translate(49em, -19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  51.51% { transform: translate(33em, -19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  51.96% { transform: translate(33em, -12em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  52.47% { transform: translate(33em, -12em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  52.77% { transform: translate(33em, 19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  53.80% { transform: translate(33em, 19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  54.17% { transform: translate(33em, 27em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  55.13% { transform: translate(56em, 27em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  56.24% { transform: translate(56em, 27em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  56.97% { transform: translate(56em, 28em) translateZ(75em) rotateX(0deg) rotateZ(0deg); }
+  58.23% { transform: translate(56em, 37em) translateZ(69em) rotateX(0deg) rotateZ(0deg); }
+  58.38% { transform: translate(56em, 38em) translateZ(68em) rotateX(0deg) rotateZ(0deg); }
+  58.89% { transform: translate(56em, 43em) translateZ(64em) rotateX(0deg) rotateZ(0deg); }
+  59.48% { transform: translate(56em, 48em) translateZ(58em) rotateX(0deg) rotateZ(0deg); }
+  59.93% { transform: translate(56em, 53em) translateZ(54em) rotateX(0deg) rotateZ(0deg); }
+  60.52% { transform: translate(56em, 60em) translateZ(48em) rotateX(0deg) rotateZ(0deg); }
+  60.96% { transform: translate(56em, 64em) translateZ(42em) rotateX(0deg) rotateZ(0deg); }
+  61.40% { transform: translate(56em, 68em) translateZ(21em) rotateX(0deg) rotateZ(0deg); }
+  62.43% { transform: translate(56em, 78em) translateZ(18em) rotateX(0deg) rotateZ(0deg); }
+  62.66% { transform: translate(56em, 80em) translateZ(18em) rotateX(0deg) rotateZ(0deg); }
+  63.25% { transform: translate(56em, 76em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  63.54% { transform: translate(56em, 78em) translateZ(13em) rotateX(0deg) rotateZ(0deg); }
+  63.84% { transform: translate(53em, 83em) translateZ(10em) rotateX(0deg) rotateZ(0deg); }
+  64.21% { transform: translate(51em, 85em) translateZ(9em) rotateX(0deg) rotateZ(0deg); }
+  64.80% { transform: translate(51em, 89em) translateZ(1em) rotateX(0deg) rotateZ(0deg); }
+  65.02% { transform: translate(50em, 88em) translateZ(-3em) rotateX(0deg) rotateZ(0deg); }
+  65.61% { transform: translate(48em, 87em) translateZ(-10em) rotateX(0deg) rotateZ(0deg); }
+  66.20% { transform: translate(47em, 94em) translateZ(-16em) rotateX(0deg) rotateZ(0deg); }
+  66.72% { transform: translate(53em, 96em) translateZ(-10em) rotateX(0deg) rotateZ(0deg); }
+  67.31% { transform: translate(55em, 94em) translateZ(-20em) rotateX(0deg) rotateZ(0deg); }
+  67.75% { transform: translate(55.5em, 94em) translateZ(-23em) rotateX(0deg) rotateZ(0deg); }
+  68.34% { transform: translate(55em, 96em) translateZ(-28em) rotateX(0deg) rotateZ(0deg); }
+  68.86% { transform: translate(55em, 98em) translateZ(-31em) rotateX(0deg) rotateZ(0deg); }
+  69.30% { transform: translate(55em, 99em) translateZ(-32em) rotateX(0deg) rotateZ(0deg); }
+  70.18% { transform: translate(61em, 114em) translateZ(-41em) rotateX(0deg) rotateZ(0deg); }
+  71.36% { transform: translate(39em, 134em) translateZ(-57em) rotateX(0deg) rotateZ(0deg); }
+  72.77% { transform: translate(27em, 171em) translateZ(-60em) rotateX(0deg) rotateZ(0deg); }
+  78.74% { transform: translate(27em, 171em) translateZ(-60em) rotateX(0deg) rotateZ(0deg); }
+  79.11% { transform: translate(12em, 195em) translateZ(-44em) rotateX(0deg) rotateZ(0deg); }
+  79.26% { transform: translate(12em, 195.5em) translateZ(-44em) rotateX(2deg) rotateZ(4deg); }
+  79.41% { transform: translate(12em, 201em) translateZ(-47em) rotateX(-10deg) rotateZ(14deg); }
+  79.63% { transform: translate(12em, 206em) translateZ(-51em) rotateX(-24deg) rotateZ(35deg); }
+  79.70% { transform: translate(12em, 208em) translateZ(-59em) rotateX(-30deg) rotateZ(41deg); }
+  79.93% { transform: translate(13em, 227em) translateZ(-77em) rotateX(-90deg) rotateZ(90deg); }
+  81.99% { transform: translate(13em, 234em) translateZ(-77em) rotateX(-90deg) rotateZ(90deg); }
+  82.29% { transform: translate(13em, 218em) translateZ(-77em) rotateX(-90deg) rotateZ(90deg); }
+  83.47% { transform: translate(13em, 218em) translateZ(-77em) rotateX(-90deg) rotateZ(90deg); }
+  84.57% { transform: translate(13em, 218em) translateZ(-106em) rotateX(-90deg) rotateZ(90deg); }
+  85.24% { transform: translate(40em, 218em) translateZ(-106em) rotateX(-90deg) rotateZ(90deg); }
+  85.68% { transform: translate(46em, 223em) translateZ(-106em) rotateX(-90deg) rotateZ(90deg); }
+  85.83% { transform: translate(49em, 223em) translateZ(-106em) rotateX(-90deg) rotateZ(90deg); }
+  86.79% { transform: translate(49em, 223em) translateZ(-87em) rotateX(-90deg) rotateZ(90deg); }
+  87.23% { transform: translate(49em, 215em) translateZ(-78em) rotateX(-90deg) rotateZ(90deg); }
+  87.67% { transform: translate(49em, 215em) translateZ(-67em) rotateX(-90deg) rotateZ(90deg); }
+  87.97% { transform: translate(49em, 215em) translateZ(-64em) rotateX(-66deg) rotateZ(80deg); }
+  88.19% { transform: translate(49em, 214em) translateZ(-62em) rotateX(-54deg) rotateZ(70deg); }
+  88.41% { transform: translate(49em, 211em) translateZ(-58em) rotateX(-43deg) rotateZ(50deg); }
+  88.63% { transform: translate(49em, 207em) translateZ(-55em) rotateX(-31deg) rotateZ(50deg); }
+  88.86% { transform: translate(49em, 203em) translateZ(-53em) rotateX(-18deg) rotateZ(27deg); }
+  89.00% { transform: translate(49em, 201em) translateZ(-53em) rotateX(0deg) rotateZ(0deg); }
+  91.73% { transform: translate(49em, 146em) translateZ(-52em) rotateX(0deg) rotateZ(0deg); }
+  92.91% { transform: translate(71em, 146em) translateZ(-52em) rotateX(0deg) rotateZ(0deg); }
+  93.14% { transform: translate(89em, 154em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
+  93.73% { transform: translate(89em, 154em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
+  94.17% { transform: translate(96em, 154em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
+  95.28% { transform: translate(96em, 154em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
+  95.79% { transform: translate(96em, 163em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
+  100.0% { transform: translate(96em, 163em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
+}
+  @keyframes roArmL {
+    00.00%, 96.01% { background: transparent; }
+    96.16%, 100.0% { background: white; }
+    00.00%, 96.01% { transform: translate(-3px, 5px) translateZ(30px) rotateX(-90deg) rotateZ(4deg); }
+    96.31% { transform: translate(-3px, 5px) translateZ(30px) rotateX(-90deg) rotateZ(-20deg); }
+    96.68%, 100.0% { transform: translate(-3px, 5px) translateZ(30px) rotateX(-90deg) rotateZ(-10deg); }
+  }
+    @keyframes roHandL {
+      00.00%, 96.31% { transform: translateY(8px) rotate(-10deg); }
+      96.68%, 100.0% { transform: translateY(8px) rotate(-40deg); }
+      00.00%, 96.01% { background: transparent; }
+      96.31%, 100.0% { background: white; }
+    }
+  @keyframes roArmR {
+    00.00%, 96.01% { transform: translate(4px, 0px) translateZ(24px) rotateX(-90deg) rotateY(0deg) rotateZ(-10deg); }
+    96.31%, 100.0% { transform: translate(4px, 0px) translateZ(24px) rotateX(-90deg) rotateY(0deg) rotateZ(-33deg); }
+    00.00%, 96.01% { background: transparent; }
+    96.16%, 100.0% { background: white; }
+  }
+    @keyframes roHandR {
+      00.00%, 96.01% {
+        transform: translate(0px, 8px) rotate(-10deg);
+        background: transparent; }
+      96.31%, 100.0% {
+        transform: translate(0px, 8px) rotate(-10deg);
+        background: white; }
+    }
+  @keyframes ro1 {
+    00.00%, 13.51%, 14.84%, 15.50%, 18.09%, 20.81%, 23.77%, 27.23%, 32.48%, 32.84%, 37.94%, 38.30%, 44.51%, 47.60%, 49.53%, 49.59%, 59.49%, 66.20%, 84.58%, 91.73% {
+      opacity: 1; }
+    13.52%, 14.83%, 15.51%, 18.08%, 20.82%, 23.76%, 27.24%, 32.47%, 32.85%, 37.93%, 38.31%, 44.50%, 47.61%, 49.52%, 49.60%, 59.48%, 66.21%, 84.57%, 91.74%, 100.0% {
+      opacity: 0; }
+
+    00.00%, 09.96%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 11.44%, 14.76%, 14.91%, 15.06%, 15.20%, 15.35%, 15.50%, 18.01%, 18.15%, 18.30%, 18.45%, 18.60%, 18.75%, 18.89%, 19.04%, 19.19%, 19.34%, 23.69%, 23.84%, 23.99%, 24.13%, 24.28%, 24.43%, 24.58%, 24.72%, 24.87%, 25.02%, 26.86%, 27.01%, 27.16%, 27.31%, 32.40%, 32.55%, 32.69%, 32.84%, 37.93%, 38.08%, 38.23%, 38.38%, 44.50%, 44.65%, 44.80%, 44.94%, 45.09%, 45.24%, 45.39%, 47.23%, 47.38%, 47.53%, 47.67%, 62.66%, 62.80%, 62.95%, 63.10%, 63.25%, 63.39%, 84.57%, 84.72%, 84.87%, 85.02%, 85.17%, 85.31%, 85.46%, 85.61%, 85.76%, 85.90%, 88.12%, 88.26%, 88.41%, 88.56%, 88.71%, 88.86%, 89.00%, 89.15%, 89.30%, 89.45%, 89.59%, 89.74%, 89.89%, 90.04%, 90.18%, 90.33%, 90.48%, 90.63%, 90.77%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 91.66%, 100.0% {
+      transform: rotateX(-90deg) scale(0.07); }
+    10.04%, 10.18%, 10.33%, 10.48%, 10.63%, 10.77%, 10.92%, 11.07%, 11.22%, 11.37%, 14.83%, 14.98%, 15.13%, 15.28%, 15.42%, 18.08%, 18.23%, 18.38%, 18.52%, 18.67%, 18.82%, 18.97%, 19.11%, 19.26%, 23.76%, 23.91%, 24.06%, 24.21%, 24.35%, 24.50%, 24.65%, 24.80%, 24.94%, 26.94%, 27.08%, 27.23%, 32.47%, 32.62%, 32.77%, 38.01%, 38.15%, 38.30%, 44.58%, 44.72%, 44.87%, 45.02%, 45.17%, 45.31%, 47.31%, 47.45%, 47.60%, 62.73%, 62.88%, 63.03%, 63.17%, 63.32%, 84.65%, 84.80%, 84.94%, 85.09%, 85.24%, 85.39%, 85.53%, 85.68%, 85.83%, 88.19%, 88.34%, 88.49%, 88.63%, 88.78%, 88.93%, 89.08%, 89.22%, 89.37%, 89.52%, 89.67%, 89.81%, 89.96%, 90.11%, 90.26%, 90.41%, 90.55%, 90.70%, 90.85%, 91.00%, 91.14%, 91.29%, 91.44%, 91.59% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.07); }
+  }
+    @keyframes ro1LegL {
+      00.00%, 09.96%, 10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 11.51%, 14.76%, 14.98%, 15.28%, 15.57%, 18.01%, 18.23%, 18.52%, 18.82%, 19.11%, 19.41%, 23.69%, 23.91%, 24.21%, 24.50%, 24.80%, 25.02%, 26.86%, 27.08%, 27.31%, 32.40%, 32.62%, 32.84%, 37.93%, 38.15%, 38.38%, 44.50%, 44.72%, 45.02%, 45.31%, 47.23%, 47.45%, 47.67%, 62.66%, 62.88%, 63.17%, 63.39%, 84.57%, 84.80%, 85.09%, 85.39%, 85.68%, 85.90%, 88.12%, 88.34%, 88.63%, 88.93%, 89.22%, 89.52%, 89.81%, 90.11%, 90.41%, 90.70%, 91.00%, 91.29%, 91.59%, 91.73%, 100.0% {
+        transform: translate(13px, -187px) skewY(32deg) rotate(6deg); }
+      10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 14.83%, 15.13%, 15.42%, 18.08%, 18.38%, 18.67%, 18.97%, 19.26%, 23.76%, 24.06%, 24.35%, 24.65%, 24.94%, 26.94%, 27.23%, 32.47%, 32.77%, 38.01%, 38.30%, 44.58%, 44.87%, 45.17%, 47.31%, 47.60%, 62.73%, 63.03%, 63.32%, 84.65%, 84.94%, 85.24%, 85.53%, 85.83%, 88.19%, 88.49%, 88.78%, 89.08%, 89.37%, 89.67%, 89.96%, 90.26%, 90.55%, 90.85%, 91.14%, 91.44% {
+        transform: translate(13px, -187px) skewY(32deg) rotate(40deg); }
+      10.11%, 10.41%, 10.70%, 11.00%, 11.29%, 14.91%, 15.20%, 15.50%, 18.15%, 18.45%, 18.75%, 19.04%, 19.34%, 23.84%, 24.13%, 24.43%, 24.72%, 27.01%, 32.55%, 38.08%, 44.65%, 44.94%, 45.24%, 47.38%, 62.80%, 63.10%, 84.72%, 85.02%, 85.31%, 85.61%, 88.26%, 88.56%, 88.86%, 89.15%, 89.45%, 89.74%, 90.04%, 90.33%, 90.63%, 90.92%, 91.22%, 91.51% {
+        transform: translate(13px, -187px) skewY(32deg) rotate(20deg); }
+      10.26%, 10.55%, 10.85%, 11.14%, 11.44%, 15.06%, 15.35%, 18.30%, 18.60%, 18.89%, 19.19%, 23.99%, 24.28%, 24.58%, 24.87%, 27.16%, 32.69%, 38.23%, 44.80%, 45.09%, 47.53%, 62.95%, 63.25%, 84.87%, 85.17%, 85.46%, 85.76%, 88.41%, 88.71%, 89.00%, 89.30%, 89.59%, 89.89%, 90.18%, 90.48%, 90.77%, 91.07%, 91.36%, 91.66% {
+        transform: translate(13px, -187px) skewY(32deg) rotate(-20deg); }
+    }
+    @keyframes ro1KneeL {
+      00.00%, 09.96%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 14.76%, 14.91%, 15.06%, 15.20%, 15.35%, 15.50%, 18.01%, 18.15%, 18.30%, 18.45%, 18.60%, 18.75%, 18.89%, 19.04%, 19.19%, 19.34%, 23.69%, 23.84%, 23.99%, 24.13%, 24.28%, 24.43%, 24.58%, 24.72%, 24.87%, 25.02%, 26.86%, 27.01%, 27.16%, 27.31%, 32.40%, 32.55%, 32.69%, 32.84%, 37.93%, 38.08%, 38.23%, 38.38%, 44.50%, 44.65%, 44.80%, 44.94%, 45.09%, 45.24%, 47.23%, 47.38%, 47.53%, 47.67%, 62.66%, 62.80%, 62.95%, 63.10%, 63.25%, 63.39%, 84.57%, 84.72%, 84.87%, 85.02%, 85.17%, 85.31%, 85.46%, 85.61%, 85.76%, 85.90%, 88.12%, 88.26%, 88.41%, 88.56%, 88.71%, 88.86%, 89.00%, 89.15%, 89.30%, 89.45%, 89.59%, 89.74%, 89.89%, 90.04%, 90.18%, 90.33%, 90.48%, 90.63%, 90.77%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 100.0% {
+        transform: translate(-29px, 85px) rotate(-12deg); }
+      10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 14.83%, 15.13%, 15.42%, 18.08%, 18.38%, 18.67%, 18.97%, 19.26%, 23.76%, 24.06%, 24.35%, 24.65%, 24.94%, 26.94%, 27.23%, 32.47%, 32.77%, 38.01%, 38.30%, 44.58%, 44.87%, 45.17%, 47.31%, 47.60%, 62.73%, 63.03%, 63.32%, 84.65%, 84.94%, 85.24%, 85.53%, 85.83%, 88.19%, 88.49%, 88.78%, 89.08%, 89.37%, 89.67%, 89.96%, 90.26%, 90.55%, 90.85%, 91.14%, 91.44% {
+        transform: translate(-29px, 85px) rotate(-60deg); }
+    }
+    @keyframes ro1LegR {
+      00.00%, 10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 11.51%, 14.83%, 15.13%, 15.42%, 15.57%, 18.08%, 18.38%, 18.67%, 18.97%, 19.26%, 19.41%, 23.76%, 24.06%, 24.35%, 24.65%, 24.94%, 26.94%, 27.23%, 32.47%, 32.77%, 38.01%, 38.30%, 44.58%, 44.87%, 45.17%, 45.39%, 47.31%, 47.60%, 62.73%, 63.03%, 63.32%, 84.65%, 84.94%, 85.24%, 85.53%, 85.83%, 88.19%, 88.49%, 88.78%, 89.08%, 89.37%, 89.67%, 89.96%, 90.26%, 90.55%, 90.85%, 91.14%, 91.44%, 91.73%, 100.0% {
+        transform: translate(63px, -187px) skewY(32deg) rotate(6deg); }
+      10.11%, 10.41%, 10.70%, 11.00%, 11.29%, 14.91%, 15.20%, 15.50%, 18.15%, 18.45%, 18.75%, 19.04%, 19.34%, 23.84%, 24.13%, 24.43%, 24.72%, 27.01%, 32.55%, 38.08%, 44.65%, 44.94%, 45.24%, 47.38%, 62.80%, 63.10%, 84.72%, 85.02%, 85.31%, 85.61%, 88.26%, 88.56%, 88.86%, 89.15%, 89.45%, 89.74%, 90.04%, 90.33%, 90.63%, 90.92%, 91.22%, 91.51% {
+        transform: translate(63px, -187px) skewY(32deg) rotate(-20deg); }
+      10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 14.98%, 15.28%, 18.23%, 18.52%, 18.82%, 19.11%, 23.91%, 24.21%, 24.50%, 24.80%, 27.08%, 32.62%, 38.15%, 44.72%, 45.02%, 45.31%, 47.45%, 62.88%, 63.17%, 84.80%, 85.09%, 85.39%, 85.68%, 88.34%, 88.63%, 88.93%, 89.22%, 89.52%, 89.81%, 90.11%, 90.41%, 90.70%, 91.00%, 91.29%, 91.59% {
+        transform: translate(63px, -187px) skewY(32deg) rotate(40deg); }
+      10.26%, 10.55%, 10.85%, 11.14%, 11.44%, 15.06%, 15.35%, 18.30%, 18.60%, 18.89%, 19.19%, 23.99%, 24.28%, 24.58%, 24.87%, 27.16%, 32.69%, 38.23%, 44.80%, 45.09%, 47.53%, 62.95%, 63.25%, 84.87%, 85.17%, 85.46%, 85.76%, 88.41%, 88.71%, 89.00%, 89.30%, 89.59%, 89.89%, 90.18%, 90.48%, 90.77%, 91.07%, 91.36%, 91.66% {
+        transform: translate(63px, -187px) skewY(32deg) rotate(20deg); }
+    }
+    @keyframes ro1KneeR {
+      00.00%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 11.44%, 14.91%, 15.06%, 15.20%, 15.35%, 18.15%, 18.30%, 18.45%, 18.60%, 18.75%, 18.89%, 19.04%, 19.19%, 23.84%, 23.99%, 24.13%, 24.28%, 24.43%, 24.58%, 24.72%, 24.87%, 27.01%, 27.16%, 32.55%, 32.69%, 38.08%, 38.23%, 44.65%, 44.80%, 44.94%, 45.09%, 45.24%, 45.39%, 47.38%, 47.53%, 62.80%, 62.95%, 63.10%, 63.25%, 84.72%, 84.87%, 85.02%, 85.17%, 85.31%, 85.46%, 85.61%, 85.76%, 88.26%, 88.41%, 88.56%, 88.71%, 88.86%, 89.00%, 89.15%, 89.30%, 89.45%, 89.59%, 89.74%, 89.89%, 90.04%, 90.18%, 90.33%, 90.48%, 90.63%, 90.77%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 91.66%, 100.0% {
+        transform: translate(-29px, 85px) rotate(-12deg); }
+      10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 14.98%, 15.28%, 18.23%, 18.52%, 18.82%, 19.11%, 23.91%, 24.21%, 24.50%, 24.80%, 27.08%, 32.62%, 38.15%, 44.72%, 45.02%, 45.31%, 47.45%, 62.88%, 63.17%, 84.80%, 85.09%, 85.39%, 85.68%, 88.34%, 88.63%, 88.93%, 89.22%, 89.52%, 89.81%, 90.11%, 90.41%, 90.70%, 91.00%, 91.29%, 91.59% {
+        transform: translate(-29px, 85px) rotate(-60deg); }
+    }
+
+  @keyframes ro2 {
+    00.00%, 13.51%, 14.84%, 20.81%, 23.77%, 27.23%, 29.53%, 47.60%, 48.42%, 49.08%, 49.53%, 54.17%, 55.14%, 66.20%, 69.31%, 72.77%, 78.75%, 79.11%, 84.58%, 91.73%, 95.29%, 100.0% {
+      opacity: 0; }
+    13.52%, 14.83%, 20.82%, 23.76%, 27.24%, 29.52%, 47.61%, 48.41%, 49.09%, 49.52%, 54.18%, 55.13%, 66.21%, 69.30%, 72.78%, 78.74%, 79.12%, 84.57%, 91.74%, 95.28% {
+      opacity: 1; }
+
+    00.00%, 13.43%, 13.58%, 13.73%, 13.87%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 20.81%, 20.96%, 21.11%, 21.25%, 21.40%, 21.55%, 21.70%, 21.84%, 21.99%, 22.14%, 22.29%, 22.44%, 22.58%, 22.73%, 22.88%, 23.03%, 23.17%, 23.32%, 23.47%, 23.62%, 23.76%, 27.16%, 27.31%, 27.45%, 27.60%, 27.75%, 27.90%, 28.04%, 28.19%, 28.34%, 28.49%, 28.63%, 28.78%, 28.93%, 29.08%, 29.22%, 29.37%, 29.52%, 47.53%, 47.67%, 47.82%, 47.97%, 48.12%, 48.27%, 48.41%, 49.00%, 49.15%, 49.30%, 49.45%, 54.10%, 54.24%, 54.39%, 54.54%, 54.69%, 54.83%, 54.98%, 55.13%, 66.20%, 66.35%, 66.49%, 66.64%, 83.47%, 83.62%, 83.76%, 83.91%, 84.06%, 84.21%, 84.35%, 84.50%, 84.65%, 91.66%, 91.81%, 91.95%, 92.10%, 92.25%, 92.40%, 92.55%, 92.69%, 92.84%, 93.73%, 93.87%, 94.02%, 94.17%, 100.0% {
+      transform: rotateX(-90deg) scale(0.07); }
+    13.51%, 13.65%, 13.80%, 13.95%, 14.10%, 14.24%, 14.39%, 14.54%, 14.69%, 20.89%, 21.03%, 21.18%, 21.33%, 21.48%, 21.62%, 21.77%, 21.92%, 22.07%, 22.21%, 22.36%, 22.51%, 22.66%, 22.80%, 22.95%, 23.10%, 23.25%, 23.39%, 23.54%, 23.69%, 27.23%, 27.38%, 27.53%, 27.68%, 27.82%, 27.97%, 28.12%, 28.27%, 28.41%, 28.56%, 28.71%, 28.86%, 29.00%, 29.15%, 29.30%, 29.45%, 47.60%, 47.75%, 47.90%, 48.04%, 48.19%, 48.34%, 49.08%, 49.22%, 49.37%, 54.17%, 54.32%, 54.46%, 54.61%, 54.76%, 54.91%, 55.05%, 66.27%, 66.42%, 66.57%, 83.54%, 83.69%, 83.84%, 83.98%, 84.13%, 84.28%, 84.43%, 84.57%, 91.73%, 91.88%, 92.03%, 92.18%, 92.32%, 92.47%, 92.62%, 92.77%, 93.80%, 93.95%, 94.10% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.07); }
+  }
+    @keyframes ro2LegL {
+      00.00%, 13.51%, 13.80%, 14.10%, 14.39%, 14.69%, 14.83%, 20.89%, 21.18%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 23.84%, 27.23%, 27.53%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 29.52%, 47.60%, 47.90%, 48.19%, 48.41%, 49.08%, 49.37%, 49.52%, 54.17%, 54.46%, 54.76%, 55.05%, 66.27%, 66.57%, 66.72%, 83.54%, 83.84%, 84.13%, 84.43%, 84.65%, 91.73%, 92.03%, 92.32%, 92.62%, 92.91%, 93.80%, 94.10%, 100.0% {
+        transform: translate(8px, -196px) skewY(10deg) rotate(-6deg); }
+      13.58%, 13.87%, 14.17%, 14.46%, 14.76%, 20.96%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 27.31%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 47.67%, 47.97%, 48.27%, 49.15%, 49.45%, 54.24%, 54.54%, 54.83%, 66.35%, 66.64%, 83.62%, 83.91%, 84.21%, 84.50%, 91.81%, 92.10%, 92.40%, 92.69%, 93.87% {
+        transform: translate(8px, -196px) skewY(10deg) rotate(20deg); }
+      13.65%, 13.95%, 14.24%, 14.54%, 21.03%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 27.38%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 47.75%, 48.04%, 48.34%, 49.22%, 54.32%, 54.61%, 54.91%, 66.42%, 83.69%, 83.98%, 84.28%, 84.57%, 91.88%, 92.18%, 92.47%, 92.77%, 93.95% {
+        transform: translate(8px, -196px) skewY(10deg) rotate(-40deg); }
+      13.73%, 14.02%, 14.32%, 14.61%, 21.11%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 27.45%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 47.82%, 48.12%, 49.30%, 54.39%, 54.69%, 54.98%, 66.49%, 83.76%, 84.06%, 84.35%, 91.95%, 92.25%, 92.55%, 92.84%, 94.02% {
+        transform: translate(8px, -196px) skewY(10deg) rotate(-20deg); }
+    }
+    @keyframes ro2KneeL {
+      00.00%, 13.58%, 13.73%, 13.87%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 20.96%, 21.11%, 21.25%, 21.40%, 21.55%, 21.70%, 21.84%, 21.99%, 22.14%, 22.29%, 22.44%, 22.58%, 22.73%, 22.88%, 23.03%, 23.17%, 23.32%, 23.47%, 23.62%, 23.76%, 27.31%, 27.45%, 27.60%, 27.75%, 27.90%, 28.04%, 28.19%, 28.34%, 28.49%, 28.63%, 28.78%, 28.93%, 29.08%, 29.22%, 29.37%, 29.52%, 47.67%, 47.82%, 47.97%, 48.12%, 48.27%, 48.41%, 49.15%, 49.30%, 54.24%, 54.39%, 54.54%, 54.69%, 54.83%, 54.98%, 66.35%, 66.49%, 83.62%, 83.76%, 83.91%, 84.06%, 84.21%, 84.35%, 84.50%, 84.65%, 91.81%, 91.95%, 92.10%, 92.25%, 92.40%, 92.55%, 92.69%, 92.84%, 93.87%, 94.02%, 100.0% {
+        transform: translateY(85px) rotate(12deg); }
+      13.65%, 13.95%, 14.24%, 14.54%, 21.03%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 27.38%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 47.75%, 48.04%, 48.34%, 49.22%, 54.32%, 54.61%, 54.91%, 66.42%, 83.69%, 83.98%, 84.28%, 84.57%, 91.88%, 92.18%, 92.47%, 92.77%, 93.95% {
+        transform: translateY(85px) rotate(60deg); }
+    }
+    @keyframes ro2LegR {
+      00.00%, 13.43%, 13.65%, 13.95%, 14.24%, 14.54%, 14.83%, 20.81%, 21.03%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 23.84%, 27.16%, 27.38%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 47.53%, 47.75%, 48.04%, 48.34%, 49.00%, 49.22%, 49.52%, 54.10%, 54.32%, 54.61%, 54.91%, 55.13%, 66.20%, 66.42%, 66.72%, 83.47%, 83.69%, 83.98%, 84.28%, 84.57%, 91.66%, 91.88%, 92.18%, 92.47%, 92.77%, 92.91%, 93.73%, 93.95%, 94.17%, 100.0% {
+        transform: translate(64px, -157px) skewY(10deg) rotate(-6deg); }
+      13.51%, 13.80%, 14.10%, 14.39%, 14.69%, 20.89%, 21.18%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 27.23%, 27.53%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 47.60%, 47.90%, 48.19%, 49.08%, 49.37%, 54.17%, 54.46%, 54.76%, 55.05%, 66.27%, 66.57%, 83.54%, 83.84%, 84.13%, 84.43%, 91.73%, 92.03%, 92.32%, 92.62%, 93.80%, 94.10% {
+        transform: translate(64px, -157px) skewY(10deg) rotate(-40deg); }
+      13.58%, 13.87%, 14.17%, 14.46%, 14.76%, 20.96%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 27.31%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 47.67%, 47.97%, 48.27%, 49.15%, 49.45%, 54.24%, 54.54%, 54.83%, 66.35%, 66.64%, 83.62%, 83.91%, 84.21%, 84.50%, 91.81%, 92.10%, 92.40%, 92.69%, 93.87% {
+        transform: translate(64px, -157px) skewY(10deg) rotate(-20deg); }
+      13.73%, 14.02%, 14.32%, 14.61%, 21.11%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 27.45%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 47.82%, 48.12%, 49.30%, 54.39%, 54.69%, 54.98%, 66.49%, 83.76%, 84.06%, 84.35%, 91.95%, 92.25%, 92.55%, 92.84%, 94.02% {
+        transform: translate(64px, -157px) skewY(10deg) rotate(20deg); }
+    }
+    @keyframes ro2KneeR {
+      00.00%, 13.43%, 13.58%, 13.73%, 13.87%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 20.81%, 20.96%, 21.11%, 21.25%, 21.40%, 21.55%, 21.70%, 21.84%, 21.99%, 22.14%, 22.29%, 22.44%, 22.58%, 22.73%, 22.88%, 23.03%, 23.17%, 23.32%, 23.47%, 23.62%, 27.16%, 27.31%, 27.45%, 27.60%, 27.75%, 27.90%, 28.04%, 28.19%, 28.34%, 28.49%, 28.63%, 28.78%, 28.93%, 29.08%, 29.22%, 29.37%, 47.53%, 47.67%, 47.82%, 47.97%, 48.12%, 48.27%, 49.00%, 49.15%, 49.30%, 49.45%, 54.10%, 54.24%, 54.39%, 54.54%, 54.69%, 54.83%, 54.98%, 55.13%, 66.20%, 66.35%, 66.49%, 66.64%, 83.47%, 83.62%, 83.76%, 83.91%, 84.06%, 84.21%, 84.35%, 84.50%, 91.66%, 91.81%, 91.95%, 92.10%, 92.25%, 92.40%, 92.55%, 92.69%, 93.73%, 93.87%, 94.02%, 94.17%, 100.0% {
+        transform: translateY(85px) rotate(12deg); }
+	
+      13.51%, 13.80%, 14.10%, 14.39%, 14.69%, 20.89%, 21.18%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 27.23%, 27.53%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 47.60%, 47.90%, 48.19%, 49.08%, 49.37%, 54.17%, 54.46%, 54.76%, 55.05%, 66.27%, 66.57%, 83.54%, 83.84%, 84.13%, 84.43%, 91.73%, 92.03%, 92.32%, 92.62%, 93.80%, 94.10% {
+        transform: translateY(85px) rotate(60deg); }
+    }
+
+  @keyframes ro3 {
+    00.00%, 15.50%, 18.09%, 31.96%, 32.48%, 32.84%, 32.92%, 38.30%, 44.51%, 49.59%, 51.52%, 55.20%, 59.49%, 85.83%, 88.20%, 100.0% {
+      opacity: 0; }
+    15.51%, 18.08%, 31.97%, 32.47%, 32.85%, 32.91%, 38.31%, 44.50%, 49.60%, 51.51%, 55.21%, 59.48%, 85.84%, 88.19% {
+      opacity: 1; }
+
+    00.00%, 15.42%, 15.57%, 15.72%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 31.96%, 32.10%, 32.25%, 32.40%, 32.55%, 38.30%, 38.45%, 38.60%, 38.75%, 38.89%, 39.04%, 39.19%, 39.34%, 39.48%, 50.77%, 50.92%, 51.07%, 51.22%, 51.36%, 51.51%, 85.76%, 85.90%, 86.05%, 86.20%, 86.35%, 86.49%, 86.64%, 86.79%, 86.94%, 87.08%, 87.23%, 87.38%, 87.53%, 87.67%, 87.82%, 87.97%, 88.12%, 88.19%, 100.0% {
+      transform: rotateX(-90deg) scale(0.07); }
+    15.50%, 15.65%, 15.79%, 15.94%, 16.09%, 16.24%, 16.38%, 16.53%, 16.68%, 16.83%, 16.97%, 17.12%, 17.27%, 17.42%, 17.56%, 17.71%, 17.86%, 18.01%, 32.03%, 32.18%, 32.32%, 32.47%, 38.38%, 38.52%, 38.67%, 38.82%, 38.97%, 39.11%, 39.26%, 39.41%, 50.85%, 51.00%, 51.14%, 51.29%, 51.44%, 85.83%, 85.98%, 86.12%, 86.27%, 86.42%, 86.57%, 86.72%, 86.86%, 87.01%, 87.16%, 87.31%, 87.45%, 87.60%, 87.75%, 87.90%, 88.04% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.07); }
+  }
+    @keyframes ro3LegL {
+      00.00%, 15.50%, 15.79%, 16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 18.15%, 32.03%, 32.32%, 32.55%, 38.38%, 38.67%, 38.97%, 39.26%, 39.48%, 50.85%, 51.14%, 51.44%, 51.59%, 85.83%, 86.12%, 86.42%, 86.72%, 87.01%, 87.31%, 87.60%, 87.90%, 88.19%, 100.0% {
+        transform: translate(8px, -196px) rotate(0deg); }
+      15.57%, 15.87%, 16.16%, 16.46%, 16.75%, 17.05%, 17.34%, 17.64%, 17.93%, 32.10%, 32.40%, 38.45%, 38.75%, 39.04%, 39.34%, 50.92%, 51.22%, 51.51%, 85.90%, 86.20%, 86.49%, 86.79%, 87.08%, 87.38%, 87.67%, 87.97% {
+        transform: translate(8px, -196px) rotate(-20deg); }
+      15.65%, 15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 32.18%, 32.47%, 38.52%, 38.82%, 39.11%, 39.41%, 51.00%, 51.29%, 85.98%, 86.27%, 86.57%, 86.86%, 87.16%, 87.45%, 87.75%, 88.04% {
+        transform: translate(8px, -196px) rotate(40deg); }
+      15.72%, 16.01%, 16.31%, 16.61%, 16.90%, 17.20%, 17.49%, 17.79%, 18.08%, 32.25%, 38.60%, 38.89%, 39.19%, 51.07%, 51.36%, 86.05%, 86.35%, 86.64%, 86.94%, 87.23%, 87.53%, 87.82%, 88.12% {
+        transform: translate(8px, -196px) rotate(20deg); }
+    }
+    @keyframes ro3KneeL {
+      00.00%, 15.57%, 15.72%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 32.10%, 32.25%, 32.40%, 32.55%, 38.45%, 38.60%, 38.75%, 38.89%, 39.04%, 39.19%, 39.34%, 39.48%, 50.92%, 51.07%, 51.22%, 51.36%, 85.90%, 86.05%, 86.20%, 86.35%, 86.49%, 86.64%, 86.79%, 86.94%, 87.08%, 87.23%, 87.38%, 87.53%, 87.67%, 87.82%, 87.97%, 88.12%, 100.0% {
+        transform: translate(-29px, 85px) rotate(-6deg); }
+      15.65%, 15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 32.18%, 32.47%, 38.52%, 38.82%, 39.11%, 39.41%, 51.00%, 51.29%, 85.98%, 86.27%, 86.57%, 86.86%, 87.16%, 87.45%, 87.75%, 88.04% {
+        transform: translate(-29px, 85px) rotate(-60deg); }
+    }
+    @keyframes ro3LegR {
+      00.00%, 15.42%, 15.65%, 15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 18.15%, 31.96%, 32.18%, 32.47%, 38.30%, 38.52%, 38.82%, 39.11%, 39.41%, 50.77%, 51.00%, 51.29%, 51.59%, 85.76%, 85.98%, 86.27%, 86.57%, 86.86%, 87.16%, 87.45%, 87.75%, 88.04%, 88.19%, 100.0% {
+        transform: translate(64px, -157px) rotate(0deg); }
+      15.50%, 15.79%, 16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 32.03%, 32.32%, 38.38%, 38.67%, 38.97%, 39.26%, 50.85%, 51.14%, 51.44%, 85.83%, 86.12%, 86.42%, 86.72%, 87.01%, 87.31%, 87.60%, 87.90% {
+        transform: translate(64px, -157px) rotate(40deg); }
+      15.57%, 15.87%, 16.16%, 16.46%, 16.75%, 17.05%, 17.34%, 17.64%, 17.93%, 32.10%, 32.40%, 38.45%, 38.75%, 39.04%, 39.34%, 50.92%, 51.22%, 51.51%, 85.90%, 86.20%, 86.49%, 86.79%, 87.08%, 87.38%, 87.67%, 87.97% {
+        transform: translate(64px, -157px) rotate(20deg); }
+      15.72%, 16.01%, 16.31%, 16.61%, 16.90%, 17.20%, 17.49%, 17.79%, 18.08%, 32.25%, 38.60%, 38.89%, 39.19%, 51.07%, 51.36%, 86.05%, 86.35%, 86.64%, 86.94%, 87.23%, 87.53%, 87.82%, 88.12% {
+        transform: translate(64px, -157px) rotate(-20deg); }
+    }
+    @keyframes ro3KneeR {
+      00.00%, 15.42%, 15.57%, 15.72%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 31.96%, 32.10%, 32.25%, 32.40%, 38.30%, 38.45%, 38.60%, 38.75%, 38.89%, 39.04%, 39.19%, 39.34%, 50.77%, 50.92%, 51.07%, 51.22%, 51.36%, 51.51%, 85.76%, 85.90%, 86.05%, 86.20%, 86.35%, 86.49%, 86.64%, 86.79%, 86.94%, 87.08%, 87.23%, 87.38%, 87.53%, 87.67%, 87.82%, 87.97%, 100.0% {
+        transform: translate(-29px, 85px) rotate(-6deg); }
+      15.50%, 15.79%, 16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 32.03%, 32.32%, 38.38%, 38.67%, 38.97%, 39.26%, 50.85%, 51.14%, 51.44%, 85.83%, 86.12%, 86.42%, 86.72%, 87.01%, 87.31%, 87.60%, 87.90% {
+        transform: translate(-29px, 85px) rotate(-60deg); }
+    }
+  
+  @keyframes ro4 {
+    00.00%, 32.91%, 37.94%, 48.63%, 49.09%, 51.51%, 54.18%, 55.13%, 55.21%, 69.30%, 72.78%, 78.74%, 79.12%, 95.28% {
+      opacity: 0; }
+    32.92%, 37.93%, 48.64%, 49.08%, 51.52%, 54.17%, 55.14%, 55.20%, 69.31%, 72.77%, 78.75%, 79.11%, 95.29%, 100.0% {
+      opacity: 1; }
+
+    00.00%, 48.63%, 48.78%, 48.93%, 49.08%, 49.15%, 51.44%, 51.59%, 51.73%, 51.88%, 51.96%, 53.80%, 53.95%, 54.10%, 54.24%, 69.30%, 69.45%, 69.59%, 69.74%, 69.89%, 70.04%, 70.18%, 78.74%, 78.89%, 79.04%, 79.11%, 95.28%, 95.42%, 95.57%, 95.72%, 95.79%, 100.0% {
+      transform: rotateX(-90deg) scale(0.07); }
+    48.71%, 48.86%, 49.00%, 51.51%, 51.66%, 51.81%, 53.87%, 54.02%, 54.17%, 69.37%, 69.52%, 69.67%, 69.81%, 69.96%, 70.11%, 78.82%, 78.97%, 95.35%, 95.50%, 95.64% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.07); }
+  }
+    @keyframes ro4LegL {
+      00.00%, 48.71%, 49.00%, 49.15%, 51.51%, 51.81%, 51.96%, 53.87%, 54.17%, 69.37%, 69.67%, 69.96%, 70.18%, 78.82%, 79.11%, 95.35%, 95.64%, 95.79%, 100.0% {
+        transform: translate(8px, -191px) skewY(42deg) rotate(0deg); }
+      48.78%, 49.08%, 51.59%, 51.88%, 53.95%, 69.45%, 69.74%, 70.04%, 78.89%, 95.42%, 95.72% {
+        transform: translate(8px, -191px) skewY(42deg) rotate(10deg); }
+      48.86%, 51.66%, 54.02%, 69.52%, 69.81%, 70.11%, 78.97%, 95.50% {
+        transform: translate(8px, -191px) skewY(42deg) rotate(-30deg); }
+      48.93%, 51.73%, 54.10%, 69.59%, 69.89%, 79.04%, 95.57% {
+        transform: translate(8px, -191px) skewY(42deg) rotate(-20deg); }
+    }
+    @keyframes ro4KneeL {
+      00.00%, 48.78%, 48.93%, 51.59%, 51.73%, 53.95%, 54.10%, 69.45%, 69.59%, 69.74%, 69.89%, 70.04%, 70.18%, 78.89%, 79.04%, 95.42%, 95.57%, 100.0% {
+        transform: translateY(85px) rotate(6deg); }
+      48.86%, 51.66%, 54.02%, 69.52%, 69.81%, 70.11%, 78.97%, 95.50% {
+        transform: translateY(85px) rotate(40deg); }
+    }
+    @keyframes ro4LegR {
+      00.00%, 48.63%, 48.86%, 49.15%, 51.44%, 51.66%, 51.96%, 53.80%, 54.02%, 54.24%, 69.30%, 69.52%, 69.81%, 70.11%, 78.74%, 78.97%, 79.11%, 95.28%, 95.50%, 95.79%, 100.0% {
+        transform: translate(57px, -189px) skewY(42deg) rotate(0deg); }
+      48.71%, 49.00%, 51.51%, 51.81%, 53.87%, 54.17%, 69.37%, 69.67%, 69.96%, 78.82%, 95.35%, 95.64% {
+        transform: translate(57px, -189px) skewY(42deg) rotate(-30deg); }
+      48.78%, 49.08%, 51.59%, 51.88%, 53.95%, 69.45%, 69.74%, 70.04%, 78.89%, 95.42%, 95.72% {
+        transform: translate(57px, -189px) skewY(42deg) rotate(-10deg); }
+      48.93%, 51.73%, 54.10%, 69.59%, 69.89%, 79.04%, 95.57% {
+        transform: translate(57px, -189px) skewY(42deg) rotate(20deg); }
+    }
+    @keyframes ro4KneeR {
+      00.00%, 48.63%, 48.78%, 48.93%, 49.08%, 51.44%, 51.59%, 51.73%, 51.88%, 53.80%, 53.95%, 54.10%, 54.24%, 69.30%, 69.45%, 69.59%, 69.74%, 69.89%, 70.04%, 78.74%, 78.89%, 95.28%, 95.42%, 95.57%, 95.72%, 100.0% {
+        transform: translateY(85px) rotate(6deg); }
+      48.71%, 49.00%, 51.51%, 51.81%, 53.87%, 54.17%, 69.37%, 69.67%, 69.96%, 78.82%, 95.35%, 95.64% {
+        transform: translateY(85px) rotate(40deg); }
+    }
+    @keyframes ro4Head {
+      00.00%, 96.16% { transform: translate(-50px, -562px) rotateX(0deg) skew(16deg, 15deg); }
+      96.60%, 100.0% { transform: translate(-4px, -532px) rotate(30deg) skew(23deg, -1deg); }
+    }
+    @keyframes ro4Face {
+      00.00%, 96.16% { transform: rotate(0deg); }
+      96.60%, 100.0% { transform: rotate(38deg); }
+    }
+
+
+/* GIRL */
+@keyframes girl {
+  00.00% { transform: translate(72em, 42em) translateZ(-32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  09.96% { transform: translate(72em, 42em) translateZ(-32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  10.48% { transform: translate(72em, 32em) translateZ(-32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  11.51% { transform: translate(72em, 21.75em) translateZ(-22em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  13.51% { transform: translate(72em, 21.75em) translateZ(-22em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  13.65% { transform: translate(72em, 16em) translateZ(-16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  14.02% { transform: translate(72em, 12em) translateZ(-16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  14.17% { transform: translate(75em, 13em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  14.69% { transform: translate(75em, 21em) translateZ(1em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  15.28% { transform: translate(86em, 21em) translateZ(1em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  15.94% { transform: translate(70em, 20em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  18.60% { transform: translate(18em, 19em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  19.04% { transform: translate(18em, 10em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  19.41% { transform: translate(18em, 4.5em) translateZ(19em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  20.81% { transform: translate(18em, 4.5em) translateZ(19em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  21.11% { transform: translate(18em, 1em) translateZ(23em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  21.25% { transform: translate(18em, -3em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  24.28% { transform: translate(80em, -3em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  25.02% { transform: translate(80em, -17em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  25.46% { transform: translate(80em, -17em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  25.83% { transform: translate(80em, -64em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  26.86% { transform: translate(80em, -64em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  27.60% { transform: translate(80em, -80em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  29.52% { transform: translate(82em, -43em) translateZ(61em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  29.59% { transform: translate(82em, -43em) translateZ(61em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  30.11% { transform: translate(91em, -43em) translateZ(61em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  33.06% { transform: translate(48em, 51em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  33.51% { transform: translate(41em, 51em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  37.93% { transform: translate(41em, 51em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  38.67% { transform: translate(41em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  39.48% { transform: translate(25em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  40.00% { transform: translate(25em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  40.37% { transform: translate(25em, 35em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  41.48% { transform: translate(25em, 35em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  41.70% { transform: translate(25em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  42.36% { transform: translate(25em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  43.62% { transform: translate(25em, 35em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  44.50% { transform: translate(25em, 35em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  44.87% { transform: translate(17em, 35em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  45.39% { transform: translate(17em, 28em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  45.83% { transform: translate(17em, 28em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  46.05% { transform: translate(18em, 28em) translateZ(46em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  47.23% { transform: translate(18em, 28em) translateZ(46em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  47.97% { transform: translate(18em, 12em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  48.41% { transform: translate(27em, 12em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  48.56% { transform: translate(27em, 12em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  49.00% { transform: translate(35em, 12em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  49.22% { transform: translate(41em, -28em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  49.67% { transform: translate(41em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  50.77% { transform: translate(41em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  51.14% { transform: translate(49em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  51.96% { transform: translate(33em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  52.47% { transform: translate(33em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  52.77% { transform: translate(33em, 12em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  53.80% { transform: translate(33em, 12em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  54.61% { transform: translate(33em, 27em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  55.13% { transform: translate(48em, 27em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  55.87% { transform: translate(48em, 27em) translateZ(55em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  55.94% { transform: translate(48em, 27em) translateZ(56em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  56.01% { transform: translate(48em, 27em) translateZ(54em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  59.93% { transform: translate(48em, 27em) translateZ(54em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  60.52% { transform: translate(48em, 38em) translateZ(54em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  60.96% { transform: translate(48em, 47em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  61.40% { transform: translate(48em, 53em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  62.43% { transform: translate(48em, 68em) translateZ(32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  62.66% { transform: translate(48em, 72em) translateZ(32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  66.20% { transform: translate(104em, 72em) translateZ(32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  67.16% { transform: translate(104em, 89em) translateZ(32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  67.75% { transform: translate(104em, 97em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  68.86% { transform: translate(105em, 118em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  70.18% { transform: translate(105em, 119em) translateZ(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  71.36% { transform: translate(105em, 140em) translateZ(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  72.47% { transform: translate(105em, 157em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  73.43% { transform: translate(105em, 174em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  90.92% { transform: translate(105em, 174em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  91.73% { transform: translate(105em, 160em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  94.17% { transform: translate(105em, 160em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  94.76% { transform: translate(105em, 173em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  95.13% { transform: translate(105em, 173em) translateZ(-43em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  95.20% { transform: translate(105em, 173em) translateZ(-40em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  95.28% { transform: translate(105em, 173em) translateZ(-43em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  95.57% { transform: translate(97em, 173em) translateZ(-43em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  96.60% { transform: translate(96.5em, 164.5em) translateZ(-43em) rotateX(4deg) rotateY(0deg) rotateZ(-6deg); }
+  100.0% { transform: translate(96.5em, 164.5em) translateZ(-43em) rotateX(4deg) rotateY(0deg) rotateZ(-6deg); }
+}
+  @keyframes girlArmL {
+    00.00% { transform: translate(-3px, 5px) translateZ(30px) rotateX(-90deg) rotateY(0deg) rotateZ(4deg); }
+    96.01% { transform: translate(-1px, 3px) translateZ(28px) rotateX(-90deg) rotateY(0deg) rotateZ(4deg); }
+    96.31%, 100.0% { transform: translate(-5px, 4px) translateZ(21px) rotateX(-90deg) rotateY(0deg) rotateZ(120deg); }
+    
+    
+    00.00%, 96.01% { background: transparent; }
+    96.16%, 100.0% { background: white; }
+  }
+    @keyframes girlHandL {
+      00.00%, 96.01% { transform: translateY(4px) rotateZ(70deg); }
+      96.31%, 100.0% { transform: translateY(4px) rotateZ(30deg); }
+
+      00.00%, 96.01% { background: transparent; }
+      96.31%, 100.0% { background: white; }
+    }
+  @keyframes girl1 {
+    00.00%, 14.02%, 15.29%, 15.94%, 18.60%, 21.25%, 24.29%, 27.60%, 33.52%, 38.67%, 44.88%, 47.97%, 68.94%, 70.18%, 90.93%, 91.73%, 95.58%, 100.0% {
+      opacity: 1; }
+    14.03%, 15.28%, 15.95%, 18.60%, 21.26%, 24.28%, 27.61%, 33.51%, 38.68%, 44.87%, 47.98%, 68.93%, 70.19%, 90.92%, 91.73%, 95.57% {
+      opacity: 0; }
+
+    00.00%, 09.97%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 11.44%, 13.51%, 13.65%, 13.80%, 13.95%, 14.10%, 15.20%, 15.35%, 15.50%, 15.65%, 15.79%, 15.94%, 18.52%, 18.67%, 18.82%, 18.97%, 19.11%, 19.26%, 19.41%, 20.81%, 20.96%, 21.11%, 21.25%, 24.21%, 24.35%, 24.50%, 24.65%, 24.80%, 24.94%, 26.86%, 27.01%, 27.16%, 27.31%, 27.45%, 27.60%, 44.80%, 44.94%, 45.09%, 45.24%, 45.39%, 47.23%, 47.38%, 47.53%, 47.67%, 47.82%, 47.97%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 91.66%, 95.50%, 95.64%, 95.79%, 95.94%, 96.09%, 96.24%, 96.38%, 96.53%, 96.60%, 100.0% {
+      transform: rotateX(-90deg) scale(0.06); }
+    10.04%, 10.18%, 10.33%, 10.48%, 10.63%, 10.77%, 10.92%, 11.07%, 11.22%, 11.37%, 13.58%, 13.73%, 13.87%, 14.02%, 15.28%, 15.42%, 15.57%, 15.72%, 15.87%, 18.60%, 18.75%, 18.89%, 19.04%, 19.19%, 19.34%, 20.89%, 21.03%, 21.18%, 24.28%, 24.43%, 24.58%, 24.72%, 24.87%, 26.94%, 27.08%, 27.23%, 27.38%, 27.53%, 44.87%, 45.02%, 45.17%, 45.31%, 47.31%, 47.45%, 47.60%, 47.75%, 47.90%, 91.00%, 91.14%, 91.29%, 91.44%, 91.59%, 95.57%, 95.72%, 95.87%, 96.01%, 96.16%, 96.31%, 96.46% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.06); }
+  }
+    @keyframes girl1LegL {
+      00.00%, 09.97%, 10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 11.51%, 13.51%, 13.73%, 14.02%, 15.20%, 15.42%, 15.72%, 16.01%, 18.52%, 18.75%, 19.04%, 19.34%, 20.81%, 21.03%, 21.33%, 24.21%, 24.43%, 24.72%, 25.02%, 26.86%, 27.08%, 27.38%, 27.68%, 44.80%, 45.02%, 45.31%, 47.23%, 47.45%, 47.75%, 48.04%, 68.86%, 69.08%, 69.37%, 69.67%, 69.96%, 70.18%, 90.92%, 91.14%, 91.44%, 91.73%, 95.50%, 95.72%, 96.01%, 96.31%, 96.60%, 100.0% {
+        transform: translate(1px, -136px) skewY(21deg) rotate(0deg); }
+      10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 13.58%, 13.87%, 15.28%, 15.57%, 15.87%, 18.60%, 18.89%, 19.19%, 20.89%, 21.18%, 24.28%, 24.58%, 24.87%, 26.94%, 27.23%, 27.53%, 44.87%, 45.17%, 47.31%, 47.60%, 47.90%, 91.00%, 91.29%, 91.59%, 95.57%, 95.87%, 96.16%, 96.46% {
+        transform: translate(1px, -136px) skewY(21deg) rotate(40deg); }
+      10.11%, 10.41%, 10.70%, 11.00%, 11.29%, 13.65%, 13.95%, 15.35%, 15.65%, 15.94%, 18.67%, 18.97%, 19.26%, 20.96%, 21.25%, 24.35%, 24.65%, 24.94%, 27.01%, 27.31%, 27.60%, 44.94%, 45.24%, 47.38%, 47.67%, 47.97%, 91.07%, 91.36%, 91.66%, 95.64%, 95.94%, 96.24%, 96.53% {
+        transform: translate(1px, -136px) skewY(21deg) rotate(20deg); }
+      10.26%, 10.55%, 10.85%, 11.14%, 11.44%, 13.80%, 15.50%, 15.79%, 18.82%, 19.11%, 21.11%, 24.50%, 24.80%, 27.16%, 27.45%, 45.09%, 47.53%, 47.82%, 91.22%, 91.51%, 95.79%, 96.09%, 96.38% {
+        transform: translate(1px, -136px) skewY(21deg) rotate(-20deg); }
+      68.93%, 69.22%, 69.52%, 69.81%, 70.11% {
+        transform: translate(1px, -136px) skewY(21deg) rotate(110deg); }
+    }
+    @keyframes girl1KneeL {
+      00.00%, 09.97%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 13.51%, 13.65%, 13.80%, 13.95%, 15.20%, 15.35%, 15.50%, 15.65%, 15.79%, 15.94%, 18.52%, 18.67%, 18.82%, 18.97%, 19.11%, 19.26%, 20.81%, 20.96%, 21.11%, 21.25%, 24.21%, 24.35%, 24.50%, 24.65%, 24.80%, 24.94%, 26.86%, 27.01%, 27.16%, 27.31%, 27.45%, 27.60%, 44.80%, 44.94%, 45.09%, 45.24%, 47.23%, 47.38%, 47.53%, 47.67%, 47.82%, 47.97%, 68.86%, 69.08%, 69.37%, 69.67%, 69.96%, 70.18%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 91.66%, 95.50%, 95.64%, 95.79%, 95.94%, 96.09%, 96.24%, 96.38%, 96.53%, 100.0% {
+        transform: translate(-18px, 52px) rotate(0deg); }
+      10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 13.58%, 13.87%, 15.28%, 15.57%, 15.87%, 18.60%, 18.89%, 19.19%, 20.89%, 21.18%, 24.28%, 24.58%, 24.87%, 26.94%, 27.23%, 27.53%, 44.87%, 45.17%, 47.31%, 47.60%, 47.90%, 91.00%, 91.29%, 91.59%, 95.57%, 95.87%, 96.16%, 96.46% {
+        transform: translate(-18px, 52px) rotate(-60deg); }
+      68.93%, 69.22%, 69.52%, 69.81%, 70.11% {
+        transform: translate(-18px, 52px) rotate(-120deg); }
+    }
+    @keyframes girl1LegR {
+      00.00%, 10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 11.51%, 13.58%, 13.87%, 14.10%, 15.28%, 15.57%, 15.87%, 16.01%, 18.60%, 18.89%, 19.19%, 19.41%, 20.89%, 21.18%, 21.33%, 24.28%, 24.58%, 24.87%, 25.02%, 26.94%, 27.23%, 27.53%, 27.68%, 44.87%, 45.17%, 45.39%, 47.31%, 47.60%, 47.90%, 48.04%, 68.93%, 69.22%, 69.52%, 69.81%, 70.11%, 91.00%, 91.29%, 91.59%, 91.73%, 95.57%, 95.87%, 96.16%, 96.46%, 96.60%, 100.0% {
+        transform: translate(45px, -132px) skewY(21deg) rotate(0deg); }
+      10.11%, 10.41%, 10.70%, 11.00%, 11.29%, 13.65%, 13.95%, 15.35%, 15.65%, 15.94%, 18.67%, 18.97%, 19.26%, 20.96%, 21.25%, 24.35%, 24.65%, 24.94%, 27.01%, 27.31%, 27.60%, 44.94%, 45.24%, 47.38%, 47.67%, 47.97%, 91.07%, 91.36%, 91.66%, 95.64%, 95.94%, 96.24%, 96.53% {
+        transform: translate(45px, -132px) skewY(21deg) rotate(-20deg); }
+      10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 13.73%, 14.02%, 15.42%, 15.72%, 18.75%, 19.04%, 19.34%, 21.03%, 24.43%, 24.72%, 27.08%, 27.38%, 45.02%, 45.31%, 47.45%, 47.75%, 91.14%, 91.44%, 95.72%, 96.01%, 96.31% {
+        transform: translate(45px, -132px) skewY(21deg) rotate(40deg); }
+      10.26%, 10.55%, 10.85%, 11.14%, 11.44%, 13.80%, 15.50%, 15.79%, 18.82%, 19.11%, 21.11%, 24.50%, 24.80%, 27.16%, 27.45%, 45.09%, 47.53%, 47.82%, 91.22%, 91.51%, 95.79%, 96.09%, 96.38% {
+        transform: translate(45px, -132px) skewY(21deg) rotate(20deg); }
+      69.08%, 69.37%, 69.67%, 69.96% {
+        transform: translate(45px, -132px) skewY(21deg) rotate(200deg); }
+    }
+    @keyframes girl1KneeR {
+      00.00%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 11.44%, 13.65%, 13.80%, 13.95%, 14.10%, 15.35%, 15.50%, 15.65%, 15.79%, 18.67%, 18.82%, 18.97%, 19.11%, 19.26%, 19.41%, 20.96%, 21.11%, 24.35%, 24.50%, 24.65%, 24.80%, 27.01%, 27.16%, 27.31%, 27.45%, 44.94%, 45.09%, 45.24%, 45.39%, 47.38%, 47.53%, 47.67%, 47.82%, 68.93%, 69.22%, 69.52%, 69.81%, 70.11%, 91.07%, 91.22%, 91.36%, 91.51%, 95.64%, 95.79%, 95.94%, 96.09%, 96.24%, 96.38%, 100.0% {
+        transform: translate(-18px, 52px) rotate(0deg); }
+      10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 13.73%, 14.02%, 15.42%, 15.72%, 18.75%, 19.04%, 19.34%, 21.03%, 24.43%, 24.72%, 27.08%, 27.38%, 45.02%, 45.31%, 47.45%, 47.75%, 69.08%, 69.37%, 69.67%, 69.96%, 91.14%, 91.44%, 95.72%, 96.01%, 96.31% {
+        transform: translate(-18px, 52px) rotate(-60deg); }
+    }
+
+  @keyframes girl2 {
+    00.00%, 14.02%, 15.29%, 21.25%, 24.29%, 27.60%, 30.12%, 47.97%, 49.01%, 49.67%, 51.15%, 54.61%, 59.49%, 62.66%, 66.21%, 68.86%, 68.94%, 100.0% {
+      opacity: 0; }
+    14.03%, 15.28%, 21.26%, 24.28%, 27.61%, 30.11%, 47.98%, 49.00%, 49.68%, 51.14%, 54.62%, 59.48%, 62.67%, 66.20%, 68.87%, 68.93% {
+      opacity: 1; }
+
+    00.00%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 14.91%, 15.06%, 15.20%, 15.35%, 21.18%, 21.33%, 21.48%, 21.62%, 21.77%, 21.92%, 22.07%, 22.21%, 22.36%, 22.51%, 22.66%, 22.80%, 22.95%, 23.10%, 23.25%, 23.39%, 23.54%, 23.69%, 23.84%, 23.99%, 24.13%, 24.28%, 27.53%, 27.68%, 27.82%, 27.97%, 28.12%, 28.27%, 28.41%, 28.56%, 28.71%, 28.86%, 29.00%, 29.15%, 29.30%, 29.45%, 29.59%, 29.74%, 29.89%, 47.90%, 48.04%, 48.19%, 48.34%, 48.56%, 48.71%, 48.86%, 49.00%, 50.77%, 50.92%, 51.07%, 51.22%, 54.54%, 54.69%, 54.83%, 54.98%, 55.13%, 62.58%, 62.73%, 62.88%, 63.03%, 63.17%, 63.32%, 63.47%, 63.62%, 63.76%, 63.91%, 64.06%, 64.21%, 64.35%, 64.50%, 64.65%, 64.80%, 64.94%, 65.09%, 65.24%, 65.39%, 65.53%, 65.68%, 65.83%, 65.98%, 66.12%, 100.0% {
+      transform: rotateX(-90deg) scale(0.06); }
+    14.10%, 14.24%, 14.39%, 14.54%, 14.69%, 14.83%, 14.98%, 15.13%, 15.28%, 21.25%, 21.40%, 21.55%, 21.70%, 21.84%, 21.99%, 22.14%, 22.29%, 22.44%, 22.58%, 22.73%, 22.88%, 23.03%, 23.17%, 23.32%, 23.47%, 23.62%, 23.76%, 23.91%, 24.06%, 24.21%, 27.60%, 27.75%, 27.90%, 28.04%, 28.19%, 28.34%, 28.49%, 28.63%, 28.78%, 28.93%, 29.08%, 29.22%, 29.37%, 29.67%, 29.82%, 47.97%, 48.12%, 48.27%, 48.63%, 48.78%, 48.93%, 50.85%, 51.00%, 51.14%, 54.61%, 54.76%, 54.91%, 55.05%, 62.66%, 62.80%, 62.95%, 63.10%, 63.25%, 63.39%, 63.54%, 63.69%, 63.84%, 63.98%, 64.13%, 64.28%, 64.43%, 64.58%, 64.72%, 64.87%, 65.02%, 65.17%, 65.31%, 65.46%, 65.61%, 65.76%, 65.90%, 66.05% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.06); }
+  }
+    @keyframes girl2LegL {
+      00.00%, 14.10%, 14.39%, 14.69%, 14.98%, 15.28%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 23.91%, 24.21%, 24.35%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 29.52%, 29.67%, 29.96%, 47.97%, 48.27%, 48.41%, 48.63%, 48.93%, 50.85%, 51.14%, 54.61%, 54.91%, 55.20%, 62.66%, 62.95%, 63.25%, 63.54%, 63.84%, 64.13%, 64.43%, 64.72%, 65.02%, 65.31%, 65.61%, 65.90%, 66.20%, 100.0% {
+        transform: translate(1px, -141px) skewY(22deg) rotate(0deg); }
+      14.17%, 14.46%, 14.76%, 15.06%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 23.99%, 24.28%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 29.74%, 48.04%, 48.34%, 48.71%, 50.92%, 54.69%, 54.98%, 62.73%, 63.03%, 63.32%, 63.62%, 63.91%, 64.21%, 64.50%, 64.80%, 65.09%, 65.39%, 65.68%, 65.98% {
+        transform: translate(1px, -141px) skewY(22deg) rotate(20deg); }
+      14.24%, 14.54%, 14.83%, 15.13%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 24.06%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 29.82%, 48.12%, 48.78%, 51.00%, 54.76%, 55.05%, 62.80%, 63.10%, 63.39%, 63.69%, 63.98%, 64.28%, 64.58%, 64.87%, 65.17%, 65.46%, 65.76%, 66.05% {
+        transform: translate(1px, -141px) skewY(22deg) rotate(-40deg); }
+      14.32%, 14.61%, 14.91%, 15.20%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 23.84%, 24.13%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 29.89%, 48.19%, 48.86%, 51.07%, 54.83%, 55.13%, 62.88%, 63.17%, 63.47%, 63.76%, 64.06%, 64.35%, 64.65%, 64.94%, 65.24%, 65.53%, 65.83%, 66.12% {
+        transform: translate(1px, -141px) skewY(22deg) rotate(-20deg); }
+    }
+    @keyframes girl2KneeL {
+      00.00%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 14.91%, 15.06%, 15.20%, 21.33%, 21.48%, 21.62%, 21.77%, 21.92%, 22.07%, 22.21%, 22.36%, 22.51%, 22.66%, 22.80%, 22.95%, 23.10%, 23.25%, 23.39%, 23.54%, 23.69%, 23.84%, 23.99%, 24.13%, 27.68%, 27.82%, 27.97%, 28.12%, 28.27%, 28.41%, 28.56%, 28.71%, 28.86%, 29.00%, 29.15%, 29.30%, 29.74%, 29.89%, 48.04%, 48.19%, 48.71%, 48.86%, 50.92%, 51.07%, 54.69%, 54.83%, 54.98%, 55.13%, 62.73%, 62.88%, 63.03%, 63.17%, 63.32%, 63.47%, 63.62%, 63.76%, 63.91%, 64.06%, 64.21%, 64.35%, 64.50%, 64.65%, 64.80%, 64.94%, 65.09%, 65.24%, 65.39%, 65.53%, 65.68%, 65.83%, 65.98%, 66.12%, 100.0% {
+        transform: translateY(52px) rotate(0deg); }
+      14.24%, 14.54%, 14.83%, 15.13%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 24.06%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 29.82%, 48.12%, 48.78%, 51.00%, 54.76%, 55.05%, 62.80%, 63.10%, 63.39%, 63.69%, 63.98%, 64.28%, 64.58%, 64.87%, 65.17%, 65.46%, 65.76%, 66.05% {
+        transform: translateY(52px) rotate(60deg); }
+    }
+    @keyframes girl2LegR {
+      00.00%, 14.02%, 14.24%, 14.54%, 14.83%, 15.13%, 15.35%, 21.18%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 24.06%, 24.35%, 27.53%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 29.52%, 29.59%, 29.82%, 29.96%, 47.90%, 48.12%, 48.41%, 48.56%, 48.78%, 49.00%, 50.77%, 51.00%, 51.22%, 54.54%, 54.76%, 55.05%, 55.20%, 62.58%, 62.80%, 63.10%, 63.39%, 63.69%, 63.98%, 64.28%, 64.58%, 64.87%, 65.17%, 65.46%, 65.76%, 66.05%, 66.20%, 100.0% {
+        transform: translate(55px, -103px) skewY(22deg) rotate(0deg); }
+      14.10%, 14.39%, 14.69%, 14.98%, 15.28%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 23.91%, 24.21%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 29.67%, 47.97%, 48.27%, 48.63%, 48.93%, 50.85%, 51.14%, 54.61%, 54.91%, 62.66%, 62.95%, 63.25%, 63.54%, 63.84%, 64.13%, 64.43%, 64.72%, 65.02%, 65.31%, 65.61%, 65.90% {
+        transform: translate(55px, -103px) skewY(22deg) rotate(-40deg); }
+      14.17%, 14.46%, 14.76%, 15.06%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 23.99%, 24.28%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 29.74%, 48.04%, 48.34%, 48.71%, 50.92%, 54.69%, 54.98%, 62.73%, 63.03%, 63.32%, 63.62%, 63.91%, 64.21%, 64.50%, 64.80%, 65.09%, 65.39%, 65.68%, 65.98% {
+        transform: translate(55px, -103px) skewY(22deg) rotate(-20deg); }
+      14.32%, 14.61%, 14.91%, 15.20%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 23.84%, 24.13%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 29.89%, 48.19%, 48.86%, 51.07%, 54.83%, 55.13%, 62.88%, 63.17%, 63.47%, 63.76%, 64.06%, 64.35%, 64.65%, 64.94%, 65.24%, 65.53%, 65.83%, 66.12% {
+        transform: translate(55px, -103px) skewY(22deg) rotate(20deg); }
+    }
+    @keyframes girl2KneeR {
+      00.00%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 14.91%, 15.06%, 15.20%, 15.35%, 21.18%, 21.33%, 21.48%, 21.62%, 21.77%, 21.92%, 22.07%, 22.21%, 22.36%, 22.51%, 22.66%, 22.80%, 22.95%, 23.10%, 23.25%, 23.39%, 23.54%, 23.69%, 23.84%, 23.99%, 24.13%, 24.28%, 27.53%, 27.68%, 27.82%, 27.97%, 28.12%, 28.27%, 28.41%, 28.56%, 28.71%, 28.86%, 29.00%, 29.15%, 29.30%, 29.45%, 29.59%, 29.74%, 47.90%, 48.04%, 48.19%, 48.34%, 48.56%, 48.71%, 48.86%, 49.00%, 50.77%, 50.92%, 51.07%, 51.22%, 54.54%, 54.69%, 54.83%, 54.98%, 62.58%, 62.73%, 62.88%, 63.03%, 63.17%, 63.32%, 63.47%, 63.62%, 63.76%, 63.91%, 64.06%, 64.21%, 64.35%, 64.50%, 64.65%, 64.80%, 64.94%, 65.09%, 65.24%, 65.39%, 65.53%, 65.68%, 65.83%, 65.98%, 100.0% {
+        transform: translateY(52px) rotate(0deg); }
+      14.10%, 14.39%, 14.69%, 14.98%, 15.28%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 23.91%, 24.21%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 29.67%, 47.97%, 48.27%, 48.63%, 48.93%, 50.85%, 51.14%, 54.61%, 54.91%, 62.66%, 62.95%, 63.25%, 63.54%, 63.84%, 64.13%, 64.43%, 64.72%, 65.02%, 65.31%, 65.61%, 65.90% {
+        transform: translateY(52px) rotate(60deg); }
+    }
+
+  @keyframes girl3 {
+    00.00%, 15.94%, 18.61%, 33.06%, 33.52%, 38.67%, 44.88%, 51.14%, 51.96%, 70.18%, 70.27%, 73.43%, 90.93%, 91.73%, 94.18%, 94.76%, 95.58%, 100.0% {
+      opacity: 0; }
+    15.95%, 18.60%, 33.07%, 33.51%, 38.68%, 44.87%, 51.15%, 51.96%, 70.19%, 70.26%, 73.44%, 90.92%, 91.74%, 94.17%, 94.77%, 95.57% {
+      opacity: 1; }
+
+    00.00%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 18.23%, 18.38%, 18.52%, 18.67%, 33.06%, 33.21%, 33.36%, 33.51%, 38.67%, 38.82%, 38.97%, 39.11%, 39.26%, 39.41%, 44.50%, 44.65%, 44.80%, 44.94%, 51.07%, 51.22%, 51.36%, 51.51%, 51.66%, 51.81%, 51.96%, 95.28%, 95.42%, 95.57%, 95.64%, 100.0% {
+      transform: rotateX(-90deg) scale(0.06); }
+    15.94%, 16.09%, 16.24%, 16.38%, 16.53%, 16.68%, 16.83%, 16.97%, 17.12%, 17.27%, 17.42%, 17.56%, 17.71%, 17.86%, 18.01%, 18.15%, 18.30%, 18.45%, 18.60%, 33.14%, 33.28%, 33.43%, 38.75%, 38.89%, 39.04%, 39.19%, 39.34%, 44.58%, 44.72%, 44.87%, 51.14%, 51.29%, 51.44%, 51.59%, 51.73%, 51.88%, 95.35%, 95.50% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.06); }
+  }
+    @keyframes girl3LegL {
+      00.00%, 15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 18.30%, 18.60%, 33.14%, 33.43%, 38.75%, 39.04%, 39.34%, 39.48%, 44.58%, 44.87%, 51.14%, 51.44%, 51.73%, 52.03%, 95.35%, 95.64%, 100.0% {
+        transform: translate(1px, -150px) rotate(-6deg); }
+      16.01%, 16.31%, 16.61%, 16.90%, 17.20%, 17.49%, 17.79%, 18.08%, 18.38%, 33.21%, 38.82%, 39.11%, 39.41%, 44.65%, 51.22%, 51.51%, 51.81%, 95.42% {
+        transform: translate(1px, -150px) rotate(-20deg); }
+      16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 18.15%, 18.45%, 33.28%, 38.89%, 39.19%, 44.72%, 51.29%, 51.59%, 51.88%, 95.50% {
+        transform: translate(1px, -150px) rotate(40deg); }
+      16.16%, 16.46%, 16.75%, 17.05%, 17.34%, 17.64%, 17.93%, 18.23%, 18.52%, 33.36%, 38.97%, 39.26%, 44.80%, 51.36%, 51.66%, 51.96%, 95.57% {
+        transform: translate(1px, -150px) rotate(20deg); }
+    }
+    @keyframes girl3KneeL {
+      00.00%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 18.23%, 18.38%, 18.52%, 33.21%, 33.36%, 38.82%, 38.97%, 39.11%, 39.26%, 44.65%, 44.80%, 51.22%, 51.36%, 51.51%, 51.66%, 51.81%, 51.96%, 95.42%, 95.57%, 100.0% {
+        transform: translate(-18px, 52px) rotate(0deg); }
+      16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 18.15%, 18.45%, 33.28%, 38.89%, 39.19%, 44.72%, 51.29%, 51.59%, 51.88%, 95.50% {
+        transform: translate(-18px, 52px) rotate(-60deg); }
+    }
+    @keyframes girl3LegR {
+      00.00%, 15.87%, 16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 18.15%, 18.45%, 18.67%, 33.06%, 33.28%, 33.51%, 38.67%, 38.89%, 39.19%, 39.48%, 44.50%, 44.72%, 44.94%, 51.07%, 51.29%, 51.59%, 51.88%, 52.03%, 95.28%, 95.50%, 95.64%, 100.0% {
+        transform: translate(57px, -105px) rotate(-6deg); }
+      15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 18.30%, 18.60%, 33.14%, 33.43%, 38.75%, 39.04%, 39.34%, 44.58%, 44.87%, 51.14%, 51.44%, 51.73%, 95.35% {
+        transform: translate(57px, -105px) rotate(40deg); }
+      16.01%, 16.31%, 16.61%, 16.90%, 17.20%, 17.49%, 17.79%, 18.08%, 18.38%, 33.21%, 38.82%, 39.11%, 39.41%, 44.65%, 51.22%, 51.51%, 51.81%, 95.42% {
+        transform: translate(57px, -105px) rotate(20deg); }
+      16.16%, 16.46%, 16.75%, 17.05%, 17.34%, 17.64%, 17.93%, 18.23%, 18.52%, 33.36%, 38.97%, 39.26%, 44.80%, 51.36%, 51.66%, 51.96%, 95.57% {
+        transform: translate(57px, -105px) rotate(-20deg); }
+    }
+    @keyframes girl3KneeR {
+      00.00%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 18.23%, 18.38%, 18.52%, 18.67%, 33.06%, 33.21%, 33.36%, 33.51%, 38.67%, 38.82%, 38.97%, 39.11%, 39.26%, 39.41%, 44.50%, 44.65%, 44.80%, 44.94%, 51.07%, 51.22%, 51.36%, 51.51%, 51.66%, 51.81%, 95.28%, 95.42%, 100.0% {
+        transform: translate(-18px, 52px) rotate(0deg); }
+      15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 18.30%, 18.60%, 33.14%, 33.43%, 38.75%, 39.04%, 39.34%, 44.58%, 44.87%, 51.14%, 51.44%, 51.73%, 95.35% {
+        transform: translate(-18px, 52px) rotate(-60deg); }
+    }
+  
+  @keyframes girl4 {
+    00.00%, 49.22%, 49.68%, 51.96%, 54.62%, 59.48%, 62.67%, 66.20%, 68.87%, 70.26%, 73.44%, 94.17%, 94.77%, 100.0% {
+      opacity: 0; }
+    49.23%, 49.67%, 51.97%, 54.61%, 59.49%, 62.66%, 66.21%, 68.86%, 70.27%, 73.43%, 94.18%, 94.76% {
+      opacity: 1; }
+
+    00.00%, 49.22%, 49.37%, 49.52%, 49.67%, 53.80%, 53.95%, 54.10%, 54.24%, 54.39%, 54.54%, 54.69%, 59.93%, 60.07%, 60.22%, 60.37%, 60.52%, 60.66%, 60.81%, 60.96%, 61.11%, 61.25%, 61.40%, 61.55%, 61.70%, 61.84%, 61.99%, 62.14%, 62.29%, 62.43%, 62.58%, 62.73%, 66.12%, 66.27%, 66.42%, 66.57%, 66.72%, 66.86%, 67.01%, 67.16%, 67.31%, 67.45%, 67.60%, 67.75%, 67.90%, 68.04%, 68.19%, 68.34%, 68.49%, 68.63%, 68.78%, 70.18%, 70.33%, 70.48%, 70.63%, 70.77%, 70.92%, 71.07%, 71.22%, 71.36%, 71.51%, 71.66%, 71.81%, 71.96%, 72.10%, 72.25%, 72.40%, 72.55%, 72.69%, 72.84%, 72.99%, 73.14%, 73.28%, 73.43%, 94.17%, 94.32%, 94.46%, 94.61%, 94.76%, 100.0% {
+      transform: rotateX(-90deg) scale(0.06); }
+    49.30%, 49.45%, 49.59%, 53.87%, 54.02%, 54.17%, 54.32%, 54.46%, 54.61%, 60.00%, 60.15%, 60.29%, 60.44%, 60.59%, 60.74%, 60.89%, 61.03%, 61.18%, 61.33%, 61.48%, 61.62%, 61.77%, 61.92%, 62.07%, 62.21%, 62.36%, 62.51%, 62.66%, 66.20%, 66.35%, 66.49%, 66.64%, 66.79%, 66.94%, 67.08%, 67.23%, 67.38%, 67.53%, 67.67%, 67.82%, 67.97%, 68.12%, 68.27%, 68.41%, 68.56%, 68.71%, 70.26%, 70.41%, 70.55%, 70.70%, 70.85%, 71.00%, 71.14%, 71.29%, 71.44%, 71.59%, 71.73%, 71.88%, 72.03%, 72.18%, 72.32%, 72.47%, 72.62%, 72.77%, 72.91%, 73.06%, 73.21%, 73.36%, 94.24%, 94.39%, 94.54%, 94.69% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.06); }
+  }
+    @keyframes girl4LegL {
+      00.00%, 49.30%, 49.59%, 53.87%, 54.17%, 54.46%, 54.69%, 60.00%, 60.29%, 60.59%, 60.89%, 61.18%, 61.48%, 61.77%, 62.07%, 62.36%, 62.66%, 66.20%, 66.49%, 66.79%, 67.08%, 67.38%, 67.67%, 67.97%, 68.27%, 68.56%, 68.86%, 70.26%, 70.55%, 70.85%, 71.14%, 71.44%, 71.73%, 72.03%, 72.32%, 72.62%, 72.91%, 73.21%, 73.43%, 94.24%, 94.54%, 94.76%, 100.0% {
+        transform: translate(1px, -131px) skewY(52deg); }
+      49.37%, 53.95%, 54.24%, 54.54%, 60.07%, 60.37%, 60.66%, 60.96%, 61.25%, 61.55%, 61.84%, 62.14%, 62.43%, 66.27%, 66.57%, 66.86%, 67.16%, 67.45%, 67.75%, 68.04%, 68.34%, 68.63%, 70.33%, 70.63%, 70.92%, 71.22%, 71.51%, 71.81%, 72.10%, 72.40%, 72.69%, 72.99%, 73.28%, 94.32%, 94.61% {
+        transform: translate(1px, -131px) skewY(52deg) rotate(10deg); }
+      49.45%, 54.02%, 54.32%, 54.61%, 60.15%, 60.44%, 60.74%, 61.03%, 61.33%, 61.62%, 61.92%, 62.21%, 62.51%, 66.35%, 66.64%, 66.94%, 67.23%, 67.53%, 67.82%, 68.12%, 68.41%, 68.71%, 70.41%, 70.70%, 71.00%, 71.29%, 71.59%, 71.88%, 72.18%, 72.47%, 72.77%, 73.06%, 73.36%, 94.39%, 94.69% {
+        transform: translate(1px, -131px) skewY(52deg) rotate(-30deg); }
+      49.52%, 54.10%, 54.39%, 60.22%, 60.52%, 60.81%, 61.11%, 61.40%, 61.70%, 61.99%, 62.29%, 62.58%, 66.42%, 66.72%, 67.01%, 67.31%, 67.60%, 67.90%, 68.19%, 68.49%, 68.78%, 70.48%, 70.77%, 71.07%, 71.36%, 71.66%, 71.96%, 72.25%, 72.55%, 72.84%, 73.14%, 94.46% {
+        transform: translate(1px, -131px) skewY(52deg) rotate(-20deg); }
+    }
+    @keyframes girl4KneeL {
+      00.00%, 49.37%, 49.52%, 53.95%, 54.10%, 54.24%, 54.39%, 54.54%, 54.69%, 60.07%, 60.22%, 60.37%, 60.52%, 60.66%, 60.81%, 60.96%, 61.11%, 61.25%, 61.40%, 61.55%, 61.70%, 61.84%, 61.99%, 62.14%, 62.29%, 62.43%, 62.58%, 66.27%, 66.42%, 66.57%, 66.72%, 66.86%, 67.01%, 67.16%, 67.31%, 67.45%, 67.60%, 67.75%, 67.90%, 68.04%, 68.19%, 68.34%, 68.49%, 68.63%, 68.78%, 70.33%, 70.48%, 70.63%, 70.77%, 70.92%, 71.07%, 71.22%, 71.36%, 71.51%, 71.66%, 71.81%, 71.96%, 72.10%, 72.25%, 72.40%, 72.55%, 72.69%, 72.84%, 72.99%, 73.14%, 73.28%, 73.43%, 94.32%, 94.46%, 94.61%, 94.76%, 100.0% {
+        transform: translateY(52px) rotate(0deg); }
+      49.45%, 54.02%, 54.32%, 54.61%, 60.15%, 60.44%, 60.74%, 61.03%, 61.33%, 61.62%, 61.92%, 62.21%, 62.51%, 66.35%, 66.64%, 66.94%, 67.23%, 67.53%, 67.82%, 68.12%, 68.41%, 68.71%, 70.41%, 70.70%, 71.00%, 71.29%, 71.59%, 71.88%, 72.18%, 72.47%, 72.77%, 73.06%, 73.36%, 94.39%, 94.69% {
+        transform: translateY(52px) rotate(40deg); }
+    }
+    @keyframes girl4LegR {
+      00.00%, 49.22%, 49.45%, 49.67%, 53.80%, 54.02%, 54.32%, 54.61%, 59.93%, 60.15%, 60.44%, 60.74%, 61.03%, 61.33%, 61.62%, 61.92%, 62.21%, 62.51%, 62.73%, 66.12%, 66.35%, 66.64%, 66.94%, 67.23%, 67.53%, 67.82%, 68.12%, 68.41%, 68.71%, 68.86%, 70.18%, 70.41%, 70.70%, 71.00%, 71.29%, 71.59%, 71.88%, 72.18%, 72.47%, 72.77%, 73.06%, 73.36%, 94.17%, 94.39%, 94.69%, 100.0% {
+        transform: translate(57px, -115px) skewY(52deg); }
+      49.30%, 49.59%, 53.87%, 54.17%, 54.46%, 60.00%, 60.29%, 60.59%, 60.89%, 61.18%, 61.48%, 61.77%, 62.07%, 62.36%, 62.66%, 66.20%, 66.49%, 66.79%, 67.08%, 67.38%, 67.67%, 67.97%, 68.27%, 68.56%, 70.26%, 70.55%, 70.85%, 71.14%, 71.44%, 71.73%, 72.03%, 72.32%, 72.62%, 72.91%, 73.21%, 94.24%, 94.54% {
+        transform: translate(57px, -115px) skewY(52deg) rotate(-30deg); }
+      49.37%, 53.95%, 54.24%, 54.54%, 60.07%, 60.37%, 60.66%, 60.96%, 61.25%, 61.55%, 61.84%, 62.14%, 62.43%, 66.27%, 66.57%, 66.86%, 67.16%, 67.45%, 67.75%, 68.04%, 68.34%, 68.63%, 70.33%, 70.63%, 70.92%, 71.22%, 71.51%, 71.81%, 72.10%, 72.40%, 72.69%, 72.99%, 73.28%, 94.32%, 94.61% {
+        transform: translate(57px, -115px) skewY(52deg) rotate(-10deg); }
+      49.52%, 54.10%, 54.39%, 60.22%, 60.52%, 60.81%, 61.11%, 61.40%, 61.70%, 61.99%, 62.29%, 62.58%, 66.42%, 66.72%, 67.01%, 67.31%, 67.60%, 67.90%, 68.19%, 68.49%, 68.78%, 70.48%, 70.77%, 71.07%, 71.36%, 71.66%, 71.96%, 72.25%, 72.55%, 72.84%, 73.14%, 94.46% {
+        transform: translate(57px, -115px) skewY(52deg) rotate(20deg); }
+    }
+    @keyframes girl4KneeR {
+      00.00%, 49.22%, 49.37%, 49.52%, 49.67%, 53.80%, 53.95%, 54.10%, 54.24%, 54.39%, 54.54%, 59.93%, 60.07%, 60.22%, 60.37%, 60.52%, 60.66%, 60.81%, 60.96%, 61.11%, 61.25%, 61.40%, 61.55%, 61.70%, 61.84%, 61.99%, 62.14%, 62.29%, 62.43%, 62.58%, 62.73%, 66.12%, 66.27%, 66.42%, 66.57%, 66.72%, 66.86%, 67.01%, 67.16%, 67.31%, 67.45%, 67.60%, 67.75%, 67.90%, 68.04%, 68.19%, 68.34%, 68.49%, 68.63%, 70.18%, 70.33%, 70.48%, 70.63%, 70.77%, 70.92%, 71.07%, 71.22%, 71.36%, 71.51%, 71.66%, 71.81%, 71.96%, 72.10%, 72.25%, 72.40%, 72.55%, 72.69%, 72.84%, 72.99%, 73.14%, 73.28%, 94.17%, 94.32%, 94.46%, 94.61%, 100.0% {
+        transform: translateY(52px) rotate(0deg); }
+      49.30%, 49.59%, 53.87%, 54.17%, 54.46%, 60.00%, 60.29%, 60.59%, 60.89%, 61.18%, 61.48%, 61.77%, 62.07%, 62.36%, 62.66%, 66.20%, 66.49%, 66.79%, 67.08%, 67.38%, 67.67%, 67.97%, 68.27%, 68.56%, 70.26%, 70.55%, 70.85%, 71.14%, 71.44%, 71.73%, 72.03%, 72.32%, 72.62%, 72.91%, 73.21%, 94.24%, 94.54% {
+        transform: translateY(52px) rotate(40deg); }
+    }
\ No newline at end of file
diff --git a/pure-css-monument-valley-ii-not-for-safari/license.txt b/pure-css-monument-valley-ii-not-for-safari/license.txt
new file mode 100644
index 0000000..f2bfe15
--- /dev/null
+++ b/pure-css-monument-valley-ii-not-for-safari/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Julia Miocene (https://codepen.io/miocene/pen/NWRWQpX)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/pure-css-monument-valley-ii-not-for-safari/src/index.html b/pure-css-monument-valley-ii-not-for-safari/src/index.html
new file mode 100644
index 0000000..83d6215
--- /dev/null
+++ b/pure-css-monument-valley-ii-not-for-safari/src/index.html
@@ -0,0 +1,444 @@
+<head>
+	<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@200;500&display=swap&text=THEOASIinwhchYUNGWDR" rel="stylesheet">
+</head>
+<body>
+	<div class="frame">
+		<div class="scene">
+			<div class="building-1">
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div>
+					<div></div>
+				</div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div class="mooving-part-1">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="mooving-part-2">
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="rocks">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="Ro">
+					<div class="Ro_1">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro_2">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro_3">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro_4">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+				</div>
+				<div class="Girl">
+					<div class="Girl_1">
+						<div class="Girl__legl"></div>
+						<div class="Girl__legr"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl_2">
+						<div class="Girl__legl"></div>
+						<div class="Girl__legr"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl_3">
+						<div class="Girl__legl"></div>
+						<div class="Girl__legr"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl_4">
+						<div class="Girl__legr"></div>
+						<div class="Girl__legl"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+				</div>
+			</div>
+			<div class="building-2">
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div class="mooving-part-1">
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="mooving-part-2"></div>
+				<div class="mooving-part-3">
+					<div></div>
+				</div>
+				<div class="mooving-part-4">
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="mooving-part-5">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div class="cloud1"></div>
+					<div class="cloud2"></div>
+					<div class="cloud3"></div>
+					<div class="cloud4"></div>
+				</div>
+				<div class="mooving-part-6">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div class="cloud1"></div>
+					<div class="cloud2"></div>
+					<div class="cloud3"></div>
+					<div class="cloud4"></div>
+				</div>
+				<div class="mooving-bridge">
+					<div class="mooving-bridge-cloud">
+						<div></div>
+					</div>
+					<div class="mooving-bridge-part1">
+						<div></div>
+					</div>
+					<div class="mooving-bridge-part2">
+						<div></div>
+					</div>
+					<div class="mooving-bridge-part3">
+						<div></div>
+						<div></div>
+					</div>
+					<div class="mooving-bridge-part4">
+						<div></div>
+						<div></div>
+					</div>
+					<div class="mooving-bridge-part5">
+						<div></div>
+						<div></div>
+					</div>
+					<div class="mooving-bridge-part6">
+						<div></div>
+						<div></div>
+						<div></div>
+					</div>
+				</div>
+				<div class="rocks">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="Ro">
+					<div class="Ro__armr"></div>
+					<div class="Ro_1">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro_2">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro_3">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro_4">
+						<div class="Ro__legl"></div>
+						<div class="Ro__legr"></div>
+						<div class="Ro__dress"><div></div></div>
+						<div class="Ro__head"></div>
+					</div>
+					<div class="Ro__arml"></div>
+				</div>
+				<div class="Girl">
+					<div class="Girl_1">
+						<div class="Girl__legl"></div>
+						<div class="Girl__legr"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl_2">
+						<div class="Girl__legl"></div>
+						<div class="Girl__legr"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl_3">
+						<div class="Girl__legl"></div>
+						<div class="Girl__legr"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl_4">
+						<div class="Girl__legr"></div>
+						<div class="Girl__legl"></div>
+						<div class="Girl__dress"></div>
+						<div class="Girl__head"></div>
+					</div>
+					<div class="Girl__arml"></div>
+				</div>
+
+				<div class="building-3">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+					<div class="mooving-part-1">
+						<div>
+							<div></div>
+							<div></div>
+							<div></div>
+						</div>
+					</div>
+					<div class="mooving-part-2">
+						<div></div>
+						<div></div>
+						<div></div>
+					</div>
+					<div class="mooving-part-3">
+						<div></div>
+						<div></div>
+					</div>
+					<div class="mooving-part-4"></div>
+				</div>
+			</div>
+		</div>
+		<div class="cover">
+			<h1>The Oasis</h1>
+			<h3>in which</h3>
+			<h2>Young Eyes See New Wonders</h2>
+			<div class="cover__button"></div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/pure-css-monument-valley-ii-not-for-safari/src/style.css b/pure-css-monument-valley-ii-not-for-safari/src/style.css
new file mode 100644
index 0000000..be09643
--- /dev/null
+++ b/pure-css-monument-valley-ii-not-for-safari/src/style.css
@@ -0,0 +1,7421 @@
+@use postcss-nested;
+html, body {
+	height: 100vh; width: 100vw;
+	min-height: 60vw;
+	padding: 0; margin: 0;
+	background: black;
+	--animation: 90s infinite;
+}
+
+body::after {
+	content: '';
+	position: absolute;
+	display: block;
+	top: 0; left: 50%;
+	width: 454px; height: 798px;
+	transform: translateX(-50%);
+
+	animation: frame var(--animation) ease;
+}
+
+.frame {
+	position: relative;
+	width: 454px; height: 798px;
+	margin: auto;
+	background: #3D2E36;
+	overflow: hidden;
+}
+
+.scene {
+	position: relative;
+	font-size: 4px;
+	perspective: 100000px;
+	animation: scene var(--animation) linear;
+
+	& *, & *:before, & *:after {
+		content: '';
+		position: absolute;
+		transform-style: preserve-3d;
+		transform-origin: 0 0 0;
+	}
+}
+
+.cover {
+	position: absolute;
+	width: 100%; height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	mix-blend-mode: hard-light;
+	font-family: "Prompt", sans-serif;
+	color: white;
+	z-index: 999;
+	
+	animation: cover var(--animation) ease;
+
+	&::before {
+		content: "│││";
+    width: 296px; height: 48px;
+    border-bottom: 2px solid white;
+    font-size: 22px;
+    text-align: center;
+    letter-spacing: -15px;
+		line-height: 16px;
+	}
+
+	h1 {
+    margin: 40px 0 26px;
+		font-size: 58px;
+    font-weight: 500;
+    text-transform: uppercase;
+    line-height: 67px;
+	}
+	h2 {
+    width: 296px;
+    margin: 36px 0 84px;
+    font-weight: 200;
+    font-size: 21px;
+		text-transform: uppercase;
+    text-align: center;
+    line-height: 24px;
+    letter-spacing: -1px;
+	}
+	h3 {
+    width: 296px;
+		margin: 0;
+    font-weight: 200;
+    font-size: 15px;
+		line-height: 6px;
+    text-align: center;
+    background: linear-gradient(0deg, white, white) 0px 2px / 105px 2px no-repeat, linear-gradient(0deg, white, white) 191px 2px / 105px 2px no-repeat;
+	}
+	.cover__button {
+		position: relative;
+    width: 42px; height: 42px;
+    border-radius: 99em;
+		box-shadow: inset 0 0 0 4px white;
+		transform-origin: center center;
+
+		animation: coverButton var(--animation) ease;
+
+		&::before {
+			content: '';
+			position: absolute;
+			top: -4px; left: -4px;
+			width: 50px; height: 50px;
+			border-radius: 99em;
+			box-shadow: 0 0 0 2px white;
+		}
+		&::after {
+			content: '';
+			position: absolute;
+			top: -4px; left: -4px;
+			width: 50px; height: 50px;
+			border-radius: 999em;
+			box-shadow: 0 0 0 1px white;
+			transform-origin: center center;
+
+			animation: coverButtonShadow var(--animation) ease;
+		}
+	}
+}
+
+.building-1 {
+	width: 15em; height: 15em;
+	background: var(--top-default-light);
+	transform: translate(25em, 176em) rotateX(55deg) rotateZ(-45deg);
+	transform-style: preserve-3d;
+	
+	--left-default-light: #FF676A;
+	--left-default-dark: #E34848;
+	--left-accent-light: #FFD4A3;
+	--left-accent-dark: #EDB88C;
+	
+	--top-default-light: #FF8D7F;
+	--top-default-dark: #F36E5A;
+	--top-accent-light: #FFF8F5;
+	--top-accent-dark: #FCD3D7;
+	
+	--right-default-light: #904872;
+	--right-default-dark: #6F305B;
+	--right-accent-light: #E6A79C;
+	--right-accent-dark: #C88884;
+	
+	--left-window-inner: #461336;
+	--left-window-v: #66274C;
+	--right-window-v: #973B5D;
+	--right-window-inner: #742849;
+	--left-window-h: #9B3C4D;
+	--right-window-h: #A14C6D;
+
+	&::before {
+		width: 100%; height: 39em;
+		background: var(--right-default-light);
+		transform: translateY(15em) rotateX(-90deg);
+	}
+	& > div:nth-child(1) {
+    height: 8em; width: 1em;
+    background: var(--top-default-light);
+		transform: translateY(-8em) translateZ(8em);
+		
+		&::before {
+			width: 62em; height: 23em;
+    	background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 1.5em/2em 3.5em repeat-y, var(--left-default-light);
+			clip-path: polygon(0em 0em, 62em 0em, 62em 23em, 23em 23em, 23em 8em, 15em 8em, 15em 0em, 7em 0em, 7em 8em, 0em 8em);
+			transform: rotateY(90deg) translateX(-15em);
+		}
+		&::after {
+			width: 8em; height: 8em;
+			background: var(--left-default-light);
+			transform: translateX(1em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(2) {
+    height: 62em; width: 15em;
+    background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 2em/3em 2em repeat-x, var(--right-default-light);
+    transform: translate(15em, -39em) translateZ(-47em) rotateX(-90deg);
+    transform-origin: bottom left;
+		
+		&::before {
+			height: 23em; width: 15em;
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 0.75em 2em/3em 2em repeat-x, var(--right-default-light);
+			clip-path: polygon(0em 0em, 15em 0em, 15em 23em, 0em 23em, 0em 15em, 1em 15em, 1em 7em, 0em 7em);
+			transform: translate(-15em, -8em) translateZ(-23em);
+		}
+		&::after {
+			height: 70em; width: 23em;
+			background: linear-gradient(var(--left-default-dark), var(--left-default-dark)) 1.5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 8.5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 12em 10em/1.5em 2em no-repeat, var(--left-default-light);
+			clip-path: polygon(0em 8em, 0em 70em, 23em 70em, 23em 0em, 22em 0em, 22em 1em, 21em 1em, 21em 2em, 20em 2em, 20em 3em, 19em 3em, 19em 4em, 18em 4em, 18em 5em, 17em 5em, 17em 6em, 16em 6em, 16em 7em, 15em 7em, 15em 8em);
+			transform: translateY(-8em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(3) {
+		height: 8em; width: 95em;
+    background: linear-gradient(var(--top-default-dark), var(--top-default-dark)) 0em 1em/95em 0.3em no-repeat, linear-gradient(var(--top-default-dark), var(--top-default-dark)) 0em 7em/95em 0.3em no-repeat, var(--top-default-light);
+		transform: translateY(-8em) translateZ(23em);
+
+		&::before {
+			height: 15em; width: 15em;
+			background: var(--top-default-light);
+			clip-path: polygon(0em 0em, 8em 0em, 8em 4em, 9.2em 5.9em, 11.3em 7em, 15em 7em, 15em 15em, 0em 15em);
+			transform: translate(15em, 16em) translateZ(-8em);
+		}
+		&::after {
+			height: 30em; width: 72em;
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 2em/3em 2em repeat-x, var(--right-default-light);
+			clip-path: polygon(0em 0em, 72em 0em, 72em 28em, 46em 28em, 46em 18em, 45em 15em, 44em 13em, 43em 11.7em, 42em 10.6em, 41em 9.8em, 40em 9.1em, 39em 8.6em, 37em 8em, 35em 8em, 31em 8.3em, 30em 8.5em, 29em 8.9em, 27em 10.1em, 26em 11.1em, 25em 12.3em, 24em 13.7em, 23.4em 15.5em, 23em 30em, 0em 30em);
+			transform: translate(23em, 8em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(4) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translateX(15em) translateZ(23em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(5) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+		transform: translate(15em, 3em) translateZ(20em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(6) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(15em, 6em) translateZ(17em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: rotateX(90deg);
+		}
+	}
+	& > div:nth-child(7) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(15em, 1em) translateZ(22em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(8) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(15em, 4em) translateZ(19em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-4em) translateZ(-4em);
+		}
+	}
+	& > div:nth-child(9) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+		transform: translate(15em, 7em) translateZ(16em) rotateX(90deg);
+
+		&::before {
+			width: 6em; height: 3em;
+			background: var(--right-default-light);
+			transform: translate(-14em, 7em) translateZ(8em);
+		}
+		&::after {
+			width: 6em; height: 3em;
+			background: var(--left-default-light);
+			transform: translate(-14em, 7em) translateZ(8em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(10) {
+		width: 6em; height: 6em;
+    background: var(--top-default-light);
+    transform: translate(1em, -7em) translateZ(26em);
+
+		&::before {
+			width: 22.9em; height: 24em;
+			background: var(--top-default-light);
+			clip-path: polygon(0em 0em, 23em 0em, 23em 16.3em, 12em 16.3em, 12em 16.3em, 12em 16.3em, 13em 15.6em, 14em 15em, 15em 13em, 15em 11em, 14em 9.3em, 13em 8.6em, 12em 7.8em, 0em 7.8em);
+			transform: translate(67.9em, 7.3em) translateZ(-25.9em);
+
+		}
+		&::after {
+			width: 1em; height: 7.7em;
+			background: var(--top-default-light);
+			transform: translate(82em, 15.4em) translateZ(-35em);
+		}
+	}
+	& > div:nth-child(11) {
+		width: 1em; height: 7.7em;
+    background: var(--top-default-light);
+    transform: translate(82em, 8.4em) translateZ(-10em);
+
+		&::before {
+			width: 1em; height: 7.7em;
+			background: var(--top-default-light);
+			transform: translateX(-1em) translateZ(-1em);
+		}
+		&::after {
+			width: 1em; height: 7.7em;
+			background: var(--top-default-light);
+			transform: translateX(-2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(12) {
+		width: 1em; height: 7.7em;
+    background: var(--top-default-light);
+    transform: translate(79em, 8.4em) translateZ(-13em);
+
+		&::before {
+			width: 1em; height: 7.7em;
+			background: var(--top-default-light);
+			transform: translateX(-1em) translateZ(-1em);
+		}
+		&::after {
+			width: 1em; height: 7.7em;
+			background: var(--top-default-light);
+			transform: translateX(-2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(13) {
+		width: 1em; height: 7.7em;
+    background: var(--left-default-light);
+    transform: translate(82em, 8.3em) translateZ(-10.0em) rotateY(90deg);
+
+		&::before {
+			width: 1em; height: 7.7em;
+			background: var(--left-default-light);
+			transform: translateX(-1em) translateZ(1em);
+		}
+		&::after {
+			width: 1em; height: 7.7em;
+			background: var(--left-default-light);
+			transform: translateX(-2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(14) {
+		width: 1em; height: 7.7em;
+    background: var(--left-default-light);
+    transform: translate(81em, 8.3em) translateZ(-12em) rotateY(-90deg);
+
+		&::before {
+			width: 1em; height: 7.7em;
+			background: var(--left-default-light);
+			transform: translateX(-1em) translateZ(1em);
+		}
+		&::after {
+			width: 1em; height: 7.7em;
+			background: var(--left-default-light);
+			transform: translateX(-2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(15) {
+		width: 1em; height: 7.7em;
+    background: var(--left-default-light);
+    transform: translate(78em, 8.3em) translateZ(-15em) rotateY(-90deg);
+
+		&::before {
+			width: 1em; height: 8em;
+			background: var(--left-default-light);
+			transform: translateX(-1em) translateZ(1em);
+		}
+		&::after {
+			width: 80em; height: 56em;
+			background: var(--left-default-light);
+			clip-path: polygon(0em 0em, 80em 0em, 80em 8em, 75em 8em, 67em 8.2em, 67em 16.1em, 51em 16.1em, 51em 24.1em, 50em 24.1em, 50em 25.1em, 49em 25.1em, 49em 26.1em, 48em 26.1em, 48em 27.1em, 47em 27.1em, 47em 28.1em, 46em 28.1em, 46em 29.1em, 45em 29.1em, 45em 30.1em, 44em 30.1em, 44em 31.1em, 43em 31.1em, 43em 32.1em, 42em 32.1em, 42em 33em, 41em 33em, 41em 34em, 40em 34em, 40em 35em, 39em 35em, 39em 36em, 38em 36em, 38em 37em, 37em 37em, 37em 38em, 36em 38em, 36em 39em, 35em 39em, 35em 55.1em, 0em 55.1em);
+			transform: translate(-52em, -16.4em) translateZ(9em);
+		}
+	}
+	& > div:nth-child(16) {
+		width: 8em; height: 8em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 5px var(--top-default-light), inset 0 0 0 7px var(--top-default-dark);
+    transform: translate(69em, 8em) translateZ(-16em);
+
+		&::before {
+			width: 16em; height: 7.7em;
+			background: var(--top-default-light);
+			transform: translateX(14.4em) translateY(1em) translateZ(8.5em);
+		}
+		&::after {
+			width: 22em; height: 19.5em;
+			background: linear-gradient(90deg, var(--right-default-light) 50%, var(--left-default-light));
+			transform: translateY(0em) translateZ(-3.5em) rotateX(90deg);
+		}
+	}
+	& > div:nth-child(17) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(69em, 16em) translateZ(-17em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(18) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(69em, 19em) translateZ(-20em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(19) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(69em, 22em) translateZ(-23em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(20) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(69em, 25em) translateZ(-26em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(21) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(69em, 28em) translateZ(-29em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(22) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(69em, 16em) translateZ(-17em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(23) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(69em, 19em) translateZ(-20em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(24) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(69em, 22em) translateZ(-23em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(25) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(69em, 25em) translateZ(-26em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(26) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(69em, 28em) translateZ(-29em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(27) {
+		width: 8em; height: 16em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 5px var(--top-default-light), inset 0 0 0 7px var(--top-default-dark);
+    transform: translate(69em, 31em) translateZ(-32em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: rotateX(90deg);
+		}
+		&::after {
+			width: 19.5em; height: 16em;
+			background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 16em 2.5em/2em 3em repeat-y, var(--left-default-light);
+			transform: translateX(8em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(28) {
+		width: 31.2em; height: 24em;
+    background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 29.4em 1.6em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 27.7em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 25.9em 1.6em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 24.2em 3em/1.7em 3em repeat-y, var(--left-default-light);
+    transform: translateX(92em) translateZ(-0.2em) rotateY(-90deg);
+
+		&::before {
+			width: 86em; height: 47em;
+			background: var(--right-default-light);
+			clip-path: polygon(0em 0em, 0em 47em, 56em 47em, 56em 46em, 57em 46em, 57em 45em, 58em 45em, 58em 44em, 59em 44em, 59em 43em, 60em 43em, 60em 42em, 61em 42em, 61em 41em, 62em 41em, 62em 40em, 63em 40em, 63em 24em, 90em 24em, 90em 0em);
+			transform: translate(-71em, 16em) translateZ(-32em) rotateX(90deg);
+		}
+		&::after {
+			width: 54.5em; height: 24em;
+			background: var(--right-default-light);
+			clip-path: polygon(0em 0em, 0em 24em, 35em 24em, 35em 16em, 54.5em 16em, 54.5em 0em);
+			transform: translate(-67em, 47em) translateZ(-1em) rotateX(90deg);
+		}
+	}
+	& > div:nth-child(29) {
+		width: 16em; height: 16em;
+    background: conic-gradient(var(--top-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--top-default-dark) 180deg, var(--top-default-dark) 270deg, transparent 270deg) 0em 0em/4em 4em repeat, var(--top-default-light);
+    transform: translate(77em, 31em) translateZ(-12.5em);
+		
+		&::before {
+			width: 12em; height: 12em;
+			background: var(--top-default-light);
+			transform: translate(2em, 2em) translateZ(4em);
+		}
+		&::after {
+			width: 4em; height: 12em;
+			background: var(--left-default-light);
+			transform: translate(2em, 2em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(30) {
+		width: 12em; height: 4em;
+    background: var(--right-default-light);
+    transform: translate(79em, 45em) translateZ(-12.5em) rotateX(90deg);
+		
+		&::before {
+			width: 26em; height: 1em;
+			background: var(--right-default-light);
+			transform: translate(12em, 35.5em) translateZ(20em);
+		}
+		&::after {
+			width: 26em; height: 1em;
+			background: var(--left-default-light);
+			transform: translate(12em, 35.5em) translateZ(46em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(31) {
+		width: 26em; height: 26em;
+    background: var(--top-default-light);
+    transform: translate(91em, -1em) translateZ(24em);
+		
+		&::before {
+			width: 24em; height: 7em;
+			background: var(--right-default-light);
+			transform: translate(1em, 25em) translateZ(0em) rotateX(90deg);
+		}
+		&::after {
+			width: 20em; height: 6em;
+			background: var(--right-default-light);
+			transform: translate(3em, 23em) translateZ(5em) rotateX(90deg);
+		}
+	}
+	& > div:nth-child(32) {
+		width: 24em; height: 24em;
+    background: var(--top-default-light);
+    transform: translateX(92em) translateZ(31em);
+		
+		&::before {
+			width: 24em; height: 24em;
+			background: var(--top-default-light);
+			transform: translateZ(3em);
+		}
+		&::after {
+			width: 20em; height: 20em;
+			background: var(--top-default-light);
+			transform: translate(2em, 2em) translateZ(4em);
+		}
+	}
+	& > div:nth-child(33) {
+		width: 4em; height: 20em;
+    background: var(--left-default-light);
+    transform: translate(94em, 2em) translateZ(31em) rotateY(-90deg);
+		
+		&::before {
+			width: 1em; height: 24em;
+			background: var(--left-default-light);
+			transform: translate(2em, -2em) translateZ(2em);
+		}
+		&::after {
+			width: 1em; height: 24em;
+			background: var(--right-default-light);
+			transform: translate(2em, 22em) translateZ(-22em) rotateX(90deg);
+		}
+	}
+	& > div:nth-child(34) {
+		width: 65em; height: 2em;
+    background: var(--left-default-dark);
+    transform: translate(3em, -5em) translateZ(9em) rotateY(-90deg);
+		
+		&::before {
+			width: 65em; height: 4em;
+			background: var(--left-default-light);
+			clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
+			transform: translate(1em, -1em) translateZ(1em);
+		}
+		&::after {
+			width: 65em; height: 4em;
+			background: var(--right-default-light);
+			clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
+			transform: translate(1em, 3em) translateZ(1em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(35) {
+		width: 2em; height: 65em;
+    background: linear-gradient(180deg, var(--right-default-dark) 96%, transparent 0%);
+    transform: translate(3em, -3em) translateZ(10em) rotateX(90deg);
+		
+		&::before {
+			width: 1em; height: 65em;
+			background: var(--right-default-light);
+			transform: translateX(-1em) translateZ(2em);
+		}
+		&::after {
+			width: 1em; height: 65em;
+			background: var(--left-default-light);
+			transform: translateX(2em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(36) {
+    width: 6em; height: 6em;
+    background: var(--top-default-light);
+		transform: translate(87em, -7em) translateZ(26em);
+		
+		&::before {
+			width: 6em; height: 3em;
+			background: var(--right-default-light);
+			transform: translateY(6em) translateZ(-3em) rotateX(90deg);
+		}
+		&::after {
+			width: 3em; height: 6em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+	}
+	& > div:nth-child(37) {
+    width: 27em; height: 2em;
+    background: var(--left-default-dark);
+		transform: translate(89em, -5em) translateZ(26em) rotateY(-90deg);
+		
+		&::before {
+			width: 27em; height: 4em;
+			background: var(--left-default-light);
+			clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
+			transform: translateY(-1em) translateZ(1em);
+		}
+		&::after {
+			width: 27em; height: 4em;
+			background: var(--right-default-light);
+			clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
+			transform: translateY(3em) translateZ(1em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(38) {
+    width: 2em; height: 27em;
+    background: var(--right-default-dark);
+    transform: translate(89em, -3em) translateZ(26em) rotateX(90deg);
+		
+		&::before {
+			width: 1em; height: 27em;
+			background: var(--right-default-light);
+			transform: translateX(-1em) translateZ(2em);
+		}
+		&::after {
+			width: 1em; height: 27em;
+			background: var(--left-default-light);
+			transform: translateX(2em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(39) {
+    width: 6em; height: 6em;
+    background: var(--top-default-light);
+		transform: translate(87em, -7em) translateZ(57em);
+		
+		&::before {
+			width: 6em; height: 3em;
+			background: var(--right-default-light);
+			transform: translateY(6em) translateZ(-3em) rotateX(90deg);
+		}
+		&::after {
+			width: 3em; height: 6em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+	}
+	& > div:nth-child(40) {
+		width: 6em; height: 40em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 3px var(--top-default-light), inset 0 0 0 5px var(--top-default-dark);
+    transform: translate(87em, -41em) translateZ(60em);
+		
+		&::before {
+			width: 6em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateY(40em) translateZ(-2em) rotateX(90deg);
+		}
+		&::after {
+			width: 2em; height: 40em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+	}
+	& > div:nth-child(41) {
+		width: 6em; height: 6em;
+    background: var(--top-default-light);
+    transform: translate(79em, -85em) translateZ(19em);
+		
+		&::before {
+			width: 6em; height: 3em;
+			background: var(--right-default-light);
+			transform: translateY(6em) translateZ(-3em) rotateX(90deg);
+		}
+		&::after {
+			width: 3em; height: 6em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+	}
+	& > div:nth-child(42) {
+		width: 53em; height: 6em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 3px var(--top-default-light), inset 0 0 0 5px var(--top-default-dark);
+    transform: translate(79em, -85em) translateZ(22em);
+		
+		&::before {
+			width: 53em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateY(6em) translateZ(-2em) rotateX(90deg);
+		}
+		&::after {
+			width: 2em; height: 6em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+	}
+	& > div:nth-child(43) {
+    transform: translateY(15em) translateZ(55em);
+		
+		&::before {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(18em, 8em) translateZ(-50em) rotateX(-90deg);
+		}
+		&::after {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(26em, 8em) translateZ(-50em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(44) {
+		width: 2em; height: 6em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+		border-right: 3px solid var(--right-window-v);
+		border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+    transform: translate(11em, 15em) translateZ(-6em) rotateX(-90deg);
+		
+		&::before {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateX(-8em);
+		}
+		&::after {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(69em, 20em) translateZ(32em);
+		}
+	}
+	& > div:nth-child(45) {
+		width: 2em; height: 7em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+		border-right: 3px solid var(--right-window-v);
+		border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+    transform: translate(88em, 47em) translateZ(-27em) rotateX(-90deg);
+		
+		&::before {
+			width: 2.5em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(30em, -35em) translateZ(-31em);
+		}
+		&::after {
+			width: 2.5em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(15em, -35em) translateZ(-31em);
+		}
+	}
+	& > div:nth-child(46) {
+		width: 2.5em; height: 7em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+		border-right: 3px solid var(--right-window-v);
+		border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+    transform: translate(110.5em, 16em) translateZ(8em) rotateX(-90deg);
+		
+		&::before {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--left-window-v);
+			border-left: 3px solid #A42037;
+			border-bottom: 3px solid var(--left-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(-111em, 14em) translateZ(-6em) rotateY(-90deg);
+		}
+		&::after {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--left-window-v);
+			border-left: 3px solid #A42037;
+			border-bottom: 3px solid var(--left-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(-111em, 14em) translateZ(-14em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(47) {
+		width: 6em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+    border-top: 3px solid var(--left-window-v);
+    border-right: 3px solid var(--left-window-h);
+    border-radius: 2em 0 0 2em;
+    transform: translate(68em, 34em) translateZ(-37em) rotateY(90deg);
+		
+		&::before {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-right: 3px solid var(--left-window-h);
+			border-radius: 2em 0 0 2em;
+			transform: translateY(6em);
+		}
+		&::after {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-right: 3px solid var(--left-window-h);
+			border-radius: 2em 0 0 2em;
+			transform: translateY(-8em);
+		}
+	}
+	& > div:nth-child(48) {
+		width: 7em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+    border-top: 3px solid var(--left-window-v);
+    border-right: 3px solid var(--left-window-h);
+    border-radius: 2em 0 0 2em;
+    transform: translate(91em, 14em) translateZ(17em) rotateY(90deg);
+		
+		&::before {
+			width: 7em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-right: 3px solid var(--left-window-h);
+			border-radius: 2em 0 0 2em;
+			transform: translateY(-8em);
+		}
+		&::after {
+			border-top: 5em solid transparent;
+			border-bottom: 5em solid transparent;
+			border-right: 10em solid var(--left-accent-light);
+			transform: translate(17.1em, 19.2em) translateZ(-5.9em) rotateY(30deg);
+		}
+	}
+	& > div:nth-child(49) {
+		width: 18em; height: 18em;
+    background: var(--top-accent-light);
+    transform: translate(95em, 3em) translateZ(36em);
+		
+		&::before {
+			border-right: 5em solid transparent;
+			border-left: 5em solid transparent;
+			border-bottom: 10em solid var(--right-accent-light);
+			transform: translate(-15em, 36em) translateZ(-36em) rotateX(-60deg);
+		}
+		&::after {
+			width: 1em; height: 18em;
+			background: var(--left-accent-light);
+			transform: rotateY(90deg);
+		}
+	}
+	& > div:nth-child(50) {
+		width: 15em; height: 15em;
+    transform: translate(96em, 4em) translateZ(36em);
+		
+		&::before {
+			border-bottom: 8em solid transparent;
+			border-top: 8em solid transparent;
+			border-left: 16em solid var(--left-accent-light);
+			transform: rotateY(-60deg);
+		}
+		&::after {
+			border-right: 8em solid transparent;
+			border-left: 8em solid transparent;
+			border-top: 16em solid var(--right-accent-light);
+			transform: translate(0em, 16em) rotateX(120deg);
+		}
+	}
+	& > div:nth-child(51) {
+		width: 18em; height: 1em;
+    background: var(--right-accent-light);
+    transform: translate(95em, 21em) translateZ(36em) rotateX(-90deg);
+	}
+	& > div:nth-child(52) {
+		width: 3em; height: 3em;
+    transform: translate(103em, 10em) translateZ(53em);
+		
+		&::before {
+			border-left: 1.5em solid transparent;
+			border-right: 1.5em solid transparent;
+			border-top: 3em solid var(--left-accent-light);
+			transform: rotateZ(90deg) rotateX(-240deg);
+		}
+		&::after {
+			border-left: 1.5em solid transparent;
+			border-right: 1.5em solid transparent;
+			border-top: 3em solid var(--right-accent-light);
+			transform: translateY(3em) rotateX(120deg);
+		}
+		
+		& > div:nth-child(1) {
+			&::before {
+				border-left: 1.5em solid transparent;
+				border-right: 1.5em solid transparent;
+				border-top: 3em solid var(--left-accent-dark);
+				transform: rotateZ(90deg) rotateX(-120deg);
+			}
+			&::after {
+				border-left: 1.5em solid transparent;
+				border-right: 1.5em solid transparent;
+				border-top: 3em solid var(--right-accent-dark);
+				transform: translateY(3em) rotateX(240deg);
+			}
+		}
+	}
+	& > div:nth-child(53) {
+		width: 65em; height: 2em;
+    background: var(--left-default-dark);
+    transform: translate(85.7em, -88em) translateZ(-53em) rotateY(-90deg);
+		
+		&::before {
+			width: 65em; height: 4.4em;
+			background: var(--left-default-light);
+			clip-path: polygon(0em 0em, 0em 1.1em, 65em 1.1em, 65em 3.1em, 0em 3.1em, 0em 4.1em, 65em 4.1em, 65em 0em);
+			transform: translateY(-0.8em) translateZ(1.23em);
+		}
+		&::after {
+			width: 65em; height: 4.5em;
+			background: var(--right-default-light);
+			clip-path: polygon(0em 0em, 0em 1.1em, 65em 1.1em, 65em 3.0em, 0em 3.0em, 0em 4.0em, 65em 4.1em, 65em 0em);
+    	transform: translateY(3em) translateZ(1em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(54) {
+		width: 1em; height: 65em;
+    background: var(--right-default-dark);
+    transform: translate(81.7em, -80.9em) translateZ(-49em) rotateX(90deg);
+		
+		&::before {
+			width: 0.9em; height: 65em;
+			background: var(--right-default-light);
+			transform: translateX(-2em) translateZ(2em);
+		}
+		&::after {
+			width: 1.1em; height: 65em;
+			background: var(--left-default-light);
+			transform: translateX(1em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(55) {
+		width: 6em; height: 6em;
+    background: var(--top-default-light);
+    transform: translate(87em, -46em) translateZ(75em);
+
+		&::before {
+			width: 6em; height: 15em;
+			background: var(--right-default-light);
+			transform: translateY(6em) rotateX(-90deg);
+		}
+		&::after {
+			width: 15em; height: 6em;
+			background: var(--left-default-light);
+			clip-path: polygon(0em 0em, 15em 0em, 15em 1em, 4em 1em, 3em 1.2em, 2em 1.7em, 1em 2.8em, 1em 3.6em, 2em 4.7em, 3em 5em, 15em 5em, 15em 6em, 0em 6em);
+			transform: rotateY(90deg);
+		}
+	}
+	& > div:nth-child(56) {
+    width: 4em; height: 4em;
+    background: var(--top-default-light);
+		transform: translate(88em, -45em) translateZ(76em);
+		
+		&::before {
+			width: 1em; height: 4em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 4em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(4em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(57) {
+		width: 4em; height: 14em;
+    background: linear-gradient(90deg, #6C507C, #2B2258);
+		transform: translate(87em, -45em) translateZ(74em) rotateX(-90deg);
+		
+		&::before {
+			border-bottom: 1em solid transparent;
+			border-top: 1em solid transparent;
+			border-left: 2em solid var(--left-accent-light);
+			transform: translate(2em, -2em) translateZ(1em) rotateX(90deg) rotateY(-60deg);
+		}
+		&::after {
+			border-right: 1em solid transparent;
+			border-left: 1em solid transparent;
+			border-top: 2em solid var(--right-accent-light);
+			transform: translate(2em, -2em) translateZ(3em) rotateX(-150deg);
+		}
+	}
+	& > .mooving-part-1 {
+    width: 8em; height: 24em;
+    background: var(--top-accent-light);
+		box-shadow: inset 0 0 0 3px var(--top-accent-light), inset 0 0 0 5px var(--top-accent-dark);
+		transform: translate(71em, -52em) translateZ(23em);
+		animation: b1Mp1 var(--animation) linear;
+		
+		&::before {
+			width: 16em; height: 24em;
+			background: linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 9em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 10.8em 1.5em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 12.6em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 14.3em 1.5em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 16.1em 3em/1.7em 3em repeat-y, var(--left-accent-light);
+			clip-path: polygon(0em 0em, 0em 24em, 8em 24em, 8em 0em, 9em 0em, 9em 24em, 17em 24em, 17em 0em);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 8em; height: 24em;
+			background: var(--top-accent-dark);
+			transform: translateZ(-9em);
+		}
+
+		& > div:nth-child(1) {
+			width: 2em; height: 2em;
+			background: var(--right-accent-dark);
+			transform: translateY(7em) translateZ(-17em) rotateX(-90deg);
+			
+			&::before {
+				width: 24em; height: 2em;
+				background: var(--left-accent-light);
+				clip-path: polygon(0em 0em, 0em 2em, 8em 2em, 8em 0em, 9em 0em, 9em 2em, 16em 2em, 16em 0em, 17em 0em, 17em 2em, 26em 2em, 26em 0em);
+				transform: translateZ(17em) rotateY(90deg);
+			}
+			&::after {
+				width: 2em; height: 2em;
+				background: var(--right-accent-dark);
+				transform: translateZ(8em);
+			}
+		}
+
+		& > div:nth-child(2) {
+			width: 8em; height: 2em;
+			background: var(--right-accent-light);
+			transform: translateY(24em) translateZ(-17em) rotateX(-90deg);
+				
+			&::before {
+				width: 8em; height: 16em;
+				background: linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 9em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 1.5em 10.6em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 12.1em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 1.5em 13.6em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 15.1em/3em 1.5em repeat-x, var(--right-accent-light);
+				clip-path: polygon(0em 0em, 0em 8em, 8em 8em, 8em 9em, 0em 9em, 0em 16em, 8em 16em, 8em 0em);
+				transform: translateY(-17em);
+			}
+			&::after {
+				width: 8em; height: 24em;
+				background: var(--top-accent-dark);
+				transform: rotateX(-90deg);
+			}
+		}
+
+		& > div:nth-child(3) {
+			width: 8em; height: 4em;
+			background: var(--right-accent-light);
+			transform: translate(-1em, 6em) translateZ(-2em) rotateX(-90deg);
+			animation: b1Mp1RightPart var(--animation) ease;
+
+			&::before {
+				width: 8em; height: 4em;
+				background: var(--top-accent-light);
+				transform: rotateX(-90deg);
+				animation: b1Mp1TopPart var(--animation) ease;
+			}
+			&::after {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				border: 1em solid var(--left-accent-light);
+				background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
+				transform: rotateY(90deg);
+				animation: b1Mp1LeftPart var(--animation) ease;
+			}
+		}
+
+		& > div:nth-child(4) {
+			width: 8em; height: 4em;
+			background: var(--right-accent-light);
+			transform: translate(-1em, 14em) translateZ(-2em) rotateX(-90deg);
+			animation: b1Mp1RightPart var(--animation) ease;
+
+			&::before {
+				width: 8em; height: 4em;
+				background: var(--top-accent-light);
+				transform: rotateX(-90deg);
+				animation: b1Mp1TopPart var(--animation) ease;
+			}
+			&::after {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				border: 1em solid var(--left-accent-light);
+				background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
+				transform: rotateY(90deg);
+				animation: b1Mp1LeftPart var(--animation) ease;
+			}
+		}
+
+		& > div:nth-child(5) {
+			width: 8em; height: 4em;
+			background: var(--right-accent-light);
+			transform: translate(-1em, 22em) translateZ(-2em) rotateX(-90deg);
+			animation: b1Mp1RightPart var(--animation) ease;
+
+			&::before {
+				width: 8em; height: 4em;
+				background: var(--top-accent-light);
+				transform: rotateX(-90deg);
+				animation: b1Mp1TopPart var(--animation) ease;
+			}
+			&::after {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				border: 1em solid var(--left-accent-light);
+				background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
+				transform: rotateY(90deg);
+				animation: b1Mp1LeftPart var(--animation) ease;
+			}
+		}
+	}
+	& > .mooving-part-2 {
+    width: 24em; height: 8em;
+    background: var(--top-accent-light);
+    box-shadow: inset 0 3px var(--top-accent-light), inset 0 -3px var(--top-accent-light), inset 0 4px var(--top-accent-dark), inset 0 -4px var(--top-accent-dark);
+		transform: translate(30em, 15em) translateZ(-18em);
+		animation: b1Mp2 var(--animation) linear;
+		
+		&::before {
+			width: 24em; height: 62em;
+			background: linear-gradient(0deg, transparent 63%, var(--right-accent-light) 63%, var(--right-accent-light) 88%, transparent 0%), conic-gradient(var(--right-accent-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-accent-dark) 180deg, var(--right-accent-dark) 270deg, transparent 270deg) 0em 0em/3em 3em repeat, var(--right-accent-light);
+			transform: translateY(8em) rotateX(-90deg);
+		}
+		
+		& > div:nth-child(1) {
+			width: 4em; height: 1em;
+			background: var(--top-accent-light);
+			transform: translate(10em, 8em) translateZ(-6em);
+			animation: b1Mp2TopPart var(--animation) ease;
+
+			&::before {
+				width: 4em; height: 1em;
+				background: var(--left-accent-light);
+				transform: rotateY(90deg);
+				animation: b1Mp2LeftPart var(--animation) ease;
+			}
+			&::after {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				border: 1em solid var(--right-accent-light);
+				background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
+				transform: translateY(1em) rotateX(-90deg);
+				animation: b1Mp2RightPart var(--animation) ease;
+			}
+		}
+		
+		& > div:nth-child(2) {
+			width: 4em; height: 1em;
+			background: var(--top-accent-light);
+			transform: translate(10em, 8em) translateZ(-13.5em);
+			animation: b1Mp2TopPart var(--animation) ease;
+
+			&::before {
+				width: 4em; height: 1em;
+				background: var(--left-accent-light);
+				transform: rotateY(90deg);
+				animation: b1Mp2LeftPart var(--animation) ease;
+			}
+			&::after {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				border: 1em solid var(--right-accent-light);
+				background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
+				transform: translateY(1em) rotateX(-90deg);
+				animation: b1Mp2RightPart var(--animation) ease;
+			}
+		}
+		
+		& > div:nth-child(3) {
+			width: 4em; height: 1em;
+			background: var(--top-accent-light);
+			transform: translate(10em, 8em) translateZ(-21em);
+			animation: b1Mp2TopPart var(--animation) ease;
+
+			&::before {
+				width: 4em; height: 1em;
+				background: var(--left-accent-light);
+				transform: rotateY(90deg);
+				animation: b1Mp2LeftPart var(--animation) ease;
+			}
+			&::after {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				border: 1em solid var(--right-accent-light);
+				background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
+				transform: translateY(1em) rotateX(-90deg);
+				animation: b1Mp2RightPart var(--animation) ease;
+			}
+		}
+	}
+	& > .rocks {
+		&::before {
+			width: 10em; height: 10em;
+			background: linear-gradient(45deg, #42313C 50%, transparent 0%);
+			transform: translateY(-8em) translateZ(-31em) rotateX(-45deg) rotateY(-190deg);
+		}
+		&::after {
+			width: 10em; height: 10em;
+			background: linear-gradient(-134deg, #2E222F 51%, transparent 0%);
+			transform: translateY(-8em) translateZ(-30em) rotateX(-23deg) rotateY(-233deg) rotateZ(-14deg);
+		}
+
+		& > div:nth-child(1) {
+			width: 6em; height: 8em;
+			background: #604854;
+			transform: translateY(-2em) translateZ(-32em) rotateX(-3deg) rotateY(160deg) rotateZ(-2deg);
+
+			&::before {
+				width: 7em; height: 9em;
+				background: linear-gradient(195deg, transparent 19%, #553E4A 0%, #553E4A 92%, transparent 0%);
+				transform: translateX(6em) rotateY(-41deg);
+			}
+			&::after {
+				width: 11em; height: 8em;
+				background: linear-gradient(41deg, #453344 76%, transparent 0%);
+				transform: translateY(8em) rotateX(76deg);
+			}
+		}
+		& > div:nth-child(2) {
+			width: 7em; height: 7em;
+			background: linear-gradient(215deg, #473444 70%, transparent 0%);
+			transform: translate(-7em, 10em) translateZ(-32em) rotateX(-20deg) rotateZ(10deg);
+
+			&::before {
+				width: 10em; height: 6em;
+				background: linear-gradient(195deg, #3B2735 70%, transparent 0%);
+				transform: rotateY(90deg);
+			}
+			&::after {
+				width: 7.7em; height: 10em;
+				background: linear-gradient(7deg, #2C2230 91%, transparent 0%);
+				transform: translateY(3.4em) rotateX(-75deg) rotateY(-27deg);
+			}
+		}
+		& > div:nth-child(3) {
+			width: 19em; height: 14em;
+			background: linear-gradient(145deg, #44313C 46%, transparent 0%);
+			transform: translate(15em, 15em) translateZ(-38em) rotateX(-47deg) rotateY(180deg);
+
+			&::before {
+				width: 6em; height: 19em;
+				background: linear-gradient(113deg, transparent 7%, #684D5A 8%, #684D5A 55%, transparent 0%);
+				transform: translate(-40em, 10em) translateZ(-2em) rotateX(-46deg);
+			}
+			&::after {
+				width: 10em; height: 7em;
+				background: linear-gradient(175deg, #623D4C 50%, transparent 0%);
+				transform: translate(-34em, 10em) translateZ(-2em) rotateX(-53deg) rotateY(-70deg);
+			}
+		}
+		& > div:nth-child(4) {
+			width: 16.2em; height: 11em;
+			background: linear-gradient(123deg, #573F4B 70%, transparent 0%);
+			transform: translate(49em, 26em) translateZ(-44em) rotateX(-30deg) rotateY(-8deg) rotateZ(48deg);
+
+			&::before {
+				width: 11em; height: 13em;
+				background: linear-gradient(136deg, #3F2A31 53%, transparent 0%), linear-gradient(141deg, #3F2A31 57%, transparent 0%);
+				transform: translateX(16.2em) rotateX(-20deg) rotateY(-60deg) rotateZ(52deg);
+			}
+			&::after {
+				width: 4em; height: 17em;
+				background: linear-gradient(78deg, transparent 31%, #5A4551 31%, #5A4551 44%, transparent 0%), linear-gradient(72deg, transparent 23%, #5A4551 23%, #5A4551 38%, transparent 0%);
+				transform: translate(19em, 11em) translateZ(11em) rotateY(40deg) rotateZ(58deg);
+			}
+		}
+		& > div:nth-child(5) {
+			width: 5em; height: 9em;
+			background: linear-gradient(143deg, #4F3945 57%, transparent 0%) 0em 6em / 5em 3em no-repeat, linear-gradient(125deg, #4F3945 30%, transparent 0%), linear-gradient(76deg, #4F3945 65%, transparent 0%) 0em 0em / 6em 6em no-repeat;
+			transform: translate(46em, 55.5em) translateZ(-39em) rotateX(-62deg) rotateY(-20deg) rotateZ(86deg);
+		}
+		& > div:nth-child(6) {
+			width: 35em; height: 34em;
+			background: #3d2f36;
+			transform: translate(20em, 23em) translateZ(-47em) rotateX(-90deg);
+		}
+	}
+}
+.building-2 {
+	width: 15em; height: 15em;
+	background: var(--top-default-light);
+	transform: translate(15em, -78em) rotateX(55deg) rotateZ(-45deg);
+	transform-style: preserve-3d;
+	animation: secondBuilding var(--animation);
+
+	--left-default-light: #F94B68;
+	--left-default-dark: #E23A53;
+	--left-accent-light: #FFD4A2;
+	--left-accent-dark: #F1C097;
+
+	--top-default-light: #FE817C;
+	--top-default-dark: #FF6D68;
+	--top-accent-light: #ffefdc;
+	--top-accent-dark: #f9d1c1;
+	
+	--right-default-light: #AC2F5A;
+	--right-default-dark: #9E1945;
+	--right-accent-light: #C18D90;
+	--right-accent-dark: #B57578;
+
+	--left-window-inner: #6F082D;
+	--left-window-v: #BF3B5B;
+	--left-window-h: #D0556E;
+	
+	--right-window-inner: #720A30;
+	--right-window-v: #9B294A;
+	--right-window-h: #B64F71;
+
+	&::before {
+		width: 100%; height: 19em;
+		background: var(--right-default-light);
+    transform: translateY(15em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
+	}
+	&::after {
+		width: 330em; height: 301em;
+    background: radial-gradient(#a7a2a7, transparent 73%) 128em 133em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 128em 270em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 8em 150em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 38em 230em/60em 16em no-repeat, radial-gradient(#ada6ad, transparent 73%) 138em 210em/80em 22em no-repeat, linear-gradient(26deg, #3D2E36 40%, #3D2E36 100%) 248em 0em/58em 70em no-repeat, linear-gradient(26deg, #3D2E36 40%, #3D2E36 100%) 0em 0em/160em 140em no-repeat, linear-gradient(26deg, #979298 40%, #c2b0b2 100%);
+    transform: translate(142em, -150em) translateZ(-160em) rotateX(90deg) rotateY(90deg) rotateZ(0deg);
+}
+
+	& > div:nth-child(1) {
+		width: 19em; height: 15em;
+		background: var(--left-default-light);
+    transform: rotateY(90deg);
+
+		&::before {
+			width: 46em; height: 7em;
+			background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 0.8em/2em 3.5em repeat-y, var(--left-default-light);
+			transform: translate(-46em, 8em) translateZ(15em);
+		}
+		&::after {
+			width: 62em; height: 54em;
+			background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 1.4em/2em 3.5em repeat-y, var(--left-default-light);
+			clip-path: polygon(0em 0em, 62em 0em, 62em 33em, 9em 33em, 9em 38em, 62em 38em, 62em 54em, 0em 54em);
+			transform: translate(-68em, -24em) translateZ(31em);
+		}
+	}
+	& > div:nth-child(2) {
+		width: 25em; height: 7em;
+		background: var(--top-default-light);
+    box-shadow: inset -10.6em 0em var(--top-default-light), inset 0em 0em 0em 1.1em var(--top-default-light), inset 0em 0em 0em 1.5em var(--top-default-dark), inset -11em 0em var(--top-default-dark);
+    transform: translate(15em, 8em) translateZ(46em);
+
+		&::before {
+			width: 16em; height: 65em;
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 1.4em/3em 2em repeat-x, var(--right-default-light);
+			transform: translateY(7em) rotateX(-90deg);
+		}
+		&::after {
+			width: 8em; height: 54em;
+			background: var(--top-default-light);
+			transform: translate(16em, -32em) translateZ(22em);
+		}
+	}
+	& > div:nth-child(3) {
+		width: 8em; height: 53.4em;
+    background: var(--right-default-light);
+    transform: translate(31em, 30em) translateZ(68em) rotateX(-90deg);
+
+		&::before {
+			width: 15em; height: 48em;
+			background: conic-gradient(var(--right-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-default-dark) 180deg, var(--right-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--right-default-light);
+			box-shadow: inset 0 16em var(--right-default-light), inset 0 -15.5em var(--right-default-light);
+			clip-path: polygon(0em 0em, 3em 0em, 3em 2em, 5em 2em, 5em 0em, 10em 0em, 10em 2em, 12em 2em, 12em 0em, 15em 0em, 15em 48em, 0em 48em);
+			transform: translate(-15em, 13em) translateZ(-30em);
+		}
+		&::after {
+			width: 15em; height: 48em;
+			background: conic-gradient(var(--left-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-default-dark) 180deg, var(--left-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--left-default-light);
+    	box-shadow: inset 0 16em var(--left-default-light), inset 0 -15.5em var(--left-default-light);
+			clip-path: polygon(0em 0em, 3em 0em, 3em 2em, 5em 2em, 5em 0em, 10em 0em, 10em 2em, 12em 2em, 12em 0em, 15em 0em, 15em 48em, 0em 48em);
+			transform: translate(-15em, 13em) translateZ(-30em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(4) {
+		width: 15em; height: 15em;
+    background: var(--top-default-light);
+    transform: translate(16em, -15em) translateZ(53em);
+
+		&::before {
+			width: 15em; height: 15em;
+			background: var(--top-default-light);
+			clip-path: polygon(3em 0em, 15em 0em, 15em 15em, 0em 15em, 0em 0em, 3em 0em, 3em 1em, 1em 1em, 1em 3em, 0em 3em, 0em 5em, 1em 5em, 1em 10em, 0em 10em, 0em 12em, 1em 12em, 1em 14em, 3em 14em, 3em 15em, 5em 15em, 5em 14em, 10em 14em, 10em 15em, 12em 15em, 12em 14em, 14em 14em, 14em 12em, 15em 12em, 15em 10em, 14em 10em, 14em 5em, 15em 5em, 15em 3em, 14em 3em, 14em 1em, 12em 1em, 12em 0em, 10em 0em, 10em 1em, 5em 1em, 5em 0em);
+			transform: translateZ(2em);
+		}
+		&::after {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateY(3em) rotateX(90deg);
+		}
+	}
+	& > div:nth-child(5) {
+		width: 1em; height: 2em;
+    background: var(--right-default-light);
+    box-shadow: 14em 0em var(--right-default-light);
+    transform: translate(15em, -4em) translateZ(54em) rotateX(90deg);
+
+		&::before {
+			width: 1em; height: 2em;
+			background: var(--left-default-light);
+			box-shadow: -14em 0em var(--left-default-light);
+			transform: translateX(5em) translateZ(-4em) rotateY(90deg);
+		}
+		&::after {
+			width: 1em; height: 2em;
+			background: var(--left-default-light);
+			transform: translateX(12em) translateZ(-4em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(6) {
+		width: 13em; height: 13em;
+		transform: translate(17em, -14em) translateZ(53em);
+
+		&::before {
+			width: 13.5em; height: 13em;
+			background: var(--top-accent-light);
+			clip-path: polygon(0em 0em, 13.5em 6.5em, 0em 13em);
+			transform: rotateY(-61deg);
+		}
+		&::after {
+			bottom: 0;
+			height: 13.5em; width: 13em;
+			background: var(--top-accent-dark);
+			clip-path: polygon(0em 13.5em, 6.5em 0em, 13em 13.5em);
+			transform-origin: bottom center;
+			transform: rotateX(-61deg);
+		}
+	}
+	& > div:nth-child(7) {
+		width: 2em; height: 6em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+    border-right: 3px solid var(--right-window-v);
+    border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+    transform: translate(3em, 15em) translateZ(-4em) rotateX(-90deg);
+
+		&::before {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateX(7em);
+		}
+		&::after {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-left: 3px solid var(--left-window-v);
+			border-bottom: 3px solid var(--left-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateX(-3em) translateZ(-5em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(8) {
+		width: 6em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+		border-left: 3px solid var(--left-window-h);
+		border-top: 3px solid var(--left-window-v);
+    border-radius: 0 2em 2em 0;
+    transform: translateY(2em) translateZ(-11em) rotateY(-90deg);
+
+		&::before {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translate(52em, -9em) translateZ(-16em);
+		}
+		&::after {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translate(52em, -16em) translateZ(-16em);
+		}
+	}
+	& > div:nth-child(9) {
+		width: 2em; height: 6em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+    border-right: 3px solid var(--right-window-v);
+    border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+		transform: translateX(19em) translateZ(48em) rotateX(-90deg);
+
+		&::before {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateX(7em);
+		}
+		&::after {
+			width: 3em; height: 2em;
+			background: var(--right-default-light);
+			box-shadow: 7em 0em var(--right-default-light), 2em 0em var(--right-default-light);
+			transform: translate(11em, -7em) translateZ(-10em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(10) {
+		width: 6em; height: 13em;
+    background: linear-gradient(90deg, #B83C63 10%, #792249 10%, #541538 100%);
+    transform: translate(31em, 9em) translateZ(59em) rotateX(-90deg);
+
+		&::before {
+			width: 26em; height: 30em;
+			background: var(--top-default-light);
+			clip-path: polygon(0em 0em, 15em 0em, 15em 16em, 26em 16em, 26em 19em, 15em 30em, 8em 30em, 8em 7em, 0em 7em);
+			transform: translateY(44em) translateZ(21em) rotateX(90deg);
+		}
+		&::after {
+			width: 7em; height: 25em;
+			background: var(--right-default-light);
+			transform: translate(8em, 44em) translateZ(51em);
+		}
+	}
+	& > div:nth-child(11) {
+		width: 7em; height: 20em;
+    background: var(--right-default-light);
+    transform: translate(32em, 37em) translateZ(15em) rotateX(-90deg);
+
+		&::before {
+			width: 23em; height: 25em;
+			background: var(--left-default-light);
+			transform: translateX(7em) rotateY(-90deg);
+		}
+		&::after {
+			width: 45em; height: 61em;
+			background: var(--left-default-light);
+			clip-path: polygon(0em 0em, 8em 0em, 8em 1em, 9em 1em, 9em 2em, 10em 2em, 10em 3em, 11em 3em, 11em 4em, 12em 4em, 12em 5em, 13em 5em, 13em 6em, 14em 6em, 14em 7em, 23em 7em, 23em 8em, 24em 8em, 24em 9em, 25em 9em, 25em 10em, 26em 10em, 26em 11em, 27em 11em, 27em 12em, 28em 12em, 28em 13em, 29em 13em, 29em 14em, 30em 14em, 30em 15em, 31em 15em, 31em 16em, 32em 16em, 32em 17em, 33em 17em, 33em 18em, 34em 18em, 34em 19em, 35em 19em, 35em 20em, 36em 20em, 36em 21em, 37em 21em, 37em 22em, 45em 28em, 45em 61em, 22em 61em, 22em 23em, 16em 23em, 16em 61em, 0em 61em);
+			transform: translate(14em, -38em) translateZ(-7em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(12) {
+		width: 11em; height: 11em;
+    transform: translate(2em, 2em);
+
+		&::before {
+			width: 11em; height: 11em;
+			box-sizing: border-box;
+			border-bottom: 5.5em solid transparent;
+			border-top: 5.5em solid transparent;
+			border-left: 11em solid var(--top-accent-light);
+			transform: rotateY(-60deg);
+		}
+		&::after {
+			width: 11em; height: 11em;
+			box-sizing: border-box;
+			border-left: 5.5em solid transparent;
+			border-right: 5.5em solid transparent;
+			border-bottom: 11em solid var(--top-accent-dark);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+	}
+	& > div:nth-child(13) {
+		width: 15em; height: 15em;
+    background: var(--top-default-light);
+    transform: translate(23em, 40em) translateZ(8em);
+
+		&::before {
+			width: 15em; height: 25em;
+			background: linear-gradient(180deg, transparent 24%, var(--right-default-light) 0%), conic-gradient(var(--right-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-default-dark) 180deg, var(--right-default-dark) 270deg, transparent 270deg) 1.5em 0em/3em 3em repeat, var(--right-default-light);
+			transform: translateY(15em) rotateX(-90deg);
+		}
+		&::after {
+			width: 25em; height: 15em;
+			background: linear-gradient(90deg, transparent 24%, var(--left-default-light) 0%), conic-gradient(var(--left-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-default-dark) 180deg, var(--left-default-dark) 270deg, transparent 270deg) 1.5em 0em/3em 3em repeat, var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+	}
+	& > div:nth-child(14) {
+		width: 6em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+    border-top: 3px solid var(--left-window-v);
+    border-left: 3px solid var(--left-window-h);
+    border-radius: 0 2em 2em 0;
+    transform: translate(23em, 42em) translateZ(-7em) rotateY(-90deg);
+
+		&::before {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translate(-1em, 7em);
+		}
+		&::after {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-bottom: 3px solid var(--right-window-v);
+			border-left: 3px solid var(--right-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translateY(13em) translateZ(-3em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(15) {
+		width: 13em; height: 13em;
+    transform: translate(24em, 41em) translateZ(8em);
+
+		&::before {
+			border-top: 6.5em solid transparent;
+			border-bottom: 6.5em solid transparent;
+			border-left: 13em solid var(--top-accent-light);
+			transform: rotateY(-60deg);
+		}
+		&::after {
+			border-right: 6.5em solid transparent;
+			border-left: 6.5em solid transparent;
+			border-bottom: 13em solid var(--top-accent-dark);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+	}
+	& > div:nth-child(16) {
+		width: 7em; height: 8em;
+    background: var(--right-default-light);
+    transform: translate(-45em, 83em) translateZ(-50em) rotateX(-90deg);
+
+		&::before {
+			width: 14em; height: 14em;
+			clip-path: polygon(0em 0em, 0em 14em, 14em 14em, 14em 7em, 7em 7em, 7em 0em);
+			background-image: linear-gradient(312deg, var(--top-default-light) 2.7em, transparent 0em) -1.5em -1.5em/7em 7em, linear-gradient(132deg, var(--top-default-light) 2.7em, transparent 0em) 1.9em 1.5em/7em 7em, linear-gradient(312deg, var(--top-default-dark) 3.4em, transparent 0em) -1em -1em/7em 7em, linear-gradient(132deg, var(--top-default-dark) 3.4em, transparent 0em) 1.4em 1em/7em 7em;
+			background-color: var(--top-default-light);
+			transform: rotateX(-90deg);
+		}
+		&::after {
+			width: 14em; height: 8em;
+			background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+	}
+	& > div:nth-child(17) {
+		width: 6em; height: 6em;
+    transform: translate(-30em, 69em) translateZ(-35em);
+
+		&::before {
+			border-top: 3em solid transparent;
+			border-bottom: 3em solid transparent;
+			border-left: 6em solid var(--left-accent-light);
+			transform: rotateY(-60deg);
+		}
+		&::after {
+			border-right: 3em solid transparent;
+			border-left: 3em solid transparent;
+			border-bottom: 6em solid var(--right-accent-light);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+	}
+	& > div:nth-child(18) {
+		width: 6em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+    border-top: 3px solid var(--left-window-v);
+    border-left: 3px solid var(--left-window-h);
+    border-radius: 0 2em 2em 0;
+    transform: translate(-31em, 71em) translateZ(-46em) rotateY(-90deg);
+    z-index: 1;
+
+		&::before {
+			width: 20em; height: 8em;
+			background: var(--right-default-dark);
+			transform: translate(-5em, -27em) rotateX(-90deg);
+		}
+		&::after {
+			width: 22em; height: 14em;
+			background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 18em 0em/2em 2em repeat-y, var(--left-default-light);
+			transform: translate(-19em, 9em) translateZ(-14em);
+		}
+	}
+	& > div:nth-child(19) {
+		width: 8em; height: 16em;
+    background: var(--top-default-light);
+    box-shadow: inset 0em 7.5em 0 1.7em var(--top-default-light), inset 0em 0em 0 1.7em var(--top-default-light), inset 0em 0em 0 2em var(--top-default-dark), inset 0em 7.5em 0 2em var(--top-default-dark);
+    transform: translate(46em, 22em) translateZ(53em);
+
+		&::before {
+			width: 8em; height: 9em;
+			background: var(--top-default-light);
+    	box-shadow: inset 0 0 0 1.7em var(--top-default-light), inset 0 0 0 2em var(--top-default-dark);
+			transform: translateY(22em) translateZ(-7em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(21em) translateZ(-6em);
+		}
+	}
+	& > div:nth-child(20) {
+		width: 15.3em; height: 22em;
+    background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.2em 2em/2.5em 2em repeat-x, var(--right-default-light);
+    transform: translate(-17.3em, 95em) translateZ(-42em) rotateX(-90deg);
+
+		&::before {
+			width: 15.3em; height: 14em;
+			background: var(--top-default-light);
+			transform: rotateX(-90deg);
+		}
+		&::after {
+			width: 15em; height: 34em;
+			background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0em 1.5em/2em 2em repeat-x, var(--left-default-light);
+			transform: translate(23.3em, -15em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(21) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 38em) translateZ(52em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(22) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 41em) translateZ(49em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateZ(1em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(23) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(46em, 38em) translateZ(53em) rotateX(-90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(24) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(46em, 42em) translateZ(49em) rotateX(-90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(25) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(46em, 53em) translateZ(46em) rotateX(-90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(26) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(46em, 56em) translateZ(43em) rotateX(-90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(27) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(46em, 59em) translateZ(40em) rotateX(-90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(28) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(46em, 62em) translateZ(37em) rotateX(-90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(29) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+		transform: translate(46em, 65em) translateZ(34em) rotateX(-90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(30) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 53em) translateZ(45em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(31) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 56em) translateZ(42em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(32) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 59em) translateZ(39em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(33) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 62em) translateZ(36em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(34) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(46em, 65em) translateZ(33em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 7em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translateY(-10em) translateZ(-5em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(35) {
+		width: 7em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+		border-top: 3px solid var(--left-window-v);
+		border-left: 3px solid var(--left-window-h);
+    border-radius: 0 2em 2em 0;
+    transform: translate(46em, 41em) translateZ(27em) rotateY(-90deg);
+
+		&::before {
+			width: 7em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translate(-1em, -8em);
+		}
+		&::after {
+			width: 15em; height: 6em;
+			background: linear-gradient(0deg, #3e212f, transparent), linear-gradient(90deg, #6d324c 10%, transparent 0%) -2em 0em/6em 3em repeat-x, linear-gradient(90deg, #733a55 10%, #814364 0%) 0em 0em/1em 6em repeat-x;
+			transform: translate(-12.8em, 4.3em) translateZ(0em) rotateX(-90deg);
+			animation: b2Door1 var(--animation);
+		}
+	}
+	& > div:nth-child(36) {
+		width: 19em; height: 16em;
+		background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 15em 1.8em/2em 3.5em repeat-y, var(--left-default-light);
+		transform: translate(40em, -9em) translateZ(57em) rotateY(-90deg);
+
+		&::before {
+			width: 19em; height: 16em;
+			background: linear-gradient(var(--right-default-dark) 50%, transparent 0%) 15em 1.8em/2em 3.5em repeat-y, var(--right-default-light);
+			transform: translateY(16em) rotateX(-90deg);
+		}
+		&::after {
+			width: 16em; height: 16em;
+			background: conic-gradient(var(--top-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--top-default-dark) 180deg, var(--top-default-dark) 270deg, transparent 270deg) 0em 0em/4em 4em repeat, var(--top-default-light);
+			transform: translateX(19em) rotateY(90deg);;
+		}
+	}
+	& > div:nth-child(37) {
+		width: 16em; height: 12em;
+    background: var(--left-default-light);
+    transform: translate(41em, -7em) translateZ(62em) rotateY(-90deg);
+
+		&::before {
+			width: 16em; height: 12em;
+			background: var(--right-default-light);
+			transform: translateY(12em) rotateX(-90deg);
+		}
+		&::after {
+			width: 12em; height: 12em;
+			background: var(--top-default-light);
+			transform: translateX(16em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(38) {
+		width: 8em; height: 8em;
+    transform: translate(43em, -5em) translateZ(78em);
+
+		&::before {
+			box-sizing: border-box;
+			border-bottom: 4em solid transparent;
+			border-top: 4em solid transparent;
+			border-left: 8em solid var(--top-accent-light);
+			transform: rotateY(-60deg);
+		}
+		&::after {
+			box-sizing: border-box;
+			border-left: 4em solid transparent;
+			border-right: 4em solid transparent;
+			border-bottom: 8em solid var(--top-accent-dark);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+	}
+	& > div:nth-child(39) {
+		width: 16em; height: 8em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
+    transform: translate(39em, -24em) translateZ(75em);
+
+		&::before {
+			width: 16em; height: 21em;
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.9em 1.8em/3.5em 2em repeat-x, var(--right-default-light);
+			transform: translateY(8em)rotateX(-90deg);
+		}
+		&::after {
+			width: 38em; height: 15em;
+			background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 16.4em 2.7em/2em 3.5em repeat-y, var(--left-default-light);
+			clip-path: polygon(0em 0em, 0em 7em, 15em 7em, 15em 15em, 38em 15em, 38em 0em);
+			transform: translateY(-7em) translateZ(15em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(40) {
+		width: 7em; height: 7em;
+    background: var(--top-default-light);
+    transform: translate(39em, -31em) translateZ(90em);
+
+		&::before {
+			width: 7em; height: 15em;
+			background: var(--right-default-light);
+			clip-path: polygon(0em 0em, 7em 0em, 7em 15em, 6em 15em, 6em 3em, 1em 3em, 1em 15em, 0em 15em);
+			transform: translateY(7em) rotateX(-90deg);
+		}
+		&::after {
+			width: 18em; height: 6em;
+			background: linear-gradient(0deg, #FF6081 8%, #BB3C54 8%, #852146);
+			transform: translate(6em, 1em) translateZ(-3em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(41) {
+		width: 5em; height: 5em;
+    background: var(--top-default-light);
+    transform: translate(40em, -30em) translateZ(91em);
+
+		&::before {
+			width: 5em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateY(5em) rotateX(-90deg);
+		}
+		&::after {
+			width: 2em; height: 5em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+	}
+	& > div:nth-child(42) {
+		width: 4em; height: 4em;
+    transform: translate(40.5em, -29.5em) translateZ(91em);
+
+		&::before {
+			box-sizing: border-box;
+			border-bottom: 2em solid transparent;
+			border-top: 2em solid transparent;
+			border-left: 4em solid var(--top-accent-light);
+			transform: rotateY(-60deg);
+		}
+		&::after {
+			box-sizing: border-box;
+			border-left: 2em solid transparent;
+			border-right: 2em solid transparent;
+			border-bottom: 4em solid var(--top-accent-dark);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+	}
+	& > div:nth-child(43) {
+		width: 6em; height: 2em;
+    background: var(--left-window-inner);
+    border-top: 0.5em solid var(--left-window-v);
+    border-left: 0.5em solid var(--left-window-h);
+    border-radius: 0 2em 2em 0;
+    box-sizing: border-box;
+    transform: translate(39em, -29em) translateZ(76em) rotateY(-90deg);
+
+		&::before {
+			width: 33em; height: 16em;
+			background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 13em 2.7em/2em 3.5em repeat-y, var(--left-default-light);
+			transform: translate(-37.5em, 49.5em) translateZ(-50em);
+		}
+		&::after {
+			width: 48em; height: 16em;
+			background: linear-gradient(var(--right-default-dark) 50%, transparent 0%) 28em -0.5em/2em 3.5em repeat-y, var(--right-default-light);
+			transform: translate(-52.5em, 65.5em) translateZ(-66em) rotateX(90deg);
+		}
+	}
+	& > div:nth-child(44) {
+		width: 18em; height: 18em;
+    background: var(--top-default-light);
+    transform: translate(88em, 20em) translateZ(73em);
+
+		&::before {
+			width: 18em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(18em) rotateX(-90deg);
+		}
+		&::after {
+			width: 1em; height: 18em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+	}
+	& > div:nth-child(45) {
+		width: 18em; height: 18em;
+    background: var(--top-default-light);
+    transform: translate(88em, 20em) translateZ(75em);
+
+		&::before {
+			width: 18em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(18em) rotateX(-90deg);
+		}
+		&::after {
+			width: 1em; height: 18em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+	}
+	& > div:nth-child(46) {
+		width: 16em; height: 16em;
+    background: var(--top-default-light);
+    transform: translate(89em, 21em) translateZ(76em);
+
+		&::before {
+			width: 14em; height: 14em;
+			background: var(--top-default-light);
+			transform: translate(1em, 1em) translateZ(1em);
+		}
+		&::after {
+			width: 1em; height: 14em;
+			background: var(--left-default-light);
+			transform: translate(1em, 1em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(47) {
+		width: 14em; height: 1em;
+    background: var(--right-default-light);
+		transform: translate(90em, 36em) translateZ(77em) rotateX(-90deg);
+
+		&::before {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(2em, 7em) translateZ(1em);
+		}
+		&::after {
+			width: 2em; height: 6em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(10em, 7em) translateZ(1em);
+		}
+	}
+	& > div:nth-child(48) {
+		width: 6em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+    border-top: 3px solid var(--left-window-v);
+    border-left: 3px solid var(--left-window-h);
+    border-radius: 0 2em 2em 0;
+    transform: translate(89em, 32em) translateZ(64em) rotateY(-90deg);
+
+		&::before {
+			width: 6em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translate(-1em, -9em);
+		}
+		&::after {
+			width: 33em; height: 8em;
+			background: var(--right-default-light);
+			transform: translate(-72.6em, 42.2em) translateZ(43em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(49) {
+		width: 12em; height: 12em;
+    transform: translate(91em, 23em) translateZ(77em);
+
+		&::before {
+			border-top: 6em solid transparent;
+			border-bottom: 6em solid transparent;
+			border-left: 12em solid var(--top-accent-light);
+			transform: rotateY(-60deg);
+		}
+		&::after {
+			border-right: 6em solid transparent;
+			border-left: 6em solid transparent;
+			border-bottom: 12em solid var(--top-accent-dark);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+	}
+	& > div:nth-child(50) {
+		width: 8em; height: 23em;
+		background: var(--top-default-light);
+    box-shadow: inset 0 0 0 1.7em var(--top-default-light), inset 0 0 0 2em var(--top-default-dark);
+    transform: translate(-31em, 38em) translateZ(-21em);
+
+		&::before {
+			width: 8em; height: 29em;
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--right-default-light);
+			transform: translateY(23em) rotateX(-90deg);
+		}
+		&::after {
+			width: 23em; height: 29em;
+			clip-path: polygon(0em 0em, 0em 29em, 7em 29em, 7em 9em, 15em 9em, 15em 29em, 23em 29em, 23em 0em);
+			background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--left-default-light);
+			transform: rotateX(-90deg) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(51) {
+		width: 8em; height: 8em;
+    background: var(--top-default-light);
+    transform: translate(-31em, 68em) translateZ(-35em);
+
+		&::before {
+			width: 16em; height: 23em;
+			clip-path: polygon(8em 0em, 8em 15em, 0em 15em, 0em 23em, 16em 23em, 16em 0em);
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--right-default-light);
+			transform: translate(-8em, 8em) rotateX(-90deg);
+		}
+		&::after {
+			width: 8em; height: 17em;
+			background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--left-default-light);
+			transform: rotateX(-90deg) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(52) {
+		width: 10em; height: 10em;
+    transform: translate(-15em, 83em) translateZ(-42em);
+
+		&::before {
+			border-top: 5em solid transparent;
+			border-bottom: 5em solid transparent;
+			border-left: 10em solid var(--left-accent-light);
+			transform: rotateY(-60deg);
+		}
+		&::after {
+			border-right: 5em solid transparent;
+			border-left: 5em solid transparent;
+			border-bottom: 10em solid var(--right-accent-light);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+	}
+	& > div:nth-child(53) {
+		width: 15em; height: 15em;
+    background: var(--top-default-light);
+    transform: translate(6em, 80em) translateZ(-27em);
+
+		&::before {
+			width: 15em; height: 34em;
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1em 1.5em/2.5em 2em repeat-x, var(--right-default-light);
+			transform: translateY(15em) rotateX(-90deg);
+		}
+		&::after {
+			width: 7em; height: 2em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-top: 3px solid var(--left-window-v);
+			border-left: 3px solid var(--left-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translateY(3em) translateZ(-19em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(54) {
+		width: 7em; height: 2em;
+    box-sizing: border-box;
+    background: var(--left-window-inner);
+    border-top: 3px solid var(--left-window-v);
+    border-left: 3px solid var(--left-window-h);
+    border-radius: 0 2em 2em 0;
+    transform: translate(6em, 90em) translateZ(-46em) rotateY(-90deg);
+
+		&::before {
+			width: 7em; height: 2em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-bottom: 3px solid var(--right-window-v);
+			border-left: 3px solid var(--right-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translateY(5em) translateZ(-2em) rotateX(-90deg);
+		}
+		&::after {
+			width: 7em; height: 2em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-bottom: 3px solid var(--right-window-v);
+			border-left: 3px solid var(--right-window-h);
+			border-radius: 0 2em 2em 0;
+			transform: translateY(5em) translateZ(-8em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(55) {
+		width: 11em; height: 11em;
+    transform: translate(8em, 82em) translateZ(-27em);
+
+		&::before {
+			border-top: 5.5em solid transparent;
+			border-bottom: 5.5em solid transparent;
+			border-left: 11em solid var(--left-accent-light);
+			transform: rotateY(-60deg);
+		}
+		&::after {
+			border-right: 5.5em solid transparent;
+			border-left: 5.5em solid transparent;
+			border-bottom: 11em solid var(--right-accent-light);
+			transform-origin: bottom center;
+			transform: rotateX(-60deg);
+		}
+	}
+	& > div:nth-child(56) {
+		width: 8em; height: 8em;
+    background: var(--top-default-light);
+    transform: translate(-9em, 109em) translateZ(-58em);
+
+		&::before {
+			width: 4em; height: 8em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 8em; height: 4em;
+			background: var(--right-default-light);
+			transform: translateY(8em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(57) {
+		width: 2em; height: 3em;
+		background: var(--left-default-light);
+		box-shadow: 0em 5em var(--left-default-light), 0em 7em var(--left-default-light), 0em 12em var(--left-default-light), 0em 14em var(--left-default-light), 0em 19em var(--left-default-light);
+    transform: translate(109em, 67em) translateZ(31em) rotateY(-90deg);
+
+		&::before {
+			width: 11em; height: 22em;
+			clip-path: polygon(0em 0em, 10em 0em, 11em 2em, 11em 3em, 9em 6em, 8em 8em, 8em 22em, 0em 22em);
+			background: var(--top-default-light);
+			transform: translateZ(-1em) rotateY(-90deg);
+		}
+		&::after {
+			width: 1em; height: 3em;
+			background: var(--top-default-light);
+			box-shadow: 0em 5em var(--top-default-light), 0em 7em var(--top-default-light), 0em 12em var(--top-default-light), 0em 14em var(--top-default-light), 0em 19em var(--top-default-light);
+			transform: translateX(2em) translateZ(-1em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(58) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 89em) translateZ(30em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(59) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 92em) translateZ(27em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(60) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 95em) translateZ(24em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: rotateX(90deg);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(-1em) rotateX(90deg);
+		}
+	}
+	& > div:nth-child(61) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 94em) translateZ(25em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(62) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 91em) translateZ(28em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+		&::after {
+			width: 8em; height: 3em;
+			clip-path: polygon(0em 0em, 8em 0em, 8em 3em, 7em 3em, 7em 1em, 0em 1em);
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(63) {
+		width: 2em; height: 3em;
+    background: var(--left-default-light);
+    box-shadow: 0em 5em var(--left-default-light), 0em 7em var(--left-default-light), 0em 12em var(--left-default-light), 0em 14em var(--left-default-light), 0em 19em var(--left-default-light);
+    transform: translate(109em, 96em) translateZ(23em) rotateY(-90deg);
+
+		&::before {
+			width: 8em; height: 22em;
+			background: var(--top-default-light);
+			transform: translateZ(-1em) rotateY(-90deg);
+		}
+		&::after {
+			width: 1em; height: 3em;
+			background: var(--top-default-light);
+			box-shadow: 0em 5em var(--top-default-light), 0em 7em var(--top-default-light), 0em 12em var(--top-default-light), 0em 14em var(--top-default-light), 0em 19em var(--top-default-light);
+			transform: translateX(2em) translateZ(-1em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(64) {
+		width: 2em; height: 3em;
+    background: var(--left-default-light);
+    box-shadow: 0em 5em var(--left-default-light), 0em 7em var(--left-default-light), 0em 12em var(--left-default-light), 0em 14em var(--left-default-light), 0em 19em var(--left-default-light);
+    transform: translate(109em, 118em) rotateY(-90deg);
+
+		&::before {
+			width: 8em; height: 22em;
+			background: var(--top-default-light);
+			transform: translateZ(-1em) rotateY(-90deg);
+		}
+		&::after {
+			width: 1em; height: 3em;
+			background: var(--top-default-light);
+			box-shadow: 0em 5em var(--top-default-light), 0em 7em var(--top-default-light), 0em 12em var(--top-default-light), 0em 14em var(--top-default-light), 0em 19em var(--top-default-light);
+			transform: translateX(2em) translateZ(-1em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(65) {
+		width: 1em; height: 2em;
+    background: var(--right-default-light);
+    transform: translate(109em, 99em) translateZ(23em) rotateX(90deg);
+
+		&::before {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(-7em);
+		}
+		&::after {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(-14em);
+		}
+	}
+	& > div:nth-child(66) {
+		width: 1em; height: 2em;
+    background: var(--right-default-light);
+    transform: translate(109em, 70em) translateZ(31em) rotateX(90deg);
+
+		&::before {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(-7em);
+		}
+		&::after {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(-14em);
+		}
+	}
+	& > div:nth-child(67) {
+		width: 1em; height: 2em;
+    background: var(--right-default-light);
+    transform: translate(111em, 121em) translateZ(-2em) rotateX(90deg);
+
+		&::before {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(-7em);
+		}
+		&::after {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(-14em);
+		}
+	}
+	& > div:nth-child(68) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 140em) translateZ(-1em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(69) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 143em) translateZ(-4em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(70) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 146em) translateZ(-7em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(71) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 149em) translateZ(-10em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(72) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(102em, 152em) translateZ(-13em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(73) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 152em) translateZ(-13em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(74) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 155em) translateZ(-16em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(4em) translateZ(4em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(5em) translateZ(5em);
+		}
+	}
+	& > div:nth-child(75) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 149em) translateZ(-10em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(76) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 146em) translateZ(-7em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(77) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 143em) translateZ(-4em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(2em);
+		}
+	}
+	& > div:nth-child(78) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(102em, 140em) translateZ(-1em) rotateX(90deg);
+
+		&::before {
+			width: 8em; height: 25em;
+			clip-path: polygon(0em 0em, 8em 0em, 8em 1em, 2em 1em, 2em 2em, 6em 2em, 6em 1em, 6em 3em, 2em 3em, 2em 4em, 6em 4em, 6em 3em, 6em 5em, 2em 5em, 2em 6em, 6em 6em, 6em 5em, 6em 7em, 2em 7em, 2em 8em, 6em 8em, 6em 7em, 6em 9em, 2em 9em, 2em 10em, 6em 10em, 6em 9em, 6em 11em, 2em 11em, 2em 12em, 6em 12em, 6em 11em, 6em 13em, 2em 13em, 2em 14em, 6em 14em, 6em 13em, 6em 15em, 2em 15em, 2em 16em, 6em 16em, 6em 15em, 6em 17em, 2em 17em, 2em 18em, 6em 18em, 6em 17em, 6em 19em, 2em 19em, 2em 20em, 6em 20em, 6em 19em, 6em 21em, 2em 21em, 2em 22em, 6em 22em, 6em 21em, 6em 23em, 6em 1em, 8em 1em, 8em 25em, 7em 25em, 7em 23em, 0em 23em);
+			background: var(--right-default-light);
+			transform: translateY(1em) translateZ(22em);
+		}
+		&::after {
+			width: 1em; height: 23em;
+			background: var(--left-default-light);
+			transform: translate(6em, 1em) translateZ(22em) rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(79) {
+		width: 4em; height: 2em;
+    background: var(--left-default-dark);
+    transform: translate(104em, 116em) translateZ(1em);
+
+		&::before {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(2em);
+		}
+		&::after {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(4em);
+		}
+	}
+	& > div:nth-child(80) {
+		width: 4em; height: 2em;
+    background: var(--left-default-dark);
+    transform: translate(104em, 116em) translateZ(7em);
+
+		&::before {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(2em);
+		}
+		&::after {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(4em);
+		}
+	}
+	& > div:nth-child(81) {
+		width: 4em; height: 2em;
+    background: var(--left-default-dark);
+    transform: translate(104em, 116em) translateZ(13em);
+
+		&::before {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(2em);
+		}
+		&::after {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(4em);
+		}
+	}
+	& > div:nth-child(82) {
+		width: 4em; height: 2em;
+    background: var(--left-default-dark);
+    transform: translate(104em, 116em) translateZ(19em);
+
+		&::before {
+			width: 4em; height: 2em;
+			background: var(--left-default-dark);
+			transform: translateZ(2em);
+		}
+		&::after {
+			width: 86em; height: 102em;
+			clip-path: polygon(47em 112em, 47em 88em, 46em 88em, 46em 87em, 45em 87em, 45em 86em, 44em 86em, 44em 85em, 43em 85em, 43em 84em, 42em 84em, 42em 83em, 41em 83em, 41em 82em, 40em 82em, 40em 81em, 39em 81em, 39em 80em, 38em 80em, 38em 79em, 37em 79em, 37em 78em, 36em 78em, 36em 77em, 35em 77em, 35em 76em, 34em 76em, 34em 75em, 33em 75em, 33em 74em, 32em 74em, 32em 73em, 31em 73em, 31em 51em, 8em 51em, 8em 29em, 7em 29em, 7em 28em, 6em 28em, 6em 27em, 5em 27em, 5em 26em, 4em 26em, 4em 25em, 3em 25em, 3em 24em, 2em 24em, 2em 23em, 1em 23em, 1em 22em, 0em 22em, 0em 0em, 86em 0em, 86em 71em, 55em 71em, 55em 94em, 86em 94em, 86em 112em);
+			background: var(--left-default-light);
+			transform: translate(-2em, -49em) translateZ(12em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(83) {
+		width: 8em; height: 14em;
+    background: var(--top-default-light);
+    transform: translate(102em, 155em) translateZ(-16em);
+
+		&::before {
+			width: 8em; height: 39em;
+			background: var(--right-default-light);
+			transform: translateY(14em) rotateX(-90deg);
+		}
+		&::after {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translate(7em, -34em) translateZ(18em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(84) {
+		width: 1em; height: 2em;
+    background: var(--right-default-light);
+    transform: translate(109em, 128em) translateZ(2em) rotateX(-90deg);
+
+		&::before {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(7em);
+		}
+		&::after {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			transform: translateZ(12em);
+		}
+	}
+	& > div:nth-child(85) {
+		width: 5em; height: 31em;
+    background: var(--right-default-dark);
+    transform: translate(102em, 138em) translateZ(-24em) rotateX(-90deg);
+
+		&::before {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-left: 3px solid var(--left-window-v);
+			border-bottom: 3px solid var(--left-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateY(-13em) translateZ(-2em) rotateY(-90deg);
+		}
+		&::after {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--left-window-inner);
+			border-left: 3px solid var(--left-window-v);
+			border-bottom: 3px solid var(--left-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateY(-3em) translateZ(26em) rotateY(-90deg);
+		}
+	}
+	& > .mooving-part-1 {
+		width: 8em; height: 15em;
+    background: var(--top-accent-light);
+    box-shadow: inset 0 0 0 1em var(--top-accent-light), inset 0 0 0 1.2em var(--top-accent-dark);
+		animation: b2Mp1 var(--animation) linear;
+
+		&::before {
+			width: 70em; height: 15em;
+			background: var(--left-accent-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 8em; height: 70em;
+			background: var(--right-accent-light);
+			transform: translateY(15em)rotateX(-90deg);
+		}
+
+		& > div:nth-child(1) {
+			width: 1em; height: 5em;
+			transform: translate(-1em, 5em) translateZ(-2em);
+			animation: b2Mp1TopPart var(--animation) ease;
+			
+			&::before {
+				width: 1em; height: 5em;
+				transform: translateY(5em) rotateX(-90deg);
+				animation: b2Mp1RightPart var(--animation) ease;
+			}
+			&::after {
+				width: 5em; height: 5em;
+				box-sizing: border-box;
+				transform: rotateY(90deg);
+				animation: b2Mp1LeftPart var(--animation) ease;
+			}
+		}
+		& > div:nth-child(2) {
+			width: 1em; height: 5em;
+			transform: translate(-1em, 5em) translateZ(-10em);
+			animation: b2Mp1TopPart var(--animation) ease;
+	
+			&::before {
+				width: 1em; height: 5em;
+				transform: translateY(5em) rotateX(-90deg);
+				animation: b2Mp1RightPart var(--animation) ease;
+			}
+			&::after {
+				width: 5em; height: 5em;
+				box-sizing: border-box;
+				transform: rotateY(90deg);
+				animation: b2Mp1LeftPart var(--animation) ease;
+			}
+		}
+		& > div:nth-child(3) {
+			width: 1em; height: 5em;
+			transform: translateX(-1em) translateY(5em) translateZ(-18em);
+			animation: b2Mp1TopPart var(--animation) ease;
+	
+			&::before {
+				width: 1em; height: 5em;
+				transform: translateY(5em) rotateX(-90deg);
+				animation: b2Mp1RightPart var(--animation) ease;
+			}
+			&::after {
+				width: 5em; height: 5em;
+				box-sizing: border-box;
+				transform: rotateY(90deg);
+				animation: b2Mp1LeftPart var(--animation) ease;
+			}
+		}
+	}
+	& > .mooving-part-2 {
+		width: 17em; height: 7em;
+    background: var(--top-accent-light);
+    box-shadow: inset 0 0 0 1em var(--top-accent-light), inset 0 0 0 1.2em var(--top-accent-dark);
+		animation: b2Mp2 var(--animation) linear;
+
+		&::before {
+			width: 60em; height: 7em;
+			background: linear-gradient(90deg, transparent 22.5%, var(--left-accent-light) 0%), conic-gradient(var(--left-accent-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-accent-dark) 180deg, var(--left-accent-dark) 270deg, transparent 270deg) 1.5em 0em/3em 3em repeat, var(--left-accent-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 17em; height: 60em;
+			background: linear-gradient(180deg, transparent 22.5%, var(--right-accent-light) 0%), conic-gradient(var(--right-accent-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-accent-dark) 180deg, var(--right-accent-dark) 270deg, transparent 270deg) 0em 0em/3em 3em repeat, var(--right-accent-light);
+			transform: translateY(7em) rotateX(-90deg);
+		}
+	}
+	& > .mooving-part-3 {
+		width: 15em; height: 7em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
+		animation: b2Mp3 var(--animation) linear;
+
+		&::before {
+			width: 15em; height: 7em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 15em; height: 60em;
+			background: linear-gradient(90deg, transparent 50%, var(--right-default-dark) 0%) 1.5em 1.7em/3.3em 2.1em repeat-x, var(--right-default-light);
+			clip-path: polygon(0em 0em, 15em 0em, 15em 60em, 14em 60em, 14em 9em, 8em 9em, 8em 60em, 0em 60em);
+			transform: translateY(7em) rotateX(-90deg);
+		}
+
+		& > div {
+			width: 15em; height: 7em;
+			background: linear-gradient(0deg, #E75776 8%, var(--right-default-dark) 8%, #771B3E 100%);
+			transform: translateX(14em) translateZ(-7em) rotateY(90deg);
+		}
+	}
+	& > .mooving-part-4 {
+		width: 8em; height: 23em;
+		background: var(--top-accent-light);
+    box-shadow: inset 0 0 0 1em var(--top-accent-light), inset 0 0 0 1.2em var(--top-accent-dark);
+		animation: b2Mp4 var(--animation) linear;
+
+		&::before {
+			width: 7em; height: 23em;
+			background: var(--left-accent-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 8em; height: 7em;
+			background: var(--right-accent-light);
+			transform: translateY(23em) rotateX(-90deg);
+		}
+
+		& > div:nth-child(1) {
+			width: 1em; height: 5em;
+			transform: translate(-1em, 2em) translateZ(-1em);
+			animation: b2Mp4TopPart var(--animation) ease;
+	
+			&::before {
+				width: 1em; height: 5em;
+				transform: translateY(5em) rotateX(-90deg);
+				animation: b2Mp4RightPart var(--animation) ease;
+			}
+			&::after {
+				width: 5em; height: 5em;
+				box-sizing: border-box;
+				transform: rotateY(90deg);
+				animation: b2Mp4LeftPart var(--animation) ease;
+			}
+		}
+		& > div:nth-child(2) {
+			width: 1em; height: 5em;
+			transform: translate(-1em, 9em) translateZ(-1em);
+			animation: b2Mp4TopPart var(--animation) ease;
+	
+			&::before {
+				width: 1em; height: 5em;
+				transform: translateY(5em) rotateX(-90deg);
+				animation: b2Mp4RightPart var(--animation) ease;
+			}
+			&::after {
+				width: 5em; height: 5em;
+				box-sizing: border-box;
+				transform: rotateY(90deg);
+				animation: b2Mp4LeftPart var(--animation) ease;
+			}
+		}
+		& > div:nth-child(3) {
+			width: 1em; height: 5em;
+			transform: translate(-1em, 16em) translateZ(-1em);
+			animation: b2Mp4TopPart var(--animation) ease;
+	
+			&::before {
+				width: 1em; height: 5em;
+				transform: translateY(5em) rotateX(-90deg);
+				animation: b2Mp4RightPart var(--animation) ease;
+			}
+			&::after {
+				width: 5em; height: 5em;
+				box-sizing: border-box;
+				transform: rotateY(90deg);
+				animation: b2Mp4LeftPart var(--animation) ease;
+			}
+		}
+	}
+	& > .mooving-part-5 {
+		width: 8em; height: 16em;
+    background: var(--top-default-light);
+    box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
+		animation: b2Mp5 var(--animation) linear;
+
+		&::before {
+			width: 44em; height: 31em;
+			clip-path: polygon(0em 0em, 0em 9em, 1em 9em, 1em 10em, 2em 10em, 2em 11em, 3em 11em, 3em 12em, 4em 12em, 4em 13em, 5em 13em, 5em 14em, 6em 14em, 6em 15em, 7em 15em, 7em 16em, 8em 16em, 8em 31em, 44em 31em, 44em 0em);
+			background: var(--right-default-light);
+			transform: translate(8em, -15em) translateZ(8em) rotateY(90deg);
+		}
+		&::after {
+			width: 44em; height: 31em;
+			clip-path: polygon(0em 0em, 0em 9em, 1em 9em, 1em 10em, 2em 10em, 2em 11em, 3em 11em, 3em 12em, 4em 12em, 4em 13em, 5em 13em, 5em 14em, 6em 14em, 6em 15em, 7em 15em, 7em 16em, 8em 16em, 8em 31em, 44em 31em, 44em 0em);
+			background: var(--left-default-light);
+			transform: translateY(-15em) translateZ(8em) rotateY(90deg);
+		}
+
+		& > div:nth-child(1) {
+			width: 8em; height: 36em;
+			background: var(--right-default-light);
+			transform: translateY(16em) rotateX(-90deg);
+	
+			&::before {
+				width: 23em; height: 9em;
+				background: var(--top-default-light);
+    		box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
+				transform: translateY(-8em) translateZ(-31em) rotateX(90deg);
+			}
+			&::after {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(-7em) translateZ(-22em) rotateX(90deg);
+			}
+		}
+		& > div:nth-child(2) {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(-5em) translateZ(6em);
+	
+			&::before {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(1em) translateZ(-1em);
+			}
+			&::after {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(2em) translateZ(-2em);
+			}
+		}
+		& > div:nth-child(3) {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(-2em) translateZ(3em);
+	
+			&::before {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(1em) translateZ(-1em);
+			}
+			&::after {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(2em) translateZ(-2em);
+			}
+		}
+		& > div:nth-child(4) {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(1em) rotateX(90deg);
+	
+			&::before {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(1em) translateZ(1em);
+			}
+			&::after {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(2em) translateZ(2em);
+			}
+		}
+		& > div:nth-child(5) {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(3em) rotateX(90deg);
+	
+			&::before {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(1em) translateZ(1em);
+			}
+			&::after {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(2em) translateZ(2em);
+			}
+		}
+		& > div:nth-child(6) {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-5em) translateZ(6em) rotateX(90deg);
+	
+			&::before {
+				width: 23em; height: 43em;
+				background: linear-gradient(90deg, #9F2F52 50%, transparent 0%) 0em 38em/4em 2.5em repeat-x, #B33E60;
+				transform: translateY(-41em) translateZ(1em);
+			}
+		}
+		& > div:nth-child(7) {
+			width: 44em; height: 9em;
+			background: var(--right-default-light);
+			transform: translate(23em, -15em) translateZ(8em) rotateY(90deg);
+		}
+		& > .cloud1 {
+			width: 8em; height: 36em;
+			transform: translate(0em, 16em) translateZ(0em) rotateX(-90deg);
+			overflow: hidden;
+
+			&::before {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-21em, 16em);
+				animation: b2Mp5Cloud1 var(--animation) linear;
+			}
+			&::after {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-12em, 17em);
+				animation: b2Mp5Cloud2 var(--animation) linear;
+			}
+		}
+		& > .cloud2 {
+			width: 36em; height: 31em;
+			transform: translate(0em, -15em) translateZ(0em) rotateY(90deg);
+			overflow: hidden;
+
+			&::before {
+				width: 60em; height: 60em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(6em, -30em);
+				animation: b2Mp5Cloud3 var(--animation) linear;
+			}
+			&::after {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(16em, 11em);
+				animation: b2Mp5Cloud4 var(--animation) linear;
+			}
+		}
+		& > .cloud3 {
+			width: 22em; height: 36em;
+			transform: translate(8em, 16em) translateZ(0em) rotateX(-90deg) rotateY(90deg);
+			overflow: hidden;
+
+			&::before {
+				width: 60em; height: 60em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-30em, 6em);
+				animation: b2Mp5Cloud5 var(--animation) linear;
+			}
+			&::after {
+				width: 70em; height: 70em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-13em, 1em);
+				animation: b2Mp5Cloud6 var(--animation) linear;
+			}
+		}
+		& > .cloud4 {
+			width: 15em; height: 44em;
+			transform: translate(8em, -6em) translateZ(8em) rotateX(-90deg);
+			overflow: hidden;
+
+			&::before {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-20em, 24em);
+				animation: b2Mp5Cloud7 var(--animation) linear;
+			}
+			&::after {
+				width: 60em; height: 60em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-15em, 14em);
+				animation: b2Mp5Cloud8 var(--animation) linear;
+			}
+		}
+		& > .cloud5 {
+			width: 9em; height: 44em;
+			transform: translate(23em, -6em) translateZ(8em) rotateX(-90deg) rotateY(90deg);
+			overflow: hidden;
+
+			&::before {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-20em, 24em);
+				animation: b2Mp5Cloud9 var(--animation) linear;
+			}
+			&::after {
+				width: 60em; height: 60em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-21em, 14em);
+				animation: b2Mp5Cloud10 var(--animation) linear;
+			}
+		}
+	}
+	& > .mooving-part-6 {
+		width: 8em; height: 32em;
+    background: var(--right-default-light);
+		transform: translate(69em, -1em) translateZ(83em) rotateX(-90deg);
+		animation: b2Mp6 var(--animation) linear;
+
+		&::before {
+			width: 8em; height: 45em;
+			clip-path: polygon(1em 0em, 1em 5em, 1em 6em, 0em 6em, 0em 6em, 1em 6em, 1em 45em, 8em 45em, 8em 0em);
+			background: linear-gradient(90deg, #FF778E 17%, #B04356 17%, #822745);
+			transform: rotateY(90deg) translate(7em, -21em) translateZ(7em);
+		}
+		&::after {
+			width: 9em; height: 40em;
+			clip-path: polygon(0em 8em, 0em 45em, 8em 45em, 8em 0em, 7em 0em, 7em 1em, 6em 1em, 6em 2em, 5em 2em, 5em 3em, 4em 3em, 4em 4em, 3em 4em, 3em 5em, 2em 5em, 2em 6em, 1em 6em, 1em 7em, 0em 7em);
+			background: var(--left-default-light);
+			transform: rotateY(90deg) translateY(-8em) translateZ(0em);
+		}
+
+		& > div:nth-child(1) {
+			width: 7em; height: 11em;
+			background: linear-gradient(14deg, var(--top-default-light) 17%, #B43D5B 50%);
+			transform: rotateX(90deg) translate(1em, -18em) translateZ(8em);
+			z-index: 1;
+	
+			&::before {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translate(-1em, 11em) translateZ(-1em);
+			}
+			&::after {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translate(-1em, 12em) translateZ(-2em);
+			}
+		}
+		& > div:nth-child(2) {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg) translateY(-5em) translateZ(5em);
+	
+			&::before {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(1em) translateZ(-1em);
+			}
+			&::after {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(2em) translateZ(-2em);
+			}
+		}
+		& > div:nth-child(3) {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg) translateY(-2em) translateZ(2em);
+	
+			&::before {
+				width: 8em; height: 1em;
+				background: var(--top-default-light);
+				transform: translateY(1em) translateZ(-1em);
+			}
+			&::after {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(-90deg) translateY(1em) translateZ(2em);
+			}
+		}
+		& > div:nth-child(4) {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-1em);
+	
+			&::before {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(-1em) translateZ(-1em);
+			}
+			&::after {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(-2em) translateZ(-2em);
+			}
+		}
+		& > div:nth-child(5) {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-5em) translateZ(-4em);
+	
+			&::before {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(-1em) translateZ(-1em);
+			}
+			&::after {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(-2em) translateZ(-2em);
+			}
+		}
+		& > div:nth-child(6) {
+			width: 7em; height: 1em;
+			background: var(--right-default-light);
+			transform: translate(1em, -8em) translateZ(-7em);
+	
+			&::before {
+				width: 23em; height: 55em;
+				clip-path: polygon(0em 5em, 0em 61em, 8em 61em, 8em 6em, 14em 6em, 14em 61em, 23em 61em, 23em 5em, 17em 5em, 11.5em 0em, 6em 5em);
+				background: linear-gradient(0deg, var(--right-default-light) 56%, transparent 56%, transparent 69%, var(--right-default-light) 69%, var(--right-default-light) 82%, transparent 82%, transparent 92%, var(--right-default-light) 0%), conic-gradient(var(--right-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-default-dark) 180deg, var(--right-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--right-default-light);
+				transform: translate(-8em, -19em) translateZ(-1em);
+			}
+			&::after {
+				width: 23em; height: 50em;
+				background: linear-gradient(0deg, var(--left-default-light) 56%, transparent 56%, transparent 69%, var(--left-default-light) 69%, var(--left-default-light) 88%, transparent 0%), conic-gradient(var(--left-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-default-dark) 180deg, var(--left-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--left-default-light);
+				transform: rotateY(-90deg) translate(-24em, -14em) translateZ(8em);
+			}
+		}
+		& > div:nth-child(7) {
+			width: 25em; height: 25em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg) translate(-8em, -32em) translateZ(0em);
+	
+			&::before {
+				width: 25em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
+			}
+			&::after {
+				width: 1em; height: 25em;
+				background: var(--left-default-light);
+				transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
+			}
+		}
+		& > div:nth-child(8) {
+			width: 25em; height: 25em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg) translate(-8em, -32em) translateZ(8em);
+	
+			&::before {
+				width: 25em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
+			}
+			&::after {
+				width: 1em; height: 25em;
+				background: var(--left-default-light);
+				transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
+			}
+		}
+		& > div:nth-child(9) {
+			width: 25em; height: 25em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg) translate(-8em, -32em) translateZ(16em);
+	
+			&::before {
+				width: 25em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
+			}
+			&::after {
+				width: 1em; height: 25em;
+				background: var(--left-default-light);
+				transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
+			}
+		}
+		& > div:nth-child(10) {
+			width: 25em; height: 25em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg) translate(-8em, -32em) translateZ(23em);
+	
+			&::before {
+				width: 25em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
+			}
+			&::after {
+				width: 1em; height: 25em;
+				background: var(--left-default-light);
+				transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
+			}
+		}
+		& > div:nth-child(11) {
+			width: 6em; height: 1em;
+			background: var(--left-default-light);
+			transform: rotateX(90deg) translateY(-9em) translateZ(23em) rotateY(-42deg);
+	
+			&::before {
+				width: 8em; height: 4em;
+				background: var(--left-default-light);
+				transform: rotateY(42deg) translate(-1em, -4em) rotateY(-42deg);
+			}
+			&::after {
+				border-left: 5.7em solid transparent;
+				border-right: 5.7em solid transparent;
+				border-top: 5.4em solid var(--right-default-light);
+				transform: rotateY(42deg) rotateX(90deg) translateX(-1em);
+			}
+		}
+		& > div:nth-child(12) {
+			width: 6em; height: 6em;
+			transform: rotateX(90deg) translate(-7em, -15em) translateZ(23em);
+
+			&::before {
+				box-sizing: border-box;
+				border-bottom: 3em solid transparent;
+				border-top: 3em solid transparent;
+				border-left: 6em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+			&::after {
+				box-sizing: border-box;
+				border-left: 3em solid transparent;
+				border-right: 3em solid transparent;
+				border-bottom: 6em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+		}
+		& > div:nth-child(13) {
+			width: 6em; height: 6em;
+			transform: rotateX(90deg) translate(-7em, -30em) translateZ(23em);
+
+			&::before {
+				box-sizing: border-box;
+				border-bottom: 3em solid transparent;
+				border-top: 3em solid transparent;
+				border-left: 6em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+			&::after {
+				box-sizing: border-box;
+				border-left: 3em solid transparent;
+				border-right: 3em solid transparent;
+				border-bottom: 6em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+		}
+		& > div:nth-child(14) {
+			width: 6em; height: 6em;
+			transform: rotateX(90deg) translate(-7em, -22.5em) translateZ(23em);
+
+			&::before {
+				box-sizing: border-box;
+				border-bottom: 3em solid transparent;
+				border-top: 3em solid transparent;
+				border-left: 6em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+			&::after {
+				box-sizing: border-box;
+				border-left: 3em solid transparent;
+				border-right: 3em solid transparent;
+				border-bottom: 6em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+		}
+		& > div:nth-child(15) {
+			width: 6em; height: 6em;
+			transform: rotateX(90deg) translate(10em, -15em) translateZ(23em);
+
+			&::before {
+				box-sizing: border-box;
+				border-bottom: 3em solid transparent;
+				border-top: 3em solid transparent;
+				border-left: 6em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+			&::after {
+				box-sizing: border-box;
+				border-left: 3em solid transparent;
+				border-right: 3em solid transparent;
+				border-bottom: 6em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+		}
+		& > div:nth-child(16) {
+			width: 6em; height: 6em;
+			transform: rotateX(90deg) translate(10em, -30em) translateZ(23em);
+
+			&::before {
+				box-sizing: border-box;
+				border-bottom: 3em solid transparent;
+				border-top: 3em solid transparent;
+				border-left: 6em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+			&::after {
+				box-sizing: border-box;
+				border-left: 3em solid transparent;
+				border-right: 3em solid transparent;
+				border-bottom: 6em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+		}
+		& > div:nth-child(17) {
+			width: 6em; height: 6em;
+			transform: rotateX(90deg) translate(10em, -22.5em) translateZ(23em);
+
+			&::before {
+				box-sizing: border-box;
+				border-bottom: 3em solid transparent;
+				border-top: 3em solid transparent;
+				border-left: 6em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+			&::after {
+				box-sizing: border-box;
+				border-left: 3em solid transparent;
+				border-right: 3em solid transparent;
+				border-bottom: 6em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+		}
+		& > div:nth-child(18) {
+			width: 14em; height: 14em;
+			transform: rotateX(90deg) translate(-2.5em, -27em) translateZ(23em);
+
+			&::before {
+				box-sizing: border-box;
+				border-bottom: 7em solid transparent;
+				border-top: 7em solid transparent;
+				border-left: 14em solid var(--top-accent-light);
+				transform: rotateY(-60deg);
+			}
+			&::after {
+				box-sizing: border-box;
+				border-left: 7em solid transparent;
+				border-right: 7em solid transparent;
+				border-bottom: 14em solid var(--top-accent-dark);
+				transform-origin: bottom center;
+				transform: rotateX(-60deg);
+			}
+		}
+		& > .cloud1 {
+			width: 8em; height: 32em;
+			overflow: hidden;
+
+			&::before {
+				width: 30em; height: 30em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-50%, 8em);
+				animation: b2Mp6Cloud1 var(--animation) linear;
+			}
+			&::after {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-11em, 3em);
+				animation: b2Mp6Cloud2 var(--animation) linear;
+			}
+		}
+		& > .cloud2 {
+			width: 9em; height: 40em;
+			clip-path: polygon(0em 8em, 0em 45em, 8em 45em, 8em 0em, 7em 0em, 7em 1em, 6em 1em, 6em 2em, 5em 2em, 5em 3em, 4em 3em, 4em 4em, 3em 4em, 3em 5em, 2em 5em, 2em 6em, 1em 6em, 1em 7em, 0em 7em);
+			transform: rotateY(90deg) translateY(-8em);
+			overflow: hidden;
+		
+			&::before {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-50%, 9em);
+				animation: b2Mp6Cloud3 var(--animation) linear;
+			}
+		}
+		& > .cloud3 {
+			width: 23em; height: 55em;
+			clip-path: polygon(0em 5em, 0em 61em, 8em 61em, 8em 6em, 14em 6em, 14em 61em, 23em 61em, 23em 5em, 17em 5em, 11.5em 0em, 6em 5em);
+			transform: translate(-7em, -25em) translateZ(-8em);
+			overflow: hidden;
+
+			&::before {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-50%, 25em);
+				animation: b2Mp6Cloud4 var(--animation) linear;
+			}
+		}
+		& > .cloud4 {
+			width: 23em; height: 50em;
+			transform: rotateY(-90deg) translate(-31em, -22em) translateZ(7em);
+			overflow: hidden;
+			
+			&::before {
+				width: 50em; height: 50em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-1em, 18em);
+				animation: b2Mp6Cloud5 var(--animation) linear;
+			}
+			&::after {
+				width: 40em; height: 40em;
+				background: radial-gradient(#3d2f36, transparent 73%);
+				transform-origin: center center;
+				transform: translate(-20em, 18em);
+				animation: b2Mp6Cloud6 var(--animation) linear;
+			}
+		}
+	}
+	& > .mooving-bridge {
+		width: 56em; height: 8em;
+		transform: translate(46em, 67em) translateZ(31em);
+		
+		&::before {
+			width: 8em; height: 9.8em;
+			background: var(--top-default-dark);
+			transform: rotateX(-37deg);
+		}
+
+		& > .mooving-bridge-cloud {
+			transform: translateX(25em);
+
+			&::before {
+				width: 23em; height: 30em;
+				background: var(--left-default-light);
+				border-radius: 50%;
+				filter: blur(6em);
+				animation: BridgeCloud1 var(--animation);
+			}
+			&::after {
+				width: 40em; height: 40em;
+				background: var(--left-default-light);
+				border-radius: 50%;
+				filter: blur(6em);
+				animation: BridgeCloud4 var(--animation);
+			}
+
+			& > div:nth-child(1) {
+				&::before {
+					width: 30em; height: 30em;
+					background: var(--left-default-light);
+					border-radius: 50%;
+					filter: blur(16px);
+					animation: BridgeCloud2 var(--animation);
+				}
+				&::after {
+					width: 70em; height: 70em;
+					background: var(--left-default-light);
+					border-radius: 50%;
+					filter: blur(50px);
+					opacity: 0.6;
+					animation: BridgeCloud3 var(--animation);
+				}
+			}
+		}
+		& > .mooving-bridge-part1 {
+			width: 13em; height: 8em;
+			background: var(--top-default-light);
+			box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 1.5em 0em var(--top-default-light), inset 1.7em 0 var(--top-default-dark), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+			animation: Bridge1 var(--animation);
+	
+			&::before {
+				width: 13em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(-90deg);
+			}
+			&::after {
+				width: 13em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateX(-90deg) translateZ(8em);
+			}
+			
+			& > div:nth-child(1) {
+				width: 13em; height: 8em;
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 1.5em 0em var(--top-default-light), inset 1.7em 0 var(--top-default-dark), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: translateZ(-1em);
+		
+				&::before {
+					width: 1em; height: 8em;
+					background: var(--left-default-light);
+					transform: rotateY(-90deg);
+				}
+				&::after {
+					width: 1em; height: 8em;
+					background: var(--left-default-light);
+					transform: rotateY(-90deg) translateZ(-13em);
+				}
+			}
+		}
+		& > .mooving-bridge-part2 {
+			width: 8em; height: 6em;
+			background: var(--right-default-light);
+			animation: Bridge2 var(--animation);
+	
+			&::before {
+				border-top: 6em solid var(--left-default-light);
+				border-right: 8em solid transparent;
+				transform: rotateY(90deg);
+			}
+			&::after {
+				border-top: 6em solid var(--left-default-light);
+				border-right: 8em solid transparent;
+				transform: rotateY(90deg) translateZ(7em);
+			}
+
+			& > div:nth-child(1) {
+				width: 8em; height: 8em;
+				background: var(--top-default-light);
+				transform: rotateX(-90deg);
+		
+				&::before {
+					width: 8em; height: 8em;
+					background: var(--top-default-light);
+					transform: rotateX(-37deg) scaleY(1.26);
+					transform-origin: bottom center;
+				}
+			}
+		}
+		& > .mooving-bridge-part3 {
+			width: 13em; height: 1em;
+			background: var(--right-default-light);
+			animation: Bridge3 var(--animation);
+	
+			&::before {
+				width: 12em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateZ(8em);
+			}
+			&::after {
+				width: 13em; height: 8em;
+				clip-path: polygon(0em 0em, 13em 0em, 11em 2em, 12em 3em, 9em 6em, 12em 8em, 0em 8em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg);
+			}
+
+			& > div:nth-child(1) {
+				width: 3.5em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateX(8.5em) translateZ(8em) rotateY(-34deg);
+				transform-origin: right center;
+		
+				&::before {
+					width: 4.3em; height: 1em;
+					background: var(--left-default-light);
+					transform: rotateY(81deg);
+				}
+				&::after {
+					width: 2em; height: 1em;
+					background: var(--right-default-light);
+					transform: translateX(0.7em) translateZ(-4.1em) rotateY(170deg);
+				}
+			}
+			& > div:nth-child(2) {
+				width: 8em; height: 1em;
+				background: var(--left-default-light);
+				transform: rotateY(-90deg);
+		
+				&::before {
+					width: 13em; height: 8em;
+					clip-path: polygon(0em 0em, 13em 0em, 11em 2em, 12em 3em, 9em 6em, 12em 8em, 0em 8em);
+					background: var(--top-default-light);
+					box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+					transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg) translateZ(-1em);
+				}
+				&::after {
+					width: 4em; height: 1em;
+					background: var(--left-default-light);
+					transform: translateZ(-13em) rotateY(-47deg);
+				}
+			}
+		}
+		& > .mooving-bridge-part4 {
+			width: 6em; height: 1em;
+			background: var(--right-default-light);
+			animation: Bridge4 var(--animation);
+	
+			&::before {
+				width: 13em; height: 8em;
+				clip-path: polygon(4em 0em, 2em 2em, 3em 3em, 0em 6em, 3em 8em, 13em 8em, 10em 0em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg) translateX(-4em);
+			}
+			&::after {
+				width: 13em; height: 8em;
+				clip-path: polygon(4em 0em, 2em 2em, 3em 3em, 0em 6em, 3em 8em, 13em 8em, 10em 0em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg) translateX(-4em) translateZ(-1em);
+			}
+
+			& > div:nth-child(1) {
+				width: 3em; height: 1em;
+				background: var(--right-default-light);
+				transform: rotateY(-135deg);
+		
+				&::before {
+					width: 3em; height: 1em;
+					background: var(--left-default-light);
+					transform: translateX(3em) rotateY(96deg);
+				}
+				&::after {
+					width: 4em; height: 1em;
+					background: var(--right-default-light);
+					transform: translateX(3em) translateZ(-1.3em) rotateY(2deg);
+				}
+			}
+			& > div:nth-child(2) {
+				width: 10em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateX(-1em) translateZ(8em);
+		
+				&::before {
+					width: 3.6em; height: 1em;
+					background: var(--left-default-light);
+					transform: rotateY(147deg);
+				}
+				&::after {
+					width: 8.4em; height: 1em;
+					background: var(--left-default-light);
+					transform: translateX(10em) rotateY(111deg);
+				}
+			}
+		}
+		& > .mooving-bridge-part5 {
+			width: 16em; height: 1em;
+			background: var(--right-default-light);
+			animation: Bridge5 var(--animation);
+	
+			&::before {
+				width: 16em; height: 8em;
+				clip-path: polygon(0em 0em, 3em 8em, 13em 8em, 15em 5em, 14em 3em, 16em 0em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg);
+			}
+			&::after {
+				width: 16em; height: 8em;
+				clip-path: polygon(0em 0em, 3em 8em, 13em 8em, 15em 5em, 14em 3em, 16em 0em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg) translateZ(-1em);
+			}
+
+			& > div:nth-child(1) {
+				width: 8.4em; height: 1em;
+				background: var(--left-default-light);
+				transform: rotateY(-70deg);
+		
+				&::before {
+					width: 4em; height: 1em;
+					background: var(--left-default-light);
+					transform: translateX(5.5em) translateZ(-15em) rotateY(-54deg);
+				}
+				&::after {
+					width: 2.9em; height: 1em;
+					background: var(--right-default-light);
+					transform: translateX(7em) translateZ(-12em) rotateY(6deg);
+				}
+			}
+			& > div:nth-child(2) {
+				width: 10.2em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateX(13em) translateZ(8em) rotateY(180deg);
+		
+				&::before {
+					width: 3.2em; height: 1em;
+					background: var(--left-default-light);
+					transform: rotateY(-123deg);
+				}
+			}
+		}
+		& > .mooving-bridge-part6 {
+			width: 6em; height: 1em;
+			background: var(--right-default-light);
+			animation: Bridge6 var(--animation);
+	
+			&::before {
+				width: 11em; height: 8em;
+				clip-path: polygon(3em 0em, 1em 3em, 2em 5em, 0em 8em, 11em 8em, 10em 6em, 10em 4em, 8em 2em, 9em 0em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset -1.5em 0em var(--top-default-light), inset -1.7em 0 var(--top-default-dark), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg) translateX(-3em);
+			}
+			&::after {
+				width: 11em; height: 8em;
+				clip-path: polygon(3em 0em, 1em 3em, 2em 5em, 0em 8em, 11em 8em, 10em 6em, 10em 4em, 8em 2em, 9em 0em);
+				background: var(--top-default-light);
+				box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
+				transform: rotateX(90deg) translateX(-3em) translateZ(-1em);
+			}
+
+			& > div:nth-child(1) {
+				width: 3.7em; height: 1em;
+				background: var(--left-default-light);
+				transform: rotateY(-124deg);
+		
+				&::before {
+					width: 100%; height: 1em;
+					background: var(--right-default-light);
+					transform: rotateY(-121deg);
+					transform-origin: right center;
+				}
+				&::after {
+					width: 7em; height: 1em;
+					background: var(--left-default-light);
+					transform: rotateY(-121deg) translate(-6em, -6em) rotateY(-57deg);
+				}
+			}
+			& > div:nth-child(2) {
+				width: 11em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateX(-3em) translateZ(8em);
+		
+				&::before {
+					width: 3em; height: 1em;
+					background: var(--left-default-light);
+					transform: translateX(11em) rotateY(118deg);
+				}
+				&::after {
+					width: 2em; height: 1em;
+					background: var(--right-default-light);
+					transform: translateX(10em) translateZ(-2em) rotateY(89deg);
+				}
+			}
+			& > div:nth-child(3) {
+				width: 2.4em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateX(6em) rotateY(-117deg);
+		
+				&::before {
+					width: 2.9em; height: 1em;
+					background: var(--left-default-light);
+					transform: translateX(2.4em) rotateY(75deg);
+				}
+			}
+		}
+	}
+	& > .rocks {
+		&::before {
+			width: 10em; height: 16em;
+			background: #3D2E36;
+			transform: translateZ(-12em) rotateX(-26deg) rotateY(-180deg);
+		}
+		&::after {
+			width: 32em; height: 51em;
+			background: linear-gradient(102deg, #3D2E36 76%, transparent 0%);
+			transform: translate(-9em, 15em) translateZ(-27em) rotateX(0deg) rotateY(-41deg) rotateZ(0deg);
+		}
+
+		& > div:nth-child(1) {
+			width: 22em; height: 14em;
+			background: #3D2E36;
+			transform: translate(23em, 55em) translateZ(-17em) rotateY(-47deg);
+
+			&::before {
+				width: 22em; height: 20em;
+				background: linear-gradient(109deg, #3D2E36 76%, transparent 0%);
+				transform: translate(8em, 5em) translateZ(-5em) rotateY(-4deg);
+			}
+			&::after {
+				width: 20em; height: 23em;
+				background: linear-gradient(100deg, #3D2E36, #3D2E36) 0em 0em/12em 23em no-repeat, linear-gradient(15deg, #3D2E36 43%, transparent 0%) 11em -5em/11em 11em no-repeat, linear-gradient(100deg, #3D2E36 79%, transparent 0%) 9em 6em/11em 17em no-repeat;
+				transform: translate(-17em, -15em) translateZ(10em) rotateY(13deg);
+			}
+		}
+		& > div:nth-child(2) {
+			width: 26em; height: 78em;
+			background: #3D2E36;
+			border-radius: 0 0 26em 0 / 0 0 5em 0;
+			transform-origin: right top;
+			transform: translate(83em, -115em) translateZ(10em) rotateX(38deg) rotateY(-90deg);
+
+			&::before {
+				width: 60em; height: 21em;
+				background: #3D2E36;
+				border-radius: 0 0 3em 0;
+				transform-origin: top right;
+				transform: translate(-43em, 67em) skewY(-46deg) rotateZ(21deg);
+			}
+			&::after {
+				width: 30em; height: 37em;
+				background: linear-gradient(98deg, #3D2E36 82%, transparent 0%) 0em 18em / 29em 19em no-repeat, linear-gradient(110deg, #3D2E36 90%, transparent 0%) 0em 14em / 29em 4em no-repeat, linear-gradient(93deg, #3D2E36 95%, transparent 0%) 0em 0em / 29em 14em no-repeat;
+				transform-origin: top right;
+				transform: translate(-49em, 137em) translateZ(20em) rotateZ(52deg);
+			}
+		}
+		& > div:nth-child(3) {
+			width: 46em; height: 21em;
+			background: #3D2E36;
+			transform-origin: top left;
+			transform: translate(39em, 1em) translateZ(59em) rotateX(-23deg);
+
+			&::before {
+				width: 38em; height: 20em;
+				background: #3D2E36;
+				transform-origin: top center;
+				transform: translate(10em, 21em) rotateX(-29deg);
+			}
+			&::after {
+				width: 25em; height: 20em;
+				background: #3D2E36;
+				transform: translate(20em, -18em);
+			}
+		}
+		& > div:nth-child(4) {
+			width: 26em; height: 83em;
+			background: #3D2E36;
+			transform-origin: top left;
+			transform: translate(109em, 35em) translateZ(24em) rotateX(-26deg) rotateY(90deg);
+
+			&::before {
+				width: 75em; height: 8em;
+				background: #3D2E36;
+				transform: translate(19.7em, 59.4em) translateZ(-13em) rotateY(90deg) rotateX(48deg);
+			}
+			&::after {
+				width: 30em; height: 32em;
+				background: #3D2E36;
+				transform: translate(-9em, -7em) translateZ(-51em) rotateX(90deg) rotateY(49deg);
+			}
+		}
+		& > div:nth-child(5) {
+			width: 52em; height: 90em;
+			background: linear-gradient(136deg, #3d2e36 36%, transparent 0%);
+			transform-origin: top right;
+			transform: translate(50em, 66em) translateZ(13em) rotateY(-90deg);
+
+			&::before {
+				width: 14em; height: 76em;
+				background: #3d2e36;
+				transform: translate(32em, 8em) translateZ(6em) rotateX(90deg) rotateY(155deg);
+			}
+			&::after {
+				width: 30em; height: 43em;
+				background: #3d2f36;
+				transform: translate(51em, -13em) translateZ(48em) rotateX(-90deg) rotateY(-132deg);
+			}
+		}
+		& > div:nth-child(6) {
+			width: 90em; height: 8em;
+			background: #3d2e36;
+			transform: translate(21em, 82.3em) translateZ(-27em) rotateX(-38deg);
+
+			&::before {
+				width: 90em; height: 12em;
+				background: #3d2e36;
+				transform: translateY(8em) rotateX(-26deg);
+			}
+			&::after {
+				width: 54em; height: 54em;
+				background: #3d2e36;
+				border-radius: 0 5em 0 0 / 0 15em 0 0;
+				transform: translate(79em, -16em) translateZ(-4em) rotateX(-42deg) rotateY(-90deg) skewX(15deg);
+			}
+		}
+		& > div:nth-child(7) {
+			width: 90em; height: 8em;
+			background: #3d2e36;
+			transform: translate(21em, 94em) translateZ(-42em) rotateX(-49deg);
+
+			&::before {
+				width: 90em; height: 10em;
+				background: #3d2e36;
+				transform: translateY(8em) rotateX(-15deg);
+			}
+			&::after {
+				width: 90em; height: 20em;
+				background: #3d2e36;
+				transform: translateY(17.5em) translateZ(-2.6em) rotateX(-21deg);
+			}
+		}
+		& > div:nth-child(8) {
+			width: 97em; height: 11em;
+			background: #3d2e36;
+			transform: translate(21em, 109em) translateZ(-72em) rotateX(-49deg);
+
+			&::before {
+				width: 120em; height: 40em;
+				background: #3d2e36;
+				transform: translate(-13em, 11em) rotateX(20deg);
+			}
+			&::after {
+				width: 75em; height: 22em;
+				background: #3d2e36;
+				transform: translateY(-38em) translateZ(9em) rotateX(-96deg) rotateY(-90deg);
+			}
+		}
+		& > div:nth-child(9) {
+			width: 20em; height: 20em;
+			background: #3d2e36;
+			transform: translate(-11em, 124em) translateZ(-85em) rotateX(-30deg);
+
+			&::before {
+				width: 29em; height: 60em;
+				background: linear-gradient(-20deg, #3d2e36 84%, transparent 0%);
+				transform: translate(114em, 39em) translateZ(20em) rotateX(-30deg);
+			}
+			&::after {
+				width: 8em; height: 20em;
+				background: #3d2e36;
+				transform: translate(88em, 76em) translateZ(36em) rotateX(-30deg);
+			}
+		}
+		& > div:nth-child(10) {
+			width: 20em; height: 40em;
+			background: linear-gradient(-104deg, #3d2e36 66%, transparent 0%);
+			transform: translate(77em, 194em) translateZ(-86em) rotateY(150deg);
+
+			&::before {
+				width: 40em; height: 29em;
+				background: linear-gradient(-119deg, #3d2e36 70%, transparent 0%);
+				transform: translate(63em, -5em) translateZ(-27em) rotateY(-57deg);
+			}
+			&::after {
+				width: 41em; height: 26em;
+				background: #3d2e36;
+				transform: translate(68em, -20em) translateZ(-21em) rotateX(80deg);
+			}
+		}
+		& > div:nth-child(11) {
+			width: 20em; height: 21em;
+			background: linear-gradient(-48deg, #3d2e36 40%, transparent 0%), linear-gradient(-125deg, #3d2e36 40%, transparent 0%);
+			transform: translateY(179em) translateZ(-100em) rotateY(100deg);
+
+			&::before {
+				width: 14em; height: 20em;
+				background: linear-gradient(-32deg, #3d2e36 83%, transparent 0%);
+				transform: translate(3.7em, 20em) translateZ(-3em) rotateX(97deg) rotateY(18deg);
+			}
+		}
+	}
+}
+.building-3 {
+	width: 18em; height: 18em;
+	background: var(--top-default-light);
+	transform: translate(115em, 151em) translateZ(-16em) rotateX(0deg);
+	transform-style: preserve-3d;
+
+	animation: thirdBuilding var(--animation);
+
+	--left-default-light: #953552;
+	--left-default-dark: #88213D;
+	--left-accent-light: #7B2237;
+	--left-accent-dark: #701329;
+	
+	--top-default-light: #D25A6C;
+	--top-default-dark: #BF394D;
+	--top-accent-light: #B25B78;
+	--top-accent-dark: #9E4662;
+	
+	--right-default-light: #722C41;
+	--right-default-dark: #681A33;
+	--right-accent-light: #4C1325;
+	--right-accent-dark: #320716;
+	
+	--right-window-inner: #300829;
+	--right-window-v: #56203E;
+	--right-window-h: #6A2B46;
+
+	&::before {
+		width: 1em; height: 18em;
+    background: var(--left-default-light);
+    transform: rotateY(90deg);
+	}
+	&::after {
+		width: 18em; height: 1em;
+    background: var(--right-default-light);
+    transform: translateY(18em) rotateX(-90deg);
+	}
+
+	& > div:nth-child(1) {
+		width: 18em; height: 18em;
+    background: var(--top-default-light);
+    transform: translateZ(2em);
+
+		&::before {
+			width: 1em; height: 18em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 18em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(18em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(2) {
+		width: 16em; height: 16em;
+    background: var(--top-default-light);
+    transform: translate(1em, 1em) translateZ(3em);
+
+		&::before {
+			width: 50em; height: 16em;
+			clip-path: polygon(0em 0em, 0em 2em, 2em 2em, 2em 5em, 0em 5em, 0em 11em, 2em 11em, 2em 14em, 0em 14em, 0em 16em, 50em 16em, 50em 0em);
+			background: var(--left-default-light);
+			transform: translateZ(2em) rotateY(90deg);
+		}
+		&::after {
+			width: 140em; height: 16em;
+			clip-path: polygon(0em 0em, 0em 2em, 2em 2em, 2em 5em, 0em 5em, 0em 11em, 2em 11em, 2em 14em, 0em 14em, 0em 16em, 140em 16em, 140em 0em);
+			background: var(--right-default-light);
+			transform: translateY(16em) translateZ(2em) rotateY(90deg) rotateX(90deg);
+		}
+	}
+	& > div:nth-child(3) {
+		width: 1em; height: 2em;
+    background: var(--right-default-light);
+    box-shadow: 15em 0em var(--right-default-light);
+    transform: translate(1em, 3em) translateZ(5em) rotateX(-90deg);
+
+		&::before {
+			width: 1em; height: 2em;
+			background: var(--right-default-light);
+			box-shadow: 15em 0em var(--right-default-light);
+			transform: translateZ(9em);
+		}
+		&::after {
+			width: 1em; height: 1em;
+			background: var(--top-default-light);
+			box-shadow: 0em 1em var(--top-default-light), 0em 5em var(--top-default-light), 0em 6em var(--top-default-light), 0em 7em var(--top-default-light), 0em 8em var(--top-default-light), 0em 9em var(--top-default-light), 0em 10em var(--top-default-light), 0em 14em var(--top-default-light), 0em 15em var(--top-default-light), 15em 1em var(--top-default-light), 15em 5em var(--top-default-light), 15em 6em var(--top-default-light), 15em 7em var(--top-default-light), 15em 8em var(--top-default-light), 15em 9em var(--top-default-light), 15em 10em var(--top-default-light), 15em 14em var(--top-default-light), 15em 15em var(--top-default-light), 1em 0em var(--top-default-light), 5em 0em var(--top-default-light), 6em 0em var(--top-default-light), 7em 0em var(--top-default-light), 8em 0em var(--top-default-light), 9em 0em var(--top-default-light), 10em 0em var(--top-default-light), 14em 0em var(--top-default-light), 15em 0em var(--top-default-light), 1em 15em var(--top-default-light), 5em 15em var(--top-default-light), 6em 15em var(--top-default-light), 7em 15em var(--top-default-light), 8em 15em var(--top-default-light), 9em 15em var(--top-default-light), 10em 15em var(--top-default-light), 14em 15em var(--top-default-light);
+			transform: translateZ(-2em) rotateX(90deg);
+		}
+	}
+	& > div:nth-child(4) {
+		width: 2em; height: 1em;
+    background: var(--left-default-light);
+    box-shadow: 0em 15em var(--left-default-light);
+    transform: translate(6em, 1em) translateZ(5em) rotateY(90deg);
+
+		&::before {
+			width: 3em; height: 16em;
+			clip-path: polygon(0em 0em, 0em 16em, 3em 16em, 3em 14em, 1em 14em, 1em 11em, 3em 11em, 3em 5em, 1em 5em, 1em 2em, 3em 2em, 3em 0em);
+			background: var(--left-default-light);
+			transform: translateX(3em) translateZ(10em) rotateY(-180deg);
+		}
+		&::after {
+			width: 3em; height: 16em;
+			clip-path: polygon(0em 0em, 0em 16em, 3em 16em, 3em 14em, 1em 14em, 1em 11em, 3em 11em, 3em 5em, 1em 5em, 1em 2em, 3em 2em, 3em 0em);
+			background: var(--right-default-light);
+			transform: translate(3em, 1em) translateZ(-5em) rotateX(90deg) rotateY(180deg);
+		}
+	}
+	& > div:nth-child(5) {
+		width: 2em; height: 1em;
+    background: var(--left-default-light);
+    box-shadow: 0em 15em var(--left-default-light);
+		transform: translate(15em, 1em) translateZ(5em) rotateY(90deg);
+
+		&::before {
+			width: 7em; height: 10em;
+			clip-path: polygon(0em 0em, 7em 0em, 7em 4em, 4em 4em, 4em 6em, 7em 6em, 7em 10em, 0em 10em);
+			background: var(--left-default-light);
+			transform: translate(-5em, 3em) translateZ(-11em);
+		}
+		&::after {
+			width: 7em; height: 10em;
+			clip-path: polygon(0em 0em, 7em 0em, 7em 4em, 4em 4em, 4em 6em, 7em 6em, 7em 10em, 0em 10em);
+			background: var(--right-default-light);
+			transform: translate(-5em, 13em) translateZ(-11em) rotateX(90deg);
+		}
+	}
+	& > div:nth-child(6) {
+		width: 10em; height: 10em;
+    background: var(--top-default-light);
+    transform: translate(4em, 4em) translateZ(10em);
+
+		&::before {
+			border-left: 4em solid transparent;
+			border-right: 4em solid transparent;
+			border-top: 7em solid var(--right-accent-light);
+			transform: translate(1em, 9em) rotateX(128deg);
+		}
+		&::after {
+			border-bottom: 4em solid transparent;
+			border-top: 4em solid transparent;
+			border-left: 7em solid var(--left-accent-light);
+			transform: translate(1em, 1em) rotateY(-58deg);
+		}
+	}
+	& > div:nth-child(7) {
+		width: 3em; height: 3em;
+    background: var(--right-default-dark);
+    transform: translate(4em, 8em) translateZ(3em) rotateX(90deg);
+
+		&::before {
+			width: 2em; height: 3em;
+			background: var(--left-default-dark);
+			transform: translateX(6em) translateZ(-4em) rotateY(90deg);
+		}
+		&::after {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-top: 3px solid var(--right-window-h);
+			border-radius: 0 0 2em 2em;
+			transform: translate(-1em, -12em) translateZ(-10em);
+		}
+	}
+	& > div:nth-child(8) {
+		width: 1em; height: 2em;
+    background: var(--top-default-light);
+    box-shadow: 0 5em var(--top-default-light), 0 7em var(--top-default-light), 0 12em var(--top-default-light), 0 14em var(--top-default-light), 0 19em var(--top-default-light), 0 21em var(--top-default-light), 0 26em var(--top-default-light);
+    transform: translate(-21em, 6em) translateZ(-27em);
+
+		&::before {
+			width: 8em; height: 36em;
+			background: var(--top-default-light);
+			transform: translateY(-8em) translateZ(-1em);
+		}
+		&::after {
+			width: 20em; height: 36em;
+			clip-path: polygon(0em 8em, 1em 8em, 1em 0em, 20em 0em, 20em 17em, 11em 17em, 11em 28em, 20em 28em, 20em 36em, 0em 36em, 0em 34em, 1em 34em, 1em 31em, 0em 31em, 0em 27em, 1em 27em, 1em 24em, 0em 24em, 0em 20em, 1em 20em, 1em 17em, 0em 17em, 0em 13em, 1em 13em, 1em 10em, 0em 10em);
+			background: var(--left-default-light);
+			transform: translateY(-8em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(9) {
+		width: 1em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(-21em, 8em) translateZ(-27em) rotateX(-90deg);
+
+		&::before {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateZ(7em);
+		}
+		&::after {
+			width: 49em; height: 60em;
+			clip-path: polygon(0em 60em, 0em 9em, 4em 9em, 4em 10em, 7em 10em, 7em 9em, 12em 9em, 12em 10em, 15em 10em, 15em 9em, 20em 9em, 20em 10em, 23em 10em, 23em 9em, 28em 9em, 28em 10em, 31em 10em, 31em 9em, 36em 9em, 36em 10em, 39em 10em, 39em 9em, 41em 9em, 41em 0em, 43em 0em, 43em 1em, 47em 1em, 47em 0em, 49em 0em, 49em 60em);
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1em 13em/3em 2em repeat-x, var(--right-default-light);
+			transform: translateX(-41em) translateZ(26em);
+		}
+	}
+	& > div:nth-child(10) {
+		width: 2em; height: 1em;
+    background: var(--top-default-light);
+    box-shadow: 6em 0 var(--top-default-light);
+    transform: translate(-21em, 33em) translateZ(-27em);
+
+		&::before {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-11em) rotateX(-90deg);
+		}
+		&::after {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-4em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(11) {
+		width: 1em; height: 1em;
+    background: var(--top-default-light);
+		box-shadow: -31em -36em var(--top-default-light), -32em -36em var(--top-default-light), -36em -36em var(--top-default-light), -37em -36em var(--top-default-light), -38em -36em var(--top-default-light), -39em -33em var(--top-default-light), -39em -32em var(--top-default-light), -39em -31em var(--top-default-light), -39em -30em var(--top-default-light), -39em -29em var(--top-default-light), -39em -25em var(--top-default-light), -39em -24em var(--top-default-light), -39em -23em var(--top-default-light), -39em -22em var(--top-default-light), -39em -21em var(--top-default-light), -39em -17em var(--top-default-light), -39em -16em var(--top-default-light), -39em -15em var(--top-default-light), -39em -14em var(--top-default-light), -39em -13em var(--top-default-light), -39em -9em var(--top-default-light), -39em -8em var(--top-default-light), -39em -7em var(--top-default-light), -39em -6em var(--top-default-light), -39em -5em var(--top-default-light), -39em -1em var(--top-default-light), -38em 0 var(--top-default-light), -36em 0 var(--top-default-light), -30em 0 var(--top-default-light), -28em 0 var(--top-default-light), -22em 0 var(--top-default-light), -20em 0 var(--top-default-light), -14em 0 var(--top-default-light), -12em 0 var(--top-default-light), -6em 0 var(--top-default-light), -4em 0 var(--top-default-light), 1em 0 var(--top-default-light), -5em 0 var(--top-default-light), -7em 0 var(--top-default-light), -8em 0 var(--top-default-light), -13em 0 var(--top-default-light), -15em 0 var(--top-default-light), -16em 0 var(--top-default-light), -21em 0 var(--top-default-light), -23em 0 var(--top-default-light), -24em 0 var(--top-default-light), -29em 0 var(--top-default-light), -31em 0 var(--top-default-light), -32em 0 var(--top-default-light), -37em 0 var(--top-default-light), -39em 0 var(--top-default-light);
+    transform: translate(-23em, 33em) translateZ(-36em);
+
+		&::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 10em; height: 60em;
+			background: var(--right-default-light);
+			transform: translate(8em, -5em) translateZ(8em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(12) {
+		width: 1em; height: 1em;
+    background: var(--left-default-light);
+    transform: translate(-31em, 33em) translateZ(-36em) rotateY(90deg);
+
+		&::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateZ(-8em);
+		}
+		&::after {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateZ(-16em);
+		}
+	}
+	& > div:nth-child(13) {
+		width: 1em; height: 1em;
+    background: var(--left-default-light);
+    transform: translate(-55em, 33em) translateZ(-36em) rotateY(90deg);
+
+		&::before {
+			width: 48em; height: 57em;
+			clip-path: polygon(0em 0em, 0em 57em, 8em 57em, 8em 44em, 47em 44em, 47em 43em, 8em 43em, 8em 8em, 16em 8em, 16em 0em);
+			background: var(--top-default-light);
+			transform: translate(1em, -43em) translateZ(-14em) rotateY(-90deg);
+		}
+		&::after {
+			width: 9em; height: 13em;
+			background: var(--right-default-dark);
+			transform: translate(2em, -18em) translateZ(34em) rotateX(90deg);
+		}
+	}
+	& > div:nth-child(14) {
+		width: 2em; height: 7em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+    border-right: 3px solid var(--right-window-v);
+    border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+    transform: translate(-32em, 34em) translateZ(-50em) rotateX(-90deg);
+
+		&::before {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translateX(16em);
+		}
+		&::after {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			transform: translate(-30em, -14em) translateZ(-5em);
+		}
+	}
+	& > div:nth-child(15) {
+		width: 1em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(-62em, 21em) translateZ(-36em) rotateX(-90deg);
+
+		&::before {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateZ(-8em);
+		}
+		&::after {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateZ(-16em);
+		}
+	}
+	& > div:nth-child(16) {
+		width: 1em; height: 2em;
+    background: var(--left-default-light);
+    box-shadow: 0 32em var(--left-default-light), 0 27em var(--left-default-light), 0 26em var(--left-default-light), 0 24em var(--left-default-light), 0 19em var(--left-default-light), 0 18em var(--left-default-light), 0 16em var(--left-default-light), 0 9em var(--left-default-light), 0 11em var(--left-default-light), 0 8em var(--left-default-light), 0 2em var(--left-default-light), 0 3em var(--left-default-light);
+    transform: translateX(-62em) translateZ(-36em) rotateY(90deg);
+
+		&::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateY(-3em) translateZ(1em);
+		}
+		&::after {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateY(-3em) translateZ(7em);
+		}
+	}
+	& > div:nth-child(17) {
+		width: 1em; height: 8em;
+    background: var(--top-default-light);
+    transform: translate(-70em, 39em) translateZ(-38em);
+
+		&::before {
+			width: 8em; height: 10em;
+			clip-path: polygon(0em 0em, 2em 0em, 2em 1em, 6em 1em, 6em 0em, 8em 0em, 8em 10em, 0em 10em);
+			background: var(--right-default-light);
+			transform: translate(9em, -41em) translateZ(2em) rotateX(-90deg);
+		}
+		&::after {
+			width: 1em; height: 8em;
+			background: var(--top-default-light);
+			transform: translateX(-1em) translateZ(-1em);
+		}
+	}
+	& > div:nth-child(18) {
+		width: 1em; height: 8em;
+    background: var(--top-default-light);
+    transform: translate(-72em, 39em) translateZ(-40em);
+
+		&::before {
+			width: 59em; height: 81em;
+			clip-path: polygon(0em 0em, 0em 57em, 0.1em 58.8em, 0.5em 61em, 1.2em 63.1em, 2.5em 65.6em, 4.1em 67.7em, 5.9em 69.4em, 8.2em 71em, 9.9em 71.8em, 11.3em 72.3em, 12.9em 72.7em, 14.2em 72.9em, 16em 73em, 28em 73em, 28em 74em, 29em 74em, 29em 75em, 30em 75em, 30em 76em, 31em 76em, 31em 77em, 32em 77em, 32em 78em, 33em 78em, 33em 79em, 34em 79em, 34em 80em, 35em 80em, 35em 81em, 59em 81em, 59em 0em);
+			background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 3em 13em/2em 3em repeat-y, var(--left-default-light);
+    	box-shadow: inset 0 -32em var(--left-default-light);
+			transform: translate(3em, -49em) translateZ(3em) rotateY(90deg);
+		}
+		&::after {
+			width: 1em; height: 8em;
+			background: var(--top-default-light);
+			transform: translateX(-1em) translateZ(-1em);
+		}
+	}
+	& > div:nth-child(19) {
+		width: 41em; height: 25em;
+    border-radius: 0 0 0 16em;
+    background: linear-gradient(135deg, var(--top-default-light) 15%, var(--right-default-light) 70%);
+    transform: translate(-61em, 38em) translateZ(-37em) rotateY(90deg);
+
+		&::before {
+			width: 1em; height: 8em;
+			background: var(--top-default-light);
+			transform: translate(5em, 1em) translateZ(-12em) rotateY(90deg);
+		}
+		&::after {
+			width: 1em; height: 8em;
+			background: var(--top-default-light);
+			transform: translate(6em, 1em) translateZ(-13em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(20) {
+		width: 1em; height: 8em;
+    background: var(--left-default-light);
+    transform: translate(-70em, 39em) translateZ(-38em) rotateY(90deg);
+
+		&::before {
+			width: 1em; height: 8em;
+			background: var(--left-default-light);
+			transform: translateX(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 1em; height: 8em;
+			background: var(--left-default-light);
+			transform: translateX(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(21) {
+		width: 1em; height: 8em;
+    background: var(--left-default-light);
+    transform: translate(-73em, 39em) translateZ(-41em) rotateY(90deg);
+
+		&::before {
+			width: 1em; height: 8em;
+			background: var(--left-default-light);
+			transform: translateX(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 1em; height: 8em;
+			background: var(--left-default-light);
+			transform: translateX(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(22) {
+		width: 23em; height: 8em;
+    background: var(--top-default-light);
+    transform: translate(-98em, 39em) translateZ(-44em);
+
+		&::before {
+			width: 25em; height: 8em;
+			clip-path: polygon(1em 0em, 1em 7em, 0em 7em, 0em 8em, 25em 8em, 25em 0em);
+			background: var(--left-default-light);
+			transform: translateZ(1em) rotateY(90deg);
+		}
+		&::after {
+			width: 29em; height: 59em;
+			clip-path: polygon(0em 7em, 0em 59em, 29em 59em, 29em 0em, 29em 1em, 28em 1em, 28em 2em, 27em 2em, 27em 3em, 26em 3em, 26em 4em, 25em 4em, 25em 5em, 24em 5em, 24em 6em, 23em 6em, 23em 7em, 22em 7em, 22em 6em, 20em 6em, 20em 7em, 17em 7em, 17em 6em, 12em 6em, 12em 7em, 9em 7em, 9em 6em, 4em 6em, 4em 7em, 2em 7em, 2em 6em, 0em 6em);
+			background: var(--right-default-light);
+			transform: translateY(8em) translateZ(7em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(23) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(-69em, 63em) translateZ(-65em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(24) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(-69em, 66em) translateZ(-68em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(25) {
+		width: 8em; height: 1em;
+    background: var(--top-default-light);
+    transform: translate(-69em, 69em) translateZ(-71em);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--top-default-light);
+			transform: translateY(1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 24em;
+			background: var(--right-default-light);
+			transform: translateY(2em) translateZ(-1em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(26) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(-69em, 70em) translateZ(-71em) rotateX(-90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(27) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(-69em, 67em) translateZ(-68em) rotateX(-90deg);
+
+		&::before {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-1em) translateZ(-1em);
+		}
+		&::after {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(-2em) translateZ(-2em);
+		}
+	}
+	& > div:nth-child(28) {
+		width: 8em; height: 1em;
+    background: var(--right-default-light);
+    transform: translate(-69em, 64em) translateZ(-65em) rotateX(-90deg);
+
+		&::before {
+			width: 63em; height: 70em;
+			clip-path: polygon(63em 0em, 61em 0em, 61em 1em, 58em 1em, 58em 0em, 53em 0em, 53em 1em, 50em 1em, 50em 0em, 45em 0em, 45em 1em, 42em 1em, 42em 0em, 37em 0em, 37em 1em, 34em 1em, 34em 0em, 29em 0em, 29em 1em, 26em 1em, 26em 0em, 21em 0em, 21em 1em, 18em 1em, 18em 0em, 13em 0em, 13em 1em, 10em 1em, 10em 0em, 5em 0em, 5em 1em, 2em 1em, 2em 0em, 0em 0em, 0em 70em, 63em 70em);
+			background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1em 4em/3em 2em repeat-x, var(--right-default-light);;
+			transform: translate(-85em, -20em) translateZ(-41em);
+		}
+		&::after {
+			width: 63em; height: 1em;
+			background: var(--top-default-light);
+			transform: translate(-87em, -19em) translateZ(-42em) rotateX(90deg);
+		}
+	}
+	& > div:nth-child(29) {
+		width: 2em; height: 1em;
+    background: var(--top-default-light);
+    box-shadow: -5em 0 var(--top-default-light), -8em 0 var(--top-default-light), -7em 0 var(--top-default-light), -13em 0 var(--top-default-light), -14em 0 var(--top-default-light), -16em 0 var(--top-default-light), -21em 0 var(--top-default-light), -22em 0 var(--top-default-light), -24em 0 var(--top-default-light), -29em 0 var(--top-default-light), -30em 0 var(--top-default-light), -32em 0 var(--top-default-light), -37em 0 var(--top-default-light), -38em 0 var(--top-default-light), -40em 0 var(--top-default-light), -45em 0 var(--top-default-light), -46em 0 var(--top-default-light), -48em 0 var(--top-default-light), -53em 0 var(--top-default-light), -55em 0 var(--top-default-light), -56em 0 var(--top-default-light), -61em 0 var(--top-default-light);
+    transform: translate(-93em, 22em) translateZ(-45em);
+
+		&::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateX(-8em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(30) {
+		width: 1em; height: 1em;
+    background: var(--left-default-light);
+    transform: translate(-109em, 22em) translateZ(-45em) rotateY(90deg);
+
+		&::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateZ(-8em);
+		}
+		&::after {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateZ(-16em);
+		}
+	}
+	& > div:nth-child(31) {
+		width: 1em; height: 1em;
+    background: var(--left-default-light);
+    transform: translate(-133em, 22em) translateZ(-45em) rotateY(90deg);
+
+		&::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateZ(-8em);
+		}
+		&::after {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateZ(-16em);
+		}
+	}
+	& > div:nth-child(32) {
+		width: 70em; height: 1em;
+    background: var(--left-default-light);
+    transform: translate(-150em, 22em) translateZ(-45em) rotateY(90deg);
+
+		&::before {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(11em, 2em) translateZ(19em) rotateX(-90deg) rotateZ(-90deg);
+		}
+		&::after {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(11em, 2em) translateZ(34em) rotateX(-90deg) rotateZ(-90deg);
+		}
+	}
+	& > div:nth-child(33) {
+		width: 19em; height: 30em;
+    background: var(--left-default-light);
+    transform: translate(-106em, 66em) translateZ(-66em) rotateX(-90deg) rotateY(90deg);
+
+		&::before {
+			width: 19em; height: 8em;
+			background: var(--top-default-light);
+			transform: rotateX(90deg);
+		}
+		&::after {
+			width: 8em; height: 30em;
+			background: var(--right-default-light);
+			transform: rotateY(-90deg);
+		}
+	}
+	& > div:nth-child(34) {
+		width: 8em; height: 14em;
+		background: var(--top-default-light);
+		transform: translate(-38em, 43em) translateZ(-51em);
+
+		&::before {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(-61em, -20em) translateZ(-6em) rotateX(-90deg);
+		}
+		&::after {
+			width: 8em; height: 20em;
+			background: var(--top-default-light);
+			transform: translate(-77em, -15em) translateZ(-20em);
+		}
+	}
+	& > div:nth-child(35) {
+		width: 1em; height: 2em;
+    background: var(--top-default-light);
+    box-shadow: -7em 0em var(--top-default-light), -7em 12em var(--top-default-light), -7em 7em var(--top-default-light), -7em 5em var(--top-default-light), 0em 12em var(--top-default-light), 0em 7em var(--top-default-light), 0em 5em var(--top-default-light);
+    transform: translate(-31em, 43em) translateZ(-50em);
+
+		&::before {
+			width: 32em; height: 14em;
+			clip-path: polygon(0em 0em, 32em 0em, 32em 14em, 0em 14em, 0em 12em, 1em 12em, 1em 9em, 0em 9em, 0em 5em, 1em 5em, 1em 2em, 0em 2em);
+			background: var(--left-default-light);
+			transform: translateX(-7em) rotateY(90deg);
+		}
+		&::after {
+			width: 8em; height: 32em;
+			clip-path: polygon(0em 0em, 2em 0em, 2em 1em, 6em 1em, 6em 0em, 8em 0em, 8em 32em, 0em 32em);
+			background: var(--right-default-light);
+			transform: translate(-7em, 14em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(36) {
+		width: 1em; height: 2em;
+    background: var(--left-default-light);
+    box-shadow: 0 12em var(--left-default-light), 0 7em var(--left-default-light), 0 5em var(--left-default-light);
+    transform: translate(-31em, 43em) translateZ(-50em) rotateY(90deg);
+
+		&::before {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			box-shadow: 0 7em var(--right-default-light);
+			transform: translateY(2em) translateZ(1em) rotateX(-90deg);
+		}
+		&::after {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			box-shadow: 0 7em var(--right-default-light);
+			transform: translateY(9em) translateZ(1em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(37) {
+		width: 2em; height: 1em;
+    background: var(--top-default-light);
+    box-shadow: -6em 0em var(--top-default-light);
+    transform: translate(-32em, 56em) translateZ(-50em);
+
+		&::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(-3em, 1em) translateZ(-13em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(38) {
+		width: 1em; height: 1em;
+    background: var(--top-default-light);
+    box-shadow: 0 1em var(--top-default-light), 0 5em var(--top-default-light), 0 6em var(--top-default-light), 0 7em var(--top-default-light), 0 8em var(--top-default-light), 0 12em var(--top-default-light), 0 13em var(--top-default-light), 0 14em var(--top-default-light), 0 15em var(--top-default-light), 0 18em var(--top-default-light), 0 19em var(--top-default-light), 1em 19em var(--top-default-light), 6em 19em var(--top-default-light), 7em 19em var(--top-default-light), 7em 0 var(--top-default-light), 7em 1em var(--top-default-light), 7em 5em var(--top-default-light), 7em 6em var(--top-default-light), 7em 7em var(--top-default-light), 7em 8em var(--top-default-light), 7em 12em var(--top-default-light), 7em 13em var(--top-default-light), 7em 14em var(--top-default-light), 7em 15em var(--top-default-light), 7em 18em var(--top-default-light), 7em 19em var(--top-default-light);
+    transform: translate(-115em, 28em) translateZ(-70em);
+
+		&::before {
+			width: 31em; height: 20em;
+			clip-path: polygon(0em 0em, 31em 0em, 31em 20em, 0em 20em, 0em 18em, 1em 18em, 1em 16em, 0em 16em, 0em 12em, 1em 12em, 1em 9em, 0em 9em, 0em 5em, 1em 5em, 1em 2em, 0em 2em);
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 8em; height: 31em;
+			clip-path: polygon(0em 0em, 0em 31em, 8em 31em, 8em 0em, 6em 0em, 6em 1em, 2em 1em, 2em 0em);
+			background: var(--right-default-light);
+			transform: translateY(20em) rotateX(-90deg);
+		}
+	}
+	& > div:nth-child(39) {
+		width: 1em; height: 1em;
+    background: var(--right-default-light);
+    box-shadow: 7em 0 var(--right-default-light);
+    transform: translate(-115em, 30em) translateZ(-70em) rotateX(-90deg);
+
+		&::before {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			box-shadow: 7em 0 var(--right-default-light);
+			transform: translateZ(7em);
+		}
+		&::after {
+			width: 1em; height: 1em;
+			background: var(--right-default-light);
+			box-shadow: 7em 0 var(--right-default-light);
+			transform: translateZ(14em)
+		}
+	}
+	& > div:nth-child(40) {
+		width: 2em; height: 1em;
+    background: var(--left-default-light);
+    box-shadow: 5em 0 var(--left-default-light), 7em 0 var(--left-default-light), 12em 0 var(--left-default-light), 14em 0 var(--left-default-light), 18em 0 var(--left-default-light);
+    transform: translate(-108em, 28em) translateZ(-70em) rotateX(-90deg) rotateY(-90deg);
+
+		&::before {
+			width: 1em; height: 1em;
+			background: var(--left-default-light);
+			transform: translateX(19em) translateZ(1em);
+		}
+		&::after {
+			width: 2em; height: 7em;
+			box-sizing: border-box;
+			background: var(--right-window-inner);
+			border-right: 3px solid var(--right-window-v);
+			border-bottom: 3px solid var(--right-window-h);
+			border-radius: 2em 2em 0 0;
+			transform: translate(20em, 12em) translateZ(3em) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(41) {
+		width: 16em; height: 16em;
+    background: var(--top-default-light);
+    transform: translate(1em, 1em) translateZ(3em);
+
+		&::before {
+			width: 55em; height: 16em;
+			clip-path: polygon(0em 0em, 55em 0em, 55em 16em, 0em 16em, 0em 14em, 2em 14em, 2em 11em, 0em 11em, 0em 5em, 2em 5em, 2em 2em, 0em 2em);
+			background: var(--left-default-light);
+			transform: translateZ(2em) rotateY(90deg);
+		}
+		&::after {
+			width: 100em; height: 16em;
+			clip-path: polygon(0em 0em, 100em 0em, 100em 16em, 0em 16em, 0em 14em, 2em 14em, 2em 11em, 0em 11em, 0em 5em, 2em 5em, 2em 2em, 0em 2em);
+			background: var(--right-default-light);
+			transform: translateY(16em) translateZ(2em) rotateZ(-90deg) rotateY(90deg);
+		}
+	}
+	& > div:nth-child(42) {
+		width: 2em; height: 7em;
+    box-sizing: border-box;
+    background: var(--right-window-inner);
+    border-right: 3px solid var(--right-window-v);
+    border-bottom: 3px solid var(--right-window-h);
+    border-radius: 2em 2em 0 0;
+    transform: translate(8em, 20em) rotateX(-90deg);
+	}
+	& > .mooving-part-1 {
+		width: 8em; height: 30em;
+    background: var(--right-accent-light);
+		animation: b3Mp1 var(--animation);
+
+		&::before {
+			width: 8em; height: 10em;
+			background: var(--top-accent-light);
+			transform: translateY(-6em) translateZ(-8em) rotateX(53deg);
+		}
+		&::after {
+			width: 8em; height: 36em;
+			clip-path: polygon(0em 6em, 8em 0em, 8em 36em, 0em 36em);
+			background: var(--left-accent-light);
+			transform: translateY(-6em) rotateY(90deg);
+		}
+
+		& > div {
+			width: 8em; height: 22em;
+			background: var(--right-accent-light);
+			transform-origin: bottom center;
+			animation: b3Mp1DIV var(--animation);
+	
+			&::before {
+				width: 8em; height: 8em;
+				background: var(--top-accent-light);
+				transform: rotateX(-90deg);
+			}
+			&::after {
+				width: 8em; height: 22em;
+				clip-path: polygon(0em 0em, 8em 0em, 8em 16em, 0em 22em);
+				background: var(--left-accent-light);
+				transform: rotateY(90deg);
+			}
+
+			& > div:nth-child(1) {
+				width: 8em; height: 16em;
+				background: var(--top-accent-light);
+				transform: translateZ(-8em);
+		
+				&::before {
+					width: 1em; height: 4em;
+					background: var(--top-accent-light);
+					transform: translate(-1em, 4em) translateZ(2em);
+				}
+				&::after {
+					width: 1em; height: 4em;
+					background: var(--top-accent-light);
+					transform: translate(-1em, 12em) translateZ(2em);
+				}
+			}
+			& > div:nth-child(2) {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				transform: translate(-1em, 4em) translateZ(-2em) rotateY(90deg);
+				animation: b3Mp1LeftPart var(--animation);
+				
+				&::before {
+					width: 1em; height: 4em;
+					transform: translate(-1em, -1em) rotateY(-90deg);
+					animation: b3Mp1RightPart var(--animation);
+				}
+				&::after {
+					width: 4em; height: 1em;
+					transform: translate(-1em, -1em) rotateX(90deg);
+					animation: b3Mp1TopPart var(--animation);
+				}
+			}
+			& > div:nth-child(3) {
+				width: 4em; height: 4em;
+				box-sizing: border-box;
+				transform: translate(-1em, 12em) translateZ(-2em) rotateY(90deg);
+				animation: b3Mp1LeftPart var(--animation);
+		
+				&::before {
+					width: 1em; height: 4em;
+					transform: translate(-1em, -1em) rotateY(-90deg);
+					animation: b3Mp1RightPart var(--animation);
+				}
+				&::after {
+					width: 4em; height: 1em;
+					transform: translate(-1em, -1em) rotateX(90deg);
+					animation: b3Mp1TopPart var(--animation);
+				}
+			}
+		}
+	}
+	& > .mooving-part-2 {
+		width: 8em; height: 19em;
+    background: var(--left-default-light);
+		animation: b3Mp2 var(--animation);
+
+		&::before {
+			width: 29em; height: 24em;
+			clip-path: polygon(0em 0em, 29em 0em, 29em 23em, 28em 23em, 28em 22em, 27em 22em, 27em 21em, 26em 21em, 26em 20em, 25em 20em, 25em 19em, 0em 19em);
+			background: var(--top-default-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 29em; height: 24em;
+			clip-path: polygon(0em 0em, 29em 0em, 29em 23em, 28em 23em, 28em 22em, 27em 22em, 27em 21em, 26em 21em, 26em 20em, 25em 20em, 25em 19em, 0em 19em);
+			background: var(--top-default-light);
+			transform: translateX(8em) rotateY(90deg);
+		}
+	
+		& > div:nth-child(1) {
+			width: 1em; height: 8em;
+			background: var(--left-default-light);
+			transform: translate(8em, 21em) translateZ(-27em) rotateZ(90deg);
+
+			&::before {
+				width: 1em; height: 8em;
+				background: var(--left-default-light);
+				transform: translateX(-1em) translateZ(1em);
+			}
+			&::after {
+				width: 1em; height: 8em;
+				background: var(--left-default-light);
+				transform: translateX(-2em) translateZ(2em);
+			}
+		}
+		& > div:nth-child(2) {
+			width: 1em; height: 8em;
+			background: var(--right-default-light);
+			transform: translate(8em, 23em) translateZ(-29em) rotateX(90deg) rotateY(0deg) rotateZ(90deg);
+
+			&::before {
+				width: 25em; height: 8em;
+				background: var(--right-default-light);
+				transform: translateX(4em) translateZ(3em) translateZ(1em);
+			}
+			&::after {
+				width: 1em; height: 8em;
+				background: var(--left-default-light);
+				transform: translateX(1em) rotateY(-90deg);
+			}
+		}
+		& > div:nth-child(3) {
+			width: 8em; height: 1em;
+			background: var(--right-default-light);
+			transform: translateY(22em) translateZ(-28em) rotateX(90deg);
+
+			&::before {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(1em) translateZ(1em);
+			}
+			&::after {
+				width: 8em; height: 1em;
+				background: var(--right-default-light);
+				transform: translateY(2em) translateZ(2em);
+			}
+		}
+	}
+	& > .mooving-part-3 {
+		width: 16em; height: 8em;
+    background: var(--top-accent-light);
+		animation: b3Mp3 var(--animation);
+
+		&::before {
+			width: 8em; height: 8em;
+			background: var(--left-accent-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 16em; height: 8em;
+			background: var(--right-accent-light);
+			transform: translateY(8em) rotateX(-90deg);
+		}
+
+		& > div:nth-child(1) {
+			width: 4em; height: 4em;
+			box-sizing: border-box;
+			transform: translate(3em, 9em) translateZ(-2em) rotateX(-90deg);
+			animation: b3Mp3RightPart var(--animation);
+			
+			&::before {
+				width: 1em; height: 4em;
+				transform: translate(-1em, -1em) rotateY(90deg);
+				animation: b3Mp3LeftPart var(--animation);
+			}
+			&::after {
+				width: 4em; height: 1em;
+				transform: translate(-1em, -1em) rotateX(-90deg);
+				animation: b3Mp3TopPart var(--animation);
+			}
+		}
+		& > div:nth-child(2) {
+			width: 4em; height: 4em;
+			box-sizing: border-box;
+			transform: translate(10em, 9em) translateZ(-2em) rotateX(-90deg);
+			animation: b3Mp3RightPart var(--animation);
+
+			&::before {
+				width: 1em; height: 4em;
+				transform: translate(-1em, -1em) rotateY(90deg);
+				animation: b3Mp3LeftPart var(--animation);
+			}
+			&::after {
+				width: 4em; height: 1em;
+				transform: translate(-1em, -1em) rotateX(-90deg);
+				animation: b3Mp3TopPart var(--animation);
+			}
+		}
+	}
+	& > .mooving-part-4 {
+		width: 8em; height: 8em;
+    background: var(--top-default-light);
+		animation: b3Mp4 var(--animation);
+
+		&::before {
+			width: 28em; height: 8em;
+			background: var(--left-default-light);
+			transform: rotateY(90deg);
+		}
+		&::after {
+			width: 8em; height: 30em;
+			background: var(--right-default-light);
+			transform: translateY(8em) rotateX(-90deg);
+		}
+	}
+}
+
+.Ro {
+	transform-style: preserve-3d;
+	animation: ro var(--animation) linear;
+	
+	& > &_1 {
+		animation: ro1 var(--animation) linear;
+		
+		&::before {
+			width: 140px; height: 268px;
+			background: conic-gradient(from 0.46turn at 34% -19%, #1a3468, 25deg, transparent, 25deg, transparent), linear-gradient(90deg, transparent 21%, #1a3468 21%, #1a3468 54%, transparent 21%);
+			border-radius: 0 0 35px 110px/0 0 35px 47px;
+			transform: translate(-10px, -414px) skewY(17deg);
+		}
+
+		& > .Ro__head {
+			width: 178px; height: 164px;
+			background: #1a3468;
+			box-shadow: inset 50px 35px 0 -40px white;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-50px, -562px) skew(13deg, 15deg);
+
+			&::before {
+				width: 122px; height: 114px;
+				background: #1a3468;
+				border-radius: 50%;
+				transform: translate(116px, 116px);
+			}
+		}
+		& > .Ro__legl {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro1LegL var(--animation) ease;
+
+			&::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) 21px 73px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) 2px 81px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 29px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 29px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80%/0 13px 7px 17%;
+				transform-origin: 42px 13px;
+				animation: ro1KneeL var(--animation) ease;
+			}
+		}
+		& > .Ro__legr {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro1LegR var(--animation) ease;
+
+			&::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) 22px 73px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) 1px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 29px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 29px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80%/0 13px 7px 17%;
+				transform-origin: 42px 13px;
+				animation: ro1KneeR var(--animation) ease;
+			}
+		}
+		& > .Ro__dress {
+			width: 66px; height: 309px;
+			background: radial-gradient(#1a3468 71%, transparent 0%) 11px -17px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e, #f06687);
+			border-radius: 19px 36px 38px 45px/220px 250px 72px 112px;
+			transform-origin: top left;
+			transform: translate(5px, -370px) skewY(8deg) rotate(-3deg);
+
+			&::before {
+				width: 52px; height: 324px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) 3px -22px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e -8%, #f06687 100%);
+				border-radius: 19px 36px 38px 45px/220px 250px 72px 112px;
+				transform-origin: top left;
+				transform: translate(22px, 9px) skewY(8deg) rotate(-11deg);
+			}
+			&::after {
+				width: 43px; height: 309px;
+				background: linear-gradient(180deg, #f9ac3e -13%, #f06687 100%);
+				border-radius: 0px 0px 13px 40px/0px 0px 80px 120px;
+				transform-origin: top right;
+				transform: translate(7px, 21px) skewY(8deg) rotate(-30deg);
+			}
+
+			& > div {
+				width: 12px; height: 261px;
+				background: linear-gradient(180deg, #f9ac3e -8%, #f06687);
+				border-radius: 0 0 2px 10px/0 0 0px 70px;
+				transform-origin: top right;
+				transform: translate(48px, 18px) skewY(8deg) rotate(-30deg);
+
+				&::before {
+					width: 56px; height: 261px;
+					background: linear-gradient(180deg, #f9ac3e -5%, #f06687 100%);
+					border-radius: 0 0 42px 23px/0 0 100px 90px;
+					transform-origin: top left;
+					transform: translate(-27px, -28px) skewY(8deg) rotate(46deg);
+				}
+				&::after {
+					width: 8px;
+					height: 193px;
+					background: linear-gradient(180deg, #f9ac3e, #f06687);
+					border-radius: 0 0 5px 5px/0 0 22px 50px;
+					transform-origin: top left;
+					transform: translate(-41px, -16px) skewY(8deg) rotate(49deg);
+				}
+			}
+		}
+	}
+	
+	& > &_2 {
+		animation: ro2 var(--animation) linear;
+		
+		&::before {
+			width: 140px; height: 268px;
+			background: conic-gradient(from 0.46turn at 34% -19%, #1a3468, 25deg, transparent, 25deg, transparent), linear-gradient(90deg, transparent 21%, #1a3468 21%, #1a3468 54%, transparent 21%);
+			border-radius: 0 0 110px 35px/0 0 47px 35px;
+			transform: translate(-10px, -414px) skewY(17deg);
+		}
+
+		& > .Ro__head {
+			width: 178px; height: 164px;
+			background: #1a3468;
+			box-shadow: inset -50px 16px 0 -40px white;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-50px, -562px) skew(13deg, 15deg);
+
+			&::before {
+				width: 122px; height: 114px;
+				background: #1a3468;
+				border-radius: 50%;
+				transform: translate(-81px, 69px);
+			}
+		}
+		& > .Ro__legl {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro2LegL var(--animation) ease;
+
+			&::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) -115px 75px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) -8px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 0px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 17% 7px;
+				transform-origin: 13px 13px;
+				animation: ro2KneeL var(--animation) ease;
+			}
+		}
+		& > .Ro__legr {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro2LegR var(--animation) ease;
+
+			&::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) -115px 75px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) -8px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 0px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 17% 7px;
+				transform-origin: 13px 13px;
+				animation: ro2KneeR var(--animation) ease;
+			}
+		}
+		& > .Ro__dress {
+			width: 74px; height: 287px;
+			background: radial-gradient(#1a3468 71%, transparent 0%) 17px -20px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e, #f06687);
+			border-radius: 36px 19px 45px 38px/250px 220px 112px 72px;
+			transform-origin: top left;
+			transform: translate(7px, -368px) skewY(8deg) rotate(5deg);
+
+			&::before {
+				width: 67px; height: 278px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) 17px -24px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e -1%, #f06687 100%);
+				border-radius: 36px 19px 45px 38px/250px 220px 112px 72px;
+				transform-origin: top left;
+				transform: translate(-13px, -15px) skewY(8deg) rotate(15deg);
+			}
+			&::after {
+				width: 53px; height: 256px;
+				background: linear-gradient(180deg, #f9ac3e -7%, #f06687 100%);
+				border-radius: 0px 0px 40px 13px/0px 0px 120px 80px;
+				transform-origin: top left;
+				transform: translate(11px, -5px) skewY(8deg) rotate(39deg);
+			}
+
+			& > div {
+				width: 8px; height: 227px;
+				background: linear-gradient(180deg, #f9ac3e, #f06687);
+				border-radius: 0 0 0px 6px/0 0 0px 70px;
+				transform-origin: top right;
+				transform: translate(57px, 18px) skewY(8deg) rotate(-22deg);
+
+				&::before {
+					width: 62px; height: 243px;
+					background: linear-gradient(180deg, #f9ac3e -16%, #f06687 100%);
+					border-radius: 0 0 23px 42px/0 0 90px 100px;
+					transform-origin: top right;
+					transform: translate(-54px, 24px) skewY(8deg) rotate(3deg);
+				}
+				&::after {
+					width: 8px; height: 193px;
+					background: linear-gradient(180deg, #f9ac3e, #f06687);
+					border-radius: 0 0 5px 5px/0 0 50px 22px;
+					transform-origin: top left;
+					transform: translate(-69px, -16px) skewY(8deg) rotate(58deg);
+				}
+			}
+		}
+	}
+	
+	& > &_3 {
+		animation: ro3 var(--animation) linear;
+
+		&::before {
+			width: 140px; height: 268px;
+			background: conic-gradient(from 0.46turn at 34% -19%, #1a3468, 25deg, transparent, 25deg, transparent), linear-gradient(90deg, transparent 21%, #1a3468 21%, #1a3468 54%, transparent 21%);
+			border-radius: 0 0 35px 110px / 0 0 35px 47px;
+			transform: translate(-10px, -414px) skewY(17deg);
+		}
+		&::after {
+			width: 32px; height: 211px;
+			background: linear-gradient(180deg, #f9ac3e, #f06687);
+			border-radius: 0 0 36px 25px / 0 0 62px 52px;
+			transform-origin: top left;
+			transform: translate(19px, -389px) rotate(24deg);
+			z-index: -1;
+		}
+
+		& > .Ro__head {
+			width: 178px; height: 164px;
+			background: #1a3468;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-50px, -562px) skew(13deg, 15deg);
+
+			&::before {
+				width: 122px; height: 114px;
+				background: #1a3468;
+				border-radius: 50%;
+				transform: translate(139px, -11px);
+			}
+			&::after {
+				width: 100%; height: 100%;
+				background: radial-gradient(ellipse 80px 110px, white 74%, transparent 0%) -41px 3px no-repeat;
+				border-radius: 50%;
+			}
+		}
+		& > .Ro__legl {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro3LegL var(--animation) ease;
+
+			&::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) 17px 74px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) 0px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 29px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 29px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80% / 0 13px 7px 17%;
+				transform-origin: 42px 13px;
+				animation: ro3KneeL var(--animation) ease;
+			}
+		}
+		& > .Ro__legr {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro3LegR var(--animation) ease;
+
+			&::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) 17px 74px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) 0px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 29px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 29px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80% / 0 13px 7px 17%;
+				transform-origin: 42px 13px;
+				animation: ro3KneeR var(--animation) ease;
+			}
+		}
+		& > .Ro__dress {
+			width: 74px; height: 287px;
+			background: radial-gradient(#1a3468 71%, transparent 0%) 6px -20px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e, #f06687);
+			border-radius: 19px 36px 38px 45px/220px 250px 72px 112px;
+			transform-origin: top left;
+			transform: translate(19px, -368px) skewY(8deg) rotate(-1deg);
+
+			&::before {
+				width: 68px; height: 313px;
+				background: linear-gradient(180deg, #f9ac3e -15%, #f06687 100%);
+				border-radius: 19px 36px 38px 45px/220px 250px 72px 112px;
+				transform-origin: top left;
+				transform: translateY(17px) skewY(8deg) rotate(-23deg);
+			}
+			&::after {
+				width: 53px; height: 302px;
+				background: linear-gradient(180deg, #f9ac3e -16%, #f06687 100%);
+				border-radius: 0px 0px 13px 40px/0px 0px 80px 120px;
+				transform-origin: top left;
+				transform: translate(9px, 33px) skewY(8deg) rotate(-42deg);
+			}
+
+			& > div {
+				width: 8px; height: 107px;
+				background: linear-gradient(180deg, #f9ac3e, #f06687);
+				border-radius: 0 0 6px 0px/0 0 70px 0px;
+				transform-origin: top left;
+				transform: translate(-16px, 23px) skewY(8deg) rotate(26deg);
+
+				&::before {
+					width: 22px; height: 243px;
+					background: linear-gradient(180deg, #f9ac3e, #f06687);
+					border-radius: 0 0 10px 12px/0 0 20px 60px;
+					transform-origin: top left;
+					transform: translate(50px, -6px) skewY(8deg) rotate(-90deg);
+				}
+				&::after {
+					width: 11px; height: 133px;
+					background: linear-gradient(180deg, #f9ac3e, #f06687);
+					border-radius: 0 0 5px 5px/0 0 50px 22px;
+					transform-origin: top right;
+					transform: translate(57px, -36px) skewY(8deg) rotate(-90deg);
+				}
+			}
+		}
+	}
+	
+	& > &_4 {
+		animation: ro4 var(--animation) linear;
+
+		&::before {
+			width: 140px; height: 268px;
+			background: conic-gradient(from 0.46turn at 34% -25%, #1a3468, 25deg, transparent, 25deg, transparent), linear-gradient(90deg, transparent 21%, #1a3468 21%, #1a3468 54%, transparent 21%);
+			border-radius: 0 0 35px 110px/0 0 35px 47px;
+			transform: translate(-10px, -414px) skewY(10deg);
+		}
+		&::after {
+			width: 19px; height: 311px;
+			background: linear-gradient(180deg, #f9ac3e, #f06687);
+			border-radius: 0 0 15px 36px/0 0 82px 142px;
+			transform-origin: top right;
+			transform: translate(47px, -362px) rotate(-19deg);
+			z-index: -1;
+		}
+
+		& > .Ro__head {
+			width: 178px; height: 164px;
+			background: #1a3468;
+			border-radius: 50%;
+			transform-origin: center center;
+			animation: ro4Head var(--animation);
+
+			&::before {
+				width: 122px; height: 114px;
+				background: #1a3468;
+				border-radius: 50%;
+				transform: translate(-81px, -51px);
+			}
+			&::after {
+				width: 100%; height: 100%;
+				background: radial-gradient(ellipse 80px 110px, white 74%, transparent 0%) 31px 5px no-repeat;
+				border-radius: 50%;
+				transform-origin: center center;
+				animation: ro4Face var(--animation);
+			}
+		}
+		& > .Ro__legl {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro4LegL var(--animation) ease;
+
+			&::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) -119px 73px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) -9px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 0px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 17% 7px;
+				transform-origin: 13px 13px;
+				animation: ro4KneeL var(--animation) ease;
+			}
+		}
+		& > .Ro__legr {
+			width: 26px; height: 110px;
+			background: #1a3468;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: ro4LegR var(--animation) ease;
+
+			&::before {
+				width: 55px; height: 113px;
+				background: radial-gradient(#1a3468 71%, transparent 0%) -119px 73px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) -9px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 0px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 17% 7px;
+				transform-origin: 13px 13px;
+				animation: ro4KneeR var(--animation) ease;
+			}
+		}
+		& > .Ro__dress {
+			width: 74px; height: 287px;
+			background: radial-gradient(#1a3468 71%, transparent 0%) 24px -16px/52px 26px no-repeat, linear-gradient(180deg, #f9ac3e, #f06687);
+			border-radius: 36px 19px 45px 38px/250px 220px 112px 72px;
+			transform-origin: top left;
+			transform: translate(-3px, -390px) skewY(24deg) rotate(2deg);
+
+			&::before {
+				width: 68px; height: 287px;
+				background: linear-gradient(180deg, #f9ac3e -15%, #f06687 100%);
+				border-radius: 36px 19px 45px 38px/250px 220px 112px 72px;
+				transform-origin: top left;
+				transform: translate(2px, -9px) skewY(11deg) rotate(20deg);
+			}
+			&::after {
+				width: 53px; height: 282px;
+				background: linear-gradient(180deg, #f9ac3e -16%, #f06687 100%);
+				border-radius: 0px 0px 40px 13px/0px 0px 120px 80px;
+				transform-origin: top left;
+				transform: translate(21px, -2px) skewY(8deg) rotate(42deg);
+			}
+
+			& > div {
+				width: 8px; height: 107px;
+				background: linear-gradient(180deg, #f9ac3e -40%, #f06687);
+				border-radius: 0 0 0px 6px/0 0 0px 70px;
+				transform-origin: top left;
+				transform: translate(96px, 73px) skewY(8deg) rotate(-31deg);
+
+				&::before {
+					width: 24px; height: 243px;
+					background: linear-gradient(180deg, #f9ac3e, #f06687);
+					border-radius: 0 0 12px 10px/0 0 60px 20px;
+					transform-origin: top left;
+					transform: translate(-57px, -86px) skewY(8deg) rotate(72deg);
+				}
+				&::after {
+					width: 11px; height: 133px;
+					background: linear-gradient(180deg, #f9ac3e -10%, #f06687);
+					border-radius: 0 0 5px 5px/0 0 50px 22px;
+					transform-origin: top left;
+					transform: translate(-83px, -81px) skewY(8deg) rotate(77deg);
+				}
+			}
+		}
+	}
+	
+	& > .Ro__arml {
+		width: 1px; height: 9px;
+		border-radius: 20px;
+		border-radius: 1px;
+    transform-origin: top center;
+		animation: roArmL var(--animation) linear;
+
+		&::before {
+			width: 1px; height: 9px;
+			border-radius: 20px;
+			border-radius: 1px;
+			transform-origin: 0.5px 1px;
+			animation: roHandL var(--animation) linear;
+		}
+	}
+	& > .Ro__armr {
+		width: 1px; height: 9px;
+		border-radius: 20px;
+		border-radius: 1px;
+    transform-origin: top center;
+		z-index: -1;
+		animation: roArmR var(--animation) linear;
+
+		&::before {
+			width: 1px; height: 9px;
+			border-radius: 20px;
+			border-radius: 1px;
+			transform-origin: 0.5px 1px;
+			animation: roHandR var(--animation) linear;
+		}
+	}
+}
+
+.Girl {
+	transform-style: preserve-3d;
+	animation: girl var(--animation) linear;
+	
+	& > &_1 {
+		animation: girl1 var(--animation) linear;
+
+		& > .Girl__dress {
+			width: 194px; height: 228px;
+			background: conic-gradient(from 0rad at 25% 16%, transparent 0deg 183deg, white 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% 0%, transparent 0deg 150deg, #d62939 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% -20%, transparent 0deg 159deg, #d62939 159deg 203deg, transparent 0deg 360deg);
+			border-radius: 0 0 45px 178px/0 0 41px 87px;
+			transform-origin: top left;
+			transform: translate(-51px, -335px) skewY(15deg);
+		}
+		& > .Girl__head {
+			width: 172px; height: 163px;
+			background: white;
+			box-shadow: inset -230px -97px 0 -120px #d62939;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-33px, -446px) skew(13deg, 15deg);
+
+			&::before {
+				left: 50%;
+				width: 124px; height: 159px;
+				background: linear-gradient(-136deg, #d62939 66%, transparent 0%);
+				border-radius: 0 110px 26px 20px/0 55px 104px 20px;
+				transform-origin: top left;
+				transform: translate(33px, 6px) rotate(29deg);
+			}
+		}
+		& > .Girl__legl {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl1LegL var(--animation) ease;
+
+			&::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) 17px 29px/155px 54px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) 2px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 18px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 18px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80%/0 13px 7px 34%;
+				transform-origin: 31px 13px;
+				animation: girl1KneeL var(--animation) ease;
+			}
+		}
+		& > .Girl__legr {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl1LegR var(--animation) ease;
+
+			&::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) 17px 29px/155px 54px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) 2px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 18px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 18px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80%/0 13px 7px 34%;
+				transform-origin: 31px 13px;
+				animation: girl1KneeR var(--animation) ease;
+			}
+		}
+	}
+
+	& > .Girl__arml {
+		width: 1px; height: 5px;
+    border-radius: 1px;
+    transform-origin: top center;
+		animation: girlArmL var(--animation);
+
+		&::before {
+			width: 1px; height: 5px;
+			border-radius: 1px;
+			transform-origin: top center;
+			animation: girlHandL var(--animation);
+		}
+	}
+	
+	& > &_2 {
+		animation: girl2 var(--animation) linear;
+
+		& > .Girl__dress {
+			width: 194px; height: 228px;
+			background: conic-gradient(from 0rad at 67% 16%, transparent 0deg 150deg, white 0deg 172deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% -20%, transparent 0deg 150deg, #d62939 150deg 200deg, transparent 0deg 360deg);
+			border-radius: 0 0 178px 45px/0 0 87px 41px;
+			transform-origin: top left;
+			transform: translate(-41px, -368px) skewY(35deg);
+		}
+		& > .Girl__head {
+			width: 172px; height: 163px;
+			background: white;
+			box-shadow: inset 210px 0px 0 -90px #d62939;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-33px, -446px) skew(15deg, 16deg);
+
+			&::before {
+				left: -50%;
+				width: 124px; height: 159px;
+				background: linear-gradient(136deg, #d62939 66%, transparent 0%);
+				border-radius: 110px 0 20px 26px/55px 0 20px 104px;
+				transform-origin: top right;
+				transform: translateX(41px);
+			}
+		}
+		& > .Girl__legl {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl2LegL var(--animation) ease;
+
+			&::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) -149px 39px/185px 34px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) -14px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 0px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 34% 7px;
+				transform-origin: 13px 13px;
+				animation: girl2KneeL var(--animation) ease;
+			}
+		}
+		& > .Girl__legr {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl2LegR var(--animation) ease;
+
+			&::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) -149px 39px/185px 34px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) -14px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 0px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 34% 7px;
+				transform-origin: 13px 13px;
+				animation: girl2KneeR var(--animation) ease;
+			}
+		}
+	}
+	
+	& > &_3 {
+		animation: girl3 var(--animation) linear;
+
+		& > .Girl__dress {
+			width: 194px; height: 228px;
+			background: radial-gradient(ellipse 25px 30px, white 74%, transparent 0%) -46px -35px no-repeat, conic-gradient(from 0rad at 36% 33%, transparent 0deg 149deg, white 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 19% 28%, transparent 0deg 143deg, white 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% 0%, transparent 0deg 147deg, #d62939 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% -20%, transparent 0deg 159deg, #d62939 159deg 203deg, transparent 0deg 360deg);
+			border-radius: 0 0 45px 178px / 0 0 41px 87px;
+			transform-origin: top left;
+			transform: translate(-51px, -335px) skewY(15deg);
+		}
+		& > .Girl__head {
+			width: 172px; height: 163px;
+			background: #d62939;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-33px, -446px) skew(13deg, 15deg);
+
+			&::before {
+				left: 50%;
+				width: 124px; height: 159px;
+				background: linear-gradient(-136deg, #d62939 66%, transparent 0%);
+				border-radius: 0 110px 26px 20px / 0 55px 104px 20px;
+			}
+			&::after {
+				width: 100%; height: 100%;
+				background: radial-gradient(ellipse 92px 108px, white 74%, transparent 0%) -26px -11px no-repeat;
+				border-radius: 50%;
+				transform: translate(-16px, 27px) rotate(-18deg);
+			}
+		}
+		& > .Girl__legl {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl3LegL var(--animation) ease;
+
+			&::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) 17px 29px/155px 54px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) 2px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 18px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 18px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80%/0 13px 7px 34%;
+				transform-origin: 31px 13px;
+				animation: girl3KneeL var(--animation) ease;
+			}
+		}
+		& > .Girl__legr {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl3LegR var(--animation) ease;
+
+			&::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) 17px 29px/155px 54px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) 2px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 18px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 18px 0px/26px 26px no-repeat;
+				border-radius: 0 13px 7px 80%/0 13px 7px 34%;
+				transform-origin: 31px 13px;
+				animation: girl3KneeR var(--animation) ease;
+			}
+		}
+	}
+	
+	& > &_4 {
+		animation: girl4 var(--animation) linear;
+
+		& > .Girl__dress {
+			width: 194px; height: 228px;
+			background: radial-gradient(ellipse 27px 25px, white 74%, transparent 0%) 30px -42px no-repeat, conic-gradient(from 0rad at 56% 28%, transparent 0deg 149deg, white 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 74% 27%, transparent 0deg 149deg, white 0deg 213deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% 0%, transparent 0deg 183deg, #d62939 0deg 208deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% -20%, transparent 0deg 150deg, #d62939 150deg 200deg, transparent 0deg 360deg);
+			border-radius: 0 0 178px 45px/0 0 87px 41px;
+			transform-origin: top left;
+			transform: translate(-41px, -368px) skewY(35deg);
+		}
+		& > .Girl__head {
+			width: 172px; height: 163px;
+			background: #d62939;
+			border-radius: 50%;
+			transform-origin: center center;
+			transform: translate(-33px, -446px) skew(15deg, 16deg);
+
+			&::before {
+				left: -50%;
+				width: 124px; height: 159px;
+				background: linear-gradient(136deg, #d62939 66%, transparent 0%);
+				border-radius: 110px 0 20px 26px/55px 0 20px 104px;
+				transform-origin: top right;
+				transform: translate(68px, 2px) rotate(15deg);
+			}
+			&::after {
+				width: 100%; height: 100%;
+				background: radial-gradient(ellipse 102px 108px, white 74%, transparent 0%) 24px 25px no-repeat;
+				border-radius: 50%;
+			}
+		}
+		& > .Girl__legl {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl4LegL var(--animation) ease;
+
+			&::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) -149px 39px/185px 34px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) -14px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 0px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 34% 7px;
+				transform-origin: 13px 13px;
+				animation: girl4KneeL var(--animation) ease;
+			}
+		}
+		& > .Girl__legr {
+			width: 26px; height: 78px;
+			background: #ffffff;
+			border-radius: 13px;
+			transform-origin: 13px 13px;
+			animation: girl4LegR var(--animation) ease;
+
+			&::before {
+				width: 44px; height: 89px;
+				background: radial-gradient(#ffffff 71%, transparent 0%) -149px 39px/185px 34px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) -14px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 0px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
+				border-radius: 13px 0 80% 7px/13px 0 34% 7px;
+				transform-origin: 13px 13px;
+				animation: girl4KneeR var(--animation) ease;
+			}
+		}
+	}
+}
+
+
+
+/* COMMON */
+@keyframes frame {
+  0%, 1%, 100% { background: black; }
+	3.1%, 98% { background: transparent; }
+}
+@keyframes scene {
+  0%, 1%     { opacity: 0; }
+	3.1%, 100% { opacity: 1; }
+  
+  00.00%, 30.11% { transform: translate(-57px, -136px); }
+  31.96%, 56.97% { transform: translate(-51px, 966px); }
+  58.23%         { transform: translate(-64px, 946px); }
+  58.38%         { transform: translate(-64px, 942px); }
+  58.89%         { transform: translate(-74px, 932px); }
+  59.48%         { transform: translate(-83px, 916px); }
+  59.93%         { transform: translate(-92px, 904px); }
+  60.52%         { transform: translate(-106px, 884px); }
+  60.96%         { transform: translate(-116px, 870px); }
+  61.40%         { transform: translate(-126px, 853px); }
+  62.43%         { transform: translate(-153px, 814px); }
+  62.66%         { transform: translate(-165px, 809px); }
+  63.25%         { transform: translate(-180px, 783px); }
+  63.54%         { transform: translate(-188px, 767px); }
+  63.84%         { transform: translate(-200px, 760px); }
+  64.21%         { transform: translate(-212px, 743px); }
+  64.80%         { transform: translate(-231px, 714px); }
+  65.02%         { transform: translate(-239px, 704px); }
+  65.61%         { transform: translate(-259px, 676px); }
+  66.20%         { transform: translate(-276px, 647px); }
+  66.72%         { transform: translate(-294px, 623px); }
+  67.31%         { transform: translate(-313px, 595px); }
+  67.75%         { transform: translate(-329px, 584px); }
+  68.34%         { transform: translate(-347px, 558px); }
+  68.86%         { transform: translate(-364px, 535px); }
+  69.30%         { transform: translate(-378px, 516px); }
+  70.18%         { transform: translate(-403px, 481px); }
+  71.36%         { transform: translate(-433px, 439px); }
+  72.47%         { transform: translate(-453px, 406px); }
+  76.60%, 100.0% { transform: translate(-488px, 355px); }
+}
+
+
+
+/* COVER */
+@keyframes cover {
+  0%, 1% {
+    background: radial-gradient(#9a0000a1 0%, black 0%);
+    opacity: 0;
+  }
+	3.09% {
+    background: radial-gradient(#9a0000a1 0%, black 100%);
+    opacity: 1;
+  }
+  7.82% { opacity: 1; }
+  9.44%, 100% { opacity: 0; }
+}
+@keyframes coverButton {
+  0%, 3.17%, 7.53%, 100% { opacity: 0; }
+  4.35%, 6.49%           { opacity: 1; }
+  
+  6.42%, 6.86% { transform: scale(1); }
+  6.49%        { transform: scale(1.25); }
+}
+@keyframes coverButtonShadow {
+  3.25%, 5.09%, 6.57%, 7.53% { opacity: 0; }
+  4.43%, 6.79% { opacity: 0.4; }
+  
+  3.25%, 6.57% { transform: scale(1); }
+  5.09%, 7.53% { transform: scale(1.9); }
+}
+
+
+
+/* FIRST BUILDING */
+@keyframes firstBuilding {
+  0%, 31.96%   { opacity: 1; }
+  31.97%, 100% { opacity: 0;}
+}
+@keyframes b1Mp2 {
+  0%, 11.66%, 12.18%, 12.40% { transform: translate(30em, 15em) translateZ(-18em); }
+  11.81% { transform: translate(30em, 15em) translateZ(-17em); }
+  12.03% { transform: translate(30em, 15em) translateZ(-18em); }
+  12.10% { transform: translate(30em, 15em) translateZ(-17.5em); }
+  12.69%, 100% { transform: translate(30em, 15em) translateZ(15em); }
+}
+  @keyframes b1Mp2TopPart {
+    00.00%, 11.59%, 12.25%, 12.32%, 13.51%, 100.0% { background: var(--top-accent-light); }
+    11.66%, 11.81%, 12.40%, 13.06% { background: white; }
+  }
+  @keyframes b1Mp2LeftPart {
+    00.00%, 11.59%, 12.25%, 12.32%, 13.51%, 100.0% { background: var(--left-accent-light); }
+    11.66%, 11.81%, 12.40%, 13.06% { background: white; }
+  }
+  @keyframes b1Mp2RightPart {
+    00.00%, 11.59%, 12.25%, 12.32%, 13.51%, 100.0% {
+      border-color: var(--right-accent-light);
+      background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
+      box-shadow: 0 0 6em 2em transparent; }
+    
+    11.66%, 11.81%, 12.40%, 13.06% {
+      border-color: white;
+      background: linear-gradient(45deg, white 50%, white 0%);
+      box-shadow: 0 0 6em 2em white; }
+  }
+@keyframes b1Mp1 {
+  00.00%, 19.19% { transform: translate(78em, -58em) translateZ(23em); }
+  19.78%, 25.46% { transform: translate(78em, -32em) translateZ(23em); }
+  25.83%, 100.0% { transform: translate(78em, -78em) translateZ(23em); }
+}
+  @keyframes b1Mp1LeftPart {
+    00.00%, 19.19%, 20.81%, 25.46%, 26.57%, 100.0% {
+      border-color: var(--left-accent-light);
+      background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
+      box-shadow: 0 0 6em 2em transparent; }
+    
+    19.41%, 20.37%, 25.53%, 26.13% {
+      border-color: white;
+      background: linear-gradient(45deg, white 50%, white 0%);
+      box-shadow: 0 0 6em 2em white; }
+  }
+  @keyframes b1Mp1TopPart {
+    00.00%, 19.19%, 20.81%, 25.46%, 26.57%, 100.0% { background: var(--top-accent-light); }
+    19.41%, 20.37%, 25.53%, 26.13% { background: white; }
+  }
+  @keyframes b1Mp1RightPart {
+    00.00%, 19.19%, 20.81%, 25.46%, 26.57%, 100.0% { background: var(--right-accent-light); }
+    19.41%, 20.37%, 25.53%, 26.13% { background: white; }
+  }
+
+
+
+
+/* SECOND BUILDING */
+@keyframes secondBuilding {
+  00.00%, 55.05%, 58.89%, 100.0% { transform: translate(15em, -78em) rotateX(55deg) rotateZ(-45deg); }
+  55.20% { transform: translate(15em, -78em) translate(0.75em, 0em) rotateX(55deg) rotateZ(-45deg); }
+  55.35% { transform: translate(15em, -78em) translate(0.5em, 1.5em) rotateX(55deg) rotateZ(-45deg); }
+  55.50% { transform: translate(15em, -78em) translate(-1em, 1.25em) rotateX(55deg) rotateZ(-45deg); }
+  55.65% { transform: translate(15em, -78em) translate(1em, -0.5em) rotateX(55deg) rotateZ(-45deg); }
+  55.79% { transform: translate(15em, -78em) translate(-0.5em, -0.75em) rotateX(55deg) rotateZ(-45deg); }
+  55.94% { transform: translate(15em, -78em) translate(-0.75em, 0.75em) rotateX(55deg) rotateZ(-45deg); }
+  56.09% { transform: translate(15em, -78em) translate(-0.25em, 0.5em) rotateX(55deg) rotateZ(-45deg); }
+  56.24% { transform: translate(15em, -78em) translate(0.5em, 0.5em) rotateX(55deg) rotateZ(-45deg); }
+  56.38% { transform: translate(15em, -78em) translate(-0.75em, 0.75em) rotateX(55deg) rotateZ(-45deg); }
+  56.53% { transform: translate(15em, -78em) translate(0.75em, -1em) rotateX(55deg) rotateZ(-45deg); }
+  56.68% { transform: translate(15em, -78em) translate(-0.75em, -0.5em) rotateX(55deg) rotateZ(-45deg); }
+  56.83% { transform: translate(15em, -78em) translate(-0.5em, -0.5em) rotateX(55deg) rotateZ(-45deg); }
+  56.97% { transform: translate(15em, -78em) translate(0.75em, 0.5em) rotateX(55deg) rotateZ(-45deg); }
+  57.12% { transform: translate(15em, -78em) translate(-0.75em, -0.75em) rotateX(55deg) rotateZ(-45deg); }
+}
+@keyframes b2Mp1 {
+  00.00%, 35.65%, 36.97%, 40.00%, 41.70%, 42.36%, 46.05%, 100.0% { transform: translate(15em, 15em) translateZ(46em); }
+  35.87%, 36.68%, 40.37%, 41.48% { transform: translate(15em, 15em) translateZ(15em); }
+  43.62%, 45.83% { transform: translate(15em, 15em) translateZ(30em); }
+}
+  @keyframes b2Mp1TopPart {
+    00.00%, 35.57%, 37.86%, 39.93%, 44.50%, 45.76%, 46.79%, 100.0% { background: var(--top-accent-light); }
+    35.65%, 37.42%, 40.00%, 43.62%, 45.83%, 46.35% { background: white; }
+  }
+  @keyframes b2Mp1RightPart {
+    00.00%, 35.57%, 37.86%, 39.93%, 44.50%, 45.76%, 46.79%, 100.0% { background: var(--right-accent-light); }
+    35.65%, 37.42%, 40.00%, 43.62%, 45.83%, 46.35% { background: white; }
+  }
+  @keyframes b2Mp1LeftPart {
+    00.00%, 35.57%, 37.86%, 39.93%, 44.50%, 45.76%, 46.79%, 100.0% {
+      border: 1em solid var(--left-accent-light);
+      background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
+      box-shadow: 0 0 6em 2em transparent; }
+    
+    35.65%, 37.42%, 40.00%, 43.62%, 45.83%, 46.35% {
+      border: 1em solid white;
+      background: linear-gradient(45deg, white 50%, white 0%);
+      box-shadow: 0 0 6em 2em white; }
+  }
+@keyframes b2Mp2 {
+  00.00%, 35.65%, 36.97%, 40.00%, 41.70%, 42.36%, 46.05%, 100.0% { transform: translate(15em, 30em) translateZ(15em); }
+  35.87%, 36.68%, 40.37%, 41.48% { transform: translate(15em, 30em) translateZ(46em); }
+  43.62%, 45.83% { transform: translate(15em, 30em) translateZ(30em); }
+}
+@keyframes b2Mp3 {
+  00.00%, 55.13% { transform: translate(39em, 23em) translateZ(75em); }
+  55.87%, 55.94% { transform: translate(39em, 23em) translateZ(55em); }
+  56.01%, 100.0% { transform: translate(39em, 23em) translateZ(53em); }
+}
+@keyframes b2Mp4 {
+  00.00%, 49.74% { transform: translate(31em, 7em) translateZ(75em); }
+  50.18% { transform: translate(31em, -23em) translateZ(75em); }
+  49.96%, 50.63%, 52.47% { transform: translate(31em, -24em) translateZ(75em); }
+  52.77%, 100.0% { transform: translate(31em, 7em) translateZ(75em); }
+}
+  @keyframes b2Mp4TopPart {
+    00.00%, 49.74%, 50.63%, 52.47%, 53.73%, 100.0% { background: var(--top-accent-light); }
+    49.82%, 49.96%, 52.55%, 52.77% { background: white; }
+  }
+  @keyframes b2Mp4RightPart {
+    00.00%, 49.74%, 50.63%, 52.47%, 53.73%, 100.0% { background: var(--right-accent-light); }
+    49.82%, 49.96%, 52.55%, 52.77% { background: white; }
+  }
+  @keyframes b2Mp4LeftPart {
+    00.00%, 49.74%, 50.63%, 52.47%, 53.73%, 100.0% {
+      border: 1em solid var(--left-accent-light);
+      background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
+      box-shadow: 0 0 6em 2em transparent; }
+    
+    49.82%, 49.96%, 52.55%, 52.77% {
+      border: 1em solid white;
+      background: linear-gradient(45deg, white 50%, white 0%);
+      box-shadow: 0 0 6em 2em white; }
+  }
+@keyframes b2Mp5 {
+  00.00%, 56.24% { transform: translate(54em, 14em) translateZ(75em); }
+  56.97% { transform: translate(54em, 15em) translateZ(74em); }
+  58.23% { transform: translate(54em, 24em) translateZ(68em); }
+  58.38% { transform: translate(54em, 25em) translateZ(67em); }
+  58.89% { transform: translate(54em, 30em) translateZ(63em); }
+  59.48% { transform: translate(54em, 35em) translateZ(57em); }
+  59.93% { transform: translate(54em, 40em) translateZ(53em); }
+  60.52% { transform: translate(54em, 47em) translateZ(47em); }
+  60.96% { transform: translate(54em, 51em) translateZ(41em); }
+  61.40% { transform: translate(54em, 55em) translateZ(20em); }
+  62.43% { transform: translate(54em, 65em) translateZ(17em); }
+  62.66% { transform: translate(54em, 67em) translateZ(17em); }
+  63.25% { transform: translate(54em, 71em) translateZ(15em); }
+  63.54% { transform: translate(54em, 74em) translateZ(13em) rotateY(7deg) rotateZ(26deg); }
+  63.84% { transform: translate(54em, 77em) translateZ(9em) rotateY(14deg) rotateZ(48deg); }
+  64.21% { transform: translate(54em, 80em) translateZ(9em) rotateX(-11deg) rotateY(14deg) rotateZ(64deg); }
+  64.80% { transform: translate(54em, 84em) translateZ(1em) rotateX(-9deg) rotateY(6deg) rotateZ(83deg); }
+  65.02% { transform: translate(54em, 84em) translateZ(-4em) rotateX(-9deg) rotateY(4deg) rotateZ(92deg); }
+  65.61% { transform: translate(52em, 83em) translateZ(-9em) rotateX(-5deg) rotateY(-11deg) rotateZ(95deg); }
+  66.20% { transform: translate(51em, 90em) translateZ(-16em) rotateX(-8deg) rotateY(-11deg) rotateZ(95deg); }
+  66.72% { transform: translate(44em, 90em) translateZ(-18em) rotateX(-7deg) rotateY(4deg) rotateZ(95deg); }
+  67.31% { transform: translate(45em, 89em) translateZ(-27em) rotateX(-15deg) rotateY(6deg) rotateZ(86deg); }
+  67.75% { transform: translate(46em, 89em) translateZ(-30em) rotateX(-13deg) rotateY(5deg) rotateZ(86deg); }
+  68.34% { transform: translate(46em, 91em) translateZ(-36em) rotateX(-3deg) rotateY(3deg) rotateZ(90deg); }
+  68.86% { transform: translate(46em, 93em) translateZ(-40em) rotateX(-3deg) rotateZ(90deg); }
+  69.30% { transform: translate(46em, 94em) translateZ(-41em) rotateZ(90deg); }
+  70.18% { transform: translate(46em, 102em) translateZ(-53em) rotateX(10deg) rotateZ(90deg); }
+  71.36% { transform: translate(31em, 115em) translateZ(-69em) rotateX(9deg) rotateZ(90deg); }
+  72.47%, 100.0% { transform: translate(18em, 151em) translateZ(-69em) rotateZ(90deg); }
+}
+  @keyframes b2Mp5Cloud1 {
+    00.00%, 56.97% { transform: translate(-21em, 16em) scale(0); }
+    58.23% { transform: translate(-21em, 16em) scale(0.8); }
+    60.29% { transform: translate(-21em, 16em) scale(1); }
+    61.62% { transform: translate(-21em, 16em) scale(0.7); }
+    62.58% { transform: translate(-21em, 16em) scale(1); }
+    63.76% { transform: translate(-21em, 16em) scale(0.9); }
+    64.87% { transform: translate(-21em, 16em) scale(1); }
+    66.12% { transform: translate(-21em, 16em) scale(0.7); }
+    67.01% { transform: translate(-21em, 16em) scale(1); }
+    68.04% { transform: translate(-21em, 16em) scale(0.8); }
+    69.59% { transform: translate(-21em, 16em) scale(1); }
+    71.29% { transform: translate(-21em, 16em) scale(0.9); }
+    74.91%, 100.0% { transform: translate(-21em, 16em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud2 {
+    00.00%, 56.97% { transform: translate(-12em, 17em) scale(0); }
+    58.23% { transform: translate(-12em, 17em) scale(0.9); }
+    58.89% { transform: translate(-12em, 17em) scale(0.7); }
+    60.29% { transform: translate(-12em, 17em) scale(1); }
+    61.25% { transform: translate(-12em, 17em) scale(0.8); }
+    62.14% { transform: translate(-12em, 17em) scale(1); }
+    63.62% { transform: translate(-12em, 17em) scale(0.9); }
+    64.65% { transform: translate(-12em, 17em) scale(1); }
+    65.39% { transform: translate(-12em, 17em) scale(0.7); }
+    66.05% { transform: translate(-12em, 17em) scale(1); }
+    67.23% { transform: translate(-12em, 17em) scale(0.9); }
+    68.78% { transform: translate(-12em, 17em) scale(1); }
+    69.52% { transform: translate(-12em, 17em) scale(0.8); }
+    70.26% { transform: translate(-12em, 17em) scale(1); }
+    71.07% { transform: translate(-12em, 17em) scale(0.9); }
+    72.32% { transform: translate(-12em, 17em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(-12em, 17em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud3 {
+    00.00%, 56.97% { transform: translate(6em, -30em) scale(0); }
+    58.23% { transform: translate(6em, -30em) scale(0.9); }
+    58.67% { transform: translate(6em, -30em) scale(0.7); }
+    58.97% { transform: translate(6em, -30em) scale(1); }
+    60.07% { transform: translate(6em, -30em) scale(0.8); }
+    61.03% { transform: translate(6em, -30em) scale(1); }
+    62.58% { transform: translate(6em, -30em) scale(0.9); }
+    64.06% { transform: translate(6em, -30em) scale(1); }
+    64.94% { transform: translate(6em, -30em) scale(0.7); }
+    65.90% { transform: translate(6em, -30em) scale(1); }
+    67.38% { transform: translate(6em, -30em) scale(0.9); }
+    68.34% { transform: translate(6em, -30em) scale(1); }
+    69.22% { transform: translate(6em, -30em) scale(0.7); }
+    70.18% { transform: translate(6em, -30em) scale(1); }
+    71.00% { transform: translate(6em, -30em) scale(0.8); }
+    72.32% { transform: translate(6em, -30em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(6em, -30em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud4 {
+    00.00%, 56.97% { transform: translate(16em, 11em) scale(0); }
+    58.23% { transform: translate(16em, 11em) scale(0.9); }
+    60.22% { transform: translate(16em, 11em) scale(0.7); }
+    61.11% { transform: translate(16em, 11em) scale(1); }
+    61.84% { transform: translate(16em, 11em) scale(0.8); }
+    62.29% { transform: translate(16em, 11em) scale(1); }
+    63.54% { transform: translate(16em, 11em) scale(0.9); }
+    65.02% { transform: translate(16em, 11em) scale(1); }
+    65.68% { transform: translate(16em, 11em) scale(0.8); }
+    66.35% { transform: translate(16em, 11em) scale(1); }
+    67.67% { transform: translate(16em, 11em) scale(0.7); }
+    68.49% { transform: translate(16em, 11em) scale(1); }
+    69.89% { transform: translate(16em, 11em) scale(0.8); }
+    70.41% { transform: translate(16em, 11em) scale(1); }
+    71.22% { transform: translate(16em, 11em) scale(0.9); }
+    72.03% { transform: translate(16em, 11em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(16em, 11em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud5 {
+    00.00%, 56.97% { transform: translate(-30em, 6em) scale(0); }
+    58.23% { transform: translate(-30em, 6em) scale(0.9); }
+    58.82% { transform: translate(-30em, 6em) scale(0.7); }
+    59.26% { transform: translate(-30em, 6em) scale(1); }
+    60.59% { transform: translate(-30em, 6em) scale(0.8); }
+    61.11% { transform: translate(-30em, 6em) scale(1); }
+    62.36% { transform: translate(-30em, 6em) scale(0.9); }
+    62.80% { transform: translate(-30em, 6em) scale(1); }
+    63.54% { transform: translate(-30em, 6em) scale(0.8); }
+    64.87% { transform: translate(-30em, 6em) scale(1); }
+    65.83% { transform: translate(-30em, 6em) scale(0.8); }
+    66.86% { transform: translate(-30em, 6em) scale(1); }
+    67.60% { transform: translate(-30em, 6em) scale(0.8); }
+    68.78% { transform: translate(-30em, 6em) scale(1); }
+    70.26% { transform: translate(-30em, 6em) scale(0.9); }
+    70.92% { transform: translate(-30em, 6em) scale(1); }
+    74.91%, 100.0% { transform: translate(-30em, 6em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud6 {
+    00.00%, 56.97% { transform: translate(-13em, 1em) scale(0); }
+    58.23% { transform: translate(-13em, 1em) scale(0.7); }
+    60.29% { transform: translate(-13em, 1em) scale(1); }
+    61.62% { transform: translate(-13em, 1em) scale(0.9); }
+    62.58% { transform: translate(-13em, 1em) scale(1); }
+    63.76% { transform: translate(-13em, 1em) scale(0.8); }
+    64.87% { transform: translate(-13em, 1em) scale(1); }
+    66.12% { transform: translate(-13em, 1em) scale(0.7); }
+    67.01% { transform: translate(-13em, 1em) scale(1); }
+    68.04% { transform: translate(-13em, 1em) scale(0.7); }
+    69.59% { transform: translate(-13em, 1em) scale(1); }
+    71.29% { transform: translate(-13em, 1em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(-13em, 1em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud7 {
+    00.00%, 56.97% { transform: translate(-20em, 24em) scale(0); }
+    58.23% { transform: translate(-20em, 24em) scale(0.9); }
+    58.89% { transform: translate(-20em, 24em) scale(0.7); }
+    60.29% { transform: translate(-20em, 24em) scale(1); }
+    61.25% { transform: translate(-20em, 24em) scale(0.8); }
+    62.14% { transform: translate(-20em, 24em) scale(1); }
+    63.62% { transform: translate(-20em, 24em) scale(0.9); }
+    64.65% { transform: translate(-20em, 24em) scale(1); }
+    65.39% { transform: translate(-20em, 24em) scale(0.7); }
+    66.05% { transform: translate(-20em, 24em) scale(1); }
+    67.23% { transform: translate(-20em, 24em) scale(0.9); }
+    68.78% { transform: translate(-20em, 24em) scale(1); }
+    69.52% { transform: translate(-20em, 24em) scale(0.8); }
+    70.26% { transform: translate(-20em, 24em) scale(1); }
+    71.07% { transform: translate(-20em, 24em) scale(0.9); }
+    72.32% { transform: translate(-20em, 24em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(-20em, 24em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud8 {
+    00.00%, 56.97% { transform: translate(-15em, 14em) scale(0); }
+    58.23% { transform: translate(-15em, 14em) scale(0.9); }
+    58.67% { transform: translate(-15em, 14em) scale(0.7); }
+    58.97% { transform: translate(-15em, 14em) scale(1); }
+    60.07% { transform: translate(-15em, 14em) scale(0.8); }
+    61.03% { transform: translate(-15em, 14em) scale(1); }
+    62.58% { transform: translate(-15em, 14em) scale(0.9); }
+    64.06% { transform: translate(-15em, 14em) scale(1); }
+    64.94% { transform: translate(-15em, 14em) scale(0.7); }
+    65.90% { transform: translate(-15em, 14em) scale(1); }
+    67.38% { transform: translate(-15em, 14em) scale(0.9); }
+    68.34% { transform: translate(-15em, 14em) scale(1); }
+    69.22% { transform: translate(-15em, 14em) scale(0.7); }
+    70.18% { transform: translate(-15em, 14em) scale(1); }
+    71.00% { transform: translate(-15em, 14em) scale(0.7); }
+    72.32% { transform: translate(-15em, 14em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(-15em, 14em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud9 {
+    00.00%, 56.97% { transform: translate(-20em, 24em) scale(0); }
+    58.23% { transform: translate(-20em, 24em) scale(0.8); }
+    60.22% { transform: translate(-20em, 24em) scale(0.7); }
+    61.11% { transform: translate(-20em, 24em) scale(1); }
+    61.84% { transform: translate(-20em, 24em) scale(0.9); }
+    62.29% { transform: translate(-20em, 24em) scale(1); }
+    63.54% { transform: translate(-20em, 24em) scale(0.8); }
+    65.02% { transform: translate(-20em, 24em) scale(1); }
+    65.68% { transform: translate(-20em, 24em) scale(0.9); }
+    66.35% { transform: translate(-20em, 24em) scale(1); }
+    67.67% { transform: translate(-20em, 24em) scale(0.8); }
+    68.49% { transform: translate(-20em, 24em) scale(1); }
+    69.89% { transform: translate(-20em, 24em) scale(0.9); }
+    70.41% { transform: translate(-20em, 24em) scale(1); }
+    71.22% { transform: translate(-20em, 24em) scale(0.8); }
+    72.03% { transform: translate(-20em, 24em) scale(0.9); }
+    74.91%, 100.0% { transform: translate(-20em, 24em) scale(0); }
+  }
+  @keyframes b2Mp5Cloud10 {
+    00.00%, 56.97% { transform: translate(-21em, 14em) scale(0); }
+    58.23% { transform: translate(-21em, 14em) scale(0.9); }
+    58.82% { transform: translate(-21em, 14em) scale(0.7); }
+    59.26% { transform: translate(-21em, 14em) scale(1); }
+    60.59% { transform: translate(-21em, 14em) scale(0.8); }
+    61.11% { transform: translate(-21em, 14em) scale(1); }
+    62.36% { transform: translate(-21em, 14em) scale(0.9); }
+    62.80% { transform: translate(-21em, 14em) scale(1); }
+    63.54% { transform: translate(-21em, 14em) scale(0.8); }
+    64.87% { transform: translate(-21em, 14em) scale(1); }
+    65.83% { transform: translate(-21em, 14em) scale(0.8); }
+    66.86% { transform: translate(-21em, 14em) scale(1); }
+    67.60% { transform: translate(-21em, 14em) scale(0.8); }
+    68.78% { transform: translate(-21em, 14em) scale(1); }
+    70.26% { transform: translate(-21em, 14em) scale(0.9); }
+    70.92% { transform: translate(-21em, 14em) scale(1); }
+    74.91%, 100.0% { transform: translate(-21em, 14em) scale(0); }
+  }
+@keyframes b2Mp6 {
+  00.00%, 56.97% { transform: translate(69em, -1em) translateZ(83em) rotateX(-90deg); }
+  58.23% { transform: translate(69em, 3em) translateZ(82em) rotateX(-90deg); }
+  58.38% { transform: translate(69em, 4em) translateZ(81em) rotateX(-90deg); }
+  58.89% { transform: translate(69em, 8em) translateZ(81em) rotateX(-90deg); }
+  59.48% { transform: translate(69em, 11em) translateZ(78em) rotateX(-90deg); }
+  59.93% { transform: translate(69em, 15em) translateZ(77em) rotateX(-90deg); }
+  60.52% { transform: translate(69em, 20em) translateZ(74em) rotateX(-90deg); }
+  60.96% { transform: translate(69em, 24em) translateZ(72em) rotateX(-90deg); }
+  61.40% { transform: translate(69em, 29em) translateZ(70em) rotateX(-90deg); }
+  62.43% { transform: translate(69em, 39em) translateZ(63em) rotateX(-90deg); }
+  62.66% { transform: translate(69em, 42em) translateZ(63em) rotateX(-90deg); }
+  63.25% { transform: translate(69em, 48em) translateZ(58em) rotateX(-90deg); }
+  63.54% { transform: translate(69em, 52em) translateZ(56em) rotateX(-90deg); }
+  63.84% { transform: translate(69em, 55em) translateZ(54em) rotateX(-90deg); }
+  64.21% { transform: translate(69em, 59em) translateZ(51em) rotateX(-90deg); }
+  64.80% { transform: translate(69em, 66em) translateZ(45em) rotateX(-90deg); }
+  65.02% { transform: translate(69em, 67em) translateZ(43em) rotateX(-90deg); }
+  65.61% { transform: translate(76em, 67em) translateZ(30em) rotateX(-90deg); }
+  66.20% { transform: translate(74em, 75em) translateZ(25em) rotateX(-90deg); }
+  66.72% { transform: translate(76em, 78em) translateZ(17em) rotateX(-90deg);  }
+  67.31% { transform: translate(76em, 80em) translateZ(10em) rotateX(-90deg); }
+  67.75% { transform: translate(76em, 87em) translateZ(1em) rotateX(-90deg); }
+  68.34% { transform: translate(76em, 90em) translateZ(-4em) rotateX(-90deg); }
+  68.86% { transform: translate(76em, 94em) translateZ(-12em) rotateX(-90deg); }
+  69.30% { transform: translate(76em, 101em) translateZ(-19em) rotateX(-90deg); }
+  70.18% { transform: translate(76em, 104em) translateZ(-26em) rotateX(-90deg); }
+  71.36% { transform: translate(76em, 111em) translateZ(-42em) rotateX(-90deg); }
+  72.47% { transform: translate(76em, 114em) translateZ(-46em) rotateX(-90deg); }
+  74.91%, 100.0% { transform: translate(54em, 141em) translateZ(-53em) rotateX(-90deg); }
+}
+  @keyframes b2Mp6Cloud1 {
+    00.00%, 56.97% { transform: translate(-50%, 17em) scale(0); }
+    58.23% { transform: translate(-50%, 17em) scale(1); }
+    60.29% { transform: translate(-50%, 17em) scale(0.9); }
+    61.62% { transform: translate(-50%, 17em) scale(1); }
+    62.58% { transform: translate(-50%, 17em) scale(0.8); }
+    63.76% { transform: translate(-50%, 17em) scale(0.9); }
+    64.87% { transform: translate(-50%, 17em) scale(1); }
+    66.12% { transform: translate(-50%, 17em) scale(0.7); }
+    67.01% { transform: translate(-50%, 17em) scale(1); }
+    68.04% { transform: translate(-50%, 17em) scale(0.9); }
+    69.59% { transform: translate(-50%, 17em) scale(1); }
+    71.29% { transform: translate(-50%, 17em) scale(0.7); }
+    74.91%, 100.0% { transform: translate(-50%, 17em) scale(0); }
+  }
+  @keyframes b2Mp6Cloud2 {
+    00.00%, 56.97% { transform: translate(-11em, 11em) scale(0); }
+    58.23% { transform: translate(-11em, 11em) scale(1); }
+    58.89% { transform: translate(-11em, 11em) scale(0.7); }
+    60.29% { transform: translate(-11em, 11em) scale(1); }
+    61.25% { transform: translate(-11em, 11em) scale(0.9); }
+    62.14% { transform: translate(-11em, 11em) scale(1); }
+    63.62% { transform: translate(-11em, 11em) scale(0.8); }
+    64.65% { transform: translate(-11em, 11em) scale(1); }
+    65.39% { transform: translate(-11em, 11em) scale(0.9); }
+    66.05% { transform: translate(-11em, 11em) scale(1); }
+    67.23% { transform: translate(-11em, 11em) scale(0.8); }
+    68.78% { transform: translate(-11em, 11em) scale(1); }
+    69.52% { transform: translate(-11em, 11em) scale(0.9); }
+    70.26% { transform: translate(-11em, 11em) scale(1); }
+    71.07% { transform: translate(-11em, 11em) scale(0.7); }
+    72.32% { transform: translate(-11em, 11em) scale(1); }
+    74.91%, 100.0% { transform: translate(-11em, 11em) scale(0); }
+  }
+  @keyframes b2Mp6Cloud3 {
+    00.00%, 56.97% { transform: translate(-50%, 20em) scale(0); }
+    58.23% { transform: translate(-50%, 20em) scale(0.8); }
+    58.67% { transform: translate(-50%, 20em) scale(1); }
+    58.97% { transform: translate(-50%, 20em) scale(0.9); }
+    60.07% { transform: translate(-50%, 20em) scale(1); }
+    61.03% { transform: translate(-50%, 20em) scale(0.7); }
+    62.58% { transform: translate(-50%, 20em) scale(1); }
+    64.06% { transform: translate(-50%, 20em) scale(0.9); }
+    64.94% { transform: translate(-50%, 20em) scale(1); }
+    65.90% { transform: translate(-50%, 20em) scale(0.8); }
+    67.38% { transform: translate(-50%, 20em) scale(1); }
+    68.34% { transform: translate(-50%, 20em) scale(0.9); }
+    69.22% { transform: translate(-50%, 20em) scale(1); }
+    70.18% { transform: translate(-50%, 20em) scale(0.7); }
+    71.00% { transform: translate(-50%, 20em) scale(1); }
+    72.32% { transform: translate(-50%, 20em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(-50%, 20em) scale(0); }
+  }
+  @keyframes b2Mp6Cloud4 {
+    00.00%, 56.97% { transform: translate(-50%, 32em) scale(0); }
+    58.23% { transform: translate(-50%, 32em) scale(0.8); }
+    60.22% { transform: translate(-50%, 32em) scale(1); }
+    61.11% { transform: translate(-50%, 32em) scale(0.9); }
+    61.84% { transform: translate(-50%, 32em) scale(1); }
+    62.29% { transform: translate(-50%, 32em) scale(0.7); }
+    63.54% { transform: translate(-50%, 32em) scale(1); }
+    65.02% { transform: translate(-50%, 32em) scale(0.9); }
+    65.68% { transform: translate(-50%, 32em) scale(1); }
+    66.35% { transform: translate(-50%, 32em) scale(0.8); }
+    67.67% { transform: translate(-50%, 32em) scale(1); }
+    68.49% { transform: translate(-50%, 32em) scale(0.9); }
+    69.89% { transform: translate(-50%, 32em) scale(1); }
+    70.41% { transform: translate(-50%, 32em) scale(0.7); }
+    71.22% { transform: translate(-50%, 32em) scale(1); }
+    72.03% { transform: translate(-50%, 32em) scale(0.9); }
+    74.91%, 100.0% { transform: translate(-50%, 32em) scale(0); }
+  }
+  @keyframes b2Mp6Cloud5 {
+    00.00%, 56.97% { transform:  translate(-1em, 25em) scale(0); }
+    58.23% { transform:  translate(-1em, 25em) scale(0.7); }
+    58.67% { transform:  translate(-1em, 25em) scale(1); }
+    58.97% { transform:  translate(-1em, 25em) scale(0.8); }
+    60.07% { transform:  translate(-1em, 25em) scale(1); }
+    61.03% { transform:  translate(-1em, 25em) scale(0.9); }
+    62.58% { transform:  translate(-1em, 25em) scale(1); }
+    64.06% { transform:  translate(-1em, 25em) scale(0.8); }
+    64.94% { transform:  translate(-1em, 25em) scale(1); }
+    65.90% { transform:  translate(-1em, 25em) scale(0.8); }
+    67.38% { transform:  translate(-1em, 25em) scale(1); }
+    68.34% { transform:  translate(-1em, 25em) scale(0.9); }
+    69.22% { transform:  translate(-1em, 25em) scale(1); }
+    70.18% { transform:  translate(-1em, 25em) scale(0.7); }
+    71.00% { transform:  translate(-1em, 25em) scale(1); }
+    72.32% { transform:  translate(-1em, 25em) scale(0.8); }
+    74.91%, 100.0% { transform:  translate(-1em, 25em) scale(0); }
+  }
+  @keyframes b2Mp6Cloud6 {
+    00.00%, 56.97% { transform: translate(-20em, 30em) scale(0); }
+    58.23% { transform: translate(-20em, 30em) scale(1); }
+    60.29% { transform: translate(-20em, 30em) scale(0.7); }
+    61.62% { transform: translate(-20em, 30em) scale(1); }
+    62.58% { transform: translate(-20em, 30em) scale(0.9); }
+    63.76% { transform: translate(-20em, 30em) scale(0.8); }
+    64.87% { transform: translate(-20em, 30em) scale(1); }
+    66.12% { transform: translate(-20em, 30em) scale(0.7); }
+    67.01% { transform: translate(-20em, 30em) scale(1); }
+    68.04% { transform: translate(-20em, 30em) scale(0.9); }
+    69.59% { transform: translate(-20em, 30em) scale(1); }
+    71.29% { transform: translate(-20em, 30em) scale(0.8); }
+    74.91%, 100.0% { transform: translate(-20em, 30em) scale(0); }
+  }
+@keyframes Bridge1 {
+  00.00%, 66.72% { transform: translate(0em, 0em) translateZ(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  66.79% { transform: translate(6em, 7em) translateZ(6em) rotateX(10deg) rotateY(-30deg) rotateZ(50deg); }
+  67.31% { transform: translate(-3em, 37em) translateZ(22em) rotateX(-20deg) rotateY(10deg) rotateZ(30deg); }
+  67.75% { transform: translate(1em, 37em) translateZ(1em) rotateX(-110deg) rotateY(0deg) rotateZ(40deg); }
+  68.34% { transform: translate(-9em, 55em) translateZ(-28em) rotateX(-90deg) rotateY(16deg) rotateZ(30deg); }
+  68.86% { transform: translate(-29em, 105em) translateZ(-68em) rotateX(-80deg) rotateY(-14deg) rotateZ(40deg); }
+  69.30% { transform: translate(-29em, 155em) translateZ(-118em) rotateX(-80deg) rotateY(-14deg) rotateZ(40deg); }
+  69.31%, 100.0% { transform: translate(-999em, 999em) translateZ(-118em) rotateX(-80deg) rotateY(-14deg) rotateZ(40deg); }
+}
+@keyframes Bridge2 {
+  00.00%, 66.72% { transform: translate(0em, 8em) translateZ(0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
+  66.79% { transform: translate(-5em, 11em) translateZ(0em) rotateX(-110deg) rotateY(8deg) rotateZ(-30deg); }
+  67.31% { transform: translate(-11em, 31em) translateZ(0em) rotateX(-90deg) rotateY(-2deg) rotateZ(-30deg); }
+  67.75% { transform: translate(-4em, 56em) translateZ(8em) rotateX(-110deg) rotateY(18deg) rotateZ(70deg); }
+  68.34% { transform: translate(-12em, 78em) translateZ(-25em) rotateX(-90deg) rotateY(-72deg) rotateZ(100deg); }
+  68.86% { transform: translate(-21em, 101em) translateZ(-66em) rotateX(-130deg) rotateY(-109deg) rotateZ(100deg); }
+  69.30% { transform: translate(-21em, 191em) translateZ(-96em) rotateX(-100deg) rotateY(-159deg) rotateZ(140deg); }
+  69.31%, 100.0% { transform: translate(-999em, 999em) translateZ(-96em) rotateX(-100deg) rotateY(-159deg) rotateZ(140deg); }
+}
+@keyframes Bridge3 {
+  00.00%, 66.72% { transform: translate(13em, 0em) translateZ(0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
+  66.79% { transform: translate(17em, 7em) translateZ(10em) rotateX(-70deg) rotateY(-50deg) rotateZ(-10deg); }
+  67.31% { transform: translate(17em, 30em) translateZ(13em) rotateX(-30deg) rotateY(-50deg) rotateZ(-10deg); }
+  67.75% { transform: translate(2em, 82em) translateZ(29em) rotateX(0deg) rotateY(-100deg) rotateZ(-7deg); }
+  68.34% { transform: translate(2em, 96em) translateZ(-18em) rotateX(-60deg) rotateY(-130deg) rotateZ(-27deg); }
+  68.86% { transform: translate(2em, 146em) translateZ(-48em) rotateX(-40deg) rotateY(-150deg) rotateZ(-7deg); }
+  69.30% { transform: translate(2em, 196em) translateZ(-68em) rotateX(-20deg) rotateY(-170deg) rotateZ(13deg); }
+  69.31%, 100.0% { transform: translate(999em, 999em) translateZ(-68em) rotateX(-20deg) rotateY(-170deg) rotateZ(13deg); }
+}
+@keyframes Bridge4 {
+  00.00%, 66.72% { transform: translate(26em, 0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
+  66.79% { transform: translate(28em, 8em) translateZ(3em) rotateX(-70deg) rotateY(20deg) rotateZ(0deg); }
+  67.31% { transform: translate(30em, 32em) translateZ(3em) rotateX(-4deg) rotateY(20deg) rotateZ(0deg); }
+  67.75% { transform: translate(33em, 51em) translateZ(2em) rotateX(-14deg) rotateY(0deg) rotateZ(-10deg); }
+  68.34% { transform: translate(33em, 63em) translateZ(-46em) rotateX(6deg) rotateY(10deg) rotateZ(-20deg); }
+  68.86% { transform: translate(19em, 102em) translateZ(-86em) rotateX(16deg) rotateY(-40deg) rotateZ(-50deg); }
+  69.30% { transform: translate(19em, 162em) translateZ(-116em) rotateX(26deg) rotateY(-60deg) rotateZ(-60deg); }
+  69.31%, 100.0% { transform: translate(999em, 999em) translateZ(-116em) rotateX(26deg) rotateY(-60deg) rotateZ(-60deg); }
+}
+@keyframes Bridge5 {
+  00.00%, 66.72% { transform: translate(32em, 0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
+  66.79% { transform: translate(42em, 4em) translateZ(10em) rotateX(-70deg) rotateY(-50deg) rotateZ(-10deg); }
+  67.31% { transform: translate(43em, 28em) translateZ(-3em) rotateX(10deg) rotateY(-10deg) rotateZ(20deg); }
+  67.75% { transform: translate(42em, 54em) translateZ(8em) rotateX(-120deg) rotateY(-60deg) rotateZ(70deg); }
+  68.34% { transform: translate(42em, 79em) translateZ(-29em) rotateX(-160deg) rotateY(-77deg) rotateZ(70deg); }
+  68.86% { transform: translate(24em, 87em) translateZ(-79em) rotateX(10deg) rotateY(-90deg) rotateZ(73deg); }
+  69.30% { transform: translate(24em, 109em) translateZ(-109em) rotateX(20deg) rotateY(-100deg) rotateZ(83deg); }
+  69.31%, 100.0% { transform: translate(999em, 999em) translateZ(-109em) rotateX(20deg) rotateY(-100deg) rotateZ(83deg); }
+}
+@keyframes Bridge6 {
+  00.00%, 66.72% { transform: translate(48em, 0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
+  66.79% { transform: translate(51em, 4em) translateZ(10em) rotateX(-110deg) rotateY(-20deg) rotateZ(-30deg); }
+  67.31% { transform: translate(57em, 20em) translateZ(4em) rotateX(-150deg) rotateY(-50deg) rotateZ(-60deg); }
+  67.75% { transform: translate(53em, 45em) translateZ(-10em) rotateX(-100deg) rotateY(-20deg) rotateZ(-60deg); }
+  68.34% { transform: translate(53em, 54em) translateZ(-42em) rotateX(-110deg) rotateY(-30deg) rotateZ(-73deg); }
+  68.86% { transform: translate(39em, 89em) translateZ(-74em) rotateX(-130deg) rotateY(-50deg) rotateZ(-73deg); }
+  69.30% { transform: translate(39em, 107em) translateZ(-94em) rotateX(-140deg) rotateY(-60deg) rotateZ(-53deg); }
+  69.31%, 100.0% { transform: translate(999em, 999em) translateZ(-94em) rotateX(-140deg) rotateY(-60deg) rotateZ(-53deg); }
+}
+@keyframes BridgeCloud1 {
+  00.00%, 66.20% { transform: translate(-16em, -1em)rotateY(-90deg) scale(0); }
+  66.72% { transform: translate(-22em, -1em)rotateY(-90deg) scale(1); }
+  69.37%, 100.0% { transform: translate(-22em, -1em)rotateY(-90deg) scale(0); }
+}
+@keyframes BridgeCloud2 {
+  00.00%, 66.20% { transform: translate(2em, -4em) translateZ(-6em) rotateY(-90deg) scale(0); }
+  66.72% { transform: translate(13em, -4em) translateZ(-6em) rotateY(-90deg) scale(1); }
+  69.37%, 100.0% { transform: translate(13em, -4em) translateZ(-6em) rotateY(-90deg) scale(0); }
+}
+@keyframes BridgeCloud3 {
+  00.00%, 66.20% { transform: translate(-25em, -24em) translateZ(6em) scale(0); }
+  66.72% { transform: translate(-25em, -24em) translateZ(6em) scale(1); }
+  69.37%, 100.0% { transform: translate(-25em, -24em) translateZ(6em) scale(0); }
+}
+@keyframes BridgeCloud4 {
+  00.00%, 66.20% { transform: translate(-2em, -7em) translateZ(-10em) rotateY(-90deg) scale(0); }
+  66.72% { transform: translate(-5em, -7em) translateZ(-10em) rotateY(-90deg) scale(1); }
+  69.37%, 100.0% { transform: translate(-5em, -7em) translateZ(-10em) rotateY(-90deg) scale(0); }
+}
+@keyframes b2Door1 {
+  00.00%, 34.10% {
+    background: linear-gradient(0deg, #3e212f, transparent), linear-gradient(90deg, #6d324c 10%, transparent 0%) -2em 0em/6em 3em repeat-x, linear-gradient(90deg, #733a55 10%, #814364 0%) 0em 0em/1em 6em repeat-x;
+    transform: translate(-12.8em, 4.3em) translateZ(0em) rotateX(-90deg); }
+  35.06%, 100.0% {
+    background: linear-gradient(90deg, #6d324c 10%, transparent 0%) -2em 0em/6em 3em repeat-x, linear-gradient(90deg, #733a55 10%, #814364 0%) 0em 0em/1em 6em repeat-x;
+    transform: translate(-12.8em, 4.3em) translateZ(0em) rotateX(0deg); }
+}
+
+
+
+/* THIRD BUILDING */
+@keyframes thirdBuilding {
+  00.00%, 31.96% { transform: translate(145em, 151em) translateZ(-16em) rotateX(0deg); }
+  31.97%, 100.0% { transform: translate(115em, 151em) translateZ(-16em) rotateX(0deg); }
+}
+@keyframes b3Mp1 {
+  00.00%, 77.64% { transform: translate(-106em, 47em) translateZ(-88em) rotateX(-90deg); }
+  77.79%, 81.99% { transform: translate(-106em, 47em) translateZ(-51em) rotateX(-90deg); }
+  82.29%, 100.0% { transform: translate(-106em, 47em) translateZ(-67em) rotateX(-90deg); }
+}
+  @keyframes b3Mp1DIV {
+    00.00%, 79.11% { transform: translateY(-22em) translateZ(0em) rotateX(0deg); }
+    79.26% { transform: translateY(-22em) translateZ(0em) rotateX(-2deg); }
+    79.41% { transform: translateY(-19em) translateZ(3em) rotateX(-9deg); }
+    79.63% { transform: translateY(-15em) translateZ(5em) rotateX(-18deg); }
+    79.70% { transform: translateY(-7em) translateZ(6em) rotateX(-21deg); }
+    79.93% { transform: translateY(-7em) translateZ(6em) rotateX(-90deg); }
+    81.99% { transform: translateY(-7em) translateZ(13em) rotateX(-90deg); }
+    82.29%, 100.0% { transform: translateY(-23em) translateZ(-3em) rotateX(-90deg); }
+  }
+  @keyframes b3Mp1TopPart {
+    00.00%, 77.64%, 78.60%, 81.99%, 83.32%, 100.0% { background: var(--top-accent-light); }
+    77.71%, 78.08%, 82.07%, 82.73% { background: white; }
+  }
+  @keyframes b3Mp1RightPart {
+    00.00%, 77.64%, 78.60%, 81.99%, 83.32%, 100.0% { background: var(--right-accent-light); }
+    77.71%, 78.08%, 82.07%, 82.73% { background: white; }
+  }
+  @keyframes b3Mp1LeftPart {
+    00.00%, 77.64%, 78.60%, 81.99%, 83.32%, 100.0% {
+      border: 1em solid var(--left-accent-light);
+      background: linear-gradient(45deg, var(--right-accent-dark) 50%, var(--left-accent-dark) 0%);
+      box-shadow: 0 0 6em 2em transparent; }
+    
+    77.71%, 78.08%, 82.07%, 82.73% {
+      border-color: white;
+      background: linear-gradient(45deg, white 50%, white 0%);
+      box-shadow: 0 0 6em 2em white; }
+  }
+@keyframes b3Mp2 {
+  00.00%, 72.77% { transform: translate(-98em, 55em) translateZ(-96em) rotateY(-90deg) rotateZ(-90deg); }
+  73.95% { transform: translate(-98em, 47em) translateZ(-96em) rotateY(-90deg) rotateZ(0deg); }
+  74.10% { transform: translate(-98em, 48em) translateZ(-96em) rotateY(-90deg) rotateZ(-7deg); }
+  74.32%, 100.0% { transform: translate(-98em, 47em) translateZ(-96em) rotateY(-90deg) rotateZ(0deg); }
+}
+@keyframes b3Mp3 {
+  00.00%, 76.60% { transform: translate(-37em, -2em) translateZ(-28em); }
+  76.90%, 92.91% { transform: translate(-53em, -10em) translateZ(-37em); }
+  93.14%, 100.0% { transform: translate(-37em, -2em) translateZ(-28em); }
+}
+  @keyframes b3Mp3TopPart {
+    00.00%, 76.60%, 77.64%, 92.91%, 94.17%, 100.0% { background: var(--top-accent-light); }
+    76.90%, 77.19%, 92.99%, 93.14% { background: white; }
+  }
+  @keyframes b3Mp3LeftPart {
+    00.00%, 76.60%, 77.64%, 92.91%, 94.17%, 100.0% { background: var(--left-accent-light); }
+    76.90%, 77.19%, 92.99%, 93.14% { background: white; }
+  }
+  @keyframes b3Mp3RightPart {
+    00.00%, 76.60%, 77.64%, 92.91%, 94.17%, 100.0% {
+      border: 1em solid var(--right-accent-light);
+      background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
+      box-shadow: 0 0 6em 2em transparent; }
+
+    76.90%, 77.19%, 92.99%, 93.14% {
+      border-color: white;
+      background: linear-gradient(45deg, white 50%, white 0%);
+      box-shadow: 0 0 6em 2em white; }
+  }
+@keyframes b3Mp4 {
+  00.00%, 94.76% { transform: translate(-13em, 18em) translateZ(0em); }
+  95.13%, 95.28%, 100.0% { transform: translate(-13em, 18em) translateZ(-28em); }
+  95.20% { transform: translate(-13em, 18em) translateZ(-25em); }
+}
+
+
+
+/* RO */
+@keyframes ro {
+  00.00% { transform: translate(72em, 35em) translateZ(-32em) rotateX(0deg) rotateZ(0deg); }
+  09.96% { transform: translate(72em, 35em) translateZ(-32em) rotateX(0deg) rotateZ(0deg); }
+  10.18% { transform: translate(72em, 32em) translateZ(-32em) rotateX(0deg) rotateZ(0deg); }
+  11.22% { transform: translate(72em, 16em) translateZ(-16em) rotateX(0deg) rotateZ(0deg); }
+  11.51% { transform: translate(72em, 12em) translateZ(-16em) rotateX(0deg) rotateZ(0deg); }
+  13.51% { transform: translate(72em, 12em) translateZ(-16em) rotateX(0deg) rotateZ(0deg); }
+  13.73% { transform: translate(75em, 12em) translateZ(-15em) rotateX(0deg) rotateZ(0deg); }
+  14.17% { transform: translate(75em, 21em) translateZ(1em) rotateX(0deg) rotateZ(0deg); }
+  14.83% { transform: translate(86em, 21em) translateZ(1em) rotateX(0deg) rotateZ(0deg); }
+  15.50% { transform: translate(70em, 20em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  18.08% { transform: translate(18em, 19em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  18.60% { transform: translate(18em, 10em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  19.19% { transform: translate(18em, 1em) translateZ(23em) rotateX(0deg) rotateZ(0deg); }
+  19.41% { transform: translate(18em, -3em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  20.81% { transform: translate(18em, -3em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  23.76% { transform: translate(80em, -3em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  25.02% { transform: translate(80em, -27em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  25.46% { transform: translate(80em, -27em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  25.83% { transform: translate(80em, -74em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  26.86% { transform: translate(80em, -74em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
+  27.23% { transform: translate(43em, -43em) translateZ(61em) rotateX(0deg) rotateZ(0deg); }
+  29.52% { transform: translate(92em, -43em) translateZ(61em) rotateX(0deg) rotateZ(0deg); }
+  31.96% { transform: translate(50em, 50em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  32.47% { transform: translate(41em, 50em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  32.84% { transform: translate(41em, 42em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  37.93% { transform: translate(41em, 42em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  38.30% { transform: translate(41em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  39.48% { transform: translate(17em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  40.00% { transform: translate(17em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  40.37% { transform: translate(17em, 34em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
+  41.48% { transform: translate(17em, 34em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
+  41.70% { transform: translate(17em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  42.36% { transform: translate(17em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  43.62% { transform: translate(17em, 34em) translateZ(31em) rotateX(0deg) rotateZ(0deg); }
+  44.50% { transform: translate(17em, 34em) translateZ(31em) rotateX(0deg) rotateZ(0deg); }
+  45.39% { transform: translate(17em, 20em) translateZ(31em) rotateX(0deg) rotateZ(0deg); }
+  45.83% { transform: translate(17em, 20em) translateZ(31em) rotateX(0deg) rotateZ(0deg); }
+  46.05% { transform: translate(17em, 20em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
+  47.23% { transform: translate(17em, 20em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
+  47.60% { transform: translate(17em, 13em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
+  48.41% { transform: translate(35em, 13em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
+  48.63% { transform: translate(42em, -29em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  49.08% { transform: translate(42em, -19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  49.52% { transform: translate(49em, -19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  50.77% { transform: translate(49em, -19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  51.51% { transform: translate(33em, -19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  51.96% { transform: translate(33em, -12em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  52.47% { transform: translate(33em, -12em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  52.77% { transform: translate(33em, 19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  53.80% { transform: translate(33em, 19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  54.17% { transform: translate(33em, 27em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  55.13% { transform: translate(56em, 27em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  56.24% { transform: translate(56em, 27em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
+  56.97% { transform: translate(56em, 28em) translateZ(75em) rotateX(0deg) rotateZ(0deg); }
+  58.23% { transform: translate(56em, 37em) translateZ(69em) rotateX(0deg) rotateZ(0deg); }
+  58.38% { transform: translate(56em, 38em) translateZ(68em) rotateX(0deg) rotateZ(0deg); }
+  58.89% { transform: translate(56em, 43em) translateZ(64em) rotateX(0deg) rotateZ(0deg); }
+  59.48% { transform: translate(56em, 48em) translateZ(58em) rotateX(0deg) rotateZ(0deg); }
+  59.93% { transform: translate(56em, 53em) translateZ(54em) rotateX(0deg) rotateZ(0deg); }
+  60.52% { transform: translate(56em, 60em) translateZ(48em) rotateX(0deg) rotateZ(0deg); }
+  60.96% { transform: translate(56em, 64em) translateZ(42em) rotateX(0deg) rotateZ(0deg); }
+  61.40% { transform: translate(56em, 68em) translateZ(21em) rotateX(0deg) rotateZ(0deg); }
+  62.43% { transform: translate(56em, 78em) translateZ(18em) rotateX(0deg) rotateZ(0deg); }
+  62.66% { transform: translate(56em, 80em) translateZ(18em) rotateX(0deg) rotateZ(0deg); }
+  63.25% { transform: translate(56em, 76em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
+  63.54% { transform: translate(56em, 78em) translateZ(13em) rotateX(0deg) rotateZ(0deg); }
+  63.84% { transform: translate(53em, 83em) translateZ(10em) rotateX(0deg) rotateZ(0deg); }
+  64.21% { transform: translate(51em, 85em) translateZ(9em) rotateX(0deg) rotateZ(0deg); }
+  64.80% { transform: translate(51em, 89em) translateZ(1em) rotateX(0deg) rotateZ(0deg); }
+  65.02% { transform: translate(50em, 88em) translateZ(-3em) rotateX(0deg) rotateZ(0deg); }
+  65.61% { transform: translate(48em, 87em) translateZ(-10em) rotateX(0deg) rotateZ(0deg); }
+  66.20% { transform: translate(47em, 94em) translateZ(-16em) rotateX(0deg) rotateZ(0deg); }
+  66.72% { transform: translate(53em, 96em) translateZ(-10em) rotateX(0deg) rotateZ(0deg); }
+  67.31% { transform: translate(55em, 94em) translateZ(-20em) rotateX(0deg) rotateZ(0deg); }
+  67.75% { transform: translate(55.5em, 94em) translateZ(-23em) rotateX(0deg) rotateZ(0deg); }
+  68.34% { transform: translate(55em, 96em) translateZ(-28em) rotateX(0deg) rotateZ(0deg); }
+  68.86% { transform: translate(55em, 98em) translateZ(-31em) rotateX(0deg) rotateZ(0deg); }
+  69.30% { transform: translate(55em, 99em) translateZ(-32em) rotateX(0deg) rotateZ(0deg); }
+  70.18% { transform: translate(61em, 114em) translateZ(-41em) rotateX(0deg) rotateZ(0deg); }
+  71.36% { transform: translate(39em, 134em) translateZ(-57em) rotateX(0deg) rotateZ(0deg); }
+  72.77% { transform: translate(27em, 171em) translateZ(-60em) rotateX(0deg) rotateZ(0deg); }
+  78.74% { transform: translate(27em, 171em) translateZ(-60em) rotateX(0deg) rotateZ(0deg); }
+  79.11% { transform: translate(12em, 195em) translateZ(-44em) rotateX(0deg) rotateZ(0deg); }
+  79.26% { transform: translate(12em, 195.5em) translateZ(-44em) rotateX(2deg) rotateZ(4deg); }
+  79.41% { transform: translate(12em, 201em) translateZ(-47em) rotateX(-10deg) rotateZ(14deg); }
+  79.63% { transform: translate(12em, 206em) translateZ(-51em) rotateX(-24deg) rotateZ(35deg); }
+  79.70% { transform: translate(12em, 208em) translateZ(-59em) rotateX(-30deg) rotateZ(41deg); }
+  79.93% { transform: translate(13em, 227em) translateZ(-77em) rotateX(-90deg) rotateZ(90deg); }
+  81.99% { transform: translate(13em, 234em) translateZ(-77em) rotateX(-90deg) rotateZ(90deg); }
+  82.29% { transform: translate(13em, 218em) translateZ(-77em) rotateX(-90deg) rotateZ(90deg); }
+  83.47% { transform: translate(13em, 218em) translateZ(-77em) rotateX(-90deg) rotateZ(90deg); }
+  84.57% { transform: translate(13em, 218em) translateZ(-106em) rotateX(-90deg) rotateZ(90deg); }
+  85.24% { transform: translate(40em, 218em) translateZ(-106em) rotateX(-90deg) rotateZ(90deg); }
+  85.68% { transform: translate(46em, 223em) translateZ(-106em) rotateX(-90deg) rotateZ(90deg); }
+  85.83% { transform: translate(49em, 223em) translateZ(-106em) rotateX(-90deg) rotateZ(90deg); }
+  86.79% { transform: translate(49em, 223em) translateZ(-87em) rotateX(-90deg) rotateZ(90deg); }
+  87.23% { transform: translate(49em, 215em) translateZ(-78em) rotateX(-90deg) rotateZ(90deg); }
+  87.67% { transform: translate(49em, 215em) translateZ(-67em) rotateX(-90deg) rotateZ(90deg); }
+  87.97% { transform: translate(49em, 215em) translateZ(-64em) rotateX(-66deg) rotateZ(80deg); }
+  88.19% { transform: translate(49em, 214em) translateZ(-62em) rotateX(-54deg) rotateZ(70deg); }
+  88.41% { transform: translate(49em, 211em) translateZ(-58em) rotateX(-43deg) rotateZ(50deg); }
+  88.63% { transform: translate(49em, 207em) translateZ(-55em) rotateX(-31deg) rotateZ(50deg); }
+  88.86% { transform: translate(49em, 203em) translateZ(-53em) rotateX(-18deg) rotateZ(27deg); }
+  89.00% { transform: translate(49em, 201em) translateZ(-53em) rotateX(0deg) rotateZ(0deg); }
+  91.73% { transform: translate(49em, 146em) translateZ(-52em) rotateX(0deg) rotateZ(0deg); }
+  92.91% { transform: translate(71em, 146em) translateZ(-52em) rotateX(0deg) rotateZ(0deg); }
+  93.14% { transform: translate(89em, 154em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
+  93.73% { transform: translate(89em, 154em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
+  94.17% { transform: translate(96em, 154em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
+  95.28% { transform: translate(96em, 154em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
+  95.79% { transform: translate(96em, 163em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
+  100.0% { transform: translate(96em, 163em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
+}
+  @keyframes roArmL {
+    00.00%, 96.01% { background: transparent; }
+    96.16%, 100.0% { background: white; }
+    00.00%, 96.01% { transform: translate(-3px, 5px) translateZ(30px) rotateX(-90deg) rotateZ(4deg); }
+    96.31% { transform: translate(-3px, 5px) translateZ(30px) rotateX(-90deg) rotateZ(-20deg); }
+    96.68%, 100.0% { transform: translate(-3px, 5px) translateZ(30px) rotateX(-90deg) rotateZ(-10deg); }
+  }
+    @keyframes roHandL {
+      00.00%, 96.31% { transform: translateY(8px) rotate(-10deg); }
+      96.68%, 100.0% { transform: translateY(8px) rotate(-40deg); }
+      00.00%, 96.01% { background: transparent; }
+      96.31%, 100.0% { background: white; }
+    }
+  @keyframes roArmR {
+    00.00%, 96.01% { transform: translate(4px, 0px) translateZ(24px) rotateX(-90deg) rotateY(0deg) rotateZ(-10deg); }
+    96.31%, 100.0% { transform: translate(4px, 0px) translateZ(24px) rotateX(-90deg) rotateY(0deg) rotateZ(-33deg); }
+    00.00%, 96.01% { background: transparent; }
+    96.16%, 100.0% { background: white; }
+  }
+    @keyframes roHandR {
+      00.00%, 96.01% {
+        transform: translate(0px, 8px) rotate(-10deg);
+        background: transparent; }
+      96.31%, 100.0% {
+        transform: translate(0px, 8px) rotate(-10deg);
+        background: white; }
+    }
+  @keyframes ro1 {
+    00.00%, 13.51%, 14.84%, 15.50%, 18.09%, 20.81%, 23.77%, 27.23%, 32.48%, 32.84%, 37.94%, 38.30%, 44.51%, 47.60%, 49.53%, 49.59%, 59.49%, 66.20%, 84.58%, 91.73% {
+      opacity: 1; }
+    13.52%, 14.83%, 15.51%, 18.08%, 20.82%, 23.76%, 27.24%, 32.47%, 32.85%, 37.93%, 38.31%, 44.50%, 47.61%, 49.52%, 49.60%, 59.48%, 66.21%, 84.57%, 91.74%, 100.0% {
+      opacity: 0; }
+
+    00.00%, 09.96%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 11.44%, 14.76%, 14.91%, 15.06%, 15.20%, 15.35%, 15.50%, 18.01%, 18.15%, 18.30%, 18.45%, 18.60%, 18.75%, 18.89%, 19.04%, 19.19%, 19.34%, 23.69%, 23.84%, 23.99%, 24.13%, 24.28%, 24.43%, 24.58%, 24.72%, 24.87%, 25.02%, 26.86%, 27.01%, 27.16%, 27.31%, 32.40%, 32.55%, 32.69%, 32.84%, 37.93%, 38.08%, 38.23%, 38.38%, 44.50%, 44.65%, 44.80%, 44.94%, 45.09%, 45.24%, 45.39%, 47.23%, 47.38%, 47.53%, 47.67%, 62.66%, 62.80%, 62.95%, 63.10%, 63.25%, 63.39%, 84.57%, 84.72%, 84.87%, 85.02%, 85.17%, 85.31%, 85.46%, 85.61%, 85.76%, 85.90%, 88.12%, 88.26%, 88.41%, 88.56%, 88.71%, 88.86%, 89.00%, 89.15%, 89.30%, 89.45%, 89.59%, 89.74%, 89.89%, 90.04%, 90.18%, 90.33%, 90.48%, 90.63%, 90.77%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 91.66%, 100.0% {
+      transform: rotateX(-90deg) scale(0.07); }
+    10.04%, 10.18%, 10.33%, 10.48%, 10.63%, 10.77%, 10.92%, 11.07%, 11.22%, 11.37%, 14.83%, 14.98%, 15.13%, 15.28%, 15.42%, 18.08%, 18.23%, 18.38%, 18.52%, 18.67%, 18.82%, 18.97%, 19.11%, 19.26%, 23.76%, 23.91%, 24.06%, 24.21%, 24.35%, 24.50%, 24.65%, 24.80%, 24.94%, 26.94%, 27.08%, 27.23%, 32.47%, 32.62%, 32.77%, 38.01%, 38.15%, 38.30%, 44.58%, 44.72%, 44.87%, 45.02%, 45.17%, 45.31%, 47.31%, 47.45%, 47.60%, 62.73%, 62.88%, 63.03%, 63.17%, 63.32%, 84.65%, 84.80%, 84.94%, 85.09%, 85.24%, 85.39%, 85.53%, 85.68%, 85.83%, 88.19%, 88.34%, 88.49%, 88.63%, 88.78%, 88.93%, 89.08%, 89.22%, 89.37%, 89.52%, 89.67%, 89.81%, 89.96%, 90.11%, 90.26%, 90.41%, 90.55%, 90.70%, 90.85%, 91.00%, 91.14%, 91.29%, 91.44%, 91.59% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.07); }
+  }
+    @keyframes ro1LegL {
+      00.00%, 09.96%, 10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 11.51%, 14.76%, 14.98%, 15.28%, 15.57%, 18.01%, 18.23%, 18.52%, 18.82%, 19.11%, 19.41%, 23.69%, 23.91%, 24.21%, 24.50%, 24.80%, 25.02%, 26.86%, 27.08%, 27.31%, 32.40%, 32.62%, 32.84%, 37.93%, 38.15%, 38.38%, 44.50%, 44.72%, 45.02%, 45.31%, 47.23%, 47.45%, 47.67%, 62.66%, 62.88%, 63.17%, 63.39%, 84.57%, 84.80%, 85.09%, 85.39%, 85.68%, 85.90%, 88.12%, 88.34%, 88.63%, 88.93%, 89.22%, 89.52%, 89.81%, 90.11%, 90.41%, 90.70%, 91.00%, 91.29%, 91.59%, 91.73%, 100.0% {
+        transform: translate(13px, -187px) skewY(32deg) rotate(6deg); }
+      10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 14.83%, 15.13%, 15.42%, 18.08%, 18.38%, 18.67%, 18.97%, 19.26%, 23.76%, 24.06%, 24.35%, 24.65%, 24.94%, 26.94%, 27.23%, 32.47%, 32.77%, 38.01%, 38.30%, 44.58%, 44.87%, 45.17%, 47.31%, 47.60%, 62.73%, 63.03%, 63.32%, 84.65%, 84.94%, 85.24%, 85.53%, 85.83%, 88.19%, 88.49%, 88.78%, 89.08%, 89.37%, 89.67%, 89.96%, 90.26%, 90.55%, 90.85%, 91.14%, 91.44% {
+        transform: translate(13px, -187px) skewY(32deg) rotate(40deg); }
+      10.11%, 10.41%, 10.70%, 11.00%, 11.29%, 14.91%, 15.20%, 15.50%, 18.15%, 18.45%, 18.75%, 19.04%, 19.34%, 23.84%, 24.13%, 24.43%, 24.72%, 27.01%, 32.55%, 38.08%, 44.65%, 44.94%, 45.24%, 47.38%, 62.80%, 63.10%, 84.72%, 85.02%, 85.31%, 85.61%, 88.26%, 88.56%, 88.86%, 89.15%, 89.45%, 89.74%, 90.04%, 90.33%, 90.63%, 90.92%, 91.22%, 91.51% {
+        transform: translate(13px, -187px) skewY(32deg) rotate(20deg); }
+      10.26%, 10.55%, 10.85%, 11.14%, 11.44%, 15.06%, 15.35%, 18.30%, 18.60%, 18.89%, 19.19%, 23.99%, 24.28%, 24.58%, 24.87%, 27.16%, 32.69%, 38.23%, 44.80%, 45.09%, 47.53%, 62.95%, 63.25%, 84.87%, 85.17%, 85.46%, 85.76%, 88.41%, 88.71%, 89.00%, 89.30%, 89.59%, 89.89%, 90.18%, 90.48%, 90.77%, 91.07%, 91.36%, 91.66% {
+        transform: translate(13px, -187px) skewY(32deg) rotate(-20deg); }
+    }
+    @keyframes ro1KneeL {
+      00.00%, 09.96%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 14.76%, 14.91%, 15.06%, 15.20%, 15.35%, 15.50%, 18.01%, 18.15%, 18.30%, 18.45%, 18.60%, 18.75%, 18.89%, 19.04%, 19.19%, 19.34%, 23.69%, 23.84%, 23.99%, 24.13%, 24.28%, 24.43%, 24.58%, 24.72%, 24.87%, 25.02%, 26.86%, 27.01%, 27.16%, 27.31%, 32.40%, 32.55%, 32.69%, 32.84%, 37.93%, 38.08%, 38.23%, 38.38%, 44.50%, 44.65%, 44.80%, 44.94%, 45.09%, 45.24%, 47.23%, 47.38%, 47.53%, 47.67%, 62.66%, 62.80%, 62.95%, 63.10%, 63.25%, 63.39%, 84.57%, 84.72%, 84.87%, 85.02%, 85.17%, 85.31%, 85.46%, 85.61%, 85.76%, 85.90%, 88.12%, 88.26%, 88.41%, 88.56%, 88.71%, 88.86%, 89.00%, 89.15%, 89.30%, 89.45%, 89.59%, 89.74%, 89.89%, 90.04%, 90.18%, 90.33%, 90.48%, 90.63%, 90.77%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 100.0% {
+        transform: translate(-29px, 85px) rotate(-12deg); }
+      10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 14.83%, 15.13%, 15.42%, 18.08%, 18.38%, 18.67%, 18.97%, 19.26%, 23.76%, 24.06%, 24.35%, 24.65%, 24.94%, 26.94%, 27.23%, 32.47%, 32.77%, 38.01%, 38.30%, 44.58%, 44.87%, 45.17%, 47.31%, 47.60%, 62.73%, 63.03%, 63.32%, 84.65%, 84.94%, 85.24%, 85.53%, 85.83%, 88.19%, 88.49%, 88.78%, 89.08%, 89.37%, 89.67%, 89.96%, 90.26%, 90.55%, 90.85%, 91.14%, 91.44% {
+        transform: translate(-29px, 85px) rotate(-60deg); }
+    }
+    @keyframes ro1LegR {
+      00.00%, 10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 11.51%, 14.83%, 15.13%, 15.42%, 15.57%, 18.08%, 18.38%, 18.67%, 18.97%, 19.26%, 19.41%, 23.76%, 24.06%, 24.35%, 24.65%, 24.94%, 26.94%, 27.23%, 32.47%, 32.77%, 38.01%, 38.30%, 44.58%, 44.87%, 45.17%, 45.39%, 47.31%, 47.60%, 62.73%, 63.03%, 63.32%, 84.65%, 84.94%, 85.24%, 85.53%, 85.83%, 88.19%, 88.49%, 88.78%, 89.08%, 89.37%, 89.67%, 89.96%, 90.26%, 90.55%, 90.85%, 91.14%, 91.44%, 91.73%, 100.0% {
+        transform: translate(63px, -187px) skewY(32deg) rotate(6deg); }
+      10.11%, 10.41%, 10.70%, 11.00%, 11.29%, 14.91%, 15.20%, 15.50%, 18.15%, 18.45%, 18.75%, 19.04%, 19.34%, 23.84%, 24.13%, 24.43%, 24.72%, 27.01%, 32.55%, 38.08%, 44.65%, 44.94%, 45.24%, 47.38%, 62.80%, 63.10%, 84.72%, 85.02%, 85.31%, 85.61%, 88.26%, 88.56%, 88.86%, 89.15%, 89.45%, 89.74%, 90.04%, 90.33%, 90.63%, 90.92%, 91.22%, 91.51% {
+        transform: translate(63px, -187px) skewY(32deg) rotate(-20deg); }
+      10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 14.98%, 15.28%, 18.23%, 18.52%, 18.82%, 19.11%, 23.91%, 24.21%, 24.50%, 24.80%, 27.08%, 32.62%, 38.15%, 44.72%, 45.02%, 45.31%, 47.45%, 62.88%, 63.17%, 84.80%, 85.09%, 85.39%, 85.68%, 88.34%, 88.63%, 88.93%, 89.22%, 89.52%, 89.81%, 90.11%, 90.41%, 90.70%, 91.00%, 91.29%, 91.59% {
+        transform: translate(63px, -187px) skewY(32deg) rotate(40deg); }
+      10.26%, 10.55%, 10.85%, 11.14%, 11.44%, 15.06%, 15.35%, 18.30%, 18.60%, 18.89%, 19.19%, 23.99%, 24.28%, 24.58%, 24.87%, 27.16%, 32.69%, 38.23%, 44.80%, 45.09%, 47.53%, 62.95%, 63.25%, 84.87%, 85.17%, 85.46%, 85.76%, 88.41%, 88.71%, 89.00%, 89.30%, 89.59%, 89.89%, 90.18%, 90.48%, 90.77%, 91.07%, 91.36%, 91.66% {
+        transform: translate(63px, -187px) skewY(32deg) rotate(20deg); }
+    }
+    @keyframes ro1KneeR {
+      00.00%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 11.44%, 14.91%, 15.06%, 15.20%, 15.35%, 18.15%, 18.30%, 18.45%, 18.60%, 18.75%, 18.89%, 19.04%, 19.19%, 23.84%, 23.99%, 24.13%, 24.28%, 24.43%, 24.58%, 24.72%, 24.87%, 27.01%, 27.16%, 32.55%, 32.69%, 38.08%, 38.23%, 44.65%, 44.80%, 44.94%, 45.09%, 45.24%, 45.39%, 47.38%, 47.53%, 62.80%, 62.95%, 63.10%, 63.25%, 84.72%, 84.87%, 85.02%, 85.17%, 85.31%, 85.46%, 85.61%, 85.76%, 88.26%, 88.41%, 88.56%, 88.71%, 88.86%, 89.00%, 89.15%, 89.30%, 89.45%, 89.59%, 89.74%, 89.89%, 90.04%, 90.18%, 90.33%, 90.48%, 90.63%, 90.77%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 91.66%, 100.0% {
+        transform: translate(-29px, 85px) rotate(-12deg); }
+      10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 14.98%, 15.28%, 18.23%, 18.52%, 18.82%, 19.11%, 23.91%, 24.21%, 24.50%, 24.80%, 27.08%, 32.62%, 38.15%, 44.72%, 45.02%, 45.31%, 47.45%, 62.88%, 63.17%, 84.80%, 85.09%, 85.39%, 85.68%, 88.34%, 88.63%, 88.93%, 89.22%, 89.52%, 89.81%, 90.11%, 90.41%, 90.70%, 91.00%, 91.29%, 91.59% {
+        transform: translate(-29px, 85px) rotate(-60deg); }
+    }
+
+  @keyframes ro2 {
+    00.00%, 13.51%, 14.84%, 20.81%, 23.77%, 27.23%, 29.53%, 47.60%, 48.42%, 49.08%, 49.53%, 54.17%, 55.14%, 66.20%, 69.31%, 72.77%, 78.75%, 79.11%, 84.58%, 91.73%, 95.29%, 100.0% {
+      opacity: 0; }
+    13.52%, 14.83%, 20.82%, 23.76%, 27.24%, 29.52%, 47.61%, 48.41%, 49.09%, 49.52%, 54.18%, 55.13%, 66.21%, 69.30%, 72.78%, 78.74%, 79.12%, 84.57%, 91.74%, 95.28% {
+      opacity: 1; }
+
+    00.00%, 13.43%, 13.58%, 13.73%, 13.87%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 20.81%, 20.96%, 21.11%, 21.25%, 21.40%, 21.55%, 21.70%, 21.84%, 21.99%, 22.14%, 22.29%, 22.44%, 22.58%, 22.73%, 22.88%, 23.03%, 23.17%, 23.32%, 23.47%, 23.62%, 23.76%, 27.16%, 27.31%, 27.45%, 27.60%, 27.75%, 27.90%, 28.04%, 28.19%, 28.34%, 28.49%, 28.63%, 28.78%, 28.93%, 29.08%, 29.22%, 29.37%, 29.52%, 47.53%, 47.67%, 47.82%, 47.97%, 48.12%, 48.27%, 48.41%, 49.00%, 49.15%, 49.30%, 49.45%, 54.10%, 54.24%, 54.39%, 54.54%, 54.69%, 54.83%, 54.98%, 55.13%, 66.20%, 66.35%, 66.49%, 66.64%, 83.47%, 83.62%, 83.76%, 83.91%, 84.06%, 84.21%, 84.35%, 84.50%, 84.65%, 91.66%, 91.81%, 91.95%, 92.10%, 92.25%, 92.40%, 92.55%, 92.69%, 92.84%, 93.73%, 93.87%, 94.02%, 94.17%, 100.0% {
+      transform: rotateX(-90deg) scale(0.07); }
+    13.51%, 13.65%, 13.80%, 13.95%, 14.10%, 14.24%, 14.39%, 14.54%, 14.69%, 20.89%, 21.03%, 21.18%, 21.33%, 21.48%, 21.62%, 21.77%, 21.92%, 22.07%, 22.21%, 22.36%, 22.51%, 22.66%, 22.80%, 22.95%, 23.10%, 23.25%, 23.39%, 23.54%, 23.69%, 27.23%, 27.38%, 27.53%, 27.68%, 27.82%, 27.97%, 28.12%, 28.27%, 28.41%, 28.56%, 28.71%, 28.86%, 29.00%, 29.15%, 29.30%, 29.45%, 47.60%, 47.75%, 47.90%, 48.04%, 48.19%, 48.34%, 49.08%, 49.22%, 49.37%, 54.17%, 54.32%, 54.46%, 54.61%, 54.76%, 54.91%, 55.05%, 66.27%, 66.42%, 66.57%, 83.54%, 83.69%, 83.84%, 83.98%, 84.13%, 84.28%, 84.43%, 84.57%, 91.73%, 91.88%, 92.03%, 92.18%, 92.32%, 92.47%, 92.62%, 92.77%, 93.80%, 93.95%, 94.10% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.07); }
+  }
+    @keyframes ro2LegL {
+      00.00%, 13.51%, 13.80%, 14.10%, 14.39%, 14.69%, 14.83%, 20.89%, 21.18%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 23.84%, 27.23%, 27.53%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 29.52%, 47.60%, 47.90%, 48.19%, 48.41%, 49.08%, 49.37%, 49.52%, 54.17%, 54.46%, 54.76%, 55.05%, 66.27%, 66.57%, 66.72%, 83.54%, 83.84%, 84.13%, 84.43%, 84.65%, 91.73%, 92.03%, 92.32%, 92.62%, 92.91%, 93.80%, 94.10%, 100.0% {
+        transform: translate(8px, -196px) skewY(10deg) rotate(-6deg); }
+      13.58%, 13.87%, 14.17%, 14.46%, 14.76%, 20.96%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 27.31%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 47.67%, 47.97%, 48.27%, 49.15%, 49.45%, 54.24%, 54.54%, 54.83%, 66.35%, 66.64%, 83.62%, 83.91%, 84.21%, 84.50%, 91.81%, 92.10%, 92.40%, 92.69%, 93.87% {
+        transform: translate(8px, -196px) skewY(10deg) rotate(20deg); }
+      13.65%, 13.95%, 14.24%, 14.54%, 21.03%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 27.38%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 47.75%, 48.04%, 48.34%, 49.22%, 54.32%, 54.61%, 54.91%, 66.42%, 83.69%, 83.98%, 84.28%, 84.57%, 91.88%, 92.18%, 92.47%, 92.77%, 93.95% {
+        transform: translate(8px, -196px) skewY(10deg) rotate(-40deg); }
+      13.73%, 14.02%, 14.32%, 14.61%, 21.11%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 27.45%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 47.82%, 48.12%, 49.30%, 54.39%, 54.69%, 54.98%, 66.49%, 83.76%, 84.06%, 84.35%, 91.95%, 92.25%, 92.55%, 92.84%, 94.02% {
+        transform: translate(8px, -196px) skewY(10deg) rotate(-20deg); }
+    }
+    @keyframes ro2KneeL {
+      00.00%, 13.58%, 13.73%, 13.87%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 20.96%, 21.11%, 21.25%, 21.40%, 21.55%, 21.70%, 21.84%, 21.99%, 22.14%, 22.29%, 22.44%, 22.58%, 22.73%, 22.88%, 23.03%, 23.17%, 23.32%, 23.47%, 23.62%, 23.76%, 27.31%, 27.45%, 27.60%, 27.75%, 27.90%, 28.04%, 28.19%, 28.34%, 28.49%, 28.63%, 28.78%, 28.93%, 29.08%, 29.22%, 29.37%, 29.52%, 47.67%, 47.82%, 47.97%, 48.12%, 48.27%, 48.41%, 49.15%, 49.30%, 54.24%, 54.39%, 54.54%, 54.69%, 54.83%, 54.98%, 66.35%, 66.49%, 83.62%, 83.76%, 83.91%, 84.06%, 84.21%, 84.35%, 84.50%, 84.65%, 91.81%, 91.95%, 92.10%, 92.25%, 92.40%, 92.55%, 92.69%, 92.84%, 93.87%, 94.02%, 100.0% {
+        transform: translateY(85px) rotate(12deg); }
+      13.65%, 13.95%, 14.24%, 14.54%, 21.03%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 27.38%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 47.75%, 48.04%, 48.34%, 49.22%, 54.32%, 54.61%, 54.91%, 66.42%, 83.69%, 83.98%, 84.28%, 84.57%, 91.88%, 92.18%, 92.47%, 92.77%, 93.95% {
+        transform: translateY(85px) rotate(60deg); }
+    }
+    @keyframes ro2LegR {
+      00.00%, 13.43%, 13.65%, 13.95%, 14.24%, 14.54%, 14.83%, 20.81%, 21.03%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 23.84%, 27.16%, 27.38%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 47.53%, 47.75%, 48.04%, 48.34%, 49.00%, 49.22%, 49.52%, 54.10%, 54.32%, 54.61%, 54.91%, 55.13%, 66.20%, 66.42%, 66.72%, 83.47%, 83.69%, 83.98%, 84.28%, 84.57%, 91.66%, 91.88%, 92.18%, 92.47%, 92.77%, 92.91%, 93.73%, 93.95%, 94.17%, 100.0% {
+        transform: translate(64px, -157px) skewY(10deg) rotate(-6deg); }
+      13.51%, 13.80%, 14.10%, 14.39%, 14.69%, 20.89%, 21.18%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 27.23%, 27.53%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 47.60%, 47.90%, 48.19%, 49.08%, 49.37%, 54.17%, 54.46%, 54.76%, 55.05%, 66.27%, 66.57%, 83.54%, 83.84%, 84.13%, 84.43%, 91.73%, 92.03%, 92.32%, 92.62%, 93.80%, 94.10% {
+        transform: translate(64px, -157px) skewY(10deg) rotate(-40deg); }
+      13.58%, 13.87%, 14.17%, 14.46%, 14.76%, 20.96%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 27.31%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 47.67%, 47.97%, 48.27%, 49.15%, 49.45%, 54.24%, 54.54%, 54.83%, 66.35%, 66.64%, 83.62%, 83.91%, 84.21%, 84.50%, 91.81%, 92.10%, 92.40%, 92.69%, 93.87% {
+        transform: translate(64px, -157px) skewY(10deg) rotate(-20deg); }
+      13.73%, 14.02%, 14.32%, 14.61%, 21.11%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 27.45%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 47.82%, 48.12%, 49.30%, 54.39%, 54.69%, 54.98%, 66.49%, 83.76%, 84.06%, 84.35%, 91.95%, 92.25%, 92.55%, 92.84%, 94.02% {
+        transform: translate(64px, -157px) skewY(10deg) rotate(20deg); }
+    }
+    @keyframes ro2KneeR {
+      00.00%, 13.43%, 13.58%, 13.73%, 13.87%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 20.81%, 20.96%, 21.11%, 21.25%, 21.40%, 21.55%, 21.70%, 21.84%, 21.99%, 22.14%, 22.29%, 22.44%, 22.58%, 22.73%, 22.88%, 23.03%, 23.17%, 23.32%, 23.47%, 23.62%, 27.16%, 27.31%, 27.45%, 27.60%, 27.75%, 27.90%, 28.04%, 28.19%, 28.34%, 28.49%, 28.63%, 28.78%, 28.93%, 29.08%, 29.22%, 29.37%, 47.53%, 47.67%, 47.82%, 47.97%, 48.12%, 48.27%, 49.00%, 49.15%, 49.30%, 49.45%, 54.10%, 54.24%, 54.39%, 54.54%, 54.69%, 54.83%, 54.98%, 55.13%, 66.20%, 66.35%, 66.49%, 66.64%, 83.47%, 83.62%, 83.76%, 83.91%, 84.06%, 84.21%, 84.35%, 84.50%, 91.66%, 91.81%, 91.95%, 92.10%, 92.25%, 92.40%, 92.55%, 92.69%, 93.73%, 93.87%, 94.02%, 94.17%, 100.0% {
+        transform: translateY(85px) rotate(12deg); }
+	
+      13.51%, 13.80%, 14.10%, 14.39%, 14.69%, 20.89%, 21.18%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 27.23%, 27.53%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 47.60%, 47.90%, 48.19%, 49.08%, 49.37%, 54.17%, 54.46%, 54.76%, 55.05%, 66.27%, 66.57%, 83.54%, 83.84%, 84.13%, 84.43%, 91.73%, 92.03%, 92.32%, 92.62%, 93.80%, 94.10% {
+        transform: translateY(85px) rotate(60deg); }
+    }
+
+  @keyframes ro3 {
+    00.00%, 15.50%, 18.09%, 31.96%, 32.48%, 32.84%, 32.92%, 38.30%, 44.51%, 49.59%, 51.52%, 55.20%, 59.49%, 85.83%, 88.20%, 100.0% {
+      opacity: 0; }
+    15.51%, 18.08%, 31.97%, 32.47%, 32.85%, 32.91%, 38.31%, 44.50%, 49.60%, 51.51%, 55.21%, 59.48%, 85.84%, 88.19% {
+      opacity: 1; }
+
+    00.00%, 15.42%, 15.57%, 15.72%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 31.96%, 32.10%, 32.25%, 32.40%, 32.55%, 38.30%, 38.45%, 38.60%, 38.75%, 38.89%, 39.04%, 39.19%, 39.34%, 39.48%, 50.77%, 50.92%, 51.07%, 51.22%, 51.36%, 51.51%, 85.76%, 85.90%, 86.05%, 86.20%, 86.35%, 86.49%, 86.64%, 86.79%, 86.94%, 87.08%, 87.23%, 87.38%, 87.53%, 87.67%, 87.82%, 87.97%, 88.12%, 88.19%, 100.0% {
+      transform: rotateX(-90deg) scale(0.07); }
+    15.50%, 15.65%, 15.79%, 15.94%, 16.09%, 16.24%, 16.38%, 16.53%, 16.68%, 16.83%, 16.97%, 17.12%, 17.27%, 17.42%, 17.56%, 17.71%, 17.86%, 18.01%, 32.03%, 32.18%, 32.32%, 32.47%, 38.38%, 38.52%, 38.67%, 38.82%, 38.97%, 39.11%, 39.26%, 39.41%, 50.85%, 51.00%, 51.14%, 51.29%, 51.44%, 85.83%, 85.98%, 86.12%, 86.27%, 86.42%, 86.57%, 86.72%, 86.86%, 87.01%, 87.16%, 87.31%, 87.45%, 87.60%, 87.75%, 87.90%, 88.04% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.07); }
+  }
+    @keyframes ro3LegL {
+      00.00%, 15.50%, 15.79%, 16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 18.15%, 32.03%, 32.32%, 32.55%, 38.38%, 38.67%, 38.97%, 39.26%, 39.48%, 50.85%, 51.14%, 51.44%, 51.59%, 85.83%, 86.12%, 86.42%, 86.72%, 87.01%, 87.31%, 87.60%, 87.90%, 88.19%, 100.0% {
+        transform: translate(8px, -196px) rotate(0deg); }
+      15.57%, 15.87%, 16.16%, 16.46%, 16.75%, 17.05%, 17.34%, 17.64%, 17.93%, 32.10%, 32.40%, 38.45%, 38.75%, 39.04%, 39.34%, 50.92%, 51.22%, 51.51%, 85.90%, 86.20%, 86.49%, 86.79%, 87.08%, 87.38%, 87.67%, 87.97% {
+        transform: translate(8px, -196px) rotate(-20deg); }
+      15.65%, 15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 32.18%, 32.47%, 38.52%, 38.82%, 39.11%, 39.41%, 51.00%, 51.29%, 85.98%, 86.27%, 86.57%, 86.86%, 87.16%, 87.45%, 87.75%, 88.04% {
+        transform: translate(8px, -196px) rotate(40deg); }
+      15.72%, 16.01%, 16.31%, 16.61%, 16.90%, 17.20%, 17.49%, 17.79%, 18.08%, 32.25%, 38.60%, 38.89%, 39.19%, 51.07%, 51.36%, 86.05%, 86.35%, 86.64%, 86.94%, 87.23%, 87.53%, 87.82%, 88.12% {
+        transform: translate(8px, -196px) rotate(20deg); }
+    }
+    @keyframes ro3KneeL {
+      00.00%, 15.57%, 15.72%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 32.10%, 32.25%, 32.40%, 32.55%, 38.45%, 38.60%, 38.75%, 38.89%, 39.04%, 39.19%, 39.34%, 39.48%, 50.92%, 51.07%, 51.22%, 51.36%, 85.90%, 86.05%, 86.20%, 86.35%, 86.49%, 86.64%, 86.79%, 86.94%, 87.08%, 87.23%, 87.38%, 87.53%, 87.67%, 87.82%, 87.97%, 88.12%, 100.0% {
+        transform: translate(-29px, 85px) rotate(-6deg); }
+      15.65%, 15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 32.18%, 32.47%, 38.52%, 38.82%, 39.11%, 39.41%, 51.00%, 51.29%, 85.98%, 86.27%, 86.57%, 86.86%, 87.16%, 87.45%, 87.75%, 88.04% {
+        transform: translate(-29px, 85px) rotate(-60deg); }
+    }
+    @keyframes ro3LegR {
+      00.00%, 15.42%, 15.65%, 15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 18.15%, 31.96%, 32.18%, 32.47%, 38.30%, 38.52%, 38.82%, 39.11%, 39.41%, 50.77%, 51.00%, 51.29%, 51.59%, 85.76%, 85.98%, 86.27%, 86.57%, 86.86%, 87.16%, 87.45%, 87.75%, 88.04%, 88.19%, 100.0% {
+        transform: translate(64px, -157px) rotate(0deg); }
+      15.50%, 15.79%, 16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 32.03%, 32.32%, 38.38%, 38.67%, 38.97%, 39.26%, 50.85%, 51.14%, 51.44%, 85.83%, 86.12%, 86.42%, 86.72%, 87.01%, 87.31%, 87.60%, 87.90% {
+        transform: translate(64px, -157px) rotate(40deg); }
+      15.57%, 15.87%, 16.16%, 16.46%, 16.75%, 17.05%, 17.34%, 17.64%, 17.93%, 32.10%, 32.40%, 38.45%, 38.75%, 39.04%, 39.34%, 50.92%, 51.22%, 51.51%, 85.90%, 86.20%, 86.49%, 86.79%, 87.08%, 87.38%, 87.67%, 87.97% {
+        transform: translate(64px, -157px) rotate(20deg); }
+      15.72%, 16.01%, 16.31%, 16.61%, 16.90%, 17.20%, 17.49%, 17.79%, 18.08%, 32.25%, 38.60%, 38.89%, 39.19%, 51.07%, 51.36%, 86.05%, 86.35%, 86.64%, 86.94%, 87.23%, 87.53%, 87.82%, 88.12% {
+        transform: translate(64px, -157px) rotate(-20deg); }
+    }
+    @keyframes ro3KneeR {
+      00.00%, 15.42%, 15.57%, 15.72%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 31.96%, 32.10%, 32.25%, 32.40%, 38.30%, 38.45%, 38.60%, 38.75%, 38.89%, 39.04%, 39.19%, 39.34%, 50.77%, 50.92%, 51.07%, 51.22%, 51.36%, 51.51%, 85.76%, 85.90%, 86.05%, 86.20%, 86.35%, 86.49%, 86.64%, 86.79%, 86.94%, 87.08%, 87.23%, 87.38%, 87.53%, 87.67%, 87.82%, 87.97%, 100.0% {
+        transform: translate(-29px, 85px) rotate(-6deg); }
+      15.50%, 15.79%, 16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 32.03%, 32.32%, 38.38%, 38.67%, 38.97%, 39.26%, 50.85%, 51.14%, 51.44%, 85.83%, 86.12%, 86.42%, 86.72%, 87.01%, 87.31%, 87.60%, 87.90% {
+        transform: translate(-29px, 85px) rotate(-60deg); }
+    }
+  
+  @keyframes ro4 {
+    00.00%, 32.91%, 37.94%, 48.63%, 49.09%, 51.51%, 54.18%, 55.13%, 55.21%, 69.30%, 72.78%, 78.74%, 79.12%, 95.28% {
+      opacity: 0; }
+    32.92%, 37.93%, 48.64%, 49.08%, 51.52%, 54.17%, 55.14%, 55.20%, 69.31%, 72.77%, 78.75%, 79.11%, 95.29%, 100.0% {
+      opacity: 1; }
+
+    00.00%, 48.63%, 48.78%, 48.93%, 49.08%, 49.15%, 51.44%, 51.59%, 51.73%, 51.88%, 51.96%, 53.80%, 53.95%, 54.10%, 54.24%, 69.30%, 69.45%, 69.59%, 69.74%, 69.89%, 70.04%, 70.18%, 78.74%, 78.89%, 79.04%, 79.11%, 95.28%, 95.42%, 95.57%, 95.72%, 95.79%, 100.0% {
+      transform: rotateX(-90deg) scale(0.07); }
+    48.71%, 48.86%, 49.00%, 51.51%, 51.66%, 51.81%, 53.87%, 54.02%, 54.17%, 69.37%, 69.52%, 69.67%, 69.81%, 69.96%, 70.11%, 78.82%, 78.97%, 95.35%, 95.50%, 95.64% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.07); }
+  }
+    @keyframes ro4LegL {
+      00.00%, 48.71%, 49.00%, 49.15%, 51.51%, 51.81%, 51.96%, 53.87%, 54.17%, 69.37%, 69.67%, 69.96%, 70.18%, 78.82%, 79.11%, 95.35%, 95.64%, 95.79%, 100.0% {
+        transform: translate(8px, -191px) skewY(42deg) rotate(0deg); }
+      48.78%, 49.08%, 51.59%, 51.88%, 53.95%, 69.45%, 69.74%, 70.04%, 78.89%, 95.42%, 95.72% {
+        transform: translate(8px, -191px) skewY(42deg) rotate(10deg); }
+      48.86%, 51.66%, 54.02%, 69.52%, 69.81%, 70.11%, 78.97%, 95.50% {
+        transform: translate(8px, -191px) skewY(42deg) rotate(-30deg); }
+      48.93%, 51.73%, 54.10%, 69.59%, 69.89%, 79.04%, 95.57% {
+        transform: translate(8px, -191px) skewY(42deg) rotate(-20deg); }
+    }
+    @keyframes ro4KneeL {
+      00.00%, 48.78%, 48.93%, 51.59%, 51.73%, 53.95%, 54.10%, 69.45%, 69.59%, 69.74%, 69.89%, 70.04%, 70.18%, 78.89%, 79.04%, 95.42%, 95.57%, 100.0% {
+        transform: translateY(85px) rotate(6deg); }
+      48.86%, 51.66%, 54.02%, 69.52%, 69.81%, 70.11%, 78.97%, 95.50% {
+        transform: translateY(85px) rotate(40deg); }
+    }
+    @keyframes ro4LegR {
+      00.00%, 48.63%, 48.86%, 49.15%, 51.44%, 51.66%, 51.96%, 53.80%, 54.02%, 54.24%, 69.30%, 69.52%, 69.81%, 70.11%, 78.74%, 78.97%, 79.11%, 95.28%, 95.50%, 95.79%, 100.0% {
+        transform: translate(57px, -189px) skewY(42deg) rotate(0deg); }
+      48.71%, 49.00%, 51.51%, 51.81%, 53.87%, 54.17%, 69.37%, 69.67%, 69.96%, 78.82%, 95.35%, 95.64% {
+        transform: translate(57px, -189px) skewY(42deg) rotate(-30deg); }
+      48.78%, 49.08%, 51.59%, 51.88%, 53.95%, 69.45%, 69.74%, 70.04%, 78.89%, 95.42%, 95.72% {
+        transform: translate(57px, -189px) skewY(42deg) rotate(-10deg); }
+      48.93%, 51.73%, 54.10%, 69.59%, 69.89%, 79.04%, 95.57% {
+        transform: translate(57px, -189px) skewY(42deg) rotate(20deg); }
+    }
+    @keyframes ro4KneeR {
+      00.00%, 48.63%, 48.78%, 48.93%, 49.08%, 51.44%, 51.59%, 51.73%, 51.88%, 53.80%, 53.95%, 54.10%, 54.24%, 69.30%, 69.45%, 69.59%, 69.74%, 69.89%, 70.04%, 78.74%, 78.89%, 95.28%, 95.42%, 95.57%, 95.72%, 100.0% {
+        transform: translateY(85px) rotate(6deg); }
+      48.71%, 49.00%, 51.51%, 51.81%, 53.87%, 54.17%, 69.37%, 69.67%, 69.96%, 78.82%, 95.35%, 95.64% {
+        transform: translateY(85px) rotate(40deg); }
+    }
+    @keyframes ro4Head {
+      00.00%, 96.16% { transform: translate(-50px, -562px) rotateX(0deg) skew(16deg, 15deg); }
+      96.60%, 100.0% { transform: translate(-4px, -532px) rotate(30deg) skew(23deg, -1deg); }
+    }
+    @keyframes ro4Face {
+      00.00%, 96.16% { transform: rotate(0deg); }
+      96.60%, 100.0% { transform: rotate(38deg); }
+    }
+
+
+/* GIRL */
+@keyframes girl {
+  00.00% { transform: translate(72em, 42em) translateZ(-32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  09.96% { transform: translate(72em, 42em) translateZ(-32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  10.48% { transform: translate(72em, 32em) translateZ(-32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  11.51% { transform: translate(72em, 21.75em) translateZ(-22em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  13.51% { transform: translate(72em, 21.75em) translateZ(-22em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  13.65% { transform: translate(72em, 16em) translateZ(-16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  14.02% { transform: translate(72em, 12em) translateZ(-16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  14.17% { transform: translate(75em, 13em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  14.69% { transform: translate(75em, 21em) translateZ(1em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  15.28% { transform: translate(86em, 21em) translateZ(1em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  15.94% { transform: translate(70em, 20em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  18.60% { transform: translate(18em, 19em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  19.04% { transform: translate(18em, 10em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  19.41% { transform: translate(18em, 4.5em) translateZ(19em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  20.81% { transform: translate(18em, 4.5em) translateZ(19em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  21.11% { transform: translate(18em, 1em) translateZ(23em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  21.25% { transform: translate(18em, -3em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  24.28% { transform: translate(80em, -3em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  25.02% { transform: translate(80em, -17em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  25.46% { transform: translate(80em, -17em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  25.83% { transform: translate(80em, -64em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  26.86% { transform: translate(80em, -64em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  27.60% { transform: translate(80em, -80em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  29.52% { transform: translate(82em, -43em) translateZ(61em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  29.59% { transform: translate(82em, -43em) translateZ(61em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  30.11% { transform: translate(91em, -43em) translateZ(61em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  33.06% { transform: translate(48em, 51em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  33.51% { transform: translate(41em, 51em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  37.93% { transform: translate(41em, 51em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  38.67% { transform: translate(41em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  39.48% { transform: translate(25em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  40.00% { transform: translate(25em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  40.37% { transform: translate(25em, 35em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  41.48% { transform: translate(25em, 35em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  41.70% { transform: translate(25em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  42.36% { transform: translate(25em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  43.62% { transform: translate(25em, 35em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  44.50% { transform: translate(25em, 35em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  44.87% { transform: translate(17em, 35em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  45.39% { transform: translate(17em, 28em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  45.83% { transform: translate(17em, 28em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  46.05% { transform: translate(18em, 28em) translateZ(46em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  47.23% { transform: translate(18em, 28em) translateZ(46em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  47.97% { transform: translate(18em, 12em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  48.41% { transform: translate(27em, 12em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  48.56% { transform: translate(27em, 12em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  49.00% { transform: translate(35em, 12em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  49.22% { transform: translate(41em, -28em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  49.67% { transform: translate(41em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  50.77% { transform: translate(41em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  51.14% { transform: translate(49em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  51.96% { transform: translate(33em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  52.47% { transform: translate(33em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  52.77% { transform: translate(33em, 12em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  53.80% { transform: translate(33em, 12em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  54.61% { transform: translate(33em, 27em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  55.13% { transform: translate(48em, 27em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  55.87% { transform: translate(48em, 27em) translateZ(55em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  55.94% { transform: translate(48em, 27em) translateZ(56em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  56.01% { transform: translate(48em, 27em) translateZ(54em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  59.93% { transform: translate(48em, 27em) translateZ(54em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  60.52% { transform: translate(48em, 38em) translateZ(54em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  60.96% { transform: translate(48em, 47em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  61.40% { transform: translate(48em, 53em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  62.43% { transform: translate(48em, 68em) translateZ(32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  62.66% { transform: translate(48em, 72em) translateZ(32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  66.20% { transform: translate(104em, 72em) translateZ(32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  67.16% { transform: translate(104em, 89em) translateZ(32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  67.75% { transform: translate(104em, 97em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  68.86% { transform: translate(105em, 118em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  70.18% { transform: translate(105em, 119em) translateZ(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  71.36% { transform: translate(105em, 140em) translateZ(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  72.47% { transform: translate(105em, 157em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  73.43% { transform: translate(105em, 174em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  90.92% { transform: translate(105em, 174em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  91.73% { transform: translate(105em, 160em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  94.17% { transform: translate(105em, 160em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  94.76% { transform: translate(105em, 173em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  95.13% { transform: translate(105em, 173em) translateZ(-43em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  95.20% { transform: translate(105em, 173em) translateZ(-40em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  95.28% { transform: translate(105em, 173em) translateZ(-43em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  95.57% { transform: translate(97em, 173em) translateZ(-43em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  96.60% { transform: translate(96.5em, 164.5em) translateZ(-43em) rotateX(4deg) rotateY(0deg) rotateZ(-6deg); }
+  100.0% { transform: translate(96.5em, 164.5em) translateZ(-43em) rotateX(4deg) rotateY(0deg) rotateZ(-6deg); }
+}
+  @keyframes girlArmL {
+    00.00% { transform: translate(-3px, 5px) translateZ(30px) rotateX(-90deg) rotateY(0deg) rotateZ(4deg); }
+    96.01% { transform: translate(-1px, 3px) translateZ(28px) rotateX(-90deg) rotateY(0deg) rotateZ(4deg); }
+    96.31%, 100.0% { transform: translate(-5px, 4px) translateZ(21px) rotateX(-90deg) rotateY(0deg) rotateZ(120deg); }
+    
+    
+    00.00%, 96.01% { background: transparent; }
+    96.16%, 100.0% { background: white; }
+  }
+    @keyframes girlHandL {
+      00.00%, 96.01% { transform: translateY(4px) rotateZ(70deg); }
+      96.31%, 100.0% { transform: translateY(4px) rotateZ(30deg); }
+
+      00.00%, 96.01% { background: transparent; }
+      96.31%, 100.0% { background: white; }
+    }
+  @keyframes girl1 {
+    00.00%, 14.02%, 15.29%, 15.94%, 18.60%, 21.25%, 24.29%, 27.60%, 33.52%, 38.67%, 44.88%, 47.97%, 68.94%, 70.18%, 90.93%, 91.73%, 95.58%, 100.0% {
+      opacity: 1; }
+    14.03%, 15.28%, 15.95%, 18.60%, 21.26%, 24.28%, 27.61%, 33.51%, 38.68%, 44.87%, 47.98%, 68.93%, 70.19%, 90.92%, 91.73%, 95.57% {
+      opacity: 0; }
+
+    00.00%, 09.97%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 11.44%, 13.51%, 13.65%, 13.80%, 13.95%, 14.10%, 15.20%, 15.35%, 15.50%, 15.65%, 15.79%, 15.94%, 18.52%, 18.67%, 18.82%, 18.97%, 19.11%, 19.26%, 19.41%, 20.81%, 20.96%, 21.11%, 21.25%, 24.21%, 24.35%, 24.50%, 24.65%, 24.80%, 24.94%, 26.86%, 27.01%, 27.16%, 27.31%, 27.45%, 27.60%, 44.80%, 44.94%, 45.09%, 45.24%, 45.39%, 47.23%, 47.38%, 47.53%, 47.67%, 47.82%, 47.97%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 91.66%, 95.50%, 95.64%, 95.79%, 95.94%, 96.09%, 96.24%, 96.38%, 96.53%, 96.60%, 100.0% {
+      transform: rotateX(-90deg) scale(0.06); }
+    10.04%, 10.18%, 10.33%, 10.48%, 10.63%, 10.77%, 10.92%, 11.07%, 11.22%, 11.37%, 13.58%, 13.73%, 13.87%, 14.02%, 15.28%, 15.42%, 15.57%, 15.72%, 15.87%, 18.60%, 18.75%, 18.89%, 19.04%, 19.19%, 19.34%, 20.89%, 21.03%, 21.18%, 24.28%, 24.43%, 24.58%, 24.72%, 24.87%, 26.94%, 27.08%, 27.23%, 27.38%, 27.53%, 44.87%, 45.02%, 45.17%, 45.31%, 47.31%, 47.45%, 47.60%, 47.75%, 47.90%, 91.00%, 91.14%, 91.29%, 91.44%, 91.59%, 95.57%, 95.72%, 95.87%, 96.01%, 96.16%, 96.31%, 96.46% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.06); }
+  }
+    @keyframes girl1LegL {
+      00.00%, 09.97%, 10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 11.51%, 13.51%, 13.73%, 14.02%, 15.20%, 15.42%, 15.72%, 16.01%, 18.52%, 18.75%, 19.04%, 19.34%, 20.81%, 21.03%, 21.33%, 24.21%, 24.43%, 24.72%, 25.02%, 26.86%, 27.08%, 27.38%, 27.68%, 44.80%, 45.02%, 45.31%, 47.23%, 47.45%, 47.75%, 48.04%, 68.86%, 69.08%, 69.37%, 69.67%, 69.96%, 70.18%, 90.92%, 91.14%, 91.44%, 91.73%, 95.50%, 95.72%, 96.01%, 96.31%, 96.60%, 100.0% {
+        transform: translate(1px, -136px) skewY(21deg) rotate(0deg); }
+      10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 13.58%, 13.87%, 15.28%, 15.57%, 15.87%, 18.60%, 18.89%, 19.19%, 20.89%, 21.18%, 24.28%, 24.58%, 24.87%, 26.94%, 27.23%, 27.53%, 44.87%, 45.17%, 47.31%, 47.60%, 47.90%, 91.00%, 91.29%, 91.59%, 95.57%, 95.87%, 96.16%, 96.46% {
+        transform: translate(1px, -136px) skewY(21deg) rotate(40deg); }
+      10.11%, 10.41%, 10.70%, 11.00%, 11.29%, 13.65%, 13.95%, 15.35%, 15.65%, 15.94%, 18.67%, 18.97%, 19.26%, 20.96%, 21.25%, 24.35%, 24.65%, 24.94%, 27.01%, 27.31%, 27.60%, 44.94%, 45.24%, 47.38%, 47.67%, 47.97%, 91.07%, 91.36%, 91.66%, 95.64%, 95.94%, 96.24%, 96.53% {
+        transform: translate(1px, -136px) skewY(21deg) rotate(20deg); }
+      10.26%, 10.55%, 10.85%, 11.14%, 11.44%, 13.80%, 15.50%, 15.79%, 18.82%, 19.11%, 21.11%, 24.50%, 24.80%, 27.16%, 27.45%, 45.09%, 47.53%, 47.82%, 91.22%, 91.51%, 95.79%, 96.09%, 96.38% {
+        transform: translate(1px, -136px) skewY(21deg) rotate(-20deg); }
+      68.93%, 69.22%, 69.52%, 69.81%, 70.11% {
+        transform: translate(1px, -136px) skewY(21deg) rotate(110deg); }
+    }
+    @keyframes girl1KneeL {
+      00.00%, 09.97%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 13.51%, 13.65%, 13.80%, 13.95%, 15.20%, 15.35%, 15.50%, 15.65%, 15.79%, 15.94%, 18.52%, 18.67%, 18.82%, 18.97%, 19.11%, 19.26%, 20.81%, 20.96%, 21.11%, 21.25%, 24.21%, 24.35%, 24.50%, 24.65%, 24.80%, 24.94%, 26.86%, 27.01%, 27.16%, 27.31%, 27.45%, 27.60%, 44.80%, 44.94%, 45.09%, 45.24%, 47.23%, 47.38%, 47.53%, 47.67%, 47.82%, 47.97%, 68.86%, 69.08%, 69.37%, 69.67%, 69.96%, 70.18%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 91.66%, 95.50%, 95.64%, 95.79%, 95.94%, 96.09%, 96.24%, 96.38%, 96.53%, 100.0% {
+        transform: translate(-18px, 52px) rotate(0deg); }
+      10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 13.58%, 13.87%, 15.28%, 15.57%, 15.87%, 18.60%, 18.89%, 19.19%, 20.89%, 21.18%, 24.28%, 24.58%, 24.87%, 26.94%, 27.23%, 27.53%, 44.87%, 45.17%, 47.31%, 47.60%, 47.90%, 91.00%, 91.29%, 91.59%, 95.57%, 95.87%, 96.16%, 96.46% {
+        transform: translate(-18px, 52px) rotate(-60deg); }
+      68.93%, 69.22%, 69.52%, 69.81%, 70.11% {
+        transform: translate(-18px, 52px) rotate(-120deg); }
+    }
+    @keyframes girl1LegR {
+      00.00%, 10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 11.51%, 13.58%, 13.87%, 14.10%, 15.28%, 15.57%, 15.87%, 16.01%, 18.60%, 18.89%, 19.19%, 19.41%, 20.89%, 21.18%, 21.33%, 24.28%, 24.58%, 24.87%, 25.02%, 26.94%, 27.23%, 27.53%, 27.68%, 44.87%, 45.17%, 45.39%, 47.31%, 47.60%, 47.90%, 48.04%, 68.93%, 69.22%, 69.52%, 69.81%, 70.11%, 91.00%, 91.29%, 91.59%, 91.73%, 95.57%, 95.87%, 96.16%, 96.46%, 96.60%, 100.0% {
+        transform: translate(45px, -132px) skewY(21deg) rotate(0deg); }
+      10.11%, 10.41%, 10.70%, 11.00%, 11.29%, 13.65%, 13.95%, 15.35%, 15.65%, 15.94%, 18.67%, 18.97%, 19.26%, 20.96%, 21.25%, 24.35%, 24.65%, 24.94%, 27.01%, 27.31%, 27.60%, 44.94%, 45.24%, 47.38%, 47.67%, 47.97%, 91.07%, 91.36%, 91.66%, 95.64%, 95.94%, 96.24%, 96.53% {
+        transform: translate(45px, -132px) skewY(21deg) rotate(-20deg); }
+      10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 13.73%, 14.02%, 15.42%, 15.72%, 18.75%, 19.04%, 19.34%, 21.03%, 24.43%, 24.72%, 27.08%, 27.38%, 45.02%, 45.31%, 47.45%, 47.75%, 91.14%, 91.44%, 95.72%, 96.01%, 96.31% {
+        transform: translate(45px, -132px) skewY(21deg) rotate(40deg); }
+      10.26%, 10.55%, 10.85%, 11.14%, 11.44%, 13.80%, 15.50%, 15.79%, 18.82%, 19.11%, 21.11%, 24.50%, 24.80%, 27.16%, 27.45%, 45.09%, 47.53%, 47.82%, 91.22%, 91.51%, 95.79%, 96.09%, 96.38% {
+        transform: translate(45px, -132px) skewY(21deg) rotate(20deg); }
+      69.08%, 69.37%, 69.67%, 69.96% {
+        transform: translate(45px, -132px) skewY(21deg) rotate(200deg); }
+    }
+    @keyframes girl1KneeR {
+      00.00%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 11.44%, 13.65%, 13.80%, 13.95%, 14.10%, 15.35%, 15.50%, 15.65%, 15.79%, 18.67%, 18.82%, 18.97%, 19.11%, 19.26%, 19.41%, 20.96%, 21.11%, 24.35%, 24.50%, 24.65%, 24.80%, 27.01%, 27.16%, 27.31%, 27.45%, 44.94%, 45.09%, 45.24%, 45.39%, 47.38%, 47.53%, 47.67%, 47.82%, 68.93%, 69.22%, 69.52%, 69.81%, 70.11%, 91.07%, 91.22%, 91.36%, 91.51%, 95.64%, 95.79%, 95.94%, 96.09%, 96.24%, 96.38%, 100.0% {
+        transform: translate(-18px, 52px) rotate(0deg); }
+      10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 13.73%, 14.02%, 15.42%, 15.72%, 18.75%, 19.04%, 19.34%, 21.03%, 24.43%, 24.72%, 27.08%, 27.38%, 45.02%, 45.31%, 47.45%, 47.75%, 69.08%, 69.37%, 69.67%, 69.96%, 91.14%, 91.44%, 95.72%, 96.01%, 96.31% {
+        transform: translate(-18px, 52px) rotate(-60deg); }
+    }
+
+  @keyframes girl2 {
+    00.00%, 14.02%, 15.29%, 21.25%, 24.29%, 27.60%, 30.12%, 47.97%, 49.01%, 49.67%, 51.15%, 54.61%, 59.49%, 62.66%, 66.21%, 68.86%, 68.94%, 100.0% {
+      opacity: 0; }
+    14.03%, 15.28%, 21.26%, 24.28%, 27.61%, 30.11%, 47.98%, 49.00%, 49.68%, 51.14%, 54.62%, 59.48%, 62.67%, 66.20%, 68.87%, 68.93% {
+      opacity: 1; }
+
+    00.00%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 14.91%, 15.06%, 15.20%, 15.35%, 21.18%, 21.33%, 21.48%, 21.62%, 21.77%, 21.92%, 22.07%, 22.21%, 22.36%, 22.51%, 22.66%, 22.80%, 22.95%, 23.10%, 23.25%, 23.39%, 23.54%, 23.69%, 23.84%, 23.99%, 24.13%, 24.28%, 27.53%, 27.68%, 27.82%, 27.97%, 28.12%, 28.27%, 28.41%, 28.56%, 28.71%, 28.86%, 29.00%, 29.15%, 29.30%, 29.45%, 29.59%, 29.74%, 29.89%, 47.90%, 48.04%, 48.19%, 48.34%, 48.56%, 48.71%, 48.86%, 49.00%, 50.77%, 50.92%, 51.07%, 51.22%, 54.54%, 54.69%, 54.83%, 54.98%, 55.13%, 62.58%, 62.73%, 62.88%, 63.03%, 63.17%, 63.32%, 63.47%, 63.62%, 63.76%, 63.91%, 64.06%, 64.21%, 64.35%, 64.50%, 64.65%, 64.80%, 64.94%, 65.09%, 65.24%, 65.39%, 65.53%, 65.68%, 65.83%, 65.98%, 66.12%, 100.0% {
+      transform: rotateX(-90deg) scale(0.06); }
+    14.10%, 14.24%, 14.39%, 14.54%, 14.69%, 14.83%, 14.98%, 15.13%, 15.28%, 21.25%, 21.40%, 21.55%, 21.70%, 21.84%, 21.99%, 22.14%, 22.29%, 22.44%, 22.58%, 22.73%, 22.88%, 23.03%, 23.17%, 23.32%, 23.47%, 23.62%, 23.76%, 23.91%, 24.06%, 24.21%, 27.60%, 27.75%, 27.90%, 28.04%, 28.19%, 28.34%, 28.49%, 28.63%, 28.78%, 28.93%, 29.08%, 29.22%, 29.37%, 29.67%, 29.82%, 47.97%, 48.12%, 48.27%, 48.63%, 48.78%, 48.93%, 50.85%, 51.00%, 51.14%, 54.61%, 54.76%, 54.91%, 55.05%, 62.66%, 62.80%, 62.95%, 63.10%, 63.25%, 63.39%, 63.54%, 63.69%, 63.84%, 63.98%, 64.13%, 64.28%, 64.43%, 64.58%, 64.72%, 64.87%, 65.02%, 65.17%, 65.31%, 65.46%, 65.61%, 65.76%, 65.90%, 66.05% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.06); }
+  }
+    @keyframes girl2LegL {
+      00.00%, 14.10%, 14.39%, 14.69%, 14.98%, 15.28%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 23.91%, 24.21%, 24.35%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 29.52%, 29.67%, 29.96%, 47.97%, 48.27%, 48.41%, 48.63%, 48.93%, 50.85%, 51.14%, 54.61%, 54.91%, 55.20%, 62.66%, 62.95%, 63.25%, 63.54%, 63.84%, 64.13%, 64.43%, 64.72%, 65.02%, 65.31%, 65.61%, 65.90%, 66.20%, 100.0% {
+        transform: translate(1px, -141px) skewY(22deg) rotate(0deg); }
+      14.17%, 14.46%, 14.76%, 15.06%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 23.99%, 24.28%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 29.74%, 48.04%, 48.34%, 48.71%, 50.92%, 54.69%, 54.98%, 62.73%, 63.03%, 63.32%, 63.62%, 63.91%, 64.21%, 64.50%, 64.80%, 65.09%, 65.39%, 65.68%, 65.98% {
+        transform: translate(1px, -141px) skewY(22deg) rotate(20deg); }
+      14.24%, 14.54%, 14.83%, 15.13%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 24.06%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 29.82%, 48.12%, 48.78%, 51.00%, 54.76%, 55.05%, 62.80%, 63.10%, 63.39%, 63.69%, 63.98%, 64.28%, 64.58%, 64.87%, 65.17%, 65.46%, 65.76%, 66.05% {
+        transform: translate(1px, -141px) skewY(22deg) rotate(-40deg); }
+      14.32%, 14.61%, 14.91%, 15.20%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 23.84%, 24.13%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 29.89%, 48.19%, 48.86%, 51.07%, 54.83%, 55.13%, 62.88%, 63.17%, 63.47%, 63.76%, 64.06%, 64.35%, 64.65%, 64.94%, 65.24%, 65.53%, 65.83%, 66.12% {
+        transform: translate(1px, -141px) skewY(22deg) rotate(-20deg); }
+    }
+    @keyframes girl2KneeL {
+      00.00%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 14.91%, 15.06%, 15.20%, 21.33%, 21.48%, 21.62%, 21.77%, 21.92%, 22.07%, 22.21%, 22.36%, 22.51%, 22.66%, 22.80%, 22.95%, 23.10%, 23.25%, 23.39%, 23.54%, 23.69%, 23.84%, 23.99%, 24.13%, 27.68%, 27.82%, 27.97%, 28.12%, 28.27%, 28.41%, 28.56%, 28.71%, 28.86%, 29.00%, 29.15%, 29.30%, 29.74%, 29.89%, 48.04%, 48.19%, 48.71%, 48.86%, 50.92%, 51.07%, 54.69%, 54.83%, 54.98%, 55.13%, 62.73%, 62.88%, 63.03%, 63.17%, 63.32%, 63.47%, 63.62%, 63.76%, 63.91%, 64.06%, 64.21%, 64.35%, 64.50%, 64.65%, 64.80%, 64.94%, 65.09%, 65.24%, 65.39%, 65.53%, 65.68%, 65.83%, 65.98%, 66.12%, 100.0% {
+        transform: translateY(52px) rotate(0deg); }
+      14.24%, 14.54%, 14.83%, 15.13%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 24.06%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 29.82%, 48.12%, 48.78%, 51.00%, 54.76%, 55.05%, 62.80%, 63.10%, 63.39%, 63.69%, 63.98%, 64.28%, 64.58%, 64.87%, 65.17%, 65.46%, 65.76%, 66.05% {
+        transform: translateY(52px) rotate(60deg); }
+    }
+    @keyframes girl2LegR {
+      00.00%, 14.02%, 14.24%, 14.54%, 14.83%, 15.13%, 15.35%, 21.18%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 24.06%, 24.35%, 27.53%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 29.52%, 29.59%, 29.82%, 29.96%, 47.90%, 48.12%, 48.41%, 48.56%, 48.78%, 49.00%, 50.77%, 51.00%, 51.22%, 54.54%, 54.76%, 55.05%, 55.20%, 62.58%, 62.80%, 63.10%, 63.39%, 63.69%, 63.98%, 64.28%, 64.58%, 64.87%, 65.17%, 65.46%, 65.76%, 66.05%, 66.20%, 100.0% {
+        transform: translate(55px, -103px) skewY(22deg) rotate(0deg); }
+      14.10%, 14.39%, 14.69%, 14.98%, 15.28%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 23.91%, 24.21%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 29.67%, 47.97%, 48.27%, 48.63%, 48.93%, 50.85%, 51.14%, 54.61%, 54.91%, 62.66%, 62.95%, 63.25%, 63.54%, 63.84%, 64.13%, 64.43%, 64.72%, 65.02%, 65.31%, 65.61%, 65.90% {
+        transform: translate(55px, -103px) skewY(22deg) rotate(-40deg); }
+      14.17%, 14.46%, 14.76%, 15.06%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 23.99%, 24.28%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 29.74%, 48.04%, 48.34%, 48.71%, 50.92%, 54.69%, 54.98%, 62.73%, 63.03%, 63.32%, 63.62%, 63.91%, 64.21%, 64.50%, 64.80%, 65.09%, 65.39%, 65.68%, 65.98% {
+        transform: translate(55px, -103px) skewY(22deg) rotate(-20deg); }
+      14.32%, 14.61%, 14.91%, 15.20%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 23.84%, 24.13%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 29.89%, 48.19%, 48.86%, 51.07%, 54.83%, 55.13%, 62.88%, 63.17%, 63.47%, 63.76%, 64.06%, 64.35%, 64.65%, 64.94%, 65.24%, 65.53%, 65.83%, 66.12% {
+        transform: translate(55px, -103px) skewY(22deg) rotate(20deg); }
+    }
+    @keyframes girl2KneeR {
+      00.00%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 14.91%, 15.06%, 15.20%, 15.35%, 21.18%, 21.33%, 21.48%, 21.62%, 21.77%, 21.92%, 22.07%, 22.21%, 22.36%, 22.51%, 22.66%, 22.80%, 22.95%, 23.10%, 23.25%, 23.39%, 23.54%, 23.69%, 23.84%, 23.99%, 24.13%, 24.28%, 27.53%, 27.68%, 27.82%, 27.97%, 28.12%, 28.27%, 28.41%, 28.56%, 28.71%, 28.86%, 29.00%, 29.15%, 29.30%, 29.45%, 29.59%, 29.74%, 47.90%, 48.04%, 48.19%, 48.34%, 48.56%, 48.71%, 48.86%, 49.00%, 50.77%, 50.92%, 51.07%, 51.22%, 54.54%, 54.69%, 54.83%, 54.98%, 62.58%, 62.73%, 62.88%, 63.03%, 63.17%, 63.32%, 63.47%, 63.62%, 63.76%, 63.91%, 64.06%, 64.21%, 64.35%, 64.50%, 64.65%, 64.80%, 64.94%, 65.09%, 65.24%, 65.39%, 65.53%, 65.68%, 65.83%, 65.98%, 100.0% {
+        transform: translateY(52px) rotate(0deg); }
+      14.10%, 14.39%, 14.69%, 14.98%, 15.28%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 23.91%, 24.21%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 29.67%, 47.97%, 48.27%, 48.63%, 48.93%, 50.85%, 51.14%, 54.61%, 54.91%, 62.66%, 62.95%, 63.25%, 63.54%, 63.84%, 64.13%, 64.43%, 64.72%, 65.02%, 65.31%, 65.61%, 65.90% {
+        transform: translateY(52px) rotate(60deg); }
+    }
+
+  @keyframes girl3 {
+    00.00%, 15.94%, 18.61%, 33.06%, 33.52%, 38.67%, 44.88%, 51.14%, 51.96%, 70.18%, 70.27%, 73.43%, 90.93%, 91.73%, 94.18%, 94.76%, 95.58%, 100.0% {
+      opacity: 0; }
+    15.95%, 18.60%, 33.07%, 33.51%, 38.68%, 44.87%, 51.15%, 51.96%, 70.19%, 70.26%, 73.44%, 90.92%, 91.74%, 94.17%, 94.77%, 95.57% {
+      opacity: 1; }
+
+    00.00%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 18.23%, 18.38%, 18.52%, 18.67%, 33.06%, 33.21%, 33.36%, 33.51%, 38.67%, 38.82%, 38.97%, 39.11%, 39.26%, 39.41%, 44.50%, 44.65%, 44.80%, 44.94%, 51.07%, 51.22%, 51.36%, 51.51%, 51.66%, 51.81%, 51.96%, 95.28%, 95.42%, 95.57%, 95.64%, 100.0% {
+      transform: rotateX(-90deg) scale(0.06); }
+    15.94%, 16.09%, 16.24%, 16.38%, 16.53%, 16.68%, 16.83%, 16.97%, 17.12%, 17.27%, 17.42%, 17.56%, 17.71%, 17.86%, 18.01%, 18.15%, 18.30%, 18.45%, 18.60%, 33.14%, 33.28%, 33.43%, 38.75%, 38.89%, 39.04%, 39.19%, 39.34%, 44.58%, 44.72%, 44.87%, 51.14%, 51.29%, 51.44%, 51.59%, 51.73%, 51.88%, 95.35%, 95.50% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.06); }
+  }
+    @keyframes girl3LegL {
+      00.00%, 15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 18.30%, 18.60%, 33.14%, 33.43%, 38.75%, 39.04%, 39.34%, 39.48%, 44.58%, 44.87%, 51.14%, 51.44%, 51.73%, 52.03%, 95.35%, 95.64%, 100.0% {
+        transform: translate(1px, -150px) rotate(-6deg); }
+      16.01%, 16.31%, 16.61%, 16.90%, 17.20%, 17.49%, 17.79%, 18.08%, 18.38%, 33.21%, 38.82%, 39.11%, 39.41%, 44.65%, 51.22%, 51.51%, 51.81%, 95.42% {
+        transform: translate(1px, -150px) rotate(-20deg); }
+      16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 18.15%, 18.45%, 33.28%, 38.89%, 39.19%, 44.72%, 51.29%, 51.59%, 51.88%, 95.50% {
+        transform: translate(1px, -150px) rotate(40deg); }
+      16.16%, 16.46%, 16.75%, 17.05%, 17.34%, 17.64%, 17.93%, 18.23%, 18.52%, 33.36%, 38.97%, 39.26%, 44.80%, 51.36%, 51.66%, 51.96%, 95.57% {
+        transform: translate(1px, -150px) rotate(20deg); }
+    }
+    @keyframes girl3KneeL {
+      00.00%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 18.23%, 18.38%, 18.52%, 33.21%, 33.36%, 38.82%, 38.97%, 39.11%, 39.26%, 44.65%, 44.80%, 51.22%, 51.36%, 51.51%, 51.66%, 51.81%, 51.96%, 95.42%, 95.57%, 100.0% {
+        transform: translate(-18px, 52px) rotate(0deg); }
+      16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 18.15%, 18.45%, 33.28%, 38.89%, 39.19%, 44.72%, 51.29%, 51.59%, 51.88%, 95.50% {
+        transform: translate(-18px, 52px) rotate(-60deg); }
+    }
+    @keyframes girl3LegR {
+      00.00%, 15.87%, 16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 18.15%, 18.45%, 18.67%, 33.06%, 33.28%, 33.51%, 38.67%, 38.89%, 39.19%, 39.48%, 44.50%, 44.72%, 44.94%, 51.07%, 51.29%, 51.59%, 51.88%, 52.03%, 95.28%, 95.50%, 95.64%, 100.0% {
+        transform: translate(57px, -105px) rotate(-6deg); }
+      15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 18.30%, 18.60%, 33.14%, 33.43%, 38.75%, 39.04%, 39.34%, 44.58%, 44.87%, 51.14%, 51.44%, 51.73%, 95.35% {
+        transform: translate(57px, -105px) rotate(40deg); }
+      16.01%, 16.31%, 16.61%, 16.90%, 17.20%, 17.49%, 17.79%, 18.08%, 18.38%, 33.21%, 38.82%, 39.11%, 39.41%, 44.65%, 51.22%, 51.51%, 51.81%, 95.42% {
+        transform: translate(57px, -105px) rotate(20deg); }
+      16.16%, 16.46%, 16.75%, 17.05%, 17.34%, 17.64%, 17.93%, 18.23%, 18.52%, 33.36%, 38.97%, 39.26%, 44.80%, 51.36%, 51.66%, 51.96%, 95.57% {
+        transform: translate(57px, -105px) rotate(-20deg); }
+    }
+    @keyframes girl3KneeR {
+      00.00%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 18.23%, 18.38%, 18.52%, 18.67%, 33.06%, 33.21%, 33.36%, 33.51%, 38.67%, 38.82%, 38.97%, 39.11%, 39.26%, 39.41%, 44.50%, 44.65%, 44.80%, 44.94%, 51.07%, 51.22%, 51.36%, 51.51%, 51.66%, 51.81%, 95.28%, 95.42%, 100.0% {
+        transform: translate(-18px, 52px) rotate(0deg); }
+      15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 18.30%, 18.60%, 33.14%, 33.43%, 38.75%, 39.04%, 39.34%, 44.58%, 44.87%, 51.14%, 51.44%, 51.73%, 95.35% {
+        transform: translate(-18px, 52px) rotate(-60deg); }
+    }
+  
+  @keyframes girl4 {
+    00.00%, 49.22%, 49.68%, 51.96%, 54.62%, 59.48%, 62.67%, 66.20%, 68.87%, 70.26%, 73.44%, 94.17%, 94.77%, 100.0% {
+      opacity: 0; }
+    49.23%, 49.67%, 51.97%, 54.61%, 59.49%, 62.66%, 66.21%, 68.86%, 70.27%, 73.43%, 94.18%, 94.76% {
+      opacity: 1; }
+
+    00.00%, 49.22%, 49.37%, 49.52%, 49.67%, 53.80%, 53.95%, 54.10%, 54.24%, 54.39%, 54.54%, 54.69%, 59.93%, 60.07%, 60.22%, 60.37%, 60.52%, 60.66%, 60.81%, 60.96%, 61.11%, 61.25%, 61.40%, 61.55%, 61.70%, 61.84%, 61.99%, 62.14%, 62.29%, 62.43%, 62.58%, 62.73%, 66.12%, 66.27%, 66.42%, 66.57%, 66.72%, 66.86%, 67.01%, 67.16%, 67.31%, 67.45%, 67.60%, 67.75%, 67.90%, 68.04%, 68.19%, 68.34%, 68.49%, 68.63%, 68.78%, 70.18%, 70.33%, 70.48%, 70.63%, 70.77%, 70.92%, 71.07%, 71.22%, 71.36%, 71.51%, 71.66%, 71.81%, 71.96%, 72.10%, 72.25%, 72.40%, 72.55%, 72.69%, 72.84%, 72.99%, 73.14%, 73.28%, 73.43%, 94.17%, 94.32%, 94.46%, 94.61%, 94.76%, 100.0% {
+      transform: rotateX(-90deg) scale(0.06); }
+    49.30%, 49.45%, 49.59%, 53.87%, 54.02%, 54.17%, 54.32%, 54.46%, 54.61%, 60.00%, 60.15%, 60.29%, 60.44%, 60.59%, 60.74%, 60.89%, 61.03%, 61.18%, 61.33%, 61.48%, 61.62%, 61.77%, 61.92%, 62.07%, 62.21%, 62.36%, 62.51%, 62.66%, 66.20%, 66.35%, 66.49%, 66.64%, 66.79%, 66.94%, 67.08%, 67.23%, 67.38%, 67.53%, 67.67%, 67.82%, 67.97%, 68.12%, 68.27%, 68.41%, 68.56%, 68.71%, 70.26%, 70.41%, 70.55%, 70.70%, 70.85%, 71.00%, 71.14%, 71.29%, 71.44%, 71.59%, 71.73%, 71.88%, 72.03%, 72.18%, 72.32%, 72.47%, 72.62%, 72.77%, 72.91%, 73.06%, 73.21%, 73.36%, 94.24%, 94.39%, 94.54%, 94.69% {
+      transform: translateZ(-2px) rotateX(-90deg) scale(0.06); }
+  }
+    @keyframes girl4LegL {
+      00.00%, 49.30%, 49.59%, 53.87%, 54.17%, 54.46%, 54.69%, 60.00%, 60.29%, 60.59%, 60.89%, 61.18%, 61.48%, 61.77%, 62.07%, 62.36%, 62.66%, 66.20%, 66.49%, 66.79%, 67.08%, 67.38%, 67.67%, 67.97%, 68.27%, 68.56%, 68.86%, 70.26%, 70.55%, 70.85%, 71.14%, 71.44%, 71.73%, 72.03%, 72.32%, 72.62%, 72.91%, 73.21%, 73.43%, 94.24%, 94.54%, 94.76%, 100.0% {
+        transform: translate(1px, -131px) skewY(52deg); }
+      49.37%, 53.95%, 54.24%, 54.54%, 60.07%, 60.37%, 60.66%, 60.96%, 61.25%, 61.55%, 61.84%, 62.14%, 62.43%, 66.27%, 66.57%, 66.86%, 67.16%, 67.45%, 67.75%, 68.04%, 68.34%, 68.63%, 70.33%, 70.63%, 70.92%, 71.22%, 71.51%, 71.81%, 72.10%, 72.40%, 72.69%, 72.99%, 73.28%, 94.32%, 94.61% {
+        transform: translate(1px, -131px) skewY(52deg) rotate(10deg); }
+      49.45%, 54.02%, 54.32%, 54.61%, 60.15%, 60.44%, 60.74%, 61.03%, 61.33%, 61.62%, 61.92%, 62.21%, 62.51%, 66.35%, 66.64%, 66.94%, 67.23%, 67.53%, 67.82%, 68.12%, 68.41%, 68.71%, 70.41%, 70.70%, 71.00%, 71.29%, 71.59%, 71.88%, 72.18%, 72.47%, 72.77%, 73.06%, 73.36%, 94.39%, 94.69% {
+        transform: translate(1px, -131px) skewY(52deg) rotate(-30deg); }
+      49.52%, 54.10%, 54.39%, 60.22%, 60.52%, 60.81%, 61.11%, 61.40%, 61.70%, 61.99%, 62.29%, 62.58%, 66.42%, 66.72%, 67.01%, 67.31%, 67.60%, 67.90%, 68.19%, 68.49%, 68.78%, 70.48%, 70.77%, 71.07%, 71.36%, 71.66%, 71.96%, 72.25%, 72.55%, 72.84%, 73.14%, 94.46% {
+        transform: translate(1px, -131px) skewY(52deg) rotate(-20deg); }
+    }
+    @keyframes girl4KneeL {
+      00.00%, 49.37%, 49.52%, 53.95%, 54.10%, 54.24%, 54.39%, 54.54%, 54.69%, 60.07%, 60.22%, 60.37%, 60.52%, 60.66%, 60.81%, 60.96%, 61.11%, 61.25%, 61.40%, 61.55%, 61.70%, 61.84%, 61.99%, 62.14%, 62.29%, 62.43%, 62.58%, 66.27%, 66.42%, 66.57%, 66.72%, 66.86%, 67.01%, 67.16%, 67.31%, 67.45%, 67.60%, 67.75%, 67.90%, 68.04%, 68.19%, 68.34%, 68.49%, 68.63%, 68.78%, 70.33%, 70.48%, 70.63%, 70.77%, 70.92%, 71.07%, 71.22%, 71.36%, 71.51%, 71.66%, 71.81%, 71.96%, 72.10%, 72.25%, 72.40%, 72.55%, 72.69%, 72.84%, 72.99%, 73.14%, 73.28%, 73.43%, 94.32%, 94.46%, 94.61%, 94.76%, 100.0% {
+        transform: translateY(52px) rotate(0deg); }
+      49.45%, 54.02%, 54.32%, 54.61%, 60.15%, 60.44%, 60.74%, 61.03%, 61.33%, 61.62%, 61.92%, 62.21%, 62.51%, 66.35%, 66.64%, 66.94%, 67.23%, 67.53%, 67.82%, 68.12%, 68.41%, 68.71%, 70.41%, 70.70%, 71.00%, 71.29%, 71.59%, 71.88%, 72.18%, 72.47%, 72.77%, 73.06%, 73.36%, 94.39%, 94.69% {
+        transform: translateY(52px) rotate(40deg); }
+    }
+    @keyframes girl4LegR {
+      00.00%, 49.22%, 49.45%, 49.67%, 53.80%, 54.02%, 54.32%, 54.61%, 59.93%, 60.15%, 60.44%, 60.74%, 61.03%, 61.33%, 61.62%, 61.92%, 62.21%, 62.51%, 62.73%, 66.12%, 66.35%, 66.64%, 66.94%, 67.23%, 67.53%, 67.82%, 68.12%, 68.41%, 68.71%, 68.86%, 70.18%, 70.41%, 70.70%, 71.00%, 71.29%, 71.59%, 71.88%, 72.18%, 72.47%, 72.77%, 73.06%, 73.36%, 94.17%, 94.39%, 94.69%, 100.0% {
+        transform: translate(57px, -115px) skewY(52deg); }
+      49.30%, 49.59%, 53.87%, 54.17%, 54.46%, 60.00%, 60.29%, 60.59%, 60.89%, 61.18%, 61.48%, 61.77%, 62.07%, 62.36%, 62.66%, 66.20%, 66.49%, 66.79%, 67.08%, 67.38%, 67.67%, 67.97%, 68.27%, 68.56%, 70.26%, 70.55%, 70.85%, 71.14%, 71.44%, 71.73%, 72.03%, 72.32%, 72.62%, 72.91%, 73.21%, 94.24%, 94.54% {
+        transform: translate(57px, -115px) skewY(52deg) rotate(-30deg); }
+      49.37%, 53.95%, 54.24%, 54.54%, 60.07%, 60.37%, 60.66%, 60.96%, 61.25%, 61.55%, 61.84%, 62.14%, 62.43%, 66.27%, 66.57%, 66.86%, 67.16%, 67.45%, 67.75%, 68.04%, 68.34%, 68.63%, 70.33%, 70.63%, 70.92%, 71.22%, 71.51%, 71.81%, 72.10%, 72.40%, 72.69%, 72.99%, 73.28%, 94.32%, 94.61% {
+        transform: translate(57px, -115px) skewY(52deg) rotate(-10deg); }
+      49.52%, 54.10%, 54.39%, 60.22%, 60.52%, 60.81%, 61.11%, 61.40%, 61.70%, 61.99%, 62.29%, 62.58%, 66.42%, 66.72%, 67.01%, 67.31%, 67.60%, 67.90%, 68.19%, 68.49%, 68.78%, 70.48%, 70.77%, 71.07%, 71.36%, 71.66%, 71.96%, 72.25%, 72.55%, 72.84%, 73.14%, 94.46% {
+        transform: translate(57px, -115px) skewY(52deg) rotate(20deg); }
+    }
+    @keyframes girl4KneeR {
+      00.00%, 49.22%, 49.37%, 49.52%, 49.67%, 53.80%, 53.95%, 54.10%, 54.24%, 54.39%, 54.54%, 59.93%, 60.07%, 60.22%, 60.37%, 60.52%, 60.66%, 60.81%, 60.96%, 61.11%, 61.25%, 61.40%, 61.55%, 61.70%, 61.84%, 61.99%, 62.14%, 62.29%, 62.43%, 62.58%, 62.73%, 66.12%, 66.27%, 66.42%, 66.57%, 66.72%, 66.86%, 67.01%, 67.16%, 67.31%, 67.45%, 67.60%, 67.75%, 67.90%, 68.04%, 68.19%, 68.34%, 68.49%, 68.63%, 70.18%, 70.33%, 70.48%, 70.63%, 70.77%, 70.92%, 71.07%, 71.22%, 71.36%, 71.51%, 71.66%, 71.81%, 71.96%, 72.10%, 72.25%, 72.40%, 72.55%, 72.69%, 72.84%, 72.99%, 73.14%, 73.28%, 94.17%, 94.32%, 94.46%, 94.61%, 100.0% {
+        transform: translateY(52px) rotate(0deg); }
+      49.30%, 49.59%, 53.87%, 54.17%, 54.46%, 60.00%, 60.29%, 60.59%, 60.89%, 61.18%, 61.48%, 61.77%, 62.07%, 62.36%, 62.66%, 66.20%, 66.49%, 66.79%, 67.08%, 67.38%, 67.67%, 67.97%, 68.27%, 68.56%, 70.26%, 70.55%, 70.85%, 71.14%, 71.44%, 71.73%, 72.03%, 72.32%, 72.62%, 72.91%, 73.21%, 94.24%, 94.54% {
+        transform: translateY(52px) rotate(40deg); }
+    }
\ No newline at end of file
diff --git a/pw-dashboard/README.markdown b/pw-dashboard/README.markdown
new file mode 100644
index 0000000..7d047ec
--- /dev/null
+++ b/pw-dashboard/README.markdown
@@ -0,0 +1,5 @@
+# PW Dashboard
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/bartveneman/pen/qBBbQjM](https://codepen.io/bartveneman/pen/qBBbQjM).
+
+
diff --git a/pw-dashboard/dist/index.html b/pw-dashboard/dist/index.html
new file mode 100644
index 0000000..5a843db
--- /dev/null
+++ b/pw-dashboard/dist/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - PW Dashboard</title>
+  <link href="https://fonts.googleapis.com/css?family=Overpass+Mono:300|700|400&display=swap" rel="stylesheet"> 
+<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<section class="realtime">
+  <h2>Response times</h2>
+  <pre class="blue dotted"><span>  : </span><span>  :      :   :</span><span>  :   : ::   :         ::</span><span>  :  ::::::: ::       ::::</span><span>  : :::::::: ::      ::::::</span><span>  : :::::::: ::     ::::::::</span><span> :: ::::::::::::.  :::::::::</span><span>.:::::::::::::::::.::::::::::::.</span></pre>
+  <dl>
+    <dt>Homepage</dt>
+    <dd>2.23s</dd>
+    <dt>Search result</dt>
+    <dd>4.92s</dd>
+    <dt>Login</dt>
+    <dd>3.62s</dd>
+  </dl>
+</section>
+<section class="historic">
+  <h2>Accounts</h2>
+  <pre class="teal"><span>20        |</span><span>   |      |</span><span>   |   | ||   |</span><span>   | | |||||| ||     |</span><span> 0 |||||||||||||||   || ||</span></pre>
+  <dl>
+    <dt>Today</dt>
+    <dd>1</dd>
+    <dt>Last week</dt>
+    <dd>12</dd>
+    <dt>Last Month</dt>
+    <dd>74</dd>
+  </dl>
+</section>
+<section class="historic">
+  <h2>TROLOLOLOL</h2>
+  <pre class="teal"><span>20        |</span><span>   |      |</span><span>   |   | ||   |           |   | ||   |</span><span>   | | |||||| ||     |    | | |||||| ||     |</span><span> 0 |||||||||||||||   || |||||||||||||||||   || ||</span></pre>
+  <dl>
+    <dt>Today</dt>
+    <dd>1</dd>
+    <dt>Last week</dt>
+    <dd>12</dd>
+    <dt>Last Month</dt>
+    <dd>74</dd>
+  </dl>
+</section>
+<section class="historic">
+  <h2>Sessions</h2>
+  <pre class="teal"><span>       |            ||</span><span>|      |           |||</span><span>|   | ||   |       ||||</span><span>| | |||||| ||     ||||||</span><span>||||||||||||||||||||||||||||</span></pre>
+  <dl>
+    <dt>Today</dt>
+    <dd>102</dd>
+    <dt>Last week</dt>
+    <dd>8,723</dd>
+    <dt>Last Month</dt>
+    <dd>197,478</dd>
+  </dl>
+</section>
+<section class="historic">
+  <h2>Projects</h2>
+  <pre class="teal"><span>6        |            ||</span><span>  |      |           |||</span><span>  |   | ||   |       ||||</span><span>  | | |||||| ||     ||||||</span><span>0 ||||||||||||||||||||||||||||</span></pre>
+  <dl>
+    <dt>Today</dt>
+    <dd>3</dd>
+    <dt>Last week</dt>
+    <dd>14</dd>
+    <dt>Last Month</dt>
+    <dd>34</dd>
+  </dl>
+</section>
+<section class="historic">
+  <h2>Imports</h2>
+  <pre class="teal"><span>40       |            ||</span><span>  |      |           |||</span><span>  |   | ||   |       ||||</span><span>  | | |||||| ||     ||||||</span><span>0 ||||||||||||||||||||||||||||</span></pre>
+  <dl>
+    <dt>Today</dt>
+    <dd>23</dd>
+    <dt>Last week</dt>
+    <dd>823</dd>
+    <dt>Last Month</dt>
+    <dd>2,882</dd>
+  </dl>
+</section>
+<section class="bar">
+  <h2>Emails</h2>
+  <pre class="yellow dotted"><span>::::::</span><span>::::::</span><span>::::::</span><span>::::::</span><span>::::::</span><span>::::::        ::::::</span><span>:::::: :::::: ::::::</span><span> </span><span>  42      3      9</span></pre>
+  <dl>
+    <dt>Welcome</dt>
+    <dd>42</dd>
+    <dt>Password reset</dt>
+    <dd>3</dd>
+    <dt>Trial exp.</dt>
+    <dd>9</dd>
+  </dl>
+</section>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/pw-dashboard/dist/style.css b/pw-dashboard/dist/style.css
new file mode 100644
index 0000000..d4da27e
--- /dev/null
+++ b/pw-dashboard/dist/style.css
@@ -0,0 +1,204 @@
+html {
+  background-color: var(--gray-900);
+  color: var(--gray-100);
+  font-family: monospace, monospace;
+  --black: #000;
+  --gray-100: #f7fafc;
+  --gray-200: #edf2f7;
+  --gray-500: #a0aec0;
+  --gray-600: #718096;
+  --gray-900: #1a202c;
+  --blue-300: #90cdf4;
+  --blue-400: #63b3ed;
+  --blue-500: #4299e1;
+  --blue-600: #3182ce;
+  --yellow-300: #faf089;
+  --yellow-400: #f6e05e;
+  --yellow-500: #ecc94b;
+  --yellow-600: #d69e2e;
+  --yellow-700: #b7791f;
+  --pink-300: #fbb6ce;
+  --pink-400: #f687b3;
+  --pink-500: #ed64a6;
+  --pink-600: #d53f8c;
+  --green-300: #9ae6b4;
+  --green-400: #68d391;
+  --green-500: #48bb78;
+  --green-600: #38a169;
+  --green-700: #2f855a;
+  --teal-300: #81e6d9;
+  --teal-400: #4fd1c5;
+  --teal-500: #38b2ac;
+  --teal-600: #319795;
+  --teal-700: #2c7a7b;
+  --lh: 1.4rem;
+  --border: var(--gray-600);
+}
+* {
+  font: inherit;
+  font-size: 1rem;
+  line-height: var(--lh);
+  font-weight: 300;
+  font-family: 'Overpass Mono', monospace, monospace;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  box-sizing: border-box;
+}
+body {
+  margin: 2ch;
+  max-width: 100%;
+  display: grid;
+  overflow-x: hidden;
+  grid-template-columns: repeat(auto-fit, minmax(42ch, 1fr));
+  grid-gap: calc(var(--lh) * 2) 1ch;
+}
+section {
+  border-color: var(--border);
+  border-style: solid;
+  border-width: 0 2px;
+  max-width: calc(100vw - 4ch);
+  padding: var(--lh) 1ch;
+  position: relative;
+}
+section::after {
+  content: '-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------';
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  color: var(--border);
+}
+section::after {
+  bottom: -0.65rem;
+}
+section > h2 {
+  text-transform: uppercase;
+  margin-top: -2rem;
+  white-space: nowrap;
+  margin-left: -1ch;
+  margin-right: -1ch;
+  overflow: hidden;
+}
+section > h2::before,
+section > h2::after {
+  color: var(--border);
+}
+section > h2::before {
+  content: '--- ';
+}
+section > h2::after {
+  content: ' ----------------------------------------------------------------------------------------------------------------------------';
+}
+section dl {
+  position: absolute;
+  top: calc(var(--lh) - 1rem + calc(var(--lh) / 2));
+  right: 0;
+  padding-right: 2ch;
+  width: 18ch;
+  background: var(--gray-900);
+}
+dt {
+  text-transform: uppercase;
+}
+dt::before {
+  content: '▪️';
+  margin-right: 1ch;
+}
+.historic dt:nth-of-type(1) {
+  color: var(--teal-300);
+}
+.historic dt:nth-of-type(2) {
+  color: var(--teal-400);
+}
+.historic dt:nth-of-type(3) {
+  color: var(--teal-500);
+}
+.bar dt:nth-of-type(1) {
+  color: var(--yellow-300);
+}
+.bar dt:nth-of-type(2) {
+  color: var(--yellow-400);
+}
+.bar dt:nth-of-type(3) {
+  color: var(--yellow-500);
+}
+.realtime dt:nth-of-type(1) {
+  color: var(--blue-400);
+}
+.realtime dt:nth-of-type(2) {
+  color: var(--blue-400);
+}
+.realtime dt:nth-of-type(3) {
+  color: var(--blue-400);
+}
+dd {
+  margin-left: 2ch;
+}
+section pre {
+  margin-top: var(--lh);
+}
+pre span {
+  display: block;
+  letter-spacing: -0.2ch;
+}
+.dotted span {
+  line-height: 0.8;
+}
+pre.blue span:nth-last-child(1) {
+  color: var(--blue-600);
+}
+pre.blue span:nth-last-child(2) {
+  color: var(--blue-600);
+}
+pre.blue span:nth-last-child(3) {
+  color: var(--blue-500);
+}
+pre.blue span:nth-last-child(4) {
+  color: var(--blue-400);
+}
+pre.blue span:nth-last-child(5) {
+  color: var(--blue-400);
+}
+pre.blue span:nth-last-child(6) {
+  color: var(--blue-300);
+}
+pre.teal span:nth-last-child(1) {
+  color: var(--teal-700);
+}
+pre.teal span:nth-last-child(2) {
+  color: var(--teal-500);
+}
+pre.teal span:nth-last-child(3) {
+  color: var(--teal-400);
+}
+pre.teal span:nth-last-child(4) {
+  color: var(--teal-300);
+}
+pre.green span:nth-last-child(1) {
+  color: var(--green-700);
+}
+pre.green span:nth-last-child(2) {
+  color: var(--green-600);
+}
+pre.green span:nth-last-child(3) {
+  color: var(--green-400);
+}
+pre.green span:nth-last-child(4) {
+  color: var(--green-300);
+}
+pre.yellow span:nth-last-child(1) {
+  color: var(--yellow-700);
+}
+pre.yellow span:nth-last-child(2) {
+  color: var(--yellow-500);
+}
+pre.yellow span:nth-last-child(3) {
+  color: var(--yellow-400);
+}
+pre.yellow span:nth-last-child(4) {
+  color: var(--yellow-300);
+}
\ No newline at end of file
diff --git a/pw-dashboard/license.txt b/pw-dashboard/license.txt
new file mode 100644
index 0000000..c820f38
--- /dev/null
+++ b/pw-dashboard/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Bart Veneman (https://codepen.io/bartveneman/pen/qBBbQjM)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/pw-dashboard/src/index.pug b/pw-dashboard/src/index.pug
new file mode 100644
index 0000000..ff0a88f
--- /dev/null
+++ b/pw-dashboard/src/index.pug
@@ -0,0 +1,118 @@
+section.realtime
+	h2 Response times
+	pre.blue.dotted
+		span|   : 
+		span|   :      :   :
+		span|   :   : ::   :         ::
+		span|   :  ::::::: ::       ::::
+		span|   : :::::::: ::      ::::::
+		span|   : :::::::: ::     ::::::::
+		span|  :: ::::::::::::.  :::::::::
+		span|.:::::::::::::::::.::::::::::::.
+	dl
+		dt Homepage
+		dd 2.23s
+		dt Search result
+		dd 4.92s
+		dt Login
+		dd 3.62s
+		
+section.historic
+	h2 Accounts
+	pre.teal
+		span|20        |
+		span|    |      |
+		span|    |   | ||   |
+		span|    | | |||||| ||     |
+		span|  0 |||||||||||||||   || ||
+	dl
+		dt Today
+		dd 1
+		dt Last week
+		dd 12
+		dt Last Month
+		dd 74
+		
+section.historic
+	h2 TROLOLOLOL
+	pre.teal
+		span|20        |
+		span|    |      |
+		span|    |   | ||   |           |   | ||   |
+		span|    | | |||||| ||     |    | | |||||| ||     |
+		span|  0 |||||||||||||||   || |||||||||||||||||   || ||
+	dl
+		dt Today
+		dd 1
+		dt Last week
+		dd 12
+		dt Last Month
+		dd 74
+		
+section.historic
+	h2 Sessions
+	pre.teal
+		span|        |            ||
+		span| |      |           |||
+		span| |   | ||   |       ||||
+		span| | | |||||| ||     ||||||
+		span|||||||||||||||||||||||||||||
+	dl
+		dt Today
+		dd 102
+		dt Last week
+		dd 8,723
+		dt Last Month
+		dd 197,478
+		
+section.historic
+	h2 Projects
+	pre.teal
+		span|6        |            ||
+		span|   |      |           |||
+		span|   |   | ||   |       ||||
+		span|   | | |||||| ||     ||||||
+		span|0 ||||||||||||||||||||||||||||
+	dl
+		dt Today
+		dd 3
+		dt Last week
+		dd 14
+		dt Last Month
+		dd 34
+		
+section.historic
+	h2 Imports
+	pre.teal
+		span|40       |            ||
+		span|   |      |           |||
+		span|   |   | ||   |       ||||
+		span|   | | |||||| ||     ||||||
+		span|0 ||||||||||||||||||||||||||||
+	dl
+		dt Today
+		dd 23
+		dt Last week
+		dd 823
+		dt Last Month
+		dd 2,882
+	
+section.bar
+	h2 Emails
+	pre.yellow.dotted
+		span| ::::::
+		span| ::::::
+		span| ::::::
+		span| ::::::
+		span| ::::::
+		span| ::::::        ::::::
+		span| :::::: :::::: ::::::
+		span| 
+		span|   42      3      9
+	dl
+		dt Welcome
+		dd 42
+		dt Password reset
+		dd 3
+		dt Trial exp.
+		dd 9
\ No newline at end of file
diff --git a/pw-dashboard/src/style.styl b/pw-dashboard/src/style.styl
new file mode 100644
index 0000000..ae27d84
--- /dev/null
+++ b/pw-dashboard/src/style.styl
@@ -0,0 +1,220 @@
+html
+	background-color var(--gray-900)
+	color: var(--gray-100)
+	font-family: monospace, monospace
+	
+	--black #000
+	
+	--gray-100 #F7FAFC
+	--gray-200 #EDF2F7
+	--gray-500 #A0AEC0
+	--gray-600 #718096
+	--gray-900 #1A202C
+
+	--blue-300 #90CDF4
+	--blue-400 #63B3ED
+	--blue-500 #4299E1
+	--blue-600 #3182CE
+	
+	--yellow-300 #FAF089
+	--yellow-400 #F6E05E
+	--yellow-500 #ECC94B
+	--yellow-600 #D69E2E
+	--yellow-700 #B7791F
+	
+	--pink-300 #FBB6CE
+	--pink-400 #F687B3
+	--pink-500 #ED64A6
+	--pink-600 #D53F8C
+	
+	--green-300 #9AE6B4
+	--green-400 #68D391
+	--green-500 #48BB78
+	--green-600 #38A169
+	--green-700 #2F855A
+	
+	--teal-300 #81E6D9
+	--teal-400 #4FD1C5
+	--teal-500 #38B2AC
+	--teal-600 #319795
+	--teal-700 #2C7A7B
+	
+	--lh 1.4rem
+	--border var(--gray-600)
+	
+*
+	font inherit
+	font-size 1rem
+	line-height var(--lh)
+	font-weight 300
+	font-family 'Overpass Mono', monospace, monospace
+	margin 0
+	padding 0
+	list-style none
+	box-sizing border-box
+	
+body
+	margin 2ch
+	max-width 100%
+	display grid
+	overflow-x hidden
+	grid-template-columns repeat(auto-fit, minmax(42ch, 1fr))
+	grid-gap calc(var(--lh) * 2) 1ch
+	
+section
+	border-color var(--border)
+	border-style solid
+	border-width 0 2px
+	max-width calc(100vw - 4ch)
+	padding var(--lh) 1ch
+	position relative
+	
+	&::after
+		content: '-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------'
+		max-width 100%
+		overflow hidden
+		white-space nowrap
+		position absolute
+		left 0
+		right 0
+		z-index -1
+		color var(--border)
+		
+	&::after
+		bottom -.65rem
+		
+section > h2
+	text-transform uppercase
+	margin-top -2rem
+	white-space nowrap
+	margin-left -1ch // undo padding
+	margin-right @margin-left
+	overflow hidden
+	
+	&::before,
+	&::after
+		color var(--border)
+		
+	&::before
+		content '--- '
+		
+	&::after
+		content ' ----------------------------------------------------------------------------------------------------------------------------'
+		
+section dl
+	position absolute
+	top calc(var(--lh) - 1rem + calc(var(--lh) / 2))
+	right 0
+	padding-right 2ch
+	width 18ch
+	background var(--gray-900)
+		
+dt
+	text-transform uppercase
+	
+	&::before
+		content '▪️'
+		margin-right 1ch
+		
+.historic
+	dt:nth-of-type(1)
+		color var(--teal-300)
+
+	dt:nth-of-type(2)
+		color var(--teal-400)
+
+	dt:nth-of-type(3)
+		color var(--teal-500)
+
+.bar
+	dt:nth-of-type(1)
+		color var(--yellow-300)
+
+	dt:nth-of-type(2)
+		color var(--yellow-400)
+
+	dt:nth-of-type(3)
+		color var(--yellow-500)
+		
+.realtime
+	dt:nth-of-type(1)
+		color var(--blue-400)
+
+	dt:nth-of-type(2)
+		color var(--blue-400)
+
+	dt:nth-of-type(3)
+		color var(--blue-400)
+
+dd
+	margin-left 2ch
+	
+section pre
+	margin-top var(--lh)
+	
+pre span
+	display block
+	letter-spacing -0.2ch
+	
+.dotted
+	span
+		line-height .8
+	
+pre.blue span
+	&:nth-last-child(1)
+		color var(--blue-600)
+	
+	&:nth-last-child(2)
+		color var(--blue-600)
+	
+	&:nth-last-child(3)
+		color var(--blue-500)
+	
+	&:nth-last-child(4)
+		color var(--blue-400)
+	
+	&:nth-last-child(5)
+		color var(--blue-400)
+	
+	&:nth-last-child(6)
+		color var(--blue-300)
+	
+pre.teal span
+	&:nth-last-child(1)
+		color var(--teal-700)
+	
+	&:nth-last-child(2)
+		color var(--teal-500)
+	
+	&:nth-last-child(3)
+		color var(--teal-400)
+	
+	&:nth-last-child(4)
+		color var(--teal-300)
+	
+pre.green span
+	&:nth-last-child(1)
+		color var(--green-700)
+	
+	&:nth-last-child(2)
+		color var(--green-600)
+	
+	&:nth-last-child(3)
+		color var(--green-400)
+	
+	&:nth-last-child(4)
+		color var(--green-300)
+	
+pre.yellow span
+	&:nth-last-child(1)
+		color var(--yellow-700)
+	
+	&:nth-last-child(2)
+		color var(--yellow-500)
+	
+	&:nth-last-child(3)
+		color var(--yellow-400)
+	
+	&:nth-last-child(4)
+		color var(--yellow-300)
+	
\ No newline at end of file
diff --git a/quarto/README.markdown b/quarto/README.markdown
new file mode 100644
index 0000000..b4d67bc
--- /dev/null
+++ b/quarto/README.markdown
@@ -0,0 +1,7 @@
+# Quarto
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jakealbaugh/pen/ZEeJyWb](https://codepen.io/jakealbaugh/pen/ZEeJyWb).
+
+Digital version of the game [Quarto](https://en.wikipedia.org/wiki/Quarto_(board_game))
+
+Double Click to reset piece.
diff --git a/quarto/dist/index.html b/quarto/dist/index.html
new file mode 100644
index 0000000..a8afa5a
--- /dev/null
+++ b/quarto/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Quarto</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<section><div id="board"></div></section>
+
+<div id="alert"></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/quarto/dist/script.js b/quarto/dist/script.js
new file mode 100644
index 0000000..daeb0de
--- /dev/null
+++ b/quarto/dist/script.js
@@ -0,0 +1,197 @@
+console.clear();
+
+const alert = document.getElementById("alert");
+alert.addEventListener("click", () => alert.className = "");
+
+class Piece {
+  constructor(color, density, height, shape) {
+    this.id = [color, density, height, shape].join("");
+    this.color = Piece.valueFromTraitAndNumber("color", color);
+    this.height = Piece.valueFromTraitAndNumber("height", height);
+    this.shape = Piece.valueFromTraitAndNumber("shape", shape);
+    this.density = Piece.valueFromTraitAndNumber("density", density);
+    this.x = undefined;
+    this.y = undefined;
+    this.element = document.createElement("span");
+    this.element.className = ["piece", this.color, this.density, this.height, this.shape].join(" ");
+    const piece  = "short"
+  }
+
+  place(x, y) {
+    this.x = x;
+    this.y = y;
+    this.element.style.setProperty("--x", x);
+    this.element.style.setProperty("--y", y);
+    this.deactivate();
+  }
+  
+  placeInitial(x, y) {
+    this.place(x, y);
+    this.element.style.setProperty("--initial-x", x);
+    this.element.style.setProperty("--initial-y", y);
+  }
+  
+  reset() {
+    this.element.style.removeProperty("--x");
+    this.element.style.removeProperty("--y");
+    this.x = undefined;
+    this.y = undefined;
+    this.deactivate();
+  }
+  
+  activate() {
+    this.element.classList.add("active");
+  }
+
+  deactivate() {
+    this.element.classList.remove("active");
+  }
+  
+  static valueFromTraitAndNumber(trait, number) {
+    if (trait === "color") return number ? "dark" : "light";
+    if (trait === "height") return number ? "tall" : "short";
+    if (trait === "shape") return number ? "square" : "round";
+    if (trait === "density") return number ? "hollow" : "solid";
+  }
+}
+
+class Game {
+  constructor() {
+    this.board = document.getElementById("board");
+    this.generateMatrix();
+    this.generatePieces();
+  }
+  
+  detectGameOver(color) {
+    const checks = [
+      [0, 1, 2, 3],   [4, 5, 6, 7],
+      [8, 9, 10, 11], [12, 13, 14, 15],
+      [0, 4, 8, 12],  [1, 5, 9, 13],
+      [2, 6, 10, 14], [3, 7, 11, 15],
+      [0, 5, 10, 15], [12, 9, 6, 3]
+    ];
+    const traits = ["color", "density", "height", "shape"];
+    const matches = [];
+    checks.forEach((indexes) => {
+      const matrixValues = indexes.map((idx) => this.matrix[idx]).filter((v) => v !== undefined);
+      if (matrixValues.length === 4) {
+        traits.forEach((trait, i) => {
+          const distinct = [...new Set(matrixValues.map((str) => str.charAt(i)))];
+          if (distinct.length === 1) {
+            const value = Piece.valueFromTraitAndNumber(trait, parseInt(distinct[0]));
+            matches.push({ trait, indexes, value });
+          }
+        });    
+      }
+    });
+    
+    if (matches.length) {
+      this.onGameOver(matches, color);
+    }
+  }
+  
+  generateMatrix() {
+    this.matrix = [
+      undefined, undefined, undefined, undefined,
+      undefined, undefined, undefined, undefined,
+      undefined, undefined, undefined, undefined,
+      undefined, undefined, undefined, undefined,
+    ];
+    this.matrix.forEach((_, i) => {
+      const y = Math.floor(i / 4);
+      const x = i % 4;
+      const tile = document.createElement("span");
+      tile.className = "tile";
+      const xLabel = ["A", "B", "C", "D"][x];
+      tile.setAttribute("label", `${xLabel}${y + 1}`);
+      tile.addEventListener("click", () => {
+        this.onTileClick(x, y);
+      });
+      this.board.appendChild(tile);
+    });
+  }
+
+  generatePieces() {  
+    this.pieces = {};
+    const pieces = [
+      new Piece(0, 0, 0, 0), new Piece(0, 0, 0, 1), new Piece(0, 0, 1, 0), new Piece(0, 0, 1, 1),
+      new Piece(0, 1, 0, 0), new Piece(0, 1, 0, 1), new Piece(0, 1, 1, 0), new Piece(0, 1, 1, 1),
+      new Piece(1, 0, 0, 0), new Piece(1, 0, 0, 1), new Piece(1, 0, 1, 0), new Piece(1, 0, 1, 1),
+      new Piece(1, 1, 0, 0), new Piece(1, 1, 0, 1), new Piece(1, 1, 1, 0), new Piece(1, 1, 1, 1),
+    ];
+    pieces.forEach((piece, i) => {
+      this.pieces[piece.id] = piece;
+      let x, y;
+      if (i < 4) {
+        x = i;
+        y = -1;
+      } else if (i < 8) {
+        x = 4;
+        y = i % 4;
+      } else if (i < 12) {
+        x = 3 - (i % 4);
+        y = 4;
+      } else {
+        x = -1;
+        y = 3 - (i % 4);
+      }
+      piece.placeInitial(x, y);
+      piece.element.addEventListener("click", () => this.onPieceClick(piece));
+      piece.element.addEventListener("dblclick", () => this.onPieceDblClick(piece));
+      this.board.appendChild(piece.element);
+    });
+  }
+  
+  onGameOver(data, color) {
+    const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+    setTimeout(() => {
+      const text = data.map(({ value }) => cap(value)).join(" / ");
+      alert.style.setProperty("--color", `var(--color-${color}`);
+      alert.innerHTML = `<div>Game Over!<br>${text}</div>`;
+      alert.className = "active";
+    }, 100);
+  }
+
+  onPieceClick(piece) {
+    if (this.selectedPieceId === piece.id) {
+      piece.deactivate();
+      this.selectedPieceId = undefined;
+    } else {
+      if (this.selectedPieceId) {
+        this.pieces[this.selectedPieceId].deactivate();
+      }
+      piece.activate();
+      this.selectedPieceId = piece.id;
+    }
+  }
+
+  onPieceDblClick(piece) {
+    const idx = piece.y * 4 + piece.x;
+    if (this.matrix[idx] === piece.id) {
+      this.matrix[idx] = undefined;
+    }
+    piece.reset();
+    this.selectedPieceId = undefined;
+    
+  }
+  
+  onTileClick(x, y) {
+    if (this.selectedPieceId) {
+      this.placeSelectedPiece(x, y);
+    }
+  }
+  
+  placeSelectedPiece(x, y) {
+    const piece = this.pieces[this.selectedPieceId];
+    const idx = piece.y * 4 + piece.x;
+    if (this.matrix[idx] === piece.id) {
+      this.matrix[idx] = undefined;
+    }
+    piece.place(x, y);
+    this.matrix[y * 4 + x] = this.selectedPieceId;
+    this.selectedPieceId = undefined;
+    this.detectGameOver(piece.color);
+  }
+}
+
+const game = new Game();
\ No newline at end of file
diff --git a/quarto/dist/style.css b/quarto/dist/style.css
new file mode 100644
index 0000000..3b89a0f
--- /dev/null
+++ b/quarto/dist/style.css
@@ -0,0 +1,131 @@
+:root {
+  --color-dark: #444;
+  --color-light: #ecc026;
+  --di: min(100vh, 100vw);
+  --board-di: calc(var(--di) * 0.66666666);
+  --border: calc(var(--board-di) * 0.013333333);
+  --dimension-lg: calc(var(--line) * 14); 
+  --dimension-sm: calc(var(--line) * 7); 
+  --line: var(--border);
+}
+
+#alert {
+  --color: var(--color-dark);
+  background-color: rgba(255, 255, 255, 0.8);
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition: opacity 250ms ease-in-out;
+}
+#alert:not(.active) {
+  pointer-events: none;
+}
+
+#alert div {
+  background-color: var(--color);
+  border-radius: var(--border);
+  box-sizing: border-box;
+  color: white;
+  cursor: pointer;
+  font-size: calc(var(--board-di) * 0.07);
+  font-weight: bold;
+  left: 50%;
+  opacity: 0;
+  padding: calc(var(--border) * 2);
+  position: absolute;
+  text-align: center;
+  top: 50%;
+  transform: scale(0.00001) translate(-50%, -50%);
+  transform-origin: 0 0;
+  transition: all 250ms ease-in-out;
+  width: calc(var(--board-di) * 0.75);
+}
+
+#alert.active,
+#alert.active div {
+  opacity: 1;
+}
+
+#alert.active div {
+  transform: scale(1) translate(-50%, -50%);
+}
+
+section {
+  box-sizing: border-box;
+  height: var(--di);  
+  margin: calc((100vh - var(--di)) * 0.5) calc((100vw - var(--di)) * 0.5);
+  padding: calc((var(--di) - var(--board-di)) * 0.5);
+  width: var(--di);
+}
+
+#board {
+  display: flex;
+  flex-wrap: wrap;
+  height: var(--board-di);
+  position: relative;
+  width: var(--board-di);
+}
+
+#board .tile {
+  display: block;
+  height: 25%;
+  position: relative;
+  width: 25%;
+}
+
+#board .tile::after {
+  align-items: center;
+  background: #e9e9e9;
+  border-radius: calc(var(--border) * 1.5);
+  color: white;
+  content: attr(label);
+  display: flex;
+  flex-direction: column;
+  font-size: calc(var(--board-di) * 0.07);
+  font-weight: bold;
+  justify-content: center;
+  height: 90%;
+  left: 5%;
+  position: absolute;
+  top: 5%;
+  width: 90%;
+}
+
+#board .piece {
+  --initial-x: 0;
+  --initial-y: -1;
+  background-position: center;
+  background-color: #fff;
+  background-image: repeating-linear-gradient(
+    45deg,
+    var(--color-piece),
+    var(--color-piece) var(--line),
+    transparent var(--line),
+    transparent calc(var(--line) * 2)
+  );
+  border: var(--border) solid transparent;
+  box-sizing: border-box;
+  height: var(--dimension);
+  left: calc(var(--x, var(--initial-x)) * 25% + 12.5%);
+  position: absolute;
+  top: calc(var(--y, var(--initial-y)) * 25% + 12.5%);
+  transform: translate(-50%, -50%);
+  transition: all 150ms ease-in-out;
+  width: var(--dimension);
+}
+
+#board .piece.active {
+  box-shadow: 0 0 0 var(--border) red;
+}
+
+#board .piece.dark { --color-piece: var(--color-dark); }
+#board .piece.light { --color-piece: var(--color-light); }
+#board .piece.tall { --dimension: var(--dimension-lg); }
+#board .piece.short { --dimension: var(--dimension-sm); }
+#board .piece.round { border-radius: 50%; }
+#board .piece.square { border-radius: var(--border); }
+#board .piece.solid { background-color: var(--color-piece); }
+#board .piece.hollow { border-color: var(--color-piece); }
\ No newline at end of file
diff --git a/quarto/license.txt b/quarto/license.txt
new file mode 100644
index 0000000..6c4938f
--- /dev/null
+++ b/quarto/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Jake Albaugh (https://codepen.io/jakealbaugh/pen/ZEeJyWb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/quarto/src/index.html b/quarto/src/index.html
new file mode 100644
index 0000000..9c94365
--- /dev/null
+++ b/quarto/src/index.html
@@ -0,0 +1,3 @@
+<section><div id="board"></div></section>
+
+<div id="alert"></div>
\ No newline at end of file
diff --git a/quarto/src/script.js b/quarto/src/script.js
new file mode 100644
index 0000000..daeb0de
--- /dev/null
+++ b/quarto/src/script.js
@@ -0,0 +1,197 @@
+console.clear();
+
+const alert = document.getElementById("alert");
+alert.addEventListener("click", () => alert.className = "");
+
+class Piece {
+  constructor(color, density, height, shape) {
+    this.id = [color, density, height, shape].join("");
+    this.color = Piece.valueFromTraitAndNumber("color", color);
+    this.height = Piece.valueFromTraitAndNumber("height", height);
+    this.shape = Piece.valueFromTraitAndNumber("shape", shape);
+    this.density = Piece.valueFromTraitAndNumber("density", density);
+    this.x = undefined;
+    this.y = undefined;
+    this.element = document.createElement("span");
+    this.element.className = ["piece", this.color, this.density, this.height, this.shape].join(" ");
+    const piece  = "short"
+  }
+
+  place(x, y) {
+    this.x = x;
+    this.y = y;
+    this.element.style.setProperty("--x", x);
+    this.element.style.setProperty("--y", y);
+    this.deactivate();
+  }
+  
+  placeInitial(x, y) {
+    this.place(x, y);
+    this.element.style.setProperty("--initial-x", x);
+    this.element.style.setProperty("--initial-y", y);
+  }
+  
+  reset() {
+    this.element.style.removeProperty("--x");
+    this.element.style.removeProperty("--y");
+    this.x = undefined;
+    this.y = undefined;
+    this.deactivate();
+  }
+  
+  activate() {
+    this.element.classList.add("active");
+  }
+
+  deactivate() {
+    this.element.classList.remove("active");
+  }
+  
+  static valueFromTraitAndNumber(trait, number) {
+    if (trait === "color") return number ? "dark" : "light";
+    if (trait === "height") return number ? "tall" : "short";
+    if (trait === "shape") return number ? "square" : "round";
+    if (trait === "density") return number ? "hollow" : "solid";
+  }
+}
+
+class Game {
+  constructor() {
+    this.board = document.getElementById("board");
+    this.generateMatrix();
+    this.generatePieces();
+  }
+  
+  detectGameOver(color) {
+    const checks = [
+      [0, 1, 2, 3],   [4, 5, 6, 7],
+      [8, 9, 10, 11], [12, 13, 14, 15],
+      [0, 4, 8, 12],  [1, 5, 9, 13],
+      [2, 6, 10, 14], [3, 7, 11, 15],
+      [0, 5, 10, 15], [12, 9, 6, 3]
+    ];
+    const traits = ["color", "density", "height", "shape"];
+    const matches = [];
+    checks.forEach((indexes) => {
+      const matrixValues = indexes.map((idx) => this.matrix[idx]).filter((v) => v !== undefined);
+      if (matrixValues.length === 4) {
+        traits.forEach((trait, i) => {
+          const distinct = [...new Set(matrixValues.map((str) => str.charAt(i)))];
+          if (distinct.length === 1) {
+            const value = Piece.valueFromTraitAndNumber(trait, parseInt(distinct[0]));
+            matches.push({ trait, indexes, value });
+          }
+        });    
+      }
+    });
+    
+    if (matches.length) {
+      this.onGameOver(matches, color);
+    }
+  }
+  
+  generateMatrix() {
+    this.matrix = [
+      undefined, undefined, undefined, undefined,
+      undefined, undefined, undefined, undefined,
+      undefined, undefined, undefined, undefined,
+      undefined, undefined, undefined, undefined,
+    ];
+    this.matrix.forEach((_, i) => {
+      const y = Math.floor(i / 4);
+      const x = i % 4;
+      const tile = document.createElement("span");
+      tile.className = "tile";
+      const xLabel = ["A", "B", "C", "D"][x];
+      tile.setAttribute("label", `${xLabel}${y + 1}`);
+      tile.addEventListener("click", () => {
+        this.onTileClick(x, y);
+      });
+      this.board.appendChild(tile);
+    });
+  }
+
+  generatePieces() {  
+    this.pieces = {};
+    const pieces = [
+      new Piece(0, 0, 0, 0), new Piece(0, 0, 0, 1), new Piece(0, 0, 1, 0), new Piece(0, 0, 1, 1),
+      new Piece(0, 1, 0, 0), new Piece(0, 1, 0, 1), new Piece(0, 1, 1, 0), new Piece(0, 1, 1, 1),
+      new Piece(1, 0, 0, 0), new Piece(1, 0, 0, 1), new Piece(1, 0, 1, 0), new Piece(1, 0, 1, 1),
+      new Piece(1, 1, 0, 0), new Piece(1, 1, 0, 1), new Piece(1, 1, 1, 0), new Piece(1, 1, 1, 1),
+    ];
+    pieces.forEach((piece, i) => {
+      this.pieces[piece.id] = piece;
+      let x, y;
+      if (i < 4) {
+        x = i;
+        y = -1;
+      } else if (i < 8) {
+        x = 4;
+        y = i % 4;
+      } else if (i < 12) {
+        x = 3 - (i % 4);
+        y = 4;
+      } else {
+        x = -1;
+        y = 3 - (i % 4);
+      }
+      piece.placeInitial(x, y);
+      piece.element.addEventListener("click", () => this.onPieceClick(piece));
+      piece.element.addEventListener("dblclick", () => this.onPieceDblClick(piece));
+      this.board.appendChild(piece.element);
+    });
+  }
+  
+  onGameOver(data, color) {
+    const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+    setTimeout(() => {
+      const text = data.map(({ value }) => cap(value)).join(" / ");
+      alert.style.setProperty("--color", `var(--color-${color}`);
+      alert.innerHTML = `<div>Game Over!<br>${text}</div>`;
+      alert.className = "active";
+    }, 100);
+  }
+
+  onPieceClick(piece) {
+    if (this.selectedPieceId === piece.id) {
+      piece.deactivate();
+      this.selectedPieceId = undefined;
+    } else {
+      if (this.selectedPieceId) {
+        this.pieces[this.selectedPieceId].deactivate();
+      }
+      piece.activate();
+      this.selectedPieceId = piece.id;
+    }
+  }
+
+  onPieceDblClick(piece) {
+    const idx = piece.y * 4 + piece.x;
+    if (this.matrix[idx] === piece.id) {
+      this.matrix[idx] = undefined;
+    }
+    piece.reset();
+    this.selectedPieceId = undefined;
+    
+  }
+  
+  onTileClick(x, y) {
+    if (this.selectedPieceId) {
+      this.placeSelectedPiece(x, y);
+    }
+  }
+  
+  placeSelectedPiece(x, y) {
+    const piece = this.pieces[this.selectedPieceId];
+    const idx = piece.y * 4 + piece.x;
+    if (this.matrix[idx] === piece.id) {
+      this.matrix[idx] = undefined;
+    }
+    piece.place(x, y);
+    this.matrix[y * 4 + x] = this.selectedPieceId;
+    this.selectedPieceId = undefined;
+    this.detectGameOver(piece.color);
+  }
+}
+
+const game = new Game();
\ No newline at end of file
diff --git a/quarto/src/style.css b/quarto/src/style.css
new file mode 100644
index 0000000..3b89a0f
--- /dev/null
+++ b/quarto/src/style.css
@@ -0,0 +1,131 @@
+:root {
+  --color-dark: #444;
+  --color-light: #ecc026;
+  --di: min(100vh, 100vw);
+  --board-di: calc(var(--di) * 0.66666666);
+  --border: calc(var(--board-di) * 0.013333333);
+  --dimension-lg: calc(var(--line) * 14); 
+  --dimension-sm: calc(var(--line) * 7); 
+  --line: var(--border);
+}
+
+#alert {
+  --color: var(--color-dark);
+  background-color: rgba(255, 255, 255, 0.8);
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition: opacity 250ms ease-in-out;
+}
+#alert:not(.active) {
+  pointer-events: none;
+}
+
+#alert div {
+  background-color: var(--color);
+  border-radius: var(--border);
+  box-sizing: border-box;
+  color: white;
+  cursor: pointer;
+  font-size: calc(var(--board-di) * 0.07);
+  font-weight: bold;
+  left: 50%;
+  opacity: 0;
+  padding: calc(var(--border) * 2);
+  position: absolute;
+  text-align: center;
+  top: 50%;
+  transform: scale(0.00001) translate(-50%, -50%);
+  transform-origin: 0 0;
+  transition: all 250ms ease-in-out;
+  width: calc(var(--board-di) * 0.75);
+}
+
+#alert.active,
+#alert.active div {
+  opacity: 1;
+}
+
+#alert.active div {
+  transform: scale(1) translate(-50%, -50%);
+}
+
+section {
+  box-sizing: border-box;
+  height: var(--di);  
+  margin: calc((100vh - var(--di)) * 0.5) calc((100vw - var(--di)) * 0.5);
+  padding: calc((var(--di) - var(--board-di)) * 0.5);
+  width: var(--di);
+}
+
+#board {
+  display: flex;
+  flex-wrap: wrap;
+  height: var(--board-di);
+  position: relative;
+  width: var(--board-di);
+}
+
+#board .tile {
+  display: block;
+  height: 25%;
+  position: relative;
+  width: 25%;
+}
+
+#board .tile::after {
+  align-items: center;
+  background: #e9e9e9;
+  border-radius: calc(var(--border) * 1.5);
+  color: white;
+  content: attr(label);
+  display: flex;
+  flex-direction: column;
+  font-size: calc(var(--board-di) * 0.07);
+  font-weight: bold;
+  justify-content: center;
+  height: 90%;
+  left: 5%;
+  position: absolute;
+  top: 5%;
+  width: 90%;
+}
+
+#board .piece {
+  --initial-x: 0;
+  --initial-y: -1;
+  background-position: center;
+  background-color: #fff;
+  background-image: repeating-linear-gradient(
+    45deg,
+    var(--color-piece),
+    var(--color-piece) var(--line),
+    transparent var(--line),
+    transparent calc(var(--line) * 2)
+  );
+  border: var(--border) solid transparent;
+  box-sizing: border-box;
+  height: var(--dimension);
+  left: calc(var(--x, var(--initial-x)) * 25% + 12.5%);
+  position: absolute;
+  top: calc(var(--y, var(--initial-y)) * 25% + 12.5%);
+  transform: translate(-50%, -50%);
+  transition: all 150ms ease-in-out;
+  width: var(--dimension);
+}
+
+#board .piece.active {
+  box-shadow: 0 0 0 var(--border) red;
+}
+
+#board .piece.dark { --color-piece: var(--color-dark); }
+#board .piece.light { --color-piece: var(--color-light); }
+#board .piece.tall { --dimension: var(--dimension-lg); }
+#board .piece.short { --dimension: var(--dimension-sm); }
+#board .piece.round { border-radius: 50%; }
+#board .piece.square { border-radius: var(--border); }
+#board .piece.solid { background-color: var(--color-piece); }
+#board .piece.hollow { border-color: var(--color-piece); }
\ No newline at end of file
diff --git a/quick-mathematical-features-support-test/LICENSE.txt b/quick-mathematical-features-support-test/LICENSE.txt
new file mode 100644
index 0000000..012cb28
--- /dev/null
+++ b/quick-mathematical-features-support-test/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Ana Tudor (https://codepen.io/thebabydino/pen/yLRBJXP)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/quick-mathematical-features-support-test/README.md b/quick-mathematical-features-support-test/README.md
new file mode 100644
index 0000000..c064bc1
--- /dev/null
+++ b/quick-mathematical-features-support-test/README.md
@@ -0,0 +1,7 @@
+# Quick mathematical features support test
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/thebabydino/pen/yLRBJXP](https://codepen.io/thebabydino/pen/yLRBJXP).
+
+Confused about what browser supports what mathematical functions/ constants? This Pen uses `@supports` to tell you what the browser you're currently viewing it in supports and what not.
+
+As of April 2023, Safari (tested via Epiphany as I'm on Ubuntu) supports everything, Firefox supports everything except `abs()` and `sign()` (which can be easily emulated using other very well supported functions though), while Chrome only supports constants and trigonometric functions.
\ No newline at end of file
diff --git a/quick-mathematical-features-support-test/dist/index.html b/quick-mathematical-features-support-test/dist/index.html
new file mode 100644
index 0000000..bc28d37
--- /dev/null
+++ b/quick-mathematical-features-support-test/dist/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Quick mathematical features support test</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<p>Confused about what browser supports what mathematical functions/ constants? This Pen uses <code>@supports</code> to tell you what the browser you're currently viewing it in supports and what not.</p>
+<p>As of April 2023, Safari (tested via Epiphany as I'm on Ubuntu) supports everything, Firefox supports everything except <code>abs()</code> and <code>sign()</code> (which can be easily <a href="https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/" target="_blank">emulated</a> using other very well supported functions though), while Chrome only supports constants and trigonometric functions.</p>
+<div class="box" data-feat="function--round" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-round" target="_blank"><code>round()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--round">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-round" target="_blank"><code>round()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--mod" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-mod" target="_blank"><code>mod()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--mod">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-mod" target="_blank"><code>mod()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--rem" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-rem" target="_blank"><code>rem()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--rem">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-rem" target="_blank"><code>rem()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--sin" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-sin" target="_blank"><code>sin()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--sin">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-sin" target="_blank"><code>sin()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--cos" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-cos" target="_blank"><code>cos()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--cos">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-cos" target="_blank"><code>cos()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--tan" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-tan" target="_blank"><code>tan()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--tan">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-tan" target="_blank"><code>tan()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--asin" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-asin" target="_blank"><code>asin()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--asin">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-asin" target="_blank"><code>asin()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--acos" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-acos" target="_blank"><code>acos()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--acos">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-acos" target="_blank"><code>acos()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--atan" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-atan" target="_blank"><code>atan()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--atan">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-atan" target="_blank"><code>atan()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--atan2" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-atan2" target="_blank"><code>atan2()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--atan2">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-atan2" target="_blank"><code>atan2()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--pow" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-pow" target="_blank"><code>pow()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--pow">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-pow" target="_blank"><code>pow()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--sqrt" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-sqrt" target="_blank"><code>sqrt()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--sqrt">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-sqrt" target="_blank"><code>sqrt()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--exp" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-exp" target="_blank"><code>exp()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--exp">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-exp" target="_blank"><code>exp()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--log" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-log" target="_blank"><code>log()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--log">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-log" target="_blank"><code>log()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--hypot" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-hypot" target="_blank"><code>hypot()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--hypot">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-hypot" target="_blank"><code>hypot()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--abs" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-abs" target="_blank"><code>abs()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--abs">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-abs" target="_blank"><code>abs()</code></a> function! . 😿</div>
+<div class="box" data-feat="function--sign" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#funcdef-sign" target="_blank"><code>sign()</code></a> function! 🥳 🎉</div>
+<div class="box" data-feat="function--sign">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#funcdef-sign" target="_blank"><code>sign()</code></a> function! . 😿</div>
+<div class="box" data-feat="constant--e" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#valdef-calc-e" target="_blank"><code>e</code></a> constant! 🥳 🎉</div>
+<div class="box" data-feat="constant--e">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#valdef-calc-e" target="_blank"><code>e</code></a> constant! . 😿</div>
+<div class="box" data-feat="constant--pi" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#valdef-calc-pi" target="_blank"><code>pi</code></a> constant! 🥳 🎉</div>
+<div class="box" data-feat="constant--pi">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#valdef-calc-pi" target="_blank"><code>pi</code></a> constant! . 😿</div>
+<div class="box" data-feat="constant--infinity" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#valdef-calc-infinity" target="_blank"><code>infinity</code></a> constant! 🥳 🎉</div>
+<div class="box" data-feat="constant--infinity">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#valdef-calc-infinity" target="_blank"><code>infinity</code></a> constant! . 😿</div>
+<div class="box" data-feat="constant---infinity" data-test="1">Yay, your browser supports the <a href="https://drafts.csswg.org/css-values-4/#valdef-calc--infinity" target="_blank"><code>-infinity</code></a> constant! 🥳 🎉</div>
+<div class="box" data-feat="constant---infinity">Sorry, your browser does not support the <a href="https://drafts.csswg.org/css-values-4/#valdef-calc--infinity" target="_blank"><code>-infinity</code></a> constant! . 😿</div>
+<footer>
+  <p>The info boxes were created as described in <a href="https://codepen.io/thebabydino/full/qBKvjKM" target="_blank">this Pen</a>.</p>
+  <p>Got any other questions about this? Found any problems with it?<br/>You can drop a comment <a href="https://codepen.io/thebabydino/details/yLRBJXP" target="_blank">here</a> or ping me on <a href="https://mastodon.social/@anatudor" target="_blank" data-ico="🦣">Mastodon</a> 
+     or on <a href="https://twitter.com/anatudor" target="_blank" data-ico="🐦">Twitter</a>.
+  </p>
+  <p>And if you like the Maths and Physics infused CSS, canvas and SVG work that I've been putting out for over a decade, you can support it by being a cool cat and becoming a patron on <a href="https://www.patreon.com/anatudor" target="_blank">Patreon</a> or with a one time donation on <a href="https://ko-fi.com/anatudor" target="_blank">Ko-fi</a>. Or at least by sharing this to show the world what can be done with CSS these days... because it's pretty damn cool!</p>
+</footer>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/quick-mathematical-features-support-test/dist/style.css b/quick-mathematical-features-support-test/dist/style.css
new file mode 100644
index 0000000..703f768
--- /dev/null
+++ b/quick-mathematical-features-support-test/dist/style.css
@@ -0,0 +1,266 @@
+/* ----- relevant styles ----- */
+.box {
+  /* here's where the cool part starts: 
+   * different styles for the yay/ nay boxes */
+  border-left: solid 5px #db3056;
+  background: #851d41;
+  /* a value of 1 if it indicates feature is supported */
+  /* ----- THE MAGIC ----- */
+  /* support test for the round() function */
+  /* support test for the mod() function */
+  /* support test for the rem() function */
+  /* support test for the sin() function */
+  /* support test for the cos() function */
+  /* support test for the tan() function */
+  /* support test for the asin() function */
+  /* support test for the acos() function */
+  /* support test for the atan() function */
+  /* support test for the atan2() function */
+  /* support test for the pow() function */
+  /* support test for the sqrt() function */
+  /* support test for the exp() function */
+  /* support test for the log() function */
+  /* support test for the hypot() function */
+  /* support test for the abs() function */
+  /* support test for the sign() function */
+  /* support test for the e constant */
+  /* support test for the pi constant */
+  /* support test for the infinity constant */
+  /* support test for the -infinity constant */
+}
+.box[data-test="1"] {
+  border-color: #4e8d7c;
+  background: #045762;
+  display: none;
+}
+@supports (z-index: Round(4.1, 1)) {
+  .box[data-feat=function--round] {
+    display: none;
+  }
+  .box[data-feat=function--round][data-test="1"] {
+    display: block;
+  }
+}
+@supports (z-index: Mod(5, 2)) {
+  .box[data-feat=function--mod] {
+    display: none;
+  }
+  .box[data-feat=function--mod][data-test="1"] {
+    display: block;
+  }
+}
+@supports (z-index: Rem(5, 2)) {
+  .box[data-feat=function--rem] {
+    display: none;
+  }
+  .box[data-feat=function--rem][data-test="1"] {
+    display: block;
+  }
+}
+@supports (top: calc(sin(45deg)*1em)) {
+  .box[data-feat=function--sin] {
+    display: none;
+  }
+  .box[data-feat=function--sin][data-test="1"] {
+    display: block;
+  }
+}
+@supports (top: calc(cos(45deg)*1em)) {
+  .box[data-feat=function--cos] {
+    display: none;
+  }
+  .box[data-feat=function--cos][data-test="1"] {
+    display: block;
+  }
+}
+@supports (top: calc(tan(45deg)*1em)) {
+  .box[data-feat=function--tan] {
+    display: none;
+  }
+  .box[data-feat=function--tan][data-test="1"] {
+    display: block;
+  }
+}
+@supports (rotate: asin(0.5)) {
+  .box[data-feat=function--asin] {
+    display: none;
+  }
+  .box[data-feat=function--asin][data-test="1"] {
+    display: block;
+  }
+}
+@supports (rotate: acos(0.5)) {
+  .box[data-feat=function--acos] {
+    display: none;
+  }
+  .box[data-feat=function--acos][data-test="1"] {
+    display: block;
+  }
+}
+@supports (rotate: atan(0.5)) {
+  .box[data-feat=function--atan] {
+    display: none;
+  }
+  .box[data-feat=function--atan][data-test="1"] {
+    display: block;
+  }
+}
+@supports (rotate: atan2(4, 3)) {
+  .box[data-feat=function--atan2] {
+    display: none;
+  }
+  .box[data-feat=function--atan2][data-test="1"] {
+    display: block;
+  }
+}
+@supports (z-index: pow(2, 2)) {
+  .box[data-feat=function--pow] {
+    display: none;
+  }
+  .box[data-feat=function--pow][data-test="1"] {
+    display: block;
+  }
+}
+@supports (z-index: Sqrt(4)) {
+  .box[data-feat=function--sqrt] {
+    display: none;
+  }
+  .box[data-feat=function--sqrt][data-test="1"] {
+    display: block;
+  }
+}
+@supports (top: calc(Exp(2)*1em)) {
+  .box[data-feat=function--exp] {
+    display: none;
+  }
+  .box[data-feat=function--exp][data-test="1"] {
+    display: block;
+  }
+}
+@supports (top: calc(Log(4, 2)*1em)) {
+  .box[data-feat=function--log] {
+    display: none;
+  }
+  .box[data-feat=function--log][data-test="1"] {
+    display: block;
+  }
+}
+@supports (top: Hypot(4em, 3em)) {
+  .box[data-feat=function--hypot] {
+    display: none;
+  }
+  .box[data-feat=function--hypot][data-test="1"] {
+    display: block;
+  }
+}
+@supports (z-index: Abs(-5)) {
+  .box[data-feat=function--abs] {
+    display: none;
+  }
+  .box[data-feat=function--abs][data-test="1"] {
+    display: block;
+  }
+}
+@supports (z-index: Sign(-5)) {
+  .box[data-feat=function--sign] {
+    display: none;
+  }
+  .box[data-feat=function--sign][data-test="1"] {
+    display: block;
+  }
+}
+@supports (top: calc(e*1em)) {
+  .box[data-feat=constant--e] {
+    display: none;
+  }
+  .box[data-feat=constant--e][data-test="1"] {
+    display: block;
+  }
+}
+@supports (rotate: calc(.25turn*pi)) {
+  .box[data-feat=constant--pi] {
+    display: none;
+  }
+  .box[data-feat=constant--pi][data-test="1"] {
+    display: block;
+  }
+}
+@supports (rotate: atan(infinity)) {
+  .box[data-feat=constant--infinity] {
+    display: none;
+  }
+  .box[data-feat=constant--infinity][data-test="1"] {
+    display: block;
+  }
+}
+@supports (rotate: atan(-infinity)) {
+  .box[data-feat=constant---infinity] {
+    display: none;
+  }
+  .box[data-feat=constant---infinity][data-test="1"] {
+    display: block;
+  }
+}
+
+/* ----- all the prettifying, less important styles ----- */
+body {
+  box-sizing: border-box;
+  margin: 0 auto;
+  max-width: 47em;
+  padding: 0.5em;
+  background: #262434;
+  color: #fff;
+  font: 1.25em/1.3 ubuntu, trebuchet ms, sans-serif;
+}
+
+a {
+  --hl: 0;
+  position: relative;
+  z-index: 1;
+  padding: 0 2px;
+  color: gold;
+  text-decoration: none;
+  isolation: isolate;
+}
+a::before {
+  position: absolute;
+  inset: 0;
+  transform-origin: 0 100%;
+  transform: scaley(calc(var(--hl) - .1*(1 - var(--hl))));
+  background: currentcolor;
+  mix-blend-mode: difference;
+  transition: transform 0.35s ease-out;
+  content: "";
+}
+a:focus {
+  outline: none;
+}
+a:hover, a:focus {
+  --hl: 1 ;
+}
+
+[data-ico] {
+  margin-right: 1.5em;
+}
+[data-ico]::after {
+  position: absolute;
+  left: calc(100% + 2px);
+  content: " " attr(data-ico);
+}
+
+div {
+  position: relative;
+  margin: 0.375em 0;
+  padding: 0.25em 0.5em;
+  box-shadow: 0 2px 5px -2px #141414, 0 5px 13px -5px #040404;
+}
+
+code {
+  font-family: ubuntu mono, consoas, monaco, monospace;
+  font-size: 1.125em;
+}
+
+footer {
+  font-size: 0.75em;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/quick-mathematical-features-support-test/src/index.pug b/quick-mathematical-features-support-test/src/index.pug
new file mode 100644
index 0000000..5bc5aa2
--- /dev/null
+++ b/quick-mathematical-features-support-test/src/index.pug
@@ -0,0 +1,48 @@
+- let data = {
+- 	function: [ 'round', 'mod', 'rem', 'sin', 'cos', 'tan', 'asin', 'acos', 'atan', 'atan2', 'pow', 'sqrt', 'exp', 'log', 'hypot', 'abs', 'sign' ], 
+- 	constant: ['e', 'pi', 'infinity', '-infinity']
+- };
+
+p Confused about what browser supports what mathematical functions/ constants? This Pen uses 
+	code @supports
+	|  to tell you what the browser you're currently viewing it in supports and what not.
+p As of April 2023, Safari (tested via Epiphany as I'm on Ubuntu) supports everything, Firefox supports everything except 
+	code abs()
+	|  and 
+	code sign()
+	|  (which can be easily 
+	a(href='https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/' target='_blank') emulated
+	|  using other very well supported functions though), while Chrome only supports constants and trigonometric functions.
+- for(let p in data)
+	- let a = data[p], n = a.length;
+	- for(let i = 0; i < n; i++)
+		- let c = a[i];
+		- let cond = p === 'function';
+		- let url = cond ? 'funcdef' : 'valdef-calc'
+		.box(data-feat=`${p}--${c}` data-test='1') Yay, your browser supports the 
+			a(href=`https://drafts.csswg.org/css-values-4/#${url}-${c}` target='_blank')
+				code #{c}#{cond ? '()' : ''}
+			|  #{p}! 🥳 🎉
+		.box(data-feat=`${p}--${c}`) Sorry, your browser does not support the 
+			a(href=`https://drafts.csswg.org/css-values-4/#${url}-${c}` target='_blank')
+				code #{c}#{cond ? '()' : ''}
+			|  #{p}! . 😿
+footer
+	p The info boxes were created as described in 
+		a(href='https://codepen.io/thebabydino/full/qBKvjKM' target='_blank') this Pen
+		| .
+	p Got any other questions about this? Found any problems with it?
+		br
+		| You can drop a comment 
+		a(href='https://codepen.io/thebabydino/details/yLRBJXP' target='_blank') here
+		|  or ping me on 
+		a(href='https://mastodon.social/@anatudor' target='_blank' data-ico='🦣') Mastodon
+		|  
+		|  or on 
+		a(href='https://twitter.com/anatudor' target='_blank' data-ico='🐦') Twitter
+		| .
+	p And if you like the Maths and Physics infused CSS, canvas and SVG work that I've been putting out for over a decade, you can support it by being a cool cat and becoming a patron on 
+		a(href='https://www.patreon.com/anatudor' target='_blank') Patreon
+		|  or with a one time donation on 
+		a(href='https://ko-fi.com/anatudor' target='_blank') Ko-fi
+		| . Or at least by sharing this to show the world what can be done with CSS these days... because it's pretty damn cool!
\ No newline at end of file
diff --git a/quick-mathematical-features-support-test/src/style.scss b/quick-mathematical-features-support-test/src/style.scss
new file mode 100644
index 0000000..500c82d
--- /dev/null
+++ b/quick-mathematical-features-support-test/src/style.scss
@@ -0,0 +1,270 @@
+$s: 4px;
+
+/* ----- relevant styles ----- */
+.box {
+	/* here's where the cool part starts: 
+	 * different styles for the yay/ nay boxes */
+	border-left: solid 5px #db3056;
+	background: #851d41;
+	
+	/* a value of 1 if it indicates feature is supported */
+	&[data-test='1'] {
+		border-color: #4e8d7c;
+		background: #045762;
+		display: none
+	}
+	
+	/* ----- THE MAGIC ----- */
+	
+	/* support test for the round() function */
+	@supports (z-index: Round(4.1, 1)) {
+		&[data-feat='function--round'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the mod() function */
+	@supports (z-index: Mod(5, 2)) {
+		&[data-feat='function--mod'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the rem() function */
+	@supports (z-index: Rem(5, 2)) {
+		&[data-feat='function--rem'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the sin() function */
+	@supports (top: calc(sin(45deg)*1em)) {
+		&[data-feat='function--sin'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the cos() function */
+	@supports (top: calc(cos(45deg)*1em)) {
+		&[data-feat='function--cos'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the tan() function */
+	@supports (top: calc(tan(45deg)*1em)) {
+		&[data-feat='function--tan'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the asin() function */
+	@supports (rotate: asin(.5)) {
+		&[data-feat='function--asin'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the acos() function */
+	@supports (rotate: acos(.5)) {
+		&[data-feat='function--acos'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the atan() function */
+	@supports (rotate: atan(.5)) {
+		&[data-feat='function--atan'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the atan2() function */
+	@supports (rotate: atan2(4, 3)) {
+		&[data-feat='function--atan2'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the pow() function */
+	@supports (z-index: pow(2, 2)) {
+		&[data-feat='function--pow'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the sqrt() function */
+	@supports (z-index: Sqrt(4)) {
+		&[data-feat='function--sqrt'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the exp() function */
+	@supports (top: calc(Exp(2)*1em)) {
+		&[data-feat='function--exp'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the log() function */
+	@supports (top: calc(Log(4, 2)*1em)) {
+		&[data-feat='function--log'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the hypot() function */
+	@supports (top: Hypot(4em, 3em)) {
+		&[data-feat='function--hypot'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the abs() function */
+	@supports (z-index: Abs(-5)) {
+		&[data-feat='function--abs'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the sign() function */
+	@supports (z-index: Sign(-5)) {
+		&[data-feat='function--sign'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the e constant */
+	@supports (top: calc(e*1em)) {
+		&[data-feat='constant--e'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the pi constant */
+	@supports (rotate: calc(.25turn*pi)) {
+		&[data-feat='constant--pi'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the infinity constant */
+	@supports (rotate: atan(infinity)) {
+		&[data-feat='constant--infinity'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+	
+	/* support test for the -infinity constant */
+	@supports (rotate: atan(-infinity)) {
+		&[data-feat='constant---infinity'] { 
+			display: none;
+			
+			&[data-test='1'] { display: block }
+		}
+	}
+}
+
+/* ----- all the prettifying, less important styles ----- */
+body {
+	box-sizing: border-box;
+	margin: 0 auto;
+	max-width: 47em;
+	padding: .5em;
+	background: #262434;
+	color: #fff;
+	font: 1.25em/ 1.3 ubuntu, trebuchet ms, sans-serif
+}
+
+a {
+	--hl: 0;
+	position: relative;
+	z-index: 1;
+	padding: 0 .5*$s;
+	color: gold;
+	text-decoration: none;
+	isolation: isolate;
+	
+	&::before {
+		position: absolute;
+		inset: 0;
+		transform-origin: 0 100%;
+		transform: scaley(calc(var(--hl) - .1*(1 - var(--hl))));
+		background: currentcolor;
+		mix-blend-mode: difference;
+		transition: transform .35s ease-out;
+		content: ''
+	}
+	
+	&:focus { outline: none }
+	&:hover, &:focus { --hl: 1 }
+}
+
+[data-ico] {
+	margin-right: 1.5em;
+	
+	&::after {
+		position: absolute;
+		left: calc(100% + 2px);
+		content: ' ' attr(data-ico)
+	}
+}
+
+div {
+	position: relative;
+	margin: .375em 0;
+	padding: .25em .5em;
+	box-shadow: 0 2px 5px -2px #141414, 
+		0 5px 13px -5px #040404
+}
+
+code {
+	font-family: ubuntu mono, consoas, monaco, monospace;
+	font-size: 1.125em	
+}
+
+footer {
+	font-size: .75em;
+	text-align: center
+}
\ No newline at end of file
diff --git a/radio-button-group-with-gradient-cross-browser-responsive-no-framework/README.markdown b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/README.markdown
new file mode 100644
index 0000000..ac871bb
--- /dev/null
+++ b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/README.markdown
@@ -0,0 +1,16 @@
+# radio button group with gradient (cross-browser, responsive, no framework)
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/thebabydino/pen/JOwgzG](https://codepen.io/thebabydino/pen/JOwgzG).
+
+ [Watch me code this in ~23 minutes](https://www.youtube.com/watch?v=s56neAOb3tM) .  Cross-browser. Responsive, no framework remake of [a demo using Bootstrap](https://codepen.io/alexitaylor/pen/BmvQYe).
+
+If you like this demo in particular and my work in general and you want me to be able to continue putting stuff out, please consider one of the following:
+
+* showing your appreciation with a donation: 
+
+[![donate button](https://liberapay.com/assets/widgets/donate.svg)](https://liberapay.com/anatudor/donate)
+
+* getting me something from my Amazon WishList: [🇺🇸](https://www.amazon.com/gp/registry/wishlist/2Y3C4722GXH0I/) / [🇬🇧](https://www.amazon.co.uk/gp/registry/wishlist/2I25W7U0KADSR/)
+
+* or at least sharing this to show the rest of the world what can be done with CSS on the web these days
+
+Thank you!
\ No newline at end of file
diff --git a/radio-button-group-with-gradient-cross-browser-responsive-no-framework/dist/https___codepen_io_thebab.css b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/dist/https___codepen_io_thebab.css
new file mode 100644
index 0000000..1063945
--- /dev/null
+++ b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/dist/https___codepen_io_thebab.css
@@ -0,0 +1,40 @@
+#btn--yp {
+	box-sizing: content-box;
+	position: fixed;
+	z-index: 9;
+	bottom: 1em; right: 1em;
+	border: solid 1em transparent;
+	width: 4.625em; height: 3.25em;
+	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/icon-yp.svg) 50%/ cover content-box;
+	font: 16px/ 1.25 trebuchet ms, sans-serif;
+	text-indent: 200vw;
+	text-shadow: none;
+	filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);
+	transition: .5s;
+	white-space: nowrap;
+	
+	&:before {
+		box-sizing: inherit;
+		position: absolute;
+		left: 0; bottom: 100%;
+		margin: 1em -.5em;
+		padding: .5em;
+		width: 100%;
+		border-radius: 5px;
+		background: #e8e0e0;
+		color: #000;
+		text-align: center;
+		text-decoration: none;
+		text-indent: 0vw;
+		white-space: normal;
+		animation: float 1s ease-in-out infinite alternate;
+		content: attr(data-txt)
+	}
+		
+	&:hover, &:focus {
+		outline: none;
+		filter: grayscale(0) drop-shadow(0 0 1px crimson);
+	}
+}
+
+@keyframes float { to { transform: translateY(.75em) } }
\ No newline at end of file
diff --git a/radio-button-group-with-gradient-cross-browser-responsive-no-framework/dist/index.html b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/dist/index.html
new file mode 100644
index 0000000..4ba4a0b
--- /dev/null
+++ b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/dist/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>radio button group with gradient (cross-browser, responsive, no framework)</title>
+  <script>const ID = 's56neAOb3tM'</script><link rel='stylesheet' href='css/https___codepen_io_thebab.css'>
+<link rel="stylesheet" href="./style.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<h2>Level of Difficulty</h2>
+<radiogroup>
+  <input type="radio" name="lvl" id="easy"/>
+  <label for="easy">easy</label>
+  <input type="radio" name="lvl" id="tricky"/>
+  <label for="tricky">tricky</label>
+  <input type="radio" name="lvl" id="challenging"/>
+  <label for="challenging">challenging</label>
+  <input type="radio" name="lvl" id="grueling"/>
+  <label for="grueling">grueling</label>
+  <input type="radio" name="lvl" id="overwhelming"/>
+  <label for="overwhelming">overwhelming</label>
+  <input type="radio" name="lvl" id="mind-boggling"/>
+  <label for="mind-boggling">mind-boggling</label>
+</radiogroup>
+<!-- partial -->
+  <script src='https://codepen.io/thebabydino/pen/evPbxv.js'></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/radio-button-group-with-gradient-cross-browser-responsive-no-framework/dist/style.css b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/dist/style.css
new file mode 100644
index 0000000..c664514
--- /dev/null
+++ b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/dist/style.css
@@ -0,0 +1,73 @@
+@charset "UTF-8";
+* {
+  margin: 0;
+  font: inherit;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  font: 500 calc(.575rem + .575vw)/2 Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+@media (min-width: 1200px) {
+  body {
+    font-size: 1.125rem;
+  }
+}
+
+h2 {
+  width: 100%;
+  font-size: 2em;
+  text-align: center;
+}
+
+radiogroup {
+  display: flex;
+  overflow: hidden;
+  width: 97.5%;
+  min-width: 800px;
+  max-width: 1200px;
+  border-radius: 2.5em;
+  background: linear-gradient(var(--a, 100deg), #0ef49b, #d2dc69 30%, #faa04b 70%, #ff5a64);
+}
+@media (max-width: 800px) {
+  radiogroup {
+    flex-direction: column;
+    min-width: 12.5rem;
+    width: 47%;
+    --a: 170deg;
+    font-size: 0.875rem;
+  }
+}
+
+input[type='radio'] {
+  position: absolute;
+  left: -100vw;
+}
+input[type='radio'] + label {
+  flex: 1;
+  height: 5em;
+  font-weight: 700;
+  line-height: 5em;
+  text-align: center;
+  text-transform: capitalize;
+  cursor: pointer;
+}
+input[type='radio'] + label:after {
+  display: inline-block;
+  transform: scale(0);
+  filter: brightness(0.1);
+  transition: margin 0.25s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.1s, transform 0.25s cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  content: "✔";
+}
+input[type='radio']:checked + label {
+  box-shadow: inset 0px 10px 50px rgba(25, 25, 25, 0.1);
+}
+input[type='radio']:checked + label:after {
+  margin-left: .75em;
+  transform: scale(1.25);
+  transition: margin 0.5s, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.25s;
+}
diff --git a/radio-button-group-with-gradient-cross-browser-responsive-no-framework/license.txt b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/license.txt
new file mode 100644
index 0000000..534fbdf
--- /dev/null
+++ b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Ana Tudor (https://codepen.io/thebabydino/pen/JOwgzG)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/radio-button-group-with-gradient-cross-browser-responsive-no-framework/src/https___codepen_io_thebab.css b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/src/https___codepen_io_thebab.css
new file mode 100644
index 0000000..1063945
--- /dev/null
+++ b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/src/https___codepen_io_thebab.css
@@ -0,0 +1,40 @@
+#btn--yp {
+	box-sizing: content-box;
+	position: fixed;
+	z-index: 9;
+	bottom: 1em; right: 1em;
+	border: solid 1em transparent;
+	width: 4.625em; height: 3.25em;
+	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/icon-yp.svg) 50%/ cover content-box;
+	font: 16px/ 1.25 trebuchet ms, sans-serif;
+	text-indent: 200vw;
+	text-shadow: none;
+	filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);
+	transition: .5s;
+	white-space: nowrap;
+	
+	&:before {
+		box-sizing: inherit;
+		position: absolute;
+		left: 0; bottom: 100%;
+		margin: 1em -.5em;
+		padding: .5em;
+		width: 100%;
+		border-radius: 5px;
+		background: #e8e0e0;
+		color: #000;
+		text-align: center;
+		text-decoration: none;
+		text-indent: 0vw;
+		white-space: normal;
+		animation: float 1s ease-in-out infinite alternate;
+		content: attr(data-txt)
+	}
+		
+	&:hover, &:focus {
+		outline: none;
+		filter: grayscale(0) drop-shadow(0 0 1px crimson);
+	}
+}
+
+@keyframes float { to { transform: translateY(.75em) } }
\ No newline at end of file
diff --git a/radio-button-group-with-gradient-cross-browser-responsive-no-framework/src/index.pug b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/src/index.pug
new file mode 100644
index 0000000..6a988c4
--- /dev/null
+++ b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/src/index.pug
@@ -0,0 +1,8 @@
+- var levels = 'easy tricky challenging grueling overwhelming mind-boggling'.split(' ').reverse();
+- var n = levels.length
+
+h2 Level of Difficulty
+radiogroup
+	while n--
+		input(type='radio' name='lvl' id=levels[n])
+		label(for=levels[n]) #{levels[n]}
\ No newline at end of file
diff --git a/radio-button-group-with-gradient-cross-browser-responsive-no-framework/src/style.scss b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/src/style.scss
new file mode 100644
index 0000000..b472c6a
--- /dev/null
+++ b/radio-button-group-with-gradient-cross-browser-responsive-no-framework/src/style.scss
@@ -0,0 +1,77 @@
+$min-w: 800px;
+$max-w: 1200px;
+$label-h: 5em;
+
+* { margin: 0; font: inherit }
+
+body {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
+	font: 500 calc(.575rem + .575vw)/ 2
+		Helvetica Neue, Helvetica, Arial, sans-serif;
+	
+	@media (min-width: $max-w) { font-size: 1.125rem }
+}
+
+h2 {
+	width: 100%;
+	font-size: 2em;
+	text-align: center
+}
+
+radiogroup {
+	display: flex;
+	overflow: hidden;
+	width: 97.5%;
+	min-width: $min-w; max-width: $max-w;
+	border-radius: .5*$label-h;
+	background: linear-gradient(var(--a, 100deg), #0ef49b, #d2dc69 30%, #faa04b 70%, #ff5a64);
+	
+	@media (max-width: $min-w) {
+		flex-direction: column;
+		min-width: 12.5rem; width: 47%;
+		--a: 170deg;
+		font-size: .875rem
+	}
+}
+
+input[type='radio'] {
+	position: absolute;
+	left: -100vw;
+	
+	+ label {
+		flex: 1;
+		height: $label-h;
+		font-weight: 700;
+		line-height: $label-h;
+		text-align: center;
+		text-transform: capitalize;
+		cursor: pointer;
+		
+		&:after {
+			display: inline-block;
+			transform: scale(0);
+			filter: brightness(.1);
+			transition: margin .25s 
+					cubic-bezier(.6, -.28, .735, .045) .1s,
+				transform .25s 
+					cubic-bezier(.895, .03, .685, .22);
+			content: '\2714'
+		}
+	}
+	
+	&:checked + label {
+		box-shadow: inset 0px 10px 50px rgba(25,25,25,.1);
+		
+		&:after {
+			margin-left: .75em;
+			transform: scale(1.25);
+			transition: margin .5s, 
+				transform .5s 
+					cubic-bezier(.175, .885, .32, 1.275) .25s;
+		}
+	}
+}
\ No newline at end of file
diff --git a/rainbow-hypercube/README.markdown b/rainbow-hypercube/README.markdown
new file mode 100644
index 0000000..9c3a51e
--- /dev/null
+++ b/rainbow-hypercube/README.markdown
@@ -0,0 +1,5 @@
+# Rainbow Hypercube
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Mamboleoo/pen/MWyNZYr](https://codepen.io/Mamboleoo/pen/MWyNZYr).
+
+
diff --git a/rainbow-hypercube/dist/index.html b/rainbow-hypercube/dist/index.html
new file mode 100644
index 0000000..4586e71
--- /dev/null
+++ b/rainbow-hypercube/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Rainbow Hypercube</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="p5"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/rainbow-hypercube/dist/script.js b/rainbow-hypercube/dist/script.js
new file mode 100644
index 0000000..c6d136d
--- /dev/null
+++ b/rainbow-hypercube/dist/script.js
@@ -0,0 +1,92 @@
+console.clear();
+var scene = new THREE.Scene();
+var camera = new THREE.PerspectiveCamera(
+  75,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000
+);
+
+var renderer = new THREE.WebGLRenderer({
+  antialias: true
+});
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+var group = new THREE.Group();
+
+var light = new THREE.PointLight(0xffffff, 1.8, 80);
+scene.add(light);
+
+var spotLight = new THREE.SpotLight(0xffffff);
+spotLight.position.set(0, 100, 0);
+scene.add(spotLight);
+
+var geometry = new THREE.CubeGeometry(30, 30, 30);
+var texture = new THREE.TextureLoader().load( 'https://mamboleoo.be/CodePen/random/rainbowPattern.png' );
+texture.wrapS = THREE.RepeatWrapping;
+texture.wrapT = THREE.RepeatWrapping;
+gsap.to(texture.offset, {
+  y: 1,
+  duration: 5,
+  repeat: -1,
+  ease: "none"
+});
+var material = new THREE.MeshStandardMaterial({
+  color: 0xffffff,
+  side: THREE.BackSide,
+  alphaTest: 0.6,
+  depthTest: true,
+  map: texture
+});
+
+for (let i = 0; i < 10; i++) {
+  var ball = new THREE.Mesh(geometry, material);
+  ball.scale.x = ((i + 1) / 5) * 1.5;
+  ball.scale.y = ((i + 1) / 5) * 1.5;
+  ball.scale.z = ((i + 1) / 5) * 1.5;
+  ball.rotation.x = i % 2 == 0 ? -Math.PI : 0;
+  ball.rotation.y = i % 2 == 0 ? -Math.PI : 0;
+  group.add(ball);
+}
+scene.add(group);
+
+camera.position.z = 40;
+
+gsap.to(group.rotation, {
+  y: Math.PI * 2,
+  duration: 100,
+  ease: "none",
+  repeat: -1
+});
+gsap.to(group.rotation, {
+  z: Math.PI * 2,
+  duration: 15,
+  ease: "power2.inOut",
+  yoyo: true,
+  repeat: -1
+});
+camera.position.z = 5;
+gsap.to(camera.position, {
+  z: 60,
+  duration: 15,
+  ease: "power2.inOut",
+  repeat: -1,
+  yoyo: true
+});
+
+var animate = function () {
+  requestAnimationFrame(animate);
+
+  renderer.render(scene, camera);
+};
+
+window.addEventListener("resize", onWindowResize, false);
+
+function onWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+animate();
\ No newline at end of file
diff --git a/rainbow-hypercube/dist/style.css b/rainbow-hypercube/dist/style.css
new file mode 100644
index 0000000..98640a0
--- /dev/null
+++ b/rainbow-hypercube/dist/style.css
@@ -0,0 +1,4 @@
+body {
+  overflow: hidden;
+  margin: 0;
+}
\ No newline at end of file
diff --git a/rainbow-hypercube/license.txt b/rainbow-hypercube/license.txt
new file mode 100644
index 0000000..8900e07
--- /dev/null
+++ b/rainbow-hypercube/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Louis Hoebregts (https://codepen.io/Mamboleoo/pen/MWyNZYr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/rainbow-hypercube/src/index.html b/rainbow-hypercube/src/index.html
new file mode 100644
index 0000000..96ee1dd
--- /dev/null
+++ b/rainbow-hypercube/src/index.html
@@ -0,0 +1 @@
+<div id="p5"></div>
\ No newline at end of file
diff --git a/rainbow-hypercube/src/script.js b/rainbow-hypercube/src/script.js
new file mode 100644
index 0000000..b02b71b
--- /dev/null
+++ b/rainbow-hypercube/src/script.js
@@ -0,0 +1,92 @@
+console.clear();
+var scene = new THREE.Scene();
+var camera = new THREE.PerspectiveCamera(
+  75,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000
+);
+
+var renderer = new THREE.WebGLRenderer({
+  antialias: true
+});
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+var group = new THREE.Group();
+
+var light = new THREE.PointLight(0xffffff, 1.8, 80);
+scene.add(light);
+
+var spotLight = new THREE.SpotLight(0xffffff);
+spotLight.position.set(0, 100, 0);
+scene.add(spotLight);
+
+var geometry = new THREE.CubeGeometry(30, 30, 30);
+var texture = new THREE.TextureLoader().load( 'https://mamboleoo.be/CodePen/random/rainbowPattern.png' );
+texture.wrapS = THREE.RepeatWrapping;
+texture.wrapT = THREE.RepeatWrapping;
+gsap.to(texture.offset, {
+  y: 1,
+  duration: 5,
+  repeat: -1,
+  ease: "none"
+});
+var material = new THREE.MeshStandardMaterial({
+  color: 0xffffff,
+  side: THREE.BackSide,
+  alphaTest: 0.6,
+  depthTest: true,
+  map: texture
+});
+
+for (let i = 0; i < 10; i++) {
+  var ball = new THREE.Mesh(geometry, material);
+  ball.scale.x = ((i + 1) / 5) * 1.5;
+  ball.scale.y = ((i + 1) / 5) * 1.5;
+  ball.scale.z = ((i + 1) / 5) * 1.5;
+  ball.rotation.x = i % 2 == 0 ? -Math.PI : 0;
+  ball.rotation.y = i % 2 == 0 ? -Math.PI : 0;
+  group.add(ball);
+}
+scene.add(group);
+
+camera.position.z = 40;
+
+gsap.to(group.rotation, {
+  y: Math.PI * 2,
+  duration: 100,
+  ease: "none",
+  repeat: -1
+});
+gsap.to(group.rotation, {
+  z: Math.PI * 2,
+  duration: 15,
+  ease: "power2.inOut",
+  yoyo: true,
+  repeat: -1
+});
+camera.position.z = 5;
+gsap.to(camera.position, {
+  z: 60,
+  duration: 15,
+  ease: "power2.inOut",
+  repeat: -1,
+  yoyo: true
+});
+
+var animate = function () {
+  requestAnimationFrame(animate);
+
+  renderer.render(scene, camera);
+};
+
+window.addEventListener("resize", onWindowResize, false);
+
+function onWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+animate();
diff --git a/rainbow-hypercube/src/style.scss b/rainbow-hypercube/src/style.scss
new file mode 100644
index 0000000..98640a0
--- /dev/null
+++ b/rainbow-hypercube/src/style.scss
@@ -0,0 +1,4 @@
+body {
+  overflow: hidden;
+  margin: 0;
+}
\ No newline at end of file
diff --git a/rainbow-shader/README.markdown b/rainbow-shader/README.markdown
new file mode 100644
index 0000000..1f38a09
--- /dev/null
+++ b/rainbow-shader/README.markdown
@@ -0,0 +1,5 @@
+# Rainbow Shader
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/timohausmann/pen/rNydxmN](https://codepen.io/timohausmann/pen/rNydxmN).
+
+
diff --git a/rainbow-shader/dist/index.html b/rainbow-shader/dist/index.html
new file mode 100644
index 0000000..e98620f
--- /dev/null
+++ b/rainbow-shader/dist/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Rainbow Shader</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="container"></div>
+
+<script id="vertexShader" type="x-shader/x-vertex">
+  void main() {
+    gl_Position = vec4(position, 1.0);
+  }
+</script>
+<script id="fragmentShader" type="x-shader/x-fragment">
+
+  #ifdef GL_ES
+  precision mediump float;
+  #endif
+  #define PI 3.14159265359
+
+  uniform float u_time;
+  uniform vec2 u_resolution;
+
+  float V(float v) {
+    return v/255.0;
+  }
+
+  float sharpRainbow(float y, vec2 st, float offset, float width) {
+
+    float edge = y-(offset*width);
+    return step(edge-width, st.y) - step(edge, st.y);
+  }
+
+  void main() {
+
+    //original 1978 colors
+    //https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)
+    vec3 pink   = vec3(V(255.0),    V(105.0),   V(180.0));
+    vec3 red    = vec3(V(255.0),    0.0,        0.0);
+    vec3 orange = vec3(V(255.0),    V(142.0),   0.0);
+    vec3 yellow = vec3(V(255.0),    V(255.0),   0.0);
+    vec3 green  = vec3(0.0,         V(142.0),   0.0);
+    vec3 turq   = vec3(0.0,         V(192.0),   V(192.0));
+    vec3 indigo = vec3(V(64.0),     0.0,        V(152.0));
+    vec3 violet = vec3(V(142.0),    0.0,        V(142.0));
+
+    vec2 st = gl_FragCoord.xy / u_resolution;
+
+    float width = (1.0/20.0);
+    float y = 0.5 + (8.0*width/2.0) + sin(u_time+st.x*PI)*sin(u_time*1.5)*0.25;
+
+    vec3 color = mix(pink, violet, (1.0 + sin(u_time))/2.0);
+    color = mix(color, pink,    sharpRainbow(y, st, 0.0, width));
+    color = mix(color, red,     sharpRainbow(y, st, 1.0, width));
+    color = mix(color, orange,  sharpRainbow(y, st, 2.0, width));
+    color = mix(color, yellow,  sharpRainbow(y, st, 3.0, width));
+    color = mix(color, green,   sharpRainbow(y, st, 4.0, width));
+    color = mix(color, turq,    sharpRainbow(y, st, 5.0, width));
+    color = mix(color, indigo,  sharpRainbow(y, st, 6.0, width));
+    color = mix(color, violet,  sharpRainbow(y, st, 7.0, width));
+
+    gl_FragColor = vec4(color, 1.0);
+  }
+</script>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/rainbow-shader/dist/script.js b/rainbow-shader/dist/script.js
new file mode 100644
index 0000000..02f5e72
--- /dev/null
+++ b/rainbow-shader/dist/script.js
@@ -0,0 +1,67 @@
+/**
+ * TIL the original 1978 pride flag actually had 8 colors, until hot pink was dropped due to fabric shortage!
+ * follow me on twitter if you like :-)
+ * https://twitter.com/timohausmann/status/1400439679787405316
+ */
+var container;
+var camera, scene, renderer, clock;
+var uniforms;
+
+init();
+animate();
+
+function init() {
+    container = document.getElementById('container');
+
+    camera = new THREE.Camera();
+    camera.position.z = 1;
+
+    scene = new THREE.Scene();
+    clock = new THREE.Clock();
+
+    var geometry = new THREE.PlaneBufferGeometry(2, 2);
+
+    uniforms = {
+        u_time: { type: "f", value: 1.0 },
+        u_resolution: { type: "v2", value: new THREE.Vector2() },
+        u_mouse: { type: "v2", value: new THREE.Vector2() }
+    };
+
+    var material = new THREE.ShaderMaterial({
+        uniforms: uniforms,
+        vertexShader: document.getElementById('vertexShader').textContent,
+        fragmentShader: document.getElementById('fragmentShader').textContent
+    });
+
+    var mesh = new THREE.Mesh(geometry, material);
+    scene.add(mesh);
+
+    renderer = new THREE.WebGLRenderer();
+    renderer.setPixelRatio(window.devicePixelRatio);
+
+    container.appendChild(renderer.domElement);
+
+    onWindowResize();
+    window.addEventListener('resize', onWindowResize, false);
+
+    document.onmousemove = function (e) {
+        uniforms.u_mouse.value.x = e.pageX
+        uniforms.u_mouse.value.y = e.pageY
+    }
+}
+
+function onWindowResize(event) {
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    uniforms.u_resolution.value.x = renderer.domElement.width;
+    uniforms.u_resolution.value.y = renderer.domElement.height;
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+    render();
+}
+
+function render() {
+    uniforms.u_time.value += clock.getDelta();
+    renderer.render(scene, camera);
+}
\ No newline at end of file
diff --git a/rainbow-shader/dist/style.css b/rainbow-shader/dist/style.css
new file mode 100644
index 0000000..6092539
--- /dev/null
+++ b/rainbow-shader/dist/style.css
@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}
\ No newline at end of file
diff --git a/rainbow-shader/license.txt b/rainbow-shader/license.txt
new file mode 100644
index 0000000..5ad5b3a
--- /dev/null
+++ b/rainbow-shader/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Timo Hausmann (https://codepen.io/timohausmann/pen/rNydxmN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/rainbow-shader/src/index.html b/rainbow-shader/src/index.html
new file mode 100644
index 0000000..2093580
--- /dev/null
+++ b/rainbow-shader/src/index.html
@@ -0,0 +1,58 @@
+<div id="container"></div>
+
+<script id="vertexShader" type="x-shader/x-vertex">
+  void main() {
+    gl_Position = vec4(position, 1.0);
+  }
+</script>
+<script id="fragmentShader" type="x-shader/x-fragment">
+
+  #ifdef GL_ES
+  precision mediump float;
+  #endif
+  #define PI 3.14159265359
+
+  uniform float u_time;
+  uniform vec2 u_resolution;
+
+  float V(float v) {
+    return v/255.0;
+  }
+
+  float sharpRainbow(float y, vec2 st, float offset, float width) {
+
+    float edge = y-(offset*width);
+    return step(edge-width, st.y) - step(edge, st.y);
+  }
+
+  void main() {
+
+    //original 1978 colors
+    //https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)
+    vec3 pink   = vec3(V(255.0),    V(105.0),   V(180.0));
+    vec3 red    = vec3(V(255.0),    0.0,        0.0);
+    vec3 orange = vec3(V(255.0),    V(142.0),   0.0);
+    vec3 yellow = vec3(V(255.0),    V(255.0),   0.0);
+    vec3 green  = vec3(0.0,         V(142.0),   0.0);
+    vec3 turq   = vec3(0.0,         V(192.0),   V(192.0));
+    vec3 indigo = vec3(V(64.0),     0.0,        V(152.0));
+    vec3 violet = vec3(V(142.0),    0.0,        V(142.0));
+
+    vec2 st = gl_FragCoord.xy / u_resolution;
+
+    float width = (1.0/20.0);
+    float y = 0.5 + (8.0*width/2.0) + sin(u_time+st.x*PI)*sin(u_time*1.5)*0.25;
+
+    vec3 color = mix(pink, violet, (1.0 + sin(u_time))/2.0);
+    color = mix(color, pink,    sharpRainbow(y, st, 0.0, width));
+    color = mix(color, red,     sharpRainbow(y, st, 1.0, width));
+    color = mix(color, orange,  sharpRainbow(y, st, 2.0, width));
+    color = mix(color, yellow,  sharpRainbow(y, st, 3.0, width));
+    color = mix(color, green,   sharpRainbow(y, st, 4.0, width));
+    color = mix(color, turq,    sharpRainbow(y, st, 5.0, width));
+    color = mix(color, indigo,  sharpRainbow(y, st, 6.0, width));
+    color = mix(color, violet,  sharpRainbow(y, st, 7.0, width));
+
+    gl_FragColor = vec4(color, 1.0);
+  }
+</script>
\ No newline at end of file
diff --git a/rainbow-shader/src/script.js b/rainbow-shader/src/script.js
new file mode 100644
index 0000000..02f5e72
--- /dev/null
+++ b/rainbow-shader/src/script.js
@@ -0,0 +1,67 @@
+/**
+ * TIL the original 1978 pride flag actually had 8 colors, until hot pink was dropped due to fabric shortage!
+ * follow me on twitter if you like :-)
+ * https://twitter.com/timohausmann/status/1400439679787405316
+ */
+var container;
+var camera, scene, renderer, clock;
+var uniforms;
+
+init();
+animate();
+
+function init() {
+    container = document.getElementById('container');
+
+    camera = new THREE.Camera();
+    camera.position.z = 1;
+
+    scene = new THREE.Scene();
+    clock = new THREE.Clock();
+
+    var geometry = new THREE.PlaneBufferGeometry(2, 2);
+
+    uniforms = {
+        u_time: { type: "f", value: 1.0 },
+        u_resolution: { type: "v2", value: new THREE.Vector2() },
+        u_mouse: { type: "v2", value: new THREE.Vector2() }
+    };
+
+    var material = new THREE.ShaderMaterial({
+        uniforms: uniforms,
+        vertexShader: document.getElementById('vertexShader').textContent,
+        fragmentShader: document.getElementById('fragmentShader').textContent
+    });
+
+    var mesh = new THREE.Mesh(geometry, material);
+    scene.add(mesh);
+
+    renderer = new THREE.WebGLRenderer();
+    renderer.setPixelRatio(window.devicePixelRatio);
+
+    container.appendChild(renderer.domElement);
+
+    onWindowResize();
+    window.addEventListener('resize', onWindowResize, false);
+
+    document.onmousemove = function (e) {
+        uniforms.u_mouse.value.x = e.pageX
+        uniforms.u_mouse.value.y = e.pageY
+    }
+}
+
+function onWindowResize(event) {
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    uniforms.u_resolution.value.x = renderer.domElement.width;
+    uniforms.u_resolution.value.y = renderer.domElement.height;
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+    render();
+}
+
+function render() {
+    uniforms.u_time.value += clock.getDelta();
+    renderer.render(scene, camera);
+}
\ No newline at end of file
diff --git a/rainbow-shader/src/style.css b/rainbow-shader/src/style.css
new file mode 100644
index 0000000..6092539
--- /dev/null
+++ b/rainbow-shader/src/style.css
@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}
\ No newline at end of file
diff --git a/random-rainbow-generator-skypack/README.markdown b/random-rainbow-generator-skypack/README.markdown
new file mode 100644
index 0000000..9ad0003
--- /dev/null
+++ b/random-rainbow-generator-skypack/README.markdown
@@ -0,0 +1,5 @@
+# Random Rainbow Generator Skypack
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/melissamcewen/pen/mdrgexd](https://codepen.io/melissamcewen/pen/mdrgexd).
+
+
diff --git a/random-rainbow-generator-skypack/dist/index.html b/random-rainbow-generator-skypack/dist/index.html
new file mode 100644
index 0000000..8078005
--- /dev/null
+++ b/random-rainbow-generator-skypack/dist/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Random Rainbow Generator Skypack</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<section class="markdown-content">
+  <h1>🌈 Random Rainbow 🌈</h1>
+  <p>
+    Uses <a href="https://randomcolor.lllllllllllllllll.com/">RandomColor</a> and <a href="https://vis4.net/chromajs">Chroma</a> via <a href="https://www.skypack.dev/">Skypack</a> to generate a
+    rainbow palette. Some code has been adapted from <a href="https://github.com/jxnblk/palx">Palx</a> and simplified for educational purposes.
+  </p>
+</section>
+<button id="color">🌈 New Random Rainbow!</button>
+
+<div id="rainbow">
+  <span id="red" class="color"></span>
+  <span id="orange" class="color"></span>
+  <span id="yellow" class="color"></span>
+  <span id="green" class="color"></span>
+  <span id="blue" class="color"></span>
+  <span id="pink" class="color"></span>
+  <span id="purple" class="color"></span>
+</div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/random-rainbow-generator-skypack/dist/script.js b/random-rainbow-generator-skypack/dist/script.js
new file mode 100644
index 0000000..33ccb81
--- /dev/null
+++ b/random-rainbow-generator-skypack/dist/script.js
@@ -0,0 +1,101 @@
+import randomColor from "https://cdn.skypack.dev/randomcolor";
+import chroma from "https://cdn.skypack.dev/chroma-js";
+
+var names = [
+  "red", // 0
+  "orange", // 30
+  "yellow", // 60
+  "lime", // 90
+  "green", // 120
+  "teal", // 150
+  "cyan", // 180
+  "blue", // 210
+  "indigo", // 240
+  "violet", // 270
+  "fuschia", // 300
+  "pink", // 330
+  "red"
+];
+//grab the elements we want to rainbow-ize from the page
+const red = document.getElementById("red");
+const orange = document.getElementById("orange");
+const yellow = document.getElementById("yellow");
+const green = document.getElementById("green");
+const blue = document.getElementById("blue");
+const pink = document.getElementById("pink");
+const purple = document.getElementById("purple");
+
+function changeColors() {
+  // first we get a base color with a red hue from randomColor
+  let seedColor = randomColor();
+  // then we use Chroma to analyze it for hue, saturation, and lightness
+  const chromaAnalyze = chroma(seedColor).hsl();
+  const colorHue = chromaAnalyze[0];
+  const colorSat = chromaAnalyze[1];
+  const colorLte = chromaAnalyze[2];
+
+  // we use the createHues function from Palx to create some rainbow hues across the color spectrum
+  const NewHues = createHues(colorHue);
+  console.log(NewHues);
+  // We take our new hues and use Chroma to create a color with the required hue but the same saturation and lightness of our original color
+  let colors = {};
+  NewHues.forEach(function (hue) {
+    var newColor = chroma.hsl(hue, colorSat, colorLte);
+    colors[hueName(hue)] = chroma(newColor).hex();
+  });
+
+  // store our colors so can use them to style the background and put a hex code in the html
+  const redColor = colors.red;
+  const orangeColor = colors.orange;
+  const yellowColor = colors.yellow;
+  const greenColor = colors.green;
+  const blueColor = colors.blue;
+  const pinkColor = colors.indigo;
+  const purpleColor = colors.violet;
+
+  // set our rainbow background colors
+  red.style.background = redColor;
+  orange.style.background = orangeColor;
+  yellow.style.background = yellowColor;
+  green.style.background = greenColor;
+  blue.style.background = blueColor;
+  pink.style.background = pinkColor;
+  purple.style.background = purpleColor;
+  // add the hex code to the rainbow too
+  red.innerHTML = redColor;
+  orange.innerHTML = orangeColor;
+  yellow.innerHTML = yellowColor;
+  green.innerHTML = greenColor;
+  blue.innerHTML = blueColor;
+  pink.innerHTML = pinkColor;
+  purple.innerHTML = purpleColor;
+}
+
+// run it when we load the page
+changeColors();
+
+// tools from palx https://github.com/jxnblk/palx
+function createArray(length) {
+  var arr = [];
+  for (var i = 0; i < length; i++) {
+    arr.push(i);
+  }
+  return arr;
+}
+
+function createHues(base) {
+  var hueStep = 360 / 12;
+  var hues = createArray(12).map(function (n) {
+    return Math.floor((base + n * hueStep) % 360);
+  });
+
+  return hues;
+}
+
+function hueName(h) {
+  var i = Math.round((h - 2) / 30);
+  console.log(names);
+  var name = names[i];
+  return name;
+}
+document.getElementById("color").addEventListener("click", changeColors);
\ No newline at end of file
diff --git a/random-rainbow-generator-skypack/dist/style.css b/random-rainbow-generator-skypack/dist/style.css
new file mode 100644
index 0000000..16ef463
--- /dev/null
+++ b/random-rainbow-generator-skypack/dist/style.css
@@ -0,0 +1,99 @@
+/* styles */
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
+  margin: 2em;
+}
+
+h1 {
+  font-style: italic;
+  color: #373fff;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+p {
+  max-width: 600px;
+}
+
+form {
+  margin-bottom: 25px;
+  padding: 15px;
+  background-color: cyan;
+  display: inline-block;
+  width: 100%;
+  max-width: 340px;
+  border-radius: 3px;
+}
+
+input {
+  display: block;
+  margin-bottom: 10px;
+  padding: 5px;
+  width: 100%;
+  border: 1px solid lightgrey;
+  border-radius: 3px;
+  font-size: 16px;
+}
+
+button {
+  font-size: 16px;
+  border-radius: 3px;
+  background-color: lightgrey;
+  border: 1px solid grey;
+  box-shadow: 2px 2px teal;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: yellow;
+}
+
+button:active {
+  box-shadow: none;
+}
+
+li {
+  margin-bottom: 5px;
+}
+
+footer {
+  margin-top: 50px;
+  padding-top: 25px;
+  border-top: 1px solid lightgrey;
+}
+
+@media (min-width: 768px) {
+  #rainbow {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    height: 70vh;
+
+    -webkit-align-items: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+  }
+}
+
+#rainbow .color {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  border: 1px solid black;
+  min-height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+#color {
+  margin: 1em auto;
+}
\ No newline at end of file
diff --git a/random-rainbow-generator-skypack/license.txt b/random-rainbow-generator-skypack/license.txt
new file mode 100644
index 0000000..3e5ef89
--- /dev/null
+++ b/random-rainbow-generator-skypack/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by melissa (https://codepen.io/melissamcewen/pen/mdrgexd)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/random-rainbow-generator-skypack/src/index.html b/random-rainbow-generator-skypack/src/index.html
new file mode 100644
index 0000000..499e635
--- /dev/null
+++ b/random-rainbow-generator-skypack/src/index.html
@@ -0,0 +1,18 @@
+<section class="markdown-content">
+  <h1>🌈 Random Rainbow 🌈</h1>
+  <p>
+    Uses <a href="https://randomcolor.lllllllllllllllll.com/">RandomColor</a> and <a href="https://vis4.net/chromajs">Chroma</a> via <a href="https://www.skypack.dev/">Skypack</a> to generate a
+    rainbow palette. Some code has been adapted from <a href="https://github.com/jxnblk/palx">Palx</a> and simplified for educational purposes.
+  </p>
+</section>
+<button id="color">🌈 New Random Rainbow!</button>
+
+<div id="rainbow">
+  <span id="red" class="color"></span>
+  <span id="orange" class="color"></span>
+  <span id="yellow" class="color"></span>
+  <span id="green" class="color"></span>
+  <span id="blue" class="color"></span>
+  <span id="pink" class="color"></span>
+  <span id="purple" class="color"></span>
+</div>
diff --git a/random-rainbow-generator-skypack/src/script.js b/random-rainbow-generator-skypack/src/script.js
new file mode 100644
index 0000000..33ccb81
--- /dev/null
+++ b/random-rainbow-generator-skypack/src/script.js
@@ -0,0 +1,101 @@
+import randomColor from "https://cdn.skypack.dev/randomcolor";
+import chroma from "https://cdn.skypack.dev/chroma-js";
+
+var names = [
+  "red", // 0
+  "orange", // 30
+  "yellow", // 60
+  "lime", // 90
+  "green", // 120
+  "teal", // 150
+  "cyan", // 180
+  "blue", // 210
+  "indigo", // 240
+  "violet", // 270
+  "fuschia", // 300
+  "pink", // 330
+  "red"
+];
+//grab the elements we want to rainbow-ize from the page
+const red = document.getElementById("red");
+const orange = document.getElementById("orange");
+const yellow = document.getElementById("yellow");
+const green = document.getElementById("green");
+const blue = document.getElementById("blue");
+const pink = document.getElementById("pink");
+const purple = document.getElementById("purple");
+
+function changeColors() {
+  // first we get a base color with a red hue from randomColor
+  let seedColor = randomColor();
+  // then we use Chroma to analyze it for hue, saturation, and lightness
+  const chromaAnalyze = chroma(seedColor).hsl();
+  const colorHue = chromaAnalyze[0];
+  const colorSat = chromaAnalyze[1];
+  const colorLte = chromaAnalyze[2];
+
+  // we use the createHues function from Palx to create some rainbow hues across the color spectrum
+  const NewHues = createHues(colorHue);
+  console.log(NewHues);
+  // We take our new hues and use Chroma to create a color with the required hue but the same saturation and lightness of our original color
+  let colors = {};
+  NewHues.forEach(function (hue) {
+    var newColor = chroma.hsl(hue, colorSat, colorLte);
+    colors[hueName(hue)] = chroma(newColor).hex();
+  });
+
+  // store our colors so can use them to style the background and put a hex code in the html
+  const redColor = colors.red;
+  const orangeColor = colors.orange;
+  const yellowColor = colors.yellow;
+  const greenColor = colors.green;
+  const blueColor = colors.blue;
+  const pinkColor = colors.indigo;
+  const purpleColor = colors.violet;
+
+  // set our rainbow background colors
+  red.style.background = redColor;
+  orange.style.background = orangeColor;
+  yellow.style.background = yellowColor;
+  green.style.background = greenColor;
+  blue.style.background = blueColor;
+  pink.style.background = pinkColor;
+  purple.style.background = purpleColor;
+  // add the hex code to the rainbow too
+  red.innerHTML = redColor;
+  orange.innerHTML = orangeColor;
+  yellow.innerHTML = yellowColor;
+  green.innerHTML = greenColor;
+  blue.innerHTML = blueColor;
+  pink.innerHTML = pinkColor;
+  purple.innerHTML = purpleColor;
+}
+
+// run it when we load the page
+changeColors();
+
+// tools from palx https://github.com/jxnblk/palx
+function createArray(length) {
+  var arr = [];
+  for (var i = 0; i < length; i++) {
+    arr.push(i);
+  }
+  return arr;
+}
+
+function createHues(base) {
+  var hueStep = 360 / 12;
+  var hues = createArray(12).map(function (n) {
+    return Math.floor((base + n * hueStep) % 360);
+  });
+
+  return hues;
+}
+
+function hueName(h) {
+  var i = Math.round((h - 2) / 30);
+  console.log(names);
+  var name = names[i];
+  return name;
+}
+document.getElementById("color").addEventListener("click", changeColors);
\ No newline at end of file
diff --git a/random-rainbow-generator-skypack/src/style.css b/random-rainbow-generator-skypack/src/style.css
new file mode 100644
index 0000000..16ef463
--- /dev/null
+++ b/random-rainbow-generator-skypack/src/style.css
@@ -0,0 +1,99 @@
+/* styles */
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
+  margin: 2em;
+}
+
+h1 {
+  font-style: italic;
+  color: #373fff;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+p {
+  max-width: 600px;
+}
+
+form {
+  margin-bottom: 25px;
+  padding: 15px;
+  background-color: cyan;
+  display: inline-block;
+  width: 100%;
+  max-width: 340px;
+  border-radius: 3px;
+}
+
+input {
+  display: block;
+  margin-bottom: 10px;
+  padding: 5px;
+  width: 100%;
+  border: 1px solid lightgrey;
+  border-radius: 3px;
+  font-size: 16px;
+}
+
+button {
+  font-size: 16px;
+  border-radius: 3px;
+  background-color: lightgrey;
+  border: 1px solid grey;
+  box-shadow: 2px 2px teal;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: yellow;
+}
+
+button:active {
+  box-shadow: none;
+}
+
+li {
+  margin-bottom: 5px;
+}
+
+footer {
+  margin-top: 50px;
+  padding-top: 25px;
+  border-top: 1px solid lightgrey;
+}
+
+@media (min-width: 768px) {
+  #rainbow {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    height: 70vh;
+
+    -webkit-align-items: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+  }
+}
+
+#rainbow .color {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  border: 1px solid black;
+  min-height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+#color {
+  margin: 1em auto;
+}
\ No newline at end of file
diff --git a/random-svg-pattern-creator-tool/README.markdown b/random-svg-pattern-creator-tool/README.markdown
new file mode 100644
index 0000000..94d241d
--- /dev/null
+++ b/random-svg-pattern-creator-tool/README.markdown
@@ -0,0 +1,5 @@
+# Random SVG pattern creator tool
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/leimapapa/pen/NWgNzPq](https://codepen.io/leimapapa/pen/NWgNzPq).
+
+This pen lets you create and copy SVG patterns to use wherever you need em.  They're pretty tiny.
diff --git a/random-svg-pattern-creator-tool/dist/index.html b/random-svg-pattern-creator-tool/dist/index.html
new file mode 100644
index 0000000..11cddb4
--- /dev/null
+++ b/random-svg-pattern-creator-tool/dist/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Random SVG pattern creator tool</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="svgArea"></div>
+<button class="menu-btn">Menu</button>
+<div class="wrapper">
+	<nav class="nav-wrapper">
+		<h2>
+			<div class="selectedSVG" title="Selected SVG Pattern" onclick="expand()"></div>
+		</h2>
+		<ul class="main-nav">
+			<li class="nav-link">
+				<a href="#" onclick="copySVG()" title="Copy full SVG to clipboard">
+					<i class="fas fa-copy"></i> Copy SVG
+				</a>
+			</li>
+			<li class="nav-link">
+				<a href="#" onclick="copyCSSBg()" title="Copy the svg as an encoded background image">
+					<i class="far fa-copy"></i> Copy background CSS
+				</a>
+			</li>
+			<li class="nav-link">
+				<a href="#" onclick="copyCSSTextBg()" title="Copy the svg as an encoded background image that fills in text">
+					<i class="far fa-copy"></i> Copy text background CSS
+				</a>
+			</li>
+			<li class="nav-link">
+				<a href="#" onclick="addToFavs()" title="Save as a favorite pattern">
+					<i class="fas fa-star"></i> Add to favorites
+				</a>
+			</li>
+			<li class="nav-link">
+				<a href="#" onclick="randomSVGs()" title="Generate new random SVG patterns">
+					<i class="fas fa-random"></i> New patterns
+				</a>
+			</li>
+			<br/>
+			<br/>
+			<br/>
+			<li class="nav-link">
+				<a href="https://codepen.io/leimapapa/pen/OJgYGGR" title="Go to the smaller version of this tool. Experimental. Creates fewer patterns at once, but that one has shadows and other randomization stuff thrown in 👍" target="_blank">
+					<i class="fas fa-vial"></i> Tiny tool version
+				</a>
+			</li>
+			
+		</ul>
+		<div class="favorites"></div>
+	</nav>
+	<span class="menu-mask"></span>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/random-svg-pattern-creator-tool/dist/script.js b/random-svg-pattern-creator-tool/dist/script.js
new file mode 100644
index 0000000..26e2995
--- /dev/null
+++ b/random-svg-pattern-creator-tool/dist/script.js
@@ -0,0 +1,285 @@
+let selectedSVG = "";
+
+const hasClass = (element, className) => {
+	let tf;
+	try {
+		tf = (" " + element.className + " ").indexOf(" " + className + " ") > -1;
+	} catch (err) {
+		console.log(err);
+		tf = element.classList.contains(className);
+	}
+	return tf;
+};
+
+const rando = (min, max) => {
+	return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+const randLetter = (howMany) => {
+	const alphabet = "abcdefghijklmnopqrstuvwxyz";
+	let letterString = "";
+	for (let i = 0; i < howMany; i++) {
+		letterString += alphabet[Math.floor(Math.random() * alphabet.length)];
+	}
+	return letterString;
+};
+
+const copyToClipboard = (text) => {
+	const dummy = document.createElement("input");
+	document.body.appendChild(dummy);
+	dummy.setAttribute("value", text);
+	dummy.select();
+	document.execCommand("copy");
+	document.body.removeChild(dummy);
+};
+
+const thisSVG = (svg, notFav = true) => {
+	if (notFav && !hasClass(document.querySelector(".main-nav"), "active")) {
+		swal({
+			title: "SVG selected!",
+			text: "Open menu to do stuff with it...",
+			button: false,
+			timer: 1000
+		});
+	}
+	document.querySelector(".selectedSVG").innerHTML = svg;
+	selectedSVG = svg;
+};
+
+const copySVG = (svg) => {
+	copyToClipboard(selectedSVG);
+	swal({
+		title: "SVG copied!",
+		text: selectedSVG,
+		button: false,
+		timer: 800
+	});
+};
+
+async function randomSVGs() {
+	console.log("creating...");
+	document.querySelector(".selectedSVG").style.position = "relative";
+	document.querySelector(".selectedSVG").style.height = "50px";
+	document.querySelector(".selectedSVG").style.width = "100px";
+	document.querySelector(".selectedSVG").style.left = "0px";
+	document.querySelector(".selectedSVG").style.cursor = "zoom-in";
+	toggled = true;
+	const result = await fillErUp();
+	console.log("done!");
+}
+
+const randomSVGfilter = (randomizedColors, existingColor) => {
+	let R2R = rando(-50, 50) / 10;
+	let G2R = rando(-50, 50) / 10;
+	let B2R = rando(-50, 50) / 10;
+	let A2R = rando(-50, 50) / 10;
+	let ROff = rando(-50, 50) / 10;
+	let R2G = rando(-50, 50) / 10;
+	let G2G = rando(-50, 50) / 10;
+	let B2G = rando(-50, 50) / 10;
+	let A2G = rando(-50, 50) / 10;
+	let GOff = rando(-50, 50) / 10;
+	let R2B = rando(-50, 50) / 10;
+	let G2B = rando(-50, 50) / 10;
+	let B2B = rando(-50, 50) / 10;
+	let A2B = rando(-50, 50) / 10;
+	let BOff = rando(-50, 50) / 10;
+	let R2A = rando(-50, 50) / 10;
+	let G2A = rando(-50, 50) / 10;
+	let B2A = rando(-50, 50) / 10;
+	let A2A = rando(-50, 50) / 10;
+	let AOff = rando(-50, 50) / 10;
+	let extraBF = "";
+	let extraBFProb = rando(0, 100);
+	//80% of the time only have 1 baseFrequency
+	if (extraBFProb > 80) {
+		extraBF = " " + rando(1, 10000) / 100000;
+	}
+	let bfRand = rando(1, 10000) / 100000 + extraBF;
+	let randOct = rando(1, 10);
+	let svgId = randLetter(3) + rando(0, 1000) + randLetter(3);
+	let randSeed = rando(0, 1000);
+	// let bgColor = "rgb(255,255,255)";
+	let rRand = rando(0, 255);
+	let gRand = rando(0, 255);
+	let bRand = rando(0, 255);
+
+	let rgb = `rgb(${rRand},${gRand},${bRand})`;
+
+	let animated = `<feColorMatrix class="anim" type="hueRotate" values="0">
+			<animate attributeName="values" from="0" to="360" dur="${rando(2,10)}s" repeatCount="indefinite" />
+		</feColorMatrix>`;
+	//make 50% static
+	if (rando(0,1) === 1){
+		animated = '';
+	}
+	
+	let svg = `<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
+    <filter id="filter-${svgId}">
+        <feTurbulence baseFrequency="${bfRand}" numOctaves="${randOct}" seed="${randSeed}"/>
+				${animated}
+        <feColorMatrix values="${R2R} ${G2R} ${B2R} ${A2R} ${ROff} ${R2G} ${G2G} ${B2G} ${A2G} ${GOff} ${R2B} ${G2B} ${B2B} ${A2B} ${BOff} ${R2A} ${G2A} ${B2A} ${A2A} ${AOff}"/>
+		</filter>
+    <rect width="100%" height="100%" fill="${rgb}" class="bgRect"/>
+    <rect width="100%" height="100%" filter="url(#filter-${svgId})"/>
+	</svg>
+	`;
+	selectedSVG = svg;
+	return svg;
+};
+
+const fillErUp = () => {
+	document.querySelector(".svgArea").innerHTML = "";
+	let h = window.innerHeight;
+	let w = window.innerWidth;
+	let hh = Math.ceil(h / 50);
+	let ww = Math.ceil(w / 50);
+	let nn = Math.ceil(hh * ww);
+	for (let i = 0; i < nn; i++) {
+		document.querySelector(
+			".svgArea"
+		).innerHTML += `<button class="new" title="Select SVG" onClick="thisSVG(this.innerHTML)">${randomSVGfilter()}</button>`;
+	}
+};
+
+let btn = document.querySelector(".menu-btn");
+btn.addEventListener("click", (e) => {
+	e.preventDefault();
+	let mainNav = document.querySelector(".main-nav");
+	let wrapper = document.querySelector(".wrapper");
+	let navWrap = document.querySelector(".nav-wrapper");
+	let menuMask = document.querySelector(".menu-mask");
+	let body = document.querySelector("body");
+	btn.classList.toggle("active");
+	mainNav.classList.toggle("active");
+	navWrap.classList.toggle("active");
+	wrapper.classList.toggle("active");
+	menuMask.classList.toggle("active");
+	body.classList.toggle("active");
+	document.querySelector(".selectedSVG").style.position = "relative";
+	document.querySelector(".selectedSVG").style.height = "50px";
+	document.querySelector(".selectedSVG").style.width = "100px";
+	document.querySelector(".selectedSVG").style.left = "0px";
+	document.querySelector(".selectedSVG").style.cursor = "zoom-in";
+	toggled = true;
+});
+
+const addToFavs = () => {
+	document.querySelector(
+		".favorites"
+	).innerHTML += `<button class="fav" onclick="thisSVG(this.innerHTML, false)" title="Choose favorite">${selectedSVG}</button>`;
+	saveToLocal();
+};
+
+const copyCSSBg = (svgEl = document.querySelector(".selectedSVG")) => {
+	let s = new XMLSerializer().serializeToString(svgEl.firstChild);
+	let btoa = window.btoa(s);
+	let baseEncodedSVG = "data:image/svg+xml;base64," + btoa;
+	let selectedCSS = `background-image: url("${baseEncodedSVG}");`;
+	copyToClipboard(selectedCSS);
+	swal({
+		title: "CSS copied!",
+		text: selectedCSS,
+		button: false,
+		timer: 800
+	});
+};
+
+const copyCSSTextBg = (svgEl = document.querySelector(".selectedSVG")) => {
+	let s = new XMLSerializer().serializeToString(svgEl.firstChild);
+	let btoa = window.btoa(s);
+	let baseEncodedSVG = "data:image/svg+xml;base64," + btoa;
+	let selectedCSS = `background-image: url("${baseEncodedSVG}");
+	background-size: cover;
+	color: #fff;
+	-webkit-text-fill-color: transparent;
+	-webkit-background-clip: text;
+	font-weight: bold;`;
+
+	copyToClipboard(selectedCSS);
+	swal({
+		title: "CSS copied!",
+		text: selectedCSS,
+		button: false,
+		timer: 800
+	});
+};
+
+let toggled = true;
+const expand = () => {
+	if (toggled) {
+		let h = window.innerHeight;
+		let w = window.innerWidth;
+		document.querySelector(".selectedSVG").style.position = "absolute";
+		document.querySelector(".selectedSVG").style.height = `${h - 6}px`;
+		document.querySelector(".selectedSVG").style.width = `${w - 279}px`;
+		document.querySelector(".selectedSVG").style.left = `-${w - 275}px`;
+		document.querySelector(".selectedSVG").style.cursor = "zoom-out";
+		toggled = false;
+	} else {
+		document.querySelector(".selectedSVG").style.position = "relative";
+		document.querySelector(".selectedSVG").style.height = "50px";
+		document.querySelector(".selectedSVG").style.width = "100px";
+		document.querySelector(".selectedSVG").style.left = "0px";
+		document.querySelector(".selectedSVG").style.cursor = "zoom-in";
+		toggled = true;
+	}
+};
+
+// Retrieve
+let storedFavoritePatterns;
+
+const retrieveLocalStorage = () => {
+	//if we have a localStorage
+	if (localStorage["storedFavoritePatterns"]) {
+		storedFavoritePatterns = JSON.parse(localStorage["storedFavoritePatterns"]);
+		for (let i = 0; i < storedFavoritePatterns.length; i++) {
+			document.querySelector(
+				".favorites"
+			).innerHTML += `<span class="fav" onclick="thisSVG(this.innerHTML, false)" title="Choose favorite">${storedFavoritePatterns[i]}</span>`;
+		}
+		// console.log(localStorage["storedFavoritePatterns"]);
+	}
+};
+
+const removeMe = (val) => {
+	let arr = (storedFavoritePatterns = JSON.parse(
+		localStorage["storedFavoritePatterns"]
+	));
+	console.log(val[0]);
+	console.log(isInArray(arr, val[0]));
+	return this.parentNode.remove();
+};
+
+const saveToLocal = () => {
+	if (storedFavoritePatterns == null) {
+		storedFavoritePatterns = [];
+	}
+	storedFavoritePatterns.push(selectedSVG);
+	storedFavoritePatterns = removeDuplicates(storedFavoritePatterns);
+	// Save
+	localStorage["storedFavoritePatterns"] = JSON.stringify(
+		storedFavoritePatterns
+	);
+};
+
+const removeDuplicates = (arr) => {
+	let seen = {};
+	let ret_arr = [];
+	for (let i=0;	i<arr.length; i++){
+		if (!(arr[i] in seen)) {
+			ret_arr.push(arr[i]);
+			seen[arr[i]] = true;
+		}
+	}
+	return ret_arr;
+}
+
+const isInArray = (arr, val) => {
+	const found = arr.find((element) => val);
+	return found;
+};
+
+retrieveLocalStorage();
+
+fillErUp();
\ No newline at end of file
diff --git a/random-svg-pattern-creator-tool/dist/style.css b/random-svg-pattern-creator-tool/dist/style.css
new file mode 100644
index 0000000..7a45432
--- /dev/null
+++ b/random-svg-pattern-creator-tool/dist/style.css
@@ -0,0 +1,204 @@
+body {
+	margin: 0 auto;
+	overflow: hidden;
+}
+.svgArea {
+	position: absolute;
+	height: 105vh;
+	width: 105vw;
+	z-index: -1;
+}
+.new {
+	position: relative;
+	display: inline-block;
+	height: 50px;
+	width: 50px;
+	overflow: hidden;
+	margin-top: -5px;
+	cursor: pointer;
+	padding: 0;
+	border: none;
+}
+
+.new:hover {
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	border: 1px solid white;
+}
+.selectedSVG {
+	position: relative;
+	height: 50px;
+	width: 100px;
+	top: 0px;
+	left: 0px;
+	background: rgba(255, 255, 255, 0.5);
+	border: 2px dashed #fff;
+	overflow: hidden;
+	transition: 400ms;
+	cursor:zoom-in;
+}
+
+/* button that activates the slide animation, this also toggles the active class in jQuery */
+.menu-btn {
+	position: absolute;
+	top: 25px;
+	right: 20px;
+	z-index: 9999;
+	padding: 5px;
+	cursor: pointer;
+	box-shadow:0px 0px 5px #000;
+	transition:100ms;
+}
+.menu-btn:hover{
+	box-shadow:0px 0px 2px #000;
+}
+
+h1 {
+	text-align: center;
+	padding: 1em;
+	margin: 0;
+}
+
+h2 {
+	padding: 0.5em 1em 0;
+}
+
+/* resetting default normalize list styles */
+ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+a {
+	text-decoration: none;
+}
+
+/* Push Menu */
+.wrapper {
+	position: relative;
+	top: 0;
+	left: 0;
+	-webkit-transition: all 0.3s ease-out;
+	-moz-transition: all 0.3s ease-out;
+	-ms-transition: all 0.3s ease-out;
+	-o-transition: all 0.3s ease-out;
+	transition: all 0.3s ease-out;
+}
+
+.wrapper.active {
+	left: -275px;
+}
+
+.nav-wrapper {
+	position: absolute;
+	right: -275px;
+	top: 0;
+	background: #29a9e1;
+	width: 275px;
+	z-index: 9900;
+	-webkit-transition: all 0.3s ease-out;
+	-moz-transition: all 0.3s ease-out;
+	-ms-transition: all 0.3s ease-out;
+	-o-transition: all 0.3s ease-out;
+	transition: all 0.3s ease-out;
+	height: 100vh;
+}
+
+.nav-wrapper.active {
+}
+
+.main-nav {
+}
+
+.main-nav li a {
+	display: block;
+	color: white;
+	padding: 1em;
+	-webkit-transition: all 0.3s ease-out;
+	-moz-transition: all 0.3s ease-out;
+	-ms-transition: all 0.3s ease-out;
+	-o-transition: all 0.3s ease-out;
+	transition: all 0.3s ease-out;
+}
+
+.main-nav li a:last-child {
+	border-bottom: none;
+}
+
+.main-nav li.current-menu-item a {
+	background: #246a8a;
+}
+
+.main-nav li a:hover {
+	background: #246a8a;
+}
+
+/* the overlay that will darken the bakground */
+.menu-mask {
+	position: fixed;
+	z-index: 100;
+	top: 0;
+	left: 0;
+	overflow: hidden;
+	height: 100vh;
+	width: 100%;
+	visibility: hidden;
+	background-color: #000;
+	opacity: 0;
+	-webkit-transition: all 0.3s ease-out;
+	-moz-transition: all 0.3s ease-out;
+	-ms-transition: all 0.3s ease-out;
+	-o-transition: all 0.3s ease-out;
+	transition: all 0.3s ease-out;
+	user-select: none;
+	pointer-events: none;
+}
+/* show this mask */
+.menu-mask.active {
+	visibility: initial;
+	opacity: 0.3;
+}
+
+.favorites {
+	position: absolute;
+	bottom: 10px;
+	left: 50%;
+	transform: translate(-50%);
+	height: 40px;
+	width: 78%;
+	border: 2px dashed gold;
+	overflow-x: auto;
+	background:rgba(255,255,255,0.3);
+}
+
+.fav {
+	height: 40px;
+	width: 40px;
+	position:relative;
+	display: inline-block;
+	border: 0px solid black;
+	cursor: pointer;
+	padding: 0;
+	border: none;
+	overflow:hidden;
+}
+
+.fa-star{
+	color:gold;
+}
+.fa-random{
+	background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.remove{
+	position:absolute;
+	top:0%;
+	right:0%;
+	height:14px;
+	width:14px;
+	border-radius:50%;
+	background:red;
+}
\ No newline at end of file
diff --git a/random-svg-pattern-creator-tool/license.txt b/random-svg-pattern-creator-tool/license.txt
new file mode 100644
index 0000000..aac3a31
--- /dev/null
+++ b/random-svg-pattern-creator-tool/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by leimapapa (https://codepen.io/leimapapa/pen/NWgNzPq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/random-svg-pattern-creator-tool/src/index.html b/random-svg-pattern-creator-tool/src/index.html
new file mode 100644
index 0000000..d24b73f
--- /dev/null
+++ b/random-svg-pattern-creator-tool/src/index.html
@@ -0,0 +1,47 @@
+<div class="svgArea"></div>
+<button class="menu-btn">Menu</button>
+<div class="wrapper">
+	<nav class="nav-wrapper">
+		<h2>
+			<div class="selectedSVG" title="Selected SVG Pattern" onclick="expand()"></div>
+		</h2>
+		<ul class="main-nav">
+			<li class="nav-link">
+				<a href="#" onclick="copySVG()" title="Copy full SVG to clipboard">
+					<i class="fas fa-copy"></i> Copy SVG
+				</a>
+			</li>
+			<li class="nav-link">
+				<a href="#" onclick="copyCSSBg()" title="Copy the svg as an encoded background image">
+					<i class="far fa-copy"></i> Copy background CSS
+				</a>
+			</li>
+			<li class="nav-link">
+				<a href="#" onclick="copyCSSTextBg()" title="Copy the svg as an encoded background image that fills in text">
+					<i class="far fa-copy"></i> Copy text background CSS
+				</a>
+			</li>
+			<li class="nav-link">
+				<a href="#" onclick="addToFavs()" title="Save as a favorite pattern">
+					<i class="fas fa-star"></i> Add to favorites
+				</a>
+			</li>
+			<li class="nav-link">
+				<a href="#" onclick="randomSVGs()" title="Generate new random SVG patterns">
+					<i class="fas fa-random"></i> New patterns
+				</a>
+			</li>
+			<br/>
+			<br/>
+			<br/>
+			<li class="nav-link">
+				<a href="https://codepen.io/leimapapa/pen/OJgYGGR" title="Go to the smaller version of this tool. Experimental. Creates fewer patterns at once, but that one has shadows and other randomization stuff thrown in 👍" target="_blank">
+					<i class="fas fa-vial"></i> Tiny tool version
+				</a>
+			</li>
+			
+		</ul>
+		<div class="favorites"></div>
+	</nav>
+	<span class="menu-mask"></span>
+</div>
\ No newline at end of file
diff --git a/random-svg-pattern-creator-tool/src/script.js b/random-svg-pattern-creator-tool/src/script.js
new file mode 100644
index 0000000..f59bb47
--- /dev/null
+++ b/random-svg-pattern-creator-tool/src/script.js
@@ -0,0 +1,285 @@
+let selectedSVG = "";
+
+const hasClass = (element, className) => {
+	let tf;
+	try {
+		tf = (" " + element.className + " ").indexOf(" " + className + " ") > -1;
+	} catch (err) {
+		console.log(err);
+		tf = element.classList.contains(className);
+	}
+	return tf;
+};
+
+const rando = (min, max) => {
+	return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+const randLetter = (howMany) => {
+	const alphabet = "abcdefghijklmnopqrstuvwxyz";
+	let letterString = "";
+	for (let i = 0; i < howMany; i++) {
+		letterString += alphabet[Math.floor(Math.random() * alphabet.length)];
+	}
+	return letterString;
+};
+
+const copyToClipboard = (text) => {
+	const dummy = document.createElement("input");
+	document.body.appendChild(dummy);
+	dummy.setAttribute("value", text);
+	dummy.select();
+	document.execCommand("copy");
+	document.body.removeChild(dummy);
+};
+
+const thisSVG = (svg, notFav = true) => {
+	if (notFav && !hasClass(document.querySelector(".main-nav"), "active")) {
+		swal({
+			title: "SVG selected!",
+			text: "Open menu to do stuff with it...",
+			button: false,
+			timer: 1000
+		});
+	}
+	document.querySelector(".selectedSVG").innerHTML = svg;
+	selectedSVG = svg;
+};
+
+const copySVG = (svg) => {
+	copyToClipboard(selectedSVG);
+	swal({
+		title: "SVG copied!",
+		text: selectedSVG,
+		button: false,
+		timer: 800
+	});
+};
+
+async function randomSVGs() {
+	console.log("creating...");
+	document.querySelector(".selectedSVG").style.position = "relative";
+	document.querySelector(".selectedSVG").style.height = "50px";
+	document.querySelector(".selectedSVG").style.width = "100px";
+	document.querySelector(".selectedSVG").style.left = "0px";
+	document.querySelector(".selectedSVG").style.cursor = "zoom-in";
+	toggled = true;
+	const result = await fillErUp();
+	console.log("done!");
+}
+
+const randomSVGfilter = (randomizedColors, existingColor) => {
+	let R2R = rando(-50, 50) / 10;
+	let G2R = rando(-50, 50) / 10;
+	let B2R = rando(-50, 50) / 10;
+	let A2R = rando(-50, 50) / 10;
+	let ROff = rando(-50, 50) / 10;
+	let R2G = rando(-50, 50) / 10;
+	let G2G = rando(-50, 50) / 10;
+	let B2G = rando(-50, 50) / 10;
+	let A2G = rando(-50, 50) / 10;
+	let GOff = rando(-50, 50) / 10;
+	let R2B = rando(-50, 50) / 10;
+	let G2B = rando(-50, 50) / 10;
+	let B2B = rando(-50, 50) / 10;
+	let A2B = rando(-50, 50) / 10;
+	let BOff = rando(-50, 50) / 10;
+	let R2A = rando(-50, 50) / 10;
+	let G2A = rando(-50, 50) / 10;
+	let B2A = rando(-50, 50) / 10;
+	let A2A = rando(-50, 50) / 10;
+	let AOff = rando(-50, 50) / 10;
+	let extraBF = "";
+	let extraBFProb = rando(0, 100);
+	//80% of the time only have 1 baseFrequency
+	if (extraBFProb > 80) {
+		extraBF = " " + rando(1, 10000) / 100000;
+	}
+	let bfRand = rando(1, 10000) / 100000 + extraBF;
+	let randOct = rando(1, 10);
+	let svgId = randLetter(3) + rando(0, 1000) + randLetter(3);
+	let randSeed = rando(0, 1000);
+	// let bgColor = "rgb(255,255,255)";
+	let rRand = rando(0, 255);
+	let gRand = rando(0, 255);
+	let bRand = rando(0, 255);
+
+	let rgb = `rgb(${rRand},${gRand},${bRand})`;
+
+	let animated = `<feColorMatrix class="anim" type="hueRotate" values="0">
+			<animate attributeName="values" from="0" to="360" dur="${rando(2,10)}s" repeatCount="indefinite" />
+		</feColorMatrix>`;
+	//make 50% static
+	if (rando(0,1) === 1){
+		animated = '';
+	}
+	
+	let svg = `<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
+    <filter id="filter-${svgId}">
+        <feTurbulence baseFrequency="${bfRand}" numOctaves="${randOct}" seed="${randSeed}"/>
+				${animated}
+        <feColorMatrix values="${R2R} ${G2R} ${B2R} ${A2R} ${ROff} ${R2G} ${G2G} ${B2G} ${A2G} ${GOff} ${R2B} ${G2B} ${B2B} ${A2B} ${BOff} ${R2A} ${G2A} ${B2A} ${A2A} ${AOff}"/>
+		</filter>
+    <rect width="100%" height="100%" fill="${rgb}" class="bgRect"/>
+    <rect width="100%" height="100%" filter="url(#filter-${svgId})"/>
+	</svg>
+	`;
+	selectedSVG = svg;
+	return svg;
+};
+
+const fillErUp = () => {
+	document.querySelector(".svgArea").innerHTML = "";
+	let h = window.innerHeight;
+	let w = window.innerWidth;
+	let hh = Math.ceil(h / 50);
+	let ww = Math.ceil(w / 50);
+	let nn = Math.ceil(hh * ww);
+	for (let i = 0; i < nn; i++) {
+		document.querySelector(
+			".svgArea"
+		).innerHTML += `<button class="new" title="Select SVG" onClick="thisSVG(this.innerHTML)">${randomSVGfilter()}</button>`;
+	}
+};
+
+let btn = document.querySelector(".menu-btn");
+btn.addEventListener("click", (e) => {
+	e.preventDefault();
+	let mainNav = document.querySelector(".main-nav");
+	let wrapper = document.querySelector(".wrapper");
+	let navWrap = document.querySelector(".nav-wrapper");
+	let menuMask = document.querySelector(".menu-mask");
+	let body = document.querySelector("body");
+	btn.classList.toggle("active");
+	mainNav.classList.toggle("active");
+	navWrap.classList.toggle("active");
+	wrapper.classList.toggle("active");
+	menuMask.classList.toggle("active");
+	body.classList.toggle("active");
+	document.querySelector(".selectedSVG").style.position = "relative";
+	document.querySelector(".selectedSVG").style.height = "50px";
+	document.querySelector(".selectedSVG").style.width = "100px";
+	document.querySelector(".selectedSVG").style.left = "0px";
+	document.querySelector(".selectedSVG").style.cursor = "zoom-in";
+	toggled = true;
+});
+
+const addToFavs = () => {
+	document.querySelector(
+		".favorites"
+	).innerHTML += `<button class="fav" onclick="thisSVG(this.innerHTML, false)" title="Choose favorite">${selectedSVG}</button>`;
+	saveToLocal();
+};
+
+const copyCSSBg = (svgEl = document.querySelector(".selectedSVG")) => {
+	let s = new XMLSerializer().serializeToString(svgEl.firstChild);
+	let btoa = window.btoa(s);
+	let baseEncodedSVG = "data:image/svg+xml;base64," + btoa;
+	let selectedCSS = `background-image: url("${baseEncodedSVG}");`;
+	copyToClipboard(selectedCSS);
+	swal({
+		title: "CSS copied!",
+		text: selectedCSS,
+		button: false,
+		timer: 800
+	});
+};
+
+const copyCSSTextBg = (svgEl = document.querySelector(".selectedSVG")) => {
+	let s = new XMLSerializer().serializeToString(svgEl.firstChild);
+	let btoa = window.btoa(s);
+	let baseEncodedSVG = "data:image/svg+xml;base64," + btoa;
+	let selectedCSS = `background-image: url("${baseEncodedSVG}");
+	background-size: cover;
+	color: #fff;
+	-webkit-text-fill-color: transparent;
+	-webkit-background-clip: text;
+	font-weight: bold;`;
+
+	copyToClipboard(selectedCSS);
+	swal({
+		title: "CSS copied!",
+		text: selectedCSS,
+		button: false,
+		timer: 800
+	});
+};
+
+let toggled = true;
+const expand = () => {
+	if (toggled) {
+		let h = window.innerHeight;
+		let w = window.innerWidth;
+		document.querySelector(".selectedSVG").style.position = "absolute";
+		document.querySelector(".selectedSVG").style.height = `${h - 6}px`;
+		document.querySelector(".selectedSVG").style.width = `${w - 279}px`;
+		document.querySelector(".selectedSVG").style.left = `-${w - 275}px`;
+		document.querySelector(".selectedSVG").style.cursor = "zoom-out";
+		toggled = false;
+	} else {
+		document.querySelector(".selectedSVG").style.position = "relative";
+		document.querySelector(".selectedSVG").style.height = "50px";
+		document.querySelector(".selectedSVG").style.width = "100px";
+		document.querySelector(".selectedSVG").style.left = "0px";
+		document.querySelector(".selectedSVG").style.cursor = "zoom-in";
+		toggled = true;
+	}
+};
+
+// Retrieve
+let storedFavoritePatterns;
+
+const retrieveLocalStorage = () => {
+	//if we have a localStorage
+	if (localStorage["storedFavoritePatterns"]) {
+		storedFavoritePatterns = JSON.parse(localStorage["storedFavoritePatterns"]);
+		for (let i = 0; i < storedFavoritePatterns.length; i++) {
+			document.querySelector(
+				".favorites"
+			).innerHTML += `<span class="fav" onclick="thisSVG(this.innerHTML, false)" title="Choose favorite">${storedFavoritePatterns[i]}</span>`;
+		}
+		// console.log(localStorage["storedFavoritePatterns"]);
+	}
+};
+
+const removeMe = (val) => {
+	let arr = (storedFavoritePatterns = JSON.parse(
+		localStorage["storedFavoritePatterns"]
+	));
+	console.log(val[0]);
+	console.log(isInArray(arr, val[0]));
+	return this.parentNode.remove();
+};
+
+const saveToLocal = () => {
+	if (storedFavoritePatterns == null) {
+		storedFavoritePatterns = [];
+	}
+	storedFavoritePatterns.push(selectedSVG);
+	storedFavoritePatterns = removeDuplicates(storedFavoritePatterns);
+	// Save
+	localStorage["storedFavoritePatterns"] = JSON.stringify(
+		storedFavoritePatterns
+	);
+};
+
+const removeDuplicates = (arr) => {
+	let seen = {};
+	let ret_arr = [];
+	for (let i=0;	i<arr.length; i++){
+		if (!(arr[i] in seen)) {
+			ret_arr.push(arr[i]);
+			seen[arr[i]] = true;
+		}
+	}
+	return ret_arr;
+}
+
+const isInArray = (arr, val) => {
+	const found = arr.find((element) => val);
+	return found;
+};
+
+retrieveLocalStorage();
+
+fillErUp();
diff --git a/random-svg-pattern-creator-tool/src/style.css b/random-svg-pattern-creator-tool/src/style.css
new file mode 100644
index 0000000..7a45432
--- /dev/null
+++ b/random-svg-pattern-creator-tool/src/style.css
@@ -0,0 +1,204 @@
+body {
+	margin: 0 auto;
+	overflow: hidden;
+}
+.svgArea {
+	position: absolute;
+	height: 105vh;
+	width: 105vw;
+	z-index: -1;
+}
+.new {
+	position: relative;
+	display: inline-block;
+	height: 50px;
+	width: 50px;
+	overflow: hidden;
+	margin-top: -5px;
+	cursor: pointer;
+	padding: 0;
+	border: none;
+}
+
+.new:hover {
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	border: 1px solid white;
+}
+.selectedSVG {
+	position: relative;
+	height: 50px;
+	width: 100px;
+	top: 0px;
+	left: 0px;
+	background: rgba(255, 255, 255, 0.5);
+	border: 2px dashed #fff;
+	overflow: hidden;
+	transition: 400ms;
+	cursor:zoom-in;
+}
+
+/* button that activates the slide animation, this also toggles the active class in jQuery */
+.menu-btn {
+	position: absolute;
+	top: 25px;
+	right: 20px;
+	z-index: 9999;
+	padding: 5px;
+	cursor: pointer;
+	box-shadow:0px 0px 5px #000;
+	transition:100ms;
+}
+.menu-btn:hover{
+	box-shadow:0px 0px 2px #000;
+}
+
+h1 {
+	text-align: center;
+	padding: 1em;
+	margin: 0;
+}
+
+h2 {
+	padding: 0.5em 1em 0;
+}
+
+/* resetting default normalize list styles */
+ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+a {
+	text-decoration: none;
+}
+
+/* Push Menu */
+.wrapper {
+	position: relative;
+	top: 0;
+	left: 0;
+	-webkit-transition: all 0.3s ease-out;
+	-moz-transition: all 0.3s ease-out;
+	-ms-transition: all 0.3s ease-out;
+	-o-transition: all 0.3s ease-out;
+	transition: all 0.3s ease-out;
+}
+
+.wrapper.active {
+	left: -275px;
+}
+
+.nav-wrapper {
+	position: absolute;
+	right: -275px;
+	top: 0;
+	background: #29a9e1;
+	width: 275px;
+	z-index: 9900;
+	-webkit-transition: all 0.3s ease-out;
+	-moz-transition: all 0.3s ease-out;
+	-ms-transition: all 0.3s ease-out;
+	-o-transition: all 0.3s ease-out;
+	transition: all 0.3s ease-out;
+	height: 100vh;
+}
+
+.nav-wrapper.active {
+}
+
+.main-nav {
+}
+
+.main-nav li a {
+	display: block;
+	color: white;
+	padding: 1em;
+	-webkit-transition: all 0.3s ease-out;
+	-moz-transition: all 0.3s ease-out;
+	-ms-transition: all 0.3s ease-out;
+	-o-transition: all 0.3s ease-out;
+	transition: all 0.3s ease-out;
+}
+
+.main-nav li a:last-child {
+	border-bottom: none;
+}
+
+.main-nav li.current-menu-item a {
+	background: #246a8a;
+}
+
+.main-nav li a:hover {
+	background: #246a8a;
+}
+
+/* the overlay that will darken the bakground */
+.menu-mask {
+	position: fixed;
+	z-index: 100;
+	top: 0;
+	left: 0;
+	overflow: hidden;
+	height: 100vh;
+	width: 100%;
+	visibility: hidden;
+	background-color: #000;
+	opacity: 0;
+	-webkit-transition: all 0.3s ease-out;
+	-moz-transition: all 0.3s ease-out;
+	-ms-transition: all 0.3s ease-out;
+	-o-transition: all 0.3s ease-out;
+	transition: all 0.3s ease-out;
+	user-select: none;
+	pointer-events: none;
+}
+/* show this mask */
+.menu-mask.active {
+	visibility: initial;
+	opacity: 0.3;
+}
+
+.favorites {
+	position: absolute;
+	bottom: 10px;
+	left: 50%;
+	transform: translate(-50%);
+	height: 40px;
+	width: 78%;
+	border: 2px dashed gold;
+	overflow-x: auto;
+	background:rgba(255,255,255,0.3);
+}
+
+.fav {
+	height: 40px;
+	width: 40px;
+	position:relative;
+	display: inline-block;
+	border: 0px solid black;
+	cursor: pointer;
+	padding: 0;
+	border: none;
+	overflow:hidden;
+}
+
+.fa-star{
+	color:gold;
+}
+.fa-random{
+	background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.remove{
+	position:absolute;
+	top:0%;
+	right:0%;
+	height:14px;
+	width:14px;
+	border-radius:50%;
+	background:red;
+}
\ No newline at end of file
diff --git a/random-z-rich/README.markdown b/random-z-rich/README.markdown
new file mode 100644
index 0000000..93ff178
--- /dev/null
+++ b/random-z-rich/README.markdown
@@ -0,0 +1,5 @@
+# Random Zürich
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/meodai/pen/QWgNBzZ](https://codepen.io/meodai/pen/QWgNBzZ).
+
+
diff --git a/random-z-rich/dist/index.html b/random-z-rich/dist/index.html
new file mode 100644
index 0000000..6e8c861
--- /dev/null
+++ b/random-z-rich/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Random Zürich</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>Langstrasse</h1>
+<div class="w">
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/random-z-rich/dist/script.js b/random-z-rich/dist/script.js
new file mode 100644
index 0000000..512f117
--- /dev/null
+++ b/random-z-rich/dist/script.js
@@ -0,0 +1,90 @@
+const $w = document.querySelector('.w');
+const $h1 = document.querySelector('h1');
+
+const l = ['Langstrasse', 'Waid', 'Niederdorf', 'Bellevue', 'Werdinsel', 'Wipkingen', 'Zentralstrasse', 'Lochergut', 'Höngg', 'Triemli', 'Affoltern', 'Wollishofen', 'Stauffacher', 'Zwinglihaus', 'Schiffbau'];
+
+const c = [
+['red', 'white', '#202123'],
+['#eac328', '#CE6D54', '#354046'],
+['#b03b5f', '#e1e6eb', '#07080b'],
+['#E39E84', '#73BEDE', '#FDF8E7'],
+['#fff', '#E17887', '#90C6E6'],
+['#DF3F1F', '#fff', '#A61C54'],
+['turquoise', 'hotpink', '#212121'],
+['gold', 'darkgray', 'purple'],
+['#2487c6', '#f7f7f7', '#202124']];
+
+
+const rn = () => Math.round(Math.random());
+
+const setRDC = () => {
+  const cl = c[Math.floor(Math.random() * c.length)];
+  cl.forEach((cc, i) => {
+    document.documentElement.style.setProperty(`--c${i + 1}`, cc);
+  });
+};
+
+let $es;
+
+const da = () => {
+  $es = [];
+  $w.innerHTML = '';
+  $h1.innerHTML = l[Math.floor(Math.random() * l.length)];
+  setRDC();
+
+  function ce($p, x, y) {
+    $d = document.createElement('div');
+    $d.classList.add('c');
+    $d.style.setProperty('--x', x);
+    $d.style.setProperty('--y', y);
+    $p.appendChild($d);
+    return $d;
+  }
+
+  for (let i = 0; i < 4; i++) {
+    let $p = ce($w, rn(), rn());
+    if (rn()) {
+      for (let j = 0; j < 4; j++) {
+        let $p2 = ce($p, rn(), rn());
+        if (rn()) {
+          for (let l = 0; l < 4; l++) {
+            $es.push(ce($p2, rn(), rn()));
+          }
+        } else {
+          $es.push($p2);
+        }
+      }
+    } else {
+      $es.push($p);
+    }
+  };
+};
+
+da();
+
+
+document.documentElement.addEventListener('pointerdown', e => {
+  const $t = e.target;
+
+  /*if( $t.classList.contains('c') ) {
+    $t.style.setProperty('--x', rn());
+    $t.style.setProperty('--y', rn());
+    e.stopPropagation();
+  } else {*/
+  da();
+  /*}*/
+});
+
+let i = 0;
+setInterval(() => {
+  const l = $es.length;
+  let $e = $es[i++ % l];
+  $e.style.setProperty('--x', rn());
+  $e.style.setProperty('--y', rn());
+
+  if (l > 4) {
+    let $e2 = $es[(i + Math.floor(l * .5)) % l];
+    $e2.style.setProperty('--x', rn());
+    $e2.style.setProperty('--y', rn());
+  }
+}, 500);
\ No newline at end of file
diff --git a/random-z-rich/dist/style.css b/random-z-rich/dist/style.css
new file mode 100644
index 0000000..d8366d5
--- /dev/null
+++ b/random-z-rich/dist/style.css
@@ -0,0 +1,48 @@
+@import url("https://rsms.me/inter/inter.css");
+:root {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  --font: "Inter", sans-serif;
+  font-family: var(--font);
+  font-feature-settings: "dlig" 0, "numr" 0, "dnom" 0, "tnum", "case" 0, "zero" 0, "frac", "sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01", "ss02" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "calt", "liga", "kern";
+  --c1: red;
+  --c2: white;
+  --c3: #202123;
+  background: var(--c2);
+  color: var(--c3);
+  --s: 80vmin;
+}
+
+h1 {
+  font-size: calc(var(--s) * .12);
+  margin: 1.4rem 0 -0.5rem 2rem;
+  font-weight: 900;
+}
+
+.w {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 2rem;
+  width: var(--s);
+}
+
+.c {
+  display: flex;
+  flex-wrap: wrap;
+  box-shadow: inset 0 0 0 1px var(--c2);
+  width: 50%;
+  height: calc(var(--s) * .5);
+  background: radial-gradient(var(--c1), var(--c1) 23.6%, var(--c2) 23.6%, var(--c2) 47%, var(--c3) 47%, var(--c3) calc(70.9% - 2px), var(--c2) calc(70.9% - 2px));
+  background-size: 200% 200%;
+  background-position: calc(var(--x, 0) * 100%) calc(var(--y, 0) * 100%);
+  background-repeat: no-repeat;
+  transition: 2222ms background-position cubic-bezier(0.3, 0.7, 0, 1);
+}
+.c .c {
+  height: calc(var(--s) * .25);
+}
+.c .c .c {
+  height: calc(var(--s) * 0.125);
+}
\ No newline at end of file
diff --git a/random-z-rich/license.txt b/random-z-rich/license.txt
new file mode 100644
index 0000000..8e0d9b6
--- /dev/null
+++ b/random-z-rich/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by David A. (https://codepen.io/meodai/pen/QWgNBzZ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/random-z-rich/src/index.html b/random-z-rich/src/index.html
new file mode 100644
index 0000000..771d7b0
--- /dev/null
+++ b/random-z-rich/src/index.html
@@ -0,0 +1,3 @@
+<h1>Langstrasse</h1>
+<div class="w">
+</div>
\ No newline at end of file
diff --git a/random-z-rich/src/script.babel b/random-z-rich/src/script.babel
new file mode 100644
index 0000000..6a2c24f
--- /dev/null
+++ b/random-z-rich/src/script.babel
@@ -0,0 +1,90 @@
+const $w = document.querySelector('.w');
+const $h1 = document.querySelector('h1');
+
+const l = ['Langstrasse', 'Waid', 'Niederdorf', 'Bellevue', 'Werdinsel', 'Wipkingen', 'Zentralstrasse', 'Lochergut', 'Höngg', 'Triemli', 'Affoltern', 'Wollishofen', 'Stauffacher', 'Zwinglihaus', 'Schiffbau'];
+
+const c = [
+  ['red', 'white', '#202123'],
+  ['#eac328', '#CE6D54', '#354046'],
+  ['#b03b5f', '#e1e6eb', '#07080b'],
+  ['#E39E84', '#73BEDE', '#FDF8E7'],
+  ['#fff', '#E17887', '#90C6E6'],
+  ['#DF3F1F', '#fff', '#A61C54'],
+  ['turquoise', 'hotpink', '#212121'],
+  ['gold', 'darkgray', 'purple'],
+  ['#2487c6', '#f7f7f7', '#202124']
+]
+
+const rn = () => Math.round(Math.random());
+
+const setRDC = () => {
+  const cl = c[Math.floor(Math.random() * c.length)];
+  cl.forEach((cc,i) => {
+    document.documentElement.style.setProperty(`--c${i+1}`, cc);
+  });
+}
+
+let $es;
+
+const da = () => {
+  $es = [];
+  $w.innerHTML = '';
+  $h1.innerHTML = l[Math.floor(Math.random() * l.length)];
+  setRDC();
+  
+  function ce ($p,x,y) {
+    $d = document.createElement('div');
+    $d.classList.add('c');
+    $d.style.setProperty('--x', x);
+    $d.style.setProperty('--y', y);
+    $p.appendChild($d);
+    return $d;
+  }
+
+  for (let i = 0; i < 4; i++) {
+    let $p = ce($w,rn(),rn());
+    if(rn()) {
+      for (let j = 0; j < 4; j++) {
+        let $p2 = ce($p,rn(),rn());
+        if(rn()) {
+          for (let l = 0; l < 4; l++) {
+            $es.push(ce($p2,rn(),rn()));
+          }
+        } else {
+          $es.push($p2);
+        }
+      }
+    } else {
+      $es.push($p);
+    }
+  };
+}
+
+da();
+
+
+document.documentElement.addEventListener('pointerdown', e => {
+  const $t = e.target;
+  
+  /*if( $t.classList.contains('c') ) {
+    $t.style.setProperty('--x', rn());
+    $t.style.setProperty('--y', rn());
+    e.stopPropagation();
+  } else {*/
+    da();
+  /*}*/
+});
+
+let i = 0;
+setInterval(() => {
+  const l = $es.length;
+  let $e = $es[i++%l];
+  $e.style.setProperty('--x', rn());
+  $e.style.setProperty('--y', rn());
+  
+  if  ( l > 4 ) {
+    let $e2 = $es[(i + Math.floor(l * .5))%l];
+    $e2.style.setProperty('--x', rn());
+    $e2.style.setProperty('--y', rn());
+  }
+},500)
\ No newline at end of file
diff --git a/random-z-rich/src/style.scss b/random-z-rich/src/style.scss
new file mode 100644
index 0000000..7737445
--- /dev/null
+++ b/random-z-rich/src/style.scss
@@ -0,0 +1,49 @@
+@import url('https://rsms.me/inter/inter.css');
+:root {
+  user-select: none;
+  --font: 'Inter', sans-serif; 
+  font-family: var(--font);
+  font-feature-settings: "dlig" 0, "numr" 0, "dnom" 0, "tnum" , "case" 0, "zero" 0, "frac", "sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01", "ss02" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "calt", "liga", "kern";
+  
+  --c1: red;
+  --c2: white;
+  --c3: #202123;
+  
+  background: var(--c2);
+  color: var(--c3);
+  
+  --s: 80vmin;
+}
+
+h1 {
+  font-size: calc(var(--s) * .12);
+  margin: 1.4rem 0 -.5rem 2rem;
+  font-weight: 900;
+}
+
+.w {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 2rem;
+  width: var(--s);
+}
+
+.c {
+  display: flex;
+  flex-wrap: wrap;
+  //outline: 4px solid var(--c2);
+  box-shadow: inset 0 0 0 1px var(--c2);
+  width: 50%;
+  height: calc(var(--s) * .5);
+  background: radial-gradient(var(--c1), var(--c1) 23.6%, var(--c2) 23.6%, var(--c2) 47%, var(--c3) 47%, var(--c3) calc(70.9% - 2px), var(--c2) calc(70.9% - 2px));
+  background-size: 200% 200%;
+  background-position: calc(var(--x, 0) * 100%) calc(var(--y, 0) * 100%);
+  background-repeat: no-repeat;
+  transition: 2222ms background-position cubic-bezier(.3,.7,0,1);
+  .c {
+    height: calc(var(--s) * .25);
+    .c {
+      height: calc(var(--s) * 0.125);
+    }
+  }
+}
\ No newline at end of file
diff --git a/randomly-generated-diamond-art-codepenchallenge/README.markdown b/randomly-generated-diamond-art-codepenchallenge/README.markdown
new file mode 100644
index 0000000..2beece9
--- /dev/null
+++ b/randomly-generated-diamond-art-codepenchallenge/README.markdown
@@ -0,0 +1,4 @@
+# Randomly Generated Diamond Art #CodePenChallenge
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/braydoncoyer/pen/JjdyOqZ](https://codepen.io/braydoncoyer/pen/JjdyOqZ).
+
+ A diamond shape with a randomly generated pattern via css-doodle.
\ No newline at end of file
diff --git a/randomly-generated-diamond-art-codepenchallenge/dist/index.html b/randomly-generated-diamond-art-codepenchallenge/dist/index.html
new file mode 100644
index 0000000..f6bfede
--- /dev/null
+++ b/randomly-generated-diamond-art-codepenchallenge/dist/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Randomly Generated Diamond Art #CodePenChallenge</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+
+  <div class="container__elements">
+    <css-doodle>
+      :doodle {
+      @grid: 100x100;
+      @size: 45vmax;
+      @shape: diamond;
+      grid-gap: 1px;
+      }
+
+      @shape: @pick(triangle, rhombus, hexagon, heptagon, pentagon, octogon, circle);
+      --hue: calc(360 + .9 * @row() * @col());
+      background: hsla(var(--hue), 90%, 70%, @r(.1, .9));
+      transform: scale(@rand(.1,.9));
+    </css-doodle>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.4.9/css-doodle.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/randomly-generated-diamond-art-codepenchallenge/dist/script.js b/randomly-generated-diamond-art-codepenchallenge/dist/script.js
new file mode 100644
index 0000000..433364f
--- /dev/null
+++ b/randomly-generated-diamond-art-codepenchallenge/dist/script.js
@@ -0,0 +1,4 @@
+"use strict";
+// Click to get a new pattern!
+var doodle = document.querySelector("css-doodle");
+window.addEventListener("click", function () { return doodle.update(); });
\ No newline at end of file
diff --git a/randomly-generated-diamond-art-codepenchallenge/dist/style.css b/randomly-generated-diamond-art-codepenchallenge/dist/style.css
new file mode 100644
index 0000000..7a37e64
--- /dev/null
+++ b/randomly-generated-diamond-art-codepenchallenge/dist/style.css
@@ -0,0 +1,17 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #262546;
+}
+
+css-doodle {
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/randomly-generated-diamond-art-codepenchallenge/license.txt b/randomly-generated-diamond-art-codepenchallenge/license.txt
new file mode 100644
index 0000000..b38a8fe
--- /dev/null
+++ b/randomly-generated-diamond-art-codepenchallenge/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Braydon Coyer (https://codepen.io/braydoncoyer/pen/JjdyOqZ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/randomly-generated-diamond-art-codepenchallenge/src/index.html b/randomly-generated-diamond-art-codepenchallenge/src/index.html
new file mode 100644
index 0000000..137f6c8
--- /dev/null
+++ b/randomly-generated-diamond-art-codepenchallenge/src/index.html
@@ -0,0 +1,18 @@
+<div class="container">
+
+  <div class="container__elements">
+    <css-doodle>
+      :doodle {
+      @grid: 100x100;
+      @size: 45vmax;
+      @shape: diamond;
+      grid-gap: 1px;
+      }
+
+      @shape: @pick(triangle, rhombus, hexagon, heptagon, pentagon, octogon, circle);
+      --hue: calc(360 + .9 * @row() * @col());
+      background: hsla(var(--hue), 90%, 70%, @r(.1, .9));
+      transform: scale(@rand(.1,.9));
+    </css-doodle>
+  </div>
+</div>
\ No newline at end of file
diff --git a/randomly-generated-diamond-art-codepenchallenge/src/script.ts b/randomly-generated-diamond-art-codepenchallenge/src/script.ts
new file mode 100644
index 0000000..475e4a5
--- /dev/null
+++ b/randomly-generated-diamond-art-codepenchallenge/src/script.ts
@@ -0,0 +1,5 @@
+// Click to get a new pattern!
+
+const doodle = document.querySelector("css-doodle");
+
+window.addEventListener("click", () => doodle.update());
diff --git a/randomly-generated-diamond-art-codepenchallenge/src/style.scss b/randomly-generated-diamond-art-codepenchallenge/src/style.scss
new file mode 100644
index 0000000..8854f7c
--- /dev/null
+++ b/randomly-generated-diamond-art-codepenchallenge/src/style.scss
@@ -0,0 +1,23 @@
+$background: #262546;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height:100vh;
+ background-color: $background;
+  
+  &__elements {
+    
+  }
+}
+
+css-doodle {
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/randomly-generated-pure-css-menu-icons-w-markup-and-scss/README.markdown b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/README.markdown
new file mode 100644
index 0000000..05b1527
--- /dev/null
+++ b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/README.markdown
@@ -0,0 +1,4 @@
+# Randomly generated Pure CSS menu icons w/ markup and SCSS
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jcoulterdesign/pen/KJBmEx](https://codepen.io/jcoulterdesign/pen/KJBmEx).
+
+ Tired of writing these out everytime i do a site, so i made this. Hopefully a lil time saver yo!
\ No newline at end of file
diff --git a/randomly-generated-pure-css-menu-icons-w-markup-and-scss/dist/index.html b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/dist/index.html
new file mode 100644
index 0000000..e111ed2
--- /dev/null
+++ b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Randomly generated Pure CSS menu icons w/ markup and SCSS</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class='grid'></div>
+<div class='panel'>
+  <i class='fa fa-arrow-left close'></i>
+  <h1>HTML</h1>
+  <p class='markup'></p>
+  <h2>CSS</h2>
+  <p class='css'></p>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/randomly-generated-pure-css-menu-icons-w-markup-and-scss/dist/script.js b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/dist/script.js
new file mode 100644
index 0000000..e5e588c
--- /dev/null
+++ b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/dist/script.js
@@ -0,0 +1,214 @@
+// output css
+
+
+const burgers = 180;
+
+var index = 0;
+
+function randomBetween(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+class Hamburger {
+    constructor() {
+        this.count = randomBetween(2, 3); // How many lines does the icon have
+        this.height = randomBetween(2, 4);
+        this.width = randomBetween(18, 26);
+        this.originalWidth = this.width;
+        this.borderRadius = randomBetween(0, this.height - 1);
+        this.gap = randomBetween(1, 2);
+        this.border = randomBetween(1, 2);
+        this.opacity = randomBetween(100, 100) / 100;
+        this.transitionSpeed = randomBetween(10, 30) / 100 + 's';
+        this.rotation = randomBetween(0, 1) * 180;
+        this.menuRotation = randomBetween(0, 1) * 180;
+        this.scale = (randomBetween(0, 30) / 100) + 1;
+        this.left = (-randomBetween(0, 20) + randomBetween(0, 20));
+        this.easing = `cubic-bezier(${randomBetween(4, 8) / 10}, ${randomBetween(0, 1) / 10}, ${randomBetween(0, 4) / 10}, ${randomBetween(8, 20) / 10})`;
+        this.type = randomBetween(1, 4)
+
+        if(this.rotation > 179) {
+            this.transitionSpeed = randomBetween(30, 60) / 100 + 's';
+        }
+
+        if(this.count == 3 && this.type == 2) {
+            this.height += 2;
+            this.width = this.height;
+            this.borderRadius = this.height;
+            this.gap += 1;
+        }
+
+        let partStyles = `
+width: ${this.width}px; 
+height: ${this.height}px; 
+position: absolute;
+background: #313d44; 
+right: 0;
+margin: auto;
+left: 0;
+border-radius: ${this.borderRadius}px;
+transition: all ${this.transitionSpeed} ${this.easing};
+`;
+
+        let checkedStyle = '';
+        let center = (((this.count * this.height) + ((this.count - 1) * this.gap)) / 2) - (this.height / 2);
+
+        if(this.count == 2) {
+            checkedStyle = `
+input#menu-${index}:checked + label .menu {
+transform:scale(${this.scale}) rotate(${this.menuRotation}deg); 
+}
+
+input#menu-${index}:checked + label .menu .menu_part:nth-of-type(1) {
+transform: rotate(${45 + this.rotation}deg);
+top: calc(50% - (${this.height / 2}px))!important;
+width: ${this.originalWidth}px !important;
+}
+
+input#menu-${index}:checked + label .menu .menu_part:nth-of-type(2) {
+transform: rotate(${-45 - this.rotation}deg);
+top: calc(50% - (${this.height / 2}px))!important;
+width: ${this.originalWidth}px !important;
+}
+`
+        } else {
+
+            checkedStyle = `
+input#menu-${index}:checked + label .menu {
+transform:scale(${this.scale}) rotate(${this.menuRotation}deg);
+}
+
+input#menu-${index}:checked + label .menu .menu_part:nth-of-type(1) {
+transform: rotate(45deg);
+width: ${this.originalWidth}px !important;
+top: calc(50% - (${this.height / 2}px))!important;
+}
+
+input#menu-${index}:checked + label .menu .menu_part:nth-of-type(2) {
+left: ${this.left}px !important;
+opacity: 0;
+}
+
+input#menu-${index}:checked + label .menu .menu_part:nth-of-type(3) {
+transform: rotate(-45deg);
+width: ${this.originalWidth}px!important;
+top: calc(50% - (${this.height / 2}px))!important;
+}
+`
+        }
+        if(this.border == 1) {
+            checkedStyle += `input#menu-${index}:checked + label .menu {transform:scale(${this.scale}) rotate(${this.menuRotation}deg); border: 2px solid black;}`
+        }
+
+        var style = document.createElement('style');
+        style.type = 'text/css';
+        style.classList.add(`menu-${index}`);
+        style.appendChild(document.createTextNode(checkedStyle));
+        document.head.appendChild(style);
+
+        let partMarkup = '';
+        let partMarkupOutput = '';
+        var iteration = 0;
+
+        for(var i = 0; i < this.count; i++) {
+            if(this.type == 3) {
+                partMarkup += `<div class="menu_part" style="${partStyles}width: ${this.width - (6 * iteration)}px;
+top: calc(50% - ((${((this.count * this.height) + ((this.count - 1) * this.gap)) / 2}px)) + ${(this.height * (i)) + this.gap * (i - 1) }px);
+"></div>`;
+
+            } else {
+                partMarkup += `<div class="menu_part" style="${partStyles}width:${this.originalWidth};top: calc(50% - ((${((this.count * this.height) + ((this.count - 1) * this.gap)) / 2}px)) + ${(this.height * (i)) + this.gap * (i - 1) }px);"></div>`;
+            }
+            iteration++;
+            partMarkupOutput += `\t\t\t<div class="menu_part"></div>\n`;
+        }
+
+        this.generatedMarkup = `<input id="menu-${index}" type="checkbox" style="display: none"><label for="menu-${index}"><div class="menu" style="transition: all ${this.transitionSpeed};position: relative;width: ${this.originalWidth + 20}px;height: ${this.originalWidth + 20}px;border-radius: 100%;cursor: pointer;">${partMarkup}</div></label>`;
+
+        this.outputMarkup = `<input id="menu-${index}" type="checkbox">\n<label for="menu-${index}">\n\t<div class="menu">\n${partMarkupOutput}\t</div>\n</label>`
+
+
+
+        $('.grid').append(`<div class="grid_item"><span>.0${index + 1}</span><i class="fa fa-code" data-index="${index}"></i><div class="grid_item__inner" style="width:${this.originalWidth + 20}px; height: ${this.width + 20}px; ">${this.generatedMarkup}</div></div>`);
+
+        index++;
+    }
+
+    build() {
+
+    }
+}
+
+burgerArray = [];
+
+for(var i = 0; i < burgers; i++) {
+    hamburger = new Hamburger();
+    burgerArray.push(hamburger);
+}
+
+
+$('.panel').click(function(){
+    //$('body').toggleClass('open');
+})
+
+$('.close').click(function(){
+     $('body').toggleClass('open');
+})
+
+$('.grid_item i').click(function() {
+    $('body').toggleClass('open');
+
+
+    $('.panel .markup').text(burgerArray[$(this).data('index')].outputMarkup);
+
+    var part = $(this).next().find('.menu').find('.menu_part:nth-of-type(1)');
+    var partStyles = part.attr('style').split(';');
+    var partStyleFinal = partStyles.join(';')
+
+    console.log(partStyles)
+
+    var partOne = $(this).next().find('.menu').find('.menu_part:nth-of-type(1)');
+    
+    var test =  partOne.attr('style').split(';')[10];
+    console.log(test)
+    var partOneStyles = `&:nth-of-type(1) {\n\t${partOne.attr('style').split(';')[10]};\n\twidth: ${partOne.css('width')}\n}\n\n`;
+
+    var partTwo = $(this).next().find('.menu').find('.menu_part:nth-of-type(2)');
+    var partTwoStyles = `&:nth-of-type(2) {\n\t${partTwo.attr('style').split(';')[10]};\n\twidth: ${partTwo.css('width')}\n}\n\n`;
+
+    if($(this).next().find('.menu').find('.menu_part').length != 2) {
+        var partThree = $(this).next().find('.menu').find('.menu_part:nth-of-type(3)');
+        var partThreeStyles = `&:nth-of-type(3) {\n\t${partThree.attr('style').split(';')[10]};\n\twidth: ${partThree.css('width')}\n}\n\n`;
+
+    } else {
+        var partThree = '';
+        var partThreeStyles = '';
+    }
+
+
+    var menu = $(this).next().find('.menu');
+    var menuStyles = menu.attr('style').split(';');
+    var menuFinal = `#menu-${$(this).data('index')} {\n\tdisplay: none;\n}\n\n.menu {
+${menuStyles.join(';\n')}
+\t&_part {
+\t\t${partStyleFinal}
+\t\t${partOneStyles}
+\t\t${partTwoStyles}
+\t\t${partThreeStyles}
+}\n
+
+
+}\n${$('style.menu-' + $(this).data('index'))[0].innerHTML}`
+    console.log($('style.menu-1')[0])
+    $('.panel .css').text(menuFinal);
+})
+
+
+
+function autoToggle() {
+    setInterval(function(){
+        $('input').click();  
+    },1000)
+}
+
+//autoToggle();
\ No newline at end of file
diff --git a/randomly-generated-pure-css-menu-icons-w-markup-and-scss/dist/style.css b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/dist/style.css
new file mode 100644
index 0000000..d06e116
--- /dev/null
+++ b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/dist/style.css
@@ -0,0 +1,774 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:700");
+@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");
+* {
+  box-sizing: border-box;
+}
+
+.close {
+  position: absolute;
+  width: 100%;
+  border-bottom: 1px solid #f6f6f6;
+  padding: 17px;
+  left: 0;
+  top: 0;
+  transition: all 0.3s;
+  color: #54589c;
+  cursor: pointer;
+}
+.close:hover {
+  background: #f6f6f6;
+}
+
+body {
+  margin: 0;
+  overflow-x: hidden;
+  font-family: 'Roboto Condensed', sans-serif;
+}
+body.open .panel {
+  right: 0;
+}
+body.open .grid {
+  -webkit-transform: translateX(-450px);
+          transform: translateX(-450px);
+  opacity: 0.2;
+  pointer-events: none;
+}
+body span {
+  font-size: 10px;
+  opacity: 0.1;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+
+.grid_alt {
+  background: #2a3648;
+}
+.grid_alt span {
+  color: white;
+}
+.grid_alt .grid_item:hover {
+  background: #293340;
+}
+.grid_alt .menu_part {
+  background: white !important;
+}
+
+.panel {
+  overflow-y: scroll;
+  width: 450px;
+  border-left: 1px solid whitesmoke;
+  position: fixed;
+  padding: 100px 60px 60px 60px;
+  background: white;
+  right: -450px;
+  height: 100vh;
+  top: 0;
+  transition: all 0.3s;
+}
+.panel h1,
+.panel h2 {
+  margin: 0;
+  font-size: 16px;
+}
+.panel h2 {
+  margin-top: 30px;
+}
+.panel p {
+  white-space: pre;
+  -moz-tab-size: 2;
+    -o-tab-size: 2;
+       tab-size: 2;
+  font-family: 'Source Code Pro', monospace;
+  font-size: 9px;
+  font-weight: 100;
+  line-height: 14px;
+}
+
+.grid,
+.grid_alt {
+  transition: all 0.3s;
+  overflow: hidden;
+  width: 100vw;
+  margin: 0 auto;
+  padding: 100px;
+}
+.grid_item,
+.grid_alt_item {
+  width: 8.3333vw;
+  height: 8.3333vw;
+  float: left;
+  position: relative;
+  transition: all 0.5s;
+  overflow: hidden;
+}
+@media only screen and (max-width: 1200px) {
+  .grid_item,
+  .grid_alt_item {
+    width: 20vw;
+    height: 20vw;
+  }
+}
+@media only screen and (max-width: 700px) {
+  .grid_item,
+  .grid_alt_item {
+    width: 25vw;
+    height: 25vw;
+  }
+}
+@media only screen and (max-width: 400px) {
+  .grid_item,
+  .grid_alt_item {
+    width: 50vw;
+    height: 50vw;
+  }
+}
+.grid_item:hover i,
+.grid_alt_item:hover i {
+  bottom: 20px;
+}
+.grid_item i,
+.grid_alt_item i {
+  opacity: 0.1;
+  position: absolute;
+  right: 20px;
+  bottom: -20px;
+  transition: all 0.3s;
+  cursor: pointer;
+  font-size: 12px;
+}
+.grid_item i:hover,
+.grid_alt_item i:hover {
+  opacity: 1;
+}
+.grid_item:hover,
+.grid_alt_item:hover {
+  background: #f7f7f7;
+}
+.grid_item:nth-of-type(1),
+.grid_alt_item:nth-of-type(1) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.0285714286s forwards;
+          animation: fadeIn 1s 0.0285714286s forwards;
+}
+.grid_item:nth-of-type(2),
+.grid_alt_item:nth-of-type(2) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.0571428571s forwards;
+          animation: fadeIn 1s 0.0571428571s forwards;
+}
+.grid_item:nth-of-type(3),
+.grid_alt_item:nth-of-type(3) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.0857142857s forwards;
+          animation: fadeIn 1s 0.0857142857s forwards;
+}
+.grid_item:nth-of-type(4),
+.grid_alt_item:nth-of-type(4) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.1142857143s forwards;
+          animation: fadeIn 1s 0.1142857143s forwards;
+}
+.grid_item:nth-of-type(5),
+.grid_alt_item:nth-of-type(5) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.1428571429s forwards;
+          animation: fadeIn 1s 0.1428571429s forwards;
+}
+.grid_item:nth-of-type(6),
+.grid_alt_item:nth-of-type(6) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.1714285714s forwards;
+          animation: fadeIn 1s 0.1714285714s forwards;
+}
+.grid_item:nth-of-type(7),
+.grid_alt_item:nth-of-type(7) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.2s forwards;
+          animation: fadeIn 1s 0.2s forwards;
+}
+.grid_item:nth-of-type(8),
+.grid_alt_item:nth-of-type(8) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.2285714286s forwards;
+          animation: fadeIn 1s 0.2285714286s forwards;
+}
+.grid_item:nth-of-type(9),
+.grid_alt_item:nth-of-type(9) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.2571428571s forwards;
+          animation: fadeIn 1s 0.2571428571s forwards;
+}
+.grid_item:nth-of-type(10),
+.grid_alt_item:nth-of-type(10) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.2857142857s forwards;
+          animation: fadeIn 1s 0.2857142857s forwards;
+}
+.grid_item:nth-of-type(11),
+.grid_alt_item:nth-of-type(11) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.3142857143s forwards;
+          animation: fadeIn 1s 0.3142857143s forwards;
+}
+.grid_item:nth-of-type(12),
+.grid_alt_item:nth-of-type(12) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.3428571429s forwards;
+          animation: fadeIn 1s 0.3428571429s forwards;
+}
+.grid_item:nth-of-type(13),
+.grid_alt_item:nth-of-type(13) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.3714285714s forwards;
+          animation: fadeIn 1s 0.3714285714s forwards;
+}
+.grid_item:nth-of-type(14),
+.grid_alt_item:nth-of-type(14) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.4s forwards;
+          animation: fadeIn 1s 0.4s forwards;
+}
+.grid_item:nth-of-type(15),
+.grid_alt_item:nth-of-type(15) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.4285714286s forwards;
+          animation: fadeIn 1s 0.4285714286s forwards;
+}
+.grid_item:nth-of-type(16),
+.grid_alt_item:nth-of-type(16) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.4571428571s forwards;
+          animation: fadeIn 1s 0.4571428571s forwards;
+}
+.grid_item:nth-of-type(17),
+.grid_alt_item:nth-of-type(17) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.4857142857s forwards;
+          animation: fadeIn 1s 0.4857142857s forwards;
+}
+.grid_item:nth-of-type(18),
+.grid_alt_item:nth-of-type(18) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.5142857143s forwards;
+          animation: fadeIn 1s 0.5142857143s forwards;
+}
+.grid_item:nth-of-type(19),
+.grid_alt_item:nth-of-type(19) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.5428571429s forwards;
+          animation: fadeIn 1s 0.5428571429s forwards;
+}
+.grid_item:nth-of-type(20),
+.grid_alt_item:nth-of-type(20) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.5714285714s forwards;
+          animation: fadeIn 1s 0.5714285714s forwards;
+}
+.grid_item:nth-of-type(21),
+.grid_alt_item:nth-of-type(21) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.6s forwards;
+          animation: fadeIn 1s 0.6s forwards;
+}
+.grid_item:nth-of-type(22),
+.grid_alt_item:nth-of-type(22) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.6285714286s forwards;
+          animation: fadeIn 1s 0.6285714286s forwards;
+}
+.grid_item:nth-of-type(23),
+.grid_alt_item:nth-of-type(23) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.6571428571s forwards;
+          animation: fadeIn 1s 0.6571428571s forwards;
+}
+.grid_item:nth-of-type(24),
+.grid_alt_item:nth-of-type(24) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.6857142857s forwards;
+          animation: fadeIn 1s 0.6857142857s forwards;
+}
+.grid_item:nth-of-type(25),
+.grid_alt_item:nth-of-type(25) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.7142857143s forwards;
+          animation: fadeIn 1s 0.7142857143s forwards;
+}
+.grid_item:nth-of-type(26),
+.grid_alt_item:nth-of-type(26) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.7428571429s forwards;
+          animation: fadeIn 1s 0.7428571429s forwards;
+}
+.grid_item:nth-of-type(27),
+.grid_alt_item:nth-of-type(27) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.7714285714s forwards;
+          animation: fadeIn 1s 0.7714285714s forwards;
+}
+.grid_item:nth-of-type(28),
+.grid_alt_item:nth-of-type(28) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.8s forwards;
+          animation: fadeIn 1s 0.8s forwards;
+}
+.grid_item:nth-of-type(29),
+.grid_alt_item:nth-of-type(29) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.8285714286s forwards;
+          animation: fadeIn 1s 0.8285714286s forwards;
+}
+.grid_item:nth-of-type(30),
+.grid_alt_item:nth-of-type(30) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.8571428571s forwards;
+          animation: fadeIn 1s 0.8571428571s forwards;
+}
+.grid_item:nth-of-type(31),
+.grid_alt_item:nth-of-type(31) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.8857142857s forwards;
+          animation: fadeIn 1s 0.8857142857s forwards;
+}
+.grid_item:nth-of-type(32),
+.grid_alt_item:nth-of-type(32) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.9142857143s forwards;
+          animation: fadeIn 1s 0.9142857143s forwards;
+}
+.grid_item:nth-of-type(33),
+.grid_alt_item:nth-of-type(33) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.9428571429s forwards;
+          animation: fadeIn 1s 0.9428571429s forwards;
+}
+.grid_item:nth-of-type(34),
+.grid_alt_item:nth-of-type(34) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 0.9714285714s forwards;
+          animation: fadeIn 1s 0.9714285714s forwards;
+}
+.grid_item:nth-of-type(35),
+.grid_alt_item:nth-of-type(35) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1s forwards;
+          animation: fadeIn 1s 1s forwards;
+}
+.grid_item:nth-of-type(36),
+.grid_alt_item:nth-of-type(36) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.0285714286s forwards;
+          animation: fadeIn 1s 1.0285714286s forwards;
+}
+.grid_item:nth-of-type(37),
+.grid_alt_item:nth-of-type(37) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.0571428571s forwards;
+          animation: fadeIn 1s 1.0571428571s forwards;
+}
+.grid_item:nth-of-type(38),
+.grid_alt_item:nth-of-type(38) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.0857142857s forwards;
+          animation: fadeIn 1s 1.0857142857s forwards;
+}
+.grid_item:nth-of-type(39),
+.grid_alt_item:nth-of-type(39) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.1142857143s forwards;
+          animation: fadeIn 1s 1.1142857143s forwards;
+}
+.grid_item:nth-of-type(40),
+.grid_alt_item:nth-of-type(40) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.1428571429s forwards;
+          animation: fadeIn 1s 1.1428571429s forwards;
+}
+.grid_item:nth-of-type(41),
+.grid_alt_item:nth-of-type(41) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.1714285714s forwards;
+          animation: fadeIn 1s 1.1714285714s forwards;
+}
+.grid_item:nth-of-type(42),
+.grid_alt_item:nth-of-type(42) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.2s forwards;
+          animation: fadeIn 1s 1.2s forwards;
+}
+.grid_item:nth-of-type(43),
+.grid_alt_item:nth-of-type(43) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.2285714286s forwards;
+          animation: fadeIn 1s 1.2285714286s forwards;
+}
+.grid_item:nth-of-type(44),
+.grid_alt_item:nth-of-type(44) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.2571428571s forwards;
+          animation: fadeIn 1s 1.2571428571s forwards;
+}
+.grid_item:nth-of-type(45),
+.grid_alt_item:nth-of-type(45) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.2857142857s forwards;
+          animation: fadeIn 1s 1.2857142857s forwards;
+}
+.grid_item:nth-of-type(46),
+.grid_alt_item:nth-of-type(46) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.3142857143s forwards;
+          animation: fadeIn 1s 1.3142857143s forwards;
+}
+.grid_item:nth-of-type(47),
+.grid_alt_item:nth-of-type(47) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.3428571429s forwards;
+          animation: fadeIn 1s 1.3428571429s forwards;
+}
+.grid_item:nth-of-type(48),
+.grid_alt_item:nth-of-type(48) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.3714285714s forwards;
+          animation: fadeIn 1s 1.3714285714s forwards;
+}
+.grid_item:nth-of-type(49),
+.grid_alt_item:nth-of-type(49) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.4s forwards;
+          animation: fadeIn 1s 1.4s forwards;
+}
+.grid_item:nth-of-type(50),
+.grid_alt_item:nth-of-type(50) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.4285714286s forwards;
+          animation: fadeIn 1s 1.4285714286s forwards;
+}
+.grid_item:nth-of-type(51),
+.grid_alt_item:nth-of-type(51) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.4571428571s forwards;
+          animation: fadeIn 1s 1.4571428571s forwards;
+}
+.grid_item:nth-of-type(52),
+.grid_alt_item:nth-of-type(52) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.4857142857s forwards;
+          animation: fadeIn 1s 1.4857142857s forwards;
+}
+.grid_item:nth-of-type(53),
+.grid_alt_item:nth-of-type(53) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.5142857143s forwards;
+          animation: fadeIn 1s 1.5142857143s forwards;
+}
+.grid_item:nth-of-type(54),
+.grid_alt_item:nth-of-type(54) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.5428571429s forwards;
+          animation: fadeIn 1s 1.5428571429s forwards;
+}
+.grid_item:nth-of-type(55),
+.grid_alt_item:nth-of-type(55) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.5714285714s forwards;
+          animation: fadeIn 1s 1.5714285714s forwards;
+}
+.grid_item:nth-of-type(56),
+.grid_alt_item:nth-of-type(56) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.6s forwards;
+          animation: fadeIn 1s 1.6s forwards;
+}
+.grid_item:nth-of-type(57),
+.grid_alt_item:nth-of-type(57) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.6285714286s forwards;
+          animation: fadeIn 1s 1.6285714286s forwards;
+}
+.grid_item:nth-of-type(58),
+.grid_alt_item:nth-of-type(58) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.6571428571s forwards;
+          animation: fadeIn 1s 1.6571428571s forwards;
+}
+.grid_item:nth-of-type(59),
+.grid_alt_item:nth-of-type(59) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.6857142857s forwards;
+          animation: fadeIn 1s 1.6857142857s forwards;
+}
+.grid_item:nth-of-type(60),
+.grid_alt_item:nth-of-type(60) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.7142857143s forwards;
+          animation: fadeIn 1s 1.7142857143s forwards;
+}
+.grid_item:nth-of-type(61),
+.grid_alt_item:nth-of-type(61) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.7428571429s forwards;
+          animation: fadeIn 1s 1.7428571429s forwards;
+}
+.grid_item:nth-of-type(62),
+.grid_alt_item:nth-of-type(62) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.7714285714s forwards;
+          animation: fadeIn 1s 1.7714285714s forwards;
+}
+.grid_item:nth-of-type(63),
+.grid_alt_item:nth-of-type(63) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.8s forwards;
+          animation: fadeIn 1s 1.8s forwards;
+}
+.grid_item:nth-of-type(64),
+.grid_alt_item:nth-of-type(64) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.8285714286s forwards;
+          animation: fadeIn 1s 1.8285714286s forwards;
+}
+.grid_item:nth-of-type(65),
+.grid_alt_item:nth-of-type(65) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.8571428571s forwards;
+          animation: fadeIn 1s 1.8571428571s forwards;
+}
+.grid_item:nth-of-type(66),
+.grid_alt_item:nth-of-type(66) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.8857142857s forwards;
+          animation: fadeIn 1s 1.8857142857s forwards;
+}
+.grid_item:nth-of-type(67),
+.grid_alt_item:nth-of-type(67) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.9142857143s forwards;
+          animation: fadeIn 1s 1.9142857143s forwards;
+}
+.grid_item:nth-of-type(68),
+.grid_alt_item:nth-of-type(68) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.9428571429s forwards;
+          animation: fadeIn 1s 1.9428571429s forwards;
+}
+.grid_item:nth-of-type(69),
+.grid_alt_item:nth-of-type(69) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 1.9714285714s forwards;
+          animation: fadeIn 1s 1.9714285714s forwards;
+}
+.grid_item:nth-of-type(70),
+.grid_alt_item:nth-of-type(70) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2s forwards;
+          animation: fadeIn 1s 2s forwards;
+}
+.grid_item:nth-of-type(71),
+.grid_alt_item:nth-of-type(71) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.0285714286s forwards;
+          animation: fadeIn 1s 2.0285714286s forwards;
+}
+.grid_item:nth-of-type(72),
+.grid_alt_item:nth-of-type(72) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.0571428571s forwards;
+          animation: fadeIn 1s 2.0571428571s forwards;
+}
+.grid_item:nth-of-type(73),
+.grid_alt_item:nth-of-type(73) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.0857142857s forwards;
+          animation: fadeIn 1s 2.0857142857s forwards;
+}
+.grid_item:nth-of-type(74),
+.grid_alt_item:nth-of-type(74) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.1142857143s forwards;
+          animation: fadeIn 1s 2.1142857143s forwards;
+}
+.grid_item:nth-of-type(75),
+.grid_alt_item:nth-of-type(75) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.1428571429s forwards;
+          animation: fadeIn 1s 2.1428571429s forwards;
+}
+.grid_item:nth-of-type(76),
+.grid_alt_item:nth-of-type(76) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.1714285714s forwards;
+          animation: fadeIn 1s 2.1714285714s forwards;
+}
+.grid_item:nth-of-type(77),
+.grid_alt_item:nth-of-type(77) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.2s forwards;
+          animation: fadeIn 1s 2.2s forwards;
+}
+.grid_item:nth-of-type(78),
+.grid_alt_item:nth-of-type(78) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.2285714286s forwards;
+          animation: fadeIn 1s 2.2285714286s forwards;
+}
+.grid_item:nth-of-type(79),
+.grid_alt_item:nth-of-type(79) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.2571428571s forwards;
+          animation: fadeIn 1s 2.2571428571s forwards;
+}
+.grid_item:nth-of-type(80),
+.grid_alt_item:nth-of-type(80) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.2857142857s forwards;
+          animation: fadeIn 1s 2.2857142857s forwards;
+}
+.grid_item:nth-of-type(81),
+.grid_alt_item:nth-of-type(81) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.3142857143s forwards;
+          animation: fadeIn 1s 2.3142857143s forwards;
+}
+.grid_item:nth-of-type(82),
+.grid_alt_item:nth-of-type(82) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.3428571429s forwards;
+          animation: fadeIn 1s 2.3428571429s forwards;
+}
+.grid_item:nth-of-type(83),
+.grid_alt_item:nth-of-type(83) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.3714285714s forwards;
+          animation: fadeIn 1s 2.3714285714s forwards;
+}
+.grid_item:nth-of-type(84),
+.grid_alt_item:nth-of-type(84) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.4s forwards;
+          animation: fadeIn 1s 2.4s forwards;
+}
+.grid_item:nth-of-type(85),
+.grid_alt_item:nth-of-type(85) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.4285714286s forwards;
+          animation: fadeIn 1s 2.4285714286s forwards;
+}
+.grid_item:nth-of-type(86),
+.grid_alt_item:nth-of-type(86) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.4571428571s forwards;
+          animation: fadeIn 1s 2.4571428571s forwards;
+}
+.grid_item:nth-of-type(87),
+.grid_alt_item:nth-of-type(87) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.4857142857s forwards;
+          animation: fadeIn 1s 2.4857142857s forwards;
+}
+.grid_item:nth-of-type(88),
+.grid_alt_item:nth-of-type(88) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.5142857143s forwards;
+          animation: fadeIn 1s 2.5142857143s forwards;
+}
+.grid_item:nth-of-type(89),
+.grid_alt_item:nth-of-type(89) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.5428571429s forwards;
+          animation: fadeIn 1s 2.5428571429s forwards;
+}
+.grid_item:nth-of-type(90),
+.grid_alt_item:nth-of-type(90) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.5714285714s forwards;
+          animation: fadeIn 1s 2.5714285714s forwards;
+}
+.grid_item:nth-of-type(91),
+.grid_alt_item:nth-of-type(91) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.6s forwards;
+          animation: fadeIn 1s 2.6s forwards;
+}
+.grid_item:nth-of-type(92),
+.grid_alt_item:nth-of-type(92) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.6285714286s forwards;
+          animation: fadeIn 1s 2.6285714286s forwards;
+}
+.grid_item:nth-of-type(93),
+.grid_alt_item:nth-of-type(93) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.6571428571s forwards;
+          animation: fadeIn 1s 2.6571428571s forwards;
+}
+.grid_item:nth-of-type(94),
+.grid_alt_item:nth-of-type(94) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.6857142857s forwards;
+          animation: fadeIn 1s 2.6857142857s forwards;
+}
+.grid_item:nth-of-type(95),
+.grid_alt_item:nth-of-type(95) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.7142857143s forwards;
+          animation: fadeIn 1s 2.7142857143s forwards;
+}
+.grid_item:nth-of-type(96),
+.grid_alt_item:nth-of-type(96) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.7428571429s forwards;
+          animation: fadeIn 1s 2.7428571429s forwards;
+}
+.grid_item:nth-of-type(97),
+.grid_alt_item:nth-of-type(97) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.7714285714s forwards;
+          animation: fadeIn 1s 2.7714285714s forwards;
+}
+.grid_item:nth-of-type(98),
+.grid_alt_item:nth-of-type(98) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.8s forwards;
+          animation: fadeIn 1s 2.8s forwards;
+}
+.grid_item:nth-of-type(99),
+.grid_alt_item:nth-of-type(99) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.8285714286s forwards;
+          animation: fadeIn 1s 2.8285714286s forwards;
+}
+.grid_item:nth-of-type(100),
+.grid_alt_item:nth-of-type(100) {
+  opacity: 0;
+  -webkit-animation: fadeIn 1s 2.8571428571s forwards;
+          animation: fadeIn 1s 2.8571428571s forwards;
+}
+.grid_item__inner,
+.grid_alt_item__inner {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  top: 50%;
+  -webkit-transform: translatey(-50%);
+          transform: translatey(-50%);
+  text-align: center;
+}
+.grid_item__inner .menu:hover,
+.grid_alt_item__inner .menu:hover {
+  opacity: 1 !important;
+}
+
+@-webkit-keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
diff --git a/randomly-generated-pure-css-menu-icons-w-markup-and-scss/license.txt b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/license.txt
new file mode 100644
index 0000000..44b23da
--- /dev/null
+++ b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Jamie Coulter (https://codepen.io/jcoulterdesign/pen/KJBmEx)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/randomly-generated-pure-css-menu-icons-w-markup-and-scss/src/index.haml b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/src/index.haml
new file mode 100644
index 0000000..300e347
--- /dev/null
+++ b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/src/index.haml
@@ -0,0 +1,7 @@
+.grid
+.panel
+    %i.fa.fa-arrow-left.close
+    %h1 HTML
+    %p.markup
+    %h2 CSS
+    %p.css
\ No newline at end of file
diff --git a/randomly-generated-pure-css-menu-icons-w-markup-and-scss/src/script.js b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/src/script.js
new file mode 100644
index 0000000..e5e588c
--- /dev/null
+++ b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/src/script.js
@@ -0,0 +1,214 @@
+// output css
+
+
+const burgers = 180;
+
+var index = 0;
+
+function randomBetween(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+class Hamburger {
+    constructor() {
+        this.count = randomBetween(2, 3); // How many lines does the icon have
+        this.height = randomBetween(2, 4);
+        this.width = randomBetween(18, 26);
+        this.originalWidth = this.width;
+        this.borderRadius = randomBetween(0, this.height - 1);
+        this.gap = randomBetween(1, 2);
+        this.border = randomBetween(1, 2);
+        this.opacity = randomBetween(100, 100) / 100;
+        this.transitionSpeed = randomBetween(10, 30) / 100 + 's';
+        this.rotation = randomBetween(0, 1) * 180;
+        this.menuRotation = randomBetween(0, 1) * 180;
+        this.scale = (randomBetween(0, 30) / 100) + 1;
+        this.left = (-randomBetween(0, 20) + randomBetween(0, 20));
+        this.easing = `cubic-bezier(${randomBetween(4, 8) / 10}, ${randomBetween(0, 1) / 10}, ${randomBetween(0, 4) / 10}, ${randomBetween(8, 20) / 10})`;
+        this.type = randomBetween(1, 4)
+
+        if(this.rotation > 179) {
+            this.transitionSpeed = randomBetween(30, 60) / 100 + 's';
+        }
+
+        if(this.count == 3 && this.type == 2) {
+            this.height += 2;
+            this.width = this.height;
+            this.borderRadius = this.height;
+            this.gap += 1;
+        }
+
+        let partStyles = `
+width: ${this.width}px; 
+height: ${this.height}px; 
+position: absolute;
+background: #313d44; 
+right: 0;
+margin: auto;
+left: 0;
+border-radius: ${this.borderRadius}px;
+transition: all ${this.transitionSpeed} ${this.easing};
+`;
+
+        let checkedStyle = '';
+        let center = (((this.count * this.height) + ((this.count - 1) * this.gap)) / 2) - (this.height / 2);
+
+        if(this.count == 2) {
+            checkedStyle = `
+input#menu-${index}:checked + label .menu {
+transform:scale(${this.scale}) rotate(${this.menuRotation}deg); 
+}
+
+input#menu-${index}:checked + label .menu .menu_part:nth-of-type(1) {
+transform: rotate(${45 + this.rotation}deg);
+top: calc(50% - (${this.height / 2}px))!important;
+width: ${this.originalWidth}px !important;
+}
+
+input#menu-${index}:checked + label .menu .menu_part:nth-of-type(2) {
+transform: rotate(${-45 - this.rotation}deg);
+top: calc(50% - (${this.height / 2}px))!important;
+width: ${this.originalWidth}px !important;
+}
+`
+        } else {
+
+            checkedStyle = `
+input#menu-${index}:checked + label .menu {
+transform:scale(${this.scale}) rotate(${this.menuRotation}deg);
+}
+
+input#menu-${index}:checked + label .menu .menu_part:nth-of-type(1) {
+transform: rotate(45deg);
+width: ${this.originalWidth}px !important;
+top: calc(50% - (${this.height / 2}px))!important;
+}
+
+input#menu-${index}:checked + label .menu .menu_part:nth-of-type(2) {
+left: ${this.left}px !important;
+opacity: 0;
+}
+
+input#menu-${index}:checked + label .menu .menu_part:nth-of-type(3) {
+transform: rotate(-45deg);
+width: ${this.originalWidth}px!important;
+top: calc(50% - (${this.height / 2}px))!important;
+}
+`
+        }
+        if(this.border == 1) {
+            checkedStyle += `input#menu-${index}:checked + label .menu {transform:scale(${this.scale}) rotate(${this.menuRotation}deg); border: 2px solid black;}`
+        }
+
+        var style = document.createElement('style');
+        style.type = 'text/css';
+        style.classList.add(`menu-${index}`);
+        style.appendChild(document.createTextNode(checkedStyle));
+        document.head.appendChild(style);
+
+        let partMarkup = '';
+        let partMarkupOutput = '';
+        var iteration = 0;
+
+        for(var i = 0; i < this.count; i++) {
+            if(this.type == 3) {
+                partMarkup += `<div class="menu_part" style="${partStyles}width: ${this.width - (6 * iteration)}px;
+top: calc(50% - ((${((this.count * this.height) + ((this.count - 1) * this.gap)) / 2}px)) + ${(this.height * (i)) + this.gap * (i - 1) }px);
+"></div>`;
+
+            } else {
+                partMarkup += `<div class="menu_part" style="${partStyles}width:${this.originalWidth};top: calc(50% - ((${((this.count * this.height) + ((this.count - 1) * this.gap)) / 2}px)) + ${(this.height * (i)) + this.gap * (i - 1) }px);"></div>`;
+            }
+            iteration++;
+            partMarkupOutput += `\t\t\t<div class="menu_part"></div>\n`;
+        }
+
+        this.generatedMarkup = `<input id="menu-${index}" type="checkbox" style="display: none"><label for="menu-${index}"><div class="menu" style="transition: all ${this.transitionSpeed};position: relative;width: ${this.originalWidth + 20}px;height: ${this.originalWidth + 20}px;border-radius: 100%;cursor: pointer;">${partMarkup}</div></label>`;
+
+        this.outputMarkup = `<input id="menu-${index}" type="checkbox">\n<label for="menu-${index}">\n\t<div class="menu">\n${partMarkupOutput}\t</div>\n</label>`
+
+
+
+        $('.grid').append(`<div class="grid_item"><span>.0${index + 1}</span><i class="fa fa-code" data-index="${index}"></i><div class="grid_item__inner" style="width:${this.originalWidth + 20}px; height: ${this.width + 20}px; ">${this.generatedMarkup}</div></div>`);
+
+        index++;
+    }
+
+    build() {
+
+    }
+}
+
+burgerArray = [];
+
+for(var i = 0; i < burgers; i++) {
+    hamburger = new Hamburger();
+    burgerArray.push(hamburger);
+}
+
+
+$('.panel').click(function(){
+    //$('body').toggleClass('open');
+})
+
+$('.close').click(function(){
+     $('body').toggleClass('open');
+})
+
+$('.grid_item i').click(function() {
+    $('body').toggleClass('open');
+
+
+    $('.panel .markup').text(burgerArray[$(this).data('index')].outputMarkup);
+
+    var part = $(this).next().find('.menu').find('.menu_part:nth-of-type(1)');
+    var partStyles = part.attr('style').split(';');
+    var partStyleFinal = partStyles.join(';')
+
+    console.log(partStyles)
+
+    var partOne = $(this).next().find('.menu').find('.menu_part:nth-of-type(1)');
+    
+    var test =  partOne.attr('style').split(';')[10];
+    console.log(test)
+    var partOneStyles = `&:nth-of-type(1) {\n\t${partOne.attr('style').split(';')[10]};\n\twidth: ${partOne.css('width')}\n}\n\n`;
+
+    var partTwo = $(this).next().find('.menu').find('.menu_part:nth-of-type(2)');
+    var partTwoStyles = `&:nth-of-type(2) {\n\t${partTwo.attr('style').split(';')[10]};\n\twidth: ${partTwo.css('width')}\n}\n\n`;
+
+    if($(this).next().find('.menu').find('.menu_part').length != 2) {
+        var partThree = $(this).next().find('.menu').find('.menu_part:nth-of-type(3)');
+        var partThreeStyles = `&:nth-of-type(3) {\n\t${partThree.attr('style').split(';')[10]};\n\twidth: ${partThree.css('width')}\n}\n\n`;
+
+    } else {
+        var partThree = '';
+        var partThreeStyles = '';
+    }
+
+
+    var menu = $(this).next().find('.menu');
+    var menuStyles = menu.attr('style').split(';');
+    var menuFinal = `#menu-${$(this).data('index')} {\n\tdisplay: none;\n}\n\n.menu {
+${menuStyles.join(';\n')}
+\t&_part {
+\t\t${partStyleFinal}
+\t\t${partOneStyles}
+\t\t${partTwoStyles}
+\t\t${partThreeStyles}
+}\n
+
+
+}\n${$('style.menu-' + $(this).data('index'))[0].innerHTML}`
+    console.log($('style.menu-1')[0])
+    $('.panel .css').text(menuFinal);
+})
+
+
+
+function autoToggle() {
+    setInterval(function(){
+        $('input').click();  
+    },1000)
+}
+
+//autoToggle();
\ No newline at end of file
diff --git a/randomly-generated-pure-css-menu-icons-w-markup-and-scss/src/style.scss b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/src/style.scss
new file mode 100644
index 0000000..31d168d
--- /dev/null
+++ b/randomly-generated-pure-css-menu-icons-w-markup-and-scss/src/style.scss
@@ -0,0 +1,190 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');
+@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
+* {
+    box-sizing: border-box;
+}
+
+.close {
+        position: absolute;
+    width: 100%;
+    border-bottom: 1px solid #f6f6f6;
+    padding: 17px;
+    left: 0;
+    top: 0;
+    transition: all 0.3s;
+    color: #54589c;
+    cursor: pointer;
+    
+    &:hover {
+        background: #f6f6f6;
+    }
+}
+body {
+    margin: 0;
+    overflow-x: hidden;
+    font-family: 'Roboto Condensed', sans-serif;
+    
+    &.open {
+        .panel {
+             right: 0;
+        }
+        .grid {
+            transform: translateX(-450px);
+            opacity: 0.2;
+            pointer-events: none;
+        }
+    }
+    
+    span {
+        font-size: 10px;
+        opacity: 0.1;
+        position: absolute;
+        top: 20px;
+        left: 20px;
+    }
+}
+
+$itemWidth : 8.3333vw;
+
+.grid_alt {
+    background: #2a3648;
+        span {
+        color: white;
+    }
+    
+    .grid_item {
+        &:hover {
+            background: #293340;
+        }
+    }
+    .menu_part {
+        background: white !important;
+    }
+}
+
+.panel {
+    overflow-y: scroll;
+    width: 450px;
+border-left: 1px solid whitesmoke;
+    position: fixed;
+    padding: 100px 60px 60px 60px;
+    background: white;
+    right: -450px;
+    height: 100vh;
+    top: 0;
+     transition: all 0.3s;
+    
+    h1, 
+    h2 {
+        margin: 0;
+        font-size: 16px;
+    }
+    
+    h2 {
+        margin-top: 30px;
+    }
+    
+    p {
+     white-space: pre;
+        tab-size: 2;
+        font-family: 'Source Code Pro', monospace;
+        font-size: 9px;
+        font-weight: 100;
+        line-height: 14px;
+    }
+    
+    
+}
+
+.grid,
+.grid_alt {
+    transition: all 0.3s;
+    overflow: hidden;
+    width: 100vw;
+    margin: 0 auto;
+    padding: 100px;
+    
+    &_item {
+        width: $itemWidth;
+        height: $itemWidth;
+        
+        @media only screen and (max-width: 1200px) {
+            width: 20vw;
+        height:  20vw;
+        }
+        
+        @media only screen and (max-width: 700px) {
+            width: 25vw;
+        height:  25vw;
+        }
+        
+        @media only screen and (max-width: 400px) {
+            width: 50vw;
+        height:  50vw;
+        }
+        float: left;
+        position: relative;
+        transition: all 0.5s;
+        overflow: hidden;
+        
+        &:hover {
+            i {
+                bottom: 20px;
+            }
+        }
+        
+        i {
+            opacity: 0.1;
+            position: absolute;
+            right: 20px;
+            bottom: -20px;
+            transition: all 0.3s;
+            cursor: pointer;
+            font-size: 12px;
+            
+            &:hover {
+                opacity: 1;
+               // border: 2px solid black;
+            }
+        }
+        
+        &:hover {
+            background: #f7f7f7;
+        }
+
+        @for $i from 1 through 100 {
+            
+            &:nth-of-type(#{$i}) {
+                opacity: 0;
+                //background: rgb(random(255), random(255), random(255)) !important;
+                animation: fadeIn 1s $i / 35 + 0s forwards;
+                .menu {
+                    &_part {
+                        //background: rgb(random(255), random(255), random(255)) !important;
+                    }
+                }
+            }
+        }
+
+
+        &__inner {
+            position: absolute;
+            left: 0;
+            right: 0;
+            margin: auto;
+            top: 50%;
+            transform: translatey(-50%);
+            text-align: center;
+
+            & .menu {
+                &:hover {
+                    opacity: 1 !important;
+                }
+            }
+        }
+    }
+}
+
+@keyframes fadeIn {
+    to{opacity: 1}
+}
\ No newline at end of file
diff --git a/range-pills/README.markdown b/range-pills/README.markdown
new file mode 100644
index 0000000..d591188
--- /dev/null
+++ b/range-pills/README.markdown
@@ -0,0 +1,5 @@
+# Range Pills 💊
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jkantner/pen/JjRWZjG](https://codepen.io/jkantner/pen/JjRWZjG).
+
+Range sliders looking like they came straight out of a pharmacy just like my [Pill Switch](https://codepen.io/jkantner/details/QWEQXRN).
diff --git a/range-pills/dist/index.html b/range-pills/dist/index.html
new file mode 100644
index 0000000..c17489b
--- /dev/null
+++ b/range-pills/dist/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Range Pills 💊</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Jost&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<form>
+	<div class="form__block">
+		<label for="range1">A</label>
+		<input id="range1" name="range1" type="range" min="0" max="5" value="3">
+	</div>
+	<div class="form__block">
+		<label for="range2">B</label>
+		<input id="range2" name="range2" type="range" min="0" max="10" value="5">
+	</div>
+	<div class="form__block">
+		<label for="range3">C</label>
+		<input id="range3" name="range3" type="range" min="0" max="20" value="10">
+	</div>
+	<div class="form__block">
+		<label for="range4">D</label>
+		<input id="range4" name="range4" type="range" min="0" max="25" value="13">
+	</div>
+	<div class="form__block">
+		<label for="range5">E</label>
+		<input id="range5" name="range5" type="range" min="0" max="30" value="15">
+	</div>
+	<div class="form__block">
+		<label for="range6">F</label>
+		<input id="range6" name="range6" type="range" min="0" max="40" value="20">
+	</div>
+	<div class="form__block">
+		<label for="range7">G</label>
+		<input id="range7" name="range7" type="range" min="0" max="50" value="25">
+	</div>
+	<div class="form__block">
+		<label for="range8">H</label>
+		<input id="range8" name="range8" type="range" min="0" max="60" value="30">
+	</div>
+	<div class="form__block">
+		<label for="range9">I</label>
+		<input id="range9" name="range9" type="range" min="0" max="70" value="35">
+	</div>
+	<div class="form__block">
+		<label for="range10">J</label>
+		<input id="range10" name="range10" type="range" min="0" max="80" value="40">
+	</div>
+	<div class="form__block">
+		<label for="range11">K</label>
+		<input id="range11" name="range11" type="range" min="0" max="90" value="45">
+	</div>
+	<div class="form__block">
+		<label for="range12">L</label>
+		<input id="range12" name="range12" type="range" min="0" max="100" value="50">
+	</div>
+</form>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/range-pills/dist/script.js b/range-pills/dist/script.js
new file mode 100644
index 0000000..ee620ee
--- /dev/null
+++ b/range-pills/dist/script.js
@@ -0,0 +1,73 @@
+document.addEventListener("DOMContentLoaded",function(){
+	let ranges = [
+		new RangePill("#range1","orange"),
+		new RangePill("#range2","yellow"),
+		new RangePill("#range3","blue"),
+		new RangePill("#range4","white","orange"),
+		new RangePill("#range5","white","yellow"),
+		new RangePill("#range6","white","blue"),
+		new RangePill("#range7","orange","yellow"),
+		new RangePill("#range8","blue","orange"),
+		new RangePill("#range9","yellow","blue"),
+		new RangePill("#range10","yellow","orange"),
+		new RangePill("#range11","orange","blue"),
+		new RangePill("#range12","blue","yellow")
+	];
+});
+
+class RangePill {
+	constructor(qs,thumbColor = "orange",trackColor = "white") {
+		this.el = document.querySelector(qs);
+		this.fill = null;
+		this.value = null;
+
+		if (this.el) {
+			this.buildSlider(thumbColor,trackColor);
+			this.el.addEventListener("input",this.changeValue.bind(this));
+		}
+	}
+	buildSlider(thumbColor,trackColor) {
+		this.el.className = "range-pill__input";
+		// create a div to contain the <input>
+		let rangeWrap = document.createElement("span");
+		rangeWrap.className = "range-pill";
+		// thumb and track colors
+		if (thumbColor)
+			rangeWrap.classList.add(`range-pill--${thumbColor}-thumb`);
+		if (trackColor)
+			rangeWrap.classList.add(`range-pill--${trackColor}-track`);
+		this.el.parentElement.insertBefore(rangeWrap,this.el);
+		// input
+		rangeWrap.appendChild(this.el);
+		// range fill
+		let rangeFill = document.createElement("span");
+		rangeFill.className = "range-pill__fill";
+		rangeWrap.appendChild(rangeFill);
+		// range value
+		let rangeValue = document.createElement("span");
+		rangeValue.className = "range-pill__value";
+		rangeValue.textContent = this.el.value;
+		rangeWrap.appendChild(rangeValue);
+		// initial value
+		this.fill = rangeFill;
+		this.value = rangeValue;
+		this.changeValue();
+	}
+	changeValue() {
+		// keep the value within range
+		if (+this.el.value > this.el.max)
+			this.el.value = this.el.max;
+		else if (+this.el.value < this.el.min)
+			this.el.value = this.el.min;
+		// width of fill
+		if (this.fill) {
+			let pct = (this.el.value - this.el.min) / (this.el.max - this.el.min),
+				fillWidth = pct * 100;
+
+			this.fill.style.width = `${fillWidth}%`;
+		}
+		// value
+		if (this.value)
+			this.value.textContent = this.el.value;
+	}
+}
\ No newline at end of file
diff --git a/range-pills/dist/style.css b/range-pills/dist/style.css
new file mode 100644
index 0000000..45a7ce5
--- /dev/null
+++ b/range-pills/dist/style.css
@@ -0,0 +1,165 @@
+* {
+  border: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg: hsl(223,10%,90%);
+  --fg: hsl(223,10%,10%);
+  --orange: hsl(29,90%,55%);
+  --yellow: hsl(43,90%,55%);
+  --blue: hsl(198,90%,55%);
+  --white: hsl(223,10%,100%);
+  font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320));
+}
+
+body, input {
+  font: 1em/1.5 "Jost", system-ui, -apple-system, sans-serif;
+}
+
+body {
+  background: var(--bg);
+  color: var(--fg);
+  display: flex;
+  height: 100vh;
+}
+
+form {
+  display: grid;
+  grid-gap: 0 1.5em;
+  grid-template-columns: repeat(2, 1fr);
+  margin: auto;
+}
+
+label {
+  display: block;
+}
+
+.range-pill {
+  --pillWidth: 4.5em;
+  box-shadow: 0 0.375em 0.375em 0 rgba(0, 0, 0, 0.3);
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+  width: var(--pillWidth);
+  height: 1.5em;
+}
+.range-pill, .range-pill:before, .range-pill__input {
+  border-radius: 0.75em;
+}
+.range-pill:before, .range-pill:after, .range-pill__fill, .range-pill__input, .range-pill__value {
+  display: block;
+  position: absolute;
+}
+.range-pill:before, .range-pill__fill, .range-pill__input, .range-pill__value {
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+.range-pill:before, .range-pill__input, .range-pill__value {
+  width: 100%;
+}
+.range-pill:before, .range-pill:after {
+  content: "";
+  z-index: 3;
+}
+.range-pill:before {
+  background: radial-gradient(0.5em 0.4em at 0.75em 0.5em, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0) 50%);
+  box-shadow: 0.05em -0.025em 0.25em 0.05em rgba(255, 255, 255, 0.4) inset, 0.125em -0.125em 0.15em 0.25em rgba(255, 255, 255, 0.07) inset, 0 -0.75em 0.175em 0 rgba(0, 0, 0, 0.07) inset, 0 -0.4em 0.05em 0.2em rgba(255, 255, 255, 0.07) inset, 0 -0.125em 0.05em 0.2em rgba(255, 255, 255, 0.1) inset;
+}
+.range-pill:after {
+  background: rgba(255, 255, 255, 0.25);
+  border-radius: 0.125em;
+  box-shadow: 0 0 0.1em 0.1em rgba(255, 255, 255, 0.25);
+  top: 0.6em;
+  left: 1.25em;
+  width: calc(var(--pillWidth) - 1.75em);
+  height: 0.1em;
+}
+.range-pill--orange-track, .range-pill--orange-thumb .range-pill__fill {
+  background: var(--orange);
+}
+.range-pill--yellow-track, .range-pill--yellow-thumb .range-pill__fill {
+  background: var(--yellow);
+}
+.range-pill--blue-track, .range-pill--blue-thumb .range-pill__fill {
+  background: var(--blue);
+}
+.range-pill--white-track, .range-pill--white-thumb .range-pill__fill {
+  background: var(--white);
+}
+.range-pill__fill {
+  box-shadow: 0 0 0.1em #17181c, -0.05em 0 0 rgba(255, 255, 255, 0.3) inset;
+  z-index: 1;
+}
+.range-pill__input {
+  background: transparent;
+  cursor: pointer;
+  z-index: 4;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.range-pill__input:focus {
+  outline: transparent;
+}
+.range-pill__input:focus-visible {
+  box-shadow: 0 0 0.125em 0.125em #0b46da inset;
+}
+.range-pill__input::-moz-focus-outer {
+  border: 0;
+}
+.range-pill__input::-webkit-slider-thumb {
+  background: transparent;
+  border: 0;
+  width: 1px;
+  height: 1.5em;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+.range-pill__input::-moz-range-thumb {
+  background: transparent;
+  border: 0;
+  width: 1px;
+  height: 1.5em;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+.range-pill__value {
+  color: #17181c;
+  font-size: 0.75em;
+  line-height: 2;
+  text-align: center;
+  text-shadow: 0 0 0.2em rgba(23, 24, 28, 0.3), 0.1em 0.1em 0.1em rgba(23, 24, 28, 0.3);
+  z-index: 2;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: hsl(223,10%,20%);
+    --fg: hsl(223,10%,90%);
+  }
+
+  .range-pill {
+    box-shadow: 0 0.375em 0.375em 0 rgba(0, 0, 0, 0.3);
+  }
+  .range-pill:before {
+    background: radial-gradient(0.5em 0.4em at 0.75em 0.5em, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 50%);
+    box-shadow: 0.05em -0.025em 0.25em 0.05em rgba(46, 49, 56, 0.4) inset, 0.125em -0.125em 0.15em 0.25em rgba(46, 49, 56, 0.07) inset, 0 -0.75em 0.175em 0 rgba(0, 0, 0, 0.07) inset, 0 -0.4em 0.05em 0.2em rgba(46, 49, 56, 0.07) inset, 0 -0.125em 0.05em 0.2em rgba(46, 49, 56, 0.1) inset;
+  }
+}
+@media (min-width: 480px) {
+  form {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 768px) {
+  form {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
\ No newline at end of file
diff --git a/range-pills/license.txt b/range-pills/license.txt
new file mode 100644
index 0000000..9878f55
--- /dev/null
+++ b/range-pills/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Jon Kantner (https://codepen.io/jkantner/pen/JjRWZjG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/range-pills/src/index.html b/range-pills/src/index.html
new file mode 100644
index 0000000..49bd8e8
--- /dev/null
+++ b/range-pills/src/index.html
@@ -0,0 +1,50 @@
+<form>
+	<div class="form__block">
+		<label for="range1">A</label>
+		<input id="range1" name="range1" type="range" min="0" max="5" value="3">
+	</div>
+	<div class="form__block">
+		<label for="range2">B</label>
+		<input id="range2" name="range2" type="range" min="0" max="10" value="5">
+	</div>
+	<div class="form__block">
+		<label for="range3">C</label>
+		<input id="range3" name="range3" type="range" min="0" max="20" value="10">
+	</div>
+	<div class="form__block">
+		<label for="range4">D</label>
+		<input id="range4" name="range4" type="range" min="0" max="25" value="13">
+	</div>
+	<div class="form__block">
+		<label for="range5">E</label>
+		<input id="range5" name="range5" type="range" min="0" max="30" value="15">
+	</div>
+	<div class="form__block">
+		<label for="range6">F</label>
+		<input id="range6" name="range6" type="range" min="0" max="40" value="20">
+	</div>
+	<div class="form__block">
+		<label for="range7">G</label>
+		<input id="range7" name="range7" type="range" min="0" max="50" value="25">
+	</div>
+	<div class="form__block">
+		<label for="range8">H</label>
+		<input id="range8" name="range8" type="range" min="0" max="60" value="30">
+	</div>
+	<div class="form__block">
+		<label for="range9">I</label>
+		<input id="range9" name="range9" type="range" min="0" max="70" value="35">
+	</div>
+	<div class="form__block">
+		<label for="range10">J</label>
+		<input id="range10" name="range10" type="range" min="0" max="80" value="40">
+	</div>
+	<div class="form__block">
+		<label for="range11">K</label>
+		<input id="range11" name="range11" type="range" min="0" max="90" value="45">
+	</div>
+	<div class="form__block">
+		<label for="range12">L</label>
+		<input id="range12" name="range12" type="range" min="0" max="100" value="50">
+	</div>
+</form>
\ No newline at end of file
diff --git a/range-pills/src/script.js b/range-pills/src/script.js
new file mode 100644
index 0000000..ee620ee
--- /dev/null
+++ b/range-pills/src/script.js
@@ -0,0 +1,73 @@
+document.addEventListener("DOMContentLoaded",function(){
+	let ranges = [
+		new RangePill("#range1","orange"),
+		new RangePill("#range2","yellow"),
+		new RangePill("#range3","blue"),
+		new RangePill("#range4","white","orange"),
+		new RangePill("#range5","white","yellow"),
+		new RangePill("#range6","white","blue"),
+		new RangePill("#range7","orange","yellow"),
+		new RangePill("#range8","blue","orange"),
+		new RangePill("#range9","yellow","blue"),
+		new RangePill("#range10","yellow","orange"),
+		new RangePill("#range11","orange","blue"),
+		new RangePill("#range12","blue","yellow")
+	];
+});
+
+class RangePill {
+	constructor(qs,thumbColor = "orange",trackColor = "white") {
+		this.el = document.querySelector(qs);
+		this.fill = null;
+		this.value = null;
+
+		if (this.el) {
+			this.buildSlider(thumbColor,trackColor);
+			this.el.addEventListener("input",this.changeValue.bind(this));
+		}
+	}
+	buildSlider(thumbColor,trackColor) {
+		this.el.className = "range-pill__input";
+		// create a div to contain the <input>
+		let rangeWrap = document.createElement("span");
+		rangeWrap.className = "range-pill";
+		// thumb and track colors
+		if (thumbColor)
+			rangeWrap.classList.add(`range-pill--${thumbColor}-thumb`);
+		if (trackColor)
+			rangeWrap.classList.add(`range-pill--${trackColor}-track`);
+		this.el.parentElement.insertBefore(rangeWrap,this.el);
+		// input
+		rangeWrap.appendChild(this.el);
+		// range fill
+		let rangeFill = document.createElement("span");
+		rangeFill.className = "range-pill__fill";
+		rangeWrap.appendChild(rangeFill);
+		// range value
+		let rangeValue = document.createElement("span");
+		rangeValue.className = "range-pill__value";
+		rangeValue.textContent = this.el.value;
+		rangeWrap.appendChild(rangeValue);
+		// initial value
+		this.fill = rangeFill;
+		this.value = rangeValue;
+		this.changeValue();
+	}
+	changeValue() {
+		// keep the value within range
+		if (+this.el.value > this.el.max)
+			this.el.value = this.el.max;
+		else if (+this.el.value < this.el.min)
+			this.el.value = this.el.min;
+		// width of fill
+		if (this.fill) {
+			let pct = (this.el.value - this.el.min) / (this.el.max - this.el.min),
+				fillWidth = pct * 100;
+
+			this.fill.style.width = `${fillWidth}%`;
+		}
+		// value
+		if (this.value)
+			this.value.textContent = this.el.value;
+	}
+}
\ No newline at end of file
diff --git a/range-pills/src/style.sass b/range-pills/src/style.sass
new file mode 100644
index 0000000..e3a8e75
--- /dev/null
+++ b/range-pills/src/style.sass
@@ -0,0 +1,130 @@
+// mixins
+@mixin thumbBaseProps()
+	background: transparent
+	border: 0
+	width: 1px
+	height: 1.5em
+	-webkit-appearance: none
+	-moz-appearance: none
+	appearance: none
+
+// normal styles
+*
+	border: 0
+	box-sizing: border-box
+	margin: 0
+	padding: 0
+\:root
+	--bg: hsl(223,10%,90%)
+	--fg: hsl(223,10%,10%)
+	--orange: hsl(29,90%,55%)
+	--yellow: hsl(43,90%,55%)
+	--blue: hsl(198,90%,55%)
+	--white: hsl(223,10%,100%)
+	font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320))
+body, input
+	font: 1em/1.5 "Jost", system-ui, -apple-system, sans-serif
+body
+	background: var(--bg)
+	color: var(--fg)
+	display: flex
+	height: 100vh
+form
+	display: grid
+	grid:
+		gap: 0 1.5em
+		template-columns: repeat(2,1fr)
+	margin: auto
+label
+	display: block
+.range-pill
+	--pillWidth: 4.5em
+	box-shadow: 0 0.375em 0.375em 0 hsla(0,0%,0%,0.3)
+	display: inline-block
+	overflow: hidden
+	position: relative
+	width: var(--pillWidth)
+	height: 1.5em
+	&, &:before, &__input
+		border-radius: 0.75em
+	&:before, &:after, &__fill, &__input, &__value
+		display: block
+		position: absolute
+	&:before, &__fill, &__input, &__value
+		top: 0
+		left: 0
+		height: 100%
+	&:before, &__input, &__value
+		width: 100%
+	&:before, &:after
+		content: ""
+		z-index: 3
+	&:before
+		background: radial-gradient(0.5em 0.4em at 0.75em 0.5em,hsla(0,0%,100%,0.25) 30%,hsla(0,0%,100%,0) 50%)
+		box-shadow: 0.05em -0.025em 0.25em 0.05em hsla(0,0%,100%,0.4) inset, 0.125em -0.125em 0.15em 0.25em hsla(0,0%,100%,0.07) inset, 0 -0.75em 0.175em 0 hsla(0,0%,0%,0.07) inset, 0 -0.4em 0.05em 0.2em hsla(0,0%,100%,0.07) inset, 0 -0.125em 0.05em 0.2em hsla(0,0%,100%,0.1) inset
+	&:after
+		background: hsla(0,0%,100%,0.25)
+		border-radius: 0.125em
+		box-shadow: 0 0 0.1em 0.1em hsla(0,0%,100%,0.25)
+		top: 0.6em
+		left: 1.25em
+		width: calc(var(--pillWidth) - 1.75em)
+		height: 0.1em
+	&--orange-track, &--orange-thumb &__fill
+		background: var(--orange)
+	&--yellow-track, &--yellow-thumb &__fill
+		background: var(--yellow)
+	&--blue-track, &--blue-thumb &__fill
+		background: var(--blue)
+	&--white-track, &--white-thumb &__fill
+		background: var(--white)
+	&__fill
+		box-shadow: 0 0 0.1em hsl(223,10%,10%), -0.05em 0 0 hsla(0,0%,100%,0.3) inset
+		z-index: 1
+	&__input
+		background: transparent
+		cursor: pointer
+		z-index: 4
+		-webkit-appearance: none
+		-moz-appearance: none
+		appearance: none
+		-webkit-tap-highlight-color: transparent
+		&:focus
+			outline: transparent
+			&-visible
+				box-shadow: 0 0 0.125em 0.125em hsl(223,90%,45%) inset
+		&::-moz-focus-outer 
+			border: 0
+		&::-webkit-slider-thumb
+			@include thumbBaseProps()
+		&::-moz-range-thumb
+			@include thumbBaseProps()
+	&__value
+		color: hsl(223,10%,10%)
+		font-size: 0.75em
+		line-height: 2
+		text:
+			align: center
+			shadow: 0 0 0.2em hsla(223,10%,10%,0.3), 0.1em 0.1em 0.1em hsla(223,10%,10%,0.3)
+		z-index: 2
+
+// dark mode
+@media (prefers-color-scheme: dark)
+	\:root 
+		--bg: hsl(223,10%,20%)
+		--fg: hsl(223,10%,90%)
+	.range-pill
+		box-shadow: 0 0.375em 0.375em 0 hsla(0,0%,0%,0.3)
+		&:before
+			background: radial-gradient(0.5em 0.4em at 0.75em 0.5em,hsla(0,0%,100%,0.2) 30%,hsla(0,0%,100%,0) 50%)
+			box-shadow: 0.05em -0.025em 0.25em 0.05em hsla(223,10%,20%,0.4) inset, 0.125em -0.125em 0.15em 0.25em hsla(223,10%,20%,0.07) inset, 0 -0.75em 0.175em 0 hsla(0,0%,0%,0.07) inset, 0 -0.4em 0.05em 0.2em hsla(223,10%,20%,0.07) inset, 0 -0.125em 0.05em 0.2em hsla(223,10%,20%,0.1) inset
+
+// larger viewports
+@media (min-width: 480px)
+	form
+		grid:
+			template-columns: repeat(3,1fr)
+@media (min-width: 768px)
+	form
+		grid:
+			template-columns: repeat(4,1fr)
\ No newline at end of file
diff --git a/react-color-gradients/README.markdown b/react-color-gradients/README.markdown
new file mode 100644
index 0000000..763d8a2
--- /dev/null
+++ b/react-color-gradients/README.markdown
@@ -0,0 +1,7 @@
+# React Color Gradients
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/marcobiedermann/pen/WNGWzYR](https://codepen.io/marcobiedermann/pen/WNGWzYR).
+
+React Gradients
+
+Inspired by https://dribbble.com/shots/13662178-Gradients
diff --git a/react-color-gradients/dist/index.html b/react-color-gradients/dist/index.html
new file mode 100644
index 0000000..55e11f7
--- /dev/null
+++ b/react-color-gradients/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - React Color Gradients</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="root"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/react-color-gradients/dist/script.js b/react-color-gradients/dist/script.js
new file mode 100644
index 0000000..23e16a7
--- /dev/null
+++ b/react-color-gradients/dist/script.js
@@ -0,0 +1,141 @@
+function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);}const AspectRatio = props => {
+  const { ratio = 1 / 1, ...otherProps } = props;
+
+  return /*#__PURE__*/(
+    React.createElement("div", _extends({
+      className: "aspect-ratio",
+      style: { paddingTop: `${100 / ratio}%` } },
+    otherProps)));
+
+
+};
+
+const Gradient = props => {
+  const { angle = 0, from, to } = props;
+
+  return /*#__PURE__*/(
+    React.createElement("div", {
+      style: {
+        backgroundImage: `linear-gradient(${angle}deg, ${from}, ${to})` } }));
+
+
+
+};
+
+const Palette = props => {
+  const { from, to } = props;
+
+  return /*#__PURE__*/(
+    React.createElement("figure", { className: "palette" }, /*#__PURE__*/
+    React.createElement(AspectRatio, null, /*#__PURE__*/
+    React.createElement(Gradient, _extends({ angle: 135 }, props))), /*#__PURE__*/
+
+    React.createElement("figcaption", { className: "palette__caption" },
+    from, " \u2013 ", to)));
+
+
+
+};
+
+const Palettes = props => {
+  const { palettes } = props;
+
+  return /*#__PURE__*/(
+    React.createElement("div", { className: "palettes" },
+    palettes.map((palette) => /*#__PURE__*/
+    React.createElement(Palette, _extends({ key: palette.toString() }, palette)))));
+
+
+
+};
+
+const Grid = props => {
+  return /*#__PURE__*/React.createElement("div", _extends({ className: "grid" }, props));
+};
+
+const App = () => {
+  const palettes = [
+  {
+    from: "#f40076",
+    to: "#df98fa" },
+
+  {
+    from: "#f06966",
+    to: "#fad6a6" },
+
+  {
+    from: "#ff0076",
+    to: "#590fb7" },
+
+  {
+    from: "#9055ff",
+    to: "#13e2da" },
+
+  {
+    from: "#0b63f6",
+    to: "#003cc5" },
+
+  {
+    from: "#d6ff7f",
+    to: "#00b3cc" },
+
+  {
+    from: "#e233ff",
+    to: "#ff6b00" },
+
+  {
+    from: "#df98fa",
+    to: "#9055ff" },
+
+  {
+    from: "#ed7b84",
+    to: "#9055ff" },
+
+  {
+    from: "#402565",
+    to: "#30be96" },
+
+  {
+    from: "#402662",
+    to: "#3900a6" },
+
+  {
+    from: "#f14658",
+    to: "#dc2537" },
+
+  {
+    from: "#f40076",
+    to: "#342711" },
+
+  {
+    from: "#000066",
+    to: "#6699ff" },
+
+  {
+    from: "#cb5eee",
+    to: "#4be1ec" },
+
+  {
+    from: "#fa7cbb",
+    to: "#f14658" },
+
+  {
+    from: "#737dfe",
+    to: "#ffcac9" },
+
+  {
+    from: "#2f80ed",
+    to: "#b2ffda" }];
+
+
+
+  return /*#__PURE__*/(
+    React.createElement("div", { className: "app" }, /*#__PURE__*/
+    React.createElement(Grid, null, /*#__PURE__*/
+    React.createElement(Palettes, { palettes: palettes }))));
+
+
+
+};
+
+ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));
\ No newline at end of file
diff --git a/react-color-gradients/dist/style.css b/react-color-gradients/dist/style.css
new file mode 100644
index 0000000..a7f6835
--- /dev/null
+++ b/react-color-gradients/dist/style.css
@@ -0,0 +1,58 @@
+body {
+  background-color: #e8e0fd;
+  color: #111;
+  display: grid;
+  font-family: Roboto, system-ui;
+  font-size: 16px;
+  line-height: 1.5;
+  margin: 0;
+  min-height: 100vh;
+  place-content: center;
+}
+
+.app {
+  padding: 5vmin;
+}
+
+.grid {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1440px;
+  width: 90vw;
+}
+
+.aspect-ratio {
+  overflow: hidden;
+  padding-top: 100%;
+  position: relative;
+}
+
+.aspect-ratio > * {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.palettes {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 3em;
+}
+
+.palette {
+  box-shadow: 0.25em 0.25em 2em rgba(0, 0, 0, 0.25);
+  border-radius: 0.5em;
+  margin: 0;
+  overflow: hidden;
+}
+
+.palette__caption {
+  background-color: #fff;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 1.5em;
+  text-align: center;
+  text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/react-color-gradients/license.txt b/react-color-gradients/license.txt
new file mode 100644
index 0000000..f4449d1
--- /dev/null
+++ b/react-color-gradients/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Marco Biedermann (https://codepen.io/marcobiedermann/pen/WNGWzYR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/react-color-gradients/src/index.html b/react-color-gradients/src/index.html
new file mode 100644
index 0000000..98499e9
--- /dev/null
+++ b/react-color-gradients/src/index.html
@@ -0,0 +1 @@
+<div id="root"></div>
\ No newline at end of file
diff --git a/react-color-gradients/src/script.babel b/react-color-gradients/src/script.babel
new file mode 100644
index 0000000..0e4ea90
--- /dev/null
+++ b/react-color-gradients/src/script.babel
@@ -0,0 +1,141 @@
+const AspectRatio = (props) => {
+  const { ratio = 1 / 1, ...otherProps } = props;
+
+  return (
+    <div
+      className="aspect-ratio"
+      style={{ paddingTop: `${100 / ratio}%` }}
+      {...otherProps}
+    />
+  );
+};
+
+const Gradient = (props) => {
+  const { angle = 0, from, to } = props;
+
+  return (
+    <div
+      style={{
+        backgroundImage: `linear-gradient(${angle}deg, ${from}, ${to})`
+      }}
+    />
+  );
+};
+
+const Palette = (props) => {
+  const { from, to } = props;
+
+  return (
+    <figure className="palette">
+      <AspectRatio>
+        <Gradient angle={135} {...props} />
+      </AspectRatio>
+      <figcaption className="palette__caption">
+        {from} – {to}
+      </figcaption>
+    </figure>
+  );
+};
+
+const Palettes = (props) => {
+  const { palettes } = props;
+
+  return (
+    <div className="palettes">
+      {palettes.map((palette) => (
+        <Palette key={palette.toString()} {...palette} />
+      ))}
+    </div>
+  );
+};
+
+const Grid = (props) => {
+  return <div className="grid" {...props} />;
+};
+
+const App = () => {
+  const palettes = [
+    {
+      from: "#f40076",
+      to: "#df98fa"
+    },
+    {
+      from: "#f06966",
+      to: "#fad6a6"
+    },
+    {
+      from: "#ff0076",
+      to: "#590fb7"
+    },
+    {
+      from: "#9055ff",
+      to: "#13e2da"
+    },
+    {
+      from: "#0b63f6",
+      to: "#003cc5"
+    },
+    {
+      from: "#d6ff7f",
+      to: "#00b3cc"
+    },
+    {
+      from: "#e233ff",
+      to: "#ff6b00"
+    },
+    {
+      from: "#df98fa",
+      to: "#9055ff"
+    },
+    {
+      from: "#ed7b84",
+      to: "#9055ff"
+    },
+    {
+      from: "#402565",
+      to: "#30be96"
+    },
+    {
+      from: "#402662",
+      to: "#3900a6"
+    },
+    {
+      from: "#f14658",
+      to: "#dc2537"
+    },
+    {
+      from: "#f40076",
+      to: "#342711"
+    },
+    {
+      from: "#000066",
+      to: "#6699ff"
+    },
+    {
+      from: "#cb5eee",
+      to: "#4be1ec"
+    },
+    {
+      from: "#fa7cbb",
+      to: "#f14658"
+    },
+    {
+      from: "#737dfe",
+      to: "#ffcac9"
+    },
+    {
+      from: "#2f80ed",
+      to: "#b2ffda"
+    }
+  ];
+
+  return (
+    <div className="app">
+      <Grid>
+        <Palettes palettes={palettes} />
+      </Grid>
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/react-color-gradients/src/style.css b/react-color-gradients/src/style.css
new file mode 100644
index 0000000..a7f6835
--- /dev/null
+++ b/react-color-gradients/src/style.css
@@ -0,0 +1,58 @@
+body {
+  background-color: #e8e0fd;
+  color: #111;
+  display: grid;
+  font-family: Roboto, system-ui;
+  font-size: 16px;
+  line-height: 1.5;
+  margin: 0;
+  min-height: 100vh;
+  place-content: center;
+}
+
+.app {
+  padding: 5vmin;
+}
+
+.grid {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1440px;
+  width: 90vw;
+}
+
+.aspect-ratio {
+  overflow: hidden;
+  padding-top: 100%;
+  position: relative;
+}
+
+.aspect-ratio > * {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.palettes {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 3em;
+}
+
+.palette {
+  box-shadow: 0.25em 0.25em 2em rgba(0, 0, 0, 0.25);
+  border-radius: 0.5em;
+  margin: 0;
+  overflow: hidden;
+}
+
+.palette__caption {
+  background-color: #fff;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 1.5em;
+  text-align: center;
+  text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/README.markdown b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/README.markdown
new file mode 100644
index 0000000..50b839f
--- /dev/null
+++ b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/README.markdown
@@ -0,0 +1,5 @@
+# React Number Range Slider w/ GSAP (Debunking Figma Reels – Design to Dev #1)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jh3y/pen/XWzmGad](https://codepen.io/jh3y/pen/XWzmGad).
+
+Created from this Figma Reel on Instagram: https://www.instagram.com/p/CZD5tcIlzp5/
diff --git a/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/dist/index.html b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/dist/index.html
new file mode 100644
index 0000000..4d90c2c
--- /dev/null
+++ b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - React Number Range Slider w/ GSAP (Debunking Figma Reels – Design to Dev #1)</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="app"></div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/dist/script.js b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/dist/script.js
new file mode 100644
index 0000000..f26e493
--- /dev/null
+++ b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/dist/script.js
@@ -0,0 +1,198 @@
+import React from 'https://cdn.skypack.dev/react';
+import { render } from 'https://cdn.skypack.dev/react-dom';
+import gsap from 'https://cdn.skypack.dev/gsap';
+import { GUI } from 'https://cdn.skypack.dev/dat.gui';
+
+const ROOT_NODE = document.querySelector('#app');
+
+const getDigitTimeline = (
+digit,
+digitIndex,
+range,
+sliderRef,
+liveRegionRef) =>
+{
+  const TL = gsap.timeline({
+    paused: true });
+
+  const DIGITS = gsap.utils.toArray(digit.children);
+  // Work out if it's a single, tne, hundred, etc.
+  const COEFF = Math.pow(10, `${range}`.length - (digitIndex + 1));
+  const REPEAT = Math.pow(10, digitIndex);
+
+  const PADDED_DIGITS = [...DIGITS, ...DIGITS, ...DIGITS];
+  for (let i = 0; i < PADDED_DIGITS.length; i++) {
+    const DIGIT = PADDED_DIGITS[i];
+    const DIGI_TIMELINE = gsap.
+    timeline().
+    set(DIGIT, {
+      yPercent: 0 }).
+
+    to(DIGIT, {
+      yPercent: 100,
+      delay: i * COEFF,
+      duration: 1,
+      onComplete: () => {
+        liveRegionRef.current.innerText = sliderRef.current.value;
+      } }).
+
+    to(DIGIT, {
+      delay: COEFF - 1,
+      yPercent: 200,
+      duration: 1,
+      clearProps: 'all' });
+
+    TL.add(DIGI_TIMELINE, 0);
+  }
+  // Return a timeline that animates through the repeating window.
+  // Let the main timeline scrub it.
+  const TIME_WINDOW = gsap.timeline().fromTo(
+  TL,
+  {
+    totalTime: 10 * COEFF },
+
+  {
+    totalTime: 20 * COEFF,
+    repeat: REPEAT,
+    ease: 'none',
+    duration: COEFF * 10 });
+
+
+
+  return TIME_WINDOW;
+};
+
+const Ranger = ({ defaultValue = 0, max = 100, min = 0, step = 1 }) => {
+  const digits = React.useRef(null);
+  const sliderRef = React.useRef(null);
+  const liveRegionRef = React.useRef(null);
+  const timeline = React.useRef(gsap.timeline({ paused: true }));
+
+  React.useEffect(() => {
+    // Want to set up a master timeline that we scrub with the range slider
+    if (timeline.current && digits.current) {
+      timeline.current.kill();
+      timeline.current = gsap.timeline({ paused: true });
+      // Need to iterate over the digits in reverse and create an animation for them.
+      // Iterate over digits.current.children in reverse.
+      for (let i = digits.current.children.length - 1; i >= 0; i--) {
+        const CURRENT_DIGIT = digits.current.children[i];
+        const digitTimeline = getDigitTimeline(
+        CURRENT_DIGIT,
+        i,
+        max,
+        sliderRef,
+        liveRegionRef);
+
+        timeline.current.add(digitTimeline, 0);
+        // Chained progress to show the initial state.
+        timeline.current.progress(1).progress(0);
+        /**
+         * Always +1 to the slot you want to go to.
+         * Range is (min + 1) -> (max + 1)
+         */
+        timeline.current.totalTime(defaultValue + 1);
+        // Set the slider value to make sure
+        sliderRef.current.value = defaultValue;
+      }
+    }
+  }, [min, max, defaultValue]);
+
+  const scrub = e => {
+    gsap.to(timeline.current, {
+      totalTime: parseInt(e.target.value, 10) + 1,
+      duration: 0.5 });
+
+  };
+
+  return /*#__PURE__*/(
+    React.createElement("div", { className: "ranger" }, /*#__PURE__*/
+    React.createElement("label", { htmlFor: "ranger" }, /*#__PURE__*/
+    React.createElement("span", { "aria-live": "polite", role: "region", ref: liveRegionRef, className: "sr-only" }), /*#__PURE__*/
+    React.createElement("span", { "aria-hidden": "true", ref: digits, className: "ranger__digits" },
+    max.
+    toString().
+    split('').
+    map((d) => /*#__PURE__*/
+    React.createElement("span", { className: "ranger__digit" },
+    new Array(10).fill().map((c, index) => /*#__PURE__*/
+    React.createElement("span", null, index)))))), /*#__PURE__*/
+
+
+
+
+
+    React.createElement("input", {
+      ref: sliderRef,
+      id: "ranger",
+      type: "range",
+      className: "ranger__slider",
+      min: min,
+      step: step,
+      max: max,
+      defaultValue: defaultValue,
+      onChange: scrub })));
+
+
+
+};
+
+const App = () => {
+  const CONFIG = {
+    min: 0,
+    max: 5000,
+    step: 1,
+    defaultValue: 1010,
+    hue: 260 };
+
+
+  const [max, setMax] = React.useState(CONFIG.max);
+  const [min, setMin] = React.useState(CONFIG.min);
+  const [step, setStep] = React.useState(CONFIG.step);
+  const [defaultValue, setDefaultValue] = React.useState(CONFIG.defaultValue);
+  const minController = React.useRef(null);
+  const maxController = React.useRef(null);
+  const stepController = React.useRef(null);
+  const defaultValueController = React.useRef(null);
+
+  React.useEffect(() => {
+    const UPDATE = () => {
+      minController.current.max(CONFIG.max - 1);
+      maxController.current.min(CONFIG.min + 1);
+      stepController.current.max(CONFIG.max);
+      defaultValueController.current.min(CONFIG.min);
+      defaultValueController.current.max(CONFIG.max);
+      setMin(CONFIG.min);
+      setMax(CONFIG.max);
+      setStep(CONFIG.step);
+      setDefaultValue(CONFIG.defaultValue);
+    };
+    // Set up the controller.
+    const CTRL = new GUI();
+    minController.current = CTRL.add(CONFIG, 'min', 0, CONFIG.max - 1, 1).
+    name('Min').
+    onChange(UPDATE);
+    maxController.current = CTRL.add(CONFIG, 'max', CONFIG.min + 1, 10000, 1).
+    name('Max').
+    onChange(UPDATE);
+    stepController.current = CTRL.add(CONFIG, 'step', 1, CONFIG.max, 1).
+    name('Step').
+    onChange(UPDATE);
+    defaultValueController.current = CTRL.add(
+    CONFIG,
+    'defaultValue',
+    CONFIG.min,
+    CONFIG.max,
+    1).
+
+    name('Default Value').
+    onChange(UPDATE);
+    CTRL.add(CONFIG, 'hue', 0, 359, 1).
+    name('Hue').
+    onChange(() => document.documentElement.style.setProperty('--hue', CONFIG.hue));
+  }, []);
+
+  return /*#__PURE__*/React.createElement(Ranger, { defaultValue: defaultValue, min: min, step: step, max: max });
+};
+
+render( /*#__PURE__*/React.createElement(App, null), ROOT_NODE);
\ No newline at end of file
diff --git a/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/dist/style.css b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/dist/style.css
new file mode 100644
index 0000000..54e3272
--- /dev/null
+++ b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/dist/style.css
@@ -0,0 +1,129 @@
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+body {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}
+:root {
+  --hue: 260;
+  --track: #a6a6a6;
+  --thumb-default: hsl(var(--hue), 80%, 80%);
+  --thumb-hover: hsl(var(--hue), 80%, 85%);
+  --thumb-active: hsl(var(--hue), 80%, 70%);
+  --thumb: var(--thumb-default);
+  --text: #262626;
+  --thumb-border: max(0.5vmin, 5px);
+  --thumb-size: max(5vmin, 44px);
+  --track-width: max(300px, 200%);
+  --track-height: max(2vmin, 1rem);
+  --offset: max(2vmin, 1rem);
+  --font-size: max(12vmin, 6rem);
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+.ranger {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.ranger__digits {
+  display: flex;
+  justify-content: center;
+  gap: 0.1vmin;
+  align-items: center;
+}
+.ranger__digit {
+  height: var(--font-size);
+  width: calc(var(--font-size) * 0.66);
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
+}
+.ranger__digit > span {
+  height: 100%;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  font-size: var(--font-size);
+  font-weight: bold;
+  color: var(--text);
+  font-family: sans-serif;
+}
+.ranger__slider {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  width: var(--track-width);
+  height: var(--track-height);
+  background: var(--track);
+  position: absolute;
+  left: 50%;
+  top: 150%;
+  transform: translate(-50%, 0);
+  border-radius: calc(var(--track-height) * 0.5);
+  outline-color: var(--thumb);
+  outline-offset: var(--offset);
+}
+@media (max-width: 768px) {
+  .ranger__slider {
+    max-width: 300px;
+  }
+}
+.ranger__slider:hover {
+  --thumb-scale: 1.1;
+  --thumb: var(--thumb-hover);
+  --cursor: -webkit-grab;
+}
+.ranger__slider:active {
+  --thumb-scale: 0.9;
+  --thumb: var(--thumb-active);
+  --cursor: -webkit-grabbing;
+}
+.ranger__slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+          appearance: none;
+  border-radius: 50%;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  background: var(--thumb, var(--thumb-default));
+  cursor: pointer;
+  cursor: var(--cursor, pointer);
+  border-style: solid;
+  border-width: var(--thumb-border);
+  border-color: var(--text);
+  -webkit-transition: transform 0.1s ease-out, background 0.1s ease-out;
+  transition: transform 0.1s ease-out, background 0.1s ease-out;
+  transform: scale(var(--thumb-scale, 1));
+}
+.ranger__slider::-moz-range-thumb {
+  border-radius: 50%;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  background: var(--thumb, var(--thumb-default));
+  cursor: pointer;
+  cursor: var(--cursor, pointer);
+  border-style: solid;
+  border-width: var(--thumb-border);
+  border-color: var(--text);
+  -moz-transition: transform 0.1s ease-out, background 0.1s ease-out;
+  transition: transform 0.1s ease-out, background 0.1s ease-out;
+  transform: scale(var(--thumb-scale, 1));
+}
\ No newline at end of file
diff --git a/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/license.txt b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/license.txt
new file mode 100644
index 0000000..056536a
--- /dev/null
+++ b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Jhey (https://codepen.io/jh3y/pen/XWzmGad)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/src/index.pug b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/src/index.pug
new file mode 100644
index 0000000..4b9f0fe
--- /dev/null
+++ b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/src/index.pug
@@ -0,0 +1 @@
+#app
\ No newline at end of file
diff --git a/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/src/script.babel b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/src/script.babel
new file mode 100644
index 0000000..d8115e0
--- /dev/null
+++ b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/src/script.babel
@@ -0,0 +1,198 @@
+import React from 'https://cdn.skypack.dev/react'
+import { render } from 'https://cdn.skypack.dev/react-dom'
+import gsap from 'https://cdn.skypack.dev/gsap'
+import { GUI } from 'https://cdn.skypack.dev/dat.gui'
+
+const ROOT_NODE = document.querySelector('#app')
+
+const getDigitTimeline = (
+  digit,
+  digitIndex,
+  range,
+  sliderRef,
+  liveRegionRef
+) => {
+  const TL = gsap.timeline({
+    paused: true,
+  })
+  const DIGITS = gsap.utils.toArray(digit.children)
+  // Work out if it's a single, tne, hundred, etc.
+  const COEFF = Math.pow(10, `${range}`.length - (digitIndex + 1))
+  const REPEAT = Math.pow(10, digitIndex)
+
+  const PADDED_DIGITS = [...DIGITS, ...DIGITS, ...DIGITS]
+  for (let i = 0; i < PADDED_DIGITS.length; i++) {
+    const DIGIT = PADDED_DIGITS[i]
+    const DIGI_TIMELINE = gsap
+      .timeline()
+      .set(DIGIT, {
+        yPercent: 0,
+      })
+      .to(DIGIT, {
+        yPercent: 100,
+        delay: i * COEFF,
+        duration: 1,
+        onComplete: () => {
+          liveRegionRef.current.innerText = sliderRef.current.value
+        },
+      })
+      .to(DIGIT, {
+        delay: COEFF - 1,
+        yPercent: 200,
+        duration: 1,
+        clearProps: 'all',
+      })
+    TL.add(DIGI_TIMELINE, 0)
+  }
+  // Return a timeline that animates through the repeating window.
+  // Let the main timeline scrub it.
+  const TIME_WINDOW = gsap.timeline().fromTo(
+    TL,
+    {
+      totalTime: 10 * COEFF,
+    },
+    {
+      totalTime: 20 * COEFF,
+      repeat: REPEAT,
+      ease: 'none',
+      duration: COEFF * 10,
+    }
+  )
+
+  return TIME_WINDOW
+}
+
+const Ranger = ({ defaultValue = 0, max = 100, min = 0, step = 1 }) => {
+  const digits = React.useRef(null)
+  const sliderRef = React.useRef(null)
+  const liveRegionRef = React.useRef(null)
+  const timeline = React.useRef(gsap.timeline({ paused: true }))
+
+  React.useEffect(() => {
+    // Want to set up a master timeline that we scrub with the range slider
+    if (timeline.current && digits.current) {
+      timeline.current.kill()
+      timeline.current = gsap.timeline({ paused: true })
+      // Need to iterate over the digits in reverse and create an animation for them.
+      // Iterate over digits.current.children in reverse.
+      for (let i = digits.current.children.length - 1; i >= 0; i--) {
+        const CURRENT_DIGIT = digits.current.children[i]
+        const digitTimeline = getDigitTimeline(
+          CURRENT_DIGIT,
+          i,
+          max,
+          sliderRef,
+          liveRegionRef
+        )
+        timeline.current.add(digitTimeline, 0)
+        // Chained progress to show the initial state.
+        timeline.current.progress(1).progress(0)
+        /**
+         * Always +1 to the slot you want to go to.
+         * Range is (min + 1) -> (max + 1)
+         */
+        timeline.current.totalTime(defaultValue + 1)
+        // Set the slider value to make sure
+        sliderRef.current.value = defaultValue
+      }
+    }
+  }, [min, max, defaultValue])
+
+  const scrub = e => {
+    gsap.to(timeline.current, {
+      totalTime: parseInt(e.target.value, 10) + 1,
+      duration: 0.5,
+    })
+  }
+
+  return (
+    <div className="ranger">
+      <label htmlFor="ranger">
+        <span aria-live="polite" role="region" ref={liveRegionRef} className="sr-only" />
+        <span aria-hidden="true" ref={digits} className="ranger__digits">
+          {max
+            .toString()
+            .split('')
+            .map(d => (
+              <span className="ranger__digit">
+                {new Array(10).fill().map((c, index) => (
+                  <span>{index}</span>
+                ))}
+              </span>
+            ))}
+        </span>
+      </label>
+      <input
+        ref={sliderRef}
+        id="ranger"
+        type="range"
+        className="ranger__slider"
+        min={min}
+        step={step}
+        max={max}
+        defaultValue={defaultValue}
+        onChange={scrub}
+      />
+    </div>
+  )
+}
+
+const App = () => {
+  const CONFIG = {
+    min: 0,
+    max: 5000,
+    step: 1,
+    defaultValue: 1010,
+    hue: 260,
+  }
+
+  const [max, setMax] = React.useState(CONFIG.max)
+  const [min, setMin] = React.useState(CONFIG.min)
+  const [step, setStep] = React.useState(CONFIG.step)
+  const [defaultValue, setDefaultValue] = React.useState(CONFIG.defaultValue)
+  const minController = React.useRef(null)
+  const maxController = React.useRef(null)
+  const stepController = React.useRef(null)
+  const defaultValueController = React.useRef(null)
+
+  React.useEffect(() => {
+    const UPDATE = () => {
+      minController.current.max(CONFIG.max - 1)
+      maxController.current.min(CONFIG.min + 1)
+      stepController.current.max(CONFIG.max)
+      defaultValueController.current.min(CONFIG.min)
+      defaultValueController.current.max(CONFIG.max)
+      setMin(CONFIG.min)
+      setMax(CONFIG.max)
+      setStep(CONFIG.step)
+      setDefaultValue(CONFIG.defaultValue)
+    }
+    // Set up the controller.
+    const CTRL = new GUI()
+    minController.current = CTRL.add(CONFIG, 'min', 0, CONFIG.max - 1, 1)
+      .name('Min')
+      .onChange(UPDATE)
+    maxController.current = CTRL.add(CONFIG, 'max', CONFIG.min + 1, 10000, 1)
+      .name('Max')
+      .onChange(UPDATE)
+    stepController.current = CTRL.add(CONFIG, 'step', 1, CONFIG.max, 1)
+      .name('Step')
+      .onChange(UPDATE)
+    defaultValueController.current = CTRL.add(
+      CONFIG,
+      'defaultValue',
+      CONFIG.min,
+      CONFIG.max,
+      1
+    )
+      .name('Default Value')
+      .onChange(UPDATE)
+    CTRL.add(CONFIG, 'hue', 0, 359, 1)
+      .name('Hue')
+      .onChange(() => document.documentElement.style.setProperty('--hue', CONFIG.hue))
+  }, [])
+
+  return <Ranger defaultValue={defaultValue} min={min} step={step} max={max} />
+}
+
+render(<App />, ROOT_NODE)
diff --git a/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/src/style.styl b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/src/style.styl
new file mode 100644
index 0000000..b5a33a1
--- /dev/null
+++ b/react-number-range-slider-w-gsap-debunking-figma-reels-design-to-dev-1/src/style.styl
@@ -0,0 +1,121 @@
+*
+*:after
+*:before
+  box-sizing border-box
+
+body
+  min-height 100vh
+  display grid
+  place-items center
+  overflow hidden
+
+:root
+  --hue 260
+  --track hsl(0, 0%, 65%)
+  --thumb-default 'hsl(%s, 80%, 80%)' % var(--hue)
+  --thumb-hover 'hsl(%s, 80%, 85%)' % var(--hue)
+  --thumb-active 'hsl(%s, 80%, 70%)' % var(--hue)
+  --thumb var(--thumb-default)
+  --text hsl(0, 0%, 15%)
+  --thumb-border 'max(%s, 5px)' % 0.5vmin
+  --thumb-size 'max(%s, 44px)' % 5vmin
+  --track-width 'max(%s, 200%)' % 300px
+  --track-height 'max(%s, 1rem)' % 2vmin
+  --offset 'max(%s, 1rem)' % 2vmin
+  --font-size 'max(%s, 6rem)' % 12vmin
+
+.sr-only
+  position absolute
+  width 1px
+  height 1px
+  padding 0
+  margin -1px
+  overflow hidden
+  clip rect(0, 0, 0, 0)
+  white-space nowrap
+  border-width 0
+
+.ranger
+  display flex
+  flex-direction column
+  position relative
+
+  &__digits
+    display flex
+    justify-content center
+    gap 0.1vmin
+    align-items center
+
+  &__digit
+    height var(--font-size)
+    width calc(var(--font-size) * 0.66)
+    display inline-flex
+    position relative
+    overflow hidden
+
+    & > span
+      height 100%
+      width 100%
+      display inline-flex
+      align-items center
+      justify-content center
+      position absolute
+      bottom 100%
+      left 0
+      font-size var(--font-size)
+      font-weight bold
+      color var(--text)
+      font-family sans-serif
+
+  &__slider
+    appearance none
+    width var(--track-width)
+    height var(--track-height)
+    background var(--track)
+    position absolute
+    left 50%
+    top 150%
+    transform translate(-50%, 0)
+    border-radius calc(var(--track-height) * 0.5)
+    outline-color var(--thumb)
+    outline-offset var(--offset)
+
+    @media(max-width: 768px)
+      max-width 300px
+
+    &:hover
+      --thumb-scale 1.1
+      --thumb var(--thumb-hover)
+      --cursor -webkit-grab
+
+    &:active
+      --thumb-scale 0.9
+      --thumb var(--thumb-active)
+      --cursor -webkit-grabbing
+
+    &::-webkit-slider-thumb
+      appearance none
+      border-radius 50%
+      width var(--thumb-size)
+      height var(--thumb-size)
+      background var(--thumb, var(--thumb-default))
+      cursor pointer
+      cursor var(--cursor, pointer)
+      border-style solid
+      border-width var(--thumb-border)
+      border-color var(--text)
+      transition transform 0.1s ease-out, background 0.1s ease-out
+      transform scale(var(--thumb-scale, 1))
+
+    &::-moz-range-thumb
+      border-radius 50%
+      width var(--thumb-size)
+      height var(--thumb-size)
+      background var(--thumb, var(--thumb-default))
+      cursor pointer
+      cursor var(--cursor, pointer)
+      border-style solid
+      border-width var(--thumb-border)
+      border-color var(--text)
+      transition transform 0.1s ease-out, background 0.1s ease-out
+      transform scale(var(--thumb-scale, 1))
\ No newline at end of file
diff --git a/reactive-synth/README.markdown b/reactive-synth/README.markdown
new file mode 100644
index 0000000..53dfb1d
--- /dev/null
+++ b/reactive-synth/README.markdown
@@ -0,0 +1,5 @@
+# Reactive Synth
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/lerida/pen/bGwzVvo](https://codepen.io/lerida/pen/bGwzVvo).
+
+
diff --git a/reactive-synth/dist/index.html b/reactive-synth/dist/index.html
new file mode 100644
index 0000000..d51ea95
--- /dev/null
+++ b/reactive-synth/dist/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Reactive Synth</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- 
+  Developed with 💗 by Alex Lerida
+  ➡ Twitter: @xlerida
+  ➡ Dribbble: @lerida
+-->
+
+<div id="app"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js'></script>
+<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/reactive-synth/dist/script.js b/reactive-synth/dist/script.js
new file mode 100644
index 0000000..cbfbc16
--- /dev/null
+++ b/reactive-synth/dist/script.js
@@ -0,0 +1,622 @@
+function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}class Synth extends React.Component {
+  constructor(props) {
+    super(props);_defineProperty(this, "handleKey",
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    e => {
+      let data = {
+        event: e.type,
+        target: "",
+        key: "" };
+
+
+      if (data.event == "keypress") {
+        const keys = document.querySelectorAll(".key");
+        keys.forEach(key => {
+          if (key.getAttribute("data-key") == e.key.toLowerCase())
+          data.target = key;
+        });
+        data.key = e.key;
+      } else {
+        data.target = e.currentTarget;
+        data.key = data.target.getAttribute("data-key");
+      }
+
+      this.playSound(data);
+      this.animate(data);
+    });_defineProperty(this, "playSound",
+
+    ({ key }) => {
+      Object.entries(this.state.keys).forEach(entry => {
+        if (entry[0] == key.toLowerCase()) {
+          const audio = new Audio(entry[1]);
+          audio.play();
+        }
+      });
+    });_defineProperty(this, "animate",
+
+    ({ target }) => {
+      const tl = gsap.timeline();
+      try {
+        tl.to(target, {
+          duration: 0.18,
+          ease: "power3.out",
+          scale: 0.95,
+          transformOrigin: "top" });
+
+
+        tl.to(target, {
+          duration: 0.18,
+          ease: "power3.out",
+          scale: 1,
+          transformOrigin: "top" });
+
+
+        const tl2 = gsap.timeline();
+
+        tl2.to(".speakers circle", {
+          duration: 0.18,
+          ease: "back.out",
+          scale: 1.15,
+          transformOrigin: "center" });
+
+
+        tl2.to(".speakers circle", {
+          duration: 0.3,
+          ease: "back.out",
+          scale: 1,
+          transformOrigin: "center" });
+
+      } catch {}
+    });_defineProperty(this, "handlePreset",
+
+    e => {
+      if (e) {
+        const data = {
+          target: e.currentTarget,
+          presets: e.currentTarget.parentElement.querySelectorAll(".preset"),
+          paths: e.currentTarget.querySelectorAll("path"),
+          preset: e.currentTarget.getAttribute("data-preset") };
+
+
+        Object.entries(this.state.presets).forEach(entry => {
+          if (entry[0] == data.preset) {
+            data.paths.forEach(path => {
+              gsap.set(path, { fill: "#FF79E6", stroke: "white" });
+              try {
+                gsap.set(".top", { fill: "white" });
+              } catch {}
+            });
+          } else {
+            data.presets.forEach(preset => {
+              if (preset.getAttribute("data-preset") == entry[0]) {
+                preset.querySelectorAll("path").forEach(path => {
+                  gsap.set(path, {
+                    fill: "white",
+                    stroke: "#FF79E6" });
+
+                });
+              }
+            });
+          }
+
+          data.presets.forEach(preset => {
+            gsap.set(data.path, { fill: "white" });
+          });
+        });
+
+        if (data.preset == "piano") this.togglePiano();else
+        if (data.preset == "guitar") this.toggleGuitar();else
+        if (data.preset == "drums") this.toggleDrums();
+      } else this.togglePiano();
+    });this.state = { presets: { piano: true, guitar: false, drums: false }, keys: { q: "", 2: "", w: "", 3: "", e: "", r: "", 4: "", t: "", 5: "", y: "", u: "", i: "", 6: "" } };this.handlePreset = this.handlePreset.bind(this);}
+
+  togglePiano() {
+    this.state.keys.q =
+    "https://raw.githubusercontent.com/xLerida/synth/master/piano-c5.mp3";
+    this.state.keys["2"] =
+    "https://raw.githubusercontent.com/xLerida/synth/master/piano-c5b.mp3";
+    this.state.keys.w =
+    "https://raw.githubusercontent.com/xLerida/synth/master/piano-d5.mp3";
+    this.state.keys["3"] =
+    "https://raw.githubusercontent.com/xLerida/synth/master/piano-d5b.mp3";
+    this.state.keys.e =
+    "https://raw.githubusercontent.com/xLerida/synth/master/piano-e5.mp3";
+    this.state.keys.r =
+    "https://raw.githubusercontent.com/xLerida/synth/master/piano-f5.mp3";
+    this.state.keys["4"] =
+    "https://raw.githubusercontent.com/xLerida/synth/master/piano-f5b.mp3";
+    this.state.keys.t =
+    "https://raw.githubusercontent.com/xLerida/synth/master/piano-g5.mp3";
+    this.state.keys["5"] =
+    "https://raw.githubusercontent.com/xLerida/synth/master/piano-g5b.mp3";
+    this.state.keys.y =
+    "https://raw.githubusercontent.com/xLerida/synth/master/piano-a5.mp3";
+    this.state.keys["6"] =
+    "https://raw.githubusercontent.com/xLerida/synth/master/piano-a5b.mp3";
+    this.state.keys.u =
+    "https://raw.githubusercontent.com/xLerida/synth/master/piano-b5.mp3";
+    this.state.keys.i =
+    "https://raw.githubusercontent.com/xLerida/synth/master/piano-c6.mp3";
+  }
+
+  toggleGuitar() {
+    this.state.keys.q =
+    "https://raw.githubusercontent.com/xLerida/synth/master/guitar-c5.mp3";
+    this.state.keys["2"] =
+    "https://raw.githubusercontent.com/xLerida/synth/master/guitar-c5b.mp3";
+    this.state.keys.w =
+    "https://raw.githubusercontent.com/xLerida/synth/master/guitar-d5.mp3";
+    this.state.keys["3"] =
+    "https://raw.githubusercontent.com/xLerida/synth/master/guitar-d5b.mp3";
+    this.state.keys.e =
+    "https://raw.githubusercontent.com/xLerida/synth/master/guitar-e5.mp3";
+    this.state.keys.r =
+    "https://raw.githubusercontent.com/xLerida/synth/master/guitar-f5.mp3";
+    this.state.keys["4"] =
+    "https://raw.githubusercontent.com/xLerida/synth/master/guitar-f5b.mp3";
+    this.state.keys.t =
+    "https://raw.githubusercontent.com/xLerida/synth/master/guitar-g5.mp3";
+    this.state.keys["5"] =
+    "https://raw.githubusercontent.com/xLerida/synth/master/guitar-g5b.mp3";
+    this.state.keys.y =
+    "https://raw.githubusercontent.com/xLerida/synth/master/guitar-a5.mp3";
+    this.state.keys["6"] =
+    "https://raw.githubusercontent.com/xLerida/synth/master/guitar-a5b.mp3";
+    this.state.keys.u =
+    "https://raw.githubusercontent.com/xLerida/synth/master/guitar-b5.mp3";
+    this.state.keys.i =
+    "https://raw.githubusercontent.com/xLerida/synth/master/guitar-c6.mp3";
+  }
+
+  toggleDrums() {
+    this.state.keys.q =
+    "https://raw.githubusercontent.com/xLerida/synth/master/drums-snare.mp3";
+    this.state.keys["2"] =
+    "https://raw.githubusercontent.com/xLerida/synth/master/drums-kick.mp3";
+    this.state.keys.w =
+    "https://raw.githubusercontent.com/xLerida/synth/master/drums-808.mp3";
+    this.state.keys["3"] =
+    "https://raw.githubusercontent.com/xLerida/synth/master/drum-clap.mp3";
+    this.state.keys.e =
+    "https://raw.githubusercontent.com/xLerida/synth/master/drums-crash.mp3";
+    this.state.keys.r =
+    "https://raw.githubusercontent.com/xLerida/synth/master/drums-hat-c.mp3";
+    this.state.keys["4"] =
+    "https://raw.githubusercontent.com/xLerida/synth/master/drums-hat-o.mp3";
+  }
+
+  componentDidMount() {
+    this.togglePiano();
+
+    window.addEventListener("keypress", e => {
+      this.handleKey(e);
+    });
+  }
+
+  render() {
+    return /*#__PURE__*/(
+      React.createElement("svg", { className: "Synth", viewBox: "0 0 401 203.6" }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "base st0",
+        d: "M388.6,192.1H12.4c-6.5,0-11.9-5.3-11.9-11.9V34.5c0-18.8,15.2-34,34-34l332.1,0 c18.8,0,34,15.2,34,34v145.8C400.5,186.8,395.2,192.1,388.6,192.1z" }), /*#__PURE__*/
+
+
+      React.createElement("path", {
+        className: "st1",
+        d: "M378.3,192.1H21.5c-1.4,0-2.6-1.2-2.6-2.6v-79.7c0-6.6,5.4-12,12-12h338.1c6.6,0,12,5.4,12,12v79.7 C380.9,191,379.8,192.1,378.3,192.1z" }), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "speakers" }, /*#__PURE__*/
+      React.createElement("circle", { className: "st2", cx: "52.8", cy: "48.2", r: "32.9" }), /*#__PURE__*/
+      React.createElement("circle", { className: "st2", cx: "349.5", cy: "48.2", r: "32.9" })), /*#__PURE__*/
+
+      React.createElement("g", { className: "keys" }, /*#__PURE__*/
+      React.createElement("g", { className: "key", "data-key": "i", onClick: this.handleKey }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st3",
+        d: "M335.3,98.3H370c5.8,0,10.4,4.7,10.4,10.4v85.8c0,4.7-3.8,8.5-8.5,8.5h-28.1c-4.7,0-8.5-3.8-8.5-8.5V98.3z" }), /*#__PURE__*/
+
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("path", { className: "st2", d: "M359.2,186.1h-2.8v-14.9h2.8V186.1z" }))), /*#__PURE__*/
+
+
+      React.createElement("path", {
+        className: "st4",
+        d: "M379.6,132.1c0,0,0.4-26.9-18.6-26.9h-25v-6.4h33.7c5.5,0,9.9,4.4,9.9,9.9V132.1z" }), /*#__PURE__*/
+
+      React.createElement("path", {
+        className: "st4",
+        d: "M361.8,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C379.7,184.4,375,202.1,361.8,202.3z" })), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "key", "data-key": "u", onClick: this.handleKey }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st3",
+        d: "M335.2,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z" }), /*#__PURE__*/
+
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st2",
+        d: "M315.5,183.2v-12h2.8v13.1c-1.4,1.4-3.5,2.2-6.2,2.2c-2,0-3.5-0.5-4.6-1.5c-1.1-1-1.6-2.4-1.6-4.4v-9.4h2.8 v7.8c0,1.9,0.3,3.2,0.8,3.9c0.5,0.7,1.5,1.1,3,1.1C313.7,184,314.7,183.7,315.5,183.2z" }))), /*#__PURE__*/
+
+
+
+
+      React.createElement("rect", { x: "307.4", y: "98.8", className: "st4", width: "27", height: "6.4" }), /*#__PURE__*/
+      React.createElement("path", {
+        className: "st4",
+        d: "M316.6,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C334.5,184.4,329.8,202.2,316.6,202.3z" })), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "key", "data-key": "y", onClick: this.handleKey }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st3",
+        d: "M290.1,98.3H245v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z" }), /*#__PURE__*/
+
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st2",
+        d: "M269,186.1h-2.8v-6.1l-5.6-8.9h3.1l3.9,6.4l3.9-6.4h3.1l-5.7,8.9V186.1z" }))), /*#__PURE__*/
+
+
+
+      React.createElement("rect", {
+        x: "262.3",
+        y: "98.8",
+        className: "st4",
+        width: "10.4",
+        height: "6.4" }), /*#__PURE__*/
+
+      React.createElement("path", {
+        class: "st4",
+        d: "M271.5,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C289.4,184.4,284.7,202.2,271.5,202.3z" })), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "key", "data-key": "t", onClick: this.handleKey }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st3",
+        d: "M245,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z" }), /*#__PURE__*/
+
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st2",
+        d: "M223.7,186.1h-2.8v-12.4h-4.4v-2.5h11.6v2.5h-4.4V186.1z" }))), /*#__PURE__*/
+
+
+
+      React.createElement("rect", {
+        x: "216.2",
+        y: "98.8",
+        className: "st4",
+        width: "11.4",
+        height: "6.4" }), /*#__PURE__*/
+
+      React.createElement("path", {
+        className: "st4",
+        d: "M226.3,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C244.3,184.4,239.5,202.2,226.3,202.3z" })), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "key", "data-key": "r", onClick: this.handleKey }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st3",
+        d: "M199.9,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z" }), /*#__PURE__*/
+
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st2",
+        d: "M184,186.1h-3.9l-5.6-5.6h-0.3v5.6h-2.8v-14.9h3.1c4.5,0,6.7,1.5,6.7,4.6c0,2.4-1.2,3.9-3.6,4.5L184,186.1z M174.2,178h0.9c2.1,0,3.1-0.7,3.1-2.2c0-1.4-1-2.1-3-2.1h-1V178z" }))), /*#__PURE__*/
+
+
+
+
+      React.createElement("rect", { x: "155.6", y: "98.8", className: "st4", width: "26", height: "6.4" }), /*#__PURE__*/
+      React.createElement("path", {
+        class: "st4",
+        d: "M181.2,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C199.1,184.4,194.4,202.2,181.2,202.3z" })), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "key", "data-key": "e", onClick: this.handleKey }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st3",
+        d: "M154.8,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z" }), /*#__PURE__*/
+
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st2",
+        d: "M137.2,186.1h-9.5v-14.9h8.9v2.5h-6.1v3.2h4.9v2.5h-4.9v4.1h6.7V186.1z" }))), /*#__PURE__*/
+
+
+
+      React.createElement("rect", { x: "127", y: "98.8", className: "st4", width: "26.9", height: "6.4" }), /*#__PURE__*/
+      React.createElement("path", {
+        className: "st4",
+        d: "M136.1,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C154,184.4,149.3,202.2,136.1,202.3z" })), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "key", "data-key": "w", onClick: this.handleKey }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st3",
+        d: "M109.6,98.3H64.5v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z" }), /*#__PURE__*/
+
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st2",
+        d: "M91.8,186.8l-4.6-10l-4.5,10l-6.3-15.6h3.1l3.4,9.1l4.4-9.8l4.4,9.7l3.4-9.1H98L91.8,186.8z" }))), /*#__PURE__*/
+
+
+
+      React.createElement("rect", { x: "81.9", y: "99", className: "st4", width: "10.4", height: "6.4" }), /*#__PURE__*/
+      React.createElement("path", {
+        className: "st4",
+        d: "M91,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C108.9,184.4,104.2,202.2,91,202.3z" })), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "key", "data-key": "q", onClick: this.handleKey }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st3",
+        d: "M64.5,98.3H29.6c-5.6,0-10.2,4.6-10.2,10.2v86c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z" }), /*#__PURE__*/
+
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st2",
+        d: "M47.4,188.3l-2.9-2.7c-1.1,0.6-2.3,0.9-3.8,0.9c-2.3,0-4.2-0.8-5.8-2.3c-1.6-1.5-2.4-3.3-2.4-5.5 c0-2.1,0.8-4,2.4-5.5c1.6-1.5,3.5-2.3,5.8-2.3c2.3,0,4.2,0.8,5.8,2.3c1.6,1.5,2.4,3.4,2.4,5.6c0,1-0.2,2-0.7,2.9s-1,1.8-1.8,2.5 l2.9,2.1L47.4,188.3z M45.9,178.7c0-1.5-0.5-2.8-1.5-3.8c-1-1-2.2-1.5-3.6-1.5c-1.4,0-2.7,0.5-3.7,1.5c-1,1-1.5,2.2-1.5,3.7 c0,1.4,0.5,2.7,1.5,3.7c1,1.1,2.2,1.6,3.6,1.6c1.5,0,2.7-0.5,3.7-1.5C45.4,181.4,45.9,180.2,45.9,178.7z" }))), /*#__PURE__*/
+
+
+
+
+
+
+      React.createElement("path", {
+        className: "st4",
+        d: "M20.2,132.1c0,0-1.2-26.9,19-26.9h8.1v-6.4H30c-5.5,0-9.9,4.4-9.9,9.9V132.1z" }), /*#__PURE__*/
+
+      React.createElement("path", {
+        className: "st4",
+        d: "M45.8,202.3h10.3c0,0,7.2-0.3,7.6-7.5v-10.3C63.8,184.4,59,202.2,45.8,202.3z" })), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "key", "data-key": "6", onClick: this.handleKey }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st5",
+        d: "M307.4,98.8h-34.7V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z" }), /*#__PURE__*/
+
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st6",
+        d: "M291.1,135.5l1.8,1.6c-0.1,0.1-0.3,0.3-0.6,0.7s-0.7,0.8-1,1.1c-0.3,0.3-0.6,0.7-1,1.2 c-0.4,0.5-0.7,0.9-1,1.3c0.6-0.2,1.1-0.3,1.7-0.3c1.4,0,2.5,0.5,3.3,1.4c0.8,1,1.3,2.1,1.3,3.5c0,1.3-0.5,2.5-1.5,3.4 c-1,1-2.3,1.4-3.8,1.4c-1.6,0-2.8-0.5-3.9-1.5s-1.5-2.2-1.5-3.6c0-0.7,0.2-1.6,0.6-2.5c0.4-0.9,0.8-1.8,1.3-2.6 c0.5-0.8,1.1-1.6,1.8-2.4c0.7-0.9,1.2-1.5,1.5-1.8C290.4,136.2,290.8,135.8,291.1,135.5z M288.4,148c0.5,0.5,1.1,0.8,1.9,0.8 c0.7,0,1.3-0.3,1.8-0.8c0.5-0.5,0.7-1.1,0.7-1.9c0-0.8-0.2-1.4-0.7-2c-0.5-0.5-1.1-0.8-1.9-0.8c-0.8,0-1.4,0.3-1.9,0.8 c-0.5,0.5-0.7,1.2-0.7,2C287.6,146.8,287.9,147.5,288.4,148z" }))), /*#__PURE__*/
+
+
+
+
+
+
+
+
+      React.createElement("rect", {
+        x: "272.7",
+        y: "98.8",
+        className: "st2",
+        width: "34.7",
+        height: "6.4" }), /*#__PURE__*/
+
+      React.createElement("path", {
+        className: "st7",
+        d: "M289.6,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C307.5,144.9,306.4,162.8,289.6,162.8z" })), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "key", "data-key": "5", onClick: this.handleKey }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st5",
+        d: "M262.3,98.8h-34.7V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z" }), /*#__PURE__*/
+
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st6",
+        d: "M239.6,149.7l0.9-2.2c0.4,0.3,0.8,0.6,1.4,0.8s1.1,0.4,1.7,0.4c1,0,1.8-0.3,2.3-0.8c0.5-0.5,0.8-1.2,0.8-2 c0-0.8-0.3-1.5-0.8-2.1c-0.5-0.6-1.3-0.8-2.4-0.8c-0.8,0-1.8,0.2-2.8,0.5l2-7.5h6.4l-0.7,2.1h-4l-0.8,3.2c0.3-0.1,0.7-0.1,1-0.1 c1.3,0,2.5,0.5,3.5,1.4c1,0.9,1.4,2,1.4,3.3c0,1.5-0.5,2.7-1.4,3.7s-2.3,1.5-4.1,1.5c-0.9,0-1.8-0.1-2.6-0.4 S240.1,150,239.6,149.7z" }))), /*#__PURE__*/
+
+
+
+
+
+
+      React.createElement("rect", {
+        x: "227.6",
+        y: "98.8",
+        className: "st2",
+        width: "34.7",
+        height: "6.4" }), /*#__PURE__*/
+
+      React.createElement("path", {
+        className: "st7",
+        d: "M244.4,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C262.4,144.9,261.2,162.8,244.4,162.8z" })), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "key", "data-key": "4", onClick: this.handleKey }, /*#__PURE__*/
+      React.createElement("path", {
+        class: "st5",
+        d: "M216.2,98.8h-34.7V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z" }), /*#__PURE__*/
+
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st6",
+        d: "M203.4,150.8h-2.6v-2.5h-7.1v-1.7l7.8-11.4h1.8v10.9l2.1,0v2.1h-2.1V150.8z M200.8,146.1v-6l-4.1,6 L200.8,146.1z" }))), /*#__PURE__*/
+
+
+
+
+      React.createElement("rect", {
+        x: "181.6",
+        y: "98.8",
+        className: "st2",
+        width: "34.7",
+        height: "6.4" }), /*#__PURE__*/
+
+      React.createElement("path", {
+        className: "st7",
+        d: "M198.3,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C216.3,144.9,215.1,162.8,198.3,162.8z" })), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "key", "data-key": "3", onClick: this.handleKey }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st5",
+        d: "M127,98.8H92.3V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z" }), /*#__PURE__*/
+
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st6",
+        d: "M111.4,142.4L111.4,142.4c0.9,0.4,1.6,1,2,1.7c0.4,0.8,0.7,1.6,0.7,2.5c0,1.1-0.5,2.1-1.5,3 c-1,0.9-2.3,1.3-3.9,1.3c-1.1,0-2-0.2-2.8-0.5c-0.8-0.3-1.3-0.7-1.7-1.1l1.1-1.9c0.2,0.3,0.7,0.6,1.3,0.9s1.3,0.4,2,0.4 c0.9,0,1.6-0.2,2-0.7s0.7-1.1,0.7-1.7c0-0.8-0.3-1.6-1-2.1c-0.7-0.6-1.5-0.9-2.6-0.9c-0.1,0-0.3,0-0.6,0v-1.6 c0.2,0,0.5,0.1,0.7,0.1c0.8,0,1.5-0.2,2-0.7c0.5-0.5,0.8-1,0.8-1.5c0-1.1-0.7-1.7-2-1.7c-0.4,0-0.8,0.1-1.2,0.2 c-0.5,0.1-0.8,0.3-1.1,0.5l-0.8-1.9c0.3-0.3,0.8-0.5,1.5-0.7c0.7-0.2,1.4-0.3,2.2-0.3c1.2,0,2.2,0.4,3,1.1s1.2,1.6,1.2,2.5 C113.5,140.6,112.8,141.7,111.4,142.4z" }))), /*#__PURE__*/
+
+
+
+
+
+
+
+
+      React.createElement("rect", { x: "92.3", y: "98.8", className: "st2", width: "34.7", height: "6.4" }), /*#__PURE__*/
+      React.createElement("path", {
+        className: "st7",
+        d: "M109.1,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C127,144.9,125.9,162.8,109.1,162.8z" })), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "key", "data-key": "2", onClick: this.handleKey }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st5",
+        d: "M81.8,98.8H47.2V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z" }), /*#__PURE__*/
+
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("g", null, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st6",
+        d: "M70,150.7H59.2V149c0.7-0.3,1.5-0.8,2.5-1.6s1.8-1.5,2.5-2.2c0.9-0.9,1.5-1.8,1.8-2.6 c0.4-0.8,0.6-1.6,0.6-2.5c0-0.6-0.2-1.2-0.6-1.6c-0.4-0.5-0.9-0.7-1.5-0.7c-1.1,0-2.2,0.5-3.1,1.6l-1.3-1.8 c1.4-1.4,3-2.1,4.7-2.1c1.4,0,2.5,0.4,3.4,1.3c0.9,0.9,1.3,2,1.3,3.2c0,1.8-1.1,3.9-3.3,6.2c-0.6,0.6-1.3,1.3-2.3,2.1l6.2,0 V150.7z" }))), /*#__PURE__*/
+
+
+
+
+
+
+      React.createElement("rect", { x: "47.2", y: "98.8", className: "st2", width: "34.7", height: "6.4" }), /*#__PURE__*/
+      React.createElement("path", {
+        className: "st7",
+        d: "M64,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C81.9,144.9,80.8,162.8,64,162.8z" }))), /*#__PURE__*/
+
+
+
+      React.createElement("g", { className: "presets" }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "base st6",
+        d: "M269.4,15.2l-136.5,0c-18.3,0-33,14.8-33,33v0c0,18.3,14.8,33,33,33h136.5c18.3,0,33-14.8,33-33 v0C302.4,30,287.6,15.2,269.4,15.2z" }), /*#__PURE__*/
+
+
+      React.createElement("path", {
+        className: "st4",
+        d: "M99.8,48.2c0,0,6.7,26.5,33.6,26.8c22.5,0.2,136.7,0.1,136.7,0.1s23.8,1.3,32.2-26.9c0,0,0.7,13.9-9.7,23.4 c-10.4,9.5-20,9.7-22.6,9.7c-2.6,0-137.3,0-137.3,0s-21.5,1.4-30.5-20.4C102.3,60.9,99.8,56.1,99.8,48.2z" }), /*#__PURE__*/
+
+
+      React.createElement("g", { className: "preset", "data-preset": "drums", onClick: this.handlePreset }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "base st8",
+        d: "M268,39.3c-1.9-0.6-7.7-0.6-7.7-0.6c-18.5,0-17.5,7-17.5,7c0,0.1,0,0.2,0,0.2v11.4 c0,0,0,0.1,0,0.1c0.2,1.7,1.7,3.1,3,3.9c0.9,0.6,2.1-0.1,2.1-1.1v-4.9c0,0-0.1-1.6,1.6-1.6s1.7,1.8,1.7,1.8v7.1 c0,0.6,0.4,1.2,1,1.3c1.8,0.5,3.9,0.7,5.2,0.8c0.8,0,1.4-0.6,1.4-1.3v-5.6c0-0.1,0-0.1,0-0.2c0.1-0.4,0.4-1.6,1.7-1.6 c1.6,0,1.6,1.7,1.6,1.7v5.6c0,0.8,0.6,1.4,1.4,1.3c2.2-0.1,4.1-0.5,5.2-0.8c0.6-0.1,1-0.7,1-1.3v-7c0-0.1,0-0.2,0-0.2 c0.1-0.4,0.4-1.6,1.7-1.6c1.6,0,1.6,1.8,1.6,1.8v4.6c0,1.1,1.2,1.7,2.1,1.1c3-1.9,2.8-3.9,2.8-3.9V45.5c0-0.1,0-0.2,0-0.3 c0,0,0.6-4.7-5.2-5.5" }), /*#__PURE__*/
+
+
+
+
+
+
+      React.createElement("path", {
+        className: "top st8",
+        d: "M268.3,42.7c5.3,0.2,6.1,3.4,6.1,3.4c0,4.2-14.4,4.4-14.4,4.4s-13.4-0.3-13.8-4.4 c0,0-1-4.2,17.2-3.8" }), /*#__PURE__*/
+
+
+      React.createElement("path", {
+        className: "stick st8",
+        d: "M259.2,45l16.5-10.8c0.5-0.3,1.2-0.2,1.5,0.3l0.5,0.7c0.4,0.5,0.2,1.2-0.3,1.6l-16.6,10.8 c-0.5,0.3-1.2,0.2-1.5-0.3l-0.4-0.7C258.5,46,258.7,45.4,259.2,45z" })), /*#__PURE__*/
+
+
+
+      React.createElement("g", {
+        className: "preset",
+        "data-preset": "guitar",
+        onClick: this.handlePreset }, /*#__PURE__*/
+
+      React.createElement("path", {
+        className: "st8",
+        d: "M190.8,61.1c0,0-4.9-5.7-1.2-11c0,0,1.5-1.8,3.1-2.1c1.6-0.4,3.4-0.3,4.1-1.9c0.7-1.6,2.4-5.1,7-4.5 c0,0,2.1,0.5,3.3,1.5l5.1-5c0,0,0.9-3,1.2-3.3c0.4-0.3,3.5-3.4,3.5-3.4s1.3-1,2.3-0.2s2.7,2.6,2.7,2.6s0.9,1,0.1,2.2 c-0.8,1.1-3.8,3.9-3.8,3.9l-3,1l-5.1,5.1c0,0,1.8,2.3,1.5,5c-0.4,2.7-1.8,4.1-3.6,4.9c-1.8,0.8-2.5,1.8-2.6,3s-1.2,5.2-5.7,5.9 C195.1,65.4,191.3,61.8,190.8,61.1z" }), /*#__PURE__*/
+
+
+
+
+      React.createElement("circle", { className: "st8", cx: "200.9", cy: "52", r: "3.3" })), /*#__PURE__*/
+
+      React.createElement("g", { className: "preset", "data-preset": "piano", onClick: this.handlePreset }, /*#__PURE__*/
+      React.createElement("path", {
+        className: "st9",
+        d: "M163.4,62.4h-35.1c-1.1,0-2-0.9-2-2V38.3c0-1.1,0.9-2,2-2h35.1c1.1,0,2,0.9,2,2v22.1 C165.4,61.5,164.5,62.4,163.4,62.4z" }), /*#__PURE__*/
+
+
+      React.createElement("path", {
+        className: "st9",
+        d: "M163.5,62.4h-35.2c-1.1,0-2-0.9-2-2V45.7h39.2v14.8C165.4,61.5,164.5,62.4,163.5,62.4z" }), /*#__PURE__*/
+
+      React.createElement("path", {
+        className: "st9",
+        d: "M137.1,54h-2.6c-0.6,0-1-0.5-1-1v-7.3h4.7V53C138.1,53.6,137.7,54,137.1,54z" }), /*#__PURE__*/
+
+      React.createElement("path", {
+        className: "st9",
+        d: "M147.2,54h-2.8c-0.6,0-1.1-0.5-1.1-1.1v-7.3h5v7.3C148.3,53.5,147.8,54,147.2,54z" }), /*#__PURE__*/
+
+      React.createElement("path", {
+        className: "st9",
+        d: "M157.2,54h-2.6c-0.6,0-1-0.5-1-1v-7.3h4.7V53C158.2,53.6,157.7,54,157.2,54z" }), /*#__PURE__*/
+
+      React.createElement("line", { className: "st9", x1: "135.8", y1: "54.1", x2: "135.8", y2: "62" }), /*#__PURE__*/
+      React.createElement("line", { className: "st9", x1: "145.8", y1: "54.1", x2: "145.8", y2: "62" }), /*#__PURE__*/
+      React.createElement("line", { className: "st9", x1: "155.8", y1: "54.1", x2: "155.8", y2: "62" })))));
+
+
+
+
+  }}
+
+
+ReactDOM.render( /*#__PURE__*/React.createElement(Synth, null), document.getElementById("app"));
\ No newline at end of file
diff --git a/reactive-synth/dist/style.css b/reactive-synth/dist/style.css
new file mode 100644
index 0000000..ca1fa82
--- /dev/null
+++ b/reactive-synth/dist/style.css
@@ -0,0 +1,63 @@
+@font-face src: url(https://assets.codepen.io/4291733/SemplicitaPro-Medium.woff2) {
+  font-family: SemplicitaPro;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+#app {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 36px;
+  background: #efefef;
+}
+#app .Synth {
+  width: 320px;
+}
+#app .Synth .preset, #app .Synth .key {
+  cursor: pointer;
+}
+#app .Synth .st0 {
+  fill: #ffa6f7;
+  stroke: #892276;
+  stroke-miterlimit: 10;
+}
+#app .Synth .st1 {
+  fill: #892276;
+}
+#app .Synth .st2 {
+  fill: #ff79e6;
+}
+#app .Synth .st3 {
+  fill: white;
+  stroke: #892276;
+  stroke-miterlimit: 10;
+}
+#app .Synth .st4 {
+  fill: #ffe1f7;
+}
+#app .Synth .st5 {
+  fill: #ffa6f7;
+}
+#app .Synth .st6 {
+  fill: white;
+}
+#app .Synth .st7 {
+  fill: #F993EA;
+}
+#app .Synth .st8 {
+  fill: white;
+  stroke: #ff79e6;
+  stroke-miterlimit: 10;
+}
+#app .Synth .st9 {
+  fill: #ff79e6;
+  stroke: white;
+  stroke-miterlimit: 10;
+}
\ No newline at end of file
diff --git a/reactive-synth/license.txt b/reactive-synth/license.txt
new file mode 100644
index 0000000..b1951c8
--- /dev/null
+++ b/reactive-synth/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Alex Lerida (https://codepen.io/lerida/pen/bGwzVvo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/reactive-synth/src/index.html b/reactive-synth/src/index.html
new file mode 100644
index 0000000..bccfd90
--- /dev/null
+++ b/reactive-synth/src/index.html
@@ -0,0 +1,7 @@
+<!-- 
+  Developed with 💗 by Alex Lerida
+  ➡ Twitter: @xlerida
+  ➡ Dribbble: @lerida
+-->
+
+<div id="app"></div>
\ No newline at end of file
diff --git a/reactive-synth/src/script.babel b/reactive-synth/src/script.babel
new file mode 100644
index 0000000..1bf35d1
--- /dev/null
+++ b/reactive-synth/src/script.babel
@@ -0,0 +1,622 @@
+class Synth extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      presets: {
+        piano: true,
+        guitar: false,
+        drums: false
+      },
+
+      keys: {
+        q: "",
+        2: "",
+        w: "",
+        3: "",
+        e: "",
+        r: "",
+        4: "",
+        t: "",
+        5: "",
+        y: "",
+        u: "",
+        i: "",
+        6: ""
+      }
+    };
+
+    this.handlePreset = this.handlePreset.bind(this);
+  }
+
+  handleKey = (e) => {
+    let data = {
+      event: e.type,
+      target: "",
+      key: ""
+    };
+
+    if (data.event == "keypress") {
+      const keys = document.querySelectorAll(".key");
+      keys.forEach((key) => {
+        if (key.getAttribute("data-key") == e.key.toLowerCase())
+          data.target = key;
+      });
+      data.key = e.key;
+    } else {
+      data.target = e.currentTarget;
+      data.key = data.target.getAttribute("data-key");
+    }
+
+    this.playSound(data);
+    this.animate(data);
+  };
+
+  playSound = ({ key }) => {
+    Object.entries(this.state.keys).forEach((entry) => {
+      if (entry[0] == key.toLowerCase()) {
+        const audio = new Audio(entry[1]);
+        audio.play();
+      }
+    });
+  };
+
+  animate = ({ target }) => {
+    const tl = gsap.timeline();
+    try {
+      tl.to(target, {
+        duration: 0.18,
+        ease: "power3.out",
+        scale: 0.95,
+        transformOrigin: "top"
+      });
+
+      tl.to(target, {
+        duration: 0.18,
+        ease: "power3.out",
+        scale: 1,
+        transformOrigin: "top"
+      });
+
+      const tl2 = gsap.timeline();
+
+      tl2.to(".speakers circle", {
+        duration: 0.18,
+        ease: "back.out",
+        scale: 1.15,
+        transformOrigin: "center"
+      });
+
+      tl2.to(".speakers circle", {
+        duration: 0.3,
+        ease: "back.out",
+        scale: 1,
+        transformOrigin: "center"
+      });
+    } catch {}
+  };
+
+  handlePreset = (e) => {
+    if (e) {
+      const data = {
+        target: e.currentTarget,
+        presets: e.currentTarget.parentElement.querySelectorAll(".preset"),
+        paths: e.currentTarget.querySelectorAll("path"),
+        preset: e.currentTarget.getAttribute("data-preset")
+      };
+
+      Object.entries(this.state.presets).forEach((entry) => {
+        if (entry[0] == data.preset) {
+          data.paths.forEach((path) => {
+            gsap.set(path, { fill: "#FF79E6", stroke: "white" });
+            try {
+              gsap.set(".top", { fill: "white" });
+            } catch {}
+          });
+        } else {
+          data.presets.forEach((preset) => {
+            if (preset.getAttribute("data-preset") == entry[0]) {
+              preset.querySelectorAll("path").forEach((path) => {
+                gsap.set(path, {
+                  fill: "white",
+                  stroke: "#FF79E6"
+                });
+              });
+            }
+          });
+        }
+
+        data.presets.forEach((preset) => {
+          gsap.set(data.path, { fill: "white" });
+        });
+      });
+
+      if (data.preset == "piano") this.togglePiano();
+      else if (data.preset == "guitar") this.toggleGuitar();
+      else if (data.preset == "drums") this.toggleDrums();
+    } else this.togglePiano();
+  };
+
+  togglePiano() {
+    this.state.keys.q =
+      "https://raw.githubusercontent.com/xLerida/synth/master/piano-c5.mp3";
+    this.state.keys["2"] =
+      "https://raw.githubusercontent.com/xLerida/synth/master/piano-c5b.mp3";
+    this.state.keys.w =
+      "https://raw.githubusercontent.com/xLerida/synth/master/piano-d5.mp3";
+    this.state.keys["3"] =
+      "https://raw.githubusercontent.com/xLerida/synth/master/piano-d5b.mp3";
+    this.state.keys.e =
+      "https://raw.githubusercontent.com/xLerida/synth/master/piano-e5.mp3";
+    this.state.keys.r =
+      "https://raw.githubusercontent.com/xLerida/synth/master/piano-f5.mp3";
+    this.state.keys["4"] =
+      "https://raw.githubusercontent.com/xLerida/synth/master/piano-f5b.mp3";
+    this.state.keys.t =
+      "https://raw.githubusercontent.com/xLerida/synth/master/piano-g5.mp3";
+    this.state.keys["5"] =
+      "https://raw.githubusercontent.com/xLerida/synth/master/piano-g5b.mp3";
+    this.state.keys.y =
+      "https://raw.githubusercontent.com/xLerida/synth/master/piano-a5.mp3";
+    this.state.keys["6"] =
+      "https://raw.githubusercontent.com/xLerida/synth/master/piano-a5b.mp3";
+    this.state.keys.u =
+      "https://raw.githubusercontent.com/xLerida/synth/master/piano-b5.mp3";
+    this.state.keys.i =
+      "https://raw.githubusercontent.com/xLerida/synth/master/piano-c6.mp3";
+  }
+
+  toggleGuitar() {
+    this.state.keys.q =
+      "https://raw.githubusercontent.com/xLerida/synth/master/guitar-c5.mp3";
+    this.state.keys["2"] =
+      "https://raw.githubusercontent.com/xLerida/synth/master/guitar-c5b.mp3";
+    this.state.keys.w =
+      "https://raw.githubusercontent.com/xLerida/synth/master/guitar-d5.mp3";
+    this.state.keys["3"] =
+      "https://raw.githubusercontent.com/xLerida/synth/master/guitar-d5b.mp3";
+    this.state.keys.e =
+      "https://raw.githubusercontent.com/xLerida/synth/master/guitar-e5.mp3";
+    this.state.keys.r =
+      "https://raw.githubusercontent.com/xLerida/synth/master/guitar-f5.mp3";
+    this.state.keys["4"] =
+      "https://raw.githubusercontent.com/xLerida/synth/master/guitar-f5b.mp3";
+    this.state.keys.t =
+      "https://raw.githubusercontent.com/xLerida/synth/master/guitar-g5.mp3";
+    this.state.keys["5"] =
+      "https://raw.githubusercontent.com/xLerida/synth/master/guitar-g5b.mp3";
+    this.state.keys.y =
+      "https://raw.githubusercontent.com/xLerida/synth/master/guitar-a5.mp3";
+    this.state.keys["6"] =
+      "https://raw.githubusercontent.com/xLerida/synth/master/guitar-a5b.mp3";
+    this.state.keys.u =
+      "https://raw.githubusercontent.com/xLerida/synth/master/guitar-b5.mp3";
+    this.state.keys.i =
+      "https://raw.githubusercontent.com/xLerida/synth/master/guitar-c6.mp3";
+  }
+
+  toggleDrums() {
+    this.state.keys.q =
+      "https://raw.githubusercontent.com/xLerida/synth/master/drums-snare.mp3";
+    this.state.keys["2"] =
+      "https://raw.githubusercontent.com/xLerida/synth/master/drums-kick.mp3";
+    this.state.keys.w =
+      "https://raw.githubusercontent.com/xLerida/synth/master/drums-808.mp3";
+    this.state.keys["3"] =
+      "https://raw.githubusercontent.com/xLerida/synth/master/drum-clap.mp3";
+    this.state.keys.e =
+      "https://raw.githubusercontent.com/xLerida/synth/master/drums-crash.mp3";
+    this.state.keys.r =
+      "https://raw.githubusercontent.com/xLerida/synth/master/drums-hat-c.mp3";
+    this.state.keys["4"] =
+      "https://raw.githubusercontent.com/xLerida/synth/master/drums-hat-o.mp3";
+  }
+
+  componentDidMount() {
+    this.togglePiano();
+
+    window.addEventListener("keypress", (e) => {
+      this.handleKey(e);
+    });
+  }
+
+  render() {
+    return (
+      <svg className="Synth" viewBox="0 0 401 203.6">
+        <path
+          className="base st0"
+          d="M388.6,192.1H12.4c-6.5,0-11.9-5.3-11.9-11.9V34.5c0-18.8,15.2-34,34-34l332.1,0
+      c18.8,0,34,15.2,34,34v145.8C400.5,186.8,395.2,192.1,388.6,192.1z"
+        />
+        <path
+          className="st1"
+          d="M378.3,192.1H21.5c-1.4,0-2.6-1.2-2.6-2.6v-79.7c0-6.6,5.4-12,12-12h338.1c6.6,0,12,5.4,12,12v79.7
+      C380.9,191,379.8,192.1,378.3,192.1z"
+        />
+        <g className="speakers">
+          <circle className="st2" cx="52.8" cy="48.2" r="32.9" />
+          <circle className="st2" cx="349.5" cy="48.2" r="32.9" />
+        </g>
+        <g className="keys">
+          <g className="key" data-key="i" onClick={this.handleKey}>
+            <path
+              className="st3"
+              d="M335.3,98.3H370c5.8,0,10.4,4.7,10.4,10.4v85.8c0,4.7-3.8,8.5-8.5,8.5h-28.1c-4.7,0-8.5-3.8-8.5-8.5V98.3z"
+            />
+            <g>
+              <g>
+                <path className="st2" d="M359.2,186.1h-2.8v-14.9h2.8V186.1z" />
+              </g>
+            </g>
+            <path
+              className="st4"
+              d="M379.6,132.1c0,0,0.4-26.9-18.6-26.9h-25v-6.4h33.7c5.5,0,9.9,4.4,9.9,9.9V132.1z"
+            />
+            <path
+              className="st4"
+              d="M361.8,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C379.7,184.4,375,202.1,361.8,202.3z"
+            />
+          </g>
+          <g className="key" data-key="u" onClick={this.handleKey}>
+            <path
+              className="st3"
+              d="M335.2,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
+            />
+            <g>
+              <g>
+                <path
+                  className="st2"
+                  d="M315.5,183.2v-12h2.8v13.1c-1.4,1.4-3.5,2.2-6.2,2.2c-2,0-3.5-0.5-4.6-1.5c-1.1-1-1.6-2.4-1.6-4.4v-9.4h2.8
+              v7.8c0,1.9,0.3,3.2,0.8,3.9c0.5,0.7,1.5,1.1,3,1.1C313.7,184,314.7,183.7,315.5,183.2z"
+                />
+              </g>
+            </g>
+            <rect x="307.4" y="98.8" className="st4" width="27" height="6.4" />
+            <path
+              className="st4"
+              d="M316.6,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C334.5,184.4,329.8,202.2,316.6,202.3z"
+            />
+          </g>
+          <g className="key" data-key="y" onClick={this.handleKey}>
+            <path
+              className="st3"
+              d="M290.1,98.3H245v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
+            />
+            <g>
+              <g>
+                <path
+                  className="st2"
+                  d="M269,186.1h-2.8v-6.1l-5.6-8.9h3.1l3.9,6.4l3.9-6.4h3.1l-5.7,8.9V186.1z"
+                />
+              </g>
+            </g>
+            <rect
+              x="262.3"
+              y="98.8"
+              className="st4"
+              width="10.4"
+              height="6.4"
+            />
+            <path
+              class="st4"
+              d="M271.5,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C289.4,184.4,284.7,202.2,271.5,202.3z"
+            />
+          </g>
+          <g className="key" data-key="t" onClick={this.handleKey}>
+            <path
+              className="st3"
+              d="M245,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
+            />
+            <g>
+              <g>
+                <path
+                  className="st2"
+                  d="M223.7,186.1h-2.8v-12.4h-4.4v-2.5h11.6v2.5h-4.4V186.1z"
+                />
+              </g>
+            </g>
+            <rect
+              x="216.2"
+              y="98.8"
+              className="st4"
+              width="11.4"
+              height="6.4"
+            />
+            <path
+              className="st4"
+              d="M226.3,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C244.3,184.4,239.5,202.2,226.3,202.3z"
+            />
+          </g>
+          <g className="key" data-key="r" onClick={this.handleKey}>
+            <path
+              className="st3"
+              d="M199.9,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
+            />
+            <g>
+              <g>
+                <path
+                  className="st2"
+                  d="M184,186.1h-3.9l-5.6-5.6h-0.3v5.6h-2.8v-14.9h3.1c4.5,0,6.7,1.5,6.7,4.6c0,2.4-1.2,3.9-3.6,4.5L184,186.1z
+               M174.2,178h0.9c2.1,0,3.1-0.7,3.1-2.2c0-1.4-1-2.1-3-2.1h-1V178z"
+                />
+              </g>
+            </g>
+            <rect x="155.6" y="98.8" className="st4" width="26" height="6.4" />
+            <path
+              class="st4"
+              d="M181.2,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C199.1,184.4,194.4,202.2,181.2,202.3z"
+            />
+          </g>
+          <g className="key" data-key="e" onClick={this.handleKey}>
+            <path
+              className="st3"
+              d="M154.8,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
+            />
+            <g>
+              <g>
+                <path
+                  className="st2"
+                  d="M137.2,186.1h-9.5v-14.9h8.9v2.5h-6.1v3.2h4.9v2.5h-4.9v4.1h6.7V186.1z"
+                />
+              </g>
+            </g>
+            <rect x="127" y="98.8" className="st4" width="26.9" height="6.4" />
+            <path
+              className="st4"
+              d="M136.1,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C154,184.4,149.3,202.2,136.1,202.3z"
+            />
+          </g>
+          <g className="key" data-key="w" onClick={this.handleKey}>
+            <path
+              className="st3"
+              d="M109.6,98.3H64.5v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
+            />
+            <g>
+              <g>
+                <path
+                  className="st2"
+                  d="M91.8,186.8l-4.6-10l-4.5,10l-6.3-15.6h3.1l3.4,9.1l4.4-9.8l4.4,9.7l3.4-9.1H98L91.8,186.8z"
+                />
+              </g>
+            </g>
+            <rect x="81.9" y="99" className="st4" width="10.4" height="6.4" />
+            <path
+              className="st4"
+              d="M91,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C108.9,184.4,104.2,202.2,91,202.3z"
+            />
+          </g>
+          <g className="key" data-key="q" onClick={this.handleKey}>
+            <path
+              className="st3"
+              d="M64.5,98.3H29.6c-5.6,0-10.2,4.6-10.2,10.2v86c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
+            />
+            <g>
+              <g>
+                <path
+                  className="st2"
+                  d="M47.4,188.3l-2.9-2.7c-1.1,0.6-2.3,0.9-3.8,0.9c-2.3,0-4.2-0.8-5.8-2.3c-1.6-1.5-2.4-3.3-2.4-5.5
+              c0-2.1,0.8-4,2.4-5.5c1.6-1.5,3.5-2.3,5.8-2.3c2.3,0,4.2,0.8,5.8,2.3c1.6,1.5,2.4,3.4,2.4,5.6c0,1-0.2,2-0.7,2.9s-1,1.8-1.8,2.5
+              l2.9,2.1L47.4,188.3z M45.9,178.7c0-1.5-0.5-2.8-1.5-3.8c-1-1-2.2-1.5-3.6-1.5c-1.4,0-2.7,0.5-3.7,1.5c-1,1-1.5,2.2-1.5,3.7
+              c0,1.4,0.5,2.7,1.5,3.7c1,1.1,2.2,1.6,3.6,1.6c1.5,0,2.7-0.5,3.7-1.5C45.4,181.4,45.9,180.2,45.9,178.7z"
+                />
+              </g>
+            </g>
+            <path
+              className="st4"
+              d="M20.2,132.1c0,0-1.2-26.9,19-26.9h8.1v-6.4H30c-5.5,0-9.9,4.4-9.9,9.9V132.1z"
+            />
+            <path
+              className="st4"
+              d="M45.8,202.3h10.3c0,0,7.2-0.3,7.6-7.5v-10.3C63.8,184.4,59,202.2,45.8,202.3z"
+            />
+          </g>
+          <g className="key" data-key="6" onClick={this.handleKey}>
+            <path
+              className="st5"
+              d="M307.4,98.8h-34.7V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
+            />
+            <g>
+              <g>
+                <path
+                  className="st6"
+                  d="M291.1,135.5l1.8,1.6c-0.1,0.1-0.3,0.3-0.6,0.7s-0.7,0.8-1,1.1c-0.3,0.3-0.6,0.7-1,1.2
+              c-0.4,0.5-0.7,0.9-1,1.3c0.6-0.2,1.1-0.3,1.7-0.3c1.4,0,2.5,0.5,3.3,1.4c0.8,1,1.3,2.1,1.3,3.5c0,1.3-0.5,2.5-1.5,3.4
+              c-1,1-2.3,1.4-3.8,1.4c-1.6,0-2.8-0.5-3.9-1.5s-1.5-2.2-1.5-3.6c0-0.7,0.2-1.6,0.6-2.5c0.4-0.9,0.8-1.8,1.3-2.6
+              c0.5-0.8,1.1-1.6,1.8-2.4c0.7-0.9,1.2-1.5,1.5-1.8C290.4,136.2,290.8,135.8,291.1,135.5z M288.4,148c0.5,0.5,1.1,0.8,1.9,0.8
+              c0.7,0,1.3-0.3,1.8-0.8c0.5-0.5,0.7-1.1,0.7-1.9c0-0.8-0.2-1.4-0.7-2c-0.5-0.5-1.1-0.8-1.9-0.8c-0.8,0-1.4,0.3-1.9,0.8
+              c-0.5,0.5-0.7,1.2-0.7,2C287.6,146.8,287.9,147.5,288.4,148z"
+                />
+              </g>
+            </g>
+            <rect
+              x="272.7"
+              y="98.8"
+              className="st2"
+              width="34.7"
+              height="6.4"
+            />
+            <path
+              className="st7"
+              d="M289.6,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C307.5,144.9,306.4,162.8,289.6,162.8z"
+            />
+          </g>
+          <g className="key" data-key="5" onClick={this.handleKey}>
+            <path
+              className="st5"
+              d="M262.3,98.8h-34.7V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
+            />
+            <g>
+              <g>
+                <path
+                  className="st6"
+                  d="M239.6,149.7l0.9-2.2c0.4,0.3,0.8,0.6,1.4,0.8s1.1,0.4,1.7,0.4c1,0,1.8-0.3,2.3-0.8c0.5-0.5,0.8-1.2,0.8-2
+              c0-0.8-0.3-1.5-0.8-2.1c-0.5-0.6-1.3-0.8-2.4-0.8c-0.8,0-1.8,0.2-2.8,0.5l2-7.5h6.4l-0.7,2.1h-4l-0.8,3.2c0.3-0.1,0.7-0.1,1-0.1
+              c1.3,0,2.5,0.5,3.5,1.4c1,0.9,1.4,2,1.4,3.3c0,1.5-0.5,2.7-1.4,3.7s-2.3,1.5-4.1,1.5c-0.9,0-1.8-0.1-2.6-0.4
+              S240.1,150,239.6,149.7z"
+                />
+              </g>
+            </g>
+            <rect
+              x="227.6"
+              y="98.8"
+              className="st2"
+              width="34.7"
+              height="6.4"
+            />
+            <path
+              className="st7"
+              d="M244.4,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C262.4,144.9,261.2,162.8,244.4,162.8z"
+            />
+          </g>
+          <g className="key" data-key="4" onClick={this.handleKey}>
+            <path
+              class="st5"
+              d="M216.2,98.8h-34.7V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
+            />
+            <g>
+              <g>
+                <path
+                  className="st6"
+                  d="M203.4,150.8h-2.6v-2.5h-7.1v-1.7l7.8-11.4h1.8v10.9l2.1,0v2.1h-2.1V150.8z M200.8,146.1v-6l-4.1,6
+              L200.8,146.1z"
+                />
+              </g>
+            </g>
+            <rect
+              x="181.6"
+              y="98.8"
+              className="st2"
+              width="34.7"
+              height="6.4"
+            />
+            <path
+              className="st7"
+              d="M198.3,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C216.3,144.9,215.1,162.8,198.3,162.8z"
+            />
+          </g>
+          <g className="key" data-key="3" onClick={this.handleKey}>
+            <path
+              className="st5"
+              d="M127,98.8H92.3V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
+            />
+            <g>
+              <g>
+                <path
+                  className="st6"
+                  d="M111.4,142.4L111.4,142.4c0.9,0.4,1.6,1,2,1.7c0.4,0.8,0.7,1.6,0.7,2.5c0,1.1-0.5,2.1-1.5,3
+              c-1,0.9-2.3,1.3-3.9,1.3c-1.1,0-2-0.2-2.8-0.5c-0.8-0.3-1.3-0.7-1.7-1.1l1.1-1.9c0.2,0.3,0.7,0.6,1.3,0.9s1.3,0.4,2,0.4
+              c0.9,0,1.6-0.2,2-0.7s0.7-1.1,0.7-1.7c0-0.8-0.3-1.6-1-2.1c-0.7-0.6-1.5-0.9-2.6-0.9c-0.1,0-0.3,0-0.6,0v-1.6
+              c0.2,0,0.5,0.1,0.7,0.1c0.8,0,1.5-0.2,2-0.7c0.5-0.5,0.8-1,0.8-1.5c0-1.1-0.7-1.7-2-1.7c-0.4,0-0.8,0.1-1.2,0.2
+              c-0.5,0.1-0.8,0.3-1.1,0.5l-0.8-1.9c0.3-0.3,0.8-0.5,1.5-0.7c0.7-0.2,1.4-0.3,2.2-0.3c1.2,0,2.2,0.4,3,1.1s1.2,1.6,1.2,2.5
+              C113.5,140.6,112.8,141.7,111.4,142.4z"
+                />
+              </g>
+            </g>
+            <rect x="92.3" y="98.8" className="st2" width="34.7" height="6.4" />
+            <path
+              className="st7"
+              d="M109.1,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C127,144.9,125.9,162.8,109.1,162.8z"
+            />
+          </g>
+          <g className="key" data-key="2" onClick={this.handleKey}>
+            <path
+              className="st5"
+              d="M81.8,98.8H47.2V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
+            />
+            <g>
+              <g>
+                <path
+                  className="st6"
+                  d="M70,150.7H59.2V149c0.7-0.3,1.5-0.8,2.5-1.6s1.8-1.5,2.5-2.2c0.9-0.9,1.5-1.8,1.8-2.6
+              c0.4-0.8,0.6-1.6,0.6-2.5c0-0.6-0.2-1.2-0.6-1.6c-0.4-0.5-0.9-0.7-1.5-0.7c-1.1,0-2.2,0.5-3.1,1.6l-1.3-1.8
+              c1.4-1.4,3-2.1,4.7-2.1c1.4,0,2.5,0.4,3.4,1.3c0.9,0.9,1.3,2,1.3,3.2c0,1.8-1.1,3.9-3.3,6.2c-0.6,0.6-1.3,1.3-2.3,2.1l6.2,0
+              V150.7z"
+                />
+              </g>
+            </g>
+            <rect x="47.2" y="98.8" className="st2" width="34.7" height="6.4" />
+            <path
+              className="st7"
+              d="M64,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C81.9,144.9,80.8,162.8,64,162.8z"
+            />
+          </g>
+        </g>
+        <g className="presets">
+          <path
+            className="base st6"
+            d="M269.4,15.2l-136.5,0c-18.3,0-33,14.8-33,33v0c0,18.3,14.8,33,33,33h136.5c18.3,0,33-14.8,33-33
+        v0C302.4,30,287.6,15.2,269.4,15.2z"
+          />
+          <path
+            className="st4"
+            d="M99.8,48.2c0,0,6.7,26.5,33.6,26.8c22.5,0.2,136.7,0.1,136.7,0.1s23.8,1.3,32.2-26.9c0,0,0.7,13.9-9.7,23.4
+        c-10.4,9.5-20,9.7-22.6,9.7c-2.6,0-137.3,0-137.3,0s-21.5,1.4-30.5-20.4C102.3,60.9,99.8,56.1,99.8,48.2z"
+          />
+          <g className="preset" data-preset="drums" onClick={this.handlePreset}>
+            <path
+              className="base st8"
+              d="M268,39.3c-1.9-0.6-7.7-0.6-7.7-0.6c-18.5,0-17.5,7-17.5,7c0,0.1,0,0.2,0,0.2v11.4
+          c0,0,0,0.1,0,0.1c0.2,1.7,1.7,3.1,3,3.9c0.9,0.6,2.1-0.1,2.1-1.1v-4.9c0,0-0.1-1.6,1.6-1.6s1.7,1.8,1.7,1.8v7.1
+          c0,0.6,0.4,1.2,1,1.3c1.8,0.5,3.9,0.7,5.2,0.8c0.8,0,1.4-0.6,1.4-1.3v-5.6c0-0.1,0-0.1,0-0.2c0.1-0.4,0.4-1.6,1.7-1.6
+          c1.6,0,1.6,1.7,1.6,1.7v5.6c0,0.8,0.6,1.4,1.4,1.3c2.2-0.1,4.1-0.5,5.2-0.8c0.6-0.1,1-0.7,1-1.3v-7c0-0.1,0-0.2,0-0.2
+          c0.1-0.4,0.4-1.6,1.7-1.6c1.6,0,1.6,1.8,1.6,1.8v4.6c0,1.1,1.2,1.7,2.1,1.1c3-1.9,2.8-3.9,2.8-3.9V45.5c0-0.1,0-0.2,0-0.3
+          c0,0,0.6-4.7-5.2-5.5"
+            />
+            <path
+              className="top st8"
+              d="M268.3,42.7c5.3,0.2,6.1,3.4,6.1,3.4c0,4.2-14.4,4.4-14.4,4.4s-13.4-0.3-13.8-4.4
+          c0,0-1-4.2,17.2-3.8"
+            />
+            <path
+              className="stick st8"
+              d="M259.2,45l16.5-10.8c0.5-0.3,1.2-0.2,1.5,0.3l0.5,0.7c0.4,0.5,0.2,1.2-0.3,1.6l-16.6,10.8
+          c-0.5,0.3-1.2,0.2-1.5-0.3l-0.4-0.7C258.5,46,258.7,45.4,259.2,45z"
+            />
+          </g>
+          <g
+            className="preset"
+            data-preset="guitar"
+            onClick={this.handlePreset}
+          >
+            <path
+              className="st8"
+              d="M190.8,61.1c0,0-4.9-5.7-1.2-11c0,0,1.5-1.8,3.1-2.1c1.6-0.4,3.4-0.3,4.1-1.9c0.7-1.6,2.4-5.1,7-4.5
+          c0,0,2.1,0.5,3.3,1.5l5.1-5c0,0,0.9-3,1.2-3.3c0.4-0.3,3.5-3.4,3.5-3.4s1.3-1,2.3-0.2s2.7,2.6,2.7,2.6s0.9,1,0.1,2.2
+          c-0.8,1.1-3.8,3.9-3.8,3.9l-3,1l-5.1,5.1c0,0,1.8,2.3,1.5,5c-0.4,2.7-1.8,4.1-3.6,4.9c-1.8,0.8-2.5,1.8-2.6,3s-1.2,5.2-5.7,5.9
+          C195.1,65.4,191.3,61.8,190.8,61.1z"
+            />
+            <circle className="st8" cx="200.9" cy="52" r="3.3" />
+          </g>
+          <g className="preset" data-preset="piano" onClick={this.handlePreset}>
+            <path
+              className="st9"
+              d="M163.4,62.4h-35.1c-1.1,0-2-0.9-2-2V38.3c0-1.1,0.9-2,2-2h35.1c1.1,0,2,0.9,2,2v22.1
+          C165.4,61.5,164.5,62.4,163.4,62.4z"
+            />
+            <path
+              className="st9"
+              d="M163.5,62.4h-35.2c-1.1,0-2-0.9-2-2V45.7h39.2v14.8C165.4,61.5,164.5,62.4,163.5,62.4z"
+            />
+            <path
+              className="st9"
+              d="M137.1,54h-2.6c-0.6,0-1-0.5-1-1v-7.3h4.7V53C138.1,53.6,137.7,54,137.1,54z"
+            />
+            <path
+              className="st9"
+              d="M147.2,54h-2.8c-0.6,0-1.1-0.5-1.1-1.1v-7.3h5v7.3C148.3,53.5,147.8,54,147.2,54z"
+            />
+            <path
+              className="st9"
+              d="M157.2,54h-2.6c-0.6,0-1-0.5-1-1v-7.3h4.7V53C158.2,53.6,157.7,54,157.2,54z"
+            />
+            <line className="st9" x1="135.8" y1="54.1" x2="135.8" y2="62" />
+            <line className="st9" x1="145.8" y1="54.1" x2="145.8" y2="62" />
+            <line className="st9" x1="155.8" y1="54.1" x2="155.8" y2="62" />
+          </g>
+        </g>
+      </svg>
+    );
+  }
+}
+
+ReactDOM.render(<Synth />, document.getElementById("app"));
diff --git a/reactive-synth/src/style.sass b/reactive-synth/src/style.sass
new file mode 100644
index 0000000..7b4dce9
--- /dev/null
+++ b/reactive-synth/src/style.sass
@@ -0,0 +1,88 @@
+// Font
+
+@font-face src: url(https://assets.codepen.io/4291733/SemplicitaPro-Medium.woff2)
+  font-family: SemplicitaPro
+
+// Motif colors
+
+$motif-base: #ff79e6
+$motif-low: #ffa6f7
+$motif-dark: #892276
+$motif-shadow: #ffe1f7
+
+// Common colors
+
+$grey-low: #efefef
+
+// Synth
+
+$synth-w: 320px
+
+// Spacing (margins && paddings)
+
+$space-xl: 36px
+
+// Responsive breakpoints
+
+$res-laptop-h: 720px
+
+// Styling
+
+*
+  margin: 0
+  padding: 0
+  box-sizing: border-box
+  user-select: none
+
+#app
+  height: 100vh
+  width: 100%
+  display: flex
+  align-items: center
+  justify-content: center
+  padding: 0 $space-xl
+  background: $grey-low
+
+  .Synth
+    width: $synth-w
+    
+    .preset, .key
+      cursor: pointer
+    
+    .st0
+      fill: $motif-low
+      stroke: $motif-dark
+      stroke-miterlimit:10
+      
+    .st1
+      fill: $motif-dark
+      
+    .st2
+      fill: $motif-base
+      
+    .st3
+      fill: white
+      stroke: $motif-dark
+      stroke-miterlimit:10
+      
+    .st4
+      fill: $motif-shadow
+      
+    .st5
+      fill: $motif-low
+      
+    .st6
+      fill: white
+      
+    .st7
+      fill:#F993EA
+      
+    .st8
+      fill: white
+      stroke: $motif-base
+      stroke-miterlimit: 10
+      
+    .st9
+      fill: $motif-base 
+      stroke: white
+      stroke-miterlimit: 10
\ No newline at end of file
diff --git a/resizable-elements-w-scoped-css-variables-touch-support/README.markdown b/resizable-elements-w-scoped-css-variables-touch-support/README.markdown
new file mode 100644
index 0000000..226b41a
--- /dev/null
+++ b/resizable-elements-w-scoped-css-variables-touch-support/README.markdown
@@ -0,0 +1,8 @@
+# Resizable elements w/ scoped CSS variables & touch support 😎✂️
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jh3y/pen/dmoPMa](https://codepen.io/jh3y/pen/dmoPMa).
+
+ A demo for creating resizable elements using scoped `CSS` variables!
+
+With added touch support 
+
+Enjoy!
\ No newline at end of file
diff --git a/resizable-elements-w-scoped-css-variables-touch-support/dist/index.html b/resizable-elements-w-scoped-css-variables-touch-support/dist/index.html
new file mode 100644
index 0000000..50a2cd8
--- /dev/null
+++ b/resizable-elements-w-scoped-css-variables-touch-support/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Resizable elements w/ scoped CSS variables & touch support 😎✂️</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<div class="image-container" style="background-image: url(https://source.unsplash.com/random/400x400?bear&amp;v=NaN);"></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/resizable-elements-w-scoped-css-variables-touch-support/dist/script.js b/resizable-elements-w-scoped-css-variables-touch-support/dist/script.js
new file mode 100644
index 0000000..926b323
--- /dev/null
+++ b/resizable-elements-w-scoped-css-variables-touch-support/dist/script.js
@@ -0,0 +1,110 @@
+function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}class Resizable {
+
+
+
+
+  constructor(_element, _options) {_defineProperty(this, "defaultOptions", { ghosting: true, handles: ['n', 's', 'e', 'w', 'se', 'sw', 'ne', 'nw'] });_defineProperty(this, "create",
+
+
+
+
+
+
+
+    () => {
+      const {
+        element,
+        options } =
+      this;
+      element.classList.add('rsizable');
+      for (let handle of options.handles) this.createHandle(handle);
+    });_defineProperty(this, "start",
+
+    e => {
+      let {
+        pageX: startX,
+        pageY: startY,
+        touches } =
+      e;
+
+      if (touches && touches.length === 1) {
+        startX = touches[0].pageX;
+        startY = touches[0].pageY;
+      }
+
+      const {
+        height,
+        width,
+        x,
+        y } =
+      this.element.getBoundingClientRect();
+
+
+      const resize = evt => {
+        evt.preventDefault();
+        const direction = e.target.getAttribute('data-rsize-direction');
+        let { pageX: X, pageY: Y, touches } = evt;
+        if (touches && touches.length === 1) {
+          X = touches[0].pageX;
+          Y = touches[0].pageY;
+        }
+        for (const d of direction.split('')) {
+          switch (d) {
+            case 'n':
+              // If position absolute, set top to Y
+              this.element.style.setProperty('--height', height + (startY - Y));
+              break;
+            case 's':
+              this.element.style.setProperty('--height', height + (Y - startY));
+              break;
+            case 'e':
+              this.element.style.setProperty('--width', width + (X - startX));
+              break;
+            case 'w':
+              // If position absolute, set left to X
+              this.element.style.setProperty('--width', width + (startX - X));
+              break;}
+
+        }
+      };
+
+      const end = () => {
+        if (this.ghost) this.ghost.remove();
+        document.body.removeEventListener('mousemove', resize);
+        document.body.removeEventListener('touchmove', resize);
+        document.body.removeEventListener('mouseup', end);
+        document.body.removeEventListener('touchend', end);
+      };
+
+      document.body.addEventListener('mousemove', resize);
+      document.body.addEventListener('mouseup', end);
+
+      // Add touch support 😉
+      document.body.addEventListener('touchmove', resize);
+      document.body.addEventListener('touchend', end);
+
+      if (this.options.ghosting) {
+        const ghost = document.createElement('span');
+        ghost.classList.add('rsizable__ghost');
+        ghost.style.setProperty('--x', x + 1);
+        ghost.style.setProperty('--y', y + 1);
+        ghost.style.setProperty('--height', height - 2);
+        ghost.style.setProperty('--width', width - 2);
+        document.body.appendChild(ghost);
+        this.ghost = ghost;
+      }
+    });_defineProperty(this, "createHandle",
+
+    direction => {
+      const newHandle = document.createElement('span');
+      newHandle.classList.add('rsizable__handle', `rsizable__handle--${direction}`);
+      newHandle.setAttribute('data-rsize-direction', direction);
+      newHandle.style.setProperty('--cursor', `${direction}-resize`);
+      this.element.appendChild(newHandle);
+      newHandle.addEventListener('mousedown', this.start);
+      newHandle.addEventListener('touchstart', this.start);
+    });this.element = _element;this.options = Object.assign({}, this.defaultOptions, _options);this.handles = this.options.handles;this.ghosting = this.options.ghosting;this.create();}}
+
+
+const imageToResize = document.querySelector('.image-container');
+const resizableImage = new Resizable(imageToResize, {});
\ No newline at end of file
diff --git a/resizable-elements-w-scoped-css-variables-touch-support/dist/style.css b/resizable-elements-w-scoped-css-variables-touch-support/dist/style.css
new file mode 100644
index 0000000..eb2de82
--- /dev/null
+++ b/resizable-elements-w-scoped-css-variables-touch-support/dist/style.css
@@ -0,0 +1,114 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  align-items: center;
+  background: radial-gradient(#e74c3c, #000);
+  display: flex;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+.image-container {
+  background-color: #fafafa;
+  height: 200px;
+  width: 200px;
+  background-size: cover;
+  background-position: center;
+}
+.rsizable {
+  position: relative;
+  height: calc(var(--height, 200) * 1px);
+  width: calc(var(--width, 200) * 1px);
+}
+.rsizable__ghost {
+  border: 5px dashed #fff;
+  height: calc(var(--height) * 1px);
+  width: calc(var(--width) * 1px);
+  position: absolute;
+  left: calc(var(--x) * 1px);
+  top: calc(var(--y) * 1px);
+}
+.rsizable__handle {
+  border-radius: 100%;
+  height: 50px;
+  width: 50px;
+  display: inline-block;
+  cursor: var(--cursor, e);
+  position: absolute;
+  -webkit-transform: translate(var(--x, 0), var(--y, 0));
+          transform: translate(var(--x, 0), var(--y, 0));
+}
+.rsizable__handle:after {
+  border-radius: 100%;
+  content: '';
+  background-color: #fff;
+  height: 20px;
+  width: 20px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.rsizable__handle--n,
+.rsizable__handle--s {
+  left: 50%;
+  margin-left: -25px;
+}
+.rsizable__handle--n {
+  top: 0;
+}
+.rsizable__handle--s {
+  bottom: 0;
+}
+.rsizable__handle--e,
+.rsizable__handle--w {
+  top: 50%;
+  margin-top: -25px;
+}
+.rsizable__handle--e {
+  right: 0;
+}
+.rsizable__handle--w {
+  left: 0;
+}
+.rsizable__handle--ne {
+  top: 0;
+  right: 0;
+}
+.rsizable__handle--se {
+  bottom: 0;
+  right: 0;
+}
+.rsizable__handle--nw {
+  top: 0;
+  left: 0;
+}
+.rsizable__handle--sw {
+  bottom: 0;
+  left: 0;
+}
+.rsizable__handle--nw,
+.rsizable__handle--n,
+.rsizable__handle--ne {
+  --y: -50%;
+}
+.rsizable__handle--nw,
+.rsizable__handle--w,
+.rsizable__handle--sw {
+  --x: -50%;
+}
+.rsizable__handle--ne,
+.rsizable__handle--e,
+.rsizable__handle--se {
+  --x: 50%;
+}
+.rsizable__handle--sw,
+.rsizable__handle--s,
+.rsizable__handle--se {
+  --y: 50%;
+}
diff --git a/resizable-elements-w-scoped-css-variables-touch-support/license.txt b/resizable-elements-w-scoped-css-variables-touch-support/license.txt
new file mode 100644
index 0000000..5afa9d0
--- /dev/null
+++ b/resizable-elements-w-scoped-css-variables-touch-support/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Jhey (https://codepen.io/jh3y/pen/dmoPMa)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/resizable-elements-w-scoped-css-variables-touch-support/src/index.pug b/resizable-elements-w-scoped-css-variables-touch-support/src/index.pug
new file mode 100644
index 0000000..b1192ca
--- /dev/null
+++ b/resizable-elements-w-scoped-css-variables-touch-support/src/index.pug
@@ -0,0 +1 @@
+.image-container(style=`background-image: url(https://source.unsplash.com/random/400x400?bear&v=${Math.floor(20 * Math.random() + i)})`)
\ No newline at end of file
diff --git a/resizable-elements-w-scoped-css-variables-touch-support/src/script.babel b/resizable-elements-w-scoped-css-variables-touch-support/src/script.babel
new file mode 100644
index 0000000..d066186
--- /dev/null
+++ b/resizable-elements-w-scoped-css-variables-touch-support/src/script.babel
@@ -0,0 +1,110 @@
+class Resizable {
+  defaultOptions = {
+    ghosting: true,
+    handles: ['n', 's', 'e', 'w', 'se', 'sw', 'ne', 'nw']
+  }
+  constructor(element, options) {
+    this.element = element
+    this.options = Object.assign({}, this.defaultOptions, options)
+    this.handles = this.options.handles
+    this.ghosting = this.options.ghosting
+    this.create()
+  }
+
+  create = () => {
+    const {
+      element,
+      options,
+    } = this
+    element.classList.add('rsizable')
+    for (let handle of options.handles) this.createHandle(handle)
+  }
+
+  start = (e) => {
+    let {
+      pageX: startX,
+      pageY: startY,
+      touches,
+    } = e
+
+    if (touches && touches.length === 1) {
+      startX = touches[0].pageX
+      startY = touches[0].pageY
+    }
+
+    const {
+      height,
+      width,
+      x,
+      y,
+    } = this.element.getBoundingClientRect()
+
+
+    const resize = (evt) => {
+      evt.preventDefault()
+      const direction = e.target.getAttribute('data-rsize-direction')
+      let { pageX: X, pageY: Y, touches } = evt
+      if (touches && touches.length === 1) {
+        X = touches[0].pageX
+        Y = touches[0].pageY
+      }
+      for (const d of direction.split('')) {
+        switch(d) {
+          case 'n':
+            // If position absolute, set top to Y
+            this.element.style.setProperty('--height', height + (startY - Y))
+            break
+          case 's':
+            this.element.style.setProperty('--height', height + (Y - startY))
+            break
+          case 'e':
+            this.element.style.setProperty('--width', width + (X - startX))
+            break
+          case 'w':
+            // If position absolute, set left to X
+            this.element.style.setProperty('--width', width + (startX - X))
+            break
+        }
+      }
+    }
+
+    const end = () => {
+      if (this.ghost) this.ghost.remove()
+      document.body.removeEventListener('mousemove', resize)
+      document.body.removeEventListener('touchmove', resize)
+      document.body.removeEventListener('mouseup', end)
+      document.body.removeEventListener('touchend', end)
+    }
+
+    document.body.addEventListener('mousemove', resize)
+    document.body.addEventListener('mouseup', end)
+
+    // Add touch support 😉
+    document.body.addEventListener('touchmove', resize)
+    document.body.addEventListener('touchend', end)
+
+    if (this.options.ghosting) {
+      const ghost = document.createElement('span')
+      ghost.classList.add('rsizable__ghost')
+      ghost.style.setProperty('--x', x + 1)
+      ghost.style.setProperty('--y', y + 1)
+      ghost.style.setProperty('--height', height - 2)
+      ghost.style.setProperty('--width', width - 2)
+      document.body.appendChild(ghost)
+      this.ghost = ghost
+    }
+  }
+
+  createHandle = (direction) => {
+    const newHandle = document.createElement('span')
+    newHandle.classList.add('rsizable__handle', `rsizable__handle--${direction}`)
+    newHandle.setAttribute('data-rsize-direction', direction)
+    newHandle.style.setProperty('--cursor', `${direction}-resize`)
+    this.element.appendChild(newHandle)
+    newHandle.addEventListener('mousedown', this.start)
+    newHandle.addEventListener('touchstart', this.start)
+  }
+}
+
+const imageToResize = document.querySelector('.image-container')
+const resizableImage = new Resizable(imageToResize, {})
diff --git a/resizable-elements-w-scoped-css-variables-touch-support/src/style.styl b/resizable-elements-w-scoped-css-variables-touch-support/src/style.styl
new file mode 100644
index 0000000..1226fb6
--- /dev/null
+++ b/resizable-elements-w-scoped-css-variables-touch-support/src/style.styl
@@ -0,0 +1,113 @@
+*
+  box-sizing border-box
+
+body
+  align-items center
+  background radial-gradient(#e74c3c, black)
+  display flex
+  justify-content center
+  height 100vh
+  width 100vw
+  overflow hidden
+  margin 0
+  padding 0
+
+.image-container
+  background-color #fafafa
+  height 200px
+  width 200px
+  background-size cover
+  background-position center
+
+.rsizable
+  position relative
+  height calc(var(--height, 200) * 1px)
+  width calc(var(--width, 200) * 1px)
+
+  &__ghost
+    border 5px dashed white
+    height calc(var(--height) * 1px)
+    width calc(var(--width) * 1px)
+    position absolute
+    left calc(var(--x) * 1px)
+    top calc(var(--y) * 1px)
+
+  $handleSize = 50px
+  &__handle
+    border-radius 100%
+    height $handleSize
+    width $handleSize
+    display inline-block
+    cursor var(--cursor, e)
+    position absolute
+    transform translate(var(--x, 0), var(--y, 0))
+
+    &:after
+      border-radius 100%
+      content ''
+      background-color white
+      height $handleSize * 0.4
+      width  $handleSize * 0.4
+      position absolute
+      top 50%
+      left 50%
+      transform translate(-50%, -50%)
+
+    &--n
+    &--s
+      left 50%
+      margin-left -($handleSize / 2)
+
+    &--n
+      top 0
+
+    &--s
+      bottom 0
+
+    &--e
+    &--w
+      top 50%
+      margin-top -($handleSize / 2)
+
+    &--e
+      right 0
+
+    &--w
+      left 0
+
+    &--ne
+      top 0
+      right 0
+
+    &--se
+      bottom 0
+      right 0
+
+    &--nw
+      top 0
+      left 0
+
+    &--sw
+      bottom 0
+      left 0
+
+    &--nw
+    &--n
+    &--ne
+      --y -50%
+
+    &--nw
+    &--w
+    &--sw
+      --x -50%
+
+    &--ne
+    &--e
+    &--se
+      --x 50%
+
+    &--sw
+    &--s
+    &--se
+      --y 50%
+
diff --git a/responsive-castle/README.markdown b/responsive-castle/README.markdown
new file mode 100644
index 0000000..59276c6
--- /dev/null
+++ b/responsive-castle/README.markdown
@@ -0,0 +1,5 @@
+# Responsive castle
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/vastrideside/pen/gOGPZNd](https://codepen.io/vastrideside/pen/gOGPZNd).
+
+This is a responsive castle because I think maybe our ancestors would have found it useful to have a fortress that could adapt to the frame...
diff --git a/responsive-castle/dist/index.html b/responsive-castle/dist/index.html
new file mode 100644
index 0000000..e15e3e5
--- /dev/null
+++ b/responsive-castle/dist/index.html
@@ -0,0 +1,757 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Responsive castle</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="fade" style="pointer-events:none;position:fixed;width:100vw;height:100vh;background:black;z-index:9;"></div>
+<div id="draw">
+  <div id="resize">
+    <div>
+      <div id="instructions"><span>RESIZE SCENE</span>
+
+        <svg id="arrow" width="90" height="72" viewBox="0 0 90 72">
+          <path style="fill:#13b4e5" d="M72.2,20.18c-.57,5.18-1.25,8.66-2.34,11.15A69.47,69.47,0,0,0,60,26.12a50.77,50.77,0,0,0-16.6-4.41,35.12,35.12,0,0,0-16.81,2.91,44.7,44.7,0,0,0-13.48,9.63l.66.74a42.93,42.93,0,0,1,13.85-7.65,31.32,31.32,0,0,1,15.18-.85A45.24,45.24,0,0,1,57,32.12,58.37,58.37,0,0,1,64.12,37c-3.2,1.46-7.72,2.53-14.28,4.83l0,3c9,.08,18-1.13,26.91-2.5.19-7.49.1-15.06-1.73-22.38Z" />
+        </svg>
+      </div>
+    </div>
+  </div>
+
+  <svg id="scene" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080">
+    <defs>
+      <linearGradient id="sky" class="sky" x1="960" y1="1080" x2="960" gradientUnits="userSpaceOnUse">
+        <stop offset="0" stop-color="#13b4e5" />
+        <stop offset="0.56" stop-color="#02175b" />
+        <stop offset="1" />
+      </linearGradient>
+    </defs>
+    <g class="sky">
+      <rect width="1920" height="1080" style="fill: url(#sky)" />
+    </g>
+    <g class="stars" style="opacity: 0.7000000000000001">
+      <g class="stars-2" data-name="stars">
+        <g style="opacity: 0.277595035439361">
+          <circle cx="72.95" cy="43.88" r="4.15" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.325750913893254">
+          <circle cx="49.3" cy="44.3" r="3.74" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.565807421840206">
+          <circle cx="15.93" cy="84.79" r="2.99" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.37414605214159">
+          <circle cx="57.28" cy="161.53" r="2.42" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.812281778605826">
+          <circle cx="41.61" cy="235.13" r="2.75" style="fill: #efefbf" />
+        </g>
+        <circle cx="9.56" cy="308.05" r="2.75" style="fill: #efefbf" />
+        <g style="opacity: 0.457970255796699">
+          <circle cx="10.7" cy="388.1" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.160384779396265">
+          <circle cx="38.54" cy="442.84" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.11476820801767">
+          <circle cx="58.16" cy="462.13" r="3.34" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.124022074355704">
+          <circle cx="70.49" cy="477.4" r="3.98" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.180389451798874">
+          <circle cx="109.56" cy="493.1" r="5.49" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.168691938926053">
+          <circle cx="174.98" cy="525.58" r="3.91" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.758924346916585">
+          <circle cx="241.7" cy="467.53" r="4.33" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.344529667470351">
+          <circle cx="275.57" cy="318.37" r="3.54" style="fill: #efefbf" />
+        </g>
+        <circle cx="288.57" cy="201.02" r="2.83" style="fill: #efefbf" />
+        <g style="opacity: 0.402707697699135">
+          <circle cx="273.62" cy="129.03" r="3.18" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.255890667408369">
+          <circle cx="365.12" cy="70.93" r="3.57" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.299427442256248">
+          <circle cx="421.12" cy="118.53" r="4.21" style="fill: #efefbf" />
+        </g>
+        <circle cx="421.91" cy="283.85" r="2.67" style="fill: #efefbf" />
+        <circle cx="438.65" cy="351.34" r="1.93" style="fill: #efefbf" />
+        <g style="opacity: 0.613065766479503">
+          <circle cx="631.94" cy="247.09" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.416060699355363">
+          <circle cx="786.24" cy="133.58" r="3.36" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.42027904468132">
+          <circle cx="899.26" cy="133.71" r="1.49" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.515982773206423">
+          <circle cx="1097.75" cy="170.75" r="2.79" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.27225447788998">
+          <circle cx="1546.42" cy="155.81" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.211434637553776">
+          <circle cx="1772.1" cy="119.08" r="3.5" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.889276764565972">
+          <circle cx="1917.25" cy="119.64" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.346501238050084">
+          <circle cx="1868.65" cy="316.69" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.589635936375129">
+          <circle cx="1832.13" cy="374.58" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.484985976941031">
+          <circle cx="1750.65" cy="417.25" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.541770508753047">
+          <circle cx="1616.45" cy="447.91" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.7567862166518">
+          <circle cx="1561.41" cy="477.18" r="3.48" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.635774917117411">
+          <circle cx="1460.29" cy="555.95" r="3.32" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.590522857614012">
+          <circle cx="1452.6" cy="568.4" r="3.01" style="fill: #efefbf" />
+        </g>
+        <circle cx="1186.89" cy="406.19" r="2.99" style="fill: #efefbf" />
+        <g style="opacity: 0.197495326829206">
+          <circle cx="1052.64" cy="378.68" r="4.52" style="fill: #efefbf" />
+        </g>
+        <circle cx="888.42" cy="377.18" r="2.75" style="fill: #efefbf" />
+        <circle cx="687.06" cy="404.23" r="2.75" style="fill: #efefbf" />
+        <circle cx="589.38" cy="461.24" r="2.75" style="fill: #efefbf" />
+        <g style="opacity: 0.705730471057717">
+          <circle cx="452.87" cy="519.86" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.524726826618837">
+          <circle cx="323.77" cy="690.95" r="3.53" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.419985822644295">
+          <circle cx="279.43" cy="700.43" r="3.48" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.443559807675169">
+          <circle cx="327.22" cy="420.71" r="3.61" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.315755858170207">
+          <circle cx="379.22" cy="325.01" r="3.27" style="fill: #efefbf" />
+        </g>
+        <circle cx="429.23" cy="247.09" r="2.77" style="fill: #efefbf" />
+        <g style="opacity: 0.104987988099219">
+          <circle cx="519.18" cy="140.87" r="5.38" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.202913773616705">
+          <circle cx="587.79" cy="95.74" r="4.97" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.411795798361377">
+          <circle cx="769.85" cy="35.61" r="5.12" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.761941990123419">
+          <circle cx="897.92" cy="19.69" r="2.37" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.384652628469805">
+          <circle cx="1242.23" cy="20.3" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.499155900151065">
+          <circle cx="1392.09" cy="13.81" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.208992307367029">
+          <circle cx="1533.57" cy="13.98" r="2.75" style="fill: #efefbf" />
+        </g>
+        <circle cx="1625.12" cy="16.98" r="2.75" style="fill: #efefbf" />
+        <g style="opacity: 0.626391871117238">
+          <circle cx="1600.1" cy="70.47" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.518364144209206">
+          <circle cx="1415.28" cy="163.28" r="3.58" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.261954673564098">
+          <circle cx="1261.41" cy="202.46" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.606793964601258">
+          <circle cx="1063" cy="270.26" r="3.01" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.139994498030557">
+          <circle cx="998.94" cy="312.45" r="4.74" style="fill: #efefbf" />
+        </g>
+        <circle cx="1151.05" cy="330.12" r="2.75" style="fill: #efefbf" />
+        <g style="opacity: 0.442107434892553">
+          <circle cx="1475.78" cy="301.08" r="4.65" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.285844629379034">
+          <circle cx="1594.74" cy="274.5" r="4.74" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.334368420996644">
+          <circle cx="1643.91" cy="268.03" r="4.24" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.545408877318136">
+          <circle cx="1437.01" cy="313.58" r="3.28" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.192676639537843">
+          <circle cx="1072.84" cy="356.4" r="4.2" style="fill: #efefbf" />
+        </g>
+        <circle cx="846.84" cy="357.26" r="2.75" style="fill: #efefbf" />
+        <circle cx="685.68" cy="357.12" r="2.75" style="fill: #efefbf" />
+        <g style="opacity: 0.49902474028636">
+          <circle cx="583.66" cy="337.24" r="2.75" style="fill: #efefbf" />
+        </g>
+        <circle cx="485.6" cy="319.58" r="1.94" style="fill: #efefbf" />
+        <g style="opacity: 0.107338954113952">
+          <circle cx="318.97" cy="374.73" r="4.51" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.318886623460542">
+          <circle cx="147.21" cy="485.59" r="4.47" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.260634421904909">
+          <circle cx="76.78" cy="566.06" r="4.2" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.215547514525137">
+          <circle cx="40.05" cy="637.89" r="3.62" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.303587813489648">
+          <circle cx="56.09" cy="681.93" r="3.89" style="fill: #efefbf" />
+        </g>
+        <circle cx="329.98" cy="784.06" r="2.75" style="fill: #efefbf" />
+        <circle cx="513.82" cy="747.93" r="2.75" style="fill: #efefbf" />
+        <circle cx="748.95" cy="566.29" r="2.75" style="fill: #efefbf" />
+        <circle cx="1189.93" cy="603.56" r="2.75" style="fill: #efefbf" />
+        <circle cx="1356.19" cy="613.64" r="2.75" style="fill: #efefbf" />
+        <g style="opacity: 0.148610002175251">
+          <circle cx="1473.33" cy="630.42" r="3.79" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.173314836730801">
+          <circle cx="1540.01" cy="650.41" r="3.8" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.768312240531127">
+          <circle cx="1621.96" cy="675.01" r="3.47" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.326470511413166">
+          <circle cx="1689.41" cy="605.53" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.181823445276986">
+          <circle cx="1650.13" cy="354.39" r="3.9" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.314848235088404">
+          <circle cx="1542.1" cy="170.72" r="2.67" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.231252622812415">
+          <circle cx="1394.73" cy="99.18" r="3.91" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.188431667918274">
+          <circle cx="967.6" cy="80.26" r="1.65" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.105397223680777">
+          <circle cx="757.38" cy="81.04" r="5.61" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.298834387320642">
+          <circle cx="595.55" cy="65.38" r="3.85" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.166271503835047">
+          <circle cx="433.27" cy="62.97" r="3.98" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.355843654517834">
+          <circle cx="309.26" cy="63.1" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.065965826435126">
+          <circle cx="184.41" cy="67.17" r="4.26" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.149475404879551">
+          <circle cx="116.71" cy="103.99" r="6.41" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.189498158953082">
+          <circle cx="131.08" cy="182.26" r="3.96" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.216488845579902">
+          <circle cx="170.91" cy="185.16" r="4.5" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.292759150748337">
+          <circle cx="197.99" cy="183.13" r="3.96" style="fill: #efefbf" />
+        </g>
+        <circle cx="139.23" cy="285.26" r="2.07" style="fill: #efefbf" />
+        <circle cx="146.88" cy="286.17" r="2.04" style="fill: #efefbf" />
+      </g>
+    </g>
+    <g class="back-towers">
+      <path class="four" d="M1393.39,630.22c-16.52-23.49-37.19-84.7-37-87.42-14.53,46.28-19.91,70.24-37.39,87.42a44.38,44.38,0,0,1,7.45-2.59c0,1.63,0,4.82,0,6.41l8.35,14.66c1.61,49.4,1.61,173.46,0,222.86H1378c-2.1-53.17-2.76-174.52,0-222.86l8.35-14.66c0-1.5,0-4.67,0-6.18A64,64,0,0,1,1393.39,630.22Z" style="fill: #1d3d6b;opacity: 0.8" />
+      <path class="tree" d="M1194.59,240.25c-30.8-43.81-69.35-157.94-69-163-27.09,86.31-37.13,131-69.73,163a82.51,82.51,0,0,1,13.88-4.82c0,3,0,9,0,11.95l15.58,27.33c3,92.13,3,522.07,0,614.2H1166c-3.91-99.15-5.15-524,0-614.2l15.58-27.33c0-2.8,0-8.72,0-11.53A121.92,121.92,0,0,1,1194.59,240.25Z" style="fill: #1d3d6b;opacity: 0.8" />
+      <path class="two" d="M556.23,532.68c-8.9-12.65-20-45.62-19.94-47.09-7.83,24.93-10.73,37.84-20.14,47.09a23.46,23.46,0,0,1,4-1.39v3.45l4.5,7.9c.87,26.61,0,343.7,0,343.7H548s-1.49-317.66,0-343.7l4.5-7.9c0-.81,0-2.52,0-3.33A36.21,36.21,0,0,1,556.23,532.68Z" style="fill: #1d3d6b;opacity: 0.8" />
+      <path class="one" d="M1029.59,396.13c-2.64-3.78-5.12-7.71-7.5-11.69h0c-3.61-6.05-7.1-12.5-10.35-18.83-7.44-1.43-15.29-2.52-23.37-3.3,0-10,0-36.12,0-45.77l13-22.73v-4.06c5.94-.68,9.9-1.35,10.87-1.87-25.66-36.54-57.64-131.23-57.41-135.58l-.3.95v0c-16.39,46.14-22.94,98.2-57.71,134.65a65.14,65.14,0,0,0,11.55,2.68c-2.09,2.06,12.21,23.92,12.95,26v46.64c-6.67.82-13.19,1.85-19.74,3.1-1.15,2-2.34,3.86-3.56,5.76h0a138.05,138.05,0,0,1-19.49,24.09,77.34,77.34,0,0,1,9.45-3.62l-9.45,3.62a85.32,85.32,0,0,0,15.12,3.5v4.27l17,29.75c3.28,100.33,3.28,375.71,0,476H998.4c-4-99.54-5.31-375.24-1-457.3l0,0q.47-9.43,1-18.75l17-29.75v-5.33C1023.13,397.69,1028.32,396.81,1029.59,396.13Z" style="fill: #1d3d6b;opacity: 0.8" />
+    </g>
+    <g class="house">
+      <g class="inner-house">
+        <path class="house-2" data-name="house" d="M1305.08,327q16.15-1.53,32.5-3.85h0c-39.76-64.27-72.58-126.22-96.51-185.19-25,57.49-58.58,120.07-96.51,185.19h0q16,2.36,32.27,3.93c3.52,35.69,2.33,75-1.3,116.24H1306.6C1302.56,401.47,1301,362.07,1305.08,327Z" style="fill: #00246b" />
+        <g class="shad-grp" style="opacity: 0.7000000000000001">
+          <path class="roof-back" d="M1144.56,323.13c62,9.13,126.21,9.48,193,0L1245.32,252Z" style="fill: #040433" />
+          <path class="wall" d="M1306.6,443.3H1175.53c4-45.65,5.07-89,0-127.66H1306.6C1300.68,353.48,1302.12,396.91,1306.6,443.3Z" style="fill: #4f4e4f" />
+          <path class="shadow" d="M1306.6,315.64H1175.53c.85,6.42,1.5,13,2,19.65,47-18.44,105.59-12.82,105.59,18.82,0,23.51-1,56.49-2.29,89.19h25.75C1302.12,396.91,1300.68,353.48,1306.6,315.64Z" style="opacity: 0.2" />
+          <path class="window" d="M1290.71,418.45h-30.83c1.18-16.2-6-59,15.41-64.34C1296.72,359.4,1289.54,402.31,1290.71,418.45Z" style="fill: #e2d600" />
+          <path class="door-edge" d="M1276.29,354.11a7.44,7.44,0,0,0-4.21.88c17.15,11.28,10.92,46.47,12,63.27l7.66.19C1290.57,402,1297.69,360.09,1276.29,354.11Z" style="fill: #3a393a" />
+          <path class="roof" d="M1337.58,323.13a762.43,762.43,0,0,0-193,0c37.93-65.12,71.56-127.7,96.51-185.19C1265,196.91,1297.82,258.86,1337.58,323.13Z" style="fill: #090970" />
+          <path class="shadow-2" data-name="shadow" d="M1244.83,147c52.36,179.22,14.4,135.15-85.07,149.7q-7.47,13.13-15.2,26.4a762.43,762.43,0,0,1,193,0C1299.86,262.15,1268.4,203.27,1244.83,147Z" style="opacity: 0.2" />
+          <g class="briques">
+            <path class="brique" d="M1198.85,348c6.3-1.3,20.94-3,27-2.51" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-2" data-name="brique" d="M1234.43,392.92c4.5-.16,9.19-.69,13.28,0" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+          </g>
+        </g>
+      </g>
+    </g>
+    <g class="big-tower">
+      <g class="inner-big-tower">
+        <path class="tower" d="M1347.22,418.34v20.14q-22-4-43.73-6.43V411.91q-20.37-2.22-40.56-3V429q-22-.87-43.73-.06V408.84q-20.35.75-40.56,2.94v20.14q-22,2.38-43.72,6.46V418.24q-11.1,2.07-22.15,4.58v63.29l35.74,62.71c11.58,193.72,9.14,134.21,0,359.63,56.31,9.82,118.26,9.37,185.11,0-6.9-211.43-6.9-148.2,0-359.63l35.75-62.71V422.82Q1358.27,420.36,1347.22,418.34Z" style="fill: #00246b" />
+        <g class="shad-grp-2" data-name="shad-grp" style="opacity: 0.7000000000000001">
+          <path class="tower-2" data-name="tower" d="M1347.22,418.34v20.14q-22-4-43.73-6.43V411.91q-20.37-2.22-40.56-3V429q-22-.87-43.73-.06V408.84q-20.35.75-40.56,2.94v20.14q-22,2.38-43.72,6.46V418.24q-11.1,2.07-22.15,4.58v63.29l35.74,62.71c11.58,193.72,9.14,134.21,0,359.63,56.31,9.82,118.26,9.37,185.11,0-6.9-211.43-6.9-148.2,0-359.63l35.75-62.71V422.82Q1358.27,420.36,1347.22,418.34Z" style="fill: #605f60" />
+          <g class="briques-2" data-name="briques">
+            <path class="brique-3" data-name="brique" d="M1180.87,617a171.22,171.22,0,0,1,29.63-2.45" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6.76021766662598px" />
+            <path class="brique-4" data-name="brique" d="M1190.36,698.61a164.94,164.94,0,0,1,28.48-1.73" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6.76021766662598px" />
+            <path class="brique-5" data-name="brique" d="M1267.17,671.57a181.63,181.63,0,0,1,31.93,2.15" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6.76021766662598px" />
+          </g>
+          <path class="window-2" data-name="window" d="M1315,641.69h-12.75V614.82c0-3.52,4.25-12.56,6.37-12.56s6.38,9,6.38,12.56Z" style="fill: #e2d600" />
+          <path class="shadow-3" data-name="shadow" d="M1369.37,486.11c-64.23-20.14-200.58-17.55-256.6,0l35.74,62.71q1.17,19.6,2.15,39.51c37.15-29.79,126.75-32.7,124.64,22.19-2.06,53.6-2.06,196.27-21.93,304.88a726.11,726.11,0,0,0,80.25-6.95c-6.9-211.43-6.9-148.2,0-359.63Z" style="opacity: 0.2" />
+          <path class="col" d="M1333.62,548.82l35.75-62.71c-64.23-20.14-200.58-17.55-256.6,0l35.74,62.71C1199.43,532.42,1285.3,532.85,1333.62,548.82Z" style="opacity: 0.2" />
+        </g>
+        <path class="window-edge" d="M1308.58,602.26a1.36,1.36,0,0,0-.75.32c2.24,1.58,5.62,9.1,5.62,12.24v26.87H1315V614.82C1315,611.3,1310.71,602.26,1308.58,602.26Z" style="fill: #494949" />
+      </g>
+    </g>
+    <g class="big-tower-left">
+      <path class="tower-3" data-name="tower" d="M797.88,418.59c-33.94-48.27-76.42-174-76.06-179.62C692,334.06,680.91,383.29,645,418.59a90.17,90.17,0,0,1,15.3-5.32c0,3.35,0,9.89,0,13.17l17.16,30.11c3.31,101.51,3.31,356.42,0,457.92A352.8,352.8,0,0,0,716,917.81h0a251.43,251.43,0,0,0,50.34-3.33c-4.31-109.25-5.68-358.6,0-457.92l17.16-30.11c0-3.09,0-9.61,0-12.7A132.12,132.12,0,0,1,797.88,418.59Z" style="fill: #00246b" />
+      <g class="shad-grp-3" data-name="shad-grp" style="opacity: 0.5">
+        <path class="back-roog" d="M797.88,418.59l-74.37-52.21L645,418.59C680.21,431,791.25,422.11,797.88,418.59Z" style="fill: #040433" />
+        <path class="tower-4" data-name="tower" d="M783.48,407v19.46l-17.16,30.11c-5.56,93-4.39,349.7,0,457.92-27,4.72-56.78,4.5-88.87,0,3.31-101.5,3.31-356.41,0-457.92l-17.16-30.11V406.16c0,.54,65.5-36.05,65.5-36.05Z" style="fill: #605f60" />
+        <g class="briques-3" data-name="briques">
+          <path class="brique-6" data-name="brique" d="M750.78,489.28a82.19,82.19,0,0,0-14.22-1.17" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 3.24548773881467px" />
+          <path class="brique-7" data-name="brique" d="M746.23,528.46a80.53,80.53,0,0,0-13.68-.83" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 3.24548773881467px" />
+          <path class="brique-8" data-name="brique" d="M709.35,829.13a87.57,87.57,0,0,0-15.33,1" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 3.24548773881467px" />
+        </g>
+        <g class="windows">
+          <path class="window-3" data-name="window" d="M757.21,514.25H751.7V502.66c0-1.52,1.84-5.42,2.76-5.42s2.75,3.9,2.75,5.42Z" style="fill: #e2d600" />
+          <path class="window-edge-2" data-name="window-edge" d="M754.46,497.24a.63.63,0,0,0-.33.13c1,.69,2.42,3.93,2.42,5.29v11.59h.66V502.66C757.21,501.14,755.37,497.24,754.46,497.24Z" style="fill: #494949" />
+          <path class="window-4" data-name="window" d="M735.52,514.25h-6V501.69c0-1.65,2-5.88,3-5.88s3,4.23,3,5.88Z" style="fill: #e2d600" />
+          <path class="window-edge-3" data-name="window-edge" d="M732.54,495.81a.68.68,0,0,0-.36.15c1.05.74,2.63,4.26,2.63,5.73v12.56h.71V501.69C735.52,500,733.53,495.81,732.54,495.81Z" style="fill: #494949" />
+        </g>
+        <path class="shadow-4" data-name="shadow" d="M660.29,426.44c30.83-9.66,96.29-8.42,123.19,0l-17.16,30.11q-.55,9.42-1,19c-17.84-14.3-58.38-15.68-59.84,10.65C703.59,519.73,699,796.81,716,917.81a347.94,347.94,0,0,1-38.53-3.34c3.31-101.5,3.31-356.41,0-457.92Z" style="opacity: 0.2" />
+        <path class="col-2" data-name="col" d="M677.45,456.55l-17.16-30.11c30.83-9.66,96.29-8.42,123.19,0l-17.16,30.11C741.88,448.68,700.65,448.89,677.45,456.55Z" style="opacity: 0.2" />
+        <path class="drop-shadow" d="M783.48,419.65c-31.32-10-82.14-14.67-123.19,1.08V404.15l66.46-23.47,56.73,25.13Z" style="opacity: 0.2" />
+        <path class="roof-2" data-name="roof" d="M721.88,238.77c-2.07.9,41.4,130.62,76,179.82-47.11-19.11-124.61-13.37-152.89,0C680.94,383.26,692,334,721.88,238.77Z" style="fill: #090970" />
+        <path class="shadow-5" data-name="shadow" d="M721.43,240.21C670,429.79,694.81,375.73,786.64,400.46a212.8,212.8,0,0,0,11.24,18.13c-47.11-19.11-124.61-13.37-152.89,0C680.75,383.44,691.87,334.49,721.43,240.21Z" style="opacity: 0.2" />
+      </g>
+    </g>
+    <g class="big-tower-left-2" data-name="big-tower-left">
+      <path class="tower-5" data-name="tower" d="M712.91,460.28c-23.36-33.23-52.6-119.79-52.36-123.64C640,402.1,632.39,436,607.67,460.28a62,62,0,0,1,10.53-3.65c0,2.3,0,6.8,0,9.06L630,486.42c2.28,69.87,2.28,355.6,0,425.48a243.08,243.08,0,0,0,26.52,2.3h0a174,174,0,0,0,34.66-2.29c-3-75.21-3.91-357.11,0-425.48L703,465.69c0-2.13,0-6.61,0-8.74A90.65,90.65,0,0,1,712.91,460.28Z" style="fill: #00246b" />
+      <g class="shad-grpe" style="opacity: 0.6000000000000001">
+        <path class="back-roog-2" data-name="back-roog" d="M712.91,460.28l-51.19-35.93-54.05,35.93C631.91,468.84,708.35,462.71,712.91,460.28Z" style="fill: #040433" />
+        <path class="tower-6" data-name="tower" d="M703,452.3v13.39l-11.81,20.73c-3.83,64-3,351,0,425.48-18.61,3.24-39.09,3.1-61.18,0,2.28-69.88,2.28-355.61,0-425.48L618.2,465.69v-14c0,.37,45.08-24.82,45.08-24.82Z" style="fill: #605f60" />
+        <g class="briques-4" data-name="briques">
+          <path class="brique-9" data-name="brique" d="M680.49,509a55.76,55.76,0,0,0-9.79-.81" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.23414530222429px" />
+          <path class="brique-10" data-name="brique" d="M677.35,535.92a54.27,54.27,0,0,0-9.41-.57" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.23414530222429px" />
+          <path class="brique-11" data-name="brique" d="M652,742.89a60.79,60.79,0,0,0-10.55.71" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.23414530222429px" />
+        </g>
+        <path class="shadow-6" data-name="shadow" d="M618.2,465.69c21.22-6.65,66.28-5.8,84.8,0l-11.81,20.73q-.39,6.48-.71,13.05c-12.28-9.84-40.19-10.79-41.2,7.34-1.28,23.1-4.44,324.09,7.25,407.39A241.89,241.89,0,0,1,630,911.9c2.28-69.88,2.28-355.61,0-425.48Z" style="opacity: 0.2" />
+        <path class="col-3" data-name="col" d="M630,486.42,618.2,465.69c21.22-6.65,66.28-5.8,84.8,0l-11.81,20.73C674.36,481,646,481.14,630,486.42Z" style="opacity: 0.2" />
+        <path class="drop-shadow-2" data-name="drop-shadow" d="M703,461c-21.56-6.87-56.54-10.1-84.8.74V450.35L664,434.18l39,17.31Z" style="opacity: 0.2" />
+        <path class="roof-3" data-name="roof" d="M660.6,336.5c-1.43.62,28.5,89.91,52.31,123.78-32.42-13.15-85.78-9.2-105.24,0C632.41,436,640,402.05,660.6,336.5Z" style="fill: #090970" />
+        <path class="shadow-7" data-name="shadow" d="M660.29,337.49C624.84,468,642,430.78,705.17,447.81c2.62,4.66,5.21,8.88,7.74,12.47-32.42-13.15-85.78-9.2-105.24,0C632.28,436.09,639.94,402.39,660.29,337.49Z" style="opacity: 0.2" />
+      </g>
+    </g>
+    <g class="double-tower-left">
+      <path class="back" d="M670.58,623.63c-2.36-3.36-4.56-6.86-6.68-10.4h0c-3.21-5.38-6.31-11.11-9.2-16.75-6.62-1.27-13.6-2.24-20.79-2.93,0-8.92,0-32.13,0-40.71l11.52-20.21V529c5.28-.6,8.8-1.2,9.67-1.66-22.82-32.5-51.26-116.71-51.06-120.58l-.27.84h0c-14.57,41-20.4,87.33-51.32,119.75a57.23,57.23,0,0,0,10.26,2.38c-1.86,1.84,10.87,21.28,11.53,23.11v41.49c-5.94.72-11.74,1.63-17.56,2.75-1,1.74-2.08,3.44-3.17,5.13h0a123.86,123.86,0,0,1-17.33,21.42,67.46,67.46,0,0,1,8.4-3.22l-8.4,3.22a76.69,76.69,0,0,0,13.44,3.11v3.8L564.72,657c2.91,89.23,2.91,143.17,0,232.4a312.42,312.42,0,0,0,33.87,2.93h0a222.11,222.11,0,0,0,44.25-2.92c-3.59-88.53-4.73-142.76-.93-215.74h0q.42-8.38.91-16.67l15.08-26.46V625.8C664.83,625,669.44,624.23,670.58,623.63Z" style="fill: #00246b" />
+      <g class="shad-grpe-2" data-name="shad-grpe" style="opacity: 0.75">
+        <g class="top-tower">
+          <path class="back-roog-3" data-name="back-roog" d="M655.1,527.35,605.17,492.3l-52.71,35.05C576.1,535.7,650.65,529.72,655.1,527.35Z" style="fill: #040433" />
+          <path class="tower-7" data-name="tower" d="M645.43,519.57v13.06l-11.52,20.21v67.74H574.25V552.84l-11.53-20.21V519c0,.36,44-24.2,44-24.2Z" style="fill: #605f60" />
+          <g class="briques-5" data-name="briques">
+            <path class="brique-12" data-name="brique" d="M623.48,574.82a55,55,0,0,0-9.55-.79" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.17897432007683px" />
+          </g>
+          <path class="window-5" data-name="window" d="M603.43,545.93c-1.33,0-2.46,0-3.49,0l-1.23-14.29c2-.11,3.81,0,5.51,0Z" style="fill: #e2d600" />
+          <path class="shadow-8" data-name="shadow" d="M562.72,532.63c20.71-6.49,64.66-5.66,82.71,0l-11.52,20.21V566c-58.95-29.95-38.43,38.63-34.11,54.56H574.25V552.84Z" style="opacity: 0.2" />
+          <path class="col-4" data-name="col" d="M574.25,552.84l-11.53-20.21c20.71-6.49,64.66-5.66,82.71,0l-11.52,20.21C617.5,547.56,589.82,547.7,574.25,552.84Z" style="opacity: 0.2" />
+          <path class="drop-shadow-3" data-name="drop-shadow" d="M645.43,528.07c-21-6.7-55.14-9.85-82.71.72V517.66l44.63-15.76,38.08,16.88Z" style="opacity: 0.2" />
+          <path class="roof-4" data-name="roof" d="M604.08,406.63c-1.39.6,27.79,87.69,51,120.72-31.62-12.83-83.66-9-102.64,0C576.59,503.64,584,470.56,604.08,406.63Z" style="fill: #090970" />
+          <path class="shadow-9" data-name="shadow" d="M603.78,407.6c-34.57,127.28-17.88,91,43.77,107.59,2.56,4.55,5.09,8.66,7.55,12.16-31.62-12.83-83.66-9-102.64,0C576.46,503.76,583.93,470.89,603.78,407.6Z" style="opacity: 0.2" />
+        </g>
+        <path class="back-roog-4" data-name="back-roog" d="M670.58,623.63,605.2,597.21l-69,26.42C567.15,634.55,664.75,626.72,670.58,623.63Z" style="fill: #040433" />
+        <path class="tower-8" data-name="tower" d="M657.92,613.43v17.11L642.84,657c-4.89,81.75-3.86,137.27,0,232.4-23.77,4.14-49.91,4-78.12,0,2.91-89.23,2.91-143.17,0-232.4l-15.09-26.46V612.7C611.73,600.79,594.48,595.77,657.92,613.43Z" style="fill: #605f60" />
+        <g class="briques-6" data-name="briques">
+          <path class="brique-13" data-name="brique" d="M629.18,685.77a72.29,72.29,0,0,0-12.5-1" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.85284415188156px" />
+          <path class="brique-14" data-name="brique" d="M625.17,720.21a70.28,70.28,0,0,0-12-.73" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.85284415188156px" />
+          <path class="brique-15" data-name="brique" d="M592.76,814.37a77.26,77.26,0,0,0-13.47.91" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.85284415188156px" />
+        </g>
+        <g class="windows-2" data-name="windows">
+          <polygon class="window-6" data-name="window" points="602.6 647.92 599.1 647.96 597.87 629.28 603.38 629.24 602.6 647.92" style="fill: #e2d600" />
+          <polygon class="window-7" data-name="window" points="640.4 653.09 636.74 652.42 645.25 632.41 651.46 633.66 640.4 653.09" style="fill: #e2d600" />
+          <polygon class="shadow-10" data-name="shadow" points="645.25 632.41 645.05 632.89 650.18 633.93 639.39 652.9 640.4 653.09 651.46 633.66 645.25 632.41" style="opacity: 0.4" />
+          <polygon class="window-8" data-name="window" points="566.77 653.09 570.44 652.42 561.92 632.41 555.72 633.66 566.77 653.09" style="fill: #e2d600" />
+          <polygon class="shadow-11" data-name="shadow" points="561.92 632.41 562.13 632.89 557 633.93 567.79 652.9 566.77 653.09 555.72 633.66 561.92 632.41" style="opacity: 0.4" />
+        </g>
+        <path class="shadow-12" data-name="shadow" d="M549.63,630.54c27.11-8.5,84.65-7.41,108.29,0L642.84,657q-.5,8.28-.91,16.67c-15.68-12.57-51.31-13.78-52.6,9.37-1.64,29.5-5.67,102.92,9.26,209.29a307.59,307.59,0,0,1-33.87-2.93c2.91-89.23,2.91-143.17,0-232.4Z" style="opacity: 0.2" />
+        <path class="col-5" data-name="col" d="M564.72,657l-15.09-26.46c27.11-8.5,84.65-7.41,108.29,0L642.84,657C621.35,650.08,585.11,650.26,564.72,657Z" style="opacity: 0.2" />
+        <path class="drop-shadow-4" data-name="drop-shadow" d="M657.92,624.57c-27.53-8.77-72.2-12.9-108.29.94V610.94c27-1.26,81.56-1,108.29,1.46Z" style="opacity: 0.2" />
+        <g class="roof-5" data-name="roof">
+          <path class="roof-6" data-name="roof" d="M556.69,597.08a125.82,125.82,0,0,1-20.5,26.55c24.86-11.75,93-16.8,134.39,0a232.39,232.39,0,0,1-15.88-27.15C625.17,590.81,588.81,590.81,556.69,597.08Z" style="fill: #090970" />
+          <path class="light" d="M660.29,607h0c-1.86-3.34-3.73-6.85-5.6-10.5-29.53-5.67-65.89-5.67-98,.6-1,1.75-2.09,3.45-3.17,5.13C574.53,593.42,646.08,591.14,660.29,607Z" style="fill: #1313a5" />
+          <path class="shadow-13" data-name="shadow" d="M563.72,595.83c-2.36.38-4.71.79-7,1.25a125.82,125.82,0,0,1-20.5,26.55c24.86-11.75,93-16.8,134.39,0-2.19-3.12-4.43-6.62-6.68-10.4C593.51,593.15,543.59,625.8,563.72,595.83Z" style="opacity: 0.2" />
+        </g>
+      </g>
+    </g>
+    <g class="horizontal-top">
+      <g class="double-tower-center">
+        <path class="back-2" data-name="back" d="M967.87,430.39c-3.9-5.58-7.57-11.39-11.09-17.27h0c-5.33-8.94-10.48-18.46-15.28-27.82-11-2.11-22.59-3.72-34.53-4.88,0-14.81,0-53.36,0-67.61l19.14-33.58v-6c8.76-1,14.62-2,16-2.75-37.9-54-85.15-193.88-84.82-200.31l-.44,1.4v0c-24.2,68.17-33.88,145.07-85.25,198.93a97,97,0,0,0,17.06,3.95c-3.09,3,18,35.34,19.14,38.39v68.91c-9.86,1.2-19.5,2.72-29.17,4.57-1.7,2.89-3.46,5.71-5.26,8.52h0a204.58,204.58,0,0,1-28.79,35.58,112.38,112.38,0,0,1,14-5.34l-14,5.34A126.18,126.18,0,0,0,767,435.56v6.31l25.06,44c4.84,148.22,4.84,237.82,0,386a514.85,514.85,0,0,0,56.26,4.86h0a368.31,368.31,0,0,0,73.51-4.85c-6-147.06-7.86-237.13-1.55-358.38l0,0q.69-13.93,1.51-27.69l25.05-44V434C958.33,432.69,966,431.39,967.87,430.39Z" style="fill: #00246b" />
+        <g class="shad-grpe-3" data-name="shad-grpe" style="opacity: 0.6000000000000001">
+          <path class="back-roog-5" data-name="back-roog" d="M942.16,270.47l-82.94-58.22-87.56,58.22C810.94,284.33,934.77,274.4,942.16,270.47Z" style="fill: #040433" />
+          <path class="tower-9" data-name="tower" d="M926.11,257.53v21.7L907,312.81V425.32H807.86V312.81l-19.14-33.58V256.61c0,.6,73-40.2,73-40.2Z" style="fill: #605f60" />
+          <g class="briques-7" data-name="briques">
+            <path class="brique-16" data-name="brique" d="M889.64,349.31A92.24,92.24,0,0,0,873.78,348" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 3.61956116072994px" />
+          </g>
+          <g class="window-9" data-name="window">
+            <polygon class="window-10" data-name="window" points="904.11 308.21 900.13 307.18 911.7 281.17 917.72 282.66 904.11 308.21" style="fill: #e2d600" />
+            <polygon class="window-11" data-name="window" points="890.19 304.76 885.67 304.03 894.59 278.35 901.38 279.2 890.19 304.76" style="fill: #e2d600" />
+            <polygon class="window-12" data-name="window" points="875.54 302.68 871.14 302.61 873.36 276.44 879.93 276.9 875.54 302.68" style="fill: #e2d600" />
+            <polygon class="shadow-14" data-name="shadow" points="911.7 281.17 911.61 281.37 916.7 282.63 903.2 307.98 904.11 308.21 917.72 282.66 911.7 281.17" style="fill: #494949" />
+            <polygon class="shadow-15" data-name="shadow" points="894.59 278.35 894.3 279.16 900.02 279.88 889.2 304.6 890.19 304.76 901.38 279.2 894.59 278.35" style="fill: #494949" />
+            <polygon class="shadow-16" data-name="shadow" points="873.36 276.44 873.29 277.3 879.17 277.71 874.91 302.67 875.54 302.68 879.93 276.9 873.36 276.44" style="fill: #494949" />
+            <polygon class="window-13" data-name="window" points="810.99 308.21 814.97 307.18 803.4 281.17 797.38 282.66 810.99 308.21" style="fill: #e2d600" />
+            <polygon class="window-14" data-name="window" points="824.91 304.76 829.43 304.03 820.51 278.35 813.72 279.2 824.91 304.76" style="fill: #e2d600" />
+            <polygon class="window-15" data-name="window" points="839.56 302.68 843.96 302.61 841.74 276.44 835.17 276.9 839.56 302.68" style="fill: #e2d600" />
+            <polygon class="window-16" data-name="window" points="856.26 302.72 860.65 302.64 862.36 276.21 854.96 276.21 856.26 302.72" style="fill: #e2d600" />
+            <polygon class="shadow-17" data-name="shadow" points="803.4 281.17 803.49 281.37 798.4 282.63 811.9 307.98 810.99 308.21 797.38 282.66 803.4 281.17" style="fill: #494949" />
+            <polygon class="shadow-18" data-name="shadow" points="820.51 278.35 820.8 279.16 815.08 279.88 825.9 304.6 824.91 304.76 813.72 279.2 820.51 278.35" style="fill: #494949" />
+            <polygon class="shadow-19" data-name="shadow" points="841.74 276.44 841.81 277.3 835.93 277.71 840.19 302.67 839.56 302.68 835.17 276.9 841.74 276.44" style="fill: #494949" />
+            <polygon class="shadow-20" data-name="shadow" points="854.96 276.21 856.26 302.72 856.41 302.72 855.3 277.43 862.02 277.43 860.57 302.65 860.65 302.64 862.36 276.21 854.96 276.21" style="fill: #494949" />
+          </g>
+          <path class="shadow-21" data-name="shadow" d="M788.72,279.23c34.38-10.78,107.39-9.39,137.39,0L907,312.81V334.7c-97.93-49.76-63.84,64.17-56.66,90.62H807.86V312.81Z" style="opacity: 0.2" />
+          <path class="col-6" data-name="col" d="M807.86,312.81l-19.14-33.58c34.38-10.78,107.39-9.39,137.39,0L907,312.81C879.71,304,833.73,304.26,807.86,312.81Z" style="opacity: 0.2" />
+          <path class="drop-shadow-5" data-name="drop-shadow" d="M926.11,271.66c-34.93-11.13-91.61-16.36-137.39,1.2V254.37l74.12-26.18,63.27,28Z" style="opacity: 0.2" />
+          <path class="roof-7" data-name="roof" d="M857.41,69.93c-2.31,1,46.17,145.67,84.75,200.54-52.53-21.31-139-14.9-170.5,0C811.74,231.08,824.06,176.13,857.41,69.93Z" style="fill: #090970" />
+          <path class="shadow-22" data-name="shadow" d="M856.91,71.54C799.49,283,827.22,222.67,929.63,250.26c4.24,7.56,8.44,14.39,12.53,20.21-52.53-21.31-139-14.9-170.5,0C811.54,231.28,823.94,176.68,856.91,71.54Z" style="opacity: 0.2" />
+          <path class="back-roog-6" data-name="back-roog" d="M967.87,430.39,859.28,386.51,744.64,430.39C796.06,448.54,958.19,435.54,967.87,430.39Z" style="fill: #040433" />
+          <path class="tower-10" data-name="tower" d="M946.85,413.45v28.42l-25.05,44c-8.12,135.8-6.41,228,0,386-39.48,6.88-82.91,6.56-129.77,0,4.84-148.22,4.84-237.82,0-386l-25.06-44V412.24C870.13,392.45,841.47,384.12,946.85,413.45Z" style="fill: #605f60" />
+          <g class="windows-3" data-name="windows">
+            <path class="window-17" data-name="window" d="M912.79,556.49h-8.17V539.28c0-2.26,2.72-8,4.08-8s4.09,5.79,4.09,8Z" style="fill: #e2d600" />
+            <path class="window-edge-4" data-name="window-edge" d="M908.7,531.23a.86.86,0,0,0-.48.21c1.43,1,3.6,5.83,3.6,7.84v17.21h1V539.28C912.79,537,910.06,531.23,908.7,531.23Z" style="fill: #494949" />
+            <path class="window-18" data-name="window" d="M865,556.49h-8.17V539.28c0-2.26,2.72-8,4.08-8s4.09,5.79,4.09,8Z" style="fill: #e2d600" />
+            <path class="window-19" data-name="window" d="M809,556.49h8.17V539.28c0-2.26-2.73-8-4.09-8s-4.08,5.79-4.08,8Z" style="fill: #e2d600" />
+            <path class="window-edge-5" data-name="window-edge" d="M813,531.23a.89.89,0,0,1,.49.21c-1.44,1-3.6,5.83-3.6,7.84v17.21h-1V539.28C809,537,811.68,531.23,813,531.23Z" style="fill: #494949" />
+          </g>
+          <g class="briques-8" data-name="briques">
+            <path class="brique-17" data-name="brique" d="M899.11,533.62a120.28,120.28,0,0,0-20.77-1.71" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4.73894703330049px" />
+            <path class="brique-18" data-name="brique" d="M892.45,590.83a115.81,115.81,0,0,0-20-1.21" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4.73894703330049px" />
+            <path class="brique-19" data-name="brique" d="M838.61,747.24a128.31,128.31,0,0,0-22.38,1.51" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4.73894703330049px" />
+          </g>
+          <path class="shadow-23" data-name="shadow" d="M767,441.87c45-14.12,140.61-12.3,179.88,0l-25.05,44q-.82,13.74-1.51,27.69c-26-20.88-85.24-22.89-87.38,15.56-2.72,49-9.42,171,15.38,347.65A509.36,509.36,0,0,1,792,871.87c4.84-148.22,4.84-237.82,0-386Z" style="opacity: 0.2" />
+          <path class="col-7" data-name="col" d="M792,485.83l-25.06-44c45-14.12,140.61-12.3,179.88,0l-25.05,44C886.1,474.33,825.91,474.64,792,485.83Z" style="opacity: 0.2" />
+          <path class="drop-shadow-6" data-name="drop-shadow" d="M946.85,432c-45.72-14.56-119.93-21.42-179.88,1.57v-24.2c44.82-2.09,135.48-1.63,179.88,2.42Z" style="opacity: 0.2" />
+          <path class="roof-8" data-name="roof" d="M778.69,386.29a208.66,208.66,0,0,1-34.05,44.1c41.29-19.51,154.46-27.9,223.23,0-8.54-12.15-17.46-27.68-26.37-45.09C892.45,375.88,832.06,375.88,778.69,386.29Z" style="fill: #090970" />
+          <path class="light-2" data-name="light" d="M950.79,402.72v0q-4.63-8.33-9.3-17.44c-49-9.42-109.44-9.42-162.81,1-1.7,2.91-3.47,5.73-5.26,8.52C808.33,380.21,927.18,376.42,950.79,402.72Z" style="fill: #1313a5" />
+          <path class="shadow-24" data-name="shadow" d="M790.38,384.21c-3.93.64-7.83,1.32-11.69,2.08a208.66,208.66,0,0,1-34.05,44.1c41.29-19.51,154.46-27.9,223.23,0-3.63-5.17-7.34-11-11.09-17.27C839.86,379.77,756.93,434,790.38,384.21Z" style="opacity: 0.2" />
+        </g>
+      </g>
+    </g>
+    <g class="horizontal-bottom-1">
+      <g class="small-tower">
+        <g class="inner-small-tower">
+          <path class="tower-11" data-name="tower" d="M1092.64,515.26v12.43q-13.56-2.49-27-4V511.28q-12.57-1.36-25.05-1.86v12.43q-13.56-.52-27,0V509.38q-12.58.47-25.05,1.82v12.44q-13.57,1.47-27,4V515.19q-6.85,1.29-13.68,2.83v39.09l22.08,38.73c7.15,119.64,5.64,46.38,0,185.61,34.77,6.06,73,5.78,114.32,0-4.26-130.59-4.26-55,0-185.61l22.08-38.73V518Q1099.47,516.51,1092.64,515.26Z" style="fill: #00246b" />
+          <g class="shad-grp-4" data-name="shad-grp" style="opacity: 0.7000000000000001">
+            <path class="tower-12" data-name="tower" d="M1092.64,515.26v12.43q-13.56-2.49-27-4V511.28q-12.57-1.36-25.05-1.86v12.43q-13.56-.52-27,0V509.38q-12.58.47-25.05,1.82v12.44q-13.57,1.47-27,4V515.19q-6.85,1.29-13.68,2.83v39.09l22.08,38.73c7.15,119.64,5.64,46.38,0,185.61,34.77,6.06,73,5.78,114.32,0-4.26-130.59-4.26-55,0-185.61l22.08-38.73V518Q1099.47,516.51,1092.64,515.26Z" style="fill: #605f60" />
+            <g class="briques-9" data-name="briques">
+              <path class="brique-20" data-name="brique" d="M989.9,637.94a107.6,107.6,0,0,1,18.3-1.51" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4.17516087477875px" />
+              <path class="brique-21" data-name="brique" d="M995.77,688.35a102.46,102.46,0,0,1,17.59-1.07" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4.17516087477875px" />
+              <path class="brique-22" data-name="brique" d="M1043.2,671.65a112.8,112.8,0,0,1,19.72,1.33" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4.17516087477875px" />
+            </g>
+            <path class="shadow-25" data-name="shadow" d="M1106.32,557.11c-39.67-12.44-123.88-10.84-158.48,0l22.08,38.73q.72,12.1,1.32,24.4c23-18.4,78.29-20.2,77,13.71-1.27,33.1-1.27,84.71-13.54,151.79a453.27,453.27,0,0,0,49.56-4.29c-4.26-130.59-4.26-55,0-185.61Z" style="opacity: 0.2" />
+            <path class="col-8" data-name="col" d="M1084.24,595.84l22.08-38.73c-39.67-12.44-123.88-10.84-158.48,0l22.08,38.73C1001.36,585.71,1054.4,586,1084.24,595.84Z" style="opacity: 0.2" />
+          </g>
+        </g>
+      </g>
+      <g class="main-castle-center">
+        <path class="wall-2" data-name="wall" d="M1171.15,671.35c-.36,6.4-.54,6.6-.9,13-10.48-.6-15.72-.88-26.2-1.4.31-6.4.47-6.59.79-13-9.26-.46-13.89-.68-23.16-1.08-.27,6.4-.41,6.6-.69,13-10.48-.45-15.73-.66-26.21-1,.23-6.4.35-6.6.58-13-9.27-.33-13.9-.49-23.17-.77-.19,6.41-.29,6.61-.48,13-10.49-.32-15.73-.46-26.22-.7.15-6.41.22-6.61.37-13-9.27-.22-13.91-.31-23.18-.47-.1,6.41-.16,6.62-.26,13-10.49-.17-15.74-.24-26.23-.35.06-6.4.09-6.61.16-13-9.27-.09-13.91-.13-23.18-.16,0,6.41,0,6.61-.06,13-10.49,0-15.73,0-26.22,0,0-6.41,0-6.61-.06-13-9.27,0-13.91.07-23.18.16.07,6.4.1,6.61.16,13-10.49.11-15.74.18-26.23.35-.1-6.4-.16-6.61-.27-13-9.26.16-13.9.25-23.17.47.15,6.4.22,6.6.37,13-10.49.24-15.73.38-26.22.7-.19-6.41-.29-6.61-.48-13-9.27.28-13.9.44-23.17.77.23,6.41.35,6.61.58,13-10.48.38-15.73.59-26.21,1-.28-6.4-.42-6.6-.69-13-9.27.4-13.9.62-23.16,1.07.32,6.4.48,6.6.79,13-10.48.52-15.72.8-26.2,1.4-.36-6.4-.54-6.6-.9-13-9.36.53-14,.81-23.4,1.4,6.54,104,19.62,246.32,19.62,246.32h429.86s13.08-142.35,19.62-246.32C1185.19,672.16,1180.51,671.88,1171.15,671.35Z" style="fill: #00246b" />
+        <g class="shad-grpe-4" data-name="shad-grpe" style="opacity: 0.7000000000000001">
+          <path class="wall-3" data-name="wall" d="M1171.15,671c-.36,6.4-.54,6.6-.9,13-10.48-.59-15.72-.87-26.2-1.39.31-6.4.47-6.6.79-13-9.26-.46-13.89-.67-23.16-1.07-.27,6.4-.41,6.6-.69,13-10.48-.45-15.73-.66-26.21-1,.23-6.41.35-6.61.58-13-9.27-.34-13.9-.49-23.17-.77-.19,6.41-.29,6.61-.48,13-10.49-.31-15.73-.45-26.22-.69.15-6.41.22-6.61.37-13-9.27-.21-13.91-.3-23.18-.46-.1,6.41-.16,6.61-.26,13-10.49-.18-15.74-.25-26.23-.35.06-6.41.09-6.61.16-13-9.27-.09-13.91-.12-23.18-.15,0,6.41,0,6.61-.06,13-10.49,0-15.73,0-26.22,0,0-6.41,0-6.61-.06-13-9.27,0-13.91.06-23.18.15.07,6.41.1,6.61.16,13-10.49.1-15.74.17-26.23.35-.1-6.41-.16-6.61-.27-13-9.26.16-13.9.25-23.17.46.15,6.41.22,6.61.37,13-10.49.24-15.73.38-26.22.69-.19-6.4-.29-6.6-.48-13-9.27.28-13.9.43-23.17.77.23,6.4.35,6.6.58,13-10.48.38-15.73.59-26.21,1-.28-6.4-.42-6.6-.69-13-9.27.4-13.9.61-23.16,1.07.32,6.4.48,6.6.79,13-10.48.52-15.72.8-26.2,1.39-.36-6.4-.54-6.59-.9-13-9.36.53-14,.81-23.4,1.4,6.54,104,19.62,246.32,19.62,246.32h429.86s13.08-142.35,19.62-246.32C1185.19,671.78,1180.51,671.5,1171.15,671Z" style="fill: #605f60" />
+          <g class="briques-10" data-name="briques">
+            <path class="brique-23" data-name="brique" d="M792.49,754.92a164.44,164.44,0,0,1,30.64-1.44" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-24" data-name="brique" d="M1109.66,746.5a117,117,0,0,1,15.55.68" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-25" data-name="brique" d="M1041.91,806.25c8.49-.3,16.41-.07,19.18,0" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-26" data-name="brique" d="M848,714.75a163.88,163.88,0,0,1,20.08-1.36" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+          </g>
+          <path class="shadow-26" data-name="shadow" d="M1171.15,671.35c-.36,6.4-.54,6.6-.9,13-10.48-.6-15.72-.88-26.2-1.4.31-6.4.47-6.59.79-13-9.26-.46-13.89-.68-23.16-1.08-.27,6.4-.41,6.6-.69,13-10.48-.45-15.73-.66-26.21-1,.23-6.4.35-6.6.58-13-9.27-.33-13.9-.49-23.17-.77-.19,6.41-.29,6.61-.48,13-10.49-.32-15.73-.46-26.22-.7.15-6.41.22-6.61.37-13-9.27-.22-13.91-.31-23.18-.47-.1,6.41-.16,6.62-.26,13-10.49-.17-15.74-.24-26.23-.35.06-6.4.09-6.61.16-13-9.27-.09-13.91-.13-23.18-.16,0,6.41,0,6.61-.06,13-10.49,0-15.73,0-26.22,0,0-6.41,0-6.61-.06-13-9.27,0-13.91.07-23.18.16.07,6.4.1,6.61.16,13-10.49.11-15.74.18-26.23.35-.1-6.4-.16-6.61-.27-13-9.26.16-13.9.25-23.17.47.15,6.4.22,6.6.37,13-10.49.24-15.73.38-26.22.7-.19-6.41-.29-6.61-.48-13-9.27.28-13.9.44-23.17.77.23,6.41.35,6.61.58,13-10.48.38-15.73.59-26.21,1-.28-6.4-.42-6.6-.69-13-9.27.4-13.9.62-23.16,1.07.32,6.4.48,6.6.79,13-10.48.52-15.72.8-26.2,1.4-.36-6.4-.54-6.6-.9-13-9.36.53-14,.81-23.4,1.4,6.54,104,19.62,246.32,19.62,246.32H778c-8-90.92,3.62-181.28,70.44-197.55,49.23-12,168.07-10.38,226-.16,81.16,14.31,75,119,67.31,197.71h33.19s13.08-142.35,19.62-246.32C1185.19,672.16,1180.51,671.88,1171.15,671.35Z" style="opacity: 0.2" />
+        </g>
+      </g>
+    </g>
+    <g class="horizontal-bottom-general">
+      <g class="ground2" style="opacity: 0.6000000000000001">
+        <path class="right" d="M1825.19,815.34V727.62l12.07-21.17V685.09q-3.75-.83-7.48-1.51v6.8c-7.25-2.51-17,1.67-14.76-9-7.3.27-15.73-5.15-13.68,5.78-7.52-1.61-16.89,4.4-14.76-6.82-28.46-.21,1.57,7.82-28.45,10v-6.79c-2.5.46-5,1-7.48,1.54v21.36l12.07,21.17v87.72c-165,8.9-369.08,90.15-411.51,350.09h585.41V835.11C1908.58,825.26,1869.73,817.77,1825.19,815.34Z" style="fill: #12436b" />
+        <path class="left" d="M194.93,786.76c4.43-13.48-12.31-152.78,14-150.21h0c-15.07-21.43-34-77.28-33.81-79.84-.06.19-.12.38-.17.56h0c-9.65,27.18-13.5,57.82-34,79.29h0c1.84.65,6.8,1.58,6.8,1.58l7.63,15.3V785.22q-11.1,0-21.79.49c3.74-11.74-10.41-126.19,11.9-124.6-12.78-18.18-28.81-65.59-28.69-67.75l-.14.47h0c-8.19,23.07-11.46,49.07-28.84,67.3,22.89-2,8.44,116,12.25,127.17C40,795-4.83,811.18-17.13,823v330.32h585.4C517.28,879.38,341.32,798.38,194.93,786.76Z" style="fill: #12436b" />
+      </g>
+      <g class="light-radius" style="opacity: 0.5">
+        <path class="inner-light" d="M1168.51,874.83h-417c0-115.16,93.35-208.51,208.51-208.51S1168.51,759.67,1168.51,874.83Z" style="fill: #d9f700;opacity: 0.1" />
+        <path class="inner-light-2" data-name="inner-light" d="M1282.74,916.23C1274.45,745.16,1133.13,609,960,609S645.55,745.16,637.26,916.23Z" style="fill: #d9f700;opacity: 0.1" />
+        <path class="inner-light-3" data-name="inner-light" d="M1401.6,912.15c-39-208.44-221.85-366.21-441.6-366.21S557.36,703.71,518.4,912.15Z" style="fill: #d9f700;opacity: 0.1" />
+      </g>
+      <g class="wall-left">
+        <path class="wall-4" data-name="wall" d="M890.37,809.12c-.21,4.89-.31,7.34-.51,12.24-10.92-.45-16.38-.66-27.3-1l.42-12.24c-9.76-.34-14.64-.49-24.4-.77l-.35,12.24c-10.92-.31-16.39-.45-27.31-.68.1-4.9.16-7.35.26-12.25-9.76-.21-14.64-.3-24.4-.46-.07,4.9-.11,7.35-.19,12.25-10.93-.18-16.39-.25-27.32-.35,0-4.9.07-7.34.11-12.24-9.76-.09-14.64-.12-24.4-.16,0,4.9,0,7.35,0,12.25-10.93,0-16.4,0-27.32,0l0-12.25c-9.76,0-14.64.07-24.4.16.05,4.9.07,7.34.12,12.24-10.93.1-16.4.17-27.33.35-.07-4.9-.11-7.35-.19-12.25-9.76.16-14.64.25-24.4.46.11,4.9.16,7.35.27,12.25-10.93.23-16.39.37-27.32.68L604,807.32c-9.76.28-14.64.43-24.39.77l.42,12.24c-10.93.37-16.39.58-27.31,1l-.5-12.24c-10.07.41-15.1.63-25.17,1.11l5.61,118.91c125.74-.6,251.55.5,377.29,0l5.61-118.91C905.47,809.75,900.43,809.53,890.37,809.12Z" style="fill: #00246b" />
+        <g class="shad-grpe-5" data-name="shad-grpe" style="opacity: 0.8">
+          <path class="wall-5" data-name="wall" d="M890.37,809.12c-.21,4.89-.31,7.34-.51,12.24-10.92-.45-16.38-.66-27.3-1l.42-12.24c-9.76-.34-14.64-.49-24.4-.77l-.35,12.24c-10.92-.31-16.39-.45-27.31-.68.1-4.9.16-7.35.26-12.25-9.76-.21-14.64-.3-24.4-.46-.07,4.9-.11,7.35-.19,12.25-10.93-.18-16.39-.25-27.32-.35,0-4.9.07-7.34.11-12.24-9.76-.09-14.64-.12-24.4-.16,0,4.9,0,7.35,0,12.25-10.93,0-16.4,0-27.32,0l0-12.25c-9.76,0-14.64.07-24.4.16.05,4.9.07,7.34.12,12.24-10.93.1-16.4.17-27.33.35-.07-4.9-.11-7.35-.19-12.25-9.76.16-14.64.25-24.4.46.11,4.9.16,7.35.27,12.25-10.93.23-16.39.37-27.32.68L604,807.32c-9.76.28-14.64.43-24.39.77l.42,12.24c-10.93.37-16.39.58-27.31,1l-.5-12.24c-10.07.41-15.1.63-25.17,1.11l5.61,118.91c125.74-.6,251.55.5,377.29,0l5.61-118.91C905.47,809.75,900.43,809.53,890.37,809.12Z" style="fill: #605f60" />
+          <g class="briques-11" data-name="briques">
+            <line class="brique-27" data-name="brique" x1="554.19" y1="836.39" x2="567.46" y2="836.2" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-28" data-name="brique" x1="647.13" y1="891.73" x2="659.38" y2="891.73" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-29" data-name="brique" x1="781.7" y1="836.05" x2="796.34" y2="836.39" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-30" data-name="brique" x1="827.21" y1="869.2" x2="839.47" y2="869.62" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-31" data-name="brique" x1="868.06" y1="850.69" x2="881.34" y2="851.03" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+          </g>
+          <path class="shadow-27" data-name="shadow" d="M890.37,809.12c-.21,4.89-.31,7.34-.51,12.24-4.26-.18-12.93-.51-16.18-.64,9.53,86.48,5.78,89.42-19.23,92.93-18.88,2.65-239.65-1.63-263.83-1.54-30.78.11-32,10.17-32.52-91l-5.41.22-.5-12.24c-10.07.41-15.1.63-25.17,1.11l5.61,118.91c125.74-.6,251.55.5,377.29,0l5.61-118.91C905.47,809.75,900.43,809.53,890.37,809.12Z" style="opacity: 0.2" />
+        </g>
+      </g>
+      <g class="wall-right">
+        <path class="wall-6" data-name="wall" d="M1029.36,813.47l.5,12.23c10.93-.45,16.39-.65,27.31-1l-.42-12.24c9.76-.33,14.64-.49,24.4-.76.14,4.89.21,7.34.34,12.24,10.93-.31,16.39-.45,27.32-.69-.11-4.9-.16-7.34-.27-12.24,9.76-.22,14.64-.31,24.4-.46l.2,12.24c10.93-.17,16.39-.24,27.32-.34,0-4.9-.07-7.35-.11-12.25,9.76-.09,14.64-.12,24.4-.15,0,4.9,0,7.35,0,12.25,10.93,0,16.39,0,27.32,0,0-4.9,0-7.35,0-12.25,9.76,0,14.65.06,24.41.15,0,4.9-.07,7.35-.12,12.25,10.93.1,16.4.17,27.32.34l.2-12.24c9.76.15,14.64.24,24.4.46-.11,4.9-.16,7.34-.27,12.24,10.93.24,16.39.38,27.32.69l.35-12.24c9.75.27,14.63.43,24.39.76l-.42,12.24c10.92.38,16.39.58,27.31,1l.5-12.24c10.07.42,15.1.64,25.17,1.11l-5.61,118.92c-125.74-.61-251.56.5-377.3,0Q1007,874,1004.2,814.57C1014.26,814.1,1019.3,813.88,1029.36,813.47Z" style="fill: #00246b" />
+        <g class="shad-grpe-6" data-name="shad-grpe" style="opacity: 0.85">
+          <path class="wall-7" data-name="wall" d="M1029.36,813.47l.5,12.23c10.93-.45,16.39-.65,27.31-1l-.42-12.24c9.76-.33,14.64-.49,24.4-.76.14,4.89.21,7.34.34,12.24,10.93-.31,16.39-.45,27.32-.69-.11-4.9-.16-7.34-.27-12.24,9.76-.22,14.64-.31,24.4-.46l.2,12.24c10.93-.17,16.39-.24,27.32-.34,0-4.9-.07-7.35-.11-12.25,9.76-.09,14.64-.12,24.4-.15,0,4.9,0,7.35,0,12.25,10.93,0,16.39,0,27.32,0,0-4.9,0-7.35,0-12.25,9.76,0,14.65.06,24.41.15,0,4.9-.07,7.35-.12,12.25,10.93.1,16.4.17,27.32.34l.2-12.24c9.76.15,14.64.24,24.4.46-.11,4.9-.16,7.34-.27,12.24,10.93.24,16.39.38,27.32.69l.35-12.24c9.75.27,14.63.43,24.39.76l-.42,12.24c10.92.38,16.39.58,27.31,1l.5-12.24c10.07.42,15.1.64,25.17,1.11l-5.61,118.92c-125.74-.61-251.56.5-377.3,0Q1007,874,1004.2,814.57C1014.26,814.1,1019.3,813.88,1029.36,813.47Z" style="fill: #605f60" />
+          <g class="briques-12" data-name="briques">
+            <line class="brique-32" data-name="brique" x1="1365.54" y1="840.74" x2="1352.27" y2="840.55" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-33" data-name="brique" x1="1272.6" y1="896.08" x2="1260.35" y2="896.08" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-34" data-name="brique" x1="1138.03" y1="840.4" x2="1123.38" y2="840.74" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-35" data-name="brique" x1="1092.52" y1="873.54" x2="1080.26" y2="873.96" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-36" data-name="brique" x1="1051.66" y1="855.03" x2="1038.39" y2="855.37" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+          </g>
+          <path class="shadow-28" data-name="shadow" d="M1029.36,813.47l.5,12.23,16.19-.63c-9.53,86.47-5.79,89.41,19.23,92.92,18.88,2.65,239.64-1.62,263.83-1.54,30.78.11,32,10.17,32.52-91l5.41.22.5-12.24c10.07.42,15.1.64,25.17,1.11l-5.61,118.92c-125.74-.61-251.56.5-377.3,0Q1007,874,1004.2,814.57C1014.26,814.1,1019.3,813.88,1029.36,813.47Z" style="opacity: 0.2" />
+        </g>
+      </g>
+      <g class="tower-roof-left">
+        <path class="back-3" data-name="back" d="M545,673.86s-.22,2.24-.37,3.73c-4-.4-6.07-.58-10.12-.86.1-1.5.15-2.25.26-3.74-4-.28-5.93-.39-9.89-.56-.07,1.5-.1,2.25-.16,3.75-4.06-.18-6.09-.24-10.15-.29l0-3.75c-4-.06-5.94-.06-9.91,0,0,1.5,0,2.25.06,3.75-4.06.05-6.09.11-10.15.29-.07-1.5-.1-2.25-.16-3.75-4,.17-5.94.28-9.89.56.1,1.49.15,2.24.26,3.74-4.05.28-6.08.46-10.12.86-.15-1.49-.23-2.24-.38-3.73a16.42,16.42,0,0,0-2.38.38s-.28,12.33,0,12.13c-1.79,1.37,10,19.63,10.52,21.09,2,62.18,2,146.78,0,209a219.93,219.93,0,0,0,23.6,2.05h0a154.26,154.26,0,0,0,30.84-2c-2.63-67-3.49-148.06,0-209L547.4,689V674.26Z" style="fill: #00246b" />
+        <path class="top-back" d="M556.22,684.08c-20.76-29.54-46.79-106.51-46.59-110l-.24.77h0c-13.3,37.46-18.61,79.68-46.83,109.27h0a53,53,0,0,0,9.37,2.17c-.26.2,0-12.13,0-12.13a16.42,16.42,0,0,1,2.38-.38c.15,1.49.23,2.24.38,3.73,4-.4,6.07-.57,10.12-.86-.11-1.49-.16-2.24-.26-3.74,3.95-.28,5.93-.39,9.89-.56.06,1.5.09,2.25.16,3.75,4.06-.17,6.09-.23,10.15-.29,0-1.5,0-2.25-.06-3.75,4,0,6,0,9.91,0l0,3.75c4.06.06,6.09.12,10.15.29.06-1.5.09-2.25.16-3.75,4,.17,5.93.28,9.89.56-.11,1.5-.16,2.25-.26,3.74,4,.29,6.07.46,10.12.86.15-1.49.37-3.73.37-3.73l2.4.4v11.45c4.82-.54,8-1.09,8.82-1.51Z" style="fill: #00246b" />
+        <g class="shad-grpe-7" data-name="shad-grpe" style="opacity: 0.85">
+          <path class="tower-13" data-name="tower" d="M545,673.86s-.22,2.24-.37,3.73c-4-.4-6.07-.58-10.12-.86.1-1.5.15-2.25.26-3.74-4-.28-5.93-.39-9.89-.56-.07,1.5-.1,2.25-.16,3.75-4.06-.18-6.09-.24-10.15-.29l0-3.75c-4-.06-5.94-.06-9.91,0,0,1.5,0,2.25.06,3.75-4.06.05-6.09.11-10.15.29-.07-1.5-.1-2.25-.16-3.75-4,.17-5.94.28-9.89.56.1,1.49.15,2.24.26,3.74-4.05.28-6.08.46-10.12.86-.15-1.49-.23-2.24-.38-3.73a16.42,16.42,0,0,0-2.38.38l0,14.77,10.52,18.45c2,62.18,2,146.78,0,209,19.66,2.76,37.88,2.89,54.44,0-2.69-66.29-3.41-152,0-209L547.4,689V674.26Z" style="fill: #605f60" />
+          <g class="top-shadow" style="opacity: 0.2">
+            <path d="M544.63,677.59c-4-.4-6.07-.58-10.12-.86.1-1.5.15-2.25.26-3.74-4-.28-5.93-.39-9.89-.56-.07,1.5-.1,2.25-.16,3.75-4.06-.18-6.09-.24-10.15-.29l0-3.75c-4-.06-5.94-.06-9.91,0,0,1.5,0,2.25.06,3.75-4.06.05-6.09.11-10.15.29-.07-1.5-.1-2.25-.16-3.75-4,.17-5.94.28-9.89.56.1,1.49.15,2.24.26,3.74-4.05.28-6.08.46-10.12.86-.15-1.49-.23-2.24-.38-3.73a16.42,16.42,0,0,0-2.38.38v8.47c21.66-3.81,45.32-6.53,75.46.54v-9l-2.4-.4S544.78,676.1,544.63,677.59Z" />
+          </g>
+          <g class="briques-13" data-name="briques">
+            <path class="brique-37" data-name="brique" d="M527.37,727.51a49.23,49.23,0,0,0-8.71-.72" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <path class="brique-38" data-name="brique" d="M524.58,751.51a48.45,48.45,0,0,0-8.38-.51" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <path class="brique-39" data-name="brique" d="M502,864.14a53.5,53.5,0,0,0-9.39.63" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+          </g>
+          <path class="shadow-29" data-name="shadow" d="M471.93,689c18.89-5.92,59-5.16,75.47,0l-10.51,18.45q-.35,5.76-.63,11.62c-10.93-8.77-35.76-9.61-36.66,6.52-1.14,20.56-4,118.74,6.45,192.87a214.29,214.29,0,0,1-23.6-2.05c2-62.18,2-146.78,0-209Z" style="opacity: 0.2" />
+          <path class="col-9" data-name="col" d="M482.45,707.46,471.93,689c18.89-5.92,59-5.16,75.47,0l-10.51,18.45C521.91,702.63,496.66,702.76,482.45,707.46Z" style="opacity: 0.2" />
+          <g class="roof-tower-side">
+            <path class="roof-10" data-name="roof" d="M509.67,573.92c-1.27.55,25.36,80,46.55,110.16-28.85-11.71-76.33-8.18-93.66,0C484.58,662.44,491.35,632.26,509.67,573.92Z" style="fill: #090970" />
+            <path class="shadow-30" data-name="shadow" d="M509.39,574.81c-31.54,116.14-16.31,83,40,98.17,2.33,4.15,4.63,7.9,6.88,11.1-28.85-11.71-76.33-8.18-93.66,0C484.47,662.55,491.28,632.56,509.39,574.81Z" style="opacity: 0.2" />
+          </g>
+        </g>
+      </g>
+      <g class="tower-roof-right">
+        <path class="back-4" data-name="back" d="M1373.67,673.86s.22,2.24.37,3.73c4-.4,6.07-.58,10.12-.86-.1-1.5-.16-2.25-.26-3.74,3.95-.28,5.93-.39,9.89-.56.07,1.5.1,2.25.16,3.75,4.06-.18,6.09-.24,10.15-.29l0-3.75c4-.06,5.94-.06,9.9,0l0,3.75c4.06.05,6.09.11,10.15.29.06-1.5.1-2.25.16-3.75,4,.17,5.94.28,9.89.56-.1,1.49-.16,2.24-.26,3.74,4.05.28,6.08.46,10.12.86.15-1.49.23-2.24.37-3.73a16.43,16.43,0,0,1,2.39.38s.27,12.33,0,12.13c1.79,1.37-10,19.63-10.52,21.09-2,62.18-2,146.78,0,209a219.93,219.93,0,0,1-23.6,2.05h0a154.26,154.26,0,0,1-30.84-2c2.63-67,3.49-148.06,0-209L1371.27,689V674.26Z" style="fill: #00246b" />
+        <path class="top-back" d="M1362.45,684.08c20.76-29.54,46.79-106.51,46.59-110l.24.77h0c13.3,37.46,18.61,79.68,46.83,109.27h0a53,53,0,0,1-9.37,2.17c.25.2,0-12.13,0-12.13a16.43,16.43,0,0,0-2.39-.38c-.14,1.49-.22,2.24-.37,3.73-4-.4-6.07-.57-10.12-.86.1-1.49.16-2.24.26-3.74-3.95-.28-5.93-.39-9.89-.56-.06,1.5-.1,2.25-.16,3.75-4.06-.17-6.09-.23-10.15-.29l0-3.75c-4,0-5.94,0-9.9,0l0,3.75c-4.06.06-6.09.12-10.15.29-.06-1.5-.09-2.25-.16-3.75-4,.17-5.94.28-9.89.56.1,1.5.16,2.25.26,3.74-4.05.29-6.08.46-10.12.86-.15-1.49-.37-3.73-.37-3.73l-2.4.4v11.45c-4.82-.54-8-1.09-8.82-1.51Z" style="fill: #00246b" />
+        <g class="shade-grpe">
+          <path class="tower-14" data-name="tower" d="M1373.67,673.86s.22,2.24.37,3.73c4-.4,6.07-.58,10.12-.86-.1-1.5-.16-2.25-.26-3.74,3.95-.28,5.93-.39,9.89-.56.07,1.5.1,2.25.16,3.75,4.06-.18,6.09-.24,10.15-.29l0-3.75c4-.06,5.94-.06,9.9,0l0,3.75c4.06.05,6.09.11,10.15.29.06-1.5.1-2.25.16-3.75,4,.17,5.94.28,9.89.56-.1,1.49-.16,2.24-.26,3.74,4.05.28,6.08.46,10.12.86.15-1.49.23-2.24.37-3.73a16.43,16.43,0,0,1,2.39.38l0,14.77-10.52,18.45c-2,62.18-2,146.78,0,209-19.66,2.76-37.88,2.89-54.44,0,2.69-66.29,3.4-152,0-209L1371.27,689V674.26Z" style="fill: #605f60" />
+          <g class="top-shadow-2" data-name="top-shadow" style="opacity: 0.2">
+            <path d="M1374,677.59c4-.4,6.07-.58,10.12-.86-.1-1.5-.16-2.25-.26-3.74,3.95-.28,5.93-.39,9.89-.56.07,1.5.1,2.25.16,3.75,4.06-.18,6.09-.24,10.15-.29l0-3.75c4-.06,5.94-.06,9.9,0l0,3.75c4.06.05,6.09.11,10.15.29.06-1.5.1-2.25.16-3.75,4,.17,5.94.28,9.89.56-.1,1.49-.16,2.24-.26,3.74,4.05.28,6.08.46,10.12.86.15-1.49.23-2.24.37-3.73a16.43,16.43,0,0,1,2.39.38v8.47c-21.66-3.81-45.32-6.53-75.46.54v-9l2.4-.4S1373.89,676.1,1374,677.59Z" />
+          </g>
+          <g class="briques-14" data-name="briques">
+            <path class="brique-40" data-name="brique" d="M1391.3,727.51a49.23,49.23,0,0,1,8.71-.72" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <path class="brique-41" data-name="brique" d="M1394.09,751.51a48.45,48.45,0,0,1,8.38-.51" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <path class="brique-42" data-name="brique" d="M1416.68,864.14a53.56,53.56,0,0,1,9.39.63" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+          </g>
+          <path class="shadow-31" data-name="shadow" d="M1446.74,689c-18.89-5.92-59-5.16-75.47,0l10.51,18.45q.35,5.76.63,11.62c10.93-8.77,35.76-9.61,36.66,6.52,1.14,20.56,4,118.74-6.45,192.87a214.5,214.5,0,0,0,23.6-2.05c-2-62.18-2-146.78,0-209Z" style="opacity: 0.2" />
+          <path class="col-10" data-name="col" d="M1436.22,707.46,1446.74,689c-18.89-5.92-59-5.16-75.47,0l10.51,18.45C1396.75,702.63,1422,702.76,1436.22,707.46Z" style="opacity: 0.2" />
+          <g class="roof-tower-side">
+            <path class="roof-12" data-name="roof" d="M1409,573.92c1.27.55-25.36,80-46.55,110.16,28.85-11.71,76.33-8.18,93.66,0C1434.09,662.44,1427.32,632.26,1409,573.92Z" style="fill: #090970" />
+            <path class="shadow-32" data-name="shadow" d="M1409.28,574.81c31.54,116.14,16.31,83-40,98.17-2.33,4.15-4.64,7.9-6.88,11.1,28.85-11.71,76.33-8.18,93.66,0C1434.2,662.55,1427.39,632.56,1409.28,574.81Z" style="opacity: 0.2" />
+          </g>
+        </g>
+      </g>
+      <g class="tower-right">
+        <path class="tower-15" data-name="tower" d="M1269.53,612.63v11.91q-13-2.38-25.87-3.8V608.82q-12-1.32-24-1.79V619q-13-.51-25.87,0V607q-12,.45-24,1.75v11.91q-13,1.41-25.87,3.82V612.57q-6.57,1.23-13.11,2.71v37.44L1152,689.83c6.85,114.63,5.41,152.61,0,286,33.32,5.81,70,5.54,109.53,0-4.08-125.1-4.08-160.88,0-286l21.15-37.11V615.28Q1276.07,613.82,1269.53,612.63Z" style="fill: #00246b" />
+        <g class="shad-grpe-8" data-name="shad-grpe" style="opacity: 0.85">
+          <path class="tower-16" data-name="tower" d="M1269.53,612.63v11.91q-13-2.38-25.87-3.8V608.82q-12-1.32-24-1.79V619q-13-.51-25.87,0V607q-12,.45-24,1.75v11.91q-13,1.41-25.87,3.82V612.57q-6.57,1.23-13.11,2.71v37.44L1152,689.83c6.85,114.63,5.41,152.61,0,286,33.32,5.81,70,5.54,109.53,0-4.08-125.1-4.08-160.88,0-286l21.15-37.11V615.28Q1276.07,613.82,1269.53,612.63Z" style="fill: #605f60" />
+          <g class="briques-15" data-name="briques">
+            <path class="brique-43" data-name="brique" d="M1171.11,730.17a102.65,102.65,0,0,1,17.53-1.45" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-44" data-name="brique" d="M1176.73,778.46a98,98,0,0,1,16.85-1" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-45" data-name="brique" d="M1222.17,870.63a107.45,107.45,0,0,1,18.9,1.28" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+          </g>
+          <g class="tower-windows">
+            <path class="window-20" d="M1173.55,758.5h11.6V734.06c0-3.21-3.87-11.43-5.8-11.43s-5.8,8.22-5.8,11.43Z" style="fill: #e2d600" />
+            <path class="window-edge-6" data-name="window-edge" d="M1179.35,722.63a1.26,1.26,0,0,1,.69.29c-2,1.44-5.11,8.28-5.11,11.14V758.5h-1.38V734.06C1173.55,730.85,1177.42,722.63,1179.35,722.63Z" style="fill: #494949" />
+            <path class="window-21" data-name="window" d="M1246.87,758.19h-11.61V733.75c0-3.2,3.87-11.43,5.81-11.43s5.8,8.23,5.8,11.43Z" style="fill: #e2d600" />
+            <path class="window-edge-7" data-name="window-edge" d="M1241.07,722.32a1.3,1.3,0,0,0-.69.29c2,1.45,5.11,8.28,5.11,11.14v24.44h1.38V733.75C1246.87,730.55,1243,722.32,1241.07,722.32Z" style="fill: #494949" />
+          </g>
+          <path class="shadow-33" data-name="shadow" d="M1282.64,652.72c-38-11.91-118.68-10.38-151.83,0L1152,689.83q.69,11.59,1.27,23.38c22-17.63,72-19.33,73.75,13.13,2.3,41.36,8,104.46-13,253.59a429.07,429.07,0,0,0,47.49-4.11c-4.08-125.1-4.08-160.88,0-286Z" style="opacity: 0.2" />
+          <path class="col-11" data-name="col" d="M1261.49,689.83l21.15-37.11c-38-11.91-118.68-10.38-151.83,0L1152,689.83C1182.09,680.13,1232.9,680.38,1261.49,689.83Z" style="opacity: 0.2" />
+        </g>
+      </g>
+      <g class="tower-left">
+        <path class="tower-17" data-name="tower" d="M658.38,612.63v11.91q13-2.38,25.88-3.8V608.82q12-1.32,24-1.79V619q13-.51,25.87,0V607q12,.45,24,1.75v11.91q13,1.41,25.87,3.82V612.57q6.57,1.23,13.11,2.71v37.44L776,689.83c-6.85,114.63-5.41,152.61,0,286-33.32,5.81-70,5.54-109.53,0,4.08-125.1,4.08-160.88,0-286l-21.15-37.11V615.28Q651.85,613.82,658.38,612.63Z" style="fill: #00246b" />
+        <g class="shad-grpe-9" data-name="shad-grpe" style="opacity: 0.85">
+          <path class="tower-18" data-name="tower" d="M658.38,612.63v11.91q13-2.38,25.88-3.8V608.82q12-1.32,24-1.79V619q13-.51,25.87,0V607q12,.45,24,1.75v11.91q13,1.41,25.87,3.82V612.57q6.57,1.23,13.11,2.71v37.44L776,689.83c-6.85,114.63-5.41,152.61,0,286-33.32,5.81-70,5.54-109.53,0,4.08-125.1,4.08-160.88,0-286l-21.15-37.11V615.28Q651.85,613.82,658.38,612.63Z" style="fill: #605f60" />
+          <g class="briques-16" data-name="briques">
+            <path class="brique-46" data-name="brique" d="M768.38,708a102.65,102.65,0,0,0-17.53-1.45" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-47" data-name="brique" d="M751.19,778.46a98,98,0,0,0-16.85-1" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-48" data-name="brique" d="M705.75,870.63a107.45,107.45,0,0,0-18.9,1.28" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+          </g>
+          <path class="col-12" data-name="col" d="M666.43,689.83l-21.15-37.11c38-11.91,118.68-10.38,151.83,0L776,689.83C745.83,680.13,695,680.38,666.43,689.83Z" style="opacity: 0.2" />
+          <g class="tower-windows">
+            <path class="window-22" data-name="window" d="M756.24,758.19h-11.6V733.75c0-3.2,3.87-11.43,5.8-11.43s5.8,8.23,5.8,11.43Z" style="fill: #e2d600" />
+            <path class="window-edge-8" data-name="window-edge" d="M750.44,722.32a1.34,1.34,0,0,0-.69.29c2,1.45,5.11,8.28,5.11,11.14v24.44h1.38V733.75C756.24,730.55,752.38,722.32,750.44,722.32Z" style="fill: #494949" />
+            <path class="window-23" data-name="window" d="M682.92,758.5h11.61V734.06c0-3.21-3.87-11.43-5.81-11.43s-5.8,8.22-5.8,11.43Z" style="fill: #e2d600" />
+            <path class="window-edge-9" data-name="window-edge" d="M688.72,722.63a1.23,1.23,0,0,1,.69.29c-2,1.44-5.11,8.28-5.11,11.14V758.5h-1.38V734.06C682.92,730.85,686.79,722.63,688.72,722.63Z" style="fill: #494949" />
+          </g>
+          <path class="shadow-34" data-name="shadow" d="M645.28,652.72c38-11.91,118.68-10.38,151.83,0L776,689.83q-.69,11.59-1.27,23.38c-22-17.63-72-19.33-73.75,13.13-2.3,41.36-8,104.46,13,253.59a429.07,429.07,0,0,1-47.49-4.11c4.08-125.1,4.08-160.88,0-286Z" style="opacity: 0.2" />
+        </g>
+      </g>
+      <g class="ground">
+        <path class="ground-2" data-name="ground" d="M153.88,1156.39C172.66,1035,406.36,919,511.06,922.13c87.83,2.64,845.31,3,890.54-1.23,134.6-12.6,334.21,106.95,395.49,247.74Z" style="fill: #0b397c" />
+        <polygon class="wall-ground-left" points="520.39 926.03 532.55 920.08 569.36 919.82 603.84 922.23 622.93 920.08 642.84 919.2 656.32 920.08 696.15 919.2 738.02 916.66 771.04 921.35 787.04 918.64 818.7 920.08 836.4 918.47 862.27 920.08 899.21 916.66 932.23 921.35 878.88 931.41 858.28 928 844.23 931.11 829.19 927.44 788.98 929.22 770.96 928.51 755.04 930.23 734.45 931.93 719.64 927.75 685.43 929.27 653.25 929.27 637.25 928.96 611.55 931.07 549.63 929.07 529.51 929.27 520.39 926.03" style="opacity: 0.2" />
+        <polygon class="wall-ground-right" points="1004.58 926.03 1016.74 920.08 1053.55 919.82 1088.03 922.23 1107.12 920.08 1127.03 919.2 1140.51 920.08 1180.34 919.2 1222.21 916.66 1255.23 921.35 1271.23 918.64 1302.89 920.08 1320.59 918.47 1346.46 920.08 1383.4 916.66 1416.42 921.35 1363.07 931.41 1344.91 925.45 1330.79 928.78 1313.38 930.56 1270.36 928.85 1256.06 931.28 1238.02 927.15 1218.84 926.47 1204.68 929.27 1169.77 924.81 1137.44 929.27 1121 928.26 1095.74 931.07 1035.72 926.27 1013.7 929.27 1004.58 926.03" style="opacity: 0.2" />
+        <g class="left-roof-tower-base">
+          <path class="left-roof-tower-back" d="M482.09,899.73c-.23,11-.5,21.7-.83,31.79,20.52,2.88,39.53,3,56.82,0-.42-10.23-.79-20.92-1.1-31.88C523.64,901.72,494.15,902.15,482.09,899.73Z" style="fill: #00246b" />
+          <path class="left-base-roof-tower-back" d="M482.09,899.73c-.23,11-.5,21.7-.83,31.79,20.52,2.88,39.53,3,56.82,0-.42-10.23-.79-20.92-1.1-31.88C523.64,901.72,494.15,902.15,482.09,899.73Z" style="fill: #5d5963" />
+          <path class="base-shadow" d="M504.8,901.37c-9-.08-17.49-.59-22.71-1.64-.23,11-.5,21.7-.83,31.79a214.09,214.09,0,0,0,30.6,2.2C506.48,929.9,504.07,922,504.8,901.37Z" style="opacity: 0.2" />
+          <path class="base-top-shadow" d="M537,900.28c0-.21,0-.42,0-.64-13.34,2.08-42.83,2.51-54.89.09,0,.23,0,.45,0,.68C492.54,903.51,525.7,902.31,537,900.28Z" style="opacity: 0.3" />
+          <polygon class="dirt" points="479.98 931.66 483.47 930.11 497.6 932.51 512.49 931.58 529.17 932.51 536.89 929.12 540.06 932 536.89 934.22 531.98 933.73 519.04 936.51 503.55 936.51 491.04 934.64 479.47 933.66 479.98 931.66" style="opacity: 0.2" />
+        </g>
+        <g class="right-roof-tower-base">
+          <path class="left-roof-tower-back-2" data-name="left-roof-tower-back" d="M1437.15,899.71c.22,11,.5,21.7.83,31.79-20.52,2.88-39.53,3-56.82,0,.42-10.23.79-20.92,1.1-31.88C1395.6,901.7,1425.09,902.13,1437.15,899.71Z" style="fill: #00246b" />
+          <path class="left-base-roof-tower-back-2" data-name="left-base-roof-tower-back" d="M1437.15,899.71c.22,11,.5,21.7.83,31.79-20.52,2.88-39.53,3-56.82,0,.42-10.23.79-20.92,1.1-31.88C1395.6,901.7,1425.09,902.13,1437.15,899.71Z" style="fill: #5d5963" />
+          <path class="base-shadow-2" data-name="base-shadow" d="M1414.44,901.35c9-.08,17.49-.6,22.71-1.64.22,11,.5,21.7.83,31.79a214.09,214.09,0,0,1-30.6,2.2C1412.76,929.88,1415.17,922,1414.44,901.35Z" style="opacity: 0.2" />
+          <path class="base-top-shadow-2" data-name="base-top-shadow" d="M1382.24,900.26c0-.21,0-.42,0-.64,13.34,2.08,42.83,2.51,54.89.09,0,.22,0,.45,0,.68C1426.7,903.49,1393.54,902.29,1382.24,900.26Z" style="opacity: 0.3" />
+          <polygon class="dirt-2" data-name="dirt" points="1379.79 931.66 1383.27 930.11 1397.4 932.51 1412.3 931.58 1428.98 932.51 1436.7 929.12 1439.87 932 1436.7 934.22 1431.79 933.73 1418.85 936.51 1403.36 936.51 1390.85 934.64 1379.27 933.66 1379.79 931.66" style="opacity: 0.2" />
+        </g>
+        <g class="right-tower-base">
+          <path class="left-roof-tower-back-3" data-name="left-roof-tower-back" d="M1261.12,888.49c.45,15.35,1,30.15,1.64,44.17-40.32,4-77.69,4.18-111.66,0,.82-14.22,1.54-29.06,2.17-44.29C1179.48,891.26,1237.42,891.86,1261.12,888.49Z" style="fill: #00246b" />
+          <path class="left-base-roof-tower-back-3" data-name="left-base-roof-tower-back" d="M1261.12,888.49c.45,15.35,1,30.15,1.64,44.17-40.32,4-77.69,4.18-111.66,0,.82-14.22,1.54-29.06,2.17-44.29C1179.48,891.26,1237.42,891.86,1261.12,888.49Z" style="fill: #5d5963" />
+          <path class="base-shadow-3" data-name="base-shadow" d="M1216.49,890.77c17.72-.11,34.38-.82,44.63-2.28.45,15.35,1,30.15,1.64,44.17a597.22,597.22,0,0,1-60.14,3.05C1213.2,930.41,1217.94,919.47,1216.49,890.77Z" style="opacity: 0.2" />
+          <path class="base-top-shadow-3" data-name="base-top-shadow" d="M1153.23,889.26c0-.3,0-.59,0-.89,26.21,2.89,84.15,3.49,107.85.12l0,1C1240.59,893.75,1175.44,892.08,1153.23,889.26Z" style="opacity: 0.3" />
+          <polygon class="dirt-3" data-name="dirt" points="1148.4 932.88 1155.25 930.73 1183.02 934.06 1212.28 932.76 1245.07 934.06 1260.23 929.35 1266.47 933.36 1260.23 936.43 1250.58 935.75 1225.16 939.62 1194.72 939.62 1170.14 937.02 1147.39 935.65 1148.4 932.88" style="opacity: 0.2" />
+        </g>
+        <g class="left-tower-base">
+          <path class="left-roof-tower-back-4" data-name="left-roof-tower-back" d="M666.89,888.61c-.45,15.35-1,30.15-1.64,44.17,40.32,4,77.69,4.18,111.66,0-.82-14.22-1.54-29.06-2.17-44.29C748.53,891.38,690.59,892,666.89,888.61Z" style="fill: #00246b" />
+          <path class="left-base-roof-tower-back-4" data-name="left-base-roof-tower-back" d="M666.89,888.61c-.45,15.35-1,30.15-1.64,44.17,40.32,4,77.69,4.18,111.66,0-.82-14.22-1.54-29.06-2.17-44.29C748.53,891.38,690.59,892,666.89,888.61Z" style="fill: #5d5963" />
+          <path class="base-shadow-4" data-name="base-shadow" d="M711.52,890.89c-17.72-.11-34.38-.82-44.63-2.28-.45,15.35-1,30.15-1.64,44.17a597.22,597.22,0,0,0,60.14,3.05C714.81,930.53,710.07,919.59,711.52,890.89Z" style="opacity: 0.2" />
+          <path class="base-top-shadow-4" data-name="base-top-shadow" d="M774.78,889.38c0-.3,0-.59,0-.89-26.21,2.89-84.15,3.49-107.85.12l0,.95C687.42,893.87,752.58,892.2,774.78,889.38Z" style="opacity: 0.3" />
+          <polygon class="dirt-4" data-name="dirt" points="779.62 933 772.76 930.85 745 934.18 715.73 932.88 682.95 934.18 667.78 929.47 661.54 933.48 667.78 936.55 677.43 935.88 702.85 939.74 733.29 939.74 757.87 937.14 780.62 935.77 779.62 933" style="opacity: 0.2" />
+        </g>
+        <g class="trees">
+          <g class="tree-right">
+            <path class="tree-2" data-name="tree" d="M1680.48,676.44c24.21,5.22-28.21,293-41.15,330.26s-91.29,21.69-89-19.17S1656.26,671.23,1680.48,676.44Z" style="fill: #104687" />
+            <path class="shadow-35" data-name="shadow" d="M1684.23,680.83c13.87,36.84-32.79,291-44.9,325.87-13.7,39.11-97.75,19.85-88.39-24.19C1631.36,1055.12,1649.39,882,1684.23,680.83Z" style="opacity: 0.2" />
+            <path class="light-3" data-name="light" d="M1557.24,992c2.22-39.39,98.56-296.71,127.2-310.57-1-2.89-2.29-4.61-4-5-24.22-5.21-127.83,270.22-130.13,311.09-.81,14.33,8.3,25.54,21,32.47C1562.41,1013.1,1556.59,1003.56,1557.24,992Z" style="fill: #f4e92c;opacity: 0.1" />
+          </g>
+          <g class="tree-right-2" data-name="tree-right">
+            <path class="tree-3" data-name="tree" d="M1535.27,833.67c10.15.67,6,120.72,3,136.65s-35.8,14.25-37.3-2.49S1525.12,833,1535.27,833.67Z" style="fill: #104687" />
+            <path class="shadow-36" data-name="shadow" d="M1537.05,835.22c7.84,14.15,4,120.19,1.19,135.1-3.24,16.71-38.54,13.89-37.36-4.56C1537.89,990.47,1534.89,919,1537.05,835.22Z" style="opacity: 0.2" />
+            <path class="light-4" data-name="light" d="M1503.56,967.83c-1.43-16,21.88-124.2,32.84-133.52a1.7,1.7,0,0,0-1.13-.64c-10.15-.68-35.83,117.42-34.33,134.16.83,9.33,11.37,14,21.06,13.51C1513.12,980.93,1504.32,976.32,1503.56,967.83Z" style="fill: #f4e92c;opacity: 0.1" />
+          </g>
+          <g class="tree-left">
+            <path class="tree-4" data-name="tree" d="M362.1,731.75c-16.37,1.09-9.68,194.69-4.79,220.39s57.74,23,60.16-4S378.47,730.66,362.1,731.75Z" style="fill: #104687" />
+            <path class="shadow-37" data-name="shadow" d="M359.22,734.26c-12.63,22.81-6.49,193.84-1.91,217.88,5.22,27,62.15,22.41,60.26-7.36C357.88,984.64,362.71,869.43,359.22,734.26Z" style="opacity: 0.2" />
+            <path class="light-5" data-name="light" d="M362.1,731.75a2.67,2.67,0,0,0-1.7.88c17.59,14,55.46,189.65,53.14,215.5-1.23,13.73-15.5,21.17-29.87,21.8,15.59.68,32.46-6.82,33.8-21.8C419.89,921.13,378.47,730.66,362.1,731.75Z" style="fill: #f4e92c;opacity: 0.1" />
+          </g>
+          <g class="tree-left-2" data-name="tree-left">
+            <path class="tree-5" data-name="tree" d="M270.39,691.79c-20.86,3.16,8.51,250.59,17.54,283s76.48,23.27,76.68-11.6S291.26,688.64,270.39,691.79Z" style="fill: #104687" />
+            <path class="shadow-38" data-name="shadow" d="M267,695.32c-13.74,30.6,12.52,249.14,21,279.46,9.59,34,82.07,22,76.44-15.9C292.15,1016.37,286,868.2,267,695.32Z" style="opacity: 0.2" />
+            <path class="light-6" data-name="light" d="M270.39,691.79a4.31,4.31,0,0,0-2.85,2.42C293,719.3,357.18,930.6,357,963.18c-.11,18.84-19.86,30.17-39.42,31.48,21.67,1.53,46.92-10.17,47-31.48C364.81,928.31,291.26,688.64,270.39,691.79Z" style="fill: #f4e92c;opacity: 0.1" />
+          </g>
+        </g>
+        <polygon class="road" points="932.57 914.34 732.55 1160.84 1175.53 1160.84 992.35 913.09 932.57 914.34" style="fill: #5d7d84" />
+        <g class="border">
+          <polygon points="897.47 950.92 897.47 943.46 788.75 1034.54 721.19 1123.58 721.88 1154 897.47 950.92" style="fill: #3f3f3f" />
+          <polygon points="721.19 1123.58 680.49 1125.62 888.58 943.46 897.47 943.46 721.19 1123.58" style="fill: #666" />
+          <polygon points="1022.63 950.08 1022.63 942.63 1121.65 1034.54 1189.2 1123.58 1188.51 1154 1022.63 950.08" style="fill: #3f3f3f" />
+          <polygon points="1189.2 1123.58 1229.91 1125.62 1031.53 942.63 1022.63 942.63 1189.2 1123.58" style="fill: #666" />
+        </g>
+      </g>
+      <g class="castle">
+        <path class="castle-2" data-name="castle" d="M1030.78,787.41l3,0a36.64,36.64,0,0,0,8.18-16.44h0q-81.9-2.37-163.76,0h0a45.19,45.19,0,0,0,8.18,16.44l2.87,0a763.79,763.79,0,0,1,8.37,126.47c-4.64,1.88-10.72,3-18.68,2.78l4.17,20.86h20.31v.08h113.52v-.08h20.3l4.18-20.86c-8.34.21-14.61-1-19.32-3C1020.33,872.49,1023.44,830.38,1030.78,787.41Z" style="fill: #00246b" />
+        <g class="shad-grpe-10" data-name="shad-grpe" style="opacity: 0.85">
+          <path class="wall-8" data-name="wall" d="M888.58,783.3a764.4,764.4,0,0,1,8.62,145.12h125.66c-3.32-47.11-.15-95.54,8.62-145.12Z" style="fill: #605f60" />
+          <path class="shadow-39" data-name="shadow" d="M1031.48,783.3H888.58a764.4,764.4,0,0,1,8.62,145.12h10.35c-5.26-47.71-8.24-125.07-1.32-129.49,7.92-5.06,85.87-6.79,98.61-1.76s10.61,99.1,1.68,131.25h16.34C1019.54,881.31,1022.71,832.88,1031.48,783.3Z" style="opacity: 0.2" />
+          <g class="stairs">
+            <g class="rampes">
+              <path class="edge-top" d="M1008.35,888l-4.06-1.31C953.17,900,967,900.08,916,886.69L911.9,888s5.56,29.64-33,28.66l4.17,20.86h154.13l4.18-20.86C1002.8,917.64,1008.35,888,1008.35,888Z" style="fill: #4f4f4f" />
+              <path class="edge-front" d="M1016.89,918.23c-18.23-.18-122.49,1.38-138-1.57l4.17,20.86h154.13l4.18-20.86Z" style="fill: #5b5b5b" />
+              <g class="dirt-5" data-name="dirt">
+                <polygon class="dirt-6" data-name="dirt" points="883.06 937.52 968.33 937.52 938.53 935.92 918.53 935.92 905.85 935.92 892.91 936.46 886.79 934.23 882.72 935.82 883.06 937.52" style="fill: #00246b" />
+                <polygon class="dirt-7" data-name="dirt" points="1037.19 937.52 1037.73 934.82 1027.08 936.71 1022.63 933.53 1016.05 937.52 1037.19 937.52" style="fill: #00246b" />
+              </g>
+              <path class="stairs-2" data-name="stairs" d="M1004.29,886.69c-48.56,10.48-39.91,10.34-88.33,0,0,0,1.5,28-12.59,31.66V937.6h113.52V918.35C1002.8,914.7,1004.29,886.69,1004.29,886.69Z" style="fill: #424142" />
+            </g>
+            <polygon class="stair" points="1001.53 924.77 1001.53 913.5 995.11 913.5 995.11 900.38 924.95 900.38 924.95 913.5 918.53 913.5 918.53 924.77 911.9 924.77 911.9 937.61 1008.16 937.61 1008.16 924.77 1001.53 924.77" style="fill: #605f60" />
+            <g class="lights">
+              <rect class="light-7" data-name="light" x="918.53" y="913.09" width="83" height="1.25" style="fill: #7a7a7a" />
+              <rect class="light-8" data-name="light" x="911.9" y="924.32" width="96.26" height="1.25" style="fill: #7a7a7a" />
+              <rect class="light-9" data-name="light" x="924.95" y="900.38" width="70.17" height="1.25" style="fill: #7a7a7a" />
+            </g>
+          </g>
+          <g class="door">
+            <path class="door-2" data-name="door" d="M960,838.88c-24.49,7-18.31,37.62-18.88,61.48h37.76C978.36,876.38,984.46,845.88,960,838.88Z" style="fill: #494949" />
+            <path class="light-10" data-name="light" d="M960,843.28c-20.49,7-15.2,36.18-15.7,57.08h31.4C975.25,879.37,980.48,850.25,960,843.28Z" style="fill: #e2d600" />
+          </g>
+          <g class="windows-6" data-name="windows">
+            <path class="window-edges" d="M927,855.6a174.85,174.85,0,0,0-2.49-37h-8.35a174.71,174.71,0,0,1,2.27,37Z" style="fill: #494949" />
+            <path class="window-24" data-name="window" d="M926.42,852.7a164.08,164.08,0,0,0-1.86-31.24h-5.79a164.08,164.08,0,0,1,1.86,31.24Z" style="fill: #e2d600" />
+            <path class="window-edges-2" data-name="window-edges" d="M993.14,856.26c-.5-13.58.94-24.28,2.13-37.7h8.93c-2.26,13.25-3.2,24.11-2,37.7Z" style="fill: #494949" />
+            <path class="window-25" data-name="window" d="M993.64,852.7a164.08,164.08,0,0,1,1.86-31.24h5.79a164.08,164.08,0,0,0-1.86,31.24Z" style="fill: #e2d600" />
+          </g>
+          <g class="top">
+            <path class="top-2" data-name="top" d="M1033.73,787.43q-73.69-.79-147.4,0A44.27,44.27,0,0,1,878.15,771q81.9-2.37,163.76,0A36,36,0,0,1,1033.73,787.43Z" style="fill: #605f60" />
+            <path class="edge-light" d="M887.38,772.47c49.65,2.64,107.43-8.94,153.26,3.08a37.54,37.54,0,0,0,1.27-4.56q-81.9-2.37-163.76,0a51.25,51.25,0,0,0,3.87,9.88C880.25,774.68,880.54,772.41,887.38,772.47Z" style="fill: #6d6d6d" />
+            <g class="shadow-40" data-name="shadow" style="opacity: 0.30000000000000004">
+              <path d="M1018.35,784.3c-40.28-1.82-81.84-.89-122.7.14-5.47.14-12.19-4.63-16.32-9.79a41.85,41.85,0,0,0,7,12.78q73.71-.78,147.4,0a35.9,35.9,0,0,0,7.9-15.27C1036.77,778.7,1029.74,784.81,1018.35,784.3Z" />
+            </g>
+          </g>
+        </g>
+        <g class="blason">
+          <path class="blason-2" data-name="blason" d="M1009,703a3.8,3.8,0,0,0,1.24-3.37h0a8.94,8.94,0,0,0-1.16-2.69q-6.5-.36-13-.62a25.53,25.53,0,0,0-1.29-5.44,187.78,187.78,0,0,0-30-3.16l.1-9.18a19.49,19.49,0,0,0-9.86,0v.48h0l.09,8.71c-1.89.06-3.78.14-5.67.25h0a203.44,203.44,0,0,0-24.32,2.9,29.31,29.31,0,0,0-1.08,5.44q-6.6.25-13.19.62c-1.79,2.29-1.95,4.71.41,6.45q6.16-.33,12.32-.59c-2.24,24.22,11.47,49,32.24,53.9l.19,18.36h7.86l.19-18.37c19.7-4.43,34.82-30.52,32.53-53.88q6,.25,12,.58Z" style="fill: #00246b" />
+          <g class="shad-grpe-11" data-name="shad-grpe" style="opacity: 0.85">
+            <g class="montant">
+              <path class="vertical" d="M963.93,775.1h-7.86l-1-96.52a19.49,19.49,0,0,1,9.86,0Z" style="fill: #6b5934" />
+              <path class="shadow-vert" d="M955.07,678.58v.48c14.74-2.19,5.44,23.45,6.87,96h2l1-96.52A19.49,19.49,0,0,0,955.07,678.58Z" style="opacity: 0.2" />
+              <path class="horizontal" d="M1008.68,703.43a888.21,888.21,0,0,0-97.36,0c-2.33-2.09-2.47-3.36-.41-6.45a893.2,893.2,0,0,1,98.18,0C1011.22,700.61,1010.27,701.5,1008.68,703.43Z" style="fill: #6b5934" />
+              <path class="shadow-horiz" d="M909.9,698.74c-.86,1.9-.4,3,1.42,4.69a888.21,888.21,0,0,1,97.36,0c1.1-1.33,1.89-2.17,1.57-3.76C1009,702.33,909.77,704.28,909.9,698.74Z" style="opacity: 0.2" />
+            </g>
+            <path class="shield" d="M960,757.31c-31-2.51-41.48-45.16-34.82-66.39a189.58,189.58,0,0,1,69.64,0C1002.56,711.88,989.5,755.16,960,757.31Z" style="fill: #090970" />
+            <path class="liseret" d="M960,752.91c-27.12-2.19-36.24-39.45-30.42-58a165.64,165.64,0,0,1,60.83,0C997.2,713.22,985.79,751,960,752.91Z" style="fill: none;stroke: #1153bc;stroke-miterlimit: 10" />
+            <path class="shadow-41" data-name="shadow" d="M994.82,690.92a185.42,185.42,0,0,0-24-2.91c15.35,3.54,17.66,10.73,14.65,26.23-5.79,29.79-25.62,33-25.62,33s-21.53-5.1-26.63-34.21c-2-11.48-.89-20.65,16.24-25a199,199,0,0,0-24.32,2.9C911.11,778.35,1009.09,776.82,994.82,690.92Z" style="opacity: 0.2" />
+          </g>
+        </g>
+      </g>
+      <g class="torsh">
+        <circle class="center-3" cx="1086.39" cy="847.14" r="6.7" style="fill: #fda415" />
+        <circle class="center-2" cx="1086.39" cy="847.14" r="5.62" style="fill: #fde377" />
+        <circle class="center-1" cx="1086.39" cy="847.14" r="4.15" style="fill: #fdefd8" />
+        <line class="pied" x1="1086.39" y1="945.6" x2="1086.39" y2="856.93" style="fill: none;stroke: #000;stroke-linecap: round;stroke-miterlimit: 10" />
+        <path class="socle" d="M1086.39,856.39c-6,0-9.65-4.32-9.65-9.65H1096C1096,852.07,1092.42,856.39,1086.39,856.39Z" style="fill: #262526" />
+        <circle class="outer-1" cx="1086.39" cy="847.14" r="28.93" style="fill: #f4e92c;opacity: 0.15" />
+        <circle class="outer-2" cx="1086.39" cy="847.14" r="49.11" style="fill: #f4e92c;opacity: 0.1" />
+      </g>
+      <g class="torsh" data-name="torsh">
+        <circle class="center-3-2" data-name="center-3" cx="833.34" cy="847.14" r="6.7" style="fill: #fda415" />
+        <circle class="center-2-2" data-name="center-2" cx="833.34" cy="847.14" r="5.62" style="fill: #fde377" />
+        <circle class="center-1-2" data-name="center-1" cx="833.34" cy="847.14" r="4.15" style="fill: #fdefd8" />
+        <line class="pied-2" data-name="pied" x1="833.34" y1="945.6" x2="833.34" y2="856.93" style="fill: none;stroke: #000;stroke-linecap: round;stroke-miterlimit: 10" />
+        <path class="socle-2" data-name="socle" d="M833.34,856.39c-6,0-9.65-4.32-9.65-9.65H843C843,852.07,839.37,856.39,833.34,856.39Z" style="fill: #262526" />
+        <circle class="outer-1-2" data-name="outer-1" cx="833.34" cy="847.14" r="28.93" style="fill: #f4e92c;opacity: 0.15" />
+        <circle class="outer-2-2" data-name="outer-2" cx="833.34" cy="847.14" r="49.11" style="fill: #f4e92c;opacity: 0.1" />
+      </g>
+      <g class="door-light">
+        <path class="door-light-2" data-name="door-light" d="M944.21,900v13.08h-8.44v11.26h-8.26V937.7h-8.32c-17,24.63,17,81.09,40.81,81.09s59-56.47,42.09-81.09h-9.42V924.34h-8.32V913.08h-8.56V900Z" style="fill: #e2d600;opacity: 0.2" />
+      </g>
+    </g>
+  </svg>
+
+</div>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/responsive-castle/dist/script.js b/responsive-castle/dist/script.js
new file mode 100644
index 0000000..7163725
--- /dev/null
+++ b/responsive-castle/dist/script.js
@@ -0,0 +1,682 @@
+gsap.config({
+  trialWarn: false });
+
+
+var assetVerticalBreakPoints = [
+{
+  selector: ".blason",
+  large: {
+    scale: 1,
+    transformOrigin: "center bottom",
+    duration: 0.3 },
+
+  medium: {
+    scale: 1,
+    transformOrigin: "center bottom",
+    duration: 0.3 },
+
+  narrow: {
+    scale: 0.5,
+    transformOrigin: "center bottom",
+    duration: 0.3 } },
+
+
+{
+  selector: ".small-tower",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: 300,
+    duration: 0.3 },
+
+  narrow: {
+    y: 300,
+    duration: 0.3 } },
+
+
+{
+  selector: ".big-tower",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: 0,
+    duration: 0.3 },
+
+  narrow: {
+    y: 200,
+    duration: 0.3 } },
+
+
+{
+  selector: ".house",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: 120,
+    duration: 0.3 },
+
+  narrow: {
+    y: 400,
+    duration: 0.3 } },
+
+
+{
+  selector: ".tree",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: 150,
+    duration: 0.3 },
+
+  narrow: {
+    y: 400,
+    duration: 0.3 } },
+
+
+{
+  selector: ".one",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: 100,
+    duration: 0.3 },
+
+  narrow: {
+    y: 300,
+    duration: 0.3 } },
+
+
+{
+  selector: ".big-tower-left",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: 400,
+    duration: 0.3 },
+
+  narrow: {
+    y: 400,
+    duration: 0.3 } },
+
+
+{
+  selector: ".big-tower-left-2",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: -60,
+    duration: 0.3 },
+
+  narrow: {
+    y: 190,
+    duration: 0.3 } },
+
+
+{
+  selector: ".double-tower-left",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: 90,
+    duration: 0.3 },
+
+  narrow: {
+    y: 90,
+    duration: 0.3 } },
+
+
+{
+  selector: ".double-tower-center",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: 250,
+    duration: 0.3 },
+
+  narrow: {
+    y: 400,
+    duration: 0.3 } },
+
+
+{
+  selector: ".tower-left, .tower-right",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: 0,
+    duration: 0.3 },
+
+  narrow: {
+    y: 110,
+    duration: 0.3 } },
+
+
+{
+  selector: ".tower-roof-left, .tower-roof-right",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: 0,
+    duration: 0.3 },
+
+  narrow: {
+    y: 60,
+    duration: 0.3 } },
+
+
+{
+  selector: ".top-back, .roof-tower-side, .tower-windows",
+  large: {
+    opacity: 1,
+    duration: 0.3 },
+
+  medium: {
+    opacity: 1,
+    duration: 0.3 },
+
+  narrow: {
+    opacity: 0,
+    duration: 0.3 } },
+
+
+{
+  selector: ".horizontal-bottom-general",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: -160,
+    duration: 0.3 },
+
+  narrow: {
+    y: -280,
+    duration: 0.3 } },
+
+
+{
+  selector: ".horizontal-bottom-1",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: -120,
+    duration: 0.3 },
+
+  narrow: {
+    y: -210,
+    duration: 0.3 } }];
+
+
+
+var assetHorizontalBreakPoints = [
+{
+  selector: ".tree-right, .tree-right-2",
+  large: {
+    x: 0,
+    rotate: 0,
+    transformOrigin: "center",
+    opacity: 1,
+    duration: 0.3 },
+
+  medium: {
+    x: -240,
+    rotate: -5,
+    transformOrigin: "center",
+    opacity: 1,
+    duration: 0.3 },
+
+  narrow: {
+    x: -240,
+    rotate: -5,
+    transformOrigin: "center",
+    opacity: 0,
+    duration: 0.3 } },
+
+
+{
+  selector: ".tree-left, .tree-left-2",
+  large: {
+    x: 0,
+    rotate: 0,
+    transformOrigin: "center",
+    opacity: 1,
+    duration: 0.3 },
+
+  medium: {
+    x: 240,
+    rotate: 5,
+    transformOrigin: "center",
+    opacity: 1,
+    duration: 0.3 },
+
+  narrow: {
+    x: 240,
+    rotate: 5,
+    transformOrigin: "center",
+    opacity: 0,
+    duration: 0.3 } },
+
+
+{
+  selector: ".light-radius",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: 0,
+    duration: 0.3 },
+
+  narrow: {
+    y: 50,
+    duration: 0.3 } },
+
+
+{
+  selector: ".main-castle-center",
+  large: {
+    opacity: 1,
+    duration: 0 },
+
+  medium: {
+    opacity: 1,
+    duration: 0 },
+
+  narrow: {
+    opacity: 0,
+    duration: 0 } },
+
+
+{
+  selector: ".big-tower-left",
+  large: {
+    x: 0,
+    duration: 0.3 },
+
+  medium: {
+    x: 0,
+    duration: 0.3 },
+
+  narrow: {
+    x: 300,
+    duration: 0.3 } },
+
+
+{
+  selector: ".torsh",
+  large: {
+    opacity: 1,
+    duration: 0 },
+
+  medium: {
+    opacity: 1,
+    duration: 0 },
+
+  narrow: {
+    opacity: 0,
+    duration: 0 } },
+
+
+{
+  selector: ".one",
+  large: {
+    opacity: 1,
+    duration: 0.3 },
+
+  medium: {
+    opacity: 1,
+    duration: 0.3 },
+
+  narrow: {
+    opacity: 0,
+    duration: 0.3 } },
+
+
+{
+  selector: ".two",
+  large: {
+    x: 0,
+    duration: 0.3 },
+
+  medium: {
+    x: 334,
+    duration: 0.3 },
+
+  narrow: {
+    x: 334,
+    duration: 0.3 } },
+
+
+{
+  selector: ".tree",
+  large: {
+    x: 0,
+    opacity: 1,
+    duration: 0.3 },
+
+  medium: {
+    x: 60,
+    opacity: 1,
+    duration: 0.3 },
+
+  narrow: {
+    x: 60,
+    opacity: 0,
+    duration: 0.3 } },
+
+
+{
+  selector: ".four",
+  large: {
+    x: 0,
+    duration: 0.3 },
+
+  medium: {
+    x: -130,
+    duration: 0.3 },
+
+  narrow: {
+    x: -350,
+    duration: 0.3 } },
+
+
+{
+  selector: ".inner-small-tower",
+  large: {
+    y: 0,
+    duration: 0.3 },
+
+  medium: {
+    y: 0,
+    duration: 0.3 },
+
+  narrow: {
+    y: 450,
+    duration: 0.3 } },
+
+
+{
+  selector: ".inner-house",
+  large: {
+    x: 0,
+    y: 0,
+    transformOrigin: "center bottom",
+    transform: "scale(1)",
+    duration: 0.3 },
+
+  medium: {
+    x: -180,
+    y: 0,
+    transformOrigin: "center bottom",
+    transform: "scale(1)",
+    duration: 0.3 },
+
+  narrow: {
+    x: -280,
+    y: 0,
+    transformOrigin: "center bottom",
+    transform: "scale(0.6)",
+    duration: 0.3 } },
+
+
+{
+  selector: ".inner-big-tower",
+  large: {
+    x: 0,
+    y: 0,
+    transformOrigin: "center top",
+    transform: "scale(1)",
+    duration: 0.3 },
+
+  medium: {
+    x: -180,
+    y: 0,
+    transformOrigin: "center top",
+    transform: "scale(1)",
+    duration: 0.3 },
+
+  narrow: {
+    x: -280,
+    y: 0,
+    transformOrigin: "center top",
+    transform: "scale(0.6)",
+    duration: 0.3 } },
+
+
+{
+  selector: ".wall-right",
+  large: {
+    x: 0,
+    opacity: 1,
+    duration: 0.3 },
+
+  medium: {
+    x: -235,
+    opacity: 1,
+    duration: 0.3 },
+
+  narrow: {
+    x: -235,
+    opacity: 0,
+    duration: 0.3 } },
+
+
+{
+  selector: ".wall-left",
+  large: {
+    x: 0,
+    opacity: 1,
+    duration: 0.3 },
+
+  medium: {
+    x: 235,
+    opacity: 0,
+    duration: 0.3 },
+
+  narrow: {
+    x: 235,
+    opacity: 0,
+    duration: 0.3 } },
+
+
+{
+  selector: ".tower-roof-left, .left-roof-tower-base",
+  large: {
+    x: 0,
+    duration: 0.3 },
+
+  medium: {
+    x: 360,
+    duration: 0.3 },
+
+  narrow: {
+    x: 360,
+    duration: 0.3 } },
+
+
+{
+  selector: ".tower-left, .left-tower-base",
+  large: {
+    x: 0,
+    opacity: 1,
+    duration: 0.3 },
+
+  medium: {
+    x: 0,
+    opacity: 1,
+    duration: 0.3 },
+
+  narrow: {
+    x: 200,
+    opacity: 0,
+    duration: 0.3 } },
+
+
+{
+  selector: ".tower-roof-right, .right-roof-tower-base",
+  large: {
+    x: 0,
+    duration: 0.3 },
+
+  medium: {
+    x: -360,
+    duration: 0.3 },
+
+  narrow: {
+    x: -360,
+    duration: 0.3 } },
+
+
+{
+  selector: ".tower-right, .right-tower-base",
+  large: {
+    x: 0,
+    opacity: 1,
+    duration: 0.3 },
+
+  medium: {
+    x: 0,
+    opacity: 1,
+    duration: 0.3 },
+
+  narrow: {
+    x: -200,
+    opacity: 0,
+    duration: 0.3 } },
+
+
+{
+  selector: ".double-tower-left",
+  large: {
+    x: 0,
+    scale: 1,
+    transformOrigin: "center",
+    duration: 0.3 },
+
+  medium: {
+    x: 180,
+    scale: 1,
+    transformOrigin: "center",
+    duration: 0.3 },
+
+  narrow: {
+    x: 350,
+    scale: 0.8,
+    transformOrigin: "center",
+    duration: 0.3 } },
+
+
+{
+  selector: ".double-tower-center",
+  large: {
+    x: 0,
+    duration: 0.3 },
+
+  medium: {
+    x: 103,
+    duration: 0.3 },
+
+  narrow: {
+    x: 103,
+    duration: 0.3 } },
+
+
+{
+  selector: ".big-tower-left-2",
+  large: {
+    x: 0,
+    duration: 0.3 },
+
+  medium: {
+    x: 150,
+    duration: 0.3 },
+
+  narrow: {
+    x: 220,
+    duration: 0.3 } }];
+
+
+
+
+function applySVGResponsiveness_horizontal(width) {
+  assetHorizontalBreakPoints.forEach(asset => {
+    if (width < 360) {
+      gsap.to(asset.selector, asset.narrow);
+    } else if (width < 620) {
+      gsap.to(asset.selector, asset.medium);
+    } else {
+      gsap.to(asset.selector, asset.large);
+    }
+  });
+}
+
+function applySVGResponsiveness_vertical(height) {
+  assetVerticalBreakPoints.forEach(asset => {
+    if (height < 300) {
+      gsap.to(asset.selector, asset.narrow);
+    } else if (height < 485) {
+      gsap.to(asset.selector, asset.medium);
+    } else {
+      gsap.to(asset.selector, asset.large);
+    }
+  });
+}
+
+const draw = document.getElementById("draw");
+
+window.addEventListener("resize", function () {
+  draw.setAttribute(
+  "style",
+  "width:" + window.innerWidth + "px;height:" + window.innerHeight + "px;");
+
+
+  applySVGResponsiveness_horizontal(draw.offsetWidth);
+  applySVGResponsiveness_vertical(draw.offsetHeight);
+});
+
+var ro = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    const cr = entry.contentRect;
+    applySVGResponsiveness_horizontal(cr.width);
+    applySVGResponsiveness_vertical(cr.height);
+  }
+});
+ro.observe(document.getElementById("draw"));
+
+window.onload = function () {
+  gsap.to("#fade", {
+    opacity: 0,
+    duration: 5 });
+
+};
+
+document.addEventListener("mousedown", function () {
+  gsap.to("#instructions", {
+    opacity: 0,
+    duration: 0.4 });
+
+});
\ No newline at end of file
diff --git a/responsive-castle/dist/style.css b/responsive-castle/dist/style.css
new file mode 100644
index 0000000..1764589
--- /dev/null
+++ b/responsive-castle/dist/style.css
@@ -0,0 +1,101 @@
+@import url("https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap");
+#draw {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  overflow: hidden;
+  width: 95%;
+  height: 95%;
+  max-width: 95%;
+  max-height: 95%;
+  min-width: 150px;
+  min-height: 140px;
+  resize: both;
+}
+
+#draw::-webkit-resizer {
+  display: none;
+}
+
+body {
+  min-height: 100vh;
+  width: 100%;
+  background-color: #000000;
+  overflow: hidden;
+}
+
+#scene {
+  position: absolute;
+  height: 640px;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+#resize {
+  width: 100%;
+  padding: 0 25px 0 0;
+  box-sizing: border-box;
+  height: 100px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  pointer-events: none;
+  height: 70px;
+}
+
+#resize:after {
+  content: "";
+  display: block;
+  position: absolute;
+  transform: rotate(45deg);
+  background-color: #13b4e5;
+  right: -30px;
+  bottom: -30px;
+  width: 50px;
+  height: 50px;
+  pointer-events: none;
+}
+
+#resize > div {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0 25px 0 0;
+}
+
+#resize > div > div {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  display: -webkit-box;
+  -webkit-box-pack: end;
+}
+
+#resize > div > div > span {
+  color: #13b4e5;
+  font-family: "MedievalSharp", cursive;
+  text-align: right;
+  font-size: 4em;
+  display: inline-block;
+  text-shadow: 0px 0px 9px black;
+}
+
+#arrow {
+  filter: drop-shadow(0px 0px 9px rgba(0, 0, 0, 0.7));
+}
+
+@media screen and (max-width: 640px) {
+  #resize > div > div > span {
+    font-size: 3em;
+  }
+}
+#resize > div > svg {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 25px;
+  height: 25px;
+}
\ No newline at end of file
diff --git a/responsive-castle/license.txt b/responsive-castle/license.txt
new file mode 100644
index 0000000..35f482d
--- /dev/null
+++ b/responsive-castle/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Vast Rideside (https://codepen.io/vastrideside/pen/gOGPZNd)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/responsive-castle/src/index.html b/responsive-castle/src/index.html
new file mode 100644
index 0000000..920935e
--- /dev/null
+++ b/responsive-castle/src/index.html
@@ -0,0 +1,741 @@
+<div id="fade" style="pointer-events:none;position:fixed;width:100vw;height:100vh;background:black;z-index:9;"></div>
+<div id="draw">
+  <div id="resize">
+    <div>
+      <div id="instructions"><span>RESIZE SCENE</span>
+
+        <svg id="arrow" width="90" height="72" viewBox="0 0 90 72">
+          <path style="fill:#13b4e5" d="M72.2,20.18c-.57,5.18-1.25,8.66-2.34,11.15A69.47,69.47,0,0,0,60,26.12a50.77,50.77,0,0,0-16.6-4.41,35.12,35.12,0,0,0-16.81,2.91,44.7,44.7,0,0,0-13.48,9.63l.66.74a42.93,42.93,0,0,1,13.85-7.65,31.32,31.32,0,0,1,15.18-.85A45.24,45.24,0,0,1,57,32.12,58.37,58.37,0,0,1,64.12,37c-3.2,1.46-7.72,2.53-14.28,4.83l0,3c9,.08,18-1.13,26.91-2.5.19-7.49.1-15.06-1.73-22.38Z" />
+        </svg>
+      </div>
+    </div>
+  </div>
+
+  <svg id="scene" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080">
+    <defs>
+      <linearGradient id="sky" class="sky" x1="960" y1="1080" x2="960" gradientUnits="userSpaceOnUse">
+        <stop offset="0" stop-color="#13b4e5" />
+        <stop offset="0.56" stop-color="#02175b" />
+        <stop offset="1" />
+      </linearGradient>
+    </defs>
+    <g class="sky">
+      <rect width="1920" height="1080" style="fill: url(#sky)" />
+    </g>
+    <g class="stars" style="opacity: 0.7000000000000001">
+      <g class="stars-2" data-name="stars">
+        <g style="opacity: 0.277595035439361">
+          <circle cx="72.95" cy="43.88" r="4.15" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.325750913893254">
+          <circle cx="49.3" cy="44.3" r="3.74" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.565807421840206">
+          <circle cx="15.93" cy="84.79" r="2.99" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.37414605214159">
+          <circle cx="57.28" cy="161.53" r="2.42" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.812281778605826">
+          <circle cx="41.61" cy="235.13" r="2.75" style="fill: #efefbf" />
+        </g>
+        <circle cx="9.56" cy="308.05" r="2.75" style="fill: #efefbf" />
+        <g style="opacity: 0.457970255796699">
+          <circle cx="10.7" cy="388.1" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.160384779396265">
+          <circle cx="38.54" cy="442.84" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.11476820801767">
+          <circle cx="58.16" cy="462.13" r="3.34" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.124022074355704">
+          <circle cx="70.49" cy="477.4" r="3.98" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.180389451798874">
+          <circle cx="109.56" cy="493.1" r="5.49" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.168691938926053">
+          <circle cx="174.98" cy="525.58" r="3.91" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.758924346916585">
+          <circle cx="241.7" cy="467.53" r="4.33" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.344529667470351">
+          <circle cx="275.57" cy="318.37" r="3.54" style="fill: #efefbf" />
+        </g>
+        <circle cx="288.57" cy="201.02" r="2.83" style="fill: #efefbf" />
+        <g style="opacity: 0.402707697699135">
+          <circle cx="273.62" cy="129.03" r="3.18" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.255890667408369">
+          <circle cx="365.12" cy="70.93" r="3.57" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.299427442256248">
+          <circle cx="421.12" cy="118.53" r="4.21" style="fill: #efefbf" />
+        </g>
+        <circle cx="421.91" cy="283.85" r="2.67" style="fill: #efefbf" />
+        <circle cx="438.65" cy="351.34" r="1.93" style="fill: #efefbf" />
+        <g style="opacity: 0.613065766479503">
+          <circle cx="631.94" cy="247.09" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.416060699355363">
+          <circle cx="786.24" cy="133.58" r="3.36" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.42027904468132">
+          <circle cx="899.26" cy="133.71" r="1.49" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.515982773206423">
+          <circle cx="1097.75" cy="170.75" r="2.79" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.27225447788998">
+          <circle cx="1546.42" cy="155.81" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.211434637553776">
+          <circle cx="1772.1" cy="119.08" r="3.5" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.889276764565972">
+          <circle cx="1917.25" cy="119.64" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.346501238050084">
+          <circle cx="1868.65" cy="316.69" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.589635936375129">
+          <circle cx="1832.13" cy="374.58" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.484985976941031">
+          <circle cx="1750.65" cy="417.25" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.541770508753047">
+          <circle cx="1616.45" cy="447.91" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.7567862166518">
+          <circle cx="1561.41" cy="477.18" r="3.48" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.635774917117411">
+          <circle cx="1460.29" cy="555.95" r="3.32" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.590522857614012">
+          <circle cx="1452.6" cy="568.4" r="3.01" style="fill: #efefbf" />
+        </g>
+        <circle cx="1186.89" cy="406.19" r="2.99" style="fill: #efefbf" />
+        <g style="opacity: 0.197495326829206">
+          <circle cx="1052.64" cy="378.68" r="4.52" style="fill: #efefbf" />
+        </g>
+        <circle cx="888.42" cy="377.18" r="2.75" style="fill: #efefbf" />
+        <circle cx="687.06" cy="404.23" r="2.75" style="fill: #efefbf" />
+        <circle cx="589.38" cy="461.24" r="2.75" style="fill: #efefbf" />
+        <g style="opacity: 0.705730471057717">
+          <circle cx="452.87" cy="519.86" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.524726826618837">
+          <circle cx="323.77" cy="690.95" r="3.53" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.419985822644295">
+          <circle cx="279.43" cy="700.43" r="3.48" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.443559807675169">
+          <circle cx="327.22" cy="420.71" r="3.61" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.315755858170207">
+          <circle cx="379.22" cy="325.01" r="3.27" style="fill: #efefbf" />
+        </g>
+        <circle cx="429.23" cy="247.09" r="2.77" style="fill: #efefbf" />
+        <g style="opacity: 0.104987988099219">
+          <circle cx="519.18" cy="140.87" r="5.38" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.202913773616705">
+          <circle cx="587.79" cy="95.74" r="4.97" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.411795798361377">
+          <circle cx="769.85" cy="35.61" r="5.12" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.761941990123419">
+          <circle cx="897.92" cy="19.69" r="2.37" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.384652628469805">
+          <circle cx="1242.23" cy="20.3" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.499155900151065">
+          <circle cx="1392.09" cy="13.81" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.208992307367029">
+          <circle cx="1533.57" cy="13.98" r="2.75" style="fill: #efefbf" />
+        </g>
+        <circle cx="1625.12" cy="16.98" r="2.75" style="fill: #efefbf" />
+        <g style="opacity: 0.626391871117238">
+          <circle cx="1600.1" cy="70.47" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.518364144209206">
+          <circle cx="1415.28" cy="163.28" r="3.58" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.261954673564098">
+          <circle cx="1261.41" cy="202.46" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.606793964601258">
+          <circle cx="1063" cy="270.26" r="3.01" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.139994498030557">
+          <circle cx="998.94" cy="312.45" r="4.74" style="fill: #efefbf" />
+        </g>
+        <circle cx="1151.05" cy="330.12" r="2.75" style="fill: #efefbf" />
+        <g style="opacity: 0.442107434892553">
+          <circle cx="1475.78" cy="301.08" r="4.65" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.285844629379034">
+          <circle cx="1594.74" cy="274.5" r="4.74" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.334368420996644">
+          <circle cx="1643.91" cy="268.03" r="4.24" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.545408877318136">
+          <circle cx="1437.01" cy="313.58" r="3.28" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.192676639537843">
+          <circle cx="1072.84" cy="356.4" r="4.2" style="fill: #efefbf" />
+        </g>
+        <circle cx="846.84" cy="357.26" r="2.75" style="fill: #efefbf" />
+        <circle cx="685.68" cy="357.12" r="2.75" style="fill: #efefbf" />
+        <g style="opacity: 0.49902474028636">
+          <circle cx="583.66" cy="337.24" r="2.75" style="fill: #efefbf" />
+        </g>
+        <circle cx="485.6" cy="319.58" r="1.94" style="fill: #efefbf" />
+        <g style="opacity: 0.107338954113952">
+          <circle cx="318.97" cy="374.73" r="4.51" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.318886623460542">
+          <circle cx="147.21" cy="485.59" r="4.47" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.260634421904909">
+          <circle cx="76.78" cy="566.06" r="4.2" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.215547514525137">
+          <circle cx="40.05" cy="637.89" r="3.62" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.303587813489648">
+          <circle cx="56.09" cy="681.93" r="3.89" style="fill: #efefbf" />
+        </g>
+        <circle cx="329.98" cy="784.06" r="2.75" style="fill: #efefbf" />
+        <circle cx="513.82" cy="747.93" r="2.75" style="fill: #efefbf" />
+        <circle cx="748.95" cy="566.29" r="2.75" style="fill: #efefbf" />
+        <circle cx="1189.93" cy="603.56" r="2.75" style="fill: #efefbf" />
+        <circle cx="1356.19" cy="613.64" r="2.75" style="fill: #efefbf" />
+        <g style="opacity: 0.148610002175251">
+          <circle cx="1473.33" cy="630.42" r="3.79" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.173314836730801">
+          <circle cx="1540.01" cy="650.41" r="3.8" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.768312240531127">
+          <circle cx="1621.96" cy="675.01" r="3.47" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.326470511413166">
+          <circle cx="1689.41" cy="605.53" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.181823445276986">
+          <circle cx="1650.13" cy="354.39" r="3.9" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.314848235088404">
+          <circle cx="1542.1" cy="170.72" r="2.67" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.231252622812415">
+          <circle cx="1394.73" cy="99.18" r="3.91" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.188431667918274">
+          <circle cx="967.6" cy="80.26" r="1.65" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.105397223680777">
+          <circle cx="757.38" cy="81.04" r="5.61" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.298834387320642">
+          <circle cx="595.55" cy="65.38" r="3.85" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.166271503835047">
+          <circle cx="433.27" cy="62.97" r="3.98" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.355843654517834">
+          <circle cx="309.26" cy="63.1" r="2.75" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.065965826435126">
+          <circle cx="184.41" cy="67.17" r="4.26" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.149475404879551">
+          <circle cx="116.71" cy="103.99" r="6.41" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.189498158953082">
+          <circle cx="131.08" cy="182.26" r="3.96" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.216488845579902">
+          <circle cx="170.91" cy="185.16" r="4.5" style="fill: #efefbf" />
+        </g>
+        <g style="opacity: 0.292759150748337">
+          <circle cx="197.99" cy="183.13" r="3.96" style="fill: #efefbf" />
+        </g>
+        <circle cx="139.23" cy="285.26" r="2.07" style="fill: #efefbf" />
+        <circle cx="146.88" cy="286.17" r="2.04" style="fill: #efefbf" />
+      </g>
+    </g>
+    <g class="back-towers">
+      <path class="four" d="M1393.39,630.22c-16.52-23.49-37.19-84.7-37-87.42-14.53,46.28-19.91,70.24-37.39,87.42a44.38,44.38,0,0,1,7.45-2.59c0,1.63,0,4.82,0,6.41l8.35,14.66c1.61,49.4,1.61,173.46,0,222.86H1378c-2.1-53.17-2.76-174.52,0-222.86l8.35-14.66c0-1.5,0-4.67,0-6.18A64,64,0,0,1,1393.39,630.22Z" style="fill: #1d3d6b;opacity: 0.8" />
+      <path class="tree" d="M1194.59,240.25c-30.8-43.81-69.35-157.94-69-163-27.09,86.31-37.13,131-69.73,163a82.51,82.51,0,0,1,13.88-4.82c0,3,0,9,0,11.95l15.58,27.33c3,92.13,3,522.07,0,614.2H1166c-3.91-99.15-5.15-524,0-614.2l15.58-27.33c0-2.8,0-8.72,0-11.53A121.92,121.92,0,0,1,1194.59,240.25Z" style="fill: #1d3d6b;opacity: 0.8" />
+      <path class="two" d="M556.23,532.68c-8.9-12.65-20-45.62-19.94-47.09-7.83,24.93-10.73,37.84-20.14,47.09a23.46,23.46,0,0,1,4-1.39v3.45l4.5,7.9c.87,26.61,0,343.7,0,343.7H548s-1.49-317.66,0-343.7l4.5-7.9c0-.81,0-2.52,0-3.33A36.21,36.21,0,0,1,556.23,532.68Z" style="fill: #1d3d6b;opacity: 0.8" />
+      <path class="one" d="M1029.59,396.13c-2.64-3.78-5.12-7.71-7.5-11.69h0c-3.61-6.05-7.1-12.5-10.35-18.83-7.44-1.43-15.29-2.52-23.37-3.3,0-10,0-36.12,0-45.77l13-22.73v-4.06c5.94-.68,9.9-1.35,10.87-1.87-25.66-36.54-57.64-131.23-57.41-135.58l-.3.95v0c-16.39,46.14-22.94,98.2-57.71,134.65a65.14,65.14,0,0,0,11.55,2.68c-2.09,2.06,12.21,23.92,12.95,26v46.64c-6.67.82-13.19,1.85-19.74,3.1-1.15,2-2.34,3.86-3.56,5.76h0a138.05,138.05,0,0,1-19.49,24.09,77.34,77.34,0,0,1,9.45-3.62l-9.45,3.62a85.32,85.32,0,0,0,15.12,3.5v4.27l17,29.75c3.28,100.33,3.28,375.71,0,476H998.4c-4-99.54-5.31-375.24-1-457.3l0,0q.47-9.43,1-18.75l17-29.75v-5.33C1023.13,397.69,1028.32,396.81,1029.59,396.13Z" style="fill: #1d3d6b;opacity: 0.8" />
+    </g>
+    <g class="house">
+      <g class="inner-house">
+        <path class="house-2" data-name="house" d="M1305.08,327q16.15-1.53,32.5-3.85h0c-39.76-64.27-72.58-126.22-96.51-185.19-25,57.49-58.58,120.07-96.51,185.19h0q16,2.36,32.27,3.93c3.52,35.69,2.33,75-1.3,116.24H1306.6C1302.56,401.47,1301,362.07,1305.08,327Z" style="fill: #00246b" />
+        <g class="shad-grp" style="opacity: 0.7000000000000001">
+          <path class="roof-back" d="M1144.56,323.13c62,9.13,126.21,9.48,193,0L1245.32,252Z" style="fill: #040433" />
+          <path class="wall" d="M1306.6,443.3H1175.53c4-45.65,5.07-89,0-127.66H1306.6C1300.68,353.48,1302.12,396.91,1306.6,443.3Z" style="fill: #4f4e4f" />
+          <path class="shadow" d="M1306.6,315.64H1175.53c.85,6.42,1.5,13,2,19.65,47-18.44,105.59-12.82,105.59,18.82,0,23.51-1,56.49-2.29,89.19h25.75C1302.12,396.91,1300.68,353.48,1306.6,315.64Z" style="opacity: 0.2" />
+          <path class="window" d="M1290.71,418.45h-30.83c1.18-16.2-6-59,15.41-64.34C1296.72,359.4,1289.54,402.31,1290.71,418.45Z" style="fill: #e2d600" />
+          <path class="door-edge" d="M1276.29,354.11a7.44,7.44,0,0,0-4.21.88c17.15,11.28,10.92,46.47,12,63.27l7.66.19C1290.57,402,1297.69,360.09,1276.29,354.11Z" style="fill: #3a393a" />
+          <path class="roof" d="M1337.58,323.13a762.43,762.43,0,0,0-193,0c37.93-65.12,71.56-127.7,96.51-185.19C1265,196.91,1297.82,258.86,1337.58,323.13Z" style="fill: #090970" />
+          <path class="shadow-2" data-name="shadow" d="M1244.83,147c52.36,179.22,14.4,135.15-85.07,149.7q-7.47,13.13-15.2,26.4a762.43,762.43,0,0,1,193,0C1299.86,262.15,1268.4,203.27,1244.83,147Z" style="opacity: 0.2" />
+          <g class="briques">
+            <path class="brique" d="M1198.85,348c6.3-1.3,20.94-3,27-2.51" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-2" data-name="brique" d="M1234.43,392.92c4.5-.16,9.19-.69,13.28,0" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+          </g>
+        </g>
+      </g>
+    </g>
+    <g class="big-tower">
+      <g class="inner-big-tower">
+        <path class="tower" d="M1347.22,418.34v20.14q-22-4-43.73-6.43V411.91q-20.37-2.22-40.56-3V429q-22-.87-43.73-.06V408.84q-20.35.75-40.56,2.94v20.14q-22,2.38-43.72,6.46V418.24q-11.1,2.07-22.15,4.58v63.29l35.74,62.71c11.58,193.72,9.14,134.21,0,359.63,56.31,9.82,118.26,9.37,185.11,0-6.9-211.43-6.9-148.2,0-359.63l35.75-62.71V422.82Q1358.27,420.36,1347.22,418.34Z" style="fill: #00246b" />
+        <g class="shad-grp-2" data-name="shad-grp" style="opacity: 0.7000000000000001">
+          <path class="tower-2" data-name="tower" d="M1347.22,418.34v20.14q-22-4-43.73-6.43V411.91q-20.37-2.22-40.56-3V429q-22-.87-43.73-.06V408.84q-20.35.75-40.56,2.94v20.14q-22,2.38-43.72,6.46V418.24q-11.1,2.07-22.15,4.58v63.29l35.74,62.71c11.58,193.72,9.14,134.21,0,359.63,56.31,9.82,118.26,9.37,185.11,0-6.9-211.43-6.9-148.2,0-359.63l35.75-62.71V422.82Q1358.27,420.36,1347.22,418.34Z" style="fill: #605f60" />
+          <g class="briques-2" data-name="briques">
+            <path class="brique-3" data-name="brique" d="M1180.87,617a171.22,171.22,0,0,1,29.63-2.45" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6.76021766662598px" />
+            <path class="brique-4" data-name="brique" d="M1190.36,698.61a164.94,164.94,0,0,1,28.48-1.73" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6.76021766662598px" />
+            <path class="brique-5" data-name="brique" d="M1267.17,671.57a181.63,181.63,0,0,1,31.93,2.15" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6.76021766662598px" />
+          </g>
+          <path class="window-2" data-name="window" d="M1315,641.69h-12.75V614.82c0-3.52,4.25-12.56,6.37-12.56s6.38,9,6.38,12.56Z" style="fill: #e2d600" />
+          <path class="shadow-3" data-name="shadow" d="M1369.37,486.11c-64.23-20.14-200.58-17.55-256.6,0l35.74,62.71q1.17,19.6,2.15,39.51c37.15-29.79,126.75-32.7,124.64,22.19-2.06,53.6-2.06,196.27-21.93,304.88a726.11,726.11,0,0,0,80.25-6.95c-6.9-211.43-6.9-148.2,0-359.63Z" style="opacity: 0.2" />
+          <path class="col" d="M1333.62,548.82l35.75-62.71c-64.23-20.14-200.58-17.55-256.6,0l35.74,62.71C1199.43,532.42,1285.3,532.85,1333.62,548.82Z" style="opacity: 0.2" />
+        </g>
+        <path class="window-edge" d="M1308.58,602.26a1.36,1.36,0,0,0-.75.32c2.24,1.58,5.62,9.1,5.62,12.24v26.87H1315V614.82C1315,611.3,1310.71,602.26,1308.58,602.26Z" style="fill: #494949" />
+      </g>
+    </g>
+    <g class="big-tower-left">
+      <path class="tower-3" data-name="tower" d="M797.88,418.59c-33.94-48.27-76.42-174-76.06-179.62C692,334.06,680.91,383.29,645,418.59a90.17,90.17,0,0,1,15.3-5.32c0,3.35,0,9.89,0,13.17l17.16,30.11c3.31,101.51,3.31,356.42,0,457.92A352.8,352.8,0,0,0,716,917.81h0a251.43,251.43,0,0,0,50.34-3.33c-4.31-109.25-5.68-358.6,0-457.92l17.16-30.11c0-3.09,0-9.61,0-12.7A132.12,132.12,0,0,1,797.88,418.59Z" style="fill: #00246b" />
+      <g class="shad-grp-3" data-name="shad-grp" style="opacity: 0.5">
+        <path class="back-roog" d="M797.88,418.59l-74.37-52.21L645,418.59C680.21,431,791.25,422.11,797.88,418.59Z" style="fill: #040433" />
+        <path class="tower-4" data-name="tower" d="M783.48,407v19.46l-17.16,30.11c-5.56,93-4.39,349.7,0,457.92-27,4.72-56.78,4.5-88.87,0,3.31-101.5,3.31-356.41,0-457.92l-17.16-30.11V406.16c0,.54,65.5-36.05,65.5-36.05Z" style="fill: #605f60" />
+        <g class="briques-3" data-name="briques">
+          <path class="brique-6" data-name="brique" d="M750.78,489.28a82.19,82.19,0,0,0-14.22-1.17" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 3.24548773881467px" />
+          <path class="brique-7" data-name="brique" d="M746.23,528.46a80.53,80.53,0,0,0-13.68-.83" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 3.24548773881467px" />
+          <path class="brique-8" data-name="brique" d="M709.35,829.13a87.57,87.57,0,0,0-15.33,1" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 3.24548773881467px" />
+        </g>
+        <g class="windows">
+          <path class="window-3" data-name="window" d="M757.21,514.25H751.7V502.66c0-1.52,1.84-5.42,2.76-5.42s2.75,3.9,2.75,5.42Z" style="fill: #e2d600" />
+          <path class="window-edge-2" data-name="window-edge" d="M754.46,497.24a.63.63,0,0,0-.33.13c1,.69,2.42,3.93,2.42,5.29v11.59h.66V502.66C757.21,501.14,755.37,497.24,754.46,497.24Z" style="fill: #494949" />
+          <path class="window-4" data-name="window" d="M735.52,514.25h-6V501.69c0-1.65,2-5.88,3-5.88s3,4.23,3,5.88Z" style="fill: #e2d600" />
+          <path class="window-edge-3" data-name="window-edge" d="M732.54,495.81a.68.68,0,0,0-.36.15c1.05.74,2.63,4.26,2.63,5.73v12.56h.71V501.69C735.52,500,733.53,495.81,732.54,495.81Z" style="fill: #494949" />
+        </g>
+        <path class="shadow-4" data-name="shadow" d="M660.29,426.44c30.83-9.66,96.29-8.42,123.19,0l-17.16,30.11q-.55,9.42-1,19c-17.84-14.3-58.38-15.68-59.84,10.65C703.59,519.73,699,796.81,716,917.81a347.94,347.94,0,0,1-38.53-3.34c3.31-101.5,3.31-356.41,0-457.92Z" style="opacity: 0.2" />
+        <path class="col-2" data-name="col" d="M677.45,456.55l-17.16-30.11c30.83-9.66,96.29-8.42,123.19,0l-17.16,30.11C741.88,448.68,700.65,448.89,677.45,456.55Z" style="opacity: 0.2" />
+        <path class="drop-shadow" d="M783.48,419.65c-31.32-10-82.14-14.67-123.19,1.08V404.15l66.46-23.47,56.73,25.13Z" style="opacity: 0.2" />
+        <path class="roof-2" data-name="roof" d="M721.88,238.77c-2.07.9,41.4,130.62,76,179.82-47.11-19.11-124.61-13.37-152.89,0C680.94,383.26,692,334,721.88,238.77Z" style="fill: #090970" />
+        <path class="shadow-5" data-name="shadow" d="M721.43,240.21C670,429.79,694.81,375.73,786.64,400.46a212.8,212.8,0,0,0,11.24,18.13c-47.11-19.11-124.61-13.37-152.89,0C680.75,383.44,691.87,334.49,721.43,240.21Z" style="opacity: 0.2" />
+      </g>
+    </g>
+    <g class="big-tower-left-2" data-name="big-tower-left">
+      <path class="tower-5" data-name="tower" d="M712.91,460.28c-23.36-33.23-52.6-119.79-52.36-123.64C640,402.1,632.39,436,607.67,460.28a62,62,0,0,1,10.53-3.65c0,2.3,0,6.8,0,9.06L630,486.42c2.28,69.87,2.28,355.6,0,425.48a243.08,243.08,0,0,0,26.52,2.3h0a174,174,0,0,0,34.66-2.29c-3-75.21-3.91-357.11,0-425.48L703,465.69c0-2.13,0-6.61,0-8.74A90.65,90.65,0,0,1,712.91,460.28Z" style="fill: #00246b" />
+      <g class="shad-grpe" style="opacity: 0.6000000000000001">
+        <path class="back-roog-2" data-name="back-roog" d="M712.91,460.28l-51.19-35.93-54.05,35.93C631.91,468.84,708.35,462.71,712.91,460.28Z" style="fill: #040433" />
+        <path class="tower-6" data-name="tower" d="M703,452.3v13.39l-11.81,20.73c-3.83,64-3,351,0,425.48-18.61,3.24-39.09,3.1-61.18,0,2.28-69.88,2.28-355.61,0-425.48L618.2,465.69v-14c0,.37,45.08-24.82,45.08-24.82Z" style="fill: #605f60" />
+        <g class="briques-4" data-name="briques">
+          <path class="brique-9" data-name="brique" d="M680.49,509a55.76,55.76,0,0,0-9.79-.81" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.23414530222429px" />
+          <path class="brique-10" data-name="brique" d="M677.35,535.92a54.27,54.27,0,0,0-9.41-.57" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.23414530222429px" />
+          <path class="brique-11" data-name="brique" d="M652,742.89a60.79,60.79,0,0,0-10.55.71" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.23414530222429px" />
+        </g>
+        <path class="shadow-6" data-name="shadow" d="M618.2,465.69c21.22-6.65,66.28-5.8,84.8,0l-11.81,20.73q-.39,6.48-.71,13.05c-12.28-9.84-40.19-10.79-41.2,7.34-1.28,23.1-4.44,324.09,7.25,407.39A241.89,241.89,0,0,1,630,911.9c2.28-69.88,2.28-355.61,0-425.48Z" style="opacity: 0.2" />
+        <path class="col-3" data-name="col" d="M630,486.42,618.2,465.69c21.22-6.65,66.28-5.8,84.8,0l-11.81,20.73C674.36,481,646,481.14,630,486.42Z" style="opacity: 0.2" />
+        <path class="drop-shadow-2" data-name="drop-shadow" d="M703,461c-21.56-6.87-56.54-10.1-84.8.74V450.35L664,434.18l39,17.31Z" style="opacity: 0.2" />
+        <path class="roof-3" data-name="roof" d="M660.6,336.5c-1.43.62,28.5,89.91,52.31,123.78-32.42-13.15-85.78-9.2-105.24,0C632.41,436,640,402.05,660.6,336.5Z" style="fill: #090970" />
+        <path class="shadow-7" data-name="shadow" d="M660.29,337.49C624.84,468,642,430.78,705.17,447.81c2.62,4.66,5.21,8.88,7.74,12.47-32.42-13.15-85.78-9.2-105.24,0C632.28,436.09,639.94,402.39,660.29,337.49Z" style="opacity: 0.2" />
+      </g>
+    </g>
+    <g class="double-tower-left">
+      <path class="back" d="M670.58,623.63c-2.36-3.36-4.56-6.86-6.68-10.4h0c-3.21-5.38-6.31-11.11-9.2-16.75-6.62-1.27-13.6-2.24-20.79-2.93,0-8.92,0-32.13,0-40.71l11.52-20.21V529c5.28-.6,8.8-1.2,9.67-1.66-22.82-32.5-51.26-116.71-51.06-120.58l-.27.84h0c-14.57,41-20.4,87.33-51.32,119.75a57.23,57.23,0,0,0,10.26,2.38c-1.86,1.84,10.87,21.28,11.53,23.11v41.49c-5.94.72-11.74,1.63-17.56,2.75-1,1.74-2.08,3.44-3.17,5.13h0a123.86,123.86,0,0,1-17.33,21.42,67.46,67.46,0,0,1,8.4-3.22l-8.4,3.22a76.69,76.69,0,0,0,13.44,3.11v3.8L564.72,657c2.91,89.23,2.91,143.17,0,232.4a312.42,312.42,0,0,0,33.87,2.93h0a222.11,222.11,0,0,0,44.25-2.92c-3.59-88.53-4.73-142.76-.93-215.74h0q.42-8.38.91-16.67l15.08-26.46V625.8C664.83,625,669.44,624.23,670.58,623.63Z" style="fill: #00246b" />
+      <g class="shad-grpe-2" data-name="shad-grpe" style="opacity: 0.75">
+        <g class="top-tower">
+          <path class="back-roog-3" data-name="back-roog" d="M655.1,527.35,605.17,492.3l-52.71,35.05C576.1,535.7,650.65,529.72,655.1,527.35Z" style="fill: #040433" />
+          <path class="tower-7" data-name="tower" d="M645.43,519.57v13.06l-11.52,20.21v67.74H574.25V552.84l-11.53-20.21V519c0,.36,44-24.2,44-24.2Z" style="fill: #605f60" />
+          <g class="briques-5" data-name="briques">
+            <path class="brique-12" data-name="brique" d="M623.48,574.82a55,55,0,0,0-9.55-.79" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.17897432007683px" />
+          </g>
+          <path class="window-5" data-name="window" d="M603.43,545.93c-1.33,0-2.46,0-3.49,0l-1.23-14.29c2-.11,3.81,0,5.51,0Z" style="fill: #e2d600" />
+          <path class="shadow-8" data-name="shadow" d="M562.72,532.63c20.71-6.49,64.66-5.66,82.71,0l-11.52,20.21V566c-58.95-29.95-38.43,38.63-34.11,54.56H574.25V552.84Z" style="opacity: 0.2" />
+          <path class="col-4" data-name="col" d="M574.25,552.84l-11.53-20.21c20.71-6.49,64.66-5.66,82.71,0l-11.52,20.21C617.5,547.56,589.82,547.7,574.25,552.84Z" style="opacity: 0.2" />
+          <path class="drop-shadow-3" data-name="drop-shadow" d="M645.43,528.07c-21-6.7-55.14-9.85-82.71.72V517.66l44.63-15.76,38.08,16.88Z" style="opacity: 0.2" />
+          <path class="roof-4" data-name="roof" d="M604.08,406.63c-1.39.6,27.79,87.69,51,120.72-31.62-12.83-83.66-9-102.64,0C576.59,503.64,584,470.56,604.08,406.63Z" style="fill: #090970" />
+          <path class="shadow-9" data-name="shadow" d="M603.78,407.6c-34.57,127.28-17.88,91,43.77,107.59,2.56,4.55,5.09,8.66,7.55,12.16-31.62-12.83-83.66-9-102.64,0C576.46,503.76,583.93,470.89,603.78,407.6Z" style="opacity: 0.2" />
+        </g>
+        <path class="back-roog-4" data-name="back-roog" d="M670.58,623.63,605.2,597.21l-69,26.42C567.15,634.55,664.75,626.72,670.58,623.63Z" style="fill: #040433" />
+        <path class="tower-8" data-name="tower" d="M657.92,613.43v17.11L642.84,657c-4.89,81.75-3.86,137.27,0,232.4-23.77,4.14-49.91,4-78.12,0,2.91-89.23,2.91-143.17,0-232.4l-15.09-26.46V612.7C611.73,600.79,594.48,595.77,657.92,613.43Z" style="fill: #605f60" />
+        <g class="briques-6" data-name="briques">
+          <path class="brique-13" data-name="brique" d="M629.18,685.77a72.29,72.29,0,0,0-12.5-1" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.85284415188156px" />
+          <path class="brique-14" data-name="brique" d="M625.17,720.21a70.28,70.28,0,0,0-12-.73" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.85284415188156px" />
+          <path class="brique-15" data-name="brique" d="M592.76,814.37a77.26,77.26,0,0,0-13.47.91" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2.85284415188156px" />
+        </g>
+        <g class="windows-2" data-name="windows">
+          <polygon class="window-6" data-name="window" points="602.6 647.92 599.1 647.96 597.87 629.28 603.38 629.24 602.6 647.92" style="fill: #e2d600" />
+          <polygon class="window-7" data-name="window" points="640.4 653.09 636.74 652.42 645.25 632.41 651.46 633.66 640.4 653.09" style="fill: #e2d600" />
+          <polygon class="shadow-10" data-name="shadow" points="645.25 632.41 645.05 632.89 650.18 633.93 639.39 652.9 640.4 653.09 651.46 633.66 645.25 632.41" style="opacity: 0.4" />
+          <polygon class="window-8" data-name="window" points="566.77 653.09 570.44 652.42 561.92 632.41 555.72 633.66 566.77 653.09" style="fill: #e2d600" />
+          <polygon class="shadow-11" data-name="shadow" points="561.92 632.41 562.13 632.89 557 633.93 567.79 652.9 566.77 653.09 555.72 633.66 561.92 632.41" style="opacity: 0.4" />
+        </g>
+        <path class="shadow-12" data-name="shadow" d="M549.63,630.54c27.11-8.5,84.65-7.41,108.29,0L642.84,657q-.5,8.28-.91,16.67c-15.68-12.57-51.31-13.78-52.6,9.37-1.64,29.5-5.67,102.92,9.26,209.29a307.59,307.59,0,0,1-33.87-2.93c2.91-89.23,2.91-143.17,0-232.4Z" style="opacity: 0.2" />
+        <path class="col-5" data-name="col" d="M564.72,657l-15.09-26.46c27.11-8.5,84.65-7.41,108.29,0L642.84,657C621.35,650.08,585.11,650.26,564.72,657Z" style="opacity: 0.2" />
+        <path class="drop-shadow-4" data-name="drop-shadow" d="M657.92,624.57c-27.53-8.77-72.2-12.9-108.29.94V610.94c27-1.26,81.56-1,108.29,1.46Z" style="opacity: 0.2" />
+        <g class="roof-5" data-name="roof">
+          <path class="roof-6" data-name="roof" d="M556.69,597.08a125.82,125.82,0,0,1-20.5,26.55c24.86-11.75,93-16.8,134.39,0a232.39,232.39,0,0,1-15.88-27.15C625.17,590.81,588.81,590.81,556.69,597.08Z" style="fill: #090970" />
+          <path class="light" d="M660.29,607h0c-1.86-3.34-3.73-6.85-5.6-10.5-29.53-5.67-65.89-5.67-98,.6-1,1.75-2.09,3.45-3.17,5.13C574.53,593.42,646.08,591.14,660.29,607Z" style="fill: #1313a5" />
+          <path class="shadow-13" data-name="shadow" d="M563.72,595.83c-2.36.38-4.71.79-7,1.25a125.82,125.82,0,0,1-20.5,26.55c24.86-11.75,93-16.8,134.39,0-2.19-3.12-4.43-6.62-6.68-10.4C593.51,593.15,543.59,625.8,563.72,595.83Z" style="opacity: 0.2" />
+        </g>
+      </g>
+    </g>
+    <g class="horizontal-top">
+      <g class="double-tower-center">
+        <path class="back-2" data-name="back" d="M967.87,430.39c-3.9-5.58-7.57-11.39-11.09-17.27h0c-5.33-8.94-10.48-18.46-15.28-27.82-11-2.11-22.59-3.72-34.53-4.88,0-14.81,0-53.36,0-67.61l19.14-33.58v-6c8.76-1,14.62-2,16-2.75-37.9-54-85.15-193.88-84.82-200.31l-.44,1.4v0c-24.2,68.17-33.88,145.07-85.25,198.93a97,97,0,0,0,17.06,3.95c-3.09,3,18,35.34,19.14,38.39v68.91c-9.86,1.2-19.5,2.72-29.17,4.57-1.7,2.89-3.46,5.71-5.26,8.52h0a204.58,204.58,0,0,1-28.79,35.58,112.38,112.38,0,0,1,14-5.34l-14,5.34A126.18,126.18,0,0,0,767,435.56v6.31l25.06,44c4.84,148.22,4.84,237.82,0,386a514.85,514.85,0,0,0,56.26,4.86h0a368.31,368.31,0,0,0,73.51-4.85c-6-147.06-7.86-237.13-1.55-358.38l0,0q.69-13.93,1.51-27.69l25.05-44V434C958.33,432.69,966,431.39,967.87,430.39Z" style="fill: #00246b" />
+        <g class="shad-grpe-3" data-name="shad-grpe" style="opacity: 0.6000000000000001">
+          <path class="back-roog-5" data-name="back-roog" d="M942.16,270.47l-82.94-58.22-87.56,58.22C810.94,284.33,934.77,274.4,942.16,270.47Z" style="fill: #040433" />
+          <path class="tower-9" data-name="tower" d="M926.11,257.53v21.7L907,312.81V425.32H807.86V312.81l-19.14-33.58V256.61c0,.6,73-40.2,73-40.2Z" style="fill: #605f60" />
+          <g class="briques-7" data-name="briques">
+            <path class="brique-16" data-name="brique" d="M889.64,349.31A92.24,92.24,0,0,0,873.78,348" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 3.61956116072994px" />
+          </g>
+          <g class="window-9" data-name="window">
+            <polygon class="window-10" data-name="window" points="904.11 308.21 900.13 307.18 911.7 281.17 917.72 282.66 904.11 308.21" style="fill: #e2d600" />
+            <polygon class="window-11" data-name="window" points="890.19 304.76 885.67 304.03 894.59 278.35 901.38 279.2 890.19 304.76" style="fill: #e2d600" />
+            <polygon class="window-12" data-name="window" points="875.54 302.68 871.14 302.61 873.36 276.44 879.93 276.9 875.54 302.68" style="fill: #e2d600" />
+            <polygon class="shadow-14" data-name="shadow" points="911.7 281.17 911.61 281.37 916.7 282.63 903.2 307.98 904.11 308.21 917.72 282.66 911.7 281.17" style="fill: #494949" />
+            <polygon class="shadow-15" data-name="shadow" points="894.59 278.35 894.3 279.16 900.02 279.88 889.2 304.6 890.19 304.76 901.38 279.2 894.59 278.35" style="fill: #494949" />
+            <polygon class="shadow-16" data-name="shadow" points="873.36 276.44 873.29 277.3 879.17 277.71 874.91 302.67 875.54 302.68 879.93 276.9 873.36 276.44" style="fill: #494949" />
+            <polygon class="window-13" data-name="window" points="810.99 308.21 814.97 307.18 803.4 281.17 797.38 282.66 810.99 308.21" style="fill: #e2d600" />
+            <polygon class="window-14" data-name="window" points="824.91 304.76 829.43 304.03 820.51 278.35 813.72 279.2 824.91 304.76" style="fill: #e2d600" />
+            <polygon class="window-15" data-name="window" points="839.56 302.68 843.96 302.61 841.74 276.44 835.17 276.9 839.56 302.68" style="fill: #e2d600" />
+            <polygon class="window-16" data-name="window" points="856.26 302.72 860.65 302.64 862.36 276.21 854.96 276.21 856.26 302.72" style="fill: #e2d600" />
+            <polygon class="shadow-17" data-name="shadow" points="803.4 281.17 803.49 281.37 798.4 282.63 811.9 307.98 810.99 308.21 797.38 282.66 803.4 281.17" style="fill: #494949" />
+            <polygon class="shadow-18" data-name="shadow" points="820.51 278.35 820.8 279.16 815.08 279.88 825.9 304.6 824.91 304.76 813.72 279.2 820.51 278.35" style="fill: #494949" />
+            <polygon class="shadow-19" data-name="shadow" points="841.74 276.44 841.81 277.3 835.93 277.71 840.19 302.67 839.56 302.68 835.17 276.9 841.74 276.44" style="fill: #494949" />
+            <polygon class="shadow-20" data-name="shadow" points="854.96 276.21 856.26 302.72 856.41 302.72 855.3 277.43 862.02 277.43 860.57 302.65 860.65 302.64 862.36 276.21 854.96 276.21" style="fill: #494949" />
+          </g>
+          <path class="shadow-21" data-name="shadow" d="M788.72,279.23c34.38-10.78,107.39-9.39,137.39,0L907,312.81V334.7c-97.93-49.76-63.84,64.17-56.66,90.62H807.86V312.81Z" style="opacity: 0.2" />
+          <path class="col-6" data-name="col" d="M807.86,312.81l-19.14-33.58c34.38-10.78,107.39-9.39,137.39,0L907,312.81C879.71,304,833.73,304.26,807.86,312.81Z" style="opacity: 0.2" />
+          <path class="drop-shadow-5" data-name="drop-shadow" d="M926.11,271.66c-34.93-11.13-91.61-16.36-137.39,1.2V254.37l74.12-26.18,63.27,28Z" style="opacity: 0.2" />
+          <path class="roof-7" data-name="roof" d="M857.41,69.93c-2.31,1,46.17,145.67,84.75,200.54-52.53-21.31-139-14.9-170.5,0C811.74,231.08,824.06,176.13,857.41,69.93Z" style="fill: #090970" />
+          <path class="shadow-22" data-name="shadow" d="M856.91,71.54C799.49,283,827.22,222.67,929.63,250.26c4.24,7.56,8.44,14.39,12.53,20.21-52.53-21.31-139-14.9-170.5,0C811.54,231.28,823.94,176.68,856.91,71.54Z" style="opacity: 0.2" />
+          <path class="back-roog-6" data-name="back-roog" d="M967.87,430.39,859.28,386.51,744.64,430.39C796.06,448.54,958.19,435.54,967.87,430.39Z" style="fill: #040433" />
+          <path class="tower-10" data-name="tower" d="M946.85,413.45v28.42l-25.05,44c-8.12,135.8-6.41,228,0,386-39.48,6.88-82.91,6.56-129.77,0,4.84-148.22,4.84-237.82,0-386l-25.06-44V412.24C870.13,392.45,841.47,384.12,946.85,413.45Z" style="fill: #605f60" />
+          <g class="windows-3" data-name="windows">
+            <path class="window-17" data-name="window" d="M912.79,556.49h-8.17V539.28c0-2.26,2.72-8,4.08-8s4.09,5.79,4.09,8Z" style="fill: #e2d600" />
+            <path class="window-edge-4" data-name="window-edge" d="M908.7,531.23a.86.86,0,0,0-.48.21c1.43,1,3.6,5.83,3.6,7.84v17.21h1V539.28C912.79,537,910.06,531.23,908.7,531.23Z" style="fill: #494949" />
+            <path class="window-18" data-name="window" d="M865,556.49h-8.17V539.28c0-2.26,2.72-8,4.08-8s4.09,5.79,4.09,8Z" style="fill: #e2d600" />
+            <path class="window-19" data-name="window" d="M809,556.49h8.17V539.28c0-2.26-2.73-8-4.09-8s-4.08,5.79-4.08,8Z" style="fill: #e2d600" />
+            <path class="window-edge-5" data-name="window-edge" d="M813,531.23a.89.89,0,0,1,.49.21c-1.44,1-3.6,5.83-3.6,7.84v17.21h-1V539.28C809,537,811.68,531.23,813,531.23Z" style="fill: #494949" />
+          </g>
+          <g class="briques-8" data-name="briques">
+            <path class="brique-17" data-name="brique" d="M899.11,533.62a120.28,120.28,0,0,0-20.77-1.71" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4.73894703330049px" />
+            <path class="brique-18" data-name="brique" d="M892.45,590.83a115.81,115.81,0,0,0-20-1.21" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4.73894703330049px" />
+            <path class="brique-19" data-name="brique" d="M838.61,747.24a128.31,128.31,0,0,0-22.38,1.51" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4.73894703330049px" />
+          </g>
+          <path class="shadow-23" data-name="shadow" d="M767,441.87c45-14.12,140.61-12.3,179.88,0l-25.05,44q-.82,13.74-1.51,27.69c-26-20.88-85.24-22.89-87.38,15.56-2.72,49-9.42,171,15.38,347.65A509.36,509.36,0,0,1,792,871.87c4.84-148.22,4.84-237.82,0-386Z" style="opacity: 0.2" />
+          <path class="col-7" data-name="col" d="M792,485.83l-25.06-44c45-14.12,140.61-12.3,179.88,0l-25.05,44C886.1,474.33,825.91,474.64,792,485.83Z" style="opacity: 0.2" />
+          <path class="drop-shadow-6" data-name="drop-shadow" d="M946.85,432c-45.72-14.56-119.93-21.42-179.88,1.57v-24.2c44.82-2.09,135.48-1.63,179.88,2.42Z" style="opacity: 0.2" />
+          <path class="roof-8" data-name="roof" d="M778.69,386.29a208.66,208.66,0,0,1-34.05,44.1c41.29-19.51,154.46-27.9,223.23,0-8.54-12.15-17.46-27.68-26.37-45.09C892.45,375.88,832.06,375.88,778.69,386.29Z" style="fill: #090970" />
+          <path class="light-2" data-name="light" d="M950.79,402.72v0q-4.63-8.33-9.3-17.44c-49-9.42-109.44-9.42-162.81,1-1.7,2.91-3.47,5.73-5.26,8.52C808.33,380.21,927.18,376.42,950.79,402.72Z" style="fill: #1313a5" />
+          <path class="shadow-24" data-name="shadow" d="M790.38,384.21c-3.93.64-7.83,1.32-11.69,2.08a208.66,208.66,0,0,1-34.05,44.1c41.29-19.51,154.46-27.9,223.23,0-3.63-5.17-7.34-11-11.09-17.27C839.86,379.77,756.93,434,790.38,384.21Z" style="opacity: 0.2" />
+        </g>
+      </g>
+    </g>
+    <g class="horizontal-bottom-1">
+      <g class="small-tower">
+        <g class="inner-small-tower">
+          <path class="tower-11" data-name="tower" d="M1092.64,515.26v12.43q-13.56-2.49-27-4V511.28q-12.57-1.36-25.05-1.86v12.43q-13.56-.52-27,0V509.38q-12.58.47-25.05,1.82v12.44q-13.57,1.47-27,4V515.19q-6.85,1.29-13.68,2.83v39.09l22.08,38.73c7.15,119.64,5.64,46.38,0,185.61,34.77,6.06,73,5.78,114.32,0-4.26-130.59-4.26-55,0-185.61l22.08-38.73V518Q1099.47,516.51,1092.64,515.26Z" style="fill: #00246b" />
+          <g class="shad-grp-4" data-name="shad-grp" style="opacity: 0.7000000000000001">
+            <path class="tower-12" data-name="tower" d="M1092.64,515.26v12.43q-13.56-2.49-27-4V511.28q-12.57-1.36-25.05-1.86v12.43q-13.56-.52-27,0V509.38q-12.58.47-25.05,1.82v12.44q-13.57,1.47-27,4V515.19q-6.85,1.29-13.68,2.83v39.09l22.08,38.73c7.15,119.64,5.64,46.38,0,185.61,34.77,6.06,73,5.78,114.32,0-4.26-130.59-4.26-55,0-185.61l22.08-38.73V518Q1099.47,516.51,1092.64,515.26Z" style="fill: #605f60" />
+            <g class="briques-9" data-name="briques">
+              <path class="brique-20" data-name="brique" d="M989.9,637.94a107.6,107.6,0,0,1,18.3-1.51" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4.17516087477875px" />
+              <path class="brique-21" data-name="brique" d="M995.77,688.35a102.46,102.46,0,0,1,17.59-1.07" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4.17516087477875px" />
+              <path class="brique-22" data-name="brique" d="M1043.2,671.65a112.8,112.8,0,0,1,19.72,1.33" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4.17516087477875px" />
+            </g>
+            <path class="shadow-25" data-name="shadow" d="M1106.32,557.11c-39.67-12.44-123.88-10.84-158.48,0l22.08,38.73q.72,12.1,1.32,24.4c23-18.4,78.29-20.2,77,13.71-1.27,33.1-1.27,84.71-13.54,151.79a453.27,453.27,0,0,0,49.56-4.29c-4.26-130.59-4.26-55,0-185.61Z" style="opacity: 0.2" />
+            <path class="col-8" data-name="col" d="M1084.24,595.84l22.08-38.73c-39.67-12.44-123.88-10.84-158.48,0l22.08,38.73C1001.36,585.71,1054.4,586,1084.24,595.84Z" style="opacity: 0.2" />
+          </g>
+        </g>
+      </g>
+      <g class="main-castle-center">
+        <path class="wall-2" data-name="wall" d="M1171.15,671.35c-.36,6.4-.54,6.6-.9,13-10.48-.6-15.72-.88-26.2-1.4.31-6.4.47-6.59.79-13-9.26-.46-13.89-.68-23.16-1.08-.27,6.4-.41,6.6-.69,13-10.48-.45-15.73-.66-26.21-1,.23-6.4.35-6.6.58-13-9.27-.33-13.9-.49-23.17-.77-.19,6.41-.29,6.61-.48,13-10.49-.32-15.73-.46-26.22-.7.15-6.41.22-6.61.37-13-9.27-.22-13.91-.31-23.18-.47-.1,6.41-.16,6.62-.26,13-10.49-.17-15.74-.24-26.23-.35.06-6.4.09-6.61.16-13-9.27-.09-13.91-.13-23.18-.16,0,6.41,0,6.61-.06,13-10.49,0-15.73,0-26.22,0,0-6.41,0-6.61-.06-13-9.27,0-13.91.07-23.18.16.07,6.4.1,6.61.16,13-10.49.11-15.74.18-26.23.35-.1-6.4-.16-6.61-.27-13-9.26.16-13.9.25-23.17.47.15,6.4.22,6.6.37,13-10.49.24-15.73.38-26.22.7-.19-6.41-.29-6.61-.48-13-9.27.28-13.9.44-23.17.77.23,6.41.35,6.61.58,13-10.48.38-15.73.59-26.21,1-.28-6.4-.42-6.6-.69-13-9.27.4-13.9.62-23.16,1.07.32,6.4.48,6.6.79,13-10.48.52-15.72.8-26.2,1.4-.36-6.4-.54-6.6-.9-13-9.36.53-14,.81-23.4,1.4,6.54,104,19.62,246.32,19.62,246.32h429.86s13.08-142.35,19.62-246.32C1185.19,672.16,1180.51,671.88,1171.15,671.35Z" style="fill: #00246b" />
+        <g class="shad-grpe-4" data-name="shad-grpe" style="opacity: 0.7000000000000001">
+          <path class="wall-3" data-name="wall" d="M1171.15,671c-.36,6.4-.54,6.6-.9,13-10.48-.59-15.72-.87-26.2-1.39.31-6.4.47-6.6.79-13-9.26-.46-13.89-.67-23.16-1.07-.27,6.4-.41,6.6-.69,13-10.48-.45-15.73-.66-26.21-1,.23-6.41.35-6.61.58-13-9.27-.34-13.9-.49-23.17-.77-.19,6.41-.29,6.61-.48,13-10.49-.31-15.73-.45-26.22-.69.15-6.41.22-6.61.37-13-9.27-.21-13.91-.3-23.18-.46-.1,6.41-.16,6.61-.26,13-10.49-.18-15.74-.25-26.23-.35.06-6.41.09-6.61.16-13-9.27-.09-13.91-.12-23.18-.15,0,6.41,0,6.61-.06,13-10.49,0-15.73,0-26.22,0,0-6.41,0-6.61-.06-13-9.27,0-13.91.06-23.18.15.07,6.41.1,6.61.16,13-10.49.1-15.74.17-26.23.35-.1-6.41-.16-6.61-.27-13-9.26.16-13.9.25-23.17.46.15,6.41.22,6.61.37,13-10.49.24-15.73.38-26.22.69-.19-6.4-.29-6.6-.48-13-9.27.28-13.9.43-23.17.77.23,6.4.35,6.6.58,13-10.48.38-15.73.59-26.21,1-.28-6.4-.42-6.6-.69-13-9.27.4-13.9.61-23.16,1.07.32,6.4.48,6.6.79,13-10.48.52-15.72.8-26.2,1.39-.36-6.4-.54-6.59-.9-13-9.36.53-14,.81-23.4,1.4,6.54,104,19.62,246.32,19.62,246.32h429.86s13.08-142.35,19.62-246.32C1185.19,671.78,1180.51,671.5,1171.15,671Z" style="fill: #605f60" />
+          <g class="briques-10" data-name="briques">
+            <path class="brique-23" data-name="brique" d="M792.49,754.92a164.44,164.44,0,0,1,30.64-1.44" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-24" data-name="brique" d="M1109.66,746.5a117,117,0,0,1,15.55.68" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-25" data-name="brique" d="M1041.91,806.25c8.49-.3,16.41-.07,19.18,0" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-26" data-name="brique" d="M848,714.75a163.88,163.88,0,0,1,20.08-1.36" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+          </g>
+          <path class="shadow-26" data-name="shadow" d="M1171.15,671.35c-.36,6.4-.54,6.6-.9,13-10.48-.6-15.72-.88-26.2-1.4.31-6.4.47-6.59.79-13-9.26-.46-13.89-.68-23.16-1.08-.27,6.4-.41,6.6-.69,13-10.48-.45-15.73-.66-26.21-1,.23-6.4.35-6.6.58-13-9.27-.33-13.9-.49-23.17-.77-.19,6.41-.29,6.61-.48,13-10.49-.32-15.73-.46-26.22-.7.15-6.41.22-6.61.37-13-9.27-.22-13.91-.31-23.18-.47-.1,6.41-.16,6.62-.26,13-10.49-.17-15.74-.24-26.23-.35.06-6.4.09-6.61.16-13-9.27-.09-13.91-.13-23.18-.16,0,6.41,0,6.61-.06,13-10.49,0-15.73,0-26.22,0,0-6.41,0-6.61-.06-13-9.27,0-13.91.07-23.18.16.07,6.4.1,6.61.16,13-10.49.11-15.74.18-26.23.35-.1-6.4-.16-6.61-.27-13-9.26.16-13.9.25-23.17.47.15,6.4.22,6.6.37,13-10.49.24-15.73.38-26.22.7-.19-6.41-.29-6.61-.48-13-9.27.28-13.9.44-23.17.77.23,6.41.35,6.61.58,13-10.48.38-15.73.59-26.21,1-.28-6.4-.42-6.6-.69-13-9.27.4-13.9.62-23.16,1.07.32,6.4.48,6.6.79,13-10.48.52-15.72.8-26.2,1.4-.36-6.4-.54-6.6-.9-13-9.36.53-14,.81-23.4,1.4,6.54,104,19.62,246.32,19.62,246.32H778c-8-90.92,3.62-181.28,70.44-197.55,49.23-12,168.07-10.38,226-.16,81.16,14.31,75,119,67.31,197.71h33.19s13.08-142.35,19.62-246.32C1185.19,672.16,1180.51,671.88,1171.15,671.35Z" style="opacity: 0.2" />
+        </g>
+      </g>
+    </g>
+    <g class="horizontal-bottom-general">
+      <g class="ground2" style="opacity: 0.6000000000000001">
+        <path class="right" d="M1825.19,815.34V727.62l12.07-21.17V685.09q-3.75-.83-7.48-1.51v6.8c-7.25-2.51-17,1.67-14.76-9-7.3.27-15.73-5.15-13.68,5.78-7.52-1.61-16.89,4.4-14.76-6.82-28.46-.21,1.57,7.82-28.45,10v-6.79c-2.5.46-5,1-7.48,1.54v21.36l12.07,21.17v87.72c-165,8.9-369.08,90.15-411.51,350.09h585.41V835.11C1908.58,825.26,1869.73,817.77,1825.19,815.34Z" style="fill: #12436b" />
+        <path class="left" d="M194.93,786.76c4.43-13.48-12.31-152.78,14-150.21h0c-15.07-21.43-34-77.28-33.81-79.84-.06.19-.12.38-.17.56h0c-9.65,27.18-13.5,57.82-34,79.29h0c1.84.65,6.8,1.58,6.8,1.58l7.63,15.3V785.22q-11.1,0-21.79.49c3.74-11.74-10.41-126.19,11.9-124.6-12.78-18.18-28.81-65.59-28.69-67.75l-.14.47h0c-8.19,23.07-11.46,49.07-28.84,67.3,22.89-2,8.44,116,12.25,127.17C40,795-4.83,811.18-17.13,823v330.32h585.4C517.28,879.38,341.32,798.38,194.93,786.76Z" style="fill: #12436b" />
+      </g>
+      <g class="light-radius" style="opacity: 0.5">
+        <path class="inner-light" d="M1168.51,874.83h-417c0-115.16,93.35-208.51,208.51-208.51S1168.51,759.67,1168.51,874.83Z" style="fill: #d9f700;opacity: 0.1" />
+        <path class="inner-light-2" data-name="inner-light" d="M1282.74,916.23C1274.45,745.16,1133.13,609,960,609S645.55,745.16,637.26,916.23Z" style="fill: #d9f700;opacity: 0.1" />
+        <path class="inner-light-3" data-name="inner-light" d="M1401.6,912.15c-39-208.44-221.85-366.21-441.6-366.21S557.36,703.71,518.4,912.15Z" style="fill: #d9f700;opacity: 0.1" />
+      </g>
+      <g class="wall-left">
+        <path class="wall-4" data-name="wall" d="M890.37,809.12c-.21,4.89-.31,7.34-.51,12.24-10.92-.45-16.38-.66-27.3-1l.42-12.24c-9.76-.34-14.64-.49-24.4-.77l-.35,12.24c-10.92-.31-16.39-.45-27.31-.68.1-4.9.16-7.35.26-12.25-9.76-.21-14.64-.3-24.4-.46-.07,4.9-.11,7.35-.19,12.25-10.93-.18-16.39-.25-27.32-.35,0-4.9.07-7.34.11-12.24-9.76-.09-14.64-.12-24.4-.16,0,4.9,0,7.35,0,12.25-10.93,0-16.4,0-27.32,0l0-12.25c-9.76,0-14.64.07-24.4.16.05,4.9.07,7.34.12,12.24-10.93.1-16.4.17-27.33.35-.07-4.9-.11-7.35-.19-12.25-9.76.16-14.64.25-24.4.46.11,4.9.16,7.35.27,12.25-10.93.23-16.39.37-27.32.68L604,807.32c-9.76.28-14.64.43-24.39.77l.42,12.24c-10.93.37-16.39.58-27.31,1l-.5-12.24c-10.07.41-15.1.63-25.17,1.11l5.61,118.91c125.74-.6,251.55.5,377.29,0l5.61-118.91C905.47,809.75,900.43,809.53,890.37,809.12Z" style="fill: #00246b" />
+        <g class="shad-grpe-5" data-name="shad-grpe" style="opacity: 0.8">
+          <path class="wall-5" data-name="wall" d="M890.37,809.12c-.21,4.89-.31,7.34-.51,12.24-10.92-.45-16.38-.66-27.3-1l.42-12.24c-9.76-.34-14.64-.49-24.4-.77l-.35,12.24c-10.92-.31-16.39-.45-27.31-.68.1-4.9.16-7.35.26-12.25-9.76-.21-14.64-.3-24.4-.46-.07,4.9-.11,7.35-.19,12.25-10.93-.18-16.39-.25-27.32-.35,0-4.9.07-7.34.11-12.24-9.76-.09-14.64-.12-24.4-.16,0,4.9,0,7.35,0,12.25-10.93,0-16.4,0-27.32,0l0-12.25c-9.76,0-14.64.07-24.4.16.05,4.9.07,7.34.12,12.24-10.93.1-16.4.17-27.33.35-.07-4.9-.11-7.35-.19-12.25-9.76.16-14.64.25-24.4.46.11,4.9.16,7.35.27,12.25-10.93.23-16.39.37-27.32.68L604,807.32c-9.76.28-14.64.43-24.39.77l.42,12.24c-10.93.37-16.39.58-27.31,1l-.5-12.24c-10.07.41-15.1.63-25.17,1.11l5.61,118.91c125.74-.6,251.55.5,377.29,0l5.61-118.91C905.47,809.75,900.43,809.53,890.37,809.12Z" style="fill: #605f60" />
+          <g class="briques-11" data-name="briques">
+            <line class="brique-27" data-name="brique" x1="554.19" y1="836.39" x2="567.46" y2="836.2" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-28" data-name="brique" x1="647.13" y1="891.73" x2="659.38" y2="891.73" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-29" data-name="brique" x1="781.7" y1="836.05" x2="796.34" y2="836.39" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-30" data-name="brique" x1="827.21" y1="869.2" x2="839.47" y2="869.62" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-31" data-name="brique" x1="868.06" y1="850.69" x2="881.34" y2="851.03" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+          </g>
+          <path class="shadow-27" data-name="shadow" d="M890.37,809.12c-.21,4.89-.31,7.34-.51,12.24-4.26-.18-12.93-.51-16.18-.64,9.53,86.48,5.78,89.42-19.23,92.93-18.88,2.65-239.65-1.63-263.83-1.54-30.78.11-32,10.17-32.52-91l-5.41.22-.5-12.24c-10.07.41-15.1.63-25.17,1.11l5.61,118.91c125.74-.6,251.55.5,377.29,0l5.61-118.91C905.47,809.75,900.43,809.53,890.37,809.12Z" style="opacity: 0.2" />
+        </g>
+      </g>
+      <g class="wall-right">
+        <path class="wall-6" data-name="wall" d="M1029.36,813.47l.5,12.23c10.93-.45,16.39-.65,27.31-1l-.42-12.24c9.76-.33,14.64-.49,24.4-.76.14,4.89.21,7.34.34,12.24,10.93-.31,16.39-.45,27.32-.69-.11-4.9-.16-7.34-.27-12.24,9.76-.22,14.64-.31,24.4-.46l.2,12.24c10.93-.17,16.39-.24,27.32-.34,0-4.9-.07-7.35-.11-12.25,9.76-.09,14.64-.12,24.4-.15,0,4.9,0,7.35,0,12.25,10.93,0,16.39,0,27.32,0,0-4.9,0-7.35,0-12.25,9.76,0,14.65.06,24.41.15,0,4.9-.07,7.35-.12,12.25,10.93.1,16.4.17,27.32.34l.2-12.24c9.76.15,14.64.24,24.4.46-.11,4.9-.16,7.34-.27,12.24,10.93.24,16.39.38,27.32.69l.35-12.24c9.75.27,14.63.43,24.39.76l-.42,12.24c10.92.38,16.39.58,27.31,1l.5-12.24c10.07.42,15.1.64,25.17,1.11l-5.61,118.92c-125.74-.61-251.56.5-377.3,0Q1007,874,1004.2,814.57C1014.26,814.1,1019.3,813.88,1029.36,813.47Z" style="fill: #00246b" />
+        <g class="shad-grpe-6" data-name="shad-grpe" style="opacity: 0.85">
+          <path class="wall-7" data-name="wall" d="M1029.36,813.47l.5,12.23c10.93-.45,16.39-.65,27.31-1l-.42-12.24c9.76-.33,14.64-.49,24.4-.76.14,4.89.21,7.34.34,12.24,10.93-.31,16.39-.45,27.32-.69-.11-4.9-.16-7.34-.27-12.24,9.76-.22,14.64-.31,24.4-.46l.2,12.24c10.93-.17,16.39-.24,27.32-.34,0-4.9-.07-7.35-.11-12.25,9.76-.09,14.64-.12,24.4-.15,0,4.9,0,7.35,0,12.25,10.93,0,16.39,0,27.32,0,0-4.9,0-7.35,0-12.25,9.76,0,14.65.06,24.41.15,0,4.9-.07,7.35-.12,12.25,10.93.1,16.4.17,27.32.34l.2-12.24c9.76.15,14.64.24,24.4.46-.11,4.9-.16,7.34-.27,12.24,10.93.24,16.39.38,27.32.69l.35-12.24c9.75.27,14.63.43,24.39.76l-.42,12.24c10.92.38,16.39.58,27.31,1l.5-12.24c10.07.42,15.1.64,25.17,1.11l-5.61,118.92c-125.74-.61-251.56.5-377.3,0Q1007,874,1004.2,814.57C1014.26,814.1,1019.3,813.88,1029.36,813.47Z" style="fill: #605f60" />
+          <g class="briques-12" data-name="briques">
+            <line class="brique-32" data-name="brique" x1="1365.54" y1="840.74" x2="1352.27" y2="840.55" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-33" data-name="brique" x1="1272.6" y1="896.08" x2="1260.35" y2="896.08" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-34" data-name="brique" x1="1138.03" y1="840.4" x2="1123.38" y2="840.74" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-35" data-name="brique" x1="1092.52" y1="873.54" x2="1080.26" y2="873.96" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <line class="brique-36" data-name="brique" x1="1051.66" y1="855.03" x2="1038.39" y2="855.37" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+          </g>
+          <path class="shadow-28" data-name="shadow" d="M1029.36,813.47l.5,12.23,16.19-.63c-9.53,86.47-5.79,89.41,19.23,92.92,18.88,2.65,239.64-1.62,263.83-1.54,30.78.11,32,10.17,32.52-91l5.41.22.5-12.24c10.07.42,15.1.64,25.17,1.11l-5.61,118.92c-125.74-.61-251.56.5-377.3,0Q1007,874,1004.2,814.57C1014.26,814.1,1019.3,813.88,1029.36,813.47Z" style="opacity: 0.2" />
+        </g>
+      </g>
+      <g class="tower-roof-left">
+        <path class="back-3" data-name="back" d="M545,673.86s-.22,2.24-.37,3.73c-4-.4-6.07-.58-10.12-.86.1-1.5.15-2.25.26-3.74-4-.28-5.93-.39-9.89-.56-.07,1.5-.1,2.25-.16,3.75-4.06-.18-6.09-.24-10.15-.29l0-3.75c-4-.06-5.94-.06-9.91,0,0,1.5,0,2.25.06,3.75-4.06.05-6.09.11-10.15.29-.07-1.5-.1-2.25-.16-3.75-4,.17-5.94.28-9.89.56.1,1.49.15,2.24.26,3.74-4.05.28-6.08.46-10.12.86-.15-1.49-.23-2.24-.38-3.73a16.42,16.42,0,0,0-2.38.38s-.28,12.33,0,12.13c-1.79,1.37,10,19.63,10.52,21.09,2,62.18,2,146.78,0,209a219.93,219.93,0,0,0,23.6,2.05h0a154.26,154.26,0,0,0,30.84-2c-2.63-67-3.49-148.06,0-209L547.4,689V674.26Z" style="fill: #00246b" />
+        <path class="top-back" d="M556.22,684.08c-20.76-29.54-46.79-106.51-46.59-110l-.24.77h0c-13.3,37.46-18.61,79.68-46.83,109.27h0a53,53,0,0,0,9.37,2.17c-.26.2,0-12.13,0-12.13a16.42,16.42,0,0,1,2.38-.38c.15,1.49.23,2.24.38,3.73,4-.4,6.07-.57,10.12-.86-.11-1.49-.16-2.24-.26-3.74,3.95-.28,5.93-.39,9.89-.56.06,1.5.09,2.25.16,3.75,4.06-.17,6.09-.23,10.15-.29,0-1.5,0-2.25-.06-3.75,4,0,6,0,9.91,0l0,3.75c4.06.06,6.09.12,10.15.29.06-1.5.09-2.25.16-3.75,4,.17,5.93.28,9.89.56-.11,1.5-.16,2.25-.26,3.74,4,.29,6.07.46,10.12.86.15-1.49.37-3.73.37-3.73l2.4.4v11.45c4.82-.54,8-1.09,8.82-1.51Z" style="fill: #00246b" />
+        <g class="shad-grpe-7" data-name="shad-grpe" style="opacity: 0.85">
+          <path class="tower-13" data-name="tower" d="M545,673.86s-.22,2.24-.37,3.73c-4-.4-6.07-.58-10.12-.86.1-1.5.15-2.25.26-3.74-4-.28-5.93-.39-9.89-.56-.07,1.5-.1,2.25-.16,3.75-4.06-.18-6.09-.24-10.15-.29l0-3.75c-4-.06-5.94-.06-9.91,0,0,1.5,0,2.25.06,3.75-4.06.05-6.09.11-10.15.29-.07-1.5-.1-2.25-.16-3.75-4,.17-5.94.28-9.89.56.1,1.49.15,2.24.26,3.74-4.05.28-6.08.46-10.12.86-.15-1.49-.23-2.24-.38-3.73a16.42,16.42,0,0,0-2.38.38l0,14.77,10.52,18.45c2,62.18,2,146.78,0,209,19.66,2.76,37.88,2.89,54.44,0-2.69-66.29-3.41-152,0-209L547.4,689V674.26Z" style="fill: #605f60" />
+          <g class="top-shadow" style="opacity: 0.2">
+            <path d="M544.63,677.59c-4-.4-6.07-.58-10.12-.86.1-1.5.15-2.25.26-3.74-4-.28-5.93-.39-9.89-.56-.07,1.5-.1,2.25-.16,3.75-4.06-.18-6.09-.24-10.15-.29l0-3.75c-4-.06-5.94-.06-9.91,0,0,1.5,0,2.25.06,3.75-4.06.05-6.09.11-10.15.29-.07-1.5-.1-2.25-.16-3.75-4,.17-5.94.28-9.89.56.1,1.49.15,2.24.26,3.74-4.05.28-6.08.46-10.12.86-.15-1.49-.23-2.24-.38-3.73a16.42,16.42,0,0,0-2.38.38v8.47c21.66-3.81,45.32-6.53,75.46.54v-9l-2.4-.4S544.78,676.1,544.63,677.59Z" />
+          </g>
+          <g class="briques-13" data-name="briques">
+            <path class="brique-37" data-name="brique" d="M527.37,727.51a49.23,49.23,0,0,0-8.71-.72" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <path class="brique-38" data-name="brique" d="M524.58,751.51a48.45,48.45,0,0,0-8.38-.51" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <path class="brique-39" data-name="brique" d="M502,864.14a53.5,53.5,0,0,0-9.39.63" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+          </g>
+          <path class="shadow-29" data-name="shadow" d="M471.93,689c18.89-5.92,59-5.16,75.47,0l-10.51,18.45q-.35,5.76-.63,11.62c-10.93-8.77-35.76-9.61-36.66,6.52-1.14,20.56-4,118.74,6.45,192.87a214.29,214.29,0,0,1-23.6-2.05c2-62.18,2-146.78,0-209Z" style="opacity: 0.2" />
+          <path class="col-9" data-name="col" d="M482.45,707.46,471.93,689c18.89-5.92,59-5.16,75.47,0l-10.51,18.45C521.91,702.63,496.66,702.76,482.45,707.46Z" style="opacity: 0.2" />
+          <g class="roof-tower-side">
+            <path class="roof-10" data-name="roof" d="M509.67,573.92c-1.27.55,25.36,80,46.55,110.16-28.85-11.71-76.33-8.18-93.66,0C484.58,662.44,491.35,632.26,509.67,573.92Z" style="fill: #090970" />
+            <path class="shadow-30" data-name="shadow" d="M509.39,574.81c-31.54,116.14-16.31,83,40,98.17,2.33,4.15,4.63,7.9,6.88,11.1-28.85-11.71-76.33-8.18-93.66,0C484.47,662.55,491.28,632.56,509.39,574.81Z" style="opacity: 0.2" />
+          </g>
+        </g>
+      </g>
+      <g class="tower-roof-right">
+        <path class="back-4" data-name="back" d="M1373.67,673.86s.22,2.24.37,3.73c4-.4,6.07-.58,10.12-.86-.1-1.5-.16-2.25-.26-3.74,3.95-.28,5.93-.39,9.89-.56.07,1.5.1,2.25.16,3.75,4.06-.18,6.09-.24,10.15-.29l0-3.75c4-.06,5.94-.06,9.9,0l0,3.75c4.06.05,6.09.11,10.15.29.06-1.5.1-2.25.16-3.75,4,.17,5.94.28,9.89.56-.1,1.49-.16,2.24-.26,3.74,4.05.28,6.08.46,10.12.86.15-1.49.23-2.24.37-3.73a16.43,16.43,0,0,1,2.39.38s.27,12.33,0,12.13c1.79,1.37-10,19.63-10.52,21.09-2,62.18-2,146.78,0,209a219.93,219.93,0,0,1-23.6,2.05h0a154.26,154.26,0,0,1-30.84-2c2.63-67,3.49-148.06,0-209L1371.27,689V674.26Z" style="fill: #00246b" />
+        <path class="top-back" d="M1362.45,684.08c20.76-29.54,46.79-106.51,46.59-110l.24.77h0c13.3,37.46,18.61,79.68,46.83,109.27h0a53,53,0,0,1-9.37,2.17c.25.2,0-12.13,0-12.13a16.43,16.43,0,0,0-2.39-.38c-.14,1.49-.22,2.24-.37,3.73-4-.4-6.07-.57-10.12-.86.1-1.49.16-2.24.26-3.74-3.95-.28-5.93-.39-9.89-.56-.06,1.5-.1,2.25-.16,3.75-4.06-.17-6.09-.23-10.15-.29l0-3.75c-4,0-5.94,0-9.9,0l0,3.75c-4.06.06-6.09.12-10.15.29-.06-1.5-.09-2.25-.16-3.75-4,.17-5.94.28-9.89.56.1,1.5.16,2.25.26,3.74-4.05.29-6.08.46-10.12.86-.15-1.49-.37-3.73-.37-3.73l-2.4.4v11.45c-4.82-.54-8-1.09-8.82-1.51Z" style="fill: #00246b" />
+        <g class="shade-grpe">
+          <path class="tower-14" data-name="tower" d="M1373.67,673.86s.22,2.24.37,3.73c4-.4,6.07-.58,10.12-.86-.1-1.5-.16-2.25-.26-3.74,3.95-.28,5.93-.39,9.89-.56.07,1.5.1,2.25.16,3.75,4.06-.18,6.09-.24,10.15-.29l0-3.75c4-.06,5.94-.06,9.9,0l0,3.75c4.06.05,6.09.11,10.15.29.06-1.5.1-2.25.16-3.75,4,.17,5.94.28,9.89.56-.1,1.49-.16,2.24-.26,3.74,4.05.28,6.08.46,10.12.86.15-1.49.23-2.24.37-3.73a16.43,16.43,0,0,1,2.39.38l0,14.77-10.52,18.45c-2,62.18-2,146.78,0,209-19.66,2.76-37.88,2.89-54.44,0,2.69-66.29,3.4-152,0-209L1371.27,689V674.26Z" style="fill: #605f60" />
+          <g class="top-shadow-2" data-name="top-shadow" style="opacity: 0.2">
+            <path d="M1374,677.59c4-.4,6.07-.58,10.12-.86-.1-1.5-.16-2.25-.26-3.74,3.95-.28,5.93-.39,9.89-.56.07,1.5.1,2.25.16,3.75,4.06-.18,6.09-.24,10.15-.29l0-3.75c4-.06,5.94-.06,9.9,0l0,3.75c4.06.05,6.09.11,10.15.29.06-1.5.1-2.25.16-3.75,4,.17,5.94.28,9.89.56-.1,1.49-.16,2.24-.26,3.74,4.05.28,6.08.46,10.12.86.15-1.49.23-2.24.37-3.73a16.43,16.43,0,0,1,2.39.38v8.47c-21.66-3.81-45.32-6.53-75.46.54v-9l2.4-.4S1373.89,676.1,1374,677.59Z" />
+          </g>
+          <g class="briques-14" data-name="briques">
+            <path class="brique-40" data-name="brique" d="M1391.3,727.51a49.23,49.23,0,0,1,8.71-.72" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <path class="brique-41" data-name="brique" d="M1394.09,751.51a48.45,48.45,0,0,1,8.38-.51" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+            <path class="brique-42" data-name="brique" d="M1416.68,864.14a53.56,53.56,0,0,1,9.39.63" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 1.98825633525848px" />
+          </g>
+          <path class="shadow-31" data-name="shadow" d="M1446.74,689c-18.89-5.92-59-5.16-75.47,0l10.51,18.45q.35,5.76.63,11.62c10.93-8.77,35.76-9.61,36.66,6.52,1.14,20.56,4,118.74-6.45,192.87a214.5,214.5,0,0,0,23.6-2.05c-2-62.18-2-146.78,0-209Z" style="opacity: 0.2" />
+          <path class="col-10" data-name="col" d="M1436.22,707.46,1446.74,689c-18.89-5.92-59-5.16-75.47,0l10.51,18.45C1396.75,702.63,1422,702.76,1436.22,707.46Z" style="opacity: 0.2" />
+          <g class="roof-tower-side">
+            <path class="roof-12" data-name="roof" d="M1409,573.92c1.27.55-25.36,80-46.55,110.16,28.85-11.71,76.33-8.18,93.66,0C1434.09,662.44,1427.32,632.26,1409,573.92Z" style="fill: #090970" />
+            <path class="shadow-32" data-name="shadow" d="M1409.28,574.81c31.54,116.14,16.31,83-40,98.17-2.33,4.15-4.64,7.9-6.88,11.1,28.85-11.71,76.33-8.18,93.66,0C1434.2,662.55,1427.39,632.56,1409.28,574.81Z" style="opacity: 0.2" />
+          </g>
+        </g>
+      </g>
+      <g class="tower-right">
+        <path class="tower-15" data-name="tower" d="M1269.53,612.63v11.91q-13-2.38-25.87-3.8V608.82q-12-1.32-24-1.79V619q-13-.51-25.87,0V607q-12,.45-24,1.75v11.91q-13,1.41-25.87,3.82V612.57q-6.57,1.23-13.11,2.71v37.44L1152,689.83c6.85,114.63,5.41,152.61,0,286,33.32,5.81,70,5.54,109.53,0-4.08-125.1-4.08-160.88,0-286l21.15-37.11V615.28Q1276.07,613.82,1269.53,612.63Z" style="fill: #00246b" />
+        <g class="shad-grpe-8" data-name="shad-grpe" style="opacity: 0.85">
+          <path class="tower-16" data-name="tower" d="M1269.53,612.63v11.91q-13-2.38-25.87-3.8V608.82q-12-1.32-24-1.79V619q-13-.51-25.87,0V607q-12,.45-24,1.75v11.91q-13,1.41-25.87,3.82V612.57q-6.57,1.23-13.11,2.71v37.44L1152,689.83c6.85,114.63,5.41,152.61,0,286,33.32,5.81,70,5.54,109.53,0-4.08-125.1-4.08-160.88,0-286l21.15-37.11V615.28Q1276.07,613.82,1269.53,612.63Z" style="fill: #605f60" />
+          <g class="briques-15" data-name="briques">
+            <path class="brique-43" data-name="brique" d="M1171.11,730.17a102.65,102.65,0,0,1,17.53-1.45" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-44" data-name="brique" d="M1176.73,778.46a98,98,0,0,1,16.85-1" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-45" data-name="brique" d="M1222.17,870.63a107.45,107.45,0,0,1,18.9,1.28" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+          </g>
+          <g class="tower-windows">
+            <path class="window-20" d="M1173.55,758.5h11.6V734.06c0-3.21-3.87-11.43-5.8-11.43s-5.8,8.22-5.8,11.43Z" style="fill: #e2d600" />
+            <path class="window-edge-6" data-name="window-edge" d="M1179.35,722.63a1.26,1.26,0,0,1,.69.29c-2,1.44-5.11,8.28-5.11,11.14V758.5h-1.38V734.06C1173.55,730.85,1177.42,722.63,1179.35,722.63Z" style="fill: #494949" />
+            <path class="window-21" data-name="window" d="M1246.87,758.19h-11.61V733.75c0-3.2,3.87-11.43,5.81-11.43s5.8,8.23,5.8,11.43Z" style="fill: #e2d600" />
+            <path class="window-edge-7" data-name="window-edge" d="M1241.07,722.32a1.3,1.3,0,0,0-.69.29c2,1.45,5.11,8.28,5.11,11.14v24.44h1.38V733.75C1246.87,730.55,1243,722.32,1241.07,722.32Z" style="fill: #494949" />
+          </g>
+          <path class="shadow-33" data-name="shadow" d="M1282.64,652.72c-38-11.91-118.68-10.38-151.83,0L1152,689.83q.69,11.59,1.27,23.38c22-17.63,72-19.33,73.75,13.13,2.3,41.36,8,104.46-13,253.59a429.07,429.07,0,0,0,47.49-4.11c-4.08-125.1-4.08-160.88,0-286Z" style="opacity: 0.2" />
+          <path class="col-11" data-name="col" d="M1261.49,689.83l21.15-37.11c-38-11.91-118.68-10.38-151.83,0L1152,689.83C1182.09,680.13,1232.9,680.38,1261.49,689.83Z" style="opacity: 0.2" />
+        </g>
+      </g>
+      <g class="tower-left">
+        <path class="tower-17" data-name="tower" d="M658.38,612.63v11.91q13-2.38,25.88-3.8V608.82q12-1.32,24-1.79V619q13-.51,25.87,0V607q12,.45,24,1.75v11.91q13,1.41,25.87,3.82V612.57q6.57,1.23,13.11,2.71v37.44L776,689.83c-6.85,114.63-5.41,152.61,0,286-33.32,5.81-70,5.54-109.53,0,4.08-125.1,4.08-160.88,0-286l-21.15-37.11V615.28Q651.85,613.82,658.38,612.63Z" style="fill: #00246b" />
+        <g class="shad-grpe-9" data-name="shad-grpe" style="opacity: 0.85">
+          <path class="tower-18" data-name="tower" d="M658.38,612.63v11.91q13-2.38,25.88-3.8V608.82q12-1.32,24-1.79V619q13-.51,25.87,0V607q12,.45,24,1.75v11.91q13,1.41,25.87,3.82V612.57q6.57,1.23,13.11,2.71v37.44L776,689.83c-6.85,114.63-5.41,152.61,0,286-33.32,5.81-70,5.54-109.53,0,4.08-125.1,4.08-160.88,0-286l-21.15-37.11V615.28Q651.85,613.82,658.38,612.63Z" style="fill: #605f60" />
+          <g class="briques-16" data-name="briques">
+            <path class="brique-46" data-name="brique" d="M768.38,708a102.65,102.65,0,0,0-17.53-1.45" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-47" data-name="brique" d="M751.19,778.46a98,98,0,0,0-16.85-1" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+            <path class="brique-48" data-name="brique" d="M705.75,870.63a107.45,107.45,0,0,0-18.9,1.28" style="fill: none;stroke: #8c8c8c;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px" />
+          </g>
+          <path class="col-12" data-name="col" d="M666.43,689.83l-21.15-37.11c38-11.91,118.68-10.38,151.83,0L776,689.83C745.83,680.13,695,680.38,666.43,689.83Z" style="opacity: 0.2" />
+          <g class="tower-windows">
+            <path class="window-22" data-name="window" d="M756.24,758.19h-11.6V733.75c0-3.2,3.87-11.43,5.8-11.43s5.8,8.23,5.8,11.43Z" style="fill: #e2d600" />
+            <path class="window-edge-8" data-name="window-edge" d="M750.44,722.32a1.34,1.34,0,0,0-.69.29c2,1.45,5.11,8.28,5.11,11.14v24.44h1.38V733.75C756.24,730.55,752.38,722.32,750.44,722.32Z" style="fill: #494949" />
+            <path class="window-23" data-name="window" d="M682.92,758.5h11.61V734.06c0-3.21-3.87-11.43-5.81-11.43s-5.8,8.22-5.8,11.43Z" style="fill: #e2d600" />
+            <path class="window-edge-9" data-name="window-edge" d="M688.72,722.63a1.23,1.23,0,0,1,.69.29c-2,1.44-5.11,8.28-5.11,11.14V758.5h-1.38V734.06C682.92,730.85,686.79,722.63,688.72,722.63Z" style="fill: #494949" />
+          </g>
+          <path class="shadow-34" data-name="shadow" d="M645.28,652.72c38-11.91,118.68-10.38,151.83,0L776,689.83q-.69,11.59-1.27,23.38c-22-17.63-72-19.33-73.75,13.13-2.3,41.36-8,104.46,13,253.59a429.07,429.07,0,0,1-47.49-4.11c4.08-125.1,4.08-160.88,0-286Z" style="opacity: 0.2" />
+        </g>
+      </g>
+      <g class="ground">
+        <path class="ground-2" data-name="ground" d="M153.88,1156.39C172.66,1035,406.36,919,511.06,922.13c87.83,2.64,845.31,3,890.54-1.23,134.6-12.6,334.21,106.95,395.49,247.74Z" style="fill: #0b397c" />
+        <polygon class="wall-ground-left" points="520.39 926.03 532.55 920.08 569.36 919.82 603.84 922.23 622.93 920.08 642.84 919.2 656.32 920.08 696.15 919.2 738.02 916.66 771.04 921.35 787.04 918.64 818.7 920.08 836.4 918.47 862.27 920.08 899.21 916.66 932.23 921.35 878.88 931.41 858.28 928 844.23 931.11 829.19 927.44 788.98 929.22 770.96 928.51 755.04 930.23 734.45 931.93 719.64 927.75 685.43 929.27 653.25 929.27 637.25 928.96 611.55 931.07 549.63 929.07 529.51 929.27 520.39 926.03" style="opacity: 0.2" />
+        <polygon class="wall-ground-right" points="1004.58 926.03 1016.74 920.08 1053.55 919.82 1088.03 922.23 1107.12 920.08 1127.03 919.2 1140.51 920.08 1180.34 919.2 1222.21 916.66 1255.23 921.35 1271.23 918.64 1302.89 920.08 1320.59 918.47 1346.46 920.08 1383.4 916.66 1416.42 921.35 1363.07 931.41 1344.91 925.45 1330.79 928.78 1313.38 930.56 1270.36 928.85 1256.06 931.28 1238.02 927.15 1218.84 926.47 1204.68 929.27 1169.77 924.81 1137.44 929.27 1121 928.26 1095.74 931.07 1035.72 926.27 1013.7 929.27 1004.58 926.03" style="opacity: 0.2" />
+        <g class="left-roof-tower-base">
+          <path class="left-roof-tower-back" d="M482.09,899.73c-.23,11-.5,21.7-.83,31.79,20.52,2.88,39.53,3,56.82,0-.42-10.23-.79-20.92-1.1-31.88C523.64,901.72,494.15,902.15,482.09,899.73Z" style="fill: #00246b" />
+          <path class="left-base-roof-tower-back" d="M482.09,899.73c-.23,11-.5,21.7-.83,31.79,20.52,2.88,39.53,3,56.82,0-.42-10.23-.79-20.92-1.1-31.88C523.64,901.72,494.15,902.15,482.09,899.73Z" style="fill: #5d5963" />
+          <path class="base-shadow" d="M504.8,901.37c-9-.08-17.49-.59-22.71-1.64-.23,11-.5,21.7-.83,31.79a214.09,214.09,0,0,0,30.6,2.2C506.48,929.9,504.07,922,504.8,901.37Z" style="opacity: 0.2" />
+          <path class="base-top-shadow" d="M537,900.28c0-.21,0-.42,0-.64-13.34,2.08-42.83,2.51-54.89.09,0,.23,0,.45,0,.68C492.54,903.51,525.7,902.31,537,900.28Z" style="opacity: 0.3" />
+          <polygon class="dirt" points="479.98 931.66 483.47 930.11 497.6 932.51 512.49 931.58 529.17 932.51 536.89 929.12 540.06 932 536.89 934.22 531.98 933.73 519.04 936.51 503.55 936.51 491.04 934.64 479.47 933.66 479.98 931.66" style="opacity: 0.2" />
+        </g>
+        <g class="right-roof-tower-base">
+          <path class="left-roof-tower-back-2" data-name="left-roof-tower-back" d="M1437.15,899.71c.22,11,.5,21.7.83,31.79-20.52,2.88-39.53,3-56.82,0,.42-10.23.79-20.92,1.1-31.88C1395.6,901.7,1425.09,902.13,1437.15,899.71Z" style="fill: #00246b" />
+          <path class="left-base-roof-tower-back-2" data-name="left-base-roof-tower-back" d="M1437.15,899.71c.22,11,.5,21.7.83,31.79-20.52,2.88-39.53,3-56.82,0,.42-10.23.79-20.92,1.1-31.88C1395.6,901.7,1425.09,902.13,1437.15,899.71Z" style="fill: #5d5963" />
+          <path class="base-shadow-2" data-name="base-shadow" d="M1414.44,901.35c9-.08,17.49-.6,22.71-1.64.22,11,.5,21.7.83,31.79a214.09,214.09,0,0,1-30.6,2.2C1412.76,929.88,1415.17,922,1414.44,901.35Z" style="opacity: 0.2" />
+          <path class="base-top-shadow-2" data-name="base-top-shadow" d="M1382.24,900.26c0-.21,0-.42,0-.64,13.34,2.08,42.83,2.51,54.89.09,0,.22,0,.45,0,.68C1426.7,903.49,1393.54,902.29,1382.24,900.26Z" style="opacity: 0.3" />
+          <polygon class="dirt-2" data-name="dirt" points="1379.79 931.66 1383.27 930.11 1397.4 932.51 1412.3 931.58 1428.98 932.51 1436.7 929.12 1439.87 932 1436.7 934.22 1431.79 933.73 1418.85 936.51 1403.36 936.51 1390.85 934.64 1379.27 933.66 1379.79 931.66" style="opacity: 0.2" />
+        </g>
+        <g class="right-tower-base">
+          <path class="left-roof-tower-back-3" data-name="left-roof-tower-back" d="M1261.12,888.49c.45,15.35,1,30.15,1.64,44.17-40.32,4-77.69,4.18-111.66,0,.82-14.22,1.54-29.06,2.17-44.29C1179.48,891.26,1237.42,891.86,1261.12,888.49Z" style="fill: #00246b" />
+          <path class="left-base-roof-tower-back-3" data-name="left-base-roof-tower-back" d="M1261.12,888.49c.45,15.35,1,30.15,1.64,44.17-40.32,4-77.69,4.18-111.66,0,.82-14.22,1.54-29.06,2.17-44.29C1179.48,891.26,1237.42,891.86,1261.12,888.49Z" style="fill: #5d5963" />
+          <path class="base-shadow-3" data-name="base-shadow" d="M1216.49,890.77c17.72-.11,34.38-.82,44.63-2.28.45,15.35,1,30.15,1.64,44.17a597.22,597.22,0,0,1-60.14,3.05C1213.2,930.41,1217.94,919.47,1216.49,890.77Z" style="opacity: 0.2" />
+          <path class="base-top-shadow-3" data-name="base-top-shadow" d="M1153.23,889.26c0-.3,0-.59,0-.89,26.21,2.89,84.15,3.49,107.85.12l0,1C1240.59,893.75,1175.44,892.08,1153.23,889.26Z" style="opacity: 0.3" />
+          <polygon class="dirt-3" data-name="dirt" points="1148.4 932.88 1155.25 930.73 1183.02 934.06 1212.28 932.76 1245.07 934.06 1260.23 929.35 1266.47 933.36 1260.23 936.43 1250.58 935.75 1225.16 939.62 1194.72 939.62 1170.14 937.02 1147.39 935.65 1148.4 932.88" style="opacity: 0.2" />
+        </g>
+        <g class="left-tower-base">
+          <path class="left-roof-tower-back-4" data-name="left-roof-tower-back" d="M666.89,888.61c-.45,15.35-1,30.15-1.64,44.17,40.32,4,77.69,4.18,111.66,0-.82-14.22-1.54-29.06-2.17-44.29C748.53,891.38,690.59,892,666.89,888.61Z" style="fill: #00246b" />
+          <path class="left-base-roof-tower-back-4" data-name="left-base-roof-tower-back" d="M666.89,888.61c-.45,15.35-1,30.15-1.64,44.17,40.32,4,77.69,4.18,111.66,0-.82-14.22-1.54-29.06-2.17-44.29C748.53,891.38,690.59,892,666.89,888.61Z" style="fill: #5d5963" />
+          <path class="base-shadow-4" data-name="base-shadow" d="M711.52,890.89c-17.72-.11-34.38-.82-44.63-2.28-.45,15.35-1,30.15-1.64,44.17a597.22,597.22,0,0,0,60.14,3.05C714.81,930.53,710.07,919.59,711.52,890.89Z" style="opacity: 0.2" />
+          <path class="base-top-shadow-4" data-name="base-top-shadow" d="M774.78,889.38c0-.3,0-.59,0-.89-26.21,2.89-84.15,3.49-107.85.12l0,.95C687.42,893.87,752.58,892.2,774.78,889.38Z" style="opacity: 0.3" />
+          <polygon class="dirt-4" data-name="dirt" points="779.62 933 772.76 930.85 745 934.18 715.73 932.88 682.95 934.18 667.78 929.47 661.54 933.48 667.78 936.55 677.43 935.88 702.85 939.74 733.29 939.74 757.87 937.14 780.62 935.77 779.62 933" style="opacity: 0.2" />
+        </g>
+        <g class="trees">
+          <g class="tree-right">
+            <path class="tree-2" data-name="tree" d="M1680.48,676.44c24.21,5.22-28.21,293-41.15,330.26s-91.29,21.69-89-19.17S1656.26,671.23,1680.48,676.44Z" style="fill: #104687" />
+            <path class="shadow-35" data-name="shadow" d="M1684.23,680.83c13.87,36.84-32.79,291-44.9,325.87-13.7,39.11-97.75,19.85-88.39-24.19C1631.36,1055.12,1649.39,882,1684.23,680.83Z" style="opacity: 0.2" />
+            <path class="light-3" data-name="light" d="M1557.24,992c2.22-39.39,98.56-296.71,127.2-310.57-1-2.89-2.29-4.61-4-5-24.22-5.21-127.83,270.22-130.13,311.09-.81,14.33,8.3,25.54,21,32.47C1562.41,1013.1,1556.59,1003.56,1557.24,992Z" style="fill: #f4e92c;opacity: 0.1" />
+          </g>
+          <g class="tree-right-2" data-name="tree-right">
+            <path class="tree-3" data-name="tree" d="M1535.27,833.67c10.15.67,6,120.72,3,136.65s-35.8,14.25-37.3-2.49S1525.12,833,1535.27,833.67Z" style="fill: #104687" />
+            <path class="shadow-36" data-name="shadow" d="M1537.05,835.22c7.84,14.15,4,120.19,1.19,135.1-3.24,16.71-38.54,13.89-37.36-4.56C1537.89,990.47,1534.89,919,1537.05,835.22Z" style="opacity: 0.2" />
+            <path class="light-4" data-name="light" d="M1503.56,967.83c-1.43-16,21.88-124.2,32.84-133.52a1.7,1.7,0,0,0-1.13-.64c-10.15-.68-35.83,117.42-34.33,134.16.83,9.33,11.37,14,21.06,13.51C1513.12,980.93,1504.32,976.32,1503.56,967.83Z" style="fill: #f4e92c;opacity: 0.1" />
+          </g>
+          <g class="tree-left">
+            <path class="tree-4" data-name="tree" d="M362.1,731.75c-16.37,1.09-9.68,194.69-4.79,220.39s57.74,23,60.16-4S378.47,730.66,362.1,731.75Z" style="fill: #104687" />
+            <path class="shadow-37" data-name="shadow" d="M359.22,734.26c-12.63,22.81-6.49,193.84-1.91,217.88,5.22,27,62.15,22.41,60.26-7.36C357.88,984.64,362.71,869.43,359.22,734.26Z" style="opacity: 0.2" />
+            <path class="light-5" data-name="light" d="M362.1,731.75a2.67,2.67,0,0,0-1.7.88c17.59,14,55.46,189.65,53.14,215.5-1.23,13.73-15.5,21.17-29.87,21.8,15.59.68,32.46-6.82,33.8-21.8C419.89,921.13,378.47,730.66,362.1,731.75Z" style="fill: #f4e92c;opacity: 0.1" />
+          </g>
+          <g class="tree-left-2" data-name="tree-left">
+            <path class="tree-5" data-name="tree" d="M270.39,691.79c-20.86,3.16,8.51,250.59,17.54,283s76.48,23.27,76.68-11.6S291.26,688.64,270.39,691.79Z" style="fill: #104687" />
+            <path class="shadow-38" data-name="shadow" d="M267,695.32c-13.74,30.6,12.52,249.14,21,279.46,9.59,34,82.07,22,76.44-15.9C292.15,1016.37,286,868.2,267,695.32Z" style="opacity: 0.2" />
+            <path class="light-6" data-name="light" d="M270.39,691.79a4.31,4.31,0,0,0-2.85,2.42C293,719.3,357.18,930.6,357,963.18c-.11,18.84-19.86,30.17-39.42,31.48,21.67,1.53,46.92-10.17,47-31.48C364.81,928.31,291.26,688.64,270.39,691.79Z" style="fill: #f4e92c;opacity: 0.1" />
+          </g>
+        </g>
+        <polygon class="road" points="932.57 914.34 732.55 1160.84 1175.53 1160.84 992.35 913.09 932.57 914.34" style="fill: #5d7d84" />
+        <g class="border">
+          <polygon points="897.47 950.92 897.47 943.46 788.75 1034.54 721.19 1123.58 721.88 1154 897.47 950.92" style="fill: #3f3f3f" />
+          <polygon points="721.19 1123.58 680.49 1125.62 888.58 943.46 897.47 943.46 721.19 1123.58" style="fill: #666" />
+          <polygon points="1022.63 950.08 1022.63 942.63 1121.65 1034.54 1189.2 1123.58 1188.51 1154 1022.63 950.08" style="fill: #3f3f3f" />
+          <polygon points="1189.2 1123.58 1229.91 1125.62 1031.53 942.63 1022.63 942.63 1189.2 1123.58" style="fill: #666" />
+        </g>
+      </g>
+      <g class="castle">
+        <path class="castle-2" data-name="castle" d="M1030.78,787.41l3,0a36.64,36.64,0,0,0,8.18-16.44h0q-81.9-2.37-163.76,0h0a45.19,45.19,0,0,0,8.18,16.44l2.87,0a763.79,763.79,0,0,1,8.37,126.47c-4.64,1.88-10.72,3-18.68,2.78l4.17,20.86h20.31v.08h113.52v-.08h20.3l4.18-20.86c-8.34.21-14.61-1-19.32-3C1020.33,872.49,1023.44,830.38,1030.78,787.41Z" style="fill: #00246b" />
+        <g class="shad-grpe-10" data-name="shad-grpe" style="opacity: 0.85">
+          <path class="wall-8" data-name="wall" d="M888.58,783.3a764.4,764.4,0,0,1,8.62,145.12h125.66c-3.32-47.11-.15-95.54,8.62-145.12Z" style="fill: #605f60" />
+          <path class="shadow-39" data-name="shadow" d="M1031.48,783.3H888.58a764.4,764.4,0,0,1,8.62,145.12h10.35c-5.26-47.71-8.24-125.07-1.32-129.49,7.92-5.06,85.87-6.79,98.61-1.76s10.61,99.1,1.68,131.25h16.34C1019.54,881.31,1022.71,832.88,1031.48,783.3Z" style="opacity: 0.2" />
+          <g class="stairs">
+            <g class="rampes">
+              <path class="edge-top" d="M1008.35,888l-4.06-1.31C953.17,900,967,900.08,916,886.69L911.9,888s5.56,29.64-33,28.66l4.17,20.86h154.13l4.18-20.86C1002.8,917.64,1008.35,888,1008.35,888Z" style="fill: #4f4f4f" />
+              <path class="edge-front" d="M1016.89,918.23c-18.23-.18-122.49,1.38-138-1.57l4.17,20.86h154.13l4.18-20.86Z" style="fill: #5b5b5b" />
+              <g class="dirt-5" data-name="dirt">
+                <polygon class="dirt-6" data-name="dirt" points="883.06 937.52 968.33 937.52 938.53 935.92 918.53 935.92 905.85 935.92 892.91 936.46 886.79 934.23 882.72 935.82 883.06 937.52" style="fill: #00246b" />
+                <polygon class="dirt-7" data-name="dirt" points="1037.19 937.52 1037.73 934.82 1027.08 936.71 1022.63 933.53 1016.05 937.52 1037.19 937.52" style="fill: #00246b" />
+              </g>
+              <path class="stairs-2" data-name="stairs" d="M1004.29,886.69c-48.56,10.48-39.91,10.34-88.33,0,0,0,1.5,28-12.59,31.66V937.6h113.52V918.35C1002.8,914.7,1004.29,886.69,1004.29,886.69Z" style="fill: #424142" />
+            </g>
+            <polygon class="stair" points="1001.53 924.77 1001.53 913.5 995.11 913.5 995.11 900.38 924.95 900.38 924.95 913.5 918.53 913.5 918.53 924.77 911.9 924.77 911.9 937.61 1008.16 937.61 1008.16 924.77 1001.53 924.77" style="fill: #605f60" />
+            <g class="lights">
+              <rect class="light-7" data-name="light" x="918.53" y="913.09" width="83" height="1.25" style="fill: #7a7a7a" />
+              <rect class="light-8" data-name="light" x="911.9" y="924.32" width="96.26" height="1.25" style="fill: #7a7a7a" />
+              <rect class="light-9" data-name="light" x="924.95" y="900.38" width="70.17" height="1.25" style="fill: #7a7a7a" />
+            </g>
+          </g>
+          <g class="door">
+            <path class="door-2" data-name="door" d="M960,838.88c-24.49,7-18.31,37.62-18.88,61.48h37.76C978.36,876.38,984.46,845.88,960,838.88Z" style="fill: #494949" />
+            <path class="light-10" data-name="light" d="M960,843.28c-20.49,7-15.2,36.18-15.7,57.08h31.4C975.25,879.37,980.48,850.25,960,843.28Z" style="fill: #e2d600" />
+          </g>
+          <g class="windows-6" data-name="windows">
+            <path class="window-edges" d="M927,855.6a174.85,174.85,0,0,0-2.49-37h-8.35a174.71,174.71,0,0,1,2.27,37Z" style="fill: #494949" />
+            <path class="window-24" data-name="window" d="M926.42,852.7a164.08,164.08,0,0,0-1.86-31.24h-5.79a164.08,164.08,0,0,1,1.86,31.24Z" style="fill: #e2d600" />
+            <path class="window-edges-2" data-name="window-edges" d="M993.14,856.26c-.5-13.58.94-24.28,2.13-37.7h8.93c-2.26,13.25-3.2,24.11-2,37.7Z" style="fill: #494949" />
+            <path class="window-25" data-name="window" d="M993.64,852.7a164.08,164.08,0,0,1,1.86-31.24h5.79a164.08,164.08,0,0,0-1.86,31.24Z" style="fill: #e2d600" />
+          </g>
+          <g class="top">
+            <path class="top-2" data-name="top" d="M1033.73,787.43q-73.69-.79-147.4,0A44.27,44.27,0,0,1,878.15,771q81.9-2.37,163.76,0A36,36,0,0,1,1033.73,787.43Z" style="fill: #605f60" />
+            <path class="edge-light" d="M887.38,772.47c49.65,2.64,107.43-8.94,153.26,3.08a37.54,37.54,0,0,0,1.27-4.56q-81.9-2.37-163.76,0a51.25,51.25,0,0,0,3.87,9.88C880.25,774.68,880.54,772.41,887.38,772.47Z" style="fill: #6d6d6d" />
+            <g class="shadow-40" data-name="shadow" style="opacity: 0.30000000000000004">
+              <path d="M1018.35,784.3c-40.28-1.82-81.84-.89-122.7.14-5.47.14-12.19-4.63-16.32-9.79a41.85,41.85,0,0,0,7,12.78q73.71-.78,147.4,0a35.9,35.9,0,0,0,7.9-15.27C1036.77,778.7,1029.74,784.81,1018.35,784.3Z" />
+            </g>
+          </g>
+        </g>
+        <g class="blason">
+          <path class="blason-2" data-name="blason" d="M1009,703a3.8,3.8,0,0,0,1.24-3.37h0a8.94,8.94,0,0,0-1.16-2.69q-6.5-.36-13-.62a25.53,25.53,0,0,0-1.29-5.44,187.78,187.78,0,0,0-30-3.16l.1-9.18a19.49,19.49,0,0,0-9.86,0v.48h0l.09,8.71c-1.89.06-3.78.14-5.67.25h0a203.44,203.44,0,0,0-24.32,2.9,29.31,29.31,0,0,0-1.08,5.44q-6.6.25-13.19.62c-1.79,2.29-1.95,4.71.41,6.45q6.16-.33,12.32-.59c-2.24,24.22,11.47,49,32.24,53.9l.19,18.36h7.86l.19-18.37c19.7-4.43,34.82-30.52,32.53-53.88q6,.25,12,.58Z" style="fill: #00246b" />
+          <g class="shad-grpe-11" data-name="shad-grpe" style="opacity: 0.85">
+            <g class="montant">
+              <path class="vertical" d="M963.93,775.1h-7.86l-1-96.52a19.49,19.49,0,0,1,9.86,0Z" style="fill: #6b5934" />
+              <path class="shadow-vert" d="M955.07,678.58v.48c14.74-2.19,5.44,23.45,6.87,96h2l1-96.52A19.49,19.49,0,0,0,955.07,678.58Z" style="opacity: 0.2" />
+              <path class="horizontal" d="M1008.68,703.43a888.21,888.21,0,0,0-97.36,0c-2.33-2.09-2.47-3.36-.41-6.45a893.2,893.2,0,0,1,98.18,0C1011.22,700.61,1010.27,701.5,1008.68,703.43Z" style="fill: #6b5934" />
+              <path class="shadow-horiz" d="M909.9,698.74c-.86,1.9-.4,3,1.42,4.69a888.21,888.21,0,0,1,97.36,0c1.1-1.33,1.89-2.17,1.57-3.76C1009,702.33,909.77,704.28,909.9,698.74Z" style="opacity: 0.2" />
+            </g>
+            <path class="shield" d="M960,757.31c-31-2.51-41.48-45.16-34.82-66.39a189.58,189.58,0,0,1,69.64,0C1002.56,711.88,989.5,755.16,960,757.31Z" style="fill: #090970" />
+            <path class="liseret" d="M960,752.91c-27.12-2.19-36.24-39.45-30.42-58a165.64,165.64,0,0,1,60.83,0C997.2,713.22,985.79,751,960,752.91Z" style="fill: none;stroke: #1153bc;stroke-miterlimit: 10" />
+            <path class="shadow-41" data-name="shadow" d="M994.82,690.92a185.42,185.42,0,0,0-24-2.91c15.35,3.54,17.66,10.73,14.65,26.23-5.79,29.79-25.62,33-25.62,33s-21.53-5.1-26.63-34.21c-2-11.48-.89-20.65,16.24-25a199,199,0,0,0-24.32,2.9C911.11,778.35,1009.09,776.82,994.82,690.92Z" style="opacity: 0.2" />
+          </g>
+        </g>
+      </g>
+      <g class="torsh">
+        <circle class="center-3" cx="1086.39" cy="847.14" r="6.7" style="fill: #fda415" />
+        <circle class="center-2" cx="1086.39" cy="847.14" r="5.62" style="fill: #fde377" />
+        <circle class="center-1" cx="1086.39" cy="847.14" r="4.15" style="fill: #fdefd8" />
+        <line class="pied" x1="1086.39" y1="945.6" x2="1086.39" y2="856.93" style="fill: none;stroke: #000;stroke-linecap: round;stroke-miterlimit: 10" />
+        <path class="socle" d="M1086.39,856.39c-6,0-9.65-4.32-9.65-9.65H1096C1096,852.07,1092.42,856.39,1086.39,856.39Z" style="fill: #262526" />
+        <circle class="outer-1" cx="1086.39" cy="847.14" r="28.93" style="fill: #f4e92c;opacity: 0.15" />
+        <circle class="outer-2" cx="1086.39" cy="847.14" r="49.11" style="fill: #f4e92c;opacity: 0.1" />
+      </g>
+      <g class="torsh" data-name="torsh">
+        <circle class="center-3-2" data-name="center-3" cx="833.34" cy="847.14" r="6.7" style="fill: #fda415" />
+        <circle class="center-2-2" data-name="center-2" cx="833.34" cy="847.14" r="5.62" style="fill: #fde377" />
+        <circle class="center-1-2" data-name="center-1" cx="833.34" cy="847.14" r="4.15" style="fill: #fdefd8" />
+        <line class="pied-2" data-name="pied" x1="833.34" y1="945.6" x2="833.34" y2="856.93" style="fill: none;stroke: #000;stroke-linecap: round;stroke-miterlimit: 10" />
+        <path class="socle-2" data-name="socle" d="M833.34,856.39c-6,0-9.65-4.32-9.65-9.65H843C843,852.07,839.37,856.39,833.34,856.39Z" style="fill: #262526" />
+        <circle class="outer-1-2" data-name="outer-1" cx="833.34" cy="847.14" r="28.93" style="fill: #f4e92c;opacity: 0.15" />
+        <circle class="outer-2-2" data-name="outer-2" cx="833.34" cy="847.14" r="49.11" style="fill: #f4e92c;opacity: 0.1" />
+      </g>
+      <g class="door-light">
+        <path class="door-light-2" data-name="door-light" d="M944.21,900v13.08h-8.44v11.26h-8.26V937.7h-8.32c-17,24.63,17,81.09,40.81,81.09s59-56.47,42.09-81.09h-9.42V924.34h-8.32V913.08h-8.56V900Z" style="fill: #e2d600;opacity: 0.2" />
+      </g>
+    </g>
+  </svg>
+
+</div>
\ No newline at end of file
diff --git a/responsive-castle/src/script.babel b/responsive-castle/src/script.babel
new file mode 100644
index 0000000..295620b
--- /dev/null
+++ b/responsive-castle/src/script.babel
@@ -0,0 +1,682 @@
+gsap.config({
+  trialWarn: false
+});
+
+var assetVerticalBreakPoints = [
+  {
+    selector: ".blason",
+    large: {
+      scale: 1,
+      transformOrigin: "center bottom",
+      duration: 0.3
+    },
+    medium: {
+      scale: 1,
+      transformOrigin: "center bottom",
+      duration: 0.3
+    },
+    narrow: {
+      scale: 0.5,
+      transformOrigin: "center bottom",
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".small-tower",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: 300,
+      duration: 0.3
+    },
+    narrow: {
+      y: 300,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".big-tower",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: 0,
+      duration: 0.3
+    },
+    narrow: {
+      y: 200,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".house",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: 120,
+      duration: 0.3
+    },
+    narrow: {
+      y: 400,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".tree",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: 150,
+      duration: 0.3
+    },
+    narrow: {
+      y: 400,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".one",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: 100,
+      duration: 0.3
+    },
+    narrow: {
+      y: 300,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".big-tower-left",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: 400,
+      duration: 0.3
+    },
+    narrow: {
+      y: 400,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".big-tower-left-2",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: -60,
+      duration: 0.3
+    },
+    narrow: {
+      y: 190,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".double-tower-left",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: 90,
+      duration: 0.3
+    },
+    narrow: {
+      y: 90,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".double-tower-center",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: 250,
+      duration: 0.3
+    },
+    narrow: {
+      y: 400,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".tower-left, .tower-right",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: 0,
+      duration: 0.3
+    },
+    narrow: {
+      y: 110,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".tower-roof-left, .tower-roof-right",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: 0,
+      duration: 0.3
+    },
+    narrow: {
+      y: 60,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".top-back, .roof-tower-side, .tower-windows",
+    large: {
+      opacity: 1,
+      duration: 0.3
+    },
+    medium: {
+      opacity: 1,
+      duration: 0.3
+    },
+    narrow: {
+      opacity: 0,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".horizontal-bottom-general",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: -160,
+      duration: 0.3
+    },
+    narrow: {
+      y: -280,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".horizontal-bottom-1",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: -120,
+      duration: 0.3
+    },
+    narrow: {
+      y: -210,
+      duration: 0.3
+    }
+  }
+];
+var assetHorizontalBreakPoints = [
+  {
+    selector: ".tree-right, .tree-right-2",
+    large: {
+      x: 0,
+      rotate: 0,
+      transformOrigin: "center",
+      opacity: 1,
+      duration: 0.3
+    },
+    medium: {
+      x: -240,
+      rotate: -5,
+      transformOrigin: "center",
+      opacity: 1,
+      duration: 0.3
+    },
+    narrow: {
+      x: -240,
+      rotate: -5,
+      transformOrigin: "center",
+      opacity: 0,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".tree-left, .tree-left-2",
+    large: {
+      x: 0,
+      rotate: 0,
+      transformOrigin: "center",
+      opacity: 1,
+      duration: 0.3
+    },
+    medium: {
+      x: 240,
+      rotate: 5,
+      transformOrigin: "center",
+      opacity: 1,
+      duration: 0.3
+    },
+    narrow: {
+      x: 240,
+      rotate: 5,
+      transformOrigin: "center",
+      opacity: 0,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".light-radius",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: 0,
+      duration: 0.3
+    },
+    narrow: {
+      y: 50,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".main-castle-center",
+    large: {
+      opacity: 1,
+      duration: 0
+    },
+    medium: {
+      opacity: 1,
+      duration: 0
+    },
+    narrow: {
+      opacity: 0,
+      duration: 0
+    }
+  },
+  {
+    selector: ".big-tower-left",
+    large: {
+      x: 0,
+      duration: 0.3
+    },
+    medium: {
+      x: 0,
+      duration: 0.3
+    },
+    narrow: {
+      x: 300,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".torsh",
+    large: {
+      opacity: 1,
+      duration: 0
+    },
+    medium: {
+      opacity: 1,
+      duration: 0
+    },
+    narrow: {
+      opacity: 0,
+      duration: 0
+    }
+  },
+  {
+    selector: ".one",
+    large: {
+      opacity: 1,
+      duration: 0.3
+    },
+    medium: {
+      opacity: 1,
+      duration: 0.3
+    },
+    narrow: {
+      opacity: 0,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".two",
+    large: {
+      x: 0,
+      duration: 0.3
+    },
+    medium: {
+      x: 334,
+      duration: 0.3
+    },
+    narrow: {
+      x: 334,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".tree",
+    large: {
+      x: 0,
+      opacity: 1,
+      duration: 0.3
+    },
+    medium: {
+      x: 60,
+      opacity: 1,
+      duration: 0.3
+    },
+    narrow: {
+      x: 60,
+      opacity: 0,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".four",
+    large: {
+      x: 0,
+      duration: 0.3
+    },
+    medium: {
+      x: -130,
+      duration: 0.3
+    },
+    narrow: {
+      x: -350,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".inner-small-tower",
+    large: {
+      y: 0,
+      duration: 0.3
+    },
+    medium: {
+      y: 0,
+      duration: 0.3
+    },
+    narrow: {
+      y: 450,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".inner-house",
+    large: {
+      x: 0,
+      y: 0,
+      transformOrigin: "center bottom",
+      transform: "scale(1)",
+      duration: 0.3
+    },
+    medium: {
+      x: -180,
+      y: 0,
+      transformOrigin: "center bottom",
+      transform: "scale(1)",
+      duration: 0.3
+    },
+    narrow: {
+      x: -280,
+      y: 0,
+      transformOrigin: "center bottom",
+      transform: "scale(0.6)",
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".inner-big-tower",
+    large: {
+      x: 0,
+      y: 0,
+      transformOrigin: "center top",
+      transform: "scale(1)",
+      duration: 0.3
+    },
+    medium: {
+      x: -180,
+      y: 0,
+      transformOrigin: "center top",
+      transform: "scale(1)",
+      duration: 0.3
+    },
+    narrow: {
+      x: -280,
+      y: 0,
+      transformOrigin: "center top",
+      transform: "scale(0.6)",
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".wall-right",
+    large: {
+      x: 0,
+      opacity: 1,
+      duration: 0.3
+    },
+    medium: {
+      x: -235,
+      opacity: 1,
+      duration: 0.3
+    },
+    narrow: {
+      x: -235,
+      opacity: 0,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".wall-left",
+    large: {
+      x: 0,
+      opacity: 1,
+      duration: 0.3
+    },
+    medium: {
+      x: 235,
+      opacity: 0,
+      duration: 0.3
+    },
+    narrow: {
+      x: 235,
+      opacity: 0,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".tower-roof-left, .left-roof-tower-base",
+    large: {
+      x: 0,
+      duration: 0.3
+    },
+    medium: {
+      x: 360,
+      duration: 0.3
+    },
+    narrow: {
+      x: 360,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".tower-left, .left-tower-base",
+    large: {
+      x: 0,
+      opacity: 1,
+      duration: 0.3
+    },
+    medium: {
+      x: 0,
+      opacity: 1,
+      duration: 0.3
+    },
+    narrow: {
+      x: 200,
+      opacity: 0,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".tower-roof-right, .right-roof-tower-base",
+    large: {
+      x: 0,
+      duration: 0.3
+    },
+    medium: {
+      x: -360,
+      duration: 0.3
+    },
+    narrow: {
+      x: -360,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".tower-right, .right-tower-base",
+    large: {
+      x: 0,
+      opacity: 1,
+      duration: 0.3
+    },
+    medium: {
+      x: 0,
+      opacity: 1,
+      duration: 0.3
+    },
+    narrow: {
+      x: -200,
+      opacity: 0,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".double-tower-left",
+    large: {
+      x: 0,
+      scale: 1,
+      transformOrigin: "center",
+      duration: 0.3
+    },
+    medium: {
+      x: 180,
+      scale: 1,
+      transformOrigin: "center",
+      duration: 0.3
+    },
+    narrow: {
+      x: 350,
+      scale: 0.8,
+      transformOrigin: "center",
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".double-tower-center",
+    large: {
+      x: 0,
+      duration: 0.3
+    },
+    medium: {
+      x: 103,
+      duration: 0.3
+    },
+    narrow: {
+      x: 103,
+      duration: 0.3
+    }
+  },
+  {
+    selector: ".big-tower-left-2",
+    large: {
+      x: 0,
+      duration: 0.3
+    },
+    medium: {
+      x: 150,
+      duration: 0.3
+    },
+    narrow: {
+      x: 220,
+      duration: 0.3
+    }
+  }
+];
+
+function applySVGResponsiveness_horizontal(width) {
+  assetHorizontalBreakPoints.forEach((asset) => {
+    if (width < 360) {
+      gsap.to(asset.selector, asset.narrow);
+    } else if (width < 620) {
+      gsap.to(asset.selector, asset.medium);
+    } else {
+      gsap.to(asset.selector, asset.large);
+    }
+  });
+}
+
+function applySVGResponsiveness_vertical(height) {
+  assetVerticalBreakPoints.forEach((asset) => {
+    if (height < 300) {
+      gsap.to(asset.selector, asset.narrow);
+    } else if (height < 485) {
+      gsap.to(asset.selector, asset.medium);
+    } else {
+      gsap.to(asset.selector, asset.large);
+    }
+  });
+}
+
+const draw = document.getElementById("draw");
+
+window.addEventListener("resize", function () {
+  draw.setAttribute(
+    "style",
+    "width:" + window.innerWidth + "px;height:" + window.innerHeight + "px;"
+  );
+
+  applySVGResponsiveness_horizontal(draw.offsetWidth);
+  applySVGResponsiveness_vertical(draw.offsetHeight);
+});
+
+var ro = new ResizeObserver((entries) => {
+  for (let entry of entries) {
+    const cr = entry.contentRect;
+    applySVGResponsiveness_horizontal(cr.width);
+    applySVGResponsiveness_vertical(cr.height);
+  }
+});
+ro.observe(document.getElementById("draw"));
+
+window.onload = function () {
+  gsap.to("#fade", {
+    opacity: 0,
+    duration: 5
+  });
+};
+
+document.addEventListener("mousedown", function () {
+  gsap.to("#instructions", {
+    opacity: 0,
+    duration: 0.4
+  });
+});
diff --git a/responsive-castle/src/style.scss b/responsive-castle/src/style.scss
new file mode 100644
index 0000000..8a080ea
--- /dev/null
+++ b/responsive-castle/src/style.scss
@@ -0,0 +1,94 @@
+@import url("https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap");
+
+#draw {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  overflow: hidden;
+  width: 95%;
+  height: 95%;
+  max-width: 95%;
+  max-height: 95%;
+  min-width: 150px;
+  min-height: 140px;
+  resize: both;
+}
+#draw::-webkit-resizer {
+  display: none;
+}
+body {
+  min-height: 100vh;
+  width: 100%;
+  background-color: #000000;
+  overflow: hidden;
+}
+#scene {
+  position: absolute;
+  height: 640px;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+#resize {
+  width: 100%;
+  padding: 0 25px 0 0;
+  box-sizing: border-box;
+  height: 100px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  pointer-events: none;
+  height: 70px;
+}
+#resize:after {
+  content: "";
+  display: block;
+  position: absolute;
+  transform: rotate(45deg);
+  background-color: #13b4e5;
+  right: -30px;
+  bottom: -30px;
+  width: 50px;
+  height: 50px;
+  pointer-events: none;
+}
+#resize > div {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0 25px 0 0;
+}
+#resize > div > div {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  display: -webkit-box;
+  -webkit-box-pack: end;
+}
+#resize > div > div > span {
+  color: #13b4e5;
+  font-family: "MedievalSharp", cursive;
+  text-align: right;
+  font-size: 4em;
+  display: inline-block;
+  text-shadow: 0px 0px 9px rgba(0, 0, 0, 1);
+}
+#arrow {
+  filter: drop-shadow(0px 0px 9px rgba(0, 0, 0, 0.7));
+}
+
+@media screen and (max-width: 640px) {
+  #resize > div > div > span {
+    font-size: 3em;
+  }
+}
+#resize > div > svg {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 25px;
+  height: 25px;
+}
diff --git a/responsive-comic-book-layout/README.markdown b/responsive-comic-book-layout/README.markdown
new file mode 100644
index 0000000..3da47c1
--- /dev/null
+++ b/responsive-comic-book-layout/README.markdown
@@ -0,0 +1,4 @@
+# Responsive Comic Book Layout
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/chris22smith/pen/MyBBOe](https://codepen.io/chris22smith/pen/MyBBOe).
+
+ A responsive layout using flexbox with narrative text and speech bubbles styled in CSS. Background patterns also in CSS. The only acceptable use of Comic Sans font. :)
\ No newline at end of file
diff --git a/responsive-comic-book-layout/dist/index.html b/responsive-comic-book-layout/dist/index.html
new file mode 100644
index 0000000..3d32364
--- /dev/null
+++ b/responsive-comic-book-layout/dist/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Responsive Comic Book Layout</title>
+  <link rel="stylesheet" href="./style.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<article class="comic">
+  <div class="panel">
+    <p class="text top-left">Suddenly...</p>
+    <p class="text bottom-right">...something amazing happened</p>
+  </div>
+  <div class="panel">
+    <p class="text top-left">Try resizing...</p>
+    <p class="text bottom-right">...it's responsive</p>
+  </div>
+  <div class="panel">
+    <p class="speech">A speech bubble</p>
+  </div>
+  <div class="panel"></div>
+  <div class="panel"></div>
+  <div class="panel"></div>
+  <div class="panel"></div>
+  <div class="panel"></div>
+  <div class="panel">
+    <p class="text bottom-right">THE END</p>
+  </div>
+</article>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/responsive-comic-book-layout/dist/style.css b/responsive-comic-book-layout/dist/style.css
new file mode 100644
index 0000000..0365d9a
--- /dev/null
+++ b/responsive-comic-book-layout/dist/style.css
@@ -0,0 +1,126 @@
+html, body {
+  margin:0;
+  padding:0;
+}
+
+.comic {
+  display:flex;
+  flex-wrap:wrap;
+  font-family:'Comic Sans', cursive;
+  padding:1vmin;
+}
+
+.panel {
+  background-color:#fff;
+  border:solid 2px #000;
+  box-shadow:0 6px 6px -6px #000;
+  display:inline-block;
+  flex:1 1;
+  height:200px;
+  margin:1vmin;
+  overflow:hidden;
+  position:relative;
+}
+
+.text {
+  background-color:#fff;
+  border:solid 2px #000;
+  margin:0;
+  padding:3px 10px;
+}
+
+.top-left {
+  left:-6px;
+  position:absolute;
+  top:-2px;
+  transform:skew(-15deg);
+}
+
+.bottom-right {
+  bottom:-2px;
+  position:absolute;
+  right:-6px;
+  transform:skew(-15deg);
+}
+
+.speech {
+  background-color:#fff;
+  border:solid 2px #000;
+  border-radius:12px;
+  display:inline-block;
+  margin:.5em;
+  padding:.5em 1em;
+  position:relative;
+}
+
+.speech:before {
+  border:solid 12px transparent;
+  border-left:solid 12px #000;
+  border-top:solid 12px #000;
+  bottom:-24px;
+  content:"";
+  height:0;
+  left:24px;
+  position:absolute;
+  transform:skew(-15deg);
+  width:0;
+}
+
+.speech:after {
+  border:solid 10px transparent;
+  border-left:solid 10px #fff;
+  border-top:solid 10px #fff;
+  bottom:-19px;
+  content:"";
+  height:0;
+  left:27px;
+  position:absolute;
+  transform:skew(-15deg);
+  width:0;
+}
+
+.panel:nth-child(1) {
+  flex-basis: 400px;
+}
+.panel:nth-child(2) {
+  flex-basis: 200px;
+}
+.panel:nth-child(3) {
+  flex-basis: 200px;
+}
+.panel:nth-child(4) {
+  flex-basis: 200px;
+}
+.panel:nth-child(5) {
+  flex-basis: 200px;
+}
+.panel:nth-child(6) {
+  flex-basis: 200px;
+}
+.panel:nth-child(7) {
+  flex-basis: 400px;
+}
+.panel:nth-child(8) {
+  flex-basis: 200px;
+}
+.panel:nth-child(9) {
+  flex-basis: 200px;
+}
+
+/* background colours */
+
+.panel:nth-child(4n+1) {
+  background-image:radial-gradient(circle, yellow, orange);
+}
+
+.panel:nth-child(4n+2) {
+  background-image:radial-gradient(circle, lightblue, deepskyblue);
+}
+
+.panel:nth-child(4n+3) {
+  background-image:radial-gradient(circle, palegreen, yellowgreen);
+}
+
+.panel:nth-child(4n+4) {
+  background-image:radial-gradient(circle, lightcoral, tomato);
+}
\ No newline at end of file
diff --git a/responsive-comic-book-layout/license.txt b/responsive-comic-book-layout/license.txt
new file mode 100644
index 0000000..54ae6c5
--- /dev/null
+++ b/responsive-comic-book-layout/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Chris Smith (https://codepen.io/chris22smith/pen/MyBBOe)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/responsive-comic-book-layout/src/index.html b/responsive-comic-book-layout/src/index.html
new file mode 100644
index 0000000..36f2d06
--- /dev/null
+++ b/responsive-comic-book-layout/src/index.html
@@ -0,0 +1,21 @@
+<article class="comic">
+  <div class="panel">
+    <p class="text top-left">Suddenly...</p>
+    <p class="text bottom-right">...something amazing happened</p>
+  </div>
+  <div class="panel">
+    <p class="text top-left">Try resizing...</p>
+    <p class="text bottom-right">...it's responsive</p>
+  </div>
+  <div class="panel">
+    <p class="speech">A speech bubble</p>
+  </div>
+  <div class="panel"></div>
+  <div class="panel"></div>
+  <div class="panel"></div>
+  <div class="panel"></div>
+  <div class="panel"></div>
+  <div class="panel">
+    <p class="text bottom-right">THE END</p>
+  </div>
+</article>
\ No newline at end of file
diff --git a/responsive-comic-book-layout/src/style.css b/responsive-comic-book-layout/src/style.css
new file mode 100644
index 0000000..0365d9a
--- /dev/null
+++ b/responsive-comic-book-layout/src/style.css
@@ -0,0 +1,126 @@
+html, body {
+  margin:0;
+  padding:0;
+}
+
+.comic {
+  display:flex;
+  flex-wrap:wrap;
+  font-family:'Comic Sans', cursive;
+  padding:1vmin;
+}
+
+.panel {
+  background-color:#fff;
+  border:solid 2px #000;
+  box-shadow:0 6px 6px -6px #000;
+  display:inline-block;
+  flex:1 1;
+  height:200px;
+  margin:1vmin;
+  overflow:hidden;
+  position:relative;
+}
+
+.text {
+  background-color:#fff;
+  border:solid 2px #000;
+  margin:0;
+  padding:3px 10px;
+}
+
+.top-left {
+  left:-6px;
+  position:absolute;
+  top:-2px;
+  transform:skew(-15deg);
+}
+
+.bottom-right {
+  bottom:-2px;
+  position:absolute;
+  right:-6px;
+  transform:skew(-15deg);
+}
+
+.speech {
+  background-color:#fff;
+  border:solid 2px #000;
+  border-radius:12px;
+  display:inline-block;
+  margin:.5em;
+  padding:.5em 1em;
+  position:relative;
+}
+
+.speech:before {
+  border:solid 12px transparent;
+  border-left:solid 12px #000;
+  border-top:solid 12px #000;
+  bottom:-24px;
+  content:"";
+  height:0;
+  left:24px;
+  position:absolute;
+  transform:skew(-15deg);
+  width:0;
+}
+
+.speech:after {
+  border:solid 10px transparent;
+  border-left:solid 10px #fff;
+  border-top:solid 10px #fff;
+  bottom:-19px;
+  content:"";
+  height:0;
+  left:27px;
+  position:absolute;
+  transform:skew(-15deg);
+  width:0;
+}
+
+.panel:nth-child(1) {
+  flex-basis: 400px;
+}
+.panel:nth-child(2) {
+  flex-basis: 200px;
+}
+.panel:nth-child(3) {
+  flex-basis: 200px;
+}
+.panel:nth-child(4) {
+  flex-basis: 200px;
+}
+.panel:nth-child(5) {
+  flex-basis: 200px;
+}
+.panel:nth-child(6) {
+  flex-basis: 200px;
+}
+.panel:nth-child(7) {
+  flex-basis: 400px;
+}
+.panel:nth-child(8) {
+  flex-basis: 200px;
+}
+.panel:nth-child(9) {
+  flex-basis: 200px;
+}
+
+/* background colours */
+
+.panel:nth-child(4n+1) {
+  background-image:radial-gradient(circle, yellow, orange);
+}
+
+.panel:nth-child(4n+2) {
+  background-image:radial-gradient(circle, lightblue, deepskyblue);
+}
+
+.panel:nth-child(4n+3) {
+  background-image:radial-gradient(circle, palegreen, yellowgreen);
+}
+
+.panel:nth-child(4n+4) {
+  background-image:radial-gradient(circle, lightcoral, tomato);
+}
\ No newline at end of file
diff --git a/responsive-grid-timeline/README.markdown b/responsive-grid-timeline/README.markdown
new file mode 100644
index 0000000..835ba4b
--- /dev/null
+++ b/responsive-grid-timeline/README.markdown
@@ -0,0 +1,5 @@
+# Responsive Grid Timeline
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/TajShireen/pen/RwrXodK](https://codepen.io/TajShireen/pen/RwrXodK).
+
+
diff --git a/responsive-grid-timeline/dist/index.html b/responsive-grid-timeline/dist/index.html
new file mode 100644
index 0000000..a56a206
--- /dev/null
+++ b/responsive-grid-timeline/dist/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Responsive Grid Timeline</title>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Karla:wght@400;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main>
+  <h1>Events</h1>
+  <section>
+    <h2>2 December</h2>
+    <div class="grid-wrapper">
+      <article>
+        <h3>9:00 AM</h3>
+        <p>Life finds a way. You know what? It is beets. </p>
+      </article>
+      <article>
+        <h3>10:00 AM</h3>
+        <p>I've crashed into a beet truck </p>
+      </article>
+      <article>
+        <h3>12:30 AM</h3>
+        <p>I was part of something special. </p>
+      </article>
+      <article>
+        <h3>13:30 AM</h3>
+        <p>Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. </p>
+        <img src="https://images.fineartamerica.com/images-medium-large-5/maroon-bells-aspen-colorado-black-and-white-photography-by-sai.jpg" alt="Black and white photo of a lake">
+
+      </article>
+      <article>
+        <h3>14:30 AM</h3>
+        <p>Just my luck, no ice. God help us, we're in the hands of engineers. </p>
+      </article>
+      <article>
+        <h3>15:30 AM</h3>
+        <p>I gave it a cold? I gave it a virus. A computer virus. </p>
+      </article>
+      <article>
+        <h3>16:30 AM</h3>
+        <p>God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. </p>
+      </article>
+      <article>
+        <h3>17:30 AM</h3>
+        <p>What do they got in there? King Kong?  </p>
+        <img src="https://www.popphoto.com/resizer/yRp6jk6SC2E-Gg0HH-3UPykc3-o=/1200x628/smart/arc-anglerfish-arc2-prod-bonnier.s3.amazonaws.com/public/H6IXNGES7XFT3BC2QPOREFGINU.jpg" alt="Black and white Mountian view">
+      </article>
+    </div>
+  </section>
+  <section>
+    <h2>3 Jan</h2>
+    <div class="grid-wrapper">
+      <article>
+        <h3>9:00 AM</h3>
+        <p>Life finds a way. You know what? It is beets. </p>
+      </article>
+      <article>
+        <h3>10:00 AM</h3>
+        <p>I've crashed into a beet truck </p>
+      </article>
+      <article>
+        <h3>12:30 AM</h3>
+        <p>I was part of something special. </p>
+      </article>
+      <article>
+        <h3>13:30 AM</h3>
+        <p>Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. </p>
+        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Eiffel_tower_at_Exposition_Universelle%2C_Paris%2C_1889.jpg/1200px-Eiffel_tower_at_Exposition_Universelle%2C_Paris%2C_1889.jpg" alt="Black and White Eiffel Tower">
+      </article>
+      <article>
+        <h3>14:30 AM</h3>
+        <p>Just my luck, no ice. God help us, we're in the hands of engineers. </p>
+      </article>
+      <article>
+        <h3>15:30 AM</h3>
+        <p>I gave it a cold? I gave it a virus. A computer virus. </p>
+      </article>
+      <article>
+        <h3>16:30 AM</h3>
+        <p>God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. </p>
+      </article>
+      <article>
+        <h3>17:30 AM</h3>
+        <p>What do they got in there? King Kong?  </p>
+        <img src="https://images.fineartamerica.com/images-medium-large-5/maroon-bells-aspen-colorado-black-and-white-photography-by-sai.jpg" alt="Black and white Mountian view">
+      </article>
+    </div>
+  </section>
+  <p class="footer-note">Design by <a href="https://dribbble.com/shots/8576480-Book-Festival-Responsive-Website">tubik</a></p>
+</main>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/responsive-grid-timeline/dist/style.css b/responsive-grid-timeline/dist/style.css
new file mode 100644
index 0000000..843f080
--- /dev/null
+++ b/responsive-grid-timeline/dist/style.css
@@ -0,0 +1,116 @@
+* {
+  box-sizing: border-box;
+}
+
+img {
+  width: 100%;
+  border-radius: 5px;
+}
+@media screen and (max-width: 599px) {
+  img {
+    height: 250px;
+    object-fit: cover;
+  }
+}
+
+body {
+  background: #2b2a2b;
+  color: white;
+  margin: 0;
+  padding: 0;
+}
+
+main {
+  padding: 2rem;
+  max-width: 1400px;
+  margin: auto;
+}
+
+h1 {
+  font-family: "Poppins", sans-serif;
+}
+
+h2 {
+  color: #ed666f;
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+}
+
+h3 {
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  margin: 0.5rem 0;
+}
+
+@media screen and (min-width: 600px) {
+  .grid-wrapper {
+    display: grid;
+    grid-auto-flow: column;
+    grid-gap: 1rem;
+  }
+}
+@media screen and (min-width: 1025px) {
+  .grid-wrapper {
+    grid-template-columns: 1fr 2fr 1fr 2fr;
+  }
+}
+@media screen and (min-width: 600px) and (max-width: 1024px) {
+  .grid-wrapper {
+    grid-template-columns: 1fr 2fr;
+  }
+}
+
+article {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #4d4d4d;
+}
+article p {
+  font-family: 'Karla', sans-serif;
+  font-size: 0.95rem;
+  color: #c8c8c8;
+}
+article:nth-child(4) {
+  grid-area: 1/2/4/3;
+}
+@media screen and (min-width: 1025px) {
+  article:nth-child(8) {
+    grid-area: 1/4/4/-1;
+  }
+}
+@media screen and (min-width: 600px) and (max-width: 1024px) {
+  article:nth-child(8) {
+    grid-area: 4/2/8/3;
+  }
+}
+@media screen and (min-width: 1025px) {
+  article:nth-child(4n+3) {
+    border-bottom: 0;
+  }
+}
+@media screen and (min-width: 1025px) {
+  article:nth-child(4) {
+    border-right: 1px solid #4d4d4d;
+    padding-right: 1rem;
+  }
+}
+@media screen and (min-width: 600px) {
+  article:nth-child(4n) {
+    border-left: 1px solid #4d4d4d;
+    border-bottom: 0;
+    padding-left: 1rem;
+  }
+}
+
+.footer-note {
+  text-align: center;
+  font-family: 'Karla', sans-serif;
+  font-size: 0.9rem;
+  background: white;
+  padding: 1rem;
+  color: black;
+  border-radius: 5px;
+}
+.footer-note a {
+  color: inherit;
+  font-weight: 600;
+}
\ No newline at end of file
diff --git a/responsive-grid-timeline/license.txt b/responsive-grid-timeline/license.txt
new file mode 100644
index 0000000..091718e
--- /dev/null
+++ b/responsive-grid-timeline/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Shireen Taj (https://codepen.io/TajShireen/pen/RwrXodK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/responsive-grid-timeline/src/index.html b/responsive-grid-timeline/src/index.html
new file mode 100644
index 0000000..080010d
--- /dev/null
+++ b/responsive-grid-timeline/src/index.html
@@ -0,0 +1,84 @@
+
+<main>
+  <h1>Events</h1>
+  <section>
+    <h2>2 December</h2>
+    <div class="grid-wrapper">
+      <article>
+        <h3>9:00 AM</h3>
+        <p>Life finds a way. You know what? It is beets. </p>
+      </article>
+      <article>
+        <h3>10:00 AM</h3>
+        <p>I've crashed into a beet truck </p>
+      </article>
+      <article>
+        <h3>12:30 AM</h3>
+        <p>I was part of something special. </p>
+      </article>
+      <article>
+        <h3>13:30 AM</h3>
+        <p>Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. </p>
+        <img src="https://images.fineartamerica.com/images-medium-large-5/maroon-bells-aspen-colorado-black-and-white-photography-by-sai.jpg" alt="Black and white photo of a lake">
+
+      </article>
+      <article>
+        <h3>14:30 AM</h3>
+        <p>Just my luck, no ice. God help us, we're in the hands of engineers. </p>
+      </article>
+      <article>
+        <h3>15:30 AM</h3>
+        <p>I gave it a cold? I gave it a virus. A computer virus. </p>
+      </article>
+      <article>
+        <h3>16:30 AM</h3>
+        <p>God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. </p>
+      </article>
+      <article>
+        <h3>17:30 AM</h3>
+        <p>What do they got in there? King Kong?  </p>
+        <img src="https://www.popphoto.com/resizer/yRp6jk6SC2E-Gg0HH-3UPykc3-o=/1200x628/smart/arc-anglerfish-arc2-prod-bonnier.s3.amazonaws.com/public/H6IXNGES7XFT3BC2QPOREFGINU.jpg" alt="Black and white Mountian view">
+      </article>
+    </div>
+  </section>
+  <section>
+    <h2>3 Jan</h2>
+    <div class="grid-wrapper">
+      <article>
+        <h3>9:00 AM</h3>
+        <p>Life finds a way. You know what? It is beets. </p>
+      </article>
+      <article>
+        <h3>10:00 AM</h3>
+        <p>I've crashed into a beet truck </p>
+      </article>
+      <article>
+        <h3>12:30 AM</h3>
+        <p>I was part of something special. </p>
+      </article>
+      <article>
+        <h3>13:30 AM</h3>
+        <p>Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. </p>
+        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Eiffel_tower_at_Exposition_Universelle%2C_Paris%2C_1889.jpg/1200px-Eiffel_tower_at_Exposition_Universelle%2C_Paris%2C_1889.jpg" alt="Black and White Eiffel Tower">
+      </article>
+      <article>
+        <h3>14:30 AM</h3>
+        <p>Just my luck, no ice. God help us, we're in the hands of engineers. </p>
+      </article>
+      <article>
+        <h3>15:30 AM</h3>
+        <p>I gave it a cold? I gave it a virus. A computer virus. </p>
+      </article>
+      <article>
+        <h3>16:30 AM</h3>
+        <p>God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. </p>
+      </article>
+      <article>
+        <h3>17:30 AM</h3>
+        <p>What do they got in there? King Kong?  </p>
+        <img src="https://images.fineartamerica.com/images-medium-large-5/maroon-bells-aspen-colorado-black-and-white-photography-by-sai.jpg" alt="Black and white Mountian view">
+      </article>
+    </div>
+  </section>
+  <p class="footer-note">Design by <a href="https://dribbble.com/shots/8576480-Book-Festival-Responsive-Website">tubik</a></p>
+</main>
\ No newline at end of file
diff --git a/responsive-grid-timeline/src/style.scss b/responsive-grid-timeline/src/style.scss
new file mode 100644
index 0000000..e5cde7a
--- /dev/null
+++ b/responsive-grid-timeline/src/style.scss
@@ -0,0 +1,124 @@
+*{
+  box-sizing: border-box;
+}
+
+$border: 1px solid #4d4d4d;
+$header-font: 'Poppins', sans-serif; 
+
+img{
+  width: 100%;
+  border-radius: 5px;
+  @media screen and (max-width: 599px){
+    height: 250px;
+    object-fit: cover;
+  }
+}
+body{
+  background: #2b2a2b;
+  color: white;
+  margin: 0;
+  padding: 0;
+}
+
+main{
+  padding: 2rem;
+  max-width: 1400px;
+  margin: auto;
+
+}
+
+h1{
+  font-family:  $header-font;
+}
+h2{
+  color: #ed666f;
+  font-family: $header-font;
+  font-weight: 500;
+}
+
+h3{
+  font-family: $header-font;
+  font-weight: 500;
+  margin: 0.5rem 0;
+}
+
+.grid-wrapper{
+
+  // Adding grid layout for screen size above 600 
+  @media screen and (min-width: 600px){
+    display: grid;
+    grid-auto-flow: column;
+    grid-gap: 1rem;
+   
+  }
+
+  @media screen and (min-width: 1025px){
+    grid-template-columns: 1fr 2fr 1fr 2fr;
+  }
+  @media screen and (min-width: 600px) and (max-width: 1024px){
+    grid-template-columns: 1fr 2fr;
+  }
+
+}
+
+article{
+  p{
+    font-family: 'Karla', sans-serif;
+    font-size: 0.95rem;
+    color: #c8c8c8;
+  }
+  padding-bottom: 1rem;
+  border-bottom: $border;
+
+
+  // using Grid area to place the 4th and 8th element. 
+
+  &:nth-child(4){
+    grid-area: 1/2/4/3;   
+  }
+
+  &:nth-child(8){
+    @media screen and (min-width: 1025px){
+      grid-area: 1/4/4/-1;
+    }
+    @media screen and (min-width: 600px) and (max-width: 1024px){
+      grid-area: 4/2/8/3;
+    }
+  }
+
+  &:nth-child(4n+3){
+    @media screen and (min-width: 1025px){
+      border-bottom: 0;
+    }   
+  }
+  &:nth-child(4){
+    @media screen and (min-width: 1025px){
+      border-right: $border;
+      padding-right: 1rem;
+    }
+
+  }
+  &:nth-child(4n){
+    @media screen and (min-width: 600px){
+      border-left: $border;
+      border-bottom: 0;
+      padding-left: 1rem;
+    }
+  }
+
+
+}
+
+.footer-note{
+  text-align: center;
+  font-family: 'Karla', sans-serif;
+  font-size: 0.9rem;
+  background: white;
+  padding: 1rem;
+  color: black;
+  border-radius: 5px;
+  a{
+    color: inherit;
+    font-weight: 600;
+  }
+}
\ No newline at end of file
diff --git a/responsive-social-platform-ui/README.markdown b/responsive-social-platform-ui/README.markdown
new file mode 100644
index 0000000..0f3232c
--- /dev/null
+++ b/responsive-social-platform-ui/README.markdown
@@ -0,0 +1,6 @@
+# Responsive Social Platform UI
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/TurkAysenur/pen/RwWKYMO](https://codepen.io/TurkAysenur/pen/RwWKYMO).
+
+Inspired By Quan Ha
+https://dribbble.com/shots/5581599-027-100-Daily-UI-Intranet-Employee-Profile
diff --git a/responsive-social-platform-ui/dist/index.html b/responsive-social-platform-ui/dist/index.html
new file mode 100644
index 0000000..b09c3d5
--- /dev/null
+++ b/responsive-social-platform-ui/dist/index.html
@@ -0,0 +1,520 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Responsive Social Platform UI</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container" x-data="{ rightSide: false, leftSide: false }">
+  <div class="left-side" :class="{'active' : leftSide}">
+    <div class="left-side-button" @click="leftSide = !leftSide">
+      <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+      <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+  <path d="M19 12H5M12 19l-7-7 7-7"/>
+</svg>
+    </div>
+    <div class="logo">ULTRANET</div>
+    <div class="side-wrapper">
+      <div class="side-title">MENU</div>
+      <div class="side-menu">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+            <path d="M9 22V12h6v10" />
+          </svg>
+          Home
+        </a>
+        <a href="#">
+          <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+          </svg>
+          Latest News
+        </a>
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+            <circle cx="12" cy="10" r="3" /></svg>
+          Explore
+        </a>
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+            <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
+          </svg>
+          Files
+        </a>
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+            <circle cx="8.5" cy="8.5" r="1.5" />
+            <path d="M21 15l-5-5L5 21" />
+          </svg>
+          Galery
+        </a>
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+            <path d="M16 2v4M8 2v4M3 10h18" />
+          </svg>
+          Events
+        </a>
+      </div>
+    </div>
+    <div class="side-wrapper">
+      <div class="side-title">YOUR FAVOURITE</div>
+      <div class="side-menu">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 472.11 472.11">
+            <path d="M260.07 216.11a63.94 63.94 0 00-28.26-53.1 55.95 55.95 0 00-43.74-90.9c-.8 0-1.6.1-2.4.12a56 56 0 10-107.2 0c-.8 0-1.6-.12-2.4-.12a55.95 55.95 0 00-43.75 90.9 64 64 0 000 106.2 55.95 55.95 0 0043.75 90.9h112a55.95 55.95 0 0043.74-90.9 63.94 63.94 0 0028.26-53.1z" fill="#6a9923" />
+            <path d="M193.8 178.51a8 8 0 00-11.32-.16l-42.41 41.03V104.1a8 8 0 00-16 0v56.7l-36.35-36.35a8 8 0 00-11.31 11.3l47.66 47.67V292.8l-34.35-34.34a8 8 0 00-11.31 11.3l45.66 45.67V464.1a8 8 0 0016 0V241.63l53.6-51.78a8 8 0 00.12-11.34z" fill="#618c20" />
+            <path d="M468.07 216.11a63.94 63.94 0 00-28.26-53.1 55.95 55.95 0 00-43.74-90.9c-.8 0-1.6.1-2.4.12a56 56 0 10-107.2 0c-.8 0-1.6-.12-2.4-.12a55.95 55.95 0 00-43.75 90.9 64 64 0 000 106.2 55.95 55.95 0 0043.75 90.9h112a55.95 55.95 0 0043.74-90.9 63.94 63.94 0 0028.26-53.1z" fill="#6a9923" />
+            <path d="M401.72 178.46a8 8 0 00-11.31 0l-42.34 42.34V104.11a8 8 0 00-16 0v56.7l-36.35-36.35a8 8 0 00-11.31 11.3l47.66 47.67V292.8l-34.35-34.34a8 8 0 00-11.31 11.3l45.66 45.67V464.1a8 8 0 0016 0V242.87c.6-.3 1.15-.66 1.65-1.1l52-52a8 8 0 000-11.31z" fill="#618c20" />
+            <path d="M364.07 216.11a63.94 63.94 0 00-28.26-53.1 55.95 55.95 0 00-43.74-90.9c-.8 0-1.6.1-2.4.12a56 56 0 10-107.2 0c-.8 0-1.6-.12-2.4-.12a55.95 55.95 0 00-43.75 90.9 64 64 0 000 106.2 55.95 55.95 0 0043.75 90.9h112a55.95 55.95 0 0043.74-90.9 63.94 63.94 0 0028.26-53.1z" fill="#88b337" />
+            <path d="M297.72 178.46a8 8 0 00-11.31 0l-42.34 42.34V104.11a8 8 0 00-16 0v56.7l-36.35-36.35a8 8 0 00-11.31 11.3l47.66 47.67V292.8l-34.35-34.34a8 8 0 00-11.31 11.3l45.66 45.67V464.1a8 8 0 0016 0V242.87c.6-.3 1.15-.66 1.65-1.1l52-52a8 8 0 000-11.31z" fill="#6a9923" />
+            <path d="M372.07 472.11h-272a8 8 0 010-16h272a8 8 0 010 16z" fill="#595959" /></svg>
+          Foresto
+        </a>
+        <a href="#">
+          <svg viewBox="0 0 56 58" width="512" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" transform="translate(0 -1)">
+              <path d="M46.8 48.4a30.5 30.5 0 01-8.8-24l6.9-12C44.4 9.6 41.6 1 28 1A32 32 0 003.4 13.5a.2.2 0 00.2.4l2.5-.5a.5.5 0 01.4.8 14.2 14.2 0 00-3.3 4.3.2.2 0 00.3.4l2.5-.6a.5.5 0 01.6.6C5 22.5-.4 37.1.9 56.8a.5.5 0 00.9.2c2.2-3.3 5-6.2 8.4-8.3a.5.5 0 01.7.4c0 2.4.8 4.7 2.4 6.4a.5.5 0 001-.1 14 14 0 015.4-8h.5c1.7 1.2 3 3.8 3.6 5.8.5 1.8 1 3.6 1.1 5.4a.5.5 0 00.8.4c7-4 7.1-8.5 7.2-8.6a.5.5 0 01.9-.2c1.4 1.6 2.7 3.4 3.7 5.2a.5.5 0 001 0c.8-2 1.3-4.3 1.5-6.6l6.4.5a.5.5 0 00.4-1z" fill="#f9eab0" />
+              <path d="M44.5 49c-4.8-.4-4.3-.3-5.6-.6a.5.5 0 00-.5.5c-.2 2-.6 4-1.2 5.9-1-1.7-2.2-3.2-3.4-4.7a.5.5 0 00-.9.2v.1c-.7 4.4-5.4 7.5-7.2 8.5a.5.5 0 01-.8-.4c-.4-3.6-1.6-8.8-4.6-11a.5.5 0 00-.6 0 14 14 0 00-5.5 7.9c-1.3-1.8-2-4-2-6.2a.5.5 0 00-.6-.4l-.7.4a.5.5 0 00-.7-.4c-2.7 1.7-5 3.9-7 6.4a91.2 91.2 0 015-36.8.5.5 0 00-.4-.1l-1.2.3c-.1-.2-.4-.4-.6-.3l-.7.1c.8-1.5 1.8-3 3-4.2.4-.3 0-1-.4-.8l-1.2.2c0-.2-.3-.3-.5-.2l-.7.1c.4-.4 6.8-10.3 18.4-12.2a27 27 0 013.9-.3c12 0 14.5 8.7 15 11.3l-6.2 12a32.6 32.6 0 007.9 24c.2.3.2.6 0 .8z" fill="#f5efca" />
+              <path d="M27.8 1z" fill="#ecf0f1" />
+              <path d="M53 29c.1-1.8-.5-3.6-1.8-5-1.5-1.6-4.2-3-9.2-3-12 0-13 2-13 2s0-3.8 10-6.7c.5-.2.8-.6.8-1.1-.1-1 .2-2.1.9-2.9.2-.2.5-.3.8-.3 1.7 0 8 .4 10.5 3 3 3 5 7 1 14z" fill="#f0c419" />
+              <path d="M51.2 24c-4.5 5.2-3.8-1.8-19.2 1 0 0-3 0-3-2 0 0 1-2 13-2 5 0 7.7 1.4 9.2 3z" fill="#f29c1f" />
+              <path d="M32 12.3a3 3 0 11-3.5-2.3z" fill="#f0c419" />
+              <path d="M44 18a1 1 0 010-2c.5-.1 1-.3 1.3-.7a1 1 0 011.4 1.4C46 17.4 45 18 44 18z" fill="#e57e25" />
+              <circle cx="29" cy="13" fill="#393f4a" r="2" />
+              <path d="M34.6 14c-2 0-3.8-.9-5.2-2.2a4 4 0 00-3.4-1.1c-2 .4-3.1 2.7-3.1 2.8a1 1 0 01-1.8-1s1.6-3.1 4.5-3.8c1.8-.3 3.6.3 5 1.5 2.1 1.8 3.6 2 4.4 1.9.4-.1.8-.3 1.1-.6a1 1 0 011.7 1c-.8 1-2 1.6-3.2 1.6z" fill="#7f6e5d" />
+            </g>
+          </svg>
+          Birds
+        </a>
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path d="M339.4 346.5a636.5 636.5 0 00-46.7-140.2 8.4 8.4 0 00-7.6-4.8h-21a8.4 8.4 0 00-8 11 662.9 662.9 0 0129 289.7 8.4 8.4 0 008.4 9.5h50.3c4.4 0 8.1-3.6 8.3-8 2.3-52.8-2-105.6-12.7-157.2z" fill="#ff9940" />
+            <g fill="#f5760f">
+              <path d="M300.7 508.8a8.4 8.4 0 01-2-6.6 662.7 662.7 0 00-29-289.7 8.4 8.4 0 018-11H264a8.4 8.4 0 00-8 11 662.9 662.9 0 0129 289.7 8.4 8.4 0 008.4 9.5H307c-2.4 0-4.7-1-6.3-2.9z" />
+              <path d="M331.2 312.2l-48.8 9.1c.9 5.6 1.7 11.1 2.4 16.7l50.6-9.5c-1.3-5.5-2.7-10.9-4.2-16.3zM288 369.2l1.1 16.7h57.2a641 641 0 00-2.6-16.7H288z" />
+            </g>
+            <path d="M499.7 157.8A125.9 125.9 0 00276.9 212a8.4 8.4 0 0010.2 9.7L495 171a8.5 8.5 0 004.6-13.3z" fill="#a4d64d" />
+            <path d="M351.1 2.9a8.4 8.4 0 00-7.5-2.8 125.9 125.9 0 00-93 185c7.4 13.4 17 25.2 28.6 35.1a8.4 8.4 0 0013.5-4l60.1-205.5c.8-2.7.2-5.6-1.7-7.8z" fill="#8ec42f" />
+            <g fill="#a4d64d">
+              <path d="M327 199.3c-15.3-.3-30.3 2.1-44.7 7.2a8.4 8.4 0 00-3.3 13.7l148 154.7a8.5 8.5 0 0013.8-2.6 125.9 125.9 0 00-113.7-173z" />
+              <path d="M293.3 212.1a125.9 125.9 0 00-222.8-54.3A8.5 8.5 0 0075 171l208 50.7a8.4 8.4 0 0010.2-9.7z" />
+            </g>
+            <path d="M293.2 212.5c-.6-2.8-2.6-5-5.3-6a125.9 125.9 0 00-158.5 165.8c2.2 5.5 9.7 7 13.8 2.6l148-154.7c2-2 2.7-5 2-7.7z" fill="#8ec42f" />
+            <path d="M491.7 496.5c-71.3-45-153.8-68.7-238.6-68.7S86 451.6 14.5 496.5A8.4 8.4 0 0019 512h468.3a8.4 8.4 0 004.4-15.5z" fill="#ffd042" />
+            <path d="M35.5 506c-1-3.6.4-7.5 3.6-9.5A447 447 0 01265.4 428l-12.3-.2a447.2 447.2 0 00-238.6 68.7A8.4 8.4 0 0019 512h24.6c-3.8 0-7-2.5-8-6z" fill="#ffc412" />
+            <circle cx="290.8" cy="218.3" r="29.3" fill="#a4a09a" />
+            <path d="M299.2 239.2a29.3 29.3 0 01-24.5-45.4 29.3 29.3 0 1040.7 40.6c-4.7 3-10.2 4.8-16.2 4.8z" fill="#928d86" />
+            <circle cx="316" cy="256" r="29.3" fill="#a4a09a" />
+            <path d="M324.4 281.1a29.3 29.3 0 01-17.1-53.1 29.4 29.4 0 1025.8 51.8c-2.8.9-5.7 1.3-8.7 1.3z" fill="#928d86" />
+            <circle cx="261.5" cy="256" r="29.3" fill="#a4a09a" />
+            <path d="M269.9 277a29.3 29.3 0 01-24.5-45.5A29.3 29.3 0 10286 272c-4.6 3-10.2 4.9-16.1 4.9z" fill="#928d86" />
+            <g fill="#ffb266">
+              <circle cx="274.1" cy="473.9" r="8.4" />
+              <circle cx="378.9" cy="482.3" r="8.4" />
+              <circle cx="328.6" cy="465.6" r="8.4" />
+              <circle cx="223.8" cy="457.2" r="8.4" />
+              <circle cx="202.8" cy="482.3" r="8.4" />
+              <circle cx="144.2" cy="482.3" r="8.4" />
+            </g>
+          </svg>
+          Nature
+        </a>
+        <a href="#"><svg viewBox="0 0 511.4 511.4" width="512" xmlns="http://www.w3.org/2000/svg">
+            <path d="M102.8 145c-47.5 0-86 38.6-86 86v29.3h168.6V145z" fill="#0dca71" />
+            <path d="M432.9 377.8l-43-70.8-95.1 60.2 84 144.2 25.2-15.3a86.2 86.2 0 0028.9-118.3z" fill="#0cba68" />
+            <path d="M121.6 307l-43 70.8a86.2 86.2 0 0028.8 118.3l25.3 15.3 84-144.2z" fill="#0dca71" />
+            <path d="M408.6 145H326v115.3h168.7v-29.2c0-47.5-38.6-86.1-86-86.1z" fill="#0cba68" />
+            <path d="M345.9 90.2A90.3 90.3 0 00255.7 0L245 85.3l10.7 82.1H346V90.2z" fill="#0cba68" />
+            <path d="M255.7 0a90.3 90.3 0 00-90.2 90.2v77.2h90.2z" fill="#0dca71" />
+            <g>
+              <path d="M420 269.3c0-62.4-31.7-117.1-79.2-147.4l-85 147.4z" fill="#ebb65b" />
+              <path d="M255.7 269.3L340.8 122c-24.8-15.8-54-25-85-25L245 160z" fill="#fdd278" />
+              <path d="M91.4 269.3h164.3l-85-147.4a174.3 174.3 0 00-79.3 147.4z" fill="#ffc663" />
+              <path d="M255.7 97c-31.1 0-60.2 9.1-85 25l85 147.3z" fill="#ffe7ab" />
+              <path d="M255.7 269.3L245 384l10.7 57.7c31.1 0 60.3-9.2 85.1-25z" fill="#ebb65b" />
+              <path d="M255.7 269.3l85.1 147.4c47.5-30.2 79.2-85 79.2-147.4z" fill="#fdd278" />
+              <path d="M170.6 416.7c24.9 15.8 54 25 85.1 25V269.3z" fill="#ffc663" />
+              <path d="M255.7 269.3H91.4c0 62.4 31.8 117.2 79.2 147.4z" fill="#ffe7ab" />
+              <path d="M337 269.3L296.4 199h-40.7L245 266.7l10.7 73h40.7z" fill="#ffe5a5" />
+              <path d="M215 198.9l-40.6 70.4 40.7 70.5h40.6V198.9z" fill="#fffaed" />
+            </g>
+          </svg>
+          Animals
+        </a>
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path d="M176.6 360l-51.1-24.2-26-12.3L155.1 187l35.5-8.8s-58 97.4-14 181.9z" fill="#f8b40e" />
+            <path d="M488.8 330.5v-62.4c0-5-4-9-9-9h-25.7c-5 0-9 4-9 9v22.5" fill="#f2171c" />
+            <path d="M464.7 330.5v-71.3H454c-5 0-9 4-9 8.9v22.5" fill="#d8131e" />
+            <path d="M225.8 266.7a60.1 60.1 0 110 120.2l42 22.6 141.3-15 14.6-127.8-190.4-15" fill="#bf8104" />
+            <path d="M130.2 107.4H175a39.8 39.8 0 110 79.7h-44.8a8.1 8.1 0 01-8.1-8.2v-63.4c0-4.5 3.6-8.1 8-8.1z" fill="#f8b40e" />
+            <path d="M175 170.8h-53v8.1c0 4.5 3.7 8.1 8.2 8.1H175a40 40 0 0039-48 39.8 39.8 0 01-39 31.8z" fill="#dd9b0a" />
+            <path fill="#f8b40e" d="M356.5 423H143.1v-36h183.8" />
+            <circle cx="415.1" cy="423" r="78.2" fill="#2c4046" />
+            <path fill="#dd9b0a" d="M167.5 187l-64.9 173.8-3-37.3L155 187z" />
+            <circle cx="415.1" cy="423" r="42.8" fill="#9aa7b8" />
+            <circle cx="99.5" cy="423" r="78.2" fill="#2c4046" />
+            <circle cx="99.5" cy="423" r="42.8" fill="#9aa7b8" />
+            <path d="M99.5 473.6C71.6 473.6 49 451 49 423h15.7a35 35 0 0069.8 0h15.7c0 28-22.7 50.6-50.6 50.6z" fill="#1d2c30" />
+            <path d="M343.6 423A78.8 78.8 0 01381 274.7c42 0 125 22.2 131 135.1.4 7.2-5.3 13.2-12.4 13.2h-156z" fill="#f8b40e" />
+            <path d="M327.6 365.6a78.9 78.9 0 0179-79c12.4 0 28.6 2 45.2 7.8a138.7 138.7 0 00-70.8-19.7A78.9 78.9 0 00343.6 423h8.8a78.7 78.7 0 01-24.8-57.4z" fill="#dd9b0a" />
+            <path d="M199 423a99.5 99.5 0 00-199 0h199z" fill="#f8b40e" />
+            <path d="M116 324.9A99.5 99.5 0 000 423h33a99.5 99.5 0 0183-98.1z" fill="#dd9b0a" />
+            <path d="M415.1 473.6c-27.9 0-50.6-22.7-50.6-50.6h15.7a35 35 0 0069.8 0h15.8c0 28-22.8 50.6-50.7 50.6z" fill="#1d2c30" />
+            <path d="M146.1 107.4h-16a8.1 8.1 0 00-8 8V179c0 4.5 3.6 8.1 8 8.1h16v-79.6z" fill="#a0d9f2" />
+            <path d="M146.1 170.8h-24v8.1c0 4.5 3.6 8.1 8 8.1h16v-16.2z" fill="#84bed3" />
+            <path d="M394.9 222.4l-153 10.8a33.6 33.6 0 00-31.2 33.5h213v-17.4a27 27 0 00-28.8-26.9z" fill="#444d56" />
+            <path fill="#d3d3d3" d="M183.9 65.5h15.7v77.2h-15.7z" />
+            <g fill="#dd9b0a">
+              <path d="M452.2 337.4h-76.6a7.9 7.9 0 010-15.8h76.6a7.9 7.9 0 010 15.8zM432.2 362.7h-56.6a7.9 7.9 0 010-15.7h56.6a7.9 7.9 0 010 15.7zM412.1 387.8h-36.5a7.9 7.9 0 010-15.7H412a7.9 7.9 0 010 15.7z" />
+            </g>
+            <circle cx="191.8" cy="147.2" r="23.1" fill="#444d56" />
+            <path d="M191.8 84c-8 0-14.3-6.4-14.3-14.2V25a14.3 14.3 0 1128.6 0v44.6c0 8-6.5 14.3-14.3 14.3z" fill="#e6e6e6" />
+          </svg>
+          Motobike
+        </a>
+        <a href="#">
+          <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+            <path d="M424 101l-8 25v6l16 21c3 4 0 9-4 9h-27l-5 2-15 22c-3 4-9 3-10-2l-8-25-4-4-25-8c-5-1-6-7-2-10l22-15 2-5V90c0-4 5-7 9-4l21 16h6l25-8c4-2 9 3 7 7z" fill="#fe9901" />
+            <path d="M428 162h-27l-5 2-15 22c-3 4-9 3-10-2l-5-15 2-2 16-23 5-2h28c2 0 4-1 5-3l10 14c3 4 0 9-4 9z" fill="#fb8801" />
+            <circle cx="438.8" cy="403.5" fill="#60b7ff" r="23.4" />
+            <path d="M462 403a23 23 0 11-46-2c4 4 9 7 16 7 12 0 22-10 23-21 4 4 7 10 7 16z" fill="#26a6fe" />
+            <path d="M24 511l321-137-101-100-100-101L7 494c-4 11 6 21 17 17z" fill="#fe7d43" />
+            <path d="M345 374L24 511c-11 4-21-6-17-17 3 1 5 0 8-1l315-134z" fill="#fd6930" />
+            <g fill="#7acaa6">
+              <path d="M47 401l95 60-54 22-60-37zM84 315l162 101-54 23-128-80zM120 229l210 131 15 14-49 21-195-122z" />
+            </g>
+            <g fill="#57be92">
+              <path d="M142 461l-54 22-20-12 54-23zM246 416l-54 23-20-13 54-23zM345 374l-49 21-20-13 53-23 1 1z" />
+            </g>
+            <path d="M136 4c-6 11-18 33-38 41-3 1-3 5 0 7 20 8 32 29 38 41 1 2 4 2 6 0 5-12 18-33 37-41 3-2 3-6 0-7-19-8-32-30-37-41-2-2-5-2-6 0z" fill="#fe9901" />
+            <path d="M179 52c-19 8-32 29-37 41-2 2-5 2-6 0l-9-15a87 87 0 0139-41l13 8c3 1 3 5 0 7z" fill="#fb8801" />
+            <path d="M345 426c-4 9-14 26-30 33-2 1-2 4 0 5 16 7 26 24 30 33 1 2 4 2 5 0 5-9 15-26 31-33 2-1 2-4 0-5-16-7-26-24-31-33-1-2-4-2-5 0z" fill="#fe9901" />
+            <path d="M381 464c-16 7-26 24-31 33-1 2-4 2-5 0l-7-12a70 70 0 0132-33l11 7c2 1 2 4 0 5z" fill="#fb8801" />
+            <g fill="#acacac">
+              <path d="M504 288a52 52 0 00-37-19c-7 0-13 1-20 3-13-8-30-8-50-1a8 8 0 106 14c7-2 17-5 28-3l-3 3c-10 10-13 27-5 38a26 26 0 0021 11c7 0 14-4 18-9l5-12c2-10-1-20-6-28h5c10 0 19 5 26 13a8 8 0 1012-10zm-52 23c-1 4-4 7-8 7s-7-2-8-4c-4-5-2-13 3-18l7-6c5 6 7 13 6 21zM443 80c11 9 28 8 39-2l2-2c2 10-2 21-5 28a8 8 0 1014 6c8-18 9-36 3-50 3-6 4-12 5-19 1-14-5-28-15-39a8 8 0 10-11 11 37 37 0 0110 33c-8-7-18-10-28-9-5 0-9 2-12 4-6 3-10 10-10 18-1 8 2 16 8 21zm7-20c0-2 0-5 3-6 4-3 9-2 13-1 1 0 13 6 12 7l-6 7c-6 4-14 5-19 1-2-2-3-5-3-8zM289 43c-4 1-6 6-5 10 11 30 2 84-18 109a8 8 0 1012 10c11-14 20-36 24-60s3-48-3-65c-2-4-6-6-10-4zM460 231a8 8 0 105-15c-17-6-41-7-65-3s-46 13-60 25a8 8 0 1010 11c25-20 79-29 110-18z" />
+            </g>
+            <circle cx="345.3" cy="31.1" fill="#60b7ff" r="23.4" />
+            <path d="M369 31a23 23 0 11-47 0v-1c4 3 8 5 13 5 13 0 23-10 24-23 6 4 10 11 10 19z" fill="#26a6fe" />
+            <circle cx="227.5" cy="94.5" fill="#60b7ff" r="23.4" />
+            <path d="M251 94a23 23 0 11-47 0c4 2 8 4 13 4 13 0 23-10 23-23 7 4 11 11 11 19z" fill="#26a6fe" />
+            <path d="M164 136l217 217c3 3 3 8 0 11l-21 21c-3 3-8 3-11 0L132 168c-3-3-3-8 0-11l21-21c3-3 8-3 11 0z" fill="#f3eae6" />
+            <path d="M381 364l-21 20c-3 4-8 4-11 0l-15-14c4 3 9 3 12 0l20-20c3-4 3-9 0-12l15 15c3 3 3 8 0 11z" fill="#e1d3ce" />
+          </svg>
+          Dance
+        </a>
+      </div>
+    </div>
+    <a href="https://twitter.com/AysnrTrkk" class="follow-me" target="_blank">
+      <span class="follow-text">
+        <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
+        Follow me on Twitter
+     </span>
+      <span class="developer">
+        <img src="https://pbs.twimg.com/profile_images/1253782473953157124/x56UURmt_400x400.jpg" />
+        Aysenur Turk — @AysnrTrkk
+      </span>
+    </a>
+  </div>
+  <div class="main">
+    <div class="search-bar">
+      <input type="text" placeholder="Search" />
+      <button class="right-side-button" @click="rightSide = !rightSide">
+         <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+      </button>
+    </div>
+    <div class="main-container">
+      <div class="profile">
+        <div class="profile-avatar">
+          <img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" alt="" class="profile-img">
+          <div class="profile-name">Quan Ha</div>
+        </div>
+        <img src="https://images.unsplash.com/photo-1508247967583-7d982ea01526?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="" class="profile-cover">
+        <div class="profile-menu">
+          <a class="profile-menu-link active">Timeline</a>
+          <a class="profile-menu-link">About</a>
+          <a class="profile-menu-link">Friends</a>
+          <a class="profile-menu-link">Photos</a>
+          <a class="profile-menu-link">More</a>
+        </div>
+      </div>
+      <div class="timeline">
+        <div class="timeline-left">
+          <div class="intro box">
+            <div class="intro-title">
+              Introduction
+              <button class="intro-menu"></button>
+            </div>
+            <div class="info">
+              <div class="info-item">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.889 503.889" fill="currentColor">
+                  <path d="M453.727 114.266H345.151V70.515c0-20.832-16.948-37.779-37.78-37.779H196.517c-20.832 0-37.78 16.947-37.78 37.779v43.751H50.162C22.502 114.266 0 136.769 0 164.428v256.563c0 27.659 22.502 50.161 50.162 50.161h403.565c27.659 0 50.162-22.502 50.162-50.161V164.428c0-27.659-22.503-50.162-50.162-50.162zm-262.99-43.751a5.786 5.786 0 015.78-5.779h110.854a5.786 5.786 0 015.78 5.779v43.751H190.737zM32 164.428c0-10.015 8.147-18.162 18.162-18.162h403.565c10.014 0 18.162 8.147 18.162 18.162v23.681c0 22.212-14.894 42.061-36.22 48.27l-167.345 48.723a58.482 58.482 0 01-32.76 0L68.22 236.378C46.894 230.169 32 210.321 32 188.109zm421.727 274.725H50.162c-10.014 0-18.162-8.147-18.162-18.161V253.258c8.063 6.232 17.254 10.927 27.274 13.845 184.859 53.822 175.358 52.341 192.67 52.341 17.541 0 7.595 1.544 192.67-52.341 10.021-2.918 19.212-7.613 27.274-13.845v167.733c.001 10.014-8.147 18.162-18.161 18.162z" /></svg>
+                Product Designer at <a href="#">Bravebist</a>
+              </div>
+              <div class="info-item">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                  <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+                  <path d="M9 22V12h6v10" />
+                </svg>
+                Live in <a href="#">Hanoi, Vietnam</a>
+              </div>
+              <div class="info-item">
+                <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+                  <path d="M437 75C388.7 26.6 324.4 0 256 0S123.3 26.6 75 75C26.6 123.3 0 187.6 0 256s26.6 132.7 75 181c48.3 48.4 112.6 75 181 75s132.7-26.6 181-75c48.4-48.3 75-112.6 75-181s-26.6-132.7-75-181zM252.4 481.9c-52-.9-103.7-19.5-145.2-55.8L256 277.2l21.7 21.8a165.9 165.9 0 00-35.7 87c-3.5 30.5 0 63.3 10.4 95.9zM299 320.3l105.7 105.8a224.8 224.8 0 01-121.3 54.1C262 419.5 268 360.3 299 320.3zm21.2-21.2c40-31 99.2-37 160-15.6A224.8 224.8 0 01426 404.8zM482 252.4a231.7 231.7 0 00-96-10.4 165.9 165.9 0 00-87 35.7L277.3 256l148.9-148.8c36.3 41.5 55 93.2 55.8 145.2zm-290.2-39.5c-40 31-99.2 37-160 15.6A224.8 224.8 0 0186 107.2zm-84.5-127a224.8 224.8 0 01121.3-54.1C250 92.5 244 151.7 213 191.7zM270 126c3.5-30.5 0-63.3-10.4-95.9 52 .9 103.7 19.5 145.2 55.8L256 234.8 234.3 213a165.9 165.9 0 0035.7-87zM30 259.6a242 242 0 0072.7 11.7c7.8 0 15.6-.5 23.2-1.3a165.9 165.9 0 0087-35.7l21.8 21.7L85.9 404.8a225.3 225.3 0 01-55.8-145.2z" /></svg>
+                Player name <a href="#">Quan Ha</a>
+              </div>
+            </div>
+          </div>
+          <div class="event box">
+            <div class="event-wrapper">
+              <img src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" class="event-img" />
+              <div class="event-date">
+                <div class="event-month">Jan</div>
+                <div class="event-day">01</div>
+              </div>
+              <div class="event-title">Winter Wonderland</div>
+              <div class="event-subtitle">01st Jan, 2019 07:00AM</div>
+            </div>
+          </div>
+          <div class="pages box">
+            <div class="intro-title">
+              Your pages
+              <button class="intro-menu"></button>
+            </div>
+            <div class="user">
+              <img src="https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0f" alt="" class="user-img">
+              <div class="username">Chandelio</div>
+            </div>
+            <div class="user">
+              <img src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=d5849d81af587a09dbcf3f11f6fa122f" alt="" class="user-img">
+              <div class="username">Janet Jolie</div>
+            </div>
+            <div class="user">
+              <img src="https://images.unsplash.com/photo-1546539782-6fc531453083?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" alt="" class="user-img">
+              <div class="username">Patrick Watsons</div>
+            </div>
+          </div>
+        </div>
+        <div class="timeline-right">
+          <div class="status box">
+            <div class="status-menu">
+              <a class="status-menu-item active" href="#">Status</a>
+              <a class="status-menu-item" href="#">Photos</a>
+              <a class="status-menu-item" href="#">Videos</a>
+            </div>
+            <div class="status-main">
+              <img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" class="status-img">
+              <textarea class="status-textarea" placeholder="Write something to Quan Ha.."></textarea>
+            </div>
+            <div class="status-actions">
+              <a href="#" class="status-action">
+                <svg viewBox="-42 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M333.7 123.3c0 33.9-12.2 63.2-36.2 87.2-24 24-53.3 36.1-87.1 36.1h-.1c-33.9 0-63.2-12.1-87.1-36.1-24-24-36.2-53.3-36.2-87.2 0-33.9 12.2-63.2 36.2-87.2 24-24 53.2-36 87-36.1h.2c33.8 0 63.2 12.2 87.1 36.1 24 24 36.2 53.3 36.2 87.2zm0 0" fill="#ffbb85" />
+                  <path d="M427.2 424c0 26.7-8.5 48.3-25.3 64.3-16.5 15.7-38.4 23.7-65 23.7H90.2c-26.6 0-48.5-8-65-23.7C8.5 472.3 0 450.7 0 423.9c0-10.2.3-20.4 1-30.2a302.7 302.7 0 0112.1-64.9c3.3-10.3 7.8-20.5 13.4-30.3 5.8-10.2 12.5-19 20.1-26.3a89 89 0 0129-18.2c11.2-4.4 23.7-6.7 37-6.7 5.2 0 10.3 2.2 20 8.5l21 13.5c6.6 4.3 15.7 8.3 27 11.9a107.7 107.7 0 0033 5.3c11 0 22-1.8 33-5.3 11.2-3.6 20.3-7.6 27-12l21-13.4c9.7-6.3 14.7-8.5 20-8.5 13.3 0 25.7 2.3 37 6.7a89 89 0 0128.9 18.2c7.6 7.3 14.4 16.1 20.2 26.3 5.5 9.8 10 20 13.3 30.3a305.5 305.5 0 0112.1 64.9c.7 9.8 1 20 1 30.2zm0 0" fill="#6aa9ff" />
+                  <path d="M210.4 246.6h-.1V0c34 0 63.3 12.2 87.2 36.1 24 24 36.2 53.3 36.2 87.2 0 33.9-12.2 63.2-36.2 87.2-24 24-53.3 36.1-87.1 36.1zm0 0" fill="#f5a86c" />
+                  <path d="M427.2 424c0 26.7-8.5 48.3-25.3 64.3-16.5 15.7-38.4 23.7-65 23.7H210.2V286.5h3.3c11 0 22-1.8 33-5.3 11.2-3.6 20.3-7.6 27-12l21-13.4c9.7-6.3 14.7-8.5 20-8.5 13.3 0 25.7 2.3 37 6.7a89 89 0 0128.9 18.2c7.6 7.3 14.4 16.1 20.2 26.3 5.5 9.8 10 20 13.3 30.3a305.5 305.5 0 0112.1 64.9c.7 9.8 1 20 1 30.2zm0 0" fill="#2682ff" />
+                </svg>
+                People
+              </a>
+              <a href="#" class="status-action">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                  <path d="M87.084 192c-.456-5.272-.688-10.6-.688-16C86.404 78.8 162.34 0 256.004 0s169.6 78.8 169.6 176c0 5.392-.232 10.728-.688 16h.688c0 96.184-169.6 320-169.6 320s-169.6-223.288-169.6-320h.68zm168.92 32c36.392 1.024 66.744-27.608 67.84-64-1.096-36.392-31.448-65.024-67.84-64-36.392-1.024-66.744 27.608-67.84 64 1.096 36.392 31.448 65.024 67.84 64z" fill="#e21b1b" />
+                </svg>
+                Check in
+              </a>
+              <a href="#" class="status-action">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                  <circle cx="256" cy="256" r="256" fill="#ffca28" />
+                  <g fill="#6d4c41">
+                    <path d="M399.68 208.32c-8.832 0-16-7.168-16-16 0-17.632-14.336-32-32-32s-32 14.368-32 32c0 8.832-7.168 16-16 16s-16-7.168-16-16c0-35.296 28.704-64 64-64s64 28.704 64 64c0 8.864-7.168 16-16 16zM207.68 208.32c-8.832 0-16-7.168-16-16 0-17.632-14.368-32-32-32s-32 14.368-32 32c0 8.832-7.168 16-16 16s-16-7.168-16-16c0-35.296 28.704-64 64-64s64 28.704 64 64c0 8.864-7.168 16-16 16z" />
+                  </g>
+                  <path d="M437.696 294.688c-3.04-4-7.744-6.368-12.736-6.368H86.4c-5.024 0-9.728 2.336-12.736 6.336-3.072 4.032-4.032 9.184-2.688 14.016C94.112 390.88 170.08 448.32 255.648 448.32s161.536-57.44 184.672-139.648c1.376-4.832.416-9.984-2.624-13.984z" fill="#fafafa" />
+                </svg>
+                Mood
+              </a>
+              <button class="status-share">Share</button>
+            </div>
+          </div>
+          <div class="album box">
+            <div class="status-main">
+              <img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" class="status-img" />
+              <div class="album-detail">
+                <div class="album-title"><strong>Quan Ha</strong> create new <span>album</span></div>
+                <div class="album-date">6 hours ago</div>
+              </div>
+              <button class="intro-menu"></button>
+            </div>
+            <div class="album-content">When the bass drops, so do my problems.
+              <div class="album-photos">
+                <img src="https://images.unsplash.com/photo-1508179719682-dbc62681c355?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2378&q=80" alt="" class="album-photo" />
+                <div class="album-right">
+                  <img src="https://images.unsplash.com/photo-1502872364588-894d7d6ddfab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="" class="album-photo" />
+                  <img src="https://images.unsplash.com/photo-1566737236500-c8ac43014a67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="" class="album-photo" />
+                </div>
+              </div>
+            </div>
+            <div class="album-actions">
+              <a href="#" class="album-action">
+                <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                  <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
+                </svg>
+                87
+              </a>
+              <a href="#" class="album-action">
+                <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
+                  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+                </svg>
+                20
+              </a>
+              <a href="#" class="album-action">
+                <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
+                  <path d="M17 1l4 4-4 4" />
+                  <path d="M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4" />
+                  <path d="M21 13v2a4 4 0 01-4 4H3" />
+                </svg>
+                13
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="right-side" :class="{ 'active': rightSide }">
+    <div class="account">
+      <button class="account-button">
+        <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
+          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+          <path d="M22 6l-10 7L2 6" />
+        </svg>
+      </button>
+      <button class="account-button">
+        <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
+          <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" />
+        </svg>
+      </button>
+      <span class="account-user">Quan Ha
+        <img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" alt="" class="account-profile" alt="">
+        <span>▼</span>
+      </span>
+    </div>
+    <div class="side-wrapper stories">
+      <div class="side-title">STORIES</div>
+      <div class="user">
+        <img src="https://pbs.twimg.com/profile_images/1102351320567164931/ZCkJgJIH.png" alt="" class="user-img">
+        <div class="username">Lisandro Matos
+          <div class="album-date">12 hours ago</div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://pbs.twimg.com/profile_images/1153966095444992000/1lpIyHaQ.jpg" alt="" class="user-img">
+        <div class="username">Gvozden Boskovsky
+          <div class="album-date">29 minutes ago</div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.unsplash.com/photo-1565464027194-7957a2295fb7?ixlib=rb-1.2.1&auto=format&fit=crop&w=3500&q=80" alt="" class="user-img">
+        <div class="username">Hnek Fortuin
+          <div class="album-date">3 hours ago</div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" alt="" class="user-img">
+        <div class="username">Lubomir Dvorak
+          <div class="album-date">18 hours ago</div>
+        </div>
+      </div>
+    </div>
+    <div class="side-wrapper contacts">
+      <div class="side-title">CONTACTS</div>
+      <div class="user">
+        <img src="https://randomuser.me/api/portraits/men/1.jpg" class="user-img">
+        <div class="username">Andrei Mashrin
+          <div class="user-status"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=046c29138c1335ef8edee7daf521ba50" class="user-img">
+        <div class="username">Aryn Jacobssen
+          <div class="user-status offline"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.unsplash.com/photo-1575084713138-342cae5f8d00?ixlib=rb-1.2.1&auto=format&fit=crop&w=958&q=80" class="user-img">
+        <div class="username">Carole Landu
+          <div class="user-status offline"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.pexels.com/photos/598745/pexels-photo-598745.jpeg?h=350&auto=compress&cs=tinysrgb" class="user-img">
+        <div class="username">Chineze Afa
+          <div class="user-status"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" class="user-img">
+        <div class="username">Mok Kwang
+          <div class="user-status"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://randomuser.me/api/portraits/women/63.jpg" class="user-img">
+        <div class="username">Naomi Yepes
+          <div class="user-status"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.unsplash.com/photo-1476493279419-b785d41e38d8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=61eaea85f1aa3d065400179c78163f15" class="user-img">
+        <div class="username">Shaamikh Ale
+          <div class="user-status"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://m.media-amazon.com/images/M/MV5BMjI4NDcyNjQxNl5BMl5BanBnXkFtZTgwMzI4OTM3NjM@._V1_UY256_CR13,0,172,256_AL_.jpg" class="user-img">
+        <div class="username">Sofia Alcocer
+          <div class="user-status idle"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.unsplash.com/photo-1509380836717-c4320ccf1a6f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=e01c8c45a063daaf6d6e571a32bd6c90" class="user-img">
+        <div class="username">Wen Yahui
+          <div class="user-status"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://pbs.twimg.com/profile_images/737221709267374081/sdwta9Oh.jpg" alt="" class="user-img">
+        <div class="username">Leslee Moss
+          <div class="user-status idle"></div>
+        </div>
+      </div>
+    </div>
+    <div class="search-bar right-search">
+      <input type="text" placeholder="Search" />
+      <div class="search-bar-svgs">
+        <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="3"/>
+          <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
+        </svg>
+        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.34 469.34">
+          <path d="M456.84 76.17l-64-64.06c-16.13-16.13-44.18-16.17-60.37.04L45.77 301.67a10.73 10.73 0 00-2.7 4.59L.41 455.73a10.68 10.68 0 0013.19 13.2l149.33-42.7c1.73-.5 3.3-1.42 4.58-2.7l289.33-286.98c8.06-8.07 12.5-18.78 12.5-30.19s-4.44-22.12-12.5-30.2zM285.99 89.74L325.25 129l-205 205-14.7-29.44a10.67 10.67 0 00-9.55-5.9H78.92L286 89.75zM26.2 443.14l13.9-48.64 34.74 34.74-48.64 13.9zm123.14-35.18L98.3 422.54l-51.5-51.5L61.38 320H89.4l18.38 36.77a10.67 10.67 0 004.77 4.77l36.78 18.39v28.03zm21.33-17.54v-17.09c0-4.04-2.28-7.72-5.9-9.54l-29.43-14.7 205-205 39.26 39.26-208.93 207.07zm271.11-268.7l-47.03 46.61L301 74.6l46.59-47c8.06-8.07 22.1-8.07 30.16 0l64 64c4.03 4.03 6.25 9.38 6.25 15.08s-2.22 11.05-6.22 15.05z" /></svg>
+        <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+      <path d="M12 5v14M5 12h14"/>
+    </svg>
+      </div>
+    </div>
+  </div>
+  <div class="overlay" @click="rightSide = false; leftSide = false" :class="{ 'active': rightSide || leftSide }"></div>
+</div>
+<!-- partial -->
+  <script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.4/dist/alpine.js'></script>
+</body>
+</html>
diff --git a/responsive-social-platform-ui/dist/style.css b/responsive-social-platform-ui/dist/style.css
new file mode 100644
index 0000000..42be17d
--- /dev/null
+++ b/responsive-social-platform-ui/dist/style.css
@@ -0,0 +1,918 @@
+@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700|Source+Sans+Pro:300,400,600,700&display=swap");
+* {
+  outline: none;
+  box-sizing: border-box;
+}
+
+html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  font-family: "Source Sans Pro", sans-serif;
+  background-color: #373e57;
+  color: #ccc8db;
+}
+
+.container {
+  background-color: #151728;
+  display: flex;
+  max-width: 1600px;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0 auto;
+}
+
+.left-side {
+  width: 260px;
+  border-right: 1px solid #272a3a;
+  display: flex;
+  flex-direction: column;
+  transition: 0.3s;
+  background-color: #151728;
+  overflow: auto;
+  flex-shrink: 0;
+}
+@media screen and (max-width: 930px) {
+  .left-side.active {
+    z-index: 4;
+  }
+  .left-side.active > *:not(.logo) {
+    opacity: 1;
+    transition: 0.3s 0.2s;
+  }
+  .left-side.active .left-side-button svg:first-child {
+    opacity: 0;
+  }
+  .left-side.active .left-side-button svg:last-child {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+  }
+  .left-side:not(.active) {
+    width: 56px;
+    overflow: hidden;
+  }
+  .left-side:not(.active) > *:not(.logo):not(.left-side-button) {
+    opacity: 0;
+  }
+  .left-side:not(.active) .logo {
+    writing-mode: vertical-lr;
+    transform: rotate(180deg);
+    transform-origin: bottom;
+    display: flex;
+    align-items: center;
+    margin-top: -10px;
+  }
+}
+
+.right-side {
+  width: 280px;
+  flex-shrink: 0;
+  margin-left: auto;
+  overflow: auto;
+  background-color: #151728;
+  display: flex;
+  flex-direction: column;
+}
+@media screen and (max-width: 1210px) {
+  .right-side {
+    position: fixed;
+    right: 0;
+    top: 0;
+    transition: 0.3s;
+    height: 100%;
+    transform: translateX(280px);
+    z-index: 4;
+  }
+  .right-side.active {
+    transform: translatex(0);
+  }
+}
+
+.main {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #181d2f;
+}
+
+.logo {
+  font-family: "DM Sans", sans-serif;
+  font-size: 15px;
+  color: #fff;
+  font-weight: 600;
+  text-align: center;
+  height: 68px;
+  line-height: 68px;
+  letter-spacing: 4px;
+  position: sticky;
+  top: 0;
+  background: linear-gradient(to bottom, #151728 0%, #151728 76%, rgba(21, 23, 40, 0) 100%);
+}
+
+.side-title {
+  font-family: "DM Sans", sans-serif;
+  color: #5c5e6e;
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+.side-wrapper {
+  padding: 30px;
+}
+
+.side-menu {
+  display: flex;
+  flex-direction: column;
+  font-size: 15px;
+  white-space: nowrap;
+}
+.side-menu svg {
+  margin-right: 16px;
+  width: 16px;
+}
+.side-menu a {
+  text-decoration: none;
+  color: #9c9cab;
+  display: flex;
+  align-items: center;
+}
+.side-menu a:hover {
+  color: #fff;
+}
+.side-menu a:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+.follow-me {
+  text-decoration: none;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  margin-top: auto;
+  overflow: hidden;
+  color: #9c9cab;
+  padding: 0 20px;
+  height: 52px;
+  flex-shrink: 0;
+  border-top: 1px solid #272a3a;
+  position: relative;
+}
+.follow-me svg {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+}
+
+.follow-text {
+  display: flex;
+  align-items: center;
+  transition: 0.3s;
+}
+
+.follow-me:hover .follow-text {
+  transform: translateY(100%);
+}
+.follow-me:hover .developer {
+  top: 0;
+}
+
+.developer {
+  position: absolute;
+  color: #fff;
+  left: 0;
+  top: -100%;
+  display: flex;
+  transition: 0.3s;
+  padding: 0 20px;
+  align-items: center;
+  background-color: #272a3a;
+  width: 100%;
+  height: 100%;
+}
+
+.developer img {
+  border-radius: 50%;
+  width: 26px;
+  height: 26px;
+  object-fit: cover;
+  margin-right: 10px;
+}
+
+.search-bar {
+  height: 60px;
+  background-color: #151728;
+  z-index: 3;
+  position: relative;
+}
+.search-bar input {
+  height: 100%;
+  width: 100%;
+  display: block;
+  background-color: transparent;
+  border: none;
+  padding: 0 54px;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3e%3cpath d='M508.9 478.7L360 330a201.6 201.6 0 0045.2-127.3C405.3 90.9 314.4 0 202.7 0S0 91 0 202.7s91 202.6 202.7 202.6c48.2 0 92.4-17 127.3-45.2L478.7 509c4.2 4.1 11 4.1 15 0l15.2-15.1c4.1-4.2 4.1-11 0-15zm-306.2-116c-88.3 0-160-71.8-160-160s71.7-160 160-160 160 71.7 160 160-71.8 160-160 160z' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%235C5D71'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-size: 16px;
+  background-position: 25px 50%;
+  color: #fff;
+  font-family: "Source Sans Pro", sans-serif;
+  font-weight: 600;
+}
+.search-bar input::placeholder {
+  color: #5c5d71;
+}
+
+.main-container {
+  padding: 20px;
+  flex-grow: 1;
+  overflow: auto;
+  background-color: #24273b;
+}
+
+.profile {
+  position: relative;
+  height: 40vh;
+  min-height: 250px;
+  max-height: 350px;
+  z-index: 1;
+}
+.profile-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 4px;
+}
+.profile:before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  top: 0;
+  background-image: url("https://images.unsplash.com/photo-1508247967583-7d982ea01526?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  filter: blur(50px);
+  opacity: 0.7;
+}
+
+.profile-menu {
+  position: absolute;
+  bottom: 0;
+  padding-left: 200px;
+  background: #151728;
+  width: 100%;
+  display: flex;
+  border-radius: 0 0 4px 4px;
+}
+
+.profile-menu-link {
+  padding: 20px 16px;
+  color: #5c5e6e;
+  transition: 0.3s;
+  cursor: pointer;
+}
+.profile-menu-link.active, .profile-menu-link:hover {
+  color: #fff;
+  background-color: #1b1d2e;
+  border-bottom: 3px solid #1488fa;
+}
+
+.profile-avatar {
+  position: absolute;
+  align-items: center;
+  display: flex;
+  z-index: 1;
+  bottom: 16px;
+  left: 24px;
+}
+
+.profile-img {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid #151728;
+}
+
+.profile-name {
+  margin-left: 24px;
+  margin-bottom: 24px;
+  font-size: 22px;
+  color: #fff;
+  font-weight: 600;
+  font-family: "DM Sans", sans-serif;
+}
+
+.timeline {
+  display: flex;
+  padding-top: 20px;
+  position: relative;
+  z-index: 2;
+}
+.timeline-left {
+  width: 310px;
+  flex-shrink: 0;
+}
+.timeline-right {
+  flex-grow: 1;
+  padding-left: 20px;
+}
+@media screen and (max-width: 768px) {
+  .timeline {
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+  }
+  .timeline-right {
+    padding-left: 0;
+    margin-bottom: 20px;
+  }
+  .timeline-left {
+    width: 100%;
+  }
+}
+
+.box {
+  background-color: #151728;
+  border-radius: 4px;
+}
+
+.intro {
+  padding: 20px;
+}
+.intro-title {
+  font-family: "DM Sans", sans-serif;
+  color: #5c5e6e;
+  font-weight: 600;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.intro-menu {
+  background-color: #8f98a9;
+  box-shadow: -8px 0 0 0 #8f98a9, 8px 0 0 0 #8f98a9;
+  width: 5px;
+  height: 5px;
+  border: 0;
+  padding: 0;
+  border-radius: 50%;
+  margin-left: auto;
+  margin-right: 8px;
+}
+
+.info {
+  font-size: 15px;
+}
+.info-item {
+  display: flex;
+  color: #c3c5d5;
+}
+.info-item + .info-item {
+  margin-top: 14px;
+}
+.info-item a {
+  margin-left: 6px;
+  color: #1771d6;
+  text-decoration: none;
+}
+.info-item svg {
+  width: 16px;
+  margin-right: 10px;
+}
+
+.event {
+  position: relative;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.event-wrapper {
+  position: relative;
+}
+
+.event-img {
+  max-width: 100%;
+  display: block;
+  padding-bottom: 12px;
+}
+
+.event-date {
+  position: absolute;
+  left: 20px;
+  top: 15px;
+}
+
+.event-month {
+  background-color: #1687fa;
+  padding: 7px 20px;
+  font-weight: 600;
+  font-family: "DM Sans", sans-serif;
+  color: #fff;
+  text-align: center;
+  border-radius: 4px 4px 0 0;
+}
+
+.event-day {
+  width: 100%;
+  backdrop-filter: blur(4px);
+  color: #fff;
+  font-size: 22px;
+  font-weight: 600;
+  font-family: "DM Sans", sans-serif;
+  background-color: rgba(0, 0, 0, 0.4);
+  padding: 6px 0;
+  text-align: center;
+}
+
+.event-title {
+  color: #c3c5d5;
+  margin-bottom: 5px;
+  font-family: "DM Sans", sans-serif;
+  font-weight: 600;
+  padding: 0 14px;
+}
+
+.event-subtitle {
+  color: #5c5e6e;
+  font-family: "DM Sans", sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 0 14px;
+}
+
+.pages {
+  margin-top: 20px;
+  padding: 20px;
+}
+
+.user {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.user + .user {
+  margin-top: 18px;
+}
+
+.user-img {
+  border-radius: 50%;
+  width: 45px;
+  height: 45px;
+  margin-right: 15px;
+  object-fit: cover;
+  object-position: center;
+}
+
+.username {
+  font-size: 15px;
+  font-family: "DM Sans", sans-serif;
+}
+
+.status-menu {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+}
+.status-menu-item {
+  text-decoration: none;
+  color: #ccc8db;
+  padding: 10px 14px;
+  line-height: 0.7;
+  font-family: "DM Sans", sans-serif;
+  font-weight: 500;
+  border-radius: 20px;
+}
+.status-menu-item.active, .status-menu-item:hover {
+  background-color: #2e2e40;
+  color: #fff;
+}
+.status-menu-item + .status-menu-item {
+  margin-left: 10px;
+}
+@media screen and (max-width: 500px) {
+  .status-menu {
+    font-size: 14px;
+  }
+  .status-menu-item + .status-menu-item {
+    margin-left: 0;
+  }
+}
+
+.status-img {
+  width: 50px;
+  height: 50px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin-right: 20px;
+}
+
+.status-main {
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #272a3a;
+  padding-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.status-textarea {
+  flex-grow: 1;
+  background-color: transparent;
+  border: none;
+  resize: none;
+  margin-top: 15px;
+  color: #fff;
+  max-width: calc(100% - 70px);
+}
+.status-textarea::placeholder {
+  color: #5c5d71;
+}
+
+.status-actions {
+  display: flex;
+  padding: 10px 20px;
+}
+
+.status-action {
+  text-decoration: none;
+  color: #ccc8db;
+  margin-right: 20px;
+  display: flex;
+  align-items: center;
+}
+.status-action svg {
+  width: 16px;
+  flex-shrink: 0;
+  margin-right: 8px;
+}
+@media screen and (max-width: 1320px) {
+  .status-action {
+    width: 16px;
+    overflow: hidden;
+    color: transparent;
+    white-space: nowrap;
+  }
+}
+
+.status-share {
+  background-color: #1b86f9;
+  border: none;
+  color: #fff;
+  border-radius: 4px;
+  padding: 10px 20px;
+  margin-left: auto;
+  box-shadow: 0 0 20px #1b86f9;
+  cursor: pointer;
+}
+
+.album {
+  padding-top: 20px;
+  margin-top: 20px;
+}
+.album .status-main {
+  border: none;
+  display: flex;
+}
+.album .intro-menu {
+  margin-bottom: auto;
+  margin-top: 5px;
+}
+
+.album-detail {
+  width: calc(100% - 110px);
+}
+
+.album-title span {
+  color: #1771d6;
+  cursor: pointer;
+}
+
+.album-date {
+  font-size: 15px;
+  color: #595c6c;
+  margin-top: 4px;
+}
+
+.album-content {
+  padding: 0 20px 20px;
+}
+
+.album-photo {
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 4px;
+  margin-top: 10px;
+}
+
+.album-photos {
+  display: flex;
+  margin-top: 20px;
+  max-height: 30vh;
+}
+
+.album-photos > .album-photo {
+  width: 50%;
+}
+
+.album-right {
+  width: 50%;
+  margin-left: 10px;
+  line-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.album-right .album-photo {
+  height: calc(50% - 10px);
+}
+
+.album-actions {
+  padding: 0 20px 20px;
+}
+
+.album-action {
+  margin-right: 20px;
+  text-decoration: none;
+  color: #a2a4b4;
+  display: inline-flex;
+  align-items: center;
+  font-weight: 600;
+}
+.album-action:hover {
+  color: #fff;
+}
+.album-action svg {
+  width: 16px;
+  margin-right: 6px;
+}
+
+.account-button {
+  border: 0;
+  background: 0;
+  color: #64677a;
+  padding: 0;
+  cursor: pointer;
+  position: relative;
+}
+
+.account-button svg {
+  width: 20px;
+}
+
+.account-button:not(.right-side-button) + .account-button:before {
+  position: absolute;
+  right: 0px;
+  top: -2px;
+  background-color: #1b86f8;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  content: "";
+  border: 2px solid #151728;
+}
+
+.account-profile {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  margin: 0 10px;
+}
+
+.account-user {
+  display: inline-flex;
+  align-items: center;
+  color: #64677a;
+  font-weight: 600;
+}
+.account-user span {
+  font-size: 10px;
+  font-weight: normal;
+}
+
+.account {
+  height: 60px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  background-color: #151728;
+  z-index: 3;
+  flex-shrink: 0;
+}
+
+.stories {
+  border-bottom: 1px solid #272a3a;
+}
+
+.stories .user-img {
+  border: 2px solid #e2b96c;
+}
+
+.stories .album-date {
+  font-family: "Source Sans Pro", sans-serif;
+}
+
+.user-status {
+  background-color: #7fd222;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-left: auto;
+}
+.user-status.offline {
+  background-color: #606a8d;
+}
+.user-status.idle {
+  background-color: #dd1c20;
+}
+
+.contacts .username {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
+.right-search svg {
+  width: 16px;
+  height: 16px;
+}
+
+.right-search {
+  padding-right: 10px;
+  display: flex;
+  align-items: center;
+  border-top: 1px solid #272a3a;
+  position: sticky;
+  bottom: 0;
+  margin-top: auto;
+}
+
+.right-search input {
+  padding-right: 10px;
+}
+
+.search-bar-svgs {
+  color: #656679;
+  display: flex;
+}
+
+.search-bar-svgs svg {
+  margin-right: 16px;
+}
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(36, 39, 59, 0.8);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: 0.3s;
+}
+@media screen and (max-width: 1210px) {
+  .overlay.active {
+    z-index: 3;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: all;
+  }
+}
+
+.right-side-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  border: 0;
+  width: 52px;
+  background-color: #1e2031;
+  border-left: 1px solid #272a3a;
+  color: #fff;
+  display: none;
+  cursor: pointer;
+}
+.right-side-button:before {
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  position: absolute;
+  background-color: #1b86f8;
+  border: 2px solid #1e2031;
+  top: 13px;
+  right: 12px;
+}
+.right-side-button svg {
+  width: 22px;
+}
+@media screen and (max-width: 1210px) {
+  .right-side-button {
+    display: block;
+  }
+}
+
+.left-side-button {
+  display: none;
+}
+@media screen and (max-width: 930px) {
+  .left-side-button {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    height: 60px;
+    background-color: rgba(39, 42, 58, 0.5);
+    border: 0;
+    padding: 0;
+    line-height: 0;
+    color: #fff;
+    border-bottom: 1px solid #272a3a;
+  }
+  .left-side-button svg {
+    transition: 0.2s;
+    width: 24px;
+  }
+  .left-side-button svg:last-child {
+    position: absolute;
+    left: 50%;
+    transform: translate(100%, -50%);
+    top: 50%;
+    opacity: 0;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .profile-avatar {
+    top: -25px;
+    left: 50%;
+    transform: translatex(-50%);
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .profile-img {
+    height: 100px;
+    width: 100px;
+  }
+
+  .profile-name {
+    margin: 5px 0;
+  }
+
+  .profile-menu {
+    padding-left: 0;
+    width: 100%;
+    overflow: auto;
+    justify-content: center;
+  }
+
+  .profile-menu-link {
+    padding: 16px;
+    font-size: 15px;
+  }
+}
+@media screen and (max-width: 480px) {
+  .profile-menu-link:nth-last-child(1),
+.profile-menu-link:nth-last-child(2) {
+    display: none;
+  }
+}
+::-webkit-scrollbar {
+  width: 10px;
+  border-radius: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.01);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.11);
+  border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
\ No newline at end of file
diff --git a/responsive-social-platform-ui/license.txt b/responsive-social-platform-ui/license.txt
new file mode 100644
index 0000000..e64a6ad
--- /dev/null
+++ b/responsive-social-platform-ui/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Aysenur Turk (https://codepen.io/TurkAysenur/pen/RwWKYMO)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/responsive-social-platform-ui/src/index.html b/responsive-social-platform-ui/src/index.html
new file mode 100644
index 0000000..7ff1c9b
--- /dev/null
+++ b/responsive-social-platform-ui/src/index.html
@@ -0,0 +1,505 @@
+<div class="container" x-data="{ rightSide: false, leftSide: false }">
+  <div class="left-side" :class="{'active' : leftSide}">
+    <div class="left-side-button" @click="leftSide = !leftSide">
+      <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+      <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+  <path d="M19 12H5M12 19l-7-7 7-7"/>
+</svg>
+    </div>
+    <div class="logo">ULTRANET</div>
+    <div class="side-wrapper">
+      <div class="side-title">MENU</div>
+      <div class="side-menu">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+            <path d="M9 22V12h6v10" />
+          </svg>
+          Home
+        </a>
+        <a href="#">
+          <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+          </svg>
+          Latest News
+        </a>
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+            <circle cx="12" cy="10" r="3" /></svg>
+          Explore
+        </a>
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+            <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
+          </svg>
+          Files
+        </a>
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+            <circle cx="8.5" cy="8.5" r="1.5" />
+            <path d="M21 15l-5-5L5 21" />
+          </svg>
+          Galery
+        </a>
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+            <path d="M16 2v4M8 2v4M3 10h18" />
+          </svg>
+          Events
+        </a>
+      </div>
+    </div>
+    <div class="side-wrapper">
+      <div class="side-title">YOUR FAVOURITE</div>
+      <div class="side-menu">
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 472.11 472.11">
+            <path d="M260.07 216.11a63.94 63.94 0 00-28.26-53.1 55.95 55.95 0 00-43.74-90.9c-.8 0-1.6.1-2.4.12a56 56 0 10-107.2 0c-.8 0-1.6-.12-2.4-.12a55.95 55.95 0 00-43.75 90.9 64 64 0 000 106.2 55.95 55.95 0 0043.75 90.9h112a55.95 55.95 0 0043.74-90.9 63.94 63.94 0 0028.26-53.1z" fill="#6a9923" />
+            <path d="M193.8 178.51a8 8 0 00-11.32-.16l-42.41 41.03V104.1a8 8 0 00-16 0v56.7l-36.35-36.35a8 8 0 00-11.31 11.3l47.66 47.67V292.8l-34.35-34.34a8 8 0 00-11.31 11.3l45.66 45.67V464.1a8 8 0 0016 0V241.63l53.6-51.78a8 8 0 00.12-11.34z" fill="#618c20" />
+            <path d="M468.07 216.11a63.94 63.94 0 00-28.26-53.1 55.95 55.95 0 00-43.74-90.9c-.8 0-1.6.1-2.4.12a56 56 0 10-107.2 0c-.8 0-1.6-.12-2.4-.12a55.95 55.95 0 00-43.75 90.9 64 64 0 000 106.2 55.95 55.95 0 0043.75 90.9h112a55.95 55.95 0 0043.74-90.9 63.94 63.94 0 0028.26-53.1z" fill="#6a9923" />
+            <path d="M401.72 178.46a8 8 0 00-11.31 0l-42.34 42.34V104.11a8 8 0 00-16 0v56.7l-36.35-36.35a8 8 0 00-11.31 11.3l47.66 47.67V292.8l-34.35-34.34a8 8 0 00-11.31 11.3l45.66 45.67V464.1a8 8 0 0016 0V242.87c.6-.3 1.15-.66 1.65-1.1l52-52a8 8 0 000-11.31z" fill="#618c20" />
+            <path d="M364.07 216.11a63.94 63.94 0 00-28.26-53.1 55.95 55.95 0 00-43.74-90.9c-.8 0-1.6.1-2.4.12a56 56 0 10-107.2 0c-.8 0-1.6-.12-2.4-.12a55.95 55.95 0 00-43.75 90.9 64 64 0 000 106.2 55.95 55.95 0 0043.75 90.9h112a55.95 55.95 0 0043.74-90.9 63.94 63.94 0 0028.26-53.1z" fill="#88b337" />
+            <path d="M297.72 178.46a8 8 0 00-11.31 0l-42.34 42.34V104.11a8 8 0 00-16 0v56.7l-36.35-36.35a8 8 0 00-11.31 11.3l47.66 47.67V292.8l-34.35-34.34a8 8 0 00-11.31 11.3l45.66 45.67V464.1a8 8 0 0016 0V242.87c.6-.3 1.15-.66 1.65-1.1l52-52a8 8 0 000-11.31z" fill="#6a9923" />
+            <path d="M372.07 472.11h-272a8 8 0 010-16h272a8 8 0 010 16z" fill="#595959" /></svg>
+          Foresto
+        </a>
+        <a href="#">
+          <svg viewBox="0 0 56 58" width="512" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" transform="translate(0 -1)">
+              <path d="M46.8 48.4a30.5 30.5 0 01-8.8-24l6.9-12C44.4 9.6 41.6 1 28 1A32 32 0 003.4 13.5a.2.2 0 00.2.4l2.5-.5a.5.5 0 01.4.8 14.2 14.2 0 00-3.3 4.3.2.2 0 00.3.4l2.5-.6a.5.5 0 01.6.6C5 22.5-.4 37.1.9 56.8a.5.5 0 00.9.2c2.2-3.3 5-6.2 8.4-8.3a.5.5 0 01.7.4c0 2.4.8 4.7 2.4 6.4a.5.5 0 001-.1 14 14 0 015.4-8h.5c1.7 1.2 3 3.8 3.6 5.8.5 1.8 1 3.6 1.1 5.4a.5.5 0 00.8.4c7-4 7.1-8.5 7.2-8.6a.5.5 0 01.9-.2c1.4 1.6 2.7 3.4 3.7 5.2a.5.5 0 001 0c.8-2 1.3-4.3 1.5-6.6l6.4.5a.5.5 0 00.4-1z" fill="#f9eab0" />
+              <path d="M44.5 49c-4.8-.4-4.3-.3-5.6-.6a.5.5 0 00-.5.5c-.2 2-.6 4-1.2 5.9-1-1.7-2.2-3.2-3.4-4.7a.5.5 0 00-.9.2v.1c-.7 4.4-5.4 7.5-7.2 8.5a.5.5 0 01-.8-.4c-.4-3.6-1.6-8.8-4.6-11a.5.5 0 00-.6 0 14 14 0 00-5.5 7.9c-1.3-1.8-2-4-2-6.2a.5.5 0 00-.6-.4l-.7.4a.5.5 0 00-.7-.4c-2.7 1.7-5 3.9-7 6.4a91.2 91.2 0 015-36.8.5.5 0 00-.4-.1l-1.2.3c-.1-.2-.4-.4-.6-.3l-.7.1c.8-1.5 1.8-3 3-4.2.4-.3 0-1-.4-.8l-1.2.2c0-.2-.3-.3-.5-.2l-.7.1c.4-.4 6.8-10.3 18.4-12.2a27 27 0 013.9-.3c12 0 14.5 8.7 15 11.3l-6.2 12a32.6 32.6 0 007.9 24c.2.3.2.6 0 .8z" fill="#f5efca" />
+              <path d="M27.8 1z" fill="#ecf0f1" />
+              <path d="M53 29c.1-1.8-.5-3.6-1.8-5-1.5-1.6-4.2-3-9.2-3-12 0-13 2-13 2s0-3.8 10-6.7c.5-.2.8-.6.8-1.1-.1-1 .2-2.1.9-2.9.2-.2.5-.3.8-.3 1.7 0 8 .4 10.5 3 3 3 5 7 1 14z" fill="#f0c419" />
+              <path d="M51.2 24c-4.5 5.2-3.8-1.8-19.2 1 0 0-3 0-3-2 0 0 1-2 13-2 5 0 7.7 1.4 9.2 3z" fill="#f29c1f" />
+              <path d="M32 12.3a3 3 0 11-3.5-2.3z" fill="#f0c419" />
+              <path d="M44 18a1 1 0 010-2c.5-.1 1-.3 1.3-.7a1 1 0 011.4 1.4C46 17.4 45 18 44 18z" fill="#e57e25" />
+              <circle cx="29" cy="13" fill="#393f4a" r="2" />
+              <path d="M34.6 14c-2 0-3.8-.9-5.2-2.2a4 4 0 00-3.4-1.1c-2 .4-3.1 2.7-3.1 2.8a1 1 0 01-1.8-1s1.6-3.1 4.5-3.8c1.8-.3 3.6.3 5 1.5 2.1 1.8 3.6 2 4.4 1.9.4-.1.8-.3 1.1-.6a1 1 0 011.7 1c-.8 1-2 1.6-3.2 1.6z" fill="#7f6e5d" />
+            </g>
+          </svg>
+          Birds
+        </a>
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path d="M339.4 346.5a636.5 636.5 0 00-46.7-140.2 8.4 8.4 0 00-7.6-4.8h-21a8.4 8.4 0 00-8 11 662.9 662.9 0 0129 289.7 8.4 8.4 0 008.4 9.5h50.3c4.4 0 8.1-3.6 8.3-8 2.3-52.8-2-105.6-12.7-157.2z" fill="#ff9940" />
+            <g fill="#f5760f">
+              <path d="M300.7 508.8a8.4 8.4 0 01-2-6.6 662.7 662.7 0 00-29-289.7 8.4 8.4 0 018-11H264a8.4 8.4 0 00-8 11 662.9 662.9 0 0129 289.7 8.4 8.4 0 008.4 9.5H307c-2.4 0-4.7-1-6.3-2.9z" />
+              <path d="M331.2 312.2l-48.8 9.1c.9 5.6 1.7 11.1 2.4 16.7l50.6-9.5c-1.3-5.5-2.7-10.9-4.2-16.3zM288 369.2l1.1 16.7h57.2a641 641 0 00-2.6-16.7H288z" />
+            </g>
+            <path d="M499.7 157.8A125.9 125.9 0 00276.9 212a8.4 8.4 0 0010.2 9.7L495 171a8.5 8.5 0 004.6-13.3z" fill="#a4d64d" />
+            <path d="M351.1 2.9a8.4 8.4 0 00-7.5-2.8 125.9 125.9 0 00-93 185c7.4 13.4 17 25.2 28.6 35.1a8.4 8.4 0 0013.5-4l60.1-205.5c.8-2.7.2-5.6-1.7-7.8z" fill="#8ec42f" />
+            <g fill="#a4d64d">
+              <path d="M327 199.3c-15.3-.3-30.3 2.1-44.7 7.2a8.4 8.4 0 00-3.3 13.7l148 154.7a8.5 8.5 0 0013.8-2.6 125.9 125.9 0 00-113.7-173z" />
+              <path d="M293.3 212.1a125.9 125.9 0 00-222.8-54.3A8.5 8.5 0 0075 171l208 50.7a8.4 8.4 0 0010.2-9.7z" />
+            </g>
+            <path d="M293.2 212.5c-.6-2.8-2.6-5-5.3-6a125.9 125.9 0 00-158.5 165.8c2.2 5.5 9.7 7 13.8 2.6l148-154.7c2-2 2.7-5 2-7.7z" fill="#8ec42f" />
+            <path d="M491.7 496.5c-71.3-45-153.8-68.7-238.6-68.7S86 451.6 14.5 496.5A8.4 8.4 0 0019 512h468.3a8.4 8.4 0 004.4-15.5z" fill="#ffd042" />
+            <path d="M35.5 506c-1-3.6.4-7.5 3.6-9.5A447 447 0 01265.4 428l-12.3-.2a447.2 447.2 0 00-238.6 68.7A8.4 8.4 0 0019 512h24.6c-3.8 0-7-2.5-8-6z" fill="#ffc412" />
+            <circle cx="290.8" cy="218.3" r="29.3" fill="#a4a09a" />
+            <path d="M299.2 239.2a29.3 29.3 0 01-24.5-45.4 29.3 29.3 0 1040.7 40.6c-4.7 3-10.2 4.8-16.2 4.8z" fill="#928d86" />
+            <circle cx="316" cy="256" r="29.3" fill="#a4a09a" />
+            <path d="M324.4 281.1a29.3 29.3 0 01-17.1-53.1 29.4 29.4 0 1025.8 51.8c-2.8.9-5.7 1.3-8.7 1.3z" fill="#928d86" />
+            <circle cx="261.5" cy="256" r="29.3" fill="#a4a09a" />
+            <path d="M269.9 277a29.3 29.3 0 01-24.5-45.5A29.3 29.3 0 10286 272c-4.6 3-10.2 4.9-16.1 4.9z" fill="#928d86" />
+            <g fill="#ffb266">
+              <circle cx="274.1" cy="473.9" r="8.4" />
+              <circle cx="378.9" cy="482.3" r="8.4" />
+              <circle cx="328.6" cy="465.6" r="8.4" />
+              <circle cx="223.8" cy="457.2" r="8.4" />
+              <circle cx="202.8" cy="482.3" r="8.4" />
+              <circle cx="144.2" cy="482.3" r="8.4" />
+            </g>
+          </svg>
+          Nature
+        </a>
+        <a href="#"><svg viewBox="0 0 511.4 511.4" width="512" xmlns="http://www.w3.org/2000/svg">
+            <path d="M102.8 145c-47.5 0-86 38.6-86 86v29.3h168.6V145z" fill="#0dca71" />
+            <path d="M432.9 377.8l-43-70.8-95.1 60.2 84 144.2 25.2-15.3a86.2 86.2 0 0028.9-118.3z" fill="#0cba68" />
+            <path d="M121.6 307l-43 70.8a86.2 86.2 0 0028.8 118.3l25.3 15.3 84-144.2z" fill="#0dca71" />
+            <path d="M408.6 145H326v115.3h168.7v-29.2c0-47.5-38.6-86.1-86-86.1z" fill="#0cba68" />
+            <path d="M345.9 90.2A90.3 90.3 0 00255.7 0L245 85.3l10.7 82.1H346V90.2z" fill="#0cba68" />
+            <path d="M255.7 0a90.3 90.3 0 00-90.2 90.2v77.2h90.2z" fill="#0dca71" />
+            <g>
+              <path d="M420 269.3c0-62.4-31.7-117.1-79.2-147.4l-85 147.4z" fill="#ebb65b" />
+              <path d="M255.7 269.3L340.8 122c-24.8-15.8-54-25-85-25L245 160z" fill="#fdd278" />
+              <path d="M91.4 269.3h164.3l-85-147.4a174.3 174.3 0 00-79.3 147.4z" fill="#ffc663" />
+              <path d="M255.7 97c-31.1 0-60.2 9.1-85 25l85 147.3z" fill="#ffe7ab" />
+              <path d="M255.7 269.3L245 384l10.7 57.7c31.1 0 60.3-9.2 85.1-25z" fill="#ebb65b" />
+              <path d="M255.7 269.3l85.1 147.4c47.5-30.2 79.2-85 79.2-147.4z" fill="#fdd278" />
+              <path d="M170.6 416.7c24.9 15.8 54 25 85.1 25V269.3z" fill="#ffc663" />
+              <path d="M255.7 269.3H91.4c0 62.4 31.8 117.2 79.2 147.4z" fill="#ffe7ab" />
+              <path d="M337 269.3L296.4 199h-40.7L245 266.7l10.7 73h40.7z" fill="#ffe5a5" />
+              <path d="M215 198.9l-40.6 70.4 40.7 70.5h40.6V198.9z" fill="#fffaed" />
+            </g>
+          </svg>
+          Animals
+        </a>
+        <a href="#">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path d="M176.6 360l-51.1-24.2-26-12.3L155.1 187l35.5-8.8s-58 97.4-14 181.9z" fill="#f8b40e" />
+            <path d="M488.8 330.5v-62.4c0-5-4-9-9-9h-25.7c-5 0-9 4-9 9v22.5" fill="#f2171c" />
+            <path d="M464.7 330.5v-71.3H454c-5 0-9 4-9 8.9v22.5" fill="#d8131e" />
+            <path d="M225.8 266.7a60.1 60.1 0 110 120.2l42 22.6 141.3-15 14.6-127.8-190.4-15" fill="#bf8104" />
+            <path d="M130.2 107.4H175a39.8 39.8 0 110 79.7h-44.8a8.1 8.1 0 01-8.1-8.2v-63.4c0-4.5 3.6-8.1 8-8.1z" fill="#f8b40e" />
+            <path d="M175 170.8h-53v8.1c0 4.5 3.7 8.1 8.2 8.1H175a40 40 0 0039-48 39.8 39.8 0 01-39 31.8z" fill="#dd9b0a" />
+            <path fill="#f8b40e" d="M356.5 423H143.1v-36h183.8" />
+            <circle cx="415.1" cy="423" r="78.2" fill="#2c4046" />
+            <path fill="#dd9b0a" d="M167.5 187l-64.9 173.8-3-37.3L155 187z" />
+            <circle cx="415.1" cy="423" r="42.8" fill="#9aa7b8" />
+            <circle cx="99.5" cy="423" r="78.2" fill="#2c4046" />
+            <circle cx="99.5" cy="423" r="42.8" fill="#9aa7b8" />
+            <path d="M99.5 473.6C71.6 473.6 49 451 49 423h15.7a35 35 0 0069.8 0h15.7c0 28-22.7 50.6-50.6 50.6z" fill="#1d2c30" />
+            <path d="M343.6 423A78.8 78.8 0 01381 274.7c42 0 125 22.2 131 135.1.4 7.2-5.3 13.2-12.4 13.2h-156z" fill="#f8b40e" />
+            <path d="M327.6 365.6a78.9 78.9 0 0179-79c12.4 0 28.6 2 45.2 7.8a138.7 138.7 0 00-70.8-19.7A78.9 78.9 0 00343.6 423h8.8a78.7 78.7 0 01-24.8-57.4z" fill="#dd9b0a" />
+            <path d="M199 423a99.5 99.5 0 00-199 0h199z" fill="#f8b40e" />
+            <path d="M116 324.9A99.5 99.5 0 000 423h33a99.5 99.5 0 0183-98.1z" fill="#dd9b0a" />
+            <path d="M415.1 473.6c-27.9 0-50.6-22.7-50.6-50.6h15.7a35 35 0 0069.8 0h15.8c0 28-22.8 50.6-50.7 50.6z" fill="#1d2c30" />
+            <path d="M146.1 107.4h-16a8.1 8.1 0 00-8 8V179c0 4.5 3.6 8.1 8 8.1h16v-79.6z" fill="#a0d9f2" />
+            <path d="M146.1 170.8h-24v8.1c0 4.5 3.6 8.1 8 8.1h16v-16.2z" fill="#84bed3" />
+            <path d="M394.9 222.4l-153 10.8a33.6 33.6 0 00-31.2 33.5h213v-17.4a27 27 0 00-28.8-26.9z" fill="#444d56" />
+            <path fill="#d3d3d3" d="M183.9 65.5h15.7v77.2h-15.7z" />
+            <g fill="#dd9b0a">
+              <path d="M452.2 337.4h-76.6a7.9 7.9 0 010-15.8h76.6a7.9 7.9 0 010 15.8zM432.2 362.7h-56.6a7.9 7.9 0 010-15.7h56.6a7.9 7.9 0 010 15.7zM412.1 387.8h-36.5a7.9 7.9 0 010-15.7H412a7.9 7.9 0 010 15.7z" />
+            </g>
+            <circle cx="191.8" cy="147.2" r="23.1" fill="#444d56" />
+            <path d="M191.8 84c-8 0-14.3-6.4-14.3-14.2V25a14.3 14.3 0 1128.6 0v44.6c0 8-6.5 14.3-14.3 14.3z" fill="#e6e6e6" />
+          </svg>
+          Motobike
+        </a>
+        <a href="#">
+          <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+            <path d="M424 101l-8 25v6l16 21c3 4 0 9-4 9h-27l-5 2-15 22c-3 4-9 3-10-2l-8-25-4-4-25-8c-5-1-6-7-2-10l22-15 2-5V90c0-4 5-7 9-4l21 16h6l25-8c4-2 9 3 7 7z" fill="#fe9901" />
+            <path d="M428 162h-27l-5 2-15 22c-3 4-9 3-10-2l-5-15 2-2 16-23 5-2h28c2 0 4-1 5-3l10 14c3 4 0 9-4 9z" fill="#fb8801" />
+            <circle cx="438.8" cy="403.5" fill="#60b7ff" r="23.4" />
+            <path d="M462 403a23 23 0 11-46-2c4 4 9 7 16 7 12 0 22-10 23-21 4 4 7 10 7 16z" fill="#26a6fe" />
+            <path d="M24 511l321-137-101-100-100-101L7 494c-4 11 6 21 17 17z" fill="#fe7d43" />
+            <path d="M345 374L24 511c-11 4-21-6-17-17 3 1 5 0 8-1l315-134z" fill="#fd6930" />
+            <g fill="#7acaa6">
+              <path d="M47 401l95 60-54 22-60-37zM84 315l162 101-54 23-128-80zM120 229l210 131 15 14-49 21-195-122z" />
+            </g>
+            <g fill="#57be92">
+              <path d="M142 461l-54 22-20-12 54-23zM246 416l-54 23-20-13 54-23zM345 374l-49 21-20-13 53-23 1 1z" />
+            </g>
+            <path d="M136 4c-6 11-18 33-38 41-3 1-3 5 0 7 20 8 32 29 38 41 1 2 4 2 6 0 5-12 18-33 37-41 3-2 3-6 0-7-19-8-32-30-37-41-2-2-5-2-6 0z" fill="#fe9901" />
+            <path d="M179 52c-19 8-32 29-37 41-2 2-5 2-6 0l-9-15a87 87 0 0139-41l13 8c3 1 3 5 0 7z" fill="#fb8801" />
+            <path d="M345 426c-4 9-14 26-30 33-2 1-2 4 0 5 16 7 26 24 30 33 1 2 4 2 5 0 5-9 15-26 31-33 2-1 2-4 0-5-16-7-26-24-31-33-1-2-4-2-5 0z" fill="#fe9901" />
+            <path d="M381 464c-16 7-26 24-31 33-1 2-4 2-5 0l-7-12a70 70 0 0132-33l11 7c2 1 2 4 0 5z" fill="#fb8801" />
+            <g fill="#acacac">
+              <path d="M504 288a52 52 0 00-37-19c-7 0-13 1-20 3-13-8-30-8-50-1a8 8 0 106 14c7-2 17-5 28-3l-3 3c-10 10-13 27-5 38a26 26 0 0021 11c7 0 14-4 18-9l5-12c2-10-1-20-6-28h5c10 0 19 5 26 13a8 8 0 1012-10zm-52 23c-1 4-4 7-8 7s-7-2-8-4c-4-5-2-13 3-18l7-6c5 6 7 13 6 21zM443 80c11 9 28 8 39-2l2-2c2 10-2 21-5 28a8 8 0 1014 6c8-18 9-36 3-50 3-6 4-12 5-19 1-14-5-28-15-39a8 8 0 10-11 11 37 37 0 0110 33c-8-7-18-10-28-9-5 0-9 2-12 4-6 3-10 10-10 18-1 8 2 16 8 21zm7-20c0-2 0-5 3-6 4-3 9-2 13-1 1 0 13 6 12 7l-6 7c-6 4-14 5-19 1-2-2-3-5-3-8zM289 43c-4 1-6 6-5 10 11 30 2 84-18 109a8 8 0 1012 10c11-14 20-36 24-60s3-48-3-65c-2-4-6-6-10-4zM460 231a8 8 0 105-15c-17-6-41-7-65-3s-46 13-60 25a8 8 0 1010 11c25-20 79-29 110-18z" />
+            </g>
+            <circle cx="345.3" cy="31.1" fill="#60b7ff" r="23.4" />
+            <path d="M369 31a23 23 0 11-47 0v-1c4 3 8 5 13 5 13 0 23-10 24-23 6 4 10 11 10 19z" fill="#26a6fe" />
+            <circle cx="227.5" cy="94.5" fill="#60b7ff" r="23.4" />
+            <path d="M251 94a23 23 0 11-47 0c4 2 8 4 13 4 13 0 23-10 23-23 7 4 11 11 11 19z" fill="#26a6fe" />
+            <path d="M164 136l217 217c3 3 3 8 0 11l-21 21c-3 3-8 3-11 0L132 168c-3-3-3-8 0-11l21-21c3-3 8-3 11 0z" fill="#f3eae6" />
+            <path d="M381 364l-21 20c-3 4-8 4-11 0l-15-14c4 3 9 3 12 0l20-20c3-4 3-9 0-12l15 15c3 3 3 8 0 11z" fill="#e1d3ce" />
+          </svg>
+          Dance
+        </a>
+      </div>
+    </div>
+    <a href="https://twitter.com/AysnrTrkk" class="follow-me" target="_blank">
+      <span class="follow-text">
+        <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
+        Follow me on Twitter
+     </span>
+      <span class="developer">
+        <img src="https://pbs.twimg.com/profile_images/1253782473953157124/x56UURmt_400x400.jpg" />
+        Aysenur Turk — @AysnrTrkk
+      </span>
+    </a>
+  </div>
+  <div class="main">
+    <div class="search-bar">
+      <input type="text" placeholder="Search" />
+      <button class="right-side-button" @click="rightSide = !rightSide">
+         <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+      </button>
+    </div>
+    <div class="main-container">
+      <div class="profile">
+        <div class="profile-avatar">
+          <img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" alt="" class="profile-img">
+          <div class="profile-name">Quan Ha</div>
+        </div>
+        <img src="https://images.unsplash.com/photo-1508247967583-7d982ea01526?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="" class="profile-cover">
+        <div class="profile-menu">
+          <a class="profile-menu-link active">Timeline</a>
+          <a class="profile-menu-link">About</a>
+          <a class="profile-menu-link">Friends</a>
+          <a class="profile-menu-link">Photos</a>
+          <a class="profile-menu-link">More</a>
+        </div>
+      </div>
+      <div class="timeline">
+        <div class="timeline-left">
+          <div class="intro box">
+            <div class="intro-title">
+              Introduction
+              <button class="intro-menu"></button>
+            </div>
+            <div class="info">
+              <div class="info-item">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.889 503.889" fill="currentColor">
+                  <path d="M453.727 114.266H345.151V70.515c0-20.832-16.948-37.779-37.78-37.779H196.517c-20.832 0-37.78 16.947-37.78 37.779v43.751H50.162C22.502 114.266 0 136.769 0 164.428v256.563c0 27.659 22.502 50.161 50.162 50.161h403.565c27.659 0 50.162-22.502 50.162-50.161V164.428c0-27.659-22.503-50.162-50.162-50.162zm-262.99-43.751a5.786 5.786 0 015.78-5.779h110.854a5.786 5.786 0 015.78 5.779v43.751H190.737zM32 164.428c0-10.015 8.147-18.162 18.162-18.162h403.565c10.014 0 18.162 8.147 18.162 18.162v23.681c0 22.212-14.894 42.061-36.22 48.27l-167.345 48.723a58.482 58.482 0 01-32.76 0L68.22 236.378C46.894 230.169 32 210.321 32 188.109zm421.727 274.725H50.162c-10.014 0-18.162-8.147-18.162-18.161V253.258c8.063 6.232 17.254 10.927 27.274 13.845 184.859 53.822 175.358 52.341 192.67 52.341 17.541 0 7.595 1.544 192.67-52.341 10.021-2.918 19.212-7.613 27.274-13.845v167.733c.001 10.014-8.147 18.162-18.161 18.162z" /></svg>
+                Product Designer at <a href="#">Bravebist</a>
+              </div>
+              <div class="info-item">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                  <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+                  <path d="M9 22V12h6v10" />
+                </svg>
+                Live in <a href="#">Hanoi, Vietnam</a>
+              </div>
+              <div class="info-item">
+                <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+                  <path d="M437 75C388.7 26.6 324.4 0 256 0S123.3 26.6 75 75C26.6 123.3 0 187.6 0 256s26.6 132.7 75 181c48.3 48.4 112.6 75 181 75s132.7-26.6 181-75c48.4-48.3 75-112.6 75-181s-26.6-132.7-75-181zM252.4 481.9c-52-.9-103.7-19.5-145.2-55.8L256 277.2l21.7 21.8a165.9 165.9 0 00-35.7 87c-3.5 30.5 0 63.3 10.4 95.9zM299 320.3l105.7 105.8a224.8 224.8 0 01-121.3 54.1C262 419.5 268 360.3 299 320.3zm21.2-21.2c40-31 99.2-37 160-15.6A224.8 224.8 0 01426 404.8zM482 252.4a231.7 231.7 0 00-96-10.4 165.9 165.9 0 00-87 35.7L277.3 256l148.9-148.8c36.3 41.5 55 93.2 55.8 145.2zm-290.2-39.5c-40 31-99.2 37-160 15.6A224.8 224.8 0 0186 107.2zm-84.5-127a224.8 224.8 0 01121.3-54.1C250 92.5 244 151.7 213 191.7zM270 126c3.5-30.5 0-63.3-10.4-95.9 52 .9 103.7 19.5 145.2 55.8L256 234.8 234.3 213a165.9 165.9 0 0035.7-87zM30 259.6a242 242 0 0072.7 11.7c7.8 0 15.6-.5 23.2-1.3a165.9 165.9 0 0087-35.7l21.8 21.7L85.9 404.8a225.3 225.3 0 01-55.8-145.2z" /></svg>
+                Player name <a href="#">Quan Ha</a>
+              </div>
+            </div>
+          </div>
+          <div class="event box">
+            <div class="event-wrapper">
+              <img src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" class="event-img" />
+              <div class="event-date">
+                <div class="event-month">Jan</div>
+                <div class="event-day">01</div>
+              </div>
+              <div class="event-title">Winter Wonderland</div>
+              <div class="event-subtitle">01st Jan, 2019 07:00AM</div>
+            </div>
+          </div>
+          <div class="pages box">
+            <div class="intro-title">
+              Your pages
+              <button class="intro-menu"></button>
+            </div>
+            <div class="user">
+              <img src="https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0f" alt="" class="user-img">
+              <div class="username">Chandelio</div>
+            </div>
+            <div class="user">
+              <img src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=d5849d81af587a09dbcf3f11f6fa122f" alt="" class="user-img">
+              <div class="username">Janet Jolie</div>
+            </div>
+            <div class="user">
+              <img src="https://images.unsplash.com/photo-1546539782-6fc531453083?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" alt="" class="user-img">
+              <div class="username">Patrick Watsons</div>
+            </div>
+          </div>
+        </div>
+        <div class="timeline-right">
+          <div class="status box">
+            <div class="status-menu">
+              <a class="status-menu-item active" href="#">Status</a>
+              <a class="status-menu-item" href="#">Photos</a>
+              <a class="status-menu-item" href="#">Videos</a>
+            </div>
+            <div class="status-main">
+              <img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" class="status-img">
+              <textarea class="status-textarea" placeholder="Write something to Quan Ha.."></textarea>
+            </div>
+            <div class="status-actions">
+              <a href="#" class="status-action">
+                <svg viewBox="-42 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M333.7 123.3c0 33.9-12.2 63.2-36.2 87.2-24 24-53.3 36.1-87.1 36.1h-.1c-33.9 0-63.2-12.1-87.1-36.1-24-24-36.2-53.3-36.2-87.2 0-33.9 12.2-63.2 36.2-87.2 24-24 53.2-36 87-36.1h.2c33.8 0 63.2 12.2 87.1 36.1 24 24 36.2 53.3 36.2 87.2zm0 0" fill="#ffbb85" />
+                  <path d="M427.2 424c0 26.7-8.5 48.3-25.3 64.3-16.5 15.7-38.4 23.7-65 23.7H90.2c-26.6 0-48.5-8-65-23.7C8.5 472.3 0 450.7 0 423.9c0-10.2.3-20.4 1-30.2a302.7 302.7 0 0112.1-64.9c3.3-10.3 7.8-20.5 13.4-30.3 5.8-10.2 12.5-19 20.1-26.3a89 89 0 0129-18.2c11.2-4.4 23.7-6.7 37-6.7 5.2 0 10.3 2.2 20 8.5l21 13.5c6.6 4.3 15.7 8.3 27 11.9a107.7 107.7 0 0033 5.3c11 0 22-1.8 33-5.3 11.2-3.6 20.3-7.6 27-12l21-13.4c9.7-6.3 14.7-8.5 20-8.5 13.3 0 25.7 2.3 37 6.7a89 89 0 0128.9 18.2c7.6 7.3 14.4 16.1 20.2 26.3 5.5 9.8 10 20 13.3 30.3a305.5 305.5 0 0112.1 64.9c.7 9.8 1 20 1 30.2zm0 0" fill="#6aa9ff" />
+                  <path d="M210.4 246.6h-.1V0c34 0 63.3 12.2 87.2 36.1 24 24 36.2 53.3 36.2 87.2 0 33.9-12.2 63.2-36.2 87.2-24 24-53.3 36.1-87.1 36.1zm0 0" fill="#f5a86c" />
+                  <path d="M427.2 424c0 26.7-8.5 48.3-25.3 64.3-16.5 15.7-38.4 23.7-65 23.7H210.2V286.5h3.3c11 0 22-1.8 33-5.3 11.2-3.6 20.3-7.6 27-12l21-13.4c9.7-6.3 14.7-8.5 20-8.5 13.3 0 25.7 2.3 37 6.7a89 89 0 0128.9 18.2c7.6 7.3 14.4 16.1 20.2 26.3 5.5 9.8 10 20 13.3 30.3a305.5 305.5 0 0112.1 64.9c.7 9.8 1 20 1 30.2zm0 0" fill="#2682ff" />
+                </svg>
+                People
+              </a>
+              <a href="#" class="status-action">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                  <path d="M87.084 192c-.456-5.272-.688-10.6-.688-16C86.404 78.8 162.34 0 256.004 0s169.6 78.8 169.6 176c0 5.392-.232 10.728-.688 16h.688c0 96.184-169.6 320-169.6 320s-169.6-223.288-169.6-320h.68zm168.92 32c36.392 1.024 66.744-27.608 67.84-64-1.096-36.392-31.448-65.024-67.84-64-36.392-1.024-66.744 27.608-67.84 64 1.096 36.392 31.448 65.024 67.84 64z" fill="#e21b1b" />
+                </svg>
+                Check in
+              </a>
+              <a href="#" class="status-action">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                  <circle cx="256" cy="256" r="256" fill="#ffca28" />
+                  <g fill="#6d4c41">
+                    <path d="M399.68 208.32c-8.832 0-16-7.168-16-16 0-17.632-14.336-32-32-32s-32 14.368-32 32c0 8.832-7.168 16-16 16s-16-7.168-16-16c0-35.296 28.704-64 64-64s64 28.704 64 64c0 8.864-7.168 16-16 16zM207.68 208.32c-8.832 0-16-7.168-16-16 0-17.632-14.368-32-32-32s-32 14.368-32 32c0 8.832-7.168 16-16 16s-16-7.168-16-16c0-35.296 28.704-64 64-64s64 28.704 64 64c0 8.864-7.168 16-16 16z" />
+                  </g>
+                  <path d="M437.696 294.688c-3.04-4-7.744-6.368-12.736-6.368H86.4c-5.024 0-9.728 2.336-12.736 6.336-3.072 4.032-4.032 9.184-2.688 14.016C94.112 390.88 170.08 448.32 255.648 448.32s161.536-57.44 184.672-139.648c1.376-4.832.416-9.984-2.624-13.984z" fill="#fafafa" />
+                </svg>
+                Mood
+              </a>
+              <button class="status-share">Share</button>
+            </div>
+          </div>
+          <div class="album box">
+            <div class="status-main">
+              <img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" class="status-img" />
+              <div class="album-detail">
+                <div class="album-title"><strong>Quan Ha</strong> create new <span>album</span></div>
+                <div class="album-date">6 hours ago</div>
+              </div>
+              <button class="intro-menu"></button>
+            </div>
+            <div class="album-content">When the bass drops, so do my problems.
+              <div class="album-photos">
+                <img src="https://images.unsplash.com/photo-1508179719682-dbc62681c355?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2378&q=80" alt="" class="album-photo" />
+                <div class="album-right">
+                  <img src="https://images.unsplash.com/photo-1502872364588-894d7d6ddfab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="" class="album-photo" />
+                  <img src="https://images.unsplash.com/photo-1566737236500-c8ac43014a67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="" class="album-photo" />
+                </div>
+              </div>
+            </div>
+            <div class="album-actions">
+              <a href="#" class="album-action">
+                <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                  <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
+                </svg>
+                87
+              </a>
+              <a href="#" class="album-action">
+                <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
+                  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+                </svg>
+                20
+              </a>
+              <a href="#" class="album-action">
+                <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
+                  <path d="M17 1l4 4-4 4" />
+                  <path d="M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4" />
+                  <path d="M21 13v2a4 4 0 01-4 4H3" />
+                </svg>
+                13
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="right-side" :class="{ 'active': rightSide }">
+    <div class="account">
+      <button class="account-button">
+        <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
+          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+          <path d="M22 6l-10 7L2 6" />
+        </svg>
+      </button>
+      <button class="account-button">
+        <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
+          <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" />
+        </svg>
+      </button>
+      <span class="account-user">Quan Ha
+        <img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" alt="" class="account-profile" alt="">
+        <span>▼</span>
+      </span>
+    </div>
+    <div class="side-wrapper stories">
+      <div class="side-title">STORIES</div>
+      <div class="user">
+        <img src="https://pbs.twimg.com/profile_images/1102351320567164931/ZCkJgJIH.png" alt="" class="user-img">
+        <div class="username">Lisandro Matos
+          <div class="album-date">12 hours ago</div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://pbs.twimg.com/profile_images/1153966095444992000/1lpIyHaQ.jpg" alt="" class="user-img">
+        <div class="username">Gvozden Boskovsky
+          <div class="album-date">29 minutes ago</div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.unsplash.com/photo-1565464027194-7957a2295fb7?ixlib=rb-1.2.1&auto=format&fit=crop&w=3500&q=80" alt="" class="user-img">
+        <div class="username">Hnek Fortuin
+          <div class="album-date">3 hours ago</div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" alt="" class="user-img">
+        <div class="username">Lubomir Dvorak
+          <div class="album-date">18 hours ago</div>
+        </div>
+      </div>
+    </div>
+    <div class="side-wrapper contacts">
+      <div class="side-title">CONTACTS</div>
+      <div class="user">
+        <img src="https://randomuser.me/api/portraits/men/1.jpg" class="user-img">
+        <div class="username">Andrei Mashrin
+          <div class="user-status"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=046c29138c1335ef8edee7daf521ba50" class="user-img">
+        <div class="username">Aryn Jacobssen
+          <div class="user-status offline"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.unsplash.com/photo-1575084713138-342cae5f8d00?ixlib=rb-1.2.1&auto=format&fit=crop&w=958&q=80" class="user-img">
+        <div class="username">Carole Landu
+          <div class="user-status offline"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.pexels.com/photos/598745/pexels-photo-598745.jpeg?h=350&auto=compress&cs=tinysrgb" class="user-img">
+        <div class="username">Chineze Afa
+          <div class="user-status"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" class="user-img">
+        <div class="username">Mok Kwang
+          <div class="user-status"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://randomuser.me/api/portraits/women/63.jpg" class="user-img">
+        <div class="username">Naomi Yepes
+          <div class="user-status"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.unsplash.com/photo-1476493279419-b785d41e38d8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=61eaea85f1aa3d065400179c78163f15" class="user-img">
+        <div class="username">Shaamikh Ale
+          <div class="user-status"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://m.media-amazon.com/images/M/MV5BMjI4NDcyNjQxNl5BMl5BanBnXkFtZTgwMzI4OTM3NjM@._V1_UY256_CR13,0,172,256_AL_.jpg" class="user-img">
+        <div class="username">Sofia Alcocer
+          <div class="user-status idle"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://images.unsplash.com/photo-1509380836717-c4320ccf1a6f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=e01c8c45a063daaf6d6e571a32bd6c90" class="user-img">
+        <div class="username">Wen Yahui
+          <div class="user-status"></div>
+        </div>
+      </div>
+      <div class="user">
+        <img src="https://pbs.twimg.com/profile_images/737221709267374081/sdwta9Oh.jpg" alt="" class="user-img">
+        <div class="username">Leslee Moss
+          <div class="user-status idle"></div>
+        </div>
+      </div>
+    </div>
+    <div class="search-bar right-search">
+      <input type="text" placeholder="Search" />
+      <div class="search-bar-svgs">
+        <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="3"/>
+          <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
+        </svg>
+        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.34 469.34">
+          <path d="M456.84 76.17l-64-64.06c-16.13-16.13-44.18-16.17-60.37.04L45.77 301.67a10.73 10.73 0 00-2.7 4.59L.41 455.73a10.68 10.68 0 0013.19 13.2l149.33-42.7c1.73-.5 3.3-1.42 4.58-2.7l289.33-286.98c8.06-8.07 12.5-18.78 12.5-30.19s-4.44-22.12-12.5-30.2zM285.99 89.74L325.25 129l-205 205-14.7-29.44a10.67 10.67 0 00-9.55-5.9H78.92L286 89.75zM26.2 443.14l13.9-48.64 34.74 34.74-48.64 13.9zm123.14-35.18L98.3 422.54l-51.5-51.5L61.38 320H89.4l18.38 36.77a10.67 10.67 0 004.77 4.77l36.78 18.39v28.03zm21.33-17.54v-17.09c0-4.04-2.28-7.72-5.9-9.54l-29.43-14.7 205-205 39.26 39.26-208.93 207.07zm271.11-268.7l-47.03 46.61L301 74.6l46.59-47c8.06-8.07 22.1-8.07 30.16 0l64 64c4.03 4.03 6.25 9.38 6.25 15.08s-2.22 11.05-6.22 15.05z" /></svg>
+        <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+      <path d="M12 5v14M5 12h14"/>
+    </svg>
+      </div>
+    </div>
+  </div>
+  <div class="overlay" @click="rightSide = false; leftSide = false" :class="{ 'active': rightSide || leftSide }"></div>
+</div>
\ No newline at end of file
diff --git a/responsive-social-platform-ui/src/style.scss b/responsive-social-platform-ui/src/style.scss
new file mode 100644
index 0000000..056db34
--- /dev/null
+++ b/responsive-social-platform-ui/src/style.scss
@@ -0,0 +1,931 @@
+@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700|Source+Sans+Pro:300,400,600,700&display=swap");
+
+$bg-color: #151728;
+$border-color: #272a3a;
+$title-font: "DM Sans", sans-serif;
+$body-font: "Source Sans Pro", sans-serif;
+$side-title: #5c5e6e;
+$button: #8f98a9;
+
+* {
+ outline: none;
+ box-sizing: border-box;
+}
+
+html {
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+}
+
+body {
+ font-family: $body-font;
+ background-color: #373e57;
+ color: #ccc8db;
+}
+
+.container {
+ background-color: $bg-color;
+ display: flex;
+ max-width: 1600px;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0 auto;
+}
+
+.left-side {
+ width: 260px;
+ border-right: 1px solid $border-color;
+ display: flex;
+ flex-direction: column;
+ transition: 0.3s;
+ background-color: $bg-color;
+ overflow: auto;
+ flex-shrink: 0;
+ @media screen and (max-width: 930px) {
+  &.active {
+   z-index: 4;
+   & > *:not(.logo) {
+    opacity: 1;
+    transition: 0.3s 0.2s;
+   }
+   .left-side-button svg:first-child {
+    opacity: 0;
+   }
+   .left-side-button svg:last-child {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+   }
+  }
+  &:not(.active) {
+   width: 56px;
+   overflow: hidden;
+   & > *:not(.logo):not(.left-side-button) {
+    opacity: 0;
+   }
+   .logo {
+    writing-mode: vertical-lr;
+    transform: rotate(180deg);
+    transform-origin: bottom;
+    display: flex;
+    align-items: center;
+    margin-top: -10px;
+   }
+  }
+ }
+}
+
+.right-side {
+ width: 280px;
+ flex-shrink: 0;
+ margin-left: auto;
+ overflow: auto;
+ background-color: $bg-color;
+ display: flex;
+ flex-direction: column;
+ @media screen and (max-width: 1210px) {
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition: 0.3s;
+  height: 100%;
+  transform: translateX(280px);
+  z-index: 4;
+
+  &.active {
+   transform: translatex(0);
+  }
+ }
+}
+
+.main {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ background-color: #181d2f;
+}
+
+.logo {
+ font-family: $title-font;
+ font-size: 15px;
+ color: #fff;
+ font-weight: 600;
+ text-align: center;
+ height: 68px;
+ line-height: 68px;
+ letter-spacing: 4px;
+ position: sticky;
+ top: 0;
+ background: linear-gradient(
+  to bottom,
+  rgba(21, 23, 40, 1) 0%,
+  rgba(21, 23, 40, 1) 76%,
+  rgba(21, 23, 40, 0) 100%
+ );
+}
+
+.side-title {
+ font-family: $title-font;
+ color: $side-title;
+ font-size: 15px;
+ font-weight: 600;
+ margin-bottom: 20px;
+}
+
+.side-wrapper {
+ padding: 30px;
+}
+
+.side-menu {
+ display: flex;
+ flex-direction: column;
+ font-size: 15px;
+ white-space: nowrap;
+ svg {
+  margin-right: 16px;
+  width: 16px;
+ }
+ a {
+  text-decoration: none;
+  color: #9c9cab;
+  display: flex;
+  align-items: center;
+  &:hover {
+   color: #fff;
+  }
+  &:not(:last-child) {
+   margin-bottom: 20px;
+  }
+ }
+}
+
+.follow-me {
+ text-decoration: none;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ margin-top: auto;
+ overflow: hidden;
+ color: #9c9cab;
+ padding: 0 20px;
+ height: 52px;
+ flex-shrink: 0;
+ border-top: 1px solid $border-color;
+ position: relative;
+ svg {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+ }
+}
+
+.follow-text {
+ display: flex;
+ align-items: center;
+ transition: 0.3s;
+}
+
+.follow-me:hover {
+ .follow-text {
+  transform: translateY(100%);
+ }
+ .developer {
+  top: 0;
+ }
+}
+
+.developer {
+ position: absolute;
+ color: #fff;
+ left: 0;
+ top: -100%;
+ display: flex;
+ transition: 0.3s;
+ padding: 0 20px;
+ align-items: center;
+ background-color: $border-color;
+ width: 100%;
+ height: 100%;
+}
+
+.developer img {
+ border-radius: 50%;
+ width: 26px;
+ height: 26px;
+ object-fit: cover;
+ margin-right: 10px;
+}
+
+.search-bar {
+ height: 60px;
+ background-color: $bg-color;
+ z-index: 3;
+ position: relative;
+ input {
+  height: 100%;
+  width: 100%;
+  display: block;
+  background-color: transparent;
+  border: none;
+  padding: 0 54px;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3e%3cpath d='M508.9 478.7L360 330a201.6 201.6 0 0045.2-127.3C405.3 90.9 314.4 0 202.7 0S0 91 0 202.7s91 202.6 202.7 202.6c48.2 0 92.4-17 127.3-45.2L478.7 509c4.2 4.1 11 4.1 15 0l15.2-15.1c4.1-4.2 4.1-11 0-15zm-306.2-116c-88.3 0-160-71.8-160-160s71.7-160 160-160 160 71.7 160 160-71.8 160-160 160z' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%235C5D71'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-size: 16px;
+  background-position: 25px 50%;
+  color: #fff;
+  font-family: $body-font;
+  font-weight: 600;
+  &::placeholder {
+   color: #5c5d71;
+  }
+ }
+}
+
+.main-container {
+ padding: 20px;
+ flex-grow: 1;
+ overflow: auto;
+ background-color: #24273b;
+}
+
+.profile {
+ position: relative;
+ height: 40vh;
+ min-height: 250px;
+ max-height: 350px;
+ z-index: 1;
+
+ &-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 4px;
+ }
+
+ &:before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  top: 0;
+  background-image: url("https://images.unsplash.com/photo-1508247967583-7d982ea01526?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  filter: blur(50px);
+  opacity: 0.7;
+ }
+}
+
+.profile-menu {
+ position: absolute;
+ bottom: 0;
+ padding-left: 200px;
+ background: $bg-color;
+ width: 100%;
+ display: flex;
+ border-radius: 0 0 4px 4px;
+}
+
+.profile-menu-link {
+ padding: 20px 16px;
+ color: $side-title;
+ transition: 0.3s;
+ cursor: pointer;
+
+ &.active,
+ &:hover {
+  color: #fff;
+  background-color: #1b1d2e;
+  border-bottom: 3px solid #1488fa;
+ }
+}
+
+.profile-avatar {
+ position: absolute;
+ align-items: center;
+ display: flex;
+ z-index: 1;
+ bottom: 16px;
+ left: 24px;
+}
+
+.profile-img {
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 3px solid $bg-color;
+}
+
+.profile-name {
+ margin-left: 24px;
+ margin-bottom: 24px;
+ font-size: 22px;
+ color: #fff;
+ font-weight: 600;
+ font-family: $title-font;
+}
+
+.timeline {
+ display: flex;
+ padding-top: 20px;
+ position: relative;
+ z-index: 2;
+ &-left {
+  width: 310px;
+  flex-shrink: 0;
+ }
+ &-right {
+  flex-grow: 1;
+  padding-left: 20px;
+ }
+ @media screen and (max-width: 768px) {
+  flex-wrap: wrap;
+  flex-direction: column-reverse;
+  &-right {
+   padding-left: 0;
+   margin-bottom: 20px;
+  }
+  &-left {
+   width: 100%;
+  }
+ }
+}
+
+.box {
+ background-color: $bg-color;
+ border-radius: 4px;
+}
+
+.intro {
+ padding: 20px;
+
+ &-title {
+  font-family: $title-font;
+  color: $side-title;
+  font-weight: 600;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+ }
+ &-menu {
+  background-color: $button;
+  box-shadow: -8px 0 0 0 $button, 8px 0 0 0 $button;
+  width: 5px;
+  height: 5px;
+  border: 0;
+  padding: 0;
+  border-radius: 50%;
+  margin-left: auto;
+  margin-right: 8px;
+ }
+}
+
+.info {
+ font-size: 15px;
+
+ &-item {
+  display: flex;
+  color: #c3c5d5;
+ }
+
+ &-item + &-item {
+  margin-top: 14px;
+ }
+
+ &-item a {
+  margin-left: 6px;
+  color: #1771d6;
+  text-decoration: none;
+ }
+
+ &-item svg {
+  width: 16px;
+  margin-right: 10px;
+ }
+}
+
+.event {
+ position: relative;
+ margin-top: 20px;
+ padding: 10px;
+}
+
+.event-wrapper {
+ position: relative;
+}
+
+.event-img {
+ max-width: 100%;
+ display: block;
+ padding-bottom: 12px;
+}
+
+.event-date {
+ position: absolute;
+ left: 20px;
+ top: 15px;
+}
+
+.event-month {
+ background-color: #1687fa;
+ padding: 7px 20px;
+ font-weight: 600;
+ font-family: $title-font;
+ color: #fff;
+ text-align: center;
+ border-radius: 4px 4px 0 0;
+}
+
+.event-day {
+ width: 100%;
+ backdrop-filter: blur(4px);
+ color: #fff;
+ font-size: 22px;
+ font-weight: 600;
+ font-family: $title-font;
+ background-color: rgba(0, 0, 0, 0.4);
+ padding: 6px 0;
+ text-align: center;
+}
+
+.event-title {
+ color: #c3c5d5;
+ margin-bottom: 5px;
+ font-family: $title-font;
+ font-weight: 600;
+ padding: 0 14px;
+}
+
+.event-subtitle {
+ color: $side-title;
+ font-family: $title-font;
+ font-size: 13px;
+ font-weight: 500;
+ padding: 0 14px;
+}
+
+.pages {
+ margin-top: 20px;
+ padding: 20px;
+}
+
+.user {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+}
+
+.user + .user {
+ margin-top: 18px;
+}
+
+.user-img {
+ border-radius: 50%;
+ width: 45px;
+ height: 45px;
+ margin-right: 15px;
+ object-fit: cover;
+ object-position: center;
+}
+
+.username {
+ font-size: 15px;
+ font-family: $title-font;
+}
+
+.status-menu {
+ padding: 20px;
+ display: flex;
+ align-items: center;
+ &-item {
+  text-decoration: none;
+  color: #ccc8db;
+  padding: 10px 14px;
+  line-height: 0.7;
+  font-family: $title-font;
+  font-weight: 500;
+  border-radius: 20px;
+  &.active,
+  &:hover {
+   background-color: #2e2e40;
+   color: #fff;
+  }
+ }
+ &-item + &-item {
+  margin-left: 10px;
+ }
+ @media screen and (max-width: 500px) {
+  font-size: 14px;
+  &-item + &-item {
+   margin-left: 0;
+  }
+ }
+}
+
+.status-img {
+ width: 50px;
+ height: 50px;
+ object-fit: cover;
+ border-radius: 50%;
+ margin-right: 20px;
+}
+
+.status-main {
+ padding: 0 20px;
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid $border-color;
+ padding-bottom: 20px;
+ flex-wrap: wrap;
+}
+
+.status-textarea {
+ flex-grow: 1;
+ background-color: transparent;
+ border: none;
+ resize: none;
+ margin-top: 15px;
+ color: #fff;
+ max-width: calc(100% - 70px);
+ &::placeholder {
+  color: #5c5d71;
+ }
+}
+
+.status-actions {
+ display: flex;
+ padding: 10px 20px;
+}
+
+.status-action {
+ text-decoration: none;
+ color: #ccc8db;
+ margin-right: 20px;
+ display: flex;
+ align-items: center;
+ svg {
+  width: 16px;
+  flex-shrink: 0;
+  margin-right: 8px;
+ }
+ @media screen and (max-width: 1320px) {
+  width: 16px;
+  overflow: hidden;
+  color: transparent;
+  white-space: nowrap;
+ }
+}
+
+.status-share {
+ background-color: #1b86f9;
+ border: none;
+ color: #fff;
+ border-radius: 4px;
+ padding: 10px 20px;
+ margin-left: auto;
+ box-shadow: 0 0 20px #1b86f9;
+ cursor: pointer;
+}
+
+.album {
+ padding-top: 20px;
+ margin-top: 20px;
+ .status-main {
+  border: none;
+  display: flex;
+ }
+ .intro-menu {
+  margin-bottom: auto;
+  margin-top: 5px;
+ }
+}
+
+.album-detail {
+ width: calc(100% - 110px);
+}
+
+.album-title span {
+ color: #1771d6;
+ cursor: pointer;
+}
+
+.album-date {
+ font-size: 15px;
+ color: #595c6c;
+ margin-top: 4px;
+}
+
+.album-content {
+ padding: 0 20px 20px;
+}
+
+.album-photo {
+ width: 100%;
+ object-fit: cover;
+ object-position: center;
+ border-radius: 4px;
+ margin-top: 10px;
+}
+
+.album-photos {
+ display: flex;
+ margin-top: 20px;
+ max-height: 30vh;
+}
+
+.album-photos > .album-photo {
+ width: 50%;
+}
+
+.album-right {
+ width: 50%;
+ margin-left: 10px;
+ line-height: 0;
+ display: flex;
+ flex-direction: column;
+ .album-photo {
+  height: calc(50% - 10px);
+ }
+}
+
+.album-actions {
+ padding: 0 20px 20px;
+}
+
+.album-action {
+ margin-right: 20px;
+ text-decoration: none;
+ color: #a2a4b4;
+ display: inline-flex;
+ align-items: center;
+ font-weight: 600;
+ &:hover {
+  color: #fff;
+ }
+ svg {
+  width: 16px;
+  margin-right: 6px;
+ }
+}
+
+.account-button {
+ border: 0;
+ background: 0;
+ color: #64677a;
+ padding: 0;
+ cursor: pointer;
+ position: relative;
+}
+
+.account-button svg {
+ width: 20px;
+}
+
+.account-button:not(.right-side-button) + .account-button:before {
+ position: absolute;
+ right: 0px;
+ top: -2px;
+ background-color: #1b86f8;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ content: "";
+ border: 2px solid $bg-color;
+}
+
+.account-profile {
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ margin: 0 10px;
+}
+
+.account-user {
+ display: inline-flex;
+ align-items: center;
+ color: #64677a;
+ font-weight: 600;
+ span {
+  font-size: 10px;
+  font-weight: normal;
+ }
+}
+
+.account {
+ height: 60px;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ position: sticky;
+ top: 0;
+ background-color: $bg-color;
+ z-index: 3;
+ flex-shrink: 0;
+}
+
+.stories {
+ border-bottom: 1px solid $border-color;
+}
+.stories .user-img {
+ border: 2px solid #e2b96c;
+}
+
+.stories .album-date {
+ font-family: $body-font;
+}
+
+.user-status {
+ background-color: #7fd222;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ margin-left: auto;
+ &.offline {
+  background-color: #606a8d;
+ }
+ &.idle {
+  background-color: #dd1c20;
+ }
+}
+
+.contacts .username {
+ display: flex;
+ flex: 1;
+ align-items: center;
+}
+
+.right-search svg {
+ width: 16px;
+ height: 16px;
+}
+
+.right-search {
+ padding-right: 10px;
+ display: flex;
+ align-items: center;
+ border-top: 1px solid $border-color;
+ position: sticky;
+ bottom: 0;
+ margin-top: auto;
+}
+
+.right-search input {
+ padding-right: 10px;
+}
+
+.search-bar-svgs {
+ color: #656679;
+ display: flex;
+}
+
+.search-bar-svgs svg {
+ margin-right: 16px;
+}
+
+.overlay {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: rgba(#24273b, 0.8);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ transition: 0.3s;
+
+ @media screen and (max-width: 1210px) {
+  &.active {
+   z-index: 3;
+   opacity: 1;
+   visibility: visible;
+   pointer-events: all;
+  }
+ }
+}
+
+.right-side-button {
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 100%;
+ border: 0;
+ width: 52px;
+ background-color: #1e2031;
+ border-left: 1px solid $border-color;
+ color: #fff;
+ display: none;
+ cursor: pointer;
+
+ &:before {
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  position: absolute;
+  background-color: #1b86f8;
+  border: 2px solid #1e2031;
+  top: 13px;
+  right: 12px;
+ }
+ svg {
+  width: 22px;
+ }
+ @media screen and (max-width: 1210px) {
+  display: block;
+ }
+}
+
+.left-side-button {
+ display: none;
+ @media screen and (max-width: 930px) {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  cursor: pointer;
+  height: 60px;
+  background-color: rgba($border-color, 0.5);
+  border: 0;
+  padding: 0;
+  line-height: 0;
+  color: #fff;
+  border-bottom: 1px solid $border-color;
+  svg {
+   transition: 0.2s;
+   width: 24px;
+  }
+  svg:last-child {
+   position: absolute;
+   left: 50%;
+   transform: translate(100%, -50%);
+   top: 50%;
+   opacity: 0;
+  }
+ }
+}
+
+@media screen and (max-width: 700px) {
+ .profile-avatar {
+  top: -25px;
+  left: 50%;
+  transform: translatex(-50%);
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+ }
+ .profile-img {
+  height: 100px;
+  width: 100px;
+ }
+ .profile-name {
+  margin: 5px 0;
+ }
+ .profile-menu {
+  padding-left: 0;
+  width: 100%;
+  overflow: auto;
+  justify-content: center;
+ }
+ .profile-menu-link {
+  padding: 16px;
+  font-size: 15px;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .profile-menu-link:nth-last-child(1),
+ .profile-menu-link:nth-last-child(2) {
+  display: none;
+ }
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  border-radius: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.01);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.11);
+  border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
\ No newline at end of file
diff --git a/rgbconfettimyk-generative-art/README.markdown b/rgbconfettimyk-generative-art/README.markdown
new file mode 100644
index 0000000..d83576c
--- /dev/null
+++ b/rgbconfettimyk-generative-art/README.markdown
@@ -0,0 +1,5 @@
+# RGBConfettiMYK ◈ Generative Art
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/robdimarzo/pen/oNYjQZm](https://codepen.io/robdimarzo/pen/oNYjQZm).
+
+
diff --git a/rgbconfettimyk-generative-art/dist/index.html b/rgbconfettimyk-generative-art/dist/index.html
new file mode 100644
index 0000000..3e432af
--- /dev/null
+++ b/rgbconfettimyk-generative-art/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - RGBConfettiMYK ◈ Generative Art</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg xmlns="http://www.w3.org/2000/svg" id="svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500"></svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/rgbconfettimyk-generative-art/dist/script.js b/rgbconfettimyk-generative-art/dist/script.js
new file mode 100644
index 0000000..1bd09c3
--- /dev/null
+++ b/rgbconfettimyk-generative-art/dist/script.js
@@ -0,0 +1,73 @@
+const svg = document.getElementById("svg");
+const colors = ["Red", "Lime", "Blue"];
+
+function drawCircle() { 
+  let c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  c.setAttribute("r", Math.floor(Math.random() * 50));
+  c.setAttribute("cx", Math.floor(Math.random() * 500)); 
+  c.setAttribute("cy", Math.floor(Math.random() * 500));
+  c.setAttribute("fill", colors[Math.floor(Math.random() * colors.length)]);
+  svg.appendChild(c);
+}
+
+function drawSquare() { 
+  let s = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  let dimension = Math.floor(Math.random() * 350);
+  let rotate = Math.floor(Math.random() * 500);
+  s.setAttribute("width", dimension);
+  s.setAttribute("height", dimension);
+  s.setAttribute("x", Math.floor(Math.random() * 500)); 
+  s.setAttribute("y", Math.floor(Math.random() * 500));
+  s.setAttribute("fill", colors[Math.floor(Math.random() * colors.length)]);
+  s.style.transform = "rotate(" + rotate + "deg)";
+  svg.appendChild(s);
+}
+
+function drawDash() { 
+  let d = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  let dimension = Math.floor(Math.random() * 100);
+  let rotate = Math.floor(Math.random() * 500);
+  d.setAttribute("width", dimension/10);
+  d.setAttribute("height", dimension);
+  d.setAttribute("x", Math.floor(Math.random() * 500)); 
+  d.setAttribute("y", Math.floor(Math.random() * 500));
+  d.setAttribute("fill", colors[Math.floor(Math.random() * colors.length)]);
+  d.style.transform = "rotate(" + rotate + "deg)";
+  svg.appendChild(d);
+}
+
+function drawRandom() { 
+  for (i = 0; i < 100; i++) {
+    setTimeout( function timer(){
+      var n = Math.floor(Math.random() * 3);
+      console.log(n)
+      switch(n) {
+        case 0: 
+          drawCircle();
+          break;
+        case 1: 
+          drawSquare();
+          break;
+        case 2: 
+          drawDash();
+          break;
+      }
+    }, i*5 );
+  }
+}
+
+//Remove all SVG shapes from DOM
+function removeAll() {
+  while (svg.firstChild) {
+    svg.removeChild(svg.lastChild);
+  }
+}
+
+//On click, remove all shapes and draw new shapes
+svg.addEventListener("click", function(){
+  removeAll();
+  drawRandom();
+});
+
+//On page load, draw new shapes
+drawRandom();
\ No newline at end of file
diff --git a/rgbconfettimyk-generative-art/dist/style.css b/rgbconfettimyk-generative-art/dist/style.css
new file mode 100644
index 0000000..07539ab
--- /dev/null
+++ b/rgbconfettimyk-generative-art/dist/style.css
@@ -0,0 +1,17 @@
+html, body { margin:0; padding:0; background: #111111; cursor: crosshair; }
+
+svg { position:fixed; top:0; bottom:0; left:0; right:0 }
+
+path, rect, circle {
+  mix-blend-mode: screen;
+  animation: fadeIn 150ms ease-in;
+}
+
+@keyframes fadeIn {
+  0%{ 
+    opacity: 0;
+  } 
+  100% {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/rgbconfettimyk-generative-art/license.txt b/rgbconfettimyk-generative-art/license.txt
new file mode 100644
index 0000000..6bf6c0c
--- /dev/null
+++ b/rgbconfettimyk-generative-art/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Rob DiMarzo (https://codepen.io/robdimarzo/pen/oNYjQZm)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/rgbconfettimyk-generative-art/src/index.html b/rgbconfettimyk-generative-art/src/index.html
new file mode 100644
index 0000000..24360a0
--- /dev/null
+++ b/rgbconfettimyk-generative-art/src/index.html
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500"></svg>
\ No newline at end of file
diff --git a/rgbconfettimyk-generative-art/src/script.js b/rgbconfettimyk-generative-art/src/script.js
new file mode 100644
index 0000000..1bd09c3
--- /dev/null
+++ b/rgbconfettimyk-generative-art/src/script.js
@@ -0,0 +1,73 @@
+const svg = document.getElementById("svg");
+const colors = ["Red", "Lime", "Blue"];
+
+function drawCircle() { 
+  let c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  c.setAttribute("r", Math.floor(Math.random() * 50));
+  c.setAttribute("cx", Math.floor(Math.random() * 500)); 
+  c.setAttribute("cy", Math.floor(Math.random() * 500));
+  c.setAttribute("fill", colors[Math.floor(Math.random() * colors.length)]);
+  svg.appendChild(c);
+}
+
+function drawSquare() { 
+  let s = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  let dimension = Math.floor(Math.random() * 350);
+  let rotate = Math.floor(Math.random() * 500);
+  s.setAttribute("width", dimension);
+  s.setAttribute("height", dimension);
+  s.setAttribute("x", Math.floor(Math.random() * 500)); 
+  s.setAttribute("y", Math.floor(Math.random() * 500));
+  s.setAttribute("fill", colors[Math.floor(Math.random() * colors.length)]);
+  s.style.transform = "rotate(" + rotate + "deg)";
+  svg.appendChild(s);
+}
+
+function drawDash() { 
+  let d = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  let dimension = Math.floor(Math.random() * 100);
+  let rotate = Math.floor(Math.random() * 500);
+  d.setAttribute("width", dimension/10);
+  d.setAttribute("height", dimension);
+  d.setAttribute("x", Math.floor(Math.random() * 500)); 
+  d.setAttribute("y", Math.floor(Math.random() * 500));
+  d.setAttribute("fill", colors[Math.floor(Math.random() * colors.length)]);
+  d.style.transform = "rotate(" + rotate + "deg)";
+  svg.appendChild(d);
+}
+
+function drawRandom() { 
+  for (i = 0; i < 100; i++) {
+    setTimeout( function timer(){
+      var n = Math.floor(Math.random() * 3);
+      console.log(n)
+      switch(n) {
+        case 0: 
+          drawCircle();
+          break;
+        case 1: 
+          drawSquare();
+          break;
+        case 2: 
+          drawDash();
+          break;
+      }
+    }, i*5 );
+  }
+}
+
+//Remove all SVG shapes from DOM
+function removeAll() {
+  while (svg.firstChild) {
+    svg.removeChild(svg.lastChild);
+  }
+}
+
+//On click, remove all shapes and draw new shapes
+svg.addEventListener("click", function(){
+  removeAll();
+  drawRandom();
+});
+
+//On page load, draw new shapes
+drawRandom();
\ No newline at end of file
diff --git a/rgbconfettimyk-generative-art/src/style.css b/rgbconfettimyk-generative-art/src/style.css
new file mode 100644
index 0000000..07539ab
--- /dev/null
+++ b/rgbconfettimyk-generative-art/src/style.css
@@ -0,0 +1,17 @@
+html, body { margin:0; padding:0; background: #111111; cursor: crosshair; }
+
+svg { position:fixed; top:0; bottom:0; left:0; right:0 }
+
+path, rect, circle {
+  mix-blend-mode: screen;
+  animation: fadeIn 150ms ease-in;
+}
+
+@keyframes fadeIn {
+  0%{ 
+    opacity: 0;
+  } 
+  100% {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/risograph-gradient-effect-with-svg/README.markdown b/risograph-gradient-effect-with-svg/README.markdown
new file mode 100644
index 0000000..b7883a4
--- /dev/null
+++ b/risograph-gradient-effect-with-svg/README.markdown
@@ -0,0 +1,5 @@
+# Risograph Gradient Effect with SVG
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/chriskirknielsen/pen/rNmgXyV](https://codepen.io/chriskirknielsen/pen/rNmgXyV).
+
+
diff --git a/risograph-gradient-effect-with-svg/dist/index.html b/risograph-gradient-effect-with-svg/dist/index.html
new file mode 100644
index 0000000..f2747e2
--- /dev/null
+++ b/risograph-gradient-effect-with-svg/dist/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Risograph Gradient Effect with SVG</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg xmlns="http://www.w3.org/2000/svg" class="svg-filter">
+	<defs>
+		<filter id="noise">
+			<feGaussianBlur in="SourceGraphic" stdDeviation="64" result="blur" />
+			<feTurbulence result="waves" type="turbulence" baseFrequency="0.735 0.771" numOctaves="1" seed="256"></feTurbulence>
+			<feDisplacementMap in="blur" in2="waves" scale="320" xChannelSelector="R" yChannelSelector="B" result="ripples"></feDisplacementMap>
+			<feComposite in="waves" in2="ripples" operator="arithmetic" k1="1" k2="0" k3="1" k4="0"></feComposite>
+		</filter>
+	</defs>
+</svg>
+
+<div class="wrap">
+	<div class="shape noisy"></div>
+	<div class="shape gradient"></div>
+</div>
+<p>Looks best on Retina display.<br>Click anywhere to toggle B&amp;W mode.</p>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/risograph-gradient-effect-with-svg/dist/script.js b/risograph-gradient-effect-with-svg/dist/script.js
new file mode 100644
index 0000000..bed97d6
--- /dev/null
+++ b/risograph-gradient-effect-with-svg/dist/script.js
@@ -0,0 +1 @@
+document.body.onclick = () => document.body.classList.toggle('bw');
\ No newline at end of file
diff --git a/risograph-gradient-effect-with-svg/dist/style.css b/risograph-gradient-effect-with-svg/dist/style.css
new file mode 100644
index 0000000..5700e1f
--- /dev/null
+++ b/risograph-gradient-effect-with-svg/dist/style.css
@@ -0,0 +1,62 @@
+.svg-filter {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+}
+
+.wrap {
+  position: relative;
+  overflow: hidden;
+  width: 300px;
+  height: 300px;
+  background: var(--ac, hotpink);
+  filter: blur(0.33px);
+  -webkit-clip-path: polygon(0 0, 50% 0, 100% 50%, 100% 100%, 50% 100%, 0 50%);
+          clip-path: polygon(0 0, 50% 0, 100% 50%, 100% 100%, 50% 100%, 0 50%);
+}
+
+.shape {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--fg, white);
+}
+
+.gradient {
+  background: radial-gradient(circle at 100% 100%, var(--fg, white) 10%, 33%, var(--fg-alpha, transparent) 66.7%);
+}
+
+.noisy {
+  border-radius: 50%;
+  filter: url("#noise");
+}
+
+/* Presentational styles below */
+body {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  color: var(--fg, white);
+  background: var(--bg, black);
+}
+
+:root {
+  --bg: #1d122f;
+  --fg: #ffe4c2;
+  --fg-alpha: #ffe4c200;
+  --ac: #ff0196;
+}
+
+body.bw {
+  --bg: #000000;
+  --fg: #ffffff;
+  --fg-alpha: #ffffff00;
+  --ac: #000000;
+}
+
+p {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/risograph-gradient-effect-with-svg/license.txt b/risograph-gradient-effect-with-svg/license.txt
new file mode 100644
index 0000000..9354697
--- /dev/null
+++ b/risograph-gradient-effect-with-svg/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Christopher Kirk-Nielsen (https://codepen.io/chriskirknielsen/pen/rNmgXyV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/risograph-gradient-effect-with-svg/src/index.svg b/risograph-gradient-effect-with-svg/src/index.svg
new file mode 100644
index 0000000..82c27ec
--- /dev/null
+++ b/risograph-gradient-effect-with-svg/src/index.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="svg-filter">
+	<defs>
+		<filter id="noise">
+			<feGaussianBlur in="SourceGraphic" stdDeviation="64" result="blur" />
+			<feTurbulence result="waves" type="turbulence" baseFrequency="0.735 0.771" numOctaves="1" seed="256"></feTurbulence>
+			<feDisplacementMap in="blur" in2="waves" scale="320" xChannelSelector="R" yChannelSelector="B" result="ripples"></feDisplacementMap>
+			<feComposite in="waves" in2="ripples" operator="arithmetic" k1="1" k2="0" k3="1" k4="0"></feComposite>
+		</filter>
+	</defs>
+</svg>
+
+<div class="wrap">
+	<div class="shape noisy"></div>
+	<div class="shape gradient"></div>
+</div>
+<p>Looks best on Retina display.<br>Click anywhere to toggle B&amp;W mode.</p>
\ No newline at end of file
diff --git a/risograph-gradient-effect-with-svg/src/script.js b/risograph-gradient-effect-with-svg/src/script.js
new file mode 100644
index 0000000..bed97d6
--- /dev/null
+++ b/risograph-gradient-effect-with-svg/src/script.js
@@ -0,0 +1 @@
+document.body.onclick = () => document.body.classList.toggle('bw');
\ No newline at end of file
diff --git a/risograph-gradient-effect-with-svg/src/style.scss b/risograph-gradient-effect-with-svg/src/style.scss
new file mode 100644
index 0000000..48dd739
--- /dev/null
+++ b/risograph-gradient-effect-with-svg/src/style.scss
@@ -0,0 +1,69 @@
+.svg-filter {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+}
+.wrap {
+	position: relative;
+	overflow: hidden;
+	
+	width: 300px;
+	height: 300px;
+	
+	// border-radius: 50%;
+	background: var(--ac, hotpink); // Add an accent colour in the mix
+	
+	filter: blur(0.33px);
+	clip-path: polygon(0 0, 50% 0, 100% 50%, 100% 100%, 50% 100%, 0 50%); // Diamond-ish shape
+}
+
+.shape {
+	position: absolute;
+	top: 0;
+	left: 0;
+	
+	width: 100%;
+	height: 100%;
+	// border-radius: 50%;
+
+	background: var(--fg, white);
+}
+
+.gradient { // Reinforce the "real" gradient ramp
+	background: radial-gradient(circle at 100% 100%, var(--fg, white) 10%, 33%, var(--fg-alpha, transparent) 66.7%);
+	// opacity: 0.2;
+}
+
+.noisy {
+	border-radius: 50%; // Matching the radial gradient, kinda smoothes it out a bit
+	filter: url("#noise");
+}
+
+/* Presentational styles below */
+body {
+	min-height: 100vh;
+	display: grid;
+	place-items: center;
+	
+	color: var(--fg, white);
+	background: var(--bg, black);
+}
+
+:root {
+	--bg: #1d122f;
+	--fg: #ffe4c2;
+	--fg-alpha: #ffe4c200; // --fg with 00 at the end for alpha=0
+	--ac: #ff0196;
+}
+
+body.bw {
+	--bg: #000000;
+	--fg: #ffffff;
+	--fg-alpha: #ffffff00; // --fg with 00 at the end for alpha=0
+	--ac: #000000;
+}
+
+p {
+	text-align: center;
+}
\ No newline at end of file
diff --git a/rotating-thing/README.markdown b/rotating-thing/README.markdown
new file mode 100644
index 0000000..06778d3
--- /dev/null
+++ b/rotating-thing/README.markdown
@@ -0,0 +1,5 @@
+# Rotating thing
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/murilopolese/pen/aqRGKb](https://codepen.io/murilopolese/pen/aqRGKb).
+
+
diff --git a/rotating-thing/dist/index.html b/rotating-thing/dist/index.html
new file mode 100644
index 0000000..4501ebb
--- /dev/null
+++ b/rotating-thing/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Rotating thing</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/rotating-thing/dist/script.js b/rotating-thing/dist/script.js
new file mode 100644
index 0000000..f7ede1d
--- /dev/null
+++ b/rotating-thing/dist/script.js
@@ -0,0 +1,32 @@
+var rings = 40;
+var space = 10;
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  background(0);
+  noStroke();
+  colorMode(HSB, 100);
+}
+
+function draw() {
+  background(0);
+  translate(width/2, height/2);
+  
+  var speed = radians(millis()/300.0);
+  for(var i = 0; i < rings; i++) {
+    rotate(speed*(i/100.0));
+    
+    //fill( ((millis()/100.0)+i*3.0) %100, 100, 100);
+    for(var j = 0; j < i; j += 0.5) {
+      var size = 4 + (2*sin(radians(i*space+(millis()/10.0))));
+      ellipse(
+        space*i*cos( radians(j * (360.0/i)) ),
+        space*i*sin( radians(j * (360.0/i)) ),
+        size, size
+      );
+    
+    }
+   
+    
+  }
+}
\ No newline at end of file
diff --git a/rotating-thing/dist/style.css b/rotating-thing/dist/style.css
new file mode 100644
index 0000000..6092539
--- /dev/null
+++ b/rotating-thing/dist/style.css
@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}
\ No newline at end of file
diff --git a/rotating-thing/license.txt b/rotating-thing/license.txt
new file mode 100644
index 0000000..44f0c96
--- /dev/null
+++ b/rotating-thing/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Murilo Polese (https://codepen.io/murilopolese/pen/aqRGKb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/rotating-thing/src/index.html b/rotating-thing/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/rotating-thing/src/script.js b/rotating-thing/src/script.js
new file mode 100644
index 0000000..f7ede1d
--- /dev/null
+++ b/rotating-thing/src/script.js
@@ -0,0 +1,32 @@
+var rings = 40;
+var space = 10;
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  background(0);
+  noStroke();
+  colorMode(HSB, 100);
+}
+
+function draw() {
+  background(0);
+  translate(width/2, height/2);
+  
+  var speed = radians(millis()/300.0);
+  for(var i = 0; i < rings; i++) {
+    rotate(speed*(i/100.0));
+    
+    //fill( ((millis()/100.0)+i*3.0) %100, 100, 100);
+    for(var j = 0; j < i; j += 0.5) {
+      var size = 4 + (2*sin(radians(i*space+(millis()/10.0))));
+      ellipse(
+        space*i*cos( radians(j * (360.0/i)) ),
+        space*i*sin( radians(j * (360.0/i)) ),
+        size, size
+      );
+    
+    }
+   
+    
+  }
+}
\ No newline at end of file
diff --git a/rotating-thing/src/style.css b/rotating-thing/src/style.css
new file mode 100644
index 0000000..6092539
--- /dev/null
+++ b/rotating-thing/src/style.css
@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}
\ No newline at end of file
diff --git a/rounded-dashes/README.markdown b/rounded-dashes/README.markdown
new file mode 100644
index 0000000..c9b7aa6
--- /dev/null
+++ b/rounded-dashes/README.markdown
@@ -0,0 +1,6 @@
+# Rounded dashes
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/t_afif/pen/bGYEMgG](https://codepen.io/t_afif/pen/bGYEMgG).
+
+CSS Tip!
+https://twitter.com/ChallengesCss/status/1488235955354062860
diff --git a/rounded-dashes/dist/index.html b/rounded-dashes/dist/index.html
new file mode 100644
index 0000000..a2e4c9a
--- /dev/null
+++ b/rounded-dashes/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Rounded dashes</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>Rounded Dashes</h1>
+<h1 style="--w:10px;--h:0.1em;--c:#7cbb00">Dashes</h1>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/rounded-dashes/dist/style.css b/rounded-dashes/dist/style.css
new file mode 100644
index 0000000..17ae718
--- /dev/null
+++ b/rounded-dashes/dist/style.css
@@ -0,0 +1,33 @@
+h1 {
+  --w: 20px;    /* the width of dashes */
+  --h: 0.2em;   /* the height of dashes */
+  --c: #4b9ed9; /* the color */
+  
+  padding-bottom: var(--h);
+  position: relative;
+}
+h1:before {
+  content: "";
+  position: absolute;
+  inset: calc(100% - var(--h)) 0 0;
+  border-radius: var(--h);
+  background: 
+   radial-gradient(circle closest-side,var(--c) 90%,#0000 105%) 0/var(--w),
+   linear-gradient(90deg,var(--c) 50%, #0000 0) calc(var(--w)/2)/calc(2*var(--w));
+}
+
+
+
+body {
+  height: 100vh;
+  margin: 0;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+}
+h1 {
+  font-family: system-ui, sans-serif;
+  font-size: 3rem;
+  padding-inline: .1em;
+  margin: 10px 0;
+}
\ No newline at end of file
diff --git a/rounded-dashes/license.txt b/rounded-dashes/license.txt
new file mode 100644
index 0000000..13e0a35
--- /dev/null
+++ b/rounded-dashes/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Temani Afif (https://codepen.io/t_afif/pen/bGYEMgG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/rounded-dashes/src/index.html b/rounded-dashes/src/index.html
new file mode 100644
index 0000000..0690c90
--- /dev/null
+++ b/rounded-dashes/src/index.html
@@ -0,0 +1,2 @@
+<h1>Rounded Dashes</h1>
+<h1 style="--w:10px;--h:0.1em;--c:#7cbb00">Dashes</h1>
\ No newline at end of file
diff --git a/rounded-dashes/src/style.css b/rounded-dashes/src/style.css
new file mode 100644
index 0000000..17ae718
--- /dev/null
+++ b/rounded-dashes/src/style.css
@@ -0,0 +1,33 @@
+h1 {
+  --w: 20px;    /* the width of dashes */
+  --h: 0.2em;   /* the height of dashes */
+  --c: #4b9ed9; /* the color */
+  
+  padding-bottom: var(--h);
+  position: relative;
+}
+h1:before {
+  content: "";
+  position: absolute;
+  inset: calc(100% - var(--h)) 0 0;
+  border-radius: var(--h);
+  background: 
+   radial-gradient(circle closest-side,var(--c) 90%,#0000 105%) 0/var(--w),
+   linear-gradient(90deg,var(--c) 50%, #0000 0) calc(var(--w)/2)/calc(2*var(--w));
+}
+
+
+
+body {
+  height: 100vh;
+  margin: 0;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+}
+h1 {
+  font-family: system-ui, sans-serif;
+  font-size: 3rem;
+  padding-inline: .1em;
+  margin: 10px 0;
+}
\ No newline at end of file
diff --git a/running-waves-with-d3/README.markdown b/running-waves-with-d3/README.markdown
new file mode 100644
index 0000000..642834b
--- /dev/null
+++ b/running-waves-with-d3/README.markdown
@@ -0,0 +1,5 @@
+# Running Waves with D3
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/gnykka/pen/yLVpyJb](https://codepen.io/gnykka/pen/yLVpyJb).
+
+Use ridgeline chart to create waves.
diff --git a/running-waves-with-d3/dist/index.html b/running-waves-with-d3/dist/index.html
new file mode 100644
index 0000000..a2c3f2a
--- /dev/null
+++ b/running-waves-with-d3/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Running Waves with D3</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="chart"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/running-waves-with-d3/dist/script.js b/running-waves-with-d3/dist/script.js
new file mode 100644
index 0000000..da06a9d
--- /dev/null
+++ b/running-waves-with-d3/dist/script.js
@@ -0,0 +1,104 @@
+const kernelDensityEstimator = (kernel, X) => (
+  V => X.map(
+    x => ([x, d3.mean(V, v => kernel(x - v))])
+  )
+);
+const kernelEpanechnikov = k => (
+  v => (Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0)
+);
+
+const $container = document.querySelector('#chart');
+
+const wavesCount = 50;
+const pointsCount = 80;
+const data = [];
+const colors = {};
+
+for (let i = 0; i < pointsCount; i++) {
+  const item = {};
+
+  for (let j = 0; j < wavesCount; j++) {
+    item[j] = Math.round(Math.random() * 100);
+  }
+  data.push(item);
+}
+for (let j = 0; j < wavesCount; j++) {
+  const l = 0.5 + Math.random() * 0.5;
+  colors[j] = `hsl(204, 61%, ${l * 100}%)` ;
+}
+
+const categories = Object.keys(data[0]);
+
+let size = 0;
+
+const svg = d3
+  .select($container)
+  .append('svg');
+const group = svg.append('g');
+
+const x = d3.scaleLinear().domain([0, 100]);
+const y = d3.scaleLinear().domain([0, 0.4]);
+const yName = d3.scaleBand().domain(categories);
+
+const onResize = () => {
+  size = Math.min(
+    $container.clientWidth * 0.5,
+    $container.clientHeight * 0.5
+  );
+  
+  svg.attr('width', size).attr('height', size);
+  
+  x.range([0, size]);
+  y.range([size, 0]);
+  yName.range([0, size]);
+};
+
+const onRender = () => {
+  const kde = kernelDensityEstimator(
+    kernelEpanechnikov(5),
+    x.ticks(100)
+  );
+
+  const allDensity = [];
+
+  for (let i = 0; i < wavesCount; i++) {
+    const key = categories[i];
+    const density = kde(data.map(d => d[key]));
+
+    allDensity.push({ key, density });
+  }
+  
+  const line = d3.line()
+    .curve(d3.curveBasis)
+    .x(d => x(d[0]))
+    .y(d => y(d[1]));
+  
+  svg.selectAll('path')
+    .remove();
+
+  svg.selectAll('path')
+    .data(allDensity)
+    .enter()
+    .append('path')
+    .attr('transform', d => `translate(0,${yName(d.key) - size + 10})`)
+    .attr('fill', d => colors[d.key])
+    .datum(d => d.density)
+    .attr('d', line);
+};
+
+const loop = () => {
+  for (let i = 0; i < wavesCount; i++) {
+    for (let j = 0; j < pointsCount - 1; j++) {
+      data[j][i] = data[j + 1][i];
+    }
+    data[pointsCount - 1][i] = Math.round(Math.random() * 100);
+  }
+  
+  onRender();
+  requestAnimationFrame(loop);
+}
+
+onResize();
+loop();
+
+window.addEventListener('resize', onResize);
\ No newline at end of file
diff --git a/running-waves-with-d3/dist/style.css b/running-waves-with-d3/dist/style.css
new file mode 100644
index 0000000..42e656f
--- /dev/null
+++ b/running-waves-with-d3/dist/style.css
@@ -0,0 +1,22 @@
+html, body, #chart {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+#chart {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+svg {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-shadow: 2px 5px 10px 0px #ddd;
+}
+
+path {
+  stroke: #333;
+  stroke-width: 0.4;
+}
\ No newline at end of file
diff --git a/running-waves-with-d3/license.txt b/running-waves-with-d3/license.txt
new file mode 100644
index 0000000..413a334
--- /dev/null
+++ b/running-waves-with-d3/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Nataliya (https://codepen.io/gnykka/pen/yLVpyJb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/running-waves-with-d3/src/index.html b/running-waves-with-d3/src/index.html
new file mode 100644
index 0000000..68ad18d
--- /dev/null
+++ b/running-waves-with-d3/src/index.html
@@ -0,0 +1 @@
+<div id="chart"></div>
\ No newline at end of file
diff --git a/running-waves-with-d3/src/script.js b/running-waves-with-d3/src/script.js
new file mode 100644
index 0000000..da06a9d
--- /dev/null
+++ b/running-waves-with-d3/src/script.js
@@ -0,0 +1,104 @@
+const kernelDensityEstimator = (kernel, X) => (
+  V => X.map(
+    x => ([x, d3.mean(V, v => kernel(x - v))])
+  )
+);
+const kernelEpanechnikov = k => (
+  v => (Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0)
+);
+
+const $container = document.querySelector('#chart');
+
+const wavesCount = 50;
+const pointsCount = 80;
+const data = [];
+const colors = {};
+
+for (let i = 0; i < pointsCount; i++) {
+  const item = {};
+
+  for (let j = 0; j < wavesCount; j++) {
+    item[j] = Math.round(Math.random() * 100);
+  }
+  data.push(item);
+}
+for (let j = 0; j < wavesCount; j++) {
+  const l = 0.5 + Math.random() * 0.5;
+  colors[j] = `hsl(204, 61%, ${l * 100}%)` ;
+}
+
+const categories = Object.keys(data[0]);
+
+let size = 0;
+
+const svg = d3
+  .select($container)
+  .append('svg');
+const group = svg.append('g');
+
+const x = d3.scaleLinear().domain([0, 100]);
+const y = d3.scaleLinear().domain([0, 0.4]);
+const yName = d3.scaleBand().domain(categories);
+
+const onResize = () => {
+  size = Math.min(
+    $container.clientWidth * 0.5,
+    $container.clientHeight * 0.5
+  );
+  
+  svg.attr('width', size).attr('height', size);
+  
+  x.range([0, size]);
+  y.range([size, 0]);
+  yName.range([0, size]);
+};
+
+const onRender = () => {
+  const kde = kernelDensityEstimator(
+    kernelEpanechnikov(5),
+    x.ticks(100)
+  );
+
+  const allDensity = [];
+
+  for (let i = 0; i < wavesCount; i++) {
+    const key = categories[i];
+    const density = kde(data.map(d => d[key]));
+
+    allDensity.push({ key, density });
+  }
+  
+  const line = d3.line()
+    .curve(d3.curveBasis)
+    .x(d => x(d[0]))
+    .y(d => y(d[1]));
+  
+  svg.selectAll('path')
+    .remove();
+
+  svg.selectAll('path')
+    .data(allDensity)
+    .enter()
+    .append('path')
+    .attr('transform', d => `translate(0,${yName(d.key) - size + 10})`)
+    .attr('fill', d => colors[d.key])
+    .datum(d => d.density)
+    .attr('d', line);
+};
+
+const loop = () => {
+  for (let i = 0; i < wavesCount; i++) {
+    for (let j = 0; j < pointsCount - 1; j++) {
+      data[j][i] = data[j + 1][i];
+    }
+    data[pointsCount - 1][i] = Math.round(Math.random() * 100);
+  }
+  
+  onRender();
+  requestAnimationFrame(loop);
+}
+
+onResize();
+loop();
+
+window.addEventListener('resize', onResize);
\ No newline at end of file
diff --git a/running-waves-with-d3/src/style.css b/running-waves-with-d3/src/style.css
new file mode 100644
index 0000000..42e656f
--- /dev/null
+++ b/running-waves-with-d3/src/style.css
@@ -0,0 +1,22 @@
+html, body, #chart {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+#chart {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+svg {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-shadow: 2px 5px 10px 0px #ddd;
+}
+
+path {
+  stroke: #333;
+  stroke-width: 0.4;
+}
\ No newline at end of file
diff --git a/saul-bass-ified/README.markdown b/saul-bass-ified/README.markdown
new file mode 100644
index 0000000..7d3756d
--- /dev/null
+++ b/saul-bass-ified/README.markdown
@@ -0,0 +1,5 @@
+# Saul Bass-ified
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/kuukienator/pen/qBrKVYQ](https://codepen.io/kuukienator/pen/qBrKVYQ).
+
+
diff --git a/saul-bass-ified/dist/index.html b/saul-bass-ified/dist/index.html
new file mode 100644
index 0000000..de7734a
--- /dev/null
+++ b/saul-bass-ified/dist/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Saul Bass-ified</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="canvasContainer">
+  <canvas></canvas>
+  <p>
+    <b id="regenerate">"SPACE"</b> to regenerate.
+    <br>
+    <b id="recolor">"C"</b> to recolor.
+  </p>
+  <br>
+</div>
+<div class="exportControls">
+  <button id="save">Save image</button>
+  <button id="record">Record and export</button>
+  <br>
+  <div class="downloads" style="display: flex;flex-direction: column;"></div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/saul-bass-ified/dist/script.js b/saul-bass-ified/dist/script.js
new file mode 100644
index 0000000..b85e3e5
--- /dev/null
+++ b/saul-bass-ified/dist/script.js
@@ -0,0 +1,288 @@
+let currentRects;
+let isRecording = false;
+const simplex = new SimplexNoise("foo");
+
+const recordButton = document.querySelector("#record");
+const downloadsElement = document.querySelector(".downloads");
+const saveImageButton = document.querySelector("#save");
+const regenreateButton = document.querySelector("#regenerate");
+const recolorButtton = document.querySelector("#recolor");
+
+const canvas = document.querySelector("canvas");
+const ctx = canvas.getContext("2d");
+const WIDTH = 2400;
+const HEIGHT = 3200;
+
+const SCALE_FACTOR = WIDTH / 600;
+
+canvas.width = WIDTH;
+canvas.height = HEIGHT;
+
+function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min) + min);
+}
+
+const getColor = () => {
+  const weightedColors = [
+    { v: "#6d467e", w: 1 },
+    { v: "#234277", w: 1 },
+    { v: "#13100d", w: 3 }
+  ];
+
+  /*
+  const weightedColors = [
+    { v: "#f22321", w: 1 },
+    { v: "#13100d", w: 2 }
+  ];
+  */
+
+  /*
+  const weightedColors = [
+    { v: "#126161", w: 2 },
+    { v: "#c4a13f", w: 2 },
+    { v: "#17120b", w: 1 }
+  ];
+  */
+
+  const colors = weightedColors.flatMap((e) =>
+    Array.from(new Array(e.w), (_) => e.v)
+  );
+
+  return colors[getRandomInt(0, colors.length)];
+  // return "#13100d";
+};
+
+const drawPolygon = (ctx, { points, color }) => {
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  points.forEach((p) => ctx.lineTo(p.x, p.y));
+  ctx.lineTo(points[0].x, points[0].y);
+  ctx.fill();
+};
+
+const scatterPoints = (points, min = -10, max = 10) =>
+  points.map((point) => ({
+    ox: point.ox || point.x,
+    oy: point.oy || point.y,
+    // x: simplex.noise2D(point.ox || point.x, point.oy || point.y) * 10,
+    // y: simplex.noise2D(point.ox || point.x, point.oy || point.y) * 10
+    x: (point.ox || point.x) + getRandomInt(min, max),
+    y: (point.oy || point.y) + getRandomInt(min, max)
+  }));
+
+const clear = (ctx, w, h) => {
+  ctx.fillStyle = "#f9f5ea";
+  ctx.fillRect(0, 0, w, h);
+};
+
+const getRectConfiguration = () => {
+  const rectConfigs = [
+    [1],
+    [0.5, 0.5],
+    [1 / 3, 1 / 3, 1 / 3],
+    [2 / 3, 1 / 3],
+    [1 / 3, 2 / 3],
+    [1 / 4, 3 / 4],
+    [1 / 4, 2 / 4, 1 / 4]
+  ];
+  return rectConfigs[getRandomInt(0, rectConfigs.length)];
+  // return rectConfigs[6];
+};
+
+const createRow = (i, padding, rowHeight, lineSpacing) => {};
+
+const getPreviousRectWidth = (rectConfig, w, currentIndex) =>
+  rectConfig.slice(0, currentIndex).reduce((acc, cv) => acc + w * cv, 0);
+
+const drawFilter = (ctx, w, h) => {
+  const offScreenCanvas = document.createElement("canvas");
+  offScreenCanvas.width = w;
+  offScreenCanvas.height = h;
+  const offScreenContext = offScreenCanvas.getContext("2d");
+  const imageData = offScreenContext.createImageData(w, h);
+
+  for (let x = 0; x < w; x++) {
+    for (let y = 0; y < h; y++) {
+      const pixelIndex = h * 4 * x + y * 4;
+      imageData.data[pixelIndex + 0] = 0;
+      imageData.data[pixelIndex + 1] = 0;
+      imageData.data[pixelIndex + 2] = 0;
+      imageData.data[pixelIndex + 3] =
+        25 + 40 * Math.sin(simplex.noise2D(y, x) * Math.random());
+    }
+  }
+  //ctx.globalCompositeOperation = "source-in";
+  offScreenContext.putImageData(imageData, 0, 0);
+
+  ctx.drawImage(offScreenCanvas, 0, 0);
+};
+
+const draw = (ctx, w, h, predefinedRects) => {
+  clear(ctx, w, h);
+  if (predefinedRects) {
+    predefinedRects.forEach((rect) => drawPolygon(ctx, rect));
+    // drawFilter(ctx, w, h);
+    return predefinedRects;
+  }
+  const ROWS = 5;
+  const PADDING = 20 * SCALE_FACTOR;
+  const LINE_SPACING = 40 * SCALE_FACTOR;
+  // const ROW_HEIGHT = 100;
+  const ROW_HEIGHT = h / ROWS - LINE_SPACING;
+
+  const width = w - PADDING * 2;
+
+  const rects = [];
+  for (let i = 0; i < ROWS; i++) {
+    const rectConfig = getRectConfiguration();
+    for (let j = 0; j < rectConfig.length; j++) {
+      // TODO: check this width
+      const isLastRect = j === rectConfig.length - 1;
+      const rectWidth =
+        width * rectConfig[j] -
+        (rectConfig.length > 1 && !isLastRect ? LINE_SPACING / 2 : 0);
+      const rectHeight = ROW_HEIGHT;
+      // const xOffset = !!rectConfig[j - 1] ? width * rectConfig[j - 1] : 0;
+      const xOffset = getPreviousRectWidth(rectConfig, width, j);
+      const x = xOffset + PADDING;
+      const y = PADDING + (ROW_HEIGHT + LINE_SPACING) * i;
+
+      const points = scatterPoints([
+        { x, y },
+        { x: x + rectWidth, y },
+        { x: x + rectWidth, y: y + rectHeight },
+        { x, y: y + rectHeight }
+      ]);
+
+      const color = getColor();
+
+      rects.push({ points, color });
+    }
+    // rects.forEach((rect) => drawPolygon(ctx, rect));
+
+    /*
+    const x = 0 + PADDING;
+    const y = 0 + PADDING + (ROW_HEIGHT + LINE_SPACING) * i;
+    const width = w - PADDING * 2;
+    const height = ROW_HEIGHT;
+
+    const points = scatterPoints([
+      { x, y },
+      { x: x + width, y },
+      { x: x + width, y: y + height },
+      { x, y: y + height }
+    ]);
+
+    drawPolygon(ctx, points);
+    */
+    // ctx.fillRect(x, y, width, height);
+  }
+
+  rects.forEach((rect) => drawPolygon(ctx, rect));
+
+  // drawFilter(ctx, w, h);
+  return rects;
+};
+
+currentRects = draw(ctx, WIDTH, HEIGHT);
+
+setInterval(() => {
+  currentRects = draw(
+    ctx,
+    WIDTH,
+    HEIGHT,
+    currentRects.map((r) => ({ ...r, points: scatterPoints(r.points) }))
+  );
+}, 130);
+
+recolorButtton.addEventListener("click", () => {
+  currentRects = draw(
+    ctx,
+    WIDTH,
+    HEIGHT,
+    currentRects.map((r) => ({ ...r, color: getColor() }))
+  );
+});
+
+regenreateButton.addEventListener("click", () => {
+  currentRects = draw(ctx, WIDTH, HEIGHT);
+});
+
+document.addEventListener(
+  "keypress",
+  function (e) {
+    if (e.code === "Space") {
+      e.preventDefault();
+      e.stopPropagation();
+      currentRects = draw(ctx, WIDTH, HEIGHT);
+    }
+
+    if (e.code === "KeyC") {
+      currentRects = draw(
+        ctx,
+        WIDTH,
+        HEIGHT,
+        currentRects.map((r) => ({ ...r, color: getColor() }))
+      );
+    }
+  },
+  false
+);
+
+const updateRecordButton = (isRecording, button) => {
+  if (!isRecording) {
+    button.innerText = "Record and export";
+    button.disabled = false;
+  } else {
+    button.innerText = "Recording...";
+    button.disabled = true;
+  }
+};
+
+const record = (canvas, length = 5000) => {
+  isRecording = true;
+  updateRecordButton(isRecording, recordButton);
+  const chunks = [];
+  const stream = canvas.captureStream();
+  const rec = new MediaRecorder(stream, {
+    // mimeType: "video/mp4",
+    // mimeType: "video/webm;codecs:h265",
+    videoBitsPerSecond: 100000000
+  });
+  rec.ondataavailable = (e) => chunks.push(e.data);
+  rec.onstop = (e) => exportVideo(new Blob(chunks, { type: "video/mp4" }));
+  rec.start();
+  setTimeout(() => rec.stop(), length);
+};
+
+const exportVideo = (blob) => {
+  const a = document.createElement("a");
+  a.download = `saul-bassified-${Date.now()}.mp4`;
+  a.href = URL.createObjectURL(blob);
+  a.textContent = `Download "saul-bassified-${Date.now()}"`;
+  downloadsElement.appendChild(a);
+
+  isRecording = false;
+  updateRecordButton(isRecording, recordButton);
+};
+
+const exportImage = (canvas) => {
+  const a = document.createElement("a");
+  a.download = `saul-bassified-${Date.now()}.png`;
+  a.href = canvas.toDataURL("image/png");
+  a.textContent = `Save "saul-bassified-${Date.now()}"`;
+  downloadsElement.appendChild(a);
+};
+
+saveImageButton.addEventListener("click", () => {
+  exportImage(canvas);
+});
+
+recordButton.addEventListener("click", () => {
+  if (!isRecording) {
+    record(canvas, 15000);
+  }
+});
\ No newline at end of file
diff --git a/saul-bass-ified/dist/style.css b/saul-bass-ified/dist/style.css
new file mode 100644
index 0000000..1762fd6
--- /dev/null
+++ b/saul-bass-ified/dist/style.css
@@ -0,0 +1,24 @@
+body {
+  font-family: Georgia;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.canvasContainer {
+  display: flex;
+}
+.exportControls {
+  margin-top: 2em;
+}
+p {
+  font-size: 2rem;
+  align-self: center;
+  text-align: right;
+}
+canvas {
+  margin-right: 2rem;
+  max-height: 100vh;
+  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%),
+    0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
+}
\ No newline at end of file
diff --git a/saul-bass-ified/license.txt b/saul-bass-ified/license.txt
new file mode 100644
index 0000000..ab488dd
--- /dev/null
+++ b/saul-bass-ified/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Emmanuel Meinike (https://codepen.io/kuukienator/pen/qBrKVYQ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/saul-bass-ified/src/index.html b/saul-bass-ified/src/index.html
new file mode 100644
index 0000000..430cbb7
--- /dev/null
+++ b/saul-bass-ified/src/index.html
@@ -0,0 +1,15 @@
+<div class="canvasContainer">
+  <canvas></canvas>
+  <p>
+    <b id="regenerate">"SPACE"</b> to regenerate.
+    <br>
+    <b id="recolor">"C"</b> to recolor.
+  </p>
+  <br>
+</div>
+<div class="exportControls">
+  <button id="save">Save image</button>
+  <button id="record">Record and export</button>
+  <br>
+  <div class="downloads" style="display: flex;flex-direction: column;"></div>
+</div>
\ No newline at end of file
diff --git a/saul-bass-ified/src/script.js b/saul-bass-ified/src/script.js
new file mode 100644
index 0000000..7ab3f35
--- /dev/null
+++ b/saul-bass-ified/src/script.js
@@ -0,0 +1,288 @@
+let currentRects;
+let isRecording = false;
+const simplex = new SimplexNoise("foo");
+
+const recordButton = document.querySelector("#record");
+const downloadsElement = document.querySelector(".downloads");
+const saveImageButton = document.querySelector("#save");
+const regenreateButton = document.querySelector("#regenerate");
+const recolorButtton = document.querySelector("#recolor");
+
+const canvas = document.querySelector("canvas");
+const ctx = canvas.getContext("2d");
+const WIDTH = 2400;
+const HEIGHT = 3200;
+
+const SCALE_FACTOR = WIDTH / 600;
+
+canvas.width = WIDTH;
+canvas.height = HEIGHT;
+
+function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min) + min);
+}
+
+const getColor = () => {
+  const weightedColors = [
+    { v: "#6d467e", w: 1 },
+    { v: "#234277", w: 1 },
+    { v: "#13100d", w: 3 }
+  ];
+
+  /*
+  const weightedColors = [
+    { v: "#f22321", w: 1 },
+    { v: "#13100d", w: 2 }
+  ];
+  */
+
+  /*
+  const weightedColors = [
+    { v: "#126161", w: 2 },
+    { v: "#c4a13f", w: 2 },
+    { v: "#17120b", w: 1 }
+  ];
+  */
+
+  const colors = weightedColors.flatMap((e) =>
+    Array.from(new Array(e.w), (_) => e.v)
+  );
+
+  return colors[getRandomInt(0, colors.length)];
+  // return "#13100d";
+};
+
+const drawPolygon = (ctx, { points, color }) => {
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  points.forEach((p) => ctx.lineTo(p.x, p.y));
+  ctx.lineTo(points[0].x, points[0].y);
+  ctx.fill();
+};
+
+const scatterPoints = (points, min = -10, max = 10) =>
+  points.map((point) => ({
+    ox: point.ox || point.x,
+    oy: point.oy || point.y,
+    // x: simplex.noise2D(point.ox || point.x, point.oy || point.y) * 10,
+    // y: simplex.noise2D(point.ox || point.x, point.oy || point.y) * 10
+    x: (point.ox || point.x) + getRandomInt(min, max),
+    y: (point.oy || point.y) + getRandomInt(min, max)
+  }));
+
+const clear = (ctx, w, h) => {
+  ctx.fillStyle = "#f9f5ea";
+  ctx.fillRect(0, 0, w, h);
+};
+
+const getRectConfiguration = () => {
+  const rectConfigs = [
+    [1],
+    [0.5, 0.5],
+    [1 / 3, 1 / 3, 1 / 3],
+    [2 / 3, 1 / 3],
+    [1 / 3, 2 / 3],
+    [1 / 4, 3 / 4],
+    [1 / 4, 2 / 4, 1 / 4]
+  ];
+  return rectConfigs[getRandomInt(0, rectConfigs.length)];
+  // return rectConfigs[6];
+};
+
+const createRow = (i, padding, rowHeight, lineSpacing) => {};
+
+const getPreviousRectWidth = (rectConfig, w, currentIndex) =>
+  rectConfig.slice(0, currentIndex).reduce((acc, cv) => acc + w * cv, 0);
+
+const drawFilter = (ctx, w, h) => {
+  const offScreenCanvas = document.createElement("canvas");
+  offScreenCanvas.width = w;
+  offScreenCanvas.height = h;
+  const offScreenContext = offScreenCanvas.getContext("2d");
+  const imageData = offScreenContext.createImageData(w, h);
+
+  for (let x = 0; x < w; x++) {
+    for (let y = 0; y < h; y++) {
+      const pixelIndex = h * 4 * x + y * 4;
+      imageData.data[pixelIndex + 0] = 0;
+      imageData.data[pixelIndex + 1] = 0;
+      imageData.data[pixelIndex + 2] = 0;
+      imageData.data[pixelIndex + 3] =
+        25 + 40 * Math.sin(simplex.noise2D(y, x) * Math.random());
+    }
+  }
+  //ctx.globalCompositeOperation = "source-in";
+  offScreenContext.putImageData(imageData, 0, 0);
+
+  ctx.drawImage(offScreenCanvas, 0, 0);
+};
+
+const draw = (ctx, w, h, predefinedRects) => {
+  clear(ctx, w, h);
+  if (predefinedRects) {
+    predefinedRects.forEach((rect) => drawPolygon(ctx, rect));
+    // drawFilter(ctx, w, h);
+    return predefinedRects;
+  }
+  const ROWS = 5;
+  const PADDING = 20 * SCALE_FACTOR;
+  const LINE_SPACING = 40 * SCALE_FACTOR;
+  // const ROW_HEIGHT = 100;
+  const ROW_HEIGHT = h / ROWS - LINE_SPACING;
+
+  const width = w - PADDING * 2;
+
+  const rects = [];
+  for (let i = 0; i < ROWS; i++) {
+    const rectConfig = getRectConfiguration();
+    for (let j = 0; j < rectConfig.length; j++) {
+      // TODO: check this width
+      const isLastRect = j === rectConfig.length - 1;
+      const rectWidth =
+        width * rectConfig[j] -
+        (rectConfig.length > 1 && !isLastRect ? LINE_SPACING / 2 : 0);
+      const rectHeight = ROW_HEIGHT;
+      // const xOffset = !!rectConfig[j - 1] ? width * rectConfig[j - 1] : 0;
+      const xOffset = getPreviousRectWidth(rectConfig, width, j);
+      const x = xOffset + PADDING;
+      const y = PADDING + (ROW_HEIGHT + LINE_SPACING) * i;
+
+      const points = scatterPoints([
+        { x, y },
+        { x: x + rectWidth, y },
+        { x: x + rectWidth, y: y + rectHeight },
+        { x, y: y + rectHeight }
+      ]);
+
+      const color = getColor();
+
+      rects.push({ points, color });
+    }
+    // rects.forEach((rect) => drawPolygon(ctx, rect));
+
+    /*
+    const x = 0 + PADDING;
+    const y = 0 + PADDING + (ROW_HEIGHT + LINE_SPACING) * i;
+    const width = w - PADDING * 2;
+    const height = ROW_HEIGHT;
+
+    const points = scatterPoints([
+      { x, y },
+      { x: x + width, y },
+      { x: x + width, y: y + height },
+      { x, y: y + height }
+    ]);
+
+    drawPolygon(ctx, points);
+    */
+    // ctx.fillRect(x, y, width, height);
+  }
+
+  rects.forEach((rect) => drawPolygon(ctx, rect));
+
+  // drawFilter(ctx, w, h);
+  return rects;
+};
+
+currentRects = draw(ctx, WIDTH, HEIGHT);
+
+setInterval(() => {
+  currentRects = draw(
+    ctx,
+    WIDTH,
+    HEIGHT,
+    currentRects.map((r) => ({ ...r, points: scatterPoints(r.points) }))
+  );
+}, 130);
+
+recolorButtton.addEventListener("click", () => {
+  currentRects = draw(
+    ctx,
+    WIDTH,
+    HEIGHT,
+    currentRects.map((r) => ({ ...r, color: getColor() }))
+  );
+});
+
+regenreateButton.addEventListener("click", () => {
+  currentRects = draw(ctx, WIDTH, HEIGHT);
+});
+
+document.addEventListener(
+  "keypress",
+  function (e) {
+    if (e.code === "Space") {
+      e.preventDefault();
+      e.stopPropagation();
+      currentRects = draw(ctx, WIDTH, HEIGHT);
+    }
+
+    if (e.code === "KeyC") {
+      currentRects = draw(
+        ctx,
+        WIDTH,
+        HEIGHT,
+        currentRects.map((r) => ({ ...r, color: getColor() }))
+      );
+    }
+  },
+  false
+);
+
+const updateRecordButton = (isRecording, button) => {
+  if (!isRecording) {
+    button.innerText = "Record and export";
+    button.disabled = false;
+  } else {
+    button.innerText = "Recording...";
+    button.disabled = true;
+  }
+};
+
+const record = (canvas, length = 5000) => {
+  isRecording = true;
+  updateRecordButton(isRecording, recordButton);
+  const chunks = [];
+  const stream = canvas.captureStream();
+  const rec = new MediaRecorder(stream, {
+    // mimeType: "video/mp4",
+    // mimeType: "video/webm;codecs:h265",
+    videoBitsPerSecond: 100000000
+  });
+  rec.ondataavailable = (e) => chunks.push(e.data);
+  rec.onstop = (e) => exportVideo(new Blob(chunks, { type: "video/mp4" }));
+  rec.start();
+  setTimeout(() => rec.stop(), length);
+};
+
+const exportVideo = (blob) => {
+  const a = document.createElement("a");
+  a.download = `saul-bassified-${Date.now()}.mp4`;
+  a.href = URL.createObjectURL(blob);
+  a.textContent = `Download "saul-bassified-${Date.now()}"`;
+  downloadsElement.appendChild(a);
+
+  isRecording = false;
+  updateRecordButton(isRecording, recordButton);
+};
+
+const exportImage = (canvas) => {
+  const a = document.createElement("a");
+  a.download = `saul-bassified-${Date.now()}.png`;
+  a.href = canvas.toDataURL("image/png");
+  a.textContent = `Save "saul-bassified-${Date.now()}"`;
+  downloadsElement.appendChild(a);
+};
+
+saveImageButton.addEventListener("click", () => {
+  exportImage(canvas);
+});
+
+recordButton.addEventListener("click", () => {
+  if (!isRecording) {
+    record(canvas, 15000);
+  }
+});
diff --git a/saul-bass-ified/src/style.css b/saul-bass-ified/src/style.css
new file mode 100644
index 0000000..4739938
--- /dev/null
+++ b/saul-bass-ified/src/style.css
@@ -0,0 +1,24 @@
+body {
+  font-family: Georgia;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.canvasContainer {
+  display: flex;
+}
+.exportControls {
+  margin-top: 2em;
+}
+p {
+  font-size: 2rem;
+  align-self: center;
+  text-align: right;
+}
+canvas {
+  margin-right: 2rem;
+  max-height: 100vh;
+  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%),
+    0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
+}
diff --git a/scroll-timeline-example/LICENSE.txt b/scroll-timeline-example/LICENSE.txt
new file mode 100644
index 0000000..d565bec
--- /dev/null
+++ b/scroll-timeline-example/LICENSE.txt
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Michelle Barker (https://codepen.io/michellebarker/pen/bGQVWQX)
+Fork of an original work scroll-timeline example (https://codepen.io/michellebarker/pen/bGQVWQX)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/scroll-timeline-example/README.md b/scroll-timeline-example/README.md
new file mode 100644
index 0000000..89878c9
--- /dev/null
+++ b/scroll-timeline-example/README.md
@@ -0,0 +1,5 @@
+# scroll-timeline example
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/michellebarker/pen/bGQVWQX](https://codepen.io/michellebarker/pen/bGQVWQX).
+
+Requires Chrome with Experimental Features flag
\ No newline at end of file
diff --git a/scroll-timeline-example/dist/index.html b/scroll-timeline-example/dist/index.html
new file mode 100644
index 0000000..120c8b1
--- /dev/null
+++ b/scroll-timeline-example/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - scroll-timeline example</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="wrapper">
+	<h1>We love to scroll!</h1>
+	<div class="box"></div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/scroll-timeline-example/dist/style.css b/scroll-timeline-example/dist/style.css
new file mode 100644
index 0000000..82cf872
--- /dev/null
+++ b/scroll-timeline-example/dist/style.css
@@ -0,0 +1,97 @@
+* {
+	box-sizing: border-box;
+}
+
+body {
+	--offset: max(1rem, 3vw);
+	--boxSize: clamp(2.5rem, 10vw, 200px);
+	margin: 0;
+	padding: var(--offset);
+	min-height: 300vh;
+	background-color: pink;
+	font-family: 'Helvetica', sans-serif;
+	animation: colorChange auto linear;
+	animation-timeline: scroll(root block);
+}
+
+.wrapper {
+	min-height: 100vh;
+	position: fixed;
+	top: 0;
+	left: 0;
+	padding: var(--offset);
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	align-content: center;
+}
+
+h1 {
+	flex: 1 0 100%;
+	animation: clip auto linear;
+	animation-timeline: scroll(root block);
+	font-size: clamp(2rem, 4vw + 1rem, 6rem);
+}
+
+.box {
+	--amplitude: 7vw;
+	width: var(--boxSize);
+	aspect-ratio: 1;
+	background: 
+		radial-gradient(circle at 25% 50%, black 10%, transparent 0),
+		radial-gradient(circle at 75% 50%, black 10%, transparent 0),
+		radial-gradient(circle at 50% 0, black 10%, transparent 0)
+		deeppink;
+	background-position: center center, center center, center calc(var(--boxSize) * 0.6), center center;
+	background-size: 100% 100%, 100% 100%, 100% 100%;
+	background-repeat: no-repeat;
+	border-radius: max(10%, 0.2rem);
+	border: min(5px, 1vw) solid;
+	animation: move auto linear, spin auto linear;
+	animation-timeline: scroll(root block);
+}
+
+@keyframes move {
+	0% {
+		translate: 0 calc(sin(0deg) * var(--amplitude));
+	}
+	15% {
+		translate: calc(15vw - var(--boxSize) - 1rem) calc(sin(60deg) * var(--amplitude));
+	}
+	30% {
+		translate: calc(30vw - var(--boxSize) - 1rem) calc(sin(120deg) * var(--amplitude));
+	}
+	45% {
+		translate: calc(45vw - var(--boxSize) - 1rem) calc(sin(180deg) * var(--amplitude));
+	}
+	60% {
+		translate: calc(60vw - var(--boxSize) - 1rem) calc(sin(240deg) * var(--amplitude));
+	}
+	75% {
+		translate: calc(75vw - var(--boxSize) - 1rem) calc(sin(300deg) * var(--amplitude));
+	}
+	100% {
+		translate: calc(90vw - var(--boxSize) - 1rem) calc(sin(360deg) * var(--amplitude));
+	}
+}
+
+@keyframes colorChange {
+	100% {
+		background-color: turquoise;
+	}
+}
+
+@keyframes spin {
+	100% {
+		rotate: 360deg;
+	}
+}
+
+@keyframes clip {
+	0% {
+		clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+	}
+	100% {
+		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+	}
+}
\ No newline at end of file
diff --git a/scroll-timeline-example/src/index.html b/scroll-timeline-example/src/index.html
new file mode 100644
index 0000000..be5bf2c
--- /dev/null
+++ b/scroll-timeline-example/src/index.html
@@ -0,0 +1,4 @@
+<div class="wrapper">
+	<h1>We love to scroll!</h1>
+	<div class="box"></div>
+</div>
\ No newline at end of file
diff --git a/scroll-timeline-example/src/style.css b/scroll-timeline-example/src/style.css
new file mode 100644
index 0000000..82cf872
--- /dev/null
+++ b/scroll-timeline-example/src/style.css
@@ -0,0 +1,97 @@
+* {
+	box-sizing: border-box;
+}
+
+body {
+	--offset: max(1rem, 3vw);
+	--boxSize: clamp(2.5rem, 10vw, 200px);
+	margin: 0;
+	padding: var(--offset);
+	min-height: 300vh;
+	background-color: pink;
+	font-family: 'Helvetica', sans-serif;
+	animation: colorChange auto linear;
+	animation-timeline: scroll(root block);
+}
+
+.wrapper {
+	min-height: 100vh;
+	position: fixed;
+	top: 0;
+	left: 0;
+	padding: var(--offset);
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	align-content: center;
+}
+
+h1 {
+	flex: 1 0 100%;
+	animation: clip auto linear;
+	animation-timeline: scroll(root block);
+	font-size: clamp(2rem, 4vw + 1rem, 6rem);
+}
+
+.box {
+	--amplitude: 7vw;
+	width: var(--boxSize);
+	aspect-ratio: 1;
+	background: 
+		radial-gradient(circle at 25% 50%, black 10%, transparent 0),
+		radial-gradient(circle at 75% 50%, black 10%, transparent 0),
+		radial-gradient(circle at 50% 0, black 10%, transparent 0)
+		deeppink;
+	background-position: center center, center center, center calc(var(--boxSize) * 0.6), center center;
+	background-size: 100% 100%, 100% 100%, 100% 100%;
+	background-repeat: no-repeat;
+	border-radius: max(10%, 0.2rem);
+	border: min(5px, 1vw) solid;
+	animation: move auto linear, spin auto linear;
+	animation-timeline: scroll(root block);
+}
+
+@keyframes move {
+	0% {
+		translate: 0 calc(sin(0deg) * var(--amplitude));
+	}
+	15% {
+		translate: calc(15vw - var(--boxSize) - 1rem) calc(sin(60deg) * var(--amplitude));
+	}
+	30% {
+		translate: calc(30vw - var(--boxSize) - 1rem) calc(sin(120deg) * var(--amplitude));
+	}
+	45% {
+		translate: calc(45vw - var(--boxSize) - 1rem) calc(sin(180deg) * var(--amplitude));
+	}
+	60% {
+		translate: calc(60vw - var(--boxSize) - 1rem) calc(sin(240deg) * var(--amplitude));
+	}
+	75% {
+		translate: calc(75vw - var(--boxSize) - 1rem) calc(sin(300deg) * var(--amplitude));
+	}
+	100% {
+		translate: calc(90vw - var(--boxSize) - 1rem) calc(sin(360deg) * var(--amplitude));
+	}
+}
+
+@keyframes colorChange {
+	100% {
+		background-color: turquoise;
+	}
+}
+
+@keyframes spin {
+	100% {
+		rotate: 360deg;
+	}
+}
+
+@keyframes clip {
+	0% {
+		clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+	}
+	100% {
+		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+	}
+}
\ No newline at end of file
diff --git a/scrolling-box-w-scroll-behavior/README.markdown b/scrolling-box-w-scroll-behavior/README.markdown
new file mode 100644
index 0000000..475b41a
--- /dev/null
+++ b/scrolling-box-w-scroll-behavior/README.markdown
@@ -0,0 +1,5 @@
+# Scrolling Box w/ `scroll-behavior`
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/team/css-tricks/pen/xdGKoJ](https://codepen.io/team/css-tricks/pen/xdGKoJ).
+
+
diff --git a/scrolling-box-w-scroll-behavior/dist/index.html b/scrolling-box-w-scroll-behavior/dist/index.html
new file mode 100644
index 0000000..32a69ea
--- /dev/null
+++ b/scrolling-box-w-scroll-behavior/dist/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Scrolling Box w/ `scroll-behavior`</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<nav>
+  <a href="#1">1</a>
+  <a href="#2">2</a>
+  <a href="#3">3</a>
+</nav>
+
+<div class="scrolling-box">
+  <section id="1">This is the first section</section>
+  <section id="2">This is the second section</section>
+  <section id="3">This is the third section</section>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/scrolling-box-w-scroll-behavior/dist/style.css b/scrolling-box-w-scroll-behavior/dist/style.css
new file mode 100644
index 0000000..127da1e
--- /dev/null
+++ b/scrolling-box-w-scroll-behavior/dist/style.css
@@ -0,0 +1,38 @@
+body {
+  background-color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+nav {
+  background-color: #000;
+  display: block;
+  padding: 1em 0;
+  text-align: center;
+  width: 200px;
+}
+
+nav a {
+  color: #fff;
+  margin: 0 1em;
+  text-decoration: none;
+}
+
+.scrolling-box {
+  background-color: #eaeaea;
+  display: block;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+  text-align: center;
+  width: 200px;
+}
+
+section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/scrolling-box-w-scroll-behavior/license.txt b/scrolling-box-w-scroll-behavior/license.txt
new file mode 100644
index 0000000..2d77c7f
--- /dev/null
+++ b/scrolling-box-w-scroll-behavior/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by CSS-Tricks (https://codepen.io/team/css-tricks/pen/xdGKoJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/scrolling-box-w-scroll-behavior/src/index.html b/scrolling-box-w-scroll-behavior/src/index.html
new file mode 100644
index 0000000..13d26e7
--- /dev/null
+++ b/scrolling-box-w-scroll-behavior/src/index.html
@@ -0,0 +1,11 @@
+<nav>
+  <a href="#1">1</a>
+  <a href="#2">2</a>
+  <a href="#3">3</a>
+</nav>
+
+<div class="scrolling-box">
+  <section id="1">This is the first section</section>
+  <section id="2">This is the second section</section>
+  <section id="3">This is the third section</section>
+</div>
\ No newline at end of file
diff --git a/scrolling-box-w-scroll-behavior/src/style.css b/scrolling-box-w-scroll-behavior/src/style.css
new file mode 100644
index 0000000..127da1e
--- /dev/null
+++ b/scrolling-box-w-scroll-behavior/src/style.css
@@ -0,0 +1,38 @@
+body {
+  background-color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+nav {
+  background-color: #000;
+  display: block;
+  padding: 1em 0;
+  text-align: center;
+  width: 200px;
+}
+
+nav a {
+  color: #fff;
+  margin: 0 1em;
+  text-decoration: none;
+}
+
+.scrolling-box {
+  background-color: #eaeaea;
+  display: block;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+  text-align: center;
+  width: 200px;
+}
+
+section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/scrolling-grid/README.markdown b/scrolling-grid/README.markdown
new file mode 100644
index 0000000..1505e3f
--- /dev/null
+++ b/scrolling-grid/README.markdown
@@ -0,0 +1,4 @@
+# Scrolling grid
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/smhigley/pen/bZwBVw](https://codepen.io/smhigley/pen/bZwBVw).
+
+ 
\ No newline at end of file
diff --git a/scrolling-grid/dist/index.html b/scrolling-grid/dist/index.html
new file mode 100644
index 0000000..59cb1e4
--- /dev/null
+++ b/scrolling-grid/dist/index.html
@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Scrolling grid</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>Accessible fixed header grid</h1>
+<p>Demonstration of css-only grid with scrolling body. Uses grid role for testing/demonstration purposes, despite currently having no interaction.</p>
+
+<p>Two implementation details are worth noting: Edge does not support ARIA grid/table rows on semantic table elements, so all elements in this example are divs. Second, <code>role="rowgroup"</code> is not supported, so it has not been used.</p>
+
+<h2 id="table-heading">Randomly generated employee data</h2>
+<div role="grid" aria-readonly="true" aria-labelledby="table-heading" class="grid">
+  <div role="presentation" class="header">
+    <div role="row" class="row">
+      <div role="columnheader" class="col">First</div>
+      <div role="columnheader" class="col">Last</div>
+      <div role="columnheader" class="col">Email</div>
+      <div role="columnheader" class="col">Company</div>
+      <div role="columnheader" class="col">Location</div>
+    </div>
+  </div>
+  <div role="presentation" class="body">
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Mufutau</div>
+      <div role="gridcell" class="cell">Stanley</div>
+      <div role="gridcell" class="cell">aliquet.lobortis.nisi@quisurnaNunc.com</div>
+      <div role="gridcell" class="cell">Suspendisse Sed Company</div>
+      <div role="gridcell" class="cell">Cocos (Keeling) Islands</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Rama</div>
+      <div role="gridcell" class="cell">Pollard</div>
+      <div role="gridcell" class="cell">augue@enimconsequatpurus.co.uk</div>
+      <div role="gridcell" class="cell">Amet Lorem Corporation</div>
+      <div role="gridcell" class="cell">Saint Kitts and Nevis</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Joseph</div>
+      <div role="gridcell" class="cell">Clemons</div>
+      <div role="gridcell" class="cell">enim.nisl.elementum@dignissimmagna.org</div>
+      <div role="gridcell" class="cell">Molestie Tortor Nibh Corporation</div>
+      <div role="gridcell" class="cell">Timor-Leste</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Owen</div>
+      <div role="gridcell" class="cell">Mclean</div>
+      <div role="gridcell" class="cell">tellus.id@amet.net</div>
+      <div role="gridcell" class="cell">Blandit Nam Nulla Associates</div>
+      <div role="gridcell" class="cell">Moldova</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Yvette</div>
+      <div role="gridcell" class="cell">Carpenter</div>
+      <div role="gridcell" class="cell">congue.elit@iaculis.com</div>
+      <div role="gridcell" class="cell">A Neque Nullam Company</div>
+      <div role="gridcell" class="cell">Norway</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Baker</div>
+      <div role="gridcell" class="cell">Davidson</div>
+      <div role="gridcell" class="cell">ornare.In@Seddiamlorem.ca</div>
+      <div role="gridcell" class="cell">Mauris Vel Ltd</div>
+      <div role="gridcell" class="cell">Anguilla</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Zena</div>
+      <div role="gridcell" class="cell">Myers</div>
+      <div role="gridcell" class="cell">ante.ipsum@ac.ca</div>
+      <div role="gridcell" class="cell">Eu Odio Tristique Institute</div>
+      <div role="gridcell" class="cell">Colombia</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Nora</div>
+      <div role="gridcell" class="cell">Vaughn</div>
+      <div role="gridcell" class="cell">ut.nulla.Cras@inconsectetueripsum.net</div>
+      <div role="gridcell" class="cell">Varius Et Limited</div>
+      <div role="gridcell" class="cell">Switzerland</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Nero</div>
+      <div role="gridcell" class="cell">Mullen</div>
+      <div role="gridcell" class="cell">Donec.feugiat.metus@sedleo.co.uk</div>
+      <div role="gridcell" class="cell">Consequat Consulting</div>
+      <div role="gridcell" class="cell">Sudan</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Patience</div>
+      <div role="gridcell" class="cell">Mosley</div>
+      <div role="gridcell" class="cell">dictum.Phasellus@id.org</div>
+      <div role="gridcell" class="cell">Eleifend Non Dapibus Corp.</div>
+      <div role="gridcell" class="cell">Bahamas</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Riley</div>
+      <div role="gridcell" class="cell">Jenkins</div>
+      <div role="gridcell" class="cell">Maecenas.ornare.egestas@ProindolorNulla.net</div>
+      <div role="gridcell" class="cell">Integer Mollis Integer Consulting</div>
+      <div role="gridcell" class="cell">Saint Helena, Ascension and Tristan da Cunha</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Dillon</div>
+      <div role="gridcell" class="cell">Compton</div>
+      <div role="gridcell" class="cell">aliquet.sem.ut@libero.edu</div>
+      <div role="gridcell" class="cell">Ligula Aenean Gravida LLP</div>
+      <div role="gridcell" class="cell">Sao Tome and Principe</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Benedict</div>
+      <div role="gridcell" class="cell">Frank</div>
+      <div role="gridcell" class="cell">nunc.id@Aliquamnec.co.uk</div>
+      <div role="gridcell" class="cell">Mauris Magna Duis Institute</div>
+      <div role="gridcell" class="cell">Senegal</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Risa</div>
+      <div role="gridcell" class="cell">Dawson</div>
+      <div role="gridcell" class="cell">In@ullamcorper.net</div>
+      <div role="gridcell" class="cell">Consectetuer Corp.</div>
+      <div role="gridcell" class="cell">Norfolk Island</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Amir</div>
+      <div role="gridcell" class="cell">Moses</div>
+      <div role="gridcell" class="cell">lobortis.ultrices@tellusNunclectus.edu</div>
+      <div role="gridcell" class="cell">Mattis Ltd</div>
+      <div role="gridcell" class="cell">Azerbaijan</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Katell</div>
+      <div role="gridcell" class="cell">Murray</div>
+      <div role="gridcell" class="cell">interdum.Nunc@eutellus.ca</div>
+      <div role="gridcell" class="cell">Sem Consulting</div>
+      <div role="gridcell" class="cell">Reunion</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Justin</div>
+      <div role="gridcell" class="cell">Johns</div>
+      <div role="gridcell" class="cell">quam@pedeCum.org</div>
+      <div role="gridcell" class="cell">Ante Vivamus Incorporated</div>
+      <div role="gridcell" class="cell">Moldova</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">India</div>
+      <div role="gridcell" class="cell">Reese</div>
+      <div role="gridcell" class="cell">nunc.nulla@Proin.org</div>
+      <div role="gridcell" class="cell">Pede LLC</div>
+      <div role="gridcell" class="cell">Fiji</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Zeph</div>
+      <div role="gridcell" class="cell">Mccoy</div>
+      <div role="gridcell" class="cell">Suspendisse@quam.co.uk</div>
+      <div role="gridcell" class="cell">Montes Nascetur Ridiculus Company</div>
+      <div role="gridcell" class="cell">Cocos (Keeling) Islands</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Kendall</div>
+      <div role="gridcell" class="cell">Sharp</div>
+      <div role="gridcell" class="cell">euismod@adui.org</div>
+      <div role="gridcell" class="cell">Nulla Tempor Foundation</div>
+      <div role="gridcell" class="cell">Burundi</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Rylee</div>
+      <div role="gridcell" class="cell">Olsen</div>
+      <div role="gridcell" class="cell">erat@Pellentesque.com</div>
+      <div role="gridcell" class="cell">Fermentum Arcu Consulting</div>
+      <div role="gridcell" class="cell">Reunion</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Alyssa</div>
+      <div role="gridcell" class="cell">Black</div>
+      <div role="gridcell" class="cell">pharetra@enim.ca</div>
+      <div role="gridcell" class="cell">Porttitor Interdum Incorporated</div>
+      <div role="gridcell" class="cell">Curaçao</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Ainsley</div>
+      <div role="gridcell" class="cell">Morse</div>
+      <div role="gridcell" class="cell">dictum@odioauctor.org</div>
+      <div role="gridcell" class="cell">Sit Ltd</div>
+      <div role="gridcell" class="cell">New Caledonia</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Ira</div>
+      <div role="gridcell" class="cell">Sawyer</div>
+      <div role="gridcell" class="cell">Proin.dolor@temporarcu.net</div>
+      <div role="gridcell" class="cell">Duis Gravida Consulting</div>
+      <div role="gridcell" class="cell">Cameroon</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Keith</div>
+      <div role="gridcell" class="cell">Mccullough</div>
+      <div role="gridcell" class="cell">tincidunt.nibh@ipsumsodalespurus.ca</div>
+      <div role="gridcell" class="cell">Mauris Morbi Foundation</div>
+      <div role="gridcell" class="cell">Malawi</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Andrew</div>
+      <div role="gridcell" class="cell">Combs</div>
+      <div role="gridcell" class="cell">rhoncus.id@ridiculusmus.ca</div>
+      <div role="gridcell" class="cell">Vestibulum Limited</div>
+      <div role="gridcell" class="cell">British Indian Ocean Territory</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Jorden</div>
+      <div role="gridcell" class="cell">Sampson</div>
+      <div role="gridcell" class="cell">facilisis@maurisipsumporta.com</div>
+      <div role="gridcell" class="cell">Ut Eros Limited</div>
+      <div role="gridcell" class="cell">Tonga</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Whitney</div>
+      <div role="gridcell" class="cell">Graham</div>
+      <div role="gridcell" class="cell">erat.vel@ametnulla.edu</div>
+      <div role="gridcell" class="cell">Commodo Corp.</div>
+      <div role="gridcell" class="cell">Northern Mariana Islands</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Isadora</div>
+      <div role="gridcell" class="cell">Hinton</div>
+      <div role="gridcell" class="cell">velit@Phasellus.edu</div>
+      <div role="gridcell" class="cell">Nec Tempus Mauris Corp.</div>
+      <div role="gridcell" class="cell">Slovenia</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Vernon</div>
+      <div role="gridcell" class="cell">Rose</div>
+      <div role="gridcell" class="cell">a@Quisquepurus.edu</div>
+      <div role="gridcell" class="cell">Fusce Dolor Quam Consulting</div>
+      <div role="gridcell" class="cell">Maldives</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Micah</div>
+      <div role="gridcell" class="cell">Reid</div>
+      <div role="gridcell" class="cell">mauris.eu.elit@euaccumsansed.edu</div>
+      <div role="gridcell" class="cell">Pellentesque Massa LLC</div>
+      <div role="gridcell" class="cell">Guadeloupe</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Dalton</div>
+      <div role="gridcell" class="cell">Oconnor</div>
+      <div role="gridcell" class="cell">turpis.vitae.purus@MaurismagnaDuis.edu</div>
+      <div role="gridcell" class="cell">Laoreet Libero Et Incorporated</div>
+      <div role="gridcell" class="cell">Nepal</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Aiko</div>
+      <div role="gridcell" class="cell">Floyd</div>
+      <div role="gridcell" class="cell">nascetur@torquentper.net</div>
+      <div role="gridcell" class="cell">Rutrum LLC</div>
+      <div role="gridcell" class="cell">Kazakhstan</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Abel</div>
+      <div role="gridcell" class="cell">Rollins</div>
+      <div role="gridcell" class="cell">vitae.semper@sempercursus.edu</div>
+      <div role="gridcell" class="cell">Nibh Enim Inc.</div>
+      <div role="gridcell" class="cell">Faroe Islands</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Fallon</div>
+      <div role="gridcell" class="cell">Hayes</div>
+      <div role="gridcell" class="cell">tincidunt.nibh@duiquisaccumsan.net</div>
+      <div role="gridcell" class="cell">Sagittis Semper Foundation</div>
+      <div role="gridcell" class="cell">Guinea</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Lillian</div>
+      <div role="gridcell" class="cell">Bowen</div>
+      <div role="gridcell" class="cell">quam.quis.diam@eleifendnon.net</div>
+      <div role="gridcell" class="cell">Sem Mollis Dui Industries</div>
+      <div role="gridcell" class="cell">Comoros</div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/scrolling-grid/dist/style.css b/scrolling-grid/dist/style.css
new file mode 100644
index 0000000..8986aca
--- /dev/null
+++ b/scrolling-grid/dist/style.css
@@ -0,0 +1,51 @@
+body {
+  padding: 2em 1em;
+}
+
+.grid {
+  border: 1px solid #c2c2c2;
+  display: flex;
+  flex-direction: column;
+  height: 300px;
+  overflow: hidden;
+}
+
+.header {
+  border-bottom: 1px solid #c2c2c2;
+  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.15);
+  flex: 0 0 auto;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.body {
+  flex: 1 1 100%;
+  overflow-y: scroll;
+}
+
+.row {
+  border-top: 1px solid #c2c2c2;
+  display: flex;
+}
+
+.row:first-child {
+  border-top: 0;
+}
+
+.row:nth-child(even) {
+  background-color: #f4f6f7;
+}
+
+.cell, .col {
+  border-left: 1px solid #c2c2c2;
+  flex: 1 100%;
+  min-width: 100px;
+  overflow: hidden;
+  padding: 0.5em 1em;
+  text-overflow: ellipsis;
+}
+
+.cell:first-child,
+.col:first-child {
+  border-left: 0;
+}
diff --git a/scrolling-grid/license.txt b/scrolling-grid/license.txt
new file mode 100644
index 0000000..6a6b8ba
--- /dev/null
+++ b/scrolling-grid/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Sarah Higley (https://codepen.io/smhigley/pen/bZwBVw)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/scrolling-grid/src/index.html b/scrolling-grid/src/index.html
new file mode 100644
index 0000000..9fce3e6
--- /dev/null
+++ b/scrolling-grid/src/index.html
@@ -0,0 +1,271 @@
+<h1>Accessible fixed header grid</h1>
+<p>Demonstration of css-only grid with scrolling body. Uses grid role for testing/demonstration purposes, despite currently having no interaction.</p>
+
+<p>Two implementation details are worth noting: Edge does not support ARIA grid/table rows on semantic table elements, so all elements in this example are divs. Second, <code>role="rowgroup"</code> is not supported, so it has not been used.</p>
+
+<h2 id="table-heading">Randomly generated employee data</h2>
+<div role="grid" aria-readonly="true" aria-labelledby="table-heading" class="grid">
+  <div role="presentation" class="header">
+    <div role="row" class="row">
+      <div role="columnheader" class="col">First</div>
+      <div role="columnheader" class="col">Last</div>
+      <div role="columnheader" class="col">Email</div>
+      <div role="columnheader" class="col">Company</div>
+      <div role="columnheader" class="col">Location</div>
+    </div>
+  </div>
+  <div role="presentation" class="body">
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Mufutau</div>
+      <div role="gridcell" class="cell">Stanley</div>
+      <div role="gridcell" class="cell">aliquet.lobortis.nisi@quisurnaNunc.com</div>
+      <div role="gridcell" class="cell">Suspendisse Sed Company</div>
+      <div role="gridcell" class="cell">Cocos (Keeling) Islands</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Rama</div>
+      <div role="gridcell" class="cell">Pollard</div>
+      <div role="gridcell" class="cell">augue@enimconsequatpurus.co.uk</div>
+      <div role="gridcell" class="cell">Amet Lorem Corporation</div>
+      <div role="gridcell" class="cell">Saint Kitts and Nevis</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Joseph</div>
+      <div role="gridcell" class="cell">Clemons</div>
+      <div role="gridcell" class="cell">enim.nisl.elementum@dignissimmagna.org</div>
+      <div role="gridcell" class="cell">Molestie Tortor Nibh Corporation</div>
+      <div role="gridcell" class="cell">Timor-Leste</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Owen</div>
+      <div role="gridcell" class="cell">Mclean</div>
+      <div role="gridcell" class="cell">tellus.id@amet.net</div>
+      <div role="gridcell" class="cell">Blandit Nam Nulla Associates</div>
+      <div role="gridcell" class="cell">Moldova</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Yvette</div>
+      <div role="gridcell" class="cell">Carpenter</div>
+      <div role="gridcell" class="cell">congue.elit@iaculis.com</div>
+      <div role="gridcell" class="cell">A Neque Nullam Company</div>
+      <div role="gridcell" class="cell">Norway</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Baker</div>
+      <div role="gridcell" class="cell">Davidson</div>
+      <div role="gridcell" class="cell">ornare.In@Seddiamlorem.ca</div>
+      <div role="gridcell" class="cell">Mauris Vel Ltd</div>
+      <div role="gridcell" class="cell">Anguilla</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Zena</div>
+      <div role="gridcell" class="cell">Myers</div>
+      <div role="gridcell" class="cell">ante.ipsum@ac.ca</div>
+      <div role="gridcell" class="cell">Eu Odio Tristique Institute</div>
+      <div role="gridcell" class="cell">Colombia</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Nora</div>
+      <div role="gridcell" class="cell">Vaughn</div>
+      <div role="gridcell" class="cell">ut.nulla.Cras@inconsectetueripsum.net</div>
+      <div role="gridcell" class="cell">Varius Et Limited</div>
+      <div role="gridcell" class="cell">Switzerland</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Nero</div>
+      <div role="gridcell" class="cell">Mullen</div>
+      <div role="gridcell" class="cell">Donec.feugiat.metus@sedleo.co.uk</div>
+      <div role="gridcell" class="cell">Consequat Consulting</div>
+      <div role="gridcell" class="cell">Sudan</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Patience</div>
+      <div role="gridcell" class="cell">Mosley</div>
+      <div role="gridcell" class="cell">dictum.Phasellus@id.org</div>
+      <div role="gridcell" class="cell">Eleifend Non Dapibus Corp.</div>
+      <div role="gridcell" class="cell">Bahamas</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Riley</div>
+      <div role="gridcell" class="cell">Jenkins</div>
+      <div role="gridcell" class="cell">Maecenas.ornare.egestas@ProindolorNulla.net</div>
+      <div role="gridcell" class="cell">Integer Mollis Integer Consulting</div>
+      <div role="gridcell" class="cell">Saint Helena, Ascension and Tristan da Cunha</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Dillon</div>
+      <div role="gridcell" class="cell">Compton</div>
+      <div role="gridcell" class="cell">aliquet.sem.ut@libero.edu</div>
+      <div role="gridcell" class="cell">Ligula Aenean Gravida LLP</div>
+      <div role="gridcell" class="cell">Sao Tome and Principe</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Benedict</div>
+      <div role="gridcell" class="cell">Frank</div>
+      <div role="gridcell" class="cell">nunc.id@Aliquamnec.co.uk</div>
+      <div role="gridcell" class="cell">Mauris Magna Duis Institute</div>
+      <div role="gridcell" class="cell">Senegal</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Risa</div>
+      <div role="gridcell" class="cell">Dawson</div>
+      <div role="gridcell" class="cell">In@ullamcorper.net</div>
+      <div role="gridcell" class="cell">Consectetuer Corp.</div>
+      <div role="gridcell" class="cell">Norfolk Island</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Amir</div>
+      <div role="gridcell" class="cell">Moses</div>
+      <div role="gridcell" class="cell">lobortis.ultrices@tellusNunclectus.edu</div>
+      <div role="gridcell" class="cell">Mattis Ltd</div>
+      <div role="gridcell" class="cell">Azerbaijan</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Katell</div>
+      <div role="gridcell" class="cell">Murray</div>
+      <div role="gridcell" class="cell">interdum.Nunc@eutellus.ca</div>
+      <div role="gridcell" class="cell">Sem Consulting</div>
+      <div role="gridcell" class="cell">Reunion</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Justin</div>
+      <div role="gridcell" class="cell">Johns</div>
+      <div role="gridcell" class="cell">quam@pedeCum.org</div>
+      <div role="gridcell" class="cell">Ante Vivamus Incorporated</div>
+      <div role="gridcell" class="cell">Moldova</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">India</div>
+      <div role="gridcell" class="cell">Reese</div>
+      <div role="gridcell" class="cell">nunc.nulla@Proin.org</div>
+      <div role="gridcell" class="cell">Pede LLC</div>
+      <div role="gridcell" class="cell">Fiji</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Zeph</div>
+      <div role="gridcell" class="cell">Mccoy</div>
+      <div role="gridcell" class="cell">Suspendisse@quam.co.uk</div>
+      <div role="gridcell" class="cell">Montes Nascetur Ridiculus Company</div>
+      <div role="gridcell" class="cell">Cocos (Keeling) Islands</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Kendall</div>
+      <div role="gridcell" class="cell">Sharp</div>
+      <div role="gridcell" class="cell">euismod@adui.org</div>
+      <div role="gridcell" class="cell">Nulla Tempor Foundation</div>
+      <div role="gridcell" class="cell">Burundi</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Rylee</div>
+      <div role="gridcell" class="cell">Olsen</div>
+      <div role="gridcell" class="cell">erat@Pellentesque.com</div>
+      <div role="gridcell" class="cell">Fermentum Arcu Consulting</div>
+      <div role="gridcell" class="cell">Reunion</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Alyssa</div>
+      <div role="gridcell" class="cell">Black</div>
+      <div role="gridcell" class="cell">pharetra@enim.ca</div>
+      <div role="gridcell" class="cell">Porttitor Interdum Incorporated</div>
+      <div role="gridcell" class="cell">Curaçao</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Ainsley</div>
+      <div role="gridcell" class="cell">Morse</div>
+      <div role="gridcell" class="cell">dictum@odioauctor.org</div>
+      <div role="gridcell" class="cell">Sit Ltd</div>
+      <div role="gridcell" class="cell">New Caledonia</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Ira</div>
+      <div role="gridcell" class="cell">Sawyer</div>
+      <div role="gridcell" class="cell">Proin.dolor@temporarcu.net</div>
+      <div role="gridcell" class="cell">Duis Gravida Consulting</div>
+      <div role="gridcell" class="cell">Cameroon</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Keith</div>
+      <div role="gridcell" class="cell">Mccullough</div>
+      <div role="gridcell" class="cell">tincidunt.nibh@ipsumsodalespurus.ca</div>
+      <div role="gridcell" class="cell">Mauris Morbi Foundation</div>
+      <div role="gridcell" class="cell">Malawi</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Andrew</div>
+      <div role="gridcell" class="cell">Combs</div>
+      <div role="gridcell" class="cell">rhoncus.id@ridiculusmus.ca</div>
+      <div role="gridcell" class="cell">Vestibulum Limited</div>
+      <div role="gridcell" class="cell">British Indian Ocean Territory</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Jorden</div>
+      <div role="gridcell" class="cell">Sampson</div>
+      <div role="gridcell" class="cell">facilisis@maurisipsumporta.com</div>
+      <div role="gridcell" class="cell">Ut Eros Limited</div>
+      <div role="gridcell" class="cell">Tonga</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Whitney</div>
+      <div role="gridcell" class="cell">Graham</div>
+      <div role="gridcell" class="cell">erat.vel@ametnulla.edu</div>
+      <div role="gridcell" class="cell">Commodo Corp.</div>
+      <div role="gridcell" class="cell">Northern Mariana Islands</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Isadora</div>
+      <div role="gridcell" class="cell">Hinton</div>
+      <div role="gridcell" class="cell">velit@Phasellus.edu</div>
+      <div role="gridcell" class="cell">Nec Tempus Mauris Corp.</div>
+      <div role="gridcell" class="cell">Slovenia</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Vernon</div>
+      <div role="gridcell" class="cell">Rose</div>
+      <div role="gridcell" class="cell">a@Quisquepurus.edu</div>
+      <div role="gridcell" class="cell">Fusce Dolor Quam Consulting</div>
+      <div role="gridcell" class="cell">Maldives</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Micah</div>
+      <div role="gridcell" class="cell">Reid</div>
+      <div role="gridcell" class="cell">mauris.eu.elit@euaccumsansed.edu</div>
+      <div role="gridcell" class="cell">Pellentesque Massa LLC</div>
+      <div role="gridcell" class="cell">Guadeloupe</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Dalton</div>
+      <div role="gridcell" class="cell">Oconnor</div>
+      <div role="gridcell" class="cell">turpis.vitae.purus@MaurismagnaDuis.edu</div>
+      <div role="gridcell" class="cell">Laoreet Libero Et Incorporated</div>
+      <div role="gridcell" class="cell">Nepal</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Aiko</div>
+      <div role="gridcell" class="cell">Floyd</div>
+      <div role="gridcell" class="cell">nascetur@torquentper.net</div>
+      <div role="gridcell" class="cell">Rutrum LLC</div>
+      <div role="gridcell" class="cell">Kazakhstan</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Abel</div>
+      <div role="gridcell" class="cell">Rollins</div>
+      <div role="gridcell" class="cell">vitae.semper@sempercursus.edu</div>
+      <div role="gridcell" class="cell">Nibh Enim Inc.</div>
+      <div role="gridcell" class="cell">Faroe Islands</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Fallon</div>
+      <div role="gridcell" class="cell">Hayes</div>
+      <div role="gridcell" class="cell">tincidunt.nibh@duiquisaccumsan.net</div>
+      <div role="gridcell" class="cell">Sagittis Semper Foundation</div>
+      <div role="gridcell" class="cell">Guinea</div>
+    </div>
+    <div role="row" class="row">
+      <div role="gridcell" class="cell">Lillian</div>
+      <div role="gridcell" class="cell">Bowen</div>
+      <div role="gridcell" class="cell">quam.quis.diam@eleifendnon.net</div>
+      <div role="gridcell" class="cell">Sem Mollis Dui Industries</div>
+      <div role="gridcell" class="cell">Comoros</div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/scrolling-grid/src/style.scss b/scrolling-grid/src/style.scss
new file mode 100644
index 0000000..2173834
--- /dev/null
+++ b/scrolling-grid/src/style.scss
@@ -0,0 +1,54 @@
+body {
+  padding: 2em 1em;
+}
+
+.grid {
+  border: 1px solid #c2c2c2;
+  display: flex;
+  flex-direction: column;
+  height: 300px;
+  overflow: hidden;
+}
+
+.header {
+  border-bottom: 1px solid #c2c2c2;
+  box-shadow: 0 0 12px 0 rgba(0,0,0,0.15);
+  flex: 0 0 auto;
+  // fixes difference in alignment caused by the scrollbar
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.body {
+  flex: 1 1 100%;
+  overflow-y: scroll;
+}
+
+.row {
+  border-top: 1px solid #c2c2c2;
+  display: flex;
+}
+
+.row:first-child {
+  border-top: 0;
+}
+
+.row:nth-child(even) {
+  background-color: #f4f6f7;
+}
+
+// alternatively, assign widths per column,
+// or calculate with JS
+.cell, .col {
+  border-left: 1px solid #c2c2c2;
+  flex: 1 100%;
+  min-width: 100px;
+  overflow: hidden;
+  padding: 0.5em 1em;
+  text-overflow: ellipsis;
+}
+
+.cell:first-child,
+.col:first-child {
+  border-left: 0;
+}
\ No newline at end of file
diff --git a/scrolly-carousel-example-7/README.markdown b/scrolly-carousel-example-7/README.markdown
new file mode 100644
index 0000000..5869c4e
--- /dev/null
+++ b/scrolly-carousel-example-7/README.markdown
@@ -0,0 +1,5 @@
+# Scrolly carousel: example 7
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/robinrendle/pen/YzyqNJK](https://codepen.io/robinrendle/pen/YzyqNJK).
+
+
diff --git a/scrolly-carousel-example-7/dist/index.html b/scrolly-carousel-example-7/dist/index.html
new file mode 100644
index 0000000..455db88
--- /dev/null
+++ b/scrolly-carousel-example-7/dist/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Scrolly carousel: example 7</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="wrapper">
+  <nav class="lil-nav">
+    <a href="#image-1">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/kenan-sulayman-FV3M7igu8Fs-unsplash.jpg" alt="Yosemite" />
+    </a>
+    <a href="#image-2">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/anastasia-dulgier-NCFTGtjY3EQ-unsplash.jpg" alt="Houses" />
+    </a>
+    <a href="#image-3">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/arnaud-mariat-IPXcUYHeErc-unsplash.jpg" alt="Galaxies" />
+    </a>
+    <a href="#image-4">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/matthew-smith-9CV6WrxxdrM-unsplash.jpg" alt="Motel" />
+    </a>
+    <a href="#image-5">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/vladimir-kondriianenko-bxwzcFy9YwM-unsplash.jpg" alt="Minimalist nightmare" />
+    </a>
+    <a href="#image-6">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/jakob-owens-EkxOtUljwhs-unsplash.jpg" alt="Hoops" />
+    </a>
+    <a href="#image-7">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/tim-bogdanov-4uojMEdcwI8-unsplash.jpg" alt="Gentleman" />
+    </a>
+    <a href="#image-8">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/weston-mackinnon-caUtk0DTiR0-unsplash.jpg" alt="Stuff" />
+    </a>
+  </nav>
+
+  <div class="gallery">
+    <img class="gallery__img" id="image-1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/kenan-sulayman-FV3M7igu8Fs-unsplash.jpg" alt="Yosemite" />
+    <img class="gallery__img" id="image-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/anastasia-dulgier-NCFTGtjY3EQ-unsplash.jpg" alt="Houses" />
+    <img class="gallery__img" id="image-3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/arnaud-mariat-IPXcUYHeErc-unsplash.jpg" alt="Galaxies" />
+    <img class="gallery__img" id="image-4" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/matthew-smith-9CV6WrxxdrM-unsplash.jpg" alt="Motel" />
+    <img class="gallery__img" id="image-5" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/vladimir-kondriianenko-bxwzcFy9YwM-unsplash.jpg" alt="Minimalist nightmare" />
+    <img class="gallery__img" id="image-6" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/jakob-owens-EkxOtUljwhs-unsplash.jpg" alt="Hoops" />
+    <img class="gallery__img" id="image-7" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/tim-bogdanov-4uojMEdcwI8-unsplash.jpg" alt="Gentleman" />
+    <img class="gallery__img" id="image-8" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/weston-mackinnon-caUtk0DTiR0-unsplash.jpg" alt="Stuff" />
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/scrolly-carousel-example-7/dist/style.css b/scrolly-carousel-example-7/dist/style.css
new file mode 100644
index 0000000..4d598a4
--- /dev/null
+++ b/scrolly-carousel-example-7/dist/style.css
@@ -0,0 +1,95 @@
+img {
+  display: block;
+  max-width: 100%;
+}
+
+.wrapper {
+  overflow: hidden;
+  height: 100vh;
+  display: grid;
+  grid-template-rows: 2fr 1fr;
+  grid-gap: 10px;
+}
+@media screen and (min-width: 1200px) {
+  .wrapper {
+    grid-template-columns: 1fr 5fr;
+    grid-template-rows: auto;
+  }
+}
+
+.gallery {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  -ms-scroll-snap-type: x mandatory;
+      scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  display: -webkit-box;
+  display: flex;
+}
+@media screen and (min-width: 1200px) {
+  .gallery {
+    display: block;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    -ms-scroll-snap-type: y mandatory;
+        scroll-snap-type: y mandatory;
+  }
+}
+
+.gallery__img {
+  scroll-snap-align: start;
+  margin-bottom: 10px;
+  min-width: 100vw;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+@media screen and (min-width: 1200px) {
+  .gallery__img {
+    min-width: auto;
+    min-height: 100vh;
+  }
+}
+
+.lil-nav {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  display: -webkit-box;
+  display: flex;
+  grid-row-start: 2;
+}
+@media screen and (min-width: 1200px) {
+  .lil-nav {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    display: block;
+    grid-row-start: auto;
+  }
+}
+.lil-nav a {
+  display: -webkit-box;
+  display: flex;
+  min-width: 45vw;
+  margin-right: 10px;
+}
+@media screen and (min-width: 1200px) {
+  .lil-nav a {
+    margin-bottom: 10px;
+    min-height: 200px;
+    min-width: 100%;
+  }
+}
+
+.lil-nav__img {
+  -o-object-fit: cover;
+     object-fit: cover;
+  -webkit-filter: saturate(0);
+          filter: saturate(0);
+  -webkit-transition: 0.3s ease all;
+  transition: 0.3s ease all;
+}
+.lil-nav__img:hover {
+  -webkit-transform: scale(1.05);
+          transform: scale(1.05);
+  -webkit-filter: saturate(1);
+          filter: saturate(1);
+}
\ No newline at end of file
diff --git a/scrolly-carousel-example-7/license.txt b/scrolly-carousel-example-7/license.txt
new file mode 100644
index 0000000..4d6bab2
--- /dev/null
+++ b/scrolly-carousel-example-7/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Robin Rendle (https://codepen.io/robinrendle/pen/YzyqNJK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/scrolly-carousel-example-7/src/index.html b/scrolly-carousel-example-7/src/index.html
new file mode 100644
index 0000000..2f42896
--- /dev/null
+++ b/scrolly-carousel-example-7/src/index.html
@@ -0,0 +1,39 @@
+<div class="wrapper">
+  <nav class="lil-nav">
+    <a href="#image-1">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/kenan-sulayman-FV3M7igu8Fs-unsplash.jpg" alt="Yosemite" />
+    </a>
+    <a href="#image-2">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/anastasia-dulgier-NCFTGtjY3EQ-unsplash.jpg" alt="Houses" />
+    </a>
+    <a href="#image-3">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/arnaud-mariat-IPXcUYHeErc-unsplash.jpg" alt="Galaxies" />
+    </a>
+    <a href="#image-4">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/matthew-smith-9CV6WrxxdrM-unsplash.jpg" alt="Motel" />
+    </a>
+    <a href="#image-5">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/vladimir-kondriianenko-bxwzcFy9YwM-unsplash.jpg" alt="Minimalist nightmare" />
+    </a>
+    <a href="#image-6">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/jakob-owens-EkxOtUljwhs-unsplash.jpg" alt="Hoops" />
+    </a>
+    <a href="#image-7">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/tim-bogdanov-4uojMEdcwI8-unsplash.jpg" alt="Gentleman" />
+    </a>
+    <a href="#image-8">
+      <img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/weston-mackinnon-caUtk0DTiR0-unsplash.jpg" alt="Stuff" />
+    </a>
+  </nav>
+
+  <div class="gallery">
+    <img class="gallery__img" id="image-1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/kenan-sulayman-FV3M7igu8Fs-unsplash.jpg" alt="Yosemite" />
+    <img class="gallery__img" id="image-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/anastasia-dulgier-NCFTGtjY3EQ-unsplash.jpg" alt="Houses" />
+    <img class="gallery__img" id="image-3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/arnaud-mariat-IPXcUYHeErc-unsplash.jpg" alt="Galaxies" />
+    <img class="gallery__img" id="image-4" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/matthew-smith-9CV6WrxxdrM-unsplash.jpg" alt="Motel" />
+    <img class="gallery__img" id="image-5" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/vladimir-kondriianenko-bxwzcFy9YwM-unsplash.jpg" alt="Minimalist nightmare" />
+    <img class="gallery__img" id="image-6" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/jakob-owens-EkxOtUljwhs-unsplash.jpg" alt="Hoops" />
+    <img class="gallery__img" id="image-7" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/tim-bogdanov-4uojMEdcwI8-unsplash.jpg" alt="Gentleman" />
+    <img class="gallery__img" id="image-8" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/weston-mackinnon-caUtk0DTiR0-unsplash.jpg" alt="Stuff" />
+  </div>
+</div>
\ No newline at end of file
diff --git a/scrolly-carousel-example-7/src/style.scss b/scrolly-carousel-example-7/src/style.scss
new file mode 100644
index 0000000..237286e
--- /dev/null
+++ b/scrolly-carousel-example-7/src/style.scss
@@ -0,0 +1,83 @@
+$large: 1200px;
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+.wrapper {
+  overflow: hidden;
+  height: 100vh;
+  display: grid;
+  grid-template-rows: 2fr 1fr;
+  grid-gap: 10px;
+
+  @media screen and (min-width: $large) {
+    grid-template-columns: 1fr 5fr;
+    grid-template-rows: auto;
+  }
+}
+
+.gallery {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  display: flex;
+
+  @media screen and (min-width: $large) {
+    display: block;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    scroll-snap-type: y mandatory;
+  }
+}
+
+.gallery__img {
+  scroll-snap-align: start;
+  margin-bottom: 10px;
+  min-width: 100vw;
+  object-fit: cover;
+
+  @media screen and (min-width: $large) {
+    min-width: auto;
+    min-height: 100vh;
+  }
+}
+
+.lil-nav {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  display: flex;
+  grid-row-start: 2;
+
+  @media screen and (min-width: $large) {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    display: block;
+    grid-row-start: auto;
+  }
+
+  a {
+    display: flex;
+    min-width: 45vw;
+    margin-right: 10px;
+
+    @media screen and (min-width: $large) {
+      margin-bottom: 10px;
+      min-height: 200px;
+      min-width: 100%;
+    }
+  }
+}
+
+.lil-nav__img {
+  object-fit: cover;
+  filter: saturate(0);
+  transition: 0.3s ease all;
+
+  &:hover {
+    transform: scale(1.05);
+    filter: saturate(1);
+  }
+}
diff --git a/search-algorithm-puppy/README.markdown b/search-algorithm-puppy/README.markdown
new file mode 100644
index 0000000..4c2b5a5
--- /dev/null
+++ b/search-algorithm-puppy/README.markdown
@@ -0,0 +1,5 @@
+# search algorithm puppy
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Ma5a/pen/jOBWBYw](https://codepen.io/Ma5a/pen/jOBWBYw).
+
+You can click on the white area of the map to throw a bone, and the puppy would figure out a route to fetch it. The algorithm is based on the A* search algorithm.
diff --git a/search-algorithm-puppy/dist/index.html b/search-algorithm-puppy/dist/index.html
new file mode 100644
index 0000000..56c8888
--- /dev/null
+++ b/search-algorithm-puppy/dist/index.html
@@ -0,0 +1,738 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - search algorithm puppy</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<body>
+
+  <div class="wrapper">
+    <div class="map">
+    </div>  
+    <div class="map_cover">
+      <div class="sprite_container">
+        <svg class="sprite" x="0px" y="0px" width="1811px" height="150.9px" viewBox="0 0 1811 150.9">
+          <style type="text/css">
+            .st0{fill:#FFFFFF;}
+          </style>
+          <polygon class="st0" points="1705.3,40.4 1709.8,40.4 1713.3,36.1 1718.5,31.2 1722.8,26.7 1732.7,26.7 1732.7,16.3 1738.6,11.1 
+            1742.6,7.1 1747,1.4 1751.8,1.4 1756,6.7 1761,11.4 1761,16.1 1747,17.3 1742.8,19.9 1742.3,24.6 1751.5,25.5 1756,30 1761,34.5 
+            1765.7,41.6 1765.7,71.5 1771.3,79.3 1771.3,86.1 1778.9,86.1 1783.6,90.4 1789.5,96 1789.5,100.8 1785.2,105.2 1780.5,109.5 
+            1783.8,115.4 1789.5,119.4 1789.5,125 1785,128.8 1780.1,133.5 1766.4,133.5 1761.4,138.8 1756.9,138.8 1752,134 1747.4,130 
+            1747.4,125.3 1728.7,125 1728.9,129.5 1723.2,133.8 1719,138.8 1714.3,138.8 1709.3,133.8 1709.3,129.8 1704.1,129.8 1700.8,133.3 
+            1690.9,133.3 1686.2,129.3 1681,124.1 1682.6,120.5 1685.3,114.5 1691.9,110.9 1687.2,106.4 1681,101.1 1681,96.5 1685.5,92.4 
+            1689.5,87.1 1700.8,87.4 1700.8,75.9 1705.5,73.8 "/>
+          <polygon class="st0" points="1553.8,44.7 1557.1,44.7 1558.9,39.3 1563.1,35.3 1567.3,30.6 1573.2,25.9 1576.6,25.9 1576.6,21.1 
+            1571.5,16.1 1558,16.1 1558,12.7 1562.5,7.3 1568.1,1.4 1573.2,1.4 1576.6,7.6 1582.2,11.5 1585.3,16.1 1586.4,25.4 1601.1,25.9 
+            1605.3,30.6 1610.1,35.3 1615.1,40 1615.1,77.3 1619.1,83.3 1619.1,91.9 1628.1,91.9 1634,96.6 1638.2,101.4 1638.2,106 
+            1633.7,109.8 1629.2,115.4 1633.4,119.9 1638.2,124.9 1638.2,129.2 1634.3,133.5 1628.7,137.7 1620.2,137.7 1613.2,134.3 
+            1611.5,137.7 1605.9,137.7 1599.9,134.3 1599.9,129.5 1573.8,129.2 1573.2,133.2 1568.1,138.8 1563.1,138.8 1558,134.6 1553.8,134 
+            1549.8,137.7 1539.4,137.7 1533.2,133.5 1529.3,127.3 1529.3,124.9 1535.2,121.1 1538.8,114 1534.9,110.9 1530.4,106 1530.4,100.1 
+            1535.5,96.6 1538.3,91.9 1548.4,91.9 1548.4,83.6 1553.5,77.3 "/>
+          <polygon class="st0" points="106.5,77.4 109.6,82.4 110.9,92.2 114.1,95.5 114.4,111.3 111,115.5 110.5,125.1 107.2,128.1 
+            104.1,131 102.7,133 95.2,133.1 91,129.1 71.8,129 67,139.8 64.2,143 57.3,142.6 53.2,138 47.4,133.2 44.2,126.1 44,115.9 
+            38.9,114.7 35.9,111 35.9,95.5 39.9,92.6 40.1,81.5 44.2,78.5 44.2,46.5 51.1,38.2 62.7,26.4 72.4,25.5 73.2,15.8 78.7,10.5 
+            82.9,6.4 85.6,3.5 90.8,3.2 97.6,6.3 98.8,9.8 101.4,16 100,16 85.7,16.3 82.7,22.7 87.5,26.5 99.3,38.3 101.8,45.5 105.8,45.5 "/>
+          <polygon class="st0" points="256.2,77.3 260.8,82.2 260.9,92.6 265.3,95.3 265.6,111 261.4,115.1 261.7,124.8 258.4,127.8 
+            255.2,134.2 252.9,139.2 245.6,139.3 238.3,130 218,129.8 212.8,135.4 209.2,138.9 204.8,139.1 200.8,135.6 198.9,128.6 
+            195.4,125.8 195.2,115.7 190.1,114.4 187.1,110.7 187.1,95.3 191.1,92.3 191.3,81.3 195.4,78.2 195.4,46.3 202.3,38 213.9,26.1 
+            223.6,25.3 224.4,15.6 224,5.5 227,4 229.5,3.3 231.8,6.7 233.9,22.5 237.9,26.9 249.3,37.7 253,45.3 257,45.3 "/>
+          <polygon class="st0" points="346,77.2 342.9,82.2 341.5,91.9 338.4,95.3 338.1,111 341.5,115.3 341.9,124.8 345.2,127.8 
+            348.4,130.7 349.8,132.8 357.2,132.9 361.4,128.8 380.6,128.8 385.4,139.6 388.2,142.7 395.1,142.4 399.2,137.8 405,132.9 
+            408.2,125.8 408.5,115.7 413.5,114.4 416.5,110.7 416.5,95.3 412.5,92.3 412.3,81.3 408.2,78.2 408.2,46.3 401.3,38 389.7,26.1 
+            380,25.3 379.2,15.6 373.7,10.3 369.5,6.1 366.9,3.3 361.6,2.9 354.8,6 353.6,9.6 351,15.7 352.4,15.7 366.7,16.1 369.7,22.5 
+            364.9,26.2 353.1,38 350.6,45.3 346.7,45.3 "/>
+          <polygon class="st0" points="497.8,6.4 501.3,6.4 516.5,21.8 540.4,21.8 543.8,16.7 549.6,11.7 554.3,6.4 559.5,6.4 558.8,43.7 
+            562.2,48.1 563.3,54.8 568,58.4 568,72.8 563.1,77.9 559,81.7 559,91.6 562.9,96.5 563.1,129 559.3,133.8 559.3,139.3 554.3,143.6 
+            548.6,143.6 544.3,138.4 543.4,133.1 539.1,129.9 516.4,129.5 511.5,133.8 507,134 502.1,129.9 502.3,125.6 497.8,120.5 497.8,95.6 
+            502.3,92.7 502.8,82.8 496.7,82.6 493.5,78.5 488,72.8 488,58.6 492.3,54.6 493.1,49.9 497,44.7 "/>
+          <polygon class="st0" points="648.5,6.3 652.1,6.3 667.3,21.7 691.1,21.7 694.5,16.7 700.3,11.6 705,6.3 710.3,6.3 709.5,43.7 
+            712.9,48 714,54.8 718.7,58.3 718.7,72.8 713.8,77.9 708.7,82.8 703.5,82.8 703.9,91.3 709.1,96.2 708.6,119.7 704.6,126.3 
+            705.1,134.5 698.3,139.6 693.8,138.4 689.7,133.2 685.3,130 670.3,130.3 666.7,134.2 662.1,139.3 656.5,139.9 653.4,133.4 
+            653,125.5 648.5,120.5 648.5,95.5 653,92.7 653.6,82.7 647.4,82.6 644.2,78.4 638.7,72.8 638.7,58.5 643.1,54.6 643.8,49.9 
+            647.8,44.6 "/>
+          <polygon class="st0" points="860.1,6.4 856.6,6.4 841.4,21.8 817.5,21.8 814.2,16.7 808.3,11.7 803.6,6.4 798.4,6.4 799.1,43.7 
+            795.8,48.1 794.6,54.8 789.9,58.4 789.9,72.8 794.8,77.9 799,81.7 799,91.6 795,96.5 794.8,129 798.6,133.8 798.6,139.3 
+            803.6,143.6 809.3,143.6 813.6,138.4 814.5,133.1 818.8,129.9 841.6,129.5 846.4,133.8 850.9,134 855.8,129.9 855.6,125.6 
+            860.1,120.5 860.1,95.6 855.6,92.7 855.1,82.8 861.3,82.6 864.5,78.5 869.9,72.8 869.9,58.6 865.6,54.6 864.8,49.9 860.9,44.7 "/>
+          <polygon class="st0" points="935.7,58.2 945.5,49.8 949,45.4 955,39.4 955,29.3 959.3,26.5 963.5,29.5 963.5,35.1 969.1,40.4 
+            973.6,40.4 978.1,35.1 983,30.4 987.9,26.5 992.4,30 992.4,77.5 1010.2,77.5 1016,82 1021.5,82 1024.7,78.7 1044.6,78.7 1048.7,82 
+            1044.9,86.4 1039.7,92 1035,92 1029.7,87.7 1025,88 1025.4,92 1029.9,96.5 1033.7,100.2 1034.2,106.3 1039.1,110 1044.2,115.6 
+            1044.2,124.5 1040.2,129 1035.4,129 1028.4,125.6 1025.8,125.6 1020.4,120 1015.8,119.8 1016,124.1 1011.2,130.1 1006.3,133.8 
+            1001.6,133.8 996.7,129.9 997.1,119.4 992.2,119.4 987.5,125.8 987.1,130.1 983.2,133.8 978.5,133.8 964,120.7 954.3,120.5 
+            950.7,124.5 935.7,124.8 930.8,120.9 935.9,115.3 940.8,111.1 941,106.1 934.6,100.6 925.7,100.6 911.3,86.5 911.3,72.8 918.1,67.8 
+            921.8,63.6 927.4,63.3 930.3,59.5 "/>
+          <polygon class="st0" points="1062.4,86 1062.4,73.8 1066.9,68.2 1072.2,63.6 1078,63.6 1080.8,58.4 1087.6,58.4 1090.6,53.5 
+            1094.7,50.7 1099.6,45.4 1105,40.4 1105,31.2 1109.9,25.7 1114,30.2 1114,35.9 1118.9,39.1 1123.6,39.1 1128.3,36.1 1132.8,31 
+            1137.7,25.7 1142.7,30.2 1142.7,72.8 1161.7,73.8 1166.2,77.7 1171.3,72.8 1176,68.5 1180.5,63.6 1185.7,58.6 1189.9,63.8 
+            1189.9,72.8 1185.7,77.2 1180.8,82.4 1175,82.4 1175,86 1179.3,91.2 1179.9,105.1 1189.9,109.6 1189.9,124.1 1185,124.1 
+            1180.7,120.5 1175.6,115.8 1171.1,119.8 1166.2,125.4 1161.1,129.5 1157.4,125.4 1156.4,116.2 1146.9,116 1146.7,124.8 
+            1143.9,129.5 1137.7,129.5 1133.7,125.6 1129,120.5 1123,120.3 1119.6,124.5 1113.3,124.5 1110.6,129.5 1095.6,129.5 1090.7,124.6 
+            1090.6,120.3 1096.2,114.9 1100.7,110.6 1100.5,106.1 1091.1,106.1 1084.7,101.6 1075.7,101.2 1072.2,96.9 1067.1,91.8 "/>
+          <polygon class="st0" points="1327.5,58.2 1317.7,49.8 1314.1,45.4 1308.1,39.4 1308.1,29.3 1303.8,26.5 1299.7,29.5 1299.7,35.1 
+            1294,40.4 1289.5,40.4 1285,35.1 1280.2,30.4 1275.3,26.5 1270.8,30 1270.8,77.5 1252.9,77.5 1247.1,82 1241.7,82 1238.5,78.7 
+            1218.6,78.7 1214.5,82 1218.2,86.4 1223.5,92 1228.2,92 1233.4,87.7 1238.1,88 1237.7,92 1233.2,96.5 1229.5,100.2 1228.9,106.3 
+            1224,110 1219,115.6 1219,124.5 1222.9,129 1227.8,129 1234.7,125.6 1237.4,125.6 1242.8,120 1247.3,119.8 1247.1,124.1 1252,130.1 
+            1256.9,133.8 1261.6,133.8 1266.5,129.9 1266.1,119.4 1271,119.4 1275.6,125.8 1276,130.1 1280,133.8 1284.7,133.8 1299.1,120.7 
+            1308.9,120.5 1312.4,124.5 1327.6,123.1 1332.3,120.9 1327.3,115.3 1322.4,111.1 1322.2,106.1 1328.6,100.6 1337.4,100.6 
+            1351.9,86.5 1351.9,72.8 1345.1,67.8 1341.3,63.6 1335.7,63.3 1332.9,59.5 "/>
+          <polygon class="st0" points="1501.8,85.7 1501.8,73.5 1497.3,67.9 1492.1,63.4 1486.3,63.4 1483.5,58.1 1476.7,58.1 1473.7,53.2 
+            1469.6,50.4 1464.7,45.2 1459.2,40.1 1459.2,30.9 1454.4,25.4 1450.2,30 1450.2,35.6 1445.4,38.8 1440.7,38.8 1436,35.8 
+            1431.5,30.7 1426.6,25.4 1421.5,30 1421.5,72.5 1402.6,73.5 1398,77.4 1393,72.5 1388.3,68.2 1383.8,63.4 1378.5,58.3 1374.4,63.6 
+            1374.4,72.5 1378.5,76.9 1383.4,82.1 1389.2,82.1 1389.2,85.7 1384.9,91 1384.3,104.8 1374.4,109.4 1374.4,123.8 1379.3,123.8 
+            1383.6,120.2 1388.7,115.5 1393.2,119.5 1398,125.1 1403.1,129.2 1406.9,125.1 1407.8,115.9 1417.4,115.7 1417.6,124.6 
+            1420.4,129.2 1426.6,129.2 1430.5,125.3 1435.2,120.2 1441.2,120.1 1444.6,124.2 1451,124.2 1453.6,129.2 1468.6,129.2 
+            1473.5,124.4 1473.7,120.1 1468.1,114.6 1463.6,110.3 1463.7,105.8 1473.1,105.8 1479.5,101.3 1488.5,100.9 1492.1,96.6 
+            1497.2,91.5 "/>
+          <g>
+            <g>
+              <g>
+                <path d="M1499.3,70.7c1.6,0,3.2,0,4.8,0c0,6.3,0,12.6,0,19c-1.6,0-3.2,0-4.8,0l0,0C1499.4,83.3,1499.4,77,1499.3,70.7
+                  L1499.3,70.7z"/>
+                <path d="M84.6,4.7c0-1.6,0-3.2,0-4.8c3.1,0,6.2,0,9.4,0c0,1.5,0,3.1,0,4.8c1.7,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.9l0,0
+                  c-1.5,0-3.1,0-4.8,0c0-1.8,0-3.2,0-4.8C90.7,4.6,87.6,4.6,84.6,4.7L84.6,4.7z"/>
+                <path d="M391,146.2c-1.5-0.1-2.9-0.2-4.5-0.3c0-1.5,0-3,0-4.5l0,0c3.1,0,6.1,0,9.4,0c0-1.7,0-3.2,0-4.8c1.7,0,3.3,0,4.8,0l0,0
+                  c0,1.5,0,3,0,4.7c-1.7,0-3.2,0-4.8,0c0,1.6,0,3,0,4.6c-1.6,0.1-3.1,0.2-4.6,0.3C391.2,146.2,391.1,146.2,391,146.2z"/>
+                <path d="M358.2,4.7c0-1.6,0-3.2,0-4.8c3.1,0,6.2,0,9.4,0c0,1.6,0,3.2,0,4.8l0,0C364.4,4.6,361.3,4.6,358.2,4.7L358.2,4.7z"/>
+                <path d="M806,146.2c-1.5-0.1-2.9-0.2-4.5-0.3c0-1.5,0-3,0-4.5l0,0c3.1,0,6.3,0,9.4,0l0,0c0,1.5,0,2.9,0,4.5
+                  c-1.6,0.1-3.1,0.2-4.5,0.3C806.2,146.2,806.1,146.2,806,146.2z"/>
+                <path d="M556.4,141.4c0,1.5,0,2.9,0,4.5c-1.6,0.1-3.1,0.2-4.5,0.3c-0.1,0-0.2,0-0.2,0c-1.5-0.1-2.9-0.2-4.5-0.3c0-1.5,0-3,0-4.5
+                  l0,0C550.2,141.5,553.3,141.5,556.4,141.4L556.4,141.4z"/>
+                <path d="M60.8,146.2c-1.5-0.1-2.9-0.2-4.6-0.3c0-1.5,0-3,0-4.5l0,0c3.1,0,6.3,0,9.4,0l0,0c0,1.5,0,2.9,0,4.5
+                  c-1.6,0.1-3.1,0.2-4.5,0.3C61,146.2,60.9,146.2,60.8,146.2z"/>
+                <path d="M230.5-0.2c0,1.6,0,3.2,0,4.8l0,0c-1.6,0-3.2,0-4.8,0l0,0c0-1.6,0-3.2,0-4.8C227.3-0.2,228.9-0.2,230.5-0.2z"/>
+                <path d="M344,127.3c-1.5,0-3.1,0-4.8,0c0-4.8,0-9.5,0-14.2l0,0c4.7,0,9.4,0,14.2,0c0,1.6,0,3.1,0,4.6c15.8,0,31.4,0,47.2,0
+                  c0-1.6,0-3,0-4.6c4.8,0,9.3,0,14,0c0-6.4,0-12.6,0-18.9c-1.6,0-3,0-4.7,0c0-4.7,0-9.3,0-14.1c-1.6,0-3.1,0-4.7,0
+                  c0-11.1,0-22,0-32.9c-1.6,0-3,0-4.7,0c0,1.5,0,3,0,4.5c-1.7,0-3.2,0-4.7,0c0-1.5,0-3,0-4.7c1.7,0,3.1,0,4.6,0c0-3.2,0-6.3,0-9.5
+                  c-1.6,0-3,0-4.6,0c0-1.7,0-3.1,0-4.6l0,0c1.5,0,3,0,4.7,0c0,1.5,0,2.9,0,4.6c1.6,0,3.1,0,4.7,0c0,1.7,0,3.2,0,4.8
+                  c1.7,0,3.1,0,4.7,0c0,12.6,0,25.1,0,37.7c1.6,0,3.1,0,4.7,0c0,4.8,0,9.4,0,14.1c1.6,0,3,0,4.6,0c0,6.4,0,12.6,0,18.9
+                  c-1.4,0-2.8,0-4.5,0c0,1.6,0,3.1,0,4.8c-1.7,0-3.1,0-4.8,0c0,4.7,0,9.3,0,14.1c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.8
+                  c-1.7,0-3.2,0-4.7,0l0,0c0-1.5,0-3.1,0-4.8c1.6,0,3.1,0,4.5,0c0-4.7,0-9.3,0-13.9c-1.5,0-3,0-4.6,0c0,1.5,0,3,0,4.4
+                  c-15.8,0-31.4,0-47.2,0c0-1.5,0-3,0-4.4c-3.2,0-6.2,0-9.3,0C344,121.2,344,124.2,344,127.3L344,127.3z"/>
+                <path d="M990.1,28.2c1.5,0,3,0,4.7,0c0,15.7,0,31.4,0,47.2c6.3,0,12.5,0,18.8,0c0,1.7,0,3.2,0,4.7l0,0c-6.2,0-12.4,0-18.8,0
+                  c0,3.3,0,6.3,0,9.6c-1.6,0-3.1,0-4.8,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.8,0c0,1.7,0,3.1,0,4.7c-1.6,0-3,0-4.6,0
+                  c0,1.6,0,3.1,0,4.8c-1.7,0-3.1,0-4.8,0c0,1.6,0,3.1,0,4.6c-11,0-21.9,0-33,0c0,1.6,0,3.1,0,4.8c-1.7,0-3.1,0-4.7,0
+                  c0,1.6,0,3,0,4.6c-1.6,0-3.1,0-4.7,0c0,1.7,0,3.2,0,4.7l0,0c-1.5,0-3,0-4.6,0c0-1.5,0-3,0-4.7c1.5,0,3,0,4.6,0c0-1.6,0-3,0-4.6
+                  c1.6,0,3,0,4.9,0c0-3.3,0-6.3,0-9.4l0,0c12.5,0,25,0,37.7,0c0-1.7,0-3.2,0-4.8c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7
+                  c1.6,0,3.1,0,4.7,0c0-1.7,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0C990.1,68.9,990.1,48.5,990.1,28.2L990.1,28.2z"/>
+                <path d="M1216.6,80c0-1.5,0-2.9,0-4.5c7.8,0,15.5,0,23.4,0c0,1.5,0,2.9,0,4.5c3.2,0,6.2,0,9.4,0c0-1.4,0-2.9,0-4.6
+                  c6.4,0,12.6,0,18.9,0c0-15.8,0-31.4,0-47.2c1.6,0,3,0,4.6,0c0-1.6,0-3.1,0-4.7c1.7,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.6l0,0
+                  c-1.5,0-3,0-4.6,0c0,20.5,0,40.9,0,61.4c1.6,0,3,0,4.6,0c0,1.7,0,3.1,0,4.6c-1.5,0-3.1,0-4.8,0c0-1.6,0-3.1,0-4.7
+                  c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.2,0-9.3c-6.3,0-12.5,0-18.9,0c0,1.6,0,3,0,4.6c-3.2,0-6.3,0-9.4,0l0,0c0-1.5,0-3,0-4.8
+                  C1232.2,80,1224.4,80,1216.6,80L1216.6,80z"/>
+                <path d="M490.4,56.5c0-3.1,0-6.1,0-9.4c1.6,0,3,0,4.7,0c0-14.2,0-28.2,0-42.3c3.2,0,6.3,0,9.5,0c0,1.5,0,3,0,4.6
+                  c1.6,0,3.1,0,4.7,0c0,1.6,0,3,0,4.6c1.6,0,3.1,0,4.7,0c0,1.7,0,3.1,0,4.8c9.6,0,18.9,0,28.3,0l0,0c0,1.5,0,3,0,4.6
+                  c-9.5,0-18.8,0-28.3,0c0-1.6,0-3,0-4.6c-1.6,0-3,0-4.7,0c0-1.6,0-3.1,0-4.8c-1.7,0-3.1,0-4.8,0c0-1.6,0-3.1,0-4.5
+                  c-1.6,0-3.1,0-4.7,0c0,12.6,0,25,0,37.6c-1.6,0-3.1,0-4.7,0c0,3.2,0,6.2,0,9.4C493.4,56.5,491.9,56.5,490.4,56.5L490.4,56.5z"/>
+                <path d="M1390.9,117.7c-1.5,0-3.1,0-4.6,0l0,0c0-3.1,0-6.1,0-9.3c-3.3,0-6.3,0-9.4,0c0,4.7,0,9.3,0,14.1c1.6,0,3.1,0,4.6,0l0,0
+                  c0,1.5,0,3,0,4.7c-3.1,0-6.2,0-9.3,0c0-6.2,0-12.4,0-18.8c1.5,0,3,0,4.6,0c0-1.6,0-3,0-4.7c1.7,0,3.1,0,4.7,0c0-4.8,0-9.4,0-14.1
+                  c1.6,0,3.1,0,4.6,0c0-1.7,0-3.2,0-4.8c-1.5,0-3,0-4.6,0c0-1.6,0-3,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7
+                  c-1.6,0-3.1,0-4.7,0c0-4.8,0-9.3,0-14.1c1.6,0,3.1,0,4.6,0l0,0c0,4.7,0,9.3,0,14.2c1.8,0,3.2,0,4.8,0c0,1.6,0,3,0,4.6
+                  c3.2,0,6.2,0,9.3,0c0,3.2,0,6.3,0,9.5c-1.5,0-3,0-4.4,0c0,6.3,0,12.5,0,18.8c1.5,0,2.9,0,4.5,0
+                  C1390.9,111.6,1390.9,114.6,1390.9,117.7L1390.9,117.7z"/>
+                <path d="M1140.3,28.2c1.5,0,3.1,0,4.8,0c0,14.2,0,28.3,0,42.5c6.3,0,12.4,0,18.8,0c0,1.6,0,3,0,4.8c1.7,0,3.3,0,4.8,0l0,0
+                  c0,1.5,0,3,0,4.5c-1.7,0-3.1,0-4.8,0c0-1.6,0-3,0-4.5c-6.4,0-12.5,0-18.8,0c0,4.7,0,9.3,0,14.1c-1.7,0-3.2,0-4.8,0
+                  C1140.3,69.1,1140.3,48.6,1140.3,28.2L1140.3,28.2z"/>
+                <path d="M867.4,56.5c1.5,0,3,0,4.6,0c0,6.3,0,12.5,0,18.8c-1.5,0-3,0-4.6,0c0,1.6,0,3,0,4.7c-1.6,0-3,0-4.7,0c0,1.6,0,3.1,0,4.7
+                  c-1.6,0-3.1,0-4.7,0c0,3.2,0,6.2,0,9.4c1.4,0,2.9,0,4.5,0c0,9.5,0,18.8,0,28.3c-1.5,0-3,0-4.5,0l0,0c0-9.4,0-18.8,0-28.4
+                  c-1.8,0-3.3,0-4.8,0c0-4.7,0-9.3,0-14.1c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.6,0c0-1.7,0-3.2,0-4.7
+                  c1.5,0,3,0,4.7,0c0,1.7,0,3.1,0,4.8c3.2,0,6.3,0,9.5,0c0,1.6,0,3.1,0,4.5c1.6,0,3.1,0,4.7,0c0-1.5,0-3,0-4.6c1.6,0,3.1,0,4.7,0
+                  C867.4,68.9,867.4,62.7,867.4,56.5L867.4,56.5z"/>
+                <path d="M1400.2,75.5c0-1.5,0-3.1,0-4.8c6.4,0,12.6,0,19,0c0-14.2,0-28.3,0-42.5c1.7,0,3.2,0,4.8,0l0,0c0,20.5,0,41,0,61.5
+                  c-1.5,0-3.1,0-4.8,0c0-4.9,0-9.5,0-14.2C1412.8,75.4,1406.5,75.4,1400.2,75.5L1400.2,75.5z"/>
+                <path d="M1159.3,127.3c-1.5,0-3.1,0-4.8,0c0-3.2,0-6.2,0-9.3c-1.6,0-3.1,0-4.8,0c0,3.1,0,6.1,0,9.3c-1.7,0-3.2,0-4.7,0l0,0
+                  c0-3.1,0-6.2,0-9.3c-4.9,0-9.5,0-14.2,0c0,1.6,0,3,0,4.5l0,0c-3.1,0-6.2,0-9.5,0c0,1.6,0,3.1,0,4.8c-3.3,0-6.4,0-9.5,0l0,0
+                  c0-1.5,0-3.1,0-4.8c3.2,0,6.3,0,9.5,0c0-1.6,0-3,0-4.7c1.6,0,3.1,0,4.8,0c0-1.7,0-3.1,0-4.8c9.5,0,18.8,0,28.3,0
+                  c0-3.2,0-6.2,0-9.2c1.6,0,3.1,0,4.7,0C1159.3,111.7,1159.3,119.5,1159.3,127.3L1159.3,127.3z"/>
+                <path d="M499.8,122.5c-1.5,0-2.9,0-4.5,0c0-9.4,0-18.8,0-28.3c1.5,0,3,0,4.5,0c0-3.2,0-6.2,0-9.4c-1.5,0-2.9,0-4.6,0
+                  c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.6,0-3,0-4.7c-1.6,0-3.1,0-4.7,0c0-6.4,0-12.5,0-18.9c1.6,0,3.1,0,4.6,0l0,0
+                  c0,6.2,0,12.4,0,18.9c1.7,0,3.1,0,4.8,0c0,1.7,0,3.1,0,4.6c3.2,0,6.2,0,9.4,0c0-1.6,0-3,0-4.6c1.6,0,3.1,0,4.7,0
+                  c0-1.6,0-3.1,0-4.7c1.7,0,3.1,0,4.6,0c0,1.5,0,3.1,0,4.8c-1.6,0-3.1,0-4.7,0c0,1.6,0,3,0,4.7c-1.6,0-3.1,0-4.7,0
+                  c0,4.8,0,9.3,0,14.1c-1.6,0-3.1,0-4.8,0C499.7,103.7,499.7,113.1,499.8,122.5L499.8,122.5z"/>
+                <path d="M1182.8,122.5c-1.5,0-3,0-4.7,0c0-1.6,0-3,0-4.5c-1.6,0-3,0-4.7,0c0,1.4,0,2.9,0,4.5c-1.7,0-3.3,0-4.8,0l0,0
+                  c0-1.5,0-3,0-4.7c1.7,0,3.1,0,4.8,0c0-3.2,0-6.3,0-9.5c1.6,0,3.1,0,4.6,0c0-6.3,0-12.4,0-18.8c-1.5,0-3,0-4.5,0
+                  c0-3.2,0-6.3,0-9.5c3.2,0,6.3,0,9.3,0l0,0c0,1.5,0,3.1,0,4.8c-1.6,0-3.1,0-4.6,0c0,1.6,0,3.1,0,4.7c1.5,0,3,0,4.6,0
+                  c0,4.8,0,9.4,0,14.2c1.6,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.6c1.6,0,3,0,4.6,0c0,6.3,0,12.5,0,18.8c-3,0-6.1,0-9.3,0
+                  C1182.8,125.6,1182.8,124.1,1182.8,122.5c1.5,0,3,0,4.6,0c0-4.7,0-9.4,0-14c-3.1,0-6.1,0-9.2,0c0,3.2,0,6.2,0,9.4
+                  c1.6,0,3,0,4.6,0C1182.8,119.6,1182.8,121,1182.8,122.5z"/>
+                <path d="M1419.2,127.3c-1.5,0-3,0-4.7,0c0-3.2,0-6.2,0-9.4c-1.6,0-3.1,0-4.7,0c0,3.1,0,6.2,0,9.4c-1.7,0-3.2,0-4.8,0l0,0
+                  c0-7.8,0-15.6,0-23.5c1.7,0,3.2,0,4.8,0c0,3.1,0,6.1,0,9.3c9.5,0,18.8,0,28.3,0c0,1.6,0,3,0,4.6c1.6,0,3.1,0,4.6,0
+                  c0,1.7,0,3.2,0,4.7l0,0c-3.1,0-6.3,0-9.4,0l0,0c0-1.5,0-3,0-4.6c-4.7,0-9.4,0-14.2,0C1419.2,121.1,1419.2,124.2,1419.2,127.3
+                  L1419.2,127.3z"/>
+                <path d="M1339,99c0,1.5,0,3,0,4.7c-4.6,0-9.2,0-13.9,0c0,3.3,0,6.4,0,9.5l0,0c-1.6,0-3.2,0-4.9,0c0-1.7,0-3.1,0-4.8
+                  c-11.1,0-22,0-33,0c0-1.6,0-3,0-4.6c-1.6,0-3.1,0-4.6,0c0-1.7,0-3.2,0-4.7c1.5,0,3,0,4.7,0c0,1.7,0,3.1,0,4.6
+                  c12.7,0,25.1,0,37.8,0c0-1.6,0-3,0-4.6C1329.9,99,1334.5,99,1339,99L1339,99z"/>
+                <path d="M1013.6,80c3.1,0,6.1,0,9.4,0c0-1.5,0-3,0-4.5c8,0,15.7,0,23.6,0c0,1.5,0,2.9,0,4.6c1.6,0,3,0,4.6,0c0,1.6,0,3.1,0,4.7
+                  c-1.5,0-2.9,0-4.6,0c0,1.6,0,3.1,0,4.8c-1.7,0-3.2,0-4.8,0l0,0c0-1.6,0-3.2,0-4.9c1.7,0,3.1,0,4.6,0c0-1.6,0-3,0-4.6
+                  c-7.8,0-15.6,0-23.4,0c0,1.6,0,3,0,4.6c3.1,0,6.2,0,9.4,0c0,1.7,0,3.2,0,4.8l0,0c-1.6,0-3.1,0-4.8,0c0,1.7,0,3.1,0,4.6l0,0
+                  c-1.5,0-3.1,0-4.8,0c0-3.2,0-6.2,0-9.4c-3.2,0-6.2,0-9.4,0C1013.6,83.1,1013.6,81.5,1013.6,80L1013.6,80z"/>
+                <path d="M1490,99c0,1.5,0,3,0,4.7c-4.7,0-9.3,0-14.1,0c0,1.6,0,3,0,4.6c-3.2,0-6.2,0-9.4,0c0,1.8,0,3.3,0,4.8l0,0
+                  c-1.6,0-3.2,0-4.9,0c0-1.7,0-3.2,0-4.8c-7.9,0-15.6,0-23.5,0c0-1.6,0-3.1,0-4.6c12.5,0,25,0,37.7,0c0-1.8,0-3.2,0-4.8
+                  C1480.7,99,1485.3,99,1490,99L1490,99z"/>
+                <path d="M853.3,9.5c0-1.5,0-3.1,0-4.7c3.2,0,6.2,0,9.4,0c0,14.1,0,28.1,0,42.3c1.6,0,3.1,0,4.8,0c0,3.3,0,6.4,0,9.5l0,0
+                  c-1.5,0-3.1,0-4.8,0c0-3.2,0-6.2,0-9.4c-1.6,0-3.1,0-4.7,0c0-12.6,0-25.1,0-37.6C856.3,9.4,854.8,9.4,853.3,9.5L853.3,9.5z"/>
+                <path d="M702.1,9.5c0-1.5,0-3.1,0-4.7c3.2,0,6.2,0,9.4,0c0,14.1,0,28.1,0,42.3c1.6,0,3.1,0,4.8,0c0,3.3,0,6.4,0,9.5l0,0
+                  c-1.5,0-3.1,0-4.8,0c0-3.2,0-6.2,0-9.4c-1.6,0-3.1,0-4.7,0c0-12.6,0-25.1,0-37.6C705.1,9.4,703.6,9.4,702.1,9.5L702.1,9.5z"/>
+                <path d="M547,14c0-1.5,0-2.9,0-4.6c1.6,0,3,0,4.7,0c0-1.6,0-3.1,0-4.7c3.2,0,6.2,0,9.5,0c0,14.1,0,28.3,0,42.4l0,0
+                  c-1.5,0-3.1,0-4.8,0c0-12.7,0-25.1,0-37.6c-1.6,0-3.1,0-4.7,0c0,1.5,0,3,0,4.5C550,14,548.5,14,547,14L547,14z"/>
+                <path d="M796.6,47.1c0-14.1,0-28.2,0-42.4c3.2,0,6.2,0,9.6,0c0,1.6,0,3.1,0,4.7l0,0c-1.6,0-3.2,0-4.9,0c0,12.6,0,25,0,37.7
+                  C799.7,47.1,798.2,47.1,796.6,47.1L796.6,47.1z"/>
+                <path d="M645.4,47.1c0-14.1,0-28.2,0-42.4c3.3,0,6.3,0,9.6,0c0,1.6,0,3.2,0,4.7l0,0c-1.5,0-3.1,0-4.8,0c0,12.6,0,25,0,37.7
+                  C648.5,47.1,647,47.1,645.4,47.1L645.4,47.1z"/>
+                <path d="M990.1,122.5c0,3.1,0,6.1,0,9.4c-1.6,0-3.1,0-4.8,0c0,1.7,0,3.1,0,4.7c-3.2,0-6.2,0-9.4,0c0-1.5,0-3,0-4.6
+                  c-1.6,0-3.1,0-4.7,0c0-1.6,0-3,0-4.6c-1.6,0-3.1,0-4.7,0c0-1.7,0-3.1,0-4.8c-4.8,0-9.5,0-14.1,0l0,0c0-1.5,0-3.1,0-4.8
+                  c-1.8,0-3.2,0-4.7,0c0-1.6,0-3,0-4.5c1.5,0,3,0,4.7,0c0,1.5,0,3,0,4.6c4.8,0,9.4,0,14.2,0c0,1.7,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0
+                  c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.5c3.2,0,6.2,0,9.4,0c0-3.1,0-6.1,0-9.3C987,122.5,988.5,122.5,990.1,122.5
+                  L990.1,122.5z"/>
+                <path d="M358.2,33c0-1.5,0-3.1,0-4.8c1.6,0,3,0,4.6,0c0-1.6,0-3,0-4.7c1.7,0,3.2,0,4.8,0c0-1.7,0-3.2,0-4.7l0,0
+                  c1.5,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.6c1.6,0,3.1,0,4.6,0c0-3.2,0-6.3,0-9.4l0,0c1.5,0,3.1,0,4.8,0c0,3.2,0,6.3,0,9.5
+                  c3.2,0,6.2,0,9.4,0c0,1.7,0,3.2,0,4.7l0,0c-9.4,0-18.7,0-28.3,0c0,1.7,0,3.2,0,4.8C361.1,33,359.6,33,358.2,33L358.2,33z"/>
+                <path d="M858.1,122.5c0,3.1,0,6.1,0,9.4c-1.6,0-3.1,0-4.7,0c0,1.7,0,3.1,0,4.7c-3.2,0-6.3,0-9.5,0c0-1.5,0-3,0-4.7
+                  c-9.6,0-18.9,0-28.3,0l0,0c0-1.5,0-3,0-4.5c9.5,0,18.8,0,28.3,0c0,1.5,0,3,0,4.4c3.2,0,6.2,0,9.4,0c0-3.1,0-6.1,0-9.3
+                  C855,122.5,856.5,122.5,858.1,122.5L858.1,122.5z"/>
+                <path d="M1226,108.3c0-3.1,0-6.1,0-9.4c1.6,0,3,0,4.6,0c0-1.7,0-3.1,0-4.8c-3.1,0-6.1,0-9.3,0c0-1.6,0-3,0-4.6c-1.6,0-3,0-4.7,0
+                  c0-1.7,0-3.3,0-4.8l0,0c1.5,0,3,0,4.7,0c0,1.6,0,3.1,0,4.6c3.2,0,6.3,0,9.5,0c0-1.6,0-3,0-4.6c3.3,0,6.3,0,9.4,0l0,0
+                  c0,3.1,0,6.2,0,9.4c-1.7,0-3.3,0-4.8,0c0-1.5,0-3,0-4.5c-1.6,0-3,0-4.5,0c0,1.5,0,3,0,4.5c1.6,0,3.1,0,4.5,0c0,1.5,0,3.1,0,4.8
+                  c-1.6,0-3.1,0-4.7,0c0,3.2,0,6.2,0,9.3C1229,108.3,1227.5,108.3,1226,108.3L1226,108.3z"/>
+                <path d="M1273,122.5c-1.5,0-2.9,0-4.6,0c0,3.2,0,6.2,0,9.4c-1.6,0-3.1,0-4.8,0c0,1.6,0,3.1,0,4.6c-3.2,0-6.2,0-9.4,0
+                  c0-1.5,0-3,0-4.6c-1.6,0-3.1,0-4.8,0c0-1.7,0-3.2,0-4.7l0,0c1.5,0,3.1,0,4.8,0c0,1.6,0,3,0,4.5c3.2,0,6.2,0,9.3,0
+                  c0-3.1,0-6.1,0-9.3c-3.1,0-6.1,0-9.3,0c0-1.6,0-3.1,0-4.6c6.2,0,12.4,0,18.7,0C1273,119.6,1273,121,1273,122.5L1273,122.5z"/>
+                <path d="M1097.8,113.1c0-1.5,0-3.1,0-4.8c-3.1,0-6.1,0-9.4,0c0-1.6,0-3.1,0-4.6l0,0c12.6,0,25.1,0,37.7,0c0,1.5,0,3,0,4.6
+                  c-8,0-15.7,0-23.6,0c0,1.6,0,3.1,0,4.7C1100.9,113.1,1099.4,113.1,1097.8,113.1L1097.8,113.1z"/>
+                <path d="M1306.1,28.2c1.5,0,3,0,4.7,0c0,4.7,0,9.3,0,14.1c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0
+                  c0,1.6,0,3,0,4.7c1.6,0,3.1,0,4.7,0c0,1.7,0,3.1,0,4.8c3.2,0,6.3,0,9.5,0c0,1.7,0,3.3,0,4.8l0,0c-3.1,0-6.2,0-9.5,0
+                  c0-1.7,0-3.2,0-4.8c-1.7,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.7,0-3.1,0-4.7c-1.6,0-3,0-4.7,0
+                  c0-1.6,0-3.1,0-4.7c-1.7,0-3.1,0-4.7,0C1306.2,37.5,1306.2,32.8,1306.1,28.2L1306.1,28.2z"/>
+                <path d="M1329.7,122.5c0,1.5,0,3.1,0,4.7c-6.3,0-12.4,0-18.8,0c0-1.5,0-3,0-4.7c-4.8,0-9.5,0-14.1,0l0,0c0-1.5,0-3,0-4.7
+                  c4.7,0,9.3,0,14.1,0c0-1.7,0-3.1,0-4.6c1.7,0,3.1,0,4.6,0c0,1.6,0,3,0,4.7c-1.5,0-3,0-4.5,0c0,1.6,0,3.1,0,4.6
+                  C1317.3,122.5,1323.5,122.5,1329.7,122.5L1329.7,122.5z"/>
+                <path d="M542.2,131.8c-9.3,0-18.7,0-28.2,0c0,1.7,0,3.1,0,4.7c-3.2,0-6.2,0-9.5,0c0-1.6,0-3.1,0-4.7l0,0c3.1,0,6.2,0,9.4,0
+                  c0-1.6,0-3,0-4.5c9.5,0,18.8,0,28.2,0C542.2,128.9,542.2,130.4,542.2,131.8L542.2,131.8z"/>
+                <path d="M815.6,18.8c9.3,0,18.7,0,28.2,0c0-1.6,0-3.1,0-4.8c1.7,0,3.1,0,4.7,0c0-1.6,0-3,0-4.6c1.7,0,3.2,0,4.8,0l0,0
+                  c0,1.5,0,3,0,4.6c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.8c-1.7,0-3.1,0-4.7,0c0,1.6,0,3,0,4.5c-9.5,0-18.8,0-28.2,0
+                  C815.6,21.7,815.6,20.3,815.6,18.8L815.6,18.8z"/>
+                <path d="M561.2,94.2c1.5,0,2.9,0,4.5,0c0,12.6,0,25,0,37.7c-1.5,0-3,0-4.5,0l0,0C561.2,119.3,561.2,106.7,561.2,94.2L561.2,94.2z
+                  "/>
+                <path d="M796.6,131.8c-1.5,0-2.9,0-4.5,0c0-12.5,0-25,0-37.7c1.5,0,3,0,4.5,0l0,0C796.6,106.7,796.6,119.3,796.6,131.8
+                  L796.6,131.8z"/>
+                <path d="M999.4,131.8c-1.5,0-2.9,0-4.6,0c0-3.1,0-6.1,0-9.4c-1.7,0-3.2,0-4.7,0l0,0c0-1.5,0-3.1,0-4.8c6.4,0,12.5,0,18.8,0
+                  c0-1.6,0-3,0-4.5c1.6,0,3.1,0,4.7,0c0,1.6,0,3,0,4.5l0,0c-1.5,0-3.1,0-4.8,0c0,1.8,0,3.2,0,4.8c-3.2,0-6.2,0-9.4,0
+                  C999.4,125.8,999.4,128.8,999.4,131.8L999.4,131.8z"/>
+                <path d="M1240.1,122.5c0,1.5,0,3.1,0,4.8c-3.2,0-6.2,0-9.4,0c0,1.6,0,3,0,4.5c-3.2,0-6.2,0-9.5,0c0-1.5,0-2.9,0-4.5
+                  c-1.6,0-3,0-4.6,0c0-4.7,0-9.3,0-14.2c1.5,0,3,0,4.5,0l0,0c0,4.7,0,9.3,0,14.1c3.3,0,6.3,0,9.6,0c0-1.6,0-3.1,0-4.7
+                  C1234,122.5,1237.1,122.5,1240.1,122.5L1240.1,122.5z"/>
+                <path d="M650.2,122.5c-1.5,0-3,0-4.6,0c0-9.4,0-18.8,0-28.3c1.6,0,3.1,0,4.6,0l0,0C650.2,103.6,650.2,113.1,650.2,122.5
+                  L650.2,122.5z"/>
+                <path d="M706.9,94.2c1.5,0,2.9,0,4.5,0c0,9.5,0,18.8,0,28.3c-1.5,0-3,0-4.5,0l0,0C706.9,113.1,706.9,103.6,706.9,94.2L706.9,94.2
+                  z"/>
+                <path d="M664.4,18.8c9.4,0,18.9,0,28.3,0l0,0c0,1.5,0,3,0,4.5c-9.5,0-18.9,0-28.3,0C664.4,21.7,664.4,20.3,664.4,18.8L664.4,18.8
+                  z"/>
+                <path d="M664.4,136.6c0,1.5,0,3,0,4.6c-3.1,0-6.1,0-9.4,0c0-1.5,0-3,0-4.6c-1.7,0-3.1,0-4.7,0c0-4.8,0-9.5,0-14.2l0,0
+                  c1.5,0,3.1,0,4.8,0c0,4.8,0,9.4,0,14.2C658.3,136.7,661.3,136.7,664.4,136.6L664.4,136.6z"/>
+                <path d="M1112,28.2c1.5,0,3.1,0,4.8,0c0,3.2,0,6.2,0,9.3c3.2,0,6.2,0,9.3,0c0-1.4,0-2.9,0-4.5c1.7,0,3.3,0,4.9,0l0,0
+                  c0,1.5,0,3,0,4.7c-1.7,0-3.1,0-4.8,0c0,1.6,0,3.1,0,4.6c-3.2,0-6.2,0-9.4,0c0-1.5,0-3,0-4.7c-1.7,0-3.1,0-4.8,0
+                  C1112,34.3,1112,31.2,1112,28.2L1112,28.2z"/>
+                <path d="M716.2,75.4c0,1.5,0,2.9,0,4.6c-1.6,0-3,0-4.7,0c0,1.7,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,3.2,0,6.3,0,9.4l0,0
+                  c-1.6,0-3.1,0-4.8,0c0-4.9,0-9.5,0-14.2c3.1,0,6.2,0,9.5,0c0-1.6,0-3,0-4.5C713.2,75.5,714.7,75.5,716.2,75.4L716.2,75.4z"/>
+                <path d="M1065,70.7c0-1.5,0-3,0-4.7c1.5,0,3,0,4.6,0c0-1.6,0-3.1,0-4.7c3.2,0,6.2,0,9.4,0c0-1.6,0-3.1,0-4.7c3.3,0,6.4,0,9.5,0
+                  l0,0c0,1.5,0,3.1,0,4.8c-3.2,0-6.2,0-9.4,0c0,1.6,0,3.1,0,4.7c-3.2,0-6.3,0-9.5,0c0,1.7,0,3.1,0,4.7
+                  C1067.9,70.6,1066.4,70.6,1065,70.7L1065,70.7z"/>
+                <path d="M919.3,94.2c-1.5,0-3,0-4.7,0c0-1.5,0-3,0-4.6c-1.6,0-3,0-4.6,0c0-6.3,0-12.5,0-18.9c1.5,0,3,0,4.5,0l0,0
+                  c0,6.2,0,12.5,0,18.9c1.8,0,3.2,0,4.8,0C919.3,91.2,919.3,92.7,919.3,94.2L919.3,94.2z"/>
+                <path d="M1348.6,70.7c1.5,0,2.9,0,4.5,0c0,6.3,0,12.5,0,18.9c-1.5,0-2.9,0-4.5,0c0,1.6,0,3,0,4.6c-1.7,0-3.3,0-4.9,0l0,0
+                  c0-1.5,0-3,0-4.7c1.7,0,3.2,0,4.8,0C1348.6,83.1,1348.6,76.8,1348.6,70.7L1348.6,70.7z"/>
+                <path d="M792.1,75.4c-1.5,0-3.1,0-4.7,0c0-6.4,0-12.5,0-18.9c1.6,0,3.2,0,4.7,0l0,0C792.1,62.8,792.1,69.1,792.1,75.4L792.1,75.4
+                  z"/>
+                <path d="M640.9,75.4c-1.5,0-3.1,0-4.7,0c0-6.4,0-12.5,0-18.9c1.6,0,3.1,0,4.7,0l0,0C640.9,62.8,640.9,69.1,640.9,75.4L640.9,75.4
+                  z"/>
+                <path d="M1065,89.6c-1.5,0-3.1,0-4.7,0c0-6.4,0-12.5,0-18.9c1.6,0,3.1,0,4.7,0l0,0C1064.9,77,1064.9,83.3,1065,89.6L1065,89.6z"
+                  />
+                <path d="M565.7,56.5c1.5,0,3.1,0,4.7,0c0,6.3,0,12.5,0,18.9c-1.6,0-3.2,0-4.7,0l0,0C565.8,69.1,565.8,62.8,565.7,56.5L565.7,56.5
+                  z"/>
+                <path d="M650.2,94.2c0-3.1,0-6.1,0-9.3c-1.6,0-3,0-4.8,0c0-1.7,0-3.3,0-4.8l0,0c3.2,0,6.4,0,9.6,0c0,4.7,0,9.4,0,14.2
+                  C653.2,94.2,651.7,94.2,650.2,94.2L650.2,94.2z"/>
+                <path d="M952.4,122.5c0,1.5,0,3.1,0,4.7c-6.4,0-12.5,0-18.9,0c0-1.6,0-3.1,0-4.7l0,0C939.8,122.5,946.1,122.5,952.4,122.5
+                  L952.4,122.5z"/>
+                <path d="M716.2,56.5c1.5,0,3,0,4.7,0c0,6.3,0,12.5,0,18.9c-1.6,0-3.1,0-4.7,0l0,0C716.2,69.1,716.2,62.8,716.2,56.5L716.2,56.5z"
+                  />
+                <path d="M961.7,28.2c1.5,0,3,0,4.7,0c0,3.1,0,6.2,0,9.4c3.3,0,6.4,0,9.5,0l0,0c0,1.6,0,3.2,0,4.7c-3.3,0-6.3,0-9.5,0
+                  c0-1.6,0-3,0-4.7c-1.6,0-3.1,0-4.7,0C961.8,34.3,961.8,31.2,961.7,28.2L961.7,28.2z"/>
+                <path d="M952.4,42.3c0-4.7,0-9.3,0-14.1c1.5,0,2.9,0,4.6,0c0-1.6,0-3.1,0-4.7c1.7,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.6l0,0
+                  c-1.5,0-3,0-4.7,0c0,4.8,0,9.4,0,14.2C955.3,42.3,953.9,42.3,952.4,42.3L952.4,42.3z"/>
+                <path d="M1475.8,56.5c3.1,0,6.1,0,9.4,0c0,1.6,0,3,0,4.7c3.2,0,6.2,0,9.4,0c0,1.7,0,3.2,0,4.7l0,0c-3.1,0-6.2,0-9.4,0
+                  c0-1.6,0-3,0-4.6c-3.2,0-6.2,0-9.3,0C1475.8,59.5,1475.8,58,1475.8,56.5L1475.8,56.5z"/>
+                <path d="M1187.6,61.3c1.5,0,2.9,0,4.5,0c0,4.7,0,9.3,0,14c-1.5,0-2.9,0-4.5,0c0,1.6,0,3,0,4.7c-1.7,0-3.3,0-4.8,0l0,0
+                  c0-1.5,0-3,0-4.7c1.7,0,3.1,0,4.8,0C1187.6,70.5,1187.6,65.9,1187.6,61.3L1187.6,61.3z"/>
+                <path d="M687.9,131.8c-6.2,0-12.5,0-18.7,0l0,0c0-1.5,0-3,0-4.5c6.3,0,12.4,0,18.7,0C687.9,128.9,687.9,130.4,687.9,131.8
+                  L687.9,131.8z"/>
+                <path d="M1112,127.3c0,1.5,0,2.9,0,4.5c-6.3,0-12.4,0-18.7,0c0-1.6,0-3,0-4.5l0,0C1099.5,127.3,1105.8,127.3,1112,127.3
+                  L1112,127.3z"/>
+                <path d="M1471,127.3c0,1.5,0,2.9,0,4.5c-6.2,0-12.4,0-18.7,0c0-1.5,0-3,0-4.5l0,0C1458.6,127.3,1464.8,127.3,1471,127.3
+                  L1471,127.3z"/>
+                <path d="M1041.9,113.1c1.5,0,3,0,4.6,0c0,4.7,0,9.3,0,14.1c-1.6,0-3.1,0-4.6,0l0,0C1041.9,122.6,1041.9,117.8,1041.9,113.1
+                  L1041.9,113.1z"/>
+                <path d="M1023,122.5c-1.5,0-2.9,0-4.6,0c0,1.7,0,3.2,0,4.8c-1.7,0-3.3,0-4.8,0l0,0c0-3.2,0-6.4,0-9.6l0,0c3.1,0,6.2,0,9.4,0
+                  C1022.9,119.5,1022.9,121,1023,122.5L1023,122.5z"/>
+                <path d="M1102.6,42.3c0-4.6,0-9.3,0-14.2c1.7,0,3.2,0,4.8,0l0,0c0,4.7,0,9.4,0,14.2C1105.6,42.3,1104.1,42.3,1102.6,42.3
+                  L1102.6,42.3z"/>
+                <path d="M561.2,80c0,4.7,0,9.5,0,14.2l0,0c-1.6,0-3.1,0-4.8,0c0-4.9,0-9.5,0-14.2C558,80,559.6,80,561.2,80L561.2,80z"/>
+                <path d="M1456.9,28.2c1.5,0,3.1,0,4.8,0c0,4.8,0,9.5,0,14.2l0,0c-1.5,0-3.1,0-4.8,0C1456.9,37.5,1456.9,32.8,1456.9,28.2
+                  L1456.9,28.2z"/>
+                <path d="M796.6,94.2c0-4.7,0-9.5,0-14.2l0,0c1.6,0,3.2,0,4.8,0c0,4.7,0,9.4,0,14.2C799.7,94.2,798.2,94.2,796.6,94.2L796.6,94.2z
+                  "/>
+                <path d="M706.9,122.5c0,4.6,0,9.3,0,14.2c-1.7,0-3.2,0-4.8,0l0,0c0-4.7,0-9.3,0-14.2C703.8,122.5,705.3,122.5,706.9,122.5
+                  L706.9,122.5z"/>
+                <path d="M938.2,103.8c-4.7,0-9.3,0-14.2,0c0-1.7,0-3.3,0-4.8l0,0c4.6,0,9.3,0,14.2,0C938.2,100.7,938.2,102.2,938.2,103.8
+                  L938.2,103.8z"/>
+                <path d="M1088.5,103.8c-4.7,0-9.3,0-14.2,0c0-1.7,0-3.3,0-4.8l0,0c4.7,0,9.3,0,14.2,0C1088.5,100.7,1088.5,102.2,1088.5,103.8
+                  L1088.5,103.8z"/>
+                <path d="M1173.4,70.7c0-1.5,0-3,0-4.7c1.5,0,3,0,4.6,0c0-1.6,0-3,0-4.7c1.6,0,3.1,0,4.7,0c0-1.7,0-3.1,0-4.6c1.6,0,3.1,0,4.8,0
+                  c0,1.6,0,3.1,0,4.7l0,0c-1.6,0-3.1,0-4.9,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.6
+                  C1176.4,70.6,1174.9,70.6,1173.4,70.7L1173.4,70.7z"/>
+                <path d="M1433.3,33c1.5,0,3,0,4.7,0c0,1.5,0,3,0,4.6c3.3,0,6.4,0,9.5,0l0,0c0,1.6,0,3.2,0,4.7c-3.3,0-6.3,0-9.5,0
+                  c0-1.6,0-3,0-4.7c-1.6,0-3.1,0-4.7,0C1433.4,35.9,1433.4,34.4,1433.3,33L1433.3,33z"/>
+                <path d="M1093.3,127.3c-1.5,0-3.1,0-4.7,0c0-3.2,0-6.2,0-9.4c1.5,0,3,0,4.6,0c0-1.6,0-3.1,0-4.8c1.7,0,3.2,0,4.7,0l0,0
+                  c0,1.5,0,3.1,0,4.8c-1.6,0-3,0-4.6,0C1093.3,121.2,1093.3,124.2,1093.3,127.3L1093.3,127.3z"/>
+                <path d="M1013.6,127.3c0,1.5,0,2.9,0,4.6c-1.6,0-3,0-4.7,0c0,1.6,0,3.1,0,4.7c-3.2,0-6.2,0-9.5,0c0-1.6,0-3.1,0-4.7l0,0
+                  c3.1,0,6.2,0,9.5,0c0-1.6,0-3,0-4.6C1010.6,127.3,1012.1,127.3,1013.6,127.3L1013.6,127.3z"/>
+                <path d="M1292,127.3c0,1.5,0,2.9,0,4.6c-1.6,0-3,0-4.7,0c0,1.6,0,3.1,0,4.7c-3.2,0-6.2,0-9.5,0c0-1.6,0-3.1,0-4.7l0,0
+                  c3.1,0,6.2,0,9.5,0c0-1.6,0-3,0-4.6C1289,127.3,1290.5,127.3,1292,127.3L1292,127.3z"/>
+                <path d="M1296.8,37.5c0-3.1,0-6.1,0-9.3c1.5,0,2.9,0,4.6,0c0-1.6,0-3.1,0-4.7c1.7,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.6l0,0
+                  c-1.5,0-3,0-4.8,0c0,3.2,0,6.3,0,9.4C1299.7,37.5,1298.2,37.5,1296.8,37.5L1296.8,37.5z"/>
+                <path d="M914.5,70.7c0-1.5,0-3,0-4.7c1.7,0,3.2,0,4.8,0c0-1.6,0-3,0-4.6c3.2,0,6.3,0,9.4,0l0,0c0,1.5,0,3,0,4.7
+                  c-3.2,0-6.2,0-9.3,0c0,1.6,0,3.1,0,4.7C917.6,70.6,916,70.6,914.5,70.7L914.5,70.7z"/>
+                <path d="M1249.5,127.3c-1.5,0-3,0-4.7,0c0-1.6,0-3.1,0-4.8c-1.7,0-3.2,0-4.7,0l0,0c0-1.5,0-3,0-4.6c3.2,0,6.3,0,9.4,0
+                  C1249.5,121,1249.5,124.2,1249.5,127.3L1249.5,127.3z"/>
+                <path d="M1145.1,127.3c0,1.5,0,2.9,0,4.5c-3.2,0-6.3,0-9.5,0c0-1.5,0-2.9,0-4.5c-1.6,0-3,0-4.6,0c0-1.7,0-3.3,0-4.9l0,0
+                  c1.5,0,3,0,4.7,0c0,1.7,0,3.2,0,4.8C1138.9,127.3,1142,127.3,1145.1,127.3L1145.1,127.3z"/>
+                <path d="M1287.2,37.5c3.2,0,6.4,0,9.6,0l0,0c0,1.6,0,3.1,0,4.7c-3.3,0-6.3,0-9.6,0C1287.2,40.6,1287.2,39.1,1287.2,37.5
+                  L1287.2,37.5z"/>
+                <path d="M1471,117.7c1.5,0,3.1,0,4.7,0c0,3.3,0,6.3,0,9.6c-1.6,0-3.1,0-4.7,0l0,0C1471,124.1,1471,120.9,1471,117.7L1471,117.7z"
+                  />
+                <path d="M1032.6,127.3c-3.1,0-6.2,0-9.6,0c0-1.7,0-3.2,0-4.8l0,0c3.1,0,6.3,0,9.6,0C1032.5,124.2,1032.5,125.8,1032.6,127.3
+                  L1032.6,127.3z"/>
+                <path d="M547,141.4c-1.5,0-3.1,0-4.8,0c0-3.3,0-6.5,0-9.6l0,0c1.6,0,3.1,0,4.8,0C547,135.3,547,138.4,547,141.4L547,141.4z"/>
+                <path d="M1452.3,127.3c-3.1,0-6.2,0-9.6,0c0-1.7,0-3.2,0-4.8l0,0c3.1,0,6.3,0,9.6,0C1452.3,124.2,1452.3,125.8,1452.3,127.3
+                  L1452.3,127.3z"/>
+                <path d="M561.2,131.8c0,3.1,0,6.3,0,9.6c-1.7,0-3.3,0-4.8,0l0,0c0-3.1,0-6.3,0-9.6C558.1,131.9,559.7,131.9,561.2,131.8
+                  L561.2,131.8z"/>
+                <path d="M815.6,131.8c0,3.1,0,6.2,0,9.6c-1.7,0-3.2,0-4.8,0l0,0c0-3.1,0-6.3,0-9.6C812.5,131.9,814.1,131.9,815.6,131.8
+                  L815.6,131.8z"/>
+                <path d="M801.4,141.4c-1.5,0-3.1,0-4.8,0c0-3.3,0-6.5,0-9.6l0,0c1.6,0,3.1,0,4.8,0C801.4,135.3,801.4,138.4,801.4,141.4
+                  L801.4,141.4z"/>
+                <path d="M928.6,61.3c0-1.5,0-3.1,0-4.8c3.3,0,6.5,0,9.6,0l0,0c0,1.5,0,3.1,0,4.8C934.8,61.3,931.7,61.3,928.6,61.3L928.6,61.3z"
+                  />
+                <path d="M702.1,136.6c0,1.5,0,3,0,4.6c-3.1,0-6.1,0-9.3,0c0-1.6,0-3.1,0-4.7l0,0C695.8,136.7,699,136.7,702.1,136.6L702.1,136.6z
+                  "/>
+                <path d="M504.6,131.8c-1.5,0-3,0-4.8,0c0-3.2,0-6.3,0-9.4l0,0c1.6,0,3.1,0,4.8,0C504.5,125.8,504.5,128.8,504.6,131.8
+                  L504.6,131.8z"/>
+                <path d="M1447.5,37.5c0-3,0-6.1,0-9.4c1.7,0,3.2,0,4.8,0l0,0c0,3.1,0,6.2,0,9.4C1450.5,37.5,1449,37.5,1447.5,37.5L1447.5,37.5z"
+                  />
+                <path d="M1277.8,131.8c-1.5,0-3,0-4.8,0c0-3.2,0-6.3,0-9.4l0,0c1.6,0,3.1,0,4.8,0C1277.8,125.8,1277.8,128.8,1277.8,131.8
+                  L1277.8,131.8z"/>
+                <path d="M938.2,56.5c0-1.5,0-3,0-4.7c1.5,0,3,0,4.6,0c0-1.6,0-3,0-4.6c1.7,0,3.2,0,4.8,0l0,0c0,1.5,0,3,0,4.7c-1.7,0-3.1,0-4.8,0
+                  c0,1.6,0,3.1,0,4.7C941.2,56.5,939.7,56.5,938.2,56.5L938.2,56.5z"/>
+                <path d="M1325.1,113.1c1.5,0,2.9,0,4.6,0c0,1.6,0,3,0,4.7c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0l0,0
+                  c0-1.5,0-3,0-4.7c-1.6,0-3.1,0-4.6,0C1325.1,116.1,1325.1,114.6,1325.1,113.1L1325.1,113.1z"/>
+                <path d="M1499.3,89.6c0,1.5,0,2.9,0,4.6c-1.6,0-3,0-4.7,0c0,1.6,0,3.1,0,4.8c-1.7,0-3.2,0-4.7,0l0,0c0-1.5,0-3.1,0-4.8
+                  c1.6,0,3,0,4.6,0c0-1.6,0-3.1,0-4.6C1496.3,89.6,1497.9,89.6,1499.3,89.6L1499.3,89.6z"/>
+                <path d="M1131,33c0-1.5,0-3.1,0-4.8c1.6,0,3,0,4.6,0c0-1.6,0-3,0-4.6c1.7,0,3.1,0,4.8,0c0,1.5,0,3,0,4.5l0,0c-1.5,0-3,0-4.8,0
+                  c0,1.7,0,3.2,0,4.8C1133.9,33,1132.4,33,1131,33L1131,33z"/>
+                <path d="M1381.5,61.3c1.5,0,3,0,4.7,0c0,1.5,0,3,0,4.6c1.6,0,3,0,4.6,0c0,1.7,0,3.2,0,4.8l0,0c-1.5,0-3,0-4.7,0
+                  c0-1.7,0-3.1,0-4.8c-1.6,0-3.1,0-4.7,0C1381.5,64.2,1381.5,62.7,1381.5,61.3L1381.5,61.3z"/>
+                <path d="M975.9,37.5c0-1.5,0-2.9,0-4.5c1.6,0,3,0,4.7,0c0-1.6,0-3.1,0-4.8c1.7,0,3.2,0,4.7,0l0,0c0,1.6,0,3.1,0,4.8
+                  c-1.6,0-3,0-4.7,0c0,1.6,0,3,0,4.5C978.9,37.5,977.4,37.5,975.9,37.5L975.9,37.5z"/>
+                <path d="M1405,127.3c0,1.5,0,2.9,0,4.5c-1.6,0-3.1,0-4.7,0c0-1.5,0-2.9,0-4.5c-1.6,0-3,0-4.6,0c0-1.7,0-3.3,0-4.9l0,0
+                  c1.5,0,3,0,4.7,0c0,1.7,0,3.2,0,4.8C1402,127.3,1403.5,127.3,1405,127.3L1405,127.3z"/>
+                <path d="M640.9,56.5c0-3.1,0-6.1,0-9.4c1.6,0,3.1,0,4.6,0l0,0c0,3.1,0,6.2,0,9.4C643.8,56.5,642.3,56.5,640.9,56.5L640.9,56.5z"
+                  />
+                <path d="M1334.5,61.3c3.1,0,6.1,0,9.4,0c0,1.6,0,3.1,0,4.6l0,0c-3.1,0-6.2,0-9.4,0C1334.5,64.2,1334.5,62.7,1334.5,61.3
+                  L1334.5,61.3z"/>
+                <path d="M1032.5,99c1.5,0,2.9,0,4.6,0c0,3.2,0,6.3,0,9.4l0,0c-1.5,0-3,0-4.6,0C1032.6,105.1,1032.6,102,1032.5,99L1032.5,99z"/>
+                <path d="M1041.9,89.6c0,1.5,0,2.9,0,4.6c-3.2,0-6.3,0-9.4,0l0,0c0-1.5,0-3.1,0-4.6l0,0C1035.7,89.6,1038.8,89.6,1041.9,89.6
+                  L1041.9,89.6z"/>
+                <path d="M561.2,47.1c1.5,0,2.9,0,4.6,0c0,3.2,0,6.3,0,9.4l0,0c-1.5,0-3,0-4.6,0C561.2,53.2,561.2,50.2,561.2,47.1L561.2,47.1z"/>
+                <path d="M792.1,56.5c0-3.1,0-6.1,0-9.4c1.6,0,3.1,0,4.6,0l0,0c0,3.1,0,6.2,0,9.4C795,56.5,793.5,56.5,792.1,56.5L792.1,56.5z"/>
+                <path d="M1428.5,127.3c0,1.5,0,2.9,0,4.5c-3.1,0-6.1,0-9.3,0c0-1.5,0-3,0-4.5l0,0C1422.3,127.3,1425.4,127.3,1428.5,127.3
+                  L1428.5,127.3z"/>
+                <path d="M1041.9,127.3c0,1.5,0,2.9,0,4.5c-3.1,0-6.2,0-9.3,0c0-1.6,0-3,0-4.5l0,0C1035.7,127.3,1038.8,127.3,1041.9,127.3
+                  L1041.9,127.3z"/>
+                <path d="M810.8,14c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C810.8,17.1,810.8,15.5,810.8,14L810.8,14z"/>
+                <path d="M1221.2,113.1c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.5,0,3.1,0,4.8C1224.3,113.1,1222.7,113.1,1221.2,113.1
+                  L1221.2,113.1z"/>
+                <path d="M985.3,28.2c0-1.5,0-3,0-4.6c1.6,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.6l0,0C988.5,28.2,986.9,28.2,985.3,28.2L985.3,28.2z"/>
+                <path d="M659.6,14c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C659.6,17.1,659.6,15.5,659.6,14L659.6,14z"/>
+                <path d="M1461.7,42.3c1.5,0,3,0,4.8,0c0,1.7,0,3.2,0,4.8l0,0c-1.6,0-3.1,0-4.8,0C1461.7,45.3,1461.7,43.8,1461.7,42.3
+                  L1461.7,42.3z"/>
+                <path d="M1343.8,94.2c0,1.5,0,3.1,0,4.8c-1.7,0-3.2,0-4.8,0l0,0c0-1.6,0-3.1,0-4.8C1340.8,94.2,1342.3,94.2,1343.8,94.2
+                  L1343.8,94.2z"/>
+                <path d="M1097.8,47.1c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.5,0,3.1,0,4.8C1100.9,47.1,1099.4,47.1,1097.8,47.1
+                  L1097.8,47.1z"/>
+                <path d="M1074.3,99c-1.5,0-3,0-4.8,0c0-1.7,0-3.2,0-4.8l0,0c1.5,0,3.1,0,4.8,0C1074.3,95.9,1074.3,97.4,1074.3,99L1074.3,99z"/>
+                <path d="M692.7,18.8c0-1.5,0-3.1,0-4.8c1.7,0,3.2,0,4.8,0l0,0c0,1.6,0,3.1,0,4.8C695.7,18.8,694.2,18.8,692.7,18.8L692.7,18.8z"
+                  />
+                <path d="M1032.5,94.2c0,1.6,0,3.2,0,4.8l0,0c-1.5,0-3.1,0-4.8,0c0-1.7,0-3.3,0-4.8l0,0C1029.4,94.2,1031,94.2,1032.5,94.2
+                  L1032.5,94.2z"/>
+                <path d="M542.2,18.8c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.5,0,3.1,0,4.8C545.3,18.8,543.8,18.8,542.2,18.8L542.2,18.8z"
+                  />
+                <path d="M692.7,136.6c-1.5,0-3.1,0-4.8,0c0-1.7,0-3.2,0-4.8l0,0c1.6,0,3.1,0,4.8,0C692.7,133.6,692.7,135.2,692.7,136.6
+                  L692.7,136.6z"/>
+                <path d="M669.2,131.8c0,1.5,0,3.1,0,4.8c-1.7,0-3.3,0-4.8,0l0,0c0-1.5,0-3.1,0-4.8C666.1,131.9,667.7,131.9,669.2,131.8
+                  L669.2,131.8z"/>
+                <path d="M1386.3,117.7c0,1.5,0,3.1,0,4.8c-1.7,0-3.3,0-4.8,0l0,0c0-1.5,0-3.1,0-4.8C1383.2,117.7,1384.8,117.7,1386.3,117.7
+                  L1386.3,117.7z"/>
+                <path d="M1395.7,122.5c-1.5,0-3.1,0-4.8,0c0-1.7,0-3.2,0-4.8l0,0c1.6,0,3.1,0,4.8,0C1395.7,119.5,1395.7,121,1395.7,122.5
+                  L1395.7,122.5z"/>
+                <path d="M1088.5,56.5c0-1.5,0-3,0-4.8c1.7,0,3.2,0,4.8,0l0,0c0,1.6,0,3.1,0,4.8C1091.5,56.5,1090,56.5,1088.5,56.5L1088.5,56.5z"
+                  />
+                <path d="M367.5,4.7c1.5,0,3,0,4.8,0c0,1.7,0,3.2,0,4.8l0,0c-1.6,0-3.1,0-4.8,0C367.5,7.6,367.5,6.1,367.5,4.7L367.5,4.7z"/>
+                <path d="M1390.9,70.7c1.5,0,3.1,0,4.8,0c0,1.7,0,3.2,0,4.8l0,0c-1.6,0-3.1,0-4.8,0C1390.9,73.6,1390.9,72.1,1390.9,70.7
+                  L1390.9,70.7z"/>
+                <path d="M1216.6,84.8c-1.5,0-3.1,0-4.7,0c0-1.6,0-3,0-4.8c1.6,0,3.2,0,4.7,0l0,0C1216.6,81.6,1216.6,83.2,1216.6,84.8
+                  L1216.6,84.8z"/>
+                <path d="M391,28.2c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C391,31.2,391,29.7,391,28.2L391,28.2z"/>
+                <path d="M1471,51.7c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C1471,54.8,1471,53.2,1471,51.7L1471,51.7z"/>
+                <path d="M924.1,99c-1.5,0-3.1,0-4.8,0c0-1.7,0-3.3,0-4.8l0,0c1.6,0,3.1,0,4.8,0C924.1,96,924.1,97.5,924.1,99L924.1,99z"/>
+                <path d="M1168.6,122.5c0,1.5,0,3.1,0,4.8c-1.7,0-3.2,0-4.8,0l0,0c0-1.6,0-3.1,0-4.8C1165.6,122.5,1167.1,122.5,1168.6,122.5
+                  L1168.6,122.5z"/>
+                <path d="M947.6,47.1c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.6,0,3.1,0,4.8C950.6,47.1,949.1,47.1,947.6,47.1L947.6,47.1z"
+                  />
+                <path d="M1376.7,61.3c0-1.5,0-3.1,0-4.7c1.7,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.7l0,0C1379.9,61.3,1378.3,61.3,1376.7,61.3
+                  L1376.7,61.3z"/>
+                <path d="M1296.8,122.5c0,1.5,0,3.1,0,4.8c-1.7,0-3.3,0-4.8,0l0,0c0-1.6,0-3.1,0-4.8C1293.7,122.5,1295.3,122.5,1296.8,122.5
+                  L1296.8,122.5z"/>
+                <path d="M1343.8,65.9c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.6,0-3.1,0-4.8,0C1343.8,68.9,1343.8,67.4,1343.8,65.9
+                  L1343.8,65.9z"/>
+                <path d="M1433.3,122.5c0,1.5,0,3.1,0,4.8c-1.7,0-3.2,0-4.8,0l0,0c0-1.6,0-3.1,0-4.8C1430.4,122.5,1431.9,122.5,1433.3,122.5
+                  L1433.3,122.5z"/>
+                <path d="M1494.5,65.9c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C1494.6,68.9,1494.6,67.4,1494.5,65.9
+                  L1494.5,65.9z"/>
+                <path d="M1277.8,28.2c1.5,0,3,0,4.8,0c0,1.7,0,3.2,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C1277.8,31.3,1277.8,29.7,1277.8,28.2
+                  L1277.8,28.2z"/>
+                <path d="M1037.1,108.3c1.5,0,3.1,0,4.8,0c0,1.7,0,3.2,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C1037.1,111.4,1037.1,109.9,1037.1,108.3
+                  L1037.1,108.3z"/>
+                <path d="M1428.5,28.2c1.5,0,3.1,0,4.8,0c0,1.7,0,3.2,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C1428.6,31.2,1428.6,29.7,1428.5,28.2
+                  L1428.5,28.2z"/>
+                <path d="M1168.6,75.5c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.5,0,3.1,0,4.8C1171.6,75.4,1170.1,75.4,1168.6,75.5
+                  L1168.6,75.5z"/>
+                <path d="M1452.3,28.2c0-1.5,0-3,0-4.6c1.5,0,2.9,0,4.5,0c0,1.6,0,3.1,0,4.6l0,0C1455.4,28.2,1453.8,28.2,1452.3,28.2L1452.3,28.2
+                  z"/>
+                <path d="M1424,28.2c0-1.5,0-3,0-4.6c1.5,0,3,0,4.5,0c0,1.6,0,3.1,0,4.6l0,0C1427,28.2,1425.5,28.2,1424,28.2L1424,28.2z"/>
+                <path d="M1163.8,127.3c0,1.5,0,2.9,0,4.5c-1.5,0-2.9,0-4.5,0c0-1.5,0-3,0-4.5l0,0C1160.8,127.3,1162.3,127.3,1163.8,127.3
+                  L1163.8,127.3z"/>
+                <path d="M565.7,75.4c0,1.5,0,2.9,0,4.6c-1.6,0-3.1,0-4.6,0l0,0c0-1.5,0-3,0-4.6C562.8,75.5,564.3,75.5,565.7,75.4L565.7,75.4z"/>
+                <path d="M697.5,14c0-1.5,0-2.9,0-4.6c1.6,0,3.1,0,4.6,0l0,0c0,1.5,0,3,0,4.6C700.4,14,699,14,697.5,14L697.5,14z"/>
+                <path d="M1282.6,33c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C1282.6,35.9,1282.6,34.4,1282.6,33L1282.6,33z"/>
+                <path d="M645.4,80c-1.5,0-2.9,0-4.6,0c0-1.6,0-3.1,0-4.6l0,0c1.5,0,3,0,4.6,0C645.4,77.1,645.4,78.6,645.4,80L645.4,80z"/>
+                <path d="M1395.7,75.5c1.5,0,3.1,0,4.6,0l0,0c0,1.5,0,3,0,4.5c-1.6,0-3,0-4.5,0C1395.7,78.4,1395.7,76.9,1395.7,75.5L1395.7,75.5z
+                  "/>
+                <path d="M1069.5,94.2c-1.5,0-2.9,0-4.6,0c0-1.6,0-3.1,0-4.6l0,0c1.5,0,3,0,4.6,0C1069.5,91.2,1069.5,92.7,1069.5,94.2
+                  L1069.5,94.2z"/>
+                <path d="M1466.5,47.1c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C1466.5,50,1466.5,48.6,1466.5,47.1L1466.5,47.1z
+                  "/>
+                <path d="M1107.4,28.2c0-1.5,0-2.9,0-4.5c1.5,0,2.9,0,4.5,0c0,1.5,0,3,0,4.5l0,0C1110.5,28.2,1109,28.2,1107.4,28.2L1107.4,28.2z"
+                  />
+                <path d="M1093.3,51.7c0-1.5,0-2.9,0-4.6c1.6,0,3.1,0,4.6,0l0,0c0,1.5,0,3,0,4.6C1096.2,51.7,1094.7,51.7,1093.3,51.7L1093.3,51.7
+                  z"/>
+                <path d="M806.2,9.5c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C806.2,12.4,806.2,10.9,806.2,9.5L806.2,9.5z"/>
+                <path d="M372.3,9.5c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C372.3,12.4,372.3,10.9,372.3,9.5L372.3,9.5z"/>
+                <path d="M1466.5,113.1c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C1466.5,116,1466.5,114.6,1466.5,113.1
+                  L1466.5,113.1z"/>
+                <path d="M655,9.5c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C655,12.4,655,10.9,655,9.5L655,9.5z"/>
+                <path d="M796.6,80c-1.5,0-2.9,0-4.6,0c0-1.6,0-3.1,0-4.6l0,0c1.5,0,3,0,4.6,0C796.6,77.1,796.6,78.6,796.6,80L796.6,80z"/>
+                <path d="M61,28.2c0-1.5,0-3,0-4.7c3.1,0,6.1,0,9.3,0c0-3.2,0-6.2,0-9.5c1.7,0,3.3,0,4.8,0l0,0c0,3.1,0,6.2,0,9.3
+                  c1.6,0,3.1,0,4.7,0c0-1.5,0-3,0-4.5c1.7,0,3.2,0,4.7,0l0,0c0,1.5,0,2.9,0,4.6c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7
+                  c1.6,0,3.1,0,4.7,0c0,1.7,0,3.1,0,4.8c1.7,0,3.1,0,4.7,0c0,1.6,0,3,0,4.6c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.8c1.6,0,3,0,4.7,0
+                  c0,12.7,0,25.2,0,37.7l0,0c-1.5,0-3,0-4.7,0c0-11,0-21.9,0-32.9c-1.7,0-3.2,0-4.7,0c0-3.1,0-6.2,0-9.5c-1.6,0-3.1,0-4.7,0
+                  c0-1.6,0-3.1,0-4.7c-1.7,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7C79.7,28.2,70.4,28.2,61,28.2L61,28.2z"/>
+                <path d="M202.2,37.5c0-1.5,0-2.9,0-4.6c1.6,0,3,0,4.7,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7
+                  c3.2,0,6.2,0,9.4,0c0-6.3,0-12.5,0-18.9c1.7,0,3.2,0,4.7,0l0,0c0,6.2,0,12.4,0,18.8c1.7,0,3.2,0,4.8,0c0-6.3,0-12.6,0-18.8l0,0
+                  c1.5,0,2.9,0,4.6,0c0,6.3,0,12.5,0,18.8c1.6,0,3.1,0,4.8,0c0,1.7,0,3.2,0,4.7l0,0c-9.4,0-18.7,0-28.3,0c0,1.7,0,3.2,0,4.8
+                  c-1.6,0-3.1,0-4.7,0c0,1.6,0,3,0,4.5C205.2,37.5,203.7,37.5,202.2,37.5L202.2,37.5z"/>
+                <path d="M249.2,37.5c1.5,0,3.1,0,4.8,0c0,1.7,0,3.1,0,4.8c1.6,0,3.1,0,4.8,0c0,12.6,0,25.1,0,37.7c1.6,0,3,0,4.6,0
+                  c0,4.9,0,9.5,0,14.2l0,0c-1.5,0-3,0-4.6,0c0-4.8,0-9.3,0-14.1c-1.6,0-3.1,0-4.8,0c0-11.1,0-22,0-32.9c-1.7,0-3.3,0-4.8,0
+                  C249.2,43.9,249.2,40.7,249.2,37.5L249.2,37.5z"/>
+                <path d="M344,80c0-12.5,0-25,0-37.6c1.5,0,3,0,4.6,0c0-1.6,0-3.1,0-4.8c1.7,0,3.1,0,4.7,0c0-1.6,0-3,0-4.6c1.7,0,3.3,0,4.9,0l0,0
+                  c0,1.5,0,3,0,4.7c-1.7,0-3.2,0-4.7,0c0,3.2,0,6.2,0,9.4c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3,0,4.5,0c0,1.7,0,3.2,0,4.7
+                  c-1.5,0-3,0-4.6,0c0-1.7,0-3.1,0-4.7c-1.6,0-3.1,0-4.8,0c0-1.7,0-3.1,0-4.6c-1.6,0-3.1,0-4.7,0c0,11,0,21.9,0,32.8
+                  C346.9,80,345.5,80,344,80L344,80z"/>
+                <path d="M192.8,80c0-12.5,0-25,0-37.6c1.5,0,3,0,4.6,0c0-1.6,0-3.1,0-4.8c1.7,0,3.2,0,4.8,0l0,0c0,3.2,0,6.4,0,9.6
+                  c-1.5,0-3,0-4.8,0c0,11,0,21.9,0,32.9C195.7,80,194.2,80,192.8,80L192.8,80z"/>
+                <path d="M108.1,80c1.5,0,3.1,0,4.8,0c0,4.8,0,9.4,0,14.2c1.6,0,3.1,0,4.7,0c0,6.4,0,12.5,0,18.9c-1.6,0-3.1,0-4.6,0l0,0
+                  c0-6.2,0-12.5,0-18.9c-1.7,0-3.2,0-4.8,0C108.1,89.3,108.1,84.7,108.1,80L108.1,80z"/>
+                <path d="M202.2,136.6c-1.5,0-3,0-4.7,0c0-3.1,0-6.1,0-9.3c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.2,0-9.4c-1.6,0-3.1,0-4.7,0
+                  c0-1.7,0-3.3,0-4.8l0,0c4.7,0,9.3,0,14.2,0c0,1.7,0,3.3,0,4.8c-1.5,0-3.1,0-4.6,0c0,3.2,0,6.2,0,9.4c1.6,0,3,0,4.6,0
+                  C202.1,130.5,202.1,133.6,202.2,136.6L202.2,136.6z"/>
+                <path d="M93.9,131.8c-7.8,0-15.6,0-23.5,0c0,3.3,0,6.3,0,9.6c-1.7,0-3.3,0-4.9,0l0,0c0-3.1,0-6.3,0-9.6c1.7,0,3.2,0,4.8,0
+                  c0-1.6,0-3.1,0-4.5c7.9,0,15.6,0,23.5,0C93.9,128.9,93.9,130.4,93.9,131.8L93.9,131.8z"/>
+                <path d="M386.5,141.4c-1.5,0-3.1,0-4.8,0c0-3.2,0-6.2,0-9.6c-8,0-15.8,0-23.5,0l0,0c0-1.5,0-3,0-4.5c7.9,0,15.7,0,23.5,0
+                  c0,1.5,0,2.9,0,4.6c1.6,0,3.1,0,4.8,0C386.5,135.3,386.5,138.4,386.5,141.4L386.5,141.4z"/>
+                <path d="M367.5,18.8c-6.2,0-12.5,0-18.8,0c0-3.2,0-6.2,0-9.3c1.6,0,3.1,0,4.7,0l0,0c0,1.5,0,3,0,4.6c4.8,0,9.4,0,14.2,0
+                  C367.5,15.7,367.5,17.3,367.5,18.8L367.5,18.8z"/>
+                <path d="M98.7,9.5c1.5,0,3,0,4.6,0c0,3.1,0,6.1,0,9.3c-6.3,0-12.6,0-18.8,0l0,0c0-1.5,0-3.1,0-4.8c4.8,0,9.4,0,14.2,0
+                  C98.7,12.4,98.7,10.9,98.7,9.5L98.7,9.5z"/>
+                <path d="M263.3,113.1c0,4.6,0,9.3,0,14.2c-1.6,0-3.1,0-4.6,0l0,0c0-3.1,0-6.2,0-9.4c-3.4,0-6.5,0-9.6,0c0-1.6,0-3.1,0-4.8
+                  C254.1,113.1,258.7,113.1,263.3,113.1L263.3,113.1z"/>
+                <path d="M112.9,113.1c0,4.7,0,9.3,0,14.2c-1.7,0-3.3,0-4.8,0l0,0c0-3.1,0-6.3,0-9.6c-3.3,0-6.3,0-9.4,0c0-1.5,0-3,0-4.6
+                  C103.6,113.1,108.2,113.1,112.9,113.1L112.9,113.1z"/>
+                <path d="M239.8,131.8c-7.8,0-15.7,0-23.5,0l0,0c0-1.5,0-3,0-4.5c7.9,0,15.7,0,23.5,0C239.8,128.9,239.8,130.4,239.8,131.8
+                  L239.8,131.8z"/>
+                <path d="M188,113.1c-1.5,0-3,0-4.6,0c0-6.3,0-12.5,0-18.9c1.6,0,3.1,0,4.6,0l0,0C188,100.5,188,106.8,188,113.1L188,113.1z"/>
+                <path d="M263.3,94.2c1.5,0,3.1,0,4.7,0c0,6.3,0,12.5,0,18.9c-1.6,0-3.2,0-4.7,0l0,0C263.4,106.8,263.4,100.5,263.3,94.2
+                  L263.3,94.2z"/>
+                <path d="M339.2,113.1c-1.5,0-3,0-4.6,0c0-6.3,0-12.5,0-18.9c1.6,0,3.1,0,4.6,0l0,0C339.2,100.5,339.2,106.8,339.2,113.1
+                  L339.2,113.1z"/>
+                <path d="M216.3,131.8c0,1.5,0,3.1,0,4.8c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.6c-3.2,0-6.2,0-9.4,0c0-1.6,0-3.1,0-4.7l0,0
+                  c3.1,0,6.2,0,9.5,0c0-1.6,0-3.1,0-4.8C213.3,131.9,214.8,131.9,216.3,131.8L216.3,131.8z"/>
+                <path d="M188,94.2c0-4.6,0-9.2,0-14.2c1.7,0,3.2,0,4.8,0l0,0c0,4.7,0,9.4,0,14.2C191,94.2,189.5,94.2,188,94.2L188,94.2z"/>
+                <path d="M339.2,94.2c0-4.6,0-9.2,0-14.2c1.7,0,3.2,0,4.8,0l0,0c0,4.7,0,9.4,0,14.2C342.3,94.2,340.7,94.2,339.2,94.2L339.2,94.2z
+                  "/>
+                <path d="M103.5,131.8c0,1.5,0,3.1,0,4.7c-3.2,0-6.3,0-9.6,0c0-1.6,0-3.2,0-4.7l0,0C97.1,131.9,100.3,131.9,103.5,131.8
+                  L103.5,131.8z"/>
+                <path d="M358.1,131.8c0,1.5,0,3.1,0,4.7c-3.2,0-6.2,0-9.6,0c0-1.6,0-3.2,0-4.7l0,0C351.7,131.9,355,131.9,358.1,131.8
+                  L358.1,131.8z"/>
+                <path d="M254,136.6c0,1.5,0,3,0,4.7c-3.1,0-6.1,0-9.3,0c0-1.6,0-3.1,0-4.7l0,0C247.8,136.7,250.9,136.7,254,136.6L254,136.6z"/>
+                <path d="M258.8,127.3c0,3,0,6.1,0,9.4c-1.7,0-3.2,0-4.8,0l0,0c0-3.1,0-6.2,0-9.4C255.7,127.3,257.3,127.3,258.8,127.3
+                  L258.8,127.3z"/>
+                <path d="M353.4,9.5c0-1.5,0-3.1,0-4.8c1.7,0,3.2,0,4.8,0l0,0c0,1.5,0,3.1,0,4.8C356.4,9.4,354.9,9.4,353.4,9.5L353.4,9.5z"/>
+                <path d="M239.8,28.2c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C239.8,31.2,239.8,29.7,239.8,28.2L239.8,28.2z"
+                  />
+                <path d="M244.6,136.6c-1.5,0-3.1,0-4.8,0c0-1.7,0-3.2,0-4.8l0,0c1.6,0,3.1,0,4.8,0C244.6,133.6,244.6,135.2,244.6,136.6
+                  L244.6,136.6z"/>
+                <path d="M348.6,131.8c-1.5,0-2.9,0-4.6,0c0-1.6,0-3.1,0-4.6l0,0c1.5,0,3,0,4.6,0C348.5,128.9,348.5,130.4,348.6,131.8
+                  L348.6,131.8z"/>
+                <path d="M244.6,33c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C244.6,35.9,244.6,34.4,244.6,33L244.6,33z"/>
+                <path d="M108.1,127.3c0,1.5,0,2.9,0,4.6c-1.6,0-3.1,0-4.6,0l0,0c0-1.5,0-3,0-4.6C105.2,127.3,106.6,127.3,108.1,127.3
+                  L108.1,127.3z"/>
+                <path d="M37.5,94.2c0-4.6,0-9.2,0-14.1c1.5,0,3,0,4.5,0c0-12.7,0-25.1,0-37.7c1.6,0,3.1,0,4.8,0c0-1.6,0-3.1,0-4.8
+                  c1.6,0,3,0,4.7,0c0-1.6,0-3,0-4.6c1.7,0,3.2,0,4.8,0l0,0c0,1.5,0,3,0,4.7c-1.6,0-3.1,0-4.6,0c0,3.2,0,6.3,0,9.5c1.6,0,3,0,4.6,0
+                  c0,1.6,0,3.1,0,4.6c-1.5,0-3.1,0-4.8,0c0-1.6,0-3,0-4.5c-1.6,0-3.1,0-4.6,0c0,11,0,21.8,0,32.9c-1.6,0-3.1,0-4.8,0
+                  c0,4.8,0,9.4,0,14C40.4,94.2,39,94.2,37.5,94.2L37.5,94.2z"/>
+                <path d="M51.4,136.6c-1.5,0-2.9,0-4.6,0c0-1.6,0-3,0-4.7c-1.6,0-3.1,0-4.7,0c0-4.8,0-9.4,0-14.2c-1.6,0-3,0-4.6,0
+                  c0-1.7,0-3.2,0-4.7l0,0c4.6,0,9.2,0,13.9,0c0,1.6,0,3.1,0,4.6c-1.5,0-3,0-4.5,0c0,4.9,0,9.5,0,14.2c1.5,0,3,0,4.5,0
+                  C51.4,133.6,51.4,135.2,51.4,136.6L51.4,136.6z"/>
+                <path d="M37.5,113.1c-1.5,0-3.1,0-4.7,0c0-6.3,0-12.5,0-18.9c1.6,0,3.2,0,4.7,0l0,0C37.5,100.5,37.5,106.8,37.5,113.1L37.5,113.1
+                  z"/>
+                <path d="M56.2,141.4c-1.5,0-3,0-4.8,0c0-1.7,0-3.2,0-4.8l0,0c1.6,0,3.1,0,4.8,0C56.2,138.4,56.2,139.9,56.2,141.4L56.2,141.4z"/>
+                <path d="M56.2,33c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.6,0,3.1,0,4.8C59.2,33,57.7,33,56.2,33L56.2,33z"/>
+                <path d="M79.8,9.5c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.5,0,3.1,0,4.8C82.8,9.4,81.3,9.4,79.8,9.5L79.8,9.5z"/>
+                <path d="M75.2,14c0-1.5,0-2.9,0-4.6c1.6,0,3.1,0,4.6,0l0,0c0,1.5,0,3,0,4.6C78.1,14,76.6,14,75.2,14L75.2,14z"/>
+                <path d="M1480.5,80.1c1.7,0,3.1,0,4.7,0c0-1.6,0-3,0-4.6c3.1,0,6.2,0,9.3,0c0,3.1,0,6.1,0,9.3c-1.5,0-2.9,0-4.5,0
+                  c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.8,0c0,1.6,0,3.1,0,4.7c-3.2,0-6.2,0-9.3,0c0-3.1,0-6.1,0-9.3c1.5,0,2.9,0,4.6,0
+                  C1480.5,83.2,1480.5,81.7,1480.5,80.1z"/>
+                <path d="M1447.6,66c3.1,0,6.1,0,9.2,0c0,4.7,0,9.3,0,14c-3.1,0-6.1,0-9.2,0C1447.6,75.3,1447.6,70.7,1447.6,66z"/>
+                <path d="M1438.2,103.8c-1.5,0-3.1,0-4.8,0c0-1.8,0-3.3,0-4.8c1.5,0,3,0,4.8,0C1438.2,100.6,1438.2,102.2,1438.2,103.8z"/>
+                <path d="M1433.4,99c-1.5,0-3,0-4.8,0c0-1.7,0-3.3,0-4.8c1.5,0,3.1,0,4.8,0C1433.4,95.9,1433.4,97.4,1433.4,99z"/>
+                <path d="M1428.6,94.2c-1.5,0-2.9,0-4.6,0c0-1.6,0-3.1,0-4.6c1.5,0,2.9,0,4.6,0C1428.6,91.2,1428.6,92.7,1428.6,94.2z"/>
+                <path d="M815.6,70.7c0-1.5,0-3,0-4.6c9.4,0,18.7,0,28.3,0c0,1.6,0,3.1,0,4.6C834.5,70.7,825,70.7,815.6,70.7z"/>
+                <path d="M843.9,103.8c1.5,0,2.9,0,4.5,0c0,3.1,0,6.1,0,9.3c-4.7,0-9.4,0-14.1,0l0,0c0-1.5,0-3.1,0-4.8c3.2,0,6.3,0,9.6,0
+                  C843.9,106.8,843.9,105.3,843.9,103.8L843.9,103.8z"/>
+                <path d="M825,103.8c0-1.5,0-3.1,0-4.8c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c3.2,0,6.2,0,9.4,0c0,1.6,0,3.1,0,4.7l0,0
+                  c-3.1,0-6.1,0-9.4,0c0,1.6,0,3,0,4.8C828,103.8,826.5,103.8,825,103.8L825,103.8z"/>
+                <path d="M801.4,80c0-1.5,0-2.9,0-4.6c1.6,0,3,0,4.7,0c0-1.6,0-3.1,0-4.8c3.3,0,6.4,0,9.5,0c0,1.5,0,3,0,4.7c-3.2,0-6.2,0-9.4,0
+                  c0,1.6,0,3.1,0,4.7C804.5,80,803,80,801.4,80z"/>
+                <path d="M824.9,103.8c0,1.5,0,2.9,0,4.6c-1.6,0-3,0-4.7,0c0,3.2,0,6.2,0,9.3c-1.6,0-3,0-4.6,0c0-3.1,0-6.1,0-9.3
+                  c1.4,0,2.9,0,4.5,0c0-1.6,0-3,0-4.6C821.9,103.8,823.4,103.8,824.9,103.8C825,103.8,824.9,103.8,824.9,103.8z"/>
+                <path d="M839.1,99c1.5,0,3,0,4.8,0c0,1.6,0,3.2,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C839.1,102,839.1,100.5,839.1,99L839.1,99z"/>
+                <path d="M834.3,113.1c0,1.5,0,2.9,0,4.5c-1.5,0-3,0-4.5,0c0-1.5,0-2.9,0-4.5C831.3,113.1,832.8,113.1,834.3,113.1L834.3,113.1z"
+                  />
+                <path d="M513.9,70.7c0-1.5,0-3,0-4.6c9.5,0,18.8,0,28.3,0c0,1.6,0,3.1,0,4.6C532.8,70.7,523.3,70.7,513.9,70.7z"/>
+                <path d="M523.5,113.1c-4.7,0-9.3,0-14.1,0c0-3.1,0-6.2,0-9.3c1.5,0,3,0,4.5,0l0,0c0,1.5,0,2.9,0,4.6c3.3,0,6.3,0,9.6,0
+                  C523.5,110,523.5,111.6,523.5,113.1L523.5,113.1z"/>
+                <path d="M518.7,99c0-1.5,0-3.1,0-4.7c3.1,0,6.2,0,9.4,0c0,1.5,0,3,0,4.6c1.6,0,3.1,0,4.7,0c0,1.7,0,3.3,0,4.9l0,0
+                  c-1.5,0-3,0-4.7,0c0-1.7,0-3.1,0-4.8C524.9,99,521.8,99,518.7,99L518.7,99z"/>
+                <path d="M532.9,103.8c1.5,0,3,0,4.7,0c0,1.5,0,3,0,4.6c1.6,0,3,0,4.6,0c0,3.2,0,6.2,0,9.3c-1.5,0-2.9,0-4.5,0c0-3.1,0-6.1,0-9.3
+                  c-1.7,0-3.1,0-4.7,0C532.9,106.8,532.9,105.3,532.9,103.8L532.9,103.8z"/>
+                <path d="M542.2,70.6c3.1,0,6.2,0,9.6,0c0,1.7,0,3.3,0,4.8c-3.1,0-6.3,0-9.6,0C542.2,73.7,542.2,72.2,542.2,70.6z"/>
+                <path d="M518.7,99c0,1.5,0,3,0,4.8c-1.7,0-3.3,0-4.8,0l0,0c0-1.5,0-3.1,0-4.8C515.7,99,517.2,99,518.7,99L518.7,99z"/>
+                <path d="M551.8,75.4c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6c-1.5,0-2.9,0-4.6,0C551.8,78.4,551.8,76.9,551.8,75.4z"/>
+                <path d="M523.5,113.1c1.5,0,2.9,0,4.5,0c0,1.5,0,2.9,0,4.5c-1.5,0-2.9,0-4.5,0C523.5,116.1,523.5,114.6,523.5,113.1L523.5,113.1z
+                  "/>
+                <path d="M51.4,117.7c15.8,0,31.5,0,47.3,0c0,1.5,0,3.1,0,4.7c-15.8,0-31.4,0-47.3,0C51.4,120.8,51.4,119.3,51.4,117.7z"/>
+                <path d="M367.6,113c0-3.1,0-6.1,0-9.2c6.2,0,12.4,0,18.7,0c0,3.1,0,6.1,0,9.2C380.1,113,373.9,113,367.6,113z"/>
+                <path d="M362.7,56.5c9.4,0,18.8,0,28.4,0c0-1.6,0-3,0-4.8c1.7,0,3.2,0,4.8,0c0,1.5,0,3.1,0,4.8c-1.6,0-3.1,0-4.7,0
+                  c0,1.6,0,3.1,0,4.6c-9.5,0-18.8,0-28.4,0C362.7,59.5,362.7,58,362.7,56.5z"/>
+                <path d="M400.5,98.9c-3.1,0-6.1,0-9.2,0c0-4.6,0-9.3,0-14c3.1,0,6.1,0,9.2,0C400.5,89.5,400.5,94.2,400.5,98.9z"/>
+                <path d="M362.7,84.9c0,4.7,0,9.3,0,14c-3.1,0-6.1,0-9.2,0c0-4.6,0-9.2,0-14C356.5,84.9,359.5,84.9,362.7,84.9z"/>
+                <path d="M928.7,75.5c0,1.6,0,3,0,4.6c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.6,0c0,3.2,0,6.2,0,9.4
+                  c-3.1,0-6.1,0-9.3,0c0-1.5,0-2.9,0-4.5c-1.6,0-3,0-4.6,0c0-1.7,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.2,0-9.4
+                  C922.4,75.5,925.5,75.5,928.7,75.5z"/>
+                <path d="M966.4,66c0,4.7,0,9.3,0,14c-3.1,0-6.2,0-9.3,0c0-4.7,0-9.3,0-14C960.2,66,963.2,66,966.4,66z"/>
+                <path d="M1334.5,80.1c0-1.7,0-3.1,0-4.6c3.2,0,6.2,0,9.3,0c0,3.1,0,6.1,0,9.3c-1.5,0-2.9,0-4.6,0c0,1.6,0,3.1,0,4.8
+                  c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.6c-3.2,0-6.2,0-9.4,0c0-3.1,0-6.1,0-9.3c1.5,0,2.9,0,4.5,0c0-1.7,0-3.1,0-4.7
+                  C1331.3,80.1,1332.8,80.1,1334.5,80.1z"/>
+                <path d="M1296.8,66c3.1,0,6.1,0,9.2,0c0,4.7,0,9.3,0,14c-3.1,0-6.1,0-9.2,0C1296.8,75.3,1296.8,70.7,1296.8,66z"/>
+                <path d="M1282.6,99c-1.5,0-3.1,0-4.8,0c0-1.7,0-3.3,0-4.8c1.5,0,3,0,4.8,0C1282.6,95.8,1282.6,97.4,1282.6,99z"/>
+                <path d="M1254.3,117.9c-1.6,0-3.2,0-4.8,0c0-1.5,0-3.1,0-4.7c1.6,0,3.1,0,4.8,0C1254.3,114.8,1254.3,116.4,1254.3,117.9z"/>
+                <path d="M1088.4,84.8c0,3.3,0,6.2,0,9.3c-3.1,0-6.1,0-9.3,0c0-1.5,0-2.9,0-4.5c-1.7,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7
+                  c-1.6,0-3.1,0-4.6,0c0-3.2,0-6.2,0-9.4c3.1,0,6.1,0,9.3,0c0,1.5,0,2.9,0,4.6c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7
+                  C1085.4,84.8,1086.8,84.8,1088.4,84.8z"/>
+                <path d="M1107.5,80c0-4.7,0-9.3,0-14c3.1,0,6.1,0,9.2,0c0,4.7,0,9.2,0,14C1113.7,80,1110.6,80,1107.5,80z"/>
+                <path d="M1140.3,89.6c0,1.5,0,2.9,0,4.5c-1.6,0-3,0-4.7,0c0,1.6,0,3.1,0,4.8c-1.7,0-3.2,0-4.7,0c0-1.5,0-3.1,0-4.8
+                  c1.6,0,3,0,4.6,0c0-1.6,0-3,0-4.6C1137.3,89.6,1138.8,89.6,1140.3,89.6z"/>
+                <path d="M1131,99c0,1.5,0,3,0,4.8c-1.7,0-3.3,0-4.8,0c0-1.5,0-3.1,0-4.8C1127.8,99,1129.4,99,1131,99z"/>
+                <path d="M692.7,70.7c-9.4,0-18.9,0-28.3,0c0-1.5,0-3,0-4.7c9.5,0,18.8,0,28.3,0C692.7,67.6,692.7,69.1,692.7,70.7z"/>
+                <path d="M697.5,75.5c-1.5,0-3.1,0-4.8,0c0-1.8,0-3.3,0-4.8c1.5,0,3,0,4.8,0C697.5,72.3,697.5,73.9,697.5,75.5z"/>
+                <path d="M664.4,70.6c0,1.5,0,3,0,4.8c-1.7,0-3.3,0-4.8,0c0-1.5,0-3.1,0-4.8C661.3,70.6,662.9,70.6,664.4,70.6z"/>
+                <path d="M659.6,75.4c0,1.5,0,2.9,0,4.6c-1.6,0-3.1,0-4.6,0c0-1.5,0-2.9,0-4.6C656.6,75.4,658.1,75.4,659.6,75.4z"/>
+                <path d="M702.1,80c-1.5,0-2.9,0-4.6,0c0-1.6,0-3.1,0-4.6c1.5,0,2.9,0,4.6,0C702.1,77,702.1,78.5,702.1,80z"/>
+                <path d="M673.7,94.2c0-1.5,0-2.9,0-4.5c3.2,0,6.3,0,9.5,0c0,1.5,0,2.9,0,4.5c1.6,0,3.1,0,4.6,0c0,7.9,0,15.7,0,23.5
+                  c-1.5,0-2.9,0-4.5,0c0-7.8,0-15.5,0-23.5C679.9,94.1,676.8,94.1,673.7,94.2L673.7,94.2z"/>
+                <path d="M673.7,94.1c0,7.8,0,15.6,0,23.5c-1.5,0-2.9,0-4.5,0c0-7.8,0-15.5,0-23.5C670.8,94.2,672.3,94.2,673.7,94.1
+                  C673.7,94.2,673.7,94.1,673.7,94.1z"/>
+                <path d="M65.7,113c0-3.1,0-6.1,0-9.2c6.3,0,12.5,0,18.8,0c0,3.1,0,6.1,0,9.2C78.2,113,72.1,113,65.7,113z"/>
+                <path d="M56.2,51.7c1.5,0,3,0,4.7,0c0,1.7,0,3.2,0,4.8c9.6,0,19,0,28.4,0c0,1.5,0,3,0,4.6c-9.5,0-18.8,0-28.4,0c0-1.5,0-3,0-4.6
+                  c-1.7,0-3.1,0-4.8,0C56.2,54.8,56.2,53.3,56.2,51.7z"/>
+                <path d="M60.9,98.9c-3.2,0-6.2,0-9.3,0c0-4.7,0-9.3,0-14c3.1,0,6.2,0,9.3,0C60.9,89.6,60.9,94.2,60.9,98.9z"/>
+                <path d="M89.3,98.9c0-4.7,0-9.3,0-14c3.1,0,6.1,0,9.2,0c0,4.6,0,9.3,0,14C95.5,98.9,92.5,98.9,89.3,98.9z"/>
+                <path d="M89.3,56.5c0-1.5,0-3,0-4.7c1.5,0,3,0,4.6,0c0-1.6,0-3,0-4.7c1.7,0,3.2,0,4.8,0c0,1.5,0,2.9,0,4.6c-1.6,0-3.1,0-4.7,0
+                  c0,1.6,0,3.1,0,4.8C92.3,56.5,90.8,56.5,89.3,56.5z"/>
+                <path d="M239.8,56.5c0,1.5,0,3,0,4.6c-9.4,0-18.7,0-28.3,0c0-1.6,0-3.1,0-4.6C220.9,56.5,230.4,56.5,239.8,56.5z"/>
+                <path d="M211.5,56.5c-1.5,0-2.9,0-4.6,0c0-1.6,0-3,0-4.7c-1.6,0-3.1,0-4.8,0c0-1.7,0-3.2,0-4.7c1.5,0,3,0,4.7,0c0,1.5,0,3,0,4.6
+                  c1.6,0,3.1,0,4.7,0C211.5,53.4,211.5,55,211.5,56.5z"/>
+                <path d="M244.6,51.7c0,1.5,0,3.1,0,4.8c-1.7,0-3.3,0-4.8,0c0-1.5,0-3,0-4.8C241.5,51.7,243.1,51.7,244.6,51.7z"/>
+                <path d="M249.2,47.1c0,1.5,0,2.9,0,4.6c-1.6,0-3.1,0-4.6,0c0-1.5,0-2.9,0-4.6C246.2,47.1,247.7,47.1,249.2,47.1z"/>
+                <path d="M249.2,117.9c0,1.5,0,2.9,0,4.5c-15.7,0-31.3,0-47.1,0c0-1.5,0-3,0-4.5C217.8,117.9,233.5,117.9,249.2,117.9z"/>
+                <path d="M216.4,113c0-3.1,0-6.1,0-9.2c6.2,0,12.3,0,18.6,0c0,3.1,0,6.1,0,9.2C228.8,113,222.6,113,216.4,113z"/>
+                <path d="M211.5,98.9c-3.2,0-6.1,0-9.2,0c0-4.7,0-9.3,0-14c3,0,6.1,0,9.2,0C211.5,89.6,211.5,94.2,211.5,98.9z"/>
+                <path d="M239.9,98.9c0-4.7,0-9.3,0-14c3.1,0,6.1,0,9.2,0c0,4.6,0,9.3,0,14C246.1,98.9,243,98.9,239.9,98.9z"/>
+              </g>
+            </g>
+          </g>
+          <g>
+            <g>
+              <path d="M1758.9,32.9c1.5,0,3.1,0,4.7,0c0,1.5,0,3.1,0,4.6c1.6,0,3.1,0,4.7,0c0,12.5,0,25,0,37.6c1.6,0,3.1,0,4.7,0
+                c0,3.2,0,6.3,0,9.4c3.2,0,6.2,0,9.4,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0
+                c0,3.2,0,6.2,0,9.4c-1.5,0-3,0-4.6,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.2,0-4.8,0l0,0c0-1.5,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0
+                c0-3.2,0-6.2,0-9.4c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.6c-1.6,0-3.1,0-4.7,0c0,4.7,0,9.3,0,14.1c-1.6,0-3.1,0-4.7,0
+                c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0-1.5,0-3.1,0-4.7c1.6,0,3.1,0,4.6,0c0-4.7,0-9.4,0-14.1c-1.5,0-3,0-4.6,0
+                c0-4.7,0-9.3,0-14.1c-1.6,0-3.1,0-4.8,0c0-11,0-21.9,0-32.8c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0
+                c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.6c-9.4,0-18.8,0-28.2,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0
+                c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.6c-1.6,0-3.1,0-4.7,0c0,11,0,21.9,0,32.9c-1.6,0-3.1,0-4.7,0
+                c0,4.7,0,9.4,0,14.1c-1.6,0-3.1,0-4.7,0c0,4.7,0,9.4,0,14c-1.5,0-3.1,0-4.7,0c0-4.7,0-9.4,0-14c-1.6,0-3.1,0-4.7,0
+                c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.6,0c0,3.2,0,6.2,0,9.4c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.6,0
+                c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.6,0l0,0c0-1.5,0-3.1,0-4.7c1.5,0,3,0,4.6,0
+                c0-1.6,0-3.1,0-4.7c-1.5,0-3,0-4.6,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.2,0-9.4c1.5,0,3.1,0,4.6,0
+                c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c3.2,0,6.2,0,9.4,0c0-3.1,0-6.2,0-9.4c1.6,0,3.1,0,4.7,0
+                c0-12.6,0-25,0-37.6c3.2,0,6.2,0,9.4,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0
+                c0-1.6,0-3.1,0-4.7c3.2,0,6.2,0,9.4,0c0-3.2,0-6.2,0-9.4c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0
+                c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.2,0-4.7c3.2,0,6.2,0,9.4,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0
+                c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,3.2,0,6.3,0,9.4c-6.2,0-12.4,0-18.7,0c0,1.6,0,3.1,0,4.7c3.1,0,6.2,0,9.3,0
+                c0,1.6,0,3.2,0,4.7l0,0c-10.9,0-21.9,0-32.9,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.6,0
+                c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.6c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c9.4,0,18.8,0,28.2,0
+                c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0C1758.9,39.1,1758.9,36,1758.9,32.9L1758.9,32.9z
+                  M1740.2,18.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c4.7,0,9.4,0,14,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.6
+                c-3.2,0-6.2,0-9.4,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.6,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,3.2,0,6.2,0,9.3
+                c1.6,0,3.1,0,4.7,0C1740.2,21.8,1740.2,20.3,1740.2,18.7z"/>
+              <path d="M1754.2,136.2c-1.5,0-3,0-4.7,0c0-1.5,0-3,0-4.6c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-4.7,0-9.4,0-14.1,0
+                c0,1.5,0,3,0,4.6c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.7c-3.2,0-6.3,0-9.4,0c0-1.5,0-3,0-4.6
+                c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0,1.5,0,3,0,4.6c-4.7,0-9.4,0-14.1,0c0-1.5,0-3.1,0-4.6
+                c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.3,0-9.4c1.6,0,3.1,0,4.7,0l0,0c0,3.1,0,6.2,0,9.4
+                c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.6c4.7,0,9.4,0,14.1,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.6
+                c20.4,0,40.7,0,61.1,0c0,3.1,0,6.2,0,9.3c4.7,0,9.3,0,14.1,0c0-1.5,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-3.2,0-6.3,0-9.4l0,0
+                c1.5,0,3.1,0,4.7,0c0,3.1,0,6.2,0,9.4c-1.5,0-3,0-4.6,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.7
+                c-6.3,0-12.6,0-18.8,0l0,0c0-3.1,0-6.2,0-9.3c-4.8,0-9.4,0-14.1,0c0,1.5,0,3,0,4.6c1.5,0,3.1,0,4.6,0
+                C1754.2,133.1,1754.2,134.7,1754.2,136.2L1754.2,136.2z M1712,126.9c0,3.1,0,6.2,0,9.3c3.1,0,6.2,0,9.3,0c0-1.6,0-3.1,0-4.7
+                c1.6,0,3.1,0,4.6,0c0-1.6,0-3.1,0-4.6C1721.3,126.9,1716.7,126.9,1712,126.9z"/>
+              <path d="M1537.1,94c0-1.5,0-3.1,0-4.7c3.1,0,6.2,0,9.3,0c0-3.2,0-6.3,0-9.4c1.6,0,3.1,0,4.7,0c0-12.5,0-25,0-37.6
+                c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.6c1.6,0,3.2,0,4.7,0l0,0c0,3.1,0,6.2,0,9.3c-1.5,0-3.1,0-4.7,0c0,11.1,0,22,0,32.9
+                c-1.6,0-3.1,0-4.7,0c0,4.7,0,9.4,0,14.1c-1.6,0-3.1,0-4.6,0c0,4.7,0,9.3,0,14c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7
+                c3.2,0,6.2,0,9.4,0c0,1.6,0,3.2,0,4.7c-3.1,0-6.2,0-9.4,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7
+                c-1.6,0-3.1,0-4.7,0c0-4.7,0-9.3,0-14C1540.2,94,1538.7,94,1537.1,94L1537.1,94z"/>
+              <path d="M1560.6,136.2c-3.1,0-6.2,0-9.4,0c0,1.6,0,3.1,0,4.7c-4.7,0-9.4,0-14.1,0c0-1.6,0-3.1,0-4.7l0,0c4.7,0,9.3,0,14.1,0
+                c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.6c20.4,0,40.7,0,61,0c0,3.2,0,6.2,0,9.3c0,0,0,0,0,0c-1.6,0-3.2,0-4.8,0
+                l0,0c0-1.5,0-3.1,0-4.6c-3.2,0-6.2,0-9.3,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3.1,0-4.7,0c0-1.5,0-3,0-4.6c-7.9,0-15.6,0-23.5,0
+                c0,1.5,0,3,0,4.6c-1.6,0-3.2,0-4.7,0l0,0c0-1.5,0-3.1,0-4.6c-3.2,0-6.3,0-9.5,0C1560.6,133.2,1560.6,134.7,1560.6,136.2
+                L1560.6,136.2z"/>
+              <path d="M1565.3,4.7c0-1.5,0-3.1,0-4.7c3.1,0,6.2,0,9.4,0c0,1.5,0,3,0,4.6c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0
+                c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,3.2,0,6.3,0,9.4c4.7,0,9.4,0,14.2,0c0,1.6,0,3.2,0,4.7l0,0c-11,0-22,0-32.9,0l0,0
+                c0-1.5,0-3.1,0-4.7c1.5,0,3,0,4.6,0c0-1.6,0-3.1,0-4.7c-6.3,0-12.5,0-18.7,0c0-3.2,0-6.2,0-9.3c1.6,0,3.1,0,4.7,0l0,0
+                c0,1.5,0,3,0,4.7c4.8,0,9.4,0,14.2,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.6c1.6,0,3.1,0,4.6,0c0-3.1,0-6.2,0-9.3
+                c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7C1571.5,4.7,1568.4,4.7,1565.3,4.7L1565.3,4.7z"/>
+              <path d="M1602.9,28.2c1.5,0,3,0,4.6,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0
+                c0,14.1,0,28.2,0,42.3l0,0c-1.5,0-3.1,0-4.7,0c0-11,0-21.9,0-32.8c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.6c-1.6,0-3.1,0-4.7,0
+                c0-1.5,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.6,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0
+                c0-1.6,0-3.1,0-4.6c-1.6,0-3.1,0-4.6,0C1603,31.2,1603,29.7,1602.9,28.2L1602.9,28.2z"/>
+              <path d="M1617,79.8c1.5,0,3.1,0,4.7,0c0,3.1,0,6.2,0,9.4c3.2,0,6.3,0,9.5,0c0,1.6,0,3.2,0,4.8l0,0c-1.6,0-3.1,0-4.8,0
+                c0,4.7,0,9.4,0,14c-1.6,0-3.2,0-4.7,0c0-4.7,0-9.3,0-14.1c-1.6,0-3.1,0-4.7,0C1617,89.2,1617,84.5,1617,79.8L1617,79.8z"/>
+              <path d="M1631.1,94c1.5,0,3,0,4.6,0c0,1.5,0,3,0,4.6c1.6,0,3.1,0,4.7,0c0,3.2,0,6.3,0,9.4c-1.5,0-3,0-4.6,0c0,1.6,0,3.1,0,4.7
+                c-1.6,0-3.1,0-4.7,0l0,0c0-1.6,0-3.1,0-4.8c1.6,0,3.1,0,4.6,0c0-3.1,0-6.2,0-9.4c-1.6,0-3.1,0-4.6,0
+                C1631.1,97,1631.1,95.5,1631.1,94L1631.1,94z"/>
+              <path d="M1631.1,117.5c1.5,0,3,0,4.6,0c0,1.5,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,3.2,0,6.2,0,9.4c-1.6,0-3.1,0-4.7,0
+                c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.6,0l0,0c0-1.5,0-3.1,0-4.7c1.5,0,3.1,0,4.6,0c0-3.2,0-6.2,0-9.4c-1.6,0-3.1,0-4.6,0
+                C1631.1,120.5,1631.1,119,1631.1,117.5L1631.1,117.5z"/>
+              <path d="M1631.1,136.2c0,1.5,0,3.1,0,4.7c-4.7,0-9.4,0-14.2,0c0-1.6,0-3.1,0-4.7l0,0C1621.7,136.2,1626.4,136.2,1631.1,136.2
+                L1631.1,136.2z"/>
+              <path d="M1532.4,108c-1.5,0-3.1,0-4.7,0c0-3.1,0-6.2,0-9.4c1.5,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.6c1.6,0,3.2,0,4.7,0c0,0,0,0,0,0
+                c0,1.5,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0C1532.4,101.9,1532.4,104.9,1532.4,108L1532.4,108z"/>
+              <path d="M1763.6,136.2c0,1.5,0,3.1,0,4.7c-3.1,0-6.2,0-9.4,0c0-1.6,0-3.1,0-4.7c0,0,0,0,0,0
+                C1757.3,136.2,1760.5,136.2,1763.6,136.2L1763.6,136.2z"/>
+              <path d="M1570,136.2c0,1.5,0,3.1,0,4.7c-3.1,0-6.2,0-9.4,0c0-1.6,0-3.1,0-4.7c0,0,0,0,0,0C1563.7,136.2,1566.9,136.2,1570,136.2
+                L1570,136.2z"/>
+              <path d="M1532.4,131.5c-1.5,0-3.1,0-4.7,0c0-3.1,0-6.2,0-9.3c1.6,0,3.1,0,4.7,0l0,0C1532.4,125.3,1532.4,128.4,1532.4,131.5
+                L1532.4,131.5z"/>
+              <path d="M1612.2,136.2c0,1.5,0,3.1,0,4.7c-3.1,0-6.1,0-9.3,0c0-1.6,0-3.1,0-4.7c0,0,0,0,0,0C1606,136.2,1609.1,136.2,1612.2,136.2
+                L1612.2,136.2z"/>
+              <path d="M1782.4,108c0,1.6,0,3.2,0,4.7l0,0c-1.5,0-3.1,0-4.6,0c0-1.6,0-3.1,0-4.7C1779.4,108,1780.9,108,1782.4,108L1782.4,108z"
+                />
+              <path d="M1537.1,117.5c0-1.6,0-3.2,0-4.7l0,0c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7C1540.2,117.5,1538.7,117.5,1537.1,117.5
+                L1537.1,117.5z"/>
+              <path d="M1560.6,37.6c0-1.5,0-3.1,0-4.7c1.6,0,3.2,0,4.7,0l0,0c0,1.5,0,3.1,0,4.7C1563.7,37.6,1562.1,37.6,1560.6,37.6
+                L1560.6,37.6z"/>
+              <path d="M1782.4,112.8c1.6,0,3.1,0,4.7,0c0,1.6,0,3.2,0,4.7l0,0c-1.5,0-3.1,0-4.7,0C1782.4,115.8,1782.4,114.3,1782.4,112.8
+                L1782.4,112.8z"/>
+              <path d="M1532.4,122.2c0-1.5,0-3.1,0-4.7c1.6,0,3.2,0,4.7,0l0,0c0,1.5,0,3.1,0,4.7C1535.5,122.2,1533.9,122.2,1532.4,122.2
+                L1532.4,122.2z"/>
+              <path d="M1537.1,112.7c-1.5,0-3.1,0-4.7,0c0-1.6,0-3.2,0-4.7c0,0,0,0,0,0c1.6,0,3.1,0,4.7,0
+                C1537.1,109.7,1537.1,111.2,1537.1,112.7L1537.1,112.7z"/>
+              <path d="M1754.2,28.2c1.6,0,3.1,0,4.7,0c0,1.6,0,3.2,0,4.7c0,0,0,0,0,0c-1.6,0-3.1,0-4.7,0C1754.2,31.2,1754.2,29.7,1754.2,28.2
+                L1754.2,28.2z"/>
+              <path d="M1565.3,32.9c0-1.6,0-3.1,0-4.7c1.6,0,3.2,0,4.7,0c0,0,0,0,0,0c0,1.6,0,3.1,0,4.7C1568.4,32.9,1566.8,32.9,1565.3,32.9
+                L1565.3,32.9z"/>
+              <path d="M1560.6,9.4c0-1.5,0-3.1,0-4.7c1.6,0,3.2,0,4.7,0c0,0,0,0,0,0c0,1.5,0,3.1,0,4.7C1563.7,9.4,1562.1,9.4,1560.6,9.4
+                L1560.6,9.4z"/>
+              <path d="M1537.1,136.2c-1.5,0-3.1,0-4.7,0c0-1.6,0-3.2,0-4.7c0,0,0,0,0,0c1.6,0,3.1,0,4.7,0
+                C1537.1,133.2,1537.1,134.7,1537.1,136.2L1537.1,136.2z"/>
+              <path d="M1631.1,112.7c0,1.6,0,3.2,0,4.7l0,0c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.2,0-4.7C1628.1,112.8,1629.6,112.8,1631.1,112.7
+                L1631.1,112.7z"/>
+              <path d="M1758.9,112.7c0,1.5,0,3.1,0,4.7c-15.7,0-31.3,0-47,0c0-1.6,0-3.1,0-4.7C1727.6,112.7,1743.3,112.7,1758.9,112.7z"/>
+              <path d="M1744.8,98.7c0,3.1,0,6.2,0,9.3c-6.2,0-12.5,0-18.7,0c0-3.1,0-6.2,0-9.3C1732.3,98.7,1738.5,98.7,1744.8,98.7z"/>
+              <path d="M1749.6,79.9c3.1,0,6.2,0,9.3,0c0,4.7,0,9.3,0,14c-3.1,0-6.2,0-9.3,0C1749.6,89.2,1749.6,84.6,1749.6,79.9z"/>
+              <path d="M1712,79.9c3.1,0,6.2,0,9.3,0c0,4.7,0,9.3,0,14c-3.1,0-6.2,0-9.3,0C1712,89.2,1712,84.6,1712,79.9z"/>
+              <path d="M1712,112.8c-3.1,0-6.2,0-9.5,0c0-1.6,0-3.2,0-4.7c3.1,0,6.2,0,9.5,0C1712,109.6,1712,111.2,1712,112.8z"/>
+              <path d="M1768.4,108c0,1.5,0,3.1,0,4.7c-3.2,0-6.3,0-9.5,0c0-1.5,0-3.1,0-4.7C1762.1,108,1765.3,108,1768.4,108z"/>
+              <path d="M1702.6,108c-1.5,0-3.1,0-4.7,0c0-1.6,0-3.2,0-4.7c1.5,0,3.1,0,4.7,0C1702.6,104.9,1702.6,106.5,1702.6,108z"/>
+              <path d="M1617,112.7c0,1.5,0,3.1,0,4.7c-3.1,0-6.2,0-9.4,0c0,1.6,0,3.1,0,4.7c-15.7,0-31.3,0-47,0c0-1.6,0-3.1,0-4.7
+                c15.6,0,31.3,0,47,0c0-1.6,0-3.1,0-4.7C1610.8,112.7,1613.9,112.7,1617,112.7z"/>
+              <path d="M1593.5,103.4c0,3.2,0,6.2,0,9.3c-6.2,0-12.5,0-18.7,0c0-3.1,0-6.2,0-9.3C1581,103.4,1587.2,103.4,1593.5,103.4z"/>
+              <path d="M1570,98.6c-3.1,0-6.2,0-9.3,0c0-4.7,0-9.3,0-14c3.1,0,6.2,0,9.3,0C1570,89.2,1570,93.9,1570,98.6z"/>
+              <path d="M1607.5,98.6c-3.1,0-6.2,0-9.3,0c0-4.7,0-9.3,0-14c3.1,0,6.2,0,9.3,0C1607.5,89.2,1607.5,93.9,1607.5,98.6z"/>
+              <path d="M1570,56.3c9.4,0,18.8,0,28.2,0c0,1.5,0,3.1,0,4.7c-9.4,0-18.8,0-28.2,0C1570,59.5,1570,57.9,1570,56.3z"/>
+              <path d="M1560.6,46.9c1.5,0,3.1,0,4.7,0c0,1.6,0,3.2,0,4.7c-1.5,0-3.1,0-4.7,0C1560.6,50,1560.6,48.5,1560.6,46.9z"/>
+              <path d="M1621.7,108c0,1.5,0,3.1,0,4.7c-1.6,0-3.2,0-4.7,0c0-1.5,0-3.1,0-4.7C1618.6,108,1620.1,108,1621.7,108z"/>
+              <path d="M1565.3,51.6c1.5,0,3.1,0,4.7,0c0,1.6,0,3.2,0,4.7c-1.6,0-3.1,0-4.7,0C1565.3,54.7,1565.3,53.2,1565.3,51.6z"/>
+              <path d="M1598.2,56.4c0-1.5,0-3.1,0-4.7c1.6,0,3.2,0,4.7,0c0,1.5,0,3.1,0,4.7C1601.3,56.4,1599.8,56.4,1598.2,56.4z"/>
+            </g>
+          </g>
+          </svg>
+      </div>  
+    </div>  
+    <div class="instruction">
+      &#42; click on the white area to play fetch with the puppy!
+    </div>  
+  </div>  
+
+  <div class="sign">
+    by masahito / <a href="http://www.ma5a.com/" >ma5a.com</a>
+  </div>
+
+</body>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/search-algorithm-puppy/dist/script.js b/search-algorithm-puppy/dist/script.js
new file mode 100644
index 0000000..8076a3b
--- /dev/null
+++ b/search-algorithm-puppy/dist/script.js
@@ -0,0 +1,387 @@
+function init() {
+  const map = document.querySelector('.map')
+  const spriteContainer = document.querySelector('.sprite_container')
+  const instruction = document.querySelector('.instruction')
+  const sprite = document.querySelector('.sprite')
+  const motionSpeed = 150
+  const height = 10
+  const width = 20
+  const delay = 20
+  let cellSize = 40
+  let spritePos = -cellSize
+  let x = 0
+  let y = 0
+  let instructionTimer
+  let motionTimer
+  let displayTimer
+  let boneTimer
+  let start = 42
+  let goal = 0
+  let carryOn = true
+  let triedAnotherWay = false
+  let route = []
+  let happy
+  let happyFrame = 10
+
+  const cellsWithWalls = [
+    31,45,69,68,71,73,82,83,85,88,91,94,95,96,98,105,110,111,112,123,125,128,137,141,142,143,145,146,154,156,157,171
+  ]
+
+  const bone = `
+    <svg class ="bone" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 151.9 151.9" >
+    <style type="text/css">
+    .st0{fill:#FFFFFF;}
+    </style>
+    <polygon class="st0" points="39.2,53.7 44.6,56.9 50.4,62.3 102.8,62.3 106.4,59.3 111.2,53.7 120.8,53.7 125.3,58 130.4,63.8 
+    130.4,67.2 125.1,73.2 120.6,77.3 124.8,81.5 130.4,86.5 130.4,91.6 125.9,95.7 120.8,100.4 111.4,100.4 106.9,96.3 101.9,91.6 
+    50,91.4 45.9,95.7 40.8,100.4 30.9,100.4 26.4,96.3 21.7,91.2 21.7,86.7 26.4,82.2 30.9,77.1 26.4,72.5 21.7,67.2 21.7,63.2 
+    27,58.1 30.7,53.7 "/>
+    <g>
+    <g>
+      <g>
+        <path d="M24.1,70.2c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.3,0-9.5c1.6,0,3.1,0,4.7,0c0-1.6,0-3.2,0-4.7c1.5,0,3,0,4.5,0c0-1.5,0-3,0-4.5
+          c4.8,0,9.5,0,14.3,0c0,1.5,0,2.9,0,4.5c1.6,0,3.2,0,4.8,0c0,1.6,0,3.2,0,4.7c18.9,0,37.7,0,56.5,0c0-1.6,0-3.1,0-4.7
+          c1.6,0,3.2,0,4.8,0c0-1.5,0-3,0-4.5c4.7,0,9.4,0,14.1,0c0,1.5,0,3,0,4.5c1.6,0,3.1,0,4.7,0c0,1.6,0,3.2,0,4.7c1.6,0,3.2,0,4.8,0
+          c0,3.2,0,6.4,0,9.6c-1.6,0-3.1,0-4.7,0c0,0,0,0,0,0c0-3.1,0-6.2,0-9.3c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-4.7,0-9.4,0-14.1,0
+          c0,1.6,0,3.1,0,4.7c-1.6,0-3.2,0-4.8,0c0,1.6,0,3,0,4.5c-18.9,0-37.7,0-56.5,0c0-1.5,0-3,0-4.5c-1.6,0-3.2,0-4.8,0
+          c0-1.6,0-3.2,0-4.7c-4.7,0-9.4,0-14,0c0,1.5,0,3,0,4.6c-1.6,0-3.2,0-4.7,0C24.2,64,24.2,67.1,24.1,70.2
+          C24.1,70.2,24.1,70.2,24.1,70.2z"/>
+        <path d="M127.9,93.8c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.8,0c0,1.6,0,3.1,0,4.7c-4.7,0-9.3,0-14,0c0-1.6,0-3.1,0-4.7
+          c-1.6,0-3.2,0-4.8,0c0-1.6,0-3.2,0-4.8c-18.9,0-37.7,0-56.5,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.2,0-4.9,0c0,1.6,0,3.2,0,4.7
+          c-4.7,0-9.3,0-14,0c-0.1-0.1-0.2-0.2-0.3-0.3c0-1.4,0-2.9,0-4.4c-1.5,0-3,0-4.6,0c0-1.6,0-3.2,0-4.7c0,0,0,0,0,0
+          c1.6,0,3.1,0,4.7,0c0,1.6,0,3,0,4.6c4.7,0,9.3,0,14,0c0-1.5,0-3,0-4.7c1.6,0,3.2,0,4.8,0c0-1.6,0-3.1,0-4.6c18.9,0,37.7,0,56.5,0
+          c0,1.5,0,3,0,4.6c1.6,0,3.2,0,4.8,0c0,1.7,0,3.2,0,4.7c4.7,0,9.3,0,14,0c0-1.5,0-3,0-4.5C124.8,93.8,126.3,93.8,127.9,93.8
+          C127.9,93.8,127.9,93.8,127.9,93.8z"/>
+        <path d="M24.1,93.8c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.3,0-9.5c1.6,0,3.1,0,4.7,0c0-1.6,0-3.2,0-4.8c1.5,0,3,0,4.5,0c0-1.5,0-3,0-4.6
+          c-1.5,0-3,0-4.5,0c0-1.6,0-3.2,0-4.7c0,0,0,0,0,0c1.6,0,3.1,0,4.7,0c0,1.6,0,3,0,4.6c1.5,0,3,0,4.2,0c0.3,0.2,0.4,0.2,0.4,0.2
+          c0,1.7,0,3.2,0,4.8c-1.6,0-3.1,0-4.6,0c0,1.5,0,3,0,4.6c-1.6,0-3.2,0-4.7,0C24.2,87.6,24.2,90.7,24.1,93.8
+          C24.1,93.8,24.1,93.8,24.1,93.8z"/>
+        <path d="M127.9,70.2c0,1.6,0,3.1,0,4.7c-1.6,0-3.2,0-4.7,0c0,1.5,0,3,0,4.5c1.5,0,3.1,0,4.7,0c0,1.6,0,3.2,0,4.8
+          c1.6,0,3.2,0,4.8,0c0,3.2,0,6.3,0,9.6c-1.6,0-3.1,0-4.7,0c0,0,0,0,0,0c0-3.1,0-6.2,0-9.3c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7
+          c-1.6,0-3.2,0-4.7,0c0-1.6,0-3.2,0-4.9c1.5,0,3.1,0,4.7,0c0-1.7,0-3.1,0-4.7C124.8,70.1,126.3,70.1,127.9,70.2
+          C127.9,70.2,127.9,70.2,127.9,70.2z"/>
+      </g>
+    </g>
+    </g>
+  </svg>
+  `
+
+  const searchMemory = new Array(height * width).fill('').map(()=>{
+    return {
+      path: null,
+      searched: false,
+      prev: null
+    }
+  })
+
+  const mapMap = ()=>{
+    const mapArr = []   
+    for (let i = 0; i < (width * height); i++){
+      mapArr.push(i)
+    }
+
+    return mapArr.map((ele,i)=>{
+      const dataX = i % width
+      const dataY = Math.floor(i / width)
+
+      return `
+        <div 
+          class="map_tile"
+          data-index=${i}
+          data-x=${dataX}
+          data-y=${dataY}
+        >
+        </div>  
+      `
+    }).join('')
+  }
+
+  map.innerHTML = mapMap()
+  const mapTiles = document.querySelectorAll('.map_tile')
+
+  const setX = num =>{
+    x = num
+    spriteContainer.style.left = `${x}px`
+  }
+
+  const setY = num =>{
+    y = num
+    spriteContainer.style.top = `${y}px`
+  }
+
+  const setSpritePos = num =>{
+    spritePos = num
+    sprite.style.marginLeft = `${spritePos}px`
+  }
+
+  const positionSprite = pos =>{
+    const paraX = pos % width * cellSize
+    const paraY = Math.floor(pos / width) * cellSize
+    setX(paraX)
+    setY(paraY)
+  }
+
+  const NoWall = pos =>{
+    return !mapTiles[pos].classList.contains('wall')
+  }
+
+  const setUpWalls = ()=>{
+    cellsWithWalls.forEach(cell=>{
+      mapTiles[cell].classList.add('wall')
+    })
+    mapTiles.forEach(tile=>{
+      if (tile.dataset.y === '0' || 
+          tile.dataset.y === '9' || 
+          tile.dataset.x === '0' || 
+          tile.dataset.x === '19') tile.classList.add('wall')
+    })
+  }
+
+  const clearTiles = ()=>{
+    mapTiles[goal].innerHTML = ''
+    mapTiles.forEach(tile=>{
+      tile.className = 'map_tile'
+    })
+    setUpWalls()
+  }
+
+  const spriteWalk = e=>{
+    if (!e) return
+
+    const direction = e.key ? e.key.toLowerCase().replace('arrow','') : e
+    const current = (x / cellSize) + ((y / cellSize) * width)
+    let m = -cellSize
+    switch (direction) {
+      case 'right': 
+        if (x < ((width - 1) * cellSize) && NoWall(current + 1)) setX(x + cellSize)
+        m = spritePos === m * 8 ? m * 9 : m * 8
+        break
+      case 'left': 
+        if (x > 0 && NoWall(current - 1)) setX(x - cellSize)
+        m = spritePos === m * 6 ? m * 7 : m * 6
+        break
+      case 'up': 
+        if (y > 0 && NoWall(current - width)) setY(y - cellSize)
+        m = spritePos === m * 3 ? m * 5 : m * 3
+        break
+      case 'down': 
+        if (y < ((height - 1) * cellSize) && NoWall(current + width)) setY(y + cellSize)
+        m = spritePos === m * 0 ? m * 2 : m * 0
+        break
+      default:
+        console.log('invalid command')
+    }
+    setSpritePos(m)
+    start = (x / cellSize) + ((y / cellSize) * width)
+    if (goal === (x / cellSize) + ((y / cellSize) * width)) {
+      boneTimer = setTimeout(()=>{
+        mapTiles[goal].innerHTML = ''
+        animateHappyDog()
+      },100)  
+    }
+  }
+
+  const chainMotion = (instruction,index) => {
+    if (index >= instruction.length) return
+    
+    spriteWalk(instruction[index])
+    motionTimer = setTimeout(()=>{
+      chainMotion(instruction, index + 1)
+    },motionSpeed)
+  }
+
+  const displayPath = current =>{
+    searchMemory[current].path = 'path'
+    mapTiles[current].classList.add('path')
+    let prev = searchMemory[current].prev
+    
+    //! when sprite is one square away from start and prev is undefined, prev is corrected.
+    if (current - width === start ||
+      current + width === start ||
+      current - 1 === start ||
+      current + 1 === start) prev = start
+
+    let direction
+    if (current - width === prev) direction = 'down'
+    if (current + width === prev) direction = 'up'
+    if (current - 1 === prev) direction = 'right'
+    if (current + 1 === prev) direction = 'left'
+    
+    if (prev) route.push(direction)
+
+    if (!prev) {
+      route.push('reset')
+      return
+    }
+
+    if (prev === start || !prev) {
+      const reversedRoute = route.reverse()
+      chainMotion(reversedRoute,0)
+      return
+    }
+
+    displayTimer = setTimeout(()=>{
+      displayPath(prev)
+    },delay)
+  }
+
+  const distanceBetween = (a,b) =>{
+    return Math.abs(a % width - b % width) + Math.abs(Math.floor(a / width) - Math.floor(b / width))
+  }
+
+  const decideNextMove = (current, count) =>{
+    if (!carryOn) return
+    const possibleDestination = [
+      current + 1,
+      current - 1,
+      current - width,
+      current + width  
+    ]
+    const mapInfo = []
+    if (possibleDestination.filter(cell=> cell === goal).length === 1) {
+      carryOn = false
+      searchMemory[goal].prev = current
+      displayPath(goal)
+      return
+    }
+    possibleDestination.forEach(option=>{  
+      if (mapTiles[option] && 
+          !mapTiles[option].classList.contains('wall') && 
+          !searchMemory[option].searched && 
+          option !== start) {
+        mapInfo.push(
+          { 
+            cell: option,
+            prev: current,
+            distanceFromStart: distanceBetween(start,option),
+            distanceToGoal: distanceBetween(goal,option)
+          }
+        )
+      }
+    })
+    const minValue = Math.min(...mapInfo.map(cell=> cell.distanceFromStart + cell.distanceToGoal))
+    const optionsWithMinValue = mapInfo.filter(cell=> (cell.distanceFromStart + cell.distanceToGoal) === minValue)
+
+    mapInfo.filter(cell=> (cell.distanceFromStart + cell.distanceToGoal) !== minValue).forEach(option=>{
+      mapTiles[option.cell].classList.add('sub_node')
+    })
+
+    if (optionsWithMinValue.length === 0 && !triedAnotherWay) {
+      triedAnotherWay = true
+      tryAnotherWay(count)
+    }
+
+    optionsWithMinValue.forEach(option=>{
+      searchMemory[option.cell].searched = true 
+      searchMemory[option.cell].prev = current
+      mapTiles[option.cell].classList.add('node')   
+      setTimeout(()=>{
+        decideNextMove(option.cell, count + 1)
+      },delay)
+    })
+  }
+
+  const tryAnotherWay = count =>{
+    if (!carryOn) return
+    const possibleDestination = [
+      start + 1,
+      start - 1,
+      start - width,
+      start + width  
+    ]
+    possibleDestination.forEach(path=>{
+      if (mapTiles[path] && 
+          !searchMemory[path].searched && 
+          !mapTiles[path].classList.contains('wall')) {
+        decideNextMove(path, count + 1)
+      }
+    })
+  }
+
+  const resetMotion = () =>{
+    clearTimeout(motionTimer)
+    clearTimeout(displayTimer)
+    clearTimeout(boneTimer)
+    clearInterval(happy)
+    clearTiles()
+    searchMemory.forEach(memory=>{
+      memory.path = null,
+      memory.searched = false,
+      memory.prev = null
+    })
+    route = []
+    carryOn = true
+    triedAnotherWay = false
+  }
+
+  const triggerMotion = e =>{
+    if (Number(e.target.dataset.index) === goal || !e.target.dataset.index) return 
+    instruction.classList.add('hide')
+    clearTimeout(instructionTimer)
+    instructionTimer = setTimeout(()=>{
+      instruction.classList.remove('hide')
+    },5 * 1000)
+    mapTiles[goal].innerHTML = ''
+    goal = Number(e.target.dataset.index)
+    if (mapTiles[goal].classList.contains('wall')) return
+    resetMotion()
+    mapTiles[start].classList.add('start')
+    positionSprite(start)
+    mapTiles[goal].classList.add('goal')
+    mapTiles[goal].innerHTML = bone
+    searchMemory[start].path = 'start'
+    searchMemory[goal].path = 'goal'
+    decideNextMove(start, 0)
+  }
+
+  const animateHappyDog = () =>{
+    happy = setInterval(()=>{
+      happyFrame = happyFrame === 10 ? 11 : 10
+      setSpritePos(happyFrame * -cellSize)
+    },150)
+  }
+
+  //! comment this bit out to enable keyboard control
+  // window.addEventListener('keydown', spriteWalk)
+
+   const resize = () =>{
+    const wrapper = document.querySelector('.wrapper')
+    let pWidth = 800
+    if (wrapper.offsetWidth < 800) {
+      pWidth = wrapper.offsetWidth
+    } 
+    cellSize = Math.floor(pWidth / width)
+    const calcWidth = Math.floor(pWidth / width) * width
+    const mapCover = document.querySelector('.map_cover')
+
+    //*resize sprite
+    positionSprite(start)
+    setSpritePos(-cellSize)
+    sprite.style.height = `${cellSize}px`
+    sprite.style.width = `${cellSize * 12}px`
+    spriteContainer.style.height = `${cellSize}px`
+    spriteContainer.style.width = `${cellSize}px`
+
+    //* resize map
+    map.style.width = `${calcWidth}px`
+    map.style.height = `${calcWidth / 2}px`
+    mapCover.style.width = `${calcWidth}px`
+    mapCover.style.height = `${calcWidth / 2}px`
+    mapCover.style.marginTop = `-${calcWidth / 2}px`
+    mapTiles.forEach(tile=>{
+      tile.style.width = `${cellSize}px`
+      tile.style.height = `${cellSize}px`
+    })
+  }
+  
+  //*setup
+  setUpWalls()
+  positionSprite(start)
+  mapTiles.forEach(mapTile=>{
+    mapTile.addEventListener('click', triggerMotion)
+  })
+  resize()
+  window.addEventListener('resize', resize)
+}
+
+window.addEventListener('DOMContentLoaded', init)
\ No newline at end of file
diff --git a/search-algorithm-puppy/dist/style.css b/search-algorithm-puppy/dist/style.css
new file mode 100644
index 0000000..93946be
--- /dev/null
+++ b/search-algorithm-puppy/dist/style.css
@@ -0,0 +1,128 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  background-color: rgb(67, 65, 88);
+}
+
+.wrapper {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.map {
+  height: 400px;
+  width: 800px;
+  background-color: rgb(255, 255, 255);
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.map_tile {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  font-size: 10px;
+  color: transparent;
+  transition:0.5s;
+  cursor: pointer;
+}
+
+.map_cover {
+  margin-top: -400px;
+  height: 400px;
+  width: 800px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.sprite_container {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  transition: 0.3s;
+  overflow: hidden;
+}
+
+.sprite  {
+  position: absolute;
+  height: 40px;
+  width: 420px;
+}
+
+.bone {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  animation: throw forwards 0.3s;
+}
+
+@keyframes throw {
+  0% { top: 100vh; transform: rotate(-200deg);}
+  60% { top: -20vh; transform: rotate(0);}
+  80% {transform: rotate(500deg); }
+  90% {top: -10px; transform: rotate(255deg); }
+  100% {top: 0; transform: rotate(360deg);}
+}
+
+.start { background-color: rgb(91, 248, 156); }
+
+.wall { 
+  background-color: rgb(17, 2, 83); 
+  cursor: auto;
+}
+
+.node { background-color: rgb(196, 245, 250); }
+
+.path { background-color: rgb(33, 233, 139); }
+
+
+/* used for debugging and refining algorithm */
+/* .sub_node { background-color: rgb(196, 255, 247); }
+
+.sub_node.node{ background-color: rgb(156, 253, 240); }
+
+.sub_node.node.path{ background-color: rgb(33, 233, 139); } */
+
+.sign {
+  position: absolute;
+  color: white;
+  bottom: 10px;
+  right: 10px;
+  font-size: 10px;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.instruction {
+  width: 100%;
+  max-width: 800px;
+  margin: 10px 0 0 0;
+  font-size: 15px;
+  color: white;
+  opacity: 1;
+  transition: 1s;
+}
+
+.instruction.hide {
+  opacity: 0;
+}
\ No newline at end of file
diff --git a/search-algorithm-puppy/license.txt b/search-algorithm-puppy/license.txt
new file mode 100644
index 0000000..ca3f4d2
--- /dev/null
+++ b/search-algorithm-puppy/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Masahito Leo Takeuchi (https://codepen.io/Ma5a/pen/jOBWBYw)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/search-algorithm-puppy/src/index.html b/search-algorithm-puppy/src/index.html
new file mode 100644
index 0000000..1ff1070
--- /dev/null
+++ b/search-algorithm-puppy/src/index.html
@@ -0,0 +1,723 @@
+<body>
+
+  <div class="wrapper">
+    <div class="map">
+    </div>  
+    <div class="map_cover">
+      <div class="sprite_container">
+        <svg class="sprite" x="0px" y="0px" width="1811px" height="150.9px" viewBox="0 0 1811 150.9">
+          <style type="text/css">
+            .st0{fill:#FFFFFF;}
+          </style>
+          <polygon class="st0" points="1705.3,40.4 1709.8,40.4 1713.3,36.1 1718.5,31.2 1722.8,26.7 1732.7,26.7 1732.7,16.3 1738.6,11.1 
+            1742.6,7.1 1747,1.4 1751.8,1.4 1756,6.7 1761,11.4 1761,16.1 1747,17.3 1742.8,19.9 1742.3,24.6 1751.5,25.5 1756,30 1761,34.5 
+            1765.7,41.6 1765.7,71.5 1771.3,79.3 1771.3,86.1 1778.9,86.1 1783.6,90.4 1789.5,96 1789.5,100.8 1785.2,105.2 1780.5,109.5 
+            1783.8,115.4 1789.5,119.4 1789.5,125 1785,128.8 1780.1,133.5 1766.4,133.5 1761.4,138.8 1756.9,138.8 1752,134 1747.4,130 
+            1747.4,125.3 1728.7,125 1728.9,129.5 1723.2,133.8 1719,138.8 1714.3,138.8 1709.3,133.8 1709.3,129.8 1704.1,129.8 1700.8,133.3 
+            1690.9,133.3 1686.2,129.3 1681,124.1 1682.6,120.5 1685.3,114.5 1691.9,110.9 1687.2,106.4 1681,101.1 1681,96.5 1685.5,92.4 
+            1689.5,87.1 1700.8,87.4 1700.8,75.9 1705.5,73.8 "/>
+          <polygon class="st0" points="1553.8,44.7 1557.1,44.7 1558.9,39.3 1563.1,35.3 1567.3,30.6 1573.2,25.9 1576.6,25.9 1576.6,21.1 
+            1571.5,16.1 1558,16.1 1558,12.7 1562.5,7.3 1568.1,1.4 1573.2,1.4 1576.6,7.6 1582.2,11.5 1585.3,16.1 1586.4,25.4 1601.1,25.9 
+            1605.3,30.6 1610.1,35.3 1615.1,40 1615.1,77.3 1619.1,83.3 1619.1,91.9 1628.1,91.9 1634,96.6 1638.2,101.4 1638.2,106 
+            1633.7,109.8 1629.2,115.4 1633.4,119.9 1638.2,124.9 1638.2,129.2 1634.3,133.5 1628.7,137.7 1620.2,137.7 1613.2,134.3 
+            1611.5,137.7 1605.9,137.7 1599.9,134.3 1599.9,129.5 1573.8,129.2 1573.2,133.2 1568.1,138.8 1563.1,138.8 1558,134.6 1553.8,134 
+            1549.8,137.7 1539.4,137.7 1533.2,133.5 1529.3,127.3 1529.3,124.9 1535.2,121.1 1538.8,114 1534.9,110.9 1530.4,106 1530.4,100.1 
+            1535.5,96.6 1538.3,91.9 1548.4,91.9 1548.4,83.6 1553.5,77.3 "/>
+          <polygon class="st0" points="106.5,77.4 109.6,82.4 110.9,92.2 114.1,95.5 114.4,111.3 111,115.5 110.5,125.1 107.2,128.1 
+            104.1,131 102.7,133 95.2,133.1 91,129.1 71.8,129 67,139.8 64.2,143 57.3,142.6 53.2,138 47.4,133.2 44.2,126.1 44,115.9 
+            38.9,114.7 35.9,111 35.9,95.5 39.9,92.6 40.1,81.5 44.2,78.5 44.2,46.5 51.1,38.2 62.7,26.4 72.4,25.5 73.2,15.8 78.7,10.5 
+            82.9,6.4 85.6,3.5 90.8,3.2 97.6,6.3 98.8,9.8 101.4,16 100,16 85.7,16.3 82.7,22.7 87.5,26.5 99.3,38.3 101.8,45.5 105.8,45.5 "/>
+          <polygon class="st0" points="256.2,77.3 260.8,82.2 260.9,92.6 265.3,95.3 265.6,111 261.4,115.1 261.7,124.8 258.4,127.8 
+            255.2,134.2 252.9,139.2 245.6,139.3 238.3,130 218,129.8 212.8,135.4 209.2,138.9 204.8,139.1 200.8,135.6 198.9,128.6 
+            195.4,125.8 195.2,115.7 190.1,114.4 187.1,110.7 187.1,95.3 191.1,92.3 191.3,81.3 195.4,78.2 195.4,46.3 202.3,38 213.9,26.1 
+            223.6,25.3 224.4,15.6 224,5.5 227,4 229.5,3.3 231.8,6.7 233.9,22.5 237.9,26.9 249.3,37.7 253,45.3 257,45.3 "/>
+          <polygon class="st0" points="346,77.2 342.9,82.2 341.5,91.9 338.4,95.3 338.1,111 341.5,115.3 341.9,124.8 345.2,127.8 
+            348.4,130.7 349.8,132.8 357.2,132.9 361.4,128.8 380.6,128.8 385.4,139.6 388.2,142.7 395.1,142.4 399.2,137.8 405,132.9 
+            408.2,125.8 408.5,115.7 413.5,114.4 416.5,110.7 416.5,95.3 412.5,92.3 412.3,81.3 408.2,78.2 408.2,46.3 401.3,38 389.7,26.1 
+            380,25.3 379.2,15.6 373.7,10.3 369.5,6.1 366.9,3.3 361.6,2.9 354.8,6 353.6,9.6 351,15.7 352.4,15.7 366.7,16.1 369.7,22.5 
+            364.9,26.2 353.1,38 350.6,45.3 346.7,45.3 "/>
+          <polygon class="st0" points="497.8,6.4 501.3,6.4 516.5,21.8 540.4,21.8 543.8,16.7 549.6,11.7 554.3,6.4 559.5,6.4 558.8,43.7 
+            562.2,48.1 563.3,54.8 568,58.4 568,72.8 563.1,77.9 559,81.7 559,91.6 562.9,96.5 563.1,129 559.3,133.8 559.3,139.3 554.3,143.6 
+            548.6,143.6 544.3,138.4 543.4,133.1 539.1,129.9 516.4,129.5 511.5,133.8 507,134 502.1,129.9 502.3,125.6 497.8,120.5 497.8,95.6 
+            502.3,92.7 502.8,82.8 496.7,82.6 493.5,78.5 488,72.8 488,58.6 492.3,54.6 493.1,49.9 497,44.7 "/>
+          <polygon class="st0" points="648.5,6.3 652.1,6.3 667.3,21.7 691.1,21.7 694.5,16.7 700.3,11.6 705,6.3 710.3,6.3 709.5,43.7 
+            712.9,48 714,54.8 718.7,58.3 718.7,72.8 713.8,77.9 708.7,82.8 703.5,82.8 703.9,91.3 709.1,96.2 708.6,119.7 704.6,126.3 
+            705.1,134.5 698.3,139.6 693.8,138.4 689.7,133.2 685.3,130 670.3,130.3 666.7,134.2 662.1,139.3 656.5,139.9 653.4,133.4 
+            653,125.5 648.5,120.5 648.5,95.5 653,92.7 653.6,82.7 647.4,82.6 644.2,78.4 638.7,72.8 638.7,58.5 643.1,54.6 643.8,49.9 
+            647.8,44.6 "/>
+          <polygon class="st0" points="860.1,6.4 856.6,6.4 841.4,21.8 817.5,21.8 814.2,16.7 808.3,11.7 803.6,6.4 798.4,6.4 799.1,43.7 
+            795.8,48.1 794.6,54.8 789.9,58.4 789.9,72.8 794.8,77.9 799,81.7 799,91.6 795,96.5 794.8,129 798.6,133.8 798.6,139.3 
+            803.6,143.6 809.3,143.6 813.6,138.4 814.5,133.1 818.8,129.9 841.6,129.5 846.4,133.8 850.9,134 855.8,129.9 855.6,125.6 
+            860.1,120.5 860.1,95.6 855.6,92.7 855.1,82.8 861.3,82.6 864.5,78.5 869.9,72.8 869.9,58.6 865.6,54.6 864.8,49.9 860.9,44.7 "/>
+          <polygon class="st0" points="935.7,58.2 945.5,49.8 949,45.4 955,39.4 955,29.3 959.3,26.5 963.5,29.5 963.5,35.1 969.1,40.4 
+            973.6,40.4 978.1,35.1 983,30.4 987.9,26.5 992.4,30 992.4,77.5 1010.2,77.5 1016,82 1021.5,82 1024.7,78.7 1044.6,78.7 1048.7,82 
+            1044.9,86.4 1039.7,92 1035,92 1029.7,87.7 1025,88 1025.4,92 1029.9,96.5 1033.7,100.2 1034.2,106.3 1039.1,110 1044.2,115.6 
+            1044.2,124.5 1040.2,129 1035.4,129 1028.4,125.6 1025.8,125.6 1020.4,120 1015.8,119.8 1016,124.1 1011.2,130.1 1006.3,133.8 
+            1001.6,133.8 996.7,129.9 997.1,119.4 992.2,119.4 987.5,125.8 987.1,130.1 983.2,133.8 978.5,133.8 964,120.7 954.3,120.5 
+            950.7,124.5 935.7,124.8 930.8,120.9 935.9,115.3 940.8,111.1 941,106.1 934.6,100.6 925.7,100.6 911.3,86.5 911.3,72.8 918.1,67.8 
+            921.8,63.6 927.4,63.3 930.3,59.5 "/>
+          <polygon class="st0" points="1062.4,86 1062.4,73.8 1066.9,68.2 1072.2,63.6 1078,63.6 1080.8,58.4 1087.6,58.4 1090.6,53.5 
+            1094.7,50.7 1099.6,45.4 1105,40.4 1105,31.2 1109.9,25.7 1114,30.2 1114,35.9 1118.9,39.1 1123.6,39.1 1128.3,36.1 1132.8,31 
+            1137.7,25.7 1142.7,30.2 1142.7,72.8 1161.7,73.8 1166.2,77.7 1171.3,72.8 1176,68.5 1180.5,63.6 1185.7,58.6 1189.9,63.8 
+            1189.9,72.8 1185.7,77.2 1180.8,82.4 1175,82.4 1175,86 1179.3,91.2 1179.9,105.1 1189.9,109.6 1189.9,124.1 1185,124.1 
+            1180.7,120.5 1175.6,115.8 1171.1,119.8 1166.2,125.4 1161.1,129.5 1157.4,125.4 1156.4,116.2 1146.9,116 1146.7,124.8 
+            1143.9,129.5 1137.7,129.5 1133.7,125.6 1129,120.5 1123,120.3 1119.6,124.5 1113.3,124.5 1110.6,129.5 1095.6,129.5 1090.7,124.6 
+            1090.6,120.3 1096.2,114.9 1100.7,110.6 1100.5,106.1 1091.1,106.1 1084.7,101.6 1075.7,101.2 1072.2,96.9 1067.1,91.8 "/>
+          <polygon class="st0" points="1327.5,58.2 1317.7,49.8 1314.1,45.4 1308.1,39.4 1308.1,29.3 1303.8,26.5 1299.7,29.5 1299.7,35.1 
+            1294,40.4 1289.5,40.4 1285,35.1 1280.2,30.4 1275.3,26.5 1270.8,30 1270.8,77.5 1252.9,77.5 1247.1,82 1241.7,82 1238.5,78.7 
+            1218.6,78.7 1214.5,82 1218.2,86.4 1223.5,92 1228.2,92 1233.4,87.7 1238.1,88 1237.7,92 1233.2,96.5 1229.5,100.2 1228.9,106.3 
+            1224,110 1219,115.6 1219,124.5 1222.9,129 1227.8,129 1234.7,125.6 1237.4,125.6 1242.8,120 1247.3,119.8 1247.1,124.1 1252,130.1 
+            1256.9,133.8 1261.6,133.8 1266.5,129.9 1266.1,119.4 1271,119.4 1275.6,125.8 1276,130.1 1280,133.8 1284.7,133.8 1299.1,120.7 
+            1308.9,120.5 1312.4,124.5 1327.6,123.1 1332.3,120.9 1327.3,115.3 1322.4,111.1 1322.2,106.1 1328.6,100.6 1337.4,100.6 
+            1351.9,86.5 1351.9,72.8 1345.1,67.8 1341.3,63.6 1335.7,63.3 1332.9,59.5 "/>
+          <polygon class="st0" points="1501.8,85.7 1501.8,73.5 1497.3,67.9 1492.1,63.4 1486.3,63.4 1483.5,58.1 1476.7,58.1 1473.7,53.2 
+            1469.6,50.4 1464.7,45.2 1459.2,40.1 1459.2,30.9 1454.4,25.4 1450.2,30 1450.2,35.6 1445.4,38.8 1440.7,38.8 1436,35.8 
+            1431.5,30.7 1426.6,25.4 1421.5,30 1421.5,72.5 1402.6,73.5 1398,77.4 1393,72.5 1388.3,68.2 1383.8,63.4 1378.5,58.3 1374.4,63.6 
+            1374.4,72.5 1378.5,76.9 1383.4,82.1 1389.2,82.1 1389.2,85.7 1384.9,91 1384.3,104.8 1374.4,109.4 1374.4,123.8 1379.3,123.8 
+            1383.6,120.2 1388.7,115.5 1393.2,119.5 1398,125.1 1403.1,129.2 1406.9,125.1 1407.8,115.9 1417.4,115.7 1417.6,124.6 
+            1420.4,129.2 1426.6,129.2 1430.5,125.3 1435.2,120.2 1441.2,120.1 1444.6,124.2 1451,124.2 1453.6,129.2 1468.6,129.2 
+            1473.5,124.4 1473.7,120.1 1468.1,114.6 1463.6,110.3 1463.7,105.8 1473.1,105.8 1479.5,101.3 1488.5,100.9 1492.1,96.6 
+            1497.2,91.5 "/>
+          <g>
+            <g>
+              <g>
+                <path d="M1499.3,70.7c1.6,0,3.2,0,4.8,0c0,6.3,0,12.6,0,19c-1.6,0-3.2,0-4.8,0l0,0C1499.4,83.3,1499.4,77,1499.3,70.7
+                  L1499.3,70.7z"/>
+                <path d="M84.6,4.7c0-1.6,0-3.2,0-4.8c3.1,0,6.2,0,9.4,0c0,1.5,0,3.1,0,4.8c1.7,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.9l0,0
+                  c-1.5,0-3.1,0-4.8,0c0-1.8,0-3.2,0-4.8C90.7,4.6,87.6,4.6,84.6,4.7L84.6,4.7z"/>
+                <path d="M391,146.2c-1.5-0.1-2.9-0.2-4.5-0.3c0-1.5,0-3,0-4.5l0,0c3.1,0,6.1,0,9.4,0c0-1.7,0-3.2,0-4.8c1.7,0,3.3,0,4.8,0l0,0
+                  c0,1.5,0,3,0,4.7c-1.7,0-3.2,0-4.8,0c0,1.6,0,3,0,4.6c-1.6,0.1-3.1,0.2-4.6,0.3C391.2,146.2,391.1,146.2,391,146.2z"/>
+                <path d="M358.2,4.7c0-1.6,0-3.2,0-4.8c3.1,0,6.2,0,9.4,0c0,1.6,0,3.2,0,4.8l0,0C364.4,4.6,361.3,4.6,358.2,4.7L358.2,4.7z"/>
+                <path d="M806,146.2c-1.5-0.1-2.9-0.2-4.5-0.3c0-1.5,0-3,0-4.5l0,0c3.1,0,6.3,0,9.4,0l0,0c0,1.5,0,2.9,0,4.5
+                  c-1.6,0.1-3.1,0.2-4.5,0.3C806.2,146.2,806.1,146.2,806,146.2z"/>
+                <path d="M556.4,141.4c0,1.5,0,2.9,0,4.5c-1.6,0.1-3.1,0.2-4.5,0.3c-0.1,0-0.2,0-0.2,0c-1.5-0.1-2.9-0.2-4.5-0.3c0-1.5,0-3,0-4.5
+                  l0,0C550.2,141.5,553.3,141.5,556.4,141.4L556.4,141.4z"/>
+                <path d="M60.8,146.2c-1.5-0.1-2.9-0.2-4.6-0.3c0-1.5,0-3,0-4.5l0,0c3.1,0,6.3,0,9.4,0l0,0c0,1.5,0,2.9,0,4.5
+                  c-1.6,0.1-3.1,0.2-4.5,0.3C61,146.2,60.9,146.2,60.8,146.2z"/>
+                <path d="M230.5-0.2c0,1.6,0,3.2,0,4.8l0,0c-1.6,0-3.2,0-4.8,0l0,0c0-1.6,0-3.2,0-4.8C227.3-0.2,228.9-0.2,230.5-0.2z"/>
+                <path d="M344,127.3c-1.5,0-3.1,0-4.8,0c0-4.8,0-9.5,0-14.2l0,0c4.7,0,9.4,0,14.2,0c0,1.6,0,3.1,0,4.6c15.8,0,31.4,0,47.2,0
+                  c0-1.6,0-3,0-4.6c4.8,0,9.3,0,14,0c0-6.4,0-12.6,0-18.9c-1.6,0-3,0-4.7,0c0-4.7,0-9.3,0-14.1c-1.6,0-3.1,0-4.7,0
+                  c0-11.1,0-22,0-32.9c-1.6,0-3,0-4.7,0c0,1.5,0,3,0,4.5c-1.7,0-3.2,0-4.7,0c0-1.5,0-3,0-4.7c1.7,0,3.1,0,4.6,0c0-3.2,0-6.3,0-9.5
+                  c-1.6,0-3,0-4.6,0c0-1.7,0-3.1,0-4.6l0,0c1.5,0,3,0,4.7,0c0,1.5,0,2.9,0,4.6c1.6,0,3.1,0,4.7,0c0,1.7,0,3.2,0,4.8
+                  c1.7,0,3.1,0,4.7,0c0,12.6,0,25.1,0,37.7c1.6,0,3.1,0,4.7,0c0,4.8,0,9.4,0,14.1c1.6,0,3,0,4.6,0c0,6.4,0,12.6,0,18.9
+                  c-1.4,0-2.8,0-4.5,0c0,1.6,0,3.1,0,4.8c-1.7,0-3.1,0-4.8,0c0,4.7,0,9.3,0,14.1c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.8
+                  c-1.7,0-3.2,0-4.7,0l0,0c0-1.5,0-3.1,0-4.8c1.6,0,3.1,0,4.5,0c0-4.7,0-9.3,0-13.9c-1.5,0-3,0-4.6,0c0,1.5,0,3,0,4.4
+                  c-15.8,0-31.4,0-47.2,0c0-1.5,0-3,0-4.4c-3.2,0-6.2,0-9.3,0C344,121.2,344,124.2,344,127.3L344,127.3z"/>
+                <path d="M990.1,28.2c1.5,0,3,0,4.7,0c0,15.7,0,31.4,0,47.2c6.3,0,12.5,0,18.8,0c0,1.7,0,3.2,0,4.7l0,0c-6.2,0-12.4,0-18.8,0
+                  c0,3.3,0,6.3,0,9.6c-1.6,0-3.1,0-4.8,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.8,0c0,1.7,0,3.1,0,4.7c-1.6,0-3,0-4.6,0
+                  c0,1.6,0,3.1,0,4.8c-1.7,0-3.1,0-4.8,0c0,1.6,0,3.1,0,4.6c-11,0-21.9,0-33,0c0,1.6,0,3.1,0,4.8c-1.7,0-3.1,0-4.7,0
+                  c0,1.6,0,3,0,4.6c-1.6,0-3.1,0-4.7,0c0,1.7,0,3.2,0,4.7l0,0c-1.5,0-3,0-4.6,0c0-1.5,0-3,0-4.7c1.5,0,3,0,4.6,0c0-1.6,0-3,0-4.6
+                  c1.6,0,3,0,4.9,0c0-3.3,0-6.3,0-9.4l0,0c12.5,0,25,0,37.7,0c0-1.7,0-3.2,0-4.8c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7
+                  c1.6,0,3.1,0,4.7,0c0-1.7,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0C990.1,68.9,990.1,48.5,990.1,28.2L990.1,28.2z"/>
+                <path d="M1216.6,80c0-1.5,0-2.9,0-4.5c7.8,0,15.5,0,23.4,0c0,1.5,0,2.9,0,4.5c3.2,0,6.2,0,9.4,0c0-1.4,0-2.9,0-4.6
+                  c6.4,0,12.6,0,18.9,0c0-15.8,0-31.4,0-47.2c1.6,0,3,0,4.6,0c0-1.6,0-3.1,0-4.7c1.7,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.6l0,0
+                  c-1.5,0-3,0-4.6,0c0,20.5,0,40.9,0,61.4c1.6,0,3,0,4.6,0c0,1.7,0,3.1,0,4.6c-1.5,0-3.1,0-4.8,0c0-1.6,0-3.1,0-4.7
+                  c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.2,0-9.3c-6.3,0-12.5,0-18.9,0c0,1.6,0,3,0,4.6c-3.2,0-6.3,0-9.4,0l0,0c0-1.5,0-3,0-4.8
+                  C1232.2,80,1224.4,80,1216.6,80L1216.6,80z"/>
+                <path d="M490.4,56.5c0-3.1,0-6.1,0-9.4c1.6,0,3,0,4.7,0c0-14.2,0-28.2,0-42.3c3.2,0,6.3,0,9.5,0c0,1.5,0,3,0,4.6
+                  c1.6,0,3.1,0,4.7,0c0,1.6,0,3,0,4.6c1.6,0,3.1,0,4.7,0c0,1.7,0,3.1,0,4.8c9.6,0,18.9,0,28.3,0l0,0c0,1.5,0,3,0,4.6
+                  c-9.5,0-18.8,0-28.3,0c0-1.6,0-3,0-4.6c-1.6,0-3,0-4.7,0c0-1.6,0-3.1,0-4.8c-1.7,0-3.1,0-4.8,0c0-1.6,0-3.1,0-4.5
+                  c-1.6,0-3.1,0-4.7,0c0,12.6,0,25,0,37.6c-1.6,0-3.1,0-4.7,0c0,3.2,0,6.2,0,9.4C493.4,56.5,491.9,56.5,490.4,56.5L490.4,56.5z"/>
+                <path d="M1390.9,117.7c-1.5,0-3.1,0-4.6,0l0,0c0-3.1,0-6.1,0-9.3c-3.3,0-6.3,0-9.4,0c0,4.7,0,9.3,0,14.1c1.6,0,3.1,0,4.6,0l0,0
+                  c0,1.5,0,3,0,4.7c-3.1,0-6.2,0-9.3,0c0-6.2,0-12.4,0-18.8c1.5,0,3,0,4.6,0c0-1.6,0-3,0-4.7c1.7,0,3.1,0,4.7,0c0-4.8,0-9.4,0-14.1
+                  c1.6,0,3.1,0,4.6,0c0-1.7,0-3.2,0-4.8c-1.5,0-3,0-4.6,0c0-1.6,0-3,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7
+                  c-1.6,0-3.1,0-4.7,0c0-4.8,0-9.3,0-14.1c1.6,0,3.1,0,4.6,0l0,0c0,4.7,0,9.3,0,14.2c1.8,0,3.2,0,4.8,0c0,1.6,0,3,0,4.6
+                  c3.2,0,6.2,0,9.3,0c0,3.2,0,6.3,0,9.5c-1.5,0-3,0-4.4,0c0,6.3,0,12.5,0,18.8c1.5,0,2.9,0,4.5,0
+                  C1390.9,111.6,1390.9,114.6,1390.9,117.7L1390.9,117.7z"/>
+                <path d="M1140.3,28.2c1.5,0,3.1,0,4.8,0c0,14.2,0,28.3,0,42.5c6.3,0,12.4,0,18.8,0c0,1.6,0,3,0,4.8c1.7,0,3.3,0,4.8,0l0,0
+                  c0,1.5,0,3,0,4.5c-1.7,0-3.1,0-4.8,0c0-1.6,0-3,0-4.5c-6.4,0-12.5,0-18.8,0c0,4.7,0,9.3,0,14.1c-1.7,0-3.2,0-4.8,0
+                  C1140.3,69.1,1140.3,48.6,1140.3,28.2L1140.3,28.2z"/>
+                <path d="M867.4,56.5c1.5,0,3,0,4.6,0c0,6.3,0,12.5,0,18.8c-1.5,0-3,0-4.6,0c0,1.6,0,3,0,4.7c-1.6,0-3,0-4.7,0c0,1.6,0,3.1,0,4.7
+                  c-1.6,0-3.1,0-4.7,0c0,3.2,0,6.2,0,9.4c1.4,0,2.9,0,4.5,0c0,9.5,0,18.8,0,28.3c-1.5,0-3,0-4.5,0l0,0c0-9.4,0-18.8,0-28.4
+                  c-1.8,0-3.3,0-4.8,0c0-4.7,0-9.3,0-14.1c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.6,0c0-1.7,0-3.2,0-4.7
+                  c1.5,0,3,0,4.7,0c0,1.7,0,3.1,0,4.8c3.2,0,6.3,0,9.5,0c0,1.6,0,3.1,0,4.5c1.6,0,3.1,0,4.7,0c0-1.5,0-3,0-4.6c1.6,0,3.1,0,4.7,0
+                  C867.4,68.9,867.4,62.7,867.4,56.5L867.4,56.5z"/>
+                <path d="M1400.2,75.5c0-1.5,0-3.1,0-4.8c6.4,0,12.6,0,19,0c0-14.2,0-28.3,0-42.5c1.7,0,3.2,0,4.8,0l0,0c0,20.5,0,41,0,61.5
+                  c-1.5,0-3.1,0-4.8,0c0-4.9,0-9.5,0-14.2C1412.8,75.4,1406.5,75.4,1400.2,75.5L1400.2,75.5z"/>
+                <path d="M1159.3,127.3c-1.5,0-3.1,0-4.8,0c0-3.2,0-6.2,0-9.3c-1.6,0-3.1,0-4.8,0c0,3.1,0,6.1,0,9.3c-1.7,0-3.2,0-4.7,0l0,0
+                  c0-3.1,0-6.2,0-9.3c-4.9,0-9.5,0-14.2,0c0,1.6,0,3,0,4.5l0,0c-3.1,0-6.2,0-9.5,0c0,1.6,0,3.1,0,4.8c-3.3,0-6.4,0-9.5,0l0,0
+                  c0-1.5,0-3.1,0-4.8c3.2,0,6.3,0,9.5,0c0-1.6,0-3,0-4.7c1.6,0,3.1,0,4.8,0c0-1.7,0-3.1,0-4.8c9.5,0,18.8,0,28.3,0
+                  c0-3.2,0-6.2,0-9.2c1.6,0,3.1,0,4.7,0C1159.3,111.7,1159.3,119.5,1159.3,127.3L1159.3,127.3z"/>
+                <path d="M499.8,122.5c-1.5,0-2.9,0-4.5,0c0-9.4,0-18.8,0-28.3c1.5,0,3,0,4.5,0c0-3.2,0-6.2,0-9.4c-1.5,0-2.9,0-4.6,0
+                  c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.6,0-3,0-4.7c-1.6,0-3.1,0-4.7,0c0-6.4,0-12.5,0-18.9c1.6,0,3.1,0,4.6,0l0,0
+                  c0,6.2,0,12.4,0,18.9c1.7,0,3.1,0,4.8,0c0,1.7,0,3.1,0,4.6c3.2,0,6.2,0,9.4,0c0-1.6,0-3,0-4.6c1.6,0,3.1,0,4.7,0
+                  c0-1.6,0-3.1,0-4.7c1.7,0,3.1,0,4.6,0c0,1.5,0,3.1,0,4.8c-1.6,0-3.1,0-4.7,0c0,1.6,0,3,0,4.7c-1.6,0-3.1,0-4.7,0
+                  c0,4.8,0,9.3,0,14.1c-1.6,0-3.1,0-4.8,0C499.7,103.7,499.7,113.1,499.8,122.5L499.8,122.5z"/>
+                <path d="M1182.8,122.5c-1.5,0-3,0-4.7,0c0-1.6,0-3,0-4.5c-1.6,0-3,0-4.7,0c0,1.4,0,2.9,0,4.5c-1.7,0-3.3,0-4.8,0l0,0
+                  c0-1.5,0-3,0-4.7c1.7,0,3.1,0,4.8,0c0-3.2,0-6.3,0-9.5c1.6,0,3.1,0,4.6,0c0-6.3,0-12.4,0-18.8c-1.5,0-3,0-4.5,0
+                  c0-3.2,0-6.3,0-9.5c3.2,0,6.3,0,9.3,0l0,0c0,1.5,0,3.1,0,4.8c-1.6,0-3.1,0-4.6,0c0,1.6,0,3.1,0,4.7c1.5,0,3,0,4.6,0
+                  c0,4.8,0,9.4,0,14.2c1.6,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.6c1.6,0,3,0,4.6,0c0,6.3,0,12.5,0,18.8c-3,0-6.1,0-9.3,0
+                  C1182.8,125.6,1182.8,124.1,1182.8,122.5c1.5,0,3,0,4.6,0c0-4.7,0-9.4,0-14c-3.1,0-6.1,0-9.2,0c0,3.2,0,6.2,0,9.4
+                  c1.6,0,3,0,4.6,0C1182.8,119.6,1182.8,121,1182.8,122.5z"/>
+                <path d="M1419.2,127.3c-1.5,0-3,0-4.7,0c0-3.2,0-6.2,0-9.4c-1.6,0-3.1,0-4.7,0c0,3.1,0,6.2,0,9.4c-1.7,0-3.2,0-4.8,0l0,0
+                  c0-7.8,0-15.6,0-23.5c1.7,0,3.2,0,4.8,0c0,3.1,0,6.1,0,9.3c9.5,0,18.8,0,28.3,0c0,1.6,0,3,0,4.6c1.6,0,3.1,0,4.6,0
+                  c0,1.7,0,3.2,0,4.7l0,0c-3.1,0-6.3,0-9.4,0l0,0c0-1.5,0-3,0-4.6c-4.7,0-9.4,0-14.2,0C1419.2,121.1,1419.2,124.2,1419.2,127.3
+                  L1419.2,127.3z"/>
+                <path d="M1339,99c0,1.5,0,3,0,4.7c-4.6,0-9.2,0-13.9,0c0,3.3,0,6.4,0,9.5l0,0c-1.6,0-3.2,0-4.9,0c0-1.7,0-3.1,0-4.8
+                  c-11.1,0-22,0-33,0c0-1.6,0-3,0-4.6c-1.6,0-3.1,0-4.6,0c0-1.7,0-3.2,0-4.7c1.5,0,3,0,4.7,0c0,1.7,0,3.1,0,4.6
+                  c12.7,0,25.1,0,37.8,0c0-1.6,0-3,0-4.6C1329.9,99,1334.5,99,1339,99L1339,99z"/>
+                <path d="M1013.6,80c3.1,0,6.1,0,9.4,0c0-1.5,0-3,0-4.5c8,0,15.7,0,23.6,0c0,1.5,0,2.9,0,4.6c1.6,0,3,0,4.6,0c0,1.6,0,3.1,0,4.7
+                  c-1.5,0-2.9,0-4.6,0c0,1.6,0,3.1,0,4.8c-1.7,0-3.2,0-4.8,0l0,0c0-1.6,0-3.2,0-4.9c1.7,0,3.1,0,4.6,0c0-1.6,0-3,0-4.6
+                  c-7.8,0-15.6,0-23.4,0c0,1.6,0,3,0,4.6c3.1,0,6.2,0,9.4,0c0,1.7,0,3.2,0,4.8l0,0c-1.6,0-3.1,0-4.8,0c0,1.7,0,3.1,0,4.6l0,0
+                  c-1.5,0-3.1,0-4.8,0c0-3.2,0-6.2,0-9.4c-3.2,0-6.2,0-9.4,0C1013.6,83.1,1013.6,81.5,1013.6,80L1013.6,80z"/>
+                <path d="M1490,99c0,1.5,0,3,0,4.7c-4.7,0-9.3,0-14.1,0c0,1.6,0,3,0,4.6c-3.2,0-6.2,0-9.4,0c0,1.8,0,3.3,0,4.8l0,0
+                  c-1.6,0-3.2,0-4.9,0c0-1.7,0-3.2,0-4.8c-7.9,0-15.6,0-23.5,0c0-1.6,0-3.1,0-4.6c12.5,0,25,0,37.7,0c0-1.8,0-3.2,0-4.8
+                  C1480.7,99,1485.3,99,1490,99L1490,99z"/>
+                <path d="M853.3,9.5c0-1.5,0-3.1,0-4.7c3.2,0,6.2,0,9.4,0c0,14.1,0,28.1,0,42.3c1.6,0,3.1,0,4.8,0c0,3.3,0,6.4,0,9.5l0,0
+                  c-1.5,0-3.1,0-4.8,0c0-3.2,0-6.2,0-9.4c-1.6,0-3.1,0-4.7,0c0-12.6,0-25.1,0-37.6C856.3,9.4,854.8,9.4,853.3,9.5L853.3,9.5z"/>
+                <path d="M702.1,9.5c0-1.5,0-3.1,0-4.7c3.2,0,6.2,0,9.4,0c0,14.1,0,28.1,0,42.3c1.6,0,3.1,0,4.8,0c0,3.3,0,6.4,0,9.5l0,0
+                  c-1.5,0-3.1,0-4.8,0c0-3.2,0-6.2,0-9.4c-1.6,0-3.1,0-4.7,0c0-12.6,0-25.1,0-37.6C705.1,9.4,703.6,9.4,702.1,9.5L702.1,9.5z"/>
+                <path d="M547,14c0-1.5,0-2.9,0-4.6c1.6,0,3,0,4.7,0c0-1.6,0-3.1,0-4.7c3.2,0,6.2,0,9.5,0c0,14.1,0,28.3,0,42.4l0,0
+                  c-1.5,0-3.1,0-4.8,0c0-12.7,0-25.1,0-37.6c-1.6,0-3.1,0-4.7,0c0,1.5,0,3,0,4.5C550,14,548.5,14,547,14L547,14z"/>
+                <path d="M796.6,47.1c0-14.1,0-28.2,0-42.4c3.2,0,6.2,0,9.6,0c0,1.6,0,3.1,0,4.7l0,0c-1.6,0-3.2,0-4.9,0c0,12.6,0,25,0,37.7
+                  C799.7,47.1,798.2,47.1,796.6,47.1L796.6,47.1z"/>
+                <path d="M645.4,47.1c0-14.1,0-28.2,0-42.4c3.3,0,6.3,0,9.6,0c0,1.6,0,3.2,0,4.7l0,0c-1.5,0-3.1,0-4.8,0c0,12.6,0,25,0,37.7
+                  C648.5,47.1,647,47.1,645.4,47.1L645.4,47.1z"/>
+                <path d="M990.1,122.5c0,3.1,0,6.1,0,9.4c-1.6,0-3.1,0-4.8,0c0,1.7,0,3.1,0,4.7c-3.2,0-6.2,0-9.4,0c0-1.5,0-3,0-4.6
+                  c-1.6,0-3.1,0-4.7,0c0-1.6,0-3,0-4.6c-1.6,0-3.1,0-4.7,0c0-1.7,0-3.1,0-4.8c-4.8,0-9.5,0-14.1,0l0,0c0-1.5,0-3.1,0-4.8
+                  c-1.8,0-3.2,0-4.7,0c0-1.6,0-3,0-4.5c1.5,0,3,0,4.7,0c0,1.5,0,3,0,4.6c4.8,0,9.4,0,14.2,0c0,1.7,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0
+                  c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.5c3.2,0,6.2,0,9.4,0c0-3.1,0-6.1,0-9.3C987,122.5,988.5,122.5,990.1,122.5
+                  L990.1,122.5z"/>
+                <path d="M358.2,33c0-1.5,0-3.1,0-4.8c1.6,0,3,0,4.6,0c0-1.6,0-3,0-4.7c1.7,0,3.2,0,4.8,0c0-1.7,0-3.2,0-4.7l0,0
+                  c1.5,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.6c1.6,0,3.1,0,4.6,0c0-3.2,0-6.3,0-9.4l0,0c1.5,0,3.1,0,4.8,0c0,3.2,0,6.3,0,9.5
+                  c3.2,0,6.2,0,9.4,0c0,1.7,0,3.2,0,4.7l0,0c-9.4,0-18.7,0-28.3,0c0,1.7,0,3.2,0,4.8C361.1,33,359.6,33,358.2,33L358.2,33z"/>
+                <path d="M858.1,122.5c0,3.1,0,6.1,0,9.4c-1.6,0-3.1,0-4.7,0c0,1.7,0,3.1,0,4.7c-3.2,0-6.3,0-9.5,0c0-1.5,0-3,0-4.7
+                  c-9.6,0-18.9,0-28.3,0l0,0c0-1.5,0-3,0-4.5c9.5,0,18.8,0,28.3,0c0,1.5,0,3,0,4.4c3.2,0,6.2,0,9.4,0c0-3.1,0-6.1,0-9.3
+                  C855,122.5,856.5,122.5,858.1,122.5L858.1,122.5z"/>
+                <path d="M1226,108.3c0-3.1,0-6.1,0-9.4c1.6,0,3,0,4.6,0c0-1.7,0-3.1,0-4.8c-3.1,0-6.1,0-9.3,0c0-1.6,0-3,0-4.6c-1.6,0-3,0-4.7,0
+                  c0-1.7,0-3.3,0-4.8l0,0c1.5,0,3,0,4.7,0c0,1.6,0,3.1,0,4.6c3.2,0,6.3,0,9.5,0c0-1.6,0-3,0-4.6c3.3,0,6.3,0,9.4,0l0,0
+                  c0,3.1,0,6.2,0,9.4c-1.7,0-3.3,0-4.8,0c0-1.5,0-3,0-4.5c-1.6,0-3,0-4.5,0c0,1.5,0,3,0,4.5c1.6,0,3.1,0,4.5,0c0,1.5,0,3.1,0,4.8
+                  c-1.6,0-3.1,0-4.7,0c0,3.2,0,6.2,0,9.3C1229,108.3,1227.5,108.3,1226,108.3L1226,108.3z"/>
+                <path d="M1273,122.5c-1.5,0-2.9,0-4.6,0c0,3.2,0,6.2,0,9.4c-1.6,0-3.1,0-4.8,0c0,1.6,0,3.1,0,4.6c-3.2,0-6.2,0-9.4,0
+                  c0-1.5,0-3,0-4.6c-1.6,0-3.1,0-4.8,0c0-1.7,0-3.2,0-4.7l0,0c1.5,0,3.1,0,4.8,0c0,1.6,0,3,0,4.5c3.2,0,6.2,0,9.3,0
+                  c0-3.1,0-6.1,0-9.3c-3.1,0-6.1,0-9.3,0c0-1.6,0-3.1,0-4.6c6.2,0,12.4,0,18.7,0C1273,119.6,1273,121,1273,122.5L1273,122.5z"/>
+                <path d="M1097.8,113.1c0-1.5,0-3.1,0-4.8c-3.1,0-6.1,0-9.4,0c0-1.6,0-3.1,0-4.6l0,0c12.6,0,25.1,0,37.7,0c0,1.5,0,3,0,4.6
+                  c-8,0-15.7,0-23.6,0c0,1.6,0,3.1,0,4.7C1100.9,113.1,1099.4,113.1,1097.8,113.1L1097.8,113.1z"/>
+                <path d="M1306.1,28.2c1.5,0,3,0,4.7,0c0,4.7,0,9.3,0,14.1c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0
+                  c0,1.6,0,3,0,4.7c1.6,0,3.1,0,4.7,0c0,1.7,0,3.1,0,4.8c3.2,0,6.3,0,9.5,0c0,1.7,0,3.3,0,4.8l0,0c-3.1,0-6.2,0-9.5,0
+                  c0-1.7,0-3.2,0-4.8c-1.7,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.7,0-3.1,0-4.7c-1.6,0-3,0-4.7,0
+                  c0-1.6,0-3.1,0-4.7c-1.7,0-3.1,0-4.7,0C1306.2,37.5,1306.2,32.8,1306.1,28.2L1306.1,28.2z"/>
+                <path d="M1329.7,122.5c0,1.5,0,3.1,0,4.7c-6.3,0-12.4,0-18.8,0c0-1.5,0-3,0-4.7c-4.8,0-9.5,0-14.1,0l0,0c0-1.5,0-3,0-4.7
+                  c4.7,0,9.3,0,14.1,0c0-1.7,0-3.1,0-4.6c1.7,0,3.1,0,4.6,0c0,1.6,0,3,0,4.7c-1.5,0-3,0-4.5,0c0,1.6,0,3.1,0,4.6
+                  C1317.3,122.5,1323.5,122.5,1329.7,122.5L1329.7,122.5z"/>
+                <path d="M542.2,131.8c-9.3,0-18.7,0-28.2,0c0,1.7,0,3.1,0,4.7c-3.2,0-6.2,0-9.5,0c0-1.6,0-3.1,0-4.7l0,0c3.1,0,6.2,0,9.4,0
+                  c0-1.6,0-3,0-4.5c9.5,0,18.8,0,28.2,0C542.2,128.9,542.2,130.4,542.2,131.8L542.2,131.8z"/>
+                <path d="M815.6,18.8c9.3,0,18.7,0,28.2,0c0-1.6,0-3.1,0-4.8c1.7,0,3.1,0,4.7,0c0-1.6,0-3,0-4.6c1.7,0,3.2,0,4.8,0l0,0
+                  c0,1.5,0,3,0,4.6c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.8c-1.7,0-3.1,0-4.7,0c0,1.6,0,3,0,4.5c-9.5,0-18.8,0-28.2,0
+                  C815.6,21.7,815.6,20.3,815.6,18.8L815.6,18.8z"/>
+                <path d="M561.2,94.2c1.5,0,2.9,0,4.5,0c0,12.6,0,25,0,37.7c-1.5,0-3,0-4.5,0l0,0C561.2,119.3,561.2,106.7,561.2,94.2L561.2,94.2z
+                  "/>
+                <path d="M796.6,131.8c-1.5,0-2.9,0-4.5,0c0-12.5,0-25,0-37.7c1.5,0,3,0,4.5,0l0,0C796.6,106.7,796.6,119.3,796.6,131.8
+                  L796.6,131.8z"/>
+                <path d="M999.4,131.8c-1.5,0-2.9,0-4.6,0c0-3.1,0-6.1,0-9.4c-1.7,0-3.2,0-4.7,0l0,0c0-1.5,0-3.1,0-4.8c6.4,0,12.5,0,18.8,0
+                  c0-1.6,0-3,0-4.5c1.6,0,3.1,0,4.7,0c0,1.6,0,3,0,4.5l0,0c-1.5,0-3.1,0-4.8,0c0,1.8,0,3.2,0,4.8c-3.2,0-6.2,0-9.4,0
+                  C999.4,125.8,999.4,128.8,999.4,131.8L999.4,131.8z"/>
+                <path d="M1240.1,122.5c0,1.5,0,3.1,0,4.8c-3.2,0-6.2,0-9.4,0c0,1.6,0,3,0,4.5c-3.2,0-6.2,0-9.5,0c0-1.5,0-2.9,0-4.5
+                  c-1.6,0-3,0-4.6,0c0-4.7,0-9.3,0-14.2c1.5,0,3,0,4.5,0l0,0c0,4.7,0,9.3,0,14.1c3.3,0,6.3,0,9.6,0c0-1.6,0-3.1,0-4.7
+                  C1234,122.5,1237.1,122.5,1240.1,122.5L1240.1,122.5z"/>
+                <path d="M650.2,122.5c-1.5,0-3,0-4.6,0c0-9.4,0-18.8,0-28.3c1.6,0,3.1,0,4.6,0l0,0C650.2,103.6,650.2,113.1,650.2,122.5
+                  L650.2,122.5z"/>
+                <path d="M706.9,94.2c1.5,0,2.9,0,4.5,0c0,9.5,0,18.8,0,28.3c-1.5,0-3,0-4.5,0l0,0C706.9,113.1,706.9,103.6,706.9,94.2L706.9,94.2
+                  z"/>
+                <path d="M664.4,18.8c9.4,0,18.9,0,28.3,0l0,0c0,1.5,0,3,0,4.5c-9.5,0-18.9,0-28.3,0C664.4,21.7,664.4,20.3,664.4,18.8L664.4,18.8
+                  z"/>
+                <path d="M664.4,136.6c0,1.5,0,3,0,4.6c-3.1,0-6.1,0-9.4,0c0-1.5,0-3,0-4.6c-1.7,0-3.1,0-4.7,0c0-4.8,0-9.5,0-14.2l0,0
+                  c1.5,0,3.1,0,4.8,0c0,4.8,0,9.4,0,14.2C658.3,136.7,661.3,136.7,664.4,136.6L664.4,136.6z"/>
+                <path d="M1112,28.2c1.5,0,3.1,0,4.8,0c0,3.2,0,6.2,0,9.3c3.2,0,6.2,0,9.3,0c0-1.4,0-2.9,0-4.5c1.7,0,3.3,0,4.9,0l0,0
+                  c0,1.5,0,3,0,4.7c-1.7,0-3.1,0-4.8,0c0,1.6,0,3.1,0,4.6c-3.2,0-6.2,0-9.4,0c0-1.5,0-3,0-4.7c-1.7,0-3.1,0-4.8,0
+                  C1112,34.3,1112,31.2,1112,28.2L1112,28.2z"/>
+                <path d="M716.2,75.4c0,1.5,0,2.9,0,4.6c-1.6,0-3,0-4.7,0c0,1.7,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,3.2,0,6.3,0,9.4l0,0
+                  c-1.6,0-3.1,0-4.8,0c0-4.9,0-9.5,0-14.2c3.1,0,6.2,0,9.5,0c0-1.6,0-3,0-4.5C713.2,75.5,714.7,75.5,716.2,75.4L716.2,75.4z"/>
+                <path d="M1065,70.7c0-1.5,0-3,0-4.7c1.5,0,3,0,4.6,0c0-1.6,0-3.1,0-4.7c3.2,0,6.2,0,9.4,0c0-1.6,0-3.1,0-4.7c3.3,0,6.4,0,9.5,0
+                  l0,0c0,1.5,0,3.1,0,4.8c-3.2,0-6.2,0-9.4,0c0,1.6,0,3.1,0,4.7c-3.2,0-6.3,0-9.5,0c0,1.7,0,3.1,0,4.7
+                  C1067.9,70.6,1066.4,70.6,1065,70.7L1065,70.7z"/>
+                <path d="M919.3,94.2c-1.5,0-3,0-4.7,0c0-1.5,0-3,0-4.6c-1.6,0-3,0-4.6,0c0-6.3,0-12.5,0-18.9c1.5,0,3,0,4.5,0l0,0
+                  c0,6.2,0,12.5,0,18.9c1.8,0,3.2,0,4.8,0C919.3,91.2,919.3,92.7,919.3,94.2L919.3,94.2z"/>
+                <path d="M1348.6,70.7c1.5,0,2.9,0,4.5,0c0,6.3,0,12.5,0,18.9c-1.5,0-2.9,0-4.5,0c0,1.6,0,3,0,4.6c-1.7,0-3.3,0-4.9,0l0,0
+                  c0-1.5,0-3,0-4.7c1.7,0,3.2,0,4.8,0C1348.6,83.1,1348.6,76.8,1348.6,70.7L1348.6,70.7z"/>
+                <path d="M792.1,75.4c-1.5,0-3.1,0-4.7,0c0-6.4,0-12.5,0-18.9c1.6,0,3.2,0,4.7,0l0,0C792.1,62.8,792.1,69.1,792.1,75.4L792.1,75.4
+                  z"/>
+                <path d="M640.9,75.4c-1.5,0-3.1,0-4.7,0c0-6.4,0-12.5,0-18.9c1.6,0,3.1,0,4.7,0l0,0C640.9,62.8,640.9,69.1,640.9,75.4L640.9,75.4
+                  z"/>
+                <path d="M1065,89.6c-1.5,0-3.1,0-4.7,0c0-6.4,0-12.5,0-18.9c1.6,0,3.1,0,4.7,0l0,0C1064.9,77,1064.9,83.3,1065,89.6L1065,89.6z"
+                  />
+                <path d="M565.7,56.5c1.5,0,3.1,0,4.7,0c0,6.3,0,12.5,0,18.9c-1.6,0-3.2,0-4.7,0l0,0C565.8,69.1,565.8,62.8,565.7,56.5L565.7,56.5
+                  z"/>
+                <path d="M650.2,94.2c0-3.1,0-6.1,0-9.3c-1.6,0-3,0-4.8,0c0-1.7,0-3.3,0-4.8l0,0c3.2,0,6.4,0,9.6,0c0,4.7,0,9.4,0,14.2
+                  C653.2,94.2,651.7,94.2,650.2,94.2L650.2,94.2z"/>
+                <path d="M952.4,122.5c0,1.5,0,3.1,0,4.7c-6.4,0-12.5,0-18.9,0c0-1.6,0-3.1,0-4.7l0,0C939.8,122.5,946.1,122.5,952.4,122.5
+                  L952.4,122.5z"/>
+                <path d="M716.2,56.5c1.5,0,3,0,4.7,0c0,6.3,0,12.5,0,18.9c-1.6,0-3.1,0-4.7,0l0,0C716.2,69.1,716.2,62.8,716.2,56.5L716.2,56.5z"
+                  />
+                <path d="M961.7,28.2c1.5,0,3,0,4.7,0c0,3.1,0,6.2,0,9.4c3.3,0,6.4,0,9.5,0l0,0c0,1.6,0,3.2,0,4.7c-3.3,0-6.3,0-9.5,0
+                  c0-1.6,0-3,0-4.7c-1.6,0-3.1,0-4.7,0C961.8,34.3,961.8,31.2,961.7,28.2L961.7,28.2z"/>
+                <path d="M952.4,42.3c0-4.7,0-9.3,0-14.1c1.5,0,2.9,0,4.6,0c0-1.6,0-3.1,0-4.7c1.7,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.6l0,0
+                  c-1.5,0-3,0-4.7,0c0,4.8,0,9.4,0,14.2C955.3,42.3,953.9,42.3,952.4,42.3L952.4,42.3z"/>
+                <path d="M1475.8,56.5c3.1,0,6.1,0,9.4,0c0,1.6,0,3,0,4.7c3.2,0,6.2,0,9.4,0c0,1.7,0,3.2,0,4.7l0,0c-3.1,0-6.2,0-9.4,0
+                  c0-1.6,0-3,0-4.6c-3.2,0-6.2,0-9.3,0C1475.8,59.5,1475.8,58,1475.8,56.5L1475.8,56.5z"/>
+                <path d="M1187.6,61.3c1.5,0,2.9,0,4.5,0c0,4.7,0,9.3,0,14c-1.5,0-2.9,0-4.5,0c0,1.6,0,3,0,4.7c-1.7,0-3.3,0-4.8,0l0,0
+                  c0-1.5,0-3,0-4.7c1.7,0,3.1,0,4.8,0C1187.6,70.5,1187.6,65.9,1187.6,61.3L1187.6,61.3z"/>
+                <path d="M687.9,131.8c-6.2,0-12.5,0-18.7,0l0,0c0-1.5,0-3,0-4.5c6.3,0,12.4,0,18.7,0C687.9,128.9,687.9,130.4,687.9,131.8
+                  L687.9,131.8z"/>
+                <path d="M1112,127.3c0,1.5,0,2.9,0,4.5c-6.3,0-12.4,0-18.7,0c0-1.6,0-3,0-4.5l0,0C1099.5,127.3,1105.8,127.3,1112,127.3
+                  L1112,127.3z"/>
+                <path d="M1471,127.3c0,1.5,0,2.9,0,4.5c-6.2,0-12.4,0-18.7,0c0-1.5,0-3,0-4.5l0,0C1458.6,127.3,1464.8,127.3,1471,127.3
+                  L1471,127.3z"/>
+                <path d="M1041.9,113.1c1.5,0,3,0,4.6,0c0,4.7,0,9.3,0,14.1c-1.6,0-3.1,0-4.6,0l0,0C1041.9,122.6,1041.9,117.8,1041.9,113.1
+                  L1041.9,113.1z"/>
+                <path d="M1023,122.5c-1.5,0-2.9,0-4.6,0c0,1.7,0,3.2,0,4.8c-1.7,0-3.3,0-4.8,0l0,0c0-3.2,0-6.4,0-9.6l0,0c3.1,0,6.2,0,9.4,0
+                  C1022.9,119.5,1022.9,121,1023,122.5L1023,122.5z"/>
+                <path d="M1102.6,42.3c0-4.6,0-9.3,0-14.2c1.7,0,3.2,0,4.8,0l0,0c0,4.7,0,9.4,0,14.2C1105.6,42.3,1104.1,42.3,1102.6,42.3
+                  L1102.6,42.3z"/>
+                <path d="M561.2,80c0,4.7,0,9.5,0,14.2l0,0c-1.6,0-3.1,0-4.8,0c0-4.9,0-9.5,0-14.2C558,80,559.6,80,561.2,80L561.2,80z"/>
+                <path d="M1456.9,28.2c1.5,0,3.1,0,4.8,0c0,4.8,0,9.5,0,14.2l0,0c-1.5,0-3.1,0-4.8,0C1456.9,37.5,1456.9,32.8,1456.9,28.2
+                  L1456.9,28.2z"/>
+                <path d="M796.6,94.2c0-4.7,0-9.5,0-14.2l0,0c1.6,0,3.2,0,4.8,0c0,4.7,0,9.4,0,14.2C799.7,94.2,798.2,94.2,796.6,94.2L796.6,94.2z
+                  "/>
+                <path d="M706.9,122.5c0,4.6,0,9.3,0,14.2c-1.7,0-3.2,0-4.8,0l0,0c0-4.7,0-9.3,0-14.2C703.8,122.5,705.3,122.5,706.9,122.5
+                  L706.9,122.5z"/>
+                <path d="M938.2,103.8c-4.7,0-9.3,0-14.2,0c0-1.7,0-3.3,0-4.8l0,0c4.6,0,9.3,0,14.2,0C938.2,100.7,938.2,102.2,938.2,103.8
+                  L938.2,103.8z"/>
+                <path d="M1088.5,103.8c-4.7,0-9.3,0-14.2,0c0-1.7,0-3.3,0-4.8l0,0c4.7,0,9.3,0,14.2,0C1088.5,100.7,1088.5,102.2,1088.5,103.8
+                  L1088.5,103.8z"/>
+                <path d="M1173.4,70.7c0-1.5,0-3,0-4.7c1.5,0,3,0,4.6,0c0-1.6,0-3,0-4.7c1.6,0,3.1,0,4.7,0c0-1.7,0-3.1,0-4.6c1.6,0,3.1,0,4.8,0
+                  c0,1.6,0,3.1,0,4.7l0,0c-1.6,0-3.1,0-4.9,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.6
+                  C1176.4,70.6,1174.9,70.6,1173.4,70.7L1173.4,70.7z"/>
+                <path d="M1433.3,33c1.5,0,3,0,4.7,0c0,1.5,0,3,0,4.6c3.3,0,6.4,0,9.5,0l0,0c0,1.6,0,3.2,0,4.7c-3.3,0-6.3,0-9.5,0
+                  c0-1.6,0-3,0-4.7c-1.6,0-3.1,0-4.7,0C1433.4,35.9,1433.4,34.4,1433.3,33L1433.3,33z"/>
+                <path d="M1093.3,127.3c-1.5,0-3.1,0-4.7,0c0-3.2,0-6.2,0-9.4c1.5,0,3,0,4.6,0c0-1.6,0-3.1,0-4.8c1.7,0,3.2,0,4.7,0l0,0
+                  c0,1.5,0,3.1,0,4.8c-1.6,0-3,0-4.6,0C1093.3,121.2,1093.3,124.2,1093.3,127.3L1093.3,127.3z"/>
+                <path d="M1013.6,127.3c0,1.5,0,2.9,0,4.6c-1.6,0-3,0-4.7,0c0,1.6,0,3.1,0,4.7c-3.2,0-6.2,0-9.5,0c0-1.6,0-3.1,0-4.7l0,0
+                  c3.1,0,6.2,0,9.5,0c0-1.6,0-3,0-4.6C1010.6,127.3,1012.1,127.3,1013.6,127.3L1013.6,127.3z"/>
+                <path d="M1292,127.3c0,1.5,0,2.9,0,4.6c-1.6,0-3,0-4.7,0c0,1.6,0,3.1,0,4.7c-3.2,0-6.2,0-9.5,0c0-1.6,0-3.1,0-4.7l0,0
+                  c3.1,0,6.2,0,9.5,0c0-1.6,0-3,0-4.6C1289,127.3,1290.5,127.3,1292,127.3L1292,127.3z"/>
+                <path d="M1296.8,37.5c0-3.1,0-6.1,0-9.3c1.5,0,2.9,0,4.6,0c0-1.6,0-3.1,0-4.7c1.7,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.6l0,0
+                  c-1.5,0-3,0-4.8,0c0,3.2,0,6.3,0,9.4C1299.7,37.5,1298.2,37.5,1296.8,37.5L1296.8,37.5z"/>
+                <path d="M914.5,70.7c0-1.5,0-3,0-4.7c1.7,0,3.2,0,4.8,0c0-1.6,0-3,0-4.6c3.2,0,6.3,0,9.4,0l0,0c0,1.5,0,3,0,4.7
+                  c-3.2,0-6.2,0-9.3,0c0,1.6,0,3.1,0,4.7C917.6,70.6,916,70.6,914.5,70.7L914.5,70.7z"/>
+                <path d="M1249.5,127.3c-1.5,0-3,0-4.7,0c0-1.6,0-3.1,0-4.8c-1.7,0-3.2,0-4.7,0l0,0c0-1.5,0-3,0-4.6c3.2,0,6.3,0,9.4,0
+                  C1249.5,121,1249.5,124.2,1249.5,127.3L1249.5,127.3z"/>
+                <path d="M1145.1,127.3c0,1.5,0,2.9,0,4.5c-3.2,0-6.3,0-9.5,0c0-1.5,0-2.9,0-4.5c-1.6,0-3,0-4.6,0c0-1.7,0-3.3,0-4.9l0,0
+                  c1.5,0,3,0,4.7,0c0,1.7,0,3.2,0,4.8C1138.9,127.3,1142,127.3,1145.1,127.3L1145.1,127.3z"/>
+                <path d="M1287.2,37.5c3.2,0,6.4,0,9.6,0l0,0c0,1.6,0,3.1,0,4.7c-3.3,0-6.3,0-9.6,0C1287.2,40.6,1287.2,39.1,1287.2,37.5
+                  L1287.2,37.5z"/>
+                <path d="M1471,117.7c1.5,0,3.1,0,4.7,0c0,3.3,0,6.3,0,9.6c-1.6,0-3.1,0-4.7,0l0,0C1471,124.1,1471,120.9,1471,117.7L1471,117.7z"
+                  />
+                <path d="M1032.6,127.3c-3.1,0-6.2,0-9.6,0c0-1.7,0-3.2,0-4.8l0,0c3.1,0,6.3,0,9.6,0C1032.5,124.2,1032.5,125.8,1032.6,127.3
+                  L1032.6,127.3z"/>
+                <path d="M547,141.4c-1.5,0-3.1,0-4.8,0c0-3.3,0-6.5,0-9.6l0,0c1.6,0,3.1,0,4.8,0C547,135.3,547,138.4,547,141.4L547,141.4z"/>
+                <path d="M1452.3,127.3c-3.1,0-6.2,0-9.6,0c0-1.7,0-3.2,0-4.8l0,0c3.1,0,6.3,0,9.6,0C1452.3,124.2,1452.3,125.8,1452.3,127.3
+                  L1452.3,127.3z"/>
+                <path d="M561.2,131.8c0,3.1,0,6.3,0,9.6c-1.7,0-3.3,0-4.8,0l0,0c0-3.1,0-6.3,0-9.6C558.1,131.9,559.7,131.9,561.2,131.8
+                  L561.2,131.8z"/>
+                <path d="M815.6,131.8c0,3.1,0,6.2,0,9.6c-1.7,0-3.2,0-4.8,0l0,0c0-3.1,0-6.3,0-9.6C812.5,131.9,814.1,131.9,815.6,131.8
+                  L815.6,131.8z"/>
+                <path d="M801.4,141.4c-1.5,0-3.1,0-4.8,0c0-3.3,0-6.5,0-9.6l0,0c1.6,0,3.1,0,4.8,0C801.4,135.3,801.4,138.4,801.4,141.4
+                  L801.4,141.4z"/>
+                <path d="M928.6,61.3c0-1.5,0-3.1,0-4.8c3.3,0,6.5,0,9.6,0l0,0c0,1.5,0,3.1,0,4.8C934.8,61.3,931.7,61.3,928.6,61.3L928.6,61.3z"
+                  />
+                <path d="M702.1,136.6c0,1.5,0,3,0,4.6c-3.1,0-6.1,0-9.3,0c0-1.6,0-3.1,0-4.7l0,0C695.8,136.7,699,136.7,702.1,136.6L702.1,136.6z
+                  "/>
+                <path d="M504.6,131.8c-1.5,0-3,0-4.8,0c0-3.2,0-6.3,0-9.4l0,0c1.6,0,3.1,0,4.8,0C504.5,125.8,504.5,128.8,504.6,131.8
+                  L504.6,131.8z"/>
+                <path d="M1447.5,37.5c0-3,0-6.1,0-9.4c1.7,0,3.2,0,4.8,0l0,0c0,3.1,0,6.2,0,9.4C1450.5,37.5,1449,37.5,1447.5,37.5L1447.5,37.5z"
+                  />
+                <path d="M1277.8,131.8c-1.5,0-3,0-4.8,0c0-3.2,0-6.3,0-9.4l0,0c1.6,0,3.1,0,4.8,0C1277.8,125.8,1277.8,128.8,1277.8,131.8
+                  L1277.8,131.8z"/>
+                <path d="M938.2,56.5c0-1.5,0-3,0-4.7c1.5,0,3,0,4.6,0c0-1.6,0-3,0-4.6c1.7,0,3.2,0,4.8,0l0,0c0,1.5,0,3,0,4.7c-1.7,0-3.1,0-4.8,0
+                  c0,1.6,0,3.1,0,4.7C941.2,56.5,939.7,56.5,938.2,56.5L938.2,56.5z"/>
+                <path d="M1325.1,113.1c1.5,0,2.9,0,4.6,0c0,1.6,0,3,0,4.7c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0l0,0
+                  c0-1.5,0-3,0-4.7c-1.6,0-3.1,0-4.6,0C1325.1,116.1,1325.1,114.6,1325.1,113.1L1325.1,113.1z"/>
+                <path d="M1499.3,89.6c0,1.5,0,2.9,0,4.6c-1.6,0-3,0-4.7,0c0,1.6,0,3.1,0,4.8c-1.7,0-3.2,0-4.7,0l0,0c0-1.5,0-3.1,0-4.8
+                  c1.6,0,3,0,4.6,0c0-1.6,0-3.1,0-4.6C1496.3,89.6,1497.9,89.6,1499.3,89.6L1499.3,89.6z"/>
+                <path d="M1131,33c0-1.5,0-3.1,0-4.8c1.6,0,3,0,4.6,0c0-1.6,0-3,0-4.6c1.7,0,3.1,0,4.8,0c0,1.5,0,3,0,4.5l0,0c-1.5,0-3,0-4.8,0
+                  c0,1.7,0,3.2,0,4.8C1133.9,33,1132.4,33,1131,33L1131,33z"/>
+                <path d="M1381.5,61.3c1.5,0,3,0,4.7,0c0,1.5,0,3,0,4.6c1.6,0,3,0,4.6,0c0,1.7,0,3.2,0,4.8l0,0c-1.5,0-3,0-4.7,0
+                  c0-1.7,0-3.1,0-4.8c-1.6,0-3.1,0-4.7,0C1381.5,64.2,1381.5,62.7,1381.5,61.3L1381.5,61.3z"/>
+                <path d="M975.9,37.5c0-1.5,0-2.9,0-4.5c1.6,0,3,0,4.7,0c0-1.6,0-3.1,0-4.8c1.7,0,3.2,0,4.7,0l0,0c0,1.6,0,3.1,0,4.8
+                  c-1.6,0-3,0-4.7,0c0,1.6,0,3,0,4.5C978.9,37.5,977.4,37.5,975.9,37.5L975.9,37.5z"/>
+                <path d="M1405,127.3c0,1.5,0,2.9,0,4.5c-1.6,0-3.1,0-4.7,0c0-1.5,0-2.9,0-4.5c-1.6,0-3,0-4.6,0c0-1.7,0-3.3,0-4.9l0,0
+                  c1.5,0,3,0,4.7,0c0,1.7,0,3.2,0,4.8C1402,127.3,1403.5,127.3,1405,127.3L1405,127.3z"/>
+                <path d="M640.9,56.5c0-3.1,0-6.1,0-9.4c1.6,0,3.1,0,4.6,0l0,0c0,3.1,0,6.2,0,9.4C643.8,56.5,642.3,56.5,640.9,56.5L640.9,56.5z"
+                  />
+                <path d="M1334.5,61.3c3.1,0,6.1,0,9.4,0c0,1.6,0,3.1,0,4.6l0,0c-3.1,0-6.2,0-9.4,0C1334.5,64.2,1334.5,62.7,1334.5,61.3
+                  L1334.5,61.3z"/>
+                <path d="M1032.5,99c1.5,0,2.9,0,4.6,0c0,3.2,0,6.3,0,9.4l0,0c-1.5,0-3,0-4.6,0C1032.6,105.1,1032.6,102,1032.5,99L1032.5,99z"/>
+                <path d="M1041.9,89.6c0,1.5,0,2.9,0,4.6c-3.2,0-6.3,0-9.4,0l0,0c0-1.5,0-3.1,0-4.6l0,0C1035.7,89.6,1038.8,89.6,1041.9,89.6
+                  L1041.9,89.6z"/>
+                <path d="M561.2,47.1c1.5,0,2.9,0,4.6,0c0,3.2,0,6.3,0,9.4l0,0c-1.5,0-3,0-4.6,0C561.2,53.2,561.2,50.2,561.2,47.1L561.2,47.1z"/>
+                <path d="M792.1,56.5c0-3.1,0-6.1,0-9.4c1.6,0,3.1,0,4.6,0l0,0c0,3.1,0,6.2,0,9.4C795,56.5,793.5,56.5,792.1,56.5L792.1,56.5z"/>
+                <path d="M1428.5,127.3c0,1.5,0,2.9,0,4.5c-3.1,0-6.1,0-9.3,0c0-1.5,0-3,0-4.5l0,0C1422.3,127.3,1425.4,127.3,1428.5,127.3
+                  L1428.5,127.3z"/>
+                <path d="M1041.9,127.3c0,1.5,0,2.9,0,4.5c-3.1,0-6.2,0-9.3,0c0-1.6,0-3,0-4.5l0,0C1035.7,127.3,1038.8,127.3,1041.9,127.3
+                  L1041.9,127.3z"/>
+                <path d="M810.8,14c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C810.8,17.1,810.8,15.5,810.8,14L810.8,14z"/>
+                <path d="M1221.2,113.1c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.5,0,3.1,0,4.8C1224.3,113.1,1222.7,113.1,1221.2,113.1
+                  L1221.2,113.1z"/>
+                <path d="M985.3,28.2c0-1.5,0-3,0-4.6c1.6,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.6l0,0C988.5,28.2,986.9,28.2,985.3,28.2L985.3,28.2z"/>
+                <path d="M659.6,14c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C659.6,17.1,659.6,15.5,659.6,14L659.6,14z"/>
+                <path d="M1461.7,42.3c1.5,0,3,0,4.8,0c0,1.7,0,3.2,0,4.8l0,0c-1.6,0-3.1,0-4.8,0C1461.7,45.3,1461.7,43.8,1461.7,42.3
+                  L1461.7,42.3z"/>
+                <path d="M1343.8,94.2c0,1.5,0,3.1,0,4.8c-1.7,0-3.2,0-4.8,0l0,0c0-1.6,0-3.1,0-4.8C1340.8,94.2,1342.3,94.2,1343.8,94.2
+                  L1343.8,94.2z"/>
+                <path d="M1097.8,47.1c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.5,0,3.1,0,4.8C1100.9,47.1,1099.4,47.1,1097.8,47.1
+                  L1097.8,47.1z"/>
+                <path d="M1074.3,99c-1.5,0-3,0-4.8,0c0-1.7,0-3.2,0-4.8l0,0c1.5,0,3.1,0,4.8,0C1074.3,95.9,1074.3,97.4,1074.3,99L1074.3,99z"/>
+                <path d="M692.7,18.8c0-1.5,0-3.1,0-4.8c1.7,0,3.2,0,4.8,0l0,0c0,1.6,0,3.1,0,4.8C695.7,18.8,694.2,18.8,692.7,18.8L692.7,18.8z"
+                  />
+                <path d="M1032.5,94.2c0,1.6,0,3.2,0,4.8l0,0c-1.5,0-3.1,0-4.8,0c0-1.7,0-3.3,0-4.8l0,0C1029.4,94.2,1031,94.2,1032.5,94.2
+                  L1032.5,94.2z"/>
+                <path d="M542.2,18.8c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.5,0,3.1,0,4.8C545.3,18.8,543.8,18.8,542.2,18.8L542.2,18.8z"
+                  />
+                <path d="M692.7,136.6c-1.5,0-3.1,0-4.8,0c0-1.7,0-3.2,0-4.8l0,0c1.6,0,3.1,0,4.8,0C692.7,133.6,692.7,135.2,692.7,136.6
+                  L692.7,136.6z"/>
+                <path d="M669.2,131.8c0,1.5,0,3.1,0,4.8c-1.7,0-3.3,0-4.8,0l0,0c0-1.5,0-3.1,0-4.8C666.1,131.9,667.7,131.9,669.2,131.8
+                  L669.2,131.8z"/>
+                <path d="M1386.3,117.7c0,1.5,0,3.1,0,4.8c-1.7,0-3.3,0-4.8,0l0,0c0-1.5,0-3.1,0-4.8C1383.2,117.7,1384.8,117.7,1386.3,117.7
+                  L1386.3,117.7z"/>
+                <path d="M1395.7,122.5c-1.5,0-3.1,0-4.8,0c0-1.7,0-3.2,0-4.8l0,0c1.6,0,3.1,0,4.8,0C1395.7,119.5,1395.7,121,1395.7,122.5
+                  L1395.7,122.5z"/>
+                <path d="M1088.5,56.5c0-1.5,0-3,0-4.8c1.7,0,3.2,0,4.8,0l0,0c0,1.6,0,3.1,0,4.8C1091.5,56.5,1090,56.5,1088.5,56.5L1088.5,56.5z"
+                  />
+                <path d="M367.5,4.7c1.5,0,3,0,4.8,0c0,1.7,0,3.2,0,4.8l0,0c-1.6,0-3.1,0-4.8,0C367.5,7.6,367.5,6.1,367.5,4.7L367.5,4.7z"/>
+                <path d="M1390.9,70.7c1.5,0,3.1,0,4.8,0c0,1.7,0,3.2,0,4.8l0,0c-1.6,0-3.1,0-4.8,0C1390.9,73.6,1390.9,72.1,1390.9,70.7
+                  L1390.9,70.7z"/>
+                <path d="M1216.6,84.8c-1.5,0-3.1,0-4.7,0c0-1.6,0-3,0-4.8c1.6,0,3.2,0,4.7,0l0,0C1216.6,81.6,1216.6,83.2,1216.6,84.8
+                  L1216.6,84.8z"/>
+                <path d="M391,28.2c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C391,31.2,391,29.7,391,28.2L391,28.2z"/>
+                <path d="M1471,51.7c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C1471,54.8,1471,53.2,1471,51.7L1471,51.7z"/>
+                <path d="M924.1,99c-1.5,0-3.1,0-4.8,0c0-1.7,0-3.3,0-4.8l0,0c1.6,0,3.1,0,4.8,0C924.1,96,924.1,97.5,924.1,99L924.1,99z"/>
+                <path d="M1168.6,122.5c0,1.5,0,3.1,0,4.8c-1.7,0-3.2,0-4.8,0l0,0c0-1.6,0-3.1,0-4.8C1165.6,122.5,1167.1,122.5,1168.6,122.5
+                  L1168.6,122.5z"/>
+                <path d="M947.6,47.1c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.6,0,3.1,0,4.8C950.6,47.1,949.1,47.1,947.6,47.1L947.6,47.1z"
+                  />
+                <path d="M1376.7,61.3c0-1.5,0-3.1,0-4.7c1.7,0,3.1,0,4.8,0c0,1.6,0,3.1,0,4.7l0,0C1379.9,61.3,1378.3,61.3,1376.7,61.3
+                  L1376.7,61.3z"/>
+                <path d="M1296.8,122.5c0,1.5,0,3.1,0,4.8c-1.7,0-3.3,0-4.8,0l0,0c0-1.6,0-3.1,0-4.8C1293.7,122.5,1295.3,122.5,1296.8,122.5
+                  L1296.8,122.5z"/>
+                <path d="M1343.8,65.9c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.6,0-3.1,0-4.8,0C1343.8,68.9,1343.8,67.4,1343.8,65.9
+                  L1343.8,65.9z"/>
+                <path d="M1433.3,122.5c0,1.5,0,3.1,0,4.8c-1.7,0-3.2,0-4.8,0l0,0c0-1.6,0-3.1,0-4.8C1430.4,122.5,1431.9,122.5,1433.3,122.5
+                  L1433.3,122.5z"/>
+                <path d="M1494.5,65.9c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C1494.6,68.9,1494.6,67.4,1494.5,65.9
+                  L1494.5,65.9z"/>
+                <path d="M1277.8,28.2c1.5,0,3,0,4.8,0c0,1.7,0,3.2,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C1277.8,31.3,1277.8,29.7,1277.8,28.2
+                  L1277.8,28.2z"/>
+                <path d="M1037.1,108.3c1.5,0,3.1,0,4.8,0c0,1.7,0,3.2,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C1037.1,111.4,1037.1,109.9,1037.1,108.3
+                  L1037.1,108.3z"/>
+                <path d="M1428.5,28.2c1.5,0,3.1,0,4.8,0c0,1.7,0,3.2,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C1428.6,31.2,1428.6,29.7,1428.5,28.2
+                  L1428.5,28.2z"/>
+                <path d="M1168.6,75.5c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.5,0,3.1,0,4.8C1171.6,75.4,1170.1,75.4,1168.6,75.5
+                  L1168.6,75.5z"/>
+                <path d="M1452.3,28.2c0-1.5,0-3,0-4.6c1.5,0,2.9,0,4.5,0c0,1.6,0,3.1,0,4.6l0,0C1455.4,28.2,1453.8,28.2,1452.3,28.2L1452.3,28.2
+                  z"/>
+                <path d="M1424,28.2c0-1.5,0-3,0-4.6c1.5,0,3,0,4.5,0c0,1.6,0,3.1,0,4.6l0,0C1427,28.2,1425.5,28.2,1424,28.2L1424,28.2z"/>
+                <path d="M1163.8,127.3c0,1.5,0,2.9,0,4.5c-1.5,0-2.9,0-4.5,0c0-1.5,0-3,0-4.5l0,0C1160.8,127.3,1162.3,127.3,1163.8,127.3
+                  L1163.8,127.3z"/>
+                <path d="M565.7,75.4c0,1.5,0,2.9,0,4.6c-1.6,0-3.1,0-4.6,0l0,0c0-1.5,0-3,0-4.6C562.8,75.5,564.3,75.5,565.7,75.4L565.7,75.4z"/>
+                <path d="M697.5,14c0-1.5,0-2.9,0-4.6c1.6,0,3.1,0,4.6,0l0,0c0,1.5,0,3,0,4.6C700.4,14,699,14,697.5,14L697.5,14z"/>
+                <path d="M1282.6,33c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C1282.6,35.9,1282.6,34.4,1282.6,33L1282.6,33z"/>
+                <path d="M645.4,80c-1.5,0-2.9,0-4.6,0c0-1.6,0-3.1,0-4.6l0,0c1.5,0,3,0,4.6,0C645.4,77.1,645.4,78.6,645.4,80L645.4,80z"/>
+                <path d="M1395.7,75.5c1.5,0,3.1,0,4.6,0l0,0c0,1.5,0,3,0,4.5c-1.6,0-3,0-4.5,0C1395.7,78.4,1395.7,76.9,1395.7,75.5L1395.7,75.5z
+                  "/>
+                <path d="M1069.5,94.2c-1.5,0-2.9,0-4.6,0c0-1.6,0-3.1,0-4.6l0,0c1.5,0,3,0,4.6,0C1069.5,91.2,1069.5,92.7,1069.5,94.2
+                  L1069.5,94.2z"/>
+                <path d="M1466.5,47.1c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C1466.5,50,1466.5,48.6,1466.5,47.1L1466.5,47.1z
+                  "/>
+                <path d="M1107.4,28.2c0-1.5,0-2.9,0-4.5c1.5,0,2.9,0,4.5,0c0,1.5,0,3,0,4.5l0,0C1110.5,28.2,1109,28.2,1107.4,28.2L1107.4,28.2z"
+                  />
+                <path d="M1093.3,51.7c0-1.5,0-2.9,0-4.6c1.6,0,3.1,0,4.6,0l0,0c0,1.5,0,3,0,4.6C1096.2,51.7,1094.7,51.7,1093.3,51.7L1093.3,51.7
+                  z"/>
+                <path d="M806.2,9.5c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C806.2,12.4,806.2,10.9,806.2,9.5L806.2,9.5z"/>
+                <path d="M372.3,9.5c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C372.3,12.4,372.3,10.9,372.3,9.5L372.3,9.5z"/>
+                <path d="M1466.5,113.1c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C1466.5,116,1466.5,114.6,1466.5,113.1
+                  L1466.5,113.1z"/>
+                <path d="M655,9.5c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C655,12.4,655,10.9,655,9.5L655,9.5z"/>
+                <path d="M796.6,80c-1.5,0-2.9,0-4.6,0c0-1.6,0-3.1,0-4.6l0,0c1.5,0,3,0,4.6,0C796.6,77.1,796.6,78.6,796.6,80L796.6,80z"/>
+                <path d="M61,28.2c0-1.5,0-3,0-4.7c3.1,0,6.1,0,9.3,0c0-3.2,0-6.2,0-9.5c1.7,0,3.3,0,4.8,0l0,0c0,3.1,0,6.2,0,9.3
+                  c1.6,0,3.1,0,4.7,0c0-1.5,0-3,0-4.5c1.7,0,3.2,0,4.7,0l0,0c0,1.5,0,2.9,0,4.6c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7
+                  c1.6,0,3.1,0,4.7,0c0,1.7,0,3.1,0,4.8c1.7,0,3.1,0,4.7,0c0,1.6,0,3,0,4.6c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.8c1.6,0,3,0,4.7,0
+                  c0,12.7,0,25.2,0,37.7l0,0c-1.5,0-3,0-4.7,0c0-11,0-21.9,0-32.9c-1.7,0-3.2,0-4.7,0c0-3.1,0-6.2,0-9.5c-1.6,0-3.1,0-4.7,0
+                  c0-1.6,0-3.1,0-4.7c-1.7,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7C79.7,28.2,70.4,28.2,61,28.2L61,28.2z"/>
+                <path d="M202.2,37.5c0-1.5,0-2.9,0-4.6c1.6,0,3,0,4.7,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7
+                  c3.2,0,6.2,0,9.4,0c0-6.3,0-12.5,0-18.9c1.7,0,3.2,0,4.7,0l0,0c0,6.2,0,12.4,0,18.8c1.7,0,3.2,0,4.8,0c0-6.3,0-12.6,0-18.8l0,0
+                  c1.5,0,2.9,0,4.6,0c0,6.3,0,12.5,0,18.8c1.6,0,3.1,0,4.8,0c0,1.7,0,3.2,0,4.7l0,0c-9.4,0-18.7,0-28.3,0c0,1.7,0,3.2,0,4.8
+                  c-1.6,0-3.1,0-4.7,0c0,1.6,0,3,0,4.5C205.2,37.5,203.7,37.5,202.2,37.5L202.2,37.5z"/>
+                <path d="M249.2,37.5c1.5,0,3.1,0,4.8,0c0,1.7,0,3.1,0,4.8c1.6,0,3.1,0,4.8,0c0,12.6,0,25.1,0,37.7c1.6,0,3,0,4.6,0
+                  c0,4.9,0,9.5,0,14.2l0,0c-1.5,0-3,0-4.6,0c0-4.8,0-9.3,0-14.1c-1.6,0-3.1,0-4.8,0c0-11.1,0-22,0-32.9c-1.7,0-3.3,0-4.8,0
+                  C249.2,43.9,249.2,40.7,249.2,37.5L249.2,37.5z"/>
+                <path d="M344,80c0-12.5,0-25,0-37.6c1.5,0,3,0,4.6,0c0-1.6,0-3.1,0-4.8c1.7,0,3.1,0,4.7,0c0-1.6,0-3,0-4.6c1.7,0,3.3,0,4.9,0l0,0
+                  c0,1.5,0,3,0,4.7c-1.7,0-3.2,0-4.7,0c0,3.2,0,6.2,0,9.4c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3,0,4.5,0c0,1.7,0,3.2,0,4.7
+                  c-1.5,0-3,0-4.6,0c0-1.7,0-3.1,0-4.7c-1.6,0-3.1,0-4.8,0c0-1.7,0-3.1,0-4.6c-1.6,0-3.1,0-4.7,0c0,11,0,21.9,0,32.8
+                  C346.9,80,345.5,80,344,80L344,80z"/>
+                <path d="M192.8,80c0-12.5,0-25,0-37.6c1.5,0,3,0,4.6,0c0-1.6,0-3.1,0-4.8c1.7,0,3.2,0,4.8,0l0,0c0,3.2,0,6.4,0,9.6
+                  c-1.5,0-3,0-4.8,0c0,11,0,21.9,0,32.9C195.7,80,194.2,80,192.8,80L192.8,80z"/>
+                <path d="M108.1,80c1.5,0,3.1,0,4.8,0c0,4.8,0,9.4,0,14.2c1.6,0,3.1,0,4.7,0c0,6.4,0,12.5,0,18.9c-1.6,0-3.1,0-4.6,0l0,0
+                  c0-6.2,0-12.5,0-18.9c-1.7,0-3.2,0-4.8,0C108.1,89.3,108.1,84.7,108.1,80L108.1,80z"/>
+                <path d="M202.2,136.6c-1.5,0-3,0-4.7,0c0-3.1,0-6.1,0-9.3c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.2,0-9.4c-1.6,0-3.1,0-4.7,0
+                  c0-1.7,0-3.3,0-4.8l0,0c4.7,0,9.3,0,14.2,0c0,1.7,0,3.3,0,4.8c-1.5,0-3.1,0-4.6,0c0,3.2,0,6.2,0,9.4c1.6,0,3,0,4.6,0
+                  C202.1,130.5,202.1,133.6,202.2,136.6L202.2,136.6z"/>
+                <path d="M93.9,131.8c-7.8,0-15.6,0-23.5,0c0,3.3,0,6.3,0,9.6c-1.7,0-3.3,0-4.9,0l0,0c0-3.1,0-6.3,0-9.6c1.7,0,3.2,0,4.8,0
+                  c0-1.6,0-3.1,0-4.5c7.9,0,15.6,0,23.5,0C93.9,128.9,93.9,130.4,93.9,131.8L93.9,131.8z"/>
+                <path d="M386.5,141.4c-1.5,0-3.1,0-4.8,0c0-3.2,0-6.2,0-9.6c-8,0-15.8,0-23.5,0l0,0c0-1.5,0-3,0-4.5c7.9,0,15.7,0,23.5,0
+                  c0,1.5,0,2.9,0,4.6c1.6,0,3.1,0,4.8,0C386.5,135.3,386.5,138.4,386.5,141.4L386.5,141.4z"/>
+                <path d="M367.5,18.8c-6.2,0-12.5,0-18.8,0c0-3.2,0-6.2,0-9.3c1.6,0,3.1,0,4.7,0l0,0c0,1.5,0,3,0,4.6c4.8,0,9.4,0,14.2,0
+                  C367.5,15.7,367.5,17.3,367.5,18.8L367.5,18.8z"/>
+                <path d="M98.7,9.5c1.5,0,3,0,4.6,0c0,3.1,0,6.1,0,9.3c-6.3,0-12.6,0-18.8,0l0,0c0-1.5,0-3.1,0-4.8c4.8,0,9.4,0,14.2,0
+                  C98.7,12.4,98.7,10.9,98.7,9.5L98.7,9.5z"/>
+                <path d="M263.3,113.1c0,4.6,0,9.3,0,14.2c-1.6,0-3.1,0-4.6,0l0,0c0-3.1,0-6.2,0-9.4c-3.4,0-6.5,0-9.6,0c0-1.6,0-3.1,0-4.8
+                  C254.1,113.1,258.7,113.1,263.3,113.1L263.3,113.1z"/>
+                <path d="M112.9,113.1c0,4.7,0,9.3,0,14.2c-1.7,0-3.3,0-4.8,0l0,0c0-3.1,0-6.3,0-9.6c-3.3,0-6.3,0-9.4,0c0-1.5,0-3,0-4.6
+                  C103.6,113.1,108.2,113.1,112.9,113.1L112.9,113.1z"/>
+                <path d="M239.8,131.8c-7.8,0-15.7,0-23.5,0l0,0c0-1.5,0-3,0-4.5c7.9,0,15.7,0,23.5,0C239.8,128.9,239.8,130.4,239.8,131.8
+                  L239.8,131.8z"/>
+                <path d="M188,113.1c-1.5,0-3,0-4.6,0c0-6.3,0-12.5,0-18.9c1.6,0,3.1,0,4.6,0l0,0C188,100.5,188,106.8,188,113.1L188,113.1z"/>
+                <path d="M263.3,94.2c1.5,0,3.1,0,4.7,0c0,6.3,0,12.5,0,18.9c-1.6,0-3.2,0-4.7,0l0,0C263.4,106.8,263.4,100.5,263.3,94.2
+                  L263.3,94.2z"/>
+                <path d="M339.2,113.1c-1.5,0-3,0-4.6,0c0-6.3,0-12.5,0-18.9c1.6,0,3.1,0,4.6,0l0,0C339.2,100.5,339.2,106.8,339.2,113.1
+                  L339.2,113.1z"/>
+                <path d="M216.3,131.8c0,1.5,0,3.1,0,4.8c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.6c-3.2,0-6.2,0-9.4,0c0-1.6,0-3.1,0-4.7l0,0
+                  c3.1,0,6.2,0,9.5,0c0-1.6,0-3.1,0-4.8C213.3,131.9,214.8,131.9,216.3,131.8L216.3,131.8z"/>
+                <path d="M188,94.2c0-4.6,0-9.2,0-14.2c1.7,0,3.2,0,4.8,0l0,0c0,4.7,0,9.4,0,14.2C191,94.2,189.5,94.2,188,94.2L188,94.2z"/>
+                <path d="M339.2,94.2c0-4.6,0-9.2,0-14.2c1.7,0,3.2,0,4.8,0l0,0c0,4.7,0,9.4,0,14.2C342.3,94.2,340.7,94.2,339.2,94.2L339.2,94.2z
+                  "/>
+                <path d="M103.5,131.8c0,1.5,0,3.1,0,4.7c-3.2,0-6.3,0-9.6,0c0-1.6,0-3.2,0-4.7l0,0C97.1,131.9,100.3,131.9,103.5,131.8
+                  L103.5,131.8z"/>
+                <path d="M358.1,131.8c0,1.5,0,3.1,0,4.7c-3.2,0-6.2,0-9.6,0c0-1.6,0-3.2,0-4.7l0,0C351.7,131.9,355,131.9,358.1,131.8
+                  L358.1,131.8z"/>
+                <path d="M254,136.6c0,1.5,0,3,0,4.7c-3.1,0-6.1,0-9.3,0c0-1.6,0-3.1,0-4.7l0,0C247.8,136.7,250.9,136.7,254,136.6L254,136.6z"/>
+                <path d="M258.8,127.3c0,3,0,6.1,0,9.4c-1.7,0-3.2,0-4.8,0l0,0c0-3.1,0-6.2,0-9.4C255.7,127.3,257.3,127.3,258.8,127.3
+                  L258.8,127.3z"/>
+                <path d="M353.4,9.5c0-1.5,0-3.1,0-4.8c1.7,0,3.2,0,4.8,0l0,0c0,1.5,0,3.1,0,4.8C356.4,9.4,354.9,9.4,353.4,9.5L353.4,9.5z"/>
+                <path d="M239.8,28.2c1.5,0,3.1,0,4.8,0c0,1.7,0,3.3,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C239.8,31.2,239.8,29.7,239.8,28.2L239.8,28.2z"
+                  />
+                <path d="M244.6,136.6c-1.5,0-3.1,0-4.8,0c0-1.7,0-3.2,0-4.8l0,0c1.6,0,3.1,0,4.8,0C244.6,133.6,244.6,135.2,244.6,136.6
+                  L244.6,136.6z"/>
+                <path d="M348.6,131.8c-1.5,0-2.9,0-4.6,0c0-1.6,0-3.1,0-4.6l0,0c1.5,0,3,0,4.6,0C348.5,128.9,348.5,130.4,348.6,131.8
+                  L348.6,131.8z"/>
+                <path d="M244.6,33c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3,0-4.6,0C244.6,35.9,244.6,34.4,244.6,33L244.6,33z"/>
+                <path d="M108.1,127.3c0,1.5,0,2.9,0,4.6c-1.6,0-3.1,0-4.6,0l0,0c0-1.5,0-3,0-4.6C105.2,127.3,106.6,127.3,108.1,127.3
+                  L108.1,127.3z"/>
+                <path d="M37.5,94.2c0-4.6,0-9.2,0-14.1c1.5,0,3,0,4.5,0c0-12.7,0-25.1,0-37.7c1.6,0,3.1,0,4.8,0c0-1.6,0-3.1,0-4.8
+                  c1.6,0,3,0,4.7,0c0-1.6,0-3,0-4.6c1.7,0,3.2,0,4.8,0l0,0c0,1.5,0,3,0,4.7c-1.6,0-3.1,0-4.6,0c0,3.2,0,6.3,0,9.5c1.6,0,3,0,4.6,0
+                  c0,1.6,0,3.1,0,4.6c-1.5,0-3.1,0-4.8,0c0-1.6,0-3,0-4.5c-1.6,0-3.1,0-4.6,0c0,11,0,21.8,0,32.9c-1.6,0-3.1,0-4.8,0
+                  c0,4.8,0,9.4,0,14C40.4,94.2,39,94.2,37.5,94.2L37.5,94.2z"/>
+                <path d="M51.4,136.6c-1.5,0-2.9,0-4.6,0c0-1.6,0-3,0-4.7c-1.6,0-3.1,0-4.7,0c0-4.8,0-9.4,0-14.2c-1.6,0-3,0-4.6,0
+                  c0-1.7,0-3.2,0-4.7l0,0c4.6,0,9.2,0,13.9,0c0,1.6,0,3.1,0,4.6c-1.5,0-3,0-4.5,0c0,4.9,0,9.5,0,14.2c1.5,0,3,0,4.5,0
+                  C51.4,133.6,51.4,135.2,51.4,136.6L51.4,136.6z"/>
+                <path d="M37.5,113.1c-1.5,0-3.1,0-4.7,0c0-6.3,0-12.5,0-18.9c1.6,0,3.2,0,4.7,0l0,0C37.5,100.5,37.5,106.8,37.5,113.1L37.5,113.1
+                  z"/>
+                <path d="M56.2,141.4c-1.5,0-3,0-4.8,0c0-1.7,0-3.2,0-4.8l0,0c1.6,0,3.1,0,4.8,0C56.2,138.4,56.2,139.9,56.2,141.4L56.2,141.4z"/>
+                <path d="M56.2,33c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.6,0,3.1,0,4.8C59.2,33,57.7,33,56.2,33L56.2,33z"/>
+                <path d="M79.8,9.5c0-1.5,0-3.1,0-4.8c1.7,0,3.3,0,4.8,0l0,0c0,1.5,0,3.1,0,4.8C82.8,9.4,81.3,9.4,79.8,9.5L79.8,9.5z"/>
+                <path d="M75.2,14c0-1.5,0-2.9,0-4.6c1.6,0,3.1,0,4.6,0l0,0c0,1.5,0,3,0,4.6C78.1,14,76.6,14,75.2,14L75.2,14z"/>
+                <path d="M1480.5,80.1c1.7,0,3.1,0,4.7,0c0-1.6,0-3,0-4.6c3.1,0,6.2,0,9.3,0c0,3.1,0,6.1,0,9.3c-1.5,0-2.9,0-4.5,0
+                  c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.8,0c0,1.6,0,3.1,0,4.7c-3.2,0-6.2,0-9.3,0c0-3.1,0-6.1,0-9.3c1.5,0,2.9,0,4.6,0
+                  C1480.5,83.2,1480.5,81.7,1480.5,80.1z"/>
+                <path d="M1447.6,66c3.1,0,6.1,0,9.2,0c0,4.7,0,9.3,0,14c-3.1,0-6.1,0-9.2,0C1447.6,75.3,1447.6,70.7,1447.6,66z"/>
+                <path d="M1438.2,103.8c-1.5,0-3.1,0-4.8,0c0-1.8,0-3.3,0-4.8c1.5,0,3,0,4.8,0C1438.2,100.6,1438.2,102.2,1438.2,103.8z"/>
+                <path d="M1433.4,99c-1.5,0-3,0-4.8,0c0-1.7,0-3.3,0-4.8c1.5,0,3.1,0,4.8,0C1433.4,95.9,1433.4,97.4,1433.4,99z"/>
+                <path d="M1428.6,94.2c-1.5,0-2.9,0-4.6,0c0-1.6,0-3.1,0-4.6c1.5,0,2.9,0,4.6,0C1428.6,91.2,1428.6,92.7,1428.6,94.2z"/>
+                <path d="M815.6,70.7c0-1.5,0-3,0-4.6c9.4,0,18.7,0,28.3,0c0,1.6,0,3.1,0,4.6C834.5,70.7,825,70.7,815.6,70.7z"/>
+                <path d="M843.9,103.8c1.5,0,2.9,0,4.5,0c0,3.1,0,6.1,0,9.3c-4.7,0-9.4,0-14.1,0l0,0c0-1.5,0-3.1,0-4.8c3.2,0,6.3,0,9.6,0
+                  C843.9,106.8,843.9,105.3,843.9,103.8L843.9,103.8z"/>
+                <path d="M825,103.8c0-1.5,0-3.1,0-4.8c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c3.2,0,6.2,0,9.4,0c0,1.6,0,3.1,0,4.7l0,0
+                  c-3.1,0-6.1,0-9.4,0c0,1.6,0,3,0,4.8C828,103.8,826.5,103.8,825,103.8L825,103.8z"/>
+                <path d="M801.4,80c0-1.5,0-2.9,0-4.6c1.6,0,3,0,4.7,0c0-1.6,0-3.1,0-4.8c3.3,0,6.4,0,9.5,0c0,1.5,0,3,0,4.7c-3.2,0-6.2,0-9.4,0
+                  c0,1.6,0,3.1,0,4.7C804.5,80,803,80,801.4,80z"/>
+                <path d="M824.9,103.8c0,1.5,0,2.9,0,4.6c-1.6,0-3,0-4.7,0c0,3.2,0,6.2,0,9.3c-1.6,0-3,0-4.6,0c0-3.1,0-6.1,0-9.3
+                  c1.4,0,2.9,0,4.5,0c0-1.6,0-3,0-4.6C821.9,103.8,823.4,103.8,824.9,103.8C825,103.8,824.9,103.8,824.9,103.8z"/>
+                <path d="M839.1,99c1.5,0,3,0,4.8,0c0,1.6,0,3.2,0,4.8l0,0c-1.5,0-3.1,0-4.8,0C839.1,102,839.1,100.5,839.1,99L839.1,99z"/>
+                <path d="M834.3,113.1c0,1.5,0,2.9,0,4.5c-1.5,0-3,0-4.5,0c0-1.5,0-2.9,0-4.5C831.3,113.1,832.8,113.1,834.3,113.1L834.3,113.1z"
+                  />
+                <path d="M513.9,70.7c0-1.5,0-3,0-4.6c9.5,0,18.8,0,28.3,0c0,1.6,0,3.1,0,4.6C532.8,70.7,523.3,70.7,513.9,70.7z"/>
+                <path d="M523.5,113.1c-4.7,0-9.3,0-14.1,0c0-3.1,0-6.2,0-9.3c1.5,0,3,0,4.5,0l0,0c0,1.5,0,2.9,0,4.6c3.3,0,6.3,0,9.6,0
+                  C523.5,110,523.5,111.6,523.5,113.1L523.5,113.1z"/>
+                <path d="M518.7,99c0-1.5,0-3.1,0-4.7c3.1,0,6.2,0,9.4,0c0,1.5,0,3,0,4.6c1.6,0,3.1,0,4.7,0c0,1.7,0,3.3,0,4.9l0,0
+                  c-1.5,0-3,0-4.7,0c0-1.7,0-3.1,0-4.8C524.9,99,521.8,99,518.7,99L518.7,99z"/>
+                <path d="M532.9,103.8c1.5,0,3,0,4.7,0c0,1.5,0,3,0,4.6c1.6,0,3,0,4.6,0c0,3.2,0,6.2,0,9.3c-1.5,0-2.9,0-4.5,0c0-3.1,0-6.1,0-9.3
+                  c-1.7,0-3.1,0-4.7,0C532.9,106.8,532.9,105.3,532.9,103.8L532.9,103.8z"/>
+                <path d="M542.2,70.6c3.1,0,6.2,0,9.6,0c0,1.7,0,3.3,0,4.8c-3.1,0-6.3,0-9.6,0C542.2,73.7,542.2,72.2,542.2,70.6z"/>
+                <path d="M518.7,99c0,1.5,0,3,0,4.8c-1.7,0-3.3,0-4.8,0l0,0c0-1.5,0-3.1,0-4.8C515.7,99,517.2,99,518.7,99L518.7,99z"/>
+                <path d="M551.8,75.4c1.5,0,2.9,0,4.6,0c0,1.6,0,3.1,0,4.6c-1.5,0-2.9,0-4.6,0C551.8,78.4,551.8,76.9,551.8,75.4z"/>
+                <path d="M523.5,113.1c1.5,0,2.9,0,4.5,0c0,1.5,0,2.9,0,4.5c-1.5,0-2.9,0-4.5,0C523.5,116.1,523.5,114.6,523.5,113.1L523.5,113.1z
+                  "/>
+                <path d="M51.4,117.7c15.8,0,31.5,0,47.3,0c0,1.5,0,3.1,0,4.7c-15.8,0-31.4,0-47.3,0C51.4,120.8,51.4,119.3,51.4,117.7z"/>
+                <path d="M367.6,113c0-3.1,0-6.1,0-9.2c6.2,0,12.4,0,18.7,0c0,3.1,0,6.1,0,9.2C380.1,113,373.9,113,367.6,113z"/>
+                <path d="M362.7,56.5c9.4,0,18.8,0,28.4,0c0-1.6,0-3,0-4.8c1.7,0,3.2,0,4.8,0c0,1.5,0,3.1,0,4.8c-1.6,0-3.1,0-4.7,0
+                  c0,1.6,0,3.1,0,4.6c-9.5,0-18.8,0-28.4,0C362.7,59.5,362.7,58,362.7,56.5z"/>
+                <path d="M400.5,98.9c-3.1,0-6.1,0-9.2,0c0-4.6,0-9.3,0-14c3.1,0,6.1,0,9.2,0C400.5,89.5,400.5,94.2,400.5,98.9z"/>
+                <path d="M362.7,84.9c0,4.7,0,9.3,0,14c-3.1,0-6.1,0-9.2,0c0-4.6,0-9.2,0-14C356.5,84.9,359.5,84.9,362.7,84.9z"/>
+                <path d="M928.7,75.5c0,1.6,0,3,0,4.6c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.6,0c0,3.2,0,6.2,0,9.4
+                  c-3.1,0-6.1,0-9.3,0c0-1.5,0-2.9,0-4.5c-1.6,0-3,0-4.6,0c0-1.7,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.2,0-9.4
+                  C922.4,75.5,925.5,75.5,928.7,75.5z"/>
+                <path d="M966.4,66c0,4.7,0,9.3,0,14c-3.1,0-6.2,0-9.3,0c0-4.7,0-9.3,0-14C960.2,66,963.2,66,966.4,66z"/>
+                <path d="M1334.5,80.1c0-1.7,0-3.1,0-4.6c3.2,0,6.2,0,9.3,0c0,3.1,0,6.1,0,9.3c-1.5,0-2.9,0-4.6,0c0,1.6,0,3.1,0,4.8
+                  c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.6c-3.2,0-6.2,0-9.4,0c0-3.1,0-6.1,0-9.3c1.5,0,2.9,0,4.5,0c0-1.7,0-3.1,0-4.7
+                  C1331.3,80.1,1332.8,80.1,1334.5,80.1z"/>
+                <path d="M1296.8,66c3.1,0,6.1,0,9.2,0c0,4.7,0,9.3,0,14c-3.1,0-6.1,0-9.2,0C1296.8,75.3,1296.8,70.7,1296.8,66z"/>
+                <path d="M1282.6,99c-1.5,0-3.1,0-4.8,0c0-1.7,0-3.3,0-4.8c1.5,0,3,0,4.8,0C1282.6,95.8,1282.6,97.4,1282.6,99z"/>
+                <path d="M1254.3,117.9c-1.6,0-3.2,0-4.8,0c0-1.5,0-3.1,0-4.7c1.6,0,3.1,0,4.8,0C1254.3,114.8,1254.3,116.4,1254.3,117.9z"/>
+                <path d="M1088.4,84.8c0,3.3,0,6.2,0,9.3c-3.1,0-6.1,0-9.3,0c0-1.5,0-2.9,0-4.5c-1.7,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7
+                  c-1.6,0-3.1,0-4.6,0c0-3.2,0-6.2,0-9.4c3.1,0,6.1,0,9.3,0c0,1.5,0,2.9,0,4.6c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7
+                  C1085.4,84.8,1086.8,84.8,1088.4,84.8z"/>
+                <path d="M1107.5,80c0-4.7,0-9.3,0-14c3.1,0,6.1,0,9.2,0c0,4.7,0,9.2,0,14C1113.7,80,1110.6,80,1107.5,80z"/>
+                <path d="M1140.3,89.6c0,1.5,0,2.9,0,4.5c-1.6,0-3,0-4.7,0c0,1.6,0,3.1,0,4.8c-1.7,0-3.2,0-4.7,0c0-1.5,0-3.1,0-4.8
+                  c1.6,0,3,0,4.6,0c0-1.6,0-3,0-4.6C1137.3,89.6,1138.8,89.6,1140.3,89.6z"/>
+                <path d="M1131,99c0,1.5,0,3,0,4.8c-1.7,0-3.3,0-4.8,0c0-1.5,0-3.1,0-4.8C1127.8,99,1129.4,99,1131,99z"/>
+                <path d="M692.7,70.7c-9.4,0-18.9,0-28.3,0c0-1.5,0-3,0-4.7c9.5,0,18.8,0,28.3,0C692.7,67.6,692.7,69.1,692.7,70.7z"/>
+                <path d="M697.5,75.5c-1.5,0-3.1,0-4.8,0c0-1.8,0-3.3,0-4.8c1.5,0,3,0,4.8,0C697.5,72.3,697.5,73.9,697.5,75.5z"/>
+                <path d="M664.4,70.6c0,1.5,0,3,0,4.8c-1.7,0-3.3,0-4.8,0c0-1.5,0-3.1,0-4.8C661.3,70.6,662.9,70.6,664.4,70.6z"/>
+                <path d="M659.6,75.4c0,1.5,0,2.9,0,4.6c-1.6,0-3.1,0-4.6,0c0-1.5,0-2.9,0-4.6C656.6,75.4,658.1,75.4,659.6,75.4z"/>
+                <path d="M702.1,80c-1.5,0-2.9,0-4.6,0c0-1.6,0-3.1,0-4.6c1.5,0,2.9,0,4.6,0C702.1,77,702.1,78.5,702.1,80z"/>
+                <path d="M673.7,94.2c0-1.5,0-2.9,0-4.5c3.2,0,6.3,0,9.5,0c0,1.5,0,2.9,0,4.5c1.6,0,3.1,0,4.6,0c0,7.9,0,15.7,0,23.5
+                  c-1.5,0-2.9,0-4.5,0c0-7.8,0-15.5,0-23.5C679.9,94.1,676.8,94.1,673.7,94.2L673.7,94.2z"/>
+                <path d="M673.7,94.1c0,7.8,0,15.6,0,23.5c-1.5,0-2.9,0-4.5,0c0-7.8,0-15.5,0-23.5C670.8,94.2,672.3,94.2,673.7,94.1
+                  C673.7,94.2,673.7,94.1,673.7,94.1z"/>
+                <path d="M65.7,113c0-3.1,0-6.1,0-9.2c6.3,0,12.5,0,18.8,0c0,3.1,0,6.1,0,9.2C78.2,113,72.1,113,65.7,113z"/>
+                <path d="M56.2,51.7c1.5,0,3,0,4.7,0c0,1.7,0,3.2,0,4.8c9.6,0,19,0,28.4,0c0,1.5,0,3,0,4.6c-9.5,0-18.8,0-28.4,0c0-1.5,0-3,0-4.6
+                  c-1.7,0-3.1,0-4.8,0C56.2,54.8,56.2,53.3,56.2,51.7z"/>
+                <path d="M60.9,98.9c-3.2,0-6.2,0-9.3,0c0-4.7,0-9.3,0-14c3.1,0,6.2,0,9.3,0C60.9,89.6,60.9,94.2,60.9,98.9z"/>
+                <path d="M89.3,98.9c0-4.7,0-9.3,0-14c3.1,0,6.1,0,9.2,0c0,4.6,0,9.3,0,14C95.5,98.9,92.5,98.9,89.3,98.9z"/>
+                <path d="M89.3,56.5c0-1.5,0-3,0-4.7c1.5,0,3,0,4.6,0c0-1.6,0-3,0-4.7c1.7,0,3.2,0,4.8,0c0,1.5,0,2.9,0,4.6c-1.6,0-3.1,0-4.7,0
+                  c0,1.6,0,3.1,0,4.8C92.3,56.5,90.8,56.5,89.3,56.5z"/>
+                <path d="M239.8,56.5c0,1.5,0,3,0,4.6c-9.4,0-18.7,0-28.3,0c0-1.6,0-3.1,0-4.6C220.9,56.5,230.4,56.5,239.8,56.5z"/>
+                <path d="M211.5,56.5c-1.5,0-2.9,0-4.6,0c0-1.6,0-3,0-4.7c-1.6,0-3.1,0-4.8,0c0-1.7,0-3.2,0-4.7c1.5,0,3,0,4.7,0c0,1.5,0,3,0,4.6
+                  c1.6,0,3.1,0,4.7,0C211.5,53.4,211.5,55,211.5,56.5z"/>
+                <path d="M244.6,51.7c0,1.5,0,3.1,0,4.8c-1.7,0-3.3,0-4.8,0c0-1.5,0-3,0-4.8C241.5,51.7,243.1,51.7,244.6,51.7z"/>
+                <path d="M249.2,47.1c0,1.5,0,2.9,0,4.6c-1.6,0-3.1,0-4.6,0c0-1.5,0-2.9,0-4.6C246.2,47.1,247.7,47.1,249.2,47.1z"/>
+                <path d="M249.2,117.9c0,1.5,0,2.9,0,4.5c-15.7,0-31.3,0-47.1,0c0-1.5,0-3,0-4.5C217.8,117.9,233.5,117.9,249.2,117.9z"/>
+                <path d="M216.4,113c0-3.1,0-6.1,0-9.2c6.2,0,12.3,0,18.6,0c0,3.1,0,6.1,0,9.2C228.8,113,222.6,113,216.4,113z"/>
+                <path d="M211.5,98.9c-3.2,0-6.1,0-9.2,0c0-4.7,0-9.3,0-14c3,0,6.1,0,9.2,0C211.5,89.6,211.5,94.2,211.5,98.9z"/>
+                <path d="M239.9,98.9c0-4.7,0-9.3,0-14c3.1,0,6.1,0,9.2,0c0,4.6,0,9.3,0,14C246.1,98.9,243,98.9,239.9,98.9z"/>
+              </g>
+            </g>
+          </g>
+          <g>
+            <g>
+              <path d="M1758.9,32.9c1.5,0,3.1,0,4.7,0c0,1.5,0,3.1,0,4.6c1.6,0,3.1,0,4.7,0c0,12.5,0,25,0,37.6c1.6,0,3.1,0,4.7,0
+                c0,3.2,0,6.3,0,9.4c3.2,0,6.2,0,9.4,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0
+                c0,3.2,0,6.2,0,9.4c-1.5,0-3,0-4.6,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.2,0-4.8,0l0,0c0-1.5,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0
+                c0-3.2,0-6.2,0-9.4c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.6c-1.6,0-3.1,0-4.7,0c0,4.7,0,9.3,0,14.1c-1.6,0-3.1,0-4.7,0
+                c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0-1.5,0-3.1,0-4.7c1.6,0,3.1,0,4.6,0c0-4.7,0-9.4,0-14.1c-1.5,0-3,0-4.6,0
+                c0-4.7,0-9.3,0-14.1c-1.6,0-3.1,0-4.8,0c0-11,0-21.9,0-32.8c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0
+                c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.6c-9.4,0-18.8,0-28.2,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0
+                c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.6c-1.6,0-3.1,0-4.7,0c0,11,0,21.9,0,32.9c-1.6,0-3.1,0-4.7,0
+                c0,4.7,0,9.4,0,14.1c-1.6,0-3.1,0-4.7,0c0,4.7,0,9.4,0,14c-1.5,0-3.1,0-4.7,0c0-4.7,0-9.4,0-14c-1.6,0-3.1,0-4.7,0
+                c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.6,0c0,3.2,0,6.2,0,9.4c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.6,0
+                c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.6,0l0,0c0-1.5,0-3.1,0-4.7c1.5,0,3,0,4.6,0
+                c0-1.6,0-3.1,0-4.7c-1.5,0-3,0-4.6,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.2,0-9.4c1.5,0,3.1,0,4.6,0
+                c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c3.2,0,6.2,0,9.4,0c0-3.1,0-6.2,0-9.4c1.6,0,3.1,0,4.7,0
+                c0-12.6,0-25,0-37.6c3.2,0,6.2,0,9.4,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0
+                c0-1.6,0-3.1,0-4.7c3.2,0,6.2,0,9.4,0c0-3.2,0-6.2,0-9.4c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0
+                c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.2,0-4.7c3.2,0,6.2,0,9.4,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0
+                c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,3.2,0,6.3,0,9.4c-6.2,0-12.4,0-18.7,0c0,1.6,0,3.1,0,4.7c3.1,0,6.2,0,9.3,0
+                c0,1.6,0,3.2,0,4.7l0,0c-10.9,0-21.9,0-32.9,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.6,0
+                c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.6c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c9.4,0,18.8,0,28.2,0
+                c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0C1758.9,39.1,1758.9,36,1758.9,32.9L1758.9,32.9z
+                  M1740.2,18.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c4.7,0,9.4,0,14,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.6
+                c-3.2,0-6.2,0-9.4,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.6,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,3.2,0,6.2,0,9.3
+                c1.6,0,3.1,0,4.7,0C1740.2,21.8,1740.2,20.3,1740.2,18.7z"/>
+              <path d="M1754.2,136.2c-1.5,0-3,0-4.7,0c0-1.5,0-3,0-4.6c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-4.7,0-9.4,0-14.1,0
+                c0,1.5,0,3,0,4.6c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.7c-3.2,0-6.3,0-9.4,0c0-1.5,0-3,0-4.6
+                c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0,1.5,0,3,0,4.6c-4.7,0-9.4,0-14.1,0c0-1.5,0-3.1,0-4.6
+                c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.3,0-9.4c1.6,0,3.1,0,4.7,0l0,0c0,3.1,0,6.2,0,9.4
+                c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.6c4.7,0,9.4,0,14.1,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.6
+                c20.4,0,40.7,0,61.1,0c0,3.1,0,6.2,0,9.3c4.7,0,9.3,0,14.1,0c0-1.5,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-3.2,0-6.3,0-9.4l0,0
+                c1.5,0,3.1,0,4.7,0c0,3.1,0,6.2,0,9.4c-1.5,0-3,0-4.6,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.7
+                c-6.3,0-12.6,0-18.8,0l0,0c0-3.1,0-6.2,0-9.3c-4.8,0-9.4,0-14.1,0c0,1.5,0,3,0,4.6c1.5,0,3.1,0,4.6,0
+                C1754.2,133.1,1754.2,134.7,1754.2,136.2L1754.2,136.2z M1712,126.9c0,3.1,0,6.2,0,9.3c3.1,0,6.2,0,9.3,0c0-1.6,0-3.1,0-4.7
+                c1.6,0,3.1,0,4.6,0c0-1.6,0-3.1,0-4.6C1721.3,126.9,1716.7,126.9,1712,126.9z"/>
+              <path d="M1537.1,94c0-1.5,0-3.1,0-4.7c3.1,0,6.2,0,9.3,0c0-3.2,0-6.3,0-9.4c1.6,0,3.1,0,4.7,0c0-12.5,0-25,0-37.6
+                c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.6c1.6,0,3.2,0,4.7,0l0,0c0,3.1,0,6.2,0,9.3c-1.5,0-3.1,0-4.7,0c0,11.1,0,22,0,32.9
+                c-1.6,0-3.1,0-4.7,0c0,4.7,0,9.4,0,14.1c-1.6,0-3.1,0-4.6,0c0,4.7,0,9.3,0,14c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7
+                c3.2,0,6.2,0,9.4,0c0,1.6,0,3.2,0,4.7c-3.1,0-6.2,0-9.4,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7
+                c-1.6,0-3.1,0-4.7,0c0-4.7,0-9.3,0-14C1540.2,94,1538.7,94,1537.1,94L1537.1,94z"/>
+              <path d="M1560.6,136.2c-3.1,0-6.2,0-9.4,0c0,1.6,0,3.1,0,4.7c-4.7,0-9.4,0-14.1,0c0-1.6,0-3.1,0-4.7l0,0c4.7,0,9.3,0,14.1,0
+                c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.6c20.4,0,40.7,0,61,0c0,3.2,0,6.2,0,9.3c0,0,0,0,0,0c-1.6,0-3.2,0-4.8,0
+                l0,0c0-1.5,0-3.1,0-4.6c-3.2,0-6.2,0-9.3,0c0,1.6,0,3.1,0,4.6l0,0c-1.5,0-3.1,0-4.7,0c0-1.5,0-3,0-4.6c-7.9,0-15.6,0-23.5,0
+                c0,1.5,0,3,0,4.6c-1.6,0-3.2,0-4.7,0l0,0c0-1.5,0-3.1,0-4.6c-3.2,0-6.3,0-9.5,0C1560.6,133.2,1560.6,134.7,1560.6,136.2
+                L1560.6,136.2z"/>
+              <path d="M1565.3,4.7c0-1.5,0-3.1,0-4.7c3.1,0,6.2,0,9.4,0c0,1.5,0,3,0,4.6c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0
+                c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,3.2,0,6.3,0,9.4c4.7,0,9.4,0,14.2,0c0,1.6,0,3.2,0,4.7l0,0c-11,0-22,0-32.9,0l0,0
+                c0-1.5,0-3.1,0-4.7c1.5,0,3,0,4.6,0c0-1.6,0-3.1,0-4.7c-6.3,0-12.5,0-18.7,0c0-3.2,0-6.2,0-9.3c1.6,0,3.1,0,4.7,0l0,0
+                c0,1.5,0,3,0,4.7c4.8,0,9.4,0,14.2,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.6c1.6,0,3.1,0,4.6,0c0-3.1,0-6.2,0-9.3
+                c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7C1571.5,4.7,1568.4,4.7,1565.3,4.7L1565.3,4.7z"/>
+              <path d="M1602.9,28.2c1.5,0,3,0,4.6,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0
+                c0,14.1,0,28.2,0,42.3l0,0c-1.5,0-3.1,0-4.7,0c0-11,0-21.9,0-32.8c-1.6,0-3.1,0-4.7,0c0,1.6,0,3.1,0,4.6c-1.6,0-3.1,0-4.7,0
+                c0-1.5,0-3.1,0-4.7c1.6,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.7c1.6,0,3.1,0,4.6,0c0-1.6,0-3.1,0-4.7c-1.6,0-3.1,0-4.7,0
+                c0-1.6,0-3.1,0-4.6c-1.6,0-3.1,0-4.6,0C1603,31.2,1603,29.7,1602.9,28.2L1602.9,28.2z"/>
+              <path d="M1617,79.8c1.5,0,3.1,0,4.7,0c0,3.1,0,6.2,0,9.4c3.2,0,6.3,0,9.5,0c0,1.6,0,3.2,0,4.8l0,0c-1.6,0-3.1,0-4.8,0
+                c0,4.7,0,9.4,0,14c-1.6,0-3.2,0-4.7,0c0-4.7,0-9.3,0-14.1c-1.6,0-3.1,0-4.7,0C1617,89.2,1617,84.5,1617,79.8L1617,79.8z"/>
+              <path d="M1631.1,94c1.5,0,3,0,4.6,0c0,1.5,0,3,0,4.6c1.6,0,3.1,0,4.7,0c0,3.2,0,6.3,0,9.4c-1.5,0-3,0-4.6,0c0,1.6,0,3.1,0,4.7
+                c-1.6,0-3.1,0-4.7,0l0,0c0-1.6,0-3.1,0-4.8c1.6,0,3.1,0,4.6,0c0-3.1,0-6.2,0-9.4c-1.6,0-3.1,0-4.6,0
+                C1631.1,97,1631.1,95.5,1631.1,94L1631.1,94z"/>
+              <path d="M1631.1,117.5c1.5,0,3,0,4.6,0c0,1.5,0,3.1,0,4.7c1.6,0,3.1,0,4.7,0c0,3.2,0,6.2,0,9.4c-1.6,0-3.1,0-4.7,0
+                c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.6,0l0,0c0-1.5,0-3.1,0-4.7c1.5,0,3.1,0,4.6,0c0-3.2,0-6.2,0-9.4c-1.6,0-3.1,0-4.6,0
+                C1631.1,120.5,1631.1,119,1631.1,117.5L1631.1,117.5z"/>
+              <path d="M1631.1,136.2c0,1.5,0,3.1,0,4.7c-4.7,0-9.4,0-14.2,0c0-1.6,0-3.1,0-4.7l0,0C1621.7,136.2,1626.4,136.2,1631.1,136.2
+                L1631.1,136.2z"/>
+              <path d="M1532.4,108c-1.5,0-3.1,0-4.7,0c0-3.1,0-6.2,0-9.4c1.5,0,3.1,0,4.7,0c0-1.6,0-3.1,0-4.6c1.6,0,3.2,0,4.7,0c0,0,0,0,0,0
+                c0,1.5,0,3.1,0,4.7c-1.6,0-3.1,0-4.7,0C1532.4,101.9,1532.4,104.9,1532.4,108L1532.4,108z"/>
+              <path d="M1763.6,136.2c0,1.5,0,3.1,0,4.7c-3.1,0-6.2,0-9.4,0c0-1.6,0-3.1,0-4.7c0,0,0,0,0,0
+                C1757.3,136.2,1760.5,136.2,1763.6,136.2L1763.6,136.2z"/>
+              <path d="M1570,136.2c0,1.5,0,3.1,0,4.7c-3.1,0-6.2,0-9.4,0c0-1.6,0-3.1,0-4.7c0,0,0,0,0,0C1563.7,136.2,1566.9,136.2,1570,136.2
+                L1570,136.2z"/>
+              <path d="M1532.4,131.5c-1.5,0-3.1,0-4.7,0c0-3.1,0-6.2,0-9.3c1.6,0,3.1,0,4.7,0l0,0C1532.4,125.3,1532.4,128.4,1532.4,131.5
+                L1532.4,131.5z"/>
+              <path d="M1612.2,136.2c0,1.5,0,3.1,0,4.7c-3.1,0-6.1,0-9.3,0c0-1.6,0-3.1,0-4.7c0,0,0,0,0,0C1606,136.2,1609.1,136.2,1612.2,136.2
+                L1612.2,136.2z"/>
+              <path d="M1782.4,108c0,1.6,0,3.2,0,4.7l0,0c-1.5,0-3.1,0-4.6,0c0-1.6,0-3.1,0-4.7C1779.4,108,1780.9,108,1782.4,108L1782.4,108z"
+                />
+              <path d="M1537.1,117.5c0-1.6,0-3.2,0-4.7l0,0c1.6,0,3.1,0,4.7,0c0,1.6,0,3.1,0,4.7C1540.2,117.5,1538.7,117.5,1537.1,117.5
+                L1537.1,117.5z"/>
+              <path d="M1560.6,37.6c0-1.5,0-3.1,0-4.7c1.6,0,3.2,0,4.7,0l0,0c0,1.5,0,3.1,0,4.7C1563.7,37.6,1562.1,37.6,1560.6,37.6
+                L1560.6,37.6z"/>
+              <path d="M1782.4,112.8c1.6,0,3.1,0,4.7,0c0,1.6,0,3.2,0,4.7l0,0c-1.5,0-3.1,0-4.7,0C1782.4,115.8,1782.4,114.3,1782.4,112.8
+                L1782.4,112.8z"/>
+              <path d="M1532.4,122.2c0-1.5,0-3.1,0-4.7c1.6,0,3.2,0,4.7,0l0,0c0,1.5,0,3.1,0,4.7C1535.5,122.2,1533.9,122.2,1532.4,122.2
+                L1532.4,122.2z"/>
+              <path d="M1537.1,112.7c-1.5,0-3.1,0-4.7,0c0-1.6,0-3.2,0-4.7c0,0,0,0,0,0c1.6,0,3.1,0,4.7,0
+                C1537.1,109.7,1537.1,111.2,1537.1,112.7L1537.1,112.7z"/>
+              <path d="M1754.2,28.2c1.6,0,3.1,0,4.7,0c0,1.6,0,3.2,0,4.7c0,0,0,0,0,0c-1.6,0-3.1,0-4.7,0C1754.2,31.2,1754.2,29.7,1754.2,28.2
+                L1754.2,28.2z"/>
+              <path d="M1565.3,32.9c0-1.6,0-3.1,0-4.7c1.6,0,3.2,0,4.7,0c0,0,0,0,0,0c0,1.6,0,3.1,0,4.7C1568.4,32.9,1566.8,32.9,1565.3,32.9
+                L1565.3,32.9z"/>
+              <path d="M1560.6,9.4c0-1.5,0-3.1,0-4.7c1.6,0,3.2,0,4.7,0c0,0,0,0,0,0c0,1.5,0,3.1,0,4.7C1563.7,9.4,1562.1,9.4,1560.6,9.4
+                L1560.6,9.4z"/>
+              <path d="M1537.1,136.2c-1.5,0-3.1,0-4.7,0c0-1.6,0-3.2,0-4.7c0,0,0,0,0,0c1.6,0,3.1,0,4.7,0
+                C1537.1,133.2,1537.1,134.7,1537.1,136.2L1537.1,136.2z"/>
+              <path d="M1631.1,112.7c0,1.6,0,3.2,0,4.7l0,0c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.2,0-4.7C1628.1,112.8,1629.6,112.8,1631.1,112.7
+                L1631.1,112.7z"/>
+              <path d="M1758.9,112.7c0,1.5,0,3.1,0,4.7c-15.7,0-31.3,0-47,0c0-1.6,0-3.1,0-4.7C1727.6,112.7,1743.3,112.7,1758.9,112.7z"/>
+              <path d="M1744.8,98.7c0,3.1,0,6.2,0,9.3c-6.2,0-12.5,0-18.7,0c0-3.1,0-6.2,0-9.3C1732.3,98.7,1738.5,98.7,1744.8,98.7z"/>
+              <path d="M1749.6,79.9c3.1,0,6.2,0,9.3,0c0,4.7,0,9.3,0,14c-3.1,0-6.2,0-9.3,0C1749.6,89.2,1749.6,84.6,1749.6,79.9z"/>
+              <path d="M1712,79.9c3.1,0,6.2,0,9.3,0c0,4.7,0,9.3,0,14c-3.1,0-6.2,0-9.3,0C1712,89.2,1712,84.6,1712,79.9z"/>
+              <path d="M1712,112.8c-3.1,0-6.2,0-9.5,0c0-1.6,0-3.2,0-4.7c3.1,0,6.2,0,9.5,0C1712,109.6,1712,111.2,1712,112.8z"/>
+              <path d="M1768.4,108c0,1.5,0,3.1,0,4.7c-3.2,0-6.3,0-9.5,0c0-1.5,0-3.1,0-4.7C1762.1,108,1765.3,108,1768.4,108z"/>
+              <path d="M1702.6,108c-1.5,0-3.1,0-4.7,0c0-1.6,0-3.2,0-4.7c1.5,0,3.1,0,4.7,0C1702.6,104.9,1702.6,106.5,1702.6,108z"/>
+              <path d="M1617,112.7c0,1.5,0,3.1,0,4.7c-3.1,0-6.2,0-9.4,0c0,1.6,0,3.1,0,4.7c-15.7,0-31.3,0-47,0c0-1.6,0-3.1,0-4.7
+                c15.6,0,31.3,0,47,0c0-1.6,0-3.1,0-4.7C1610.8,112.7,1613.9,112.7,1617,112.7z"/>
+              <path d="M1593.5,103.4c0,3.2,0,6.2,0,9.3c-6.2,0-12.5,0-18.7,0c0-3.1,0-6.2,0-9.3C1581,103.4,1587.2,103.4,1593.5,103.4z"/>
+              <path d="M1570,98.6c-3.1,0-6.2,0-9.3,0c0-4.7,0-9.3,0-14c3.1,0,6.2,0,9.3,0C1570,89.2,1570,93.9,1570,98.6z"/>
+              <path d="M1607.5,98.6c-3.1,0-6.2,0-9.3,0c0-4.7,0-9.3,0-14c3.1,0,6.2,0,9.3,0C1607.5,89.2,1607.5,93.9,1607.5,98.6z"/>
+              <path d="M1570,56.3c9.4,0,18.8,0,28.2,0c0,1.5,0,3.1,0,4.7c-9.4,0-18.8,0-28.2,0C1570,59.5,1570,57.9,1570,56.3z"/>
+              <path d="M1560.6,46.9c1.5,0,3.1,0,4.7,0c0,1.6,0,3.2,0,4.7c-1.5,0-3.1,0-4.7,0C1560.6,50,1560.6,48.5,1560.6,46.9z"/>
+              <path d="M1621.7,108c0,1.5,0,3.1,0,4.7c-1.6,0-3.2,0-4.7,0c0-1.5,0-3.1,0-4.7C1618.6,108,1620.1,108,1621.7,108z"/>
+              <path d="M1565.3,51.6c1.5,0,3.1,0,4.7,0c0,1.6,0,3.2,0,4.7c-1.6,0-3.1,0-4.7,0C1565.3,54.7,1565.3,53.2,1565.3,51.6z"/>
+              <path d="M1598.2,56.4c0-1.5,0-3.1,0-4.7c1.6,0,3.2,0,4.7,0c0,1.5,0,3.1,0,4.7C1601.3,56.4,1599.8,56.4,1598.2,56.4z"/>
+            </g>
+          </g>
+          </svg>
+      </div>  
+    </div>  
+    <div class="instruction">
+      &#42; click on the white area to play fetch with the puppy!
+    </div>  
+  </div>  
+
+  <div class="sign">
+    by masahito / <a href="http://www.ma5a.com/" >ma5a.com</a>
+  </div>
+
+</body>
\ No newline at end of file
diff --git a/search-algorithm-puppy/src/script.js b/search-algorithm-puppy/src/script.js
new file mode 100644
index 0000000..8076a3b
--- /dev/null
+++ b/search-algorithm-puppy/src/script.js
@@ -0,0 +1,387 @@
+function init() {
+  const map = document.querySelector('.map')
+  const spriteContainer = document.querySelector('.sprite_container')
+  const instruction = document.querySelector('.instruction')
+  const sprite = document.querySelector('.sprite')
+  const motionSpeed = 150
+  const height = 10
+  const width = 20
+  const delay = 20
+  let cellSize = 40
+  let spritePos = -cellSize
+  let x = 0
+  let y = 0
+  let instructionTimer
+  let motionTimer
+  let displayTimer
+  let boneTimer
+  let start = 42
+  let goal = 0
+  let carryOn = true
+  let triedAnotherWay = false
+  let route = []
+  let happy
+  let happyFrame = 10
+
+  const cellsWithWalls = [
+    31,45,69,68,71,73,82,83,85,88,91,94,95,96,98,105,110,111,112,123,125,128,137,141,142,143,145,146,154,156,157,171
+  ]
+
+  const bone = `
+    <svg class ="bone" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 151.9 151.9" >
+    <style type="text/css">
+    .st0{fill:#FFFFFF;}
+    </style>
+    <polygon class="st0" points="39.2,53.7 44.6,56.9 50.4,62.3 102.8,62.3 106.4,59.3 111.2,53.7 120.8,53.7 125.3,58 130.4,63.8 
+    130.4,67.2 125.1,73.2 120.6,77.3 124.8,81.5 130.4,86.5 130.4,91.6 125.9,95.7 120.8,100.4 111.4,100.4 106.9,96.3 101.9,91.6 
+    50,91.4 45.9,95.7 40.8,100.4 30.9,100.4 26.4,96.3 21.7,91.2 21.7,86.7 26.4,82.2 30.9,77.1 26.4,72.5 21.7,67.2 21.7,63.2 
+    27,58.1 30.7,53.7 "/>
+    <g>
+    <g>
+      <g>
+        <path d="M24.1,70.2c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.3,0-9.5c1.6,0,3.1,0,4.7,0c0-1.6,0-3.2,0-4.7c1.5,0,3,0,4.5,0c0-1.5,0-3,0-4.5
+          c4.8,0,9.5,0,14.3,0c0,1.5,0,2.9,0,4.5c1.6,0,3.2,0,4.8,0c0,1.6,0,3.2,0,4.7c18.9,0,37.7,0,56.5,0c0-1.6,0-3.1,0-4.7
+          c1.6,0,3.2,0,4.8,0c0-1.5,0-3,0-4.5c4.7,0,9.4,0,14.1,0c0,1.5,0,3,0,4.5c1.6,0,3.1,0,4.7,0c0,1.6,0,3.2,0,4.7c1.6,0,3.2,0,4.8,0
+          c0,3.2,0,6.4,0,9.6c-1.6,0-3.1,0-4.7,0c0,0,0,0,0,0c0-3.1,0-6.2,0-9.3c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7c-4.7,0-9.4,0-14.1,0
+          c0,1.6,0,3.1,0,4.7c-1.6,0-3.2,0-4.8,0c0,1.6,0,3,0,4.5c-18.9,0-37.7,0-56.5,0c0-1.5,0-3,0-4.5c-1.6,0-3.2,0-4.8,0
+          c0-1.6,0-3.2,0-4.7c-4.7,0-9.4,0-14,0c0,1.5,0,3,0,4.6c-1.6,0-3.2,0-4.7,0C24.2,64,24.2,67.1,24.1,70.2
+          C24.1,70.2,24.1,70.2,24.1,70.2z"/>
+        <path d="M127.9,93.8c0,1.6,0,3.1,0,4.7c-1.6,0-3.1,0-4.8,0c0,1.6,0,3.1,0,4.7c-4.7,0-9.3,0-14,0c0-1.6,0-3.1,0-4.7
+          c-1.6,0-3.2,0-4.8,0c0-1.6,0-3.2,0-4.8c-18.9,0-37.7,0-56.5,0c0,1.6,0,3.1,0,4.7c-1.6,0-3.2,0-4.9,0c0,1.6,0,3.2,0,4.7
+          c-4.7,0-9.3,0-14,0c-0.1-0.1-0.2-0.2-0.3-0.3c0-1.4,0-2.9,0-4.4c-1.5,0-3,0-4.6,0c0-1.6,0-3.2,0-4.7c0,0,0,0,0,0
+          c1.6,0,3.1,0,4.7,0c0,1.6,0,3,0,4.6c4.7,0,9.3,0,14,0c0-1.5,0-3,0-4.7c1.6,0,3.2,0,4.8,0c0-1.6,0-3.1,0-4.6c18.9,0,37.7,0,56.5,0
+          c0,1.5,0,3,0,4.6c1.6,0,3.2,0,4.8,0c0,1.7,0,3.2,0,4.7c4.7,0,9.3,0,14,0c0-1.5,0-3,0-4.5C124.8,93.8,126.3,93.8,127.9,93.8
+          C127.9,93.8,127.9,93.8,127.9,93.8z"/>
+        <path d="M24.1,93.8c-1.6,0-3.1,0-4.7,0c0-3.2,0-6.3,0-9.5c1.6,0,3.1,0,4.7,0c0-1.6,0-3.2,0-4.8c1.5,0,3,0,4.5,0c0-1.5,0-3,0-4.6
+          c-1.5,0-3,0-4.5,0c0-1.6,0-3.2,0-4.7c0,0,0,0,0,0c1.6,0,3.1,0,4.7,0c0,1.6,0,3,0,4.6c1.5,0,3,0,4.2,0c0.3,0.2,0.4,0.2,0.4,0.2
+          c0,1.7,0,3.2,0,4.8c-1.6,0-3.1,0-4.6,0c0,1.5,0,3,0,4.6c-1.6,0-3.2,0-4.7,0C24.2,87.6,24.2,90.7,24.1,93.8
+          C24.1,93.8,24.1,93.8,24.1,93.8z"/>
+        <path d="M127.9,70.2c0,1.6,0,3.1,0,4.7c-1.6,0-3.2,0-4.7,0c0,1.5,0,3,0,4.5c1.5,0,3.1,0,4.7,0c0,1.6,0,3.2,0,4.8
+          c1.6,0,3.2,0,4.8,0c0,3.2,0,6.3,0,9.6c-1.6,0-3.1,0-4.7,0c0,0,0,0,0,0c0-3.1,0-6.2,0-9.3c-1.6,0-3.1,0-4.7,0c0-1.6,0-3.1,0-4.7
+          c-1.6,0-3.2,0-4.7,0c0-1.6,0-3.2,0-4.9c1.5,0,3.1,0,4.7,0c0-1.7,0-3.1,0-4.7C124.8,70.1,126.3,70.1,127.9,70.2
+          C127.9,70.2,127.9,70.2,127.9,70.2z"/>
+      </g>
+    </g>
+    </g>
+  </svg>
+  `
+
+  const searchMemory = new Array(height * width).fill('').map(()=>{
+    return {
+      path: null,
+      searched: false,
+      prev: null
+    }
+  })
+
+  const mapMap = ()=>{
+    const mapArr = []   
+    for (let i = 0; i < (width * height); i++){
+      mapArr.push(i)
+    }
+
+    return mapArr.map((ele,i)=>{
+      const dataX = i % width
+      const dataY = Math.floor(i / width)
+
+      return `
+        <div 
+          class="map_tile"
+          data-index=${i}
+          data-x=${dataX}
+          data-y=${dataY}
+        >
+        </div>  
+      `
+    }).join('')
+  }
+
+  map.innerHTML = mapMap()
+  const mapTiles = document.querySelectorAll('.map_tile')
+
+  const setX = num =>{
+    x = num
+    spriteContainer.style.left = `${x}px`
+  }
+
+  const setY = num =>{
+    y = num
+    spriteContainer.style.top = `${y}px`
+  }
+
+  const setSpritePos = num =>{
+    spritePos = num
+    sprite.style.marginLeft = `${spritePos}px`
+  }
+
+  const positionSprite = pos =>{
+    const paraX = pos % width * cellSize
+    const paraY = Math.floor(pos / width) * cellSize
+    setX(paraX)
+    setY(paraY)
+  }
+
+  const NoWall = pos =>{
+    return !mapTiles[pos].classList.contains('wall')
+  }
+
+  const setUpWalls = ()=>{
+    cellsWithWalls.forEach(cell=>{
+      mapTiles[cell].classList.add('wall')
+    })
+    mapTiles.forEach(tile=>{
+      if (tile.dataset.y === '0' || 
+          tile.dataset.y === '9' || 
+          tile.dataset.x === '0' || 
+          tile.dataset.x === '19') tile.classList.add('wall')
+    })
+  }
+
+  const clearTiles = ()=>{
+    mapTiles[goal].innerHTML = ''
+    mapTiles.forEach(tile=>{
+      tile.className = 'map_tile'
+    })
+    setUpWalls()
+  }
+
+  const spriteWalk = e=>{
+    if (!e) return
+
+    const direction = e.key ? e.key.toLowerCase().replace('arrow','') : e
+    const current = (x / cellSize) + ((y / cellSize) * width)
+    let m = -cellSize
+    switch (direction) {
+      case 'right': 
+        if (x < ((width - 1) * cellSize) && NoWall(current + 1)) setX(x + cellSize)
+        m = spritePos === m * 8 ? m * 9 : m * 8
+        break
+      case 'left': 
+        if (x > 0 && NoWall(current - 1)) setX(x - cellSize)
+        m = spritePos === m * 6 ? m * 7 : m * 6
+        break
+      case 'up': 
+        if (y > 0 && NoWall(current - width)) setY(y - cellSize)
+        m = spritePos === m * 3 ? m * 5 : m * 3
+        break
+      case 'down': 
+        if (y < ((height - 1) * cellSize) && NoWall(current + width)) setY(y + cellSize)
+        m = spritePos === m * 0 ? m * 2 : m * 0
+        break
+      default:
+        console.log('invalid command')
+    }
+    setSpritePos(m)
+    start = (x / cellSize) + ((y / cellSize) * width)
+    if (goal === (x / cellSize) + ((y / cellSize) * width)) {
+      boneTimer = setTimeout(()=>{
+        mapTiles[goal].innerHTML = ''
+        animateHappyDog()
+      },100)  
+    }
+  }
+
+  const chainMotion = (instruction,index) => {
+    if (index >= instruction.length) return
+    
+    spriteWalk(instruction[index])
+    motionTimer = setTimeout(()=>{
+      chainMotion(instruction, index + 1)
+    },motionSpeed)
+  }
+
+  const displayPath = current =>{
+    searchMemory[current].path = 'path'
+    mapTiles[current].classList.add('path')
+    let prev = searchMemory[current].prev
+    
+    //! when sprite is one square away from start and prev is undefined, prev is corrected.
+    if (current - width === start ||
+      current + width === start ||
+      current - 1 === start ||
+      current + 1 === start) prev = start
+
+    let direction
+    if (current - width === prev) direction = 'down'
+    if (current + width === prev) direction = 'up'
+    if (current - 1 === prev) direction = 'right'
+    if (current + 1 === prev) direction = 'left'
+    
+    if (prev) route.push(direction)
+
+    if (!prev) {
+      route.push('reset')
+      return
+    }
+
+    if (prev === start || !prev) {
+      const reversedRoute = route.reverse()
+      chainMotion(reversedRoute,0)
+      return
+    }
+
+    displayTimer = setTimeout(()=>{
+      displayPath(prev)
+    },delay)
+  }
+
+  const distanceBetween = (a,b) =>{
+    return Math.abs(a % width - b % width) + Math.abs(Math.floor(a / width) - Math.floor(b / width))
+  }
+
+  const decideNextMove = (current, count) =>{
+    if (!carryOn) return
+    const possibleDestination = [
+      current + 1,
+      current - 1,
+      current - width,
+      current + width  
+    ]
+    const mapInfo = []
+    if (possibleDestination.filter(cell=> cell === goal).length === 1) {
+      carryOn = false
+      searchMemory[goal].prev = current
+      displayPath(goal)
+      return
+    }
+    possibleDestination.forEach(option=>{  
+      if (mapTiles[option] && 
+          !mapTiles[option].classList.contains('wall') && 
+          !searchMemory[option].searched && 
+          option !== start) {
+        mapInfo.push(
+          { 
+            cell: option,
+            prev: current,
+            distanceFromStart: distanceBetween(start,option),
+            distanceToGoal: distanceBetween(goal,option)
+          }
+        )
+      }
+    })
+    const minValue = Math.min(...mapInfo.map(cell=> cell.distanceFromStart + cell.distanceToGoal))
+    const optionsWithMinValue = mapInfo.filter(cell=> (cell.distanceFromStart + cell.distanceToGoal) === minValue)
+
+    mapInfo.filter(cell=> (cell.distanceFromStart + cell.distanceToGoal) !== minValue).forEach(option=>{
+      mapTiles[option.cell].classList.add('sub_node')
+    })
+
+    if (optionsWithMinValue.length === 0 && !triedAnotherWay) {
+      triedAnotherWay = true
+      tryAnotherWay(count)
+    }
+
+    optionsWithMinValue.forEach(option=>{
+      searchMemory[option.cell].searched = true 
+      searchMemory[option.cell].prev = current
+      mapTiles[option.cell].classList.add('node')   
+      setTimeout(()=>{
+        decideNextMove(option.cell, count + 1)
+      },delay)
+    })
+  }
+
+  const tryAnotherWay = count =>{
+    if (!carryOn) return
+    const possibleDestination = [
+      start + 1,
+      start - 1,
+      start - width,
+      start + width  
+    ]
+    possibleDestination.forEach(path=>{
+      if (mapTiles[path] && 
+          !searchMemory[path].searched && 
+          !mapTiles[path].classList.contains('wall')) {
+        decideNextMove(path, count + 1)
+      }
+    })
+  }
+
+  const resetMotion = () =>{
+    clearTimeout(motionTimer)
+    clearTimeout(displayTimer)
+    clearTimeout(boneTimer)
+    clearInterval(happy)
+    clearTiles()
+    searchMemory.forEach(memory=>{
+      memory.path = null,
+      memory.searched = false,
+      memory.prev = null
+    })
+    route = []
+    carryOn = true
+    triedAnotherWay = false
+  }
+
+  const triggerMotion = e =>{
+    if (Number(e.target.dataset.index) === goal || !e.target.dataset.index) return 
+    instruction.classList.add('hide')
+    clearTimeout(instructionTimer)
+    instructionTimer = setTimeout(()=>{
+      instruction.classList.remove('hide')
+    },5 * 1000)
+    mapTiles[goal].innerHTML = ''
+    goal = Number(e.target.dataset.index)
+    if (mapTiles[goal].classList.contains('wall')) return
+    resetMotion()
+    mapTiles[start].classList.add('start')
+    positionSprite(start)
+    mapTiles[goal].classList.add('goal')
+    mapTiles[goal].innerHTML = bone
+    searchMemory[start].path = 'start'
+    searchMemory[goal].path = 'goal'
+    decideNextMove(start, 0)
+  }
+
+  const animateHappyDog = () =>{
+    happy = setInterval(()=>{
+      happyFrame = happyFrame === 10 ? 11 : 10
+      setSpritePos(happyFrame * -cellSize)
+    },150)
+  }
+
+  //! comment this bit out to enable keyboard control
+  // window.addEventListener('keydown', spriteWalk)
+
+   const resize = () =>{
+    const wrapper = document.querySelector('.wrapper')
+    let pWidth = 800
+    if (wrapper.offsetWidth < 800) {
+      pWidth = wrapper.offsetWidth
+    } 
+    cellSize = Math.floor(pWidth / width)
+    const calcWidth = Math.floor(pWidth / width) * width
+    const mapCover = document.querySelector('.map_cover')
+
+    //*resize sprite
+    positionSprite(start)
+    setSpritePos(-cellSize)
+    sprite.style.height = `${cellSize}px`
+    sprite.style.width = `${cellSize * 12}px`
+    spriteContainer.style.height = `${cellSize}px`
+    spriteContainer.style.width = `${cellSize}px`
+
+    //* resize map
+    map.style.width = `${calcWidth}px`
+    map.style.height = `${calcWidth / 2}px`
+    mapCover.style.width = `${calcWidth}px`
+    mapCover.style.height = `${calcWidth / 2}px`
+    mapCover.style.marginTop = `-${calcWidth / 2}px`
+    mapTiles.forEach(tile=>{
+      tile.style.width = `${cellSize}px`
+      tile.style.height = `${cellSize}px`
+    })
+  }
+  
+  //*setup
+  setUpWalls()
+  positionSprite(start)
+  mapTiles.forEach(mapTile=>{
+    mapTile.addEventListener('click', triggerMotion)
+  })
+  resize()
+  window.addEventListener('resize', resize)
+}
+
+window.addEventListener('DOMContentLoaded', init)
\ No newline at end of file
diff --git a/search-algorithm-puppy/src/style.css b/search-algorithm-puppy/src/style.css
new file mode 100644
index 0000000..93946be
--- /dev/null
+++ b/search-algorithm-puppy/src/style.css
@@ -0,0 +1,128 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  background-color: rgb(67, 65, 88);
+}
+
+.wrapper {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.map {
+  height: 400px;
+  width: 800px;
+  background-color: rgb(255, 255, 255);
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.map_tile {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  font-size: 10px;
+  color: transparent;
+  transition:0.5s;
+  cursor: pointer;
+}
+
+.map_cover {
+  margin-top: -400px;
+  height: 400px;
+  width: 800px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.sprite_container {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  transition: 0.3s;
+  overflow: hidden;
+}
+
+.sprite  {
+  position: absolute;
+  height: 40px;
+  width: 420px;
+}
+
+.bone {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  animation: throw forwards 0.3s;
+}
+
+@keyframes throw {
+  0% { top: 100vh; transform: rotate(-200deg);}
+  60% { top: -20vh; transform: rotate(0);}
+  80% {transform: rotate(500deg); }
+  90% {top: -10px; transform: rotate(255deg); }
+  100% {top: 0; transform: rotate(360deg);}
+}
+
+.start { background-color: rgb(91, 248, 156); }
+
+.wall { 
+  background-color: rgb(17, 2, 83); 
+  cursor: auto;
+}
+
+.node { background-color: rgb(196, 245, 250); }
+
+.path { background-color: rgb(33, 233, 139); }
+
+
+/* used for debugging and refining algorithm */
+/* .sub_node { background-color: rgb(196, 255, 247); }
+
+.sub_node.node{ background-color: rgb(156, 253, 240); }
+
+.sub_node.node.path{ background-color: rgb(33, 233, 139); } */
+
+.sign {
+  position: absolute;
+  color: white;
+  bottom: 10px;
+  right: 10px;
+  font-size: 10px;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.instruction {
+  width: 100%;
+  max-width: 800px;
+  margin: 10px 0 0 0;
+  font-size: 15px;
+  color: white;
+  opacity: 1;
+  transition: 1s;
+}
+
+.instruction.hide {
+  opacity: 0;
+}
\ No newline at end of file
diff --git a/selected-demos-2019-2020/README.markdown b/selected-demos-2019-2020/README.markdown
new file mode 100644
index 0000000..fb2e0bc
--- /dev/null
+++ b/selected-demos-2019-2020/README.markdown
@@ -0,0 +1,5 @@
+# Selected Demos 2019-2020
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/OJRjBoj](https://codepen.io/cobra_winfrey/pen/OJRjBoj).
+
+Collection of a handful of my demos from 2019-2020, used as a showcase to share with coworkers & built with GSAP Scrolltrigger & Splitting.js
diff --git a/selected-demos-2019-2020/dist/index.html b/selected-demos-2019-2020/dist/index.html
new file mode 100644
index 0000000..6a6c2b6
--- /dev/null
+++ b/selected-demos-2019-2020/dist/index.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Selected Demos 2019-2020</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id='wrap'>
+  <h1 data-splitting='words'>Selected Demos</h1>
+  <p class='subhead'>Adam Kuhn</p>
+  <div class='panel'>
+    <h2 class='dark' data-splitting='words'>3D CSS Letter Transition</h2>
+    <div class='thumb'>
+      <p>CSS • 3D • Animation</p>
+      <div class='inner'>
+        <img class='invert' loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/xxVJZwo.default.png?fit=cover&amp;format=auto&amp;ha=true&amp;height=540&amp;quality=75&amp;v=2&amp;version=1569360312&amp;width=960'>
+      </div>
+    </div>
+  </div>
+  <div class='panel'>
+    <h2 data-splitting='words'>Generative Patterns 8</h2>
+    <div class='thumb'>
+      <p>Generative • CSS Vars • GSAP</p>
+      <div class='inner'>
+        <img class='light' loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/wvGyKEY.default.png?fit=cover&amp;format=auto&amp;ha=true&amp;height=540&amp;quality=75&amp;v=2&amp;version=1599706499&amp;width=960'>
+      </div>
+    </div>
+  </div>
+  <div class='panel'>
+    <h2 data-splitting='words'>NES Subscribe</h2>
+    <div class='thumb'>
+      <p>8-Bit • Form Input • Animation</p>
+      <div class='inner'>
+        <img loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/OJVJJoj.default.png?fit=cover&amp;format=auto&amp;ha=true&amp;height=540&amp;quality=75&amp;v=2&amp;version=1569360312&amp;width=960'>
+      </div>
+    </div>
+  </div>
+  <div class='panel'>
+    <h2 data-splitting='words'>CSS Neumorphic Toggle</h2>
+    <div class='thumb'>
+      <p>CSS • 3D • No JS</p>
+      <div class='inner'>
+        <img loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/YzXOBEN.default.png?fit=cover&amp;format=auto&amp;ha=true&amp;height=540&amp;quality=75&amp;v=2&amp;version=1569360312&amp;width=960'>
+      </div>
+    </div>
+  </div>
+  <div class='panel'>
+    <h2 data-splitting='words'>Take Me On</h2>
+    <div class='thumb'>
+      <p>Webcam • SVG • Canvas</p>
+      <div class='inner'>
+        <img class='light' loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/qBZWVmO.custom.png'>
+      </div>
+    </div>
+  </div>
+  <div class='panel'>
+    <h2 data-splitting='words'>SVG Turbulence Animation</h2>
+    <h2 data-splitting='words'>SVG Turbulence Animation</h2>
+    <div class='thumb'>
+      <p>SVG • Generative • Animation</p>
+      <div class='inner'>
+        <img loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/eYOXOdB.default.png?fit=cover&amp;format=auto&amp;ha=true&amp;height=540&amp;quality=75&amp;v=2&amp;version=1569360312&amp;width=960'>
+      </div>
+    </div>
+  </div>
+  <div class='panel'>
+    <h2 data-splitting='words'>Pure CSS Product Card</h2>
+    <h2 data-splitting='words'>Pure CSS Product Card</h2>
+    <div class='thumb'>
+      <p>HAML • No JS • Animation</p>
+      <div class='inner'>
+        <img class='shift' loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/OJXJeod.default.png?fit=cover&amp;format=auto&amp;ha=true&amp;height=540&amp;quality=75&amp;v=2&amp;version=1569360312&amp;width=960'>
+      </div>
+    </div>
+  </div>
+  <div class='panel'>
+    <h2 data-splitting='words'>Swissted Animated Flyers</h2>
+    <h2 data-splitting='words'>Swissted Animated Flyers</h2>
+    <div class='thumb'>
+      <p>Responsive • HAML • CSS Animation</p>
+      <div class='inner'>
+        <img loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/PoqVQRq.default.png?fit=cover&amp;format=auto&amp;ha=true&amp;height=540&amp;quality=75&amp;v=2&amp;version=1585620527&amp;width=960'>
+      </div>
+    </div>
+  </div>
+  <div class='panel'>
+    <h2 data-splitting='words'>Pure CSS Gritty</h2>
+    <h2 data-splitting='words'>Pure CSS Gritty</h2>
+    <div class='thumb'>
+      <p>CSS • HAML</p>
+      <div class='inner'>
+        <img class='lighter' loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/qgEGMZ.default.png?fit=cover&amp;format=auto&amp;ha=false&amp;height=540&amp;quality=75&amp;v=2&amp;version=1548377726&amp;width=960'>
+      </div>
+    </div>
+  </div>
+  <div class='panel'>
+    <h2 data-splitting='words'>Canyonlands</h2>
+    <h2 data-splitting='words'>Canyonlands</h2>
+    <div class='thumb'>
+      <p>GENERATIVE • JS • SVG</p>
+      <div class='inner'>
+        <img class='light' loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/RwWYGxj.default.png?fit=cover&amp;format=auto&amp;ha=false&amp;height=540&amp;quality=75&amp;v=2&amp;version=1548377726&amp;width=960'>
+      </div>
+    </div>
+  </div>
+  <p class='subhead final'>Fin</p>
+</div>
+<div id='frame'>
+  <div id='close'>
+    <div></div>
+    <strong class='circle' data-splitting='chars'>GO•BACK•</strong>
+  </div>
+  <div class='frame-wrap'>
+    <div class='frame-container'>
+      <iframe id='pen' loading='lazy' src='' style='border:0'></iframe>
+      <a id='penlink' target='_blank'><strong>View the Code <span>&rarr;</span></strong></a>
+    </div>
+  </div>
+</div>
+<div id='cursor'>
+  <strong class='circle' data-splitting='chars'>SEE•MORE•</strong>
+</div>
+<div id='loader'>
+  <div class='wrap'>
+    <span>L</span>
+    <span>O</span>
+    <span>A</span>
+    <span>D</span>
+    <span>I</span>
+    <span>N</span>
+    <span>G</span>
+    <span>•</span>
+    <span>•</span>
+    <span>•</span>
+  </div>
+</div>
+<div id='social'>
+  <a href='https://twitter.com/cobra_winfrey' target='_blank'>
+    <svg clip-rule='evenodd' fill-rule='evenodd' image-rendering='optimizeQuality' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' viewbox='0 0 3333 3333' xmlns='http://www.w3.org/2000/svg'>
+      <path d='M1667 0c920 0 1667 746 1667 1667 0 920-746 1667-1667 1667C747 3334 0 2588 0 1667 0 747 746 0 1667 0zm900 1108c-66 30-137 49-212 58 76-46 135-118 162-204-71 42-151 73-234 90-68-72-163-116-270-116-204 0-369 165-369 369 0 29 3 57 9 84-307-16-579-162-761-386-33 56-50 120-50 186 0 128 65 241 164 307-61-2-117-19-167-46v5c0 179 127 328 296 362-31 8-64 13-97 13-24 0-47-2-70-7 47 147 183 253 345 257-127 99-285 158-459 158-30 0-59-2-88-5 164 105 358 166 566 166 679 0 1051-563 1051-1051 0-16 0-32-1-48 72-52 135-117 184-191z'></path>
+    </svg>
+    <a href='https://codepen.io/cobra_winfrey' target='_blank'>
+      <svg aria-hidden='true' class='svg-inline--fa fa-codepen fa-w-16 fa-3x' data-icon='codepen' data-prefix='fab' focusable='false' role='img' viewbox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
+        <path d='M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278 63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234 63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234 346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857 51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z' fill='currentColor'></path>
+      </svg>
+    </a>
+  </a>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.com/splitting@1.0.5/dist/splitting.min.js'></script>
+<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/selected-demos-2019-2020/dist/script.js b/selected-demos-2019-2020/dist/script.js
new file mode 100644
index 0000000..42771c5
--- /dev/null
+++ b/selected-demos-2019-2020/dist/script.js
@@ -0,0 +1,155 @@
+let cursor = document.getElementById("cursor");
+let close = document.getElementById("close");
+let body = document.body;
+let iframe = document.getElementById("pen");
+let penLink = document.getElementById("penlink");
+let links = document.getElementsByTagName("a");
+
+let frames = [
+  "https://codepen.io/cobra_winfrey/debug/xxVJZwo",
+  "https://cdpn.io/cobra_winfrey/debug/wvGyKEY",
+  "https://codepen.io/cobra_winfrey/debug/OJVJJoj",
+  "https://cdpn.io/cobra_winfrey/debug/YzXOBEN",
+  "https://codepen.io/cobra_winfrey/debug/qBZWVmO",
+  "https://codepen.io/cobra_winfrey/debug/eYOXOdB",
+  "https://codepen.io/cobra_winfrey/debug/OJXJeod",
+  "https://codepen.io/cobra_winfrey/debug/PoqVQRq",
+  "https://cdpn.io/cobra_winfrey/debug/qgEGMZ",
+  "https://codepen.io/cobra_winfrey/debug/RwWYGxj"
+];
+
+// Load iFrames on demand & remove after modal is closed to reduce weight & smooth out transitions
+
+
+let cards = document.getElementsByClassName("inner");
+for (let i = 0; i < cards.length; i++) {
+  cards[i].addEventListener("mousemove", function (event) {
+    cursor.classList.add("active");
+  });
+  cards[i].addEventListener("mouseover", function (event) {
+    cursor.classList.add("active");
+  });
+
+  cards[i].addEventListener("mouseout", function (event) {
+    cursor.classList.remove("active");
+  });
+  cards[i].addEventListener(
+    "click",
+    function (i) {
+      body.classList.add("active");
+      iframe.setAttribute("src", frames[i]);
+      let penDebug = frames[i];
+      let penFull = penDebug.replace("debug", "pen");
+      penLink.setAttribute("href", penFull);
+    }.bind(null, i)
+  );
+}
+
+// hover events for social links
+
+for (link of links) {
+  link.addEventListener("mouseover", function (event) {
+    cursor.classList.add("linkhover");
+  });
+  link.addEventListener("mousemove", function (event) {
+    cursor.classList.add("linkhover");
+  });
+  link.addEventListener("mouseout", function (event) {
+    cursor.classList.remove("linkhover");
+  });
+}
+
+// Escape key option to exit active state
+
+document.onkeydown = function (evt) {
+  evt = evt || window.event;
+  let isEscape = false;
+  if ("key" in evt) {
+    isEscape = evt.key === "Escape" || evt.key === "Esc";
+  } else {
+    isEscape = evt.keyCode === 27;
+  }
+  if (isEscape) {
+    body.classList.remove("active");
+    setTimeout(() => {
+      iframe.setAttribute("src", "");
+    }, 2000);
+  }
+};
+
+close.addEventListener("click", function (event) {
+  body.classList.remove("active");
+  setTimeout(() => {
+    iframe.setAttribute("src", "");
+  }, 2000);
+});
+
+gsap.set("#cursor", { xPercent: -50, yPercent: -50 });
+const pos = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+const mouse = { x: pos.x, y: pos.y };
+const speed = 0.35;
+
+const xSet = gsap.quickSetter(cursor, "x", "px");
+const ySet = gsap.quickSetter(cursor, "y", "px");
+
+window.addEventListener("mousemove", (e) => {
+  mouse.x = e.x;
+  mouse.y = e.y;
+});
+
+gsap.ticker.add(() => {
+  const dt = 1.0 - Math.pow(1.0 - speed, gsap.ticker.deltaRatio());
+
+  pos.x += (mouse.x - pos.x) * dt;
+  pos.y += (mouse.y - pos.y) * dt;
+  xSet(pos.x);
+  ySet(pos.y);
+});
+
+Splitting();
+
+// Individual section scroll progress
+
+gsap.utils.toArray(".panel").forEach((section, index) => {
+  gsap.to(this, {
+    scrollTrigger: {
+      trigger: section,
+      start: "top 100%",
+      end: "bottom 25%",
+      scrub: 0,
+      onUpdate: (self) => {
+        section.style.setProperty("--progress", self.progress);
+      }
+    }
+  });
+});
+
+// Full page scroll progress
+
+gsap.to("body", {
+  scrollTrigger: {
+    trigger: "body",
+    start: "top 100%",
+    end: "50% 50%",
+    scrub: 0,
+    onUpdate: (self) => {
+      body.style.setProperty("--progress", self.progress);
+    }
+  }
+});
+
+// Pull out the preloader
+
+document.addEventListener("DOMContentLoaded", function () {
+  body.classList.add("loaded");
+});
+
+// Set a delay on Scrolltrigger recalculation to accommodate element transition times
+
+function refresh() {
+  setTimeout(() => {
+    ScrollTrigger.refresh();
+  }, 2500);
+}
+
+window.addEventListener("resize", refresh);
\ No newline at end of file
diff --git a/selected-demos-2019-2020/dist/style.css b/selected-demos-2019-2020/dist/style.css
new file mode 100644
index 0000000..b5ec82a
--- /dev/null
+++ b/selected-demos-2019-2020/dist/style.css
@@ -0,0 +1,1263 @@
+@font-face {
+  font-family: "Bogart-Semibold";
+  src: url("https://assets.codepen.io/383755/bogart-semibold.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+body {
+  scroll-behavior: smooth;
+  background: #eeece5;
+  cursor: none;
+  font-family: "Lexend Mega", sans-serif;
+  pointer-events: none;
+  transition-delay: 2s;
+  max-width: 100vw;
+  box-sizing: border-box;
+}
+body #social {
+  z-index: 97;
+  position: fixed;
+  right: 10px;
+  box-sizing: border-box;
+  top: 10px;
+  width: 30px;
+  height: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+body #social a:last-of-type svg {
+  transform: translateX(150px);
+}
+body #social a:hover svg {
+  transform: scale(0.9);
+}
+body #social a:hover svg path {
+  fill: #08350e;
+}
+body #social svg {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  transition: 0.2s ease-in-out, transform 0.6s cubic-bezier(1, 0.885, 0.32, 1);
+  transform: translateY(-150px);
+}
+body #social svg path {
+  fill: #a58725;
+  transition: 0.2s ease-in-out;
+}
+body #loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #eeece5;
+  position: fixed;
+  box-sizing: border-box;
+  width: calc(100vw - 5px);
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  transition: transform 0.6s cubic-bezier(1, 0.885, 0.32, 1);
+  transition-delay: 1.25s;
+  transform-origin: bottom;
+  background: #fe4e01;
+  transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+body #loader:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 75%;
+  top: -75%;
+  background: #a58725;
+  -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
+          clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
+}
+body #loader .wrap {
+  width: 10px;
+  height: 10px;
+  position: relative;
+  -webkit-animation: rotate 5s linear infinite;
+          animation: rotate 5s linear infinite;
+  transition: opacity 0.4s ease-in-out, -webkit-animation-play-state 2s ease-in-out;
+  transition: opacity 0.4s ease-in-out, animation-play-state 2s ease-in-out;
+  transition: opacity 0.4s ease-in-out, animation-play-state 2s ease-in-out, -webkit-animation-play-state 2s ease-in-out;
+  transition-delay: 0s, 0.4s;
+}
+body #loader .wrap span {
+  color: #fff;
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+  transform-origin: 50% 40px;
+  top: -34px;
+  -webkit-animation: popping 0.25s ease-in-out infinite alternate;
+          animation: popping 0.25s ease-in-out infinite alternate;
+}
+@-webkit-keyframes popping {
+  to {
+    top: -24px;
+  }
+}
+@keyframes popping {
+  to {
+    top: -24px;
+  }
+}
+body #loader .wrap span:nth-of-type(1) {
+  transform: rotate(36deg);
+  -webkit-animation-delay: -0.0625s;
+          animation-delay: -0.0625s;
+}
+body #loader .wrap span:nth-of-type(2) {
+  transform: rotate(72deg);
+  -webkit-animation-delay: -0.125s;
+          animation-delay: -0.125s;
+}
+body #loader .wrap span:nth-of-type(3) {
+  transform: rotate(108deg);
+  -webkit-animation-delay: -0.1875s;
+          animation-delay: -0.1875s;
+}
+body #loader .wrap span:nth-of-type(4) {
+  transform: rotate(144deg);
+  -webkit-animation-delay: -0.25s;
+          animation-delay: -0.25s;
+}
+body #loader .wrap span:nth-of-type(5) {
+  transform: rotate(180deg);
+  -webkit-animation-delay: -0.3125s;
+          animation-delay: -0.3125s;
+}
+body #loader .wrap span:nth-of-type(6) {
+  transform: rotate(216deg);
+  -webkit-animation-delay: -0.375s;
+          animation-delay: -0.375s;
+}
+body #loader .wrap span:nth-of-type(7) {
+  transform: rotate(252deg);
+  -webkit-animation-delay: -0.4375s;
+          animation-delay: -0.4375s;
+}
+body #loader .wrap span:nth-of-type(8) {
+  transform: rotate(288deg);
+  -webkit-animation-delay: -0.5s;
+          animation-delay: -0.5s;
+}
+body #loader .wrap span:nth-of-type(9) {
+  transform: rotate(324deg);
+  -webkit-animation-delay: -0.5625s;
+          animation-delay: -0.5625s;
+}
+body #loader .wrap span:nth-of-type(10) {
+  transform: rotate(360deg);
+  -webkit-animation-delay: -0.625s;
+          animation-delay: -0.625s;
+}
+body.loaded {
+  pointer-events: all;
+}
+body.loaded #social a:nth-of-type(1n) svg {
+  transform: translateX(0);
+  transition-delay: 0s, 2.4s;
+}
+body.loaded #social a:last-of-type svg {
+  transition-delay: 0s, 2.6s;
+}
+body.loaded #loader {
+  transform: scaleY(0);
+  color: transparent;
+}
+body.loaded #loader .wrap {
+  opacity: 0;
+  -webkit-animation-iteration-count: 4;
+          animation-iteration-count: 4;
+}
+body.loaded #loader .wrap span {
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+body.loaded #wrap {
+  transform: translateX(0%);
+  background: #eeece5;
+}
+body.loaded #wrap p.subhead {
+  transform: translateY(0);
+  opacity: 1;
+  transition-delay: 2s;
+}
+body.loaded #wrap .panel {
+  opacity: 1;
+  transition-delay: 1.75s;
+}
+body.loaded #wrap .panel:before {
+  opacity: 0.15;
+  transition-delay: 2.5s;
+}
+body.loaded #wrap h1 {
+  transition-delay: 1.75s;
+  transform: scaleX(1);
+}
+body.loaded #wrap h1 span.word:before {
+  transform: translate(-50%, -50%);
+  background-position: 50% 0%;
+  transition-delay: 2s, 2s;
+}
+body.loaded::-webkit-scrollbar {
+  background: #a58725;
+  width: 5px;
+}
+body::-webkit-scrollbar {
+  background: #fe4e01;
+  width: 5px;
+}
+body::-webkit-scrollbar-thumb {
+  background: #fe4e01;
+}
+body.active {
+  cursor: auto;
+  overflow: hidden;
+}
+body.active #frame .frame-container #penlink {
+  transform: rotate(0deg);
+  transition-delay: 0.3s, 2s;
+}
+body.active #frame .frame-container #penlink span {
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+}
+body.active #wrap {
+  transform: translateX(-125vw);
+  transition-delay: 0s;
+}
+body.active #wrap .panel h2 span.word:before {
+  transform: translate(-50%, 100px);
+  transition: 0s ease-in-out;
+  transition-delay: 0s;
+}
+body.active #frame {
+  transform: translateX(0);
+  transition-delay: 0.25s;
+}
+body.active #frame #close {
+  transform: rotate(180deg) scale(1);
+  transition-delay: 1.2s, 0s;
+}
+body.active #frame #close strong .word {
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+}
+body.active #frame #close strong span.char:before {
+  transform: translateY(0);
+}
+body.active #frame #close:hover {
+  box-shadow: 0 0 0 2px #fe4e01, inset 0 0 0 20px #fe4e01, 0 0 0 20px #eeece5, 0 0 0 22px #fe4e01;
+}
+body.active #frame #close:hover strong span.char:before {
+  color: #08350e;
+}
+body.active #frame #close div {
+  transition-delay: 1.8s;
+  transform: scaleX(1);
+  transform-origin: left;
+}
+body.active #frame #close:before, body.active #frame #close:after {
+  transition-delay: 2.1s;
+}
+body.active #frame #close:before {
+  transform: scaleY(1) rotate(-45deg);
+}
+body.active #frame #close:after {
+  transform: scaleY(1) rotate(45deg);
+}
+body.active #frame:before, body.active #frame:after {
+  transition-delay: 0.75s;
+  transform: translateX(-175%) skewX(5deg);
+}
+body.active #frame:after {
+  transform: translateX(-150%) skewX(-15deg);
+}
+body.active #frame .frame-container iframe {
+  -webkit-clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%);
+          clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%);
+  visibility: visible;
+  opacity: 1;
+}
+body #close strong.circle {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+body #close strong.circle span.word span.char:before {
+  color: #fe4e01;
+}
+body #close strong.circle span.word span.char:nth-of-type(1) {
+  transform: rotate(0deg);
+}
+body #close strong.circle span.word span.char:nth-of-type(2) {
+  transform: rotate(45deg);
+}
+body #close strong.circle span.word span.char:nth-of-type(3) {
+  transform: rotate(90deg);
+}
+body #close strong.circle span.word span.char:nth-of-type(4) {
+  transform: rotate(135deg);
+}
+body #close strong.circle span.word span.char:nth-of-type(5) {
+  transform: rotate(180deg);
+}
+body #close strong.circle span.word span.char:nth-of-type(6) {
+  transform: rotate(225deg);
+}
+body #close strong.circle span.word span.char:nth-of-type(7) {
+  transform: rotate(270deg);
+}
+body #close strong.circle span.word span.char:nth-of-type(8) {
+  transform: rotate(315deg);
+}
+body strong.circle {
+  position: relative;
+  width: 30px;
+  height: 30px;
+  border-radius: 100%;
+  line-height: 1;
+  margin: 0;
+  transition: 0.3s ease-in-out;
+}
+body strong.circle:before {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 2px;
+  background: #eeece5;
+  top: calc(50% - 1px);
+  left: 5px;
+  transition: 0.3s ease-in-out;
+  transform-origin: left;
+  transform: scaleX(0);
+  transition-delay: 0.6s;
+}
+body strong.circle span.word {
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  left: 50%;
+  top: 50%;
+  -webkit-animation: rotate 10s linear infinite;
+          animation: rotate 10s linear infinite;
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+@-webkit-keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+body strong.circle span.word span.char {
+  font-size: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: calc(50% - 5px);
+  top: calc(50% - 30px);
+  width: 10px;
+  height: 10px;
+  transform-origin: 50% 30px;
+  overflow: hidden;
+  color: transparent;
+}
+body strong.circle span.word span.char:before {
+  content: attr(data-char);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #08350e;
+  transform: translateY(100%);
+  transition: 0.3s ease-in-out;
+}
+body strong.circle span.word span.char:nth-of-type(1) {
+  transform: rotate(0deg);
+}
+body strong.circle span.word span.char:nth-of-type(2) {
+  transform: rotate(40deg);
+}
+body strong.circle span.word span.char:nth-of-type(3) {
+  transform: rotate(80deg);
+}
+body strong.circle span.word span.char:nth-of-type(4) {
+  transform: rotate(120deg);
+}
+body strong.circle span.word span.char:nth-of-type(5) {
+  transform: rotate(160deg);
+}
+body strong.circle span.word span.char:nth-of-type(6) {
+  transform: rotate(200deg);
+}
+body strong.circle span.word span.char:nth-of-type(7) {
+  transform: rotate(240deg);
+}
+body strong.circle span.word span.char:nth-of-type(8) {
+  transform: rotate(280deg);
+}
+body strong.circle span.word span.char:nth-of-type(9) {
+  transform: rotate(320deg);
+}
+body #frame {
+  position: fixed;
+  z-index: 98;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #eeece5;
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  transition: 0.5s cubic-bezier(1, 0.885, 0.32, 1);
+  transform: translateX(125%);
+  transition-delay: 0.5s;
+  transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  will-change: transform;
+}
+body #frame:before, body #frame:after {
+  content: "";
+  position: absolute;
+  width: 125%;
+  height: 100%;
+  top: 0;
+  left: -12.5%;
+  background: #fe4e01;
+  transition: transform 1s cubic-bezier(1, 0.885, 0.32, 1);
+  transition-delay: 0.25s;
+  z-index: 999;
+  transform: translateX(0) skewX(5deg);
+}
+body #frame:after {
+  z-index: 98;
+  background: linear-gradient(to right, #eeece5 75%, #a58725 100%);
+  width: 125%;
+  transition: transform 1.25s cubic-bezier(1, 0.885, 0.32, 1);
+}
+body #frame #close {
+  z-index: 999;
+  left: 45px;
+  top: 45px;
+  width: 30px;
+  height: 30px;
+  box-shadow: 0 0 0 2px #08350e, inset 0 0 0 #fe4e01, 0 0 0 20px #eeece5, 0 0 0 22px #fe4e01;
+  background: #eeece5;
+  border-radius: 100%;
+  position: absolute;
+  cursor: pointer;
+  transform: rotate(180deg) scale(0);
+  transition: transform 0.3s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+body #frame #close:hover div {
+  background: #eeece5;
+}
+body #frame #close:hover:before, body #frame #close:hover:after {
+  background: #eeece5;
+}
+body #frame #close div {
+  position: absolute;
+  top: calc(50% - 1px);
+  width: 20px;
+  left: 5px;
+  height: 2px;
+  background: #08350e;
+  transition: transform 0.3s ease-in-out;
+  transition-delay: 0.6s;
+  transform-origin: right;
+  transform: scaleX(0);
+}
+body #frame #close div:before {
+  content: "";
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  border-radius: 100%;
+  top: -40px;
+  left: -30px;
+}
+body #frame #close:before, body #frame #close:after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 2px;
+  background: #08350e;
+  top: calc(50% - 1px);
+  left: 14px;
+  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition-delay: 0.3s;
+  transform-origin: right;
+  transform: scaleY(0) rotate(0deg);
+  z-index: 9;
+}
+body #frame .frame-wrap {
+  width: calc(100% - 10vw);
+  height: calc(100% - 10vw);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+body #frame .frame-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-width: 1200px;
+  max-height: 1200px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+body #frame .frame-container #penlink {
+  position: absolute;
+  bottom: -10px;
+  text-decoration: none;
+  color: #fe4e01;
+  font-weight: 900;
+  transition: color 0.2s ease-in-out, transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition-delay: 0.2s;
+  letter-spacing: -2px;
+  padding: 10px 15px;
+  z-index: 9;
+  transform-origin: 50% 12.5vh;
+  transform: rotate(-180deg);
+  position: absolute;
+}
+body #frame .frame-container #penlink:after {
+  z-index: -5;
+}
+body #frame .frame-container #penlink:hover {
+  color: #eeece5;
+}
+body #frame .frame-container #penlink strong {
+  position: relative;
+  z-index: 9;
+}
+body #frame .frame-container #penlink span {
+  display: inline-block;
+  -webkit-animation: back-n-forth 0.5s ease-in-out infinite alternate;
+          animation: back-n-forth 0.5s ease-in-out infinite alternate;
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+@-webkit-keyframes back-n-forth {
+  to {
+    transform: translateX(-2.5px);
+  }
+}
+@keyframes back-n-forth {
+  to {
+    transform: translateX(-2.5px);
+  }
+}
+body #frame .frame-container #penlink:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background: linear-gradient(to bottom, #fe4e01 50%, #a58725 50%) 50% 100%/100% 200% no-repeat;
+  left: 0;
+  top: 0;
+  transform: scaleY(0);
+  transform-origin: bottom;
+  transition: transform 0.2s ease-in-out, background-position 0.2s ease-in-out;
+  transition-delay: 0.5s, 0.6s;
+}
+body #frame .frame-container #penlink:before {
+  content: "";
+  position: absolute;
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  top: calc(2px/ -1);
+  left: calc(2px/ -1);
+  background: linear-gradient(to right, #08350e 0%, #08350e 100%), linear-gradient(to top, #08350e 50%, transparent 50%), linear-gradient(to top, #08350e 50%, transparent 50%), linear-gradient(to right, #08350e 0%, #08350e 100%), linear-gradient(to left, #08350e 0%, #08350e 100%);
+  background-size: 100% 2px, 2px 200%, 2px 200%, 0% 2px, 0% 2px;
+  background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
+  background-repeat: no-repeat, no-repeat;
+  transition: transform 0.2s ease-in-out, background-position 0.2s ease-in-out, background-size 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  transform: scaleX(0) rotate(0deg);
+  transition-delay: 0.4s, 0.2s, 0s, 0.6s;
+}
+body #frame .frame-container #penlink:hover:after {
+  transform: scaleY(1);
+  transform-origin: top;
+  background-position: 50% 0%;
+}
+body #frame .frame-container #penlink:hover:before {
+  background-size: 200% 2px, 2px 400%, 2px 400%, 55% 2px, 55% 2px;
+  background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
+  transform: scaleX(1) rotate(0deg);
+  transition-delay: 0s, 0.2s, 0.4s;
+}
+body #frame .frame-container iframe {
+  position: absolute;
+  top: 0;
+  left: 25px;
+  width: calc(100% - 50px);
+  height: calc(100% - 50px);
+  background: #fff;
+  border-radius: 5px;
+  visibility: hidden;
+  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
+          clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
+  transition: visibility 0s linear, opacity 1s ease-in-out, -webkit-clip-path 0s linear;
+  transition: clip-path 0s linear, visibility 0s linear, opacity 1s ease-in-out;
+  transition: clip-path 0s linear, visibility 0s linear, opacity 1s ease-in-out, -webkit-clip-path 0s linear;
+  transition-delay: 0.75s, 0.75s, 1.25s;
+  opacity: 0;
+  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
+}
+body:hover #cursor {
+  opacity: 1;
+}
+body #cursor {
+  position: fixed;
+  z-index: 97;
+  width: 30px;
+  height: 30px;
+  border-radius: 100%;
+  top: 0%;
+  left: 0%;
+  border: 2px solid #a58725;
+  box-shadow: inset 0 0 0 0 #a58725;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  will-change: transform;
+  transition: opacity 0.3s ease-in-out, border-width 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+  opacity: 0;
+}
+body #cursor:before, body #cursor:after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 2px;
+  background: #eeece5;
+  top: calc(50% - 1px);
+  left: 14px;
+  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition-delay: 0.3s;
+  transform-origin: right;
+  transform: scaleY(0) rotate(0deg);
+  z-index: 9;
+}
+body #cursor.linkhover {
+  border-color: transparent;
+  border-width: 4px;
+  box-shadow: 0 0 0 2px #fe4e01;
+}
+body #cursor.active strong.circle span.word {
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+}
+body #cursor.active:before, body #cursor.active:after {
+  transition-delay: 0.6s;
+}
+body #cursor.active:before {
+  transform: scaleY(1) rotate(-45deg);
+}
+body #cursor.active:after {
+  transform: scaleY(1) rotate(45deg);
+}
+body #cursor.active strong {
+  box-shadow: inset 0 0 0 20px #a58725;
+}
+body #cursor.active strong:before {
+  transform: scaleX(1);
+  transition-delay: 0.3s;
+}
+body #cursor.active strong span.word span.char:before {
+  transform: translateY(0px);
+}
+body svg {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+body #wrap {
+  display: block;
+  width: 1000px;
+  max-width: 85vw;
+  margin: 0px auto;
+  padding: 2.5vh 50px 25vh;
+  transition: 0.5s cubic-bezier(1, 0.885, 0.32, 1);
+  transform: translateX(0%);
+  transition-delay: 0.75s;
+  transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  will-change: transform;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+}
+body #wrap h1 {
+  text-align: center;
+  font-family: "Bogart-Semibold";
+  color: transparent;
+  font-size: 100px;
+  position: relative;
+  width: 100%;
+  line-height: 0.9;
+  padding: 10px 0;
+  overflow: hidden;
+  transition: transform 0.3s cubic-bezier(1, 0.885, 0.32, 1);
+  transform: scaleX(0);
+  margin-bottom: 20px;
+}
+body #wrap h1:before, body #wrap h1:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background: #a58725;
+  z-index: 2;
+}
+body #wrap h1:after {
+  transform-origin: left;
+  background: #fe4e01;
+  z-index: 3;
+  transform: scaleX(calc(1 - (var(--progress) * 2)));
+}
+body #wrap h1 span.word {
+  position: relative;
+  display: inline-block;
+  transform: translateY(calc((var(--progress) * 1200px) - 200px));
+}
+body #wrap h1 span.word:before {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, 150%);
+  content: attr(data-word);
+  color: #08350e;
+  -webkit-text-fill-color: transparent;
+  -webkit-text-stroke: 2px #08350e;
+  -webkit-background-clip: text;
+  background-image: linear-gradient(to bottom, #08350e 50%, #eeece5 50%);
+  background-size: 100% 200%;
+  background-position: 50% 100%;
+  transition: 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-position 0.5s cubic-bezier(1, 0.885, 0.32, 1);
+}
+body #wrap p.subhead {
+  width: 100%;
+  text-align: center;
+  position: relative;
+  color: #08350e;
+  font-size: 1rem;
+  color: #a58725;
+  opacity: 0;
+  transform: translateY(50px);
+  transition: 0.6s ease-in-out;
+}
+body #wrap p.subhead.final {
+  color: #08350e;
+  display: block;
+  margin: 0px auto;
+  width: 100px;
+}
+body #wrap p.subhead.final:before, body #wrap p.subhead.final:after {
+  content: "";
+  position: absolute;
+  width: 25vw;
+  max-width: 500px;
+  height: 1px;
+  border-bottom: 2px #a58725 dashed;
+  top: calc(50% - 1.5px);
+  opacity: 0.25;
+  left: 100px;
+}
+body #wrap p.subhead.final:after {
+  left: auto;
+  right: 100px;
+}
+body #wrap .panel {
+  --progress: 0;
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  margin-bottom: 25vh;
+  max-height: 75vh;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  padding: 20px;
+  box-sizing: border-box;
+  transition: 1s cubic-bezier(1, 0.885, 0.32, 1);
+  transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  opacity: 0;
+}
+body #wrap .panel:nth-of-type(even) .thumb:after {
+  transform: scaleX(-1);
+  left: 50%;
+}
+body #wrap .panel:last-of-type {
+  margin-bottom: 0;
+}
+body #wrap .panel:last-of-type .thumb:after {
+  display: none;
+}
+body #wrap .panel:last-of-type:nth-of-type(even):before {
+  right: -5%;
+}
+body #wrap .panel:nth-of-type(1):before {
+  content: "1";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(2):before {
+  content: "2";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(3):before {
+  content: "3";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(4):before {
+  content: "4";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(5):before {
+  content: "5";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(6):before {
+  content: "6";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(7):before {
+  content: "7";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(8):before {
+  content: "8";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(9):before {
+  content: "9";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(10):before {
+  content: "10";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(11):before {
+  content: "11";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(12):before {
+  content: "12";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(13):before {
+  content: "13";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(14):before {
+  content: "14";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(15):before {
+  content: "15";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(16):before {
+  content: "16";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(17):before {
+  content: "17";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(18):before {
+  content: "18";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(19):before {
+  content: "19";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:nth-of-type(20):before {
+  content: "20";
+}
+body #wrap .panel:nth-of-type(even):before {
+  left: auto;
+  right: 0;
+  justify-content: flex-end;
+}
+body #wrap .panel:before {
+  font-family: "Bogart-Semibold";
+  font-size: 400px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 40%;
+  display: flex;
+  left: 0;
+  justify-content: flex-start;
+  align-items: center;
+  color: #eeece5;
+  -webkit-text-stroke: 2px #a58725;
+  line-height: 1;
+  opacity: 0;
+  transition: 1.75s ease-in-out;
+}
+body #wrap .panel h2 {
+  grid-area: 3/1/4/4;
+  font-family: "Bogart-Semibold";
+  font-size: 64px;
+  position: relative;
+  z-index: 3;
+  color: transparent;
+  line-height: 1;
+  pointer-events: none;
+  transform: translateY(calc(100px - (var(--progress) * 200px)));
+}
+body #wrap .panel h2 span.word {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  color: transparent;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:-0.25s; stroke:%23a58725; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 65px/80px 80px repeat-x;
+  padding: 20px 0;
+  margin: -20px 0;
+  -webkit-animation: waving 3s linear infinite;
+          animation: waving 3s linear infinite;
+}
+@media (max-width: 1000px) {
+  body #wrap .panel h2 span.word {
+    padding: 40px 0px;
+    margin: -40px 0;
+  }
+}
+body #wrap .panel h2 span.word:nth-of-type(1) {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:-0.25s; stroke:%23a58725; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 65px/80px 80px repeat-x;
+}
+body #wrap .panel h2 span.word:nth-of-type(2) {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:-0.5s; stroke:%23a58725; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 65px/80px 80px repeat-x;
+}
+body #wrap .panel h2 span.word:nth-of-type(3) {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:-0.75s; stroke:%23a58725; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 65px/80px 80px repeat-x;
+}
+body #wrap .panel h2 span.word:nth-of-type(4) {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:-1s; stroke:%23a58725; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 65px/80px 80px repeat-x;
+}
+body #wrap .panel h2 span.word:nth-of-type(5) {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:-1.25s; stroke:%23a58725; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 65px/80px 80px repeat-x;
+}
+body #wrap .panel h2 span.word:nth-of-type(6) {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:-1.5s; stroke:%23a58725; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 65px/80px 80px repeat-x;
+}
+@-webkit-keyframes waving {
+  to {
+    background-position: 200px 65px;
+  }
+}
+@keyframes waving {
+  to {
+    background-position: 200px 65px;
+  }
+}
+@-webkit-keyframes waving2 {
+  to {
+    background-position: 200px 0px;
+  }
+}
+@keyframes waving2 {
+  to {
+    background-position: 200px 0px;
+  }
+}
+body #wrap .panel h2 span.word:before {
+  content: attr(data-word);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: transparent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-image: linear-gradient(to bottom, transparent 25%, #fe4e01 25%, #fe4e01 75%, transparent 75%);
+  background-size: 100% 250%;
+  background-repeat: no-repeat;
+  background-position: 50% calc((var(--progress) * 200px) - 150px);
+  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition-delay: 1.25s;
+  -webkit-text-stroke: 2px #fe4e01;
+}
+body #wrap .panel h2 span.word:nth-of-type(3n):before {
+  background-position: 50% calc((var(--progress) * -200px) + 25px);
+}
+@media (min-width: 1000px) {
+  body #wrap .panel h2 {
+    grid-area: 3/1/4/5;
+    font-size: 82px;
+  }
+  body #wrap .panel h2:nth-of-type(2) {
+    z-index: 2;
+  }
+  body #wrap .panel h2:nth-of-type(2) span.word {
+    color: transparent;
+  }
+  body #wrap .panel h2:nth-of-type(2) span.word:before, body #wrap .panel h2:nth-of-type(2) span.word:after {
+    color: transparent;
+  }
+}
+body #wrap .panel:nth-of-type(even) .thumb:before {
+  left: -5%;
+  top: -5%;
+}
+body #wrap .panel:nth-of-type(even) .thumb:hover:before {
+  transform: translate(5%, 5%);
+}
+body #wrap .panel:nth-of-type(even) h2 {
+  text-align: right;
+  grid-area: 3/3/4/6;
+}
+@media (max-width: 768px) {
+  body #wrap .panel:nth-of-type(even) h2 {
+    grid-area: 2/1/5/6;
+  }
+}
+@media (min-width: 1000px) {
+  body #wrap .panel:nth-of-type(even) h2 {
+    grid-area: 3/2/4/6;
+    -webkit-clip-path: none;
+            clip-path: none;
+  }
+  body #wrap .panel:nth-of-type(even) h2:nth-of-type(2) {
+    z-index: 4;
+    -webkit-clip-path: polygon(-5% -5%, 385px -5%, 385px 110%, -5% 110%);
+            clip-path: polygon(-5% -5%, 385px -5%, 385px 110%, -5% 110%);
+  }
+  body #wrap .panel:nth-of-type(even) h2:nth-of-type(2) span.word {
+    color: transparent;
+  }
+  body #wrap .panel:nth-of-type(even) h2:nth-of-type(2) span.word:before, body #wrap .panel:nth-of-type(even) h2:nth-of-type(2) span.word:after {
+    color: transparent;
+  }
+}
+body #wrap .panel:nth-of-type(even) .thumb {
+  grid-area: 2/1/5/4;
+}
+@media (max-width: 768px) {
+  body #wrap .panel:nth-of-type(even) .thumb {
+    grid-area: 2/1/5/6;
+  }
+}
+body #wrap .panel:nth-of-type(even) .thumb p {
+  top: -50px;
+}
+body #wrap .panel .thumb {
+  grid-area: 2/3/5/6;
+  position: relative;
+  box-shadow: 0 0 0 2px #08350e;
+  transition: box-shadow 0.3s ease-in-out;
+  border-radius: 5px;
+}
+@media (max-width: 768px) {
+  body #wrap .panel .thumb {
+    grid-area: 2/1/5/6;
+  }
+}
+body #wrap .panel .thumb p {
+  position: absolute;
+  width: 100%;
+  top: -30px;
+  margin: 0;
+  color: #a58725;
+  font-size: 12px;
+  left: 0;
+  text-align: center;
+}
+body #wrap .panel .thumb * {
+  border-radius: 5px;
+}
+body #wrap .panel .thumb .inner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  z-index: 0;
+}
+body #wrap .panel .thumb .inner:before, body #wrap .panel .thumb .inner:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: #a58725;
+  mix-blend-mode: lighten;
+  opacity: 0.5;
+  z-index: 2;
+}
+body #wrap .panel .thumb .inner:after {
+  background: #eeece5;
+  opacity: 1;
+  z-index: -2;
+  mix-blend-mode: normal;
+}
+body #wrap .panel .thumb:hover:before {
+  transform: translate(-5%, -5%);
+  box-shadow: 0 0 0 2px #a58725, 0 0 0 6px #eeece5, 0 0 0 8px #fe4e01;
+  transition-delay: 0s, 0.2s;
+}
+body #wrap .panel .thumb:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 5%;
+  top: 5%;
+  box-shadow: 0 0 0 2px #a58725, 0 0 0 0 #eeece5, 0 0 0 0 #fe4e01;
+  transition: transform 0.2s cubic-bezier(1, 0.885, 0.32, 1), box-shadow 0.2s cubic-bezier(1, 0.885, 0.32, 1);
+  transition-delay: 0.2s, 0s;
+  background: radial-gradient(circle at center, #a58725 1px, rgba(255, 255, 255, 0.005) 1px, rgba(255, 255, 255, 0.005) 20px) 0px 0px/20px 20px, radial-gradient(circle at center, #a58725 1px, rgba(255, 255, 255, 0.005) 1px, rgba(255, 255, 255, 0.005) 20px) 10px 10px/20px 20px;
+  border-radius: 5px;
+}
+body #wrap .panel .thumb:after {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: calc(100% + 25vh);
+  left: 0%;
+  top: 100%;
+  border-style: dashed;
+  border-width: 2px 2px 2px 2px;
+  border-color: transparent #a58725 #a58725 transparent;
+  border-radius: 0 0 10px 0;
+  opacity: 0.25;
+}
+body #wrap .panel .thumb img {
+  mix-blend-mode: exclusion;
+  padding: 2vmin;
+  position: absolute;
+  top: -75%;
+  left: 50%;
+  transform: translateY(calc(var(--progress) * 25%)) translateX(-50%);
+  width: auto;
+  height: 200%;
+  z-index: -1;
+  filter: saturate(0) blur(calc(50px - (var(--progress) * 125px))) brightness(0.5) contrast(4);
+  mix-blend-mode: overlay;
+}
+body #wrap .panel .thumb img.invert {
+  filter: invert(1) saturate(0) blur(calc(50px - (var(--progress) * 125px))) brightness(0.5) contrast(4);
+}
+body #wrap .panel .thumb img.shift {
+  left: 0;
+}
+body #wrap .panel .thumb img.light {
+  filter: saturate(0) blur(calc(50px - (var(--progress) * 125px))) brightness(0.75) contrast(4);
+}
+body #wrap .panel .thumb img.lighter {
+  filter: saturate(0) blur(calc(50px - (var(--progress) * 125px))) brightness(1) contrast(4);
+}
\ No newline at end of file
diff --git a/selected-demos-2019-2020/license.txt b/selected-demos-2019-2020/license.txt
new file mode 100644
index 0000000..4e56077
--- /dev/null
+++ b/selected-demos-2019-2020/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/OJRjBoj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/selected-demos-2019-2020/src/index.haml b/selected-demos-2019-2020/src/index.haml
new file mode 100644
index 0000000..7cd1e69
--- /dev/null
+++ b/selected-demos-2019-2020/src/index.haml
@@ -0,0 +1,104 @@
+#wrap
+ %h1{:"data-splitting" => "words"} Selected Demos
+ %p.subhead Adam Kuhn
+ .panel
+  %h2.dark{:"data-splitting" => "words"}3D CSS Letter Transition
+  .thumb
+   %p CSS • 3D • Animation
+   .inner
+    %img.invert{:loading => "lazy", :src => "https://assets.codepen.io/383755/internal/screenshots/pens/xxVJZwo.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1569360312&width=960"}
+ .panel
+  %h2{:"data-splitting" => "words"}Generative Patterns 8
+  .thumb
+   %p Generative • CSS Vars • GSAP
+   .inner
+    %img.light{:loading => "lazy", :src => "https://assets.codepen.io/383755/internal/screenshots/pens/wvGyKEY.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1599706499&width=960"}
+ .panel
+  %h2{:"data-splitting" => "words"}NES Subscribe
+  .thumb
+   %p 8-Bit • Form Input • Animation
+   .inner
+    %img{:loading => "lazy", :src => "https://assets.codepen.io/383755/internal/screenshots/pens/OJVJJoj.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1569360312&width=960"}
+ .panel
+  %h2{:"data-splitting" => "words"}CSS Neumorphic Toggle
+  .thumb
+   %p CSS • 3D • No JS
+   .inner
+    %img{:loading => "lazy", :src => "https://assets.codepen.io/383755/internal/screenshots/pens/YzXOBEN.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1569360312&width=960"}
+ .panel
+  %h2{:"data-splitting" => "words"}Take Me On
+  .thumb
+   %p Webcam • SVG • Canvas
+   .inner
+    %img.light{:loading => "lazy", :src => "https://assets.codepen.io/383755/internal/screenshots/pens/qBZWVmO.custom.png"}
+ .panel
+  -2.times do
+   %h2{:"data-splitting" => "words"}SVG Turbulence Animation
+  .thumb
+   %p SVG • Generative • Animation
+   .inner
+    %img{:loading => "lazy", :src => "https://assets.codepen.io/383755/internal/screenshots/pens/eYOXOdB.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1569360312&width=960"}
+ .panel
+  -2.times do
+   %h2{:"data-splitting" => "words"}Pure CSS Product Card
+  .thumb
+   %p HAML • No JS • Animation
+   .inner
+    %img.shift{:loading => "lazy", :src => "https://assets.codepen.io/383755/internal/screenshots/pens/OJXJeod.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1569360312&width=960"}
+ .panel
+  -2.times do
+   %h2{:"data-splitting" => "words"}Swissted Animated Flyers
+  .thumb
+   %p Responsive • HAML • CSS Animation
+   .inner
+    %img{:loading => "lazy", :src => "https://assets.codepen.io/383755/internal/screenshots/pens/PoqVQRq.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1585620527&width=960"}
+ .panel
+  -2.times do
+   %h2{:"data-splitting" => "words"}Pure CSS Gritty
+  .thumb
+   %p CSS • HAML
+   .inner
+    %img.lighter{:loading => "lazy", :src => "https://assets.codepen.io/383755/internal/screenshots/pens/qgEGMZ.default.png?fit=cover&format=auto&ha=false&height=540&quality=75&v=2&version=1548377726&width=960"}
+ .panel
+  -2.times do
+   %h2{:"data-splitting" => "words"}Canyonlands
+  .thumb
+   %p GENERATIVE • JS • SVG
+   .inner
+    %img.light{:loading => "lazy", :src => "https://assets.codepen.io/383755/internal/screenshots/pens/RwWYGxj.default.png?fit=cover&format=auto&ha=false&height=540&quality=75&v=2&version=1548377726&width=960"}
+ %p.subhead.final Fin
+
+#frame
+ #close
+  %div
+  %strong.circle{:"data-splitting" => "chars"}GO•BACK•
+ .frame-wrap
+  .frame-container
+   %iframe#pen{:loading => "lazy", :src => "", :style => "border:0"}
+   %a#penlink{:target => "_blank"} <strong>View the Code <span>&rarr;</span></strong>
+
+   
+#cursor
+ %strong.circle{:"data-splitting" => "chars"}SEE•MORE•
+ 
+#loader
+ .wrap
+  %span L
+  %span O
+  %span A
+  %span D
+  %span I
+  %span N
+  %span G
+  %span •
+  %span •
+  %span •
+ 
+#social
+ %a{:href => "https://twitter.com/cobra_winfrey", :target => "_blank"}
+  %svg{"clip-rule" => "evenodd", "fill-rule" => "evenodd", "image-rendering" => "optimizeQuality", "shape-rendering" => "geometricPrecision", "text-rendering" => "geometricPrecision", :viewbox => "0 0 3333 3333", :xmlns => "http://www.w3.org/2000/svg"}
+   %path{:d => "M1667 0c920 0 1667 746 1667 1667 0 920-746 1667-1667 1667C747 3334 0 2588 0 1667 0 747 746 0 1667 0zm900 1108c-66 30-137 49-212 58 76-46 135-118 162-204-71 42-151 73-234 90-68-72-163-116-270-116-204 0-369 165-369 369 0 29 3 57 9 84-307-16-579-162-761-386-33 56-50 120-50 186 0 128 65 241 164 307-61-2-117-19-167-46v5c0 179 127 328 296 362-31 8-64 13-97 13-24 0-47-2-70-7 47 147 183 253 345 257-127 99-285 158-459 158-30 0-59-2-88-5 164 105 358 166 566 166 679 0 1051-563 1051-1051 0-16 0-32-1-48 72-52 135-117 184-191z"}
+  %a{:href => "https://codepen.io/cobra_winfrey", :target => "_blank"}
+   %svg.svg-inline--fa.fa-codepen.fa-w-16.fa-3x{"aria-hidden" => "true", "data-icon" => "codepen", "data-prefix" => "fab", :focusable => "false", :role => "img", :viewbox => "0 0 512 512", :xmlns => "http://www.w3.org/2000/svg"}
+    %path{:d => "M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278 63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234 63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234 346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857 51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z", :fill => "currentColor"}
+
diff --git a/selected-demos-2019-2020/src/script.js b/selected-demos-2019-2020/src/script.js
new file mode 100644
index 0000000..134e522
--- /dev/null
+++ b/selected-demos-2019-2020/src/script.js
@@ -0,0 +1,155 @@
+let cursor = document.getElementById("cursor");
+let close = document.getElementById("close");
+let body = document.body;
+let iframe = document.getElementById("pen");
+let penLink = document.getElementById("penlink");
+let links = document.getElementsByTagName("a");
+
+let frames = [
+  "https://codepen.io/cobra_winfrey/debug/xxVJZwo",
+  "https://cdpn.io/cobra_winfrey/debug/wvGyKEY",
+  "https://codepen.io/cobra_winfrey/debug/OJVJJoj",
+  "https://cdpn.io/cobra_winfrey/debug/YzXOBEN",
+  "https://codepen.io/cobra_winfrey/debug/qBZWVmO",
+  "https://codepen.io/cobra_winfrey/debug/eYOXOdB",
+  "https://codepen.io/cobra_winfrey/debug/OJXJeod",
+  "https://codepen.io/cobra_winfrey/debug/PoqVQRq",
+  "https://cdpn.io/cobra_winfrey/debug/qgEGMZ",
+  "https://codepen.io/cobra_winfrey/debug/RwWYGxj"
+];
+
+// Load iFrames on demand & remove after modal is closed to reduce weight & smooth out transitions
+
+
+let cards = document.getElementsByClassName("inner");
+for (let i = 0; i < cards.length; i++) {
+  cards[i].addEventListener("mousemove", function (event) {
+    cursor.classList.add("active");
+  });
+  cards[i].addEventListener("mouseover", function (event) {
+    cursor.classList.add("active");
+  });
+
+  cards[i].addEventListener("mouseout", function (event) {
+    cursor.classList.remove("active");
+  });
+  cards[i].addEventListener(
+    "click",
+    function (i) {
+      body.classList.add("active");
+      iframe.setAttribute("src", frames[i]);
+      let penDebug = frames[i];
+      let penFull = penDebug.replace("debug", "pen");
+      penLink.setAttribute("href", penFull);
+    }.bind(null, i)
+  );
+}
+
+// hover events for social links
+
+for (link of links) {
+  link.addEventListener("mouseover", function (event) {
+    cursor.classList.add("linkhover");
+  });
+  link.addEventListener("mousemove", function (event) {
+    cursor.classList.add("linkhover");
+  });
+  link.addEventListener("mouseout", function (event) {
+    cursor.classList.remove("linkhover");
+  });
+}
+
+// Escape key option to exit active state
+
+document.onkeydown = function (evt) {
+  evt = evt || window.event;
+  let isEscape = false;
+  if ("key" in evt) {
+    isEscape = evt.key === "Escape" || evt.key === "Esc";
+  } else {
+    isEscape = evt.keyCode === 27;
+  }
+  if (isEscape) {
+    body.classList.remove("active");
+    setTimeout(() => {
+      iframe.setAttribute("src", "");
+    }, 2000);
+  }
+};
+
+close.addEventListener("click", function (event) {
+  body.classList.remove("active");
+  setTimeout(() => {
+    iframe.setAttribute("src", "");
+  }, 2000);
+});
+
+gsap.set("#cursor", { xPercent: -50, yPercent: -50 });
+const pos = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+const mouse = { x: pos.x, y: pos.y };
+const speed = 0.35;
+
+const xSet = gsap.quickSetter(cursor, "x", "px");
+const ySet = gsap.quickSetter(cursor, "y", "px");
+
+window.addEventListener("mousemove", (e) => {
+  mouse.x = e.x;
+  mouse.y = e.y;
+});
+
+gsap.ticker.add(() => {
+  const dt = 1.0 - Math.pow(1.0 - speed, gsap.ticker.deltaRatio());
+
+  pos.x += (mouse.x - pos.x) * dt;
+  pos.y += (mouse.y - pos.y) * dt;
+  xSet(pos.x);
+  ySet(pos.y);
+});
+
+Splitting();
+
+// Individual section scroll progress
+
+gsap.utils.toArray(".panel").forEach((section, index) => {
+  gsap.to(this, {
+    scrollTrigger: {
+      trigger: section,
+      start: "top 100%",
+      end: "bottom 25%",
+      scrub: 0,
+      onUpdate: (self) => {
+        section.style.setProperty("--progress", self.progress);
+      }
+    }
+  });
+});
+
+// Full page scroll progress
+
+gsap.to("body", {
+  scrollTrigger: {
+    trigger: "body",
+    start: "top 100%",
+    end: "50% 50%",
+    scrub: 0,
+    onUpdate: (self) => {
+      body.style.setProperty("--progress", self.progress);
+    }
+  }
+});
+
+// Pull out the preloader
+
+document.addEventListener("DOMContentLoaded", function () {
+  body.classList.add("loaded");
+});
+
+// Set a delay on Scrolltrigger recalculation to accommodate element transition times
+
+function refresh() {
+  setTimeout(() => {
+    ScrollTrigger.refresh();
+  }, 2500);
+}
+
+window.addEventListener("resize", refresh);
diff --git a/selected-demos-2019-2020/src/style.scss b/selected-demos-2019-2020/src/style.scss
new file mode 100644
index 0000000..531f82a
--- /dev/null
+++ b/selected-demos-2019-2020/src/style.scss
@@ -0,0 +1,1094 @@
+@font-face {
+  font-family: "Bogart-Semibold";
+  src: url("https://assets.codepen.io/383755/bogart-semibold.woff2")
+    format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+$bg: #eeece5;
+$y: #a58725;
+$b: #00eded;
+$w: $bg;
+$o: #fe4e01;
+$p: #eb98b4;
+$g: #08350e;
+$elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+$expo: cubic-bezier(1, 0.885, 0.32, 1);
+
+@mixin magic-border($width, $color, $duration, $direction) {
+  position: absolute;
+  &:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background: linear-gradient(to bottom, $o 50%, $y 50%) 50% 100% / 100% 200%
+      no-repeat;
+    left: 0;
+    top: 0;
+    transform: scaleY(0);
+    transform-origin: bottom;
+    transition: transform $duration ease-in-out,
+      background-position $duration ease-in-out;
+    transition-delay: $duration * 2.5, $duration * 3;
+  }
+  &:before {
+    content: "";
+    position: absolute;
+    width: calc(100% + #{$width * 2});
+    height: calc(100% + #{$width * 2});
+    top: calc(#{$width}/ -1);
+    left: calc(#{$width}/ -1);
+    background: linear-gradient(to right, $color 0%, $color 100%),
+      linear-gradient(to top, $color 50%, transparent 50%),
+      linear-gradient(to top, $color 50%, transparent 50%),
+      linear-gradient(to right, $color 0%, $color 100%),
+      linear-gradient(to left, $color 0%, $color 100%);
+    background-size: 100% $width, $width 200%, $width 200%, 0% $width, 0% $width;
+    background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
+    background-repeat: no-repeat, no-repeat;
+    transition: transform $duration ease-in-out,
+      background-position $duration ease-in-out,
+      background-size $duration ease-in-out, box-shadow $duration ease-in-out;
+    transform: scaleX(0) rotate(180deg * $direction);
+    transition-delay: $duration * 2, $duration, 0s, $duration * 3;
+  }
+  &:hover {
+    &:after {
+      transform: scaleY(1);
+      transform-origin: top;
+      background-position: 50% 0%;
+    }
+    &:before {
+      background-size: 200% $width, $width 400%, $width 400%, 55% $width,
+        55% $width;
+      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
+      transform: scaleX(1) rotate(180deg * $direction);
+      transition-delay: 0s, $duration, $duration * 2;
+    }
+  }
+}
+
+body {
+  scroll-behavior: smooth;
+  background: $bg;
+  cursor: none;
+  font-family: "Lexend Mega", sans-serif;
+  pointer-events: none;
+  transition-delay: 2s;
+  max-width: 100vw;
+  box-sizing: border-box;
+  #social {
+    z-index: 97;
+    position: fixed;
+    right: 10px;
+    box-sizing: border-box;
+    top: 10px;
+    width: 30px;
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    a {
+      &:last-of-type {
+        svg {
+          transform: translateX(150px);
+        }
+      }
+      &:hover {
+        svg {
+          transform: scale(0.9);
+          path {
+            fill: $g;
+          }
+        }
+      }
+    }
+    svg {
+      width: 25px;
+      height: 25px;
+      position: relative;
+
+      transition: 0.2s ease-in-out, transform 0.6s $expo;
+      transform: translateY(-150px);
+      path {
+        fill: $y;
+        transition: 0.2s ease-in-out;
+      }
+    }
+  }
+  #loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: $bg;
+    position: fixed;
+    box-sizing: border-box;
+    width: calc(100vw - 5px);
+    height: 100vh;
+
+    top: 0;
+    left: 0;
+    z-index: 999;
+    transition: transform 0.6s $expo;
+    transition-delay: 1.25s;
+    transform-origin: bottom;
+    background: $o;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    &:before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 75%;
+      top: -75%;
+      background: $y;
+      clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
+    }
+    .wrap {
+      width: 10px;
+      height: 10px;
+      position: relative;
+      animation: rotate 5s linear infinite;
+      transition: opacity 0.4s ease-in-out, animation-play-state 2s ease-in-out;
+      transition-delay: 0s, 0.4s;
+      span {
+        color: #fff;
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        font-size: 12px;
+        transform-origin: 50% 40px;
+        top: -34px;
+        animation: popping 0.25s ease-in-out infinite alternate;
+        @keyframes popping {
+          to {
+            top: -24px;
+          }
+        }
+        @for $i from 1 through 10 {
+          &:nth-of-type(#{$i}) {
+            transform: rotate(#{(360/10) * $i}deg);
+            animation-delay: #{$i/-16}s;
+          }
+        }
+      }
+    }
+  }
+  &.loaded {
+    pointer-events: all;
+    #social {
+      a {
+        &:nth-of-type(1n) {
+          svg {
+            transform: translateX(0);
+            transition-delay: 0s, 2.4s;
+          }
+        }
+        &:last-of-type {
+          svg {
+            transition-delay: 0s, 2.6s;
+          }
+        }
+      }
+    }
+    #loader {
+      transform: scaleY(0);
+      color: transparent;
+      .wrap {
+        opacity: 0;
+        animation-iteration-count: 4;
+        span {
+          animation-play-state: paused;
+        }
+      }
+    }
+    #wrap {
+      transform: translateX(0%);
+      background: $bg;
+      p.subhead {
+        transform: translateY(0);
+        opacity: 1;
+
+        transition-delay: 2s;
+      }
+      .panel {
+        opacity: 1;
+        transition-delay: 1.75s;
+        &:before {
+          opacity: 0.15;
+          transition-delay: 2.5s;
+        }
+      }
+      h1 {
+        transition-delay: 1.75s;
+        transform: scaleX(1);
+        span.word {
+          &:before {
+            transform: translate(-50%, -50%);
+            background-position: 50% 0%;
+            transition-delay: 2s, 2s;
+          }
+        }
+      }
+    }
+  }
+  &.loaded::-webkit-scrollbar {
+    background: $y;
+    width: 5px;
+  }
+  &::-webkit-scrollbar {
+    background: $o;
+    width: 5px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: $o;
+  }
+  &.active {
+    cursor: auto;
+    overflow: hidden;
+    #frame .frame-container #penlink {
+      transform: rotate(0deg);
+      transition-delay: 0.3s, 2s;
+      span {
+        animation-play-state: running;
+      }
+    }
+    #wrap {
+      transform: translateX(-125vw);
+      transition-delay: 0s;
+      .panel h2 span.word:before {
+        transform: translate(-50%, 100px);
+        transition: 0s ease-in-out;
+        transition-delay: 0s;
+      }
+    }
+    #frame {
+      transform: translateX(0);
+      transition-delay: 0.25s;
+      #close {
+        transform: rotate(180deg) scale(1);
+        transition-delay: 1.2s, 0s;
+        strong {
+          .word {
+            animation-play-state: running;
+          }
+        }
+        strong {
+          span.char {
+            &:before {
+              transform: translateY(0);
+            }
+          }
+        }
+        &:hover {
+          box-shadow: 0 0 0 2px $o, inset 0 0 0 20px $o, 0 0 0 20px $bg,
+            0 0 0 22px $o;
+          strong {
+            span.char {
+              &:before {
+                color: $g;
+              }
+            }
+          }
+        }
+        div {
+          transition-delay: 1.8s;
+          transform: scaleX(1);
+          transform-origin: left;
+        }
+        &:before,
+        &:after {
+          transition-delay: 2.1s;
+        }
+        &:before {
+          transform: scaleY(1) rotate(-45deg);
+        }
+        &:after {
+          transform: scaleY(1) rotate(45deg);
+        }
+      }
+      &:before,
+      &:after {
+        transition-delay: 0.75s;
+        transform: translateX(-175%) skewX(5deg);
+      }
+      &:after {
+        transform: translateX(-150%) skewX(-15deg);
+      }
+      .frame-container iframe {
+        clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%);
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+  }
+  #close {
+    strong.circle {
+      position: absolute;
+      left: 0;
+      top: 0;
+      span.word {
+        span.char {
+          &:before {
+            color: $o;
+          }
+          @for $i from 1 through 8 {
+            &:nth-of-type(#{$i}) {
+              transform: rotate(#{($i - 1) * 45}deg);
+            }
+          }
+        }
+      }
+    }
+  }
+  strong.circle {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    line-height: 1;
+    margin: 0;
+    transition: 0.3s ease-in-out;
+    &:before {
+      content: "";
+      position: absolute;
+      width: 20px;
+      height: 2px;
+      background: $bg;
+      top: calc(50% - 1px);
+      left: 5px;
+      transition: 0.3s ease-in-out;
+      transform-origin: left;
+      transform: scaleX(0);
+      transition-delay: 0.6s;
+    }
+    span.word {
+      position: absolute;
+      width: 0px;
+      height: 0px;
+      left: 50%;
+      top: 50%;
+      animation: rotate 10s linear infinite;
+      animation-play-state: paused;
+      @keyframes rotate {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      span.char {
+        font-size: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        left: calc(50% - 5px);
+        top: calc(50% - 30px);
+        width: 10px;
+        height: 10px;
+        transform-origin: 50% 30px;
+        overflow: hidden;
+        color: transparent;
+        &:before {
+          content: attr(data-char);
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: $g;
+          transform: translateY(100%);
+          transition: 0.3s ease-in-out;
+        }
+        @for $i from 1 through 9 {
+          &:nth-of-type(#{$i}) {
+            transform: rotate(#{($i - 1) * 40}deg);
+          }
+        }
+      }
+    }
+  }
+  #frame {
+    position: fixed;
+    z-index: 98;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: $bg;
+    box-sizing: border-box;
+    display: grid;
+    place-items: center;
+    transition: 0.5s $expo;
+    transform: translateX(125%);
+    transition-delay: 0.5s;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    will-change: transform;
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      width: 125%;
+      height: 100%;
+      top: 0;
+      left: -12.5%;
+      background: $o;
+      transition: transform 1s $expo;
+      transition-delay: 0.25s;
+      z-index: 999;
+      transform: translateX(0) skewX(5deg);
+    }
+    &:after {
+      z-index: 98;
+      background: linear-gradient(to right, $bg 75%, $y 100%);
+      width: 125%;
+      transition: transform 1.25s $expo;
+    }
+    #close {
+      z-index: 999;
+      left: 45px;
+      top: 45px;
+      width: 30px;
+      height: 30px;
+      box-shadow: 0 0 0 2px $g, inset 0 0 0 $o, 0 0 0 20px $bg, 0 0 0 22px $o;
+      background: $bg;
+      border-radius: 100%;
+      position: absolute;
+      cursor: pointer;
+      transform: rotate(180deg) scale(0);
+      transition: transform 0.3s ease-in-out, box-shadow 0.2s ease-in-out;
+      &:hover {
+        div {
+          background: $bg;
+        }
+        &:before,
+        &:after {
+          background: $bg;
+        }
+      }
+      div {
+        position: absolute;
+        top: calc(50% - 1px);
+        width: 20px;
+        left: 5px;
+        height: 2px;
+        background: $g;
+        transition: transform 0.3s ease-in-out;
+        transition-delay: 0.6s;
+        transform-origin: right;
+        transform: scaleX(0);
+        &:before {
+          content: "";
+          position: absolute;
+          width: 80px;
+          height: 80px;
+          border-radius: 100%;
+          top: -40px;
+          left: -30px;
+        }
+      }
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        width: 10px;
+        height: 2px;
+        background: $g;
+        top: calc(50% - 1px);
+        left: 14px;
+        transition: transform 0.3s $elastic;
+        transition-delay: 0.3s;
+        transform-origin: right;
+        transform: scaleY(0) rotate(0deg);
+        z-index: 9;
+      }
+    }
+    .frame-wrap {
+      width: calc(100% - 10vw);
+      height: calc(100% - 10vw);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .frame-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      max-width: 1200px;
+      max-height: 1200px;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      flex-wrap: wrap;
+      #penlink {
+        position: absolute;
+        bottom: -10px;
+        text-decoration: none;
+        color: $o;
+        font-weight: 900;
+        transition: color 0.2s ease-in-out, transform 0.7s $elastic;
+        transition-delay: 0.2s;
+        letter-spacing: -2px;
+        padding: 10px 15px;
+        z-index: 9;
+        transform-origin: 50% 12.5vh;
+        transform: rotate(-180deg);
+        &:after {
+          z-index: -5;
+        }
+        &:hover {
+          color: $bg;
+        }
+        strong {
+          position: relative;
+          z-index: 9;
+        }
+        span {
+          display: inline-block;
+          animation: back-n-forth 0.5s ease-in-out infinite alternate;
+          animation-play-state: paused;
+          @keyframes back-n-forth {
+            to {
+              transform: translateX(-2.5px);
+            }
+          }
+        }
+        @include magic-border(2px, $g, 0.2s, 0);
+      }
+      iframe {
+        position: absolute;
+        top: 0;
+        left: 25px;
+        width: calc(100% - 50px);
+        height: calc(100% - 50px);
+        background: #fff;
+        border-radius: 5px;
+        visibility: hidden;
+        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
+        transition: clip-path 0s linear, visibility 0s linear,
+          opacity 1s ease-in-out;
+        transition-delay: 0.75s, 0.75s, 1.25s;
+        opacity: 0;
+        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
+      }
+    }
+  }
+  &:hover {
+    #cursor {
+      opacity: 1;
+    }
+  }
+  #cursor {
+    position: fixed;
+    z-index: 97;
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    top: 0%;
+    left: 0%;
+    border: 2px solid $y;
+    box-shadow: inset 0 0 0 0 $y;
+    pointer-events: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    will-change: transform;
+    transition: opacity 0.3s ease-in-out, border-width 0.3s ease-in-out,
+      box-shadow 0.3s ease-in-out;
+    opacity: 0;
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      width: 10px;
+      height: 2px;
+      background: $bg;
+      top: calc(50% - 1px);
+      left: 14px;
+      transition: 0.3s $elastic;
+      transition-delay: 0.3s;
+      transform-origin: right;
+      transform: scaleY(0) rotate(0deg);
+      z-index: 9;
+    }
+    &.linkhover {
+      border-color: transparent;
+      border-width: 4px;
+      box-shadow: 0 0 0 2px $o;
+    }
+    &.active {
+      strong.circle {
+        span.word {
+          animation-play-state: running;
+        }
+      }
+      &:before,
+      &:after {
+        transition-delay: 0.6s;
+      }
+      &:before {
+        transform: scaleY(1) rotate(-45deg);
+      }
+      &:after {
+        transform: scaleY(1) rotate(45deg);
+      }
+      strong {
+        box-shadow: inset 0 0 0 20px $y;
+        &:before {
+          transform: scaleX(1);
+          transition-delay: 0.3s;
+        }
+        span.word {
+          span.char {
+            &:before {
+              transform: translateY(0px);
+            }
+          }
+        }
+      }
+    }
+  }
+  svg {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+  #wrap {
+    display: block;
+    width: 1000px;
+    max-width: 85vw;
+    margin: 0px auto;
+    padding: 2.5vh 50px 25vh;
+    transition: 0.5s $expo;
+    transform: translateX(0%);
+    transition-delay: 0.75s;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    will-change: transform;
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+    h1 {
+      text-align: center;
+      font-family: "Bogart-Semibold";
+      color: transparent;
+      font-size: 100px;
+      position: relative;
+      width: 100%;
+      line-height: 0.9;
+      padding: 10px 0;
+      overflow: hidden;
+      transition: transform 0.3s $expo;
+      transform: scaleX(0);
+      margin-bottom: 20px;
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        bottom: 0;
+        left: 0;
+        background: $y;
+        z-index: 2;
+      }
+      &:after {
+        transform-origin: left;
+        background: $o;
+        z-index: 3;
+        transform: scaleX(calc(1 - (var(--progress) * 2)));
+      }
+      span.word {
+        position: relative;
+        display: inline-block;
+        transform: translateY(calc((var(--progress) * 1200px) - 200px));
+        &:before {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, 150%);
+          content: attr(data-word);
+          color: $g;
+          -webkit-text-fill-color: transparent;
+          -webkit-text-stroke: 2px $g;
+          -webkit-background-clip: text;
+          background-image: linear-gradient(to bottom, $g 50%, $bg 50%);
+          background-size: 100% 200%;
+          background-position: 50% 100%;
+          transition: 0.75s $elastic, background-position 0.5s $expo;
+        }
+      }
+    }
+    p.subhead {
+      width: 100%;
+      text-align: center;
+      position: relative;
+      color: $g;
+      font-size: 1rem;
+      color: $y;
+      opacity: 0;
+      transform: translateY(50px);
+      transition: 0.6s ease-in-out;
+      &.final {
+        color: $g;
+        display: block;
+        margin: 0px auto;
+        width: 100px;
+        &:before,
+        &:after {
+          content: "";
+          position: absolute;
+          width: 25vw;
+          max-width: 500px;
+          height: 1px;
+          border-bottom: 2px $y dashed;
+          top: calc(50% - 1.5px);
+          opacity: 0.25;
+          left: 100px;
+        }
+        &:after {
+          left: auto;
+          right: 100px;
+        }
+      }
+    }
+    .panel {
+      --progress: 0;
+      position: relative;
+      width: 100%;
+      height: 100vh;
+      margin-bottom: 25vh;
+      max-height: 75vh;
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      grid-template-rows: repeat(5, 1fr);
+      grid-column-gap: 0px;
+      grid-row-gap: 0px;
+      padding: 20px;
+      box-sizing: border-box;
+      transition: 1s $expo;
+      transform-style: preserve-3d;
+      backface-visibility: hidden;
+      opacity: 0;
+      &:nth-of-type(even) {
+        .thumb {
+          &:after {
+            transform: scaleX(-1);
+            left: 50%;
+          }
+        }
+      }
+      &:last-of-type {
+        margin-bottom: 0;
+        .thumb {
+          &:after {
+            display: none;
+          }
+        }
+        &:nth-of-type(even) {
+          &:before {
+            right: -5%;
+          }
+        }
+      }
+      @for $i from 1 through 20 {
+        &:nth-of-type(#{$i}) {
+          &:before {
+            content: "#{$i}";
+          }
+        }
+        &:nth-of-type(even) {
+          &:before {
+            left: auto;
+            right: 0;
+            justify-content: flex-end;
+          }
+        }
+      }
+      &:before {
+        font-family: "Bogart-Semibold";
+        font-size: 400px;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 40%;
+        display: flex;
+        left: 0;
+        justify-content: flex-start;
+        align-items: center;
+        color: $bg;
+        -webkit-text-stroke: 2px $y;
+        line-height: 1;
+        opacity: 0;
+        transition: 1.75s ease-in-out;
+      }
+      h2 {
+        grid-area: 3 / 1 / 4 / 4;
+        font-family: "Bogart-Semibold";
+        font-size: 64px;
+        position: relative;
+        z-index: 3;
+        color: transparent;
+        line-height: 1;
+
+        pointer-events: none;
+        transform: translateY(calc(100px - (var(--progress) * 200px)));
+        span.word {
+          position: relative;
+          display: inline-block;
+          overflow: hidden;
+          color: transparent;
+          // box-shadow:0 2px 0 $y;
+          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:-0.25s; stroke:%23a58725; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E")
+            0px 65px / 80px 80px repeat-x;
+          padding: 20px 0;
+          margin: -20px 0;
+          animation: waving 3s linear infinite;
+          @media (max-width: 1000px) {
+            padding: 40px 0px;
+            margin: -40px 0;
+          }
+          @for $i from 1 through 6 {
+            &:nth-of-type(#{$i}) {
+              background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:#{$i * -0.25}s; stroke:%23a58725; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E")
+                0px
+                65px /
+                80px
+                80px
+                repeat-x;
+            }
+          }
+          @keyframes waving {
+            to {
+              background-position: 200px 65px;
+            }
+          }
+          @keyframes waving2 {
+            to {
+              background-position: 200px 0px;
+            }
+          }
+          &:before {
+            content: attr(data-word);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: transparent;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-image: linear-gradient(
+              to bottom,
+              transparent 25%,
+              $o 25%,
+              $o 75%,
+              transparent 75%
+            );
+            background-size: 100% 250%;
+            background-repeat: no-repeat;
+            background-position: 50% calc((var(--progress) * 200px) - 150px);
+            transition: transform 0.3s $elastic;
+            transition-delay: 1.25s;
+            -webkit-text-stroke: 2px $o;
+          }
+          &:nth-of-type(3n) {
+            &:before {
+              background-position: 50% calc((var(--progress) * -200px) + 25px);
+            }
+          }
+        }
+        @media (min-width: 1000px) {
+          grid-area: 3 / 1 / 4 / 5;
+          font-size: 82px;
+          &:nth-of-type(2) {
+            span.word {
+              color: transparent;
+              &:before,
+              &:after {
+                color: transparent;
+              }
+            }
+            z-index: 2;
+          }
+        }
+      }
+      &:nth-of-type(even) {
+        .thumb {
+          &:before {
+            left: -5%;
+            top: -5%;
+          }
+          &:hover {
+            &:before {
+              transform: translate(5%, 5%);
+            }
+          }
+        }
+        h2 {
+          text-align: right;
+          grid-area: 3 / 3 / 4 / 6;
+          @media (max-width: 768px) {
+            grid-area: 2 / 1 / 5 / 6;
+          }
+          @media (min-width: 1000px) {
+            grid-area: 3 / 2 / 4 / 6;
+            clip-path: none;
+            &:nth-of-type(2) {
+              z-index: 4;
+              clip-path: polygon(-5% -5%, 385px -5%, 385px 110%, -5% 110%);
+              span.word {
+                color: transparent;
+                &:before,
+                &:after {
+                  color: transparent;
+                }
+              }
+            }
+          }
+        }
+        .thumb {
+          grid-area: 2 / 1 / 5 / 4;
+          @media (max-width: 768px) {
+            grid-area: 2 / 1 / 5 / 6;
+          }
+          p {
+            top: -50px;
+          }
+        }
+      }
+      .thumb {
+        grid-area: 2 / 3 / 5 / 6;
+        position: relative;
+        box-shadow: 0 0 0 2px $g;
+        transition: box-shadow 0.3s ease-in-out;
+        border-radius: 5px;
+        @media (max-width: 768px) {
+          grid-area: 2 / 1 / 5 / 6;
+        }
+        p {
+          position: absolute;
+          width: 100%;
+          top: -30px;
+          margin: 0;
+          color: $y;
+          font-size: 12px;
+          left: 0;
+          text-align: center;
+        }
+        * {
+          border-radius: 5px;
+        }
+        .inner {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          top: 0;
+          overflow: hidden;
+          z-index: 0;
+          &:before,
+          &:after {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            background: $y;
+            mix-blend-mode: lighten;
+            opacity: 0.5;
+            z-index: 2;
+          }
+          &:after {
+            background: $bg;
+            opacity: 1;
+            z-index: -2;
+            mix-blend-mode: normal;
+          }
+        }
+        &:hover {
+          &:before {
+            transform: translate(-5%, -5%);
+            box-shadow: 0 0 0 2px $y, 0 0 0 6px $bg, 0 0 0 8px $o;
+            transition-delay: 0s, 0.2s;
+          }
+        }
+        &:before {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 5%;
+          top: 5%;
+          box-shadow: 0 0 0 2px $y, 0 0 0 0 $bg, 0 0 0 0 $o;
+          transition: transform 0.2s $expo, box-shadow 0.2s $expo;
+          transition-delay: 0.2s, 0s;
+          background: radial-gradient(
+                circle at center,
+                $y 1px,
+                rgba(255, 255, 255, 0.005) 1px,
+                rgba(255, 255, 255, 0.005) 20px
+              )
+              0px 0px / 20px 20px,
+            radial-gradient(
+                circle at center,
+                $y 1px,
+                rgba(255, 255, 255, 0.005) 1px,
+                rgba(255, 255, 255, 0.005) 20px
+              )
+              10px 10px / 20px 20px;
+          border-radius: 5px;
+        }
+        &:after {
+          content: "";
+          position: absolute;
+          width: 50%;
+          height: calc(100% + 25vh);
+          left: 0%;
+          top: 100%;
+          border-style: dashed;
+          border-width: 2px 2px 2px 2px;
+          border-color: transparent $y $y transparent;
+          border-radius: 0 0 10px 0;
+          opacity: 0.25;
+        }
+        img {
+          mix-blend-mode: exclusion;
+          padding: 2vmin;
+          position: absolute;
+          top: -75%;
+          left: 50%;
+          transform: translateY(calc(var(--progress) * 25%)) translateX(-50%);
+          width: auto;
+          height: 200%;
+          z-index: -1;
+          filter: saturate(0) blur(calc(50px - (var(--progress) * 125px)))
+            brightness(0.5) contrast(4);
+          mix-blend-mode: overlay;
+          &.invert {
+            filter: invert(1) saturate(0)
+              blur(calc(50px - (var(--progress) * 125px))) brightness(0.5)
+              contrast(4);
+          }
+          &.shift {
+            left: 0;
+          }
+          &.light {
+            filter: saturate(0) blur(calc(50px - (var(--progress) * 125px)))
+              brightness(0.75) contrast(4);
+          }
+          &.lighter {
+            filter: saturate(0) blur(calc(50px - (var(--progress) * 125px)))
+              brightness(1) contrast(4);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/shadow-set/README.markdown b/shadow-set/README.markdown
new file mode 100644
index 0000000..bee5e63
--- /dev/null
+++ b/shadow-set/README.markdown
@@ -0,0 +1,5 @@
+# Shadow Set
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/nudoru/pen/QWWpBVV](https://codepen.io/nudoru/pen/QWWpBVV).
+
+
diff --git a/shadow-set/dist/index.html b/shadow-set/dist/index.html
new file mode 100644
index 0000000..b7a766f
--- /dev/null
+++ b/shadow-set/dist/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Shadow Set</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class='wrapper'>
+  <div class='card shadow-xs'>XS</div>
+  <div class='card shadow-sm'>SM</div>
+  <div class='card shadow-m'>M</div>
+  <div class='card shadow-lg'>LG</div>
+  <div class='card shadow-xl'>XL</div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/shadow-set/dist/style.css b/shadow-set/dist/style.css
new file mode 100644
index 0000000..b1dc6f9
--- /dev/null
+++ b/shadow-set/dist/style.css
@@ -0,0 +1,44 @@
+.wrapper {
+  background: #ccc;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.card {
+  margin: 2rem;
+  width: 150px;
+  height: 150px;
+  background: #fff;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #ccc;
+  font-size: 2rem;
+  font-weight: 300;
+}
+
+.shadow-xs {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+}
+
+.shadow-sm {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 2px 6px 8px -5px rgba(0, 0, 0, 0.15);
+}
+
+.shadow-m {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 4px 8px 15px -7px rgba(0, 0, 0, 0.1), 4px 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-lg {
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.05), 4px 23px 40px -15px rgba(0, 0, 0, 0.15), 8px 30px 64px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-xl {
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1), 4px 32px 32px rgba(0, 0, 0, 0.05), 8px 50px 64px rgba(0, 0, 0, 0.15);
+}
\ No newline at end of file
diff --git a/shadow-set/license.txt b/shadow-set/license.txt
new file mode 100644
index 0000000..3b8c56e
--- /dev/null
+++ b/shadow-set/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Matt Perkins (https://codepen.io/nudoru/pen/QWWpBVV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/shadow-set/src/index.html b/shadow-set/src/index.html
new file mode 100644
index 0000000..6390851
--- /dev/null
+++ b/shadow-set/src/index.html
@@ -0,0 +1,7 @@
+<div class='wrapper'>
+  <div class='card shadow-xs'>XS</div>
+  <div class='card shadow-sm'>SM</div>
+  <div class='card shadow-m'>M</div>
+  <div class='card shadow-lg'>LG</div>
+  <div class='card shadow-xl'>XL</div>
+</div>
\ No newline at end of file
diff --git a/shadow-set/src/style.scss b/shadow-set/src/style.scss
new file mode 100644
index 0000000..a81ca84
--- /dev/null
+++ b/shadow-set/src/style.scss
@@ -0,0 +1,46 @@
+// Set of harmonious shadows
+
+.wrapper {
+  background: #ccc;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.card {
+  margin: 2rem;
+  width: 150px;
+  height: 150px;
+  background: #fff;
+  border-radius: .5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
+  color: #ccc;
+  font-size: 2rem;
+  font-weight: 300;
+}
+
+.shadow-xs {
+  box-shadow: 0 1px 2px rgba(0,0,0,0.075);
+}
+
+.shadow-sm {
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05), 2px 6px 8px -5px rgba(0,0,0,0.15);
+}
+
+.shadow-m {
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05), 4px 8px 15px -7px rgba(0,0,0,0.1), 4px 8px 20px rgba(0,0,0,0.10)
+}
+
+.shadow-lg {
+  box-shadow: 0 1px  6px  rgba(0, 0, 0, .1), 0 8px  8px  rgba(0, 0, 0, .05), 4px 23px 40px -15px rgba(0,0,0,0.15), 8px 30px 64px rgba(0, 0, 0, .1)
+}
+
+.shadow-xl {
+  box-shadow: 0 1px  6px  rgba(0, 0, 0, .05), 0 8px  8px  rgba(0, 0, 0, .1), 0 16px 16px rgba(0, 0, 0, .1), 4px 32px 32px rgba(0, 0, 0, .05), 8px 50px 64px rgba(0, 0, 0, .15)
+}
\ No newline at end of file
diff --git a/shape-outsideface/README.markdown b/shape-outsideface/README.markdown
new file mode 100644
index 0000000..60e82db
--- /dev/null
+++ b/shape-outsideface/README.markdown
@@ -0,0 +1,4 @@
+# shape-outside -- Face
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/yuanchuan/pen/xoKMKj](https://codepen.io/yuanchuan/pen/xoKMKj).
+
+ https://twitter.com/yuanchuan23/status/1136446325501911040
diff --git a/shape-outsideface/dist/index.html b/shape-outsideface/dist/index.html
new file mode 100644
index 0000000..5f02f32
--- /dev/null
+++ b/shape-outsideface/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>shape-outside -- Face</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main>
+  <container></container>  
+</main>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/shape-outsideface/dist/script.js b/shape-outsideface/dist/script.js
new file mode 100644
index 0000000..f1f7374
--- /dev/null
+++ b/shape-outsideface/dist/script.js
@@ -0,0 +1,39 @@
+const container = document.querySelector('container');
+
+function r(from, to) {
+  return Math.random() * (to - from + 1) + from;
+}
+
+function ri(from, to) {
+  return ~~r(from, to);
+}
+
+function pick() {
+  return arguments[ri(0, arguments.length - 1)];
+}
+
+function build() {
+  container.innerHTML = '<div class="shape"></div>' +
+    sequence(50, () => `
+      <p style="--offset: ${ r(50, 100) }; color: ${ pick('#F0FFF3', '#fff') }">
+        ${ generateText(ri(20, 100)) }
+      </p>
+    `);
+}
+
+function generateText(times = 100) {
+  return sequence(times, () => `
+    <span>${ String.fromCharCode(ri(0x25a0, 0x25FC)) }</span>
+  `);
+}
+
+function sequence(count, fn) {
+  let ret = [];
+  for (let i = 0; i < count; ++i) {
+    ret.push(fn(i));
+  }
+  return ret.join('');
+}
+
+build();
+document.body.addEventListener('click', build);
\ No newline at end of file
diff --git a/shape-outsideface/dist/style.css b/shape-outsideface/dist/style.css
new file mode 100644
index 0000000..27c38ae
--- /dev/null
+++ b/shape-outsideface/dist/style.css
@@ -0,0 +1,55 @@
+html, body, main { 
+  height: 100%; 
+  margin: 0; 
+}
+
+main { 
+  display: flex; 
+  align-items: center; 
+  justify-content: center;  
+  background: linear-gradient(135deg, purple, red);
+  -webkit-filter: saturate(200%) sepia(50%) hue-rotate(-26deg);
+          filter: saturate(200%) sepia(50%) hue-rotate(-26deg);
+}
+
+container {
+  width: 900px; height: 600px;
+  overflow: hidden;
+  -webkit-transform: scale(.8);
+          transform: scale(.8);
+}
+
+p {
+  margin: 0;
+  word-break: break-all;
+  text-align: right;
+  line-height: 1.1;
+  font-size: 10px;
+  color: #F0FFF3;
+  --offset: 50;
+  -webkit-mask: linear-gradient(to left, #fff, transparent calc(var(--offset) * 1%));
+          mask: linear-gradient(to left, #fff, transparent calc(var(--offset) * 1%));
+}
+
+span {
+  text-shadow:
+    10px 0 10px currentColor,
+    -10px 0 10px currentColor;
+}
+
+.shape {
+  width: 400px; height: 600px;
+  float: right;
+  shape-outside: polygon(
+    0.25% 2px, 99.94% 0.27%, 99.75% 100%, 19.87% 100.03%, 0 100%, 30.61% 100.07%, 
+    37.38% 99.82%, 44.21% 99.38%, 50.92% 99.34%, 71.39% 98.43%, 76.61% 98.79%, 
+    82.65% 97.6%, 85.9% 95.73%, 90.12% 93.85%, 88.45% 89.91%, 87.41% 87.1%, 
+    85.48% 85.09%, 84.96% 82.33%, 88.66% 81.41%, 90.55% 79.29%, 91.75% 77.23%, 
+    91.23% 75.11%, 88.48% 73.75%, 90.93% 72.26%, 92.34% 70.16%, 91.59% 67.66%, 
+    89.87% 64.91%, 87.01% 63.42%, 89.87% 62.01%, 93.04% 60.71%, 96.53% 58.57%, 
+    97.8% 55.26%, 95.36% 53.2%, 91.46% 51.56%, 86.6% 49.21%, 83.43% 47%, 
+    79.27% 44.12%, 77.05% 40.66%, 75.51% 37.07%, 75.49% 33.04%, 76.3% 28.93%, 
+    75.99% 25.46%, 74.57% 22.25%, 72.88% 18.96%, 69.97% 15.51%, 66.59% 12.23%, 
+    62.29% 9.2%, 57.33% 7.06%, 52.77% 5.2%, 46.55% 3.55%, 38.59% 1.5%, 27.73% 0.92%
+  );
+}
\ No newline at end of file
diff --git a/shape-outsideface/license.txt b/shape-outsideface/license.txt
new file mode 100644
index 0000000..f838289
--- /dev/null
+++ b/shape-outsideface/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by yuanchuan (https://codepen.io/yuanchuan/pen/xoKMKj)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/shape-outsideface/src/index.html b/shape-outsideface/src/index.html
new file mode 100644
index 0000000..8e82646
--- /dev/null
+++ b/shape-outsideface/src/index.html
@@ -0,0 +1,3 @@
+<main>
+  <container></container>  
+</main>
\ No newline at end of file
diff --git a/shape-outsideface/src/script.js b/shape-outsideface/src/script.js
new file mode 100644
index 0000000..f1f7374
--- /dev/null
+++ b/shape-outsideface/src/script.js
@@ -0,0 +1,39 @@
+const container = document.querySelector('container');
+
+function r(from, to) {
+  return Math.random() * (to - from + 1) + from;
+}
+
+function ri(from, to) {
+  return ~~r(from, to);
+}
+
+function pick() {
+  return arguments[ri(0, arguments.length - 1)];
+}
+
+function build() {
+  container.innerHTML = '<div class="shape"></div>' +
+    sequence(50, () => `
+      <p style="--offset: ${ r(50, 100) }; color: ${ pick('#F0FFF3', '#fff') }">
+        ${ generateText(ri(20, 100)) }
+      </p>
+    `);
+}
+
+function generateText(times = 100) {
+  return sequence(times, () => `
+    <span>${ String.fromCharCode(ri(0x25a0, 0x25FC)) }</span>
+  `);
+}
+
+function sequence(count, fn) {
+  let ret = [];
+  for (let i = 0; i < count; ++i) {
+    ret.push(fn(i));
+  }
+  return ret.join('');
+}
+
+build();
+document.body.addEventListener('click', build);
\ No newline at end of file
diff --git a/shape-outsideface/src/style.css b/shape-outsideface/src/style.css
new file mode 100644
index 0000000..570d249
--- /dev/null
+++ b/shape-outsideface/src/style.css
@@ -0,0 +1,52 @@
+html, body, main { 
+  height: 100%; 
+  margin: 0; 
+}
+
+main { 
+  display: flex; 
+  align-items: center; 
+  justify-content: center;  
+  background: linear-gradient(135deg, purple, red);
+  filter: saturate(200%) sepia(50%) hue-rotate(-26deg);
+}
+
+container {
+  width: 900px; height: 600px;
+  overflow: hidden;
+  transform: scale(.8);
+}
+
+p {
+  margin: 0;
+  word-break: break-all;
+  text-align: right;
+  line-height: 1.1;
+  font-size: 10px;
+  color: #F0FFF3;
+  --offset: 50;
+  mask: linear-gradient(to left, #fff, transparent calc(var(--offset) * 1%));
+}
+
+span {
+  text-shadow:
+    10px 0 10px currentColor,
+    -10px 0 10px currentColor;
+}
+
+.shape {
+  width: 400px; height: 600px;
+  float: right;
+  shape-outside: polygon(
+    0.25% 2px, 99.94% 0.27%, 99.75% 100%, 19.87% 100.03%, 0 100%, 30.61% 100.07%, 
+    37.38% 99.82%, 44.21% 99.38%, 50.92% 99.34%, 71.39% 98.43%, 76.61% 98.79%, 
+    82.65% 97.6%, 85.9% 95.73%, 90.12% 93.85%, 88.45% 89.91%, 87.41% 87.1%, 
+    85.48% 85.09%, 84.96% 82.33%, 88.66% 81.41%, 90.55% 79.29%, 91.75% 77.23%, 
+    91.23% 75.11%, 88.48% 73.75%, 90.93% 72.26%, 92.34% 70.16%, 91.59% 67.66%, 
+    89.87% 64.91%, 87.01% 63.42%, 89.87% 62.01%, 93.04% 60.71%, 96.53% 58.57%, 
+    97.8% 55.26%, 95.36% 53.2%, 91.46% 51.56%, 86.6% 49.21%, 83.43% 47%, 
+    79.27% 44.12%, 77.05% 40.66%, 75.51% 37.07%, 75.49% 33.04%, 76.3% 28.93%, 
+    75.99% 25.46%, 74.57% 22.25%, 72.88% 18.96%, 69.97% 15.51%, 66.59% 12.23%, 
+    62.29% 9.2%, 57.33% 7.06%, 52.77% 5.2%, 46.55% 3.55%, 38.59% 1.5%, 27.73% 0.92%
+  );
+}
\ No newline at end of file
diff --git a/simple-css-loaders/README.markdown b/simple-css-loaders/README.markdown
new file mode 100644
index 0000000..0d366af
--- /dev/null
+++ b/simple-css-loaders/README.markdown
@@ -0,0 +1,5 @@
+# Simple CSS loaders
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jenning/pen/YzNmzaV](https://codepen.io/jenning/pen/YzNmzaV).
+
+
diff --git a/simple-css-loaders/dist/index.html b/simple-css-loaders/dist/index.html
new file mode 100644
index 0000000..5e7f798
--- /dev/null
+++ b/simple-css-loaders/dist/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Simple CSS loaders</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="page">
+	<header class="header">
+		<h1 class="header-title">Simple CSS loaders</h1>
+		<p class="header-subtitle">single html element css animation</p>
+	</header>
+	
+	<main class="container">
+		<div class="item">
+			<i class="loader --2"></i>
+		</div>
+		<div class="item">
+			<i class="loader --9"></i>
+		</div>
+		<div class="item">
+			<i class="loader --3"></i>
+		</div>
+		
+		<div class="item">
+			<i class="loader --4"></i>
+		</div>
+		<div class="item">
+			<i class="loader --1"></i>
+		</div>
+		<div class="item">
+			<i class="loader --5"></i>
+		</div>
+		
+		<div class="item">
+			<i class="loader --6"></i>
+		</div>
+		<div class="item">
+			<i class="loader --8"></i>
+		</div>
+		<div class="item">
+			<i class="loader --7"></i>
+		</div>
+	</main>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/simple-css-loaders/dist/style.css b/simple-css-loaders/dist/style.css
new file mode 100644
index 0000000..5e3268c
--- /dev/null
+++ b/simple-css-loaders/dist/style.css
@@ -0,0 +1,570 @@
+.loader {
+	--color: white;
+	--size-mid: 6vmin;
+	--size-dot: 1.5vmin;
+	--size-bar: 0.4vmin;
+	--size-square: 3vmin;
+	
+	display: block;
+	position: relative;
+	width: 50%;
+	display: grid;
+	place-items: center;
+}
+
+.loader::before,
+.loader::after {
+	content: '';
+	box-sizing: border-box;
+	position: absolute;
+}
+
+/**
+	loader --1
+**/
+.loader.--1::before {
+	width: var(--size-mid);
+	height: var(--size-mid);
+	border: 4px solid var(--color);
+	border-top-color: transparent;
+	border-radius: 50%;
+	-webkit-animation: loader-1 1s linear infinite;
+	        animation: loader-1 1s linear infinite;
+}
+
+.loader.--1::after {
+	width: calc(var(--size-mid) - 2px);
+	height: calc(var(--size-mid) - 2px);
+	border: 2px solid transparent;
+	border-top-color: var(--color);
+	border-radius: 50%;
+	animation: loader-1 0.6s linear reverse infinite;
+}
+
+@-webkit-keyframes loader-1 {
+	100% {
+		transform: rotate(1turn);
+	}
+}
+
+@keyframes loader-1 {
+	100% {
+		transform: rotate(1turn);
+	}
+}
+
+/**
+	loader --2
+**/
+.loader.--2::before,
+.loader.--2::after {
+	width: var(--size-dot);
+	height: var(--size-dot);
+	background-color: var(--color);
+	border-radius: 50%;
+	opacity: 0;
+	-webkit-animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
+	        animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
+}
+
+.loader.--2::after {
+	-webkit-animation-delay: 0.3s;
+	        animation-delay: 0.3s;
+}
+
+@-webkit-keyframes loader-2 {
+	0%, 80%, 100% {
+		opacity: 0;
+	}
+	
+	33% {
+		opacity: 1;
+	}
+	
+	0%, 100% {
+		transform: translateX(-4vmin);
+	}
+	
+	90% {
+		transform: translateX(4vmin);
+	}
+}
+
+@keyframes loader-2 {
+	0%, 80%, 100% {
+		opacity: 0;
+	}
+	
+	33% {
+		opacity: 1;
+	}
+	
+	0%, 100% {
+		transform: translateX(-4vmin);
+	}
+	
+	90% {
+		transform: translateX(4vmin);
+	}
+}
+
+/**
+	loader --3
+**/
+.loader.--3::before,
+.loader.--3::after {
+	width: var(--size-dot);
+	height: var(--size-dot);
+	background-color: var(--color);
+	border-radius: 50%;
+	-webkit-animation: loader-3 1.2s ease-in-out infinite;
+	        animation: loader-3 1.2s ease-in-out infinite;
+}
+
+.loader.--3::before {
+	left: calc(50% - 1.6vmin - var(--size-dot));
+}
+
+.loader.--3::after {
+	left: calc(50% + 1.6vmin);
+	-webkit-animation-delay: -0.4s;
+	        animation-delay: -0.4s;
+}
+
+@-webkit-keyframes loader-3 {
+	0%, 100% {
+		transform: translateY(-2.6vmin);
+	}
+	
+	44% {
+		transform: translateY(2.6vmin);
+	}
+}
+
+@keyframes loader-3 {
+	0%, 100% {
+		transform: translateY(-2.6vmin);
+	}
+	
+	44% {
+		transform: translateY(2.6vmin);
+	}
+}
+
+/**
+	loader --4
+**/
+.loader.--4::before {
+	height: var(--size-bar);
+	width: 6vmin;
+	background-color: var(--color);
+	-webkit-animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
+	        animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
+}
+
+@-webkit-keyframes loader-4 {
+	0%, 44%, 88.1%, 100% {
+		transform-origin: left;
+	}
+	
+	0%, 100%, 88% {
+		transform: scaleX(0);
+	}
+	
+	44.1%, 88% {
+		transform-origin: right;
+	}
+	
+	33%, 44% {
+		transform: scaleX(1);
+	}
+}
+
+@keyframes loader-4 {
+	0%, 44%, 88.1%, 100% {
+		transform-origin: left;
+	}
+	
+	0%, 100%, 88% {
+		transform: scaleX(0);
+	}
+	
+	44.1%, 88% {
+		transform-origin: right;
+	}
+	
+	33%, 44% {
+		transform: scaleX(1);
+	}
+}
+
+/**
+	loader --5
+**/
+.loader.--5::before,
+.loader.--5::after {
+	height: 3vmin;
+	width: var(--size-bar);
+	background-color: var(--color);
+	-webkit-animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;
+	        animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;
+}
+
+.loader.--5::before {
+	left: calc(50% - 1vmin);
+	top: calc(50% - 3vmin);
+}
+
+.loader.--5::after {
+	left: calc(50% + 1vmin);
+	top: calc(50% - 1vmin);
+	-webkit-animation-delay: 0.2s;
+	        animation-delay: 0.2s;
+}
+
+@-webkit-keyframes loader-5 {
+	0%, 88%, 100% {
+		opacity: 0;
+	}
+	
+	0% {
+		transform: translateY(-6vmin);
+	}
+	
+	33% {
+		opacity: 1;
+	}
+	
+	33%, 88% {
+		transform: translateY(3vmin);
+	}
+}
+
+@keyframes loader-5 {
+	0%, 88%, 100% {
+		opacity: 0;
+	}
+	
+	0% {
+		transform: translateY(-6vmin);
+	}
+	
+	33% {
+		opacity: 1;
+	}
+	
+	33%, 88% {
+		transform: translateY(3vmin);
+	}
+}
+
+/**
+	loader --6
+**/
+.loader.--6::before {
+	width: var(--size-square);
+	height: var(--size-square);
+	background-color: var(--color);
+	top: calc(50% - var(--size-square));
+	left: calc(50% - var(--size-square));
+	-webkit-animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+	        animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+}
+
+@-webkit-keyframes loader-6 {
+	0%, 100% {
+		transform: none;
+	}
+	
+	25% {
+		transform: translateX(100%);
+	}
+	
+	50% {
+		transform: translateX(100%) translateY(100%);
+	}
+	
+	75% {
+		transform: translateY(100%);
+	}
+}
+
+@keyframes loader-6 {
+	0%, 100% {
+		transform: none;
+	}
+	
+	25% {
+		transform: translateX(100%);
+	}
+	
+	50% {
+		transform: translateX(100%) translateY(100%);
+	}
+	
+	75% {
+		transform: translateY(100%);
+	}
+}
+
+/**
+	loader --7
+**/
+.loader.--7::before,
+.loader.--7::after	{
+	width: var(--size-square);
+	height: var(--size-square);
+	background-color: var(--color);
+}
+
+.loader.--7::before {
+	top: calc(50% - var(--size-square));
+	left: calc(50% - var(--size-square));
+	-webkit-animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+	        animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+}
+
+.loader.--7::after {
+	top: 50%;
+	left: 50%;
+	-webkit-animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+	        animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+}
+
+@-webkit-keyframes loader-7 {
+	0%, 100% {
+		transform: none;
+	}
+	
+	25% {
+		transform: translateX(-100%);
+	}
+	
+	50% {
+		transform: translateX(-100%) translateY(-100%);
+	}
+	
+	75% {
+		transform: translateY(-100%);
+	}
+}
+
+@keyframes loader-7 {
+	0%, 100% {
+		transform: none;
+	}
+	
+	25% {
+		transform: translateX(-100%);
+	}
+	
+	50% {
+		transform: translateX(-100%) translateY(-100%);
+	}
+	
+	75% {
+		transform: translateY(-100%);
+	}
+}
+
+/**
+	loader --8
+**/
+.loader.--8::before,
+.loader.--8::after {
+	width: var(--size-dot);
+	height: var(--size-dot);
+	border-radius: 50%;
+	background-color: var(--color);
+}
+
+.loader.--8::before {
+	top: calc(50% + 4vmin);
+	-webkit-animation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite;
+	        animation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite;
+}
+
+.loader.--8::after {
+	opacity: 0;
+	top: calc(50% - 2vmin);
+	-webkit-animation: loader-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite;
+	        animation: loader-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite;
+}
+
+@-webkit-keyframes loader-8-1 {
+	0%, 55%, 100% {
+		opacity: 0;
+	}
+	
+	0% {
+		transform: scale(0.2);
+	}
+	
+	22% {
+		opacity: 1;
+	}
+	
+	33%, 55% {
+		transform: scale(1) translateY(-6vmin);
+	}
+}
+
+@keyframes loader-8-1 {
+	0%, 55%, 100% {
+		opacity: 0;
+	}
+	
+	0% {
+		transform: scale(0.2);
+	}
+	
+	22% {
+		opacity: 1;
+	}
+	
+	33%, 55% {
+		transform: scale(1) translateY(-6vmin);
+	}
+}
+
+@-webkit-keyframes loader-8-2 {
+	0%, 100% {
+		opacity: 0;
+	}
+	
+	33% {
+		opacity: 0.3;
+	}
+	
+	0% {
+		transform: scale(0);
+	}
+	
+	100% {
+		transform: scale(4);
+	}
+}
+
+@keyframes loader-8-2 {
+	0%, 100% {
+		opacity: 0;
+	}
+	
+	33% {
+		opacity: 0.3;
+	}
+	
+	0% {
+		transform: scale(0);
+	}
+	
+	100% {
+		transform: scale(4);
+	}
+}
+
+/**
+	loader --9
+**/
+.loader.--9::before,
+.loader.--9::after {
+	width: var(--size-dot);
+	height: var(--size-dot);
+	border-radius: 50%;
+	background-color: var(--color);
+	-webkit-animation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite;
+	        animation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite;
+}
+
+.loader.--9::before {
+	left: calc(50% - var(--size-dot) - 1.6vmin);
+}
+
+.loader.--9::after {
+	left: calc(50% + 1.6vmin);
+	-webkit-animation-delay: 0.12s;
+	        animation-delay: 0.12s;
+}
+
+@-webkit-keyframes loader-9 {
+	0%, 100% {
+		opacity: 0;
+	}
+	
+	0% {
+		transform: translate(-4vmin, -4vmin);
+	}
+	
+	66% {
+		opacity: 1;
+	}
+	
+	66%, 100% {
+		transform: none;
+	}
+}
+
+@keyframes loader-9 {
+	0%, 100% {
+		opacity: 0;
+	}
+	
+	0% {
+		transform: translate(-4vmin, -4vmin);
+	}
+	
+	66% {
+		opacity: 1;
+	}
+	
+	66%, 100% {
+		transform: none;
+	}
+}
+
+/**
+	miscs
+**/
+
+.container {
+	display: grid;
+	grid-template-columns: repeat(3, 18vmin);
+	grid-template-rows: repeat(3, 18vmin);
+	grid-gap: 1vmin;
+}
+
+.item	{
+	background: rgba(255, 255, 255, 0.1);
+	display: grid;
+	place-items: center;
+	border-radius: 4px;
+}
+
+.page {
+	margin: auto;
+}
+
+.header {
+	margin-bottom: 4vmin;
+}
+
+.header-title {
+	font-size: 3.75vmin;
+}
+
+.header-subtitle {
+	font-size: 2vmin;
+	text-transform: uppercase;
+	opacity: 0.6;
+}
+
+html, body {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
+	font-family: 'Noto Sans', sans-serif;
+	color: white;
+	text-align: center;
+	letter-spacing: 0.3px;
+}
\ No newline at end of file
diff --git a/simple-css-loaders/license.txt b/simple-css-loaders/license.txt
new file mode 100644
index 0000000..297d219
--- /dev/null
+++ b/simple-css-loaders/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Jenning (https://codepen.io/jenning/pen/YzNmzaV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/simple-css-loaders/src/index.html b/simple-css-loaders/src/index.html
new file mode 100644
index 0000000..b717558
--- /dev/null
+++ b/simple-css-loaders/src/index.html
@@ -0,0 +1,38 @@
+<div class="page">
+	<header class="header">
+		<h1 class="header-title">Simple CSS loaders</h1>
+		<p class="header-subtitle">single html element css animation</p>
+	</header>
+	
+	<main class="container">
+		<div class="item">
+			<i class="loader --2"></i>
+		</div>
+		<div class="item">
+			<i class="loader --9"></i>
+		</div>
+		<div class="item">
+			<i class="loader --3"></i>
+		</div>
+		
+		<div class="item">
+			<i class="loader --4"></i>
+		</div>
+		<div class="item">
+			<i class="loader --1"></i>
+		</div>
+		<div class="item">
+			<i class="loader --5"></i>
+		</div>
+		
+		<div class="item">
+			<i class="loader --6"></i>
+		</div>
+		<div class="item">
+			<i class="loader --8"></i>
+		</div>
+		<div class="item">
+			<i class="loader --7"></i>
+		</div>
+	</main>
+</div>
\ No newline at end of file
diff --git a/simple-css-loaders/src/style.css b/simple-css-loaders/src/style.css
new file mode 100644
index 0000000..b1cd456
--- /dev/null
+++ b/simple-css-loaders/src/style.css
@@ -0,0 +1,395 @@
+.loader {
+	--color: white;
+	--size-mid: 6vmin;
+	--size-dot: 1.5vmin;
+	--size-bar: 0.4vmin;
+	--size-square: 3vmin;
+	
+	display: block;
+	position: relative;
+	width: 50%;
+	display: grid;
+	place-items: center;
+}
+
+.loader::before,
+.loader::after {
+	content: '';
+	box-sizing: border-box;
+	position: absolute;
+}
+
+/**
+	loader --1
+**/
+.loader.--1::before {
+	width: var(--size-mid);
+	height: var(--size-mid);
+	border: 4px solid var(--color);
+	border-top-color: transparent;
+	border-radius: 50%;
+	animation: loader-1 1s linear infinite;
+}
+
+.loader.--1::after {
+	width: calc(var(--size-mid) - 2px);
+	height: calc(var(--size-mid) - 2px);
+	border: 2px solid transparent;
+	border-top-color: var(--color);
+	border-radius: 50%;
+	animation: loader-1 0.6s linear reverse infinite;
+}
+
+@keyframes loader-1 {
+	100% {
+		transform: rotate(1turn);
+	}
+}
+
+/**
+	loader --2
+**/
+.loader.--2::before,
+.loader.--2::after {
+	width: var(--size-dot);
+	height: var(--size-dot);
+	background-color: var(--color);
+	border-radius: 50%;
+	opacity: 0;
+	animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
+}
+
+.loader.--2::after {
+	animation-delay: 0.3s;
+}
+
+@keyframes loader-2 {
+	0%, 80%, 100% {
+		opacity: 0;
+	}
+	
+	33% {
+		opacity: 1;
+	}
+	
+	0%, 100% {
+		transform: translateX(-4vmin);
+	}
+	
+	90% {
+		transform: translateX(4vmin);
+	}
+}
+
+/**
+	loader --3
+**/
+.loader.--3::before,
+.loader.--3::after {
+	width: var(--size-dot);
+	height: var(--size-dot);
+	background-color: var(--color);
+	border-radius: 50%;
+	animation: loader-3 1.2s ease-in-out infinite;
+}
+
+.loader.--3::before {
+	left: calc(50% - 1.6vmin - var(--size-dot));
+}
+
+.loader.--3::after {
+	left: calc(50% + 1.6vmin);
+	animation-delay: -0.4s;
+}
+
+@keyframes loader-3 {
+	0%, 100% {
+		transform: translateY(-2.6vmin);
+	}
+	
+	44% {
+		transform: translateY(2.6vmin);
+	}
+}
+
+/**
+	loader --4
+**/
+.loader.--4::before {
+	height: var(--size-bar);
+	width: 6vmin;
+	background-color: var(--color);
+	animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
+}
+
+@keyframes loader-4 {
+	0%, 44%, 88.1%, 100% {
+		transform-origin: left;
+	}
+	
+	0%, 100%, 88% {
+		transform: scaleX(0);
+	}
+	
+	44.1%, 88% {
+		transform-origin: right;
+	}
+	
+	33%, 44% {
+		transform: scaleX(1);
+	}
+}
+
+/**
+	loader --5
+**/
+.loader.--5::before,
+.loader.--5::after {
+	height: 3vmin;
+	width: var(--size-bar);
+	background-color: var(--color);
+	animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;
+}
+
+.loader.--5::before {
+	left: calc(50% - 1vmin);
+	top: calc(50% - 3vmin);
+}
+
+.loader.--5::after {
+	left: calc(50% + 1vmin);
+	top: calc(50% - 1vmin);
+	animation-delay: 0.2s;
+}
+
+@keyframes loader-5 {
+	0%, 88%, 100% {
+		opacity: 0;
+	}
+	
+	0% {
+		transform: translateY(-6vmin);
+	}
+	
+	33% {
+		opacity: 1;
+	}
+	
+	33%, 88% {
+		transform: translateY(3vmin);
+	}
+}
+
+/**
+	loader --6
+**/
+.loader.--6::before {
+	width: var(--size-square);
+	height: var(--size-square);
+	background-color: var(--color);
+	top: calc(50% - var(--size-square));
+	left: calc(50% - var(--size-square));
+	animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+}
+
+@keyframes loader-6 {
+	0%, 100% {
+		transform: none;
+	}
+	
+	25% {
+		transform: translateX(100%);
+	}
+	
+	50% {
+		transform: translateX(100%) translateY(100%);
+	}
+	
+	75% {
+		transform: translateY(100%);
+	}
+}
+
+/**
+	loader --7
+**/
+.loader.--7::before,
+.loader.--7::after	{
+	width: var(--size-square);
+	height: var(--size-square);
+	background-color: var(--color);
+}
+
+.loader.--7::before {
+	top: calc(50% - var(--size-square));
+	left: calc(50% - var(--size-square));
+	animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+}
+
+.loader.--7::after {
+	top: 50%;
+	left: 50%;
+	animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+}
+
+@keyframes loader-7 {
+	0%, 100% {
+		transform: none;
+	}
+	
+	25% {
+		transform: translateX(-100%);
+	}
+	
+	50% {
+		transform: translateX(-100%) translateY(-100%);
+	}
+	
+	75% {
+		transform: translateY(-100%);
+	}
+}
+
+/**
+	loader --8
+**/
+.loader.--8::before,
+.loader.--8::after {
+	width: var(--size-dot);
+	height: var(--size-dot);
+	border-radius: 50%;
+	background-color: var(--color);
+}
+
+.loader.--8::before {
+	top: calc(50% + 4vmin);
+	animation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite;
+}
+
+.loader.--8::after {
+	opacity: 0;
+	top: calc(50% - 2vmin);
+	animation: loader-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite;
+}
+
+@keyframes loader-8-1 {
+	0%, 55%, 100% {
+		opacity: 0;
+	}
+	
+	0% {
+		transform: scale(0.2);
+	}
+	
+	22% {
+		opacity: 1;
+	}
+	
+	33%, 55% {
+		transform: scale(1) translateY(-6vmin);
+	}
+}
+
+@keyframes loader-8-2 {
+	0%, 100% {
+		opacity: 0;
+	}
+	
+	33% {
+		opacity: 0.3;
+	}
+	
+	0% {
+		transform: scale(0);
+	}
+	
+	100% {
+		transform: scale(4);
+	}
+}
+
+/**
+	loader --9
+**/
+.loader.--9::before,
+.loader.--9::after {
+	width: var(--size-dot);
+	height: var(--size-dot);
+	border-radius: 50%;
+	background-color: var(--color);
+	animation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite;
+}
+
+.loader.--9::before {
+	left: calc(50% - var(--size-dot) - 1.6vmin);
+}
+
+.loader.--9::after {
+	left: calc(50% + 1.6vmin);
+	animation-delay: 0.12s;
+}
+
+@keyframes loader-9 {
+	0%, 100% {
+		opacity: 0;
+	}
+	
+	0% {
+		transform: translate(-4vmin, -4vmin);
+	}
+	
+	66% {
+		opacity: 1;
+	}
+	
+	66%, 100% {
+		transform: none;
+	}
+}
+
+/**
+	miscs
+**/
+
+.container {
+	display: grid;
+	grid-template-columns: repeat(3, 18vmin);
+	grid-template-rows: repeat(3, 18vmin);
+	grid-gap: 1vmin;
+}
+
+.item	{
+	background: rgba(255, 255, 255, 0.1);
+	display: grid;
+	place-items: center;
+	border-radius: 4px;
+}
+
+.page {
+	margin: auto;
+}
+
+.header {
+	margin-bottom: 4vmin;
+}
+
+.header-title {
+	font-size: 3.75vmin;
+}
+
+.header-subtitle {
+	font-size: 2vmin;
+	text-transform: uppercase;
+	opacity: 0.6;
+}
+
+html, body {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
+	font-family: 'Noto Sans', sans-serif;
+	color: white;
+	text-align: center;
+	letter-spacing: 0.3px;
+}
diff --git a/simple-music-app-ui-design/README.markdown b/simple-music-app-ui-design/README.markdown
new file mode 100644
index 0000000..0273a0b
--- /dev/null
+++ b/simple-music-app-ui-design/README.markdown
@@ -0,0 +1,6 @@
+# Simple Music App UI Design 🎵▶️  
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/TurkAysenur/pen/povVmwO](https://codepen.io/TurkAysenur/pen/povVmwO).
+
+ Inspired by Julia- 'Music app UI case'
+
+Link:  https://dribbble.com/shots/7043696-Music-app-UI-case
\ No newline at end of file
diff --git a/simple-music-app-ui-design/dist/index.html b/simple-music-app-ui-design/dist/index.html
new file mode 100644
index 0000000..06f7b37
--- /dev/null
+++ b/simple-music-app-ui-design/dist/index.html
@@ -0,0 +1,374 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Simple Music App UI Design 🎵▶️  </title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<link
+  href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap"
+  rel="stylesheet"
+/>
+<div class="container">
+  <div class="bubble pink-bubble"></div>
+  <div class="bubble blue-bubble"></div>
+  <div class="bubble small-p-bubble"></div>
+  <div class="bubble small-b-bubble"></div>
+  <div class="wrapper">
+    <div class="app-ui left-ui">
+      <div class="header">
+        <div class="discover">Discover</div>
+        <div class="menu-line"></div>
+      </div>
+      <div class="left-menu-bar">
+        <div class="playlist">
+          <div class="playlist-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29">
+              <g
+                fill="#FFF"
+                fill-rule="evenodd"
+                stroke="#10335C"
+                stroke-width="3"
+              >
+                <rect width="21" height="21" x="7" y="7" rx="5" />
+                <rect width="21" height="21" x="1" y="1" rx="5" />
+              </g>
+            </svg>
+          </div>
+          <div class="ur-playlist">Your playlist</div>
+        </div>
+        <div class="like-recent">
+          <div class="ur-playlist recent">Recent</div>
+          <div class="recent-detail"></div>
+          <div class="ur-playlist like">Like</div>
+        </div>
+      </div>
+      <div class="album-img">
+        <div class="relax">Relax</div>
+        <button class="btn play-pause">
+          <div class="icon-container">
+            <div class="icon play">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 308.838 308.838"
+              >
+                <path
+                  fill="#063064"
+                  d="M269.394 139.638c-.4-.8-.8-1.2-1.2-1.6-.8-1.2-1.6-2-2.8-3.2-1.2-1.2-2.8-2.4-4-3.2l-91.6-63.2-92-63.6c-6-4.4-13.6-5.6-20.4-4.4s-13.2 5.2-17.2 11.2c-1.6 2.4-2.8 4.8-3.6 7.2-.8 2-1.2 4-1.2 6.4v256.4c0 7.6 3.2 14.4 8 19.2 4.4 4.8 11.2 8 18.8 8 3.2 0 6.4-.4 9.2-1.6 2.8-.8 5.2-2.4 7.6-4.4l90.8-62.8 91.2-63.2c.4-.4 1.2-.8 1.6-1.2 5.6-4.4 9.2-10.4 10.4-16.8 1.2-6.4 0-13.6-3.6-19.2zm-20 20.4l-92 63.6-90.4 62.4c-.4 0-.8.4-.8.4-.4.4-1.2.8-2 1.2-.8.4-1.2.4-2 .4-1.6 0-3.2-.8-4.4-1.6-1.2-1.2-1.6-2.8-1.6-4.4v-127.6h-.4v-126-1.6c0-.4 0-.8.4-1.2 0-.4.4-.8.4-1.2.4-.4.4-.4.4-.8.8-1.2 2.4-2 3.6-2 1.6-.4 2.8 0 4.4.8.4.4.8.4 1.2.8l91.2 63.2 91.6 63.2c.4.4.8.4.8.8.4.4.4.8.8.8.8 1.6 1.2 3.2 1.2 4.8-.4 1.6-1.2 3.2-2.4 4z"
+                  class="active-path"
+                  data-old_color="#000000"
+                  data-original="#000000"
+                />
+              </svg>
+            </div>
+          </div>
+          <div class="icon-container">
+            <div class="icon pause">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 493.528 493.528"
+              >
+                <path
+                  fill="#063064"
+                  d="M178.064 0L166.04.248c-14.876 0-27.236 12.112-27.236 26.992v439.664c0 14.876 13.396 26.624 28.272 26.624h.084l10.976-.072c14.892 0 26.22-11.92 26.22-26.808V26.996C204.352 12.116 193.028 0 178.064 0zM328.584 0l-12.092.248c-14.88 0-27.3 12.112-27.3 26.992v439.664c0 14.876 13.708 26.624 28.58 26.624h.084l10.816-.072c14.88 0 26.052-11.92 26.052-26.808V26.996C354.72 12.116 343.548 0 328.584 0z"
+                  class="active-path"
+                  data-old_color="#000000"
+                  data-original="#000000"
+                />
+              </svg>
+            </div>
+          </div>
+        </button>
+      </div>
+      <div class="flowers-img"></div>
+      <div class="music-list">
+        <div class="song">
+          <div class="song-img">
+            <img
+              src="https://images.unsplash.com/photo-1574281183650-14db8f28c259?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
+            />
+          </div>
+          <div class="song-detail">
+            <div class="song-name">Sunset</div>
+            <div class="artist">The xx</div>
+          </div>
+        </div>
+        <div class="song">
+          <div class="song-img">
+            <img
+              src="https://images.unsplash.com/photo-1496324839965-d6281225d8eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80"
+            />
+          </div>
+          <div class="song-detail">
+            <div class="song-name">The pursuit of happiness</div>
+            <div class="artist">Beyries</div>
+          </div>
+        </div>
+        <div class="song">
+          <div class="song-img">
+            <img
+              src="https://images.unsplash.com/photo-1506079619863-0bf287d459e8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
+            />
+          </div>
+          <div class="song-detail">
+            <div class="song-name">Run</div>
+            <div class="artist">Daughter</div>
+          </div>
+        </div>
+      </div>
+      <div class="player-bg">
+        <button class="btn play-pause">
+          <div class="icon-container">
+            <div class="icon play small-play">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 308.838 308.838"
+              >
+                <path
+                  fill="#063064"
+                  d="M269.394 139.638c-.4-.8-.8-1.2-1.2-1.6-.8-1.2-1.6-2-2.8-3.2-1.2-1.2-2.8-2.4-4-3.2l-91.6-63.2-92-63.6c-6-4.4-13.6-5.6-20.4-4.4s-13.2 5.2-17.2 11.2c-1.6 2.4-2.8 4.8-3.6 7.2-.8 2-1.2 4-1.2 6.4v256.4c0 7.6 3.2 14.4 8 19.2 4.4 4.8 11.2 8 18.8 8 3.2 0 6.4-.4 9.2-1.6 2.8-.8 5.2-2.4 7.6-4.4l90.8-62.8 91.2-63.2c.4-.4 1.2-.8 1.6-1.2 5.6-4.4 9.2-10.4 10.4-16.8 1.2-6.4 0-13.6-3.6-19.2zm-20 20.4l-92 63.6-90.4 62.4c-.4 0-.8.4-.8.4-.4.4-1.2.8-2 1.2-.8.4-1.2.4-2 .4-1.6 0-3.2-.8-4.4-1.6-1.2-1.2-1.6-2.8-1.6-4.4v-127.6h-.4v-126-1.6c0-.4 0-.8.4-1.2 0-.4.4-.8.4-1.2.4-.4.4-.4.4-.8.8-1.2 2.4-2 3.6-2 1.6-.4 2.8 0 4.4.8.4.4.8.4 1.2.8l91.2 63.2 91.6 63.2c.4.4.8.4.8.8.4.4.4.8.8.8.8 1.6 1.2 3.2 1.2 4.8-.4 1.6-1.2 3.2-2.4 4z"
+                  class="active-path"
+                  data-old_color="#000000"
+                  data-original="#000000"
+                />
+              </svg>
+            </div>
+          </div>
+          <div class="icon-container">
+            <div class="icon pause small-pause">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 493.528 493.528"
+              >
+                <path
+                  fill="#063064"
+                  d="M178.064 0L166.04.248c-14.876 0-27.236 12.112-27.236 26.992v439.664c0 14.876 13.396 26.624 28.272 26.624h.084l10.976-.072c14.892 0 26.22-11.92 26.22-26.808V26.996C204.352 12.116 193.028 0 178.064 0zM328.584 0l-12.092.248c-14.88 0-27.3 12.112-27.3 26.992v439.664c0 14.876 13.708 26.624 28.58 26.624h.084l10.816-.072c14.88 0 26.052-11.92 26.052-26.808V26.996C354.72 12.116 343.548 0 328.584 0z"
+                  class="active-path"
+                  data-old_color="#000000"
+                  data-original="#000000"
+                />
+              </svg>
+            </div>
+          </div>
+        </button>
+      </div>
+      <div class="player-info">
+        <div class="player-cover">
+          <img
+            src="https://images.unsplash.com/photo-1521133573892-e44906baee46?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
+          />
+          <div class="pointer"></div>
+        </div>
+        <div class="song-detail">
+          <div class="song-name">Tearing Me up</div>
+          <div class="artist play-artist">Bob Moses</div>
+        </div>
+        <svg
+          fill="none"
+          stroke="#063064"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          class="blue-heart"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
+          />
+        </svg>
+      </div>
+      <div class="nav">
+        <div class="nav-first">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            class="feather feather-home"
+            viewBox="0 0 24 24"
+          >
+            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+          </svg>
+          <svg
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            class="css-i6dzq1"
+            viewBox="0 0 24 24"
+          >
+            <circle cx="11" cy="11" r="8" />
+            <path d="M21 21l-4.35-4.35" />
+          </svg>
+          <svg
+            style="width: 15px; height: 15px;"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 29 29"
+          >
+            <g
+              fill="#FFF"
+              fill-rule="evenodd"
+              stroke="currentColor"
+              stroke-width="3"
+            >
+              <rect width="21" height="21" x="7" y="7" rx="5" />
+              <rect width="21" height="21" x="1" y="1" rx="5" />
+            </g>
+          </svg>
+          <svg
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            class="css-i6dzq1"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div class="app-ui right-ui">
+      <div class="play-action">
+        <div class="half-arrow">
+          <div class="line">
+            <div class="other-line"></div>
+          </div>
+        </div>
+        <div class="what-play">Now playing</div>
+        <div class="double-dot">
+          <div class="dot"></div>
+          <div class="dot"></div>
+        </div>
+      </div>
+      <div class="app-ui inside-right">
+        <div class="bigPlay">
+          <img src="https://images.unsplash.com/photo-1521133573892-e44906baee46?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" />
+          <div class="grey-detail"></div>
+          <div class="grey-detail-sec"></div>
+          <button class="btn play-pause">
+            <div class="icon-container">
+              <div class="icon play bigger-play">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 308.838 308.838"
+                >
+                  <path
+                    fill="#063064"
+                    d="M269.394 139.638c-.4-.8-.8-1.2-1.2-1.6-.8-1.2-1.6-2-2.8-3.2-1.2-1.2-2.8-2.4-4-3.2l-91.6-63.2-92-63.6c-6-4.4-13.6-5.6-20.4-4.4s-13.2 5.2-17.2 11.2c-1.6 2.4-2.8 4.8-3.6 7.2-.8 2-1.2 4-1.2 6.4v256.4c0 7.6 3.2 14.4 8 19.2 4.4 4.8 11.2 8 18.8 8 3.2 0 6.4-.4 9.2-1.6 2.8-.8 5.2-2.4 7.6-4.4l90.8-62.8 91.2-63.2c.4-.4 1.2-.8 1.6-1.2 5.6-4.4 9.2-10.4 10.4-16.8 1.2-6.4 0-13.6-3.6-19.2zm-20 20.4l-92 63.6-90.4 62.4c-.4 0-.8.4-.8.4-.4.4-1.2.8-2 1.2-.8.4-1.2.4-2 .4-1.6 0-3.2-.8-4.4-1.6-1.2-1.2-1.6-2.8-1.6-4.4v-127.6h-.4v-126-1.6c0-.4 0-.8.4-1.2 0-.4.4-.8.4-1.2.4-.4.4-.4.4-.8.8-1.2 2.4-2 3.6-2 1.6-.4 2.8 0 4.4.8.4.4.8.4 1.2.8l91.2 63.2 91.6 63.2c.4.4.8.4.8.8.4.4.4.8.8.8.8 1.6 1.2 3.2 1.2 4.8-.4 1.6-1.2 3.2-2.4 4z"
+                    class="active-path"
+                    data-old_color="#000000"
+                    data-original="#000000"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div class="icon-container">
+              <div class="icon pause bigger-pause">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 493.528 493.528"
+                >
+                  <path
+                    fill="#063064"
+                    d="M178.064 0L166.04.248c-14.876 0-27.236 12.112-27.236 26.992v439.664c0 14.876 13.396 26.624 28.272 26.624h.084l10.976-.072c14.892 0 26.22-11.92 26.22-26.808V26.996C204.352 12.116 193.028 0 178.064 0zM328.584 0l-12.092.248c-14.88 0-27.3 12.112-27.3 26.992v439.664c0 14.876 13.708 26.624 28.58 26.624h.084l10.816-.072c14.88 0 26.052-11.92 26.052-26.808V26.996C354.72 12.116 343.548 0 328.584 0z"
+                    class="active-path"
+                    data-old_color="#000000"
+                    data-original="#000000"
+                  />
+                </svg>
+              </div>
+            </div>
+          </button>
+          <div class="song-detail right-detail">
+          <div class="song-name right-song">Tearing Me Up</div>
+          <div class="artist play-artist right-artist">Bob Moses</div>
+       
+        </div>
+          <div class="line-wrapper">
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+       </div>
+          <div class="second">
+            <div class="listened">0:39</div>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.88 477.88">
+  <path fill="#063064" d="M468.46 1.8a17.06 17.06 0 00-15.3 0L9.44 223.69a17.07 17.07 0 004.58 32.05l176.1 32.03 32.04 176.11a17.07 17.07 0 0032.05 4.58L476.07 24.7a17.07 17.07 0 00-7.61-22.9z" class="active-path" data-old_color="#000000" data-original="#000000"/>
+</svg>
+            <div class="listen">6:28</div>
+          </div>
+       <div class="left-bar-wrapper">
+         <svg class="addTo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+  <path fill="#063064" d="M934 822H794v140c0 15.5-12.5 28-28 28s-28-12.5-28-28V822H598c-15.5 0-28-12.5-28-28s12.5-28 28-28h140V626c0-15.5 12.5-28 28-28s28 12.5 28 28v140h140c15.5 0 28 12.5 28 28s-12.5 28-28 28zM738 122c0-30.9-25.1-56-56-56H150c-30.9 0-56 25.1-56 56v756c0 30.9 25.1 56 56 56h364v56H122c-46.4 0-84-37.6-84-84V94c0-46.4 37.6-84 84-84h588c46.4 0 84 37.6 84 84v364h-56V122z"/>
+</svg>
+         <svg class="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+  <path d="M977.8 524.5H22.3c-6.8 0-12.3-5.5-12.3-12.3v-24.5c0-6.7 5.5-12.3 12.3-12.3h955.5c6.8 0 12.3 5.5 12.3 12.3v24.5c-.1 6.8-5.6 12.3-12.3 12.3zm-49.1-294H757.2c-6.8 0-12.3-5.5-12.3-12.2v-24.5c0-6.8 5.5-12.3 12.3-12.3h171.5c6.8 0 12.3 5.5 12.3 12.3v24.5c0 6.7-5.5 12.2-12.3 12.2zm-294 0H71.3c-6.8 0-12.3-5.5-12.3-12.2v-24.5c0-6.8 5.5-12.3 12.3-12.3h563.5c6.8 0 12.3 5.5 12.3 12.3v24.5c-.1 6.7-5.6 12.2-12.4 12.2zm-563.4 539h171.5c6.8 0 12.2 5.5 12.2 12.2v24.5c0 6.8-5.5 12.3-12.2 12.3H71.3c-6.8 0-12.3-5.5-12.3-12.3v-24.5c0-6.7 5.5-12.2 12.3-12.2zm293.9 0h563.5c6.8 0 12.3 5.5 12.3 12.2v24.5c0 6.8-5.5 12.3-12.3 12.3H365.2c-6.8 0-12.3-5.5-12.3-12.3v-24.5c.1-6.7 5.6-12.2 12.3-12.2z"/>
+</svg>
+          <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 -28 512 512">
+  <path fill="#EBC7E5" d="M471.383 44.578C444.879 15.832 408.512 0 368.973 0c-29.555 0-56.621 9.344-80.45 27.77C276.5 37.07 265.605 48.45 256 61.73c-9.602-13.277-20.5-24.66-32.527-33.96C199.648 9.344 172.582 0 143.027 0c-39.539 0-75.91 15.832-102.414 44.578C14.426 72.988 0 111.801 0 153.871c0 43.3 16.137 82.938 50.781 124.742 30.992 37.395 75.535 75.356 127.117 119.313 17.614 15.012 37.579 32.027 58.309 50.152A30.023 30.023 0 00256 455.516c7.285 0 14.316-2.641 19.785-7.43 20.73-18.129 40.707-35.152 58.328-50.172 51.575-43.95 96.117-81.906 127.11-119.305C495.867 236.81 512 197.172 512 153.867c0-42.066-14.426-80.879-40.617-109.289zm0 0" class="active-path" data-old_color="#000000" data-original="#000000"/>
+</svg>
+        </div>
+        </div>  
+      </div>
+    </div>
+  </div>
+  <div></div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/simple-music-app-ui-design/dist/script.js b/simple-music-app-ui-design/dist/script.js
new file mode 100644
index 0000000..3b78b4b
--- /dev/null
+++ b/simple-music-app-ui-design/dist/script.js
@@ -0,0 +1,12 @@
+console.clear();
+const buttons = Array.from(document.querySelectorAll("button"));
+
+buttons.forEach(btn => {
+	btn.addEventListener("click", () => {
+		btn.classList.toggle("active");
+	});
+});
+
+$('.btn').click( function() {
+    $(".bigPlay img").toggleClass("active");
+} );
\ No newline at end of file
diff --git a/simple-music-app-ui-design/dist/style.css b/simple-music-app-ui-design/dist/style.css
new file mode 100644
index 0000000..fc682f1
--- /dev/null
+++ b/simple-music-app-ui-design/dist/style.css
@@ -0,0 +1,897 @@
+:root {
+  --blue-bubble: #bbe6f3;
+  --small-b-bubble: #bae5f2;
+  --pink-bubble: #ebc7e5;
+  --font-color: #063064;
+}
+
+* {
+  box-sizing: border-box;
+}
+*:focus {
+  outline: none;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  background-color: #f4f4f4;
+}
+
+.container {
+  background-color: #f3fcfd;
+  width: 800px;
+  height: 600px;
+  margin: 60px auto;
+  position: relative;
+  overflow: hidden;
+  border-radius: 6px;
+  -webkit-box-shadow: 1px 2px 29px 2px #dcf4fa;
+  -moz-box-shadow: 1px 2px 29px 2px #dcf4fa;
+  box-shadow: 1px 2px 29px 2px #dcf4fa;
+}
+
+.bubble {
+  position: absolute;
+  border-radius: 50%;
+}
+
+.pink-bubble {
+  width: 460px;
+  height: 460px;
+  right: -160px;
+  top: -110px;
+  background-color: var(--pink-bubble);
+}
+
+.blue-bubble {
+  width: 520px;
+  height: 520px;
+  left: -30px;
+  top: 345px;
+  background-color: var(--blue-bubble);
+}
+
+.small-b-bubble {
+  width: 50px;
+  height: 50px;
+  right: 40px;
+  bottom: 85px;
+  background-color: var(--small-b-bubble);
+}
+
+.small-p-bubble {
+  width: 105px;
+  height: 105px;
+  left: -45px;
+  top: 140px;
+  background-color: var(--pink-bubble);
+}
+
+.app-ui {
+  background-color: #fff;
+  width: 235px;
+  height: 500px;
+  position: absolute;
+  left: 140px;
+  top: 35px;
+  border-radius: 30px;
+  box-shadow: 2px 14px 40px -20px rgba(0, 0, 0, 0.2);
+}
+
+.left-ui {
+  overflow: hidden;
+}
+
+.right-ui {
+  left: 435px;
+  top: 60px;
+  box-shadow: -6px 14px 40px -20px rgba(0, 0, 0, 0.2);
+  background-color: #bbe6f3;
+}
+
+.inside-right {
+  left: 0;
+  top: 70px;
+  height: 430px;
+}
+
+.header {
+  font-family: "Fjalla One", sans-serif;
+  color: var(--font-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 235px;
+  padding: 27px 27px 21px 27px;
+  font-size: 22px;
+}
+
+.menu-line {
+  border: 1px solid var(--font-color);
+  width: 25px;
+  border-radius: 50px;
+}
+.menu-line:before {
+  content: "";
+  position: absolute;
+  top: 45px;
+  left: 197px;
+  border: 0.05em solid;
+  width: 8px;
+  border-radius: 50px;
+}
+.menu-line:after {
+  content: "";
+  position: absolute;
+  top: 45px;
+  left: 190px;
+  border: 0.05em solid;
+  width: 3px;
+  border-radius: 50px;
+}
+
+.left-menu-bar {
+  position: relative;
+  font-family: "Roboto", sans-serif;
+  color: var(--font-color);
+  left: -5px;
+}
+
+.ur-playlist {
+  font-size: 11px;
+  font-weight: 500;
+  transform: rotate(270deg);
+  position: absolute;
+  left: 2px;
+  top: 40px;
+  cursor: pointer;
+}
+
+.playlist-icon {
+  width: 11px;
+  position: absolute;
+  left: 28px;
+  top: -6px;
+  cursor: pointer;
+}
+
+.like-recent {
+  position: absolute;
+  top: 110px;
+}
+
+.recent {
+  left: 18px;
+  top: 90px;
+}
+
+.recent-detail {
+  width: 4px;
+  height: 4px;
+  background-color: var(--font-color);
+  position: absolute;
+  top: 95px;
+  left: 15px;
+  border-radius: 50%;
+}
+
+.like {
+  left: 25px;
+  top: 140px;
+  color: #aeb8cc;
+}
+.like:hover {
+  color: var(--font-color);
+}
+
+.album-img {
+  position: relative;
+  background-image: url("https://images.unsplash.com/photo-1535392432937-a27c36ec07b5?ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80");
+  width: 130px;
+  height: 165px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 20px;
+  margin-left: 58px;
+  box-shadow: -10px 10px 30px -20px rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+}
+.album-img:hover {
+  transform: scale(1.02);
+}
+
+.relax {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  color: #fff;
+  font-family: "Roboto", sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.btn {
+  background-color: #ffffff;
+  position: absolute;
+  width: 27px;
+  height: 27px;
+  right: 10px;
+  bottom: 10px;
+  border-radius: 9px;
+  transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  box-shadow: 0px 1px 2px white, 0px 2px 1px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  border: none;
+}
+.btn:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 15px;
+  z-index: 2;
+}
+.btn:active {
+  box-shadow: 0 5px 50px rgba(0, 0, 0, 0.02);
+}
+.btn:active:after {
+  box-shadow: inset 0px 2px 3px white, inset 0px 2px 0px rgba(0, 0, 0, 0.1);
+}
+.btn.active.play-pause .icon.pause {
+  opacity: 1;
+  transform: translate(-50%, -50%);
+}
+.btn.active.play-pause .icon.play {
+  opacity: 0;
+}
+
+.play {
+  width: 13px;
+  position: absolute;
+  top: 7px;
+  left: 8px;
+}
+.play svg {
+  stroke-width: 5;
+}
+
+.pause {
+  width: 12px;
+  opacity: 0;
+  position: absolute;
+  left: 14px;
+  top: 15px;
+}
+
+.flowers-img {
+  background-image: url("https://images.unsplash.com/photo-1490823670292-6699d9edbb7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=933&q=80");
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 135px;
+  width: 120px;
+  position: absolute;
+  right: -88px;
+  top: 90px;
+  border-radius: 20px;
+  transform: rotate(180deg);
+  box-shadow: -10px 10px 30px -20px rgba(0, 0, 0, 0.5);
+}
+.flowers-img:hover {
+  cursor: pointer;
+  -webkit-transform: rotate(180deg) scale(1.03);
+}
+
+.music-list {
+  cursor: pointer;
+  margin-left: 50px;
+  margin-top: 20px;
+}
+
+.song {
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+}
+.song:hover {
+  transform: scale(1.02);
+  box-shadow: -8px 10px 3px -11px rgba(0, 0, 0, 0.4);
+}
+
+.song-img > img {
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+  margin-right: 10px;
+}
+
+.song-name {
+  font-family: "Roboto", sans-serif;
+  color: var(--font-color);
+  font-weight: 500;
+  font-size: 10px;
+}
+
+.song-detail {
+  display: flex;
+  flex-direction: column;
+}
+
+.artist {
+  font-family: "Roboto", sans-serif;
+  color: #d0d2e5;
+  font-weight: 400;
+  font-size: 9px;
+  margin-top: 4px;
+}
+
+.nav svg {
+  width: 17px;
+}
+
+.nav {
+  position: absolute;
+  bottom: 0;
+  color: #c5c7da;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 20px 20px 0 0;
+  height: 52px;
+}
+
+.nav-first {
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  height: 52px;
+}
+
+.player-bg {
+  position: absolute;
+  top: 394px;
+  left: 0;
+  background-color: #bae6f2;
+  height: 80px;
+  width: 100%;
+  border-radius: 25px 25px 0 0;
+}
+
+.player-info {
+  position: absolute;
+  top: 394px;
+  left: 0;
+}
+
+.player-cover img {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: center;
+  margin: 10px 0 10px 25px;
+  border: 2px solid #fff;
+  box-shadow: 0px 15px 30px -6px rgba(0, 0, 0, 0.5);
+}
+
+.pointer {
+  position: absolute;
+  top: 27px;
+  width: 9px;
+  height: 9px;
+  margin: -6px 0 0 37px;
+  background-color: #a5c8e3;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1.7px #fff;
+}
+
+.player-info .song-detail {
+  margin: -42px 0 0 65px;
+}
+
+.play-artist {
+  color: #6590ad;
+  margin-top: 5px;
+  font-size: 8px;
+}
+
+.player-info svg {
+  width: 12px;
+  position: absolute;
+  right: -50px;
+  top: 22px;
+}
+
+.player-bg .btn {
+  bottom: 40px;
+  width: 24px;
+  height: 23px;
+  right: 25px;
+}
+
+.small-play {
+  width: 10px;
+  top: 5px;
+  left: 8px;
+}
+
+.small-pause {
+  width: 10px;
+  left: 12px;
+  top: 13px;
+}
+
+@media only screen and (max-width: 768px) {
+  .container {
+    transform: scale(0.8);
+    right: 60px;
+    margin-top: -40px;
+  }
+}
+@media only screen and (max-width: 480px) {
+  .container {
+    transform: scale(0.6);
+    right: 200px;
+  }
+}
+.play-action {
+  display: flex;
+  margin-top: 40px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dot {
+  border-radius: 50%;
+  width: 3px;
+  height: 3px;
+  background-color: #043165;
+  margin-right: 5px;
+}
+
+.what-play {
+  font-family: "Roboto", sans-serif;
+  color: var(--font-color);
+  font-weight: 500;
+  font-size: 10px;
+}
+
+.double-dot {
+  display: flex;
+  margin-right: 15px;
+}
+
+.line {
+  width: 20px;
+  height: 2px;
+  margin-left: 20px;
+  border-radius: 10px;
+  background-color: #043165;
+}
+
+.other-line {
+  position: absolute;
+  width: 10px;
+  height: 2px;
+  top: 44px;
+  left: 19px;
+  border-radius: 5px;
+  background-color: #043165;
+  transform: rotate(-30deg);
+}
+
+.half-arrow {
+  margin-top: 2px;
+}
+
+.bigPlay img {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  border: 3px solid #fff;
+  position: relative;
+  left: 37px;
+  top: 30px;
+  object-fit: cover;
+  object-position: top right;
+}
+
+.bigPlay img.active {
+  animation: rotateImg 3s linear 0s infinite forwards;
+}
+
+@keyframes rotateImg {
+  0% {
+    transform: rotateZ(0);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+.bigPlay {
+  position: absolute;
+}
+.bigPlay .btn {
+  top: 90px;
+  left: 96px;
+  width: 44px;
+  height: 44px;
+  border-radius: 18px;
+}
+
+.icon.play.bigger-play {
+  width: 22px;
+  top: 11px;
+  left: 13px;
+}
+
+.icon.pause.bigger-pause {
+  width: 20px;
+  left: 22px;
+  top: 23px;
+}
+
+.right-detail {
+  margin: 50px 0;
+  text-align: center;
+}
+
+.right-song {
+  font-size: 20px;
+  font-family: "Fjalla One", sans-serif;
+}
+
+.right-artist {
+  font-size: 12px;
+  color: #aeb8cc;
+}
+
+.lines {
+  border-left: 2px solid var(--font-color);
+  margin-left: -55px;
+  height: 5px;
+}
+.lines.grey {
+  border-left: 2px solid #e8e9f4;
+}
+
+.line-wrapper {
+  margin-top: -20px;
+  margin-left: 62px;
+}
+
+.lines:nth-child(1) {
+  margin-left: -40px;
+  margin-top: 60px;
+}
+
+.lines:nth-child(2) {
+  margin-left: -35px;
+  margin-top: -12px;
+  height: 18px;
+}
+
+.lines:nth-child(3) {
+  margin-left: -30px;
+  margin-top: -26px;
+  height: 36px;
+}
+
+.lines:nth-child(4) {
+  margin-left: -25px;
+  margin-top: -40px;
+  height: 48px;
+}
+
+.lines:nth-child(5) {
+  margin-left: -20px;
+  margin-top: -43px;
+  height: 33px;
+}
+
+.lines:nth-child(6) {
+  margin-left: -15px;
+  margin-top: -30px;
+  height: 25px;
+}
+
+.lines:nth-child(7) {
+  margin-left: -10px;
+  margin-top: -32px;
+  height: 40px;
+}
+
+.lines:nth-child(8) {
+  margin-left: -5px;
+  margin-top: -40px;
+  height: 48px;
+}
+
+.lines:nth-child(9) {
+  margin-left: 0;
+  margin-top: -43px;
+  height: 33px;
+}
+
+.lines:nth-child(10) {
+  margin-left: 5px;
+  margin-top: -30px;
+  height: 25px;
+}
+
+.lines:nth-child(11) {
+  margin-left: 10px;
+  margin-top: -32px;
+  height: 40px;
+}
+
+.lines:nth-child(12) {
+  margin-left: 15px;
+  margin-top: -37px;
+  height: 33px;
+}
+
+.lines:nth-child(13) {
+  margin-left: 20px;
+  margin-top: -30px;
+  height: 25px;
+}
+
+.lines:nth-child(14) {
+  margin-left: 25px;
+  margin-top: -32px;
+  height: 40px;
+}
+
+.lines:nth-child(15) {
+  margin-left: 30px;
+  margin-top: -40px;
+  height: 48px;
+}
+
+.lines:nth-child(16) {
+  margin-left: 35px;
+  margin-top: -42px;
+  height: 35px;
+}
+
+.lines:nth-child(17) {
+  margin-left: 40px;
+  margin-top: -33px;
+  height: 25px;
+}
+
+.lines:nth-child(18) {
+  margin-left: 45px;
+  margin-top: -22px;
+  height: 20px;
+}
+
+.lines:nth-child(19) {
+  margin-left: 50px;
+  margin-top: -18px;
+  height: 16px;
+}
+
+.lines:nth-child(20) {
+  margin-left: 55px;
+  margin-top: -19px;
+  height: 21px;
+}
+
+.lines:nth-child(21) {
+  margin-left: 60px;
+  margin-top: -27px;
+  height: 32px;
+}
+
+.lines:nth-child(22) {
+  margin-left: 65px;
+  margin-top: -30px;
+  height: 34px;
+}
+
+.lines:nth-child(23) {
+  margin-left: 70px;
+  margin-top: -38px;
+  height: 48px;
+}
+
+.lines:nth-child(24) {
+  margin-left: 75px;
+  margin-top: -44px;
+  height: 33px;
+}
+
+.lines:nth-child(25) {
+  margin-left: 80px;
+  margin-top: -35px;
+  height: 40px;
+}
+
+.lines:nth-child(26) {
+  margin-left: 85px;
+  margin-top: -35px;
+  height: 34px;
+}
+
+.lines:nth-child(27) {
+  margin-left: 90px;
+  margin-top: -42px;
+  height: 48px;
+}
+
+.lines:nth-child(28) {
+  margin-left: 95px;
+  margin-top: -44px;
+  height: 33px;
+}
+
+.lines:nth-child(29) {
+  margin-left: 100px;
+  margin-top: -35px;
+  height: 40px;
+}
+
+.lines:nth-child(30) {
+  margin-left: 105px;
+  margin-top: -35px;
+  height: 40px;
+}
+
+.lines:nth-child(31) {
+  margin-left: 110px;
+  margin-top: -45px;
+  height: 40px;
+}
+
+.lines:nth-child(32) {
+  margin-left: 115px;
+  margin-top: -38px;
+  height: 48px;
+}
+
+.lines:nth-child(33) {
+  margin-left: 120px;
+  margin-top: -44px;
+  height: 33px;
+}
+
+.lines:nth-child(34) {
+  margin-left: 125px;
+  margin-top: -35px;
+  height: 40px;
+}
+
+.lines:nth-child(35) {
+  margin-left: 130px;
+  margin-top: -36px;
+  height: 30px;
+}
+
+.lines:nth-child(36) {
+  margin-left: 135px;
+  margin-top: -25px;
+  height: 22px;
+}
+
+.lines:nth-child(37) {
+  margin-left: 140px;
+  margin-top: -25px;
+  height: 30px;
+}
+
+.lines:nth-child(38) {
+  margin-left: 145px;
+  margin-top: -39px;
+  height: 48px;
+}
+
+.lines:nth-child(39) {
+  margin-left: 150px;
+  margin-top: -44px;
+  height: 33px;
+}
+
+.lines:nth-child(40) {
+  margin-left: 155px;
+  margin-top: -36px;
+  height: 41px;
+}
+
+.lines:nth-child(41) {
+  margin-left: 160px;
+  margin-top: -44px;
+  height: 47px;
+}
+
+.lines:nth-child(42) {
+  margin-left: 165px;
+  margin-top: -44px;
+  height: 40px;
+}
+
+.lines:nth-child(43) {
+  margin-left: 170px;
+  margin-top: -34px;
+  height: 30px;
+}
+
+.heart {
+  width: 18px;
+  cursor: pointer;
+}
+.heart :hover {
+  fill: #E52121;
+}
+.heart:hover {
+  transform: scale(1.2);
+}
+
+.addTo {
+  width: 16px;
+  cursor: pointer;
+}
+
+.menu {
+  width: 16px;
+  cursor: pointer;
+}
+
+.left-bar-wrapper {
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 35px;
+}
+
+.blue-heart:hover {
+  fill: #063064;
+  cursor: pointer;
+  transform: scale(1.2);
+}
+
+.second svg {
+  width: 11px;
+  transform: rotate(-45deg);
+  margin: 0 4px 0 4px;
+}
+
+.second {
+  margin: 20px 60px 0 90px;
+  display: flex;
+  align-items: center;
+  font-size: 9px;
+  font-weight: 500;
+  font-family: "Roboto", sans-serif;
+  color: #c9cade;
+}
+.second .listened {
+  color: var(--font-color);
+}
+
+.grey-detail {
+  background-color: #eff3f8;
+  width: 205px;
+  height: 90px;
+  border-radius: 50%;
+  margin-top: -100px;
+  margin-left: 13px;
+}
+
+.grey-detail-sec {
+  background-color: #dae3f0;
+  width: 176px;
+  height: 130px;
+  border-radius: 50%;
+  margin-top: -110px;
+  margin-left: 29px;
+}
\ No newline at end of file
diff --git a/simple-music-app-ui-design/license.txt b/simple-music-app-ui-design/license.txt
new file mode 100644
index 0000000..d337983
--- /dev/null
+++ b/simple-music-app-ui-design/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Aysenur Turk (https://codepen.io/TurkAysenur/pen/povVmwO)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/simple-music-app-ui-design/src/index.html b/simple-music-app-ui-design/src/index.html
new file mode 100644
index 0000000..93e74e9
--- /dev/null
+++ b/simple-music-app-ui-design/src/index.html
@@ -0,0 +1,359 @@
+<link
+  href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap"
+  rel="stylesheet"
+/>
+<div class="container">
+  <div class="bubble pink-bubble"></div>
+  <div class="bubble blue-bubble"></div>
+  <div class="bubble small-p-bubble"></div>
+  <div class="bubble small-b-bubble"></div>
+  <div class="wrapper">
+    <div class="app-ui left-ui">
+      <div class="header">
+        <div class="discover">Discover</div>
+        <div class="menu-line"></div>
+      </div>
+      <div class="left-menu-bar">
+        <div class="playlist">
+          <div class="playlist-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29">
+              <g
+                fill="#FFF"
+                fill-rule="evenodd"
+                stroke="#10335C"
+                stroke-width="3"
+              >
+                <rect width="21" height="21" x="7" y="7" rx="5" />
+                <rect width="21" height="21" x="1" y="1" rx="5" />
+              </g>
+            </svg>
+          </div>
+          <div class="ur-playlist">Your playlist</div>
+        </div>
+        <div class="like-recent">
+          <div class="ur-playlist recent">Recent</div>
+          <div class="recent-detail"></div>
+          <div class="ur-playlist like">Like</div>
+        </div>
+      </div>
+      <div class="album-img">
+        <div class="relax">Relax</div>
+        <button class="btn play-pause">
+          <div class="icon-container">
+            <div class="icon play">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 308.838 308.838"
+              >
+                <path
+                  fill="#063064"
+                  d="M269.394 139.638c-.4-.8-.8-1.2-1.2-1.6-.8-1.2-1.6-2-2.8-3.2-1.2-1.2-2.8-2.4-4-3.2l-91.6-63.2-92-63.6c-6-4.4-13.6-5.6-20.4-4.4s-13.2 5.2-17.2 11.2c-1.6 2.4-2.8 4.8-3.6 7.2-.8 2-1.2 4-1.2 6.4v256.4c0 7.6 3.2 14.4 8 19.2 4.4 4.8 11.2 8 18.8 8 3.2 0 6.4-.4 9.2-1.6 2.8-.8 5.2-2.4 7.6-4.4l90.8-62.8 91.2-63.2c.4-.4 1.2-.8 1.6-1.2 5.6-4.4 9.2-10.4 10.4-16.8 1.2-6.4 0-13.6-3.6-19.2zm-20 20.4l-92 63.6-90.4 62.4c-.4 0-.8.4-.8.4-.4.4-1.2.8-2 1.2-.8.4-1.2.4-2 .4-1.6 0-3.2-.8-4.4-1.6-1.2-1.2-1.6-2.8-1.6-4.4v-127.6h-.4v-126-1.6c0-.4 0-.8.4-1.2 0-.4.4-.8.4-1.2.4-.4.4-.4.4-.8.8-1.2 2.4-2 3.6-2 1.6-.4 2.8 0 4.4.8.4.4.8.4 1.2.8l91.2 63.2 91.6 63.2c.4.4.8.4.8.8.4.4.4.8.8.8.8 1.6 1.2 3.2 1.2 4.8-.4 1.6-1.2 3.2-2.4 4z"
+                  class="active-path"
+                  data-old_color="#000000"
+                  data-original="#000000"
+                />
+              </svg>
+            </div>
+          </div>
+          <div class="icon-container">
+            <div class="icon pause">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 493.528 493.528"
+              >
+                <path
+                  fill="#063064"
+                  d="M178.064 0L166.04.248c-14.876 0-27.236 12.112-27.236 26.992v439.664c0 14.876 13.396 26.624 28.272 26.624h.084l10.976-.072c14.892 0 26.22-11.92 26.22-26.808V26.996C204.352 12.116 193.028 0 178.064 0zM328.584 0l-12.092.248c-14.88 0-27.3 12.112-27.3 26.992v439.664c0 14.876 13.708 26.624 28.58 26.624h.084l10.816-.072c14.88 0 26.052-11.92 26.052-26.808V26.996C354.72 12.116 343.548 0 328.584 0z"
+                  class="active-path"
+                  data-old_color="#000000"
+                  data-original="#000000"
+                />
+              </svg>
+            </div>
+          </div>
+        </button>
+      </div>
+      <div class="flowers-img"></div>
+      <div class="music-list">
+        <div class="song">
+          <div class="song-img">
+            <img
+              src="https://images.unsplash.com/photo-1574281183650-14db8f28c259?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
+            />
+          </div>
+          <div class="song-detail">
+            <div class="song-name">Sunset</div>
+            <div class="artist">The xx</div>
+          </div>
+        </div>
+        <div class="song">
+          <div class="song-img">
+            <img
+              src="https://images.unsplash.com/photo-1496324839965-d6281225d8eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80"
+            />
+          </div>
+          <div class="song-detail">
+            <div class="song-name">The pursuit of happiness</div>
+            <div class="artist">Beyries</div>
+          </div>
+        </div>
+        <div class="song">
+          <div class="song-img">
+            <img
+              src="https://images.unsplash.com/photo-1506079619863-0bf287d459e8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
+            />
+          </div>
+          <div class="song-detail">
+            <div class="song-name">Run</div>
+            <div class="artist">Daughter</div>
+          </div>
+        </div>
+      </div>
+      <div class="player-bg">
+        <button class="btn play-pause">
+          <div class="icon-container">
+            <div class="icon play small-play">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 308.838 308.838"
+              >
+                <path
+                  fill="#063064"
+                  d="M269.394 139.638c-.4-.8-.8-1.2-1.2-1.6-.8-1.2-1.6-2-2.8-3.2-1.2-1.2-2.8-2.4-4-3.2l-91.6-63.2-92-63.6c-6-4.4-13.6-5.6-20.4-4.4s-13.2 5.2-17.2 11.2c-1.6 2.4-2.8 4.8-3.6 7.2-.8 2-1.2 4-1.2 6.4v256.4c0 7.6 3.2 14.4 8 19.2 4.4 4.8 11.2 8 18.8 8 3.2 0 6.4-.4 9.2-1.6 2.8-.8 5.2-2.4 7.6-4.4l90.8-62.8 91.2-63.2c.4-.4 1.2-.8 1.6-1.2 5.6-4.4 9.2-10.4 10.4-16.8 1.2-6.4 0-13.6-3.6-19.2zm-20 20.4l-92 63.6-90.4 62.4c-.4 0-.8.4-.8.4-.4.4-1.2.8-2 1.2-.8.4-1.2.4-2 .4-1.6 0-3.2-.8-4.4-1.6-1.2-1.2-1.6-2.8-1.6-4.4v-127.6h-.4v-126-1.6c0-.4 0-.8.4-1.2 0-.4.4-.8.4-1.2.4-.4.4-.4.4-.8.8-1.2 2.4-2 3.6-2 1.6-.4 2.8 0 4.4.8.4.4.8.4 1.2.8l91.2 63.2 91.6 63.2c.4.4.8.4.8.8.4.4.4.8.8.8.8 1.6 1.2 3.2 1.2 4.8-.4 1.6-1.2 3.2-2.4 4z"
+                  class="active-path"
+                  data-old_color="#000000"
+                  data-original="#000000"
+                />
+              </svg>
+            </div>
+          </div>
+          <div class="icon-container">
+            <div class="icon pause small-pause">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 493.528 493.528"
+              >
+                <path
+                  fill="#063064"
+                  d="M178.064 0L166.04.248c-14.876 0-27.236 12.112-27.236 26.992v439.664c0 14.876 13.396 26.624 28.272 26.624h.084l10.976-.072c14.892 0 26.22-11.92 26.22-26.808V26.996C204.352 12.116 193.028 0 178.064 0zM328.584 0l-12.092.248c-14.88 0-27.3 12.112-27.3 26.992v439.664c0 14.876 13.708 26.624 28.58 26.624h.084l10.816-.072c14.88 0 26.052-11.92 26.052-26.808V26.996C354.72 12.116 343.548 0 328.584 0z"
+                  class="active-path"
+                  data-old_color="#000000"
+                  data-original="#000000"
+                />
+              </svg>
+            </div>
+          </div>
+        </button>
+      </div>
+      <div class="player-info">
+        <div class="player-cover">
+          <img
+            src="https://images.unsplash.com/photo-1521133573892-e44906baee46?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
+          />
+          <div class="pointer"></div>
+        </div>
+        <div class="song-detail">
+          <div class="song-name">Tearing Me up</div>
+          <div class="artist play-artist">Bob Moses</div>
+        </div>
+        <svg
+          fill="none"
+          stroke="#063064"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          class="blue-heart"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
+          />
+        </svg>
+      </div>
+      <div class="nav">
+        <div class="nav-first">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            class="feather feather-home"
+            viewBox="0 0 24 24"
+          >
+            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+          </svg>
+          <svg
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            class="css-i6dzq1"
+            viewBox="0 0 24 24"
+          >
+            <circle cx="11" cy="11" r="8" />
+            <path d="M21 21l-4.35-4.35" />
+          </svg>
+          <svg
+            style="width: 15px; height: 15px;"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 29 29"
+          >
+            <g
+              fill="#FFF"
+              fill-rule="evenodd"
+              stroke="currentColor"
+              stroke-width="3"
+            >
+              <rect width="21" height="21" x="7" y="7" rx="5" />
+              <rect width="21" height="21" x="1" y="1" rx="5" />
+            </g>
+          </svg>
+          <svg
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            class="css-i6dzq1"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div class="app-ui right-ui">
+      <div class="play-action">
+        <div class="half-arrow">
+          <div class="line">
+            <div class="other-line"></div>
+          </div>
+        </div>
+        <div class="what-play">Now playing</div>
+        <div class="double-dot">
+          <div class="dot"></div>
+          <div class="dot"></div>
+        </div>
+      </div>
+      <div class="app-ui inside-right">
+        <div class="bigPlay">
+          <img src="https://images.unsplash.com/photo-1521133573892-e44906baee46?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" />
+          <div class="grey-detail"></div>
+          <div class="grey-detail-sec"></div>
+          <button class="btn play-pause">
+            <div class="icon-container">
+              <div class="icon play bigger-play">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 308.838 308.838"
+                >
+                  <path
+                    fill="#063064"
+                    d="M269.394 139.638c-.4-.8-.8-1.2-1.2-1.6-.8-1.2-1.6-2-2.8-3.2-1.2-1.2-2.8-2.4-4-3.2l-91.6-63.2-92-63.6c-6-4.4-13.6-5.6-20.4-4.4s-13.2 5.2-17.2 11.2c-1.6 2.4-2.8 4.8-3.6 7.2-.8 2-1.2 4-1.2 6.4v256.4c0 7.6 3.2 14.4 8 19.2 4.4 4.8 11.2 8 18.8 8 3.2 0 6.4-.4 9.2-1.6 2.8-.8 5.2-2.4 7.6-4.4l90.8-62.8 91.2-63.2c.4-.4 1.2-.8 1.6-1.2 5.6-4.4 9.2-10.4 10.4-16.8 1.2-6.4 0-13.6-3.6-19.2zm-20 20.4l-92 63.6-90.4 62.4c-.4 0-.8.4-.8.4-.4.4-1.2.8-2 1.2-.8.4-1.2.4-2 .4-1.6 0-3.2-.8-4.4-1.6-1.2-1.2-1.6-2.8-1.6-4.4v-127.6h-.4v-126-1.6c0-.4 0-.8.4-1.2 0-.4.4-.8.4-1.2.4-.4.4-.4.4-.8.8-1.2 2.4-2 3.6-2 1.6-.4 2.8 0 4.4.8.4.4.8.4 1.2.8l91.2 63.2 91.6 63.2c.4.4.8.4.8.8.4.4.4.8.8.8.8 1.6 1.2 3.2 1.2 4.8-.4 1.6-1.2 3.2-2.4 4z"
+                    class="active-path"
+                    data-old_color="#000000"
+                    data-original="#000000"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div class="icon-container">
+              <div class="icon pause bigger-pause">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 493.528 493.528"
+                >
+                  <path
+                    fill="#063064"
+                    d="M178.064 0L166.04.248c-14.876 0-27.236 12.112-27.236 26.992v439.664c0 14.876 13.396 26.624 28.272 26.624h.084l10.976-.072c14.892 0 26.22-11.92 26.22-26.808V26.996C204.352 12.116 193.028 0 178.064 0zM328.584 0l-12.092.248c-14.88 0-27.3 12.112-27.3 26.992v439.664c0 14.876 13.708 26.624 28.58 26.624h.084l10.816-.072c14.88 0 26.052-11.92 26.052-26.808V26.996C354.72 12.116 343.548 0 328.584 0z"
+                    class="active-path"
+                    data-old_color="#000000"
+                    data-original="#000000"
+                  />
+                </svg>
+              </div>
+            </div>
+          </button>
+          <div class="song-detail right-detail">
+          <div class="song-name right-song">Tearing Me Up</div>
+          <div class="artist play-artist right-artist">Bob Moses</div>
+       
+        </div>
+          <div class="line-wrapper">
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+        <div class="lines grey"></div>
+       </div>
+          <div class="second">
+            <div class="listened">0:39</div>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.88 477.88">
+  <path fill="#063064" d="M468.46 1.8a17.06 17.06 0 00-15.3 0L9.44 223.69a17.07 17.07 0 004.58 32.05l176.1 32.03 32.04 176.11a17.07 17.07 0 0032.05 4.58L476.07 24.7a17.07 17.07 0 00-7.61-22.9z" class="active-path" data-old_color="#000000" data-original="#000000"/>
+</svg>
+            <div class="listen">6:28</div>
+          </div>
+       <div class="left-bar-wrapper">
+         <svg class="addTo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+  <path fill="#063064" d="M934 822H794v140c0 15.5-12.5 28-28 28s-28-12.5-28-28V822H598c-15.5 0-28-12.5-28-28s12.5-28 28-28h140V626c0-15.5 12.5-28 28-28s28 12.5 28 28v140h140c15.5 0 28 12.5 28 28s-12.5 28-28 28zM738 122c0-30.9-25.1-56-56-56H150c-30.9 0-56 25.1-56 56v756c0 30.9 25.1 56 56 56h364v56H122c-46.4 0-84-37.6-84-84V94c0-46.4 37.6-84 84-84h588c46.4 0 84 37.6 84 84v364h-56V122z"/>
+</svg>
+         <svg class="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+  <path d="M977.8 524.5H22.3c-6.8 0-12.3-5.5-12.3-12.3v-24.5c0-6.7 5.5-12.3 12.3-12.3h955.5c6.8 0 12.3 5.5 12.3 12.3v24.5c-.1 6.8-5.6 12.3-12.3 12.3zm-49.1-294H757.2c-6.8 0-12.3-5.5-12.3-12.2v-24.5c0-6.8 5.5-12.3 12.3-12.3h171.5c6.8 0 12.3 5.5 12.3 12.3v24.5c0 6.7-5.5 12.2-12.3 12.2zm-294 0H71.3c-6.8 0-12.3-5.5-12.3-12.2v-24.5c0-6.8 5.5-12.3 12.3-12.3h563.5c6.8 0 12.3 5.5 12.3 12.3v24.5c-.1 6.7-5.6 12.2-12.4 12.2zm-563.4 539h171.5c6.8 0 12.2 5.5 12.2 12.2v24.5c0 6.8-5.5 12.3-12.2 12.3H71.3c-6.8 0-12.3-5.5-12.3-12.3v-24.5c0-6.7 5.5-12.2 12.3-12.2zm293.9 0h563.5c6.8 0 12.3 5.5 12.3 12.2v24.5c0 6.8-5.5 12.3-12.3 12.3H365.2c-6.8 0-12.3-5.5-12.3-12.3v-24.5c.1-6.7 5.6-12.2 12.3-12.2z"/>
+</svg>
+          <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 -28 512 512">
+  <path fill="#EBC7E5" d="M471.383 44.578C444.879 15.832 408.512 0 368.973 0c-29.555 0-56.621 9.344-80.45 27.77C276.5 37.07 265.605 48.45 256 61.73c-9.602-13.277-20.5-24.66-32.527-33.96C199.648 9.344 172.582 0 143.027 0c-39.539 0-75.91 15.832-102.414 44.578C14.426 72.988 0 111.801 0 153.871c0 43.3 16.137 82.938 50.781 124.742 30.992 37.395 75.535 75.356 127.117 119.313 17.614 15.012 37.579 32.027 58.309 50.152A30.023 30.023 0 00256 455.516c7.285 0 14.316-2.641 19.785-7.43 20.73-18.129 40.707-35.152 58.328-50.172 51.575-43.95 96.117-81.906 127.11-119.305C495.867 236.81 512 197.172 512 153.867c0-42.066-14.426-80.879-40.617-109.289zm0 0" class="active-path" data-old_color="#000000" data-original="#000000"/>
+</svg>
+        </div>
+        </div>  
+      </div>
+    </div>
+  </div>
+  <div></div>
+</div>
diff --git a/simple-music-app-ui-design/src/script.js b/simple-music-app-ui-design/src/script.js
new file mode 100644
index 0000000..fca62bc
--- /dev/null
+++ b/simple-music-app-ui-design/src/script.js
@@ -0,0 +1,12 @@
+console.clear();
+const buttons = Array.from(document.querySelectorAll("button"));
+
+buttons.forEach(btn => {
+	btn.addEventListener("click", () => {
+		btn.classList.toggle("active");
+	});
+});
+
+$('.btn').click( function() {
+    $(".bigPlay img").toggleClass("active");
+} );
diff --git a/simple-music-app-ui-design/src/style.scss b/simple-music-app-ui-design/src/style.scss
new file mode 100644
index 0000000..c4dbffd
--- /dev/null
+++ b/simple-music-app-ui-design/src/style.scss
@@ -0,0 +1,903 @@
+:root {
+  --blue-bubble: #bbe6f3;
+  --small-b-bubble: #bae5f2;
+  --pink-bubble: #ebc7e5;
+  --font-color: #063064;
+}
+
+* {
+  box-sizing: border-box;
+  &:focus {
+    outline: none;
+  }
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  background-color: #f4f4f4;
+}
+
+.container {
+  background-color: #f3fcfd;
+  width: 800px;
+  height: 600px;
+  margin: 60px auto;
+  position: relative;
+  overflow: hidden;
+  border-radius: 6px;
+  -webkit-box-shadow: 1px 2px 29px 2px rgba(220, 244, 250, 1);
+  -moz-box-shadow: 1px 2px 29px 2px rgba(220, 244, 250, 1);
+  box-shadow: 1px 2px 29px 2px rgba(220, 244, 250, 1);
+}
+
+.bubble {
+  position: absolute;
+  border-radius: 50%;
+}
+
+.pink-bubble {
+  width: 460px;
+  height: 460px;
+  right: -160px;
+  top: -110px;
+  background-color: var(--pink-bubble);
+}
+
+.blue-bubble {
+  width: 520px;
+  height: 520px;
+  left: -30px;
+  top: 345px;
+  background-color: var(--blue-bubble);
+}
+
+.small-b-bubble {
+  width: 50px;
+  height: 50px;
+  right: 40px;
+  bottom: 85px;
+  background-color: var(--small-b-bubble);
+}
+
+.small-p-bubble {
+  width: 105px;
+  height: 105px;
+  left: -45px;
+  top: 140px;
+  background-color: var(--pink-bubble);
+}
+
+.app-ui {
+  background-color: #fff;
+  width: 235px;
+  height: 500px;
+  position: absolute;
+  left: 140px;
+  top: 35px;
+  border-radius: 30px;
+  box-shadow: 2px 14px 40px -20px rgba(0, 0, 0, 0.2);
+}
+.left-ui {
+  overflow: hidden;
+}
+
+.right-ui {
+  left: 435px;
+  top: 60px;
+  box-shadow: -6px 14px 40px -20px rgba(0, 0, 0, 0.2);
+  background-color: #bbe6f3;
+}
+
+.inside-right {
+  left: 0;
+  top: 70px;
+  height: 430px;
+}
+
+.header {
+  font-family: "Fjalla One", sans-serif;
+  color: var(--font-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 235px;
+  padding: 27px 27px 21px 27px;
+  font-size: 22px;
+}
+
+.menu-line {
+  border: 1px solid var(--font-color);
+  width: 25px;
+  border-radius: 50px;
+  &:before {
+    content: "";
+    position: absolute;
+    top: 45px;
+    left: 197px;
+    border: 0.05em solid;
+    width: 8px;
+    border-radius: 50px;
+  }
+  &:after {
+    content: "";
+    position: absolute;
+    top: 45px;
+    left: 190px;
+    border: 0.05em solid;
+    width: 3px;
+    border-radius: 50px;
+  }
+}
+
+.left-menu-bar {
+  position: relative;
+  font-family: "Roboto", sans-serif;
+  color: var(--font-color);
+  left: -5px;
+}
+.ur-playlist {
+  font-size: 11px;
+  font-weight: 500;
+  transform: rotate(270deg);
+  position: absolute;
+  left: 2px;
+  top: 40px;
+  cursor: pointer;
+}
+
+.playlist-icon {
+  width: 11px;
+  position: absolute;
+  left: 28px;
+  top: -6px;
+  cursor: pointer;
+}
+
+.like-recent {
+  position: absolute;
+  top: 110px;
+}
+
+.recent {
+  left: 18px;
+  top: 90px;
+}
+
+.recent-detail {
+  width: 4px;
+  height: 4px;
+  background-color: var(--font-color);
+  position: absolute;
+  top: 95px;
+  left: 15px;
+  border-radius: 50%;
+}
+.like {
+  left: 25px;
+  top: 140px;
+  color: #aeb8cc;
+  &:hover {
+    color: var(--font-color);
+  }
+}
+
+.album-img {
+  position: relative;
+  background-image: url("https://images.unsplash.com/photo-1535392432937-a27c36ec07b5?ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80");
+  width: 130px;
+  height: 165px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 20px;
+  margin-left: 58px;
+  box-shadow: -10px 10px 30px -20px rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  &:hover {
+    transform: scale(1.02);
+}
+}
+
+.relax {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  color: #fff;
+  font-family: "Roboto", sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.btn {
+  background-color: #ffffff;
+  position: absolute;
+  width: 27px;
+  height: 27px;
+  right: 10px;
+  bottom: 10px;
+  border-radius: 9px;
+  transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  box-shadow: 0px 1px 2px rgba(255, 255, 255, 1),
+    0px 2px 1px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  border: none;
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 15px;
+    z-index: 2;
+  }
+  &:active {
+    box-shadow: 0 5px 50px rgba(0, 0, 0, 0.02);
+    &:after {
+      box-shadow: inset 0px 2px 3px rgb(255, 255, 255),
+        inset 0px 2px 0px rgba(0, 0, 0, 0.1);
+    }
+  }
+  &.active {
+    &.play-pause {
+      .icon {
+        &.pause {
+          opacity: 1;
+          transform: translate(-50%, -50%);
+        }
+        &.play {
+          opacity: 0;
+        }
+      }
+    }
+  }
+}
+
+.play {
+  width: 13px;
+  position: absolute;
+  top: 7px;
+  left: 8px;
+  svg {
+    stroke-width: 5;
+  }
+}
+
+.pause {
+  width: 12px;
+  opacity: 0;
+  position: absolute;
+  left: 14px;
+  top: 15px;
+}
+
+.flowers-img {
+  background-image: url("https://images.unsplash.com/photo-1490823670292-6699d9edbb7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=933&q=80");
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 135px;
+  width: 120px;
+  position: absolute;
+  right: -88px;
+  top: 90px;
+  border-radius: 20px;
+  transform: rotate(180deg);
+  box-shadow: -10px 10px 30px -20px rgba(0, 0, 0, 0.5);
+  &:hover {
+    cursor: pointer;
+    -webkit-transform: rotate(180deg) scale(1.03);
+}
+}
+
+.music-list {
+  cursor: pointer;
+  margin-left: 50px;
+  margin-top: 20px;
+}
+
+.song {
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+  &:hover {
+    transform: scale(1.02);
+    box-shadow: -8px 10px 3px -11px rgba(0, 0, 0, 0.4);
+   }
+}
+
+.song-img > img {
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+  margin-right: 10px;
+}
+
+.song-name {
+  font-family: "Roboto", sans-serif;
+  color: var(--font-color);
+  font-weight: 500;
+  font-size: 10px;
+}
+
+.song-detail {
+  display: flex;
+  flex-direction: column;
+}
+
+.artist {
+  font-family: "Roboto", sans-serif;
+  color: #d0d2e5;
+  font-weight: 400;
+  font-size: 9px;
+  margin-top: 4px;
+}
+
+.nav svg {
+  width: 17px;
+}
+
+.nav {
+  position: absolute;
+  bottom: 0;
+  color: #c5c7da;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 20px 20px 0 0;
+  height: 52px;
+}
+
+.nav-first {
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  height: 52px;
+}
+
+.player-bg {
+  position: absolute;
+  top: 394px;
+  left: 0;
+  background-color: #bae6f2;
+  height: 80px;
+  width: 100%;
+  border-radius: 25px 25px 0 0;
+}
+
+.player-info {
+  position: absolute;
+  top: 394px;
+  left: 0;
+}
+
+.player-cover img {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: center;
+  margin: 10px 0 10px 25px;
+  border: 2px solid #fff;
+  box-shadow: 0px 15px 30px -6px rgba(0, 0, 0, 0.5);
+}
+
+.pointer {
+  position: absolute;
+  top: 27px;
+  width: 9px;
+  height: 9px;
+  margin: -6px 0 0 37px;
+  background-color: #a5c8e3;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1.7px #fff;
+}
+
+.player-info .song-detail {
+  margin: -42px 0 0 65px;
+}
+
+.play-artist {
+  color: #6590ad;
+  margin-top: 5px;
+  font-size: 8px;
+}
+
+.player-info svg {
+  width: 12px;
+  position: absolute;
+  right: -50px;
+  top: 22px;
+}
+
+.player-bg .btn {
+  bottom: 40px;
+  width: 24px;
+  height: 23px;
+  right: 25px;
+}
+
+.small-play {
+  width: 10px;
+  top: 5px;
+  left: 8px;
+}
+
+.small-pause {
+  width: 10px;
+  left: 12px;
+  top: 13px;
+}
+
+@media only screen and (max-width: 768px) {
+  .container {
+    transform: scale(0.8);
+    right: 60px;
+    margin-top: -40px;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .container {
+    transform: scale(0.6);
+    right: 200px;
+  }
+}
+
+.play-action {
+  display: flex;
+  margin-top: 40px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dot {
+  border-radius: 50%;
+  width: 3px;
+  height: 3px;
+  background-color: #043165;
+  margin-right: 5px;
+}
+
+.what-play {
+  font-family: "Roboto", sans-serif;
+  color: var(--font-color);
+  font-weight: 500;
+  font-size: 10px;
+}
+
+.double-dot {
+  display: flex;
+  margin-right: 15px;
+}
+
+.line {
+  width: 20px;
+  height: 2px;
+  margin-left: 20px;
+  border-radius: 10px;
+  background-color: #043165;
+}
+
+.other-line {
+  position: absolute;
+  width: 10px;
+  height: 2px;
+  top: 44px;
+  left: 19px;
+  border-radius: 5px;
+  background-color: #043165;
+  transform: rotate(-30deg);
+}
+
+.half-arrow {
+  margin-top: 2px;
+}
+
+.bigPlay img {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  border: 3px solid #fff;
+  position: relative;
+  left: 37px;
+  top: 30px;
+  object-fit: cover;
+  object-position: top right;
+}
+
+.bigPlay img.active {
+  animation: rotateImg 3s linear 0s infinite forwards;
+}
+
+@keyframes rotateImg
+{
+    0%{ transform: rotateZ(0); }
+    100%{ transform: rotateZ(360deg); }
+}
+
+.bigPlay {
+  position: absolute;
+  & .btn {
+    top: 90px;
+    left: 96px;
+    width: 44px;
+    height: 44px;
+    border-radius: 18px;
+  }
+}
+
+.icon.play.bigger-play {
+  width: 22px;
+  top: 11px;
+  left: 13px;
+}
+
+.icon.pause.bigger-pause {
+  width: 20px;
+  left: 22px;
+  top: 23px;
+}
+
+.right-detail {
+  margin: 50px 0;
+  text-align: center;
+}
+
+.right-song {
+  font-size: 20px;
+  font-family: "Fjalla One", sans-serif;
+}
+
+.right-artist {
+  font-size: 12px;
+  color:#aeb8cc;
+}
+
+
+.lines {
+  border-left: 2px solid var(--font-color);
+  margin-left: -55px;
+  height: 5px;
+  &.grey {
+    border-left: 2px solid #e8e9f4;
+  }
+}
+
+.line-wrapper {
+  margin-top: -20px;
+  margin-left: 62px;
+}
+
+.lines:nth-child(1) {
+  margin-left: -40px;
+  margin-top: 60px;
+}
+
+.lines:nth-child(2) {
+  margin-left: -35px;
+  margin-top: -12px;
+  height: 18px;
+}
+
+.lines:nth-child(3) {
+  margin-left: -30px;
+  margin-top: -26px;
+  height: 36px;
+}
+
+.lines:nth-child(4) {
+  margin-left: -25px;
+  margin-top: -40px;
+  height: 48px;
+}
+
+.lines:nth-child(5) {
+  margin-left: -20px;
+  margin-top: -43px;
+  height: 33px;
+}
+
+.lines:nth-child(6) {
+  margin-left: -15px;
+  margin-top: -30px;
+  height: 25px;
+}
+
+.lines:nth-child(7) {
+  margin-left: -10px;
+  margin-top: -32px;
+  height: 40px;
+}
+
+.lines:nth-child(8) {
+  margin-left: -5px;
+  margin-top: -40px;
+  height: 48px;
+}
+
+.lines:nth-child(9) {
+  margin-left: 0;
+  margin-top: -43px;
+  height: 33px;
+}
+
+.lines:nth-child(10) {
+  margin-left: 5px;
+  margin-top: -30px;
+  height: 25px;
+}
+
+.lines:nth-child(11) {
+  margin-left: 10px;
+  margin-top: -32px;
+  height: 40px;
+}
+
+.lines:nth-child(12) {
+  margin-left: 15px;
+  margin-top: -37px;
+  height: 33px;
+}
+
+.lines:nth-child(13) {
+  margin-left: 20px;
+  margin-top: -30px;
+  height: 25px;
+}
+
+.lines:nth-child(14) {
+  margin-left: 25px;
+  margin-top: -32px;
+  height: 40px;
+}
+
+.lines:nth-child(15) {
+  margin-left: 30px;
+  margin-top: -40px;
+  height: 48px;
+}
+
+.lines:nth-child(16) {
+  margin-left: 35px;
+  margin-top: -42px;
+  height: 35px;
+}
+
+.lines:nth-child(17) {
+  margin-left: 40px;
+  margin-top: -33px;
+  height: 25px;
+}
+
+.lines:nth-child(18) {
+  margin-left: 45px;
+  margin-top: -22px;
+  height: 20px;
+}
+
+.lines:nth-child(19) {
+  margin-left: 50px;
+  margin-top: -18px;
+  height: 16px;
+}
+
+.lines:nth-child(20) {
+  margin-left: 55px;
+  margin-top: -19px;
+  height: 21px;
+}
+
+.lines:nth-child(21) {
+  margin-left: 60px;
+  margin-top: -27px;
+  height: 32px;
+}
+
+.lines:nth-child(22) {
+  margin-left: 65px;
+  margin-top: -30px;
+  height: 34px;
+}
+
+.lines:nth-child(23) {
+  margin-left: 70px;
+  margin-top: -38px;
+  height: 48px;
+}
+
+.lines:nth-child(24) {
+  margin-left: 75px;
+  margin-top: -44px;
+  height: 33px;
+}
+
+.lines:nth-child(25) {
+  margin-left: 80px;
+  margin-top: -35px;
+  height: 40px;
+}
+
+.lines:nth-child(26) {
+  margin-left: 85px;
+  margin-top: -35px;
+  height: 34px;
+}
+
+.lines:nth-child(27) {
+  margin-left: 90px;
+  margin-top: -42px;
+  height: 48px;
+}
+
+.lines:nth-child(28) {
+  margin-left: 95px;
+  margin-top: -44px;
+  height: 33px;
+}
+
+.lines:nth-child(29) {
+  margin-left: 100px;
+  margin-top: -35px;
+  height: 40px;
+}
+
+.lines:nth-child(30) {
+  margin-left: 105px;
+  margin-top: -35px;
+  height: 40px;
+}
+
+.lines:nth-child(31) {
+  margin-left: 110px;
+  margin-top: -45px;
+  height: 40px;
+}
+
+.lines:nth-child(32) {
+  margin-left: 115px;
+  margin-top: -38px;
+  height: 48px;
+}
+
+.lines:nth-child(33) {
+  margin-left: 120px;
+  margin-top: -44px;
+  height: 33px;
+}
+
+.lines:nth-child(34) {
+  margin-left: 125px;
+  margin-top: -35px;
+  height: 40px;
+}
+
+.lines:nth-child(35) {
+  margin-left: 130px;
+  margin-top: -36px;
+  height: 30px;
+}
+
+.lines:nth-child(36) {
+  margin-left: 135px;
+  margin-top: -25px;
+  height: 22px;
+}
+
+.lines:nth-child(37) {
+  margin-left: 140px;
+  margin-top: -25px;
+  height: 30px;
+}
+
+.lines:nth-child(38) {
+  margin-left: 145px;
+  margin-top: -39px;
+  height: 48px;
+}
+
+.lines:nth-child(39) {
+  margin-left: 150px;
+  margin-top: -44px;
+  height: 33px;
+}
+
+.lines:nth-child(40) {
+  margin-left: 155px;
+  margin-top: -36px;
+  height: 41px;
+}
+
+.lines:nth-child(41) {
+  margin-left: 160px;
+  margin-top: -44px;
+  height: 47px;
+}
+
+.lines:nth-child(42) {
+  margin-left: 165px;
+  margin-top: -44px;
+  height: 40px;
+}
+
+.lines:nth-child(43) {
+  margin-left: 170px;
+  margin-top: -34px;
+  height: 30px;
+}
+
+.heart {
+  width: 18px;
+  cursor: pointer;
+  :hover {
+   fill: #E52121; 
+  }
+  &:hover {
+    transform: scale(1.2); 
+  }
+}
+
+.addTo{
+  width: 16px;
+  cursor: pointer;
+}
+
+.menu {
+  width: 16px;
+  cursor: pointer;
+}
+
+.left-bar-wrapper {
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 35px;
+}
+
+.blue-heart:hover {
+  fill: #063064;
+  cursor: pointer;
+  transform: scale(1.2);
+}
+
+.second svg {
+ width: 11px;
+ transform: rotate(-45deg);
+ margin: 0 4px 0 4px;
+}
+
+.second {
+  margin: 20px 60px 0 90px;
+  display: flex;
+  align-items: center;
+  font-size: 9px;
+  font-weight: 500;
+  font-family: "Roboto", sans-serif;
+  color: #c9cade;
+  & .listened {
+    color: var(--font-color);
+  }
+}
+
+.grey-detail {
+  background-color: #eff3f8;
+  width: 205px;
+  height: 90px;
+  border-radius: 50%;
+  margin-top: -100px;
+  margin-left: 13px;
+}
+
+.grey-detail-sec {
+  background-color: #dae3f0;
+  width: 176px;
+  height: 130px;
+  border-radius: 50%;
+  margin-top: -110px;
+  margin-left: 29px;
+}
diff --git a/simplex-life-v8/README.markdown b/simplex-life-v8/README.markdown
new file mode 100644
index 0000000..89fdfc4
--- /dev/null
+++ b/simplex-life-v8/README.markdown
@@ -0,0 +1,4 @@
+# Simplex Life v8
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/pavlovsk/pen/oqqwZP](https://codepen.io/pavlovsk/pen/oqqwZP).
+
+ Play with frequency, wavelength, thickness and colors to get interesting results.
\ No newline at end of file
diff --git a/simplex-life-v8/dist/index.html b/simplex-life-v8/dist/index.html
new file mode 100644
index 0000000..8c421bd
--- /dev/null
+++ b/simplex-life-v8/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Simplex Life v8</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Vollkorn:900i'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdn.rawgit.com/josephg/noisejs/master/perlin.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/simplex-life-v8/dist/script.js b/simplex-life-v8/dist/script.js
new file mode 100644
index 0000000..2750160
--- /dev/null
+++ b/simplex-life-v8/dist/script.js
@@ -0,0 +1,78 @@
+function getRandomWave(x, y) {
+  return noise.simplex2(x, y);
+}
+
+function adjustCanvas(canvasElement) {
+  canvasElement.width = window.innerWidth;
+  canvasElement.height = window.innerHeight;
+  return canvasElement;
+}
+
+window.addEventListener('resize', _ => adjustCanvas(canvas));
+
+var canvas = adjustCanvas(document.createElement('canvas'));
+var ctx = canvas.getContext('2d');
+document.body.appendChild(canvas);
+canvas.addEventListener('click', reset);
+
+var noiseX, noiseY, difference, x, y, thickness, frequency, gap, wavelength, baseY;
+
+var colors = [
+'black',
+'hotpink',
+'crimson',
+'#fd5'];
+
+
+function randomFrom(arr) {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+reset();
+
+function reset() {
+  noiseX = noiseY = 0;
+  x = y = 0;
+  difference = .0125;
+  thickness = 5 + Math.round(Math.random() * 5);
+  frequency = 1;
+  gap = thickness + Math.round(Math.random() * 10);
+  wavelength = 100;
+  baseY = -wavelength;
+  noise.seed(Math.random());
+  draw(null, true);
+}
+
+function draw(ts, isFirst) {
+  if (baseY < window.innerHeight + wavelength) {
+    requestAnimationFrame(draw);
+  }
+
+  if (isFirst) {
+    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+  }
+
+  x = 0;
+  baseY += gap;
+  noiseX = 0;
+  noiseY += difference;
+
+  while (x < window.innerWidth) {
+    ctx.beginPath();
+    ctx.moveTo(x, y + baseY);
+
+    x += frequency;
+
+    y = getRandomWave(
+    noiseX += .004,
+    noiseY) *
+    wavelength;
+
+    ctx.lineTo(x, y + baseY);
+    ctx.lineWidth = thickness;
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = randomFrom(colors);
+    ctx.stroke();
+  }
+
+}
\ No newline at end of file
diff --git a/simplex-life-v8/dist/style.css b/simplex-life-v8/dist/style.css
new file mode 100644
index 0000000..ce19a56
--- /dev/null
+++ b/simplex-life-v8/dist/style.css
@@ -0,0 +1,21 @@
+body {
+  background: repeating-linear-gradient(white 0.5%, black 1%, black 1.5%);
+  -webkit-animation: move 1s infinite linear;
+          animation: move 1s infinite linear;
+}
+
+canvas {
+  cursor: pointer;
+}
+
+@-webkit-keyframes move {
+  to {
+    background-position: 0% 1vh;
+  }
+}
+
+@keyframes move {
+  to {
+    background-position: 0% 1vh;
+  }
+}
diff --git a/simplex-life-v8/license.txt b/simplex-life-v8/license.txt
new file mode 100644
index 0000000..e84cddc
--- /dev/null
+++ b/simplex-life-v8/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Mustafa Enes (https://codepen.io/pavlovsk/pen/oqqwZP)
+
+
+Fork of an original work by Mustafa Enes (https://codepen.io/pavlovsk/pen/eGpByg)
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/simplex-life-v8/src/index.html b/simplex-life-v8/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/simplex-life-v8/src/script.babel b/simplex-life-v8/src/script.babel
new file mode 100644
index 0000000..be8af74
--- /dev/null
+++ b/simplex-life-v8/src/script.babel
@@ -0,0 +1,78 @@
+function getRandomWave(x, y) {
+  return noise.simplex2(x, y)
+}
+
+function adjustCanvas(canvasElement) {
+  canvasElement.width = window.innerWidth
+  canvasElement.height = window.innerHeight
+  return canvasElement
+}
+
+window.addEventListener('resize', _ => adjustCanvas(canvas))
+
+var canvas = adjustCanvas(document.createElement('canvas'))
+var ctx = canvas.getContext('2d')
+document.body.appendChild(canvas)
+canvas.addEventListener('click', reset)
+
+var noiseX, noiseY, difference, x, y, thickness, frequency, gap, wavelength, baseY
+
+var colors = [
+  'black',
+  'hotpink',
+  'crimson',
+  '#fd5'
+]
+
+function randomFrom(arr) {
+  return arr[Math.floor(Math.random() * arr.length)]
+}
+
+reset()
+
+function reset() {
+  noiseX = noiseY = 0
+  x = y = 0
+  difference = .0125
+  thickness = 5 + Math.round(Math.random() * 5)
+  frequency = 1
+  gap = thickness + Math.round(Math.random() * 10)
+  wavelength = 100
+  baseY = -wavelength
+  noise.seed(Math.random())
+  draw(null, true)
+}
+
+function draw(ts, isFirst) {
+  if (baseY < window.innerHeight + wavelength) {
+    requestAnimationFrame(draw)
+  }
+
+  if (isFirst) {
+    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
+  }
+
+  x = 0
+  baseY += gap
+  noiseX = 0
+  noiseY += difference
+
+  while (x < window.innerWidth) {
+    ctx.beginPath()
+    ctx.moveTo(x, y + baseY)
+
+    x += frequency
+
+    y = getRandomWave(
+      noiseX += .004,
+      noiseY
+    ) * wavelength
+
+    ctx.lineTo(x, y + baseY)
+    ctx.lineWidth = thickness
+    ctx.lineCap = 'round'
+    ctx.strokeStyle = randomFrom(colors)
+    ctx.stroke()
+  }
+
+}
\ No newline at end of file
diff --git a/simplex-life-v8/src/style.scss b/simplex-life-v8/src/style.scss
new file mode 100644
index 0000000..3384085
--- /dev/null
+++ b/simplex-life-v8/src/style.scss
@@ -0,0 +1,18 @@
+body {
+  background: repeating-linear-gradient(
+    white .5%,
+    black 1%,
+    black 1.5%
+  );
+  animation: move 1s infinite linear;
+}
+
+canvas {
+  cursor: pointer;
+}
+
+@keyframes move {
+  to {
+    background-position: 0% 1vh;
+  }
+}
\ No newline at end of file
diff --git a/single-div-css-folded-origami-shop/LICENSE.txt b/single-div-css-folded-origami-shop/LICENSE.txt
new file mode 100644
index 0000000..3d99d03
--- /dev/null
+++ b/single-div-css-folded-origami-shop/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Lynn Fisher (https://codepen.io/lynnandtonic/pen/vYjwjQr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/single-div-css-folded-origami-shop/README.md b/single-div-css-folded-origami-shop/README.md
new file mode 100644
index 0000000..c0a61e1
--- /dev/null
+++ b/single-div-css-folded-origami-shop/README.md
@@ -0,0 +1,5 @@
+# Single div CSS folded origami shop
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/lynnandtonic/pen/vYjwjQr](https://codepen.io/lynnandtonic/pen/vYjwjQr).
+
+\#divtober Day 18: Pun 😎 [a.singlediv.com](https://a.singlediv.com)
\ No newline at end of file
diff --git a/single-div-css-folded-origami-shop/dist/index.html b/single-div-css-folded-origami-shop/dist/index.html
new file mode 100644
index 0000000..1b90a19
--- /dev/null
+++ b/single-div-css-folded-origami-shop/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Single div CSS folded origami shop</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="pun"></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/single-div-css-folded-origami-shop/dist/script.js b/single-div-css-folded-origami-shop/dist/script.js
new file mode 100644
index 0000000..88b81d7
--- /dev/null
+++ b/single-div-css-folded-origami-shop/dist/script.js
@@ -0,0 +1,2 @@
+// @lynnandtonic
+// a.singlediv.com
\ No newline at end of file
diff --git a/single-div-css-folded-origami-shop/dist/style.css b/single-div-css-folded-origami-shop/dist/style.css
new file mode 100644
index 0000000..1ecf20e
--- /dev/null
+++ b/single-div-css-folded-origami-shop/dist/style.css
@@ -0,0 +1,50 @@
+body {
+  min-height: 320px;
+  height: 100vh;
+  position: relative;
+  background-color: #191970;
+}
+div {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+}
+div::before,
+div::after {
+  display: block;
+  content: '';
+  position: absolute;
+}
+@media (max-width: 400px) {
+  div:not(.no-scale) {
+    transform: scale(0.8);
+  }
+}
+#pun {
+  width: 380px;
+  height: 380px;
+  margin-left: -190px;
+  margin-top: -190px;
+  background: linear-gradient(130deg, rgba(255,255,255,0) 49.5%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.6) 50.5%, rgba(255,255,255,0) 51%) 38% 41%/5em 6em, linear-gradient(-130deg, rgba(255,255,255,0) 49.5%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.6) 50.5%, rgba(255,255,255,0) 51%) 62% 41%/5em 6em;
+  background-repeat: no-repeat;
+}
+#pun::before {
+  width: 334px;
+  height: 98px;
+  left: 50%;
+  bottom: 20%;
+  margin-left: -167px;
+  background: linear-gradient(-45deg, rgba(255,255,255,0) 32.7%, white 33%) 42px 55.9px/14px 28px, linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0) 25%) 14px 69.9px /28px 14px, linear-gradient(45deg, rgba(255,255,255,0) 32.7%, white 33%) 14px 69.9px /28px 14px, linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0) 25%) 14px 14px/14px 56px, linear-gradient(138deg, rgba(255,255,255,0) 17.9%, white 18.2%) 14px 14px/14px 56px, linear-gradient(-138deg, rgba(255,255,255,0) 30.5%, white 30.8%) 41.9px 14px/14px 28px, linear-gradient(to right, #aaa, white 35%, white 65%, #aaa) 27.9px 14px/14px 14px, linear-gradient(45deg, rgba(255,255,255,0) 29.7%, white 30%) 70px 69.9px /32.199999999999996px 14px, linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0) 25%) 70px 14px/14px 56px, linear-gradient(white, white) 70px 14px/14px 56px, linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0) 25%) 125.9px 14px /28px 14px, linear-gradient(-138deg, rgba(255,255,255,0) 34.5%, white 34.8%) 125.9px 14px /28px 14px, linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0) 25%) 140px 27.9px/14px 56px, linear-gradient(-45deg, rgba(255,255,255,0) 20%, white 20.3%) 140px 27.9px/14px 56px, linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0) 25%) 112px 69.9px /28px 14px, linear-gradient(45deg, rgba(255,255,255,0) 32.7%, white 33%) 112px 69.9px /28px 14px, linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0) 25%) 112px 14px/14px 56px, linear-gradient(138deg, rgba(255,255,255,0) 17.9%, white 18.2%) 112px 14px/14px 56px, linear-gradient(135deg, rgba(255,255,255,0) 39%, white 39.3%) 168px 14px /21px 14px, linear-gradient(-135deg, rgba(255,255,255,0) 39%, white 39.3%) 188.9px 14px /21px 14px, linear-gradient(45deg, rgba(255,255,255,0) 24.7%, white 25%, white 75%, rgba(255,255,255,0) 75.3%) 168px 41.9px /42px 14px, linear-gradient(45deg, rgba(255,255,255,0) 39%, white 39.3%) 168px 69.9px /21px 14px, linear-gradient(-45deg, rgba(255,255,255,0) 39%, white 39.3%) 188.9px 69.9px /21px 14px, linear-gradient(to bottom, #aaa, white 35%, white 65%, #aaa) 168px 27.9px/14px 14px, linear-gradient(to bottom, #aaa, white 35%, white 65%, #aaa) 196px 55.9px/14px 14px, linear-gradient(138deg, rgba(255,255,255,0) 26%, white 26.3%) 224px 14px /42px 14px, linear-gradient(45deg, rgba(255,255,255,0) 25%, white 25.3%) 224px 69.9px /42px 14px, linear-gradient(to bottom, #aaa, white 20%, white 80%, #aaa) 224px 27.9px/14px 42px, linear-gradient(to right, #aaa, white 25%) 237.9px 42px/14px 14px, linear-gradient(to top, #aaa, white 20%) 280px 14px/14px 56px, linear-gradient(-45deg, rgba(255,255,255,0) 25%, white 25.3%) 280px 69.9px /42px 14px, linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0) 25%) 293.9px 14px /28px 14px, linear-gradient(-138deg, rgba(255,255,255,0) 34.5%, white 34.8%) 293.9px 14px /28px 14px, linear-gradient(to bottom, #aaa, white 20%, white 80%, #aaa) 308px 27.9px/14px 42px;
+  background-repeat: no-repeat;
+  background-color: #dc143c;
+  box-shadow: 0 0 0 0.2em white, 0 0.5em 1em 0 rgba(0,0,0,0.5);
+}
+#pun::after {
+  width: 6em;
+  height: 5em;
+  left: 38%;
+  top: 19%;
+  background: linear-gradient(135deg, rgba(128,0,0,0) 49%, rgba(128,0,0,0.4) 50%, rgba(128,0,0,0) 55%) 1.87em 1.94em/0.88em 0.88em, linear-gradient(45deg, rgba(255,165,0,0) 54.5%, #ffa500 55%) 0.78em 1.94em/2.1em 2.1em, linear-gradient(-85deg, rgba(128,0,0,0) 3%, rgba(128,0,0,0.5) 8.3%, rgba(128,0,0,0) 8.4%) 1.28em 0.36em/1.6em 1.6em, linear-gradient(-85deg, #ffa500 7.5%, rgba(255,165,0,0) 8.5%) 1.28em 0.36em/1.6em 1.6em, linear-gradient(-45deg, #ff6347 50.5%, rgba(255,99,71,0) 51%) 1.28em 0.35em/1.6em 1.6em, linear-gradient(85deg, rgba(128,0,0,0.7), rgba(128,0,0,0) 15%) 2.86em 0.35em/2.5em 3.45em, linear-gradient(-45deg, rgba(255,99,71,0) 54%, #ff6347 54.5%) 2.86em 0.35em/2.5em 2.5em, linear-gradient(120deg, rgba(128,0,0,0.5) 30%, rgba(128,0,0,0) 40%) 2.9em 2.05em/0.55em 1.75em, linear-gradient(148deg, rgba(128,0,0,0) 35%, rgba(128,0,0,0.5) 50%) 1em 0.95em/2em 1em, linear-gradient(45deg, rgba(255,99,71,0) 22%, #ff6347 22.1%, #ff6347 49.2%, rgba(255,99,71,0) 49.3%) 1em 0.3em/5em 3.5em, linear-gradient(24deg, #ff6347 53.5%, rgba(255,99,71,0) 54%) 1em 0/0.68em 0.35em, linear-gradient(-83deg, rgba(128,0,0,0.5) 5%, rgba(128,0,0,0) 15%) 0em 0/1em 1em, linear-gradient(130deg, rgba(255,165,0,0) 54%, #ffa500 54.5%) 0 0/1em 1em;
+  background-repeat: no-repeat;
+  transform: scale(1.2);
+}
\ No newline at end of file
diff --git a/single-div-css-folded-origami-shop/src/index.html b/single-div-css-folded-origami-shop/src/index.html
new file mode 100644
index 0000000..e6c3c4a
--- /dev/null
+++ b/single-div-css-folded-origami-shop/src/index.html
@@ -0,0 +1 @@
+<div id="pun"></div>
\ No newline at end of file
diff --git a/single-div-css-folded-origami-shop/src/script.js b/single-div-css-folded-origami-shop/src/script.js
new file mode 100644
index 0000000..6835c6e
--- /dev/null
+++ b/single-div-css-folded-origami-shop/src/script.js
@@ -0,0 +1,2 @@
+// @lynnandtonic
+// a.singlediv.com
diff --git a/single-div-css-folded-origami-shop/src/style.stylus b/single-div-css-folded-origami-shop/src/style.stylus
new file mode 100644
index 0000000..3d2dc07
--- /dev/null
+++ b/single-div-css-folded-origami-shop/src/style.stylus
@@ -0,0 +1,125 @@
+// #divtober 18: Pun
+// a.singlediv.com/divtober2022
+
+black(alpha)
+  rgba(0,0,0,alpha)
+
+white(alpha)
+  rgba(255,255,255,alpha)
+
+$pun-w = 14px  
+  
+body
+  min-height: 320px
+  height: 100vh
+  position: relative
+  background-color: midnightblue
+
+div
+  position: absolute
+  left: 50%
+  top: 50%
+
+  &::before,
+  &::after
+    display: block
+    content: ''
+    position: absolute
+    
+  @media (max-width: 400px)
+    &:not(.no-scale)
+      transform: scale(.8)
+
+#pun
+  width: 380px
+  height: @width
+  margin-left: -(@width/2)
+  margin-top: -(@height/2)
+  background: linear-gradient( 130deg, white(0) 49.5%,
+                                       white(.6) 50%,
+                                       white(.6) 50.5%,
+                                       white(0) 51%) 38% 41% / 5em 6em,
+              linear-gradient(-130deg, white(0) 49.5%,
+                                       white(.6) 50%,
+                                       white(.6) 50.5%,
+                                       white(0) 51%) 62% 41% / 5em 6em
+  background-repeat: no-repeat
+
+  &::before
+    width: 334px
+    height: 98px
+    left: 50%
+    bottom: 20%
+    margin-left: -(@width/2)
+    background: linear-gradient(-45deg, white(0) 32.7%, white 33%) $pun-w*3 ($pun-w*4 - .1em) / $pun-w $pun-w*2, // C
+                linear-gradient(to left, black(.2), black(0) 25%) $pun-w ($pun-w*5 - .1em) / $pun-w*2 $pun-w,
+                linear-gradient(45deg, white(0) 32.7%, white 33%) $pun-w ($pun-w*5 - .1em) / $pun-w*2 $pun-w,
+                linear-gradient(to top, black(.2), black(0) 25%) $pun-w $pun-w / $pun-w $pun-w*4,
+                linear-gradient( 138deg, white(0) 17.9%, white 18.2%) $pun-w $pun-w / $pun-w $pun-w*4,
+                linear-gradient(-138deg, white(0) 30.5%, white 30.8%) ($pun-w*3 - .1em) $pun-w / $pun-w $pun-w*2,
+                linear-gradient(to right, #aaa, white 35%,
+                                          white 65%, #aaa) ($pun-w*2 - .1em) $pun-w / $pun-w $pun-w,
+                linear-gradient(45deg, white(0) 29.7%, white 30%) $pun-w*5 ($pun-w*5 - .1em) / $pun-w*2.3 $pun-w, // L
+                linear-gradient(to top, black(.2), black(0) 25%) $pun-w*5 $pun-w / $pun-w $pun-w*4,
+                linear-gradient(white, white) $pun-w*5 $pun-w / $pun-w $pun-w*4,
+                linear-gradient(to right, black(.2), black(0) 25%) ($pun-w*9 - .1em) $pun-w / $pun-w*2 $pun-w, // O
+                linear-gradient(-138deg, white(0) 34.5%, white 34.8%) ($pun-w*9 - .1em) $pun-w / $pun-w*2 $pun-w,
+                linear-gradient(to bottom, black(.2), black(0) 25%) $pun-w*10 ($pun-w*2 - .1em) / $pun-w $pun-w*4,
+                linear-gradient(-45deg, white(0) 20%, white 20.3%) $pun-w*10 ($pun-w*2 - .1em) / $pun-w $pun-w*4,
+                linear-gradient(to left, black(.2), black(0) 25%) $pun-w*8 ($pun-w*5 - .1em) / $pun-w*2 $pun-w,
+                linear-gradient(45deg, white(0) 32.7%, white 33%) $pun-w*8 ($pun-w*5 - .1em) / $pun-w*2 $pun-w,
+                linear-gradient(to top, black(.2), black(0) 25%) $pun-w*8 $pun-w / $pun-w $pun-w*4,
+                linear-gradient( 138deg, white(0) 17.9%, white 18.2%) $pun-w*8 $pun-w / $pun-w $pun-w*4,
+                linear-gradient( 135deg, white(0) 39%, white 39.3%) $pun-w*12 $pun-w / $pun-w*1.5 $pun-w, // S
+                linear-gradient(-135deg, white(0) 39%, white 39.3%) ($pun-w*13.5 - .1em) $pun-w / $pun-w*1.5 $pun-w,
+                linear-gradient(45deg, white(0) 24.7%, white 25%,
+                                       white 75%, white(0) 75.3%) $pun-w*12 ($pun-w*3 - .1em) / $pun-w*3 $pun-w,
+                linear-gradient( 45deg, white(0) 39%, white 39.3%) $pun-w*12 ($pun-w*5 - .1em) / $pun-w*1.5 $pun-w,
+                linear-gradient(-45deg, white(0) 39%, white 39.3%) ($pun-w*13.5 - .1em) ($pun-w*5 - .1em) / $pun-w*1.5 $pun-w,
+                linear-gradient(to bottom, #aaa, white 35%,
+                                           white 65%, #aaa) $pun-w*12 ($pun-w*2- .1em) / $pun-w $pun-w,
+                linear-gradient(to bottom, #aaa, white 35%,
+                                           white 65%, #aaa) $pun-w*14 ($pun-w*4- .1em) / $pun-w $pun-w,
+                linear-gradient( 138deg, white(0) 26%, white 26.3%) $pun-w*16 $pun-w / $pun-w*3 $pun-w, // E
+                linear-gradient( 45deg, white(0) 25%, white 25.3%) $pun-w*16 ($pun-w*5 - .1em) / $pun-w*3 $pun-w,
+                linear-gradient(to bottom, #aaa, white 20%,
+                                           white 80%, #aaa) $pun-w*16 ($pun-w*2 - .1em) / $pun-w $pun-w*3,
+                linear-gradient(to right, #aaa, white 25%) ($pun-w*17 - .1em) $pun-w*3 / $pun-w $pun-w,
+                linear-gradient(to top, #aaa, white 20%) $pun-w*20 $pun-w / $pun-w $pun-w*4, // D
+                linear-gradient(-45deg, white(0) 25%, white 25.3%) $pun-w*20 ($pun-w*5 - .1em) / $pun-w*3 $pun-w,
+                linear-gradient(to right, black(.2), black(0) 25%) ($pun-w*21 - .1em) $pun-w / $pun-w*2 $pun-w,
+                linear-gradient(-138deg, white(0) 34.5%, white 34.8%) ($pun-w*21 - .1em) $pun-w / $pun-w*2 $pun-w,
+                linear-gradient(to bottom, #aaa, white 20%,
+                                           white 80%, #aaa) $pun-w*22 ($pun-w*2 - .1em) / $pun-w $pun-w*3
+    background-repeat: no-repeat
+    background-color: crimson
+    box-shadow: 0 0 0 .2em white,
+                0 .5em 1em 0 black(.5)
+
+  &::after
+    width: 6em
+    height: 5em
+    left: 38%
+    top: 19%
+    background: linear-gradient(135deg, alpha(maroon,0) 49%,
+                                        alpha(maroon,.4) 50%,
+                                        alpha(maroon,0) 55%)  1.87em 1.94em / .88em .88em,
+                linear-gradient( 45deg, alpha(orange,0) 54.5%, orange 55%) .78em 1.94em / 2.1em 2.1em,
+                linear-gradient(-85deg, alpha(maroon,0) 3%,
+                                        alpha(maroon,.5) 8.3%,
+                                        alpha(maroon,0) 8.4%) 1.28em .36em / 1.6em 1.6em,
+                linear-gradient(-85deg, orange 7.5%, alpha(orange,0) 8.5%) 1.28em .36em / 1.6em 1.6em,
+                linear-gradient(-45deg, tomato 50.5%, alpha(tomato,0) 51%) 1.28em .35em / 1.6em 1.6em,
+                linear-gradient( 85deg, alpha(maroon,.7), alpha(maroon,0) 15%) 2.86em .35em / 2.5em 3.45em,
+                linear-gradient(-45deg, alpha(tomato,0) 54%, tomato 54.5%) 2.86em .35em / 2.5em 2.5em,
+                linear-gradient(120deg, alpha(maroon,.5) 30%, alpha(maroon,0) 40%) 2.9em 2.05em / .55em 1.75em,
+                linear-gradient(148deg, alpha(maroon,0) 35%, alpha(maroon,.5) 50%) 1em .95em / 2em 1em,
+                linear-gradient( 45deg, alpha(tomato,0) 22%,
+                                        tomato 22.1%,
+                                        tomato 49.2%,
+                                        alpha(tomato,0) 49.3%) 1em .3em / 5em 3.5em,
+                linear-gradient( 24deg, tomato 53.5%, alpha(tomato,0) 54%) 1em 0 / .68em .35em,
+                linear-gradient(-83deg, alpha(maroon,.5) 5%, alpha(maroon,0) 15%) 0em 0 / 1em 1em,
+                linear-gradient(130deg, alpha(orange,0) 54%, orange 54.5%) 0 0 / 1em 1em
+    background-repeat: no-repeat
+    transform: scale(1.2)
\ No newline at end of file
diff --git a/single-div-flickering-neon-text/README.markdown b/single-div-flickering-neon-text/README.markdown
new file mode 100644
index 0000000..1bdc847
--- /dev/null
+++ b/single-div-flickering-neon-text/README.markdown
@@ -0,0 +1,5 @@
+# Single Div Flickering Neon Text
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/dym-sh/pen/oNGdWvO](https://codepen.io/dym-sh/pen/oNGdWvO).
+
+I wanted to recreate the flickering neon text look, except... #vibes and first time creating a single div animation 💜
diff --git a/single-div-flickering-neon-text/dist/index.html b/single-div-flickering-neon-text/dist/index.html
new file mode 100644
index 0000000..bc8e3df
--- /dev/null
+++ b/single-div-flickering-neon-text/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Single Div Flickering Neon Text</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/single-div-flickering-neon-text/dist/script.js b/single-div-flickering-neon-text/dist/script.js
new file mode 100644
index 0000000..97b786b
--- /dev/null
+++ b/single-div-flickering-neon-text/dist/script.js
@@ -0,0 +1 @@
+// Twitter @anniebombanie_
\ No newline at end of file
diff --git a/single-div-flickering-neon-text/dist/style.css b/single-div-flickering-neon-text/dist/style.css
new file mode 100644
index 0000000..760a1ba
--- /dev/null
+++ b/single-div-flickering-neon-text/dist/style.css
@@ -0,0 +1,57 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap");
+/* --- Universal Box Sizing with Inheritance --- */
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+/* --- Colours --- */
+/* --- Styles --- */
+body {
+  margin: 0;
+  min-height: 100vh;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  overflow: hidden;
+  position: relative;
+}
+
+div {
+  width: 100vw;
+  height: 100vh;
+  background: radial-gradient(circle at 19% 2%, #ffdcd8 0.08%, transparent 0.2%), radial-gradient(circle at 39% 5%, #ffdcd8 0.05%, transparent 0.2%), radial-gradient(circle at 15% 6%, #ffdcd8 0.08%, transparent 0.35%), radial-gradient(circle at 89% 22%, #ffdcd8 0.05%, transparent 0.2%), radial-gradient(circle at 19% 26%, #ffdcd8 0.1%, transparent 0.3%), radial-gradient(circle at 34% 24%, #ffdcd8 0.05%, transparent 0.2%), radial-gradient(circle at 79% 17%, #ffdcd8 0.1%, transparent 0.3%), radial-gradient(circle at 36% 10%, #ffdcd8 0.03%, transparent 0.4%), radial-gradient(circle at 48% 6%, #ffdcd8 0.1%, transparent 0.3%), radial-gradient(circle at 2% 9%, #ffdcd8 0.05%, transparent 0.2%), radial-gradient(circle at 10% 33%, #ffdcd8 0.03%, transparent 0.15%), radial-gradient(circle at 55% 14%, #ffdcd8 0.05%, transparent 0.2%), radial-gradient(circle at 30% 19%, #ffdcd8 0.1%, transparent 0.3%), radial-gradient(circle at 79% 5%, #ffdcd8 0.05%, transparent 0.2%), radial-gradient(circle at 64% 18%, #ffdcd8 0.02%, transparent 0.4%), radial-gradient(circle at 85% 32%, #ffdcd8 0.02%, transparent 0.25%), radial-gradient(circle at 19% 98%, #986962 0.08%, transparent 0.2%), radial-gradient(circle at 39% 95%, #986962 0.05%, transparent 0.2%), radial-gradient(circle at 15% 94%, #986962 0.08%, transparent 0.35%), radial-gradient(circle at 89% 78%, #986962 0.05%, transparent 0.2%), radial-gradient(circle at 19% 74%, #986962 0.1%, transparent 0.3%), radial-gradient(circle at 34% 76%, #986962 0.05%, transparent 0.2%), radial-gradient(circle at 79% 83%, #986962 0.1%, transparent 0.3%), radial-gradient(circle at 36% 90%, #986962 0.03%, transparent 0.4%), radial-gradient(circle at 48% 94%, #986962 0.1%, transparent 0.3%), radial-gradient(circle at 2% 91%, #986962 0.05%, transparent 0.2%), radial-gradient(circle at 10% 67%, #986962 0.03%, transparent 0.15%), radial-gradient(circle at 55% 86%, #986962 0.05%, transparent 0.2%), radial-gradient(circle at 30% 81%, #986962 0.1%, transparent 0.3%), radial-gradient(circle at 79% 95%, #986962 0.05%, transparent 0.2%), radial-gradient(circle at 64% 82%, #986962 0.02%, transparent 0.4%), radial-gradient(circle at 85% 68%, #986962 0.02%, transparent 0.25%), radial-gradient(transparent, rgba(251, 108, 89, 0.2), rgba(120, 132, 159, 0.2), rgba(41, 48, 77, 0.8)), linear-gradient(#65809d, #6e80a9, #fdd3ab, #ffa980, #fd695d 50%, #371038 50.1%, #363d79, #45225c, #1e0410);
+  filter: saturate(1.25);
+}
+div::before, div::after {
+  content: "#JUST_START";
+  height: 85%;
+  font-family: "Nunito", sans-serif;
+  font-size: 13vmin;
+  color: #f9ccca;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-shadow: 0 0 5px #eea9e3, 0 0 15px #eea9e3, 0 0 25px #eea9e3, 0 0 35px #eea9e3, 0 0 50px #d157a7, 0 0 75px #d157a7, 0 0 100px #d157a7, 0 0 150px #d157a7;
+  animation: flicker 1.5s infinite alternate;
+}
+div::after {
+  transform: rotateX(180deg) translateY(82%);
+  filter: blur(3px) opacity(50%);
+  content: "#SUCK_DICKS";
+}
+
+@keyframes flicker {
+  0%, 16%, 18%, 21%, 23%, 54%, 56%, 100% {
+    text-shadow: 0 0 5px #eea9e3, 0 0 15px #eea9e3, 0 0 25px #eea9e3, 0 0 35px #eea9e3, 0 0 50px #d157a7, 0 0 75px #d157a7, 0 0 100px #d157a7, 0 0 150px #d157a7;
+  }
+  17%, 22%, 55% {
+    text-shadow: 0 0 5px #eea9e3, 0 0 5px #eea9e3, 0 0 5px #eea9e3, 0 0 15px #eea9e3, 0 0 30px #d157a7, 0 0 45px #d157a7, 0 0 75px #d157a7, 0 0 125px #d157a7;
+  }
+}
\ No newline at end of file
diff --git a/single-div-flickering-neon-text/license.txt b/single-div-flickering-neon-text/license.txt
new file mode 100644
index 0000000..3b307d3
--- /dev/null
+++ b/single-div-flickering-neon-text/license.txt
@@ -0,0 +1,9 @@
+Copyright (c) 2022 by Dym Sohin 🦾🤡 (https://codepen.io/dym-sh/pen/oNGdWvO)
+Fork of an original work Single Div Flickering Neon Text (https://codepen.io/anniebombanie/pen/wvrrZep
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/single-div-flickering-neon-text/src/index.html b/single-div-flickering-neon-text/src/index.html
new file mode 100644
index 0000000..281c686
--- /dev/null
+++ b/single-div-flickering-neon-text/src/index.html
@@ -0,0 +1 @@
+<div></div>
\ No newline at end of file
diff --git a/single-div-flickering-neon-text/src/script.js b/single-div-flickering-neon-text/src/script.js
new file mode 100644
index 0000000..97b786b
--- /dev/null
+++ b/single-div-flickering-neon-text/src/script.js
@@ -0,0 +1 @@
+// Twitter @anniebombanie_
\ No newline at end of file
diff --git a/single-div-flickering-neon-text/src/style.scss b/single-div-flickering-neon-text/src/style.scss
new file mode 100644
index 0000000..6411dee
--- /dev/null
+++ b/single-div-flickering-neon-text/src/style.scss
@@ -0,0 +1,132 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
+
+/* --- Universal Box Sizing with Inheritance --- */
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+/* --- Colours --- */
+$w: #fff;
+$p: #eea9e3;
+$pd: #d157a7;
+$g: #ffdcd8;
+$gd: #986962;
+$t: transparent;
+
+/* --- Styles --- */
+body {
+  margin: 0;
+  min-height: 100vh;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  overflow: hidden;
+  position: relative;
+}
+
+div {
+  width: 100vw;
+  height: 100vh;
+  background:
+    // stars-sky
+    radial-gradient(circle at 19% 2%, $g 0.08%, $t 0.2%),
+    radial-gradient(circle at 39% 5%, $g 0.05%, $t 0.2%),
+    radial-gradient(circle at 15% 6%, $g 0.08%, $t 0.35%),
+    radial-gradient(circle at 89% 22%, $g 0.05%, $t 0.2%),
+    radial-gradient(circle at 19% 26%, $g 0.1%, $t 0.3%),
+    radial-gradient(circle at 34% 24%, $g 0.05%, $t 0.2%),
+    radial-gradient(circle at 79% 17%, $g 0.1%, $t 0.3%),
+    radial-gradient(circle at 36% 10%, $g 0.03%, $t 0.4%),
+    radial-gradient(circle at 48% 6%, $g 0.1%, $t 0.3%),
+    radial-gradient(circle at 2% 9%, $g 0.05%, $t 0.2%),
+    radial-gradient(circle at 10% 33%, $g 0.03%, $t 0.15%),
+    radial-gradient(circle at 55% 14%, $g 0.05%, $t 0.2%),
+    radial-gradient(circle at 30% 19%, $g 0.1%, $t 0.3%),
+    radial-gradient(circle at 79% 5%, $g 0.05%, $t 0.2%),
+    radial-gradient(circle at 64% 18%, $g 0.02%, $t 0.4%),
+    radial-gradient(circle at 85% 32%, $g 0.02%, $t 0.25%),
+    // stars-water
+    radial-gradient(circle at 19% 98%, $gd 0.08%, $t 0.2%),
+    radial-gradient(circle at 39% 95%, $gd 0.05%, $t 0.2%),
+    radial-gradient(circle at 15% 94%, $gd 0.08%, $t 0.35%),
+    radial-gradient(circle at 89% 78%, $gd 0.05%, $t 0.2%),
+    radial-gradient(circle at 19% 74%, $gd 0.1%, $t 0.3%),
+    radial-gradient(circle at 34% 76%, $gd 0.05%, $t 0.2%),
+    radial-gradient(circle at 79% 83%, $gd 0.1%, $t 0.3%),
+    radial-gradient(circle at 36% 90%, $gd 0.03%, $t 0.4%),
+    radial-gradient(circle at 48% 94%, $gd 0.1%, $t 0.3%),
+    radial-gradient(circle at 2% 91%, $gd 0.05%, $t 0.2%),
+    radial-gradient(circle at 10% 67%, $gd 0.03%, $t 0.15%),
+    radial-gradient(circle at 55% 86%, $gd 0.05%, $t 0.2%),
+    radial-gradient(circle at 30% 81%, $gd 0.1%, $t 0.3%),
+    radial-gradient(circle at 79% 95%, $gd 0.05%, $t 0.2%),
+    radial-gradient(circle at 64% 82%, $gd 0.02%, $t 0.4%),
+    radial-gradient(circle at 85% 68%, $gd 0.02%, $t 0.25%),
+    // colours
+    radial-gradient(
+        $t,
+        rgba(#fb6c59, 0.2),
+        rgba(#78849f, 0.2),
+        rgba(#29304d, 0.8)
+      ),
+    linear-gradient(
+      #65809d,
+      #6e80a9,
+      #fdd3ab,
+      #ffa980,
+      #fd695d 50%,
+      #371038 50.1%,
+      #363d79,
+      #45225c,
+      #1e0410
+    );
+  filter: saturate(1.25);
+
+  &::before,
+  &::after {
+    content: '#JUST_START';
+    height: 85%;
+    font-family: 'Nunito', sans-serif;
+    font-size: 13vmin;
+    color: #f9ccca;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-shadow: 0 0 5px $p, 0 0 15px $p, 0 0 25px $p, 0 0 35px $p, 0 0 50px $pd,
+      0 0 75px $pd, 0 0 100px $pd, 0 0 150px $pd;
+    animation: flicker 1.5s infinite alternate;
+  }
+
+  &::after {
+    transform: rotateX(180deg) translateY(82%);
+    filter: blur(3px) opacity(50%);
+    content: '#SUCK_DICKS';
+  }
+}
+
+@keyframes flicker {
+  0%,
+  16%,
+  18%,
+  21%,
+  23%,
+  54%,
+  56%,
+  100% {
+    text-shadow: 0 0 5px $p, 0 0 15px $p, 0 0 25px $p, 0 0 35px $p, 0 0 50px $pd,
+      0 0 75px $pd, 0 0 100px $pd, 0 0 150px $pd;
+  }
+
+  17%,
+  22%,
+  55% {
+    text-shadow: 0 0 5px $p, 0 0 5px $p, 0 0 5px $p, 0 0 15px $p, 0 0 30px $pd,
+      0 0 45px $pd, 0 0 75px $pd, 0 0 125px $pd;
+  }
+}
diff --git a/skateboard-video-platform/README.markdown b/skateboard-video-platform/README.markdown
new file mode 100644
index 0000000..cb053f4
--- /dev/null
+++ b/skateboard-video-platform/README.markdown
@@ -0,0 +1,6 @@
+# Skateboard Video Platform
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/TurkAysenur/pen/LYRKpWe](https://codepen.io/TurkAysenur/pen/LYRKpWe).
+
+Inspired by Dwinawan 
+https://dribbble.com/shots/14958858--Exploration-Skateboard-Video-Platform/attachments/6676841?mode=media
diff --git a/skateboard-video-platform/dist/index.html b/skateboard-video-platform/dist/index.html
new file mode 100644
index 0000000..d720ae2
--- /dev/null
+++ b/skateboard-video-platform/dist/index.html
@@ -0,0 +1,367 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Skateboard Video Platform</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://vjs.zencdn.net/5-unsafe/video-js.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+ <div class="sidebar">
+  <span class="logo">S</span>
+  <a class="logo-expand" href="#">skateboard</a>
+  <div class="side-wrapper">
+   <div class="side-title">MENU</div>
+   <div class="side-menu">
+    <a class="sidebar-link discover is-active" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path d="M9.135 20.773v-3.057c0-.78.637-1.414 1.423-1.414h2.875c.377 0 .74.15 1.006.414.267.265.417.625.417 1v3.057c-.002.325.126.637.356.867.23.23.544.36.87.36h1.962a3.46 3.46 0 002.443-1 3.41 3.41 0 001.013-2.422V9.867c0-.735-.328-1.431-.895-1.902l-6.671-5.29a3.097 3.097 0 00-3.949.072L3.467 7.965A2.474 2.474 0 002.5 9.867v8.702C2.5 20.464 4.047 22 5.956 22h1.916c.68 0 1.231-.544 1.236-1.218l.027-.009z" />
+     </svg>
+     Discover
+    </a>
+    <a class="sidebar-link trending" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M10.835 12.007l.002.354c.012 1.404.096 2.657.242 3.451 0 .015.16.802.261 1.064.16.38.447.701.809.905a2 2 0 00.91.219c.249-.012.66-.137.954-.242l.244-.094c1.617-.642 4.707-2.74 5.891-4.024l.087-.09.39-.42c.245-.322.375-.715.375-1.138 0-.379-.116-.758-.347-1.064-.07-.099-.18-.226-.28-.334l-.379-.397c-1.305-1.321-4.129-3.175-5.593-3.79 0-.013-.91-.393-1.343-.407h-.057c-.665 0-1.286.379-1.603.991-.087.168-.17.496-.233.784l-.114.544c-.13.874-.216 2.216-.216 3.688zm-6.332-1.525C3.673 10.482 3 11.162 3 12a1.51 1.51 0 001.503 1.518l3.7-.328c.65 0 1.179-.532 1.179-1.19 0-.658-.528-1.191-1.18-1.191l-3.699-.327z" />
+     </svg>
+     Trending
+    </a>
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path d="M11.23 7.29V3.283c0-.427.34-.782.77-.782.385 0 .711.298.763.677l.007.104v4.01h4.78c2.38 0 4.335 1.949 4.445 4.38l.005.215v5.04c0 2.447-1.887 4.456-4.232 4.569l-.208.005H6.44c-2.38 0-4.326-1.94-4.435-4.379L2 16.905v-5.03c0-2.447 1.878-4.466 4.222-4.58l.208-.004h4.8v6.402l-1.6-1.652a.755.755 0 00-1.09 0 .81.81 0 00-.22.568c0 .157.045.32.14.459l.08.099 2.91 3.015c.14.155.34.237.55.237a.735.735 0 00.465-.166l.075-.071 2.91-3.015c.3-.31.3-.816 0-1.126a.755.755 0 00-1.004-.077l-.086.077-1.59 1.652V7.291h-1.54z" />
+     </svg>
+     Streaming
+    </a>
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.1535 16.64L14.995 13.77C15.2822 13.47 15.2822 13 14.9851 12.71C14.698 12.42 14.2327 12.42 13.9455 12.71L12.3713 14.31V9.49C12.3713 9.07 12.0446 8.74 11.6386 8.74C11.2327 8.74 10.896 9.07 10.896 9.49V14.31L9.32178 12.71C9.03465 12.42 8.56931 12.42 8.28218 12.71C7.99505 13 7.99505 13.47 8.28218 13.77L11.1139 16.64C11.1832 16.71 11.2624 16.76 11.3515 16.8C11.4406 16.84 11.5396 16.86 11.6386 16.86C11.7376 16.86 11.8267 16.84 11.9158 16.8C12.005 16.76 12.0842 16.71 12.1535 16.64ZM19.3282 9.02561C19.5609 9.02292 19.8143 9.02 20.0446 9.02C20.302 9.02 20.5 9.22 20.5 9.47V17.51C20.5 19.99 18.5 22 16.0446 22H8.17327C5.58911 22 3.5 19.89 3.5 17.29V6.51C3.5 4.03 5.4901 2 7.96535 2H13.2525C13.5 2 13.7079 2.21 13.7079 2.46V5.68C13.7079 7.51 15.1931 9.01 17.0149 9.02C17.4333 9.02 17.8077 9.02318 18.1346 9.02595C18.3878 9.02809 18.6125 9.03 18.8069 9.03C18.9479 9.03 19.1306 9.02789 19.3282 9.02561ZM19.6045 7.5661C18.7916 7.5691 17.8322 7.5661 17.1421 7.5591C16.047 7.5591 15.145 6.6481 15.145 5.5421V2.9061C15.145 2.4751 15.6629 2.2611 15.9579 2.5721C16.7203 3.37199 17.8873 4.5978 18.8738 5.63395C19.2735 6.05379 19.6436 6.44249 19.945 6.7591C20.2342 7.0621 20.0223 7.5651 19.6045 7.5661Z" />
+     </svg>
+     Playlist
+    </a>
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M17.769 8.382H22C22 4.985 19.964 3 16.516 3H7.484C4.036 3 2 4.985 2 8.338v7.324C2 19.015 4.036 21 7.484 21h9.032C19.964 21 22 19.015 22 15.662v-.313h-4.231c-1.964 0-3.556-1.552-3.556-3.466 0-1.915 1.592-3.467 3.556-3.467v-.034zm0 1.49h3.484c.413 0 .747.326.747.728v2.531a.746.746 0 01-.747.728H17.85c-.994.013-1.864-.65-2.089-1.595a1.982 1.982 0 01.433-1.652 2.091 2.091 0 011.576-.74zm.151 2.661h.329a.755.755 0 00.764-.745.755.755 0 00-.764-.746h-.329a.766.766 0 00-.54.213.727.727 0 00-.224.524c0 .413.34.75.764.754zM6.738 8.382h5.644a.755.755 0 00.765-.746.755.755 0 00-.765-.745H6.738a.755.755 0 00-.765.737c0 .413.341.75.765.754z" />
+     </svg>
+     Bookmark
+    </a>
+   </div>
+  </div>
+  <div class="side-wrapper">
+   <div class="side-title">CATEGORY</div>
+   <div class="side-menu">
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M15.164 6.083l.948.011c3.405 0 5.888 2.428 5.888 5.78v4.307c0 3.353-2.483 5.78-5.888 5.78A193.5 193.5 0 0112.01 22c-1.374 0-2.758-.01-4.122-.038-3.405 0-5.888-2.428-5.888-5.78v-4.307c0-3.353 2.483-5.78 5.898-5.78 1.286-.02 2.6-.04 3.935-.04v-.163c0-.665-.56-1.204-1.226-1.204h-.972c-1.109 0-2.012-.886-2.012-1.965 0-.395.334-.723.736-.723.412 0 .736.328.736.723 0 .289.246.52.54.52h.972c1.481.01 2.688 1.194 2.698 2.64v.183c.619 0 1.238.008 1.859.017zm-4.312 8.663h-1.03v1.02a.735.735 0 01-.737.723.728.728 0 01-.736-.722v-1.021H7.31a.728.728 0 01-.736-.723c0-.395.334-.722.736-.722h1.04v-1.012c0-.395.324-.723.736-.723.403 0 .736.328.736.723v1.012h1.03c.403 0 .737.327.737.722a.728.728 0 01-.736.723zm4.17-1.629h.099a.728.728 0 00.736-.722.735.735 0 00-.736-.723h-.098a.722.722 0 100 1.445zm1.679 3.315h.098a.728.728 0 00.736-.723.735.735 0 00-.736-.723H16.7a.722.722 0 100 1.445z" />
+     </svg>
+     Live Stream
+    </a>
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M7.33 2h9.34c3.4 0 5.32 1.93 5.33 5.33v9.34c0 3.4-1.93 5.33-5.33 5.33H7.33C3.93 22 2 20.07 2 16.67V7.33C2 3.93 3.93 2 7.33 2zm4.72 15.86c.43 0 .79-.32.83-.75V6.92a.815.815 0 00-.38-.79.84.84 0 00-1.28.79v10.19c.05.43.41.75.83.75zm4.6 0c.42 0 .78-.32.83-.75v-3.28a.839.839 0 00-1.28-.79.806.806 0 00-.38.79v3.28c.04.43.4.75.83.75zm-8.43-.75a.827.827 0 01-.83.75c-.43 0-.79-.32-.83-.75V10.2a.84.84 0 01.39-.79c.27-.17.61-.17.88 0s.42.48.39.79v6.91z" />
+     </svg>
+     Tutorial
+    </a>
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M19.761 12.001c0 .814.668 1.475 1.489 1.475.414 0 .75.333.75.743v2.677C22 19.159 20.142 21 17.858 21H6.143C3.859 21 2 19.159 2 16.896v-2.677c0-.41.336-.743.75-.743.822 0 1.49-.662 1.49-1.475 0-.793-.641-1.39-1.49-1.39a.752.752 0 01-.53-.217.74.74 0 01-.22-.525l.002-2.764C2.002 4.842 3.86 3 6.144 3h11.712c2.284 0 4.143 1.842 4.143 4.105L22 9.782a.741.741 0 01-.219.526.753.753 0 01-.531.218c-.821 0-1.489.662-1.489 1.475zm-5.509.647l1.179-1.137a.73.73 0 00-.409-1.25l-1.629-.236-.729-1.462a.737.737 0 00-.662-.41H12a.74.74 0 00-.663.409l-.729 1.463-1.626.235a.735.735 0 00-.6.498.724.724 0 00.187.753l1.179 1.137-.278 1.608a.727.727 0 00.295.719.742.742 0 00.777.054L12 14.27l1.455.757a.733.733 0 00.78-.053.723.723 0 00.296-.718l-.279-1.608z" />
+     </svg>
+     Competation
+    </a>
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M16.158 8.233a4.207 4.207 0 01-4.209 4.234 4.207 4.207 0 01-4.21-4.234A4.206 4.206 0 0111.95 4a4.206 4.206 0 014.21 4.233zM11.95 20c-3.431 0-6.36-.544-6.36-2.72 0-2.177 2.91-2.74 6.36-2.74 3.431 0 6.361.544 6.361 2.72S15.399 20 11.949 20zm6.008-11.69a5.765 5.765 0 01-.984 3.24.158.158 0 00.107.245 3.4 3.4 0 00.483.046c1.643.044 3.118-1.02 3.525-2.621.604-2.379-1.168-4.514-3.425-4.514-.245 0-.48.026-.708.073-.031.007-.064.021-.082.05-.022.034-.006.08.016.11a5.807 5.807 0 011.068 3.37zm2.721 5.203c1.104.217 1.83.66 2.131 1.304a1.923 1.923 0 010 1.67c-.46.998-1.944 1.319-2.52 1.402-.12.018-.215-.086-.203-.206.295-2.767-2.048-4.08-2.654-4.381-.026-.014-.032-.034-.03-.047.003-.009.013-.023.033-.026 1.312-.024 2.722.156 3.243.284zM6.438 11.84c.164-.004.325-.019.483-.046a.158.158 0 00.106-.245 5.765 5.765 0 01-.984-3.24c0-1.25.39-2.416 1.068-3.372.022-.03.037-.075.016-.11-.017-.027-.051-.042-.082-.05a3.52 3.52 0 00-.71-.072c-2.255 0-4.027 2.135-3.423 4.514.407 1.6 1.882 2.664 3.525 2.621zm.159 1.414c.003.013-.003.033-.028.047-.607.302-2.95 1.614-2.656 4.38.013.121-.082.224-.201.207-.577-.083-2.06-.404-2.52-1.402a1.917 1.917 0 010-1.67c.3-.644 1.026-1.087 2.13-1.305.522-.127 1.93-.307 3.244-.283.02.003.03.017.03.026z" />
+     </svg>
+     Community
+    </a>
+   </div>
+  </div>
+ </div>
+ <div class="wrapper">
+  <div class="header">
+   <div class="search-bar">
+    <input type="text" placeholder="Search">
+   </div>
+   <div class="user-settings">
+    <img class="user-img" src="https://images.unsplash.com/photo-1587918842454-870dbd18261a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=943&q=80" alt="">
+    <div class="user-name">Thomas</div>
+    <svg viewBox="0 0 492 492" fill="currentColor">
+     <path d="M484.13 124.99l-16.11-16.23a26.72 26.72 0 00-19.04-7.86c-7.2 0-13.96 2.79-19.03 7.86L246.1 292.6 62.06 108.55c-5.07-5.06-11.82-7.85-19.03-7.85s-13.97 2.79-19.04 7.85L7.87 124.68a26.94 26.94 0 000 38.06l219.14 219.93c5.06 5.06 11.81 8.63 19.08 8.63h.09c7.2 0 13.96-3.57 19.02-8.63l218.93-219.33A27.18 27.18 0 00492 144.1c0-7.2-2.8-14.06-7.87-19.12z"></path>
+    </svg>
+    <div class="notify">
+     <div class="notification"></div>
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z" />
+     </svg>
+    </div>
+   </div>
+  </div>
+  <div class="main-container">
+   <div class="main-header anim" style="--delay: 0s">Discover</div>
+   <div class="main-blogs">
+    <div class="main-blog anim" style="--delay: .1s">
+     <div class="main-blog__title">How to do Basic Jumping and how to landing safely</div>
+     <div class="main-blog__author">
+      <div class="author-img__wrapper">
+       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+        <path d="M20 6L9 17l-5-5" />
+       </svg>
+       <img class="author-img" src="https://images.unsplash.com/photo-1560941001-d4b52ad00ecc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" />
+      </div>
+      <div class="author-detail">
+       <div class="author-name">Thomas Hope</div>
+       <div class="author-info">53K views <span class="seperate"></span>2 weeks ago</div>
+      </div>
+     </div>
+     <div class="main-blog__time">7 min</div>
+    </div>
+    <div class="main-blog anim" style="--delay: .2s">
+     <div class="main-blog__title">Skateboard Tips You need to know</div>
+     <div class="main-blog__author tips">
+      <div class="main-blog__time">7 min</div>
+      <div class="author-img__wrapper">
+       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+        <path d="M20 6L9 17l-5-5" />
+       </svg>
+       <img class="author-img" src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzl8fG1lbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
+      </div>
+      <div class="author-detail">
+       <div class="author-name">Tony Andrew</div>
+       <div class="author-info">53K views <span></span>2 weeks ago</div>
+      </div>
+     </div>
+    </div>
+   </div>
+   <div class="small-header anim" style="--delay: .3s">Most Watched</div>
+   <div class="videos">
+    <div class="video anim" style="--delay: .4s">
+     <div class="video-time">8 min</div>
+     <div class="video-wrapper">
+      <video muted="">
+       <source src="https://player.vimeo.com/external/436572488.sd.mp4?s=eae5fb490e214deb9ff532dd98d101efe94e7a8b&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
+      </video>
+      <div class="author-img__wrapper video-author">
+       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+        <path d="M20 6L9 17l-5-5" />
+       </svg>
+       <img class="author-img" src="https://images.pexels.com/photos/1680172/pexels-photo-1680172.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+      </div>
+     </div>
+     <div class="video-by">Andy William</div>
+     <div class="video-name">Basic how to ride your skateboard comfortly</div>
+     <div class="video-view">54K views<span class="seperate video-seperate"></span>1 week ago</div>
+    </div>
+    <div class="video anim" style="--delay: .5s">
+     <div class="video-time">5 min</div>
+     <div class="video-wrapper">
+      <video muted="">
+       <source src="https://player.vimeo.com/external/449972745.sd.mp4?s=9943177fe8a6147b7bc4598259401f06ec57878a&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
+      </video>
+      <div class="author-img__wrapper video-author">
+       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+        <path d="M20 6L9 17l-5-5" />
+       </svg>
+       <img class="author-img" src="https://images.pexels.com/photos/3370021/pexels-photo-3370021.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+      </div>
+     </div>
+     <div class="video-by offline">Gerard Bind</div>
+     <div class="video-name">Prepare for your first skateboard jump</div>
+     <div class="video-view">42K views<span class="seperate video-seperate"></span>1 week ago</div>
+    </div>
+    <div class="video anim" style="--delay: .6s">
+     <div class="video-time">7 min</div>
+     <div class="video-wrapper">
+      <video muted="">
+       <source src="https://player.vimeo.com/external/436553499.sd.mp4?s=0e44527f269278743db448761e35c5e39cfaa52c&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
+      </video>
+      <div class="author-img__wrapper video-author">
+       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+        <path d="M20 6L9 17l-5-5" />
+       </svg>
+       <img class="author-img" src="https://images.pexels.com/photos/1870163/pexels-photo-1870163.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+      </div>
+     </div>
+     <div class="video-by offline">John Wise</div>
+     <div class="video-name">Basic equipment to play skateboard safely</div>
+     <div class="video-view">64K views<span class="seperate video-seperate"></span>2 week ago</div>
+    </div>
+    <div class="video anim" style="--delay: .7s">
+     <div class="video-time">6 min</div>
+     <div class="video-wrapper">
+      <video muted="">
+       <source src="https://player.vimeo.com/external/361861493.sd.mp4?s=19d8275ca755d653042a87ef28b2f0b2eabf57d0&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
+      </video>
+      <div class="author-img__wrapper video-author">
+       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+        <path d="M20 6L9 17l-5-5" />
+       </svg>
+       <img class="author-img" src="https://images.pexels.com/photos/2889942/pexels-photo-2889942.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+      </div>
+     </div>
+     <div class="video-by">Budi Hakim</div>
+     <div class="video-name">Tips to playing skateboard on the ramp</div>
+     <div class="video-view">50K views<span class="seperate video-seperate"></span>1 week ago</div>
+    </div>
+   </div>
+   <div class="stream-area">
+    <div class="video-stream">
+     <video id="my_video_1" class="video-js vjs-default-skin anim" width="640px" height="267px" controls preload="none" poster='https://images.unsplash.com/photo-1476801071117-fbc157ae3f01?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDh8fHxlbnwwfHx8&w=1000&q=80' data-setup='{ "aspectRatio":"940:620", "playbackRates": [1, 1.5, 2] }'>
+      <source src="https://player.vimeo.com/external/390402719.sd.mp4?s=20cfdb066c4253047562b65bd4e411b86a004bc5&profile_id=139&oauth2_token_id=57447761" type='video/mp4' />
+      <source src="https://player.vimeo.com/external/390402719.sd.mp4?s=20cfdb066c4253047562b65bd4e411b86a004bc5&profile_id=139&oauth2_token_id=57447761" type='video/webm' />
+     </video>
+     <div class="video-detail">
+      <div class="video-content">
+       <div class="video-p-wrapper anim" style="--delay: .1s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.pexels.com/photos/1680172/pexels-photo-1680172.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+        </div>
+        <div class="video-p-detail">
+         <div class="video-p-name">Andy William</div>
+         <div class="video-p-sub">1,980,893 subscribers</div>
+        </div>
+        <div class="button-wrapper">
+         <button class="like">
+          <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+           <path d="M21.435 2.582a1.933 1.933 0 00-1.93-.503L3.408 6.759a1.92 1.92 0 00-1.384 1.522c-.142.75.355 1.704 1.003 2.102l5.033 3.094a1.304 1.304 0 001.61-.194l5.763-5.799a.734.734 0 011.06 0c.29.292.29.765 0 1.067l-5.773 5.8c-.428.43-.508 1.1-.193 1.62l3.075 5.083c.36.604.98.946 1.66.946.08 0 .17 0 .251-.01.78-.1 1.4-.634 1.63-1.39l4.773-16.075c.21-.685.02-1.43-.48-1.943z" />
+          </svg>
+          Share
+         </button>
+         <button class="like red">
+          <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+           <path fill-rule="evenodd" clip-rule="evenodd" d="M15.85 2.5c.63 0 1.26.09 1.86.29 3.69 1.2 5.02 5.25 3.91 8.79a12.728 12.728 0 01-3.01 4.81 38.456 38.456 0 01-6.33 4.96l-.25.15-.26-.16a38.093 38.093 0 01-6.37-4.96 12.933 12.933 0 01-3.01-4.8c-1.13-3.54.2-7.59 3.93-8.81.29-.1.59-.17.89-.21h.12c.28-.04.56-.06.84-.06h.11c.63.02 1.24.13 1.83.33h.06c.04.02.07.04.09.06.22.07.43.15.63.26l.38.17c.092.05.195.125.284.19.056.04.107.077.146.1l.05.03c.085.05.175.102.25.16a6.263 6.263 0 013.85-1.3zm2.66 7.2c.41-.01.76-.34.79-.76v-.12a3.3 3.3 0 00-2.11-3.16.8.8 0 00-1.01.5c-.14.42.08.88.5 1.03.64.24 1.07.87 1.07 1.57v.03a.86.86 0 00.19.62c.14.17.35.27.57.29z" />
+          </svg>
+          Liked
+         </button>
+        </div>
+       </div>
+       <div class="video-p-title anim" style="--delay: .2s">Basic how to ride your Skateboard</div>
+       <div class="video-p-subtitle anim" style="--delay: .3s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus illum tempora consequuntur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis earum velit accusantium maiores qui sit quas, laborum voluptatibus vero quidem tempore facilis voluptate tempora deserunt! </div>
+       <div class="video-p-subtitle anim" style="--delay: .4s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus laborum qui dolorum fugiat eius accusantium repellendus illum tempora consequuntur. Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
+      </div>
+     </div>
+    </div>
+    <div class="chat-stream">
+     <div class="chat">
+      <div class="chat-header anim">Live Chat<span><svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+         <path fill-rule="evenodd" clip-rule="evenodd" d="M14.212 7.762c0 2.644-2.163 4.763-4.863 4.763-2.698 0-4.863-2.119-4.863-4.763C4.486 5.12 6.651 3 9.35 3c2.7 0 4.863 2.119 4.863 4.762zM2 17.917c0-2.447 3.386-3.06 7.35-3.06 3.985 0 7.349.634 7.349 3.083 0 2.448-3.386 3.06-7.35 3.06C5.364 21 2 20.367 2 17.917zM16.173 7.85a6.368 6.368 0 01-1.137 3.646c-.075.107-.008.252.123.275.182.03.369.048.56.052 1.898.048 3.601-1.148 4.072-2.95.697-2.675-1.35-5.077-3.957-5.077a4.16 4.16 0 00-.818.082c-.036.008-.075.025-.095.055-.025.04-.007.09.019.124a6.414 6.414 0 011.233 3.793zm3.144 5.853c1.276.245 2.115.742 2.462 1.467a2.107 2.107 0 010 1.878c-.531 1.123-2.245 1.485-2.912 1.578a.207.207 0 01-.234-.232c.34-3.113-2.367-4.588-3.067-4.927-.03-.017-.036-.04-.034-.055.002-.01.015-.025.038-.028 1.515-.028 3.145.176 3.747.32z" />
+        </svg>
+        15,988 people
+       </span>
+      </div>
+      <div class="message-container">
+       <div class="message anim" style="--delay: .1s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.unsplash.com/photo-1560941001-d4b52ad00ecc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" />
+        </div>
+        <div class="msg-wrapper">
+         <div class="msg__name video-p-name"> Wijaya Adabi</div>
+         <div class="msg__content video-p-sub"> Lorem ipsum clor sit, ame conse quae debitis</div>
+        </div>
+       </div>
+       <div class="message anim" style="--delay: .2s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.pexels.com/photos/2889942/pexels-photo-2889942.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+        </div>
+        <div class="msg-wrapper">
+         <div class="msg__name video-p-name offline"> Johny Wise</div>
+         <div class="msg__content video-p-sub"> Suscipit eos atque voluptates labore</div>
+        </div>
+       </div>
+       <div class="message anim" style="--delay: .3s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzl8fG1lbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
+        </div>
+        <div class="msg-wrapper">
+         <div class="msg__name video-p-name offline"> Budi Hakim</div>
+         <div class="msg__content video-p-sub">Dicta quidem sunt adipisci</div>
+        </div>
+       </div>
+       <div class="message anim" style="--delay: .4s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.pexels.com/photos/1870163/pexels-photo-1870163.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+        </div>
+        <div class="msg-wrapper">
+         <div class="msg__name video-p-name"> Thomas Hope</div>
+         <div class="msg__content video-p-sub"> recusandae doloremque aperiam alias molestias</div>
+        </div>
+       </div>
+       <div class="message anim" style="--delay: .5s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.pexels.com/photos/1680172/pexels-photo-1680172.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+        </div>
+        <div class="msg-wrapper">
+         <div class="msg__name video-p-name"> Gerard Will</div>
+         <div class="msg__content video-p-sub">Dicta quidem sunt adipisci</div>
+        </div>
+       </div>
+       <div class="message anim" style="--delay: .6s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.pexels.com/photos/2889942/pexels-photo-2889942.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+        </div>
+        <div class="msg-wrapper">
+         <div class="msg__name video-p-name offline">Johny Wise</div>
+         <div class="msg__content video-p-sub"> recusandae doloremque aperiam alias molestias</div>
+        </div>
+       </div>
+      </div>
+      <div class="chat-footer anim" style="--delay: .1s">
+       <input type="text" placeholder="Write your message">
+      </div>
+     </div>
+     <div class="chat-vid__container">
+      <div class="chat-vid__title anim" style="--delay: .3s">Related Videos</div>
+      <div class="chat-vid anim" style="--delay: .4s">
+       <div class="chat-vid__wrapper">
+        <img class="chat-vid__img" src="https://cdn.nohat.cc/thumb/f/720/3b55eddcfffa4e87897d.jpg" />
+        <div class="chat-vid__content">
+         <div class="chat-vid__name">Prepare for your first skateboard jump</div>
+         <div class="chat-vid__by">Jordan Wise</div>
+         <div class="chat-vid__info">125.908 views <span class="seperate"></span>2 days ago</div>
+        </div>
+       </div>
+      </div>
+      <div class="chat-vid anim" style="--delay: .5s">
+       <div class="chat-vid__wrapper">
+        <img class="chat-vid__img" src="https://iamaround.it/wp-content/uploads/2015/02/pexels-photo-4663818.jpeg" />
+        <div class="chat-vid__content">
+         <div class="chat-vid__name">Prepare for your first skateboard jump</div>
+         <div class="chat-vid__by">Jordan Wise</div>
+         <div class="chat-vid__info">125.908 views <span class="seperate"></span>2 days ago</div>
+        </div>
+       </div>
+      </div>
+      <div class="chat-vid__button anim" style="--delay: .6s">See All related videos (32)</div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script src='https://vjs.zencdn.net/5-unsafe/video.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/skateboard-video-platform/dist/script.js b/skateboard-video-platform/dist/script.js
new file mode 100644
index 0000000..0dd2a44
--- /dev/null
+++ b/skateboard-video-platform/dist/script.js
@@ -0,0 +1,55 @@
+$(function () {
+ $(".sidebar-link").click(function () {
+  $(".sidebar-link").removeClass("is-active");
+  $(this).addClass("is-active");
+ });
+});
+
+$(window)
+ .resize(function () {
+  if ($(window).width() > 1090) {
+   $(".sidebar").removeClass("collapse");
+  } else {
+   $(".sidebar").addClass("collapse");
+  }
+ })
+ .resize();
+
+const allVideos = document.querySelectorAll(".video");
+
+allVideos.forEach((v) => {
+ v.addEventListener("mouseover", () => {
+  const video = v.querySelector("video");
+  video.play();
+ });
+ v.addEventListener("mouseleave", () => {
+  const video = v.querySelector("video");
+  video.pause();
+ });
+});
+
+$(function () {
+ $(".logo, .logo-expand, .discover").on("click", function (e) {
+  $(".main-container").removeClass("show");
+  $(".main-container").scrollTop(0);
+ });
+ $(".trending, .video").on("click", function (e) {
+  $(".main-container").addClass("show");
+  $(".main-container").scrollTop(0);
+  $(".sidebar-link").removeClass("is-active");
+  $(".trending").addClass("is-active");
+ });
+
+ $(".video").click(function () {
+  var source = $(this).find("source").attr("src");
+  var title = $(this).find(".video-name").text();
+  var person = $(this).find(".video-by").text();
+  var img = $(this).find(".author-img").attr("src");
+  $(".video-stream video").stop();
+  $(".video-stream source").attr("src", source);
+  $(".video-stream video").load();
+  $(".video-p-title").text(title);
+  $(".video-p-name").text(person);
+  $(".video-detail .author-img").attr("src", img);
+ });
+});
\ No newline at end of file
diff --git a/skateboard-video-platform/dist/style.css b/skateboard-video-platform/dist/style.css
new file mode 100644
index 0000000..234f3ed
--- /dev/null
+++ b/skateboard-video-platform/dist/style.css
@@ -0,0 +1,1115 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
+* {
+  outline: none;
+  box-sizing: border-box;
+}
+
+html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+
+img {
+  max-width: 100%;
+}
+
+:root {
+  --body-font: "Inter", sans-serif;
+  --theme-bg: #1f1d2b;
+  --body-color: #808191;
+  --button-bg: #353340;
+  --border-color: rgb(128 129 145 / 24%);
+  --video-bg: #252936;
+  --delay: 0s;
+}
+
+body {
+  font-family: var(--body-font);
+  color: var(--body-color);
+  background-image: url("https://images.unsplash.com/photo-1445251836269-d158eaa028a6?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1951&q=80");
+  background-image: url(https://images.unsplash.com/photo-1520045892732-304bc3ac5d8e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80);
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-blend-mode: color-dodge;
+  background-color: rgba(18, 21, 39, 0.86);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 1em 2em;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+body:before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(163deg, #1f1d2b 21%, rgba(31, 29, 43, 0.3113620448) 64%);
+  opacity: 0.4;
+  content: "";
+}
+
+.container {
+  background-color: var(--theme-bg);
+  max-width: 1240px;
+  max-height: 900px;
+  height: 95vh;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  border-radius: 20px;
+  font-size: 15px;
+  font-weight: 500;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+  position: relative;
+}
+
+.sidebar {
+  width: 220px;
+  height: 100%;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  transition-duration: 0.2s;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.sidebar .logo {
+  display: none;
+  width: 30px;
+  height: 30px;
+  background-color: #22b07d;
+  flex-shrink: 0;
+  color: #fff;
+  align-items: center;
+  border-radius: 50%;
+  justify-content: center;
+}
+.sidebar .logo-expand {
+  text-decoration: none;
+  color: #fff;
+  font-size: 19px;
+  font-weight: 600;
+  line-height: 34px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+}
+.sidebar .logo-expand:before {
+  content: "";
+  position: absolute;
+  top: -30px;
+  left: 0;
+  background: var(--theme-bg);
+  width: 200px;
+  height: 70px;
+  z-index: -1;
+}
+.sidebar-link:hover, .sidebar-link.is-active {
+  color: #fff;
+  font-weight: 600;
+}
+.sidebar-link:hover:nth-child(2n+1) svg, .sidebar-link.is-active:nth-child(2n+1) svg {
+  background: #ff7551;
+}
+.sidebar-link:hover:nth-child(2n) svg, .sidebar-link.is-active:nth-child(2n) svg {
+  background: #32a7e2;
+}
+.sidebar-link:hover:nth-child(2n+3) svg, .sidebar-link.is-active:nth-child(2n+3) svg {
+  background: #6c5ecf;
+}
+.sidebar.collapse {
+  width: 90px;
+  border-right: 1px solid var(--border-color);
+}
+.sidebar.collapse .logo-expand,
+.sidebar.collapse .side-title {
+  display: none;
+}
+.sidebar.collapse .logo {
+  display: flex;
+}
+.sidebar.collapse .side-wrapper {
+  width: 30px;
+}
+.sidebar.collapse .side-menu svg {
+  margin-right: 30px;
+}
+
+@-webkit-keyframes bottom {
+  0% {
+    transform: translateY(100px);
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes bottom {
+  0% {
+    transform: translateY(100px);
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.side-menu {
+  display: flex;
+  flex-direction: column;
+}
+.side-menu a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--body-color);
+}
+.side-menu a + a {
+  margin-top: 26px;
+}
+.side-menu svg {
+  width: 30px;
+  padding: 8px;
+  border-radius: 10px;
+  background-color: var(--button-bg);
+  flex-shrink: 0;
+  margin-right: 16px;
+}
+.side-menu svg:hover {
+  color: #fff;
+}
+
+.side-title {
+  font-size: 12px;
+  letter-spacing: 0.07em;
+  margin-bottom: 24px;
+}
+
+.side-wrapper {
+  border-bottom: 1px solid var(--border-color);
+  padding: 36px 0;
+  width: 145px;
+}
+.side-wrapper + .side-wrapper {
+  border-bottom: none;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 30px;
+}
+
+.search-bar {
+  height: 34px;
+  display: flex;
+  width: 100%;
+  max-width: 450px;
+}
+.search-bar input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: var(--button-bg);
+  border-radius: 8px;
+  font-family: var(--body-font);
+  font-size: 14px;
+  font-weight: 500;
+  padding: 0 40px 0 16px;
+  box-shadow: 0 0 0 2px rgba(134, 140, 160, 0.02);
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: 96%;
+  color: #fff;
+}
+
+.user-settings {
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.user-settings svg {
+  width: 10px;
+  flex-shrink: 0;
+}
+@media screen and (max-width: 575px) {
+  .user-settings svg {
+    display: none;
+  }
+}
+.user-settings .notify {
+  position: relative;
+}
+.user-settings .notify svg {
+  width: 20px;
+  margin-left: 24px;
+  flex-shrink: 0;
+}
+.user-settings .notify .notification {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #ec5252;
+  position: absolute;
+  right: 1px;
+  border: 1px solid var(--theme-bg);
+  top: -2px;
+}
+@media screen and (max-width: 575px) {
+  .user-settings .notify .notification {
+    display: none;
+  }
+}
+.user-img {
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 50%;
+}
+.user-name {
+  color: #fff;
+  font-size: 14px;
+  margin: 0 6px 0 12px;
+}
+@media screen and (max-width: 575px) {
+  .user-name {
+    display: none;
+  }
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  padding: 0 30px 30px;
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.anim {
+  -webkit-animation: bottom 0.8s var(--delay) both;
+          animation: bottom 0.8s var(--delay) both;
+}
+
+.main-header {
+  font-size: 30px;
+  color: #fff;
+  font-weight: 700;
+  padding-bottom: 20px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to bottom, #1f1d2b 0%, #1f1d2b 78%, rgba(31, 29, 43, 0) 100%);
+  z-index: 11;
+}
+
+.small-header {
+  font-size: 24px;
+  font-weight: 500;
+  color: #fff;
+  margin: 30px 0 20px;
+}
+
+.main-blogs {
+  display: flex;
+  align-items: center;
+}
+.main-blog__author {
+  display: flex;
+  align-items: center;
+  padding-bottom: 10px;
+}
+.main-blog__author.tips {
+  flex-direction: column-reverse;
+  align-items: flex-start;
+}
+.main-blog__title {
+  font-size: 25px;
+  max-width: 12ch;
+  font-weight: 600;
+  letter-spacing: 1px;
+  color: #fff;
+  margin-bottom: 30px;
+}
+.main-blog {
+  background-image: url("https://assets.codepen.io/3364143/skate-removebg-preview.png");
+  background-size: 80%;
+  background-position-x: 150px;
+  background-color: #31abbd;
+  display: flex;
+  flex-direction: column;
+  width: 65%;
+  padding: 30px;
+  border-radius: 20px;
+  align-self: stretch;
+  overflow: hidden;
+  position: relative;
+  transition: background 0.3s;
+  background-repeat: no-repeat;
+}
+.main-blog + .main-blog {
+  margin-left: 20px;
+  width: 35%;
+  background-image: url(https://c0.anyrgb.com/images/1020/945/venice-beach-2018-outdoors-sport-men-jumping-desert-sunset-extreme-sports-one-person-action.jpg);
+  background-color: unset;
+  background-position-x: 0;
+  background-size: 139%;
+  filter: saturate(1.4);
+}
+.main-blog + .main-blog .author-img {
+  border-color: rgba(255, 255, 255, 0.75);
+  margin-top: 14px;
+}
+.main-blog + .main-blog .author-img__wrapper svg {
+  border-color: #ffe6b2;
+  color: #e7bb7d;
+}
+.main-blog + .main-blog .author-detail {
+  margin-left: 0;
+}
+@media screen and (max-width: 905px) {
+  .main-blog, .main-blog + .main-blog {
+    width: 50%;
+    padding: 30px;
+  }
+  .main-blog {
+    background-size: cover;
+    background-position-x: center;
+    background-blend-mode: overlay;
+  }
+}
+.main-blog__time {
+  background: rgba(21, 13, 13, 0.44);
+  color: #fff;
+  padding: 3px 8px;
+  font-size: 12px;
+  border-radius: 6px;
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+}
+
+.author-img {
+  width: 52px;
+  height: 52px;
+  border: 1px solid rgba(255, 255, 255, 0.75);
+  padding: 4px;
+  border-radius: 50%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.author-img__wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+.author-img__wrapper svg {
+  width: 16px;
+  padding: 2px;
+  background-color: #fff;
+  color: #0daabc;
+  border-radius: 50%;
+  border: 2px solid #0daabc;
+  position: absolute;
+  bottom: 5px;
+  right: 0;
+}
+.author-name {
+  font-size: 15px;
+  color: #fff;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.author-info {
+  font-size: 13px;
+  font-weight: 400;
+  color: #fff;
+}
+.author-detail {
+  margin-left: 16px;
+}
+
+.seperate {
+  width: 3px;
+  height: 3px;
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 50%;
+  background-color: #fff;
+  margin: 0 6px;
+}
+.seperate.video-seperate {
+  background-color: var(--body-color);
+}
+
+.videos {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(4, 1fr);
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+}
+@media screen and (max-width: 980px) {
+  .videos {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.video {
+  position: relative;
+  background-color: var(--video-bg);
+  border-radius: 20px;
+  overflow: hidden;
+  transition: 0.4s;
+}
+.video-wrapper {
+  position: relative;
+}
+.video-name {
+  color: #fff;
+  font-size: 16px;
+  line-height: 1.4em;
+  padding: 12px 20px 0;
+  overflow: hidden;
+  background-color: var(--video-bg);
+  z-index: 9;
+  position: relative;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.video-view {
+  font-size: 12px;
+  padding: 12px 20px 20px;
+  background-color: var(--video-bg);
+  position: relative;
+}
+.video-by {
+  transition: 0.3s;
+  padding: 20px 20px 0px;
+  display: inline-flex;
+  position: relative;
+}
+.video-by:before {
+  content: "";
+  background-color: #22b07d;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  position: absolute;
+  top: 26px;
+  right: 5px;
+}
+.video-by.offline:before {
+  background-color: #ff7551;
+}
+.video-time {
+  position: absolute;
+  background: rgba(21, 13, 13, 0.44);
+  color: rgba(255, 255, 255, 0.85);
+  padding: 3px 8px;
+  font-size: 12px;
+  border-radius: 6px;
+  top: 10px;
+  z-index: 1;
+  right: 8px;
+}
+.video:hover video {
+  transform: scale(1.6);
+  transform-origin: center;
+}
+.video:hover .video-time {
+  display: none;
+}
+.video:hover .video-author {
+  bottom: -65px;
+  transform: scale(0.6);
+  right: -3px;
+  z-index: 10;
+}
+.video:hover .video-by {
+  opacity: 0;
+}
+.video-author {
+  position: absolute;
+  right: 10px;
+  transition: 0.4s;
+  bottom: -25px;
+}
+.video-author svg {
+  background-color: #0aa0f7;
+  color: #fff;
+  border-color: var(--video-bg);
+}
+
+video {
+  max-width: 100%;
+  width: 100%;
+  border-radius: 20px 20px 0 0;
+  display: block;
+  cursor: pointer;
+  transition: 0.4s;
+}
+
+.stream-area {
+  display: none;
+}
+@media screen and (max-width: 940px) {
+  .stream-area {
+    flex-direction: column;
+  }
+  .stream-area .video-stream {
+    width: 100%;
+  }
+  .stream-area .chat-stream {
+    margin-left: 0;
+    margin-top: 30px;
+  }
+  .stream-area .video-js.vjs-fluid {
+    min-height: 250px;
+  }
+  .stream-area .msg__content {
+    max-width: 100%;
+  }
+}
+
+.show .stream-area {
+  display: flex;
+}
+.show .main-header,
+.show .main-blogs,
+.show .small-header,
+.show .videos {
+  display: none;
+}
+
+.video-stream {
+  width: 65%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  transition: 0.3s;
+}
+.video-stream:hover .video-js .vjs-big-play-button {
+  opacity: 1;
+}
+
+.video-p {
+  margin-right: 12px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  flex-shrink: 0;
+  border-radius: 50%;
+  position: relative;
+  top: 0;
+  left: 0;
+}
+.video-p .author-img {
+  border: 0;
+}
+.video-p-wrapper {
+  display: flex;
+  align-items: center;
+}
+.video-p-wrapper .author-img {
+  border: 0;
+}
+.video-p-wrapper svg {
+  width: 20px;
+  padding: 4px;
+}
+@media screen and (max-width: 650px) {
+  .video-p-wrapper {
+    flex-direction: column;
+  }
+  .video-p-wrapper .button-wrapper {
+    margin: 20px auto 0;
+  }
+  .video-p-wrapper .video-p-detail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .video-p-wrapper .video-p {
+    margin-right: 0;
+  }
+}
+.video-p-sub {
+  font-size: 12px;
+}
+.video-p-title {
+  font-size: 24px;
+  color: #fff;
+  line-height: 1.4em;
+  margin: 16px 0 20px;
+}
+.video-p-subtitle {
+  font-size: 14px;
+  line-height: 1.5em;
+  max-width: 60ch;
+}
+.video-p-subtitle + .video-p-subtitle {
+  margin-top: 16px;
+}
+.video-p-name {
+  margin-bottom: 8px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+}
+.video-p-name:after {
+  content: "";
+  width: 6px;
+  height: 6px;
+  background-color: #22b07d;
+  border-radius: 50%;
+  margin-left: 8px;
+  display: inline-block;
+}
+.video-p-name.offline:after {
+  background-color: #ff7551;
+}
+
+.video-content {
+  width: 100%;
+}
+
+.button-wrapper {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.like {
+  display: flex;
+  align-items: center;
+  background-color: var(--button-bg);
+  color: #fff;
+  border: 0;
+  font-family: var(--body-font);
+  border-radius: 8px;
+  padding: 10px 16px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.like.red {
+  background-color: #ea5f5f;
+}
+.like svg {
+  width: 18px;
+  flex-shrink: 0;
+  margin-right: 10px;
+  padding: 0;
+}
+.like + .like {
+  margin-left: 16px;
+}
+
+.video-stats {
+  margin-left: 30px;
+}
+
+.video-detail {
+  display: flex;
+  margin-top: 30px;
+  width: 100%;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  padding: 20px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  background-color: #252836;
+  left: 0;
+  z-index: 1;
+  border-bottom: 1px solid var(--border-color);
+}
+.chat-header svg {
+  width: 15px;
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+.chat-header span {
+  margin-left: auto;
+  color: var(--body-color);
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.chat-stream {
+  flex-grow: 1;
+  margin-left: 30px;
+}
+
+.chat {
+  background-color: #252836;
+  border-radius: 20px;
+  padding: 0 20px;
+  max-height: 414px;
+  overflow: auto;
+}
+.chat-footer {
+  display: flex;
+  align-items: center;
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  width: calc(100% + 20px);
+  padding-bottom: 12px;
+  background-color: #252836;
+}
+.chat-footer input {
+  width: 100%;
+  border: 0;
+  background-color: #2d303e;
+  border-radius: 20px;
+  font-size: 12px;
+  color: #fff;
+  margin-left: -10px;
+  padding: 12px 40px;
+  font-weight: 500;
+  font-family: var(--body-font);
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 12C2 6.48 6.47 2 12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10C6.47 22 2 17.52 2 12zm5.52 1.2c-.66 0-1.2-.54-1.2-1.2 0-.66.54-1.2 1.2-1.2.66 0 1.19.54 1.19 1.2 0 .66-.53 1.2-1.19 1.2zM10.8 12c0 .66.54 1.2 1.2 1.2.66 0 1.19-.54 1.19-1.2a1.194 1.194 0 10-2.39 0zm4.48 0a1.195 1.195 0 102.39 0 1.194 1.194 0 10-2.39 0z' fill='%236c6e78'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-size: 24px;
+  background-position: 8px;
+}
+.chat-footer input::-moz-placeholder {
+  color: #6c6e78;
+}
+.chat-footer input:-ms-input-placeholder {
+  color: #6c6e78;
+}
+.chat-footer input::placeholder {
+  color: #6c6e78;
+}
+.chat-footer:before {
+  content: "";
+  position: absolute;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M21.435 2.582a1.933 1.933 0 00-1.93-.503L3.408 6.759a1.92 1.92 0 00-1.384 1.522c-.142.75.355 1.704 1.003 2.102l5.033 3.094a1.304 1.304 0 001.61-.194l5.763-5.799a.734.734 0 011.06 0c.29.292.29.765 0 1.067l-5.773 5.8c-.428.43-.508 1.1-.193 1.62l3.075 5.083c.36.604.98.946 1.66.946.08 0 .17 0 .251-.01.78-.1 1.4-.634 1.63-1.39l4.773-16.075c.21-.685.02-1.43-.48-1.943z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-size: 14px;
+  background-position: center;
+  width: 18px;
+  height: 18px;
+  background-color: #6c5ecf;
+  padding: 4px;
+  border-radius: 50%;
+  right: 16px;
+}
+.chat-vid__title {
+  color: #fff;
+  font-size: 18px;
+}
+.chat-vid__container {
+  margin-top: 40px;
+}
+.chat-vid__wrapper {
+  display: flex;
+  align-items: center;
+  margin-top: 26px;
+}
+.chat-vid__name {
+  color: #fff;
+  font-size: 14px;
+  line-height: 1.3em;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}
+.chat-vid__img {
+  width: 100px;
+  height: 80px;
+  border-radius: 10px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: right;
+     object-position: right;
+  margin-right: 16px;
+  transition: 0.3s;
+}
+.chat-vid__img:hover {
+  transform: scale(1.02);
+}
+.chat-vid__content {
+  max-width: 20ch;
+}
+.chat-vid__by, .chat-vid__info {
+  color: var(--body-color);
+  font-size: 13px;
+}
+.chat-vid__by {
+  margin: 6px 0;
+}
+.chat-vid__button {
+  background-color: #6c5ecf;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  margin-top: 26px;
+  display: flex;
+  padding: 0 10px;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+.chat-vid__button:hover {
+  background-color: #5847d0;
+}
+
+.message {
+  display: flex;
+  align-items: center;
+  margin-top: 18px;
+}
+.message:last-child {
+  margin-bottom: 18px;
+}
+.message-container .author-img__wrapper svg {
+  width: 15px;
+}
+
+.msg__name {
+  font-size: 13px;
+}
+.msg__content {
+  line-height: 1.4em;
+  max-width: 26ch;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.video-js .vjs-control-bar {
+  display: flex;
+  align-items: center;
+}
+
+.vjs-poster {
+  background-size: 150%;
+}
+
+.video-js .vjs-control-bar {
+  width: 100%;
+  position: absolute;
+  bottom: 14px;
+  padding-left: 36px;
+  left: 14px;
+  width: calc(100% - 28px);
+  right: 0;
+  border-radius: 10px;
+  height: 4em;
+  background-color: #2b333f;
+  background-color: rgba(43, 51, 63, 0.7);
+}
+@media screen and (max-width: 625px) {
+  .video-js .vjs-control-bar {
+    padding-left: 0;
+  }
+}
+
+.video-js:hover .vjs-big-play-button {
+  background-color: rgba(43, 51, 63, 0.5);
+}
+
+.video-js .vjs-big-play-button {
+  transition: 0.3s;
+  opacity: 0;
+  border: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.video-js .vjs-big-play-button:hover {
+  background-color: rgba(43, 51, 63, 0.7);
+  border-color: transparent;
+}
+
+.vjs-play-control:after {
+  content: "LIVE";
+  position: absolute;
+  left: -66px;
+  top: 7px;
+  background-color: #8941e3;
+  height: 24px;
+  font-family: var(--body-font);
+  font-size: 10px;
+  padding: 0 12px 0 26px;
+  display: flex;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  align-items: center;
+  border-radius: 6px;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-circle'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-size: 6px;
+  background-position: 12px;
+}
+@media screen and (max-width: 625px) {
+  .vjs-play-control:after {
+    display: none;
+  }
+}
+
+.vjs-menu-button-inline .vjs-menu {
+  top: 4px;
+}
+
+.video-js .vjs-control:before,
+.video-js .vjs-time-control {
+  line-height: 40px;
+}
+
+.video-js .vjs-tech {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+button.vjs-play-control.vjs-control.vjs-button {
+  margin-left: 40px;
+}
+@media screen and (max-width: 625px) {
+  button.vjs-play-control.vjs-control.vjs-button {
+    margin-left: 0;
+  }
+}
+
+.vjs-icon-fullscreen-enter:before,
+.video-js .vjs-fullscreen-control:before {
+  content: "";
+  position: absolute;
+  display: block;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.54 0h3.38c1.41 0 2.54 1.15 2.54 2.561V5.97c0 1.42-1.13 2.56-2.54 2.56H2.54C1.14 8.53 0 7.39 0 5.97V2.561C0 1.15 1.14 0 2.54 0zm0 11.47h3.38c1.41 0 2.54 1.14 2.54 2.56v3.41c0 1.41-1.13 2.56-2.54 2.56H2.54C1.14 20 0 18.85 0 17.44v-3.41c0-1.42 1.14-2.56 2.54-2.56zM17.46 0h-3.38c-1.41 0-2.54 1.15-2.54 2.561V5.97c0 1.42 1.13 2.56 2.54 2.56h3.38c1.4 0 2.54-1.14 2.54-2.56V2.561C20 1.15 18.86 0 17.46 0zm-3.38 11.47h3.38c1.4 0 2.54 1.14 2.54 2.56v3.41c0 1.41-1.14 2.56-2.54 2.56h-3.38c-1.41 0-2.54-1.15-2.54-2.56v-3.41c0-1.42 1.13-2.56 2.54-2.56z' fill='%23fff'/%3e%3c/svg%3e");
+  background-size: 11px;
+  background-position: center;
+  background-position-y: 14px;
+  background-repeat: no-repeat;
+  opacity: 0.6;
+}
+
+.vjs-playback-rate .vjs-playback-rate-value {
+  font-size: 1.1em;
+  line-height: 3.5em;
+  opacity: 0.6;
+  font-weight: 700;
+  font-family: var(--body-font);
+}
+
+.video-js .vjs-playback-rate {
+  width: 2.2em;
+}
+
+.video-js.vjs-fluid {
+  border-radius: 20px;
+  overflow: hidden;
+  min-height: 414px;
+}
+
+@media screen and (max-width: 735px) {
+  .main-blogs {
+    flex-wrap: wrap;
+  }
+
+  .main-blog,
+.main-blog + .main-blog {
+    width: 100%;
+  }
+
+  .videos {
+    grid-template-columns: 1fr;
+  }
+
+  .main-blog + .main-blog {
+    margin-left: 0;
+    margin-top: 20px;
+    background-size: cover;
+  }
+}
+@media screen and (max-width: 475px) {
+  .main-blog__title {
+    font-size: 20px;
+  }
+
+  .author-name {
+    font-size: 14px;
+  }
+
+  .main-blog__author {
+    flex-direction: column-reverse;
+    align-items: flex-start;
+  }
+
+  .author-detail {
+    margin-left: 0;
+  }
+
+  .main-blog .author-img {
+    margin-top: 14px;
+  }
+
+  .main-container {
+    padding: 0 20px 20px;
+  }
+
+  .header {
+    padding: 20px;
+  }
+
+  .sidebar.collapse {
+    width: 40px;
+  }
+
+  .sidebar {
+    align-items: center;
+  }
+
+  body {
+    padding: 0;
+  }
+
+  .container {
+    height: 100vh;
+    border-radius: 0;
+    max-height: 100%;
+  }
+}
+::-webkit-scrollbar {
+  width: 6px;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(21, 20, 26, 0.63);
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/skateboard-video-platform/license.txt b/skateboard-video-platform/license.txt
new file mode 100644
index 0000000..4ecd432
--- /dev/null
+++ b/skateboard-video-platform/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Aysenur Turk (https://codepen.io/TurkAysenur/pen/LYRKpWe)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/skateboard-video-platform/src/index.html b/skateboard-video-platform/src/index.html
new file mode 100644
index 0000000..7af68b7
--- /dev/null
+++ b/skateboard-video-platform/src/index.html
@@ -0,0 +1,350 @@
+<div class="container">
+ <div class="sidebar">
+  <span class="logo">S</span>
+  <a class="logo-expand" href="#">skateboard</a>
+  <div class="side-wrapper">
+   <div class="side-title">MENU</div>
+   <div class="side-menu">
+    <a class="sidebar-link discover is-active" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path d="M9.135 20.773v-3.057c0-.78.637-1.414 1.423-1.414h2.875c.377 0 .74.15 1.006.414.267.265.417.625.417 1v3.057c-.002.325.126.637.356.867.23.23.544.36.87.36h1.962a3.46 3.46 0 002.443-1 3.41 3.41 0 001.013-2.422V9.867c0-.735-.328-1.431-.895-1.902l-6.671-5.29a3.097 3.097 0 00-3.949.072L3.467 7.965A2.474 2.474 0 002.5 9.867v8.702C2.5 20.464 4.047 22 5.956 22h1.916c.68 0 1.231-.544 1.236-1.218l.027-.009z" />
+     </svg>
+     Discover
+    </a>
+    <a class="sidebar-link trending" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M10.835 12.007l.002.354c.012 1.404.096 2.657.242 3.451 0 .015.16.802.261 1.064.16.38.447.701.809.905a2 2 0 00.91.219c.249-.012.66-.137.954-.242l.244-.094c1.617-.642 4.707-2.74 5.891-4.024l.087-.09.39-.42c.245-.322.375-.715.375-1.138 0-.379-.116-.758-.347-1.064-.07-.099-.18-.226-.28-.334l-.379-.397c-1.305-1.321-4.129-3.175-5.593-3.79 0-.013-.91-.393-1.343-.407h-.057c-.665 0-1.286.379-1.603.991-.087.168-.17.496-.233.784l-.114.544c-.13.874-.216 2.216-.216 3.688zm-6.332-1.525C3.673 10.482 3 11.162 3 12a1.51 1.51 0 001.503 1.518l3.7-.328c.65 0 1.179-.532 1.179-1.19 0-.658-.528-1.191-1.18-1.191l-3.699-.327z" />
+     </svg>
+     Trending
+    </a>
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path d="M11.23 7.29V3.283c0-.427.34-.782.77-.782.385 0 .711.298.763.677l.007.104v4.01h4.78c2.38 0 4.335 1.949 4.445 4.38l.005.215v5.04c0 2.447-1.887 4.456-4.232 4.569l-.208.005H6.44c-2.38 0-4.326-1.94-4.435-4.379L2 16.905v-5.03c0-2.447 1.878-4.466 4.222-4.58l.208-.004h4.8v6.402l-1.6-1.652a.755.755 0 00-1.09 0 .81.81 0 00-.22.568c0 .157.045.32.14.459l.08.099 2.91 3.015c.14.155.34.237.55.237a.735.735 0 00.465-.166l.075-.071 2.91-3.015c.3-.31.3-.816 0-1.126a.755.755 0 00-1.004-.077l-.086.077-1.59 1.652V7.291h-1.54z" />
+     </svg>
+     Streaming
+    </a>
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.1535 16.64L14.995 13.77C15.2822 13.47 15.2822 13 14.9851 12.71C14.698 12.42 14.2327 12.42 13.9455 12.71L12.3713 14.31V9.49C12.3713 9.07 12.0446 8.74 11.6386 8.74C11.2327 8.74 10.896 9.07 10.896 9.49V14.31L9.32178 12.71C9.03465 12.42 8.56931 12.42 8.28218 12.71C7.99505 13 7.99505 13.47 8.28218 13.77L11.1139 16.64C11.1832 16.71 11.2624 16.76 11.3515 16.8C11.4406 16.84 11.5396 16.86 11.6386 16.86C11.7376 16.86 11.8267 16.84 11.9158 16.8C12.005 16.76 12.0842 16.71 12.1535 16.64ZM19.3282 9.02561C19.5609 9.02292 19.8143 9.02 20.0446 9.02C20.302 9.02 20.5 9.22 20.5 9.47V17.51C20.5 19.99 18.5 22 16.0446 22H8.17327C5.58911 22 3.5 19.89 3.5 17.29V6.51C3.5 4.03 5.4901 2 7.96535 2H13.2525C13.5 2 13.7079 2.21 13.7079 2.46V5.68C13.7079 7.51 15.1931 9.01 17.0149 9.02C17.4333 9.02 17.8077 9.02318 18.1346 9.02595C18.3878 9.02809 18.6125 9.03 18.8069 9.03C18.9479 9.03 19.1306 9.02789 19.3282 9.02561ZM19.6045 7.5661C18.7916 7.5691 17.8322 7.5661 17.1421 7.5591C16.047 7.5591 15.145 6.6481 15.145 5.5421V2.9061C15.145 2.4751 15.6629 2.2611 15.9579 2.5721C16.7203 3.37199 17.8873 4.5978 18.8738 5.63395C19.2735 6.05379 19.6436 6.44249 19.945 6.7591C20.2342 7.0621 20.0223 7.5651 19.6045 7.5661Z" />
+     </svg>
+     Playlist
+    </a>
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M17.769 8.382H22C22 4.985 19.964 3 16.516 3H7.484C4.036 3 2 4.985 2 8.338v7.324C2 19.015 4.036 21 7.484 21h9.032C19.964 21 22 19.015 22 15.662v-.313h-4.231c-1.964 0-3.556-1.552-3.556-3.466 0-1.915 1.592-3.467 3.556-3.467v-.034zm0 1.49h3.484c.413 0 .747.326.747.728v2.531a.746.746 0 01-.747.728H17.85c-.994.013-1.864-.65-2.089-1.595a1.982 1.982 0 01.433-1.652 2.091 2.091 0 011.576-.74zm.151 2.661h.329a.755.755 0 00.764-.745.755.755 0 00-.764-.746h-.329a.766.766 0 00-.54.213.727.727 0 00-.224.524c0 .413.34.75.764.754zM6.738 8.382h5.644a.755.755 0 00.765-.746.755.755 0 00-.765-.745H6.738a.755.755 0 00-.765.737c0 .413.341.75.765.754z" />
+     </svg>
+     Bookmark
+    </a>
+   </div>
+  </div>
+  <div class="side-wrapper">
+   <div class="side-title">CATEGORY</div>
+   <div class="side-menu">
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M15.164 6.083l.948.011c3.405 0 5.888 2.428 5.888 5.78v4.307c0 3.353-2.483 5.78-5.888 5.78A193.5 193.5 0 0112.01 22c-1.374 0-2.758-.01-4.122-.038-3.405 0-5.888-2.428-5.888-5.78v-4.307c0-3.353 2.483-5.78 5.898-5.78 1.286-.02 2.6-.04 3.935-.04v-.163c0-.665-.56-1.204-1.226-1.204h-.972c-1.109 0-2.012-.886-2.012-1.965 0-.395.334-.723.736-.723.412 0 .736.328.736.723 0 .289.246.52.54.52h.972c1.481.01 2.688 1.194 2.698 2.64v.183c.619 0 1.238.008 1.859.017zm-4.312 8.663h-1.03v1.02a.735.735 0 01-.737.723.728.728 0 01-.736-.722v-1.021H7.31a.728.728 0 01-.736-.723c0-.395.334-.722.736-.722h1.04v-1.012c0-.395.324-.723.736-.723.403 0 .736.328.736.723v1.012h1.03c.403 0 .737.327.737.722a.728.728 0 01-.736.723zm4.17-1.629h.099a.728.728 0 00.736-.722.735.735 0 00-.736-.723h-.098a.722.722 0 100 1.445zm1.679 3.315h.098a.728.728 0 00.736-.723.735.735 0 00-.736-.723H16.7a.722.722 0 100 1.445z" />
+     </svg>
+     Live Stream
+    </a>
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M7.33 2h9.34c3.4 0 5.32 1.93 5.33 5.33v9.34c0 3.4-1.93 5.33-5.33 5.33H7.33C3.93 22 2 20.07 2 16.67V7.33C2 3.93 3.93 2 7.33 2zm4.72 15.86c.43 0 .79-.32.83-.75V6.92a.815.815 0 00-.38-.79.84.84 0 00-1.28.79v10.19c.05.43.41.75.83.75zm4.6 0c.42 0 .78-.32.83-.75v-3.28a.839.839 0 00-1.28-.79.806.806 0 00-.38.79v3.28c.04.43.4.75.83.75zm-8.43-.75a.827.827 0 01-.83.75c-.43 0-.79-.32-.83-.75V10.2a.84.84 0 01.39-.79c.27-.17.61-.17.88 0s.42.48.39.79v6.91z" />
+     </svg>
+     Tutorial
+    </a>
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M19.761 12.001c0 .814.668 1.475 1.489 1.475.414 0 .75.333.75.743v2.677C22 19.159 20.142 21 17.858 21H6.143C3.859 21 2 19.159 2 16.896v-2.677c0-.41.336-.743.75-.743.822 0 1.49-.662 1.49-1.475 0-.793-.641-1.39-1.49-1.39a.752.752 0 01-.53-.217.74.74 0 01-.22-.525l.002-2.764C2.002 4.842 3.86 3 6.144 3h11.712c2.284 0 4.143 1.842 4.143 4.105L22 9.782a.741.741 0 01-.219.526.753.753 0 01-.531.218c-.821 0-1.489.662-1.489 1.475zm-5.509.647l1.179-1.137a.73.73 0 00-.409-1.25l-1.629-.236-.729-1.462a.737.737 0 00-.662-.41H12a.74.74 0 00-.663.409l-.729 1.463-1.626.235a.735.735 0 00-.6.498.724.724 0 00.187.753l1.179 1.137-.278 1.608a.727.727 0 00.295.719.742.742 0 00.777.054L12 14.27l1.455.757a.733.733 0 00.78-.053.723.723 0 00.296-.718l-.279-1.608z" />
+     </svg>
+     Competation
+    </a>
+    <a class="sidebar-link" href="#">
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M16.158 8.233a4.207 4.207 0 01-4.209 4.234 4.207 4.207 0 01-4.21-4.234A4.206 4.206 0 0111.95 4a4.206 4.206 0 014.21 4.233zM11.95 20c-3.431 0-6.36-.544-6.36-2.72 0-2.177 2.91-2.74 6.36-2.74 3.431 0 6.361.544 6.361 2.72S15.399 20 11.949 20zm6.008-11.69a5.765 5.765 0 01-.984 3.24.158.158 0 00.107.245 3.4 3.4 0 00.483.046c1.643.044 3.118-1.02 3.525-2.621.604-2.379-1.168-4.514-3.425-4.514-.245 0-.48.026-.708.073-.031.007-.064.021-.082.05-.022.034-.006.08.016.11a5.807 5.807 0 011.068 3.37zm2.721 5.203c1.104.217 1.83.66 2.131 1.304a1.923 1.923 0 010 1.67c-.46.998-1.944 1.319-2.52 1.402-.12.018-.215-.086-.203-.206.295-2.767-2.048-4.08-2.654-4.381-.026-.014-.032-.034-.03-.047.003-.009.013-.023.033-.026 1.312-.024 2.722.156 3.243.284zM6.438 11.84c.164-.004.325-.019.483-.046a.158.158 0 00.106-.245 5.765 5.765 0 01-.984-3.24c0-1.25.39-2.416 1.068-3.372.022-.03.037-.075.016-.11-.017-.027-.051-.042-.082-.05a3.52 3.52 0 00-.71-.072c-2.255 0-4.027 2.135-3.423 4.514.407 1.6 1.882 2.664 3.525 2.621zm.159 1.414c.003.013-.003.033-.028.047-.607.302-2.95 1.614-2.656 4.38.013.121-.082.224-.201.207-.577-.083-2.06-.404-2.52-1.402a1.917 1.917 0 010-1.67c.3-.644 1.026-1.087 2.13-1.305.522-.127 1.93-.307 3.244-.283.02.003.03.017.03.026z" />
+     </svg>
+     Community
+    </a>
+   </div>
+  </div>
+ </div>
+ <div class="wrapper">
+  <div class="header">
+   <div class="search-bar">
+    <input type="text" placeholder="Search">
+   </div>
+   <div class="user-settings">
+    <img class="user-img" src="https://images.unsplash.com/photo-1587918842454-870dbd18261a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=943&q=80" alt="">
+    <div class="user-name">Thomas</div>
+    <svg viewBox="0 0 492 492" fill="currentColor">
+     <path d="M484.13 124.99l-16.11-16.23a26.72 26.72 0 00-19.04-7.86c-7.2 0-13.96 2.79-19.03 7.86L246.1 292.6 62.06 108.55c-5.07-5.06-11.82-7.85-19.03-7.85s-13.97 2.79-19.04 7.85L7.87 124.68a26.94 26.94 0 000 38.06l219.14 219.93c5.06 5.06 11.81 8.63 19.08 8.63h.09c7.2 0 13.96-3.57 19.02-8.63l218.93-219.33A27.18 27.18 0 00492 144.1c0-7.2-2.8-14.06-7.87-19.12z"></path>
+    </svg>
+    <div class="notify">
+     <div class="notification"></div>
+     <svg viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z" />
+     </svg>
+    </div>
+   </div>
+  </div>
+  <div class="main-container">
+   <div class="main-header anim" style="--delay: 0s">Discover</div>
+   <div class="main-blogs">
+    <div class="main-blog anim" style="--delay: .1s">
+     <div class="main-blog__title">How to do Basic Jumping and how to landing safely</div>
+     <div class="main-blog__author">
+      <div class="author-img__wrapper">
+       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+        <path d="M20 6L9 17l-5-5" />
+       </svg>
+       <img class="author-img" src="https://images.unsplash.com/photo-1560941001-d4b52ad00ecc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" />
+      </div>
+      <div class="author-detail">
+       <div class="author-name">Thomas Hope</div>
+       <div class="author-info">53K views <span class="seperate"></span>2 weeks ago</div>
+      </div>
+     </div>
+     <div class="main-blog__time">7 min</div>
+    </div>
+    <div class="main-blog anim" style="--delay: .2s">
+     <div class="main-blog__title">Skateboard Tips You need to know</div>
+     <div class="main-blog__author tips">
+      <div class="main-blog__time">7 min</div>
+      <div class="author-img__wrapper">
+       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+        <path d="M20 6L9 17l-5-5" />
+       </svg>
+       <img class="author-img" src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzl8fG1lbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
+      </div>
+      <div class="author-detail">
+       <div class="author-name">Tony Andrew</div>
+       <div class="author-info">53K views <span></span>2 weeks ago</div>
+      </div>
+     </div>
+    </div>
+   </div>
+   <div class="small-header anim" style="--delay: .3s">Most Watched</div>
+   <div class="videos">
+    <div class="video anim" style="--delay: .4s">
+     <div class="video-time">8 min</div>
+     <div class="video-wrapper">
+      <video muted="">
+       <source src="https://player.vimeo.com/external/436572488.sd.mp4?s=eae5fb490e214deb9ff532dd98d101efe94e7a8b&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
+      </video>
+      <div class="author-img__wrapper video-author">
+       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+        <path d="M20 6L9 17l-5-5" />
+       </svg>
+       <img class="author-img" src="https://images.pexels.com/photos/1680172/pexels-photo-1680172.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+      </div>
+     </div>
+     <div class="video-by">Andy William</div>
+     <div class="video-name">Basic how to ride your skateboard comfortly</div>
+     <div class="video-view">54K views<span class="seperate video-seperate"></span>1 week ago</div>
+    </div>
+    <div class="video anim" style="--delay: .5s">
+     <div class="video-time">5 min</div>
+     <div class="video-wrapper">
+      <video muted="">
+       <source src="https://player.vimeo.com/external/449972745.sd.mp4?s=9943177fe8a6147b7bc4598259401f06ec57878a&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
+      </video>
+      <div class="author-img__wrapper video-author">
+       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+        <path d="M20 6L9 17l-5-5" />
+       </svg>
+       <img class="author-img" src="https://images.pexels.com/photos/3370021/pexels-photo-3370021.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+      </div>
+     </div>
+     <div class="video-by offline">Gerard Bind</div>
+     <div class="video-name">Prepare for your first skateboard jump</div>
+     <div class="video-view">42K views<span class="seperate video-seperate"></span>1 week ago</div>
+    </div>
+    <div class="video anim" style="--delay: .6s">
+     <div class="video-time">7 min</div>
+     <div class="video-wrapper">
+      <video muted="">
+       <source src="https://player.vimeo.com/external/436553499.sd.mp4?s=0e44527f269278743db448761e35c5e39cfaa52c&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
+      </video>
+      <div class="author-img__wrapper video-author">
+       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+        <path d="M20 6L9 17l-5-5" />
+       </svg>
+       <img class="author-img" src="https://images.pexels.com/photos/1870163/pexels-photo-1870163.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+      </div>
+     </div>
+     <div class="video-by offline">John Wise</div>
+     <div class="video-name">Basic equipment to play skateboard safely</div>
+     <div class="video-view">64K views<span class="seperate video-seperate"></span>2 week ago</div>
+    </div>
+    <div class="video anim" style="--delay: .7s">
+     <div class="video-time">6 min</div>
+     <div class="video-wrapper">
+      <video muted="">
+       <source src="https://player.vimeo.com/external/361861493.sd.mp4?s=19d8275ca755d653042a87ef28b2f0b2eabf57d0&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
+      </video>
+      <div class="author-img__wrapper video-author">
+       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+        <path d="M20 6L9 17l-5-5" />
+       </svg>
+       <img class="author-img" src="https://images.pexels.com/photos/2889942/pexels-photo-2889942.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+      </div>
+     </div>
+     <div class="video-by">Budi Hakim</div>
+     <div class="video-name">Tips to playing skateboard on the ramp</div>
+     <div class="video-view">50K views<span class="seperate video-seperate"></span>1 week ago</div>
+    </div>
+   </div>
+   <div class="stream-area">
+    <div class="video-stream">
+     <video id="my_video_1" class="video-js vjs-default-skin anim" width="640px" height="267px" controls preload="none" poster='https://images.unsplash.com/photo-1476801071117-fbc157ae3f01?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDh8fHxlbnwwfHx8&w=1000&q=80' data-setup='{ "aspectRatio":"940:620", "playbackRates": [1, 1.5, 2] }'>
+      <source src="https://player.vimeo.com/external/390402719.sd.mp4?s=20cfdb066c4253047562b65bd4e411b86a004bc5&profile_id=139&oauth2_token_id=57447761" type='video/mp4' />
+      <source src="https://player.vimeo.com/external/390402719.sd.mp4?s=20cfdb066c4253047562b65bd4e411b86a004bc5&profile_id=139&oauth2_token_id=57447761" type='video/webm' />
+     </video>
+     <div class="video-detail">
+      <div class="video-content">
+       <div class="video-p-wrapper anim" style="--delay: .1s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.pexels.com/photos/1680172/pexels-photo-1680172.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+        </div>
+        <div class="video-p-detail">
+         <div class="video-p-name">Andy William</div>
+         <div class="video-p-sub">1,980,893 subscribers</div>
+        </div>
+        <div class="button-wrapper">
+         <button class="like">
+          <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+           <path d="M21.435 2.582a1.933 1.933 0 00-1.93-.503L3.408 6.759a1.92 1.92 0 00-1.384 1.522c-.142.75.355 1.704 1.003 2.102l5.033 3.094a1.304 1.304 0 001.61-.194l5.763-5.799a.734.734 0 011.06 0c.29.292.29.765 0 1.067l-5.773 5.8c-.428.43-.508 1.1-.193 1.62l3.075 5.083c.36.604.98.946 1.66.946.08 0 .17 0 .251-.01.78-.1 1.4-.634 1.63-1.39l4.773-16.075c.21-.685.02-1.43-.48-1.943z" />
+          </svg>
+          Share
+         </button>
+         <button class="like red">
+          <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+           <path fill-rule="evenodd" clip-rule="evenodd" d="M15.85 2.5c.63 0 1.26.09 1.86.29 3.69 1.2 5.02 5.25 3.91 8.79a12.728 12.728 0 01-3.01 4.81 38.456 38.456 0 01-6.33 4.96l-.25.15-.26-.16a38.093 38.093 0 01-6.37-4.96 12.933 12.933 0 01-3.01-4.8c-1.13-3.54.2-7.59 3.93-8.81.29-.1.59-.17.89-.21h.12c.28-.04.56-.06.84-.06h.11c.63.02 1.24.13 1.83.33h.06c.04.02.07.04.09.06.22.07.43.15.63.26l.38.17c.092.05.195.125.284.19.056.04.107.077.146.1l.05.03c.085.05.175.102.25.16a6.263 6.263 0 013.85-1.3zm2.66 7.2c.41-.01.76-.34.79-.76v-.12a3.3 3.3 0 00-2.11-3.16.8.8 0 00-1.01.5c-.14.42.08.88.5 1.03.64.24 1.07.87 1.07 1.57v.03a.86.86 0 00.19.62c.14.17.35.27.57.29z" />
+          </svg>
+          Liked
+         </button>
+        </div>
+       </div>
+       <div class="video-p-title anim" style="--delay: .2s">Basic how to ride your Skateboard</div>
+       <div class="video-p-subtitle anim" style="--delay: .3s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus illum tempora consequuntur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis earum velit accusantium maiores qui sit quas, laborum voluptatibus vero quidem tempore facilis voluptate tempora deserunt! </div>
+       <div class="video-p-subtitle anim" style="--delay: .4s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus laborum qui dolorum fugiat eius accusantium repellendus illum tempora consequuntur. Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
+      </div>
+     </div>
+    </div>
+    <div class="chat-stream">
+     <div class="chat">
+      <div class="chat-header anim">Live Chat<span><svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+         <path fill-rule="evenodd" clip-rule="evenodd" d="M14.212 7.762c0 2.644-2.163 4.763-4.863 4.763-2.698 0-4.863-2.119-4.863-4.763C4.486 5.12 6.651 3 9.35 3c2.7 0 4.863 2.119 4.863 4.762zM2 17.917c0-2.447 3.386-3.06 7.35-3.06 3.985 0 7.349.634 7.349 3.083 0 2.448-3.386 3.06-7.35 3.06C5.364 21 2 20.367 2 17.917zM16.173 7.85a6.368 6.368 0 01-1.137 3.646c-.075.107-.008.252.123.275.182.03.369.048.56.052 1.898.048 3.601-1.148 4.072-2.95.697-2.675-1.35-5.077-3.957-5.077a4.16 4.16 0 00-.818.082c-.036.008-.075.025-.095.055-.025.04-.007.09.019.124a6.414 6.414 0 011.233 3.793zm3.144 5.853c1.276.245 2.115.742 2.462 1.467a2.107 2.107 0 010 1.878c-.531 1.123-2.245 1.485-2.912 1.578a.207.207 0 01-.234-.232c.34-3.113-2.367-4.588-3.067-4.927-.03-.017-.036-.04-.034-.055.002-.01.015-.025.038-.028 1.515-.028 3.145.176 3.747.32z" />
+        </svg>
+        15,988 people
+       </span>
+      </div>
+      <div class="message-container">
+       <div class="message anim" style="--delay: .1s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.unsplash.com/photo-1560941001-d4b52ad00ecc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" />
+        </div>
+        <div class="msg-wrapper">
+         <div class="msg__name video-p-name"> Wijaya Adabi</div>
+         <div class="msg__content video-p-sub"> Lorem ipsum clor sit, ame conse quae debitis</div>
+        </div>
+       </div>
+       <div class="message anim" style="--delay: .2s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.pexels.com/photos/2889942/pexels-photo-2889942.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+        </div>
+        <div class="msg-wrapper">
+         <div class="msg__name video-p-name offline"> Johny Wise</div>
+         <div class="msg__content video-p-sub"> Suscipit eos atque voluptates labore</div>
+        </div>
+       </div>
+       <div class="message anim" style="--delay: .3s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzl8fG1lbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
+        </div>
+        <div class="msg-wrapper">
+         <div class="msg__name video-p-name offline"> Budi Hakim</div>
+         <div class="msg__content video-p-sub">Dicta quidem sunt adipisci</div>
+        </div>
+       </div>
+       <div class="message anim" style="--delay: .4s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.pexels.com/photos/1870163/pexels-photo-1870163.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+        </div>
+        <div class="msg-wrapper">
+         <div class="msg__name video-p-name"> Thomas Hope</div>
+         <div class="msg__content video-p-sub"> recusandae doloremque aperiam alias molestias</div>
+        </div>
+       </div>
+       <div class="message anim" style="--delay: .5s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.pexels.com/photos/1680172/pexels-photo-1680172.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+        </div>
+        <div class="msg-wrapper">
+         <div class="msg__name video-p-name"> Gerard Will</div>
+         <div class="msg__content video-p-sub">Dicta quidem sunt adipisci</div>
+        </div>
+       </div>
+       <div class="message anim" style="--delay: .6s">
+        <div class="author-img__wrapper video-author video-p">
+         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+          <path d="M20 6L9 17l-5-5" />
+         </svg>
+         <img class="author-img" src="https://images.pexels.com/photos/2889942/pexels-photo-2889942.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
+        </div>
+        <div class="msg-wrapper">
+         <div class="msg__name video-p-name offline">Johny Wise</div>
+         <div class="msg__content video-p-sub"> recusandae doloremque aperiam alias molestias</div>
+        </div>
+       </div>
+      </div>
+      <div class="chat-footer anim" style="--delay: .1s">
+       <input type="text" placeholder="Write your message">
+      </div>
+     </div>
+     <div class="chat-vid__container">
+      <div class="chat-vid__title anim" style="--delay: .3s">Related Videos</div>
+      <div class="chat-vid anim" style="--delay: .4s">
+       <div class="chat-vid__wrapper">
+        <img class="chat-vid__img" src="https://cdn.nohat.cc/thumb/f/720/3b55eddcfffa4e87897d.jpg" />
+        <div class="chat-vid__content">
+         <div class="chat-vid__name">Prepare for your first skateboard jump</div>
+         <div class="chat-vid__by">Jordan Wise</div>
+         <div class="chat-vid__info">125.908 views <span class="seperate"></span>2 days ago</div>
+        </div>
+       </div>
+      </div>
+      <div class="chat-vid anim" style="--delay: .5s">
+       <div class="chat-vid__wrapper">
+        <img class="chat-vid__img" src="https://iamaround.it/wp-content/uploads/2015/02/pexels-photo-4663818.jpeg" />
+        <div class="chat-vid__content">
+         <div class="chat-vid__name">Prepare for your first skateboard jump</div>
+         <div class="chat-vid__by">Jordan Wise</div>
+         <div class="chat-vid__info">125.908 views <span class="seperate"></span>2 days ago</div>
+        </div>
+       </div>
+      </div>
+      <div class="chat-vid__button anim" style="--delay: .6s">See All related videos (32)</div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/skateboard-video-platform/src/script.js b/skateboard-video-platform/src/script.js
new file mode 100644
index 0000000..c524e85
--- /dev/null
+++ b/skateboard-video-platform/src/script.js
@@ -0,0 +1,55 @@
+$(function () {
+ $(".sidebar-link").click(function () {
+  $(".sidebar-link").removeClass("is-active");
+  $(this).addClass("is-active");
+ });
+});
+
+$(window)
+ .resize(function () {
+  if ($(window).width() > 1090) {
+   $(".sidebar").removeClass("collapse");
+  } else {
+   $(".sidebar").addClass("collapse");
+  }
+ })
+ .resize();
+
+const allVideos = document.querySelectorAll(".video");
+
+allVideos.forEach((v) => {
+ v.addEventListener("mouseover", () => {
+  const video = v.querySelector("video");
+  video.play();
+ });
+ v.addEventListener("mouseleave", () => {
+  const video = v.querySelector("video");
+  video.pause();
+ });
+});
+
+$(function () {
+ $(".logo, .logo-expand, .discover").on("click", function (e) {
+  $(".main-container").removeClass("show");
+  $(".main-container").scrollTop(0);
+ });
+ $(".trending, .video").on("click", function (e) {
+  $(".main-container").addClass("show");
+  $(".main-container").scrollTop(0);
+  $(".sidebar-link").removeClass("is-active");
+  $(".trending").addClass("is-active");
+ });
+
+ $(".video").click(function () {
+  var source = $(this).find("source").attr("src");
+  var title = $(this).find(".video-name").text();
+  var person = $(this).find(".video-by").text();
+  var img = $(this).find(".author-img").attr("src");
+  $(".video-stream video").stop();
+  $(".video-stream source").attr("src", source);
+  $(".video-stream video").load();
+  $(".video-p-title").text(title);
+  $(".video-p-name").text(person);
+  $(".video-detail .author-img").attr("src", img);
+ });
+});
diff --git a/skateboard-video-platform/src/style.scss b/skateboard-video-platform/src/style.scss
new file mode 100644
index 0000000..218b12d
--- /dev/null
+++ b/skateboard-video-platform/src/style.scss
@@ -0,0 +1,1097 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
+
+* {
+ outline: none;
+ box-sizing: border-box;
+}
+
+html {
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+}
+
+img {
+ max-width: 100%;
+}
+
+:root {
+ --body-font: "Inter", sans-serif;
+ --theme-bg: #1f1d2b;
+ --body-color: #808191;
+ --button-bg: #353340;
+ --border-color: rgb(128 129 145 / 24%);
+ --video-bg: #252936;
+ --delay: 0s;
+}
+
+body {
+ font-family: var(--body-font);
+ color: var(--body-color);
+ background-image: url("https://images.unsplash.com/photo-1445251836269-d158eaa028a6?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1951&q=80");
+ background-image: url(https://images.unsplash.com/photo-1520045892732-304bc3ac5d8e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80);
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-blend-mode: color-dodge;
+ background-color: rgba(18, 21, 39, 0.86);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ padding: 1em 2em;
+ width: 100%;
+ height: 100vh;
+ overflow: hidden;
+ &:before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+   163deg,
+   rgba(31, 29, 43, 1) 21%,
+   rgba(31, 29, 43, 0.3113620448179272) 64%
+  );
+  opacity: 0.4;
+  content: "";
+ }
+}
+
+.container {
+ background-color: var(--theme-bg);
+ max-width: 1240px;
+ max-height: 900px;
+ height: 95vh;
+ display: flex;
+ overflow: hidden;
+ width: 100%;
+ border-radius: 20px;
+ font-size: 15px;
+ font-weight: 500;
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.sidebar {
+ width: 220px;
+ height: 100%;
+ padding: 30px;
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ transition-duration: 0.2s;
+ overflow-y: auto;
+ overflow-x: hidden;
+ .logo {
+  display: none;
+  width: 30px;
+  height: 30px;
+  background-color: #22b07d;
+  flex-shrink: 0;
+  color: #fff;
+  align-items: center;
+  border-radius: 50%;
+  justify-content: center;
+
+  &-expand {
+   text-decoration: none;
+   color: #fff;
+   font-size: 19px;
+   font-weight: 600;
+   line-height: 34px;
+   position: sticky;
+   top: 0;
+   &:before {
+    content: "";
+    position: absolute;
+    top: -30px;
+    left: 0;
+    background: var(--theme-bg);
+    width: 200px;
+    height: 70px;
+    z-index: -1;
+   }
+  }
+ }
+ &-link {
+  &:hover,
+  &.is-active {
+   color: #fff;
+   font-weight: 600;
+   &:nth-child(2n + 1) {
+    svg {
+     background: #ff7551;
+    }
+   }
+   &:nth-child(2n) {
+    svg {
+     background: #32a7e2;
+    }
+   }
+   &:nth-child(2n + 3) {
+    svg {
+     background: #6c5ecf;
+    }
+   }
+  }
+ }
+ &.collapse {
+  width: 90px;
+  border-right: 1px solid var(--border-color);
+  .logo-expand,
+  .side-title {
+   display: none;
+  }
+  .logo {
+   display: flex;
+  }
+  .side-wrapper {
+   width: 30px;
+  }
+  .side-menu svg {
+   margin-right: 30px;
+  }
+ }
+}
+
+@keyframes bottom {
+ 0% {
+  transform: translateY(100px);
+  opacity: 0;
+ }
+
+ 100% {
+  opacity: 1;
+  transform: none;
+ }
+}
+
+.side-menu {
+ display: flex;
+ flex-direction: column;
+ a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--body-color);
+  & + a {
+   margin-top: 26px;
+  }
+ }
+ svg {
+  width: 30px;
+  padding: 8px;
+  border-radius: 10px;
+  background-color: var(--button-bg);
+  flex-shrink: 0;
+  margin-right: 16px;
+  &:hover {
+   color: #fff;
+  }
+ }
+}
+
+.side-title {
+ font-size: 12px;
+ letter-spacing: 0.07em;
+ margin-bottom: 24px;
+}
+
+.side-wrapper {
+ border-bottom: 1px solid var(--border-color);
+ padding: 36px 0;
+ width: 145px;
+ & + & {
+  border-bottom: none;
+ }
+}
+
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ padding: 30px;
+}
+
+.search-bar {
+ height: 34px;
+ display: flex;
+ width: 100%;
+ max-width: 450px;
+ input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: var(--button-bg);
+  border-radius: 8px;
+  font-family: var(--body-font);
+  font-size: 14px;
+  font-weight: 500;
+  padding: 0 40px 0 16px;
+  box-shadow: 0 0 0 2px rgba(134, 140, 160, 0.02);
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: 96%;
+  color: #fff;
+ }
+}
+
+.user {
+ &-settings {
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  flex-shrink: 0;
+  margin-left: auto;
+  svg {
+   width: 10px;
+   flex-shrink: 0;
+   @media screen and (max-width: 575px) {
+    display: none;
+   }
+  }
+  .notify {
+   position: relative;
+   svg {
+    width: 20px;
+    margin-left: 24px;
+    flex-shrink: 0;
+   }
+   .notification {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #ec5252;
+    position: absolute;
+    right: 1px;
+    border: 1px solid var(--theme-bg);
+    top: -2px;
+    @media screen and (max-width: 575px) {
+     display: none;
+    }
+   }
+  }
+ }
+ &-img {
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  object-fit: cover;
+  border-radius: 50%;
+ }
+ &-name {
+  color: #fff;
+  font-size: 14px;
+  margin: 0 6px 0 12px;
+  @media screen and (max-width: 575px) {
+   display: none;
+  }
+ }
+}
+
+.main-container {
+ display: flex;
+ flex-direction: column;
+ padding: 0 30px 30px;
+ flex-grow: 1;
+ overflow: auto;
+}
+
+.anim {
+ animation: bottom 0.8s var(--delay) both;
+}
+
+.main-header {
+ font-size: 30px;
+ color: #fff;
+ font-weight: 700;
+ padding-bottom: 20px;
+ position: sticky;
+ top: 0;
+ left: 0;
+ background: linear-gradient(
+  to bottom,
+  #1f1d2b 0%,
+  #1f1d2b 78%,
+  rgb(31 29 43 / 0%) 100%
+ );
+ z-index: 11;
+}
+
+.small-header {
+ font-size: 24px;
+ font-weight: 500;
+ color: #fff;
+ margin: 30px 0 20px;
+}
+
+.main {
+ &-blogs {
+  display: flex;
+  align-items: center;
+ }
+ &-blog__author {
+  display: flex;
+  align-items: center;
+  padding-bottom: 10px;
+  &.tips {
+   flex-direction: column-reverse;
+   align-items: flex-start;
+  }
+ }
+ &-blog__title {
+  font-size: 25px;
+  max-width: 12ch;
+  font-weight: 600;
+  letter-spacing: 1px;
+  color: #fff;
+  margin-bottom: 30px;
+ }
+ &-blog {
+  background-image: url("https://assets.codepen.io/3364143/skate-removebg-preview.png");
+  background-size: 80%;
+  background-position-x: 150px;
+  background-color: #31abbd;
+  display: flex;
+  flex-direction: column;
+  width: 65%;
+  padding: 30px;
+  border-radius: 20px;
+  align-self: stretch;
+  overflow: hidden;
+  position: relative;
+  transition: background 0.3s;
+  background-repeat: no-repeat;
+  & + & {
+   margin-left: 20px;
+   width: 35%;
+   background-image: url(https://c0.anyrgb.com/images/1020/945/venice-beach-2018-outdoors-sport-men-jumping-desert-sunset-extreme-sports-one-person-action.jpg);
+   background-color: unset;
+   background-position-x: 0;
+   background-size: 139%;
+   filter: saturate(1.4);
+   .author-img {
+    border-color: rgb(255 255 255 / 75%);
+    margin-top: 14px;
+   }
+   .author-img__wrapper svg {
+    border-color: #ffe6b2;
+    color: #e7bb7d;
+   }
+   .author-detail {
+    margin-left: 0;
+   }
+  }
+  @media screen and (max-width: 905px) {
+   &,
+   & + .main-blog {
+    width: 50%;
+    padding: 30px;
+   }
+   & {
+    background-size: cover;
+    background-position-x: center;
+    background-blend-mode: overlay;
+   }
+  }
+  &__time {
+   background: rgba(21, 13, 13, 0.44);
+   color: #fff;
+   padding: 3px 8px;
+   font-size: 12px;
+   border-radius: 6px;
+   position: absolute;
+   right: 20px;
+   bottom: 20px;
+  }
+ }
+}
+
+.author {
+ &-img {
+  width: 52px;
+  height: 52px;
+  border: 1px solid rgb(255 255 255 / 75%);
+  padding: 4px;
+  border-radius: 50%;
+  object-fit: cover;
+  &__wrapper {
+   position: relative;
+   flex-shrink: 0;
+   svg {
+    width: 16px;
+    padding: 2px;
+    background-color: #fff;
+    color: #0daabc;
+    border-radius: 50%;
+    border: 2px solid #0daabc;
+    position: absolute;
+    bottom: 5px;
+    right: 0;
+   }
+  }
+ }
+ &-name {
+  font-size: 15px;
+  color: #fff;
+  font-weight: 500;
+  margin-bottom: 8px;
+ }
+ &-info {
+  font-size: 13px;
+  font-weight: 400;
+  color: #fff;
+ }
+ &-detail {
+  margin-left: 16px;
+ }
+}
+
+.seperate {
+ width: 3px;
+ height: 3px;
+ display: inline-block;
+ vertical-align: middle;
+ border-radius: 50%;
+ background-color: #fff;
+ margin: 0 6px;
+ &.video-seperate {
+  background-color: var(--body-color);
+ }
+}
+
+.videos {
+ display: grid;
+ width: 100%;
+ grid-template-columns: repeat(4, 1fr);
+ grid-column-gap: 20px;
+ grid-row-gap: 20px;
+ @media screen and (max-width: 980px) {
+  grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+.video {
+ position: relative;
+ background-color: var(--video-bg);
+ border-radius: 20px;
+ overflow: hidden;
+ transition: 0.4s;
+ &-wrapper {
+  position: relative;
+ }
+ &-name {
+  color: #fff;
+  font-size: 16px;
+  line-height: 1.4em;
+  padding: 12px 20px 0;
+  overflow: hidden;
+  background-color: var(--video-bg);
+  z-index: 9;
+  position: relative;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+ }
+ &-view {
+  font-size: 12px;
+  padding: 12px 20px 20px;
+  background-color: var(--video-bg);
+  position: relative;
+ }
+ &-by {
+  transition: 0.3s;
+  padding: 20px 20px 0px;
+  display: inline-flex;
+  position: relative;
+  &:before {
+   content: "";
+   background-color: #22b07d;
+   width: 6px;
+   height: 6px;
+   border-radius: 50%;
+   position: absolute;
+   top: 26px;
+   right: 5px;
+  }
+  &.offline:before {
+   background-color: #ff7551;
+  }
+ }
+ &-time {
+  position: absolute;
+  background: rgba(21, 13, 13, 0.44);
+  color: rgb(255 255 255 / 85%);
+  padding: 3px 8px;
+  font-size: 12px;
+  border-radius: 6px;
+  top: 10px;
+  z-index: 1;
+  right: 8px;
+ }
+ &:hover {
+  video {
+   transform: scale(1.6);
+   transform-origin: center;
+  }
+  .video-time {
+   display: none;
+  }
+  .video-author {
+   bottom: -65px;
+   transform: scale(0.6);
+   right: -3px;
+   z-index: 10;
+  }
+  .video-by {
+   opacity: 0;
+  }
+ }
+ &-author {
+  position: absolute;
+  right: 10px;
+  transition: 0.4s;
+  bottom: -25px;
+  svg {
+   background-color: #0aa0f7;
+   color: #fff;
+   border-color: var(--video-bg);
+  }
+ }
+}
+
+video {
+ max-width: 100%;
+ width: 100%;
+ border-radius: 20px 20px 0 0;
+ display: block;
+ cursor: pointer;
+ transition: 0.4s;
+}
+
+.stream-area {
+ display: none;
+ @media screen and (max-width: 940px) {
+  flex-direction: column;
+  .video-stream {
+   width: 100%;
+  }
+  .chat-stream {
+   margin-left: 0;
+   margin-top: 30px;
+  }
+  .video-js.vjs-fluid {
+   min-height: 250px;
+  }
+  .msg__content {
+   max-width: 100%;
+  }
+ }
+}
+
+.show {
+ .stream-area {
+  display: flex;
+ }
+ .main-header,
+ .main-blogs,
+ .small-header,
+ .videos {
+  display: none;
+ }
+}
+
+.video-stream {
+ width: 65%;
+ object-fit: cover;
+ transition: 0.3s;
+ &:hover .video-js .vjs-big-play-button {
+  opacity: 1;
+ }
+}
+
+.video-p {
+ margin-right: 12px;
+ object-fit: cover;
+ flex-shrink: 0;
+ border-radius: 50%;
+ position: relative;
+ top: 0;
+ left: 0;
+ .author-img {
+  border: 0;
+ }
+ &-wrapper {
+  display: flex;
+  align-items: center;
+  .author-img {
+   border: 0;
+  }
+  svg {
+   width: 20px;
+   padding: 4px;
+  }
+  @media screen and (max-width: 650px) {
+   flex-direction: column;
+   .button-wrapper {
+    margin: 20px auto 0;
+   }
+   .video-p-detail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+   }
+   .video-p {
+    margin-right: 0
+   }
+  }
+ }
+ &-sub {
+  font-size: 12px;
+ }
+ &-title {
+  font-size: 24px;
+  color: #fff;
+  line-height: 1.4em;
+  margin: 16px 0 20px;
+ }
+ &-subtitle {
+  font-size: 14px;
+  line-height: 1.5em;
+  max-width: 60ch;
+  & + & {
+   margin-top: 16px;
+  }
+ }
+ &-name {
+  margin-bottom: 8px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  &:after {
+   content: "";
+   width: 6px;
+   height: 6px;
+   background-color: #22b07d;
+   border-radius: 50%;
+   margin-left: 8px;
+   display: inline-block;
+  }
+  &.offline:after {
+   background-color: #ff7551;
+  }
+ }
+}
+
+.video-content {
+ width: 100%;
+}
+
+.button-wrapper {
+ display: flex;
+ align-items: center;
+ margin-left: auto;
+}
+.like {
+ display: flex;
+ align-items: center;
+ background-color: var(--button-bg);
+ color: #fff;
+ border: 0;
+ font-family: var(--body-font);
+ border-radius: 8px;
+ padding: 10px 16px;
+ font-size: 14px;
+ cursor: pointer;
+ &.red {
+  background-color: #ea5f5f;
+ }
+ svg {
+  width: 18px;
+  flex-shrink: 0;
+  margin-right: 10px;
+  padding: 0;
+ }
+ & + & {
+  margin-left: 16px;
+ }
+}
+
+.video-stats {
+ margin-left: 30px;
+}
+
+.video-detail {
+ display: flex;
+ margin-top: 30px;
+ width: 100%;
+}
+
+.chat-header {
+ display: flex;
+ align-items: center;
+ padding: 20px 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: #fff;
+ position: sticky;
+ top: 0;
+ background-color: #252836;
+ left: 0;
+ z-index: 1;
+ border-bottom: 1px solid var(--border-color);
+ svg {
+  width: 15px;
+  margin-right: 6px;
+  flex-shrink: 0;
+ }
+ span {
+  margin-left: auto;
+  color: var(--body-color);
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+ }
+}
+
+.chat-stream {
+ flex-grow: 1;
+ margin-left: 30px;
+}
+
+.chat {
+ background-color: #252836;
+ border-radius: 20px;
+ padding: 0 20px;
+ max-height: 414px;
+ overflow: auto;
+ &-footer {
+  display: flex;
+  align-items: center;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  width: calc(100% + 20px);
+  padding-bottom: 12px;
+  background-color: #252836;
+  input {
+   width: 100%;
+   border: 0;
+   background-color: #2d303e;
+   border-radius: 20px;
+   font-size: 12px;
+   color: #fff;
+   margin-left: -10px;
+   padding: 12px 40px;
+   font-weight: 500;
+   font-family: var(--body-font);
+   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 12C2 6.48 6.47 2 12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10C6.47 22 2 17.52 2 12zm5.52 1.2c-.66 0-1.2-.54-1.2-1.2 0-.66.54-1.2 1.2-1.2.66 0 1.19.54 1.19 1.2 0 .66-.53 1.2-1.19 1.2zM10.8 12c0 .66.54 1.2 1.2 1.2.66 0 1.19-.54 1.19-1.2a1.194 1.194 0 10-2.39 0zm4.48 0a1.195 1.195 0 102.39 0 1.194 1.194 0 10-2.39 0z' fill='%236c6e78'/%3e%3c/svg%3e");
+   background-repeat: no-repeat;
+   background-size: 24px;
+   background-position: 8px;
+   &::placeholder {
+    color: #6c6e78;
+   }
+  }
+  &:before {
+   content: "";
+   position: absolute;
+   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M21.435 2.582a1.933 1.933 0 00-1.93-.503L3.408 6.759a1.92 1.92 0 00-1.384 1.522c-.142.75.355 1.704 1.003 2.102l5.033 3.094a1.304 1.304 0 001.61-.194l5.763-5.799a.734.734 0 011.06 0c.29.292.29.765 0 1.067l-5.773 5.8c-.428.43-.508 1.1-.193 1.62l3.075 5.083c.36.604.98.946 1.66.946.08 0 .17 0 .251-.01.78-.1 1.4-.634 1.63-1.39l4.773-16.075c.21-.685.02-1.43-.48-1.943z'/%3e%3c/svg%3e");
+   background-repeat: no-repeat;
+   background-size: 14px;
+   background-position: center;
+   width: 18px;
+   height: 18px;
+   background-color: #6c5ecf;
+   padding: 4px;
+   border-radius: 50%;
+   right: 16px;
+  }
+ }
+ &-vid {
+  &__title {
+   color: #fff;
+   font-size: 18px;
+  }
+  &__container {
+   margin-top: 40px;
+  }
+  &__wrapper {
+   display: flex;
+   align-items: center;
+   margin-top: 26px;
+  }
+  &__name {
+   color: #fff;
+   font-size: 14px;
+   line-height: 1.3em;
+   display: -webkit-box;
+   -webkit-line-clamp: 2;
+   overflow: hidden;
+   -webkit-box-orient: vertical;
+  }
+  &__img {
+   width: 100px;
+   height: 80px;
+   border-radius: 10px;
+   object-fit: cover;
+   object-position: right;
+   margin-right: 16px;
+   transition: 0.3s;
+   &:hover {
+    transform: scale(1.02);
+   }
+  }
+  &__content {
+   max-width: 20ch;
+  }
+  &__by,
+  &__info {
+   color: var(--body-color);
+   font-size: 13px;
+  }
+  &__by {
+   margin: 6px 0;
+  }
+  &__button {
+   background-color: #6c5ecf;
+   border: 0;
+   color: #fff;
+   font-size: 13px;
+   margin-top: 26px;
+   display: flex;
+   padding: 0 10px;
+   align-items: center;
+   justify-content: center;
+   height: 40px;
+   border-radius: 10px;
+   cursor: pointer;
+   transition: 0.3s;
+   &:hover {
+    background-color: #5847d0;
+   }
+  }
+ }
+}
+
+.message {
+ display: flex;
+ align-items: center;
+ margin-top: 18px;
+ &:last-child {
+  margin-bottom: 18px;
+ }
+ &-container .author-img__wrapper svg {
+  width: 15px;
+ }
+}
+
+.msg {
+ &__name {
+  font-size: 13px;
+ }
+ &__content {
+  line-height: 1.4em;
+  max-width: 26ch;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+ }
+}
+
+//player
+
+.video-js .vjs-control-bar {
+ display: flex;
+ align-items: center;
+}
+
+.vjs-poster {
+ background-size: 150%;
+}
+
+.video-js .vjs-control-bar {
+ width: 100%;
+ position: absolute;
+ bottom: 14px;
+ padding-left: 36px;
+ left: 14px;
+ width: calc(100% - 28px);
+ right: 0;
+ border-radius: 10px;
+ height: 4em;
+ background-color: #2b333f;
+ background-color: rgba(43, 51, 63, 0.7);
+ @media screen and (max-width: 625px) {
+  padding-left: 0;
+ }
+}
+
+.video-js:hover .vjs-big-play-button {
+ background-color: rgba(43, 51, 63, 0.5);
+}
+
+.video-js .vjs-big-play-button {
+ transition: 0.3s;
+ opacity: 0;
+ border: 0;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ &:hover {
+  background-color: rgba(43, 51, 63, 0.7);
+  border-color: transparent;
+ }
+}
+
+.vjs-play-control:after {
+ content: "LIVE";
+ position: absolute;
+ left: -66px;
+ top: 7px;
+ background-color: #8941e3;
+ height: 24px;
+ font-family: var(--body-font);
+ font-size: 10px;
+ padding: 0 12px 0 26px;
+ display: flex;
+ font-weight: 700;
+ letter-spacing: 0.03em;
+ align-items: center;
+ border-radius: 6px;
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-circle'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3c/svg%3e");
+ background-repeat: no-repeat;
+ background-size: 6px;
+ background-position: 12px;
+ @media screen and (max-width: 625px) {
+  display: none;
+ }
+}
+
+.vjs-menu-button-inline .vjs-menu {
+ top: 4px;
+}
+
+.video-js .vjs-control:before,
+.video-js .vjs-time-control {
+ line-height: 40px;
+}
+
+.video-js .vjs-tech {
+ object-fit: cover;
+}
+
+button.vjs-play-control.vjs-control.vjs-button {
+ margin-left: 40px;
+ @media screen and (max-width: 625px) {
+  margin-left: 0;
+ }
+}
+
+.vjs-icon-fullscreen-enter:before,
+.video-js .vjs-fullscreen-control:before {
+ content: "";
+ position: absolute;
+ display: block;
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.54 0h3.38c1.41 0 2.54 1.15 2.54 2.561V5.97c0 1.42-1.13 2.56-2.54 2.56H2.54C1.14 8.53 0 7.39 0 5.97V2.561C0 1.15 1.14 0 2.54 0zm0 11.47h3.38c1.41 0 2.54 1.14 2.54 2.56v3.41c0 1.41-1.13 2.56-2.54 2.56H2.54C1.14 20 0 18.85 0 17.44v-3.41c0-1.42 1.14-2.56 2.54-2.56zM17.46 0h-3.38c-1.41 0-2.54 1.15-2.54 2.561V5.97c0 1.42 1.13 2.56 2.54 2.56h3.38c1.4 0 2.54-1.14 2.54-2.56V2.561C20 1.15 18.86 0 17.46 0zm-3.38 11.47h3.38c1.4 0 2.54 1.14 2.54 2.56v3.41c0 1.41-1.14 2.56-2.54 2.56h-3.38c-1.41 0-2.54-1.15-2.54-2.56v-3.41c0-1.42 1.13-2.56 2.54-2.56z' fill='%23fff'/%3e%3c/svg%3e");
+ background-size: 11px;
+ background-position: center;
+ background-position-y: 14px;
+ background-repeat: no-repeat;
+ opacity: 0.6;
+}
+
+.vjs-playback-rate .vjs-playback-rate-value {
+ font-size: 1.1em;
+ line-height: 3.5em;
+ opacity: 0.6;
+ font-weight: 700;
+ font-family: var(--body-font);
+}
+
+.video-js .vjs-playback-rate {
+ width: 2.2em;
+}
+
+.video-js.vjs-fluid {
+ border-radius: 20px;
+ overflow: hidden;
+ min-height: 414px;
+}
+
+@media screen and (max-width: 735px) {
+ .main-blogs {
+  flex-wrap: wrap;
+ }
+ .main-blog,
+ .main-blog + .main-blog {
+  width: 100%;
+ }
+ .videos {
+  grid-template-columns: 1fr;
+ }
+ .main-blog + .main-blog {
+  margin-left: 0;
+  margin-top: 20px;
+  background-size: cover;
+ }
+}
+
+@media screen and (max-width: 475px) {
+ .main-blog__title {
+  font-size: 20px;
+ }
+ .author-name {
+  font-size: 14px;
+ }
+ .main-blog__author {
+  flex-direction: column-reverse;
+  align-items: flex-start;
+ }
+ .author-detail {
+  margin-left: 0;
+ }
+ .main-blog .author-img {
+  margin-top: 14px;
+ }
+ .main-container {
+  padding: 0 20px 20px;
+ }
+ .header {
+  padding: 20px;
+ }
+ .sidebar.collapse {
+  width: 40px;
+ }
+ .sidebar {
+  align-items: center;
+ }
+ body {
+  padding: 0;
+ }
+ .container {
+  height: 100vh;
+  border-radius: 0;
+  max-height: 100%;
+ }
+}
+
+
+::-webkit-scrollbar {
+ width: 6px;
+ border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: rgb(21 20 26 / 63%);
+ border-radius: 10px;
+}
\ No newline at end of file
diff --git a/slack-discord-cyberpunk-2077-redesign-w-preact/README.markdown b/slack-discord-cyberpunk-2077-redesign-w-preact/README.markdown
new file mode 100644
index 0000000..717ad52
--- /dev/null
+++ b/slack-discord-cyberpunk-2077-redesign-w-preact/README.markdown
@@ -0,0 +1,9 @@
+# Slack / Discord Cyberpunk 2077  redesign w/ Preact
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/hussard/pen/ExgbXMP](https://codepen.io/hussard/pen/ExgbXMP).
+
+Started to play Cyberpunk 2077 and it has been a great source of inspiration to start somewhere for my sci-fi inspired UI or component library. It is based off of the in-game menu and is a take of what a Slack or Discord app could look like with a sci-fi look and feel.
+
+That and also those days between Christmas and new year's eve are a blakhole, especially when there's a storm for 3-4 days straight in Paris, FR. So here's how I kept myself busy back at my family's place.
+
+I can see that pen evolve into a fully-fledge UI kit or component library. Wyh not. At least, it could be a start for a fun for something like a design system but sci-fi-esque... or an attempt of one... Until the next side project comes knocking.
diff --git a/slack-discord-cyberpunk-2077-redesign-w-preact/dist/index.html b/slack-discord-cyberpunk-2077-redesign-w-preact/dist/index.html
new file mode 100644
index 0000000..2240d98
--- /dev/null
+++ b/slack-discord-cyberpunk-2077-redesign-w-preact/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Slack / Discord Cyberpunk 2077  redesign w/ Preact</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&amp;display=swap'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=VT323&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="root"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/preact/10.5.7/preact.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/slack-discord-cyberpunk-2077-redesign-w-preact/dist/script.js b/slack-discord-cyberpunk-2077-redesign-w-preact/dist/script.js
new file mode 100644
index 0000000..01d1185
--- /dev/null
+++ b/slack-discord-cyberpunk-2077-redesign-w-preact/dist/script.js
@@ -0,0 +1,394 @@
+/** @jsx h */
+const { h, render } = preact;
+
+function App() {
+  return (
+    h("div", { className: "app-skeleton" },
+    h("header", { className: "app-header" },
+    h("div", { className: "app-header__anchor" },
+    h("span", { className: "app-header__anchor__text" }, "Night-City NetWire")),
+
+    h("nav", null,
+    h("ul", { className: "nav" },
+    FIXTURES.headerMenu.map((navItem, navItemIndex) =>
+    h(NavItem, { key: navItemIndex, navItem: navItem })))),
+
+
+
+    h("div", null)),
+
+    h("div", { className: "app-container" },
+    h("div", { className: "app-a" },
+    h("div", { className: "segment-topbar" },
+    h("div", { className: "segment-topbar__header" },
+    h(TextHeading3, { className: "segment-topbar__title" }, "Messages")),
+
+
+
+    h("div", { className: "segment-topbar__aside" },
+    h("div", { className: "button-toolbar" },
+    h("a", { className: "button button--primary button--size-lg" },
+    h(IconFeedAdd, { className: "button__icon" }))))),
+
+
+
+
+
+    h("form", { className: "form-search", onSubmit: e => e.preventDefault() },
+    h("div", { className: "form-group" },
+    h("div", { className: "form-control form-control--with-addon" },
+    h("input", { name: "query", placeholder: "Search...", type: "text" }),
+    h("div", { className: "form-control__addon form-control__addon--prefix" },
+    h(IconSearchSubmit, null))))),
+
+
+
+
+
+    h(NavSection, { renderTitle: props => h("h2", props, "Feeds") },
+    h(ChannelNav, {
+      activeChannel: { id: "a0cc", name: "Watson" },
+      channels: FIXTURES.feed })),
+
+
+
+    h(NavSection, { renderTitle: props => h("h2", props, "Direct") },
+    h(ConversationNav, { conversations: FIXTURES.conversation }))),
+
+
+    h("div", { className: "app-main" },
+    h("div", { className: "channel-feed" },
+    h("div", { className: "segment-topbar" },
+    h("div", { className: "segment-topbar__header" },
+    h(TextOverline, { className: "segment-topbar__overline" }, "NetWire_Seed: d869db7fe62fb07c25a0403ecaea55031744b5fb"),
+
+
+    h(TextHeading4, { className: "segment-topbar__title" },
+    h(ChannelLink, { name: "Watson" }))),
+
+
+    h("div", { className: "segment-topbar__aside" },
+    h("div", { className: "button-toolbar" },
+    h("a", { className: "button button--default" },
+    h(IconFeedMute, { className: "button__icon" })),
+
+    h("a", { className: "button button--default" },
+    h(IconFeedSettings, { className: "button__icon" })),
+
+    h("a", { className: "button button--default" },
+    h(IconMenuMore, { className: "button__icon" }))))),
+
+
+
+
+    h("div", { className: "channel-feed__body" },
+    h(FeedMessage, { message: FIXTURES.messages[0] }),
+    h(FeedMessage, { message: FIXTURES.messages[0] })),
+
+    h("div", { className: "channel-feed__footer" },
+    h("form", {
+      className: "channel-message-form",
+      action: "#",
+      onSubmit: e => e.preventDefault() },
+
+    h("div", { className: "form-group" },
+    h("label", { className: "form-label", for: "message" }, "Message"),
+
+
+    h("div", { className: "form-control" },
+    h("textarea", {
+      id: "message",
+      className: "form-control",
+      name: "message" }))),
+
+
+
+    h("div", { className: "form-footer" },
+    h(Button, { size: "xl", type: "submit", variant: "primary" }, "Send")))))),
+
+
+
+
+
+
+
+    h("div", { className: "app-b" },
+    h(Pad, null,
+    h(TextHeading3, { $as: "h4" }, "What's this?"),
+    h(TextParagraph1, null, "A ",
+    h("em", null, "fake"), " Slack or Discord type of app inspired by Cyberpunk 2077. This app is static, eg. not implementing much logic."),
+
+
+    h(TextParagraph1, null, "The goal is: showcasing a start of a UI kit. If you've played the game, you' might be able to pick-up some similarities with the in-game menus."))))));
+
+
+
+
+
+
+
+
+
+}
+
+function NavSection({ children, renderTitle }) {
+  return (
+    h("div", { className: "nav-section" },
+    h("div", { className: "nav-section__header" },
+    renderTitle({ className: "nav-section__title" })),
+
+    h("div", { className: "nav-section__body" }, children)));
+
+
+}
+
+function FeedMessage({ message }) {
+  return (
+    h("div", { className: "message" },
+    h("div", { className: "message__body" },
+    h("div", null,
+
+    "I got a gig lined up in Watson, no biggie. If you prove useful, expect more side gigs coming your way. I need a half-decent netrunner. Hit me up, provide credentials, eddies on completion.")),
+
+
+
+    h("div", { className: "message__footer" },
+    h("span", { className: "message__authoring" }, "V. M. Vargas"),
+    " - 11:04pm")));
+
+
+
+}
+
+function ChannelNav({ activeChannel = null, channels = [] }) {
+  return (
+    h("ul", { className: "nav" },
+    channels.map((channel) =>
+    h("li", { className: "nav__item" },
+    h("a", {
+      className: `nav__link ${
+      activeChannel && activeChannel.id === channel.id ?
+      "nav__link--active" :
+      ""
+      }`,
+      href: "#" },
+
+    h(ChannelLink, channel, name))))));
+
+
+
+
+
+}
+
+function ConversationNav({ activeConversation = null, conversations = [] }) {
+  return (
+    h("ul", { className: "nav" },
+    conversations.map((convo) =>
+    h("li", { className: "nav__item" },
+    h("a", {
+      className: `nav__link ${
+      activeConversation && activeConversation.id === convo.id ?
+      "nav__link--active" :
+      ""
+      }`,
+      href: "#" },
+
+    h(ConversationLink, { conversation: convo }))))));
+
+
+
+
+
+}
+
+function ChannelLink({ icon, name, unread }) {
+  return (
+    h("span", {
+      className: `channel-link ${
+      unread > 0 ? "conversation-link--unread" : ""
+      }` },
+
+    h("span", { className: "channel-link__icon" }, "#"),
+    h("span", { className: "channel-link__element" }, name),
+
+    unread > 0 &&
+    h("span", { className: "channel-link__element" },
+    h(Badge, null, unread))));
+
+
+
+
+}
+
+function ConversationLink({ conversation }) {
+  return (
+    h("span", {
+      className: `conversation-link ${
+      conversation.isOnline ? "conversation-link--online" : ""
+      } ${conversation.unread > 0 ? "conversation-link--unread" : ""}` },
+
+    conversation.members && conversation.members.length > 2 ?
+    h("span", { className: "conversation-link__icon" }) :
+
+    h("span", { className: "conversation-link__icon" }),
+
+
+    h("span", { className: "conversation-link__element" }, conversation.name),
+
+    conversation.unread > 0 &&
+    h("span", { className: "conversation-link__element" },
+    h(Badge, null, conversation.unread))));
+
+
+
+
+}
+
+function Badge({ children }) {
+  return h("span", { className: "badge" }, children);
+}
+
+function Button({
+  children,
+  type = "button",
+  size = "default",
+  variant = "default" })
+{
+  return (
+    h("button", {
+      className: `button ${variant ? `button--${variant}` : ""} ${
+      size ? `button--size-${size}` : ""
+      }`,
+      type: type },
+
+    h("span", { className: "button__content" }, children)));
+
+
+}
+
+function Pad({ children, renderCap = null }) {
+  return (
+    h("div", { className: "pad" },
+    h("div", { className: "pad__body" }, children)));
+
+
+}
+
+function NavItem({ navItem }) {
+  return (
+    h("li", { className: "nav__item" },
+    h("a", {
+      className: `nav__link ${navItem.isActive ? "nav__link--active" : ""}`,
+      href: "#" },
+
+    h("span", { className: "nav__link__element" }, navItem.text),
+    navItem.notificationCount > 0 &&
+    h("span", { className: "nav__link__element" },
+    h(Badge, null, navItem.notificationCount)))));
+
+
+
+
+
+}
+
+function MakeTextBase(classNameDefault, $asDefault) {
+  return ({ $as = null, children, className }) => {
+    const AsComponent = $as || $asDefault;
+
+    return (
+      h(AsComponent, { className: `${classNameDefault} ${className}` },
+      children));
+
+
+  };
+}
+
+const TextHeading1 = MakeTextBase("text-heading1", "h1");
+const TextHeading2 = MakeTextBase("text-heading2", "h2");
+const TextHeading3 = MakeTextBase("text-heading3", "h3");
+const TextHeading4 = MakeTextBase("text-heading4", "h4");
+const TextHeading5 = MakeTextBase("text-heading5", "h5");
+const TextHeading6 = MakeTextBase("text-heading6", "h6");
+const TextParagraph1 = MakeTextBase("text-paragraph1", "p");
+const TextOverline = MakeTextBase("segment-topbar__overline", "span");
+
+function MakeIcon(svg) {
+  return ({ className }) =>
+  h("svg", {
+    className: className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24" },
+
+  svg);
+
+
+}
+
+const IconFeedMute = MakeIcon(
+h("path", { d: "M18 9.5c2.481 0 4.5 1.571 4.5 3.503 0 1.674-1.703 3.48-4.454 3.48-.899 0-1.454-.156-2.281-.357-.584.358-.679.445-1.339.686.127-.646.101-.924.081-1.56-.583-.697-1.007-1.241-1.007-2.249 0-1.932 2.019-3.503 4.5-3.503zm0-1.5c-3.169 0-6 2.113-6 5.003 0 1.025.37 2.032 1.023 2.812.027.916-.511 2.228-.997 3.184 1.302-.234 3.15-.754 3.989-1.268.709.173 1.388.252 2.03.252 3.542 0 5.954-2.418 5.954-4.98.001-2.906-2.85-5.003-5.999-5.003zm-.668 6.5h-1.719v-.369l.938-1.361v-.008h-.869v-.512h1.618v.396l-.918 1.341v.008h.95v.505zm3.035 0h-2.392v-.505l1.306-1.784v-.011h-1.283v-.7h2.25v.538l-1.203 1.755v.012h1.322v.695zm-10.338 9.5c1.578 0 2.971-1.402 2.971-3h-6c0 1.598 1.45 3 3.029 3zm.918-7.655c-.615-1.001-.947-2.159-.947-3.342 0-3.018 2.197-5.589 5.261-6.571-.472-1.025-1.123-1.905-2.124-2.486-.644-.374-1.041-1.07-1.04-1.82v-.003c0-1.173-.939-2.123-2.097-2.123s-2.097.95-2.097 2.122v.003c.001.751-.396 1.446-1.041 1.82-4.667 2.712-1.985 11.715-6.862 13.306v1.749h9.782c.425-.834.931-1.764 1.165-2.655zm-.947-15.345c.552 0 1 .449 1 1 0 .552-.448 1-1 1s-1-.448-1-1c0-.551.448-1 1-1z" }));
+
+
+const IconFeedSettings = MakeIcon(
+h("path", { d: "M6 16h-6v-3h6v3zm-2-5v-10h-2v10h2zm-2 7v5h2v-5h-2zm13-7h-6v-3h6v3zm-2-5v-5h-2v5h2zm-2 7v10h2v-10h-2zm13 3h-6v-3h6v3zm-2-5v-10h-2v10h2zm-2 7v5h2v-5h-2z" }));
+
+
+const IconMenuMore = MakeIcon(
+h("path", { d: "M12 18c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zm0-9c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zm0-9c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3z" }));
+
+
+const IconFeedAdd = MakeIcon(
+h("path", { d: "M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" }));
+
+
+const IconSearchSubmit = MakeIcon(
+h("path", { d: "M21.172 24l-7.387-7.387c-1.388.874-3.024 1.387-4.785 1.387-4.971 0-9-4.029-9-9s4.029-9 9-9 9 4.029 9 9c0 1.761-.514 3.398-1.387 4.785l7.387 7.387-2.828 2.828zm-12.172-8c3.859 0 7-3.14 7-7s-3.141-7-7-7-7 3.14-7 7 3.141 7 7 7z" }));
+
+
+const IconShop = MakeIcon(
+h("path", { d: "M16.53 7l-.564 2h-15.127l-.839-2h16.53zm-14.013 6h12.319l.564-2h-13.722l.839 2zm5.983 5c-.828 0-1.5.672-1.5 1.5 0 .829.672 1.5 1.5 1.5s1.5-.671 1.5-1.5c0-.828-.672-1.5-1.5-1.5zm11.305-15l-3.432 12h-13.017l.839 2h13.659l3.474-12h1.929l.743-2h-4.195zm-6.305 15c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5c0-.828-.672-1.5-1.5-1.5z" }));
+
+
+const FIXTURES = {
+  headerMenu: [
+  { notificationCount: 0, text: "Home" },
+  { isActive: true, notificationCount: 11, text: "Messages" },
+  { notificationCount: 0, text: "Shop" },
+  { notificationCount: 0, text: "Map" },
+  { notificationCount: 0, text: "Files" }],
+
+  feed: [
+  { id: "5ba5", name: "Afterlife", unread: 3 },
+  { id: "4f22", name: "NCPD-Gigs" },
+  { id: "fee9", name: "Pacifica" },
+  { id: "a0cc", name: "Watson" },
+  { id: "dee3", name: "_T_SQUAD", isPrivate: true, unread: 2 }],
+
+  conversation: [
+  {
+    id: "cc23",
+    isOnline: true,
+    unread: 5,
+    name: "Rogue Amendiares" },
+
+  { id: "95b4", isOnline: true, name: "Takemura", unread: 1 },
+  { id: "10cf", name: "Wakado O., Regina Jones" },
+  { id: "e466", name: "Dexter DeShawn" },
+  { id: "ca0b", name: "Megabuilding H10 Administration" }],
+
+  messages: [
+  {
+    id: "fd0cf",
+    content:
+    "I got a gig lined up in Watson, no biggie. If you prove useful, expect more side gigs coming your way. I need a half-decent netrunner. Hit me up, provide credentials, eddies on completion.",
+    dateTime: "2077-10-09T11:04:57Z",
+    author: {
+      id: "d12c",
+      name: "V.M. Vargas" } }] };
+
+
+
+
+
+render(h(App, null), document.getElementById("root"));
\ No newline at end of file
diff --git a/slack-discord-cyberpunk-2077-redesign-w-preact/dist/style.css b/slack-discord-cyberpunk-2077-redesign-w-preact/dist/style.css
new file mode 100644
index 0000000..c76a323
--- /dev/null
+++ b/slack-discord-cyberpunk-2077-redesign-w-preact/dist/style.css
@@ -0,0 +1,582 @@
+* {
+  box-sizing: border-box;
+  position: relative;
+}
+
+html,
+body {
+  --colors-bg--300: #1e181e;
+  --colors-bg--500: #191a1e;
+  --colors-primary--200: #f4908b;
+  --colors-primary--300: #ea6f69;
+  --colors-primary--500: #e8615a;
+  --colors-primary--600: #9c3230;
+  --colors-primary--700: #5e2122;
+  --colors-primary--800: #451717;
+  --colors-primary--900: #3c181a;
+  --colors-secondary--500: #2be4ea;
+  --colors-secondary--900: #295459;
+  --colors-tertiary--500: #fed33f;
+  --colors-on_bg--500: var(--colors-primary--500);
+  --colors-on_tertiary--500: var(--colors-bg--300);
+  --colors-on_primary--500: var(--colors-primary--200);
+  --colors-active--500: #2bfea0;
+  --fonts-primary: "Rajdhani", sans-serif;
+  --fonts-secondary: "VT323", monospace;
+  --ui-glow: 0 0 5px var(--colors-primary--500);
+  --ui-glow-borders--500: 0 0 3px var(--colors-primary--500);
+  --ui-glow-color: currentcolor;
+  --ui-glow-text: -9px -6px 40px var(--ui-glow-color);
+  --ui-glow-text--dimmed: -9px -6px 40px var(--ui-glow-color);
+  --ui-elevation--1: 2px 2px 0 rgba(0, 0, 0, 0.8);
+  --ui-notch-amount: 1rem;
+  --ui-notch-hypotenuse: 22.627416px; /* hypothenuse of --ui-notch-amount */
+  --ui-notch-path: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - var(--ui-notch-amount) + 2px),
+    calc(100% - var(--ui-notch-amount) + 2px) 100%,
+    0 100%
+  );
+
+  background-color: var(--colors-bg--500);
+  background-image: radial-gradient(
+    ellipse at 33% 10%,
+    #461616 0%,
+    transparent 75%
+  );
+  background-repeat: no-repeat;
+  color: var(--colors-on_bg--500);
+  font-family: var(--fonts-primary);
+  font-size: 100%;
+  line-height: 1.4;
+  margin: 0;
+  min-height: 100vh;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.app-skeleton {
+  padding: 0 1rem;
+  height: 100vh;
+  min-width: 1024px;
+}
+
+.app-header {
+  align-items: center;
+  display: flex;
+  grid-area: header;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  padding: 1rem 0 0.5rem 0;
+}
+
+.app-header::after {
+  background-color: var(--colors-primary--500);
+  box-shadow: var(--ui-glow);
+  bottom: 0;
+  content: "";
+  height: 2px;
+  position: absolute;
+  left: 0;
+  width: 100%;
+}
+
+.app-header__anchor {
+  padding: 0.5rem;
+}
+
+.app-header__anchor__text {
+  font-family: var(--fonts-secondary);
+  font-size: 1.25rem;
+  letter-spacing: 0.035rem;
+  text-shadow: var(--ui-glow-text);
+  text-transform: uppercase;
+}
+
+.app-container {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-areas: "a main main main side";
+  grid-template-columns: 280px 1fr 1fr 1fr 1fr;
+  height: calc(100% - 5.25rem);
+}
+
+.app-a {
+  grid-area: a;
+  height: 100%;
+}
+
+.app-b {
+  grid-area: side;
+}
+
+.app-main {
+  grid-area: main;
+}
+
+.nav-section {
+  padding-bottom: 0.25rem;
+}
+
+.nav-section__header {
+  background-color: var(--colors-bg--300);
+  border: 1px solid #5d2322;
+  border-radius: 3px;
+  margin-bottom: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.nav-section__body {
+  padding-left: 1rem;
+}
+
+.nav-section__title {
+  color: #2be4ea;
+  font-size: 1rem;
+  margin: 0;
+}
+
+.nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav__link {
+  line-height: 1.4rem;
+}
+
+.nav__link__element + .nav__link__element {
+  margin-left: 0.5rem;
+}
+
+.app-header .nav {
+  align-items: flex-end;
+  display: flex;
+}
+
+.app-header .nav__item + .nav__item {
+  margin-left: 3rem;
+}
+
+.app-header .nav__link {
+  align-items: baseline;
+  display: flex;
+  text-shadow: var(--ui-glow-text);
+  text-transform: uppercase;
+  transition: transform 0.25s;
+}
+
+.app-header .nav__link:hover {
+  color: var(--colors-primary--200);
+}
+
+.app-header .nav__link.nav__link--active {
+  color: var(--colors-secondary--500);
+  font-size: 1.25rem;
+  transform: none;
+}
+
+.nav-section .nav__item + .nav__item {
+  margin-top: 0.125rem;
+}
+
+.nav-section .nav__link {
+  border: 1px solid transparent;
+  border-radius: 3px;
+  color: var(--colors-secondary--500);
+  display: block;
+  font-family: var(--fonts-primary);
+  padding: 0.5rem 0.75rem;
+  transition: background-color 0.25s;
+}
+
+.nav-section .nav__link:focus,
+.nav-section .nav__link:hover {
+  background-color: var(--colors-bg--300);
+  border: 1px solid #5d2322;
+}
+
+.nav-section .nav__link--active,
+.nav-section .nav__link.nav__link--active:focus,
+.nav-section .nav__link.nav__link--active:hover {
+  background-color: #391419;
+  border-color: #9c3230;
+}
+
+.channel-link,
+.conversation-link {
+  align-items: center;
+  display: flex;
+}
+
+.channel-link__icon,
+.conversation-link__icon {
+  margin-right: 0.75rem;
+}
+
+.channel-link__element + .channel-link__element,
+.conversation-link__element + .conversation-link__element {
+  margin-left: 0.75rem;
+}
+
+.conversation-link__icon {
+}
+
+.conversation-link__icon::after {
+  background-color: var(--colors-primary--500);
+  border-radius: 50%;
+  content: "";
+  display: block;
+  height: 0.5em;
+  width: 0.5em;
+}
+
+.conversation-link--online .conversation-link__icon::after {
+  background-color: var(--colors-active--500);
+}
+
+.channel-link--unread,
+.conversation-link--unread {
+  font-weight: bold;
+}
+
+.badge {
+  border: 1.5px solid var(--colors-tertiary--500);
+  border-radius: 3px;
+  color: var(--colors-tertiary--500);
+  display: inline-block;
+  font-size: 0.92rem;
+  font-weight: normal;
+  line-height: 1;
+  padding: 0.15em 0.34em;
+  vertical-align: middle;
+}
+
+.slate__title {
+  font-size: 1.125rem;
+  margin: 0;
+}
+
+.pad {
+  background-color: var(--colors-bg--300);
+  border: 2px solid var(--colors-primary--600);
+  -webkit-clip-path: var(--ui-notch-path);
+          clip-path: var(--ui-notch-path);
+}
+
+.pad__body {
+  padding: 0.75rem;
+  padding-bottom: var(--ui-notch-amount);
+}
+
+.pad::before {
+  background-color: var(--colors-primary--600);
+  bottom: 5px;
+  content: "";
+  display: block;
+  height: 3px; /* bigger to compensate transform */
+  position: absolute;
+  right: -6px;
+  top: auto;
+  transform: rotate(-45deg);
+  width: var(--ui-notch-hypotenuse);
+  z-index: 100;
+}
+
+/* @component: form-* */
+input,
+textarea {
+}
+
+.form-label {
+  background-color: var(--colors-primary--600);
+  color: var(--colors-on_primary--500);
+  font-family: var(--fonts-secondary);
+  font-size: 0.92rem;
+  display: inline-block;
+  padding: 0.125em 0.75em;
+  padding-right: 2em;
+  letter-spacing: 0.065em;
+  line-height: 1;
+  text-transform: uppercase;
+  vertical-align: bottom; /* inline-block fix */
+  -webkit-clip-path: polygon(
+    0.25em 0,
+    calc(100% - 1em) 0,
+    100% 100%,
+    0.33em 100%,
+    0 100%,
+    0 0.25em
+  );
+          clip-path: polygon(
+    0.25em 0,
+    calc(100% - 1em) 0,
+    100% 100%,
+    0.33em 100%,
+    0 100%,
+    0 0.25em
+  );
+}
+
+.form-control {
+  background-color: var(--colors-bg--300);
+  border: 1px solid var(--colors-primary--600);
+  -webkit-clip-path: var(--ui-notch-path);
+          clip-path: var(--ui-notch-path);
+  padding-right: 0.5rem;
+}
+
+.form-control::before {
+  background-color: var(--colors-primary--600);
+  bottom: 5px;
+  content: "";
+  display: block;
+  height: 3px; /* bigger to compensate transform */
+  position: absolute;
+  right: -6px;
+  top: auto;
+  transform: rotate(-45deg);
+  width: var(--ui-notch-hypotenuse);
+  z-index: 100;
+}
+
+.form-control input,
+.form-control textarea {
+  background-color: transparent;
+  border: 0;
+  box-shadow: none;
+  color: var(--colors-primary--500);
+  font-family: var(--fonts-primary);
+  font-size: 1rem;
+  letter-spacing: 0.045em;
+  outline: none;
+  padding: 0.5rem;
+  resize: none;
+  width: 100%;
+}
+
+.form-control--with-addon {
+  align-items: center;
+  display: flex;
+}
+
+.form-control--with-addon .button,
+.form-control--with-addon .button:hover {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.form-control__addon {
+  display: inline-block;
+  padding: 0.45rem;
+}
+
+.form-control__addon svg {
+  display: block;
+  fill: currentcolor;
+  height: 1.125rem;
+  opacity: 0.66;
+  width: 1.125rem;
+}
+
+.form-control__addon--prefix {
+  order: -1;
+}
+
+.form-control__addon--suffix {
+  order: 1;
+}
+
+.form-search {
+  margin-bottom: 0.75rem;
+}
+
+.message {
+  padding-bottom: 1rem;
+}
+
+.message__body {
+  background-color: var(--colors-bg--300);
+  border: 1px solid var(--colors-tertiary--500);
+  border-radius: 3px;
+  color: var(--colors-tertiary--500);
+  padding: 0.75rem;
+}
+
+.message__footer {
+  color: var(--colors-tertiary--500);
+  font-size: 0.85rem;
+  margin-top: 0.25rem;
+}
+
+/* @component: button */
+.button {
+  background-color: transparent;
+  border: 1px solid var(--colors-primary--500);
+  border-radius: 2px;
+  cursor: pointer;
+  color: var(--colors-primary--500);
+  display: inline-block;
+  font-family: var(--fonts-primary);
+  letter-spacing: 0.045em;
+  padding: 0.45rem;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+.button:hover {
+  background-color: var(--colors-primary--800);
+  color: var(--colors-on_primary--500);
+}
+
+.button__icon {
+  display: block;
+  height: 1.125rem;
+  line-height: 1;
+  vertical-align: top;
+  width: 1.125rem;
+}
+
+.button__icon {
+  fill: currentcolor;
+}
+
+.button__content {
+  display: inline-block;
+  z-index: 2;
+}
+
+.button--size-lg,
+.button--size-xl {
+  border-width: 2px;
+  -webkit-clip-path: var(--ui-notch-path);
+          clip-path: var(--ui-notch-path);
+  padding: 0.55rem 0.7rem 0.7rem 0.55rem;
+}
+
+.button--size-lg::before,
+.button--size-xl::before {
+  background-color: currentcolor;
+  bottom: 5px;
+  content: "";
+  display: block;
+  height: 3px; /* bigger to compensate transform */
+  position: absolute;
+  right: -6px;
+  top: auto;
+  transform: rotate(-45deg);
+  width: var(--ui-notch-hypotenuse);
+  z-index: 100;
+}
+
+.button--size-xl {
+  padding: 0.55rem 1.5rem 1.5rem 0.55rem;
+}
+
+.button--primary {
+  color: var(--colors-secondary--500);
+  border-color: var(--colors-secondary--500);
+}
+
+.button--primary:hover {
+  background-color: var(--colors-secondary--900);
+  color: var(--colors-secondary--500);
+}
+
+.button-toolbar {
+  display: flex;
+}
+
+.button-toolbar .button {
+  display: block;
+  border-radius: 0;
+}
+
+.button-toolbar .button + .button {
+  margin-left: -1px;
+}
+
+.channel-feed {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.channel-feed__body {
+  flex-grow: 1;
+}
+
+.channel-feed__footer {
+}
+
+.channel-message-form {
+  align-items: flex-start;
+  display: flex;
+  padding-bottom: 1rem;
+}
+
+.channel-message-form .form-group {
+  flex: 1;
+}
+
+.channel-message-form .form-footer {
+  margin-left: 1rem;
+  margin-top: 1.42rem;
+}
+
+.channel-message-form .form-control {
+  width: 100%;
+}
+
+.text-heading1,
+.text-heading2,
+.text-heading3,
+.text-heading4,
+.text-heading5,
+.text-heading6,
+.text-paragraph1 {
+  margin: 0;
+}
+
+.segment-topbar {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  min-height: 3.5rem;
+}
+
+.segment-topbar::after {
+  background-color: var(--colors-primary--500);
+  box-shadow: var(--ui-glow);
+  bottom: 0;
+  content: "";
+  height: 1px;
+  position: absolute;
+  left: 0;
+  width: 100%;
+}
+
+.segment-topbar__header {
+  padding: 0.5rem 0.5rem;
+  padding-top: 0;
+}
+
+.segment-topbar__overline {
+  font-family: var(--fonts-secondary);
+}
+
+.segment-topbar__title {
+  letter-spacing: 0.035em;
+  text-shadow: var(--ui-glow-text--dimmed);
+  text-transform: uppercase;
+}
+
+.segment-topbar__aside {
+  align-self: flex-start;
+  box-shadow: -6px -4px 24px rgba(156, 50, 48, 0.4);
+}
\ No newline at end of file
diff --git a/slack-discord-cyberpunk-2077-redesign-w-preact/license.txt b/slack-discord-cyberpunk-2077-redesign-w-preact/license.txt
new file mode 100644
index 0000000..3e8fc76
--- /dev/null
+++ b/slack-discord-cyberpunk-2077-redesign-w-preact/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Hussard (https://codepen.io/hussard/pen/ExgbXMP)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/slack-discord-cyberpunk-2077-redesign-w-preact/src/index.html b/slack-discord-cyberpunk-2077-redesign-w-preact/src/index.html
new file mode 100644
index 0000000..98499e9
--- /dev/null
+++ b/slack-discord-cyberpunk-2077-redesign-w-preact/src/index.html
@@ -0,0 +1 @@
+<div id="root"></div>
\ No newline at end of file
diff --git a/slack-discord-cyberpunk-2077-redesign-w-preact/src/script.babel b/slack-discord-cyberpunk-2077-redesign-w-preact/src/script.babel
new file mode 100644
index 0000000..bdc2e1e
--- /dev/null
+++ b/slack-discord-cyberpunk-2077-redesign-w-preact/src/script.babel
@@ -0,0 +1,394 @@
+/** @jsx h */
+const { h, render } = preact;
+
+function App() {
+  return (
+    <div className="app-skeleton">
+      <header className="app-header">
+        <div className="app-header__anchor">
+          <span className="app-header__anchor__text">Night-City NetWire</span>
+        </div>
+        <nav>
+          <ul className="nav">
+            {FIXTURES.headerMenu.map((navItem, navItemIndex) => (
+              <NavItem key={navItemIndex} navItem={navItem} />
+            ))}
+          </ul>
+        </nav>
+        <div />
+      </header>
+      <div className="app-container">
+        <div className="app-a">
+          <div className="segment-topbar">
+            <div className="segment-topbar__header">
+              <TextHeading3 className="segment-topbar__title">
+                Messages
+              </TextHeading3>
+            </div>
+            <div className="segment-topbar__aside">
+              <div className="button-toolbar">
+                <a className="button button--primary button--size-lg">
+                  <IconFeedAdd className="button__icon" />
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <form className="form-search" onSubmit={(e) => e.preventDefault()}>
+            <div className="form-group">
+              <div className="form-control form-control--with-addon">
+                <input name="query" placeholder="Search..." type="text" />
+                <div className="form-control__addon form-control__addon--prefix">
+                  <IconSearchSubmit />
+                </div>
+              </div>
+            </div>
+          </form>
+
+          <NavSection renderTitle={(props) => <h2 {...props}>Feeds</h2>}>
+            <ChannelNav
+              activeChannel={{ id: "a0cc", name: "Watson" }}
+              channels={FIXTURES.feed}
+            />
+          </NavSection>
+
+          <NavSection renderTitle={(props) => <h2 {...props}>Direct</h2>}>
+            <ConversationNav conversations={FIXTURES.conversation} />
+          </NavSection>
+        </div>
+        <div className="app-main">
+          <div className="channel-feed">
+            <div className="segment-topbar">
+              <div className="segment-topbar__header">
+                <TextOverline className="segment-topbar__overline">
+                  NetWire_Seed: d869db7fe62fb07c25a0403ecaea55031744b5fb
+                </TextOverline>
+                <TextHeading4 className="segment-topbar__title">
+                  <ChannelLink name="Watson" />
+                </TextHeading4>
+              </div>
+              <div className="segment-topbar__aside">
+                <div className="button-toolbar">
+                  <a className="button button--default">
+                    <IconFeedMute className="button__icon" />
+                  </a>
+                  <a className="button button--default">
+                    <IconFeedSettings className="button__icon" />
+                  </a>
+                  <a className="button button--default">
+                    <IconMenuMore className="button__icon" />
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div className="channel-feed__body">
+              <FeedMessage message={FIXTURES.messages[0]} />
+              <FeedMessage message={FIXTURES.messages[0]} />
+            </div>
+            <div className="channel-feed__footer">
+              <form
+                className="channel-message-form"
+                action="#"
+                onSubmit={(e) => e.preventDefault()}
+              >
+                <div className="form-group">
+                  <label className="form-label" for="message">
+                    Message
+                  </label>
+                  <div className="form-control">
+                    <textarea
+                      id="message"
+                      className="form-control"
+                      name="message"
+                    ></textarea>
+                  </div>
+                </div>
+                <div className="form-footer">
+                  <Button size="xl" type="submit" variant="primary">
+                    Send
+                  </Button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+        <div className="app-b">
+          <Pad>
+            <TextHeading3 $as="h4">What's this?</TextHeading3>
+            <TextParagraph1>
+              A <em>fake</em> Slack or Discord type of app inspired by Cyberpunk
+              2077. This app is static, eg. not implementing much logic.
+            </TextParagraph1>
+            <TextParagraph1>
+              The goal is: showcasing a start of a UI kit. If you've played the
+              game, you' might be able to pick-up some similarities with the
+              in-game menus.
+            </TextParagraph1>
+          </Pad>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function NavSection({ children, renderTitle }) {
+  return (
+    <div className="nav-section">
+      <div className="nav-section__header">
+        {renderTitle({ className: "nav-section__title" })}
+      </div>
+      <div className="nav-section__body">{children}</div>
+    </div>
+  );
+}
+
+function FeedMessage({ message }) {
+  return (
+    <div className="message">
+      <div className="message__body">
+        <div>
+          {
+            "I got a gig lined up in Watson, no biggie. If you prove useful, expect more side gigs coming your way. I need a half-decent netrunner. Hit me up, provide credentials, eddies on completion."
+          }
+        </div>
+      </div>
+      <div className="message__footer">
+        <span className="message__authoring">V. M. Vargas</span>
+        {" - 11:04pm"}
+      </div>
+    </div>
+  );
+}
+
+function ChannelNav({ activeChannel = null, channels = [] }) {
+  return (
+    <ul className="nav">
+      {channels.map((channel) => (
+        <li className="nav__item">
+          <a
+            className={`nav__link ${
+              activeChannel && activeChannel.id === channel.id
+                ? "nav__link--active"
+                : ""
+            }`}
+            href="#"
+          >
+            <ChannelLink {...channel}>{name}</ChannelLink>
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function ConversationNav({ activeConversation = null, conversations = [] }) {
+  return (
+    <ul className="nav">
+      {conversations.map((convo) => (
+        <li className="nav__item">
+          <a
+            className={`nav__link ${
+              activeConversation && activeConversation.id === convo.id
+                ? "nav__link--active"
+                : ""
+            }`}
+            href="#"
+          >
+            <ConversationLink conversation={convo} />
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function ChannelLink({ icon, name, unread }) {
+  return (
+    <span
+      className={`channel-link ${
+        unread > 0 ? "conversation-link--unread" : ""
+      }`}
+    >
+      <span className="channel-link__icon">#</span>
+      <span className="channel-link__element">{name}</span>
+
+      {unread > 0 && (
+        <span className="channel-link__element">
+          <Badge>{unread}</Badge>
+        </span>
+      )}
+    </span>
+  );
+}
+
+function ConversationLink({ conversation }) {
+  return (
+    <span
+      className={`conversation-link ${
+        conversation.isOnline ? "conversation-link--online" : ""
+      } ${conversation.unread > 0 ? "conversation-link--unread" : ""}`}
+    >
+      {conversation.members && conversation.members.length > 2 ? (
+        <span className="conversation-link__icon" />
+      ) : (
+        <span className="conversation-link__icon" />
+      )}
+
+      <span className="conversation-link__element">{conversation.name}</span>
+
+      {conversation.unread > 0 && (
+        <span className="conversation-link__element">
+          <Badge>{conversation.unread}</Badge>
+        </span>
+      )}
+    </span>
+  );
+}
+
+function Badge({ children }) {
+  return <span className="badge">{children}</span>;
+}
+
+function Button({
+  children,
+  type = "button",
+  size = "default",
+  variant = "default"
+}) {
+  return (
+    <button
+      className={`button ${variant ? `button--${variant}` : ""} ${
+        size ? `button--size-${size}` : ""
+      }`}
+      type={type}
+    >
+      <span className="button__content">{children}</span>
+    </button>
+  );
+}
+
+function Pad({ children, renderCap = null }) {
+  return (
+    <div className="pad">
+      <div className="pad__body">{children}</div>
+    </div>
+  );
+}
+
+function NavItem({ navItem }) {
+  return (
+    <li className="nav__item">
+      <a
+        className={`nav__link ${navItem.isActive ? "nav__link--active" : ""}`}
+        href="#"
+      >
+        <span className="nav__link__element">{navItem.text}</span>
+        {navItem.notificationCount > 0 && (
+          <span className="nav__link__element">
+            <Badge>{navItem.notificationCount}</Badge>
+          </span>
+        )}
+      </a>
+    </li>
+  );
+}
+
+function MakeTextBase(classNameDefault, $asDefault) {
+  return ({ $as = null, children, className }) => {
+    const AsComponent = $as || $asDefault;
+
+    return (
+      <AsComponent className={`${classNameDefault} ${className}`}>
+        {children}
+      </AsComponent>
+    );
+  };
+}
+
+const TextHeading1 = MakeTextBase("text-heading1", "h1");
+const TextHeading2 = MakeTextBase("text-heading2", "h2");
+const TextHeading3 = MakeTextBase("text-heading3", "h3");
+const TextHeading4 = MakeTextBase("text-heading4", "h4");
+const TextHeading5 = MakeTextBase("text-heading5", "h5");
+const TextHeading6 = MakeTextBase("text-heading6", "h6");
+const TextParagraph1 = MakeTextBase("text-paragraph1", "p");
+const TextOverline = MakeTextBase("segment-topbar__overline", "span");
+
+function MakeIcon(svg) {
+  return ({ className }) => (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+    >
+      {svg}
+    </svg>
+  );
+}
+
+const IconFeedMute = MakeIcon(
+  <path d="M18 9.5c2.481 0 4.5 1.571 4.5 3.503 0 1.674-1.703 3.48-4.454 3.48-.899 0-1.454-.156-2.281-.357-.584.358-.679.445-1.339.686.127-.646.101-.924.081-1.56-.583-.697-1.007-1.241-1.007-2.249 0-1.932 2.019-3.503 4.5-3.503zm0-1.5c-3.169 0-6 2.113-6 5.003 0 1.025.37 2.032 1.023 2.812.027.916-.511 2.228-.997 3.184 1.302-.234 3.15-.754 3.989-1.268.709.173 1.388.252 2.03.252 3.542 0 5.954-2.418 5.954-4.98.001-2.906-2.85-5.003-5.999-5.003zm-.668 6.5h-1.719v-.369l.938-1.361v-.008h-.869v-.512h1.618v.396l-.918 1.341v.008h.95v.505zm3.035 0h-2.392v-.505l1.306-1.784v-.011h-1.283v-.7h2.25v.538l-1.203 1.755v.012h1.322v.695zm-10.338 9.5c1.578 0 2.971-1.402 2.971-3h-6c0 1.598 1.45 3 3.029 3zm.918-7.655c-.615-1.001-.947-2.159-.947-3.342 0-3.018 2.197-5.589 5.261-6.571-.472-1.025-1.123-1.905-2.124-2.486-.644-.374-1.041-1.07-1.04-1.82v-.003c0-1.173-.939-2.123-2.097-2.123s-2.097.95-2.097 2.122v.003c.001.751-.396 1.446-1.041 1.82-4.667 2.712-1.985 11.715-6.862 13.306v1.749h9.782c.425-.834.931-1.764 1.165-2.655zm-.947-15.345c.552 0 1 .449 1 1 0 .552-.448 1-1 1s-1-.448-1-1c0-.551.448-1 1-1z" />
+);
+
+const IconFeedSettings = MakeIcon(
+  <path d="M6 16h-6v-3h6v3zm-2-5v-10h-2v10h2zm-2 7v5h2v-5h-2zm13-7h-6v-3h6v3zm-2-5v-5h-2v5h2zm-2 7v10h2v-10h-2zm13 3h-6v-3h6v3zm-2-5v-10h-2v10h2zm-2 7v5h2v-5h-2z" />
+);
+
+const IconMenuMore = MakeIcon(
+  <path d="M12 18c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zm0-9c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zm0-9c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3z" />
+);
+
+const IconFeedAdd = MakeIcon(
+  <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
+);
+
+const IconSearchSubmit = MakeIcon(
+  <path d="M21.172 24l-7.387-7.387c-1.388.874-3.024 1.387-4.785 1.387-4.971 0-9-4.029-9-9s4.029-9 9-9 9 4.029 9 9c0 1.761-.514 3.398-1.387 4.785l7.387 7.387-2.828 2.828zm-12.172-8c3.859 0 7-3.14 7-7s-3.141-7-7-7-7 3.14-7 7 3.141 7 7 7z" />
+);
+
+const IconShop = MakeIcon(
+  <path d="M16.53 7l-.564 2h-15.127l-.839-2h16.53zm-14.013 6h12.319l.564-2h-13.722l.839 2zm5.983 5c-.828 0-1.5.672-1.5 1.5 0 .829.672 1.5 1.5 1.5s1.5-.671 1.5-1.5c0-.828-.672-1.5-1.5-1.5zm11.305-15l-3.432 12h-13.017l.839 2h13.659l3.474-12h1.929l.743-2h-4.195zm-6.305 15c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5c0-.828-.672-1.5-1.5-1.5z" />
+);
+
+const FIXTURES = {
+  headerMenu: [
+    { notificationCount: 0, text: "Home" },
+    { isActive: true, notificationCount: 11, text: "Messages" },
+    { notificationCount: 0, text: "Shop" },
+    { notificationCount: 0, text: "Map" },
+    { notificationCount: 0, text: "Files" }
+  ],
+  feed: [
+    { id: "5ba5", name: "Afterlife", unread: 3 },
+    { id: "4f22", name: "NCPD-Gigs" },
+    { id: "fee9", name: "Pacifica" },
+    { id: "a0cc", name: "Watson" },
+    { id: "dee3", name: "_T_SQUAD", isPrivate: true, unread: 2 }
+  ],
+  conversation: [
+    {
+      id: "cc23",
+      isOnline: true,
+      unread: 5,
+      name: "Rogue Amendiares"
+    },
+    { id: "95b4", isOnline: true, name: "Takemura", unread: 1 },
+    { id: "10cf", name: "Wakado O., Regina Jones" },
+    { id: "e466", name: "Dexter DeShawn" },
+    { id: "ca0b", name: "Megabuilding H10 Administration" }
+  ],
+  messages: [
+    {
+      id: "fd0cf",
+      content:
+        "I got a gig lined up in Watson, no biggie. If you prove useful, expect more side gigs coming your way. I need a half-decent netrunner. Hit me up, provide credentials, eddies on completion.",
+      dateTime: "2077-10-09T11:04:57Z",
+      author: {
+        id: "d12c",
+        name: "V.M. Vargas"
+      }
+    }
+  ]
+};
+
+render(<App />, document.getElementById("root"));
diff --git a/slack-discord-cyberpunk-2077-redesign-w-preact/src/style.css b/slack-discord-cyberpunk-2077-redesign-w-preact/src/style.css
new file mode 100644
index 0000000..1c88dd2
--- /dev/null
+++ b/slack-discord-cyberpunk-2077-redesign-w-preact/src/style.css
@@ -0,0 +1,571 @@
+* {
+  box-sizing: border-box;
+  position: relative;
+}
+
+html,
+body {
+  --colors-bg--300: #1e181e;
+  --colors-bg--500: #191a1e;
+  --colors-primary--200: #f4908b;
+  --colors-primary--300: #ea6f69;
+  --colors-primary--500: #e8615a;
+  --colors-primary--600: #9c3230;
+  --colors-primary--700: #5e2122;
+  --colors-primary--800: #451717;
+  --colors-primary--900: #3c181a;
+  --colors-secondary--500: #2be4ea;
+  --colors-secondary--900: #295459;
+  --colors-tertiary--500: #fed33f;
+  --colors-on_bg--500: var(--colors-primary--500);
+  --colors-on_tertiary--500: var(--colors-bg--300);
+  --colors-on_primary--500: var(--colors-primary--200);
+  --colors-active--500: #2bfea0;
+  --fonts-primary: "Rajdhani", sans-serif;
+  --fonts-secondary: "VT323", monospace;
+  --ui-glow: 0 0 5px var(--colors-primary--500);
+  --ui-glow-borders--500: 0 0 3px var(--colors-primary--500);
+  --ui-glow-color: currentcolor;
+  --ui-glow-text: -9px -6px 40px var(--ui-glow-color);
+  --ui-glow-text--dimmed: -9px -6px 40px var(--ui-glow-color);
+  --ui-elevation--1: 2px 2px 0 rgba(0, 0, 0, 0.8);
+  --ui-notch-amount: 1rem;
+  --ui-notch-hypotenuse: 22.627416px; /* hypothenuse of --ui-notch-amount */
+  --ui-notch-path: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - var(--ui-notch-amount) + 2px),
+    calc(100% - var(--ui-notch-amount) + 2px) 100%,
+    0 100%
+  );
+
+  background-color: var(--colors-bg--500);
+  background-image: radial-gradient(
+    ellipse at 33% 10%,
+    #461616 0%,
+    transparent 75%
+  );
+  background-repeat: no-repeat;
+  color: var(--colors-on_bg--500);
+  font-family: var(--fonts-primary);
+  font-size: 100%;
+  line-height: 1.4;
+  margin: 0;
+  min-height: 100vh;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.app-skeleton {
+  padding: 0 1rem;
+  height: 100vh;
+  min-width: 1024px;
+}
+
+.app-header {
+  align-items: center;
+  display: flex;
+  grid-area: header;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  padding: 1rem 0 0.5rem 0;
+}
+
+.app-header::after {
+  background-color: var(--colors-primary--500);
+  box-shadow: var(--ui-glow);
+  bottom: 0;
+  content: "";
+  height: 2px;
+  position: absolute;
+  left: 0;
+  width: 100%;
+}
+
+.app-header__anchor {
+  padding: 0.5rem;
+}
+
+.app-header__anchor__text {
+  font-family: var(--fonts-secondary);
+  font-size: 1.25rem;
+  letter-spacing: 0.035rem;
+  text-shadow: var(--ui-glow-text);
+  text-transform: uppercase;
+}
+
+.app-container {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-areas: "a main main main side";
+  grid-template-columns: 280px 1fr 1fr 1fr 1fr;
+  height: calc(100% - 5.25rem);
+}
+
+.app-a {
+  grid-area: a;
+  height: 100%;
+}
+
+.app-b {
+  grid-area: side;
+}
+
+.app-main {
+  grid-area: main;
+}
+
+.nav-section {
+  padding-bottom: 0.25rem;
+}
+
+.nav-section__header {
+  background-color: var(--colors-bg--300);
+  border: 1px solid #5d2322;
+  border-radius: 3px;
+  margin-bottom: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.nav-section__body {
+  padding-left: 1rem;
+}
+
+.nav-section__title {
+  color: #2be4ea;
+  font-size: 1rem;
+  margin: 0;
+}
+
+.nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav__link {
+  line-height: 1.4rem;
+}
+
+.nav__link__element + .nav__link__element {
+  margin-left: 0.5rem;
+}
+
+.app-header .nav {
+  align-items: flex-end;
+  display: flex;
+}
+
+.app-header .nav__item + .nav__item {
+  margin-left: 3rem;
+}
+
+.app-header .nav__link {
+  align-items: baseline;
+  display: flex;
+  text-shadow: var(--ui-glow-text);
+  text-transform: uppercase;
+  transition: transform 0.25s;
+}
+
+.app-header .nav__link:hover {
+  color: var(--colors-primary--200);
+}
+
+.app-header .nav__link.nav__link--active {
+  color: var(--colors-secondary--500);
+  font-size: 1.25rem;
+  transform: none;
+}
+
+.nav-section .nav__item + .nav__item {
+  margin-top: 0.125rem;
+}
+
+.nav-section .nav__link {
+  border: 1px solid transparent;
+  border-radius: 3px;
+  color: var(--colors-secondary--500);
+  display: block;
+  font-family: var(--fonts-primary);
+  padding: 0.5rem 0.75rem;
+  transition: background-color 0.25s;
+}
+
+.nav-section .nav__link:focus,
+.nav-section .nav__link:hover {
+  background-color: var(--colors-bg--300);
+  border: 1px solid #5d2322;
+}
+
+.nav-section .nav__link--active,
+.nav-section .nav__link.nav__link--active:focus,
+.nav-section .nav__link.nav__link--active:hover {
+  background-color: #391419;
+  border-color: #9c3230;
+}
+
+.channel-link,
+.conversation-link {
+  align-items: center;
+  display: flex;
+}
+
+.channel-link__icon,
+.conversation-link__icon {
+  margin-right: 0.75rem;
+}
+
+.channel-link__element + .channel-link__element,
+.conversation-link__element + .conversation-link__element {
+  margin-left: 0.75rem;
+}
+
+.conversation-link__icon {
+}
+
+.conversation-link__icon::after {
+  background-color: var(--colors-primary--500);
+  border-radius: 50%;
+  content: "";
+  display: block;
+  height: 0.5em;
+  width: 0.5em;
+}
+
+.conversation-link--online .conversation-link__icon::after {
+  background-color: var(--colors-active--500);
+}
+
+.channel-link--unread,
+.conversation-link--unread {
+  font-weight: bold;
+}
+
+.badge {
+  border: 1.5px solid var(--colors-tertiary--500);
+  border-radius: 3px;
+  color: var(--colors-tertiary--500);
+  display: inline-block;
+  font-size: 0.92rem;
+  font-weight: normal;
+  line-height: 1;
+  padding: 0.15em 0.34em;
+  vertical-align: middle;
+}
+
+.slate__title {
+  font-size: 1.125rem;
+  margin: 0;
+}
+
+.pad {
+  background-color: var(--colors-bg--300);
+  border: 2px solid var(--colors-primary--600);
+  clip-path: var(--ui-notch-path);
+}
+
+.pad__body {
+  padding: 0.75rem;
+  padding-bottom: var(--ui-notch-amount);
+}
+
+.pad::before {
+  background-color: var(--colors-primary--600);
+  bottom: 5px;
+  content: "";
+  display: block;
+  height: 3px; /* bigger to compensate transform */
+  position: absolute;
+  right: -6px;
+  top: auto;
+  transform: rotate(-45deg);
+  width: var(--ui-notch-hypotenuse);
+  z-index: 100;
+}
+
+/* @component: form-* */
+input,
+textarea {
+}
+
+.form-label {
+  background-color: var(--colors-primary--600);
+  color: var(--colors-on_primary--500);
+  font-family: var(--fonts-secondary);
+  font-size: 0.92rem;
+  display: inline-block;
+  padding: 0.125em 0.75em;
+  padding-right: 2em;
+  letter-spacing: 0.065em;
+  line-height: 1;
+  text-transform: uppercase;
+  vertical-align: bottom; /* inline-block fix */
+  clip-path: polygon(
+    0.25em 0,
+    calc(100% - 1em) 0,
+    100% 100%,
+    0.33em 100%,
+    0 100%,
+    0 0.25em
+  );
+}
+
+.form-control {
+  background-color: var(--colors-bg--300);
+  border: 1px solid var(--colors-primary--600);
+  clip-path: var(--ui-notch-path);
+  padding-right: 0.5rem;
+}
+
+.form-control::before {
+  background-color: var(--colors-primary--600);
+  bottom: 5px;
+  content: "";
+  display: block;
+  height: 3px; /* bigger to compensate transform */
+  position: absolute;
+  right: -6px;
+  top: auto;
+  transform: rotate(-45deg);
+  width: var(--ui-notch-hypotenuse);
+  z-index: 100;
+}
+
+.form-control input,
+.form-control textarea {
+  background-color: transparent;
+  border: 0;
+  box-shadow: none;
+  color: var(--colors-primary--500);
+  font-family: var(--fonts-primary);
+  font-size: 1rem;
+  letter-spacing: 0.045em;
+  outline: none;
+  padding: 0.5rem;
+  resize: none;
+  width: 100%;
+}
+
+.form-control--with-addon {
+  align-items: center;
+  display: flex;
+}
+
+.form-control--with-addon .button,
+.form-control--with-addon .button:hover {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.form-control__addon {
+  display: inline-block;
+  padding: 0.45rem;
+}
+
+.form-control__addon svg {
+  display: block;
+  fill: currentcolor;
+  height: 1.125rem;
+  opacity: 0.66;
+  width: 1.125rem;
+}
+
+.form-control__addon--prefix {
+  order: -1;
+}
+
+.form-control__addon--suffix {
+  order: 1;
+}
+
+.form-search {
+  margin-bottom: 0.75rem;
+}
+
+.message {
+  padding-bottom: 1rem;
+}
+
+.message__body {
+  background-color: var(--colors-bg--300);
+  border: 1px solid var(--colors-tertiary--500);
+  border-radius: 3px;
+  color: var(--colors-tertiary--500);
+  padding: 0.75rem;
+}
+
+.message__footer {
+  color: var(--colors-tertiary--500);
+  font-size: 0.85rem;
+  margin-top: 0.25rem;
+}
+
+/* @component: button */
+.button {
+  background-color: transparent;
+  border: 1px solid var(--colors-primary--500);
+  border-radius: 2px;
+  cursor: pointer;
+  color: var(--colors-primary--500);
+  display: inline-block;
+  font-family: var(--fonts-primary);
+  letter-spacing: 0.045em;
+  padding: 0.45rem;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+.button:hover {
+  background-color: var(--colors-primary--800);
+  color: var(--colors-on_primary--500);
+}
+
+.button__icon {
+  display: block;
+  height: 1.125rem;
+  line-height: 1;
+  vertical-align: top;
+  width: 1.125rem;
+}
+
+.button__icon {
+  fill: currentcolor;
+}
+
+.button__content {
+  display: inline-block;
+  z-index: 2;
+}
+
+.button--size-lg,
+.button--size-xl {
+  border-width: 2px;
+  clip-path: var(--ui-notch-path);
+  padding: 0.55rem 0.7rem 0.7rem 0.55rem;
+}
+
+.button--size-lg::before,
+.button--size-xl::before {
+  background-color: currentcolor;
+  bottom: 5px;
+  content: "";
+  display: block;
+  height: 3px; /* bigger to compensate transform */
+  position: absolute;
+  right: -6px;
+  top: auto;
+  transform: rotate(-45deg);
+  width: var(--ui-notch-hypotenuse);
+  z-index: 100;
+}
+
+.button--size-xl {
+  padding: 0.55rem 1.5rem 1.5rem 0.55rem;
+}
+
+.button--primary {
+  color: var(--colors-secondary--500);
+  border-color: var(--colors-secondary--500);
+}
+
+.button--primary:hover {
+  background-color: var(--colors-secondary--900);
+  color: var(--colors-secondary--500);
+}
+
+.button-toolbar {
+  display: flex;
+}
+
+.button-toolbar .button {
+  display: block;
+  border-radius: 0;
+}
+
+.button-toolbar .button + .button {
+  margin-left: -1px;
+}
+
+.channel-feed {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.channel-feed__body {
+  flex-grow: 1;
+}
+
+.channel-feed__footer {
+}
+
+.channel-message-form {
+  align-items: flex-start;
+  display: flex;
+  padding-bottom: 1rem;
+}
+
+.channel-message-form .form-group {
+  flex: 1;
+}
+
+.channel-message-form .form-footer {
+  margin-left: 1rem;
+  margin-top: 1.42rem;
+}
+
+.channel-message-form .form-control {
+  width: 100%;
+}
+
+.text-heading1,
+.text-heading2,
+.text-heading3,
+.text-heading4,
+.text-heading5,
+.text-heading6,
+.text-paragraph1 {
+  margin: 0;
+}
+
+.segment-topbar {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  min-height: 3.5rem;
+}
+
+.segment-topbar::after {
+  background-color: var(--colors-primary--500);
+  box-shadow: var(--ui-glow);
+  bottom: 0;
+  content: "";
+  height: 1px;
+  position: absolute;
+  left: 0;
+  width: 100%;
+}
+
+.segment-topbar__header {
+  padding: 0.5rem 0.5rem;
+  padding-top: 0;
+}
+
+.segment-topbar__overline {
+  font-family: var(--fonts-secondary);
+}
+
+.segment-topbar__title {
+  letter-spacing: 0.035em;
+  text-shadow: var(--ui-glow-text--dimmed);
+  text-transform: uppercase;
+}
+
+.segment-topbar__aside {
+  align-self: flex-start;
+  box-shadow: -6px -4px 24px rgba(156, 50, 48, 0.4);
+}
diff --git a/slide-out-toggle-menu/README.markdown b/slide-out-toggle-menu/README.markdown
new file mode 100644
index 0000000..9ffcee9
--- /dev/null
+++ b/slide-out-toggle-menu/README.markdown
@@ -0,0 +1,4 @@
+# Slide Out Toggle Menu
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/boltaway/pen/Eiqnf](https://codepen.io/boltaway/pen/Eiqnf).
+
+ Simplistic menu concept. You could play around with this a lot more. Uses flex box quite a bit.
\ No newline at end of file
diff --git a/slide-out-toggle-menu/dist/index.html b/slide-out-toggle-menu/dist/index.html
new file mode 100644
index 0000000..1ca039b
--- /dev/null
+++ b/slide-out-toggle-menu/dist/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Slide Out Toggle Menu</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<nav class="menu-opener">
+  <div class="menu-opener-inner"></div>
+</nav>
+  <nav class="menu">
+    <ul class="menu-inner">
+      <a href="#" class="menu-link">
+        <li>work</li>
+      </a>
+      <a href="#" class="menu-link">
+        <li>blog</li>
+      </a>
+      <a href="#" class="menu-link">
+        <li>about</li>
+      </a>
+      <a href="#" class="menu-link">
+        <li>contact</li>
+      </a>
+    </ul>
+  </nav>
+<!-- partial -->
+  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/slide-out-toggle-menu/dist/script.js b/slide-out-toggle-menu/dist/script.js
new file mode 100644
index 0000000..14f1d1d
--- /dev/null
+++ b/slide-out-toggle-menu/dist/script.js
@@ -0,0 +1,3 @@
+$(".menu-opener").click(function(){
+  $(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
+});
\ No newline at end of file
diff --git a/slide-out-toggle-menu/dist/style.css b/slide-out-toggle-menu/dist/style.css
new file mode 100644
index 0000000..5800411
--- /dev/null
+++ b/slide-out-toggle-menu/dist/style.css
@@ -0,0 +1,111 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700);
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  background: url("https://24.media.tumblr.com/a4eb7b32205d366bbea47042a04e10a9/tumblr_n5e0d0qDIW1st5lhmo1_1280.jpg");
+  background-size: cover;
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+}
+
+.menu-opener, .menu-opener:hover, .menu-opener.active, .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after, .menu, .menu.active {
+  transition: 250ms all;
+}
+
+.menu-opener {
+  background: black;
+  cursor: pointer;
+  height: 4rem;
+  margin: 1rem;
+  position: absolute;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  width: 4rem;
+}
+.menu-opener:hover, .menu-opener.active {
+  background: tomato;
+}
+
+.menu-opener-inner {
+  background: white;
+  height: .5rem;
+  margin-left: .75rem;
+  margin-top: 1.75rem;
+  width: 2.5rem;
+}
+.menu-opener-inner::before, .menu-opener-inner::after {
+  background: white;
+  content: '';
+  display: block;
+  height: .5rem;
+  width: 2.5rem;
+}
+.menu-opener-inner::before {
+  -webkit-transform: translateY(-0.75rem);
+          transform: translateY(-0.75rem);
+}
+.menu-opener-inner::after {
+  -webkit-transform: translateY(0.25rem);
+          transform: translateY(0.25rem);
+}
+.menu-opener-inner.active {
+  background: transparent;
+}
+.menu-opener-inner.active::before {
+  -webkit-transform: translateY(0rem) rotate(-45deg);
+          transform: translateY(0rem) rotate(-45deg);
+}
+.menu-opener-inner.active::after {
+  -webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
+          transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
+}
+
+.menu {
+  background: tomato;
+  color: transparent;
+  height: 4rem;
+  margin: 1rem;
+  position: absolute;
+  top: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  width: 0rem;
+  z-index: -1;
+}
+.menu.active {
+  width: calc(100% - 2rem);
+}
+.menu.active .menu-link {
+  color: white;
+}
+
+.menu-inner {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  list-style-type: none;
+  margin: 0;
+  margin-left: 4rem;
+  padding: 0;
+}
+
+.menu-link {
+  color: transparent;
+  display: flex;
+  flex: 1 1 auto;
+  font-size: 2rem;
+  font-weight: 100;
+  height: 100%;
+  text-align: center;
+  text-decoration: none;
+}
+.menu-link li {
+  margin: auto;
+}
diff --git a/slide-out-toggle-menu/license.txt b/slide-out-toggle-menu/license.txt
new file mode 100644
index 0000000..530194c
--- /dev/null
+++ b/slide-out-toggle-menu/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by emma (https://codepen.io/boltaway/pen/Eiqnf)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/slide-out-toggle-menu/src/index.html b/slide-out-toggle-menu/src/index.html
new file mode 100644
index 0000000..79ee0a0
--- /dev/null
+++ b/slide-out-toggle-menu/src/index.html
@@ -0,0 +1,19 @@
+<nav class="menu-opener">
+  <div class="menu-opener-inner"></div>
+</nav>
+  <nav class="menu">
+    <ul class="menu-inner">
+      <a href="#" class="menu-link">
+        <li>work</li>
+      </a>
+      <a href="#" class="menu-link">
+        <li>blog</li>
+      </a>
+      <a href="#" class="menu-link">
+        <li>about</li>
+      </a>
+      <a href="#" class="menu-link">
+        <li>contact</li>
+      </a>
+    </ul>
+  </nav>
\ No newline at end of file
diff --git a/slide-out-toggle-menu/src/script.js b/slide-out-toggle-menu/src/script.js
new file mode 100644
index 0000000..7728ee6
--- /dev/null
+++ b/slide-out-toggle-menu/src/script.js
@@ -0,0 +1,3 @@
+$(".menu-opener").click(function(){
+  $(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
+});
diff --git a/slide-out-toggle-menu/src/style.scss b/slide-out-toggle-menu/src/style.scss
new file mode 100644
index 0000000..8c4001c
--- /dev/null
+++ b/slide-out-toggle-menu/src/style.scss
@@ -0,0 +1,104 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700);
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  background: url('https://24.media.tumblr.com/a4eb7b32205d366bbea47042a04e10a9/tumblr_n5e0d0qDIW1st5lhmo1_1280.jpg');
+  background-size: cover;
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+}
+
+%transition {
+  transition: 250ms all;
+}
+
+.menu-opener {
+  background: black;
+  cursor: pointer;
+  height: 4rem;
+  margin: 1rem;
+  position: absolute;
+  user-select: none;
+  width: 4rem;
+  @extend %transition;
+  &:hover, &.active {
+    background: tomato;
+    @extend %transition;
+  }
+}
+.menu-opener-inner {
+  background: white;
+  height: .5rem;
+  margin-left: .75rem;
+  margin-top: 1.75rem;
+  width: 2.5rem;
+  @extend %transition;
+  &::before, &::after {
+    background: white;
+    content: '';
+    display: block;
+    height: .5rem;
+    width: 2.5rem;
+    @extend %transition;
+  }
+  &::before {
+    transform: translateY(-.75rem);
+  }
+  &::after {
+    transform: translateY(.25rem);
+  }
+  &.active {
+    background: transparent;
+    &::before {
+      transform: translateY(0rem) rotate(-45deg);
+    }
+    &::after {
+      transform: translateY(-.5rem) translateX(-0rem) rotate(45deg)
+    }
+  }
+}
+.menu {
+  background: tomato;
+  color: transparent;
+  height: 4rem;
+  margin: 1rem;
+  position: absolute;
+  top: 0;
+  user-select: none;
+  width: 0rem;
+  z-index: -1;
+  @extend %transition;
+  &.active {
+    width: calc(100% - 2rem);
+    @extend %transition;
+    & .menu-link {
+      color: white;
+    }
+  }
+}
+.menu-inner {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  list-style-type: none;
+  margin: 0;
+  margin-left: 4rem;
+  padding: 0;
+}
+.menu-link {
+  color: transparent;
+  display: flex;
+  flex: 1 1 auto;
+  font-size: 2rem;
+  font-weight: 100;
+  height: 100%;
+  text-align: center;
+  text-decoration: none;
+  li {
+    margin: auto;
+  }
+}
diff --git a/sliding-image-track/LICENSE.txt b/sliding-image-track/LICENSE.txt
new file mode 100644
index 0000000..8c1c486
--- /dev/null
+++ b/sliding-image-track/LICENSE.txt
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Hyperplexed (https://codepen.io/Hyperplexed/pen/MWXBRBp)
+Fork of an original work Sliding Image Track (https://codepen.io/Hyperplexed/pen/MWXBRBp)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/sliding-image-track/README.md b/sliding-image-track/README.md
new file mode 100644
index 0000000..63d63cb
--- /dev/null
+++ b/sliding-image-track/README.md
@@ -0,0 +1,4 @@
+# Sliding Image Track
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Hyperplexed/pen/MWXBRBp](https://codepen.io/Hyperplexed/pen/MWXBRBp).
+
diff --git a/sliding-image-track/dist/index.html b/sliding-image-track/dist/index.html
new file mode 100644
index 0000000..c1a800a
--- /dev/null
+++ b/sliding-image-track/dist/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Sliding Image Track</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Rubik&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="image-track" data-mouse-down-at="0" data-prev-percentage="0">
+  <img class="image" src="https://images.unsplash.com/photo-1524781289445-ddf8f5695861?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1610194352361-4c81a6a8967e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1618202133208-2907bebba9e1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1495805442109-bf1cf975750b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1548021682-1720ed403a5b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1496753480864-3e588e0269b3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2134&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1613346945084-35cccc812dd5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1759&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1516681100942-77d8e7f9dd97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
+</div>
+
+<a id="source-link" class="meta-link" href="https://camillemormal.com" target="_blank">
+  <i class="fa-solid fa-link"></i>
+  <span>Source</span>
+</a>
+
+<a id="yt-link" class="meta-link" href="https://youtu.be/PkADl0HubMY" target="_blank">
+  <i class="fa-brands fa-youtube"></i>
+  <span>7 min tutorial</span>
+</a>
+<!-- partial -->
+  <script src='https://kit.fontawesome.com/944eb371a4.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/sliding-image-track/dist/script.js b/sliding-image-track/dist/script.js
new file mode 100644
index 0000000..2c8dd31
--- /dev/null
+++ b/sliding-image-track/dist/script.js
@@ -0,0 +1,45 @@
+const track = document.getElementById("image-track");
+
+const handleOnDown = e => track.dataset.mouseDownAt = e.clientX;
+
+const handleOnUp = () => {
+  track.dataset.mouseDownAt = "0";  
+  track.dataset.prevPercentage = track.dataset.percentage;
+}
+
+const handleOnMove = e => {
+  if(track.dataset.mouseDownAt === "0") return;
+  
+  const mouseDelta = parseFloat(track.dataset.mouseDownAt) - e.clientX,
+        maxDelta = window.innerWidth / 2;
+  
+  const percentage = (mouseDelta / maxDelta) * -100,
+        nextPercentageUnconstrained = parseFloat(track.dataset.prevPercentage) + percentage,
+        nextPercentage = Math.max(Math.min(nextPercentageUnconstrained, 0), -100);
+  
+  track.dataset.percentage = nextPercentage;
+  
+  track.animate({
+    transform: `translate(${nextPercentage}%, -50%)`
+  }, { duration: 1200, fill: "forwards" });
+  
+  for(const image of track.getElementsByClassName("image")) {
+    image.animate({
+      objectPosition: `${100 + nextPercentage}% center`
+    }, { duration: 1200, fill: "forwards" });
+  }
+}
+
+/* -- Had to add extra lines for touch events -- */
+
+window.onmousedown = e => handleOnDown(e);
+
+window.ontouchstart = e => handleOnDown(e.touches[0]);
+
+window.onmouseup = e => handleOnUp(e);
+
+window.ontouchend = e => handleOnUp(e.touches[0]);
+
+window.onmousemove = e => handleOnMove(e);
+
+window.ontouchmove = e => handleOnMove(e.touches[0]);
\ No newline at end of file
diff --git a/sliding-image-track/dist/style.css b/sliding-image-track/dist/style.css
new file mode 100644
index 0000000..fd0110d
--- /dev/null
+++ b/sliding-image-track/dist/style.css
@@ -0,0 +1,77 @@
+body {
+  height: 100vh;
+  width: 100vw;
+  background-color: black;
+  margin: 0rem;
+  overflow: hidden;
+}
+
+#image-track {
+  display: flex;
+  gap: 4vmin;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(0%, -50%); 
+  user-select: none; /* -- Prevent image highlighting -- */
+}
+
+#image-track > .image {
+  width: 40vmin;
+  height: 56vmin;
+  object-fit: cover;
+  object-position: 100% center;
+}
+
+/* -- YouTube Link Styles -- */
+
+body.menu-toggled > .meta-link > span {
+  color: rgb(30, 30, 30);
+}
+
+#source-link {
+  bottom: 60px;
+}
+
+#source-link > i {
+  color: rgb(94, 106, 210);
+}
+
+#yt-link > i {
+  color: rgb(239, 83, 80);
+}
+
+.meta-link {
+  align-items: center;
+  backdrop-filter: blur(3px);
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  bottom: 10px;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+  cursor: pointer;  
+  display: inline-flex;
+  gap: 5px;
+  left: 10px;
+  padding: 10px 20px;
+  position: fixed;
+  text-decoration: none;
+  transition: background-color 400ms, border-color 400ms;
+  z-index: 10000;
+}
+
+.meta-link:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.meta-link > i, .meta-link > span {
+  height: 20px;
+  line-height: 20px;
+}
+
+.meta-link > span {
+  color: white;
+  font-family: "Rubik", sans-serif;
+  font-weight: 500;
+}
\ No newline at end of file
diff --git a/sliding-image-track/src/index.html b/sliding-image-track/src/index.html
new file mode 100644
index 0000000..5900eee
--- /dev/null
+++ b/sliding-image-track/src/index.html
@@ -0,0 +1,20 @@
+<div id="image-track" data-mouse-down-at="0" data-prev-percentage="0">
+  <img class="image" src="https://images.unsplash.com/photo-1524781289445-ddf8f5695861?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1610194352361-4c81a6a8967e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1618202133208-2907bebba9e1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1495805442109-bf1cf975750b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1548021682-1720ed403a5b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1496753480864-3e588e0269b3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2134&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1613346945084-35cccc812dd5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1759&q=80" draggable="false" />
+  <img class="image" src="https://images.unsplash.com/photo-1516681100942-77d8e7f9dd97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
+</div>
+
+<a id="source-link" class="meta-link" href="https://camillemormal.com" target="_blank">
+  <i class="fa-solid fa-link"></i>
+  <span>Source</span>
+</a>
+
+<a id="yt-link" class="meta-link" href="https://youtu.be/PkADl0HubMY" target="_blank">
+  <i class="fa-brands fa-youtube"></i>
+  <span>7 min tutorial</span>
+</a>
\ No newline at end of file
diff --git a/sliding-image-track/src/script.js b/sliding-image-track/src/script.js
new file mode 100644
index 0000000..2c8dd31
--- /dev/null
+++ b/sliding-image-track/src/script.js
@@ -0,0 +1,45 @@
+const track = document.getElementById("image-track");
+
+const handleOnDown = e => track.dataset.mouseDownAt = e.clientX;
+
+const handleOnUp = () => {
+  track.dataset.mouseDownAt = "0";  
+  track.dataset.prevPercentage = track.dataset.percentage;
+}
+
+const handleOnMove = e => {
+  if(track.dataset.mouseDownAt === "0") return;
+  
+  const mouseDelta = parseFloat(track.dataset.mouseDownAt) - e.clientX,
+        maxDelta = window.innerWidth / 2;
+  
+  const percentage = (mouseDelta / maxDelta) * -100,
+        nextPercentageUnconstrained = parseFloat(track.dataset.prevPercentage) + percentage,
+        nextPercentage = Math.max(Math.min(nextPercentageUnconstrained, 0), -100);
+  
+  track.dataset.percentage = nextPercentage;
+  
+  track.animate({
+    transform: `translate(${nextPercentage}%, -50%)`
+  }, { duration: 1200, fill: "forwards" });
+  
+  for(const image of track.getElementsByClassName("image")) {
+    image.animate({
+      objectPosition: `${100 + nextPercentage}% center`
+    }, { duration: 1200, fill: "forwards" });
+  }
+}
+
+/* -- Had to add extra lines for touch events -- */
+
+window.onmousedown = e => handleOnDown(e);
+
+window.ontouchstart = e => handleOnDown(e.touches[0]);
+
+window.onmouseup = e => handleOnUp(e);
+
+window.ontouchend = e => handleOnUp(e.touches[0]);
+
+window.onmousemove = e => handleOnMove(e);
+
+window.ontouchmove = e => handleOnMove(e.touches[0]);
\ No newline at end of file
diff --git a/sliding-image-track/src/style.css b/sliding-image-track/src/style.css
new file mode 100644
index 0000000..fd0110d
--- /dev/null
+++ b/sliding-image-track/src/style.css
@@ -0,0 +1,77 @@
+body {
+  height: 100vh;
+  width: 100vw;
+  background-color: black;
+  margin: 0rem;
+  overflow: hidden;
+}
+
+#image-track {
+  display: flex;
+  gap: 4vmin;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(0%, -50%); 
+  user-select: none; /* -- Prevent image highlighting -- */
+}
+
+#image-track > .image {
+  width: 40vmin;
+  height: 56vmin;
+  object-fit: cover;
+  object-position: 100% center;
+}
+
+/* -- YouTube Link Styles -- */
+
+body.menu-toggled > .meta-link > span {
+  color: rgb(30, 30, 30);
+}
+
+#source-link {
+  bottom: 60px;
+}
+
+#source-link > i {
+  color: rgb(94, 106, 210);
+}
+
+#yt-link > i {
+  color: rgb(239, 83, 80);
+}
+
+.meta-link {
+  align-items: center;
+  backdrop-filter: blur(3px);
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  bottom: 10px;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+  cursor: pointer;  
+  display: inline-flex;
+  gap: 5px;
+  left: 10px;
+  padding: 10px 20px;
+  position: fixed;
+  text-decoration: none;
+  transition: background-color 400ms, border-color 400ms;
+  z-index: 10000;
+}
+
+.meta-link:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.meta-link > i, .meta-link > span {
+  height: 20px;
+  line-height: 20px;
+}
+
+.meta-link > span {
+  color: white;
+  font-family: "Rubik", sans-serif;
+  font-weight: 500;
+}
\ No newline at end of file
diff --git a/smart-home-temperature-slider/README.markdown b/smart-home-temperature-slider/README.markdown
new file mode 100644
index 0000000..3427f52
--- /dev/null
+++ b/smart-home-temperature-slider/README.markdown
@@ -0,0 +1,4 @@
+# Smart Home Temperature Slider
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/chrisgannon/pen/vjNNew](https://codepen.io/chrisgannon/pen/vjNNew).
+
+ Smart home water temperature concept.
\ No newline at end of file
diff --git a/smart-home-temperature-slider/dist/index.html b/smart-home-temperature-slider/dist/index.html
new file mode 100644
index 0000000..50d323a
--- /dev/null
+++ b/smart-home-temperature-slider/dist/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Smart Home Temperature Slider</title>
+  <link rel="stylesheet" href="https://use.typekit.net/rid3oni.css">
+
+<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
+  <defs>
+    <linearGradient id="liquidGrad" x1="557" y1="150" x2="557" y2="546" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#FF0909"/>
+      <stop offset="0.2" stop-color="#F3481A"/>
+      <stop offset="0.5" stop-color="#FABA2C"/>
+      <stop offset="1" stop-color="#00BCF2"/>
+    </linearGradient>
+<rect id="tube" x="357" y="150" width="86" height="400" rx="43" ry="43"/>   
+    <clipPath id="liquidMask">
+        <use xlink:href="#tube" class="liquidMask" />
+    </clipPath>
+   <clipPath id="tubeMask">
+        <use xlink:href="#tube" class="liquidMask" />
+    </clipPath>
+   <path id="liquid" d="M757,552v490H357V552c50,0,50,20,100,20s50-20,100-20,50,20,100,20S707,552,757,552Z" />
+<mask id="gradMask">   
+
+      <use xlink:href="#liquid" class="liquid" x="0" fill="#FCEFD6" />
+      <use xlink:href="#liquid" class="liquid" x="0" fill="#EEE" opacity="0.7"/>
+ 
+    </mask>
+  </defs>
+  
+  
+    <g class="whole" transform="translate(0, -40)">
+
+           <use xlink:href="#tube" class="tubeBg" fill="#C8D9D3" opacity="0.61"/>
+   
+      <g class="dragger" transform="translate(-6, 0)">
+        <circle cx="294" cy="540" r="36" fill="#3A3335"/>
+        <path class="dragTip" d="M315.5,556.76,299.24,540.5l16.26-16.26,36.26,16.26Z" fill="#3A3335"/>
+        <text class="label" x="294" y="551">100</text>
+<!--  <path id="dragShine" d="M330,540c-26,2-18-44-72,0a36,36,0,0,1,72,0Z" fill="#E9E9E9" opacity="0.052"/>    -->    
+      </g>       
+     
+    
+ <g mask="url(#gradMask)">
+        <use xlink:href="#tube" fill="url(#liquidGrad)" />
+  </g>
+  <line class="tubeShine" x1="371" y1="200" x2="371" y2="443" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" opacity="0.21" stroke-dasharray="153 30" stroke-dashoffset="-20"/>
+ <!--        <text class="tubeLabel" x="400" y="180">100°</text>
+        <text class="tubeLabel" x="400" y="356">50°</text>
+        <text class="tubeLabel" x="400" y="540">0°</text> -->
+      <g class="measurements" fill="none" stroke="#FCEFD6" stroke-width="3" stroke-linecap="round" opacity="1">
+        <line x1="358" y1="196" x2="370" y2="196" />
+        <line x1="358" y1="234" x2="370" y2="234" />
+        <line x1="358" y1="273" x2="370" y2="273" />
+        <line x1="358" y1="311" x2="370" y2="311" />
+        <line x1="358" y1="350" x2="370" y2="350" />
+        <line x1="358" y1="388" x2="370" y2="388" />
+        <line x1="358" y1="426" x2="370" y2="426" />
+        <line x1="358" y1="465" x2="370" y2="465" />
+        <line x1="358" y1="503" x2="370" y2="503" />
+      </g>
+     
+<!--  <rect class="tubeShine" x="372" y="162" width="56" height="364.02" rx="31.5" ry="31.5" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="8" stroke-linecap="round" stroke-dasharray="15 30" opacity="0.31"/> -->
+  <circle class="follower" cx="400" cy="540" r="0" fill="#62B6CB" fill-opacity="1" stroke="#FCEFD6" stroke-width="0"/>
+
+     
+ 
+     
+ </g>   
+</svg>
+<!-- partial -->
+  <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/utils/Draggable.min.js'></script>
+<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js'></script>
+<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ModifiersPlugin-latest-beta.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/smart-home-temperature-slider/dist/script.js b/smart-home-temperature-slider/dist/script.js
new file mode 100644
index 0000000..8aacd07
--- /dev/null
+++ b/smart-home-temperature-slider/dist/script.js
@@ -0,0 +1,107 @@
+var xmlns = "http://www.w3.org/2000/svg",
+  xlinkns = "http://www.w3.org/1999/xlink",
+  select = function(s) {
+    return document.querySelector(s);
+  },
+  selectAll = function(s) {
+    return document.querySelectorAll(s);
+  },
+    liquid = selectAll('.liquid'),
+    tubeShine = select('.tubeShine'),
+    label = select('.label'),
+    follower = select('.follower'),
+    dragger = select('.dragger'),
+    dragTip = select('.dragTip'),
+    minDragY = -380,
+    liquidId = 0,
+    step = Math.abs(minDragY/100),
+    snap = Math.abs(minDragY/10),
+    followerVY = 0
+  
+
+TweenMax.set('svg', {
+  visibility: 'visible'
+})
+
+TweenMax.set(dragTip, {
+ transformOrigin:'20% 50%'
+})
+
+var tl = new TimelineMax()
+tl.staggerTo(liquid, 0.7, {
+ x:'-=200',
+ ease:Linear.easeNone,
+ repeat:-1
+},0.9)
+
+tl.time(100);
+
+document.addEventListener("touchmove", function(event){
+    event.preventDefault();
+});
+Draggable.create(dragger, {
+ type:'y',
+ bounds:{minY:minDragY, maxY:0},
+ onDrag:onUpdate,
+ throwProps:true,
+ throwResistance:2300,
+ onThrowUpdate:onUpdate,
+ overshootTolerance:0,
+ snap:function(value){
+  //Use this to snap the values to steps of 10
+  //return Math.round(value/snap) * snap
+ }
+})
+
+function onUpdate(){
+ liquidId = Math.abs(Math.round(dragger._gsTransform.y/step));
+
+ label.textContent = liquidId + '°';
+ TweenMax.to(liquid, 1.3, {
+  y:dragger._gsTransform.y*1.12,
+  ease:Elastic.easeOut.config(1,0.4)
+ })
+ 
+}
+
+TweenMax.to(follower, 1, {
+ y:'+=0',
+ repeat:-1,
+ modifiers:{
+  y:function(y, count){
+  followerVY += (dragger._gsTransform.y - follower._gsTransform.y) * 0.23;
+   followerVY *= 0.69;
+   return follower._gsTransform.y + followerVY; 
+  }
+ }
+})
+
+TweenMax.to(dragTip, 1, {
+ rotation:'+=0',
+ repeat:-1,
+ modifiers:{
+  rotation:function(rotation, count){
+   return rotation-followerVY
+  }
+ }
+})
+
+TweenMax.to(label, 1, {
+ y:'+=0',
+ repeat:-1,
+ modifiers:{
+  y:function(y, count){
+   return y-followerVY * 0.5
+  }
+ }
+})
+
+
+TweenMax.to(dragger, 1.4, {
+ y:minDragY/2,
+ onUpdate:onUpdate,
+ ease:Expo.easeInOut
+})
+
+
+//ScrubGSAPTimeline(tl);
\ No newline at end of file
diff --git a/smart-home-temperature-slider/dist/style.css b/smart-home-temperature-slider/dist/style.css
new file mode 100644
index 0000000..cecf727
--- /dev/null
+++ b/smart-home-temperature-slider/dist/style.css
@@ -0,0 +1,42 @@
+body {
+ background-color: #FCEFD6;
+ overflow: hidden;
+ text-align:center;
+}
+body,
+html {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+
+svg {
+ 
+ width: 100%;
+ height: 100%;
+ 
+}
+
+.label{
+ fill:#FFFCF9;
+ font-size:1.8em;
+ font-family: "din-condensed-web", sans-serif;
+ /* font-family: "filson-soft", sans-serif; */
+ text-anchor:middle;
+ letter-spacing:1.2px;
+}
+
+
+ .tubeLabel{
+ fill:#FCEFD6;
+ font-size:1.4em;
+ font-family: "din-condensed-web", sans-serif;
+ /* font-family: "filson-soft", sans-serif; */
+ text-anchor:middle;
+}
+.dragger{
+ -webkit-tap-highlight-color:transparent;
+}
+ 
diff --git a/smart-home-temperature-slider/license.txt b/smart-home-temperature-slider/license.txt
new file mode 100644
index 0000000..5ceac08
--- /dev/null
+++ b/smart-home-temperature-slider/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Chris Gannon (https://codepen.io/chrisgannon/pen/vjNNew)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/smart-home-temperature-slider/src/index.html b/smart-home-temperature-slider/src/index.html
new file mode 100644
index 0000000..8b52f51
--- /dev/null
+++ b/smart-home-temperature-slider/src/index.html
@@ -0,0 +1,65 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
+  <defs>
+    <linearGradient id="liquidGrad" x1="557" y1="150" x2="557" y2="546" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#FF0909"/>
+      <stop offset="0.2" stop-color="#F3481A"/>
+      <stop offset="0.5" stop-color="#FABA2C"/>
+      <stop offset="1" stop-color="#00BCF2"/>
+    </linearGradient>
+<rect id="tube" x="357" y="150" width="86" height="400" rx="43" ry="43"/>   
+    <clipPath id="liquidMask">
+        <use xlink:href="#tube" class="liquidMask" />
+    </clipPath>
+   <clipPath id="tubeMask">
+        <use xlink:href="#tube" class="liquidMask" />
+    </clipPath>
+   <path id="liquid" d="M757,552v490H357V552c50,0,50,20,100,20s50-20,100-20,50,20,100,20S707,552,757,552Z" />
+<mask id="gradMask">   
+
+      <use xlink:href="#liquid" class="liquid" x="0" fill="#FCEFD6" />
+      <use xlink:href="#liquid" class="liquid" x="0" fill="#EEE" opacity="0.7"/>
+ 
+    </mask>
+  </defs>
+  
+  
+    <g class="whole" transform="translate(0, -40)">
+
+           <use xlink:href="#tube" class="tubeBg" fill="#C8D9D3" opacity="0.61"/>
+   
+      <g class="dragger" transform="translate(-6, 0)">
+        <circle cx="294" cy="540" r="36" fill="#3A3335"/>
+        <path class="dragTip" d="M315.5,556.76,299.24,540.5l16.26-16.26,36.26,16.26Z" fill="#3A3335"/>
+        <text class="label" x="294" y="551">100</text>
+<!--  <path id="dragShine" d="M330,540c-26,2-18-44-72,0a36,36,0,0,1,72,0Z" fill="#E9E9E9" opacity="0.052"/>    -->    
+      </g>       
+     
+    
+ <g mask="url(#gradMask)">
+        <use xlink:href="#tube" fill="url(#liquidGrad)" />
+  </g>
+  <line class="tubeShine" x1="371" y1="200" x2="371" y2="443" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" opacity="0.21" stroke-dasharray="153 30" stroke-dashoffset="-20"/>
+ <!--        <text class="tubeLabel" x="400" y="180">100°</text>
+        <text class="tubeLabel" x="400" y="356">50°</text>
+        <text class="tubeLabel" x="400" y="540">0°</text> -->
+      <g class="measurements" fill="none" stroke="#FCEFD6" stroke-width="3" stroke-linecap="round" opacity="1">
+        <line x1="358" y1="196" x2="370" y2="196" />
+        <line x1="358" y1="234" x2="370" y2="234" />
+        <line x1="358" y1="273" x2="370" y2="273" />
+        <line x1="358" y1="311" x2="370" y2="311" />
+        <line x1="358" y1="350" x2="370" y2="350" />
+        <line x1="358" y1="388" x2="370" y2="388" />
+        <line x1="358" y1="426" x2="370" y2="426" />
+        <line x1="358" y1="465" x2="370" y2="465" />
+        <line x1="358" y1="503" x2="370" y2="503" />
+      </g>
+     
+<!--  <rect class="tubeShine" x="372" y="162" width="56" height="364.02" rx="31.5" ry="31.5" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="8" stroke-linecap="round" stroke-dasharray="15 30" opacity="0.31"/> -->
+  <circle class="follower" cx="400" cy="540" r="0" fill="#62B6CB" fill-opacity="1" stroke="#FCEFD6" stroke-width="0"/>
+
+     
+ 
+     
+ </g>   
+</svg>
+
diff --git a/smart-home-temperature-slider/src/script.js b/smart-home-temperature-slider/src/script.js
new file mode 100644
index 0000000..0d6761f
--- /dev/null
+++ b/smart-home-temperature-slider/src/script.js
@@ -0,0 +1,108 @@
+var xmlns = "http://www.w3.org/2000/svg",
+  xlinkns = "http://www.w3.org/1999/xlink",
+  select = function(s) {
+    return document.querySelector(s);
+  },
+  selectAll = function(s) {
+    return document.querySelectorAll(s);
+  },
+    liquid = selectAll('.liquid'),
+    tubeShine = select('.tubeShine'),
+    label = select('.label'),
+    follower = select('.follower'),
+    dragger = select('.dragger'),
+    dragTip = select('.dragTip'),
+    minDragY = -380,
+    liquidId = 0,
+    step = Math.abs(minDragY/100),
+    snap = Math.abs(minDragY/10),
+    followerVY = 0
+  
+
+TweenMax.set('svg', {
+  visibility: 'visible'
+})
+
+TweenMax.set(dragTip, {
+ transformOrigin:'20% 50%'
+})
+
+var tl = new TimelineMax()
+tl.staggerTo(liquid, 0.7, {
+ x:'-=200',
+ ease:Linear.easeNone,
+ repeat:-1
+},0.9)
+
+tl.time(100);
+
+document.addEventListener("touchmove", function(event){
+    event.preventDefault();
+});
+Draggable.create(dragger, {
+ type:'y',
+ bounds:{minY:minDragY, maxY:0},
+ onDrag:onUpdate,
+ throwProps:true,
+ throwResistance:2300,
+ onThrowUpdate:onUpdate,
+ overshootTolerance:0,
+ snap:function(value){
+  //Use this to snap the values to steps of 10
+  //return Math.round(value/snap) * snap
+ }
+})
+
+function onUpdate(){
+ liquidId = Math.abs(Math.round(dragger._gsTransform.y/step));
+
+ label.textContent = liquidId + '°';
+ TweenMax.to(liquid, 1.3, {
+  y:dragger._gsTransform.y*1.12,
+  ease:Elastic.easeOut.config(1,0.4)
+ })
+ 
+}
+
+TweenMax.to(follower, 1, {
+ y:'+=0',
+ repeat:-1,
+ modifiers:{
+  y:function(y, count){
+  followerVY += (dragger._gsTransform.y - follower._gsTransform.y) * 0.23;
+   followerVY *= 0.69;
+   return follower._gsTransform.y + followerVY; 
+  }
+ }
+})
+
+TweenMax.to(dragTip, 1, {
+ rotation:'+=0',
+ repeat:-1,
+ modifiers:{
+  rotation:function(rotation, count){
+   return rotation-followerVY
+  }
+ }
+})
+
+TweenMax.to(label, 1, {
+ y:'+=0',
+ repeat:-1,
+ modifiers:{
+  y:function(y, count){
+   return y-followerVY * 0.5
+  }
+ }
+})
+
+
+TweenMax.to(dragger, 1.4, {
+ y:minDragY/2,
+ onUpdate:onUpdate,
+ ease:Expo.easeInOut
+})
+
+
+//ScrubGSAPTimeline(tl);
+
diff --git a/smart-home-temperature-slider/src/style.css b/smart-home-temperature-slider/src/style.css
new file mode 100644
index 0000000..cecf727
--- /dev/null
+++ b/smart-home-temperature-slider/src/style.css
@@ -0,0 +1,42 @@
+body {
+ background-color: #FCEFD6;
+ overflow: hidden;
+ text-align:center;
+}
+body,
+html {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+
+svg {
+ 
+ width: 100%;
+ height: 100%;
+ 
+}
+
+.label{
+ fill:#FFFCF9;
+ font-size:1.8em;
+ font-family: "din-condensed-web", sans-serif;
+ /* font-family: "filson-soft", sans-serif; */
+ text-anchor:middle;
+ letter-spacing:1.2px;
+}
+
+
+ .tubeLabel{
+ fill:#FCEFD6;
+ font-size:1.4em;
+ font-family: "din-condensed-web", sans-serif;
+ /* font-family: "filson-soft", sans-serif; */
+ text-anchor:middle;
+}
+.dragger{
+ -webkit-tap-highlight-color:transparent;
+}
+ 
diff --git a/smoothie-app/README.markdown b/smoothie-app/README.markdown
new file mode 100644
index 0000000..cfea2cb
--- /dev/null
+++ b/smoothie-app/README.markdown
@@ -0,0 +1,4 @@
+# Smoothie App
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/borntofrappe/pen/bPLpxo](https://codepen.io/borntofrappe/pen/bPLpxo).
+
+ Inspired by [this design](https://dribbble.com/shots/5410284-Smoothie-Land), create an interactive couple of screens allowing to select a couple of ingredients and produce a cool looking smoothie.
\ No newline at end of file
diff --git a/smoothie-app/dist/index.html b/smoothie-app/dist/index.html
new file mode 100644
index 0000000..f2a867a
--- /dev/null
+++ b/smoothie-app/dist/index.html
@@ -0,0 +1,517 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Smoothie App</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- graphics used in the project -->
+<svg style="display: none;" viewBox="0 0 100 100" width="50" height="50">
+    <!-- icons for the navigation bar -->
+    <symbol id="signal" viewBox="0 0 100 100">
+        <g transform="translate(2.5 0)">
+            <rect
+                x="0"
+                y="80"
+                width="20"
+                height="20"
+                fill="currentColor">
+            </rect>
+            <g transform="translate(25 0)">
+                <rect
+                    x="0"
+                    y="60"
+                    width="20"
+                    height="40"
+                    fill="currentColor">
+                </rect>
+            </g>
+            <g transform="translate(50 0)">
+                <rect
+                    x="0"
+                    y="40"
+                    width="20"
+                    height="60"
+                    fill="currentColor">
+                </rect>
+            </g>
+            <g transform="translate(75 0)">
+                <rect
+                    x="0"
+                    y="20"
+                    width="20"
+                    height="80"
+                    fill="currentColor">
+                </rect>
+                <rect
+                    x="0"
+                    y="20"
+                    width="20"
+                    height="80"
+                    fill="currentColor">
+                </rect>
+            </g>
+        </g>
+    </symbol>
+
+    <symbol id="wifi" viewBox="0 0 100 100">
+        <circle
+            cx="50"
+            cy="90"
+            r="10"
+            fill="currentColor">
+        </circle>
+
+        <g
+            stroke="currentColor"
+            stroke-width="20"
+            fill="none">
+            <path
+                d="M 25 70 a 35 35 0 0 1 50 0">
+            </path>
+
+            <path
+                d="M 10 45 a 65 65 0 0 1 80 0">
+            </path>
+        </g>
+    </symbol>
+
+    <symbol id="battery" viewBox="0 0 100 100">
+        <rect
+            x="5"
+            y="35"
+            width="80"
+            height="50"
+            fill="currentColor">
+        </rect>
+        <rect
+            x="85"
+            y="45"
+            width="15"
+            height="30"
+            fill="currentColor">
+        </rect>
+    </symbol>
+
+    <!-- icon for the order button -->
+    <symbol id="arrow" viewBox="0 0 100 100">
+        <path
+            d="M 20 50 h 65 l -25 -25 l 25 25 l -25 25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="10"
+            stroke="currentColor"
+            fill="none">
+        </path>
+    </symbol>
+
+    <!-- icon of fruits -->
+    <symbol id="pineapple" viewBox="0 0 100 100">
+        <g transform="translate(0,12.5)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
+            <path d="m50 21q20 0 20 20 0 25-15 25h-10q-15 0-15-25 0-20 20-20" stroke-dasharray="55 8 80"/>
+            <g stroke-width="2.5">
+                <path d="m36 33 2-2 2 2"/>
+                <path d="m60 33 2-2 2 2"/>
+                <path d="m30 46 4-4 4 4" stroke-dasharray="8, 3, 5"/>
+                <path d="m62 46 4-4 4 4"/>
+                <path d="m33 57 2.5-2.5 2.5 2.5"/>
+                <path d="m62 57 2.5-2.5 2.5 2.5"/>
+                <path d="m43 41 7-7 7 7"/>
+                <path d="m43 56 7-7 7 7"/>
+            </g>
+            <g fill="#ffffff">
+                <path d="m43 16 7-7 7 7"/>
+                <path d="m43 21-2-11 9 9 9-9-2 11"/>
+                <path d="m40 21-7-7 17 7 17-7-7 7"/>
+            </g>
+        </g>
+    </symbol>
+
+    <symbol id="peach" viewBox="0 0 100 100">
+        <g transform="translate(-7.0352 18.875)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
+            <g stroke-width="2.5">
+                <path d="m47 16v-8a3 3 0 0 1 6 0v8"/>
+                <path d="m53 14q2-10 16-7-4 14-16 7l8-3"/>
+            </g>
+            <path d="m50 16a20 20 0 0 0-20 20 18 18 0 0 0 18 18q2.5 0 5 3 2.5-3 5-3a18 18 0 0 0 18-18 20 20 0 0 0-20-20 20 20 0 0 0-10 20" stroke-dasharray="70, 45, 80"/>
+            <g transform="rotate(30 -43.373 151.62)">
+                <path d="m0-18c-20 8-16 32 0 32s20-24 0-32"/>
+            </g>
+            <g transform="rotate(30 -43.373 151.62)">
+                <path d="m0-8c-8 4-8 12 0 16 8-4 8-12 0-16"/>
+            </g>
+        </g>
+    </symbol>
+
+    <symbol id="raspberry" version="1.1" viewBox="0 0 100 100">
+        <g transform="translate(50 50)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <g transform="translate(.10082 .49998)">
+            <g>
+                <path d="m-2 0q-5-25 18-18 3 25-18 18"/>
+                <path d="m-2 0 15-15" stroke-dasharray="12, 4, 1, 10"/>
+            </g>
+            <g>
+                <path d="m-15-10q-5-10 5-15 4 8 7 10 10 8 0 10" fill="#ffffff" stroke-dasharray="25, 5, 20"/>
+                <path d="m-5-9q-2-4-4-5"/>
+            </g>
+            <g transform="matrix(.020627 -.99979 -.99979 -.020627 -.99002 -2.0879)">
+                <path d="m-15-10q-5-10 5-15 4 8 7 10 10 8 0 10" fill="#ffffff" stroke-dasharray="25, 5, 20"/>
+                <path d="m-5-9q-2-4-4-5"/>
+            </g>
+                <g fill="#ffffff">
+                    <circle cx="-20" cy="20" r="4"/>
+                    <circle cx="-19" cy="14" r="4.1"/>
+                    <circle cx="-14" cy="18" r="4.1"/>
+                    <circle cx="-18" cy="9" r="4.2"/>
+                    <circle cx="-9" cy="17" r="4.2"/>
+                    <circle cx="-14" cy="13" r="4.2"/>
+                    <circle cx="-17" cy="4" r="4.3"/>
+                    <circle cx="-4" cy="16" r="4.3"/>
+                    <circle cx="-9" cy="8" r="4.3"/>
+                    <circle cx="-16" cy="-1" r="4.4"/>
+                    <circle cx="1" cy="15" r="4.4"/>
+                    <circle cx="-5" cy="3" r="4.4"/>
+                    <circle cx="-11" cy="1" r="4.4"/>
+                    <circle cx="-1" cy="9" r="4.4"/>
+                    <circle cx="-14" cy="-9" r="4.5"/>
+                    <circle cx="-8" cy="-6" r="4.5"/>
+                    <circle cx="3" cy="5" r="4.5"/>
+                    <circle cx="8" cy="12" r="4.5"/>
+                    <circle cx="-1" cy="-1" r="4.5"/>
+                </g>
+            </g>
+        </g>
+    </symbol>
+
+    <!-- icons for the buttons, framing the fruit icons with accompanying text and a circle as a background -->
+    <symbol id="pineapple-button" viewBox="0 0 100 100">
+        <circle
+            cx="50"
+            cy="50"
+            r="50"
+            fill="#ffffff">
+        </circle>
+        <use href="#pineapple" transform="translate(0 -10)"></use>
+        <text
+            text-anchor="middle"
+            font-size="0.7rem"
+            font-weight="bold"
+            x="50"
+            y="80">
+            Pineapple
+        </text>
+    </symbol>
+
+    <symbol id="peach-button" viewBox="0 0 100 100">
+        <circle
+            cx="50"
+            cy="50"
+            r="50"
+            fill="#ffffff">
+        </circle>
+        <use href="#peach" transform="translate(0 -10)"></use>
+        <text
+            text-anchor="middle"
+            font-size="0.7rem"
+            font-weight="bold"
+            x="50"
+            y="80">
+            Peach
+        </text>
+    </symbol>
+
+    <symbol id="raspberry-button" viewBox="0 0 100 100">
+        <circle
+            cx="50"
+            cy="50"
+            r="50"
+            fill="#ffffff">
+        </circle>
+        <use href="#raspberry" transform="translate(0 -10)"></use>
+        <text
+            text-anchor="middle"
+            font-size="0.7rem"
+            font-weight="bold"
+            x="50"
+            y="80">
+            Raspberry
+        </text>
+    </symbol>
+</svg>
+
+
+<!-- html structure
+div, wrapping container
+    nav, svg icons
+    header, state of the application
+    svg, graphic visualizing the drink in a mixer
+    div, scrollable list of ingredients
+    div, list of selected ingredients and button to proceed to mixing the drink
+-->
+
+<div class="phone">
+    <!-- in the nav show the current time before the three icons created earlier in the svg block -->
+    <nav class="phone__nav">
+        <span>9:42</span>
+        <svg viewBox="0 0 100 100" width="20" height="20">
+            <use href="#signal"></use>
+        </svg>
+        <svg viewBox="0 0 100 100" width="20" height="20">
+            <use href="#wifi"></use>
+        </svg>
+        <svg viewBox="0 0 100 100" width="20" height="20">
+            <use href="#battery"></use>
+        </svg>
+    </nav>
+
+    <!-- highlight the number of ingredients left in a strong element -->
+    <header class="phone__state">
+        <h2>Hello there</h2>
+        <p>You can choose<br/>
+            <strong>
+                2 more
+            </strong>
+            ingredients.
+        </p>
+    </header>
+
+    <!-- within a mixer, draw the milk and fruit section through rectangle elements -->
+    <svg class="phone__drink" viewBox="0 0 100 180" width="300" height="440">
+        <defs>
+            <!-- linear gradient applied on the straw, to create a light source in the top left corner -->
+            <linearGradient
+                id="gradient-light"
+                gradientUnits="userSpaceOnUse"
+                x1="50"
+                x2="100"
+                y1="-50"
+                y2="20">
+                <stop stop-color="#ffffff" offset="0"></stop>
+                <stop stop-color="#ff4966" offset="1"></stop>
+            </linearGradient>
+
+            <!-- clip matching the body of the drink, to crop the rectangles describing the liquid within the drink and the rectangles fabricating the shades through semi transparent elements -->
+            <clipPath
+                id="clip-body">
+                <path
+                    d="M 12.5 70 l 10 100 a 150 150 0 0 0 55 0 l 10 -100 v 5 a 160 160 0 0 1 -80 0">
+                </path>
+            </clipPath>
+
+            <!-- clip above the drink's lid, to crop the lid where the straw pops out -->
+            <clipPath
+                id="clip-lid">
+                <path
+                    d="M 0 10 h 47 v 30 a 6 6 0 0 0 6 0 v -30 h 47 v 80 h -100">
+                </path>
+            </clipPath>
+
+            <!-- mask for the drink's rim, to show the rim's back minus the straw -->
+            <mask
+                id="mask-rim">
+                <rect
+                    x="0"
+                    y="0"
+                    width="100"
+                    height="100"
+                    fill="#fff">
+                </rect>
+                <path
+                    fill="#000"
+                    d="M 47 140 a 4 4 0 0 0 6 0 v -125 q 0 -4 5 -5 l 20 -3 l -0.5 -7 l -26 3.9 q -5 1 -5 5">
+                </path>
+            </mask>
+        </defs>
+        <g>
+            <!-- straw -->
+            <g>
+                <path
+                    fill="#ff4966"
+                    d="M 47 140 a 4 4 0 0 0 6 0 v -125 q 0 -4 5 -5 l 20 -3 l -0.5 -7 l -26 3.9 q -5 1 -5 5">
+                </path>
+
+                <path
+                    fill="url(#gradient-light)"
+                    d="M 47 140 a 4 4 0 0 0 6 0 v -125 q 0 -4 5 -5 l 20 -3 l -0.5 -7 l -26 3.9 q -5 1 -5 5">
+                </path>
+            </g>
+
+            <!-- cup -->
+            <g>
+                <!-- lid
+                    clip the lid where the straw ought to pop out
+                    include a small line to remark where the straw pops out
+                    include a reflection through an ellipse in the top left section of the lid
+                -->
+                <g>
+                    <path
+                        clip-path="url(#clip-lid)"
+                        opacity="0.7"
+                        fill="#F1F7F3"
+                        d="M 8 70 a 42 40 0 0 1 84 0 a 90 90 0 0 1 -84 0">
+                    </path>
+                    <path
+                        opacity="0.5"
+                        stroke="none"
+                        fill="#F1F7F3"
+                        d="M 47 40 a 6 6 0 0 0 6 0 v 1 a 6 6 0 0 1 -6 0">
+                    </path>
+
+                    <g transform="translate(30 50) rotate(30)">
+                        <ellipse
+                            opacity="0.7"
+                            fill="#ffffff"
+                            cx="0"
+                            cy="0"
+                            rx="6"
+                            ry="12">
+                        </ellipse>
+                    </g>
+                </g>
+
+                <!-- body -->
+                <path
+                fill="none"
+                    stroke="#F7F7F7"
+                    stroke-width="5"
+                    stroke-linejoin="round"
+                    stroke-linecap="round"
+                    d="M 10 70 l 10 100 a 150 150 0 0 0 60 0 l 10 -100 a 120 120 0 0 1 -80 0">
+                </path>
+
+
+                <!-- clip the group describing the rectangles for the milk and fruit section, to show only the element within the mixer's body -->
+                <!-- liquid -->
+                <g
+                    clip-path="url(#clip-body)">
+                    <!--
+                        ! include rectangle elements in this group
+                        given the negative scale, increasing y values push the rectangles upwards
+                    -->
+                    <g class="drink" transform="translate(0 180) scale(1 -1)">
+                        <rect
+                            x="0"
+                            y="0"
+                            width="100"
+                            height="50"
+                            fill="rgb(239, 224, 153)">
+                        </rect>
+                    </g>
+                </g>
+
+                <!-- above the liquid include the body with a semi transparent fill to match the lid's color -->
+                <path
+                    opacity="0.3"
+                    fill="#F7F7F7"
+                    d="M 10 70 l 10 100 a 150 150 0 0 0 60 0 l 10 -100 a 120 120 0 0 1 -80 0">
+                </path>
+
+                <!-- shades
+                overlap semi transparent rectangles to give a different shade to the underlying assets
+                -->
+                <g
+                    clip-path="url(#clip-body)">
+                    <rect
+                        x="0"
+                        y="0"
+                        width="100"
+                        height="200"
+                        fill="#fff"
+                        opacity="0.2">
+                    </rect>
+                    <rect
+                        x="0"
+                        y="0"
+                        width="62"
+                        height="200"
+                        fill="#fff"
+                        opacity="0.3">
+                    </rect>
+                    <rect
+                        x="0"
+                        y="0"
+                        width="38"
+                        height="200"
+                        fill="#fff"
+                        opacity="0.4">
+                    </rect>
+                </g>
+
+                <!-- rim
+                overlap multiple paths to create a 3d effect
+                use a fill instead of a stroke to rapidly overlap elements by modifying few command values -->
+                <g>
+                    <g mask="url(#mask-rim)">
+                        <path
+                            fill="#F7F7F7"
+                            d="M 4 70 a 180 180 0 0 1 92 0 v 5 a 180 180 0 0 0 -92 0">
+                        </path>
+                        <path
+                            fill="#000"
+                            opacity="0.03"
+                            d="M 4 72 a 180 180 0 0 1 92 0 v 3 a 180 180 0 0 0 -92 0">
+                        </path>
+                    </g>
+
+                    <path
+                        fill="#F7F7F7"
+                        d="M 4 70 a 200 200 0 0 0 92 0 v 5 a 200 200 0 0 1 -92 0">
+                    </path>
+                    <path
+                        fill="#000"
+                        opacity="0.03"
+                        d="M 4 72 a 200 200 0 0 0 92 0 v 3 a 200 200 0 0 1 -92 0">
+                    </path>
+                </g>
+            </g>
+        </g>
+    </svg>
+
+
+    <!-- describe the ingredients in a div, each with an svg icon and a button to add/remove the ingredients -->
+    <div class="phone__ingredients">
+        <!-- ! include the button elements through the script -->
+        <!-- <button>
+            <svg style="color: #fbe054;" width="20" height="20">
+                <use href="#pineapple-button"></use>
+            </svg>
+            <span>Add +</span>
+        </button>
+        <button>
+            <svg style="color: #fdb07d;" width="20" height="20">
+                <use href="#peach-button"></use>
+            </svg>
+            <span>Add +</span>
+        </button>
+        <button>
+            <svg style="color: #ff6060;" width="20" height="20">
+                <use href="#raspberry-button"></use>
+            </svg>
+            <span>Add +</span>
+        </button> -->
+    </div>
+
+    <!-- list the selected ingredients in an unordered list and highlight the button to proceed mixing the drink -->
+    <div class="phone__order">
+        <div class="order--list">
+            <h3>Your choice:</h3>
+            <ul>
+                <li>1x Big Soya Smoothie</li>
+                <li></li>
+            </ul>
+        </div>
+        <button>
+            <svg width="20" height="20">
+                <use href="#arrow"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.com/animejs@3.0.1/lib/anime.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/smoothie-app/dist/script.js b/smoothie-app/dist/script.js
new file mode 100644
index 0000000..369a24e
--- /dev/null
+++ b/smoothie-app/dist/script.js
@@ -0,0 +1,316 @@
+/* with global variables
+- describe the list of ingredients
+- describe the state of the order
+*/
+const state = {
+  ingredients: [ // an array of ingredients by name and matching color
+    {
+      name: 'pineapple',
+      color: 'rgb(255, 208, 66)',
+    },
+    {
+      name: 'peach',
+      color: 'rgb(242, 110, 73)',
+    },
+    {
+      name: 'raspberry',
+      color: 'rgb(228, 41, 57)',
+    },
+  ],
+  order: { // an object detailing the selection as well as variables used for the size and position of the rectangles
+    ingredients: [],
+    left: 2,
+    base: 50, // where the rectangles ought to be positioned, vertically (atop the existing rect element)
+    measure: 25, // height of each rectangle
+  }
+}
+
+/* based on the list of ingredients add one button in the .phone__ingredients section
+ with the following markup (but using the name and color of the ingredients)
+<button>
+    <svg style="color: #fbe054;" width="20" height="20">
+        <use href="#pineapple-button"></use>
+    </svg>
+    <span>Add +</span>
+</button>
+*/
+const phoneIngredients = document.querySelector('.phone__ingredients');
+
+
+// function called on the order button
+function handleOrder() {
+  // proceed updating the UI to show the final mixture
+  this.removeEventListener('click', handleOrder);
+
+  // shake the svg
+  const phoneDrink = document.querySelector('.phone__drink');
+  anime({
+    targets: phoneDrink,
+    rotate: [4, 0, -4],
+    loop: 4,
+    direction: 'alternate',
+    duration: 100,
+    easing: 'easeInOutSine',
+  })
+
+  // include a rectangle element spanning the entirety of the g.drink 100 height
+  // this rectangle using the color dictated by the selected ingredients
+  const { ingredients } = state;
+  const { ingredients: ingredientsOrder } = state.order;
+  const colors = ingredientsOrder.map(nameOrder => ingredients.find(({name}) => name === nameOrder).color);
+  // add up the rgb values of each ingredient
+  const regexRGB = /rgb\((\d+), (\d+), (\d+)\)/;
+  const color = colors.reduce((acc, curr) => {
+    const [, r, g, b] = curr.match(regexRGB);
+    return [r, g, b].map((value, index) => parseInt(value, 10) + acc[index]);
+  },[239, 225, 153]); // initialize the array with the color of the soya drink (this would technically weigh for twice the intensity, but to avoid too similar a color, I consider it diluted)
+
+  // include the color using the sum of all rgb codes, divided by the number of colors present
+  phoneDrink.querySelector('g.drink').innerHTML += `
+  <g id="mix" transform="translate(0 50)">
+    <rect
+        transform="scale(1 0)"
+        x="0"
+        y="-50"
+        width="100"
+        height="100"
+        fill="rgb(${color.map(value => value / 3).join(',')})">
+    </rect>
+  </g>
+  `;
+
+  // after a small delay animate the rectangle to its full y scale
+  anime({
+    targets: `g#mix rect`,
+    transform: 'scale(1 1)',
+    duration: 300,
+    delay: 300,
+    easing: 'easeInOutSine',
+  });
+
+  // once the shaking is complete remove the ingredients
+  // before removing the ingredients hide them from view
+  anime({
+    targets: phoneIngredients,
+    opacity: 0,
+    visibility: 'hidden',
+    duration: 250,
+    delay: 600,
+    easing: 'easeInOutSine',
+    complete: () => {
+      anime({
+        targets: phoneIngredients,
+        height: 0,
+        duration: 250,
+        easing: 'easeInOutSine',
+        complete: () => {
+          phoneIngredients.parentElement.removeChild(phoneIngredients);
+        }
+      })
+    }
+  });
+
+  // remove the order button and update the phoneState/phoneOrder text elements to highlight the final screen
+  const phoneState = document.querySelector('.phone__state');
+  const phoneOrder = document.querySelector('.phone__order');
+
+
+  // phoneState.querySelector('p').innerHTML = 'And here it is!<br/><strong>Hope you\'ll enjoy</strong>';
+  anime({
+    targets: this,
+    scale: 0,
+    duration: 250,
+    delay: 750,
+    easing: 'easeInOutSine',
+    complete: () => {
+      this.parentElement.removeChild(this);
+    }
+  });
+  anime({
+    targets: phoneState,
+    opacity: 0,
+    visibility: 'hidden',
+    duration: 250,
+    delay: 750,
+    easing: 'easeInOutSine',
+    complete: () => {
+      phoneState.innerHTML = `
+        <h2>Here it is</h2>
+        <p>Hope you'll enjoy<br/>your smoothie!</p>
+      `;
+      anime({
+        targets: phoneState,
+        opacity: 1,
+        visibility: 'visible',
+        duration: 200,
+        easing: 'easeInOutSine',
+      });
+    }
+  });
+  anime({
+    targets: phoneOrder,
+    opacity: 0,
+    visibility: 'hidden',
+    duration: 250,
+    delay: 850,
+    easing: 'easeInOutSine',
+    complete: () => {
+      phoneOrder.querySelector('div').innerHTML = `
+        <h3>Your great choice</h3>
+        <p>A ${ingredientsOrder.join('-')} flavored refreshment.</p>
+      `;
+      anime({
+        targets: phoneOrder,
+        opacity: 1,
+        visibility: 'visible',
+        duration: 200,
+        easing: 'easeInOutSine',
+      });
+    }
+  });
+
+}
+
+// function called by the ingredients button
+function handleIngredient() {
+  // retrieve the name of the ingredient and based on the state.order.ingredients, state.order.left values proceed adding/removing the ingredients
+  const ingredient = this.getAttribute('data-ingredient');
+  const { ingredients, left, base, measure } = state.order;
+
+
+  /* possible scenarios
+  1. ingredient is present in the ingredients array, proceed to remove it
+  1. ingredient is not present, analyse the number of ingredients left
+    1. more than 0, proceed to add the ingredient
+    1. 0, do nothing
+
+    all the while updating the state and the UI where needed (heading, order section, but most importantly the drink)
+  */
+ if(ingredients.includes(ingredient)) {
+    // update the state removing the ingredient
+    const index = ingredients.indexOf(ingredient);
+    state.order.ingredients = [...ingredients.slice(0, index), ...ingredients.slice(index + 1)];
+    state.order.left = left + 1;
+
+    // update the UI
+    // number of ingredients left
+    const phoneState = document.querySelector('.phone__state');
+    phoneState.querySelector('p').innerHTML = `You can choose<br/><strong>${state.order.left} more</strong> ingredients.`
+
+    // possibility to add the now removed ingredient
+    this.querySelector('span').textContent = 'Add +';
+
+    // list of selected ingredients
+    const phoneOrder = document.querySelector('.phone__order');
+    phoneOrder.querySelector('ul li:last-of-type').textContent = state.order.ingredients.join(', ');
+
+    // class for the order button
+    phoneOrder.classList.remove('complete');
+    // remove the event listener to avoid running the function accidentally
+    phoneOrder.querySelector('button').removeEventListener('click', handleOrder);
+
+    // update the SVG to remove the selected ingredient and possibly translate the ingredients chosen afterwards
+    const phoneDrink = document.querySelector('.phone__drink');
+    // before removing the element have the selected rectangled scaled back to 0
+    anime({
+      targets: phoneDrink.querySelector(`g#${ingredient} rect`),
+      transform: 'scale(1 0)',
+      duration: 200,
+      easing: 'easeInOutSine',
+      complete: () => {
+        const selectedIngredient = phoneDrink.querySelector(`g#${ingredient}`)
+        selectedIngredient.parentElement.removeChild(selectedIngredient);
+      }
+    });
+    // translate the remaining ingredient, if any downwards
+    const remainingIngredient = ingredients.find(ingr => ingr !== ingredient);
+    anime({
+      targets: phoneDrink.querySelector(`g#${remainingIngredient}`),
+      transform: `translate(0 ${base - measure * 2})`,
+      duration: 200,
+      easing: 'easeInOutSine',
+    });
+
+
+    // reduce the base value
+    state.order.base = base - measure;
+
+ } else if(left > 0) {
+    // update the state adding the ingredient
+    state.order.ingredients.push(ingredient);
+    state.order.left = left - 1;
+
+    // update the UI
+    // ! display different content if left is now equal to 0, to direct toward the mixing step
+    const phoneState = document.querySelector('.phone__state');
+
+    const phoneOrder = document.querySelector('.phone__order');
+
+    if(state.order.left === 0) {
+      phoneOrder.classList.add('complete');
+      phoneOrder.querySelector('button').addEventListener('click', handleOrder);
+      phoneState.querySelector('p').innerHTML = '<strong>You are all set</strong><br/>Proceed mixing.';
+    } else {
+      phoneState.querySelector('p').innerHTML = `You can choose<br/><strong>${state.order.left} more</strong> ingredients.`;
+    }
+
+    this.querySelector('span').textContent = 'Remove';
+
+    phoneOrder.querySelector('ul li:last-of-type').textContent = state.order.ingredients.join(', ');
+
+    // update the SVG to add the rectangle element
+    const phoneDrink = document.querySelector('.phone__drink');
+    const {color} = state.ingredients.find(({name}) => name === ingredient);
+    // ! initially set the vertical scale to 0 and animate the rectangle with anime.js
+    phoneDrink.querySelector('g.drink').innerHTML += `
+    <g id="${ingredient}" transform="translate(0 ${base})">
+      <rect
+          transform="scale(1 0)"
+          x="0"
+          y="0"
+          width="100"
+          height="${measure}"
+          fill="${color}">
+      </rect>
+    </g>
+    `;
+
+    anime({
+      targets: `g#${ingredient} rect`,
+      transform: 'scale(1 1)',
+      duration: 200,
+      easing: 'easeInOutSine'
+    })
+
+    // increase the base variable to move the following rectangle upwards
+    state.order.base = base + measure;
+ }
+}
+
+state.ingredients.forEach(({ name, color }) => {
+  // create and append a button specifying the markup described above
+  const button = document.createElement('button');
+  // data attribute to rapidly identify the selected ingredient
+  button.setAttribute('data-ingredient', name);
+  button.addEventListener('click', handleIngredient);
+  button.innerHTML = `
+  <svg style="color: ${color};" width="20" height="20">
+      <use href="#${name}-button"></use>
+  </svg>
+  <span>Add +</span>
+  `;
+  phoneIngredients.appendChild(button);
+});
+
+
+// orderButton.addEventListener('click', handleOrder);
+
+// bonus: add the current hour and minutes in the span element
+// using the hh:mm format
+const now = new Date();
+const hours = now.getHours();
+const minutes = now.getMinutes();
+const zeroPadded = num => (num >= 10 ? num.toString() : `0${num}`);
+
+const span = document.querySelector('nav span');
+span.textContent = `${zeroPadded(hours)}:${zeroPadded(minutes)}`;
\ No newline at end of file
diff --git a/smoothie-app/dist/style.css b/smoothie-app/dist/style.css
new file mode 100644
index 0000000..97d1157
--- /dev/null
+++ b/smoothie-app/dist/style.css
@@ -0,0 +1,187 @@
+@import url("https://fonts.googleapis.com/css?family=Muli:300,400,600,900&display=swap");
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+body {
+  color: #333;
+  font-family: "Muli", sans-serif;
+  min-height: 100vh;
+  /* add a circle with a linear gradient in the center of the screen, above another linear gradient */
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><linearGradient id="gradient" x1="0" y1="1" x2="1" y2="0"><stop offset="0" stop-color="%23FBDBE3"></stop><stop offset="1" stop-color="%23F39BAE"></stop></linearGradient><circle cx="50" cy="50" r="50" fill="url(%23gradient)"></circle></svg>'),
+    linear-gradient(45deg, #ffecf0, #f5c3cf);
+  background-position: 50%, 0%;
+  background-size: 40%, 100%;
+  background-repeat: no-repeat;
+}
+
+/* for the phone UI specify a tall, thin, rounded rectangle */
+div.phone {
+  max-width: 280px;
+  margin: 2rem auto;
+  border-radius: 15px;
+  background: #fffffd;
+  /* display the content in a column */
+  display: flex;
+  flex-direction: column;
+  /* add multiple shadows to make a solid rounded border with a small blue-ish overlay and a softer shadow */
+  box-shadow: 0 0 0 0.02rem #ddf, 0 0 1rem 0.1rem #f4f4ff, 0 0 0 0.8rem #fcfcff,
+    0 0 0.8rem 0.5rem #ccf;
+}
+
+/* display the navigation's items in a row */
+.phone__nav {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  margin-bottom: 0.5rem;
+}
+.phone__nav span {
+  flex-grow: 1;
+  font-weight: 600;
+  font-size: 0.7rem;
+}
+.phone__nav svg {
+  margin: 0 0.1rem;
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.phone__state {
+  padding: 0 1rem;
+}
+.phone__state h2 {
+  color: #ff4966;
+  font-size: 1.4rem;
+}
+.phone__state p {
+  font-size: 0.8rem;
+}
+
+/* display the drink in the center of the phone */
+.phone__drink {
+  align-self: center;
+  width: 70%;
+  height: auto;
+  margin: 1.5rem 0 0;
+}
+
+/* display the ingredients in a non-wrapping row */
+.phone__ingredients {
+  display: flex;
+  align-items: center;
+  margin: 0 0.5rem;
+  /* allow for horizontal scroll */
+  overflow-x: auto;
+}
+/* visually hide the scrollbar */
+.phone__ingredients::-webkit-scrollbar {
+  opacity: 0;
+}
+/* prevent the buttons from shrinking */
+.phone__ingredients button {
+  margin: 0.5rem;
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  position: relative;
+  font-family: inherit;
+  /* display the svg and span atop one another */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.phone__ingredients button svg {
+  width: 78px;
+  height: 78px;
+  display: block;
+  filter: drop-shadow(0 0 10px hsla(0, 0%, 0%, 0.05));
+}
+/* have the span overlap on the svg */
+.phone__ingredients button span {
+  position: relative;
+  border-radius: 20px;
+  background: #ff4966;
+  color: #fff;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  margin-top: -0.5rem;
+}
+/* on click darken the background color of the span element through an overlapping pseudo element */
+.phone__ingredients button span:before {
+  position: absolute;
+  content: "";
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: #000;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0);
+  transition-property: opacity, transform;
+  transition-duration: 0.1s;
+  transition-timing-function: ease-out;
+}
+.phone__ingredients button:active span:before {
+  opacity: 0.2;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* display the receipt on a completely white background */
+.phone__order {
+  display: flex;
+  background: #fff;
+  margin: 0.5rem 0.75rem 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 15px;
+  box-shadow: 0 1px 15px -2px #f5c3cf;
+  min-height: 75px;
+}
+/* have the heading and list stretch to occupy the available width */
+.phone__order .order--list {
+  flex-grow: 1;
+}
+.phone__order .order--list h3 {
+  font-size: 0.6rem;
+  color: #ff4966;
+  text-transform: uppercase;
+  margin-bottom: 0.1rem;
+}
+/* remove the bullet point from the unordered list */
+.phone__order .order--list ul {
+  list-style: none;
+  font-size: 0.8rem;
+  text-transform: capitalize;
+  line-height: 1.5;
+}
+
+/* highlight the button with the accent color
+replicate the active state created for the ingredients' span
+! enable this state alongside full opacity only when a class is added
+this to highlight when the button is clickable
+*/
+.phone__order button {
+  align-self: center;
+  background: #ff4966;
+  border: none;
+  color: #fff;
+  width: 30px;
+  height: 30px;
+  padding: 0.3rem;
+  border-radius: 50%;
+  opacity: 0.5;
+  cursor: not-allowed;
+  transition: opacity 0.15s ease-out;
+}
+.phone__order button svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.phone__order.complete button {
+  opacity: 1;
+  cursor: pointer;
+}
diff --git a/smoothie-app/license.txt b/smoothie-app/license.txt
new file mode 100644
index 0000000..861374b
--- /dev/null
+++ b/smoothie-app/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Gabriele Corti (https://codepen.io/borntofrappe/pen/bPLpxo)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/smoothie-app/src/index.html b/smoothie-app/src/index.html
new file mode 100644
index 0000000..b737ca9
--- /dev/null
+++ b/smoothie-app/src/index.html
@@ -0,0 +1,502 @@
+<!-- graphics used in the project -->
+<svg style="display: none;" viewBox="0 0 100 100" width="50" height="50">
+    <!-- icons for the navigation bar -->
+    <symbol id="signal" viewBox="0 0 100 100">
+        <g transform="translate(2.5 0)">
+            <rect
+                x="0"
+                y="80"
+                width="20"
+                height="20"
+                fill="currentColor">
+            </rect>
+            <g transform="translate(25 0)">
+                <rect
+                    x="0"
+                    y="60"
+                    width="20"
+                    height="40"
+                    fill="currentColor">
+                </rect>
+            </g>
+            <g transform="translate(50 0)">
+                <rect
+                    x="0"
+                    y="40"
+                    width="20"
+                    height="60"
+                    fill="currentColor">
+                </rect>
+            </g>
+            <g transform="translate(75 0)">
+                <rect
+                    x="0"
+                    y="20"
+                    width="20"
+                    height="80"
+                    fill="currentColor">
+                </rect>
+                <rect
+                    x="0"
+                    y="20"
+                    width="20"
+                    height="80"
+                    fill="currentColor">
+                </rect>
+            </g>
+        </g>
+    </symbol>
+
+    <symbol id="wifi" viewBox="0 0 100 100">
+        <circle
+            cx="50"
+            cy="90"
+            r="10"
+            fill="currentColor">
+        </circle>
+
+        <g
+            stroke="currentColor"
+            stroke-width="20"
+            fill="none">
+            <path
+                d="M 25 70 a 35 35 0 0 1 50 0">
+            </path>
+
+            <path
+                d="M 10 45 a 65 65 0 0 1 80 0">
+            </path>
+        </g>
+    </symbol>
+
+    <symbol id="battery" viewBox="0 0 100 100">
+        <rect
+            x="5"
+            y="35"
+            width="80"
+            height="50"
+            fill="currentColor">
+        </rect>
+        <rect
+            x="85"
+            y="45"
+            width="15"
+            height="30"
+            fill="currentColor">
+        </rect>
+    </symbol>
+
+    <!-- icon for the order button -->
+    <symbol id="arrow" viewBox="0 0 100 100">
+        <path
+            d="M 20 50 h 65 l -25 -25 l 25 25 l -25 25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="10"
+            stroke="currentColor"
+            fill="none">
+        </path>
+    </symbol>
+
+    <!-- icon of fruits -->
+    <symbol id="pineapple" viewBox="0 0 100 100">
+        <g transform="translate(0,12.5)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
+            <path d="m50 21q20 0 20 20 0 25-15 25h-10q-15 0-15-25 0-20 20-20" stroke-dasharray="55 8 80"/>
+            <g stroke-width="2.5">
+                <path d="m36 33 2-2 2 2"/>
+                <path d="m60 33 2-2 2 2"/>
+                <path d="m30 46 4-4 4 4" stroke-dasharray="8, 3, 5"/>
+                <path d="m62 46 4-4 4 4"/>
+                <path d="m33 57 2.5-2.5 2.5 2.5"/>
+                <path d="m62 57 2.5-2.5 2.5 2.5"/>
+                <path d="m43 41 7-7 7 7"/>
+                <path d="m43 56 7-7 7 7"/>
+            </g>
+            <g fill="#ffffff">
+                <path d="m43 16 7-7 7 7"/>
+                <path d="m43 21-2-11 9 9 9-9-2 11"/>
+                <path d="m40 21-7-7 17 7 17-7-7 7"/>
+            </g>
+        </g>
+    </symbol>
+
+    <symbol id="peach" viewBox="0 0 100 100">
+        <g transform="translate(-7.0352 18.875)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
+            <g stroke-width="2.5">
+                <path d="m47 16v-8a3 3 0 0 1 6 0v8"/>
+                <path d="m53 14q2-10 16-7-4 14-16 7l8-3"/>
+            </g>
+            <path d="m50 16a20 20 0 0 0-20 20 18 18 0 0 0 18 18q2.5 0 5 3 2.5-3 5-3a18 18 0 0 0 18-18 20 20 0 0 0-20-20 20 20 0 0 0-10 20" stroke-dasharray="70, 45, 80"/>
+            <g transform="rotate(30 -43.373 151.62)">
+                <path d="m0-18c-20 8-16 32 0 32s20-24 0-32"/>
+            </g>
+            <g transform="rotate(30 -43.373 151.62)">
+                <path d="m0-8c-8 4-8 12 0 16 8-4 8-12 0-16"/>
+            </g>
+        </g>
+    </symbol>
+
+    <symbol id="raspberry" version="1.1" viewBox="0 0 100 100">
+        <g transform="translate(50 50)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <g transform="translate(.10082 .49998)">
+            <g>
+                <path d="m-2 0q-5-25 18-18 3 25-18 18"/>
+                <path d="m-2 0 15-15" stroke-dasharray="12, 4, 1, 10"/>
+            </g>
+            <g>
+                <path d="m-15-10q-5-10 5-15 4 8 7 10 10 8 0 10" fill="#ffffff" stroke-dasharray="25, 5, 20"/>
+                <path d="m-5-9q-2-4-4-5"/>
+            </g>
+            <g transform="matrix(.020627 -.99979 -.99979 -.020627 -.99002 -2.0879)">
+                <path d="m-15-10q-5-10 5-15 4 8 7 10 10 8 0 10" fill="#ffffff" stroke-dasharray="25, 5, 20"/>
+                <path d="m-5-9q-2-4-4-5"/>
+            </g>
+                <g fill="#ffffff">
+                    <circle cx="-20" cy="20" r="4"/>
+                    <circle cx="-19" cy="14" r="4.1"/>
+                    <circle cx="-14" cy="18" r="4.1"/>
+                    <circle cx="-18" cy="9" r="4.2"/>
+                    <circle cx="-9" cy="17" r="4.2"/>
+                    <circle cx="-14" cy="13" r="4.2"/>
+                    <circle cx="-17" cy="4" r="4.3"/>
+                    <circle cx="-4" cy="16" r="4.3"/>
+                    <circle cx="-9" cy="8" r="4.3"/>
+                    <circle cx="-16" cy="-1" r="4.4"/>
+                    <circle cx="1" cy="15" r="4.4"/>
+                    <circle cx="-5" cy="3" r="4.4"/>
+                    <circle cx="-11" cy="1" r="4.4"/>
+                    <circle cx="-1" cy="9" r="4.4"/>
+                    <circle cx="-14" cy="-9" r="4.5"/>
+                    <circle cx="-8" cy="-6" r="4.5"/>
+                    <circle cx="3" cy="5" r="4.5"/>
+                    <circle cx="8" cy="12" r="4.5"/>
+                    <circle cx="-1" cy="-1" r="4.5"/>
+                </g>
+            </g>
+        </g>
+    </symbol>
+
+    <!-- icons for the buttons, framing the fruit icons with accompanying text and a circle as a background -->
+    <symbol id="pineapple-button" viewBox="0 0 100 100">
+        <circle
+            cx="50"
+            cy="50"
+            r="50"
+            fill="#ffffff">
+        </circle>
+        <use href="#pineapple" transform="translate(0 -10)"></use>
+        <text
+            text-anchor="middle"
+            font-size="0.7rem"
+            font-weight="bold"
+            x="50"
+            y="80">
+            Pineapple
+        </text>
+    </symbol>
+
+    <symbol id="peach-button" viewBox="0 0 100 100">
+        <circle
+            cx="50"
+            cy="50"
+            r="50"
+            fill="#ffffff">
+        </circle>
+        <use href="#peach" transform="translate(0 -10)"></use>
+        <text
+            text-anchor="middle"
+            font-size="0.7rem"
+            font-weight="bold"
+            x="50"
+            y="80">
+            Peach
+        </text>
+    </symbol>
+
+    <symbol id="raspberry-button" viewBox="0 0 100 100">
+        <circle
+            cx="50"
+            cy="50"
+            r="50"
+            fill="#ffffff">
+        </circle>
+        <use href="#raspberry" transform="translate(0 -10)"></use>
+        <text
+            text-anchor="middle"
+            font-size="0.7rem"
+            font-weight="bold"
+            x="50"
+            y="80">
+            Raspberry
+        </text>
+    </symbol>
+</svg>
+
+
+<!-- html structure
+div, wrapping container
+    nav, svg icons
+    header, state of the application
+    svg, graphic visualizing the drink in a mixer
+    div, scrollable list of ingredients
+    div, list of selected ingredients and button to proceed to mixing the drink
+-->
+
+<div class="phone">
+    <!-- in the nav show the current time before the three icons created earlier in the svg block -->
+    <nav class="phone__nav">
+        <span>9:42</span>
+        <svg viewBox="0 0 100 100" width="20" height="20">
+            <use href="#signal"></use>
+        </svg>
+        <svg viewBox="0 0 100 100" width="20" height="20">
+            <use href="#wifi"></use>
+        </svg>
+        <svg viewBox="0 0 100 100" width="20" height="20">
+            <use href="#battery"></use>
+        </svg>
+    </nav>
+
+    <!-- highlight the number of ingredients left in a strong element -->
+    <header class="phone__state">
+        <h2>Hello there</h2>
+        <p>You can choose<br/>
+            <strong>
+                2 more
+            </strong>
+            ingredients.
+        </p>
+    </header>
+
+    <!-- within a mixer, draw the milk and fruit section through rectangle elements -->
+    <svg class="phone__drink" viewBox="0 0 100 180" width="300" height="440">
+        <defs>
+            <!-- linear gradient applied on the straw, to create a light source in the top left corner -->
+            <linearGradient
+                id="gradient-light"
+                gradientUnits="userSpaceOnUse"
+                x1="50"
+                x2="100"
+                y1="-50"
+                y2="20">
+                <stop stop-color="#ffffff" offset="0"></stop>
+                <stop stop-color="#ff4966" offset="1"></stop>
+            </linearGradient>
+
+            <!-- clip matching the body of the drink, to crop the rectangles describing the liquid within the drink and the rectangles fabricating the shades through semi transparent elements -->
+            <clipPath
+                id="clip-body">
+                <path
+                    d="M 12.5 70 l 10 100 a 150 150 0 0 0 55 0 l 10 -100 v 5 a 160 160 0 0 1 -80 0">
+                </path>
+            </clipPath>
+
+            <!-- clip above the drink's lid, to crop the lid where the straw pops out -->
+            <clipPath
+                id="clip-lid">
+                <path
+                    d="M 0 10 h 47 v 30 a 6 6 0 0 0 6 0 v -30 h 47 v 80 h -100">
+                </path>
+            </clipPath>
+
+            <!-- mask for the drink's rim, to show the rim's back minus the straw -->
+            <mask
+                id="mask-rim">
+                <rect
+                    x="0"
+                    y="0"
+                    width="100"
+                    height="100"
+                    fill="#fff">
+                </rect>
+                <path
+                    fill="#000"
+                    d="M 47 140 a 4 4 0 0 0 6 0 v -125 q 0 -4 5 -5 l 20 -3 l -0.5 -7 l -26 3.9 q -5 1 -5 5">
+                </path>
+            </mask>
+        </defs>
+        <g>
+            <!-- straw -->
+            <g>
+                <path
+                    fill="#ff4966"
+                    d="M 47 140 a 4 4 0 0 0 6 0 v -125 q 0 -4 5 -5 l 20 -3 l -0.5 -7 l -26 3.9 q -5 1 -5 5">
+                </path>
+
+                <path
+                    fill="url(#gradient-light)"
+                    d="M 47 140 a 4 4 0 0 0 6 0 v -125 q 0 -4 5 -5 l 20 -3 l -0.5 -7 l -26 3.9 q -5 1 -5 5">
+                </path>
+            </g>
+
+            <!-- cup -->
+            <g>
+                <!-- lid
+                    clip the lid where the straw ought to pop out
+                    include a small line to remark where the straw pops out
+                    include a reflection through an ellipse in the top left section of the lid
+                -->
+                <g>
+                    <path
+                        clip-path="url(#clip-lid)"
+                        opacity="0.7"
+                        fill="#F1F7F3"
+                        d="M 8 70 a 42 40 0 0 1 84 0 a 90 90 0 0 1 -84 0">
+                    </path>
+                    <path
+                        opacity="0.5"
+                        stroke="none"
+                        fill="#F1F7F3"
+                        d="M 47 40 a 6 6 0 0 0 6 0 v 1 a 6 6 0 0 1 -6 0">
+                    </path>
+
+                    <g transform="translate(30 50) rotate(30)">
+                        <ellipse
+                            opacity="0.7"
+                            fill="#ffffff"
+                            cx="0"
+                            cy="0"
+                            rx="6"
+                            ry="12">
+                        </ellipse>
+                    </g>
+                </g>
+
+                <!-- body -->
+                <path
+                fill="none"
+                    stroke="#F7F7F7"
+                    stroke-width="5"
+                    stroke-linejoin="round"
+                    stroke-linecap="round"
+                    d="M 10 70 l 10 100 a 150 150 0 0 0 60 0 l 10 -100 a 120 120 0 0 1 -80 0">
+                </path>
+
+
+                <!-- clip the group describing the rectangles for the milk and fruit section, to show only the element within the mixer's body -->
+                <!-- liquid -->
+                <g
+                    clip-path="url(#clip-body)">
+                    <!--
+                        ! include rectangle elements in this group
+                        given the negative scale, increasing y values push the rectangles upwards
+                    -->
+                    <g class="drink" transform="translate(0 180) scale(1 -1)">
+                        <rect
+                            x="0"
+                            y="0"
+                            width="100"
+                            height="50"
+                            fill="rgb(239, 224, 153)">
+                        </rect>
+                    </g>
+                </g>
+
+                <!-- above the liquid include the body with a semi transparent fill to match the lid's color -->
+                <path
+                    opacity="0.3"
+                    fill="#F7F7F7"
+                    d="M 10 70 l 10 100 a 150 150 0 0 0 60 0 l 10 -100 a 120 120 0 0 1 -80 0">
+                </path>
+
+                <!-- shades
+                overlap semi transparent rectangles to give a different shade to the underlying assets
+                -->
+                <g
+                    clip-path="url(#clip-body)">
+                    <rect
+                        x="0"
+                        y="0"
+                        width="100"
+                        height="200"
+                        fill="#fff"
+                        opacity="0.2">
+                    </rect>
+                    <rect
+                        x="0"
+                        y="0"
+                        width="62"
+                        height="200"
+                        fill="#fff"
+                        opacity="0.3">
+                    </rect>
+                    <rect
+                        x="0"
+                        y="0"
+                        width="38"
+                        height="200"
+                        fill="#fff"
+                        opacity="0.4">
+                    </rect>
+                </g>
+
+                <!-- rim
+                overlap multiple paths to create a 3d effect
+                use a fill instead of a stroke to rapidly overlap elements by modifying few command values -->
+                <g>
+                    <g mask="url(#mask-rim)">
+                        <path
+                            fill="#F7F7F7"
+                            d="M 4 70 a 180 180 0 0 1 92 0 v 5 a 180 180 0 0 0 -92 0">
+                        </path>
+                        <path
+                            fill="#000"
+                            opacity="0.03"
+                            d="M 4 72 a 180 180 0 0 1 92 0 v 3 a 180 180 0 0 0 -92 0">
+                        </path>
+                    </g>
+
+                    <path
+                        fill="#F7F7F7"
+                        d="M 4 70 a 200 200 0 0 0 92 0 v 5 a 200 200 0 0 1 -92 0">
+                    </path>
+                    <path
+                        fill="#000"
+                        opacity="0.03"
+                        d="M 4 72 a 200 200 0 0 0 92 0 v 3 a 200 200 0 0 1 -92 0">
+                    </path>
+                </g>
+            </g>
+        </g>
+    </svg>
+
+
+    <!-- describe the ingredients in a div, each with an svg icon and a button to add/remove the ingredients -->
+    <div class="phone__ingredients">
+        <!-- ! include the button elements through the script -->
+        <!-- <button>
+            <svg style="color: #fbe054;" width="20" height="20">
+                <use href="#pineapple-button"></use>
+            </svg>
+            <span>Add +</span>
+        </button>
+        <button>
+            <svg style="color: #fdb07d;" width="20" height="20">
+                <use href="#peach-button"></use>
+            </svg>
+            <span>Add +</span>
+        </button>
+        <button>
+            <svg style="color: #ff6060;" width="20" height="20">
+                <use href="#raspberry-button"></use>
+            </svg>
+            <span>Add +</span>
+        </button> -->
+    </div>
+
+    <!-- list the selected ingredients in an unordered list and highlight the button to proceed mixing the drink -->
+    <div class="phone__order">
+        <div class="order--list">
+            <h3>Your choice:</h3>
+            <ul>
+                <li>1x Big Soya Smoothie</li>
+                <li></li>
+            </ul>
+        </div>
+        <button>
+            <svg width="20" height="20">
+                <use href="#arrow"></use>
+            </svg>
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/smoothie-app/src/script.js b/smoothie-app/src/script.js
new file mode 100644
index 0000000..369a24e
--- /dev/null
+++ b/smoothie-app/src/script.js
@@ -0,0 +1,316 @@
+/* with global variables
+- describe the list of ingredients
+- describe the state of the order
+*/
+const state = {
+  ingredients: [ // an array of ingredients by name and matching color
+    {
+      name: 'pineapple',
+      color: 'rgb(255, 208, 66)',
+    },
+    {
+      name: 'peach',
+      color: 'rgb(242, 110, 73)',
+    },
+    {
+      name: 'raspberry',
+      color: 'rgb(228, 41, 57)',
+    },
+  ],
+  order: { // an object detailing the selection as well as variables used for the size and position of the rectangles
+    ingredients: [],
+    left: 2,
+    base: 50, // where the rectangles ought to be positioned, vertically (atop the existing rect element)
+    measure: 25, // height of each rectangle
+  }
+}
+
+/* based on the list of ingredients add one button in the .phone__ingredients section
+ with the following markup (but using the name and color of the ingredients)
+<button>
+    <svg style="color: #fbe054;" width="20" height="20">
+        <use href="#pineapple-button"></use>
+    </svg>
+    <span>Add +</span>
+</button>
+*/
+const phoneIngredients = document.querySelector('.phone__ingredients');
+
+
+// function called on the order button
+function handleOrder() {
+  // proceed updating the UI to show the final mixture
+  this.removeEventListener('click', handleOrder);
+
+  // shake the svg
+  const phoneDrink = document.querySelector('.phone__drink');
+  anime({
+    targets: phoneDrink,
+    rotate: [4, 0, -4],
+    loop: 4,
+    direction: 'alternate',
+    duration: 100,
+    easing: 'easeInOutSine',
+  })
+
+  // include a rectangle element spanning the entirety of the g.drink 100 height
+  // this rectangle using the color dictated by the selected ingredients
+  const { ingredients } = state;
+  const { ingredients: ingredientsOrder } = state.order;
+  const colors = ingredientsOrder.map(nameOrder => ingredients.find(({name}) => name === nameOrder).color);
+  // add up the rgb values of each ingredient
+  const regexRGB = /rgb\((\d+), (\d+), (\d+)\)/;
+  const color = colors.reduce((acc, curr) => {
+    const [, r, g, b] = curr.match(regexRGB);
+    return [r, g, b].map((value, index) => parseInt(value, 10) + acc[index]);
+  },[239, 225, 153]); // initialize the array with the color of the soya drink (this would technically weigh for twice the intensity, but to avoid too similar a color, I consider it diluted)
+
+  // include the color using the sum of all rgb codes, divided by the number of colors present
+  phoneDrink.querySelector('g.drink').innerHTML += `
+  <g id="mix" transform="translate(0 50)">
+    <rect
+        transform="scale(1 0)"
+        x="0"
+        y="-50"
+        width="100"
+        height="100"
+        fill="rgb(${color.map(value => value / 3).join(',')})">
+    </rect>
+  </g>
+  `;
+
+  // after a small delay animate the rectangle to its full y scale
+  anime({
+    targets: `g#mix rect`,
+    transform: 'scale(1 1)',
+    duration: 300,
+    delay: 300,
+    easing: 'easeInOutSine',
+  });
+
+  // once the shaking is complete remove the ingredients
+  // before removing the ingredients hide them from view
+  anime({
+    targets: phoneIngredients,
+    opacity: 0,
+    visibility: 'hidden',
+    duration: 250,
+    delay: 600,
+    easing: 'easeInOutSine',
+    complete: () => {
+      anime({
+        targets: phoneIngredients,
+        height: 0,
+        duration: 250,
+        easing: 'easeInOutSine',
+        complete: () => {
+          phoneIngredients.parentElement.removeChild(phoneIngredients);
+        }
+      })
+    }
+  });
+
+  // remove the order button and update the phoneState/phoneOrder text elements to highlight the final screen
+  const phoneState = document.querySelector('.phone__state');
+  const phoneOrder = document.querySelector('.phone__order');
+
+
+  // phoneState.querySelector('p').innerHTML = 'And here it is!<br/><strong>Hope you\'ll enjoy</strong>';
+  anime({
+    targets: this,
+    scale: 0,
+    duration: 250,
+    delay: 750,
+    easing: 'easeInOutSine',
+    complete: () => {
+      this.parentElement.removeChild(this);
+    }
+  });
+  anime({
+    targets: phoneState,
+    opacity: 0,
+    visibility: 'hidden',
+    duration: 250,
+    delay: 750,
+    easing: 'easeInOutSine',
+    complete: () => {
+      phoneState.innerHTML = `
+        <h2>Here it is</h2>
+        <p>Hope you'll enjoy<br/>your smoothie!</p>
+      `;
+      anime({
+        targets: phoneState,
+        opacity: 1,
+        visibility: 'visible',
+        duration: 200,
+        easing: 'easeInOutSine',
+      });
+    }
+  });
+  anime({
+    targets: phoneOrder,
+    opacity: 0,
+    visibility: 'hidden',
+    duration: 250,
+    delay: 850,
+    easing: 'easeInOutSine',
+    complete: () => {
+      phoneOrder.querySelector('div').innerHTML = `
+        <h3>Your great choice</h3>
+        <p>A ${ingredientsOrder.join('-')} flavored refreshment.</p>
+      `;
+      anime({
+        targets: phoneOrder,
+        opacity: 1,
+        visibility: 'visible',
+        duration: 200,
+        easing: 'easeInOutSine',
+      });
+    }
+  });
+
+}
+
+// function called by the ingredients button
+function handleIngredient() {
+  // retrieve the name of the ingredient and based on the state.order.ingredients, state.order.left values proceed adding/removing the ingredients
+  const ingredient = this.getAttribute('data-ingredient');
+  const { ingredients, left, base, measure } = state.order;
+
+
+  /* possible scenarios
+  1. ingredient is present in the ingredients array, proceed to remove it
+  1. ingredient is not present, analyse the number of ingredients left
+    1. more than 0, proceed to add the ingredient
+    1. 0, do nothing
+
+    all the while updating the state and the UI where needed (heading, order section, but most importantly the drink)
+  */
+ if(ingredients.includes(ingredient)) {
+    // update the state removing the ingredient
+    const index = ingredients.indexOf(ingredient);
+    state.order.ingredients = [...ingredients.slice(0, index), ...ingredients.slice(index + 1)];
+    state.order.left = left + 1;
+
+    // update the UI
+    // number of ingredients left
+    const phoneState = document.querySelector('.phone__state');
+    phoneState.querySelector('p').innerHTML = `You can choose<br/><strong>${state.order.left} more</strong> ingredients.`
+
+    // possibility to add the now removed ingredient
+    this.querySelector('span').textContent = 'Add +';
+
+    // list of selected ingredients
+    const phoneOrder = document.querySelector('.phone__order');
+    phoneOrder.querySelector('ul li:last-of-type').textContent = state.order.ingredients.join(', ');
+
+    // class for the order button
+    phoneOrder.classList.remove('complete');
+    // remove the event listener to avoid running the function accidentally
+    phoneOrder.querySelector('button').removeEventListener('click', handleOrder);
+
+    // update the SVG to remove the selected ingredient and possibly translate the ingredients chosen afterwards
+    const phoneDrink = document.querySelector('.phone__drink');
+    // before removing the element have the selected rectangled scaled back to 0
+    anime({
+      targets: phoneDrink.querySelector(`g#${ingredient} rect`),
+      transform: 'scale(1 0)',
+      duration: 200,
+      easing: 'easeInOutSine',
+      complete: () => {
+        const selectedIngredient = phoneDrink.querySelector(`g#${ingredient}`)
+        selectedIngredient.parentElement.removeChild(selectedIngredient);
+      }
+    });
+    // translate the remaining ingredient, if any downwards
+    const remainingIngredient = ingredients.find(ingr => ingr !== ingredient);
+    anime({
+      targets: phoneDrink.querySelector(`g#${remainingIngredient}`),
+      transform: `translate(0 ${base - measure * 2})`,
+      duration: 200,
+      easing: 'easeInOutSine',
+    });
+
+
+    // reduce the base value
+    state.order.base = base - measure;
+
+ } else if(left > 0) {
+    // update the state adding the ingredient
+    state.order.ingredients.push(ingredient);
+    state.order.left = left - 1;
+
+    // update the UI
+    // ! display different content if left is now equal to 0, to direct toward the mixing step
+    const phoneState = document.querySelector('.phone__state');
+
+    const phoneOrder = document.querySelector('.phone__order');
+
+    if(state.order.left === 0) {
+      phoneOrder.classList.add('complete');
+      phoneOrder.querySelector('button').addEventListener('click', handleOrder);
+      phoneState.querySelector('p').innerHTML = '<strong>You are all set</strong><br/>Proceed mixing.';
+    } else {
+      phoneState.querySelector('p').innerHTML = `You can choose<br/><strong>${state.order.left} more</strong> ingredients.`;
+    }
+
+    this.querySelector('span').textContent = 'Remove';
+
+    phoneOrder.querySelector('ul li:last-of-type').textContent = state.order.ingredients.join(', ');
+
+    // update the SVG to add the rectangle element
+    const phoneDrink = document.querySelector('.phone__drink');
+    const {color} = state.ingredients.find(({name}) => name === ingredient);
+    // ! initially set the vertical scale to 0 and animate the rectangle with anime.js
+    phoneDrink.querySelector('g.drink').innerHTML += `
+    <g id="${ingredient}" transform="translate(0 ${base})">
+      <rect
+          transform="scale(1 0)"
+          x="0"
+          y="0"
+          width="100"
+          height="${measure}"
+          fill="${color}">
+      </rect>
+    </g>
+    `;
+
+    anime({
+      targets: `g#${ingredient} rect`,
+      transform: 'scale(1 1)',
+      duration: 200,
+      easing: 'easeInOutSine'
+    })
+
+    // increase the base variable to move the following rectangle upwards
+    state.order.base = base + measure;
+ }
+}
+
+state.ingredients.forEach(({ name, color }) => {
+  // create and append a button specifying the markup described above
+  const button = document.createElement('button');
+  // data attribute to rapidly identify the selected ingredient
+  button.setAttribute('data-ingredient', name);
+  button.addEventListener('click', handleIngredient);
+  button.innerHTML = `
+  <svg style="color: ${color};" width="20" height="20">
+      <use href="#${name}-button"></use>
+  </svg>
+  <span>Add +</span>
+  `;
+  phoneIngredients.appendChild(button);
+});
+
+
+// orderButton.addEventListener('click', handleOrder);
+
+// bonus: add the current hour and minutes in the span element
+// using the hh:mm format
+const now = new Date();
+const hours = now.getHours();
+const minutes = now.getMinutes();
+const zeroPadded = num => (num >= 10 ? num.toString() : `0${num}`);
+
+const span = document.querySelector('nav span');
+span.textContent = `${zeroPadded(hours)}:${zeroPadded(minutes)}`;
\ No newline at end of file
diff --git a/smoothie-app/src/style.css b/smoothie-app/src/style.css
new file mode 100644
index 0000000..97d1157
--- /dev/null
+++ b/smoothie-app/src/style.css
@@ -0,0 +1,187 @@
+@import url("https://fonts.googleapis.com/css?family=Muli:300,400,600,900&display=swap");
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+body {
+  color: #333;
+  font-family: "Muli", sans-serif;
+  min-height: 100vh;
+  /* add a circle with a linear gradient in the center of the screen, above another linear gradient */
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><linearGradient id="gradient" x1="0" y1="1" x2="1" y2="0"><stop offset="0" stop-color="%23FBDBE3"></stop><stop offset="1" stop-color="%23F39BAE"></stop></linearGradient><circle cx="50" cy="50" r="50" fill="url(%23gradient)"></circle></svg>'),
+    linear-gradient(45deg, #ffecf0, #f5c3cf);
+  background-position: 50%, 0%;
+  background-size: 40%, 100%;
+  background-repeat: no-repeat;
+}
+
+/* for the phone UI specify a tall, thin, rounded rectangle */
+div.phone {
+  max-width: 280px;
+  margin: 2rem auto;
+  border-radius: 15px;
+  background: #fffffd;
+  /* display the content in a column */
+  display: flex;
+  flex-direction: column;
+  /* add multiple shadows to make a solid rounded border with a small blue-ish overlay and a softer shadow */
+  box-shadow: 0 0 0 0.02rem #ddf, 0 0 1rem 0.1rem #f4f4ff, 0 0 0 0.8rem #fcfcff,
+    0 0 0.8rem 0.5rem #ccf;
+}
+
+/* display the navigation's items in a row */
+.phone__nav {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  margin-bottom: 0.5rem;
+}
+.phone__nav span {
+  flex-grow: 1;
+  font-weight: 600;
+  font-size: 0.7rem;
+}
+.phone__nav svg {
+  margin: 0 0.1rem;
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.phone__state {
+  padding: 0 1rem;
+}
+.phone__state h2 {
+  color: #ff4966;
+  font-size: 1.4rem;
+}
+.phone__state p {
+  font-size: 0.8rem;
+}
+
+/* display the drink in the center of the phone */
+.phone__drink {
+  align-self: center;
+  width: 70%;
+  height: auto;
+  margin: 1.5rem 0 0;
+}
+
+/* display the ingredients in a non-wrapping row */
+.phone__ingredients {
+  display: flex;
+  align-items: center;
+  margin: 0 0.5rem;
+  /* allow for horizontal scroll */
+  overflow-x: auto;
+}
+/* visually hide the scrollbar */
+.phone__ingredients::-webkit-scrollbar {
+  opacity: 0;
+}
+/* prevent the buttons from shrinking */
+.phone__ingredients button {
+  margin: 0.5rem;
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  position: relative;
+  font-family: inherit;
+  /* display the svg and span atop one another */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.phone__ingredients button svg {
+  width: 78px;
+  height: 78px;
+  display: block;
+  filter: drop-shadow(0 0 10px hsla(0, 0%, 0%, 0.05));
+}
+/* have the span overlap on the svg */
+.phone__ingredients button span {
+  position: relative;
+  border-radius: 20px;
+  background: #ff4966;
+  color: #fff;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  margin-top: -0.5rem;
+}
+/* on click darken the background color of the span element through an overlapping pseudo element */
+.phone__ingredients button span:before {
+  position: absolute;
+  content: "";
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: #000;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0);
+  transition-property: opacity, transform;
+  transition-duration: 0.1s;
+  transition-timing-function: ease-out;
+}
+.phone__ingredients button:active span:before {
+  opacity: 0.2;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* display the receipt on a completely white background */
+.phone__order {
+  display: flex;
+  background: #fff;
+  margin: 0.5rem 0.75rem 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 15px;
+  box-shadow: 0 1px 15px -2px #f5c3cf;
+  min-height: 75px;
+}
+/* have the heading and list stretch to occupy the available width */
+.phone__order .order--list {
+  flex-grow: 1;
+}
+.phone__order .order--list h3 {
+  font-size: 0.6rem;
+  color: #ff4966;
+  text-transform: uppercase;
+  margin-bottom: 0.1rem;
+}
+/* remove the bullet point from the unordered list */
+.phone__order .order--list ul {
+  list-style: none;
+  font-size: 0.8rem;
+  text-transform: capitalize;
+  line-height: 1.5;
+}
+
+/* highlight the button with the accent color
+replicate the active state created for the ingredients' span
+! enable this state alongside full opacity only when a class is added
+this to highlight when the button is clickable
+*/
+.phone__order button {
+  align-self: center;
+  background: #ff4966;
+  border: none;
+  color: #fff;
+  width: 30px;
+  height: 30px;
+  padding: 0.3rem;
+  border-radius: 50%;
+  opacity: 0.5;
+  cursor: not-allowed;
+  transition: opacity 0.15s ease-out;
+}
+.phone__order button svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.phone__order.complete button {
+  opacity: 1;
+  cursor: pointer;
+}
diff --git a/snowflake/README.markdown b/snowflake/README.markdown
new file mode 100644
index 0000000..542c2b3
--- /dev/null
+++ b/snowflake/README.markdown
@@ -0,0 +1,5 @@
+# snowflake
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/strangerintheq/pen/eYdZPNy](https://codepen.io/strangerintheq/pen/eYdZPNy).
+
+
diff --git a/snowflake/dist/index.html b/snowflake/dist/index.html
new file mode 100644
index 0000000..4e9e6db
--- /dev/null
+++ b/snowflake/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - snowflake</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!--  RGBA.js - my own super tiny webgl/fragment shader lib for codepen works
+      more examples at - https://codepen.io/collection/AWEWzK -->
+
+<script src="https://rawcdn.githack.com/strangerintheq/rgba/0.0.5/rgba.js"></script>
+<a target="_blank" href="https://github.com/strangerintheq/rgba">RGBA.js</a>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/snowflake/dist/script.js b/snowflake/dist/script.js
new file mode 100644
index 0000000..c9e14ec
--- /dev/null
+++ b/snowflake/dist/script.js
@@ -0,0 +1,38 @@
+RGBA(`
+        vec2 mirror(vec2 uv){
+             const float count = 3.;
+             float a = 3.1415/count/2.;
+             float cs = cos(a), sn = sin(a);
+             mat2 rot = mat2(cs, -sn, sn, cs); 
+             for (float i = 0.0; i<count; i++ )
+                 uv = abs(uv*rot);  
+             return uv;
+        }
+
+        void main() {
+            vec2 uv = gl_FragCoord.xy/resolution - 0.5;
+            uv.x *= resolution.x/resolution.y;
+            vec2 p = uv;
+            uv *= 2.4;
+            
+            for(float i = 1.; i<9.; i++) {
+                uv = mirror(uv);
+                uv -= vec2(0.31, 0.4)+length(p)*0.1;
+           
+            } 
+
+            float d = length(uv);
+            vec3 c;
+            for(float i = 0.; i<11.; i++) {
+                c.r += smoothstep(0.01, 0.0, abs(d-i*0.04))*
+                smoothstep(0.5, 0.51, fract(-.01+length(p)-time*0.1 + atan(uv.x, uv.y)/6.283));
+                c.g += smoothstep(0.01, 0.0, abs(d-i*0.04))*
+                smoothstep(0.5, 0.51, fract(-.015+length(p)-time*0.1 + atan(uv.x, uv.y)/6.283));
+                c.b += smoothstep(0.01, 0.0, abs(d-i*0.04))*
+                smoothstep(0.5, 0.51, fract(-.02+length(p)-time*0.1 + atan(uv.x, uv.y)/6.283));
+            }
+            
+            
+            gl_FragColor = vec4(vec3(c), 1.0);
+        }
+`,{record:1})
\ No newline at end of file
diff --git a/snowflake/dist/style.css b/snowflake/dist/style.css
new file mode 100644
index 0000000..2752914
--- /dev/null
+++ b/snowflake/dist/style.css
@@ -0,0 +1,7 @@
+a {
+    position: fixed;
+    left: calc(50% - 40px);
+    font-size: 20px;
+    color: white;
+    mix-blend-mode: difference;
+}
\ No newline at end of file
diff --git a/snowflake/license.txt b/snowflake/license.txt
new file mode 100644
index 0000000..ae15d12
--- /dev/null
+++ b/snowflake/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Stranger in the Q (https://codepen.io/strangerintheq/pen/eYdZPNy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/snowflake/src/index.html b/snowflake/src/index.html
new file mode 100644
index 0000000..8409bec
--- /dev/null
+++ b/snowflake/src/index.html
@@ -0,0 +1,5 @@
+<!--  RGBA.js - my own super tiny webgl/fragment shader lib for codepen works
+      more examples at - https://codepen.io/collection/AWEWzK -->
+
+<script src="https://rawcdn.githack.com/strangerintheq/rgba/0.0.5/rgba.js"></script>
+<a target="_blank" href="https://github.com/strangerintheq/rgba">RGBA.js</a>
\ No newline at end of file
diff --git a/snowflake/src/script.js b/snowflake/src/script.js
new file mode 100644
index 0000000..69552a5
--- /dev/null
+++ b/snowflake/src/script.js
@@ -0,0 +1,40 @@
+
+
+RGBA(`
+        vec2 mirror(vec2 uv){
+             const float count = 3.;
+             float a = 3.1415/count/2.;
+             float cs = cos(a), sn = sin(a);
+             mat2 rot = mat2(cs, -sn, sn, cs); 
+             for (float i = 0.0; i<count; i++ )
+                 uv = abs(uv*rot);  
+             return uv;
+        }
+
+        void main() {
+            vec2 uv = gl_FragCoord.xy/resolution - 0.5;
+            uv.x *= resolution.x/resolution.y;
+            vec2 p = uv;
+            uv *= 2.4;
+            
+            for(float i = 1.; i<9.; i++) {
+                uv = mirror(uv);
+                uv -= vec2(0.31, 0.4)+length(p)*0.1;
+           
+            } 
+
+            float d = length(uv);
+            vec3 c;
+            for(float i = 0.; i<11.; i++) {
+                c.r += smoothstep(0.01, 0.0, abs(d-i*0.04))*
+                smoothstep(0.5, 0.51, fract(-.01+length(p)-time*0.1 + atan(uv.x, uv.y)/6.283));
+                c.g += smoothstep(0.01, 0.0, abs(d-i*0.04))*
+                smoothstep(0.5, 0.51, fract(-.015+length(p)-time*0.1 + atan(uv.x, uv.y)/6.283));
+                c.b += smoothstep(0.01, 0.0, abs(d-i*0.04))*
+                smoothstep(0.5, 0.51, fract(-.02+length(p)-time*0.1 + atan(uv.x, uv.y)/6.283));
+            }
+            
+            
+            gl_FragColor = vec4(vec3(c), 1.0);
+        }
+`,{record:1})
\ No newline at end of file
diff --git a/snowflake/src/style.css b/snowflake/src/style.css
new file mode 100644
index 0000000..2752914
--- /dev/null
+++ b/snowflake/src/style.css
@@ -0,0 +1,7 @@
+a {
+    position: fixed;
+    left: calc(50% - 40px);
+    font-size: 20px;
+    color: white;
+    mix-blend-mode: difference;
+}
\ No newline at end of file
diff --git a/sorted-css-colors/README.markdown b/sorted-css-colors/README.markdown
new file mode 100644
index 0000000..ff947c4
--- /dev/null
+++ b/sorted-css-colors/README.markdown
@@ -0,0 +1,21 @@
+# Sorted CSS Colors
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pavlovsk/pen/zYvbGKe](https://codepen.io/pavlovsk/pen/zYvbGKe).
+
+# Sorted CSS Colors
+
+> I'm doing more updates, fixes and improvements to the tool in GitHub. I recommend checking the [repository](https://github.com/scriptype/sorted-colors) and live [webpage (https://enes.in/sorted-colors)](https://enes.in/sorted-colors), if you're interested in using the tool.
+
+I wanted to create a tool to sort the named CSS colors in a way that it shows related colors together. So, next time I can't decide between a few CSS colors, I can just check them here side by side.
+
+Alternative URL: [https://enes.in/sorted-colors](https://enes.in/sorted-colors)
+
+Github: [https://github.com/scriptype/sorted-colors](https://github.com/scriptype/sorted-colors)
+
+## Credits
+
+- Table of colors, which I used for parsing color data, is taken from [Eric Meyer's website](https://meyerweb.com/eric/css/colors/) and then modified a bit to serve the purpose better.
+
+- Iconfinder:
+  - [Back Icon](https://www.iconfinder.com/icons/326518/arrow_back_icon)
+  - [Github Icon](https://www.iconfinder.com/icons/298822/github_mark_icon)
diff --git a/sorted-css-colors/dist/index.html b/sorted-css-colors/dist/index.html
new file mode 100644
index 0000000..b08aa57
--- /dev/null
+++ b/sorted-css-colors/dist/index.html
@@ -0,0 +1,1117 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Sorted CSS Colors</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="hue-control">
+    <div class="hue-control-row">
+      <label for="hue-slider">
+        Hue: <span class="hue-value" id="hue-value"></span>
+      </label>
+      <input class="hue-slider" id="hue-slider" type="range" min="0" max="360" />
+      <input type="checkbox" class="mono-toggle" id="mono-toggle" aria-label="Toggle monochrome colors"></input>
+    </div>
+
+    <div class="hue-control-row">
+      <p id="tolerance-text" class="tolerance-text">hue tolerance: <span id="tolerance-value">5</span>
+    </div>
+  </div>
+
+  <div class="chart-container" id="chart-container">
+    <div id="chart" class="chart"></div>
+    <div id="color-info" class="color-info" inert="true"></div>
+    <div class="axis lightness-axis">
+      lightness
+    </div>
+    <div class="axis saturation-axis" id="saturation-axis">
+      saturation
+    </div>
+  </div>
+</div>
+
+<a href="https://github.com/scriptype/sorted-colors" target="_blank" class="github-link">
+  <svg class="github-icon" role="img" alt="Check this on Github">
+    <use xlink:href="#github-icon"></use>
+  </svg>
+</a>
+
+<svg style="display: none" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <symbol id="back-icon" viewBox="0 0 16 16">
+    <path d="M16 7H3.8l5.6-5.6L8 0 0 8l8 8 1.4-1.4L3.8 9H16V7z" fill="currentColor" fill-rule="evenodd"/>
+  </symbol>
+
+  <symbol id="github-icon" viewBox="0 0 1024 1024">
+  <path d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.688 418.125 350.156 485.812 25.594 4.688 34.938-11.125 34.938-24.625 0-12.188-.469-52.562-.719-95.312C242 908.812 211.906 817.5 211.906 817.5c-23.312-59.125-56.844-74.875-56.844-74.875-46.531-31.75 3.53-31.125 3.53-31.125 51.406 3.562 78.47 52.75 78.47 52.75 45.688 78.25 119.875 55.625 149 42.5 4.654-33 17.904-55.625 32.5-68.375-113.656-12.937-233.218-56.875-233.218-253.063 0-55.938 19.969-101.562 52.656-137.406-5.219-13-22.844-65.094 5.062-135.562 0 0 42.938-13.75 140.812 52.5 40.812-11.406 84.594-17.031 128.125-17.219 43.5.188 87.312 5.875 128.188 17.281 97.688-66.312 140.688-52.5 140.688-52.5 28 70.531 10.375 122.562 5.125 135.5 32.812 35.844 52.625 81.469 52.625 137.406 0 196.688-119.75 240-233.812 252.688 18.438 15.875 34.75 47 34.75 94.75 0 68.438-.688 123.625-.688 140.5 0 13.625 9.312 29.562 35.25 24.562C877.438 930 1024 738.125 1024 512 1024 229.25 794.75 0 512 0z"/>
+</svg>
+
+<table id="colorsTable">
+  <thead>
+    <tr>
+      <th id="name">Name</th>
+      <th id="rgb">RGB</th>
+      <th id="hsl">HSL</th>
+      <th id="hex">Hex</th>
+      <th id="alternativeName">Alternative Name</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr class="light">
+      <td>aliceblue</td>
+      <td>rgb(240,248,255)</td>
+      <td>hsl(208,100%,97.1%)</td>
+      <td>#F0F8FF</td>
+    </tr>
+
+    <tr class="light">
+      <td>antiquewhite</td>
+      <td>rgb(250,235,215)</td>
+      <td>hsl(34,77.8%,91.2%)</td>
+      <td>#FAEBD7</td>
+    </tr>
+
+    <tr class="light">
+      <td>aqua</td>
+      <td>rgb(0,255,255)</td>
+      <td>hsl(180,100%,50%)</td>
+      <td>#00FFFF</td>
+    </tr>
+
+    <tr class="light">
+      <td>aquamarine</td>
+      <td>rgb(127,255,212)</td>
+      <td>hsl(160,100%,74.9%)</td>
+      <td>#7FFFD4</td>
+    </tr>
+
+    <tr class="light">
+      <td>azure</td>
+      <td>rgb(240,255,255)</td>
+      <td>hsl(180,100%,97.1%)</td>
+      <td>#F0FFFF</td>
+    </tr>
+
+    <tr class="light">
+      <td>beige</td>
+      <td>rgb(245,245,220)</td>
+      <td>hsl(60,55.6%,91.2%)</td>
+      <td>#F5F5DC</td>
+    </tr>
+
+    <tr class="light">
+      <td>bisque</td>
+      <td>rgb(255,228,196)</td>
+      <td>hsl(33,100%,88.4%)</td>
+      <td>#FFE4C4</td>
+    </tr>
+
+    <tr class="dark">
+      <td>black</td>
+      <td>rgb(0,0,0)</td>
+      <td>hsl(0,0%,0%)</td>
+      <td>#000000</td>
+    </tr>
+
+    <tr class="light">
+      <td>blanchedalmond</td>
+      <td>rgb(255,235,205)</td>
+      <td>hsl(36,100%,90.2%)</td>
+      <td>#FFEBCD</td>
+    </tr>
+
+    <tr class="dark">
+      <td>blue</td>
+      <td>rgb(0,0,255)</td>
+      <td>hsl(240,100%,50%)</td>
+      <td>#0000FF</td>
+    </tr>
+
+    <tr class="dark">
+      <td>blueviolet</td>
+      <td>rgb(138,43,226)</td>
+      <td>hsl(271,75.9%,52.7%)</td>
+      <td>#8A2BE2</td>
+    </tr>
+
+    <tr class="dark">
+      <td>brown</td>
+      <td>rgb(165,42,42)</td>
+      <td>hsl(0,59.4%,40.6%)</td>
+      <td>#A52A2A</td>
+    </tr>
+
+    <tr class="light">
+      <td>burlywood</td>
+      <td>rgb(222,184,135)</td>
+      <td>hsl(34,56.9%,70%)</td>
+      <td>#DEB887</td>
+    </tr>
+
+    <tr class="light">
+      <td>cadetblue</td>
+      <td>rgb(95,158,160)</td>
+      <td>hsl(182,25.5%,50%)</td>
+      <td>#5F9EA0</td>
+    </tr>
+
+    <tr class="light">
+      <td>chartreuse</td>
+      <td>rgb(127,255,0)</td>
+      <td>hsl(90,100%,50%)</td>
+      <td>#7FFF00</td>
+    </tr>
+
+    <tr class="light">
+      <td>chocolate</td>
+      <td>rgb(210,105,30)</td>
+      <td>hsl(25,75%,47.1%)</td>
+      <td>#D2691E</td>
+    </tr>
+
+    <tr class="light">
+      <td>coral</td>
+      <td>rgb(255,127,80)</td>
+      <td>hsl(16,100%,65.7%)</td>
+      <td>#FF7F50</td>
+    </tr>
+
+    <tr class="light">
+      <td>cornflowerblue</td>
+      <td>rgb(100,149,237)</td>
+      <td>hsl(219,79.2%,66.1%)</td>
+      <td>#6495ED</td>
+    </tr>
+
+    <tr class="light">
+      <td>cornsilk</td>
+      <td>rgb(255,248,220)</td>
+      <td>hsl(48,100%,93.1%)</td>
+      <td>#FFF8DC</td>
+    </tr>
+
+    <tr class="dark">
+      <td>crimson</td>
+      <td>rgb(220,20,60)</td>
+      <td>hsl(348,83.3%,47.1%)</td>
+      <td>#DC143C</td>
+    </tr>
+
+    <tr class="light">
+      <td>cyan</td>
+      <td>rgb(0,255,255)</td>
+      <td>hsl(180,100%,50%)</td>
+      <td>#00FFFF</td>
+      <td>aqua</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkblue</td>
+      <td>rgb(0,0,139)</td>
+      <td>hsl(240,100%,27.3%)</td>
+      <td>#00008B</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkcyan</td>
+      <td>rgb(0,139,139)</td>
+      <td>hsl(180,100%,27.3%)</td>
+      <td>#008B8B</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkgoldenrod</td>
+      <td>rgb(184,134,11)</td>
+      <td>hsl(43,88.7%,38.2%)</td>
+      <td>#B8860B</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkgray</td>
+      <td>rgb(169,169,169)</td>
+      <td>hsl(0,0%,66.3%)</td>
+      <td>#A9A9A9</td>
+      <td>darkgrey</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkgreen</td>
+      <td>rgb(0,100,0)</td>
+      <td>hsl(120,100%,19.6%)</td>
+      <td>#006400</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkgrey</td>
+      <td>rgb(169,169,169)</td>
+      <td>hsl(0,0%,66.3%)</td>
+      <td>#A9A9A9</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkkhaki</td>
+      <td>rgb(189,183,107)</td>
+      <td>hsl(56,38.3%,58%)</td>
+      <td>#BDB76B</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkmagenta</td>
+      <td>rgb(139,0,139)</td>
+      <td>hsl(300,100%,27.3%)</td>
+      <td>#8B008B</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkolivegreen</td>
+      <td>rgb(85,107,47)</td>
+      <td>hsl(82,39%,30.2%)</td>
+      <td>#556B2F</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkorange</td>
+      <td>rgb(255,140,0)</td>
+      <td>hsl(33,100%,50%)</td>
+      <td>#FF8C00</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkorchid</td>
+      <td>rgb(153,50,204)</td>
+      <td>hsl(280,60.6%,49.8%)</td>
+      <td>#9932CC</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkred</td>
+      <td>rgb(139,0,0)</td>
+      <td>hsl(0,100%,27.3%)</td>
+      <td>#8B0000</td>
+    </tr>
+
+    <tr class="light">
+      <td>darksalmon</td>
+      <td>rgb(233,150,122)</td>
+      <td>hsl(15,71.6%,69.6%)</td>
+      <td>#E9967A</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkseagreen</td>
+      <td>rgb(143,188,143)</td>
+      <td>hsl(120,25.1%,64.9%)</td>
+      <td>#8FBC8F</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkslateblue</td>
+      <td>rgb(72,61,139)</td>
+      <td>hsl(248,39%,39.2%)</td>
+      <td>#483D8B</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkslategray</td>
+      <td>rgb(47,79,79)</td>
+      <td>hsl(180,25.4%,24.7%)</td>
+      <td>#2F4F4F</td>
+      <td>darkslategrey</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkslategrey</td>
+      <td>rgb(47,79,79)</td>
+      <td>hsl(180,25.4%,24.7%)</td>
+      <td>#2F4F4F</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkturquoise</td>
+      <td>rgb(0,206,209)</td>
+      <td>hsl(181,100%,41%)</td>
+      <td>#00CED1</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkviolet</td>
+      <td>rgb(148,0,211)</td>
+      <td>hsl(282,100%,41.4%)</td>
+      <td>#9400D3</td>
+    </tr>
+
+    <tr class="dark">
+      <td>deeppink</td>
+      <td>rgb(255,20,147)</td>
+      <td>hsl(328,100%,53.9%)</td>
+      <td>#FF1493</td>
+    </tr>
+
+    <tr class="light">
+      <td>deepskyblue</td>
+      <td>rgb(0,191,255)</td>
+      <td>hsl(195,100%,50%)</td>
+      <td>#00BFFF</td>
+    </tr>
+
+    <tr class="dark">
+      <td>dimgray</td>
+      <td>rgb(105,105,105)</td>
+      <td>hsl(0,0%,41.2%)</td>
+      <td>#696969</td>
+      <td>dimgrey</td>
+    </tr>
+
+    <tr class="dark">
+      <td>dimgrey</td>
+      <td>rgb(105,105,105)</td>
+      <td>hsl(0,0%,41.2%)</td>
+      <td>#696969</td>
+    </tr>
+
+    <tr class="dark">
+      <td>dodgerblue</td>
+      <td>rgb(30,144,255)</td>
+      <td>hsl(210,100%,55.9%)</td>
+      <td>#1E90FF</td>
+    </tr>
+
+    <tr class="dark">
+      <td>firebrick</td>
+      <td>rgb(178,34,34)</td>
+      <td>hsl(0,67.9%,41.6%)</td>
+      <td>#B22222</td>
+    </tr>
+
+    <tr class="light">
+      <td>floralwhite</td>
+      <td>rgb(255,250,240)</td>
+      <td>hsl(40,100%,97.1%)</td>
+      <td>#FFFAF0</td>
+    </tr>
+
+    <tr class="dark">
+      <td>forestgreen</td>
+      <td>rgb(34,139,34)</td>
+      <td>hsl(120,60.7%,33.9%)</td>
+      <td>#228B22</td>
+    </tr>
+
+    <tr class="light">
+      <td>fuchsia</td>
+      <td>rgb(255,0,255)</td>
+      <td>hsl(300,100%,50%)</td>
+      <td>#FF00FF</td>
+    </tr>
+
+    <tr class="light">
+      <td>gainsboro</td>
+      <td>rgb(220,220,220)</td>
+      <td>hsl(0,0%,86.3%)</td>
+      <td>#DCDCDC</td>
+    </tr>
+
+    <tr class="light">
+      <td>ghostwhite</td>
+      <td>rgb(248,248,255)</td>
+      <td>hsl(240,100%,98.6%)</td>
+      <td>#F8F8FF</td>
+    </tr>
+
+    <tr class="light">
+      <td>gold</td>
+      <td>rgb(255,215,0)</td>
+      <td>hsl(51,100%,50%)</td>
+      <td>#FFD700</td>
+    </tr>
+
+    <tr class="light">
+      <td>goldenrod</td>
+      <td>rgb(218,165,32)</td>
+      <td>hsl(43,74.4%,49%)</td>
+      <td>#DAA520</td>
+    </tr>
+
+    <tr class="light">
+      <td>gray</td>
+      <td>rgb(128,128,128)</td>
+      <td>hsl(0,0%,50.2%)</td>
+      <td>#808080</td>
+      <td>grey</td>
+    </tr>
+
+    <tr class="dark">
+      <td>green</td>
+      <td>rgb(0,128,0)</td>
+      <td>hsl(120,100%,25.1%)</td>
+      <td>#008000</td>
+    </tr>
+
+    <tr class="light">
+      <td>greenyellow</td>
+      <td>rgb(173,255,47)</td>
+      <td>hsl(84,100%,59.2%)</td>
+      <td>#ADFF2F</td>
+    </tr>
+
+    <tr class="light">
+      <td>grey</td>
+      <td>rgb(128,128,128)</td>
+      <td>hsl(0,0%,50.2%)</td>
+      <td>#808080</td>
+    </tr>
+
+    <tr class="light">
+      <td>honeydew</td>
+      <td>rgb(240,255,240)</td>
+      <td>hsl(120,100%,97.1%)</td>
+      <td>#F0FFF0</td>
+    </tr>
+
+    <tr class="light">
+      <td>hotpink</td>
+      <td>rgb(255,105,180)</td>
+      <td>hsl(330,100%,70.6%)</td>
+      <td>#FF69B4</td>
+    </tr>
+
+    <tr class="light">
+      <td>indianred</td>
+      <td>rgb(205,92,92)</td>
+      <td>hsl(0,53.1%,58.2%)</td>
+      <td>#CD5C5C</td>
+    </tr>
+
+    <tr class="dark">
+      <td>indigo</td>
+      <td>rgb(75,0,130)</td>
+      <td>hsl(275,100%,25.5%)</td>
+      <td>#4B0082</td>
+    </tr>
+
+    <tr class="light">
+      <td>ivory</td>
+      <td>rgb(255,255,240)</td>
+      <td>hsl(60,100%,97.1%)</td>
+      <td>#FFFFF0</td>
+    </tr>
+
+    <tr class="light">
+      <td>khaki</td>
+      <td>rgb(240,230,140)</td>
+      <td>hsl(54,76.9%,74.5%)</td>
+      <td>#F0E68C</td>
+    </tr>
+
+    <tr class="light">
+      <td>lavender</td>
+      <td>rgb(230,230,250)</td>
+      <td>hsl(240,66.7%,94.1%)</td>
+      <td>#E6E6FA</td>
+    </tr>
+
+    <tr class="light">
+      <td>lavenderblush</td>
+      <td>rgb(255,240,245)</td>
+      <td>hsl(340,100%,97.1%)</td>
+      <td>#FFF0F5</td>
+    </tr>
+
+    <tr class="light">
+      <td>lawngreen</td>
+      <td>rgb(124,252,0)</td>
+      <td>hsl(90,100%,49.4%)</td>
+      <td>#7CFC00</td>
+    </tr>
+
+    <tr class="light">
+      <td>lemonchiffon</td>
+      <td>rgb(255,250,205)</td>
+      <td>hsl(54,100%,90.2%)</td>
+      <td>#FFFACD</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightblue</td>
+      <td>rgb(173,216,230)</td>
+      <td>hsl(195,53.3%,79%)</td>
+      <td>#ADD8E6</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightcoral</td>
+      <td>rgb(240,128,128)</td>
+      <td>hsl(0,78.9%,72.2%)</td>
+      <td>#F08080</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightcyan</td>
+      <td>rgb(224,255,255)</td>
+      <td>hsl(180,100%,93.9%)</td>
+      <td>#E0FFFF</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightgoldenrodyellow</td>
+      <td>rgb(250,250,210)</td>
+      <td>hsl(60,80%,90.2%)</td>
+      <td>#FAFAD2</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightgray</td>
+      <td>rgb(211,211,211)</td>
+      <td>hsl(0,0%,82.7%)</td>
+      <td>#D3D3D3</td>
+      <td>lightgrey</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightgreen</td>
+      <td>rgb(144,238,144)</td>
+      <td>hsl(120,73.4%,74.9%)</td>
+      <td>#90EE90</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightgrey</td>
+      <td>rgb(211,211,211)</td>
+      <td>hsl(0,0%,82.7%)</td>
+      <td>#D3D3D3</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightpink</td>
+      <td>rgb(255,182,193)</td>
+      <td>hsl(351,100%,85.7%)</td>
+      <td>#FFB6C1</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightsalmon</td>
+      <td>rgb(255,160,122)</td>
+      <td>hsl(17,100%,73.9%)</td>
+      <td>#FFA07A</td>
+    </tr>
+
+    <tr class="dark">
+      <td>lightseagreen</td>
+      <td>rgb(32,178,170)</td>
+      <td>hsl(177,69.5%,41.2%)</td>
+      <td>#20B2AA</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightskyblue</td>
+      <td>rgb(135,206,250)</td>
+      <td>hsl(203,92%,75.5%)</td>
+      <td>#87CEFA</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightslategray</td>
+      <td>rgb(119,136,153)</td>
+      <td>hsl(210,14.3%,53.3%)</td>
+      <td>#778899</td>
+      <td>lightslategrey</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightslategrey</td>
+      <td>rgb(119,136,153)</td>
+      <td>hsl(210,14.3%,53.3%)</td>
+      <td>#778899</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightsteelblue</td>
+      <td>rgb(176,196,222)</td>
+      <td>hsl(214,41.1%,78%)</td>
+      <td>#B0C4DE</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightyellow</td>
+      <td>rgb(255,255,224)</td>
+      <td>hsl(60,100%,93.9%)</td>
+      <td>#FFFFE0</td>
+    </tr>
+
+    <tr class="light">
+      <td>lime</td>
+      <td>rgb(0,255,0)</td>
+      <td>hsl(120,100%,50%)</td>
+      <td>#00FF00</td>
+    </tr>
+
+    <tr class="light">
+      <td>limegreen</td>
+      <td>rgb(50,205,50)</td>
+      <td>hsl(120,60.8%,50%)</td>
+      <td>#32CD32</td>
+    </tr>
+
+    <tr class="light">
+      <td>linen</td>
+      <td>rgb(250,240,230)</td>
+      <td>hsl(30,66.7%,94.1%)</td>
+      <td>#FAF0E6</td>
+    </tr>
+
+    <tr class="light">
+      <td>magenta</td>
+      <td>rgb(255,0,255)</td>
+      <td>hsl(300,100%,50%)</td>
+      <td>#FF00FF</td>
+      <td>fuchsia</td>
+    </tr>
+
+    <tr class="dark">
+      <td>maroon</td>
+      <td>rgb(128,0,0)</td>
+      <td>hsl(0,100%,25.1%)</td>
+      <td>#800000</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumaquamarine</td>
+      <td>rgb(102,205,170)</td>
+      <td>hsl(160,50.7%,60.2%)</td>
+      <td>#66CDAA</td>
+    </tr>
+
+    <tr class="dark">
+      <td>mediumblue</td>
+      <td>rgb(0,0,205)</td>
+      <td>hsl(240,100%,40.2%)</td>
+      <td>#0000CD</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumorchid</td>
+      <td>rgb(186,85,211)</td>
+      <td>hsl(288,58.9%,58%)</td>
+      <td>#BA55D3</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumpurple</td>
+      <td>rgb(147,112,219)</td>
+      <td>hsl(260,59.8%,64.9%)</td>
+      <td>#9370DB</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumseagreen</td>
+      <td>rgb(60,179,113)</td>
+      <td>hsl(147,49.8%,46.9%)</td>
+      <td>#3CB371</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumslateblue</td>
+      <td>rgb(123,104,238)</td>
+      <td>hsl(249,79.8%,67.1%)</td>
+      <td>#7B68EE</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumspringgreen</td>
+      <td>rgb(0,250,154)</td>
+      <td>hsl(157,100%,49%)</td>
+      <td>#00FA9A</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumturquoise</td>
+      <td>rgb(72,209,204)</td>
+      <td>hsl(178,59.8%,55.1%)</td>
+      <td>#48D1CC</td>
+    </tr>
+
+    <tr class="dark">
+      <td>mediumvioletred</td>
+      <td>rgb(199,21,133)</td>
+      <td>hsl(322,80.9%,43.1%)</td>
+      <td>#C71585</td>
+    </tr>
+
+    <tr class="dark">
+      <td>midnightblue</td>
+      <td>rgb(25,25,112)</td>
+      <td>hsl(240,63.5%,26.9%)</td>
+      <td>#191970</td>
+    </tr>
+
+    <tr class="light">
+      <td>mintcream</td>
+      <td>rgb(245,255,250)</td>
+      <td>hsl(150,100%,98%)</td>
+      <td>#F5FFFA</td>
+    </tr>
+
+    <tr class="light">
+      <td>mistyrose</td>
+      <td>rgb(255,228,225)</td>
+      <td>hsl(6,100%,94.1%)</td>
+      <td>#FFE4E1</td>
+    </tr>
+
+    <tr class="light">
+      <td>moccasin</td>
+      <td>rgb(255,228,181)</td>
+      <td>hsl(38,100%,85.5%)</td>
+      <td>#FFE4B5</td>
+    </tr>
+
+    <tr class="light">
+      <td>navajowhite</td>
+      <td>rgb(255,222,173)</td>
+      <td>hsl(36,100%,83.9%)</td>
+      <td>#FFDEAD</td>
+    </tr>
+
+    <tr class="dark">
+      <td>navy</td>
+      <td>rgb(0,0,128)</td>
+      <td>hsl(240,100%,25.1%)</td>
+      <td>#000080</td>
+    </tr>
+
+    <tr class="light">
+      <td>oldlace</td>
+      <td>rgb(253,245,230)</td>
+      <td>hsl(39,85.2%,94.7%)</td>
+      <td>#FDF5E6</td>
+    </tr>
+
+    <tr class="dark">
+      <td>olive</td>
+      <td>rgb(128,128,0)</td>
+      <td>hsl(60,100%,25.1%)</td>
+      <td>#808000</td>
+    </tr>
+
+    <tr class="dark">
+      <td>olivedrab</td>
+      <td>rgb(107,142,35)</td>
+      <td>hsl(80,60.5%,34.7%)</td>
+      <td>#6B8E23</td>
+    </tr>
+
+    <tr class="light">
+      <td>orange</td>
+      <td>rgb(255,165,0)</td>
+      <td>hsl(39,100%,50%)</td>
+      <td>#FFA500</td>
+    </tr>
+
+    <tr class="light">
+      <td>orangered</td>
+      <td>rgb(255,69,0)</td>
+      <td>hsl(16,100%,50%)</td>
+      <td>#FF4500</td>
+    </tr>
+
+    <tr class="light">
+      <td>orchid</td>
+      <td>rgb(218,112,214)</td>
+      <td>hsl(302,58.9%,64.7%)</td>
+      <td>#DA70D6</td>
+    </tr>
+
+    <tr class="light">
+      <td>palegoldenrod</td>
+      <td>rgb(238,232,170)</td>
+      <td>hsl(55,66.7%,80%)</td>
+      <td>#EEE8AA</td>
+    </tr>
+
+    <tr class="light">
+      <td>palegreen</td>
+      <td>rgb(152,251,152)</td>
+      <td>hsl(120,92.5%,79%)</td>
+      <td>#98FB98</td>
+    </tr>
+
+    <tr class="light">
+      <td>paleturquoise</td>
+      <td>rgb(175,238,238)</td>
+      <td>hsl(180,64.9%,81%)</td>
+      <td>#AFEEEE</td>
+    </tr>
+
+    <tr class="light">
+      <td>palevioletred</td>
+      <td>rgb(219,112,147)</td>
+      <td>hsl(340,59.8%,64.9%)</td>
+      <td>#DB7093</td>
+    </tr>
+
+    <tr class="light">
+      <td>papayawhip</td>
+      <td>rgb(255,239,213)</td>
+      <td>hsl(37,100%,91.8%)</td>
+      <td>#FFEFD5</td>
+    </tr>
+
+    <tr class="light">
+      <td>peachpuff</td>
+      <td>rgb(255,218,185)</td>
+      <td>hsl(28,100%,86.3%)</td>
+      <td>#FFDAB9</td>
+    </tr>
+
+    <tr class="light">
+      <td>peru</td>
+      <td>rgb(205,133,63)</td>
+      <td>hsl(30,58.7%,52.5%)</td>
+      <td>#CD853F</td>
+    </tr>
+
+    <tr class="light">
+      <td>pink</td>
+      <td>rgb(255,192,203)</td>
+      <td>hsl(350,100%,87.6%)</td>
+      <td>#FFC0CB</td>
+    </tr>
+
+    <tr class="light">
+      <td>plum</td>
+      <td>rgb(221,160,221)</td>
+      <td>hsl(300,47.3%,74.7%)</td>
+      <td>#DDA0DD</td>
+    </tr>
+
+    <tr class="light">
+      <td>powderblue</td>
+      <td>rgb(176,224,230)</td>
+      <td>hsl(187,51.9%,79.6%)</td>
+      <td>#B0E0E6</td>
+    </tr>
+
+    <tr class="dark">
+      <td>purple</td>
+      <td>rgb(128,0,128)</td>
+      <td>hsl(300,100%,25.1%)</td>
+      <td>#800080</td>
+    </tr>
+
+    <tr class="dark">
+      <td>rebeccapurple</td>
+      <td>rgb(102,51,153)</td>
+      <td>hsl(270,50%,40%)</td>
+      <td>#663399</td>
+    </tr>
+
+    <tr class="dark">
+      <td>red</td>
+      <td>rgb(255,0,0)</td>
+      <td>hsl(0,100%,50%)</td>
+      <td>#FF0000</td>
+    </tr>
+
+    <tr class="light">
+      <td>rosybrown</td>
+      <td>rgb(188,143,143)</td>
+      <td>hsl(0,25.1%,64.9%)</td>
+      <td>#BC8F8F</td>
+    </tr>
+
+    <tr class="dark">
+      <td>royalblue</td>
+      <td>rgb(65,105,225)</td>
+      <td>hsl(225,72.7%,56.9%)</td>
+      <td>#4169E1</td>
+    </tr>
+
+    <tr class="dark">
+      <td>saddlebrown</td>
+      <td>rgb(139,69,19)</td>
+      <td>hsl(25,75.9%,31%)</td>
+      <td>#8B4513</td>
+    </tr>
+
+    <tr class="light">
+      <td>salmon</td>
+      <td>rgb(250,128,114)</td>
+      <td>hsl(6,93.2%,71.4%)</td>
+      <td>#FA8072</td>
+    </tr>
+
+    <tr class="light">
+      <td>sandybrown</td>
+      <td>rgb(244,164,96)</td>
+      <td>hsl(28,87.1%,66.7%)</td>
+      <td>#F4A460</td>
+    </tr>
+
+    <tr class="dark">
+      <td>seagreen</td>
+      <td>rgb(46,139,87)</td>
+      <td>hsl(146,50.3%,36.3%)</td>
+      <td>#2E8B57</td>
+    </tr>
+
+    <tr class="light">
+      <td>seashell</td>
+      <td>rgb(255,245,238)</td>
+      <td>hsl(25,100%,96.7%)</td>
+      <td>#FFF5EE</td>
+    </tr>
+
+    <tr class="dark">
+      <td>sienna</td>
+      <td>rgb(160,82,45)</td>
+      <td>hsl(19,56.1%,40.2%)</td>
+      <td>#A0522D</td>
+    </tr>
+
+    <tr class="light">
+      <td>silver</td>
+      <td>rgb(192,192,192)</td>
+      <td>hsl(0,0%,75.3%)</td>
+      <td>#C0C0C0</td>
+    </tr>
+
+    <tr class="light">
+      <td>skyblue</td>
+      <td>rgb(135,206,235)</td>
+      <td>hsl(197,71.4%,72.5%)</td>
+      <td>#87CEEB</td>
+    </tr>
+
+    <tr class="dark">
+      <td>slateblue</td>
+      <td>rgb(106,90,205)</td>
+      <td>hsl(248,53.5%,57.8%)</td>
+      <td>#6A5ACD</td>
+    </tr>
+
+    <tr class="dark">
+      <td>slategray</td>
+      <td>rgb(112,128,144)</td>
+      <td>hsl(210,12.6%,50.2%)</td>
+      <td>#708090</td>
+      <td>slategrey</td>
+    </tr>
+    <tr class="dark">
+      <td>slategrey</td>
+      <td>rgb(112,128,144)</td>
+      <td>hsl(210,12.6%,50.2%)</td>
+      <td>#708090</td>
+    </tr>
+
+    <tr class="light">
+      <td>snow</td>
+      <td>rgb(255,250,250)</td>
+      <td>hsl(0,100%,99%)</td>
+      <td>#FFFAFA</td>
+    </tr>
+
+    <tr class="light">
+      <td>springgreen</td>
+      <td>rgb(0,255,127)</td>
+      <td>hsl(150,100%,50%)</td>
+      <td>#00FF7F</td>
+    </tr>
+
+    <tr class="dark">
+      <td>steelblue</td>
+      <td>rgb(70,130,180)</td>
+      <td>hsl(207,44%,49%)</td>
+      <td>#4682B4</td>
+    </tr>
+
+    <tr class="light">
+      <td>tan</td>
+      <td>rgb(210,180,140)</td>
+      <td>hsl(34,43.8%,68.6%)</td>
+      <td>#D2B48C</td>
+    </tr>
+
+    <tr class="dark">
+      <td>teal</td>
+      <td>rgb(0,128,128)</td>
+      <td>hsl(180,100%,25.1%)</td>
+      <td>#008080</td>
+    </tr>
+
+    <tr class="light">
+      <td>thistle</td>
+      <td>rgb(216,191,216)</td>
+      <td>hsl(300,24.3%,79.8%)</td>
+      <td>#D8BFD8</td>
+    </tr>
+
+    <tr class="light">
+      <td>tomato</td>
+      <td>rgb(255,99,71)</td>
+      <td>hsl(9,100%,63.9%)</td>
+      <td>#FF6347</td>
+    </tr>
+
+    <tr class="light">
+      <td>turquoise</td>
+      <td>rgb(64,224,208)</td>
+      <td>hsl(174,72.1%,56.5%)</td>
+      <td>#40E0D0</td>
+    </tr>
+
+    <tr class="light">
+      <td>violet</td>
+      <td>rgb(238,130,238)</td>
+      <td>hsl(300,76.1%,72.2%)</td>
+      <td>#EE82EE</td>
+    </tr>
+
+    <tr class="light">
+      <td>wheat</td>
+      <td>rgb(245,222,179)</td>
+      <td>hsl(39,76.7%,83.1%)</td>
+      <td>#F5DEB3</td>
+    </tr>
+
+    <tr class="light">
+      <td>white</td>
+      <td>rgb(255,255,255)</td>
+      <td>hsl(0,0%,100%)</td>
+      <td>#FFFFFF</td>
+    </tr>
+
+    <tr class="light">
+      <td>whitesmoke</td>
+      <td>rgb(245,245,245)</td>
+      <td>hsl(0,0%,96.1%)</td>
+      <td>#F5F5F5</td>
+    </tr>
+
+    <tr class="light">
+      <td>yellow</td>
+      <td>rgb(255,255,0)</td>
+      <td>hsl(60,100%,50%)</td>
+      <td>#FFFF00</td>
+    </tr>
+
+    <tr class="light">
+      <td>yellowgreen</td>
+      <td>rgb(154,205,50)</td>
+      <td>hsl(80,60.8%,50%)</td>
+      <td>#9ACD32</td>
+    </tr>
+  </tbody>
+</table>
+<!-- partial -->
+  <script src='https://cdn.polyfill.io/v2/polyfill.min.js?features=Map,Set,Element.prototype.matches,Node.prototype.contains'></script>
+<script src='https://unpkg.com/wicg-inert@3.0.2/dist/inert.min.js'></script>
+<script src='https://unpkg.com/select@1.1.2/src/select.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/sorted-css-colors/dist/script.js b/sorted-css-colors/dist/script.js
new file mode 100644
index 0000000..dc328fe
--- /dev/null
+++ b/sorted-css-colors/dist/script.js
@@ -0,0 +1,376 @@
+const { abs, floor, random } = Math;
+
+const randomFrom = array => array[floor(random() * array.length)];
+
+const getNumbers = n => [...Array(n).keys()];
+
+const wait = duration => new Promise(resolve => {
+  setTimeout(resolve, duration);
+});
+
+const query = (selector, parent = document) =>
+parent.querySelector.call(parent, selector);
+
+const queryAll = (selector, parent = document) =>
+Array.from(parent.querySelectorAll.call(parent, selector));
+
+const queryId = document.getElementById.bind(document);
+
+const parseDataFromTable = tableID => {
+  const table = queryId(tableID);
+  const headers = queryAll('thead th', table);
+  const values = queryAll('tbody tr', table);
+
+  const columns = headers.map(header => ({
+    id: header.id,
+    name: header.innerText }));
+
+
+  const rows = values.map(value => {
+    const cells = queryAll('td', value);
+    return cells.reduce((row, cell, colIndex) => {
+      const columnId = columns[colIndex].id;
+      return {
+        ...row,
+        [columnId]: cell.innerText };
+
+    }, {
+      type: value.getAttribute('class') });
+
+  });
+
+  return {
+    columns,
+    rows };
+
+};
+
+/*
+    * For each color in colorList, check if there's an equivalent color
+    * with a different name.
+    * Eliminate the non-preferred colors that have equivalents.
+    * A color can be thought "preferred", if it has `alternativeName` field in it.
+    * e.g. Eliminates fuchsia and aqua in favor of magenta and cyan, respectively.
+    */
+const removeAlternativeColors = colorList => {
+  return colorList.map((color, index) => {
+    const equivalent = colorList.find(c => c !== color && c.hex === color.hex);
+    if (!equivalent || color.alternativeName === equivalent.name) {
+      return color;
+    }
+    return null;
+  }).filter(c => !!c);
+};
+
+const parseColorStrings = color => ({
+  ...color,
+  rgb: color.rgb.match(/rgb\((\d+),(\d+),(\d+)\)/).slice(1).map(Number),
+  hsl: color.hsl.match(/hsl\((.*),(.*)%,(.*)%\)/).slice(1).map(Number) });
+
+
+const isMonochrome = color => color.hsl[1] === 0;
+const isNonMonochrome = color => !isMonochrome(color);
+
+const filterColorsByHue = (colorList, hue, tolerance) => {
+  const colors = colorList.filter(color => abs(hue - color.hsl[0]) < tolerance);
+  if (colors.length) {
+    return {
+      list: colors,
+      tolerance };
+
+  }
+  return filterColorsByHue(colorList, hue, tolerance + 1);
+};
+
+const groupColorsByLightness = (colorList, tolerance) => {
+  return getNumbers(100 / tolerance + 1).map((t) =>
+  colorList.filter(color => {
+    const difference = 100 - color.hsl[2] - t * tolerance;
+    const differenceLimit = tolerance / 2;
+    if (abs(difference) === differenceLimit) {
+      return difference > 0;
+    }
+    return abs(difference) < differenceLimit;
+  }));
+
+};
+
+const groupColors = ({ colorList, hue, tolerance, mono }) => {
+  const baseColors = colorList.filter(mono ? isMonochrome : isNonMonochrome);
+  const sortedColors = [...baseColors].sort((a, b) => a.hsl[1] - b.hsl[1]);
+
+  const colorsFilteredByHue = filterColorsByHue(sortedColors, hue, tolerance.min);
+
+  const lightnessGroups = groupColorsByLightness(colorsFilteredByHue.list, tolerance.min);
+
+  const finalColorsList = lightnessGroups.filter(group => !!group.length);
+
+  return {
+    list: finalColorsList,
+    tolerance: colorsFilteredByHue.tolerance };
+
+};
+
+const colorsData = parseDataFromTable('colorsTable');
+const uniqueColors = removeAlternativeColors(colorsData.rows);
+const parsedUniqueColors = uniqueColors.map(parseColorStrings);
+
+const createState = (initialState, onChange) => {
+  return {
+    state: initialState,
+    setState(newState) {
+      this.state = Object.assign({}, this.state, newState);
+      onChange(this.state);
+    } };
+
+};
+
+const dom = {
+  chart: queryId('chart'),
+  chartContainer: queryId('chart-container'),
+  hueSlider: queryId('hue-slider'),
+  hueValueDisplay: queryId('hue-value'),
+  toleranceText: queryId('tolerance-text'),
+  toleranceValueDisplay: queryId('tolerance-value'),
+  monoToggle: queryId('mono-toggle'),
+  colorInfo: queryId('color-info'),
+  saturationAxis: queryId('saturation-axis') };
+
+
+const render = state => {
+  const { hue, mono } = state;
+
+  const colorList = groupColors({
+    colorList: parsedUniqueColors,
+    tolerance: {
+      min: 5 },
+
+    hue,
+    mono });
+
+
+  const html = colorList.list.map(lightnessGroup => `
+    <div class="row">
+      ${lightnessGroup.map(({ name, type }) => {
+    const CSSProperties = [
+    `--background: ${name}`,
+    `--color: ${type === 'light' ? 'black' : 'white'}`];
+
+
+    return `
+          <button
+            type="button"
+            class="color-button"
+            id="${name}"
+            style="${CSSProperties.join(';')}"
+          >
+            ${name}
+          </button>
+        `;
+  }).join('')}
+    </div>
+  `).join('');
+
+  const sliderPos = hue / 360;
+
+  dom.hueSlider.classList.toggle('mono', !!mono);
+  dom.toleranceText.classList.toggle('hidden', !!mono);
+  dom.saturationAxis.classList.toggle('hidden', !!mono);
+  if (mono) {
+    dom.hueValueDisplay.innerText = 0;
+  } else {
+    dom.hueValueDisplay.innerText = hue;
+  }
+
+  dom.hueSlider.style.setProperty('--pos', sliderPos);
+  dom.hueSlider.value = hue;
+  dom.toleranceValueDisplay.innerHTML = colorList.tolerance;
+  dom.chart.innerHTML = html;
+};
+
+const formatRGB = rgb => `rgb(${rgb.join(', ')})`;
+
+const formatHSL = hsl => `hsl(${hsl.map((_, i) => i === 0 ? _ : `${_}%`).join(', ')})`;
+
+const renderColorInfo = color => {
+  const { type, name, alternativeName, rgb, hsl, hex } = color;
+
+  const CSSProperties = [
+  `--background: ${name}`,
+  `--color: ${type === 'light' ? 'black' : 'white'}`];
+
+
+  dom.colorInfo.innerHTML = `
+    <div class="color-info-container" style="${CSSProperties.join(';')}">
+      <h1 class="selectable color-info-name" tabindex="0">
+        <span class="marquee">${name}</span>
+      </h1>
+
+      ${color.alternativeName ? `
+        <p class="color-info-row color-info-row--alter" tabindex="0">
+          or <span class="selectable">${color.alternativeName}</span>
+        </p>
+      ` : ''}
+
+      <p class="selectable color-info-row color-info-row--hex" tabindex="0">
+        ${color.hex}
+      </p>
+
+      <p class="selectable color-info-row color-info-row--rgb" tabindex="0">
+        ${formatRGB(color.rgb)}
+      </p>
+
+      <p class="selectable color-info-row color-info-row--hsl" tabindex="0">
+        ${formatHSL(color.hsl)}
+      </p>
+
+      <button
+        type="button"
+        class="color-info-close-button"
+        id="close-color-info"
+      >
+        <svg class="back-icon" role="img" alt="back icon">
+          <use xlink:href="#back-icon"></use>
+        </svg>
+        back
+      </button>
+    </div>
+  `;
+
+  const container = query('.color-info-container', dom.colorInfo);
+
+  const closeButton = query('#close-color-info', container);
+  closeButton.addEventListener('click', () => hideColorInfo(true));
+
+  queryAll('.selectable', container).forEach(el => {
+    el.addEventListener('click', () => select(el));
+    el.addEventListener('focus', () => select(el));
+  });
+
+  wait(1000).then(() => {
+    const computedStyle = getComputedStyle(container);
+    const width = parseFloat(computedStyle.width);
+    const paddingLeft = parseFloat(computedStyle.paddingLeft);
+    const paddingRight = parseFloat(computedStyle.paddingRight);
+    const containerWidth = width - (paddingLeft + paddingRight);
+    queryAll('.marquee', dom.colorInfo).forEach(el => {
+      const width = el.offsetWidth;
+      const widthDiff = containerWidth - width;
+      if (widthDiff >= 0) {
+        el.classList.remove('marquee');
+        return;
+      }
+      el.style.setProperty('--marquee-amount', `${widthDiff}px`);
+    });
+  });
+};
+
+const showColorInfo = e => {
+  if (query('.deactivating', dom.chartContainer)) {
+    return;
+  }
+
+  dom.chart.inert = true;
+  dom.colorInfo.inert = false;
+  dom.chart.classList.add('contain');
+  e.target.classList.add('active');
+
+  const color = parsedUniqueColors.find(c => c.name === e.target.id);
+  renderColorInfo(color);
+  dom.colorInfo.classList.add('active');
+};
+
+/*
+    * Can be triggered by:
+    * - Clicking on close button in colorInfo
+    * - Pressing ESC
+    * - Changing hue while colorInfo is open
+    *   This scenario requires checking if activeColorButton exists.
+    */
+const hideColorInfo = shouldFocusBack => {
+  dom.chart.inert = false;
+  dom.colorInfo.inert = true;
+  dom.colorInfo.classList.add('deactivating');
+  dom.colorInfo.classList.remove('active');
+  const activeColorButton = query('.color-button.active', dom.chart);
+  if (activeColorButton) {
+    activeColorButton.classList.add('deactivating');
+    activeColorButton.classList.remove('active');
+  }
+
+  wait(600).then(() => {
+    dom.colorInfo.classList.remove('deactivating');
+
+    // Last clicked color is still there. e.g. hue didn't change
+    if (activeColorButton) {
+      dom.chart.classList.remove('contain');
+
+      /*
+                                              * The crazy reason why we need to clone an element
+                                              * with one className lacking, instead of just
+                                              * removing that className from the existing element is:
+                                              * Some mobile browsers and some (I guess) old versions
+                                              * of Safari fucks up the animation. They run
+                                              * "deactivate" keyframes upon className removal ¯\_(ツ)_/¯
+                                              * When we do it this way and do it with some async
+                                              * involved, it works properly.
+                                              */
+      const newActiveColorButton = activeColorButton.cloneNode(true);
+      newActiveColorButton.classList.remove('deactivating');
+      requestAnimationFrame(() => {
+        if (activeColorButton) {
+          activeColorButton.replaceWith(newActiveColorButton);
+          if (shouldFocusBack) {
+            newActiveColorButton.focus();
+          }
+        }
+      });
+    }
+  });
+};
+
+const exampleHues = [13, 25, 36, 47, 105, 150, 178, 210, 240, 297, 336, 350];
+
+const ui = createState({
+  hue: randomFrom(exampleHues),
+  mono: false },
+render);
+
+render(ui.state);
+
+dom.monoToggle.addEventListener('change', e => {
+  ui.setState({
+    mono: e.target.checked,
+    prevHue: ui.state.hue,
+    hue: e.target.checked ? 0 : ui.state.prevHue });
+
+  hideColorInfo();
+});
+
+dom.hueSlider.addEventListener('input', e => {
+  ui.setState({
+    hue: Number(e.target.value) });
+
+  hideColorInfo();
+});
+
+dom.chart.addEventListener('click', showColorInfo);
+
+const keyCodeGetter = () => {
+  const KEYS = {
+    27: 'escape' };
+
+
+  return event => KEYS[event.which] || KEYS[event.keyCode];
+};
+
+const getKeyCode = keyCodeGetter();
+
+window.addEventListener('keyup', e => {
+  switch (getKeyCode(e)) {
+    case 'escape':
+      if (dom.colorInfo.classList.contains('active')) {
+        hideColorInfo(true);
+      }}
+
+});
\ No newline at end of file
diff --git a/sorted-css-colors/dist/style.css b/sorted-css-colors/dist/style.css
new file mode 100644
index 0000000..94590cd
--- /dev/null
+++ b/sorted-css-colors/dist/style.css
@@ -0,0 +1,456 @@
+:root {
+  --show-info-duration: .3s;
+}
+
+body {
+  --content-width: max(400px, min(80vmin, 800px));
+  --font-size: max(14px, min(3vmin, 20px));
+  min-height: 100vh;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  font: normal var(--font-size)/1.4 helvetica, sans-serif;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.back-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.github-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.github-link {
+  position: absolute;
+  top: .5em;
+  right: .5em;
+  opacity: .7;
+}
+.github-link:hover, .github-link:focus {
+  opacity: 1;
+}
+
+#colorsTable {
+  display: none;
+}
+
+.container {
+  position: relative;
+  padding: 2vmin;
+  top: -2vmin;
+  left: -2vmin;
+}
+
+.hue-control {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  width: var(--content-width);
+  margin-bottom: 1.5vmin;
+  font-size: .8em;
+}
+.hue-control-row {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+          align-items: center;
+  width: 100%;
+  min-height: 1.1em;
+  margin-bottom: .75vmin;
+}
+
+.hue-value {
+  display: inline-block;
+  min-width: 4vmin;
+  text-align: center;
+}
+
+.tolerance-text {
+  font-size: .8em;
+  color: #333;
+}
+
+.hue-slider {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  outline: none;
+  position: relative;
+  -webkit-box-flex: 1;
+          flex: 1;
+  height: 8px;
+  margin-left: 2vmin;
+  border-radius: 5px;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+  background: -webkit-gradient(linear, left top, right top, from(#f07575), color-stop(8.3%, #f0b375), color-stop(16.6%, #f0f075), color-stop(25%, #b3f075), color-stop(33.3%, #75f075), color-stop(41.6%, #75f0b3), color-stop(50%, #75f0f0), color-stop(58.3%, #75b3f0), color-stop(66.6%, #7575f0), color-stop(75%, #b375f0), color-stop(83.3%, #f075f0), color-stop(91.6%, #f075b3), to(#f07575));
+  background: linear-gradient(to right, #f07575 0%, #f0b375 8.3%, #f0f075 16.6%, #b3f075 25%, #75f075 33.3%, #75f0b3 41.6%, #75f0f0 50%, #75b3f0 58.3%, #7575f0 66.6%, #b375f0 75%, #f075f0 83.3%, #f075b3 91.6%, #f07575 100%);
+}
+.hue-slider.mono {
+  background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
+  background: linear-gradient(to bottom, #444 0%, #111 100%);
+}
+.hue-slider:not(.mono):focus {
+  height: 10px;
+  background: -webkit-gradient(linear, left top, right top, from(red), color-stop(8.3%, #ff8000), color-stop(16.6%, yellow), color-stop(25%, #80ff00), color-stop(33.3%, lime), color-stop(41.6%, #00ff80), color-stop(50%, cyan), color-stop(58.3%, #0080ff), color-stop(66.6%, blue), color-stop(75%, #8000ff), color-stop(83.3%, magenta), color-stop(91.6%, #ff0080), to(red));
+  background: linear-gradient(to right, red 0%, #ff8000 8.3%, yellow 16.6%, #80ff00 25%, lime 33.3%, #00ff80 41.6%, cyan 50%, #0080ff 58.3%, blue 66.6%, #8000ff 75%, magenta 83.3%, #ff0080 91.6%, red 100%);
+}
+.hue-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+          appearance: none;
+  display: block;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: linear-gradient(120deg, #444 30%, #111 100%);
+  box-shadow: 0 0 0 2px white, 0 0 2px 3px #444;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+}
+.hue-slider::-moz-range-thumb {
+  -moz-appearance: none;
+       appearance: none;
+  display: block;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: linear-gradient(120deg, #444 30%, #111 100%);
+  box-shadow: 0 0 0 2px white, 0 0 2px 3px #444;
+  -moz-transition: all .3s;
+  transition: all .3s;
+}
+.hue-slider:not(.mono):focus::-webkit-slider-thumb {
+  background: linear-gradient(120deg, hsl(calc(var(--pos) * 360), 90%, 50%) 30%, hsl(calc(var(--pos) * 360), 100%, 40%) 100%);
+  box-shadow: 0 0 0 3px white, 0 0 2px 4px hsl(calc(var(--pos) * 360), 100%, 50%);
+}
+.hue-slider:not(.mono):focus::-moz-range-thumb {
+  background: linear-gradient(120deg, hsl(calc(var(--pos) * 360), 90%, 50%) 30%, hsl(calc(var(--pos) * 360), 100%, 40%) 100%);
+  box-shadow: 0 0 0 3px white, 0 0 2px 4px hsl(calc(var(--pos) * 360), 100%, 50%);
+}
+
+.mono-toggle {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  color: inherit;
+  margin: 0;
+  outline: none;
+  width: 15px;
+  height: 15px;
+  margin-left: 2vmin;
+  border-radius: 50%;
+  -webkit-transition: background-position .2s;
+  transition: background-position .2s;
+  cursor: pointer;
+  background-size: 200%;
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(24%, white), color-stop(28%, #777), color-stop(70%, #777), color-stop(74%, white));
+  background-image: linear-gradient(to right, white 24%, #777 28%, #777 70%, white 74%);
+  box-shadow: 0 0 0 1.5px white, 0 0 0 3px #777;
+}
+.mono-toggle:hover {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(24%, white), color-stop(28%, #333), color-stop(70%, #333), color-stop(74%, white));
+  background-image: linear-gradient(to right, white 24%, #333 28%, #333 70%, white 74%);
+  box-shadow: 0 0 0 1.5px white, 0 0 0 3px #333;
+}
+.mono-toggle:active {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(24%, #f5f5f5), color-stop(28%, #888), color-stop(70%, #888), color-stop(74%, #f5f5f5));
+  background-image: linear-gradient(to right, #f5f5f5 24%, #888 28%, #888 70%, #f5f5f5 74%);
+  box-shadow: 0 0 0 1.5px white, 0 0 0 3px #888;
+}
+.mono-toggle:checked, .mono-toggle:checked:active {
+  background-position: 89% 0;
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(24%, white), color-stop(28%, black), color-stop(70%, black), color-stop(74%, white));
+  background-image: linear-gradient(to right, white 24%, black 28%, black 70%, white 74%);
+  box-shadow: 0 0 0 1.5px white, 0 0 0 3px black;
+}
+.mono-toggle:focus {
+  box-shadow: 0 0 0 1.5px white, 0 0 0 3px #333, 0 0 2.25px 6px rgba(0, 0, 0, 0.125);
+}
+.mono-toggle:checked:focus {
+  box-shadow: 0 0 0 1.5px white, 0 0 0 3px black, 0 0 2.25px 6px rgba(0, 0, 0, 0.25);
+}
+
+.chart-container {
+  position: relative;
+  width: var(--content-width);
+  height: var(--content-width);
+}
+
+.chart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+}
+@supports (grid-auto-flow: row) {
+  .chart {
+    display: grid;
+    grid-auto-flow: row;
+  }
+}
+.chart.contain {
+  overflow: hidden;
+}
+.chart .row {
+  -webkit-box-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: flex;
+}
+@supports (grid-auto-flow: row) {
+  .chart .row {
+    display: grid;
+    grid-auto-flow: column;
+  }
+}
+.chart .row .color-button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  color: inherit;
+  margin: 0;
+  -webkit-box-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  font-size: .6em;
+  text-transform: uppercase;
+  letter-spacing: .125em;
+  background: var(--background);
+  color: var(--color);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  -webkit-transition: -webkit-transform .2s;
+  transition: -webkit-transform .2s;
+  transition: transform .2s;
+  transition: transform .2s, -webkit-transform .2s;
+}
+.chart .row .color-button:hover, .chart .row .color-button:focus {
+  outline: none;
+  -webkit-transform: scale(1.04);
+          transform: scale(1.04);
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.125);
+}
+.chart .row .color-button:active {
+  -webkit-transform: scale(1.02);
+          transform: scale(1.02);
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.125);
+}
+.chart .row .color-button.active {
+  -webkit-transition: -webkit-transform .6s;
+  transition: -webkit-transform .6s;
+  transition: transform .6s;
+  transition: transform .6s, -webkit-transform .6s;
+}
+.chart .row .color-button.active, .chart .row .color-button.deactivating {
+  -webkit-transform: scale(16);
+          transform: scale(16);
+  color: transparent;
+}
+.chart .row .color-button.deactivating {
+  -webkit-animation: deactivate forwards calc(2 * var(--show-info-duration));
+          animation: deactivate forwards calc(2 * var(--show-info-duration));
+}
+@-webkit-keyframes deactivate {
+  from, 70% {
+    color: transparent;
+  }
+  to {
+    color: var(--color);
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes deactivate {
+  from, 70% {
+    color: transparent;
+  }
+  to {
+    color: var(--color);
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+.color-info {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  -webkit-transform: translateY(-5%) scale(0.8);
+          transform: translateY(-5%) scale(0.8);
+  -webkit-transition: opacity var(--show-info-duration), -webkit-transform var(--show-info-duration);
+  transition: opacity var(--show-info-duration), -webkit-transform var(--show-info-duration);
+  transition: opacity var(--show-info-duration), transform var(--show-info-duration);
+  transition: opacity var(--show-info-duration), transform var(--show-info-duration), -webkit-transform var(--show-info-duration);
+}
+.color-info.active {
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  -webkit-transform: translateY(0) scale(1);
+          transform: translateY(0) scale(1);
+  -webkit-transition-delay: var(--show-info-duration);
+          transition-delay: var(--show-info-duration);
+}
+.color-info-container {
+  --info-padding: 3em;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 70%;
+  height: 70%;
+  padding: var(--info-padding);
+  box-sizing: border-box;
+  border: 1px solid;
+  font-size: .8em;
+  color: var(--color);
+  border-color: var(--color);
+}
+.color-info-name {
+  font-size: 3em;
+  font-weight: 100;
+  line-height: 1.3;
+  margin-bottom: .33em;
+  overflow: hidden;
+  outline: none;
+}
+.color-info .marquee {
+  display: inline-block;
+  -webkit-animation: marquee 4s 1s infinite;
+          animation: marquee 4s 1s infinite;
+}
+@-webkit-keyframes marquee {
+  from, 12%, 88%, to {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+  48%, 52% {
+    background: transparent;
+    -webkit-transform: translateX(calc( var(--marquee-amount) - .1em ));
+            transform: translateX(calc( var(--marquee-amount) - .1em ));
+  }
+}
+@keyframes marquee {
+  from, 12%, 88%, to {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+  48%, 52% {
+    background: transparent;
+    -webkit-transform: translateX(calc( var(--marquee-amount) - .1em ));
+            transform: translateX(calc( var(--marquee-amount) - .1em ));
+  }
+}
+.color-info-row {
+  font-size: 1.4em;
+  font-weight: 100;
+  margin-bottom: .33rem;
+  outline: none;
+}
+.color-info-row--alter {
+  font-size: 1.8em;
+}
+.color-info-close-button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  color: inherit;
+  margin: 0;
+  position: absolute;
+  bottom: 1em;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  font-size: 1.25em;
+  cursor: pointer;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+}
+.color-info-close-button:hover, .color-info-close-button:focus {
+  padding-right: 1em;
+}
+.color-info-close-button .back-icon {
+  margin-right: .25em;
+}
+
+.axis {
+  font-size: .5em;
+  letter-spacing: .25em;
+  text-align: center;
+  text-transform: uppercase;
+}
+.axis::before, .axis::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  width: 33%;
+  height: 1px;
+  background: #aaa;
+}
+.axis::before {
+  left: 0;
+}
+.axis::after {
+  right: 0;
+}
+
+.lightness-axis {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  -webkit-transform-origin: top right;
+          transform-origin: top right;
+  -webkit-transform: rotate(-90deg) translateY(200%) rotate(180deg) translateX(100%);
+          transform: rotate(-90deg) translateY(200%) rotate(180deg) translateX(100%);
+}
+
+.saturation-axis {
+  position: relative;
+  -webkit-transform: translateY(100%);
+          transform: translateY(100%);
+}
\ No newline at end of file
diff --git a/sorted-css-colors/license.txt b/sorted-css-colors/license.txt
new file mode 100644
index 0000000..b359019
--- /dev/null
+++ b/sorted-css-colors/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Mustafa Enes (https://codepen.io/pavlovsk/pen/zYvbGKe)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/sorted-css-colors/src/index.html b/sorted-css-colors/src/index.html
new file mode 100644
index 0000000..619da8c
--- /dev/null
+++ b/sorted-css-colors/src/index.html
@@ -0,0 +1,1099 @@
+<div class="container">
+  <div class="hue-control">
+    <div class="hue-control-row">
+      <label for="hue-slider">
+        Hue: <span class="hue-value" id="hue-value"></span>
+      </label>
+      <input class="hue-slider" id="hue-slider" type="range" min="0" max="360" />
+      <input type="checkbox" class="mono-toggle" id="mono-toggle" aria-label="Toggle monochrome colors"></input>
+    </div>
+
+    <div class="hue-control-row">
+      <p id="tolerance-text" class="tolerance-text">hue tolerance: <span id="tolerance-value">5</span>
+    </div>
+  </div>
+
+  <div class="chart-container" id="chart-container">
+    <div id="chart" class="chart"></div>
+    <div id="color-info" class="color-info" inert="true"></div>
+    <div class="axis lightness-axis">
+      lightness
+    </div>
+    <div class="axis saturation-axis" id="saturation-axis">
+      saturation
+    </div>
+  </div>
+</div>
+
+<a href="https://github.com/scriptype/sorted-colors" target="_blank" class="github-link">
+  <svg class="github-icon" role="img" alt="Check this on Github">
+    <use xlink:href="#github-icon"></use>
+  </svg>
+</a>
+
+<svg style="display: none" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <symbol id="back-icon" viewBox="0 0 16 16">
+    <path d="M16 7H3.8l5.6-5.6L8 0 0 8l8 8 1.4-1.4L3.8 9H16V7z" fill="currentColor" fill-rule="evenodd"/>
+  </symbol>
+
+  <symbol id="github-icon" viewBox="0 0 1024 1024">
+  <path d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.688 418.125 350.156 485.812 25.594 4.688 34.938-11.125 34.938-24.625 0-12.188-.469-52.562-.719-95.312C242 908.812 211.906 817.5 211.906 817.5c-23.312-59.125-56.844-74.875-56.844-74.875-46.531-31.75 3.53-31.125 3.53-31.125 51.406 3.562 78.47 52.75 78.47 52.75 45.688 78.25 119.875 55.625 149 42.5 4.654-33 17.904-55.625 32.5-68.375-113.656-12.937-233.218-56.875-233.218-253.063 0-55.938 19.969-101.562 52.656-137.406-5.219-13-22.844-65.094 5.062-135.562 0 0 42.938-13.75 140.812 52.5 40.812-11.406 84.594-17.031 128.125-17.219 43.5.188 87.312 5.875 128.188 17.281 97.688-66.312 140.688-52.5 140.688-52.5 28 70.531 10.375 122.562 5.125 135.5 32.812 35.844 52.625 81.469 52.625 137.406 0 196.688-119.75 240-233.812 252.688 18.438 15.875 34.75 47 34.75 94.75 0 68.438-.688 123.625-.688 140.5 0 13.625 9.312 29.562 35.25 24.562C877.438 930 1024 738.125 1024 512 1024 229.25 794.75 0 512 0z"/>
+</svg>
+
+<table id="colorsTable">
+  <thead>
+    <tr>
+      <th id="name">Name</th>
+      <th id="rgb">RGB</th>
+      <th id="hsl">HSL</th>
+      <th id="hex">Hex</th>
+      <th id="alternativeName">Alternative Name</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr class="light">
+      <td>aliceblue</td>
+      <td>rgb(240,248,255)</td>
+      <td>hsl(208,100%,97.1%)</td>
+      <td>#F0F8FF</td>
+    </tr>
+
+    <tr class="light">
+      <td>antiquewhite</td>
+      <td>rgb(250,235,215)</td>
+      <td>hsl(34,77.8%,91.2%)</td>
+      <td>#FAEBD7</td>
+    </tr>
+
+    <tr class="light">
+      <td>aqua</td>
+      <td>rgb(0,255,255)</td>
+      <td>hsl(180,100%,50%)</td>
+      <td>#00FFFF</td>
+    </tr>
+
+    <tr class="light">
+      <td>aquamarine</td>
+      <td>rgb(127,255,212)</td>
+      <td>hsl(160,100%,74.9%)</td>
+      <td>#7FFFD4</td>
+    </tr>
+
+    <tr class="light">
+      <td>azure</td>
+      <td>rgb(240,255,255)</td>
+      <td>hsl(180,100%,97.1%)</td>
+      <td>#F0FFFF</td>
+    </tr>
+
+    <tr class="light">
+      <td>beige</td>
+      <td>rgb(245,245,220)</td>
+      <td>hsl(60,55.6%,91.2%)</td>
+      <td>#F5F5DC</td>
+    </tr>
+
+    <tr class="light">
+      <td>bisque</td>
+      <td>rgb(255,228,196)</td>
+      <td>hsl(33,100%,88.4%)</td>
+      <td>#FFE4C4</td>
+    </tr>
+
+    <tr class="dark">
+      <td>black</td>
+      <td>rgb(0,0,0)</td>
+      <td>hsl(0,0%,0%)</td>
+      <td>#000000</td>
+    </tr>
+
+    <tr class="light">
+      <td>blanchedalmond</td>
+      <td>rgb(255,235,205)</td>
+      <td>hsl(36,100%,90.2%)</td>
+      <td>#FFEBCD</td>
+    </tr>
+
+    <tr class="dark">
+      <td>blue</td>
+      <td>rgb(0,0,255)</td>
+      <td>hsl(240,100%,50%)</td>
+      <td>#0000FF</td>
+    </tr>
+
+    <tr class="dark">
+      <td>blueviolet</td>
+      <td>rgb(138,43,226)</td>
+      <td>hsl(271,75.9%,52.7%)</td>
+      <td>#8A2BE2</td>
+    </tr>
+
+    <tr class="dark">
+      <td>brown</td>
+      <td>rgb(165,42,42)</td>
+      <td>hsl(0,59.4%,40.6%)</td>
+      <td>#A52A2A</td>
+    </tr>
+
+    <tr class="light">
+      <td>burlywood</td>
+      <td>rgb(222,184,135)</td>
+      <td>hsl(34,56.9%,70%)</td>
+      <td>#DEB887</td>
+    </tr>
+
+    <tr class="light">
+      <td>cadetblue</td>
+      <td>rgb(95,158,160)</td>
+      <td>hsl(182,25.5%,50%)</td>
+      <td>#5F9EA0</td>
+    </tr>
+
+    <tr class="light">
+      <td>chartreuse</td>
+      <td>rgb(127,255,0)</td>
+      <td>hsl(90,100%,50%)</td>
+      <td>#7FFF00</td>
+    </tr>
+
+    <tr class="light">
+      <td>chocolate</td>
+      <td>rgb(210,105,30)</td>
+      <td>hsl(25,75%,47.1%)</td>
+      <td>#D2691E</td>
+    </tr>
+
+    <tr class="light">
+      <td>coral</td>
+      <td>rgb(255,127,80)</td>
+      <td>hsl(16,100%,65.7%)</td>
+      <td>#FF7F50</td>
+    </tr>
+
+    <tr class="light">
+      <td>cornflowerblue</td>
+      <td>rgb(100,149,237)</td>
+      <td>hsl(219,79.2%,66.1%)</td>
+      <td>#6495ED</td>
+    </tr>
+
+    <tr class="light">
+      <td>cornsilk</td>
+      <td>rgb(255,248,220)</td>
+      <td>hsl(48,100%,93.1%)</td>
+      <td>#FFF8DC</td>
+    </tr>
+
+    <tr class="dark">
+      <td>crimson</td>
+      <td>rgb(220,20,60)</td>
+      <td>hsl(348,83.3%,47.1%)</td>
+      <td>#DC143C</td>
+    </tr>
+
+    <tr class="light">
+      <td>cyan</td>
+      <td>rgb(0,255,255)</td>
+      <td>hsl(180,100%,50%)</td>
+      <td>#00FFFF</td>
+      <td>aqua</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkblue</td>
+      <td>rgb(0,0,139)</td>
+      <td>hsl(240,100%,27.3%)</td>
+      <td>#00008B</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkcyan</td>
+      <td>rgb(0,139,139)</td>
+      <td>hsl(180,100%,27.3%)</td>
+      <td>#008B8B</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkgoldenrod</td>
+      <td>rgb(184,134,11)</td>
+      <td>hsl(43,88.7%,38.2%)</td>
+      <td>#B8860B</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkgray</td>
+      <td>rgb(169,169,169)</td>
+      <td>hsl(0,0%,66.3%)</td>
+      <td>#A9A9A9</td>
+      <td>darkgrey</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkgreen</td>
+      <td>rgb(0,100,0)</td>
+      <td>hsl(120,100%,19.6%)</td>
+      <td>#006400</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkgrey</td>
+      <td>rgb(169,169,169)</td>
+      <td>hsl(0,0%,66.3%)</td>
+      <td>#A9A9A9</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkkhaki</td>
+      <td>rgb(189,183,107)</td>
+      <td>hsl(56,38.3%,58%)</td>
+      <td>#BDB76B</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkmagenta</td>
+      <td>rgb(139,0,139)</td>
+      <td>hsl(300,100%,27.3%)</td>
+      <td>#8B008B</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkolivegreen</td>
+      <td>rgb(85,107,47)</td>
+      <td>hsl(82,39%,30.2%)</td>
+      <td>#556B2F</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkorange</td>
+      <td>rgb(255,140,0)</td>
+      <td>hsl(33,100%,50%)</td>
+      <td>#FF8C00</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkorchid</td>
+      <td>rgb(153,50,204)</td>
+      <td>hsl(280,60.6%,49.8%)</td>
+      <td>#9932CC</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkred</td>
+      <td>rgb(139,0,0)</td>
+      <td>hsl(0,100%,27.3%)</td>
+      <td>#8B0000</td>
+    </tr>
+
+    <tr class="light">
+      <td>darksalmon</td>
+      <td>rgb(233,150,122)</td>
+      <td>hsl(15,71.6%,69.6%)</td>
+      <td>#E9967A</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkseagreen</td>
+      <td>rgb(143,188,143)</td>
+      <td>hsl(120,25.1%,64.9%)</td>
+      <td>#8FBC8F</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkslateblue</td>
+      <td>rgb(72,61,139)</td>
+      <td>hsl(248,39%,39.2%)</td>
+      <td>#483D8B</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkslategray</td>
+      <td>rgb(47,79,79)</td>
+      <td>hsl(180,25.4%,24.7%)</td>
+      <td>#2F4F4F</td>
+      <td>darkslategrey</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkslategrey</td>
+      <td>rgb(47,79,79)</td>
+      <td>hsl(180,25.4%,24.7%)</td>
+      <td>#2F4F4F</td>
+    </tr>
+
+    <tr class="light">
+      <td>darkturquoise</td>
+      <td>rgb(0,206,209)</td>
+      <td>hsl(181,100%,41%)</td>
+      <td>#00CED1</td>
+    </tr>
+
+    <tr class="dark">
+      <td>darkviolet</td>
+      <td>rgb(148,0,211)</td>
+      <td>hsl(282,100%,41.4%)</td>
+      <td>#9400D3</td>
+    </tr>
+
+    <tr class="dark">
+      <td>deeppink</td>
+      <td>rgb(255,20,147)</td>
+      <td>hsl(328,100%,53.9%)</td>
+      <td>#FF1493</td>
+    </tr>
+
+    <tr class="light">
+      <td>deepskyblue</td>
+      <td>rgb(0,191,255)</td>
+      <td>hsl(195,100%,50%)</td>
+      <td>#00BFFF</td>
+    </tr>
+
+    <tr class="dark">
+      <td>dimgray</td>
+      <td>rgb(105,105,105)</td>
+      <td>hsl(0,0%,41.2%)</td>
+      <td>#696969</td>
+      <td>dimgrey</td>
+    </tr>
+
+    <tr class="dark">
+      <td>dimgrey</td>
+      <td>rgb(105,105,105)</td>
+      <td>hsl(0,0%,41.2%)</td>
+      <td>#696969</td>
+    </tr>
+
+    <tr class="dark">
+      <td>dodgerblue</td>
+      <td>rgb(30,144,255)</td>
+      <td>hsl(210,100%,55.9%)</td>
+      <td>#1E90FF</td>
+    </tr>
+
+    <tr class="dark">
+      <td>firebrick</td>
+      <td>rgb(178,34,34)</td>
+      <td>hsl(0,67.9%,41.6%)</td>
+      <td>#B22222</td>
+    </tr>
+
+    <tr class="light">
+      <td>floralwhite</td>
+      <td>rgb(255,250,240)</td>
+      <td>hsl(40,100%,97.1%)</td>
+      <td>#FFFAF0</td>
+    </tr>
+
+    <tr class="dark">
+      <td>forestgreen</td>
+      <td>rgb(34,139,34)</td>
+      <td>hsl(120,60.7%,33.9%)</td>
+      <td>#228B22</td>
+    </tr>
+
+    <tr class="light">
+      <td>fuchsia</td>
+      <td>rgb(255,0,255)</td>
+      <td>hsl(300,100%,50%)</td>
+      <td>#FF00FF</td>
+    </tr>
+
+    <tr class="light">
+      <td>gainsboro</td>
+      <td>rgb(220,220,220)</td>
+      <td>hsl(0,0%,86.3%)</td>
+      <td>#DCDCDC</td>
+    </tr>
+
+    <tr class="light">
+      <td>ghostwhite</td>
+      <td>rgb(248,248,255)</td>
+      <td>hsl(240,100%,98.6%)</td>
+      <td>#F8F8FF</td>
+    </tr>
+
+    <tr class="light">
+      <td>gold</td>
+      <td>rgb(255,215,0)</td>
+      <td>hsl(51,100%,50%)</td>
+      <td>#FFD700</td>
+    </tr>
+
+    <tr class="light">
+      <td>goldenrod</td>
+      <td>rgb(218,165,32)</td>
+      <td>hsl(43,74.4%,49%)</td>
+      <td>#DAA520</td>
+    </tr>
+
+    <tr class="light">
+      <td>gray</td>
+      <td>rgb(128,128,128)</td>
+      <td>hsl(0,0%,50.2%)</td>
+      <td>#808080</td>
+      <td>grey</td>
+    </tr>
+
+    <tr class="dark">
+      <td>green</td>
+      <td>rgb(0,128,0)</td>
+      <td>hsl(120,100%,25.1%)</td>
+      <td>#008000</td>
+    </tr>
+
+    <tr class="light">
+      <td>greenyellow</td>
+      <td>rgb(173,255,47)</td>
+      <td>hsl(84,100%,59.2%)</td>
+      <td>#ADFF2F</td>
+    </tr>
+
+    <tr class="light">
+      <td>grey</td>
+      <td>rgb(128,128,128)</td>
+      <td>hsl(0,0%,50.2%)</td>
+      <td>#808080</td>
+    </tr>
+
+    <tr class="light">
+      <td>honeydew</td>
+      <td>rgb(240,255,240)</td>
+      <td>hsl(120,100%,97.1%)</td>
+      <td>#F0FFF0</td>
+    </tr>
+
+    <tr class="light">
+      <td>hotpink</td>
+      <td>rgb(255,105,180)</td>
+      <td>hsl(330,100%,70.6%)</td>
+      <td>#FF69B4</td>
+    </tr>
+
+    <tr class="light">
+      <td>indianred</td>
+      <td>rgb(205,92,92)</td>
+      <td>hsl(0,53.1%,58.2%)</td>
+      <td>#CD5C5C</td>
+    </tr>
+
+    <tr class="dark">
+      <td>indigo</td>
+      <td>rgb(75,0,130)</td>
+      <td>hsl(275,100%,25.5%)</td>
+      <td>#4B0082</td>
+    </tr>
+
+    <tr class="light">
+      <td>ivory</td>
+      <td>rgb(255,255,240)</td>
+      <td>hsl(60,100%,97.1%)</td>
+      <td>#FFFFF0</td>
+    </tr>
+
+    <tr class="light">
+      <td>khaki</td>
+      <td>rgb(240,230,140)</td>
+      <td>hsl(54,76.9%,74.5%)</td>
+      <td>#F0E68C</td>
+    </tr>
+
+    <tr class="light">
+      <td>lavender</td>
+      <td>rgb(230,230,250)</td>
+      <td>hsl(240,66.7%,94.1%)</td>
+      <td>#E6E6FA</td>
+    </tr>
+
+    <tr class="light">
+      <td>lavenderblush</td>
+      <td>rgb(255,240,245)</td>
+      <td>hsl(340,100%,97.1%)</td>
+      <td>#FFF0F5</td>
+    </tr>
+
+    <tr class="light">
+      <td>lawngreen</td>
+      <td>rgb(124,252,0)</td>
+      <td>hsl(90,100%,49.4%)</td>
+      <td>#7CFC00</td>
+    </tr>
+
+    <tr class="light">
+      <td>lemonchiffon</td>
+      <td>rgb(255,250,205)</td>
+      <td>hsl(54,100%,90.2%)</td>
+      <td>#FFFACD</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightblue</td>
+      <td>rgb(173,216,230)</td>
+      <td>hsl(195,53.3%,79%)</td>
+      <td>#ADD8E6</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightcoral</td>
+      <td>rgb(240,128,128)</td>
+      <td>hsl(0,78.9%,72.2%)</td>
+      <td>#F08080</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightcyan</td>
+      <td>rgb(224,255,255)</td>
+      <td>hsl(180,100%,93.9%)</td>
+      <td>#E0FFFF</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightgoldenrodyellow</td>
+      <td>rgb(250,250,210)</td>
+      <td>hsl(60,80%,90.2%)</td>
+      <td>#FAFAD2</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightgray</td>
+      <td>rgb(211,211,211)</td>
+      <td>hsl(0,0%,82.7%)</td>
+      <td>#D3D3D3</td>
+      <td>lightgrey</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightgreen</td>
+      <td>rgb(144,238,144)</td>
+      <td>hsl(120,73.4%,74.9%)</td>
+      <td>#90EE90</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightgrey</td>
+      <td>rgb(211,211,211)</td>
+      <td>hsl(0,0%,82.7%)</td>
+      <td>#D3D3D3</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightpink</td>
+      <td>rgb(255,182,193)</td>
+      <td>hsl(351,100%,85.7%)</td>
+      <td>#FFB6C1</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightsalmon</td>
+      <td>rgb(255,160,122)</td>
+      <td>hsl(17,100%,73.9%)</td>
+      <td>#FFA07A</td>
+    </tr>
+
+    <tr class="dark">
+      <td>lightseagreen</td>
+      <td>rgb(32,178,170)</td>
+      <td>hsl(177,69.5%,41.2%)</td>
+      <td>#20B2AA</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightskyblue</td>
+      <td>rgb(135,206,250)</td>
+      <td>hsl(203,92%,75.5%)</td>
+      <td>#87CEFA</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightslategray</td>
+      <td>rgb(119,136,153)</td>
+      <td>hsl(210,14.3%,53.3%)</td>
+      <td>#778899</td>
+      <td>lightslategrey</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightslategrey</td>
+      <td>rgb(119,136,153)</td>
+      <td>hsl(210,14.3%,53.3%)</td>
+      <td>#778899</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightsteelblue</td>
+      <td>rgb(176,196,222)</td>
+      <td>hsl(214,41.1%,78%)</td>
+      <td>#B0C4DE</td>
+    </tr>
+
+    <tr class="light">
+      <td>lightyellow</td>
+      <td>rgb(255,255,224)</td>
+      <td>hsl(60,100%,93.9%)</td>
+      <td>#FFFFE0</td>
+    </tr>
+
+    <tr class="light">
+      <td>lime</td>
+      <td>rgb(0,255,0)</td>
+      <td>hsl(120,100%,50%)</td>
+      <td>#00FF00</td>
+    </tr>
+
+    <tr class="light">
+      <td>limegreen</td>
+      <td>rgb(50,205,50)</td>
+      <td>hsl(120,60.8%,50%)</td>
+      <td>#32CD32</td>
+    </tr>
+
+    <tr class="light">
+      <td>linen</td>
+      <td>rgb(250,240,230)</td>
+      <td>hsl(30,66.7%,94.1%)</td>
+      <td>#FAF0E6</td>
+    </tr>
+
+    <tr class="light">
+      <td>magenta</td>
+      <td>rgb(255,0,255)</td>
+      <td>hsl(300,100%,50%)</td>
+      <td>#FF00FF</td>
+      <td>fuchsia</td>
+    </tr>
+
+    <tr class="dark">
+      <td>maroon</td>
+      <td>rgb(128,0,0)</td>
+      <td>hsl(0,100%,25.1%)</td>
+      <td>#800000</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumaquamarine</td>
+      <td>rgb(102,205,170)</td>
+      <td>hsl(160,50.7%,60.2%)</td>
+      <td>#66CDAA</td>
+    </tr>
+
+    <tr class="dark">
+      <td>mediumblue</td>
+      <td>rgb(0,0,205)</td>
+      <td>hsl(240,100%,40.2%)</td>
+      <td>#0000CD</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumorchid</td>
+      <td>rgb(186,85,211)</td>
+      <td>hsl(288,58.9%,58%)</td>
+      <td>#BA55D3</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumpurple</td>
+      <td>rgb(147,112,219)</td>
+      <td>hsl(260,59.8%,64.9%)</td>
+      <td>#9370DB</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumseagreen</td>
+      <td>rgb(60,179,113)</td>
+      <td>hsl(147,49.8%,46.9%)</td>
+      <td>#3CB371</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumslateblue</td>
+      <td>rgb(123,104,238)</td>
+      <td>hsl(249,79.8%,67.1%)</td>
+      <td>#7B68EE</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumspringgreen</td>
+      <td>rgb(0,250,154)</td>
+      <td>hsl(157,100%,49%)</td>
+      <td>#00FA9A</td>
+    </tr>
+
+    <tr class="light">
+      <td>mediumturquoise</td>
+      <td>rgb(72,209,204)</td>
+      <td>hsl(178,59.8%,55.1%)</td>
+      <td>#48D1CC</td>
+    </tr>
+
+    <tr class="dark">
+      <td>mediumvioletred</td>
+      <td>rgb(199,21,133)</td>
+      <td>hsl(322,80.9%,43.1%)</td>
+      <td>#C71585</td>
+    </tr>
+
+    <tr class="dark">
+      <td>midnightblue</td>
+      <td>rgb(25,25,112)</td>
+      <td>hsl(240,63.5%,26.9%)</td>
+      <td>#191970</td>
+    </tr>
+
+    <tr class="light">
+      <td>mintcream</td>
+      <td>rgb(245,255,250)</td>
+      <td>hsl(150,100%,98%)</td>
+      <td>#F5FFFA</td>
+    </tr>
+
+    <tr class="light">
+      <td>mistyrose</td>
+      <td>rgb(255,228,225)</td>
+      <td>hsl(6,100%,94.1%)</td>
+      <td>#FFE4E1</td>
+    </tr>
+
+    <tr class="light">
+      <td>moccasin</td>
+      <td>rgb(255,228,181)</td>
+      <td>hsl(38,100%,85.5%)</td>
+      <td>#FFE4B5</td>
+    </tr>
+
+    <tr class="light">
+      <td>navajowhite</td>
+      <td>rgb(255,222,173)</td>
+      <td>hsl(36,100%,83.9%)</td>
+      <td>#FFDEAD</td>
+    </tr>
+
+    <tr class="dark">
+      <td>navy</td>
+      <td>rgb(0,0,128)</td>
+      <td>hsl(240,100%,25.1%)</td>
+      <td>#000080</td>
+    </tr>
+
+    <tr class="light">
+      <td>oldlace</td>
+      <td>rgb(253,245,230)</td>
+      <td>hsl(39,85.2%,94.7%)</td>
+      <td>#FDF5E6</td>
+    </tr>
+
+    <tr class="dark">
+      <td>olive</td>
+      <td>rgb(128,128,0)</td>
+      <td>hsl(60,100%,25.1%)</td>
+      <td>#808000</td>
+    </tr>
+
+    <tr class="dark">
+      <td>olivedrab</td>
+      <td>rgb(107,142,35)</td>
+      <td>hsl(80,60.5%,34.7%)</td>
+      <td>#6B8E23</td>
+    </tr>
+
+    <tr class="light">
+      <td>orange</td>
+      <td>rgb(255,165,0)</td>
+      <td>hsl(39,100%,50%)</td>
+      <td>#FFA500</td>
+    </tr>
+
+    <tr class="light">
+      <td>orangered</td>
+      <td>rgb(255,69,0)</td>
+      <td>hsl(16,100%,50%)</td>
+      <td>#FF4500</td>
+    </tr>
+
+    <tr class="light">
+      <td>orchid</td>
+      <td>rgb(218,112,214)</td>
+      <td>hsl(302,58.9%,64.7%)</td>
+      <td>#DA70D6</td>
+    </tr>
+
+    <tr class="light">
+      <td>palegoldenrod</td>
+      <td>rgb(238,232,170)</td>
+      <td>hsl(55,66.7%,80%)</td>
+      <td>#EEE8AA</td>
+    </tr>
+
+    <tr class="light">
+      <td>palegreen</td>
+      <td>rgb(152,251,152)</td>
+      <td>hsl(120,92.5%,79%)</td>
+      <td>#98FB98</td>
+    </tr>
+
+    <tr class="light">
+      <td>paleturquoise</td>
+      <td>rgb(175,238,238)</td>
+      <td>hsl(180,64.9%,81%)</td>
+      <td>#AFEEEE</td>
+    </tr>
+
+    <tr class="light">
+      <td>palevioletred</td>
+      <td>rgb(219,112,147)</td>
+      <td>hsl(340,59.8%,64.9%)</td>
+      <td>#DB7093</td>
+    </tr>
+
+    <tr class="light">
+      <td>papayawhip</td>
+      <td>rgb(255,239,213)</td>
+      <td>hsl(37,100%,91.8%)</td>
+      <td>#FFEFD5</td>
+    </tr>
+
+    <tr class="light">
+      <td>peachpuff</td>
+      <td>rgb(255,218,185)</td>
+      <td>hsl(28,100%,86.3%)</td>
+      <td>#FFDAB9</td>
+    </tr>
+
+    <tr class="light">
+      <td>peru</td>
+      <td>rgb(205,133,63)</td>
+      <td>hsl(30,58.7%,52.5%)</td>
+      <td>#CD853F</td>
+    </tr>
+
+    <tr class="light">
+      <td>pink</td>
+      <td>rgb(255,192,203)</td>
+      <td>hsl(350,100%,87.6%)</td>
+      <td>#FFC0CB</td>
+    </tr>
+
+    <tr class="light">
+      <td>plum</td>
+      <td>rgb(221,160,221)</td>
+      <td>hsl(300,47.3%,74.7%)</td>
+      <td>#DDA0DD</td>
+    </tr>
+
+    <tr class="light">
+      <td>powderblue</td>
+      <td>rgb(176,224,230)</td>
+      <td>hsl(187,51.9%,79.6%)</td>
+      <td>#B0E0E6</td>
+    </tr>
+
+    <tr class="dark">
+      <td>purple</td>
+      <td>rgb(128,0,128)</td>
+      <td>hsl(300,100%,25.1%)</td>
+      <td>#800080</td>
+    </tr>
+
+    <tr class="dark">
+      <td>rebeccapurple</td>
+      <td>rgb(102,51,153)</td>
+      <td>hsl(270,50%,40%)</td>
+      <td>#663399</td>
+    </tr>
+
+    <tr class="dark">
+      <td>red</td>
+      <td>rgb(255,0,0)</td>
+      <td>hsl(0,100%,50%)</td>
+      <td>#FF0000</td>
+    </tr>
+
+    <tr class="light">
+      <td>rosybrown</td>
+      <td>rgb(188,143,143)</td>
+      <td>hsl(0,25.1%,64.9%)</td>
+      <td>#BC8F8F</td>
+    </tr>
+
+    <tr class="dark">
+      <td>royalblue</td>
+      <td>rgb(65,105,225)</td>
+      <td>hsl(225,72.7%,56.9%)</td>
+      <td>#4169E1</td>
+    </tr>
+
+    <tr class="dark">
+      <td>saddlebrown</td>
+      <td>rgb(139,69,19)</td>
+      <td>hsl(25,75.9%,31%)</td>
+      <td>#8B4513</td>
+    </tr>
+
+    <tr class="light">
+      <td>salmon</td>
+      <td>rgb(250,128,114)</td>
+      <td>hsl(6,93.2%,71.4%)</td>
+      <td>#FA8072</td>
+    </tr>
+
+    <tr class="light">
+      <td>sandybrown</td>
+      <td>rgb(244,164,96)</td>
+      <td>hsl(28,87.1%,66.7%)</td>
+      <td>#F4A460</td>
+    </tr>
+
+    <tr class="dark">
+      <td>seagreen</td>
+      <td>rgb(46,139,87)</td>
+      <td>hsl(146,50.3%,36.3%)</td>
+      <td>#2E8B57</td>
+    </tr>
+
+    <tr class="light">
+      <td>seashell</td>
+      <td>rgb(255,245,238)</td>
+      <td>hsl(25,100%,96.7%)</td>
+      <td>#FFF5EE</td>
+    </tr>
+
+    <tr class="dark">
+      <td>sienna</td>
+      <td>rgb(160,82,45)</td>
+      <td>hsl(19,56.1%,40.2%)</td>
+      <td>#A0522D</td>
+    </tr>
+
+    <tr class="light">
+      <td>silver</td>
+      <td>rgb(192,192,192)</td>
+      <td>hsl(0,0%,75.3%)</td>
+      <td>#C0C0C0</td>
+    </tr>
+
+    <tr class="light">
+      <td>skyblue</td>
+      <td>rgb(135,206,235)</td>
+      <td>hsl(197,71.4%,72.5%)</td>
+      <td>#87CEEB</td>
+    </tr>
+
+    <tr class="dark">
+      <td>slateblue</td>
+      <td>rgb(106,90,205)</td>
+      <td>hsl(248,53.5%,57.8%)</td>
+      <td>#6A5ACD</td>
+    </tr>
+
+    <tr class="dark">
+      <td>slategray</td>
+      <td>rgb(112,128,144)</td>
+      <td>hsl(210,12.6%,50.2%)</td>
+      <td>#708090</td>
+      <td>slategrey</td>
+    </tr>
+    <tr class="dark">
+      <td>slategrey</td>
+      <td>rgb(112,128,144)</td>
+      <td>hsl(210,12.6%,50.2%)</td>
+      <td>#708090</td>
+    </tr>
+
+    <tr class="light">
+      <td>snow</td>
+      <td>rgb(255,250,250)</td>
+      <td>hsl(0,100%,99%)</td>
+      <td>#FFFAFA</td>
+    </tr>
+
+    <tr class="light">
+      <td>springgreen</td>
+      <td>rgb(0,255,127)</td>
+      <td>hsl(150,100%,50%)</td>
+      <td>#00FF7F</td>
+    </tr>
+
+    <tr class="dark">
+      <td>steelblue</td>
+      <td>rgb(70,130,180)</td>
+      <td>hsl(207,44%,49%)</td>
+      <td>#4682B4</td>
+    </tr>
+
+    <tr class="light">
+      <td>tan</td>
+      <td>rgb(210,180,140)</td>
+      <td>hsl(34,43.8%,68.6%)</td>
+      <td>#D2B48C</td>
+    </tr>
+
+    <tr class="dark">
+      <td>teal</td>
+      <td>rgb(0,128,128)</td>
+      <td>hsl(180,100%,25.1%)</td>
+      <td>#008080</td>
+    </tr>
+
+    <tr class="light">
+      <td>thistle</td>
+      <td>rgb(216,191,216)</td>
+      <td>hsl(300,24.3%,79.8%)</td>
+      <td>#D8BFD8</td>
+    </tr>
+
+    <tr class="light">
+      <td>tomato</td>
+      <td>rgb(255,99,71)</td>
+      <td>hsl(9,100%,63.9%)</td>
+      <td>#FF6347</td>
+    </tr>
+
+    <tr class="light">
+      <td>turquoise</td>
+      <td>rgb(64,224,208)</td>
+      <td>hsl(174,72.1%,56.5%)</td>
+      <td>#40E0D0</td>
+    </tr>
+
+    <tr class="light">
+      <td>violet</td>
+      <td>rgb(238,130,238)</td>
+      <td>hsl(300,76.1%,72.2%)</td>
+      <td>#EE82EE</td>
+    </tr>
+
+    <tr class="light">
+      <td>wheat</td>
+      <td>rgb(245,222,179)</td>
+      <td>hsl(39,76.7%,83.1%)</td>
+      <td>#F5DEB3</td>
+    </tr>
+
+    <tr class="light">
+      <td>white</td>
+      <td>rgb(255,255,255)</td>
+      <td>hsl(0,0%,100%)</td>
+      <td>#FFFFFF</td>
+    </tr>
+
+    <tr class="light">
+      <td>whitesmoke</td>
+      <td>rgb(245,245,245)</td>
+      <td>hsl(0,0%,96.1%)</td>
+      <td>#F5F5F5</td>
+    </tr>
+
+    <tr class="light">
+      <td>yellow</td>
+      <td>rgb(255,255,0)</td>
+      <td>hsl(60,100%,50%)</td>
+      <td>#FFFF00</td>
+    </tr>
+
+    <tr class="light">
+      <td>yellowgreen</td>
+      <td>rgb(154,205,50)</td>
+      <td>hsl(80,60.8%,50%)</td>
+      <td>#9ACD32</td>
+    </tr>
+  </tbody>
+</table>
\ No newline at end of file
diff --git a/sorted-css-colors/src/script.babel b/sorted-css-colors/src/script.babel
new file mode 100644
index 0000000..9a2f486
--- /dev/null
+++ b/sorted-css-colors/src/script.babel
@@ -0,0 +1,376 @@
+const { abs, floor, random } = Math
+
+const randomFrom = array => array[floor(random() * array.length)]
+
+const getNumbers = n => [...Array(n).keys()]
+
+const wait = duration => new Promise(resolve => {
+  setTimeout(resolve, duration)
+})
+
+const query = (selector, parent = document) =>
+  parent.querySelector.call(parent, selector)
+
+const queryAll = (selector, parent = document) =>
+  Array.from(parent.querySelectorAll.call(parent, selector))
+
+const queryId = document.getElementById.bind(document)
+
+const parseDataFromTable = (tableID) => {
+  const table = queryId(tableID)
+  const headers = queryAll('thead th', table)
+  const values = queryAll('tbody tr', table)
+
+  const columns = headers.map(header => ({
+    id: header.id,
+    name: header.innerText
+  }))
+
+  const rows = values.map(value => {
+    const cells = queryAll('td', value)
+    return cells.reduce((row, cell, colIndex) => {
+      const columnId = columns[colIndex].id
+      return {
+        ...row,
+        [columnId]: cell.innerText
+      }
+    }, {
+      type: value.getAttribute('class')
+    })
+  })
+
+  return {
+    columns,
+    rows
+  }
+}
+
+/*
+ * For each color in colorList, check if there's an equivalent color
+ * with a different name.
+ * Eliminate the non-preferred colors that have equivalents.
+ * A color can be thought "preferred", if it has `alternativeName` field in it.
+ * e.g. Eliminates fuchsia and aqua in favor of magenta and cyan, respectively.
+ */
+const removeAlternativeColors = colorList => {
+  return colorList.map((color, index) => {
+    const equivalent = colorList.find(c => c !== color && c.hex === color.hex)
+    if (!equivalent || color.alternativeName === equivalent.name) {
+      return color
+    }
+    return null
+  }).filter(c => !!c)
+}
+
+const parseColorStrings = color => ({
+  ...color,
+  rgb: color.rgb.match(/rgb\((\d+),(\d+),(\d+)\)/).slice(1).map(Number),
+  hsl: color.hsl.match(/hsl\((.*),(.*)%,(.*)%\)/).slice(1).map(Number)
+})
+
+const isMonochrome = color => color.hsl[1] === 0
+const isNonMonochrome = color => !isMonochrome(color)
+
+const filterColorsByHue = (colorList, hue, tolerance) => {
+  const colors = colorList.filter(color =>  abs(hue - color.hsl[0]) < tolerance)
+  if (colors.length) {
+    return {
+      list: colors,
+      tolerance
+    } 
+  }
+  return filterColorsByHue(colorList, hue, tolerance + 1)
+}
+
+const groupColorsByLightness = (colorList, tolerance) => {
+  return getNumbers(100 / tolerance + 1).map(t =>
+    colorList.filter(color => {
+      const difference = 100 - color.hsl[2] - t * tolerance
+      const differenceLimit = tolerance / 2
+      if (abs(difference) === differenceLimit) {
+        return difference > 0
+      }
+      return abs(difference) < differenceLimit
+    })
+  )
+}
+
+const groupColors = ({ colorList, hue, tolerance, mono }) => {
+  const baseColors = colorList.filter(mono ? isMonochrome : isNonMonochrome)
+  const sortedColors = [...baseColors].sort((a, b) => a.hsl[1] - b.hsl[1])
+  
+  const colorsFilteredByHue = filterColorsByHue(sortedColors, hue, tolerance.min)
+  
+  const lightnessGroups = groupColorsByLightness(colorsFilteredByHue.list, tolerance.min)
+
+  const finalColorsList = lightnessGroups.filter(group => !!group.length)
+  
+  return {
+    list: finalColorsList,
+    tolerance: colorsFilteredByHue.tolerance
+  }
+}
+
+const colorsData = parseDataFromTable('colorsTable')
+const uniqueColors = removeAlternativeColors(colorsData.rows)
+const parsedUniqueColors = uniqueColors.map(parseColorStrings)
+
+const createState = (initialState, onChange) => {
+  return {
+    state: initialState,
+    setState(newState) {
+      this.state = Object.assign({}, this.state, newState)
+      onChange(this.state)
+    }
+  }
+}
+
+const dom = {
+  chart: queryId('chart'),
+  chartContainer: queryId('chart-container'),
+  hueSlider: queryId('hue-slider'),
+  hueValueDisplay: queryId('hue-value'),
+  toleranceText: queryId('tolerance-text'),
+  toleranceValueDisplay: queryId('tolerance-value'),
+  monoToggle: queryId('mono-toggle'),
+  colorInfo: queryId('color-info'),
+  saturationAxis: queryId('saturation-axis')
+}
+
+const render = (state) => {
+  const { hue, mono } = state
+
+  const colorList = groupColors({
+    colorList: parsedUniqueColors,
+    tolerance: {
+      min: 5
+    },
+    hue,
+    mono
+  })
+
+  const html = colorList.list.map(lightnessGroup => `
+    <div class="row">
+      ${lightnessGroup.map(({ name, type}) => {
+        const CSSProperties = [
+          `--background: ${name}`,
+          `--color: ${type === 'light' ? 'black' : 'white'}`
+        ]
+
+        return `
+          <button
+            type="button"
+            class="color-button"
+            id="${name}"
+            style="${CSSProperties.join(';')}"
+          >
+            ${name}
+          </button>
+        `
+      }).join('')}
+    </div>
+  `).join('')
+
+  const sliderPos = hue / 360
+
+  dom.hueSlider.classList.toggle('mono', !!mono)
+  dom.toleranceText.classList.toggle('hidden', !!mono)
+  dom.saturationAxis.classList.toggle('hidden', !!mono)
+  if (mono) {
+    dom.hueValueDisplay.innerText = 0
+  } else {
+    dom.hueValueDisplay.innerText = hue
+  }
+
+  dom.hueSlider.style.setProperty('--pos', sliderPos)
+  dom.hueSlider.value = hue
+  dom.toleranceValueDisplay.innerHTML = colorList.tolerance
+  dom.chart.innerHTML = html
+}
+
+const formatRGB = rgb => `rgb(${rgb.join(', ')})`
+
+const formatHSL = hsl => `hsl(${hsl.map((_, i) => i === 0 ? _ : `${_}%`).join(', ')})`
+
+const renderColorInfo = color => {
+  const { type, name, alternativeName, rgb, hsl, hex } = color
+
+  const CSSProperties = [
+    `--background: ${name}`,
+    `--color: ${type === 'light' ? 'black' : 'white'}`
+  ]
+
+  dom.colorInfo.innerHTML = `
+    <div class="color-info-container" style="${CSSProperties.join(';')}">
+      <h1 class="selectable color-info-name" tabindex="0">
+        <span class="marquee">${name}</span>
+      </h1>
+
+      ${color.alternativeName ? `
+        <p class="color-info-row color-info-row--alter" tabindex="0">
+          or <span class="selectable">${color.alternativeName}</span>
+        </p>
+      `: ''}
+
+      <p class="selectable color-info-row color-info-row--hex" tabindex="0">
+        ${color.hex}
+      </p>
+
+      <p class="selectable color-info-row color-info-row--rgb" tabindex="0">
+        ${formatRGB(color.rgb)}
+      </p>
+
+      <p class="selectable color-info-row color-info-row--hsl" tabindex="0">
+        ${formatHSL(color.hsl)}
+      </p>
+
+      <button
+        type="button"
+        class="color-info-close-button"
+        id="close-color-info"
+      >
+        <svg class="back-icon" role="img" alt="back icon">
+          <use xlink:href="#back-icon"></use>
+        </svg>
+        back
+      </button>
+    </div>
+  `
+
+  const container = query('.color-info-container', dom.colorInfo)
+
+  const closeButton = query('#close-color-info', container)
+  closeButton.addEventListener('click', () => hideColorInfo(true))
+
+  queryAll('.selectable', container).forEach(el => {
+    el.addEventListener('click', () => select(el))
+    el.addEventListener('focus', () => select(el))
+  })
+
+  wait(1000).then(() => {
+    const computedStyle = getComputedStyle(container)
+    const width = parseFloat(computedStyle.width)
+    const paddingLeft = parseFloat(computedStyle.paddingLeft)
+    const paddingRight = parseFloat(computedStyle.paddingRight)
+    const containerWidth = width - (paddingLeft + paddingRight)
+    queryAll('.marquee', dom.colorInfo).forEach(el => {
+      const width = el.offsetWidth
+      const widthDiff = containerWidth - width
+      if (widthDiff >= 0) {
+        el.classList.remove('marquee')
+        return
+      }
+      el.style.setProperty('--marquee-amount', `${widthDiff}px`)
+    })
+  })
+}
+
+const showColorInfo = e => {
+  if (query('.deactivating', dom.chartContainer)) {
+    return
+  }
+
+  dom.chart.inert = true
+  dom.colorInfo.inert = false
+  dom.chart.classList.add('contain')
+  e.target.classList.add('active')
+
+  const color = parsedUniqueColors.find(c => c.name === e.target.id)
+  renderColorInfo(color)
+  dom.colorInfo.classList.add('active')
+}
+
+/*
+ * Can be triggered by:
+ * - Clicking on close button in colorInfo
+ * - Pressing ESC
+ * - Changing hue while colorInfo is open
+ *   This scenario requires checking if activeColorButton exists.
+ */
+const hideColorInfo = shouldFocusBack => {
+  dom.chart.inert = false
+  dom.colorInfo.inert = true
+  dom.colorInfo.classList.add('deactivating')
+  dom.colorInfo.classList.remove('active')
+  const activeColorButton = query('.color-button.active', dom.chart)
+  if (activeColorButton) {
+    activeColorButton.classList.add('deactivating')
+    activeColorButton.classList.remove('active')
+  }
+
+  wait(600).then(() => {
+    dom.colorInfo.classList.remove('deactivating')
+
+    // Last clicked color is still there. e.g. hue didn't change
+    if (activeColorButton) {
+      dom.chart.classList.remove('contain')
+
+      /*
+       * The crazy reason why we need to clone an element
+       * with one className lacking, instead of just
+       * removing that className from the existing element is:
+       * Some mobile browsers and some (I guess) old versions
+       * of Safari fucks up the animation. They run
+       * "deactivate" keyframes upon className removal ¯\_(ツ)_/¯
+       * When we do it this way and do it with some async
+       * involved, it works properly.
+       */
+      const newActiveColorButton = activeColorButton.cloneNode(true)
+      newActiveColorButton.classList.remove('deactivating')
+      requestAnimationFrame(() => {
+        if (activeColorButton) {
+          activeColorButton.replaceWith(newActiveColorButton)
+          if (shouldFocusBack) {
+            newActiveColorButton.focus()
+          }
+        }
+      })
+    }
+  })
+}
+
+const exampleHues = [13, 25, 36, 47, 105, 150, 178, 210, 240, 297, 336, 350]
+
+const ui = createState({
+  hue: randomFrom(exampleHues),
+  mono: false
+}, render)
+
+render(ui.state)
+
+dom.monoToggle.addEventListener('change', e => {
+  ui.setState({
+    mono: e.target.checked,
+    prevHue: ui.state.hue,
+    hue: e.target.checked ? 0 : ui.state.prevHue
+  })
+  hideColorInfo()
+})
+
+dom.hueSlider.addEventListener('input', e => {
+  ui.setState({
+    hue: Number(e.target.value),
+  })
+  hideColorInfo()
+})
+
+dom.chart.addEventListener('click', showColorInfo)
+
+const keyCodeGetter = () => {
+  const KEYS = {
+    27: 'escape'
+  }
+
+  return event => KEYS[event.which] || KEYS[event.keyCode]
+}
+
+const getKeyCode = keyCodeGetter()
+
+window.addEventListener('keyup', e => {
+  switch (getKeyCode(e)) {
+    case 'escape':
+      if (dom.colorInfo.classList.contains('active')) {
+        hideColorInfo(true)
+      }
+  }
+})
\ No newline at end of file
diff --git a/sorted-css-colors/src/style.scss b/sorted-css-colors/src/style.scss
new file mode 100644
index 0000000..3bb7e61
--- /dev/null
+++ b/sorted-css-colors/src/style.scss
@@ -0,0 +1,490 @@
+@mixin slider-thumb {
+  appearance: none;
+  display: block;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: linear-gradient(
+    120deg,
+    #444 30%,
+    #111 100%
+  );
+  box-shadow:
+    0 0 0 2px white,
+    0 0 2px 3px #444;
+  transition: all .3s;
+}
+
+@mixin non-mono-slider-thumb-focus {
+  background: linear-gradient(
+    120deg,
+    hsl( calc(var(--pos) * 360), 90%, 50% ) 30%,
+    hsl( calc(var(--pos) * 360), 100%, 40% ) 100%
+  );
+  box-shadow:
+    0 0 0 3px white,
+    0 0 2px 4px hsl( calc(var(--pos) * 360), 100%, 50% );
+}
+
+@mixin button-reset {
+  appearance: none;
+  background: none;
+  border: none;
+  color: inherit;
+  margin: 0;
+}
+
+:root {
+  --show-info-duration: .3s;
+}
+
+body {
+  --content-width: max(400px, min(80vmin, 800px));
+  --font-size: max(14px, min(3vmin, 20px));
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font: normal var(--font-size)/1.4 helvetica, sans-serif;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.back-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.github-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.github-link {
+  position: absolute;
+  top: .5em;
+  right: .5em;
+  opacity: .7;
+
+  &:hover, &:focus {
+    opacity: 1;
+  }
+}
+
+#colorsTable {
+  display: none;
+}
+
+.container {
+  position: relative;
+  padding: 2vmin;
+  top: -2vmin;
+  left: -2vmin;
+}
+
+.hue-control {
+  display: flex;
+  flex-direction: column;
+  width: var(--content-width);
+  margin-bottom: 1.5vmin;
+  font-size: .8em;
+
+  &-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    min-height: 1.1em;
+    margin-bottom: .75vmin;
+  }
+}
+
+.hue-value {
+  display: inline-block;
+  min-width: 4vmin;
+  text-align: center;
+}
+
+.tolerance-text {
+  font-size: .8em;
+  color: #333;
+}
+
+.hue-slider {
+  appearance: none;
+  outline: none;
+  position: relative;
+  flex: 1;
+  height: 8px;
+  margin-left: 2vmin;
+  border-radius: 5px;
+  transition: all .3s;
+  background: linear-gradient(
+    to right,
+    hsl(0, 80%, 70%) 0%,
+    hsl(30, 80%, 70%) 8.3%,
+    hsl(60, 80%, 70%) 16.6%,
+    hsl(90, 80%, 70%) 25%,
+    hsl(120, 80%, 70%) 33.3%,
+    hsl(150, 80%, 70%) 41.6%,
+    hsl(180, 80%, 70%) 50%,
+    hsl(210, 80%, 70%) 58.3%,
+    hsl(240, 80%, 70%) 66.6%,
+    hsl(270, 80%, 70%) 75%,
+    hsl(300, 80%, 70%) 83.3%,
+    hsl(330, 80%, 70%) 91.6%,
+    hsl(360, 80%, 70%) 100%
+  );
+
+  &.mono {
+    background: linear-gradient(
+      to bottom,
+      #444 0%,
+      #111 100%
+    );
+  }
+
+  &:not(.mono):focus {
+    height: 10px;
+    background: linear-gradient(
+      to right,
+      hsl(0, 100%, 50%) 0%,
+      hsl(30, 100%, 50%) 8.3%,
+      hsl(60, 100%, 50%) 16.6%,
+      hsl(90, 100%, 50%) 25%,
+      hsl(120, 100%, 50%) 33.3%,
+      hsl(150, 100%, 50%) 41.6%,
+      hsl(180, 100%, 50%) 50%,
+      hsl(210, 100%, 50%) 58.3%,
+      hsl(240, 100%, 50%) 66.6%,
+      hsl(270, 100%, 50%) 75%,
+      hsl(300, 100%, 50%) 83.3%,
+      hsl(330, 100%, 50%) 91.6%,
+      hsl(360, 100%, 50%) 100%
+    );
+  }
+
+  &::-webkit-slider-thumb {
+    @include slider-thumb;
+  }
+
+  &::-moz-range-thumb {
+    @include slider-thumb;
+  }
+
+  &:not(.mono):focus::-webkit-slider-thumb {
+    @include non-mono-slider-thumb-focus;
+  }
+
+  &:not(.mono):focus::-moz-range-thumb {
+    @include non-mono-slider-thumb-focus;
+  }
+}
+
+.mono-toggle {
+  @include button-reset;
+  outline: none;
+
+  width: 15px;
+  height: 15px;
+  margin-left: 2vmin;
+  border-radius: 50%;
+  transition: background-position .2s;
+  cursor: pointer;
+  background-size: 200%;
+  background-image: linear-gradient(
+    to right,
+    white 24%,
+    #777 28%,
+    #777 70%,
+    white 74%
+  );
+  box-shadow:
+    0 0 0 1.5px white,
+    0 0 0 3px #777;
+
+  &:hover {
+    background-image: linear-gradient(
+      to right,
+      white 24%,
+      #333 28%,
+      #333 70%,
+      white 74%
+    );
+    box-shadow:
+      0 0 0 1.5px white,
+      0 0 0 3px #333;
+  }
+
+  &:active {
+    background-image: linear-gradient(
+      to right,
+      #f5f5f5 24%,
+      #888 28%,
+      #888 70%,
+      #f5f5f5 74%
+    );
+    box-shadow:
+      0 0 0 1.5px white,
+      0 0 0 3px #888;
+  }
+
+  &:checked,
+  &:checked:active {
+    background-position: 89% 0;
+    background-image: linear-gradient(
+      to right,
+      white 24%,
+      black 28%,
+      black 70%,
+      white 74%
+    );
+    box-shadow:
+      0 0 0 1.5px white,
+      0 0 0 3px black;
+  }
+
+  &:focus {
+    box-shadow:
+      0 0 0 1.5px white,
+      0 0 0 3px #333,
+      0 0 2.25px 6px rgba(black, .125);
+  }
+
+  &:checked:focus {
+    box-shadow:
+      0 0 0 1.5px white,
+      0 0 0 3px black,
+      0 0 2.25px 6px rgba(black, .25);
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: var(--content-width);
+  height: var(--content-width);
+}
+
+.chart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  @supports (grid-auto-flow: row) {
+    display: grid;
+    grid-auto-flow: row;
+  }
+
+  &.contain {
+    overflow: hidden;
+  }
+
+  .row {
+    flex: 1;
+    display: flex;
+
+    @supports (grid-auto-flow: row) {
+      display: grid;
+      grid-auto-flow: column;
+    }
+
+    .color-button {
+      @include button-reset;
+
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: .6em;
+      text-transform: uppercase;
+      letter-spacing: .125em;
+      background: var(--background);
+      color: var(--color);
+      user-select: none;
+      cursor: pointer;
+      transition: transform .2s;
+
+      &:hover, &:focus {
+        outline: none;
+        transform: scale(1.04);
+        box-shadow: 3px 3px 10px rgba(#000, .125);
+      }
+      
+      &:active {
+        transform: scale(1.02);
+        box-shadow: 1px 1px 5px rgba(#000, .125);
+      }
+
+      &.active {
+        transition: transform .6s;
+      }
+
+      &.active,
+      &.deactivating {
+        transform: scale(16);
+        color: transparent;
+      }
+
+      &.deactivating {
+        animation: deactivate forwards calc(2 * var(--show-info-duration));
+      }
+
+      @keyframes deactivate {
+        from, 70% {
+          color: transparent;
+        }
+        to {
+          color: var(--color);
+          transform: scale(1);
+        }
+      }
+    }
+  }
+}
+
+.color-info {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transform: translateY(-5%) scale(.8);
+  transition:
+    opacity var(--show-info-duration),
+    transform var(--show-info-duration);
+
+  &.active {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition-delay: var(--show-info-duration);
+  }
+
+  &-container {
+    --info-padding: 3em;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 70%;
+    height: 70%;
+    padding: var(--info-padding);
+    box-sizing: border-box;
+    border: 1px solid;
+    font-size: .8em;
+    color: var(--color);
+    border-color: var(--color);
+  }
+
+  &-name {
+    font-size: 3em;
+    font-weight: 100;
+    line-height: 1.3;
+    margin-bottom: .33em;
+    overflow: hidden;
+    outline: none;
+  }
+
+  .marquee {
+    display: inline-block;
+    animation: marquee 4s 1s infinite;
+  }
+
+  @keyframes marquee {
+    from, 12%, 88%, to {
+      transform: translateX(0);
+    }
+    48%, 52% {
+      background: transparent;
+      transform: translateX(
+        calc( var(--marquee-amount) - .1em )
+      );
+    }
+  }
+
+  &-row {
+    font-size: 1.4em;
+    font-weight: 100;
+    margin-bottom: .33rem;
+    outline: none;
+    
+    &--alter {
+      font-size: 1.8em;
+    }
+
+    &--hex {}
+  }
+
+  &-close-button {
+    @include button-reset;
+
+    position: absolute;
+    bottom: 1em;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    font-size: 1.25em;
+    cursor: pointer;
+    transition: all .3s;
+
+    &:hover, &:focus {
+      padding-right: 1em;
+    }
+
+    .back-icon {
+      margin-right: .25em;
+    }
+  }
+}
+
+.axis {
+  font-size: .5em;
+  letter-spacing: .25em;
+  text-align: center;
+  text-transform: uppercase;
+
+  &::before, &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 33%;
+    height: 1px;
+    background: #aaa;
+  }
+
+  &::before {
+    left: 0;
+  }
+
+  &::after {
+    right: 0;
+  }
+}
+
+.lightness-axis {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  transform-origin: top right;
+  transform:
+    rotate(-90deg)
+    translateY(200%)
+    rotate(180deg)
+    translateX(100%);
+}
+
+.saturation-axis {
+  position: relative;
+  transform: translateY(100%);
+}
\ No newline at end of file
diff --git a/space-travel/README.markdown b/space-travel/README.markdown
new file mode 100644
index 0000000..f61abbc
--- /dev/null
+++ b/space-travel/README.markdown
@@ -0,0 +1,5 @@
+# Space Travel
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/shunyadezain/pen/GRNEyZW](https://codepen.io/shunyadezain/pen/GRNEyZW).
+
+
diff --git a/space-travel/dist/index.html b/space-travel/dist/index.html
new file mode 100644
index 0000000..ba716cb
--- /dev/null
+++ b/space-travel/dist/index.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Space Travel</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="webgl"></div>
+<div id="bg-box">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
+    <path fill="#34496a" d="M0 0v600h800V0zm405.6 458.4C217 458.4 64.1 360.6 64.1 240S217 21.5 405.6 21.5 747.3 119.3 747.3 240s-153 218.4-341.6 218.4z" />
+  </svg>
+</div>
+<div class="svg-box">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
+    <defs />
+    <defs>
+      <clipPath id="clip-path">
+        <rect id="graph-line-mask" width="105.2" height="66.7" x="439.5" y="186.6" fill="none" />
+      </clipPath>
+      <clipPath id="clip-path-2">
+        <path id="body-mask" fill="none" d="M490.4 368.3c0 63.7-38 140-84.7 140s-84.8-76.3-84.8-140 38-90.6 84.8-90.6 84.7 26.9 84.7 90.6z" />
+      </clipPath>
+    </defs>
+    <g id="Ship">
+
+      <g id="mid-display">
+        <rect width="320.3" height="207" x="248.8" y="116.3" fill="#282e39" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" opacity=".8" rx="18.4" />
+        <g id="graph-btm">
+          <path id="graph-left" fill="#0ff" d="M439.7 292.1s4.5-19.4 8.7-19c3.6.3 4.6 9.2 7.3 9 3.4-.2 4-14 7.3-14.3 3-.2 4.7 10 8.3 10 4 0 5.1-12.6 8.8-12.8 4.1-.2 7.2 27.1 7.2 27.1z" />
+          <path id="graph-morph1" fill="none" d="M439.7 292.1s2.2-10.8 6.5-10.4c3.5.3 8.3-18.9 11-19 3.4-.3 5.6 9 9 8.7 3-.3 3.5-3.2 7-3.2 4 0 5.9 10.6 9.5 10.4 4.2-.2 4.7 13.5 4.7 13.5z" />
+          <path id="graph-right" fill="#34496a" d="M502.6 292.1s4.5-19.4 8.8-19c3.5.3 4.6 9.2 7.3 9 3.4-.2 3.9-14 7.3-14.3 3-.2 4.7 10 8.3 10 4 0 5-12.6 8.7-12.8 4.2-.2 7.3 27.1 7.3 27.1z" />
+          <path id="graph-morph2" fill="none" d="M502.6 292.1s4.5-9.8 8.8-9.4c3.5.3 4.6-6.8 7.3-7 3.4-.2 3.9 6.6 7.3 6.4 3-.3 4.7-17.9 8.3-17.9 4 0 5 16.5 8.7 16.3 4.2-.2 7.3 11.6 7.3 11.6z" />
+        </g>
+        <g id="planet">
+          <circle id="planet-base" cx="332.2" cy="207.8" r="37.3" fill="#34496a" />
+          <ellipse id="planet-circle" cx="331.5" cy="207.8" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" rx="61.8" ry="12.7" />
+          <path id="planet-top" fill="#34496a" d="M294.9 207.8a37.3 37.3 0 0174.6 0z" />
+        </g>
+        <g class="graph-circle-lb" id="graph-cir-left">
+          <circle cx="290.4" cy="287.5" r="20.8" fill="#34496a" />
+          <path fill="#0ff" d="M290.4 287.5l5.3-20.1a20.8 20.8 0 0115.5 20z" />
+        </g>
+        <g class="graph-circle-lb" id="graph-cir-mid">
+          <circle cx="345.4" cy="287.5" r="20.8" fill="#34496a" />
+          <path fill="#0ff" d="M345.4 287.5l5.2-20.1a20.8 20.8 0 0115.5 20z" />
+        </g>
+        <g id="graph-cir">
+          <circle cx="396.4" cy="292.1" r="16.4" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="2" />
+          <circle cx="396.4" cy="292.1" r="20.8" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="2" />
+          <circle cx="396.4" cy="292.1" r="11.6" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="2" />
+          <circle id="graph-cir-1" cx="408" cy="292.1" r="2.3" fill="#0ff" />
+          <circle id="graph-cir-2" cx="396.4" cy="275.7" r="2.3" fill="#0ff" />
+          <circle id="graph-cir-3" cx="417.2" cy="292.1" r="2.3" fill="#0ff" />
+          <circle id="graph-cir-mid-2" cx="396.4" cy="292.1" r="2.3" fill="#0ff" data-name="graph-cir-mid" />
+        </g>
+        <g id="graph-big" clip-path="url(#clip-path)">
+          <path id="graph-line" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M439.7 206.4c26.3 0 26.3 34.2 52.6 34.2s26.3-34.2 52.6-34.2 26.3 34.2 52.6 34.2 26.3-34.2 52.6-34.2" />
+        </g>
+        <circle cx="275.7" cy="139.7" r="11.8" fill="#34496a" />
+        <circle id="left-top-circle" cx="275.7" cy="139.7" r="11.8" fill="#0ff" />
+        <line x1="300.8" x2="387.1" y1="134.3" y2="134.9" fill="none" stroke="#34496a" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" />
+        <line x1="300.8" x2="338.5" y1="143.7" y2="143.9" fill="none" stroke="#34496a" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" />
+        <circle cx="448.1" cy="161.4" r="13.3" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="5" />
+        <path class="circles-top" id="circle-l" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M448 148.2a13.3 13.3 0 11-13.2 13.3 13.3 13.3 0 0113.3-13.3" />
+        <circle cx="491.2" cy="161.4" r="13.3" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="5" />
+        <path class="circles-top" id="circle-m" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M491.2 148.2a13.3 13.3 0 11-13.3 13.3 13.3 13.3 0 0113.3-13.3" />
+        <circle cx="534.4" cy="161.4" r="13.3" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="5" />
+        <path class="circles-top" id="circle-r" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M534.4 148.2a13.3 13.3 0 11-13.3 13.3 13.3 13.3 0 0113.3-13.3" />
+      </g>
+      <g id="btm-display">
+        <g id="right-display">
+          <g id="right-display-display">
+            <path fill="#282e39" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M654.7 461H508.6c-10.5 0-15.8-8.5-12-19l26.2-72a29.9 29.9 0 0125.8-18.9h146c10.5 0 15.8 8.5 12 19l-26.2 72a29.9 29.9 0 01-25.7 18.8z" opacity=".8" />
+            <g id="bars">
+              <polygon id="bar-3-btm" fill="#34496a" points="656.9 441.2 642.4 441.2 667.6 371.7 682.2 371.7 656.9 441.2" />
+              <polygon id="bar-3-top" fill="#0ff" points="656.9 441.2 642.4 441.2 653 412 667.5 412 656.9 441.2" />
+              <polygon id="bar-2-btm" fill="#34496a" points="633.7 441.2 619.2 441.2 644.5 371.7 659 371.7 633.7 441.2" />
+              <polygon id="bar-2-top" fill="#0ff" points="633.7 441.2 619.2 441.2 636 395.1 650.5 395.1 633.7 441.2" />
+              <polygon id="bar-1-btm" fill="#34496a" points="610.6 441.2 596.1 441.2 621.4 371.7 635.9 371.7 610.6 441.2" />
+              <polygon id="bar-1-top" fill="#0ff" points="610.6 441.2 596.1 441.2 604 419.5 618.5 419.5 610.6 441.2" />
+            </g>
+            <g id="btns" fill="#0ff">
+              <ellipse cx="546.8" cy="379.3" rx="6.5" ry="4.6" transform="rotate(-39.8 546.8 379.3)" />
+              <ellipse cx="562.7" cy="379.3" rx="6.5" ry="4.6" transform="rotate(-39.8 562.7 379.3)" />
+              <ellipse cx="578.6" cy="379.3" rx="6.5" ry="4.6" transform="rotate(-39.8 578.6 379.3)" />
+              <ellipse cx="594.5" cy="379.3" rx="6.5" ry="4.6" transform="rotate(-39.8 594.5 379.3)" />
+              <ellipse cx="540.6" cy="396.3" rx="6.5" ry="4.6" transform="rotate(-39.8 540.6 396.3)" />
+              <ellipse cx="556.5" cy="396.3" rx="6.5" ry="4.6" transform="rotate(-39.8 556.5 396.3)" />
+              <ellipse cx="572.4" cy="396.3" rx="6.5" ry="4.6" transform="rotate(-39.8 572.4 396.3)" />
+              <ellipse cx="588.3" cy="396.3" rx="6.5" ry="4.6" transform="rotate(-39.8 588.4 396.3)" />
+              <ellipse cx="534.4" cy="413.3" rx="6.5" ry="4.6" transform="rotate(-39.8 534.4 413.3)" />
+              <ellipse cx="550.3" cy="413.3" rx="6.5" ry="4.6" transform="rotate(-39.8 550.3 413.3)" />
+              <ellipse cx="566.2" cy="413.3" rx="6.5" ry="4.6" transform="rotate(-39.8 566.2 413.3)" />
+              <ellipse cx="582.1" cy="413.3" rx="6.5" ry="4.6" transform="rotate(-39.8 582.2 413.3)" />
+              <ellipse cx="528.2" cy="430.3" rx="6.5" ry="4.6" transform="rotate(-39.8 528.2 430.3)" />
+              <ellipse cx="544.1" cy="430.3" rx="6.5" ry="4.6" transform="rotate(-39.8 544.1 430.3)" />
+              <ellipse cx="560" cy="430.3" rx="6.5" ry="4.6" transform="rotate(-39.6 562.3 429.7)" />
+              <ellipse cx="575.9" cy="430.3" rx="6.5" ry="4.6" transform="rotate(-39.8 576 430.3)" />
+            </g>
+          </g>
+          <ellipse id="right-display-shadow" cx="593.3" cy="508.4" fill="#1e3855" rx="74" ry="10.9" />
+        </g>
+        <g id="left-display">
+          <g id="left-display-display">
+            <path fill="#282e39" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M299 461H153c-10.4 0-22-8.5-25.8-19L101 370c-3.8-10.4 1.6-18.9 12-18.9h146c10.5 0 22 8.5 25.9 18.9l26.2 72c3.8 10.4-1.6 19-12 19z" opacity=".8" />
+            <polygon fill="#0ff" points="153.1 433.3 155.7 440.3 158.2 447.3 153.6 443.8 148.9 440.3 151 436.8 153.1 433.3" />
+            <polygon fill="#0ff" points="143 433.3 146.4 433.3 151.9 448.4 148.5 448.4 143 433.3" />
+            <polygon fill="#0ff" points="193.8 448.4 191.3 441.4 188.7 434.4 193.4 437.9 198 441.4 195.9 444.9 193.8 448.4" />
+            <polygon fill="#0ff" points="203.9 448.4 200.6 448.4 195.1 433.3 198.4 433.3 203.9 448.4" />
+            <polygon fill="#0ff" points="164.4 433.3 167.8 433.3 173.3 448.4 169.9 448.4 164.4 433.3" />
+            <polygon fill="#0ff" points="174 433.3 177.4 433.3 182.9 448.4 179.5 448.4 174 433.3" />
+            <ellipse cx="199" cy="377.7" fill="#34496a" rx="5.4" ry="7.7" transform="rotate(-50.2 199 377.7)" />
+            <polygon fill="#0ff" points="198.2 380.9 197 377.7 195.9 374.6 199.2 376.1 202.6 377.7 200.4 379.3 198.2 380.9" />
+            <line x1="217.3" x2="267.5" y1="377.7" y2="377.7" fill="#282e39" stroke="#0ff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" opacity=".8" />
+            <ellipse cx="206.2" cy="397.6" fill="#34496a" rx="5.4" ry="7.7" transform="rotate(-50.2 206.2 397.6)" />
+            <polygon fill="#0ff" points="205.4 400.7 204.2 397.6 203.1 394.4 206.4 396 209.8 397.6 207.6 399.2 205.4 400.7" />
+            <line x1="224.5" x2="274.8" y1="397.6" y2="397.6" fill="#282e39" stroke="#0ff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" opacity=".8" />
+            <ellipse cx="213.5" cy="417.5" fill="#34496a" rx="5.4" ry="7.7" transform="rotate(-50.2 213.4 417.4)" />
+            <polygon fill="#0ff" points="212.6 420.6 211.5 417.5 210.3 414.3 213.7 415.9 217 417.5 214.8 419 212.6 420.6" />
+            <line x1="231.8" x2="282" y1="417.5" y2="417.5" fill="#282e39" stroke="#0ff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" opacity=".8" />
+            <ellipse cx="220.7" cy="437.3" fill="#34496a" rx="5.4" ry="7.7" transform="rotate(-50.2 220.7 437.3)" />
+            <polygon fill="#0ff" points="219.8 440.5 218.7 437.3 217.6 434.2 220.9 435.8 224.3 437.3 222.1 438.9 219.8 440.5" />
+            <line x1="239" x2="289.2" y1="437.3" y2="437.3" fill="#282e39" stroke="#0ff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" opacity=".8" />
+            <path fill="#34496a" d="M190.5 424.4h-46a7.4 7.4 0 01-6.5-4.7l-15.8-43.5c-1-2.6.4-4.7 3-4.7h46a7.4 7.4 0 016.5 4.7l15.8 43.5c1 2.6-.4 4.7-3 4.7z" />
+            <ellipse cx="157.8" cy="398" fill="#282e39" rx="17.5" ry="25.1" transform="rotate(-50.2 157.8 398)" />
+            <ellipse cx="157.8" cy="398" fill="#282e39" rx="5.1" ry="7.3" transform="rotate(-50.2 157.8 398)" />
+            <path fill="#0ff" d="M159.8 405a10 10 0 01-8.8-6.4 5.8 5.8 0 01.5-5.4 5.3 5.3 0 014.4-2.2 10 10 0 018.8 6.4 5.8 5.8 0 01-.5 5.4 5.3 5.3 0 01-4.4 2.1zm-3.9-10.6a2 2 0 00-1.6.7 2.5 2.5 0 000 2.3 6.6 6.6 0 005.4 4 2 2 0 001.7-.6 2.5 2.5 0 000-2.3 6.6 6.6 0 00-5.5-4zM173.6 405h14.5l-5.1-14h-14.4a1.8 1.8 0 00-1.7 2.6l3.2 8.7a4.1 4.1 0 003.5 2.6z" />
+          </g>
+          <ellipse id="left-display-shadow" cx="224.5" cy="511.5" fill="#1e3855" rx="74" ry="10.9" />
+        </g>
+      </g>
+      <g id="robot">
+        <path id="body-base" fill="#fff" d="M490.4 368.3c0 63.7-38 140-84.7 140s-84.8-76.3-84.8-140 38-90.6 84.8-90.6 84.7 26.9 84.7 90.6z" />
+        <g id="robot-body">
+          <ellipse id="robot-shadow" cx="405.6" cy="543.9" fill="#1e3855" rx="44.5" ry="7.1" />
+          <g clip-path="url(#clip-path-2)">
+            <g id="faces">
+              <g id="face">
+                <ellipse id="face-back" cx="560" cy="340.9" fill="#34496a" rx="61.5" ry="32.2" />
+                <g class="eyes" id="eyes" fill="#0ff">
+                  <ellipse cx="539.8" cy="340.9" rx="7.3" ry="13.7" />
+                  <ellipse cx="579.1" cy="340.9" rx="7.3" ry="13.7" />
+                </g>
+              </g>
+              <g id="face-2" data-name="face">
+                <ellipse id="face-back-2" cx="256.9" cy="340.9" fill="#34496a" data-name="face-back" rx="61.5" ry="32.2" />
+                <g class="eyes" id="eyes-2" fill="#0ff" data-name="eyes">
+                  <ellipse cx="236.7" cy="340.9" rx="7.3" ry="13.7" />
+                  <ellipse cx="275.9" cy="340.9" rx="7.3" ry="13.7" />
+                </g>
+              </g>
+              <g id="charge">
+                <circle cx="406.8" cy="340.9" r="16.2" fill="#34496a" />
+                <rect width="4.1" height="13.9" x="398.7" y="334" fill="#fff" />
+                <rect width="4.1" height="13.9" x="410.8" y="334" fill="#fff" />
+              </g>
+            </g>
+          </g>
+        </g>
+        <path id="right-hand" fill="#fff" d="M549.7 400.7c0 15.6-31.2 28.2-56.2 28.2s-34.2-12.6-34.2-28.2 9.2-28 34.2-28 56.2 12.5 56.2 28z" />
+        <path id="left-hand" fill="#fff" d="M255.6 400.7c0-15.5 31.2-28 56.2-28s34.2 12.5 34.2 28-9.3 28.2-34.2 28.2-56.2-12.6-56.2-28.2z" />
+      </g>
+      <path id="note-1" fill="none" d="M180 317l-3.5-3.8a1 1 0 00-1.7.7v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a3 3 0 00-.7-1.9v-6.8l1.7 1.8a1 1 0 101.5-1.4z" />
+      <path id="note-2" fill="none" d="M203.4 323.4v-9.5a1 1 0 00-1-1h-9.3a1 1 0 00-1 1v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a2.9 2.9 0 00-.7-1.9V315h7.3v7.1a5.8 5.8 0 00-1.9-.3c-2.6 0-4.7 1.6-4.7 3.5s2.1 3.5 4.7 3.5 4.7-1.5 4.7-3.5a2.9 2.9 0 00-.8-1.8z" />
+    </g>
+  </svg>
+</div>
+<canvas class="webgl2"></canvas>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.min.js'></script>
+<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
+<script src='https://assets.codepen.io/16327/MorphSVGPlugin3.min.js'></script>
+<script src='https://assets.codepen.io/16327/DrawSVGPlugin3.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/space-travel/dist/script.js b/space-travel/dist/script.js
new file mode 100644
index 0000000..9ff905d
--- /dev/null
+++ b/space-travel/dist/script.js
@@ -0,0 +1,690 @@
+/* SVG ANIMATION */
+
+function animation() {
+  let isLeft = false;
+
+  /**
+   * Robot
+   */
+
+  gsap.set("#left-hand", {
+    x: 30,
+    transformOrigin: "right center"
+  });
+  gsap.set("#right-hand", {
+    x: -30,
+    transformOrigin: "left center"
+  });
+
+  const eyesTl = gsap
+    .timeline({
+      repeat: -1,
+      repeatDelay: 1
+    })
+    .to(".eyes", {
+      opacity: 0,
+      duration: 0.1
+    })
+    .to(".eyes", {
+      opacity: 1,
+      duration: 0.1
+    });
+
+  const robotTl = gsap
+    .timeline({
+      repeat: -1
+    })
+    .to(
+      "#robot",
+      {
+        x: 100,
+        onStart: () => {
+          isLeft = false;
+        }
+      },
+      "right"
+    )
+    .to(
+      "#faces",
+      {
+        x: -60
+      },
+      "right"
+    )
+    .to(
+      "#left-hand",
+      {
+        x: 80
+      },
+      "right"
+    )
+    .to(
+      "#charge",
+      {
+        scaleX: 0.8
+      },
+      "right"
+    )
+    .to("#right-hand", {
+      rotation: 20,
+      repeat: 2,
+      yoyo: true,
+      ease: "power2.inOut",
+      duration: 0.4
+    })
+    .to(
+      "#robot",
+      {
+        x: -100,
+        onStart: () => {
+          isLeft = true;
+        }
+      },
+      "left"
+    )
+    .to(
+      "#faces",
+      {
+        x: 60
+      },
+      "left"
+    )
+    .to(
+      "#charge",
+      {
+        scaleX: 0.8
+      },
+      "left"
+    )
+    .to(
+      "#left-hand",
+      {
+        x: 30
+      },
+      "left"
+    )
+    .to(
+      "#right-hand",
+      {
+        x: -80
+      },
+      "left"
+    )
+    .to("#left-hand", {
+      rotation: -20,
+      repeat: 3,
+      yoyo: true,
+      ease: "power1.inOut",
+      duration: 0.4
+    })
+    .to(
+      "#robot",
+      {
+        x: 0
+      },
+      "center"
+    )
+    .to(
+      "#faces",
+      {
+        x: 0
+      },
+      "center"
+    )
+    .to(
+      "#charge",
+      {
+        scaleX: 1
+      },
+      "center"
+    )
+    .to("#left-hand", {
+      y: -50,
+      x: -10,
+      rotation: 30
+    })
+    .to("#left-hand", {
+      rotation: 50,
+      repeat: 1,
+      yoyo: true,
+      ease: "sine.inOut"
+    })
+    .to("#left-hand", {
+      y: 0,
+      x: 30,
+      rotation: 0
+    });
+  robotTl.timeScale(0.8);
+
+  /**
+   * Main display
+   */
+
+  //left-top-circle
+  gsap.set("#left-top-circle", {
+    transformOrigin: "center",
+    scale: 0
+  });
+
+  gsap.to("#left-top-circle", {
+    transformOrigin: "center",
+    scale: 1,
+    fill: "#34496a",
+    repeat: -1,
+    duration: 2
+  });
+
+  //graph-left-btm
+  gsap.to(".graph-circle-lb", {
+    rotation: 360,
+    transformOrigin: "center",
+    duration: 2,
+    stagger: {
+      amount: 1,
+      ease: "sine.inOut",
+      repeat: -1
+    }
+  });
+
+  //planet
+  const planetTl = gsap
+    .timeline({
+      repeat: -1,
+      yoyo: true
+    })
+    .set("#planet-circle", {
+      rotation: 10,
+      transformOrigin: "center"
+    })
+    .to("#planet-circle", {
+      rotation: -10,
+      transformOrigin: "center",
+      ease: "power1.inOut"
+    });
+
+  //circle-btm-graph
+  gsap.to("#graph-cir-1", {
+    rotation: 360,
+    ease: "none",
+    transformOrigin: "-9px center",
+    duration: 3,
+    repeat: -1
+  });
+
+  gsap.to("#graph-cir-2", {
+    rotation: 360,
+    ease: "none",
+    transformOrigin: "center 18px",
+    duration: 4,
+    repeat: -1
+  });
+
+  gsap.to("#graph-cir-3", {
+    rotation: 360,
+    ease: "none",
+    transformOrigin: "-19px center",
+    duration: 5,
+    repeat: -1
+  });
+
+  gsap.to("#graph-cir-mid-2", {
+    scale: 1.5,
+    ease: "sine.inOut",
+    transformOrigin: "center",
+    repeat: -1,
+    yoyo: true
+  });
+
+  //bottom-right-graph
+  gsap.to("#graph-left", {
+    morphSVG: "#graph-morph1",
+    repeat: -1,
+    yoyo: true,
+    ease: Elastic.easeOut.config(1, 0.8),
+    duration: 2
+  });
+
+  gsap.to("#graph-right", {
+    morphSVG: "#graph-morph2",
+    repeat: -1,
+    yoyo: true,
+    ease: "power3.inOut",
+    duration: 1
+  });
+  //top right circle
+
+  gsap.to(".circles-top", {
+    rotation: 360,
+
+    duration: 10,
+    transformOrigin: "center",
+    stagger: {
+      each: 0.5,
+      ease: "none",
+      repeat: -1
+    }
+  });
+
+  gsap.to("#circle-l", {
+    drawSVG: "20",
+    repeat: -1,
+    yoyo: true,
+    ease: Bounce.easeOut,
+    duration: 1
+  });
+
+  gsap.to("#circle-m", {
+    drawSVG: "80 30",
+    repeat: -1,
+    yoyo: true,
+    ease: Bounce.easeOut,
+    duration: 1.5
+  });
+
+  gsap.to("#circle-r", {
+    drawSVG: "0",
+    repeat: -1,
+    yoyo: true,
+    ease: SteppedEase.config(12),
+    duration: 3
+  });
+
+  /**
+   * Left Display
+   */
+  gsap.to("#left-display-display", {
+    y: 10,
+    ease: "sine.inOut",
+    repeat: -1,
+    yoyo: true,
+    duration: 2
+  });
+  gsap.to("#left-display-shadow", {
+    scale: 1.1,
+    transformOrigin: "center",
+    ease: "sine.inOut",
+    repeat: -1,
+    yoyo: true,
+    duration: 2
+  });
+
+  //song
+  const songTl = gsap
+    .timeline({
+      repeat: -1
+    })
+    .to("#left-display-display line", {
+      stroke: "#34496a",
+      stagger: {
+        each: 0.5
+      }
+    })
+    .to("#left-display-display line", {
+      stroke: "#0ff",
+      stagger: {
+        each: 0.5
+      }
+    });
+
+  for (let i = 0; i < 3; i++) {
+    let clone1 = document.querySelector("#note-1").cloneNode(true);
+    let clone2 = document.querySelector("#note-2").cloneNode(true);
+    clone1.classList.add("notes");
+    clone2.classList.add("notes");
+    gsap.set(clone1, {
+      attr: {
+        d:
+          "M180 317l-3.5-3.8a1 1 0 00-1.7.7v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a3 3 0 00-.7-1.9v-6.8l1.7 1.8a1 1 0 101.5-1.4z",
+        fill: "#0ff"
+      },
+      y: 40,
+      opacity: 0
+    });
+    gsap.set(clone2, {
+      attr: {
+        d:
+          "M203.4 323.4v-9.5a1 1 0 00-1-1h-9.3a1 1 0 00-1 1v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a2.9 2.9 0 00-.7-1.9V315h7.3v7.1a5.8 5.8 0 00-1.9-.3c-2.6 0-4.7 1.6-4.7 3.5s2.1 3.5 4.7 3.5 4.7-1.5 4.7-3.5a2.9 2.9 0 00-.8-1.8z",
+        fill: "#0ff"
+      },
+      x: -10,
+      y: 40,
+      opacity: 0
+    });
+    document.querySelector("svg").appendChild(clone1);
+    document.querySelector("svg").appendChild(clone2);
+  }
+
+  gsap.to(".notes", {
+    y: gsap.utils.random(-50, -100, 10, true),
+    x: gsap.utils.random(-50, 50, 25, true),
+    opacity: 1,
+    duration: gsap.utils.random(1.5, 3, 1.5, true),
+    stagger: {
+      each: 0.5,
+      ease: "sine.in",
+      repeat: -1
+    }
+  });
+
+  /**
+   * Right Display
+   */
+  gsap.to("#right-display-display", {
+    y: 10,
+    ease: "sine.inOut",
+    repeat: -1,
+    yoyo: true,
+    duration: 2,
+    delay: 1.5
+  });
+  gsap.to("#right-display-shadow", {
+    scale: 1.1,
+    transformOrigin: "center",
+    ease: "sine.inOut",
+    repeat: -1,
+    yoyo: true,
+    duration: 2,
+    delay: 1.5
+  });
+
+  //graph-lines
+  gsap.to("#graph-line", {
+    x: -105,
+    ease: "none",
+    repeat: -1,
+    duration: 2
+  });
+
+  gsap.to("#bar-1-top", {
+    morphSVG: "#bar-1-btm",
+    repeat: -1,
+    yoyo: true
+  });
+  gsap.to("#bar-2-top", {
+    morphSVG: "#bar-2-btm",
+    repeat: -1,
+    yoyo: true,
+    duration: 1.5
+  });
+  gsap.to("#bar-3-top", {
+    morphSVG: "#bar-3-btm",
+    repeat: -1,
+    yoyo: true,
+    duration: 2
+  });
+
+  //btns
+  gsap.to("#btns ellipse", {
+    fill: "#34496a",
+    stagger: {
+      amount: 1,
+      grid: [4, 4],
+      repeat: -1,
+      yoyo: true,
+      from: "random"
+    }
+  });
+
+  const sizes = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+
+  /**
+   * Mouse
+   */
+
+  let mouseX = 0;
+  let mouseY = 0;
+
+  window.addEventListener("mousemove", (e) => {
+    mouseX = (e.clientX / sizes.width) * 2 - 1;
+    mouseY = -(e.clientY / sizes.height) * 2 + 1;
+
+    gsap.to("#mid-display", {
+      x: -mouseX * 10,
+      y: mouseY * 10
+    });
+
+    gsap.to("#btm-display", {
+      x: -mouseX * 20,
+      y: mouseY * 10
+    });
+  });
+
+  document.getElementById("robot").addEventListener("click", () => {
+    robotTl.pause();
+
+    const helloTl = gsap
+      .timeline({
+        paused: true
+      })
+      .to("#faces", {
+        x: isLeft ? 150 : -150,
+        ease: "sine.inOut",
+        repeatDelay: 1,
+        repeat: 1,
+        yoyo: true,
+
+        onComplete: () => {
+          robotTl.resume();
+        }
+      });
+
+    helloTl.restart();
+  });
+}
+animation();
+
+/* stars */
+//reference https://redstapler.co/space-warp-background-effect-three-js/
+let scene, camera, renderer, stars, startGeometry;
+const count = 5000;
+
+function init() {
+  scene = new THREE.Scene();
+
+  startGeometry = new THREE.BufferGeometry();
+
+  const positions = new Float32Array(count * 3);
+  for (let i = 0; i < count; i++) {
+    positions[i] = Math.random() * 600 - 300;
+  }
+  startGeometry.setAttribute(
+    "position",
+    new THREE.BufferAttribute(positions, 3)
+  );
+
+  let sprite = new THREE.TextureLoader().load(
+    "https://i.postimg.cc/T25jx3S9/circle-05.png"
+  );
+  let starMaterial = new THREE.PointsMaterial({
+    size: 2,
+    sizeAttenuation: true,
+    transparent: true,
+    alphaMap: sprite
+  });
+
+  stars = new THREE.Points(startGeometry, starMaterial);
+  scene.add(stars);
+
+  /**
+   * camera1
+   */
+  camera = new THREE.PerspectiveCamera(
+    60,
+    window.innerWidth / window.innerHeight,
+    1,
+    1000
+  );
+  camera.position.z = 1;
+  camera.rotation.x = Math.PI / 2;
+
+  window.addEventListener("resize", () => {
+    camera.aspect = 800 / 600;
+    camera.updateProjectionMatrix();
+    renderer.setSize(800, 600);
+  });
+
+  renderer = new THREE.WebGLRenderer();
+  renderer.setSize(800, 600);
+  renderer.setClearColor("#282e39", 0.5);
+  document.getElementById("webgl").appendChild(renderer.domElement);
+
+  /**
+   * Animate
+   */
+
+  function animate() {
+    for (let i = 0; i < count; i++) {
+      const i3 = i * 3;
+
+      startGeometry.attributes.position.array[i3 + 1] -= 3;
+
+      if (startGeometry.attributes.position.array[i3 + 1] < -100) {
+        startGeometry.attributes.position.array[i3 + 1] = 300;
+      }
+    }
+    startGeometry.attributes.position.needsUpdate = true;
+    stars.rotation.y += 0.002;
+
+    renderer.render(scene, camera);
+    requestAnimationFrame(animate);
+  }
+  animate();
+}
+
+init();
+
+/* OBJECTS */
+
+function objects() {
+  // Canvas
+  const canvas = document.querySelector("canvas.webgl2");
+
+  // scene2
+  const scene2 = new THREE.Scene();
+
+  /**
+   * Objects
+   */
+  const objects = [];
+  const objectGeometry = new THREE.IcosahedronGeometry(1, 0);
+  const objectMaterial = new THREE.MeshStandardMaterial({
+    color: 0x6699ff,
+    metalness: 0,
+    roughness: 0
+  });
+  for (let i = 0; i < 3; i++) {
+    const object = new THREE.Mesh(objectGeometry, objectMaterial);
+    object.scale.set(0.4, 0.4, 0.4);
+    scene2.add(object);
+    objects.push(object);
+  }
+  objects[0].position.set(3, 0.5, 0);
+  objects[1].position.set(-3.5, 2, 0);
+  objects[2].position.set(1, 3, 0);
+
+  objects.forEach((object) => {
+    gsap
+      .to(object.rotation, {
+        x: Math.PI * 2,
+        z: Math.PI * 2,
+        repeat: -1,
+        ease: "none",
+        duration: 8 + Math.random() * 5,
+        delay: Math.random() * 50
+      })
+      .seek(100);
+
+    gsap
+      .to(object.position, {
+        y: 1.5,
+        z: -1,
+        repeat: -1,
+        yoyo: true,
+        ease: "sine.inOut",
+        duration: 4 + Math.random() * 5
+      })
+      .seek(100);
+  });
+
+  /**
+   * Lights
+   */
+  const light = new THREE.AmbientLight(0xffffff, 1.0);
+  scene2.add(light);
+
+  const directionalLight = new THREE.DirectionalLight(0xff0000, 0.8);
+  directionalLight.position.set(5, 10, 0);
+  scene2.add(directionalLight);
+
+  const directionalLight2 = new THREE.DirectionalLight(0xff000, 0.7);
+  directionalLight2.position.set(-5, -5, 2);
+  scene2.add(directionalLight2);
+
+  /**
+   * Sizes
+   */
+  const sizes = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+
+  window.addEventListener("resize", () => {
+    // Update sizes
+    sizes.width = window.innerWidth;
+    sizes.height = window.innerHeight;
+
+    // Update camera2
+    camera2.aspect = sizes.width / sizes.height;
+    camera2.updateProjectionMatrix();
+
+    // Update renderer2
+    renderer2.setSize(sizes.width, sizes.height);
+    renderer2.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  });
+
+  /**
+   * camera2
+   */
+  // Base camera2
+  const camera2 = new THREE.PerspectiveCamera(
+    75,
+    sizes.width / sizes.height,
+    0.1,
+    100
+  );
+  camera2.position.z = 5;
+  scene2.add(camera2);
+
+  /**
+   * renderer2
+   */
+  const renderer2 = new THREE.WebGLRenderer({
+    canvas: canvas,
+    alpha: true
+  });
+  renderer2.setSize(sizes.width, sizes.height);
+  renderer2.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  renderer2.setClearColor(0xffffff, 0);
+
+  /**
+   * Animate
+   */
+  const clock = new THREE.Clock();
+
+  let currentIntersect = null;
+
+  const tick = () => {
+    const elapsedTime = clock.getElapsedTime();
+
+    // Render
+    renderer2.render(scene2, camera2);
+
+    window.requestAnimationFrame(tick);
+  };
+
+  tick();
+}
+objects();
\ No newline at end of file
diff --git a/space-travel/dist/style.css b/space-travel/dist/style.css
new file mode 100644
index 0000000..adb14e9
--- /dev/null
+++ b/space-travel/dist/style.css
@@ -0,0 +1,42 @@
+body {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  background: #34496a;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#webgl {
+  width: 800px;
+  height: 600px;
+  position: absolute;
+  z-index: -1;
+}
+
+#webgl2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  outline: none;
+  z-index: 2;
+}
+
+#bg-box {
+  width: 802px;
+  height: 602px;
+  position: absolute;
+  z-index: -1;
+}
+
+.svg-box {
+  width: 800px;
+  height: 600px;
+  position: absolute;
+  z-index: 1;
+}
+.svg-box #robot {
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/space-travel/license.txt b/space-travel/license.txt
new file mode 100644
index 0000000..f78a4c2
--- /dev/null
+++ b/space-travel/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Shunya Koide (https://codepen.io/shunyadezain/pen/GRNEyZW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/space-travel/src/index.html b/space-travel/src/index.html
new file mode 100644
index 0000000..89f3d12
--- /dev/null
+++ b/space-travel/src/index.html
@@ -0,0 +1,162 @@
+<div id="webgl"></div>
+<div id="bg-box">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
+    <path fill="#34496a" d="M0 0v600h800V0zm405.6 458.4C217 458.4 64.1 360.6 64.1 240S217 21.5 405.6 21.5 747.3 119.3 747.3 240s-153 218.4-341.6 218.4z" />
+  </svg>
+</div>
+<div class="svg-box">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
+    <defs />
+    <defs>
+      <clipPath id="clip-path">
+        <rect id="graph-line-mask" width="105.2" height="66.7" x="439.5" y="186.6" fill="none" />
+      </clipPath>
+      <clipPath id="clip-path-2">
+        <path id="body-mask" fill="none" d="M490.4 368.3c0 63.7-38 140-84.7 140s-84.8-76.3-84.8-140 38-90.6 84.8-90.6 84.7 26.9 84.7 90.6z" />
+      </clipPath>
+    </defs>
+    <g id="Ship">
+
+      <g id="mid-display">
+        <rect width="320.3" height="207" x="248.8" y="116.3" fill="#282e39" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" opacity=".8" rx="18.4" />
+        <g id="graph-btm">
+          <path id="graph-left" fill="#0ff" d="M439.7 292.1s4.5-19.4 8.7-19c3.6.3 4.6 9.2 7.3 9 3.4-.2 4-14 7.3-14.3 3-.2 4.7 10 8.3 10 4 0 5.1-12.6 8.8-12.8 4.1-.2 7.2 27.1 7.2 27.1z" />
+          <path id="graph-morph1" fill="none" d="M439.7 292.1s2.2-10.8 6.5-10.4c3.5.3 8.3-18.9 11-19 3.4-.3 5.6 9 9 8.7 3-.3 3.5-3.2 7-3.2 4 0 5.9 10.6 9.5 10.4 4.2-.2 4.7 13.5 4.7 13.5z" />
+          <path id="graph-right" fill="#34496a" d="M502.6 292.1s4.5-19.4 8.8-19c3.5.3 4.6 9.2 7.3 9 3.4-.2 3.9-14 7.3-14.3 3-.2 4.7 10 8.3 10 4 0 5-12.6 8.7-12.8 4.2-.2 7.3 27.1 7.3 27.1z" />
+          <path id="graph-morph2" fill="none" d="M502.6 292.1s4.5-9.8 8.8-9.4c3.5.3 4.6-6.8 7.3-7 3.4-.2 3.9 6.6 7.3 6.4 3-.3 4.7-17.9 8.3-17.9 4 0 5 16.5 8.7 16.3 4.2-.2 7.3 11.6 7.3 11.6z" />
+        </g>
+        <g id="planet">
+          <circle id="planet-base" cx="332.2" cy="207.8" r="37.3" fill="#34496a" />
+          <ellipse id="planet-circle" cx="331.5" cy="207.8" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" rx="61.8" ry="12.7" />
+          <path id="planet-top" fill="#34496a" d="M294.9 207.8a37.3 37.3 0 0174.6 0z" />
+        </g>
+        <g class="graph-circle-lb" id="graph-cir-left">
+          <circle cx="290.4" cy="287.5" r="20.8" fill="#34496a" />
+          <path fill="#0ff" d="M290.4 287.5l5.3-20.1a20.8 20.8 0 0115.5 20z" />
+        </g>
+        <g class="graph-circle-lb" id="graph-cir-mid">
+          <circle cx="345.4" cy="287.5" r="20.8" fill="#34496a" />
+          <path fill="#0ff" d="M345.4 287.5l5.2-20.1a20.8 20.8 0 0115.5 20z" />
+        </g>
+        <g id="graph-cir">
+          <circle cx="396.4" cy="292.1" r="16.4" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="2" />
+          <circle cx="396.4" cy="292.1" r="20.8" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="2" />
+          <circle cx="396.4" cy="292.1" r="11.6" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="2" />
+          <circle id="graph-cir-1" cx="408" cy="292.1" r="2.3" fill="#0ff" />
+          <circle id="graph-cir-2" cx="396.4" cy="275.7" r="2.3" fill="#0ff" />
+          <circle id="graph-cir-3" cx="417.2" cy="292.1" r="2.3" fill="#0ff" />
+          <circle id="graph-cir-mid-2" cx="396.4" cy="292.1" r="2.3" fill="#0ff" data-name="graph-cir-mid" />
+        </g>
+        <g id="graph-big" clip-path="url(#clip-path)">
+          <path id="graph-line" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M439.7 206.4c26.3 0 26.3 34.2 52.6 34.2s26.3-34.2 52.6-34.2 26.3 34.2 52.6 34.2 26.3-34.2 52.6-34.2" />
+        </g>
+        <circle cx="275.7" cy="139.7" r="11.8" fill="#34496a" />
+        <circle id="left-top-circle" cx="275.7" cy="139.7" r="11.8" fill="#0ff" />
+        <line x1="300.8" x2="387.1" y1="134.3" y2="134.9" fill="none" stroke="#34496a" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" />
+        <line x1="300.8" x2="338.5" y1="143.7" y2="143.9" fill="none" stroke="#34496a" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" />
+        <circle cx="448.1" cy="161.4" r="13.3" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="5" />
+        <path class="circles-top" id="circle-l" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M448 148.2a13.3 13.3 0 11-13.2 13.3 13.3 13.3 0 0113.3-13.3" />
+        <circle cx="491.2" cy="161.4" r="13.3" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="5" />
+        <path class="circles-top" id="circle-m" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M491.2 148.2a13.3 13.3 0 11-13.3 13.3 13.3 13.3 0 0113.3-13.3" />
+        <circle cx="534.4" cy="161.4" r="13.3" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="5" />
+        <path class="circles-top" id="circle-r" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M534.4 148.2a13.3 13.3 0 11-13.3 13.3 13.3 13.3 0 0113.3-13.3" />
+      </g>
+      <g id="btm-display">
+        <g id="right-display">
+          <g id="right-display-display">
+            <path fill="#282e39" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M654.7 461H508.6c-10.5 0-15.8-8.5-12-19l26.2-72a29.9 29.9 0 0125.8-18.9h146c10.5 0 15.8 8.5 12 19l-26.2 72a29.9 29.9 0 01-25.7 18.8z" opacity=".8" />
+            <g id="bars">
+              <polygon id="bar-3-btm" fill="#34496a" points="656.9 441.2 642.4 441.2 667.6 371.7 682.2 371.7 656.9 441.2" />
+              <polygon id="bar-3-top" fill="#0ff" points="656.9 441.2 642.4 441.2 653 412 667.5 412 656.9 441.2" />
+              <polygon id="bar-2-btm" fill="#34496a" points="633.7 441.2 619.2 441.2 644.5 371.7 659 371.7 633.7 441.2" />
+              <polygon id="bar-2-top" fill="#0ff" points="633.7 441.2 619.2 441.2 636 395.1 650.5 395.1 633.7 441.2" />
+              <polygon id="bar-1-btm" fill="#34496a" points="610.6 441.2 596.1 441.2 621.4 371.7 635.9 371.7 610.6 441.2" />
+              <polygon id="bar-1-top" fill="#0ff" points="610.6 441.2 596.1 441.2 604 419.5 618.5 419.5 610.6 441.2" />
+            </g>
+            <g id="btns" fill="#0ff">
+              <ellipse cx="546.8" cy="379.3" rx="6.5" ry="4.6" transform="rotate(-39.8 546.8 379.3)" />
+              <ellipse cx="562.7" cy="379.3" rx="6.5" ry="4.6" transform="rotate(-39.8 562.7 379.3)" />
+              <ellipse cx="578.6" cy="379.3" rx="6.5" ry="4.6" transform="rotate(-39.8 578.6 379.3)" />
+              <ellipse cx="594.5" cy="379.3" rx="6.5" ry="4.6" transform="rotate(-39.8 594.5 379.3)" />
+              <ellipse cx="540.6" cy="396.3" rx="6.5" ry="4.6" transform="rotate(-39.8 540.6 396.3)" />
+              <ellipse cx="556.5" cy="396.3" rx="6.5" ry="4.6" transform="rotate(-39.8 556.5 396.3)" />
+              <ellipse cx="572.4" cy="396.3" rx="6.5" ry="4.6" transform="rotate(-39.8 572.4 396.3)" />
+              <ellipse cx="588.3" cy="396.3" rx="6.5" ry="4.6" transform="rotate(-39.8 588.4 396.3)" />
+              <ellipse cx="534.4" cy="413.3" rx="6.5" ry="4.6" transform="rotate(-39.8 534.4 413.3)" />
+              <ellipse cx="550.3" cy="413.3" rx="6.5" ry="4.6" transform="rotate(-39.8 550.3 413.3)" />
+              <ellipse cx="566.2" cy="413.3" rx="6.5" ry="4.6" transform="rotate(-39.8 566.2 413.3)" />
+              <ellipse cx="582.1" cy="413.3" rx="6.5" ry="4.6" transform="rotate(-39.8 582.2 413.3)" />
+              <ellipse cx="528.2" cy="430.3" rx="6.5" ry="4.6" transform="rotate(-39.8 528.2 430.3)" />
+              <ellipse cx="544.1" cy="430.3" rx="6.5" ry="4.6" transform="rotate(-39.8 544.1 430.3)" />
+              <ellipse cx="560" cy="430.3" rx="6.5" ry="4.6" transform="rotate(-39.6 562.3 429.7)" />
+              <ellipse cx="575.9" cy="430.3" rx="6.5" ry="4.6" transform="rotate(-39.8 576 430.3)" />
+            </g>
+          </g>
+          <ellipse id="right-display-shadow" cx="593.3" cy="508.4" fill="#1e3855" rx="74" ry="10.9" />
+        </g>
+        <g id="left-display">
+          <g id="left-display-display">
+            <path fill="#282e39" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M299 461H153c-10.4 0-22-8.5-25.8-19L101 370c-3.8-10.4 1.6-18.9 12-18.9h146c10.5 0 22 8.5 25.9 18.9l26.2 72c3.8 10.4-1.6 19-12 19z" opacity=".8" />
+            <polygon fill="#0ff" points="153.1 433.3 155.7 440.3 158.2 447.3 153.6 443.8 148.9 440.3 151 436.8 153.1 433.3" />
+            <polygon fill="#0ff" points="143 433.3 146.4 433.3 151.9 448.4 148.5 448.4 143 433.3" />
+            <polygon fill="#0ff" points="193.8 448.4 191.3 441.4 188.7 434.4 193.4 437.9 198 441.4 195.9 444.9 193.8 448.4" />
+            <polygon fill="#0ff" points="203.9 448.4 200.6 448.4 195.1 433.3 198.4 433.3 203.9 448.4" />
+            <polygon fill="#0ff" points="164.4 433.3 167.8 433.3 173.3 448.4 169.9 448.4 164.4 433.3" />
+            <polygon fill="#0ff" points="174 433.3 177.4 433.3 182.9 448.4 179.5 448.4 174 433.3" />
+            <ellipse cx="199" cy="377.7" fill="#34496a" rx="5.4" ry="7.7" transform="rotate(-50.2 199 377.7)" />
+            <polygon fill="#0ff" points="198.2 380.9 197 377.7 195.9 374.6 199.2 376.1 202.6 377.7 200.4 379.3 198.2 380.9" />
+            <line x1="217.3" x2="267.5" y1="377.7" y2="377.7" fill="#282e39" stroke="#0ff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" opacity=".8" />
+            <ellipse cx="206.2" cy="397.6" fill="#34496a" rx="5.4" ry="7.7" transform="rotate(-50.2 206.2 397.6)" />
+            <polygon fill="#0ff" points="205.4 400.7 204.2 397.6 203.1 394.4 206.4 396 209.8 397.6 207.6 399.2 205.4 400.7" />
+            <line x1="224.5" x2="274.8" y1="397.6" y2="397.6" fill="#282e39" stroke="#0ff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" opacity=".8" />
+            <ellipse cx="213.5" cy="417.5" fill="#34496a" rx="5.4" ry="7.7" transform="rotate(-50.2 213.4 417.4)" />
+            <polygon fill="#0ff" points="212.6 420.6 211.5 417.5 210.3 414.3 213.7 415.9 217 417.5 214.8 419 212.6 420.6" />
+            <line x1="231.8" x2="282" y1="417.5" y2="417.5" fill="#282e39" stroke="#0ff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" opacity=".8" />
+            <ellipse cx="220.7" cy="437.3" fill="#34496a" rx="5.4" ry="7.7" transform="rotate(-50.2 220.7 437.3)" />
+            <polygon fill="#0ff" points="219.8 440.5 218.7 437.3 217.6 434.2 220.9 435.8 224.3 437.3 222.1 438.9 219.8 440.5" />
+            <line x1="239" x2="289.2" y1="437.3" y2="437.3" fill="#282e39" stroke="#0ff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" opacity=".8" />
+            <path fill="#34496a" d="M190.5 424.4h-46a7.4 7.4 0 01-6.5-4.7l-15.8-43.5c-1-2.6.4-4.7 3-4.7h46a7.4 7.4 0 016.5 4.7l15.8 43.5c1 2.6-.4 4.7-3 4.7z" />
+            <ellipse cx="157.8" cy="398" fill="#282e39" rx="17.5" ry="25.1" transform="rotate(-50.2 157.8 398)" />
+            <ellipse cx="157.8" cy="398" fill="#282e39" rx="5.1" ry="7.3" transform="rotate(-50.2 157.8 398)" />
+            <path fill="#0ff" d="M159.8 405a10 10 0 01-8.8-6.4 5.8 5.8 0 01.5-5.4 5.3 5.3 0 014.4-2.2 10 10 0 018.8 6.4 5.8 5.8 0 01-.5 5.4 5.3 5.3 0 01-4.4 2.1zm-3.9-10.6a2 2 0 00-1.6.7 2.5 2.5 0 000 2.3 6.6 6.6 0 005.4 4 2 2 0 001.7-.6 2.5 2.5 0 000-2.3 6.6 6.6 0 00-5.5-4zM173.6 405h14.5l-5.1-14h-14.4a1.8 1.8 0 00-1.7 2.6l3.2 8.7a4.1 4.1 0 003.5 2.6z" />
+          </g>
+          <ellipse id="left-display-shadow" cx="224.5" cy="511.5" fill="#1e3855" rx="74" ry="10.9" />
+        </g>
+      </g>
+      <g id="robot">
+        <path id="body-base" fill="#fff" d="M490.4 368.3c0 63.7-38 140-84.7 140s-84.8-76.3-84.8-140 38-90.6 84.8-90.6 84.7 26.9 84.7 90.6z" />
+        <g id="robot-body">
+          <ellipse id="robot-shadow" cx="405.6" cy="543.9" fill="#1e3855" rx="44.5" ry="7.1" />
+          <g clip-path="url(#clip-path-2)">
+            <g id="faces">
+              <g id="face">
+                <ellipse id="face-back" cx="560" cy="340.9" fill="#34496a" rx="61.5" ry="32.2" />
+                <g class="eyes" id="eyes" fill="#0ff">
+                  <ellipse cx="539.8" cy="340.9" rx="7.3" ry="13.7" />
+                  <ellipse cx="579.1" cy="340.9" rx="7.3" ry="13.7" />
+                </g>
+              </g>
+              <g id="face-2" data-name="face">
+                <ellipse id="face-back-2" cx="256.9" cy="340.9" fill="#34496a" data-name="face-back" rx="61.5" ry="32.2" />
+                <g class="eyes" id="eyes-2" fill="#0ff" data-name="eyes">
+                  <ellipse cx="236.7" cy="340.9" rx="7.3" ry="13.7" />
+                  <ellipse cx="275.9" cy="340.9" rx="7.3" ry="13.7" />
+                </g>
+              </g>
+              <g id="charge">
+                <circle cx="406.8" cy="340.9" r="16.2" fill="#34496a" />
+                <rect width="4.1" height="13.9" x="398.7" y="334" fill="#fff" />
+                <rect width="4.1" height="13.9" x="410.8" y="334" fill="#fff" />
+              </g>
+            </g>
+          </g>
+        </g>
+        <path id="right-hand" fill="#fff" d="M549.7 400.7c0 15.6-31.2 28.2-56.2 28.2s-34.2-12.6-34.2-28.2 9.2-28 34.2-28 56.2 12.5 56.2 28z" />
+        <path id="left-hand" fill="#fff" d="M255.6 400.7c0-15.5 31.2-28 56.2-28s34.2 12.5 34.2 28-9.3 28.2-34.2 28.2-56.2-12.6-56.2-28.2z" />
+      </g>
+      <path id="note-1" fill="none" d="M180 317l-3.5-3.8a1 1 0 00-1.7.7v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a3 3 0 00-.7-1.9v-6.8l1.7 1.8a1 1 0 101.5-1.4z" />
+      <path id="note-2" fill="none" d="M203.4 323.4v-9.5a1 1 0 00-1-1h-9.3a1 1 0 00-1 1v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a2.9 2.9 0 00-.7-1.9V315h7.3v7.1a5.8 5.8 0 00-1.9-.3c-2.6 0-4.7 1.6-4.7 3.5s2.1 3.5 4.7 3.5 4.7-1.5 4.7-3.5a2.9 2.9 0 00-.8-1.8z" />
+    </g>
+  </svg>
+</div>
+<canvas class="webgl2"></canvas>
\ No newline at end of file
diff --git a/space-travel/src/script.js b/space-travel/src/script.js
new file mode 100644
index 0000000..3a85be5
--- /dev/null
+++ b/space-travel/src/script.js
@@ -0,0 +1,690 @@
+/* SVG ANIMATION */
+
+function animation() {
+  let isLeft = false;
+
+  /**
+   * Robot
+   */
+
+  gsap.set("#left-hand", {
+    x: 30,
+    transformOrigin: "right center"
+  });
+  gsap.set("#right-hand", {
+    x: -30,
+    transformOrigin: "left center"
+  });
+
+  const eyesTl = gsap
+    .timeline({
+      repeat: -1,
+      repeatDelay: 1
+    })
+    .to(".eyes", {
+      opacity: 0,
+      duration: 0.1
+    })
+    .to(".eyes", {
+      opacity: 1,
+      duration: 0.1
+    });
+
+  const robotTl = gsap
+    .timeline({
+      repeat: -1
+    })
+    .to(
+      "#robot",
+      {
+        x: 100,
+        onStart: () => {
+          isLeft = false;
+        }
+      },
+      "right"
+    )
+    .to(
+      "#faces",
+      {
+        x: -60
+      },
+      "right"
+    )
+    .to(
+      "#left-hand",
+      {
+        x: 80
+      },
+      "right"
+    )
+    .to(
+      "#charge",
+      {
+        scaleX: 0.8
+      },
+      "right"
+    )
+    .to("#right-hand", {
+      rotation: 20,
+      repeat: 2,
+      yoyo: true,
+      ease: "power2.inOut",
+      duration: 0.4
+    })
+    .to(
+      "#robot",
+      {
+        x: -100,
+        onStart: () => {
+          isLeft = true;
+        }
+      },
+      "left"
+    )
+    .to(
+      "#faces",
+      {
+        x: 60
+      },
+      "left"
+    )
+    .to(
+      "#charge",
+      {
+        scaleX: 0.8
+      },
+      "left"
+    )
+    .to(
+      "#left-hand",
+      {
+        x: 30
+      },
+      "left"
+    )
+    .to(
+      "#right-hand",
+      {
+        x: -80
+      },
+      "left"
+    )
+    .to("#left-hand", {
+      rotation: -20,
+      repeat: 3,
+      yoyo: true,
+      ease: "power1.inOut",
+      duration: 0.4
+    })
+    .to(
+      "#robot",
+      {
+        x: 0
+      },
+      "center"
+    )
+    .to(
+      "#faces",
+      {
+        x: 0
+      },
+      "center"
+    )
+    .to(
+      "#charge",
+      {
+        scaleX: 1
+      },
+      "center"
+    )
+    .to("#left-hand", {
+      y: -50,
+      x: -10,
+      rotation: 30
+    })
+    .to("#left-hand", {
+      rotation: 50,
+      repeat: 1,
+      yoyo: true,
+      ease: "sine.inOut"
+    })
+    .to("#left-hand", {
+      y: 0,
+      x: 30,
+      rotation: 0
+    });
+  robotTl.timeScale(0.8);
+
+  /**
+   * Main display
+   */
+
+  //left-top-circle
+  gsap.set("#left-top-circle", {
+    transformOrigin: "center",
+    scale: 0
+  });
+
+  gsap.to("#left-top-circle", {
+    transformOrigin: "center",
+    scale: 1,
+    fill: "#34496a",
+    repeat: -1,
+    duration: 2
+  });
+
+  //graph-left-btm
+  gsap.to(".graph-circle-lb", {
+    rotation: 360,
+    transformOrigin: "center",
+    duration: 2,
+    stagger: {
+      amount: 1,
+      ease: "sine.inOut",
+      repeat: -1
+    }
+  });
+
+  //planet
+  const planetTl = gsap
+    .timeline({
+      repeat: -1,
+      yoyo: true
+    })
+    .set("#planet-circle", {
+      rotation: 10,
+      transformOrigin: "center"
+    })
+    .to("#planet-circle", {
+      rotation: -10,
+      transformOrigin: "center",
+      ease: "power1.inOut"
+    });
+
+  //circle-btm-graph
+  gsap.to("#graph-cir-1", {
+    rotation: 360,
+    ease: "none",
+    transformOrigin: "-9px center",
+    duration: 3,
+    repeat: -1
+  });
+
+  gsap.to("#graph-cir-2", {
+    rotation: 360,
+    ease: "none",
+    transformOrigin: "center 18px",
+    duration: 4,
+    repeat: -1
+  });
+
+  gsap.to("#graph-cir-3", {
+    rotation: 360,
+    ease: "none",
+    transformOrigin: "-19px center",
+    duration: 5,
+    repeat: -1
+  });
+
+  gsap.to("#graph-cir-mid-2", {
+    scale: 1.5,
+    ease: "sine.inOut",
+    transformOrigin: "center",
+    repeat: -1,
+    yoyo: true
+  });
+
+  //bottom-right-graph
+  gsap.to("#graph-left", {
+    morphSVG: "#graph-morph1",
+    repeat: -1,
+    yoyo: true,
+    ease: Elastic.easeOut.config(1, 0.8),
+    duration: 2
+  });
+
+  gsap.to("#graph-right", {
+    morphSVG: "#graph-morph2",
+    repeat: -1,
+    yoyo: true,
+    ease: "power3.inOut",
+    duration: 1
+  });
+  //top right circle
+
+  gsap.to(".circles-top", {
+    rotation: 360,
+
+    duration: 10,
+    transformOrigin: "center",
+    stagger: {
+      each: 0.5,
+      ease: "none",
+      repeat: -1
+    }
+  });
+
+  gsap.to("#circle-l", {
+    drawSVG: "20",
+    repeat: -1,
+    yoyo: true,
+    ease: Bounce.easeOut,
+    duration: 1
+  });
+
+  gsap.to("#circle-m", {
+    drawSVG: "80 30",
+    repeat: -1,
+    yoyo: true,
+    ease: Bounce.easeOut,
+    duration: 1.5
+  });
+
+  gsap.to("#circle-r", {
+    drawSVG: "0",
+    repeat: -1,
+    yoyo: true,
+    ease: SteppedEase.config(12),
+    duration: 3
+  });
+
+  /**
+   * Left Display
+   */
+  gsap.to("#left-display-display", {
+    y: 10,
+    ease: "sine.inOut",
+    repeat: -1,
+    yoyo: true,
+    duration: 2
+  });
+  gsap.to("#left-display-shadow", {
+    scale: 1.1,
+    transformOrigin: "center",
+    ease: "sine.inOut",
+    repeat: -1,
+    yoyo: true,
+    duration: 2
+  });
+
+  //song
+  const songTl = gsap
+    .timeline({
+      repeat: -1
+    })
+    .to("#left-display-display line", {
+      stroke: "#34496a",
+      stagger: {
+        each: 0.5
+      }
+    })
+    .to("#left-display-display line", {
+      stroke: "#0ff",
+      stagger: {
+        each: 0.5
+      }
+    });
+
+  for (let i = 0; i < 3; i++) {
+    let clone1 = document.querySelector("#note-1").cloneNode(true);
+    let clone2 = document.querySelector("#note-2").cloneNode(true);
+    clone1.classList.add("notes");
+    clone2.classList.add("notes");
+    gsap.set(clone1, {
+      attr: {
+        d:
+          "M180 317l-3.5-3.8a1 1 0 00-1.7.7v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a3 3 0 00-.7-1.9v-6.8l1.7 1.8a1 1 0 101.5-1.4z",
+        fill: "#0ff"
+      },
+      y: 40,
+      opacity: 0
+    });
+    gsap.set(clone2, {
+      attr: {
+        d:
+          "M203.4 323.4v-9.5a1 1 0 00-1-1h-9.3a1 1 0 00-1 1v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a2.9 2.9 0 00-.7-1.9V315h7.3v7.1a5.8 5.8 0 00-1.9-.3c-2.6 0-4.7 1.6-4.7 3.5s2.1 3.5 4.7 3.5 4.7-1.5 4.7-3.5a2.9 2.9 0 00-.8-1.8z",
+        fill: "#0ff"
+      },
+      x: -10,
+      y: 40,
+      opacity: 0
+    });
+    document.querySelector("svg").appendChild(clone1);
+    document.querySelector("svg").appendChild(clone2);
+  }
+
+  gsap.to(".notes", {
+    y: gsap.utils.random(-50, -100, 10, true),
+    x: gsap.utils.random(-50, 50, 25, true),
+    opacity: 1,
+    duration: gsap.utils.random(1.5, 3, 1.5, true),
+    stagger: {
+      each: 0.5,
+      ease: "sine.in",
+      repeat: -1
+    }
+  });
+
+  /**
+   * Right Display
+   */
+  gsap.to("#right-display-display", {
+    y: 10,
+    ease: "sine.inOut",
+    repeat: -1,
+    yoyo: true,
+    duration: 2,
+    delay: 1.5
+  });
+  gsap.to("#right-display-shadow", {
+    scale: 1.1,
+    transformOrigin: "center",
+    ease: "sine.inOut",
+    repeat: -1,
+    yoyo: true,
+    duration: 2,
+    delay: 1.5
+  });
+
+  //graph-lines
+  gsap.to("#graph-line", {
+    x: -105,
+    ease: "none",
+    repeat: -1,
+    duration: 2
+  });
+
+  gsap.to("#bar-1-top", {
+    morphSVG: "#bar-1-btm",
+    repeat: -1,
+    yoyo: true
+  });
+  gsap.to("#bar-2-top", {
+    morphSVG: "#bar-2-btm",
+    repeat: -1,
+    yoyo: true,
+    duration: 1.5
+  });
+  gsap.to("#bar-3-top", {
+    morphSVG: "#bar-3-btm",
+    repeat: -1,
+    yoyo: true,
+    duration: 2
+  });
+
+  //btns
+  gsap.to("#btns ellipse", {
+    fill: "#34496a",
+    stagger: {
+      amount: 1,
+      grid: [4, 4],
+      repeat: -1,
+      yoyo: true,
+      from: "random"
+    }
+  });
+
+  const sizes = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+
+  /**
+   * Mouse
+   */
+
+  let mouseX = 0;
+  let mouseY = 0;
+
+  window.addEventListener("mousemove", (e) => {
+    mouseX = (e.clientX / sizes.width) * 2 - 1;
+    mouseY = -(e.clientY / sizes.height) * 2 + 1;
+
+    gsap.to("#mid-display", {
+      x: -mouseX * 10,
+      y: mouseY * 10
+    });
+
+    gsap.to("#btm-display", {
+      x: -mouseX * 20,
+      y: mouseY * 10
+    });
+  });
+
+  document.getElementById("robot").addEventListener("click", () => {
+    robotTl.pause();
+
+    const helloTl = gsap
+      .timeline({
+        paused: true
+      })
+      .to("#faces", {
+        x: isLeft ? 150 : -150,
+        ease: "sine.inOut",
+        repeatDelay: 1,
+        repeat: 1,
+        yoyo: true,
+
+        onComplete: () => {
+          robotTl.resume();
+        }
+      });
+
+    helloTl.restart();
+  });
+}
+animation();
+
+/* stars */
+//reference https://redstapler.co/space-warp-background-effect-three-js/
+let scene, camera, renderer, stars, startGeometry;
+const count = 5000;
+
+function init() {
+  scene = new THREE.Scene();
+
+  startGeometry = new THREE.BufferGeometry();
+
+  const positions = new Float32Array(count * 3);
+  for (let i = 0; i < count; i++) {
+    positions[i] = Math.random() * 600 - 300;
+  }
+  startGeometry.setAttribute(
+    "position",
+    new THREE.BufferAttribute(positions, 3)
+  );
+
+  let sprite = new THREE.TextureLoader().load(
+    "https://i.postimg.cc/T25jx3S9/circle-05.png"
+  );
+  let starMaterial = new THREE.PointsMaterial({
+    size: 2,
+    sizeAttenuation: true,
+    transparent: true,
+    alphaMap: sprite
+  });
+
+  stars = new THREE.Points(startGeometry, starMaterial);
+  scene.add(stars);
+
+  /**
+   * camera1
+   */
+  camera = new THREE.PerspectiveCamera(
+    60,
+    window.innerWidth / window.innerHeight,
+    1,
+    1000
+  );
+  camera.position.z = 1;
+  camera.rotation.x = Math.PI / 2;
+
+  window.addEventListener("resize", () => {
+    camera.aspect = 800 / 600;
+    camera.updateProjectionMatrix();
+    renderer.setSize(800, 600);
+  });
+
+  renderer = new THREE.WebGLRenderer();
+  renderer.setSize(800, 600);
+  renderer.setClearColor("#282e39", 0.5);
+  document.getElementById("webgl").appendChild(renderer.domElement);
+
+  /**
+   * Animate
+   */
+
+  function animate() {
+    for (let i = 0; i < count; i++) {
+      const i3 = i * 3;
+
+      startGeometry.attributes.position.array[i3 + 1] -= 3;
+
+      if (startGeometry.attributes.position.array[i3 + 1] < -100) {
+        startGeometry.attributes.position.array[i3 + 1] = 300;
+      }
+    }
+    startGeometry.attributes.position.needsUpdate = true;
+    stars.rotation.y += 0.002;
+
+    renderer.render(scene, camera);
+    requestAnimationFrame(animate);
+  }
+  animate();
+}
+
+init();
+
+/* OBJECTS */
+
+function objects() {
+  // Canvas
+  const canvas = document.querySelector("canvas.webgl2");
+
+  // scene2
+  const scene2 = new THREE.Scene();
+
+  /**
+   * Objects
+   */
+  const objects = [];
+  const objectGeometry = new THREE.IcosahedronGeometry(1, 0);
+  const objectMaterial = new THREE.MeshStandardMaterial({
+    color: 0x6699ff,
+    metalness: 0,
+    roughness: 0
+  });
+  for (let i = 0; i < 3; i++) {
+    const object = new THREE.Mesh(objectGeometry, objectMaterial);
+    object.scale.set(0.4, 0.4, 0.4);
+    scene2.add(object);
+    objects.push(object);
+  }
+  objects[0].position.set(3, 0.5, 0);
+  objects[1].position.set(-3.5, 2, 0);
+  objects[2].position.set(1, 3, 0);
+
+  objects.forEach((object) => {
+    gsap
+      .to(object.rotation, {
+        x: Math.PI * 2,
+        z: Math.PI * 2,
+        repeat: -1,
+        ease: "none",
+        duration: 8 + Math.random() * 5,
+        delay: Math.random() * 50
+      })
+      .seek(100);
+
+    gsap
+      .to(object.position, {
+        y: 1.5,
+        z: -1,
+        repeat: -1,
+        yoyo: true,
+        ease: "sine.inOut",
+        duration: 4 + Math.random() * 5
+      })
+      .seek(100);
+  });
+
+  /**
+   * Lights
+   */
+  const light = new THREE.AmbientLight(0xffffff, 1.0);
+  scene2.add(light);
+
+  const directionalLight = new THREE.DirectionalLight(0xff0000, 0.8);
+  directionalLight.position.set(5, 10, 0);
+  scene2.add(directionalLight);
+
+  const directionalLight2 = new THREE.DirectionalLight(0xff000, 0.7);
+  directionalLight2.position.set(-5, -5, 2);
+  scene2.add(directionalLight2);
+
+  /**
+   * Sizes
+   */
+  const sizes = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+
+  window.addEventListener("resize", () => {
+    // Update sizes
+    sizes.width = window.innerWidth;
+    sizes.height = window.innerHeight;
+
+    // Update camera2
+    camera2.aspect = sizes.width / sizes.height;
+    camera2.updateProjectionMatrix();
+
+    // Update renderer2
+    renderer2.setSize(sizes.width, sizes.height);
+    renderer2.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  });
+
+  /**
+   * camera2
+   */
+  // Base camera2
+  const camera2 = new THREE.PerspectiveCamera(
+    75,
+    sizes.width / sizes.height,
+    0.1,
+    100
+  );
+  camera2.position.z = 5;
+  scene2.add(camera2);
+
+  /**
+   * renderer2
+   */
+  const renderer2 = new THREE.WebGLRenderer({
+    canvas: canvas,
+    alpha: true
+  });
+  renderer2.setSize(sizes.width, sizes.height);
+  renderer2.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  renderer2.setClearColor(0xffffff, 0);
+
+  /**
+   * Animate
+   */
+  const clock = new THREE.Clock();
+
+  let currentIntersect = null;
+
+  const tick = () => {
+    const elapsedTime = clock.getElapsedTime();
+
+    // Render
+    renderer2.render(scene2, camera2);
+
+    window.requestAnimationFrame(tick);
+  };
+
+  tick();
+}
+objects();
diff --git a/space-travel/src/style.scss b/space-travel/src/style.scss
new file mode 100644
index 0000000..90d92be
--- /dev/null
+++ b/space-travel/src/style.scss
@@ -0,0 +1,43 @@
+body {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  background: #34496a;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#webgl {
+  width: 800px;
+  height: 600px;
+  position: absolute;
+  z-index: -1;
+}
+
+#webgl2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  outline: none;
+  z-index: 2;
+}
+
+#bg-box {
+  width: 802px;
+  height: 602px;
+  position: absolute;
+  z-index: -1;
+}
+
+.svg-box {
+  width: 800px;
+  height: 600px;
+  position: absolute;
+  z-index: 1;
+
+  #robot {
+    cursor: pointer;
+  }
+}
diff --git a/speech-bubbles/README.markdown b/speech-bubbles/README.markdown
new file mode 100644
index 0000000..4a2223c
--- /dev/null
+++ b/speech-bubbles/README.markdown
@@ -0,0 +1,5 @@
+# Speech Bubbles
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/MarkBoots/pen/RwLPXgJ](https://codepen.io/MarkBoots/pen/RwLPXgJ).
+
+
diff --git a/speech-bubbles/dist/index.html b/speech-bubbles/dist/index.html
new file mode 100644
index 0000000..2c52979
--- /dev/null
+++ b/speech-bubbles/dist/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Speech Bubbles</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div speech-bubble pbottom aright style="--bbColor:#af2d58">
+  <div class="title">Bottom Right</div>
+  <code>[pbottom]</code><code>[aright]</code>
+</div>
+
+<div speech-bubble pbottom acenter style="--bbColor:#a9528d">
+  <div class="title">Bottom Center</div>
+  <code>[pbottom]</code><code>[acenter]</code>
+</div>
+
+<div speech-bubble pbottom aleft style="--bbColor:#744b9f">
+  <div class="title">Bottom Left</div>
+  <code>[pbottom]</code><code>[aright]</code>
+</div>
+
+<div speech-bubble pleft abottom style="--bbColor:#484a9b">
+  <div class="title">Left Bottom</div>
+  <code>[pleft]</code><code>[abottom]</code>
+</div>
+
+<div speech-bubble pleft acenter style="--bbColor:#086899">
+  <div class="title">Left Center</div>
+  <code>[pleft]</code><code>[acenter]</code>
+</div>
+
+<div speech-bubble pleft atop style="--bbColor:#45c5e0">
+ <div class="title">Left Top</div>
+  <code>[pleft]</code><code>[atop]</code>
+</div>
+
+<div speech-bubble ptop aleft flip style="--bbColor:#51bfae">
+  <div class="title">Top Left</div>
+  <code>[ptop]</code><code>[aleft]</code><code>[flip]</code>
+</div>
+
+<div speech-bubble ptop acenter style="--bbColor:#63c08c">
+  <div class="title">Top Center</div>
+  <code>[ptop]</code><code>[acenter]</code>
+</div>
+
+<div speech-bubble ptop aright flip style="--bbColor:#c5d863">
+  <div class="title">Top Right</div>
+  <code>[ptop]</code><code>[aright]</code><code>[flip]</code>
+</div>
+
+<div speech-bubble pright atop style="--bbColor:#fdbb3c">
+ <div class="title">Right Top</div>
+  <code>[pright]</code><code>[atop]</code>
+</div>
+
+<div speech-bubble pright acenter style="--bbColor:#f5882f">
+ <div class="title">Right Center</div>
+  <code>[pright]</code><code>[acenter]</code>
+</div>
+
+<div speech-bubble pright abottom style="--bbColor:#f05142"> 
+ <div class="title">Right Bottom</div>
+  <code>[pright]</code><code>[abottom]</code>
+</div>
+
+<div class="middle">
+  <h1>Speech<br>Bubbles</h1>
+  <code>&#60div speech-bubble>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/speech-bubbles/dist/style.css b/speech-bubbles/dist/style.css
new file mode 100644
index 0000000..2f6f481
--- /dev/null
+++ b/speech-bubbles/dist/style.css
@@ -0,0 +1,201 @@
+[speech-bubble], [speech-bubble] * { box-sizing: border-box }
+
+[speech-bubble]{
+  --bbColor: grey;
+  --bbArrowSize: 1.5rem;
+  --bbBorderRadius: 0.25rem;
+  --bbPadding: 1rem;
+  background: var(--bbColor);
+  border-radius: var(--bbBorderRadius);
+  padding: var(--bbPadding);
+  position: relative;
+}
+
+[speech-bubble]::before{
+  content: ''; 
+  position: absolute;
+  background: var(--bbColor);
+}
+
+[speech-bubble][pbottom]{ margin-bottom: var(--bbArrowSize) }
+[speech-bubble][ptop]   { margin-top: var(--bbArrowSize); }
+[speech-bubble][pleft]  { margin-left: var(--bbArrowSize); }
+[speech-bubble][pright] { margin-right: var(--bbArrowSize); }
+
+
+/* bottom and top  */
+[speech-bubble][pbottom]::before,
+[speech-bubble][ptop]::before{
+  --width: calc(var(--bbArrowSize) / 2 * 3);
+  height: var(--bbArrowSize);
+  width: var(--width);
+}
+
+/* bottom */
+[speech-bubble][pbottom]::before{
+  top: calc(100% - 2px);
+}
+[speech-bubble][pbottom][aleft]::before{
+  left: 1rem;
+  clip-path: polygon(25% 0, 100% 0, 0% 100%)
+}
+[speech-bubble][pbottom][acenter]::before{
+  left: calc(50% - var(--width) / 2);
+  clip-path: polygon(12.5% 0, 87.5% 0, 50% 100%)
+}
+[speech-bubble][pbottom][aright]::before{
+  right: 1rem;
+  clip-path: polygon(0 0, 75% 0, 100% 100%)
+}
+
+/* top */
+[speech-bubble][ptop]::before{
+  bottom: calc(100% - 2px);
+}
+[speech-bubble][ptop][aleft]::before{
+  left: var(--bbPadding);
+  clip-path: polygon(0 0, 100% 100%, 25% 100%)
+}
+[speech-bubble][ptop][acenter]::before{
+  left: calc(50% - var(--width) / 2);
+  clip-path: polygon(12.5% 100%, 50% 0, 87.5% 100%)
+}
+[speech-bubble][ptop][aright]::before{
+  right: var(--bbPadding);
+  clip-path: polygon(0 100%, 100% 0, 75% 100%)
+}
+
+/* left and right  */
+[speech-bubble][pleft]::before,
+[speech-bubble][pright]::before{
+  --height: calc(var(--bbArrowSize) / 2 * 3);
+  width: var(--bbArrowSize);
+  height: var(--height);
+}
+
+/* right */
+[speech-bubble][pright]::before{
+  left: calc(100% - 2px);
+}
+[speech-bubble][pright][atop]::before{
+  top: var(--bbPadding);
+  clip-path: polygon(100% 0, 0 100%, 0 25%)
+}
+[speech-bubble][pright][acenter]::before{
+  top: calc(50% - var(--height) / 2);
+  clip-path: polygon(0 12.5%, 100% 50%, 0 87.5%)
+}
+[speech-bubble][pright][abottom]::before{
+  bottom: var(--bbPadding);
+  clip-path: polygon(0 0, 100% 100%, 0 75%)
+}
+
+/* left */
+[speech-bubble][pleft]::before{
+  right: calc(100% - 2px);
+}
+[speech-bubble][pleft][atop]::before{
+  top: var(--bbPadding);
+  clip-path: polygon(0 0, 100% 25%, 100% 100%)
+}
+[speech-bubble][pleft][acenter]::before{
+  top: calc(50% - var(--height) / 2);
+  clip-path: polygon(0 50%, 100% 12.5%, 100% 87.5%);
+}
+[speech-bubble][pleft][abottom]::before{
+  bottom: var(--bbPadding);
+  clip-path: polygon(0 100%, 100% 0, 100% 75%)
+}
+
+/* flip */
+[speech-bubble][pbottom][flip]::before,
+[speech-bubble][ptop][flip]::before{
+  transform: scaleX(-1)
+}
+[speech-bubble][pleft][flip]::before,
+[speech-bubble][pright][flip]::before{
+  transform: scaleY(-1)
+}
+
+
+
+
+
+/* for demo */
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  cursor: default
+}
+body{
+  max-width: 60rem;
+  margin-inline: auto;
+  font-family: sans-serif;
+  display:grid;
+  grid-template-areas:
+    'br bc bl'
+    'rb cc lb'
+    'rc cc lc'
+    'rt cc lt'
+    'tr tc tl';
+  padding: 2rem;
+  gap: 2rem;
+  background: #141518;
+}
+
+.middle{
+  grid-area: cc;
+  align-self: center;
+  justify-self: center;
+  text-align:center;
+  color: white;
+}
+
+[speech-bubble][pbottom][aleft]   {grid-area: bl}
+[speech-bubble][pbottom][acenter] {grid-area: bc}
+[speech-bubble][pbottom][aright]  {grid-area: br}
+
+[speech-bubble][pright][atop]     {grid-area: rt}
+[speech-bubble][pright][acenter]  {grid-area: rc}
+[speech-bubble][pright][abottom]  {grid-area: rb}
+
+[speech-bubble][pleft][atop]      {grid-area: lt}
+[speech-bubble][pleft][acenter]   {grid-area: lc}
+[speech-bubble][pleft][abottom]   {grid-area: lb}
+
+[speech-bubble][ptop][aleft]      {grid-area: tl}
+[speech-bubble][ptop][acenter]    {grid-area: tc}
+[speech-bubble][ptop][aright]     {grid-area: tr}
+
+[speech-bubble][pbottom],
+[speech-bubble][ptop]{margin: 0}
+
+[speech-bubble]{ 
+  filter: drop-shadow(0px 0px 0.2rem black);
+  transition: transform 0.25s ease
+}
+[speech-bubble]:hover{
+  transform: scale(1.05);
+  filter: 
+    drop-shadow(0px 0px 0.2rem black)
+    drop-shadow(0px 0px 1rem var(--bbColor));
+}
+
+[speech-bubble] .title{
+  font-weight: 600;
+  color: white; 
+  text-shadow: 1px 1px 2px black;
+  margin-bottom: 0.5rem
+}
+[speech-bubble] code {
+  background: white;
+  margin: 0.125rem;
+  box-shadow: 0px 0px 5px rgba(0,0,0,.5);
+  white-space: nowrap;
+  font-size: .9rem
+}
+
+.middle code{
+  font-size: 1rem;
+}
\ No newline at end of file
diff --git a/speech-bubbles/license.txt b/speech-bubbles/license.txt
new file mode 100644
index 0000000..b9d7ef3
--- /dev/null
+++ b/speech-bubbles/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Mark Boots (https://codepen.io/MarkBoots/pen/RwLPXgJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/speech-bubbles/src/index.html b/speech-bubbles/src/index.html
new file mode 100644
index 0000000..ad43a62
--- /dev/null
+++ b/speech-bubbles/src/index.html
@@ -0,0 +1,64 @@
+<div speech-bubble pbottom aright style="--bbColor:#af2d58">
+  <div class="title">Bottom Right</div>
+  <code>[pbottom]</code><code>[aright]</code>
+</div>
+
+<div speech-bubble pbottom acenter style="--bbColor:#a9528d">
+  <div class="title">Bottom Center</div>
+  <code>[pbottom]</code><code>[acenter]</code>
+</div>
+
+<div speech-bubble pbottom aleft style="--bbColor:#744b9f">
+  <div class="title">Bottom Left</div>
+  <code>[pbottom]</code><code>[aright]</code>
+</div>
+
+<div speech-bubble pleft abottom style="--bbColor:#484a9b">
+  <div class="title">Left Bottom</div>
+  <code>[pleft]</code><code>[abottom]</code>
+</div>
+
+<div speech-bubble pleft acenter style="--bbColor:#086899">
+  <div class="title">Left Center</div>
+  <code>[pleft]</code><code>[acenter]</code>
+</div>
+
+<div speech-bubble pleft atop style="--bbColor:#45c5e0">
+ <div class="title">Left Top</div>
+  <code>[pleft]</code><code>[atop]</code>
+</div>
+
+<div speech-bubble ptop aleft flip style="--bbColor:#51bfae">
+  <div class="title">Top Left</div>
+  <code>[ptop]</code><code>[aleft]</code><code>[flip]</code>
+</div>
+
+<div speech-bubble ptop acenter style="--bbColor:#63c08c">
+  <div class="title">Top Center</div>
+  <code>[ptop]</code><code>[acenter]</code>
+</div>
+
+<div speech-bubble ptop aright flip style="--bbColor:#c5d863">
+  <div class="title">Top Right</div>
+  <code>[ptop]</code><code>[aright]</code><code>[flip]</code>
+</div>
+
+<div speech-bubble pright atop style="--bbColor:#fdbb3c">
+ <div class="title">Right Top</div>
+  <code>[pright]</code><code>[atop]</code>
+</div>
+
+<div speech-bubble pright acenter style="--bbColor:#f5882f">
+ <div class="title">Right Center</div>
+  <code>[pright]</code><code>[acenter]</code>
+</div>
+
+<div speech-bubble pright abottom style="--bbColor:#f05142"> 
+ <div class="title">Right Bottom</div>
+  <code>[pright]</code><code>[abottom]</code>
+</div>
+
+<div class="middle">
+  <h1>Speech<br>Bubbles</h1>
+  <code>&#60div speech-bubble>
+</div>
\ No newline at end of file
diff --git a/speech-bubbles/src/style.css b/speech-bubbles/src/style.css
new file mode 100644
index 0000000..45d1c38
--- /dev/null
+++ b/speech-bubbles/src/style.css
@@ -0,0 +1,201 @@
+[speech-bubble], [speech-bubble] * { box-sizing: border-box }
+
+[speech-bubble]{
+  --bbColor: grey;
+  --bbArrowSize: 1.5rem;
+  --bbBorderRadius: 0.25rem;
+  --bbPadding: 1rem;
+  background: var(--bbColor);
+  border-radius: var(--bbBorderRadius);
+  padding: var(--bbPadding);
+  position: relative;
+}
+
+[speech-bubble]::before{
+  content: ''; 
+  position: absolute;
+  background: var(--bbColor);
+}
+
+[speech-bubble][pbottom]{ margin-bottom: var(--bbArrowSize) }
+[speech-bubble][ptop]   { margin-top: var(--bbArrowSize); }
+[speech-bubble][pleft]  { margin-left: var(--bbArrowSize); }
+[speech-bubble][pright] { margin-right: var(--bbArrowSize); }
+
+
+/* bottom and top  */
+[speech-bubble][pbottom]::before,
+[speech-bubble][ptop]::before{
+  --width: calc(var(--bbArrowSize) / 2 * 3);
+  height: var(--bbArrowSize);
+  width: var(--width);
+}
+
+/* bottom */
+[speech-bubble][pbottom]::before{
+  top: calc(100% - 2px);
+}
+[speech-bubble][pbottom][aleft]::before{
+  left: 1rem;
+  clip-path: polygon(25% 0, 100% 0, 0% 100%)
+}
+[speech-bubble][pbottom][acenter]::before{
+  left: calc(50% - var(--width) / 2);
+  clip-path: polygon(12.5% 0, 87.5% 0, 50% 100%)
+}
+[speech-bubble][pbottom][aright]::before{
+  right: 1rem;
+  clip-path: polygon(0 0, 75% 0, 100% 100%)
+}
+
+/* top */
+[speech-bubble][ptop]::before{
+  bottom: calc(100% - 2px);
+}
+[speech-bubble][ptop][aleft]::before{
+  left: var(--bbPadding);
+  clip-path: polygon(0 0, 100% 100%, 25% 100%)
+}
+[speech-bubble][ptop][acenter]::before{
+  left: calc(50% - var(--width) / 2);
+  clip-path: polygon(12.5% 100%, 50% 0, 87.5% 100%)
+}
+[speech-bubble][ptop][aright]::before{
+  right: var(--bbPadding);
+  clip-path: polygon(0 100%, 100% 0, 75% 100%)
+}
+
+/* left and right  */
+[speech-bubble][pleft]::before,
+[speech-bubble][pright]::before{
+  --height: calc(var(--bbArrowSize) / 2 * 3);
+  width: var(--bbArrowSize);
+  height: var(--height);
+}
+
+/* right */
+[speech-bubble][pright]::before{
+  left: calc(100% - 2px);
+}
+[speech-bubble][pright][atop]::before{
+  top: var(--bbPadding);
+  clip-path: polygon(100% 0, 0 100%, 0 25%)
+}
+[speech-bubble][pright][acenter]::before{
+  top: calc(50% - var(--height) / 2);
+  clip-path: polygon(0 12.5%, 100% 50%, 0 87.5%)
+}
+[speech-bubble][pright][abottom]::before{
+  bottom: var(--bbPadding);
+  clip-path: polygon(0 0, 100% 100%, 0 75%)
+}
+
+/* left */
+[speech-bubble][pleft]::before{
+  right: calc(100% - 2px);
+}
+[speech-bubble][pleft][atop]::before{
+  top: var(--bbPadding);
+  clip-path: polygon(0 0, 100% 25%, 100% 100%)
+}
+[speech-bubble][pleft][acenter]::before{
+  top: calc(50% - var(--height) / 2);
+  clip-path: polygon(0 50%, 100% 12.5%, 100% 87.5%);
+}
+[speech-bubble][pleft][abottom]::before{
+  bottom: var(--bbPadding);
+  clip-path: polygon(0 100%, 100% 0, 100% 75%)
+}
+
+/* flip */
+[speech-bubble][pbottom][flip]::before,
+[speech-bubble][ptop][flip]::before{
+  transform: scaleX(-1)
+}
+[speech-bubble][pleft][flip]::before,
+[speech-bubble][pright][flip]::before{
+  transform: scaleY(-1)
+}
+
+
+
+
+
+/* for demo */
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  cursor: default
+}
+body{
+  max-width: 60rem;
+  margin-inline: auto;
+  font-family: sans-serif;
+  display:grid;
+  grid-template-areas:
+    'br bc bl'
+    'rb cc lb'
+    'rc cc lc'
+    'rt cc lt'
+    'tr tc tl';
+  padding: 2rem;
+  gap: 2rem;
+  background: #141518;
+}
+
+.middle{
+  grid-area: cc;
+  align-self: center;
+  justify-self: center;
+  text-align:center;
+  color: white;
+}
+
+[speech-bubble][pbottom][aleft]   {grid-area: bl}
+[speech-bubble][pbottom][acenter] {grid-area: bc}
+[speech-bubble][pbottom][aright]  {grid-area: br}
+
+[speech-bubble][pright][atop]     {grid-area: rt}
+[speech-bubble][pright][acenter]  {grid-area: rc}
+[speech-bubble][pright][abottom]  {grid-area: rb}
+
+[speech-bubble][pleft][atop]      {grid-area: lt}
+[speech-bubble][pleft][acenter]   {grid-area: lc}
+[speech-bubble][pleft][abottom]   {grid-area: lb}
+
+[speech-bubble][ptop][aleft]      {grid-area: tl}
+[speech-bubble][ptop][acenter]    {grid-area: tc}
+[speech-bubble][ptop][aright]     {grid-area: tr}
+
+[speech-bubble][pbottom],
+[speech-bubble][ptop]{margin: 0}
+
+[speech-bubble]{ 
+  filter: drop-shadow(0px 0px 0.2rem black);
+  transition: transform 0.25s ease
+}
+[speech-bubble]:hover{
+  transform: scale(1.05);
+  filter: 
+    drop-shadow(0px 0px 0.2rem black)
+    drop-shadow(0px 0px 1rem var(--bbColor));
+}
+
+[speech-bubble] .title{
+  font-weight: 600;
+  color: white; 
+  text-shadow: 1px 1px 2px black;
+  margin-bottom: 0.5rem
+}
+[speech-bubble] code {
+  background: white;
+  margin: 0.125rem;
+  box-shadow: 0px 0px 5px rgba(0,0,0,.5);
+  white-space: nowrap;
+  font-size: .9rem
+}
+
+.middle code{
+  font-size: 1rem;
+}
diff --git a/sphere-of-boxes-three-js/README.markdown b/sphere-of-boxes-three-js/README.markdown
new file mode 100644
index 0000000..f6e82f3
--- /dev/null
+++ b/sphere-of-boxes-three-js/README.markdown
@@ -0,0 +1,4 @@
+# Sphere of Boxes | three.js
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/DonKarlssonSan/pen/zgmoBz](https://codepen.io/DonKarlssonSan/pen/zgmoBz).
+
+ 
\ No newline at end of file
diff --git a/sphere-of-boxes-three-js/dist/blgjlm.js b/sphere-of-boxes-three-js/dist/blgjlm.js
new file mode 100644
index 0000000..5a1c681
--- /dev/null
+++ b/sphere-of-boxes-three-js/dist/blgjlm.js
@@ -0,0 +1,416 @@
+/*
+ * A fast javascript implementation of simplex noise by Jonas Wagner
+ *
+ * Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.
+ * Which is based on example code by Stefan Gustavson (stegu@itn.liu.se).
+ * With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
+ * Better rank ordering method by Stefan Gustavson in 2012.
+ *
+ *
+ * Copyright (C) 2016 Jonas Wagner
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ */
+(function() {
+'use strict';
+
+var F2 = 0.5 * (Math.sqrt(3.0) - 1.0);
+var G2 = (3.0 - Math.sqrt(3.0)) / 6.0;
+var F3 = 1.0 / 3.0;
+var G3 = 1.0 / 6.0;
+var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;
+var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;
+
+function SimplexNoise(random) {
+  if (!random) random = Math.random;
+  this.p = buildPermutationTable(random);
+  this.perm = new Uint8Array(512);
+  this.permMod12 = new Uint8Array(512);
+  for (var i = 0; i < 512; i++) {
+    this.perm[i] = this.p[i & 255];
+    this.permMod12[i] = this.perm[i] % 12;
+  }
+
+}
+SimplexNoise.prototype = {
+    grad3: new Float32Array([1, 1, 0,
+                            -1, 1, 0,
+                            1, -1, 0,
+
+                            -1, -1, 0,
+                            1, 0, 1,
+                            -1, 0, 1,
+
+                            1, 0, -1,
+                            -1, 0, -1,
+                            0, 1, 1,
+
+                            0, -1, 1,
+                            0, 1, -1,
+                            0, -1, -1]),
+    grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1,
+                            0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1,
+                            1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1,
+                            -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1,
+                            1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1,
+                            -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1,
+                            1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0,
+                            -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]),
+    noise2D: function(xin, yin) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad3 = this.grad3;
+        var n0 = 0; // Noise contributions from the three corners
+        var n1 = 0;
+        var n2 = 0;
+        // Skew the input space to determine which simplex cell we're in
+        var s = (xin + yin) * F2; // Hairy factor for 2D
+        var i = Math.floor(xin + s);
+        var j = Math.floor(yin + s);
+        var t = (i + j) * G2;
+        var X0 = i - t; // Unskew the cell origin back to (x,y) space
+        var Y0 = j - t;
+        var x0 = xin - X0; // The x,y distances from the cell origin
+        var y0 = yin - Y0;
+        // For the 2D case, the simplex shape is an equilateral triangle.
+        // Determine which simplex we are in.
+        var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
+        if (x0 > y0) {
+          i1 = 1;
+          j1 = 0;
+        } // lower triangle, XY order: (0,0)->(1,0)->(1,1)
+        else {
+          i1 = 0;
+          j1 = 1;
+        } // upper triangle, YX order: (0,0)->(0,1)->(1,1)
+        // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
+        // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
+        // c = (3-sqrt(3))/6
+        var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
+        var y1 = y0 - j1 + G2;
+        var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
+        var y2 = y0 - 1.0 + 2.0 * G2;
+        // Work out the hashed gradient indices of the three simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        // Calculate the contribution from the three corners
+        var t0 = 0.5 - x0 * x0 - y0 * y0;
+        if (t0 >= 0) {
+          var gi0 = permMod12[ii + perm[jj]] * 3;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient
+        }
+        var t1 = 0.5 - x1 * x1 - y1 * y1;
+        if (t1 >= 0) {
+          var gi1 = permMod12[ii + i1 + perm[jj + j1]] * 3;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1);
+        }
+        var t2 = 0.5 - x2 * x2 - y2 * y2;
+        if (t2 >= 0) {
+          var gi2 = permMod12[ii + 1 + perm[jj + 1]] * 3;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2);
+        }
+        // Add contributions from each corner to get the final noise value.
+        // The result is scaled to return values in the interval [-1,1].
+        return 70.0 * (n0 + n1 + n2);
+      },
+    // 3D simplex noise
+    noise3D: function(xin, yin, zin) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad3 = this.grad3;
+        var n0, n1, n2, n3; // Noise contributions from the four corners
+        // Skew the input space to determine which simplex cell we're in
+        var s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3D
+        var i = Math.floor(xin + s);
+        var j = Math.floor(yin + s);
+        var k = Math.floor(zin + s);
+        var t = (i + j + k) * G3;
+        var X0 = i - t; // Unskew the cell origin back to (x,y,z) space
+        var Y0 = j - t;
+        var Z0 = k - t;
+        var x0 = xin - X0; // The x,y,z distances from the cell origin
+        var y0 = yin - Y0;
+        var z0 = zin - Z0;
+        // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
+        // Determine which simplex we are in.
+        var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
+        var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
+        if (x0 >= y0) {
+          if (y0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+          } // X Y Z order
+          else if (x0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+          } // X Z Y order
+          else {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+          } // Z X Y order
+        }
+        else { // x0<y0
+          if (y0 < z0) {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+          } // Z Y X order
+          else if (x0 < z0) {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+          } // Y Z X order
+          else {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+          } // Y X Z order
+        }
+        // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
+        // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
+        // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
+        // c = 1/6.
+        var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
+        var y1 = y0 - j1 + G3;
+        var z1 = z0 - k1 + G3;
+        var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords
+        var y2 = y0 - j2 + 2.0 * G3;
+        var z2 = z0 - k2 + 2.0 * G3;
+        var x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords
+        var y3 = y0 - 1.0 + 3.0 * G3;
+        var z3 = z0 - 1.0 + 3.0 * G3;
+        // Work out the hashed gradient indices of the four simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        var kk = k & 255;
+        // Calculate the contribution from the four corners
+        var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
+        if (t0 < 0) n0 = 0.0;
+        else {
+          var gi0 = permMod12[ii + perm[jj + perm[kk]]] * 3;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0 + grad3[gi0 + 2] * z0);
+        }
+        var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
+        if (t1 < 0) n1 = 0.0;
+        else {
+          var gi1 = permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]] * 3;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1 + grad3[gi1 + 2] * z1);
+        }
+        var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
+        if (t2 < 0) n2 = 0.0;
+        else {
+          var gi2 = permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]] * 3;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2 + grad3[gi2 + 2] * z2);
+        }
+        var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
+        if (t3 < 0) n3 = 0.0;
+        else {
+          var gi3 = permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]] * 3;
+          t3 *= t3;
+          n3 = t3 * t3 * (grad3[gi3] * x3 + grad3[gi3 + 1] * y3 + grad3[gi3 + 2] * z3);
+        }
+        // Add contributions from each corner to get the final noise value.
+        // The result is scaled to stay just inside [-1,1]
+        return 32.0 * (n0 + n1 + n2 + n3);
+      },
+    // 4D simplex noise, better simplex rank ordering method 2012-03-09
+    noise4D: function(x, y, z, w) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad4 = this.grad4;
+
+        var n0, n1, n2, n3, n4; // Noise contributions from the five corners
+        // Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
+        var s = (x + y + z + w) * F4; // Factor for 4D skewing
+        var i = Math.floor(x + s);
+        var j = Math.floor(y + s);
+        var k = Math.floor(z + s);
+        var l = Math.floor(w + s);
+        var t = (i + j + k + l) * G4; // Factor for 4D unskewing
+        var X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
+        var Y0 = j - t;
+        var Z0 = k - t;
+        var W0 = l - t;
+        var x0 = x - X0; // The x,y,z,w distances from the cell origin
+        var y0 = y - Y0;
+        var z0 = z - Z0;
+        var w0 = w - W0;
+        // For the 4D case, the simplex is a 4D shape I won't even try to describe.
+        // To find out which of the 24 possible simplices we're in, we need to
+        // determine the magnitude ordering of x0, y0, z0 and w0.
+        // Six pair-wise comparisons are performed between each possible pair
+        // of the four coordinates, and the results are used to rank the numbers.
+        var rankx = 0;
+        var ranky = 0;
+        var rankz = 0;
+        var rankw = 0;
+        if (x0 > y0) rankx++;
+        else ranky++;
+        if (x0 > z0) rankx++;
+        else rankz++;
+        if (x0 > w0) rankx++;
+        else rankw++;
+        if (y0 > z0) ranky++;
+        else rankz++;
+        if (y0 > w0) ranky++;
+        else rankw++;
+        if (z0 > w0) rankz++;
+        else rankw++;
+        var i1, j1, k1, l1; // The integer offsets for the second simplex corner
+        var i2, j2, k2, l2; // The integer offsets for the third simplex corner
+        var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner
+        // simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
+        // Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
+        // impossible. Only the 24 indices which have non-zero entries make any sense.
+        // We use a thresholding to set the coordinates in turn from the largest magnitude.
+        // Rank 3 denotes the largest coordinate.
+        i1 = rankx >= 3 ? 1 : 0;
+        j1 = ranky >= 3 ? 1 : 0;
+        k1 = rankz >= 3 ? 1 : 0;
+        l1 = rankw >= 3 ? 1 : 0;
+        // Rank 2 denotes the second largest coordinate.
+        i2 = rankx >= 2 ? 1 : 0;
+        j2 = ranky >= 2 ? 1 : 0;
+        k2 = rankz >= 2 ? 1 : 0;
+        l2 = rankw >= 2 ? 1 : 0;
+        // Rank 1 denotes the second smallest coordinate.
+        i3 = rankx >= 1 ? 1 : 0;
+        j3 = ranky >= 1 ? 1 : 0;
+        k3 = rankz >= 1 ? 1 : 0;
+        l3 = rankw >= 1 ? 1 : 0;
+        // The fifth corner has all coordinate offsets = 1, so no need to compute that.
+        var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
+        var y1 = y0 - j1 + G4;
+        var z1 = z0 - k1 + G4;
+        var w1 = w0 - l1 + G4;
+        var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
+        var y2 = y0 - j2 + 2.0 * G4;
+        var z2 = z0 - k2 + 2.0 * G4;
+        var w2 = w0 - l2 + 2.0 * G4;
+        var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
+        var y3 = y0 - j3 + 3.0 * G4;
+        var z3 = z0 - k3 + 3.0 * G4;
+        var w3 = w0 - l3 + 3.0 * G4;
+        var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
+        var y4 = y0 - 1.0 + 4.0 * G4;
+        var z4 = z0 - 1.0 + 4.0 * G4;
+        var w4 = w0 - 1.0 + 4.0 * G4;
+        // Work out the hashed gradient indices of the five simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        var kk = k & 255;
+        var ll = l & 255;
+        // Calculate the contribution from the five corners
+        var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
+        if (t0 < 0) n0 = 0.0;
+        else {
+          var gi0 = (perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32) * 4;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad4[gi0] * x0 + grad4[gi0 + 1] * y0 + grad4[gi0 + 2] * z0 + grad4[gi0 + 3] * w0);
+        }
+        var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
+        if (t1 < 0) n1 = 0.0;
+        else {
+          var gi1 = (perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32) * 4;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad4[gi1] * x1 + grad4[gi1 + 1] * y1 + grad4[gi1 + 2] * z1 + grad4[gi1 + 3] * w1);
+        }
+        var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
+        if (t2 < 0) n2 = 0.0;
+        else {
+          var gi2 = (perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32) * 4;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad4[gi2] * x2 + grad4[gi2 + 1] * y2 + grad4[gi2 + 2] * z2 + grad4[gi2 + 3] * w2);
+        }
+        var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
+        if (t3 < 0) n3 = 0.0;
+        else {
+          var gi3 = (perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32) * 4;
+          t3 *= t3;
+          n3 = t3 * t3 * (grad4[gi3] * x3 + grad4[gi3 + 1] * y3 + grad4[gi3 + 2] * z3 + grad4[gi3 + 3] * w3);
+        }
+        var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
+        if (t4 < 0) n4 = 0.0;
+        else {
+          var gi4 = (perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32) * 4;
+          t4 *= t4;
+          n4 = t4 * t4 * (grad4[gi4] * x4 + grad4[gi4 + 1] * y4 + grad4[gi4 + 2] * z4 + grad4[gi4 + 3] * w4);
+        }
+        // Sum up and scale the result to cover the range [-1,1]
+        return 27.0 * (n0 + n1 + n2 + n3 + n4);
+      }
+  };
+
+function buildPermutationTable(random) {
+  var i;
+  var p = new Uint8Array(256);
+  for (i = 0; i < 256; i++) {
+    p[i] = i;
+  }
+  for (i = 0; i < 255; i++) {
+    var r = i + ~~(random() * (256 - i));
+    var aux = p[i];
+    p[i] = p[r];
+    p[r] = aux;
+  }
+  return p;
+}
+SimplexNoise._buildPermutationTable = buildPermutationTable;
+
+// amd
+if (typeof define !== 'undefined' && define.amd) define(function() {return SimplexNoise;});
+// common js
+if (typeof exports !== 'undefined') exports.SimplexNoise = SimplexNoise;
+// browser
+else if (typeof window !== 'undefined') window.SimplexNoise = SimplexNoise;
+// nodejs
+if (typeof module !== 'undefined') {
+  module.exports = SimplexNoise;
+}
+
+})();
\ No newline at end of file
diff --git a/sphere-of-boxes-three-js/dist/index.html b/sphere-of-boxes-three-js/dist/index.html
new file mode 100644
index 0000000..e81ebb7
--- /dev/null
+++ b/sphere-of-boxes-three-js/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Sphere of Boxes | three.js</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js'></script>
+<script src='js/zvdzgv.js'></script>
+<script src='js/blgjlm.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/sphere-of-boxes-three-js/dist/script.js b/sphere-of-boxes-three-js/dist/script.js
new file mode 100644
index 0000000..5792c6c
--- /dev/null
+++ b/sphere-of-boxes-three-js/dist/script.js
@@ -0,0 +1,140 @@
+/*
+  Johan Karlsson, 2019
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+
+let scene;
+let camera;
+let renderer;
+let boxes;
+let tick;
+let w, h;
+let movingLight;
+
+const config = {
+  nrOfBoxes: 500,
+  r: 10 };
+
+
+function setup() {
+  setupNoise();
+  setupScene();
+  setupCamera();
+  setupRenderer();
+  setupBoxes();
+  setupLights();
+  setupEventListeners();
+}
+
+function setupNoise() {
+  simplex = new SimplexNoise();
+}
+
+function setupScene() {
+  tick = 0;
+  scene = new THREE.Scene();
+}
+
+function setupCamera() {
+  w = window.innerWidth;
+  h = window.innerHeight;
+  let res = w / h;
+  camera = new THREE.PerspectiveCamera(75, res, 0.1, 1000);
+  camera.position.z = 22;
+
+  let controls = new THREE.OrbitControls(camera);
+  controls.update();
+}
+
+function setupRenderer() {
+  renderer = new THREE.WebGLRenderer({ antialias: true });
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  document.body.appendChild(renderer.domElement);
+}
+
+function setupBoxes() {
+  let geometry = new THREE.BoxGeometry(0.4, 0.4, 4);
+  boxes = [];
+
+  for (let i = 0; i < config.nrOfBoxes; i++) {
+    let material = new THREE.MeshPhongMaterial({
+      shininess: 60,
+      transparent: true,
+      opacity: 0.75 });
+
+    let box = new THREE.Mesh(geometry, material);
+    let θ = Math.random() * Math.PI;
+    let φ = Math.random() * Math.PI * 2;
+    let x = config.r * Math.sin(θ) * Math.cos(φ);
+    let y = config.r * Math.sin(θ) * Math.sin(φ);
+    let z = config.r * Math.cos(θ);
+    box.position.set(x, y, z);
+    box.lookAt(0, 0, 0);
+    scene.add(box);
+    boxes.push(box);
+  }
+}
+
+function setupLights() {
+  let ambientLight = new THREE.AmbientLight(0x333333);
+  scene.add(ambientLight);
+
+  let spotLight = new THREE.SpotLight(0x444444);
+  spotLight.position.set(30, 60, 60);
+  scene.add(spotLight);
+
+  let centerPointLight = new THREE.PointLight();
+  scene.add(centerPointLight);
+
+  movingLight = new THREE.PointLight();
+  scene.add(movingLight);
+}
+
+function setupEventListeners() {
+  window.addEventListener("resize", onWindowResize);
+}
+
+function onWindowResize() {
+  w = window.innerWidth;
+  h = window.innerHeight;
+  camera.aspect = w / h;
+  camera.updateProjectionMatrix();
+  renderer.setSize(w, h);
+}
+
+function moveLight() {
+  let θ = Math.PI / 2;
+  let φ = tick / 50;
+  let x = config.r * Math.sin(θ) * Math.cos(φ);
+  let y = config.r * Math.sin(θ) * Math.sin(φ);
+  let z = config.r * Math.cos(θ);
+  movingLight.position.set(x, y, z);
+}
+
+function draw() {
+  requestAnimationFrame(draw);
+  renderer.render(scene, camera);
+  let zoom = 30;
+  boxes.forEach((box, index) => {
+    let x = box.position.x;
+    let y = box.position.y;
+    let z = box.position.z;
+    let n = simplex.noise4D(
+    x / zoom,
+    y / zoom,
+    z / zoom,
+    tick / 140);
+    box.rotateZ(n / 20);
+    let hue = (n + 1) * 90 + 180;
+    let color = new THREE.Color(`hsl(${hue}, 90%, 40%)`);
+    box.material.color = color;
+  });
+
+  moveLight();
+
+  tick++;
+}
+
+setup();
+draw();
\ No newline at end of file
diff --git a/sphere-of-boxes-three-js/dist/style.css b/sphere-of-boxes-three-js/dist/style.css
new file mode 100644
index 0000000..43ed2c5
--- /dev/null
+++ b/sphere-of-boxes-three-js/dist/style.css
@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+}
diff --git a/sphere-of-boxes-three-js/dist/zvdzgv.js b/sphere-of-boxes-three-js/dist/zvdzgv.js
new file mode 100644
index 0000000..6669341
--- /dev/null
+++ b/sphere-of-boxes-three-js/dist/zvdzgv.js
@@ -0,0 +1,1042 @@
+/**
+ * @author qiao / https://github.com/qiao
+ * @author mrdoob / http://mrdoob.com
+ * @author alteredq / http://alteredqualia.com/
+ * @author WestLangley / http://github.com/WestLangley
+ * @author erich666 / http://erichaines.com
+ */
+
+// This set of controls performs orbiting, dollying (zooming), and panning.
+// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
+//
+//    Orbit - left mouse / touch: one finger move
+//    Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
+//    Pan - right mouse, or arrow keys / touch: three finger swipe
+
+THREE.OrbitControls = function ( object, domElement ) {
+
+	this.object = object;
+
+	this.domElement = ( domElement !== undefined ) ? domElement : document;
+
+	// Set to false to disable this control
+	this.enabled = true;
+
+	// "target" sets the location of focus, where the object orbits around
+	this.target = new THREE.Vector3();
+
+	// How far you can dolly in and out ( PerspectiveCamera only )
+	this.minDistance = 0;
+	this.maxDistance = Infinity;
+
+	// How far you can zoom in and out ( OrthographicCamera only )
+	this.minZoom = 0;
+	this.maxZoom = Infinity;
+
+	// How far you can orbit vertically, upper and lower limits.
+	// Range is 0 to Math.PI radians.
+	this.minPolarAngle = 0; // radians
+	this.maxPolarAngle = Math.PI; // radians
+
+	// How far you can orbit horizontally, upper and lower limits.
+	// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
+	this.minAzimuthAngle = - Infinity; // radians
+	this.maxAzimuthAngle = Infinity; // radians
+
+	// Set to true to enable damping (inertia)
+	// If damping is enabled, you must call controls.update() in your animation loop
+	this.enableDamping = false;
+	this.dampingFactor = 0.25;
+
+	// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
+	// Set to false to disable zooming
+	this.enableZoom = true;
+	this.zoomSpeed = 1.0;
+
+	// Set to false to disable rotating
+	this.enableRotate = true;
+	this.rotateSpeed = 1.0;
+
+	// Set to false to disable panning
+	this.enablePan = true;
+	this.keyPanSpeed = 7.0;	// pixels moved per arrow key push
+
+	// Set to true to automatically rotate around the target
+	// If auto-rotate is enabled, you must call controls.update() in your animation loop
+	this.autoRotate = false;
+	this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
+
+	// Set to false to disable use of the keys
+	this.enableKeys = true;
+
+	// The four arrow keys
+	this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
+
+	// Mouse buttons
+	this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
+
+	// for reset
+	this.target0 = this.target.clone();
+	this.position0 = this.object.position.clone();
+	this.zoom0 = this.object.zoom;
+
+	//
+	// public methods
+	//
+
+	this.getPolarAngle = function () {
+
+		return spherical.phi;
+
+	};
+
+	this.getAzimuthalAngle = function () {
+
+		return spherical.theta;
+
+	};
+
+	this.saveState = function () {
+
+		scope.target0.copy( scope.target );
+		scope.position0.copy( scope.object.position );
+		scope.zoom0 = scope.object.zoom;
+
+	};
+
+	this.reset = function () {
+
+		scope.target.copy( scope.target0 );
+		scope.object.position.copy( scope.position0 );
+		scope.object.zoom = scope.zoom0;
+
+		scope.object.updateProjectionMatrix();
+		scope.dispatchEvent( changeEvent );
+
+		scope.update();
+
+		state = STATE.NONE;
+
+	};
+
+	// this method is exposed, but perhaps it would be better if we can make it private...
+	this.update = function () {
+
+		var offset = new THREE.Vector3();
+
+		// so camera.up is the orbit axis
+		var quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) );
+		var quatInverse = quat.clone().inverse();
+
+		var lastPosition = new THREE.Vector3();
+		var lastQuaternion = new THREE.Quaternion();
+
+		return function update() {
+
+			var position = scope.object.position;
+
+			offset.copy( position ).sub( scope.target );
+
+			// rotate offset to "y-axis-is-up" space
+			offset.applyQuaternion( quat );
+
+			// angle from z-axis around y-axis
+			spherical.setFromVector3( offset );
+
+			if ( scope.autoRotate && state === STATE.NONE ) {
+
+				rotateLeft( getAutoRotationAngle() );
+
+			}
+
+			spherical.theta += sphericalDelta.theta;
+			spherical.phi += sphericalDelta.phi;
+
+			// restrict theta to be between desired limits
+			spherical.theta = Math.max( scope.minAzimuthAngle, Math.min( scope.maxAzimuthAngle, spherical.theta ) );
+
+			// restrict phi to be between desired limits
+			spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
+
+			spherical.makeSafe();
+
+
+			spherical.radius *= scale;
+
+			// restrict radius to be between desired limits
+			spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
+
+			// move target to panned location
+			scope.target.add( panOffset );
+
+			offset.setFromSpherical( spherical );
+
+			// rotate offset back to "camera-up-vector-is-up" space
+			offset.applyQuaternion( quatInverse );
+
+			position.copy( scope.target ).add( offset );
+
+			scope.object.lookAt( scope.target );
+
+			if ( scope.enableDamping === true ) {
+
+				sphericalDelta.theta *= ( 1 - scope.dampingFactor );
+				sphericalDelta.phi *= ( 1 - scope.dampingFactor );
+
+			} else {
+
+				sphericalDelta.set( 0, 0, 0 );
+
+			}
+
+			scale = 1;
+			panOffset.set( 0, 0, 0 );
+
+			// update condition is:
+			// min(camera displacement, camera rotation in radians)^2 > EPS
+			// using small-angle approximation cos(x/2) = 1 - x^2 / 8
+
+			if ( zoomChanged ||
+				lastPosition.distanceToSquared( scope.object.position ) > EPS ||
+				8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
+
+				scope.dispatchEvent( changeEvent );
+
+				lastPosition.copy( scope.object.position );
+				lastQuaternion.copy( scope.object.quaternion );
+				zoomChanged = false;
+
+				return true;
+
+			}
+
+			return false;
+
+		};
+
+	}();
+
+	this.dispose = function () {
+
+		scope.domElement.removeEventListener( 'contextmenu', onContextMenu, false );
+		scope.domElement.removeEventListener( 'mousedown', onMouseDown, false );
+		scope.domElement.removeEventListener( 'wheel', onMouseWheel, false );
+
+		scope.domElement.removeEventListener( 'touchstart', onTouchStart, false );
+		scope.domElement.removeEventListener( 'touchend', onTouchEnd, false );
+		scope.domElement.removeEventListener( 'touchmove', onTouchMove, false );
+
+		document.removeEventListener( 'mousemove', onMouseMove, false );
+		document.removeEventListener( 'mouseup', onMouseUp, false );
+
+		window.removeEventListener( 'keydown', onKeyDown, false );
+
+		//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
+
+	};
+
+	//
+	// internals
+	//
+
+	var scope = this;
+
+	var changeEvent = { type: 'change' };
+	var startEvent = { type: 'start' };
+	var endEvent = { type: 'end' };
+
+	var STATE = { NONE: - 1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 };
+
+	var state = STATE.NONE;
+
+	var EPS = 0.000001;
+
+	// current position in spherical coordinates
+	var spherical = new THREE.Spherical();
+	var sphericalDelta = new THREE.Spherical();
+
+	var scale = 1;
+	var panOffset = new THREE.Vector3();
+	var zoomChanged = false;
+
+	var rotateStart = new THREE.Vector2();
+	var rotateEnd = new THREE.Vector2();
+	var rotateDelta = new THREE.Vector2();
+
+	var panStart = new THREE.Vector2();
+	var panEnd = new THREE.Vector2();
+	var panDelta = new THREE.Vector2();
+
+	var dollyStart = new THREE.Vector2();
+	var dollyEnd = new THREE.Vector2();
+	var dollyDelta = new THREE.Vector2();
+
+	function getAutoRotationAngle() {
+
+		return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
+
+	}
+
+	function getZoomScale() {
+
+		return Math.pow( 0.95, scope.zoomSpeed );
+
+	}
+
+	function rotateLeft( angle ) {
+
+		sphericalDelta.theta -= angle;
+
+	}
+
+	function rotateUp( angle ) {
+
+		sphericalDelta.phi -= angle;
+
+	}
+
+	var panLeft = function () {
+
+		var v = new THREE.Vector3();
+
+		return function panLeft( distance, objectMatrix ) {
+
+			v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
+			v.multiplyScalar( - distance );
+
+			panOffset.add( v );
+
+		};
+
+	}();
+
+	var panUp = function () {
+
+		var v = new THREE.Vector3();
+
+		return function panUp( distance, objectMatrix ) {
+
+			v.setFromMatrixColumn( objectMatrix, 1 ); // get Y column of objectMatrix
+			v.multiplyScalar( distance );
+
+			panOffset.add( v );
+
+		};
+
+	}();
+
+	// deltaX and deltaY are in pixels; right and down are positive
+	var pan = function () {
+
+		var offset = new THREE.Vector3();
+
+		return function pan( deltaX, deltaY ) {
+
+			var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
+
+			if ( scope.object.isPerspectiveCamera ) {
+
+				// perspective
+				var position = scope.object.position;
+				offset.copy( position ).sub( scope.target );
+				var targetDistance = offset.length();
+
+				// half of the fov is center to top of screen
+				targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
+
+				// we actually don't use screenWidth, since perspective camera is fixed to screen height
+				panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
+				panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
+
+			} else if ( scope.object.isOrthographicCamera ) {
+
+				// orthographic
+				panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
+				panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
+
+			} else {
+
+				// camera neither orthographic nor perspective
+				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
+				scope.enablePan = false;
+
+			}
+
+		};
+
+	}();
+
+	function dollyIn( dollyScale ) {
+
+		if ( scope.object.isPerspectiveCamera ) {
+
+			scale /= dollyScale;
+
+		} else if ( scope.object.isOrthographicCamera ) {
+
+			scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) );
+			scope.object.updateProjectionMatrix();
+			zoomChanged = true;
+
+		} else {
+
+			console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
+			scope.enableZoom = false;
+
+		}
+
+	}
+
+	function dollyOut( dollyScale ) {
+
+		if ( scope.object.isPerspectiveCamera ) {
+
+			scale *= dollyScale;
+
+		} else if ( scope.object.isOrthographicCamera ) {
+
+			scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) );
+			scope.object.updateProjectionMatrix();
+			zoomChanged = true;
+
+		} else {
+
+			console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
+			scope.enableZoom = false;
+
+		}
+
+	}
+
+	//
+	// event callbacks - update the object state
+	//
+
+	function handleMouseDownRotate( event ) {
+
+		//console.log( 'handleMouseDownRotate' );
+
+		rotateStart.set( event.clientX, event.clientY );
+
+	}
+
+	function handleMouseDownDolly( event ) {
+
+		//console.log( 'handleMouseDownDolly' );
+
+		dollyStart.set( event.clientX, event.clientY );
+
+	}
+
+	function handleMouseDownPan( event ) {
+
+		//console.log( 'handleMouseDownPan' );
+
+		panStart.set( event.clientX, event.clientY );
+
+	}
+
+	function handleMouseMoveRotate( event ) {
+
+		//console.log( 'handleMouseMoveRotate' );
+
+		rotateEnd.set( event.clientX, event.clientY );
+		rotateDelta.subVectors( rotateEnd, rotateStart );
+
+		var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
+
+		// rotating across whole screen goes 360 degrees around
+		rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
+
+		// rotating up and down along whole screen attempts to go 360, but limited to 180
+		rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
+
+		rotateStart.copy( rotateEnd );
+
+		scope.update();
+
+	}
+
+	function handleMouseMoveDolly( event ) {
+
+		//console.log( 'handleMouseMoveDolly' );
+
+		dollyEnd.set( event.clientX, event.clientY );
+
+		dollyDelta.subVectors( dollyEnd, dollyStart );
+
+		if ( dollyDelta.y > 0 ) {
+
+			dollyIn( getZoomScale() );
+
+		} else if ( dollyDelta.y < 0 ) {
+
+			dollyOut( getZoomScale() );
+
+		}
+
+		dollyStart.copy( dollyEnd );
+
+		scope.update();
+
+	}
+
+	function handleMouseMovePan( event ) {
+
+		//console.log( 'handleMouseMovePan' );
+
+		panEnd.set( event.clientX, event.clientY );
+
+		panDelta.subVectors( panEnd, panStart );
+
+		pan( panDelta.x, panDelta.y );
+
+		panStart.copy( panEnd );
+
+		scope.update();
+
+	}
+
+	function handleMouseUp( event ) {
+
+		// console.log( 'handleMouseUp' );
+
+	}
+
+	function handleMouseWheel( event ) {
+
+		// console.log( 'handleMouseWheel' );
+
+		if ( event.deltaY < 0 ) {
+
+			dollyOut( getZoomScale() );
+
+		} else if ( event.deltaY > 0 ) {
+
+			dollyIn( getZoomScale() );
+
+		}
+
+		scope.update();
+
+	}
+
+	function handleKeyDown( event ) {
+
+		//console.log( 'handleKeyDown' );
+
+		switch ( event.keyCode ) {
+
+			case scope.keys.UP:
+				pan( 0, scope.keyPanSpeed );
+				scope.update();
+				break;
+
+			case scope.keys.BOTTOM:
+				pan( 0, - scope.keyPanSpeed );
+				scope.update();
+				break;
+
+			case scope.keys.LEFT:
+				pan( scope.keyPanSpeed, 0 );
+				scope.update();
+				break;
+
+			case scope.keys.RIGHT:
+				pan( - scope.keyPanSpeed, 0 );
+				scope.update();
+				break;
+
+		}
+
+	}
+
+	function handleTouchStartRotate( event ) {
+
+		//console.log( 'handleTouchStartRotate' );
+
+		rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
+
+	}
+
+	function handleTouchStartDolly( event ) {
+
+		//console.log( 'handleTouchStartDolly' );
+
+		var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
+		var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
+
+		var distance = Math.sqrt( dx * dx + dy * dy );
+
+		dollyStart.set( 0, distance );
+
+	}
+
+	function handleTouchStartPan( event ) {
+
+		//console.log( 'handleTouchStartPan' );
+
+		panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
+
+	}
+
+	function handleTouchMoveRotate( event ) {
+
+		//console.log( 'handleTouchMoveRotate' );
+
+		rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
+		rotateDelta.subVectors( rotateEnd, rotateStart );
+
+		var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
+
+		// rotating across whole screen goes 360 degrees around
+		rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
+
+		// rotating up and down along whole screen attempts to go 360, but limited to 180
+		rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
+
+		rotateStart.copy( rotateEnd );
+
+		scope.update();
+
+	}
+
+	function handleTouchMoveDolly( event ) {
+
+		//console.log( 'handleTouchMoveDolly' );
+
+		var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
+		var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
+
+		var distance = Math.sqrt( dx * dx + dy * dy );
+
+		dollyEnd.set( 0, distance );
+
+		dollyDelta.subVectors( dollyEnd, dollyStart );
+
+		if ( dollyDelta.y > 0 ) {
+
+			dollyOut( getZoomScale() );
+
+		} else if ( dollyDelta.y < 0 ) {
+
+			dollyIn( getZoomScale() );
+
+		}
+
+		dollyStart.copy( dollyEnd );
+
+		scope.update();
+
+	}
+
+	function handleTouchMovePan( event ) {
+
+		//console.log( 'handleTouchMovePan' );
+
+		panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
+
+		panDelta.subVectors( panEnd, panStart );
+
+		pan( panDelta.x, panDelta.y );
+
+		panStart.copy( panEnd );
+
+		scope.update();
+
+	}
+
+	function handleTouchEnd( event ) {
+
+		//console.log( 'handleTouchEnd' );
+
+	}
+
+	//
+	// event handlers - FSM: listen for events and reset state
+	//
+
+	function onMouseDown( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		event.preventDefault();
+
+		switch ( event.button ) {
+
+			case scope.mouseButtons.ORBIT:
+
+				if ( scope.enableRotate === false ) return;
+
+				handleMouseDownRotate( event );
+
+				state = STATE.ROTATE;
+
+				break;
+
+			case scope.mouseButtons.ZOOM:
+
+				if ( scope.enableZoom === false ) return;
+
+				handleMouseDownDolly( event );
+
+				state = STATE.DOLLY;
+
+				break;
+
+			case scope.mouseButtons.PAN:
+
+				if ( scope.enablePan === false ) return;
+
+				handleMouseDownPan( event );
+
+				state = STATE.PAN;
+
+				break;
+
+		}
+
+		if ( state !== STATE.NONE ) {
+
+			document.addEventListener( 'mousemove', onMouseMove, false );
+			document.addEventListener( 'mouseup', onMouseUp, false );
+
+			scope.dispatchEvent( startEvent );
+
+		}
+
+	}
+
+	function onMouseMove( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		event.preventDefault();
+
+		switch ( state ) {
+
+			case STATE.ROTATE:
+
+				if ( scope.enableRotate === false ) return;
+
+				handleMouseMoveRotate( event );
+
+				break;
+
+			case STATE.DOLLY:
+
+				if ( scope.enableZoom === false ) return;
+
+				handleMouseMoveDolly( event );
+
+				break;
+
+			case STATE.PAN:
+
+				if ( scope.enablePan === false ) return;
+
+				handleMouseMovePan( event );
+
+				break;
+
+		}
+
+	}
+
+	function onMouseUp( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		handleMouseUp( event );
+
+		document.removeEventListener( 'mousemove', onMouseMove, false );
+		document.removeEventListener( 'mouseup', onMouseUp, false );
+
+		scope.dispatchEvent( endEvent );
+
+		state = STATE.NONE;
+
+	}
+
+	function onMouseWheel( event ) {
+
+		if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		handleMouseWheel( event );
+
+		scope.dispatchEvent( startEvent ); // not sure why these are here...
+		scope.dispatchEvent( endEvent );
+
+	}
+
+	function onKeyDown( event ) {
+
+		if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return;
+
+		handleKeyDown( event );
+
+	}
+
+	function onTouchStart( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		switch ( event.touches.length ) {
+
+			case 1:	// one-fingered touch: rotate
+
+				if ( scope.enableRotate === false ) return;
+
+				handleTouchStartRotate( event );
+
+				state = STATE.TOUCH_ROTATE;
+
+				break;
+
+			case 2:	// two-fingered touch: dolly
+
+				if ( scope.enableZoom === false ) return;
+
+				handleTouchStartDolly( event );
+
+				state = STATE.TOUCH_DOLLY;
+
+				break;
+
+			case 3: // three-fingered touch: pan
+
+				if ( scope.enablePan === false ) return;
+
+				handleTouchStartPan( event );
+
+				state = STATE.TOUCH_PAN;
+
+				break;
+
+			default:
+
+				state = STATE.NONE;
+
+		}
+
+		if ( state !== STATE.NONE ) {
+
+			scope.dispatchEvent( startEvent );
+
+		}
+
+	}
+
+	function onTouchMove( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		switch ( event.touches.length ) {
+
+			case 1: // one-fingered touch: rotate
+
+				if ( scope.enableRotate === false ) return;
+				if ( state !== STATE.TOUCH_ROTATE ) return; // is this needed?...
+
+				handleTouchMoveRotate( event );
+
+				break;
+
+			case 2: // two-fingered touch: dolly
+
+				if ( scope.enableZoom === false ) return;
+				if ( state !== STATE.TOUCH_DOLLY ) return; // is this needed?...
+
+				handleTouchMoveDolly( event );
+
+				break;
+
+			case 3: // three-fingered touch: pan
+
+				if ( scope.enablePan === false ) return;
+				if ( state !== STATE.TOUCH_PAN ) return; // is this needed?...
+
+				handleTouchMovePan( event );
+
+				break;
+
+			default:
+
+				state = STATE.NONE;
+
+		}
+
+	}
+
+	function onTouchEnd( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		handleTouchEnd( event );
+
+		scope.dispatchEvent( endEvent );
+
+		state = STATE.NONE;
+
+	}
+
+	function onContextMenu( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		event.preventDefault();
+
+	}
+
+	//
+
+	scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );
+
+	scope.domElement.addEventListener( 'mousedown', onMouseDown, false );
+	scope.domElement.addEventListener( 'wheel', onMouseWheel, false );
+
+	scope.domElement.addEventListener( 'touchstart', onTouchStart, false );
+	scope.domElement.addEventListener( 'touchend', onTouchEnd, false );
+	scope.domElement.addEventListener( 'touchmove', onTouchMove, false );
+
+	window.addEventListener( 'keydown', onKeyDown, false );
+
+	// force an update at start
+
+	this.update();
+
+};
+
+THREE.OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype );
+THREE.OrbitControls.prototype.constructor = THREE.OrbitControls;
+
+Object.defineProperties( THREE.OrbitControls.prototype, {
+
+	center: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .center has been renamed to .target' );
+			return this.target;
+
+		}
+
+	},
+
+	// backward compatibility
+
+	noZoom: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
+			return ! this.enableZoom;
+
+		},
+
+		set: function ( value ) {
+
+			console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
+			this.enableZoom = ! value;
+
+		}
+
+	},
+
+	noRotate: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
+			return ! this.enableRotate;
+
+		},
+
+		set: function ( value ) {
+
+			console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
+			this.enableRotate = ! value;
+
+		}
+
+	},
+
+	noPan: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
+			return ! this.enablePan;
+
+		},
+
+		set: function ( value ) {
+
+			console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
+			this.enablePan = ! value;
+
+		}
+
+	},
+
+	noKeys: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
+			return ! this.enableKeys;
+
+		},
+
+		set: function ( value ) {
+
+			console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
+			this.enableKeys = ! value;
+
+		}
+
+	},
+
+	staticMoving: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
+			return ! this.enableDamping;
+
+		},
+
+		set: function ( value ) {
+
+			console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
+			this.enableDamping = ! value;
+
+		}
+
+	},
+
+	dynamicDampingFactor: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
+			return this.dampingFactor;
+
+		},
+
+		set: function ( value ) {
+
+			console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
+			this.dampingFactor = value;
+
+		}
+
+	}
+
+} );
\ No newline at end of file
diff --git a/sphere-of-boxes-three-js/license.txt b/sphere-of-boxes-three-js/license.txt
new file mode 100644
index 0000000..ed66db8
--- /dev/null
+++ b/sphere-of-boxes-three-js/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Johan Karlsson (https://codepen.io/DonKarlssonSan/pen/zgmoBz)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/sphere-of-boxes-three-js/src/blgjlm.js b/sphere-of-boxes-three-js/src/blgjlm.js
new file mode 100644
index 0000000..5a1c681
--- /dev/null
+++ b/sphere-of-boxes-three-js/src/blgjlm.js
@@ -0,0 +1,416 @@
+/*
+ * A fast javascript implementation of simplex noise by Jonas Wagner
+ *
+ * Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.
+ * Which is based on example code by Stefan Gustavson (stegu@itn.liu.se).
+ * With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
+ * Better rank ordering method by Stefan Gustavson in 2012.
+ *
+ *
+ * Copyright (C) 2016 Jonas Wagner
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ */
+(function() {
+'use strict';
+
+var F2 = 0.5 * (Math.sqrt(3.0) - 1.0);
+var G2 = (3.0 - Math.sqrt(3.0)) / 6.0;
+var F3 = 1.0 / 3.0;
+var G3 = 1.0 / 6.0;
+var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;
+var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;
+
+function SimplexNoise(random) {
+  if (!random) random = Math.random;
+  this.p = buildPermutationTable(random);
+  this.perm = new Uint8Array(512);
+  this.permMod12 = new Uint8Array(512);
+  for (var i = 0; i < 512; i++) {
+    this.perm[i] = this.p[i & 255];
+    this.permMod12[i] = this.perm[i] % 12;
+  }
+
+}
+SimplexNoise.prototype = {
+    grad3: new Float32Array([1, 1, 0,
+                            -1, 1, 0,
+                            1, -1, 0,
+
+                            -1, -1, 0,
+                            1, 0, 1,
+                            -1, 0, 1,
+
+                            1, 0, -1,
+                            -1, 0, -1,
+                            0, 1, 1,
+
+                            0, -1, 1,
+                            0, 1, -1,
+                            0, -1, -1]),
+    grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1,
+                            0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1,
+                            1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1,
+                            -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1,
+                            1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1,
+                            -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1,
+                            1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0,
+                            -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]),
+    noise2D: function(xin, yin) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad3 = this.grad3;
+        var n0 = 0; // Noise contributions from the three corners
+        var n1 = 0;
+        var n2 = 0;
+        // Skew the input space to determine which simplex cell we're in
+        var s = (xin + yin) * F2; // Hairy factor for 2D
+        var i = Math.floor(xin + s);
+        var j = Math.floor(yin + s);
+        var t = (i + j) * G2;
+        var X0 = i - t; // Unskew the cell origin back to (x,y) space
+        var Y0 = j - t;
+        var x0 = xin - X0; // The x,y distances from the cell origin
+        var y0 = yin - Y0;
+        // For the 2D case, the simplex shape is an equilateral triangle.
+        // Determine which simplex we are in.
+        var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
+        if (x0 > y0) {
+          i1 = 1;
+          j1 = 0;
+        } // lower triangle, XY order: (0,0)->(1,0)->(1,1)
+        else {
+          i1 = 0;
+          j1 = 1;
+        } // upper triangle, YX order: (0,0)->(0,1)->(1,1)
+        // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
+        // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
+        // c = (3-sqrt(3))/6
+        var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
+        var y1 = y0 - j1 + G2;
+        var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
+        var y2 = y0 - 1.0 + 2.0 * G2;
+        // Work out the hashed gradient indices of the three simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        // Calculate the contribution from the three corners
+        var t0 = 0.5 - x0 * x0 - y0 * y0;
+        if (t0 >= 0) {
+          var gi0 = permMod12[ii + perm[jj]] * 3;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient
+        }
+        var t1 = 0.5 - x1 * x1 - y1 * y1;
+        if (t1 >= 0) {
+          var gi1 = permMod12[ii + i1 + perm[jj + j1]] * 3;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1);
+        }
+        var t2 = 0.5 - x2 * x2 - y2 * y2;
+        if (t2 >= 0) {
+          var gi2 = permMod12[ii + 1 + perm[jj + 1]] * 3;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2);
+        }
+        // Add contributions from each corner to get the final noise value.
+        // The result is scaled to return values in the interval [-1,1].
+        return 70.0 * (n0 + n1 + n2);
+      },
+    // 3D simplex noise
+    noise3D: function(xin, yin, zin) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad3 = this.grad3;
+        var n0, n1, n2, n3; // Noise contributions from the four corners
+        // Skew the input space to determine which simplex cell we're in
+        var s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3D
+        var i = Math.floor(xin + s);
+        var j = Math.floor(yin + s);
+        var k = Math.floor(zin + s);
+        var t = (i + j + k) * G3;
+        var X0 = i - t; // Unskew the cell origin back to (x,y,z) space
+        var Y0 = j - t;
+        var Z0 = k - t;
+        var x0 = xin - X0; // The x,y,z distances from the cell origin
+        var y0 = yin - Y0;
+        var z0 = zin - Z0;
+        // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
+        // Determine which simplex we are in.
+        var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
+        var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
+        if (x0 >= y0) {
+          if (y0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+          } // X Y Z order
+          else if (x0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+          } // X Z Y order
+          else {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+          } // Z X Y order
+        }
+        else { // x0<y0
+          if (y0 < z0) {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+          } // Z Y X order
+          else if (x0 < z0) {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+          } // Y Z X order
+          else {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+          } // Y X Z order
+        }
+        // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
+        // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
+        // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
+        // c = 1/6.
+        var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
+        var y1 = y0 - j1 + G3;
+        var z1 = z0 - k1 + G3;
+        var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords
+        var y2 = y0 - j2 + 2.0 * G3;
+        var z2 = z0 - k2 + 2.0 * G3;
+        var x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords
+        var y3 = y0 - 1.0 + 3.0 * G3;
+        var z3 = z0 - 1.0 + 3.0 * G3;
+        // Work out the hashed gradient indices of the four simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        var kk = k & 255;
+        // Calculate the contribution from the four corners
+        var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
+        if (t0 < 0) n0 = 0.0;
+        else {
+          var gi0 = permMod12[ii + perm[jj + perm[kk]]] * 3;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0 + grad3[gi0 + 2] * z0);
+        }
+        var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
+        if (t1 < 0) n1 = 0.0;
+        else {
+          var gi1 = permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]] * 3;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1 + grad3[gi1 + 2] * z1);
+        }
+        var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
+        if (t2 < 0) n2 = 0.0;
+        else {
+          var gi2 = permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]] * 3;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2 + grad3[gi2 + 2] * z2);
+        }
+        var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
+        if (t3 < 0) n3 = 0.0;
+        else {
+          var gi3 = permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]] * 3;
+          t3 *= t3;
+          n3 = t3 * t3 * (grad3[gi3] * x3 + grad3[gi3 + 1] * y3 + grad3[gi3 + 2] * z3);
+        }
+        // Add contributions from each corner to get the final noise value.
+        // The result is scaled to stay just inside [-1,1]
+        return 32.0 * (n0 + n1 + n2 + n3);
+      },
+    // 4D simplex noise, better simplex rank ordering method 2012-03-09
+    noise4D: function(x, y, z, w) {
+        var permMod12 = this.permMod12;
+        var perm = this.perm;
+        var grad4 = this.grad4;
+
+        var n0, n1, n2, n3, n4; // Noise contributions from the five corners
+        // Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
+        var s = (x + y + z + w) * F4; // Factor for 4D skewing
+        var i = Math.floor(x + s);
+        var j = Math.floor(y + s);
+        var k = Math.floor(z + s);
+        var l = Math.floor(w + s);
+        var t = (i + j + k + l) * G4; // Factor for 4D unskewing
+        var X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
+        var Y0 = j - t;
+        var Z0 = k - t;
+        var W0 = l - t;
+        var x0 = x - X0; // The x,y,z,w distances from the cell origin
+        var y0 = y - Y0;
+        var z0 = z - Z0;
+        var w0 = w - W0;
+        // For the 4D case, the simplex is a 4D shape I won't even try to describe.
+        // To find out which of the 24 possible simplices we're in, we need to
+        // determine the magnitude ordering of x0, y0, z0 and w0.
+        // Six pair-wise comparisons are performed between each possible pair
+        // of the four coordinates, and the results are used to rank the numbers.
+        var rankx = 0;
+        var ranky = 0;
+        var rankz = 0;
+        var rankw = 0;
+        if (x0 > y0) rankx++;
+        else ranky++;
+        if (x0 > z0) rankx++;
+        else rankz++;
+        if (x0 > w0) rankx++;
+        else rankw++;
+        if (y0 > z0) ranky++;
+        else rankz++;
+        if (y0 > w0) ranky++;
+        else rankw++;
+        if (z0 > w0) rankz++;
+        else rankw++;
+        var i1, j1, k1, l1; // The integer offsets for the second simplex corner
+        var i2, j2, k2, l2; // The integer offsets for the third simplex corner
+        var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner
+        // simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
+        // Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
+        // impossible. Only the 24 indices which have non-zero entries make any sense.
+        // We use a thresholding to set the coordinates in turn from the largest magnitude.
+        // Rank 3 denotes the largest coordinate.
+        i1 = rankx >= 3 ? 1 : 0;
+        j1 = ranky >= 3 ? 1 : 0;
+        k1 = rankz >= 3 ? 1 : 0;
+        l1 = rankw >= 3 ? 1 : 0;
+        // Rank 2 denotes the second largest coordinate.
+        i2 = rankx >= 2 ? 1 : 0;
+        j2 = ranky >= 2 ? 1 : 0;
+        k2 = rankz >= 2 ? 1 : 0;
+        l2 = rankw >= 2 ? 1 : 0;
+        // Rank 1 denotes the second smallest coordinate.
+        i3 = rankx >= 1 ? 1 : 0;
+        j3 = ranky >= 1 ? 1 : 0;
+        k3 = rankz >= 1 ? 1 : 0;
+        l3 = rankw >= 1 ? 1 : 0;
+        // The fifth corner has all coordinate offsets = 1, so no need to compute that.
+        var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
+        var y1 = y0 - j1 + G4;
+        var z1 = z0 - k1 + G4;
+        var w1 = w0 - l1 + G4;
+        var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
+        var y2 = y0 - j2 + 2.0 * G4;
+        var z2 = z0 - k2 + 2.0 * G4;
+        var w2 = w0 - l2 + 2.0 * G4;
+        var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
+        var y3 = y0 - j3 + 3.0 * G4;
+        var z3 = z0 - k3 + 3.0 * G4;
+        var w3 = w0 - l3 + 3.0 * G4;
+        var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
+        var y4 = y0 - 1.0 + 4.0 * G4;
+        var z4 = z0 - 1.0 + 4.0 * G4;
+        var w4 = w0 - 1.0 + 4.0 * G4;
+        // Work out the hashed gradient indices of the five simplex corners
+        var ii = i & 255;
+        var jj = j & 255;
+        var kk = k & 255;
+        var ll = l & 255;
+        // Calculate the contribution from the five corners
+        var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
+        if (t0 < 0) n0 = 0.0;
+        else {
+          var gi0 = (perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32) * 4;
+          t0 *= t0;
+          n0 = t0 * t0 * (grad4[gi0] * x0 + grad4[gi0 + 1] * y0 + grad4[gi0 + 2] * z0 + grad4[gi0 + 3] * w0);
+        }
+        var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
+        if (t1 < 0) n1 = 0.0;
+        else {
+          var gi1 = (perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32) * 4;
+          t1 *= t1;
+          n1 = t1 * t1 * (grad4[gi1] * x1 + grad4[gi1 + 1] * y1 + grad4[gi1 + 2] * z1 + grad4[gi1 + 3] * w1);
+        }
+        var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
+        if (t2 < 0) n2 = 0.0;
+        else {
+          var gi2 = (perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32) * 4;
+          t2 *= t2;
+          n2 = t2 * t2 * (grad4[gi2] * x2 + grad4[gi2 + 1] * y2 + grad4[gi2 + 2] * z2 + grad4[gi2 + 3] * w2);
+        }
+        var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
+        if (t3 < 0) n3 = 0.0;
+        else {
+          var gi3 = (perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32) * 4;
+          t3 *= t3;
+          n3 = t3 * t3 * (grad4[gi3] * x3 + grad4[gi3 + 1] * y3 + grad4[gi3 + 2] * z3 + grad4[gi3 + 3] * w3);
+        }
+        var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
+        if (t4 < 0) n4 = 0.0;
+        else {
+          var gi4 = (perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32) * 4;
+          t4 *= t4;
+          n4 = t4 * t4 * (grad4[gi4] * x4 + grad4[gi4 + 1] * y4 + grad4[gi4 + 2] * z4 + grad4[gi4 + 3] * w4);
+        }
+        // Sum up and scale the result to cover the range [-1,1]
+        return 27.0 * (n0 + n1 + n2 + n3 + n4);
+      }
+  };
+
+function buildPermutationTable(random) {
+  var i;
+  var p = new Uint8Array(256);
+  for (i = 0; i < 256; i++) {
+    p[i] = i;
+  }
+  for (i = 0; i < 255; i++) {
+    var r = i + ~~(random() * (256 - i));
+    var aux = p[i];
+    p[i] = p[r];
+    p[r] = aux;
+  }
+  return p;
+}
+SimplexNoise._buildPermutationTable = buildPermutationTable;
+
+// amd
+if (typeof define !== 'undefined' && define.amd) define(function() {return SimplexNoise;});
+// common js
+if (typeof exports !== 'undefined') exports.SimplexNoise = SimplexNoise;
+// browser
+else if (typeof window !== 'undefined') window.SimplexNoise = SimplexNoise;
+// nodejs
+if (typeof module !== 'undefined') {
+  module.exports = SimplexNoise;
+}
+
+})();
\ No newline at end of file
diff --git a/sphere-of-boxes-three-js/src/index.html b/sphere-of-boxes-three-js/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/sphere-of-boxes-three-js/src/script.babel b/sphere-of-boxes-three-js/src/script.babel
new file mode 100644
index 0000000..9b97e9e
--- /dev/null
+++ b/sphere-of-boxes-three-js/src/script.babel
@@ -0,0 +1,140 @@
+/*
+  Johan Karlsson, 2019
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+
+let scene;
+let camera;
+let renderer;
+let boxes;
+let tick;
+let w, h;
+let movingLight;
+
+const config = {
+  nrOfBoxes: 500,
+  r: 10
+}
+
+function setup() {
+  setupNoise();
+  setupScene();
+  setupCamera();
+  setupRenderer();
+  setupBoxes();
+  setupLights();
+  setupEventListeners();
+}
+
+function setupNoise() {
+  simplex = new SimplexNoise();
+}
+
+function setupScene() {
+  tick = 0;
+  scene = new THREE.Scene();
+}
+
+function setupCamera() {
+  w = window.innerWidth;
+  h = window.innerHeight;
+  let res = w / h;
+  camera = new THREE.PerspectiveCamera(75, res, 0.1, 1000);
+  camera.position.z = 22;
+  
+  let controls = new THREE.OrbitControls(camera);
+  controls.update();
+}
+
+function setupRenderer() {
+  renderer = new THREE.WebGLRenderer({ antialias: true });
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  document.body.appendChild(renderer.domElement);
+}
+
+function setupBoxes() {
+  let geometry = new THREE.BoxGeometry(0.4, 0.4, 4);
+  boxes = [];
+
+  for(let i = 0; i < config.nrOfBoxes; i++) {
+    let material = new THREE.MeshPhongMaterial({
+      shininess: 60,
+      transparent: true,
+      opacity: 0.75
+    });
+    let box = new THREE.Mesh(geometry, material);
+    let θ = Math.random() * Math.PI;
+    let φ = Math.random() * Math.PI * 2;
+    let x = config.r * Math.sin(θ) * Math.cos(φ);
+    let y = config.r * Math.sin(θ) * Math.sin(φ);
+    let z = config.r * Math.cos(θ);
+    box.position.set(x, y, z);
+    box.lookAt(0, 0, 0);
+    scene.add(box);
+    boxes.push(box);    
+  }
+}
+
+function setupLights() {
+  let ambientLight = new THREE.AmbientLight(0x333333);
+  scene.add(ambientLight);
+  
+  let spotLight = new THREE.SpotLight(0x444444);
+  spotLight.position.set(30, 60, 60);
+  scene.add(spotLight);
+  
+  let centerPointLight = new THREE.PointLight();
+  scene.add(centerPointLight);
+  
+  movingLight = new THREE.PointLight();
+  scene.add(movingLight);
+}
+
+function setupEventListeners() {
+  window.addEventListener("resize", onWindowResize);
+}
+
+function onWindowResize() {
+  w = window.innerWidth;
+  h = window.innerHeight;
+  camera.aspect = w / h;
+  camera.updateProjectionMatrix();
+  renderer.setSize(w, h);
+}
+
+function moveLight() {
+  let θ = Math.PI / 2;
+  let φ = tick / 50;
+  let x = config.r * Math.sin(θ) * Math.cos(φ);
+  let y = config.r * Math.sin(θ) * Math.sin(φ);
+  let z = config.r * Math.cos(θ); 
+  movingLight.position.set(x, y, z);
+}
+
+function draw() {
+  requestAnimationFrame(draw);
+	renderer.render(scene, camera);
+  let zoom = 30;
+  boxes.forEach((box, index) => {
+    let x = box.position.x;
+    let y = box.position.y;
+    let z = box.position.z;
+    let n = simplex.noise4D(
+      x / zoom, 
+      y / zoom, 
+      z / zoom, 
+      tick / 140);
+    box.rotateZ(n / 20);
+    let hue = (n + 1) * 90 + 180;
+    let color = new THREE.Color(`hsl(${hue}, 90%, 40%)`);
+    box.material.color = color;
+  });
+  
+  moveLight();
+  
+  tick++;
+}
+
+setup();
+draw();
\ No newline at end of file
diff --git a/sphere-of-boxes-three-js/src/style.css b/sphere-of-boxes-three-js/src/style.css
new file mode 100644
index 0000000..43ed2c5
--- /dev/null
+++ b/sphere-of-boxes-three-js/src/style.css
@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+}
diff --git a/sphere-of-boxes-three-js/src/zvdzgv.js b/sphere-of-boxes-three-js/src/zvdzgv.js
new file mode 100644
index 0000000..6669341
--- /dev/null
+++ b/sphere-of-boxes-three-js/src/zvdzgv.js
@@ -0,0 +1,1042 @@
+/**
+ * @author qiao / https://github.com/qiao
+ * @author mrdoob / http://mrdoob.com
+ * @author alteredq / http://alteredqualia.com/
+ * @author WestLangley / http://github.com/WestLangley
+ * @author erich666 / http://erichaines.com
+ */
+
+// This set of controls performs orbiting, dollying (zooming), and panning.
+// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
+//
+//    Orbit - left mouse / touch: one finger move
+//    Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
+//    Pan - right mouse, or arrow keys / touch: three finger swipe
+
+THREE.OrbitControls = function ( object, domElement ) {
+
+	this.object = object;
+
+	this.domElement = ( domElement !== undefined ) ? domElement : document;
+
+	// Set to false to disable this control
+	this.enabled = true;
+
+	// "target" sets the location of focus, where the object orbits around
+	this.target = new THREE.Vector3();
+
+	// How far you can dolly in and out ( PerspectiveCamera only )
+	this.minDistance = 0;
+	this.maxDistance = Infinity;
+
+	// How far you can zoom in and out ( OrthographicCamera only )
+	this.minZoom = 0;
+	this.maxZoom = Infinity;
+
+	// How far you can orbit vertically, upper and lower limits.
+	// Range is 0 to Math.PI radians.
+	this.minPolarAngle = 0; // radians
+	this.maxPolarAngle = Math.PI; // radians
+
+	// How far you can orbit horizontally, upper and lower limits.
+	// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
+	this.minAzimuthAngle = - Infinity; // radians
+	this.maxAzimuthAngle = Infinity; // radians
+
+	// Set to true to enable damping (inertia)
+	// If damping is enabled, you must call controls.update() in your animation loop
+	this.enableDamping = false;
+	this.dampingFactor = 0.25;
+
+	// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
+	// Set to false to disable zooming
+	this.enableZoom = true;
+	this.zoomSpeed = 1.0;
+
+	// Set to false to disable rotating
+	this.enableRotate = true;
+	this.rotateSpeed = 1.0;
+
+	// Set to false to disable panning
+	this.enablePan = true;
+	this.keyPanSpeed = 7.0;	// pixels moved per arrow key push
+
+	// Set to true to automatically rotate around the target
+	// If auto-rotate is enabled, you must call controls.update() in your animation loop
+	this.autoRotate = false;
+	this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
+
+	// Set to false to disable use of the keys
+	this.enableKeys = true;
+
+	// The four arrow keys
+	this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
+
+	// Mouse buttons
+	this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
+
+	// for reset
+	this.target0 = this.target.clone();
+	this.position0 = this.object.position.clone();
+	this.zoom0 = this.object.zoom;
+
+	//
+	// public methods
+	//
+
+	this.getPolarAngle = function () {
+
+		return spherical.phi;
+
+	};
+
+	this.getAzimuthalAngle = function () {
+
+		return spherical.theta;
+
+	};
+
+	this.saveState = function () {
+
+		scope.target0.copy( scope.target );
+		scope.position0.copy( scope.object.position );
+		scope.zoom0 = scope.object.zoom;
+
+	};
+
+	this.reset = function () {
+
+		scope.target.copy( scope.target0 );
+		scope.object.position.copy( scope.position0 );
+		scope.object.zoom = scope.zoom0;
+
+		scope.object.updateProjectionMatrix();
+		scope.dispatchEvent( changeEvent );
+
+		scope.update();
+
+		state = STATE.NONE;
+
+	};
+
+	// this method is exposed, but perhaps it would be better if we can make it private...
+	this.update = function () {
+
+		var offset = new THREE.Vector3();
+
+		// so camera.up is the orbit axis
+		var quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) );
+		var quatInverse = quat.clone().inverse();
+
+		var lastPosition = new THREE.Vector3();
+		var lastQuaternion = new THREE.Quaternion();
+
+		return function update() {
+
+			var position = scope.object.position;
+
+			offset.copy( position ).sub( scope.target );
+
+			// rotate offset to "y-axis-is-up" space
+			offset.applyQuaternion( quat );
+
+			// angle from z-axis around y-axis
+			spherical.setFromVector3( offset );
+
+			if ( scope.autoRotate && state === STATE.NONE ) {
+
+				rotateLeft( getAutoRotationAngle() );
+
+			}
+
+			spherical.theta += sphericalDelta.theta;
+			spherical.phi += sphericalDelta.phi;
+
+			// restrict theta to be between desired limits
+			spherical.theta = Math.max( scope.minAzimuthAngle, Math.min( scope.maxAzimuthAngle, spherical.theta ) );
+
+			// restrict phi to be between desired limits
+			spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
+
+			spherical.makeSafe();
+
+
+			spherical.radius *= scale;
+
+			// restrict radius to be between desired limits
+			spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
+
+			// move target to panned location
+			scope.target.add( panOffset );
+
+			offset.setFromSpherical( spherical );
+
+			// rotate offset back to "camera-up-vector-is-up" space
+			offset.applyQuaternion( quatInverse );
+
+			position.copy( scope.target ).add( offset );
+
+			scope.object.lookAt( scope.target );
+
+			if ( scope.enableDamping === true ) {
+
+				sphericalDelta.theta *= ( 1 - scope.dampingFactor );
+				sphericalDelta.phi *= ( 1 - scope.dampingFactor );
+
+			} else {
+
+				sphericalDelta.set( 0, 0, 0 );
+
+			}
+
+			scale = 1;
+			panOffset.set( 0, 0, 0 );
+
+			// update condition is:
+			// min(camera displacement, camera rotation in radians)^2 > EPS
+			// using small-angle approximation cos(x/2) = 1 - x^2 / 8
+
+			if ( zoomChanged ||
+				lastPosition.distanceToSquared( scope.object.position ) > EPS ||
+				8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
+
+				scope.dispatchEvent( changeEvent );
+
+				lastPosition.copy( scope.object.position );
+				lastQuaternion.copy( scope.object.quaternion );
+				zoomChanged = false;
+
+				return true;
+
+			}
+
+			return false;
+
+		};
+
+	}();
+
+	this.dispose = function () {
+
+		scope.domElement.removeEventListener( 'contextmenu', onContextMenu, false );
+		scope.domElement.removeEventListener( 'mousedown', onMouseDown, false );
+		scope.domElement.removeEventListener( 'wheel', onMouseWheel, false );
+
+		scope.domElement.removeEventListener( 'touchstart', onTouchStart, false );
+		scope.domElement.removeEventListener( 'touchend', onTouchEnd, false );
+		scope.domElement.removeEventListener( 'touchmove', onTouchMove, false );
+
+		document.removeEventListener( 'mousemove', onMouseMove, false );
+		document.removeEventListener( 'mouseup', onMouseUp, false );
+
+		window.removeEventListener( 'keydown', onKeyDown, false );
+
+		//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
+
+	};
+
+	//
+	// internals
+	//
+
+	var scope = this;
+
+	var changeEvent = { type: 'change' };
+	var startEvent = { type: 'start' };
+	var endEvent = { type: 'end' };
+
+	var STATE = { NONE: - 1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 };
+
+	var state = STATE.NONE;
+
+	var EPS = 0.000001;
+
+	// current position in spherical coordinates
+	var spherical = new THREE.Spherical();
+	var sphericalDelta = new THREE.Spherical();
+
+	var scale = 1;
+	var panOffset = new THREE.Vector3();
+	var zoomChanged = false;
+
+	var rotateStart = new THREE.Vector2();
+	var rotateEnd = new THREE.Vector2();
+	var rotateDelta = new THREE.Vector2();
+
+	var panStart = new THREE.Vector2();
+	var panEnd = new THREE.Vector2();
+	var panDelta = new THREE.Vector2();
+
+	var dollyStart = new THREE.Vector2();
+	var dollyEnd = new THREE.Vector2();
+	var dollyDelta = new THREE.Vector2();
+
+	function getAutoRotationAngle() {
+
+		return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
+
+	}
+
+	function getZoomScale() {
+
+		return Math.pow( 0.95, scope.zoomSpeed );
+
+	}
+
+	function rotateLeft( angle ) {
+
+		sphericalDelta.theta -= angle;
+
+	}
+
+	function rotateUp( angle ) {
+
+		sphericalDelta.phi -= angle;
+
+	}
+
+	var panLeft = function () {
+
+		var v = new THREE.Vector3();
+
+		return function panLeft( distance, objectMatrix ) {
+
+			v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
+			v.multiplyScalar( - distance );
+
+			panOffset.add( v );
+
+		};
+
+	}();
+
+	var panUp = function () {
+
+		var v = new THREE.Vector3();
+
+		return function panUp( distance, objectMatrix ) {
+
+			v.setFromMatrixColumn( objectMatrix, 1 ); // get Y column of objectMatrix
+			v.multiplyScalar( distance );
+
+			panOffset.add( v );
+
+		};
+
+	}();
+
+	// deltaX and deltaY are in pixels; right and down are positive
+	var pan = function () {
+
+		var offset = new THREE.Vector3();
+
+		return function pan( deltaX, deltaY ) {
+
+			var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
+
+			if ( scope.object.isPerspectiveCamera ) {
+
+				// perspective
+				var position = scope.object.position;
+				offset.copy( position ).sub( scope.target );
+				var targetDistance = offset.length();
+
+				// half of the fov is center to top of screen
+				targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
+
+				// we actually don't use screenWidth, since perspective camera is fixed to screen height
+				panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
+				panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
+
+			} else if ( scope.object.isOrthographicCamera ) {
+
+				// orthographic
+				panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
+				panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
+
+			} else {
+
+				// camera neither orthographic nor perspective
+				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
+				scope.enablePan = false;
+
+			}
+
+		};
+
+	}();
+
+	function dollyIn( dollyScale ) {
+
+		if ( scope.object.isPerspectiveCamera ) {
+
+			scale /= dollyScale;
+
+		} else if ( scope.object.isOrthographicCamera ) {
+
+			scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) );
+			scope.object.updateProjectionMatrix();
+			zoomChanged = true;
+
+		} else {
+
+			console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
+			scope.enableZoom = false;
+
+		}
+
+	}
+
+	function dollyOut( dollyScale ) {
+
+		if ( scope.object.isPerspectiveCamera ) {
+
+			scale *= dollyScale;
+
+		} else if ( scope.object.isOrthographicCamera ) {
+
+			scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) );
+			scope.object.updateProjectionMatrix();
+			zoomChanged = true;
+
+		} else {
+
+			console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
+			scope.enableZoom = false;
+
+		}
+
+	}
+
+	//
+	// event callbacks - update the object state
+	//
+
+	function handleMouseDownRotate( event ) {
+
+		//console.log( 'handleMouseDownRotate' );
+
+		rotateStart.set( event.clientX, event.clientY );
+
+	}
+
+	function handleMouseDownDolly( event ) {
+
+		//console.log( 'handleMouseDownDolly' );
+
+		dollyStart.set( event.clientX, event.clientY );
+
+	}
+
+	function handleMouseDownPan( event ) {
+
+		//console.log( 'handleMouseDownPan' );
+
+		panStart.set( event.clientX, event.clientY );
+
+	}
+
+	function handleMouseMoveRotate( event ) {
+
+		//console.log( 'handleMouseMoveRotate' );
+
+		rotateEnd.set( event.clientX, event.clientY );
+		rotateDelta.subVectors( rotateEnd, rotateStart );
+
+		var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
+
+		// rotating across whole screen goes 360 degrees around
+		rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
+
+		// rotating up and down along whole screen attempts to go 360, but limited to 180
+		rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
+
+		rotateStart.copy( rotateEnd );
+
+		scope.update();
+
+	}
+
+	function handleMouseMoveDolly( event ) {
+
+		//console.log( 'handleMouseMoveDolly' );
+
+		dollyEnd.set( event.clientX, event.clientY );
+
+		dollyDelta.subVectors( dollyEnd, dollyStart );
+
+		if ( dollyDelta.y > 0 ) {
+
+			dollyIn( getZoomScale() );
+
+		} else if ( dollyDelta.y < 0 ) {
+
+			dollyOut( getZoomScale() );
+
+		}
+
+		dollyStart.copy( dollyEnd );
+
+		scope.update();
+
+	}
+
+	function handleMouseMovePan( event ) {
+
+		//console.log( 'handleMouseMovePan' );
+
+		panEnd.set( event.clientX, event.clientY );
+
+		panDelta.subVectors( panEnd, panStart );
+
+		pan( panDelta.x, panDelta.y );
+
+		panStart.copy( panEnd );
+
+		scope.update();
+
+	}
+
+	function handleMouseUp( event ) {
+
+		// console.log( 'handleMouseUp' );
+
+	}
+
+	function handleMouseWheel( event ) {
+
+		// console.log( 'handleMouseWheel' );
+
+		if ( event.deltaY < 0 ) {
+
+			dollyOut( getZoomScale() );
+
+		} else if ( event.deltaY > 0 ) {
+
+			dollyIn( getZoomScale() );
+
+		}
+
+		scope.update();
+
+	}
+
+	function handleKeyDown( event ) {
+
+		//console.log( 'handleKeyDown' );
+
+		switch ( event.keyCode ) {
+
+			case scope.keys.UP:
+				pan( 0, scope.keyPanSpeed );
+				scope.update();
+				break;
+
+			case scope.keys.BOTTOM:
+				pan( 0, - scope.keyPanSpeed );
+				scope.update();
+				break;
+
+			case scope.keys.LEFT:
+				pan( scope.keyPanSpeed, 0 );
+				scope.update();
+				break;
+
+			case scope.keys.RIGHT:
+				pan( - scope.keyPanSpeed, 0 );
+				scope.update();
+				break;
+
+		}
+
+	}
+
+	function handleTouchStartRotate( event ) {
+
+		//console.log( 'handleTouchStartRotate' );
+
+		rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
+
+	}
+
+	function handleTouchStartDolly( event ) {
+
+		//console.log( 'handleTouchStartDolly' );
+
+		var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
+		var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
+
+		var distance = Math.sqrt( dx * dx + dy * dy );
+
+		dollyStart.set( 0, distance );
+
+	}
+
+	function handleTouchStartPan( event ) {
+
+		//console.log( 'handleTouchStartPan' );
+
+		panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
+
+	}
+
+	function handleTouchMoveRotate( event ) {
+
+		//console.log( 'handleTouchMoveRotate' );
+
+		rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
+		rotateDelta.subVectors( rotateEnd, rotateStart );
+
+		var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
+
+		// rotating across whole screen goes 360 degrees around
+		rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
+
+		// rotating up and down along whole screen attempts to go 360, but limited to 180
+		rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
+
+		rotateStart.copy( rotateEnd );
+
+		scope.update();
+
+	}
+
+	function handleTouchMoveDolly( event ) {
+
+		//console.log( 'handleTouchMoveDolly' );
+
+		var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
+		var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
+
+		var distance = Math.sqrt( dx * dx + dy * dy );
+
+		dollyEnd.set( 0, distance );
+
+		dollyDelta.subVectors( dollyEnd, dollyStart );
+
+		if ( dollyDelta.y > 0 ) {
+
+			dollyOut( getZoomScale() );
+
+		} else if ( dollyDelta.y < 0 ) {
+
+			dollyIn( getZoomScale() );
+
+		}
+
+		dollyStart.copy( dollyEnd );
+
+		scope.update();
+
+	}
+
+	function handleTouchMovePan( event ) {
+
+		//console.log( 'handleTouchMovePan' );
+
+		panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
+
+		panDelta.subVectors( panEnd, panStart );
+
+		pan( panDelta.x, panDelta.y );
+
+		panStart.copy( panEnd );
+
+		scope.update();
+
+	}
+
+	function handleTouchEnd( event ) {
+
+		//console.log( 'handleTouchEnd' );
+
+	}
+
+	//
+	// event handlers - FSM: listen for events and reset state
+	//
+
+	function onMouseDown( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		event.preventDefault();
+
+		switch ( event.button ) {
+
+			case scope.mouseButtons.ORBIT:
+
+				if ( scope.enableRotate === false ) return;
+
+				handleMouseDownRotate( event );
+
+				state = STATE.ROTATE;
+
+				break;
+
+			case scope.mouseButtons.ZOOM:
+
+				if ( scope.enableZoom === false ) return;
+
+				handleMouseDownDolly( event );
+
+				state = STATE.DOLLY;
+
+				break;
+
+			case scope.mouseButtons.PAN:
+
+				if ( scope.enablePan === false ) return;
+
+				handleMouseDownPan( event );
+
+				state = STATE.PAN;
+
+				break;
+
+		}
+
+		if ( state !== STATE.NONE ) {
+
+			document.addEventListener( 'mousemove', onMouseMove, false );
+			document.addEventListener( 'mouseup', onMouseUp, false );
+
+			scope.dispatchEvent( startEvent );
+
+		}
+
+	}
+
+	function onMouseMove( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		event.preventDefault();
+
+		switch ( state ) {
+
+			case STATE.ROTATE:
+
+				if ( scope.enableRotate === false ) return;
+
+				handleMouseMoveRotate( event );
+
+				break;
+
+			case STATE.DOLLY:
+
+				if ( scope.enableZoom === false ) return;
+
+				handleMouseMoveDolly( event );
+
+				break;
+
+			case STATE.PAN:
+
+				if ( scope.enablePan === false ) return;
+
+				handleMouseMovePan( event );
+
+				break;
+
+		}
+
+	}
+
+	function onMouseUp( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		handleMouseUp( event );
+
+		document.removeEventListener( 'mousemove', onMouseMove, false );
+		document.removeEventListener( 'mouseup', onMouseUp, false );
+
+		scope.dispatchEvent( endEvent );
+
+		state = STATE.NONE;
+
+	}
+
+	function onMouseWheel( event ) {
+
+		if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		handleMouseWheel( event );
+
+		scope.dispatchEvent( startEvent ); // not sure why these are here...
+		scope.dispatchEvent( endEvent );
+
+	}
+
+	function onKeyDown( event ) {
+
+		if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return;
+
+		handleKeyDown( event );
+
+	}
+
+	function onTouchStart( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		switch ( event.touches.length ) {
+
+			case 1:	// one-fingered touch: rotate
+
+				if ( scope.enableRotate === false ) return;
+
+				handleTouchStartRotate( event );
+
+				state = STATE.TOUCH_ROTATE;
+
+				break;
+
+			case 2:	// two-fingered touch: dolly
+
+				if ( scope.enableZoom === false ) return;
+
+				handleTouchStartDolly( event );
+
+				state = STATE.TOUCH_DOLLY;
+
+				break;
+
+			case 3: // three-fingered touch: pan
+
+				if ( scope.enablePan === false ) return;
+
+				handleTouchStartPan( event );
+
+				state = STATE.TOUCH_PAN;
+
+				break;
+
+			default:
+
+				state = STATE.NONE;
+
+		}
+
+		if ( state !== STATE.NONE ) {
+
+			scope.dispatchEvent( startEvent );
+
+		}
+
+	}
+
+	function onTouchMove( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		switch ( event.touches.length ) {
+
+			case 1: // one-fingered touch: rotate
+
+				if ( scope.enableRotate === false ) return;
+				if ( state !== STATE.TOUCH_ROTATE ) return; // is this needed?...
+
+				handleTouchMoveRotate( event );
+
+				break;
+
+			case 2: // two-fingered touch: dolly
+
+				if ( scope.enableZoom === false ) return;
+				if ( state !== STATE.TOUCH_DOLLY ) return; // is this needed?...
+
+				handleTouchMoveDolly( event );
+
+				break;
+
+			case 3: // three-fingered touch: pan
+
+				if ( scope.enablePan === false ) return;
+				if ( state !== STATE.TOUCH_PAN ) return; // is this needed?...
+
+				handleTouchMovePan( event );
+
+				break;
+
+			default:
+
+				state = STATE.NONE;
+
+		}
+
+	}
+
+	function onTouchEnd( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		handleTouchEnd( event );
+
+		scope.dispatchEvent( endEvent );
+
+		state = STATE.NONE;
+
+	}
+
+	function onContextMenu( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		event.preventDefault();
+
+	}
+
+	//
+
+	scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );
+
+	scope.domElement.addEventListener( 'mousedown', onMouseDown, false );
+	scope.domElement.addEventListener( 'wheel', onMouseWheel, false );
+
+	scope.domElement.addEventListener( 'touchstart', onTouchStart, false );
+	scope.domElement.addEventListener( 'touchend', onTouchEnd, false );
+	scope.domElement.addEventListener( 'touchmove', onTouchMove, false );
+
+	window.addEventListener( 'keydown', onKeyDown, false );
+
+	// force an update at start
+
+	this.update();
+
+};
+
+THREE.OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype );
+THREE.OrbitControls.prototype.constructor = THREE.OrbitControls;
+
+Object.defineProperties( THREE.OrbitControls.prototype, {
+
+	center: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .center has been renamed to .target' );
+			return this.target;
+
+		}
+
+	},
+
+	// backward compatibility
+
+	noZoom: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
+			return ! this.enableZoom;
+
+		},
+
+		set: function ( value ) {
+
+			console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
+			this.enableZoom = ! value;
+
+		}
+
+	},
+
+	noRotate: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
+			return ! this.enableRotate;
+
+		},
+
+		set: function ( value ) {
+
+			console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
+			this.enableRotate = ! value;
+
+		}
+
+	},
+
+	noPan: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
+			return ! this.enablePan;
+
+		},
+
+		set: function ( value ) {
+
+			console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
+			this.enablePan = ! value;
+
+		}
+
+	},
+
+	noKeys: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
+			return ! this.enableKeys;
+
+		},
+
+		set: function ( value ) {
+
+			console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
+			this.enableKeys = ! value;
+
+		}
+
+	},
+
+	staticMoving: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
+			return ! this.enableDamping;
+
+		},
+
+		set: function ( value ) {
+
+			console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
+			this.enableDamping = ! value;
+
+		}
+
+	},
+
+	dynamicDampingFactor: {
+
+		get: function () {
+
+			console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
+			return this.dampingFactor;
+
+		},
+
+		set: function ( value ) {
+
+			console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
+			this.dampingFactor = value;
+
+		}
+
+	}
+
+} );
\ No newline at end of file
diff --git a/spider-verse-dots/README.markdown b/spider-verse-dots/README.markdown
new file mode 100644
index 0000000..94a967c
--- /dev/null
+++ b/spider-verse-dots/README.markdown
@@ -0,0 +1,5 @@
+# Spider-verse dots
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/loficodes/pen/GawXVz](https://codepen.io/loficodes/pen/GawXVz).
+
+
diff --git a/spider-verse-dots/dist/index.html b/spider-verse-dots/dist/index.html
new file mode 100644
index 0000000..8ad312e
--- /dev/null
+++ b/spider-verse-dots/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Spider-verse dots</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canvas"></canvas>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/spider-verse-dots/dist/script.js b/spider-verse-dots/dist/script.js
new file mode 100644
index 0000000..47e3c80
--- /dev/null
+++ b/spider-verse-dots/dist/script.js
@@ -0,0 +1,128 @@
+window.onload = function () {
+  var canvas = document.getElementById("canvas"),
+  ctx = canvas.getContext("2d"),
+  width = canvas.width = window.innerWidth,
+  height = canvas.height = window.innerHeight,
+  maxDimension = Math.min(width, height) * .9,
+  xStart = (width - maxDimension) / 2,
+  yStart = (height - maxDimension) / 2,
+  circleCount = 9,
+  gap = maxDimension / circleCount,
+  radiusMin = 10,
+  radiusMax = 30,
+  offsetMin = 2,
+  offsetMax = 50,
+  points = [],
+  mouse = {
+    x: 500,
+    y: 500,
+    radius: 100 };
+
+
+  // MOUSE EVENTS
+  var setMousePosition = function (e) {
+    e = e || window.event;
+    mouse.x = e.pageX;
+    mouse.y = e.pageY;
+  };
+  document.addEventListener('mousemove', setMousePosition);
+
+  // TOUCH EVENTS
+  var setTouchPosition = function (e) {
+    var touchobj = e.changedTouches[0];
+    mouse.x = parseInt(touchobj.clientX);
+    mouse.y = parseInt(touchobj.clientY);
+    e.preventDefault();
+  };
+  document.addEventListener('touchstart', setTouchPosition);
+  document.addEventListener('touchmove', setTouchPosition);
+  document.addEventListener('touchend', setTouchPosition);
+
+  // UTILS
+  var norm = function (value, min, max) {
+    return (value - min) / (max - min);
+  };
+  var lerp = function (norm, min, max) {
+    return (max - min) * norm + min;
+  };
+  var map = function (value, sourceMin, sourceMax, destMin, destMax) {
+    return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
+  };
+  var clamp = function (value, min, max) {
+    return Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max));
+  };
+  var distance = function (p0, p1) {
+    var dx = p0.x - p1.x,
+    dy = p0.y - p1.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  };
+  var distanceXY = function (x0, y0, x1, y1) {
+    var dx = x0 - x1,
+    dy = y0 - y1;
+    return Math.sqrt(dx * dx + dy * dy);
+  };
+  var circleCollision = function (c0, c1) {
+    return distance(c0, c1) <= c0.radius + c1.radius;
+  };
+  var circlePointCollision = function (x, y, circle) {
+    return distanceXY(x, y, circle.x, circle.y) < circle.radius;
+  };
+  var getPosition = function (angle, length) {
+    return {
+      x: Math.cos(angle) * length,
+      y: Math.sin(angle) * length };
+
+  };
+
+  // create points
+  for (var i = 0; i <= circleCount; i++) {
+    for (var j = 0; j <= circleCount; j++) {
+      for (var k = 0; k < 3; k++) {
+        var color = '#f00';
+        if (k == 1) color = '#0f0';
+        if (k == 2) color = '#00f';
+        points.push({
+          x: xStart + gap * i,
+          y: yStart + gap * j,
+          color: color,
+          angle: Math.random() * Math.PI * 2 });
+
+      }
+    }
+  }
+
+  // update
+  var update = function () {
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = '#111';
+    ctx.fillRect(0, 0, width, height);
+    // set color mode
+    ctx.globalCompositeOperation = 'color-dodge';
+    for (var point in points) {
+      var p = points[point],
+      nearMouse = circlePointCollision(p.x, p.y, mouse),
+      radius = radiusMin,
+      distanceBetween = 0,
+      pos = {},
+      offset = offsetMin;
+      if (nearMouse) {
+        distanceBetween = distance(p, mouse);
+        radius = lerp(
+        distanceBetween / mouse.radius,
+        radiusMax, radiusMin);
+        offset = lerp(
+        distanceBetween / mouse.radius,
+        offsetMax, offsetMin);
+      }
+      pos = getPosition(p.angle, offset);
+
+      ctx.fillStyle = p.color;
+      ctx.beginPath();
+      ctx.arc(p.x + pos.x, p.y + pos.y, radius, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    requestAnimationFrame(update);
+  };
+  update();
+};
\ No newline at end of file
diff --git a/spider-verse-dots/dist/style.css b/spider-verse-dots/dist/style.css
new file mode 100644
index 0000000..397abad
--- /dev/null
+++ b/spider-verse-dots/dist/style.css
@@ -0,0 +1,7 @@
+html, body {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+}
\ No newline at end of file
diff --git a/spider-verse-dots/license.txt b/spider-verse-dots/license.txt
new file mode 100644
index 0000000..902e664
--- /dev/null
+++ b/spider-verse-dots/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by LoFi (https://codepen.io/loficodes/pen/GawXVz)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/spider-verse-dots/src/index.html b/spider-verse-dots/src/index.html
new file mode 100644
index 0000000..30325df
--- /dev/null
+++ b/spider-verse-dots/src/index.html
@@ -0,0 +1 @@
+<canvas id="canvas"></canvas>
\ No newline at end of file
diff --git a/spider-verse-dots/src/script.babel b/spider-verse-dots/src/script.babel
new file mode 100644
index 0000000..7f3c763
--- /dev/null
+++ b/spider-verse-dots/src/script.babel
@@ -0,0 +1,128 @@
+window.onload = function() {
+	var canvas = document.getElementById("canvas"),
+			ctx = canvas.getContext("2d"),
+			width = canvas.width = window.innerWidth,
+			height = canvas.height = window.innerHeight,
+			maxDimension = Math.min(width, height) * .9,
+			xStart = (width - maxDimension) /2,
+			yStart = (height - maxDimension) /2,
+			circleCount = 9,
+			gap = maxDimension / circleCount,
+			radiusMin = 10,
+			radiusMax = 30,
+			offsetMin = 2,
+			offsetMax = 50,
+			points = [],
+			mouse = {
+				x: 500,
+				y: 500,
+				radius: 100
+			};
+	
+	// MOUSE EVENTS
+	var setMousePosition = function(e){
+		e = e || window.event;
+		mouse.x = e.pageX;
+		mouse.y = e.pageY;
+	}
+	document.addEventListener('mousemove', setMousePosition);
+	
+	// TOUCH EVENTS
+	var setTouchPosition = function(e) {
+		var touchobj = e.changedTouches[0];
+		mouse.x = parseInt(touchobj.clientX);
+		mouse.y = parseInt(touchobj.clientY);
+		e.preventDefault();
+	}
+	document.addEventListener('touchstart', setTouchPosition);
+	document.addEventListener('touchmove', setTouchPosition);
+	document.addEventListener('touchend', setTouchPosition);
+	
+	// UTILS
+	var norm = function ( value, min, max ) {
+			return (value - min) / (max - min);
+	};
+	var lerp = function ( norm, min, max ) {
+			return (max-min) * norm + min;
+	};
+	var map = function(value, sourceMin, sourceMax, destMin, destMax) {
+			return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
+};
+	var clamp = function (value, min, max) {
+        return Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max));
+	};
+	var distance = function(p0, p1) {
+        var dx = p0.x - p1.x,
+            dy = p0.y - p1.y;
+        return Math.sqrt(dx*dx + dy*dy);
+	};
+	var distanceXY = function(x0, y0, x1, y1) {
+        var dx = x0 - x1,
+            dy = y0 - y1;
+        return Math.sqrt(dx*dx + dy*dy);
+	};
+	var circleCollision = function(c0, c1){
+        return distance(c0, c1) <= c0.radius + c1.radius;
+	};
+	var circlePointCollision = function(x, y, circle) {
+        return distanceXY(x, y, circle.x, circle.y) < circle.radius;
+};
+	var getPosition = function(angle, length) {
+			return {
+				x: Math.cos(angle) * length,
+				y: Math.sin(angle) * length
+		}
+	}
+	
+	// create points
+	for( var i = 0; i <= circleCount; i++ ) {
+		for( var j = 0; j <= circleCount; j++ ) {
+			for ( var k =0; k < 3; k++ ) {
+				var color = '#f00';	
+				if ( k == 1 ) color = '#0f0';
+				if ( k == 2 ) color = '#00f';
+				points.push({
+					x: xStart + (gap * i),
+					y: yStart + (gap * j),
+					color: color,
+					angle: Math.random() * Math.PI*2
+				});
+			}
+		}
+	}
+	
+	// update
+	var update = function () {
+		ctx.clearRect(0,0,width,height);
+		ctx.fillStyle = '#111';
+		ctx.fillRect(0, 0, width, height);
+		// set color mode
+		ctx.globalCompositeOperation = 'color-dodge';
+		for ( var point in points ) {
+			var p = points[point],
+					nearMouse = circlePointCollision(p.x, p.y, mouse),
+					radius = radiusMin,
+					distanceBetween = 0,
+					pos = {},
+					offset = offsetMin;
+			if ( nearMouse ) {
+				distanceBetween = distance(p, mouse);
+				radius = lerp(
+					distanceBetween / mouse.radius,
+					radiusMax, radiusMin);
+				offset = lerp(
+					distanceBetween / mouse.radius,
+					offsetMax, offsetMin);
+			}
+			pos = getPosition(p.angle, offset);
+			
+			ctx.fillStyle = p.color;			
+			ctx.beginPath();
+			ctx.arc(p.x + pos.x, p.y + pos.y, radius,0, Math.PI*2);
+			ctx.fill();
+		}
+		
+		requestAnimationFrame(update)
+	}
+	update()
+}
\ No newline at end of file
diff --git a/spider-verse-dots/src/style.scss b/spider-verse-dots/src/style.scss
new file mode 100644
index 0000000..648178f
--- /dev/null
+++ b/spider-verse-dots/src/style.scss
@@ -0,0 +1,6 @@
+html, body {
+	margin: 0;
+}
+canvas {
+	display: block;
+}
\ No newline at end of file
diff --git a/spiral-fractal-experiment-v2/README.markdown b/spiral-fractal-experiment-v2/README.markdown
new file mode 100644
index 0000000..86df133
--- /dev/null
+++ b/spiral-fractal-experiment-v2/README.markdown
@@ -0,0 +1,5 @@
+# Spiral fractal experiment v2
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/franksLaboratory/pen/jOaVMwX](https://codepen.io/franksLaboratory/pen/jOaVMwX).
+
+
diff --git a/spiral-fractal-experiment-v2/dist/index.html b/spiral-fractal-experiment-v2/dist/index.html
new file mode 100644
index 0000000..52c67ac
--- /dev/null
+++ b/spiral-fractal-experiment-v2/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Spiral fractal experiment v2</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id='canvas2'></canvas>
+<canvas id='canvas1'></canvas>
+<p id='info'>Refresh page to generate new fractal shape, if your randomised fractal is more complex, the initial load can take a couple of seconds! <a href='https://www.youtube.com/frankslaboratory' target='_blank'>youtube.com/frankslaboratory</a></p>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/spiral-fractal-experiment-v2/dist/script.js b/spiral-fractal-experiment-v2/dist/script.js
new file mode 100644
index 0000000..879c20e
--- /dev/null
+++ b/spiral-fractal-experiment-v2/dist/script.js
@@ -0,0 +1,162 @@
+window.addEventListener('load', function(){
+    const canvas = document.getElementById('canvas1');
+    const ctx = canvas.getContext('2d');
+    canvas.width = 900;
+    canvas.height = 900;
+    // canvas settings
+    ctx.lineCap = 'round';
+    ctx.shadowColor = 'rgba(0,0,0,0.7)';
+    ctx.shadowOffsetX = 10;
+    ctx.shadowOffsetY = 5;
+    ctx.shadowBlur = 10;
+
+    const canvas2 = document.getElementById('canvas2');
+    const ctx2 = canvas2.getContext('2d');
+    canvas2.width = window.innerWidth;
+    canvas2.height = window.innerHeight;
+
+    class Fractal {
+        constructor(canvasWidth, canvasHeight){
+            this.canvasWidth = canvasWidth;
+            this.canvasHeight = canvasHeight;
+            this.size = this.canvasWidth < this.canvasHeight ? this.canvasHeight * 0.3 : this.canvasHeight * 0.3;
+            this.maxLevel = 5;
+            this.scale = 0.8;
+            this.branches = Math.random() * 3 + 1;
+            this.spread = Math.random() * 1 - 0.5;
+            this.color = 'hsl(' + Math.random() * 360 + ', 100%, 50%)';
+            this.lineWidth = 6;
+            this.sides = Math.floor(Math.random() * 4 + 3);
+            this.skew1 = 1;
+            this.skew2 = 1;
+            this.center = 0;
+        }
+        #drawBranch(level, context){
+        if (level > this.maxLevel) return;
+        context.beginPath();
+        context.moveTo(0,0);
+        context.lineTo(this.size, 0);
+        context.stroke();
+
+            context.save();
+
+            context.translate(this.size * 0.1, 0);
+            context.scale(this.scale, this.scale);
+            context.save();
+            context.rotate(this.spread * this.skew1);
+            this.#drawBranch(level + 1, context);
+            context.restore();
+            context.restore();
+
+            context.save();
+            context.translate(this.size * 0.5, 0);
+            context.scale(this.scale * 0.4, this.scale * 0.4);
+            context.save();
+            context.rotate(this.spread * this.skew1 * 1.5);
+            this.#drawBranch(level + 1, context);
+            context.restore();
+            context.restore();
+
+            context.save();
+            context.translate(this.size * 0.6, 0);
+            context.scale(this.scale * 0.3, this.scale * 0.3);
+            context.save();
+            context.rotate(this.spread * 0.5 * (this.skew1 * 2));
+            this.#drawBranch(level + 1, context);
+            context.restore();
+            context.restore();
+
+            context.beginPath();
+            context.arc(this.size * 1.1,0,this.size * 0.09, 0, Math.PI * 2);
+            context.fill();
+    }
+        draw(context){
+            context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+            context.strokeStyle =  this.color;
+            context.fillStyle =  this.color;
+            context.lineWidth = this.lineWidth;
+            context.save();
+            context.translate(this.canvasWidth/2, this.canvasHeight/2);
+            for (let i = 0; i < this.sides; i++){
+                context.rotate((Math.PI * 2)/this.sides);
+                this.#drawBranch(0, context);
+            }
+            context.restore();
+        }
+    }
+
+    class Rain {
+        constructor(canvasWidth, canvasHeight, image, ctx){
+            this.canvasWidth = canvasWidth;
+            this.canvasHeight = canvasHeight;
+            this.numberOfParticles = 10;
+            this.particles = [];
+            this.image = image;
+            this.ctx = ctx;
+            this.initialize()
+        }
+        initialize(){
+            for (let i = 0; i < this.numberOfParticles; i++){
+                this.particles.push(new Particle(this.canvasWidth, this.canvasHeight, this.image))
+            }
+        }
+        run(){
+            this.particles.forEach(particle => {
+                particle.draw(this.ctx);
+                particle.update();
+            });
+        }
+
+    }
+
+    class Particle {
+        constructor(canvasWidth, canvasHeight, image){
+            this.canvasWidth = canvasWidth;
+            this.canvasHeight = canvasHeight;
+            this.image = image;
+
+            this.sizeModifier = Math.random() * 0.4 + 0.1;
+            this.width = this.image.width * this.sizeModifier;
+            this.height = this.image.height * this.sizeModifier;
+            this.x = Math.random() * this.canvasWidth; 
+            this.y = Math.random() * this.canvasHeight;
+            this.speed = Math.random() * 1 + 1;
+            this.image = image;
+            this.angle = 0;
+            this.va = Math.random() * 0.05 - 0.025;
+
+        }
+        update(){
+            this.angle += this.va;
+            if (this.y < -this.height) {
+                this.y = this.canvasHeight + this.height;
+                this.x = Math.random() * (this.canvasWidth - this.width); 
+                this.angle = 0;
+            } else this.y -= this.speed;
+        }
+        draw(context){
+            context.save();
+            context.translate(this.x, this.y );
+            context.rotate(this.angle);
+            context.drawImage(this.image, -this.width/2, -this.height/2, this.width, this.height)
+            context.restore();
+        }
+    }
+    const fractal = new Fractal(canvas.width, canvas.height);
+    fractal.draw(ctx);
+    const fractalImage = new Image();
+    fractalImage.src = canvas.toDataURL();
+
+    fractalImage.onload = function(){
+        const rain = new Rain(canvas2.width, canvas2.height, fractalImage, ctx2);
+        rain.initialize();
+
+        function animate(){
+        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+        rain.run();
+        requestAnimationFrame(animate);
+    }
+    animate();
+    }
+
+})
\ No newline at end of file
diff --git a/spiral-fractal-experiment-v2/dist/style.css b/spiral-fractal-experiment-v2/dist/style.css
new file mode 100644
index 0000000..0e9ee53
--- /dev/null
+++ b/spiral-fractal-experiment-v2/dist/style.css
@@ -0,0 +1,70 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-size: 20px;
+    font-family: 'Cuprum', sans-serif;
+}
+#canvas1 {		
+position:absolute;
+top: 50%;
+left: 50%;
+    transform: translate(-50%,-50%);
+}
+#canvas2 {		
+position:absolute;
+top: 0;
+left: 0;
+    background: black;
+}
+#animationCanvas {		
+position:absolute;
+top: 0;
+left: 0;
+background: black;
+}
+#info {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 30%;
+    text-align: left;
+    padding: 30px;
+    font-size: 20px;
+}
+#info a {
+    font-size: 20px;
+}
+button {
+    padding: 10px 40px;
+    text-shadow: 1px 1px rgba(255,255,255,0.5);
+    width: 220px;
+    font-family: 'Lilita One', sans-serif;
+}
+#controls {
+    position: absolute;
+    padding: 10px;
+    left: 20px;
+    top: 20px;
+    width: 250px;
+    border: 2px solid black;
+    background: rgba(0,0,0,0.2);
+}
+#controlsHeader {
+    margin-top: 30px;
+    font-family: 'Lilita One', cursive;
+}
+#info {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 30%;
+    text-align: left;
+    padding: 30px;
+    font-size: 15px;
+  color: white;
+}
+#info a {
+    font-size: 15px;
+  color: magenta;
+}
\ No newline at end of file
diff --git a/spiral-fractal-experiment-v2/license.txt b/spiral-fractal-experiment-v2/license.txt
new file mode 100644
index 0000000..6eed6ef
--- /dev/null
+++ b/spiral-fractal-experiment-v2/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Frank (https://codepen.io/franksLaboratory/pen/jOaVMwX)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/spiral-fractal-experiment-v2/src/index.html b/spiral-fractal-experiment-v2/src/index.html
new file mode 100644
index 0000000..54b1625
--- /dev/null
+++ b/spiral-fractal-experiment-v2/src/index.html
@@ -0,0 +1,3 @@
+<canvas id='canvas2'></canvas>
+<canvas id='canvas1'></canvas>
+<p id='info'>Refresh page to generate new fractal shape, if your randomised fractal is more complex, the initial load can take a couple of seconds! <a href='https://www.youtube.com/frankslaboratory' target='_blank'>youtube.com/frankslaboratory</a></p>
\ No newline at end of file
diff --git a/spiral-fractal-experiment-v2/src/script.js b/spiral-fractal-experiment-v2/src/script.js
new file mode 100644
index 0000000..879c20e
--- /dev/null
+++ b/spiral-fractal-experiment-v2/src/script.js
@@ -0,0 +1,162 @@
+window.addEventListener('load', function(){
+    const canvas = document.getElementById('canvas1');
+    const ctx = canvas.getContext('2d');
+    canvas.width = 900;
+    canvas.height = 900;
+    // canvas settings
+    ctx.lineCap = 'round';
+    ctx.shadowColor = 'rgba(0,0,0,0.7)';
+    ctx.shadowOffsetX = 10;
+    ctx.shadowOffsetY = 5;
+    ctx.shadowBlur = 10;
+
+    const canvas2 = document.getElementById('canvas2');
+    const ctx2 = canvas2.getContext('2d');
+    canvas2.width = window.innerWidth;
+    canvas2.height = window.innerHeight;
+
+    class Fractal {
+        constructor(canvasWidth, canvasHeight){
+            this.canvasWidth = canvasWidth;
+            this.canvasHeight = canvasHeight;
+            this.size = this.canvasWidth < this.canvasHeight ? this.canvasHeight * 0.3 : this.canvasHeight * 0.3;
+            this.maxLevel = 5;
+            this.scale = 0.8;
+            this.branches = Math.random() * 3 + 1;
+            this.spread = Math.random() * 1 - 0.5;
+            this.color = 'hsl(' + Math.random() * 360 + ', 100%, 50%)';
+            this.lineWidth = 6;
+            this.sides = Math.floor(Math.random() * 4 + 3);
+            this.skew1 = 1;
+            this.skew2 = 1;
+            this.center = 0;
+        }
+        #drawBranch(level, context){
+        if (level > this.maxLevel) return;
+        context.beginPath();
+        context.moveTo(0,0);
+        context.lineTo(this.size, 0);
+        context.stroke();
+
+            context.save();
+
+            context.translate(this.size * 0.1, 0);
+            context.scale(this.scale, this.scale);
+            context.save();
+            context.rotate(this.spread * this.skew1);
+            this.#drawBranch(level + 1, context);
+            context.restore();
+            context.restore();
+
+            context.save();
+            context.translate(this.size * 0.5, 0);
+            context.scale(this.scale * 0.4, this.scale * 0.4);
+            context.save();
+            context.rotate(this.spread * this.skew1 * 1.5);
+            this.#drawBranch(level + 1, context);
+            context.restore();
+            context.restore();
+
+            context.save();
+            context.translate(this.size * 0.6, 0);
+            context.scale(this.scale * 0.3, this.scale * 0.3);
+            context.save();
+            context.rotate(this.spread * 0.5 * (this.skew1 * 2));
+            this.#drawBranch(level + 1, context);
+            context.restore();
+            context.restore();
+
+            context.beginPath();
+            context.arc(this.size * 1.1,0,this.size * 0.09, 0, Math.PI * 2);
+            context.fill();
+    }
+        draw(context){
+            context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+            context.strokeStyle =  this.color;
+            context.fillStyle =  this.color;
+            context.lineWidth = this.lineWidth;
+            context.save();
+            context.translate(this.canvasWidth/2, this.canvasHeight/2);
+            for (let i = 0; i < this.sides; i++){
+                context.rotate((Math.PI * 2)/this.sides);
+                this.#drawBranch(0, context);
+            }
+            context.restore();
+        }
+    }
+
+    class Rain {
+        constructor(canvasWidth, canvasHeight, image, ctx){
+            this.canvasWidth = canvasWidth;
+            this.canvasHeight = canvasHeight;
+            this.numberOfParticles = 10;
+            this.particles = [];
+            this.image = image;
+            this.ctx = ctx;
+            this.initialize()
+        }
+        initialize(){
+            for (let i = 0; i < this.numberOfParticles; i++){
+                this.particles.push(new Particle(this.canvasWidth, this.canvasHeight, this.image))
+            }
+        }
+        run(){
+            this.particles.forEach(particle => {
+                particle.draw(this.ctx);
+                particle.update();
+            });
+        }
+
+    }
+
+    class Particle {
+        constructor(canvasWidth, canvasHeight, image){
+            this.canvasWidth = canvasWidth;
+            this.canvasHeight = canvasHeight;
+            this.image = image;
+
+            this.sizeModifier = Math.random() * 0.4 + 0.1;
+            this.width = this.image.width * this.sizeModifier;
+            this.height = this.image.height * this.sizeModifier;
+            this.x = Math.random() * this.canvasWidth; 
+            this.y = Math.random() * this.canvasHeight;
+            this.speed = Math.random() * 1 + 1;
+            this.image = image;
+            this.angle = 0;
+            this.va = Math.random() * 0.05 - 0.025;
+
+        }
+        update(){
+            this.angle += this.va;
+            if (this.y < -this.height) {
+                this.y = this.canvasHeight + this.height;
+                this.x = Math.random() * (this.canvasWidth - this.width); 
+                this.angle = 0;
+            } else this.y -= this.speed;
+        }
+        draw(context){
+            context.save();
+            context.translate(this.x, this.y );
+            context.rotate(this.angle);
+            context.drawImage(this.image, -this.width/2, -this.height/2, this.width, this.height)
+            context.restore();
+        }
+    }
+    const fractal = new Fractal(canvas.width, canvas.height);
+    fractal.draw(ctx);
+    const fractalImage = new Image();
+    fractalImage.src = canvas.toDataURL();
+
+    fractalImage.onload = function(){
+        const rain = new Rain(canvas2.width, canvas2.height, fractalImage, ctx2);
+        rain.initialize();
+
+        function animate(){
+        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+        rain.run();
+        requestAnimationFrame(animate);
+    }
+    animate();
+    }
+
+})
\ No newline at end of file
diff --git a/spiral-fractal-experiment-v2/src/style.css b/spiral-fractal-experiment-v2/src/style.css
new file mode 100644
index 0000000..0e9ee53
--- /dev/null
+++ b/spiral-fractal-experiment-v2/src/style.css
@@ -0,0 +1,70 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-size: 20px;
+    font-family: 'Cuprum', sans-serif;
+}
+#canvas1 {		
+position:absolute;
+top: 50%;
+left: 50%;
+    transform: translate(-50%,-50%);
+}
+#canvas2 {		
+position:absolute;
+top: 0;
+left: 0;
+    background: black;
+}
+#animationCanvas {		
+position:absolute;
+top: 0;
+left: 0;
+background: black;
+}
+#info {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 30%;
+    text-align: left;
+    padding: 30px;
+    font-size: 20px;
+}
+#info a {
+    font-size: 20px;
+}
+button {
+    padding: 10px 40px;
+    text-shadow: 1px 1px rgba(255,255,255,0.5);
+    width: 220px;
+    font-family: 'Lilita One', sans-serif;
+}
+#controls {
+    position: absolute;
+    padding: 10px;
+    left: 20px;
+    top: 20px;
+    width: 250px;
+    border: 2px solid black;
+    background: rgba(0,0,0,0.2);
+}
+#controlsHeader {
+    margin-top: 30px;
+    font-family: 'Lilita One', cursive;
+}
+#info {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 30%;
+    text-align: left;
+    padding: 30px;
+    font-size: 15px;
+  color: white;
+}
+#info a {
+    font-size: 15px;
+  color: magenta;
+}
\ No newline at end of file
diff --git a/spirited-away-bathhouse-aburaya3d-css/README.markdown b/spirited-away-bathhouse-aburaya3d-css/README.markdown
new file mode 100644
index 0000000..547eea4
--- /dev/null
+++ b/spirited-away-bathhouse-aburaya3d-css/README.markdown
@@ -0,0 +1,5 @@
+# Spirited Away Bathhouse (Aburaya) - 3D CSS
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/GRMdwwG](https://codepen.io/cobra_winfrey/pen/GRMdwwG).
+
+
diff --git a/spirited-away-bathhouse-aburaya3d-css/dist/index.html b/spirited-away-bathhouse-aburaya3d-css/dist/index.html
new file mode 100644
index 0000000..00460bb
--- /dev/null
+++ b/spirited-away-bathhouse-aburaya3d-css/dist/index.html
@@ -0,0 +1,376 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Spirited Away Bathhouse (Aburaya) - 3D CSS</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div class='panel'></div>
+<div id='wrap'>
+  <div class='bridge'>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <div class='plank'>
+      <div class='rail'></div>
+      <div class='rail'></div>
+    </div>
+    <span class='noface'>
+      <div class='body'>
+        <div class='face'></div>
+      </div>
+    </span>
+  </div>
+  <div class='baseblock'>
+    <div class='side'></div>
+    <div class='side'></div>
+    <div class='side'></div>
+    <div class='side'></div>
+    <span class='tree'>
+      <div class='branch'></div>
+      <div class='branch'></div>
+      <div class='branch'></div>
+      <div class='branch'></div>
+      <div class='branch'></div>
+    </span>
+  </div>
+  <div class='baseblock'>
+    <div class='side'></div>
+    <div class='side'></div>
+    <div class='side'></div>
+    <div class='side'></div>
+    <span class='steps'>
+      <div class='step'></div>
+      <div class='step'></div>
+      <div class='step'></div>
+      <div class='step'></div>
+      <div class='step'></div>
+      <div class='step'></div>
+      <div class='step'></div>
+      <div class='step'></div>
+      <div class='step'></div>
+      <div class='step'></div>
+    </span>
+  </div>
+  <div class='center'>
+    <div class='side'>
+      <div class='topside'></div>
+      <span class='upper'>
+        <div class='rail'></div>
+        <div class='topsection'>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+        </div>
+      </span>
+    </div>
+    <div class='side'>
+      <div class='topside'></div>
+      <span class='upper'>
+        <div class='rail'></div>
+        <div class='topsection'>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+        </div>
+      </span>
+    </div>
+    <div class='side'>
+      <div class='topside'></div>
+      <span class='upper'>
+        <div class='rail'></div>
+        <div class='topsection'>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+        </div>
+      </span>
+    </div>
+    <div class='side'>
+      <div class='topside'></div>
+      <span class='upper'>
+        <div class='rail'></div>
+        <div class='topsection'>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+          <div class='roof'></div>
+        </div>
+      </span>
+    </div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <div class='plank'></div>
+    <span class='leaf'></span>
+    <span class='leaf'></span>
+    <span class='leaf'></span>
+    <span class='leaf'></span>
+    <span class='leaf'></span>
+  </div>
+  <div class='main'>
+    <div class='side'></div>
+    <div class='side'></div>
+    <div class='side'></div>
+    <div class='peak'>
+      <div class='peakside'></div>
+      <div class='peakside'></div>
+      <div class='peakside'></div>
+    </div>
+    <span class='window'>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+    </span>
+    <span class='window'>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+    </span>
+    <span class='window'>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+    </span>
+    <span class='window'>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+    </span>
+    <span class='window'>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+    </span>
+  </div>
+  <div class='rearblock'>
+    <div class='side'></div>
+    <div class='side'></div>
+    <div class='side'></div>
+  </div>
+  <div class='upperblock'>
+    <div class='side'></div>
+    <div class='side'></div>
+    <div class='side'></div>
+    <div class='side'></div>
+    <span class='window'>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+      <div class='windowside'></div>
+    </span>
+    <div class='roofblock'>
+      <div class='roofside'>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+        <div class='roofplank'></div>
+      </div>
+      <span class='tower'>
+        <div class='towerside'></div>
+        <div class='towerside'></div>
+        <div class='towerside'></div>
+        <div class='towerside'></div>
+        <div class='towerside'></div>
+        <div class='towerside'></div>
+        <div class='towerside'></div>
+        <div class='towerside'></div>
+      </span>
+      <span class='roofpeak'>
+        <div class='roof'></div>
+        <div class='roof'></div>
+      </span>
+    </div>
+  </div>
+  <div class='clouds'></div>
+  <div class='clouds'></div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/spirited-away-bathhouse-aburaya3d-css/dist/style.css b/spirited-away-bathhouse-aburaya3d-css/dist/style.css
new file mode 100644
index 0000000..9aa7ccb
--- /dev/null
+++ b/spirited-away-bathhouse-aburaya3d-css/dist/style.css
@@ -0,0 +1,3117 @@
+body {
+  --mouseX: 0;
+  --mouseY: 0;
+  display: grid;
+  height: 100vh;
+  overflow: hidden;
+  place-items: center;
+  background: linear-gradient(to top, #f3ebde 25%, rgba(255, 255, 255, 0.001) 50%), radial-gradient(circle at center, #f3ebde 7.5vmin, #6d9fbd 50vmin);
+  perspective: 300vmin;
+}
+body:active:hover #wrap {
+  transform: translateZ(calc((var(--mouseX) * -7.5vmin) + 55vmin)) translateY(7.5vmin) scale(0.5) rotateY(calc(25deg + (var(--mouseX) * 65deg))) rotateX(0);
+  transition: 2s ease-in-out;
+}
+body:active:hover #wrap * {
+  transition: 2s ease-in-out;
+}
+body:active:hover #wrap *:before, body:active:hover #wrap *:after {
+  transition: 2s ease-in-out;
+}
+body:hover #wrap {
+  transition: 0s ease-in-out;
+}
+body:hover #wrap * {
+  transition: 0s ease-in-out;
+}
+body:hover #wrap *:before, body:hover #wrap *:after {
+  transition: 0s ease-in-out;
+}
+body .panel {
+  position: fixed;
+  z-index: 999;
+  width: 5vw;
+  height: 100vh;
+  top: 0;
+}
+body .panel:nth-of-type(1) {
+  left: 0vw;
+}
+body .panel:nth-of-type(1):hover ~ #wrap {
+  --mouseX: -0.3166666667;
+}
+body .panel:nth-of-type(2) {
+  left: 5vw;
+}
+body .panel:nth-of-type(2):hover ~ #wrap {
+  --mouseX: -0.2833333333;
+}
+body .panel:nth-of-type(3) {
+  left: 10vw;
+}
+body .panel:nth-of-type(3):hover ~ #wrap {
+  --mouseX: -0.25;
+}
+body .panel:nth-of-type(4) {
+  left: 15vw;
+}
+body .panel:nth-of-type(4):hover ~ #wrap {
+  --mouseX: -0.2166666667;
+}
+body .panel:nth-of-type(5) {
+  left: 20vw;
+}
+body .panel:nth-of-type(5):hover ~ #wrap {
+  --mouseX: -0.1833333333;
+}
+body .panel:nth-of-type(6) {
+  left: 25vw;
+}
+body .panel:nth-of-type(6):hover ~ #wrap {
+  --mouseX: -0.15;
+}
+body .panel:nth-of-type(7) {
+  left: 30vw;
+}
+body .panel:nth-of-type(7):hover ~ #wrap {
+  --mouseX: -0.1166666667;
+}
+body .panel:nth-of-type(8) {
+  left: 35vw;
+}
+body .panel:nth-of-type(8):hover ~ #wrap {
+  --mouseX: -0.0833333333;
+}
+body .panel:nth-of-type(9) {
+  left: 40vw;
+}
+body .panel:nth-of-type(9):hover ~ #wrap {
+  --mouseX: -0.05;
+}
+body .panel:nth-of-type(10) {
+  left: 45vw;
+}
+body .panel:nth-of-type(10):hover ~ #wrap {
+  --mouseX: -0.0166666667;
+}
+body .panel:nth-of-type(11) {
+  left: 50vw;
+}
+body .panel:nth-of-type(11):hover ~ #wrap {
+  --mouseX: 0.0166666667;
+}
+body .panel:nth-of-type(12) {
+  left: 55vw;
+}
+body .panel:nth-of-type(12):hover ~ #wrap {
+  --mouseX: 0.05;
+}
+body .panel:nth-of-type(13) {
+  left: 60vw;
+}
+body .panel:nth-of-type(13):hover ~ #wrap {
+  --mouseX: 0.0833333333;
+}
+body .panel:nth-of-type(14) {
+  left: 65vw;
+}
+body .panel:nth-of-type(14):hover ~ #wrap {
+  --mouseX: 0.1166666667;
+}
+body .panel:nth-of-type(15) {
+  left: 70vw;
+}
+body .panel:nth-of-type(15):hover ~ #wrap {
+  --mouseX: 0.15;
+}
+body .panel:nth-of-type(16) {
+  left: 75vw;
+}
+body .panel:nth-of-type(16):hover ~ #wrap {
+  --mouseX: 0.1833333333;
+}
+body .panel:nth-of-type(17) {
+  left: 80vw;
+}
+body .panel:nth-of-type(17):hover ~ #wrap {
+  --mouseX: 0.2166666667;
+}
+body .panel:nth-of-type(18) {
+  left: 85vw;
+}
+body .panel:nth-of-type(18):hover ~ #wrap {
+  --mouseX: 0.25;
+}
+body .panel:nth-of-type(19) {
+  left: 90vw;
+}
+body .panel:nth-of-type(19):hover ~ #wrap {
+  --mouseX: 0.2833333333;
+}
+body .panel:nth-of-type(20) {
+  left: 95vw;
+}
+body .panel:nth-of-type(20):hover ~ #wrap {
+  --mouseX: 0.3166666667;
+}
+body:before {
+  content: "";
+  position: absolute;
+  width: 65vmin;
+  height: 70vmin;
+  box-shadow: 0 0 0 5vmin #fff, 0 5vmin 10vmin -2.5vmin rgba(0, 0, 0, 0.5), 0 0 0 200vw #f3ebde;
+  z-index: 998;
+}
+body .upperblock {
+  position: absolute;
+  width: 50vmin;
+  height: 100vmin;
+  left: 15.5vmin;
+  top: -2.5vmin;
+  transform: translateZ(-25vmin);
+}
+body .upperblock .roofblock {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  top: -9.5vmin;
+  height: 7.5vmin;
+  width: 20vmin;
+  left: calc(50% - 10vmin);
+  transform: scaleY(1.25) scaleX(1.25) translateZ(25vmin);
+}
+body .upperblock .roofblock .tower {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 3vmin;
+  height: 5.5vmin;
+  left: calc(50% - 3vmin);
+  top: auto;
+  bottom: 100%;
+  transform: translateZ(-62.5vmin);
+}
+body .upperblock .roofblock .tower .towerside {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform-origin: 50% 50% 3vmin;
+  transform-origin: 50% 50% 3vmin;
+  transform-origin: 50% 50% 3vmin;
+  transform-origin: 50% 50% 3vmin;
+  transform-origin: 50% 50% 3vmin;
+  transform-origin: 50% 50% 3vmin;
+  transform-origin: 50% 50% 3vmin;
+  transform-origin: 50% 50% 3vmin;
+}
+body .upperblock .roofblock .tower .towerside:before, body .upperblock .roofblock .tower .towerside:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  left: -1.5vmin;
+  top: auto;
+  bottom: calc(100% - 1.25vmin);
+  transform: rotateX(-30deg);
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 3vmin 11vmin 3vmin;
+}
+body .upperblock .roofblock .tower .towerside:after {
+  left: calc(50% - 0.375vmin);
+  bottom: calc(100% + 4.5vmin);
+  border-width: 0 0.75vmin 11vmin 0.75vmin;
+  transform: translateZ(4.85vmin) rotateX(-8.5deg);
+  transform-origin: 50% -11vmin;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(1) {
+  background: linear-gradient(to top, #e5c782 0.5vmin, #e2c175 0.5vmin, #e2c175 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #e3c379 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #e3c379 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #e3c379 calc(100% - 0.5vmin));
+  transform: rotateY(45deg);
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(1):before {
+  border-color: transparent transparent #5d8061 transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(1):after {
+  border-color: transparent transparent #e0bc68 transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(2) {
+  background: linear-gradient(to top, #e9cf93 0.5vmin, #e6c986 0.5vmin, #e6c986 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #e7cb8a 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #e7cb8a 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #e7cb8a calc(100% - 0.5vmin));
+  transform: rotateY(90deg);
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(2):before {
+  border-color: transparent transparent #557458 transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(2):after {
+  border-color: transparent transparent #e2c071 transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(3) {
+  background: linear-gradient(to top, #ecd6a4 0.5vmin, #e9d197 0.5vmin, #e9d197 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #ead29b 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #ead29b 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #ead29b calc(100% - 0.5vmin));
+  transform: rotateY(135deg);
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(3):before {
+  border-color: transparent transparent #4c694f transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(3):after {
+  border-color: transparent transparent #e3c379 transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(4) {
+  background: linear-gradient(to top, #f0deb4 0.5vmin, #edd8a8 0.5vmin, #edd8a8 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #eedaac 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #eedaac 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #eedaac calc(100% - 0.5vmin));
+  transform: rotateY(180deg);
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(4):before {
+  border-color: transparent transparent #445d46 transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(4):after {
+  border-color: transparent transparent #e5c782 transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(5) {
+  background: linear-gradient(to top, #f3e5c5 0.5vmin, #f0e0b9 0.5vmin, #f0e0b9 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #f1e1bd 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #f1e1bd 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #f1e1bd calc(100% - 0.5vmin));
+  transform: rotateY(225deg);
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(5):before {
+  border-color: transparent transparent #3b513d transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(5):after {
+  border-color: transparent transparent #e7cb8a transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(6) {
+  background: linear-gradient(to top, #f7edd6 0.5vmin, #f4e7ca 0.5vmin, #f4e7ca 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #f5e9ce 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #f5e9ce 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #f5e9ce calc(100% - 0.5vmin));
+  transform: rotateY(270deg);
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(6):before {
+  border-color: transparent transparent #324534 transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(6):after {
+  border-color: transparent transparent #e9cf93 transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(7) {
+  background: linear-gradient(to top, #faf4e7 0.5vmin, #f7efda 0.5vmin, #f7efda 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #f8f1df 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #f8f1df 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #f8f1df calc(100% - 0.5vmin));
+  transform: rotateY(315deg);
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(7):before {
+  border-color: transparent transparent #2a392b transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(7):after {
+  border-color: transparent transparent #ead29b transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(8) {
+  background: linear-gradient(to top, #fefcf8 0.5vmin, #fbf6eb 0.5vmin, #fbf6eb 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #fcf8f0 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #fcf8f0 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #fcf8f0 calc(100% - 0.5vmin));
+  transform: rotateY(360deg);
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(8):before {
+  border-color: transparent transparent #212e23 transparent;
+}
+body .upperblock .roofblock .tower .towerside:nth-of-type(8):after {
+  border-color: transparent transparent #ecd6a4 transparent;
+}
+body .upperblock .roofblock .roofside {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: repeating-linear-gradient(to right, #deb860 0.25vmin, #8b7334 0.25vmin, #8b7334 1vmin, #deb860 1vmin, #deb860 1.25vmin);
+  border-radius: 95vmin 95vmin 0 0/70vmin 70vmin 0 0;
+  box-shadow: inset 0 0 0 1.5vmin #deb860;
+  transform: translateZ(-5vmin);
+}
+body .upperblock .roofblock .roofside:before, body .upperblock .roofblock .roofside:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: radial-gradient(circle at bottom, #d5a536 50%, #deb860);
+  border-radius: 5vmin 5vmin 0.5vmin 0.5vmin;
+  top: -72.5%;
+  width: 50%;
+  left: 25%;
+  height: 75%;
+  transform-origin: bottom;
+  transform: scale(0.75) translateZ(-4vmin) rotateY(calc(-25deg - (var(--mouseX) * 65deg))) rotateX(calc(var(--mouseX) * -2.5deg));
+  box-shadow: inset calc(var(--mouseX) * 5vmin) 0 2vmin #b38825;
+}
+body .upperblock .roofblock .roofside:after {
+  top: -82.5%;
+  width: 35%;
+  left: 32.5%;
+  height: 50%;
+  background: radial-gradient(circle at bottom, #deb860 50%, #e7cb8a);
+  -webkit-mask: linear-gradient(to top, rgba(255, 255, 255, 0.001) 1vmin, #000 1.5vmin);
+          mask: linear-gradient(to top, rgba(255, 255, 255, 0.001) 1vmin, #000 1.5vmin);
+}
+body .upperblock .roofblock .roofside .roofplank {
+  top: 17.5vmin;
+  height: 4.5vmin;
+  width: 1vmin;
+  position: absolute;
+  left: calc(50% - 0.5vmin);
+  transform-origin: 50% -150%;
+}
+body .upperblock .roofblock .roofside .roofplank:before {
+  content: "";
+  position: absolute;
+  width: 175%;
+  height: 40vmin;
+  top: 100%;
+  left: -37.5%;
+  background: radial-gradient(circle at left, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% + 1vmin) calc(50% + 1vmin)/6vmin 6vmin, radial-gradient(circle at left, #5b7d5f 2vmin, #466048 2vmin) calc(50% + 1vmin) calc(50% - 1vmin)/6vmin 6vmin;
+  transform-origin: top;
+  transform: translateZ(5vmin) rotateX(-90deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(1) {
+  transform: rotate(110deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(2) {
+  transform: rotate(117.5deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(3) {
+  transform: rotate(125deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(4) {
+  transform: rotate(132.5deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(5) {
+  transform: rotate(140deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(6) {
+  transform: rotate(147.5deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(7) {
+  transform: rotate(155deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(8) {
+  transform: rotate(162.5deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(9) {
+  transform: rotate(170deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(10) {
+  transform: rotate(177.5deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(11) {
+  transform: rotate(185deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12) {
+  transform: rotate(192.5deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13) {
+  transform: rotate(200deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14) {
+  transform: rotate(207.5deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15) {
+  transform: rotate(215deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16) {
+  transform: rotate(222.5deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17) {
+  transform: rotate(230deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18) {
+  transform: rotate(237.5deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19) {
+  transform: rotate(245deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20) {
+  transform: rotate(252.5deg);
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
+  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
+}
+body .upperblock .roofblock .roofside:last-of-type {
+  transform: translateZ(-35vmin);
+}
+body .upperblock .window {
+  top: 0vmin;
+  left: -2.5vmin;
+  position: absolute;
+  width: 55vmin;
+  height: 1vmin;
+  transform: translateZ(5vmin);
+}
+body .upperblock .window .windowside {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform-style: preserve-3d;
+  background: linear-gradient(to top, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to bottom, #8b7334 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, #8b7334 0.5vmin, #dee4f7 0.5vmin, #dee4f7 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 3vmin, #8b7334 3vmin, #8b7334 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 7vmin) 50% 100%/100% 0.5vmin;
+  box-shadow: inset 1vmin 0 0 #8b7334, inset -1vmin 0 0 #8b7334;
+}
+body .upperblock .window .windowside:nth-of-type(2) {
+  left: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+body .upperblock .window .windowside:nth-of-type(3) {
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+}
+body .upperblock .window .windowside:nth-of-type(4) {
+  transform: translateZ(-55vmin) rotateY(-180deg);
+}
+body .upperblock .window .windowside:before {
+  content: "";
+  position: absolute;
+  width: 110%;
+  left: -5%;
+  height: 5vmin;
+  bottom: calc(100% - 2.5vmin);
+  transform-origin: 50% 100%;
+  transform: rotateX(45deg) translateZ(2vmin);
+  background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  -webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+body .upperblock .window .windowside:nth-of-type(1):before {
+  background: linear-gradient(to bottom, #48634b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #48634b, #5d8061 0.25vmin, #5d8061 0.75vmin, #48634b 1.5vmin, #48634b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5d8061, #48634b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+body .upperblock .window .windowside:nth-of-type(2):before {
+  background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+body .upperblock .window .windowside:nth-of-type(3):before {
+  background: linear-gradient(to bottom, #374b39, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #374b39, #4c694f 0.25vmin, #4c694f 0.75vmin, #374b39 1.5vmin, #374b39 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4c694f, #374b39 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+body .upperblock .window .windowside:nth-of-type(4):before {
+  background: linear-gradient(to bottom, #2e3f30, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2e3f30, #445d46 0.25vmin, #445d46 0.75vmin, #2e3f30 1.5vmin, #2e3f30 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #445d46, #2e3f30 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+body .upperblock .window .windowside:nth-of-type(1):before {
+  background: linear-gradient(to bottom, #466048, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #466048, #5b7d5f 0.25vmin, #5b7d5f 0.75vmin, #466048 1.5vmin, #466048 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5b7d5f, #466048 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+body .upperblock .window .windowside:nth-of-type(1):after {
+  background: linear-gradient(to bottom, #4a664d, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #4a664d, #608363 0.25vmin, #608363 0.75vmin, #4a664d 1.5vmin, #4a664d 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #608363, #4a664d 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+body .upperblock .window .windowside:after {
+  content: "";
+  position: absolute;
+  width: 155%;
+  left: -27.5%;
+  height: 5vmin;
+  bottom: calc(100% - 15.5vmin);
+  transform-origin: 50% calc(0% - 5vmin);
+  transform: rotateX(115deg);
+  -webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+body .upperblock .window .windowside:nth-of-type(2):before {
+  background: linear-gradient(to bottom, #3b513d, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3b513d, #516e54 0.25vmin, #516e54 0.75vmin, #3b513d 1.5vmin, #3b513d 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #516e54, #3b513d 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+body .upperblock .window .windowside:nth-of-type(2):after {
+  background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+body .upperblock .window .windowside:after {
+  content: "";
+  position: absolute;
+  width: 155%;
+  left: -27.5%;
+  height: 5vmin;
+  bottom: calc(100% - 15.5vmin);
+  transform-origin: 50% calc(0% - 5vmin);
+  transform: rotateX(115deg);
+  -webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+body .upperblock .window .windowside:nth-of-type(3):before {
+  background: linear-gradient(to bottom, #304232, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #304232, #466048 0.25vmin, #466048 0.75vmin, #304232 1.5vmin, #304232 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #466048, #304232 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+body .upperblock .window .windowside:nth-of-type(3):after {
+  background: linear-gradient(to bottom, #354837, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #354837, #4a664d 0.25vmin, #4a664d 0.75vmin, #354837 1.5vmin, #354837 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4a664d, #354837 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+body .upperblock .window .windowside:after {
+  content: "";
+  position: absolute;
+  width: 155%;
+  left: -27.5%;
+  height: 5vmin;
+  bottom: calc(100% - 15.5vmin);
+  transform-origin: 50% calc(0% - 5vmin);
+  transform: rotateX(115deg);
+  -webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+body .upperblock .window .windowside:nth-of-type(4):before {
+  background: linear-gradient(to bottom, #263327, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #263327, #3b513d 0.25vmin, #3b513d 0.75vmin, #263327 1.5vmin, #263327 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #3b513d, #263327 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+body .upperblock .window .windowside:nth-of-type(4):after {
+  background: linear-gradient(to bottom, #2a392b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2a392b, #3f5742 0.25vmin, #3f5742 0.75vmin, #2a392b 1.5vmin, #2a392b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #3f5742, #2a392b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+body .upperblock .window .windowside:after {
+  content: "";
+  position: absolute;
+  width: 155%;
+  left: -27.5%;
+  height: 5vmin;
+  bottom: calc(100% - 15.5vmin);
+  transform-origin: 50% calc(0% - 5vmin);
+  transform: rotateX(115deg);
+  -webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+body .upperblock .window .windowside:before {
+  content: "";
+  position: absolute;
+  top: 0vmin;
+  width: 120%;
+  left: -10%;
+  height: 15vmin;
+  bottom: calc(100% - 2.5vmin);
+  transform-origin: 50% 100%;
+  transform: rotateX(60deg) translateZ(13vmin);
+  background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  -webkit-mask: linear-gradient(-132deg, rgba(255, 255, 255, 0.001) 26%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(132deg, rgba(255, 255, 255, 0.001) 26%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+body .upperblock .side {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform-style: preserve-3d;
+  -webkit-mask: linear-gradient(to top, transparent 7.5vmin, #000 17.5vmin);
+          mask: linear-gradient(to top, transparent 7.5vmin, #000 17.5vmin);
+  box-shadow: 0 0 0 0.05vmin #d8726a, inset 0 0 0 0.5vmin #d8726a;
+}
+body .upperblock .side:nth-of-type(2) {
+  left: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+body .upperblock .side:nth-of-type(3) {
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+}
+body .upperblock .side:nth-of-type(4) {
+  transform: translateZ(-50vmin) rotateY(-180deg);
+}
+body .upperblock .side:first-of-type:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: #cd4c42;
+  top: -50vmin;
+  height: 50vmin;
+  transform-origin: bottom;
+  transform: rotateX(90deg);
+}
+body .upperblock .side:nth-of-type(1) {
+  box-shadow: 0 0 0 0.05vmin #d8726a, inset 0 0 0 0.5vmin #d25b52;
+  background: repeating-linear-gradient(to right, #d9ad47 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d9ad47 10vmin, #d9ad47 11.25vmin) 50% 2vmin/100% 3vmin no-repeat, repeating-linear-gradient(to right, #d25b52 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d25b52 10vmin, #d25b52 11.25vmin), linear-gradient(to bottom, #d4635a 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #d25b52 10vmin), rgba(242, 244, 252, 0.75);
+}
+body .upperblock .side:first-of-type {
+  background: repeating-linear-gradient(to right, #ddb65c 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #ddb65c 10vmin, #ddb65c 11.25vmin) 50% 2vmin/100% 2vmin no-repeat, repeating-linear-gradient(to right, #d76e66 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d76e66 10vmin, #d76e66 11.25vmin), linear-gradient(to bottom, #d4635a 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 10vmin, #d76e66 10vmin, #d76e66 10.5vmin, rgba(255, 255, 255, 0.001) 10.5vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #d76e66 10vmin), repeating-linear-gradient(to right, #d8726a 0.25vmin, rgba(255, 255, 255, 0.001) 0.25vmin, rgba(255, 255, 255, 0.001) 0.5vmin, #d8726a 0.5vmin, #d8726a 0.75vmin) 50% 10vmin/100% 25vmin repeat-x, rgba(242, 244, 252, 0.75);
+}
+body .upperblock .side:nth-of-type(2) {
+  box-shadow: 0 0 0 0.05vmin #d8726a, inset 0 0 0 0.5vmin #cb4439;
+  background: repeating-linear-gradient(to right, #d3a12d 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d3a12d 10vmin, #d3a12d 11.25vmin) 50% 2vmin/100% 3vmin no-repeat, repeating-linear-gradient(to right, #cb4439 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #cb4439 10vmin, #cb4439 11.25vmin), linear-gradient(to bottom, #d0534a 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #cb4439 10vmin), rgba(242, 244, 252, 0.75);
+}
+body .upperblock .side:first-of-type {
+  background: repeating-linear-gradient(to right, #dcb458 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #dcb458 10vmin, #dcb458 11.25vmin) 50% 2vmin/100% 2vmin no-repeat, repeating-linear-gradient(to right, #d66a62 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d66a62 10vmin, #d66a62 11.25vmin), linear-gradient(to bottom, #d0534a 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 10vmin, #d66a62 10vmin, #d66a62 10.5vmin, rgba(255, 255, 255, 0.001) 10.5vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #d66a62 10vmin), repeating-linear-gradient(to right, #d8726a 0.25vmin, rgba(255, 255, 255, 0.001) 0.25vmin, rgba(255, 255, 255, 0.001) 0.5vmin, #d8726a 0.5vmin, #d8726a 0.75vmin) 50% 10vmin/100% 25vmin repeat-x, rgba(242, 244, 252, 0.75);
+}
+body .upperblock .side:nth-of-type(3) {
+  box-shadow: 0 0 0 0.05vmin #d8726a, inset 0 0 0 0.5vmin #b63a30;
+  background: repeating-linear-gradient(to right, #bb8f27 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #bb8f27 10vmin, #bb8f27 11.25vmin) 50% 2vmin/100% 3vmin no-repeat, repeating-linear-gradient(to right, #b63a30 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #b63a30 10vmin, #b63a30 11.25vmin), linear-gradient(to bottom, #cb4439 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #b63a30 10vmin), rgba(242, 244, 252, 0.75);
+}
+body .upperblock .side:first-of-type {
+  background: repeating-linear-gradient(to right, #dbb253 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #dbb253 10vmin, #dbb253 11.25vmin) 50% 2vmin/100% 2vmin no-repeat, repeating-linear-gradient(to right, #d5675e 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d5675e 10vmin, #d5675e 11.25vmin), linear-gradient(to bottom, #cb4439 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 10vmin, #d5675e 10vmin, #d5675e 10.5vmin, rgba(255, 255, 255, 0.001) 10.5vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #d5675e 10vmin), repeating-linear-gradient(to right, #d8726a 0.25vmin, rgba(255, 255, 255, 0.001) 0.25vmin, rgba(255, 255, 255, 0.001) 0.5vmin, #d8726a 0.5vmin, #d8726a 0.75vmin) 50% 10vmin/100% 25vmin repeat-x, rgba(242, 244, 252, 0.75);
+}
+body .upperblock .side:nth-of-type(4) {
+  box-shadow: 0 0 0 0.05vmin #d8726a, inset 0 0 0 0.5vmin #9e3229;
+  background: repeating-linear-gradient(to right, #a27b22 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #a27b22 10vmin, #a27b22 11.25vmin) 50% 2vmin/100% 3vmin no-repeat, repeating-linear-gradient(to right, #9e3229 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #9e3229 10vmin, #9e3229 11.25vmin), linear-gradient(to bottom, #bf3c32 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #9e3229 10vmin), rgba(242, 244, 252, 0.75);
+}
+body .upperblock .side:first-of-type {
+  background: repeating-linear-gradient(to right, #dab04f 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #dab04f 10vmin, #dab04f 11.25vmin) 50% 2vmin/100% 2vmin no-repeat, repeating-linear-gradient(to right, #d4635a 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d4635a 10vmin, #d4635a 11.25vmin), linear-gradient(to bottom, #bf3c32 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 10vmin, #d4635a 10vmin, #d4635a 10.5vmin, rgba(255, 255, 255, 0.001) 10.5vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #d4635a 10vmin), repeating-linear-gradient(to right, #d8726a 0.25vmin, rgba(255, 255, 255, 0.001) 0.25vmin, rgba(255, 255, 255, 0.001) 0.5vmin, #d8726a 0.5vmin, #d8726a 0.75vmin) 50% 10vmin/100% 25vmin repeat-x, rgba(242, 244, 252, 0.75);
+}
+
+#wrap {
+  transition: 1s ease-in-out;
+  pointer-events: none;
+  width: 90vmin;
+  height: 90vmin;
+  position: relative;
+  transform-style: preserve-3d;
+  transform: translateZ(calc((var(--mouseX) * -7.5vmin))) translateY(7.5vmin) scale(0.5) rotateY(calc(25deg + (var(--mouseX) * 65deg))) rotateX(0);
+  transform-origin: 50% 50% -45vmin;
+  --mouseX: 0;
+}
+#wrap * {
+  transition: 1s ease-in-out;
+  transform-style: preserve-3d;
+}
+#wrap *:before, #wrap *:after {
+  transform-style: preserve-3d;
+  transition: 1s ease-in-out;
+}
+#wrap .bridge {
+  width: 17.5vmin;
+  height: 50vmin;
+  bottom: 16vmin;
+  position: absolute;
+  left: 31.5vmin;
+  transform-origin: 100% 100%;
+  transform: rotateX(-95deg) rotateY(90deg);
+}
+#wrap .bridge .noface {
+  position: absolute;
+  width: 10vmin;
+  height: 12.5vmin;
+  top: 30vmin;
+  left: 22.5vmin;
+  transform: rotateY(-90deg) rotateX(95deg) translateX(-10vmin) translateZ(calc((var(--mouseX) * 7.5vmin) + 2.5vmin)) translateY(calc(var(--mouseX) * -2vmin));
+}
+#wrap .bridge .noface .body {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.5) 80%, rgba(255, 255, 255, 0.001) 100%);
+  width: 4vmin;
+  left: calc(50% - 2vmin);
+  border-radius: 20vmin 20vmin 25vmin 25vmin/35vmin 35vmin 25vmin 25vmin;
+  height: 110%;
+  top: -5%;
+  overflow: hidden;
+  transform: rotateY(calc(var(--mouseX) * -90deg));
+}
+#wrap .bridge .noface .body .face {
+  width: 2.75vmin;
+  height: 4vmin;
+  position: absolute;
+  left: calc(50% - 1.375vmin);
+  background: white;
+  top: 0.5vmin;
+  border-radius: 10vmin/15vmin;
+  transform: scale(0.9) translateX(clamp(0vmin, calc(var(--mouseX) * 3vmin), 20vmin)) translateY(clamp(-0.5vmin, calc(var(--mouseX) * 1vmin), 2vmin));
+  overflow: hidden;
+}
+#wrap .bridge .noface .body .face:before {
+  content: "";
+  position: absolute;
+  width: 1vmin;
+  height: 3vmin;
+  top: -0.25vmin;
+  left: 0.15vmin;
+  background: radial-gradient(ellipse at center, #000 0.45vmin, rgba(255, 255, 255, 0.001) 0.45vmin) 50% 1.65vmin/100% 0.45vmin no-repeat, linear-gradient(to bottom, #fff 0.15vmin, rgba(255, 255, 255, 0.001) 0.15vmin, rgba(255, 255, 255, 0.001) 1.25vmin, #fff 1vmin, #fff 2.25vmin, rgba(255, 255, 255, 0.001) 2vmin), linear-gradient(to right, rgba(255, 255, 255, 0.001) 0.2vmin, #bfbfbf 0.2vmin, #bfbfbf 0.65vmin, rgba(255, 255, 255, 0.001) 0.65vmin);
+  -webkit-box-reflect: right 0.4vmin;
+  transform: translateX(clamp(0vmin, calc(var(--mouseX) * 2vmin), 20vmin));
+}
+#wrap .bridge .noface .body .face:after {
+  content: "";
+  position: absolute;
+  width: 1.25vmin;
+  height: 0.35vmin;
+  background: #000;
+  left: calc(50% - 0.625vmin);
+  bottom: 0.5vmin;
+  border-radius: 5vmin;
+  transform: translateX(clamp(0vmin, calc(var(--mouseX) * 1vmin), 20vmin));
+}
+#wrap .bridge .plank {
+  position: absolute;
+  width: 17.5vmin;
+  height: 2vmin;
+  left: -152.5vmin;
+  top: calc(50% - 4vmin);
+  transform-origin: 500% 50%;
+}
+#wrap .bridge .plank .rail {
+  position: absolute;
+  width: 50%;
+  height: 175%;
+  background: linear-gradient(to bottom, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin) 0% 50%/60% 100% no-repeat, linear-gradient(to bottom, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin) 100% calc(50% + 1.5vmin)/40% 100% no-repeat, linear-gradient(to right, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin), linear-gradient(to right, rgba(255, 255, 255, 0.001) 5vmin, #d35f56 5vmin, #d35f56 5.5vmin, rgba(255, 255, 255, 0.001) 5.5vmin), linear-gradient(to left, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin);
+  left: -50%;
+}
+#wrap .bridge .plank .rail:after {
+  content: "";
+  position: absolute;
+  width: 1.5vmin;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: #c33d33;
+  transform: rotateY(90deg) translateZ(-0.75vmin);
+  box-shadow: 18vmin 0 0 #c33d33;
+}
+#wrap .bridge .plank .rail:before {
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(to bottom, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin) 0% 50%/60% 100% no-repeat, linear-gradient(to bottom, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin) 100% calc(50% + 1.5vmin)/40% 100% no-repeat, linear-gradient(to right, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin), linear-gradient(to right, rgba(255, 255, 255, 0.001) 5vmin, #d35f56 5vmin, #d35f56 5.5vmin, rgba(255, 255, 255, 0.001) 5.5vmin), linear-gradient(to left, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin);
+  transform: translateZ(-17.5vmin);
+}
+#wrap .bridge .plank:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 150%;
+  bottom: 0%;
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+  background: #b09242;
+  box-shadow: inset 0 0 0 0.5vmin #8b7334;
+}
+#wrap .bridge .plank:nth-of-type(1) {
+  transform: rotate(158.125deg);
+}
+#wrap .bridge .plank:nth-of-type(2) {
+  transform: rotate(160deg);
+}
+#wrap .bridge .plank:nth-of-type(3) {
+  transform: rotate(161.875deg);
+}
+#wrap .bridge .plank:nth-of-type(4) {
+  transform: rotate(163.75deg);
+}
+#wrap .bridge .plank:nth-of-type(5) {
+  transform: rotate(165.625deg);
+}
+#wrap .bridge .plank:nth-of-type(6) {
+  transform: rotate(167.5deg);
+}
+#wrap .bridge .plank:nth-of-type(7) {
+  transform: rotate(169.375deg);
+}
+#wrap .bridge .plank:nth-of-type(8) {
+  transform: rotate(171.25deg);
+}
+#wrap .bridge .plank:nth-of-type(9) {
+  transform: rotate(173.125deg);
+}
+#wrap .bridge .plank:nth-of-type(10) {
+  transform: rotate(175deg);
+}
+#wrap .bridge .plank:nth-of-type(11) {
+  transform: rotate(176.875deg);
+}
+#wrap .bridge .plank:nth-of-type(12) {
+  transform: rotate(178.75deg);
+}
+#wrap .bridge .plank:nth-of-type(13) {
+  transform: rotate(180.625deg);
+}
+#wrap .bridge .plank:nth-of-type(14) {
+  transform: rotate(182.5deg);
+}
+#wrap .bridge .plank:nth-of-type(15) {
+  transform: rotate(184.375deg);
+}
+#wrap .bridge .plank:nth-of-type(16) {
+  transform: rotate(186.25deg);
+}
+#wrap .bridge .plank:nth-of-type(17) {
+  transform: rotate(188.125deg);
+}
+#wrap .bridge .plank:nth-of-type(18) {
+  transform: rotate(190deg);
+}
+#wrap .bridge .plank:nth-of-type(19) {
+  transform: rotate(191.875deg);
+}
+#wrap .bridge .plank:nth-of-type(20) {
+  transform: rotate(193.75deg);
+}
+#wrap .bridge .plank:nth-of-type(21) {
+  transform: rotate(195.625deg);
+}
+#wrap .bridge .plank:nth-of-type(22) {
+  transform: rotate(197.5deg);
+}
+#wrap .bridge .plank:nth-of-type(23) {
+  transform: rotate(199.375deg);
+}
+#wrap .bridge .plank:nth-of-type(24) {
+  transform: rotate(201.25deg);
+}
+#wrap .bridge .plank:nth-of-type(25) {
+  transform: rotate(203.125deg);
+}
+#wrap .center {
+  position: absolute;
+  width: 17.5vmin;
+  height: 22.5vmin;
+  bottom: 22.5vmin;
+  left: 31.5vmin;
+  transform: translateZ(-10vmin);
+}
+#wrap .center .leaf {
+  position: absolute;
+  width: 6vmin;
+  height: 6vmin;
+  border-radius: 50vmin 0;
+  background: linear-gradient(225deg, rgba(255, 255, 255, 0.001) 25%, #e2c175 25%);
+  box-shadow: inset 0 0 0 0.35vmin #d5a536;
+  top: -20.5vmin;
+  left: calc(50% - 6vmin);
+  transform: translateZ(1vmin) rotate(-45deg);
+  transform-origin: 100% 0%;
+}
+#wrap .center .leaf:nth-of-type(2) {
+  transform: translateZ(1vmin) rotate(-75deg) scale(0.9);
+}
+#wrap .center .leaf:nth-of-type(3) {
+  transform: translateZ(1vmin) rotate(-15deg) scale(0.9);
+}
+#wrap .center .leaf:nth-of-type(4) {
+  transform: translateZ(1vmin) rotate(-105deg) scale(0.8);
+  top: -19vmin;
+}
+#wrap .center .leaf:nth-of-type(5) {
+  transform: translateZ(1vmin) rotate(15deg) scale(0.8);
+  top: -19vmin;
+}
+#wrap .center .plank {
+  width: 1vmin;
+  height: 16.5vmin;
+  left: calc(50% - 0.5vmin);
+  position: absolute;
+  bottom: 25.25vmin;
+  transform-origin: 50% 55%;
+}
+#wrap .center .plank:nth-of-type(5):after {
+  content: "";
+  position: absolute;
+  width: 5vmin;
+  height: 100%;
+  bottom: 100%;
+  left: -2.5vmin;
+  background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  transform-origin: bottom;
+  transform: translateZ(5vmin) rotateX(90deg) rotateY(45deg) translateX(-2.5vmin);
+}
+#wrap .center .plank:last-of-type:after {
+  content: "";
+  position: absolute;
+  width: 5vmin;
+  height: 100%;
+  bottom: 100%;
+  left: -2.5vmin;
+  background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  transform-origin: bottom;
+  transform: translateZ(5vmin) rotateX(90deg) rotateY(45deg) translateX(16vmin);
+}
+#wrap .center .plank:before {
+  content: "";
+  position: absolute;
+  width: 140%;
+  height: 100%;
+  bottom: 100%;
+  left: -20%;
+  background: #668c6a;
+  transform-origin: bottom;
+  transform: translateZ(5vmin) rotateX(90deg);
+  box-shadow: inset 0 0 0.5vmin 0.5vmin #466048;
+}
+#wrap .center .plank:nth-of-type(1) {
+  transform: rotate(-125deg);
+}
+#wrap .center .plank:nth-of-type(2) {
+  transform: rotate(-116deg);
+}
+#wrap .center .plank:nth-of-type(3) {
+  transform: rotate(-107deg);
+}
+#wrap .center .plank:nth-of-type(4) {
+  transform: rotate(-98deg);
+}
+#wrap .center .plank:nth-of-type(5) {
+  transform: rotate(-89deg);
+}
+#wrap .center .plank:nth-of-type(6) {
+  transform: rotate(-80deg);
+}
+#wrap .center .plank:nth-of-type(7) {
+  transform: rotate(-71deg);
+}
+#wrap .center .plank:nth-of-type(8) {
+  transform: rotate(-62deg);
+}
+#wrap .center .plank:nth-of-type(9) {
+  transform: rotate(-53deg);
+}
+#wrap .center .plank:nth-of-type(10) {
+  transform: rotate(-44deg);
+}
+#wrap .center .plank:nth-of-type(11) {
+  transform: rotate(-35deg);
+}
+#wrap .center .plank:nth-of-type(12) {
+  transform: rotate(-26deg);
+}
+#wrap .center .plank:nth-of-type(13) {
+  transform: rotate(-17deg);
+}
+#wrap .center .plank:nth-of-type(14) {
+  transform: rotate(-8deg);
+}
+#wrap .center .plank:nth-of-type(15) {
+  transform: rotate(1deg);
+}
+#wrap .center .plank:nth-of-type(16) {
+  transform: rotate(10deg);
+}
+#wrap .center .plank:nth-of-type(17) {
+  transform: rotate(19deg);
+}
+#wrap .center .plank:nth-of-type(18) {
+  transform: rotate(28deg);
+}
+#wrap .center .plank:nth-of-type(19) {
+  transform: rotate(37deg);
+}
+#wrap .center .plank:nth-of-type(20) {
+  transform: rotate(46deg);
+}
+#wrap .center .plank:nth-of-type(21) {
+  transform: rotate(55deg);
+}
+#wrap .center .plank:nth-of-type(22) {
+  transform: rotate(64deg);
+}
+#wrap .center .plank:nth-of-type(23) {
+  transform: rotate(73deg);
+}
+#wrap .center .plank:nth-of-type(24) {
+  transform: rotate(82deg);
+}
+#wrap .center .plank:nth-of-type(25) {
+  transform: rotate(91deg);
+}
+#wrap .center:before {
+  content: "";
+  position: absolute;
+  width: 6.25vmin;
+  height: 3vmin;
+  background: repeating-linear-gradient(to right, #8b7334 1vmin, #665426 1vmin, #665426 1.5vmin, #8b7334 2.5vmin);
+  border: 0.35vmin dashed #deb860;
+  left: 1.15vmin;
+  box-sizing: border-box;
+  -webkit-box-reflect: right 2vmin;
+  top: 5vmin;
+  transform: translateZ(0.05vmin);
+}
+#wrap .center:after {
+  box-shadow: inset 0 -0.5vmin 0 #d5a536;
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  height: 5vmin;
+  width: calc(100% + 7.5vmin);
+  left: -3.75vmin;
+  transform-origin: top;
+  background: linear-gradient(to bottom, #8c8c8c, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #8c8c8c, #a6a6a6 0.25vmin, #a6a6a6 0.75vmin, #8c8c8c 1.5vmin, #8c8c8c 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #a6a6a6, #8c8c8c 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  transform: rotateX(55deg);
+  -webkit-clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
+          clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
+}
+#wrap .center .side {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform-style: preserve-3d;
+}
+#wrap .center .side:nth-of-type(2) .upper .rail {
+  transform: translateZ(0vmin) translateY(0.25vmin);
+}
+#wrap .center .side:nth-of-type(3) .upper .rail {
+  transform: translateZ(0vmin) translateY(-0.25vmin);
+}
+#wrap .center .side .upper .rail {
+  content: "";
+  position: absolute;
+  width: 125%;
+  height: 17.5%;
+  bottom: 40%;
+  left: -12.5%;
+  transform: translateZ(5vmin);
+  background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 0.5vmin, #cd4c42 0.5vmin, #cd4c42 3vmin, rgba(255, 255, 255, 0.001) 3vmin, rgba(255, 255, 255, 0.001) 3.5vmin) 50% 0%/100% 0.5vmin no-repeat, linear-gradient(to top, #b09242 1vmin, rgba(255, 255, 255, 0.001) 1vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #d5a536 calc(100% - 0.5vmin)), repeating-linear-gradient(to right, #cd4c42 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 3vmin, #cd4c42 3vmin, #cd4c42 3.5vmin);
+}
+#wrap .center .side:first-of-type .upper .topsection {
+  position: absolute;
+  width: 8.5vmin;
+  height: 3.5vmin;
+  background: #e7cb8a;
+  bottom: 20vmin;
+  left: calc(50% - 4.25vmin);
+  border-radius: 100vmin 100vmin 0 0/75vmin 75vmin 0 0;
+  transform: translateZ(-5vmin);
+}
+#wrap .center .side:first-of-type .upper .topsection .roof {
+  width: 1vmin;
+  height: 16.5vmin;
+  left: calc(50% - 0.5vmin);
+  position: absolute;
+  bottom: -13vmin;
+  transform-origin: 50% 40%;
+}
+#wrap .center .side:first-of-type .upper .topsection .roof:before {
+  content: "";
+  position: absolute;
+  width: 140%;
+  left: -20%;
+  height: 125%;
+  bottom: 100%;
+  transform-origin: 50% 100%;
+  transform: translateZ(2.5vmin) rotateX(90deg);
+  background: #668c6a;
+  box-shadow: inset 0 0 0.5vmin 0.5vmin #466048;
+}
+#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(1) {
+  transform: rotate(-50deg);
+}
+#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(2) {
+  transform: rotate(-38.75deg);
+}
+#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(3) {
+  transform: rotate(-27.5deg);
+}
+#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(4) {
+  transform: rotate(-16.25deg);
+}
+#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(5) {
+  transform: rotate(-5deg);
+}
+#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(6) {
+  transform: rotate(6.25deg);
+}
+#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(7) {
+  transform: rotate(17.5deg);
+}
+#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(8) {
+  transform: rotate(28.75deg);
+}
+#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(9) {
+  transform: rotate(40deg);
+}
+#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(10) {
+  transform: rotate(51.25deg);
+}
+#wrap .center .side:first-of-type .upper:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(216, 114, 106, 0.75), rgba(216, 114, 106, 0.75)), repeating-linear-gradient(to right, #d5a536 0.25vmin, rgba(255, 255, 255, 0.001) 0.25vmin, rgba(255, 255, 255, 0.001) 1vmin, #d5a536 1vmin, #d5a536 1.25vmin), repeating-linear-gradient(to bottom, #d5a536 0.25vmin, rgba(255, 255, 255, 0.001) 0.25vmin, rgba(255, 255, 255, 0.001) 1vmin, #d5a536 1vmin, #d5a536 1.25vmin), #d35f56;
+  -webkit-mask: radial-gradient(circle at center, #000 2.5vmin, rgba(255, 255, 255, 0.001) 2.5vmin) 50% 3vmin/5vmin 5vmin no-repeat, radial-gradient(circle at center, #000 2.5vmin, rgba(255, 255, 255, 0.001) 2.5vmin) calc(50% - 2.5vmin) 4vmin/5vmin 5vmin no-repeat, radial-gradient(circle at center, #000 2.5vmin, rgba(255, 255, 255, 0.001) 2.5vmin) calc(50% + 2.5vmin) 4vmin/5vmin 5vmin no-repeat;
+}
+#wrap .center .side .upper {
+  background: linear-gradient(to bottom, #daaf4b 10vmin, rgba(255, 255, 255, 0.001) 10vmin), radial-gradient(circle at bottom, rgba(255, 255, 255, 0.001) 8.35vmin, #d8726a 2vmin) 50% 50%/125% 100%;
+  position: absolute;
+  width: 80%;
+  left: 10%;
+  bottom: 150%;
+  height: 80%;
+}
+#wrap .center .side .upper:before {
+  content: "";
+  position: absolute;
+  width: 120%;
+  left: -10%;
+  height: 7.5vmin;
+  bottom: calc(100% - 3.5vmin);
+  transform-origin: 50% 100%;
+  transform: rotateX(45deg) translateZ(2.5vmin);
+  background: linear-gradient(to bottom, #3b513d, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3b513d, #516e54 0.25vmin, #516e54 0.75vmin, #3b513d 1.5vmin, #3b513d 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #516e54, #3b513d 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  -webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 25%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 25%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+#wrap .center .side:nth-of-type(2) .upper {
+  transform: translateZ(-1.85vmin);
+  left: 0vmin;
+  background: linear-gradient(to bottom, #daaf4b 10vmin, #cd4c42 10vmin);
+}
+#wrap .center .side:nth-of-type(3) .upper {
+  transform: translateZ(-1.85vmin);
+  background: linear-gradient(to bottom, #daaf4b 10vmin, #cd4c42 10vmin);
+  left: 3.5vmin;
+}
+#wrap .center .side:first-of-type:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 20vmin;
+  box-shadow: inset 3vmin 4vmin 0 0 #8b7334, inset -3vmin 0 0 #8b7334, inset 0 8vmin 0 #8c8c8c, inset calc((-20vmin * var(--mouseX)) - 4vmin) 0 6vmin black;
+  left: 0;
+  bottom: -8vmin;
+  background: linear-gradient(to bottom, #8c8c8c 8vmin, #53451f 8vmin);
+}
+#wrap .center .side:first-of-type:after {
+  box-shadow: inset 0 -0.5vmin 0 #d5a536;
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  height: 5vmin;
+  width: calc(100% + 7.5vmin);
+  left: -3.75vmin;
+  transform-origin: top;
+  background: linear-gradient(to bottom, #8c8c8c, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #8c8c8c, #a6a6a6 0.25vmin, #a6a6a6 0.75vmin, #8c8c8c 1.5vmin, #8c8c8c 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #a6a6a6, #8c8c8c 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  transform: rotateX(55deg);
+  -webkit-clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
+          clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
+  top: auto;
+  bottom: 7.5vmin;
+}
+#wrap .center .side:nth-of-type(2) {
+  left: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+#wrap .center .side:nth-of-type(3) {
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+}
+#wrap .center .side:nth-of-type(4) {
+  transform: translateZ(-17.5vmin) rotateY(-180deg);
+}
+#wrap .center .side:nth-of-type(1) {
+  background: #cc483e;
+}
+#wrap .center .side:nth-of-type(2) {
+  background: #c33d33;
+}
+#wrap .center .side:nth-of-type(3) {
+  background: #b2382f;
+}
+#wrap .center .side:nth-of-type(4) {
+  background: #a2332a;
+}
+#wrap .center .side .topside {
+  width: 100%;
+  height: 50%;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+}
+#wrap .center .side:first-of-type .topside {
+  background: linear-gradient(to right, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin, rgba(255, 255, 255, 0.001) calc(100% - 3vmin), #8b7334 calc(100% - 3vmin)), linear-gradient(to bottom, #8b7334 2vmin, rgba(255, 255, 255, 0.001) 2vmin);
+}
+#wrap .center .side:first-of-type .topside:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 8vmin;
+  top: -8vmin;
+  background: #b09242;
+  border-radius: 50vmin 50vmin 0 0;
+}
+#wrap .center .side:first-of-type .topside:before {
+  content: "";
+  position: absolute;
+  width: 125%;
+  height: 35%;
+  bottom: 0;
+  left: -12.5%;
+  transform: translateZ(5vmin);
+  background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 0.5vmin, #b09242 0.5vmin, #b09242 3vmin, rgba(255, 255, 255, 0.001) 3vmin, rgba(255, 255, 255, 0.001) 3.5vmin) 50% 0%/100% 0.5vmin no-repeat, linear-gradient(to top, #b09242 1vmin, rgba(255, 255, 255, 0.001) 1vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #d5a536 calc(100% - 0.5vmin)), repeating-linear-gradient(to right, #b09242 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 3vmin, #b09242 3vmin, #b09242 3.5vmin);
+}
+#wrap .center .side:nth-of-type(4) .topside {
+  background: #413618;
+  transform: translateZ(-8vmin);
+}
+#wrap .center .side:nth-of-type(4) .topside:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: #8b7334;
+  transform-origin: bottom;
+  transform: rotateX(90deg);
+  width: 120%;
+  left: -10%;
+  top: auto;
+  bottom: 0;
+  height: 130%;
+}
+#wrap .center .side:nth-of-type(2) .topside, #wrap .center .side:nth-of-type(3) .topside {
+  background: linear-gradient(to right, #78642d 3vmin, rgba(255, 255, 255, 0.001) 3vmin, rgba(255, 255, 255, 0.001) calc(100% - 3vmin), #78642d calc(100% - 3vmin)), linear-gradient(to bottom, #78642d 4vmin, rgba(255, 255, 255, 0.001) 4vmin);
+}
+#wrap .center .side:nth-of-type(2) .topside:before, #wrap .center .side:nth-of-type(3) .topside:before {
+  content: "";
+  position: absolute;
+  left: -25%;
+  transform: translateZ(1.5vmin);
+  width: 125%;
+  height: 35%;
+  bottom: 0;
+  background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 0.5vmin, #b09242 0.5vmin, #b09242 3vmin, rgba(255, 255, 255, 0.001) 3vmin, rgba(255, 255, 255, 0.001) 3.5vmin) 50% 0%/100% 0.5vmin no-repeat, linear-gradient(to top, #b09242 1vmin, rgba(255, 255, 255, 0.001) 1vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #d5a536 calc(100% - 0.5vmin)), repeating-linear-gradient(to right, #b09242 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 3vmin, #b09242 3vmin, #b09242 3.5vmin);
+}
+#wrap .center .side:nth-of-type(3) .topside:before {
+  left: 0%;
+}
+#wrap .rearblock {
+  position: absolute;
+  width: 65vmin;
+  height: 30vmin;
+  left: 10vmin;
+  top: 47.5vmin;
+  transform: translateZ(-35vmin);
+}
+#wrap .rearblock .side {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  top: 20vmin;
+  transform-style: preserve-3d;
+}
+#wrap .rearblock .side:nth-of-type(2) {
+  left: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+#wrap .rearblock .side:nth-of-type(3) {
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+}
+#wrap .rearblock .side:nth-of-type(4) {
+  transform: translateZ(-45vmin) rotateY(-180deg);
+}
+#wrap .rearblock .side:first-of-type {
+  width: 6.5vmin;
+  height: 100vmin;
+  background: radial-gradient(ellipse at center, black 2.5vmin, rgba(255, 255, 255, 0.001) 2.5vmin) 50% 0.5vmin/100% 2.5vmin no-repeat, linear-gradient(to bottom, gray, #999999, #ccc 75%, rgba(255, 255, 255, 0.001));
+  top: -40vmin;
+  left: -25vmin;
+  border-radius: 125vmin 125vmin 0 0/90vmin 90vmin 0 0;
+  transform: rotateY(calc(var(--mouseX) * -95deg));
+  box-shadow: inset calc(var(--mouseX) * 5vmin) -1vmin 2vmin gray, inset calc(var(--mouseX) * -2vmin) -1vmin 2vmin #d9d9d9, inset 0 2vmin 2vmin gray;
+}
+#wrap .rearblock .side:first-of-type:before {
+  content: "";
+  transform-style: preserve-3d;
+  position: absolute;
+  width: 32.5vmin;
+  height: 30vmin;
+  left: 1.5vmin;
+  border-radius: 500vmin;
+  border: 0.5vmin solid;
+  border-color: rgba(255, 255, 255, 0.001) rgba(255, 255, 255, 0.001) #a6a6a6 rgba(255, 255, 255, 0.001);
+  transform-origin: left;
+  transform: rotateY(calc(var(--mouseX) * 65deg)) translateZ(0vmin);
+}
+#wrap .rearblock .side:first-of-type:after {
+  content: "";
+  position: absolute;
+  width: 50vmin;
+  height: 50vmin;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.001) 10%, rgba(204, 204, 204, 0.35), rgba(191, 191, 191, 0.5));
+  bottom: calc(100% - 2vmin);
+  right: calc(100% - 5vmin);
+  transform-origin: 100% 100%;
+  transform: skew(calc(var(--mouseX) * 30deg));
+  -webkit-mask: radial-gradient(circle at center, #000 2.5vmin, rgba(255, 255, 255, 0.001) 2.5vmin) 100% 100%/5vmin 5vmin no-repeat, radial-gradient(circle at center, #000 5vmin, rgba(255, 255, 255, 0.001) 5vmin) 100% 100%/15vmin 12.5vmin no-repeat, radial-gradient(circle at center, #000 7.5vmin, rgba(255, 255, 255, 0.001) 7.5vmin) 100% 100%/25vmin 25vmin no-repeat, radial-gradient(circle at center, #000 7.5vmin, rgba(255, 255, 255, 0.001) 7.5vmin) calc(100% - 2.5vmin) 100%/25vmin 25vmin no-repeat, radial-gradient(circle at center, #000 9vmin, rgba(255, 255, 255, 0.001) 9vmin) calc(100% - 5vmin) 100%/30vmin 30vmin no-repeat, radial-gradient(circle at center, #000 12vmin, rgba(255, 255, 255, 0.001) 12vmin) calc(100% - 10vmin) 100%/40vmin 30vmin no-repeat;
+}
+#wrap .rearblock .side:nth-of-type(2), #wrap .rearblock .side:nth-of-type(3) {
+  width: 45vmin;
+}
+#wrap .rearblock .side:nth-of-type(3) {
+  left: -45vmin;
+  height: 80vmin;
+  top: -20vmin;
+  -webkit-mask: linear-gradient(to top, transparent 5vmin, #000 30vmin);
+          mask: linear-gradient(to top, transparent 5vmin, #000 30vmin);
+  background-color: #bfbfbf;
+  background-image: linear-gradient(335deg, #b3b3b3 2.3vmin, transparent 2.3vmin), linear-gradient(155deg, #b3b3b3 2.4vmin, transparent 2.4vmin), linear-gradient(335deg, #b3b3b3 2.3vmin, transparent 2.3vmin), linear-gradient(155deg, #b3b3b3 2.4vmin, transparent 2.3vmin);
+  background-size: 5.8vmin 5.8vmin;
+  background-position: 0px 0.5vmin, 0.6vmin 3.6vmin, 3vmin 3.2vmin, 3.5vmin 0.7vmin;
+}
+#wrap .rearblock .side:nth-of-type(3):before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: linear-gradient(to bottom, rgba(128, 128, 128, 0.5), rgba(255, 255, 255, 0.001) 50%);
+}
+#wrap .roofpeak {
+  position: absolute;
+  width: 10vmin;
+  height: 5vmin;
+  left: -15vmin;
+  top: 2.5vmin;
+  transform: translateZ(-45vmin) rotateY(-90deg);
+}
+#wrap .roofpeak:before {
+  content: "";
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-style: solid;
+  border-width: 0 5vmin 5vmin 5vmin;
+  border-color: transparent transparent #e2c175 transparent;
+  transform: translateZ(-1vmin);
+}
+#wrap .roofpeak:after {
+  content: "";
+  position: absolute;
+  width: 60%;
+  height: 40%;
+  left: 20%;
+  bottom: 0;
+  background: linear-gradient(to bottom, #f0deb4 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin), repeating-linear-gradient(to right, #f0deb4 1vmin, rgba(255, 255, 255, 0.001) 1vmin, rgba(255, 255, 255, 0.001) 2vmin, #f0deb4 2vmin, #f0deb4 3vmin);
+  transform: translateZ(-1vmin);
+}
+#wrap .roofpeak .roof {
+  height: 7.5vmin;
+  width: 25vmin;
+  position: absolute;
+  background: linear-gradient(to bottom, #3b513d, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3b513d, #516e54 0.25vmin, #516e54 0.75vmin, #3b513d 1.5vmin, #3b513d 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #516e54, #3b513d 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  left: 50%;
+  transform-origin: 0% 0%;
+  transform: rotateY(90deg) rotateX(45deg);
+}
+#wrap .roofpeak .roof:last-of-type {
+  left: auto;
+  right: 50%;
+  transform-origin: 100% 0%;
+  transform: rotateY(-90deg) rotateX(45deg);
+}
+#wrap .peak {
+  position: absolute;
+  width: 10vmin;
+  height: 10vmin;
+  top: 35vmin;
+  left: 0vmin;
+  transform: rotateY(90deg) translate(30vmin, 5vmin);
+}
+#wrap .peak:before, #wrap .peak:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform: translateZ(-10vmin);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.001) 5vmin, #8b7334 5vmin, #8b7334 6vmin, rgba(255, 255, 255, 0.001) 5vmin, rgba(255, 255, 255, 0.001) 8vmin, #8b7334 8vmin);
+}
+#wrap .peak:after {
+  top: -4vmin;
+  height: 5vmin;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0.001) 40%, #8b7334 40%, #8b7334 60%, rgba(255, 255, 255, 0.001) 60%), linear-gradient(-135deg, rgba(255, 255, 255, 0.001) 40%, #8b7334 40%, #8b7334 50%, rgba(255, 255, 255, 0.001) 50%) 2vmin 50%, linear-gradient(135deg, rgba(255, 255, 255, 0.001) 40%, #8b7334 40%, #8b7334 50%, rgba(255, 255, 255, 0.001) 50%) -2vmin 50%, linear-gradient(to top, #8b7334 1vmin, rgba(255, 255, 255, 0.001) 1vmin);
+}
+#wrap .peak .peakside {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform-style: preserve-3d;
+}
+#wrap .peak .peakside:nth-of-type(2) {
+  left: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+#wrap .peak .peakside:nth-of-type(3) {
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+}
+#wrap .peak .peakside:nth-of-type(4) {
+  transform: translateZ(-5vmin) rotateY(-180deg);
+}
+#wrap .peak .peakside:nth-of-type(2) {
+  background: linear-gradient(to left, #7c672e 2vmin, rgba(255, 255, 255, 0.001) 2vmin, rgba(255, 255, 255, 0.001) 3.5vmin, #7c672e 3.5vmin), linear-gradient(to bottom, rgba(255, 255, 255, 0.001) 5vmin, #8b7334 5vmin, #8b7334 6vmin, rgba(255, 255, 255, 0.001) 5vmin, rgba(255, 255, 255, 0.001) 8vmin, #8b7334 8vmin);
+}
+#wrap .peak .peakside:nth-of-type(2):after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform-origin: right;
+  transform: rotateY(-90deg) translateZ(4vmin);
+  left: 0vmin;
+  background: #413618;
+  box-shadow: 2vmin 0 0 #665426;
+}
+#wrap .peak .peakside:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  height: 10vmin;
+  top: -8vmin;
+  background: linear-gradient(to bottom, #3b513d, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3b513d, #516e54 0.25vmin, #516e54 0.75vmin, #3b513d 1.5vmin, #3b513d 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #516e54, #3b513d 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  transform-origin: 50% 0%;
+  transform: rotateX(38.5deg) translateZ(-5vmin);
+}
+#wrap .peak .peakside:nth-of-type(3) {
+  background: linear-gradient(to right, #846d31 2vmin, rgba(255, 255, 255, 0.001) 2vmin, rgba(255, 255, 255, 0.001) 3.5vmin, #846d31 3.5vmin), linear-gradient(to bottom, rgba(255, 255, 255, 0.001) 5vmin, #846d31 5vmin, #846d31 6vmin, rgba(255, 255, 255, 0.001) 5vmin, rgba(255, 255, 255, 0.001) 8vmin, #846d31 8vmin);
+}
+#wrap .main {
+  position: absolute;
+  width: 65vmin;
+  height: 70vmin;
+  left: 7.5vmin;
+  transform: translateZ(-20vmin);
+}
+#wrap .main .window {
+  top: 55vmin;
+  left: 5vmin;
+  position: absolute;
+  width: 17.5vmin;
+  height: 10vmin;
+  transform: translateZ(5vmin);
+}
+#wrap .main .window .windowside {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform-style: preserve-3d;
+  background: linear-gradient(to top, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to bottom, #8b7334 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, #8b7334 0.5vmin, #dee4f7 0.5vmin, #dee4f7 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 3vmin, #8b7334 3vmin, #8b7334 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 7vmin) 50% 100%/100% 0.5vmin;
+  box-shadow: inset 1vmin 0 0 #8b7334, inset -1vmin 0 0 #8b7334;
+}
+#wrap .main .window .windowside:nth-of-type(2) {
+  left: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+#wrap .main .window .windowside:nth-of-type(3) {
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+}
+#wrap .main .window .windowside:nth-of-type(4) {
+  transform: translateZ(-17.5vmin) rotateY(-180deg);
+}
+#wrap .main .window .windowside:before {
+  content: "";
+  position: absolute;
+  width: 110%;
+  left: -5%;
+  height: 5vmin;
+  bottom: calc(100% - 2.5vmin);
+  transform-origin: 50% 100%;
+  transform: rotateX(45deg) translateZ(2vmin);
+  background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  -webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+#wrap .main .window .windowside:nth-of-type(1):before {
+  background: linear-gradient(to bottom, #48634b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #48634b, #5d8061 0.25vmin, #5d8061 0.75vmin, #48634b 1.5vmin, #48634b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5d8061, #48634b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window .windowside:nth-of-type(2):before {
+  background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window .windowside:nth-of-type(3):before {
+  background: linear-gradient(to bottom, #374b39, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #374b39, #4c694f 0.25vmin, #4c694f 0.75vmin, #374b39 1.5vmin, #374b39 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4c694f, #374b39 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window .windowside:nth-of-type(4):before {
+  background: linear-gradient(to bottom, #2e3f30, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2e3f30, #445d46 0.25vmin, #445d46 0.75vmin, #2e3f30 1.5vmin, #2e3f30 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #445d46, #2e3f30 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(4) {
+  position: absolute;
+  width: 17.5vmin;
+  height: 8vmin;
+  transform: translateZ(5vmin);
+  left: -2.5vmin;
+  top: 42.5vmin;
+}
+#wrap .main .window:nth-of-type(4) .windowside {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform-style: preserve-3d;
+  background: linear-gradient(to top, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to bottom, #8b7334 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, #8b7334 0.5vmin, #dee4f7 0.5vmin, #dee4f7 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 3vmin, #8b7334 3vmin, #8b7334 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 7vmin) 50% 100%/100% 0.5vmin;
+  box-shadow: inset 1vmin 0 0 #8b7334, inset -1vmin 0 0 #8b7334;
+}
+#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(2) {
+  left: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(3) {
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+}
+#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(4) {
+  transform: translateZ(-17.5vmin) rotateY(-180deg);
+}
+#wrap .main .window:nth-of-type(4) .windowside:before {
+  content: "";
+  position: absolute;
+  width: 110%;
+  left: -5%;
+  height: 5vmin;
+  bottom: calc(100% - 2.5vmin);
+  transform-origin: 50% 100%;
+  transform: rotateX(45deg) translateZ(2vmin);
+  background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  -webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(1):before {
+  background: linear-gradient(to bottom, #48634b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #48634b, #5d8061 0.25vmin, #5d8061 0.75vmin, #48634b 1.5vmin, #48634b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5d8061, #48634b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(2):before {
+  background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(3):before {
+  background: linear-gradient(to bottom, #374b39, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #374b39, #4c694f 0.25vmin, #4c694f 0.75vmin, #374b39 1.5vmin, #374b39 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4c694f, #374b39 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(4):before {
+  background: linear-gradient(to bottom, #2e3f30, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2e3f30, #445d46 0.25vmin, #445d46 0.75vmin, #2e3f30 1.5vmin, #2e3f30 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #445d46, #2e3f30 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(5) {
+  position: absolute;
+  width: 26vmin;
+  height: 9vmin;
+  transform: translateZ(5vmin);
+  left: 41.5vmin;
+  top: 37.5vmin;
+}
+#wrap .main .window:nth-of-type(5) .windowside {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform-style: preserve-3d;
+  background: linear-gradient(to top, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to bottom, #8b7334 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, #8b7334 0.5vmin, #dee4f7 0.5vmin, #dee4f7 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 3vmin, #8b7334 3vmin, #8b7334 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 7vmin) 50% 100%/100% 0.5vmin;
+  box-shadow: inset 1vmin 0 0 #8b7334, inset -1vmin 0 0 #8b7334;
+}
+#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(2) {
+  left: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(3) {
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+}
+#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(4) {
+  transform: translateZ(-26vmin) rotateY(-180deg);
+}
+#wrap .main .window:nth-of-type(5) .windowside:before {
+  content: "";
+  position: absolute;
+  width: 110%;
+  left: -5%;
+  height: 5vmin;
+  bottom: calc(100% - 2.5vmin);
+  transform-origin: 50% 100%;
+  transform: rotateX(45deg) translateZ(2vmin);
+  background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  -webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(1):before {
+  background: linear-gradient(to bottom, #48634b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #48634b, #5d8061 0.25vmin, #5d8061 0.75vmin, #48634b 1.5vmin, #48634b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5d8061, #48634b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(2):before {
+  background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(3):before {
+  background: linear-gradient(to bottom, #374b39, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #374b39, #4c694f 0.25vmin, #4c694f 0.75vmin, #374b39 1.5vmin, #374b39 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4c694f, #374b39 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(4):before {
+  background: linear-gradient(to bottom, #2e3f30, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2e3f30, #445d46 0.25vmin, #445d46 0.75vmin, #2e3f30 1.5vmin, #2e3f30 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #445d46, #2e3f30 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(3) {
+  background: #8b7334;
+}
+#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(3):before {
+  display: none;
+}
+#wrap .main .window:nth-of-type(2) {
+  left: 47.5vmin;
+  position: absolute;
+  width: 20vmin;
+  height: 10vmin;
+  transform: translateZ(5vmin);
+}
+#wrap .main .window:nth-of-type(2) .windowside {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform-style: preserve-3d;
+  background: linear-gradient(to top, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to bottom, #8b7334 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, #8b7334 0.5vmin, #dee4f7 0.5vmin, #dee4f7 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 3vmin, #8b7334 3vmin, #8b7334 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 7vmin) 50% 100%/100% 0.5vmin;
+  box-shadow: inset 1vmin 0 0 #8b7334, inset -1vmin 0 0 #8b7334;
+}
+#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(2) {
+  left: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(3) {
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+}
+#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(4) {
+  transform: translateZ(-20vmin) rotateY(-180deg);
+}
+#wrap .main .window:nth-of-type(2) .windowside:before {
+  content: "";
+  position: absolute;
+  width: 110%;
+  left: -5%;
+  height: 5vmin;
+  bottom: calc(100% - 2.5vmin);
+  transform-origin: 50% 100%;
+  transform: rotateX(45deg) translateZ(2vmin);
+  background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  -webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(1):before {
+  background: linear-gradient(to bottom, #48634b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #48634b, #5d8061 0.25vmin, #5d8061 0.75vmin, #48634b 1.5vmin, #48634b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5d8061, #48634b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(2):before {
+  background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(3):before {
+  background: linear-gradient(to bottom, #374b39, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #374b39, #4c694f 0.25vmin, #4c694f 0.75vmin, #374b39 1.5vmin, #374b39 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4c694f, #374b39 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(4):before {
+  background: linear-gradient(to bottom, #2e3f30, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2e3f30, #445d46 0.25vmin, #445d46 0.75vmin, #2e3f30 1.5vmin, #2e3f30 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #445d46, #2e3f30 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(3) {
+  position: absolute;
+  width: 70vmin;
+  height: 12.5vmin;
+  transform: translateZ(5vmin);
+  top: 22vmin;
+  left: -2.5vmin;
+}
+#wrap .main .window:nth-of-type(3) .windowside {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform-style: preserve-3d;
+  background: linear-gradient(to top, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to bottom, #8b7334 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, #8b7334 0.5vmin, #dee4f7 0.5vmin, #dee4f7 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 3vmin, #8b7334 3vmin, #8b7334 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 7vmin) 50% 100%/100% 0.5vmin;
+  box-shadow: inset 1vmin 0 0 #8b7334, inset -1vmin 0 0 #8b7334;
+}
+#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(2) {
+  left: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(3) {
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+}
+#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(4) {
+  transform: translateZ(-70vmin) rotateY(-180deg);
+}
+#wrap .main .window:nth-of-type(3) .windowside:before {
+  content: "";
+  position: absolute;
+  width: 110%;
+  left: -5%;
+  height: 5vmin;
+  bottom: calc(100% - 2.5vmin);
+  transform-origin: 50% 100%;
+  transform: rotateX(45deg) translateZ(2vmin);
+  background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  -webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(1):before {
+  background: linear-gradient(to bottom, #48634b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #48634b, #5d8061 0.25vmin, #5d8061 0.75vmin, #48634b 1.5vmin, #48634b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5d8061, #48634b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(2):before {
+  background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(3):before {
+  background: linear-gradient(to bottom, #374b39, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #374b39, #4c694f 0.25vmin, #4c694f 0.75vmin, #374b39 1.5vmin, #374b39 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4c694f, #374b39 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(4):before {
+  background: linear-gradient(to bottom, #2e3f30, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2e3f30, #445d46 0.25vmin, #445d46 0.75vmin, #2e3f30 1.5vmin, #2e3f30 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #445d46, #2e3f30 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(1):after {
+  background: linear-gradient(to bottom, #405843, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #405843, #567659 0.25vmin, #567659 0.75vmin, #405843 1.5vmin, #405843 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #567659, #405843 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(2):after {
+  background: linear-gradient(to bottom, #304232, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #304232, #466048 0.25vmin, #466048 0.75vmin, #304232 1.5vmin, #304232 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #466048, #304232 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(3):after {
+  background: linear-gradient(to bottom, #202c21, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #202c21, #364a38 0.25vmin, #364a38 0.75vmin, #202c21 1.5vmin, #202c21 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #364a38, #202c21 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(4):after {
+  background: linear-gradient(to bottom, #101611, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #101611, #263327 0.25vmin, #263327 0.75vmin, #101611 1.5vmin, #101611 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #263327, #101611 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+}
+#wrap .main .window:nth-of-type(3) .windowside:before {
+  content: "";
+  position: absolute;
+  width: 102%;
+  left: -1%;
+  height: 15vmin;
+  bottom: calc(100% - 2.5vmin);
+  transform-origin: 50% 100%;
+  transform: rotateX(40deg) translateZ(2vmin);
+  background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  -webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+#wrap .main .window:nth-of-type(3) .windowside:after {
+  content: "";
+  position: absolute;
+  width: 140%;
+  left: -20%;
+  height: 3vmin;
+  bottom: calc(100% - 12.5vmin);
+  transform-origin: 50% calc(0% - 5vmin);
+  transform: rotateX(135deg);
+  -webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
+}
+#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(2), #wrap .main .window:nth-of-type(3) .windowside:nth-of-type(3) {
+  height: 12.5vmin;
+  width: 45vmin;
+}
+#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(3) {
+  left: -45vmin;
+}
+#wrap .main .window:nth-of-type(3) .windowside:last-of-type {
+  transform: translateZ(-45vmin) rotateY(180deg);
+}
+#wrap .main .side {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  top: 20vmin;
+  -webkit-mask: linear-gradient(to top, transparent, #000 17.5vmin);
+          mask: linear-gradient(to top, transparent, #000 17.5vmin);
+  transform-style: preserve-3d;
+}
+#wrap .main .side:nth-of-type(2) {
+  left: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+#wrap .main .side:nth-of-type(3) {
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+}
+#wrap .main .side:nth-of-type(4) {
+  transform: translateZ(-45vmin) rotateY(-180deg);
+}
+#wrap .main .side:nth-of-type(2), #wrap .main .side:nth-of-type(3) {
+  width: 45vmin;
+}
+#wrap .main .side:nth-of-type(3) {
+  left: -45vmin;
+}
+#wrap .main .side:nth-of-type(1) {
+  background: #d0534a;
+}
+#wrap .main .side:nth-of-type(2) {
+  background: #ca4035;
+}
+#wrap .main .side:nth-of-type(3) {
+  background: #b63a30;
+}
+#wrap .main .side:nth-of-type(4) {
+  background: #a2332a;
+}
+#wrap .baseblock {
+  width: 30vmin;
+  height: 30vmin;
+  position: absolute;
+  bottom: -7.5vmin;
+  left: 0vmin;
+}
+#wrap .baseblock .side:last-of-type {
+  -webkit-mask: linear-gradient(to left, #000 2vmin, rgba(255, 255, 255, 0.001) 2vmin, rgba(255, 255, 255, 0.001) 6vmin, #000 4vmin) 50% 1vmin/100% 10vmin no-repeat, linear-gradient(to bottom, #000 2vmin, rgba(255, 255, 255, 0.001) 2vmin, rgba(255, 255, 255, 0.001) 10vmin, #000 10vmin);
+          mask: linear-gradient(to left, #000 2vmin, rgba(255, 255, 255, 0.001) 2vmin, rgba(255, 255, 255, 0.001) 6vmin, #000 4vmin) 50% 1vmin/100% 10vmin no-repeat, linear-gradient(to bottom, #000 2vmin, rgba(255, 255, 255, 0.001) 2vmin, rgba(255, 255, 255, 0.001) 10vmin, #000 10vmin);
+}
+#wrap .baseblock .side:last-of-type:before {
+  background: linear-gradient(to bottom, #5b7d5f 3vmin, #bfbfbf 3vmin, #b3b3b3);
+  box-shadow: none;
+}
+#wrap .baseblock .steps {
+  position: absolute;
+  width: 20vmin;
+  height: 20vmin;
+  transform-origin: right;
+  left: -10vmin;
+  top: 10vmin;
+  transform: translateZ(-30vmin) rotateY(-90deg);
+}
+#wrap .baseblock .steps:before, #wrap .baseblock .steps:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform: translateZ(10.25vmin);
+  background-color: #bfbfbf;
+  background-image: linear-gradient(335deg, #b3b3b3 2.3vmin, transparent 2.3vmin), linear-gradient(155deg, #b3b3b3 2.4vmin, transparent 2.4vmin), linear-gradient(335deg, #b3b3b3 2.3vmin, transparent 2.3vmin), linear-gradient(155deg, #b3b3b3 2.4vmin, transparent 2.3vmin);
+  background-size: 5.8vmin 5.8vmin;
+  background-position: 0px 0.5vmin, 0.6vmin 3.6vmin, 3vmin 3.2vmin, 3.5vmin 0.7vmin;
+  -webkit-mask: linear-gradient(135deg, rgba(255, 255, 255, 0.001) 55%, #000 50%, #000 65%, rgba(255, 255, 255, 0.001) 80%);
+}
+#wrap .baseblock .steps:after {
+  background: rgba(204, 204, 204, 0.5);
+}
+#wrap .baseblock .steps .step {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 10%;
+  height: 50%;
+  transform-origin: top;
+  transform: rotateX(90deg);
+}
+#wrap .baseblock .steps .step:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  right: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+#wrap .baseblock .steps .step:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  height: 5vmin;
+  background: #ccc;
+  top: 100%;
+  transform-origin: top;
+  transform: rotateX(-90deg);
+}
+#wrap .baseblock .steps .step:nth-of-type(1) {
+  background: #9e9e9e;
+  left: 0%;
+  top: 90%;
+}
+#wrap .baseblock .steps .step:nth-of-type(1):before {
+  background: #757575;
+}
+#wrap .baseblock .steps .step:nth-of-type(2) {
+  background: #a3a3a3;
+  left: 10%;
+  top: 80%;
+}
+#wrap .baseblock .steps .step:nth-of-type(2):before {
+  background: #7a7a7a;
+}
+#wrap .baseblock .steps .step:nth-of-type(3) {
+  background: #a8a8a8;
+  left: 20%;
+  top: 70%;
+}
+#wrap .baseblock .steps .step:nth-of-type(3):before {
+  background: gray;
+}
+#wrap .baseblock .steps .step:nth-of-type(4) {
+  background: #adadad;
+  left: 30%;
+  top: 60%;
+}
+#wrap .baseblock .steps .step:nth-of-type(4):before {
+  background: #858585;
+}
+#wrap .baseblock .steps .step:nth-of-type(5) {
+  background: #b3b3b3;
+  left: 40%;
+  top: 50%;
+}
+#wrap .baseblock .steps .step:nth-of-type(5):before {
+  background: #8a8a8a;
+}
+#wrap .baseblock .steps .step:nth-of-type(6) {
+  background: #b8b8b8;
+  left: 50%;
+  top: 40%;
+}
+#wrap .baseblock .steps .step:nth-of-type(6):before {
+  background: #8f8f8f;
+}
+#wrap .baseblock .steps .step:nth-of-type(7) {
+  background: #bdbdbd;
+  left: 60%;
+  top: 30%;
+}
+#wrap .baseblock .steps .step:nth-of-type(7):before {
+  background: #949494;
+}
+#wrap .baseblock .steps .step:nth-of-type(8) {
+  background: #c2c2c2;
+  left: 70%;
+  top: 20%;
+}
+#wrap .baseblock .steps .step:nth-of-type(8):before {
+  background: #999999;
+}
+#wrap .baseblock .steps .step:nth-of-type(9) {
+  background: #c7c7c7;
+  left: 80%;
+  top: 10%;
+}
+#wrap .baseblock .steps .step:nth-of-type(9):before {
+  background: #9e9e9e;
+}
+#wrap .baseblock .steps .step:nth-of-type(10) {
+  background: #cccccc;
+  left: 90%;
+  top: 0%;
+}
+#wrap .baseblock .steps .step:nth-of-type(10):before {
+  background: #a3a3a3;
+}
+#wrap .baseblock .tree {
+  position: absolute;
+  width: 15vmin;
+  height: 30vmin;
+  top: -27.5vmin;
+  left: 17.5vmin;
+  transform: translateX(calc(var(--mouseX) * 13vmin)) translateZ(-10vmin) rotateY(calc(-25deg - (var(--mouseX) * 25deg))) rotateX(calc(var(--mouseX) * -2.5deg));
+  background: radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.001) 5vmin, #78642d 5vmin, #8b7334 7vmin, rgba(255, 255, 255, 0.001) 7vmin);
+}
+#wrap .baseblock .tree .branch {
+  position: absolute;
+  width: 15vmin;
+  height: 7.5vmin;
+  background: #81a485;
+  bottom: 5vmin;
+  border-radius: 100vmin 100vmin 100vmin 100vmin/75vmin 75vmin 50vmin 50vmin;
+  right: -6.5vmin;
+  transform-origin: bottom;
+  box-shadow: inset calc(var(--mouseX) * 5vmin) -1vmin 3vmin #5b7d5f, inset calc(var(--mouseX) * -5vmin) 1vmin 3vmin #cbd9cd;
+}
+#wrap .baseblock .tree .branch:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.001) 5vmin, #78642d 5vmin, #8b7334 7vmin, rgba(255, 255, 255, 0.001) 7vmin);
+  top: -50%;
+  height: 50%;
+}
+#wrap .baseblock .tree .branch:first-of-type {
+  transform: translateX(calc(var(--mouseX) * 3vmin));
+}
+#wrap .baseblock .tree .branch:first-of-type:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.001) 5vmin, #78642d 5vmin, #8b7334 6.5vmin, rgba(255, 255, 255, 0.001) 6.5vmin);
+  transform: scaleX(-1);
+  top: -35%;
+  height: 50%;
+  left: 1.5vmin;
+}
+#wrap .baseblock .tree .branch:nth-of-type(2) {
+  bottom: 15vmin;
+  right: -2.5vmin;
+  transform: scale(0.9);
+}
+#wrap .baseblock .tree .branch:nth-of-type(2):before {
+  transform: translateX(-1.5vmin) scaleX(-1);
+  top: -45%;
+}
+#wrap .baseblock .tree .branch:nth-of-type(3) {
+  bottom: 13vmin;
+  right: -10vmin;
+  transform: scale(0.75) translateZ(-1vmin) translateX(calc(var(--mouseX) * 3vmin));
+  background: #90ae93;
+}
+#wrap .baseblock .tree .branch:nth-of-type(3):before {
+  background: radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.001) 5vmin, #8b7334 5vmin, #8b7334 6.25vmin, rgba(255, 255, 255, 0.001) 6.25vmin);
+  transform: translateX(5vmin) scaleX(-1);
+  top: -45%;
+  left: -5vmin;
+}
+#wrap .baseblock .tree .branch:nth-of-type(4) {
+  bottom: 21vmin;
+  right: -11.5vmin;
+  transform: scale(0.6) translateX(calc(var(--mouseX) * 3vmin));
+  background: #739977;
+}
+#wrap .baseblock .tree .branch:nth-of-type(4):before {
+  background: #81a485;
+  border-radius: inherit;
+  height: 125%;
+  width: 115%;
+  left: -14vmin;
+  top: -5vmin;
+  box-shadow: inherit;
+}
+#wrap .baseblock .tree .branch:last-of-type {
+  bottom: 30vmin;
+  right: -7.5vmin;
+}
+#wrap .baseblock .tree .branch:last-of-type:before {
+  top: 95%;
+  transform: scaleX(-1);
+  left: -6vmin;
+}
+#wrap .baseblock:nth-of-type(2) {
+  left: auto;
+  right: 0vmin;
+  width: 40vmin;
+}
+#wrap .baseblock:nth-of-type(2):before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  left: -20vmin;
+  top: auto;
+  bottom: 0;
+  width: 20vmin;
+  height: 22.5vmin;
+  background: linear-gradient(to bottom, #999999 2.5vmin, #ce5046 2vmin);
+}
+#wrap .baseblock:nth-of-type(2) .side {
+  transform-style: preserve-3d;
+}
+#wrap .baseblock:nth-of-type(2) .side:nth-of-type(2) {
+  left: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+#wrap .baseblock:nth-of-type(2) .side:nth-of-type(3) {
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+}
+#wrap .baseblock:nth-of-type(2) .side:nth-of-type(4) {
+  transform: translateZ(-40vmin) rotateY(-180deg);
+}
+#wrap .baseblock:nth-of-type(2) .side:after {
+  width: calc(100% + 8vmin);
+  left: -4vmin;
+}
+#wrap .baseblock:nth-of-type(2) .side:first-of-type:after {
+  -webkit-clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 7.5% 100%);
+          clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 7.5% 100%);
+}
+#wrap .baseblock:nth-of-type(2) .side:nth-of-type(3) {
+  opacity: 0;
+}
+#wrap .baseblock:nth-of-type(2) .side:nth-of-type(3):after {
+  display: none;
+}
+#wrap .baseblock:nth-of-type(2) .side:nth-of-type(2) {
+  opacity: 1;
+}
+#wrap .baseblock:nth-of-type(2) .side:nth-of-type(2):after {
+  display: block;
+}
+#wrap .baseblock .side {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  transform-style: preserve-3d;
+}
+#wrap .baseblock .side:nth-of-type(2) {
+  left: 100%;
+  transform-origin: left;
+  transform: rotateY(90deg);
+}
+#wrap .baseblock .side:nth-of-type(3) {
+  left: -100%;
+  transform-origin: right;
+  transform: rotateY(-90deg);
+}
+#wrap .baseblock .side:nth-of-type(4) {
+  transform: translateZ(-30vmin) rotateY(-180deg);
+}
+#wrap .baseblock .side:nth-of-type(2) {
+  opacity: 0;
+}
+#wrap .baseblock .side:nth-of-type(2):after {
+  display: none;
+}
+#wrap .baseblock .side:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  height: 10vmin;
+  background: linear-gradient(to bottom, #999999 -25%, rgba(255, 255, 255, 0.001)), repeating-linear-gradient(45deg, #ccc 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.25vmin, #ccc 1.25vmin, #ccc 1.75vmin), repeating-linear-gradient(-45deg, #ccc 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.25vmin, #ccc 1.25vmin, #ccc 1.75vmin), #666666;
+  box-shadow: inset 0 0 0 0.5vmin #ccc;
+}
+#wrap .baseblock .side:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  height: 5vmin;
+  width: calc(100% + 7.5vmin);
+  left: -3.75vmin;
+  transform-origin: top;
+  box-shadow: inset 0 -0.5vmin 0 #d5a536;
+  background: linear-gradient(to bottom, #338472, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #338472, #41a992 0.25vmin, #41a992 0.75vmin, #338472 1.5vmin, #338472 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #41a992, #338472 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
+  transform: rotateX(55deg);
+  -webkit-clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
+          clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
+}
+#wrap .baseblock .side:first-of-type:after {
+  -webkit-clip-path: polygon(7.5% 0%, 90% 0%, 90% 100%, 0% 100%);
+          clip-path: polygon(7.5% 0%, 90% 0%, 90% 100%, 0% 100%);
+}
+#wrap .baseblock .side:last-of-type:after {
+  display: none;
+}
+#wrap .baseblock .side:nth-of-type(1) {
+  background: #ce5046;
+}
+#wrap .baseblock .side:nth-of-type(2) {
+  background: #c73f34;
+}
+#wrap .baseblock .side:nth-of-type(3) {
+  background: #b2382f;
+}
+#wrap .baseblock .side:nth-of-type(4) {
+  background: #9e3229;
+}
+
+.clouds {
+  z-index: 999;
+  transform-style: preserve-3d;
+  position: absolute;
+  width: 125vmin;
+  height: 25vmin;
+  bottom: -18vmin;
+  left: -35vmin;
+  transform: translateY(calc(-7.5vmin + (var(--mouseX) * -2.5vmin))) translateX(calc(var(--mouseX) * -322.5vmin)) scale(1.5) scaleX(2) rotateY(calc(-5deg + (var(--mouseX) * 45deg))) rotateX(0deg) translateZ(75vmin) rotate(calc(var(--mouseX) * 30deg));
+  -webkit-mask: linear-gradient(to bottom, #000 50%, rgba(255, 255, 255, 0.001) 100%);
+          mask: linear-gradient(to bottom, #000 50%, rgba(255, 255, 255, 0.001) 100%);
+  background: linear-gradient(to top, #000, rgba(255, 255, 255, 0.001) 75%);
+  filter: drop-shadow(calc(-55vmin * var(--mouseX)) calc((-2.75vmin * var(--mouseX)) - 1vmin) 0vmin #f6f1e7) drop-shadow(calc(7.5vmin * var(--mouseX)) calc((-0.5vmin * var(--mouseX)) - 1vmin) 0 #f3ebde) blur(3px);
+}
+.clouds:last-of-type {
+  transform: translateY(calc(-8.5vmin + (var(--mouseX) * 10vmin))) translateX(calc(var(--mouseX) * 450vmin)) scale(1.5) scaleX(3) rotateY(calc(-25deg + (var(--mouseX) * 65deg))) rotateX(0deg) translateZ(calc(-100vmin + (var(--mouseX) * -50vmin)));
+  opacity: 0.65;
+}
+.clouds:before, .clouds:after {
+  content: "";
+  position: absolute;
+  width: 40vmin;
+  height: 40vmin;
+  background: #faf6f1;
+  top: 1.5vmin;
+  border-radius: 50vmin 50vmin 0 0;
+  box-shadow: -20vmin 0 0 -5vmin white, -40vmin 0 0 -1.5vmin white, 20vmin 0 0 -5vmin white, 45vmin 0 0 -1vmin white, 55vmin 0 0 -6.5vmin white, 70vmin 0 0 -1.5vmin white, 90vmin 0 0 -3.5vmin white, 110vmin 0 0 -1.5vmin white;
+  opacity: 0.5;
+  left: 5vmin;
+  transform: translate(calc(var(--mouseX) * 2vmin), calc(var(--mouseX) * 0.5vmin));
+}
+.clouds:before {
+  transform: translate(calc(var(--mouseX) * -2vmin), calc(var(--mouseX) * -0.5vmin));
+}
+.clouds:after {
+  left: -15vmin;
+}
\ No newline at end of file
diff --git a/spirited-away-bathhouse-aburaya3d-css/license.txt b/spirited-away-bathhouse-aburaya3d-css/license.txt
new file mode 100644
index 0000000..389638f
--- /dev/null
+++ b/spirited-away-bathhouse-aburaya3d-css/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/GRMdwwG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/spirited-away-bathhouse-aburaya3d-css/src/index.haml b/spirited-away-bathhouse-aburaya3d-css/src/index.haml
new file mode 100644
index 0000000..ce46449
--- /dev/null
+++ b/spirited-away-bathhouse-aburaya3d-css/src/index.haml
@@ -0,0 +1,69 @@
+-20.times do
+ .panel
+
+
+#wrap
+ .bridge
+  -25.times do
+   .plank
+    -2.times do
+     .rail
+  %span.noface
+   .body
+    .face
+ .baseblock
+  -4.times do
+   .side
+  %span.tree
+   -5.times do
+    .branch
+ .baseblock
+  -4.times do
+   .side
+  %span.steps
+   -10.times do
+    .step
+ .center
+  -4.times do
+   .side
+    .topside
+    %span.upper
+     .rail
+     .topsection
+      -10.times do
+       .roof
+  -25.times do
+   .plank
+  -5.times do
+   %span.leaf
+ .main
+  -3.times do
+   .side
+  .peak
+   -3.times do
+    .peakside
+  -5.times do
+   %span.window
+    -4.times do
+     .windowside
+ .rearblock
+  -3.times do
+   .side
+ .upperblock
+  -4.times do
+   .side
+  %span.window
+   -4.times do
+    .windowside
+  .roofblock
+   .roofside
+    -20.times do
+     .roofplank
+   %span.tower
+    -8.times do
+     .towerside
+   %span.roofpeak
+    -2.times do
+     .roof
+ -2.times do
+  .clouds
diff --git a/spirited-away-bathhouse-aburaya3d-css/src/style.scss b/spirited-away-bathhouse-aburaya3d-css/src/style.scss
new file mode 100644
index 0000000..906c309
--- /dev/null
+++ b/spirited-away-bathhouse-aburaya3d-css/src/style.scss
@@ -0,0 +1,1935 @@
+$r: #d8726a;
+$t: rgba(255, 255, 255, 0.001);
+$g: #ccc;
+$gr: #668c6a;
+$br: #8b7334;
+$y: #deb860;
+$bl: #c9d3f2;
+$d: #511124;
+$db: #7fabc5;
+$lb: #f3ebde;
+
+@mixin side() {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+@mixin bricks() {
+  background-color: darken($g, 5%);
+  background-image: linear-gradient(
+      335deg,
+      darken($g, 10%) 2.3vmin,
+      transparent 2.3vmin
+    ),
+    linear-gradient(155deg, darken($g, 10%) 2.4vmin, transparent 2.4vmin),
+    linear-gradient(335deg, darken($g, 10%) 2.3vmin, transparent 2.3vmin),
+    linear-gradient(155deg, darken($g, 10%) 2.4vmin, transparent 2.3vmin);
+  background-size: 5.8vmin 5.8vmin;
+  background-position: 0px 0.5vmin, 0.6vmin 3.6vmin, 3vmin 3.2vmin,
+    3.5vmin 0.7vmin;
+}
+
+@mixin shade($color) {
+  background: linear-gradient(to bottom, darken($color, 10%), $t) 50% 0% / 100%
+      calc(100% - 2vmin) no-repeat,
+    repeating-linear-gradient(
+        to right,
+        darken($color, 10%),
+        $color 0.25vmin,
+        $color 0.75vmin,
+        darken($color, 10%) 1.5vmin,
+        darken($color, 10%) 1.75vmin
+      )
+      50% 0% / 100% calc(100% - 2vmin) no-repeat,
+    radial-gradient(circle at top, $color, darken($color, 10%) 1vmin, $t 1vmin)
+      50% 100% / 2vmin 2vmin;
+}
+
+@mixin lattice() {
+  background: linear-gradient(to bottom, darken($g, 20%) -25%, $t),
+    repeating-linear-gradient(
+      45deg,
+      $g 0.5vmin,
+      $t 0.5vmin,
+      $t 1.25vmin,
+      $g 1.25vmin,
+      $g 1.75vmin
+    ),
+    repeating-linear-gradient(
+      -45deg,
+      $g 0.5vmin,
+      $t 0.5vmin,
+      $t 1.25vmin,
+      $g 1.25vmin,
+      $g 1.75vmin
+    ),
+    darken($g, 40%);
+}
+
+@mixin cube($width, $height) {
+  transform-style: preserve-3d;
+  &:nth-of-type(2) {
+    left: 100%;
+    transform-origin: left;
+    transform: rotateY(90deg);
+  }
+  &:nth-of-type(3) {
+    left: -100%;
+    transform-origin: right;
+    transform: rotateY(-90deg);
+  }
+  &:nth-of-type(4) {
+    transform: translateZ($width * -1) rotateY(-180deg);
+  }
+}
+
+@mixin window($width, $height) {
+  position: absolute;
+  width: $width;
+  height: $height;
+  transform: translateZ(5vmin);
+  .windowside {
+    @include side();
+    @include cube($width, $height);
+    background: linear-gradient(to top, $br 3vmin, $t 3vmin) 50% 0% / 100%
+        calc(100% - 0.5vmin) no-repeat,
+      repeating-linear-gradient(
+          to bottom,
+          $br 0.5vmin,
+          $t 0.5vmin,
+          $t 1.5vmin,
+          $br 1.5vmin,
+          $br 2vmin
+        )
+        50% 0% / 100% calc(100% - 0.5vmin) no-repeat,
+      repeating-linear-gradient(
+          to right,
+          $br 0.5vmin,
+          lighten($bl, 5%) 0.5vmin,
+          lighten($bl, 5%) 1.5vmin,
+          $br 1.5vmin,
+          $br 2vmin
+        )
+        50% 0% / 100% calc(100% - 0.5vmin) no-repeat,
+      repeating-linear-gradient(
+          to right,
+          $t 3vmin,
+          $br 3vmin,
+          $br 4vmin,
+          $t 4vmin,
+          $t 7vmin
+        )
+        50% 100% / 100% 0.5vmin;
+    box-shadow: inset 1vmin 0 0 $br, inset -1vmin 0 0 $br;
+    &:before {
+      content: "";
+      position: absolute;
+      width: 110%;
+      left: -5%;
+      height: 5vmin;
+      bottom: calc(100% - 2.5vmin);
+      transform-origin: 50% 100%;
+      transform: rotateX(45deg) translateZ(2vmin);
+      @include shade($gr);
+      -webkit-mask: linear-gradient(-125deg, $t 20%, #000 5%) 100% 100% / 50%
+          100% no-repeat,
+        linear-gradient(125deg, $t 20%, #000 5%) 0% 100% / 50% 100% no-repeat;
+    }
+    @for $i from 1 through 4 {
+      &:nth-of-type(#{$i}) {
+        &:before {
+          @include shade(darken($gr, ($i * 4)));
+        }
+      }
+    }
+  }
+}
+
+body {
+  --mouseX: 0;
+  --mouseY: 0;
+  display: grid;
+  height: 100vh;
+  overflow: hidden;
+  place-items: center;
+  background: linear-gradient(to top, $lb 25%, $t 50%),
+    radial-gradient(circle at center, $lb 7.5vmin, darken($db, 5%) 50vmin);
+  perspective: 300vmin;
+  &:active:hover {
+    #wrap {
+      transform: translateZ(calc((var(--mouseX) * -7.5vmin) + 55vmin))
+        translateY(7.5vmin) scale(0.5)
+        rotateY(calc(25deg + (var(--mouseX) * 65deg))) rotateX(0);
+      transition: 2s ease-in-out;
+      * {
+        transition: 2s ease-in-out;
+        &:before,
+        &:after {
+          transition: 2s ease-in-out;
+        }
+      }
+    }
+  }
+  &:hover {
+    #wrap {
+      transition: 0s ease-in-out;
+      * {
+        transition: 0s ease-in-out;
+        &:before,
+        &:after {
+          transition: 0s ease-in-out;
+        }
+      }
+    }
+  }
+  .panel {
+    position: fixed;
+    z-index: 999;
+    width: 5vw;
+    height: 100vh;
+    top: 0;
+    @for $i from 1 through 20 {
+      &:nth-of-type(#{$i}) {
+        left: #{($i - 1) * 5vw};
+        &:hover {
+          & ~ #wrap {
+            --mouseX: #{($i/30) - 0.35};
+          }
+        }
+      }
+    }
+  }
+  &:before {
+    content: "";
+    position: absolute;
+    width: 65vmin;
+    height: 70vmin;
+    box-shadow: 0 0 0 5vmin #fff, 0 5vmin 10vmin -2.5vmin rgba(0, 0, 0, 0.5),
+      0 0 0 200vw $lb;
+    z-index: 998;
+  }
+  .upperblock {
+    position: absolute;
+    width: 50vmin;
+    height: 100vmin;
+    left: 15.5vmin;
+    top: -2.5vmin;
+    transform: translateZ(-25vmin);
+    .roofblock {
+      @include side();
+      top: -9.5vmin;
+      height: 7.5vmin;
+      width: 20vmin;
+      left: calc(50% - 10vmin);
+      transform: scaleY(1.25) scaleX(1.25) translateZ(25vmin);
+      .tower {
+        @include side();
+        width: 3vmin;
+        height: 5.5vmin;
+        left: calc(50% - 3vmin);
+        top: auto;
+        bottom: 100%;
+        transform: translateZ(-62.5vmin);
+        .towerside {
+          @include side();
+          &:before,
+          &:after {
+            @include side();
+            left: -1.5vmin;
+            top: auto;
+            bottom: calc(100% - 1.25vmin);
+            transform: rotateX(-30deg);
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0 3vmin 11vmin 3vmin;
+          }
+          &:after {
+            left: calc(50% - 0.375vmin);
+            bottom: calc(100% + 4.5vmin);
+            border-width: 0 0.75vmin 11vmin 0.75vmin;
+            transform: translateZ(4.85vmin) rotateX(-8.5deg);
+            transform-origin: 50% -11vmin;
+          }
+          @for $i from 1 through 8 {
+            transform-origin: 50% 50% 3vmin;
+            &:nth-of-type(#{$i}) {
+              background: linear-gradient(
+                  to top,
+                  lighten($y, $i * 4 + 4) 0.5vmin,
+                  lighten($y, $i * 4 + 1) 0.5vmin,
+                  lighten($y, $i * 4 + 1) 0.7vmin,
+                  $t 0.7vmin
+                ),
+                radial-gradient(
+                    circle at bottom,
+                    rgba($lb, 0.5) 1vmin,
+                    lighten($y, $i * 4 + 2) 1vmin
+                  )
+                  50%
+                  calc(0% - 3.5vmin) /
+                  100%
+                  100%
+                  no-repeat,
+                linear-gradient(
+                  to right,
+                  lighten($y, $i * 4 + 2) 0.5vmin,
+                  $t 0.5vmin,
+                  $t calc(100% - 0.5vmin),
+                  lighten($y, $i * 4 + 2) calc(100% - 0.5vmin)
+                );
+              transform: rotateY(#{(360/8) * $i}deg);
+              &:before {
+                border-color: transparent
+                  transparent
+                  darken($gr, $i * 4)
+                  transparent;
+              }
+              &:after {
+                border-color: transparent
+                  transparent
+                  lighten($y, $i * 2)
+                  transparent;
+              }
+            }
+          }
+        }
+      }
+      .roofside {
+        @include side();
+        background: repeating-linear-gradient(
+          to right,
+          $y 0.25vmin,
+          $br 0.25vmin,
+          $br 1vmin,
+          $y 1vmin,
+          $y 1.25vmin
+        );
+        border-radius: 95vmin 95vmin 0 0 / 70vmin 70vmin 0 0;
+        box-shadow: inset 0 0 0 1.5vmin $y;
+        transform: translateZ(-5vmin);
+        &:before,
+        &:after {
+          @include side();
+          background: radial-gradient(
+            circle at bottom,
+            darken($y, 10%) 50%,
+            $y
+          );
+          border-radius: 5vmin 5vmin 0.5vmin 0.5vmin;
+          top: -72.5%;
+          width: 50%;
+          left: 25%;
+          height: 75%;
+          transform-origin: bottom;
+          transform: scale(0.75) translateZ(-4vmin)
+            rotateY(calc(-25deg - (var(--mouseX) * 65deg)))
+            rotateX(calc(var(--mouseX) * -2.5deg));
+          box-shadow: inset calc(var(--mouseX) * 5vmin) 0 2vmin darken($y, 20%);
+        }
+        &:after {
+          top: -82.5%;
+          width: 35%;
+          left: 32.5%;
+          height: 50%;
+          background: radial-gradient(
+            circle at bottom,
+            $y 50%,
+            lighten($y, 10%)
+          );
+          mask: linear-gradient(to top, $t 1vmin, #000 1.5vmin);
+        }
+        .roofplank {
+          top: 17.5vmin;
+          height: 4.5vmin;
+          width: 1vmin;
+          position: absolute;
+          left: calc(50% - 0.5vmin);
+          transform-origin: 50% -150%;
+          &:before {
+            content: "";
+            position: absolute;
+            width: 175%;
+            height: 40vmin;
+            top: 100%;
+            left: -37.5%;
+            background: radial-gradient(
+                  circle at left,
+                  darken($gr, 10%) 2vmin,
+                  $t 2vmin
+                )
+                calc(50% + 1vmin) calc(50% + 1vmin) / 6vmin 6vmin,
+              radial-gradient(
+                  circle at left,
+                  darken($gr, 5%) 2vmin,
+                  darken($gr, 15%) 2vmin
+                )
+                calc(50% + 1vmin) calc(50% - 1vmin) / 6vmin 6vmin;
+            transform-origin: top;
+            transform: translateZ(5vmin) rotateX(-90deg);
+          }
+          @for $i from 1 through 20 {
+            &:nth-of-type(#{$i}) {
+              transform: rotate(#{((($i/1) - 1) * (90/12)) + 110}deg);
+            }
+            @for $i from 12 through 25 {
+              &:nth-of-type(#{$i}) {
+                &:before {
+                  background: radial-gradient(
+                        circle at right,
+                        darken($gr, 10%) 2vmin,
+                        $t 2vmin
+                      )
+                      calc(50% - 1vmin)
+                      calc(50% - 1vmin) /
+                      6vmin
+                      6vmin,
+                    radial-gradient(
+                        circle at right,
+                        darken($gr, 5%) 2vmin,
+                        darken($gr, 15%) 2vmin
+                      )
+                      calc(50% - 1vmin)
+                      calc(50% + 1vmin) /
+                      6vmin
+                      6vmin;
+                }
+              }
+            }
+          }
+        }
+        &:last-of-type {
+          transform: translateZ(-35vmin);
+        }
+      }
+    }
+    .window {
+      top: 0vmin;
+      left: -2.5vmin;
+      @include window(55vmin, 1vmin);
+      .windowside {
+        @for $i from 1 through 4 {
+          &:nth-of-type(#{$i}) {
+            &:before {
+              @include shade(darken($gr, ($i * 5)));
+            }
+            &:after {
+              @include shade(darken($gr, (($i * 5) - 2)));
+            }
+          }
+          &:after {
+            content: "";
+            position: absolute;
+            width: 155%;
+            left: -27.5%;
+            height: 5vmin;
+            bottom: calc(100% - 15.5vmin);
+            transform-origin: 50% calc(0% - 5vmin);
+            transform: rotateX(115deg);
+            -webkit-mask: linear-gradient(
+                  -125deg,
+                  rgba(255, 255, 255, 0.001) 20%,
+                  #000 5%
+                )
+                100%
+                100%/50%
+                100%
+                no-repeat,
+              linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%)
+                0%
+                100%/50%
+                100%
+                no-repeat;
+          }
+        }
+        &:before {
+          content: "";
+          position: absolute;
+          top: 0vmin;
+          width: 120%;
+          left: -10%;
+          height: 15vmin;
+          bottom: calc(100% - 2.5vmin);
+          transform-origin: 50% 100%;
+          transform: rotateX(60deg) translateZ(13vmin);
+          @include shade($gr);
+          -webkit-mask: linear-gradient(-132deg, $t 26%, #000 5%) 100% 100% /
+              50% 100% no-repeat,
+            linear-gradient(132deg, $t 26%, #000 5%) 0% 100% / 50% 100%
+              no-repeat;
+        }
+      }
+    }
+    .side {
+      @include side();
+      @include cube(50vmin, 10vmin);
+      mask: linear-gradient(to top, transparent 7.5vmin, #000 17.5vmin);
+      box-shadow: 0 0 0 0.05vmin $r, inset 0 0 0 0.5vmin $r;
+      &:first-of-type {
+        &:before {
+          @include side();
+          background: darken($r, 10%);
+          top: -50vmin;
+          height: 50vmin;
+          transform-origin: bottom;
+          transform: rotateX(90deg);
+        }
+      }
+      @for $i from 1 through 4 {
+        &:nth-of-type(#{$i}) {
+          box-shadow: 0 0 0 0.05vmin $r,
+            inset 0 0 0 0.5vmin darken($r, ($i * 6));
+          background: repeating-linear-gradient(
+                to right,
+                darken($y, ($i * 6)) 1.5vmin,
+                $t 1.5vmin,
+                $t 10vmin,
+                darken($y, ($i * 6)) 10vmin,
+                darken($y, ($i * 6)) 11.25vmin
+              )
+              50%
+              2vmin /
+              100%
+              3vmin
+              no-repeat,
+            repeating-linear-gradient(
+              to right,
+              darken($r, ($i * 6)) 1.5vmin,
+              $t 1.5vmin,
+              $t 10vmin,
+              darken($r, ($i * 6)) 10vmin,
+              darken($r, ($i * 6)) 11.25vmin
+            ),
+            linear-gradient(
+              to bottom,
+              darken($r, ($i * 4)) 4vmin,
+              $t 4vmin,
+              $t 12.5vmin,
+              darken($r, ($i * 6)) 10vmin
+            ),
+            rgba(lighten($bl, 10%), 0.75);
+        }
+        &:first-of-type {
+          background: repeating-linear-gradient(
+                to right,
+                darken($y, ($i * 1)) 1.5vmin,
+                $t 1.5vmin,
+                $t 10vmin,
+                darken($y, ($i * 1)) 10vmin,
+                darken($y, ($i * 1)) 11.25vmin
+              )
+              50%
+              2vmin /
+              100%
+              2vmin
+              no-repeat,
+            repeating-linear-gradient(
+              to right,
+              darken($r, ($i * 1)) 1.5vmin,
+              $t 1.5vmin,
+              $t 10vmin,
+              darken($r, ($i * 1)) 10vmin,
+              darken($r, ($i * 1)) 11.25vmin
+            ),
+            linear-gradient(
+              to bottom,
+              darken($r, ($i * 4)) 4vmin,
+              $t 4vmin,
+              $t 10vmin,
+              darken($r, ($i * 1)) 10vmin,
+              darken($r, ($i * 1)) 10.5vmin,
+              $t 10.5vmin,
+              $t 12.5vmin,
+              darken($r, ($i * 1)) 10vmin
+            ),
+            repeating-linear-gradient(
+                to right,
+                $r 0.25vmin,
+                $t 0.25vmin,
+                $t 0.5vmin,
+                $r 0.5vmin,
+                $r 0.75vmin
+              )
+              50%
+              10vmin /
+              100%
+              25vmin
+              repeat-x,
+            rgba(lighten($bl, 10%), 0.75);
+        }
+      }
+    }
+  }
+}
+
+#wrap {
+  transition: 1s ease-in-out;
+  pointer-events: none;
+  width: 90vmin;
+  height: 90vmin;
+  position: relative;
+  transform-style: preserve-3d;
+  transform: translateZ(calc((var(--mouseX) * -7.5vmin))) translateY(7.5vmin)
+    scale(0.5) rotateY(calc(25deg + (var(--mouseX) * 65deg))) rotateX(0);
+  transform-origin: 50% 50% -45vmin;
+  --mouseX: 0;
+  * {
+    transition: 1s ease-in-out;
+    transform-style: preserve-3d;
+    &:before,
+    &:after {
+      transform-style: preserve-3d;
+      transition: 1s ease-in-out;
+    }
+  }
+  .bridge {
+    width: 17.5vmin;
+    height: 50vmin;
+    bottom: 16vmin;
+    position: absolute;
+    left: 31.5vmin;
+    transform-origin: 100% 100%;
+    transform: rotateX(-95deg) rotateY(90deg);
+    .noface {
+      position: absolute;
+      width: 10vmin;
+      height: 12.5vmin;
+      top: 30vmin;
+      left: 22.5vmin;
+      transform: rotateY(-90deg) rotateX(95deg) translateX(-10vmin)
+        translateZ(calc((var(--mouseX) * 7.5vmin) + 2.5vmin))
+        translateY(calc(var(--mouseX) * -2vmin));
+      .body {
+        @include side();
+        background: linear-gradient(
+          to bottom,
+          rgba(darken($g, 80%), 0.75) 60%,
+          rgba(darken($g, 80%), 0.5) 80%,
+          $t 100%
+        );
+        width: 4vmin;
+        left: calc(50% - 2vmin);
+        border-radius: 20vmin 20vmin 25vmin 25vmin / 35vmin 35vmin 25vmin 25vmin;
+        height: 110%;
+        top: -5%;
+        overflow: hidden;
+        transform: rotateY(calc(var(--mouseX) * -90deg));
+        .face {
+          width: 2.75vmin;
+          height: 4vmin;
+          position: absolute;
+          left: calc(50% - 1.375vmin);
+          background: lighten($y, 50%);
+          top: 0.5vmin;
+          border-radius: 10vmin / 15vmin;
+          transform: scale(0.9)
+            translateX(clamp(0vmin, calc(var(--mouseX) * 3vmin), 20vmin))
+            translateY(clamp(-0.5vmin, calc(var(--mouseX) * 1vmin), 2vmin));
+          overflow: hidden;
+          &:before {
+            content: "";
+            position: absolute;
+            width: 1vmin;
+            height: 3vmin;
+            top: -0.25vmin;
+            left: 0.15vmin;
+            background: radial-gradient(
+                  ellipse at center,
+                  #000 0.45vmin,
+                  $t 0.45vmin
+                )
+                50% 1.65vmin / 100% 0.45vmin no-repeat,
+              linear-gradient(
+                to bottom,
+                #fff 0.15vmin,
+                $t 0.15vmin,
+                $t 1.25vmin,
+                #fff 1vmin,
+                #fff 2.25vmin,
+                $t 2vmin
+              ),
+              linear-gradient(
+                to right,
+                $t 0.2vmin,
+                darken($g, 5%) 0.2vmin,
+                darken($g, 5%) 0.65vmin,
+                $t 0.65vmin
+              );
+            -webkit-box-reflect: right 0.4vmin;
+            transform: translateX(
+              clamp(0vmin, calc(var(--mouseX) * 2vmin), 20vmin)
+            );
+          }
+          &:after {
+            content: "";
+            position: absolute;
+            width: 1.25vmin;
+            height: 0.35vmin;
+            background: #000;
+            left: calc(50% - 0.625vmin);
+            bottom: 0.5vmin;
+            border-radius: 5vmin;
+            transform: translateX(
+              clamp(0vmin, calc(var(--mouseX) * 1vmin), 20vmin)
+            );
+          }
+        }
+      }
+    }
+    .plank {
+      position: absolute;
+      width: 17.5vmin;
+      height: 2vmin;
+      left: -152.5vmin;
+      top: calc(50% - 4vmin);
+      transform-origin: 500% 50%;
+      .rail {
+        position: absolute;
+        width: 50%;
+        height: 175%;
+        background: linear-gradient(
+              to bottom,
+              darken($r, 5%) 0.75vmin,
+              $t 0.75vmin
+            )
+            0% 50% / 60% 100% no-repeat,
+          linear-gradient(to bottom, darken($r, 5%) 0.75vmin, $t 0.75vmin) 100%
+            calc(50% + 1.5vmin) / 40% 100% no-repeat,
+          linear-gradient(to right, darken($r, 5%) 0.75vmin, $t 0.75vmin),
+          linear-gradient(
+            to right,
+            $t 5vmin,
+            darken($r, 5%) 5vmin,
+            darken($r, 5%) 5.5vmin,
+            $t 5.5vmin
+          ),
+          linear-gradient(to left, darken($r, 5%) 0.75vmin, $t 0.75vmin);
+        left: -50%;
+        &:after {
+          content: "";
+          position: absolute;
+          width: 1.5vmin;
+          height: 100%;
+          left: 0;
+          top: 0;
+          background: darken($r, 15%);
+          transform: rotateY(90deg) translateZ(-0.75vmin);
+          box-shadow: 18vmin 0 0 darken($r, 15%);
+        }
+      }
+      .rail:before {
+        content: "";
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background: linear-gradient(
+              to bottom,
+              darken($r, 5%) 0.75vmin,
+              $t 0.75vmin
+            )
+            0% 50% / 60% 100% no-repeat,
+          linear-gradient(to bottom, darken($r, 5%) 0.75vmin, $t 0.75vmin) 100%
+            calc(50% + 1.5vmin) / 40% 100% no-repeat,
+          linear-gradient(to right, darken($r, 5%) 0.75vmin, $t 0.75vmin),
+          linear-gradient(
+            to right,
+            $t 5vmin,
+            darken($r, 5%) 5vmin,
+            darken($r, 5%) 5.5vmin,
+            $t 5.5vmin
+          ),
+          linear-gradient(to left, darken($r, 5%) 0.75vmin, $t 0.75vmin);
+        transform: translateZ(-17.5vmin);
+      }
+      &:before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 150%;
+        bottom: 0%;
+        left: -100%;
+        transform-origin: right;
+        transform: rotateY(-90deg);
+        background: lighten($br, 10%);
+        box-shadow: inset 0 0 0 0.5vmin lighten($br, 0%);
+      }
+      @for $i from 1 through 25 {
+        &:nth-of-type(#{$i}) {
+          transform: rotate(#{((($i/2) - 1) * (90/24)) + 160}deg);
+        }
+      }
+    }
+  }
+  .center {
+    position: absolute;
+    width: 17.5vmin;
+    height: 22.5vmin;
+    bottom: 22.5vmin;
+    left: 31.5vmin;
+    transform: translateZ(-10vmin);
+    .leaf {
+      position: absolute;
+      width: 6vmin;
+      height: 6vmin;
+      border-radius: 50vmin 0;
+      background: linear-gradient(225deg, $t 25%, lighten($y, 5%) 25%);
+      box-shadow: inset 0 0 0 0.35vmin darken($y, 10%);
+      top: -20.5vmin;
+      left: calc(50% - 6vmin);
+      transform: translateZ(1vmin) rotate(-45deg);
+      transform-origin: 100% 0%;
+      &:nth-of-type(2) {
+        transform: translateZ(1vmin) rotate(-75deg) scale(0.9);
+      }
+      &:nth-of-type(3) {
+        transform: translateZ(1vmin) rotate(-15deg) scale(0.9);
+      }
+      &:nth-of-type(4) {
+        transform: translateZ(1vmin) rotate(-105deg) scale(0.8);
+        top: -19vmin;
+      }
+      &:nth-of-type(5) {
+        transform: translateZ(1vmin) rotate(15deg) scale(0.8);
+        top: -19vmin;
+      }
+    }
+    .plank {
+      width: 1vmin;
+      height: 16.5vmin;
+      left: calc(50% - 0.5vmin);
+      position: absolute;
+      bottom: 25.25vmin;
+      transform-origin: 50% 55%;
+      &:nth-of-type(5) {
+        &:after {
+          content: "";
+          position: absolute;
+          width: 5vmin;
+          height: 100%;
+          bottom: 100%;
+          left: -2.5vmin;
+          @include shade($gr);
+          transform-origin: bottom;
+          transform: translateZ(5vmin) rotateX(90deg) rotateY(45deg)
+            translateX(-2.5vmin);
+        }
+      }
+      &:last-of-type {
+        &:after {
+          content: "";
+          position: absolute;
+          width: 5vmin;
+          height: 100%;
+          bottom: 100%;
+          left: -2.5vmin;
+          @include shade($gr);
+          transform-origin: bottom;
+          transform: translateZ(5vmin) rotateX(90deg) rotateY(45deg)
+            translateX(16vmin);
+        }
+      }
+      &:before {
+        content: "";
+        position: absolute;
+        width: 140%;
+        height: 100%;
+        bottom: 100%;
+        left: -20%;
+        background: $gr;
+        transform-origin: bottom;
+        transform: translateZ(5vmin) rotateX(90deg);
+        box-shadow: inset 0 0 0.5vmin 0.5vmin darken($gr, 15%);
+      }
+      @for $i from 1 through 25 {
+        &:nth-of-type(#{$i}) {
+          transform: rotate(#{(($i - 1) * (90/10)) - 125}deg);
+        }
+      }
+    }
+    &:before {
+      content: "";
+      position: absolute;
+      width: 6.25vmin;
+      height: 3vmin;
+      background: repeating-linear-gradient(
+        to right,
+        $br 1vmin,
+        darken($br, 10%) 1vmin,
+        darken($br, 10%) 1.5vmin,
+        $br 2.5vmin
+      );
+      border: 0.35vmin dashed $y;
+      left: 1.15vmin;
+      box-sizing: border-box;
+      -webkit-box-reflect: right 2vmin;
+      top: 5vmin;
+      transform: translateZ(0.05vmin);
+    }
+    &:after {
+      box-shadow: inset 0 -0.5vmin 0 darken($y, 10%);
+      @include side();
+      height: 5vmin;
+      width: calc(100% + 7.5vmin);
+      left: -3.75vmin;
+      transform-origin: top;
+      @include shade(darken($g, 15%));
+      transform: rotateX(55deg);
+      clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
+    }
+    .side {
+      &:nth-of-type(2) {
+        .upper {
+          .rail {
+            transform: translateZ(0vmin) translateY(0.25vmin);
+          }
+        }
+      }
+      &:nth-of-type(3) {
+        .upper {
+          .rail {
+            transform: translateZ(0vmin) translateY(-0.25vmin);
+          }
+        }
+      }
+      .upper {
+        .rail {
+          content: "";
+          position: absolute;
+          width: 125%;
+          height: 17.5%;
+          bottom: 40%;
+          left: -12.5%;
+          transform: translateZ(5vmin);
+          background: repeating-linear-gradient(
+                to right,
+                $t 0.5vmin,
+                darken($r, 10%) 0.5vmin,
+                darken($r, 10%) 3vmin,
+                $t 3vmin,
+                $t 3.5vmin
+              )
+              50% 0% / 100% 0.5vmin no-repeat,
+            linear-gradient(
+              to top,
+              lighten($br, 10%) 1vmin,
+              $t 1vmin,
+              $t calc(100% - 0.5vmin),
+              darken($y, 10%) calc(100% - 0.5vmin)
+            ),
+            repeating-linear-gradient(
+              to right,
+              darken($r, 10%) 0.5vmin,
+              $t 0.5vmin,
+              $t 3vmin,
+              darken($r, 10%) 3vmin,
+              darken($r, 10%) 3.5vmin
+            );
+        }
+      }
+      &:first-of-type {
+        .upper {
+          .topsection {
+            position: absolute;
+            width: 8.5vmin;
+            height: 3.5vmin;
+            background: lighten($y, 10%);
+            bottom: 20vmin;
+            left: calc(50% - 4.25vmin);
+            border-radius: 100vmin 100vmin 0 0 / 75vmin 75vmin 0 0;
+            transform: translateZ(-5vmin);
+            .roof {
+              width: 1vmin;
+              height: 16.5vmin;
+              left: calc(50% - 0.5vmin);
+              position: absolute;
+              bottom: -13vmin;
+              transform-origin: 50% 40%;
+              &:before {
+                content: "";
+                position: absolute;
+                width: 140%;
+                left: -20%;
+                height: 125%;
+                bottom: 100%;
+                transform-origin: 50% 100%;
+                transform: translateZ(2.5vmin) rotateX(90deg);
+                background: $gr;
+                box-shadow: inset 0 0 0.5vmin 0.5vmin darken($gr, 15%);
+              }
+              @for $i from 1 through 10 {
+                &:nth-of-type(#{$i}) {
+                  transform: rotate(#{(($i - 1) * (90/8)) - 50}deg);
+                }
+              }
+            }
+          }
+          &:after {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(
+                to bottom,
+                rgba($r, 0.75),
+                rgba($r, 0.75)
+              ),
+              repeating-linear-gradient(
+                to right,
+                darken($y, 10%) 0.25vmin,
+                $t 0.25vmin,
+                $t 1vmin,
+                darken($y, 10%) 1vmin,
+                darken($y, 10%) 1.25vmin
+              ),
+              repeating-linear-gradient(
+                to bottom,
+                darken($y, 10%) 0.25vmin,
+                $t 0.25vmin,
+                $t 1vmin,
+                darken($y, 10%) 1vmin,
+                darken($y, 10%) 1.25vmin
+              ),
+              darken($r, 5%);
+            -webkit-mask: radial-gradient(
+                  circle at center,
+                  #000 2.5vmin,
+                  $t 2.5vmin
+                )
+                50% 3vmin / 5vmin 5vmin no-repeat,
+              radial-gradient(circle at center, #000 2.5vmin, $t 2.5vmin)
+                calc(50% - 2.5vmin) 4vmin / 5vmin 5vmin no-repeat,
+              radial-gradient(circle at center, #000 2.5vmin, $t 2.5vmin)
+                calc(50% + 2.5vmin) 4vmin / 5vmin 5vmin no-repeat;
+          }
+        }
+      }
+      .upper {
+        background: linear-gradient(to bottom, darken($y, 5%) 10vmin, $t 10vmin),
+          radial-gradient(circle at bottom, $t 8.35vmin, $r 2vmin) 50% 50% /
+            125% 100%;
+        position: absolute;
+        width: 80%;
+        left: 10%;
+        bottom: 150%;
+        height: 80%;
+        &:before {
+          content: "";
+          position: absolute;
+          width: 120%;
+          left: -10%;
+          height: 7.5vmin;
+          bottom: calc(100% - 3.5vmin);
+          transform-origin: 50% 100%;
+          transform: rotateX(45deg) translateZ(2.5vmin);
+          @include shade(darken($gr, 10%));
+          -webkit-mask: linear-gradient(-125deg, $t 25%, #000 5%) 100% 100% /
+              50% 100% no-repeat,
+            linear-gradient(125deg, $t 25%, #000 5%) 0% 100% / 50% 100%
+              no-repeat;
+        }
+      }
+      &:nth-of-type(2) {
+        .upper {
+          transform: translateZ(-1.85vmin);
+          left: 0vmin;
+          background: linear-gradient(
+            to bottom,
+            darken($y, 5%) 10vmin,
+            darken($r, 10%) 10vmin
+          );
+        }
+      }
+      &:nth-of-type(3) {
+        .upper {
+          transform: translateZ(-1.85vmin);
+          background: linear-gradient(
+            to bottom,
+            darken($y, 5%) 10vmin,
+            darken($r, 10%) 10vmin
+          );
+          left: 3.5vmin;
+        }
+      }
+      &:first-of-type {
+        &:before {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 20vmin;
+          box-shadow: inset 3vmin 4vmin 0 0 $br, inset -3vmin 0 0 $br,
+            inset 0 8vmin 0 darken($g, 25%),
+            inset calc((-20vmin * var(--mouseX)) - 4vmin) 0 6vmin
+              darken($br, 90%);
+          left: 0;
+          bottom: -8vmin;
+          background: linear-gradient(
+            to bottom,
+            darken($g, 25%) 8vmin,
+            darken($br, 15%) 8vmin
+          );
+        }
+        &:after {
+          box-shadow: inset 0 -0.5vmin 0 darken($y, 10%);
+          @include side();
+          height: 5vmin;
+          width: calc(100% + 7.5vmin);
+          left: -3.75vmin;
+          transform-origin: top;
+          @include shade(darken($g, 15%));
+          transform: rotateX(55deg);
+          clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
+          top: auto;
+          bottom: 7.5vmin;
+        }
+      }
+      @include side();
+      @include cube(17.5vmin, 20vmin);
+      @for $i from 1 through 4 {
+        &:nth-of-type(#{$i}) {
+          background: darken($r, (($i * 4) + 7));
+        }
+      }
+      .topside {
+        width: 100%;
+        height: 50%;
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+      }
+      &:first-of-type {
+        .topside {
+          background: linear-gradient(
+              to right,
+              $br 3vmin,
+              $t 3vmin,
+              $t calc(100% - 3vmin),
+              $br calc(100% - 3vmin)
+            ),
+            linear-gradient(to bottom, $br 2vmin, $t 2vmin);
+          &:after {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 8vmin;
+            top: -8vmin;
+            background: lighten($br, 10%);
+            border-radius: 50vmin 50vmin 0 0;
+          }
+          &:before {
+            content: "";
+            position: absolute;
+            width: 125%;
+            height: 35%;
+            bottom: 0;
+            left: -12.5%;
+            transform: translateZ(5vmin);
+            background: repeating-linear-gradient(
+                  to right,
+                  $t 0.5vmin,
+                  lighten($br, 10%) 0.5vmin,
+                  lighten($br, 10%) 3vmin,
+                  $t 3vmin,
+                  $t 3.5vmin
+                )
+                50% 0% / 100% 0.5vmin no-repeat,
+              linear-gradient(
+                to top,
+                lighten($br, 10%) 1vmin,
+                $t 1vmin,
+                $t calc(100% - 0.5vmin),
+                darken($y, 10%) calc(100% - 0.5vmin)
+              ),
+              repeating-linear-gradient(
+                to right,
+                lighten($br, 10%) 0.5vmin,
+                $t 0.5vmin,
+                $t 3vmin,
+                lighten($br, 10%) 3vmin,
+                lighten($br, 10%) 3.5vmin
+              );
+          }
+        }
+      }
+      &:nth-of-type(4) {
+        .topside {
+          background: darken($br, 20%);
+          transform: translateZ(-8vmin);
+          &:before {
+            @include side();
+            background: $br;
+            transform-origin: bottom;
+            transform: rotateX(90deg);
+            width: 120%;
+            left: -10%;
+            top: auto;
+            bottom: 0;
+            height: 130%;
+          }
+        }
+      }
+      &:nth-of-type(2),
+      &:nth-of-type(3) {
+        .topside {
+          background: linear-gradient(
+              to right,
+              darken($br, 5%) 3vmin,
+              $t 3vmin,
+              $t calc(100% - 3vmin),
+              darken($br, 5%) calc(100% - 3vmin)
+            ),
+            linear-gradient(to bottom, darken($br, 5%) 4vmin, $t 4vmin);
+          &:before {
+            content: "";
+            position: absolute;
+            left: -25%;
+            transform: translateZ(1.5vmin);
+            width: 125%;
+            height: 35%;
+            bottom: 0;
+            background: repeating-linear-gradient(
+                  to right,
+                  $t 0.5vmin,
+                  lighten($br, 10%) 0.5vmin,
+                  lighten($br, 10%) 3vmin,
+                  $t 3vmin,
+                  $t 3.5vmin
+                )
+                50% 0% / 100% 0.5vmin no-repeat,
+              linear-gradient(
+                to top,
+                lighten($br, 10%) 1vmin,
+                $t 1vmin,
+                $t calc(100% - 0.5vmin),
+                darken($y, 10%) calc(100% - 0.5vmin)
+              ),
+              repeating-linear-gradient(
+                to right,
+                lighten($br, 10%) 0.5vmin,
+                $t 0.5vmin,
+                $t 3vmin,
+                lighten($br, 10%) 3vmin,
+                lighten($br, 10%) 3.5vmin
+              );
+          }
+        }
+      }
+      &:nth-of-type(3) {
+        .topside {
+          &:before {
+            left: 0%;
+          }
+        }
+      }
+    }
+  }
+  .rearblock {
+    position: absolute;
+    width: 65vmin;
+    height: 30vmin;
+    left: 10vmin;
+    top: 47.5vmin;
+    transform: translateZ(-35vmin);
+    .side {
+      @include side();
+      top: 20vmin;
+      @include cube(45vmin, 30vmin);
+      &:first-of-type {
+        width: 6.5vmin;
+        height: 100vmin;
+        background: radial-gradient(
+              ellipse at center,
+              darken($g, 90%) 2.5vmin,
+              $t 2.5vmin
+            )
+            50% 0.5vmin / 100% 2.5vmin no-repeat,
+          linear-gradient(
+            to bottom,
+            darken($g, 30%),
+            darken($g, 20%),
+            $g 75%,
+            $t
+          );
+        top: -40vmin;
+        left: -25vmin;
+        border-radius: 125vmin 125vmin 0 0 / 90vmin 90vmin 0 0;
+        transform: rotateY(calc(var(--mouseX) * -95deg));
+        box-shadow:inset calc(var(--mouseX) * 5vmin) -1vmin 2vmin darken($g, 30%), inset calc(var(--mouseX) * -2vmin) -1vmin 2vmin lighten($g, 5%), inset 0 2vmin 2vmin darken($g, 30%);
+        &:before {
+          content: "";
+          transform-style: preserve-3d;
+          position: absolute;
+          width: 32.5vmin;
+          height: 30vmin;
+          left: 1.5vmin;
+          border-radius: 500vmin;
+          border: 0.5vmin solid;
+          border-color: $t $t darken($g, 15%) $t;
+          transform-origin: left;
+          transform: rotateY(calc(var(--mouseX) * 65deg)) translateZ(0vmin);
+        }
+        &:after {
+          content: "";
+          position: absolute;
+          width: 50vmin;
+          height: 50vmin;
+          background: linear-gradient(
+            135deg,
+            $t 10%,
+            rgba($g, 0.35),
+            rgba(darken($g, 5%), 0.5)
+          );
+          bottom: calc(100% - 2vmin);
+          right: calc(100% - 5vmin);
+          transform-origin: 100% 100%;
+          transform: skew(calc(var(--mouseX) * 30deg));
+          -webkit-mask: radial-gradient(
+                circle at center,
+                #000 2.5vmin,
+                $t 2.5vmin
+              )
+              100% 100% / 5vmin 5vmin no-repeat,
+            radial-gradient(circle at center, #000 5vmin, $t 5vmin) 100% 100% /
+              15vmin 12.5vmin no-repeat,
+            radial-gradient(circle at center, #000 7.5vmin, $t 7.5vmin) 100%
+              100% / 25vmin 25vmin no-repeat,
+            radial-gradient(circle at center, #000 7.5vmin, $t 7.5vmin)
+              calc(100% - 2.5vmin) 100% / 25vmin 25vmin no-repeat,
+            radial-gradient(circle at center, #000 9vmin, $t 9vmin)
+              calc(100% - 5vmin) 100% / 30vmin 30vmin no-repeat,
+            radial-gradient(circle at center, #000 12vmin, $t 12vmin)
+              calc(100% - 10vmin) 100% / 40vmin 30vmin no-repeat;
+        }
+      }
+      &:nth-of-type(2),
+      &:nth-of-type(3) {
+        width: 45vmin;
+      }
+      &:nth-of-type(3) {
+        left: -45vmin;
+        height: 80vmin;
+        top: -20vmin;
+        mask: linear-gradient(to top, transparent 5vmin, #000 30vmin);
+        @include bricks();
+        &:before {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          top: 0;
+          background: linear-gradient(
+            to bottom,
+            rgba(darken($g, 30%), 0.5),
+            $t 50%
+          );
+        }
+      }
+    }
+  }
+  .roofpeak {
+    position: absolute;
+    width: 10vmin;
+    height: 5vmin;
+    left: -15vmin;
+    top: 2.5vmin;
+    transform: translateZ(-45vmin) rotateY(-90deg);
+    &:before {
+      content: "";
+      width: 0;
+      height: 0;
+      position: absolute;
+      border-style: solid;
+      border-width: 0 5vmin 5vmin 5vmin;
+      border-color: transparent transparent lighten($y, 5%) transparent;
+      transform: translateZ(-1vmin);
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      width: 60%;
+      height: 40%;
+      left: 20%;
+      bottom: 0;
+      background: linear-gradient(
+          to bottom,
+          lighten($y, 20%) 0.5vmin,
+          $t 0.5vmin
+        ),
+        repeating-linear-gradient(
+          to right,
+          lighten($y, 20%) 1vmin,
+          $t 1vmin,
+          $t 2vmin,
+          lighten($y, 20%) 2vmin,
+          lighten($y, 20%) 3vmin
+        );
+      transform: translateZ(-1vmin);
+    }
+    .roof {
+      height: 7.5vmin;
+      width: 25vmin;
+      position: absolute;
+      @include shade(darken($gr, 10%));
+      left: 50%;
+      transform-origin: 0% 0%;
+      transform: rotateY(90deg) rotateX(45deg);
+      &:last-of-type {
+        left: auto;
+        right: 50%;
+        transform-origin: 100% 0%;
+        transform: rotateY(-90deg) rotateX(45deg);
+      }
+    }
+  }
+  .peak {
+    position: absolute;
+    width: 10vmin;
+    height: 10vmin;
+    top: 35vmin;
+    left: 0vmin;
+    transform: rotateY(90deg) translate(30vmin, 5vmin);
+    &:before,
+    &:after {
+      @include side();
+      transform: translateZ(-10vmin);
+      background: linear-gradient(
+        to bottom,
+        $t 5vmin,
+        $br 5vmin,
+        $br 6vmin,
+        $t 5vmin,
+        $t 8vmin,
+        $br 8vmin
+      );
+    }
+    &:after {
+      top: -4vmin;
+      height: 5vmin;
+      background: linear-gradient(to right, $t 40%, $br 40%, $br 60%, $t 60%),
+        linear-gradient(-135deg, $t 40%, $br 40%, $br 50%, $t 50%) 2vmin 50%,
+        linear-gradient(135deg, $t 40%, $br 40%, $br 50%, $t 50%) -2vmin 50%,
+        linear-gradient(to top, $br 1vmin, $t 1vmin);
+    }
+    .peakside {
+      @include side();
+      @include cube(5vmin, 5vmin);
+      &:nth-of-type(2) {
+        background: linear-gradient(
+            to left,
+            darken($br, 4) 2vmin,
+            $t 2vmin,
+            $t 3.5vmin,
+            darken($br, 4) 3.5vmin
+          ),
+          linear-gradient(
+            to bottom,
+            $t 5vmin,
+            $br 5vmin,
+            $br 6vmin,
+            $t 5vmin,
+            $t 8vmin,
+            $br 8vmin
+          );
+        &:after {
+          @include side();
+          transform-origin: right;
+          transform: rotateY(-90deg) translateZ(4vmin);
+          left: 0vmin;
+          background: darken($br, 20%);
+          box-shadow: 2vmin 0 0 darken($br, 10%);
+        }
+      }
+      &:before {
+        @include side();
+        height: 10vmin;
+        top: -8vmin;
+        @include shade(darken($gr, 10%));
+        transform-origin: 50% 0%;
+        transform: rotateX(38.5deg) translateZ(-5vmin);
+      }
+      &:nth-of-type(3) {
+        background: linear-gradient(
+            to right,
+            darken($br, 2) 2vmin,
+            $t 2vmin,
+            $t 3.5vmin,
+            darken($br, 2) 3.5vmin
+          ),
+          linear-gradient(
+            to bottom,
+            $t 5vmin,
+            darken($br, 2) 5vmin,
+            darken($br, 2) 6vmin,
+            $t 5vmin,
+            $t 8vmin,
+            darken($br, 2) 8vmin
+          );
+      }
+    }
+  }
+  .main {
+    position: absolute;
+    width: 65vmin;
+    height: 70vmin;
+    left: 7.5vmin;
+    transform: translateZ(-20vmin);
+    .window {
+      top: 55vmin;
+      left: 5vmin;
+      @include window(17.5vmin, 10vmin);
+      &:nth-of-type(4) {
+        @include window(17.5vmin, 8vmin);
+        left: -2.5vmin;
+        top: 42.5vmin;
+      }
+      &:nth-of-type(5) {
+        @include window(26vmin, 9vmin);
+        left: 41.5vmin;
+        top: 37.5vmin;
+        .windowside {
+          &:nth-of-type(3) {
+            background: $br;
+            &:before {
+              display: none;
+            }
+          }
+        }
+      }
+      &:nth-of-type(2) {
+        left: 47.5vmin;
+        @include window(20vmin, 10vmin);
+      }
+      &:nth-of-type(3) {
+        @include window(70vmin, 12.5vmin);
+        top: 22vmin;
+        left: -2.5vmin;
+        .windowside {
+          @for $i from 1 through 4 {
+            &:nth-of-type(#{$i}) {
+              &:after {
+                @include shade(darken($gr, $i * 7.5));
+              }
+            }
+          }
+          &:before {
+            content: "";
+            position: absolute;
+            width: 102%;
+            left: -1%;
+            height: 15vmin;
+            bottom: calc(100% - 2.5vmin);
+            transform-origin: 50% 100%;
+            transform: rotateX(40deg) translateZ(2vmin);
+            @include shade($gr);
+            -webkit-mask: linear-gradient(-125deg, $t 20%, #000 5%) 100% 100% /
+                50% 100% no-repeat,
+              linear-gradient(125deg, $t 20%, #000 5%) 0% 100% / 50% 100%
+                no-repeat;
+          }
+          &:after {
+            content: "";
+
+            position: absolute;
+            width: 140%;
+            left: -20%;
+            height: 3vmin;
+            bottom: calc(100% - 12.5vmin);
+            transform-origin: 50% calc(0% - 5vmin);
+            transform: rotateX(135deg);
+            -webkit-mask: linear-gradient(
+                  -125deg,
+                  rgba(255, 255, 255, 0.001) 20%,
+                  #000 5%
+                )
+                100% 100%/50% 100% no-repeat,
+              linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%)
+                0% 100%/50% 100% no-repeat;
+          }
+          &:nth-of-type(2),
+          &:nth-of-type(3) {
+            height: 12.5vmin;
+            width: 45vmin;
+          }
+          &:nth-of-type(3) {
+            left: -45vmin;
+          }
+          &:last-of-type {
+            transform: translateZ(-45vmin) rotateY(180deg);
+          }
+        }
+      }
+    }
+    .side {
+      @include side();
+      top: 20vmin;
+      mask: linear-gradient(to top, transparent, #000 17.5vmin);
+      @include cube(45vmin, 60vmin);
+      &:nth-of-type(2),
+      &:nth-of-type(3) {
+        width: 45vmin;
+      }
+      &:nth-of-type(3) {
+        left: -45vmin;
+      }
+      @for $i from 1 through 4 {
+        &:nth-of-type(#{$i}) {
+          background: darken($r, (($i * 5) + 3));
+        }
+      }
+    }
+  }
+  .baseblock {
+    width: 30vmin;
+    height: 30vmin;
+    position: absolute;
+    bottom: -7.5vmin;
+    left: 0vmin;
+    .side {
+      &:last-of-type {
+        mask: linear-gradient(
+              to left,
+              #000 2vmin,
+              $t 2vmin,
+              $t 6vmin,
+              #000 4vmin
+            )
+            50% 1vmin / 100% 10vmin no-repeat,
+          linear-gradient(
+            to bottom,
+            #000 2vmin,
+            $t 2vmin,
+            $t 10vmin,
+            #000 10vmin
+          );
+        &:before {
+          background: linear-gradient(
+            to bottom,
+            darken($gr, 5%) 3vmin,
+            darken($g, 5%) 3vmin,
+            darken($g, 10%)
+          );
+          box-shadow: none;
+        }
+      }
+    }
+    .steps {
+      position: absolute;
+      width: 20vmin;
+      height: 20vmin;
+      transform-origin: right;
+      left: -10vmin;
+      top: 10vmin;
+      transform: translateZ(-30vmin) rotateY(-90deg);
+      &:before,
+      &:after {
+        @include side();
+        transform: translateZ(10.25vmin);
+        @include bricks();
+        -webkit-mask: linear-gradient(
+          135deg,
+          $t 55%,
+          #000 50%,
+          #000 65%,
+          $t 80%
+        );
+      }
+      &:after {
+        background: rgba($g, 0.5);
+      }
+      .step {
+        @include side();
+        width: 10%;
+        height: 50%;
+        transform-origin: top;
+        transform: rotateX(90deg);
+        &:before {
+          @include side();
+          right: 100%;
+          transform-origin: left;
+          transform: rotateY(90deg);
+        }
+        &:after {
+          @include side();
+          height: 5vmin;
+          background: $g;
+          top: 100%;
+          transform-origin: top;
+          transform: rotateX(-90deg);
+        }
+        @for $i from 1 through 10 {
+          &:nth-of-type(#{$i}) {
+            background: darken($g, (10 - $i) * 2);
+            left: #{($i - 1) * 10%};
+            top: #{((10 - $i)) * 10%};
+            &:before {
+              background: darken($g, (18 - $i) * 2);
+            }
+          }
+        }
+      }
+    }
+    .tree {
+      position: absolute;
+      width: 15vmin;
+      height: 30vmin;
+      top: -27.5vmin;
+      left: 17.5vmin;
+      transform: translateX(calc(var(--mouseX) * 13vmin)) translateZ(-10vmin)
+        rotateY(calc(-25deg - (var(--mouseX) * 25deg)))
+        rotateX(calc(var(--mouseX) * -2.5deg));
+      background: radial-gradient(
+        circle at bottom right,
+        $t 5vmin,
+        darken($br, 5%) 5vmin,
+        $br 7vmin,
+        $t 7vmin
+      );
+      .branch {
+        position: absolute;
+        width: 15vmin;
+        height: 7.5vmin;
+        background: lighten($gr, 10%);
+        bottom: 5vmin;
+        border-radius: 100vmin 100vmin 100vmin 100vmin / 75vmin 75vmin 50vmin
+          50vmin;
+        right: -6.5vmin;
+        transform-origin: bottom;
+        box-shadow: inset calc(var(--mouseX) * 5vmin) -1vmin 3vmin darken($gr, 5%),
+          inset calc(var(--mouseX) * -5vmin) 1vmin 3vmin lighten($gr, 35%);
+        &:before {
+          @include side();
+          background: radial-gradient(
+            circle at bottom left,
+            $t 5vmin,
+            darken($br, 5%) 5vmin,
+            $br 7vmin,
+            $t 7vmin
+          );
+          top: -50%;
+          height: 50%;
+        }
+        &:first-of-type {
+          transform: translateX(calc(var(--mouseX) * 3vmin));
+          &:after {
+            @include side();
+            background: radial-gradient(
+              circle at bottom left,
+              $t 5vmin,
+              darken($br, 5%) 5vmin,
+              $br 6.5vmin,
+              $t 6.5vmin
+            );
+            transform: scaleX(-1);
+            top: -35%;
+            height: 50%;
+            left: 1.5vmin;
+          }
+        }
+        &:nth-of-type(2) {
+          bottom: 15vmin;
+          right: -2.5vmin;
+          transform: scale(0.9);
+          &:before {
+            transform: translateX(-1.5vmin) scaleX(-1);
+            top: -45%;
+          }
+        }
+        &:nth-of-type(3) {
+          bottom: 13vmin;
+          right: -10vmin;
+          transform: scale(0.75) translateZ(-1vmin)
+            translateX(calc(var(--mouseX) * 3vmin));
+          background: lighten($gr, 15%);
+          &:before {
+            background: radial-gradient(
+              circle at bottom left,
+              $t 5vmin,
+              $br 5vmin,
+              $br 6.25vmin,
+              $t 6.25vmin
+            );
+            transform: translateX(5vmin) scaleX(-1);
+            top: -45%;
+            left: -5vmin;
+          }
+        }
+        &:nth-of-type(4) {
+          bottom: 21vmin;
+          right: -11.5vmin;
+          transform: scale(0.6) translateX(calc(var(--mouseX) * 3vmin));
+          background: lighten($gr, 5%);
+          &:before {
+            background: lighten($gr, 10%);
+            border-radius: inherit;
+            height: 125%;
+            width: 115%;
+            left: -14vmin;
+            top: -5vmin;
+            box-shadow: inherit;
+          }
+        }
+        &:last-of-type {
+          bottom: 30vmin;
+          right: -7.5vmin;
+          &:before {
+            top: 95%;
+            transform: scaleX(-1);
+            left: -6vmin;
+          }
+        }
+      }
+    }
+    &:nth-of-type(2) {
+      left: auto;
+      right: 0vmin;
+      width: 40vmin;
+      &:before {
+        @include side();
+        left: -20vmin;
+        top: auto;
+        bottom: 0;
+        width: 20vmin;
+        height: 22.5vmin;
+        background: linear-gradient(
+          to bottom,
+          darken($g, 20%) 2.5vmin,
+          darken($r, 9) 2vmin
+        );
+      }
+      .side {
+        @include cube(40vmin, 60vmin);
+        &:after {
+          width: calc(100% + 8vmin);
+          left: -4vmin;
+        }
+        &:first-of-type {
+          &:after {
+            clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 7.5% 100%);
+          }
+        }
+        &:nth-of-type(3) {
+          opacity: 0;
+          &:after {
+            display: none;
+          }
+        }
+        &:nth-of-type(2) {
+          opacity: 1;
+          &:after {
+            display: block;
+          }
+        }
+      }
+    }
+    .side {
+      @include side();
+      @include cube(30vmin, 60vmin);
+      &:nth-of-type(2) {
+        opacity: 0;
+        &:after {
+          display: none;
+        }
+      }
+      &:before {
+        @include side();
+        height: 10vmin;
+        @include lattice();
+        box-shadow: inset 0 0 0 0.5vmin $g;
+      }
+      &:after {
+        @include side();
+        height: 5vmin;
+        width: calc(100% + 7.5vmin);
+        left: -3.75vmin;
+        transform-origin: top;
+        box-shadow: inset 0 -0.5vmin 0 darken($y, 10%);
+        @include shade(#41a992);
+        transform: rotateX(55deg);
+        clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
+      }
+      &:first-of-type {
+        &:after {
+          clip-path: polygon(7.5% 0%, 90% 0%, 90% 100%, 0% 100%);
+        }
+      }
+      &:last-of-type {
+        &:after {
+          display: none;
+        }
+      }
+      @for $i from 1 through 4 {
+        &:nth-of-type(#{$i}) {
+          background: darken($r, ($i * 5) + 4);
+        }
+      }
+    }
+  }
+}
+
+.clouds {
+  z-index: 999;
+  transform-style: preserve-3d;
+  position: absolute;
+  width: 125vmin;
+  height: 25vmin;
+  bottom: -18vmin;
+  left: -35vmin;
+  transform: translateY(calc(-7.5vmin + (var(--mouseX) * -2.5vmin)))
+    translateX(calc(var(--mouseX) * -322.5vmin)) scale(1.5) scaleX(2)
+    rotateY(calc(-5deg + (var(--mouseX) * 45deg))) rotateX(0deg)
+    translateZ(75vmin) rotate(calc(var(--mouseX) * 30deg));
+  mask: linear-gradient(to bottom, #000 50%, $t 100%);
+  background: linear-gradient(to top, #000, $t 75%);
+  filter: drop-shadow(
+      calc(-55vmin * var(--mouseX)) calc((-2.75vmin * var(--mouseX)) - 1vmin)
+        0vmin lighten($lb, 2.5%)
+    )
+    drop-shadow(
+      calc(7.5vmin * var(--mouseX)) calc((-0.5vmin * var(--mouseX)) - 1vmin) 0
+        $lb
+    )
+    blur(3px);
+  &:last-of-type {
+    transform: translateY(calc(-8.5vmin + (var(--mouseX) * 10vmin)))
+      translateX(calc(var(--mouseX) * 450vmin)) scale(1.5) scaleX(3)
+      rotateY(calc(-25deg + (var(--mouseX) * 65deg))) rotateX(0deg)
+      translateZ(calc(-100vmin + (var(--mouseX) * -50vmin)));
+    opacity: 0.65;
+  }
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    width: 40vmin;
+    height: 40vmin;
+    background: lighten($lb, 5%);
+    top: 1.5vmin;
+    border-radius: 50vmin 50vmin 0 0;
+    box-shadow: -20vmin 0 0 -5vmin lighten($lb, 10%),
+      -40vmin 0 0 -1.5vmin lighten($lb, 10%),
+      20vmin 0 0 -5vmin lighten($lb, 10%), 45vmin 0 0 -1vmin lighten($lb, 10%),
+      55vmin 0 0 -6.5vmin lighten($lb, 10%),
+      70vmin 0 0 -1.5vmin lighten($lb, 10%),
+      90vmin 0 0 -3.5vmin lighten($lb, 10%),
+      110vmin 0 0 -1.5vmin lighten($lb, 10%);
+    opacity: 0.5;
+    left: 5vmin;
+    transform: translate(
+      calc(var(--mouseX) * 2vmin),
+      calc(var(--mouseX) * 0.5vmin)
+    );
+  }
+  &:before {
+    transform: translate(
+      calc(var(--mouseX) * -2vmin),
+      calc(var(--mouseX) * -0.5vmin)
+    );
+  }
+  &:after {
+    left: -15vmin;
+  }
+}
diff --git a/splitting-laser-write/README.markdown b/splitting-laser-write/README.markdown
new file mode 100644
index 0000000..2fa488b
--- /dev/null
+++ b/splitting-laser-write/README.markdown
@@ -0,0 +1,8 @@
+# Splitting: Laser Write
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/nexii/pen/jONwNqv](https://codepen.io/nexii/pen/jONwNqv).
+
+ This is an example for getting a sharp glow on the edge of the mask of a text clip-path animation.
+
+By applying a filter blur followed by a high contrast on an element wrapping a thin clip-path animation we can give it the appearance of a bright glow without accidentally masking the glow filter itself in the same clip-path.
+
+We then animate this together with a second layer that masks sharp/unblurred text behind it, which uses an CSS animation that follows the glow at the same time.
\ No newline at end of file
diff --git a/splitting-laser-write/dist/5eb6d4e9bfd78e3911ed9d0d0.js b/splitting-laser-write/dist/5eb6d4e9bfd78e3911ed9d0d0.js
new file mode 100644
index 0000000..623d517
--- /dev/null
+++ b/splitting-laser-write/dist/5eb6d4e9bfd78e3911ed9d0d0.js
@@ -0,0 +1,20 @@
+;(function(){
+
+  var l = document.createElement('link');
+  l.setAttribute('rel', 'stylesheet');
+  l.onload = function(){
+    document.body.insertAdjacentHTML('beforeend','<a href="https://splitting.js.org" target="_blank" class="splitting-mark splitting" title="Splitting.js Library" style="--word-total:1; --char-total:9;"><div class="brad-split"></div><span class="word" data-word="Splitting" style="--word-index:0;"><span class="char" data-char="S" style="--char-index:0;">S</span><span class="char" data-char="p" style="--char-index:1;">p</span><span class="char" data-char="l" style="--char-index:2;">l</span><span class="char" data-char="i" style="--char-index:3;">i</span><span class="char" data-char="t" style="--char-index:4;">t</span><span class="char" data-char="t" style="--char-index:5;">t</span><span class="char" data-char="i" style="--char-index:6;">i</span><span class="char" data-char="n" style="--char-index:7;">n</span><span class="char" data-char="g" style="--char-index:8;">g</span></span></a>');
+  }
+
+  l.setAttribute('href', 'https://codepen.io/shshaw/pen/5eb6d4e9bfd78e3911ed9d0d0dfce69b.css');
+  document.head.appendChild(l);
+
+})();
+
+
+(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+                        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+ga('create', 'UA-6412794-6', 'auto');
+ga('send', 'pageview');
\ No newline at end of file
diff --git a/splitting-laser-write/dist/index.html b/splitting-laser-write/dist/index.html
new file mode 100644
index 0000000..e012ab5
--- /dev/null
+++ b/splitting-laser-write/dist/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Splitting: Laser Write</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel='stylesheet' href='https://unpkg.com/splitting@0.11.3/splitting.css'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="title">
+  <span class="text write" data-splitting="lines">
+    RETRO<br/>
+    LASER<br/>
+    WRITE
+  </span>
+  <span aria-hidden="true" class="text laser" data-splitting="lines">
+    RETRO<br/>
+    LASER<br/>
+    WRITE
+  </span>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.com/splitting/dist/splitting.js'></script>
+<script src='js/5eb6d4e9bfd78e3911ed9d0d0.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/splitting-laser-write/dist/script.js b/splitting-laser-write/dist/script.js
new file mode 100644
index 0000000..69cd56f
--- /dev/null
+++ b/splitting-laser-write/dist/script.js
@@ -0,0 +1,3 @@
+Splitting();
+
+// Hover over the title to pause the CSS animation
\ No newline at end of file
diff --git a/splitting-laser-write/dist/style.css b/splitting-laser-write/dist/style.css
new file mode 100644
index 0000000..d761f02
--- /dev/null
+++ b/splitting-laser-write/dist/style.css
@@ -0,0 +1,94 @@
+html, body { background: hsl(220, 80%, 8%); }
+html { height: 100%; display: flex; }
+body { margin: auto; }
+
+.title {
+  position: relative;
+  text-align: center;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+}
+
+.title .text {
+  font-family: sans-serif;
+  font-weight: 400;
+  font-size: calc(20vw / var(--word-total) );
+  line-height: 1.0;
+}
+
+.title .write .word {
+  color: hsl(0, 0%, 80%);
+  text-shadow: 0 0 0.1em currentColor;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-animation: write linear both;
+          animation: write linear both;
+}
+
+.title .laser {
+  position: absolute;
+  top: 0;
+  left: 0;
+  /* To avoid the blur getting masked by the clip-path we had to duplicate the element */
+  -webkit-filter: blur(4px) contrast(10);
+          filter: blur(4px) contrast(10);
+  pointer-events: none;
+}
+
+.title .laser .word {
+  display: inline-block;
+}
+
+.title .laser .word {
+  color: hsl(0, 100%, 75%);
+  text-shadow: 0 0 0.1em currentColor;
+  -webkit-transform: translateZ(5px);
+          transform: translateZ(5px);
+  -webkit-animation: laser linear both;
+          animation: laser linear both;
+}
+
+.title .write .word,
+.title .laser .word {
+  -webkit-animation-duration: 4s;
+          animation-duration: 4s;
+  -webkit-animation-delay: calc(0.3s + var(--word-index) * 160ms);
+          animation-delay: calc(0.3s + var(--word-index) * 160ms);
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+}
+
+.title:hover .word,
+.title:hover .word {
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+
+/* .title .text .word,
+.title .text .word::before {
+  animation-play-state: paused;
+  animation-delay: -0.4s;
+} */
+
+@-webkit-keyframes write {
+  from, 30% { -webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%); clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
+  70%, to { -webkit-clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%); clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%) }
+}
+
+@keyframes write {
+  from, 30% { -webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%); clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
+  70%, to { -webkit-clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%); clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%) }
+}
+
+@-webkit-keyframes laser {
+  from, 30% { -webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%); clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
+  70%, to { -webkit-clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%); clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%) }
+}
+
+@keyframes laser {
+  from, 30% { -webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%); clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
+  70%, to { -webkit-clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%); clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%) }
+}
+
diff --git a/splitting-laser-write/license.txt b/splitting-laser-write/license.txt
new file mode 100644
index 0000000..9db79dd
--- /dev/null
+++ b/splitting-laser-write/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Martin Pitt (https://codepen.io/nexii/pen/jONwNqv)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/splitting-laser-write/src/5eb6d4e9bfd78e3911ed9d0d0.js b/splitting-laser-write/src/5eb6d4e9bfd78e3911ed9d0d0.js
new file mode 100644
index 0000000..623d517
--- /dev/null
+++ b/splitting-laser-write/src/5eb6d4e9bfd78e3911ed9d0d0.js
@@ -0,0 +1,20 @@
+;(function(){
+
+  var l = document.createElement('link');
+  l.setAttribute('rel', 'stylesheet');
+  l.onload = function(){
+    document.body.insertAdjacentHTML('beforeend','<a href="https://splitting.js.org" target="_blank" class="splitting-mark splitting" title="Splitting.js Library" style="--word-total:1; --char-total:9;"><div class="brad-split"></div><span class="word" data-word="Splitting" style="--word-index:0;"><span class="char" data-char="S" style="--char-index:0;">S</span><span class="char" data-char="p" style="--char-index:1;">p</span><span class="char" data-char="l" style="--char-index:2;">l</span><span class="char" data-char="i" style="--char-index:3;">i</span><span class="char" data-char="t" style="--char-index:4;">t</span><span class="char" data-char="t" style="--char-index:5;">t</span><span class="char" data-char="i" style="--char-index:6;">i</span><span class="char" data-char="n" style="--char-index:7;">n</span><span class="char" data-char="g" style="--char-index:8;">g</span></span></a>');
+  }
+
+  l.setAttribute('href', 'https://codepen.io/shshaw/pen/5eb6d4e9bfd78e3911ed9d0d0dfce69b.css');
+  document.head.appendChild(l);
+
+})();
+
+
+(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+                        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+ga('create', 'UA-6412794-6', 'auto');
+ga('send', 'pageview');
\ No newline at end of file
diff --git a/splitting-laser-write/src/index.html b/splitting-laser-write/src/index.html
new file mode 100644
index 0000000..85c6073
--- /dev/null
+++ b/splitting-laser-write/src/index.html
@@ -0,0 +1,12 @@
+<div class="title">
+  <span class="text write" data-splitting="lines">
+    RETRO<br/>
+    LASER<br/>
+    WRITE
+  </span>
+  <span aria-hidden="true" class="text laser" data-splitting="lines">
+    RETRO<br/>
+    LASER<br/>
+    WRITE
+  </span>
+</div>
\ No newline at end of file
diff --git a/splitting-laser-write/src/script.js b/splitting-laser-write/src/script.js
new file mode 100644
index 0000000..69cd56f
--- /dev/null
+++ b/splitting-laser-write/src/script.js
@@ -0,0 +1,3 @@
+Splitting();
+
+// Hover over the title to pause the CSS animation
\ No newline at end of file
diff --git a/splitting-laser-write/src/style.css b/splitting-laser-write/src/style.css
new file mode 100644
index 0000000..6caec39
--- /dev/null
+++ b/splitting-laser-write/src/style.css
@@ -0,0 +1,73 @@
+html, body { background: hsl(220, 80%, 8%); }
+html { height: 100%; display: flex; }
+body { margin: auto; }
+
+.title {
+  position: relative;
+  text-align: center;
+  transform: translateZ(0);
+  transform-style: preserve-3d;
+}
+
+.title .text {
+  font-family: sans-serif;
+  font-weight: 400;
+  font-size: calc(20vw / var(--word-total) );
+  line-height: 1.0;
+}
+
+.title .write .word {
+  color: hsl(0, 0%, 80%);
+  text-shadow: 0 0 0.1em currentColor;
+  transform-style: preserve-3d;
+  animation: write linear both;
+}
+
+.title .laser {
+  position: absolute;
+  top: 0;
+  left: 0;
+  /* To avoid the blur getting masked by the clip-path we had to duplicate the element */
+  filter: blur(4px) contrast(10);
+  pointer-events: none;
+}
+
+.title .laser .word {
+  display: inline-block;
+}
+
+.title .laser .word {
+  color: hsl(0, 100%, 75%);
+  text-shadow: 0 0 0.1em currentColor;
+  transform: translateZ(5px);
+  animation: laser linear both;
+}
+
+.title .write .word,
+.title .laser .word {
+  animation-duration: 4s;
+  animation-delay: calc(0.3s + var(--word-index) * 160ms);
+  animation-iteration-count: infinite;
+}
+
+.title:hover .word,
+.title:hover .word {
+  animation-play-state: paused;
+}
+
+/* .title .text .word,
+.title .text .word::before {
+  animation-play-state: paused;
+  animation-delay: -0.4s;
+} */
+
+@keyframes write {
+  from, 30% { clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
+  70%, to { clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%) }
+}
+
+@keyframes laser {
+  from, 30% { clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
+  70%, to { clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%) }
+}
+
diff --git a/squircles/README.markdown b/squircles/README.markdown
new file mode 100644
index 0000000..dd11036
--- /dev/null
+++ b/squircles/README.markdown
@@ -0,0 +1,5 @@
+# Squircles!
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/duncan_ie/pen/zYKMWQv](https://codepen.io/duncan_ie/pen/zYKMWQv).
+
+
diff --git a/squircles/dist/index.html b/squircles/dist/index.html
new file mode 100644
index 0000000..a541a9b
--- /dev/null
+++ b/squircles/dist/index.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Squircles!</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="fullWidth__black py-5 ">
+<div class="container">
+  
+  
+  <div class="row pt-5 row justify-content-center intro">
+    <div class="col-10 col-md-8">
+      <div class="squircle__out squircle__pink">
+      <div class="squircle__content">
+        <h1 class="b mt-n5">Squircles!</h1>
+        <h2>Those things you never knew you loved</h2>
+        <p>Lets turn the corner on border-radius in 2021</p>
+      </div>
+
+      <div class="squircle">
+        <div class="squircle__in"></div>
+      </div>
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+    </div><!-- /row -->
+    
+  
+  
+  
+  
+  
+  
+  <div class="row pt-5">
+    <div class="col-12 col-md-8 mb-4 mb-lg-0">
+      <div class="squircle__out squircle__red">
+      <div class="squircle__content">
+        <h2>With no SVG nonsense or houdini witchcraft</h2>
+        <p>Requires <code>filter</code> and <code>mix-blend-mode</code> (for colours). So that's ie11 out - ho hum.</p>
+        <p>This demo is built using the basic bootstrap col system as a proof of concept. These are fully resizable and responsive.</p>
+      </div>
+
+      <div class="squircle">
+        <div class="squircle__in"></div>
+      </div>
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+    
+    
+    
+    <div class="col-12 col-md-4">
+      <div class="squircle__out squircle__bloo">
+      <div class="squircle__content">
+        <h2>What's a Squircle?</h2>
+        <p>A squircle is a rounded rectangle, but with no clear end to the rounding. <a href="https://99percentinvisible.org/article/circling-square-designing-squircles-instead-rounded-rectangles/">Read more here.</a></p>
+      </div>
+
+      <div class="squircle">
+        <div class="squircle__in"></div>
+      </div>
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+    
+    
+    
+    
+    
+    
+    <div class="col-12 col-lg-4 col-md-6 mt-4">
+      <div class="squircle__out squircle__yellow squircle__skew">
+      <div class="squircle__content">
+        <h2>Background colour?</h2>
+        <p>Yes, with limitations. As the shape is created by a contrast filter, it must be on a darker or lighter background. An old fashoned <code>background-color</code> won't cut it here. You need psuedo elements to lighten or darken the color to your desired target.
+      </div>
+
+      <div class="squircle">
+        <div class="squircle__in "></div>
+      </div>
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    <div class="col-12 col-lg-5 col-md-6 mt-4">
+      <div class="squircle__spin__out">
+        <div class="squircle__out squircle__green squircle__spin">
+          <div class="squircle__content">
+            <h2>Animated <br>Background <span class="spin">🔄</span></h2>
+            <p>Currently has a bug where the <code>overflow</code> class causes an extra rounded border, and with the animation on on layer, you can't have the fancy blur.</p>
+            <p>Animations don't work too well with this, as we're asking the browser to render using a combination of filter and mix-blend-mode that doesn't re draw too well. Check out this on Chrome to see a funny effect after scrolling, rendering half the box during the animation.<p>
+          </div>
+          <div class="squircle">
+            <div class="squircle__in "></div>
+          </div>
+        </div><!-- /squircle__out -->
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+    
+    
+    <div class="col-12 col-md-12 col-lg-3 mt-4">
+      <div class="row">
+        <div class="col-12">
+          <div class="squircle__content boring-rounded-box🤮" title="don't mention the jQuery">
+            <h2>A boring rounded corner</h2>
+            <p>This is a boring version that you'd make if you're living in 2020 like a chump.</p>
+          </div>
+        </div>
+        
+        <div class="col-12 mt-4">
+          <div class="squircle__out rounded-corner-demo">
+          <div class="squircle__content ">
+            <h2>A nice rounded corner</h2>
+            <p>Lovely</p>
+          </div>
+          <div class="squircle">
+            <div class="squircle__in "></div>
+          </div>
+          </div><!-- /squircle__out -->
+        </div><!-- /col -->
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+  </div><!-- /row -->
+    
+    
+</div><!-- /container -->
+</div><!-- /fullWidth -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<div class="fullWidth__black deets">
+<div class="container">
+  <div class="row py-5  row justify-content-center">
+    <div class="col-10 col-md-8">
+      <div class="squircle__out squircle__big">
+        <div class="squircle__content">
+          <h1 class="b mt-n2">The <span class="letter-fix">D</span>eets</h1>
+          <p>We need to throw out the idea of using the <code>border-radius</code> and a basic <code>background-color</code> for styling element for this effect. Instead we use psuedo elements to blur and re focus with <code>filter: blur</code> and <code>filter: contrast</code>. That gets us a black or white (nicely shaped) element. Adding colour is done by another psuedo element with a <code>mix-blend-mode</code> to lighten or darken to clip to the correct size.</p>
+
+      <div class="squircle__out squircle__code">
+          <div class="squircle__content">
+<pre class="mb-0"><code>&lt;div class="squircle__out squircle__pink"&gt;
+    &lt;div class="squircle__content"&gt;
+    blah blah
+    &lt;/div&gt;
+    
+    &lt;div class="squircle"&gt;
+      &lt;div class="squircle__in"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre></div>
+
+          <div class="squircle">
+          <div class="squircle__in"></div>
+          </div>
+      </div>
+          
+
+        </div>
+
+        <div class="squircle">
+          <div class="squircle__in"></div>
+        </div>
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+    </div><!-- /row -->
+  
+</div>
+
+
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/squircles/dist/script.js b/squircles/dist/script.js
new file mode 100644
index 0000000..7a60865
--- /dev/null
+++ b/squircles/dist/script.js
@@ -0,0 +1,16 @@
+// rotate classes for demo
+jQuery(document).ready(function($){   
+    var classIndex = 0, images = ['sml', 'med', 'big'];
+    $(".intro").addClass(images[classIndex]);
+    setInterval(function () {
+        $(".intro")
+            .removeClass(images[classIndex])
+            .addClass(images[classIndex = (classIndex + 1) % images.length]);
+    }, 2000);
+  
+  // detect if in chrome for the animated borders
+  // transitions are causing a buggy issue
+  if (!!window.chrome) {
+    $('body').addClass('isChrome');
+  }
+});
\ No newline at end of file
diff --git a/squircles/dist/style.css b/squircles/dist/style.css
new file mode 100644
index 0000000..1c9cba8
--- /dev/null
+++ b/squircles/dist/style.css
@@ -0,0 +1,298 @@
+@charset "UTF-8";
+/* bigshot one font */
+@import url(https://fonts.googleapis.com/css?family=Pacifico);
+@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap");
+body {
+  background-color: #eee;
+}
+
+.squircle__content {
+  position: relative;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  padding: 1em;
+}
+
+.squircle__out {
+  border-radius: 5em;
+  position: relative;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 20px 65px 0px;
+}
+.squircle__out:before, .squircle__out:after {
+  z-index: 1;
+  mix-blend-mode: darken;
+  border-radius: 1.85em;
+  display: block;
+  content: "";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  top: 0;
+}
+.squircle__out:after {
+  transform: translateY(0.5em);
+  opacity: 0.5;
+  filter: blur(1.5em);
+  mix-blend-mode: lighten;
+}
+.squircle__out .squircle {
+  mix-blend-mode: lighten;
+  overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  top: 0;
+}
+.squircle__out .squircle .squircle__in {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  top: 0;
+  filter: contrast(75);
+  background-color: black;
+  margin: 0;
+  padding: 0;
+}
+.squircle__out .squircle .squircle__in:after {
+  filter: blur(1em);
+  display: block;
+  content: "";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  top: 0;
+  background-color: white;
+  z-index: 0;
+}
+.isChrome .squircle__out .squircle .squircle__in:after {
+  transition: 2s cubic-bezier(0.8, 0, 0.2, 1.08) filter;
+}
+.sml .squircle__out .squircle .squircle__in:after {
+  filter: blur(1em);
+}
+.med .squircle__out .squircle .squircle__in:after {
+  filter: blur(1.5em);
+}
+.big .squircle__out .squircle .squircle__in:after {
+  filter: blur(2em);
+}
+
+.squircle__big .squircle .squircle__in:after {
+  filter: blur(1.5em);
+}
+
+.squircle__bloo {
+  color: white;
+}
+.squircle__bloo a {
+  color: white;
+}
+.squircle__bloo:after {
+  background-image: linear-gradient(270deg, #7F70FD 0%, #006EFC 100%);
+}
+.squircle__bloo:before {
+  background-image: linear-gradient(270deg, #7F70FD 0%, #006EFC 100%);
+}
+
+.squircle__code {
+  color: white;
+  box-shadow: none;
+}
+.squircle__code a {
+  color: white;
+}
+.squircle__code code {
+  border: none;
+}
+.squircle__code:after {
+  opacity: 0;
+}
+.squircle__code:before {
+  border-radius: 0;
+  mix-blend-mode: lighten;
+  background-color: pink;
+}
+.squircle__code .squircle .squircle__in {
+  filter: contrast(75);
+  background-color: white;
+}
+.squircle__code .squircle .squircle__in:after {
+  background-color: black;
+  filter: blur(0.9em);
+}
+
+.spin {
+  animation: spin 12s linear infinite;
+  display: inline-block;
+}
+
+.squircle__spin__out {
+  overflow: hidden;
+  border-radius: 2em;
+}
+
+.squircle__spin:before {
+  background-image: linear-gradient(90deg, #42E29A 0%, #3BB5B8 100%);
+  left: -50%;
+  right: -50%;
+  top: -50%;
+  bottom: -50%;
+  animation: spin 4s linear infinite;
+}
+
+.squircle__green {
+  color: white;
+}
+.squircle__green code {
+  color: white;
+  font-weight: bolder;
+  text-shadow: 0 1px 1px #e83e8c;
+}
+.squircle__green a {
+  color: white;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(0);
+    transform: rotate(-1turn);
+  }
+}
+.squircle__yellow {
+  color: rgba(0, 0, 0, 0.6);
+  text-shadow: 0 1px 1px #F69185;
+}
+.squircle__yellow code {
+  font-weight: bolder;
+  text-shadow: 0 1px 1px #F69185;
+}
+.squircle__yellow a {
+  color: white;
+}
+.squircle__yellow:after {
+  background-image: linear-gradient(90deg, #FCD586 0%, #F69185 100%);
+}
+.squircle__yellow:before {
+  background-image: linear-gradient(90deg, #FCD586 0%, #F69185 100%);
+}
+
+.squircle__red {
+  color: white;
+}
+.squircle__red code {
+  color: white;
+  font-weight: bolder;
+  text-shadow: 0 1px 1px #e83e8c;
+}
+.squircle__red a {
+  color: white;
+}
+.squircle__red:after {
+  background-image: linear-gradient(90deg, #F883F8 0%, #8274FF 100%);
+}
+.squircle__red:before {
+  background-image: linear-gradient(90deg, #F883F8 0%, #8274FF 100%);
+}
+
+.squircle__pink {
+  color: white;
+  text-shadow: 0 1px 1px #CC1E67;
+}
+.squircle__pink code {
+  color: white;
+  font-weight: bolder;
+  text-shadow: 0 1px 1px #e83e8c;
+}
+.squircle__pink a {
+  color: white;
+}
+.squircle__pink:after {
+  background-image: linear-gradient(90deg, #FF717D 0%, #F45099 100%);
+  mix-blend-mode: lighten;
+}
+.squircle__pink:before {
+  background-image: linear-gradient(90deg, #FF717D 0%, #F45099 100%);
+}
+
+.squircle__teal:before {
+  background-color: teal;
+  opacity: 0.4;
+}
+
+.boring-rounded-box🤮 {
+  font-family: "Times New Roman" !important;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 20px 65px 0px;
+  background-color: white;
+  border-radius: 2em;
+  position: relative;
+}
+.boring-rounded-box🤮:before, .boring-rounded-box🤮:after {
+  position: absolute;
+  content: "";
+  display: block;
+  width: 2em;
+  height: 2em;
+  mix-blend-mode: darken;
+}
+.boring-rounded-box🤮:before {
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid red;
+  border-right: 1px solid red;
+}
+.boring-rounded-box🤮:after {
+  right: 0;
+  top: 0;
+  border-left: 1px solid red;
+  border-bottom: 1px solid red;
+}
+
+.fullWidth__black {
+  background-color: #444444;
+}
+.fullWidth__black h1 {
+  color: white;
+}
+
+p a {
+  text-decoration: underline;
+}
+
+code {
+  border-radius: 0.5em;
+  padding: 0.25em 0.3em;
+  margin: 0 -0.1em;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.b {
+  font-family: "Pacifico", serif;
+  font-size: 72px;
+}
+
+h2 {
+  font-family: "M PLUS Rounded 1c", sans-serif;
+  letter-spacing: -1px;
+}
+
+.letter-fix {
+  letter-spacing: -4px;
+}
+
+.deets h1 {
+  color: #FF717D;
+  background: -webkit-linear-gradient(180deg, #FF717D 0%, #F45099 100%);
+  background: linear-gradient(90deg, #FF717D 0%, #F45099 100%);
+  display: inline-block;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
\ No newline at end of file
diff --git a/squircles/license.txt b/squircles/license.txt
new file mode 100644
index 0000000..54645fd
--- /dev/null
+++ b/squircles/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Duncan (https://codepen.io/duncan_ie/pen/zYKMWQv)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/squircles/src/index.html b/squircles/src/index.html
new file mode 100644
index 0000000..f263d86
--- /dev/null
+++ b/squircles/src/index.html
@@ -0,0 +1,187 @@
+<div class="fullWidth__black py-5 ">
+<div class="container">
+  
+  
+  <div class="row pt-5 row justify-content-center intro">
+    <div class="col-10 col-md-8">
+      <div class="squircle__out squircle__pink">
+      <div class="squircle__content">
+        <h1 class="b mt-n5">Squircles!</h1>
+        <h2>Those things you never knew you loved</h2>
+        <p>Lets turn the corner on border-radius in 2021</p>
+      </div>
+
+      <div class="squircle">
+        <div class="squircle__in"></div>
+      </div>
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+    </div><!-- /row -->
+    
+  
+  
+  
+  
+  
+  
+  <div class="row pt-5">
+    <div class="col-12 col-md-8 mb-4 mb-lg-0">
+      <div class="squircle__out squircle__red">
+      <div class="squircle__content">
+        <h2>With no SVG nonsense or houdini witchcraft</h2>
+        <p>Requires <code>filter</code> and <code>mix-blend-mode</code> (for colours). So that's ie11 out - ho hum.</p>
+        <p>This demo is built using the basic bootstrap col system as a proof of concept. These are fully resizable and responsive.</p>
+      </div>
+
+      <div class="squircle">
+        <div class="squircle__in"></div>
+      </div>
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+    
+    
+    
+    <div class="col-12 col-md-4">
+      <div class="squircle__out squircle__bloo">
+      <div class="squircle__content">
+        <h2>What's a Squircle?</h2>
+        <p>A squircle is a rounded rectangle, but with no clear end to the rounding. <a href="https://99percentinvisible.org/article/circling-square-designing-squircles-instead-rounded-rectangles/">Read more here.</a></p>
+      </div>
+
+      <div class="squircle">
+        <div class="squircle__in"></div>
+      </div>
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+    
+    
+    
+    
+    
+    
+    <div class="col-12 col-lg-4 col-md-6 mt-4">
+      <div class="squircle__out squircle__yellow squircle__skew">
+      <div class="squircle__content">
+        <h2>Background colour?</h2>
+        <p>Yes, with limitations. As the shape is created by a contrast filter, it must be on a darker or lighter background. An old fashoned <code>background-color</code> won't cut it here. You need psuedo elements to lighten or darken the color to your desired target.
+      </div>
+
+      <div class="squircle">
+        <div class="squircle__in "></div>
+      </div>
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    <div class="col-12 col-lg-5 col-md-6 mt-4">
+      <div class="squircle__spin__out">
+        <div class="squircle__out squircle__green squircle__spin">
+          <div class="squircle__content">
+            <h2>Animated <br>Background <span class="spin">🔄</span></h2>
+            <p>Currently has a bug where the <code>overflow</code> class causes an extra rounded border, and with the animation on on layer, you can't have the fancy blur.</p>
+            <p>Animations don't work too well with this, as we're asking the browser to render using a combination of filter and mix-blend-mode that doesn't re draw too well. Check out this on Chrome to see a funny effect after scrolling, rendering half the box during the animation.<p>
+          </div>
+          <div class="squircle">
+            <div class="squircle__in "></div>
+          </div>
+        </div><!-- /squircle__out -->
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+    
+    
+    <div class="col-12 col-md-12 col-lg-3 mt-4">
+      <div class="row">
+        <div class="col-12">
+          <div class="squircle__content boring-rounded-box🤮" title="don't mention the jQuery">
+            <h2>A boring rounded corner</h2>
+            <p>This is a boring version that you'd make if you're living in 2020 like a chump.</p>
+          </div>
+        </div>
+        
+        <div class="col-12 mt-4">
+          <div class="squircle__out rounded-corner-demo">
+          <div class="squircle__content ">
+            <h2>A nice rounded corner</h2>
+            <p>Lovely</p>
+          </div>
+          <div class="squircle">
+            <div class="squircle__in "></div>
+          </div>
+          </div><!-- /squircle__out -->
+        </div><!-- /col -->
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+  </div><!-- /row -->
+    
+    
+</div><!-- /container -->
+</div><!-- /fullWidth -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<div class="fullWidth__black deets">
+<div class="container">
+  <div class="row py-5  row justify-content-center">
+    <div class="col-10 col-md-8">
+      <div class="squircle__out squircle__big">
+        <div class="squircle__content">
+          <h1 class="b mt-n2">The <span class="letter-fix">D</span>eets</h1>
+          <p>We need to throw out the idea of using the <code>border-radius</code> and a basic <code>background-color</code> for styling element for this effect. Instead we use psuedo elements to blur and re focus with <code>filter: blur</code> and <code>filter: contrast</code>. That gets us a black or white (nicely shaped) element. Adding colour is done by another psuedo element with a <code>mix-blend-mode</code> to lighten or darken to clip to the correct size.</p>
+
+      <div class="squircle__out squircle__code">
+          <div class="squircle__content">
+<pre class="mb-0"><code>&lt;div class="squircle__out squircle__pink"&gt;
+    &lt;div class="squircle__content"&gt;
+    blah blah
+    &lt;/div&gt;
+    
+    &lt;div class="squircle"&gt;
+      &lt;div class="squircle__in"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre></div>
+
+          <div class="squircle">
+          <div class="squircle__in"></div>
+          </div>
+      </div>
+          
+
+        </div>
+
+        <div class="squircle">
+          <div class="squircle__in"></div>
+        </div>
+      </div><!-- /squircle__out -->
+    </div><!-- /col -->
+    </div><!-- /row -->
+  
+</div>
+
+
+</div>
\ No newline at end of file
diff --git a/squircles/src/script.js b/squircles/src/script.js
new file mode 100644
index 0000000..7a60865
--- /dev/null
+++ b/squircles/src/script.js
@@ -0,0 +1,16 @@
+// rotate classes for demo
+jQuery(document).ready(function($){   
+    var classIndex = 0, images = ['sml', 'med', 'big'];
+    $(".intro").addClass(images[classIndex]);
+    setInterval(function () {
+        $(".intro")
+            .removeClass(images[classIndex])
+            .addClass(images[classIndex = (classIndex + 1) % images.length]);
+    }, 2000);
+  
+  // detect if in chrome for the animated borders
+  // transitions are causing a buggy issue
+  if (!!window.chrome) {
+    $('body').addClass('isChrome');
+  }
+});
\ No newline at end of file
diff --git a/squircles/src/style.scss b/squircles/src/style.scss
new file mode 100644
index 0000000..2a224fb
--- /dev/null
+++ b/squircles/src/style.scss
@@ -0,0 +1,324 @@
+
+/* bigshot one font */
+@import url(https://fonts.googleapis.com/css?family=Pacifico);
+@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap');
+
+body {
+  background-color: #eee
+}
+
+.squircle__content {
+  position: relative;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  padding: 1em;
+}
+.squircle__out {
+  // unrelated to the actual visual rounding. Just for catching if you want a box shadow
+  border-radius: 5em; 
+  position: relative;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 20px 65px 0px;
+  
+  // before = background-color
+  // after = fancy blur
+  
+  &:before, &:after {
+    z-index: 1;
+    mix-blend-mode: darken;
+    border-radius: 1.85em;
+    
+    
+    display: block;
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    top: 0;
+  }
+  
+  &:after {
+    transform: translateY(.5em);
+    opacity: .5;
+    filter: blur(1.5em);
+    mix-blend-mode: lighten;
+  }
+  
+  .squircle {
+    mix-blend-mode: lighten;
+    overflow: hidden;
+    position: absolute;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      top: 0;
+
+    .squircle__in {
+      position: absolute;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        top: 0;
+      filter: contrast(75);
+      background-color: black;
+      margin: 0;
+      padding: 0;
+
+      &:after  {
+        filter: blur(1em);
+        display: block;
+        content: '';
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        top: 0;
+        background-color: white;
+        z-index: 0;
+        
+        .isChrome & {
+          transition: 2s cubic-bezier(.8,0,.2,1.08) filter;
+        }
+        .sml & {filter: blur(1em)}
+        .med & {filter: blur(1.5em)}
+        .big & {filter: blur(2em)}
+      }  
+    }
+  }
+}
+.squircle__big {
+  .squircle .squircle__in:after {
+   filter: blur(1.5em) 
+  }
+}
+.squircle__bloo{
+  color: white;
+  a {  color: white; }
+  &:after {
+    background-image: linear-gradient(270deg, #7F70FD 0%, #006EFC 100%);
+  }
+  &:before {
+    background-image: linear-gradient(270deg, #7F70FD 0%, #006EFC 100%);
+  }
+}
+
+
+.squircle__code{
+  color: white;
+  box-shadow: none;
+ 
+  a {  color: white; }
+  code {
+    border: none;
+  }
+  &:after {
+    opacity: 0
+  }
+  &:before {
+    border-radius: 0;
+    mix-blend-mode: lighten;
+    background-color: pink
+  }
+  .squircle .squircle__in {
+    filter: contrast(75);
+    background-color: white;
+    &:after {
+      background-color: black;
+      filter: blur(.9em);
+    }
+  }
+}
+
+
+.spin {
+  animation:spin 12s linear infinite;
+  display: inline-block;
+}
+.squircle__spin__out {
+  overflow: hidden;
+  border-radius: 2em;
+}
+.squircle__spin {
+  
+  // turn this off for a fun effect
+  // overflow: hidden;
+  
+  
+  &:before {
+    background-image: linear-gradient(90deg, #42E29A 0%, #3BB5B8 100%);
+    left: -50%;    
+    right: -50%;
+    top: -50%;
+    bottom: -50%;
+
+    animation:spin 4s linear infinite;
+  }
+}
+.squircle__green {
+  color: white;
+
+  code {
+    color: white;
+    font-weight: bolder;
+    text-shadow: 0 1px 1px #e83e8c;
+  }
+  a {  color: white; }
+}
+
+
+
+@keyframes spin { 100% { transform: rotate(0); transform:rotate(-1turn); } }
+
+
+
+
+
+
+.squircle__yellow{
+  color: rgba(0, 0, 0, .6);
+  text-shadow: 0 1px 1px #F69185;
+  code {
+    font-weight: bolder;
+    text-shadow: 0 1px 1px #F69185;
+  }
+  a {  color: white; }
+  &:after {
+    background-image: linear-gradient(90deg, #FCD586 0%, #F69185 100%);
+  }
+  &:before {
+    background-image: linear-gradient(90deg, #FCD586 0%, #F69185 100%);
+  }
+}
+
+
+.squircle__red {
+  color: white;
+  code {
+    color: white;
+    font-weight: bolder;
+    text-shadow: 0 1px 1px #e83e8c;
+  }
+  a {  color: white; }
+  &:after {
+    background-image: linear-gradient(90deg, #F883F8 0%, #8274FF 100%);
+  }
+  &:before {
+    background-image: linear-gradient(90deg, #F883F8 0%, #8274FF 100%);
+  }
+}
+
+
+.squircle__pink{
+  color: white;
+  
+  text-shadow: 0 1px 1px #CC1E67;
+  code {
+    color: white;
+    font-weight: bolder;
+    text-shadow: 0 1px 1px #e83e8c;
+  }
+  a {  color: white; }
+  &:after {
+    background-image: linear-gradient(90deg, #FF717D 0%, #F45099 100%);
+    mix-blend-mode: lighten;
+  }
+  &:before {
+    background-image: linear-gradient(90deg, #FF717D 0%, #F45099 100%);
+  }
+}
+
+
+
+
+.squircle__teal:before {
+    background-color: teal;
+    opacity: .4;
+}
+
+
+
+
+.boring-rounded-box🤮 {
+  font-family: "Times New Roman" !important;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 20px 65px 0px;
+  background-color: white;
+  border-radius: 2em;
+  position: relative;
+  &:before, &:after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 2em;
+    height: 2em;
+    mix-blend-mode: darken;
+  }
+  
+  &:before {
+    bottom: 0;
+    left: 0;
+    border-top: 1px solid red;
+    border-right: 1px solid red;
+  }
+  &:after {
+    right: 0;
+    top: 0;
+    border-left: 1px solid red;
+    border-bottom: 1px solid red;
+  }
+}
+
+
+
+.fullWidth__black {
+  background-color: #444444;
+  
+  h1 {
+    color: white;
+  }
+}
+
+p a {
+  text-decoration: underline;
+}
+
+code {
+  border-radius: .5em;
+  padding: .25em .3em;
+  margin: 0 -.1em;
+  border: 1px solid rgba(255, 255, 255, .5);
+}
+
+.b
+{
+    font-family: 'Pacifico', serif;
+    font-size: 72px;
+}
+
+h2 {
+  font-family: 'M PLUS Rounded 1c', sans-serif;
+  letter-spacing: -1px;
+}
+
+.letter-fix {
+  letter-spacing: -4px;
+}
+
+.deets {
+  h1 {
+    // color: #F883F8
+    // color: #cc1e67
+    color: #FF717D;
+
+    background: -webkit-linear-gradient(180deg, #FF717D 0%, #F45099 100%);
+      background: linear-gradient(90deg, #FF717D 0%, #F45099 100%);
+
+    display: inline-block;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+      background-clip: text;
+      text-fill-color: transparent;
+  }
+}
\ No newline at end of file
diff --git a/squishy-toggle-buttons/README.markdown b/squishy-toggle-buttons/README.markdown
new file mode 100644
index 0000000..e200b94
--- /dev/null
+++ b/squishy-toggle-buttons/README.markdown
@@ -0,0 +1,5 @@
+# Squishy Toggle Buttons
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/soulwire/pen/bKens](https://codepen.io/soulwire/pen/bKens).
+
+Simulating squishy rubber (elastomer) buttons, inspired by designs on Dribbble
diff --git a/squishy-toggle-buttons/dist/index.html b/squishy-toggle-buttons/dist/index.html
new file mode 100644
index 0000000..277dc6e
--- /dev/null
+++ b/squishy-toggle-buttons/dist/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Squishy Toggle Buttons</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="toggle">
+    <input type="checkbox">
+    <span class="button"></span>
+    <span class="label">+</span>
+  </div>
+  <div class="toggle">
+    <input type="checkbox" checked>
+    <span class="button"></span>
+    <span class="label">–</span>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/squishy-toggle-buttons/dist/script.js b/squishy-toggle-buttons/dist/script.js
new file mode 100644
index 0000000..8765bd0
--- /dev/null
+++ b/squishy-toggle-buttons/dist/script.js
@@ -0,0 +1,7 @@
+(function() {
+
+
+}).call(this);
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0FBQUEiLCJzb3VyY2VzQ29udGVudCI6WyIiXX0=
+//# sourceURL=coffeescript
\ No newline at end of file
diff --git a/squishy-toggle-buttons/dist/style.css b/squishy-toggle-buttons/dist/style.css
new file mode 100644
index 0000000..42adc2d
--- /dev/null
+++ b/squishy-toggle-buttons/dist/style.css
@@ -0,0 +1,98 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:700);
+html, body {
+  font-family: "Lato", sans-serif;
+  background: url(https://s.cdpn.io/1715/dark_stripes.png);
+  text-align: center;
+  height: 100%;
+}
+
+.container {
+  text-align: center;
+  position: absolute;
+  margin-top: -80px;
+  width: 100%;
+  top: 50%;
+}
+
+.toggle {
+  margin: 4px;
+  display: inline-block;
+}
+
+.toggle {
+  box-shadow: inset 0 0 35px 5px rgba(0, 0, 0, 0.25), inset 0 2px 1px 1px rgba(255, 255, 255, 0.9), inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);
+  border-radius: 8px;
+  background: #ccd0d4;
+  position: relative;
+  height: 140px;
+  width: 140px;
+}
+.toggle:before {
+  box-shadow: 0 0 17.5px 8.75px #fff;
+  border-radius: 118.3px;
+  background: #fff;
+  position: absolute;
+  margin-left: -50.4px;
+  margin-top: -50.4px;
+  opacity: 0.2;
+  content: "";
+  height: 100.8px;
+  width: 100.8px;
+  left: 50%;
+  top: 50%;
+}
+.toggle .button {
+  -webkit-filter: blur(1px);
+  -moz-filter: blur(1px);
+  filter: blur(1px);
+  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5), inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 0 20px 30px 0 rgba(255, 255, 255, 0.2);
+  border-radius: 96.32px;
+  position: absolute;
+  background: #ccd0d4;
+  margin-left: -48.16px;
+  margin-top: -48.16px;
+  display: block;
+  height: 96.32px;
+  width: 96.32px;
+  left: 50%;
+  top: 50%;
+}
+.toggle .label {
+  transition: color 300ms ease-out;
+  text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0, 0, 0, 0.8), 1px 1px 4px #fff;
+  line-height: 139px;
+  text-align: center;
+  position: absolute;
+  font-weight: 700;
+  font-size: 42px;
+  display: block;
+  opacity: 0.9;
+  height: 100%;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.4);
+}
+.toggle input {
+  opacity: 0;
+  position: absolute;
+  cursor: pointer;
+  z-index: 1;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+}
+.toggle input:active ~ .button {
+  box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 30px 1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 25px 0 rgba(0, 0, 0, 0.4), inset 0 0 10px 1px rgba(255, 255, 255, 0.6);
+}
+.toggle input:active ~ .label {
+  font-size: 40px;
+  color: rgba(0, 0, 0, 0.45);
+}
+.toggle input:checked ~ .button {
+  box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 20px 0 rgba(0, 0, 0, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.6);
+}
+.toggle input:checked ~ .label {
+  font-size: 40px;
+  color: rgba(0, 0, 0, 0.4);
+}
\ No newline at end of file
diff --git a/squishy-toggle-buttons/license.txt b/squishy-toggle-buttons/license.txt
new file mode 100644
index 0000000..6e1de47
--- /dev/null
+++ b/squishy-toggle-buttons/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Justin Windle (https://codepen.io/soulwire/pen/bKens)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/squishy-toggle-buttons/src/index.html b/squishy-toggle-buttons/src/index.html
new file mode 100644
index 0000000..094976a
--- /dev/null
+++ b/squishy-toggle-buttons/src/index.html
@@ -0,0 +1,12 @@
+<div class="container">
+  <div class="toggle">
+    <input type="checkbox">
+    <span class="button"></span>
+    <span class="label">+</span>
+  </div>
+  <div class="toggle">
+    <input type="checkbox" checked>
+    <span class="button"></span>
+    <span class="label">–</span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/squishy-toggle-buttons/src/script.coffee b/squishy-toggle-buttons/src/script.coffee
new file mode 100644
index 0000000..e69de29
diff --git a/squishy-toggle-buttons/src/style.sass b/squishy-toggle-buttons/src/style.sass
new file mode 100644
index 0000000..7818f7e
--- /dev/null
+++ b/squishy-toggle-buttons/src/style.sass
@@ -0,0 +1,124 @@
+@import compass
+
+
+// Squishy buttons inspired by https://goo.gl/bFCyS
+
+@import url(https://fonts.googleapis.com/css?family=Lato:700)
+
+html, body
+
+  font-family: 'Lato', sans-serif
+  background: url(https://s.cdpn.io/1715/dark_stripes.png)
+  text-align: center
+  height: 100%
+
+.container
+
+  text-align: center
+  position: absolute
+  margin-top: -80px
+  width: 100%
+  top: 50%
+
+.toggle
+
+  margin: 4px
+  display: inline-block
+
+.toggle
+  $size: 140px
+
+  box-shadow: inset 0 0 35px 5px rgba(0,0,0,0.25), inset 0 2px 1px 1px rgba(255,255,255,0.9), inset 0 -2px 1px 0 rgba(0,0,0,0.25)
+  border-radius: 8px
+  background: #ccd0d4
+  position: relative
+  height: $size
+  width: $size
+
+  &:before
+
+    $radius: $size * 0.845
+    $glow: $size * 0.125
+
+    box-shadow: 0 0 $glow $glow / 2 #fff
+    border-radius: $radius
+    background: #fff
+    position: absolute
+    margin-left: ( $radius - $glow ) * -0.5
+    margin-top: ( $radius - $glow ) * -0.5
+    opacity: 0.2
+    content: ''
+    height: $radius - $glow
+    width: $radius - $glow
+    left: 50%
+    top: 50%
+
+  .button
+
+    $radius: $size * 0.688
+
+    -webkit-filter: blur(1px)
+    -moz-filter: blur(1px)
+    filter: blur(1px)
+
+    transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)
+    box-shadow: 0 15px 25px -4px rgba(0,0,0,0.5), inset 0 -3px 4px -1px rgba(0,0,0,0.2), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 3px 4px -1px rgba(255,255,255,0.2), inset 0 0 5px 1px rgba(255,255,255,0.8), inset 0 20px 30px 0 rgba(255,255,255,0.2)
+    border-radius: $radius
+    position: absolute
+    background: #ccd0d4
+    margin-left: $radius * -0.5
+    margin-top: $radius * -0.5
+    display: block
+    height: $radius
+    width: $radius
+    left: 50%
+    top: 50%
+
+  .label
+
+    transition: color 300ms ease-out
+    text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0,0,0,0.8), 1px 1px 4px #fff
+    line-height: $size - 1
+    text-align: center
+    position: absolute
+    font-weight: 700
+    font-size: 42px
+    display: block
+    opacity: 0.9
+    height: 100%
+    width: 100%
+    color: rgba(0,0,0,0.4)
+
+  input
+
+    opacity: 0
+    background :red
+    position: absolute
+    cursor: pointer
+    z-index: 1
+    height: 100%
+    width: 100%
+    left: 0
+    top: 0
+
+    &:active
+
+      ~ .button
+
+        box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4), inset 0 -8px 30px 1px rgba(255,255,255,0.9), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 8px 25px 0 rgba(0,0,0,0.4), inset 0 0 10px 1px rgba(255,255,255,0.6)
+      
+      ~ .label
+
+        font-size: 40px
+        color: rgba(0,0,0,0.45)
+
+    &:checked
+      
+      ~ .button
+
+        box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4), inset 0 -8px 25px -1px rgba(255,255,255,0.9), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 8px 20px 0 rgba(0,0,0,0.2), inset 0 0 5px 1px rgba(255,255,255,0.6)
+
+      ~ .label
+
+        font-size: 40px
+        color: rgba(0,0,0,0.4)
diff --git a/stacked-flexible-slides-layout/README.markdown b/stacked-flexible-slides-layout/README.markdown
new file mode 100644
index 0000000..38d702d
--- /dev/null
+++ b/stacked-flexible-slides-layout/README.markdown
@@ -0,0 +1,4 @@
+# Stacked flexible slides layout
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/KamilDyrek/pen/rPKOaV](https://codepen.io/KamilDyrek/pen/rPKOaV).
+
+ This example illustrates how to create layout of slides stacked on each  other (especially useful for fade in/out transitions). It's achieved without setting their height and avoiding position: absolute; so they are fully flexible and easy to keep in normal page flow.
\ No newline at end of file
diff --git a/stacked-flexible-slides-layout/dist/index.html b/stacked-flexible-slides-layout/dist/index.html
new file mode 100644
index 0000000..8891c16
--- /dev/null
+++ b/stacked-flexible-slides-layout/dist/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Stacked flexible slides layout</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- This example illustrates how to create layout of slides stacked on each  other(especially useful for fade in/out transitions). It's achieved without setting their height and avoiding position: absolute; so they are fully flexible and easy to keep in normal page flow. -->
+<input type="radio" name="switch" id="i_1">
+<input type="radio" name="switch" id="i_2">
+<input type="radio" name="switch" id="i_3" checked>
+<input type="radio" name="switch" id="i_4">
+<input type="radio" name="switch" id="i_5">
+<input type="radio" name="switch" id="i_6">
+<div class="wrapper">
+  <div class="slide">
+    <div class="content content1">
+        <p>Nullam quis pretium nisl, suscipit imperdiet metus. Fusce efficitur odio id dolor egestas, quis dignissim orci consequat. Pellentesque libero nunc, volutpat et ligula eu, aliquam iaculis odio. 
+          <p>In venenatis aliquet ligula sed accumsan. Maecenas imperdiet a ligula eleifend consectetur.
+
+<p>Nam a urna dapibus, lobortis lectus vitae, blandit dolor. Donec elementum elit vitae egestas feugiat. Praesent eu mauris quis leo molestie eleifend. Donec est nisl, facilisis nec venenatis vitae, efficitur et augue. Donec fringilla dui dui, nec viverra metus viverra et. Etiam nec convallis est, in cursus nisi. Integer vel ullamcorper ante.  <p>Pellentesque et viverra risus. Duis volutpat felis sit amet dictum fermentum. Fusce condimentum porta diam, ut commodo orci accumsan sed. Aenean mi leo, lobortis eu porta a, mattis malesuada nisi. Morbi varius efficitur nisi ac mollis. Fusce et mauris vitae sem varius porttitor. 
+      <p>Nullam vel elit massa. Nam sed egestas neque, ut sollicitudin urna. Curabitur vestibulum felis vitae sapien venenatis mattis.
+
+<p>Praesent mattis est faucibus tellus eleifend viverra. Nam non lectus vulputate lacus tristique fermentum. Fusce venenatis mollis imperdiet. Nunc dictum nisi quis mauris varius tincidunt. Suspendisse imperdiet felis lectus. Nunc pharetra tellus ac nulla scelerisque pulvinar. Fusce non blandit dui, sed facilisis neque. Donec gravida nibh dolor, vitae imperdiet lorem varius et. Maecenas pulvinar enim eget velit porta lobortis. Pellentesque sagittis tristique fermentum. <p>Aliquam pretium magna sed consectetur pellentesque. Maecenas id sem eu urna molestie lobortis lacinia nec nulla. Donec tristique tellus lectus, eu faucibus erat tincidunt non. Nunc ut mollis velit.
+    </div>   
+  </div>
+  <div class="slide">
+    <div class="content content2">
+      <span>♫</span>
+    </div>    
+  </div>
+  <div class="slide">
+    <div class="content content3">
+      
+    </div>
+  </div>
+  <div class="slide">
+    <div class="content content4">
+  <p>Nullam vel elit massa. Nam sed egestas neque, ut sollicitudin urna. Curabitur vestibulum felis vitae sapien venenatis mattis.
+
+<p>Praesent mattis est faucibus tellus eleifend viverra. Nam non lectus vulputate lacus tristique fermentum. Fusce venenatis mollis imperdiet. Nunc dictum nisi quis mauris varius tincidunt. Suspendisse imperdiet felis lectus. Nunc pharetra tellus ac nulla scelerisque pulvinar. Fusce non blandit dui, sed facilisis neque. Donec gravida nibh dolor, vitae imperdiet lorem varius et. Maecenas pulvinar enim eget velit porta lobortis. Pellentesque sagittis tristique fermentum. <p>Aliquam pretium magna sed consectetur pellentesque. Maecenas id sem eu urna molestie lobortis lacinia nec nulla. Donec tristique tellus lectus, eu faucibus erat tincidunt non. Nunc ut mollis velit.     
+    </div>    
+  </div>
+  <div class="slide">
+    <div class="content content5">
+      <span>♪</span>
+    </div>    
+  </div>
+  <div class="slide">
+    <div class="content content6">
+      <span>♬</span>
+    </div>   
+  </div>  
+</div>
+<div class="controls">
+  <label for="i_1">⬤</label>
+  <label for="i_2">⬤</label>
+  <label for="i_3">⬤</label>
+  <label for="i_4">⬤</label>
+  <label for="i_5">⬤</label>
+  <label for="i_6">⬤</label>
+</div>
+<a target="_blank" href="https://twitter.com/kamildyrek"><svg style="width:2em;height:2em;position:fixed;top:1em;left:1em;opacity:.8;" viewBox="0 0 24 24"><path fill="#fff" d="M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" /></svg></a>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/stacked-flexible-slides-layout/dist/style.css b/stacked-flexible-slides-layout/dist/style.css
new file mode 100644
index 0000000..888d36f
--- /dev/null
+++ b/stacked-flexible-slides-layout/dist/style.css
@@ -0,0 +1,113 @@
+@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
+
+/* Some resets, not essencial for this example to work */
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+/* Base styles for this example */
+
+.wrapper {
+  width: 50vw; /* unfortunately width has to be set to some hard value */
+  display: flex;
+}
+
+.slide {
+  width: 0;
+}
+
+.content {
+  width: 50vw;
+  height: 100%; /* this is optional if you want every slide to have same height as the highest one */
+}
+
+/* Additional styling */
+
+html, body {
+  background-color: #BDBDBD;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center; 
+  font-family: Lato;
+}
+
+.wrapper {
+  margin: 0 auto;
+  background-color: white;
+  box-shadow: 3px 3px 20px #9E9E9E;
+}
+
+span {
+  background-color: white;
+  text-align: center;
+  line-height: 4rem;
+  width: 4rem;
+  border-radius: 8rem;
+  color: #616161;
+  font-size: 2rem;
+}
+
+.content {
+  padding: 30px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .6s;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.content2,
+.content5,
+.content6
+{
+  display: flex;
+  justify-content: center;
+  align-items: center;  
+  background-color: #E0E0E0;
+}
+
+.content3 {
+  background-image: url(https://images.unsplash.com/photo-1507473885765-e6ed057f782c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
+  background-size: cover;
+  background-position: center;
+}
+#i_1:checked ~ .wrapper .content1,
+#i_2:checked ~ .wrapper .content2,
+#i_3:checked ~ .wrapper .content3,
+#i_4:checked ~ .wrapper .content4,
+#i_5:checked ~ .wrapper .content5,
+#i_6:checked ~ .wrapper .content6 {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+label {
+  color: #E0E0E0;
+  transition-duration: .6s;
+  cursor: pointer;
+}
+
+#i_1:checked ~ .controls label[for="i_1"],
+#i_2:checked ~ .controls label[for="i_2"],
+#i_3:checked ~ .controls label[for="i_3"],
+#i_4:checked ~ .controls label[for="i_4"],
+#i_5:checked ~ .controls label[for="i_5"],
+#i_6:checked ~ .controls label[for="i_6"] {
+  color: #424242;
+}
\ No newline at end of file
diff --git a/stacked-flexible-slides-layout/license.txt b/stacked-flexible-slides-layout/license.txt
new file mode 100644
index 0000000..ef4f60f
--- /dev/null
+++ b/stacked-flexible-slides-layout/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Kamil (https://codepen.io/KamilDyrek/pen/rPKOaV)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/stacked-flexible-slides-layout/src/index.html b/stacked-flexible-slides-layout/src/index.html
new file mode 100644
index 0000000..e93794a
--- /dev/null
+++ b/stacked-flexible-slides-layout/src/index.html
@@ -0,0 +1,56 @@
+<!-- This example illustrates how to create layout of slides stacked on each  other(especially useful for fade in/out transitions). It's achieved without setting their height and avoiding position: absolute; so they are fully flexible and easy to keep in normal page flow. -->
+<input type="radio" name="switch" id="i_1">
+<input type="radio" name="switch" id="i_2">
+<input type="radio" name="switch" id="i_3" checked>
+<input type="radio" name="switch" id="i_4">
+<input type="radio" name="switch" id="i_5">
+<input type="radio" name="switch" id="i_6">
+<div class="wrapper">
+  <div class="slide">
+    <div class="content content1">
+        <p>Nullam quis pretium nisl, suscipit imperdiet metus. Fusce efficitur odio id dolor egestas, quis dignissim orci consequat. Pellentesque libero nunc, volutpat et ligula eu, aliquam iaculis odio. 
+          <p>In venenatis aliquet ligula sed accumsan. Maecenas imperdiet a ligula eleifend consectetur.
+
+<p>Nam a urna dapibus, lobortis lectus vitae, blandit dolor. Donec elementum elit vitae egestas feugiat. Praesent eu mauris quis leo molestie eleifend. Donec est nisl, facilisis nec venenatis vitae, efficitur et augue. Donec fringilla dui dui, nec viverra metus viverra et. Etiam nec convallis est, in cursus nisi. Integer vel ullamcorper ante.  <p>Pellentesque et viverra risus. Duis volutpat felis sit amet dictum fermentum. Fusce condimentum porta diam, ut commodo orci accumsan sed. Aenean mi leo, lobortis eu porta a, mattis malesuada nisi. Morbi varius efficitur nisi ac mollis. Fusce et mauris vitae sem varius porttitor. 
+      <p>Nullam vel elit massa. Nam sed egestas neque, ut sollicitudin urna. Curabitur vestibulum felis vitae sapien venenatis mattis.
+
+<p>Praesent mattis est faucibus tellus eleifend viverra. Nam non lectus vulputate lacus tristique fermentum. Fusce venenatis mollis imperdiet. Nunc dictum nisi quis mauris varius tincidunt. Suspendisse imperdiet felis lectus. Nunc pharetra tellus ac nulla scelerisque pulvinar. Fusce non blandit dui, sed facilisis neque. Donec gravida nibh dolor, vitae imperdiet lorem varius et. Maecenas pulvinar enim eget velit porta lobortis. Pellentesque sagittis tristique fermentum. <p>Aliquam pretium magna sed consectetur pellentesque. Maecenas id sem eu urna molestie lobortis lacinia nec nulla. Donec tristique tellus lectus, eu faucibus erat tincidunt non. Nunc ut mollis velit.
+    </div>   
+  </div>
+  <div class="slide">
+    <div class="content content2">
+      <span>♫</span>
+    </div>    
+  </div>
+  <div class="slide">
+    <div class="content content3">
+      
+    </div>
+  </div>
+  <div class="slide">
+    <div class="content content4">
+  <p>Nullam vel elit massa. Nam sed egestas neque, ut sollicitudin urna. Curabitur vestibulum felis vitae sapien venenatis mattis.
+
+<p>Praesent mattis est faucibus tellus eleifend viverra. Nam non lectus vulputate lacus tristique fermentum. Fusce venenatis mollis imperdiet. Nunc dictum nisi quis mauris varius tincidunt. Suspendisse imperdiet felis lectus. Nunc pharetra tellus ac nulla scelerisque pulvinar. Fusce non blandit dui, sed facilisis neque. Donec gravida nibh dolor, vitae imperdiet lorem varius et. Maecenas pulvinar enim eget velit porta lobortis. Pellentesque sagittis tristique fermentum. <p>Aliquam pretium magna sed consectetur pellentesque. Maecenas id sem eu urna molestie lobortis lacinia nec nulla. Donec tristique tellus lectus, eu faucibus erat tincidunt non. Nunc ut mollis velit.     
+    </div>    
+  </div>
+  <div class="slide">
+    <div class="content content5">
+      <span>♪</span>
+    </div>    
+  </div>
+  <div class="slide">
+    <div class="content content6">
+      <span>♬</span>
+    </div>   
+  </div>  
+</div>
+<div class="controls">
+  <label for="i_1">⬤</label>
+  <label for="i_2">⬤</label>
+  <label for="i_3">⬤</label>
+  <label for="i_4">⬤</label>
+  <label for="i_5">⬤</label>
+  <label for="i_6">⬤</label>
+</div>
+<a target="_blank" href="https://twitter.com/kamildyrek"><svg style="width:2em;height:2em;position:fixed;top:1em;left:1em;opacity:.8;" viewBox="0 0 24 24"><path fill="#fff" d="M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" /></svg></a>
\ No newline at end of file
diff --git a/stacked-flexible-slides-layout/src/style.css b/stacked-flexible-slides-layout/src/style.css
new file mode 100644
index 0000000..888d36f
--- /dev/null
+++ b/stacked-flexible-slides-layout/src/style.css
@@ -0,0 +1,113 @@
+@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
+
+/* Some resets, not essencial for this example to work */
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+/* Base styles for this example */
+
+.wrapper {
+  width: 50vw; /* unfortunately width has to be set to some hard value */
+  display: flex;
+}
+
+.slide {
+  width: 0;
+}
+
+.content {
+  width: 50vw;
+  height: 100%; /* this is optional if you want every slide to have same height as the highest one */
+}
+
+/* Additional styling */
+
+html, body {
+  background-color: #BDBDBD;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center; 
+  font-family: Lato;
+}
+
+.wrapper {
+  margin: 0 auto;
+  background-color: white;
+  box-shadow: 3px 3px 20px #9E9E9E;
+}
+
+span {
+  background-color: white;
+  text-align: center;
+  line-height: 4rem;
+  width: 4rem;
+  border-radius: 8rem;
+  color: #616161;
+  font-size: 2rem;
+}
+
+.content {
+  padding: 30px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .6s;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.content2,
+.content5,
+.content6
+{
+  display: flex;
+  justify-content: center;
+  align-items: center;  
+  background-color: #E0E0E0;
+}
+
+.content3 {
+  background-image: url(https://images.unsplash.com/photo-1507473885765-e6ed057f782c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
+  background-size: cover;
+  background-position: center;
+}
+#i_1:checked ~ .wrapper .content1,
+#i_2:checked ~ .wrapper .content2,
+#i_3:checked ~ .wrapper .content3,
+#i_4:checked ~ .wrapper .content4,
+#i_5:checked ~ .wrapper .content5,
+#i_6:checked ~ .wrapper .content6 {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+label {
+  color: #E0E0E0;
+  transition-duration: .6s;
+  cursor: pointer;
+}
+
+#i_1:checked ~ .controls label[for="i_1"],
+#i_2:checked ~ .controls label[for="i_2"],
+#i_3:checked ~ .controls label[for="i_3"],
+#i_4:checked ~ .controls label[for="i_4"],
+#i_5:checked ~ .controls label[for="i_5"],
+#i_6:checked ~ .controls label[for="i_6"] {
+  color: #424242;
+}
\ No newline at end of file
diff --git a/stacking-cards/README.markdown b/stacking-cards/README.markdown
new file mode 100644
index 0000000..a3e1ca2
--- /dev/null
+++ b/stacking-cards/README.markdown
@@ -0,0 +1,5 @@
+# Stacking Cards
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ainalem/pen/wvoxPwK](https://codepen.io/ainalem/pen/wvoxPwK).
+
+A demo with sticky headers and a stacking card effect.
diff --git a/stacking-cards/dist/index.html b/stacking-cards/dist/index.html
new file mode 100644
index 0000000..212738e
--- /dev/null
+++ b/stacking-cards/dist/index.html
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Stacking Cards</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="phone-frame">
+  <div class="phone-screen">
+    <div class="content">
+      <div class="list">
+        <svg class="golazo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 21" height="31.8" width="66">
+          <path d="M16.532 12.423H13.03v1.79h1.513v.775c-.138.138-.763.538-1.864.538-1.39 0-2.466-1-2.466-2.627 0-1.415.9-2.503 2.465-2.503 1.175 0 1.925.7 2.113.95l1.35-1.4c-.45-.564-1.5-1.527-3.564-1.527C9.85 8.42 8 10.434 8 12.936c0 2.815 2.052 4.567 4.53 4.567 2.013 0 3.076-.663 4.002-1.376zM22.01 17.503c2.765 0 4.592-1.977 4.592-4.554 0-2.54-1.827-4.53-4.592-4.53-2.764 0-4.59 1.99-4.59 4.53 0 2.576 1.826 4.553 4.59 4.553zm0-7.08c1.402 0 2.365 1.087 2.365 2.526 0 1.475-.976 2.55-2.365 2.55-1.388 0-2.364-1.075-2.364-2.55 0-1.44.963-2.528 2.364-2.528zM32.47 17.34v-1.914h-2.627V8.583h-2.14v8.757zM38.275 15.376l.626 1.964h2.152l-3.027-8.757h-2.252l-3.027 8.757h2.15l.627-1.964zm-.55-1.752h-1.652l.826-2.777zM48.306 17.34v-1.89h-3.954l3.916-5.516v-1.35h-6.655v1.888h3.778l-3.877 5.504v1.364zM53.41 17.503c2.763 0 4.59-1.977 4.59-4.554 0-2.54-1.827-4.53-4.59-4.53-2.766 0-4.593 1.99-4.593 4.53 0 2.576 1.827 4.553 4.592 4.553zm0-7.08c1.4 0 2.363 1.087 2.363 2.526 0 1.475-.976 2.55-2.364 2.55-1.39 0-2.366-1.075-2.366-2.55 0-1.44.963-2.528 2.365-2.528z" />
+          <path d="M3 18.94V3h60v15.94" fill="none" stroke="#000" stroke-width="2" />
+        </svg>
+        <p>
+          Lorem FC scores two in four-four-two, goal saved by center-half
+          goalie. Pass the ball striker scores hat-trick and knocks referee
+          over in one-two UEFA game.
+        </p>
+        <div class="ads">Ads by Annoying Ads Inc.</div>
+        <div class="matches">
+          <div class="matches-title">MATCHES</div>
+          <div class="top-filler"></div>
+          <div class="cards">
+            <div class="card">
+              <div class="match">
+                AIK
+                <div class="crest aik"></div>
+                <span class="divider">-</span>BKH
+                <div class="crest bkh"></div>
+              </div>
+              <div class="result">1 - 1</div>
+            </div>
+            <div class="card">
+              <div class="match">
+                MFF
+                <div class="crest mff"></div>
+                <span class="divider">-</span>IFK
+                <div class="crest ifk"></div>
+              </div>
+              <div class="result">2 - 0</div>
+            </div>
+            <div class="card">
+              <div class="match">
+                KFF
+                <div class="crest kff"></div>
+                <span class="divider">-</span>IFE
+                <div class="crest ife"></div>
+              </div>
+              <div class="result">1 - 0</div>
+            </div>
+            <div class="card">
+              <div class="match">
+                NOR
+                <div class="crest nor"></div>
+                <span class="divider">-</span>DFF
+                <div class="crest dff"></div>
+              </div>
+              <div class="result">1 - 3</div>
+            </div>
+            <div class="card">
+              <div class="match">
+                HIF
+                <div class="crest hif"></div>
+                <span class="divider">-</span>DIF
+                <div class="crest dif"></div>
+              </div>
+              <div class="result">2 - 2</div>
+            </div>
+          </div>
+        </div>
+        <div class="title">TABLE</div>
+        <table class="standings">
+          <thead>
+            <th>#</th>
+            <th>Team</th>
+            <th>MP</th>
+            <th>W</th>
+            <th>D</th>
+            <th>L</th>
+            <th>P</th>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline mff"></div>
+                  <div class="team-name">Malmö FF</div>
+                </div>
+              </td>
+
+              <td>30</td>
+              <td>17</td>
+              <td>9</td>
+              <td>4</td>
+              <td>60</td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline ife"></div>
+                  <div class="team-name">Elfsborg</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>12</td>
+              <td>15</td>
+              <td>3</td>
+              <td>51</td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline bkh"></div>
+                  <div class="team-name">Häcken</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>12</td>
+              <td>13</td>
+              <td>5</td>
+              <td>49</td>
+            </tr>
+            <tr>
+              <td>4</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline dif"></div>
+                  <div class="team-name">Djurgården</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>14</td>
+              <td>6</td>
+              <td>10</td>
+              <td>48</td>
+            </tr>
+            <tr>
+              <td>5</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline maif"></div>
+                  <div class="team-name">Mjällby</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>13</td>
+              <td>8</td>
+              <td>9</td>
+              <td>47</td>
+            </tr>
+            <tr>
+              <td>6</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline nor"></div>
+                  <div class="team-name">Norrköping</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>13</td>
+              <td>7</td>
+              <td>10</td>
+              <td>46</td>
+            </tr>
+            <tr>
+              <td>7</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline ösk"></div>
+                  <div class="team-name">Örebro</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>12</td>
+              <td>6</td>
+              <td>12</td>
+              <td>42</td>
+            </tr>
+            <tr>
+              <td>8</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline hif"></div>
+                  <div class="team-name">Hammarby</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>10</td>
+              <td>11</td>
+              <td>9</td>
+              <td>41</td>
+            </tr>
+            <tr>
+              <td>9</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline iks"></div>
+                  <div class="team-name">Sirius</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>9</td>
+              <td>11</td>
+              <td>10</td>
+              <td>38</td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="title">NEWS</div>
+        <li><a href="#">Ipsum United winger sings new deal</a></li>
+        <li><a href="#">3 red and 4 yellow cards in one game</a></li>
+        <ul></ul>
+
+        <div class="title">STATS</div>
+        ...
+        <div class="bottom-filler"></div>
+      </div>
+      <div class="nav"></div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/stacking-cards/dist/script.js b/stacking-cards/dist/script.js
new file mode 100644
index 0000000..6d4ee72
--- /dev/null
+++ b/stacking-cards/dist/script.js
@@ -0,0 +1,11 @@
+const clamp = (x, min, max) => Math.max(min, Math.min(x, max));
+const list = document.querySelector(".list");
+const cards = Array.from(document.querySelectorAll(".card"));
+list.addEventListener("scroll", (e) => {
+  cards.forEach((card, i) => {
+    const scale = clamp((400 - list.scrollTop + i * 72) / 100, 0, 1);
+    const opacity = clamp((360 - list.scrollTop + i * 72) / 60, 0, 1);
+    card.style.transform = `scale(${scale})`;
+    card.style.opacity = `${opacity}`;
+  });
+});
\ No newline at end of file
diff --git a/stacking-cards/dist/style.css b/stacking-cards/dist/style.css
new file mode 100644
index 0000000..558d923
--- /dev/null
+++ b/stacking-cards/dist/style.css
@@ -0,0 +1,235 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
+body {
+  align-items: center;
+  background-color: #f7ecec;
+  display: flex;
+  font-family: "Inter", serif;
+  font-size: 14px;
+  justify-content: center;
+  overflow: hidden;
+  height: 100vh;
+  margin: 0;
+}
+.phone-frame {
+  background-color: #000;
+  border-radius: 30px;
+  box-shadow: 0 0.4px 1px rgba(0, 0, 0, 0.026), 0 1px 2.3px rgba(0, 0, 0, 0.045),
+    0 1.9px 4.4px rgba(0, 0, 0, 0.065), 0 3.4px 7.8px rgba(0, 0, 0, 0.094),
+    0 6.3px 14.6px rgba(0, 0, 0, 0.145), 0 15px 35px rgba(0, 0, 0, 0.25);
+  width: 240px;
+  height: 480px;
+  padding: 5px;
+}
+.phone-screen {
+  align-items: center;
+  background-color: #f8f8f8;
+  border-radius: 26px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+}
+.content {
+  height: 100%;
+  margin-top: 24px;
+  position: relative;
+  width: 100%;
+}
+.list {
+  bottom: 0;
+  box-sizing: border-box;
+  height: 100%;
+  margin-top: 24px;
+  padding: 0 24px;
+  position: absolute;
+  overflow: scroll;
+  width: 100%;
+}
+
+.golazo {
+  margin-bottom: 16px;
+  width: 100px;
+}
+
+.ads {
+  align-items: flex-end;
+  background-color: #fff0d5;
+  display: flex;
+  font-size: 11px;
+  justify-content: flex-end;
+  height: 120px;
+}
+
+.matches-title {
+  align-items: center;
+  display: flex;
+  font-weight: 600;
+  height: 40px;
+  margin-top: 8px;
+  position: sticky;
+  top: 0;
+}
+
+.cards {
+  padding: 20px 0 40px;
+}
+
+.card {
+  align-items: center;
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 0.4px 1px rgba(0, 0, 0, 0.026), 0 1px 2.3px rgba(0, 0, 0, 0.045),
+    0 1.9px 4.4px rgba(0, 0, 0, 0.065), 0 3.4px 7.8px rgba(0, 0, 0, 0.094),
+    0 6.3px 14.6px rgba(0, 0, 0, 0.145), 0 15px 35px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  margin-bottom: -10px;
+  height: 80px;
+  justify-content: center;
+  position: relative;
+  transform-origin: 50% 100%;
+  width: 100%;
+}
+
+.card img {
+  margin-left: 8px;
+  width: 16px;
+}
+
+.crest {
+  background-size: cover;
+  height: 20px;
+  margin-left: 8px;
+  width: 16px;
+}
+
+.crest-inline {
+  display: inline-block;
+  margin: 0;
+}
+
+.aik {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMTguOTYiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgMzE4Ljk1OTk5IDQwMCI+PHBhdGggZD0iTTMxOC42NiAxNjkuNzFjLS4wMjMtLjA4Mi0uMDUzLS4xNjUtLjA4OC0uMjQzbC0yLjA3NS00LjgzNi0xNC44MS0zNy42OTMtMS4wOC0uMjVjLTQuODgtMS4xMzgtOS44MzItMS42ODgtMTUuMTM4LTEuNjg4LTUuMzMgMC0xMC45MDUuNTQ1LTE3LjQ1NCAxLjcxNmwtMTAuNjYzLTExLjEyYzMuNTktNy4zNTYgOC42MDItMjAuNzggOS4yNC0yOS41MjRsLjA3NS0xLjA1Mi0zNi4yLTMxLjQ0N2MtMi4wNTUtMS44ODItNC42MDMtMi44OTItNy40LTIuODkyLTQuOTY0IDAtOS41IDMuMjc1LTEwLjc4NCA3Ljc4NS0uNjg4IDIuNDE1LTEuMjUyIDguNDI4IDcuMTM1IDE0LjQzLTQuMDY0IDMuNjAyLTkuMzMyIDYuNjk2LTE1LjYyIDkuMDg0LS44NTcuMzItMS42MTMuNDgzLTIuMjUuNDgzLS43NjIgMC0xLjYzNS0uMTktMi4zMzUtMS42MDgtMi45MzgtNS45NTUgMS4yMzMtMjIuMDIgMy4xMzctMjQuNTA0bC43NDctLjk3LTIuNTQ3LTYuMDUtLjU1My0uMDgyIDUuMTA0LTMxLjI4Ny4zNC0uNTg0IDMuNzQtNC44NjQuOTEtOS4zMzUtNy43MjYtLjc0LS40MjcgNC45NjItMy41NC0uMzg1LjQ2OC00LjkxNS0zLjQ4LS4zMS0zLjQ4LS4zNi0uNSA0LjkxMy0zLjU0OC0uMzEuNS00LjkyNC03LjY4LS43NDctLjkwOCA5LjI1NCAyLjA0IDUuMzgyLjIyNy45MzUtLjUzNiA1Ljk2LTExLjIwNy0uNzkyLjM5OC02LjEgMy41NTMtNS42N1YwaC03LjcyNHY0Ljk2NGwtMy41MzYtLjAyNFYwaC03LjA0NHY0Ljk0bC0zLjU0LjAyNFYwaC03LjcydjkuMzMzbDMuNTUyIDUuNjcuMzk3IDYuMS0xMS4yMS43OTItLjUzNS01Ljk0Ny4yNC0uOTc3IDIuMDI1LTUuMzUzLS45MDItOS4yNTQtNy42ODUuNzQ2LjUgNC45MjItMy41MzUuMzEtLjQ3LTQuOTEtMy41MTQuMzU3LTMuNDguMzEuNDYgNC45MTUtMy41MzguMzg0LS40My00Ljk2My03LjcyLjc0LjkwNSA5LjMzNSAzLjQ3NyA0LjUyLjYxNi45OCA1LjA5IDMxLjIzNi0uNTUzLjA4LTIuNTQ2IDYuMDUuNzQ2Ljk3M2MxLjkwNCAyLjQ4MyA2LjA3NSAxOC41NDcgMy4xMzggMjQuNTA1LS42OTcgMS40MTctMS41NyAxLjYwOC0yLjMzMiAxLjYwOC0uNjMzIDAtMS4zOS0uMTYzLTIuMjQtLjQ4Mi02LjI4LTIuMzg4LTExLjU0LTUuNDgzLTE1LjU5Ni05LjA4NCA4LjM4LTYuMDA3IDcuODEtMTIuMDIzIDcuMTIyLTE0LjQzNi0xLjI4Ni00LjUwOC01LjgxNS03Ljc4LTEwLjc3LTcuNzgtMi44NzggMC01LjQ5IDEuMDctNy41NzYgMy4wNTdMNTIuMjkgODUuMDJsLjA4IDEuMDUzYy42NDIgOC43NDggNS42NTQgMjIuMTY4IDkuMjQgMjkuNTIzbC0xMC42NiAxMS4xMkM0NC4zOTUgMTI1LjU0NiAzOC44MiAxMjUgMzMuNDkzIDEyNWMtNS4zMDMgMC0xMC4yNTUuNTUtMTUuMTM3IDEuNjg4bC0xLjA4LjI1TDIuNSAxNjQuNTVsLTIuMDU3IDQuNzdjLS4wMTUuMDM2LS4wMy4wNy0uMDQyLjEwNWwtLjAzMy4wOWMtLjAxNy4wNDYtLjAzMy4wOTYtLjA0Ny4xNDQtLjEuMzQtLjE3Ni42OC0uMjI4IDEuMDIzTC4wNDYgMTcxYy0uMjE2IDEuOTM3LjMzIDMuODgzIDEuNTk4IDUuNiAyLjIzNSAzLjAyNyA2LjQ5IDQuOTgzIDEwLjg0IDQuOTg0aC4wMDNjNi44MDYgMCAxMi4yMDYtNC4zNCAxNC44MTgtMTEuNzQ0IDEuMDc0IDEuMDMgMi4wOTcgMi4xODUgMy4wNTcgMy40NiA5LjQ0NCAxMi41NDQgMTEuMjM1IDMzLjQwOCA0Ljc5NSA1NS44MTctNC40MjQgMTMuOTg3LTEzLjM5MyAyOS45MjYtMjkuMDggNTEuNjc1bC0uOTY2IDEuMzQgMS4wNyAxLjI2YzI2Ljc3IDMxLjU1NyA1Mi42NTMgNDguOTQgNzIuODg2IDQ4Ljk0IDYuMzI4IDAgMTEuODcyLTEuNzMyIDE2LjMwNC01LjA1My45NTMgMjIuMjY3IDI0LjkgNDkuOTIyIDYzLjAzNCA3Mi4xMDNsMS4wNi42MTcgMS4wNi0uNjE3YzM4LjE1Mi0yMi4xOTIgNjIuMTEyLTQ5Ljg0OCA2My4wNy03Mi4xMDQgNC40MyAzLjMyIDkuOTc4IDUuMDUgMTYuMzA3IDUuMDUgMjAuMjMyIDAgNDYuMTE2LTE3LjM4IDcyLjg4Ny00OC45MzhsMS4wNjYtMS4yNi0uOTY1LTEuMzRjLTE1LjY4My0yMS43MzctMjQuNjUtMzcuNjc2LTI5LjA4LTUxLjY3NS02LjQ0LTIyLjQxLTQuNjUtNDMuMjczIDQuNzk3LTU1LjgxOC45NTgtMS4yNzUgMS45ODItMi40MzIgMy4wNTUtMy40NiAyLjYxMiA3LjQwNSA4LjAxMiAxMS43NDQgMTQuODIgMTEuNzQ0IDQuMzUgMCA4LjYwNy0xLjk1NiAxMC44NC00Ljk4MyAxLjU1LTIuMDk3IDIuMDI0LTQuNTQgMS4zNC02Ljg5IiBmaWxsPSIjMTQyZDQ0Ii8+PHBhdGggZD0iTTIwOC41NCA0LjM5NmwtNC45MzUtLjQ3Mi0uNDI4IDQuOTgtNi4zMjgtLjY5LjQ2NS00Ljg4Ni0yLjA5Mi0uMTg3LTIuMTAyLS4yMTUtLjUgNC44OS02LjMyMy0uNTU0LjUwMy00LjkzNi00LjktLjQ3NS0uNjgzIDYuOTQzIDI2LjYyMiAyLjc3OC43LTcuMTc0TTE5Mi44NTUgMzMuNjZjLS4zNDgtLjQyNS0uODQtLjY4OC0xLjM4Ny0uNzM3LS41NjgtLjA3LTEuMTE3LjA5My0xLjU2LjQ1My0uNDQ3LjM2LS43MjcuODctLjc5MyAxLjQzNWwtMS4zMzggMTIuODE4YzEuNDMuMTYzIDIuODM4LjMzMiA0LjIxLjUwNGwxLjMxOC0xMi45Yy4wNjctLjU3Ny0uMDk0LTEuMTMyLS40NS0xLjU3TTE1Ny4zNCAzMS42MTZsLS4wMyAxMy45NTNjLjcyNi0uMDIgMS40NC0uMDM3IDIuMTMtLjA0NmguMDU2Yy42NzIuMDEgMS4zNi4wMjUgMi4wNjUuMDQ1VjMxLjYxNWMwLTEuMTUtLjk1My0yLjA4OC0yLjEyNy0yLjA4OC0xLjE1MyAwLTIuMDkzLjkzNy0yLjA5MyAyLjA4OE0xNzIuODIgMS4zNTdoLTQuOTM1djQuOTc2bC02LjMyNC0uMDQ1di00LjkzaC00LjI1M3Y0LjkzbC02LjMzLjA0NVYxLjM1N2gtNC45MzJWOC40aDI2Ljc3NlYxLjM1Nk0xMzIuNDc1IDQ3LjQ3MmMxLjg5Ny0uMjEyIDMuODI2LS40MTUgNS43NjItLjYwM2wtMi43NDItMzAuNTUzLTIwLjE3NCAyLjMwNCA0Ljk1OCAzMC4zOTJjMS42NDctLjIzNiAzLjM5NC0uNDczIDUuMjEzLS43MDVsLTEuMzItMTIuOTM1Yy0uMTEtLjkzMi4xNTgtMS44NTUuNzU1LTIuNTg4LjU4OC0uNzI0IDEuNDItMS4xNjcgMi4zNDItMS4yNSAxLjg5LS4yMTggMy42NDQgMS4xNzUgMy44NyAzLjExNXptLTEyLjg5My0yMi45N2wtLjU0OC00LjgyMiA1LjI1LS41MzMuNTQ4IDQuODJ6bTcuNjgzLS44MmwtLjUwNy00Ljc4NSA1LjI1NS0uNTguNTAyIDQuODI2LTUuMjUuNTRNMTM3LjY0NSA4LjgxbC0uNjc4LTYuOTYtNC45MDcuNDc0LjUwNSA0LjkzNy02LjMyNC41NTYtLjQ2Ny00Ljg5Mi0yLjEyNS4yMTctMi4wOTYuMTg4LjQ2IDQuODg3LTYuMzIuNjg4LS40MzQtNC45OC00LjkzLjQ3My42OTIgNy4xNSAyNi42MjUtMi43MzUiIGZpbGw9IiM4ZjdiNGYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMjcuNDEgMzIuOTJjLS41NjIuMDUtMS4wNTQuMzE1LTEuNDAzLjc0NC0uMzU2LjQ0LS41MTcuOTkyLS40NSAxLjU1NmwxLjMxNyAxMi45MTJjMS4zNzQtLjE3MiAyLjc4My0uMzQgNC4yMTUtLjUwNEwxMjkuNzUgMzQuOGMtLjEzNi0xLjE2NS0xLjE4Ni0yLjAwOC0yLjM0LTEuODhNMTIuNDU0IDE3Ny4zM2MyLjUyNyAwIDguNTE1LS45OTUgMTEuMTY3LTkuOTE1LjA0NC0uMTQ3LjA3LS4yOTQuMDgtLjQ0My0yLjkzLTEuODg1LTYuMDY4LTIuOS05LjE3My0yLjktMi45NDYgMC01Ljc3Ljg3Ni04LjM5NyAyLjYwM2wtMS43NSA0LjA2Yy0uMDQ2LjEwNC0uMDg0LjIxLS4xMS4zMi0uMjMyIDEuMDE4LjAxNSAyLjAyNi43MzcgMy4wMDQgMS40NDMgMS45NTYgNC40MzUgMy4yNyA3LjQ0NyAzLjI3TTMxNC42MzIgMTcxLjA1NmMtLjAyNS0uMTEtLjA2NS0uMjE3LS4xMS0uMzJsLTEuNzUtNC4wNmMtMi42My0xLjcyOC01LjQ1Mi0yLjYwNC04LjQtMi42MDQtMy4xMDUgMC02LjI0MyAxLjAxNy05LjE3MiAyLjkuMDEyLjE1LjAzNy4yOTYuMDguNDQgMi42NSA4LjkyIDguNjQgOS45MTcgMTEuMTY4IDkuOTE3IDMuMDEyIDAgNi4wMDQtMS4zMTUgNy40NDctMy4yNy43Mi0uOTguOTY4LTEuOTg4LjczNy0zLjAwNE0xMDIuNTc2IDU5LjU4Yy0uNzY3LTIuNjktMy42NTQtNC43Mi02LjcxNS00LjcyLTEuNTQgMC0zLjY5LjUxLTUuNDkgMi44MS43ODQgNC4zNTggMi44NzYgOC40NjcgNi4xMTQgMTIuMTU4IDQuODE0LTMuMjc2IDcuMDI2LTYuOTcgNi4wOTItMTAuMjQ3TTIyMi40MTUgNjkuODI3YzMuMjQtMy42OSA1LjMzMi03LjggNi4xMTYtMTIuMTU4LTEuOC0yLjMtMy45NS0yLjgwNy01LjQ5Ny0yLjgwNy0zLjA2NSAwLTUuOTU3IDIuMDMtNi43MjUgNC43Mi0uOTMzIDMuMjc3IDEuMjg3IDYuOTcgNi4xMDcgMTAuMjQ0TTE1My42NCAyMS4wNzJoMy44NlYxNy42NGgtMy44NnYzLjQzMk0xNjEuMzY0IDIxLjA3MmgzLjg2VjE3LjY0aC0zLjg2djMuNDMyIiBmaWxsPSIjOGY3YjRmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTUxLjYxMyA0NS44MTZjMS40NzYtLjA4MyAyLjkxNS0uMTUgNC4zMDItLjJsLjAzLTE0YzAtMS45MiAxLjU2Ni0zLjQ4IDMuNDg4LTMuNDggMS45NDIgMCAzLjUyMyAxLjU2IDMuNTIzIDMuNDh2MTMuOTk2YzEuMzg0LjA1MiAyLjgyMy4xMiA0LjMuMmwxLjk4LTMwLjM3SDE0OS42M3ptOS4wMzYtMjguODloNS4yODd2NC44NjJoLTUuMjg4em0tNy43MjYgMGg1LjI5MnY0Ljg2MmgtNS4yOTJ2LTQuODZNMTE5LjgyOCAyMC4zMmwuMzg1IDMuNCAzLjgyNy0uMzktLjM4Ny0zLjQwMi0zLjgyNS4zOU0xMjcuNTQ1IDE5LjUzbC4zNTYgMy4zNyAzLjgzLS4zOTUtLjM1My0zLjM5Ny0zLjgzMi40MjNNMjAzLjU0NSAxOC42MjNsLTIwLjE3Ny0yLjMwNy0yLjc0IDMwLjU1M2MxLjkzNi4xODcgMy44NjUuMzkgNS43NjQuNmwxLjM0LTEyLjgxM2MuMTA4LS45MzcuNTY4LTEuNzc0IDEuMy0yLjM2NC43MzUtLjU5OCAxLjY1My0uODY1IDIuNTgtLjc1Ny45MDcuMDggMS43MzcuNTI0IDIuMzI0IDEuMjQ3LjU5Ni43MzMuODY1IDEuNjU2Ljc1NiAyLjU5OGwtMS4zMiAxMi45MjdjMS44Mi4yMzMgMy41NjguNDcgNS4yMTcuNzA2em0tMTEuOTQ0IDUuMDZsLTUuMjQ4LS41NC41MDMtNC44MjQgNS4yNS41Nzd6bTIuNDM2LjI4NGwuNTQtNC44MiA1LjI1Ni41MzQtLjU0OCA0LjgyLTUuMjQ4LS41MzMiIGZpbGw9IiM4ZjdiNGYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xOTQuODI3IDIzLjMzbDMuODI2LjM5LjM4Ny0zLjQwMy0zLjgzMi0uMzktLjM4IDMuNDAyTTE5MS4zMTcgMTkuNTNsLTMuODI2LS40MjItLjM1MyAzLjM5NyAzLjgyOC4zOTQuMzUyLTMuMzdNMTQyLjQ2NSAyNy4zOTJsLS4yNzMtMy4yODgtNC4xMTUuMzQ4LjI4IDMuMjU1IDQuMTA4LS4zMTVNMTQ4Ljc1NiAyNi44OTVsLS4yNC0zLjI1Mi00LjExMi4zMTIuMjQzIDMuMjUyIDQuMTEtLjMxMk0xNDUuMDg1IDMxLjAzM2wtMi42ODQuMjA3LjIwOCAyLjcxNiAyLjY4LS4yNDQtLjIwMy0yLjY4TTE0MS4yOTYgMzIuMDMybC0xLjI4OC4xLjA5NyAxLjI5IDEuMjg3LS4xMDItLjA5Ni0xLjI4OE0xNDcuNTkgMzEuNTNsLTEuMjkuMTAyLjEgMS4yODggMS4zMi0uMS0uMTMtMS4yOU0xMzkuMjg1IDQxLjEwN2w0LjExLS4zMTUtLjI3Ni0zLjI1My00LjA4LjMxMy4yNDUgMy4yNTRNMTQ1LjYxIDQwLjYwNWw0LjA4LS4zMTQtLjI0Ni0zLjI1NC00LjEwNy4zMTMuMjc0IDMuMjU1TTE0My41NCA0NS44NmwyLjcxMy0uMjA4LS4yNC0yLjcxNi0yLjY4Mi4yNDQuMjEgMi42OE0xNDEuMDM3IDQ1LjM1N2wxLjI4Ni0uMDk3LS4wOTgtMS4yODgtMS4yODguMS4xIDEuMjg1TTE0Ny4zNjMgNDQuODZsMS4yOS0uMS0uMTAyLTEuMjg4LTEuMzIuMS4xMzMgMS4yODhNMTgwLjc4OCAyNS40NDVsLTQuMTEzLS4zNS0uMjggMy4yOSA0LjExNC4zMTUuMjc4LTMuMjU1TTE3MC4xMDUgMjcuODg4bDQuMTE0LjMxLjI0LTMuMjUtNC4xMS0uMzE1LS4yNDUgMy4yNTVNMTczLjU3NiAzMy43MTNsMi42OC4yNDQuMjA1LTIuNzE4LTIuNjgtLjIwNS0uMjA0IDIuNjc4TTE3Ny41NyAzMi4wMzJsLS4xIDEuMjg4IDEuMjg2LjEuMS0xLjI4OC0xLjI4NS0uMU0xNzEuMjggMzEuNTNsLS4xIDEuMjkgMS4yODUuMS4xMDItMS4yODgtMS4yODctLjFNMTc1LjQ2OCA0MC43OTJsNC4xMTIuMzE1LjI0LTMuMjU1LTQuMDczLS4zMTMtLjI4IDMuMjUyTTE2OS4xNzcgNDAuMjlsNC4wNzQuMzE1LjI4LTMuMjU0LTQuMTEzLS4zMTQtLjI0IDMuMjU1TTE3Mi42MSA0NS42NTJsMi43MTcuMjA3LjIwNS0yLjY4LTIuNjgtLjI0NS0uMjQzIDIuNzE3TTE3Ny44MjggNDUuMzU3bC4xLTEuMjg0LTEuMjg1LS4xLS4xMDMgMS4yODcgMS4yODguMDk3TTE3MS41NCA0NC44NmwuMDkzLTEuMjg4LTEuMzIyLS4xLS4wOTQgMS4yODcgMS4zMjMuMU0xOTguMDk3IDU0Ljc4Yy4xNi0uNzY0LS4zMzQtMS41MS0xLjA5Ny0xLjY2OC0yMi4xLTQuNTU1LTUyLjk5Ni00LjU1NS03NS4xMzggMC0uNzY0LjE1Ny0xLjI1Ni45MDMtMS4wOTcgMS42NjguMTU2Ljc2NC45IDEuMjU1IDEuNjY3IDEuMDk3IDIxLjgwNC00LjQ4NCA1Mi4yMzMtNC40ODUgNzMuOTk3IDAgLjA5NS4wMjIuMTkuMDMuMjg2LjAzLjY1NiAwIDEuMjQ1LS40NiAxLjM4LTEuMTI3TTE5Mi41IDgyLjk4OGMxLjE0NyAwIDIuMTc1LS44MDMgMi40MTYtMS45Ny4yNzMtMS4zMzMtLjU4NS0yLjYzOC0xLjkyLTIuOTE0LTIyLjI1Mi00LjU5LTQ0LjgzNy00LjU5LTY3LjEyNiAwLTEuMzM1LjI3Ni0yLjE5MyAxLjU4LTEuOTIgMi45MTUuMjc2IDEuMzMzIDEuNTggMi4xOTMgMi45MTUgMS45MTcgMjEuNjI4LTQuNDU2IDQzLjU0My00LjQ1NiA2NS4xMzYgMCAuMTcuMDM0LjMzNy4wNS41LjA1TTEyMi4xNDYgNTguNzUzbC43MTcgMy40M2MxLjg1OC0uMzkgMy44MTMtLjc0NCA1LjgxLTEuMDU2bC0uNTQtMy40NjJjLTIuMDU4LjMyLTQuMDczLjY4Ny01Ljk4NyAxLjA4OE0xMzIuODA2IDU2Ljk3NmwuNDIgMy40OGMyLjE3NS0uMjY0IDQuNzEzLS41NjMgNy4yNy0uNzg1bC0uMzA0LTMuNDljLTIuNjEuMjMtNS4xOC41MzItNy4zODYuNzk2IiBmaWxsPSIjOGY3YjRmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTQ1LjMzIDU1Ljc4N2wuMjU0IDMuNDk0YzIuMTItLjE1MyA0LjQ5Mi0uMjY1IDcuNDY3LS4zNTNsLS4xMDItMy41MDJjLTMuMDI1LjA5LTUuNDQ1LjIwNC03LjYxNy4zNjJNMTU3Ljg0IDU1LjMybC4wNCAzLjUwM2MzLjgwMy0uMDQgNy42NzcuMDMzIDExLjUxNi4yMTJsLjE2My0zLjVjLTMuOTA0LS4xODItNy44NDctLjI1NC0xMS43Mi0uMjE1TTE3NC4zNTIgNTkuMzE1YzMuNDIuMjU0IDYuNzYuNTc4IDkuOTI4Ljk2bC40Mi0zLjQ3OGMtMy4yMi0uMzktNi42MTUtLjcxNy0xMC4wODgtLjk3NmwtLjI2IDMuNDk1TTE5Ni43MTYgNTguNzUzYy0yLjE3NS0uNDU2LTQuNjYtLjg5NC03LjYwMy0xLjM0NGwtLjUyNSAzLjQ2NWMyLjg3NS40MzcgNS4yOTcuODY0IDcuNDEgMS4zMDhsLjcxOC0zLjQzTTEyNi4yOTcgNjguNDkybC0uNTA1LTMuNDY4Yy0uNzYyLjExMy0xLjUxMy4yNjMtMi4yMzguNDFsLjY5MiAzLjQzM2MuNzEtLjE0MyAxLjM4NC0uMjggMi4wNS0uMzc1TTEyOC44MSA2OC4wMTdjMi4yOTQtLjM5NyA0LjcxMy0uNzU2IDcuMzk0LTEuMDk2bC0uNDQtMy40NzNjLTIuNzM1LjM0Ni01LjIwNS43MTQtNy41NSAxLjEybC41OTYgMy40NU0xMzkuODc3IDY2LjVjMi42NjgtLjI3MyA1LjA4Ny0uNDcyIDcuMzk0LS42MDVsLS4yLTMuNDk4Yy0yLjM2LjEzNi00LjgzLjM0LTcuNTUuNjE4bC4zNTcgMy40ODVNMTUxLjM1NSA2NS42ODNjMy41NC0uMTUgNi45Ni0uMjEgMTAuMTcyLS4xNzhsLjAzNC0zLjUwMmMtMy4yNjctLjAzNC02Ljc1Mi4wMjgtMTAuMzUzLjE4bC4xNDggMy41TTE2Ni4xIDY1LjYxNWMzLjQxMi4xMDIgNi44MzcuMzE0IDEwLjE4My42MzNsLjMzLTMuNDg4Yy0zLjQyLS4zMjQtNi45MjItLjU0LTEwLjQxLS42NDhsLS4xMDQgMy41MDNNMTgwLjQ2IDY2LjYzNmMzLjY1LjQzNiA2LjgyLjkgOS42OSAxLjQxM2wuNjItMy40NWMtMi45MzgtLjUyNS02LjE3NC0uOTk3LTkuODk1LTEuNDQzbC0uNDE1IDMuNDhNMTk0LjM4OCA2NS4yMTVjLS4yOTUtLjA4LS41OC0uMTU2LS44MTctLjIwN2wtLjcxMyAzLjQzYy4xNzYuMDM4LjM4Ny4wOTUuNjA0LjE1NS40MjMuMTE2Ljg2LjIzNSAxLjI2Ny4yOTJsLjQ4LTMuNDdjLS4xODMtLjAyNi0uNTM2LS4xMjItLjgyLS4yTTEyNC41OTYgNzEuODA0bC43NTMgMy40MjNjMS44MTYtLjQgMy43My0uNzQgNS41ODQtMS4wN2wuMzUzLS4wNjQtLjYxNS0zLjQ1LS4zNTMuMDY0Yy0xLjg4Ny4zMzYtMy44NC42ODQtNS43MjQgMS4wOTdNMTM1IDczLjUzM2MyLjM2My0uMzEzIDQuODA3LS42MzggNy4yNDctLjg1bC0uMzAzLTMuNDljLTIuNTIuMjItNS4wMDUuNTQ4LTcuNDA4Ljg2OGwuNDYzIDMuNDczTTE0NS45NiA3Mi4zNmMyLjUyLS4yMSA1LjA3My0uMzUyIDcuNTg3LS40MmwtLjA5NC0zLjUwM2MtMi41OC4wNy01LjIuMjE2LTcuNzg1LjQzNGwuMjkzIDMuNDlNMTU3Ljg0NCA2OC4zMjhsLjAzMiAzLjUwM2MzLjU5LS4wMyA3LjQyNC4wNjUgMTEuMzk1LjI4N2wuMTk1LTMuNDk4Yy00LjA0Ni0uMjI3LTcuOTUzLS4zMjUtMTEuNjItLjI5Mk0xNzMuOCA3Mi40YzMuNDkzLjI5NiA2LjcxMi42NTMgOS44NCAxLjA5N2wuNDkyLTMuNDdjLTMuMTk1LS40NTItNi40NzctLjgxOC0xMC4wNC0xLjExOGwtLjI5MyAzLjQ5TTE4Ny4zNDUgNzQuMDZjMi4wMjMuMzQ0IDQuMDYyLjcyNyA2LjIzNCAxLjE3bC43LTMuNDNjLTIuMjEtLjQ1Mi00LjI4Ny0uODQ0LTYuMzQ3LTEuMTkzbC0uNTg4IDMuNDUzTTE1OC44OCA5Ny43ODNoMS4xMDhWODMuNDg1aC0xLjEwOHYxNC4yOThNMTU2LjYyNSA5Ni43NTZsLjExLTEzLjE1Ny0xLjEwNy0uMDEtLjExIDEzLjE1NyAxLjEwNy4wMU0xNTMuMjMgODMuNzAzaC0xLjExVjk1LjMyaDEuMTFWODMuNzAzTTE0OS44NyA4My45MTdoLTEuMTFWOTQuMDNoMS4xMVY4My45MThNMTQ2LjQ3MyA4NC4zNDNoLTEuMTF2OC4wMWgxLjExdi04LjAxTTE0My4xMTIgODQuN2gtMS4xMDh2Ni41OGgxLjEwOFY4NC43TTEzOS43MTYgODUuMDI0aC0xLjEwOHY0LjQ3aDEuMTA4di00LjQ3TTEzNi4zNiA4NS42M2gtMS4xMXYyLjI5aDEuMTF2LTIuMjlNMTYyLjI3NSA5Ni43NTZsMS4xMS0uMDEtLjExLTEzLjE1Ny0xLjExLjAxLjExIDEzLjE1Nk0xNjYuNzQ1IDgzLjcwM2gtMS4xMVY5NS4zMmgxLjExVjgzLjcwM00xNzAuMSA4My45MTdoLTEuMTA3Vjk0LjAzaDEuMTA4VjgzLjkxOE0xNzMuNDk2IDg0LjM0M2gtMS4xMDh2OC4wMWgxLjEwOHYtOC4wMU0xNzYuODU3IDg0LjdoLTEuMTA4djYuNThoMS4xMDdWODQuN00xODAuMjUzIDg1LjAyNGgtMS4xMDh2NC40N2gxLjEwOHYtNC40N00xODMuNjE1IDg1LjYzaC0xLjEwOHYyLjI5aDEuMTA4di0yLjI5TTIwOS43NjMgMzE5LjU0Yy01LjAxNiAwLTkuMDk2IDQuMDY3LTkuMDk2IDkuMDY3IDAgNS4wMTQgNC4wOCA5LjA5NSA5LjA5NiA5LjA5NS40MTMgMCAuODE4LS4wMyAxLjIxNy0uMDg2LTcuNjMgMTkuNTUzLTMzLjI3NiA0MC4yMjgtNTEuNTQ3IDUxLjAxNS0xOC4yOS0xMC43OTgtNDMuOTY1LTMxLjUtNTEuNTY4LTUxLjA3LjQwMi4wNTYuODE2LjA4OCAxLjIzNi4wODggNS4wMDQgMCA5LjA0NS00LjAzOCA5LjA0NS05LjA0IDAtNC45Ny00LjA0LTkuMDEzLTkuMDQ0LTkuMDEzLTUuMDA1IDAtOS4wMDcgNC4wNDItOS4wMDcgOS4wMTIgMCAuNTgyLjA1NiAxLjE1LjE2IDEuNzAyIDMuMDMgMjYuMDg2IDM5LjA0IDUzLjIzIDU3Ljc4MiA2NC4wMDJsMS4zOTguODA0IDEuMzk4LS44MDRjMTguNTU1LTEwLjY2MyA1NC4wMy0zNy4zNzIgNTcuNjgyLTYzLjIxNy4yMjctLjc5Mi4zNS0xLjYyNi4zNS0yLjQ4OCAwLTUtNC4wODMtOS4wNjYtOS4xLTkuMDY2IiBmaWxsPSIjOGY3YjRmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMjc2LjQzMiAyMTUuMTZjLTIuMzUtMTYuMDUyLjA5LTMwLjg5MyA2Ljg3Mi00MS43ODggNS45NDgtOS41NTYgMTQuODQ4LTE0Ljk4IDIyLjEzMy0xMy40OTdsNS4wOCAxLjAzMi0xMi4wNjQtMzAuMzk0LTEuNjIyLS4yMjVjLTExLjYxNy0xLjU5Ny0xNy4yOS0xLjY2My0zMC4zNDcgMS4xNjNsLTE0LjE4LTE1LjEyNWMzLjUzNy03LjE1MyA4LjQtMTkuNjc0IDkuNjczLTI4LjAybC4yMzUtMS41MzQtMzAuMDA1LTI1Ljg1LTEuNDMgMy43MjVjLTIuNjE0IDYuODEtOS41MjggMTMuNjItMTguNSAxOC4yMi03LjA5NiAzLjM1NC0xMy45MSA1LjQyMi0yMS4xMjMgNy42MS05Ljc5IDIuOTczLTE5LjkgNi4wNC0zMS43MiAxMi41OTgtMTEuODE3LTYuNTU3LTIxLjkzLTkuNjI1LTMxLjcyLTEyLjU5Ny03LjIxNS0yLjE5LTE0LjAzLTQuMjU3LTIxLjEyNS03LjYxMi04Ljk1LTQuNjA3LTE1Ljg1LTExLjQxNS0xOC40NjItMTguMjJsLTEuNDMtMy43MjMtMzAuMDA0IDI1Ljg1LjIzNSAxLjUzNWMxLjI3IDguMzM1IDYuMTMzIDIwLjg2MiA5LjY3IDI4LjAybC0xNC4xOCAxNS4xMjRjLTEzLjA1NS0yLjgyNS0xOC43My0yLjc2LTMwLjM1LTEuMTYybC0xLjYyMy4yMjQtMTIuMDU2IDMwLjM5NSA1LjA4LTEuMDMyYzcuMjgzLTEuNDg0IDE2LjE4MiAzLjk0IDIyLjEzMiAxMy40OTcgNi43OCAxMC44OTUgOS4yMjIgMjUuNzM2IDYuODcyIDQxLjc4OC0zLjAwNCAyMC41MDctMTMuMzI1IDQyLjI5NS0zMC42OCA2NC43NmwtMS40MDUgMS44MTcgMS41MDcgMS43MzZjMjMuOTcgMjcuNjE4IDQ4LjAwNyA0My43NiA2NS45NTQgNDQuMjloLjE3YzcuOTgtLjI0MyAxMy4zMDItMi4xNjMgMTUuODM1LTUuNzA4IDEuMzctMS41OSAyLjIwMi0zLjY1OCAyLjIwMi01LjkxNSAwLTUuMDA0LTQuMDc2LTkuMDQ3LTkuMDgyLTkuMDQ3LTUuMDAzIDAtOS4wNCA0LjA0My05LjA0IDkuMDQ3IDAgMi4yNDUuODEzIDQuMyAyLjE2IDUuODg4LS42OS4wNTctMS40MTIuMS0yLjE2LjEyLTEzLjMzNS0uNDMzLTMxLjQxNi0xMS4zMTUtNTAuMDI3LTI5Ljc1TDI0MC4xMjUgODAuNTZsLTMuMjEtMi43Ni0yMTEuOTggMjExLjZjLTIuNDMtMi41MDUtNC44NjctNS4xMzYtNy4yOTgtNy44ODYgMTcuMTA0LTIyLjU5NCAyNy4zMjQtNDQuNjM0IDMwLjM4Ni02NS41NCAyLjU0Mi0xNy4zNjYtLjE4LTMzLjU0Ny03LjY2LTQ1LjU3LTYuMTE1LTkuODItMTQuODMtMTUuODMtMjMuMjItMTYuMzUybDcuMzA3LTE4LjQyYzEwLjM2LTEuMzUzIDE1LjUyMy0xLjIxNyAyOC4zMDYgMS42NGwxLjU2My4zNSAxOS4wOS0yMC4zNjMtLjk0Mi0xLjc3NmMtMy42MzItNi44MTItOC4yLTE4LjY2My05LjczLTI2LjUxMmwyMS44LTE4Ljc4NGMzLjc4NyA2Ljg1IDEwLjcxIDEzLjE2IDE5LjUyNiAxNy42OWwuMDgyLjA0YzcuNDg2IDMuNTQzIDE0LjUwNSA1LjY3NCAyMS45MzUgNy45MyA5Ljg3NyAyLjk5NiAyMC4wOSA2LjA5NSAzMS45NiAxMi44ODNsMS4zOTIuNzk1IDEuMzk1LS43OTRjMTEuODcyLTYuNzg3IDIyLjA4LTkuODg2IDMxLjk1Ni0xMi44ODUgNy40My0yLjI1MyAxNC40NDYtNC4zODQgMjEuOTMzLTcuOTI4bC4wNzctLjAzN2M4Ljg0Mi00LjUyNCAxNS43NzgtMTAuODM1IDE5LjU3LTE3LjY5MmwyMS44MDIgMTguNzg0Yy0xLjUzNCA3Ljg1Ni02LjEwNSAxOS43MDUtOS43MzYgMjYuNTFsLS45NDYgMS43NzUgMTkuMDkzIDIwLjM2NiAxLjU2NC0uMzVjNS42OC0xLjI3IDkuODYtMi4wMDIgMTMuNjUzLTIuMzA1TDk5LjI0IDMxNi4zMThsMi45ODggMi45NzggMTgzLjY0OC0xODQuNDZjMi42MS4wOTUgNS4zNC4zNzIgOC41Ny43OTZsNy4zMTMgMTguNDJjLTguMzkuNTIzLTE3LjEwNyA2LjUzMi0yMy4yMiAxNi4zNTMtNy40ODMgMTIuMDIyLTEwLjIwNCAyOC4yMDMtNy42NiA0NS41NjggMy4wNiAyMC45MDcgMTMuMjggNDIuOTQ3IDMwLjM4NCA2NS41NC0yMi4wODQgMjQuOTgtNDQuNTEzIDQwLjEyMi02MC4yOTIgNDAuNjM2LS43NS0uMDIzLTEuNDctLjA2NS0yLjE2LS4xMjIgMS4zNDUtMS41ODggMi4xNi0zLjY0MyAyLjE2LTUuODg4IDAtNS4wMDQtNC4wNDMtOS4wNDctOS4wNDgtOS4wNDctNS4wMDMgMC05LjA3NSA0LjA0My05LjA3NSA5LjA0NyAwIDIuMjY3LjgzNyA0LjM0IDIuMjEzIDUuOTMyIDIuNTM4IDMuNTM1IDcuODU0IDUuNDQ4IDE1LjgyNCA1LjY5bC4wODIuMDAyaC4wODNjMTcuOTQ3LS41MyA0MS45ODgtMTYuNjczIDY1Ljk1NS00NC4yOWwxLjUwNy0xLjczNy0xLjQwNi0xLjgxOGMtMTcuMzUzLTIyLjQ2NS0yNy42NzQtNDQuMjUzLTMwLjY3OC02NC43NiIgZmlsbD0iIzhmN2I0ZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTExOS45NjUgMTQ2LjMzYzAtOC4zLTYuNzY0LTE1LjA1LTE1LjA4LTE1LjA1LTguMjggMC0xNS4wMTggNi43NS0xNS4wMTggMTUuMDVzNi43MzcgMTUuMDUgMTUuMDE4IDE1LjA1YzguMzE2IDAgMTUuMDgtNi43NSAxNS4wOC0xNS4wNU05NS42MTMgMTIxLjA5NWwtNi41MS0xOS4yMzUtMS4wNDguMzU2IDYuNTEgMTkuMjMzIDEuMDQ4LS4zNTVNOTkuNzE1IDEwMC4wNDVsLTEuMS4xMjQgMi4yMTQgMTkuNDEzIDEuMS0uMTI2LTIuMjE1LTE5LjQxMk0xMDguOTA1IDEwMS4wNmwtMS42NDQgMTguNDggMS4xMDUuMSAxLjY0NC0xOC40OC0xLjEwNS0uMU04NC4xMzUgMTE3LjcxbDUuMTE2IDYuNzU3Ljg4Mi0uNjctNS4xMTItNi43NTctLjg4NS42N003Ny4zNDQgMTI1LjYzN2w2LjMzIDQuMDM2LjU5NS0uOTM0LTYuMzMtNC4wMzctLjU5Ni45MzRNMTIwLjc5IDEwNS43MjdsLTEuMDctLjI5OC00LjQ2NyAxNi4wMTcgMS4wNjguMjk4IDQuNDctMTYuMDE4TTEzMC42MjIgMTExLjMwM0wxMjAuMjkgMTIzLjc4bC44NTQuNzA1IDEwLjMzMi0xMi40NzctLjg1NC0uNzA1TTEyNC44NDMgMTI3Ljc3bC43NzUuNzkgMTMuNjYtMTMuMzctLjc3OC0uNzktMTMuNjU3IDEzLjM3TTE0Ny40NDMgMTIyLjY4M2wtLjU0Ny0uOTY0LTE4Ljk0NCAxMC43MjMuNTQ0Ljk2NCAxOC45NDctMTAuNzI0TTE3MC45NTYgMTI2LjEzNWwtNDAuMzIgMTIuNTQ4LjMzIDEuMDU3IDQwLjMyLTEyLjU0Ny0uMzMtMS4wNThNMTU0LjE3NiAxNDYuNjdoLTIyLjM0MnYxLjEwN2gyMi4zNDJ2LTEuMTA4TTE0My44MDggMTU2LjY3M2wtMTIuNjUtNC4yOS0uMzU2IDEuMDUyIDEyLjY1IDQuMjkuMzU2LTEuMDUyTTEzNy4xNDUgMTY0Ljk1bC04LjE4Ny02LjQzNS0uNjg0Ljg3MiA4LjE4NiA2LjQzNC42ODUtLjg3TTEzMi4wMzcgMTcxLjk1NWwtNy41MDctNy4xNDgtLjc2NS44MDIgNy41MDggNy4xNDcuNzY0LS44MDJNMTIzLjU0NSAxODMuNzA1bC02LjA0Mi0xMy4yNjQtMS4wMS40NjMgNi4wNDMgMTMuMjYgMS4wMS0uNDU4TTExMS42MjMgMTg4Ljc5MmwxLjEtLjEzNS0xLjkyNy0xNS43NjQtMS4xLjEzNSAxLjkyNyAxNS43NjRNMTAwLjc4IDE5MS4yOTVsMy4zMjMtMTcuODQtMS4wOS0uMjAzLTMuMzIgMTcuODQgMS4wODguMjAzTTk2LjggMTcyLjE4bC0xLjA3LS4yOTNMODIuNTggMjE5LjVsMS4wNy4yOTUgMTMuMTUtNDcuNjE0TTg5LjI0IDE2OC40MTJsLS45NjMtLjU1Mi0xOS4zMDIgMzMuNTY4Ljk2LjU1MyAxOS4zMDQtMzMuNTY4TTg0LjYyIDE2NC4wNWwtLjgwMi0uNzY1LTIyLjY2NCAyMy43Ny44MDQuNzY2IDIyLjY2My0yMy43N004MS41MiAxNTkuMThsLS41NC0uOTY1LTIzLjc3MiAxMy4yNi41NC45NjhMODEuNTIgMTU5LjE4TTU2Ljk1MyAxNTguOTFsMjEuNzY2LTYuMDgtLjMtMS4wNjUtMjEuNzY0IDYuMDc2LjI5NyAxLjA3TTYyLjkxIDE0My42NjdsMTUuMjYuMTc4LjAxNC0xLjEwOC0xNS4yNjItLjE3Ny0uMDEzIDEuMTA3TTcwLjYyIDEzMy40NDNsOS4wNDUgMy40My4zOTMtMS4wMzQtOS4wNDctMy40MzMtLjM5IDEuMDM2TTIzMy44MSAyODIuMTNjNS45My0xLjYyMyAxMS4wMDYtMy4xODMgMTEuMDA2LTE3Ljk0MyAwLTMuNDE0LS42NDQtNi4wNzgtMS45MTMtNy45MTYtMS40OTQtMi4xNjUtMy45MS0zLjI3LTcuMTg2LTMuMjktNi4wMzcgMC05LjEgMy43Ny05LjEgMTEuMjA3IDAgNy40MzUgMy4wMzUgMTEuMjA4IDkuMDIgMTEuMjA4bC4wOC0uMDAzYzEuMjE2IDAgMi40MS0uMTg0IDMuNDUtLjUzMmwuMDU3LS4wMi4wMTMuMDZjLjM2MiAxLjc4LTQuNDUgNi4zMjctNS40MjggNy4yM20xLjY4Ny05LjQxOGgtLjA2NmMtMy42MTcgMC01LjQ1LTIuODktNS40NS04LjU5NSAwLTIuNjI4LjM5LTQuNjg0IDEuMTY0LTYuMTEuODkzLTEuNjUgMi4zMTMtMi40ODQgNC4yMi0yLjQ4NGguMDY3YzIuMDA2LjAxNiAzLjQxOC44MjggNC4zMTUgMi40ODUuNzY3IDEuNDEzIDEuMTM4IDMuNDEyIDEuMTM4IDYuMTEgMCA1Ljc4Mi0xLjc2MiA4LjU5NC01LjM4NiA4LjU5NE0xNzcuODggMjY1LjQwM2MwLTEuMTc2LS45NjUtMi4xMS0yLjExMi0yLjExLTEuMTc2IDAtMi4xMS45MzQtMi4xMSAyLjExIDAgMS4xNDguOTM0IDIuMTEgMi4xMSAyLjExIDEuMTQ3IDAgMi4xMS0uOTYyIDIuMTEtMi4xMU0xOTIuNTUzIDI3Ni41NzNWMjUzLjg2bC02LjUyOCA3LjI2MyAzLjU2LS42MjR2MTYuMDczaDIuOTY4TTI2MC4xMTUgMjc2LjU3M1YyNTMuODZsLTYuNTI4IDcuMjY0IDMuNTI2LS42MjV2MTYuMDczaDMuMDAyTTIxNS45ODQgMjYwLjEyN2MtLjM3Ni0uMjctLjU2My0uNDc0LS41ODgtLjY0Ni0uMDItLjE0NC4wNjQtLjMyNS4yNjUtLjU4OCAxLjM4NC0xLjQ1NyAyLjE0NS0zLjM0NSAyLjE0NS01LjMyIDAtNC4yNTctMy40NjQtNy43Mi03LjcyLTcuNzItNC4yMzYgMC03LjY4IDMuNDYzLTcuNjggNy43MiAwIDEuOTU1Ljc0NiAzLjg0NCAyLjA4OCA1LjMuMjI4LjI5My4zMTYuNDguMjk1LjYyLS4wMjcuMTctLjIyLjM3NS0uNjA4LjY0LTIuNDcgMS44OS0zLjg4NSA0Ljc2NC0zLjg4NSA3Ljg4NCAwIDUuNDM3IDQuNDQgOS44NjQgOS45IDkuODY0IDUuMzYgMCA5LjcyLTQuNDI3IDkuNzItOS44NjQgMC0zLjEzLTEuNDMtNi4wMDMtMy45My03Ljg5bS01LjgyNS0xMS4yOWMyLjU3IDAgNC42NjMgMi4wOTMgNC42NjMgNC42NjcgMCAyLjU3LTIuMDkyIDQuNjYtNC42NjMgNC42Ni0yLjU3NSAwLTQuNjY4LTIuMDktNC42NjgtNC42NiAwLTIuNTc0IDIuMDkzLTQuNjY4IDQuNjY4LTQuNjY4bTAgMjUuOTE3Yy0zLjc0IDAtNi43OC0zLjAyLTYuNzgtNi43MzYgMC0zLjczNiAzLjA0LTYuNzczIDYuNzgtNi43NzMgMy43MzUgMCA2Ljc3MyAzLjAzNyA2Ljc3MyA2Ljc3MyAwIDMuNzE1LTMuMDM4IDYuNzM2LTYuNzczIDYuNzM2TTE0OS44NTMgMjQxLjUyN2MwIDEuODcyIDEuNTIyIDMuMzk0IDMuMzk0IDMuMzk0IDEuODc0IDAgMy40LTEuNTIgMy40LTMuMzkzIDAtMS44NTUtMS41MjYtMy4zNjQtMy40LTMuMzY0LTEuODcyIDAtMy4zOTQgMS41MS0zLjM5NCAzLjM2NE0xODEuMDU3IDIxMC4xMDRjMCAxLjg3MiAxLjUyNiAzLjM5NSAzLjQgMy4zOTUgMS44NyAwIDMuMzkyLTEuNTI0IDMuMzkyLTMuMzk2IDAtMS44NzMtMS41MjItMy40LTMuMzkzLTMuNC0xLjg3NCAwLTMuNCAxLjUyNy0zLjQgMy40TTI0MS42ODQgMTU1LjgzN2MwLTEuODctMS41Mi0zLjM5Mi0zLjM5My0zLjM5Mi0xLjg1IDAtMy4zNTggMS41MjItMy4zNTggMy4zOTIgMCAxLjkwNiAxLjQ3NSAzLjQgMy4zNiAzLjQgMS45IDAgMy4zOTItMS40OTQgMy4zOTItMy40TTE0NS4xOSAxOTIuMDhsLTQuOTk0IDUuMDdjLjcyLjQwMyAxLjM2OC45NTggMi4xOTIgMS42OWwuMDgzLjA3NyAyNS40NSAyNS44OC4wNjMuMDhjMS4wMSAxLjMwOCAxLjY3MiAyLjI5IDIuMTYgMy40M2w1Ljc4Ni01Ljc0M2MtLjk1NS0uNDYzLTEuODg2LTEuMDY1LTIuNTgyLTEuNzhsLTI2LjExNS0yNi4xMTVjLS41OTctLjYtMS40MS0xLjUxNC0yLjA0Mi0yLjU5TTE4Ny43MSAxNzAuOTA3Yy0xLjggMC0zLjQ3LS42NjgtNC44My0xLjkzMmwtLjA2LS4wNi01LjAwNS01LjE1Yy0uNjg4LS43MTctMS40NS0xLjYyLTIuMDM4LTIuNjE3bC00Ljk3OCA1LjA5N2MuNzI1LjM5NiAxLjM2OC45NDYgMi4xODcgMS42NzJsLjA4LjA3OCAyNS40NTMgMjUuODguMDYuMDhjMS4wMiAxLjMxOCAxLjY4NCAyLjMxIDIuMTcyIDMuNDZsNS43OS01Ljc0NGMtLjk0Ny0uNDY1LTEuODctMS4wNTctMi41NTMtMS43MzRsLTkuNDc4LTguODM1Yy0yLjMwNC0yLjUxMy0yLjkyOC01LjM2OC0xLjc1NS04LjAzNiAxLjY4My0zLjgyIDYuOTI0LTYuNDkgMTIuNzQ3LTYuNDkgNi44NzUgMCAxMi44NCAzLjQzIDE2LjY1NyA5LjQ5M2w3LjYwNy03LjQ0NGMtMi4zMi0uNzM2LTQuNzM0LTEuOS03LjI0NC0zLjExLTQuNTU0LTIuMTk2LTkuMjYtNC40NjQtMTMuODctNC40NjQtMS44NzMgMC0zLjU4LjM3LTUuMjIgMS4xMzdsLTIuNzkgMS4zMDIuNDE0LTMuMDVjLjk4NC03LjIzNy0uMDQtMTQtMy4zMi0yMS42NWwtNS40MzcgNS41OGM1LjYzIDUuMjMgNy42ODQgMTEuODcgNS41IDE4LjA1LTEuNzY3IDQuOTk3LTUuOTE2IDguNDg3LTEwLjA5IDguNDg3TTExMC4zMyAyNzguOTA1Yy43NzQgMi44NTYgMS4yOCA0Ljk4IDEuMTY2IDguNDM4bDYuMjMyLTYuMDE0Yy0yLjg4Mi0xLjkxOC01LjQxNi01LjE0NC01LjY5Mi05LjEyMmwtLjA1NC0uNzczIDE3LjE0OC0xNi44NDIgMS4wMy40MzJjMi43NzMgMS4xNjQgNS4xMjcgMi42NDIgNy4zMDQgNS43MjRsNi42My02LjUyYy0xLjA4LS4zMS0yLjIxNC0uNzU1LTMuNDktMS40MjNsLTM3LjMyNS0xOC40MDItLjk2Ni45NDctLjAwNS0uMDA0LTMuMSAzLjA1LS40MjQuNDE1LS42Ny42NjJ2LS4wMDNsLTMuNyAzLjYyOGMuOTkyLjY3NiAyLjA1NCAxLjcxIDIuODkgMy42MDhsLjAyLjA0OCAxMi45NzYgMzIuMDUyek05OS42OSAyNDMuMzEybDIuNjk0LTIuNjUyIDIzLjUxOCAxMi4wNjQtMTYuMDI2IDE1LjM4NS0xMC4xODYtMjQuNzk4TTI3Mi43MTcgMjY1LjQwM2MwLTEuMTc2LS45NjQtMi4xMS0yLjExLTIuMTEtMS4xNzYgMC0yLjExLjkzNC0yLjExIDIuMTEgMCAxLjE0OC45MzQgMi4xMSAyLjExIDIuMTEgMS4xNDYgMCAyLjExLS45NjIgMi4xMS0yLjExIiBmaWxsPSIjOGY3YjRmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNOTguOTg3IDMxMC43NzZMMjY3Ljk3IDE0MS4wNDhsLS45NC4yMDctMS41NjMuMzUtMi4yNzYuNTA4LTEuNTk1LTEuNy0xOS4wOTQtMjAuMzY2LTItMi4xMzUgMS4zNzctMi41ODMuOTQ2LTEuNzczYzMuMDA2LTUuNjM2IDYuOTg4LTE1LjU2NCA4LjgyNS0yMy4wODZsLTguNDE1LTcuMjUtLjI5OC4zLTIwOS4yMSAyMDguODM1YzguMDMgNy42MyAxNS44NCAxMy43MyAyMy4yNiAxOC4xNTUgNi4xNzQgMy42ODMgMTEuOTQgNi4wOCAxNi45MzUgNy4wNi0uMDUtLjQ3NC0uMDc3LS45NTMtLjA3Ny0xLjQzMyAwLTMuNTEyIDEuMzY0LTYuODEgMy44NC05LjI4OCAyLjQ3NS0yLjQ4IDUuNzc1LTMuODQ1IDkuMjg2LTMuODQ1IDUuMzQ1IDAgOS45NTggMy4xOTUgMTIuMDE3IDcuNzdtNTQuMjU3LTYyLjQ5NWMtMy43MjQgMC02Ljc1My0zLjAzLTYuNzUzLTYuNzU1IDAtMy43MDggMy4wMy02LjcyNCA2Ljc1NC02LjcyNCAzLjcyOCAwIDYuNzYgMy4wMTcgNi43NiA2LjcyNSAwIDMuNzI2LTMuMDMyIDYuNzU1LTYuNzYgNi43NTVtMzEuMjEtMzEuNDJjLTMuNzI3IDAtNi43Ni0zLjAzMi02Ljc2LTYuNzU2IDAtMy43MjcgMy4wMzMtNi43NiA2Ljc2LTYuNzYgMy43MjMgMCA2Ljc1NCAzLjAzMyA2Ljc1NCA2Ljc2IDAgMy43MjQtMy4wMyA2Ljc1NS02Ljc1NSA2Ljc1NW01My44MzUtNjcuNzc3YzMuNzI0IDAgNi43NTUgMy4wMyA2Ljc1NSA2Ljc1NCAwIDMuNzI2LTMuMDMgNi43Ni02Ljc1NSA2Ljc2LTMuNzA1IDAtNi43Mi0zLjAzNC02LjcyLTYuNzYgMC0zLjcyNCAzLjAxNS02Ljc1NCA2LjcyLTYuNzU0bS02MC4zMjUgNS4wMTdsLjE2IDMuODg3Yy4wMzQuODA4Ljg0IDIuMTI4IDIuMTA2IDMuNDQ0bDQuOTY1IDUuMTFjLjczLjY2OCAxLjU3NCAxLjAwNSAyLjUxIDEuMDA1IDIuNjkgMCA1LjY2Ni0yLjY4NCA2LjkyMy02LjI0NS44OTMtMi41MjcgMi4xMTUtOS4xLTUuODMzLTE1LjUybC0xLjQzNS0xLjE2IDExLjM3NS0xMS42NyAxLjAzNCAyLjE4NWMzLjkwMyA4LjIzIDUuNDU0IDE1LjQ1NiA0LjkgMjMuMDUyIDEuMjgtLjMzIDIuNjEzLS41IDMuOTgtLjUgNS4zNzggMCAxMC42NjUgMi41NSAxNS4zMyA0Ljc5NyAzLjQyIDEuNjUgNi42NSAzLjIwNSA5LjM1IDMuNTE1bDMuNTA3LjQtMTUuNTIgMTUuMTktMS4wMzgtMi4wMzdjLTQuNDI0LTguNjgyLTExLjgxLTkuNjItMTQuNzgtOS42Mi00LjQ2IDAtOC41MjcgMS44ODYtOS42NjggNC40ODQtLjYxNiAxLjM5OC0uMjQgMi44NjcgMS4xMTMgNC4zNjhsOS4zOTUgOC43NWMuODE3LjgyIDIuNTIgMS41ODggMy41OTYgMS43OTNsMy4xMzIuNTk3LTE0LjE3NyAxNC4wNjgtLjYwNy0zLjA3MmMtLjQyOC0yLjE1LS44ODItMi45ODMtMi4zMDMtNC44MzVsLTI1LjI3LTI1LjY5M2MtMS40Ny0xLjMwNy0xLjczLTEuNDgtMy4yNS0xLjU4M2wtMy42Mi0uMjUzem0tMzAuNDgzIDMwLjg2bC4wOCAzLjk4M2MuMDIuNzkuODQgMi4xMzcgMi4wNSAzLjM1M2wyNi4xMjcgMjYuMTI3Yy44MjIuODQ0IDIuNTAyIDEuNTgyIDMuNTk2IDEuNzkybDMuMTI4LjU5OC0xNC4xNTMgMTQuMDQ3LS42MjItMy4wNDdjLS40MzQtMi4xMzQtLjg4OC0yLjk2Mi0yLjMwNC00LjgwNmwtMjUuMjctMjUuNjk0Yy0xLjQzNy0xLjI3OC0xLjcxMy0xLjUxMi0zLjI0Ni0xLjYxN2wtMy42NDUtLjI1MnptLTQ0Ljg1NSA0NS4zNzZsMzkuNDk2IDE5LjQ3NWMyLjE3IDEuMTMzIDMuNzU3IDEuNDkgNS42MjggMS42OThsMy41MDUuMzk2LTE0LjQ3IDE0LjIyLTEuMDgyLTEuODg3Yy0xLjc5LTMuMTI0LTMuNTU1LTQuNTY2LTUuODMyLTUuNjZsLTE0LjM5IDE0LjEzMmMuNTY2IDMuMTcgMy4yNzUgNS42NiA1LjcxNCA2LjY5N2wyLjMzOC45OS0xNi40MDcgMTUuODMuNjMtNC43N2MuNzc4LTUuODY1LjM0NC03LjkyNi0uNjQzLTExLjU3NmwtMTIuODkyLTMxLjg0Yy0uNzYtMS43MTYtMS42Mi0yLjE3My0yLjcxLTIuNzUyLS4yMzYtLjEyNS0uNDctLjI1LS43LS4zODRsLTEuOS0xLjEwOCAxMy43MTctMTMuNDYiIGZpbGw9IiNmMmRiMWQiLz48cGF0aCBkPSJNMTIwLjE5MyAyNTMuNTU3bC0xNi4wNTMtOC4yMzQgNi45NjYgMTYuOTZ6IiBmaWxsPSIjZjJkYjFkIi8+PC9zdmc+");
+}
+
+.bkh {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NTIuMDkzIiBoZWlnaHQ9IjcwOC44MjciIHZpZXdCb3g9IjAgMCA1NTIuMDkzMzIgNzA4LjgyNjY2Ij48cGF0aCBkPSJNNTQ3LjU2IDE0MC4yMTNjLS4zMi4zODctMzMuMDI3IDQwLjk0Ny0zMy4xNzMgOTguMzYtLjE0NyA1Ny4wNjcgMTEuNjQgMTE1LjAyNyAyMC4yNCAxNTcuMzYgMy42NjYgMTguMDE0IDYuODU0IDMzLjYxNCA4LjUzMyA0NC43ODcgNS42NCAzNy41NzMgNS4xNzMgNjkuNTczLTE0LjQyNyA5NS40NTMtMTguNzIgMjQuNzA3LTU1LjA1MyA0Ny42LTExMi43NzMgNzguNDQtNjguNTczIDM2LjYyNy0xMzguMzQ3IDkyLjMyLTEzOS45MDcgOTQuMjE0bC0uMDEzLS4wMTRjLTEuNzczLTIuMDUzLTcxLjQxMy01Ny42MTMtMTM5Ljg4LTk0LjItNTcuNzA3LTMwLjgyNi05NC4wNC01My43MzMtMTEyLjc2LTc4LjQ0LTE5LjYxNC0yNS44NjYtMjAuMDgtNTcuODgtMTQuNDI3LTk1LjQ0IDEuNjY3LTExLjE4NiA0Ljg1NC0yNi43ODYgOC41Mi00NC44IDguNi00Mi4zMiAyMC4zODctMTAwLjI5MyAyMC4yNC0xNTcuMzQ2LS4xNDYtNTcuNDE0LTMyLjg2Ni05Ny45NzQtMzMuMTg3LTk4LjM3NEwwIDEzNC43MzMgMTA2LjE0NyAwbDYuMzIgMy4xNzNjLjQ5My4yNCA0OC42MjYgMjMuOTc0IDg1LjI1MyAzMC4xODcgMzguMzA3IDYuNTA3IDc1LjAxMyA2Ljg2NyA3Ny42OCA2Ljg4di0uMDEzczM5LjEwNy0uMiA3OC4zNzMtNi44NjdjMzYuNjI3LTYuMjEzIDg1LjI0LTI5Ljk2IDg1LjcyLTMwLjJMNDQ1LjkwNyAwbDEwNi4xODYgMTM0LjcyLTQuNTMzIDUuNDkzIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTQwNy4yNjcgNTk2LjQxM2MtNTYuOTA3IDMwLjQtMTEyLjI4IDcwLjM4Ny0xMzEuMiA4NC40NC0xOC45NDctMTQuMDUzLTc0LjMwNy01NC4wNC0xMzEuMjE0LTg0LjQ0LTMxLjU4Ni0xNi44OC01NS40MTMtMzAuMzg2LTczLjE3My00Mi43MzNsNDM5LjQxMy0zODMuOTczYy03LjY0IDE3LjkyLTE0LjI4IDQxLjI4LTE0LjM0NiA2OC44MjYtLjE0NyA1OC44NTQgMTEuODQgMTE3Ljg0IDIwLjYgMTYwLjkwNyAzLjU3MyAxNy42MjcgNi42OCAzMi44NTMgNy45MiA0My4zNiA4Ljk0NiA3NS42MjctNC4yOTQgOTIuODUzLTExOCAxNTMuNjEzIiBmaWxsPSIjZjRmMDFlIi8+PHBhdGggZD0iTTQxMC4wNjcgNTk1LjI0Yy0xLjMzNC4zODctMS43MDcuNzczLTIuNDQgMS4xNzMtMjQuMjk0IDEyLjk3NC00OC4yMjcgMjcuNzA3LTY5LjU2IDQxLjQxNHYtMzE2LjcybDcwLjY2Ni02Mi40OTQgMS4zMzQgMzM2LjYyN00yNzUuNCAzNzUuMTg3djMwNS42NjZjLTEyLTguOTYtMzguNjY3LTI4LjQ1My03MC42NjctNDkuMjhWNDM3LjY4bDcwLjY2Ny02Mi40OTNNMTQyLjA2NyA0OTEuOHYxMDMuMzczQzExMi43MzMgNTc4Ljg2NyA4OC41NiA1NjUuNzIgNzEuMjQgNTUzLjY4bDcwLjgyNy02MS44OE00NzAuOTA3IDU2MC4wNGwtLjEzNC0zNTUuMTA3IDQwLjMyLTM1LjIyNmMtNy42NCAxNy45Mi0xNC4yOCA0MS4yOC0xNC4zNDYgNjguODI2LS4xNDcgNTguODU0IDExLjg0IDExNy44NCAyMC42IDE2MC45MDcgMy41NzMgMTcuNjI3IDYuNjggMzIuODUzIDcuOTIgNDMuMzYgNi44OCA1OC4xNzMuNjQgODEuNzg3LTU0LjM2IDExNy4yNE00NC4xMzMgMzUxLjY0YzYuMTM0LTM0LjYgMTEuMzg3LTczLjg2NyAxMS4yOTQtMTEzLjEwN0M1NS4yOTMgMTg3LjE2IDMyLjI4IDE1MC4zMiAyMi40OCAxMzYuMjhsODkuNTYtMTExLjkzM2MxNC45MDcgNi45MiA1Mi4wMTMgMjEuMDkzIDgzLjMyIDI2LjQxMyA0MC43MiA2LjkwNyA4MC4wNCA3LjEyIDgxLjM3MyA3LjEzM3YtLjAyNmMyLjY2Ny0uMDE0IDQwLjU0Ny0uMzIgODAuNi03LjEyIDE0LjE0Ny0yLjQgMjkuMjY3LTYuNjE0IDQzLjEzNC0xMS4xNDdMNDQuMTMzIDM1MS42NCIgZmlsbD0iIzE0MTMxNiIvPjxwYXRoIGQ9Ik0xNjMuOTggNDE2Ljc0N2wtNTEuMTYtNTguNDRjLS4zNi0uNC0uODkzLS42MjctMS40OTMtLjYyNy0uNDggMC0uOTQ3LjE2LTEuMjguNDUzbC0xMC41MDcgOS4xNzRjLS44MTMuNzA2LS44OTMgMS45Ni0uMTg3IDIuNzczbDE5LjY1NCAyMi40NTUtMjUuNjU0IDIyLjQzOEw3My43IDM5Mi41MzVjLS4zNi0uNDI3LS45MDctLjY4Mi0xLjQ4LS42ODItLjQ4IDAtLjkyLjE3NC0xLjI4LjQ5NGwtMTAuNTA3IDkuMTg4Yy0uNzczLjY4LS44NjYgMi0uMTg2IDIuNzcybDUxLjE0NiA1OC40NTRjLjY1My43MzUgMi4wNC44MjcgMi43NzQuMTg3bDEwLjUwNi05LjJjLjgxMy0uNzA2Ljg5NC0xLjk2LjE4Ny0yLjc3NGwtMjAuNDkzLTIzLjQxMyAyNS42NTMtMjIuNDUyIDIwLjQ5MyAyMy40MTJjLjY4Ljc4NyAxLjk3NC44OTMgMi43Ni4xODhsMTAuNTItOS4xODhjLjc3NC0uNjguODU0LTIgLjE4Ny0yLjc3M00xNzkuNzEzIDM2OC44NjhsLTYuMjkzLTIwLjkwOC4zNDctLjMwNyAyMCA4LjkzNHptNTQuMDI3LTExLjY1M2MtLjA5My0uNjE0LS41Mi0xLjEzNS0xLjE3My0xLjQyOGwtNzkuNjQtMzUuMjI3Yy0uMjI3LS4wOTMtLjQ5NC0uMTQ3LS43NzQtLjE0Ny0uNDkzIDAtLjk3My4xNi0xLjI5My40NGwtLjg4Ljc3NGMtLjUwNy40NTMtLjc0NyAxLjMyLS41NzMgMi4wMTNsMjQuMzczIDgzLjU4N2MuMjUzLjg2OC45MiAxLjQxMyAxLjcyIDEuNDEzLjQ2NyAwIC45NDctLjIgMS4zNi0uNTZsOS43MDctOC41MDdjMS44OC0xLjYzOCAxLjU4Ni0zLjYgMS4yNTMtNC42MTNsLTMuMDY3LTEwLjAxMyAyNC4yOC0yMS4yNCA5LjQ0IDQuMjUzYzEgLjQ0IDEuNzM0LjY0IDIuMzYuNjQuOCAwIDEuNTA3LS4zMzIgMi4zNzQtMS4wOTNsOS44LTguNTZjLjU2LS40OC44MjYtMS4xMi43MzMtMS43MzJNMjgzLjU5MyAyOTcuNTA3bC0xMy4yOTMtMS4yOTJjLS4wOC0uMDE1LS4xNDcgMC0uMiAwLS44NTMgMC0xLjc2LjgyNS0xLjg5MyAxLjcxOC0uNzYgNS40LTMuODI3IDEwLjkzNC04LjIgMTQuNzYtNC4zMDcgMy43NzQtOS41NiA1LjgwMi0xNS4xNzQgNS44MDItNi45MDYgMC0xMy41NzMtMy4wMTUtMTguMjkzLTguNDAyLTkuMDEzLTEwLjMwNi04LjQtMjQuOTQ2IDEuNDEzLTMzLjUzMy4wNTQtLjA1My4xMi0uMDkzLjE3NC0uMTMzLjI2Ni0uMjI3LjUzMy0uNDU0LjgtLjY2NyAwLS4wMTMuMDEzLS4wMTMuMDEzLS4wMTMuMjI3LS4xNzQuNDY3LS4zNDcuNjkzLS41MiA0LjEwNy0zLjA1NCA5LjItNC43ODYgMTQuMzYtNC43MzIuNjU0LjAzOCAxLjI0LS4yMDIgMS42NC0uNjQyLjE3NC0uMjkzLjI4LS42MzguMzA3LS45NzJsLjYyNy0xMy41MDdjLjA0LS41ODYtLjE0Ny0xLjEyLS41MDctMS41MDYtLjM2LS4zODctLjg5My0uNjE0LTEuNDgtLjYxNC0uMzczLS4wMTMtLjc0Ny0uMDEzLTEuMTA3LS4wMTMtMTAuNjEzIDAtMTkuMDI2IDMuMjI3LTI3LjI2NiAxMC40NC0xNy40NjcgMTUuMjgtMTkuMjQgNDEuOTItMy45NiA1OS4zODcgNy45NiA5LjA5NCAxOS40MTMgMTQuMzA2IDMxLjQxMyAxNC4zMDYgMTAuMTg3IDAgMjAuMDY3LTMuNzMzIDI3LjgyNy0xMC41MzMgOC4yLTcuMTczIDEzLTE2LjU2IDEzLjg1My0yNy4xNi4wNjctMS4wNC0uNzczLTIuMTA3LTEuNzQ3LTIuMTczIiBmaWxsPSIjOWQ4YzRjIi8+PHBhdGggZD0iTTI0My45OCAyNzAuODkzaC4xNmMuMDQgMCAuMDY3IDAgLjA5My0uMDEyLS4wOCAwLS4xNi4wMTMtLjI1My4wMTNNMzU1LjAzMyAyNTAuMjEzYy0uMjI2LS45MDYtMS4wMDItMS41ODYtMS44OTYtMS43ODZsLTQ4LjQwNC05LjY1NHYtLjIxM2wtMS45NTctNDMuOTQ3Yy0uMTItMS40MTMtMS4zODQtMi4yNjYtMi41MDQtMi4yNjYtLjU3MiAwLTEuMDYuMi0xLjUuNTg2bC0xMS4xMDMgOS43MzRjLS40NTQuMzg2LS44NDYgMS40MjYtLjgwNSAyLjEzM2wxLjgzIDQyLjM3My0yMC43OTYtMjMuNzg2Yy0uNDgtLjU0Ny0xLjE4OC0uODY3LTEuOTM1LS44NjctLjYyNiAwLTEuMjEyLjIyNy0xLjY2NS42MjdsLTEwLjMzMyA5LjA0Yy0xLjA4LjkzMy0xLjE3NCAyLjUyLS4yNCAzLjU4Nmw1MC4zNiA1Ny41NzRjLjQ5My41NiAxLjIuODggMS45Mi44OC42MTMgMCAxLjItLjIxNCAxLjY4LS42NGwxMC4zMzMtOS4wNGMuNDkzLS40NC44LTEuMDY3Ljg1My0xLjc2LjA0LS42OC0uMTczLTEuMzM0LS42MTMtMS44NGwtMjMuNTYtMjYuOTIgNDUuNDUzIDEwLjA1M2MuMDI3IDAgLjA2Ny4wMTMuMTM0LjAxMy40NCAwIDEuMjkzLS4zMTggMS43NzMtLjczM2wxMi4yLTEwLjY2N2MuNzA3LS42MTMgMS4wMTMtMS41NDYuNzczLTIuNDhNNDA1Ljg3MyAyMDUuMDRsLTguNDEzLTkuNjI3Yy0uNjkzLS43NzMtMS45NzMtLjg4LTIuNzczLS4xNzNsLTI0LjY1NCAyMS41NzMtMTAuNzg2LTEyLjMyIDIwLjMzMy0xNy43ODZjLjgxMy0uNzIuODkzLTEuOTYuMTczLTIuNzc0bC04LjQxMy05LjYyNmMtLjM2LS40LS45MDctLjY0LTEuNDkzLS42NC0uNDk0IDAtLjk0Ny4xNi0xLjI4LjQ1M2wtMjAuMzM0IDE3LjgtOS45MzMtMTEuMzQ3IDI0LjY2Ny0yMS41ODZjLjM4Ni0uMzQ3LjYyNi0uODE0LjY2Ni0xLjMzNC4wMjctLjUyLS4xNDYtMS4wNC0uNDkzLTEuNDRsLTguNDEzLTkuNjEzYy0uMzc0LS40MjctLjkyLS42OC0xLjQ5NC0uNjgtLjQ2NiAwLS45MTguMTczLTEuMjguNDkzbC0zNi41NiAzMS45ODdjLS44MTMuNzItLjg5MyAxLjk2LS4xNzMgMi43NzNsNTEuMTQ3IDU4LjQ0Yy42OC43ODcgMS45NzMuODk0IDIuNzczLjE4N2wzNi41NDctMzEuOTg3Yy40MTMtLjM2LjY1My0uODQuNjgtMS4zNzMuMDI2LS41MDctLjE2LTEuMDEzLS40OTQtMS40TTQ3NS45MTMgMTQ1LjUwN2wtNTItNTkuNDRjLS42NC0uNzM0LTIuMDQtLjgyOC0yLjc3My0uMTg3bC0xMC41ODcgOS4yNjdjLS44MTMuNzA2LS45MDUgMS45MDYtLjE4NiAyLjcybDI3LjYxNCAzMS41ODYtLjM4Ny4yOTRoLS4xMDZsLTY0Ljc4Ny0zLjA0LTIuMTMzIDEuOTRjLS43ODcuNjkzLS45MDcgMS44OTYtLjI1MiAyLjY1Nmw1Mi4wOTIgNTkuMzIyYy4zNi40MTQuODkzLjYzNCAxLjQ5My42MzQuNDggMCAuOTMzLS4xNjQgMS4yOC0uNDU3bDEwLjUwNy05LjE4OGMuODEzLS43Mi44OTMtMS45NjIuMTczLTIuNzc1bC0yOS0zMy4xMzMuMzg3LS4zMzQuMTA2LjAxNCA2NS41NDcgNC41MzNjLjI5MyAwIDEuMTMzLS4zMiAxLjM0Ny0uNTA3bDEuNDEzLTEuMjI2Yy4zODctLjM0Ny42NC0uODU0LjY4LTEuMzg3LjAyNy0uNDkzLS4xMi0uOTQ3LS40MjctMS4yOTNNMTMyLjU3NSAzMjAuOTI4Yy0yLjE1NiAwLTQuMjQ0Ljc4OC01Ljg4IDIuMjItMy42OSAzLjIzLTQuMDUgOC42NTItLjgyMiAxMi4zNCAxLjcgMS45NDQgNC4xNDUgMy4wNiA2LjcwNiAzLjA2IDIuMSAwIDQuMTMtLjc2NSA1LjcxMy0yLjE1IDEuNzcyLTEuNTUgMi44MzYtMy43MSAyLjk5NC02LjA4LjE1Ny0yLjM3My0uNjEtNC42NTUtMi4xNjItNi40MjctMS42NS0xLjg4My00LjAzNi0yLjk2Mi02LjU1LTIuOTYyTTE2OC4yMTUgMjk4LjQzMmMtMS42NDgtMS44ODMtNC4wMzUtMi45NjQtNi41NS0yLjk2NC0yLjE1NiAwLTQuMjQ0Ljc4OC01Ljg4IDIuMjItMy42OSAzLjIzLTQuMDUgOC42NS0uODIgMTIuMzQzIDEuNyAxLjk0MiA0LjE0NCAzLjA1NyA2LjcwNiAzLjA1NyAyLjEwMyAwIDQuMTMzLS43NjIgNS43MTQtMi4xNDYgMS43NzItMS41NTIgMi44MzYtMy43MTIgMi45OTMtNi4wODMuMTYtMi4zNy0uNjEtNC42NTMtMi4xNjItNi40MjVNMTI1LjgxNSAxNDguMTZjNC4yMTUgMCA3LjU5LTMuMjkgNy41OS03LjY3NiAwLTQuMjE2LTQuMjE4LTcuMzM3LTguNjAzLTcuMzM3aC05LjE5djE1LjAxMnptLTEuMTgyLTI0LjI4OGM0LjMgMCA3LjI1Mi0zLjM3NiA3LjI1Mi03LjU5IDAtNC4yMTUtMi45NS03LjE3LTcuMjUyLTcuMTdoLTkuMDJ2MTQuNzZ6bS0xOS45LTIzLjE5YzAtLjg0My42NzUtMS42MDIgMS42LTEuNjAyaDE5LjMxMmMxMC4wMzQgMCAxNy43OTIgNi43NDQgMTcuNzkyIDE1LjYgMCA2LjQ5Mi01LjMxMyAxMS41NTItOS4yNzYgMTMuNDA3IDQuNDcyIDEuNDMzIDEwLjk2NCA1Ljk4NiAxMC45NjQgMTMuNzQ2IDAgOS40NDQtOC4wOTUgMTYuMjc0LTE4LjM4MyAxNi4yNzRoLTIwLjQwNmMtLjkyNiAwLTEuNi0uNzYyLTEuNi0xLjYwNHYtNTUuODJNMTU3LjEzNiAxMzAuMjA0YzAtNC40NDQgMy42NTUtOC4xIDcuODUzLTguMSA0LjQ0NiAwIDguMSAzLjY1NiA4LjEgOC4xIDAgNC4yNjUtMy42NTQgNy44NTYtOC4xIDcuODU2LTQuMiAwLTcuODU0LTMuNTktNy44NTQtNy44NTZNMTg3LjcwNSAxMDAuNzE1YzAtMS4wOTguNDU0LTEuNjM1IDEuNjM1LTEuNjM1aDguMmMxLjA5MiAwIDEuNjMyLjUzNyAxLjYzMiAxLjYzNXYyMy4xNTdsMjEuMjUtMjMuOTQ4Yy4zMzgtLjQyNC44NDItLjg0NCAxLjYwMi0uODQ0aDkuNTk3YzEuNjAzIDAgMi4wNi45OTUuOTYgMi4yNmwtMjIuNzgzIDI1LjU2NSAyNC4zODcgMjkuMDNjLjg0MyAxLjA5Mi41NTcgMi4xNzItMS4xMyAyLjE3MkgyMjIuN2MtLjg0NCAwLTEuMzQ4LS4zMzgtMS41Mi0uNTlsLTIyLjAwOC0yNy4xNTN2MjYuMTA3YzAgMS4wOTgtLjU0IDEuNjM3LTEuNjMzIDEuNjM3aC04LjJjLTEuMTggMC0xLjYzNS0uNTQtMS42MzUtMS42MzZ2LTU1Ljc1NSIgZmlsbD0iIzlkOGM0YyIvPjxwYXRoIGQ9Ik01Ny4yOTMgNTQyLjgyN0MyNC40OTMgNTE1LjYgMjEuMTQ3IDQ5MS4xMiAyNi44NjcgNDQyLjhjMS4yNC0xMC40OTMgNC4zMzMtMjUuNzIgNy45Mi00My4zNDcgMS4yNjctNi4yNTMgMi42MTMtMTIuODUzIDMuOTczLTE5LjcyTDQ0MS44OTMgMjYuNjI3bDg0Ljg0IDEwNnpNNTE3LjM0NyAzOTkuNDRjMy41NzMgMTcuNjI3IDYuNjggMzIuODUzIDcuOTIgNDMuMzYgMS40OTMgMTIuNjUzIDIuMzczIDIzLjY2NyAyLjI1MyAzMy41MzMgMCAuNTYtLjAxMyAxLjEyLS4wMjcgMS42NjctLjA0IDEuNTItLjA5MyAzLjAyNy0uMTc0IDQuNDkzLS4wMTMuMjQtLjAyNy40NjctLjA1My43MDctLjAyNy40NC0uMDU0Ljg4LS4wOTQgMS4zMDctLjA5MyAxLjM2LS4yMjYgMi42OTMtLjM3MyA0LS4wNjcuNTQ2LS4xMzMgMS4wOTMtLjIxMyAxLjYyNi0uMDY3LjUyLS4xMzQgMS4wMTQtLjIxNCAxLjUyLS4xMi44NjctLjI2NiAxLjczNC0uNDI2IDIuNTg3LS4xMDcuNi0uMjI3IDEuMi0uMzQ3IDEuOC0uMTQ3LjczMy0uMzA3IDEuNDUzLS40OCAyLjE4Ny0uMTQ3LjY1My0uMzA1IDEuMjkzLS40OCAxLjkzMy0uMTYuNi0uMzIgMS4xODctLjQ5MiAxLjc3My0uNiAyLjEwNy0xLjMwOCA0LjE2LTIuMTA4IDYuMTg3LS4xODcuNDY3LS4zNzMuOTMzLS41NzMgMS4zODctLjIxNC41Mi0uNDQgMS4wNC0uNjggMS41Ni0uMDY3LjE2LS4xNDcuMzMzLS4yMjcuNTA2LS40Ljg2Ny0uODI3IDEuNzM0LTEuMjY3IDIuNTg3LS40NC44NTMtLjg5MyAxLjcwNy0xLjM3MyAyLjU0Ny0uMzIuNTQ2LS42NCAxLjA5My0uOTczIDEuNjQtMS4wOTQgMS44MTMtMi4yOTUgMy42MTMtMy42MTQgNS4zODYtLjMyLjQ1NC0uNjY2LjkyLTEuMDE0IDEuMzc0LS45MDcgMS4xODYtMS44NjcgMi4zNzMtMi44OTMgMy41Ni0uNDI3LjUwNi0uODggMS4wMjYtMS4zMzQgMS41MzMtLjM3My40MjctLjc2Ljg0LTEuMTYgMS4yNjctLjI4LjMwNi0uNTYuNjEzLS44NjYuOTItLjg0LjkwNi0xLjcyIDEuOC0yLjY1NCAyLjcwNi0uNC40MTQtLjgyNi44MTQtMS4yNTMgMS4yMTQtLjQxMy40MTMtLjg0LjgxMy0xLjI4IDEuMjEzLTQuNzczIDQuNDQtMTAuMzA3IDguODkzLTE2LjcwNyAxMy41MDctMS4xNi44NC0yLjM0NiAxLjY4LTMuNTczIDIuNTMzLS42MTUuNDI3LTEuMjI3Ljg1My0xLjg1MyAxLjI4LS42MjcuNDI3LTEuMjU0Ljg1My0xLjg5NCAxLjI4LTEuOTA2IDEuMjkzLTMuODkzIDIuNi01Ljk0NiAzLjkyQzQ1NSA1NzAuMzA3IDQzNSA1ODEuNTQ2IDQxMC4wNjcgNTk0LjkyYy0uOTIuNDkzLTEuODU0Ljk4Ni0yLjggMS40OTMtMjQuMjU0IDEyLjk2LTQ4LjIxNCAyNy42NTQtNjkuMiA0MS4zMzMtMjguMjggMTguNDQtNTEuMTQ3IDM1LjA0LTYyIDQzLjEwNy0uMjE0LS4xNi0uNDQtLjMyLS42NjctLjQ5My0xMC40MTMtNy43MDctMzAuOC0yMi40OTMtNTYuMDkzLTM5LjE2LS41NDctLjM3My0xLjEwNy0uNzMzLTEuNjY3LTEuMTItMjEuODI3LTE0LjMyLTQ3LjE0Ny0yOS45NzQtNzIuNzg3LTQzLjY2Ny0uOTMzLS40OTMtMS44NjYtMS0yLjc4Ni0xLjQ5My02Ljg2Ny0zLjY4LTEzLjM0Ny03LjE4Ny0xOS40OC0xMC41NzQtMS43MzQtLjk2LTMuNDQtMS45MDYtNS4xMi0yLjg0LTMuNzM0LTIuMDgtNy4zMzQtNC4xMDYtMTAuNzg3LTYuMDgtLjc3My0uNDUzLTEuNTMzLS44OTMtMi4yOTMtMS4zMi0xMi42OTQtNy4zMzMtMjMuNTA3LTE0LjA0LTMyLjcwNy0yMC40MjZsNzAuMzg3LTYxLjUwNyA4OC03Ni44OTMgNDUuMzMzLTM5LjYxMyA4Mi4wNjctNzEuNzA3IDUxLjI2Ni00NC44MTMgNjIuMDQtNTQuMjE0IDQwLjMyLTM1LjIyNmMtNy42NCAxNy45Mi0xNC4yNzggNDEuMjgtMTQuMzQ2IDY4LjgyNi0uMTQ3IDU4Ljg1NCAxMS44NCAxMTcuODQgMjAuNiAxNjAuOTA3ek0yNy4yOTMgMTQzLjUzM2MtLjQtLjY0LS44LTEuMjUzLTEuMTczLTEuODQtLjU3NC0uODkzLTEuMTM0LTEuNzMzLTEuNjU0LTIuNTItLjM2LS41Mi0uNzA2LTEuMDI2LTEuMDI1LTEuNTA2LS4zMzMtLjQ5NC0uNjU0LS45NDctLjk2LTEuMzg3bDg5LjU2LTExMS45MzNjMS4xNzMuNTQ2IDIuNDY3IDEuMTMzIDMuODkzIDEuNzQ2IDE2LjY5NCA3LjM0NyA0OS45MDcgMTkuNzYgNzguNzYgMjQuNjY3IDQwLjcyIDYuOTA3IDc5LjM3NCA3LjEyIDgwLjcwNyA3LjEzM3YtLjAyNmMyLjY2Ny0uMDE0IDQxLjIxMy0uMzIgODEuMjY3LTcuMTIgMTQuMTQ2LTIuNCAyOS42LTYuNjE0IDQzLjQ2Ni0xMS4xNDdsLS4xODYuMTczTDQ0LjE2IDM1MS40OGwtLjE4Ny4xNmM2LjEzNC0zNC42IDExLjQ2OC03My44NjcgMTEuMzczLTExMy4xMDctLjEyLTQ0LjE0Ni0xNy4wNjYtNzcuNTYtMjguMDUzLTk1em01MjQuOC04LjgxM0w0NDUuOTA3IDBsLTYuNDE0IDMuMTZjLS40OC4yNC00OS4wOTMgMjMuOTg3LTg1LjcyIDMwLjItMzkuMjY2IDYuNjY3LTc4LjM3MyA2Ljg2Ny03OC4zNzMgNi44Njd2LjAxM2MtMi42NjctLjAxMy0zOS4zNzMtLjM3My03Ny42OC02Ljg4LTM2LjYyNy02LjIxMy04NC43Ni0yOS45NDctODUuMjU0LTMwLjE4N0wxMDYuMTQ2IDAgMCAxMzQuNzMzbDQuNTQ2IDUuNDhjLjMyLjQgMzMuMDQgNDAuOTYgMzMuMTg3IDk4LjM3NC4xNDcgNTcuMDUzLTExLjY0IDExNS4wMjYtMjAuMjQgMTU3LjM0Ni0zLjY2NiAxOC4wMTQtNi44NTMgMzMuNjE0LTguNTIgNDQuOC01LjY1MyAzNy41Ni01LjE4NyA2OS41NzQgMTQuNDI3IDk1LjQ0IDE4LjcyIDI0LjcwNyA1NS4wNTMgNDcuNjE0IDExMi43NiA3OC40NCA2OC40NjcgMzYuNTg3IDEzOC4xMDcgOTIuMTQ3IDEzOS44OCA5NC4ybC4wMTMuMDE0YzEuNTYtMS44OTQgNzEuMzM0LTU3LjU4NyAxMzkuOTA3LTk0LjIxNCA1Ny43Mi0zMC44NCA5NC4wNTMtNTMuNzMzIDExMi43NzMtNzguNDQgMTkuNi0yNS44OCAyMC4wNjctNTcuODggMTQuNDI3LTk1LjQ1My0xLjY4LTExLjE3My00Ljg2Ny0yNi43NzMtOC41MzMtNDQuNzg3LTguNi00Mi4zMzMtMjAuMzg3LTEwMC4yOTMtMjAuMjQtMTU3LjM2LjE0Ni01Ny40MTMgMzIuODUzLTk3Ljk3MyAzMy4xNzMtOTguMzZsNC41MzMtNS40OTMiIGZpbGw9IiM5ZDhjNGMiLz48L3N2Zz4=");
+}
+
+.mff {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNzQuODI3IiBoZWlnaHQ9IjU2OC44OTMiIHZpZXdCb3g9IjAgMCAzNzQuODI2NjYgNTY4Ljg5MzMxIj48cGF0aCBkPSJNMzU0LjQ5NyAzOC4yNzZWLS4wMDRoLTM2LjIxdjI3LjcyOEgyNzkuODlWLS4wMDZIMjQzLjYzdjI3LjczaC0zOC4zOVYtLjAwNmgtMzYuMjZ2MjcuNzNoLTM4LjM5N1YtLjAwNkg5NC4zMnYyNy43M0g1NS45MjVWLS4wMDZoLTM2LjIxdjM4LjI4MmMtLjk5NyAxMTIuMjUgMTIuMDU0IDIxNy44ODUgNzkuNTkzIDMwMC40OTcgMjQuOTE4IDI5LjI0IDU0LjU3NyA1My45NTQgODcuOCA2NS4yNTIgMzMuMjI1LTExLjI5OCA2Mi44NzYtMzYuMDEzIDg3Ljc5NS02NS4yNTIgNjcuNTQyLTgyLjYxMiA4MC41OS0xODguMjQ4IDc5LjU5NC0zMDAuNDk3IiBmaWxsPSIjMmY5N2RhIi8+PHBhdGggZD0iTTEzMS42NSAxMTMuMTE3djI0Ny4wNGMxNy4xNDMgMTQuODUgMzUuMTY3IDI3Ljc3MiA1NS40NiAzNC43NDggMjAuMjkzLTYuOTc2IDM4LjMxNC0xOS44OTcgNTUuNDU0LTM0Ljc0OHYtMjQ3LjA0SDEzMS42NU0zMjYuNzY3IDguNTI3bC4wNTMgMjcuNzI4aC01NS40NlY4LjUyN2gtMTkuMnYyNy43MjhoLTU1LjQ1M1Y4LjUyN0gxNzcuNTF2MjcuNzI4aC01NS40NlY4LjUyN2gtMTkuMTk3djI3LjcyOEg0Ny40MzZsLjAwNi0yNy43MjhIMjguMjl2OTUuOTg2aDMxNy42MzNWOC41MjdoLTE5LjE1NiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNDQuNDggOTUuOTAzVjQ0LjgyaDM5Ljc2djcuODcyaC0yOC45MDdWNjQuNGgyNS4xMnY3LjY2NGgtMjUuMTJ2MjMuODRIMjQ0LjQ4TTE2NC4yOTYgNzYuMDY3YzMuNjIgMCA2LjU1NS0yLjkzNCA2LjU1NS02LjU1OCAwLTMuNjItMi45MzMtNi41NjItNi41NTQtNi41NjItMy42MiAwLTYuNTYgMi45NDMtNi41NiA2LjU2IDAgMy42MjUgMi45NCA2LjU2IDYuNTYgNi41Nk0yMjkuNDYgNzYuNDkzYzMuNjE2IDAgNi41NTUtMi45NCA2LjU1NS02LjU2IDAtMy42Mi0yLjk0LTYuNTU4LTYuNTU1LTYuNTU4LTMuNjIgMC02LjU1MiAyLjkzOC02LjU1MiA2LjU1NyAwIDMuNjIgMi45MyA2LjU2IDYuNTUyIDYuNTZNMTIwLjA1MiA5NS45MDNoNC44OTZsMTYuMzktMzkuODAzdjM5LjgwM2g5LjE1VjQ0LjgyaC0xNC45bC0xNS41MzYgMzUuNTQ0LTE1LjUzOC0zNS41NDVIODkuNjE3djUxLjA4M2g5LjE1M1Y1Ni4zMWwxNi42MDIgMzkuNTkzaDQuNjhNMTc4LjM3NiA5NS45MDNWNDQuODJoMzkuNzZ2Ny44NzJoLTI4LjkwOFY2NC40aDI1LjEydjcuNjY0aC0yNS4xMnYyMy44NGgtMTAuODUyTTIxNi45MTIgNTIxLjk2M2wtMTguMjgtLjQ0LTExLjUyMy0xMy42ODItMTEuNTIzIDEzLjY4My0xOC4yODIuNDQgNy43OSAxNi40MDQtNy43OSAxNi40MDUgMTguMjgyLjQzNyAxMS41MjIgMTMuNjgzIDExLjUyLTEzLjY4NCAxOC4yODItLjQzOC03Ljc5LTE2LjQwNSA3Ljc5LTE2LjQwNE04MC42NTUgNDAyLjYzYzEuMDA4Ljc2NyAxLjk3OCAxLjYxIDMuMDc3IDIuMjIgMS4xLjYwNSAyLjQwNCAxLjAyMiAzLjU4NiAxLjQ3NC05LjI2OCAyMi40NDMtMTYuOTQ4IDQwLjU0LTIyLjk0IDU3LjYyNS0yLjExLTEuMzc1LTQuMDk0LTIuNzg3LTYuMjktNC4wMDUtMi4xOTItMS4yMTYtNC4yODUtMi4wNy02LjU2Ni0zLjEzIDYuMjg3LTEyLjgxMiAxMS4zNzMtMjUuNjg0IDE2Ljg5Ni0zOC40MTItMTIuNjEzIDguNjkyLTI1LjE1MyAxNy40MjgtMzcuNDYzIDI2LjQ5My0uOTMyLS43MjItMS44My0xLjMyMy0yLjk3OC0xLjY1Mi45ODItMTMuNjA4IDEuNTMtMjkuMiAyLjM5OC00NC44MTUtOS40NTUgMTIuNzk4LTE2Ljc2IDIzLjAwMy0yMy4wODUgMzMuODUzLTEuMTY0LS44NTYtMi4yMS0xLjc0My0zLjQ2Ni0yLjQzNi0xLjI1NS0uNzAyLTIuNDgtMS4wNy0zLjgyNC0xLjYxIDExLjU2Ni0xNC4yIDI0LjE2OC0zMC45OTQgMzcuODM2LTQ5LjM2IDEuMDE1Ljc3IDEuOSAxLjU3IDIuOTk4IDIuMTc4IDEuMS42MDggMi4zMjguOTg0IDMuNTE1IDEuNDM3LTEuMTg4IDE1LjQ0LTEuNzggMzEuMTA4LTIuNDEzIDQ2Ljg2IDExLjgyNS04LjAwNyAyNS4zMi0xNi42MiAzOC43MTgtMjYuNzJNMTA0LjM2NyA0NTEuNTE2Yy0yLjQyLjM3Ni02LjUyNi4xMTItOS41NyAxLjQzLTIuNzM0IDEuMjE4LTMuOTUgMy42NzgtNC42OTIgNi40NDctLjg1MiAzLjIwNC0uODEgNy4yMDcgMi45MSA4LjIgNS4yODUgMS40MTggNy43NzUtMy4zOTQgOS4xMDYtNy42Nzd6bTcuOTIgMTguMjY1Yy0uODUzIDMuMjA1LS4xOCA0LjUgMy4zMjcgNS4yNWwtLjUzMyAxLjk5M2MtMi4zMy4zOTQtNS45OTIuOS04LjQxNS4yNTMtNC4wNy0xLjA4Ny02LjUxNi00LjQzMi02Ljg4NC04LjYxNS0zLjMxNCAzLjM4NC04LjI3IDQuNTYzLTEyLjc3MyAzLjM2LTcuMTAyLTEuOS0xMS4zNC03LjIxMy05LjMyNC0xNC43NDMgMi4xOTgtOC4yMjggNy44Ny05LjMxIDE5LjM4OC05LjAxMyAyLjMwNS4wNiA0LjY5OC4xNCA2LjkyMy0uNTYgMS4yOTQtLjY3NSAxLjg1NS0xLjcyNyAyLjIwMi0zLjAyOCAxLjExMi00LjE1Ni0yLjIwNC04Ljc1Ny02LjE4NC05LjgyLTUuNTQzLTEuNDgzLTExLjA2MyAxLjEyLTEyIDIuNTQ0bC0uNjA2LS4xNjQuMjYtNS40OTZjNS4wOTMtMi43MjMgMTIuMTE3LTIuOTggMTcuNTc2LTEuNTE3IDcuMjczIDEuOTQ1IDE1LjY2NCA3LjM0MiAxMy4zNDggMTYuMDA1bC02LjMwMiAyMy41NTNNMTM2LjQzNiA0ODMuODI1Yy0xLjk5LS41NjgtMy45NjItMS4yMjUtNS45ODUtMS42Mi0yLjAyLS4zOTMtNC4wOTYtLjUxOC02LjE1NC0uNzRsMTMtNjYuODU3YzEuOTg1LjU3IDMuOTU3IDEuMjMgNS45ODMgMS42MiAyLjAyLjM5IDQuMDk3LjUyNSA2LjE1NS43NGwtMTMgNjYuODU3TTE1Ni4wMyA0NDIuNDRjMi4wNTUuMjE2IDQuMTE1LjUyMyA2LjE3Ny41NiAyLjA2Mi4wMzcgNC4xMzItLjE5NyA2LjE5Ni0uMzM1bC0uMTIyIDYuNzIyYzIuNjgzLTQuMjYgOC4xMTctNy4zOSAxMy4zMTctNy4yOTYgNS42NS4xMDMgOS45OTUgMi45NjUgMTEuNzggOC4zNzcgMy4yMjQtNC42OTUgNy44NjItOC4wMiAxMy43NzYtNy45MTQgMTAuNDAzLjE4OCAxMy44OCA2LjM1IDEzLjcxIDE1Ljk0N2wtLjUyIDI4LjZjLTIuMDU2LS4yMTUtNC4xMTYtLjUyLTYuMTc2LS41Ni0yLjA2NC0uMDMzLTQuMTM0LjE5Ni02LjE5OC4zMzZsLjQzOC0yNC4yOTdjLjEwOC02LjAwOC0uMzE1LTEyLjQ3Ni02LjMyMy0xMi41OC02LjM2Ni0uMTItNy41MTMgMy44OTYtNy42MTYgOS40NThsLS40OSAyNy4xNjZjLTIuMDYtLjIxMi00LjExNy0uNTE3LTYuMTgtLjU1NS0yLjA2LS4wNC00LjEyOC4xOTMtNi4xOTMuMzM0bC40MzctMjQuM2MuMTEtNi4wMDctLjMxMi0xMi40NzUtNi4zMi0xMi41OC02LjE4Ny0uMTEyLTcuNTQ1IDUuNTEyLTcuNjMzIDEwLjQ0NGwtLjQ3MyAyNi4xODNjLTIuMDU3LS4yMTQtNC4xMTQtLjUyLTYuMTc4LS41NTgtMi4wNjQtLjA0LTQuMTM1LjE5NS02LjE5Ny4zMzVsLjc4OC00My40ODZNMjM0LjUxMiA0MjguOTI4Yy0uNDcyLTMuMDEgMS44NDQtNi4xODMgNC44NTUtNi42NiAzLjA5NC0uNDg4IDYuMTU3IDEuNjY0IDYuNjU3IDQuODVzLTEuNjYgNi4xNTUtNC44NSA2LjY2Yy0yLjkyMi40Ni02LjItMS45MjctNi42NjItNC44NXptMzAuMTAzLTQuNzMyYy40ODYgMy4xLTEuNjYzIDYuMTU2LTQuNzYgNi42NDQtMy4xODguNS02LjI2NC0xLjczNS02Ljc0Ny00LjgzNi0uNDg4LTMuMDk3IDEuODM2LTYuMTg4IDQuOTMyLTYuNjcyIDMuMDE2LS40NzUgNi4xIDEuODU1IDYuNTc1IDQuODY0ek0yNDYuMzkgNDYyLjM1Yy44OSA1LjY2NyAzLjQ4MiAxNy41MDYgMTEuMTgyIDE2LjI5NSA2Ljc5LTEuMjQ4IDcuMDQtMTIuMzU2IDUuNTEtMjIuMDk0LTEuMzU0LTguNTg1LTQuNzA2LTE1LjUtMTAuNjQtMTQuNTY4LTcuMTcgMS4xMzMtNy42OTQgOS45MjItNi4wNSAyMC4zN3ptLTEzLjA1NyAyLjMyNmMtMi4xODUtMTMuOSA0LjQwNC0yNC40NiAxNy45NDgtMjYuNTkyIDEzLjM3NS0yLjEwMiAyMy4wNjUgNC43MiAyNS4xMjMgMTcuODI0IDIuMTE2IDEzLjQ1NS00LjMwMyAyNC41MzUtMTguMjA0IDI2LjcyLTEzLjEgMi4wNi0yMi44MS00Ljg1Mi0yNC44NjctMTcuOTUyTTMyNS4xIDQ2MS43NWMtMi4xMDQuNzgyLTQuMjQ4IDEuNDgyLTYuMjggMi40My0yLjAzMy45NDUtMy45NTIgMi4xMzUtNS45MDQgMy4yNDNsLTI1Ljk1NS01NS43NCAzMC45Ni0xNC40MTJjLjM2MyAxLjIxLjY4OCAyLjU0NiAxLjIyMyAzLjY4NS41MjUgMS4xMzMgMS4zNCAyLjI0IDIuMDMgMy4zLTUuMjIgMS43NC0xMC43NyAzLjYzMy0xOS4yOTcgNy42MDRsOC4xMyAxNy40NjggOC42MTMtNC4wMWMzLjE2Ny0xLjQ3NCA2LjI3LTMuMzEgOS40OS01LjMwNy4zNjcgMS4yMS42OSAyLjU0NiAxLjIyMyAzLjY4LjUzIDEuMTQgMS4zNCAyLjI0NiAyLjAzNCAzLjMwNy0zLjU2NiAxLjI2NC03LjAwNCAyLjM3Mi0xMC4yNTQgMy44ODNsLTguNTMyIDMuOTc2IDEyLjUyIDI2Ljg5M00zNjkuNzc1IDQ0MC4yNzJjLTIuMDguODU2LTQuMiAxLjYzMi02LjE5NSAyLjY0OC0xLjk5NiAxLjAxNy0zLjg3IDIuMjctNS43ODggMy40NDhsLTI3Ljg4LTU0LjggMzAuNDM1LTE1LjQ4OGMuNDEgMS4yMDQuNzc4IDIuNTIgMS4zNDYgMy42NDMuNTc0IDEuMTE3IDEuNDIgMi4xOTIgMi4xNDYgMy4yMjgtNS4xNTcgMS45MjItMTAuNjMzIDQuMDA1LTE5LjAyIDguMjdsOC43MzYgMTcuMTggOC40Ny00LjMxYzMuMTEzLTEuNTg2IDYuMTUtMy41MzMgOS4zLTUuNjM3LjQxIDEuMi43ODIgMi41MiAxLjM1IDMuNjQuNTY1IDEuMTE1IDEuNDIgMi4xOTIgMi4xNDUgMy4yMy0zLjUyIDEuMzg2LTYuOTE2IDIuNjEzLTEwLjExIDQuMjRsLTguMzg3IDQuMjcgMTMuNDUyIDI2LjQ0IiBmaWxsPSIjMmY5N2RhIi8+PC9zdmc+");
+  margin-right: 3px;
+  width: 13px;
+}
+
+.ifk {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODUuOTQ3IiBoZWlnaHQ9IjI4NC4yMTMiIHZpZXdCb3g9IjAgMCAxODUuOTQ2NjcgMjg0LjIxMzMyIj48cGF0aCBkPSJNMTgzLjA0IDE4LjI3NmMuMDQtMS4yODUtLjE0LTIuNDQ4LS41MzctMy40NTctLjA4Ni0uMjEzLS4xODItLjQwMy0uMjk0LS42MTVsLS4xNjItLjMxNGMtLjA3NS0uMTI2LS4xNTYtLjI0LS4yNjctLjM5LS42Mi0uODgtMS40NTctMS41ODQtMi40MTMtMi4wMy0xLjU4My0uNzQ2LTMuODQzLS43ODctNS44NC0uODIzLS40NTQtLjAwOC0uODg4LS4wMTYtMS4yNzgtLjAzNC0uMjM0LS4wMS0uNDQ3LS4wMjItLjYwNy0uMDM4LTMuNzIzLS40NDYtNy4wMTgtMS41Mi0xMC41MDctMi42NTgtNC40MjQtMS40NC05LTIuOTMtMTQuMzY0LTIuOTYyLS42NDQgMC0xLjMwOC4wMTMtMS45OC4wNTQtNS45MDguMzYyLTExLjEzNSAyLjI4My0xNi4xOSA0LjE0Mi01LjExMiAxLjg4LTkuOTQgMy42NTUtMTUuMjYyIDMuODE1LS40MzYuMDE0LS44OTcuMDE3LTEuMzg2LjAwOC0zLjM2NS0uMDcyLTcuODQtLjg0Ni0xMC4yNjctMi43NjYtLjczNS0uNjE0LTEuMzkzLTEuNTItMS44MzMtMi41MTcgMCAwLTIuNDIzLjkxLTYuODguOTE1LTQuNDU1LS4wMDQtNi44NzYtLjkxNS02Ljg3Ni0uOTE1LS40NCAxLTEuMDk0IDEuOTAyLTEuNzkzIDIuNDgzLTIuNDY2IDEuOTUzLTYuOTQyIDIuNzI3LTEwLjMwNSAyLjgtLjQ4OC4wMDgtLjk1NC4wMDctMS4zOTgtLjAxLTUuMzEtLjE2LTEwLjEzOC0xLjkzNC0xNS4yNS0zLjgxNC01LjA1NS0xLjg1Ny0xMC4yODMtMy43OC0xNi4xOS00LjE0My0uNjczLS4wNDItMS4zMy0uMDU3LTEuOTgyLS4wNTUtNS4zNjMuMDMyLTkuOTQgMS41MjItMTQuMzYzIDIuOTYyLTMuNDkgMS4xMzgtNi43ODYgMi4yMTItMTAuNDczIDIuNjU0LS4xOTIuMDItLjQwNi4wMzQtLjYzNi4wNDMtLjM5Mi4wMTgtLjgyOC4wMjYtMS4yODMuMDM0LTEuOTk2LjAzNi00LjI1Ny4wNzctNS44MzIuODItLjk2Ni40NS0xLjgwMyAxLjE1NC0yLjQ0IDIuMDYtLjA4NS4xMTItLjE2OC4yMjYtLjI1NS4zNzNsLS4xNzguMzVjLS4wOTcuMTgzLS4xOS4zNy0uMjcuNTctLjM5NiAxLjAwNS0uNTc4IDIuMTY3LS41NCAzLjM4OHY1NS44MWMwIDIuNDYgMCA0Ljc4MiAxLjM0MiA2LjgyM2wuNi45MTYgMS4zMTUgMS4yNTMuMDA3IDUxLjc3NyAxLjU2My0uODE4Yy43NC0uMzkgMS40MzctLjUyIDIuMTU1LS40MDMgNS42NzguODQ4IDUuODQyIDEyLjAzNCA1Ljg0MiAxMy4zMDZWMTc4LjFjMCA1LjM3My0xLjA0NyA5LjE4NS0zLjE4MiAxMS42MzMtMS4yNCAxLjM1NC0yLjg3IDEuOTU0LTQuMTQ3IDEuNTQtLjEzNC0uMDQ2LS4zNC0uMTMyLS41Ny0uMjg0bC0xLjY2LTEuMTA1djQyLjE4N2MwIDI0LjcyIDE1LjA3IDMzLjQ5IDI3Ljk3NiAzMy40OWgyOC42NGM5LjgyNCAwIDIwLjc4IDEuMzYgMjcuNTYyIDExLjQ1LjYxLjkwNSAxLjE3NiAxLjg0OCAxLjY4MiAyLjhsLjk0IDEuNzcyLjk0NC0xLjc3Yy41MTItLjk2IDEuMDc4LTEuOTAzIDEuNjg1LTIuODA2IDYuNzgtMTAuMDg3IDE3LjczOC0xMS40NDcgMjcuNTYyLTExLjQ0N2gyOC42NGMxMi45MDQgMCAyNy45NzQtOC43NyAyNy45NzQtMzMuNDg4di00Mi4xODdsLTEuNjYgMS4xMDRjLS4yMzIuMTUtLjQ0LjIzNy0uNTcyLjI4Mi0xLjI0NS40MTMtMi45MDctLjE4Ny00LjA5Ni0xLjQ4NC0yLjE3Ni0yLjQ5LTMuMjMyLTYuMzE1LTMuMjMyLTExLjY4N3YtMzEuMjI3YzAtMS4yNzIuMTY0LTEyLjQ1OCA1Ljg3Ny0xMy4zMTIuNjktLjExIDEuMzgyLjAyIDIuMTIuNDA3bDEuNTYyLjgxN1Y4My4wMmwxLjMyLTEuMjYzLjYtLjkxNmMxLjM0LTIuMDQgMS4zNC00LjM2MyAxLjM0LTYuODJWMTguMjc1IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTE3OS44NjMgOC45MjdjLTIuNTM4LS44OTQtNS4yMjYtLjUxOC03LjgxNS0uOC05Ljg0My0xLjEyOC0xNi44MS02LjIxNC0yNy40MS01LjYwMy0xMS40NDMuNzAzLTIwLjUzIDcuNjc2LTMxLjM3IDguMDA4LTIuNTM3LjA4OC04Ljc5OC0uMzc2LTEwLjU5NS0yLjgyNy0uMDQzLS4wNTMtLjA5LS4xNC0uMTQtLjE5IDEuNzQ3LS4yMzggMy4xMDgtMS43NDQgMy4xMDgtMy41MzIgMC0zLjk5OC01LjkzMi00LjgwMy03Ljc2OC0xLjc4Ny0xLjA2NCAxLjcxNi0uOTIgMy45ODQtLjEyNSA1Ljk5M2guMDAzYy41OCAxLjQ3OCAxLjUxMiAyLjc3NyAyLjU3IDMuNjYgMi45NyAyLjM1IDcuODgzIDMuMTggMTEuNTkgMy4yNi41My4wMSAxLjAzMy4wMDcgMS41MDQtLjAxIDExLjExMy0uMzMyIDIwLjExMy03LjI2IDMxLjUwNi03Ljk2LjYyNC0uMDQgMS4yMzctLjA1NSAxLjg0LS4wNSA5LjAzNS4wNTQgMTUuNzYgNC41NDMgMjQuNjMyIDUuNjAzLjIzLjAyNi40ODQuMDQuNzYuMDU0IDEuOTMuMDg0IDQuODItLjA0NiA2LjMwNS42NTQuNTgyLjI3MyAxLjEzNi43MDQgMS41NzYgMS4zMy4wNi4wOC4xMjIuMTU1LjE3NS4yNDUuMDQuMDYyLjA2Ny4xNC4xLjIwNS4wNzMuMTM3LjE1LjI3Mi4yMS40MjcuMjcuNjg1LjQyMiAxLjU0LjM5IDIuNlY3NC4wMmMwIDIuMzA1IDAgNC4xNC0uOTkgNS42NDhoLS4wNTRjLS4wMTItLjQxNi0uMDY0LS44MjMtLjE1LTEuMjIzbC0uMDMtLjEzM2MtLjA4LS4zNDctLjE4Ny0uNjg0LS4zMi0xLjAxMy0uMDMtLjA3Ny0uMDU3LS4xNTItLjA5LS4yMjctLjEzNC0uMjk3LS4yOS0uNTg0LS40NjctLjg2LS4wNTItLjA4NC0uMDk1LS4xNy0uMTUtLjI0OC0uMjM3LS4zNC0uNDk4LS42Ny0uOC0uOTczLTIuNzE2LTIuNzA3LTcuMzEtMi44NTMtMTAuMjUtLjMxNi0yLjA3OCAxLjgxMy0yLjcyIDQuOTQzLTEuNDY3IDcuMTEyLjM5My42OTUuOTUyIDEuMjIgMS42MiAxLjUzNS0uNzM1LjMxNC0xLjUzLjYwNi0yLjM3Mi44NzMtMy4yMiAxLjAwNS02Ljk4IDEuNTY0LTEwLjg3MiAxLjYxNy01LjMwNC4wNTItMTAuOTItMS4xOC0xNi43MDgtMy42MjYtNS42Ni0yLjM4Mi0xMC42NzMtNS41MDYtMTQuNS05LjA0bC0uNDI0LS4zODdjLTEuMDItLjk0LTIuMDc4LTEuOTE2LTMuMjk0LTIuNzYtMS4zMy0uODcyLTIuNjgtMS4zMjMtNC4xMjYtMS4zNzUtMi4xMDItLjA4OC00LjAxLjcyMi01LjM3IDIuMTdINzUuODU4Yy0xLjM2LTEuNDQ4LTMuMjY3LTIuMjU4LTUuMzY4LTIuMTctMS40NDUuMDUyLTIuNzk2LjUwMy00LjEyNiAxLjM3Ni0xLjIxOC44NDQtMi4yNzQgMS44Mi0zLjI5NiAyLjc2bC0uNDIyLjM4OGMtMy44MjggMy41MzMtOC44NCA2LjY1Ny0xNC41IDkuMDQtNS43OSAyLjQ0NS0xMS40MDUgMy42NzctMTYuNzEgMy42MjUtMy44OS0uMDUzLTcuNjUyLS42MTItMTAuODctMS42MTctLjg0My0uMjY3LTEuNjM3LS41Ni0yLjM3NC0uODczLjY2OC0uMzE2IDEuMjI2LS44NCAxLjYyLTEuNTM1IDEuMjUtMi4xNy42MS01LjMtMS40NjYtNy4xMTItMi45NC0yLjUzNy03LjUzNi0yLjM5LTEwLjI1LjMxNi0uMzAyLjMwNC0uNTY1LjYzMi0uOC45NzMtLjA1NS4wOC0uMS4xNjQtLjE1LjI0OC0uMTc2LjI3Ni0uMzM1LjU2My0uNDY3Ljg2LS4wMzQuMDc1LS4wNjIuMTUtLjA5LjIyNi0uMTM1LjMyOC0uMjQuNjY1LS4zMjIgMS4wMTJsLS4wMy4xMzNjLS4wODUuNC0uMTM2LjgwNy0uMTUgMS4yMjNoLS4wNTNjLS45OS0xLjUwNy0uOTktMy4zNDMtLjk5LTUuNjVWMTguMjFjLS4wMzItMS4wNi4xMi0xLjkxNi4zOS0yLjYuMDYyLS4xNTYuMTM2LS4yOS4yMDgtLjQyOC4wMzUtLjA2NS4wNjMtLjE0My4xMDItLjIwNS4wNTMtLjA5LjExNi0uMTY0LjE3NC0uMjQ2LjQzOC0uNjI2Ljk5NC0xLjA1NyAxLjU3NS0xLjMzIDEuNDg1LS43IDQuMzc3LS41NyA2LjMwNi0uNjUzLjI3Ny0uMDE0LjUzMy0uMDI4Ljc2Mi0uMDU0IDguODcyLTEuMDYgMTUuNTk3LTUuNTUgMjQuNjMtNS42MDQuNjA0LS4wMDUgMS4yMTYuMDEgMS44NC4wNSAxMS4zOTUuNyAyMC4zOTMgNy42MjggMzEuNTA1IDcuOTYuNDcuMDE3Ljk3Ny4wMiAxLjUwNy4wMSAzLjcwNi0uMDggOC42Mi0uOTEgMTEuNTg3LTMuMjYgMS4wNjItLjg4MyAxLjk5My0yLjE4MiAyLjU3My0zLjY2aC4wMDNjLjc5Ny0yLjAxLjkzNy00LjI3OC0uMTI1LTUuOTk0LTEuODM3LTMuMDE2LTcuNzctMi4yMS03Ljc3IDEuNzg3IDAgMS43ODggMS4zNjQgMy4yOTQgMy4xMSAzLjUzMy0uMDUuMDUtLjA5Ny4xMzYtLjE0LjE5LTEuNzk3IDIuNDUtOC4wNTggMi45MTQtMTAuNTk1IDIuODI2LTEwLjg0LS4zMzItMTkuOTI3LTcuMzA1LTMxLjM3LTguMDA4LTEwLjYtLjYxLTE3LjU2OCA0LjQ3NS0yNy40MSA1LjYwNC0yLjU5LjI4LTUuMjc3LS4wOTUtNy44MTYuOC0yLjgzLjk4NC01Ljg0NyAzLjQ0LTUuNjYyIDkuNDJ2NTUuNjdjMCA0LjkuNzYgOC41NzQgNC45OTggMTEuMzAydjUxLjUyYzEuNDYtMS40NiAyLjgyNi0yLjc4IDQuMzMzLTIuNTM3IDQuMzc2LjY1MyA1LjIyNyA5LjA4NiA1LjIyNyAxMi41N1YxNzguMWMwIDMuNzItLjQ3IDguMjQ1LTMuMDE2IDExLjE2My0xLjYgMS43NDQtNC4zNzcgMi4yNi00LjcxLS44OTMuNTczLjY1OCAxLjUxNC42NTggMi4zMS4zMjYgMi40NS0xLjEyNiAyLjcyOC01LjUwOC0uNjYtNS41NTctMi41NDMtLjA1LTMuNDg0IDIuNjM4LTMuNDg0IDQuNzF2NDQuMjIzYzAgMTcuNzU2IDkuMTg1IDM0LjIzOCAyOC43MjMgMzQuMjM4aDI4LjY0YzExLjc2OCAwIDIwLjk1NyAyLjIxNyAyNi45NCAxMS4xMTcgMS4yNjggMS44OCAyLjU0IDQuMjQgMy4yNDcgNi40MDguNzA1LTIuMTY3IDEuOTgtNC41MjggMy4yNDctNi40MDggNS45OC04LjkgMTUuMTctMTEuMTE2IDI2Ljk0LTExLjExNmgyOC42NGMxOS41NCAwIDI4LjcyNC0xNi40OCAyOC43MjQtMzQuMjM3VjE4Ny44NWMwLTIuMDcyLS45NDMtNC43Ni0zLjQ4Ny00LjcxLTMuMzg3LjA0OC0zLjEwOCA0LjQzLS42NTcgNS41NTYuNzk3LjMzMiAxLjczOC4zMzIgMi4zMS0uMzI2LS4zMzIgMy4xNTMtMy4xMSAyLjYzNy00LjcxMi44OTMtMi41NDUtMi45MTgtMy4wMTMtNy40NDMtMy4wMTMtMTEuMTYydi0zMS4yMjdjMC0zLjQ4NC44NDgtMTEuOTE3IDUuMjI4LTEyLjU3IDEuNTA1LS4yNDQgMi44NzMgMS4wNzggNC4zMzMgMi41MzdWODUuMzJjNC4yMzUtMi43MjggNC45OTctNi40MDMgNC45OTctMTEuM1YxOC4zNWMuMTgzLTUuOTgzLTIuODMtOC40MzgtNS42NjItOS40MjMiIGZpbGw9IiNmY2JkMDAiLz48cGF0aCBkPSJNNy4yMzQgODQuMDI1Yy4zNjMuNTk1LjgwNiAxLjE1MiAxLjMyNyAxLjY4IDIuMzM3IDIuMzI2IDUuNjQ2IDQuMTU1IDkuODQ4IDUuNDQ3IDMuODMyIDEuMjMzIDguMzIgMS45MTMgMTIuOTQ2IDEuOTYuMDkzLjAwMy4xODYuMDAzLjI3Ni4wMDMgNi4xNiAwIDEyLjY1Ny0xLjQwOCAxOS4zMy00LjE5IDUuOTctMi40OTcgMTEuMTQ2LTUuNjUgMTUuNDA4LTkuMzguMDkzLjkxLjUyMyAxLjc1IDEuMjYzIDIuMzkyIDEuODg4IDEuNjU1IDUuMDkgMS42NDcgNy4yODMtLjAyNSAxLjMxNi0xLjAyIDIuMjA0LTIuNDMgMi42My0zLjk2N2gzMC44NjZjLjQyNiAxLjUzNiAxLjMxNCAyLjk0NiAyLjYzIDMuOTY3IDIuMTkzIDEuNjcyIDUuMzk1IDEuNjggNy4yOC4wMjUuNzQ0LS42NDIgMS4xNy0xLjQ4IDEuMjY2LTIuMzkzIDQuMjYgMy43MzIgOS40MzYgNi44ODQgMTUuNDA3IDkuMzggNi42NzQgMi43ODMgMTMuMTcgNC4xOSAxOS4zMyA0LjE5aC4yNzZjNC42MjgtLjA1IDkuMTEzLS43MyAxMi45NDUtMS45NjIgNC4yMDItMS4yOTIgNy41MS0zLjEyIDkuODQ3LTUuNDQ3LjUxNy0uNTI0Ljk1Ny0xLjA3NyAxLjMyLTEuNjY1djQ4Ljk4Yy0uODQ0LS40NC0xLjc2Ny0uNjgtMi43ODgtLjUxMi02LjQ0Ny45NjMtNi43NzIgMTIuMTM1LTYuNzcyIDE0LjM2NHYzMS4yM2MwIDUuNjQyIDEuMTMyIDkuNjgzIDMuNDkzIDEyLjM4NyAxLjUwOCAxLjY0MyAzLjU3IDIuMzUgNS4yNCAxLjc5NS4yMDctLjA3LjUwNi0uMTk2LjgyNi0uNDF2NDAuMTk4YzAgMjMuOTMyLTE0LjQ5NCAzMi40MjItMjYuOTA3IDMyLjQyMmgtMjguNjRjLTEwLjEwNSAwLTIxLjM4NyAxLjQxNi0yOC40NDUgMTEuOTE4LS42MzIuOTQtMS4yMiAxLjkyLTEuNzQgMi44OTgtLjUyLS45NzctMS4xMS0xLjk1Ny0xLjc0LTIuODk1LTcuMDYtMTAuNTA0LTE4LjM0Mi0xMS45Mi0yOC40NS0xMS45MkgzNC4xNTJjLTEyLjQxMyAwLTI2LjkwOC04LjQ5LTI2LjkwOC0zMi40MjJ2LTQwLjE5N2MuMzIuMjEzLjYxOC4zNC44MjcuNDEgMS42NjMuNTQ2IDMuNzI3LS4xNSA1LjI3LTEuODMgMi4zMy0yLjY3IDMuNDYyLTYuNzEyIDMuNDYyLTEyLjM1NXYtMzEuMjI4YzAtMi4yMy0uMzI2LTEzLjQtNi43NTMtMTQuMzYtMS4wMzItLjE2OC0xLjk2LjA2OC0yLjgwOC41MWwtLjAwOC00OC45OTciIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTcyLjk5MiA3OC4zYzEuODg0LjQyOCAxLjYgMi40NTMuNTIzIDMuNTM2LTEuNzk2IDEuNzM3LTQuNDc4IDMuMTEtNy41ODcgNC4wOTMtMy40ODMgMS4wOS03LjQ4NCAxLjY0NS0xMS40IDEuNjk4LTUuOTc2LjA0NS0xMS45Ni0xLjQ2LTE3LjQyNC0zLjc2Ny01LjM3LTIuMjYtMTAuNjktNS4zNy0xNS4wMjMtOS4zNzMtMS4xMy0xLjAzNS0yLjI1Ny0yLjExNC0zLjQ4OC0yLjk2Ny0uOTM2LS42MTYtMS45NzUtMS4wMzUtMy4yLTEuMDgtMi40NS0uMDk2LTQuMTkzIDEuMzItNC45OTMgMy4xMDQtMS4wODYgMi40MDctLjMyNyA1LjMyIDEuNzQyIDYuOTI0IDEuNjA0IDEuMjI3IDMuODYgMS4wOSA0Ljk5Mi4wOTYgMi4wNy0xLjc5LTEuMTc2LTUuNDYzLTMuNTgzLTQuNjYzIDAtLjk0LjY2Ni0xLjgzMiAxLjctMS43OSAxLjA4Ny4wNSAzLjAxNiAxLjc0MyA0LjU3MyAzLjIwMyA0LjU2OCA0LjI0NCAxMC4xMjYgNy41MzUgMTUuODcgOS45MzYgNS44ODYgMi40NTMgMTIuMzg2IDQuMDk0IDE4Ljg4NiA0LjA1IDQuMjMzLS4wNDUgOC42MTMtLjY1NSAxMi40MzMtMS44ODQgMy42Ny0xLjEyOCA2Ljg3Mi0yLjc4MyA5LjA4Ni00Ljk4OC41MTctLjUyNC45ODUtMS4xMzMgMS4zMTctMS43OTMgMS4wNDItMi4xNjcuODk4LTQuNjEyLS44NDItNi4zNTYtMi4xNzItMi4xNy01Ljc1LTEuOTg0LTcuNzc1LS4yMzYtMS41MDMgMS4zMTItMS44NCAzLjUzLTEuMDggNC44NS45ODcgMS43NCAzLjI5Ni44IDQuMzczLS4zMy41NjctLjUxNSAxLjA4NC0xLjI3LjktMi4yNjVNMTA4Ljc0MiA3Mi44Yy4wMy0uMDY4LjA3LS4xMjUuMTAyLS4xOUg3Ny4xMDhjLjAzMi4wNjUuMDcyLjEyMi4xLjE5LjQ4IDEuMDYzLjY2NyAyLjIwMy42MjUgMy4zM2gzMC4yODZjLS4wNDMtMS4xMjcuMTQ0LTIuMjY3LjYyMi0zLjMzTTEyLjk2IDc4LjNjLTEuODg0LjQyOC0xLjYgMi40NTMtLjUyIDMuNTM2IDEuNzk0IDEuNzM3IDQuNDc1IDMuMTEgNy41ODQgNC4wOTMgMy40ODMgMS4wOSA3LjQ4NiAxLjY0NSAxMS40IDEuNjk4IDUuOTc4LjA0NSAxMS45Ni0xLjQ2IDE3LjQyNS0zLjc2NyA1LjM2OC0yLjI2IDEwLjY4Ny01LjM3IDE1LjAyMi05LjM3MyAxLjEzLTEuMDM1IDIuMjU4LTIuMTE0IDMuNDg4LTIuOTY3LjkzNy0uNjE2IDEuOTc2LTEuMDM1IDMuMjAyLTEuMDggMi40NS0uMDk2IDQuMTkyIDEuMzIgNC45OSAzLjEwNCAxLjA4NSAyLjQwNy4zMjggNS4zMi0xLjc0IDYuOTI0LTEuNjA1IDEuMjI3LTMuODYgMS4wOS00Ljk5My4wOTYtMi4wNy0xLjc5IDEuMTc1LTUuNDYzIDMuNTgyLTQuNjYzIDAtLjk0LS42NjUtMS44MzItMS43LTEuNzktMS4wODUuMDUtMy4wMTUgMS43NDMtNC41NzIgMy4yMDMtNC41NjcgNC4yNDQtMTAuMTI1IDcuNTM1LTE1Ljg3IDkuOTM2LTUuODg1IDIuNDUzLTEyLjM4NSA0LjA5NC0xOC44ODUgNC4wNS00LjIzOC0uMDQ1LTguNjE1LS42NTUtMTIuNDM1LTEuODg0LTMuNjcyLTEuMTI4LTYuODcyLTIuNzgzLTkuMDg4LTQuOTg4LS41MTctLjUyNC0uOTg1LTEuMTMzLTEuMzE3LTEuNzkzLTEuMDQtMi4xNjctLjktNC42MTIuODQ0LTYuMzU2IDIuMTctMi4xNyA1Ljc0OC0xLjk4NCA3Ljc3NC0uMjM2IDEuNTAyIDEuMzEyIDEuODM4IDMuNTMgMS4wNzggNC44NS0uOTg3IDEuNzQtMy4yOTUuOC00LjM3My0uMzMtLjU2OC0uNTE1LTEuMDg0LTEuMjctLjktMi4yNjUiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTQxLjM2IDE5MC4wNmMuMzEuOTYuNTMyIDEuNzUuNjcgMi40ODQtLjM4NS0uNTEyLS43NjYtMS4wMjUtMS4xMy0xLjU0LTEuODctMi42ODUtMi43MzUtNC45NC0yLjYzNi02LjgzOC4xNDUtLjEzNy4yOTUtLjI3NC40NDMtLjQxMyAxLjAzNCAyLjA3NCAyLjAwNSA0LjE4MiAyLjY1MyA2LjMwNm0tNi4yODMgMTcuNTljLTIuMDk0IDAtMy44ODQtLjUxLTQuODUyLTEuMzczLS41MzMtMy4zNTYtMS43MS02LjM2Ni0zLjY3My05LjQ0NC45OC0xLjI4IDEuOTQzLTIuNDcgMi44OS0zLjU0IDEuMzItMS40OTMgMi40NTMtMi43MzIgMy40OS0zLjgzMi45MjcgMi41IDIuMjcgNC41OSAzLjQ2IDYuNDFsLjEuMTVjMS41NzcgMi4zNDggMi45NDMgNC4zOCAyLjk0MyA2LjUyNSAwIDIuNDc1LTEuNTI4IDUuMTA2LTQuMzU4IDUuMTA2bS0xNS4xNjYtODkuMTNjLjcyLS44IDEuMzYyLTEuNTIgMS45Ny0yLjIgMS43NCAyLjA0NCAzLjQ1NiA0LjA2NSA1LjEyOCA2LjA0LTEuNjUyIDEuMzctMy4zMTggMi42NTMtNC45IDMuODU2bC0xLjU4NSAxLjIwNyA1LjA4MyA1LjUyNGMtLjAzLjA5NC0uMDYuMTkyLS4wODQuMjczbC0uNjczIDEuNzJjLS41NDggMS40LTEuMDg4IDIuNzgtMS42MTIgNC4yMDMtLjcyNi43MTItMS40NjUgMS41NzMtMi4yNCAyLjQ4MmwtLjg4MyAxLjAyM2MtMi4zNyAyLjg1LTQuOTcgNS44NC04LjM1IDguNTguMDItLjg0My0uMDI1LTEuNjctLjE3OC0yLjM1NWwtLjA0LS4xMDguMzM0LTEuMDI0Yy41NzYtMS43NC4zMy0zLjcyNC0uNS01LjQ5N2wuMjUzLS4zOTRjMS4yLTEuODYuOTc3LTQuMDIzLS41LTYuMDQ3bC4xODMtLjQxNWMuNzYtMS43MzIuNy0zLjUyNy0uMTc0LTUuMTktLjA0OC0uMDktLjExNi0uMTc4LS4xNy0uMjdsLjE2Mi0uOTQ4Yy4wOS0uNTQzLjEyMy0xLjAzNi4xMjYtMS41MDUgNC4zOTgtNC40OCA3LjYzNi03LjgyIDguNjUtOC45NTVtLTgxLjYyMyAyOS4wNjNsLS4wMzUuMDM3Yy0uMDA0LS4wNDUtLjAxNi0uMDg4LS4wMi0uMTMyLjAxNy4wMzIuMDM1LjA2NC4wNTUuMDk1TTg3LjY4IDEwMS42OHYuNjY4Yy0xLjc5IDEuMTEzLTMuNTA1IDIuMy00Ljk2NSAzLjY4N2wtLjQwNy0uMjk0Yy0uMjQ1LS4xNzYtLjU2LS4zMDgtLjkwMi0uMzk3LjY2Ny0yLjgyMyAyLjU2Ni0zLjk1NCA2LjI3NC0zLjY2Mm04MS40MiA1NS44OTJoLjAxM2wuMDM4LS4wNzZ2LTEwLjYyNGMwLTIuMjMuMzI3LTEzLjQgNi43NzUtMTQuMzY0IDEuMDItLjE2NyAxLjk0My4wNzIgMi43ODYuNTEyVjkzLjExNWMtLjAwNy4wMTMtLjAzLjEwNS0uMDMuMTA1LTUuMDgzIDcuNC04LjY5NyAxMi42NjMtMTMuNDk1IDE5LjAyLTQuNDE0IDUuNzY4LTYuMzkyIDguNzk2LTE2LjM2NCAxOC45OS4yNzMtMS4wNDIuMDc1LTEuODY1LS4xOS0yLjQyMi0uNjItMS4zMDQtMS44OS0xLjg3LTIuNjMtMi4xLjExLTEuMTYtLjA4Ny0yLjE0My0uNjI1LTIuOTA0LS40MDYtLjU3NS0xLjIwMi0xLjMwNy0yLjY4Ni0xLjUyM2wtLjA3LS4wMDdjLS4zNTUtMS4yNzctLjk3NS0yLjA1NC0xLjY3LTIuNDc4LjEwNS0uMDgyLjIxMy0uMTY2LjMxNS0uMjQ4bDEuNzc4LTEuNDA4LTUuNjE4LTYuMjY1LTEuMzMyIDEuNzJjLTEuMDQ4IDEuMzUzLTIuMTU2IDIuNjMtMy4zMDcgMy44MThsLTYuMDIyLTYuNTczLjAyOC0uMDMzYzQuMjQyLTQuOTg3IDUuMjUyLTYuODM0IDcuMTM1LTEwLjA3OCAxLjM2Ni0yLjM1OCAyLjk5OC01LjMzIDYuMTUyLTkuOTQgMCAwLTIuOTc2LS45ODYtNS4wODctMS44NjYtNS45Ny0yLjQ5Ni0xMS4xNDctNS42NDgtMTUuNDA3LTkuMzgtLjA5NS45MTItLjUyMyAxLjc1LTEuMjY2IDIuMzkzLTEuODg1IDEuNjU1LTUuMDg3IDEuNjQ4LTcuMjgtLjAyNS0uOC0uNjItMS40Mi0xLjM5Mi0xLjg5NS0yLjI0LjA4Ni4xOC4xMzUuMzE1LjExLjM1LS42MS44OTgtMS4xOTQgMS43OTgtMi4wODMgMy4xNy0uNzU3IDEuMTI3LTEuNjY0IDIuNTEyLTIuNTU3IDMuODI4di4wMDNjLTEuMjgyLTEuMjY2LTIuMzkyLTIuMzA3LTMuMzk0LTMuMTc0LTIuMzgtMi4yMzMtNi4zMDItMy4zODUtNi4zMDItMy4zODVzLjYyMyA0LjA3NiAyLjY0NyA2LjcwMmMuOTkgMS40MDQgMi4xNSAyLjkxIDMuNjE2IDQuNzI1LS44OTYgMS4wOC0xLjk4MyAyLjI5LTMuMyAzLjU5Ny0uNjM3LjYzLTEuMzQzIDEuMjItMi4wOTYgMS43ODUtLjg0OC0uMTM4LTEuNzgtLjIyOC0yLjgzNi0uMjc0aC0uMDEzYy4xMTctLjMyNC4xOS0uNjcuMTktMS4wMzcgMC0uODYtLjMzLTEuNjg0LS44Ny0yLjIyLS4wMzQtLjAzOC0uMDgtLjA2Ni0uMTE0LS4xMDMuNTkyLS4yOTYgMS4wMi0uODk2IDEuMDItMS41ODUgMC0uOTAzLS42OS0xLjY0OC0xLjU0NC0xLjc4LjA3Ni0uMjA2LjEyNy0uNDI4LjEyNy0uNjcgMC0uNDEzLS4xNC0uNzktLjQyMi0xLjE1N2wtLjE1NS0uMTU1Yy0uMzUzLS4yNzQtLjc4LS40MjgtMS4yMDQtLjQyOC0xLjAwMiAwLTEuNzg3Ljc2NC0xLjc4NyAxLjc0IDAgLjI0LjA1LjQ2Ni4xMy42NzUtLjg2OC4xNDctMS41NDMuODY4LTEuNTQzIDEuNzc1IDAgLjY5LjQzNiAxLjI5MyAxLjA0MyAxLjU4Ni0uNjE2LjU4OC0xLjAwNCAxLjQxLTEuMDA0IDIuMzIzIDAgLjM0NS4wOC42OTguMjA1IDEuMDM0aC0uMDU4Yy02LjM1Ni4zMzItOC43NjIgMS44NDItMTAuODMyIDguMDUyLTIuNDk4LTEuNjUtNC43MTQuNjE1LTUuMTg0IDIuNzc4IDIuNTkzLS43NTMgMy4wNjMuMzMgNC4wNTQgMi4xN2wuMTkuMzdjLjQ0OC45MjUgMS4xMTUgMi4yMTUgMi4wNSAyLjkxMy0uMjU1LjMtLjUxLjU5NS0uNzczLjg4LS4wOTMuMDg0LS4xNzcuMTU2LS4yNzUuMjQ0LTEuMDMyLjk1Mi0yLjMxNiAyLjEzNy0zLjI5NyAyLjUxNS0uMjk4LjEwMy0yLjI1LjYtMy41NDIuOTMtLjg2OC4yMi0xLjcuNDMtMi4yNS41OGwtMS4wODIuMjg2LjAzMyAxLjEyYy4wMzIgMS4xMTYuNDY3IDIuMSAxLjIyNyAyLjc4NGwtLjAxMy4wOTZjLS41NS41ODQtMS4wMyAxLjE2NC0xLjQxIDEuNzQ3LTUuODM3IDYuNDkzLTguODY3IDEwLjI4NC0xMy45NDMgMTcuNy0xLjc3My0uNDYtMy44MDQtLjU4NC00LjMyNS0uNTg0LS4xNSAwLS4yODguMDAzLS40MTcuMDEtMS41NDYuMDktMy4xMzcuNzAyLTUuMDU0IDEuNTkzLS42NzIuMzEyLTEuNDk3Ljc3OC0yLjA5OCAxLjExOC0uMjE2LjEyLS4zOTMuMjIzLS41MS4yODQtLjQ3Ny4yNTYtMS41MTYuODEtMS41MyAxLjkwNC0uMjMtLjU1My0uNTY0LTEuMDU1LTEuMDA0LTEuNDM2LS44MzMtLjc0NS0yLTEuMTItMy40NjctMS4xMi0yLjM2NSAwLTUuMDY2IDEuNzYtNi44NjUgNC40Ni0xLjcxOCAyLjQ5LTIuNjI3IDUuNjI4LTIuNjI3IDkuMDc4IDAgMy4xODMuMzE4IDcuOTg3IDIuNzA3IDE0LjEzbC0uMTcyLjIwM2MtMi41MTIgMi40MzMtNS45MTcgNS44My05LjgzIDkuNTU0bC0uMDQ1LjAzYy0uMzc0IDMuOTY0LTEuNDY4IDYuOTUtMy4zMiA5LjA3LTEuNTQgMS42NzgtMy42MDUgMi4zNzUtNS4yNyAxLjgyOC0uMjA4LS4wNy0uNTA3LS4xOTYtLjgyNS0uNDF2NDAuMTk4YzAgLjMxMi4wMTIuNjEuMDE3LjkxNi4xNC0yLjg4IDIyLjcyLTIwLjgzNyAzNy45MzMtMzUuMTdsLjIzMi0uMjcyLjE2Ny4xNyAxLjI3NSAxLjI1NCAxLjI3NC0xLjI1NmM4LjU4Ny04LjQ2IDE0LjQ1Ny0xNi4yOTUgMTcuOTUtMjMuOTYuMTY4LS4zNzQuMzAyLS43My40NTMtMS4wOTVsLjUzLS42MjUuMzctLjM2N2MuOTM4LjU3NiAxLjcxNyAxLjIwNSAyLjc5MyAyLjE4bC4xNDIuMTI1Yy0uNDQyIDEuNTgtLjExOCAzLjIyNi45MjIgNC4zMzIuNzIzLjcyIDEuNzI4LjgwNyAyLjg5NS45MDYuNTguMDUgMS4yMzcuMTA3IDEuNjczLjI1LjEwNC4wMy4yMDMuMDQ4LjMwNC4wNzJsLjk3NiAxLjA0Yy42ODUuNzI4IDEuMjggMS4zNyAxLjg2IDIuMDUgMS43MTMgMS44NzUgMi43MTcgMi45NSAzLjM1NiAzLjU5bC4xMDcuMDk3Yy42MDYuNTIgMS4yMjIgMS4wOSAxLjg3NCAxLjczIDIuMDk1IDIuMTA1IDQuMjMgNC4xMiA2Ljc1IDUuODgtLjMzNy40MTUtLjY3NS44MjMtMS4wMTUgMS4yMi00LjI2OCAxLjI3LTguNzkgMS45MDUtMTIuODAzIDIuMzUyLTUuMjY3LjU3NC0xMS4yOTggMS41OC0xNi4yMjQgNi4yODUtMy4wOTcgMi45OC00LjgzNSA2LjczNi01LjE2NSAxMS4xNjRsLS4xNzcgMi4zNzUgMi4zNC0uNDU4Yy4wNy0uMDEzLjE0My0uMDMuMjE0LS4wNS0uNTEgMy4wNTYtLjA3IDYuMTg3IDIuMDggOC42MDQtLjEyNi4xMi0uMjQ3LjIzLS4zNzYuMzUtMTAuNjU4IDkuODMyLTMzLjgxNiAzMC4zMjgtMzkuMjM1IDM1LjExMyA0LjIzIDIuNTE3IDguOTU3IDMuNjIyIDEzLjQxOCAzLjYyMmgyOC42NGMuNTg2IDAgMS4xNzcuMDA2IDEuNzcuMDE4IDEuODY4LTEuNyA3Ljc0LTcuMTE4IDEyLjg5Ni0xMS44ODQgMS4yOTItLjI5NCAyLjc0Ny0xLjEzIDMuNTQtMy4yNy4zODgtLjM2Ljc2LS43MDggMS4xMi0xLjA0LjQ1Ni4yOS45NDguNTU2IDEuNTMuNzY3bDEuNzMzLjYyOC42LTEuNzQzYy40MDgtMS4xOC41MTgtMi4zODQuNC0zLjU4OCAxLjIxNi0xLjA2IDUuNjQ1LTQuODM1IDE2LjE0LTE1LjU3My4wODgtLjA4Ny4xNzItLjE4My4yNi0uMjc1IDEuNDIzIDEuNjg0IDMuNDc0IDIuOTgyIDUuNzI4IDMuNDc3bDUuNDk3IDEuMjAzLS44MjYtLjkyYzEuMy4yOSAyLjY5OC4yMzIgNC40LjE1IDIuNzQzLS4xMzggNi4xNTItLjMwNiA3LjYzOCAxLjA0NC42My41OTIuOTk3IDEuMzUgMS4wODQgMi4yNDYuMDk3IDEuMDEyLjI4IDIuODk3LjA3IDQuMjYtLjMxIDEuNzA0LS45NSAxLjcwNC0xLjQyIDEuNzA0LTEuNiAwLTIuNDItLjYzLTMuNTYyLTEuNTE1LTEuNTc3LTEuMTk4LTQuMzgtMi40MjUtNy4wNzQtMS45MzgtLjU4LjEwNS0xLjEuMzEtMS41OTMuNTYtLjA5NS4wNDUtLjE4OC4wOTYtLjI4LjE0Ni0uMTI0LjA3Mi0uMjUuMTQyLS4zNjguMjI1LS40NjUuMzE0LS44OS43MS0xLjI1NSAxLjIyNi0zLjU3NC0uNDY0LTMuOTEgMS41Ni00LjA5NiAzLjI5Ni43MDgtLjY1MiAyLjM1Ni0xLjMxIDMuOTA1LS45ODQuMTkuMzkuMzg2LjczNy42IDEuMDEyLS42ODQuNTU0LTEuMjQ3IDEuMjktMS42MTYgMi4wOS0uMDUuMDgzLS4xMTYuMTY0LS4xNTcuMjQ2LTEuNTUyLjI4LTIuNDk0IDEuNzM2LTIuMzk3IDMuODU1Ljc1My0uNDY0IDIuMDctLjk0NCAzLjE1NC0xLjE3Mi4zNzYuMzI3Ljc1LjYxIDEuMzY2Ljg0MmwtLjAwNS0uMDE4YzEuMjM1LjU2NCAyLjQyNy41MzUgMi45MTUuNTE2LjE5LS4wMDMuMzgtLjAxMy41NjctLjAyN2wtLjIwNC4yOGMtLjAzMy4wMjMtLjA2LjA0Ny0uMDcyLjA1Ny0yLjA2Ny44NDQtMi45NyAyLjg2OC0xLjk4IDQuNzEuNDctMS4wNjcgMS4zLTIuMTMgMi41OC0yLjU3bC45MjMuMjcyYy4yOTguMDk0LjY1NS4yMDUgMS4wNy4yNjUuNzI4LjE2NiAxLjc0My4zNTYgMi42NC4zNTYgMS44MDIgMCAyLjkzLS4xOTggMy45Mi0uNjRsLS43NzUuODFjLTMuOTQzIDMuNzQ0LTkuMDUyIDkuNjczLTEyLjA3MyAxMi4wMTYgMy45OS0uODkzIDguMTIzLTEuMTIgMTIuMDgtMS4xMmgyOC42MzhjMTIuNDEzIDAgMjYuOTA4LTguNDkgMjYuOTA4LTMyLjQyM3YtNDAuMTk3Yy0uMzIuMjEzLTIuMDEzIDEuMjgtMi4wMTMgMS4yOC0uMDM4IDAtNi42MjggNC4wMS0xNC41NDIgMTIuNTM4LTcuOTE2IDguNTI2LTcuNDM0IDcuOTU3LTE0LjM0NiAxOC43Mi0xLjQ5MyAyLjMyNy0zLjQ5MyA1LjAwNy01LjcwNyA3Ljc4My0uMTc2LTEuNTU3LS40MDItMi42MzQtLjczNS0zLjUyNS0uNTM1LTEuNjA3LTEuNTMzLTIuNzYtMy4yMi0zLjY2LTEuNTM2LS44MjUtMy4xODUtMS4xOTUtNC44NS0xLjUyNC0yLjQ0NS0uNTA2LTMuNzUtLjgzMy00LjQwNS0yLjE5My0xLjExNi0yLjI5Ni0uNzEzLTQuNDIyLS4wNi03IDIuMzQ0LjY3OCA0LjU4NiAxLjE3NSA2Ljk5OCAxLjE3NSA5LjY4MiAwIDEzLjExNy04Ljg5NCAxMy4xMTctMTYuNTEgMC03LjMxNy0yLjk0LTEzLjctNS43MzgtMTkuMzczLjI4My0uMjY0LjU2Mi0uNTIyLjg2My0uODA0LjE5Mi0uMDE4LjM3NS0uMDM4LjU5LS4wNDJsLjIxNC4wMTZjNC44NDYtLjA5MiA0LjgwMyAzLjA2NCA0LjMzNCA2LjY0OC0uMzggMy4wNi0uNTY1IDYuNDA1LjQ3IDkuNDYgMS44NCA1LjQ2OCA2LjczNyA0LjA0OCA5LjkzIDcuNTg3LjQ3OC0xLjA0IDEuMDQ1LTIuMTE4Ljk5LTMuM2wxLjM3Mi4yODJjLS4xNDUtMS40MTMtLjA5Ny0zLjEwNy0uNTY3LTQuNDI0bC4zNzguMDVjLS4yOC0xLjg4NS0uNDc1LTMuNzctLjUxOC01LjY5OC0uMzI4LTYuODgyLS44LTguNzItNi4yMTgtMTEuNzgtLjY2LS4zNzItMS4yMi0uNzUtMS44NC0xLjMxNy0uODc2LS44MDItMi40MS0xLjg2LTMuNTQ2LTIuNTMyaC4wMTVjLS4wNjQtLjAzNC0uMTM2LS4wNTQtLjIwMi0uMDg3Ljc1NC0uNzIzIDEuNDgzLTEuNDA2IDIuMTk0LTIuMDYzLjkyNi43NiAxLjg5NiAxLjM2NyAyLjczMyAxLjg4NmwuMDM3LjAyYzIuMzk2IDEuNTAyIDIuNDk0IDEuNDEgMS42OTQgMy44MTUgMi42MzUtLjgwNiA0LjE5NC0xLjYwNCA0LjQ3LTQuOTk1bC43NTMuNDI0Yy4wOTgtMi4wNzUuMTUtMy44MTgtLjYxLTUuODM4bC45OS40MjQtLjQ1LTMuMDYtLjAxNC0uMDljLS4wMy0uMTktLjA2Ny0uMzctLjA5OC0uNTU3IDMuNzA4LTIuODE0IDYuMzMtNC41MSA3LjkzLTYuMDI3di0uMDFNMTAuMDUgMTMyLjUxYzIuOTcuNDQ1IDQuNjI3IDMuMDc1IDUuNTYgNS45OSAyLjE2LTIuOTg4IDMuNzg1LTUuNTQ1IDUuMzYtOC4xMzcgOC4xLTEzLjA5NCAxOC4yMS0yNC44MTIgMzAuODMzLTMzLjYyNiA0LjMzMy0zLjAxIDcuNDM1LTUuMDEzIDE0LjMyLTEyLjI5OC41NDgtLjU4IDEuMzgtMS41NTUgMS45NDYtMi4xMi4wNi4wMi4xMzUuMDUuMjA3LjA3NS0uMjI1LS4xMzgtLjQ0Ny0uMjgzLS42NDQtLjQ1OC0uNzQzLS42NC0xLjE3LTEuNDgtMS4yNjYtMi4zOTMtNC4yNiAzLjczMi05LjQzNyA2Ljg4NC0xNS40MDggOS4zOC02LjY3MyAyLjc4My0xMy4xNyA0LjE5Mi0xOS4zMyA0LjE5MmgtLjI3NmMtNC42MjgtLjA1LTkuMTEzLS43My0xMi45NDYtMS45NjUtNC4yMDItMS4yOS03LjUxMi0zLjExOC05Ljg0OC01LjQ0NS0uNTItLjUyOC0uOTYyLTEuMDg1LTEuMzI2LTEuNjc4bC4wMDggNDguOTk3Yy44NDctLjQ0MyAxLjc3OC0uNjggMi44MDctLjUxMyIgZmlsbD0iIzIzNGI5YSIvPjxwYXRoIGQ9Ik0zNS4wOTQgMTUxLjg3MmMtLjI0NyAwLS40MS0uMDM3LS40OTctLjA4My0uNDEyLS4yMTQtLjYyMi0uODA3LS40OTMtMS40NzUuNzUyLS4yMzYgMS40MTQtLjQyNCAxLjkzLTEuMDM1LjcwNi0uOC41Mi0yLjE3Mi0uMjg0LTIuODc1LS40MjMtLjM3NC0xLjEyOC0uNjYtMi4yNi0uNjYtMS41OTcgMC0zLjc2NyAxLjI3LTUuMzcgMy42NzYtMS4zNjMgMS45OC0yLjMwNiA0LjY1Ni0yLjMwNiA4LjA0OCAwIDMuOTYuNTIyIDkuMDQ0IDMuNDQgMTUuNTQ0IDIuOTE4IDYuNDEgOC4xOTQgMTQuMTMzIDE3LjYxMyAyMy40MSA5LjQxNy05LjI3NyAxNC42NDctMTcgMTcuNTY4LTIzLjQxIDIuOTItNi41IDMuNDM2LTExLjU4NCAzLjQzNi0xNS41NDQgMC0zLjM5Mi0uOTQtNi4wNy0yLjI2LTguMDQ3LTEuNjQ2LTIuNDA0LTMuNzY3LTMuNjc1LTUuNDEzLTMuNjc1LTEuMTMyIDAtMS44NC4yODYtMi4yNjUuNjYtLjgwMi43MDMtMS4zMyAyLjA3NS0uNjI0IDIuODc1LjU2Ni42MSAxLjkyOCAxLjAxNiAxLjkzMiAxLjAzNS4wODUuMzM4LS4wNzcuODctLjI2MyAxLjIxOC0uMTIyLjIyNC0uMjgyLjI1LS40NDMuMzA3LS4xMzIuMDItLjM1LjAyNi0uMzYuMDI2aC0uNjYzYy0uMjA4LjAwNC0uMDc0IDAtLjU1NS4wMDZoLS41Yy0uMzgtLjAwNi0uNzk0LS4wMjgtLjg1Ni0uMDAyIDAtLjAxOC4wMTctLjAyNy0uMjA1LjI2My0uNjYuODc0LTEuMjQ3IDIuNDY2LTEuMjQ3IDIuNDY2LS4wMTUuMDI3LTEuMTgyLS44NS0xLjk5LTEuNDg1LS41NjQtLjQ0NS0xLjg0My0uOTY0LTEuODQtLjk3LS4wMDguMDE4LS43My43NTYtMS4wNjQgMS4zOC0uMzc2LjQ2LS45MSAxLjk5NC0uOTI3IDEuOTk0LS4xMjQgMC0xLjExOC0xLjE3Ni0yLjA3NS0xLjg0My0uMjgtLjE5NC0yLjA4Mi0xLjM0Mi0xLjk3Ny0xLjYxNi0uMTcuNDQ0LS43MjMgMS41MzQtLjcyMyAxLjUzNC0uMjguNjUtLjM5MiAxLjIxLS41NyAyLjI4MmwtMi4xOTYtMS45M2MtLjk0LS40MzgtMS4xOC0uNjUtMS43MjgtMS4wOS0uOC0uNjQtMS0uOTctLjk5My0uOTg1bC0yLjk3LjAwMiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik04OS45NiAxMDQuMTA4Yy0xLjQ1OC40Ny0xLjI3IDEuNDEyLTEuMjcgMi41OTctMS4yNzMtLjYyLTIuNDUzLTEuMzItNC4wNS0uMTkuNDI1IDEuNzM3IDIuMzUzIDEuNjQ0IDMuNjI0IDEuMzY1LS4zNzYgMS45My0xLjg4MyAyLjYzNi0zLjUzIDIuODctMS42NS4yOC02LjMxMi4xNDItNi43ODMtMi4wMjUgMS40NjIuMDk4IDMuNDM2LS41NjYgMy43Ny0yLjE2Ni0uMzM0LS4yNC0uOTQ0LS4zODMtMS41NTYtLjMyOC0uNjYuMDQzLTEuMzE4LjI4My0xLjg4NC43OTYtLjMzLjM3Ni0uNTY2LjY2NC0uODQ2IDEuMDg4LS42MS0uNzEyLTEuMDM4LTEuNTEtMS43NDMtMi4xMjQtLjk5Mi0uODQ0LTIuNDA0LS41MTYtMy4xMS41MjMgMS44MzcuMDQ0IDIuNTkgMS42NDQgMy4zNDUgMy4wMS40MjcuODUgMS40NjMgMy4yNTUgMi42MzcgMy4yNTVoMjIuNzVjMS4yMiAwIDIuMjU0LTIuNDA1IDIuNjgzLTMuMjU1LjcwNC0xLjM2NiAxLjQ1Ni0yLjk2NiAzLjI5Ni0zLjAxLS43MDctMS4wNC0yLjA3LTEuMzY3LTMuMDYtLjUyMy0uNzA3LjYxNS0xLjEzIDEuNDEyLTEuNzg3IDIuMTI0LS4yODctLjQyNC0uNDcyLS43MTItLjg1Mi0xLjA4OC0uNTE3LS41MTMtMS4xNzItLjc1My0xLjgzMi0uNzk2LS42Ni0uMDU1LTEuMjI3LjA4OC0xLjYwNC4zMjcuMzMyIDEuNiAyLjM1MyAyLjI2MyAzLjgxNyAyLjE2NS0uNDY4IDIuMTY3LTUuMTM0IDIuMzA0LTYuODMgMi4wMjYtMS42LS4yMzQtMy4wNi0uOTQtMy40ODQtMi44NyAxLjMyLjI4IDMuMTU4LjM3MiAzLjU3Ny0xLjM2NS0xLjU5OC0xLjEzLTIuNzMtLjQzLTQgLjE5IDAtMS4xODUuMjM0LTIuMTI4LTEuMjc0LTIuNTk3IiBmaWxsPSIjZmNiZDAwIi8+PHBhdGggZD0iTTc2Ljk2MyAxMDUuODU1Yy4xODYuMTM3LjMzLjMyMi40Ny41NTcuMDQ0LS4wNDMuMDktLjA5Mi4xNC0uMTMyLjcwOC0uNzEgMS42NS0xLjA0IDIuNS0xLjA4OGguMzI2Yy45OS00LjM3NyA0LjUyMi00Ljg5NiA4LjI5LTQuNDJ2Mi42OGMuNDI2LS4yMzYuODkyLS4zOCAxLjI3LS4zOC40MjIgMCAuODUuMTQ0IDEuMjc0LjM4di0yLjY4YzMuNzE3LS40NzYgNy4yOTUuMDQzIDguMjQgNC40MmguMzI4Yy44OTUuMDQ4IDEuNzg4LjM3NyAyLjU0NSAxLjA4OC4wNS4wNC4wNS4wOS4wOTcuMTMyLjEzNy0uMjM1LjMyNy0uNDIuNDctLjYxLTIuMTY4LTYuMTItNC4wMDUtNy42MjctMTAuNTAzLTcuODEzLS41NjMuNzA3LTEuNDYgMS4xMjctMi40MDIgMS4xMjctLjk0MyAwLTEuODMzLS4zNzctMi40NS0xLjEyOC02LjU0Mi4xODUtOC40MjggMS42OTMtMTAuNTk1IDcuODY1IiBmaWxsPSIjZmNiZDAwIi8+PHBhdGggZD0iTTg3Ljc5NiA5NS45NjNjMCAuNTY2LjI4IDEuMTMuNjYyIDEuNTEuMzc1LjM3NS45NC42MSAxLjU1Mi42MSAxLjE3NyAwIDIuMTItLjk0MyAyLjEyLTIuMTIgMC0uNjE0LS4yNDItMS4xOC0uNjE2LTEuNTU2LS4zNzgtLjQyLS45NDMtLjY2LTEuNTA0LS42Ni0xLjIyOCAwLTIuMjE0Ljk5LTIuMjE0IDIuMjE2TTg5LjQ5IDkyLjA1NWMwLS41MjItLjQyNy0uOTQzLS44OTgtLjk0My0uNTE2IDAtLjk0LjQyLS45NC45NDMgMCAuNDY0LjQyNC44OTcuOTQuODk3LjQ3IDAgLjg5OC0uNDMzLjg5OC0uODk3TTg5LjA2MyA4OS42MDRjMCAuMjgzLjA5NS41Mi4yODUuNzEuMTQyLjE0LjMyNy4yMzMuNjEyLjIzMy41MTcgMCAuODktLjM3Ni44OS0uOTQzIDAtLjIzMy0uMDg4LS40MjMtLjIzMi0uNjEtLjE4Ny0uMTQ1LS40MjMtLjIzOC0uNjU4LS4yMzgtLjUyIDAtLjg5Ny4zOC0uODk3Ljg0OE05MS4zNyA5Mi45NDdjLjQ3MiAwIC44OTgtLjQyNC44OTgtLjg5MiAwLS41MjItLjQyNi0uOTQzLS44OTctLjk0My0uNTE0IDAtLjk0LjQyLS45NC45NDMgMCAuNDY4LjQyNi44OTIuOTQuODkyTTk4LjkxNCAxMzYuNjg1Yy4wMjggMy45MzggMS41NTUgNi41OCA0LjIxIDcuMjY3LjY0NS4xNTMgMS4yNy4yMDcgMS44NzIuMjYgMS4yNi4xMDUgMi40NTIuMjA1IDMuNzcgMS4xNy42MTIuNDEzIDEuMTUyLjk0MiAxLjczNyAxLjY5OC43MTItMi41Ny0uODQ0LTYuMzkzLTQuMTAyLTcuODMzLS4yODUtLjEyNC0uOTEtLjI2Ni0xLjg2LS40Mi0xLjcyNC0uMjk1LTQuMjktLjczOC01LjYyNi0yLjE0Mk05OS4xNTggMTMwLjk1NmMtLjIwNy45MDUtLjIzIDEuOTQtLjA1NiAyLjgwNS41MTMgMi41MjUgMi41MDUgMy4wMSA1LjcxMiAzLjU5Ni45NTQuMTU2IDEuNjcuMjg3IDIuMTkuNTMgMS42My42OCAyLjc2IDEuOTg1IDMuNDQgMy4wMSAxLjQ2NC0yLjQ4NS0xLjAyNy00Ljk1Mi0yLjE4Mi01LjkxLTEuMzQ3LTEuMjk3LTIuNzgtMi4wMi00LjgwNC0yLjQyNWwtLjA0LS4wMDdjLTEuNDQ1LS4yNzgtMy4wOC0uNTk0LTQuMjYtMS41OTdNOTguODIgMTI1LjExM2MtLjEzLjQ4Mi0uMTkgMS4wMjYtLjE5IDEuNy4xOTUgMi45NjQgMi44NTYgMy44NDYgNS4xNSA0LjI4MiAyLjIzLjQ0NiAzLjkzIDEuMzEyIDUuNTE3IDIuNzk3LjEzLjEzNi4yNS4yNjcuMzY3LjM5Ny4xMDcuMTE4LjIxMi4yMzQuMzI3LjM1LjUwNy0xLjI1Mi40NDItMi41NC0uMTg3LTMuNzM2LS45NjQtMS44MzUtMy4yNy0zLjM4NC01LjczMy0zLjg1Mi0xLjY0NS0uMzA3LTMuODgtLjcyLTUuMjUtMS45NE05OC43MDQgMTIwLjc3NWMtLjAyMi4yMTctLjAxNC40MzYuMDIzLjY1My4zMjIgMy4xMTMgMi43NzUgMy41OTcgNS42MTIgNC4xNTcgMi4zNy41NjggMy43MjMgMS4xMzQgNS4zMzMgMi45MzYuMjY0LTEuNzkyLS4wNi0zLjI1LS45NjItNC4zMzMtMS4wNC0xLjI1LTIuODQ4LTEuOTUyLTUuMDktMS45ODMtMS40MzQtLjA0NS0zLjA1LS4wOTMtNC45MTYtMS40MyIgZmlsbD0iI2ZjYmQwMCIvPjxwYXRoIGQ9Ik03NC44NDIgMTQ0LjgwNGMxLjM3LjY2IDIuOTIuNzA4IDQuMS0uMTkgMS43NCAxLjMxOCA0LjE0IDEuNjUgNS42NS4xOSAyLjE2MyAxLjkzIDUuNjA2IDEuNDEyIDYuNTktMi4zNTYtMS4zNiAxLjYtNC42NTYgMy4zNDMtOC4yODYtLjcwMy4xODcuNzk1LjQ3IDEuNTQ3Ljg0NyAyLjExNi0xLjgzNy41NjQtNC4zMy4yODUtNi43MzItMi40MDMuMTM4LjgwNC40NjggMS41MDguOTQzIDIuMTI0LTEuMDg2LjI4LTIuMzYuMTQtMy44NjItLjk5LS4xOS0uMTktLjE0My0uNTE4LS4xNDMtLjhsLjQtMi4yOS0uNC0xLjYyIDEuNzQtLjcwM2MuMTkyLS4zMzcuMzMzLS44OTguNjYyLTEuMTMyLjMzMi41NjYuNzUyIDEuMTMyIDEuNDEyIDEuMzYyaDIuMDI1Yy4yODUtLjcwOC42MTItMS4wODMgMS4yNzMtMS40MTUuMTkgMS4wODguODAyIDIuMDMgMS42NDYgMi42NCAxLjY1IDEuMjI0IDQuODA1IDEuMjI0IDYuMjItLjQyLjk4Ni0xLjEzMi43MDUtMy4zNDguMzMtNC43MS0uMjM3LS44LS42NjItMS41MTMtMS4yNzQtMi4wMy0uNzU2LS42MS0yLjAyMy0xLjQ1My0zLjE1NS0yLjAyNC0yLjU0NS0xLjE3Ni0zLjU3Ny4xOS02LjA3LjYxMy0xLjg0LjMzMy0zLjk2LjIzNi01LjU2Mi0uNDIzLS4wOTYgMC0uMjM2LS4wOTMtLjQyNy0uMTQtMS41NTItLjYxMi00Ljc1My0xLjg4NS00LjE4OC02LjA3MyAxLjAzNC0uMDk2IDEuNTEtLjQ3NyAxLjg4NC0xLjI3My0xLjY5My4yMzUtMi45NjYtLjcwNi0zLjAxNi0yLjM1NyAxLjYwMy0uNDI0IDUuNjA2LTEuNDEzIDUuOTM2LTEuNTU2IDEuNjk1LS42NTQgMy41NzctMi43MjggNC45OS0zLjkwNGgyMy42OWMuOTQ1LTEuMDg0IDEuNDYtMS4zNyAyLjU0Ni0xLjE3Ni43OTYuMDkyIDEuNi4zNyAyLjQ0Ni41NjItLjA1IDEuNTA3LTEuMjc0IDMuNzE3LTIuNzMgNS4wODgtMS42MDUgMS40Ni00LjYxNSAxLjMxMy02LjAyOC0uMzMyLTIuOTY3IDEuODg4LTcuMDIgMi4wMjUtMTAuMjY2LjY2LTEuMTMtLjUyLTIuMTY4LTEuMTc3LTIuNzgtMS45NzctLjA5Ni0uMTQzLS4zOC0uMjQtLjUyLS4xODctMi4wNy40Mi00LjMzMy41MTItNi40MDQuNTEyLS41MTQgMC0uNjEuODUtLjEzOC45OWwyLjgyNS45NDhjLS4xOSAxLjM2LjUxNiAyLjgyIDEuOTI4IDMuMzM4IDIuNTQ0Ljg5NSA1LjkzNi0uMDQ4IDguMTQ2LTEuMzE2LjE0NC0uMDkzLjI4NC0uMTkuMzMtLjM4IDEuODgzLjE5IDQuMTQzLS4xODcgNS45MzctLjk0My0uMDk1LjQ3NS0uMDk1Ljk0My0uMDUgMS40Mi4wOTQuNzA0LjI4NCAxLjM2My41NjUgMi4wMjUtLjQ3IDEuMDMtLjcwNyAyLjIwNy0uNjEgMy4zNC4wNDQuOTQyLjMzIDEuODgzLjg5NCAyLjY4My0uNTY1IDEuMTg3LS43MSAyLjg4LS40MjQgNC4xOTctLjcwNyA0LjQ2Ni4xODYgMTAuNzM4IDUuNTA4IDExLjYzIDEuNjUzLjI4OCAzLjE1Ni0uMDQ4IDQuNzEzIDEuMDg0Ljg5NC42NiAxLjYwMiAxLjU1IDIuMjU1IDIuNjgzLjMzNiAxLjUwNC4wNTQgNC4xLS4yNzggNS41MTMtLjEzNy41NjctLjA1IDEuMDguMTQzIDEuNTUyLjQyMy44OSAxLjMxNyAxLjQxMiAyLjMwMiAxLjQ1Ni0uNjA2IDMuNzIzLTYuMjE0IDMuNTM3LTcuNTc4LjI0LTEuMDM3LTIuNTUtLjg1LTcuMzktNC44MDUtNy44NjQgMi4zNTUuODkzIDIuODY3IDUuMjI3IDMuMjA1IDcuNTguMTg0IDEuMzYgMS4yMjMgMy4wMTUgMi4wNyAzLjUzMi0xLjE3NyA0LjE0NC03LjQ0IDIuNTkyLTguMDUyLS45ODUtLjQyMy0yLjY4OC43OTgtNy4zMDItMi45Ny04LjY2NyAyLjA3NCAxLjQ2MyAxLjQxOCA1Ljc0NCAxLjQxOCA4LjE5My0uMDUzIDEuNDYgMS4yMiA0LjI0IDIuOTE3IDQuNDc1LTMuNDg4IDIuMTItNy4zNDYuNjEtNy44NjctMy41OC0uMjg2LTIuNjg1Ljg0Ni03LjYyNS0yLjkxNy05LjA0NCAyLjExNiAxLjQ2NCAxLjM2NCA2LjE3MiAxLjM2NCA4LjUyNS0uMDQ2IDIuNDUuNDcgNC4xOSAxLjU1MyA1LjAzNS0zLjA2IDIuNDA3LTYuOTctLjc5NC02Ljk3LTQuNTE3LS4wNDgtMi42MzggMS41NTQtNy41MzgtMi4xMTgtOS4yMyAxLjk3OCAxLjY1Ljg5IDYuMjE3LjYxIDguNjYzLS4yMzMgMi41NDMuNDI2IDQuNDI3IDEuNjA0IDUuNDY3LS43NTcuMzc0LTEuNjUzLjQ3Mi0yLjU0NC40MjQtMy4wNjItLjMzLTUuNTU2LTIuNTk1LTUuNTU2LTUuODkgMC0yLjYzNSA0LjI0LTcuNzIuNjEtOS40NjMgMS45NzggMS42NS0xLjkzMiA2LjQwMy0yLjE3IDguODU4LS4yMzMgMi4yMDYuNDczIDMuODYgMS40NiA0Ljg5Ni0zLjQ4Mi42MS01LjkzMi0zLjk1My01LjkzMi02Ljg4IDAtNC40MjIgMS42OTgtNi4zMSAzLjItOC4wMDMuMTQ2LS4yMzYuMzMtLjQyMi40MjYtLjUyLjgwMi0uODk2IDEuMjI4LTEuNzg2IDEuNDEzLTIuNzMuMDk1LS40Ny4wOTUtLjk0Mi4wOTUtMS40MTMiIGZpbGw9IiNmY2JkMDAiLz48cGF0aCBkPSJNNzQuODkgMTM1Ljk5NmMuNTE2LS45NCAxLjA4LTEuMzE3IDIuMTE4LTEuNi4yODYuNjEuNTE3IDEuMjI0Ljk4NyAxLjY5M2guOTQyYzIuMjE2LTMuNDQgNi43ODQtMS4wMzUgOS4yMzMuODAzLjcwOC0yLjQ5OC0xLjM2Ny0zLjU4LTMuNDgzLTQuMTQyLTUuNTYtMS40NjMtOS41NjIgMS43MzgtMTQuNjk4IDEuNzg2LTEuOTMgMC0zLjQ4Mi0xLjQxNS0zLjM0Mi0zLjQzNS0xLjgzNy45NDMtMS4zNjYgMy4yNDcuMDQ2IDQuMzggMi41NDYgMS45OCA1LjUxIDEuMjY4IDguMTk1LjUxNk04OS45NiAxMjAuODMzYy0uNzUzLS4xNC0xLjU1My0uNDI4LTIuMzA2LS43NTYtMS4yMjUtLjUxOC0yLjMxLTEuMTgtMy4wNjItMi4wMjUtLjE0MiAwLS4zMjguMDQ4LS41Mi4wODguMzc4LjUyNy41MiAxLjE4NS41MiAxLjg0NCAwIC42NjMtLjE0MiAxLjIyNS0uNDI0IDEuNjQ1LS4wOTYuMTQ2LS4xNDMuMjM0LS4yMzcuMzMgMi4wNzYuMzMzIDQuMTQ1LS4xODQgNi4wMy0xLjEyN002Ny43MyAxNjkuNzE3YzEuMzY4Ljc1MyAyLjMxIDEuNTA0IDMuNzIzIDIuNzgyIDEuMzE4LTEuMTMyLjQ3LTEuOTM0LS4yMzctMy43NzMtLjU2NS0xLjUwNy0xLjEzMi0zLjE1NS0uOC00Ljg1LS4zNzYtLjM3Ni0uNzA4LS44LTEuMDM4LTEuMjctLjI4IDIuMTE4LS44MDIgNC40Ny0xLjY1IDcuMTEiIGZpbGw9IiNmY2JkMDAiLz48cGF0aCBkPSJNODAuNCAxNzcuMTU2YzAtLjI4IDAtLjYxLjA0NS0uOTg2LjI4NS0yLjQ1IDEuOTM0LTUuNTU0LS4wNDQtNy4yMSA0LjUyNSAyLjIxNy0uMjM1IDguMTk2IDIuODc1IDExLjY4My41MTcuNTY4IDEuMjIzLjk0MiAyLjAyNSAxLjE3OCAxLjgzMi40NzUgMy4zNC4xOTIgNS4wODMtLjE4NS0zLjU4My0zLjExLjk4OC0xMC41MDctMi4yMTMtMTIuNzY0IDUuMTggMS45NzUtLjI4IDguODA3IDQuMjg4IDExLjgyMiAxLjkyOCAxLjMyIDMuMzkgMS40NTcgNS4yMjYtLjE4OC0uOTQyLS42MS0yLjEyLTIuMzUyLTIuMTItNC4xLjA0NS0yLjQ1IDEuMzY4LTUuOTc3LS44LTcuNDQzIDMuNzY3IDEuNDEzIDEuODgzIDUuMjM0IDIuMzUzIDcuOTYuNDczIDEuODg0IDEuMzIyIDIuNDA3IDIuNDA0IDIuNjg1IDIuNDUuNzA3IDMuMi44NSA0Ljc5OC0xLjQ1My4xOTYtLjI5LjM4LS41NzIuNTIyLS43NTctMS4zMTctLjQyNS0yLjM1My0yLjkyNC0yLjM5Ny00LjI4OC0uMDQyLTIuMzA3IDEuNTUyLTUuMjc0LS42NjMtNi4xMjUgMy40NC40MjYgMS44ODQgMy4zNDcgMS45ODIgNS43MDMuMTQyIDIuOTE4IDIuNjM0IDQuNDIyIDUuNDEgMy40ODUuNTIzLS4xOTIgMS40MTgtLjQ3NCAxLjE4LTEuMjI1LS4xODgtLjc1LTEuMDgtMS42NDYtMS4zNjQtMi4yMS0uNTY2LTEuMjI2LS4yMzgtMS45MzUuMjgzLTMuMDE4LjQ3LTEuMDg0Ljk5Mi0yLjMxIDEuMTI4LTMuNDg4LjI4OC0xLjU1My0uNTE4LTIuNzMtLjgtNC4xNC0uNzUuMDUtMS42LjA1LTIuNTQyLS4wOTYtLjg0NSAzLjM0Ny0zLjk1NyA0LjE5LTYuODc2IDMuMjQ3LTIuMDcyIDEuNy01LjY1IDEuOTg0LTguMDUyIDEuMTc1LS44OTguODEtMi4wMjYgMS4xMzctMy4xNTggMS4xODUtMS4zMTYuMDkyLTIuNjg0LS4yODMtMy42Ny0uODA1LTEuMjc0Ljg0OC0yLjczNCAxLjA4OC00LjE5NC45NDItMS43NDItLjEzNy0zLjQ4Ny0uOTQyLTQuNDI0LTEuNzg2LS41Mi4xODUtMS4wNC4yOC0xLjU1Ny4yOC0uOTkgMC0yLjAyNi0uMzIzLTIuOTY3LS44OS4wOTYuOTQzLjQ3IDEuODg0LjgwMiAyLjc3My45NDMgMi42NCAxLjc5IDQuMDU1LS43NTYgNi4wOC0uMzMyLjg5Mi0uMzMyIDIuMDczLjM3NiAyLjgyNi40Ny40NjggMi41LjI3NiAzLjgxNi43IDEuNDE0LjQzMiAyLjYzNi4xNDMgNC4wMDUtLjU2NE0xMTIuMDQ4IDE1My4zM2MtLjA5Ny42MS0uMTkgMS4yMi0uMzI4IDEuNzg2LS4wOTYuODUuNTEzLjg5NSAxLjIyNy43NTIuNTE2LS4wODggMS4xNy0uNDY4IDEuNDEtLjcwMyAwIDMuMzQ0LS44NDUgNS42MDMtMy4wNjUgNi41LjE5IDEuNjk0IDEuMjczIDIuNTkyLjk0IDQuOC0uMjI4IDEuMzY4LS43NSAyLjc4LTEuMzE1IDQuMDEtLjggMS42OSAxLjIzIDMuMjkzIDEuNTU2IDQuNzUzLjQyNC0zLjI1IDIuMzA4LTUuNTU3IDQuMTQ3LTcuNzY4IDIuMTYyLTIuNjQgMi45Mi00LjI4NyAzLjg2Mi03LjQuNzAzLjk0MyAxLjMxNiAxLjY5MyAxLjc0IDIuNzggMS41NTMtMi45MiAyLjIxMy01Ljk3NiAyLjUtOS4wOSAxLjA3NyAxLjQ2NSAxLjY0NSAyLjM2MiAxLjk3MiA0LjE5MyAxLjQxNS0yLjY4IDEuOTgtNC42MTIgMi4xMjItNy41ODQuNzUyLjggMS4zMTcgMS4yNzIgMS42OTMgMi4zNi40My0uODk3LjgtMS43OTYgMS4wODctMi42OS42NTYtMS44ODcuOTg4LTMuNzcgMS4xNzQtNS43NDcgMS45MzMtLjg5NCAzLjgxNy0xLjc5IDUuNTYyLTMuMDEgMS4zMTctLjg5NCAyLjQ1LTEuOTM0IDMuMzg4LTMuMTU0LTEuNDE1LTEuMzcyLTQuODAzLTQuNzE1LTYuNjQzLTYuNS0uMjM0IDEuMjItLjk4NiAzLjEwMy0yLjExOCAzLjcxNi0uMzc1LjE4Ny0uNzA3LjM3Ny0xLjA4Mi0uMjgtLjM3My0uNzEgMC0uOS4zMjUtMS4wOS45NDYtLjUxMyAxLjQxNi0yLjU4NiAxLjQ2LTMuNzE4LjA1LS45NDMgMC0xLjk3Ni4xNDItMi44Ny4xNDItLjcxMy40MjMtMS41MS0uMjc4LTEuOTc3LTEuNTUzLTEuMDgzLTIuMzYuOTQzLTMuMzA0IDIuMDItLjY1NS44MDctMS41OTcgMS44NC0yLjI5OCA0LjI4Ny0uMjkuODUzLS41MjYgMS41NTctLjcxIDIuMTctLjgwNiAyLjA3NS0xLjYgNC4wNDctMi4zNTYgNi4xMjZsLS4yMzYuMzI2Yy0uOTQyLjg5Ny0xLjkyNyAyLjExOC0zLjExNCAzLjQ4LTIuMzk0IDIuODc4LTUuNDEgNi40MDctOS40NjIgOS41MiIgZmlsbD0iI2ZjYmQwMCIvPjxwYXRoIGQ9Ik0xMzIuNjc3IDEyMy41MTZjLjMzLS41NjQuNjYtLjk5MyAxLjA0LTEuMzE2Ljc5NS0uNzA4IDEuNzQyLS44OTcgMi43NzUtMS4wNC40Ny0uNjEgMS4wODQtMS4xNzUgMS43NDQtMS42LjcwNy0uNDczIDEuNDYtMS4wODQgMi4xNjctMS42NDVsLTIuODc1LTMuMjA3Yy0xLjQ2IDEuODg1LTMuMDYgMy42NzItNC44MDcgNS4zMi0zLjEwNi0zLjM4Ny02LjE2Ny02LjczMy05LjI3Ni0xMC4xMjUtMTMuMDQ1LTE0LjMxLTE5LjIxMy0yMS4wNS0yMy40MDctMjQuNjc1LS45ODYtLjg1LTEuOTI4LTEuNjA1LTMuMDE1LTIuMzEzLjYxNCAxLjEzMiAxLjMyMyAyLjE3MiAyLjAzIDMuMjA2IDIuNTg2IDMuNjc1IDYuNDk2IDguMjQ0IDE0LjE4IDE3LjI4MyA1LjQ1NyA2LjM2MiAxMC45MjQgMTIuNzcgMTYuMzM2IDE5LjE3Mi0yLjA3IDEuNzg4LTQuMTkyIDMuNDM2LTYuMzYgNS4wODZsMy4yMDIgMy40OGMuODA2LTIuNjggMS44ODQtMy44NTUgMi42MzctNC43NDggMS4xOC0xLjMyIDIuMjItMi44MyAzLjYzLTIuODc2TTEzNS42IDEyNC4xNzZjLS4wOTcuMzMyLS4xNC43MDctLjI0IDEuMDM1LjI4My43NTMuMTQzIDEuNjUgMCAyLjQwMi0uMDk3LjU2NS0uMTQgMS4wNC0uMTQgMS42MDcgMS4wODQgMS4wMyA3Ljc3MyA3LjU3NiA4LjQ4IDguMzMyLjA0NS4wNDQuMTg3LjA0NC4yOC0uMDUzLjQ3My0uNDY0Ljk5LS45ODcgMS41NTUtMS40MS4xMzgtLjA5NC0uMTg4LS41NjctLjYxNS0xLjA4NS0uOTQuMjktMS44ODMuNTY2LTIuODI1Ljk0My0uNjU4LTEuNTUzLS43NS0zLjM0NC0uNTE2LTUuMDM3LS43NTMuMzI3LTIuMzEuOC0zLjA2IDEuNDEtLjMzMy0xLjU5NS0uMjQtMi43NzYgMC00LjMyOC0uODUuNTEzLTEuNyAxLjA4NS0yLjQ1IDEuODM2LS41Mi0xLjgzNi0uNjEtMy43NjguMjgyLTUuNTA3IDAtLjA5NS0uMzgtLjA5NS0uNzUzLS4xNDRNMTQ1LjE1NiAxMjguMzY0Yy0uOS42NjQtMS45NzIgMS44ODQtMS45MjggMy4wMTYuMDUuODQ1LjcwNyAxLjU1NiAxLjUwMyAxLjc0LjY2LjEgMS41NTgtLjc1IDIuMDMtMS42IDEuNDEyLTIuNTktMS42MDQtMy4xNTYtMS42MDQtMy4xNTZNMTQ0LjEyNSAxMjcuMDk1Yy4zMjgtMS42NDQtLjA1My0yLjc3OC0xLjY5OC0zLjAxNi0xLjE4LjM3Ni0xLjk4MiAxLjkzNi0yLjI2MyAzLjEwOC0uMTg3LjY2LjE5MyAxLjA4OC42MSAxLjYgMS4xOCAxLjI3NSAzLjExMy0uMzggMy4zNS0xLjY5M00xNDAuODcgMTIyLjc2Yy0uOTM4LTMuMzktMy44Ni0uNTY0LTMuNDQgMS43OTIuMjQgMS4zNjcgMS4yNzQgMS44NCAyLjEyMy41NjcuNDc1LS43MSAxLjEzMi0xLjc0NSAxLjMxOC0yLjM2TTk3LjAyNSAyMTEuNjgzYzEuMTc2LTIuNDA3IDIuODc0LTQuNTcyIDQuMjM4LTYuNjktMS43NC00Ljk0NS00Ljc1NS03LjQ4OC03LjM0NS05LjIzNC01LjEzNiAyLjAzLTEwLjg4MyAyLjkyMy0xNi40NDMgMy41MzYtNS41NTUuNjA4LTEwLjgyNCAxLjY0NS0xNS4xNjIgNS43ODgtMi40NSAyLjM1Ni00LjI4NiA1LjU2My00LjYxNSA5Ljk5IDEuNjkzLS4zMyAzLjM0Ni0yLjI2MyA0LjQzLTMuNTg0LTIuMzEgNC4wMDctMy43MjQgOS45MzguMjMyIDEzLjM4My44MDQtMi4zNi0uMzc1LTQuODU0IDIuNTQ2LTYuNzM4LTEuMTMyIDIuNDk0LS45NCA1LjUwOC45NDMgNy41MzUgMi4zOTggMi41OSA2LjY4NyA0LjA0NSA4LjAwNCA3LjI5NS4yOC44MDUuNTE4IDEuNjk4LjU2NSAyLjU5NXYtLjA0N2MuMTg2IDIuOTE4IDAgNi45Mi0zLjg2MyA2LjkyLTMuNDg3IDAtMy4zMDItMS41MDQtNC45LTMuMjk0LTEuODgzLTIuMDc1LTQuNzUyLTIuNjQzLTcuNTM1LTEuODQuNjYgMS42OTIgMi43ODMgNC4wMDUgNC4zMzUgNC43NTYtMi4wMjMgMi42NC02LjAyOC0zLjc2LTkuNjU0LjE0MyAxLjc4OCAyLjY4NyA2LjI2MiAzLjM0IDkuMTM0IDMuMTU2LS4yOC44OTItMi40OTYgMS4zNjUtNC43NTYuOTQtMS42OTMtLjI4LTIuNTQ1LS41NjQtNC4wOTcuNzUyIDIuMjE0IDEuNzQ0IDUuMDQgMy4wNiA3Ljc3IDEuODQgMS43NDUtLjc1NiA0LjA1My0xLjM2NSA3LjQ0LS4zMzItMi42MzUuMTkyLTQuOTQyLjA5NS01LjMxNSAzLjA2IDIuOTE2LS4xODUgMTAuOTIzLS42NTYgMTMuMTgtLjY1NiAyLjU0NCAwIDMuMjk2LTEuOTMgMy41MzQtNC4wMDIuMDQ4LTEuNy0uMjgyLTMuNzItLjU2My01LjM3NCAxLjU5NyAyLjM2IDIuMjYgNC43NiA1LjEzNCA1Ljc5NiAxLjMxNy0zLjgxNS0xLjEzMy03LjMtMy44MTctOS43NSAxLjY5OC4zMyA0LjI4NyAxLjQ2NSA1LjIyOCAyLjExOC0uNzEtNC45OTItNS41MTMtNC45OTItNi4zNi04LjMzNiAxLjQ2Mi42NjQgNC4xOSAxLjc0MyA1LjIzIDMuMy4xOS0xLjU1Ny0uNTItNC4wNTYtMS42OTQtNS4xMzUtMS43ODgtMS42LTQuOTQ3LTIuNTQtNC45NDctNS40MTcgMC0zLjY3MyAxLjY5OC02Ljc3OCA1LjI3Ni05IDMuMTUzLTEuOTcgNy43NjctMy4yIDEzLjg0NS0zLjQ3N00xNTguNzE2IDE5OS4zNDNjLTEuMzYtMi45NjctNC4yMzYtMy4yOTgtMy45MDQtNi45MjcuNDc1IDIuMTY3IDMuMDYgNC4wNSA1LjA0IDQuOTkyLS4wOTYtMS4xNzUtLjU2OC0yLjExNi0xLjI3Mi0zLjA1Ny0xLjUwNS0xLjk4Mi0zLjMzNy0yLjk3LTIuNTg3LTguMTQ3LjE4NyAzLjE1MyAyLjY4MiA1LjkzIDMuNjI3IDYuODcyLjA5Mi0uMjMtLjE5Ni0zLjE1NC0uMTk2LTMuNjIyLS4yOC01Ljk4My0uMzI3LTcuNDktNS4yNy0xMC4yNjgtLjc1LS40MjUtMS40MTQtLjk0Mi0yLjEyMi0xLjU1Ni0xLjc4Ny0xLjU1NC0zLjQzNy0yLjczLTUuNjk1LTMuMTU0LTEuODg0LS4zMy0zLjU4Mi0uMjgyLTUuNDIyLjMyLjM4LjgxMy43NiAxLjY1NyAxLjE4NCAyLjUwNS44OTMtLjI4IDEuNzg3LS4zNzUgMi43MjctLjM3NSA2LjE3LS4wOTcgNi43ODUgMy45NTggNi4yMTcgOC43MS0uMzMgMi43OC0uNTY1IDUuODg4LjMzMiA4LjYxNyAxLjIyIDMuNjI4IDQuNDI0IDMuNjI4IDcuMzQgNS4wOSIgZmlsbD0iI2ZjYmQwMCIvPjxwYXRoIGQ9Ik0xMTAuMjE0IDIyOC42MzJjLTEuMTMzLTEuMjItMS43NDgtMy4xMDUtMS40NjQtNi4xMTUtMS41MDQgMS44MzUtMi4zMDUgNC45ODcuMTQ2IDcuNzItNC41MjUtLjk5LTguODU0LTYuMzE0LTQuNDI3LTEwLjUwMi0yLjI2Ni4yODQtMy4zOTcgMi42ODQtNC4zODMgNC40MjUtMS44ODQtMy4wMS0uODk1LTcuMDYgMi42ODQtOC41MjQtMS44MzgtLjQ3NS00LjE0NCAxLjQxMy01LjAzNyAzLjE2LTEuMDg3LTQuNjY0IDIuMDctOC42MjMgNC41Ny0xMi4xMDcuNjEtLjg1IDIuMzAzLTQuMTkzIDEuMzYtNC45NS0uNDE4LjcxLS43OTggMS4yMjYtMS4wNzggMS41NTYtMS45OC00LjY2My00Ljg1Mi03LjM0Ny05LjMzLTEwLjA3Ni0yLjg3My0xLjc5My01LjIyNS00LjA1LTcuNjI2LTYuNDYtLjY2Mi0uNjU1LTEuMzE4LTEuMjY1LTEuOTgtMS44My0uNzA1LS43MS0xLjg4Mi0xLjk4Mi0zLjMtMy41MzQtLjU2My0uNjU1LTEuMTctMS4zMTgtMS44OC0yLjA3LjYxMi0uMDUgMS4yNzMtLjE0MyAxLjg4LS4zMy4zOCAxLjE4LjkwMiAyLjEyMyAxLjU1OCAyLjg3NC44Ljg0MyAxLjc0MyAxLjQxIDIuOTIgMS42OTYgMi40LjcwNSA0LjQyNCAwIDYuNDAzLS4yODYuODk4LS4xNDcgMS43NDQtLjE0NyAyLjY0LjA0OCAxLjQxMi40MyAyLjY4Ny44IDQuODk0LTEuMzIuNTcyLS41NjggMS4xODQtLjQyIDEuODQtLjI4IDIuNjQuNjYgMy43MTQtLjM4IDUuMjI4LTIuNTQ1LjIzOC0uMzc4LjQyMy0uNjYyLjU2NS0uODQ3IDEuMTMyLjE4NSAzLjExLS4zMjcgMy4zNDQtLjQ3MiAxLjYtLjUxNyAyLjM1Ni0xLjA4IDIuNjM1LTEuNjk0IDAgLjE4NS0uMDQzLjQyNS0uMDQzLjYxNCAwIDEuNzg4LjYxIDMuOTU3IDEuNTU2IDYuMDMyLjk5MiAyLjIwNyAyLjM1MiA0LjMzIDMuODYgNS45NzUgMi45MiAzLjI1IDUuMzcgNi4wNzUgNy4yMDUgOC45IDEuNzk0IDIuNzgzIDMuMDEzIDUuNjUzIDMuNTI2IDkuMTg3bC4yODguNTE3YzEuNTUgMS42IDQuMTk3IDIuMDcyIDYuMzEgMi4wNzIgMy44MTcgMCA2LjE3My0zLjM5IDYuMTczLTYuOTIgMC0yLjY5LTEuNTEtNC45NDctMy4yNTMtNy41NC0yLjAyNi0zLjEwMi00LjM3OC02LjYzNi00LjM3OC0xMS42MyAwLTEuNTYuMjMzLTIuODI0LjcwNS0zLjg2NC4zMjgtLjY1NS43MDgtMS4yMTggMS4yMjYtMS43NGwxLjYwNyAzLjU3N2MtMS44NCAzLjYyMy4wODggNy41OCAyLjI1NSAxMC42OSAxLjM2NSAxLjkzNyAyLjg3MyAzLjc2NyA0LjI4OCA1LjY1LjU2OC0zLjI5NC40MjUtNC45OS0uNjE1LTguMTkzLS45OS0zLjI0Ni0yLjY0LTYuMzY0LTQuMjQtOS40NjYtMi40OTMtNC44NTItNC45NDItOS42NTMtNC45NDItMTQuNTEgMC02LjE2NCAzLjg2Mi0xMS44MTcgMTAuNS0xMS44MTcgMy4yOTQgMCA4LjQ3OC4xOSAxMS4xMTggMi40OTMgMi42MzcgMi4yNjUgMy40NCA0LjkgMy45NTMgOC4yNDctLjUxNC0uMzc3LTQuMDQ1LTIuNzgyLTQuNDI2LTUuNDY2LS40NjggMi44Ny43NTMgMy44NjQgMS45OCA0LjkgMi4zNTQgMS45MjcgMi4xNjggMy4yNSAyLjI2IDYuMjYtMS43OS0yLjQ1LTUuMDg0LTMuMjk0LTUuNTU2LTYuOTY3LS44OTMgNS41MTQgNi44NzUgNi41OTMgNC40MjcgMTAuOTI2LS41NjgtLjgtMS41OTctMS40MS0yLjc4NC0yLjE2My0yLjM1Mi0xLjQ2My01LjUwOC0zLjM5Mi01LjUwOC03LjU4IDAtMy4wMTQtLjQyLTQuODk4LTEuMjY0LTYuMDgzLS45OS0xLjI3LTIuMzU2LTEuNjQzLTQuMjQtMS42NDMtNC45IDAtNy45MSA0LjUyMi03LjkxIDkuMDQgMCA0LjE5MyAyLjE2NiA4LjY2NCA0LjU2MiAxMy41NjggMi45MiA1Ljg4NSA2LjEyIDEyLjM4IDYuMTIgMTkuNzI2IDAgNy4wNzItMy4wNiAxNC42OTUtMTEuMyAxNC42OTUtMi44NjcgMC01LjU1Ni0uNzk2LTguMjktMS42NDYtLjg1IDMuNDQtMS45NzYgNi41OTMtLjI4MyAxMC4wNzggMS4wODcgMi4yNjQgMy4yOTggMi42ODcgNS43OTMgMy4yMDYgMS40MTUuMjggMi45MTguNjEgNC4yMzYgMS4zMTdsLjA3NC4wMzRjMS4yMjQuNjYgMS45MDcgMS40NyAyLjI4IDIuNjAzLjMzMy44OTMuNTIgMS45My42NiAzLjIwNC0xLjEzLS41Mi0zLjA2LTEuMTgtMy43NjgtMi4wNjguMTQ4IDEuOTczIDMuNjI4IDMuMzkgMy45NjQgNi43OC0xLjk4LS4yNDMtMi43MzUtMS4wNC0zLjY3Ni0yLjY5LS4wOTIgMS43NDcuNzUyIDIuODI3IDEuNzkyIDMuODIzLjg0NS44OTIgMS42NDMgMS45NzYgMS40NTUgNC4xMzgtLjE5LS4wNDUtLjM3NS0uMTM3LS41NjYtLjE4Ni0yLjExMy0uODAyLTMuMDEyLTIuMzU4LTMuODEtNC40MjYuNDczIDMuNjI1IDEuNjk3IDcuNjI3LS40MyAxMC44OC0uODQ1IDEuMzE3LTIuMTYgMi40MDQtMy45OTggMi44MjUtMS4xOC4yNzgtMi43ODcuNDIzLTMuNzY4LS40Mi4zODItLjcxIDEuNi0yLjEyOCAyLjY4Mi0yLjYzNy0yLjI1Ny0uMzM2LTMuNDMzLjE4Ny00LjcwNiAxLjEyLTEuOTgyIDEuNTYtMi41OTggMi4wMjgtNS40NjIgMi4wMjgtLjY2IDAtMS41MDgtLjE0LTIuMzEzLS4zMzItLjM4Mi0uMDQzLS43NS0uMTgtMS4wODMtLjI4Ljk0LTEuMjcyIDIuNDUzLTIuNDQ4IDQuMzgzLTIuNDQ4LTEuNjk1LTEuNTUtNC4xNDgtLjMzMi02LjU0Ny0uMjgzLTEuMzcuMDUtMi40OTYtLjIzNy0zLjM1LTEuMzE3LjI4OC0uODkzLjk5My0xLjc0MyAxLjc5NS0yLjE2NyAxLjk4Mi0uNDI1IDQuNjYgMS4yMjUgNi40MDctLjIzNS0xLjA0LS44LTIuNTk3LS43NS00LjE5Ni0uOTktMS42OTYtLjIzNi0yLjMxLS4zMjYtMi45NjgtMS44ODIgMS43OS0yLjgyOCA1Ljk4My0xLjY5NSA4LjE1LS4wNSAxLjIyLjk0MiAyLjQ1IDEuODg0IDQuNjYgMS44ODQgMS45OCAwIDIuODc1LTEuMzYyIDMuMjA3LTMuMTk4LjIzMi0xLjUxMy4wOS0zLjMtLjA1LTQuNzYtLjE0NC0xLjQ2My0uNzk3LTIuNTk1LTEuNjUtMy4zOTYtMi41OS0yLjM1Mi03LjkxLTEuNDYtMTEuMTYyLTEuNDYtMS45NzcgMC0zLjY3My0uNjUzLTUuMDg0LTIuMDcyTTQzLjQ1IDE2MS4xOTdsLS4wOTMuMTkzLS4xNzMtLjEyNWMtLjM4NC0uMjc4LS43NzYtLjQ0NC0xLjI4NS0uNTM3LS4xNzIgMS42Ni4xOCAyLjU1IDEuMDc3IDIuNzEybC4xNy4wMy0uMDI2LjE3Yy0uMTQ3Ljk3NS0uODcgMS42NTUtMS43OTggMS42OTdoLS4wODZjLS45MzIgMC0xLjY3My0uNjctMS44Mi0xLjY1NWwtLjAzLS4yMDdoLjM4Yy45ODItLjA3OCAxLjQtLjk1NCAxLjI5Ny0yLjc0Ny0uMTA0LjAxNS0uMjA2LjAyNy0uMzEuMDQtLjMxOC4wMzctLjYxNi4wNzUtLjg4LjE3N2wtLjI0My4wOTR2LS4yNmMwLS43LS41ODgtMS4zOC0xLjI2LTEuNDU3LS42MS4wOC0xLjIxLjc5Ny0xLjE3IDEuNDQ1bC4wMTYuMjctLjI1My0uMDljLS4yOS0uMTA0LS42MDctLjE0My0uOTE1LS4xNzgtLjEwOC0uMDE0LS4yMTYtLjAyNy0uMzIzLS4wNDItLjA5NSAxLjc0NC4zNDYgMi42NyAxLjMxMiAyLjc0N2guMzZsLS4wMy4yMDVjLS4xNDcgMS4wMzItLjkgMS42OTgtMS45IDEuNjU3LS45MTUtLjA0Mi0xLjYwNi0uNzA4LTEuNzYtMS42OTRsLS4wMjYtLjE3Mi4xNzItLjAzYzEuMTEyLS4yMDMgMS4xNi0xLjQyNyAxLjA3My0yLjcxMy0uNTA0LjA4Ni0uODY4LjI0LTEuMzI4LjU0M2wtLjE3NS4xMTctLjA4NS0uMTkzYy0uNDc3LTEuMDczLTEuNDk3LTEuNDc4LTIuMzU1LTEuNjJsMi4wNTcgOC44NEg0My43NWwyLjA5NC04Ljg0Yy0uODUzLjE0Mi0xLjg3OC41NS0yLjM5NyAxLjYyM001Mi4xMyAxNzMuNjA3bC0uMDg1LjE5Mi0uMTc3LS4xMTdjLS40Ny0uMzEyLS44NDUtLjQ2LTEuMzMtLjUxMy0uMDg3IDEuMjY3LS4wNCAyLjQ3NyAxLjA3MyAyLjY4bC4xNy4wMzItLjAyNC4xN2MtLjE0Ny45NjgtLjg1MiAxLjY0OC0xLjc2IDEuNjk1LTEuMDA0LjA0LTEuNzU0LS42MTgtMS45LTEuNjUzbC0uMDI4LS4yMDJoLjM3OGMuMzM4LS4wMi42MDgtLjE0OC44MTgtLjM4NS4zNzQtLjQzLjUzNy0xLjIzNi40NzMtMi4zNC0uMDQuMDA0LS4wNzguMDA4LS4xMTUuMDEtLjM3Ni4wMjMtLjc2NS4wNTItMS4xMTQuMThsLS4yNTMuMDk0LjAxMy0uMjY4Yy4wMzctLjcxLS41OTUtMS4zMjItMS4xOTgtMS40NDItLjY4NS4xMjgtMS4yNC43NzItMS4yNCAxLjQ1di4yNjNsLS4yNDItLjA5OGMtLjMxOC0uMTI3LS43MDUtLjE1NS0xLjA3OC0uMThsLS4xMS0uMDA3Yy0uMDcgMS4xNC4wOCAxLjkwNy40NTQgMi4zMzUuMjEuMjQuNDkuMzY3Ljg1Mi4zOWguMzdsLS4wMy4yMDJjLS4xNSAxLjAyLS45NCAxLjY5Ny0xLjkwOCAxLjY1Mi0uOTMtLjA0OC0xLjY1LS43My0xLjc5My0xLjY5NmwtLjAyNS0uMTY4LjE3LS4wM2MxLjE2LS4yMTUgMS4xOS0xLjU4NyAxLjA3NS0yLjY4Mi0uNDg4LjA1Ny0uODguMjE0LTEuMjg3LjUwOGwtLjE3Mi4xMjUtLjA5Mi0uMTkyYy0uNTItMS4wOC0xLjU0Ni0xLjQ4Mi0yLjQtMS42MjNsMi4wOTcgOC44NGgxMC43MTRsMi4wNTctOC44NGMtLjg1Ni4xNC0xLjg3Ni41NC0yLjM1IDEuNjJNNjAuNzU2IDE2MS4ybC0uMDkyLjE5Mi0uMTc0LS4xMjhjLS4zOC0uMjc3LS43NzItLjQ0My0xLjI4Mi0uNTM2LS4xNzQgMS42Ni4xOCAyLjU1IDEuMDc2IDIuNzEybC4xNy4wMy0uMDI2LjE3Yy0uMTQyLjk1Ny0uODggMS42NTUtMS43OTggMS42OTctLjk4LjA2LTEuNzU1LS42MjQtMS45MDItMS42NTdsLS4wMjgtLjIwNGguMzhjLjk3Ny0uMDggMS4zOTUtLjk1NSAxLjI5LTIuNzQ4LS4xMDIuMDE1LS4yMDYuMDI3LS4zMS4wNC0uMzE2LjAzNy0uNjE1LjA3NS0uODc1LjE3N2wtLjI0My4wOTV2LS4yNmMwLS43LS41ODctMS4zOC0xLjI1OC0xLjQ1Ny0uNjI2LjA4LTEuMjE3Ljc4NC0xLjE3NiAxLjQ0NWwuMDE2LjI3LS4yNTMtLjA5Yy0uMjktLjEwNC0uNjEtLjE0My0uOTE0LS4xNzgtLjExLS4wMTQtLjIxNi0uMDI3LS4zMjMtLjA0Mi0uMDk2IDEuNzQ0LjM0NCAyLjY3IDEuMzEgMi43NDhoLjM2bC0uMDI4LjIwNGMtLjE0NyAxLjAzMi0uOSAxLjY5OC0xLjkwMiAxLjY1Ny0uOTA4LS4wNDItMS42MTMtLjcyMi0xLjc1NS0xLjY5N2wtLjAyNS0uMTcuMTctLjAzYzEuMTE2LS4yMDMgMS4xNTgtMS40NzcgMS4wNy0yLjcxMi0uNTA1LjA4Ny0uODguMjQzLTEuMzI4LjU0bC0uMTc0LjEyLS4wODUtLjE5NGMtLjQ3OC0xLjA3My0xLjUtMS40NzgtMi4zNTYtMS42MmwyLjA1NSA4Ljg0aDEwLjcxM2wyLjEtOC44NGMtLjg1NS4xNDItMS44ODMuNTUtMi40MDIgMS42MjVNNDEuMDc2IDE0OC4xaC0uODk2Yy0uMzMuMDk2LS42MTIuMjMzLS44NDcuNDItLjI0LjE5LS4zOC41Mi0uMzguOTQgMCAxLjA0NS4yMTQgMS42MzYuNzc1IDIuMzQ0LjY2Mi43NDcgMS4xNTMuNTY4IDEuNzQ0LjM4NC41LS4xNTcuNjk3LS4yNiAxLjAzLS41LjI3LS4xOTMuMzcyLS4zOTIuMzgyLS42OS4wMjgtLjc1LS4xMTMtMS4yMDUtLjUzOC0xLjgxNC0uMzc3LS40NzUtLjYyLS45MzItMS4yNy0xLjA4NU00Ny44NjIgMTQ3LjQyOGMtLjc2NC0uMTk2LTEuMzItLjMyNC0xLjk4Ny0uMTMtMS4yMTguMzU4LTEuMDM2IDIuMjYtLjg0NiAyLjk2Ny4xMTMuMzU4LjI5Ni42MTcuNzYuOTguODA1LjYyOCAxLjUwNi45OTUgMi40OTQuMTkyIDEuMTc3LTEuMDMzLjcyNi0xLjczOC41NzYtMi45MzYtLjAwOC0uMDY4LS4zMjUtLjg5Ny0uOTk4LTEuMDcyTTU0LjU5MyAxNDcuMTc2Yy0uMzg3LTEuMDQtMS41NjYtMS4xMi0xLjYzNC0xLjEzLS42MDctLjEtMS4zMy4yLTEuNzU2LjY3LS40MjUuNDMtLjcwNyAxLjA4My0uNzA3IDEuNzkzIDAgMS4xNzQuMjc3IDEuODMgMS4wMzcgMi41MjUuNzE0LjY1MyAzIC4yOTggMy40MTUtMS4xNTguMDU0LS4xODguMDM3LTEuNjg0LS4zNTctMi43TTUzLjA1IDE0NC41ODRjLS43NTYtLjcwNS00LjMzNC0xLjI2NC01Ljc5LTEuMTgtMS4yODguMDcyLTIuNzMzLjY1My00LjM5NyAxLjQyNy0uODUuMzk1LTIuMDg0IDEuMTMtMi41MTYgMS4zNTgtLjc4Ni40Mi0uNjQuNDA1LS4yMi40MDUgMS4zNjgtLjA5NCAyLjM2LS4xODYgMy4yNTMuODk1aC4wNWMuNDI2LS44MDMgMS4wMzYtMS43ODcgMi40NS0xLjc4Ny4xODUgMCAuNDg4LS4wNTIuNjc4LS4wNSAxLjMxLjAyIDIuNDUyLjkxOCAyLjcxNC44OC4xODYtLjAyNi4yNDMtMS4wNjYgMS40Mi0xLjY0NWwxLjExMi0uMjI1IDEuMjQ3LS4wNzZNMjAuOTM4IDI2LjYzbC4zMi4wMzNjLjgzLjA4NiAxLjU5LjQ0IDIuMDgzLjk2OC42MjQuNjcuOTM4IDEuNTU1LjkzOCAyLjYzM1Y1NC45OWMwIDEuMDktLjMxMiAxLjk1Ny0uOTM3IDIuNTgzLS40NjcuNTA0LTEuMjA3LjgzMi0yLjA4My45MjNsLS4zMi4wMzN2MS45NDZoMTYuNDg4VjU4LjUzbC0uMzItLjAzNGMtLjg1Ny0uMDktMS41NTgtLjQtMi4wOC0uOTIzLS41ODctLjYyNi0uODk2LTEuNTItLjg5Ni0yLjU4MlYzMC4yNjRjMC0xLjExLjMtMS45OTYuODg2LTIuNjIzLjU2LS41NTUgMS4yODItLjg5MyAyLjA5LS45NzdsLjMyLS4wMzR2LTEuOTAySDIwLjkzN3YxLjlNNzEuMzMgMjYuNjNsLjMyLjAzM2MuODA0LjA4NCAxLjUzLjQyMiAyLjA4Ni45NjYuNjIuNjczLjkzNyAxLjU1Ny45MzcgMi42MzNWNTQuOTljMCAxLjAzLS4zMjQgMS45MjItLjkyNiAyLjU3NC0uNTM4LjUzLTEuMjQzLjg0NC0yLjA5Ni45MzNsLS4zMi4wMzJ2MS45NWgxNi40ODd2LTEuOTVsLS4zMi0uMDMzYy0uODU0LS4wOS0xLjU1Ny0uNDAyLTIuMDgtLjkyNC0uNjE0LS42NjItLjk0LTEuNTU0LS45NC0yLjU4NFY0Mi4yNTJoNC43M2MxLjExIDAgMS45OS4zMDIgMi42MjUuODk1LjY2Ni42MjQgMS4wMiAxLjQ5NSAxLjAyIDIuNTE2djEuMmgxLjg5di0xMC44OGgtMS44OXYuOTY1YzAgLjk3OC0uMzYyIDEuODU4LTEuMDE3IDIuNDc1LS42NDIuNTktMS41MjYuODkyLTIuNjMuODkyaC00LjczVjI2LjloOC42NGMxLjg1MyAwIDMuMzYyLjMzMiA0LjQ4NC45ODcgMS41MjguODkgMi4yNyAyLjMxMiAyLjI3IDQuMzUzdjEuMjA0aDEuOTg0VjI0LjczSDcxLjMzdjEuOU0xNzAuODM2IDU4LjQ5NWMtMi40NTItLjA4LTQuMzQ1LTEuMDctNi41MzUtMy40MkwxNDcuNjIgMzcuNmMxLjU0LTEuNzQ4IDMuMDUtMy41NDcgNC41MTMtNS4yODhsMS40OTUtMS43NzVjLjE4My0uMjI0LjM2LS40MzIuNTI0LS42MjYuMjE2LS4yNTguNDItLjQ5OC42MDctLjczNCAxLjU1NS0xLjg4NCAyLjQ3NS0yLjUxMiA0Ljg1NS0yLjUxMmg0LjM1OFYyNC41NEgxNTMuMDZsLS4xMDMuMTY4Yy0xLjcgMi43NzYtMy4yNSA1LjA1NS00Ljg3NyA3LjE3Mi0xLjc3IDIuMjgtMy42NTUgNC40NS01LjQzNyA2LjQ2aC0zLjExdi04LjA3M2MwLTEuMTA2LjMwMi0xLjk5Mi44OTQtMi42MzYuNTE3LS41NSAxLjIxNy0uODc3IDIuMDg0LS45NjdsLjMyLS4wMzJWMjQuNzNoLTE2LjUzN3YxLjkwNGwuMzIuMDNjLjkwMy4wOSAxLjYwMi40MTMgMi4wOS45NzcuNjIyLjYyNC45MzggMS41MDcuOTM4IDIuNjI3VjU0Ljk5YzAgMS4wNi0uMzEgMS45NTMtLjg4NSAyLjU3NC0uNTQuNTQtMS4yNC44NDQtMi4xNC45MzJsLS4zMjIuMDMydjEuOTUyaDE2LjUzOHYtMS45NWwtLjMyLS4wMzRjLS44Ni0uMDg4LTEuNTY1LS40LTIuMDgtLjkyLS41OS0uNjMzLS44OTgtMS41MjctLjg5OC0yLjU4NVY0MS4wNzhoMi43NGwxMi44NzUgMTMuMjNoLS4wNjRsLjYxLjYxYy43ODQuNzc4IDEuMjQ3IDEuNDA4IDEuNDIyIDEuOTQ0LjE3Ni40NS4xNy44Mi0uMDIgMS4wOTItLjI1LjM2OC0uODQuNTg4LTEuNTc1LjU4OGgtLjY0djEuOTRoMTYuM3YtMS45NzVsLS4zNDQtLjAxTTUzLjgzNSAzNy42MzJjLTIuMzc4IDAtNC4zMSAxLjkzMy00LjMxIDQuMzEzIDAgMi4zNzggMS45MzIgNC4zMSA0LjMxIDQuMzEgMi4zOCAwIDQuMzE0LTEuOTMyIDQuMzE0LTQuMzEgMC0yLjM4LTEuOTM1LTQuMzEzLTQuMzE1LTQuMzEzTTExNC4xNjUgMzcuNjMyYy0yLjQxNyAwLTQuMzEgMS44OTMtNC4zMSA0LjMxMyAwIDIuMzc4IDEuOTM0IDQuMzEgNC4zMSA0LjMxIDIuMzc3IDAgNC4zMS0xLjkzMiA0LjMxLTQuMzEgMC0yLjM4LTEuOTMzLTQuMzEzLTQuMzEtNC4zMTMiIGZpbGw9IiNmY2JkMDAiLz48L3N2Zz4=");
+  margin-right: 3px;
+  width: 13px;
+}
+
+.kff {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDguNzIiIGhlaWdodD0iNTkyLjkzMyIgdmlld0JveD0iMCAwIDYwOC43MTk5NyA1OTIuOTMzMzUiPjxkZWZzPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZD0iTTY2Ni4yOTMgODM2LjY4aDMyMzQuMjZ2MzIzNC4yOUg2NjYuMjkzeiIvPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSJiIj48cGF0aCBkPSJNMjI5NS4xNCA5OTMuNjRoLjA0LS4wNG0tLjAzIDBjLTI0Ny4zMSAwLTQyMC4xNiA2NS4zOS00MjAuMTYgNjUuMzkgMCA5MjgtMTAxMS43NSAxNzU4LjQ4LTEwMTEuNzUgMTc1OC40OHMxMDExLjc1LTgzMC40OCAxMDExLjc1LTE3NTguNDhjMCAwIDE3Mi44OS02NS4zODIgNDIwLjE2LTY1LjM5bTQ1Mi44MiA3OC43NGMuMzkuMTUuODIuMzEgMS4yMi40NS0uNC0uMTQtLjgzLS4zLTEuMjItLjQ1bTIuNjQuOTdjLjM5LjE1LjguMyAxLjE5LjQ1IDAgMCA4Ni4wMSAxMDgzLjcxIDk2MS44OSAxNzQzLjcxLTg3NS44OC02NjAtOTYxLjg5LTE3NDMuNzEtOTYxLjg5LTE3NDMuNzEtLjM5LS4xNS0uOC0uMy0xLjE5LS40NSIvPjwvY2xpcFBhdGg+PHJhZGlhbEdyYWRpZW50IGZ4PSIwIiBmeT0iMCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxMzM3IDAgMCAtMTMzNyAyMjg4LjQyIDIyMzYuMTgpIiBzcHJlYWRNZXRob2Q9InBhZCIgaWQ9ImMiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzljMTcyZSIvPjwvcmFkaWFsR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJkIj48cGF0aCBkPSJNMjI5NS4xNCA5OTMuNjRoLS4wM2MtMjQ3LjI3LjAwOC00MjAuMTYgNjUuMzktNDIwLjE2IDY1LjM5IDAgOTI4LTEwMTEuNzUgMTc1OC40OC0xMDExLjc1IDE3NTguNDggOTcuNjgzIDQyMS44OCAzNjIuMzYgNjYxLjIxIDM2Mi4zNiA2NjEuMjFzNDI4LjMxLTIzMC4yOSAxMDUzLjctMjMwLjI5YzYyNS4yMSAwIDEwNzIuMDMgMjMwLjI5IDEwNzIuMDMgMjMwLjI5IDM0Mi41My0zODAuNDIgMzYyLjM2LTY2MS4yMSAzNjIuMzYtNjYxLjIxLTg3NS44OC02NjAtOTYxLjg5LTE3NDMuNzEtOTYxLjg5LTE3NDMuNzEtLjM5LS4xNS0uOC0uMy0xLjE5LS40NS0uNDgtLjE3LS45NC0uMzQtMS40Mi0uNTItLjQtLjE0LS44My0uMy0xLjIyLS40NS0xNjIuMzMtNTkuNDYtMzE4LjUxLTc4LjczMi00NTIuNzUtNzguNzRoLS4wNCIvPjwvY2xpcFBhdGg+PHJhZGlhbEdyYWRpZW50IGZ4PSIwIiBmeT0iMCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxMzM3IDAgMCAtMTMzNyAyMjg4LjQyIDIyMzYuMTgpIiBzcHJlYWRNZXRob2Q9InBhZCIgaWQ9ImUiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2RiMWIzMCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzljMTcyZSIvPjwvcmFkaWFsR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJmIj48cGF0aCBkPSJNMjg2MS45MiAxMTYxLjk2YzQzLjA1IDI1OC42NyAyMTYuNSAxMDA1LjE5IDgzNC41NiAxNTE3LjY2IDEwLjY0LTcwLjU4IDE2LjA3LTE0Mi4xNSAxNi4wNy0yMTMuNjkgMC01NjQuNjktMzM4LjYxLTEwNzguMzEtODUwLjYzLTEzMDMuOTd6bTg2OC4xMSAxNjA2LjdjLTc4MS4xNS01OTguMDUtOTEzLjY1LTE1NTMuODktOTI4LjI0LTE2ODMuOTEgNTYwLjI2IDIwOC4yOCA5NTkuNDMgNzQ3Ljk2IDk1OS40MyAxMzgxLjE4IDAgMTAzLjc5LTEwLjc4IDIwNS4wMy0zMS4xOSAzMDIuNzN6bS0yMzg2LjE0IDc2Mi4yN2MyNjAuODIgMjMxLjg4IDU5My42MSAzNTguNzkgOTQ0LjkyIDM1OC43OSAzNTAuNjIgMCA2ODIuOTQtMTI2LjU2IDk0My41OS0zNTcuNzctMTUwLjItNjIuNjEtNTAzLjM5LTE4Ni4xNy05NTMuMTQtMTg2LjE3LTQ0OC4xNiAwLTc5MC4wMiAxMjIuNTgtOTM1LjM3IDE4NS4xNXptOTQ0LjkyIDQwNy40NmMtNDAxLjYyIDAtNzY1LjQ5LTE2MC43OC0xMDMxLjE1LTQyMS4zNyA2My41My0zMS42NCA0NjUuMDItMjE5LjkgMTAyMS42LTIxOS45IDU1Ni43NyAwIDk3My44MiAxODguNDMgMTA0MC4xOSAyMjAuMjQtMjY1LjU5IDI2MC40LTYyOS4zOCA0MjEuMDMtMTAzMC42NCA0MjEuMDN6TTg2NC45MjYgMjQ2NS45M2MwIDY5LjEzIDUuMTQ4IDEzOC4yNiAxNS4wNTggMjA2LjUgMjE4LjEzNi0yMDEuOTYgODQ5LjMxNi04NDMuMjEgODk0Ljg2Ni0xNTM1LjA5LTU0Ny4wNyAyMTEuMjUtOTA5LjkyNCA3MzYuMzMtOTA5LjkyNCAxMzI4LjU5em0tMTcuNzE1IDMwMS4zM2MtMjAuMjUzLTk3LjI5LTMwLjkzNy0xOTguMDUtMzAuOTM3LTMwMS4zMyAwLTY1Mi4wMiA0MjMuMzA3LTEyMDQuOTEgMTAwOS44NjctMTM5OC44OS01LjUgODMwLjQxLTg1NS43MzQgMTU5NC05NzguOTMgMTcwMC4yMnpNMjI5MC45IDkzOS4zOThjLTg0MS4xNSAwLTE1MjMuMDU2IDY4MS44ODItMTUyMy4wNTYgMTUyMy4wNTJTMTQ0OS43NSAzOTg1LjU0IDIyOTAuOSAzOTg1LjU0Yzg0MS4xNyAwIDE1MjMuMDctNjgxLjkyIDE1MjMuMDctMTUyMy4wOVMzMTMyLjA3IDkzOS4zOTggMjI5MC45IDkzOS4zOTh6bTAgMzEzNS4yMTJjLTg5MC4zNCAwLTE2MTIuMTM0LTcyMS44LTE2MTIuMTM0LTE2MTIuMTYgMC04OTAuMzUgNzIxLjc5NC0xNjEyLjE1IDE2MTIuMTM0LTE2MTIuMTUgODkwLjM1IDAgMTYxMi4xNSA3MjEuOCAxNjEyLjE1IDE2MTIuMTUgMCA4OTAuMzYtNzIxLjggMTYxMi4xNi0xNjEyLjE1IDE2MTIuMTZ6Ii8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ic2NhbGUoMzIyNC4zKSByb3RhdGUoLTQ1IDEuNTMgLjEzKSIgaWQ9ImciPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjAxMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjIiIHN0b3AtY29sb3I9IiNlMWJiNzAiLz48c3RvcCBvZmZzZXQ9Ii41IiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuOCIgc3RvcC1jb2xvcj0iI2UxYmI3MCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJoIj48cGF0aCBkPSJNMTQzMS42MyAzMjA0Ljc3bDEwOC4yLTM3LjY2LTI0My4zOC0xNDguNTEgOTYuMDUtMzA1LjUzLTExMi45NiAzOS4zMy03My41NiAyNTIuOC0xLjE3LjQzLTcwLjU1LTIwMi42Ni04Ny44NyAzMC42MSAxNTYuOSA0NTAuNyA4Ny44Ny0zMC42TDEyMjUgMzA2My42bDEuMTgtLjQxeiIvPjwvY2xpcFBhdGg+PGxpbmVhckdyYWRpZW50IHgyPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgwIC01NzEuMiAtNTcxLjIgMCAxMjkzLjExIDMyODQuMjgpIiBpZD0iaSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuMDExIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuMzA4IiBzdG9wLWNvbG9yPSIjZTFiYjcwIi8+PHN0b3Agb2Zmc2V0PSIuOTM5IiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PC9saW5lYXJHcmFkaWVudD48Y2xpcFBhdGggaWQ9ImoiPjxwYXRoIGQ9Ik0xNzAzLjY2IDMwMDIuOTFsLTEuMjUuMjYtODcuMjctMTU4Ljc5IDExMC44NC0yMy40MnptLTEzMC4yMi0yMjcuMzhsLTU5LjItOTAuMzMtOTUuOTUgMjAuMjcgMjgzLjMgNDQwLjg0IDcwLjYyLTE0LjkyIDc1LjgtNTE2LjctOTcuMiAyMC41My0xNS4xNCAxMDYuMDN6Ii8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAgLTUzMS42MiAtNTMxLjYyIDAgMTYzMy4xNSAzMTQ2LjMxKSIgaWQ9ImsiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjAxMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjMwOCIgc3RvcC1jb2xvcj0iI2UxYmI3MCIvPjxzdG9wIG9mZnNldD0iLjkzOSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJsIj48cGF0aCBkPSJNMTk5My45NyAyNjgyLjM1bDEzMC44Ni0xMy43NS04LjQyLTgwLjU3LTIyMy40NiAyMy40OCA0OS45MSA0NzQuNTMgOTIuNTItOS43MXoiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCB4Mj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJzY2FsZSg0OTgpIHJvdGF0ZSgtOTAgNS4xMiAxLjA4KSIgaWQ9Im0iPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjAxMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjMwOCIgc3RvcC1jb2xvcj0iI2UxYmI3MCIvPjxzdG9wIG9mZnNldD0iLjkzOSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJuIj48cGF0aCBkPSJNMjU0Mi44OCAyODgzLjM2aC0xLjIzbC0xMDAuNzMtMzA1LjE3LTMyLjI0LS44LTExMS45NCAyOTkuODYtMS4yNy0uMDItMzUuMTEtMjk3LjE3LTkzLjY2LTIuMzQgNjguMjEgNDkxLjc2IDY1Ljg4IDEuNjIgMTI1LjUyLTMxMS41NyAxMDQuNzkgMzE3LjI5IDY3LjEzIDEuNjYgODMuNjEtNDg3Ljk5LTkzLjY1LTIuM3oiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCB4Mj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJzY2FsZSg1MDEuMSkgcm90YXRlKC05MCA1LjQ5IC42NSkiIGlkPSJvIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48c3RvcCBvZmZzZXQ9Ii4wMTEiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48c3RvcCBvZmZzZXQ9Ii4zMDgiIHN0b3AtY29sb3I9IiNlMWJiNzAiLz48c3RvcCBvZmZzZXQ9Ii45MzkiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0icCI+PHBhdGggZD0iTTI4NzQuMDEgMjk4MS41M2wtMS4yNy0uMjYtMTYuOTctMTgwLjM3IDExMS4wMSAyMi41MnptLTI5LjI2LTI2MC4zNGwtMTguNDItMTA2LjQtOTYuMTMtMTkuNDkgODUgNTE3LjAxIDcwLjY4IDE0LjM1IDI3NC43NS00NDQuMDgtOTcuMzYtMTkuNzUtNTYuMDQgOTEuMjl6Ii8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ic2NhbGUoNTMxLjM3KSByb3RhdGUoLTkwIDUuNzEgLjE3KSIgaWQ9InEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjAxMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjMwOCIgc3RvcC1jb2xvcj0iI2UxYmI3MCIvPjxzdG9wIG9mZnNldD0iLjkzOSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJyIj48cGF0aCBkPSJNMzI0Ni4zOSAyOTg2LjhsMTEuMjkgNC4xOWM0OC4wOSAxNy43NCA5Mi4yNSA0NC40NiA3Mi4yMyA5OS4xMy0yMy43NSA2NC43OC03NS4xMiA1Mi45Ny0xMjEuNDMgMzUuODNsLTExLjg5LTQuMzl6bTMwNC44Ni0xNjEuOTVsLTg4LjE4LTMyLjUyLTE0OS40OSAxNTEuMDktNDQuNTctMTcuNzUgNjYuNzQtMTgwLjQ5LTg3LjI3LTMyLjI3LTE2NS40OSA0NDcuNjQgMTE4LjExIDQzLjY1Yzg4LjQ5IDMyLjcyIDE3My41OSAyOC40OSAyMTUuMTctNzkuNDUgMTYuNzItNDMuNC0xLjkxLTk0LjA4LTI5LjEyLTEyOS44My04LjM0LTEwLjkxIDE2NC4xLTE3MC4wNyAxNjQuMS0xNzAuMDd6Ii8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ic2NhbGUoNTA5LjIyKSByb3RhdGUoLTkwIDYuNDIgLS4wOSkiIGlkPSJzIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48c3RvcCBvZmZzZXQ9Ii4wMTEiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48c3RvcCBvZmZzZXQ9Ii4zMDgiIHN0b3AtY29sb3I9IiNlMWJiNzAiLz48c3RvcCBvZmZzZXQ9Ii45MzkiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0idCI+PHBhdGggZD0iTTE5NDYuMzcgMTQ3Ny4xNHY3MjYuODFoMzk3LjM1di0xMjguMTZoLTI0Ni4yM3YtMTY3LjQ2aDE3Ni41MnYtMTI2LjI3aC0xNzYuNTJ2LTMwNC45MnoiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCB4Mj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJzY2FsZSg3MjYuODIpIHJvdGF0ZSgtOTAgMi45OSAuMDQpIiBpZD0idSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuMDExIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuMzA4IiBzdG9wLWNvbG9yPSIjZTFiYjcwIi8+PHN0b3Agb2Zmc2V0PSIuOTM5IiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PC9saW5lYXJHcmFkaWVudD48Y2xpcFBhdGggaWQ9InYiPjxwYXRoIGQ9Ik0yMzYwLjE0IDExNzYuNjl2NzI2LjIxaDM5Ny4yNXYtMTI3Ljc0aC0yNDYuMjV2LTE2Ny4zMmgxNzYuNDZ2LTEyNi4zNWgtMTc2LjQ2di0zMDQuOHoiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCB4Mj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMCAtNzI2LjIgLTcyNi4yIDAgMjU1OC43NiAxOTAyLjkpIiBpZD0idyI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuMDExIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuMzA4IiBzdG9wLWNvbG9yPSIjZTFiYjcwIi8+PHN0b3Agb2Zmc2V0PSIuOTM5IiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHBhdGggZD0iTTEyMC45NzUgMTUyLjU4OGMtLjUxIDAtMS4wMi4yMDctMS4zOS42MDctNC41MyA0Ljg5Ni0yMC42MTMgMjQuOTA1LTE4LjI4IDMwLjI0LjQ0OCAxLjAyNCAxLjQyIDEuNjMzIDIuNiAxLjYzMy4zMjQgMCAuNjcyLS4wNDQgMS4wMzgtLjEzNSAxLjU0Ni0uMzggMi44NTgtMS4yMiAzLjkwNS0yLjQ5My4xMi0uMTQuMjE1LS4zLjI4NS0uNDY4IDMuNzg0LTguOTkgOC4zMTItMTcuOTE1IDEzLjQ2LTI2LjUyNy40OTYtLjgzLjI4Ny0xLjktLjQ5LTIuNDgtLjMzOC0uMjUzLS43MzMtLjM3Ny0xLjEyOC0uMzc3bTM3MC41IDIuNjEyYy0uNDcyIDAtLjkzOC4xNzUtMS4zLjUxNy0uNjM0LjYwNC0uNzc2IDEuNTYzLS4zMzUgMi4zMjMgNi4wNzMgMTAuNDggMTEuMjM3IDIxLjQxNiAxNS4zNDUgMzIuNDk1LjIzLjYyNC43NzYgMS4wNzcgMS40MjggMS4yIDEuNTMuMjgyIDMuNzc0LjYxOCA1Ljc2Ni42MTggMS42NDUgMCAzLjk1Mi0uMTkyIDQuOTktMS44NTYuMzQ2LS41NS44MDItMS43MTYuMDA2LTMuMzQ1LTYuODk1LTE0LjEwMy0xNi4xOS0yNS45My0yNC44NjMtMzEuNjQtLjMxNi0uMjA4LS42OC0uMzEyLTEuMDM4LS4zMTJNOTMuOTA3IDIyNS40NDVjLS40NyAwLS45MzUuMTc1LTEuMjkzLjUxNC02LjU1MyA2LjE4My05LjU3NCAxMC44MjQtOC45OCAxMy43OTIuMjY0IDEuMzEyIDEuMTY1IDIuMzIgMi41MzcgMi44MzcgMi41NDUuOTYgMy43ODQgMS4yOTggNC43NDQgMS4yOTggMS4yNSAwIDIuMjEtLjYxIDIuNy0xLjcxNS4wOC0uMTc3LjEzLS4zNjYuMTUtLjU2LjQ3LTQuMzU0IDEuMTI1LTguOTE3IDIuMDA2LTEzLjk1NC4xNC0uODAzLS4yNDgtMS42MDQtLjk2NS0xLjk5LS4yODItLjE1LS41OS0uMjI1LS44OTgtLjIyNW00MjMuNTQyIDIuMzM4Yy0uMjM0IDAtLjQ3LjA0NS0uNjk4LjEzNi0uODI0LjMzLTEuMzA4IDEuMTg1LTEuMTY1IDIuMDYgMS44ODIgMTEuNTE2IDIuODM3IDIzLjE1MiAyLjgzNyAzNC41NzcgMCAzLjMtLjEyIDYuNTg3LS4yMjcgOS4wODQtLjAzNi45Mi41OTQgMS43MzMgMS40OTUgMS45My4xMzIuMDI3LjI2NC4wNDIuMzk1LjA0Mi43NTggMCAxLjQ2NS0uNDYgMS43NTYtMS4xOTIgMi4wMTMtNS4wNjMgNy41NzItOC4wODQgMTQuODY4LTguMDg0bC40OTUuMDA1aC4wNDJjLjYwNCAwIDEuMTctLjI4NSAxLjUyNS0uNzc3LjM2LS41LjQ1Ni0xLjE0Ny4yNTMtMS43My0yLjM5Ny02Ljg4NS0xNC41NzgtMjcuMjQ0LTIwLjAxMi0zNS4yMjItLjM1Ny0uNTI3LS45NTItLjgyNy0xLjU2NC0uODI3TTg5Ljc3IDI2Mi44MzdjLTQuMzYgMC0xMi43ODQgNy40NDItMTguNDEzIDE0LjYzOC0zLjgzNCA0Ljg5OC04LjEyOCAxMS44Ni02LjgwOCAxNy4xOTIuMTI3LjUwNC40Ny45My45MjYgMS4xODguMjgyLjE1OC42MDQuMjM3LjkyOC4yMzcuMTk1IDAgLjM5My0uMDI4LjU4LS4wODguMDA1LS4wMDMuNDg4LS4xNTIgMS4zMTItLjE1Mi41NCAwIDEuMTA1LjA2NSAxLjY3Ny4xODcuMTMzLjAyNy4yNjYuMDQuMzk4LjA0LjUzNyAwIDEuMDYtLjIyOCAxLjQyMi0uNjQuNDUyLS41MTUuNTktMS4yMzUuMzYtMS44OC0uMDMzLS4wOS0yLjc2My05LjM0IDQuNDktMTMuNjYgMS42NTItLjk4MyAzLjI5Mi0xLjQ2IDUuMDE3LTEuNDYgMy4zMiAwIDYuMjc4IDEuNzg3IDguNjU2IDMuMjIuMzAyLjE4NS42NC4yNzYuOTguMjc2LjM0IDAgLjY4LS4wOS45OC0uMjc1LjYtLjM2NS45NS0xLjAzMi45MDYtMS43MzUtLjMzNi01LjItLjY0Ny0xMC42MTYtLjY1NS0xNC45NzYgMC0uNjM1LS4zMi0xLjIyNS0uODQ3LTEuNTc1LS41NDMtLjM1Ni0xLjE4Ny0uNTM4LTEuOTEtLjUzOG00NTcuMzQ1IDE5Ljk0NmMtLjcxIDAtMS4zNi4zOTQtMS42ODMgMS4wM2wtLjMyNy42NDRjLTEuMTI0IDIuMjItMi4wMSAzLjk3LTMuNTMzIDQuODQyLS43MS40MDgtMS4wNzcgMS4yMzItLjkwNyAyLjAzNS4xNy44MDUuODQyIDEuNDAyIDEuNjYyIDEuNDg1IDIuMDg2LjIwNSA0Ljg3MyAxLjM1IDYuMjkgNS42Mi4yNi43ODUuOTkgMS4yOTMgMS43OSAxLjI5My4xMyAwIC4yNTgtLjAxLjM5LS4wMzguOTQtLjE5OCAxLjU4NC0xLjA2OCAxLjQ5Mi0yLjAyNC0uMzYzLTMuOTItMS41NzUtOS43MDMtMy40NTgtMTMuNzktLjMwNS0uNjU3LS45NTUtMS4wODMtMS42OC0xLjA5N2gtLjAzN004MC45OCAzMDAuNTU2Yy0uNjg0IDAtMS4zMi4zNy0xLjY1My45NzMtLjM1Ni42NC0uMzA3IDEuNDMuMTIgMi4wMjIgMi43MjMgMy43NyA0LjgzNSAxNS42MDQgNi4zOCAyNC4yNDQgMi4xNTQgMTIuMDcyIDIuODA2IDE0LjcyNyA0LjgzIDE1LjQwNy4zMzYuMTEyLjY5Mi4xNyAxLjA1Ny4xNyAyLjAzNCAwIDMuNzI2LTEuNzcyIDUuNjgyLTMuODIgMS42LTEuNjggMy40MTctMy41OCA1LjI2LTQuMjk4Ljk0My0uMzY3IDEuNDMyLTEuNDA4IDEuMTA4LTIuMzY2LTMuMjQtOS41NzUtNi43MDYtMjQuMDc3LTguODM3LTM2Ljk0Mi0uMTMzLS44MDctLjc3LTEuNDQtMS41ODItMS41NmwtLjI4Mi0uMDJjLS43MSAwLTEuMzY3LjM5My0xLjY5IDEuMDQ0LS44NzQgMS43NDctNC42OSA1LjE3LTkuNTY1IDUuMTctLjIzIDAtLjQ2NS0uMDA2LS43MDUtLjAyM2wtLjEyNC0uMDA0bTQyMS45NjQgNTIuODI1YzEuMDIgMCAyLjA3Ljc0NCAzLjA1NyAxLjU0bC41My40NDRjMS4yIDEgMi4zNCAxLjk1IDMuNzY3IDEuOTUgMS41NjggMCAyLjc1NS0xLjA5MyAzLjUyMi0zLjI0NyAyLjIzLTYuMjY0IDQuNDU3LTEzLjA4MiA2LjYxMi0xOS42NzQgNS4zNTItMTYuMzcyIDEwLjg4Ny0zMy4zMDQgMTUuNjQ3LTM4Ljg3Mi40ODctLjU3LjU4OC0xLjM3Ni4yNi0yLjA1LS4zMTYtLjY1Ny0uOTgtMS4wNjYtMS43LTEuMDY2aC0uMDc2Yy0uMjI1LjAxLS40NTIuMDE1LS42NzIuMDE1LTguNTIzIDAtMTEuOTMzLTYuNy0xMi43NzUtOC43NS0uMjkzLS43MTgtLjk4OC0xLjE3NS0xLjc0NS0xLjE3NWwtLjI4LjAyMmMtLjg2NC4xMy0xLjUyNC44My0xLjYwNSAxLjY5OC0yLjExMiAyMy4wOS03LjkzNiA0NS41MTItMTcuMzA4IDY2LjY0Mi0uMjkzLjY2LS4xODQgMS40My4yOCAxLjk4Mi4zNjcuNDMuOS42NyAxLjQ0Ny42Ny4xNTQgMCAuMzEyLS4wMTcuNDY0LS4wNTUuMTk0LS4wNDguMzgtLjA3NC41NzQtLjA3NG0tMzg1LjQ2NyAxMy4zNTZsLS4yMjQuMDE1Yy0uNzYyLjA5My0xLjM5NC42MzgtMS41OTUgMS4zNzgtMS42NSA2LjAyLjI1OCAyMy44NTYuMzQgMjQuNjE1LjA3NS43MjIuNTY0IDEuMzM3IDEuMjUgMS41NzcuMjA2LjA3My40MTguMTA3LjYyNy4xMDcuNDkzIDAgLjk3NC0uMTkgMS4zMzUtLjU1NCAxLjc2NS0xLjc2IDQuMDctMi4xMyA1LjY5Mi0yLjEzIDIuMTc3IDAgNC41NS42NiA2LjUwOCAxLjgxMi4yOTYuMTc0LjYyNi4yNjIuOTU0LjI2Mi41MSAwIDEuMDEzLS4yMDYgMS4zOC0uNTk4LjYwNS0uNjQ0LjY4NC0xLjYyMy4xODctMi4zNTMtMi44MS00LjE2LTExLjU3LTE3LjM0LTE0LjgtMjMuMTU4LS4zMzUtLjYwNy0uOTczLS45NzQtMS42NTMtLjk3NG0zNjIuNjgyIDMxLjk3N2MyLjg5NyAwIDUuNDMgMS4wNDcgNy41MjMgMy4xMi4zNi4zNi44NC41NDQgMS4zMy41NDQuMjU4IDAgLjUxNi0uMDUuNzYtLjE1Ny43MDgtLjMxIDEuMTU4LTEuMDI0IDEuMTI4LTEuOC0uMDItLjYzNy0uNTctMTUuNjctMS4yMzItMjIuMzY1LS4wOC0uODA0LS42NjQtMS40Ny0xLjQ1LTEuNjU1LS4xNDYtLjAzNS0uMjg2LS4wNDgtLjQzLS4wNDgtLjY0IDAtMS4yNTUuMzI4LTEuNjA0Ljg4Ny00LjM1MiA2Ljk2Ny05LjE5IDEzLjc5My0xNC4zODUgMjAuMjg1LS41ODUuNzMtLjU0NyAxLjc4My4wOTUgMi40Ny4zNy4zOTYuODczLjU5OCAxLjM4LjU5OC4zNzYgMCAuNzUyLS4xMSAxLjA3OC0uMzM2Ljc2OC0uNTM2IDIuOTctMS41NDQgNS44MDYtMS41NDRtLTM0Mi43MTMtMi44NGMtLjI1IDAtLjUuMDUtLjc0LjE1Mi0uNzYzLjMyNi0xLjIyMyAxLjEwNC0xLjE0MiAxLjkyOC4wNi41ODIuMTg0IDEuMjI2LjMxOCAxLjkwNC40OTMgMi41MjYgMS4xMSA1LjY3LTEuMDIzIDguNDcyLS42NjQuODctMS4zNzcgMi4wNDYtLjk5IDMuMzkuNDU3IDEuNTg1IDEuOTk1IDIuMTYzIDQuMTI3IDIuOTY1IDMuMzEgMS4yNDQgOC44NTQgMy4zMjggMTUuODU2IDEwLjA0NiAxLjY2NiAxLjYgMy40MDcgMi40MTMgNS4xOCAyLjQxMyAxLjQ3NSAwIDIuODYzLS41ODYgMy45MTYtMS42NS4zNjMtLjM2OC41NjItLjg2Ni41NDctMS4zODQtLjAxMy0uNTE4LS4yNC0xLjAwMy0uNjI0LTEuMzUtNy4xNzQtNi40NzUtMTguOTU2LTIwLjMxMi0yMy45ODYtMjYuMjItLjM2OC0uNDMzLS45LS42NjgtMS40NC0uNjY4bTMzMC4wMTIgOC4yNTNjLS41NTIgMC0xLjA5My4yNC0xLjQ2NS42OTUtNC43OTIgNS44NzYtMTIuODA4IDEzLjc0NC0yMS40MzYgMjEuMDUtLjQzMy4zNjYtLjY4LjkwNS0uNjcgMS40Ny4wMDUuNTY0LjI3IDEuMDk1LjcxIDEuNDUgMy45IDMuMTIzIDYuMjUgNi4wNSA2LjQ0NCA4LjAyMy4wOC44MDMuNjU3IDEuNDY3IDEuNDQzIDEuNjU0LjE0Ni4wMzMuMjkuMDUuNDM3LjA1LjYzNSAwIDEuMjQzLS4zMiAxLjU5NS0uODczLjA4NS0uMTM3IDguODE2LTEzLjY3MiAxOC41NC0xNS4zMDguNzk3LS4xMzMgMS40Mi0uNzYgMS41NTMtMS41Ni4xMy0uNzk1LS4yNjItMS41ODgtLjk3My0xLjk2OC0zLjIzLTEuNzI4LTcuMDg4LTYuMzUtNC40NjgtMTIgLjQtLjg2LjA5Ny0xLjg5LS43MS0yLjM5NS0uMzEtLjE5NC0uNjU4LS4yODgtMS4wMDMtLjI4OG0yMi4wMDQgMTMuMDU0Yy0uNDEyIDAtMS4xOTMuMTI3LTEuODA3Ljk5Ny0xLjgzNyAyLjYyNy00LjE3MiAzLjExOC02LjQxIDMuMzk1LS42NTYuMDgtMS4yMTguNTA1LTEuNDg2IDEuMTA3LS4yNy42MDMtLjIwNCAxLjMxLjE3NiAxLjg1Mi4xNy4yNDcgNC4xMzIgNi4xNS4xMiAxNS44OS0uMjU2LjYxOC0uNzg0IDEuOS0uMDY0IDIuOTc3LjM4NC41NyAxLjAyOC45MDcgMS43MjMuOTA3IDIuNzI4IDAgNy4xNDUtNi45NjQgNy4xODgtNy4wMzUgMi44ODgtNC45MDggMy43NjItMTYuNjA4IDIuNDEtMTguOTc2LS40LS43LTEuMDkyLTEuMTE3LTEuODUtMS4xMTdNMTc1Ljg3IDQzNC4wNTVjLS4zNDIgMC0uNjguMDktLjk4Ni4yNzYtLjY2NC40MDUtMS4wMSAxLjE3Ni0uODc1IDEuOTQgMy4yMzggMTguNDUzIDEzLjA5IDMzLjUwNSAyMC43OCA0Mi44OCA2LjQ5OCA3LjkyIDE1Ljc0IDE2LjYxNyAxNy42NiAxNi42MTcuNjYgMCAxLjI3NS0uMzU1IDEuNjE3LS45Mi4zNDItLjU3LjM2OC0xLjI4LjA1Ny0xLjg2NS0yLjUxNi00Ljc5LTQuMzIzLTkuNzE2LTUuMjMyLTE0LjI1Mi0xLjY2Ny04LjM0Ljg1Mi0xNy44NDcgMi4wMTMtMjEuNTQ1LjI3Ni0uODgzLS4xMjgtMS44MzctLjk1NC0yLjI1My0xMS42MjMtNS44NDYtMjIuNzA1LTEyLjc0Mi0zMi45NC0yMC40OTUtLjMzNS0uMjU2LS43MzctLjM4NC0xLjE0LS4zODRtMjYxLjMzNC0xLjY3MmMtLjQxIDAtLjgyLjEzMy0xLjE2LjQtMTEuNjggOS4wOC0yNC4yMzMgMTYuOTItMzcuMzE1IDIzLjMwMy0uNjE4LjMwNS0xLjAyNS45Mi0xLjA2IDEuNjEtLjAzLjY4NC4zMTQgMS4zMzYuOSAxLjcgMi43MTQgMS42NjctLjMxIDE0LjQ3Ni0xLjkzMyAyMS4zNTgtMi4yOTMgOS43MTMtMy40MDIgMTQuODktMS41MjYgMTcuMjU1LjYuNzYgMS40NzQgMS4xOCAyLjQ2MiAxLjE4Ljg0IDAgMS43Ni0uMyAyLjgwNC0uOTE3IDE2LjE1LTkuNSAyNi4yNTctMzMuOTMzIDMzLjY0LTUxLjc3MiAxLjc1LTQuMjI4IDMuNDAzLTguMjIgNC45LTExLjQyNy4zNjgtLjc5Mi4xNDgtMS43MzItLjUzNS0yLjI3Ni0uMzQzLS4yNzMtLjc2LS40MTMtMS4xNzYtLjQxM20tMTc5Ljk3NiA1My4yMTJsLjE2LjAxMmMxLjQ1Mi4yMDYgNS4yNjQgNS44MDYgOC4zMjcgMTAuMyAzLjE5NiA0LjY5IDYuODE2IDEwLjAwNyAxMS4xMyAxNS4wNzggMTIuNzc4IDE1LjA0IDI0LjQwNCAyMS40NTMgMjQuODk0IDIxLjcxOC4yNzcuMTUzLjU5Mi4yMy45MDQuMjMuMTYgMCAuMzI1LS4wMi40ODctLjA2MyAxNi42MjItNC40NSAzNS4zOC0yNi42NTYgNDUuNDYtMzguNTg2IDIuMTk4LTIuNjA1IDMuOTM4LTQuNjY0IDQuOTM0LTUuNjYgMS4wMzMtMS4wMzUgMS42Ni0xLjQxIDEuOTU3LTEuNTQ0LjEzMi4yNzMuMzMyLjg3Mi41MTYgMi4xNzMuMDUuMzUuMDk1LjcwMy4xMzcgMS4wNDUuMjU2IDIuMDgzLjU1IDQuNDQ3IDIuNzY0IDQuNDQ3LjU0NiAwIDEuMDY3LS4xOTMgMS41NS0uNTcuODY1LS42ODIgMi4yMjgtMi40NzcgNC45ODgtNi4xNSA0Ljk1LTYuNTk2IDEyLjQzNi0xNi41NjggMTkuMTI2LTIxLjcxLjc0OC0uNTcyLjk2LTEuNjA4LjQ5Ni0yLjQyNy0uMzQ0LS42MS0uOTgzLS45NjQtMS42NS0uOTY0LS4yMjcgMC0uNDYuMDQ0LS42ODMuMTMtMjQuNzEgOS42My01MC43MDIgMTQuNTE3LTc3LjI1IDE0LjUxNy0yNi4xNjQgMC01MS43OTItNC43NC03Ni4xNzQtMTQuMDg2LS4yMi0uMDg0LS40NTMtLjEyNC0uNjgtLjEyNC0uNjE1IDAtMS4yMTIuMy0xLjU3LjgzNy0uNDkuNzM4LS40MDcgMS43MTIuMjAyIDIuMzU0IDUuODQgNi4xNDggMTguNDkgMjEuNTAzIDE4LjYxNyAyMS42NTVsLjIyMi4yMjhjMS4xMzIuOTgyIDIuMzI0IDEuNDgyIDMuNTQgMS40ODIgMi4wNjggMCAzLjU4Ny0xLjM4IDQuOTI4LTIuNTk0LjkyMy0uODM3IDEuOTAzLTEuNzI0IDIuNjY4LTEuNzI0bTk4LjYzNSAxMDUuNDQ4Yy00Ljg4MiAwLTUuNzgtLjkzNS01LjgxNi0uOTczLTIxLjkzNi0yNC4zMS00Ny4zMzUtMjguNDg0LTQ4LjQwOC0yOC42NDZsLS4yOTUtLjAyMmMtLjM5NyAwLS43ODguMTI3LTEuMTE0LjM2Ni0xLjEzLjgzNC0yNy43OTMgMjAuNDczLTMzLjkyNSAyNi42MDQtMS4wMiAxLjAyLTQuNTYyIDIuMTEtMTEuNDQ0IDIuMTEtMTEuNzI3IDAtMjIuNzIzLTMuMDQzLTIzLjUzLTQuOTguMDM4LS4wMDQuMTktLjI0LjY3Ny0uNjA1IDMuNjItMi43MDYgOC43My01LjE3NSAxNC42NDUtOC4wMzIgOC4wODUtMy45MDggMTcuMjUzLTguMzM3IDI1LjE3LTE0LjcxMy42NDMtLjUyLjg3NS0xLjM5Ny41Ny0yLjE2OC0uMjg1LS43MjMtLjk4OC0xLjE5LTEuNzUzLTEuMTlsLS4xNS4wMDRjLTQuMDMzLjMxNC03Ljc3Ny40NzQtMTEuMTMzLjQ3NC0xNi4yMDQgMC0yMC42OTYtMy42OC0yMS45My01Ljg3NS0xLjQ0Mi0yLjU2Ni4xNzgtNS4yOTQuMjUtNS40MDYuMzI2LS41NC4zNjYtMS4yMTQuMS0xLjc4NS0uMjY4LS41NzItLjc5OC0uOTc4LTEuNDItMS4wNzQtMi45NjQtLjQ2LTYuNTk0LTEuMTQtOS43OTctMS43NC0yLjM2NS0uNDQyLTQuNDA3LS44MjMtNS42Mi0xLjAxMy0uNzEyLS4xMDYtMS4zMzYtLjE2LTEuOTA0LS4xNi0zLjk0NyAwLTQuNzE3IDIuNjg4LTUuMzQgNC44NS0uNDE3IDEuNDYtLjg5IDMuMTE0LTIuMjMgNC45MS0yLjQxMyAzLjIyNy03LjA5OCA1LjQ4My0xMS4zOTQgNS40ODMtMi43NDggMC01LjE1LS44NzctNy4xNC0yLjYwNS01LjYxMy00Ljg3NS00LjctMTAuNjMtNC4wNS0xMi44OCAxLjEyNy0zLjg5IDMuOTc3LTYuOTE1IDYuOTMtNy4zNjUuOTEzLS4xNCAxLjU5NS0uOTIyIDEuNjAzLTEuODUuMDEtLjkyNS0uNjUyLTEuNzItMS41NjctMS44ODMtMi45MjgtLjUwNS03LjUtLjc1LTEzLjI4LTEuMDYzLTguMzQtLjQ1LTE4LjcyLTEuMDA3LTI5Ljk2LTIuNjEtMTcuMjQ4LTIuNDU1LTIxLjI3NC03LjE1Ny0yMi4xNC05Ljc0LTEuMjU0LTMuNzU2IDIuMzYtNy41MjcgMi4zOTYtNy41NjQuNDkyLS40OS42NzItMS4yMS40Ny0xLjg3My0uMTk2LS42NjQtLjc0LTEuMTY3LTEuNDItMS4zMDgtNDguODQzLTEwLjI0LTU2LjA3My00OC45NzItNTYuMTQtNDkuMzYzLS4xNTctLjkwNi0uOTQyLTEuNTY2LTEuODYyLTEuNTY2LTExLjk3LS4wMDItMjkuMzA0LTIuNDQ1LTMwLjM1Mi03Ljg2Ni0uNjE4LTMuMjEuMDI2LTYuMDEgMS45NzctOC41NjUgNy42OTctMTAuMDggMzIuMTYtMTIuMDQ3IDMyLjQwNi0xMi4wNjUuODQyLS4wNjMgMS41NC0uNjc1IDEuNzEtMS41MDMuMTcyLS44MjQtLjIyNy0xLjY2My0uOTczLTIuMDU1LS4xNzUtLjA5Mi0xNy44MTgtOS40MDUtMzkuNDk4LTI2LjIwNS0yMC44OC0xNi4xNzMtMjUuMzU0LTIyLjEzNS0yNS44MDMtMjYuNTA3LS4zOTQtMy44MTggNi41NTItNS4zNzcgNi42Mi01LjM5My41OS0uMTIgMS4wODYtLjUyIDEuMzM4LTEuMDY4LjI0OC0uNTQ3LjIyMy0xLjE4LS4wNy0xLjcwNC0yMi42ODctNDAuNDQ0LTIwLjEzNC01My4zNS0xNy45ODMtNTcuMDIgMS4xNTgtMS45OCAzLjA4OC0yLjk4NyA1LjczNy0yLjk4NyA1Ljk2MyAwIDE0LjI2IDUuMDc1IDE4LjQ5IDExLjMxLjM2NS41MzQuOTU3LjgzIDEuNTY1LjgzLjMxMyAwIC42MjctLjA3Ny45MTUtLjIzOC44NTUtLjQ3MiAxLjIwOC0xLjUyLjgxMy0yLjQxNUM1LjQ5IDI1NC45MzYgOC4wNSAyMTIuNzMyIDguMTcyIDIxMC45NjRjLjI0Ni0zLjU4NSAxLjA2OC01LjIyIDEuNzMtNS4yMi45NDcgMCAyLjY0IDEuMzg3IDMuNSAyLjM4NS4zNjYuNDMuODk3LjY2IDEuNDM3LjY2LjI1OCAwIC41MjQtLjA1My43NzItLjE2Ni43NjMtLjM0MyAxLjIxLTEuMTQ3IDEuMDk4LTEuOTc3LTQuMTA4LTMwLjMwOC0yLTQ5LjUzOCAxLjM0NC01Ny40M2wuMTM2LS4yOTNjLjkwMy45MjggMi4zNTIgMy42NzMgMy4zMDggNi4zNjcuMjcyLjc2Ljk5IDEuMjYgMS43OCAxLjI2bC4xNy0uMDFjLjg1Ny0uMDc1IDEuNTU1LS43MiAxLjY5Ni0xLjU3MiA0LjczNy0yOC40MDMgMTcuMjctNTUuNjM1IDMxLjE5LTY3Ljc1NyAyLjYwMy0yLjI3IDQuMjMyLTIuNzQzIDUuMTM4LTIuNzQzLjQzNSAwIDEuMDk4LjA5MyAxLjgyNC44OTMgNC4wOSA0LjUzNSAzLjM1IDIxLjM2OCAyLjcxNyAyNy40NzMtLjA5Ny45NC41MTYgMS44MSAxLjQzNiAyLjAzMi4xNDYuMDM2LjI5NS4wNTQuNDQzLjA1NC43NjUgMCAxLjQ3NC0uNDY3IDEuNzYtMS4yMDcgMjAuNjI2LTUyLjk5NyA1My41ODYtODAuNTkgNzcuNjA0LTk0LjQwNUMxNjguODkgNi44NjUgMTg3LjI2IDMuMDc2IDE5Mi45MTcgMi4xNDNjLjM2MiA5Ljg0NC0xMy40NTggMzUuMzc2LTE5LjE2MiA0NC45MzMtLjM4LjYzNi0uMzU0IDEuNDM3LjA3IDIuMDQ0LjM2LjUxNy45NDMuODEzIDEuNTYuODEzbC4zMzItLjAyOCAxMS42Ni0yLjExN2MuNjg3LS4xMjggMS4yNS0uNjIgMS40NjMtMS4yODggMi4xNzctNi44NCA4LjIwNS03LjU4IDEwLjY5NS03LjU4IDUuOTEgMCAxMi41ODYgMy44MTMgMTMuNTMzIDEwLjE5LjY0NyA0LjM3My0uMzcgOC4zNzMtMi44NjQgMTEuMjY1LTIuMjY0IDIuNjIyLTUuNjA0IDQuMTI4LTkuMTYgNC4xMjgtMi40MTUgMC00Ljg5Ny0uNzAyLTcuMTczLTIuMDI2LS4yOS0uMTY2LS42Mi0uMjU2LS45NTMtLjI1NmwtLjA4OC4wMDRjLTEwLjkzOC41Mi0yMi40MzggNi44OTUtMzAuODM3IDExLjU0N2wtLjY3OC4zNzdjLTguNTA0IDQuNzA2LTU0Ljg1IDU1LjIyLTU2LjgxOCA1Ny4zNjgtLjYyNy42OC0uNjY2IDEuNzEzLS4wOTUgMi40NDIuMzcuNDcuOTIzLjcyMyAxLjQ4OC43MjMuMzEgMCAuNjItLjA3My45MS0uMjMyIDYuMDYtMy4zMjMgMTEuMjQ3LTUuMDA1IDE1LjQxNC01LjAwNSA1Ljk3NCAwIDguNjcgMy41ODUgOS44OCA2LjU5Mi4yNTMuNjMzLjgzIDEuMDggMS41MDUgMS4xN2wuMjUuMDE2Yy41ODcgMCAxLjE0Ni0uMjczIDEuNTA1LS43NSAxOS40NDQtMjUuNzggNDQuODgyLTQ3LjEzNyA3My41NjItNjEuNzU1IDMwLjA3NS0xNS4zMzIgNjIuNTYtMjMuMTA2IDk2LjU1Ni0yMy4xMDYgMzQuMjY0IDAgNjYuOTggNy44OTMgOTcuMjM4IDIzLjQ1IDI4Ljg2IDE0Ljg0NyA1NC4zODIgMzYuNSA3My43OTQgNjIuNjI3LjM2OC40OTMuOTM2Ljc2NSAxLjUxNy43NjUuMyAwIC42LS4wNy44OC0uMjE3LjgyMy0uNDMyIDEuMjEtMS40MDIuOTEyLTIuMjgyLTIuODI3LTguMzM0LTMuMS0xNC4wMDQtMi4xMi0xNS45MjYuMjA4LS40MTIuMzg4LS40NjcuNDU2LS40ODguMjc3LS4wODcuNjItLjEzIDEuMDItLjEzIDIuMzEyIDAgOC4zNjUgMS41MSAyMi45MzUgMTEuNjIuMzI2LjIyNS43MDIuMzM4IDEuMDc0LjMzOC41MTggMCAxLjAyNi0uMjEyIDEuMzk1LS42MTMuNjQtLjY5OC42NjctMS43Ni4wNjMtMi40ODQtMi45ODctMy42LTUuOS03LjE2NS04Ljc0My0xMC42NC0xMS45Ni0xNC42MzQtMjIuMjktMjcuMjctMzEuOTMyLTM1LjI4Mi0xMy40OS0xMS4wMTctMjQuOTc3LTEzLjkwNS0zMS4xNS0xNS40NTdsLS45MzQtLjIzNGMtLjE1Ni0uMDQtLjMxMy0uMDYtLjQ3Mi0uMDYtLjMxNiAwLS42MzIuMDgtLjkxMy4yNC0xLjY0My45MS0zLjY1IDEuMzkyLTUuODEgMS4zOTItMy45MyAwLTcuNzgtMS41ODQtMTAuMjktNC4yMzctMi4yNDYtMi4zNzQtMy4zMy01LjUwNS0zLjEzNS05LjA1NC4zNzQtNi43ODQgNS4yMi0xMS41MiAxMS43ODQtMTEuNTIgMS40NiAwIDIuOTY1LjIzNSA0LjQ3My43MSAzLjgwMiAxLjE5IDYuNzYgNC4xNyA3LjU0IDcuNTk4LjQ4NiAyLjE0IDMuMDY4IDIuODQ4IDUuODAyIDMuNiAxLjA0LjI4OCAyLjEyLjU4NCAyLjgzNy45MDUuMjUyLjExMy41MTMuMTY2Ljc3Ni4xNjYuNTY1IDAgMS4xMTYtLjI1IDEuNDgzLS43MTcuNTM4LS42OC41NDYtMS42NC4wMTQtMi4zMjUtMTQuMTc2LTE4LjQxNi0zMC4xMS00NS45NTYtMjcuOC01MC42NDguMDM2LS4wNzQuMDktLjE4LjQ2LS4yMDQgNTEuOTM1IDkuNSA4NC4zNjUgNDcuNDU2IDEwMi40MzIgNzcuNjQgMTkuNjkgMzIuOTA0IDI3LjA4NyA2My45ODYgMjcuMTU3IDY0LjI5Ny4yMDMuODYuOTY4IDEuNDYgMS44NCAxLjQ2bC4xNi0uMDA1Yy45MzQtLjA4IDEuNjctLjgzIDEuNzI3LTEuNzY4IDEuMDk2LTE3LjgyNCA1LTM2LjUwNyA3LjYxMy00MC4zODYgMTYuMjggMTIuMjE3IDIzLjYwOCA1MC40MyAyMy42OCA1MC44Mi4xNDMuNzU2LjcyNyAxLjM1MiAxLjQ3OCAxLjUwNy4xMjcuMDI1LjI1NS4wMzcuMzguMDM3LjYyIDAgMS4yMTMtLjMwNSAxLjU3LS44MzMgMi41NDMtMy43ODMgMy45NzUtNC4wNzcgNC4zNTItNC4wNzcuMjYgMCAyLjU4Ny4yOTQgNC42NiAxMC40ODcgMS4zNTUgNi42NzcgMi4wOTUgMTUuMDM1IDIuNjMzIDIxLjEzNWwuMjE4IDIuNDM3YzYuNTYgNzIuMDQtMTcuNTU0IDEzNS44ODQtMTcuOCAxMzYuNTItLjM1LjkxNi4wNiAxLjk1Mi45NDQgMi4zOC4yNjYuMTI1LjU0NS4xODQuODIyLjE4NC42NSAwIDEuMjc4LS4zMzIgMS42MjctLjkyOCA2Ljc5NC0xMS41NCAxNC44NzItMjEuNjYgMTcuMjg4LTIxLjY2IDIwLjU3OCAyNy41NC0yMy43NzMgODAuMTg1LTI0LjIyIDgwLjcxNS0uNDA1LjQ3LS41NSAxLjExMi0uMzkyIDEuNzEzLjE2Mi42LjYwOCAxLjA4MyAxLjE5MiAxLjI5MyA1LjAzIDEuNzkgNy42NyA0LjEzOCA3Ljg0IDYuOTguNjc4IDExLjUwMy0zMi44OTQgMzAuNzQtNDUuODg2IDM3LjE4Mi0uNzI4LjM2LTEuMTQzIDEuMTQzLTEuMDM2IDEuOTQ1LjEwOC44MDIuNzEyIDEuNDQ2IDEuNTA4IDEuNjA0IDIwLjczIDQuMDc3IDI0LjA4IDguNzYgMjQuMjM2IDExLjE5LjM4IDYuMDM0LTE2LjU4MyAxNC40MzQtMjguNzQ4IDE4LjQ3LS43NDQuMjQ4LTEuMjYuOTMyLTEuMjkyIDEuNzItMS4wOSAyOC4xMzMtNDEuNzggMzkuOTItNTUuMTUzIDQzLjc5Ni0xLjc0Ny41MDUtMy4wMDguODctMy43NzUgMS4xNTItLjg1LjMxLTIuODM3IDEuMDQtMi43MyAyLjg5Ny4xMSAxLjk4IDIuMTY2IDIuNDggNS41NyAzLjMwNSAyLjE2NC41MjYgNi42NjQgMS42MiA3LjIzNSAyLjgyLjAyOC4wNTYuMDAyLjE3LS4wNzguMzM3LTIuNTIyIDUuMzM4LTExLjQwOCAxMS40NDctMTYuNjcgMTMuNDc3LTkuNDIzIDMuNjMyLTE5LjI4NCA1LjQ3My0yOS4zMSA1LjQ3My0xMC45MTMgMC0xOC4wOTctMi4yNTQtMTguMTctMi4yNzhsLS4yNS0uMDY0Yy0uNDM2LS4wNzQtLjc5OC0uMTEyLTEuMTE3LS4xMTItMS4yMTcgMC0xLjg1Ni41Ni0yLjE3NSAxLjAzOC0uNzUgMS4xMDUtLjI4NSAyLjI2LjE2MiAzLjM3OC4yODUuNzA1LjYwNCAxLjUwNS43OCAyLjQ0OC44NTYgNC41MTctLjkzIDguNzY3LTQuODk4IDExLjY2My0xLjUzNSAxLjEyNS00LjA5NCAxLjgyMi02LjY3OCAxLjgyMi0xLjYxNSAwLTQuMDEtLjI3Ni02LjIzMi0xLjU5NS0zLjE5LTEuODk3LTUuMTYtNS4zMS01LjY5Ni05Ljg3OC0uMzg3LTMuMjk3LTIuMzA4LTUuMTg1LTUuMjY1LTUuMTg1LTEuMjI0IDAtMi42NDguMzEyLTQuMzUuOTU3LS4zOTMuMTUtLjgxNS4yOTYtMS4yNDMuNDQ1LTIuNTgzLjkwNi01LjI1NiAxLjg0NS01LjQ5NiA0LjEzNC0uMjIzIDIuMTMgMS45NzQgMy40NjIgMi42OTcgMy45LjcyLjQzNyAxLjk2OCAyLjAzNyAxLjc3NiAzLjUyNC0uMjIgMS43MTQtMi4zODggMi43MDUtNC4xNjcgMy4yMzgtNi4yNTUgMS44NjctMTcuNzggMy4wNzItMjkuMzcgMy4wNzItMi43MjcgMC01LjQ4LS4wNjUtOC4xNzgtLjE5MmwtLjA4OC0uMDAzYy0uODE2IDAtMS41NDQuNTI3LTEuOCAxLjMxLS4yNi44MTMuMDU2IDEuNy43NyAyLjE2NCA5LjczMyA2LjM0IDE5LjQyNyAxMC4zIDI3Ljk4MiAxMy43OTYgNy4xMTUgMi45MDcgMTMuMjg3IDUuNDI2IDE3LjY4NSA4LjYxNy0yLjg3IDIuNTE0LTE5LjM5OCA3LjAyNy0zMC41MTQgNy4wMjciIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNNDk1LjE1MyAyMTcuMjY1cy0yLjY0NC0zNy40MzgtNDguMzE0LTg4LjE2YzAgMC01OS41NzcgMzAuNzA0LTE0Mi45NCAzMC43MDQtODMuMzg0IDAtMTQwLjQ5Mi0zMC43MDYtMTQwLjQ5Mi0zMC43MDZzLTM1LjI5IDMxLjkxLTQ4LjMxNSA4OC4xNmMwIDAgMTM0LjkgMTEwLjczMiAxMzQuOSAyMzQuNDY1IDAgMCA1NS4xODIgMjAuODY4IDExNi45MDgtMS45NyAwIDAgMTEuNDctMTQ0LjQ5NSAxMjguMjUzLTIzMi40OTUiIGZpbGw9IiNkYjFiMzAiLz48ZyBjbGlwLXBhdGg9InVybCgjYSkiIHRyYW5zZm9ybT0ibWF0cml4KC4xMyAwIDAgLS4xMyAwIDU5Mi45MykiPjxwYXRoIGQ9Ik0yMjgzLjQ0IDgzNi42OGMtMjAxLjU4IDAtMzk0LjYyIDM2LjkxLTU3Mi41OSAxMDQuMjktMi4yNiAyLjQ0LTQuNDEgNC43NS02LjQ2IDYuOS00LjU3IDQuODEtNS4xOSAxMi4xMTgtMS41MiAxNy42NSAyLjY5IDQuMDIgNy4xNyA2LjI4IDExLjc5IDYuMjggMS42OSAwIDMuNDMtLjMgNS4wOC0uOTMgMTgyLjg3LTcwLjA5IDM3NS4wOC0xMDUuNjUgNTcxLjMxLTEwNS42NSAxOTkuMTEgMCAzOTQuMDUgMzYuNjQgNTc5LjM3IDEwOC44NyAxLjY4LjY0OCAzLjQyLjk4IDUuMTMuOTggNSAwIDkuNzktMi42NDggMTIuMzctNy4yMyAyLjYzLTQuNjUgMi4zNi0xMC4yMy0uMzYtMTQuNTQtMTg2LjY0LTc1LjIyMi0zOTAuNTUtMTE2LjYyLTYwNC4xMi0xMTYuNjJtLTcwNy4xMyAxNjIuMzljLTk1LjM4IDQ2LjQ1LTE4NS41OSAxMDIuMDUtMjY5LjMzIDE2NS41OC0uNjcgMy40Mi0xLjMxIDYuODUtMS45MSAxMC4zMS0xLjAyIDUuNzMgMS41OCAxMS41MSA2LjU2IDE0LjU1IDIuMjkgMS40IDQuODMgMi4wNyA3LjM5IDIuMDcgMy4wMyAwIDYuMDQtLjk2IDguNTYtMi44OCA3Ni43Ni01OC4xNSAxNTkuODctMTA5Ljg3IDI0Ny4wNS0xNTMuNzEgNi4yLTMuMTIgOS4yMy0xMC4yOCA3LjE2LTE2LjktMS41OC01LjAyLTMuNDktMTEuNDYtNS40OC0xOS4wMm0xNDE1LjI3LjVjLS42OS43OS0xLjQ2IDEuNDUtMi4zIDEuOTYtNC40IDIuNzItNi45OCA3LjYxLTYuNzUgMTIuNzQuMjYgNS4xOCAzLjMxIDkuNzkgNy45NCAxMi4wOCA5OC4xMSA0Ny44NiAxOTIuMjcgMTA2LjY4IDI3OS44NiAxNzQuNzggMi41NiAxLjk5IDUuNjMgMi45OSA4LjcgMi45OSAzLjEzIDAgNi4yNS0xLjA1IDguODMtMy4xIDMuMjgtMi42MSA1LjE0LTYuNDQgNS4zMi0xMC40Mi05Mi43NS03NC4yNC0xOTMuNzctMTM4LjQzLTMwMS42LTE5MS4wM20zNDYuNjYgMjI4LjQ1Yy0xLjIzIDEuMDItMi40OCAyLjAzLTMuNzUgMy4wNS0zLjMgMi42Ny01LjI4IDYuNjUtNS4zMiAxMC44OS0uMDYgNC4yMyAxLjc4IDguMjcgNS4wMiAxMS4wMSA2NC43MSA1NC44IDEyNC44MyAxMTMuODEgMTYwLjc3IDE1Ny44OCAyLjc5IDMuNDEgNi44NSA1LjIxIDEwLjk4IDUuMjEgMi41OSAwIDUuMTktLjcgNy41Mi0yLjE2IDEuOTEtMS4xOSAzLjQ1LTIuNzggNC41Ni00LjU5LTU1LjA4LTY1LjA1LTExNS4yMS0xMjUuNjctMTc5Ljc4LTE4MS4yOW0tMjEzMC40NiAxOC4yNmMtNjguMSA2MC43LTEzMC45NyAxMjcuMDEtMTg3Ljk5IDE5OC4zMS0uMjIgMS4xOC0uNDUgMi4zNC0uNjcgMy40OC0xIDUuMDktMS45MyA5LjkyLTIuMzggMTQuMjgtLjYxIDYuMTggMi44NCAxMi4wMiA4LjU2IDE0LjQ2IDEuOC43NyAzLjY4IDEuMTUgNS41NSAxLjE1IDQuMDYgMCA4LjA0LTEuNzYgMTAuOC01IDM3LjczLTQ0LjMyIDEyNi4wOS0xNDguMSAxNzkuOS0xOTYuNjUgMi44OC0yLjYxIDQuNTgtNi4yNSA0LjY4LTEwLjEzLjExLTMuODgtMS4zOC03LjYyLTQuMTEtMTAuMzctNC4xNy00LjIyLTkuMDQtNy40NC0xNC4zNC05LjUzbTIzMzguMDQgMTk2Ljc3Yy0yLjQ2LjY3LTQuNzUgMi02LjYxIDMuOTktNC44MSA1LjE1LTUuMSAxMy4wNS0uNzIgMTguNTIgMzguOTcgNDguNjkgNzUuMjUgOTkuODkgMTA3Ljg5IDE1Mi4xNSAyLjYyIDQuMTkgNy4yMiA2LjY1IDEyLjAyIDYuNjUgMS4wOSAwIDIuMTQtLjEgMy4yMy0uMzYgMi45NC0uNjggNS41LTIuMjcgNy40MS00LjQzLTM3LjItNjEuNjQtNzguMzktMTIwLjYxLTEyMy4yMi0xNzYuNTJtLTI1NTMuMDkgNTAuMzJjLTIuNDU3IDAtNC45MzMuNjYtNy4xNTYgMS45Ny0yLjUwNCAxLjQ3LTUuMDk0IDIuODQtNy43NTQgNC4wOS00MS4xNiA1Ni4yMS03OC43NTcgMTE1LjE0LTExMi41MDQgMTc2LjU0LjU5OCAzLjcgMS4zIDcuMDggMi4xMjIgMTAuMDcgMS41MDMgNS41NSA2LjI0MiA5LjY0IDExLjk2IDEwLjMzbDEuNjc2LjExYzUuMTAyIDAgOS44ODctMi43NSAxMi40MDYtNy4zIDI0LjIyMy00My42NCA4OS45MTUtMTQyLjQ5IDExMS0xNzMuNjggMy43My01LjQ4IDMuMTQtMTIuODItMS4zOS0xNy42NC0yLjc2LTIuOTQtNi41MjctNC40OS0xMC4zNi00LjQ5bTI3NjguNDMgMzAyLjY1Yy0yLjk1LjY3LTUuNjcgMi4yOC03LjcgNC42OS0zLjQ5IDQuMTMtNC4zMSA5LjkxLTIuMTIgMTQuODYgNzAuMjkgMTU4LjQ4IDExMy45NyAzMjYuNjQgMTI5LjgxIDQ5OS44Mi42MSA2LjUxIDUuNTYgMTEuNzYgMTIuMDMgMTIuNzNsMi4xMS4xN2MuMTUgMCAuMzEgMCAuNDYtLjAxLTE0LjQ2LTE4OC4yOC02MS4xNS0zNjcuNTQtMTM0LjU5LTUzMi4yNk03NTUuMTQ1IDE5MjMuODNjLTMzLjYyNSA5Ni45OC01OC4yOTcgMTk4LjIyLTcyLjk5IDMwMi42IDEuMzI1IDEuNzkgMi4zNzYgMy40NyAzLjEzNCA0Ljk4IDIuNDMzIDQuODggNy4zNjYgNy44NCAxMi42ODMgNy44NGwyLjExNy0uMTVjNi4wNzgtLjkxIDEwLjg2My01LjY2IDExLjg2LTExLjcxIDE1Ljk4NC05Ni40OSA0MS45ODQtMjA1LjI1IDY2LjI3Ny0yNzcuMDYgMi40MzMtNy4xOC0xLjIzLTE0Ljk5LTguMy0xNy43NC00Ljk3OC0xLjk0LTkuOTI3LTUuMDItMTQuNzgyLTguNzZtLTcwLjQyNiA0MDguNjVjLTIuNTQ4IDAtNS4wODcuNjgtNy4zNTMgMi4wNi0yLjI3NyAxLjM3LTQuNjI1IDIuNzktNy4wNDMgNC4yMi0yLjY3NiAzOC4wMi00LjAzIDc2LjM2LTQuMDMgMTE1LjA2IDAgNy4wOS4wNDYgMTQuMTIuMTM2IDIxLjE4IDIuNDA2LjQ3IDQuNjk1LjcyIDYuODUuNzIgNS40MiAwIDEwLjI1LTEuMzYgMTQuMzE4LTQuMDMgMy45Ni0yLjYzIDYuMzUtNy4wNSA2LjM1LTExLjgxLjA2OC0zMi43IDIuMzk2LTczLjMyIDQuOTE1LTExMi4zMi4zMzYtNS4yNy0yLjI5My0xMC4yNy02Ljc5Ny0xMy4wMi0yLjI0Ni0xLjM4LTQuNzkzLTIuMDYtNy4zNDctMi4wNm0zMjE0LjE4IDQ3LjU1Yy0uNC4wNS0uODEuMTItMS4yMS4yLTYuNzYgMS40Ny0xMS40OCA3LjU2LTExLjIxIDE0LjQ2Ljc5IDE4LjczIDEuNyA0My4zOSAxLjcgNjguMTMgMCA4NS42OS03LjE2IDE3Mi45Ni0yMS4yOCAyNTkuMzMtMS4wNyA2LjU2IDIuNTYgMTIuOTggOC43NCAxNS40NmwuMDkuMDNjMTYuMzEtOTIuMTMgMjQuODItMTg3LjAxIDI0LjgyLTI4My44MiAwLTI0Ljc1LS41NS00OS4zMi0xLjY1LTczLjc5TTY4MS44NTUgMjYxNy44NGMtMi4xNjQgMC00LjUyLjIzLTcuMjcuNzUgNC41MzYgNDQuODcgMTAuODkyIDg5LjA3IDE5LjAyNCAxMzIuNzguMzI4LjMxLjY2LjYyLjk5NS45NCAyLjY4OCAyLjU0IDYuMTggMy44NSA5LjY5NiAzLjg1IDIuMzEgMCA0LjYyMi0uNTUgNi43MzUtMS42OSA1LjM4My0yLjg5IDguMy04LjkgNy4yNDItMTQuOTEtNi42MS0zNy43OC0xMS41Mi03Mi0xNS4wNTQtMTA0LjY1LS4xNS0xLjQ2LS41MjgtMi44OC0xLjEyNS00LjIxLTMuNjYtOC4yOS0xMC44NjQtMTIuODYtMjAuMjQzLTEyLjg2bTMxMjEuMTA1IDM5MC41NWMtMS4xNi4yLTIuMjguNC0zLjM2LjYtNC44OS45Mi04Ljk4IDQuMzItMTAuNzEgOS0zMC44MSA4My4wOS02OS41NCAxNjUuMS0xMTUuMDkgMjQzLjcxLTMuMDIgNS4xOS0yLjQgMTEuNjMgMS4zNSAxNi4xNiA1MC40OS04NS4xIDkzLjQxLTE3NS4yNCAxMjcuODEtMjY5LjQ3bS0zMDE5LjUwMyA1MC45YzM0LjMgODQuOTEgNzUuNjIgMTY2LjI1IDEyMy4yMDcgMjQzLjI4LjIxNS4wMS40My4wMi42NDUuMDIgMi45NjMgMCA1LjkyOC0uOTMgOC40Ny0yLjgyIDUuODIyLTQuMzYgNy4zODgtMTIuMzkgMy42Ni0xOC42MS0zOC42LTY0LjU5LTcyLjU2NS0xMzEuNTItMTAwLjk0LTE5OC45NS0uNTI3LTEuMjctMS4yNS0yLjQ1LTIuMTM3LTMuNTEtNy44NTUtOS41NS0xNy43LTE1Ljg0LTI5LjI5LTE4LjctMS4yMzMtLjMtMi40NC0uNTQtMy42MTYtLjcxbTI4MDEuNzAzIDM0OS4zMmMtNC4zNiAwLTguNjIgMi4wNC0xMS4zOCA1Ljc0LTE0NS41OSAxOTUuOTQtMzM3IDM1OC4zNS01NTMuNDUgNDY5LjY5LTIyNi45NCAxMTYuNjktNDcyLjMgMTc1Ljg5LTcyOS4yOCAxNzUuODktMjU0Ljk3IDAtNDk4LjYxLTU4LjMtNzI0LjE3LTE3My4yOS0yMTUuMS0xMDkuNjQtNDA1Ljg5LTI2OS44MS01NTEuNzItNDYzLjE2LTIuNjktMy41OC02Ljg4LTUuNjQtMTEuMjktNS42NGwtMS44OC4xM2MtNC44LjYzLTguOTI3IDMuNjgtMTAuOTcgOC4wMiAyOTUuMTIgMzkxLjcyIDc2NC4yIDY0NC45OCAxMjkyLjQyIDY0NC45OCA1MzUuNzggMCAxMDEwLjc2LTI2MC42MyAxMzA1LjAyLTY2MS45Ny0xLjA5LS4yNi0yLjE5LS4zOS0zLjMtLjM5IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTIyOTEuMDUgODY1LjIyYy0xOTYuMjMgMC0zODguNDQgMzUuNTYtNTcxLjMxIDEwNS42NS0xLjY1LjYzLTMuMzkuOTMtNS4wOC45My00LjYyIDAtOS4xLTIuMjYtMTEuNzktNi4yOC0zLjY3LTUuNTMyLTMuMDUtMTIuODQgMS41Mi0xNy42NSAyLjA1LTIuMTUgNC4yLTQuNDYgNi40Ni02LjktNDUuOTIgMTcuMzktOTAuNzMgMzYuNzYtMTM0LjU0IDU4LjEgMS45OSA3LjU2IDMuOSAxNCA1LjQ4IDE5LjAyIDIuMDcgNi42Mi0uOTYgMTMuNzgtNy4xNiAxNi45LTg3LjE4IDQzLjg0LTE3MC4yOSA5NS41Ni0yNDcuMDUgMTUzLjcxLTIuNTIgMS45Mi01LjUzIDIuODgtOC41NiAyLjg4LTIuNTYgMC01LjEtLjY3LTcuMzktMi4wNy00Ljk4LTMuMDQtNy41OC04LjgyLTYuNTYtMTQuNTUuNi0zLjQ2IDEuMjQtNi44OSAxLjkxLTEwLjMxLTM0LjE1IDI1LjkxLTY3LjI1IDUzLjE1LTk5LjIgODEuNjMgNS4zIDIuMDkgMTAuMTcgNS4zMSAxNC4zNCA5LjUzIDIuNzMgMi43NSA0LjIyIDYuNDkgNC4xMSAxMC4zNy0uMSAzLjg4LTEuOCA3LjUyLTQuNjggMTAuMTMtNTMuODEgNDguNTUtMTQyLjE3IDE1Mi4zMy0xNzkuOSAxOTYuNjUtMi43NiAzLjI0LTYuNzQgNS0xMC44IDUtMS44NyAwLTMuNzUtLjM4LTUuNTUtMS4xNS01LjcyLTIuNDQtOS4xNy04LjI4LTguNTYtMTQuNDYuNDUtNC4zNiAxLjM4LTkuMTkgMi4zOC0xNC4yOC4yMi0xLjE0LjQ1LTIuMy42Ny0zLjQ4LTE0LjM3IDE3Ljk4LTI4LjM2IDM2LjI1LTQxLjk3IDU0Ljg0IDIuNjYtMS4yNSA1LjI1LTIuNjIgNy43NTQtNC4wOSAyLjIyMy0xLjMxIDQuNy0xLjk3IDcuMTU2LTEuOTcgMy44MzMgMCA3LjYgMS41NSAxMC4zNiA0LjQ5IDQuNTMgNC44MiA1LjEyIDEyLjE2IDEuMzkgMTcuNjQtMjEuMDg1IDMxLjE5LTg2Ljc3NyAxMzAuMDQtMTExIDE3My42OC0yLjUyIDQuNTUtNy4zMDQgNy4zLTEyLjQwNiA3LjNsLTEuNjc2LS4xMWMtNS43MTgtLjY5LTEwLjQ1Ny00Ljc4LTExLjk2LTEwLjMzLS44Mi0yLjk5LTEuNTI0LTYuMzctMi4xMjItMTAuMDctNDMuMzM2IDc4Ljg0LTgwLjMgMTYxLjctMTEwLjE3IDI0Ny44NiA0Ljg1NCAzLjc0IDkuODAzIDYuODIgMTQuNzggOC43NiA3LjA3IDIuNzUgMTAuNzM0IDEwLjU2IDguMyAxNy43NC0yNC4yOTIgNzEuODEtNTAuMjkyIDE4MC41Ny02Ni4yNzcgMjc3LjA2LS45OTcgNi4wNS01Ljc4MiAxMC44LTExLjg2IDExLjcxbC0yLjExNy4xNWMtNS4zMTcgMC0xMC4yNS0yLjk2LTEyLjY4NC03Ljg0LS43Ni0xLjUxLTEuODEtMy4xOS0zLjEzNC00Ljk4LTUuMjE1IDM3LjA0LTkuMTcyIDc0LjUyLTExLjgzMiAxMTIuMzMgMi40MTgtMS40MyA0Ljc2Ni0yLjg1IDcuMDQzLTQuMjIgMi4yNjYtMS4zOCA0LjgwNS0yLjA2IDcuMzUyLTIuMDYgMi41NTMgMCA1LjEuNjggNy4zNDYgMi4wNiA0LjUwNCAyLjc1IDcuMTMzIDcuNzUgNi43OTcgMTMuMDItMi41MiAzOS00Ljg0NyA3OS42Mi00LjkxNCAxMTIuMzIgMCA0Ljc2LTIuMzkgOS4xOC02LjM1MiAxMS44MS00LjA2NyAyLjY3LTguOSA0LjAzLTE0LjMxNyA0LjAzLTIuMTU1IDAtNC40NDQtLjI1LTYuODUtLjcyLjYyIDQ4LjM3IDMuMzc1IDk2LjM0IDguMTU2IDE0My41OSAyLjc1LS41MiA1LjEwNS0uNzUgNy4yNy0uNzUgOS4zNzggMCAxNi41ODIgNC41NyAyMC4yNDIgMTIuODYuNTk3IDEuMzMuOTc2IDIuNzUgMS4xMjUgNC4yMSAzLjUzNSAzMi42NSA4LjQ0NSA2Ni44NyAxNS4wNTQgMTA0LjY1IDEuMDYgNi4wMS0xLjg2IDEyLjAyLTcuMjQyIDE0LjkxLTIuMTEzIDEuMTQtNC40MjYgMS42OS02LjczNCAxLjY5LTMuNTE1IDAtNy4wMDctMS4zMS05LjY5NS0zLjg1LS4zMzUtLjMyLS42NjctLjYzLS45OTYtLjk0IDE5Ljg0IDEwNi42NSA1MC4xNzUgMjA5LjczIDg5Ljg0NyAzMDcuOTIgMS4xNzYuMTcgMi4zODMuNDEgMy42MTcuNzEgMTEuNTkgMi44NiAyMS40MzQgOS4xNSAyOS4yOSAxOC43Ljg4NiAxLjA2IDEuNjEgMi4yNCAyLjEzNiAzLjUxIDI4LjM3NSA2Ny40MyA2Mi4zNCAxMzQuMzYgMTAwLjk0IDE5OC45NSAzLjcyOCA2LjIyIDIuMTYyIDE0LjI1LTMuNjYgMTguNjEtMi41NDIgMS44OS01LjUwNyAyLjgyLTguNDcgMi44Mi0uMjE2IDAtLjQzLS4wMS0uNjQ2LS4wMiAyNi4yNjIgNDIuNTEgNTQuMzkgODMuNjUgODQuMzU2IDEyMy40MiAyLjA0My00LjM0IDYuMTctNy4zOSAxMC45Ny04LjAybDEuODgtLjEzYzQuNDEgMCA4LjYgMi4wNiAxMS4yOSA1LjY0IDE0NS44MyAxOTMuMzUgMzM2LjYyIDM1My41MiA1NTEuNzIgNDYzLjE2IDIyNS41NiAxMTQuOTkgNDY5LjIgMTczLjI5IDcyNC4xNyAxNzMuMjkgMjU2Ljk4IDAgNTAyLjM0LTU5LjIgNzI5LjI4LTE3NS44OSAyMTYuNDUtMTExLjM0IDQwNy44Ni0yNzMuNzUgNTUzLjQ1LTQ2OS42OSAyLjc2LTMuNyA3LjAyLTUuNzQgMTEuMzgtNS43NCAxLjExIDAgMi4yMS4xMyAzLjMuMzkgMzAuOTUtNDIuMjIgNTkuODctODUuOTQgODYuNjktMTMxLjE0LTMuNzUtNC41My00LjM3LTEwLjk3LTEuMzUtMTYuMTYgNDUuNTUtNzguNjEgODQuMjgtMTYwLjYyIDExNS4wOS0yNDMuNzEgMS43My00LjY4IDUuODItOC4wOCAxMC43MS05IDEuMDgtLjIgMi4yLS40IDMuMzYtLjYgMzEuNzctODcuMDIgNTYuMjYtMTc3LjQ3IDcyLjc3LTI3MC43NWwtLjA5LS4wM2MtNi4xOC0yLjQ4LTkuODEtOC45LTguNzQtMTUuNDYgMTQuMTItODYuMzcgMjEuMjgtMTczLjY0IDIxLjI4LTI1OS4zMyAwLTI0Ljc0LS45MS00OS40LTEuNy02OC4xMy0uMjctNi45IDQuNDUtMTIuOTkgMTEuMjEtMTQuNDYuNC0uMDguODEtLjE1IDEuMjEtLjItLjc4LTE3LjMxLTEuODMtMzQuNTktMy4xNS01MS43NS0uMTUuMDEtLjMxLjAxLS40Ni4wMWwtMi4xMS0uMTdjLTYuNDctLjk3LTExLjQyLTYuMjItMTIuMDMtMTIuNzMtMTUuODQtMTczLjE4LTU5LjUyLTM0MS4zNC0xMjkuODEtNDk5LjgyLTIuMTktNC45NS0xLjM3LTEwLjczIDIuMTItMTQuODYgMi4wMy0yLjQxIDQuNzUtNC4wMiA3LjctNC42OS0yNy4xNC02MC44OS01Ny45NS0xMTkuODEtOTIuMTItMTc2LjQ1LTEuOTEgMi4xNi00LjQ3IDMuNzUtNy40MSA0LjQzLTEuMDkuMjYtMi4xNC4zNi0zLjIzLjM2LTQuOCAwLTkuNC0yLjQ2LTEyLjAyLTYuNjUtMzIuNjQtNTIuMjYtNjguOTItMTAzLjQ2LTEwNy44OS0xNTIuMTUtNC4zOC01LjQ3LTQuMDktMTMuMzcuNzItMTguNTIgMS44Ni0xLjk5IDQuMTUtMy4zMiA2LjYxLTMuOTktOS4xMS0xMS4zNy0xOC4zOS0yMi42My0yNy44LTMzLjc0LTEuMTEgMS44MS0yLjY1IDMuNC00LjU2IDQuNTktMi4zMyAxLjQ2LTQuOTMgMi4xNi03LjUyIDIuMTYtNC4xMyAwLTguMTktMS44LTEwLjk4LTUuMjEtMzUuOTQtNDQuMDctOTYuMDYtMTAzLjA4LTE2MC43Ny0xNTcuODgtMy4yNC0yLjc0LTUuMDgtNi43OC01LjAyLTExLjAxLjA0LTQuMjQgMi4wMi04LjIyIDUuMzItMTAuODkgMS4yNy0xLjAyIDIuNTItMi4wMyAzLjc1LTMuMDUtMTQuNzgtMTIuNzMtMjkuODItMjUuMjItNDUuMDYtMzcuNDItLjE4IDMuOTgtMi4wNCA3LjgxLTUuMzIgMTAuNDItMi41OCAyLjA1LTUuNyAzLjEtOC44MyAzLjEtMy4wNyAwLTYuMTQtMS04LjctMi45OS04Ny41OS02OC4xLTE4MS43NS0xMjYuOTItMjc5Ljg2LTE3NC43OC00LjYzLTIuMjktNy42OC02LjktNy45NC0xMi4wOC0uMjMtNS4xMyAyLjM1LTEwLjAyIDYuNzUtMTIuNzQuODQtLjUxIDEuNjEtMS4xNyAyLjMtMS45Ni0zNC4wMS0xNi41OS02OC43Mi0zMi4wNC0xMDQuMDItNDYuMjcgMi43MiA0LjMxIDIuOTkgOS44OS4zNiAxNC41NC0yLjU4IDQuNTgyLTcuMzcgNy4yMy0xMi4zNyA3LjIzLTEuNzEgMC0zLjQ1LS4zMzItNS4xMy0uOTgtMTg1LjMyLTcyLjIzLTM4MC4yNi0xMDguODctNTc5LjM3LTEwOC44N200LjA5IDEyOC40MmguMDRjMTM0LjI2IDAgMjkwLjQgMTkuMjcgNDUyLjc1IDc4Ljc0LjM5LjE1LjgyLjMxIDEuMjIuNDUuNDguMTguOTQuMzUgMS40Mi41Mi4zOS4xNS44LjMgMS4xOS40NSAwIDAgODYuMDEgMTA4My43MSA5NjEuODkgMTc0My43MSAwIDAtMTkuODMgMjgwLjc5LTM2Mi4zNiA2NjEuMjEgMCAwLTQ0Ni44Mi0yMzAuMjktMTA3Mi4wMy0yMzAuMjktNjI1LjM5IDAtMTA1My43IDIzMC4yOS0xMDUzLjcgMjMwLjI5cy0yNjQuNjc3LTIzOS4zMy0zNjIuMzYtNjYxLjIxYzAgMCAxMDExLjc1LTgzMC40OCAxMDExLjc1LTE3NTguNDggMCAwIDE3Mi44NS02NS4zOSA0MjAuMTYtNjUuMzloLjAzIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTIyOTUuMTQgOTkzLjY0aC0uMDMuMDNtLjA0IDBjMTM0LjI0LjAwOCAyOTAuNDIgMTkuMjggNDUyLjc1IDc4Ljc0LTE2Mi4zNS01OS40Ny0zMTguNDktNzguNzQtNDUyLjc1LTc4Ljc0bTQ1My45NyA3OS4xOWMuNDguMTguOTQuMzUgMS40Mi41Mi0uNDgtLjE3LS45NC0uMzQtMS40Mi0uNTIiIGZpbGw9IiNkYjFiMzAiLz48L2c+PGcgY2xpcC1wYXRoPSJ1cmwoI2IpIiB0cmFuc2Zvcm09Im1hdHJpeCguMTMgMCAwIC0uMTMgMCA1OTIuOTMpIj48cGF0aCBkPSJNMjI5NS4xNCA5OTMuNjRoLjA0LS4wNG0tLjAzIDBjLTI0Ny4zMSAwLTQyMC4xNiA2NS4zOS00MjAuMTYgNjUuMzkgMCA5MjgtMTAxMS43NSAxNzU4LjQ4LTEwMTEuNzUgMTc1OC40OHMxMDExLjc1LTgzMC40OCAxMDExLjc1LTE3NTguNDhjMCAwIDE3Mi44OS02NS4zODIgNDIwLjE2LTY1LjM5bTQ1Mi44MiA3OC43NGMuMzkuMTUuODIuMzEgMS4yMi40NS0uNC0uMTQtLjgzLS4zLTEuMjItLjQ1bTIuNjQuOTdjLjM5LjE1LjguMyAxLjE5LjQ1IDAgMCA4Ni4wMSAxMDgzLjcxIDk2MS44OSAxNzQzLjcxLTg3NS44OC02NjAtOTYxLjg5LTE3NDMuNzEtOTYxLjg5LTE3NDMuNzEtLjM5LS4xNS0uOC0uMy0xLjE5LS40NSIgZmlsbD0idXJsKCNjKSIvPjwvZz48ZyBjbGlwLXBhdGg9InVybCgjZCkiIHRyYW5zZm9ybT0ibWF0cml4KC4xMyAwIDAgLS4xMyAwIDU5Mi45MykiPjxwYXRoIGQ9Ik0yMjk1LjE0IDk5My42NGgtLjAzYy0yNDcuMjcuMDA4LTQyMC4xNiA2NS4zOS00MjAuMTYgNjUuMzkgMCA5MjgtMTAxMS43NSAxNzU4LjQ4LTEwMTEuNzUgMTc1OC40OCA5Ny42ODMgNDIxLjg4IDM2Mi4zNiA2NjEuMjEgMzYyLjM2IDY2MS4yMXM0MjguMzEtMjMwLjI5IDEwNTMuNy0yMzAuMjljNjI1LjIxIDAgMTA3Mi4wMyAyMzAuMjkgMTA3Mi4wMyAyMzAuMjkgMzQyLjUzLTM4MC40MiAzNjIuMzYtNjYxLjIxIDM2Mi4zNi02NjEuMjEtODc1Ljg4LTY2MC05NjEuODktMTc0My43MS05NjEuODktMTc0My43MS0uMzktLjE1LS44LS4zLTEuMTktLjQ1LS40OC0uMTctLjk0LS4zNC0xLjQyLS41Mi0uNC0uMTQtLjgzLS4zLTEuMjItLjQ1LTE2Mi4zMy01OS40Ni0zMTguNTEtNzguNzMyLTQ1Mi43NS03OC43NGgtLjA0IiBmaWxsPSJ1cmwoI2UpIi8+PC9nPjxwYXRoIGQ9Ik01MjguOTUgMjk4LjQ4NWMyLjEzNi0xLjIyNiAzLjE2My0zLjUxNiA0LjQ4NS02LjExIDEuODMyIDMuOTY4IDIuOSA5LjQ3MyAzLjIxNSAxMi44NDQtMS41MTgtNC41NzYtNC42NDgtNi40My03LjctNi43MzV6bS0yMS44NjctMTYuNzg3Yy4xMjUtMi45NjQuMjIzLTUuOTM4LjIyMy04LjkzNSAwLTExLjU4NC0uOTgtMjIuOTM4LTIuNzktMzQuMDEyIDUuMzQ1IDcuODU2IDE3LjAzIDI3LjQxMyAxOS4yOTQgMzMuOTEyLTYuOTY1LS4xNC0xNC4xNDIgMi41NDgtMTYuNzI3IDkuMDM2em0tNy44NDMgNzcuNzE4Yy0yLjAyNiA1LjY4NS00Ljg3LTMuMDI2LTkuODgyLTEuNzY0IDkuMDIyLTIwLjM0IDE0LjkwNy00Mi40MDMgMTcuMDI3LTY1LjU1NCAxLjU5OCAzLjg5IDYuMDY3IDEwLjAxMyAxNC44OSA5LjY1OC02Ljc3IDcuOTItMTQuMjkzIDM1Ljg5Ny0yMi4wMzUgNTcuNjZ6bS0yNC4xNDggODAuODFjLTEuODYgMy4xNi02LjgzIDguMzQ0LTUuMzM0IDQuNzA4IDQuMzktMTAuNjY1LS4zMTQtMTcuMjU1LS4zMTQtMTcuMjU1IDIuNTEtLjMxMiA1LjMzMy0uOTQgNy41My00LjA3NiAxLjM1Ny0xLjkzMyAxLjI1NiAxMS4yOTItMS44ODIgMTYuNjIzem0tMTMuNjQ4LTM2LjY2OGM1LjA5LTYuMzYyIDkuODE4LTEzLjAxNyAxNC4xNS0xOS45NTQuNjQ3IDYuNTQzIDEuMTk0IDIxLjY5MiAxLjE5NCAyMS42OTItNS42NC01LjU3Ny0xMy0zLjM3LTE1LjM0NC0xLjczOHptLTE5Ljg0MiAzNi45NzRjLS4zMjMtMy4yNi00LjI5LTYuOTM2LTYuOTctOS4wOCA5Ljc0My04LjI1IDE3LjIwNC0xNS45NDIgMjEuMTQyLTIwLjc3LTIuOTMgNi4zMTQgMS4wMjggMTEuODkyIDUuMTU0IDE0LjEtMTAuNDIgMS43NS0xOS4zMjYgMTUuNzUtMTkuMzI2IDE1Ljc1em0tMTQ0LjA4NSAzMy42MzVjLTUzLjg5IDAtMTAzLjUxNC0yMi43NzQtMTQxLjI0LTYwLjQ5OC0zNy43Mi0zNy43NC02MC40OTctODcuMzktNjAuNDk3LTE0MS4zMSAwLTUzLjg4NSAyMC45ODYtMTA0LjU0MyA1OS4wODQtMTQyLjY0MiAzOC4xMDMtMzguMSA4OC43NjItNTkuMDgyIDE0Mi42NTMtNTkuMDgyIDUzLjg4IDAgMTA0LjUzNCAyMC45ODIgMTQyLjYzOCA1OS4wODIgMzguMDk3IDM4LjEgNTkuMDgzIDg4Ljc1NyA1OS4wODMgMTQyLjY0IDAgMTExLjMxMi05MC40OTYgMjAxLjgxLTIwMS43MiAyMDEuODF6bTkxLjkxNiAyNC44OGMtMTAuMzM2IDYuMDc4IDcuNzQ0LTMzLjIxLjEzNy0zNy44ODUgMTMuMDY1LTYuMzc1IDI1LjMzOC0xNC4wODcgMzYuNzA0LTIyLjkyNS03LjUxIDE2LjA4LTE3LjkwNSA0OS42Ny0zNi44NCA2MC44MXptLTM5LjEzNS0zLjg1NmMtMi4zNSAxLjg0Ny40ODQtMTIuNjYyLTYuOTEzLTUuMjY2LTUuMzc3IDUuMzgtMjguOTY4IDM3LjQ4NC00OC4zMDggNDIuNjY0IDAgMC0xMS4zNy02LjE4LTIzLjc1LTIwLjc0Ny05LjcxNC0xMS40My0xNi4yNDYtMjQuODI1LTIwLjExLTI1LjM3NS0zLjg2Mi0uNTU1LTUuOTMgNi43NzMtMTAuMDcgMy4xODUgMCAwLTEyLjQzNC0xNS4xLTE4LjI0LTIxLjIxMyAyMy4yNyA4LjkyIDQ4LjUxIDEzLjg1NSA3NC45MyAxMy44NTUgMjYuODE4IDAgNTIuNDIzLTUuMDkzIDc1Ljk4OC0xNC4yNzUtOS44MzUgNy41Ni0yMS4zNDggMjUuNDYtMjMuNTI3IDI3LjE3NHpNMTcxLjQ3IDQzOS44NjhjMTAuMTIgNy42NjYgMjAuOTcgMTQuNDEgMzIuNDA0IDIwLjE2LTEuMTI1IDMuNTgzLTMuNzMgMTMuMzEtMi4wMSAyMS45MTcuOTYgNC43OTQgMi44OCA5LjgzMiA1LjI3NyAxNC4zOTMuMzY2LjY5LTI5LjYyOC0yMi4wNTMtMzUuNjctNTYuNDd6TTE1MS4yOCA0MjcuNmMtMTMuMTEtMTIuNTc1LTIxLjU2NS05LjI4LTE4LjMyNS0xMy41NDMgMy4yLTQuMjEyIDEuMzAyLTguOTQgMS4wNTQtMTEuNDE2IDUuOTg0IDcuMDI4IDE2LjcwOCAxOS41NTcgMjMuNTYgMjUuNzM3LTEuMjEyIDEuMjI1LTMuNTM2IDEuODY4LTYuMjktLjc3NnptLTM2LjM1Mi0zMC4wNTZzLTEuOTIzLTE3LjcxMy0uMzg1LTIzLjMxM2MzIDUuNDA4IDExLjA2NyAxNy42MiAxNC41MTYgMjIuNzE3LTQuMjEtMi40NzUtMTAuNDE4LTMuMTE2LTE0LjEzMi41OTd6bS0yNS45NTItNDkuODVjLTIuNTUyLS44NTUtNC44NC0zMC44MTYtMTAuMDItMzcuOTkgNiAuMzk4IDEwLjYzLTMuNzM3IDExLjc4LTYuMDM2IDEuODYgMTEuMjMgNS4xMiAyNS43NiA4LjY5IDM2LjMwOC00LjUzIDEuNzYtNy45NTQgOC41Ni0xMC40NSA3Ljcyek03My43ODMgMjg2LjE0Yy03LjQ3IDQuNDUyLTUuODc2IDEzLjUyOC01LjE3MiAxNS41MTctMi4zNzgtLjUxMy0zLjg4NS4wMTgtMy44ODUuMDE4LTIuNC05LjY4MyAxOS42Ny0zMS4xNSAyMy42NDctMjguNTI3LjAwOCA0LjUxOC4zNTUgMTAuMjcuNjQgMTQuNzE2LTMuNTg2LTIuMTY2LTguOTk4LTUuNDM1LTE1LjIzLTEuNzI0em0xNy43OC00OS42N2MtLjc5MyA0LjUzLTEuNDc3IDkuMS0xLjk3NCAxMy43MjQtLjM4OC44Ny0xLjI2Mi44MDYtNC45MjQtLjU3Mi00LjYwNy0xLjczNyAzLjcyOC0xMC4xNiA2Ljg5Ni0xMy4xNXptMjYuMzg0LTcxLjAzM2MtNC45ODcgOC4zNDMtOS40MzQgMTcuMDQ3LTEzLjI0IDI2LjA5LS41OTYuNzItMS40OTIgMS40ODQtMi44MjggMS44MTMtNS45NjYgMS40NjggNi44NS0xNy45NCAxNi4wNjctMjcuOTAzem0zODQuODQgMzIuNjY2YzEuNjg2IDMuNDQ4LTUuNzYyIDIuMzUzLTguNTA0IDEuODQ2LTQuMTMtMTEuMTQtOS4yMTMtMjEuODE0LTE1LjA5Ni0zMS45NjUgOC45NjQgNS44OTggMTcuNzc0IDE4LjIwNCAyMy42IDMwLjExOHptNjEuMzY4IDE5MC44MTNzNDQuODgtNTIuNjQgMjMuNjQ1LTgwLjk5M2MtNC4xMS01LjQ5LTE5Ljg3MyAyMS4yODQtMTkuODczIDIxLjI4NHMyMy45OC02Mi40MTMgMTcuNDY4LTEzMy45MzVjLTEuMzItMTQuNTA2LTMuNS00Ny4wODYtMTQuOTMtMzAuMDk0IDAgMC03LjUwNC00MC4wMjMtMjUtNTEuNTM1LTMuOTI3IDEuMzEtOC4xMiAyNC42MDctOS4xNjIgNDEuNTg2IDAgMC0yOC4zNzMtMTIxLjczLTEyNy45OTItMTM5LjgxNi0xMC4yNzUgMCAxMi4zIDM1Ljk5NiAyNS4wNDggNTIuNTUtMi4zOC0xLjA3LTcuMDMyLTEuNTY4LTcuMzg2LTMuMTIzLS45OC00LjMwMi00LjY0Ni03LjUyMi04LjU5Ny04Ljc1OC05LjM5Ni0yLjk0My0xNy43MjIgMi43NjUtMTguMjQgMTIuMi0uNzA2IDEyLjc3OCAxMy40OTggMTcuNzUyIDIxLjQ4OCAxMy4zMTMgNS40NjUgMS4zOTggMTcuMDIyIDMuODc1IDMwLjU2MiAxNC45MzMgMTEuNTIgOS41NyAyNC41MzcgMjYuNTk4IDM5LjQxNiA0NC41My01Ljc3LTQuMDA1LTE5LjQ1NS0xMy4xNDctMjQuOTUyLTExLjQ0OC0zLjUxNiAxLjA4Ny0yLjUyIDkuNjg4LjQyMiAxOC4zNTYtMzguMTc1LTUxLjM3My05OS4zMDctODQuNjY4LTE2OC4yMzItODQuNjY4LTY4LjM5NCAwLTEyOS4xMDggMzIuNzgtMTY3LjMzNyA4My40Ny0xLjk3My00LjkxNS04LjIwOC0xMi45MTUtMjcuMjU4LTIuNDc4IDAgMCA0Ni44MS01MS4wNjcgNTQuOTMzLTU1LjU2NCA4LjExOC00LjQ5NSAxOS40MDQtMTAuOSAyOS45Mi0xMS4zOTcgMTAuODYgNi4zMTMgMjMuNDUtMS41MDUgMjEuNDY4LTE0LjktMS44NDYtMTIuNDYyLTIyLjc1NC0xNi43OTMtMjcuMjAyLTIuODNsLTExLjM2NiAyLjA2NHMyMS42MjItMzYuMjQyIDE4LjY0Ny00Ni44NGMwIDAtODQuMTQgOS4yLTEyMy40NDYgMTEwLjE5OCAwIDAgNC4yNy00MS4xNS0xMi40OC0yNi41NjMtMTQuNDkgMTIuNjIyLTI2LjU4IDQwLjU0NS0zMS4wMTcgNjcuMTUyIDAgMC00LjI2NC0xMS45OC02Ljc5LTYuMDI0LTMuMDA0IDcuMDg1LTUuNzI3IDI1LjMzNC0xLjQ0IDU2Ljk2IDAgMC03LjQ3LTguNzc1LTguMzQgMy44MzYtLjU3IDguMzQyLS4zNTQgNDguNTE1IDIyLjIyMyA5OS43MS0xMS40MTYtMTYuODEyLTUxLjkyOC0yNi43Mi05LjIyMyA0OS40MTQgMCAwLTguNDgzIDEuNzM2LTcuOTE3IDcuMjQ4LjUyNyA1LjExMyA1LjQ2NiAxMS4zMTUgMjUuODYzIDI3LjExNiAyMS41MzMgMTYuNjgzIDM4Ljc4NCAyNS43MjMgMzguNzg0IDI1LjcyM3MtMzguOTM1IDIuOTM2LTM1LjE5NSAyMi4zYzEuNzcgOS4xNjMgMzEuNDAzIDkuMTYzIDMxLjQwMyA5LjE2M3M2Ljc3NyAzOS4yNiA1Ni4xNzIgNDkuNjE2YzAgMC0xNC45MSAxNC45NzcgMjAuMjk2IDE5Ljk5NSAxOC43MSAyLjY2NCAzNS40IDIuNDEyIDQyLjEwNCAzLjU3My03LjM3IDEuMTItMTMuNTM4IDE0LjQ0LTMuNzQgMjIuOTUgNi43NzQgNS44OCAxNi44NDMgMi4xNSAyMC43Ni0zLjA5NSAzLjk3Ny01LjMyOCAxLjE5LTkuNjA2IDcuNDc3LTguNjM3IDIuNzA0LjQxNSA5Ljk0MiAxLjg5MyAxNS4wMzIgMi42ODIgMCAwLTEwLjUyNyAxNi43OTYgMzMuNzA1IDEzLjM0NC0xMy4xMTcgMTAuNTYyLTMwLjEwOCAxNS42Ni0zOC43NjYgMjIuMTM1LTkuMjMyIDYuOTAyIDI5LjkgMTIuMTEzIDM1Ljg0NiA2LjE2NSA1Ljk1LTUuOTQ4IDMyLjg2Ny0yNS43NTggMzIuODY3LTI1Ljc1OHMyNC45MTYgMy44NTcgNDYuMTEgMjcuMzQ2YzQuNjEgNS4xMTYgNDQuNTctMy42MDggMzguMjQ2LTguMzU0LTkuNjItNy4yMTctMjcuNDI1LTEwLjc1LTQ0Ljk3OC0yMi4xOCAxNS44MzMuNzQzIDMwLjMtLjgxOCAzNy4yMjItMi44ODQgOC4zOTctMi41MDYgNS4wNzUtOC41MjcgMi43Ni05LjkzMi00LjQtMi42Ny40NzItMy43NyAzLjY0LTQuOTcgNC4wOC0xLjU0MyA2LjQ2Ni0xLjAwNiA2Ljg5IDIuNjEzLjYzIDUuMzQyIDMuMDIyIDguOTcgNi40NDQgMTEgNC45MzIgMi45MjggMTEuNTM3IDEuOTM0IDE0LjYxNS0uMzE0IDQuNDUyLTMuMjUgNi40NTYtOC4xNDggNS41LTEzLjItLjYwOC0zLjIyNC0yLjYxNC00LjkxNi4xNi00LjQyOCAwIDAgMjEuNDQgNi45MDQgNDcuNTIyLTMuMTUzIDUuMTY2LTEuOTkyIDE0LjQ1Mi04LjE0IDE3LjI1Ni0xNC4wNjcgMi44MDgtNS45MjMtMTcuNzc2LTUuNjEzLTEwLjc3OC04LjE4NiA2LjI0OC0yLjI5NyA1Ny40MDgtMTMuMTc2IDU4LjY2LTQ1LjQ4MyAwIDAgNjMuMDM3LTIwLjg5OCA0LjE3Mi0zMi40NzQgMCAwIDY5Ljk1OC0zNC42NzcgMzYuODk3LTQ2LjQ0NyIgZmlsbD0iI2M2ODcwZiIvPjxwYXRoIGQ9Ik00MTMuNDA0IDYzLjEwN2MtMy4yOTgtLjA1NC02LjAxNCAyLjU3LTYuMDcgNS44NjMtLjA1NyAzLjI5NCAyLjU3IDYuMDEgNS44NjQgNi4wNyAzLjI4OC4wNTcgNi4wMS0yLjU2NiA2LjA2Ni01Ljg2NC4wNTYtMy4yOTMtMi41Ni02LjAxMi01Ljg2LTYuMDdNNTI2Ljk4IDE1Ni4xMTRDNDg5Ljg5OCA0NS45NDQgNDMyLjQ1MyAzMi45ODcgNDIzLjgwMyAzMS40ODdjLTYuNzU1LTEuMTc0IDE1LjczMyAzMi45MzggMjAuMTcgMzguNTM1IDQuNDM3IDUuNTk1IDIwLjk3MiAyOC4wMiAyMC45NzIgMjguMDIuMDcyLS4wMDMgNTMuOTAyIDY1LjM0MiA1NC41OSA2Mi4yNzQuNDEtMS44MjctOS42ODQtMTkuOTk1LTIyLjkyNi0zNi4zODYtOS43MS0xMi4wMi0yMS4wMTItMTcuNTg3LTMwLjUzLTI1LjgwMyA3LjY5Ni0uMDY4IDE3LjAzNiA0LjYyOCAxNy4wMzYgNC42MjgtNy4wNzYtMTMuMjItMTMuNDctMTguNzgyLTIyLjA1LTIyLjkzMi02LjY0My0zLjIxNS0xMi4wMzgtNi40NzYtMTYuNC05Ljc4MyA0LjkxNi0xLjkwNyAxMy4yODYgMS4xOSAxMy4yODYgMS4xOS0xLjE1Ny0zLjEwNC0yMi4yNTctMjIuNTYtMjQuMTMtMjkuNTc3IDE1Ljg4NiA3LjgyNiAyNS44ODggMjMuNTM4IDI4LjMyIDI1LjU5Ni0xLjg4NS00Ljg0NS0zLjIzNi0xMS4zMDMtMi40My0xMi45MTggOS44OTcgOS44MSAzMC45ODIgNDkuMTk2IDMwLjk4MiA0OS4xOTZzLTIuOTktMTIuODctMi4xODMtMTQuNzUyYzIuNzMgMS4wMDggMTAuMDYyIDE1LjQxNCAyMi42MDYgNDAuOSAxOC4xMjMgMzYuODM3IDE1Ljg2NCAyNi40MzggMTUuODY0IDI2LjQzOE00NzQuNzI0IDE0MS41NzVjLjQxNiA4LjY2NSAxNi44ODcgMjQuODc2IDI5Ljg0NiA0MS44OTggNy4wMiA5LjIwOCAxMS40NTcgMjAuMjM2IDkuNzY3IDIzLjcwOC0yLjA1IDQuMjIyLTE2LjU5Ni0yLjY0OC0xNC44NTYgNS4zNjYgMS43NDUgOC4wMTMgNTEuOTk4IDYzLjUyMiA0Ny40OTYgMTIwLjEwMyAwIDAgMi4zODIgNC42MTUgMy41ODctNC4xNjIgMS4yMS04Ljc4Ny0xLjc2LTY3LjI0NS0zMC42NjgtMTAzLjQ3Mi03Ljc5My05Ljc2NyA3LjMwMy0xLjI1MiA2Ljc3My01LjUwNS0uNTMtNC4yNS01LjA0Ni0xMi40OS05LjE5OC0yMC4zNS01LjUyLTEwLjQ1Ni0yMC40NC0zMi41NTYtMTcuOTktMzIuMDAyIDIuNDU4LjU1IDEwLjk2IDkuMzE3IDE5LjIxNSAyMy42NTUgMTUuMTUzIDI2LjMxIDIzLjY4NCA1Ni45ODggMjUuOTc0IDY0LjE0OCA4LjY2NSAyNy4wNjggMTAuNTQ4IDQ4Ljg5NSAxMC41NDggNDguODk1czEuNjE3LTY3Ljc5Mi0zNS4xNi0xMjEuMTY2Yy0xMC44MzUtMTUuNzItMjUuNTMtMzYuNTc3LTQ1LjMzNC00MS4xMTUiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNNTc0Ljk3MiAxNzUuMjI2Yy0zLjE5LTYuOTctNi40NDMgMTMuNjYtOC4zMTUgNi45My0xLjg4LTYuNzMzLTQuNTU4LTQyLjE0Mi0xOC43Ni01NC4zNDggMCAwLTcuMDcgMjEuNTcyLTMuNzYzIDQyLjU3IDIuNzcyIDE3LjY0LTI4LjA3LTEzLjE3LTcuMjEgMjEuOTQgMTcuOTk0IDMwLjI4NyAyOC40MyA5Ni4wODIgMjYuOTk4IDEwNy4wNjQgMCAwIDYuNjEzLTI3LjY3LTUuMDk1LTcwLjIzLTMuMzk3LTEyLjM0My0xNS44ODMtMzcuNzQtMTUuNDI3LTQwLjQ4IDIuMDU4LS40NTggNC45MzYgMS4zMDUgMTIuMzM3IDE1LjUzNiAyLjk3NCA1LjcxMyA0Ljk4NyAxMS44NTMgNS41MjggOC4zODUuNTQzLTMuNDctMTMuNDE4LTYxLjkyOC0xMC41ODQtNjIuOTMzIDEuNjQtLjU4NCA2LjA0IDExLjYzNCA5Ljg1MyAyNy4wODQgMi43NjcgMTEuMjE0IDQuNzE1IDIzLjA4OCA1LjU2IDI3LjQ1NyAxLjA1IDUuNDU1IDQuMDA4LTE3LjQyIDUuNjctMTMuNzM0IDEuNjYzIDMuNjguODMgMTYuMjUzLS4wOTMgMjkuMjgtLjczNSAxMC4zNTgtMi40NCA0Ny4zODQgMS41MTggNDcuMzU2IDQuODU0LS4wMzMgNC45MS00MS43MSA0LjY5My02MC4wOTQuMjc3LTkuMDAyLS4xLTI1LjY1LTIuOTA4LTMxLjc4Mk01MjAuOTcyIDI4MC45OTVjLTMuMjg2LS4wNi02LjAwOCAyLjU2Ni02LjA2NCA1Ljg2LS4wNTYgMy4yOTYgMi41NjcgNi4wMTIgNS44NjMgNi4wNyAzLjI5Ni4wNTYgNi4wMDgtMi41NjQgNi4wNjctNS44NjIuMDYzLTMuMjktMi41Ni02LjAxMi01Ljg2NS02LjA2OE00NjcuOTQ1IDQwOC4zMTdjLTMuMjkyLS4wNTYtNi4wMSAyLjU2Ni02LjA2NSA1Ljg2LS4wNjIgMy4zIDIuNTYyIDYuMDEyIDUuODU3IDYuMDcgMy4yOTYuMDYgNi4wMTUtMi41NjYgNi4wNjYtNS44NjMuMDY0LTMuMjkzLTIuNTYzLTYuMDEtNS44NTgtNi4wNjdNNTE2LjcyIDM2NC43OGMtMy42IDE0Ljg0Ni04LjU2IDMxLjA4LTEyLjY0OCAzNy42LTMuNTQ3IDUuNjU1LTYuOTIzLTE4LjgxLTkuNDA1LTE2LjM4LTQuNDUzIDQuMzctLjQyNiAxOS43Ny0zLjY3IDM5LjY3OC0xLjI5NSA3Ljk1NS0zLjY2IDE0LjAxOC02LjA2NCA4LjU2Mi0yLjQwNS01LjQ1Ni0yLjE4Mi01OC4wMTIgMy4wNi02NC4wMTIgNS4yNDUtNS45OSA3LjkyOCA3Ljc4MiAxMi41MjQgNi40NTIgNC41ODgtMS4zMjcgMTQuMDctNTcuMTI0IDI2LjE5LTY2LjQxNyAxMi4xMTItOS4zIDguMDA2IDQwLjExMyA4LjYzMyA0NC4zNDMuNjI3IDQuMjM0LjAyIDE4Ljk5NSAxOS4yODIgMy41MDIgMTkuMjU1LTE1LjQ5IDI5LjA2NS0zOC45NzcgMzAuNjQ1LTM2LjcwOCAyLjk1OCA0LjI0NS0yLjk2OCAzMC45NTYtMzEuMzEgNjIuMDk1LTEwLjM5NCAxMS40MzMgNS43NzQgNy4zMSA3Ljc3NiAxMi43MjMgMS45OTYgNS40MTMtMzEuNDg4IDM3LjIzMy02Mi40ODcgNDIuNDczIDAgLjAwMi0xMy42NDMgMS41MjMgMTcuNjgtMTguMTA3IDE5LjkxMi0xMi40NzcgMzIuNTktMjAuMzE4IDI2LjkxMi0yMS44NjYtNS42NzgtMS41NTMtMTQuNCA3Ljk5OC0yMy4wNjcgNy43NTctMi45ODUtLjA4NCAxMS4zODYtOS43MTggMjAuNjQtMTguNDQgOS44ODYtOS4zMjMgMTcuNTk4LTE4LjI1MyAxNS42LTIxLjU3LTEuODI3LTMuMDMzLTIxLjA3MyAyMC42MDgtMjguNjMgMjMuNDA1LTIuNjY4Ljk4IDMuOTUtMTQuOTMgMS45MzctMTkuMzQ0LTIuMTM3LTQuNzAzLTcuMzI0IDE1LjA0Ni0xMi4wNTQgMjAuNDgtMi41NDYgMi45My40ODMtMTAuNzk1IDMuMzI4LTI0Ljc5IDIuNzQ4LTEzLjUyNyA1LjA4LTI3LjgzIDMuNjI3LTMwLjM3My0xLjgwNi0zLjE1Mi00LjM4OCAxMS45ODgtOC40OTggMjguOTM2IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTQ0My41NTcgNDc4Ljg2bC4wMjYtLjAyM3ptODAuMDMtMzUuMTJjLTE2LjE4LjQyLTQwLjg5NyA3LjE4Ny01Ny43MjggMTYuNTkgMCAwLTEyLjU1IDIuNzg0LTQuNDU1LTE3LjgyIDguMDk4LTIwLjYwNC0yMC45MDMgMTQuMzM3LTIyLjc3IDE3LjMyMy0xLjg3IDIuOTg0LTIuMTM1LTIxLjEtMTAuODktMi45NjUtOC43NiAxOC4xMjctMjcuNjkgNDIuNjU3LTMxLjQxOCA0NS44My0zLjcyNyAzLjE3MiAxLjYyOCA3LjQxIDYuMjUgNC4zMyAyLjI1Ni0xLjUgNi42MjUtNC41NSAxMy4yODUtMTMuMDM2IDUuNDYtNi45NTggMTEuNzU1LTIxLjk0NSAxNC4zNTUtMjQuMjU1IDQuNDU4LTMuOTYtMS4wOTUgMTMuMjI1IDEuNDg3IDExLjM4NSA2LjkzLTQuOTUgOC44NS0xMy4zNjYgMTIuODctMTkuOCA0Ljk1LTcuOTIyIDcuMjQ0LTMuMTU3IDMuOTYyIDMuNDYzIDAgMC01Ljk0MiAxMy4wNjQgMS45OCA5LjQwNyA3LjkyLTMuNjYgMjUuMTMzLTE0Ljg4IDQzLjA2NC0xNS4zNDggNC4zNzItLjExMiAxMC45NTguNzUgNS40NDUgMi45NzMtMTcuNjczIDMuNTM1LTk1LjQ1NyA0NS42MzQtMTAyLjUwOCA1Ny45NjUtMS4yNjQgMi4yMi03LjM3IDExLjYyMyAxMC43NjUtLjAxNiAxNS4wMjQtOS42NDYgODIuNTc2LTQ2Ljg2IDkzLjU5Ni01MS45MDcgMTEuMDItNS4wNTUgMjcuMS0xMi4zMDIgMzYuOTUzLTE1LjM5OCA5LjA3Ni0yLjg1NiAxLjk0Ny05LjE0NS0xNC4yNDMtOC43MjNNNTE0LjY4MyA0NzAuNjZzLTUuMDg0IDI2Ljk3Ni01OS4zNTQgMzguODk2Yy0xMS45IDIuNjEzLTEwLjQ4MyA3IDYuMTUgMTAuMzg4IDguNjI3IDEuNzYtMjAuNDUgMTcuOTg4LTUwLjA5MiAxMS40MzQtNy43NTYtMS43MTYtNC45MDgtNC45OTQgNS44MzgtNC41NDUgMTEuOTEuNDk4IDIzLjU2Mi0yLjY3NSAyNy43MjQtNC4zOSA1LjMwMi0yLjE4NS02LjU2LTMuNDc2LTEwLjk1My00LjQxNS00LjM5LS45NDQtOC40MDYuMyAxMS4xMjMtMTAuNjEgMTkuNTI3LTEwLjkxIDY5LjU2My0zNi43NTggNjkuNTYzLTM2Ljc1OE0zOTYuOTQ1IDUzOS4zNzRjLTMuMjkzLS4wNi02LjAxIDIuNTYyLTYuMDY1IDUuODYzLS4wNjIgMy4yOTMgMi41NjIgNi4wMDcgNS44NiA2LjA3IDMuMjkyLjA1NyA2LjAxNy0yLjU3MiA2LjA2OC01Ljg2Ny4wNi0zLjI5My0yLjU2OC02LjAxLTUuODYzLTYuMDY2TTMzOS4yMDIgNTAzLjY3YzguODY2LTEwLjY0Mi45NiAxMi43NSA1Ljk4OCA3LjQzOCAxMi45NS0xMy42ODQgMjkuNzM0LTM0LjExNyAzMS4yNjctMzQuMDIgMy45MDMuMjQ1IDIuNjYzIDE4LjY3Ny0yLjEzIDI3LjEtNi45OTYgMTIuMjk3LTIxLjg3IDIyLjMtMTIuOTI2IDIwLjMxIDEyLjE4NS0yLjcxMyAzMS4xNDItMTUuOCAyNy45OC02LjMyNS0yLjUyNiA3LjU3NS02LjM0NSAxOC4xOC0zMC4wODYgMjQuMzU2LTYuNjgyIDEuNzM2IDExLjA5OCA3LjA4MyA1Ljc1IDkuNDQ2LTguMyAzLjY2Ny00Ni45OSAzLjQyMy00NS4zMjMtMS40MjMgMS42Ni00Ljg2IDEyLjYyLTQuNCAyMi43MTYtMi4zNzYgMS45ODYuNCA0LjY2OC4zMiA2LjE3Mi0xLjE4NSAxLjkwMi0xLjkwMi0xMS40OS00LjEtMTAuNTE0LTYuMS45MDgtMS44NjMgOC4wNy0yLjE5IDE0LjUyOC0zLjgwMiA3LjE5NS0xLjgwMiAxNC44MS00LjQ1MiAxNi4xMDUtNi43MzIgMS44Ni0zLjI3LTcuMDU3LS4wNDUtMTYuODEzIDIuNTktNy4zNjggMS45OS0xMi43MyAxLjQ2NC0xMy4xNzMuNTQ1LS45NzctMi4wNDUgMzIuMjM3LTI1Ljk1NSAzMy42MDctNDMuMDguNjA3LTcuNTMtMzIuNTQgMzYuMzg2LTM3LjIzNiAzOC4zMzQtNC43MDIgMS45NDcgNC4yNDctOC4xMyAzLjYzNi0xMC44NzgtMS43NC03Ljc3My0yMC4yMTYgMjYuODEyLTI5Ljc4NyAyNC40MTcgMCAwLTQuNzY1LTIuNzQtOC4wODQtNS42NjYgNy40NjItNC4xNjYgMTcuMjYtNy42NiAzOC4zMjYtMzIuOTVNMjgzLjE1NyA1NjIuNTU0cy0yNi41ODQgMTguNzE4LTI4LjQ0OCAyMC40NzhjLTEuODY0IDEuNzYtMTMuMDA2IDEuNzQ3LTEzLjgwMy4yNi0uNzk3LTEuNDkgMTIuNDkzLTcuNjg1IDE4LjM0NC0xMS4yNDQgNy42ODMtNC42NzIgMTEuODkyLTguMDcgMTUuMTg3LTkuOTYgMCAwIDIuOS4wNyA4LjcyLjQ2NiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0zNDYuOTYyIDU3Ni44NjdjLTYuNDE4LTMuMDUyLTExLjQ3NC02LjUyLTE2LjIwNC05LjY4LTMuNjA1LTIuNDEtMTUuNDIyLTEyLjQ2My0yMy45NS0xOC4yMi0yLjYxMy0xLjMwNC0zLjg1My45NzMtNi4yNi42MyAyLjA2Mi42MTcgMS40OTggMy43NjQtMS4zNDggMi43OS0xMi4xMTYtNC4xMzQtMzIuMzEzLTQuODItMzguOTk4LTUuNTY3LTguODcyLS45ODUgNS45MzUtNS4yNzcgMy40NTItNy4zMTItMy43MDUtMy4wMy00MC42OS0yLjQ2LTQ0LjA3Ny04LjcxLTIuMjItNC4wOTggMzAuMDkyIDEuMDUgMjMuNzY2LTYuNDA1LTQuNDM0LTUuMjM0LTEyLjU3Mi0xMC45NDQtMTguMzU4LTIxLjY1Ny0yLjQ3My00LjU3OC04LjU5Ni0xMy4xNDYtNy4yOS0xNy42MzggMS40MzctNC45MjQgMTkuNiAyNy41MzQgMjguMDQ0IDI3LjY4IDMuODY4LjA2Ny41Ny02LjUyIDQuODU1LTUuNzQgNi43IDEuMjE2IDkuMDU0IDI2LjQyIDUyLjYyIDQzLjcyNSAwIDAgNi43MTUuMzM3IDMuNDktMS44OTYtOS4wNDQtNi4yNy0yOC44OTUtMjAuMDEtMzkuNjY3LTMyLjE3LTguODU0LTEwLTE0LjA1LTIxLjAxLTE3Ljg3Ny0yMC45MzItMy44MjguMDczLTIuNzE1IDUuNjU3LTguOTYzIDIuMDIzLTQuMDktMi4zOC0yNy41ODUtMzUuMjQzLTMwLjE3Ny0yNi42NC0yLjU5MiA4LjYwNS0uMiAxOS4xNTUgNi4yNiAzMS45MjQgMCAwIDExLjAwMiAxNC4yNiA3LjAyMiAyMC41Mi0zLjk3NSA2LjI1Ny0zMC42MDItMi41ODItMjAuNzIgNS44NjggOS44OCA4LjQ0NSAzNi41MzIgMTAuMDU0IDQxLjg2NSAxMS43MjYgNS4zMzIgMS42NjgtOS4zNjQgOS43Mi0uMTkgMTAuODk2IDMzLjQzMiA0LjI4NCA1NC43MTgtLjE1NCA4Mi44MTUgMTguMzY2LjMxLjIwOC41NDUuMzQ4LjgxMy41MjQgMi45ODUgMi4yIDE0LjY2IDEwLjc3NSAxNy44NCAxMi40NjUgMy4yNTIgMS43NCA3LjUxNSAxLjU4IDExLjA3My43OTMgNi45NC0xLjU0Mi00LjAzNi00LjYxLTkuODM2LTcuMzYzTTE5Ni4wNzUgNTQwLjZjLTMuMjk1LS4wNTUtNi4wMSAyLjU2OC02LjA2NyA1Ljg2NC0uMDYgMy4yOTMgMi41NjQgNi4wMSA1Ljg1OCA2LjA2OCAzLjI5NS4wNiA2LjAxNS0yLjU2NyA2LjA3My01Ljg2LjA1NC0zLjI5NS0yLjU3LTYuMDE1LTUuODY1LTYuMDdNMTc4LjE3IDUxMi43ODNjLTkuODQ3LTMuNDktMjMuMzM1LTMuNjM1LTI5LjY5OC0zLjAzLTYuMzY1LjYxLTEyLjAyIDUuODItNy43OTMgOS40OTUgNC4yMjIgMy42OCA0MC42MzYgNi42ODUgNTAuNDIgMy4yMDYgNS4xMDItMS44MTUtMy41MzYtNi4zMzctMTIuOTMtOS42N004My4xNzQgNDYxLjA1OHMxMC42NTUgMzYuOTY0IDU5LjA4MiA0My42MjhjMCAwLTQ4LjMzLTIwLjg3OC00MC41Ni0zMS4xNjYgMy43NjctNC45OTIgMjkuMDY3IDEyLjY1OCAzNy40MjYgMTguMzI3IDkuNDI1IDYuMzk1IDIxLjM3MyAxMi42MTggMzAuMTY1IDEyLjE4NCA4Ljc5My0uNDMtNTYuMTQyLTQyLjk3Mi04Ni4xMTMtNDIuOTcyIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTE4MS40NiA0OTUuNzY3Yy0yMC4yMTgtMTUuMjctNTcuNDEtMzIuMDM4LTYxLjE2NC0zNy42LTUuMzgtNy45NTQgMzcuMTI0IDEyLjYyMyAzNy4xMjQgMTIuNjIzLTEzLjM2My0xNy4wNzYtMTEuNzQ3LTI4LjI1NC0xMS43NDctMjguMjU0IDIuNDEtMS41NzcgMTAuNTI2IDE2LjU5NSAxOS45MTQgMjkuMzcgMTEuNjQgMTUuODI3IDIwLjQ5NCAyNC40NzIgMjAuNTIyIDI1LjY0Ny4wMzMgMS4xNzQtMy44OTMtMS4yMS00LjY1LTEuNzg2em0xNy4xMDIgNS4yYy04Ljk5LTYuNzQyLTMxLjU2OC0yNy4xMDMtMzguMTMzLTYxLjgxIDAgMC0yLjM0NyA0LjEzNi01Ljk2MyAzLjI0Mi0zLjYxLS45MDMtMTYuNzIzLTE4LjA4NS0yMS4zMS0xNC42NC00LjU4NyAzLjQ1NSA3LjgzIDI0LjQwNiAyLjc4MyAyOC4xOS0zLjY1NyAyLjc0LTI3LjQ4LTE0LjI3OC01Mi41OC0xNi4yMzUtOS41OTgtLjc0My0yNy4zNDMgMS41MDQtMjguMyA2LjMxNi0uODQyIDQuMjU1IDE4LjI3LjY2IDM3Ljg4IDUuNjAzIDM1LjQ1OCA4LjkzNSAxMDUuNTQ4IDY1LjY2NCAxMDcuNjYgNjMuNDcgMi4xMS0yLjE4OC04LjgyNy05LjYyLTguMzY4LTExLjYzMi40NTgtMi4wMiAxMi4wNjMgMTAuNjY3IDE5LjA1MiA5LjA2MyA2Ljk4My0xLjYwMy03LjIzMy03LjQ0OC0xMi43MjItMTEuNTY2TTEyMi4wNTcgNDAxLjg5OGMtMy4yMS0uMDUyLTUuODU0IDIuNDk4LTUuOTA4IDUuNzA3LS4wNTQgMy4yMSAyLjQ5NyA1Ljg2IDUuNzA1IDUuOTEyIDMuMjA3LjA1MyA1Ljg1My0yLjUgNS45MTMtNS43MDMuMDU2LTMuMjE0LTIuNTAzLTUuODYzLTUuNzEtNS45MTYiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNODkuMTg4IDM3MS4wODRjMS4xNTctNS45NTggNS4zNjItNS4xODIgNS4zNjItNS4xODJzMy4xMyAxLjgxIDIuMzQ1IDYuNzIzYy0uNzg3IDQuOTE4LTQuNjU0IDQuODUyLTQuNjU0IDQuODUycy00LjIxLS40MjYtMy4wNTItNi4zOTN6bS0xMy4xMyAzMy4yMTNDNjUuNTQyIDM5OC4yIDM4LjIzIDM4NS43OSAzNy4wNiAzODAuNjRjLTEuMTQ0LTUuMDEyIDE2LjkzNCA0LjY5IDE2LjU0NiAyLjA1NS0uMTc1LTEuMjA1LTExLjk2Ny0xMi4zMjYtMTguODc2LTIwLjY4Ny04LjEyOC05LjgxNS0xMy44MTItMjAuMzI1LTExLjEzMy0yMS42MSAyLjU1Ny0xLjIyIDYuNzM4IDYuOTc4IDE2LjMxOCAxNy45NTcgOSAxMC4zMzUgMjMuMzk2IDI2LjY0OCAzNS40NTIgMzIuNzIgMCAwLTE1LjY4OC0zNy41NjMtOC41OTgtNDguNjIgMy45MzMtNi4xMzMgMy4yMDIgMy42ODMgNi4xNTIgMTYuNjg0IDIuMTQgOS40MTMgOS4xNyAzMy4zMzMgMTIuOTgyIDM1LjUzMiA0Ljg1MiAyLjc5NyAzLjgxLTExLjc1MyA3LjY0My0xMS44ODggMy44MzMtLjEzMyAyLjI2NiA5LjM4OCA1LjU3NiAxOS4xNzIgMi45MSA4LjYwNSA2LjYyNSAxNy41MTYgMTAuMzIyIDIwLjYzNSAwIDAtNi41MzUtNDEuNjQtNS4zMTgtNjEuNzk3LjMwNC01LjAzOC42OS0xOS4zMy0xMS4xNzgtNC4wNjUtMTEuODczIDE1LjI2Ny0xMy45OS0xMC4wNTQtMTUuMzgzLTE4LjQzNy0yLjE4OC0xMy4xMy01LjYxOC0yOS4xMzItMTEuMzI2LTI2LjAxLTEyLjYxNiA2Ljg5Ni02LjM1NyA0NS4wNy0xNC40MjcgNDQuMDg1LTEzLjAwNy0xLjU5Mi0zMC4yMDctNDMuMTE3LTQzLjI5LTM4Ljc2OCAwIDAtNy41NyA4Ljc1NiAyMC45NzUgNTEuNzQgMy44NyA1LjgxNi02LjUzNiA0Ljg4NC02LjEyMiA5LjAyLjMyNCAzLjIxNCA4LjY2MyA5LjkzNCAxNi4yNDUgMTYuMDU4IDAgMCA0NC40OTQgMzYuMzYyIDY2LjYwNCAzOC4xMjYgOS44Ni43OS0xNS4xNC0xOS41MjMtMzAuMTczLTI4LjI0M004MC4xMTMgMjkxLjgwNmMtMi45MTItLjA1LTUuMzIgMi4yNy01LjM3IDUuMTktLjA1IDIuOTE3IDIuMjcgNS4zMjIgNS4xODYgNS4zNzQgMi45Mi4wNTIgNS4zMjQtMi4yNzUgNS4zNzQtNS4xOTMuMDUtMi45MTQtMi4yNzQtNS4zMi01LjE5LTUuMzdNMTA0LjM1NSAxNTEuNTc2Yy0xNi4xOSAxMC4wNzItMzguODYgNDQuNjE2LTQ1LjYwNyA2OS40NzItNC4xOCAxNS40MDYtOS45NDcgNDIuODA1LTYuOTE0IDQzLjUxNSAxLjI5NS4zMDcgNi4zMDUtMjMuMTkzIDEzLjMwMi00Mi4xMDcgOS4zOTctMjUuMzk0IDIzLjA3LTQ4LjIxMyAyNS41NDYtNDguMjEzIDQuMzE4IDAtMTMuNjc0IDI3LjcwNS0yMC44NyA0OC4yMTMtMS4xNzcgMy4zNTUgMTYuNTUyLTE2LjU1IDEyLjIzNS01Ljc1Ni0xLjg4NCA4Ljc3Ny0xOC42MDggMzguNTA3LTIzLjkwOCA1NS45OS0zLjM1NyAxMS4wNzctMi4yMjIgMTguMzA2LTIuNzgyIDIxLjc5IDAgMCAxMC4yMi0yMS42MiAzMy42Ny0zNS4yNzYgMCAwIDIuMjM2LTYuODQ4LTExLjAxOCAyLjIxLTExLjY3NSA3Ljk3Ni0xMy40NjItLjI0OC0xLjAyLTE1LjM1NyAxNC4yMDMtMTcuMjQ3IDIxLjU2My0zNS43NDcgMjEuNTU4LTQxLjk4Ni0uMDEyLTYuMjM3LTE2LjQ3NyA1LjQxMi0xMy44MjMtLjI1IDMuOTMtOC4zODIgNy43NTgtMTguMyAxMi44MzgtMjUuNDEyIDcuMjUtMTAuMTUgMTUuNDU4LTIwLjQzNiAyMS40NzctMjYuOTggMy43NzUtNC4xMS0yLjAxNi03LjczOC0xNC42ODUuMTQ4IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTQwLjY4NSAyNzIuODdjMS4xOTcgNy40Ljk5MiAzLjI3NSAzLjAzOC0xMi41NTIgMi4wNDMtMTUuODIyIDQuODItNTQuNjUyIDI4LjQ2Mi04NC45NjggNS43NzUtNy40MS0uMzYzLTEyLjY3NS0xOC4xMjItMS42MDgtMS4yODQtMTIuMzU1IDcuNzQ4LTY0LjM0LS4yMjItNjEuODcyLTEzLjY4NSA0LjIzNi0yMi43MDcgNDIuNzItMjguMzM3IDY3LjM3NS0uNyAzLjA2My0zLjYzLTcuODItNS41NzItMy4xMy0xLjQ1NSAzLjUyLTEuNTk1IDkuMzI1LTEuNDAyIDE3LjcwMy4zMjcgMTQuMDEzIDMuMzQ2IDI5LjA4NSAxLjkyNiAzNC4wNzYtMS4xNCA0LjAwMy02LjIxMi00LjM4Ni03LjE2Ni0uNzQtMS4zMjIgNS4wNjIgMi4yMzIgMjcuMzY1IDUuMTEgNDAuMDU2IDYuOTcyIDMwLjc1OCAxOS4yOSA1OS43NjIgMjIuMzI0IDU4LjMxIDQuMjU1LTIuMDM2LTIuNDIyLTEwLjk5LTYuNDg2LTMzLjc2LTUuODkyLTMyLjkyNy0xMi4xOTMtOTAuNy04LjkyLTk3LjY5MiAzLjIyOC02Ljg4IDMuNDY3IDExLjk2MiA2LjU0MiA5Ljc5IDAgMCAxLjA0LTE0Ljk3OCAzLjQxMi0yOC44MyAzLjE4Ni0xOC42MSA3LjI1NC0yOC4yNjUgMTAuMzYtMzAuNjc2IDUuOTgyLTQuNjQ2LTMuODIyIDIxLjgyLTQuNDkyIDUwLjAxNC0uMTEyIDQuNiA3Ljc3Mi04LjUyNyAxMi4xNTQtOC41MjcgMi44MyAwIC4yNTMgMy4yMzUtMy4zMTYgOS4xOTQtMTUuNjcyIDI2LjEzNi0xMC40OSA3MC40My05LjI5IDc3LjgzNSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xNzQuNDE3IDI5LjkyN3MtMjguNjk1IDIuNzYzLTU5LjUxNSAzNi4zMzRjLTMwLjgyNyAzMy41Ny00OC4xMjIgODcuMDA1LTQ0Ljg4IDg1LjQyOCAzLjI0NS0xLjU3NyAxMy40ODgtMjAuMDYyIDE5LjY1LTMyLjk0NyA2LjE2Mi0xMi44ODYgMTAuMDktMjUuNzQ1IDE4Ljk2Ni0zNi40NzYgOC44OC0xMC43MzQtNC4wMjggMTkuNTE4LTQuMDI4IDE5LjUxOHM1LjY4LTguMTE2IDEyLjAxNS0xNy44MWM2LjAzLTkuMjIgMTYuMjkzLTI1LjA5MiAyMS4xMDUtMjkgNC4zOS0zLjU2Ni0zLjYyMyAxNC43NjMtMy42MjMgMTQuNzYzUzE1OC41MSA0My42MyAxNjIuMDQgNDMuNDM4YzMuNTMtLjE5LTE3LjU2IDI1LjM2LTI3LjI1MiAzNS43MjctMTMuNDIzIDE0LjM1My0xNS4xMjIgMTQuMDc3LTI1LjI1OCAyNy43NCAwIDAgMjQuMjUyLTE0LjQ5NSAyMi42My0xMC4wMjUtNi42MTUgNi41NS0yMy41NyAxOS45NjctMzQuMTYgMzAuMjQ0LTguOTE3IDguNjU3LTIyLjE2NiAyNy40NTUtMjAuMjggMzAuODk3IDAgMCA1MC4xMzItNTEuOTA0IDU3LjU4OC02MC4wMzggMCAwLS4xMi4wNzgtLjMxNi4yMTIgMy40OTctMy44MDUgMTEuODE2LTEzLjM2IDIxLjQ5Mi0yOC4wNjMgOC41Ni0xMy4wMDcgMTguMzYtMzUuMzcgMTcuOTMzLTQwLjIwM00xOTUuOSA1OC44NzNjLTMuMjk2LS4wNTgtNi4wMSAyLjU2Ni02LjA2NyA1Ljg2LS4wNTUgMy4yOTYgMi41NjQgNi4wMTIgNS44NiA2LjA3IDMuMjkzLjA1NiA2LjAxNC0yLjU2NiA2LjA3LTUuODYyLjA1Ny0zLjI5My0yLjU3LTYuMDEyLTUuODYzLTYuMDY3TTE4MS45MSA2Ni42NTdjMCAxLjEwNy4zOTMgMy4yNCAxLjI2NCA0LjM0OC03LjAzMy41NTMtMTcuNTQ0IDQuNjYzLTIwLjc4NSA3LjAzMyAxLjI2NC0yLjQ1IDMuNDgtMTAuMTE3IDE5LjUyLTExLjM4TTQyNS45ODcgNzIuNjZzLS44NDcgMS45ODItMS40NjIgMi45NjJjLTEuMjIzIDEuOTYgMTUuNTk4IDMuNDQ1IDIxLjMxIDguMjcgMCAwLTMuNTU4LTcuNzU0LTE5Ljg0OC0xMS4yMzIiIGZpbGw9IiNmZmYiLz48ZyBjbGlwLXBhdGg9InVybCgjZikiIHRyYW5zZm9ybT0ibWF0cml4KC4xMyAwIDAgLS4xMyAwIDU5Mi45MykiPjxwYXRoIGQ9Ik0yODYxLjkyIDExNjEuOTZjNDMuMDUgMjU4LjY3IDIxNi41IDEwMDUuMTkgODM0LjU2IDE1MTcuNjYgMTAuNjQtNzAuNTggMTYuMDctMTQyLjE1IDE2LjA3LTIxMy42OSAwLTU2NC42OS0zMzguNjEtMTA3OC4zMS04NTAuNjMtMTMwMy45N3ptODY4LjExIDE2MDYuN2MtNzgxLjE1LTU5OC4wNS05MTMuNjUtMTU1My44OS05MjguMjQtMTY4My45MSA1NjAuMjYgMjA4LjI4IDk1OS40MyA3NDcuOTYgOTU5LjQzIDEzODEuMTggMCAxMDMuNzktMTAuNzggMjA1LjAzLTMxLjE5IDMwMi43M3ptLTIzODYuMTQgNzYyLjI3YzI2MC44MiAyMzEuODggNTkzLjYxIDM1OC43OSA5NDQuOTIgMzU4Ljc5IDM1MC42MiAwIDY4Mi45NC0xMjYuNTYgOTQzLjU5LTM1Ny43Ny0xNTAuMi02Mi42MS01MDMuMzktMTg2LjE3LTk1My4xNC0xODYuMTctNDQ4LjE2IDAtNzkwLjAyIDEyMi41OC05MzUuMzcgMTg1LjE1em05NDQuOTIgNDA3LjQ2Yy00MDEuNjIgMC03NjUuNDktMTYwLjc4LTEwMzEuMTUtNDIxLjM3IDYzLjUzLTMxLjY0IDQ2NS4wMi0yMTkuOSAxMDIxLjYtMjE5LjkgNTU2Ljc3IDAgOTczLjgyIDE4OC40MyAxMDQwLjE5IDIyMC4yNC0yNjUuNTkgMjYwLjQtNjI5LjM4IDQyMS4wMy0xMDMwLjY0IDQyMS4wM3pNODY0LjkyNiAyNDY1LjkzYzAgNjkuMTMgNS4xNDggMTM4LjI2IDE1LjA1OCAyMDYuNSAyMTguMTM2LTIwMS45NiA4NDkuMzE2LTg0My4yMSA4OTQuODY2LTE1MzUuMDktNTQ3LjA3IDIxMS4yNS05MDkuOTI0IDczNi4zMy05MDkuOTI0IDEzMjguNTl6bS0xNy43MTUgMzAxLjMzYy0yMC4yNTMtOTcuMjktMzAuOTM3LTE5OC4wNS0zMC45MzctMzAxLjMzIDAtNjUyLjAyIDQyMy4zMDctMTIwNC45MSAxMDA5Ljg2Ny0xMzk4Ljg5LTUuNSA4MzAuNDEtODU1LjczNCAxNTk0LTk3OC45MyAxNzAwLjIyek0yMjkwLjkgOTM5LjM5OGMtODQxLjE1IDAtMTUyMy4wNTYgNjgxLjg4Mi0xNTIzLjA1NiAxNTIzLjA1MlMxNDQ5Ljc1IDM5ODUuNTQgMjI5MC45IDM5ODUuNTRjODQxLjE3IDAgMTUyMy4wNy02ODEuOTIgMTUyMy4wNy0xNTIzLjA5UzMxMzIuMDcgOTM5LjM5OCAyMjkwLjkgOTM5LjM5OHptMCAzMTM1LjIxMmMtODkwLjM0IDAtMTYxMi4xMzQtNzIxLjgtMTYxMi4xMzQtMTYxMi4xNiAwLTg5MC4zNSA3MjEuNzk0LTE2MTIuMTUgMTYxMi4xMzQtMTYxMi4xNSA4OTAuMzUgMCAxNjEyLjE1IDcyMS44IDE2MTIuMTUgMTYxMi4xNSAwIDg5MC4zNi03MjEuOCAxNjEyLjE2LTE2MTIuMTUgMTYxMi4xNiIgZmlsbD0idXJsKCNnKSIvPjwvZz48ZyBjbGlwLXBhdGg9InVybCgjaCkiIHRyYW5zZm9ybT0ibWF0cml4KC4xMyAwIDAgLS4xMyAwIDU5Mi45MykiPjxwYXRoIGQ9Ik0xNDMxLjYzIDMyMDQuNzdsMTA4LjItMzcuNjYtMjQzLjM4LTE0OC41MSA5Ni4wNS0zMDUuNTMtMTEyLjk2IDM5LjMzLTczLjU2IDI1Mi44LTEuMTcuNDMtNzAuNTUtMjAyLjY2LTg3Ljg3IDMwLjYxIDE1Ni45IDQ1MC43IDg3Ljg3LTMwLjZMMTIyNSAzMDYzLjZsMS4xOC0uNDEgMjA1LjQ1IDE0MS41OCIgZmlsbD0idXJsKCNpKSIvPjwvZz48ZyBjbGlwLXBhdGg9InVybCgjaikiIHRyYW5zZm9ybT0ibWF0cml4KC4xMyAwIDAgLS4xMyAwIDU5Mi45MykiPjxwYXRoIGQ9Ik0xNzAzLjY2IDMwMDIuOTFsLTEuMjUuMjYtODcuMjctMTU4Ljc5IDExMC44NC0yMy40MnptLTEzMC4yMi0yMjcuMzhsLTU5LjItOTAuMzMtOTUuOTUgMjAuMjcgMjgzLjMgNDQwLjg0IDcwLjYyLTE0LjkyIDc1LjgtNTE2LjctOTcuMiAyMC41My0xNS4xNCAxMDYuMDMtMTYyLjIzIDM0LjI4IiBmaWxsPSJ1cmwoI2spIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNsKSIgdHJhbnNmb3JtPSJtYXRyaXgoLjEzIDAgMCAtLjEzIDAgNTkyLjkzKSI+PHBhdGggZD0iTTE5OTMuOTcgMjY4Mi4zNWwxMzAuODYtMTMuNzUtOC40Mi04MC41Ny0yMjMuNDYgMjMuNDggNDkuOTEgNDc0LjUzIDkyLjUyLTkuNzEtNDEuNDEtMzkzLjk4IiBmaWxsPSJ1cmwoI20pIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNuKSIgdHJhbnNmb3JtPSJtYXRyaXgoLjEzIDAgMCAtLjEzIDAgNTkyLjkzKSI+PHBhdGggZD0iTTI1NDIuODggMjg4My4zNmgtMS4yM2wtMTAwLjczLTMwNS4xNy0zMi4yNC0uOC0xMTEuOTQgMjk5Ljg2LTEuMjctLjAyLTM1LjExLTI5Ny4xNy05My42Ni0yLjM0IDY4LjIxIDQ5MS43NiA2NS44OCAxLjYyIDEyNS41Mi0zMTEuNTcgMTA0Ljc5IDMxNy4yOSA2Ny4xMyAxLjY2IDgzLjYxLTQ4Ny45OS05My42NS0yLjMtNDUuMzEgMjk1LjE3IiBmaWxsPSJ1cmwoI28pIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNwKSIgdHJhbnNmb3JtPSJtYXRyaXgoLjEzIDAgMCAtLjEzIDAgNTkyLjkzKSI+PHBhdGggZD0iTTI4NzQuMDEgMjk4MS41M2wtMS4yNy0uMjYtMTYuOTctMTgwLjM3IDExMS4wMSAyMi41MnptLTI5LjI2LTI2MC4zNGwtMTguNDItMTA2LjQtOTYuMTMtMTkuNDkgODUgNTE3LjAxIDcwLjY4IDE0LjM1IDI3NC43NS00NDQuMDgtOTcuMzYtMTkuNzUtNTYuMDQgOTEuMjktMTYyLjQ4LTMyLjkzIiBmaWxsPSJ1cmwoI3EpIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNyKSIgdHJhbnNmb3JtPSJtYXRyaXgoLjEzIDAgMCAtLjEzIDAgNTkyLjkzKSI+PHBhdGggZD0iTTMyNDYuMzkgMjk4Ni44bDExLjI5IDQuMTljNDguMDkgMTcuNzQgOTIuMjUgNDQuNDYgNzIuMjMgOTkuMTMtMjMuNzUgNjQuNzgtNzUuMTIgNTIuOTctMTIxLjQzIDM1LjgzbC0xMS44OS00LjM5em0zMDQuODYtMTYxLjk1bC04OC4xOC0zMi41Mi0xNDkuNDkgMTUxLjA5LTQ0LjU3LTE3Ljc1IDY2Ljc0LTE4MC40OS04Ny4yNy0zMi4yNy0xNjUuNDkgNDQ3LjY0IDExOC4xMSA0My42NWM4OC40OSAzMi43MiAxNzMuNTkgMjguNDkgMjE1LjE3LTc5LjQ1IDE2LjcyLTQzLjQtMS45MS05NC4wOC0yOS4xMi0xMjkuODMtOC4zNC0xMC45MSAxNjQuMS0xNzAuMDcgMTY0LjEtMTcwLjA3IiBmaWxsPSJ1cmwoI3MpIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCN0KSIgdHJhbnNmb3JtPSJtYXRyaXgoLjEzIDAgMCAtLjEzIDAgNTkyLjkzKSI+PHBhdGggZD0iTTE5NDYuMzcgMTQ3Ny4xNHY3MjYuODFoMzk3LjM1di0xMjguMTZoLTI0Ni4yM3YtMTY3LjQ2aDE3Ni41MnYtMTI2LjI3aC0xNzYuNTJ2LTMwNC45MmgtMTUxLjEyIiBmaWxsPSJ1cmwoI3UpIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCN2KSIgdHJhbnNmb3JtPSJtYXRyaXgoLjEzIDAgMCAtLjEzIDAgNTkyLjkzKSI+PHBhdGggZD0iTTIzNjAuMTQgMTE3Ni42OXY3MjYuMjFoMzk3LjI1di0xMjcuNzRoLTI0Ni4yNXYtMTY3LjMyaDE3Ni40NnYtMTI2LjM1aC0xNzYuNDZ2LTMwNC44aC0xNTEiIGZpbGw9InVybCgjdykiLz48L2c+PC9zdmc+");
+  height: 16px;
+  margin-bottom: 4px;
+}
+
+.ife {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MzcuMzMzIiBoZWlnaHQ9IjUzNC42NjciIHZpZXdCb3g9IjAgMCA2MzcuMzMzMzEgNTM0LjY2NjY5Ij48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGQ9Ik0xNTM5LjEgMzQwNi40M2MwIDMwOC40MSAyNTAuMDEgNTU4LjQxIDU1OC40MSA1NTguNDFzNTU4LjQxLTI1MCA1NTguNDEtNTU4LjQxYzAtMzA4LjQtMjUwLjAxLTU1OC40LTU1OC40MS01NTguNHMtNTU4LjQxIDI1MC01NTguNDEgNTU4LjR6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PHBhdGggZD0iTTQzNi4wMSA2OC42MDhjLjM2Mi02LjMxMy4yNi0yMS4yNjMgMi4zOS0yNC40NTcgMjEuMzggMTAuODI2IDYwLjQyIDQyLjMwNyA3NS4yMyA2OC44MjIgNS43LTkuODQ0IDcuOTczLTE3LjYzNSAxMC42MzQtMTkuNzY1IDQ1Ljg2IDU0LjM5OCA0OS4wMDcgNjUuODg4IDU2Ljk5MyA4NS42MjQgNi41MjItNC40NSAxMi44ODItMTguOTYgMTcuMTQyLTIzLjIyIDExLjE5NyAzNS4xOTUgMjAuNzE1IDc4LjQzNyAxNC44NTcgMTA2LjE3OCAxMC4xNDgtMy42MjcgMTQuODgzLTguMzQ4IDIyLjg4OC02LjIyLjU3MiAzMC05LjUzNCA3Ni44NTctMjcuNjU2IDEwMS40MDMgNy41NTggMi41OSA5Ljk0IDEuODE0IDE5Ljg4MyA3LjM0LTExLjE5OCAyNS42MS00OC42OTggNTcuNzI0LTc5LjYzNCA3MC41MiA2LjUyIDQuNjY0IDEwLjc5NiA5LjM3IDE2LjY3IDE4LjQ0LTE5LjczNy0xLjYxNS02NS41NTUgMzUuNDEyLTEwNS42MyAyOC44OS41MzIgNi40MDcgMTMuOTQ3IDE1LjQ3NiA3LjU1NyAyMS4zMzQtMjIuOTI1IDIuNjctNDkuNzkzIDIuMDQtNTcuMjY1IDIuNTktMy42MjctMTEuNzAyLTEuNTUzLTIyLjU4Mi00LjY2My0yNy4wMzItMjAuMjcgMjAuMjY4LTQ5LjI3IDM2LjM2OC0xMTIuMjAzIDUwLjc2MiAwLTExLjIgNy41MDQtMTUuNzI3IDguODUyLTIyLjQyMi0xMy4zMyAxMC4xMTctMzUuNDQ3IDEzLjc1LTEwNS4zMiAyNi41NDggNC44MS02LjQwNyAxNC4xMDUtMjEuNTg2IDE4Ljg5Ny0yNi45MS0yMi40MiAyLjU0LTgwLjAxNyA0LjA4LTEwMC44MTgtOC43MTcgNi4yMTYtOC41OTUgMTMuMTQtMTAuNzgyIDE3LjQtMTcuMTg4LTI1LjYwMi05Ljk1Ni00Ni43NC04LjU5NS04MS40LTQwLjU5NSA4LjUyLTQuNzkyIDEyLjIyLTYuNzM1IDE5Ljk5LTEwLjE1LTMwLjQtMTguNjctNDYuNDQ3LTQ0LjMxMi01OS4yOS03NS41ODcgMjEuNjk2LTIuNTQgMjUuNjMzIDMuNDIyIDMxLjYzNyAyLjkwM0MyLjMwNCAzMTIuNDktMS42MTUgMjYwLjE0NiAyLjEzIDI1MC4wMTJjNC44IDEuNTA3IDguNTQzIDIuNjgzIDEzLjMzNiA1LjM0NS0xNS4zNTgtNjIuNzE0IDI3LjQxLTEyMC4wNSAzMS42ODctMTIxLjExNCA4Ljg0NyA2LjU3MyA4LjM0IDE1LjkyNSAxMy45MjcgMjMuMzI2IDguODUyLTM3LjA4IDYwLjczNC03OC42NTggNjcuOTg1LTk1LjgzIDQuMTQgNi44NjggNC44NjcgMTQuNjMyIDguMjc4IDI0LjU3MiAxMi4yOC04LjUzNiA0NC41MjQtNTEuMjMgNDguNzgyLTYxLjg5NyAxMy42MjIgMTEuODMtNS42NTggOTMuNTgyLTEyLjA2NiAxMTcuMDQ1LTYuNDA4IDIzLjQ2NCAyNS40MTIgMjUuODggMjUuNDEyIDI1Ljg4bDEwMi45MiAxMi4yNjUgNTAuMTQtMTguMTIgNTEuMjA0LTEwLjEzNnM2Ljc4LTEwLjIzIDUuNzE1LTE5LjgzYy00LjI1OC0yMS44NjctMzkuMDM3LTQxLjIxNi01My4yMy0xMTIuMTcgMjcuMjEgMjQuMDEgNTkuOTA3IDI4LjY1IDc5Ljc5IDQ5LjI1OCIgZmlsbD0iIzIzMWYyMCIvPjxwYXRoIGQ9Ik0yMjUuNyA0OTUuMjc1Yy0yLjM2NCAxLjQ3LTQuMzk3IDIuNzEyLTUuOTcgMy42MjYtMTAuOTAzIDYuMzQtNTUuOTcgMTAuMzgtOTYuMTAyLTIuMTc1LjI5NC0uNDkzLjYtLjk4LjkxNi0xLjQ2em0yNS4zNzcgMGMtNC40MTIgMy4yNTYtNy4wMDQgNi43OC03LjE2NiAxMC4zOCAzLjgzLTMuNDY3IDEwLjg0My03LjA5NyAxOS4wNzQtMTAuMzhoNDguMTY4Yy0yNi4wMjQgMjMuODUtOTAuMzc3IDI5LjA4NC0xMDQuMDA0IDMyIDQuMDk3LTEwLjYxNCAxNS40Ni0yMS45OTIgMjcuODY0LTMxLjk5M3ptODkuOTcgMGMtMy4zNSAyLjAwNC02LjI5NSA0LjI0Ni04LjYwMiA2LjgyIDEuMTQyLTIuNTY3IDIuNTctNC44MTggNC4yNTUtNi44MmgtMjAuMjE2Yy03LjYyMyA4LjQxLTE0LjI3MiAxOC4yMjgtMTguMDUzIDI5LjA5NyA4LjAzNC0xLjIzOCA0Mi41NC0xMy4yOTcgNzEuNDUzLTI5LjEwMnptMTE5LjIxIDBjLjExNC42Ny4xOTQgMS4zNTIuMjM1IDIuMDQ4LTE3LjA1NiAwLTM4Ljk5NyAyLjEzLTQ1LjEgMi40MzQtLjUzNy0xLjU2My0xLTMuMDU0LTEuNC00LjQ3OGw0Ni4yNjQtLjAwNSIgZmlsbD0iI2ZkZTAxMiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTE2OS4yNDMgNDYzLjI3NXYuMDY4Yy0yOS40OSAxNC4zODYtNTQuMzUyIDExLjQ0LTc3Ljc3NC0uMDc1em0yNDAuMzA4IDBjLTUuOTkzIDEwLjk3NS0yMS43NTUgMjIuMjA0LTM5LjY2NiAzMS45OTVsLTI4LjgzNy4wMDVjMTguODUtMTEuMjYgNTAuNDkyLTE0Ljg3OCA1Mi45MDgtMjYuOTUtMjQuNjM2IDExLjM5LTQ2LjM0MyAxMy45ODItNTcuMjU1IDI2Ljk1aC0yMC4yMTZjNS41MjMtNi4wOTIgMTEuNTYtMTEuNDQ3IDE3LjM4NS0xNS45MjgtMzIuODUzLTIuNzQtNjguMDI1IDUuMDYtODIuNzkzIDE1LjkzNGwtMTYuMDY1LS4wMDVjMTYuNjgtMTMuNDQyIDM1LjI0LTI0LjQwMiA0MC41NDMtMjcuNjYyLTEwLjE4OCAyLjQwNC0zNS44MzYgMTguOTY1LTQ5Ljg1NiAyNy42NjVsLTEwMS4xNTYtLjAwM2MxMS45NC0xOC4xMTcgMzkuNzYzLTI2LjM4MyA2MC42Ni0zMS45OTN6bTIwLjA2IDBjMTAuOTMzIDkuNTE0IDI4LjI3OCAxOC4xMTMgMzAuNjQ2IDMyaC00Ni4yNjRjLTQuOTE3LTE3LjU2OC4yMjUtMjQuOTcyIDQuMDEzLTMyem05Mi43OTggMGMtMjcuNTkgOS45OC02MS42NTYgMTguMS04My4zMTYuMDA3em0tMjU5LjQyNCAzMmMyMy44Ni05LjUxNiA1Ny45Ni0xNi4xMiA1NC41MjUtNy4zOTYtMS43MTQgMi42NDctMy44NiA1LjExLTYuMzU4IDcuMzk4em0tODguNzYtOC44MmMxOS4yLTguMTc2IDU1LjExMy0xMi40NDUgNzguOTMtMTQuNTgtMTYuMzUzIDguNTQtNjEuODY2IDE0LjU4LTc4LjkzIDE0LjU4IiBmaWxsPSIjZmRlMDEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNDAuNDY1IDMxMy45NGM2Ljg0MiAyMy41NjUgMjkuNDk1IDQyLjczMyAyOC41MTYgNTUuNTM3LTE5Ljk5Ny04LjAzOC0zOC40OS0zMC44MTQtNTAuMzQ2LTU1LjUzMnptNTYxLjQ2IDBjLTE0LjE3MiAyNS45MDgtMzcuNjU3IDQ4Ljk3NS00NS44MzQgNTUuODkzIDguNTMtMS40MjIgNDYuNDUtMTMuOTUgNjcuMDU4LTQuMzczLTUuMDggMTUuMzg0LTYzLjUwOCA2NS44ODMtODEuMjgzIDY0LjQ2LTE1LjY0LTQuNjE4LTI0Ljg5Mi04LjE4NC0zMy43NzgtMi44NDYgMTUuMjkyLTEuMDYgMzguNiA4LjQwNiA1MC4zMzQgMjIuMjY4LTguMTUgMi42NDItMjEuMTQgOC41Ni0zNi4wMTIgMTMuOTM3bC04My4zMTYtLjAwNWMtMi44MjUtMi4zNTMtNS40NC01LjE1OC03LjgtOC40NjQtMTguNDk1LTE0LjU4LTExLjM3Ny0xNi4wMDItMTEuMzc3LTE2LjAwMnMtNC42MzQgNS4zNDQtOC4xODQgMTguODVjLS40MTQgMS44NTctMS4xNTQgMy43My0yLjE4IDUuNjFsLTIyNC4zNDcuMDA3YzEwLjA0NS0yLjY5IDE4LjQ5LTQuNzczIDIyLjgtNy4wNC0zMC45NCA4Ljg4Ny03My45NjItMTIuNDQ2LTk0LjIyOC03LjgyOCAxLjc3NCA1LjMyMiA1NS4xNyA1LjY5IDU1LjQ2OCAxNC44NmwtNzcuNzc0LjAwOGMtMTEuMzE0LTUuNTY3LTIyLjI5Mi0xMy4xMjctMzMuMjkzLTIxLjY5NyAxNi4yNTQtMTIuNDggNjguOC05LjQ1IDkyLjI2OC0xMC4xNi0xOC43NDItMy4xMS0zOC41Mi0xMy4yNTctOTMuNTU0LTQ3LjcxNSA0LjYyIDE4LjQ4NyA2MC4wODggMzQuNDkgNTkuMzc2IDQyLjMxLTUwLjEzIDguODg4LTczLjI0NC0xMy41MTItOTguNDktNjcuOTEzIDI2LjEwNi00LjM5NSA1Ni4xOCAyNS45NiA3OS4yOTIgMjkuNTEtMTkuNzctNy4xOS00MC4wNDUtNTYuMjYzLTUyLjEwOC03My42NzV6bTIyLjI5MiAwYy0xMS41MzYgNDQuNjUzLTMxLjc0OCA0Ni42MjctNDguOTMgNDcuNzE3LTMuOTk4LTcuOTk3IDIyLjU3LTI2LjM1IDI5Ljg0LTQ3LjcxOHpNNDE4LjAwNSA0NjMuMjc2YzEuODMyLTMuNCAzLjM0Ny02LjcxIDMuMjUyLTExLjA0MiAxLjI1NCA0IDQuMzggNy41OCA4LjM1MiAxMS4wMzd6bTEwMi44ODMtMTIuMDJjLTEwLjY2NyA2LjQwMy01Ny45NTIgMC02OC4yNjMgMy4yIDguNTMyLTExLjM3NyA0NS4xNS0yLjQ5IDY4LjI2My0zLjJ6bTU0Ljc1Ni02Ny41NTJjLTUuNjg1IDcuODItMjkuMTUzIDI3LjczLTM5LjEwOCAyMS42OSA0LjYxNy00LjI3IDI5LjE1My0xNC45MzcgMzkuMTA4LTIxLjY5IiBmaWxsPSIjZmRlMDEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNDQuMjAyIDIzOS4yNzVjMS4yMDQgMTQuMzMyIDIuMDk2IDI3LjkzNC4yNDQgMzEuMzU3LTE2LjI5LTUuMy0yNC4yOTctMTcuMDItMjcuMDg4LTMxLjM2NXptNTQ0LjI1NSAwYy0yLjYzOCAxOS41MjItNS44MjggNDEuNjMyLTExLjAzMyA1MC45MSAxNS42NC0xLjc3OCAzMy45NTUtMjguODczIDU0LjU3Ni0yOS45NC0xLjU3MyAyMi42MjItNC4yOCA0MC4xMy03Ljc4MyA1My43bC0xOS4wOS0uMDA0YzEuMTQtMy4zNSAxLjgwNi02Ljc3MyAxLjgwNi0xMC4yNC0xLjQ3NiAzLjQ0LTMuMTY0IDYuODY0LTUuMDEgMTAuMjRINDQuOTZjLTIuMjU3LTMuMjYzLTQuMjI2LTUuNDEyLTUuODUtNS45NzIuMzI2IDIuMDIuNzg2IDQuMDA4IDEuMzU1IDUuOTY4bC0yMS44My4wMDVDOC45ODggMjkzLjgzNCAzLjc0IDI3Mi40MzYgNS42NSAyNTYuNjQ0YzM0LjQ5IDE0LjU4IDQ2LjYxNCAyNy44NTcgNTUuNTAyIDMxLjA2LTguNjQtNS4zNTUtMTEuOTIzLTI3LjM4LTEzLjYzNy00OC40M3ptMjIuNzQ4IDBjLjA4MiAxOS44OTItNS4zNyAzNS42OS0yMS42OTIgMzguMTE3LTEuMy0xNC4zLjIxLTI2Ljg1MyAxLjY0OC0zOC4xMTZoMjAuMDQ1IiBmaWxsPSIjZmRlMDEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTcuMzU4IDIzOS4yNzVjLTcuMzIyLTM3LjYzNSAyMS4yNC05My4zMTIgMzAuMjUtOTguNDYgMTcuNjk0IDI2Ljc5MiAxOC41MjcgNjEuOTEgMjcuMDYgNzcuNTUtMi44NDgtMTguNDg2LTIuMTM2LTIzLjExMiAyOS4xNTItNzkuNjQtMy4xOTUtNi40MDUtMjEuNjkgMjcuNzMtMjkuNTEgNDUuNTA2LTMwLjkzMi0zMy43NzggMzYuMDU2LTg4LjkwMyA1NC41NDMtMTEyLjcyIDcuMjU2IDE4LjQzLTIuOTggNjYuODUtNy4yNSA3OS4yOTggOC44ODgtMTcuNDIgMzguMzk3LTUxLjU1NSA0Ny42NC02NC43MTIgMC0xNC41OC0zNC4zNSA0OC45MTMtMzIuNTcyIDI2Ljg3NiAxLjA3LTMwLjkzMyAzMy45OC01NC42OTMgNDcuODUtNzYuNzQgOS4yNCA5Ljk1Ni0zLjU0MyA2My43NC0xNS45ODggOTkuNjQ3LTEyLjQ0NSAzNS45MDUgMTE5LjExMiA3My45NTMgMTE5LjExMiA3My45NTNsMTI0LjQ0My0zMy43NzhzMjIuNTc2LTIyLjgxNCA2LjU4LTQ0Ljg1OGMtMTcuMDY0LTI0LjE3My01MC4yMjQtNjIuNDQ2LTU1LjkyNC0xMDMuMDQgNDEuNjMgMzMuMzQgNjYuODIgMTguNjggODEuNDAyIDc0LjE0OC0zMi0yMC45NzctNDQuMTUtNDEuODA1LTUzLjM5Mi00NC42NTIgMTMuODY4IDIzLjgyNCA1MC40OTUgNDIuNjY3IDY3LjkxNCA3My45NTYtNS42ODYtMjguMDg3LTIwLjk3OC00MC41MzMtMTcuNDItODAuMzUzIDU4LjMwOCAzNy4zMyA3My45NTYgNjUuMDY3IDY4Ljk3NCA5Ni43MS0yOS4xNTItMjIuNzU1LTM2LjI2Ny00Ni4yMjMtNDMuNzQtNTAuMTM2LTEuNDE2IDEwLjY2NyAzOC40MSA1MS45MTggNTAuODUgNjguNjI2LTQuMjYyLTI4LjggMS43ODYtNjQuNzEyIDguMTgzLTY2Ljg0NyAyNS4yNCAzMC45MyA2Ni4xMzUgNzcuMTU3IDQzLjM3OCAxMTAuOTM1LTEzLjE1NS05LjU5OC0xMS43MzMtNDQuNDQ1LTMyLjM1NC02NS43NzggNC4yNiAyMC4yNjUgMzIgNzAuMDQgMjkuODY1IDkyLjc5NyA2Ljc1My02LjM5NyA3LjQ2NS00NS41MDUgMjkuODY3LTcxLjQ2NCA2Ljc4NiAxOS41ODcgMTQuODQyIDQ5LjMyNSAxNC45MzggNzMuMThsLTIwLjA0NC0uMDA1YzEuMzE2LTEwLjMwMyAyLjU2OC0xOS41MjYgMS41NDgtMjguMDE4LTEuNDIgNi41ODctMi43NDUgMTYuODgyLTQuMjUgMjguMDJsLTU0MC45NC0uMDAyYy0xLjI1LTE1LjMyNC0xLjY2Ny0zMC4xMy0yLjcxNi0zNy42MTgtNC44OTctNi44MTQtMi40IDE2LjIxNC0uNiAzNy42MTZsLTI2Ljg0NC4wMDIiIGZpbGw9IiNmZGUwMTIiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0yODMuNDMzIDExMS41NEMxNzYuNzY3IDExMS41NCA3MC4xIDE2OC44NyA3MC4xIDI3NC4yMDRjMCAxMDQgNzcuMzMzIDE5MC42NjcgMjQ4IDE5MC42NjdzMjU3LjMzMy03MC42NjcgMjU3LjMzMy0xNjEuMzMzYzAtMTc2LTE4NS4zMzMtMTkyLTI5Mi0xOTIiIGZpbGw9IiMyMzFmMjAiLz48cGF0aCBkPSJNMjAwLjA2NCA4MC40NzZjMC00My45NjUgMzUuNjQtNzkuNjA0IDc5LjYwNC03OS42MDRzNzkuNjA0IDM1LjY0IDc5LjYwNCA3OS42MDQtMzUuNjQgNzkuNjAzLTc5LjYwNCA3OS42MDNjLTQzLjk2NSAwLTc5LjYwNC0zNS42NC03OS42MDQtNzkuNjA0IiBmaWxsPSIjMjMxZjIwIi8+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiBmaWxsPSIjZmRlMDEyIiB0cmFuc2Zvcm09Im1hdHJpeCguMTMzMzMgMCAwIC0uMTMzMzMgMCA1MzQuNjY3KSI+PHBhdGggZD0iTTE5ODguNzMgMjgyNy4xbC0yNjYuOTMgMTIzLjYzLTEzNy4yNCAxNTQuNjggOTAuNDItMTQuNiA4My44NyAxMTUuNDUgMjIxLjg3LTUxLjM3IDY4LjQ3LTE2Ny43OXMtNjEuNTUtMTEyLjQxLTYwLjkzLTExMi40MWw4OC44MSA5NS43NCAyMDMuNzgtMjUuMDIgMTMyLjkgMTM5LjE1IDEyNS4wNC01LjE0LTEyMi45NiAzMi4yNC00NS4yIDE1My42NSAxMDcuOTMgMTkxIDE1MC4xNy01Ni43IDM5LjYxIDY3LjQ5IDE1LjI1LTg3Ljc2TDI2MDcuMSAzMTIwbC02Mi41NC04Mi4wOS0yNTkuNTQtMTgyLjkzLTI5Ni4yOS0yNy44OE0xNzAzLjUzIDM3OTIuMzdsODguOTgtNDQuODggNDIuODEtMTQ1Ljc1LTE1NC4wOC0xODAuNS0xMDkuOTcgODguMzMtNzUuODMtMTA5LjE4IDEwMS42MyAzMTAuODggODYuMjUgMTA5Ljk3IDE5OS42MSAxMzAuMDMgMjc4LjMxIDM0LjE0IDIxNC4yLTcxLjY2IDE2NC45NS0xMzIuOS0xMDEuNjIgMjEuNjItNDUuODctMTMwLjgxLTIxMi45IDQ3Ljc2LTUwLjgxIDExOC40OSA3OS4wMiA5Ni44My0xMDYuMTItNzUuOTgtMTgyLjk0IDM2LjIyLTExOC4zLTEyMi40Ny05Ny4zMiAxOS44NiIvPjxwYXRoIGQ9Ik0yMTgwIDM3MDIuODFsMjA2Ljc3LTUyLjgxIDc2Ljk3LTE3OC4xMy0xMTEuNjUtMTkxLjY2LTIwNy4zNSA0OS43OS04OS40NyAyMjkuNDJMMjE4MCAzNzAyLjgxTTIxMjQuMTcgMzMyMC45NGwtMTM1LjkxLTE0Ny40MS0yMzIuOTQgNTEuNzktNjQuMzggMTgxLjY2IDE1My45NSAxODEuMTUgMTg3LjItMzMuMjQgOTIuMDgtMjMzLjk1Ii8+PC9nPjxwYXRoIGQ9Ik0xMDkuNTI4IDM3MC41ODdjNS43MDggMzguODIgNTYuOTc2IDQwLjMzIDY0LjgyMiA0MC4zMyAzOS44OTUgMCA2Ni4xMDQtMTEuMzkyIDY5Ljk1My0xMi4yMDUuNTM0IDIuOTg0LS42NCAxNC41NCA0Ljk4MyAxNC41NCA3LjQxNCAwIDE1LjIxMy05LjIgMTguNzAyLTI1LjE1IDQuNTI1LTIuNDUgMTUuNzMyLTguMjkyIDI5LjIxOC0xNy41MWwtOS42MzctLjAwNWMtNS41MDUgMy40NDUtMTEuMzc0IDYuNzczLTE3LjYyNiA5LjkzNi43MDctMy4wNyAxLjI5Ny02LjQyIDEuNzgtOS45MzNsLTUuMzEzLS4wMDNjLS41MyA0Ljc0LTEuMjU1IDkuMDE3LTIuMTYzIDEyLjU1NC0yLjkxIDEuNTY0LTYuNzIgMy4xMS02LjcyIDMuMTEgMC0zLjc2Ni4wMzctOS4yNTIuMTEtMTUuNjdsLTExLjg1NC4wMDdjLS4zNDUgNi4xNjQtLjc3IDEzLjEyLTEuMjk0IDIwLjc4LTE0Ljg3NiA0LjcyNS0zNS4zNTMgOS4yNDYtNDkuNjQgOS4yNDYtMTEuMjggMC0zNi44Ni04LjYyNi00OC41Mi0zMC4wMjZ6bTkxLjY2NCAwYy0yLjk3IDcuNDEyLTUuNDIgMTQuODktNS44NDUgMTkuMzM2IDMuMzI0LTQuNTQgNS45NTctNi43MyA1Ljk1Ny02LjczLjkzLTMuODIgMi40NjMtOC4zMyA0LjIxLTEyLjYwN3ptNTYuNDQgMjIuMzUzbDQuNzM1LTIuMzY3cy0xLjI5NiA0LjcyOC00LjczNiAxMC4zNTd2LTcuOTkiIGZpbGw9IiNmZGUwMTIiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMjEuOTM4IDMyNy45MjJjLTcuNDEzIDExLjE0My0xMi45MjcgMjMuNDQ3LTEyLjkyNyAzNS4zNjggMCAyLjU2OC4xOCA0Ljk5Ny41MTggNy4yOTZoMzYuODAyYy0zLjctNi43ODQtNS45OTgtMTQuODUzLTUuOTk4LTI0LjMzOCAwLTYuNzQuODkyLTEyLjgzNiAyLjM1Ni0xOC4zMTh6bTkyLjcwNSAwYy0xLjQxNiAxMi41NTMtMy40ODYgMjEuNzQyLTUuOTQgMjYuMy0yLjI5MyA0LjI2Ny01LjA3NiAxMC4yOTUtNy41MSAxNi4zN2w0LjMyMi0uMDA1YzIuNjY4LTYuNTMyIDUuODM3LTEyLjUxOCA4LjEzNy0xNC42ODIgNC4zMDUgNi44NzggOC42NDggNy42MzggMTIuMDEyIDcuNjM4IDkuMzE1IDAgMTkuNDktMjAuNjQ2IDIxLjUwNi0yNC4zNDcgMCAwLS4yNzIgMTEuNTQtMS4zODcgMzEuMzk4bDExLjg1My0uMDA3Yy4xNDItMTIuNjI2LjQyMi0yOC44NDcuODMyLTQyLjY2NGgtMTMuNjg2Yy00LjE3NiAxMy4xMjUtMTMuNTc4IDI3Ljk4Mi0xNi43NjIgMjcuOTgyLTMuMiAwLTIuMjA4LTE0LjE2OC0xLjE0Mi0yNy45ODV6bTEyMC41NjMgMGMtMTEuMTQyIDE0LjYyNy0yNi43NTUgMjkuNTUtNDcuNjM3IDQyLjY1Nmw5LjYzNi4wMWMxNC44NDItMTAuMTQyIDMyLjQ0NC0yNC4zNzUgNDYuOTQtNDIuNjczem02OS4zOCAwYzMuMzc3IDEuMTkgNy4wMTMgMS43NTggMTAuNTQ0IDEuNzU4IDYuNzkgMCAxMy4yNTQtLjYxNyAxOS4zNy0xLjc1OHptLTEzOC4xNzUgNDIuNjY1YzEuNDMtMTIuNzggMS40MzgtMjguODg2LS4yMjMtNDIuNjY3bDYuNzEyLjAwMmMuNDIgNC4yNjUuNjQ4IDguNzc3LjY0OCAxMy41IDAgOS40NDctLjU0MyAxOS44OC0xLjgyMyAyOS4xNjhsLTUuMzE0LS4wMDMiIGZpbGw9IiNmZGUwMTIiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMzkuMTgyIDMwNi41OWMtNS44NDggNi4xNzYtMTIuMDE4IDEzLjQ2Mi0xNy4yNDQgMjEuMzI1bDIwLjc1LjAwN2MyLjI5NC04LjU4MyA1Ljk4OC0xNS42NiA5Ljg1LTIxLjMyOHptNzcuMDY2IDBjLS4zNDcgNy44NTctLjg5MyAxNS4wMjItMS42MDcgMjEuMzM3bDEyLjIzOC0uMDA1Yy41NjItNy4yODIgMS4xNDMtMTQuNDY0IDEuMTQzLTE5LjQyNyAwLS42MjYuMDA4LTEuMjYyLjAyLTEuOTA2em0zMi43NDIgMGMtLjcxNSA1LjktMS44MTUgMTIuNDMtMy4zNCAxOC4zMjUtLjI1My45ODctLjU0NSAxLjk5LS44NjggMy4wMDdoMTMuNjg2Yy4yNTItOC40OC41NTQtMTYuMDUyLjkwNC0yMS4zMzN6bTI2Ljg5OCAwYzIuNDEyIDIuOTA3IDMuOTY0IDUuMzk2IDExLjQxIDUuMzk2IDUuNTczIDAgMTAuODM2LTIuMDM1IDE1LjQwMi01LjQwNHptNzIuNzEgMGMtMy40MjggNi44Ny03Ljg2IDE0LjA2Mi0xMy4zOTIgMjEuMzI4bDguOTQuMDA0YzUuMjEyLTYuNTg4IDEwLjAyMi0xMy42OTUgMTQuMTU4LTIxLjMyNXptNDEuMzE4IDBjLS4wMi40NDMtLjAyOC44OS0uMDI4IDEuMzQgMCAxMC43MjggNi41OTUgMTcuMTUgMTQuNyAxOS45OTdsMjkuOTEzLS4wMDVjMTguMDMtMy4zNjMgMzMuMDYtMTEuMjc0IDQ0LjY2Ny0yMS4zMjRsLTE3LjIyNS0uMDFjLTE1LjIxMyA5LjA1OC0zMi45MzMgMTMuODY3LTQ3LjYyNyAxMy44NjctOS42OCAwLTE0LjA3Ni03LjAzMy0xNC42NjUtMTMuODY0em0tMTIzLjczIDIxLjMzMmMtMS4wMTMtOC40MDItMi42NDYtMTUuOTM3LTQuOTU0LTIxLjMzbDcuNDY3LS4wMDNjMS45MiA2LjA2MyAzLjQgMTMuMjU0IDQuMiAyMS4zM2wtNi43MTMuMDAyIiBmaWxsPSIjZmRlMDEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTQ5LjgyOCAyODUuMjU2YzIuNDYyIDEuNzcgNS4wODcgMy4wODUgNy43MTYgNC4xMDItMy43MjcgMy4wOC0xMC43NzIgOS4yMTgtMTguMzYyIDE3LjIzM2gxMy4zNTdjNS44NDMtOC41NzMgMTIuMDctMTMuOTE2IDE0LjM5My0xNi4zNyAxMS41NTUgMS42OSAyMi4zNTYtMS4wMTggMjkuODMtNC45NnptNjYuODUzIDB2LjkzMmMwIDcuMTk3LS4xNSAxNC4wMjgtLjQzMiAyMC40MDVsMTEuNzkzLS4wMDRjLjEzLTYuNTAyLjg5My0xMy45IDEuOTYtMjEuMzN6bTIzLjIzNCAwYzEuMjQgMy4xMSA3LjA4IDYuMDA1IDEwLjEwNSA3LjIxNi0uMDEzIDMuMzgtLjM0NCA4LjQ2LTEuMDMgMTQuMTE4aDEwLjM4MmMuMDgtMS4xOTcuMTYtMi4yNzcuMjQ2LTMuMjIzLjU3Ljk2NCAxLjEwNyAyLjA0MyAxLjYxNCAzLjIyNGg3LjQ2N2MtMi4zMjgtNy4zMzctNS4yOTYtMTMuMDE2LTguNDYtMTYuNTg1IDMuMzE3LTEuODg3IDcuMzEtMy4zMzMgMTEuMDYtNC43NXptNDUuMTcgMGMuNzE0LjE3IDEuNTU4LjI3NSAyLjU4Mi4yNzUgMS4wMjUgMCAyLjA2LS4xMDcgMy4wODQtLjI4em0yMC42NiAwYy4xNC41MzYuMjA2IDEuMTc1LjIwNiAxLjk0IDAgNS40ODUtNi4yNTYgMTQuNjkzLTEyLjExNSAxNC42OTMtNy41MyAwLTkuMzUzLTIuOTE3LTkuODUzLTQuODg2bC05LjM1MyA4LjE2M2MuNDYuNDguODcuOTYgMS4yNTggMS40MjdsMjYuODEyLS4wMDVjNi43MTgtNC45NjUgMTEuOTI1LTEyLjgxMyAxNC4zOTctMjEuMzN6bTUwLjcwMyAwYy0xLjQ2IDYuNDYtNC4wMzMgMTMuNjk2LTcuODUgMjEuMzRsOS43MDctLjAwN2MzLjYzNS02LjcgNi43NDgtMTMuODEgOS4xNTUtMjEuMzI2em00Mi40NTQgMGMtNS4zNzQgNi4zNC04LjY0OCAxMy40NzMtOC45ODQgMjEuMzNsOS43MzQuMDAzYy0uMDQ3LS41MzUtLjA3LTEuMDctLjA3LTEuNiAwLTYuMTc4IDQuNDc0LTEzLjExIDExLjkyMy0xOS43Mzd6bTYzLjA0MiAyMS4zMzNjOS4zMzYtNS41NTIgMTcuNzI3LTEyLjcwNSAyMy44OTctMjEuMzI1bDExLjMyOC0uMDFjLTQuNTIyIDcuNTc1LTEwLjU2IDE0LjktMTggMjEuMzQzbC0xNy4yMjYtLjAxIiBmaWxsPSIjZmRlMDEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTM3LjMzMyAyNjMuOTIzYzIuMDMgMTAuNzggNi44MzMgMTcuMjU4IDEyLjQ5NSAyMS4zMzJoNDYuOTM0YzYuMzItMy4zMyAxMC4yNi03LjU1IDEwLjI2LTEwLjc0MyAwLTYuOTY2LTQuNjAyLTYuNDYtOC44NzYtNi40Ni00LjI3NSAwLTE5Ljk4MiA1LjM3Ni0yOS45NDYgMTMuNDU2LTQuMjQ3LTIuNzI3LTEwLjkwOC05LjAzMi0xMy43ODQtMTcuNTg2em04MC4yMDQgMGMtLjU2IDYuNDg4LS44MzYgMTMuNjYtLjg1NiAyMS4zMzJIMjMwYzEuMDU0LTcuMzU1IDIuNDEtMTQuNzQ1IDMuNzQtMjEuMzN6bTMzLjA2MiAwYy4wNDggOC44NzUuMjIyIDE2LjE1Ny0uMjkyIDE5LjMzLTMuMDQ4LTEuNDI0LTguNzctMy41NjQtMTAuMzQtLjM3Ny0uMzg3Ljc5LS4zNjcgMS41ODgtLjA1NCAyLjM3M2wzMS4zODUuMDA2YzMuMTQ0LTEuMTkgNi4xMTctMi4zNTcgOC4zNzQtMy43NDggMS44MiAxLjIxMiAyLjYxIDMuMDQ3IDUuNDEgMy43NGw1LjY2Ni4wMDhjNC4wMi0uNjc3IDcuOTA4LTIuMzM1IDEwLjU4OC0yLjMzNSAyLjU5OCAwIDMuOTMzLjU0NSA0LjQwNiAyLjM0bDExLjM1My0uMDA0YzEuMDIyLTMuNTEzIDEuNTc1LTcuMTQ0IDEuNTc1LTEwLjczMyAxLjg2LTIuODMgNS42NjMtNy41NzMgNy4xMzMtOC43NzctLjYzIDcuMjA1LS41ODQgMTguNzczIDguNTc1IDE4Ljc3MyAxNC41NTcgMCAyMS40NTgtOS45ODUgMjQuOTUtMjAuNmwtOS40NzIuMDAzYy0yLjAzMiA1LjEwMy00Ljc3MyA5LjE0LTkuMDMgOS4xNC0yLjQzNSAwLTMuMjk4LTMuODMtMy4zOTUtOS4xNEgzMjIuMThjLTEuNCAxLjk5My0zLjEwNSAzLjc0NS01LjIwNyA1LjMxNi03LjM0NS01LjEzMi0xNi43NDMtMS4wMi0xOS42Ny0xLjAyLTIuODg4IDAtMy41ODQtMi4zODItMy42MDQtNC4yOWwtMTAuODk1LS4wMDdjLTEuOTMgMy42NzItMy4xMiA3LjI5LTMuNzUyIDkuOTY3LTIuMzYgMi4zNTgtMTIuMjg0IDcuMDItMTguMjg2IDkuODM3LjU0OC02LjQ0NCAxLjAyLTEzLjE2IDEuNDQ1LTE5LjgwM3ptMTc5LjgxMiAwYy0xMi45ODIgNS41MjgtMjQuMTk0IDEyLjY5Ni0zMS41MSAyMS4zMzJoMTIuNmM5LjMwNS04LjI3OCAyMy4yNTQtMTYuMDc2IDM4LjkzLTIxLjMyNHptLTYyLjk1MyAyMS4zMzNjLjU2NS0xLjc2IDEuMDkyLTMuNTUgMS41NzctNS4zNmwtMTIuMTQ1IDMuMjI0Yy0uMTM0LjctLjI4NCAxLjQwOC0uNDQ1IDIuMTI4em0xMTguMzggMGM0LjUzMy02LjMyNyA3Ljg2OC0xMy40NTQgOS40OTMtMjEuMzIybDEwLjQ1Mi0uMDFjLTEuNDkgNi45NzgtNC4zOTIgMTQuMjY1LTguNjE3IDIxLjMzN3ptLTI5MC41OTMtMTAuNTZjLTcuMDM0IDAtMTQuMDk2IDUuNDE3LTE5LjkyMyA5LjQgOS44MSAyLjI3NSAyMy4zMi0zLjEzMyAyMy4zMi02Ljk3IDAtMS45Mi0xLjE1OC0yLjQzLTMuMzk3LTIuNDMiIGZpbGw9IiNmZGUwMTIiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMzcuMTgzIDI0Mi41OWMtLjU4NCAzLjA3OC0uODg2IDYuMTY1LS44ODYgOS4yNDMgMCA0LjU0Mi4zNjggOC41NTIgMS4wMzYgMTIuMDk1bDE3LjA4My0uMDA1Yy0uODczLTIuNi0xLjM5OC01LjQxLTEuMzk4LTguMzkgMC0zLjM4NC43NDItNy44NTcgMi4yNjMtMTIuOTR6bTgzLjk5NyAwYy0xLjcyNyA1LjczLTIuOTIgMTIuOTY1LTMuNjQzIDIxLjMyOGwxNi4yMDQuMDA1YzEuOTk4LTkuODczIDMuOTQ1LTE3LjkzIDQuNzU4LTIxLjMzbC00LjY3Ny0uMDAzYy0uNDg2IDMuMy0xLjgxIDguMzUzLTQuMDIyIDE2LjE2Ny0xLjcxOC02LjM3LTEuODg2LTEyLjEzMi0xLjIzMy0xNi4xNzZ6bTI5Ljg0NyAwYy0uNDMgNy4zMS0uNDY0IDE0Ljc1Ni0uNDI4IDIxLjMyNWwxMS42MTIuMDA4Yy40NjgtNy4zNS44NzYtMTQuNjE0IDEuMjY0LTIxLjMzM3ptNzcuNTEzIDBjLTEuMTc2IDkuNDg4LTIuNzggMTYuMjE3LTYuMzYgMjEuMzI2bDE1LjI1My4wMDdjLS4xMTUtNi4zMjUuODUyLTE0Ljc1NCAxLjUzNy0yMS4zMzN6bTI1LjUzMiAwYy45NiAxLjYwOCAxLjE3NSAzLjY4My0uMDQ0IDcuNzctMS4yMDYgNC4wNS0yLjQyNyA5LjItNC4xNyAxMy41N2w5LjQ3Mi0uMDA3YzIuNDY1LTcuNDk3IDMuMjMtMTUuMzA1IDMuNzkyLTIwLjE0IDEuMjIuMTUzIDIuMDg2LS4zOTcgMi45Ny0xLjE5NHptMTUuNDgzIDBjMS4wNzcgMTAuMzggNy44OTcgMTguODg2IDE0LjM4IDE4Ljg4NiAxNi43NSAwIDIzLjY1Mi04LjIzIDI2LjEwOC0xOC44ODZoLTkuNTVjLTMuNDkgNC4xOC03LjkwMyA2LjUwMy0xMC4wNCA2LjUwMy0yLjc4NCAwLTUuODU2LTEuNDk1LTcuMzMyLTYuNTA4em02MS45NjQgMGMxLjk3IDIuMDQgNC40ODggMy4yODcgNi44IDMuMjg3IDEuNDMzIDAgMy45NjgtMS4yNzcgNi45MjUtMy4yOTJ6bTY2LjQxIDBjLS4zNiAzLjAzLS43MyA1Ljg1Mi0xLjA3MyA4LjA4NC0yMC45ODgtLjEyOC00NS45MjggNC41MTMtNjYuNDQ1IDEzLjI1aDIwLjAyYzE0LjU2Mi00Ljg2NyAzMC42MTUtNy41NCA0NS44Mi02LjM1My0uMTgyIDIuMTczLS40OSA0LjI5My0uOTIgNi4zNjJsMTAuNDUzLS4wMWMuNDItMS45OC43My0zLjkzLjkyMi01Ljg0NSA0LjAzOCAwIDE0LjQ3NiAyLjUgMTYuNjA4IDQuMDIzbDIuNTM1LTYuMDUzYy0yLjY0Ny0xLjY2OC0xMi40NTUtNC4xMTQtMTguNzE2LTQuNDMuMjg3LTIuMDcuNjkyLTUuMjEyIDEuMTY1LTkuMDIzek0yOTMuNyAyNjMuOTIzdi0uMDc3YzAtMS45MiAyLjI2NS03LjY0IDUuNjItNy42NCAyLjM1NSAwIDQuNzI3LS42MzUgNi4wMTYgMi4xOWw5LjAxNS02LjIzNWMtLjQ1My0yLjU3NC0zLjc5LTMuOTMtNy43MjgtMy45My0xMi40MDggMC0xOS43NTcgNy45Ny0yMy44MTcgMTUuNjkySDI5My43IiBmaWxsPSIjZmRlMDEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTU1LjI4IDI0Mi41OWM3LjIzNS0yNC4xNTUgMzIuMDctNjIuMDU4IDc4LjM2LTYyLjA1OCAyNi40NzYgMCAzOS40MjQgMTAuNTc0IDQzLjc1MiAxNy42NzMgMy40IDUuNTc3IDUuMzU3IDYuMzU2IDguMzg1IDYuMzU2IDMuMDI4IDAgNy40NjguNDU1IDE0LjU1LjY3LTkuNDgtMTIuODU3LTI1LjEyLTMzLjE3NS02NS4wOTMtMzMuMTc1LTQ2LjA5NSAwLTkxLjIyNiAzNC41NTItOTguMDUgNzAuNTM1em03OC41NCAwYy41Mi0zLjUxOC4wOC01LjAzMi0xLjI1Ni01Ljc1OC0xLjY3OC0uOTEyLTMuMzAzIDEuNDQ4LTQgNS43NWwtNy4zODQuMDA4YzIuNzMzLTkuMDYgNi44MDUtMTQuMzQ2IDEyLjQ2LTE0LjM0NiA0Ljk0NyAwIDYuMjQ1IDguMzQgNS4xNjMgMTMuMDU2LS4wNjguMjk0LS4xNy43My0uMzA1IDEuMjkyem0yOS42NTYgMGMuODgtMTUuMjcgMS42NDQtMjcuNzE2IDIuNzQzLTMxLjkyNiAyLjAxNy03LjczNy0zLjA3Mi00LjA4Mi01Ljg2NS0xLjQ5Ny02LjE4IDUuNzE3LTguNDk2IDE5LjMwOC05LjMyOCAzMy40M3ptNzUuNDk0IDBjLjM2My0zLjQ4Ni42NDYtNi40NTMuNjQ2LTguMzEgMC04LjMxMiA3LjA4LTUyLjY0IDcuMDgtNTcuNjg1IDAtNS4wNDctMy4wMzMtNC4yODYtNS4wNTMtNC4yODYtMi4wMTggMC02Ljc2IDEwLjkyLTkuMTEgMzAuNjktMi4wMTYgMTYuOTk0LTIuNzc3IDI5Ljc2NS0zLjk5MyAzOS41OHptMjcuMTIgMGMuOTM3LS44NDUgMS44OTQtMS45NjggMy4zMTgtMi44MjIgMCAuOTUzLjA1IDEuODk3LjE0NyAyLjgyNWwxMy41NjYtLjAwM2MtLjU2LTEuOTA0LS44OS00LjMwOC0uODktNy4zMjYgMC0xMC45ODcgOS42MDMtMTcuODUzIDE2LjMyLTE3Ljg1MyA0LjE1NSAwIDYuOTEgNC4yNTcgNi45MSAxMS45MyAwIDUuNDMzLTIuMTkgOS45MjgtNC45NjYgMTMuMjVoOS41NWMxLjY3NC03LjI3IDEuMjgtMTUuNjczLjUzLTIzLjM2MiA0Ljc2Ljc0IDExLjY5Ny01LjM1IDE0LjcyNS01LjM1IDMuMDI1IDAgNi40MiAxLjc0MiA2LjQyIDUuMTA2cy0zLjczIDguNDEyLTMuNzMgMTUuMDRjMCAzLjM5MyAxLjQ2MyA2LjQxNiAzLjUzIDguNTZsMTMuNzI1LjAwNmM2LjYyOC00LjUxOCAxNS4zODMtMTIuNzM3IDE4LjY3LTE4LjU5NSA4Ljc4IDE5Ljc4NiAzMC4zMDUgNS41NDQgMzUuODg1LS43MTQtLjI5IDQuNS0xLjA1NSAxMi40MzQtMS44NyAxOS4zMWgxMC4zN2MyLjExMy0xNy4wMzQgNS41NzItNDcuNDQzIDUuODI0LTU1LjM4NS01LjA2My0uMTA1LTkuMTkgMS4xNDUtMTIuNjUgMS4xNDVsLS45MTIgNS4yMWMtMy4zMy0yLjE5NC01LjI3OC02LjI3NS0xMi4xMjQtNi4yNzUtMTYuNTE1IDAtMjMuNjM0IDIyLjQ5NS0yNS43ODMgMzAuNDQ3LTQuNzE3IDcuMjA3LTcuOTUgMTAuNDQ0LTEzLjMzMyAxMC40NDQtNS4zODIgMC02LjYxLTIwLjgyNi0zLjctMjkuMDAyaC00LjYxMmMtMS44NDggNy40MTYtMTAuMjMgNC4xMzYtOC45ODMtMS4yNDcgMS4yNDYtNS4zODIgNC4wOTMtMTEuNjk3IDQuMDkzLTE2Ljk4IDAtMy4wNS0xLjc0LTUuMzYyLTUuNDQtNS4zNjItNC41MDMgMC01LjcgOS4zLTUuNyAxNC4zNDcgMCA1LjA0Ni40NzMgMTkuNDY0LTYuNjQyIDIzLjUyMi00LjY0NyAyLjY0OC00Ljg0OCAyLjgyMi04LjEzNCAyLjgyMi0xLjY2LTkuOTI3LTQuOTctMTYuNzY2LTYuOTEtMTYuNzY2LTIuNTk1IDAtNS4yNzYgNC44LTQuOTUgMTIuMDEzLTEyLjM5Ni0xLjgzNy0yNi42NDMgMTYuMzMzLTI4LjIxNSAyMi42MjQtMS45ODIgMi4zMTQtNC40OSAzLjk3My02Ljg0NiA0LjYzNy0uMTYyLTcuMjQtMy4wOTYtMTkuMjg2LTEwLjI5NS0xOS4yODYtNC4zNzUgMC04LjM1IDYuMDQ3LTcuNDI1IDkuNTMgMi40NjggOS4yOTQgNi43NDUgMTAuNjI1IDguNTA3IDEzLjU3em0xMjQuNjItNDguMTFjLTcuNzkgMC0xMi45MDYgNi4zOTUtMTIuOTA2IDEzLjg2NCAwIDcuNDY4LjUyNSAxMy42NiA2LjM5NiAxMy42NiA1Ljg3IDAgMTQuNjE3LTcuMTUgMTQuNjE3LTE2LjIxOCAwLTcuMzU1LTQuMjctMTEuMzA2LTguMTA4LTExLjMwNiIgZmlsbD0iI2ZkZTAxMiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
+  height: 12.8px;
+  margin-bottom: 3.6px;
+  margin-top: 3.6px;
+}
+
+.nor {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OTEuNDY3IiBoZWlnaHQ9IjU3Ny45NiIgdmlld0JveD0iMCAwIDQ5MS40NjY2NyA1NzcuOTYwMDIiPjxwYXRoIGQ9Ik0yNDUuNzMyIDEzLjA0OHMtODIuNjYgMTA4Ljg2NC0yMTkuNzQ1IDE4LjE0NWMwIDAtNTAuNDAyIDEzOS4xIDEyLjA5NCAyOTQuMzM1IDYyLjQ5NSAxNTUuMjMgMTU5LjI2NSAyMjEuNzYgMjAzLjYxNiAyNDMuOTM1bDMuOTA1IDEuNzY1IDMuMzYtMS42OGM0NC4zNTYtMjIuMTc0IDE0MS4xMi04OC43MDUgMjAzLjYyMy0yNDMuOTM1QzUxNS4wNzcgMTcwLjM3NyA0NjQuNjc3IDMxLjI3IDQ2NC42NzcgMzEuMjcgMzI3LjU4NSAxMjEuOTkgMjQ0LjkzIDEzLjEzMyAyNDQuOTMgMTMuMTMzIiBmaWxsPSIjMWY0ZmEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNDAxLjkwNyA2MC45NjVzLTM3LjYzIDEwOC44NjctMTYzLjk3MiAxODUuNDhjMCAwLTg3LjM2IDU3Ljc4OC0yMDEuNiA3MS4yMjggMCAwIDQzLjAxIDEwNi4xNzQgNjguNTQ1IDEyOS4wMjQgMCAwIDExNi45MzItMTguODE0IDIzOS4yMzYtMTEyLjg5NCAwIDAgNjcuMi00MS42NjQgMTM5Ljc3Ni0xNDIuNDY2IDAgMCA0LjAzLTEwNi4xNzQtMjAuMTYtMTU5LjkzNGwtNjEuODI1IDI5LjU2MiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTQwMS45MDcgNjIuMzFzLTczLjkyIDIwOC4zMjMtMzYyLjg4MiAyNTUuMzYzTTQ4MS4yIDE5NC4wMlMzNTMuNTIgMzkyLjkzOCAxMDkuMjUyIDQ0NC43NjMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzkyN2YzYiIgc3Ryb2tlLXdpZHRoPSIxNC4zNjE5MDc2MTAwMDAwMDEiLz48cGF0aCBkPSJNMjQ1LjMzMiAxMS45MTJzLTgxLjg2IDEwOC43OC0yMTguOTQ2IDE4LjA2YzAgMC01MC40IDEzOS4xMDcgMTIuMDk2IDI5NC4zMzYgNjIuNDk0IDE1NS4yMzUgMTU5LjI2NSAyMjEuNzYgMjAzLjYxNCAyNDMuOTM1bDMuOTA0IDEuNzY1IDMuMzYtMS42OGM0NC4zNTYtMjIuMTc2IDE0MS4xMi04OC43MDcgMjAzLjYxNi0yNDMuOTM2IDYyLjUtMTU1LjIzIDEyLjEtMjk0LjMzNSAxMi4xLTI5NC4zMzUtMTM3LjA5IDkwLjcyLTIxOS43NDQtMTguMTQ1LTIxOS43NDQtMTguMTQ1eiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTI3ZjNiIiBzdHJva2Utd2lkdGg9IjE0LjM2MTkwNzYxMDAwMDAwMSIvPjxwYXRoIGQ9Ik0yMjUuMTEgNDk5Ljc5NmwyMC4xNiAzNS42MiAxOS4yMzQtMzUuNzg0LjA0Ny0uMDc0IDM1LjYxNS0yMC4xNi0zNS43ODUtMTkuMjM0LS4xMTItLjExLTIwLjE2LTM1LjYxNy0xOS4yMzUgMzUuNzg2LS4wNC4wNjYtMzUuNjIgMjAuMTU4TDIyNSA0OTkuNjg0bC4xMS4xMTIiIGZpbGw9IiM5MjdmM2IiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik03Ni43MDcgMTg0LjYzMmMwIDEzLjE3NyAxLjExOCAxMy41NSA2Ljk2MiAxNC4yOTZsMi43MzQuMzczYy44Ny44NzIuNzQ1IDMuMTEtLjI1IDMuNjA3LTUuNDctLjI0OC0xMS4wNjMtLjM3NC0xNi41MzQtLjM3NC01LjQ3IDAtMTEuMzEzLjEyNi0xNi43ODMuMzc0LS45OTUtLjQ5OC0xLjExOC0yLjczNS0uMjQ4LTMuNjA2bDIuNzMzLS4zNzJjNS44NDQtLjc0NSA2Ljk2My0xLjEyIDYuOTYzLTE0LjI5NnYtNDYuMjQ4YzAtMTMuMTgtMS4xMi0xMy41NS02Ljk2My0xNC4yOTZsLTIuNzM0LS4zNzNjLS44Ny0uODctLjc0OC0zLjEwOC4yNDctMy42MDYgNS40Ny4yNDcgMTEuMDY1LjM3MyAxNi43ODMuMzczIDUuNDcgMCAxMS4wNjUtLjEyNiAxNi41MzYtLjM3NC45OTMuNDk3IDEuMTE4IDIuNzM0LjI0OCAzLjYwNWwtMi43MzUuMzczYy01Ljg0NS43NDUtNi45NjMgMS4xMTctNi45NjMgMTQuMjk2djQ2LjI0OE0xMzcuMjUgMTIwLjQ4YzcuOTU1IDAgMTQuOTE4LS4xMjMgMTcuNTMtLjM3IDAgMi43MzQgMCAxMi4wNTguMjQ4IDE3LjkwMi0uNS45OTMtMi43MzYgMS4yNDMtMy45OC40OTYtMS4yNDMtNy4yMS0zLjIzLTEwLjgxNS03Ljk1Ni0xMi4wNi0zLjM1Ni0uODctNi40NjQtLjk5My0xMC40NDMtLjk5M2gtNi4zNGMtNS4yMjIgMC01LjIyMi4yNS01LjIyMiA3LjIxdjIyLjI1NGMwIDMuMTA3LjEyNSAzLjM1NiAyLjk4MyAzLjM1Nmg3LjMzNmMxMC44MTcgMCAxMi44MDYtLjI1IDEzLjkyNS01LjQ3bC45OTUtNC4yMjdjLjc0Ni0uODcyIDMuMTA4LS44NzIgMy43My4xMjMtLjEyNiAzLjIzMy0uMzc0IDcuODMyLS4zNzQgMTIuNDMzIDAgNC42LjI1IDkuMDc1LjM3NSAxMi45MjgtLjYyMi45OTUtMi45ODQuOTk1LTMuNzMuMTI1bC0uOTk0LTQuODVjLTEuMTE4LTUuMjItMy4xMDctNS40Ny0xMy45MjQtNS40N2gtNy4zMzVjLTIuODU3IDAtMi45ODIuMjUtMi45ODIgMy4zNTd2MTcuNDA1YzAgMTMuMTc3IDEuMTE4IDEzLjU1IDYuOTYgMTQuMDQ4bDUuMjIzLjYyYy44Ny44NzIuNzQ3IDMuMTEtLjI0OCAzLjYwNy03Ljk1Ni0uMjQ4LTEzLjU1LS4zNzQtMTkuMDItLjM3NC01LjQ3IDAtMTEuMDY1LjEyNi0xNi43ODQuMzc0LS45OTUtLjQ5OC0xLjEyLTIuNzM1LS4yNS0zLjYwNmwyLjczNi0uMzcyYzUuODQzLS43NDUgNi45NjMtMS4xMiA2Ljk2My0xNC4yOTZ2LTQ2LjI0OGMwLTEzLjE4LTEuMTItMTMuNTUtNi45NjMtMTQuNDJsLTEuNjE1LS4yNWMtLjg3Mi0uODctLjc0OC0zLjEwNy4yNDctMy42MDUgNC4zNS4yNDcgOS45NDUuMzcgMTUuNDE2LjM3aDIzLjQ5Nk0xODcuNzIzIDE1Mi4xODRjMCAzLjM1Ni4xMjQgNS41OTUgMi4xMTIgNS41OTUgMi4zNjIgMCA1LjIyLTIuODYgOS4zMjUtNy4zMzZsMTIuNjgtMTMuNjc2YzEuNjE2LTEuNjE2IDUuMjItNS43MiA2LjcxMy03LjcwOCAyLjI0LTIuODYgMi4zNjMtMy44NTUuODctNC4yMjdsLTMuODU0LTEuMTE4Yy0uOTk0LS44Ny0uNzQ2LTIuNjEuMjUtMy42MDYgNS4yMi4yNDcgOS4zMi4zNzMgMTMuOTIzLjM3MyA1LjM0NSAwIDkuMTk4LS4yNDggMTMuNjc0LS4zNzQgMS4zNjguMzcgMS42MTYgMi45ODIuMzc0IDMuNjA1LTExLjU2IDEuNjE2LTE0LjkxOCA0LjYtMjMuNDk1IDEyLjkzLTUuMzQ3IDUuMzQ0LTEwLjMyIDEwLjQ0Mi0xNS4xNjggMTUuMjktMS40OTIgMS40OTItMS43NCAyLjIzOC0uMzc0IDQuMTAyIDkuODIzIDEyLjkzIDIxLjYzNCAyNy43MjQgMzAuNTg0IDM4LjE2NyAyLjYxIDMuMTA4IDUuNDcgNC4yMjcgOS4yIDQuNzI0bDIuOTgzLjM3M2MuODcuNjIzLjc0NyAzLjIzMy0uMjUgMy42MDctNC4zNS0uMjQ4LTkuMzIzLS4zNzQtMTUuOTEtLjM3NC02LjA5MyAwLTExLjY4OC4xMjYtMTcuMTU3LjM3NC0xLjM2OC0uNDk4LTEuMzY4LTIuOTg0LS4yNS0zLjYwNmwzLjM1OC0uNDk2YzEuOTktLjM3MyAyLjIzOC0xLjYxNi44Ny0zLjM1Ny01LjIyLTYuNDY0LTIwLjAxNS0yNi42MDQtMjQuNjE1LTMxLjMyOC0uODctLjg3LTEuODY1LTEuODY3LTIuOTg0LTEuODY3LTMuMTA3IDAtMi44NTcgMi45ODQtMi44NTcgNi41OXYxNS43OWMwIDEzLjE3NiAxLjExOCAxMy41NSA2Ljk2IDE0LjI5NWwzLjExLjM3M2MuODcuNjIzLjc0NCAzLjExLS4yNSAzLjYwNy01Ljg0My0uMjQ4LTExLjQzOC0uMzc0LTE2LjkwNy0uMzc0LTUuNDcgMC0xMS4zMTMuMTI2LTE1Ljc5LjM3NC0uOTk0LS40OTgtMS4xMTgtMi45ODQtLjI0Ny0zLjYwNmwxLjc0LS4yNDdjNS44NC0uODcgNi45Ni0xLjI0NCA2Ljk2LTE0LjQydi00Ni4yNWMwLTEzLjE3OC0xLjEyLTEzLjU1LTYuOTYtMTQuMjk1bC0yLjM2NC0uMzczYy0uODctLjg3LS43NDUtMy4xMDguMjUtMy42MDYgNS4wOTcuMjQ3IDEwLjY5LjM3MyAxNi40MS4zNzMgNS40NyAwIDExLjA2NC0uMTI2IDE1LjkxMy0uMzc0Ljk5NC40OTcgMS4xMTggMi45ODIuMjQ3IDMuNjA1bC0yLjExMy4zNzNjLTUuODQzLjc0NS02Ljk2IDEuMTE3LTYuOTYgMTQuMjk2djEzLjhNMTM1LjkxMiA0MDUuNDFsLTI5LjM4LTQxLjcwNSAxNS4zMzggNDYuMTYyLTguMjU4IDIuNzQ1LTIwLjY2LTYyLjE3MiAxNC45NTctNC45NyAyNi4zODUgMzguMTIzLTE0LjAzMi00Mi4yMyA4LjEyOC0yLjcgMjAuNzIyIDYyLjM2LTEzLjIgNC4zODZNMTg0LjA1NSAzNTAuODIzYy02LjYwMi0xNS43NC0xNy4yODctMjkuMzQyLTMxLjI1LTIzLjQ4NC0xNC43ODYgNi4yLTEyLjMzIDIzLjA0LTUuNjUyIDM4Ljk2MyA2LjYwMyAxNS43MzggMTguMTQ4IDI5LjYyIDMxLjg2IDIzLjg3IDEzLjMzLTUuNTkyIDExLjYwNy0yMy43IDUuMDQyLTM5LjM1em0tMTEuMDA4IDQuNDA0YzQuMjc0IDEwLjE5IDguNjQgMjEuODQgMS42MjggMjQuNzgtNy4wMTQgMi45NDQtMTIuNDMtOC4zNzItMTYuNzQzLTE4LjY1NS00LjE5Ny0xMC4wMDgtNy4zMzctMjEuNzQ1LTEuMTQ1LTI0LjM0IDYuMTMtMi41NzIgMTIuMDI0IDguMTE2IDE2LjI2IDE4LjIxNU0yMzkuMDUzIDM2MC4zODhsLTIzLjU5LTIwLjczYzQuMTI4LTQuNjEgMi44OTctMTIuNzEzLTEuMDYtMjAuNDQyLTUuNjUyLTEwLjk2LTEzLjI1LTEzLjExLTIwLjg0My05LjNsLTE1LjkyIDcuOTkyIDI5LjM4NCA1OC41NTMgOS42NzYtNC44NTMtMTEuNDM1LTIyLjYzMiAzLjA4LTEuNjU4IDE5LjAzOCAxOS4xNXptLTMzLjY5Mi0zMy45ODRjMi40OCA0Ljk0IDIuMTQ1IDEwLjA3NS0xLjM0NyAxMS44MjdsLTMuMzA2IDEuNjYtOC42NzUtMTcuMjgzIDMtMS41MDdjMy42NzYtMS44NDUgNy4wMS0xLjMxIDEwLjMzIDUuMzA0TTI3OC4xNDMgMzM3Ljc5MkwyNTMuMyAzMTguNTg3YzMuODI4LTQuODYyIDIuMDktMTIuODcyLTIuMzQtMjAuMzM2LTYuMzMzLTEwLjU4Ni0xNC4wNDgtMTIuMjU0LTIxLjM4OC03Ljk3NGwtMTUuMzkgOC45NzYgMzMuMDA2IDU2LjU5MyA5LjM1LTUuNDU0LTEyLjgzMy0yMS44NyAyLjk3LTEuODQ1IDIwLjIwMiAxNy45MTN6bS0zNS43NTgtMzEuODAzYzIuNzgzIDQuNzczIDIuNzcgOS45Mi0uNjA0IDExLjg4N2wtMy4xOTUgMS44NjYtOS43NC0xNi43MDcgMi45LTEuNjljMy41NS0yLjA3MyA2LjkxLTEuNzUgMTAuNjQgNC42NDNNMzA2LjM2IDMxOS4xbC0yMy42NDQtMTcuMTcuMDA0IDYuNjUgMTIuMTQ0IDE4LjIzLTguODc3IDUuOTU0LTM2LjQ5Mi01NC40MSA4LjkzNC01Ljk5IDE1LjMzMyAyMi44Ni0zLjE1Ni0zMS4wMyA4LjUzNi01LjcyNSAzLjA2NiAyOS41NDMgMzQuNzM1IDIzLjk5LTEwLjU4NSA3LjA5OE0zMzQuMTI4IDI1Ny4yOGMtMTAuNDIzLTEzLjUyLTI0LjI0My0yMy45MTctMzYuMjM1LTE0LjY3LTEyLjY5NiA5Ljc5LTUuOTk3IDI1LjQzMyA0LjU0OCAzOS4xMDYgMTAuNDI3IDEzLjUxNiAyNS4xNDggMjMuOTY3IDM2LjkyNCAxNC44ODUgMTEuNDQ4LTguODI3IDUuMTI4LTI1Ljg4NC01LjIzNi0zOS4zMnptLTMzLjI2LTI4LjQyOGMtMS45OTMtMi43LTUuMDkyLTMuOC03LjA1LTIuNDEyLTEuOTA2IDEuMzQ0LTEuODU4IDQuNTQ3LjE0MyA3LjM2NyAxLjk5NSAyLjY5NyA1LjE0NyAzLjc1NiA3LjA1MiAyLjQxIDEuOTYtMS4zODYgMS44NS00LjY2OC0uMTQzLTcuMzY1em0tMTEuNCA4LjY2N2MtMi4wNTMtMi43NzctNS4yMDctMy44MzUtNy4xMS0yLjQ5LTEuOTYgMS4zODctMS44NTMgNC42NjcuMTQyIDcuMzY2IDEuOTk1IDIuNjk3IDUuMDkyIDMuNzk3IDcuMDUyIDIuNDEyIDEuOTA0LTEuMzQ1IDEuOTEyLTQuNTktLjA4My03LjI5em0zNS4xNTUgMjYuODRjNi43NDYgOC43NTIgMTMuOTYgMTguODkgNy45MzcgMjMuNTMzLTYuMDIgNC42NDYtMTQuMTY0LTQuOS0yMC45NzItMTMuNzMtNi42My04LjU5Mi0xMi42NzctMTkuMTMtNy4zNi0yMy4yMyA1LjI2LTQuMDYgMTMuNzA0IDQuNzU1IDIwLjM5NSAxMy40MjhNMzU3LjAyIDIxOS4zOTNjLTkuMDQ3LTEwLjA0Ni0xOC40NTUtOS4xMTQtMjQuMjYzLTMuOTkzTDMxOS42IDIyNy4wMDNsNDMuMzQgNDkuMTM0IDguMTE3LTcuMTYyLTE1Ljg0NC0xNy44NjIgNS42MDItNC45NGM1Ljk2LTUuMjU3IDUuNzA2LTE2LjIxNi0zLjc5Ni0yNi43OHptLTcuNzA4IDguNzY4YzMuNTQgNC4xMTcgNS44NTUgOC45MTcgMi4wMTMgMTIuNDM2bC0yLjk2NSAyLjc0OC0xMy42NC0xNS40NjcgMy4zNC0yLjk0NWMzLjU5Ni0zLjE3MiA3LjczLS43NjUgMTEuMjUyIDMuMjNNMzk0Ljg3MiAyNDcuMjM1bC00NS42NzUtNDYuOTcgNy43MTUtNy41IDQ1LjgxIDQ3LjExLTcuODUgNy4zNk00MjcuNzA4IDIxMy43NjRsLTQ1LjkzMi0yMi4xOTMgMzUuODIgMzIuOTEtNS44ODggNi40MDgtNDguMjQ0LTQ0LjMyMyAxMC42Ni0xMS42MDYgNDEuNTggMjAuNTE2LTMyLjc3Mi0zMC4xMDQgNS43OTUtNi4zMDcgNDguMzkgNDQuNDU2LTkuNDEgMTAuMjQ0TTQ1Ny45ODQgMTgwLjA1M2MtNy4wNTIgOS4wMTItMjIuNTY3IDcuMjIzLTQwLjUxNS02LjgyNC0xNS4xNTMtMTEuODYtMjAuMTIzLTI2LjgtMTIuNzMzLTM2LjI0MyA1Ljk1NC03LjYwOCAxNC43MS02LjE1IDIwLjE4Mi0zLjY5NWwtLjg1NyAxMC4zOGMtNC45NTYtMi4zMTItOC4xNzUtMy4wMDMtMTAuODM2LjM5Ni00LjY4OCA1Ljk5IDMuMDI0IDEzLjU4OCAxMS43MjQgMjAuNCA5LjI0NyA3LjIzNiAyMC4yODIgMTIuODI4IDI0LjIxIDcuODEgMS44Ni0yLjM3NCAyLjY3My0zLjczOCAyLjYxNi01LjI2MmwtOS44NzUtNy41NTUtNC41MTcgNS43NzUtOC40NjgtNi42MjggMTAuNzY4LTEzLjc2IDI1LjE3NCAxOS43MDJjLjY2MiAzLjQ3Ny0yLjgxOCAxMC4zMjItNi44NzMgMTUuNTAzIiBmaWxsPSIjOTI3ZjNiIi8+PC9zdmc+");
+}
+
+.dff {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MC44MTMiIGhlaWdodD0iODUuODEzIiB2aWV3Qm94PSIwIDAgNzAuODEzMzMyIDg1LjgxMzMzMiI+PGcgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMS41MzQgMS43MjdsNjcuODU3LjEwOC0uMDU1IDM1LjZMNjggNTMuMTg0bC01LjI1NyA5LjAzLTYuOCAxMC4xOC0xMi45ODMgNy42Ny03LjYyOCAzLjk3OC0xNi42NDUtOS45OTctOC4xMy02Ljk5My03LTEyLjAyLTIuMDkzLTguOTE2LjA3LTQ0LjM5IiBmaWxsPSIjZjRmNGY0Ii8+PHBhdGggZD0iTTMwLjA3IDIzLjk4Yy0uMTUtLjQ4Ni0uMzYtLjk0Mi0uNi0xLjMzNy0uMjY3LS4zOTUtLjU2Ni0uNzMtLjg2NS0xLjAwNC0uMy0uMzA0LS42MjgtLjUxOC0uOTg4LS42Ny0uMzg4LS4xODQtLjgzOC0uMzM1LTEuNDM2LS40MjctLjU5OC0uMTIyLTEuMzc3LS4xNTUtMi4xNTUtLjE1NmwtNS45OS0uMDEtLjAxNyAxMC43MmMtMi4xIDIuMjc0LTMuNzgyIDQuOTQzLTQuODk1IDcuNzY2LTEuMDgzIDIuNzkyLTEuNjI2IDUuNzY2LTEuNiA4Ljc0Mi4wMjQgMy4wMDYuNTg4IDUuOTg1IDEuNjYyIDguNzggMS4wNzQgMi43NjUgMi42NTggNS4zMTggNC42NiA3LjUwNyAyLjAzNCAyLjE5IDQuNDU3IDMuOTg0IDcuMTIgNS4yNjYgMi42NjMgMS4zMDggNS41NjcgMi4xMDIgOC41MDMgMi4zMiAyLjkwNS4yNDggNS44NC0uMTEyIDguNTk3LS45OWwtLjAzMiAxLjg4NCAzLjU5Mi4wMDUuMDA2LTMuMzRjMi40MjgtMS4yMTIgNC42OC0yLjg0NyA2LjU2Ny00LjgxNyAxLjg5LTEuOTcgMy40NS00LjI3NyA0LjU2Mi02LjgyNSAxLjExLTIuNTUgMS44MDYtNS4zMTIgMi4wMi04LjEwNS4yMTQtMi44MjQtLjA1LTUuNjgtLjc5Ni04LjM4Mi0uNzE0LTIuNzAzLTEuOTA4LTUuMjg3LTMuNDkyLTcuNTY2bDMuNjMtMy42NyA0LjEyNiA0LjM1LjA4Mi0xMy45Ny0xMy43NDYtLjA1IDMuOTE4IDMuNzQtMy42OSAzLjc2Yy0yLjk2NS0xLjQ5My01Ljg5Ny0zLjAxNi05LjAxLTMuNTk4LTMuMTQ0LS41ODItNi40MzgtLjI1My05LjczMy4wNzdNMi41NTcgMTUuNDM1bDY1LjUuMTA0LS4xMDMgMjYuNjljLS4wMDYgMy45MTgtLjc2IDcuODA1LTIuMDUzIDExLjYyNy0xLjI2NiAzLjgyNi0zLjE1NyA3LjU1Ni01Ljc0IDExLjAxNS0yLjU4IDMuNDI4LTUuODUgNi42MS0xMC4wMTcgOS41OC00LjEzOCAyLjk5OC05LjE0NiA1LjgxNS0xNC40MiA4LjA1NC01LjIzNy0yLjA3My0xMC4yMzMtNC44NDQtMTQuNDIyLTcuOTQ3LTQuMTg4LTMuMTA1LTcuNTY3LTYuNTQyLTEwLjM0Ny0xMC4yMi0yLjc3OC0zLjcwOC00Ljk5LTcuNjktNi4zOS0xMS42Ny0xLjQtNC4wMS0xLjkwNC04LjA1LTEuOTI3LTEyLjA5bC0uMDgyLTI1LjE0MyIgZmlsbD0iI2VkMTkyZCIvPjxwYXRoIGQ9Ik00Ni45MzMgNjAuMzI0bC0xLjI5LS4wMy4wMS01LjE5NCA1LjA5Mi4wMDhjLS41NyAxLTEuMTEyIDEuOTctMS43NDMgMi44NTItLjY2Ljg3OC0xLjM1IDEuNjA3LTIuMDcgMi4zNjQiIGZpbGw9IiNlZDE5MmQiLz48cGF0aCBkPSJNMzMuNDMgNTcuOTM1bDMuNTYzLjAwNS4wMzItMjAuNDA2LTMuNTY0LS4wMDV6bS0xNC4xMS0xNy4xNWwzLjgwMy4wMDZjLjk2LjAzMyAxLjk0Ny4wMDQgMi42OTYtLjExNi43NDgtLjA5IDEuMjU3LS4yMSAxLjY3Ny0uMzkuNDItLjE4My43NS0uNDI1IDEuMDUtLjY5OC4zLS4yNzMuNTQtLjYwNy43NS0xIC4zOS0uODUuNzgtMS43Ljk5My0zLjAzNi4yNC0xLjMwNS4zMDQtMy4wOTcuMzY3LTQuODkgMS41ODgtLjM2IDMuMjA2LS41NyA0LjczMy0uNTY3IDEuNTI3LjAwMiAyLjkzNS4xODUgNC4zNy41ODMgMS40MDcuMzk3IDIuODc2IDEuMDM3IDQuMTYyIDEuNzk4IDEuMzE3Ljc2MiAyLjUxMyAxLjY3NCAzLjU2IDIuNzQgMS4wNDcgMS4wNjMgMS45NDIgMi4yOCAyLjY1OCAzLjYxNi43NSAxLjMzOCAxLjM0NSAyLjc2NiAxLjczIDQuMjI1LjM2IDEuNDkuNTY1IDMuMDA3LjU2MyA0LjQ5NC0uMDMgMS41MTctLjIxNCAzLjAwNS0uNjM2IDQuNDZsLTkuNjc0LS4wMTUtLjAxOCAxMS42Yy0xLjc5OC43OS0zLjcxNiAxLjI3Mi01LjY5IDEuNDItMS45OC4xNS0zLjk4NS0uMDY4LTUuOS0uNjE4LTEuOTE4LS41NDgtMy43MTItMS40MzItNS4zMjgtMi41ODgtMS42MTYtMS4xNTgtMy4wMjItMi42Mi00LjE1Ni00LjI2LTEuMTA1LTEuNjctMS45Ny0zLjU1NC0yLjUwNy01LjUzLS41MzYtMS45NDUtLjc0Mi0zLjk4LS41OS01Ljg5LjEyNC0xLjkxNS42MDUtMy43MDYgMS4zODctNS4zNDVNMjYuNTAzIDI1LjAwN2MtLjkuMzY0LTEuOC43NTYtMi42MzcgMS4yMS0uODQuNDg1LTEuNTkgMS4wMy0yLjM3IDEuNTc2bC4wMDgtNC42MTYgMS43MzguMDAyYy40NzgtLjAzLjkyNyAwIDEuMjg3LjA2Mi4zNTguMDYuNTk4LjEyMy44MDcuMjQ0LjE4LjA5Mi4zNi4yMTQuNDc4LjM2Ni4xNS4xNTIuMjcuMzA0LjM5LjUxNy4xMTguMTguMjEuMzkzLjI5OC42MzciIGZpbGw9IiNlZDE5MmQiLz48cGF0aCBkPSJNMjcgMzIuMTQ0Yy0uMDYgMS4xMjMtLjA5MyAyLjI0Ny0uMjczIDMuMDk2LS4xNTIuODItLjQyMiAxLjMzNS0uNzIyIDEuODgyLS4wOS4xNS0uMjQuMzA0LS4zOS40MjUtLjEyLjA5LS4zLjE4LS41MS4yNzMtLjI0LjA2LS41MS4xMi0uODEuMTUtLjE1IDAtLjI5OC4wMy0uNDc4LjAzbC0uNTQtLjAwMi0xLjc5Ny0uMDAzLjAwMi0xLjE1M2MuODctLjk0IDEuNzEtMS44OCAyLjY0LTIuNjY4LjkzLS43NTggMS44OS0xLjM5NCAyLjg4LTIuMDMiIGZpbGw9IiNlZDE5MmQiLz48cGF0aCBkPSJNMzUuNzI3IDgyLjJjNS4yNzQtMi4zMyAxMC4zNC01LjIwNiAxNC40MTgtOC4yMDUgNC4xMS0zIDcuMjI2LTYuMDkzIDkuNjktOS40NiAyLjQ2LTMuMzY2IDQuMjMzLTcuMDEgNS40OTYtMTAuNzcgMS4yNjctMy43NjQgMi4yLTcuNjUgMi4yMDctMTEuNTM3bC4xMDItMjYuMjM0LTY0LjUxMi0uMTAzLS4wNzMgMjYuMzU4Yy0uMDA2IDMuNDkuNzk4IDYuOTU1IDIuMTcgMTAuNjYyIDEuMzcgMy43MzggMy40IDcuNzUgNi4wNiAxMS4zNjYgMi42NiAzLjU4NyA1Ljk1IDYuNzggMTAuMTEgOS43OTQgNC4xMjcgMy4wMTIgOS4xMjQgNS44NzUgMTQuMzMyIDguMTNtMzIuMDgtNzguOTlsLTY0Ljc1LS4xMDMtLjAxNiAxMC4wNSA2NC43NTIuMTAzek0zNS43NTIgODUuODE0Yy01LjcxNi0yLjQwOC0xMS4xOTItNS41MTMtMTUuNzA4LTguNzctNC41MTgtMy4yNTYtOC4xMDctNi42OTUtMTEuMDM2LTEwLjYxNi0yLjg5OC0zLjkyLTUuMTM4LTguMjk4LTYuNjI4LTEyLjM3Qy44ODYgNDkuOTktLjAwNiA0Ni4yNTIgMCA0Mi40ODdMLjAzNy4wMDZsNzAuNzcyLjExLS4wNjggNDIuNDgyYy0uMDA3IDQuMTMtMS4xNTMgOC4xNjYtMi41NjcgMTIuMjY0LTEuNDE2IDQuMDk2LTMuMzk3IDguMTkzLTYuMSAxMS44OTUtMi42OTggMy43My02LjE1IDcuMDM0LTEwLjYxNyAxMC4yNzYtNC40NjYgMy4yMTItOS45NTQgNi4zMy0xNS43MDcgOC43OCIgZmlsbD0iI2QwYTQ1MSIvPjxwYXRoIGQ9Ik02LjczNiA2LjA1OEw2LjczIDEwLjQ2bDEuMjI3LjAwM2MuMTUgMCAuMjctLjAzLjM5LS4wNnMuMjQtLjA5Mi4zMy0uMTUyYy4wOS0uMDYuMTgtLjE1LjI3LS4yNC4wNi0uMTIzLjE1LS4yNDQuMjEtLjM5Ni4wNi0uMTUyLjEyLS4zMzMuMTUtLjU3Ni4wMy0uMjEzLjA2LS40ODYuMDYtLjc2LS4wMjgtLjI3My0uMDI4LS41NDYtLjA1Ny0uNzktLjAzLS4yNDItLjA5LS4zOTQtLjE1LS41NzctLjA2LS4xNS0uMTUtLjI3Mi0uMjA4LS4zNjMtLjA5LS4xMi0uMTgtLjIxNC0uMjctLjI3NC0uMTItLjA2LS4yMS0uMTIyLS4zMjgtLjE1Mi0uMTItLjAzLS4yNC0uMDYtLjM5LS4wNnpNNS41IDExLjY3M2wuMDEtNi44MDIgMi42NjcuMDA1Yy4yMzggMCAuNDc4LjA2Mi42ODguMTIzLjI0LjA2LjQxOC4xODMuNjI4LjMzNS4xOC4xMjIuMzYuMzA0LjUwOC41NDcuMTUuMjE0LjMuNDg2LjM5Ljc5LjEyLjMwNC4xNzguNjcuMjM4IDEuMDMzLjAyOC4zNjUuMDI4Ljc5LS4wMDIgMS4xNTQtLjA2LjM5NS0uMTIuNzMtLjI0IDEuMDMyLS4wOTIuMzAzLS4yNDMuNTc2LS4zOTMuNzg3LS4xNS4yMTMtLjMzLjM5NS0uNTEuNTQ3LS4yMS4xNS0uMzkuMjczLS42My4zMzMtLjIxLjA2LS40NDguMDktLjY4OC4wOWwtMi42NjYuMDI2TTE3LjAxIDQuODl2MS4yNDVsLTMuMjk2LS4wMDYtLjAwMiAxLjQyNyAyLjk5NS4wMDQtLjAwMiAxLjE4NS0yLjk5NS0uMDA0LS4wMDIgMS43MzIgMy40NDQuMDA1LS4wMDMgMS4yMTUtNC43MDItLjAwOC4wMS02LjgwMiA0LjU1My4wMDdNMjMuMjM3IDYuOTk1Yy0uMDMtLjE1LS4wOS0uMjczLS4xNS0uMzk2LS4wNi0uMTIyLS4xNS0uMjEzLS4yMzgtLjMwNC0uMDkyLS4wOS0uMjEtLjE4My0uMzYtLjI0NC0uMTItLjA2LS4yNy0uMDkyLS40Mi0uMTIzLS4xNS0uMDMtLjMtLjAzLS40NSAwLS4xNDggMC0uMjk4LjA2LS40MTguMTItLjE1LjA2LS4yNy4xMi0uMzkuMjEyLS4wOS4xMi0uMjEuMjQzLS4zLjM5NC0uMDkuMTIyLS4xOC4zMDQtLjI0LjUxNi0uMDYuMTgyLS4wOS4zOTQtLjEyLjY2OC0uMDMyLjI0My0uMDMyLjUxNy0uMDMyLjc5LjAzLjI0Mi4wNTguNDg1LjExOC42NjcuMDYuMjEzLjE1LjM5Ni4yMS41NDguMDg4LjE1Mi4yMS4yNzQuMjk4LjM5NC4xMi4wOS4yNC4xODMuMzYuMjQ0LjE0OC4wOS4yNy4xMi40MTguMTUuMTUuMDMyLjMzLjAzMy40OC4wMDMuMTUgMCAuMy0uMDMuNDUtLjA5LjExOC0uMDYuMjY4LS4xNTIuMzktLjI0My4xMTgtLjA5LjIxLS4yMTMuMy0uMzMzLjA4OC0uMDkuMTQ4LS4yNDMuMTc4LS4zNjQuMDYtLjE1LjA2LS4yNzMuMDYtLjQyNWgtMS40MDZsLjAwMi0xLjE1NSAyLjYzNS4wMDQtLjAwNiAzLjYxM2gtLjg2OGwtLjE4LS44MjJjLS4wOS4yMTQtLjI0LjM5NS0uNDIuNTQ3LS4xOC4xODItLjM5LjMwNC0uNjYuMzY0LS4yNC4wOTItLjU0LjE1Mi0uODA4LjE1Mi0uMyAwLS42LS4wNjItLjg3LS4xNTQtLjI2OC0uMDktLjUzNy0uMjE0LS43NDYtLjM5Ni0uMjQtLjE4My0uNDUtLjQyNi0uNjI4LS42Ny0uMTgtLjI3My0uMzMtLjU3Ny0uNDQ4LS45NC0uMDktLjMzNS0uMTc4LS43My0uMTc4LTEuMTI1LS4wMy0uMzk1IDAtLjg1LjA5Mi0xLjI0NS4wNi0uMzk0LjE4LS43MjguMzMtMS4wNjIuMTUtLjMwMy4zMy0uNTQ2LjU0LS43NTguMjEtLjIxMy40NS0uMzk1LjcyLS41MTYuMjctLjE1LjU0LS4yNC44Ny0uMjcuMy0uMDYyLjY2LS4wMy45ODggMCAuMzMuMDYuNjI4LjE1My44NjcuMjc0LjI3LjEyMy41MS4zMDUuNjg4LjQ4OC4xOC4xODIuMzMuNDI2LjQ0OC42NjguMTIuMjQzLjE4LjUxNy4yMS44MmgtMS4zMk0zMC45NjcgNC45MWwtLjAwMiAxLjI0N0wyNy43IDYuMTUgMjcuNyA3LjU4bDIuOTk1LjAwNS0uMDAyIDEuMTg0LTIuOTkzLS4wMDQtLjAwMyAxLjczIDMuNDE0LjAwNi0uMDAyIDEuMjE0LTQuNzAyLS4wMDguMDEtNi44MDIgNC41NTMuMDA3TTM0LjE2NyA3Ljg2MmwxLjU1OC4wMDJjLjEyIDAgLjIxIDAgLjMtLjAzLjA5IDAgLjE1LS4wMy4yMS0uMDkuMDg4LS4wMy4xMi0uMDYuMTgtLjEyLjAyOC0uMDYyLjA5LS4xMjIuMTItLjIxNCAwLS4wNi4wMy0uMTUyLjA2LS4yNzMgMC0uMDkgMC0uMjEyLS4wMy0uMzAzIDAtLjEyMi0uMDMtLjIxMy0uMDYtLjI3NC0uMDMtLjA5LS4wNi0uMTUyLS4wOS0uMjEyLS4wNi0uMDYtLjEyLS4wOTMtLjE4LS4xMjItLjA2LS4wNi0uMTItLjA5LS4yMDgtLjA5LS4wOS0uMDMyLS4xOC0uMDYzLS4yOTgtLjA2M2wtMS41Ni0uMDAyem0yLjgxNC42MWMuMTIuMDYzLjI0LjEyNC4zMy4yMTUuMTIuMDkuMTguMTgyLjI0LjMzNC4wOS4xNTQuMTIuMzM2LjE1LjU0OC4wMy4yNDQuMDMuNTE2LjAyNy42OTh2LjYwN2MuMDMuMTIuMDU3LjI3NC4wOS4zOTUuMDMuMTIuMDkuMTguMTQ3LjIxMnYuMjQyaC0xLjM3N2MtLjAzLS4xMjMtLjA2LS4yMTQtLjA5LS4zMzYtLjAzLS4xMi0uMDMtLjMwMy0uMDI4LS40NTV2LS44ODFjLS4wMy0uMTItLjAzLS4yNzQtLjA2LS4zNjUtLjAzLS4xMi0uMDYtLjE4Mi0uMDktLjI0Mi0uMDMtLjA2Mi0uMDktLjEyMi0uMTItLjE4My0uMDU3LS4wNi0uMTItLjA5LS4xNzctLjEyMi0uMDYyLS4wMy0uMTUtLjA2LS4yNC0uMDktLjA5IDAtLjIxLS4wMzItLjMtLjAzMmwtMS4zMTgtLjAwMi0uMDA1IDIuNzAzLTEuMjU3LS4wMDQuMDEtNi44MDIgMy4wNTUuMDA2Yy4yNCAwIC40OC4wMy42OS4wOTIuMjA4LjA2LjM5LjE1Mi41MzguMjc0LjE1LjEyMi4yNy4yNzQuMzg4LjQyNS4wOS4xNTQuMTguMzY2LjI0LjU4LjA1OC4yMS4wNTguNDU1LjA1Ny42OTcgMCAuMjEzLS4wNTguNDI1LS4xMi42MDctLjA1Ny4xODItLjE4LjM2NS0uMy41MTctLjExOC4xNTItLjMuMjczLS40OC4zNjNNNDQuMTc1IDQuOTMzdjEuMjQ0bC0zLjExNi0uMDA1LS4wMDMgMS41NSAyLjc1My4wMDRWOC45MWwtMi43NTYtLjAwNS0uMDA0IDIuODI0LTEuMjktLjAwMi4wMTMtNi44MDIgNC40MDIuMDA3TTQ5LjI5MyA2LjAzNGMtLjE0OC0uMDMtLjMyOC0uMDYtLjQ3Ny0uMDYyLS4xOCAwLS4zMy4wMy0uNDguMDktLjEyLjA2Mi0uMjcuMTIyLS4zOS4yNDMtLjEyLjA5LS4yMzguMjEyLS4zMy4zOTQtLjA5LjE1LS4xOC4zMzMtLjI0LjU0NS0uMDkuMjQzLS4xMjIuNDg2LS4xNS43Ni0uMDMuMjczLS4wMy41NzYtLjAwMy44Mi4wNi4yNzMuMTIuNTE1LjE4LjY5OC4wOS4yMTMuMTguMzk2LjI2Ny41NDcuMTIuMTUyLjI0LjI3NC4zNi4zNjUuMTIuMDkuMjQuMTUyLjM5LjE4Mi4xNS4wNi4zMjguMDYyLjUwOC4wNjIuMTUgMCAuMy0uMDMuNDUtLjA5LjE1LS4wNjIuMjY4LS4xMjIuMzg4LS4yNDQuMTIzLS4wOS4yNDItLjIxLjM2LS4zOTQuMDkyLS4xNS4xODItLjMzMy4yNDItLjU0Ni4wOS0uMjQzLjEyLS40ODUuMTUtLjc2LjAzLS4yNC4wMDItLjU0NS0uMDMtLjc5LS4wMjgtLjI3LS4wODYtLjUxNS0uMTQ2LS43MjgtLjA5LS4yMTItLjE4LS4zOTQtLjMtLjU0Ni0uMDktLjEyMi0uMjA4LS4yNDQtLjMyOC0uMzM1LS4xMi0uMDktLjI3LS4xODMtLjQyLS4yMTNtLjEyMy0xLjIxNGMuMy4wNi42LjE1My44NjYuMzM1LjI0LjE1Mi40OC4zMzQuNjkuNjA4LjIxLjI0NC4zODguNTQ3LjUwNy44ODIuMTUuMzY1LjI0Ljc2LjI5OCAxLjE1NC4wMy40MjQuMDI3Ljg4LS4wMzMgMS4zMDUtLjA2LjM5NC0uMTguNzU4LS4zMyAxLjA5My0uMTUuMzMzLS4zMy42MDYtLjU3Ljg1LS4yMS4yNC0uNDUuNDIzLS43Mi41NDUtLjI3LjE1LS41Ny4yNDItLjg3LjI3LS4zMy4wNjItLjY1OC4wMy0uOTU4LS4wMy0uMzMtLjAzMi0uNi0uMTU0LS44NjgtLjMwNi0uMjctLjE1Mi0uNDgtLjM2NS0uNjktLjYwOC0uMjA4LS4yNDUtLjM4OC0uNTUtLjUzNi0uOTEzLS4xMi0uMzM1LS4yMS0uNzMtLjI3LTEuMTU0LS4wMjctLjM5NS0uMDI3LS44NS4wMzUtMS4yNzYuMDU4LS4zOTQuMTc4LS43OS4zMjgtMS4xMjIuMTUtLjMzNC4zMzItLjYwNy41Ny0uODUuMjEtLjIxMi40NTItLjM5NC43MjMtLjU0Ni4yNy0uMTIuNTY4LS4yNDMuODY4LS4yNzIuMzMtLjAzLjY2LS4wMy45Ni4wMzJNNTQuODMgNy44OTVsMS41Ni4wMDJjLjEyIDAgLjIxIDAgLjMtLjAzLjA5IDAgLjE4LS4wMy4yNC0uMDkuMDYtLjAzLjExOC0uMDkuMTUtLjEyMi4wNi0uMDYuMDg3LS4xMi4xMi0uMjEyLjAzLS4wNi4wNi0uMTUyLjA2LS4yNzN2LS4zMDRjLS4wMy0uMTItLjAzLS4yMTMtLjA2LS4yNzMtLjAzLS4wOS0uMDktLjE1My0uMTItLjIxMy0uMDYtLjAzLS4xMTctLjA5LS4xNzgtLjEyMi0uMDYtLjA2LS4xMi0uMDktLjIxLS4wOS0uMDktLjAzLS4xOC0uMDYyLS4zLS4wNjJsLTEuNTU4LS4wMDN6bTMuNzE3LS45MzVjMCAuMjEyLS4wMy40MjUtLjEyLjYzNy0uMDYyLjE4Mi0uMTUuMzY0LS4zLjUxNi0uMTIuMTUtLjMuMzAzLS40OC4zOTQuMDkuMDMuMTUuMDYuMjA4LjEyMi4wNi4wMy4xMjIuMDkuMTguMTUuMDYuMDYuMTIuMTIyLjE1LjE4My4wMy4wOS4wOS4xODMuMTIuMjczLjAzLjEyMi4wNTguMjEzLjA1OC4zOTYuMDMuMjEyLjAzLjQ1NS4wMy42MzhWMTAuOTY3Yy4wMjguMTIyLjAyOC4yMTMuMDU2LjI3NC4wMy4wOTIuMDYuMTUzLjA5LjE4M2wuMDkuMDl2LjI0NWwtMS4zNDctLjAwM2MtLjA2LS4xMjItLjA5LS4yMTItLjEyLS4zMzQgMC0uMTItLjAzLS4zMDMtLjAzLS40NTV2LS40ODRsLjAwMi0uMzY1Yy0uMDMtLjEyLS4wMy0uMjcyLS4wNi0uMzY0LS4wMy0uMTItLjA2LS4yMTItLjA5LS4yNzItLjAyNy0uMDYyLS4wNi0uMTIzLS4xMTctLjE4My0uMDYtLjAzLS4xMi0uMDktLjE4LS4xMjItLjA2LS4wMy0uMTUtLjA2LS4yNC0uMDkyLS4wOSAwLS4yMS0uMDMtLjMtLjAzSDU0LjgzbC0uMDA1IDIuN2gtMS4yNTdsLjAxLTYuODAzIDMuMDU1LjAwNWMuMjQyIDAgLjQ4LjAzMi42Ni4wOTMuMjEuMDYuMzkuMTUyLjUzOC4yNzMuMTUyLjA5Mi4yNy4yNDQuMzkuMzk2LjA5LjE1Mi4xOC4zMzUuMjM4LjU0Ny4wNi4yMTMuMDkuNDU2LjA5LjdNNjMuOTQgNi45N2MwLS4wOTMtLjAzMi0uMTg0LS4wMzItLjI3NS0uMDI4LS4wOTItLjA4Ny0uMTgyLS4xMTgtLjI0NC0uMDYtLjA5LS4xMi0uMTUtLjE4LS4yMS0uMDU4LS4wNjItLjE1LS4xMjMtLjI0LS4xNTQtLjA5LS4wMy0uMTgtLjA5LS4zLS4wOS0uMTE3LS4wMzItLjIzOC0uMDMyLS4zODgtLjAzMi0uMTIgMC0uMjY4IDAtLjM2LjAzLS4xMi4wMy0uMjA4LjA2LS4yOTguMDktLjA2LjA2LS4xNS4wOTItLjE4LjE1Mi0uMDYuMDYtLjA5LjEyLS4xMi4xOC0uMDMyLjA2Mi0uMDYuMTU0LS4wOS4yMTUgMCAuMDkgMCAuMTgyLjAyOC4yNDQgMCAuMDYuMDMuMTIuMDYuMTgyLjAzLjA2LjA5LjEyLjE1LjE4Mi4wNi4wNi4xNS4xMjMuMjQuMTgzLjEyLjAzLjI2OC4wOTIuNDQ4LjE1My4xOC4wMy4zOS4wOTIuNTcuMTIzLjE3OC4wMy4zMjguMDYuNDc3LjEyLjE4LjA2Mi40MTguMTI0LjU5OC4xODUuMTguMDkzLjMuMTUzLjQyLjI0NS4xMi4wOS4yNC4xNS4zLjI0My4wOS4wOS4xNDguMTgzLjIxLjI3NC4wNTguMDkuMTE4LjIxMi4xNDguMzM0LjAzLjEyMi4wNi4yNDMuMDYuMzY0IDAgLjE1MiAwIC4zMzQtLjAzMy40ODcgMCAuMTgtLjAzLjMzMy0uMDU4LjQ4NS0uMDYuMTUtLjA5Mi4yNzMtLjE4LjM5NC0uMDYzLjEyMi0uMTIuMjEyLS4yMTIuMzM0LS4wOS4wOS0uMTguMTgtLjI3LjI0My0uMTIuMDktLjIxLjE1LS4zNi4yNDItLjEyLjA2LS4yNy4wOS0uNDUuMTUtLjE0OC4wMzItLjMzLjA2Mi0uNTM3LjA5Mi0uMTguMDMtLjM5LjAyOC0uNi4wMjgtLjE4LS4wMy0uMzYtLjAzLS41MzgtLjA5LS4xOC0uMDMyLS4zMy0uMDYzLS40OC0uMTIzLS4xMi0uMDYyLS4yNy0uMTUzLS4zOS0uMjE0LS4xMi0uMDktLjIwOC0uMTgyLS4zMjctLjI3NC0uMDktLjA5LS4xOC0uMTgyLS4yNC0uMzAzLS4wNi0uMTItLjE1LS4yNDItLjE4LS4zOTUtLjA2LS4xMi0uMDg3LS4yNzQtLjEyLS40MjUtLjAzLS4xNTItLjA1OC0uMzA0LS4wNTgtLjQ4NmwxLjIyOC4wMDJjMCAuMTIuMDMuMjQzLjA2LjM2NS4wNi4wOTIuMDkuMTgzLjE4LjI3NC4wNTguMTIuMTc4LjE4My4yNjguMjczLjEyLjA2LjI3LjEyMy4zOS4xNTQuMTQ4LjAzLjMzLjA2Mi41MS4wNjIuMTIgMCAuMjY3IDAgLjM4OC0uMDMuMTItLjAzLjIxLS4wNi4zLS4wOS4wOS0uMDYuMTUtLjA5LjIxLS4xNTIuMDU4LS4wNi4xMi0uMTIyLjE1LS4xODIuMDMtLjA5LjA2LS4xODIuMDg4LS4yNzNsLjAwMi0uMjQzYzAtLjA5LS4wMy0uMTUyLS4wNi0uMjEzLS4wMy0uMDYtLjA2LS4xMjMtLjEyLS4xODMtLjA4OC0uMDYtLjE0OC0uMTIyLS4yNjgtLjE1Mi0uMDktLjA2Mi0uMjQtLjEyMi0uNDItLjE4My0uMTgtLjAzLS40Mi0uMDkyLS41OTctLjEyMy0uMjEtLjAzLS4zMzMtLjA2Mi0uNTEtLjEyMy0uMTUtLjAzLS4zOS0uMTIyLS41Ny0uMTgzLS4xOC0uMDkyLS4yOTgtLjE1My0uNDItLjI0My0uMTItLjA2LS4yMDgtLjE1Mi0uMjk4LS4yNDMtLjA5LS4wOS0uMTUtLjE4My0uMjA4LS4zMDUtLjA2LS4wOS0uMDktLjIxMi0uMTItLjMzMy0uMDMtLjEyMi0uMDYtLjI3NS0uMDYtLjQyNnYtLjQ4N2MuMDMtLjE1Mi4wNi0uMzAzLjEyLS40NTUuMDMtLjEyLjA5LS4yNDIuMTgyLS4zNjMuMDYtLjEyMy4xNS0uMjE0LjI0LS4zMDUuMDktLjA5LjE4LS4xODIuMy0uMjczLjEyLS4wNi4yNC0uMTIuMzktLjE4LjExOC0uMDYyLjMtLjA5Mi40OC0uMTIyLjE0Ny0uMDMuMzYtLjA2LjU2Ny0uMDYuMTggMCAuMzYgMCAuNTQuMDMuMTUuMDMyLjMzLjA2Mi40OC4xMjMuMTUuMDYuMjk4LjEyMi40Mi4xODNsLjM1Ni4yNzVjLjA5LjA5LjE4LjE4My4yNy4zMDQuMDkuMTIyLjE0OC4yNDMuMjA3LjM2NC4wNi4xMjMuMDkuMjc0LjEyLjQyNy4wMy4xMi4wNi4zMDIuMDYuNDU2SDYzLjk0TTMzLjM0MiAzNy4zNzdsMy44MzMuMDA2LS4wMzIgMjAuNjc4LTMuODM0LS4wMDQuMDMyLTIwLjY4TTMwLjIxOCAyMy45NWMtLjY5LjE1LTEuMzc3LjMtMi4wMzcuNDgyLS42MjguMTgyLTEuMjI3LjM5My0xLjgyNi42MDUtLjA5LS4yMTMtLjE4LS40MjUtLjI3LS42MDgtLjEyLS4xODMtLjI0LS4zMzUtLjM1Ny0uNDg3LS4xMi0uMTItLjI3LS4yNDQtLjQ4LS4zMzUtLjE4LS4wOS0uNDItLjE4My0uNzUtLjI0NC0uMzI4LS4wMy0uODA2LS4wNjMtMS4yNTYtLjAzMmwtMS41ODYtLjAwMy0uMDIzIDE0LjUxNCAxLjY0OC4wMDJjLjQyLjAzLjgwOC4wMDIgMS4xMDgtLjAyOC4zMy0uMDMuNTQtLjA5Ljc1LS4xNS4xOC0uMDkuMy0uMTUyLjQyLS4yNzMuMTUtLjA5LjIzOC0uMjEzLjMzLS4zNjQuMjctLjQ4NS41NC0xIC43Mi0xLjc5LjE1Mi0uODIuMjEzLTEuODgyLjI0NS0yLjk3NS42OS0uMzMzIDEuMzgtLjY5NiAyLjA0LS45Ny42NTgtLjI3IDEuMjg3LS40NTIgMS45MTctLjYzMy0uMDkzIDEuNzktLjE1NiAzLjU4My0uMzY3IDQuOTE4LS4yNDMgMS4zMzYtLjYzMyAyLjIxNi0xLjAyMyAzLjA5Ni0uMjEuMzY0LS40ODIuNzI4LS43OCAxLjAzLS4zLjI3My0uNjMuNTE3LTEuMDguNjk4LS40Mi4xODItLjk2LjMzMi0xLjcwOC40MjMtLjc1LjA5LTEuNzM4LjE0OC0yLjcyNy4xMTdsLTUuMjQtLjAxLjAzMi0yMC42NzcgNi4xMS4wMWMuNzc4IDAgMS41ODcuMDMyIDIuMTg1LjEyNC42My4xMjMgMS4wNzguMjc2IDEuNDY4LjQ2LjM4OC4xODIuNzE4LjM5NCAxLjA0Ny43LjI5OC4yNzIuNTk4LjYzNy44NjYgMS4wMzIuMjQuNDI3LjQ4Ljg4Mi42MjggMS4zNjhNNDEuOTEgNzIuNTIzbC4wMzMtMjAuNjggMTAuNjYzLjAxOC0uMDA1IDMuNDAyLTYuODMtLjAxLS4wMDYgNC44NiA0LjcwMy4wMDUtLjAwNiAzLjM0LTQuNzAyLS4wMDgtLjAxNCA5LjA3OC0zLjgzNC0uMDA1IiBmaWxsPSIjZDBhNDUxIi8+PC9nPjwvc3ZnPg==");
+}
+
+.hif {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzYuNDQiIGhlaWdodD0iMzMyLjI2NyIgdmlld0JveD0iMCAwIDI3Ni40NCAzMzIuMjY2NjYiPjxwYXRoIGQ9Ik0xNDkuMjA0IDE3Ny40MWMtLjEyMy0uMDkzLS4zMzMtLjI1OC0uNTc1LTEuMDgzLS40NzMtMS42MDItLjY0Mi02LjE4IDEuNjMtMTAuMDc4IDIuMDgtMy41NyA0Ljc3LTUuOTMgNi42ODgtNy4wODMgMS45Mi0xLjE1MiA0Ljk5Ni0yLjc2IDMuNzE2LTIuMTIyLTEuMjgzLjY0MyAyLjE1NS0xLjA1MiAzLjE4OC0xLjYxMyAxLjAzNy0uNTYzIDMuMDg0LTIuMDk3IDQuODE2LTMuNzMyIDIuNTgtMi40MyA0LjYxNy03LjQgNS43NTYtMTEuMjY0LjA4MyAwIC42OTYuMDUzLjczNiAwLS42NzYgNC45NjQuNDY1IDguNDYgMS4zMjggMTIuNTE1IDAgMCAuNzctMS45MiAxLjEzLTMuNDE3Ljg0My0zLjQ3OCAxLjk2Ny02Ljk3NiAzLjY5LTkuNTg4LjY1LTEuMDA2IDMuNTY3LTQuMjY1IDMuNjk1LTUuMDE3LjA5NC0uNTYuMzY2LS41Mi40ODItLjg4My04LjAwNSAwLTE0Ljc1LjgyNi0yMi44Ni4zOS03LjgzNC0uNDItMTcuNjY4LTIuNDY3LTI3LjMxMy0yLjM5NC0xNC4wNzMuMTA4LTMxLjg4IDMuMTEyLTQ1LjA2OCA2LjU3LjExNS4xMDcgMi40MyAzLjUxNyAyLjgxNiA0LjA5Ny42NC45NiAxLjUzOCAyLjE3NyAzLjM5MyAyLjk0NC4xOTItMS4yNjYuMTc4LTMuMzAyLjI5LTQuNzIuMDM4LjA2LjgzOC45OTguOTg0IDEuMjI3LjIxNS4zNDcuNzc3LjkwNyAxLjAzIDEuMjU0IDEuMjkyIDEuNzY3IDIuNDI0IDIuODE4IDQuMSA0LjE2MiA0LjU3NyAzLjY3MiAxMC40NzIgNS44NDggMTUuNTE4IDkuMDg4IDIuOTIgMS44NzYgNS40IDQuNzMzIDcuNjIgNy4zNzUgMi40MjggMi44OSA0Ljc5NiA0Ljk4NiA1LjY1NSA5LjU4OGwuMzQ2Ljk2NGMuOTQ0LS42NyAxLjUtLjc4NCAzLjM0LS43OTIgNC41MjctLjAzIDkuODkyIDEuODYgMTEuNjQzIDUuMSAwIDAgMS44MjgtMS4xMSAyLjIyNC0xLjQ4NHpNOTguOTU2IDY4LjkwNGMtMi45NzcgMTcuNzA0LTcuNzY1IDM1LjI2LTExLjQxIDUyLjYwNS0xLjEzNCA1LjQwMy0yLjQyIDExLjI4My0zLjcwMyAxNi40NmwxLjQ2My0zLjMyN2MuMjU1LS43NjcuOTIyLTEuOTE2IDEuNTYtMy42OSAyLjAzNS01LjcwNyA0Ljg2Ni0xNS4yNSA1LjM0LTE3LjA1My40NzgtMS44IDEuMjQtNC4yOSAxLjY5LTYuMTU2LjQ0NS0xLjg2NS44MDUtMy4yOTMuOTgtMy45MyAyLjc4Mi0xMC41OTQgMy45MzYtMjEuNzEgNC44MTctMzQuOTA3LS4wNzcgMC0uNzMuMDM4LS43MzcgMHptLTUuNDc4LTguMzM0Yy0uNDkuNjM1LTQuNTQ4IDQuMzE1LTYuODE0IDYuMzY2LS45ODMuODc2LTMuMzQyIDIuMTQzLTMuOTMyIDMuMTk1LS4zODQuNjYyLS4yMjQgMS40ODMtLjQ5MiAyLjIxMy0uMjcuNjkyLTEuMjgyIDIuMDEyLTEuNDc0IDIuNzA0LS43NDYgMi41OTgtMS40NiA1LjgxLTEuNzIyIDguMzU4LS43MjIgNi45NTIgMS4yNzYgMTIuNDQ2LjczNyAxOS42NjctLjQ1MiA2LjAwNy0yLjQ5NCAxMS40MS0zLjgzIDE2Ljc4NyAxLjg2IDEuNDY1IDMuMTIzIDMuMTkzIDQuMjkgNS41NDVsLjI5LS45OTNjMS45MDQtOC4zNyAzLjM3Ny0xNC43OTYgNS4wMDYtMjIuNTcyIDEuOTEyLTkuMTYzIDQuMDQyLTE4LjM3NiA2LjA0NC0yOC4wMi41ODUtMi44MTMgMS40OC01Ljc1NiAyLjAxNy04LjM2LjMwMy0xLjQ3IDEtNC42OTUgMS4xOC02LjM5IDAgMC0uNjU4LjY2Ny0xLjMgMS41em04My43OTUgMTQ1LjA0MmMtLjUxLjQ0OC0xLjI4IDEuNTM1LTIuNDY4IDIuMjE3LS43MDIuNC0xLjQ0OC40MzgtMS44OTcuMzQtLjQ1Ni0uMS0uNzA0LS44MDYtMS43OTMtMi4xMTMtMS4wOS0xLjMtMi4zOC0zLjEzMy0zLjgyNi00LjY4OC0xLjI5My0xLjM5LTIuOTYtMi42NzUtNC44NTQtMi45My0yLjE1LS4yOTItMy42NzMtLjcxNS03LjE3Ny0xLjQ1Mi0zLjAzNi0uNjQ3LTcuNjQ4LTIuMjQtMTAuMi0zLjY2LTEuMzQ1LS43NTUtMi4zNjUtMi4xNjgtMy40NC0zLjE5Ny0uMzU2LjEyMy0uNC0uOTMtMS4zNy4yNi0uMzguNDY2LTEuMTgyIDEtMS44MjYgMS4yMTctMy4zNDQgMS4wNzQtNi43ODQuMzA1LTguNjA2LTEuMjMtMS4wNi0uODkyLTEuNTktMS40OTYtMi4yODctMi43MTgtLjQxLS43MjMtLjkzNy0yLjEzMy0xLjAyMi0yLjk5LTEuNDc1LjIxNy0yLjQ3LjEzMy0zLjQ3LjQ1NC0xLjAzLjMzLTIuNDIzLjY2NS0zLjI5OCAxLjA3NS0zLjQ4OCAxLjU5Ny01LjgzMyA0LjYxLTguNzM3IDYuODYtMS4wMzguNzkzLTIuMTU3IDEuODAzLTMuMTYzIDIuNjI0LS45Mi43MzctMS44MTcgMS4zOC0yLjcwNSAyLjE3LS42NjIuNTg2LTEuNjk0IDEuNzg2LTEuOTI1IDEuOTkzLTEuNjA1IDEuMzk4LTIuNTE0IDMuODQtNC44NSA0LjM0OC0yLjQ4LjUzLTguNTUtMS44MDMtMTEuMzE1LTIuMDItLjA0OC0uNjY1LjQtMS4zMDMuNzgzLTEuNzIgMS41ODItMS43MiA1LjM3OC0yLjU1NiA3LjU3NS0zLjgzMiAyLjY5LTEuNTc2IDUuMDE3LTQuMDE4IDcuMzc1LTYuMDAyLjc1LS42MzYgMS4zMy0xLjQ1IDEuOTY3LTIuMjEtNi42NTMtLjUzLTEyLjQ0Ni0xLjE4My0xNy40NTQtMy4yOTctMi44MS0xLjE4Mi01Ljg0NS0yLjkyNS04LjM1Ny00LjU3LS44OS0uNTgzLTIuMTEyLTEuNi0yLjcwNC0xLjk3OC0uNS0uMzEzLS44NzYtLjcxOC0xLjQ3NS0uOTczLTEuMjI3IDUuNzEtMi40MDcgMTEuNDQ3LTMuNTQ0IDE3LjIwOC0uMzMyIDEuNjcyLS42MzIgMi44OC0xLjAxNiA0LjI5LS4xMTIuNDE3LTEuMDY3LjM1NC0xLjgzLjI4Mi0uNDQtLjA0OC0yLjk0OC0uNDQ0LTMuMTg1LS44ODQtLjMzNS0uNjEzLjQwNC0zLjE3NS40NzgtMy41NjguMzg1LTIuMDUgMi4xMTMtMTEuMjY3IDIuMzctMTIuMzU2LjMtMi4wNjUgMS41MDgtNy4wMyAxLjg2Ny04Ljc1NyAwIDAtNS4yMS01LjgyNC01LjcxLTYuMzkyLTEuNzE0LTEuOTQzLTMuNTU4LTMuMjM0LTUuNjU2LTQuODE4LS4xNy0uMTI4LS45MDctLjQ2Ni0xLjA0Ni0uNTczLjUwOC0uMTI0IDMuMjM1LS43NSA0LjIyNi0uODk3IDAtLjA0LTEuMjUyLS40ODctMS4yMTMtLjQ5NC00LjctMi40NDQtOC40NjYtNy4zMDYtMTEuMDYyLTExLjgtLjczLTEuMjYtMS45MDQtMy44ODgtMi4wNjUtMy44MjUtLjQ2OC0xLjAwNy0xLjI4NS0yLjkwNC0xLjYyMi0zLjc5Ni0xLjI2LTMuMjk1LTMuMzI4LTExLjkxLTIuNTY4LTguODE1IDAgMC0uNDMtMS43MzYtMS4xNS01LjE5Ny0uNzE1LTMuNDYtMS4xNDctNC43MjctMS42OS03LjEyOC0xLjM4NC00LjY4LTMuNTk3LTEwLjY3LTQuMTczLTEyLjU5LS4xNTUtLjUyLS43NjgtMi4xMTQtLjc2OC0yLjExNHMxLjc1NC45NiAxLjk4MyAxLjA4OGMtMS43MzYtNS43LTMuMTA1LTEyLjc5NS0yLjIwNi0yMC41NTMgMS4yMzctMTAuODEgNi4yMy0xOC40MTQgOS44MzMtMjYuNzk2Ljc2LTEuNzkgMS4zMTMtMi45OTggMi4zNi01LjM0Ni4yMjMtLjQ5NiAxLjA0OC0yLjc4OCAxLjA4LTMuMDEuMjAyLTEuMzQyLjM0LTIuMTM3Ljc0LTMuNDQyLjYzNy0yLjEyNyAxLjg1LTQuOTEgMi45NDctNi44ODMgMS43MDgtMy4wOSAzLjk4LTYuNTU2IDUuMDktNy43ODggMS4xMTItMS4yMzIgMy4zOTMtMy45MSAzLjc2Mi00LjI1NyAwIC4wMDcgOC4zMTctNy41IDEyLjUzNS05LjgzMyAxLjYwNi0uOSAzLjExMi0xLjI3NiA0LjY3Mi0yLjIxMiAzLjAxOC0xLjgzNiA2LjAxNC00LjAyIDkuMzQtNS42NTQtMS4yNSAyLjY2LTIuNzggNC4zNjUtMy42ODggNy4zNzUuMTM3IDAgLjU5Mi0uMDg2LjczNiAwQzkwLjU0IDkuMjQ1IDk4LjkyNiAyLjE3IDExMy45NDYuMTJjNS4wNzctLjY5MiAxMS4yNjggMi4wMDMgMTcuNTkzLjk3M2wtLjAxIDEuNTRjLTMuMjI4IDIuMjc1LTUuNzUyIDQuMTc2LTguODQyIDYuNTcyLTMuNzggMi45MTItNy40NDggNS43Mi0xMC45MTMgOS4wODctLjkwMi44NzctNS42IDUuNTA4LTUuNzU0IDUuNzUzIDIuNzMzLTEuMzY2IDYuNzEzLTEuNjczIDkuNTQtMS44MTIgNi42MTUtLjM0NSAxNC42NDIgMi41NzQgMjAuODk2Ljk4NC0xLjQyIDEuNzk4LTIuNTI3IDEuODI4LTQuMTc4IDMuMTk1LTIuNzA4IDIuMjItNC4zNiA1LjcxNi03LjEzIDcuODY4LTMuNDkgMi42ODgtNy4zODIgNC42Ny0xMS44IDYuMzkuMDMuMDA3IDAgLjcgMCAuNzM4IDEuMjg0LS4xMDcgMi42MjIuMzQ1IDIuMzkuNTc1LTEuNTEgMS40NDQtMy43MSAyLjMzNi01LjM0IDMuNjUtMi44MiAyLjI0OC01LjA2MiA0Ljg5NC04LjExMiA2Ljk4MyAxLjI0NSAyLjI3IDEuMDIzIDMuMzk2LjA1NyA1LjI2MyAzLjE0LS42NDcgNy40MjItMi4xMjMgMTAuMDY4LTIuODIgOC4wNS0yLjEyNSAxNC43MTItMi42NSAyMy44MDItMy4zMjcgMy40NDctLjI2MiA3LjUxNy0uNDQgMTEuNTUyLS4yNzQgMi4xNi4wODcgMTIuOTYuMzQgOS44NDQuMTI1IDYuNjYuNTEyIDExLjg0Ljk3IDE2LjY0NCAxLjIyNC0uNTEyLS40NS0xLjI1NS0xLjA1NS0xLjg1Ny0xLjYtLjQ4Mi0uNDM1LTEuMDItLjc3NS0xLjUyNC0xLjE5OC0xLjQyMi0xLjE5Ny0zLjAxNC0yLjYyNC00LjIzNS0zLjg2LS44NjctLjg3My0xLjMyNy0xLjg4LTIuNDAyLTIuNTMyLTIuODY0LTEuNzQ0LTUuNDkyLTIuNTg3LTguMTItNC40NTMtMi43NzMtMS45NzUtNS4zMTYtNC44NzQtNy42MTItNy4zNDYtMi4xMi0yLjI4LTQuNDQ3LTQuMTYtNi4zOS02LjYzNiA0LjI2NS42MyA4Ljg5NyAxLjU5IDEzLjc2NiAxLjIyOCAyLjA3LS4xNTcgNC41MS0uNTcgNy4wNi0uODE1di0uMzJzLTEuNzI4LTEuOTg2LTIuMTI4LTIuMzcyYy0xLjc2Ny0xLjY4LTMuNDczLTMuODctNC45OS01Ljc2LTIuMTE1LTIuNjM2LTMuNzktNS4yNTgtNS44NDMtNy45NC0xLjk1LTIuNTQyLTQuMTU0LTQuNTU2LTUuOS03LjM3NCAzLjM1IDEuMzQ1IDYuNDM4IDMuNzAzIDEwLjU3MiA0LjE4IDYuMTg0LjcwNiAxMS40NTQtLjkwNiAxNy40NTQgMCAxLjU2LjIzIDQuNzQgMS40MyA1LjY1MyAxLjk2Ni45MTUuNTM1IDEuNjEyIDEuODIgMi4yMTUgMS45NjcgMS44MzUuNDIyLS42OTItMi4yOS45OC0xLjcyMi45ODcuMzMyIDEuNTkzIDIuMTMgMi4yMTYgMi45NTIgMS4xNSAxLjUzNiAyLjIyIDMuMDI4IDMuODQ4IDQuMDk1IDIuMDY4IDEuMzUyIDcuNzUgNC40IDcuOTUgNC41MSAxMC42NjIgNS44NSAyNC45ODYgMTMuMTcyIDI1LjU2NSAyOC4wMjItLjIzOC0uMTcyLjA4NCAxLjM1My4wODQgMS4zNTNsLS4wNzQgNC4yOThjLjAxNi0uMzItLjQ2NS03LjE5NS0uMTczLTcuMTcuMTIyLjI0IDEuNTE2IDMuMzE1IDEuNjU0IDMuNzE1LjQ1IDEuMzUuOTA4IDMuMTEgMS42NjMgNC45OTIgMS4wNDggMi42MSAyLjAyIDUuMDM0IDMuMjU2IDcuNTU0IDEuNjIgMy4zMTIgMy44MDcgNi45OSA1LjM5IDEwLjMzMyAxLjM1MyAyLjg2IDEuOTIgNC44NjYgMi44NjUgOC4xNDcgMS4xMyAzLjk1NiAyLjYyMiA5LjYyMyAzLjAzOCAxNC4yMjMuNDYgNS4yMzItLjIwMyAxMC41LTEuMjMgMTQuNDAyLjU1NC0uMTE0IDEuNzItLjM5IDEuNzItLjM5cy00LjYxIDcuMjItNi4xNDcgMTAuODE3Yy0yLjExIDQuOS0xLjYgOC45NzMtMy4yNjMgMTUuMjQ3LS40MyAxLjYxNS0xLjM1NCA1LjAwOC0xLjg5OCA2LjM4NS0yLjA1OCA1LjA5NC00LjQ0NiA5LjY1NC04LjQ3NCAxMy40Ni0yLjMwNSAyLjE3Ni00LjA5NyAzLjcxLTUuNTA1IDUuMTJsLTEuMDc4LjgzNWMyLjA5My0uMjYgMy40MDQtLjQ1MyA1LjQ3My0uNzMzIDAgLjAzLS4wMTIuNzMgMCAuNzM3LS45NzguNDc1LTIuNDYuODM2LTMuNDQ0IDEuNDczLS42MjguNC0xLjE1NiAxLjQ4Ni0xLjcyIDEuOTY4LTEuNDIgMS4xOTgtMi43OSAyLjI2Ny00LjE4IDMuNDQyLTIuMjI3IDEuODc0LTQuMjk2IDIuOTM4LTYuMzgzIDQuOTQtMS41NSAxLjQ4OC0yLjk3OCAzLjQ4LTQuNDMyIDQuODkzLTEuMzMgMS4yNzUtNC43NjUgMy43NjQtNC45NiAzLjkzMi00LjAzNyAzLjQ3NS0yNS4zNzQgMTAuNjQ0LTMwLjU3IDEwLjYxNS4wMzQuMDI0Ljg2OC4zOTQuODY4LjQ0OCAxLjE2LjMzOCAyLjQyOC42IDMuNjg4LjgzOCAxLjY2Mi4zMDcgMy4xNTcuNTQ0IDQuNjczIDEuMTI3IDEuODEyLjcgMTAuODkgNi44NCA3LjM3MyA5LjM0MyAwIDAtLjk1IDEuMDE4LTEuNDYzIDEuNDciIGZpbGw9IiMyMzFmMjAiLz48cGF0aCBkPSJNOTcuNDE0IDE0NS45NzJjLS4xOTIgMS40Mi0uMjYgMy41Mi0uNjgyIDQuNzktLjkgMi42OTUtMS4zODQgNS45MzggMS4yODYgMTAuMzIzLjM4NC42MzIuMTQ2IDEuNC43MzYgMS43MjIgMS4xNi42MyAzLjQ2Mi43NTcgNC44OSAxLjExMiAyLjQ2Ny41ODggNC40MzggMS4yNTMgNi42MiAyLjA4NC43ODMuMjkgMi4zODYgMS41NyAyLjc3IDEuNjY4LTMuNDQtMy40MDMtNi45NjQtOC4xNTctOS45NDQtMTEuNjYtLjg5LTEuMDQ1LTIuMzUtMi42MjMtMy4wOTUtMy43NzUtMS4yMDYtMS44NTMtLjg0NC0yLjU4LTEuOTgtNC41MS0uMDk0LS4xNTItLjU1NS0xLjY1NS0uNi0xLjc1NU0xNzguMDY3IDIwMS45NDhjLTEuMjctMS42Ny0yLjIxLTMuMTItMy44MzQtNC4yMy0uNDQ4LS4zMDYtLjkxOC0uNjItMi40NzQtMS41MzUtMS41NTctLjkyLTYuNzQ0LTEuMzY3LTEwLjkyNS0yLjgxNi0uNDM0LS4xNS0zLjQ3NS0xLjA5Mi0zLjg2Ni0xLjMwNy0uOTktLjU1My0xLjk4Mi0uOTItMi45NS0xLjUyLTIuNDczLTEuNTMtNC4zMjQtMy44OS02LjM5LTUuODU2LS4wOTMuMTE1LS41OTMtLjA3Ni0uNzQgMCAuMTIzLS4wNTYtLjUwNi42OTMtLjg4NyAxLjIzNS0uOTUyIDEuMjY3LTIuMzUyIDIuMTIzLTMuODgzIDIuOC4yMDcuNDQ0LjQuNjguNjMyIDEuMDg1LjI4OC41MjQgMi4zNTYgMS45MTQgMS43MjcgMS41MTYgMy41MTYgMi4yMTMgMyAxLjg2NCA3LjQyNCAzLjI3Ni4yMi4wNyAzLjY2NCAxLjE5NiAzLjg5MyAxLjI0MyA0LjA5OC44NTUgOC45NSAxLjcyNSAxMC4yNyAyLjY1NiAxLjMxOC45MyA1LjU2OCA1LjYyNSA2LjM0NSA2Ljg5NSAxLjA0NSAxLjcxMy45ODUgMS43MiAyLjcwMy40OS41MDUtLjM2IDEuNzItMS41MTIgMi4yMzYtMi4wODguNTEtLjU3NiAxLjE3Ny0xLjE5LjcxNy0xLjg0NE03OC4zMDcgNzMuMDhjLTEuNDIyLjI2My01LjkzOCA0LjgwOC03LjYyMiA1LjY1NmgtLjI0M2MtLjU1NCAxLjU2NS4yNiA0LjU3NyAwIDYuMzkuMDc1IDAgLjY2Ny0uMDU0LjczNyAwIDIuMTI2LTQuNjEgNC44OS03LjkwNSA3Ljg2NC0xMS41NTMtLjI2LS4xNDUtLjEzLS42MTQtLjczNy0uNDkyTTIxOC44MDggNjIuMDI1Yy0uODQgMi40OTgtMS41MTIgNC41OC0yLjMwNSA3LjEyMy0uNDIyIDEuMzItMS41MjQgNC4zMjctMS45NCA1LjctMS4wMTUgMy4zMDQtMS40NzIgNC42MjMtMi41NiA4LjA2Ny0xLjQ0NCA0LjU3NC0zLjMzIDEwLjk1Ni00LjU2NyAxNi40NzMtMS40MzUgNi4zNi0yLjMwNSA5LjA0OC0zLjc1NiAxNS43MDcuMzIzLjExNCAxLjM0NSAzLjA5NCAxLjc5MyA1Ljk3NC41NTQgMi44MTUuMjU2IDQuODYzLjc2OCAxMC4yNC4yMTctLjE2IDIuMTM1LTIuMzQ1IDIuMzk1LTIuNDM3IDAtLjA4NSAzLjE5Mi0zLjU5NCA0LjM4Mi00LjYxNy45NS0uODMgMi4xMjMtMS41NzcgMy4wMi0yLjQzLTUuMjM3LTE3LjIgMS4zNC00MC44NjMgNC42NzItNTYuMTIuNDItMS45NSAxLjAyNS00Ljk0IDEuMTUzLTYuODYuMjE4LTMuMy0uNTEyLTUuNzYzLS45LTguNDUgMCAwLS45MzQgNy45NTUtMi4xNTUgMTEuNjNNMjExLjI0OCAxNjAuMTg0YzEuNTMzLTEuNzUzIDMuMjY4LTMuMTcgMy43MzYtMy41MjQgNS4xODQtMy45NiA4LjE1Ny05LjE2MyAxMC44MTctMTUuNzMuNjQ0LTEuNjE1IDEuMzg1LTMuODM4IDEuODI0LTUuNjUuNjMtMi42OCAxLjI4NS01LjEwNyAxLjYxNy03LjYyNy4wMjQtLjIwNi40Ni0yLjY3NC40ODMtMi45NS4wOS0xLjI3NS44NDYtMy45MzggMS4yOTQtNS40MjctLjIzOC4xNTMtLjcwNS41MTItMS4wMzguOTAzLS40MS40NzItMi44MjggMy45NC0zLjM0NCA0Ljc3LTEuMzA0IDIuMDk3LTIuNTYgNC4yNTUtMy44NCA2LjM5LTEuNTkyIDIuNjItMi45ODMgNS4yNC00LjgxNyA3LjYyLTUuNDYzIDcuMDctMTEuODY4IDEyLjE5Ny0xOC4xNCAxNy45Ni0uMjQ0LjIyMy0xLjYwNCAxLjQ0Ny0xLjgxNyAxLjcwNy0uODQ4Ljk3Ny0xLjAwNiAxLjA4LTEuNzY3IDIuMTMyLS4xODcuMjQ1LTEuMDc3IDEuNTE3LTEuMTg1IDEuOC0uMTA2LjI2My0uNTI3Ljg2LS42OCAxLjEwNCAyLjA2NyAwIDQuMzQtLjc3MiA1Ljg0NS0uOTYgMy45ODQtLjUwNCA2LjI1LS43NjMgOS45NTYtMS4yMjNsMS4wNTgtMS4yOTZNMTY1LjAzIDI1LjQzYzEuNzY3LS4xIDMuMjU3LS4xODYgNC45Ny4yMDcgNC4xMDcuOTQ0IDYuODIgMS44IDkuMDk1IDMuMTk2LjM5LjI0IDIuMDU2IDEuMTg4IDMuNTAyIDIuMTAyIDEuNDUuOTEzIDIuMTEgMS44ODUgMi45MDQgMi4zOS43OTYuNTAzIDIuMDEyIDEuMzc1IDIuMjYgMS41MzUtMS44OC0zLjU4NS0zLjMwMy05LjA4NC0zLjg4LTEzLjY0Ny0uMjY4LTIuMTEzLS4xNzctNC4xNTYtLjgxLTYuMTQ2LS41NDUtMS43MTItMi40MTgtMi40MTQtMy41MTQtMy42NjctMS45MjctMi4yLTIuODg4LTMuNjQtOS41NDgtNC4xNTItMy4yNzMtLjI1My02Ljc0NS4yNDctOS44NDQuMjU1LTIuOTQgMC01LjkgMC0xMC4zODUtMS42NjQuMjQuMjMgMS4zNDQgMS4xNSAyLjI3MyAxLjc2My43MTYuNDcyIDEuMzkuODIgMi4yMTUgMS4yNzMgMS45OTYgMS4wODQgNC4zNDQgMi4yNTMgNi4zOSAzLjI1MyAyLjEyIDEuMDM1IDQuMTg2IDEuNjggNi4zOTQgMi42NDcgMy4xNCAxLjM2NyA2LjIxIDMuMTQ0IDkuMDkgNC44MjcgMS44NzUgMS4xIDMuNzkgMi4zODUgNS40MSAzLjc3Ni4zMy4yODUuNDIgMS4yMzUuNzM3IDEuNTItMS4wNi0uNjctMS45LS45NjUtMi45NS0xLjYyLTIuNTY0LTEuNTg4LTQuOTctMy4zMS03Ljg2Ny00LjY3LTEuNjM3LS43NzQtMy4zMzMtMS44NjYtNC45MTctMi41NTgtMi41Mi0xLjExNS00LjczLTEuNjk3LTcuMTI3LTIuODUtMi4xLTEuMDEzLTMuMTY2LTEuNzc1LTUuMzYyLTIuOTQ1LS42MzItLjMzOC0yLjExNi0xLjQ0Ni0yLjMwNC0xLjU0NS0uODY0LS40NTUtMS4zMjgtMS4wNy0xLjcyOC0xLjIwOC45MjMgMS4zNiAyLjk4NyAzLjg5IDMuOTg0IDUuMTA0IDEuNTAzIDEuODMyIDIuNjYzIDMuNjEzIDQuMTQ1IDUuMzk1IDEuNTQ4IDEuODU2IDMuNDIgMy43MTIgNC45NDggNS42NjguMTctLjA5LjM1NS4xNzguNDk1LjI0NmwxLjQyIDEuNTEzTTIwOC42MSA1MS40ODNjLTQuMjYzLjUxNC04LjgyNS42NjgtMTMuNTQgMS4wMjItMi4yNS4xNi00LjYzNy4yNjctNi44OC40MzUtMi4xMjIuMTUzLTQuOTEuMDA0LTYuNzIyLjEzNi0uODc2LjA1My0zLjQtLjE1Mi00LjkwNy0uMTUybC03LjE5LTUuOTQ0Yy0uMTEtLjI2OC0xLjg5NS0xLjY2LTIuMDUtMS45IDMuNDU3Ljc3IDcuMzA0IDEuMjc2IDEwLjA1NS45NiAyLjAwNS0uMjM3IDQuNzYtMS4wNDMgNi43MTctMS4zNDMgNS43NTUtLjg4MiAxMS41LS4zNDggMTUuNTU1IDEuMDg4IDMuMjY2IDEuMTUyIDUuODkgMy4yMDIgNi42NiAzLjc3Ni43NjguNTggMi4zMDQgMS45MjMgMi4zMDQgMS45MjMiIGZpbGw9IiNmZGRkMDQiLz48cGF0aCBkPSJNMjA5Ljk1MyA1MS4yOWMzLjMxLS40NTUgNS44NzgtMS4yNDYgOC42NTgtMS44OTNsLjg0LS4ycy0uMDA2LTEuNTU0LS4wNDItMS45MjhjLS4xLTEuMTEtLjMtMi4zNDMtLjY5My0zLjQ0Mi0uODYtMi4zNi0yLjEyLTQuODYtMy40NC02Ljg4My00LjU4LTYuOTgyLTEyLjg1OC0xMi4wNi0yMC40NDgtMTUuOTgtMi42ODItMS4zOS00Ljg4LTIuNTgtNy42Mi0zLjkzMi4xMTQuMjU0Ljg3MyAxLjE0My45NzIgMS40Mi4zODMgMS4xMyAyLjg3NiAzLjYyOCAzLjggNC43MjYgMi43NDMgMy4yNDggNS4yNjUgNi41OCA4LjI1NSA5LjU4NyA0LjA0NCA0LjA1NiA4LjE0IDguNzUgMTEuOSAxMi43OC40MzIuNDYyLjg0NSAxLjM2IDEuMzczIDEuNzIyLjU0NS4zNzUtLjczLjcyMi0uNzM1LjczNy0xLjY2NS0yLjEzNS0zLjc3Mi0zLjU2LTUuMzk3LTUuNjY2LTMuMzA1LTQuMjctNy42LTcuNjI0LTExLjA3NS0xMS43NC0zLjc0Ny00LjQ1LTguMDY3LTguOTY4LTEwLjgxNS0xNC4yNi0uMDc2IDAtLjk1Ni0xLjIzNi0xLjAwNi0xLjI4Ljc5NSAzLjU2IDEuNDU1IDkuNzU2IDIuNTUyIDEzLjc3MyAxLjA2IDMuODk1IDIuNjg4IDYuODQ4IDQuNjE1IDkuOTU0LjczIDEuMTc2IDIuMDM3IDQuMDk4IDIuMTEyIDQuMTE4IDEuNDA4LjM4MyAyLjY2NS43ODIgNC4wOTYgMS4wODggMS43OS4zODQgMyAuODI4IDQuODY3IDEuNzI4IDEuNzI1Ljg0IDIuNSAxLjUyOCAzLjEzNCAxLjk4NSAzLjI2NiAyLjM2OCA0LjA5NiAzLjU4NiA0LjA5NiAzLjU4Nk02Ny4xNjYgMTk0LjI0Yy0uMTE4Ljc2NC0uNTYgMi40Mi0uNTYgMy40NzIuODE2LjIwMyAxLjY1LjMyNCAyLjc1LjQ5Mi45NjUtNC4yOSAxLjkyLTkuODY3IDIuOTUtMTQuNzUgNi4yOTgtMjkuODQgMTMuNTQtNTcuOTkgMTkuNzY2LTg3Ljc1OC41My0yLjU3MiAxLjUyMi01Ljc1MiAyLjA2OC04LjM1NyAxLjA3Ni01LjI1IDEuODczLTkuODg4IDIuOTk1LTE0Ljk5Ny44NDQtMy44ODcgMi4xMi04LjUxIDIuNTAyLTEyLjUzNi0xLjQ4NS42MzQtMi4zODIuMzc3LTMuNjMgMC0uNjI0IDIuNDI2LTEuMTIzIDUuMjIyLTEuNzIyIDcuODY2LTMuOTg2IDE3LjUtNy41MSAzNS4zNzYtMTEuNjkgNTMuMDA3LTEuMzkgNS44NDctMi41NjYgMTEuOTUyLTMuOTg4IDE3Ljc5Mi0yLjI2IDkuMi0zLjk3IDE4LjU0LTYuMDUgMjguNTE1LTEuMDIgNC44Ni0yLjQ5MyAxMC44OTItMy4xODYgMTUuNjAyLS4zODMgMS43OTMtMi4wNzcgMTAuODItMi4yMDQgMTEuNjVNMTE1Ljg4MyAxLjM1M2MtMi44NjUuMjU0LTYuMDQuNzY4LTguMzIyIDEuNTM4LTkuODg2IDMuMjk0LTE1Ljg3NSA3LjkzOC0yMS42MzYgMTUuNDkzLS41MzcuNzAyLTEuMTQgMS42NDYtMS43MTggMi4zMzgtLjg2IDEuMDE2LTIuMjg4IDEuNzItMi45NSAyLjk1LTEuMjYgMi4zMTMtMS44NzMgNi4wNzMtMS45NjcgOC41MTQgMS43MDUtMS42MjcgMi44OC0zLjA2NSA0LjQyNC00Ljg3Ljc2LS45MDcgMS44OTgtMi4wNzggMi43MDUtMi45NC40MzctLjQ4My41MTQtLjU0Ljk4LS45OTQgMi4xMDctMi4wNzMgNC41Mi00LjMxMyA2Ljg4NS02LjEzNSA5LjMwNi03LjIgMTYuMzctMTAuNzY2IDI5LjUtMTQuNzZsLS4yNDYtLjQ0NmMtMi40MjItLjE5NS00Ljk4My0uOTMzLTcuNjU3LS42ODciIGZpbGw9IiNmZGRkMDQiLz48cGF0aCBkPSJNOTQuMDM1IDU4LjI3Yy0uODc3LS43NzQtLjk2My0zLjQ2NS0uNjEzLTQuMzk0LjI5LS43NjQgMS4wMzMtMS45NjQgMS45MTMtMi42MDggMS42NjQtMS4yMTUgNS4xNi0uOTMgNi40MjcuNTMzIDIuMDYtMS45NzUgNS43Mi00LjgzIDguMjU2LTcuMjM1IDAgMCAyLjM3NS0xLjM4NCAyLjM3NS0xLjQ2Ni01LjExNSAwLTEyLjItLjQxNi0xNy44NjIuMjM3LTcuMDA1Ljc5OC0xNy41MTQgNC40OTQtMjIuMTI0IDcuODY2LTEuNzggMS4yOTctMi42NCA0LjA4LTMuOTMzIDUuOS0yLjc0MiAzLjg1LTUuOTc2IDcuMzU4LTkuMDk1IDEwLjgxNi0xLjM1IDEuNDgtMS44OTQgMi41NDgtMy4xMzggNC4xNDctLjU3LS4zMjMtMS41OC0uMDE4LTIuMDI0LS4yMTUuMzg1LTEuODk3IDEuMjY4LTIuNTM2IDIuNzA0LTMuOTMzLjQ2LS40NTMuNzYtMS4wNiAxLjIzLTEuNDc2IDQuODMtNC4zODcgOC41NC05LjUwNCAxMi4wNDQtMTUuMjQgMi4wMzctMy4zNSA0LjM3Mi02LjY0IDUuNjU0LTEwLjgxNyAxLjctNS41NCAyLjA2LTExLjg2MiAzLjkzMy0xNy40NTQuMzU1LTEuMDc0IDEuNTQ1LTIuMjIgMi4wMTQtMy4xOTQuODI4LTEuNzcgMS43LTMuNjYgMi43MjMtNS43MDctLjE0NiAwLTEuNjQ4IDEuMTEtMS43ODUgMS4wMzQtMi40NzQgMS42NTYtNC4zMyAyLjctNC41MjQgMi44MS0yLjYyIDEuNDM0LTQuNjU2IDIuMTUyLTcuMDMgMy44MjctMS4wMjIuNzA3LTMuNjQ4IDIuOTc1LTQuNTc3IDMuNzY3LTguNzY0IDcuMzc1LTE1LjM0OCAxNi4xMDctMTcuNTQ2IDI5LjkxLS4zIDEuODc3LjEzIDQuNDA0LjI0NSA1LjkuNDQgNS45MjUgMS4wNTIgMTAuNjE3IDIuNDU4IDE1LjI0My45NTItLjYzIDIuNjM4LTEuOTMgNC4wNDYtMy4yMSAyLjAyNy0xLjg0NCAyLjk2OC0zLjA5IDQuNTU3LTMuNjc0LjY2My0uMjU1Ljg3Ny0uMTMyIDEuMjMtLjI0Ny0uODUzIDIuODgyLS40MDYgNy4xMjIgMCAxMC4wOC4wNzcgMCAuNzA3LS42MzQuNzQtLjU4IDYuMTktOS44NjUgMTQuNDQ4LTE2LjkyNCAyMy44NDItMjMuNiAzLjYyNy0yLjU4MiA2Ljk3NS00LjY4OCAxMS4zMS02LjY5NC0xLjk1MyAxLjM4LTQuMTczIDMuMjcyLTYuMTQ3IDQuNTctMS4xOTguNzc1LTIuMjIzIDEuNTEzLTMuMzY3IDIuMzUtLjYxNC40MzctMS40NTggMS4xMi0yLjA0IDEuNTgzLS44My42MzctMS40MzIuOTEtMi4yNyAxLjU0NS0uNDc2LjM0Ny0uOTU3LjgtMS40MTggMS4xNi02LjIgNC43ODQtMTEuMzkyIDkuODE2LTE1Ljk3OCAxNi4yMjMtMS44MDYgMi41MDUtNC40OTUgNC4xNy00LjE4IDguMTU4LjE1NC0uMTMgMS41OTgtMS41MzcgMS45NjctMS45NjguNjM3LS43NjcgMS42NzQtMS42MzUgMi40NTctMi4yNTYgMi4xMDUtMS42OTcgMS4yODQtMi43NTcgMS45NjYtNS40MDguMTYyLjEuNzkzIDAgLjk4MyAwIC44NTMgMi4xMDUuMTcuOCAxLjcyMyAxLjcyIDIuMTMzLTEuMzQ0IDQuMzktMi43NDMgNi42MzUtNC4xNzcuNy0uNDU1IDQuMDQtMi44NzMgNC45MTctMy40OS45NjYtLjY5NyAzLjU3NC0yLjc5IDQuNDczLTMuNTU3IDIuNDcyLTIuMTUgMy4yMTItMi42OTIgNS42NDYtNS4wNi42OTItLjc3IDEuMzU4LTEuNTcgMS4xODUtMS43MjQiIGZpbGw9IiNmZGRkMDQiLz48cGF0aCBkPSJNMTE0LjU3IDIzLjc2NGMtMi4yMi4xNy05LjczIDEuNjY1LTEyLjQyIDMuMzQ3LTEuNjEzIDEuMDE0LTMuMDcgMi42Ni00LjY2OCAzLjY5LTMuOTEgMi40OS03LjQ5IDQuNTI0LTExLjggNi42MzYtMi42NSAxLjI5Mi00LjA1IDIuNzA0LTguMzYgMi43MDQtMS4wOTcgMy40MjctMi45MiA1LjU1LTMuOTc4IDguODQ3IDUuMjctMi40OSA5LjIxLTQuNzY4IDE1Ljc4LTYuMjQzIDIuNjM0LS42IDUuNTA2LTEuMTEgOC4xMTItMS4zMDMgMy44MS0uMjkgOC4wNS42NTMgMTEuNzk4LS4wNyAxLjEwNy0uMjIyIDIuNjI4LTEuMzQ1IDMuNjg3LTEuNzIgNi45OTMtMi41NDMgMTIuNjIzLTYuMzg1IDE2LjcxNi0xMS44LjY0LS44NTMgMi4wMzUtMS43OCAyLjY3NS0yLjU1LTQuMjI1LS42NC0xNC4yMS0xLjc5Mi0xNy41NC0xLjUzNk0xNDUuNDI1IDI2LjcwOGMuMTIzLjE3IDEuNTEgMS4xNiAxLjY2NiAxLjI4IDEuNDggMS4xNTUgNC40NyAxLjcyOCA1LjcgMi4zMi40MjMuMiAxLjEuMzg0IDEuNDc4LjU0NSAxLjY5NS43MjMgMi42NjMgMS4yOSA0LjQ3NSAxLjg3NCAxLjk4LjYzNyA0LjA2NCAxLjY0NSA2LjMzNyAyLjExMi43NDUuMTUyIDIuOTg4Ljc5IDQuMjkgMS4wMjMgMS43OTMuMzIgMi40Ny40OCA0LjA3LjczMy42NC4xIDEuNjkuMjkyIDIuOTA3LjU0NyAxLjYwNS4zMzggMi43MjQuOTIgNC4yMiAxLjQyLjg2NC4yODUgMS41ODUuNjAyIDIuMjEyLjg0LjMxLjExNi44OCAwIDEuMjI4IDAgMCAwIC43NSAxLjAzLS45OC45ODQtMS43LS4wNTQtNC43MzMtMS41MTQtNi44ODUtMS45NjctNS42My0xLjIwNS0xMS40NDctMS45MTYtMTYuOTYtNC4xOC0zLjAzNi0xLjI0NC03LjYxMi0zLjE4LTEwLjk0LTQuMzMuMjYuMzUzIDEuODIgMS4yNjYgMi4wOSAxLjYyNi4zMTQuNDI0IDEuMzAyIDEuNDUgMS43MSAxLjg3MyAzLjEyNSAzLjI1IDYuMTggNS40MzcgMTAuNSA3LjU5NyAxLjc4Ljg5IDIuOTk4IDEuNjI1IDUuMDk3IDIuMjggMS4wMjUuMzIgMi4wNTMuNjA0IDMuMTM3LjgzNCAxLjc2Ni4zNyA0LjgwMy43NyA2LjU5OC40NDUgNC44MTgtLjg3IDkuMDE2LTEuNzI1IDE1LjA0LTEuNzI1LS4yNDctLjMzNS0uNDk2LS44My0uNzY4LTEuNTc3LS4zOC0xLjA0My0xLjE2LTIuMDcyLTEuNjIzLTIuNzMyLS43My0xLjA1My0xLjM3My0xLjUyMy0yLjMyOC0yLjMyMi0xLjQ4LTEuMjQ1LTMuNzMyLTIuNDYtNS4zOTUtMy44NjUtMS4xMy0uOTU1LTIuMTA3LTEuMTA3LTMuMzI4LTEuOTIyLTEuODI3LTEuMjE3LTQuNDkyLTIuNjQtNy4zLTMuMzI3LTMuMDktLjc1OC00Ljk5Mi0uNzY4LTcuMjk2LS41MTItNi42MTcuNzM2LTEyLjM1IDEuMTA0LTE4Ljk1LjEyOE05Ny4zMiA1Mi4xNjVjLTMuNDcuNjgzLTQuMjI3IDcuNjM1IDEuODgyIDYuNjYgMy44ODctLjYyNSAzLjU1OC03LjczMi0xLjg4My02LjY2TTQ3LjMxIDU4LjI0N0M0Mi43IDY2LjQ0IDM4LjUyIDc1Ljc0NSAzNi41ODYgODcuNTRjLS4zNzcgMi4yOTYuMjE3IDUuNzIuNTI0IDguNjQ4LjI5IDIuODQzLjg3IDYuODcgMS44MSA5LjUxNy45NjggMi43MjYgMS4xNjYgMy41MzggMS41NjIgNC4wOTggMS4wMjQgMS40NSAxLjcyOCAxLjk3MiAyLjE4MiAyLjM2NSAyLjIwMyAxLjkwNCA0LjA1IDMuOTYzIDYuNTY0IDYgMi45IDIuMzQ4IDYuOTI0IDMuMTggMTAuMTUgNS4wNiAyLjA1IDEuMiA0LjI5NiAzLjExMiA2LjE0NiA0LjY3LjQuMzM4IDIuODIyIDIuNTIyIDMuMDgzIDIuNjQ1IDEuMTUtMS41MzYgMS44NS0zLjExIDIuODE2LTQuOTk0IDMuNDEyLTYuNzM3IDYuNDgzLTE1LjExNSA3LjE3NC0yNC4zNTUuNDM3LTUuODg2LTEuODU3LTExLjcxNC0xLjAzLTE4LjI4LjI0OC0xLjk4My45NTQtMy42ODIgMS4yMy02LjE0Ni0uMDM4LS4wMjUtLjQ5LS4yNDctLjQ5LS4yNDctMy4yMDMgMy4xODgtNC4yNTYgNi4yNi02LjM5IDEwLjU3LS42OTQgMS4zODMtMi4wNTIgMy4wOC0yLjQ2IDQuNjctLjU5IDIuMjc0LS41MzggMy44NTYtLjk4NCA2LjE0NS0xLjM5IDcuMDEzLTMuMTIgMTQuNzM1LTUuMTYgMjEuMTQtLjQ0NiAxLjM3Ny0uNzQ2IDIuNDItMS4yMyAzLjY4OC0uMTMuMDA4LS45MzguMzMtMS40NzYuNDkzIDAgMC0uMzA2LTEuMzE1LS4yNDYtMS43MjIuMjQ3LTEuODM3IDEuNTMtNC42MSAyLjIxNS02LjYzNiAxLjY2Ny01LjAyIDIuNTItMTAuMDcyIDMuNjg3LTE1Ljk4IDEuMDk4LTUuNTkyIDIuNzg3LTEyLjcwNSAxLjk2Ni0xOC4xOS0xLjM3NiAxLjI5OC0zLjMyNiAyLjM5Ny00LjQyNCAzLjkzMy0uNDA4LjU1My0xLjkzNiAyLjI3My0yLjIxMyAyLjcwNC0xLjExMyAxLjcwNS0uOTIyIDIuNTc2LTIuMDc0IDQuMjgtLjQ3LjY4LTIuMTY1IDIuNjYzLTIuMzUgMy41ODUtLjMxNSAxLjUyOC44MTUgMy44NTYuOTg0IDUuMTYyLjg2NyA2Ljg4NC45NSAxNC41NC4yNDUgMjAuODk0LS41ODMtLjE5LTEuMTk4LS4zNS0xLjcyLS40OS40MjItNS45OS44NC0xMi4wMDIuMTk0LTE3LjYyNi0uNDg1LTQuMTg3LTIuMzQzLTkuMzgtMy4wNi0xMi41MDQtMS4yMzMtNS4zNy0yLjU4LTkuMTk1LTMuMjU2LTExLjU2NS0xLjAyNS0zLjU4Ni0yLjA0Ny0xMS4yNjgtMi4wNDctMTEuMjY4cy0uODEyLTQuODM1LTEuMTc0LTYuMDM0bC0uMDIyLTMuNTI2TTIyMi44ODcgNTguOTNjLS4xOSAzLjA3NC0uODYzIDguMjE4LTEuNzU2IDExLjQyMi0uMTQ1LjUxMy0uNDg1IDIuNjM2LS42MzggMy4yMi0uNDY4IDEuNjktLjY3NSAyLjQxNi0xLjA0NyA0LjIyLS4yOSAxLjQwOC0uNzI2IDMuNDQtMS4wMiA0Ljg3Ny0xLjQ1MiA2LjkxOC0yLjM1IDEzLjE1OC0yLjQ1NyAyMC40MDItLjA5MyA1LjkxMy4yNiAxMS45OCAxLjU0NSAxNy43NDMgNC45MzItMi42NzUgOS4wMzgtNC4zNTQgMTMuNDQtNi43ODcuOTM4LS41MyAzLjM2Ni0xLjUwOCAzLjk0My0yLjM1My43NzMtMS4xNDQuOTg0LTMuMDc1IDEuMTc3LTQuNjkuNzY4LTYuNC4zMTQtMTMuMTkzLS45MzItMTguOTEtLjQxNy0xLjkyMi0xLjA1LTQuNTctMS41LTYuNDQtLjc5Ni0zLjMwMy0xLjg4My02LjMyMy0zLjE1Ni05LjIxOC0xLjQ5Mi0zLjM4LTQuNjEtOS41Ni02LjQwNC0xMi44OWwuNTQgMy43MmMuOTEyIDQuNTYgMS45ODMgMTAuMDI2IDIuNjA0IDE0Ljc1IDEuMjA3IDkuMTY0IDEuNzI0IDIwLjI1OC0uMDUgMjguNzYyLS40NzggMi4yNTYtLjM4MyAyLjg4LTEuMzczIDMuNDQuNTg1LTIuODU3LjUxMi01LjY5Mi44NS04LjYwNC4zMy0yLjkxLjQ2NS02LjU0LjI4NS05LjA0NC0uMzk0LTUuMi0uNzE1LTkuNTgtMS4yNzYtMTQuNTAzLS42MTMtNS4zMS0xLjczNy0xMC44ODItMi4yNi0xNS43OWwtLjUxMy0zLjMzIiBmaWxsPSIjZmRkZDA0Ii8+PHBhdGggZD0iTTU4Ljg4NyA3Mi4xYy0uNDk4LjQ2NC0xLjY2NCAxLjc4OC0zLjIxMiAzLjIyLTEuNjA1IDEuNDg0LTMuNTg0IDMuMDcyLTMuNTg0IDMuMDcyczEuMDI0IDQuNDM3IDEuNzA3IDcuMTdjLjY4NCAyLjczIDEuNTU1IDUuMjEgMi41NiA3Ljg1LjAyNS0uMDMgMS4zLTEuNDAzIDEuMy0xLjQwMyAxLjA5LTEuNjY3IDIuMTEtMi44NjUgMi40NTctNC43MTcuOTA2LTQuODkzLS4zODQtMTEuMjMzIDAtMTYuMDcybC0xLjIyNy44OE03Mi4xNDggMTYyLjg5NXMtMi42NTUuMDA4LTMuODYyLS4wMjRjLTIuMDMzLS4wNS0zLjAwOC0xLjAyMi04LjQ1LS40NDYuNzcuNTc2IDEuMjguODMyIDEuODU3IDEuMTUyLjgxNC43NTMgMS45ODcgMS4zNTYgMi44NDcgMi4xMjQgMi4wNDUgMS44MzYgMi40NjcgMi45OTcgNC41ODMgNS4wNC4yMjYuMjIuNjU0Ljk5NS44MzcgMS4yMi4zNTMtMS40MzcuNzYzLTIuODg1IDEuMDgtNC41NDMuMzQtMS43OTIuNjUyLTIuNDY2IDEuMTA4LTQuNTIyTTcyLjQwNCAxNjEuMzU3YzEuMzc0LTYuMTcyIDIuMzg1LTEyLjA1OCAzLjcwMi0xNy40NjYtLjI2LS4xMjMtMi4xMjItNC42NC00LjE5LTYuODk0LTEuNjYtMS44MS0zLjU1LTQuMzEtNS40MS01LjktMi43NTctMi4zNjgtNC40NzctNC40MDQtNy41ODctNi4yNzItMS4wNjgtLjYzNy0zLjMyOC0xLjUwMy00LjQ1Ny0yLjA4OC0xLjk5OC0xLjA0My0zLjQxNS0xLjY4LTUuMjc0LTIuODYzLS42NjItLjQyMi0yLjkxLTIuNjE4LTMuNTg3LTMuMDcyLTEuNjc0LTEuMTItNC43OC00LjYwNy01LjkzNC01LjM3LS4xNzQtLjExNS0xLjM5NC0xLjY4My0xLjU3Ny0xLjc5OCAxLjAxMyAyLjQ4NyAyLjc2IDYuODkgMy40MTMgOS41Ni43MjUgMi45NjUgMS40OTIgNS40MTYgMi4xODYgOC40NiAxLjE5NiA1LjI2NCAyLjk4IDExLjI1IDQuMTMgMTQuNDE1LjY4NSAxLjg3OCAyLjM1IDQuNDEgMy40NDUgNi4yMzcgNC4yMzggNy4wNzYgOS4xODggMTMuNTY1IDE5LjY2NSAxMy4wMjdsMS40NzIuMDI3TTIzMS40ODUgMTE1LjYzMmMtMy4yMjggMS4wNzUtNy4yMjYgMy41MjMtMTAuMDA2IDUuMDUzLTIuMjkgMS4yNDMtNC4zNDUgMi40NjYtNi4yNSA0LjAyLTEuODIyIDEuNDY2LTYuNjMgNS44OS03LjEzIDYuNjM2LS4yNzYuMzkzLTEuOTIgMS41NzItMS45MiAxLjU3Mi0uMzk1IDQuOTA4LTEuNTIgOS4xMTUtMi43NSAxMy40MjQtLjg2IDIuOTk2LTIuMTgyIDUuNDYtMy40NjIgOC40MDUgMy4zMjgtMi44OCA1LjQ4LTQuODQ1IDcuODQtNy4xNzMgMy4wNDQtMy4wMDMgNi41MTctNiA5LjEtOS40ODggMy4zLTQuNDg3IDUuNzA0LTkuNzcgOC44NDUtMTQuNDA0IDEuNTkyLTIuMzUgNS43NTQtNi42OTIgNy42MzItOC43NTMtLjA4NC0uMDYyLTEuODg2Ljc3Ny0xLjkuNzFNOTIuNDg0IDE0NC4wNTJjLTEuMTYzLTEuMTItMi4wMzItNC44Mi0zLjYwNy01LjA5LS42OTItLjEyMy0xLjkxMi42MjItMi40NTguNzM4LTEuMzMuMjYtMi41Ni4wNi0zLjE1Mi45OC0uNTI0LjgtLjQwNyAxLjkyMy0uNjM4IDIuOTUzLS43MTMgMy4xMTgtMS40ODIgNi4zMDYtMi4yMSA5LjgzMi0uNTU1IDIuNjEyLTEuMzc3IDUuNzAyLTEuOTY4IDguNTc1IDIuNzguNzA4IDYuMTM3LjIwNCA5LjQ0Mi4xNzUgMy4yOS0uMDMgNi40NjguNjM2IDkuMDk1LjUzNC0zLjkxLTcuOTA2LTIuMjQyLTkuMDU0LTEuMTE1LTE1LjgyMi0uNjg4LS41ODMtMi43NDgtMi4yNi0zLjM5LTIuODc2TTE3Ny4wNjMgMTU2Ljc5Yy0uMDk1LjU4My41IDguMTkzLjUgOC4xOTMuMjE0LS4xNi4zNC0xLjEuNjA1LTEuMTkyLjM1LS4xNCAxLjA3My0xLjYzNyAxLjMzLTEuOTY2IDEuNzItMi4yODQgMy44NjItNC42NCA1LjMwNS03LjEzIDIuNDUtNC4yNDIgNC45OTMtOS4wOCA3LjAzLTEzLjUyLjg2LTEuOTA1IDEuNTYzLTMuNDU3IDIuMzU2LTUuNDEuMS4wMzMuNjQ1LS4xNjguODgtLjI0My0uNDgzIDEuNjI4LS44MjMgMi43MjUtMS4zMyA0LjE4LTEuMDM2IDMtMi40MzcgNS4yNi0zLjU5NSA3Ljg2Ny0xLjM4MiAzLjA4LTIuODg4IDUuODM3LTQuNjE2IDguNjA0LTIuMTA1IDMuMzUtNS40NjIgNS44NTQtNi45MjcgOS44MzQgMi40NTYtLjM3IDQuNTEtLjgxNiA2Ljc3LTEuMTQ4IDIuMDItLjMgNC45MDgtLjA5NyA2LjUyOC0uODk2LjkxNy0uNDYgMi4yOTYtMy4xMjUgMi45NDctNC4wOTcgNS41MTMtOC4yMiA5LjQzOC0xOC44NTggOS41OTQtMzAuODQyLjAzNi0yLjc2NC4xMTctNS40MTItLjMzMi03Ljc4LS4yNy0xLjQyLS44NS0zLjg0LS44NS0zLjg0LS43NjUgMi4yNTctMi42NCAxNC41NDctNC4xMDcgMTUuNDE2LTEuNDM1LjgzNi00LjQ1NC41LTYuMjkuNzQtMS44MzYuMjMtNC4wMDMuNDktNi4xNDUuNDktMS43MTUgMy42OC00LjQ4IDYuMDg1LTYuMTQ3IDEwLjA3OC0uOTUzIDIuMjYtMS42NjcgNC41MzMtMi4yMSA3LjM3Ni0uMjcgMS43MDUtMS4xIDQuMTQtMS4yOTUgNS4yOU0xNDguNzU2IDE3OS4yNmMxMi43NC03LjYyIDIwLjYwNC0xMC4wOTIgMzIuNzk2LTEyLjAzIDQuNDEtLjcwNiA4LjI1LS43NTggMTIuNzgzLTEuNDc0IDUuMDE3LS44MDUgMTEuOTk0LTIuMzUgMTcuMjg0LTIuNjA4LS4zNC4zLTIuMTYgMi4wNTYtMi41MzYgMi4zNi0yLjg1IDIuMjctNS43ODggNC4wMjMtOC4zMDUgNi42MDQtMy44NjcgMy45NjQtNS4yMTcgNS43MDMtOC40MSA3LjgtMy41NSAyLjMyLTcuMjIzIDMuOTkyLTExLjU1NyA1LjYtNC4wNzggMS40OTctOC41NzIgMy4wMDctMTMuMDI2IDQuMDktMS42NjIuMzk4LTIuNzA2Ljc1LTQuNDI3IDEuMDctMS4yMi4yMjQtMi44NDguNTktNC40MjQuNDA0LTEuNTk2LS4xOTItNC4zOTMtMi4wMjctNS42NTUtMi45NS0xLjI2NS0uOTItNC44Ni0zLjgyNS01LjQwNS01LjE2Mi0uNDIzLTEuMDE1LjAxNy0xLjg0NS0uMzM1LTIuOTM2bDEuMjE2LS43NjgiIGZpbGw9IiNmZGRkMDQiLz48cGF0aCBkPSJNMTMxLjAzNSAxNzUuMTY0Yy0xLjA3NC43NjQtMS40NCAxLjM4NS0yLjEyNiAyLjI0LTEuMTk0LS40MjctMy43NTUtLjE3LTUuMjkzLjA4NS01LjU2IDEuNjg3LTUuNjY0IDIuMjY1LTEwLjE1OCA0Ljk4Mi0xLjU2Ljk0LTIuOTcgMi4wMi00LjUyMyAzLjEyNS0uMzIyLjIyMy0xLjIzMiAxLjE4NC0xLjYyMyAxLjMtMi40ODMuNy02LjU2OC0uMTg0LTguMzU4LS40OTItMTAuMjM0LTEuNzgyLTE2Ljc4NC01LjIzNi0yMy41LTEwLjM3LjExLS4wNzYuMTItLjYzOC4xOS0uOTQuNDM3LTEuODM2LjUyNi0yLjQ0LjY5NS0zLjE5NC42My0yLjkgMS4yMTItNS43NTMgMS44NjYtOC4zNTYgMy4xOTcuNDY4IDguMjA1LjAzIDEwLjkxOC4yNDcgNi40NzQuNTA3IDEyLjg0NCAxLjExNSAxOC4xOSAyLjk1IDIuMDUuNyA0LjA4NyAyLjI4OCA1LjkgMy4xOTUgMS41NzQuNzg1IDIuNzU3IDEuMDYyIDQuMTggMS45NjYgMS40MjcuOTA4IDMgMi4xMiA0LjQyMyAzLjE5Ni4xNi4xMjUuMzE0LjY3Ny40OTIuNzQuNDEzLjE0NC44MDUtLjE1NiAxLjIzIDAtMS41Ny0zLjM2NS00LjU2NS01LjU3Ny03LjYyMy03LjM3Ni0uNTMtLjMxNS0xLjcxMi0xLjM0NS0xLjk2Ni0xLjcyLS43OTgtMS4xNzYtMS41NDctMS44Ni0yLjQ3LTIuOTUtLjY0NC0uNzYtMS4zMDItMS42NzUtMS45MS0yLjQ2LTIuOTQyLTMuODEtNy4wNzUtNi44NDItOS4zNC0xMS4zMDYtLjU3LTEuMTEzLTEuMzItMi43OS0xLjcyOC0zLjg2LS4yNzUtLjcyLS42NDUtMS40OS0uNTc1LTEuNTM3IDEuMTQ0IDEuNjIgMy40NCAzLjQ5NiA0Ljk2MiA0Ljc3MiA0LjY1NCAzLjg5MiAxMC44NDYgNS42NTUgMTUuNzMgOS4zOTYgMi45MjggMi4yNCA0LjkgNC4zNSA3LjI1IDcuMjA4LjIuMjQ3IDIuMDA0IDIuMyAyLjE4NiAyLjUyNC45MjMgMS4xMjggMS43MjggMi42MzYgMi4zNjYgMy44NjcuMTEzLjIyMi4wNy44Mi4yNDUuOThsLjM2OCAxLjc5TTc1LjM1NyAxMjEuMjZjLTEuNjIgMy45NjctMy41MzUgNy4xOTItNS42NTQgMTAuNTczIDEuMzUgMS42NjYgMi41NDcgMy4xNSAzLjg2IDQuOTE2IDEuNTczIDIuMTE3IDIuODA3IDQuNzcgMi44NTMgNC42NzUuMTI1LS4zIDMuMjk0LTEzLjkxOCAzLjI3Ni0xNC4wMTgtLjI3LTEuNTY3LTMuMTM3LTUuMi00LjMzNS02LjE0Nk0xNzMuODUgMTQ2LjY3NmMtLjk3IDMuMTczLTIuMjk0IDkuNzI1LTMuNjAzIDEyLjY4OC0uMTEuMjQtLjU3NCAxLjAzLS42OTUgMS4yNzMtMS4wNzcgMS45ODMtMS45MDUgMy40ODQtMi45OTYgNS4zNjctLjcgMS4xOS0xLjEgMi4wMDMtMS42NzUgMy40NC4yMjMtLjA0NS4xODguMzM3LjY5NS4yNDcuOTI2LS4xNzcgOC41MTItMi40OTcgOC44NS0yLjk1IDIuMzYyLTMuMjQzLjI3NC0xMy41NS0uMjQ4LTE3LjQ1My0uMTYgMC0uMjEzLTIuNTEtLjMyNi0yLjYxTTE3MS45MyAxNTAuMDA1cy0zLjg0MyA0LjkwMi01Ljg2MyA1Ljk0N2MtMi43OTYgMS40NC01LjUzIDIuODgzLTguMTE0IDQuNjQzLS45Ni42NDUtMi43NzggMS43MTctMy41MyAyLjU5Mi0yLjY4OCAzLjEyNC01LjQ3MiA2LjkxMy00LjUzNiAxMi42NS4wNDIuMjYuMzM3LjQ5LjQ0NS43MzYgMy41MDMtMS42MTMgNi43ODMtMy45NCAxMC4zMjUtNS40MS45ODQtLjQxMiAxLjMzNC0uMTQ0IDIuMTIzLS43MzYuODMtLjYzIDEuMzg4LTIuMTg4IDEuODU1LTMuMTk2LjI4NS0uNjIyLjkxNy0xLjMzNSAxLjI4NC0xLjk2NiAxLjYwNS0yLjc4OCAyLjkyLTYuMDYgNC4wOC05LjA5My40Ni0xLjIzIDEuMjgtMi43OCAxLjQ3My0zLjkzMy4wNDYtLjI5My40NTYtMi4yMzIuNDU2LTIuMjMyTTEzMi45OTYgMTc1LjI0M2MtLjQ3OC4xMTQtMS41NjIgMS4wMTItMS45MDUgMS4zOTMtLjUxNS41NzUtMS43NzMgMS45NjMtMi4xMTYgMi44MTUtLjY1NyAxLjY0Ny0xLjY2IDMuNDgtLjk0IDYuMTMuMDg2LjMyIDEuMjk0IDMuNzYgNC40NTggNC43OTYgMS4yNS40MSAyLjIzMi41NjUgMy4zNC40NTUgMS4xMDMtLjExIDIuMDcyLS4xNTggMi45OC0uNzk0LjkwNy0uNjM1IDEuNjIzLTEuMzY0IDIuMTMzLTEuOTY0IDEuMzY4LTIuMzg4IDEuNTc1LTQuNDQ4IDIuNzUtNy4zMiAwIDAgLjYwMiAyLjAyLjU4IDIuNzMzLjE4MiAxLjIyMy0uODM0IDMuNDU4LS44MzQgMy40NThzMS43NTUtMS41MDcgMi4yMjMtMi4yNmMuNDY4LS43NS42NC0xLjM3NS45MTctMS45NjYuNDQ1LS45Ni0uMTMtMi40OTYtLjEzLTIuNDk2cy0uODk0LTEuODItMi4xNzUtMi43NTZjLTMuNTktMi42MzMtOC4zNi0yLjk0NS0xMS4yOC0yLjIyIiBmaWxsPSIjZmRkZDA0Ii8+PHBhdGggZD0iTTEyMy41NCAxNzguODg1Yy0xLjI4Ny4zOTgtMy4xNS45ODYtNC44NzMgMS45MzQtMi4zMiAxLjI1LTQuODMyIDMuMjA1LTYuOTMgNC43MDMtMy4xMDIgMi4xOTgtNS42MyAzLjUxOC04LjU2MiA2LjU0LTEuMzIgMS4zNi0zLjA5MiAzLjAxNi00LjYxIDQuMTc2LTIuNzUyIDIuMDk3LTYuMDggMi44NjQtOC4yNTggNC40MjMuMi4wNyAxLjQ4LjY0IDIuMjU4LjgzNyAxLjQ5LjM4IDMuNDk2IDEuNTEyIDUuMjMyIDEuMTkgMi4zMzctLjQ0NiA0LjM3NS0zLjkxIDYuMDItNS4yMjMgMS44MTgtMS40NjYgMy4zNS0yLjkzMiA1LjIxNy00LjM2OCAxLjExMy0uODcgMS44Mi0xLjUyIDIuOTEtMi4zOC41NDgtLjQ0IDEuMi0xLjEzMiAxLjc2Mi0xLjU1My45MjgtLjcxNiAyLjI0LTIuMDYzIDMuMTctMi44IDEuMzczLTEuMTEgNi41OS0yLjc4NiA5LjU4NC0yLjkwNC4xMDgtLjM5OC40NTMtMS42MjcuNjYtMi4zODguMi0uNzYzLjUxLTEuMzY3IDEuMTA4LTIuNTYtLjQxLS4xNDctMy45NDUuMTQtNC42OS4zN00xMjguOTEgMi45MzdzLTQuNzIuNTUtNC44OC42MjJjLTEuMzcuNTEyLTIuNTI4LjkyNS0zLjkzNCAxLjQxNi0xLjA5LjM3LTIuMzkuODkzLTMuNDQyIDEuMjg3LTE0LjEyNiA1LjItMjUuMDkgMTMuNTg4LTMzLjkyMiAyNC4wOS0xLjE5IDEuNDA0LTMuNDczIDMuMzYyLTQuMTggNS4xMDYtLjY1MyAxLjU4LS41NzYgMi43LS43MzcgMy45NDMgMi43MDQtLjUwNiA2LjY5OC0yLjU4OCA4Ljg1LTMuOTMyLjY2OC0uNDIzIDMuMjUzLTEuNzIgNC4zNDctMi4yMyAxLjkyLS44OTcgNC4xLTIuMTggNS4zNzgtMy4wNzMgNC41NDctMy4xODQgNS4wNTUtNC42NiA4Ljk1Ni03LjcyNiAyLjcxMy0yLjE0MyA0Ljg3LTUuMTkyIDcuNTItNy4zNzMgMy43NjYtMy4xMSA3LjAyOC01LjYxOCAxMC45MjMtOC41NDQuNTYtLjQzMiA1LjEyLTMuNTg2IDUuMTItMy41ODYiIGZpbGw9IiNmZGRkMDQiLz48cGF0aCBkPSJNMTM0LjcwOCAxODAuOTU1djEuODU2aC44MWMuNDA3IDAgLjU0My0uMzEuNTQzLS44OCAwLS43My0uMjQtLjk3NS0uNTUzLS45NzV6bTAgMi42MDJ2Mi4xNTJoLTEuMDcydi01LjUxaDEuOTVjLjkyMiAwIDEuNjgyLjM0OCAxLjY4MiAxLjcxNyAwIC42NjQtLjM4IDEuMTgtMS4xNTMgMS4yNiAxLjAwNC4xMjMuOTkyLjc1OCAxLjAxNiAxLjkyMyAwIC4yMTcuMDQyLjQ3My4wODMuNjFoLTEuMDQ0Yy0uMDQtLjE0Ny0uMDk1LS4zMjUtLjA5NS0uNjYzdi0uOTM1YzAtLjM4LS4yNTYtLjU1NS0uNTU2LS41NTV6bS42NzcgMy4zNDRjMi4xNjcgMCAzLjk0Mi0xLjggMy45NDItNC4wMiAwLTIuMTgtMS43NzUtNC4wMzctMy45NDItNC4wMzctMi4xODMgMC0zLjk4NCAxLjg1Ni0zLjk4NCA0LjAzNiAwIDIuMjIgMS43OSA0LjAyIDMuOTg1IDQuMDJ6bTQuNzY3LTQuMDJjLS4wMTIgMi42MjctMi4xNTMgNC44MS00Ljc2NyA0LjgxLTIuNjQzIDAtNC43ODMtMi4xODMtNC43OTUtNC44MS0uMDE1LTIuNjQzIDIuMTQtNC44MSA0Ljc5NS00LjgxIDIuNjI3IDAgNC43NjcgMi4xNjcgNC43NjcgNC44MU0xMjYuNzMzIDI2LjYyYy42ODUtLjE1My0xLjAyMiAxLjM4NC0xLjIzIDEuNDc1LTEuNTczLjYzMi0yLjg4Ny44ODQtNC42NyAxLjI3NC0yLjQwNC41MjItNS4xMjMgMS41MTQtNy4zNzQgMi4xNjYtNi4yNjIgMS43OS0xMS45MzIgMy4yNjUtMTcuNyA1LjQ1My0yLjg5IDEuMDktNS42MyAyLjUwNi04LjYwNCAzLjY0Mi4xNDYtLjEyMy4wNC0uODMuMjQ1LS45ODMgMS4xMTYtLjg3IDQuMDktMS43ODIgNS42NTYtMi4zNTggNC4yLTEuNTYgOS4xMDMtMy41NSAxMy41Mi01LjAyIDIuOTAzLS45NzMgNS4zMjQtMS4wOTYgOC4zNTgtMS45NjQgMi45OTYtLjg2OCA2Ljg1Mi0xLjU4IDEwLjA4LTIuNzA0LjUtLjE4NCAxLjAyLS44NCAxLjcyLS45ODNNNjMuNTYgMzguNjY1Yy4zNDYtLjczOCA4LjQ4Ni0xMi43NDQgMTMuMDI2LTE2Ljk2LjYxNS0uNTc3Ljk0NS0xLjU2IDEuNzItMS45NjYgMS4yLS42NDgtMS42MjcgMi41ODUtMS43MiAyLjctMy42MDMgMy45ODgtNi43MTcgOC4yNTItOS44NDMgMTIuNzg1LS4yMDguMjktMi4xNyAzLjE3OC0yLjIyIDMuMjYzLS40NDguNzctMS42MjIgMy4yNjctMS42IDMuMzMtLjExNi4xLTIuNTcgMy43My0yLjU3IDMuNzMtLjE2My4wNC0uODgyIDEuNTkyLTEuNTI4IDMuMTk2LS43NDUgMS44My0xLjc3IDMuMjU2LTIuNjUzIDUuNjU1LS44OCAyLjM5Ni0yLjI0NyA5LjU0Ny0yLjY5MyAxNS4yNC0uMDQgMC0uNzMtLjA0LS43NCAwIDAtMi43Mi40LTUuMDQ4Ljc0LTcuMTMuNzA1LTQuNDEgMS40NDQtNy41NjYgMi45NDgtMTEuMDYyIDEuNzQtNC4wNiA0LjA5Mi03LjIyMyA2LjAwMi0xMC41Ni42ODUtMS4xODMuODAyLTEuNTMzIDEuMTMtMi4yMjNNNDYuNSAxMDIuNDczYy0uNDM1LTEuMzI0LS45OC01LjIzMy0xLjEzNC02LjA0LS43My0zLjY3LTEuNDItOC4yNTctMS4yMjgtMTIuNTM2LjAyLS42NDUtLjEtLjkxNiAwLTEuNDc2LjItMi41OTMuMzg0LTUgLjQ5LTcuNjE3aC0uNDljLS4xNiAzLjg3LTEuMTkgOC45OTQtLjk4NCAxMi41MzYuMjE1IDMuODYzIDEuMjgyIDcuNzk2IDEuOTY2IDExLjA2LjIxIDEuMDA3LjYzOCAzLjUwNy44MzggNC4zNi40NDggMS45Mi42NCA0LjEgMS4yOCA1LjYzNS42NCAxLjUzNyAxLjUzNyA0LjI5IDEuNzk0IDUuMTg0LjI1Ni44OTYuMzI0IDEuNzEuNTE0IDEuNzgzLjE5LjA3My41NzMtLjM3NS43LS42OTUuMTMtLjMyLS44My0yLjQ5Ni0xLjQ3LTQuNjEtLjY0LTIuMTEtMi4wNTctNi45MTUtMi4yNzctNy41ODVNNzQuMzczIDg4LjMyYzAgMTAuNjI3LTIuMTQyIDE4Ljk5Mi00LjE4IDI4LjAyNS0uNTUyIDIuNDItMS4zNzMgNC45NDgtMi4yMTIgNy4xMjgtLjE5Ny0uMDA2LS45NSAxLjE2Mi0uNzM1LS4yNDQuMS0uNjcuNDc2LTEuNjcuNzM2LTIuNzA1IDEuMjkzLTUuMjQ4IDMuMjEzLTEwLjk2NCA0LjE4LTE2LjQ3LjcyMy00LjE0OC43LTExLjU3NiAyLjIxMy0xNS43MzRNMjEyLjc3MyA5Ni40MzNjLjM3NC0uMTIuMjg4IDEuMTYzLjI0NCAxLjQ3NS0xLjM2NSA5LjU4NC0uNjQ2IDE4LjExNi0xLjIzIDI1LjU2NWwtLjczNS0uMjQ0YzAtOC41NzQtLjM4Ny0xNi42OTQgMS4yMjctMjUuMDc0LjE2LS44NTMtLjI3LTEuNDg0LjQ5My0xLjcyM002MC4wMiAxNDUuOTNjMi41MDUgMy4xOTUgNi40OCA2LjIwNiA5LjkyOCA4LjAyNy4zNy4xOTQuNzMuNjMgMS4yMy43MzggMS40NDQuMy0xLjQ3NS0xLjcyLTEuNDc1LTEuNzItMS4zMTMtLjc5LTIuMzQzLTEuMzM2LTMuNDQtMi4yMTItMS4yMTYtLjk3LTQuNjg4LTQuNDYtNS4zMDQtNS40My0xLjAyNS0xLjYyMi00LjItNS4xMi01LjY1LTcuMzQtMS40NTItMi4yMi02Ljg5NS0xMC45MDItNi4yNTYtOS44NDguMzY2LjYwNC0zLjUzNC01LjI0OC00LjE4LTUuNjU0LS4yMzctLjE1LS40NjguMjQ2IDAgLjI0NiAxLjM5MiAyLjY3NSAyLjY2NyA0LjE2NCAzLjkzMyA2LjY0LjcxNCAxLjE5IDIuNDkgNC4xMSAzLjc3IDYuMTU3IDEuMjggMi4wNSAxLjY2OCAzLjUyMyAyLjk1NCA0Ljk2OC42ODQuNzcgMy42MzcgNC43NDggNC40OSA1LjQzTTIwMi45NCAxNjYuMDA0YzIuNzU2LS40ODUtMi4yMTYgMS43Mi0yLjIxNiAxLjcyLTMuMDI4IDIuMzc2LTYuMSAzLjgzLTkuMyA1LjcwNy0xLjE5My42OS0yLjQ4IDEuNTQtMy43MjggMi4xMTctOS4xNDggNC4yMTYtMTkuNDEgNy43MTctMzAuNDggOS44NzRsLjI0Ny0uNzM2YzIuNDY1LS41IDMuNzktMS4wMTIgOC4wOTgtMi4yMDcgMy40MjQtLjk0OCA1LjQxNS0xLjQwMiA1LjY2OC0xLjQ3OCA0LjUtMS40MyA1LjE5Mi0xLjgwOCA5LjgyNS0zLjYgMS44ODctLjczNSA1LjU2Mi0yLjI1NiA2Ljg5LTMuMDQgMy4yOTctMS45NTcgNi4yODItMy41MDMgOS41ODYtNS40MSAxLjUwNi0uODc0IDMuNTI2LTIuNjI1IDUuNDEtMi45NDZNODEuNTAzIDE3My44NjhjMy4yMzYgMS4xMDMgNy43OCAyLjQ0OCAxMS40OTQgMy4xNTIgNy45NDggMS41MDcgMTYuNzIyIDEuNTIgMjUuMTMzIDEuNTJ2LjQ5M2MtMTEuODg1LjkyNy0yNC40Ny0uMzkzLTMzLjQzMi0zLjQ0NC0xLjEzOC0uMzk0LTIuMTU3LS44MjItMy40NC0xLjIzLjA3NS0uMjg1LS4xOTgtLjY0LjI0NS0uNDkyIiBmaWxsPSIjMjMxZjIwIi8+PHBhdGggZD0iTTIxOS4yNjggNTAuOTA3Yy0xMC4yNDQgMi44MTYtMzMgNC42MS01My4zMDQgMi44NS0yMS43My0xLjg4NC00NC4yMTctLjgyNi02MC43MiA1LjA5LTEuMzguNDkyLTIuODcuNzI2LTQuMzIyIDEuMTU2LS4xNTQgNC45MDIuMDk4IDguODA2LS4yMyAxMi4yNDItLjM0MyAzLjU4Ni0uMTQ2IDYuNDg4LTEuMzQgMTUuODc2LTEuMTk2IDkuMzktMi44OSAxNS44NjUtMy45MzggMTkuNjItLjY3MiAyLjQwNC0uOTI1IDMuMzY1LTEuMzEyIDQuOTQtLjUzIDIuMTYtMi42NTQgOS45MjQtNC43MDMgMTUuNTYtMi4wNSA1LjYzMy0zLjg5MyAxMC4wOS0zLjg5MyAxMC4wOXMxNS41MS00LjA5NCAyNS4yMjItNS43MzhjOC4zMi0xLjQxIDE3LjUxNy0yLjIgMjYuODg1LTIuMDUgNS4yMi4wODUgMTEuMzg0LjgyIDE2LjU1OCAxLjU1IDEzLjgyOCAxLjk1IDI3LjQ2Mi42MzYgMzMuNjA2LjI5NSA2LjE0NS0uMzQyIDguNzA1LS44NTQgOS41Ni0uODU0Ljg1MyAwIDEtLjY4NCAxLjM0LTEuMzY2LjE0Ny0uMjk0IDEuMjEtNS43NzQgMi43NS0xMi42NCAyLjAyMy05LjA0MiA0Ljc2LTIwLjQ4NCA2LjIzOC0yNS42NSAzLjQ0LTEyLjAzNCA0LjkyMy0xNi42IDcuNjY1LTI1LjA5NCAyLjg3LTguOSAyLjI5OC02LjY4OCAzLjA1Ni0xMC4zNy42NTctMy4yMDIuODc4LTUuNTA2Ljg3OC01LjUwNiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xMDAuODQgNjguMjk1czEzLjc4NC0zLjY2IDMzLjAyLTYuMDIzYzEyLjcyLTEuNTYzIDI2LjMwNC40NiAzMi45NDguOTI1IDYuNjQ1LjQ2OCAxNy4wNzIgMS4wMjQgMjAuODI3Ljg1NSAzLjc1NC0uMTcyIDkuMDA1LS4yMzUgMTEuNTY0LS40MDUgMi41NjMtLjE3IDcuMDgtLjg5IDguOTItMS4zMDMgMS45LS40MjUgNS4zNTYtMS4zNDQgNi4zOC0xLjUxMyAxLjAyNC0uMTcgMi43MTIuMyAyLjcxMi4zbC00LjE5NSAxMy4xMXMtLjg1OC0uNDQ4LTEuOTk3LjA1M2MtMS44MzUuODEtNS40MTcgMS45NjQtMTAuNzUyIDIuMTQzLTE3LjA4My41NzYtMjcuODI3LjMzMy0zOS4xMi0uOTk2LTguMzA3LS45OC0xNi44NzMtMS4yOS0yNy43OTctLjA5NS0xMC45MjggMS4xOTQtMTYuMzQyIDIuNjI4LTIyLjg3NyAzLjk3Ni02LjkxMyAxLjQyNy0xMC41MTcgMy4wNTMtMTAuNTE3IDMuMDUzbC44ODUtMTQuMDc4TTk4LjU2NSA5Mi45OTJzMTguODIyLTUuODM1IDMwLjg1OC03LjExNmMxMi4wMzQtMS4yOCAyNy42NTYuNjI1IDQwLjk3MiAxLjEzNiAxMy4zMTMuNTEzIDE4LjE4LjUxMyAyNS42MDQtLjI1NiA3LjQyNC0uNzY4IDEzLjg2LTIuMzA0IDEzLjg2LTIuMzA0bC0zLjg3NSAxMy44MjdzLTIuMzA1LjE5LTUuODg4Ljc2N2MtMy44NjguNjIyLTEzLjA2IDIuNTYtMjkuNzAyIDEuMjgtMTYuNjQ3LTEuMjgtMjguOTM4LTIuMzA0LTQxLjQ4Ni0xLjAyMy0xNS42NDIgMS41OTYtMjEgNC4wOTYtMjYuMTIgNS42MzItNS4xMiAxLjUzNy03LjM3NiAyLjczNS03LjM3NiAyLjczNWwzLjE1LTE0LjY3OE05My4wMSAxMTYuNTkybC00LjkgMTQuODlzMS42NDUtLjY2IDQuMDk2LTEuNTM3YzIuNDU1LS44NzQgMTkuNTMtNS44OTYgMzYuMTktNy40ODUgMTEuMjctMS4wNzUgMjEuNjguMTIgMzQuOTk1IDEuNjU2IDEzLjMyIDEuNTM2IDE4LjQ0Ljg4IDI1LjYxLjUzNyA3LjE2OC0uMzQgMTEuMTkzLTEuMzY2IDExLjE5My0xLjM2NmwzLjEzOC0xMy44MjRzLTguMzU1LjM0LTIwLjk5IDIuMjE3Yy0yLjU4LjM4NC0xNi44NTItLjktMjQuOTItMS43MzItOC4wNy0uODMyLTE5LjYzMy0xLjk1NS0yOS44NzgtLjc2LTEwLjYyIDEuMjQtMTQuNTEgMi4xNzYtMTkuOCAzLjM3LTUuMjkzIDEuMTk3LTE0LjczIDQuMDM0LTE0LjczIDQuMDM0IiBmaWxsPSIjMDA3ZjRiIi8+PHBhdGggZD0iTTExNC44MiA2MC4zOGw0LjIxMi0uMzUyIDEuNzkzLS4xNS0uMjA3IDEuNzY2LS44NiA3LjM2My0xLjU4NC0xLjYyIDUuNjUtLjQ3LTEuMzEgMS4yNTguODU3LTcuMzYyLjEzNy0xLjE2IDEuMTc3LS4xIDQuMjEyLS4zNTMgMS43OTMtLjE1LS4yMDcgMS43Ny0yLjIzIDE5LjE4My0uMTM4IDEuMTYtMS4xOC4wOTgtNC4yMS4zNTUtMS43OS4xNS4yMDUtMS43NjYuOTU4LTguMjc2IDEuNTg3IDEuNjE2LTUuNjU0LjQ3MiAxLjMxNS0xLjI2LS45NiA4LjI3Ni0uMTMzIDEuMTYtMS4xOC4xLTQuMjEyLjM1My0xLjc5Mi4xNS4yMDYtMS43NjYgMi4yMzItMTkuMTg0LjEzNS0xLjE2IDEuMTgtLjEiIGZpbGw9IiMyMzFmMjAiLz48cGF0aCBkPSJNMTE0Ljk1NiA2MS44Mmw0LjIxMy0uMzU1LS44NiA3LjM2MyA1LjY1My0uNDczLjg1OC03LjM2MyA0LjIxNC0uMzUyLTIuMjMyIDE5LjE4NC00LjIxMy4zNTIuOTU4LTguMjc2LTUuNjUzLjQ3NS0uOTYgOC4yNzQtNC4yMS4zNTQgMi4yMy0xOS4xODUiIGZpbGw9IiNmZGRkMDQiLz48cGF0aCBkPSJNMTQ4LjAzNiA4MS41MTVoNmwtLjI2IDEuNzUzLTIuODE3IDE5LjAxNS0uMTc1IDEuMTVoLTcuMTczbC4yNi0xLjc1IDIuODE3LTE5LjAxNi4xNy0xLjE1MmgxLjE3NiIgZmlsbD0iIzIzMWYyMCIvPjxwYXRoIGQ9Ik0xNDguMTMgODIuOTY3aDQuMjA1bC0yLjgxNiAxOS4wMTZoLTQuMjA4bDIuODE3LTE5LjAxNiIgZmlsbD0iI2ZkZGQwNCIvPjxwYXRoIGQ9Ik0xNzUuMTQ3IDEwNi41NjdoMTUuMzM3bC0uMzMyIDEuNzY0LS42NjQgMy41MTctLjIxMyAxLjE0SDE3OC43ODVsMS4zODMtMS4xNS0uODA1IDQuODI4LTEuNDc2LTEuNzUySDE4NC43NTdsLS4zMTcgMS43NTQtLjU5MyAzLjI1LS4yMDcgMS4xNWgtNi4yMjZsMS4zODMtMS4xNS0xLjQxNiA3LjQyLS4yMDcgMS4xNUgxNzAuMDI2bC4zMTQtMS43NTIgMy40MjQtMTkuMDE2LjIxLTEuMTUzaDEuMTczIiBmaWxsPSIjMjMxZjIwIi8+PHBhdGggZD0iTTE3NS4xOTMgMTA4LjAyaDEzLjUzbC0uNjYyIDMuNTEzaC05LjMybC0uODA1IDQuODNoNS4wNzNsLS41OSAzLjI1aC01LjA1bC0xLjQxNiA3LjQyMmgtNC4xOGwzLjQyLTE5LjAxNiIgZmlsbD0iI2ZkZGQwNCIvPjxwYXRoIGQ9Ik03OS43NDUgMTUyLjgycy4zNCAxLjk2NC40MjcgNC4yNjhjLjEgMi43MTYtLjU5NyA1LjM4LS41OTcgNS4zOGwxLjE5NC4yNTNzLjU5Ny0zLjQ1NS41OTctNi40YzAtMi45NDQtLjkzOC02Ljc0LS45MzgtNi43NGwtLjY4NSAzLjI0TTI2Ljk1NSAyNzguODQ3aC04LjEwN3YtMTQuMzRIOC4xMDh2MTQuMzRIMFYyNDQuMDloOC4xMDd2MTMuNTc4aDEwLjc0VjI0NC4wOWg4LjEwOHYzNC43NTdNNDguMzg2IDI2NS4zMmwtMy43LTEyLjIxMi0zLjY5NyAxMi4yMXptMTIuNzY4IDEzLjUyN0g1Mi4zOWwtMi4xMy03LjE0NEgzOS4wMTRsLTIuMTggNy4xNDRIMjkuNjlsMTEuMTQ2LTM0Ljc1N2g5LjQyNWwxMC44OTQgMzQuNzU3TTg1Ljk4IDI3OC44NDdIODAuNDFsLTguNDYtMjguMzIzaC0uMTAzdjI4LjMyM2gtNi44NFYyNDQuMDloMTIuNzE4bDYuMDggMjAuODI0IDYuMzg0LTIwLjgyNGgxMi43MTd2MzQuNzU3aC04LjEwN3YtMjguMzIzaC0uMjAzbC04LjYxMyAyOC4zMjNNMTI5LjU1NSAyNzguODQ3aC01LjU3NGwtOC40Ni0yOC4zMjNoLS4xMDJ2MjguMzIzaC02Ljg0VjI0NC4wOWgxMi43MThsNi4wOCAyMC44MjQgNi4zODUtMjAuODI0aDEyLjcxN3YzNC43NTdoLTguMTA2di0yOC4zMjNoLS4yMDJsLTguNjEzIDI4LjMyM00xNjguOTcyIDI2NS4zMmwtMy42OTctMTIuMjEyLTMuNyAxMi4yMXptMTIuNzY4IDEzLjUyN2gtOC43NjVsLTIuMTI4LTcuMTQ0SDE1OS42bC0yLjE4IDcuMTQ0aC03LjE0M2wxMS4xNDYtMzQuNzU3aDkuNDI0bDEwLjg5MyAzNC43NTdNMTkzLjggMjU5LjEzN2g0LjQ1N2MxLjY3NCAwIDMuNDk2LjE1MyA0Ljk2Ny0uNzEgMS4zMTctLjgxIDIuMDI1LTIuNDMgMi4wMjUtMy45NSAwLTEuMzctLjgxLTIuODM4LTEuOTc1LTMuNTQ4LTEuMzctLjg2Mi0zLjctLjY2LTUuMjItLjY2SDE5My44em0wIDE5LjcxaC04LjEwN1YyNDQuMDloMTQuNjQyYzMuMDkyIDAgNi4yMzIuMDUgOC45MTcgMS43NzMgMi44MzcgMS44NzQgNC40MSA1LjI3IDQuNDEgOC42NjQgMCAzLjk1Mi0yLjI4IDcuNi02LjAzIDguOTY4bDYuNDMzIDE1LjM1MmgtOS4wMTdsLTUuMzItMTMuNzNoLTUuOTN2MTMuNzNNMjI3LjI0IDI3Mi40MTJoNS42MjNjMS40NyAwIDMuMzQ1LjEwMiA0LjYxLS43NiAxLjE2Ni0uNzYgMS44MjQtMi4xNzcgMS44MjQtMy41OTcgMC0xLjMxOC0uODEtMi42ODYtMS45NzQtMy4zNDUtMS4xNjYtLjY1OC0yLjc4Ny0uNjU4LTQuMTA0LS42NThoLTUuOTh6bTAtMTQuNTRoNS41MjNjMS40MTcgMCAzLjA5LjEgNC4zMDUtLjgxLjk2NC0uNzEgMS40Ny0xLjk3OCAxLjQ3LTMuMTQzIDAtMS4yNjgtLjYwNy0yLjQ4NC0xLjcyMi0zLjE0My0xLjE2NS0uNjU4LTMuMjk1LS41MDYtNC42Ni0uNTA2aC00LjkxN3ptNy40NDctMTMuNzgyYzIuNzM3IDAgNS41NzQgMCA3Ljk1NCAxLjUyIDIuNzkgMS43NzMgNC4yNTcgNC4zMDYgNC4yNTcgNy42IDAgMy45NS0yLjYzMyA2LjU4Ni02LjI4MiA3LjQ5OHYuMTAyYzQuMzA4Ljg2MiA3LjI0NSA0LjE1NCA3LjI0NSA4LjY2NSAwIDMuMDQtMS44MjMgNS43MjUtNC4yNTUgNy40OTgtMi41MzQgMS44NzQtNS45MyAxLjg3NC04LjkxOCAxLjg3NGgtMTUuNTU1VjI0NC4wOWgxNS41NTVNMjY1LjU0MyAyNjQuMjA0djE0LjY0M2gtOC4xMDd2LTE0LjY0M0wyNDYuNDQgMjQ0LjA5aDkuNDI0bDYuNjkgMTMuMjI0IDYuNTg1LTEzLjIyNGg3LjI5NmwtMTAuODkzIDIwLjExNE00Mi4xNTQgMzMxLjc2di0zNC43NTZoMjEuMjh2My43NUg0Ni41MXYxMS4wNDNoMTQuMDM2djMuNDk2SDQ2LjUxdjE2LjQ2OGgtNC4zNTZNODguNTY1IDMxNC4yM2MwLTMuMDktLjUwNy02LjY4Ny0yLjA3OC05LjQ3NC0xLjU3LTIuNzM3LTQuMjU2LTQuNjYtNy40OTgtNC42Ni03Ljc1NCAwLTkuODgyIDguMzU3LTkuODgyIDE0LjU5IDAgNS45OCAyLjQzMyAxNC4wMzUgOS43OCAxNC4wMzUgNy40NDcgMCA5LjY3Ny04LjUxIDkuNjc3LTE0LjQ5em0tMjQuMDE3LjQwNWMwLTguNjY0IDQuMjU3LTE4LjE0IDE0LjI4OC0xOC4xNCA5Ljc4IDAgMTQuMjkgOC45MiAxNC4yOSAxNy40ODIgMCA4LjUxLTQuMzYgMTguMjktMTQuMjQgMTguMjktOS45OCAwLTE0LjMzOC04LjkxOC0xNC4zMzgtMTcuNjMyTTEwNS4xODMgMzMxLjc2di0zMC45NTdoLTkuODh2LTMuOGgyNC4xMTd2My44aC05Ljg4djMwLjk1OGgtNC4zNTdNMTM3LjA1MyAzMjguMDZjMS45MjQgMCA0LjA1NC0uMiA1LjU3Mi0xLjQxNiAxLjQ3LTEuMTE1IDIuMTgtMi43ODggMi4xOC00LjY2IDAtMi4wOC0uOTEzLTQuMTU3LTIuNTMzLTUuNDIzLTEuNjcyLTEuMzE3LTMuODUyLTEuMzE3LTUuODI3LTEuMzE3aC03LjkwNHYxMi44MTh6TTEzNS4yOCAzMTEuOWMyLjE4IDAgNC41Ni4wNSA2LjMzMi0xLjMxNyAxLjQyLTEuMDEyIDIuMTgtMi44ODcgMi4xOC00LjU2IDAtMi4wNzYtLjgxLTMuNTQ1LTIuNTg0LTQuNjEtMS41Mi0uODYtMy4wOTItLjg2LTQuODE1LS44NmgtNy44NTJWMzExLjl6bS0xMS4wOTcgMTkuODYzdi0zNC43NTZoMTMuMTIyYzIuNjg3IDAgNC44MTUuMSA3LjE0NCAxLjYyIDIuMzMgMS41NzIgMy42NSA0LjAwMyAzLjY1IDYuODQgMCAzLjk1My0yLjMzMiA2Ljg5LTYuMTMzIDcuODAzdi4xYzQuMzA4LjkxNCA3LjE5NiA0LjM2IDcuMTk2IDguODE3IDAgMi45MzgtMS4wMTQgNS41MjMtMy4zNDQgNy4zNDgtMi42MzcgMi4wNzYtNS4zNzMgMi4yMy04LjU2NCAyLjIzaC0xMy4wNzNNMTc3LjczNyAzMTQuMjNjMC0zLjA5LS41MDYtNi42ODctMi4wNzctOS40NzQtMS41Ny0yLjczNy00LjI1Ni00LjY2LTcuNDk3LTQuNjYtNy43NTQgMC05Ljg4MiA4LjM1Ny05Ljg4MiAxNC41OSAwIDUuOTggMi40MzUgMTQuMDM1IDkuNzggMTQuMDM1IDcuNDQ4IDAgOS42NzctOC41MSA5LjY3Ny0xNC40OXptLTI0LjAxNC40MDVjMC04LjY2NCA0LjI1NC0xOC4xNCAxNC4yODYtMTguMTQgOS43NzggMCAxNC4yODcgOC45MiAxNC4yODcgMTcuNDgyIDAgOC41MS00LjM1NiAxOC4yOS0xNC4yMzcgMTguMjktOS45OCAwLTE0LjMzNy04LjkxOC0xNC4zMzctMTcuNjMyTTIwOS43MDggMzMxLjc2aC0yMC41MnYtMzQuNzU2aDQuMzU3djMwLjkwNWgxNi4xNjN2My44NU0yMzUuMDQgMzMxLjc2aC0yMC41MnYtMzQuNzU2aDQuMzZ2MzAuOTA1aDE2LjE2djMuODUiIGZpbGw9IiMyMzFmMjAiLz48L3N2Zz4=");
+}
+
+.dif {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NTkuNDEzIiBoZWlnaHQ9Ijc0OC4zNDciIHZpZXdCb3g9IjAgMCA2NTkuNDEzMzMgNzQ4LjM0NjY4Ij48cGF0aCBkPSJNNTI3LjM1NyAxNjIuNjM3bC0xLjg3LTcuOTkzLTguMDIgMS43MTdjLTk5LjE4MiAyMS4xOC0xODIuNzQ0LTI4LjUwNy0xODMuNTc0LTI5bC00LjM1Ny0yLjYzNS00LjMzMyAyLjY0NmMtLjgyOC40OTctODQuMjYgNTAuNDEtMTgzLjQ4OCAyOS40ODJsLTguMDI2LTEuNjk1LTEuODQ4IDcuOTk4Yy0uMzUgMS41MzQtOC42NjggMzguNC02Ljc3NyA5OS4zMzMgNS45MiAxOTEuMDg0IDEyOS4wMDcgMzE1LjI3IDIwMC44MDMgMzU4LjUzbDQuMzMgMi42MDQgNC4zMjItMi42MTZjNzEuNjgzLTQzLjQzOCAxOTQuNDU2LTE2Ny45NDUgMTk5Ljg3NS0zNTkuMDU0IDEuNzMtNjAuOTM2LTYuNjgzLTk3Ljc4LTcuMDM4LTk5LjMxNSIgZmlsbD0iI2NhYjM1YiIvPjxwYXRoIGQ9Ik00MDcgMTcyLjA4M2MtMzguNzQ0LTguMjM2LTY2Ljk0OC0yMi4yMjYtNzcuNDMtMjcuOTQ4LTE4LjU1OCAxMC4yLTkyLjgzIDQ2LjU1My0xODIuOTA2IDMwLjctMi4yNjggMTMuNjk3LTYuMjEgNDQuNDctNC44ODggODcuMTM2IDEuNTQgNDkuNjc4IDExLjMxMiA5NC42MTUgMjYuMDc1IDEzNC42MDdMNDA3IDE3Mi4wODMiIGZpbGw9IiNmN2VlMGMiLz48cGF0aCBkPSJNMzMwLjE3MiA2MDQuMDIzYzY4LjQ0LTQzLjQyOCAxNzkuNTUyLTE1OS41NjQgMTg3LjItMzM1Ljk3MkwyNDIuOTMgNTI1LjY3OGMyOS45ODcgMzUuODMgNjEuNjEyIDYyLjE3NSA4Ny4yNCA3OC4zNDYiIGZpbGw9IiMyZTY0YjYiLz48cGF0aCBkPSJNMjY4Ljc5MiA0MDEuNGM5LjczIDEwLjM0NCA2Ljc0IDIxLjY0My0uMDggMjguMDU1bC0xLjE1MiAxLjA4NC0yNy45My0yOS43IDEuMjc0LTEuMmM3LjMzMy02Ljg5NSAxOC45NTUtNy43NCAyNy44ODggMS43NnptMjQ5LjAzLTE0OS42NDhMMjM1LjYwNiA1MTYuNjhjLTIzLjktMzAuMTE3LTQ2LjI5NC02Ni4zOC02My4yNDctMTA4LjQ1Nkw0MjEuMTIgMTc0LjcxYzI2Ljk4NyA0LjM4NyA1OC4xMjcgNS42MDUgOTEuNDQ0LS4zNTQgMi4xMjQgMTIuNjEyIDUuNjUzIDM5Ljg0NSA1LjI1NyA3Ny4zOTZ6bS0yMzIuMTkgMTMzLjgxYy0xNS43MzUtMTYuNzM0LTQwLjUwOC0xNy45NzctNTcuMDgtMi4zOWwtMTkuODcgMTguNjg0IDU1Ljk3IDU5LjUxNiAxOS44NjgtMTguNjg0YzE2LjQ5Ny0xNS41MTUgMTYuODUzLTQwLjM5IDEuMTEzLTU3LjEyN3ptNDguMzk3LTMuNTE4Yy00LjcwNi01LjAxNS0xMi41ODUtNS4yNjQtMTcuNi0uNTYtNS4wMTMgNC43MDctNS4yNjMgMTIuNTg1LS41NTggMTcuNiA0LjcwNSA1LjAxNSAxMi41ODQgNS4yNjQgMTcuNi41NiA1LjAxMy00LjcwNyA1LjI2NC0xMi41ODUuNTU3LTE3LjZ6bTQyLjMzNS0yNS43M2wtNTUuODktNTkuNTU4LTE3LjEzNSAxNi4wOCA1NS44OSA1OS41NnptMjkuNTEtNDEuNjljLTQuNzA2LTUuMDE1LTEyLjU4NC01LjI2NC0xNy42LS41Ni01LjAxNCA0LjcwNy01LjI2MyAxMi41ODUtLjU1OCAxNy42IDQuNzA2IDUuMDEzIDEyLjU4NCA1LjI2NCAxNy42LjU2IDUuMDE0LTQuNzA3IDUuMjY0LTEyLjU4NS41NTgtMTcuNnptMjQuMTkzLTQ1LjA5NmwxOC4xODctMTcuMDc3LTE0LjMzLTE1LjIzNS0xOC4xODYgMTcuMDc3LTkuMTktOS43MzcgMTguNDctMTcuMzYzLTE0LjM2NC0xNS4yNzMtMzUuNDc2IDMzLjM1NSA1NS45NyA1OS41MTYgMTcuMDA3LTE1Ljk5NHptNTIuNDg4LTI2Ljg2M2MtNC43MDUtNS4wMTMtMTIuNTg0LTUuMjY0LTE3LjYtLjU1OC01LjAxMyA0LjcwNS01LjI2MyAxMi41ODUtLjU1NyAxNy41OTggNC43MDQgNS4wMTUgMTIuNTgzIDUuMjY2IDE3LjU5Ny41NiA1LjAxNS00LjcwNSA1LjI2NC0xMi41ODUuNTYtMTcuNiIgZmlsbD0iI2UzMWUyNyIvPjwvc3ZnPg==");
+}
+
+.maif {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMzQuMjUzIiBoZWlnaHQ9IjE4OC40IiB2aWV3Qm94PSIwIDAgMjM0LjI1MzMzIDE4OC4zOTk5OSI+PHBhdGggZD0iTTE1OC45MTUgMTQzLjM2Yy0xLjk1LjY0Mi0zLjkwMyAxLjM1Ny01Ljg1NCAyLjE3Mi0xMC45ODcgNC42MTctMjEuNDA1IDEyLjMyNC0yOC43NCAyMS41MDgtLjIyMiA1LjE2Mi0uMjcgMTAuMzItLjQ5MyAxNS40ODMgMi43OSAxLjk1IDUuMjg1IDQuNTE3IDguNTY4IDUuNTMgMi4zNy43NCA1LjA4Ni41MiA3LjIxLS42NjcuNjE4LTMuNDgtNS44MjYtMy41OC01LjIxLTUuODc3IDguMTczIDEuOTI2IDE2LjQ5NCAzLjM4MiAyNC41MiAydi0xOS41MDZjLS4zNy4xLS41OTQuMTIzLS41OTQuMS0xLjEzNS41NC0zLjIzMyAyLjE3LTQgMy4wMzUtMi40Mi0uMDc2LTYgLjQ0LTUuMTg0LS43OTIuNTItLjM0NCA0LjY5Mi0zLjQ4MyA5Ljc4LTguOTE1em0wLTEzNi4wNTZjLTQuNzktLjg2My05LjQzNC0yLjI0Ny0xNC4yNDctMi45MzcgNC44NjMgNS4wNiA5LjQzMiAxMC4yNzIgMTQuMjQ3IDE1LjIzNnptMzYuNTkzIDg3LjI0Yy01LjE4NSAxMC4zOTUtMTAuMDczIDIwLjc2NC0xNS41NTYgMzEuMTYtMS44NTIgNC40Mi00Ljg2NCA4LjE3NS02LjU0NCAxMy4yODQtNC44NCAxLjU1Ny05LjY1MyAyLjc2NS0xNC40OTMgNC4zNzJ2MTQuMDczYzMuMDYtMy4yNTcgNi40Ny03LjM4MiA5LjYzLTEyLjE5Ny40OTQgMi4xMjQuMjcgMy41NTctLjI3MiA1LjgyOC0xLjIzNCAyLjU0NC0zLjEzNiA0LjMyLTQuNjkyIDYuNDk1IDAgLjE0Ny0uNzkgMy41MDQtLjg4OCAzLjYwMy0uNzE2IDEuODI4LTIuNzY1IDIuNTkzLTMuNzc3IDIuODR2MTkuNTA2Yy41NjgtLjA3NCAxLjEzNi0uMiAxLjcwMi0uMzIgMTAuODQtMi40MiAyMS45MjgtNS44MyAzMC4xMDItMTQuMjk4LTUuMjYgMS4xODUtMTAuNDk2IDIuMTQ4LTE1LjgwNSAyLjAyNS0zLjkyNi0uMDk4LTguOTY0LS40NDUtMTEuNDMyLTIuNjkyIDkuNTgtMi41NjggMjAuMjk3LTIuNzY1IDI4Ljc0Mi03LjczIDEuMTM1LS42NjYgMi4yMjMtMS4zOCAzLjI4My0yLjEyMnYtMTYuNDdjLTIuMjQ3Ljk5LTQuNjQgMi02LjYxNiAyLjg2NCAyLjc0LTYuMTIzIDUuNDMyLTE0LjgxNSA2LjUxNy0xNC43OS4wNS4xOTYuMDc0LjM5NC4wOTguNTY4em0tMzIuMi04Ni42NDdjLTEuNDgtLjEyMi0yLjkzNi0uMzQ1LTQuMzkzLS41OTN2MTIuM2MzLjAzNiAzLjEzMyA2LjE5OCA2LjE0NSA5LjYwNSA4Ljk2IDMuMjYgMi42OTIgNy44NTIgMy4xMzcgMTEuNzc3IDQuNzE3IDMuNTMyIDUuODggNi41NDQgMTEuNzU1IDEwLjU5NSAxNy4zMSAxLjYyOCAyLjI0NyAzLjE2IDQuMzcgNC42MTYgNi41MlYxMi42ODdjLTIuMDI0LTEuNjA1LTQuMS0zLjEzNi02LjI5Ni00LjQ0NC01LjYzLTMuMzYtMTIuMzk2LTcuNjgtMTcuODI4LTguMjQ4IDQuMzIgNC45NCA5LjEzNiA5LjcwNCAxMC40MiAxNC4yOTctMS43MjguMS0xMS45NS01LjgyOC0xOC40OTUtNi4zOTZ6bTMyLjIgNDkuMjEyYzIuMzQ3IDMuNTA2IDQuNDk1IDcuMDg2IDYuNDcgMTEuNDU3LjA1IDUuMzMzLS4yMjIgMTAuOTg4LTEuMzYgMTUuOTc2LTEuNzUgMy4zMzMtMy40NTUgNi42NjYtNS4xMSAxMHYzNi4wMDJjLjI3MyAyLjI0Ni0uMDczIDQuODg4IDEuMDEzIDYuMTcyIDEuMTEyIDEuMjg1IDIuODkgMS42MyA1LjU4IDEuOTI3LS43MTUuNjE3LTMuNDggMS45LTYuNTkyIDMuMjZ2MTYuNDdjOC42MTctNi4xNSAxNS4yMTItMTUuMzM3IDIwLjI0OC0yNC41OTRsLTYuMjIzIDIuMzQ3Yy0uODg4LTEuNjMgMTAuOTg4LTguOTkgMTUuOTc2LTE5LjUwOCA0LjM5NS05LjI2MyA1Ljc3Ny0xOS42MDggOC43NC0yOS4zODUtMi4wMjUuMjItNC4wNSAxLjExLTUuODc1IDIuMTcyIDMuNzUyLTcuNTU2IDUuMDYtMTUuMzEgNC42OS0yMy4xODYtLjQ0NS05LjU4LTMuNTMtMTguNzY1LTcuMDYtMjcuOS0uMSA1LjAzNi0uNTQ1IDkuNDA3LTIuNjkzIDEzLjExLTMuMDEzLTE0LjQ5NC0xMS4wMTMtMjcuNjU1LTE5LjgyOC0zOS4zMzQtLjA1IDIuMjQ3LjM5NiA0LjQ5My0uMTcyIDYuODg4LTIuNjQzLTIuMDI0LTUuMTg3LTQuMjItNy44MDQtNi4yOTZ2NDQuNDIiIGZpbGw9IiMxYjE4MWEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xNjkuMTYzIDI0LjY2NGMtNS4zODMtMy42NTUtOS4xODctOS4yMzYtMTMuNzU1LTEzLjg1MyA1Ljk1LjA1IDEyLjQ3IDEuNDU4IDE4LjM3MiAzLjQzNCA0IDEuMzMyIDcuNDU2IDMuMTYgMTAuOTQgNi4zOTUgMS4xMSAyLjU2NyAyLjIyIDUuMTM2IDMuMzU2IDcuNzI3LTUuNTU2LTMuNzc4LTExLjEzNi03LjUzLTE3LjgwMy0xMC44NC0uMDUuNzQtLjA3NCAxLjUwNi0uMSAyLjI3MyA0LjQ0NiAzLjMzMyAxMC45MTUgNi45MTMgMTMuNzA2IDEwLjI0Ny02LjE1LjA1LTEwLjQ5NS0yLjU0NC0xNC43MTctNS4zODMiIGZpbGw9IiNmN2NlMTkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xOTMuMDE1IDE0LjU5Yy0zLjE4Ni0yLjIyMy02LjU2OC00LjQyLTEwLjI0Ny01LjYzIDMuMjYgNi41OTIgNi4wNzMgMTIuNzY1IDkuNTA3IDE4LjU2OCAyLjAyNCAzLjgwMyA2LjY5IDcuNzUzIDYuMzcgMTEuMjM1IDIuNTIgMi42OTIgNC43MTYgNS40NTcgNi44MTQgOC4wNzYuMjk2LTEuNDM1LjI3LTIuODY3LjE3Mi00LjMtNC4yOTUtNi4zOTMtOC40Mi0xMi42NC0xMi4xLTE5LjIzNS4wNS0uOTg4LjUyLTEuODI2LjkxNi0yLjUxOCAzLjE2IDQuMzIgNi4xNyA5LjA2MiA5LjUwNSAxMi45NFYyMy42NWMtMy42NTQtMy4wMS03LjAzNy02LjM3LTEwLjkzOC05LjA2TTE5Ni43OTIgNDEuNTUzYy0zLjUzLTIuOTM4LTcuOTUtNi4wNzQtMTIuMTczLTYuNDcgMS4yNiA2LjM3MiA3LjA2IDEwLjc0MiAxMC41OTIgMTYuMTI1IDIuNzY1IDQuMjIzIDUuNzA0IDcuNzA0IDguMzIgMTIuNjY4Ljc0My0uNzE3IDEuNDEtMS43OCAxLjc1NS0yLjk0LTQuMS00Ljk2My03LjU4LTkuNzAzLTEwLjc0Mi0xNC45MzctLjEyMi0uNzkyLjE5OC0xLjU4My42NjctMi4xIDMuNzA0IDQuNjQgNi43MTYgOS40NTYgMTEuMDg3IDEzLjk1LjE3Mi0xLjYwNS4wNzMtMy4zODItLjI0OC01LjA2Mi0yLjkxMy00LjMyLTUuNTA1LTguMTQ4LTkuMjYtMTEuMjM1TTIxNy44OCA0My44Yy0xLjcyOC02LjA3NS02LjU5My0xNS43MDQtOS4xMzYtMTYuNjE3LS4xNDggOC40NDQuMDUgMTYuMTk3IDEuNTggMjQuMSAxLjE2IDUuOTI1IDIuOTg4IDE1LjUwNyA2LjM5NiAxNi45NjItLjQ0NS03LjkyNS0zLjkyNy0xNi40Mi01LjM4My0yNC41MTguNTE4LS41NjggMS40MDctLjM3IDIuMzQ0LjM0NSAyLjM5NyA2LjQ5MyAzLjc1NiAxMi43NDIgNS4zODQgMTkuNDggMi44OS0uNjE1LjYxNy0xMy40MDUtMS4xODQtMTkuNzUyTTIyOS40ODUgNjguODRjLS4wNS00LjEtMS4yMzQtOC4zOTYtMi4yNzItMTIuMS0yLjA3MyA1LjA4NS01LjIzNCA5LjgyNy02LjIyIDE1LjIxLS45MTYgNC45ODctLjg2NiAxMy41OC41OSAxNS4yMSAyLjkxNC0zLjk1IDIuMjk3LTkuMjYgMy40MzMtMTMuODc3LjMyLS42NDIuNzktLjQ0NCAxLjE4NS0uMTQ4LjgxNiAyLjg0LjY5MiA1LjcwNCAxLjA4NyA4LjU2OCAyLjEyNC0uMjcgMi4yMjItOC41MiAyLjE5OC0xMi44NjRNMjEzLjA5IDY4LjU5Yy0xLjMxLTIuMTQ3LTIuNzY2LTQuNTE4LTQuNzktNS44NzUtLjk4OCA2LjM5NC0yLjI0OCAxMi44NC0xLjUwOCAxOS4yMzQuNjQ0IDUuMzgyIDMuNzA1IDEwLjE0NyA1LjU1NiAxNS4yNiAxLjc1NSAxLjExLjY2Ny0xMS4xODYgMC0xNi43NjYuNzQtLjI0OCAxLjQzMy0uMDUgMiAuNTY2IDEuOTUyIDcuMjEgMS4zMzMgMjEuMDE0IDEuODUyIDIxLjMxIDEuNTA4LTEuMDM1IDIuNTItMi4zOTUgMy43OC00LjA5Ny0uOTY1LTMuNTgyLTEuOTUyLTYuOTQtMi40Mi0xMC40OTUtLjQ5Ni0zLjUwNy0uMjk3LTcuMTEyLS40Mi0xMC42NjctMS4yNi0zLjA2Mi0yLjM5Ni01LjgwMy00LjA1LTguNDdNMjIyLjE3NiAxMTQuODRjMi41NDQtNS4wODUgNC0xMC42MTcgNS4xMS0xNi4yOTYtNC45MzcgNC4yOTYtMTAuNDkzIDkuOTc2LTE0LjYxNSAxNS44NzctMy41OCA1LjEzNi04IDEyLjAyNy04LjIyMiAxNi44OTIgNC44OS00LjU3IDguNzktMTIuNDk2IDEzLjQzMi0xOC40NzIuNDQ1LjE0OCAxLjIzNS40OTUgMS4zNTcgMS4yNi0xLjMzMyA0LjEtNC4wNzMgNy44MDMtNS43MjggMTEuODI4IDIuODE0LS42NjcgNi41NDMtNi44OSA4LjY2Ni0xMS4wODhNMjA5LjIzNyAxMDQuNTJjLjU2OC01Ljk1LTEuNjc4LTExLjc1NS0zLjk1LTE1LjQzNC0xLjYwNiA3LjA5LTQuNDk1IDEzLjc1NC02LjA1IDIwLjc5Mi0xLjIxIDUuNTMtMS42NzggMTEuNzA1IDAgMTYuODE0IDIuMzIyLTYuNDQzIDMuNDgyLTEzLjU1NSA0Ljk2My0yMC4zMi40OTUtLjM0NyAxLjA4Ny0uMTcyIDEuMjYuNDk1LjA0OCA0Ljk4Ni0uOTg4IDkuNzAyLTEuMDg3IDE0LjY5IDMuMTM2LTEuMzA4IDQuMjk4LTExLjE2MiA0Ljg2NC0xNy4wMzdNMTg2LjgxNyAxMzkuNTMyYzMuNzI4LTYuODg4IDUuMzM0LTE0LjQ5NSA2Ljg5LTIyLjQ5NS00LjE0OCA0LjItOS4xMTIgNy43My0xMi40NDYgMTIuNTk1LTMuNDggNS4xMTItNi43NCAxMi4xLTcuNzI4IDE2Ljg4OCAxLjkuMDI1IDcuMzMzLTkuMzU3IDExLjI2LTEzLjc4Ljc0LjQyMyAxLjAzNy4zMjQuOTEzIDEuNTA4LTMuNDU3IDcuNjgtMTIuMjk3IDE3LjI4NC0xMi4xNzMgMjAgMy44NTMtMS41NTUgMTAuMTI0LTguOTEzIDEzLjI4NS0xNC43MTZNMTk0Ljg2NyAxNTUuMTYzYzQuMzItMy43NTMgOC4yNDgtNi44NjUgMTEuNjgtMTIuNjk0LTUuODc4LjgxNS0xMi4xMjQgMy4zMzMtMTcuNjMgNi4yMjMtNS44NTQgMy4wNjMtMTEuNDM0IDYuODY2LTE2LjEyNiAxMS4zMzQgMS44OCAyLjY0NCAxNC45OS03LjQwOCAyMi40OTUtMTEuMTYyLjk5LjI1IDEuNDU4IDEuMDE0IDEuMTg2IDEuNzU0LTUuODUgNC4yMjMtMTEuNzc3IDcuNTMtMTcuOCAxMC45MTIgNC40NjcuODE2IDExLjc1LTIuNDkyIDE2LjE5Ny02LjM3TTE1MS43OCAxNTkuMzZjNC40Mi0zLjU1NSA4LjQ0NC03LjI4MyAxMC43NjQtMTMuMTg0LTUuODI3Ljg4OC0xMi4xNSAzLjM1Ni0xNy40ODMgNi41NC00Ljg4OCAyLjkxNi0xMy44NSAxMC4yLTEyLjU5IDExLjQzNi45MzcgMS43NzYgMTguMjctMTIuNzkyIDE5LjQ4LTExLjI2IDEuOTAyIDEuMDYzLTE1LjMzNCAxMS43MDMtMTUuMjEgMTQuMDIzIDQuMzQ3LS4wNzIgMTAuNjY4LTQuMDUgMTUuMDQtNy41NTVNMTUyLjcxNyAxODAuODY4YzcuNjU1LS40NDUgMTUuMzU4LTIuNzQgMjIuMTc0LTYuMTI0LTcuODI3LTEuNzA0LTE1LjU1NS0zLjI4NC0yMy40MzMtMy41MzItNS4xMzYtLjE3Mi0xNi4yNzMuNjY3LTE1LjIxIDIuMjQ4LS4yNzIgMi4xMjQgMzAuOTM4LS44NCAyOC44OSAyLjAyNS45ODcgMi44MTctMjAuNTQ0IDEuNjU0LTMxLjA2NCAxLjYwNS0uMjcgMi41OTQgMTIuMjk4IDQuMTUgMTguNjQ0IDMuNzc4IiBmaWxsPSIjZmJkMTE4IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMzguNjYzIDU3LjExYy0yLjM0NyAzLjUwNi00LjQ5NSA3LjA4Ni02LjQ3IDExLjQ1Ny0uMDUgNS4zMzMuMjIzIDEwLjk4OCAxLjM1OCAxNS45NzYgMS43NTQgMy4zMzMgMy40NTggNi42NjYgNS4xMTMgMTB2MzYuMDAyYy0uMjQ4IDIuMjQ2LjA3MyA0Ljg4OC0xLjAxNCA2LjE3Mi0xLjExIDEuMjg1LTIuODkgMS42My01LjU4IDEuOTI3LjcxNS42MTcgMy40ODIgMS45IDYuNTkzIDMuMjZ2MTYuNDdjLTguNTk0LTYuMTUtMTUuMjEtMTUuMzM3LTIwLjI0OC0yNC41OTRsNi4yMjIgMi4zNDdjLjg4OC0xLjYzLTEwLjk4OC04Ljk5LTE1Ljk3Ni0xOS41MDhDNC4yOSAxMDcuMzYgMi45MSA5Ny4wMS0uMDggODcuMjM0YzIuMDI0LjIyIDQuMDUgMS4xMSA1LjkgMi4xNzJDMi4wNyA4MS44NS43MzYgNzQuMDk3IDEuMTA2IDY2LjIyYy40NDYtOS41OCAzLjUzLTE4Ljc2NSA3LjA2Mi0yNy45LjEgNS4wMzYuNTcgOS40MDcgMi42OTIgMTMuMTEgMy4wMzYtMTQuNDk0IDExLjAxMi0yNy42NTUgMTkuODI2LTM5LjMzNC4wNSAyLjI0Ny0uMzk0IDQuNDkzLjE3MyA2Ljg4OCAyLjY0Mi0yLjAyNCA1LjE4NS00LjIyIDcuODAzLTYuMjk2em0wIDM3LjQzM2M1LjE4NSAxMC4zOTYgMTAuMDk4IDIwLjc2NSAxNS41NTYgMzEuMTYgMS44NSA0LjQyIDQuODYzIDguMTc2IDYuNTQzIDEzLjI4NSA0Ljg0IDEuNTU3IDkuNjUzIDIuNzY1IDE0LjQ5MyA0LjM3MnYxNC4wNzNjLTMuMDYtMy4yNTctNi40Ny03LjM4Mi05LjYwNS0xMi4xOTctLjUxNyAyLjEyNC0uMjcgMy41NTcuMjQ4IDUuODI4IDEuMjM1IDIuNTQ0IDMuMTM1IDQuMzIgNC42OTIgNi40OTUgMCAuMTQ3Ljc5IDMuNTA0Ljg5IDMuNjAzLjcxNSAxLjgyOCAyLjc2NCAyLjU5MyAzLjc3NiAyLjg0djE5LjUwNmMtLjU2Ni0uMDc0LTEuMTM1LS4yLTEuNzA0LS4zMi0xMC44MzgtMi40Mi0yMS45LTUuODMtMzAuMS0xNC4yOTggNS4yODUgMS4xODUgMTAuNDk1IDIuMTQ4IDE1LjgwNCAyLjAyNSAzLjkyNS0uMDk4IDguOTY0LS40NDUgMTEuNDMyLTIuNjkyLTkuNTgtMi41NjgtMjAuMjk3LTIuNzY1LTI4Ljc0LTcuNzMtMS4xMTMtLjY2Ni0yLjIyNC0xLjM4LTMuMjg1LTIuMTIydi0xNi40N2MyLjI0Ni45OSA0LjY0MiAyIDYuNjE3IDIuODY0LTIuNzQtNi4xMjMtNS40MzItMTQuODE1LTYuNTItMTQuNzktLjA0OC4xOTYtLjA3NC4zOTQtLjA5Ny41Njh6TTcwLjg2IDcuODk3YzEuNDgzLS4xMjIgMi45NC0uMzQ1IDQuMzk2LS41OTN2MTIuM2MtMy4wMzYgMy4xMzMtNi4xOTcgNi4xNDUtOS42MDUgOC45Ni0zLjI1OCAyLjY5Mi03Ljg1MiAzLjEzNy0xMS43NzcgNC43MTctMy41MzIgNS44OC02LjU0NCAxMS43NTUtMTAuNTY4IDE3LjMxLTEuNjU0IDIuMjQ3LTMuMTg2IDQuMzctNC42NDIgNi41MlYxMi42ODdjMi4wMjMtMS42MDUgNC4wOTgtMy4xMzYgNi4zMi00LjQ0NEM1MC41OSA0Ljg4NCA1Ny4zNTYuNTY0IDYyLjc4Ny0uMDA0Yy00LjMyIDQuOTQtOS4xMzUgOS43MDQtMTAuNDIgMTQuMjk3IDEuNzMuMSAxMS45NS01LjgyOCAxOC40OTUtNi4zOTZ6bTQuMzk2IDEzNS40NjNjMS45NS42NDIgMy45MDMgMS4zNTcgNS44NTMgMi4xNzIgMTAuOTg3IDQuNjE3IDIxLjQwNyAxMi4zMjQgMjguNzQgMjEuNTA4LjIyMyA1LjE2Mi4yNzMgMTAuMzIuNTIgMTUuNDgzLTIuODE1IDEuOTUtNS4zMSA0LjUxNy04LjU5NCA1LjUzLTIuMzcuNzQtNS4wODYuNTItNy4yMS0uNjY3LS42MTgtMy40OCA1LjgyNy0zLjU4IDUuMjEtNS44NzctOC4xNzMgMS45MjYtMTYuNDk1IDMuMzgyLTI0LjUyIDJ2LTE5LjUwNmMuMzcuMS41OTMuMTIzLjU5My4xIDEuMTM1LjU0IDMuMjYgMi4xNyA0IDMuMDM1IDIuNDItLjA3NiA2LjAyNS40NCA1LjE4NS0uNzkyLS41Mi0uMzQ0LTQuNjY3LTMuNDgzLTkuNzgtOC45MTV6bTAtMTM2LjA1NmM0Ljc5LS44NjMgOS40MzQtMi4yNDcgMTQuMjQ4LTIuOTM3LTQuODY0IDUuMDYtOS40MDggMTAuMjcyLTE0LjI0OCAxNS4yMzZ2LTEyLjMiIGZpbGw9IiMxYjE4MWEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMTYuODg4IDE0Ni4yMjVjLTQwLjY2OC0uNDk0LTgxLjI0LTIzLjUzMy04MS42ODMtNTkuMTY0LS40OTMtNDAuMSA0MC45NC02MS4xMzcgODEuMDE2LTYwLjUyIDM5LjY4LjU5MiA4NC44MiAxOS4xODcgODMuNzMyIDYxLjUzMy0xLjA2IDQwLjQ5Ni00NS45IDU4LjU5NS04My4wNjQgNTguMTUyIiBmaWxsPSIjZmJkMTE4IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTE2Ljg4OCAxNDYuMjI1Yy00MC42NjgtLjQ5NC04MS4yNC0yMy41MzMtODEuNjgzLTU5LjE2NC0uNDkzLTQwLjEgNDAuOTQtNjEuMTM3IDgxLjAxNi02MC41MiAzOS42OC41OTIgODQuODIgMTkuMTg3IDgzLjczMiA2MS41MzMtMS4wNiA0MC40OTYtNDUuOSA1OC41OTUtODMuMDY0IDU4LjE1MnoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFiMTgxYSIgc3Ryb2tlLXdpZHRoPSI2LjE3MzE3OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjIuNjEzIi8+PHBhdGggZD0iTTM1LjUyNyA4MC4zNDVjMS4yMzQtNS4xNiAzLjQ4LTExLjE2IDQuNzE2LTE2LjMyIDExLjExMiA5LjY1NCA1MS4xMzggMjIuMTcyIDc4LjY3IDIyLjcxNSAyNi40MjIuNDk1IDUyLjQ5NS03LjM1NyA3Ni45OS0xOC44NGwzLjcwNSAxOS4xNjNjLS43OSA1LjAxMi0xLjU1NiAxMC4wNzQtMi4zNDUgMTUuMTEtMjAuNDcgOS4xMzYtNTEuNDg0IDE2LjM3Mi03OC4wMyAxNS44MDMtMjcuOTI2LS41OTItNTguMjk4LTYuODg4LTgxLjY4LTE5LjMzM2wtMi4wMjYtMTguMjk4IiBmaWxsPSIjMWIxODFhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTIxLjgwMiA3NS4wNmMxLjg1LjI3MiAzLjY4Ljc0MiA1LjUwNiAxLjM2LjMyLS43MTcuNjE3LTEuNDM0Ljg5LTIuMTc1LjE5Ny0uNTE4LjM5NC0xLjAzNy41NjYtMS41OC4wNS0uMTI0LjA3NS0uMjIyLjEyNC0uMzQ2LjQyLTEuMjM1LjgxNi0yLjUxOCAxLjEzNi0zLjc4LjgxNS0zLjEzNSAxLjI2LTYuMzIgMS4xODQtOS4yMzMtLjEtMi43NjYtLjUxNy01LjUwNy0xLjE4NC04LjE5OC0uMzItMS4yNi0uNjkyLTIuNTQ1LTEuMTM2LTMuNzgtLjA1LS4xMjMtLjA3My0uMjIyLS4xMjQtLjMyLS4xNzItLjUyLS4zNy0xLjAzNy0uNTY3LTEuNTU3LS41NjgtMS40My0xLjIxLTIuODYyLTEuOTUtNC4yNy0xLjQ4My41OTItMi45NjQgMS4wMzctNC40NDUgMS4zNTctLjMyLjA3NS0uNjE4LjEyNC0uOTM4LjItLjAyNyAwLS4wNSAwLS4wNzQuMDIzaC0uMDc1Yy4wMjUuMDUuMDUuMTI0LjA3NS4xNzMuMDI1LjA1LjA0Ny4wNzMuMDc0LjEyMy4zMi42NjcuNjQgMS40My45MzggMi4yNDcgMS42MDUgNC40MiAyLjU5IDEwLjU2OCAyLjYxNyAxMy45MjUgMCA0LjM5Ni0xLjA2MyA4LjkxNS0yLjYxOCAxMy4xNi0uMjk4LjgxNi0uNjE4IDEuNjMtLjkzOCAyLjQyMiAwIC4wMjUtLjAyNy4wNS0uMDI3LjA5OGguMDI3bC45MzguMTQ4TTExMi4yMiA3Mi4zOTNjLS4wNzMtLjIyLS4xNDgtLjQxOC0uMjIyLS42NC0uMTk2LS41NDUtLjM5NS0xLjExMi0uNTkzLTEuNjU2LTEuMjgyLTMuNzUzLTIuMjItNy41MzItMi4zMi0xMS4zMzQtLjA3NS0zLjkuNzY2LTkuMDM2IDIuMzItMTMuNDU2LjE5OC0uNTQ0LjM5Ny0xLjAzOC41OTMtMS41NTYuMDc0LS4xNzMuMTUtLjM0NS4yMjMtLjUxOC4wNzUtLjE3My4xNzMtLjMyLjI0OC0uNDkzLS4wNzUtLjAyNy0uMTczLS4wNS0uMjQ3LS4wNS0uMDczLS4wMjYtLjE0OC0uMDI2LS4yMjItLjA1LS4xOTYtLjA1LS4zOTUtLjA3NS0uNTkzLS4xMjQtLjkzNy0uMjIzLTEuODUyLS40NDQtMi44MzgtLjc5LS40NDQtLjE3My0uOTQtLjM3LTEuNDU4LS41OTMtLjgxNSAxLjc3OC0xLjUzIDMuNTMtMi4xIDUuMjYtLjI3Ljc2NC0uNTE4IDEuNTMtLjcxNSAyLjI5Ni0uMjk3IDEuMDEtLjUyIDItLjcxNiAyLjk4Ni0uNDk2IDIuMzk2LS43NDMgNC43NjctLjcxNyA3LjIxIDAgMi4wMjYuMjcyIDQuMDUuNzE2IDYuMDc1LjE5Ni45MzguNDQzIDEuODguNzE1IDIuNzkyLjE5Ny43NjUuNDQ0IDEuNTU2LjcxNSAyLjMyLjY2NyAyLjA3NSAxLjQ1NyA0LjE1IDIuMjIzIDYuMi40NDQtLjE1LjkxNC0uMjk3IDEuMzM0LS4zOTcuOTg2LS4yOTYgMS45LS41MTggMi44MzgtLjY5LjE5OC0uMDUuMzk3LS4wNzYuNTkzLS4xMjUuMDc0IDAgLjE1LS4wMjQuMjIzLS4wMjQuMTI0LS4wMjYuMjQ4LS4wNS4zNzItLjA1LjE5OC0uMDI1LjM5My0uMDc0LjYxNi0uMDk4LS4yMjMtLjQ5NS0uNDE4LS45ODgtLjYxNi0xLjUwNy0uMTI0LS4zMi0uMjQ4LS42NjUtLjM3LS45ODciIGZpbGw9IiMxYjE4MWEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMTcuMjgzIDc0LjY0Yy42NjYgMCAxLjMxLjAyNSAyLjEyNC4wNzUuNDkzLTEuMzgzLjkzNy0yLjgxNSAxLjM4My00LjI0Ny4wMjUtLjA3NS4wNDctLjE1LjA3NC0uMjIzLjM0NC0xLjE2LjY2Ny0yLjMyLjkzOC0zLjQ4LjU5LTIuNDk2Ljk2Mi01LjAxMy45MzgtNy41MzMgMC0yLjc2NS0uMzItNS41NTUtLjkzOC04LjM0NS0uMjctMS4yMS0uNTctMi40NDYtLjkzOC0zLjY1NS0uMDI3LS4wNzUtLjA1LS4xNDgtLjA3NC0uMjIzLS40Mi0xLjM1OC0uOTE1LTIuNjktMS40NTgtNC4wMjUtLjc0LjA3NC0xLjM4My4xNDgtMi4wNS4xNzItMS4xMS4wNS0yLjE3My0uMDI0LTMuNDMtLjE5Ny0uNDQ3IDEuMjg0LS44NjcgMi42MTctMS4yNiAzLjkyNy0uMTI0LjQ3LS4yNDguOTEzLS4zNyAxLjM1N2wtLjIyNC44OWMtLjIyMi45MTMtLjQyIDEuODI2LS41OTMgMi43NC0uNDIgMi4zNDYtLjY0IDQuNjY3LS41NjYgNi45OS4wMjMgMS42NzcuMjQ1IDMuMzMyLjU2NSA0Ljk2LjE3NC44NC4zNyAxLjY4LjU5MyAyLjUyLjA3NC4yOTYuMTUuNTY4LjIyMy44NGwuMzcyIDEuMjZjLjY0IDIuMDk3IDEuMzU3IDQuMjIgMi4wOTggNi4zNDYuOTg3LS4xIDEuODAyLS4xNSAyLjU5My0uMTVNMTI4Ljg4OCA0MC4wN2MtLjA1LjAyNi0uMDczLjA1LS4xMjQuMDc1LS4xNzIuMS0uMzcuMTk4LS41NjcuMjk2LS4yMjIuMS0uNDQ1LjItLjY5Mi4yOTcuMjQ3LjQ5NS40Ny45NjQuNjkyIDEuNDM0LjE5OC4zOTUuMzk1Ljc5LjU2NyAxLjE4Ni4wNS4wNzMuMDc1LjE0OC4xMjQuMjIuNDIuODY3Ljc5IDEuNzA1IDEuMTM2IDIuNTQ0LjgxNSAxLjkwMyAxLjQzMiAzLjgwNCAxLjg1IDYuMTI0bDIuMDUtMS4yODQgMS44My0xLjExTDEzOCA0OC40NGwxLjI2LS43NjRjLjAyMy0uMDI0LjA3My0uMDczLjE0Ny0uMS0uNDItLjgxMy0uODg4LTEuNjAzLTEuNDA3LTIuMzkzLS42NjctMS4wMTItMS40MDgtMi0yLjI0Ny0yLjkxNC0uNTctLjY0My0xLjE4Ni0xLjI2LTEuODI4LTEuODUzLS43MTYtLjY0Mi0xLjQ4Mi0xLjI2LTIuMjk2LTEuODUyLS41Ny4yOTYtMS4wOS42MTgtMS42MDYuODg4LS4zNy4yMjMtLjc0LjQyLTEuMTM2LjYxOE0xMDUuMDEgMzguMjJjMS4wODYuNjY3IDIuMjk3IDEuMjYgMy41NTcgMS43NzcuOTM3LjM3IDEuOS43MTYgMi44MzguOTYzLjE5OC4wNzUuMzk3LjEyNC41OTMuMTczLjA3NC4wMjQuMTUuMDI0LjIyMy4wNS4xMjQuMDUuMjQ4LjA3My4zNzIuMDk4IDEuNDU2LjM3MiAyLjkzNy41NyA0LjMyLjU3aC4zN2MxLjE4Ni0uMDI2IDIuMzQ2LS4xOTggMy41MDgtLjQ0NS4wMjUgMCAuMDQ3LS4wMjUuMDc0LS4wMjUuMzItLjA3NS42MTctLjE0OC45MzgtLjIyMyAyLjEyMy0uNTkyIDQuMTk2LTEuNDggNi4zOTUtMi40OTMuMTk4LS4xLjM5NS0uMTk3LjU2Ny0uMjcyLjA1LS4wMjUuMDc1LS4wNS4xMjQtLjA3NS4zNy0uMTcyLjc2NS0uMzcgMS4xMzYtLjU2Ni4wNzMtLjAyNS4xNDgtLjA3NC4yMjMtLjEtLjA3NS0uMDQ3LS4xNS0uMDk3LS4yMjMtLjE0Ni0uMzQ1LS4yMjMtLjc0LS40NDUtMS4xMzYtLjY2Ny0uMDUtLjAyNS0uMDczLS4wMjUtLjEyNC0uMDUtLjE3Mi0uMS0uMzctLjE5OC0uNTY3LS4yOTYtMi0uOTg3LTQuMTUtMS43NTMtNi4zOTUtMi4xNzMtLjMyLS4wNS0uNjE4LS4xMjItLjkzOC0uMTQ4LS4wMjctLjAyNS0uMDUtLjAyNS0uMDc0LS4wMjUtMS4xNjItLjE5Ny0yLjI5OC0uMjcyLTMuNTA3LS4yNzJoLS4yNDdjLTEuNTMgMC0zLjAxMy4xMjQtNC40NDQuMzk1bC0uMzcuMDc1Yy0uMDc1LjAyNC0uMTUuMDI0LS4yMjQuMDUtLjE5Ni4wMjQtLjM5NS4wNzQtLjU5My4xMjItLjk2Mi4yMjItMS45LjUxOC0yLjgzOC44NC0xLjIxLjQ0NS0yLjQyLjk4OC0zLjU1NyAxLjYzLS4yNDcuMTIzLS40OTQuMjctLjcxNS4zOTUtLjEyNC4wNzMtLjE5OC4xMjQtLjMyMi4xNzMuMTI0LjA5OC4xOTguMTQ3LjMyMi4xOTguMjIuMTc0LjQ2OC4zMi43MTUuNDdNMTM5Ljg3NyA0OC42NGMtLjYxNy40Mi0xLjIzNC44NC0xLjg3NyAxLjIzNS0uNzQuNDY4LTEuNTA1LjkzNy0yLjI0NyAxLjQwOC0uNjE3LjM0NC0xLjIzNi43MTQtMS44MjggMS4wODUtLjU2OC4zNDUtMS4xMS42OTItMS42NzggMS4wMzctLjA1LjAyNC0uMS4wNzQtLjEyNC4xLjQ3IDMuMzA3LjYxNyA2Ljc2NC4yOTcgMTAuMTcyLjA3Mi4wMjUuMDk3LjAyNS4xNDcuMDVsMS4zNTguNTkyIDEuODI4LjgxNSAyLjI0Ny45NjIgMi42OSAxLjE2Yy44MTUtMi4zOTQgMS4yODUtNC44NjQgMS4zNi03LjM4MnYtMS45MDJjLS4xLTMuMTYtLjgxNS02LjM3LTIuMTczLTkuMzMzTTEzNS43NTMgNjYuNDkyYy0uNjE3LS4yOTYtMS4yMzYtLjU5NC0xLjgyOC0uODY0LS41NDItLjI0Ny0xLjA4Ni0uNDkzLTEuNjA1LS43NDItLjM3IDMuMDg3LTEuMTM2IDYuMTI0LTIuMjk2IDkuMDE0LS4zNDUuODQtLjcxNiAxLjY4LTEuMTM2IDIuNTItLjAyNC4wNzItLjA3My4xNDctLjEyNC4yNDUtLjAyNC4wNzUtLjA3My4xMjMtLjEuMTk4LjAyNy4wMjUuMDc2LjAyNS4xLjA1LjA1LjAyNC4xLjAyNC4xMjQuMDczLjM5NS4xNS43NjUuMjk3IDEuMTM2LjQ3LjgxNS4zNDYgMS42My43NCAyLjQ5MyAxLjE4NS40OTUtLjM5NS45NjQtLjc5IDEuNDA4LTEuMjEuNjQyLS41NjcgMS4yMzYtMS4xODUgMS44MjgtMS44MjYuODQtLjk0IDEuNTgtMS45MjcgMi4yNDctMi45NC44OS0xLjM1NiAxLjY1NS0yLjgxMyAyLjI0Ny00LjI5NS0uNzE2LS4yNS0xLjQ4Mi0uNTQ1LTIuMjQ3LS44NjUtLjc0LS4zMi0xLjUwNS0uNjY2LTIuMjQ3LTEuMDEzTTk3LjY1MiA0OS4zNTZjLjY0My4zMiAxLjI4NC42MTcgMS45LjkzNy43MTcuMzcgMS40MDguNzE2IDIuMSAxLjA2My40NDQtMi4yOTYgMS4wODctNC41MiAxLjkyNy02LjY0My4yMjItLjU2OC40NDMtMS4xMzYuNzE1LTEuNzA0LjIyLS40OTQuNDQ0LS45ODcuNzE1LTEuNDgyLjE5OC0uMzcuMzk1LS43NjUuNjE4LTEuMTM2LS4yMjMtLjEyNC0uNDItLjIyLS42MTgtLjM0NS0uMjQ3LS4xMjMtLjQ5NC0uMjcyLS43MTUtLjM5Ni0uMjQ3LS4xNDYtLjQ5My0uMzItLjcxNi0uNDY3LS4zNDctLjIyMy0uNjY4LS40NDYtLjk5LS43MTYtMS4wODYuNzktMi4wOTggMS42My0zLjAzNyAyLjU0Mi0uNjkuNjY2LTEuMzA4IDEuMzU4LTEuOSAyLjEtLjU0NC42NjYtMS4wNjIgMS4zNTctMS41MzIgMi4wNzMtLjU2Ny44NjQtMS4wODUgMS43NTMtMS41NTUgMi42OTIuNTIuMjIgMS4wMzguNDY4IDEuNTU2LjcxNi41Mi4yNDcgMS4wMTMuNTIgMS41MzIuNzY2TTEyOC44ODggNzguNjE2Yy0uMDUtLjAyNC0uMDczLS4wNS0uMTI0LS4wNS0uMTcyLS4wNzQtLjM3LS4xNDctLjU2Ny0uMjIyLTIuMTI0LS43OS00LjI0OC0xLjM1OC02LjM5NS0xLjY4LS4zMi0uMDQ4LS42MTgtLjA5Ny0uOTM4LS4xNDdoLS4wNzRjLTEuMTg3LS4xNDgtMi4zMjItLjE5Ny0zLjUwNy0uMjIyLTEuNTU2IDAtMy4xNi4xMjQtNC42OS4zNDYtLjEyNSAwLS4yNS4wMjUtLjM3Mi4wNS0uMDczIDAtLjE0OC4wMjUtLjIyMi4wMjUtLjE5Ni4wNS0uMzk1LjA3My0uNTkzLjEyNC0uOTM3LjE3LTEuOS4zOTMtMi44MzguNjY1LTEuMTg2LjMyLTIuMzcuNzE2LTMuNTU3IDEuMTg2LS4yNDcuMDk4LS40OTQuMTk4LS43MTUuMjk2LS4yNDcuMS0uNDkzLjE5OC0uNzE2LjI5Ny0uMTc1LjA5OC0uMzQ3LjE3Mi0uNTIuMjQ2LjE3My4xMjMuMzQ1LjI0Ny41Mi4zNDUuMjIyLjE3My40NjguMzIuNzE1LjQ3LjIyLjE0Ny40NjguMjk2LjcxNS40NDUgMS4xMzcuNjY2IDIuMzQ2IDEuMjM0IDMuNTU3IDEuNzAzLjkzNy4zMjIgMS45LjYxNyAyLjgzOC44NjRsLjU5My4xNDhjLjA3NCAwIC4xNS4wMjYuMjIzLjA1LjEyNC4wMjUuMjQ4LjA1LjM3Mi4wNzMgMS41My4yOTYgMy4xMS40NDUgNC42OS4zOTYgMS4xODYgMCAyLjM0Ni0uMDc1IDMuNTA4LS4yNzJoLjA3NGMuMzItLjA1LjYxNy0uMS45MzgtLjE3MiAyLjE5Ni0uNDIgNC4zNDYtMS4xNiA2LjM5NS0yLjIuMTk4LS4wOTcuMzk1LS4xOTYuNTY3LS4zMi4wNSAwIC4wNzUtLjAyNC4xMjQtLjA1LjM5NS0uMTk1Ljc2NS0uNDE4IDEuMTM2LS42NC4zOTUtLjI0Ny43NjYtLjQ5NSAxLjEzNS0uNzY2LS4zNy0uMTczLS43NC0uMzQ3LTEuMTM2LS41Mi0uMzctLjE0Ny0uNzY1LS4zMi0xLjEzNi0uNDY4TTEwNC4yOTUgNzcuMjgzYy4yMi0uMS40NDQtLjE5OC43MTUtLjI5Ny4yMjMtLjA3NC40Ny0uMTcuNjkzLS4yNy0uMjIzLS41Mi0uNDctMS4wNjMtLjY5My0xLjYzLS4yNDctLjU0NS0uNDk0LTEuMTEtLjcxNS0xLjY4LS4yNDctLjU5Mi0uNDkzLTEuMjEtLjcxNi0xLjgyNy0uNzkyLTIuMDc1LTEuNTA4LTQuMzQ3LTItNi44NjVsLTIuMDI3Ljk2Mi0xLjkuODY0LTEuNTMyLjcxNy0yLjI5NiAxLjA2M2MuNjIgMS41MDUgMS4zODMgMi45NjMgMi4yOTcgNC4zNDUuNDcuNzE2Ljk5IDEuNDMyIDEuNTMyIDIuMTI1LjU5My42OSAxLjIzNCAxLjM4MiAxLjkgMi4wNS42Mi41OSAxLjI2MiAxLjE1OCAxLjkyOCAxLjcuNTE3LS4yMiAxLjIxLS41NjUgMi4xLS45Ni4yMjItLjEuNDY4LS4yLjcxNS0uMjk3TTk3LjY1MiA2NS4yNTdsMS45LS44ODggMS41OC0uNzQyYy4wNzYtLjA1LjE1LS4wNS4yNDgtLjA1LS41OTItMy41MDYtLjUxNy03LjMzMy4wNzUtMTEuMDYyLS4wNSAwLS4xMjQtLjAyNC0uMTk4LS4wNWwtMS43MDQtLjg0LTEuOS0uOTM3LTEuNTMyLS43NjYtMi4wMjQtLjk4OGMtMS4yNiAyLjkzNy0xLjk1IDYuMDc1LTIuMDczIDkuMTg1djEuNjA3Yy4wOTggMi41NDIuNTQ0IDUuMDg1IDEuNDA2IDcuNDhsMi42OS0xLjIzNCAxLjUzMi0uNzE2IiBmaWxsPSIjMWIxODFhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNjUuMjMgMTA0LjAyNGwtMy4zMDctMS4yODQgMS45NzQtMTEuMTM2LTcuOTI1IDkuMTM2LTEuMjM2LS40Ny4yLTEyLjA3NC02LjA1MiA5LjUzMkw0NS42IDk2LjQ3bDExLjI2LTE3LjczIDEuODAzLjY5LS44MTUgMTQuNTQ1IDkuMDM3LTExLjM4NCAxLjgwMy42OTMtMy40NTcgMjAuNzRNNzAuNjQgMTAwLjc0bDMuMTYuODY1YzAgMS4yMzUuNzkgMi4wNzQgMi40NDUgMi40OTcgMS4xNi4zMiAyLjA3NC4xNyAyLjc0LS40NzMuNjkyLS42MTggMS4yMzYtMS42NzggMS42My0zLjIzNWwzLjM1OC0xMi40NDQgMy41My45NC0zLjMwNyAxMi4zNDZjLS43MTYgMi42NDItMS44MDMgNC40Ny0zLjI2IDUuNDMyLTEuNDguOTg4LTMuNDU2IDEuMTM2LTUuOTI2LjQ3LTEuNjU0LS40NDYtMi44NjUtMS4yMS0zLjY1NC0yLjM0Ny0uNzktMS4xMzQtMS4wMTItMi40OTQtLjcxNi00LjA1TTk3LjQ1NSA4Ni40MnYuNzRjLS4xLjUyLS4zNDYuOTM3LS43NjUgMS4yMzMtLjQ0NS4zNDctLjk0LjQ3LTEuNDgzLjM5Ny0uNTQzLS4wNzQtLjk4Ny0uMzQ2LTEuMzEtLjc5Mi0uMzQ0LS40MTgtLjQ2OC0uOTEzLS4zOTMtMS40NTUuMDczLS41NjguMzItLjk4OC43OS0xLjMzNC40Mi0uMzQ2LjkzOC0uNDcgMS40ODItLjM5Ni41NDMuMDc0Ljk4Ny4zNDYgMS4zMDguNzkuMTk3LjI0Ny4zMi41Mi4zNy44MTV6bTAgMjAuOTY0bC0zLjg3OC0uNTY4LTIgMy45NS00LjAyNC0uNTY4IDkuOTAyLTE3LjUzdjYuNTE3bC0yLjQ0NiA1LjAxMyAyLjQ0NS4zNDV6bTYuOTM4LTIxLjM2Yy41NjguMDczLjk4OC4zNDUgMS4zMzQuNzkuMzIuNDQ1LjQ0NC45MzguMzcgMS40ODItLjA3NC41NDMtLjMyLjk4Ny0uNzY1IDEuMzA4LS40NDYuMzItLjk0LjQ0NS0xLjQ4My4zNy0uNTQzLS4wNzQtLjk4Ny0uMzItMS4zMzQtLjc0LS4zMi0uNDQ0LS40Ny0uOTM4LS4zOTUtMS40ODIuMS0uNTY4LjM0Ny0uOTg4Ljc5Mi0xLjMzMy40NDQtLjM0Ny45MzctLjQ3IDEuNDgtLjM5NnptLTYuOTM4IDEuMTM2di0uNzRjLjA1LjIyLjA1LjQ0NCAwIC42NjV2LjA3NXptNC4wMjUgMjQuOTlsLS45MTMtNC4zNDctMy4xMTItLjQydi0yLjg0bDIuNDQ1LjM0Ny0xLjM4NC03Ljg3OC0xLjA2IDIuMTczdi02LjUxOGwxLjEzNS0yIDEuNTguMjIgNS4zMSAyMS44My00LS41NjhNMTExLjY1MyAxMTMuMTE0bC4zNy0yMC41OTUgMy42MzIuMDQ4LS4zMjIgMTcuMzU3IDkuMzA4LjE1LS4wNDggMy4yNi0xMi45NC0uMjJNMTMxLjM1NyAxMTMuMTM2TDEyOS4yMSA5Mi42NGwzLjYzLS4zNyAxLjgyNyAxNy4yNjIgOS4yNi0uOTkuMzIgMy4yMzQtMTIuODkgMS4zNk0xNTMuNTggMTA5LjcyOGwtMi43OS41OTMtNC4yOTUtMjAuMTIzYzIuNjktLjcxNiA0LjU5Mi0xLjE2IDUuNjc4LTEuMzgyLjQ5NS0uMTI0Ljk2My0uMTk4IDEuNDA4LS4yMjJ2My4wNjJjLS4yNy4wMjQtLjU2OC4wNS0uODYzLjEyNC0uNTY4LjEyMi0xLjIzNi4yOTUtMi4wMjUuNTE2bDEuMDEyIDQuODE2Yy41NjgtLjA3MyAxLjEzNi0uMTcyIDEuNzUzLS4zMi4wNSAwIC4wNzUgMCAuMTI0LS4wMjd2Mi44NGMtLjM0NS4wNzQtLjc2NC4xNzItMS4yODQuMjk4bDEuMjg1IDZ6bTMuMzYtLjcxNmwtMy4zNi43MTZ2LTMuODI1bC4xNDguNjY2Yy43NC0uMSAxLjMzMy0uMTc1IDEuNzgtLjI3NCAxLjU4LS4zNDQgMi42OS0uODYzIDMuMzA4LTEuNTU1LjU5Mi0uNjkuNzY1LTEuNjguNDkzLTIuOTM2LS4yNS0xLjEzNi0uNzY2LTEuOS0xLjUzLTIuMjczLS43OTItLjM5My0yLjAyNy0uMzkzLTMuNjgtLjA1LS4xNS4wMjctLjMyLjA3Ni0uNTIuMTI1di0yLjg0YzIuMjQ4LS40OTIgMy4xODctMS42MDUgMi44MTUtMy4zMzMtLjI5NS0xLjMzNC0xLjIzNC0xLjkyNS0yLjgxNC0xLjc3N3YtMy4wNjJjMS40NTctLjE1IDIuNzQuMDI0IDMuNzguNTE3IDEuMzU3LjYxOCAyLjIyIDEuNzU0IDIuNTY3IDMuNDMzLjM0NiAxLjU4LS4yMjIgMy4wMTQtMS43MDMgNC4zMiAyLjY5LjMyMyA0LjMyIDEuODU2IDQuODkgNC41OTQuMzkzIDEuODI4IDAgMy40MzMtMS4xMzggNC44MTUtMS4xNiAxLjM1Ny0yLjg0IDIuMjctNS4wMzYgMi43NE0xNzcuMDQgOTQuNzlsMi4zMiA4LjEyNC0zLjUwNyAxLjAxMy0yLjMyLTguMTIzLTEwLjA1LTkuNzMgMy43NTItMS4wNjIgNy4xMTIgNy4wNjMgMi4yNzItOS43OCAzLjcyNy0xLjA2Mi0zLjMwOCAxMy41NTgiIGZpbGw9IiNmYmQxMTgiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik04Ni4zNjggMTMxLjkwM2wtMy45MjUtMS4wNjMtMi4zNDcgMy40OC0zLjcyOC0uOTg1IDEwLTEzLjU1NXY1LjIzNWwtMi4yNzIgMy41MDUgMi4yNzIuNjE3em0yLjk0IDQuODlsLS4zNzItNC4xOTctMi41NjgtLjY5M3YtMi43NjZsMi4yOTcuNjE4LS40Mi03LjYzLTEuODc3IDIuODl2LTUuMjM1bDIuNjkyLTMuNjMgMS40OC4zOTMgMi40NyAyMS4yMzctMy43MDMtLjk4N00xMTMuMzggMTQwLjYybDEuNjgtMTkuNTM0IDMuNDgzLjI5OC0xLjcwNCAxOS41My0zLjQ2LS4yOTVNMTM1Ljc4IDEyMy4xNjNsLjg4NyA0LjUxOCA2Ljc2NS0xLjMxLjU3IDIuODktNi43NjcgMS4zMzUgMS43MDQgOC43OS0zLjQxLjY2Ni0zLjc1My0xOS4yNiAxMi42OTItMi40Ny41OSAzLjAzNy05LjI4IDEuODA2IiBmaWxsPSIjMWIxODFhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNjUuMDEgMjQuNjY0YzUuMzgyLTMuNjU1IDkuMTg1LTkuMjM2IDEzLjc3OC0xMy44NTMtNS45NzYuMDUtMTIuNDk1IDEuNDU4LTE4LjM5NiAzLjQzNC00IDEuMzMyLTcuNDU3IDMuMTYtMTAuOTQgNi4zOTUtMS4xMSAyLjU2Ny0yLjIyIDUuMTM2LTMuMzU3IDcuNzI3IDUuNTU2LTMuNzc4IDExLjEzNy03LjUzIDE3LjgyOC0xMC44NGwuMDc0IDIuMjczYy00LjQ0NSAzLjMzMy0xMC45MTQgNi45MTMtMTMuNjggMTAuMjQ3IDYuMTI0LjA1IDEwLjQ3LTIuNTQ0IDE0LjY5Mi01LjM4M000MS4xNTYgMTQuNTljMy4xODUtMi4yMjMgNi41NjgtNC40MiAxMC4yNDgtNS42My0zLjI2IDYuNTkyLTYuMDc1IDEyLjc2NS05LjUwNyAxOC41NjgtMi4wMjUgMy44MDMtNi42OTIgNy43NTMtNi4zNyAxMS4yMzUtMi41MiAyLjY5Mi00LjcxOCA1LjQ1Ny02LjgxNSA4LjA3Ni0uMjk3LTEuNDM1LS4yNzMtMi44NjctLjE3My00LjMgNC4yOTUtNi4zOTMgOC40Mi0xMi42NCAxMi4wOTctMTkuMjM1LS4wNS0uOTg4LS41MTgtMS44MjYtLjkxMy0yLjUxOC0zLjE2IDQuMzItNi4xNzMgOS4wNjItOS40OCAxMi45NFYyMy42NWMzLjYyOC0zLjAxIDcuMDEtNi4zNyAxMC45MTItOS4wNk0zNy4zOCA0MS41NTNjMy41My0yLjkzOCA3Ljk1LTYuMDc0IDEyLjE3Mi02LjQ3LTEuMjYgNi4zNzItNy4wNjIgMTAuNzQyLTEwLjU5MyAxNi4xMjUtMi43NjcgNC4yMjMtNS43MDUgNy43MDQtOC4yOTcgMTIuNjY4LS43NjYtLjcxNy0xLjQzMi0xLjc4LTEuNzgtMi45NCA0LjEtNC45NjMgNy41ODItOS43MDMgMTAuNzY4LTE0LjkzNy4xLS43OTItLjE5Ny0xLjU4My0uNjktMi4xLTMuNjggNC42NC02LjcxNyA5LjQ1Ni0xMS4wODggMTMuOTUtLjE3NC0xLjYwNS0uMDc1LTMuMzgyLjI0Ny01LjA2MiAyLjkxMy00LjMyIDUuNTA1LTguMTQ4IDkuMjYtMTEuMjM1TTE2LjI5IDQzLjhjMS43My02LjA3NSA2LjU5NC0xNS43MDQgOS4xNjItMTYuNjE3LjEyMyA4LjQ0NC0uMDc1IDE2LjE5Ny0xLjYwNSAyNC4xLTEuMTYyIDUuOTI1LTIuOTg4IDE1LjUwNy02LjM5NSAxNi45NjIuNDY4LTcuOTI1IDMuOTI1LTE2LjQyIDUuMzgzLTI0LjUxOC0uNTItLjU2OC0xLjQwOC0uMzctMi4zNDcuMzQ1LTIuMzcgNi40OTMtMy43NTIgMTIuNzQyLTUuMzgzIDE5LjQ4LTIuODg4LS42MTUtLjYxNy0xMy40MDUgMS4xODYtMTkuNzUyTTQuNjg1IDY4Ljg0Yy4wNS00LjEgMS4yMzYtOC4zOTYgMi4yNzMtMTIuMSAyLjA3MyA1LjA4NSA1LjIzNCA5LjgyNyA2LjIyMiAxNS4yMS45MTQgNC45ODcuODY0IDEzLjU4LS41OTIgMTUuMjEtMi45MTQtMy45NS0yLjI5Ny05LjI2LTMuNDMzLTEzLjg3Ny0uMzItLjY0Mi0uNzktLjQ0NC0xLjE4Ni0uMTQ4LS44MTUgMi44NC0uNjkgNS43MDQtMS4wODcgOC41NjgtMi4xMjMtLjI3LTIuMjIyLTguNTItMi4xOTgtMTIuODY0TTIxLjA4IDY4LjU5YzEuMzEtMi4xNDcgMi43NjctNC41MTggNC43OTItNS44NzUuOTg4IDYuMzk0IDIuMjQ3IDEyLjg0IDEuNTA3IDE5LjIzNC0uNjQ0IDUuMzgyLTMuNzA3IDEwLjE0Ny01LjU1NyAxNS4yNi0xLjc1NCAxLjExLS42NjctMTEuMTg2IDAtMTYuNzY2LS43NDItLjI0OC0xLjQwOC0uMDUtMiAuNTY2LTEuOTUyIDcuMjEtMS4zMSAyMS4wMTQtMS44NTIgMjEuMzEtMS41MDYtMS4wMzUtMi41MTgtMi4zOTUtMy43NzgtNC4wOTcuOTg4LTMuNTgyIDEuOTUtNi45NCAyLjQyLTEwLjQ5NS40OTUtMy41MDcuMjk2LTcuMTEyLjQyLTEwLjY2NyAxLjI4NC0zLjA2MiAyLjM5NS01LjgwMyA0LjA1LTguNDdNMTEuOTk1IDExNC44NGMtMi41NDQtNS4wODUtNC0xMC42MTctNS4xMTItMTYuMjk2IDQuOTYzIDQuMjk2IDEwLjQ5NSA5Ljk3NiAxNC42MiAxNS44NzcgMy41NzggNS4xMzYgOCAxMi4wMjcgOC4yMiAxNi44OTItNC44ODgtNC41Ny04Ljc5LTEyLjQ5Ni0xMy40MzItMTguNDcyLS40NDMuMTQ4LTEuMjM0LjQ5NS0xLjM1NyAxLjI2IDEuMzM0IDQuMSA0LjA3NCA3LjgwMyA1LjcyOCAxMS44MjgtMi44MTMtLjY2Ny02LjU0LTYuODktOC42NjUtMTEuMDg4TTI0LjkzMyAxMDQuNTJjLS41NjgtNS45NSAxLjY4LTExLjc1NSAzLjk1LTE1LjQzNCAxLjYwNSA3LjA5IDQuNDk0IDEzLjc1NCA2LjA1IDIwLjc5MiAxLjIzNSA1LjUzIDEuNjggMTEuNzA1IDAgMTYuODE0LTIuMzItNi40NDMtMy40OC0xMy41NTUtNC45NjItMjAuMzItLjQ5NC0uMzQ3LTEuMDg2LS4xNzItMS4yNi40OTUtLjA1IDQuOTg2Ljk4OCA5LjcwMiAxLjExMyAxNC42OS0zLjEzNy0xLjMwOC00LjMyLTExLjE2Mi00Ljg5LTE3LjAzN000Ny4zNTUgMTM5LjUzMmMtMy43MjgtNi44ODgtNS4zMzQtMTQuNDk1LTYuODY0LTIyLjQ5NSA0LjEyNCA0LjIgOS4wODcgNy43MyAxMi40MiAxMi41OTUgMy40ODIgNS4xMTIgNi43NDIgMTIuMSA3LjczIDE2Ljg4OC0xLjkuMDI1LTcuMzM1LTkuMzU3LTExLjI2LTEzLjc4LS43MTcuNDIzLTEuMDM3LjMyNC0uOTE1IDEuNTA4IDMuNDU4IDcuNjggMTIuMzIgMTcuMjg0IDEyLjE3NCAyMC0zLjgyOC0xLjU1NS0xMC4xMjQtOC45MTMtMTMuMjg1LTE0LjcxNk0zOS4zMDQgMTU1LjE2M2MtNC4zMi0zLjc1My04LjIyMy02Ljg2NS0xMS42OC0xMi42OTQgNS44NzguODE1IDEyLjEyNCAzLjMzMyAxNy42MyA2LjIyMyA1Ljg1MyAzLjA2MyAxMS40MzQgNi44NjYgMTYuMTUgMTEuMzM0LTEuODc2IDIuNjQ0LTE1LjAxMy03LjQwOC0yMi41Mi0xMS4xNjItLjk4Ny4yNS0xLjQ1NiAxLjAxNC0xLjE4NiAxLjc1NCA1Ljg1NCA0LjIyMyAxMS44MDUgNy41MyAxNy44MDUgMTAuOTEyLTQuNDcuODE2LTExLjc1NS0yLjQ5Mi0xNi4yLTYuMzdNODIuMzkyIDE1OS4zNmMtNC40Mi0zLjU1NS04LjQyLTcuMjgzLTEwLjc0LTEzLjE4NCA1LjguODg4IDEyLjEyMyAzLjM1NiAxNy40NTYgNi41NCA0Ljg5IDIuOTE2IDEzLjg1MyAxMC4yIDEyLjU5NCAxMS40MzYtLjk0IDEuNzc2LTE4LjI3My0xMi43OTItMTkuNDgzLTExLjI2LTEuOTAzIDEuMDYzIDE1LjMzMyAxMS43MDMgMTUuMjEgMTQuMDIzLTQuMzQ2LS4wNzItMTAuNjY3LTQuMDUtMTUuMDM4LTcuNTU1TTgxLjQ1NSAxODAuODY4Yy03LjY1NS0uNDQ1LTE1LjM2LTIuNzQtMjIuMTc0LTYuMTI0IDcuODI4LTEuNzA0IDE1LjU1Ny0zLjI4NCAyMy40Ni0zLjUzMiA1LjExLS4xNzIgMTYuMjQ2LjY2NyAxNS4xODUgMi4yNDguMjk2IDIuMTI0LTMwLjk0LS44NC0yOC44OTIgMi4wMjUtLjk4NiAyLjgxNyAyMC41NDYgMS42NTQgMzEuMDg4IDEuNjA1LjI1IDIuNTk0LTEyLjMyIDQuMTUtMTguNjY1IDMuNzc4TTExNy4yMzMgMTg1LjcwN2M0LjQ0NCAwIDguMDUtNC45MTQgOC4wNS0xMC45MzggMC02LTMuNjA2LTEwLjkxNC04LjA1LTEwLjkxNC00LjQyIDAtOC4wNSA0LjkxMy04LjA1IDEwLjkxMyAwIDYuMDIzIDMuNjMgMTAuOTM3IDguMDUgMTAuOTM3IiBmaWxsPSIjZmJkMTE4IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTE3LjIzMyAxODUuNzA3YzQuNDQ0IDAgOC4wNS00LjkxNCA4LjA1LTEwLjkzOCAwLTYtMy42MDYtMTAuOTE0LTguMDUtMTAuOTE0LTQuNDIgMC04LjA1IDQuOTEzLTguMDUgMTAuOTEzIDAgNi4wMjMgMy42MyAxMC45MzcgOC4wNSAxMC45Mzd6IiBmaWxsPSJub25lIiBzdHJva2U9IiMxYjE4MWEiIHN0cm9rZS13aWR0aD0iNC4xMTU4OTcxMDAwMDAwMDEiIHN0cm9rZS1taXRlcmxpbWl0PSIyLjYxMyIvPjwvc3ZnPg==");
+  height: 12.8px;
+  margin-bottom: 3.6px;
+  margin-top: 3.6px;
+}
+
+.ösk {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjMuODUzIiBoZWlnaHQ9IjI1Ny4xMiIgdmlld0JveD0iMCAwIDI2My44NTMzMyAyNTcuMTIiPjxwYXRoIGQ9Ik0xNzQuOTA4IDE1LjY2NWMyLjY2LS43OTctMS4wNjUtMy4xOSAwLTUuNTgyLjUzLTIuMzk0LTEuODYzLTQuNzg3LjI2NS02LjY0NyA5LjU3NC00Ljc4NyAxMS4xNjcgOS4zMDUgMTkuNjc1IDkuNTcyIDUuMDUyIDYuMzggNC43ODcgMTQuNjI0IDEwLjEwNCAyMS4wMDUtLjUzMiAzLjcyMyAzLjcyNCAyLjM5MiA1LjU4NSA0LjI1NSAyLjEyNi0yLjkyNS0zLjE5Mi0zLjQ1Ny0yLjkyNC02LjExNi43OTgtMy45ODgtMy45OS04LjI0NC41My0xMS4xNjggNS4zMi41MzIgNC43ODUgNi42NDggNi4xMTYgMTAuNjM2LS4yNjcgMS44Ni0yLjM5NSAzLjk4OC0xLjA2NCA2LjExNiAxLjMzIDEuMzMgMy40NTYuNTMyIDQuNzg3LS4yNjcgMi4xMjUtMS41OTUgMS4zMjgtNS4wNTMgNC41MTgtNS44NSAzLjE5NSAyLjkyNSAxMC42NC0xLjA2NCAxMS40MzYgNS41ODQtLjc5NyA2LjkxMyAzLjE5IDEyLjc2NCAyLjEyOCAxOS40MWwtLjI2OCA5LjMwNmMxLjA2NS4yNjcgMS4wNjUtMS4zMyAxLjA2NS0yLjM5MiAyLjY2LTEuMDY0IDMuOTktNS44NSA3LjQ0NS0zLjE5MiAyLjY2IDIuMzkzLjI2NyA2LjkxNSAyLjkyNiA5LjMwOCAyLjkyNS41MyA1LjMxOC0yLjM5MyA3LjcxIDAgMy40NTcgNC43ODUgMS4zMzIgMTIuMjMgMi42NiAxNy41NS0yLjM5MyAzLjE5LTIuMzkzIDcuMTc4LTIuOTI0IDExLjE2NiAwIDMuMTktNC41MiA1Ljg1LTEuODYzIDguNzc1IDMuMTkgMS4wNjIgNS41ODQtMi42NiA4LjI0MyAwIDEuNTk2IDEuODYgMS4zMyA0LjI1NC4yNjggNi4xMTYtMi4zOTYgMy43MjItNi45MTMgNC43ODYtOC43NzYgOC4yNDMgMy40NTYgMCA5LjMwOC02LjY0OCAxMS4xNjcgMGwtLjI2NiAxMS40MzNjLTMuNzIyIDMuOTktNC43ODcgOS4zMDgtOC4yNDMgMTMuNTYtMi42NiAzLjk5LTcuOTc2IDYuNjUtOS4zMDQgMTEuNDM0IDMuMTktLjc5NyA3Ljk3Ni0yLjkyNCAxMS40MzItLjUzIDEuNTkzIDEuNTk0IDEuMzI4IDMuOTg3LjUzIDUuODUtMy40NTQgMy40NTUtOC43NzMgNC41Mi0xMy41NiAzLjQ1NS0xLjMzIDAtMi4xMjYgMS4wNjQtMi45MjQgMS44NnYxLjA2NWMzLjE5MiAwIDcuMTgtLjUzMiAxMC4zNyAxLjMzIDIuMTMgMi42NTggMy45OSA2LjM4IDIuMTMgOS41NzMtNC4yNTYgMy40NTYtOC41MTIgNy43MS05LjU3NSAxMy4yOTQtNi4xMTYgNS41ODMtMTcuNTUgMS4wNjQtMjIuMDcgOC41MSAxLjg2MiAzLjcyMiAxMS40MzYgMS44NiA4Ljc3NyA4LjUwOC0yLjEyOCAzLjE5LTYuMTE3IDEuODYtOC43NzYuNzk3LTMuNzItMS41OTUtNS4wNTItOC43NzUtOS41NzMtNC4yNTMtMS44NiA2LjM4IDYuMTE3IDQuMjUyIDguNTEgOC4yNCAxLjg2MiAxLjMzIDIuMTI4IDQuMjU2IDEuMzI4IDYuMTE2LTIuOTIzIDMuNDU3LTcuNzEgMi45MjUtMTAuNjM1IDYuMzgtOS4zMDQgMy45OS0xOC44NzctMi4xMjUtMjguNzE2LTEuMDYzLTEuODYyIDEuMDY0LS43OTcgMy4xOTIgMCA0LjUyMiAzLjE5IDIuMzkzIDcuOTc3IDEuNTk0IDkuNTczIDYuMTE0LjUzIDIuNjYtLjUzNCA1LjMxOC0zLjE5NCA1Ljg1LTIuMTI1LjI2NS0zLjk4Ny0xLjg2LTQuNzgzLTMuNzIzLS4yNy0yLjkyNS4yNjUtNy40NDUtMy40Ni04LjI0Mi0yLjY1OC0xLjA2NC01Ljg0OC0zLjcyMy04LjUwNy0xLjA2NCAxLjMyOCA0LjUyMiAxMS45NjcgMS41OTYgNy4xOCA5LjA0MiAxLjU5MyAyLjM5MiAyLjEyNCA2LjkxMi0yLjM5MyA2LjkxMi01LjA1MiAwLTkuNTc0IDEuNTk2LTE0LjYyNiAyLjM5My02LjM4LTMuMTktMTMuMjkzLTUuMDUyLTIwLjIwNy02LjY0NmwtLjc5Ny41MzNjMS4wNjMgNS4zMTcgNy40NDUgOC41MDggNi42NDcgMTQuMDktMy4xOSAxLjA2NC01LjMyLTQuMjUzLTkuMzA2LTIuOTIzLTMuOTktNC41Mi0yLjkyNS0xMi40OTgtOS4zMDctMTQuODkyLTguMjQzIDMuMTkzLTkuODM4IDE1LjQyMy0xOS42NzYgMTcuMDItMS4wNjMuMjY1LTIuOTI1LjI2NS0zLjQ1Ny0xLjMzIDMuNDU3LTYuMTE2IDguMjQzLTEyLjIzMiAxNC42MjQtMTUuOTU1di0uNzk3Yy0xMC4xMDMtLjUzMi0xNS40MiAxMy4yOTUtMjYuMzIyIDEwLjktMy4xOS0uNTMtNy4xOC4yNjctOC43NzQtMy40NTYtMS44NjItNS4wNSA0Ljc4NS03LjQ0NCA0LjUyLTExLjk2NC0yLjM5NC0uMjY3LTQuNzg3LjI2NS02LjY0OCAyLjEyNy0uNTMyIDIuNjYtMi4xMjcgNS41ODQtNS4wNTIgNi4xMTYtMS41OTUuNTMtMy40NTcgMS4zMjgtNS4wNTMuNTMtMS44Ni0xLjA2My0yLjM5LTMuMTkyLTEuNTk0LTQuNzg2Ljc5OC0xLjMzIDIuMTI4LTIuMzkyIDEuNTk1LTMuNzIzLTUuMDUtMi4zOTItMTEuNDMyIDMuNzI0LTE1Ljk1LTEuMzI4LTMuMTkzLTMuNzIzLTguNzc2LTIuMzkzLTExLjQzNS03LjQ0NC0xLjA2NC0zLjcyMyAxLjU5NS02LjkxNSA0LjUyLTkuMDQgMi4xMjctMS4wNjQgNC41Mi0xLjMzMiA2LjY0Ny0xLjg2My41MzItMS4zMy41MzItMy43MjItMS41OTUtMy43MjItMy4xOS0xLjMzLTQuMjU0IDIuOTI0LTYuOTEzIDMuMTkyLTMuNzIzLjUzLTguNzc1Ljc5Ni0xMS40MzQtMi42Ni0uNzk4LTMuNDU2IDQuNTItNi45MTMgMC05LjA0Mi00Ljc4Ni0uNTMtMTAuNjM2IDMuOTktMTMuMDMtMi42NTgtMi42NTgtMy4xOS02LjM4LTcuMTgtNC41Mi0xMS40MzQgMy4xOS0uNzk2IDUuODUtMi42NTcgOC43NzUtMy45ODggMS41OTYtLjI2NSAzLjcyMy0xLjMzIDIuMTI4LTMuMTktMS4wNjQtMS41OTUtMS41OTYtMy45ODgtMy45OS00LjI1NC0zLjQ1NSAxLjg2LTcuOTc2IDUuODUtMTEuOTY0IDIuMTI3LTEuODYyLTEuMDY1LTMuOTktMy4xOS0zLjQ1OC01LjU4NCAxLjMzLTQuMjU0IDcuMTgtMy4xOSAxMS40MzQtMy43MjIgMS41OTUgMCAyLjY2IDMuMTkgMy45ODggMS4wNjQtMS44Ni0zLjQ1Ny01LjMxOC02LjM4LTcuNzEtOS4zMDctNi4xMTYtMi45MjUtMTUuMTU3LTQuNTItMTcuMjg0LTEyLjQ5Ny0uMjY2LTIuMTI2LjI2Ni0zLjQ1NiAxLjA2NC01LjA1Mi0uMjY2LTMuNzIzLTYuNjQ4LTguNTA4LS43OTgtMTEuMTY3IDIuMTI3Ljc5NiA0Ljc4NiAyLjEyNiA3LjE4Ljc5NiAxLjg2LTEuNTk2IDEuMzMtNC4yNTQgMS4wNjMtNi4zOC0yLjY2LTEuNTk2LTcuMTgtMS4zMy04LjI0NC01LjMyLS43OTgtMi4zOS0yLjY2LTUuMDUtMS4zMy03Ljk3NSAxLjA2NC0xLjU5NSAzLjcyMi0xLjg2IDUuMDUzLS41MyAyLjY1NyAxLjg2IDUuODUgNC41MiA1Ljg1IDcuOTc1IDEuMDYyIDEuMzMgMS44Ni0uNTMgMy4xOS0uMjY2LS4yNjctLjc5OC0xLjg2Mi0xLjA2NS0uOC0yLjM5NC41MzMtMS4wNjQgMi4xMjgtMS44NiAxLjA2NS0zLjE5LTMuMTktOC41MS0xMi4yMy0xNC42MjUtMTEuNDM0LTI0LjczLjUzMy0zLjk4Ny4yNjctOS4wNCAzLjk5LTExLjE2NyA2LjM4LTMuNzIzIDguNTA4IDEyLjQ5NyAxMy41NiAyLjkyNS43OTgtNC43ODYtNS44NS0zLjE5LTYuMzgtNy40NDYtLjI2Ny0zLjcyMy0yLjM5NC03Ljk3OCAwLTExLjQzNCAxLjA2Mi0yLjEyOCA0LjI1My0yLjEyOCA2LjExNC0xLjA2NCA0LjI1NSAyLjM5MyAyLjY2IDcuNzEyIDQuNTIgMTEuMTY4LjI2NyAxLjg2LTIuNjU4IDMuNzIzLS4yNjUgNS4wNTIgMi4zOSAwIDIuMTI2LTIuNjYgMi45MjQtNC4yNTUgMS44Ni05LjU3Mi01Ljg1LTE3LjAxNy0yLjkyNS0yNi44NTYgNC41Mi0zLjE5IDMuNzItMTQuMzU2IDExLjk2NC0xMC45IDQuMjU0IDIuMTI4LTEuMDYzIDkuODQgNS41ODMgOS4wNCAxLjA2NS0xLjU5NSAxLjg2Mi0zLjk4NyAxLjA2NS02LjExNS01Ljg1LTIuOTI1LTEuMDY1LTguNzc0LS41MzItMTIuNzYyIDEuMzMtMS44NjIgMy4xOS0yLjY2IDUuMzE4LTEuODYyIDMuNDU2IDIuMzk1IDIuMzkzIDcuNDQ3IDEuODYgMTAuOTAzLS41MyAyLjkyNS01LjA1IDMuOTg4LTMuNzIyIDcuNzEgMS4zMyAxLjA2NCAyLjkyNS0uMjY1IDMuOTktLjc5NyA5LjgzNy04LjI0MyA2LjExNC0yMi42IDE1Ljk1My0zMC44NDQgMi42NTgtNy40NDQgMTEuNDMzLTYuNjQ4IDE3LjI4Mi05LjA0IDEuMzMtLjI2NyAyLjEyNy41MyAyLjM5MyAxLjMzIDEuODYgNi4xMTUtNS4wNTIgOS4wNC00LjUyIDE0LjYyMyAzLjk5IDIuNjYgMy45OS0zLjQ1NyA2LjY0Ny01LjA1Mi0uMjY2LTUuODUgNi42NDgtNi45MTMgMTAuMTA0LTkuNTcyIDIuMTI3LS4yNjQgNC41Mi4yNjggNS4zMTggMi4zOTMgMS4wNjQgMy40NTgtNy4xOCA3LjQ0Ni0xLjMzIDguMjQzIDYuNjUtLjUzIDkuMzA2LTEwLjM2OCAxNi43NTItNy43MSA0Ljc4NyAzLjQ1NyA5LjMwNi0yLjY1OCAxNC4zNTguNTMgNS4zMi02LjExNSAxMC45MDMgMy40NiAxNi4yMi0xLjg2IDIuMzkzLjc5NyAyLjkyNCAzLjk4OCA0Ljc4NyA1Ljg1IDMuNzIyIDMuOTkgOC43NzQgNC43ODYgMTMuODI2IDUuNTgzIDEuMzMgMCAxLjU5Ni0xLjU5NSAxLjA2NS0yLjY2LTIuNjU3LTIuMzktNy4xOC43OTgtOS41NzItMi45MjMtMS44Ni0yLjkyNi00LjI1NS01Ljg1LTIuOTI0LTkuNTc0IDEuMDYzLTIuNjU4IDMuOTg3LS43OTcgNS44NDgtLjc5NyA2LjkxNSAzLjQ1NyA1LjMyIDExLjQzMyAxMS40MzYgMTQuODkiIGZpbGw9IiMwZDBiMGEiLz48cGF0aCBkPSJNMTc0LjkwOCAxNS42NjVjMi42Ni0uNzk3LTEuMDY1LTMuMTkgMC01LjU4Mi41My0yLjM5NC0xLjg2My00Ljc4Ny4yNjUtNi42NDcgOS41NzQtNC43ODcgMTEuMTY3IDkuMzA1IDE5LjY3NSA5LjU3MiA1LjA1MiA2LjM4IDQuNzg3IDE0LjYyNCAxMC4xMDQgMjEuMDA1LS41MzIgMy43MjMgMy43MjQgMi4zOTIgNS41ODUgNC4yNTUgMi4xMjYtMi45MjUtMy4xOTItMy40NTctMi45MjQtNi4xMTYuNzk4LTMuOTg4LTMuOTktOC4yNDQuNTMtMTEuMTY4IDUuMzIuNTMyIDQuNzg1IDYuNjQ4IDYuMTE2IDEwLjYzNi0uMjY3IDEuODYtMi4zOTUgMy45ODgtMS4wNjQgNi4xMTYgMS4zMyAxLjMzIDMuNDU2LjUzMiA0Ljc4Ny0uMjY3IDIuMTI1LTEuNTk1IDEuMzI4LTUuMDUzIDQuNTE4LTUuODUgMy4xOTUgMi45MjUgMTAuNjQtMS4wNjQgMTEuNDM2IDUuNTg0LS43OTcgNi45MTMgMy4xOSAxMi43NjQgMi4xMjggMTkuNDFsLS4yNjggOS4zMDZjMS4wNjUuMjY3IDEuMDY1LTEuMzMgMS4wNjUtMi4zOTIgMi42Ni0xLjA2NCAzLjk5LTUuODUgNy40NDUtMy4xOTIgMi42NiAyLjM5My4yNjcgNi45MTUgMi45MjYgOS4zMDggMi45MjUuNTMgNS4zMTgtMi4zOTMgNy43MSAwIDMuNDU3IDQuNzg1IDEuMzMyIDEyLjIzIDIuNjYgMTcuNTUtMi4zOTMgMy4xOS0yLjM5MyA3LjE3OC0yLjkyNCAxMS4xNjYgMCAzLjE5LTQuNTIgNS44NS0xLjg2MyA4Ljc3NSAzLjE5IDEuMDYyIDUuNTg0LTIuNjYgOC4yNDMgMCAxLjU5NiAxLjg2IDEuMzMgNC4yNTQuMjY4IDYuMTE2LTIuMzk2IDMuNzIyLTYuOTEzIDQuNzg2LTguNzc2IDguMjQzIDMuNDU2IDAgOS4zMDgtNi42NDggMTEuMTY3IDBsLS4yNjYgMTEuNDMzYy0zLjcyMiAzLjk5LTQuNzg3IDkuMzA4LTguMjQzIDEzLjU2LTIuNjYgMy45OS03Ljk3NiA2LjY1LTkuMzA0IDExLjQzNCAzLjE5LS43OTcgNy45NzYtMi45MjQgMTEuNDMyLS41MyAxLjU5MyAxLjU5NCAxLjMyOCAzLjk4Ny41MyA1Ljg1LTMuNDU0IDMuNDU1LTguNzczIDQuNTItMTMuNTYgMy40NTUtMS4zMyAwLTIuMTI2IDEuMDY0LTIuOTI0IDEuODZ2MS4wNjVjMy4xOTIgMCA3LjE4LS41MzIgMTAuMzcgMS4zMyAyLjEzIDIuNjU4IDMuOTkgNi4zOCAyLjEzIDkuNTczLTQuMjU2IDMuNDU2LTguNTEyIDcuNzEtOS41NzUgMTMuMjk0LTYuMTE2IDUuNTgzLTE3LjU1IDEuMDY0LTIyLjA3IDguNTEgMS44NjIgMy43MjIgMTEuNDM2IDEuODYgOC43NzcgOC41MDgtMi4xMjggMy4xOS02LjExNyAxLjg2LTguNzc2Ljc5Ny0zLjcyLTEuNTk1LTUuMDUyLTguNzc1LTkuNTczLTQuMjUzLTEuODYgNi4zOCA2LjExNyA0LjI1MiA4LjUxIDguMjQgMS44NjIgMS4zMyAyLjEyOCA0LjI1NiAxLjMyOCA2LjExNi0yLjkyMyAzLjQ1Ny03LjcxIDIuOTI1LTEwLjYzNSA2LjM4LTkuMzA0IDMuOTktMTguODc3LTIuMTI1LTI4LjcxNi0xLjA2My0xLjg2MiAxLjA2NC0uNzk3IDMuMTkyIDAgNC41MjIgMy4xOSAyLjM5MyA3Ljk3NyAxLjU5NCA5LjU3MyA2LjExNC41MyAyLjY2LS41MzQgNS4zMTgtMy4xOTQgNS44NS0yLjEyNS4yNjUtMy45ODctMS44Ni00Ljc4My0zLjcyMy0uMjctMi45MjUuMjY1LTcuNDQ1LTMuNDYtOC4yNDItMi42NTgtMS4wNjQtNS44NDgtMy43MjMtOC41MDctMS4wNjQgMS4zMjggNC41MjIgMTEuOTY3IDEuNTk2IDcuMTggOS4wNDIgMS41OTMgMi4zOTIgMi4xMjQgNi45MTItMi4zOTMgNi45MTItNS4wNTIgMC05LjU3NCAxLjU5Ni0xNC42MjYgMi4zOTMtNi4zOC0zLjE5LTEzLjI5My01LjA1Mi0yMC4yMDctNi42NDZsLS43OTcuNTMzYzEuMDYzIDUuMzE3IDcuNDQ1IDguNTA4IDYuNjQ3IDE0LjA5LTMuMTkgMS4wNjQtNS4zMi00LjI1My05LjMwNi0yLjkyMy0zLjk5LTQuNTItMi45MjUtMTIuNDk4LTkuMzA3LTE0Ljg5Mi04LjI0MyAzLjE5My05LjgzOCAxNS40MjMtMTkuNjc2IDE3LjAyLTEuMDYzLjI2NS0yLjkyNS4yNjUtMy40NTctMS4zMyAzLjQ1Ny02LjExNiA4LjI0My0xMi4yMzIgMTQuNjI0LTE1Ljk1NXYtLjc5N2MtMTAuMTAzLS41MzItMTUuNDIgMTMuMjk1LTI2LjMyMiAxMC45LTMuMTktLjUzLTcuMTguMjY3LTguNzc0LTMuNDU2LTEuODYyLTUuMDUgNC43ODUtNy40NDQgNC41Mi0xMS45NjQtMi4zOTQtLjI2Ny00Ljc4Ny4yNjUtNi42NDggMi4xMjctLjUzMiAyLjY2LTIuMTI3IDUuNTg0LTUuMDUyIDYuMTE2LTEuNTk1LjUzLTMuNDU3IDEuMzI4LTUuMDUzLjUzLTEuODYtMS4wNjMtMi4zOS0zLjE5Mi0xLjU5NC00Ljc4Ni43OTgtMS4zMyAyLjEyOC0yLjM5MiAxLjU5NS0zLjcyMy01LjA1LTIuMzkyLTExLjQzMiAzLjcyNC0xNS45NS0xLjMyOC0zLjE5My0zLjcyMy04Ljc3Ni0yLjM5My0xMS40MzUtNy40NDQtMS4wNjQtMy43MjMgMS41OTUtNi45MTUgNC41Mi05LjA0IDIuMTI3LTEuMDY0IDQuNTItMS4zMzIgNi42NDctMS44NjMuNTMyLTEuMzMuNTMyLTMuNzIyLTEuNTk1LTMuNzIyLTMuMTktMS4zMy00LjI1NCAyLjkyNC02LjkxMyAzLjE5Mi0zLjcyMy41My04Ljc3NS43OTYtMTEuNDM0LTIuNjYtLjc5OC0zLjQ1NiA0LjUyLTYuOTEzIDAtOS4wNDItNC43ODYtLjUzLTEwLjYzNiAzLjk5LTEzLjAzLTIuNjU4LTIuNjU4LTMuMTktNi4zOC03LjE4LTQuNTItMTEuNDM0IDMuMTktLjc5NiA1Ljg1LTIuNjU3IDguNzc1LTMuOTg4IDEuNTk2LS4yNjUgMy43MjMtMS4zMyAyLjEyOC0zLjE5LTEuMDY0LTEuNTk1LTEuNTk2LTMuOTg4LTMuOTktNC4yNTQtMy40NTUgMS44Ni03Ljk3NiA1Ljg1LTExLjk2NCAyLjEyNy0xLjg2Mi0xLjA2NS0zLjk5LTMuMTktMy40NTgtNS41ODQgMS4zMy00LjI1NCA3LjE4LTMuMTkgMTEuNDM0LTMuNzIyIDEuNTk1IDAgMi42NiAzLjE5IDMuOTg4IDEuMDY0LTEuODYtMy40NTctNS4zMTgtNi4zOC03LjcxLTkuMzA3LTYuMTE2LTIuOTI1LTE1LjE1Ny00LjUyLTE3LjI4NC0xMi40OTctLjI2Ni0yLjEyNi4yNjYtMy40NTYgMS4wNjQtNS4wNTItLjI2Ni0zLjcyMy02LjY0OC04LjUwOC0uNzk4LTExLjE2NyAyLjEyNy43OTYgNC43ODYgMi4xMjYgNy4xOC43OTYgMS44Ni0xLjU5NiAxLjMzLTQuMjU0IDEuMDYzLTYuMzgtMi42Ni0xLjU5Ni03LjE4LTEuMzMtOC4yNDQtNS4zMi0uNzk4LTIuMzktMi42Ni01LjA1LTEuMzMtNy45NzUgMS4wNjQtMS41OTUgMy43MjItMS44NiA1LjA1My0uNTMgMi42NTcgMS44NiA1Ljg1IDQuNTIgNS44NSA3Ljk3NSAxLjA2MiAxLjMzIDEuODYtLjUzIDMuMTktLjI2Ni0uMjY3LS43OTgtMS44NjItMS4wNjUtLjgtMi4zOTQuNTMzLTEuMDY0IDIuMTI4LTEuODYgMS4wNjUtMy4xOS0zLjE5LTguNTEtMTIuMjMtMTQuNjI1LTExLjQzNC0yNC43My41MzMtMy45ODcuMjY3LTkuMDQgMy45OS0xMS4xNjcgNi4zOC0zLjcyMyA4LjUwOCAxMi40OTcgMTMuNTYgMi45MjUuNzk4LTQuNzg2LTUuODUtMy4xOS02LjM4LTcuNDQ2LS4yNjctMy43MjMtMi4zOTQtNy45NzggMC0xMS40MzQgMS4wNjItMi4xMjggNC4yNTMtMi4xMjggNi4xMTQtMS4wNjQgNC4yNTUgMi4zOTMgMi42NiA3LjcxMiA0LjUyIDExLjE2OC4yNjcgMS44Ni0yLjY1OCAzLjcyMy0uMjY1IDUuMDUyIDIuMzkgMCAyLjEyNi0yLjY2IDIuOTI0LTQuMjU1IDEuODYtOS41NzItNS44NS0xNy4wMTctMi45MjUtMjYuODU2IDQuNTItMy4xOSAzLjcyLTE0LjM1NiAxMS45NjQtMTAuOSA0LjI1NCAyLjEyOC0xLjA2MyA5Ljg0IDUuNTgzIDkuMDQgMS4wNjUtMS41OTUgMS44NjItMy45ODcgMS4wNjUtNi4xMTUtNS44NS0yLjkyNS0xLjA2NS04Ljc3NC0uNTMyLTEyLjc2MiAxLjMzLTEuODYyIDMuMTktMi42NiA1LjMxOC0xLjg2MiAzLjQ1NiAyLjM5NSAyLjM5MyA3LjQ0NyAxLjg2IDEwLjkwMy0uNTMgMi45MjUtNS4wNSAzLjk4OC0zLjcyMiA3LjcxIDEuMzMgMS4wNjQgMi45MjUtLjI2NSAzLjk5LS43OTcgOS44MzctOC4yNDMgNi4xMTQtMjIuNiAxNS45NTMtMzAuODQ0IDIuNjU4LTcuNDQ0IDExLjQzMy02LjY0OCAxNy4yODItOS4wNCAxLjMzLS4yNjcgMi4xMjcuNTMgMi4zOTMgMS4zMyAxLjg2IDYuMTE1LTUuMDUyIDkuMDQtNC41MiAxNC42MjMgMy45OSAyLjY2IDMuOTktMy40NTcgNi42NDctNS4wNTItLjI2Ni01Ljg1IDYuNjQ4LTYuOTEzIDEwLjEwNC05LjU3MiAyLjEyNy0uMjY0IDQuNTIuMjY4IDUuMzE4IDIuMzkzIDEuMDY0IDMuNDU4LTcuMTggNy40NDYtMS4zMyA4LjI0MyA2LjY1LS41MyA5LjMwNi0xMC4zNjggMTYuNzUyLTcuNzEgNC43ODcgMy40NTcgOS4zMDYtMi42NTggMTQuMzU4LjUzIDUuMzItNi4xMTUgMTAuOTAzIDMuNDYgMTYuMjItMS44NiAyLjM5My43OTcgMi45MjQgMy45ODggNC43ODcgNS44NSAzLjcyMiAzLjk5IDguNzc0IDQuNzg2IDEzLjgyNiA1LjU4MyAxLjMzIDAgMS41OTYtMS41OTUgMS4wNjUtMi42Ni0yLjY1Ny0yLjM5LTcuMTguNzk4LTkuNTcyLTIuOTIzLTEuODYtMi45MjYtNC4yNTUtNS44NS0yLjkyNC05LjU3NCAxLjA2My0yLjY1OCAzLjk4Ny0uNzk3IDUuODQ4LS43OTcgNi45MTUgMy40NTcgNS4zMiAxMS40MzMgMTEuNDM2IDE0Ljg5eiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGQwYjBhIiBzdHJva2Utd2lkdGg9Ii4yODk4NTk0MiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiLz48cGF0aCBkPSJNMTYxLjg4IDMuN2MwIC44LS4yNyAxLjg2My0xLjMzMiAxLjU5Ni0uNTMgMC0xLjA2My0uMjY1LTEuMzMtLjc5Ny0uMjY2LTEuNTk3IDIuMTI3LTIuMTI4IDIuNjYtLjhNODQuNTAyIDUuODI4Yy0xLjMzIDUuMzItNi42NDggOS4zMDctNy43MSAxNC42MjQtMy43MjQgNS44NS0xMi40OTggMi4xMjgtMTQuNjI1IDguNzc1bC0zLjk4OCA5LjMwNmMyLjEyNS00Ljc4NiAxLjU5My0xMy41NiA5LjA0LTE0LjA5Mi43OTYtMS44NiAyLjY1OC0zLjQ1NiAyLjM5Mi01LjMxNy0yLjEyOCAwLTMuOTkgNC41Mi01Ljg1IDIuOTI1IDMuOTktNS44NSA3LjE4LTE0Ljg5IDE1LjQyMi0xNS4xNTYgMS41OTUtMS4zMyA0LjI1NC00LjI1NSA1LjMxOC0xLjA2NE0xMDIuNTgzIDcuOTU1Yy0uMjY2IDEuMzMtMS4wNjQgMi4zOTMtMi4xMjcgMi45MjUtMS41OTYuMjY3LTMuMTkgMC0zLjk4OC0xLjU5Ni0uMjY3LTEuNTk1IDEuMzMtMi45MjQgMi4zOTItMy40NTYgMS4zMy0uMjY1IDQuMjU1IDAgMy43MjMgMi4xMjdNMTkyLjk4OCAxNS40YzMuOTg3IDIuOTI1IDIuOTI1IDcuOTc3IDYuMTE1IDExLjQzNS4yNjUuNzk3LS4yNjYgMS41OTQtMS4wNjMgMi4xMjYtNC41Mi0xLjU5NS43OTctNy40NDQtNC41Mi04LjI0LTQuNTIgMi4zOS02LjM4My0xLjg2My04LjI0My00Ljc4OC0yLjEyOC0yLjM5My01Ljg1Mi0xLjA2NC03LjcxLTMuNzIzIDAtMi4zOTMuMjY1LTQuNTIuNzk2LTYuNjQ3IDUuNTg0IDIuMTI2IDkuODM4IDYuNjQ2IDE0LjYyNSA5LjgzN00xNjcuMTk2IDguNzUyYy0uMjY4LjgtLjUzMyAyLjEyOC0xLjg2IDEuODYzLTEuMDY3LjUzMi0yLjM5NS0uNTMyLTIuMzk1LTEuNTk2LS41My0xLjA2NS41MzItMS44NjMgMS4zMy0yLjM5NSAxLjMzIDAgMi45MjYuNzk4IDIuOTI2IDIuMTI3TTE0OS42NDcgNy42OWMzLjcyIDMuOTkgNy45NzcgOC43NzQgMTMuMjk0IDEwLjEwMy00LjUyIDIuMzk0LTguNzcyLTEuMDY0LTEyLjc2LTIuNjU4LTEuMDY0LjUzLS4yNjcgMS41OTQuMjY0IDIuMTI2IDIuOTI0IDEuODYzIDYuMzgzIDMuNDYgMTAuMTA0IDMuMTkyIDIuNjYgMi4zOTMgNi4xMTUtMS4wNjMgNy43MSAxLjU5Ni01Ljg0NyAxLjg2LTE0Ljg5IDMuNDU2LTE5Ljk0Mi0xLjMzLTMuNzIuMjY2LTYuNjQ1LTEuODYtOS4zMDQtNC4yNTQtMS4wNjUtMi4zOTMtMi42Ni01LjA1Mi0xLjg2My03LjQ0NSAyLjEyNy0xLjg2MyA1LjMxOC0xLjU5NyA3LjQ0NS0uNTMzIDEuNTk0IDEuODYgNC43ODYgMS44NiA1LjA1Mi0uNzk4TTEzMi42MyA5LjgxN2M1LjMxNyA1LjU4My00LjI1NSA4LjUwOC02LjM4MyAxMy4yOTQtOC43NzQgMy4xOTMtMjEuMjcgNS41ODUtMjguNDUtMS44NmwuNTMyLTEuODZjNi45MTItMy40NTggMTMuNTYtNy43MSAyMC43MzgtMTAuOTAzIDQuNzg3IDMuNzIyIDkuMDQtMi4xMjcgMTMuNTYgMS4zM005NS45MzUgMTEuOTQ0Yy41MzMgMS4zMy0uNTMgMS41OTUtMS41OTUgMi4xMjctMS4zMyAwLTMuMTktLjc5Ny0zLjQ1Ny0yLjEyNkw5Mi40OCA5LjU1YzEuNTk1IDAgMi42NTggMS4zMyAzLjQ1NSAyLjM5NCIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0xMTYuNjc1IDEyLjQ3NWMuNzk4IDEuMDY0LS41MyAyLjM5My0xLjU5NSAyLjM5M2gtLjUzMmMtLjUzMi0uNzk3LjI2Ni0zLjE5IDIuMTI3LTIuMzkzIiBmaWxsPSIjMGI5MDVhIi8+PHBhdGggZD0iTTEyMy4zMjMgMTQuNjAzYy00LjI1NSAzLjQ1Ny05LjU3MiA1LjA1Mi0xNS4xNTYgNS44NS0uNTMyLS4yNjYtLjI2Ni0uNzk4LS4yNjYtMS4zMyA0Ljc4Ny0uNzk4IDkuNTczLTIuMzk0IDEzLjU2LTUuMDUybDEuODYzLjUzMyIgZmlsbD0iIzBkMGIwYSIvPjxwYXRoIGQ9Ik03Mi4yNyAxNi4yYy4yNjYuNzk2LS43OTcgMS4wNi0xLjA2MyAxLjU5M2gtLjUzMmMuMjY3LS41MzIuNTMyLTEuODYgMS41OTYtMS41OTRNOTMuNTQyIDE2Ljk5NmMtLjUzMi41MzItMS44Ni43OTctMi45MjUuMjY1aC0uMjY1Yy41My0xLjA2IDIuMzkzLTEuMDYgMy4xOS0uMjY0TTE4Ni4zNCAyMS41MTZjLjI2NS43OTcgMCAyLjEyOC4yNjUgMi45MjUtMi42NTggMi4xMjgtNC41Mi0xLjMzLTYuOTEtMS41OTUtLjguNTMyLS41MzUgMS41OTYtLjI3IDIuMTI3IDcuNDQ2IDMuMTkyIDE0LjM2IDguMjQzIDIwLjc0MyAxNC4wOTNsLjUzIDEuNTk1Yy0zLjQ1NyAxLjA2NS02LjM4Mi0yLjY2LTEwLjEwMy0yLjM5Mi0yLjEyNy4yNjUtNC41Mi41MzItNi4zODMtLjI2Ny0xLjU5My0xLjMyOC4yNjUtNC43ODUtMi42Ni00Ljc4NS0yLjEyNyAwLTUuNTguMjY2LTYuMTEzLTIuNjYgMS4zMjctNC43ODQtOC4yNDQtOC4yNDItMi4zOTUtMTEuOTYzIDIuNjYtLjUzMiA0LjI1NiAyLjM5MiA2LjY1IDEuNTk1bDEuNTkzLTMuNzIzYzIuOTI0IDAgNC4yNTUgMi42NiA1LjA1MiA1LjA1MiIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0xMzUuODIgMjUuNTA0YzMuMTkyIDMuOTkgMy45ODggMTAuOSAxMC4zNyAxMS43IDguMjQzLTEuMDY0IDE2Ljc1LTEuNTk2IDIzLjY2Ni02LjExNWwuNzk2LjI2NWMuNzk3IDEuNTk0LTEuMzMgMi45MjUtMi45MjQgMy43MjItMi4xMjgtLjI2Ni0zLjQ2IDEuMzI4LTQuNzg3IDIuOTI0LjUzMiA1LjA1MyA1LjMyIDYuNjUgOS4wNDMgOS41NzMgNC4yNTMgMS4zMyA4LjI0Mi0xLjg2IDEyLjIzIDAgLjUzNCAzLjE5LTYuOTEyIDMuNzIzLTQuNTE4IDguMjQ0IDIuMzkgMi4zOTIgNS44NDggMy40NTYgOC43NzMgMS4zMy4yNjUgMy45ODggMi4zOTMgNy40NDQgNi4xMTUgOS44MzcgMS4zMyA5Ljg0IDEzLjAzIDUuMzIgMTguODggOS41NzItNy4xOCAyLjY2LTE1LjQyMyA3LjE4LTIyLjA3IDEzLjgyNy03LjcxMiA4Ljc3NC0xNy41NSAxNi43NTItMjcuOTIgMTkuOTQyIDEuMzMtMTEuNDMzIDYuNjQ4LTIyLjg2NiAxNS45NTItMzEuOTA4LTIuMzkzLTEuODYtNS41ODIuNTMyLTguNTA4Ljc5OC05LjU3MiA0Ljc4Ni0xOS40MSA5LjA0LTI5LjUxMiAxMi4yMzIgMi4zOSA0LjUyIDMuOTg3IDkuODM3IDIuOTI0IDE0Ljg5LTIuNjYtMi45MjUtNy43MTMtMS44NjItMTEuMTctMy43MjItNy45NzYtMy40NTgtMTguNjEyLTguNzc1LTIwLjc0LTE4LjM0Ny0xLjMyOC03LjcxMiAxLjA2NC0xNS4xNTcgNy40NDYtMTkuNjc3IDUuMDUyLTQuNTIgMTIuNzYzLTQuNzg1IDE4LjYxMy0xLjg2IDYuNjQ3IDQuMjU0IDEwLjEwMyAxMS40MzMgOC4yNDMgMTkuMTQ1bC0yLjM5NCA1LjA1MmM0LjI1My4yNjYgOC41MDctMS44NjIgMTIuNDk3LTMuNDU4IDEwLjEtNy4xOCAyMi4zMzMtMTAuNjM1IDM0LjgzLTkuNTczbC44LS43OTdjLTExLjE3LTE0Ljg5LTI2LjU5Mi0yNC4xOTYtNDIuNTQ0LTMwLjU3N2wtMTUuMTU3LTExLjE2OGMtMTQuNjI0IDEwLjEwNC0zMC4zMTIgMTcuNTUtNDUuMjAyIDI3LjEyLTMuMTktLjI2Ni01Ljg1IDIuMzkzLTYuOTEzIDUuMDUzLTEuMDYzIDQuNzg1LTExLjMgNC4xMjMtNy4zMSAxMS4wMzUtMy4xOTIuNzk4LTkuMzctMS4xNC0xOC45NDMgMi43MiAxLjA5NC0xLjU5NC0zLjQ5Ni0uODYzIDUuMzQ4LTQuNjAzLTQuNzQgMi42NzUtNi4yMTYgMS4yMTctMTAuNDcuOTUyLTEuMDY0LS4yNjctMS44NiAxLjg2LTMuNDU3IDEuMzMtLjc5OC0yLjkyNiAyLjEyNy01LjA1NCAzLjcyMy02LjExNyAyLjEyOCAyLjY2IDUuMDUzIDMuOTkgOC4yNDMgMi42NiAyLjY2LTEuMzMgMy45OS00LjI1NCAzLjcyMy02LjkxNCAxLjA2NC0zLjcyMi02LjM4LTQuNzg1LTMuMTktNy43MS4yNjUtMS4wNjMgMi4zOTItMi4xMjcgMS41OTUtMy43MjMtLjI2NS0xLjA2NC0uNzk3LTIuMTI2LS4yNjUtMy4xOSA0LjUyLTEuODYyIDkuNTcyIDAgMTQuMzU4LTEuMzMgNS41ODQgMS44NjIgMTIuMjMyIDIuMTI3IDE4LjA4MiAxLjMzIDIuNjU4LTIuMTI3IDIuMzkzLTYuNjQ3Ljc5Ny05LjA0LS43OTctMi4xMjctMy43MjMtMi4zOTQtMy43MjMtNC43ODcgMS4zMy0xLjMzIDIuNjU4IDAgMy45ODguMjY1Ljc5NyAzLjk5IDQuNTIgNi4zODMgNy45NzcgNy45NzggMS4zMy4yNjYgMi4xMjctLjUzMiAyLjkyNS0xLjMzLjc5Ny0zLjQ1Ni0xLjU5Ni02LjExNC00LjI1NS03LjE3OC0xLjU5NS0xLjMzLTYuMTE1LjUzLTUuMDUyLTIuNjYgNC4yNTQtMi45MjQgNi42NDggMy4xOSAxMC4zNyA0LjI1NCA2LjY0OCAyLjEyNyAxNC4wOTIuNTMgMTkuOTQyLTMuMTkgNi45MTQtMi45MjUtMS4zMy0xMy4yOTYgNy43MS0xNC4zNiAxLjg2MiAxLjU5Ni0uMjY0IDMuOTg4IDEuMDY1IDUuNTg0IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEzNS44MiAyNS41MDRjMy4xOTIgMy45OSAzLjk4OCAxMC45IDEwLjM3IDExLjcgOC4yNDMtMS4wNjQgMTYuNzUtMS41OTYgMjMuNjY2LTYuMTE1bC43OTYuMjY1Yy43OTcgMS41OTQtMS4zMyAyLjkyNS0yLjkyNCAzLjcyMi0yLjEyOC0uMjY2LTMuNDYgMS4zMjgtNC43ODcgMi45MjQuNTMyIDUuMDUzIDUuMzIgNi42NSA5LjA0MyA5LjU3MyA0LjI1MyAxLjMzIDguMjQyLTEuODYgMTIuMjMgMCAuNTM0IDMuMTktNi45MTIgMy43MjMtNC41MTggOC4yNDQgMi4zOSAyLjM5MiA1Ljg0OCAzLjQ1NiA4Ljc3MyAxLjMzLjI2NSAzLjk4OCAyLjM5MyA3LjQ0NCA2LjExNSA5LjgzNyAxLjMzIDkuODQgMTMuMDMgNS4zMiAxOC44OCA5LjU3Mi03LjE4IDIuNjYtMTUuNDIzIDcuMTgtMjIuMDcgMTMuODI3LTcuNzEyIDguNzc0LTE3LjU1IDE2Ljc1Mi0yNy45MiAxOS45NDIgMS4zMy0xMS40MzMgNi42NDgtMjIuODY2IDE1Ljk1Mi0zMS45MDgtMi4zOTMtMS44Ni01LjU4Mi41MzItOC41MDguNzk4LTkuNTcyIDQuNzg2LTE5LjQxIDkuMDQtMjkuNTEyIDEyLjIzMiAyLjM5IDQuNTIgMy45ODcgOS44MzcgMi45MjQgMTQuODktMi42Ni0yLjkyNS03LjcxMy0xLjg2Mi0xMS4xNy0zLjcyMi03Ljk3Ni0zLjQ1OC0xOC42MTItOC43NzUtMjAuNzQtMTguMzQ3LTEuMzI4LTcuNzEyIDEuMDY0LTE1LjE1NyA3LjQ0Ni0xOS42NzcgNS4wNTItNC41MiAxMi43NjMtNC43ODUgMTguNjEzLTEuODYgNi42NDcgNC4yNTQgMTAuMTAzIDExLjQzMyA4LjI0MyAxOS4xNDVsLTIuMzk0IDUuMDUyYzQuMjUzLjI2NiA4LjUwNy0xLjg2MiAxMi40OTctMy40NTggMTAuMS03LjE4IDIyLjMzMy0xMC42MzUgMzQuODMtOS41NzNsLjgtLjc5N2MtMTEuMTctMTQuODktMjYuNTkyLTI0LjE5Ni00Mi41NDQtMzAuNTc3bC0xNS4xNTctMTEuMTY4Yy0xNC42MjQgMTAuMTA0LTMwLjMxMiAxNy41NS00NS4yMDIgMjcuMTItMy4xOS0uMjY2LTUuODUgMi4zOTMtNi45MTMgNS4wNTMtMS4wNjMgNC43ODUtMTEuMyA0LjEyMy03LjMxIDExLjAzNS0zLjE5Mi43OTgtOS4zNy0xLjE0LTE4Ljk0MyAyLjcyIDEuMDk0LTEuNTk0LTMuNDk2LS44NjMgNS4zNDgtNC42MDMtNC43NCAyLjY3NS02LjIxNiAxLjIxNy0xMC40Ny45NTItMS4wNjQtLjI2Ny0xLjg2IDEuODYtMy40NTcgMS4zMy0uNzk4LTIuOTI2IDIuMTI3LTUuMDU0IDMuNzIzLTYuMTE3IDIuMTI4IDIuNjYgNS4wNTMgMy45OSA4LjI0MyAyLjY2IDIuNjYtMS4zMyAzLjk5LTQuMjU0IDMuNzIzLTYuOTE0IDEuMDY0LTMuNzIyLTYuMzgtNC43ODUtMy4xOS03LjcxLjI2NS0xLjA2MyAyLjM5Mi0yLjEyNyAxLjU5NS0zLjcyMy0uMjY1LTEuMDY0LS43OTctMi4xMjYtLjI2NS0zLjE5IDQuNTItMS44NjIgOS41NzIgMCAxNC4zNTgtMS4zMyA1LjU4NCAxLjg2MiAxMi4yMzIgMi4xMjcgMTguMDgyIDEuMzMgMi42NTgtMi4xMjcgMi4zOTMtNi42NDcuNzk3LTkuMDQtLjc5Ny0yLjEyNy0zLjcyMy0yLjM5NC0zLjcyMy00Ljc4NyAxLjMzLTEuMzMgMi42NTggMCAzLjk4OC4yNjUuNzk3IDMuOTkgNC41MiA2LjM4MyA3Ljk3NyA3Ljk3OCAxLjMzLjI2NiAyLjEyNy0uNTMyIDIuOTI1LTEuMzMuNzk3LTMuNDU2LTEuNTk2LTYuMTE0LTQuMjU1LTcuMTc4LTEuNTk1LTEuMzMtNi4xMTUuNTMtNS4wNTItMi42NiA0LjI1NC0yLjkyNCA2LjY0OCAzLjE5IDEwLjM3IDQuMjU0IDYuNjQ4IDIuMTI3IDE0LjA5Mi41MyAxOS45NDItMy4xOSA2LjkxNC0yLjkyNS0xLjMzLTEzLjI5NiA3LjcxLTE0LjM2IDEuODYyIDEuNTk2LS4yNjQgMy45ODggMS4wNjUgNS41ODR6IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjI4OTg1OTQyIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbWl0ZXJsaW1pdD0iMiIvPjxwYXRoIGQ9Ik05Ni4yIDIzLjExYy41MzMgMi42Ni0uNTMgNS4zMi0xLjg2IDcuNzEzLTQuMjU0IDEuODYtNy4xOCA1Ljg1LTEwLjYzNiA3Ljk3N2gtNi42NDdjLTMuNDU2IDMuNDU2LTguNTEgMy45ODgtMTMuNTYgMy45ODhsLS44LS43OTdjNi4zODMtNi4xMTUgMTYuNDg3LTcuNDQ1IDIzLjEzNC0xMi43NjNoLTIuNjU4Yy02LjM4IDMuNDU3LTEyLjc2MyA2LjExNi0xOS42NzYgNy45NzcgMC00LjI1NSAyLjM5NC04LjUxIDYuMzgyLTEwLjYzNiA0Ljc4NiAxLjg2IDcuMTgtMy40NTcgMTAuOS00LjUyIDUuMDUzIDAgOS4wNDItMi4xMjggMTQuMDk0LTEuMzNsMS4zMyAyLjM5M00xNDguODQ4IDI1LjUwNGwtLjc5NyAyLjY2YzIuMzk0IDIuOTI1IDcuOTc4LS44IDguMjQzIDMuNDU2LTMuNDU2IDEuODYtNi45MTIgNC43ODUtMTEuMTY2IDMuMTktMi4xMjgtNC43ODUtOS44NC04LjUwNy02LjM4My0xNC4zNTggMy40NTcgMS41OTYgOC4yNDQgMS41OTYgMTAuMTA0IDUuMDUyTTE5NS4zOCAzMS44ODdjLTIuMTI3IDAtMy45ODgtMi42Ni01LjMxNi00LjUyMi0uMjY4LTEuODYuNTMtMy40NTcgMS44Ni00LjUyIDQuNTIuOCAyLjY2IDYuMzgyIDMuNDU3IDkuMDQyTTIxMC41MzcgMjYuMzAzYzAgLjUzMi0uNTMzIDEuMDYyLTEuMDY1IDEuMDYyLTEuMDYtLjI2NS0xLjU5My0xLjU5NC0uNTMtMi4zOTMuNzk3IDAgMS4zMy44IDEuNTk1IDEuMzNNMTI2LjUxNCAyOC4xNjRjLS4yNjcgMS41OTUtMS4wNjQgMy4xOS0yLjY2IDMuNDU2LTEuODYuMjY3LTIuNjYtMS4zMy0zLjQ1Ni0yLjY2LjUzMi0yLjY1NyAzLjk4OC0xLjA2MyA1LjU4NC0yLjEyNWwuNTMyIDEuMzNNNDkuNjcgMjguOTZjLjI2NSAxLjMzLS41MzIgMy4xOTItMi4xMjggMy4xOTItMS41OTUuMjY1LTIuMTI3LTEuMDYzLTEuODYtMi4zOTMtLjI2Ny0xLjg2MyAzLjcyMi00LjI1NiAzLjk4Ny0uOE0xMDUuMjQyIDMwLjgyM3YuNzk3Yy0xLjg2LTEuMDY0LTMuOTktMS41OTUtNC43ODYtMy40NTYgMS44Ni0xLjU5NiAzLjk4OCAxLjA2MyA0Ljc4NiAyLjY2TTEyMC45MyAzMS44ODdjMCAuNzk3LS43OTggMS41OTQtMS4zMyAxLjU5NC0xLjU5NS0uNTMtMi42NTgtMS44Ni0yLjkyNS0zLjQ1NWwuNzk4LTEuMzNjMS41OTUuMjY2IDIuMzkzIDIuMTI4IDMuNDU3IDMuMTkyTTExNi42NzUgMzQuMjhjLTEuNTk1IDEuMDYzLTMuOTg4Ljc5Ny01Ljg1Ljc5Ny0xLjA2Mi0xLjMzLTIuMTI3LTIuMzkzLTIuMzkyLTMuOTg4IDEuNTk1LS44IDQuNzg2IDIuOTIzIDQuMjU0LTEuMzMgMS44Ni41MyAzLjcyMiAyLjY1NyAzLjk4OCA0LjUyTTE2MC41NDggMzEuMDljLS4yNjUuMjY1LS43OTcgMC0xLjA2My4yNjVsLjI2Ni0xLjMzYy4yNjcuMjY2IDEuMDYzLjI2Ni43OTggMS4wNjRNMjExLjYgMzIuNDE3Yy0uNzk2Ljc5OC0xLjMyOC41MzItMi4zOTMuMjY3LS4yNjYtLjUzMi0uMjY2LTEuNTk1LjUzMi0xLjU5NSAxLjA2NC0uMjY3IDIuMzkyLjI2NSAxLjg2IDEuMzI3TTIwMS40OTYgMzQuMjhjLjI2NSAxLjA2My4yNjUgMi4xMjUtLjc5NyAyLjEyNS0xLjA2NS0uMjY1LTIuMTI4LS43OTctMi4zOTUtMS44Ni0uNzk4LTIuMzkzIDMuOTg4LTMuNDU2IDMuMTktLjI2NU00OC4zNCAzNS4wNzdjLjUzMiAxLjA2My0uNzk4IDEuNTk1LTEuMzMgMS44NjItLjc5Ny0uMjY4LTIuMzkyIDAtMi4zOTItMS4zMzIuNTMtMS4zMjggMy4xOS0yLjM5MyAzLjcyMi0uNTNNMTc5LjY5NSAzNi4xNGMuNzk2IDEuODYtMi4xMjggMi4zOTMtMS41OTggMy43MjMgMS44NjMgMCAzLjE5IDEuMzMgMy40NTYgMy4xOSAwIDEuMzMtMS41OTMgMS41OTYtMi42NTggMS44NjItNi4zOCAyLjkyNS04Ljc3NC0yLjkyNC0xMy4yOTUtNS41ODRsLS4yNjUtLjUzYzIuMTI4LTEuNTk2IDUuMzE3LTIuMTI4IDcuNzEtMy45OSAyLjM5NC4yNjcgNS4zMTgtLjc5NyA2LjY1IDEuMzNNMjMwLjIxMiA0MC4xM2MuNTM1IDEuMDYzLjUzNSAzLjcyLTEuNTkzIDMuMTkuMjY0IDIuMzkyIDMuOTg1IDQuMjUzIDIuOTIzIDcuMThsLTUuMDUyLTQuNTItLjUzIDIuMzkyYy00Ljc4Ny0uNTMyLTEuNTk3LTYuMzgtNS4wNTItOC41MSAwLTEuNTk0IDAtMy40NTcgMS4zMjgtNC41MiAyLjEyNyAyLjY2IDcuNDQ1IDAgNy45NzYgNC43ODdNMzkuODMgNDguMTA1Yy0uMjY1IDIuMTI4LTEuMzI4IDMuOTg4LTIuOTI0IDUuNTg0LTEuMzMtMS4wNjUtMS4zMy0zLjE5LTIuMTI3LTUuMDUzLS41MzMgMy4xOS0xLjMzIDYuOTE0LTMuNzIzIDkuMzA3LTUuMzE4LS43OTctLjI2Ni02LjkxMy0xLjU5Ni0xMC4zNyA0LjI1Ni0yLjEyNyAxLjA2NS04Ljc3NCA2LjY1LTkuMzA2IDIuOTI0IDIuMzkyIDEuODYgNi42NDcgMy43MiA5LjgzN005OS4xMjYgMzguNTMzYzAgLjUzMi0uNTMyLjI2Ny0uNzk3LjI2Ny0uMjY3LS41MzIuNTMtLjI2Ny43OTYtLjI2NyIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0xNDkuOTEzIDQ3LjU3M2MxMS4xNjcgNS4wNTIgMjIuODY3IDEwLjM3IDMxLjY0IDIwLjIwOC05LjMwNCAxLjg2NC0xNi43NSA3LjQ0Ny0yNS43OTIgOS44NC0xLjU5Mi05LjA0LTcuOTc1LTIwLjQ3My0xOC4zNDQtMjIuMDctMTAuMzctMi4zOTMtMjAuNDc0IDAtMjcuNjUzIDcuMTgtNS4wNTQgNS4zMTgtNi45MTQgMTIuMjMtNy43MTIgMTkuMTQ1LTUuODUtMS41OTUtMTEuNDMzLTUuMDUyLTE4LjA4LTYuMTE2LS43OTgtMS4wNjUtMS4zMy0yLjEyOC0xLjMzLTMuNDU3IDIuNjYtMy40NTggNi4xMTYgMS4wNjIgOS4zMDctMS4wNjQgMi4xMjgtMS4zMzIgMy45ODgtMy43MjQgMy45ODgtNi4zODMtLjc5Ny0xLjMzIDAtMi42Ni43OTgtMy4xOTIgMTIuMjMtOS44MzcgMjUuNTI2LTE2LjQ4NSAzOS4zNTItMjIuMzM0IDQuNzg2IDIuMTMgOS4wNDIgNi4xMTcgMTMuODI4IDguMjQzIiBmaWxsPSIjZWQxOTJkIi8+PHBhdGggZD0iTTE0OS45MTMgNDcuNTczYzExLjE2NyA1LjA1MiAyMi44NjcgMTAuMzcgMzEuNjQgMjAuMjA4LTkuMzA0IDEuODY0LTE2Ljc1IDcuNDQ3LTI1Ljc5MiA5Ljg0LTEuNTkyLTkuMDQtNy45NzUtMjAuNDczLTE4LjM0NC0yMi4wNy0xMC4zNy0yLjM5My0yMC40NzQgMC0yNy42NTMgNy4xOC01LjA1NCA1LjMxOC02LjkxNCAxMi4yMy03LjcxMiAxOS4xNDUtNS44NS0xLjU5NS0xMS40MzMtNS4wNTItMTguMDgtNi4xMTYtLjc5OC0xLjA2NS0xLjMzLTIuMTI4LTEuMzMtMy40NTcgMi42Ni0zLjQ1OCA2LjExNiAxLjA2MiA5LjMwNy0xLjA2NCAyLjEyOC0xLjMzMiAzLjk4OC0zLjcyNCAzLjk4OC02LjM4My0uNzk3LTEuMzMgMC0yLjY2Ljc5OC0zLjE5MiAxMi4yMy05LjgzNyAyNS41MjYtMTYuNDg1IDM5LjM1Mi0yMi4zMzQgNC43ODYgMi4xMyA5LjA0MiA2LjExNyAxMy44MjggOC4yNDN6IiBmaWxsPSJub25lIiBzdHJva2U9IiNlNjIwMzAiIHN0cm9rZS13aWR0aD0iLjI4OTg1OTQyIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbWl0ZXJsaW1pdD0iMiIvPjxwYXRoIGQ9Ik0xMDUuMjQyIDQwLjkyN2MuMjY2Ljc5OC0uNzk4IDEuMzMtMS4zMyAxLjU5Ni0xLjA2My4yNjUtMS44Ni0uMjY3LTIuMzkzLTEuMzMuMjY1LTEuNTk2IDMuMTktMi4zOTMgMy43MjItLjI2Nk05Mi43NDUgNDIuNTIzbC0uNTMyLjUzYy0xLjA2NC0uMjY1LTEuODYtMS44Ni0xLjA2NC0yLjY1OCAxLjMzIDAgMS4zMyAxLjMzIDEuNTk1IDIuMTI4TTIxNC43OSA0My4zMmMuNTM0LTEuMzMgMS41OTctMi42NiAzLjE5My0yLjEyNyA2LjkxMi41MzItMS4zMyAxNS4xNTYgNy43MTIgOS41NyA1LjMxNyAyLjkyNi0zLjcyNCAxNC4wOTQgNi4xMTMgMTEuOTY2IDIuNjYgNC4yNTQtMS4wNiA4LjI0Mi0uNTMgMTIuNDk3IDEuNTkzIDEuODYyIDIuNjU4IDQuNTIgNS4wNSA1LjU4NCAxLjU5NS0xLjMzIDQuMjU1LTEuMzMgNC43ODggMS4wNjUgMi4xMjUgMy4xOS0yLjY2IDcuNDQ1IDEuMzI4IDkuMDQgMS4wNjMtLjI2NiAyLjEyOC0uNzk4IDMuMTktLjI2NiAzLjk5IDQuMjU0LTUuNTgzIDguNTA3LjUzNCAxMS40MzMuNTMgMy43MjItMi42NiA2LjExNC0yLjkyNyA5LjgzNy0xLjU5My02LjY0Ny0yLjM5LTEzLjU2LTQuNzgzLTE5Ljk0aC0uOGMxLjA2NiA3LjE3NyA0LjI1NiAxNC4zNTYgMi45MjYgMjIuMDY4LTEuODYtMy43MjMtMy43MjItOS41NzMtOC43NzUtMTAuMTA0LTMuNDU3LTIuOTI1IDQuNzg3LTUuNTg0LS43OTYtNy45NzctLjUzNS0uMjY2LTEuMDY1LTEuMDYzLTEuODYzLS43OTgtLjggMS4wNjMgMS4zMjcgMi4zOTMgMCAzLjQ1NS0xLjA2NiAyLjY2LTUuMzE4LTEuODYtMy45OSAyLjEyNyAyLjkyNCAyLjM5NSA2LjY0OCA0Ljc4NyA3LjQ0NSA4LjUxLjguNTMgMS44NjMgMS4zMyAxLjA2NiAyLjM5My0xLjg2MiAxLjg2LTQuNTIgMS4zMy02LjY0Ny41MzIgMC02LjM4Mi05LjA0LTUuODUtOC43NzQtMTIuMjMyIDQuNTE3IDAgOC41MDYtMi42NiAxMC4xLTYuNjQ3IDEuODYyLTMuMTkgMi4xMjctNy43MS0uMjY2LTEwLjYzNi0yLjEyNC0yLjY2LTQuNTE3LTQuMjU1LTcuNDQ1LTUuNTgzIDIuOTI3LS44IDUuODUgMy45ODcgNy4xOC41My0yLjM5NS00LjI1NS00Ljc4NS05LjU3Mi05LjgzNy0xMS43LTEuODYyLjI2Ny00LjUyLjUzMi02LjM4My0uNzk3LTEuNTk2LTEuODYyIDIuMTI4LTIuOTI2Ljc5Ny00Ljc4Ny0yLjY1OC0yLjEyNy03Ljk3Ny0xLjg2LTcuNDQ1LTYuMTE1IDYuMzgzLTMuNzItNy43MS05LjU3IDEuODYtMTMuMDI3IDMuNDYtMS41OTYgNC43ODggNC43ODYgNy45OCAyLjEyN005MC44ODMgNDQuNjVsLS4yNjYgMS4zM2MtMi4zOTIgMS4wNi0zLjQ1Ni0yLjEzLTQuMjUzLTMuNzI0IDEuMzMtMi4xMjcgMy45ODguNzk3IDQuNTIgMi4zOTNNODUuODMgNDQuMTE3Yy0uMjY1Ljc5OC4yNjcgMS41OTUtLjUzIDEuODYyLTEuMzMgMC0yLjY2LTEuNTk3LTMuMTktMi42NiAwLTMuMTkgMy40NTUtLjUzMiAzLjcyLjc5N00xODQuNDc3IDQyLjUyM2MwIC4yNjUtLjI2NS4yNjUtLjUzLjI2NWwtLjI2Ni0xLjA2M2MuMjY3LjI2NiAxLjA2Ny4yNjYuNzk3Ljc5OE0xOTYuNzEgNDMuMzJjLTEuMDYzLS4yNjctMi45MjUuNTMtMy43MjItLjc5N2wuMjY1LS43OThjMS4zMy4yNjYgMi4zOTQuNTMgMy40NTYgMS41OTVNODEuNTc3IDQ0LjkxNWMtLjUzMi4yNjUtLjI2Ni43OTctLjc5OCAxLjA2NC0xLjMzLS4yNjgtMi4zOTQtMS41OTctMi45MjYtMi42NmwuNTMyLTEuMzNjMS4wNjQuNzk4IDIuNjYgMS41OTUgMy4xOSAyLjkyNU01Ny45MTIgNDYuNzc2Yy0xLjMzIDQuMjU1IDIuNjYgNy43MS43OTcgMTEuNDMzLTIuNjYuMjY1LTYuMzggMS4wNjMtNy43MTIgNC41Mi0uNTMgMS4zMy0uNTMgMy43MjIgMCA1LjA1LTIuMTI2IDIuMTI4LTYuMzggMi42Ni05LjA0IDUuMDU1bC00Ljc4NiA0LjUyYy0xLjMzLTIuMzk0IDEuMzMtNS4zMiAyLjM5My03LjcxbDguMjQzLTEzLjI5NmgtMS41OTVjLTQuNTIgNS4zMTUtNy40NDUgMTEuNDMtMTAuOTAyIDE3LjI4MmwtMS4wNjMuNTNDMzQuNzggNjguNTggMzEuNTkgNjEuNCAzNi4zNzUgNTcuNjhjNS4zMTgtLjggMy43MjItNy43MTIgOC43NzQtOS41NzUgNC43ODUuMjY3IDkuMzA2LTguNTA4IDEyLjc2Mi0xLjMzTTc2LjI2IDQ0LjExN3YuNTMyaC0xLjA2NWMtLjI2NS0uNTMzLjc5OC0xLjA2NSAxLjA2NC0uNTMzTTcyLjAwNSA0NC45MTVjLjI2Ni43OTctLjc5OC41MzItMS4wNjMgMS4wNjQtLjUzMyAwLS44LS41MzMtMS4zMy0uOC4yNjYtLjc5NyAxLjg2LTEuMDYzIDIuMzkzLS4yNjVNNjUuMzU3IDQ1LjE4Yy0uMjY1LjgtMS4zMyAxLjA2NC0yLjEyNy44bC0uMjY2LS4yNjhjLjI2Ni0xLjA2MyAxLjg2LTEuNTk1IDIuMzkzLS41MzJNMjAyLjI5MyA0OS45NjhjLjI2OC43OTYtLjc5NyAxLjU5NS0xLjMyOCAxLjU5NUwxODkuNTMgNDkuMTdsLS41My0xLjA2NWMyLjkyMy0zLjE5IDcuOTc1LTEuNTk0IDExLjctLjI2NS41My41MzIgMS44NiAxLjA2NCAxLjU5MyAyLjEyOCIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0yMjcuNTUzIDY3Ljc4Yy4yNjYgMS44NjQgMi4xMjggMy40NiAxLjU5NiA1LjMyLTMuNzI1LTcuNDQ1LTguNzc3LTE0Ljg5LTE0LjA5NC0yMi4wNyA1LjMxNyAzLjk5IDguNzc2IDExLjE2NyAxMi40OTcgMTYuNzUiIGZpbGw9IiMwZDBiMGEiLz48cGF0aCBkPSJNMTg2LjA3NSA1My42OWMuMjY1IDEuMDYzLS41MzIgMS41OTQtMS4zMjggMS44Ni0xLjA2Ni4yNjctMi4zOTQuMjY3LTMuMTk0LS43OTctLjI2NS0xLjMzIDEuMDY2LTEuNTk2IDEuODYzLTIuMTI4IDEuMDYtLjI2NSAxLjg2LjI2NyAyLjY2IDEuMDY0TTIzMi4zNCA1Ni4wODNjLTEuMzI4Ljc5Ny0xLjg2My0xLjA2NC0yLjM5My0xLjg2MmwuMjY1LTEuMDYzYzEuNTk2LjI2NiAyLjM5MyAxLjg2MiAyLjEyOCAyLjkyNk0yMDcuNjEzIDYwLjMzNmMuNTMgMy40NTcgMS41OTQgNi4zODMgMy40NTYgOS4wNCAxLjMyNyAxLjMzIDQuNzg2IDEuODYzIDMuOTg2IDQuNTItNS4wNTItMS4wNi0xMC45LTEuODYtMTYuMjItMy4xOS0xLjg2LS43OTgtLjUzLTIuOTI1LS4yNjQtNC4yNTQtMy4xOS0xLjU5NS02LjkxNS01LjA1Mi02LjkxNS04LjUwOCA0LjI1NiAxLjMzIDYuMzgzLTQuMjU1IDEwLjM3LTEuNTk1IDEuMzMyIDIuMTI1IDMuNDU4IDMuNDU1IDUuNTg2IDMuOTg2TTIzMC43NDcgNTguNzRjLjI2NS4yNjgtLjI3LjUzMy0uNTM1LjhsLS4yNjUtMS4wNjVjLjI2NSAwIC44IDAgLjguMjY2TTI0My41MDcgNjUuMTIzYzAgLjc5Ny0uNzk4IDEuNTk2LTEuNTk0IDEuNTk2LTEuMDYyLjI2NC0xLjU5Ny0uNTMzLTIuMTI4LTEuMDY1IDAtMS4zMy4yNjYtMi42NiAxLjMzLTMuMTkgMS4zMyAwIDIuMTI2IDEuMzI4IDIuMzkyIDIuNjU4TTIxLjc1IDY1LjkyYy41MzIgMS44Ni0uNzk3IDMuNDU3LTIuMzkzIDMuOTg4LTEuMDYzLjUzMy0yLjM5My0uNzk3LTIuMzkzLTIuMTI3IDAtMS41OTMuNzk4LTIuOTIzIDIuMTI3LTMuNzIgMS4zMy0uOCAyLjEzIDEuMDYzIDIuNjYgMS44Nk0yNDMuNzc1IDcwLjQ0Yy4yNjUgMS4zMy0uMjY4IDIuNjYtMS41OTYgMi42Ni0xLjMzLjI2NS0yLjkyNy0xLjA2NC0yLjkyNy0yLjM5My0uMjY1LTEuMDYzLjI2Ny0xLjg2MiAxLjA2My0yLjEyNyAxLjU5NyAwIDIuNjYuNzk3IDMuNDYgMS44Nk0yMy4wOCA3Mi44MzVjLS4yNjYgMS4zMjgtMS4wNjQgMi42NTgtMi4zOTMgMi42NThsLTEuMDY0LS4yNjZjLS41MzItMS4zMy43OTctMi45MjQgMi4xMjgtMy4xOS41MzIuMjY2IDEuMzMuMjY2IDEuMzMuNzk4TTI1My44OCA3NC45NmwtLjI2Ny4yNjdjLS44LS4yNjYtMi42Ni0xLjg2Mi0xLjMzLTIuOTI0IDEuMDYyLjI2NSAxLjg2IDEuNTk0IDEuNTk2IDIuNjU4TTIzOC45ODggNzUuNDkzYzAgLjUzMi0uMjY1IDEuMDYzLS44IDEuMzMtMS4wNiAwLS43OTYtMS4zMy0xLjA2LTEuODYydi0xLjA2M2MuNzk1IDAgMS44Ni43OTggMS44NiAxLjU5Nk0yNTMuMDggNzkuMjE1bC0uMjY3LjI2NmMtMi4xMjYtLjI2NS0zLjQ1NC0yLjM5LTQuMjUyLTQuMjUzbC4yNjctMS4wNjRjMi4zOS4yNjYgMy4xOSAyLjkyNiA0LjI1MyA1LjA1MiIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik01Ny4xMTUgNzcuMDljLTUuODUgMy40NTUtMTIuMjMyIDUuODUtMTcuODE2IDEwLjYzNSAxLjA2NC01LjMyIDcuNTItMTAuNzI4IDEzLjEwNi0xMS43OTIgMS4zMy4yNjcgMy4zOC4zNTggNC43MSAxLjE1NiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNDkuODkgODAuMjhjMCAuNTMtLjI2NiAxLjMyOC0uNzk4IDEuNTk1LTIuMTI3LS41MzItMi45MjQtMi45MjYtNC41Mi00LjI1NSAxLjU5Ni0zLjcyMyA0LjI1NSAxLjMzIDUuMzE3IDIuNjZNMzMuNzE2IDgxLjg3NWMwIDMuMTktLjc5OCA2LjkxMyAxLjU5NSA5LjMwNS01LjU4MyA1LjU4NC05LjMwNSAxMi41LTE0LjA5IDE4LjYxMy0uOC01LjMxOC02LjY1LTExLjQzMy0xLjU5Ny0xNi40ODUtLjUzMi0yLjM5MyAwLTUuMzE3IDEuNTk2LTcuMTggNC43ODUtLjI2NSA1Ljg0OC03LjQ0NCAxMS4xNjYtNi42NDdsMS4zMyAyLjM5NU0yNTAuNjg3IDkwLjkxNWMtMS44Ni0uNTMyLTMuNzIyLTUuMDUyLTYuOTEyLTMuNzIyLTEuMzMtMS41OTYtMS4wNjYtNC4yNTQtLjI2OC01Ljg1IDEuMDY1LS43OTggMi4xMjggMCAyLjkyNi41MzIgMS41OTUgMi45MjUgNC4yNTQgNS44NSA0LjI1NCA5LjA0TTE2Ljk2NCA5MS40NDdjLS4yNjYgMS4zMy0xLjA2MyAxLjU5NC0yLjM5MyAxLjg2LTEuMDYyLS41My0yLjM5LTEuMzI4LTMuNDU1LS4yNjYgMy43MjIgMi4zOTYgMi4zOTMgNi42NSAyLjY1OCAxMC4xMDctLjc5Ny43OTctMi4xMjcuNTMyLTIuNjU4LS4yNjctMi4zOTQtMy4xOS0xLjg2Mi03LjQ0NC0zLjk4OC0xMC45IDIuNjU4LTMuMTkyLTIuMTMtMTEuNyA0Ljc4NS0xMC4xMDUgMi4zOTMgMi45MjUgMy45OSA1Ljg1IDUuMDUyIDkuNTcyTTI1My42MTMgODYuOTI3bC0uNTMzLjUzMmMtLjc5Ny0uNTMzLTEuNTk1LTEuODYzLTEuMDYzLTIuOTI3IDEuMzI4LjI2NyAxLjU5NiAxLjU5NiAxLjU5NiAyLjM5NCIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik04MS4wNDUgODguNTIzYzMuOTkgMTAuMTAyIDEwLjYzNiAxOS4xNDIgMTcuNTUgMjguMTg0bC41My43OTcgNi4xMTcgNy40NDZjLTEuMzMgOS44MzgtOS4zMDcgMTguNjEzLTE4LjM0NyAyMy4xMzMtMTMuMDMgMy43MjItMjkuMjUgMS44Ni0zOS4wODctOC4yNDMtOC41MS0xMS4xNjgtOS41NzItMjguNDUtMi4xMjctNDAuNDE3QzUxIDkwLjkxNSA1OS41MSA4NS44NjMgNjkuMDggODUuMDY1YzMuOTg4LjI2NiAxMC4xMDQtMS4wNjQgMTEuOTY1IDMuNDU4IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTgxLjA0NSA4OC41MjNjMy45OSAxMC4xMDIgMTAuNjM2IDE5LjE0MiAxNy41NSAyOC4xODRsLjUzLjc5NyA2LjExNyA3LjQ0NmMtMS4zMyA5LjgzOC05LjMwNyAxOC42MTMtMTguMzQ3IDIzLjEzMy0xMy4wMyAzLjcyMi0yOS4yNSAxLjg2LTM5LjA4Ny04LjI0My04LjUxLTExLjE2OC05LjU3Mi0yOC40NS0yLjEyNy00MC40MTdDNTEgOTAuOTE1IDU5LjUxIDg1Ljg2MyA2OS4wOCA4NS4wNjVjMy45ODguMjY2IDEwLjEwNC0xLjA2NCAxMS45NjUgMy40NTh6IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjI4OTg1OTQyIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbWl0ZXJsaW1pdD0iMiIvPjxwYXRoIGQ9Ik0xMDUuMjQyIDExNi4xNzVjLTcuNzEtOC4yNDMtMTQuMzYtMTcuMjgzLTE4LjA4LTI3LjEyMiAxMC45IDQuNTIgMTcuNTQ3IDE1LjY4OCAxOC4wOCAyNy4xMjIiIGZpbGw9IiNlZDE5MmQiLz48cGF0aCBkPSJNMTA1LjI0MiAxMTYuMTc1Yy03LjcxLTguMjQzLTE0LjM2LTE3LjI4My0xOC4wOC0yNy4xMjIgMTAuOSA0LjUyIDE3LjU0NyAxNS42ODggMTguMDggMjcuMTIyeiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTYyMDMwIiBzdHJva2Utd2lkdGg9Ii4yODk4NTk0MiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiLz48cGF0aCBkPSJNMjguMTMgOTguMzZoLS41M2wuMjY2LTcuNDQ1Yy43OTggMS44Ni41MzIgNS4wNTIuMjY1IDcuNDQ1IiBmaWxsPSIjMGI5MDVhIi8+PHBhdGggZD0iTTIxNi4zODcgOTkuNDIzYy0uNzk4IDUuMzE4IDYuMTE0IDcuOTc3IDYuMzggMTMuMjk2IDMuNzI0IDMuOTg3IDEzLjAzIDIuOTI0IDExLjk2NiAxMC42MzUtMS4wNjIgMS41OTUtMi45MjUgMi4xMjctNC43ODYgMS41OTUtMi4xMjgtNC43ODYtNi45MTItMy43MjMtMTAuMTA0LTEuODYtMS44NiAxLjU5NC0yLjkyNiAzLjcyLTEuODYgNS44NDggMS41OTQgMi4zOTIgNS4wNTIgMy40NTcgNC43ODQgNi42NDctMTEuNjk4LS43OTctNi42NDYgMTguMDgtMTkuNjc1IDEzLjI5NS03LjE4LTcuNDQ0LTQuMjU1LTE4LjYxMy02LjExNy0yOC4xODUtNS4zMTgtNS4wNS0xMy44MjYtMi42Ni0yMC43NC00Ljc4N2wuMjY2LS43OTdjMTAuMzctNi45MTMgMTkuNjgtMTYuNzUgMzEuMTEzLTIxLjUzNyAzLjcyMi0uMjY1IDUuMDUgNS41ODQgOC43NzQgNS44NSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yMTYuMzg3IDk5LjQyM2MtLjc5OCA1LjMxOCA2LjExNCA3Ljk3NyA2LjM4IDEzLjI5NiAzLjcyNCAzLjk4NyAxMy4wMyAyLjkyNCAxMS45NjYgMTAuNjM1LTEuMDYyIDEuNTk1LTIuOTI1IDIuMTI3LTQuNzg2IDEuNTk1LTIuMTI4LTQuNzg2LTYuOTEyLTMuNzIzLTEwLjEwNC0xLjg2LTEuODYgMS41OTQtMi45MjYgMy43Mi0xLjg2IDUuODQ4IDEuNTk0IDIuMzkyIDUuMDUyIDMuNDU3IDQuNzg0IDYuNjQ3LTExLjY5OC0uNzk3LTYuNjQ2IDE4LjA4LTE5LjY3NSAxMy4yOTUtNy4xOC03LjQ0NC00LjI1NS0xOC42MTMtNi4xMTctMjguMTg1LTUuMzE4LTUuMDUtMTMuODI2LTIuNjYtMjAuNzQtNC43ODdsLjI2Ni0uNzk3YzEwLjM3LTYuOTEzIDE5LjY4LTE2Ljc1IDMxLjExMy0yMS41MzcgMy43MjItLjI2NSA1LjA1IDUuNTg0IDguNzc0IDUuODV6IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjI4OTg1OTQyIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbWl0ZXJsaW1pdD0iMiIvPjxwYXRoIGQ9Ik0yNDkuODkgOTYuNzY0di41MzJsLS43OTgtMS4zM2MuNTMyLS4yNjUuNTMyLjUzMy43OTcuNzk4IiBmaWxsPSIjMGI5MDVhIi8+PHBhdGggZD0iTTEzOS4yNzcgMTA4Ljk5NmMxMC4xMDQgMTcuMjgzIDI5LjUxNCAyMC43NCAzOS4wODYgMzcuNzU3IDMuNDU2IDUuNTgzIDYuOTE0IDEwLjkwMiAxMS4xNjYgMTUuOTUzLTE0LjYyMiAyMC40NzUtMzUuODk1IDM2Ljk2LTU3LjcgNDYuOC0xOS42NzUtMTQuMzYtNDMuMDc0LTIwLjQ3NC02MS40Mi0zNy43NTggMTEuNyAwIDI0Ljk5NC0xLjMzIDM1Ljg5NS01LjMyIDIuMTI4IDYuMzgzIDUuMDUyIDEzLjI5NiAxMS4xNjggMTguMDgzIDcuNzEgNS4wNTMgMTguODggNy40NDYgMjcuOTIgMy40NTcgNy40NDQtMi42NiAxNC42MjQtMTAuMTA0IDE1Ljk1Mi0xNy44MTUgMS41OTYtOC41MS0uMjY1LTE3LjI4NC01Ljg1LTIzLjQtNy45NzUtNy45NzYtMTguODc4LTEwLjEwMy0yOC4xODQtMTUuOTUyIDIuMTI4LTMuNzIzIDUuMDU0LTYuOTE0IDcuOTc4LTEwLjM3LTUuMDUyLTUuMDUzLTkuNTcyLTEwLjkwMi0xMi4yMy0xNy4yODNsMTYuMjIgNS44NSIgZmlsbD0iI2VkMTkyZCIvPjxwYXRoIGQ9Ik0xMzkuMjc3IDEwOC45OTZjMTAuMTA0IDE3LjI4MyAyOS41MTQgMjAuNzQgMzkuMDg2IDM3Ljc1NyAzLjQ1NiA1LjU4MyA2LjkxNCAxMC45MDIgMTEuMTY2IDE1Ljk1My0xNC42MjIgMjAuNDc1LTM1Ljg5NSAzNi45Ni01Ny43IDQ2LjgtMTkuNjc1LTE0LjM2LTQzLjA3NC0yMC40NzQtNjEuNDItMzcuNzU4IDExLjcgMCAyNC45OTQtMS4zMyAzNS44OTUtNS4zMiAyLjEyOCA2LjM4MyA1LjA1MiAxMy4yOTYgMTEuMTY4IDE4LjA4MyA3LjcxIDUuMDUzIDE4Ljg4IDcuNDQ2IDI3LjkyIDMuNDU3IDcuNDQ0LTIuNjYgMTQuNjI0LTEwLjEwNCAxNS45NTItMTcuODE1IDEuNTk2LTguNTEtLjI2NS0xNy4yODQtNS44NS0yMy40LTcuOTc1LTcuOTc2LTE4Ljg3OC0xMC4xMDMtMjguMTg0LTE1Ljk1MiAyLjEyOC0zLjcyMyA1LjA1NC02LjkxNCA3Ljk3OC0xMC4zNy01LjA1Mi01LjA1My05LjU3Mi0xMC45MDItMTIuMjMtMTcuMjgzbDE2LjIyIDUuODV6IiBmaWxsPSJub25lIiBzdHJva2U9IiNlNjIwMzAiIHN0cm9rZS13aWR0aD0iLjI4OTg1OTQyIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbWl0ZXJsaW1pdD0iMiIvPjxwYXRoIGQ9Ik0xNi45NjQgMTA3LjEzNWMuMjY2LjUzIDAgMS4wNjItLjUzMiAxLjA2Mi0uNzk3LjI2Ni0xLjA2My0uMjY1LTEuNTk1LS41MzItLjUzMi0xLjU5NCAyLjM5My0yLjEyNiAyLjEyNy0uNTNNMjU5LjcyOCAxMTAuMzI1YzAgMS44NjItMS41OTYgMy43MjMtMy40NTYgMy43MjMtMS4wNjUtLjI2Ny0xLjg2LTEuMDY0LTIuMzkzLTIuMTI4LS4yNjctMS44NiAxLjU5Mi0yLjY2IDIuNjU3LTMuMTkgMS4zMjggMCAyLjkyNiAwIDMuMTkgMS41OTVNMTkuODkgMTExLjEyM2MtLjUzMyAxLjMzLTIuMTI4IDIuMTI4LTIuOTI2IDMuNDU3LS4yNjYtMS4wNjQuNzk4LTIuOTI1LS41MzItMy45OS41MzItMS41OTQgMy40NTgtMS4wNjIgMy40NTguNTMzTTI0NC41NzIgMTE1LjM3N2MtLjc5NyAwLTEuMzMtMS4zMy0xLjA2NS0yLjM5M2wxLjA2NSAyLjM5M00yNTMuMDggMTE1LjM3N2MtLjI2Ny43OTgtLjUzMiAxLjA2NC0xLjU5NSAxLjMzLS41MzMtLjI2Ni0xLjg2LS41MzItMS4zMy0xLjU5NmwxLjA2Mi0yLjEyNmMxLjA2Ni4yNjcgMS41OTYgMS4zMyAxLjg2MyAyLjM5M002LjMzIDExNi43MDdjLjI2NCAxLjA2NC0uMjY3IDEuNTk2LTEuMDY1IDIuMTI4LS43OTggMC0xLjg2LTEuMDY0LTEuODYtMS44NjMtLjgtMi4zOTIgMi45MjQtMi4zOTIgMi45MjQtLjI2NU0yNDQuODM3IDEyMC40M2MxLjMzIDIuMTI2LS41MzIgNy4xOCAzLjcyNCA2LjY0NyAxLjU5NS4yNjUgMS4wNjQgMi4zOTIuOCAzLjQ1Ni0xLjA2NyAxLjU5Ni0zLjE5MiAzLjE5LTIuMzk1IDUuMzIgMS4zMjguNzk2IDMuNDU1IDEuNTk0IDIuMTI3IDMuNDU1LTEuMDY0IDMuMTktNi4xMTcgNC41Mi00Ljc4NyA3Ljk3NiAxLjA2My44IDEuNTk4IDEuODYzIDEuMDYzIDIuOTI2bC04LjI0IDguMjQyLS41MzMtMS4zM2MxLjA2Mi01LjMxNyA0LjUyLTEwLjM3IDMuNzItMTUuOTUzaC0uNTNjLTIuMTI4IDcuNzEtMy43MiAxNS45NTMtOS44MzggMjIuMDdoLTEuODYzYzEuMzMyLTIuMTMgMy43MjQtNC43ODggMy4xOTMtOC4yNDRsLTEuODYtMS4wNjRjMi42NTgtMy45ODggNC4yNTQtMTAuNjM2IDEuMDYtMTUuMTU2IDYuMTE4LTEuNTk1LTEuNTkzLTcuNzEgMi4xMjgtMTEuNDM0IDUuMzE4LS43OTcgNi4xMTgtMTQuMDkgMTIuMjMyLTYuOTEzTTkuMjUzIDEyMC40M2MtLjI2Ni43OTctLjUzMiAxLjMzLTEuMzMgMS44Ni0uMjY1IDAtLjUzLS4yNjUtLjc5Ni0uNTMtLjI2Ny0xLjA2NSAxLjMzLTIuNjYgMi4xMjYtMS4zM00zNC43OCAxNDQuMDkzYy0xLjA2NCAzLjQ1OC0zLjQ1NyA2LjM4Mi0zLjQ1NyAxMC4xMDQtNC4yNTUtNC4yNTMtNS41ODQtMTAuMzctNy4xOC0xNS45NTMgMC0zLjE5LTEuMDYzLTUuODUtMi42Ni04LjI0My0uNzk2IDAtMS4zMjguOC0xLjA2MyAxLjU5NyAxLjA2NCAxMC4xMDQgNi45MTQgMTguMzQ3IDkuNTczIDI3LjY1MmwtLjc5OC41M2MtMy40NTYtMi4xMjUtNi4xMTUtNS41ODMtOS44MzgtNi42NDUtLjUzMi0zLjk4OC0xLjg2LTcuNDQ2LTQuNzg2LTEwLjEwNS0uNTMtMi42NTggMy43MjQtNC4yNTQgMS41OTctNy4xNzgtMS41OTYtMi4xMjgtNC4yNTUtNC41MjItMi4xMjctNy4xOCAyLjEyNy0xLjA2MyAxLjg2LTMuNDU3IDIuMTI3LTUuMzE3LjI2NS0uOC0xLjU5Ni0xLjg2MiAwLTEuODYyIDguMjQyIDYuMzgyIDExLjQzNCAxNS42ODggMTguNjEyIDIyLjYiIGZpbGw9IiMwYjkwNWEiLz48cGF0aCBkPSJNMTk5LjEwMyAxNTYuODU3bDUuODUgMy4xOWMtMS41OTQgNC4yNTYgMi45MjYgOS4wNC0xLjg2IDEyLjQ5OC0yLjY2IDAtNi4xMTguMjY2LTYuOTE0IDMuNDU2LS44IDEuNTk3LjI2NCAzLjk5LTEuMDY0IDUuMzE4LTIuMTI4LS41My00Ljc4Ny0yLjkyMy02LjkxNS0uNzk1LTEuMDYzIDMuNDU2LTQuMjUzIDMuNzItNi4zOCA2LjY0Ni4yNjQgNi42NDctMi4zOTUgMTIuNDk3LTIuMzk1IDE5LjE0NWwtMy43MiAxLjA2NGMuNzk2LTMuNDU4IDUuMDUtNy45OCAxLjU5Ni0xMS45NjgtMS4wNjQtMS4wNjMtMi45MjctMi45MjQtNC4yNTUtMS4wNjMtMi4zOTMgMi4xMjYtMi4xMjggNS41ODQtMi4xMjggOC43NzMuNTMyIDEuODYyIDIuNjYgMy4xOTIgMS41OTggNS41ODUtOC4yNDYgMi45MjQtMi4zOTQtMTEuNDMzLTExLjQzNS03LjE4LTMuMTkgMy45ODgtNy43MTIgNi45MTMtOC41MDggMTEuOTY3LTIuMzkzIDUuNTgyLTkuMDQzIDYuOTEtMTEuNDM1IDExLjY5OC0xLjg2LTguMjQ0LTEyLjIzLTQuNzg3LTE4LjA4LTUuNTg1LTEuODYyLTEuMDYtLjI2Ni0zLjcyLTEuMDY0LTUuMzE3LTEuMDYzLTMuNDU1LTYuMTE1LTIuNjU4LTUuODUtNi4xMTVsMTQuNjI1IDkuMzA4YzE0LjYyNC0xMS4xNjggMzEuNjQzLTE3LjgxNiA0NC40MDUtMzIuMTc1IDcuNDQ2LTcuOTc4IDE0Ljg5LTE1LjY4OCAyMy45My0yMS4wMDUtMTIuNzYzLTExLjctMTguODc4LTI3LjY1NC0zMy41MDMtMzguNTU2LTEuMDYzLTEuNTk1LTQuMjU1LTEuODYtMy40NTYtNC4yNTQgMTguODggMi45MjUgMjQuNDYgMjMuNCAzNi45NiAzNS4zNjQiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjU5LjQ2MyAxMjMuMzU1Yy4yNjUuNTMtLjI2NyAxLjA2My0uOCAxLjMzLS41My0uMjY3LTEuMzI4LS44LTEuMzI4LTEuNTk2bC41My0uOGMuNTMyIDAgMS4wNjMuNTMzIDEuNTk4IDEuMDY1TTIyOS4xNSAxMjcuMzQyYy4yNjYgMi42NiAxLjU5NyA1LjMyLjc5NyA3LjcxaC0xLjU5NmwtLjI2NiAxLjg2My00LjUxNy0xLjU5NWMyLjY1OC01LjA1My04LjUxLTYuNjQ4LTEuODYzLTEwLjkwMiAyLjkyNS0yLjEyNyA3LjE4LS41MzIgNy40NDUgMi45MjRNMjU5LjE5NiAxMzIuMTNsLS41MzMuMjY1Yy0xLjU5NC0xLjg2Mi0zLjE5LTUuMDUzLTMuOTg3LTcuNDQ1IDIuOTI0Ljc5NyA0LjI1MiA0Ljc4NiA0LjUyIDcuMThNMjU0LjY3NiAxMzAuOGMwIC41MyAwIDEuMDYzLS43OTcgMS4zMy0uOC0uMjY3LTIuMTMtMi4xMy0uNTM1LTIuOTI2LjggMCAxLjU5Ni41MzIgMS4zMyAxLjU5Nk0yNTIuMjgzIDEzNS4zMmMwIC43OTctLjc5OC43OTctMS4zMy43OTctLjc5OC0uNTMyLTEuNTk0LTEuODYtLjUzMy0yLjM5MyAxLjA2NS0uMjY1IDEuODYzLjggMS44NjMgMS41OTZNMTIuMTggMTM4Ljc3NmMtMS4wNjUgMS44Ni0uOCA1LjMxNy4yNjQgNy4xOCAxLjMzLjc5NyAzLjQ1NyAxLjU5NSAzLjcyMyAzLjQ1NiAwIDEuMDYzLS43OTggMi4zOTMtMS44NjIgMS41OTQtMi42Ni0uNzk2LTIuMzkzLTMuOTg4LTQuNTItNC41Mi0xLjA2NCAzLjk5IDIuOTI1IDYuMzgyIDQuNzg2IDkuMzA3LTMuMTkuNTMyLTYuMzgtMi42NTgtOS4wNC00Ljc4Ny0yLjkyNC0yLjkyMy41MzMtNS44NS4yNjYtOS4wNC4yNjctMi4zOTMtMy43MjItMy45ODctMS41OTUtNi4xMTQgMi42NiAxLjMzIDcuMTgtMS4wNjQgNy45OCAyLjkyNCIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0xMzguNDggMTQxLjk2N2MwIDcuOTc3LTQuNzg3IDE0LjM1OC0xMC4zNyAxOS45NDNsLjc5Ni43OTYgMjQuMTk3LjI2NmMuNTMyIDUuNTg0LTIuMzk0IDEwLjM3LTYuMTE1IDE0LjYyNS01LjA1MiA1LjMxOC0xMi4yMzIgNy4xOC0xOS45NDMgNS41ODQtNC41Mi0xLjMyOC05LjA0LTUuMDUtMTAuOS05LjgzNy0yLjM5NC02LjM4MiAwLTEzLjI5NSAzLjcyLTE4LjYxNGwzLjk5LTMuNDU3LS43OTgtLjUzMmMtMTQuODkgOS4wNC0zMS4zNzYgMTYuNzUzLTUwLjI1NCAxNC42MjUtNi42NDgtMS4wNjItMTMuNTYtMS41OTQtMTkuOTQzLTQuMjU0bC0xLjA2MyAxLjMzYzAtMS41OTUgMi4xMjctMy40NTYgMC00Ljc4NWwtLjgtLjUzMmMtMy45ODcgMS4wNjQtNC4yNTIgOS4wNC05LjMwNCA0Ljc4NyAxLjMzLTIuMTMgNC41Mi00LjI1NSA0LjI1NC03LjE4LTEuODYyLTIuMTI3LTQuNTItMi4xMjctNi4zODItMy45OS0uNzk3IDIuMzk1LTMuMTkgMS4zMy00LjUyLjUzMy0xLjg2LTIuMzkzIDEuMDY0LTQuMjU1IDEuMDY0LTYuMTE2IDE0Ljg4OCAxNC44OSAzNS44OTUgMjIuMDcgNTYuNjM1IDE0Ljg5IDExLjk2NC0zLjQ1NiAyMy45My0xMS45NjQgMzAuMzEyLTIzLjEzMiA1LjU4NC43OTggMTAuMzcgMy40NTcgMTUuNDIyIDUuMDUyIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTI1NC45NCAxNDAuOTA0Yy0uNTMuNTMyLTEuMDYgMS4wNjMtMS41OTUuNTMyLTEuMDYyLS44LS4yNjUtMi4xMjguNTM0LTIuMzk1IDEuMzI3LS4yNjQgMS41OTIgMS4wNjYgMS4wNiAxLjg2NE0yNTEuNDg1IDE0NC42MjVjMCAuMjY3LS41MzMuNTMyLS43OTguNTMyLTEuMDYzLS41MzItLjI2Ny0xLjU5NC4yNjUtMS41OTQuNTMzIDAgMS4wNjUuNTMuNTMzIDEuMDYyTTM2LjkwNiAxNTUuMjZ2LjUzM2MtLjc5NyAwLTEuMzMtMS4wNjQtMS4zMy0xLjg2LjUzMy4yNjQgMS4zMy41MyAxLjMzIDEuMzI4TTQzLjU1NCAxNTYuMDZjLjUzLjUzLS4yNjcgMS4wNjMtLjc5OCAxLjMzLTEuMDYzLS4yNjctMi4xMjctLjI2Ny0yLjY2LTEuMzMtLjUzLTIuMzk1IDMuMTktMS41OTYgMy40NTggME0zNS41NzcgMTU4LjQ1MmwtLjc5OC0uNTMyaC43OTd6TTI1NC45NCAxNjAuMzEzYy0uMjY0IDEuMDY0LTEuMzI3IDEuNTk3LTIuMzkyIDIuMTI4LTEuMDYzIDAtMS44Ni0uNzk3LTEuODYtMS44Ni0uMjY4LTEuMzMgMS4wNjMtMS44NjIgMi4xMjUtMi4xMjguOC41MzIgMS44NjMuNzk3IDIuMTI4IDEuODZNMjIzLjMgMTU5LjUxNmMtLjggMi4zOTQgMS41OTUgNi42NDgtMi4zOTIgNi45MTMtMS44NjMuMjY1LTIuMzkzLTIuMzk0LTMuNzI0LTIuNjYtMS4wNjMgMi4xMjcgMS44NiAyLjkyNSAyLjEyNyA0Ljc4Ni0uMjY1IDEuODYuNTMzIDQuNTItMS41OTUgNS4zMmwtMy40NTYtMS4zM2MtMS41OTcgMS4zMy0uNTMyIDQuMjU0LTIuOTI1IDUuMzE3bC0xLjMzLTEuMzNjLTEuMDY0LTUuMDUyLTMuNzIyLTEwLjEwNC0zLjQ1Ny0xNS40MjIgNS41ODQgMS4wNjUgMTEuNy4yNjcgMTYuNzUzLTEuNTk0TTI0LjY3NSAxNjIuNzA2Yy0uNzk3IDAtLjc5Ny0xLjMzLS41MzItMS44Ni43OTguMjY1IDEuMDY0IDEuMDY0LjUzMiAxLjg2TTI0OC4yOTMgMTYxLjkxYy41MzQgMS4wNjItLjc5Ny43OTYtMS4zMjggMS4zM2wtLjc5Ny0uMjY4Yy0uOC0xLjU5NSAxLjg2LTIuOTI0IDIuMTI1LTEuMDYyTTQ2Ljc0NSAxNjkuMzU1Yy0xLjA2NCAyLjEyNi0yLjY2IDQuNTItMS4zMyA2LjkxMyAxLjA2NCAyLjEyNyAzLjQ1NyAyLjEyNyA1LjMxOCAxLjMzLjc5OCAwIDEuMDY0LTEuMDY0IDEuODYtLjUzMy0uNzk2IDcuNDQ2IDcuOTc4IDExLjE3IDYuMzgzIDE4Ljg4LjI2NiAwIC4yNjYgMCAuNTMyLjI2Ni0xLjg2MiAxLjg2LTUuNTg0IDEuMzMtOC4yNDMuNTMzLjc5OC0xLjMzLTEuMDY0LTEuNTk2LTEuODYtMS44NjItMS41OTctNi42NDYtOS4zMDgtNC43ODUtMTIuMjMzLTkuMzA3IDIuOTI1LTQuNzg1LTMuOTg4LTUuODUtNS44NS05LjA0IDMuMTkyLTQuNTItNC4yNTQtMTMuMDMgMy43MjMtMTQuMDkyIDMuNzIzIDIuMzk0IDkuMDQgMi42NiAxMS43IDYuOTE1TTUzLjY1OCAxNjQuODM0YzEuMzMgMS4zMyA0Ljc4NiAzLjQ1NyAyLjkyNSA0Ljc4Ni41MzIgMS4wNjQuNzk3IDIuMzkzLjc5NyAzLjQ1Ny0zLjk4OC0xLjMzLTYuOTEyLTUuNTg0LTguNzc0LTkuMzA2IDIuMTI3LTEuODYgMy45ODggMi42NiA1LjA1MiAxLjA2NCIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0yMzcuMTI3IDE2NS42MzJjLTEuMDYzIDMuMTkgMCA2LjY0NyAzLjQ1NiA3LjE4LjI2OCA0LjUxOC01LjMyIDQuNzg1LTcuNzEyIDcuNzEtLjI2NSAyLjY2IDMuNzI1IDEuODYgMi4xMyA0LjUyLTIuNjYgMi4zOTMtNy43MTIgMi4xMjctOC43NzUgNi4xMTcgMCAxLjA2MiAxLjMyOCAxLjg1OC41MyAyLjkyMy03LjcxLjUzMi04LjI0IDEwLjkwMi0xNS42ODYgMTEuNy0uNTMzLjUzMi0xLjA2NiAxLjMzLTEuODYzIDEuMzMgMS4wNjUtMS44NjIgMi42NTgtMy45OSAxLjMzLTYuMTE2LS43OTgtMi4zOTMtMy4xOTItLjc5OC00LjUyLS43OTggMy4xOS01Ljg1IDQuNTItMTIuNSA4Ljc3NC0xNy44MTctLjI2NS0xLjg2LS43OTctNC43ODYgMS44NjItNC43ODYgNy43MSAxLjMzIDEuODYzLTguNzc0IDguMjQzLTkuNTcyIDUuMzE3IDEuODYyIDguNzc2LTguMjQ0IDEyLjIzMi0yLjM5M001MC40NjggMTcwLjE1MnYuMjY1Yy0uMjY3LjI2Ny0xLjg2Mi0uNTMtMS4zMy0xLjMzLjc5Ny0uMjY0IDEuMzMuNTMzIDEuMzMgMS4wNjUiIGZpbGw9IiMwYjkwNWEiLz48cGF0aCBkPSJNOTguMzMgMTk2Ljc0M2MtMS41OTcuNTMyLTMuOTkgMS4zMjgtNC41MjIgMy40NTYtLjUzIDIuMTI3LS43OTggNC41Mi0uMjY2IDYuOTEySDkyLjQ4YzEuMDYyLTcuOTc3LTYuNjUtMTEuOTY1LTEwLjM3LTE4LjA4bC01LjMyLTEuNTk3Yy0xLjMzLTEuMDYzLTMuMTktNS44NS01Ljg0OC0zLjE5LTEuMzMgMi4zOTItMy40NTggNC41Mi0yLjkyNiA3LjcxLTYuMTE1LTEuODYuNzk4LTkuODM4LTYuMTE1LTExLjQzMi0xLjA2My0xLjU5NiAyLjM5NC02LjExNy0xLjMzLTYuNjQ4bC0yLjM5LTQuNTJjMTEuOTYzIDEyLjIzIDI2LjU4OCAxOC4wOCA0MC4xNSAyNy4zODgiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjMuODc4IDE3My4zNDNjMCAxLjA2My0xLjA2NCAxLjg2LTEuODYyIDIuMTI2LS41MzItLjI2Ni0xLjg2LS4yNjYtMS44Ni0xLjMzIDAtMS4zMy43OTctMi4zOTIgMS44Ni0yLjY2IDEuMDY0LjI2OCAxLjU5NS44IDEuODYyIDEuODYzTTI1MC4xNTUgMTc4LjM5NWMtLjc5NiAxLjA2NC0xLjMyOCAyLjY1OC0yLjkyNCAyLjkyM2wtMS44NjItLjc5NWMtLjUzLjc5NS0uNTMgMS44Ni0xLjMyOCAyLjEyNi0xLjU5NiAwLTIuMTI3LTEuNTk3LTIuMzkzLTIuNjYtLjI2Ni0uNzk4IDAtMS41OTUuNTMyLTIuMTI3IDEuMDYtLjI2NiAxLjU5NS43OTggMi4xMjUgMCAuMjY3LTEuNTk1LTEuMzMtMy4xOSAwLTUuMDUyIDEuODYzLjUzMyAxLjg2MyAzLjQ1OCAzLjcyMyA0LjI1NSAxLjA2NC0xLjg2LTEuMzMtMy4xOS0uNTMyLTUuMDUyIDIuMTI4Ljc5OCAxLjU5NiA0LjI1NSAyLjY2IDYuMzgyIiBmaWxsPSIjMGI5MDVhIi8+PHBhdGggZD0iTTUwLjQ2OCAxODYuOTA0YzEuMzMuNzk3IDIuOTI0IDIuOTI1IDMuOTg4IDQuNTItNS41ODQtMi45MjUtMTAuMTA0LTkuMDQtMTMuODI3LTE0LjA5NGwtMi4xMjgtNS4wNWM1LjA1MiAzLjk4OCA3LjE4IDkuODM3IDExLjk2NiAxNC42MjQiIGZpbGw9IiMwZDBiMGEiLz48cGF0aCBkPSJNMjA4LjY3NiAxODAuNzg4Yy0xLjMzLTIuMzkzLTIuMzkzLTUuMDUyLTMuMTktNy45NzdsLjUzLS41M2MyLjEyOCAyLjEyNiAzLjE5IDUuMzE3IDIuNjYgOC41MDhNMTguMjk0IDE3My44NzVjLjI2Ni41My0uMjY2IDEuMDY0LS43OTggMS4zMy0uNzk4LjUzLTEuODYtLjI2Ni0yLjEyNy0xLjA2NSAwLTEuODYgMi45MjQtMS44NiAyLjkyNC0uMjY1TTIwMC45NjUgMTc3LjMzYy4yNjYuOC0uNzk3IDEuNTk3LTEuNTk3IDEuNTk3LS43OTYuMjY1LTEuMzI4LS43OTgtMS4zMjgtMS4zMyAwLTEuMDYzLjI2NS0yLjEyOCAxLjMyOC0yLjM5My44LjI2NSAxLjg2My43OTcgMS41OTcgMi4xMjYiIGZpbGw9IiMwYjkwNWEiLz48cGF0aCBkPSJNMjI4LjM1IDE3Ny44NjNjLTIuMTI1IDcuNzEtOC41MDcgMTQuODktMTUuMTU0IDIwLjQ3NCAzLjE5LTQuNzg1IDcuNzEyLTguNTA4IDEwLjktMTMuNTYgMS42LTIuMTI4IDIuMTMtNS41ODUgNC4yNTUtNi45MTQiIGZpbGw9IiMwZDBiMGEiLz48cGF0aCBkPSJNMjQyLjE4IDE4Ny45NjdjLTIuNjYuMjY3LTEuMzMtMy43MjMtMi42Ni01LjU4NC0uNzk3LS43OTgtMi45MjUtMS44Ni0xLjA2My0yLjY2IDEuMzI4IDIuMzk0IDMuOTg3IDUuMDUzIDMuNzIyIDguMjQ0TTIwOC4xNDQgMTg3LjE3Yy0uOCA1LjMxOC0yLjY2IDEwLjktNi45MTMgMTQuMzU4IDEuNTk3LTYuNjQ3IDEuMzMtMTQuNjI0IDQuNTItMjEuMDA1IDIuMTMgMS41OTQgMCA1LjA1IDIuMzk0IDYuNjQ2TTIwMi4wMjggMTgxLjU4NWMwIC41MzItLjI2NyAxLjMzLTEuMDYzIDEuNTk2SDE5OS45Yy0uNTMyLTEuMzI4IDEuMzMtMS44NjIgMi4xMjgtMS41OTVNMTk1LjkxMyAxOTEuMTZjLjc5NiA2LjExNS01LjMxOCAxMC4zNjgtOS4wNDIgMTUuMTU1LTEuMDYyLjc5Ny0yLjEyMyAxLjg2LTMuNzIgMS41OTUtMi45MjUtMi45MjUtLjc5Ny03LjQ0NiAwLTEwLjkwMiAwLTQuMjU1LTEuMDY2LTExLjE2OCA1LjMxOC0xMS43Ljc5Ni0uNzk3IDEuMDYtMy45OSAzLjE5LTIuNjYgMi45MjUgMi4xMjggMS4zMyA2LjExNyA0LjI1NSA4LjUxTTE5OS45IDE4OS4yOTdjLS4yNjUgMy40NTYgMCA3LjcxLTIuOTI1IDkuODM4LS43OTYtMS44NiAxLjg2Mi0zLjE5IDIuMTI4LTUuMDUyIDEuMzMtMy45ODgtMi42Ni01LjU4NC0yLjY2LTkuMDQgMS41OTcuNzk3IDMuNzI1IDIuMTI2IDMuNDU3IDQuMjU0TTI0MC4wNSAxOTEuMTZsLS43OTcuNzk2Yy0yLjEyNi0xLjA2NC0yLjkyNC0zLjcyMi0yLjEyNi01Ljg1bC41My0uNzk4YzIuMzk0Ljc5OCAyLjEyOCAzLjcyNCAyLjM5NCA1Ljg1TTg1LjAzNCAxOTYuNDc2Yy43OTcgMS4wNjQuNzk3IDMuMTkgMCA0LjUyLTIuMTI3Ljc5Ny0xLjg2Mi0zLjcyLTQuNTItMi4zOTIgMCAyLjkyNC0zLjQ1NyAyLjY2LTUuNTg0IDIuMzkzLTMuNzIzLTEuMzMtMy40NTctNS41ODUtNC43ODctOC43NzUgMC0yLjM5MyAwLTUuMDUzIDIuMzkzLTYuMTE2IDEuODYyIDYuOTEyIDExLjE2OCAyLjM5MyAxMi40OTggMTAuMzdNMzcuNzA0IDE5MC44OTJjMi4xMjcgMS4zMyA1LjMxOCAwIDYuMzggMi45MjUtNC4yNTMgMS4zMy04LjUwNy0uOC0xMi43Ni0xLjA2NC0xLjA2NSAxLjA2NC41MyAyLjEyOCAxLjMzIDIuMzk0IDIuOTIzIDEuMDY0IDYuNjQ1Ljc5NyA5LjMwNCAyLjEyOC0yLjkyNCAyLjEyNS03LjQ0NCAyLjEyNS0xMS40MzMgMi42Ni0yLjkyNC0uMjY4LTEuODYtMy40Ni0zLjE5LTUuMDU0LTEuNTk2LTEuNTk1LTUuMzItMS4zMjgtNS4wNTMtNC41MiAzLjE5LS41MyA1Ljg1LTIuNjYgOC43NzUtMy45ODggMy4xOS0uNTMyIDMuOTg4IDMuNzIzIDYuNjQ3IDQuNTJNMjM2Ljg2IDE5MS40MjRjMCAuNTMyIDAgMS4wNjQtLjUzIDEuMzMtMS41OTctLjI2Ni0yLjEzLTEuMzMtMi4zOTQtMi42NmwuNTMyLS43OTdjMS4wNiAwIDEuODYgMS4wNjMgMi4zOTMgMi4xMjdNMjMyLjg3IDE5MS45NTZjMCAuNTMyLjI3IDEuNTk2LS41MyAxLjU5Ni0xLjMyOCAwLTIuMzkzLTEuNTk2LTIuOTI0LTIuMzkzdi0xLjU5N2MxLjU5Ni0uNTMgMi45MjQgMS4wNjQgMy40NTUgMi4zOTNNNTcuOTEyIDE5NS40MTJjLTEuNTk1IDAtMy4xOS0xLjU5NS0zLjE5LTMuNDU2IDEuMDYzIDEuMDYyIDIuOTI0IDEuODYgMy4xOSAzLjQ1Nk0xNzUuNzA0IDE5Ny4wMDhjMCAuNzk3LS43OTYgMS4zMy0xLjMzIDEuODYtMS4zMy4yNjctMS4zMy0xLjU5My0xLjA2My0yLjEyNS41MzMtMS4zMyAyLjY2LS44IDIuMzk0LjI2NSIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0xODkuMjY0IDE5Ni43NDNjLS41MyAzLjcyLTIuMTI3IDcuNDQ0LTQuNzg3IDkuODM3IDEuMDY2LTMuMTkgMi4zOTQtNy4xOCA0Ljc4Ny05LjgzNyIgZmlsbD0iIzBkMGIwYSIvPjxwYXRoIGQ9Ik0xMDQuNzEgMjAwLjczYzAgMi4zOTMtMS41OTUgNC4yNTUtMi42NiA2LjM4Mi0uNTMtMy4xOS0xLjA2My02LjY0OC0yLjY1OC05LjU3MiAyLjEyNy4yNjUgMy45OSAxLjU5NSA1LjMxNyAzLjE5TTcwLjk0MiAyMDEuNzkzYzUuMzE3LS4yNjUgOC4yNDIgNC41MjIgMTAuMzcgOC41MSAxLjg2IDEuMzMgNC41MiAyLjM5MyA1LjMxNyA0Ljc4Ni0zLjE5MiA1LjU4Mi03Ljk3Ny0xLjA2NS0xMS43LTMuMTkzLTIuMTI3LTIuMTI1LTQuNTItNC41MTgtNi45MTQtNS44NDhsLS41MzIuMjY1YzMuOTkgNS44NSA5Ljg0IDEwLjEwMyAxNS42ODggMTMuMDI4Ljc5OCAxLjMzLTEuODYgMi4xMjgtLjUzIDMuNzIyLTMuNDU4LjgtOC43NzYgMS4zMy0xMS4xNy0xLjU5NCAwLTIuMTI3LjI2Ny02LjExNS0zLjE5LTUuMzE3LTMuMTkuNzk2LTUuODUtLjc5OC03LjE4LTMuNDU3IDEuMzMtNC43ODYtNS4zMTctNy45NzYtMi4zOTMtMTEuOTY2IDIuNjYtMi4xMjYgNi4xMTUtMi4xMjYgOS4wNC0yLjY2bDMuMTkyIDMuNzIzTTk4Ljg2IDIwMi4zMjdjLjI2NiAxLjMzLTEuMDYzIDEuNTk1LTEuODYyIDEuNTk1LTEuMzI4LS4yNjYtMS4zMjgtMS44NjItMS4wNjMtMi42NiAxLjA2My0xLjU5NSAzLjQ1Ny0uNzk4IDIuOTI1IDEuMDY1TTU1LjUyIDIwNC45ODVjLTEuMDY0IDEuNTk1LTQuMjU1LS4yNjUtNS4wNTIgMS41OTV2My40NTdjLTMuNDU4LS4yNjUtMS44NjItNS4zMTctNS4wNTMtNi42NDggMS44Ni0zLjcyMyA1LjU4My0uMjY3IDguMjQzLjI2Ni43OTguMjY2IDEuMzMuNTMgMS44NiAxLjMzTTIwOC4xNDQgMjAyLjMyN2MwIDUuODQ4LTguNTEgOC41MDgtOC43NzYgMTQuMzU3LTEuMzI4IDIuMTI4LTMuOTg3IDQuMjU1LTYuNjQ1IDIuNjZsLTIuMzk0LS43OTdjLjI2NSAzLjk4OC00LjUyMiA1LjU4Mi03LjQ0NiA3LjE3Ny0xLjMzLS41My0zLjQ2LS4yNjUtNC4yNTUtMi4xMjcgMy45OS0yLjM5MiAxMC42MzQtNS4wNSAxMC45LTEwLjEwMmwtMTEuMTY3IDkuMDRjMS41OTctMy45ODggMy43Mi03Ljk4IDUuODUtMTEuNDM0IDYuMTE2Ljc5NyA3LjE4LTcuNDQ0IDEyLjQ5Ni03LjQ0NCAzLjcyMy0uOCA4LjI0MiAxLjU5NSAxMS40MzQtMS4zM004Ni4zNjQgMjEwLjMwM2wuNzk3IDEuMDY0Yy0zLjcyMi0xLjU5NS00Ljc4NS01Ljg1LTcuOTc2LTcuOTc4IDMuMTktMi4xMjcgMy45ODggMi42NiA2LjY0NyAzLjk5bC41MzQgMi45MjNNMTE1LjA4IDIxMS42MzJjMS4zMyAxLjg2MyA2LjM4IDEuMDY0IDQuMjU0IDUuMDUyLTEuNTk1IDEuMDY0LS43OTggMy40NTctMy4xOSAzLjcyMi00Ljc4Ny0xLjMzLTEwLjkwMi0yLjY1OC0xMi40OTgtOC41MS0xLjg2LTMuNDU1IDIuMzk0LTUuODQ3IDMuNDU3LTguNTA3IDMuNzIyLjc5NyA2LjkxMyA0Ljc4NSA3Ljk3NyA4LjI0Mk0xNjYuMzk3IDIxMy40OTVjMS4wNjYgMS41OTQgMCAzLjQ1NC0xLjA2MiA0Ljc4NC0xLjU5NiAzLjk4OC0zLjk5LS43OTctNi4xMTgtLjUzMi0xLjU5My0uMjY1LTMuNzIuNTMtNS4wNS0uOCAyLjkyNS0yLjY1Ny0uMjY3LTguNzczIDUuMDUtOS41N2wyLjM5NC0xLjMzYzEuMDY2IDIuMzkzLjggNi45MTMgNC43ODcgNy40NDdNOTguMzMgMjA3LjY0NGMtMS41OTcuNzk3LTMuOTkgNC43ODYtNS44NSAxLjg2IDMuMTkgMS4wNjQgMy40NTUtNS4wNSA1Ljg1LTEuODZNMjI3LjU1MyAyMDguNzA4Yy0uNzk3LjI2NS0xLjMyOCAxLjA2NC0yLjM5My43OTctMS4wNjMtLjI2Ni0uNTMtMS4zMyAwLTEuODYuOC0xLjMzIDMuMTktMS4wNjUgMi4zOTMgMS4wNjNNNDQuNjE4IDIwOS41MDVjLjUzIDEuMDYzLS41MzMgMS4wNjMtMS4zMyAxLjMzLS41MzItLjI2Ny0xLjMzLS41MzItMS44Ni0xLjMzIDAtMS44NiAzLjQ1NS0yLjM5MyAzLjE5IDBNMTgwLjIyNSAyMDkuNTA1Yy0yLjEyOCA0LjUyLTUuNTg2IDkuODM4LTEwLjYzNiAxMS4xNjcuNTMtMS4wNjQgMS41OTQtMS44NiAxLjMyNy0yLjkyNC0uNTMtLjUzLTEuMzI4LS4yNjUtMS44Ni41MyAzLjE5Mi0zLjcyMiAzLjk4OC0xMC42MzQgMTAuMzY4LTkuODM3bC44IDEuMDY1TTIxMy4xOTYgMjIwLjQwNmMtMi42NiAwLTIuMTI3LTMuNDU3LTMuOTktNS4wNS0xLjA2MiAwLS43OTUgMi42NTctMi42NTggMS44NmwtMS4zMy0yLjEyN2MxLjA2NS0yLjEzIDMuMTkzLTIuOTI2IDUuMDU0LTMuOTkgMS44NiAyLjM5NSAzLjk4NyA1Ljg1IDIuOTI0IDkuMzA2TTIxNi42NTIgMjIwLjQwNmMtMS44Ni0uNTMtMS4wNjMtMi45MjMtMS41OTYtNC41MmwuMjY4LTEuMDYyYy43OTcgMS41OTQgMi4zOSAzLjcyMyAxLjMyOCA1LjU4Mk0xMDMuOTEyIDIyMC42NzJjNS44NS41MzMgMTAuMzcgNS41ODUgMTIuNzYzIDEwLjM3bDEuMDY0Ljc5OGMtNS44NS0xLjU5NS0xMS43LTMuNzIzLTE3LjAyLTYuMzhsLS41My41M2M1LjA1MiA0LjUyIDExLjk2NSA2LjExNiAxOC4zNDYgOC4yNDQtMy45ODgtMS4zMy04LjI0Mi4yNjUtMTEuOTY1IDEuMzMtMi4xMjYuMjY1LTMuNDU1LTEuODYzLTQuNzg1LTIuOTI1LTQuMjU0Ljc5Ni03LjQ0NS0yLjY2LTEwLjYzNi00Ljc4OC0uMjY3LTMuMTktNS4wNTMtNS41ODQtMi4zOTQtOS4zMDUgMi4zOTMtMi4xMyA1LjU4NC0xLjU5OCA3Ljk3Ny0yLjY2IDMuNDU3LS43OTggNC41MiAzLjE5IDcuMTggNC43ODVNNjMuNzYzIDIyMC42NzJjLjUzLjguMjY1IDIuMzkzLTEuMDY1IDIuMzkzLS43OTctLjI2NS0xLjMzIDAtMi4xMjcuNTMyIDEuMzMgMi4xMjcgNi4xMTcgNC4yNTUgNS4wNTMgNy4xOC0xLjMzLjUzLTMuNDU2IDEuNTk1LTQuNzg2IDAgLjc5OC04Ljc3Ni0xNS40MjItLjc5OC0xMC4xMDQtMTAuOSAzLjE5LTMuOTkgMTAuMzctMi45MjggMTMuMDMuNzk1TTIwNi4yODMgMjI0LjY2Yy0uMjY2LjgtMS41OTYuNTMzLTIuMTI4IDAtLjUzLTEuMDYzLTEuODYyLTIuOTI0LS4yNjYtMy43MiAxLjU5NS41MyAyLjY1OCAyLjM5IDIuMzkzIDMuNzJNMjEwLjUzNyAyMjMuMDY1YzAgLjUzMi0uMjY1IDEuMDY0LS43OTggMS41OTYtMS4wNjQtLjI2NS0xLjU5Ni0xLjMzLTEuNTk2LTIuMTI1bC4yNjctMS4zM2MxLjMzLS4yNjYgMS41OTQgMS4wNjMgMi4xMjcgMS44Nk0yMDAuNyAyMjQuMTNjLS44IDAtMS4zMzItLjUzMy0xLjU5Ny0xLjMzLjUzMi0xLjg2IDIuNjU4LjI2NSAxLjU5NiAxLjMzTTEyNS43MTYgMjI2LjI1N2MuNTMgMi45MjQtMi45MjUgMS41OTUtMy43MjMgMi45MjQtMS41OTUtMS41OTMtMy4xOS0zLjcyLTMuOTg4LTYuMTE1IDIuOTI1LTEuNTk0IDYuOTEzIDAgNy43MSAzLjE5Mk0xNzQuOTA4IDIyNS4xOTNjLjI2NSA0LjI1NC04LjI0NSA0LjI1NC02LjY1IDkuODQtMy43MiA1Ljg0OC0xMC45LTEuMDY1LTE0LjYyMyA0LjI1Mi00LjUyLS43OTctOS41Ny0xLjA2My0xMy44MjctMi45MjUgNy40NDUtLjI2NSAxNS40MjMtLjc5NyAyMS4wMDUtNS4wNTItNS41ODItLjUzMi0xMS4xNjYgMi45MjYtMTcuMjg0IDMuNDU3LTIuNjYtLjUzLTQuNzg2LjUzMi03LjE3OC4yNjcgNi4zOC00LjUyIDEzLjI5NS0xMS4xNjggMjEuODAzLTEwLjEwNCAyLjM5My4yNjUgNS4wNTItLjI2NyA2LjkxNC0xLjg2MyAzLjE5IDEuNTk2IDguMjQtMi45MjQgOS44MzggMi4xMjhNMTM2LjYxNyAyMjUuNDZjLjI2NyAxLjMyOC0xLjg2IDIuMzkyLTIuOTI0IDIuMzkyLS43OTgtLjI2NS0xLjg2Mi0uNTMyLTEuODYyLTEuNTk1LS4yNjQtMS4zMyAxLjU5Ny0xLjU5NiAyLjM5NC0yLjY2IDEuMDY0IDAgMi4zOTMuNTMyIDIuMzkzIDEuODYyTTY4LjI4MiAyMjcuODUydi41MzJjLTEuMDYzLjI2NS0yLjEyNy0xLjA2NC0xLjU5NS0xLjg2Ljc5NyAwIDEuMDY0Ljc5NiAxLjU5NSAxLjMyOE05MC4wODYgMjI4LjkxNmMtMi4zOTMgMy43MjMtNy4xOCAyLjkyNC0xMC45MDIgNC43ODUtLjUzIDAtMS41OTUtLjUzLTEuODYtMS4zMjgtLjUzMy0yLjM5MyAyLjY1OC0yLjM5MyA0LjI1My0zLjE5IDIuNjYgMCA2LjExNi0yLjEzIDguNTEtLjI2Nk0xMzEuMDM0IDIzMi4xMDZsLS41MzIgMi42NmMtMS41OTYuMjY2LTMuOTg4IDAtNC43ODYtMi4xMjcgMC0xLjMzMi43OTgtMi45MjcgMi4zOTMtMi45MjcgMS44Ni0uNzk3IDIuNjU4IDEuMDYzIDIuOTI0IDIuMzkzTTE3NC45MDggMjM4Ljc1M2MtLjI3IDEuMDY0LjUzIDMuNDU4LTEuMzMgMy40NTgtMS44NjMtMS4wNjMtMi4zOTQtMy40NTctMi4zOTQtNS41ODMgMS4wNjUtMy43MjMgMy4xOS43OTcgMy43MjQgMi4xMjZNMTAxLjUyIDI0Mi43NDN2Mi45MjRjLTIuNjYtMi4zOTItNS41ODUtNS41ODQtNi42NDgtOS4wNCAxLjA2My0xLjMzIDIuMTI2LjI2NSAyLjkyNS43OTcuNTMyIDIuMTI4IDIuMTI3IDMuOTg4IDMuNzIyIDUuMzJNODEuMzEgMjM3LjE2Yy0uMjY1LjI2NC0uNzk2IDAtMS4wNjMuMjY0di0xLjA2NGMuNzk4LS4yNjUuNzk4LjI2NyAxLjA2NC44TTE3Ny4zIDIzOS4wMTh2LjhjLS44LS4yNjYtMi4xMjctMi4xMy0xLjMzLTMuNDU4IDEuODYyLS41MyAxLjMzIDEuNTk2IDEuMzMgMi42NThNMTg5IDIzNy4xNmMwIC41My0uMjY3IDEuMDYyLS44IDEuMDYyLS41My4yNjYtLjc5NS0uMjY2LTEuMDYzLS41MzMgMC0uNTMgMS4zMy0xLjg2IDEuODYyLS41M003Ni41MjUgMjM5LjAxOGMtLjI2Ni4yNjctLjc5OCAwLTEuMzMuMjY3bC4yNjYtMS4wNjNjLjUzMyAwIDEuMzMgMCAxLjA2NS43OTZNMTA4LjQzMyAyMzkuMDE4YzAgLjI2Ny0uMjY2LjgtLjUzMi44LS41MyAwLS43OTctLjI2Ni0xLjA2My0uNTMzLS4yNjYtMS4wNjMgMS4zMy0xLjU5NiAxLjU5Ni0uMjY3TTE3MC42NTIgMjQxLjk0NGMuMjY1LjUzMiAwIDEuMzMtLjc5NiAxLjMzLTEuMDY1IDAtMS41OTctMS4wNjMtMi4xMjgtMS41OTUtLjUzMi0zLjE5MiAzLjcyLTIuMzk1IDIuOTI0LjI2NE0xMDMuOTEyIDI0MS4xNDdjLS4yNjYtLjI2Ni0xLjU5NS0uMjY2LS43OTctMS4wNjQuNTMuMjY2IDEuMDY0LjI2Ni43OTcgMS4wNjRNMTYyLjQxIDI0Mi4yMWwtLjI2NiAxLjg2Yy0xLjMzLjUzNC0yLjY2LS43OTUtMy40NTctMS44NmwuNzk4LTIuMTI3YzEuNTk1IDAgMi4xMjYgMS4zMyAyLjkyNiAyLjEyOE05Ny4yNjUgMjQ0LjA3Yy0xLjA2NC0uNTMtMy4xOS0yLjEyNi0yLjY2LTMuNzIgMS4zMy43OTcgMi42NiAyLjEyNiAyLjY2IDMuNzJNMTY2LjM5NyAyNDIuMjFjMCAuNzk4LS4yNjUgMS4zMy0xLjA2MiAxLjU5NS0xLjA2Ni0uNTMtMS41OTYtMi45MjQtLjI2Ni0zLjQ1Ni43OTUgMCAxLjMyNyAxLjA2MiAxLjMyNyAxLjg2TTkzLjU0MiAyNDQuMDdjLTEuMDYzLjUzNC0xLjU5NS0uNTMtMi4zOTMtMS4wNjJsLjUzLS43OTdjMS4wNjUgMCAxLjMzIDEuMDY1IDEuODYyIDEuODZNMTQzLjc5NiAyNTEuNTE2Yy0yLjEyNSAxLjA2NC0zLjcyLTEuMzMtNC41Mi0yLjkyNGwtMS44Ni02LjM4YzMuNDU1IDIuMTI1IDUuMDUyIDUuODQ4IDYuMzggOS4zMDRNMTIwLjEzMiAyNDMuMjc1YzAgMS41OTQtMS41OTYgMS44Ni0yLjY2IDIuOTI0bC0uMjY1LS4yNjZjLjUzMi0xLjA2NSAxLjA2NC0zLjQ1OCAyLjkyNS0yLjY2TTE3MS45ODMgMTMuMDA4bDEuODYgMS44Ni0xLjg2LTEuODZ6TTQ3LjAxIDIyNS40NmwyLjM5NCAyLjM5Mi0yLjM5NC0yLjM5M3oiIGZpbGw9IiMwYjkwNWEiLz48cGF0aCBkPSJNMjE0LjE1MiA5OS4wMjNjMTYuNTUyIDYuMjE2IDIyLjU1Ny0xOC43NjQgNS4xMS0yMi4yMy00LjUxMy0uNTM3LTEwLjI1IDEuMjU1LTEwLjI1IDEuMjU1IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjkzMzMxMDAwMDAwMDAwMDEiIHN0cm9rZS1taXRlcmxpbWl0PSIzLjg2NCIvPjxwYXRoIGQ9Ik00NS4yNTMgODIuOTU1Yy0xNC4wNiA4LjM0Ni0xOS4zMDMgMjAuNjMtMjQuMjAyIDI2LjUzLTMuOTYgNC4wOTItNy40MjggOC40MTYtNy4zOTYgOS42MS4xNSAxLjIyNSA3LjAyMyA2LjQ4OCA4LjkyNiA5LjM4OCA3LjkyMyAxMS42NyAxMS4yMjIgMTUuNDMgMTYuNTgzIDIwLjEzM004Mi43IDY1LjIxMmMwLTMuNjMyIDIuOTQ1LTYuNTc3IDYuNTc3LTYuNTc3czYuNTc3IDIuOTQ1IDYuNTc3IDYuNTc3LTIuOTQ1IDYuNTc3LTYuNTc3IDYuNTc3UzgyLjcgNjguODQzIDgyLjcgNjUuMjF6bS0zMi4zMS0uMDQ0YzAtMy42MzMgMi45NDYtNi41NzcgNi41NzgtNi41NzcgMy42MzMgMCA2LjU3NyAyLjk0NSA2LjU3NyA2LjU3OCAwIDMuNjMyLTIuOTQ0IDYuNTc2LTYuNTc3IDYuNTc2LTMuNjMyIDAtNi41NzctMi45NDQtNi41NzctNi41NzZ6bTE2OS41ODUgNzAuMDcyYzE1Ljg4OC0uODk2IDEyLjQyNSAxMS40MzUgMTEuOTIyIDE0LjI4My0yLjQyNiA3LjY1LTExLjAyIDE2LjYwNS0yOS45MyA5Ljk0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjk5OTk3NTAwMDAwMDAwMDEiIHN0cm9rZS1taXRlcmxpbWl0PSIzLjg2NCIvPjwvc3ZnPg==");
+  height: 16px;
+  margin-bottom: 2px;
+  margin-top: 2px;
+}
+
+.iks {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNzAuMiIgaGVpZ2h0PSI1MjQuNDQiIHZpZXdCb3g9IjAgMCAzNzAuMjAwMDEgNTI0LjQ0Ij48cGF0aCBkPSJNMTgzLjIxLjAwNUMzMC44NzYuMDA1LjA2MyAxMS45NjUuMDYzIDExLjk2NVYxMTUuMnMtMS4yNiAyMC4xNDQgNy41NTQgMjkuNTg3YzguODEzIDkuNDQgOS40NDIgMTQuNDc3IDkuNDQyIDI0LjU1IDAgMTAuMDctLjA2MiAxNjguNy0uMDYyIDE2OC43UzkuOTI0IDUyNC4yMzcgMTg1LjEzIDUyNC40NGMxNzQuNzk1LS4yMDQgMTY4LjAxLTE4Ni40MDMgMTY4LjAxLTE4Ni40MDN2LTE2OC43YzAtMTAuMDczLjYzMi0xNS4xMSA5LjQ0NC0yNC41NSA4LjgxMi05LjQ0MyA3LjU1Mi0yMi4wMzIgNy41NTItMjIuMDMyVjE5LjUyUzMzNC4yODYuMDA0IDE4My4yMS4wMDQiIGZpbGw9IiNjOGM3YzciLz48cGF0aCBkPSJNMjQzLjc4IDQ5Ni41NDdWMTQ1LjkyNGM0My41OSAxLjQwNyA3Mi42OTcgNi4wNCA5MS43ODggOC44MTMgMCAxMC4wNzIuMDU3IDE2MS43NzguMDU3IDE2MS43NzhzMTIuMjA0IDE0Mi44OTctOTEuODQ0IDE4MC4wMzIiIGZpbGw9IiMxYTVkYWQiLz48cGF0aCBkPSJNMjQzLjc4IDQ5Ni41NDdWMTQ1LjkyNGM0My41OSAxLjQwNyA3Mi42OTcgNi4wNCA5MS43ODggOC44MTMgMCAxMC4wNzIuMDU3IDE2MS43NzguMDU3IDE2MS43NzhzMTIuMjA0IDE0Mi44OTctOTEuODQ0IDE4MC4wMzJ6IiBmaWxsPSJub25lIiBzdHJva2U9IiMxYTVkYWQiIHN0cm9rZS13aWR0aD0iMi41MTcyNzA0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMy44NjQiLz48cGF0aCBkPSJNMTI0LjYzOCA0OTYuMDM3di0zNTAuNjJjLTQzLjU4NiAxLjQwNi03Mi42OTQgNi4wNC05MS43ODYgOC44MSAwIDEwLjA3My0uMDU2IDE2MS43NzgtLjA1NiAxNjEuNzc4UzIwLjU5IDQ1OC45MDMgMTI0LjYzOCA0OTYuMDM3IiBmaWxsPSIjMWE1ZGFkIi8+PHBhdGggZD0iTTEyNC42MzggNDk2LjAzN3YtMzUwLjYyYy00My41ODYgMS40MDYtNzIuNjk0IDYuMDQtOTEuNzg2IDguODEgMCAxMC4wNzMtLjA1NiAxNjEuNzc4LS4wNTYgMTYxLjc3OFMyMC41OSA0NTguOTAzIDEyNC42MzggNDk2LjAzN3oiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFhNWRhZCIgc3Ryb2tlLXdpZHRoPSIyLjUxNzI3MDQiIHN0cm9rZS1taXRlcmxpbWl0PSIzLjg2NCIvPjxwYXRoIGQ9Ik0xMzkuNzQ1IDE0NC43ODd2MzU3LjU0NmMxMy40MyAzLjY4MyAyOC4zODMgNS42NjYgNDUuMzg2IDUuNjY2IDE2LjM4IDAgMzAuOTg3LTIuMDIzIDQ0LjAxLTUuNjRsLjAzNy0zNTcuNzNjLTEzLjQ2Mi0uMzA1LTI4LjE4LS40NzMtNDQuMTcyLS40NzMtMTYuNDQ1IDAtMzEuNDkzLjMxNS00NS4yNi42MyIgZmlsbD0iIzIzMWYyMCIvPjxwYXRoIGQ9Ik0xMzkuNzQ1IDE0NC43ODd2MzU3LjU0NmMxMy40MyAzLjY4MyAyOC4zODMgNS42NjYgNDUuMzg2IDUuNjY2IDE2LjM4IDAgMzAuOTg3LTIuMDIzIDQ0LjAxLTUuNjRsLjAzNy0zNTcuNzNjLTEzLjQ2Mi0uMzA1LTI4LjE4LS40NzMtNDQuMTcyLS40NzMtMTYuNDQ1IDAtMzEuNDkzLjMxNS00NS4yNi42M3oiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIzMWYyMCIgc3Ryb2tlLXdpZHRoPSIyLjUxNzI3MDQiIHN0cm9rZS1taXRlcmxpbWl0PSIzLjg2NCIvPjxwYXRoIGQ9Ik0zNDguNDggMTQyLjg5N2M1LjAzNi02LjI5NCA0Ljk5Ny0xOS41MTMgNC45OTctMTkuNTEzVjMwLjg1QzMzMC45NyAyNi4zOSAyODIuNjEyIDE3LjYzIDE4NS43MyAxNy42M2MtOTYuMzE3IDAtMTQ0LjgxMyAzLjc0Mi0xNjcuNDQ0IDguMTgzbC0uMzA0IDk3LjU3cy0uMDA4IDEyLjY4NCA1LjAyOCAxOC45OGMyNC40OTctNC4zMDYgNzAuNTctMTAuMTY2IDE2MC4yLTEwLjE2NiA5MC4xNDUgMCAxNDAuODMzIDYuMzYyIDE2NS4yNyAxMC43IiBmaWxsPSIjMjMxZjIwIi8+PHBhdGggZD0iTTM0OC40OCAxNDIuODk3YzUuMDM2LTYuMjk0IDQuOTk3LTE5LjUxMyA0Ljk5Ny0xOS41MTNWMzAuODVDMzMwLjk3IDI2LjM5IDI4Mi42MTIgMTcuNjMgMTg1LjczIDE3LjYzYy05Ni4zMTcgMC0xNDQuODEzIDMuNzQyLTE2Ny40NDQgOC4xODNsLS4zMDQgOTcuNTdzLS4wMDggMTIuNjg0IDUuMDI4IDE4Ljk4YzI0LjQ5Ny00LjMwNiA3MC41Ny0xMC4xNjYgMTYwLjItMTAuMTY2IDkwLjE0NSAwIDE0MC44MzMgNi4zNjIgMTY1LjI3IDEwLjd6IiBmaWxsPSJub25lIiBzdHJva2U9IiMyMzFmMjAiIHN0cm9rZS13aWR0aD0iMi41MTcyNzA0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMy44NjQiLz48cGF0aCBkPSJNNTQuMTkgOTQuMjA1bC0xNy4wMzcuMjk4LjEyIDYuOTE0Yy4yOSAxNi41OTUgNC4wMjUgMjEuMzcgMjMuOTQgMjEuMDI0IDE1LjYtLjI3IDIyLjYxOC0zLjk2NyAyMi4yNjgtMjQuMDItLjM3My0yMS40MzUtMi42MTItMjIuODk1LTIyLjI4Ny0yNy44NTMtNS40NDYtMS4yOS02Ljc5LTIuMTg4LTYuODgyLTcuNDlsLS4wOTUtNS41MzJjLS4wNy0zLjkxNy4yMjctNS45OTcgNS4wOTUtNi4wODIgNC42NDctLjA4MiA1LjIxLjQ4NSA1LjMzOCA3Ljg2bC4wNyA0LjAzNCAxNi4zNzUtLjI4Ni0uMTc1LTEwLjAyNWMtLjIwMy0xMS42NC01LjU5My0xNi4xNTctMjEuNTI1LTE1Ljg3OC0xNy40OC4zMDQtMjMuMiAyLjM2NC0yMi44NiAyMS44NGwuMDkgNS4wNzJjLjI1OCAxNC44NjUgMy4wODYgMTguMzkgMTcuNDIgMjEuNzEyIDkuNjY4IDIuMjUyIDEwLjg5IDIuNTc3IDEwLjk5IDguMzRsLjE2IDguOTljLjA2IDMuNTctMS4yNDIgNC45NzctNS4zMzYgNS4wNS01LjQyMi4wOTMtNS40Ni0yLjIxMi01LjU2Mi03Ljk3NWwtLjEwNS01Ljk5Mk05NS4yMjQgMTE5LjAyOGwxOC43NDQtLjY4LTEuMzc3LTg2Ljc4LTE4LjY2Ni42NjggMS4zIDg2Ljc5MiIgZmlsbD0iI2RlZGRkZSIvPjxwYXRoIGQ9Ik0xMjkuMjU4IDExNy45MDNsLTEuMzM2LTg3LjQyOCAyNS4xMjctLjQ0YzIxLjgxNS0uMzgyIDI4LjAyMyA0LjAwNSAyOC4zMSAyMC41MmwuMTg1IDEwLjU2NGMuMjM0IDEzLjM1NS00Ljk4NCAxNi40ODMtMTMuNTM4IDE4LjA5IDkuMTA4IDIuMDI3IDEzLjkxNiAzLjUyMiAxNC4xMDUgMTQuMzNsLjE0NSAyMy42OTYtOS40MzMtLjE0Ny0xMC4zODUuMzE0LS42OTYtMjQuNzI0Yy0uMDY0LTMuNjQzLTIuMTc1LTUuMTg1LTkuMDQtNS4wNjVsLTMuNDMuMDYuMjYgMjkuNzMtMTAuMzg3LjMxNC05Ljg5LjE4M3ptMTkuMjczLTcyLjcyN2wuNDggMjcuNDQzIDMuOTIzLS4wN2M3LjIzLS4xMjcgOC40MjMtMi4wOSA4LjMyMy03Ljc5OGwtLjIzLTEzLjIzNmMtLjA4LTQuNDkyLTEuOTU0LTYuNTI1LTYuMzY2LTYuNDQ4bC02LjEzLjEwOCIgZmlsbD0iI2RlZGRkZSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTE5Ni4xMTUgMTE3LjU1bDE4LjI1Ni0uMTQ2VjI5Ljc4OGwtMTguMjU1LS4xOTd2ODcuOTZNMjc2LjkyNSAzNC4zMzVsLTE4Ljc4LTEuMy0xLjMyIDY2Ljc0NGMtLjA1OCAzLjMyMy0xLjQwMiA1LjQzNi01LjMyIDUuMzY4LTMuOTE2LS4wNjgtNS4xODYtMi4yMjgtNS4xMjYtNS41NWwxLjA3Ni02Ny4zOTgtMTkuODY3LTEuMDM2LS45MDcgNjcuNDk2Yy0uMzM0IDE5LjExIDguNzY1IDIxLjY0NCAyNC41NTIgMjEuOTIgMTUuNzg2LjI3NSAyNC4yMTMtMS42NiAyNC41NDYtMjAuNzdsMS4xNDUtNjUuNDc1TTMwNS43NCA5My4zNzVsLTE3LjAxNy0uODkyLS4zNjYgNi45NzZjLS44NzcgMTYuNzQgMi41MTQgMjEuODEyIDIyLjQwNCAyMi44NTUgMTUuNTguODE2IDIyLjg0My0yLjQxOCAyMy45MDMtMjIuNjQ0IDEuMTMyLTIxLjYyMy0uOTk4LTIzLjI1LTIwLjI3Ni0yOS42MjMtNS4zNDItMS42OC02LjYyLTIuNjgtNi4zNC04LjAyNmwuMjkyLTUuNThjLjIwOC0zLjk1Mi42NDgtNi4wMjcgNS41MS01Ljc3MiA0LjY0LjI0MyA1LjE2My44NTMgNC43NzMgOC4yOTNsLS4yMTQgNC4wNyAxNi4zNTQuODU3LjUzLTEwLjExNGMuNjE1LTExLjc0Mi00LjQ0NS0xNi42Ny0yMC4zNTUtMTcuNTA0LTE3LjQ2My0uOTE1LTIzLjMxMi43Ni0yNC4zNCAyMC40MDZsLS4yNjggNS4xMTZjLS43ODcgMTQuOTk2IDEuNzg1IDE4Ljc0NSAxNS44NSAyMy4wOTYgOS40ODcgMi45NDUgMTAuNjgzIDMuMzU3IDEwLjM4IDkuMTdsLS40NzUgOS4wN2MtLjE5IDMuNjAzLTEuNTg4IDQuOTI4LTUuNjc4IDQuNzEzLTUuNDE0LS4yODMtNS4yOTMtMi42MDctNC45ODctOC40MmwuMzE3LTYuMDQ1IiBmaWxsPSIjZGVkZGRlIi8+PHBhdGggZD0iTTI2Mi40NTYgMTk5LjMxYzAgOC4yMyAzLjU2OCAxMC4xMDUgMTIuNTg0IDEwLjEwNXMxMi41ODUtMS44NzYgMTIuNTg1LTEwLjEwNHYtMjMuMjk0YzAtOS41LTMuNTctMTEuMzc2LTEyLjU4NS0xMS4zNzYtOC41OTIgMC0xMi43MDcgMi4wNi0xMi41ODQgMTEuMzc2djIzLjI5NXptMTAuMDQzLTI1LjUzM2MwLTEuNTEzLjcyNC0xLjk5NyAyLjU0LTEuOTk3IDEuODE1IDAgMi41NC40MjQgMi41NCAxLjYzM3YyNi44NjZjMCAxLjUxLS43MjUgMS45OTYtMi41NCAxLjk5Ni0xLjgxNiAwLTIuNTQtLjQ4NS0yLjU0LTEuOTk3di0yNi41MDMiIGZpbGw9IiNkZWRkZGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0yOTMuMjYgMTcyLjYyOGgxMi4zNDNsLTkuNjIgMzYuMzAzaDEwLjE2NGw5LjM3Ny0zNi4zNjN2LTcuNDQzSDI5My4yNnY3LjUwNE00OS4xNjIgMTc3LjIyNWw1LjM4NSA1LjI2NCA2LjQ3NC05Ljg2MmguMTIydjM2LjMwM2gxMC4wNDR2LTQzLjgwNkg1OC40OGwtOS4zMTggMTIuMSIgZmlsbD0iI2RlZGRkZSIvPjxwYXRoIGQ9Ik04MS4xMTUgMjAxLjM2N2MwIDUuNjkuOTA4IDguMDQ4IDExLjA3MiA4LjA0OCAxMS4wNzMgMCAxNC4zNC0xLjA5IDE0LjM0LTE0Ljc2M1YxNzQuMDJjMC03LjgwNy0zLjE0Ni05LjM4LTEyLjc2Ni05LjM4LTEyLjEgMC0xMy4wMDggMi4xOC0xMy4wMDggMTUuMzY4IDAgOC4zNS42NjYgMTEuMzc2IDkuMTM3IDExLjM3NiAzLjYzIDAgNC45LS45MDcgNi4yMy0zLjE0N2guMjQzdjExLjU1OGMwIDIuMTE3LTEuMDMgMi40OC0yLjkwNSAyLjQ4LTIuNDIgMC0yLjY2Mi0uNjA0LTIuNjYyLTIuMTc4di00LjM1N2gtOS42OHY1LjYyN3ptOS42OC0yNy41M2MwLTEuNjMzLjYwNi0yLjA1NyAyLjg0NS0yLjA1NyAyLjI0IDAgMi44NDQuNDI0IDIuODQ0IDIuMDU3djguNDcyYzAgMS42OTMtMS4wMyAyLjI5OC0yLjg0NCAyLjI5OC0yLjMgMC0yLjg0NC0uNjY3LTIuODQ0LTIuNDJ2LTguMzUiIGZpbGw9IiNkZWRkZGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0yMjUuNzQ4IDM4NC4zMjVsLTI1LjU5NiAxOC41OTggOS43NzYgMzAuMDkyLTI1LjU5Ni0xOC41OTYtMjUuNTk3IDE4LjU5NSA5Ljc3Ny0zMC4wOTItMjUuNTk3LTE4LjU5NmgzMS42NGw5Ljc3Ny0zMC4wOSA5Ljc4IDMwLjA5IDMxLjYzNi0uMDAyIiBmaWxsPSIjZmRlMDEyIi8+PHBhdGggZD0iTTIyNS43NDggMzg0LjMyNWwtMjUuNTk2IDE4LjU5OCA5Ljc3NiAzMC4wOTItMjUuNTk2LTE4LjU5Ni0yNS41OTcgMTguNTk1IDkuNzc3LTMwLjA5Mi0yNS41OTctMTguNTk2aDMxLjY0bDkuNzc3LTMwLjA5IDkuNzggMzAuMDkgMzEuNjM2LS4wMDJ6IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZGUwMTIiIHN0cm9rZS13aWR0aD0iLjQzNzcyMjM5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMy44NjQiLz48L3N2Zz4=");
+  margin-left: 1px;
+  margin-right: 1px;
+  width: 14px;
+}
+
+.match {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.divider {
+  margin: 0 8px;
+}
+
+.result {
+  font-weight: bold;
+  font-size: 20px;
+  margin-top: 4px;
+}
+
+.standings {
+  font-size: 12px;
+}
+
+.team {
+  align-items: center;
+  display: flex;
+}
+
+.team-name {
+  margin-left: 4px;
+}
+
+.title {
+  align-items: center;
+  display: flex;
+  font-weight: 600;
+  height: 40px;
+  margin-top: 8px;
+  top: 0;
+}
+
+.bottom-filler {
+  height: 80px;
+}
+
+.nav {
+  background-color: #fff;
+  bottom: 0;
+  box-shadow: 0 0.4px 1px rgba(0, 0, 0, 0.026), 0 1px 2.3px rgba(0, 0, 0, 0.045),
+    0 1.9px 4.4px rgba(0, 0, 0, 0.065), 0 3.4px 7.8px rgba(0, 0, 0, 0.094),
+    0 6.3px 14.6px rgba(0, 0, 0, 0.145), 0 15px 35px rgba(0, 0, 0, 0.25);
+
+  height: 50px;
+  position: absolute;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/stacking-cards/license.txt b/stacking-cards/license.txt
new file mode 100644
index 0000000..0392828
--- /dev/null
+++ b/stacking-cards/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Mikael Ainalem (https://codepen.io/ainalem/pen/wvoxPwK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/stacking-cards/src/index.html b/stacking-cards/src/index.html
new file mode 100644
index 0000000..3b0b8d5
--- /dev/null
+++ b/stacking-cards/src/index.html
@@ -0,0 +1,219 @@
+<div class="phone-frame">
+  <div class="phone-screen">
+    <div class="content">
+      <div class="list">
+        <svg class="golazo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 21" height="31.8" width="66">
+          <path d="M16.532 12.423H13.03v1.79h1.513v.775c-.138.138-.763.538-1.864.538-1.39 0-2.466-1-2.466-2.627 0-1.415.9-2.503 2.465-2.503 1.175 0 1.925.7 2.113.95l1.35-1.4c-.45-.564-1.5-1.527-3.564-1.527C9.85 8.42 8 10.434 8 12.936c0 2.815 2.052 4.567 4.53 4.567 2.013 0 3.076-.663 4.002-1.376zM22.01 17.503c2.765 0 4.592-1.977 4.592-4.554 0-2.54-1.827-4.53-4.592-4.53-2.764 0-4.59 1.99-4.59 4.53 0 2.576 1.826 4.553 4.59 4.553zm0-7.08c1.402 0 2.365 1.087 2.365 2.526 0 1.475-.976 2.55-2.365 2.55-1.388 0-2.364-1.075-2.364-2.55 0-1.44.963-2.528 2.364-2.528zM32.47 17.34v-1.914h-2.627V8.583h-2.14v8.757zM38.275 15.376l.626 1.964h2.152l-3.027-8.757h-2.252l-3.027 8.757h2.15l.627-1.964zm-.55-1.752h-1.652l.826-2.777zM48.306 17.34v-1.89h-3.954l3.916-5.516v-1.35h-6.655v1.888h3.778l-3.877 5.504v1.364zM53.41 17.503c2.763 0 4.59-1.977 4.59-4.554 0-2.54-1.827-4.53-4.59-4.53-2.766 0-4.593 1.99-4.593 4.53 0 2.576 1.827 4.553 4.592 4.553zm0-7.08c1.4 0 2.363 1.087 2.363 2.526 0 1.475-.976 2.55-2.364 2.55-1.39 0-2.366-1.075-2.366-2.55 0-1.44.963-2.528 2.365-2.528z" />
+          <path d="M3 18.94V3h60v15.94" fill="none" stroke="#000" stroke-width="2" />
+        </svg>
+        <p>
+          Lorem FC scores two in four-four-two, goal saved by center-half
+          goalie. Pass the ball striker scores hat-trick and knocks referee
+          over in one-two UEFA game.
+        </p>
+        <div class="ads">Ads by Annoying Ads Inc.</div>
+        <div class="matches">
+          <div class="matches-title">MATCHES</div>
+          <div class="top-filler"></div>
+          <div class="cards">
+            <div class="card">
+              <div class="match">
+                AIK
+                <div class="crest aik"></div>
+                <span class="divider">-</span>BKH
+                <div class="crest bkh"></div>
+              </div>
+              <div class="result">1 - 1</div>
+            </div>
+            <div class="card">
+              <div class="match">
+                MFF
+                <div class="crest mff"></div>
+                <span class="divider">-</span>IFK
+                <div class="crest ifk"></div>
+              </div>
+              <div class="result">2 - 0</div>
+            </div>
+            <div class="card">
+              <div class="match">
+                KFF
+                <div class="crest kff"></div>
+                <span class="divider">-</span>IFE
+                <div class="crest ife"></div>
+              </div>
+              <div class="result">1 - 0</div>
+            </div>
+            <div class="card">
+              <div class="match">
+                NOR
+                <div class="crest nor"></div>
+                <span class="divider">-</span>DFF
+                <div class="crest dff"></div>
+              </div>
+              <div class="result">1 - 3</div>
+            </div>
+            <div class="card">
+              <div class="match">
+                HIF
+                <div class="crest hif"></div>
+                <span class="divider">-</span>DIF
+                <div class="crest dif"></div>
+              </div>
+              <div class="result">2 - 2</div>
+            </div>
+          </div>
+        </div>
+        <div class="title">TABLE</div>
+        <table class="standings">
+          <thead>
+            <th>#</th>
+            <th>Team</th>
+            <th>MP</th>
+            <th>W</th>
+            <th>D</th>
+            <th>L</th>
+            <th>P</th>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline mff"></div>
+                  <div class="team-name">Malmö FF</div>
+                </div>
+              </td>
+
+              <td>30</td>
+              <td>17</td>
+              <td>9</td>
+              <td>4</td>
+              <td>60</td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline ife"></div>
+                  <div class="team-name">Elfsborg</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>12</td>
+              <td>15</td>
+              <td>3</td>
+              <td>51</td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline bkh"></div>
+                  <div class="team-name">Häcken</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>12</td>
+              <td>13</td>
+              <td>5</td>
+              <td>49</td>
+            </tr>
+            <tr>
+              <td>4</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline dif"></div>
+                  <div class="team-name">Djurgården</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>14</td>
+              <td>6</td>
+              <td>10</td>
+              <td>48</td>
+            </tr>
+            <tr>
+              <td>5</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline maif"></div>
+                  <div class="team-name">Mjällby</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>13</td>
+              <td>8</td>
+              <td>9</td>
+              <td>47</td>
+            </tr>
+            <tr>
+              <td>6</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline nor"></div>
+                  <div class="team-name">Norrköping</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>13</td>
+              <td>7</td>
+              <td>10</td>
+              <td>46</td>
+            </tr>
+            <tr>
+              <td>7</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline ösk"></div>
+                  <div class="team-name">Örebro</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>12</td>
+              <td>6</td>
+              <td>12</td>
+              <td>42</td>
+            </tr>
+            <tr>
+              <td>8</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline hif"></div>
+                  <div class="team-name">Hammarby</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>10</td>
+              <td>11</td>
+              <td>9</td>
+              <td>41</td>
+            </tr>
+            <tr>
+              <td>9</td>
+              <td>
+                <div class="team">
+                  <div class="crest crest-inline iks"></div>
+                  <div class="team-name">Sirius</div>
+                </div>
+              </td>
+              <td>30</td>
+              <td>9</td>
+              <td>11</td>
+              <td>10</td>
+              <td>38</td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="title">NEWS</div>
+        <li><a href="#">Ipsum United winger sings new deal</a></li>
+        <li><a href="#">3 red and 4 yellow cards in one game</a></li>
+        <ul></ul>
+
+        <div class="title">STATS</div>
+        ...
+        <div class="bottom-filler"></div>
+      </div>
+      <div class="nav"></div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/stacking-cards/src/script.js b/stacking-cards/src/script.js
new file mode 100644
index 0000000..d882635
--- /dev/null
+++ b/stacking-cards/src/script.js
@@ -0,0 +1,11 @@
+const clamp = (x, min, max) => Math.max(min, Math.min(x, max));
+const list = document.querySelector(".list");
+const cards = Array.from(document.querySelectorAll(".card"));
+list.addEventListener("scroll", (e) => {
+  cards.forEach((card, i) => {
+    const scale = clamp((400 - list.scrollTop + i * 72) / 100, 0, 1);
+    const opacity = clamp((360 - list.scrollTop + i * 72) / 60, 0, 1);
+    card.style.transform = `scale(${scale})`;
+    card.style.opacity = `${opacity}`;
+  });
+});
diff --git a/stacking-cards/src/style.css b/stacking-cards/src/style.css
new file mode 100644
index 0000000..e674027
--- /dev/null
+++ b/stacking-cards/src/style.css
@@ -0,0 +1,235 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
+body {
+  align-items: center;
+  background-color: #f7ecec;
+  display: flex;
+  font-family: "Inter", serif;
+  font-size: 14px;
+  justify-content: center;
+  overflow: hidden;
+  height: 100vh;
+  margin: 0;
+}
+.phone-frame {
+  background-color: #000;
+  border-radius: 30px;
+  box-shadow: 0 0.4px 1px rgba(0, 0, 0, 0.026), 0 1px 2.3px rgba(0, 0, 0, 0.045),
+    0 1.9px 4.4px rgba(0, 0, 0, 0.065), 0 3.4px 7.8px rgba(0, 0, 0, 0.094),
+    0 6.3px 14.6px rgba(0, 0, 0, 0.145), 0 15px 35px rgba(0, 0, 0, 0.25);
+  width: 240px;
+  height: 480px;
+  padding: 5px;
+}
+.phone-screen {
+  align-items: center;
+  background-color: #f8f8f8;
+  border-radius: 26px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+}
+.content {
+  height: 100%;
+  margin-top: 24px;
+  position: relative;
+  width: 100%;
+}
+.list {
+  bottom: 0;
+  box-sizing: border-box;
+  height: 100%;
+  margin-top: 24px;
+  padding: 0 24px;
+  position: absolute;
+  overflow: scroll;
+  width: 100%;
+}
+
+.golazo {
+  margin-bottom: 16px;
+  width: 100px;
+}
+
+.ads {
+  align-items: flex-end;
+  background-color: #fff0d5;
+  display: flex;
+  font-size: 11px;
+  justify-content: flex-end;
+  height: 120px;
+}
+
+.matches-title {
+  align-items: center;
+  display: flex;
+  font-weight: 600;
+  height: 40px;
+  margin-top: 8px;
+  position: sticky;
+  top: 0;
+}
+
+.cards {
+  padding: 20px 0 40px;
+}
+
+.card {
+  align-items: center;
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 0.4px 1px rgba(0, 0, 0, 0.026), 0 1px 2.3px rgba(0, 0, 0, 0.045),
+    0 1.9px 4.4px rgba(0, 0, 0, 0.065), 0 3.4px 7.8px rgba(0, 0, 0, 0.094),
+    0 6.3px 14.6px rgba(0, 0, 0, 0.145), 0 15px 35px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  margin-bottom: -10px;
+  height: 80px;
+  justify-content: center;
+  position: relative;
+  transform-origin: 50% 100%;
+  width: 100%;
+}
+
+.card img {
+  margin-left: 8px;
+  width: 16px;
+}
+
+.crest {
+  background-size: cover;
+  height: 20px;
+  margin-left: 8px;
+  width: 16px;
+}
+
+.crest-inline {
+  display: inline-block;
+  margin: 0;
+}
+
+.aik {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMTguOTYiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgMzE4Ljk1OTk5IDQwMCI+PHBhdGggZD0iTTMxOC42NiAxNjkuNzFjLS4wMjMtLjA4Mi0uMDUzLS4xNjUtLjA4OC0uMjQzbC0yLjA3NS00LjgzNi0xNC44MS0zNy42OTMtMS4wOC0uMjVjLTQuODgtMS4xMzgtOS44MzItMS42ODgtMTUuMTM4LTEuNjg4LTUuMzMgMC0xMC45MDUuNTQ1LTE3LjQ1NCAxLjcxNmwtMTAuNjYzLTExLjEyYzMuNTktNy4zNTYgOC42MDItMjAuNzggOS4yNC0yOS41MjRsLjA3NS0xLjA1Mi0zNi4yLTMxLjQ0N2MtMi4wNTUtMS44ODItNC42MDMtMi44OTItNy40LTIuODkyLTQuOTY0IDAtOS41IDMuMjc1LTEwLjc4NCA3Ljc4NS0uNjg4IDIuNDE1LTEuMjUyIDguNDI4IDcuMTM1IDE0LjQzLTQuMDY0IDMuNjAyLTkuMzMyIDYuNjk2LTE1LjYyIDkuMDg0LS44NTcuMzItMS42MTMuNDgzLTIuMjUuNDgzLS43NjIgMC0xLjYzNS0uMTktMi4zMzUtMS42MDgtMi45MzgtNS45NTUgMS4yMzMtMjIuMDIgMy4xMzctMjQuNTA0bC43NDctLjk3LTIuNTQ3LTYuMDUtLjU1My0uMDgyIDUuMTA0LTMxLjI4Ny4zNC0uNTg0IDMuNzQtNC44NjQuOTEtOS4zMzUtNy43MjYtLjc0LS40MjcgNC45NjItMy41NC0uMzg1LjQ2OC00LjkxNS0zLjQ4LS4zMS0zLjQ4LS4zNi0uNSA0LjkxMy0zLjU0OC0uMzEuNS00LjkyNC03LjY4LS43NDctLjkwOCA5LjI1NCAyLjA0IDUuMzgyLjIyNy45MzUtLjUzNiA1Ljk2LTExLjIwNy0uNzkyLjM5OC02LjEgMy41NTMtNS42N1YwaC03LjcyNHY0Ljk2NGwtMy41MzYtLjAyNFYwaC03LjA0NHY0Ljk0bC0zLjU0LjAyNFYwaC03LjcydjkuMzMzbDMuNTUyIDUuNjcuMzk3IDYuMS0xMS4yMS43OTItLjUzNS01Ljk0Ny4yNC0uOTc3IDIuMDI1LTUuMzUzLS45MDItOS4yNTQtNy42ODUuNzQ2LjUgNC45MjItMy41MzUuMzEtLjQ3LTQuOTEtMy41MTQuMzU3LTMuNDguMzEuNDYgNC45MTUtMy41MzguMzg0LS40My00Ljk2My03LjcyLjc0LjkwNSA5LjMzNSAzLjQ3NyA0LjUyLjYxNi45OCA1LjA5IDMxLjIzNi0uNTUzLjA4LTIuNTQ2IDYuMDUuNzQ2Ljk3M2MxLjkwNCAyLjQ4MyA2LjA3NSAxOC41NDcgMy4xMzggMjQuNTA1LS42OTcgMS40MTctMS41NyAxLjYwOC0yLjMzMiAxLjYwOC0uNjMzIDAtMS4zOS0uMTYzLTIuMjQtLjQ4Mi02LjI4LTIuMzg4LTExLjU0LTUuNDgzLTE1LjU5Ni05LjA4NCA4LjM4LTYuMDA3IDcuODEtMTIuMDIzIDcuMTIyLTE0LjQzNi0xLjI4Ni00LjUwOC01LjgxNS03Ljc4LTEwLjc3LTcuNzgtMi44NzggMC01LjQ5IDEuMDctNy41NzYgMy4wNTdMNTIuMjkgODUuMDJsLjA4IDEuMDUzYy42NDIgOC43NDggNS42NTQgMjIuMTY4IDkuMjQgMjkuNTIzbC0xMC42NiAxMS4xMkM0NC4zOTUgMTI1LjU0NiAzOC44MiAxMjUgMzMuNDkzIDEyNWMtNS4zMDMgMC0xMC4yNTUuNTUtMTUuMTM3IDEuNjg4bC0xLjA4LjI1TDIuNSAxNjQuNTVsLTIuMDU3IDQuNzdjLS4wMTUuMDM2LS4wMy4wNy0uMDQyLjEwNWwtLjAzMy4wOWMtLjAxNy4wNDYtLjAzMy4wOTYtLjA0Ny4xNDQtLjEuMzQtLjE3Ni42OC0uMjI4IDEuMDIzTC4wNDYgMTcxYy0uMjE2IDEuOTM3LjMzIDMuODgzIDEuNTk4IDUuNiAyLjIzNSAzLjAyNyA2LjQ5IDQuOTgzIDEwLjg0IDQuOTg0aC4wMDNjNi44MDYgMCAxMi4yMDYtNC4zNCAxNC44MTgtMTEuNzQ0IDEuMDc0IDEuMDMgMi4wOTcgMi4xODUgMy4wNTcgMy40NiA5LjQ0NCAxMi41NDQgMTEuMjM1IDMzLjQwOCA0Ljc5NSA1NS44MTctNC40MjQgMTMuOTg3LTEzLjM5MyAyOS45MjYtMjkuMDggNTEuNjc1bC0uOTY2IDEuMzQgMS4wNyAxLjI2YzI2Ljc3IDMxLjU1NyA1Mi42NTMgNDguOTQgNzIuODg2IDQ4Ljk0IDYuMzI4IDAgMTEuODcyLTEuNzMyIDE2LjMwNC01LjA1My45NTMgMjIuMjY3IDI0LjkgNDkuOTIyIDYzLjAzNCA3Mi4xMDNsMS4wNi42MTcgMS4wNi0uNjE3YzM4LjE1Mi0yMi4xOTIgNjIuMTEyLTQ5Ljg0OCA2My4wNy03Mi4xMDQgNC40MyAzLjMyIDkuOTc4IDUuMDUgMTYuMzA3IDUuMDUgMjAuMjMyIDAgNDYuMTE2LTE3LjM4IDcyLjg4Ny00OC45MzhsMS4wNjYtMS4yNi0uOTY1LTEuMzRjLTE1LjY4My0yMS43MzctMjQuNjUtMzcuNjc2LTI5LjA4LTUxLjY3NS02LjQ0LTIyLjQxLTQuNjUtNDMuMjczIDQuNzk3LTU1LjgxOC45NTgtMS4yNzUgMS45ODItMi40MzIgMy4wNTUtMy40NiAyLjYxMiA3LjQwNSA4LjAxMiAxMS43NDQgMTQuODIgMTEuNzQ0IDQuMzUgMCA4LjYwNy0xLjk1NiAxMC44NC00Ljk4MyAxLjU1LTIuMDk3IDIuMDI0LTQuNTQgMS4zNC02Ljg5IiBmaWxsPSIjMTQyZDQ0Ii8+PHBhdGggZD0iTTIwOC41NCA0LjM5NmwtNC45MzUtLjQ3Mi0uNDI4IDQuOTgtNi4zMjgtLjY5LjQ2NS00Ljg4Ni0yLjA5Mi0uMTg3LTIuMTAyLS4yMTUtLjUgNC44OS02LjMyMy0uNTU0LjUwMy00LjkzNi00LjktLjQ3NS0uNjgzIDYuOTQzIDI2LjYyMiAyLjc3OC43LTcuMTc0TTE5Mi44NTUgMzMuNjZjLS4zNDgtLjQyNS0uODQtLjY4OC0xLjM4Ny0uNzM3LS41NjgtLjA3LTEuMTE3LjA5My0xLjU2LjQ1My0uNDQ3LjM2LS43MjcuODctLjc5MyAxLjQzNWwtMS4zMzggMTIuODE4YzEuNDMuMTYzIDIuODM4LjMzMiA0LjIxLjUwNGwxLjMxOC0xMi45Yy4wNjctLjU3Ny0uMDk0LTEuMTMyLS40NS0xLjU3TTE1Ny4zNCAzMS42MTZsLS4wMyAxMy45NTNjLjcyNi0uMDIgMS40NC0uMDM3IDIuMTMtLjA0NmguMDU2Yy42NzIuMDEgMS4zNi4wMjUgMi4wNjUuMDQ1VjMxLjYxNWMwLTEuMTUtLjk1My0yLjA4OC0yLjEyNy0yLjA4OC0xLjE1MyAwLTIuMDkzLjkzNy0yLjA5MyAyLjA4OE0xNzIuODIgMS4zNTdoLTQuOTM1djQuOTc2bC02LjMyNC0uMDQ1di00LjkzaC00LjI1M3Y0LjkzbC02LjMzLjA0NVYxLjM1N2gtNC45MzJWOC40aDI2Ljc3NlYxLjM1Nk0xMzIuNDc1IDQ3LjQ3MmMxLjg5Ny0uMjEyIDMuODI2LS40MTUgNS43NjItLjYwM2wtMi43NDItMzAuNTUzLTIwLjE3NCAyLjMwNCA0Ljk1OCAzMC4zOTJjMS42NDctLjIzNiAzLjM5NC0uNDczIDUuMjEzLS43MDVsLTEuMzItMTIuOTM1Yy0uMTEtLjkzMi4xNTgtMS44NTUuNzU1LTIuNTg4LjU4OC0uNzI0IDEuNDItMS4xNjcgMi4zNDItMS4yNSAxLjg5LS4yMTggMy42NDQgMS4xNzUgMy44NyAzLjExNXptLTEyLjg5My0yMi45N2wtLjU0OC00LjgyMiA1LjI1LS41MzMuNTQ4IDQuODJ6bTcuNjgzLS44MmwtLjUwNy00Ljc4NSA1LjI1NS0uNTguNTAyIDQuODI2LTUuMjUuNTRNMTM3LjY0NSA4LjgxbC0uNjc4LTYuOTYtNC45MDcuNDc0LjUwNSA0LjkzNy02LjMyNC41NTYtLjQ2Ny00Ljg5Mi0yLjEyNS4yMTctMi4wOTYuMTg4LjQ2IDQuODg3LTYuMzIuNjg4LS40MzQtNC45OC00LjkzLjQ3My42OTIgNy4xNSAyNi42MjUtMi43MzUiIGZpbGw9IiM4ZjdiNGYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMjcuNDEgMzIuOTJjLS41NjIuMDUtMS4wNTQuMzE1LTEuNDAzLjc0NC0uMzU2LjQ0LS41MTcuOTkyLS40NSAxLjU1NmwxLjMxNyAxMi45MTJjMS4zNzQtLjE3MiAyLjc4My0uMzQgNC4yMTUtLjUwNEwxMjkuNzUgMzQuOGMtLjEzNi0xLjE2NS0xLjE4Ni0yLjAwOC0yLjM0LTEuODhNMTIuNDU0IDE3Ny4zM2MyLjUyNyAwIDguNTE1LS45OTUgMTEuMTY3LTkuOTE1LjA0NC0uMTQ3LjA3LS4yOTQuMDgtLjQ0My0yLjkzLTEuODg1LTYuMDY4LTIuOS05LjE3My0yLjktMi45NDYgMC01Ljc3Ljg3Ni04LjM5NyAyLjYwM2wtMS43NSA0LjA2Yy0uMDQ2LjEwNC0uMDg0LjIxLS4xMS4zMi0uMjMyIDEuMDE4LjAxNSAyLjAyNi43MzcgMy4wMDQgMS40NDMgMS45NTYgNC40MzUgMy4yNyA3LjQ0NyAzLjI3TTMxNC42MzIgMTcxLjA1NmMtLjAyNS0uMTEtLjA2NS0uMjE3LS4xMS0uMzJsLTEuNzUtNC4wNmMtMi42My0xLjcyOC01LjQ1Mi0yLjYwNC04LjQtMi42MDQtMy4xMDUgMC02LjI0MyAxLjAxNy05LjE3MiAyLjkuMDEyLjE1LjAzNy4yOTYuMDguNDQgMi42NSA4LjkyIDguNjQgOS45MTcgMTEuMTY4IDkuOTE3IDMuMDEyIDAgNi4wMDQtMS4zMTUgNy40NDctMy4yNy43Mi0uOTguOTY4LTEuOTg4LjczNy0zLjAwNE0xMDIuNTc2IDU5LjU4Yy0uNzY3LTIuNjktMy42NTQtNC43Mi02LjcxNS00LjcyLTEuNTQgMC0zLjY5LjUxLTUuNDkgMi44MS43ODQgNC4zNTggMi44NzYgOC40NjcgNi4xMTQgMTIuMTU4IDQuODE0LTMuMjc2IDcuMDI2LTYuOTcgNi4wOTItMTAuMjQ3TTIyMi40MTUgNjkuODI3YzMuMjQtMy42OSA1LjMzMi03LjggNi4xMTYtMTIuMTU4LTEuOC0yLjMtMy45NS0yLjgwNy01LjQ5Ny0yLjgwNy0zLjA2NSAwLTUuOTU3IDIuMDMtNi43MjUgNC43Mi0uOTMzIDMuMjc3IDEuMjg3IDYuOTcgNi4xMDcgMTAuMjQ0TTE1My42NCAyMS4wNzJoMy44NlYxNy42NGgtMy44NnYzLjQzMk0xNjEuMzY0IDIxLjA3MmgzLjg2VjE3LjY0aC0zLjg2djMuNDMyIiBmaWxsPSIjOGY3YjRmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTUxLjYxMyA0NS44MTZjMS40NzYtLjA4MyAyLjkxNS0uMTUgNC4zMDItLjJsLjAzLTE0YzAtMS45MiAxLjU2Ni0zLjQ4IDMuNDg4LTMuNDggMS45NDIgMCAzLjUyMyAxLjU2IDMuNTIzIDMuNDh2MTMuOTk2YzEuMzg0LjA1MiAyLjgyMy4xMiA0LjMuMmwxLjk4LTMwLjM3SDE0OS42M3ptOS4wMzYtMjguODloNS4yODd2NC44NjJoLTUuMjg4em0tNy43MjYgMGg1LjI5MnY0Ljg2MmgtNS4yOTJ2LTQuODZNMTE5LjgyOCAyMC4zMmwuMzg1IDMuNCAzLjgyNy0uMzktLjM4Ny0zLjQwMi0zLjgyNS4zOU0xMjcuNTQ1IDE5LjUzbC4zNTYgMy4zNyAzLjgzLS4zOTUtLjM1My0zLjM5Ny0zLjgzMi40MjNNMjAzLjU0NSAxOC42MjNsLTIwLjE3Ny0yLjMwNy0yLjc0IDMwLjU1M2MxLjkzNi4xODcgMy44NjUuMzkgNS43NjQuNmwxLjM0LTEyLjgxM2MuMTA4LS45MzcuNTY4LTEuNzc0IDEuMy0yLjM2NC43MzUtLjU5OCAxLjY1My0uODY1IDIuNTgtLjc1Ny45MDcuMDggMS43MzcuNTI0IDIuMzI0IDEuMjQ3LjU5Ni43MzMuODY1IDEuNjU2Ljc1NiAyLjU5OGwtMS4zMiAxMi45MjdjMS44Mi4yMzMgMy41NjguNDcgNS4yMTcuNzA2em0tMTEuOTQ0IDUuMDZsLTUuMjQ4LS41NC41MDMtNC44MjQgNS4yNS41Nzd6bTIuNDM2LjI4NGwuNTQtNC44MiA1LjI1Ni41MzQtLjU0OCA0LjgyLTUuMjQ4LS41MzMiIGZpbGw9IiM4ZjdiNGYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xOTQuODI3IDIzLjMzbDMuODI2LjM5LjM4Ny0zLjQwMy0zLjgzMi0uMzktLjM4IDMuNDAyTTE5MS4zMTcgMTkuNTNsLTMuODI2LS40MjItLjM1MyAzLjM5NyAzLjgyOC4zOTQuMzUyLTMuMzdNMTQyLjQ2NSAyNy4zOTJsLS4yNzMtMy4yODgtNC4xMTUuMzQ4LjI4IDMuMjU1IDQuMTA4LS4zMTVNMTQ4Ljc1NiAyNi44OTVsLS4yNC0zLjI1Mi00LjExMi4zMTIuMjQzIDMuMjUyIDQuMTEtLjMxMk0xNDUuMDg1IDMxLjAzM2wtMi42ODQuMjA3LjIwOCAyLjcxNiAyLjY4LS4yNDQtLjIwMy0yLjY4TTE0MS4yOTYgMzIuMDMybC0xLjI4OC4xLjA5NyAxLjI5IDEuMjg3LS4xMDItLjA5Ni0xLjI4OE0xNDcuNTkgMzEuNTNsLTEuMjkuMTAyLjEgMS4yODggMS4zMi0uMS0uMTMtMS4yOU0xMzkuMjg1IDQxLjEwN2w0LjExLS4zMTUtLjI3Ni0zLjI1My00LjA4LjMxMy4yNDUgMy4yNTRNMTQ1LjYxIDQwLjYwNWw0LjA4LS4zMTQtLjI0Ni0zLjI1NC00LjEwNy4zMTMuMjc0IDMuMjU1TTE0My41NCA0NS44NmwyLjcxMy0uMjA4LS4yNC0yLjcxNi0yLjY4Mi4yNDQuMjEgMi42OE0xNDEuMDM3IDQ1LjM1N2wxLjI4Ni0uMDk3LS4wOTgtMS4yODgtMS4yODguMS4xIDEuMjg1TTE0Ny4zNjMgNDQuODZsMS4yOS0uMS0uMTAyLTEuMjg4LTEuMzIuMS4xMzMgMS4yODhNMTgwLjc4OCAyNS40NDVsLTQuMTEzLS4zNS0uMjggMy4yOSA0LjExNC4zMTUuMjc4LTMuMjU1TTE3MC4xMDUgMjcuODg4bDQuMTE0LjMxLjI0LTMuMjUtNC4xMS0uMzE1LS4yNDUgMy4yNTVNMTczLjU3NiAzMy43MTNsMi42OC4yNDQuMjA1LTIuNzE4LTIuNjgtLjIwNS0uMjA0IDIuNjc4TTE3Ny41NyAzMi4wMzJsLS4xIDEuMjg4IDEuMjg2LjEuMS0xLjI4OC0xLjI4NS0uMU0xNzEuMjggMzEuNTNsLS4xIDEuMjkgMS4yODUuMS4xMDItMS4yODgtMS4yODctLjFNMTc1LjQ2OCA0MC43OTJsNC4xMTIuMzE1LjI0LTMuMjU1LTQuMDczLS4zMTMtLjI4IDMuMjUyTTE2OS4xNzcgNDAuMjlsNC4wNzQuMzE1LjI4LTMuMjU0LTQuMTEzLS4zMTQtLjI0IDMuMjU1TTE3Mi42MSA0NS42NTJsMi43MTcuMjA3LjIwNS0yLjY4LTIuNjgtLjI0NS0uMjQzIDIuNzE3TTE3Ny44MjggNDUuMzU3bC4xLTEuMjg0LTEuMjg1LS4xLS4xMDMgMS4yODcgMS4yODguMDk3TTE3MS41NCA0NC44NmwuMDkzLTEuMjg4LTEuMzIyLS4xLS4wOTQgMS4yODcgMS4zMjMuMU0xOTguMDk3IDU0Ljc4Yy4xNi0uNzY0LS4zMzQtMS41MS0xLjA5Ny0xLjY2OC0yMi4xLTQuNTU1LTUyLjk5Ni00LjU1NS03NS4xMzggMC0uNzY0LjE1Ny0xLjI1Ni45MDMtMS4wOTcgMS42NjguMTU2Ljc2NC45IDEuMjU1IDEuNjY3IDEuMDk3IDIxLjgwNC00LjQ4NCA1Mi4yMzMtNC40ODUgNzMuOTk3IDAgLjA5NS4wMjIuMTkuMDMuMjg2LjAzLjY1NiAwIDEuMjQ1LS40NiAxLjM4LTEuMTI3TTE5Mi41IDgyLjk4OGMxLjE0NyAwIDIuMTc1LS44MDMgMi40MTYtMS45Ny4yNzMtMS4zMzMtLjU4NS0yLjYzOC0xLjkyLTIuOTE0LTIyLjI1Mi00LjU5LTQ0LjgzNy00LjU5LTY3LjEyNiAwLTEuMzM1LjI3Ni0yLjE5MyAxLjU4LTEuOTIgMi45MTUuMjc2IDEuMzMzIDEuNTggMi4xOTMgMi45MTUgMS45MTcgMjEuNjI4LTQuNDU2IDQzLjU0My00LjQ1NiA2NS4xMzYgMCAuMTcuMDM0LjMzNy4wNS41LjA1TTEyMi4xNDYgNTguNzUzbC43MTcgMy40M2MxLjg1OC0uMzkgMy44MTMtLjc0NCA1LjgxLTEuMDU2bC0uNTQtMy40NjJjLTIuMDU4LjMyLTQuMDczLjY4Ny01Ljk4NyAxLjA4OE0xMzIuODA2IDU2Ljk3NmwuNDIgMy40OGMyLjE3NS0uMjY0IDQuNzEzLS41NjMgNy4yNy0uNzg1bC0uMzA0LTMuNDljLTIuNjEuMjMtNS4xOC41MzItNy4zODYuNzk2IiBmaWxsPSIjOGY3YjRmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTQ1LjMzIDU1Ljc4N2wuMjU0IDMuNDk0YzIuMTItLjE1MyA0LjQ5Mi0uMjY1IDcuNDY3LS4zNTNsLS4xMDItMy41MDJjLTMuMDI1LjA5LTUuNDQ1LjIwNC03LjYxNy4zNjJNMTU3Ljg0IDU1LjMybC4wNCAzLjUwM2MzLjgwMy0uMDQgNy42NzcuMDMzIDExLjUxNi4yMTJsLjE2My0zLjVjLTMuOTA0LS4xODItNy44NDctLjI1NC0xMS43Mi0uMjE1TTE3NC4zNTIgNTkuMzE1YzMuNDIuMjU0IDYuNzYuNTc4IDkuOTI4Ljk2bC40Mi0zLjQ3OGMtMy4yMi0uMzktNi42MTUtLjcxNy0xMC4wODgtLjk3NmwtLjI2IDMuNDk1TTE5Ni43MTYgNTguNzUzYy0yLjE3NS0uNDU2LTQuNjYtLjg5NC03LjYwMy0xLjM0NGwtLjUyNSAzLjQ2NWMyLjg3NS40MzcgNS4yOTcuODY0IDcuNDEgMS4zMDhsLjcxOC0zLjQzTTEyNi4yOTcgNjguNDkybC0uNTA1LTMuNDY4Yy0uNzYyLjExMy0xLjUxMy4yNjMtMi4yMzguNDFsLjY5MiAzLjQzM2MuNzEtLjE0MyAxLjM4NC0uMjggMi4wNS0uMzc1TTEyOC44MSA2OC4wMTdjMi4yOTQtLjM5NyA0LjcxMy0uNzU2IDcuMzk0LTEuMDk2bC0uNDQtMy40NzNjLTIuNzM1LjM0Ni01LjIwNS43MTQtNy41NSAxLjEybC41OTYgMy40NU0xMzkuODc3IDY2LjVjMi42NjgtLjI3MyA1LjA4Ny0uNDcyIDcuMzk0LS42MDVsLS4yLTMuNDk4Yy0yLjM2LjEzNi00LjgzLjM0LTcuNTUuNjE4bC4zNTcgMy40ODVNMTUxLjM1NSA2NS42ODNjMy41NC0uMTUgNi45Ni0uMjEgMTAuMTcyLS4xNzhsLjAzNC0zLjUwMmMtMy4yNjctLjAzNC02Ljc1Mi4wMjgtMTAuMzUzLjE4bC4xNDggMy41TTE2Ni4xIDY1LjYxNWMzLjQxMi4xMDIgNi44MzcuMzE0IDEwLjE4My42MzNsLjMzLTMuNDg4Yy0zLjQyLS4zMjQtNi45MjItLjU0LTEwLjQxLS42NDhsLS4xMDQgMy41MDNNMTgwLjQ2IDY2LjYzNmMzLjY1LjQzNiA2LjgyLjkgOS42OSAxLjQxM2wuNjItMy40NWMtMi45MzgtLjUyNS02LjE3NC0uOTk3LTkuODk1LTEuNDQzbC0uNDE1IDMuNDhNMTk0LjM4OCA2NS4yMTVjLS4yOTUtLjA4LS41OC0uMTU2LS44MTctLjIwN2wtLjcxMyAzLjQzYy4xNzYuMDM4LjM4Ny4wOTUuNjA0LjE1NS40MjMuMTE2Ljg2LjIzNSAxLjI2Ny4yOTJsLjQ4LTMuNDdjLS4xODMtLjAyNi0uNTM2LS4xMjItLjgyLS4yTTEyNC41OTYgNzEuODA0bC43NTMgMy40MjNjMS44MTYtLjQgMy43My0uNzQgNS41ODQtMS4wN2wuMzUzLS4wNjQtLjYxNS0zLjQ1LS4zNTMuMDY0Yy0xLjg4Ny4zMzYtMy44NC42ODQtNS43MjQgMS4wOTdNMTM1IDczLjUzM2MyLjM2My0uMzEzIDQuODA3LS42MzggNy4yNDctLjg1bC0uMzAzLTMuNDljLTIuNTIuMjItNS4wMDUuNTQ4LTcuNDA4Ljg2OGwuNDYzIDMuNDczTTE0NS45NiA3Mi4zNmMyLjUyLS4yMSA1LjA3My0uMzUyIDcuNTg3LS40MmwtLjA5NC0zLjUwM2MtMi41OC4wNy01LjIuMjE2LTcuNzg1LjQzNGwuMjkzIDMuNDlNMTU3Ljg0NCA2OC4zMjhsLjAzMiAzLjUwM2MzLjU5LS4wMyA3LjQyNC4wNjUgMTEuMzk1LjI4N2wuMTk1LTMuNDk4Yy00LjA0Ni0uMjI3LTcuOTUzLS4zMjUtMTEuNjItLjI5Mk0xNzMuOCA3Mi40YzMuNDkzLjI5NiA2LjcxMi42NTMgOS44NCAxLjA5N2wuNDkyLTMuNDdjLTMuMTk1LS40NTItNi40NzctLjgxOC0xMC4wNC0xLjExOGwtLjI5MyAzLjQ5TTE4Ny4zNDUgNzQuMDZjMi4wMjMuMzQ0IDQuMDYyLjcyNyA2LjIzNCAxLjE3bC43LTMuNDNjLTIuMjEtLjQ1Mi00LjI4Ny0uODQ0LTYuMzQ3LTEuMTkzbC0uNTg4IDMuNDUzTTE1OC44OCA5Ny43ODNoMS4xMDhWODMuNDg1aC0xLjEwOHYxNC4yOThNMTU2LjYyNSA5Ni43NTZsLjExLTEzLjE1Ny0xLjEwNy0uMDEtLjExIDEzLjE1NyAxLjEwNy4wMU0xNTMuMjMgODMuNzAzaC0xLjExVjk1LjMyaDEuMTFWODMuNzAzTTE0OS44NyA4My45MTdoLTEuMTFWOTQuMDNoMS4xMVY4My45MThNMTQ2LjQ3MyA4NC4zNDNoLTEuMTF2OC4wMWgxLjExdi04LjAxTTE0My4xMTIgODQuN2gtMS4xMDh2Ni41OGgxLjEwOFY4NC43TTEzOS43MTYgODUuMDI0aC0xLjEwOHY0LjQ3aDEuMTA4di00LjQ3TTEzNi4zNiA4NS42M2gtMS4xMXYyLjI5aDEuMTF2LTIuMjlNMTYyLjI3NSA5Ni43NTZsMS4xMS0uMDEtLjExLTEzLjE1Ny0xLjExLjAxLjExIDEzLjE1Nk0xNjYuNzQ1IDgzLjcwM2gtMS4xMVY5NS4zMmgxLjExVjgzLjcwM00xNzAuMSA4My45MTdoLTEuMTA3Vjk0LjAzaDEuMTA4VjgzLjkxOE0xNzMuNDk2IDg0LjM0M2gtMS4xMDh2OC4wMWgxLjEwOHYtOC4wMU0xNzYuODU3IDg0LjdoLTEuMTA4djYuNThoMS4xMDdWODQuN00xODAuMjUzIDg1LjAyNGgtMS4xMDh2NC40N2gxLjEwOHYtNC40N00xODMuNjE1IDg1LjYzaC0xLjEwOHYyLjI5aDEuMTA4di0yLjI5TTIwOS43NjMgMzE5LjU0Yy01LjAxNiAwLTkuMDk2IDQuMDY3LTkuMDk2IDkuMDY3IDAgNS4wMTQgNC4wOCA5LjA5NSA5LjA5NiA5LjA5NS40MTMgMCAuODE4LS4wMyAxLjIxNy0uMDg2LTcuNjMgMTkuNTUzLTMzLjI3NiA0MC4yMjgtNTEuNTQ3IDUxLjAxNS0xOC4yOS0xMC43OTgtNDMuOTY1LTMxLjUtNTEuNTY4LTUxLjA3LjQwMi4wNTYuODE2LjA4OCAxLjIzNi4wODggNS4wMDQgMCA5LjA0NS00LjAzOCA5LjA0NS05LjA0IDAtNC45Ny00LjA0LTkuMDEzLTkuMDQ0LTkuMDEzLTUuMDA1IDAtOS4wMDcgNC4wNDItOS4wMDcgOS4wMTIgMCAuNTgyLjA1NiAxLjE1LjE2IDEuNzAyIDMuMDMgMjYuMDg2IDM5LjA0IDUzLjIzIDU3Ljc4MiA2NC4wMDJsMS4zOTguODA0IDEuMzk4LS44MDRjMTguNTU1LTEwLjY2MyA1NC4wMy0zNy4zNzIgNTcuNjgyLTYzLjIxNy4yMjctLjc5Mi4zNS0xLjYyNi4zNS0yLjQ4OCAwLTUtNC4wODMtOS4wNjYtOS4xLTkuMDY2IiBmaWxsPSIjOGY3YjRmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMjc2LjQzMiAyMTUuMTZjLTIuMzUtMTYuMDUyLjA5LTMwLjg5MyA2Ljg3Mi00MS43ODggNS45NDgtOS41NTYgMTQuODQ4LTE0Ljk4IDIyLjEzMy0xMy40OTdsNS4wOCAxLjAzMi0xMi4wNjQtMzAuMzk0LTEuNjIyLS4yMjVjLTExLjYxNy0xLjU5Ny0xNy4yOS0xLjY2My0zMC4zNDcgMS4xNjNsLTE0LjE4LTE1LjEyNWMzLjUzNy03LjE1MyA4LjQtMTkuNjc0IDkuNjczLTI4LjAybC4yMzUtMS41MzQtMzAuMDA1LTI1Ljg1LTEuNDMgMy43MjVjLTIuNjE0IDYuODEtOS41MjggMTMuNjItMTguNSAxOC4yMi03LjA5NiAzLjM1NC0xMy45MSA1LjQyMi0yMS4xMjMgNy42MS05Ljc5IDIuOTczLTE5LjkgNi4wNC0zMS43MiAxMi41OTgtMTEuODE3LTYuNTU3LTIxLjkzLTkuNjI1LTMxLjcyLTEyLjU5Ny03LjIxNS0yLjE5LTE0LjAzLTQuMjU3LTIxLjEyNS03LjYxMi04Ljk1LTQuNjA3LTE1Ljg1LTExLjQxNS0xOC40NjItMTguMjJsLTEuNDMtMy43MjMtMzAuMDA0IDI1Ljg1LjIzNSAxLjUzNWMxLjI3IDguMzM1IDYuMTMzIDIwLjg2MiA5LjY3IDI4LjAybC0xNC4xOCAxNS4xMjRjLTEzLjA1NS0yLjgyNS0xOC43My0yLjc2LTMwLjM1LTEuMTYybC0xLjYyMy4yMjQtMTIuMDU2IDMwLjM5NSA1LjA4LTEuMDMyYzcuMjgzLTEuNDg0IDE2LjE4MiAzLjk0IDIyLjEzMiAxMy40OTcgNi43OCAxMC44OTUgOS4yMjIgMjUuNzM2IDYuODcyIDQxLjc4OC0zLjAwNCAyMC41MDctMTMuMzI1IDQyLjI5NS0zMC42OCA2NC43NmwtMS40MDUgMS44MTcgMS41MDcgMS43MzZjMjMuOTcgMjcuNjE4IDQ4LjAwNyA0My43NiA2NS45NTQgNDQuMjloLjE3YzcuOTgtLjI0MyAxMy4zMDItMi4xNjMgMTUuODM1LTUuNzA4IDEuMzctMS41OSAyLjIwMi0zLjY1OCAyLjIwMi01LjkxNSAwLTUuMDA0LTQuMDc2LTkuMDQ3LTkuMDgyLTkuMDQ3LTUuMDAzIDAtOS4wNCA0LjA0My05LjA0IDkuMDQ3IDAgMi4yNDUuODEzIDQuMyAyLjE2IDUuODg4LS42OS4wNTctMS40MTIuMS0yLjE2LjEyLTEzLjMzNS0uNDMzLTMxLjQxNi0xMS4zMTUtNTAuMDI3LTI5Ljc1TDI0MC4xMjUgODAuNTZsLTMuMjEtMi43Ni0yMTEuOTggMjExLjZjLTIuNDMtMi41MDUtNC44NjctNS4xMzYtNy4yOTgtNy44ODYgMTcuMTA0LTIyLjU5NCAyNy4zMjQtNDQuNjM0IDMwLjM4Ni02NS41NCAyLjU0Mi0xNy4zNjYtLjE4LTMzLjU0Ny03LjY2LTQ1LjU3LTYuMTE1LTkuODItMTQuODMtMTUuODMtMjMuMjItMTYuMzUybDcuMzA3LTE4LjQyYzEwLjM2LTEuMzUzIDE1LjUyMy0xLjIxNyAyOC4zMDYgMS42NGwxLjU2My4zNSAxOS4wOS0yMC4zNjMtLjk0Mi0xLjc3NmMtMy42MzItNi44MTItOC4yLTE4LjY2My05LjczLTI2LjUxMmwyMS44LTE4Ljc4NGMzLjc4NyA2Ljg1IDEwLjcxIDEzLjE2IDE5LjUyNiAxNy42OWwuMDgyLjA0YzcuNDg2IDMuNTQzIDE0LjUwNSA1LjY3NCAyMS45MzUgNy45MyA5Ljg3NyAyLjk5NiAyMC4wOSA2LjA5NSAzMS45NiAxMi44ODNsMS4zOTIuNzk1IDEuMzk1LS43OTRjMTEuODcyLTYuNzg3IDIyLjA4LTkuODg2IDMxLjk1Ni0xMi44ODUgNy40My0yLjI1MyAxNC40NDYtNC4zODQgMjEuOTMzLTcuOTI4bC4wNzctLjAzN2M4Ljg0Mi00LjUyNCAxNS43NzgtMTAuODM1IDE5LjU3LTE3LjY5MmwyMS44MDIgMTguNzg0Yy0xLjUzNCA3Ljg1Ni02LjEwNSAxOS43MDUtOS43MzYgMjYuNTFsLS45NDYgMS43NzUgMTkuMDkzIDIwLjM2NiAxLjU2NC0uMzVjNS42OC0xLjI3IDkuODYtMi4wMDIgMTMuNjUzLTIuMzA1TDk5LjI0IDMxNi4zMThsMi45ODggMi45NzggMTgzLjY0OC0xODQuNDZjMi42MS4wOTUgNS4zNC4zNzIgOC41Ny43OTZsNy4zMTMgMTguNDJjLTguMzkuNTIzLTE3LjEwNyA2LjUzMi0yMy4yMiAxNi4zNTMtNy40ODMgMTIuMDIyLTEwLjIwNCAyOC4yMDMtNy42NiA0NS41NjggMy4wNiAyMC45MDcgMTMuMjggNDIuOTQ3IDMwLjM4NCA2NS41NC0yMi4wODQgMjQuOTgtNDQuNTEzIDQwLjEyMi02MC4yOTIgNDAuNjM2LS43NS0uMDIzLTEuNDctLjA2NS0yLjE2LS4xMjIgMS4zNDUtMS41ODggMi4xNi0zLjY0MyAyLjE2LTUuODg4IDAtNS4wMDQtNC4wNDMtOS4wNDctOS4wNDgtOS4wNDctNS4wMDMgMC05LjA3NSA0LjA0My05LjA3NSA5LjA0NyAwIDIuMjY3LjgzNyA0LjM0IDIuMjEzIDUuOTMyIDIuNTM4IDMuNTM1IDcuODU0IDUuNDQ4IDE1LjgyNCA1LjY5bC4wODIuMDAyaC4wODNjMTcuOTQ3LS41MyA0MS45ODgtMTYuNjczIDY1Ljk1NS00NC4yOWwxLjUwNy0xLjczNy0xLjQwNi0xLjgxOGMtMTcuMzUzLTIyLjQ2NS0yNy42NzQtNDQuMjUzLTMwLjY3OC02NC43NiIgZmlsbD0iIzhmN2I0ZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTExOS45NjUgMTQ2LjMzYzAtOC4zLTYuNzY0LTE1LjA1LTE1LjA4LTE1LjA1LTguMjggMC0xNS4wMTggNi43NS0xNS4wMTggMTUuMDVzNi43MzcgMTUuMDUgMTUuMDE4IDE1LjA1YzguMzE2IDAgMTUuMDgtNi43NSAxNS4wOC0xNS4wNU05NS42MTMgMTIxLjA5NWwtNi41MS0xOS4yMzUtMS4wNDguMzU2IDYuNTEgMTkuMjMzIDEuMDQ4LS4zNTVNOTkuNzE1IDEwMC4wNDVsLTEuMS4xMjQgMi4yMTQgMTkuNDEzIDEuMS0uMTI2LTIuMjE1LTE5LjQxMk0xMDguOTA1IDEwMS4wNmwtMS42NDQgMTguNDggMS4xMDUuMSAxLjY0NC0xOC40OC0xLjEwNS0uMU04NC4xMzUgMTE3LjcxbDUuMTE2IDYuNzU3Ljg4Mi0uNjctNS4xMTItNi43NTctLjg4NS42N003Ny4zNDQgMTI1LjYzN2w2LjMzIDQuMDM2LjU5NS0uOTM0LTYuMzMtNC4wMzctLjU5Ni45MzRNMTIwLjc5IDEwNS43MjdsLTEuMDctLjI5OC00LjQ2NyAxNi4wMTcgMS4wNjguMjk4IDQuNDctMTYuMDE4TTEzMC42MjIgMTExLjMwM0wxMjAuMjkgMTIzLjc4bC44NTQuNzA1IDEwLjMzMi0xMi40NzctLjg1NC0uNzA1TTEyNC44NDMgMTI3Ljc3bC43NzUuNzkgMTMuNjYtMTMuMzctLjc3OC0uNzktMTMuNjU3IDEzLjM3TTE0Ny40NDMgMTIyLjY4M2wtLjU0Ny0uOTY0LTE4Ljk0NCAxMC43MjMuNTQ0Ljk2NCAxOC45NDctMTAuNzI0TTE3MC45NTYgMTI2LjEzNWwtNDAuMzIgMTIuNTQ4LjMzIDEuMDU3IDQwLjMyLTEyLjU0Ny0uMzMtMS4wNThNMTU0LjE3NiAxNDYuNjdoLTIyLjM0MnYxLjEwN2gyMi4zNDJ2LTEuMTA4TTE0My44MDggMTU2LjY3M2wtMTIuNjUtNC4yOS0uMzU2IDEuMDUyIDEyLjY1IDQuMjkuMzU2LTEuMDUyTTEzNy4xNDUgMTY0Ljk1bC04LjE4Ny02LjQzNS0uNjg0Ljg3MiA4LjE4NiA2LjQzNC42ODUtLjg3TTEzMi4wMzcgMTcxLjk1NWwtNy41MDctNy4xNDgtLjc2NS44MDIgNy41MDggNy4xNDcuNzY0LS44MDJNMTIzLjU0NSAxODMuNzA1bC02LjA0Mi0xMy4yNjQtMS4wMS40NjMgNi4wNDMgMTMuMjYgMS4wMS0uNDU4TTExMS42MjMgMTg4Ljc5MmwxLjEtLjEzNS0xLjkyNy0xNS43NjQtMS4xLjEzNSAxLjkyNyAxNS43NjRNMTAwLjc4IDE5MS4yOTVsMy4zMjMtMTcuODQtMS4wOS0uMjAzLTMuMzIgMTcuODQgMS4wODguMjAzTTk2LjggMTcyLjE4bC0xLjA3LS4yOTNMODIuNTggMjE5LjVsMS4wNy4yOTUgMTMuMTUtNDcuNjE0TTg5LjI0IDE2OC40MTJsLS45NjMtLjU1Mi0xOS4zMDIgMzMuNTY4Ljk2LjU1MyAxOS4zMDQtMzMuNTY4TTg0LjYyIDE2NC4wNWwtLjgwMi0uNzY1LTIyLjY2NCAyMy43Ny44MDQuNzY2IDIyLjY2My0yMy43N004MS41MiAxNTkuMThsLS41NC0uOTY1LTIzLjc3MiAxMy4yNi41NC45NjhMODEuNTIgMTU5LjE4TTU2Ljk1MyAxNTguOTFsMjEuNzY2LTYuMDgtLjMtMS4wNjUtMjEuNzY0IDYuMDc2LjI5NyAxLjA3TTYyLjkxIDE0My42NjdsMTUuMjYuMTc4LjAxNC0xLjEwOC0xNS4yNjItLjE3Ny0uMDEzIDEuMTA3TTcwLjYyIDEzMy40NDNsOS4wNDUgMy40My4zOTMtMS4wMzQtOS4wNDctMy40MzMtLjM5IDEuMDM2TTIzMy44MSAyODIuMTNjNS45My0xLjYyMyAxMS4wMDYtMy4xODMgMTEuMDA2LTE3Ljk0MyAwLTMuNDE0LS42NDQtNi4wNzgtMS45MTMtNy45MTYtMS40OTQtMi4xNjUtMy45MS0zLjI3LTcuMTg2LTMuMjktNi4wMzcgMC05LjEgMy43Ny05LjEgMTEuMjA3IDAgNy40MzUgMy4wMzUgMTEuMjA4IDkuMDIgMTEuMjA4bC4wOC0uMDAzYzEuMjE2IDAgMi40MS0uMTg0IDMuNDUtLjUzMmwuMDU3LS4wMi4wMTMuMDZjLjM2MiAxLjc4LTQuNDUgNi4zMjctNS40MjggNy4yM20xLjY4Ny05LjQxOGgtLjA2NmMtMy42MTcgMC01LjQ1LTIuODktNS40NS04LjU5NSAwLTIuNjI4LjM5LTQuNjg0IDEuMTY0LTYuMTEuODkzLTEuNjUgMi4zMTMtMi40ODQgNC4yMi0yLjQ4NGguMDY3YzIuMDA2LjAxNiAzLjQxOC44MjggNC4zMTUgMi40ODUuNzY3IDEuNDEzIDEuMTM4IDMuNDEyIDEuMTM4IDYuMTEgMCA1Ljc4Mi0xLjc2MiA4LjU5NC01LjM4NiA4LjU5NE0xNzcuODggMjY1LjQwM2MwLTEuMTc2LS45NjUtMi4xMS0yLjExMi0yLjExLTEuMTc2IDAtMi4xMS45MzQtMi4xMSAyLjExIDAgMS4xNDguOTM0IDIuMTEgMi4xMSAyLjExIDEuMTQ3IDAgMi4xMS0uOTYyIDIuMTEtMi4xMU0xOTIuNTUzIDI3Ni41NzNWMjUzLjg2bC02LjUyOCA3LjI2MyAzLjU2LS42MjR2MTYuMDczaDIuOTY4TTI2MC4xMTUgMjc2LjU3M1YyNTMuODZsLTYuNTI4IDcuMjY0IDMuNTI2LS42MjV2MTYuMDczaDMuMDAyTTIxNS45ODQgMjYwLjEyN2MtLjM3Ni0uMjctLjU2My0uNDc0LS41ODgtLjY0Ni0uMDItLjE0NC4wNjQtLjMyNS4yNjUtLjU4OCAxLjM4NC0xLjQ1NyAyLjE0NS0zLjM0NSAyLjE0NS01LjMyIDAtNC4yNTctMy40NjQtNy43Mi03LjcyLTcuNzItNC4yMzYgMC03LjY4IDMuNDYzLTcuNjggNy43MiAwIDEuOTU1Ljc0NiAzLjg0NCAyLjA4OCA1LjMuMjI4LjI5My4zMTYuNDguMjk1LjYyLS4wMjcuMTctLjIyLjM3NS0uNjA4LjY0LTIuNDcgMS44OS0zLjg4NSA0Ljc2NC0zLjg4NSA3Ljg4NCAwIDUuNDM3IDQuNDQgOS44NjQgOS45IDkuODY0IDUuMzYgMCA5LjcyLTQuNDI3IDkuNzItOS44NjQgMC0zLjEzLTEuNDMtNi4wMDMtMy45My03Ljg5bS01LjgyNS0xMS4yOWMyLjU3IDAgNC42NjMgMi4wOTMgNC42NjMgNC42NjcgMCAyLjU3LTIuMDkyIDQuNjYtNC42NjMgNC42Ni0yLjU3NSAwLTQuNjY4LTIuMDktNC42NjgtNC42NiAwLTIuNTc0IDIuMDkzLTQuNjY4IDQuNjY4LTQuNjY4bTAgMjUuOTE3Yy0zLjc0IDAtNi43OC0zLjAyLTYuNzgtNi43MzYgMC0zLjczNiAzLjA0LTYuNzczIDYuNzgtNi43NzMgMy43MzUgMCA2Ljc3MyAzLjAzNyA2Ljc3MyA2Ljc3MyAwIDMuNzE1LTMuMDM4IDYuNzM2LTYuNzczIDYuNzM2TTE0OS44NTMgMjQxLjUyN2MwIDEuODcyIDEuNTIyIDMuMzk0IDMuMzk0IDMuMzk0IDEuODc0IDAgMy40LTEuNTIgMy40LTMuMzkzIDAtMS44NTUtMS41MjYtMy4zNjQtMy40LTMuMzY0LTEuODcyIDAtMy4zOTQgMS41MS0zLjM5NCAzLjM2NE0xODEuMDU3IDIxMC4xMDRjMCAxLjg3MiAxLjUyNiAzLjM5NSAzLjQgMy4zOTUgMS44NyAwIDMuMzkyLTEuNTI0IDMuMzkyLTMuMzk2IDAtMS44NzMtMS41MjItMy40LTMuMzkzLTMuNC0xLjg3NCAwLTMuNCAxLjUyNy0zLjQgMy40TTI0MS42ODQgMTU1LjgzN2MwLTEuODctMS41Mi0zLjM5Mi0zLjM5My0zLjM5Mi0xLjg1IDAtMy4zNTggMS41MjItMy4zNTggMy4zOTIgMCAxLjkwNiAxLjQ3NSAzLjQgMy4zNiAzLjQgMS45IDAgMy4zOTItMS40OTQgMy4zOTItMy40TTE0NS4xOSAxOTIuMDhsLTQuOTk0IDUuMDdjLjcyLjQwMyAxLjM2OC45NTggMi4xOTIgMS42OWwuMDgzLjA3NyAyNS40NSAyNS44OC4wNjMuMDhjMS4wMSAxLjMwOCAxLjY3MiAyLjI5IDIuMTYgMy40M2w1Ljc4Ni01Ljc0M2MtLjk1NS0uNDYzLTEuODg2LTEuMDY1LTIuNTgyLTEuNzhsLTI2LjExNS0yNi4xMTVjLS41OTctLjYtMS40MS0xLjUxNC0yLjA0Mi0yLjU5TTE4Ny43MSAxNzAuOTA3Yy0xLjggMC0zLjQ3LS42NjgtNC44My0xLjkzMmwtLjA2LS4wNi01LjAwNS01LjE1Yy0uNjg4LS43MTctMS40NS0xLjYyLTIuMDM4LTIuNjE3bC00Ljk3OCA1LjA5N2MuNzI1LjM5NiAxLjM2OC45NDYgMi4xODcgMS42NzJsLjA4LjA3OCAyNS40NTMgMjUuODguMDYuMDhjMS4wMiAxLjMxOCAxLjY4NCAyLjMxIDIuMTcyIDMuNDZsNS43OS01Ljc0NGMtLjk0Ny0uNDY1LTEuODctMS4wNTctMi41NTMtMS43MzRsLTkuNDc4LTguODM1Yy0yLjMwNC0yLjUxMy0yLjkyOC01LjM2OC0xLjc1NS04LjAzNiAxLjY4My0zLjgyIDYuOTI0LTYuNDkgMTIuNzQ3LTYuNDkgNi44NzUgMCAxMi44NCAzLjQzIDE2LjY1NyA5LjQ5M2w3LjYwNy03LjQ0NGMtMi4zMi0uNzM2LTQuNzM0LTEuOS03LjI0NC0zLjExLTQuNTU0LTIuMTk2LTkuMjYtNC40NjQtMTMuODctNC40NjQtMS44NzMgMC0zLjU4LjM3LTUuMjIgMS4xMzdsLTIuNzkgMS4zMDIuNDE0LTMuMDVjLjk4NC03LjIzNy0uMDQtMTQtMy4zMi0yMS42NWwtNS40MzcgNS41OGM1LjYzIDUuMjMgNy42ODQgMTEuODcgNS41IDE4LjA1LTEuNzY3IDQuOTk3LTUuOTE2IDguNDg3LTEwLjA5IDguNDg3TTExMC4zMyAyNzguOTA1Yy43NzQgMi44NTYgMS4yOCA0Ljk4IDEuMTY2IDguNDM4bDYuMjMyLTYuMDE0Yy0yLjg4Mi0xLjkxOC01LjQxNi01LjE0NC01LjY5Mi05LjEyMmwtLjA1NC0uNzczIDE3LjE0OC0xNi44NDIgMS4wMy40MzJjMi43NzMgMS4xNjQgNS4xMjcgMi42NDIgNy4zMDQgNS43MjRsNi42My02LjUyYy0xLjA4LS4zMS0yLjIxNC0uNzU1LTMuNDktMS40MjNsLTM3LjMyNS0xOC40MDItLjk2Ni45NDctLjAwNS0uMDA0LTMuMSAzLjA1LS40MjQuNDE1LS42Ny42NjJ2LS4wMDNsLTMuNyAzLjYyOGMuOTkyLjY3NiAyLjA1NCAxLjcxIDIuODkgMy42MDhsLjAyLjA0OCAxMi45NzYgMzIuMDUyek05OS42OSAyNDMuMzEybDIuNjk0LTIuNjUyIDIzLjUxOCAxMi4wNjQtMTYuMDI2IDE1LjM4NS0xMC4xODYtMjQuNzk4TTI3Mi43MTcgMjY1LjQwM2MwLTEuMTc2LS45NjQtMi4xMS0yLjExLTIuMTEtMS4xNzYgMC0yLjExLjkzNC0yLjExIDIuMTEgMCAxLjE0OC45MzQgMi4xMSAyLjExIDIuMTEgMS4xNDYgMCAyLjExLS45NjIgMi4xMS0yLjExIiBmaWxsPSIjOGY3YjRmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNOTguOTg3IDMxMC43NzZMMjY3Ljk3IDE0MS4wNDhsLS45NC4yMDctMS41NjMuMzUtMi4yNzYuNTA4LTEuNTk1LTEuNy0xOS4wOTQtMjAuMzY2LTItMi4xMzUgMS4zNzctMi41ODMuOTQ2LTEuNzczYzMuMDA2LTUuNjM2IDYuOTg4LTE1LjU2NCA4LjgyNS0yMy4wODZsLTguNDE1LTcuMjUtLjI5OC4zLTIwOS4yMSAyMDguODM1YzguMDMgNy42MyAxNS44NCAxMy43MyAyMy4yNiAxOC4xNTUgNi4xNzQgMy42ODMgMTEuOTQgNi4wOCAxNi45MzUgNy4wNi0uMDUtLjQ3NC0uMDc3LS45NTMtLjA3Ny0xLjQzMyAwLTMuNTEyIDEuMzY0LTYuODEgMy44NC05LjI4OCAyLjQ3NS0yLjQ4IDUuNzc1LTMuODQ1IDkuMjg2LTMuODQ1IDUuMzQ1IDAgOS45NTggMy4xOTUgMTIuMDE3IDcuNzdtNTQuMjU3LTYyLjQ5NWMtMy43MjQgMC02Ljc1My0zLjAzLTYuNzUzLTYuNzU1IDAtMy43MDggMy4wMy02LjcyNCA2Ljc1NC02LjcyNCAzLjcyOCAwIDYuNzYgMy4wMTcgNi43NiA2LjcyNSAwIDMuNzI2LTMuMDMyIDYuNzU1LTYuNzYgNi43NTVtMzEuMjEtMzEuNDJjLTMuNzI3IDAtNi43Ni0zLjAzMi02Ljc2LTYuNzU2IDAtMy43MjcgMy4wMzMtNi43NiA2Ljc2LTYuNzYgMy43MjMgMCA2Ljc1NCAzLjAzMyA2Ljc1NCA2Ljc2IDAgMy43MjQtMy4wMyA2Ljc1NS02Ljc1NSA2Ljc1NW01My44MzUtNjcuNzc3YzMuNzI0IDAgNi43NTUgMy4wMyA2Ljc1NSA2Ljc1NCAwIDMuNzI2LTMuMDMgNi43Ni02Ljc1NSA2Ljc2LTMuNzA1IDAtNi43Mi0zLjAzNC02LjcyLTYuNzYgMC0zLjcyNCAzLjAxNS02Ljc1NCA2LjcyLTYuNzU0bS02MC4zMjUgNS4wMTdsLjE2IDMuODg3Yy4wMzQuODA4Ljg0IDIuMTI4IDIuMTA2IDMuNDQ0bDQuOTY1IDUuMTFjLjczLjY2OCAxLjU3NCAxLjAwNSAyLjUxIDEuMDA1IDIuNjkgMCA1LjY2Ni0yLjY4NCA2LjkyMy02LjI0NS44OTMtMi41MjcgMi4xMTUtOS4xLTUuODMzLTE1LjUybC0xLjQzNS0xLjE2IDExLjM3NS0xMS42NyAxLjAzNCAyLjE4NWMzLjkwMyA4LjIzIDUuNDU0IDE1LjQ1NiA0LjkgMjMuMDUyIDEuMjgtLjMzIDIuNjEzLS41IDMuOTgtLjUgNS4zNzggMCAxMC42NjUgMi41NSAxNS4zMyA0Ljc5NyAzLjQyIDEuNjUgNi42NSAzLjIwNSA5LjM1IDMuNTE1bDMuNTA3LjQtMTUuNTIgMTUuMTktMS4wMzgtMi4wMzdjLTQuNDI0LTguNjgyLTExLjgxLTkuNjItMTQuNzgtOS42Mi00LjQ2IDAtOC41MjcgMS44ODYtOS42NjggNC40ODQtLjYxNiAxLjM5OC0uMjQgMi44NjcgMS4xMTMgNC4zNjhsOS4zOTUgOC43NWMuODE3LjgyIDIuNTIgMS41ODggMy41OTYgMS43OTNsMy4xMzIuNTk3LTE0LjE3NyAxNC4wNjgtLjYwNy0zLjA3MmMtLjQyOC0yLjE1LS44ODItMi45ODMtMi4zMDMtNC44MzVsLTI1LjI3LTI1LjY5M2MtMS40Ny0xLjMwNy0xLjczLTEuNDgtMy4yNS0xLjU4M2wtMy42Mi0uMjUzem0tMzAuNDgzIDMwLjg2bC4wOCAzLjk4M2MuMDIuNzkuODQgMi4xMzcgMi4wNSAzLjM1M2wyNi4xMjcgMjYuMTI3Yy44MjIuODQ0IDIuNTAyIDEuNTgyIDMuNTk2IDEuNzkybDMuMTI4LjU5OC0xNC4xNTMgMTQuMDQ3LS42MjItMy4wNDdjLS40MzQtMi4xMzQtLjg4OC0yLjk2Mi0yLjMwNC00LjgwNmwtMjUuMjctMjUuNjk0Yy0xLjQzNy0xLjI3OC0xLjcxMy0xLjUxMi0zLjI0Ni0xLjYxN2wtMy42NDUtLjI1MnptLTQ0Ljg1NSA0NS4zNzZsMzkuNDk2IDE5LjQ3NWMyLjE3IDEuMTMzIDMuNzU3IDEuNDkgNS42MjggMS42OThsMy41MDUuMzk2LTE0LjQ3IDE0LjIyLTEuMDgyLTEuODg3Yy0xLjc5LTMuMTI0LTMuNTU1LTQuNTY2LTUuODMyLTUuNjZsLTE0LjM5IDE0LjEzMmMuNTY2IDMuMTcgMy4yNzUgNS42NiA1LjcxNCA2LjY5N2wyLjMzOC45OS0xNi40MDcgMTUuODMuNjMtNC43N2MuNzc4LTUuODY1LjM0NC03LjkyNi0uNjQzLTExLjU3NmwtMTIuODkyLTMxLjg0Yy0uNzYtMS43MTYtMS42Mi0yLjE3My0yLjcxLTIuNzUyLS4yMzYtLjEyNS0uNDctLjI1LS43LS4zODRsLTEuOS0xLjEwOCAxMy43MTctMTMuNDYiIGZpbGw9IiNmMmRiMWQiLz48cGF0aCBkPSJNMTIwLjE5MyAyNTMuNTU3bC0xNi4wNTMtOC4yMzQgNi45NjYgMTYuOTZ6IiBmaWxsPSIjZjJkYjFkIi8+PC9zdmc+");
+}
+
+.bkh {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NTIuMDkzIiBoZWlnaHQ9IjcwOC44MjciIHZpZXdCb3g9IjAgMCA1NTIuMDkzMzIgNzA4LjgyNjY2Ij48cGF0aCBkPSJNNTQ3LjU2IDE0MC4yMTNjLS4zMi4zODctMzMuMDI3IDQwLjk0Ny0zMy4xNzMgOTguMzYtLjE0NyA1Ny4wNjcgMTEuNjQgMTE1LjAyNyAyMC4yNCAxNTcuMzYgMy42NjYgMTguMDE0IDYuODU0IDMzLjYxNCA4LjUzMyA0NC43ODcgNS42NCAzNy41NzMgNS4xNzMgNjkuNTczLTE0LjQyNyA5NS40NTMtMTguNzIgMjQuNzA3LTU1LjA1MyA0Ny42LTExMi43NzMgNzguNDQtNjguNTczIDM2LjYyNy0xMzguMzQ3IDkyLjMyLTEzOS45MDcgOTQuMjE0bC0uMDEzLS4wMTRjLTEuNzczLTIuMDUzLTcxLjQxMy01Ny42MTMtMTM5Ljg4LTk0LjItNTcuNzA3LTMwLjgyNi05NC4wNC01My43MzMtMTEyLjc2LTc4LjQ0LTE5LjYxNC0yNS44NjYtMjAuMDgtNTcuODgtMTQuNDI3LTk1LjQ0IDEuNjY3LTExLjE4NiA0Ljg1NC0yNi43ODYgOC41Mi00NC44IDguNi00Mi4zMiAyMC4zODctMTAwLjI5MyAyMC4yNC0xNTcuMzQ2LS4xNDYtNTcuNDE0LTMyLjg2Ni05Ny45NzQtMzMuMTg3LTk4LjM3NEwwIDEzNC43MzMgMTA2LjE0NyAwbDYuMzIgMy4xNzNjLjQ5My4yNCA0OC42MjYgMjMuOTc0IDg1LjI1MyAzMC4xODcgMzguMzA3IDYuNTA3IDc1LjAxMyA2Ljg2NyA3Ny42OCA2Ljg4di0uMDEzczM5LjEwNy0uMiA3OC4zNzMtNi44NjdjMzYuNjI3LTYuMjEzIDg1LjI0LTI5Ljk2IDg1LjcyLTMwLjJMNDQ1LjkwNyAwbDEwNi4xODYgMTM0LjcyLTQuNTMzIDUuNDkzIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTQwNy4yNjcgNTk2LjQxM2MtNTYuOTA3IDMwLjQtMTEyLjI4IDcwLjM4Ny0xMzEuMiA4NC40NC0xOC45NDctMTQuMDUzLTc0LjMwNy01NC4wNC0xMzEuMjE0LTg0LjQ0LTMxLjU4Ni0xNi44OC01NS40MTMtMzAuMzg2LTczLjE3My00Mi43MzNsNDM5LjQxMy0zODMuOTczYy03LjY0IDE3LjkyLTE0LjI4IDQxLjI4LTE0LjM0NiA2OC44MjYtLjE0NyA1OC44NTQgMTEuODQgMTE3Ljg0IDIwLjYgMTYwLjkwNyAzLjU3MyAxNy42MjcgNi42OCAzMi44NTMgNy45MiA0My4zNiA4Ljk0NiA3NS42MjctNC4yOTQgOTIuODUzLTExOCAxNTMuNjEzIiBmaWxsPSIjZjRmMDFlIi8+PHBhdGggZD0iTTQxMC4wNjcgNTk1LjI0Yy0xLjMzNC4zODctMS43MDcuNzczLTIuNDQgMS4xNzMtMjQuMjk0IDEyLjk3NC00OC4yMjcgMjcuNzA3LTY5LjU2IDQxLjQxNHYtMzE2LjcybDcwLjY2Ni02Mi40OTQgMS4zMzQgMzM2LjYyN00yNzUuNCAzNzUuMTg3djMwNS42NjZjLTEyLTguOTYtMzguNjY3LTI4LjQ1My03MC42NjctNDkuMjhWNDM3LjY4bDcwLjY2Ny02Mi40OTNNMTQyLjA2NyA0OTEuOHYxMDMuMzczQzExMi43MzMgNTc4Ljg2NyA4OC41NiA1NjUuNzIgNzEuMjQgNTUzLjY4bDcwLjgyNy02MS44OE00NzAuOTA3IDU2MC4wNGwtLjEzNC0zNTUuMTA3IDQwLjMyLTM1LjIyNmMtNy42NCAxNy45Mi0xNC4yOCA0MS4yOC0xNC4zNDYgNjguODI2LS4xNDcgNTguODU0IDExLjg0IDExNy44NCAyMC42IDE2MC45MDcgMy41NzMgMTcuNjI3IDYuNjggMzIuODUzIDcuOTIgNDMuMzYgNi44OCA1OC4xNzMuNjQgODEuNzg3LTU0LjM2IDExNy4yNE00NC4xMzMgMzUxLjY0YzYuMTM0LTM0LjYgMTEuMzg3LTczLjg2NyAxMS4yOTQtMTEzLjEwN0M1NS4yOTMgMTg3LjE2IDMyLjI4IDE1MC4zMiAyMi40OCAxMzYuMjhsODkuNTYtMTExLjkzM2MxNC45MDcgNi45MiA1Mi4wMTMgMjEuMDkzIDgzLjMyIDI2LjQxMyA0MC43MiA2LjkwNyA4MC4wNCA3LjEyIDgxLjM3MyA3LjEzM3YtLjAyNmMyLjY2Ny0uMDE0IDQwLjU0Ny0uMzIgODAuNi03LjEyIDE0LjE0Ny0yLjQgMjkuMjY3LTYuNjE0IDQzLjEzNC0xMS4xNDdMNDQuMTMzIDM1MS42NCIgZmlsbD0iIzE0MTMxNiIvPjxwYXRoIGQ9Ik0xNjMuOTggNDE2Ljc0N2wtNTEuMTYtNTguNDRjLS4zNi0uNC0uODkzLS42MjctMS40OTMtLjYyNy0uNDggMC0uOTQ3LjE2LTEuMjguNDUzbC0xMC41MDcgOS4xNzRjLS44MTMuNzA2LS44OTMgMS45Ni0uMTg3IDIuNzczbDE5LjY1NCAyMi40NTUtMjUuNjU0IDIyLjQzOEw3My43IDM5Mi41MzVjLS4zNi0uNDI3LS45MDctLjY4Mi0xLjQ4LS42ODItLjQ4IDAtLjkyLjE3NC0xLjI4LjQ5NGwtMTAuNTA3IDkuMTg4Yy0uNzczLjY4LS44NjYgMi0uMTg2IDIuNzcybDUxLjE0NiA1OC40NTRjLjY1My43MzUgMi4wNC44MjcgMi43NzQuMTg3bDEwLjUwNi05LjJjLjgxMy0uNzA2Ljg5NC0xLjk2LjE4Ny0yLjc3NGwtMjAuNDkzLTIzLjQxMyAyNS42NTMtMjIuNDUyIDIwLjQ5MyAyMy40MTJjLjY4Ljc4NyAxLjk3NC44OTMgMi43Ni4xODhsMTAuNTItOS4xODhjLjc3NC0uNjguODU0LTIgLjE4Ny0yLjc3M00xNzkuNzEzIDM2OC44NjhsLTYuMjkzLTIwLjkwOC4zNDctLjMwNyAyMCA4LjkzNHptNTQuMDI3LTExLjY1M2MtLjA5My0uNjE0LS41Mi0xLjEzNS0xLjE3My0xLjQyOGwtNzkuNjQtMzUuMjI3Yy0uMjI3LS4wOTMtLjQ5NC0uMTQ3LS43NzQtLjE0Ny0uNDkzIDAtLjk3My4xNi0xLjI5My40NGwtLjg4Ljc3NGMtLjUwNy40NTMtLjc0NyAxLjMyLS41NzMgMi4wMTNsMjQuMzczIDgzLjU4N2MuMjUzLjg2OC45MiAxLjQxMyAxLjcyIDEuNDEzLjQ2NyAwIC45NDctLjIgMS4zNi0uNTZsOS43MDctOC41MDdjMS44OC0xLjYzOCAxLjU4Ni0zLjYgMS4yNTMtNC42MTNsLTMuMDY3LTEwLjAxMyAyNC4yOC0yMS4yNCA5LjQ0IDQuMjUzYzEgLjQ0IDEuNzM0LjY0IDIuMzYuNjQuOCAwIDEuNTA3LS4zMzIgMi4zNzQtMS4wOTNsOS44LTguNTZjLjU2LS40OC44MjYtMS4xMi43MzMtMS43MzJNMjgzLjU5MyAyOTcuNTA3bC0xMy4yOTMtMS4yOTJjLS4wOC0uMDE1LS4xNDcgMC0uMiAwLS44NTMgMC0xLjc2LjgyNS0xLjg5MyAxLjcxOC0uNzYgNS40LTMuODI3IDEwLjkzNC04LjIgMTQuNzYtNC4zMDcgMy43NzQtOS41NiA1LjgwMi0xNS4xNzQgNS44MDItNi45MDYgMC0xMy41NzMtMy4wMTUtMTguMjkzLTguNDAyLTkuMDEzLTEwLjMwNi04LjQtMjQuOTQ2IDEuNDEzLTMzLjUzMy4wNTQtLjA1My4xMi0uMDkzLjE3NC0uMTMzLjI2Ni0uMjI3LjUzMy0uNDU0LjgtLjY2NyAwLS4wMTMuMDEzLS4wMTMuMDEzLS4wMTMuMjI3LS4xNzQuNDY3LS4zNDcuNjkzLS41MiA0LjEwNy0zLjA1NCA5LjItNC43ODYgMTQuMzYtNC43MzIuNjU0LjAzOCAxLjI0LS4yMDIgMS42NC0uNjQyLjE3NC0uMjkzLjI4LS42MzguMzA3LS45NzJsLjYyNy0xMy41MDdjLjA0LS41ODYtLjE0Ny0xLjEyLS41MDctMS41MDYtLjM2LS4zODctLjg5My0uNjE0LTEuNDgtLjYxNC0uMzczLS4wMTMtLjc0Ny0uMDEzLTEuMTA3LS4wMTMtMTAuNjEzIDAtMTkuMDI2IDMuMjI3LTI3LjI2NiAxMC40NC0xNy40NjcgMTUuMjgtMTkuMjQgNDEuOTItMy45NiA1OS4zODcgNy45NiA5LjA5NCAxOS40MTMgMTQuMzA2IDMxLjQxMyAxNC4zMDYgMTAuMTg3IDAgMjAuMDY3LTMuNzMzIDI3LjgyNy0xMC41MzMgOC4yLTcuMTczIDEzLTE2LjU2IDEzLjg1My0yNy4xNi4wNjctMS4wNC0uNzczLTIuMTA3LTEuNzQ3LTIuMTczIiBmaWxsPSIjOWQ4YzRjIi8+PHBhdGggZD0iTTI0My45OCAyNzAuODkzaC4xNmMuMDQgMCAuMDY3IDAgLjA5My0uMDEyLS4wOCAwLS4xNi4wMTMtLjI1My4wMTNNMzU1LjAzMyAyNTAuMjEzYy0uMjI2LS45MDYtMS4wMDItMS41ODYtMS44OTYtMS43ODZsLTQ4LjQwNC05LjY1NHYtLjIxM2wtMS45NTctNDMuOTQ3Yy0uMTItMS40MTMtMS4zODQtMi4yNjYtMi41MDQtMi4yNjYtLjU3MiAwLTEuMDYuMi0xLjUuNTg2bC0xMS4xMDMgOS43MzRjLS40NTQuMzg2LS44NDYgMS40MjYtLjgwNSAyLjEzM2wxLjgzIDQyLjM3My0yMC43OTYtMjMuNzg2Yy0uNDgtLjU0Ny0xLjE4OC0uODY3LTEuOTM1LS44NjctLjYyNiAwLTEuMjEyLjIyNy0xLjY2NS42MjdsLTEwLjMzMyA5LjA0Yy0xLjA4LjkzMy0xLjE3NCAyLjUyLS4yNCAzLjU4Nmw1MC4zNiA1Ny41NzRjLjQ5My41NiAxLjIuODggMS45Mi44OC42MTMgMCAxLjItLjIxNCAxLjY4LS42NGwxMC4zMzMtOS4wNGMuNDkzLS40NC44LTEuMDY3Ljg1My0xLjc2LjA0LS42OC0uMTczLTEuMzM0LS42MTMtMS44NGwtMjMuNTYtMjYuOTIgNDUuNDUzIDEwLjA1M2MuMDI3IDAgLjA2Ny4wMTMuMTM0LjAxMy40NCAwIDEuMjkzLS4zMTggMS43NzMtLjczM2wxMi4yLTEwLjY2N2MuNzA3LS42MTMgMS4wMTMtMS41NDYuNzczLTIuNDhNNDA1Ljg3MyAyMDUuMDRsLTguNDEzLTkuNjI3Yy0uNjkzLS43NzMtMS45NzMtLjg4LTIuNzczLS4xNzNsLTI0LjY1NCAyMS41NzMtMTAuNzg2LTEyLjMyIDIwLjMzMy0xNy43ODZjLjgxMy0uNzIuODkzLTEuOTYuMTczLTIuNzc0bC04LjQxMy05LjYyNmMtLjM2LS40LS45MDctLjY0LTEuNDkzLS42NC0uNDk0IDAtLjk0Ny4xNi0xLjI4LjQ1M2wtMjAuMzM0IDE3LjgtOS45MzMtMTEuMzQ3IDI0LjY2Ny0yMS41ODZjLjM4Ni0uMzQ3LjYyNi0uODE0LjY2Ni0xLjMzNC4wMjctLjUyLS4xNDYtMS4wNC0uNDkzLTEuNDRsLTguNDEzLTkuNjEzYy0uMzc0LS40MjctLjkyLS42OC0xLjQ5NC0uNjgtLjQ2NiAwLS45MTguMTczLTEuMjguNDkzbC0zNi41NiAzMS45ODdjLS44MTMuNzItLjg5MyAxLjk2LS4xNzMgMi43NzNsNTEuMTQ3IDU4LjQ0Yy42OC43ODcgMS45NzMuODk0IDIuNzczLjE4N2wzNi41NDctMzEuOTg3Yy40MTMtLjM2LjY1My0uODQuNjgtMS4zNzMuMDI2LS41MDctLjE2LTEuMDEzLS40OTQtMS40TTQ3NS45MTMgMTQ1LjUwN2wtNTItNTkuNDRjLS42NC0uNzM0LTIuMDQtLjgyOC0yLjc3My0uMTg3bC0xMC41ODcgOS4yNjdjLS44MTMuNzA2LS45MDUgMS45MDYtLjE4NiAyLjcybDI3LjYxNCAzMS41ODYtLjM4Ny4yOTRoLS4xMDZsLTY0Ljc4Ny0zLjA0LTIuMTMzIDEuOTRjLS43ODcuNjkzLS45MDcgMS44OTYtLjI1MiAyLjY1Nmw1Mi4wOTIgNTkuMzIyYy4zNi40MTQuODkzLjYzNCAxLjQ5My42MzQuNDggMCAuOTMzLS4xNjQgMS4yOC0uNDU3bDEwLjUwNy05LjE4OGMuODEzLS43Mi44OTMtMS45NjIuMTczLTIuNzc1bC0yOS0zMy4xMzMuMzg3LS4zMzQuMTA2LjAxNCA2NS41NDcgNC41MzNjLjI5MyAwIDEuMTMzLS4zMiAxLjM0Ny0uNTA3bDEuNDEzLTEuMjI2Yy4zODctLjM0Ny42NC0uODU0LjY4LTEuMzg3LjAyNy0uNDkzLS4xMi0uOTQ3LS40MjctMS4yOTNNMTMyLjU3NSAzMjAuOTI4Yy0yLjE1NiAwLTQuMjQ0Ljc4OC01Ljg4IDIuMjItMy42OSAzLjIzLTQuMDUgOC42NTItLjgyMiAxMi4zNCAxLjcgMS45NDQgNC4xNDUgMy4wNiA2LjcwNiAzLjA2IDIuMSAwIDQuMTMtLjc2NSA1LjcxMy0yLjE1IDEuNzcyLTEuNTUgMi44MzYtMy43MSAyLjk5NC02LjA4LjE1Ny0yLjM3My0uNjEtNC42NTUtMi4xNjItNi40MjctMS42NS0xLjg4My00LjAzNi0yLjk2Mi02LjU1LTIuOTYyTTE2OC4yMTUgMjk4LjQzMmMtMS42NDgtMS44ODMtNC4wMzUtMi45NjQtNi41NS0yLjk2NC0yLjE1NiAwLTQuMjQ0Ljc4OC01Ljg4IDIuMjItMy42OSAzLjIzLTQuMDUgOC42NS0uODIgMTIuMzQzIDEuNyAxLjk0MiA0LjE0NCAzLjA1NyA2LjcwNiAzLjA1NyAyLjEwMyAwIDQuMTMzLS43NjIgNS43MTQtMi4xNDYgMS43NzItMS41NTIgMi44MzYtMy43MTIgMi45OTMtNi4wODMuMTYtMi4zNy0uNjEtNC42NTMtMi4xNjItNi40MjVNMTI1LjgxNSAxNDguMTZjNC4yMTUgMCA3LjU5LTMuMjkgNy41OS03LjY3NiAwLTQuMjE2LTQuMjE4LTcuMzM3LTguNjAzLTcuMzM3aC05LjE5djE1LjAxMnptLTEuMTgyLTI0LjI4OGM0LjMgMCA3LjI1Mi0zLjM3NiA3LjI1Mi03LjU5IDAtNC4yMTUtMi45NS03LjE3LTcuMjUyLTcuMTdoLTkuMDJ2MTQuNzZ6bS0xOS45LTIzLjE5YzAtLjg0My42NzUtMS42MDIgMS42LTEuNjAyaDE5LjMxMmMxMC4wMzQgMCAxNy43OTIgNi43NDQgMTcuNzkyIDE1LjYgMCA2LjQ5Mi01LjMxMyAxMS41NTItOS4yNzYgMTMuNDA3IDQuNDcyIDEuNDMzIDEwLjk2NCA1Ljk4NiAxMC45NjQgMTMuNzQ2IDAgOS40NDQtOC4wOTUgMTYuMjc0LTE4LjM4MyAxNi4yNzRoLTIwLjQwNmMtLjkyNiAwLTEuNi0uNzYyLTEuNi0xLjYwNHYtNTUuODJNMTU3LjEzNiAxMzAuMjA0YzAtNC40NDQgMy42NTUtOC4xIDcuODUzLTguMSA0LjQ0NiAwIDguMSAzLjY1NiA4LjEgOC4xIDAgNC4yNjUtMy42NTQgNy44NTYtOC4xIDcuODU2LTQuMiAwLTcuODU0LTMuNTktNy44NTQtNy44NTZNMTg3LjcwNSAxMDAuNzE1YzAtMS4wOTguNDU0LTEuNjM1IDEuNjM1LTEuNjM1aDguMmMxLjA5MiAwIDEuNjMyLjUzNyAxLjYzMiAxLjYzNXYyMy4xNTdsMjEuMjUtMjMuOTQ4Yy4zMzgtLjQyNC44NDItLjg0NCAxLjYwMi0uODQ0aDkuNTk3YzEuNjAzIDAgMi4wNi45OTUuOTYgMi4yNmwtMjIuNzgzIDI1LjU2NSAyNC4zODcgMjkuMDNjLjg0MyAxLjA5Mi41NTcgMi4xNzItMS4xMyAyLjE3MkgyMjIuN2MtLjg0NCAwLTEuMzQ4LS4zMzgtMS41Mi0uNTlsLTIyLjAwOC0yNy4xNTN2MjYuMTA3YzAgMS4wOTgtLjU0IDEuNjM3LTEuNjMzIDEuNjM3aC04LjJjLTEuMTggMC0xLjYzNS0uNTQtMS42MzUtMS42MzZ2LTU1Ljc1NSIgZmlsbD0iIzlkOGM0YyIvPjxwYXRoIGQ9Ik01Ny4yOTMgNTQyLjgyN0MyNC40OTMgNTE1LjYgMjEuMTQ3IDQ5MS4xMiAyNi44NjcgNDQyLjhjMS4yNC0xMC40OTMgNC4zMzMtMjUuNzIgNy45Mi00My4zNDcgMS4yNjctNi4yNTMgMi42MTMtMTIuODUzIDMuOTczLTE5LjcyTDQ0MS44OTMgMjYuNjI3bDg0Ljg0IDEwNnpNNTE3LjM0NyAzOTkuNDRjMy41NzMgMTcuNjI3IDYuNjggMzIuODUzIDcuOTIgNDMuMzYgMS40OTMgMTIuNjUzIDIuMzczIDIzLjY2NyAyLjI1MyAzMy41MzMgMCAuNTYtLjAxMyAxLjEyLS4wMjcgMS42NjctLjA0IDEuNTItLjA5MyAzLjAyNy0uMTc0IDQuNDkzLS4wMTMuMjQtLjAyNy40NjctLjA1My43MDctLjAyNy40NC0uMDU0Ljg4LS4wOTQgMS4zMDctLjA5MyAxLjM2LS4yMjYgMi42OTMtLjM3MyA0LS4wNjcuNTQ2LS4xMzMgMS4wOTMtLjIxMyAxLjYyNi0uMDY3LjUyLS4xMzQgMS4wMTQtLjIxNCAxLjUyLS4xMi44NjctLjI2NiAxLjczNC0uNDI2IDIuNTg3LS4xMDcuNi0uMjI3IDEuMi0uMzQ3IDEuOC0uMTQ3LjczMy0uMzA3IDEuNDUzLS40OCAyLjE4Ny0uMTQ3LjY1My0uMzA1IDEuMjkzLS40OCAxLjkzMy0uMTYuNi0uMzIgMS4xODctLjQ5MiAxLjc3My0uNiAyLjEwNy0xLjMwOCA0LjE2LTIuMTA4IDYuMTg3LS4xODcuNDY3LS4zNzMuOTMzLS41NzMgMS4zODctLjIxNC41Mi0uNDQgMS4wNC0uNjggMS41Ni0uMDY3LjE2LS4xNDcuMzMzLS4yMjcuNTA2LS40Ljg2Ny0uODI3IDEuNzM0LTEuMjY3IDIuNTg3LS40NC44NTMtLjg5MyAxLjcwNy0xLjM3MyAyLjU0Ny0uMzIuNTQ2LS42NCAxLjA5My0uOTczIDEuNjQtMS4wOTQgMS44MTMtMi4yOTUgMy42MTMtMy42MTQgNS4zODYtLjMyLjQ1NC0uNjY2LjkyLTEuMDE0IDEuMzc0LS45MDcgMS4xODYtMS44NjcgMi4zNzMtMi44OTMgMy41Ni0uNDI3LjUwNi0uODggMS4wMjYtMS4zMzQgMS41MzMtLjM3My40MjctLjc2Ljg0LTEuMTYgMS4yNjctLjI4LjMwNi0uNTYuNjEzLS44NjYuOTItLjg0LjkwNi0xLjcyIDEuOC0yLjY1NCAyLjcwNi0uNC40MTQtLjgyNi44MTQtMS4yNTMgMS4yMTQtLjQxMy40MTMtLjg0LjgxMy0xLjI4IDEuMjEzLTQuNzczIDQuNDQtMTAuMzA3IDguODkzLTE2LjcwNyAxMy41MDctMS4xNi44NC0yLjM0NiAxLjY4LTMuNTczIDIuNTMzLS42MTUuNDI3LTEuMjI3Ljg1My0xLjg1MyAxLjI4LS42MjcuNDI3LTEuMjU0Ljg1My0xLjg5NCAxLjI4LTEuOTA2IDEuMjkzLTMuODkzIDIuNi01Ljk0NiAzLjkyQzQ1NSA1NzAuMzA3IDQzNSA1ODEuNTQ2IDQxMC4wNjcgNTk0LjkyYy0uOTIuNDkzLTEuODU0Ljk4Ni0yLjggMS40OTMtMjQuMjU0IDEyLjk2LTQ4LjIxNCAyNy42NTQtNjkuMiA0MS4zMzMtMjguMjggMTguNDQtNTEuMTQ3IDM1LjA0LTYyIDQzLjEwNy0uMjE0LS4xNi0uNDQtLjMyLS42NjctLjQ5My0xMC40MTMtNy43MDctMzAuOC0yMi40OTMtNTYuMDkzLTM5LjE2LS41NDctLjM3My0xLjEwNy0uNzMzLTEuNjY3LTEuMTItMjEuODI3LTE0LjMyLTQ3LjE0Ny0yOS45NzQtNzIuNzg3LTQzLjY2Ny0uOTMzLS40OTMtMS44NjYtMS0yLjc4Ni0xLjQ5My02Ljg2Ny0zLjY4LTEzLjM0Ny03LjE4Ny0xOS40OC0xMC41NzQtMS43MzQtLjk2LTMuNDQtMS45MDYtNS4xMi0yLjg0LTMuNzM0LTIuMDgtNy4zMzQtNC4xMDYtMTAuNzg3LTYuMDgtLjc3My0uNDUzLTEuNTMzLS44OTMtMi4yOTMtMS4zMi0xMi42OTQtNy4zMzMtMjMuNTA3LTE0LjA0LTMyLjcwNy0yMC40MjZsNzAuMzg3LTYxLjUwNyA4OC03Ni44OTMgNDUuMzMzLTM5LjYxMyA4Mi4wNjctNzEuNzA3IDUxLjI2Ni00NC44MTMgNjIuMDQtNTQuMjE0IDQwLjMyLTM1LjIyNmMtNy42NCAxNy45Mi0xNC4yNzggNDEuMjgtMTQuMzQ2IDY4LjgyNi0uMTQ3IDU4Ljg1NCAxMS44NCAxMTcuODQgMjAuNiAxNjAuOTA3ek0yNy4yOTMgMTQzLjUzM2MtLjQtLjY0LS44LTEuMjUzLTEuMTczLTEuODQtLjU3NC0uODkzLTEuMTM0LTEuNzMzLTEuNjU0LTIuNTItLjM2LS41Mi0uNzA2LTEuMDI2LTEuMDI1LTEuNTA2LS4zMzMtLjQ5NC0uNjU0LS45NDctLjk2LTEuMzg3bDg5LjU2LTExMS45MzNjMS4xNzMuNTQ2IDIuNDY3IDEuMTMzIDMuODkzIDEuNzQ2IDE2LjY5NCA3LjM0NyA0OS45MDcgMTkuNzYgNzguNzYgMjQuNjY3IDQwLjcyIDYuOTA3IDc5LjM3NCA3LjEyIDgwLjcwNyA3LjEzM3YtLjAyNmMyLjY2Ny0uMDE0IDQxLjIxMy0uMzIgODEuMjY3LTcuMTIgMTQuMTQ2LTIuNCAyOS42LTYuNjE0IDQzLjQ2Ni0xMS4xNDdsLS4xODYuMTczTDQ0LjE2IDM1MS40OGwtLjE4Ny4xNmM2LjEzNC0zNC42IDExLjQ2OC03My44NjcgMTEuMzczLTExMy4xMDctLjEyLTQ0LjE0Ni0xNy4wNjYtNzcuNTYtMjguMDUzLTk1em01MjQuOC04LjgxM0w0NDUuOTA3IDBsLTYuNDE0IDMuMTZjLS40OC4yNC00OS4wOTMgMjMuOTg3LTg1LjcyIDMwLjItMzkuMjY2IDYuNjY3LTc4LjM3MyA2Ljg2Ny03OC4zNzMgNi44Njd2LjAxM2MtMi42NjctLjAxMy0zOS4zNzMtLjM3My03Ny42OC02Ljg4LTM2LjYyNy02LjIxMy04NC43Ni0yOS45NDctODUuMjU0LTMwLjE4N0wxMDYuMTQ2IDAgMCAxMzQuNzMzbDQuNTQ2IDUuNDhjLjMyLjQgMzMuMDQgNDAuOTYgMzMuMTg3IDk4LjM3NC4xNDcgNTcuMDUzLTExLjY0IDExNS4wMjYtMjAuMjQgMTU3LjM0Ni0zLjY2NiAxOC4wMTQtNi44NTMgMzMuNjE0LTguNTIgNDQuOC01LjY1MyAzNy41Ni01LjE4NyA2OS41NzQgMTQuNDI3IDk1LjQ0IDE4LjcyIDI0LjcwNyA1NS4wNTMgNDcuNjE0IDExMi43NiA3OC40NCA2OC40NjcgMzYuNTg3IDEzOC4xMDcgOTIuMTQ3IDEzOS44OCA5NC4ybC4wMTMuMDE0YzEuNTYtMS44OTQgNzEuMzM0LTU3LjU4NyAxMzkuOTA3LTk0LjIxNCA1Ny43Mi0zMC44NCA5NC4wNTMtNTMuNzMzIDExMi43NzMtNzguNDQgMTkuNi0yNS44OCAyMC4wNjctNTcuODggMTQuNDI3LTk1LjQ1My0xLjY4LTExLjE3My00Ljg2Ny0yNi43NzMtOC41MzMtNDQuNzg3LTguNi00Mi4zMzMtMjAuMzg3LTEwMC4yOTMtMjAuMjQtMTU3LjM2LjE0Ni01Ny40MTMgMzIuODUzLTk3Ljk3MyAzMy4xNzMtOTguMzZsNC41MzMtNS40OTMiIGZpbGw9IiM5ZDhjNGMiLz48L3N2Zz4=");
+}
+
+.mff {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNzQuODI3IiBoZWlnaHQ9IjU2OC44OTMiIHZpZXdCb3g9IjAgMCAzNzQuODI2NjYgNTY4Ljg5MzMxIj48cGF0aCBkPSJNMzU0LjQ5NyAzOC4yNzZWLS4wMDRoLTM2LjIxdjI3LjcyOEgyNzkuODlWLS4wMDZIMjQzLjYzdjI3LjczaC0zOC4zOVYtLjAwNmgtMzYuMjZ2MjcuNzNoLTM4LjM5N1YtLjAwNkg5NC4zMnYyNy43M0g1NS45MjVWLS4wMDZoLTM2LjIxdjM4LjI4MmMtLjk5NyAxMTIuMjUgMTIuMDU0IDIxNy44ODUgNzkuNTkzIDMwMC40OTcgMjQuOTE4IDI5LjI0IDU0LjU3NyA1My45NTQgODcuOCA2NS4yNTIgMzMuMjI1LTExLjI5OCA2Mi44NzYtMzYuMDEzIDg3Ljc5NS02NS4yNTIgNjcuNTQyLTgyLjYxMiA4MC41OS0xODguMjQ4IDc5LjU5NC0zMDAuNDk3IiBmaWxsPSIjMmY5N2RhIi8+PHBhdGggZD0iTTEzMS42NSAxMTMuMTE3djI0Ny4wNGMxNy4xNDMgMTQuODUgMzUuMTY3IDI3Ljc3MiA1NS40NiAzNC43NDggMjAuMjkzLTYuOTc2IDM4LjMxNC0xOS44OTcgNTUuNDU0LTM0Ljc0OHYtMjQ3LjA0SDEzMS42NU0zMjYuNzY3IDguNTI3bC4wNTMgMjcuNzI4aC01NS40NlY4LjUyN2gtMTkuMnYyNy43MjhoLTU1LjQ1M1Y4LjUyN0gxNzcuNTF2MjcuNzI4aC01NS40NlY4LjUyN2gtMTkuMTk3djI3LjcyOEg0Ny40MzZsLjAwNi0yNy43MjhIMjguMjl2OTUuOTg2aDMxNy42MzNWOC41MjdoLTE5LjE1NiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNDQuNDggOTUuOTAzVjQ0LjgyaDM5Ljc2djcuODcyaC0yOC45MDdWNjQuNGgyNS4xMnY3LjY2NGgtMjUuMTJ2MjMuODRIMjQ0LjQ4TTE2NC4yOTYgNzYuMDY3YzMuNjIgMCA2LjU1NS0yLjkzNCA2LjU1NS02LjU1OCAwLTMuNjItMi45MzMtNi41NjItNi41NTQtNi41NjItMy42MiAwLTYuNTYgMi45NDMtNi41NiA2LjU2IDAgMy42MjUgMi45NCA2LjU2IDYuNTYgNi41Nk0yMjkuNDYgNzYuNDkzYzMuNjE2IDAgNi41NTUtMi45NCA2LjU1NS02LjU2IDAtMy42Mi0yLjk0LTYuNTU4LTYuNTU1LTYuNTU4LTMuNjIgMC02LjU1MiAyLjkzOC02LjU1MiA2LjU1NyAwIDMuNjIgMi45MyA2LjU2IDYuNTUyIDYuNTZNMTIwLjA1MiA5NS45MDNoNC44OTZsMTYuMzktMzkuODAzdjM5LjgwM2g5LjE1VjQ0LjgyaC0xNC45bC0xNS41MzYgMzUuNTQ0LTE1LjUzOC0zNS41NDVIODkuNjE3djUxLjA4M2g5LjE1M1Y1Ni4zMWwxNi42MDIgMzkuNTkzaDQuNjhNMTc4LjM3NiA5NS45MDNWNDQuODJoMzkuNzZ2Ny44NzJoLTI4LjkwOFY2NC40aDI1LjEydjcuNjY0aC0yNS4xMnYyMy44NGgtMTAuODUyTTIxNi45MTIgNTIxLjk2M2wtMTguMjgtLjQ0LTExLjUyMy0xMy42ODItMTEuNTIzIDEzLjY4My0xOC4yODIuNDQgNy43OSAxNi40MDQtNy43OSAxNi40MDUgMTguMjgyLjQzNyAxMS41MjIgMTMuNjgzIDExLjUyLTEzLjY4NCAxOC4yODItLjQzOC03Ljc5LTE2LjQwNSA3Ljc5LTE2LjQwNE04MC42NTUgNDAyLjYzYzEuMDA4Ljc2NyAxLjk3OCAxLjYxIDMuMDc3IDIuMjIgMS4xLjYwNSAyLjQwNCAxLjAyMiAzLjU4NiAxLjQ3NC05LjI2OCAyMi40NDMtMTYuOTQ4IDQwLjU0LTIyLjk0IDU3LjYyNS0yLjExLTEuMzc1LTQuMDk0LTIuNzg3LTYuMjktNC4wMDUtMi4xOTItMS4yMTYtNC4yODUtMi4wNy02LjU2Ni0zLjEzIDYuMjg3LTEyLjgxMiAxMS4zNzMtMjUuNjg0IDE2Ljg5Ni0zOC40MTItMTIuNjEzIDguNjkyLTI1LjE1MyAxNy40MjgtMzcuNDYzIDI2LjQ5My0uOTMyLS43MjItMS44My0xLjMyMy0yLjk3OC0xLjY1Mi45ODItMTMuNjA4IDEuNTMtMjkuMiAyLjM5OC00NC44MTUtOS40NTUgMTIuNzk4LTE2Ljc2IDIzLjAwMy0yMy4wODUgMzMuODUzLTEuMTY0LS44NTYtMi4yMS0xLjc0My0zLjQ2Ni0yLjQzNi0xLjI1NS0uNzAyLTIuNDgtMS4wNy0zLjgyNC0xLjYxIDExLjU2Ni0xNC4yIDI0LjE2OC0zMC45OTQgMzcuODM2LTQ5LjM2IDEuMDE1Ljc3IDEuOSAxLjU3IDIuOTk4IDIuMTc4IDEuMS42MDggMi4zMjguOTg0IDMuNTE1IDEuNDM3LTEuMTg4IDE1LjQ0LTEuNzggMzEuMTA4LTIuNDEzIDQ2Ljg2IDExLjgyNS04LjAwNyAyNS4zMi0xNi42MiAzOC43MTgtMjYuNzJNMTA0LjM2NyA0NTEuNTE2Yy0yLjQyLjM3Ni02LjUyNi4xMTItOS41NyAxLjQzLTIuNzM0IDEuMjE4LTMuOTUgMy42NzgtNC42OTIgNi40NDctLjg1MiAzLjIwNC0uODEgNy4yMDcgMi45MSA4LjIgNS4yODUgMS40MTggNy43NzUtMy4zOTQgOS4xMDYtNy42Nzd6bTcuOTIgMTguMjY1Yy0uODUzIDMuMjA1LS4xOCA0LjUgMy4zMjcgNS4yNWwtLjUzMyAxLjk5M2MtMi4zMy4zOTQtNS45OTIuOS04LjQxNS4yNTMtNC4wNy0xLjA4Ny02LjUxNi00LjQzMi02Ljg4NC04LjYxNS0zLjMxNCAzLjM4NC04LjI3IDQuNTYzLTEyLjc3MyAzLjM2LTcuMTAyLTEuOS0xMS4zNC03LjIxMy05LjMyNC0xNC43NDMgMi4xOTgtOC4yMjggNy44Ny05LjMxIDE5LjM4OC05LjAxMyAyLjMwNS4wNiA0LjY5OC4xNCA2LjkyMy0uNTYgMS4yOTQtLjY3NSAxLjg1NS0xLjcyNyAyLjIwMi0zLjAyOCAxLjExMi00LjE1Ni0yLjIwNC04Ljc1Ny02LjE4NC05LjgyLTUuNTQzLTEuNDgzLTExLjA2MyAxLjEyLTEyIDIuNTQ0bC0uNjA2LS4xNjQuMjYtNS40OTZjNS4wOTMtMi43MjMgMTIuMTE3LTIuOTggMTcuNTc2LTEuNTE3IDcuMjczIDEuOTQ1IDE1LjY2NCA3LjM0MiAxMy4zNDggMTYuMDA1bC02LjMwMiAyMy41NTNNMTM2LjQzNiA0ODMuODI1Yy0xLjk5LS41NjgtMy45NjItMS4yMjUtNS45ODUtMS42Mi0yLjAyLS4zOTMtNC4wOTYtLjUxOC02LjE1NC0uNzRsMTMtNjYuODU3YzEuOTg1LjU3IDMuOTU3IDEuMjMgNS45ODMgMS42MiAyLjAyLjM5IDQuMDk3LjUyNSA2LjE1NS43NGwtMTMgNjYuODU3TTE1Ni4wMyA0NDIuNDRjMi4wNTUuMjE2IDQuMTE1LjUyMyA2LjE3Ny41NiAyLjA2Mi4wMzcgNC4xMzItLjE5NyA2LjE5Ni0uMzM1bC0uMTIyIDYuNzIyYzIuNjgzLTQuMjYgOC4xMTctNy4zOSAxMy4zMTctNy4yOTYgNS42NS4xMDMgOS45OTUgMi45NjUgMTEuNzggOC4zNzcgMy4yMjQtNC42OTUgNy44NjItOC4wMiAxMy43NzYtNy45MTQgMTAuNDAzLjE4OCAxMy44OCA2LjM1IDEzLjcxIDE1Ljk0N2wtLjUyIDI4LjZjLTIuMDU2LS4yMTUtNC4xMTYtLjUyLTYuMTc2LS41Ni0yLjA2NC0uMDMzLTQuMTM0LjE5Ni02LjE5OC4zMzZsLjQzOC0yNC4yOTdjLjEwOC02LjAwOC0uMzE1LTEyLjQ3Ni02LjMyMy0xMi41OC02LjM2Ni0uMTItNy41MTMgMy44OTYtNy42MTYgOS40NThsLS40OSAyNy4xNjZjLTIuMDYtLjIxMi00LjExNy0uNTE3LTYuMTgtLjU1NS0yLjA2LS4wNC00LjEyOC4xOTMtNi4xOTMuMzM0bC40MzctMjQuM2MuMTEtNi4wMDctLjMxMi0xMi40NzUtNi4zMi0xMi41OC02LjE4Ny0uMTEyLTcuNTQ1IDUuNTEyLTcuNjMzIDEwLjQ0NGwtLjQ3MyAyNi4xODNjLTIuMDU3LS4yMTQtNC4xMTQtLjUyLTYuMTc4LS41NTgtMi4wNjQtLjA0LTQuMTM1LjE5NS02LjE5Ny4zMzVsLjc4OC00My40ODZNMjM0LjUxMiA0MjguOTI4Yy0uNDcyLTMuMDEgMS44NDQtNi4xODMgNC44NTUtNi42NiAzLjA5NC0uNDg4IDYuMTU3IDEuNjY0IDYuNjU3IDQuODVzLTEuNjYgNi4xNTUtNC44NSA2LjY2Yy0yLjkyMi40Ni02LjItMS45MjctNi42NjItNC44NXptMzAuMTAzLTQuNzMyYy40ODYgMy4xLTEuNjYzIDYuMTU2LTQuNzYgNi42NDQtMy4xODguNS02LjI2NC0xLjczNS02Ljc0Ny00LjgzNi0uNDg4LTMuMDk3IDEuODM2LTYuMTg4IDQuOTMyLTYuNjcyIDMuMDE2LS40NzUgNi4xIDEuODU1IDYuNTc1IDQuODY0ek0yNDYuMzkgNDYyLjM1Yy44OSA1LjY2NyAzLjQ4MiAxNy41MDYgMTEuMTgyIDE2LjI5NSA2Ljc5LTEuMjQ4IDcuMDQtMTIuMzU2IDUuNTEtMjIuMDk0LTEuMzU0LTguNTg1LTQuNzA2LTE1LjUtMTAuNjQtMTQuNTY4LTcuMTcgMS4xMzMtNy42OTQgOS45MjItNi4wNSAyMC4zN3ptLTEzLjA1NyAyLjMyNmMtMi4xODUtMTMuOSA0LjQwNC0yNC40NiAxNy45NDgtMjYuNTkyIDEzLjM3NS0yLjEwMiAyMy4wNjUgNC43MiAyNS4xMjMgMTcuODI0IDIuMTE2IDEzLjQ1NS00LjMwMyAyNC41MzUtMTguMjA0IDI2LjcyLTEzLjEgMi4wNi0yMi44MS00Ljg1Mi0yNC44NjctMTcuOTUyTTMyNS4xIDQ2MS43NWMtMi4xMDQuNzgyLTQuMjQ4IDEuNDgyLTYuMjggMi40My0yLjAzMy45NDUtMy45NTIgMi4xMzUtNS45MDQgMy4yNDNsLTI1Ljk1NS01NS43NCAzMC45Ni0xNC40MTJjLjM2MyAxLjIxLjY4OCAyLjU0NiAxLjIyMyAzLjY4NS41MjUgMS4xMzMgMS4zNCAyLjI0IDIuMDMgMy4zLTUuMjIgMS43NC0xMC43NyAzLjYzMy0xOS4yOTcgNy42MDRsOC4xMyAxNy40NjggOC42MTMtNC4wMWMzLjE2Ny0xLjQ3NCA2LjI3LTMuMzEgOS40OS01LjMwNy4zNjcgMS4yMS42OSAyLjU0NiAxLjIyMyAzLjY4LjUzIDEuMTQgMS4zNCAyLjI0NiAyLjAzNCAzLjMwNy0zLjU2NiAxLjI2NC03LjAwNCAyLjM3Mi0xMC4yNTQgMy44ODNsLTguNTMyIDMuOTc2IDEyLjUyIDI2Ljg5M00zNjkuNzc1IDQ0MC4yNzJjLTIuMDguODU2LTQuMiAxLjYzMi02LjE5NSAyLjY0OC0xLjk5NiAxLjAxNy0zLjg3IDIuMjctNS43ODggMy40NDhsLTI3Ljg4LTU0LjggMzAuNDM1LTE1LjQ4OGMuNDEgMS4yMDQuNzc4IDIuNTIgMS4zNDYgMy42NDMuNTc0IDEuMTE3IDEuNDIgMi4xOTIgMi4xNDYgMy4yMjgtNS4xNTcgMS45MjItMTAuNjMzIDQuMDA1LTE5LjAyIDguMjdsOC43MzYgMTcuMTggOC40Ny00LjMxYzMuMTEzLTEuNTg2IDYuMTUtMy41MzMgOS4zLTUuNjM3LjQxIDEuMi43ODIgMi41MiAxLjM1IDMuNjQuNTY1IDEuMTE1IDEuNDIgMi4xOTIgMi4xNDUgMy4yMy0zLjUyIDEuMzg2LTYuOTE2IDIuNjEzLTEwLjExIDQuMjRsLTguMzg3IDQuMjcgMTMuNDUyIDI2LjQ0IiBmaWxsPSIjMmY5N2RhIi8+PC9zdmc+");
+  margin-right: 3px;
+  width: 13px;
+}
+
+.ifk {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODUuOTQ3IiBoZWlnaHQ9IjI4NC4yMTMiIHZpZXdCb3g9IjAgMCAxODUuOTQ2NjcgMjg0LjIxMzMyIj48cGF0aCBkPSJNMTgzLjA0IDE4LjI3NmMuMDQtMS4yODUtLjE0LTIuNDQ4LS41MzctMy40NTctLjA4Ni0uMjEzLS4xODItLjQwMy0uMjk0LS42MTVsLS4xNjItLjMxNGMtLjA3NS0uMTI2LS4xNTYtLjI0LS4yNjctLjM5LS42Mi0uODgtMS40NTctMS41ODQtMi40MTMtMi4wMy0xLjU4My0uNzQ2LTMuODQzLS43ODctNS44NC0uODIzLS40NTQtLjAwOC0uODg4LS4wMTYtMS4yNzgtLjAzNC0uMjM0LS4wMS0uNDQ3LS4wMjItLjYwNy0uMDM4LTMuNzIzLS40NDYtNy4wMTgtMS41Mi0xMC41MDctMi42NTgtNC40MjQtMS40NC05LTIuOTMtMTQuMzY0LTIuOTYyLS42NDQgMC0xLjMwOC4wMTMtMS45OC4wNTQtNS45MDguMzYyLTExLjEzNSAyLjI4My0xNi4xOSA0LjE0Mi01LjExMiAxLjg4LTkuOTQgMy42NTUtMTUuMjYyIDMuODE1LS40MzYuMDE0LS44OTcuMDE3LTEuMzg2LjAwOC0zLjM2NS0uMDcyLTcuODQtLjg0Ni0xMC4yNjctMi43NjYtLjczNS0uNjE0LTEuMzkzLTEuNTItMS44MzMtMi41MTcgMCAwLTIuNDIzLjkxLTYuODguOTE1LTQuNDU1LS4wMDQtNi44NzYtLjkxNS02Ljg3Ni0uOTE1LS40NCAxLTEuMDk0IDEuOTAyLTEuNzkzIDIuNDgzLTIuNDY2IDEuOTUzLTYuOTQyIDIuNzI3LTEwLjMwNSAyLjgtLjQ4OC4wMDgtLjk1NC4wMDctMS4zOTgtLjAxLTUuMzEtLjE2LTEwLjEzOC0xLjkzNC0xNS4yNS0zLjgxNC01LjA1NS0xLjg1Ny0xMC4yODMtMy43OC0xNi4xOS00LjE0My0uNjczLS4wNDItMS4zMy0uMDU3LTEuOTgyLS4wNTUtNS4zNjMuMDMyLTkuOTQgMS41MjItMTQuMzYzIDIuOTYyLTMuNDkgMS4xMzgtNi43ODYgMi4yMTItMTAuNDczIDIuNjU0LS4xOTIuMDItLjQwNi4wMzQtLjYzNi4wNDMtLjM5Mi4wMTgtLjgyOC4wMjYtMS4yODMuMDM0LTEuOTk2LjAzNi00LjI1Ny4wNzctNS44MzIuODItLjk2Ni40NS0xLjgwMyAxLjE1NC0yLjQ0IDIuMDYtLjA4NS4xMTItLjE2OC4yMjYtLjI1NS4zNzNsLS4xNzguMzVjLS4wOTcuMTgzLS4xOS4zNy0uMjcuNTctLjM5NiAxLjAwNS0uNTc4IDIuMTY3LS41NCAzLjM4OHY1NS44MWMwIDIuNDYgMCA0Ljc4MiAxLjM0MiA2LjgyM2wuNi45MTYgMS4zMTUgMS4yNTMuMDA3IDUxLjc3NyAxLjU2My0uODE4Yy43NC0uMzkgMS40MzctLjUyIDIuMTU1LS40MDMgNS42NzguODQ4IDUuODQyIDEyLjAzNCA1Ljg0MiAxMy4zMDZWMTc4LjFjMCA1LjM3My0xLjA0NyA5LjE4NS0zLjE4MiAxMS42MzMtMS4yNCAxLjM1NC0yLjg3IDEuOTU0LTQuMTQ3IDEuNTQtLjEzNC0uMDQ2LS4zNC0uMTMyLS41Ny0uMjg0bC0xLjY2LTEuMTA1djQyLjE4N2MwIDI0LjcyIDE1LjA3IDMzLjQ5IDI3Ljk3NiAzMy40OWgyOC42NGM5LjgyNCAwIDIwLjc4IDEuMzYgMjcuNTYyIDExLjQ1LjYxLjkwNSAxLjE3NiAxLjg0OCAxLjY4MiAyLjhsLjk0IDEuNzcyLjk0NC0xLjc3Yy41MTItLjk2IDEuMDc4LTEuOTAzIDEuNjg1LTIuODA2IDYuNzgtMTAuMDg3IDE3LjczOC0xMS40NDcgMjcuNTYyLTExLjQ0N2gyOC42NGMxMi45MDQgMCAyNy45NzQtOC43NyAyNy45NzQtMzMuNDg4di00Mi4xODdsLTEuNjYgMS4xMDRjLS4yMzIuMTUtLjQ0LjIzNy0uNTcyLjI4Mi0xLjI0NS40MTMtMi45MDctLjE4Ny00LjA5Ni0xLjQ4NC0yLjE3Ni0yLjQ5LTMuMjMyLTYuMzE1LTMuMjMyLTExLjY4N3YtMzEuMjI3YzAtMS4yNzIuMTY0LTEyLjQ1OCA1Ljg3Ny0xMy4zMTIuNjktLjExIDEuMzgyLjAyIDIuMTIuNDA3bDEuNTYyLjgxN1Y4My4wMmwxLjMyLTEuMjYzLjYtLjkxNmMxLjM0LTIuMDQgMS4zNC00LjM2MyAxLjM0LTYuODJWMTguMjc1IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTE3OS44NjMgOC45MjdjLTIuNTM4LS44OTQtNS4yMjYtLjUxOC03LjgxNS0uOC05Ljg0My0xLjEyOC0xNi44MS02LjIxNC0yNy40MS01LjYwMy0xMS40NDMuNzAzLTIwLjUzIDcuNjc2LTMxLjM3IDguMDA4LTIuNTM3LjA4OC04Ljc5OC0uMzc2LTEwLjU5NS0yLjgyNy0uMDQzLS4wNTMtLjA5LS4xNC0uMTQtLjE5IDEuNzQ3LS4yMzggMy4xMDgtMS43NDQgMy4xMDgtMy41MzIgMC0zLjk5OC01LjkzMi00LjgwMy03Ljc2OC0xLjc4Ny0xLjA2NCAxLjcxNi0uOTIgMy45ODQtLjEyNSA1Ljk5M2guMDAzYy41OCAxLjQ3OCAxLjUxMiAyLjc3NyAyLjU3IDMuNjYgMi45NyAyLjM1IDcuODgzIDMuMTggMTEuNTkgMy4yNi41My4wMSAxLjAzMy4wMDcgMS41MDQtLjAxIDExLjExMy0uMzMyIDIwLjExMy03LjI2IDMxLjUwNi03Ljk2LjYyNC0uMDQgMS4yMzctLjA1NSAxLjg0LS4wNSA5LjAzNS4wNTQgMTUuNzYgNC41NDMgMjQuNjMyIDUuNjAzLjIzLjAyNi40ODQuMDQuNzYuMDU0IDEuOTMuMDg0IDQuODItLjA0NiA2LjMwNS42NTQuNTgyLjI3MyAxLjEzNi43MDQgMS41NzYgMS4zMy4wNi4wOC4xMjIuMTU1LjE3NS4yNDUuMDQuMDYyLjA2Ny4xNC4xLjIwNS4wNzMuMTM3LjE1LjI3Mi4yMS40MjcuMjcuNjg1LjQyMiAxLjU0LjM5IDIuNlY3NC4wMmMwIDIuMzA1IDAgNC4xNC0uOTkgNS42NDhoLS4wNTRjLS4wMTItLjQxNi0uMDY0LS44MjMtLjE1LTEuMjIzbC0uMDMtLjEzM2MtLjA4LS4zNDctLjE4Ny0uNjg0LS4zMi0xLjAxMy0uMDMtLjA3Ny0uMDU3LS4xNTItLjA5LS4yMjctLjEzNC0uMjk3LS4yOS0uNTg0LS40NjctLjg2LS4wNTItLjA4NC0uMDk1LS4xNy0uMTUtLjI0OC0uMjM3LS4zNC0uNDk4LS42Ny0uOC0uOTczLTIuNzE2LTIuNzA3LTcuMzEtMi44NTMtMTAuMjUtLjMxNi0yLjA3OCAxLjgxMy0yLjcyIDQuOTQzLTEuNDY3IDcuMTEyLjM5My42OTUuOTUyIDEuMjIgMS42MiAxLjUzNS0uNzM1LjMxNC0xLjUzLjYwNi0yLjM3Mi44NzMtMy4yMiAxLjAwNS02Ljk4IDEuNTY0LTEwLjg3MiAxLjYxNy01LjMwNC4wNTItMTAuOTItMS4xOC0xNi43MDgtMy42MjYtNS42Ni0yLjM4Mi0xMC42NzMtNS41MDYtMTQuNS05LjA0bC0uNDI0LS4zODdjLTEuMDItLjk0LTIuMDc4LTEuOTE2LTMuMjk0LTIuNzYtMS4zMy0uODcyLTIuNjgtMS4zMjMtNC4xMjYtMS4zNzUtMi4xMDItLjA4OC00LjAxLjcyMi01LjM3IDIuMTdINzUuODU4Yy0xLjM2LTEuNDQ4LTMuMjY3LTIuMjU4LTUuMzY4LTIuMTctMS40NDUuMDUyLTIuNzk2LjUwMy00LjEyNiAxLjM3Ni0xLjIxOC44NDQtMi4yNzQgMS44Mi0zLjI5NiAyLjc2bC0uNDIyLjM4OGMtMy44MjggMy41MzMtOC44NCA2LjY1Ny0xNC41IDkuMDQtNS43OSAyLjQ0NS0xMS40MDUgMy42NzctMTYuNzEgMy42MjUtMy44OS0uMDUzLTcuNjUyLS42MTItMTAuODctMS42MTctLjg0My0uMjY3LTEuNjM3LS41Ni0yLjM3NC0uODczLjY2OC0uMzE2IDEuMjI2LS44NCAxLjYyLTEuNTM1IDEuMjUtMi4xNy42MS01LjMtMS40NjYtNy4xMTItMi45NC0yLjUzNy03LjUzNi0yLjM5LTEwLjI1LjMxNi0uMzAyLjMwNC0uNTY1LjYzMi0uOC45NzMtLjA1NS4wOC0uMS4xNjQtLjE1LjI0OC0uMTc2LjI3Ni0uMzM1LjU2My0uNDY3Ljg2LS4wMzQuMDc1LS4wNjIuMTUtLjA5LjIyNi0uMTM1LjMyOC0uMjQuNjY1LS4zMjIgMS4wMTJsLS4wMy4xMzNjLS4wODUuNC0uMTM2LjgwNy0uMTUgMS4yMjNoLS4wNTNjLS45OS0xLjUwNy0uOTktMy4zNDMtLjk5LTUuNjVWMTguMjFjLS4wMzItMS4wNi4xMi0xLjkxNi4zOS0yLjYuMDYyLS4xNTYuMTM2LS4yOS4yMDgtLjQyOC4wMzUtLjA2NS4wNjMtLjE0My4xMDItLjIwNS4wNTMtLjA5LjExNi0uMTY0LjE3NC0uMjQ2LjQzOC0uNjI2Ljk5NC0xLjA1NyAxLjU3NS0xLjMzIDEuNDg1LS43IDQuMzc3LS41NyA2LjMwNi0uNjUzLjI3Ny0uMDE0LjUzMy0uMDI4Ljc2Mi0uMDU0IDguODcyLTEuMDYgMTUuNTk3LTUuNTUgMjQuNjMtNS42MDQuNjA0LS4wMDUgMS4yMTYuMDEgMS44NC4wNSAxMS4zOTUuNyAyMC4zOTMgNy42MjggMzEuNTA1IDcuOTYuNDcuMDE3Ljk3Ny4wMiAxLjUwNy4wMSAzLjcwNi0uMDggOC42Mi0uOTEgMTEuNTg3LTMuMjYgMS4wNjItLjg4MyAxLjk5My0yLjE4MiAyLjU3My0zLjY2aC4wMDNjLjc5Ny0yLjAxLjkzNy00LjI3OC0uMTI1LTUuOTk0LTEuODM3LTMuMDE2LTcuNzctMi4yMS03Ljc3IDEuNzg3IDAgMS43ODggMS4zNjQgMy4yOTQgMy4xMSAzLjUzMy0uMDUuMDUtLjA5Ny4xMzYtLjE0LjE5LTEuNzk3IDIuNDUtOC4wNTggMi45MTQtMTAuNTk1IDIuODI2LTEwLjg0LS4zMzItMTkuOTI3LTcuMzA1LTMxLjM3LTguMDA4LTEwLjYtLjYxLTE3LjU2OCA0LjQ3NS0yNy40MSA1LjYwNC0yLjU5LjI4LTUuMjc3LS4wOTUtNy44MTYuOC0yLjgzLjk4NC01Ljg0NyAzLjQ0LTUuNjYyIDkuNDJ2NTUuNjdjMCA0LjkuNzYgOC41NzQgNC45OTggMTEuMzAydjUxLjUyYzEuNDYtMS40NiAyLjgyNi0yLjc4IDQuMzMzLTIuNTM3IDQuMzc2LjY1MyA1LjIyNyA5LjA4NiA1LjIyNyAxMi41N1YxNzguMWMwIDMuNzItLjQ3IDguMjQ1LTMuMDE2IDExLjE2My0xLjYgMS43NDQtNC4zNzcgMi4yNi00LjcxLS44OTMuNTczLjY1OCAxLjUxNC42NTggMi4zMS4zMjYgMi40NS0xLjEyNiAyLjcyOC01LjUwOC0uNjYtNS41NTctMi41NDMtLjA1LTMuNDg0IDIuNjM4LTMuNDg0IDQuNzF2NDQuMjIzYzAgMTcuNzU2IDkuMTg1IDM0LjIzOCAyOC43MjMgMzQuMjM4aDI4LjY0YzExLjc2OCAwIDIwLjk1NyAyLjIxNyAyNi45NCAxMS4xMTcgMS4yNjggMS44OCAyLjU0IDQuMjQgMy4yNDcgNi40MDguNzA1LTIuMTY3IDEuOTgtNC41MjggMy4yNDctNi40MDggNS45OC04LjkgMTUuMTctMTEuMTE2IDI2Ljk0LTExLjExNmgyOC42NGMxOS41NCAwIDI4LjcyNC0xNi40OCAyOC43MjQtMzQuMjM3VjE4Ny44NWMwLTIuMDcyLS45NDMtNC43Ni0zLjQ4Ny00LjcxLTMuMzg3LjA0OC0zLjEwOCA0LjQzLS42NTcgNS41NTYuNzk3LjMzMiAxLjczOC4zMzIgMi4zMS0uMzI2LS4zMzIgMy4xNTMtMy4xMSAyLjYzNy00LjcxMi44OTMtMi41NDUtMi45MTgtMy4wMTMtNy40NDMtMy4wMTMtMTEuMTYydi0zMS4yMjdjMC0zLjQ4NC44NDgtMTEuOTE3IDUuMjI4LTEyLjU3IDEuNTA1LS4yNDQgMi44NzMgMS4wNzggNC4zMzMgMi41MzdWODUuMzJjNC4yMzUtMi43MjggNC45OTctNi40MDMgNC45OTctMTEuM1YxOC4zNWMuMTgzLTUuOTgzLTIuODMtOC40MzgtNS42NjItOS40MjMiIGZpbGw9IiNmY2JkMDAiLz48cGF0aCBkPSJNNy4yMzQgODQuMDI1Yy4zNjMuNTk1LjgwNiAxLjE1MiAxLjMyNyAxLjY4IDIuMzM3IDIuMzI2IDUuNjQ2IDQuMTU1IDkuODQ4IDUuNDQ3IDMuODMyIDEuMjMzIDguMzIgMS45MTMgMTIuOTQ2IDEuOTYuMDkzLjAwMy4xODYuMDAzLjI3Ni4wMDMgNi4xNiAwIDEyLjY1Ny0xLjQwOCAxOS4zMy00LjE5IDUuOTctMi40OTcgMTEuMTQ2LTUuNjUgMTUuNDA4LTkuMzguMDkzLjkxLjUyMyAxLjc1IDEuMjYzIDIuMzkyIDEuODg4IDEuNjU1IDUuMDkgMS42NDcgNy4yODMtLjAyNSAxLjMxNi0xLjAyIDIuMjA0LTIuNDMgMi42My0zLjk2N2gzMC44NjZjLjQyNiAxLjUzNiAxLjMxNCAyLjk0NiAyLjYzIDMuOTY3IDIuMTkzIDEuNjcyIDUuMzk1IDEuNjggNy4yOC4wMjUuNzQ0LS42NDIgMS4xNy0xLjQ4IDEuMjY2LTIuMzkzIDQuMjYgMy43MzIgOS40MzYgNi44ODQgMTUuNDA3IDkuMzggNi42NzQgMi43ODMgMTMuMTcgNC4xOSAxOS4zMyA0LjE5aC4yNzZjNC42MjgtLjA1IDkuMTEzLS43MyAxMi45NDUtMS45NjIgNC4yMDItMS4yOTIgNy41MS0zLjEyIDkuODQ3LTUuNDQ3LjUxNy0uNTI0Ljk1Ny0xLjA3NyAxLjMyLTEuNjY1djQ4Ljk4Yy0uODQ0LS40NC0xLjc2Ny0uNjgtMi43ODgtLjUxMi02LjQ0Ny45NjMtNi43NzIgMTIuMTM1LTYuNzcyIDE0LjM2NHYzMS4yM2MwIDUuNjQyIDEuMTMyIDkuNjgzIDMuNDkzIDEyLjM4NyAxLjUwOCAxLjY0MyAzLjU3IDIuMzUgNS4yNCAxLjc5NS4yMDctLjA3LjUwNi0uMTk2LjgyNi0uNDF2NDAuMTk4YzAgMjMuOTMyLTE0LjQ5NCAzMi40MjItMjYuOTA3IDMyLjQyMmgtMjguNjRjLTEwLjEwNSAwLTIxLjM4NyAxLjQxNi0yOC40NDUgMTEuOTE4LS42MzIuOTQtMS4yMiAxLjkyLTEuNzQgMi44OTgtLjUyLS45NzctMS4xMS0xLjk1Ny0xLjc0LTIuODk1LTcuMDYtMTAuNTA0LTE4LjM0Mi0xMS45Mi0yOC40NS0xMS45MkgzNC4xNTJjLTEyLjQxMyAwLTI2LjkwOC04LjQ5LTI2LjkwOC0zMi40MjJ2LTQwLjE5N2MuMzIuMjEzLjYxOC4zNC44MjcuNDEgMS42NjMuNTQ2IDMuNzI3LS4xNSA1LjI3LTEuODMgMi4zMy0yLjY3IDMuNDYyLTYuNzEyIDMuNDYyLTEyLjM1NXYtMzEuMjI4YzAtMi4yMy0uMzI2LTEzLjQtNi43NTMtMTQuMzYtMS4wMzItLjE2OC0xLjk2LjA2OC0yLjgwOC41MWwtLjAwOC00OC45OTciIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTcyLjk5MiA3OC4zYzEuODg0LjQyOCAxLjYgMi40NTMuNTIzIDMuNTM2LTEuNzk2IDEuNzM3LTQuNDc4IDMuMTEtNy41ODcgNC4wOTMtMy40ODMgMS4wOS03LjQ4NCAxLjY0NS0xMS40IDEuNjk4LTUuOTc2LjA0NS0xMS45Ni0xLjQ2LTE3LjQyNC0zLjc2Ny01LjM3LTIuMjYtMTAuNjktNS4zNy0xNS4wMjMtOS4zNzMtMS4xMy0xLjAzNS0yLjI1Ny0yLjExNC0zLjQ4OC0yLjk2Ny0uOTM2LS42MTYtMS45NzUtMS4wMzUtMy4yLTEuMDgtMi40NS0uMDk2LTQuMTkzIDEuMzItNC45OTMgMy4xMDQtMS4wODYgMi40MDctLjMyNyA1LjMyIDEuNzQyIDYuOTI0IDEuNjA0IDEuMjI3IDMuODYgMS4wOSA0Ljk5Mi4wOTYgMi4wNy0xLjc5LTEuMTc2LTUuNDYzLTMuNTgzLTQuNjYzIDAtLjk0LjY2Ni0xLjgzMiAxLjctMS43OSAxLjA4Ny4wNSAzLjAxNiAxLjc0MyA0LjU3MyAzLjIwMyA0LjU2OCA0LjI0NCAxMC4xMjYgNy41MzUgMTUuODcgOS45MzYgNS44ODYgMi40NTMgMTIuMzg2IDQuMDk0IDE4Ljg4NiA0LjA1IDQuMjMzLS4wNDUgOC42MTMtLjY1NSAxMi40MzMtMS44ODQgMy42Ny0xLjEyOCA2Ljg3Mi0yLjc4MyA5LjA4Ni00Ljk4OC41MTctLjUyNC45ODUtMS4xMzMgMS4zMTctMS43OTMgMS4wNDItMi4xNjcuODk4LTQuNjEyLS44NDItNi4zNTYtMi4xNzItMi4xNy01Ljc1LTEuOTg0LTcuNzc1LS4yMzYtMS41MDMgMS4zMTItMS44NCAzLjUzLTEuMDggNC44NS45ODcgMS43NCAzLjI5Ni44IDQuMzczLS4zMy41NjctLjUxNSAxLjA4NC0xLjI3LjktMi4yNjVNMTA4Ljc0MiA3Mi44Yy4wMy0uMDY4LjA3LS4xMjUuMTAyLS4xOUg3Ny4xMDhjLjAzMi4wNjUuMDcyLjEyMi4xLjE5LjQ4IDEuMDYzLjY2NyAyLjIwMy42MjUgMy4zM2gzMC4yODZjLS4wNDMtMS4xMjcuMTQ0LTIuMjY3LjYyMi0zLjMzTTEyLjk2IDc4LjNjLTEuODg0LjQyOC0xLjYgMi40NTMtLjUyIDMuNTM2IDEuNzk0IDEuNzM3IDQuNDc1IDMuMTEgNy41ODQgNC4wOTMgMy40ODMgMS4wOSA3LjQ4NiAxLjY0NSAxMS40IDEuNjk4IDUuOTc4LjA0NSAxMS45Ni0xLjQ2IDE3LjQyNS0zLjc2NyA1LjM2OC0yLjI2IDEwLjY4Ny01LjM3IDE1LjAyMi05LjM3MyAxLjEzLTEuMDM1IDIuMjU4LTIuMTE0IDMuNDg4LTIuOTY3LjkzNy0uNjE2IDEuOTc2LTEuMDM1IDMuMjAyLTEuMDggMi40NS0uMDk2IDQuMTkyIDEuMzIgNC45OSAzLjEwNCAxLjA4NSAyLjQwNy4zMjggNS4zMi0xLjc0IDYuOTI0LTEuNjA1IDEuMjI3LTMuODYgMS4wOS00Ljk5My4wOTYtMi4wNy0xLjc5IDEuMTc1LTUuNDYzIDMuNTgyLTQuNjYzIDAtLjk0LS42NjUtMS44MzItMS43LTEuNzktMS4wODUuMDUtMy4wMTUgMS43NDMtNC41NzIgMy4yMDMtNC41NjcgNC4yNDQtMTAuMTI1IDcuNTM1LTE1Ljg3IDkuOTM2LTUuODg1IDIuNDUzLTEyLjM4NSA0LjA5NC0xOC44ODUgNC4wNS00LjIzOC0uMDQ1LTguNjE1LS42NTUtMTIuNDM1LTEuODg0LTMuNjcyLTEuMTI4LTYuODcyLTIuNzgzLTkuMDg4LTQuOTg4LS41MTctLjUyNC0uOTg1LTEuMTMzLTEuMzE3LTEuNzkzLTEuMDQtMi4xNjctLjktNC42MTIuODQ0LTYuMzU2IDIuMTctMi4xNyA1Ljc0OC0xLjk4NCA3Ljc3NC0uMjM2IDEuNTAyIDEuMzEyIDEuODM4IDMuNTMgMS4wNzggNC44NS0uOTg3IDEuNzQtMy4yOTUuOC00LjM3My0uMzMtLjU2OC0uNTE1LTEuMDg0LTEuMjctLjktMi4yNjUiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTQxLjM2IDE5MC4wNmMuMzEuOTYuNTMyIDEuNzUuNjcgMi40ODQtLjM4NS0uNTEyLS43NjYtMS4wMjUtMS4xMy0xLjU0LTEuODctMi42ODUtMi43MzUtNC45NC0yLjYzNi02LjgzOC4xNDUtLjEzNy4yOTUtLjI3NC40NDMtLjQxMyAxLjAzNCAyLjA3NCAyLjAwNSA0LjE4MiAyLjY1MyA2LjMwNm0tNi4yODMgMTcuNTljLTIuMDk0IDAtMy44ODQtLjUxLTQuODUyLTEuMzczLS41MzMtMy4zNTYtMS43MS02LjM2Ni0zLjY3My05LjQ0NC45OC0xLjI4IDEuOTQzLTIuNDcgMi44OS0zLjU0IDEuMzItMS40OTMgMi40NTMtMi43MzIgMy40OS0zLjgzMi45MjcgMi41IDIuMjcgNC41OSAzLjQ2IDYuNDFsLjEuMTVjMS41NzcgMi4zNDggMi45NDMgNC4zOCAyLjk0MyA2LjUyNSAwIDIuNDc1LTEuNTI4IDUuMTA2LTQuMzU4IDUuMTA2bS0xNS4xNjYtODkuMTNjLjcyLS44IDEuMzYyLTEuNTIgMS45Ny0yLjIgMS43NCAyLjA0NCAzLjQ1NiA0LjA2NSA1LjEyOCA2LjA0LTEuNjUyIDEuMzctMy4zMTggMi42NTMtNC45IDMuODU2bC0xLjU4NSAxLjIwNyA1LjA4MyA1LjUyNGMtLjAzLjA5NC0uMDYuMTkyLS4wODQuMjczbC0uNjczIDEuNzJjLS41NDggMS40LTEuMDg4IDIuNzgtMS42MTIgNC4yMDMtLjcyNi43MTItMS40NjUgMS41NzMtMi4yNCAyLjQ4MmwtLjg4MyAxLjAyM2MtMi4zNyAyLjg1LTQuOTcgNS44NC04LjM1IDguNTguMDItLjg0My0uMDI1LTEuNjctLjE3OC0yLjM1NWwtLjA0LS4xMDguMzM0LTEuMDI0Yy41NzYtMS43NC4zMy0zLjcyNC0uNS01LjQ5N2wuMjUzLS4zOTRjMS4yLTEuODYuOTc3LTQuMDIzLS41LTYuMDQ3bC4xODMtLjQxNWMuNzYtMS43MzIuNy0zLjUyNy0uMTc0LTUuMTktLjA0OC0uMDktLjExNi0uMTc4LS4xNy0uMjdsLjE2Mi0uOTQ4Yy4wOS0uNTQzLjEyMy0xLjAzNi4xMjYtMS41MDUgNC4zOTgtNC40OCA3LjYzNi03LjgyIDguNjUtOC45NTVtLTgxLjYyMyAyOS4wNjNsLS4wMzUuMDM3Yy0uMDA0LS4wNDUtLjAxNi0uMDg4LS4wMi0uMTMyLjAxNy4wMzIuMDM1LjA2NC4wNTUuMDk1TTg3LjY4IDEwMS42OHYuNjY4Yy0xLjc5IDEuMTEzLTMuNTA1IDIuMy00Ljk2NSAzLjY4N2wtLjQwNy0uMjk0Yy0uMjQ1LS4xNzYtLjU2LS4zMDgtLjkwMi0uMzk3LjY2Ny0yLjgyMyAyLjU2Ni0zLjk1NCA2LjI3NC0zLjY2Mm04MS40MiA1NS44OTJoLjAxM2wuMDM4LS4wNzZ2LTEwLjYyNGMwLTIuMjMuMzI3LTEzLjQgNi43NzUtMTQuMzY0IDEuMDItLjE2NyAxLjk0My4wNzIgMi43ODYuNTEyVjkzLjExNWMtLjAwNy4wMTMtLjAzLjEwNS0uMDMuMTA1LTUuMDgzIDcuNC04LjY5NyAxMi42NjMtMTMuNDk1IDE5LjAyLTQuNDE0IDUuNzY4LTYuMzkyIDguNzk2LTE2LjM2NCAxOC45OS4yNzMtMS4wNDIuMDc1LTEuODY1LS4xOS0yLjQyMi0uNjItMS4zMDQtMS44OS0xLjg3LTIuNjMtMi4xLjExLTEuMTYtLjA4Ny0yLjE0My0uNjI1LTIuOTA0LS40MDYtLjU3NS0xLjIwMi0xLjMwNy0yLjY4Ni0xLjUyM2wtLjA3LS4wMDdjLS4zNTUtMS4yNzctLjk3NS0yLjA1NC0xLjY3LTIuNDc4LjEwNS0uMDgyLjIxMy0uMTY2LjMxNS0uMjQ4bDEuNzc4LTEuNDA4LTUuNjE4LTYuMjY1LTEuMzMyIDEuNzJjLTEuMDQ4IDEuMzUzLTIuMTU2IDIuNjMtMy4zMDcgMy44MThsLTYuMDIyLTYuNTczLjAyOC0uMDMzYzQuMjQyLTQuOTg3IDUuMjUyLTYuODM0IDcuMTM1LTEwLjA3OCAxLjM2Ni0yLjM1OCAyLjk5OC01LjMzIDYuMTUyLTkuOTQgMCAwLTIuOTc2LS45ODYtNS4wODctMS44NjYtNS45Ny0yLjQ5Ni0xMS4xNDctNS42NDgtMTUuNDA3LTkuMzgtLjA5NS45MTItLjUyMyAxLjc1LTEuMjY2IDIuMzkzLTEuODg1IDEuNjU1LTUuMDg3IDEuNjQ4LTcuMjgtLjAyNS0uOC0uNjItMS40Mi0xLjM5Mi0xLjg5NS0yLjI0LjA4Ni4xOC4xMzUuMzE1LjExLjM1LS42MS44OTgtMS4xOTQgMS43OTgtMi4wODMgMy4xNy0uNzU3IDEuMTI3LTEuNjY0IDIuNTEyLTIuNTU3IDMuODI4di4wMDNjLTEuMjgyLTEuMjY2LTIuMzkyLTIuMzA3LTMuMzk0LTMuMTc0LTIuMzgtMi4yMzMtNi4zMDItMy4zODUtNi4zMDItMy4zODVzLjYyMyA0LjA3NiAyLjY0NyA2LjcwMmMuOTkgMS40MDQgMi4xNSAyLjkxIDMuNjE2IDQuNzI1LS44OTYgMS4wOC0xLjk4MyAyLjI5LTMuMyAzLjU5Ny0uNjM3LjYzLTEuMzQzIDEuMjItMi4wOTYgMS43ODUtLjg0OC0uMTM4LTEuNzgtLjIyOC0yLjgzNi0uMjc0aC0uMDEzYy4xMTctLjMyNC4xOS0uNjcuMTktMS4wMzcgMC0uODYtLjMzLTEuNjg0LS44Ny0yLjIyLS4wMzQtLjAzOC0uMDgtLjA2Ni0uMTE0LS4xMDMuNTkyLS4yOTYgMS4wMi0uODk2IDEuMDItMS41ODUgMC0uOTAzLS42OS0xLjY0OC0xLjU0NC0xLjc4LjA3Ni0uMjA2LjEyNy0uNDI4LjEyNy0uNjcgMC0uNDEzLS4xNC0uNzktLjQyMi0xLjE1N2wtLjE1NS0uMTU1Yy0uMzUzLS4yNzQtLjc4LS40MjgtMS4yMDQtLjQyOC0xLjAwMiAwLTEuNzg3Ljc2NC0xLjc4NyAxLjc0IDAgLjI0LjA1LjQ2Ni4xMy42NzUtLjg2OC4xNDctMS41NDMuODY4LTEuNTQzIDEuNzc1IDAgLjY5LjQzNiAxLjI5MyAxLjA0MyAxLjU4Ni0uNjE2LjU4OC0xLjAwNCAxLjQxLTEuMDA0IDIuMzIzIDAgLjM0NS4wOC42OTguMjA1IDEuMDM0aC0uMDU4Yy02LjM1Ni4zMzItOC43NjIgMS44NDItMTAuODMyIDguMDUyLTIuNDk4LTEuNjUtNC43MTQuNjE1LTUuMTg0IDIuNzc4IDIuNTkzLS43NTMgMy4wNjMuMzMgNC4wNTQgMi4xN2wuMTkuMzdjLjQ0OC45MjUgMS4xMTUgMi4yMTUgMi4wNSAyLjkxMy0uMjU1LjMtLjUxLjU5NS0uNzczLjg4LS4wOTMuMDg0LS4xNzcuMTU2LS4yNzUuMjQ0LTEuMDMyLjk1Mi0yLjMxNiAyLjEzNy0zLjI5NyAyLjUxNS0uMjk4LjEwMy0yLjI1LjYtMy41NDIuOTMtLjg2OC4yMi0xLjcuNDMtMi4yNS41OGwtMS4wODIuMjg2LjAzMyAxLjEyYy4wMzIgMS4xMTYuNDY3IDIuMSAxLjIyNyAyLjc4NGwtLjAxMy4wOTZjLS41NS41ODQtMS4wMyAxLjE2NC0xLjQxIDEuNzQ3LTUuODM3IDYuNDkzLTguODY3IDEwLjI4NC0xMy45NDMgMTcuNy0xLjc3My0uNDYtMy44MDQtLjU4NC00LjMyNS0uNTg0LS4xNSAwLS4yODguMDAzLS40MTcuMDEtMS41NDYuMDktMy4xMzcuNzAyLTUuMDU0IDEuNTkzLS42NzIuMzEyLTEuNDk3Ljc3OC0yLjA5OCAxLjExOC0uMjE2LjEyLS4zOTMuMjIzLS41MS4yODQtLjQ3Ny4yNTYtMS41MTYuODEtMS41MyAxLjkwNC0uMjMtLjU1My0uNTY0LTEuMDU1LTEuMDA0LTEuNDM2LS44MzMtLjc0NS0yLTEuMTItMy40NjctMS4xMi0yLjM2NSAwLTUuMDY2IDEuNzYtNi44NjUgNC40Ni0xLjcxOCAyLjQ5LTIuNjI3IDUuNjI4LTIuNjI3IDkuMDc4IDAgMy4xODMuMzE4IDcuOTg3IDIuNzA3IDE0LjEzbC0uMTcyLjIwM2MtMi41MTIgMi40MzMtNS45MTcgNS44My05LjgzIDkuNTU0bC0uMDQ1LjAzYy0uMzc0IDMuOTY0LTEuNDY4IDYuOTUtMy4zMiA5LjA3LTEuNTQgMS42NzgtMy42MDUgMi4zNzUtNS4yNyAxLjgyOC0uMjA4LS4wNy0uNTA3LS4xOTYtLjgyNS0uNDF2NDAuMTk4YzAgLjMxMi4wMTIuNjEuMDE3LjkxNi4xNC0yLjg4IDIyLjcyLTIwLjgzNyAzNy45MzMtMzUuMTdsLjIzMi0uMjcyLjE2Ny4xNyAxLjI3NSAxLjI1NCAxLjI3NC0xLjI1NmM4LjU4Ny04LjQ2IDE0LjQ1Ny0xNi4yOTUgMTcuOTUtMjMuOTYuMTY4LS4zNzQuMzAyLS43My40NTMtMS4wOTVsLjUzLS42MjUuMzctLjM2N2MuOTM4LjU3NiAxLjcxNyAxLjIwNSAyLjc5MyAyLjE4bC4xNDIuMTI1Yy0uNDQyIDEuNTgtLjExOCAzLjIyNi45MjIgNC4zMzIuNzIzLjcyIDEuNzI4LjgwNyAyLjg5NS45MDYuNTguMDUgMS4yMzcuMTA3IDEuNjczLjI1LjEwNC4wMy4yMDMuMDQ4LjMwNC4wNzJsLjk3NiAxLjA0Yy42ODUuNzI4IDEuMjggMS4zNyAxLjg2IDIuMDUgMS43MTMgMS44NzUgMi43MTcgMi45NSAzLjM1NiAzLjU5bC4xMDcuMDk3Yy42MDYuNTIgMS4yMjIgMS4wOSAxLjg3NCAxLjczIDIuMDk1IDIuMTA1IDQuMjMgNC4xMiA2Ljc1IDUuODgtLjMzNy40MTUtLjY3NS44MjMtMS4wMTUgMS4yMi00LjI2OCAxLjI3LTguNzkgMS45MDUtMTIuODAzIDIuMzUyLTUuMjY3LjU3NC0xMS4yOTggMS41OC0xNi4yMjQgNi4yODUtMy4wOTcgMi45OC00LjgzNSA2LjczNi01LjE2NSAxMS4xNjRsLS4xNzcgMi4zNzUgMi4zNC0uNDU4Yy4wNy0uMDEzLjE0My0uMDMuMjE0LS4wNS0uNTEgMy4wNTYtLjA3IDYuMTg3IDIuMDggOC42MDQtLjEyNi4xMi0uMjQ3LjIzLS4zNzYuMzUtMTAuNjU4IDkuODMyLTMzLjgxNiAzMC4zMjgtMzkuMjM1IDM1LjExMyA0LjIzIDIuNTE3IDguOTU3IDMuNjIyIDEzLjQxOCAzLjYyMmgyOC42NGMuNTg2IDAgMS4xNzcuMDA2IDEuNzcuMDE4IDEuODY4LTEuNyA3Ljc0LTcuMTE4IDEyLjg5Ni0xMS44ODQgMS4yOTItLjI5NCAyLjc0Ny0xLjEzIDMuNTQtMy4yNy4zODgtLjM2Ljc2LS43MDggMS4xMi0xLjA0LjQ1Ni4yOS45NDguNTU2IDEuNTMuNzY3bDEuNzMzLjYyOC42LTEuNzQzYy40MDgtMS4xOC41MTgtMi4zODQuNC0zLjU4OCAxLjIxNi0xLjA2IDUuNjQ1LTQuODM1IDE2LjE0LTE1LjU3My4wODgtLjA4Ny4xNzItLjE4My4yNi0uMjc1IDEuNDIzIDEuNjg0IDMuNDc0IDIuOTgyIDUuNzI4IDMuNDc3bDUuNDk3IDEuMjAzLS44MjYtLjkyYzEuMy4yOSAyLjY5OC4yMzIgNC40LjE1IDIuNzQzLS4xMzggNi4xNTItLjMwNiA3LjYzOCAxLjA0NC42My41OTIuOTk3IDEuMzUgMS4wODQgMi4yNDYuMDk3IDEuMDEyLjI4IDIuODk3LjA3IDQuMjYtLjMxIDEuNzA0LS45NSAxLjcwNC0xLjQyIDEuNzA0LTEuNiAwLTIuNDItLjYzLTMuNTYyLTEuNTE1LTEuNTc3LTEuMTk4LTQuMzgtMi40MjUtNy4wNzQtMS45MzgtLjU4LjEwNS0xLjEuMzEtMS41OTMuNTYtLjA5NS4wNDUtLjE4OC4wOTYtLjI4LjE0Ni0uMTI0LjA3Mi0uMjUuMTQyLS4zNjguMjI1LS40NjUuMzE0LS44OS43MS0xLjI1NSAxLjIyNi0zLjU3NC0uNDY0LTMuOTEgMS41Ni00LjA5NiAzLjI5Ni43MDgtLjY1MiAyLjM1Ni0xLjMxIDMuOTA1LS45ODQuMTkuMzkuMzg2LjczNy42IDEuMDEyLS42ODQuNTU0LTEuMjQ3IDEuMjktMS42MTYgMi4wOS0uMDUuMDgzLS4xMTYuMTY0LS4xNTcuMjQ2LTEuNTUyLjI4LTIuNDk0IDEuNzM2LTIuMzk3IDMuODU1Ljc1My0uNDY0IDIuMDctLjk0NCAzLjE1NC0xLjE3Mi4zNzYuMzI3Ljc1LjYxIDEuMzY2Ljg0MmwtLjAwNS0uMDE4YzEuMjM1LjU2NCAyLjQyNy41MzUgMi45MTUuNTE2LjE5LS4wMDMuMzgtLjAxMy41NjctLjAyN2wtLjIwNC4yOGMtLjAzMy4wMjMtLjA2LjA0Ny0uMDcyLjA1Ny0yLjA2Ny44NDQtMi45NyAyLjg2OC0xLjk4IDQuNzEuNDctMS4wNjcgMS4zLTIuMTMgMi41OC0yLjU3bC45MjMuMjcyYy4yOTguMDk0LjY1NS4yMDUgMS4wNy4yNjUuNzI4LjE2NiAxLjc0My4zNTYgMi42NC4zNTYgMS44MDIgMCAyLjkzLS4xOTggMy45Mi0uNjRsLS43NzUuODFjLTMuOTQzIDMuNzQ0LTkuMDUyIDkuNjczLTEyLjA3MyAxMi4wMTYgMy45OS0uODkzIDguMTIzLTEuMTIgMTIuMDgtMS4xMmgyOC42MzhjMTIuNDEzIDAgMjYuOTA4LTguNDkgMjYuOTA4LTMyLjQyM3YtNDAuMTk3Yy0uMzIuMjEzLTIuMDEzIDEuMjgtMi4wMTMgMS4yOC0uMDM4IDAtNi42MjggNC4wMS0xNC41NDIgMTIuNTM4LTcuOTE2IDguNTI2LTcuNDM0IDcuOTU3LTE0LjM0NiAxOC43Mi0xLjQ5MyAyLjMyNy0zLjQ5MyA1LjAwNy01LjcwNyA3Ljc4My0uMTc2LTEuNTU3LS40MDItMi42MzQtLjczNS0zLjUyNS0uNTM1LTEuNjA3LTEuNTMzLTIuNzYtMy4yMi0zLjY2LTEuNTM2LS44MjUtMy4xODUtMS4xOTUtNC44NS0xLjUyNC0yLjQ0NS0uNTA2LTMuNzUtLjgzMy00LjQwNS0yLjE5My0xLjExNi0yLjI5Ni0uNzEzLTQuNDIyLS4wNi03IDIuMzQ0LjY3OCA0LjU4NiAxLjE3NSA2Ljk5OCAxLjE3NSA5LjY4MiAwIDEzLjExNy04Ljg5NCAxMy4xMTctMTYuNTEgMC03LjMxNy0yLjk0LTEzLjctNS43MzgtMTkuMzczLjI4My0uMjY0LjU2Mi0uNTIyLjg2My0uODA0LjE5Mi0uMDE4LjM3NS0uMDM4LjU5LS4wNDJsLjIxNC4wMTZjNC44NDYtLjA5MiA0LjgwMyAzLjA2NCA0LjMzNCA2LjY0OC0uMzggMy4wNi0uNTY1IDYuNDA1LjQ3IDkuNDYgMS44NCA1LjQ2OCA2LjczNyA0LjA0OCA5LjkzIDcuNTg3LjQ3OC0xLjA0IDEuMDQ1LTIuMTE4Ljk5LTMuM2wxLjM3Mi4yODJjLS4xNDUtMS40MTMtLjA5Ny0zLjEwNy0uNTY3LTQuNDI0bC4zNzguMDVjLS4yOC0xLjg4NS0uNDc1LTMuNzctLjUxOC01LjY5OC0uMzI4LTYuODgyLS44LTguNzItNi4yMTgtMTEuNzgtLjY2LS4zNzItMS4yMi0uNzUtMS44NC0xLjMxNy0uODc2LS44MDItMi40MS0xLjg2LTMuNTQ2LTIuNTMyaC4wMTVjLS4wNjQtLjAzNC0uMTM2LS4wNTQtLjIwMi0uMDg3Ljc1NC0uNzIzIDEuNDgzLTEuNDA2IDIuMTk0LTIuMDYzLjkyNi43NiAxLjg5NiAxLjM2NyAyLjczMyAxLjg4NmwuMDM3LjAyYzIuMzk2IDEuNTAyIDIuNDk0IDEuNDEgMS42OTQgMy44MTUgMi42MzUtLjgwNiA0LjE5NC0xLjYwNCA0LjQ3LTQuOTk1bC43NTMuNDI0Yy4wOTgtMi4wNzUuMTUtMy44MTgtLjYxLTUuODM4bC45OS40MjQtLjQ1LTMuMDYtLjAxNC0uMDljLS4wMy0uMTktLjA2Ny0uMzctLjA5OC0uNTU3IDMuNzA4LTIuODE0IDYuMzMtNC41MSA3LjkzLTYuMDI3di0uMDFNMTAuMDUgMTMyLjUxYzIuOTcuNDQ1IDQuNjI3IDMuMDc1IDUuNTYgNS45OSAyLjE2LTIuOTg4IDMuNzg1LTUuNTQ1IDUuMzYtOC4xMzcgOC4xLTEzLjA5NCAxOC4yMS0yNC44MTIgMzAuODMzLTMzLjYyNiA0LjMzMy0zLjAxIDcuNDM1LTUuMDEzIDE0LjMyLTEyLjI5OC41NDgtLjU4IDEuMzgtMS41NTUgMS45NDYtMi4xMi4wNi4wMi4xMzUuMDUuMjA3LjA3NS0uMjI1LS4xMzgtLjQ0Ny0uMjgzLS42NDQtLjQ1OC0uNzQzLS42NC0xLjE3LTEuNDgtMS4yNjYtMi4zOTMtNC4yNiAzLjczMi05LjQzNyA2Ljg4NC0xNS40MDggOS4zOC02LjY3MyAyLjc4My0xMy4xNyA0LjE5Mi0xOS4zMyA0LjE5MmgtLjI3NmMtNC42MjgtLjA1LTkuMTEzLS43My0xMi45NDYtMS45NjUtNC4yMDItMS4yOS03LjUxMi0zLjExOC05Ljg0OC01LjQ0NS0uNTItLjUyOC0uOTYyLTEuMDg1LTEuMzI2LTEuNjc4bC4wMDggNDguOTk3Yy44NDctLjQ0MyAxLjc3OC0uNjggMi44MDctLjUxMyIgZmlsbD0iIzIzNGI5YSIvPjxwYXRoIGQ9Ik0zNS4wOTQgMTUxLjg3MmMtLjI0NyAwLS40MS0uMDM3LS40OTctLjA4My0uNDEyLS4yMTQtLjYyMi0uODA3LS40OTMtMS40NzUuNzUyLS4yMzYgMS40MTQtLjQyNCAxLjkzLTEuMDM1LjcwNi0uOC41Mi0yLjE3Mi0uMjg0LTIuODc1LS40MjMtLjM3NC0xLjEyOC0uNjYtMi4yNi0uNjYtMS41OTcgMC0zLjc2NyAxLjI3LTUuMzcgMy42NzYtMS4zNjMgMS45OC0yLjMwNiA0LjY1Ni0yLjMwNiA4LjA0OCAwIDMuOTYuNTIyIDkuMDQ0IDMuNDQgMTUuNTQ0IDIuOTE4IDYuNDEgOC4xOTQgMTQuMTMzIDE3LjYxMyAyMy40MSA5LjQxNy05LjI3NyAxNC42NDctMTcgMTcuNTY4LTIzLjQxIDIuOTItNi41IDMuNDM2LTExLjU4NCAzLjQzNi0xNS41NDQgMC0zLjM5Mi0uOTQtNi4wNy0yLjI2LTguMDQ3LTEuNjQ2LTIuNDA0LTMuNzY3LTMuNjc1LTUuNDEzLTMuNjc1LTEuMTMyIDAtMS44NC4yODYtMi4yNjUuNjYtLjgwMi43MDMtMS4zMyAyLjA3NS0uNjI0IDIuODc1LjU2Ni42MSAxLjkyOCAxLjAxNiAxLjkzMiAxLjAzNS4wODUuMzM4LS4wNzcuODctLjI2MyAxLjIxOC0uMTIyLjIyNC0uMjgyLjI1LS40NDMuMzA3LS4xMzIuMDItLjM1LjAyNi0uMzYuMDI2aC0uNjYzYy0uMjA4LjAwNC0uMDc0IDAtLjU1NS4wMDZoLS41Yy0uMzgtLjAwNi0uNzk0LS4wMjgtLjg1Ni0uMDAyIDAtLjAxOC4wMTctLjAyNy0uMjA1LjI2My0uNjYuODc0LTEuMjQ3IDIuNDY2LTEuMjQ3IDIuNDY2LS4wMTUuMDI3LTEuMTgyLS44NS0xLjk5LTEuNDg1LS41NjQtLjQ0NS0xLjg0My0uOTY0LTEuODQtLjk3LS4wMDguMDE4LS43My43NTYtMS4wNjQgMS4zOC0uMzc2LjQ2LS45MSAxLjk5NC0uOTI3IDEuOTk0LS4xMjQgMC0xLjExOC0xLjE3Ni0yLjA3NS0xLjg0My0uMjgtLjE5NC0yLjA4Mi0xLjM0Mi0xLjk3Ny0xLjYxNi0uMTcuNDQ0LS43MjMgMS41MzQtLjcyMyAxLjUzNC0uMjguNjUtLjM5MiAxLjIxLS41NyAyLjI4MmwtMi4xOTYtMS45M2MtLjk0LS40MzgtMS4xOC0uNjUtMS43MjgtMS4wOS0uOC0uNjQtMS0uOTctLjk5My0uOTg1bC0yLjk3LjAwMiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik04OS45NiAxMDQuMTA4Yy0xLjQ1OC40Ny0xLjI3IDEuNDEyLTEuMjcgMi41OTctMS4yNzMtLjYyLTIuNDUzLTEuMzItNC4wNS0uMTkuNDI1IDEuNzM3IDIuMzUzIDEuNjQ0IDMuNjI0IDEuMzY1LS4zNzYgMS45My0xLjg4MyAyLjYzNi0zLjUzIDIuODctMS42NS4yOC02LjMxMi4xNDItNi43ODMtMi4wMjUgMS40NjIuMDk4IDMuNDM2LS41NjYgMy43Ny0yLjE2Ni0uMzM0LS4yNC0uOTQ0LS4zODMtMS41NTYtLjMyOC0uNjYuMDQzLTEuMzE4LjI4My0xLjg4NC43OTYtLjMzLjM3Ni0uNTY2LjY2NC0uODQ2IDEuMDg4LS42MS0uNzEyLTEuMDM4LTEuNTEtMS43NDMtMi4xMjQtLjk5Mi0uODQ0LTIuNDA0LS41MTYtMy4xMS41MjMgMS44MzcuMDQ0IDIuNTkgMS42NDQgMy4zNDUgMy4wMS40MjcuODUgMS40NjMgMy4yNTUgMi42MzcgMy4yNTVoMjIuNzVjMS4yMiAwIDIuMjU0LTIuNDA1IDIuNjgzLTMuMjU1LjcwNC0xLjM2NiAxLjQ1Ni0yLjk2NiAzLjI5Ni0zLjAxLS43MDctMS4wNC0yLjA3LTEuMzY3LTMuMDYtLjUyMy0uNzA3LjYxNS0xLjEzIDEuNDEyLTEuNzg3IDIuMTI0LS4yODctLjQyNC0uNDcyLS43MTItLjg1Mi0xLjA4OC0uNTE3LS41MTMtMS4xNzItLjc1My0xLjgzMi0uNzk2LS42Ni0uMDU1LTEuMjI3LjA4OC0xLjYwNC4zMjcuMzMyIDEuNiAyLjM1MyAyLjI2MyAzLjgxNyAyLjE2NS0uNDY4IDIuMTY3LTUuMTM0IDIuMzA0LTYuODMgMi4wMjYtMS42LS4yMzQtMy4wNi0uOTQtMy40ODQtMi44NyAxLjMyLjI4IDMuMTU4LjM3MiAzLjU3Ny0xLjM2NS0xLjU5OC0xLjEzLTIuNzMtLjQzLTQgLjE5IDAtMS4xODUuMjM0LTIuMTI4LTEuMjc0LTIuNTk3IiBmaWxsPSIjZmNiZDAwIi8+PHBhdGggZD0iTTc2Ljk2MyAxMDUuODU1Yy4xODYuMTM3LjMzLjMyMi40Ny41NTcuMDQ0LS4wNDMuMDktLjA5Mi4xNC0uMTMyLjcwOC0uNzEgMS42NS0xLjA0IDIuNS0xLjA4OGguMzI2Yy45OS00LjM3NyA0LjUyMi00Ljg5NiA4LjI5LTQuNDJ2Mi42OGMuNDI2LS4yMzYuODkyLS4zOCAxLjI3LS4zOC40MjIgMCAuODUuMTQ0IDEuMjc0LjM4di0yLjY4YzMuNzE3LS40NzYgNy4yOTUuMDQzIDguMjQgNC40MmguMzI4Yy44OTUuMDQ4IDEuNzg4LjM3NyAyLjU0NSAxLjA4OC4wNS4wNC4wNS4wOS4wOTcuMTMyLjEzNy0uMjM1LjMyNy0uNDIuNDctLjYxLTIuMTY4LTYuMTItNC4wMDUtNy42MjctMTAuNTAzLTcuODEzLS41NjMuNzA3LTEuNDYgMS4xMjctMi40MDIgMS4xMjctLjk0MyAwLTEuODMzLS4zNzctMi40NS0xLjEyOC02LjU0Mi4xODUtOC40MjggMS42OTMtMTAuNTk1IDcuODY1IiBmaWxsPSIjZmNiZDAwIi8+PHBhdGggZD0iTTg3Ljc5NiA5NS45NjNjMCAuNTY2LjI4IDEuMTMuNjYyIDEuNTEuMzc1LjM3NS45NC42MSAxLjU1Mi42MSAxLjE3NyAwIDIuMTItLjk0MyAyLjEyLTIuMTIgMC0uNjE0LS4yNDItMS4xOC0uNjE2LTEuNTU2LS4zNzgtLjQyLS45NDMtLjY2LTEuNTA0LS42Ni0xLjIyOCAwLTIuMjE0Ljk5LTIuMjE0IDIuMjE2TTg5LjQ5IDkyLjA1NWMwLS41MjItLjQyNy0uOTQzLS44OTgtLjk0My0uNTE2IDAtLjk0LjQyLS45NC45NDMgMCAuNDY0LjQyNC44OTcuOTQuODk3LjQ3IDAgLjg5OC0uNDMzLjg5OC0uODk3TTg5LjA2MyA4OS42MDRjMCAuMjgzLjA5NS41Mi4yODUuNzEuMTQyLjE0LjMyNy4yMzMuNjEyLjIzMy41MTcgMCAuODktLjM3Ni44OS0uOTQzIDAtLjIzMy0uMDg4LS40MjMtLjIzMi0uNjEtLjE4Ny0uMTQ1LS40MjMtLjIzOC0uNjU4LS4yMzgtLjUyIDAtLjg5Ny4zOC0uODk3Ljg0OE05MS4zNyA5Mi45NDdjLjQ3MiAwIC44OTgtLjQyNC44OTgtLjg5MiAwLS41MjItLjQyNi0uOTQzLS44OTctLjk0My0uNTE0IDAtLjk0LjQyLS45NC45NDMgMCAuNDY4LjQyNi44OTIuOTQuODkyTTk4LjkxNCAxMzYuNjg1Yy4wMjggMy45MzggMS41NTUgNi41OCA0LjIxIDcuMjY3LjY0NS4xNTMgMS4yNy4yMDcgMS44NzIuMjYgMS4yNi4xMDUgMi40NTIuMjA1IDMuNzcgMS4xNy42MTIuNDEzIDEuMTUyLjk0MiAxLjczNyAxLjY5OC43MTItMi41Ny0uODQ0LTYuMzkzLTQuMTAyLTcuODMzLS4yODUtLjEyNC0uOTEtLjI2Ni0xLjg2LS40Mi0xLjcyNC0uMjk1LTQuMjktLjczOC01LjYyNi0yLjE0Mk05OS4xNTggMTMwLjk1NmMtLjIwNy45MDUtLjIzIDEuOTQtLjA1NiAyLjgwNS41MTMgMi41MjUgMi41MDUgMy4wMSA1LjcxMiAzLjU5Ni45NTQuMTU2IDEuNjcuMjg3IDIuMTkuNTMgMS42My42OCAyLjc2IDEuOTg1IDMuNDQgMy4wMSAxLjQ2NC0yLjQ4NS0xLjAyNy00Ljk1Mi0yLjE4Mi01LjkxLTEuMzQ3LTEuMjk3LTIuNzgtMi4wMi00LjgwNC0yLjQyNWwtLjA0LS4wMDdjLTEuNDQ1LS4yNzgtMy4wOC0uNTk0LTQuMjYtMS41OTdNOTguODIgMTI1LjExM2MtLjEzLjQ4Mi0uMTkgMS4wMjYtLjE5IDEuNy4xOTUgMi45NjQgMi44NTYgMy44NDYgNS4xNSA0LjI4MiAyLjIzLjQ0NiAzLjkzIDEuMzEyIDUuNTE3IDIuNzk3LjEzLjEzNi4yNS4yNjcuMzY3LjM5Ny4xMDcuMTE4LjIxMi4yMzQuMzI3LjM1LjUwNy0xLjI1Mi40NDItMi41NC0uMTg3LTMuNzM2LS45NjQtMS44MzUtMy4yNy0zLjM4NC01LjczMy0zLjg1Mi0xLjY0NS0uMzA3LTMuODgtLjcyLTUuMjUtMS45NE05OC43MDQgMTIwLjc3NWMtLjAyMi4yMTctLjAxNC40MzYuMDIzLjY1My4zMjIgMy4xMTMgMi43NzUgMy41OTcgNS42MTIgNC4xNTcgMi4zNy41NjggMy43MjMgMS4xMzQgNS4zMzMgMi45MzYuMjY0LTEuNzkyLS4wNi0zLjI1LS45NjItNC4zMzMtMS4wNC0xLjI1LTIuODQ4LTEuOTUyLTUuMDktMS45ODMtMS40MzQtLjA0NS0zLjA1LS4wOTMtNC45MTYtMS40MyIgZmlsbD0iI2ZjYmQwMCIvPjxwYXRoIGQ9Ik03NC44NDIgMTQ0LjgwNGMxLjM3LjY2IDIuOTIuNzA4IDQuMS0uMTkgMS43NCAxLjMxOCA0LjE0IDEuNjUgNS42NS4xOSAyLjE2MyAxLjkzIDUuNjA2IDEuNDEyIDYuNTktMi4zNTYtMS4zNiAxLjYtNC42NTYgMy4zNDMtOC4yODYtLjcwMy4xODcuNzk1LjQ3IDEuNTQ3Ljg0NyAyLjExNi0xLjgzNy41NjQtNC4zMy4yODUtNi43MzItMi40MDMuMTM4LjgwNC40NjggMS41MDguOTQzIDIuMTI0LTEuMDg2LjI4LTIuMzYuMTQtMy44NjItLjk5LS4xOS0uMTktLjE0My0uNTE4LS4xNDMtLjhsLjQtMi4yOS0uNC0xLjYyIDEuNzQtLjcwM2MuMTkyLS4zMzcuMzMzLS44OTguNjYyLTEuMTMyLjMzMi41NjYuNzUyIDEuMTMyIDEuNDEyIDEuMzYyaDIuMDI1Yy4yODUtLjcwOC42MTItMS4wODMgMS4yNzMtMS40MTUuMTkgMS4wODguODAyIDIuMDMgMS42NDYgMi42NCAxLjY1IDEuMjI0IDQuODA1IDEuMjI0IDYuMjItLjQyLjk4Ni0xLjEzMi43MDUtMy4zNDguMzMtNC43MS0uMjM3LS44LS42NjItMS41MTMtMS4yNzQtMi4wMy0uNzU2LS42MS0yLjAyMy0xLjQ1My0zLjE1NS0yLjAyNC0yLjU0NS0xLjE3Ni0zLjU3Ny4xOS02LjA3LjYxMy0xLjg0LjMzMy0zLjk2LjIzNi01LjU2Mi0uNDIzLS4wOTYgMC0uMjM2LS4wOTMtLjQyNy0uMTQtMS41NTItLjYxMi00Ljc1My0xLjg4NS00LjE4OC02LjA3MyAxLjAzNC0uMDk2IDEuNTEtLjQ3NyAxLjg4NC0xLjI3My0xLjY5My4yMzUtMi45NjYtLjcwNi0zLjAxNi0yLjM1NyAxLjYwMy0uNDI0IDUuNjA2LTEuNDEzIDUuOTM2LTEuNTU2IDEuNjk1LS42NTQgMy41NzctMi43MjggNC45OS0zLjkwNGgyMy42OWMuOTQ1LTEuMDg0IDEuNDYtMS4zNyAyLjU0Ni0xLjE3Ni43OTYuMDkyIDEuNi4zNyAyLjQ0Ni41NjItLjA1IDEuNTA3LTEuMjc0IDMuNzE3LTIuNzMgNS4wODgtMS42MDUgMS40Ni00LjYxNSAxLjMxMy02LjAyOC0uMzMyLTIuOTY3IDEuODg4LTcuMDIgMi4wMjUtMTAuMjY2LjY2LTEuMTMtLjUyLTIuMTY4LTEuMTc3LTIuNzgtMS45NzctLjA5Ni0uMTQzLS4zOC0uMjQtLjUyLS4xODctMi4wNy40Mi00LjMzMy41MTItNi40MDQuNTEyLS41MTQgMC0uNjEuODUtLjEzOC45OWwyLjgyNS45NDhjLS4xOSAxLjM2LjUxNiAyLjgyIDEuOTI4IDMuMzM4IDIuNTQ0Ljg5NSA1LjkzNi0uMDQ4IDguMTQ2LTEuMzE2LjE0NC0uMDkzLjI4NC0uMTkuMzMtLjM4IDEuODgzLjE5IDQuMTQzLS4xODcgNS45MzctLjk0My0uMDk1LjQ3NS0uMDk1Ljk0My0uMDUgMS40Mi4wOTQuNzA0LjI4NCAxLjM2My41NjUgMi4wMjUtLjQ3IDEuMDMtLjcwNyAyLjIwNy0uNjEgMy4zNC4wNDQuOTQyLjMzIDEuODgzLjg5NCAyLjY4My0uNTY1IDEuMTg3LS43MSAyLjg4LS40MjQgNC4xOTctLjcwNyA0LjQ2Ni4xODYgMTAuNzM4IDUuNTA4IDExLjYzIDEuNjUzLjI4OCAzLjE1Ni0uMDQ4IDQuNzEzIDEuMDg0Ljg5NC42NiAxLjYwMiAxLjU1IDIuMjU1IDIuNjgzLjMzNiAxLjUwNC4wNTQgNC4xLS4yNzggNS41MTMtLjEzNy41NjctLjA1IDEuMDguMTQzIDEuNTUyLjQyMy44OSAxLjMxNyAxLjQxMiAyLjMwMiAxLjQ1Ni0uNjA2IDMuNzIzLTYuMjE0IDMuNTM3LTcuNTc4LjI0LTEuMDM3LTIuNTUtLjg1LTcuMzktNC44MDUtNy44NjQgMi4zNTUuODkzIDIuODY3IDUuMjI3IDMuMjA1IDcuNTguMTg0IDEuMzYgMS4yMjMgMy4wMTUgMi4wNyAzLjUzMi0xLjE3NyA0LjE0NC03LjQ0IDIuNTkyLTguMDUyLS45ODUtLjQyMy0yLjY4OC43OTgtNy4zMDItMi45Ny04LjY2NyAyLjA3NCAxLjQ2MyAxLjQxOCA1Ljc0NCAxLjQxOCA4LjE5My0uMDUzIDEuNDYgMS4yMiA0LjI0IDIuOTE3IDQuNDc1LTMuNDg4IDIuMTItNy4zNDYuNjEtNy44NjctMy41OC0uMjg2LTIuNjg1Ljg0Ni03LjYyNS0yLjkxNy05LjA0NCAyLjExNiAxLjQ2NCAxLjM2NCA2LjE3MiAxLjM2NCA4LjUyNS0uMDQ2IDIuNDUuNDcgNC4xOSAxLjU1MyA1LjAzNS0zLjA2IDIuNDA3LTYuOTctLjc5NC02Ljk3LTQuNTE3LS4wNDgtMi42MzggMS41NTQtNy41MzgtMi4xMTgtOS4yMyAxLjk3OCAxLjY1Ljg5IDYuMjE3LjYxIDguNjYzLS4yMzMgMi41NDMuNDI2IDQuNDI3IDEuNjA0IDUuNDY3LS43NTcuMzc0LTEuNjUzLjQ3Mi0yLjU0NC40MjQtMy4wNjItLjMzLTUuNTU2LTIuNTk1LTUuNTU2LTUuODkgMC0yLjYzNSA0LjI0LTcuNzIuNjEtOS40NjMgMS45NzggMS42NS0xLjkzMiA2LjQwMy0yLjE3IDguODU4LS4yMzMgMi4yMDYuNDczIDMuODYgMS40NiA0Ljg5Ni0zLjQ4Mi42MS01LjkzMi0zLjk1My01LjkzMi02Ljg4IDAtNC40MjIgMS42OTgtNi4zMSAzLjItOC4wMDMuMTQ2LS4yMzYuMzMtLjQyMi40MjYtLjUyLjgwMi0uODk2IDEuMjI4LTEuNzg2IDEuNDEzLTIuNzMuMDk1LS40Ny4wOTUtLjk0Mi4wOTUtMS40MTMiIGZpbGw9IiNmY2JkMDAiLz48cGF0aCBkPSJNNzQuODkgMTM1Ljk5NmMuNTE2LS45NCAxLjA4LTEuMzE3IDIuMTE4LTEuNi4yODYuNjEuNTE3IDEuMjI0Ljk4NyAxLjY5M2guOTQyYzIuMjE2LTMuNDQgNi43ODQtMS4wMzUgOS4yMzMuODAzLjcwOC0yLjQ5OC0xLjM2Ny0zLjU4LTMuNDgzLTQuMTQyLTUuNTYtMS40NjMtOS41NjIgMS43MzgtMTQuNjk4IDEuNzg2LTEuOTMgMC0zLjQ4Mi0xLjQxNS0zLjM0Mi0zLjQzNS0xLjgzNy45NDMtMS4zNjYgMy4yNDcuMDQ2IDQuMzggMi41NDYgMS45OCA1LjUxIDEuMjY4IDguMTk1LjUxNk04OS45NiAxMjAuODMzYy0uNzUzLS4xNC0xLjU1My0uNDI4LTIuMzA2LS43NTYtMS4yMjUtLjUxOC0yLjMxLTEuMTgtMy4wNjItMi4wMjUtLjE0MiAwLS4zMjguMDQ4LS41Mi4wODguMzc4LjUyNy41MiAxLjE4NS41MiAxLjg0NCAwIC42NjMtLjE0MiAxLjIyNS0uNDI0IDEuNjQ1LS4wOTYuMTQ2LS4xNDMuMjM0LS4yMzcuMzMgMi4wNzYuMzMzIDQuMTQ1LS4xODQgNi4wMy0xLjEyN002Ny43MyAxNjkuNzE3YzEuMzY4Ljc1MyAyLjMxIDEuNTA0IDMuNzIzIDIuNzgyIDEuMzE4LTEuMTMyLjQ3LTEuOTM0LS4yMzctMy43NzMtLjU2NS0xLjUwNy0xLjEzMi0zLjE1NS0uOC00Ljg1LS4zNzYtLjM3Ni0uNzA4LS44LTEuMDM4LTEuMjctLjI4IDIuMTE4LS44MDIgNC40Ny0xLjY1IDcuMTEiIGZpbGw9IiNmY2JkMDAiLz48cGF0aCBkPSJNODAuNCAxNzcuMTU2YzAtLjI4IDAtLjYxLjA0NS0uOTg2LjI4NS0yLjQ1IDEuOTM0LTUuNTU0LS4wNDQtNy4yMSA0LjUyNSAyLjIxNy0uMjM1IDguMTk2IDIuODc1IDExLjY4My41MTcuNTY4IDEuMjIzLjk0MiAyLjAyNSAxLjE3OCAxLjgzMi40NzUgMy4zNC4xOTIgNS4wODMtLjE4NS0zLjU4My0zLjExLjk4OC0xMC41MDctMi4yMTMtMTIuNzY0IDUuMTggMS45NzUtLjI4IDguODA3IDQuMjg4IDExLjgyMiAxLjkyOCAxLjMyIDMuMzkgMS40NTcgNS4yMjYtLjE4OC0uOTQyLS42MS0yLjEyLTIuMzUyLTIuMTItNC4xLjA0NS0yLjQ1IDEuMzY4LTUuOTc3LS44LTcuNDQzIDMuNzY3IDEuNDEzIDEuODgzIDUuMjM0IDIuMzUzIDcuOTYuNDczIDEuODg0IDEuMzIyIDIuNDA3IDIuNDA0IDIuNjg1IDIuNDUuNzA3IDMuMi44NSA0Ljc5OC0xLjQ1My4xOTYtLjI5LjM4LS41NzIuNTIyLS43NTctMS4zMTctLjQyNS0yLjM1My0yLjkyNC0yLjM5Ny00LjI4OC0uMDQyLTIuMzA3IDEuNTUyLTUuMjc0LS42NjMtNi4xMjUgMy40NC40MjYgMS44ODQgMy4zNDcgMS45ODIgNS43MDMuMTQyIDIuOTE4IDIuNjM0IDQuNDIyIDUuNDEgMy40ODUuNTIzLS4xOTIgMS40MTgtLjQ3NCAxLjE4LTEuMjI1LS4xODgtLjc1LTEuMDgtMS42NDYtMS4zNjQtMi4yMS0uNTY2LTEuMjI2LS4yMzgtMS45MzUuMjgzLTMuMDE4LjQ3LTEuMDg0Ljk5Mi0yLjMxIDEuMTI4LTMuNDg4LjI4OC0xLjU1My0uNTE4LTIuNzMtLjgtNC4xNC0uNzUuMDUtMS42LjA1LTIuNTQyLS4wOTYtLjg0NSAzLjM0Ny0zLjk1NyA0LjE5LTYuODc2IDMuMjQ3LTIuMDcyIDEuNy01LjY1IDEuOTg0LTguMDUyIDEuMTc1LS44OTguODEtMi4wMjYgMS4xMzctMy4xNTggMS4xODUtMS4zMTYuMDkyLTIuNjg0LS4yODMtMy42Ny0uODA1LTEuMjc0Ljg0OC0yLjczNCAxLjA4OC00LjE5NC45NDItMS43NDItLjEzNy0zLjQ4Ny0uOTQyLTQuNDI0LTEuNzg2LS41Mi4xODUtMS4wNC4yOC0xLjU1Ny4yOC0uOTkgMC0yLjAyNi0uMzIzLTIuOTY3LS44OS4wOTYuOTQzLjQ3IDEuODg0LjgwMiAyLjc3My45NDMgMi42NCAxLjc5IDQuMDU1LS43NTYgNi4wOC0uMzMyLjg5Mi0uMzMyIDIuMDczLjM3NiAyLjgyNi40Ny40NjggMi41LjI3NiAzLjgxNi43IDEuNDE0LjQzMiAyLjYzNi4xNDMgNC4wMDUtLjU2NE0xMTIuMDQ4IDE1My4zM2MtLjA5Ny42MS0uMTkgMS4yMi0uMzI4IDEuNzg2LS4wOTYuODUuNTEzLjg5NSAxLjIyNy43NTIuNTE2LS4wODggMS4xNy0uNDY4IDEuNDEtLjcwMyAwIDMuMzQ0LS44NDUgNS42MDMtMy4wNjUgNi41LjE5IDEuNjk0IDEuMjczIDIuNTkyLjk0IDQuOC0uMjI4IDEuMzY4LS43NSAyLjc4LTEuMzE1IDQuMDEtLjggMS42OSAxLjIzIDMuMjkzIDEuNTU2IDQuNzUzLjQyNC0zLjI1IDIuMzA4LTUuNTU3IDQuMTQ3LTcuNzY4IDIuMTYyLTIuNjQgMi45Mi00LjI4NyAzLjg2Mi03LjQuNzAzLjk0MyAxLjMxNiAxLjY5MyAxLjc0IDIuNzggMS41NTMtMi45MiAyLjIxMy01Ljk3NiAyLjUtOS4wOSAxLjA3NyAxLjQ2NSAxLjY0NSAyLjM2MiAxLjk3MiA0LjE5MyAxLjQxNS0yLjY4IDEuOTgtNC42MTIgMi4xMjItNy41ODQuNzUyLjggMS4zMTcgMS4yNzIgMS42OTMgMi4zNi40My0uODk3LjgtMS43OTYgMS4wODctMi42OS42NTYtMS44ODcuOTg4LTMuNzcgMS4xNzQtNS43NDcgMS45MzMtLjg5NCAzLjgxNy0xLjc5IDUuNTYyLTMuMDEgMS4zMTctLjg5NCAyLjQ1LTEuOTM0IDMuMzg4LTMuMTU0LTEuNDE1LTEuMzcyLTQuODAzLTQuNzE1LTYuNjQzLTYuNS0uMjM0IDEuMjItLjk4NiAzLjEwMy0yLjExOCAzLjcxNi0uMzc1LjE4Ny0uNzA3LjM3Ny0xLjA4Mi0uMjgtLjM3My0uNzEgMC0uOS4zMjUtMS4wOS45NDYtLjUxMyAxLjQxNi0yLjU4NiAxLjQ2LTMuNzE4LjA1LS45NDMgMC0xLjk3Ni4xNDItMi44Ny4xNDItLjcxMy40MjMtMS41MS0uMjc4LTEuOTc3LTEuNTUzLTEuMDgzLTIuMzYuOTQzLTMuMzA0IDIuMDItLjY1NS44MDctMS41OTcgMS44NC0yLjI5OCA0LjI4Ny0uMjkuODUzLS41MjYgMS41NTctLjcxIDIuMTctLjgwNiAyLjA3NS0xLjYgNC4wNDctMi4zNTYgNi4xMjZsLS4yMzYuMzI2Yy0uOTQyLjg5Ny0xLjkyNyAyLjExOC0zLjExNCAzLjQ4LTIuMzk0IDIuODc4LTUuNDEgNi40MDctOS40NjIgOS41MiIgZmlsbD0iI2ZjYmQwMCIvPjxwYXRoIGQ9Ik0xMzIuNjc3IDEyMy41MTZjLjMzLS41NjQuNjYtLjk5MyAxLjA0LTEuMzE2Ljc5NS0uNzA4IDEuNzQyLS44OTcgMi43NzUtMS4wNC40Ny0uNjEgMS4wODQtMS4xNzUgMS43NDQtMS42LjcwNy0uNDczIDEuNDYtMS4wODQgMi4xNjctMS42NDVsLTIuODc1LTMuMjA3Yy0xLjQ2IDEuODg1LTMuMDYgMy42NzItNC44MDcgNS4zMi0zLjEwNi0zLjM4Ny02LjE2Ny02LjczMy05LjI3Ni0xMC4xMjUtMTMuMDQ1LTE0LjMxLTE5LjIxMy0yMS4wNS0yMy40MDctMjQuNjc1LS45ODYtLjg1LTEuOTI4LTEuNjA1LTMuMDE1LTIuMzEzLjYxNCAxLjEzMiAxLjMyMyAyLjE3MiAyLjAzIDMuMjA2IDIuNTg2IDMuNjc1IDYuNDk2IDguMjQ0IDE0LjE4IDE3LjI4MyA1LjQ1NyA2LjM2MiAxMC45MjQgMTIuNzcgMTYuMzM2IDE5LjE3Mi0yLjA3IDEuNzg4LTQuMTkyIDMuNDM2LTYuMzYgNS4wODZsMy4yMDIgMy40OGMuODA2LTIuNjggMS44ODQtMy44NTUgMi42MzctNC43NDggMS4xOC0xLjMyIDIuMjItMi44MyAzLjYzLTIuODc2TTEzNS42IDEyNC4xNzZjLS4wOTcuMzMyLS4xNC43MDctLjI0IDEuMDM1LjI4My43NTMuMTQzIDEuNjUgMCAyLjQwMi0uMDk3LjU2NS0uMTQgMS4wNC0uMTQgMS42MDcgMS4wODQgMS4wMyA3Ljc3MyA3LjU3NiA4LjQ4IDguMzMyLjA0NS4wNDQuMTg3LjA0NC4yOC0uMDUzLjQ3My0uNDY0Ljk5LS45ODcgMS41NTUtMS40MS4xMzgtLjA5NC0uMTg4LS41NjctLjYxNS0xLjA4NS0uOTQuMjktMS44ODMuNTY2LTIuODI1Ljk0My0uNjU4LTEuNTUzLS43NS0zLjM0NC0uNTE2LTUuMDM3LS43NTMuMzI3LTIuMzEuOC0zLjA2IDEuNDEtLjMzMy0xLjU5NS0uMjQtMi43NzYgMC00LjMyOC0uODUuNTEzLTEuNyAxLjA4NS0yLjQ1IDEuODM2LS41Mi0xLjgzNi0uNjEtMy43NjguMjgyLTUuNTA3IDAtLjA5NS0uMzgtLjA5NS0uNzUzLS4xNDRNMTQ1LjE1NiAxMjguMzY0Yy0uOS42NjQtMS45NzIgMS44ODQtMS45MjggMy4wMTYuMDUuODQ1LjcwNyAxLjU1NiAxLjUwMyAxLjc0LjY2LjEgMS41NTgtLjc1IDIuMDMtMS42IDEuNDEyLTIuNTktMS42MDQtMy4xNTYtMS42MDQtMy4xNTZNMTQ0LjEyNSAxMjcuMDk1Yy4zMjgtMS42NDQtLjA1My0yLjc3OC0xLjY5OC0zLjAxNi0xLjE4LjM3Ni0xLjk4MiAxLjkzNi0yLjI2MyAzLjEwOC0uMTg3LjY2LjE5MyAxLjA4OC42MSAxLjYgMS4xOCAxLjI3NSAzLjExMy0uMzggMy4zNS0xLjY5M00xNDAuODcgMTIyLjc2Yy0uOTM4LTMuMzktMy44Ni0uNTY0LTMuNDQgMS43OTIuMjQgMS4zNjcgMS4yNzQgMS44NCAyLjEyMy41NjcuNDc1LS43MSAxLjEzMi0xLjc0NSAxLjMxOC0yLjM2TTk3LjAyNSAyMTEuNjgzYzEuMTc2LTIuNDA3IDIuODc0LTQuNTcyIDQuMjM4LTYuNjktMS43NC00Ljk0NS00Ljc1NS03LjQ4OC03LjM0NS05LjIzNC01LjEzNiAyLjAzLTEwLjg4MyAyLjkyMy0xNi40NDMgMy41MzYtNS41NTUuNjA4LTEwLjgyNCAxLjY0NS0xNS4xNjIgNS43ODgtMi40NSAyLjM1Ni00LjI4NiA1LjU2My00LjYxNSA5Ljk5IDEuNjkzLS4zMyAzLjM0Ni0yLjI2MyA0LjQzLTMuNTg0LTIuMzEgNC4wMDctMy43MjQgOS45MzguMjMyIDEzLjM4My44MDQtMi4zNi0uMzc1LTQuODU0IDIuNTQ2LTYuNzM4LTEuMTMyIDIuNDk0LS45NCA1LjUwOC45NDMgNy41MzUgMi4zOTggMi41OSA2LjY4NyA0LjA0NSA4LjAwNCA3LjI5NS4yOC44MDUuNTE4IDEuNjk4LjU2NSAyLjU5NXYtLjA0N2MuMTg2IDIuOTE4IDAgNi45Mi0zLjg2MyA2LjkyLTMuNDg3IDAtMy4zMDItMS41MDQtNC45LTMuMjk0LTEuODgzLTIuMDc1LTQuNzUyLTIuNjQzLTcuNTM1LTEuODQuNjYgMS42OTIgMi43ODMgNC4wMDUgNC4zMzUgNC43NTYtMi4wMjMgMi42NC02LjAyOC0zLjc2LTkuNjU0LjE0MyAxLjc4OCAyLjY4NyA2LjI2MiAzLjM0IDkuMTM0IDMuMTU2LS4yOC44OTItMi40OTYgMS4zNjUtNC43NTYuOTQtMS42OTMtLjI4LTIuNTQ1LS41NjQtNC4wOTcuNzUyIDIuMjE0IDEuNzQ0IDUuMDQgMy4wNiA3Ljc3IDEuODQgMS43NDUtLjc1NiA0LjA1My0xLjM2NSA3LjQ0LS4zMzItMi42MzUuMTkyLTQuOTQyLjA5NS01LjMxNSAzLjA2IDIuOTE2LS4xODUgMTAuOTIzLS42NTYgMTMuMTgtLjY1NiAyLjU0NCAwIDMuMjk2LTEuOTMgMy41MzQtNC4wMDIuMDQ4LTEuNy0uMjgyLTMuNzItLjU2My01LjM3NCAxLjU5NyAyLjM2IDIuMjYgNC43NiA1LjEzNCA1Ljc5NiAxLjMxNy0zLjgxNS0xLjEzMy03LjMtMy44MTctOS43NSAxLjY5OC4zMyA0LjI4NyAxLjQ2NSA1LjIyOCAyLjExOC0uNzEtNC45OTItNS41MTMtNC45OTItNi4zNi04LjMzNiAxLjQ2Mi42NjQgNC4xOSAxLjc0MyA1LjIzIDMuMy4xOS0xLjU1Ny0uNTItNC4wNTYtMS42OTQtNS4xMzUtMS43ODgtMS42LTQuOTQ3LTIuNTQtNC45NDctNS40MTcgMC0zLjY3MyAxLjY5OC02Ljc3OCA1LjI3Ni05IDMuMTUzLTEuOTcgNy43NjctMy4yIDEzLjg0NS0zLjQ3N00xNTguNzE2IDE5OS4zNDNjLTEuMzYtMi45NjctNC4yMzYtMy4yOTgtMy45MDQtNi45MjcuNDc1IDIuMTY3IDMuMDYgNC4wNSA1LjA0IDQuOTkyLS4wOTYtMS4xNzUtLjU2OC0yLjExNi0xLjI3Mi0zLjA1Ny0xLjUwNS0xLjk4Mi0zLjMzNy0yLjk3LTIuNTg3LTguMTQ3LjE4NyAzLjE1MyAyLjY4MiA1LjkzIDMuNjI3IDYuODcyLjA5Mi0uMjMtLjE5Ni0zLjE1NC0uMTk2LTMuNjIyLS4yOC01Ljk4My0uMzI3LTcuNDktNS4yNy0xMC4yNjgtLjc1LS40MjUtMS40MTQtLjk0Mi0yLjEyMi0xLjU1Ni0xLjc4Ny0xLjU1NC0zLjQzNy0yLjczLTUuNjk1LTMuMTU0LTEuODg0LS4zMy0zLjU4Mi0uMjgyLTUuNDIyLjMyLjM4LjgxMy43NiAxLjY1NyAxLjE4NCAyLjUwNS44OTMtLjI4IDEuNzg3LS4zNzUgMi43MjctLjM3NSA2LjE3LS4wOTcgNi43ODUgMy45NTggNi4yMTcgOC43MS0uMzMgMi43OC0uNTY1IDUuODg4LjMzMiA4LjYxNyAxLjIyIDMuNjI4IDQuNDI0IDMuNjI4IDcuMzQgNS4wOSIgZmlsbD0iI2ZjYmQwMCIvPjxwYXRoIGQ9Ik0xMTAuMjE0IDIyOC42MzJjLTEuMTMzLTEuMjItMS43NDgtMy4xMDUtMS40NjQtNi4xMTUtMS41MDQgMS44MzUtMi4zMDUgNC45ODcuMTQ2IDcuNzItNC41MjUtLjk5LTguODU0LTYuMzE0LTQuNDI3LTEwLjUwMi0yLjI2Ni4yODQtMy4zOTcgMi42ODQtNC4zODMgNC40MjUtMS44ODQtMy4wMS0uODk1LTcuMDYgMi42ODQtOC41MjQtMS44MzgtLjQ3NS00LjE0NCAxLjQxMy01LjAzNyAzLjE2LTEuMDg3LTQuNjY0IDIuMDctOC42MjMgNC41Ny0xMi4xMDcuNjEtLjg1IDIuMzAzLTQuMTkzIDEuMzYtNC45NS0uNDE4LjcxLS43OTggMS4yMjYtMS4wNzggMS41NTYtMS45OC00LjY2My00Ljg1Mi03LjM0Ny05LjMzLTEwLjA3Ni0yLjg3My0xLjc5My01LjIyNS00LjA1LTcuNjI2LTYuNDYtLjY2Mi0uNjU1LTEuMzE4LTEuMjY1LTEuOTgtMS44My0uNzA1LS43MS0xLjg4Mi0xLjk4Mi0zLjMtMy41MzQtLjU2My0uNjU1LTEuMTctMS4zMTgtMS44OC0yLjA3LjYxMi0uMDUgMS4yNzMtLjE0MyAxLjg4LS4zMy4zOCAxLjE4LjkwMiAyLjEyMyAxLjU1OCAyLjg3NC44Ljg0MyAxLjc0MyAxLjQxIDIuOTIgMS42OTYgMi40LjcwNSA0LjQyNCAwIDYuNDAzLS4yODYuODk4LS4xNDcgMS43NDQtLjE0NyAyLjY0LjA0OCAxLjQxMi40MyAyLjY4Ny44IDQuODk0LTEuMzIuNTcyLS41NjggMS4xODQtLjQyIDEuODQtLjI4IDIuNjQuNjYgMy43MTQtLjM4IDUuMjI4LTIuNTQ1LjIzOC0uMzc4LjQyMy0uNjYyLjU2NS0uODQ3IDEuMTMyLjE4NSAzLjExLS4zMjcgMy4zNDQtLjQ3MiAxLjYtLjUxNyAyLjM1Ni0xLjA4IDIuNjM1LTEuNjk0IDAgLjE4NS0uMDQzLjQyNS0uMDQzLjYxNCAwIDEuNzg4LjYxIDMuOTU3IDEuNTU2IDYuMDMyLjk5MiAyLjIwNyAyLjM1MiA0LjMzIDMuODYgNS45NzUgMi45MiAzLjI1IDUuMzcgNi4wNzUgNy4yMDUgOC45IDEuNzk0IDIuNzgzIDMuMDEzIDUuNjUzIDMuNTI2IDkuMTg3bC4yODguNTE3YzEuNTUgMS42IDQuMTk3IDIuMDcyIDYuMzEgMi4wNzIgMy44MTcgMCA2LjE3My0zLjM5IDYuMTczLTYuOTIgMC0yLjY5LTEuNTEtNC45NDctMy4yNTMtNy41NC0yLjAyNi0zLjEwMi00LjM3OC02LjYzNi00LjM3OC0xMS42MyAwLTEuNTYuMjMzLTIuODI0LjcwNS0zLjg2NC4zMjgtLjY1NS43MDgtMS4yMTggMS4yMjYtMS43NGwxLjYwNyAzLjU3N2MtMS44NCAzLjYyMy4wODggNy41OCAyLjI1NSAxMC42OSAxLjM2NSAxLjkzNyAyLjg3MyAzLjc2NyA0LjI4OCA1LjY1LjU2OC0zLjI5NC40MjUtNC45OS0uNjE1LTguMTkzLS45OS0zLjI0Ni0yLjY0LTYuMzY0LTQuMjQtOS40NjYtMi40OTMtNC44NTItNC45NDItOS42NTMtNC45NDItMTQuNTEgMC02LjE2NCAzLjg2Mi0xMS44MTcgMTAuNS0xMS44MTcgMy4yOTQgMCA4LjQ3OC4xOSAxMS4xMTggMi40OTMgMi42MzcgMi4yNjUgMy40NCA0LjkgMy45NTMgOC4yNDctLjUxNC0uMzc3LTQuMDQ1LTIuNzgyLTQuNDI2LTUuNDY2LS40NjggMi44Ny43NTMgMy44NjQgMS45OCA0LjkgMi4zNTQgMS45MjcgMi4xNjggMy4yNSAyLjI2IDYuMjYtMS43OS0yLjQ1LTUuMDg0LTMuMjk0LTUuNTU2LTYuOTY3LS44OTMgNS41MTQgNi44NzUgNi41OTMgNC40MjcgMTAuOTI2LS41NjgtLjgtMS41OTctMS40MS0yLjc4NC0yLjE2My0yLjM1Mi0xLjQ2My01LjUwOC0zLjM5Mi01LjUwOC03LjU4IDAtMy4wMTQtLjQyLTQuODk4LTEuMjY0LTYuMDgzLS45OS0xLjI3LTIuMzU2LTEuNjQzLTQuMjQtMS42NDMtNC45IDAtNy45MSA0LjUyMi03LjkxIDkuMDQgMCA0LjE5MyAyLjE2NiA4LjY2NCA0LjU2MiAxMy41NjggMi45MiA1Ljg4NSA2LjEyIDEyLjM4IDYuMTIgMTkuNzI2IDAgNy4wNzItMy4wNiAxNC42OTUtMTEuMyAxNC42OTUtMi44NjcgMC01LjU1Ni0uNzk2LTguMjktMS42NDYtLjg1IDMuNDQtMS45NzYgNi41OTMtLjI4MyAxMC4wNzggMS4wODcgMi4yNjQgMy4yOTggMi42ODcgNS43OTMgMy4yMDYgMS40MTUuMjggMi45MTguNjEgNC4yMzYgMS4zMTdsLjA3NC4wMzRjMS4yMjQuNjYgMS45MDcgMS40NyAyLjI4IDIuNjAzLjMzMy44OTMuNTIgMS45My42NiAzLjIwNC0xLjEzLS41Mi0zLjA2LTEuMTgtMy43NjgtMi4wNjguMTQ4IDEuOTczIDMuNjI4IDMuMzkgMy45NjQgNi43OC0xLjk4LS4yNDMtMi43MzUtMS4wNC0zLjY3Ni0yLjY5LS4wOTIgMS43NDcuNzUyIDIuODI3IDEuNzkyIDMuODIzLjg0NS44OTIgMS42NDMgMS45NzYgMS40NTUgNC4xMzgtLjE5LS4wNDUtLjM3NS0uMTM3LS41NjYtLjE4Ni0yLjExMy0uODAyLTMuMDEyLTIuMzU4LTMuODEtNC40MjYuNDczIDMuNjI1IDEuNjk3IDcuNjI3LS40MyAxMC44OC0uODQ1IDEuMzE3LTIuMTYgMi40MDQtMy45OTggMi44MjUtMS4xOC4yNzgtMi43ODcuNDIzLTMuNzY4LS40Mi4zODItLjcxIDEuNi0yLjEyOCAyLjY4Mi0yLjYzNy0yLjI1Ny0uMzM2LTMuNDMzLjE4Ny00LjcwNiAxLjEyLTEuOTgyIDEuNTYtMi41OTggMi4wMjgtNS40NjIgMi4wMjgtLjY2IDAtMS41MDgtLjE0LTIuMzEzLS4zMzItLjM4Mi0uMDQzLS43NS0uMTgtMS4wODMtLjI4Ljk0LTEuMjcyIDIuNDUzLTIuNDQ4IDQuMzgzLTIuNDQ4LTEuNjk1LTEuNTUtNC4xNDgtLjMzMi02LjU0Ny0uMjgzLTEuMzcuMDUtMi40OTYtLjIzNy0zLjM1LTEuMzE3LjI4OC0uODkzLjk5My0xLjc0MyAxLjc5NS0yLjE2NyAxLjk4Mi0uNDI1IDQuNjYgMS4yMjUgNi40MDctLjIzNS0xLjA0LS44LTIuNTk3LS43NS00LjE5Ni0uOTktMS42OTYtLjIzNi0yLjMxLS4zMjYtMi45NjgtMS44ODIgMS43OS0yLjgyOCA1Ljk4My0xLjY5NSA4LjE1LS4wNSAxLjIyLjk0MiAyLjQ1IDEuODg0IDQuNjYgMS44ODQgMS45OCAwIDIuODc1LTEuMzYyIDMuMjA3LTMuMTk4LjIzMi0xLjUxMy4wOS0zLjMtLjA1LTQuNzYtLjE0NC0xLjQ2My0uNzk3LTIuNTk1LTEuNjUtMy4zOTYtMi41OS0yLjM1Mi03LjkxLTEuNDYtMTEuMTYyLTEuNDYtMS45NzcgMC0zLjY3My0uNjUzLTUuMDg0LTIuMDcyTTQzLjQ1IDE2MS4xOTdsLS4wOTMuMTkzLS4xNzMtLjEyNWMtLjM4NC0uMjc4LS43NzYtLjQ0NC0xLjI4NS0uNTM3LS4xNzIgMS42Ni4xOCAyLjU1IDEuMDc3IDIuNzEybC4xNy4wMy0uMDI2LjE3Yy0uMTQ3Ljk3NS0uODcgMS42NTUtMS43OTggMS42OTdoLS4wODZjLS45MzIgMC0xLjY3My0uNjctMS44Mi0xLjY1NWwtLjAzLS4yMDdoLjM4Yy45ODItLjA3OCAxLjQtLjk1NCAxLjI5Ny0yLjc0Ny0uMTA0LjAxNS0uMjA2LjAyNy0uMzEuMDQtLjMxOC4wMzctLjYxNi4wNzUtLjg4LjE3N2wtLjI0My4wOTR2LS4yNmMwLS43LS41ODgtMS4zOC0xLjI2LTEuNDU3LS42MS4wOC0xLjIxLjc5Ny0xLjE3IDEuNDQ1bC4wMTYuMjctLjI1My0uMDljLS4yOS0uMTA0LS42MDctLjE0My0uOTE1LS4xNzgtLjEwOC0uMDE0LS4yMTYtLjAyNy0uMzIzLS4wNDItLjA5NSAxLjc0NC4zNDYgMi42NyAxLjMxMiAyLjc0N2guMzZsLS4wMy4yMDVjLS4xNDcgMS4wMzItLjkgMS42OTgtMS45IDEuNjU3LS45MTUtLjA0Mi0xLjYwNi0uNzA4LTEuNzYtMS42OTRsLS4wMjYtLjE3Mi4xNzItLjAzYzEuMTEyLS4yMDMgMS4xNi0xLjQyNyAxLjA3My0yLjcxMy0uNTA0LjA4Ni0uODY4LjI0LTEuMzI4LjU0M2wtLjE3NS4xMTctLjA4NS0uMTkzYy0uNDc3LTEuMDczLTEuNDk3LTEuNDc4LTIuMzU1LTEuNjJsMi4wNTcgOC44NEg0My43NWwyLjA5NC04Ljg0Yy0uODUzLjE0Mi0xLjg3OC41NS0yLjM5NyAxLjYyM001Mi4xMyAxNzMuNjA3bC0uMDg1LjE5Mi0uMTc3LS4xMTdjLS40Ny0uMzEyLS44NDUtLjQ2LTEuMzMtLjUxMy0uMDg3IDEuMjY3LS4wNCAyLjQ3NyAxLjA3MyAyLjY4bC4xNy4wMzItLjAyNC4xN2MtLjE0Ny45NjgtLjg1MiAxLjY0OC0xLjc2IDEuNjk1LTEuMDA0LjA0LTEuNzU0LS42MTgtMS45LTEuNjUzbC0uMDI4LS4yMDJoLjM3OGMuMzM4LS4wMi42MDgtLjE0OC44MTgtLjM4NS4zNzQtLjQzLjUzNy0xLjIzNi40NzMtMi4zNC0uMDQuMDA0LS4wNzguMDA4LS4xMTUuMDEtLjM3Ni4wMjMtLjc2NS4wNTItMS4xMTQuMThsLS4yNTMuMDk0LjAxMy0uMjY4Yy4wMzctLjcxLS41OTUtMS4zMjItMS4xOTgtMS40NDItLjY4NS4xMjgtMS4yNC43NzItMS4yNCAxLjQ1di4yNjNsLS4yNDItLjA5OGMtLjMxOC0uMTI3LS43MDUtLjE1NS0xLjA3OC0uMThsLS4xMS0uMDA3Yy0uMDcgMS4xNC4wOCAxLjkwNy40NTQgMi4zMzUuMjEuMjQuNDkuMzY3Ljg1Mi4zOWguMzdsLS4wMy4yMDJjLS4xNSAxLjAyLS45NCAxLjY5Ny0xLjkwOCAxLjY1Mi0uOTMtLjA0OC0xLjY1LS43My0xLjc5My0xLjY5NmwtLjAyNS0uMTY4LjE3LS4wM2MxLjE2LS4yMTUgMS4xOS0xLjU4NyAxLjA3NS0yLjY4Mi0uNDg4LjA1Ny0uODguMjE0LTEuMjg3LjUwOGwtLjE3Mi4xMjUtLjA5Mi0uMTkyYy0uNTItMS4wOC0xLjU0Ni0xLjQ4Mi0yLjQtMS42MjNsMi4wOTcgOC44NGgxMC43MTRsMi4wNTctOC44NGMtLjg1Ni4xNC0xLjg3Ni41NC0yLjM1IDEuNjJNNjAuNzU2IDE2MS4ybC0uMDkyLjE5Mi0uMTc0LS4xMjhjLS4zOC0uMjc3LS43NzItLjQ0My0xLjI4Mi0uNTM2LS4xNzQgMS42Ni4xOCAyLjU1IDEuMDc2IDIuNzEybC4xNy4wMy0uMDI2LjE3Yy0uMTQyLjk1Ny0uODggMS42NTUtMS43OTggMS42OTctLjk4LjA2LTEuNzU1LS42MjQtMS45MDItMS42NTdsLS4wMjgtLjIwNGguMzhjLjk3Ny0uMDggMS4zOTUtLjk1NSAxLjI5LTIuNzQ4LS4xMDIuMDE1LS4yMDYuMDI3LS4zMS4wNC0uMzE2LjAzNy0uNjE1LjA3NS0uODc1LjE3N2wtLjI0My4wOTV2LS4yNmMwLS43LS41ODctMS4zOC0xLjI1OC0xLjQ1Ny0uNjI2LjA4LTEuMjE3Ljc4NC0xLjE3NiAxLjQ0NWwuMDE2LjI3LS4yNTMtLjA5Yy0uMjktLjEwNC0uNjEtLjE0My0uOTE0LS4xNzgtLjExLS4wMTQtLjIxNi0uMDI3LS4zMjMtLjA0Mi0uMDk2IDEuNzQ0LjM0NCAyLjY3IDEuMzEgMi43NDhoLjM2bC0uMDI4LjIwNGMtLjE0NyAxLjAzMi0uOSAxLjY5OC0xLjkwMiAxLjY1Ny0uOTA4LS4wNDItMS42MTMtLjcyMi0xLjc1NS0xLjY5N2wtLjAyNS0uMTcuMTctLjAzYzEuMTE2LS4yMDMgMS4xNTgtMS40NzcgMS4wNy0yLjcxMi0uNTA1LjA4Ny0uODguMjQzLTEuMzI4LjU0bC0uMTc0LjEyLS4wODUtLjE5NGMtLjQ3OC0xLjA3My0xLjUtMS40NzgtMi4zNTYtMS42MmwyLjA1NSA4Ljg0aDEwLjcxM2wyLjEtOC44NGMtLjg1NS4xNDItMS44ODMuNTUtMi40MDIgMS42MjVNNDEuMDc2IDE0OC4xaC0uODk2Yy0uMzMuMDk2LS42MTIuMjMzLS44NDcuNDItLjI0LjE5LS4zOC41Mi0uMzguOTQgMCAxLjA0NS4yMTQgMS42MzYuNzc1IDIuMzQ0LjY2Mi43NDcgMS4xNTMuNTY4IDEuNzQ0LjM4NC41LS4xNTcuNjk3LS4yNiAxLjAzLS41LjI3LS4xOTMuMzcyLS4zOTIuMzgyLS42OS4wMjgtLjc1LS4xMTMtMS4yMDUtLjUzOC0xLjgxNC0uMzc3LS40NzUtLjYyLS45MzItMS4yNy0xLjA4NU00Ny44NjIgMTQ3LjQyOGMtLjc2NC0uMTk2LTEuMzItLjMyNC0xLjk4Ny0uMTMtMS4yMTguMzU4LTEuMDM2IDIuMjYtLjg0NiAyLjk2Ny4xMTMuMzU4LjI5Ni42MTcuNzYuOTguODA1LjYyOCAxLjUwNi45OTUgMi40OTQuMTkyIDEuMTc3LTEuMDMzLjcyNi0xLjczOC41NzYtMi45MzYtLjAwOC0uMDY4LS4zMjUtLjg5Ny0uOTk4LTEuMDcyTTU0LjU5MyAxNDcuMTc2Yy0uMzg3LTEuMDQtMS41NjYtMS4xMi0xLjYzNC0xLjEzLS42MDctLjEtMS4zMy4yLTEuNzU2LjY3LS40MjUuNDMtLjcwNyAxLjA4My0uNzA3IDEuNzkzIDAgMS4xNzQuMjc3IDEuODMgMS4wMzcgMi41MjUuNzE0LjY1MyAzIC4yOTggMy40MTUtMS4xNTguMDU0LS4xODguMDM3LTEuNjg0LS4zNTctMi43TTUzLjA1IDE0NC41ODRjLS43NTYtLjcwNS00LjMzNC0xLjI2NC01Ljc5LTEuMTgtMS4yODguMDcyLTIuNzMzLjY1My00LjM5NyAxLjQyNy0uODUuMzk1LTIuMDg0IDEuMTMtMi41MTYgMS4zNTgtLjc4Ni40Mi0uNjQuNDA1LS4yMi40MDUgMS4zNjgtLjA5NCAyLjM2LS4xODYgMy4yNTMuODk1aC4wNWMuNDI2LS44MDMgMS4wMzYtMS43ODcgMi40NS0xLjc4Ny4xODUgMCAuNDg4LS4wNTIuNjc4LS4wNSAxLjMxLjAyIDIuNDUyLjkxOCAyLjcxNC44OC4xODYtLjAyNi4yNDMtMS4wNjYgMS40Mi0xLjY0NWwxLjExMi0uMjI1IDEuMjQ3LS4wNzZNMjAuOTM4IDI2LjYzbC4zMi4wMzNjLjgzLjA4NiAxLjU5LjQ0IDIuMDgzLjk2OC42MjQuNjcuOTM4IDEuNTU1LjkzOCAyLjYzM1Y1NC45OWMwIDEuMDktLjMxMiAxLjk1Ny0uOTM3IDIuNTgzLS40NjcuNTA0LTEuMjA3LjgzMi0yLjA4My45MjNsLS4zMi4wMzN2MS45NDZoMTYuNDg4VjU4LjUzbC0uMzItLjAzNGMtLjg1Ny0uMDktMS41NTgtLjQtMi4wOC0uOTIzLS41ODctLjYyNi0uODk2LTEuNTItLjg5Ni0yLjU4MlYzMC4yNjRjMC0xLjExLjMtMS45OTYuODg2LTIuNjIzLjU2LS41NTUgMS4yODItLjg5MyAyLjA5LS45NzdsLjMyLS4wMzR2LTEuOTAySDIwLjkzN3YxLjlNNzEuMzMgMjYuNjNsLjMyLjAzM2MuODA0LjA4NCAxLjUzLjQyMiAyLjA4Ni45NjYuNjIuNjczLjkzNyAxLjU1Ny45MzcgMi42MzNWNTQuOTljMCAxLjAzLS4zMjQgMS45MjItLjkyNiAyLjU3NC0uNTM4LjUzLTEuMjQzLjg0NC0yLjA5Ni45MzNsLS4zMi4wMzJ2MS45NWgxNi40ODd2LTEuOTVsLS4zMi0uMDMzYy0uODU0LS4wOS0xLjU1Ny0uNDAyLTIuMDgtLjkyNC0uNjE0LS42NjItLjk0LTEuNTU0LS45NC0yLjU4NFY0Mi4yNTJoNC43M2MxLjExIDAgMS45OS4zMDIgMi42MjUuODk1LjY2Ni42MjQgMS4wMiAxLjQ5NSAxLjAyIDIuNTE2djEuMmgxLjg5di0xMC44OGgtMS44OXYuOTY1YzAgLjk3OC0uMzYyIDEuODU4LTEuMDE3IDIuNDc1LS42NDIuNTktMS41MjYuODkyLTIuNjMuODkyaC00LjczVjI2LjloOC42NGMxLjg1MyAwIDMuMzYyLjMzMiA0LjQ4NC45ODcgMS41MjguODkgMi4yNyAyLjMxMiAyLjI3IDQuMzUzdjEuMjA0aDEuOTg0VjI0LjczSDcxLjMzdjEuOU0xNzAuODM2IDU4LjQ5NWMtMi40NTItLjA4LTQuMzQ1LTEuMDctNi41MzUtMy40MkwxNDcuNjIgMzcuNmMxLjU0LTEuNzQ4IDMuMDUtMy41NDcgNC41MTMtNS4yODhsMS40OTUtMS43NzVjLjE4My0uMjI0LjM2LS40MzIuNTI0LS42MjYuMjE2LS4yNTguNDItLjQ5OC42MDctLjczNCAxLjU1NS0xLjg4NCAyLjQ3NS0yLjUxMiA0Ljg1NS0yLjUxMmg0LjM1OFYyNC41NEgxNTMuMDZsLS4xMDMuMTY4Yy0xLjcgMi43NzYtMy4yNSA1LjA1NS00Ljg3NyA3LjE3Mi0xLjc3IDIuMjgtMy42NTUgNC40NS01LjQzNyA2LjQ2aC0zLjExdi04LjA3M2MwLTEuMTA2LjMwMi0xLjk5Mi44OTQtMi42MzYuNTE3LS41NSAxLjIxNy0uODc3IDIuMDg0LS45NjdsLjMyLS4wMzJWMjQuNzNoLTE2LjUzN3YxLjkwNGwuMzIuMDNjLjkwMy4wOSAxLjYwMi40MTMgMi4wOS45NzcuNjIyLjYyNC45MzggMS41MDcuOTM4IDIuNjI3VjU0Ljk5YzAgMS4wNi0uMzEgMS45NTMtLjg4NSAyLjU3NC0uNTQuNTQtMS4yNC44NDQtMi4xNC45MzJsLS4zMjIuMDMydjEuOTUyaDE2LjUzOHYtMS45NWwtLjMyLS4wMzRjLS44Ni0uMDg4LTEuNTY1LS40LTIuMDgtLjkyLS41OS0uNjMzLS44OTgtMS41MjctLjg5OC0yLjU4NVY0MS4wNzhoMi43NGwxMi44NzUgMTMuMjNoLS4wNjRsLjYxLjYxYy43ODQuNzc4IDEuMjQ3IDEuNDA4IDEuNDIyIDEuOTQ0LjE3Ni40NS4xNy44Mi0uMDIgMS4wOTItLjI1LjM2OC0uODQuNTg4LTEuNTc1LjU4OGgtLjY0djEuOTRoMTYuM3YtMS45NzVsLS4zNDQtLjAxTTUzLjgzNSAzNy42MzJjLTIuMzc4IDAtNC4zMSAxLjkzMy00LjMxIDQuMzEzIDAgMi4zNzggMS45MzIgNC4zMSA0LjMxIDQuMzEgMi4zOCAwIDQuMzE0LTEuOTMyIDQuMzE0LTQuMzEgMC0yLjM4LTEuOTM1LTQuMzEzLTQuMzE1LTQuMzEzTTExNC4xNjUgMzcuNjMyYy0yLjQxNyAwLTQuMzEgMS44OTMtNC4zMSA0LjMxMyAwIDIuMzc4IDEuOTM0IDQuMzEgNC4zMSA0LjMxIDIuMzc3IDAgNC4zMS0xLjkzMiA0LjMxLTQuMzEgMC0yLjM4LTEuOTMzLTQuMzEzLTQuMzEtNC4zMTMiIGZpbGw9IiNmY2JkMDAiLz48L3N2Zz4=");
+  margin-right: 3px;
+  width: 13px;
+}
+
+.kff {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDguNzIiIGhlaWdodD0iNTkyLjkzMyIgdmlld0JveD0iMCAwIDYwOC43MTk5NyA1OTIuOTMzMzUiPjxkZWZzPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZD0iTTY2Ni4yOTMgODM2LjY4aDMyMzQuMjZ2MzIzNC4yOUg2NjYuMjkzeiIvPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSJiIj48cGF0aCBkPSJNMjI5NS4xNCA5OTMuNjRoLjA0LS4wNG0tLjAzIDBjLTI0Ny4zMSAwLTQyMC4xNiA2NS4zOS00MjAuMTYgNjUuMzkgMCA5MjgtMTAxMS43NSAxNzU4LjQ4LTEwMTEuNzUgMTc1OC40OHMxMDExLjc1LTgzMC40OCAxMDExLjc1LTE3NTguNDhjMCAwIDE3Mi44OS02NS4zODIgNDIwLjE2LTY1LjM5bTQ1Mi44MiA3OC43NGMuMzkuMTUuODIuMzEgMS4yMi40NS0uNC0uMTQtLjgzLS4zLTEuMjItLjQ1bTIuNjQuOTdjLjM5LjE1LjguMyAxLjE5LjQ1IDAgMCA4Ni4wMSAxMDgzLjcxIDk2MS44OSAxNzQzLjcxLTg3NS44OC02NjAtOTYxLjg5LTE3NDMuNzEtOTYxLjg5LTE3NDMuNzEtLjM5LS4xNS0uOC0uMy0xLjE5LS40NSIvPjwvY2xpcFBhdGg+PHJhZGlhbEdyYWRpZW50IGZ4PSIwIiBmeT0iMCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxMzM3IDAgMCAtMTMzNyAyMjg4LjQyIDIyMzYuMTgpIiBzcHJlYWRNZXRob2Q9InBhZCIgaWQ9ImMiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzljMTcyZSIvPjwvcmFkaWFsR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJkIj48cGF0aCBkPSJNMjI5NS4xNCA5OTMuNjRoLS4wM2MtMjQ3LjI3LjAwOC00MjAuMTYgNjUuMzktNDIwLjE2IDY1LjM5IDAgOTI4LTEwMTEuNzUgMTc1OC40OC0xMDExLjc1IDE3NTguNDggOTcuNjgzIDQyMS44OCAzNjIuMzYgNjYxLjIxIDM2Mi4zNiA2NjEuMjFzNDI4LjMxLTIzMC4yOSAxMDUzLjctMjMwLjI5YzYyNS4yMSAwIDEwNzIuMDMgMjMwLjI5IDEwNzIuMDMgMjMwLjI5IDM0Mi41My0zODAuNDIgMzYyLjM2LTY2MS4yMSAzNjIuMzYtNjYxLjIxLTg3NS44OC02NjAtOTYxLjg5LTE3NDMuNzEtOTYxLjg5LTE3NDMuNzEtLjM5LS4xNS0uOC0uMy0xLjE5LS40NS0uNDgtLjE3LS45NC0uMzQtMS40Mi0uNTItLjQtLjE0LS44My0uMy0xLjIyLS40NS0xNjIuMzMtNTkuNDYtMzE4LjUxLTc4LjczMi00NTIuNzUtNzguNzRoLS4wNCIvPjwvY2xpcFBhdGg+PHJhZGlhbEdyYWRpZW50IGZ4PSIwIiBmeT0iMCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxMzM3IDAgMCAtMTMzNyAyMjg4LjQyIDIyMzYuMTgpIiBzcHJlYWRNZXRob2Q9InBhZCIgaWQ9ImUiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2RiMWIzMCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzljMTcyZSIvPjwvcmFkaWFsR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJmIj48cGF0aCBkPSJNMjg2MS45MiAxMTYxLjk2YzQzLjA1IDI1OC42NyAyMTYuNSAxMDA1LjE5IDgzNC41NiAxNTE3LjY2IDEwLjY0LTcwLjU4IDE2LjA3LTE0Mi4xNSAxNi4wNy0yMTMuNjkgMC01NjQuNjktMzM4LjYxLTEwNzguMzEtODUwLjYzLTEzMDMuOTd6bTg2OC4xMSAxNjA2LjdjLTc4MS4xNS01OTguMDUtOTEzLjY1LTE1NTMuODktOTI4LjI0LTE2ODMuOTEgNTYwLjI2IDIwOC4yOCA5NTkuNDMgNzQ3Ljk2IDk1OS40MyAxMzgxLjE4IDAgMTAzLjc5LTEwLjc4IDIwNS4wMy0zMS4xOSAzMDIuNzN6bS0yMzg2LjE0IDc2Mi4yN2MyNjAuODIgMjMxLjg4IDU5My42MSAzNTguNzkgOTQ0LjkyIDM1OC43OSAzNTAuNjIgMCA2ODIuOTQtMTI2LjU2IDk0My41OS0zNTcuNzctMTUwLjItNjIuNjEtNTAzLjM5LTE4Ni4xNy05NTMuMTQtMTg2LjE3LTQ0OC4xNiAwLTc5MC4wMiAxMjIuNTgtOTM1LjM3IDE4NS4xNXptOTQ0LjkyIDQwNy40NmMtNDAxLjYyIDAtNzY1LjQ5LTE2MC43OC0xMDMxLjE1LTQyMS4zNyA2My41My0zMS42NCA0NjUuMDItMjE5LjkgMTAyMS42LTIxOS45IDU1Ni43NyAwIDk3My44MiAxODguNDMgMTA0MC4xOSAyMjAuMjQtMjY1LjU5IDI2MC40LTYyOS4zOCA0MjEuMDMtMTAzMC42NCA0MjEuMDN6TTg2NC45MjYgMjQ2NS45M2MwIDY5LjEzIDUuMTQ4IDEzOC4yNiAxNS4wNTggMjA2LjUgMjE4LjEzNi0yMDEuOTYgODQ5LjMxNi04NDMuMjEgODk0Ljg2Ni0xNTM1LjA5LTU0Ny4wNyAyMTEuMjUtOTA5LjkyNCA3MzYuMzMtOTA5LjkyNCAxMzI4LjU5em0tMTcuNzE1IDMwMS4zM2MtMjAuMjUzLTk3LjI5LTMwLjkzNy0xOTguMDUtMzAuOTM3LTMwMS4zMyAwLTY1Mi4wMiA0MjMuMzA3LTEyMDQuOTEgMTAwOS44NjctMTM5OC44OS01LjUgODMwLjQxLTg1NS43MzQgMTU5NC05NzguOTMgMTcwMC4yMnpNMjI5MC45IDkzOS4zOThjLTg0MS4xNSAwLTE1MjMuMDU2IDY4MS44ODItMTUyMy4wNTYgMTUyMy4wNTJTMTQ0OS43NSAzOTg1LjU0IDIyOTAuOSAzOTg1LjU0Yzg0MS4xNyAwIDE1MjMuMDctNjgxLjkyIDE1MjMuMDctMTUyMy4wOVMzMTMyLjA3IDkzOS4zOTggMjI5MC45IDkzOS4zOTh6bTAgMzEzNS4yMTJjLTg5MC4zNCAwLTE2MTIuMTM0LTcyMS44LTE2MTIuMTM0LTE2MTIuMTYgMC04OTAuMzUgNzIxLjc5NC0xNjEyLjE1IDE2MTIuMTM0LTE2MTIuMTUgODkwLjM1IDAgMTYxMi4xNSA3MjEuOCAxNjEyLjE1IDE2MTIuMTUgMCA4OTAuMzYtNzIxLjggMTYxMi4xNi0xNjEyLjE1IDE2MTIuMTZ6Ii8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ic2NhbGUoMzIyNC4zKSByb3RhdGUoLTQ1IDEuNTMgLjEzKSIgaWQ9ImciPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjAxMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjIiIHN0b3AtY29sb3I9IiNlMWJiNzAiLz48c3RvcCBvZmZzZXQ9Ii41IiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuOCIgc3RvcC1jb2xvcj0iI2UxYmI3MCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJoIj48cGF0aCBkPSJNMTQzMS42MyAzMjA0Ljc3bDEwOC4yLTM3LjY2LTI0My4zOC0xNDguNTEgOTYuMDUtMzA1LjUzLTExMi45NiAzOS4zMy03My41NiAyNTIuOC0xLjE3LjQzLTcwLjU1LTIwMi42Ni04Ny44NyAzMC42MSAxNTYuOSA0NTAuNyA4Ny44Ny0zMC42TDEyMjUgMzA2My42bDEuMTgtLjQxeiIvPjwvY2xpcFBhdGg+PGxpbmVhckdyYWRpZW50IHgyPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgwIC01NzEuMiAtNTcxLjIgMCAxMjkzLjExIDMyODQuMjgpIiBpZD0iaSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuMDExIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuMzA4IiBzdG9wLWNvbG9yPSIjZTFiYjcwIi8+PHN0b3Agb2Zmc2V0PSIuOTM5IiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PC9saW5lYXJHcmFkaWVudD48Y2xpcFBhdGggaWQ9ImoiPjxwYXRoIGQ9Ik0xNzAzLjY2IDMwMDIuOTFsLTEuMjUuMjYtODcuMjctMTU4Ljc5IDExMC44NC0yMy40MnptLTEzMC4yMi0yMjcuMzhsLTU5LjItOTAuMzMtOTUuOTUgMjAuMjcgMjgzLjMgNDQwLjg0IDcwLjYyLTE0LjkyIDc1LjgtNTE2LjctOTcuMiAyMC41My0xNS4xNCAxMDYuMDN6Ii8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAgLTUzMS42MiAtNTMxLjYyIDAgMTYzMy4xNSAzMTQ2LjMxKSIgaWQ9ImsiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjAxMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjMwOCIgc3RvcC1jb2xvcj0iI2UxYmI3MCIvPjxzdG9wIG9mZnNldD0iLjkzOSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJsIj48cGF0aCBkPSJNMTk5My45NyAyNjgyLjM1bDEzMC44Ni0xMy43NS04LjQyLTgwLjU3LTIyMy40NiAyMy40OCA0OS45MSA0NzQuNTMgOTIuNTItOS43MXoiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCB4Mj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJzY2FsZSg0OTgpIHJvdGF0ZSgtOTAgNS4xMiAxLjA4KSIgaWQ9Im0iPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjAxMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjMwOCIgc3RvcC1jb2xvcj0iI2UxYmI3MCIvPjxzdG9wIG9mZnNldD0iLjkzOSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJuIj48cGF0aCBkPSJNMjU0Mi44OCAyODgzLjM2aC0xLjIzbC0xMDAuNzMtMzA1LjE3LTMyLjI0LS44LTExMS45NCAyOTkuODYtMS4yNy0uMDItMzUuMTEtMjk3LjE3LTkzLjY2LTIuMzQgNjguMjEgNDkxLjc2IDY1Ljg4IDEuNjIgMTI1LjUyLTMxMS41NyAxMDQuNzkgMzE3LjI5IDY3LjEzIDEuNjYgODMuNjEtNDg3Ljk5LTkzLjY1LTIuM3oiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCB4Mj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJzY2FsZSg1MDEuMSkgcm90YXRlKC05MCA1LjQ5IC42NSkiIGlkPSJvIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48c3RvcCBvZmZzZXQ9Ii4wMTEiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48c3RvcCBvZmZzZXQ9Ii4zMDgiIHN0b3AtY29sb3I9IiNlMWJiNzAiLz48c3RvcCBvZmZzZXQ9Ii45MzkiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0icCI+PHBhdGggZD0iTTI4NzQuMDEgMjk4MS41M2wtMS4yNy0uMjYtMTYuOTctMTgwLjM3IDExMS4wMSAyMi41MnptLTI5LjI2LTI2MC4zNGwtMTguNDItMTA2LjQtOTYuMTMtMTkuNDkgODUgNTE3LjAxIDcwLjY4IDE0LjM1IDI3NC43NS00NDQuMDgtOTcuMzYtMTkuNzUtNTYuMDQgOTEuMjl6Ii8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ic2NhbGUoNTMxLjM3KSByb3RhdGUoLTkwIDUuNzEgLjE3KSIgaWQ9InEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjAxMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iLjMwOCIgc3RvcC1jb2xvcj0iI2UxYmI3MCIvPjxzdG9wIG9mZnNldD0iLjkzOSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2M2ODcwZiIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJyIj48cGF0aCBkPSJNMzI0Ni4zOSAyOTg2LjhsMTEuMjkgNC4xOWM0OC4wOSAxNy43NCA5Mi4yNSA0NC40NiA3Mi4yMyA5OS4xMy0yMy43NSA2NC43OC03NS4xMiA1Mi45Ny0xMjEuNDMgMzUuODNsLTExLjg5LTQuMzl6bTMwNC44Ni0xNjEuOTVsLTg4LjE4LTMyLjUyLTE0OS40OSAxNTEuMDktNDQuNTctMTcuNzUgNjYuNzQtMTgwLjQ5LTg3LjI3LTMyLjI3LTE2NS40OSA0NDcuNjQgMTE4LjExIDQzLjY1Yzg4LjQ5IDMyLjcyIDE3My41OSAyOC40OSAyMTUuMTctNzkuNDUgMTYuNzItNDMuNC0xLjkxLTk0LjA4LTI5LjEyLTEyOS44My04LjM0LTEwLjkxIDE2NC4xLTE3MC4wNyAxNjQuMS0xNzAuMDd6Ii8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ic2NhbGUoNTA5LjIyKSByb3RhdGUoLTkwIDYuNDIgLS4wOSkiIGlkPSJzIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48c3RvcCBvZmZzZXQ9Ii4wMTEiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48c3RvcCBvZmZzZXQ9Ii4zMDgiIHN0b3AtY29sb3I9IiNlMWJiNzAiLz48c3RvcCBvZmZzZXQ9Ii45MzkiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNjNjg3MGYiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0idCI+PHBhdGggZD0iTTE5NDYuMzcgMTQ3Ny4xNHY3MjYuODFoMzk3LjM1di0xMjguMTZoLTI0Ni4yM3YtMTY3LjQ2aDE3Ni41MnYtMTI2LjI3aC0xNzYuNTJ2LTMwNC45MnoiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCB4Mj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJzY2FsZSg3MjYuODIpIHJvdGF0ZSgtOTAgMi45OSAuMDQpIiBpZD0idSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuMDExIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuMzA4IiBzdG9wLWNvbG9yPSIjZTFiYjcwIi8+PHN0b3Agb2Zmc2V0PSIuOTM5IiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PC9saW5lYXJHcmFkaWVudD48Y2xpcFBhdGggaWQ9InYiPjxwYXRoIGQ9Ik0yMzYwLjE0IDExNzYuNjl2NzI2LjIxaDM5Ny4yNXYtMTI3Ljc0aC0yNDYuMjV2LTE2Ny4zMmgxNzYuNDZ2LTEyNi4zNWgtMTc2LjQ2di0zMDQuOHoiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCB4Mj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMCAtNzI2LjIgLTcyNi4yIDAgMjU1OC43NiAxOTAyLjkpIiBpZD0idyI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuMDExIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIuMzA4IiBzdG9wLWNvbG9yPSIjZTFiYjcwIi8+PHN0b3Agb2Zmc2V0PSIuOTM5IiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjYzY4NzBmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHBhdGggZD0iTTEyMC45NzUgMTUyLjU4OGMtLjUxIDAtMS4wMi4yMDctMS4zOS42MDctNC41MyA0Ljg5Ni0yMC42MTMgMjQuOTA1LTE4LjI4IDMwLjI0LjQ0OCAxLjAyNCAxLjQyIDEuNjMzIDIuNiAxLjYzMy4zMjQgMCAuNjcyLS4wNDQgMS4wMzgtLjEzNSAxLjU0Ni0uMzggMi44NTgtMS4yMiAzLjkwNS0yLjQ5My4xMi0uMTQuMjE1LS4zLjI4NS0uNDY4IDMuNzg0LTguOTkgOC4zMTItMTcuOTE1IDEzLjQ2LTI2LjUyNy40OTYtLjgzLjI4Ny0xLjktLjQ5LTIuNDgtLjMzOC0uMjUzLS43MzMtLjM3Ny0xLjEyOC0uMzc3bTM3MC41IDIuNjEyYy0uNDcyIDAtLjkzOC4xNzUtMS4zLjUxNy0uNjM0LjYwNC0uNzc2IDEuNTYzLS4zMzUgMi4zMjMgNi4wNzMgMTAuNDggMTEuMjM3IDIxLjQxNiAxNS4zNDUgMzIuNDk1LjIzLjYyNC43NzYgMS4wNzcgMS40MjggMS4yIDEuNTMuMjgyIDMuNzc0LjYxOCA1Ljc2Ni42MTggMS42NDUgMCAzLjk1Mi0uMTkyIDQuOTktMS44NTYuMzQ2LS41NS44MDItMS43MTYuMDA2LTMuMzQ1LTYuODk1LTE0LjEwMy0xNi4xOS0yNS45My0yNC44NjMtMzEuNjQtLjMxNi0uMjA4LS42OC0uMzEyLTEuMDM4LS4zMTJNOTMuOTA3IDIyNS40NDVjLS40NyAwLS45MzUuMTc1LTEuMjkzLjUxNC02LjU1MyA2LjE4My05LjU3NCAxMC44MjQtOC45OCAxMy43OTIuMjY0IDEuMzEyIDEuMTY1IDIuMzIgMi41MzcgMi44MzcgMi41NDUuOTYgMy43ODQgMS4yOTggNC43NDQgMS4yOTggMS4yNSAwIDIuMjEtLjYxIDIuNy0xLjcxNS4wOC0uMTc3LjEzLS4zNjYuMTUtLjU2LjQ3LTQuMzU0IDEuMTI1LTguOTE3IDIuMDA2LTEzLjk1NC4xNC0uODAzLS4yNDgtMS42MDQtLjk2NS0xLjk5LS4yODItLjE1LS41OS0uMjI1LS44OTgtLjIyNW00MjMuNTQyIDIuMzM4Yy0uMjM0IDAtLjQ3LjA0NS0uNjk4LjEzNi0uODI0LjMzLTEuMzA4IDEuMTg1LTEuMTY1IDIuMDYgMS44ODIgMTEuNTE2IDIuODM3IDIzLjE1MiAyLjgzNyAzNC41NzcgMCAzLjMtLjEyIDYuNTg3LS4yMjcgOS4wODQtLjAzNi45Mi41OTQgMS43MzMgMS40OTUgMS45My4xMzIuMDI3LjI2NC4wNDIuMzk1LjA0Mi43NTggMCAxLjQ2NS0uNDYgMS43NTYtMS4xOTIgMi4wMTMtNS4wNjMgNy41NzItOC4wODQgMTQuODY4LTguMDg0bC40OTUuMDA1aC4wNDJjLjYwNCAwIDEuMTctLjI4NSAxLjUyNS0uNzc3LjM2LS41LjQ1Ni0xLjE0Ny4yNTMtMS43My0yLjM5Ny02Ljg4NS0xNC41NzgtMjcuMjQ0LTIwLjAxMi0zNS4yMjItLjM1Ny0uNTI3LS45NTItLjgyNy0xLjU2NC0uODI3TTg5Ljc3IDI2Mi44MzdjLTQuMzYgMC0xMi43ODQgNy40NDItMTguNDEzIDE0LjYzOC0zLjgzNCA0Ljg5OC04LjEyOCAxMS44Ni02LjgwOCAxNy4xOTIuMTI3LjUwNC40Ny45My45MjYgMS4xODguMjgyLjE1OC42MDQuMjM3LjkyOC4yMzcuMTk1IDAgLjM5My0uMDI4LjU4LS4wODguMDA1LS4wMDMuNDg4LS4xNTIgMS4zMTItLjE1Mi41NCAwIDEuMTA1LjA2NSAxLjY3Ny4xODcuMTMzLjAyNy4yNjYuMDQuMzk4LjA0LjUzNyAwIDEuMDYtLjIyOCAxLjQyMi0uNjQuNDUyLS41MTUuNTktMS4yMzUuMzYtMS44OC0uMDMzLS4wOS0yLjc2My05LjM0IDQuNDktMTMuNjYgMS42NTItLjk4MyAzLjI5Mi0xLjQ2IDUuMDE3LTEuNDYgMy4zMiAwIDYuMjc4IDEuNzg3IDguNjU2IDMuMjIuMzAyLjE4NS42NC4yNzYuOTguMjc2LjM0IDAgLjY4LS4wOS45OC0uMjc1LjYtLjM2NS45NS0xLjAzMi45MDYtMS43MzUtLjMzNi01LjItLjY0Ny0xMC42MTYtLjY1NS0xNC45NzYgMC0uNjM1LS4zMi0xLjIyNS0uODQ3LTEuNTc1LS41NDMtLjM1Ni0xLjE4Ny0uNTM4LTEuOTEtLjUzOG00NTcuMzQ1IDE5Ljk0NmMtLjcxIDAtMS4zNi4zOTQtMS42ODMgMS4wM2wtLjMyNy42NDRjLTEuMTI0IDIuMjItMi4wMSAzLjk3LTMuNTMzIDQuODQyLS43MS40MDgtMS4wNzcgMS4yMzItLjkwNyAyLjAzNS4xNy44MDUuODQyIDEuNDAyIDEuNjYyIDEuNDg1IDIuMDg2LjIwNSA0Ljg3MyAxLjM1IDYuMjkgNS42Mi4yNi43ODUuOTkgMS4yOTMgMS43OSAxLjI5My4xMyAwIC4yNTgtLjAxLjM5LS4wMzguOTQtLjE5OCAxLjU4NC0xLjA2OCAxLjQ5Mi0yLjAyNC0uMzYzLTMuOTItMS41NzUtOS43MDMtMy40NTgtMTMuNzktLjMwNS0uNjU3LS45NTUtMS4wODMtMS42OC0xLjA5N2gtLjAzN004MC45OCAzMDAuNTU2Yy0uNjg0IDAtMS4zMi4zNy0xLjY1My45NzMtLjM1Ni42NC0uMzA3IDEuNDMuMTIgMi4wMjIgMi43MjMgMy43NyA0LjgzNSAxNS42MDQgNi4zOCAyNC4yNDQgMi4xNTQgMTIuMDcyIDIuODA2IDE0LjcyNyA0LjgzIDE1LjQwNy4zMzYuMTEyLjY5Mi4xNyAxLjA1Ny4xNyAyLjAzNCAwIDMuNzI2LTEuNzcyIDUuNjgyLTMuODIgMS42LTEuNjggMy40MTctMy41OCA1LjI2LTQuMjk4Ljk0My0uMzY3IDEuNDMyLTEuNDA4IDEuMTA4LTIuMzY2LTMuMjQtOS41NzUtNi43MDYtMjQuMDc3LTguODM3LTM2Ljk0Mi0uMTMzLS44MDctLjc3LTEuNDQtMS41ODItMS41NmwtLjI4Mi0uMDJjLS43MSAwLTEuMzY3LjM5My0xLjY5IDEuMDQ0LS44NzQgMS43NDctNC42OSA1LjE3LTkuNTY1IDUuMTctLjIzIDAtLjQ2NS0uMDA2LS43MDUtLjAyM2wtLjEyNC0uMDA0bTQyMS45NjQgNTIuODI1YzEuMDIgMCAyLjA3Ljc0NCAzLjA1NyAxLjU0bC41My40NDRjMS4yIDEgMi4zNCAxLjk1IDMuNzY3IDEuOTUgMS41NjggMCAyLjc1NS0xLjA5MyAzLjUyMi0zLjI0NyAyLjIzLTYuMjY0IDQuNDU3LTEzLjA4MiA2LjYxMi0xOS42NzQgNS4zNTItMTYuMzcyIDEwLjg4Ny0zMy4zMDQgMTUuNjQ3LTM4Ljg3Mi40ODctLjU3LjU4OC0xLjM3Ni4yNi0yLjA1LS4zMTYtLjY1Ny0uOTgtMS4wNjYtMS43LTEuMDY2aC0uMDc2Yy0uMjI1LjAxLS40NTIuMDE1LS42NzIuMDE1LTguNTIzIDAtMTEuOTMzLTYuNy0xMi43NzUtOC43NS0uMjkzLS43MTgtLjk4OC0xLjE3NS0xLjc0NS0xLjE3NWwtLjI4LjAyMmMtLjg2NC4xMy0xLjUyNC44My0xLjYwNSAxLjY5OC0yLjExMiAyMy4wOS03LjkzNiA0NS41MTItMTcuMzA4IDY2LjY0Mi0uMjkzLjY2LS4xODQgMS40My4yOCAxLjk4Mi4zNjcuNDMuOS42NyAxLjQ0Ny42Ny4xNTQgMCAuMzEyLS4wMTcuNDY0LS4wNTUuMTk0LS4wNDguMzgtLjA3NC41NzQtLjA3NG0tMzg1LjQ2NyAxMy4zNTZsLS4yMjQuMDE1Yy0uNzYyLjA5My0xLjM5NC42MzgtMS41OTUgMS4zNzgtMS42NSA2LjAyLjI1OCAyMy44NTYuMzQgMjQuNjE1LjA3NS43MjIuNTY0IDEuMzM3IDEuMjUgMS41NzcuMjA2LjA3My40MTguMTA3LjYyNy4xMDcuNDkzIDAgLjk3NC0uMTkgMS4zMzUtLjU1NCAxLjc2NS0xLjc2IDQuMDctMi4xMyA1LjY5Mi0yLjEzIDIuMTc3IDAgNC41NS42NiA2LjUwOCAxLjgxMi4yOTYuMTc0LjYyNi4yNjIuOTU0LjI2Mi41MSAwIDEuMDEzLS4yMDYgMS4zOC0uNTk4LjYwNS0uNjQ0LjY4NC0xLjYyMy4xODctMi4zNTMtMi44MS00LjE2LTExLjU3LTE3LjM0LTE0LjgtMjMuMTU4LS4zMzUtLjYwNy0uOTczLS45NzQtMS42NTMtLjk3NG0zNjIuNjgyIDMxLjk3N2MyLjg5NyAwIDUuNDMgMS4wNDcgNy41MjMgMy4xMi4zNi4zNi44NC41NDQgMS4zMy41NDQuMjU4IDAgLjUxNi0uMDUuNzYtLjE1Ny43MDgtLjMxIDEuMTU4LTEuMDI0IDEuMTI4LTEuOC0uMDItLjYzNy0uNTctMTUuNjctMS4yMzItMjIuMzY1LS4wOC0uODA0LS42NjQtMS40Ny0xLjQ1LTEuNjU1LS4xNDYtLjAzNS0uMjg2LS4wNDgtLjQzLS4wNDgtLjY0IDAtMS4yNTUuMzI4LTEuNjA0Ljg4Ny00LjM1MiA2Ljk2Ny05LjE5IDEzLjc5My0xNC4zODUgMjAuMjg1LS41ODUuNzMtLjU0NyAxLjc4My4wOTUgMi40Ny4zNy4zOTYuODczLjU5OCAxLjM4LjU5OC4zNzYgMCAuNzUyLS4xMSAxLjA3OC0uMzM2Ljc2OC0uNTM2IDIuOTctMS41NDQgNS44MDYtMS41NDRtLTM0Mi43MTMtMi44NGMtLjI1IDAtLjUuMDUtLjc0LjE1Mi0uNzYzLjMyNi0xLjIyMyAxLjEwNC0xLjE0MiAxLjkyOC4wNi41ODIuMTg0IDEuMjI2LjMxOCAxLjkwNC40OTMgMi41MjYgMS4xMSA1LjY3LTEuMDIzIDguNDcyLS42NjQuODctMS4zNzcgMi4wNDYtLjk5IDMuMzkuNDU3IDEuNTg1IDEuOTk1IDIuMTYzIDQuMTI3IDIuOTY1IDMuMzEgMS4yNDQgOC44NTQgMy4zMjggMTUuODU2IDEwLjA0NiAxLjY2NiAxLjYgMy40MDcgMi40MTMgNS4xOCAyLjQxMyAxLjQ3NSAwIDIuODYzLS41ODYgMy45MTYtMS42NS4zNjMtLjM2OC41NjItLjg2Ni41NDctMS4zODQtLjAxMy0uNTE4LS4yNC0xLjAwMy0uNjI0LTEuMzUtNy4xNzQtNi40NzUtMTguOTU2LTIwLjMxMi0yMy45ODYtMjYuMjItLjM2OC0uNDMzLS45LS42NjgtMS40NC0uNjY4bTMzMC4wMTIgOC4yNTNjLS41NTIgMC0xLjA5My4yNC0xLjQ2NS42OTUtNC43OTIgNS44NzYtMTIuODA4IDEzLjc0NC0yMS40MzYgMjEuMDUtLjQzMy4zNjYtLjY4LjkwNS0uNjcgMS40Ny4wMDUuNTY0LjI3IDEuMDk1LjcxIDEuNDUgMy45IDMuMTIzIDYuMjUgNi4wNSA2LjQ0NCA4LjAyMy4wOC44MDMuNjU3IDEuNDY3IDEuNDQzIDEuNjU0LjE0Ni4wMzMuMjkuMDUuNDM3LjA1LjYzNSAwIDEuMjQzLS4zMiAxLjU5NS0uODczLjA4NS0uMTM3IDguODE2LTEzLjY3MiAxOC41NC0xNS4zMDguNzk3LS4xMzMgMS40Mi0uNzYgMS41NTMtMS41Ni4xMy0uNzk1LS4yNjItMS41ODgtLjk3My0xLjk2OC0zLjIzLTEuNzI4LTcuMDg4LTYuMzUtNC40NjgtMTIgLjQtLjg2LjA5Ny0xLjg5LS43MS0yLjM5NS0uMzEtLjE5NC0uNjU4LS4yODgtMS4wMDMtLjI4OG0yMi4wMDQgMTMuMDU0Yy0uNDEyIDAtMS4xOTMuMTI3LTEuODA3Ljk5Ny0xLjgzNyAyLjYyNy00LjE3MiAzLjExOC02LjQxIDMuMzk1LS42NTYuMDgtMS4yMTguNTA1LTEuNDg2IDEuMTA3LS4yNy42MDMtLjIwNCAxLjMxLjE3NiAxLjg1Mi4xNy4yNDcgNC4xMzIgNi4xNS4xMiAxNS44OS0uMjU2LjYxOC0uNzg0IDEuOS0uMDY0IDIuOTc3LjM4NC41NyAxLjAyOC45MDcgMS43MjMuOTA3IDIuNzI4IDAgNy4xNDUtNi45NjQgNy4xODgtNy4wMzUgMi44ODgtNC45MDggMy43NjItMTYuNjA4IDIuNDEtMTguOTc2LS40LS43LTEuMDkyLTEuMTE3LTEuODUtMS4xMTdNMTc1Ljg3IDQzNC4wNTVjLS4zNDIgMC0uNjguMDktLjk4Ni4yNzYtLjY2NC40MDUtMS4wMSAxLjE3Ni0uODc1IDEuOTQgMy4yMzggMTguNDUzIDEzLjA5IDMzLjUwNSAyMC43OCA0Mi44OCA2LjQ5OCA3LjkyIDE1Ljc0IDE2LjYxNyAxNy42NiAxNi42MTcuNjYgMCAxLjI3NS0uMzU1IDEuNjE3LS45Mi4zNDItLjU3LjM2OC0xLjI4LjA1Ny0xLjg2NS0yLjUxNi00Ljc5LTQuMzIzLTkuNzE2LTUuMjMyLTE0LjI1Mi0xLjY2Ny04LjM0Ljg1Mi0xNy44NDcgMi4wMTMtMjEuNTQ1LjI3Ni0uODgzLS4xMjgtMS44MzctLjk1NC0yLjI1My0xMS42MjMtNS44NDYtMjIuNzA1LTEyLjc0Mi0zMi45NC0yMC40OTUtLjMzNS0uMjU2LS43MzctLjM4NC0xLjE0LS4zODRtMjYxLjMzNC0xLjY3MmMtLjQxIDAtLjgyLjEzMy0xLjE2LjQtMTEuNjggOS4wOC0yNC4yMzMgMTYuOTItMzcuMzE1IDIzLjMwMy0uNjE4LjMwNS0xLjAyNS45Mi0xLjA2IDEuNjEtLjAzLjY4NC4zMTQgMS4zMzYuOSAxLjcgMi43MTQgMS42NjctLjMxIDE0LjQ3Ni0xLjkzMyAyMS4zNTgtMi4yOTMgOS43MTMtMy40MDIgMTQuODktMS41MjYgMTcuMjU1LjYuNzYgMS40NzQgMS4xOCAyLjQ2MiAxLjE4Ljg0IDAgMS43Ni0uMyAyLjgwNC0uOTE3IDE2LjE1LTkuNSAyNi4yNTctMzMuOTMzIDMzLjY0LTUxLjc3MiAxLjc1LTQuMjI4IDMuNDAzLTguMjIgNC45LTExLjQyNy4zNjgtLjc5Mi4xNDgtMS43MzItLjUzNS0yLjI3Ni0uMzQzLS4yNzMtLjc2LS40MTMtMS4xNzYtLjQxM20tMTc5Ljk3NiA1My4yMTJsLjE2LjAxMmMxLjQ1Mi4yMDYgNS4yNjQgNS44MDYgOC4zMjcgMTAuMyAzLjE5NiA0LjY5IDYuODE2IDEwLjAwNyAxMS4xMyAxNS4wNzggMTIuNzc4IDE1LjA0IDI0LjQwNCAyMS40NTMgMjQuODk0IDIxLjcxOC4yNzcuMTUzLjU5Mi4yMy45MDQuMjMuMTYgMCAuMzI1LS4wMi40ODctLjA2MyAxNi42MjItNC40NSAzNS4zOC0yNi42NTYgNDUuNDYtMzguNTg2IDIuMTk4LTIuNjA1IDMuOTM4LTQuNjY0IDQuOTM0LTUuNjYgMS4wMzMtMS4wMzUgMS42Ni0xLjQxIDEuOTU3LTEuNTQ0LjEzMi4yNzMuMzMyLjg3Mi41MTYgMi4xNzMuMDUuMzUuMDk1LjcwMy4xMzcgMS4wNDUuMjU2IDIuMDgzLjU1IDQuNDQ3IDIuNzY0IDQuNDQ3LjU0NiAwIDEuMDY3LS4xOTMgMS41NS0uNTcuODY1LS42ODIgMi4yMjgtMi40NzcgNC45ODgtNi4xNSA0Ljk1LTYuNTk2IDEyLjQzNi0xNi41NjggMTkuMTI2LTIxLjcxLjc0OC0uNTcyLjk2LTEuNjA4LjQ5Ni0yLjQyNy0uMzQ0LS42MS0uOTgzLS45NjQtMS42NS0uOTY0LS4yMjcgMC0uNDYuMDQ0LS42ODMuMTMtMjQuNzEgOS42My01MC43MDIgMTQuNTE3LTc3LjI1IDE0LjUxNy0yNi4xNjQgMC01MS43OTItNC43NC03Ni4xNzQtMTQuMDg2LS4yMi0uMDg0LS40NTMtLjEyNC0uNjgtLjEyNC0uNjE1IDAtMS4yMTIuMy0xLjU3LjgzNy0uNDkuNzM4LS40MDcgMS43MTIuMjAyIDIuMzU0IDUuODQgNi4xNDggMTguNDkgMjEuNTAzIDE4LjYxNyAyMS42NTVsLjIyMi4yMjhjMS4xMzIuOTgyIDIuMzI0IDEuNDgyIDMuNTQgMS40ODIgMi4wNjggMCAzLjU4Ny0xLjM4IDQuOTI4LTIuNTk0LjkyMy0uODM3IDEuOTAzLTEuNzI0IDIuNjY4LTEuNzI0bTk4LjYzNSAxMDUuNDQ4Yy00Ljg4MiAwLTUuNzgtLjkzNS01LjgxNi0uOTczLTIxLjkzNi0yNC4zMS00Ny4zMzUtMjguNDg0LTQ4LjQwOC0yOC42NDZsLS4yOTUtLjAyMmMtLjM5NyAwLS43ODguMTI3LTEuMTE0LjM2Ni0xLjEzLjgzNC0yNy43OTMgMjAuNDczLTMzLjkyNSAyNi42MDQtMS4wMiAxLjAyLTQuNTYyIDIuMTEtMTEuNDQ0IDIuMTEtMTEuNzI3IDAtMjIuNzIzLTMuMDQzLTIzLjUzLTQuOTguMDM4LS4wMDQuMTktLjI0LjY3Ny0uNjA1IDMuNjItMi43MDYgOC43My01LjE3NSAxNC42NDUtOC4wMzIgOC4wODUtMy45MDggMTcuMjUzLTguMzM3IDI1LjE3LTE0LjcxMy42NDMtLjUyLjg3NS0xLjM5Ny41Ny0yLjE2OC0uMjg1LS43MjMtLjk4OC0xLjE5LTEuNzUzLTEuMTlsLS4xNS4wMDRjLTQuMDMzLjMxNC03Ljc3Ny40NzQtMTEuMTMzLjQ3NC0xNi4yMDQgMC0yMC42OTYtMy42OC0yMS45My01Ljg3NS0xLjQ0Mi0yLjU2Ni4xNzgtNS4yOTQuMjUtNS40MDYuMzI2LS41NC4zNjYtMS4yMTQuMS0xLjc4NS0uMjY4LS41NzItLjc5OC0uOTc4LTEuNDItMS4wNzQtMi45NjQtLjQ2LTYuNTk0LTEuMTQtOS43OTctMS43NC0yLjM2NS0uNDQyLTQuNDA3LS44MjMtNS42Mi0xLjAxMy0uNzEyLS4xMDYtMS4zMzYtLjE2LTEuOTA0LS4xNi0zLjk0NyAwLTQuNzE3IDIuNjg4LTUuMzQgNC44NS0uNDE3IDEuNDYtLjg5IDMuMTE0LTIuMjMgNC45MS0yLjQxMyAzLjIyNy03LjA5OCA1LjQ4My0xMS4zOTQgNS40ODMtMi43NDggMC01LjE1LS44NzctNy4xNC0yLjYwNS01LjYxMy00Ljg3NS00LjctMTAuNjMtNC4wNS0xMi44OCAxLjEyNy0zLjg5IDMuOTc3LTYuOTE1IDYuOTMtNy4zNjUuOTEzLS4xNCAxLjU5NS0uOTIyIDEuNjAzLTEuODUuMDEtLjkyNS0uNjUyLTEuNzItMS41NjctMS44ODMtMi45MjgtLjUwNS03LjUtLjc1LTEzLjI4LTEuMDYzLTguMzQtLjQ1LTE4LjcyLTEuMDA3LTI5Ljk2LTIuNjEtMTcuMjQ4LTIuNDU1LTIxLjI3NC03LjE1Ny0yMi4xNC05Ljc0LTEuMjU0LTMuNzU2IDIuMzYtNy41MjcgMi4zOTYtNy41NjQuNDkyLS40OS42NzItMS4yMS40Ny0xLjg3My0uMTk2LS42NjQtLjc0LTEuMTY3LTEuNDItMS4zMDgtNDguODQzLTEwLjI0LTU2LjA3My00OC45NzItNTYuMTQtNDkuMzYzLS4xNTctLjkwNi0uOTQyLTEuNTY2LTEuODYyLTEuNTY2LTExLjk3LS4wMDItMjkuMzA0LTIuNDQ1LTMwLjM1Mi03Ljg2Ni0uNjE4LTMuMjEuMDI2LTYuMDEgMS45NzctOC41NjUgNy42OTctMTAuMDggMzIuMTYtMTIuMDQ3IDMyLjQwNi0xMi4wNjUuODQyLS4wNjMgMS41NC0uNjc1IDEuNzEtMS41MDMuMTcyLS44MjQtLjIyNy0xLjY2My0uOTczLTIuMDU1LS4xNzUtLjA5Mi0xNy44MTgtOS40MDUtMzkuNDk4LTI2LjIwNS0yMC44OC0xNi4xNzMtMjUuMzU0LTIyLjEzNS0yNS44MDMtMjYuNTA3LS4zOTQtMy44MTggNi41NTItNS4zNzcgNi42Mi01LjM5My41OS0uMTIgMS4wODYtLjUyIDEuMzM4LTEuMDY4LjI0OC0uNTQ3LjIyMy0xLjE4LS4wNy0xLjcwNC0yMi42ODctNDAuNDQ0LTIwLjEzNC01My4zNS0xNy45ODMtNTcuMDIgMS4xNTgtMS45OCAzLjA4OC0yLjk4NyA1LjczNy0yLjk4NyA1Ljk2MyAwIDE0LjI2IDUuMDc1IDE4LjQ5IDExLjMxLjM2NS41MzQuOTU3LjgzIDEuNTY1LjgzLjMxMyAwIC42MjctLjA3Ny45MTUtLjIzOC44NTUtLjQ3MiAxLjIwOC0xLjUyLjgxMy0yLjQxNUM1LjQ5IDI1NC45MzYgOC4wNSAyMTIuNzMyIDguMTcyIDIxMC45NjRjLjI0Ni0zLjU4NSAxLjA2OC01LjIyIDEuNzMtNS4yMi45NDcgMCAyLjY0IDEuMzg3IDMuNSAyLjM4NS4zNjYuNDMuODk3LjY2IDEuNDM3LjY2LjI1OCAwIC41MjQtLjA1My43NzItLjE2Ni43NjMtLjM0MyAxLjIxLTEuMTQ3IDEuMDk4LTEuOTc3LTQuMTA4LTMwLjMwOC0yLTQ5LjUzOCAxLjM0NC01Ny40M2wuMTM2LS4yOTNjLjkwMy45MjggMi4zNTIgMy42NzMgMy4zMDggNi4zNjcuMjcyLjc2Ljk5IDEuMjYgMS43OCAxLjI2bC4xNy0uMDFjLjg1Ny0uMDc1IDEuNTU1LS43MiAxLjY5Ni0xLjU3MiA0LjczNy0yOC40MDMgMTcuMjctNTUuNjM1IDMxLjE5LTY3Ljc1NyAyLjYwMy0yLjI3IDQuMjMyLTIuNzQzIDUuMTM4LTIuNzQzLjQzNSAwIDEuMDk4LjA5MyAxLjgyNC44OTMgNC4wOSA0LjUzNSAzLjM1IDIxLjM2OCAyLjcxNyAyNy40NzMtLjA5Ny45NC41MTYgMS44MSAxLjQzNiAyLjAzMi4xNDYuMDM2LjI5NS4wNTQuNDQzLjA1NC43NjUgMCAxLjQ3NC0uNDY3IDEuNzYtMS4yMDcgMjAuNjI2LTUyLjk5NyA1My41ODYtODAuNTkgNzcuNjA0LTk0LjQwNUMxNjguODkgNi44NjUgMTg3LjI2IDMuMDc2IDE5Mi45MTcgMi4xNDNjLjM2MiA5Ljg0NC0xMy40NTggMzUuMzc2LTE5LjE2MiA0NC45MzMtLjM4LjYzNi0uMzU0IDEuNDM3LjA3IDIuMDQ0LjM2LjUxNy45NDMuODEzIDEuNTYuODEzbC4zMzItLjAyOCAxMS42Ni0yLjExN2MuNjg3LS4xMjggMS4yNS0uNjIgMS40NjMtMS4yODggMi4xNzctNi44NCA4LjIwNS03LjU4IDEwLjY5NS03LjU4IDUuOTEgMCAxMi41ODYgMy44MTMgMTMuNTMzIDEwLjE5LjY0NyA0LjM3My0uMzcgOC4zNzMtMi44NjQgMTEuMjY1LTIuMjY0IDIuNjIyLTUuNjA0IDQuMTI4LTkuMTYgNC4xMjgtMi40MTUgMC00Ljg5Ny0uNzAyLTcuMTczLTIuMDI2LS4yOS0uMTY2LS42Mi0uMjU2LS45NTMtLjI1NmwtLjA4OC4wMDRjLTEwLjkzOC41Mi0yMi40MzggNi44OTUtMzAuODM3IDExLjU0N2wtLjY3OC4zNzdjLTguNTA0IDQuNzA2LTU0Ljg1IDU1LjIyLTU2LjgxOCA1Ny4zNjgtLjYyNy42OC0uNjY2IDEuNzEzLS4wOTUgMi40NDIuMzcuNDcuOTIzLjcyMyAxLjQ4OC43MjMuMzEgMCAuNjItLjA3My45MS0uMjMyIDYuMDYtMy4zMjMgMTEuMjQ3LTUuMDA1IDE1LjQxNC01LjAwNSA1Ljk3NCAwIDguNjcgMy41ODUgOS44OCA2LjU5Mi4yNTMuNjMzLjgzIDEuMDggMS41MDUgMS4xN2wuMjUuMDE2Yy41ODcgMCAxLjE0Ni0uMjczIDEuNTA1LS43NSAxOS40NDQtMjUuNzggNDQuODgyLTQ3LjEzNyA3My41NjItNjEuNzU1IDMwLjA3NS0xNS4zMzIgNjIuNTYtMjMuMTA2IDk2LjU1Ni0yMy4xMDYgMzQuMjY0IDAgNjYuOTggNy44OTMgOTcuMjM4IDIzLjQ1IDI4Ljg2IDE0Ljg0NyA1NC4zODIgMzYuNSA3My43OTQgNjIuNjI3LjM2OC40OTMuOTM2Ljc2NSAxLjUxNy43NjUuMyAwIC42LS4wNy44OC0uMjE3LjgyMy0uNDMyIDEuMjEtMS40MDIuOTEyLTIuMjgyLTIuODI3LTguMzM0LTMuMS0xNC4wMDQtMi4xMi0xNS45MjYuMjA4LS40MTIuMzg4LS40NjcuNDU2LS40ODguMjc3LS4wODcuNjItLjEzIDEuMDItLjEzIDIuMzEyIDAgOC4zNjUgMS41MSAyMi45MzUgMTEuNjIuMzI2LjIyNS43MDIuMzM4IDEuMDc0LjMzOC41MTggMCAxLjAyNi0uMjEyIDEuMzk1LS42MTMuNjQtLjY5OC42NjctMS43Ni4wNjMtMi40ODQtMi45ODctMy42LTUuOS03LjE2NS04Ljc0My0xMC42NC0xMS45Ni0xNC42MzQtMjIuMjktMjcuMjctMzEuOTMyLTM1LjI4Mi0xMy40OS0xMS4wMTctMjQuOTc3LTEzLjkwNS0zMS4xNS0xNS40NTdsLS45MzQtLjIzNGMtLjE1Ni0uMDQtLjMxMy0uMDYtLjQ3Mi0uMDYtLjMxNiAwLS42MzIuMDgtLjkxMy4yNC0xLjY0My45MS0zLjY1IDEuMzkyLTUuODEgMS4zOTItMy45MyAwLTcuNzgtMS41ODQtMTAuMjktNC4yMzctMi4yNDYtMi4zNzQtMy4zMy01LjUwNS0zLjEzNS05LjA1NC4zNzQtNi43ODQgNS4yMi0xMS41MiAxMS43ODQtMTEuNTIgMS40NiAwIDIuOTY1LjIzNSA0LjQ3My43MSAzLjgwMiAxLjE5IDYuNzYgNC4xNyA3LjU0IDcuNTk4LjQ4NiAyLjE0IDMuMDY4IDIuODQ4IDUuODAyIDMuNiAxLjA0LjI4OCAyLjEyLjU4NCAyLjgzNy45MDUuMjUyLjExMy41MTMuMTY2Ljc3Ni4xNjYuNTY1IDAgMS4xMTYtLjI1IDEuNDgzLS43MTcuNTM4LS42OC41NDYtMS42NC4wMTQtMi4zMjUtMTQuMTc2LTE4LjQxNi0zMC4xMS00NS45NTYtMjcuOC01MC42NDguMDM2LS4wNzQuMDktLjE4LjQ2LS4yMDQgNTEuOTM1IDkuNSA4NC4zNjUgNDcuNDU2IDEwMi40MzIgNzcuNjQgMTkuNjkgMzIuOTA0IDI3LjA4NyA2My45ODYgMjcuMTU3IDY0LjI5Ny4yMDMuODYuOTY4IDEuNDYgMS44NCAxLjQ2bC4xNi0uMDA1Yy45MzQtLjA4IDEuNjctLjgzIDEuNzI3LTEuNzY4IDEuMDk2LTE3LjgyNCA1LTM2LjUwNyA3LjYxMy00MC4zODYgMTYuMjggMTIuMjE3IDIzLjYwOCA1MC40MyAyMy42OCA1MC44Mi4xNDMuNzU2LjcyNyAxLjM1MiAxLjQ3OCAxLjUwNy4xMjcuMDI1LjI1NS4wMzcuMzguMDM3LjYyIDAgMS4yMTMtLjMwNSAxLjU3LS44MzMgMi41NDMtMy43ODMgMy45NzUtNC4wNzcgNC4zNTItNC4wNzcuMjYgMCAyLjU4Ny4yOTQgNC42NiAxMC40ODcgMS4zNTUgNi42NzcgMi4wOTUgMTUuMDM1IDIuNjMzIDIxLjEzNWwuMjE4IDIuNDM3YzYuNTYgNzIuMDQtMTcuNTU0IDEzNS44ODQtMTcuOCAxMzYuNTItLjM1LjkxNi4wNiAxLjk1Mi45NDQgMi4zOC4yNjYuMTI1LjU0NS4xODQuODIyLjE4NC42NSAwIDEuMjc4LS4zMzIgMS42MjctLjkyOCA2Ljc5NC0xMS41NCAxNC44NzItMjEuNjYgMTcuMjg4LTIxLjY2IDIwLjU3OCAyNy41NC0yMy43NzMgODAuMTg1LTI0LjIyIDgwLjcxNS0uNDA1LjQ3LS41NSAxLjExMi0uMzkyIDEuNzEzLjE2Mi42LjYwOCAxLjA4MyAxLjE5MiAxLjI5MyA1LjAzIDEuNzkgNy42NyA0LjEzOCA3Ljg0IDYuOTguNjc4IDExLjUwMy0zMi44OTQgMzAuNzQtNDUuODg2IDM3LjE4Mi0uNzI4LjM2LTEuMTQzIDEuMTQzLTEuMDM2IDEuOTQ1LjEwOC44MDIuNzEyIDEuNDQ2IDEuNTA4IDEuNjA0IDIwLjczIDQuMDc3IDI0LjA4IDguNzYgMjQuMjM2IDExLjE5LjM4IDYuMDM0LTE2LjU4MyAxNC40MzQtMjguNzQ4IDE4LjQ3LS43NDQuMjQ4LTEuMjYuOTMyLTEuMjkyIDEuNzItMS4wOSAyOC4xMzMtNDEuNzggMzkuOTItNTUuMTUzIDQzLjc5Ni0xLjc0Ny41MDUtMy4wMDguODctMy43NzUgMS4xNTItLjg1LjMxLTIuODM3IDEuMDQtMi43MyAyLjg5Ny4xMSAxLjk4IDIuMTY2IDIuNDggNS41NyAzLjMwNSAyLjE2NC41MjYgNi42NjQgMS42MiA3LjIzNSAyLjgyLjAyOC4wNTYuMDAyLjE3LS4wNzguMzM3LTIuNTIyIDUuMzM4LTExLjQwOCAxMS40NDctMTYuNjcgMTMuNDc3LTkuNDIzIDMuNjMyLTE5LjI4NCA1LjQ3My0yOS4zMSA1LjQ3My0xMC45MTMgMC0xOC4wOTctMi4yNTQtMTguMTctMi4yNzhsLS4yNS0uMDY0Yy0uNDM2LS4wNzQtLjc5OC0uMTEyLTEuMTE3LS4xMTItMS4yMTcgMC0xLjg1Ni41Ni0yLjE3NSAxLjAzOC0uNzUgMS4xMDUtLjI4NSAyLjI2LjE2MiAzLjM3OC4yODUuNzA1LjYwNCAxLjUwNS43OCAyLjQ0OC44NTYgNC41MTctLjkzIDguNzY3LTQuODk4IDExLjY2My0xLjUzNSAxLjEyNS00LjA5NCAxLjgyMi02LjY3OCAxLjgyMi0xLjYxNSAwLTQuMDEtLjI3Ni02LjIzMi0xLjU5NS0zLjE5LTEuODk3LTUuMTYtNS4zMS01LjY5Ni05Ljg3OC0uMzg3LTMuMjk3LTIuMzA4LTUuMTg1LTUuMjY1LTUuMTg1LTEuMjI0IDAtMi42NDguMzEyLTQuMzUuOTU3LS4zOTMuMTUtLjgxNS4yOTYtMS4yNDMuNDQ1LTIuNTgzLjkwNi01LjI1NiAxLjg0NS01LjQ5NiA0LjEzNC0uMjIzIDIuMTMgMS45NzQgMy40NjIgMi42OTcgMy45LjcyLjQzNyAxLjk2OCAyLjAzNyAxLjc3NiAzLjUyNC0uMjIgMS43MTQtMi4zODggMi43MDUtNC4xNjcgMy4yMzgtNi4yNTUgMS44NjctMTcuNzggMy4wNzItMjkuMzcgMy4wNzItMi43MjcgMC01LjQ4LS4wNjUtOC4xNzgtLjE5MmwtLjA4OC0uMDAzYy0uODE2IDAtMS41NDQuNTI3LTEuOCAxLjMxLS4yNi44MTMuMDU2IDEuNy43NyAyLjE2NCA5LjczMyA2LjM0IDE5LjQyNyAxMC4zIDI3Ljk4MiAxMy43OTYgNy4xMTUgMi45MDcgMTMuMjg3IDUuNDI2IDE3LjY4NSA4LjYxNy0yLjg3IDIuNTE0LTE5LjM5OCA3LjAyNy0zMC41MTQgNy4wMjciIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNNDk1LjE1MyAyMTcuMjY1cy0yLjY0NC0zNy40MzgtNDguMzE0LTg4LjE2YzAgMC01OS41NzcgMzAuNzA0LTE0Mi45NCAzMC43MDQtODMuMzg0IDAtMTQwLjQ5Mi0zMC43MDYtMTQwLjQ5Mi0zMC43MDZzLTM1LjI5IDMxLjkxLTQ4LjMxNSA4OC4xNmMwIDAgMTM0LjkgMTEwLjczMiAxMzQuOSAyMzQuNDY1IDAgMCA1NS4xODIgMjAuODY4IDExNi45MDgtMS45NyAwIDAgMTEuNDctMTQ0LjQ5NSAxMjguMjUzLTIzMi40OTUiIGZpbGw9IiNkYjFiMzAiLz48ZyBjbGlwLXBhdGg9InVybCgjYSkiIHRyYW5zZm9ybT0ibWF0cml4KC4xMyAwIDAgLS4xMyAwIDU5Mi45MykiPjxwYXRoIGQ9Ik0yMjgzLjQ0IDgzNi42OGMtMjAxLjU4IDAtMzk0LjYyIDM2LjkxLTU3Mi41OSAxMDQuMjktMi4yNiAyLjQ0LTQuNDEgNC43NS02LjQ2IDYuOS00LjU3IDQuODEtNS4xOSAxMi4xMTgtMS41MiAxNy42NSAyLjY5IDQuMDIgNy4xNyA2LjI4IDExLjc5IDYuMjggMS42OSAwIDMuNDMtLjMgNS4wOC0uOTMgMTgyLjg3LTcwLjA5IDM3NS4wOC0xMDUuNjUgNTcxLjMxLTEwNS42NSAxOTkuMTEgMCAzOTQuMDUgMzYuNjQgNTc5LjM3IDEwOC44NyAxLjY4LjY0OCAzLjQyLjk4IDUuMTMuOTggNSAwIDkuNzktMi42NDggMTIuMzctNy4yMyAyLjYzLTQuNjUgMi4zNi0xMC4yMy0uMzYtMTQuNTQtMTg2LjY0LTc1LjIyMi0zOTAuNTUtMTE2LjYyLTYwNC4xMi0xMTYuNjJtLTcwNy4xMyAxNjIuMzljLTk1LjM4IDQ2LjQ1LTE4NS41OSAxMDIuMDUtMjY5LjMzIDE2NS41OC0uNjcgMy40Mi0xLjMxIDYuODUtMS45MSAxMC4zMS0xLjAyIDUuNzMgMS41OCAxMS41MSA2LjU2IDE0LjU1IDIuMjkgMS40IDQuODMgMi4wNyA3LjM5IDIuMDcgMy4wMyAwIDYuMDQtLjk2IDguNTYtMi44OCA3Ni43Ni01OC4xNSAxNTkuODctMTA5Ljg3IDI0Ny4wNS0xNTMuNzEgNi4yLTMuMTIgOS4yMy0xMC4yOCA3LjE2LTE2LjktMS41OC01LjAyLTMuNDktMTEuNDYtNS40OC0xOS4wMm0xNDE1LjI3LjVjLS42OS43OS0xLjQ2IDEuNDUtMi4zIDEuOTYtNC40IDIuNzItNi45OCA3LjYxLTYuNzUgMTIuNzQuMjYgNS4xOCAzLjMxIDkuNzkgNy45NCAxMi4wOCA5OC4xMSA0Ny44NiAxOTIuMjcgMTA2LjY4IDI3OS44NiAxNzQuNzggMi41NiAxLjk5IDUuNjMgMi45OSA4LjcgMi45OSAzLjEzIDAgNi4yNS0xLjA1IDguODMtMy4xIDMuMjgtMi42MSA1LjE0LTYuNDQgNS4zMi0xMC40Mi05Mi43NS03NC4yNC0xOTMuNzctMTM4LjQzLTMwMS42LTE5MS4wM20zNDYuNjYgMjI4LjQ1Yy0xLjIzIDEuMDItMi40OCAyLjAzLTMuNzUgMy4wNS0zLjMgMi42Ny01LjI4IDYuNjUtNS4zMiAxMC44OS0uMDYgNC4yMyAxLjc4IDguMjcgNS4wMiAxMS4wMSA2NC43MSA1NC44IDEyNC44MyAxMTMuODEgMTYwLjc3IDE1Ny44OCAyLjc5IDMuNDEgNi44NSA1LjIxIDEwLjk4IDUuMjEgMi41OSAwIDUuMTktLjcgNy41Mi0yLjE2IDEuOTEtMS4xOSAzLjQ1LTIuNzggNC41Ni00LjU5LTU1LjA4LTY1LjA1LTExNS4yMS0xMjUuNjctMTc5Ljc4LTE4MS4yOW0tMjEzMC40NiAxOC4yNmMtNjguMSA2MC43LTEzMC45NyAxMjcuMDEtMTg3Ljk5IDE5OC4zMS0uMjIgMS4xOC0uNDUgMi4zNC0uNjcgMy40OC0xIDUuMDktMS45MyA5LjkyLTIuMzggMTQuMjgtLjYxIDYuMTggMi44NCAxMi4wMiA4LjU2IDE0LjQ2IDEuOC43NyAzLjY4IDEuMTUgNS41NSAxLjE1IDQuMDYgMCA4LjA0LTEuNzYgMTAuOC01IDM3LjczLTQ0LjMyIDEyNi4wOS0xNDguMSAxNzkuOS0xOTYuNjUgMi44OC0yLjYxIDQuNTgtNi4yNSA0LjY4LTEwLjEzLjExLTMuODgtMS4zOC03LjYyLTQuMTEtMTAuMzctNC4xNy00LjIyLTkuMDQtNy40NC0xNC4zNC05LjUzbTIzMzguMDQgMTk2Ljc3Yy0yLjQ2LjY3LTQuNzUgMi02LjYxIDMuOTktNC44MSA1LjE1LTUuMSAxMy4wNS0uNzIgMTguNTIgMzguOTcgNDguNjkgNzUuMjUgOTkuODkgMTA3Ljg5IDE1Mi4xNSAyLjYyIDQuMTkgNy4yMiA2LjY1IDEyLjAyIDYuNjUgMS4wOSAwIDIuMTQtLjEgMy4yMy0uMzYgMi45NC0uNjggNS41LTIuMjcgNy40MS00LjQzLTM3LjItNjEuNjQtNzguMzktMTIwLjYxLTEyMy4yMi0xNzYuNTJtLTI1NTMuMDkgNTAuMzJjLTIuNDU3IDAtNC45MzMuNjYtNy4xNTYgMS45Ny0yLjUwNCAxLjQ3LTUuMDk0IDIuODQtNy43NTQgNC4wOS00MS4xNiA1Ni4yMS03OC43NTcgMTE1LjE0LTExMi41MDQgMTc2LjU0LjU5OCAzLjcgMS4zIDcuMDggMi4xMjIgMTAuMDcgMS41MDMgNS41NSA2LjI0MiA5LjY0IDExLjk2IDEwLjMzbDEuNjc2LjExYzUuMTAyIDAgOS44ODctMi43NSAxMi40MDYtNy4zIDI0LjIyMy00My42NCA4OS45MTUtMTQyLjQ5IDExMS0xNzMuNjggMy43My01LjQ4IDMuMTQtMTIuODItMS4zOS0xNy42NC0yLjc2LTIuOTQtNi41MjctNC40OS0xMC4zNi00LjQ5bTI3NjguNDMgMzAyLjY1Yy0yLjk1LjY3LTUuNjcgMi4yOC03LjcgNC42OS0zLjQ5IDQuMTMtNC4zMSA5LjkxLTIuMTIgMTQuODYgNzAuMjkgMTU4LjQ4IDExMy45NyAzMjYuNjQgMTI5LjgxIDQ5OS44Mi42MSA2LjUxIDUuNTYgMTEuNzYgMTIuMDMgMTIuNzNsMi4xMS4xN2MuMTUgMCAuMzEgMCAuNDYtLjAxLTE0LjQ2LTE4OC4yOC02MS4xNS0zNjcuNTQtMTM0LjU5LTUzMi4yNk03NTUuMTQ1IDE5MjMuODNjLTMzLjYyNSA5Ni45OC01OC4yOTcgMTk4LjIyLTcyLjk5IDMwMi42IDEuMzI1IDEuNzkgMi4zNzYgMy40NyAzLjEzNCA0Ljk4IDIuNDMzIDQuODggNy4zNjYgNy44NCAxMi42ODMgNy44NGwyLjExNy0uMTVjNi4wNzgtLjkxIDEwLjg2My01LjY2IDExLjg2LTExLjcxIDE1Ljk4NC05Ni40OSA0MS45ODQtMjA1LjI1IDY2LjI3Ny0yNzcuMDYgMi40MzMtNy4xOC0xLjIzLTE0Ljk5LTguMy0xNy43NC00Ljk3OC0xLjk0LTkuOTI3LTUuMDItMTQuNzgyLTguNzZtLTcwLjQyNiA0MDguNjVjLTIuNTQ4IDAtNS4wODcuNjgtNy4zNTMgMi4wNi0yLjI3NyAxLjM3LTQuNjI1IDIuNzktNy4wNDMgNC4yMi0yLjY3NiAzOC4wMi00LjAzIDc2LjM2LTQuMDMgMTE1LjA2IDAgNy4wOS4wNDYgMTQuMTIuMTM2IDIxLjE4IDIuNDA2LjQ3IDQuNjk1LjcyIDYuODUuNzIgNS40MiAwIDEwLjI1LTEuMzYgMTQuMzE4LTQuMDMgMy45Ni0yLjYzIDYuMzUtNy4wNSA2LjM1LTExLjgxLjA2OC0zMi43IDIuMzk2LTczLjMyIDQuOTE1LTExMi4zMi4zMzYtNS4yNy0yLjI5My0xMC4yNy02Ljc5Ny0xMy4wMi0yLjI0Ni0xLjM4LTQuNzkzLTIuMDYtNy4zNDctMi4wNm0zMjE0LjE4IDQ3LjU1Yy0uNC4wNS0uODEuMTItMS4yMS4yLTYuNzYgMS40Ny0xMS40OCA3LjU2LTExLjIxIDE0LjQ2Ljc5IDE4LjczIDEuNyA0My4zOSAxLjcgNjguMTMgMCA4NS42OS03LjE2IDE3Mi45Ni0yMS4yOCAyNTkuMzMtMS4wNyA2LjU2IDIuNTYgMTIuOTggOC43NCAxNS40NmwuMDkuMDNjMTYuMzEtOTIuMTMgMjQuODItMTg3LjAxIDI0LjgyLTI4My44MiAwLTI0Ljc1LS41NS00OS4zMi0xLjY1LTczLjc5TTY4MS44NTUgMjYxNy44NGMtMi4xNjQgMC00LjUyLjIzLTcuMjcuNzUgNC41MzYgNDQuODcgMTAuODkyIDg5LjA3IDE5LjAyNCAxMzIuNzguMzI4LjMxLjY2LjYyLjk5NS45NCAyLjY4OCAyLjU0IDYuMTggMy44NSA5LjY5NiAzLjg1IDIuMzEgMCA0LjYyMi0uNTUgNi43MzUtMS42OSA1LjM4My0yLjg5IDguMy04LjkgNy4yNDItMTQuOTEtNi42MS0zNy43OC0xMS41Mi03Mi0xNS4wNTQtMTA0LjY1LS4xNS0xLjQ2LS41MjgtMi44OC0xLjEyNS00LjIxLTMuNjYtOC4yOS0xMC44NjQtMTIuODYtMjAuMjQzLTEyLjg2bTMxMjEuMTA1IDM5MC41NWMtMS4xNi4yLTIuMjguNC0zLjM2LjYtNC44OS45Mi04Ljk4IDQuMzItMTAuNzEgOS0zMC44MSA4My4wOS02OS41NCAxNjUuMS0xMTUuMDkgMjQzLjcxLTMuMDIgNS4xOS0yLjQgMTEuNjMgMS4zNSAxNi4xNiA1MC40OS04NS4xIDkzLjQxLTE3NS4yNCAxMjcuODEtMjY5LjQ3bS0zMDE5LjUwMyA1MC45YzM0LjMgODQuOTEgNzUuNjIgMTY2LjI1IDEyMy4yMDcgMjQzLjI4LjIxNS4wMS40My4wMi42NDUuMDIgMi45NjMgMCA1LjkyOC0uOTMgOC40Ny0yLjgyIDUuODIyLTQuMzYgNy4zODgtMTIuMzkgMy42Ni0xOC42MS0zOC42LTY0LjU5LTcyLjU2NS0xMzEuNTItMTAwLjk0LTE5OC45NS0uNTI3LTEuMjctMS4yNS0yLjQ1LTIuMTM3LTMuNTEtNy44NTUtOS41NS0xNy43LTE1Ljg0LTI5LjI5LTE4LjctMS4yMzMtLjMtMi40NC0uNTQtMy42MTYtLjcxbTI4MDEuNzAzIDM0OS4zMmMtNC4zNiAwLTguNjIgMi4wNC0xMS4zOCA1Ljc0LTE0NS41OSAxOTUuOTQtMzM3IDM1OC4zNS01NTMuNDUgNDY5LjY5LTIyNi45NCAxMTYuNjktNDcyLjMgMTc1Ljg5LTcyOS4yOCAxNzUuODktMjU0Ljk3IDAtNDk4LjYxLTU4LjMtNzI0LjE3LTE3My4yOS0yMTUuMS0xMDkuNjQtNDA1Ljg5LTI2OS44MS01NTEuNzItNDYzLjE2LTIuNjktMy41OC02Ljg4LTUuNjQtMTEuMjktNS42NGwtMS44OC4xM2MtNC44LjYzLTguOTI3IDMuNjgtMTAuOTcgOC4wMiAyOTUuMTIgMzkxLjcyIDc2NC4yIDY0NC45OCAxMjkyLjQyIDY0NC45OCA1MzUuNzggMCAxMDEwLjc2LTI2MC42MyAxMzA1LjAyLTY2MS45Ny0xLjA5LS4yNi0yLjE5LS4zOS0zLjMtLjM5IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTIyOTEuMDUgODY1LjIyYy0xOTYuMjMgMC0zODguNDQgMzUuNTYtNTcxLjMxIDEwNS42NS0xLjY1LjYzLTMuMzkuOTMtNS4wOC45My00LjYyIDAtOS4xLTIuMjYtMTEuNzktNi4yOC0zLjY3LTUuNTMyLTMuMDUtMTIuODQgMS41Mi0xNy42NSAyLjA1LTIuMTUgNC4yLTQuNDYgNi40Ni02LjktNDUuOTIgMTcuMzktOTAuNzMgMzYuNzYtMTM0LjU0IDU4LjEgMS45OSA3LjU2IDMuOSAxNCA1LjQ4IDE5LjAyIDIuMDcgNi42Mi0uOTYgMTMuNzgtNy4xNiAxNi45LTg3LjE4IDQzLjg0LTE3MC4yOSA5NS41Ni0yNDcuMDUgMTUzLjcxLTIuNTIgMS45Mi01LjUzIDIuODgtOC41NiAyLjg4LTIuNTYgMC01LjEtLjY3LTcuMzktMi4wNy00Ljk4LTMuMDQtNy41OC04LjgyLTYuNTYtMTQuNTUuNi0zLjQ2IDEuMjQtNi44OSAxLjkxLTEwLjMxLTM0LjE1IDI1LjkxLTY3LjI1IDUzLjE1LTk5LjIgODEuNjMgNS4zIDIuMDkgMTAuMTcgNS4zMSAxNC4zNCA5LjUzIDIuNzMgMi43NSA0LjIyIDYuNDkgNC4xMSAxMC4zNy0uMSAzLjg4LTEuOCA3LjUyLTQuNjggMTAuMTMtNTMuODEgNDguNTUtMTQyLjE3IDE1Mi4zMy0xNzkuOSAxOTYuNjUtMi43NiAzLjI0LTYuNzQgNS0xMC44IDUtMS44NyAwLTMuNzUtLjM4LTUuNTUtMS4xNS01LjcyLTIuNDQtOS4xNy04LjI4LTguNTYtMTQuNDYuNDUtNC4zNiAxLjM4LTkuMTkgMi4zOC0xNC4yOC4yMi0xLjE0LjQ1LTIuMy42Ny0zLjQ4LTE0LjM3IDE3Ljk4LTI4LjM2IDM2LjI1LTQxLjk3IDU0Ljg0IDIuNjYtMS4yNSA1LjI1LTIuNjIgNy43NTQtNC4wOSAyLjIyMy0xLjMxIDQuNy0xLjk3IDcuMTU2LTEuOTcgMy44MzMgMCA3LjYgMS41NSAxMC4zNiA0LjQ5IDQuNTMgNC44MiA1LjEyIDEyLjE2IDEuMzkgMTcuNjQtMjEuMDg1IDMxLjE5LTg2Ljc3NyAxMzAuMDQtMTExIDE3My42OC0yLjUyIDQuNTUtNy4zMDQgNy4zLTEyLjQwNiA3LjNsLTEuNjc2LS4xMWMtNS43MTgtLjY5LTEwLjQ1Ny00Ljc4LTExLjk2LTEwLjMzLS44Mi0yLjk5LTEuNTI0LTYuMzctMi4xMjItMTAuMDctNDMuMzM2IDc4Ljg0LTgwLjMgMTYxLjctMTEwLjE3IDI0Ny44NiA0Ljg1NCAzLjc0IDkuODAzIDYuODIgMTQuNzggOC43NiA3LjA3IDIuNzUgMTAuNzM0IDEwLjU2IDguMyAxNy43NC0yNC4yOTIgNzEuODEtNTAuMjkyIDE4MC41Ny02Ni4yNzcgMjc3LjA2LS45OTcgNi4wNS01Ljc4MiAxMC44LTExLjg2IDExLjcxbC0yLjExNy4xNWMtNS4zMTcgMC0xMC4yNS0yLjk2LTEyLjY4NC03Ljg0LS43Ni0xLjUxLTEuODEtMy4xOS0zLjEzNC00Ljk4LTUuMjE1IDM3LjA0LTkuMTcyIDc0LjUyLTExLjgzMiAxMTIuMzMgMi40MTgtMS40MyA0Ljc2Ni0yLjg1IDcuMDQzLTQuMjIgMi4yNjYtMS4zOCA0LjgwNS0yLjA2IDcuMzUyLTIuMDYgMi41NTMgMCA1LjEuNjggNy4zNDYgMi4wNiA0LjUwNCAyLjc1IDcuMTMzIDcuNzUgNi43OTcgMTMuMDItMi41MiAzOS00Ljg0NyA3OS42Mi00LjkxNCAxMTIuMzIgMCA0Ljc2LTIuMzkgOS4xOC02LjM1MiAxMS44MS00LjA2NyAyLjY3LTguOSA0LjAzLTE0LjMxNyA0LjAzLTIuMTU1IDAtNC40NDQtLjI1LTYuODUtLjcyLjYyIDQ4LjM3IDMuMzc1IDk2LjM0IDguMTU2IDE0My41OSAyLjc1LS41MiA1LjEwNS0uNzUgNy4yNy0uNzUgOS4zNzggMCAxNi41ODIgNC41NyAyMC4yNDIgMTIuODYuNTk3IDEuMzMuOTc2IDIuNzUgMS4xMjUgNC4yMSAzLjUzNSAzMi42NSA4LjQ0NSA2Ni44NyAxNS4wNTQgMTA0LjY1IDEuMDYgNi4wMS0xLjg2IDEyLjAyLTcuMjQyIDE0LjkxLTIuMTEzIDEuMTQtNC40MjYgMS42OS02LjczNCAxLjY5LTMuNTE1IDAtNy4wMDctMS4zMS05LjY5NS0zLjg1LS4zMzUtLjMyLS42NjctLjYzLS45OTYtLjk0IDE5Ljg0IDEwNi42NSA1MC4xNzUgMjA5LjczIDg5Ljg0NyAzMDcuOTIgMS4xNzYuMTcgMi4zODMuNDEgMy42MTcuNzEgMTEuNTkgMi44NiAyMS40MzQgOS4xNSAyOS4yOSAxOC43Ljg4NiAxLjA2IDEuNjEgMi4yNCAyLjEzNiAzLjUxIDI4LjM3NSA2Ny40MyA2Mi4zNCAxMzQuMzYgMTAwLjk0IDE5OC45NSAzLjcyOCA2LjIyIDIuMTYyIDE0LjI1LTMuNjYgMTguNjEtMi41NDIgMS44OS01LjUwNyAyLjgyLTguNDcgMi44Mi0uMjE2IDAtLjQzLS4wMS0uNjQ2LS4wMiAyNi4yNjIgNDIuNTEgNTQuMzkgODMuNjUgODQuMzU2IDEyMy40MiAyLjA0My00LjM0IDYuMTctNy4zOSAxMC45Ny04LjAybDEuODgtLjEzYzQuNDEgMCA4LjYgMi4wNiAxMS4yOSA1LjY0IDE0NS44MyAxOTMuMzUgMzM2LjYyIDM1My41MiA1NTEuNzIgNDYzLjE2IDIyNS41NiAxMTQuOTkgNDY5LjIgMTczLjI5IDcyNC4xNyAxNzMuMjkgMjU2Ljk4IDAgNTAyLjM0LTU5LjIgNzI5LjI4LTE3NS44OSAyMTYuNDUtMTExLjM0IDQwNy44Ni0yNzMuNzUgNTUzLjQ1LTQ2OS42OSAyLjc2LTMuNyA3LjAyLTUuNzQgMTEuMzgtNS43NCAxLjExIDAgMi4yMS4xMyAzLjMuMzkgMzAuOTUtNDIuMjIgNTkuODctODUuOTQgODYuNjktMTMxLjE0LTMuNzUtNC41My00LjM3LTEwLjk3LTEuMzUtMTYuMTYgNDUuNTUtNzguNjEgODQuMjgtMTYwLjYyIDExNS4wOS0yNDMuNzEgMS43My00LjY4IDUuODItOC4wOCAxMC43MS05IDEuMDgtLjIgMi4yLS40IDMuMzYtLjYgMzEuNzctODcuMDIgNTYuMjYtMTc3LjQ3IDcyLjc3LTI3MC43NWwtLjA5LS4wM2MtNi4xOC0yLjQ4LTkuODEtOC45LTguNzQtMTUuNDYgMTQuMTItODYuMzcgMjEuMjgtMTczLjY0IDIxLjI4LTI1OS4zMyAwLTI0Ljc0LS45MS00OS40LTEuNy02OC4xMy0uMjctNi45IDQuNDUtMTIuOTkgMTEuMjEtMTQuNDYuNC0uMDguODEtLjE1IDEuMjEtLjItLjc4LTE3LjMxLTEuODMtMzQuNTktMy4xNS01MS43NS0uMTUuMDEtLjMxLjAxLS40Ni4wMWwtMi4xMS0uMTdjLTYuNDctLjk3LTExLjQyLTYuMjItMTIuMDMtMTIuNzMtMTUuODQtMTczLjE4LTU5LjUyLTM0MS4zNC0xMjkuODEtNDk5LjgyLTIuMTktNC45NS0xLjM3LTEwLjczIDIuMTItMTQuODYgMi4wMy0yLjQxIDQuNzUtNC4wMiA3LjctNC42OS0yNy4xNC02MC44OS01Ny45NS0xMTkuODEtOTIuMTItMTc2LjQ1LTEuOTEgMi4xNi00LjQ3IDMuNzUtNy40MSA0LjQzLTEuMDkuMjYtMi4xNC4zNi0zLjIzLjM2LTQuOCAwLTkuNC0yLjQ2LTEyLjAyLTYuNjUtMzIuNjQtNTIuMjYtNjguOTItMTAzLjQ2LTEwNy44OS0xNTIuMTUtNC4zOC01LjQ3LTQuMDktMTMuMzcuNzItMTguNTIgMS44Ni0xLjk5IDQuMTUtMy4zMiA2LjYxLTMuOTktOS4xMS0xMS4zNy0xOC4zOS0yMi42My0yNy44LTMzLjc0LTEuMTEgMS44MS0yLjY1IDMuNC00LjU2IDQuNTktMi4zMyAxLjQ2LTQuOTMgMi4xNi03LjUyIDIuMTYtNC4xMyAwLTguMTktMS44LTEwLjk4LTUuMjEtMzUuOTQtNDQuMDctOTYuMDYtMTAzLjA4LTE2MC43Ny0xNTcuODgtMy4yNC0yLjc0LTUuMDgtNi43OC01LjAyLTExLjAxLjA0LTQuMjQgMi4wMi04LjIyIDUuMzItMTAuODkgMS4yNy0xLjAyIDIuNTItMi4wMyAzLjc1LTMuMDUtMTQuNzgtMTIuNzMtMjkuODItMjUuMjItNDUuMDYtMzcuNDItLjE4IDMuOTgtMi4wNCA3LjgxLTUuMzIgMTAuNDItMi41OCAyLjA1LTUuNyAzLjEtOC44MyAzLjEtMy4wNyAwLTYuMTQtMS04LjctMi45OS04Ny41OS02OC4xLTE4MS43NS0xMjYuOTItMjc5Ljg2LTE3NC43OC00LjYzLTIuMjktNy42OC02LjktNy45NC0xMi4wOC0uMjMtNS4xMyAyLjM1LTEwLjAyIDYuNzUtMTIuNzQuODQtLjUxIDEuNjEtMS4xNyAyLjMtMS45Ni0zNC4wMS0xNi41OS02OC43Mi0zMi4wNC0xMDQuMDItNDYuMjcgMi43MiA0LjMxIDIuOTkgOS44OS4zNiAxNC41NC0yLjU4IDQuNTgyLTcuMzcgNy4yMy0xMi4zNyA3LjIzLTEuNzEgMC0zLjQ1LS4zMzItNS4xMy0uOTgtMTg1LjMyLTcyLjIzLTM4MC4yNi0xMDguODctNTc5LjM3LTEwOC44N200LjA5IDEyOC40MmguMDRjMTM0LjI2IDAgMjkwLjQgMTkuMjcgNDUyLjc1IDc4Ljc0LjM5LjE1LjgyLjMxIDEuMjIuNDUuNDguMTguOTQuMzUgMS40Mi41Mi4zOS4xNS44LjMgMS4xOS40NSAwIDAgODYuMDEgMTA4My43MSA5NjEuODkgMTc0My43MSAwIDAtMTkuODMgMjgwLjc5LTM2Mi4zNiA2NjEuMjEgMCAwLTQ0Ni44Mi0yMzAuMjktMTA3Mi4wMy0yMzAuMjktNjI1LjM5IDAtMTA1My43IDIzMC4yOS0xMDUzLjcgMjMwLjI5cy0yNjQuNjc3LTIzOS4zMy0zNjIuMzYtNjYxLjIxYzAgMCAxMDExLjc1LTgzMC40OCAxMDExLjc1LTE3NTguNDggMCAwIDE3Mi44NS02NS4zOSA0MjAuMTYtNjUuMzloLjAzIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTIyOTUuMTQgOTkzLjY0aC0uMDMuMDNtLjA0IDBjMTM0LjI0LjAwOCAyOTAuNDIgMTkuMjggNDUyLjc1IDc4Ljc0LTE2Mi4zNS01OS40Ny0zMTguNDktNzguNzQtNDUyLjc1LTc4Ljc0bTQ1My45NyA3OS4xOWMuNDguMTguOTQuMzUgMS40Mi41Mi0uNDgtLjE3LS45NC0uMzQtMS40Mi0uNTIiIGZpbGw9IiNkYjFiMzAiLz48L2c+PGcgY2xpcC1wYXRoPSJ1cmwoI2IpIiB0cmFuc2Zvcm09Im1hdHJpeCguMTMgMCAwIC0uMTMgMCA1OTIuOTMpIj48cGF0aCBkPSJNMjI5NS4xNCA5OTMuNjRoLjA0LS4wNG0tLjAzIDBjLTI0Ny4zMSAwLTQyMC4xNiA2NS4zOS00MjAuMTYgNjUuMzkgMCA5MjgtMTAxMS43NSAxNzU4LjQ4LTEwMTEuNzUgMTc1OC40OHMxMDExLjc1LTgzMC40OCAxMDExLjc1LTE3NTguNDhjMCAwIDE3Mi44OS02NS4zODIgNDIwLjE2LTY1LjM5bTQ1Mi44MiA3OC43NGMuMzkuMTUuODIuMzEgMS4yMi40NS0uNC0uMTQtLjgzLS4zLTEuMjItLjQ1bTIuNjQuOTdjLjM5LjE1LjguMyAxLjE5LjQ1IDAgMCA4Ni4wMSAxMDgzLjcxIDk2MS44OSAxNzQzLjcxLTg3NS44OC02NjAtOTYxLjg5LTE3NDMuNzEtOTYxLjg5LTE3NDMuNzEtLjM5LS4xNS0uOC0uMy0xLjE5LS40NSIgZmlsbD0idXJsKCNjKSIvPjwvZz48ZyBjbGlwLXBhdGg9InVybCgjZCkiIHRyYW5zZm9ybT0ibWF0cml4KC4xMyAwIDAgLS4xMyAwIDU5Mi45MykiPjxwYXRoIGQ9Ik0yMjk1LjE0IDk5My42NGgtLjAzYy0yNDcuMjcuMDA4LTQyMC4xNiA2NS4zOS00MjAuMTYgNjUuMzkgMCA5MjgtMTAxMS43NSAxNzU4LjQ4LTEwMTEuNzUgMTc1OC40OCA5Ny42ODMgNDIxLjg4IDM2Mi4zNiA2NjEuMjEgMzYyLjM2IDY2MS4yMXM0MjguMzEtMjMwLjI5IDEwNTMuNy0yMzAuMjljNjI1LjIxIDAgMTA3Mi4wMyAyMzAuMjkgMTA3Mi4wMyAyMzAuMjkgMzQyLjUzLTM4MC40MiAzNjIuMzYtNjYxLjIxIDM2Mi4zNi02NjEuMjEtODc1Ljg4LTY2MC05NjEuODktMTc0My43MS05NjEuODktMTc0My43MS0uMzktLjE1LS44LS4zLTEuMTktLjQ1LS40OC0uMTctLjk0LS4zNC0xLjQyLS41Mi0uNC0uMTQtLjgzLS4zLTEuMjItLjQ1LTE2Mi4zMy01OS40Ni0zMTguNTEtNzguNzMyLTQ1Mi43NS03OC43NGgtLjA0IiBmaWxsPSJ1cmwoI2UpIi8+PC9nPjxwYXRoIGQ9Ik01MjguOTUgMjk4LjQ4NWMyLjEzNi0xLjIyNiAzLjE2My0zLjUxNiA0LjQ4NS02LjExIDEuODMyIDMuOTY4IDIuOSA5LjQ3MyAzLjIxNSAxMi44NDQtMS41MTgtNC41NzYtNC42NDgtNi40My03LjctNi43MzV6bS0yMS44NjctMTYuNzg3Yy4xMjUtMi45NjQuMjIzLTUuOTM4LjIyMy04LjkzNSAwLTExLjU4NC0uOTgtMjIuOTM4LTIuNzktMzQuMDEyIDUuMzQ1IDcuODU2IDE3LjAzIDI3LjQxMyAxOS4yOTQgMzMuOTEyLTYuOTY1LS4xNC0xNC4xNDIgMi41NDgtMTYuNzI3IDkuMDM2em0tNy44NDMgNzcuNzE4Yy0yLjAyNiA1LjY4NS00Ljg3LTMuMDI2LTkuODgyLTEuNzY0IDkuMDIyLTIwLjM0IDE0LjkwNy00Mi40MDMgMTcuMDI3LTY1LjU1NCAxLjU5OCAzLjg5IDYuMDY3IDEwLjAxMyAxNC44OSA5LjY1OC02Ljc3IDcuOTItMTQuMjkzIDM1Ljg5Ny0yMi4wMzUgNTcuNjZ6bS0yNC4xNDggODAuODFjLTEuODYgMy4xNi02LjgzIDguMzQ0LTUuMzM0IDQuNzA4IDQuMzktMTAuNjY1LS4zMTQtMTcuMjU1LS4zMTQtMTcuMjU1IDIuNTEtLjMxMiA1LjMzMy0uOTQgNy41My00LjA3NiAxLjM1Ny0xLjkzMyAxLjI1NiAxMS4yOTItMS44ODIgMTYuNjIzem0tMTMuNjQ4LTM2LjY2OGM1LjA5LTYuMzYyIDkuODE4LTEzLjAxNyAxNC4xNS0xOS45NTQuNjQ3IDYuNTQzIDEuMTk0IDIxLjY5MiAxLjE5NCAyMS42OTItNS42NC01LjU3Ny0xMy0zLjM3LTE1LjM0NC0xLjczOHptLTE5Ljg0MiAzNi45NzRjLS4zMjMtMy4yNi00LjI5LTYuOTM2LTYuOTctOS4wOCA5Ljc0My04LjI1IDE3LjIwNC0xNS45NDIgMjEuMTQyLTIwLjc3LTIuOTMgNi4zMTQgMS4wMjggMTEuODkyIDUuMTU0IDE0LjEtMTAuNDIgMS43NS0xOS4zMjYgMTUuNzUtMTkuMzI2IDE1Ljc1em0tMTQ0LjA4NSAzMy42MzVjLTUzLjg5IDAtMTAzLjUxNC0yMi43NzQtMTQxLjI0LTYwLjQ5OC0zNy43Mi0zNy43NC02MC40OTctODcuMzktNjAuNDk3LTE0MS4zMSAwLTUzLjg4NSAyMC45ODYtMTA0LjU0MyA1OS4wODQtMTQyLjY0MiAzOC4xMDMtMzguMSA4OC43NjItNTkuMDgyIDE0Mi42NTMtNTkuMDgyIDUzLjg4IDAgMTA0LjUzNCAyMC45ODIgMTQyLjYzOCA1OS4wODIgMzguMDk3IDM4LjEgNTkuMDgzIDg4Ljc1NyA1OS4wODMgMTQyLjY0IDAgMTExLjMxMi05MC40OTYgMjAxLjgxLTIwMS43MiAyMDEuODF6bTkxLjkxNiAyNC44OGMtMTAuMzM2IDYuMDc4IDcuNzQ0LTMzLjIxLjEzNy0zNy44ODUgMTMuMDY1LTYuMzc1IDI1LjMzOC0xNC4wODcgMzYuNzA0LTIyLjkyNS03LjUxIDE2LjA4LTE3LjkwNSA0OS42Ny0zNi44NCA2MC44MXptLTM5LjEzNS0zLjg1NmMtMi4zNSAxLjg0Ny40ODQtMTIuNjYyLTYuOTEzLTUuMjY2LTUuMzc3IDUuMzgtMjguOTY4IDM3LjQ4NC00OC4zMDggNDIuNjY0IDAgMC0xMS4zNy02LjE4LTIzLjc1LTIwLjc0Ny05LjcxNC0xMS40My0xNi4yNDYtMjQuODI1LTIwLjExLTI1LjM3NS0zLjg2Mi0uNTU1LTUuOTMgNi43NzMtMTAuMDcgMy4xODUgMCAwLTEyLjQzNC0xNS4xLTE4LjI0LTIxLjIxMyAyMy4yNyA4LjkyIDQ4LjUxIDEzLjg1NSA3NC45MyAxMy44NTUgMjYuODE4IDAgNTIuNDIzLTUuMDkzIDc1Ljk4OC0xNC4yNzUtOS44MzUgNy41Ni0yMS4zNDggMjUuNDYtMjMuNTI3IDI3LjE3NHpNMTcxLjQ3IDQzOS44NjhjMTAuMTIgNy42NjYgMjAuOTcgMTQuNDEgMzIuNDA0IDIwLjE2LTEuMTI1IDMuNTgzLTMuNzMgMTMuMzEtMi4wMSAyMS45MTcuOTYgNC43OTQgMi44OCA5LjgzMiA1LjI3NyAxNC4zOTMuMzY2LjY5LTI5LjYyOC0yMi4wNTMtMzUuNjctNTYuNDd6TTE1MS4yOCA0MjcuNmMtMTMuMTEtMTIuNTc1LTIxLjU2NS05LjI4LTE4LjMyNS0xMy41NDMgMy4yLTQuMjEyIDEuMzAyLTguOTQgMS4wNTQtMTEuNDE2IDUuOTg0IDcuMDI4IDE2LjcwOCAxOS41NTcgMjMuNTYgMjUuNzM3LTEuMjEyIDEuMjI1LTMuNTM2IDEuODY4LTYuMjktLjc3NnptLTM2LjM1Mi0zMC4wNTZzLTEuOTIzLTE3LjcxMy0uMzg1LTIzLjMxM2MzIDUuNDA4IDExLjA2NyAxNy42MiAxNC41MTYgMjIuNzE3LTQuMjEtMi40NzUtMTAuNDE4LTMuMTE2LTE0LjEzMi41OTd6bS0yNS45NTItNDkuODVjLTIuNTUyLS44NTUtNC44NC0zMC44MTYtMTAuMDItMzcuOTkgNiAuMzk4IDEwLjYzLTMuNzM3IDExLjc4LTYuMDM2IDEuODYgMTEuMjMgNS4xMiAyNS43NiA4LjY5IDM2LjMwOC00LjUzIDEuNzYtNy45NTQgOC41Ni0xMC40NSA3Ljcyek03My43ODMgMjg2LjE0Yy03LjQ3IDQuNDUyLTUuODc2IDEzLjUyOC01LjE3MiAxNS41MTctMi4zNzgtLjUxMy0zLjg4NS4wMTgtMy44ODUuMDE4LTIuNC05LjY4MyAxOS42Ny0zMS4xNSAyMy42NDctMjguNTI3LjAwOCA0LjUxOC4zNTUgMTAuMjcuNjQgMTQuNzE2LTMuNTg2LTIuMTY2LTguOTk4LTUuNDM1LTE1LjIzLTEuNzI0em0xNy43OC00OS42N2MtLjc5MyA0LjUzLTEuNDc3IDkuMS0xLjk3NCAxMy43MjQtLjM4OC44Ny0xLjI2Mi44MDYtNC45MjQtLjU3Mi00LjYwNy0xLjczNyAzLjcyOC0xMC4xNiA2Ljg5Ni0xMy4xNXptMjYuMzg0LTcxLjAzM2MtNC45ODcgOC4zNDMtOS40MzQgMTcuMDQ3LTEzLjI0IDI2LjA5LS41OTYuNzItMS40OTIgMS40ODQtMi44MjggMS44MTMtNS45NjYgMS40NjggNi44NS0xNy45NCAxNi4wNjctMjcuOTAzem0zODQuODQgMzIuNjY2YzEuNjg2IDMuNDQ4LTUuNzYyIDIuMzUzLTguNTA0IDEuODQ2LTQuMTMtMTEuMTQtOS4yMTMtMjEuODE0LTE1LjA5Ni0zMS45NjUgOC45NjQgNS44OTggMTcuNzc0IDE4LjIwNCAyMy42IDMwLjExOHptNjEuMzY4IDE5MC44MTNzNDQuODgtNTIuNjQgMjMuNjQ1LTgwLjk5M2MtNC4xMS01LjQ5LTE5Ljg3MyAyMS4yODQtMTkuODczIDIxLjI4NHMyMy45OC02Mi40MTMgMTcuNDY4LTEzMy45MzVjLTEuMzItMTQuNTA2LTMuNS00Ny4wODYtMTQuOTMtMzAuMDk0IDAgMC03LjUwNC00MC4wMjMtMjUtNTEuNTM1LTMuOTI3IDEuMzEtOC4xMiAyNC42MDctOS4xNjIgNDEuNTg2IDAgMC0yOC4zNzMtMTIxLjczLTEyNy45OTItMTM5LjgxNi0xMC4yNzUgMCAxMi4zIDM1Ljk5NiAyNS4wNDggNTIuNTUtMi4zOC0xLjA3LTcuMDMyLTEuNTY4LTcuMzg2LTMuMTIzLS45OC00LjMwMi00LjY0Ni03LjUyMi04LjU5Ny04Ljc1OC05LjM5Ni0yLjk0My0xNy43MjIgMi43NjUtMTguMjQgMTIuMi0uNzA2IDEyLjc3OCAxMy40OTggMTcuNzUyIDIxLjQ4OCAxMy4zMTMgNS40NjUgMS4zOTggMTcuMDIyIDMuODc1IDMwLjU2MiAxNC45MzMgMTEuNTIgOS41NyAyNC41MzcgMjYuNTk4IDM5LjQxNiA0NC41My01Ljc3LTQuMDA1LTE5LjQ1NS0xMy4xNDctMjQuOTUyLTExLjQ0OC0zLjUxNiAxLjA4Ny0yLjUyIDkuNjg4LjQyMiAxOC4zNTYtMzguMTc1LTUxLjM3My05OS4zMDctODQuNjY4LTE2OC4yMzItODQuNjY4LTY4LjM5NCAwLTEyOS4xMDggMzIuNzgtMTY3LjMzNyA4My40Ny0xLjk3My00LjkxNS04LjIwOC0xMi45MTUtMjcuMjU4LTIuNDc4IDAgMCA0Ni44MS01MS4wNjcgNTQuOTMzLTU1LjU2NCA4LjExOC00LjQ5NSAxOS40MDQtMTAuOSAyOS45Mi0xMS4zOTcgMTAuODYgNi4zMTMgMjMuNDUtMS41MDUgMjEuNDY4LTE0LjktMS44NDYtMTIuNDYyLTIyLjc1NC0xNi43OTMtMjcuMjAyLTIuODNsLTExLjM2NiAyLjA2NHMyMS42MjItMzYuMjQyIDE4LjY0Ny00Ni44NGMwIDAtODQuMTQgOS4yLTEyMy40NDYgMTEwLjE5OCAwIDAgNC4yNy00MS4xNS0xMi40OC0yNi41NjMtMTQuNDkgMTIuNjIyLTI2LjU4IDQwLjU0NS0zMS4wMTcgNjcuMTUyIDAgMC00LjI2NC0xMS45OC02Ljc5LTYuMDI0LTMuMDA0IDcuMDg1LTUuNzI3IDI1LjMzNC0xLjQ0IDU2Ljk2IDAgMC03LjQ3LTguNzc1LTguMzQgMy44MzYtLjU3IDguMzQyLS4zNTQgNDguNTE1IDIyLjIyMyA5OS43MS0xMS40MTYtMTYuODEyLTUxLjkyOC0yNi43Mi05LjIyMyA0OS40MTQgMCAwLTguNDgzIDEuNzM2LTcuOTE3IDcuMjQ4LjUyNyA1LjExMyA1LjQ2NiAxMS4zMTUgMjUuODYzIDI3LjExNiAyMS41MzMgMTYuNjgzIDM4Ljc4NCAyNS43MjMgMzguNzg0IDI1LjcyM3MtMzguOTM1IDIuOTM2LTM1LjE5NSAyMi4zYzEuNzcgOS4xNjMgMzEuNDAzIDkuMTYzIDMxLjQwMyA5LjE2M3M2Ljc3NyAzOS4yNiA1Ni4xNzIgNDkuNjE2YzAgMC0xNC45MSAxNC45NzcgMjAuMjk2IDE5Ljk5NSAxOC43MSAyLjY2NCAzNS40IDIuNDEyIDQyLjEwNCAzLjU3My03LjM3IDEuMTItMTMuNTM4IDE0LjQ0LTMuNzQgMjIuOTUgNi43NzQgNS44OCAxNi44NDMgMi4xNSAyMC43Ni0zLjA5NSAzLjk3Ny01LjMyOCAxLjE5LTkuNjA2IDcuNDc3LTguNjM3IDIuNzA0LjQxNSA5Ljk0MiAxLjg5MyAxNS4wMzIgMi42ODIgMCAwLTEwLjUyNyAxNi43OTYgMzMuNzA1IDEzLjM0NC0xMy4xMTcgMTAuNTYyLTMwLjEwOCAxNS42Ni0zOC43NjYgMjIuMTM1LTkuMjMyIDYuOTAyIDI5LjkgMTIuMTEzIDM1Ljg0NiA2LjE2NSA1Ljk1LTUuOTQ4IDMyLjg2Ny0yNS43NTggMzIuODY3LTI1Ljc1OHMyNC45MTYgMy44NTcgNDYuMTEgMjcuMzQ2YzQuNjEgNS4xMTYgNDQuNTctMy42MDggMzguMjQ2LTguMzU0LTkuNjItNy4yMTctMjcuNDI1LTEwLjc1LTQ0Ljk3OC0yMi4xOCAxNS44MzMuNzQzIDMwLjMtLjgxOCAzNy4yMjItMi44ODQgOC4zOTctMi41MDYgNS4wNzUtOC41MjcgMi43Ni05LjkzMi00LjQtMi42Ny40NzItMy43NyAzLjY0LTQuOTcgNC4wOC0xLjU0MyA2LjQ2Ni0xLjAwNiA2Ljg5IDIuNjEzLjYzIDUuMzQyIDMuMDIyIDguOTcgNi40NDQgMTEgNC45MzIgMi45MjggMTEuNTM3IDEuOTM0IDE0LjYxNS0uMzE0IDQuNDUyLTMuMjUgNi40NTYtOC4xNDggNS41LTEzLjItLjYwOC0zLjIyNC0yLjYxNC00LjkxNi4xNi00LjQyOCAwIDAgMjEuNDQgNi45MDQgNDcuNTIyLTMuMTUzIDUuMTY2LTEuOTkyIDE0LjQ1Mi04LjE0IDE3LjI1Ni0xNC4wNjcgMi44MDgtNS45MjMtMTcuNzc2LTUuNjEzLTEwLjc3OC04LjE4NiA2LjI0OC0yLjI5NyA1Ny40MDgtMTMuMTc2IDU4LjY2LTQ1LjQ4MyAwIDAgNjMuMDM3LTIwLjg5OCA0LjE3Mi0zMi40NzQgMCAwIDY5Ljk1OC0zNC42NzcgMzYuODk3LTQ2LjQ0NyIgZmlsbD0iI2M2ODcwZiIvPjxwYXRoIGQ9Ik00MTMuNDA0IDYzLjEwN2MtMy4yOTgtLjA1NC02LjAxNCAyLjU3LTYuMDcgNS44NjMtLjA1NyAzLjI5NCAyLjU3IDYuMDEgNS44NjQgNi4wNyAzLjI4OC4wNTcgNi4wMS0yLjU2NiA2LjA2Ni01Ljg2NC4wNTYtMy4yOTMtMi41Ni02LjAxMi01Ljg2LTYuMDdNNTI2Ljk4IDE1Ni4xMTRDNDg5Ljg5OCA0NS45NDQgNDMyLjQ1MyAzMi45ODcgNDIzLjgwMyAzMS40ODdjLTYuNzU1LTEuMTc0IDE1LjczMyAzMi45MzggMjAuMTcgMzguNTM1IDQuNDM3IDUuNTk1IDIwLjk3MiAyOC4wMiAyMC45NzIgMjguMDIuMDcyLS4wMDMgNTMuOTAyIDY1LjM0MiA1NC41OSA2Mi4yNzQuNDEtMS44MjctOS42ODQtMTkuOTk1LTIyLjkyNi0zNi4zODYtOS43MS0xMi4wMi0yMS4wMTItMTcuNTg3LTMwLjUzLTI1LjgwMyA3LjY5Ni0uMDY4IDE3LjAzNiA0LjYyOCAxNy4wMzYgNC42MjgtNy4wNzYtMTMuMjItMTMuNDctMTguNzgyLTIyLjA1LTIyLjkzMi02LjY0My0zLjIxNS0xMi4wMzgtNi40NzYtMTYuNC05Ljc4MyA0LjkxNi0xLjkwNyAxMy4yODYgMS4xOSAxMy4yODYgMS4xOS0xLjE1Ny0zLjEwNC0yMi4yNTctMjIuNTYtMjQuMTMtMjkuNTc3IDE1Ljg4NiA3LjgyNiAyNS44ODggMjMuNTM4IDI4LjMyIDI1LjU5Ni0xLjg4NS00Ljg0NS0zLjIzNi0xMS4zMDMtMi40My0xMi45MTggOS44OTcgOS44MSAzMC45ODIgNDkuMTk2IDMwLjk4MiA0OS4xOTZzLTIuOTktMTIuODctMi4xODMtMTQuNzUyYzIuNzMgMS4wMDggMTAuMDYyIDE1LjQxNCAyMi42MDYgNDAuOSAxOC4xMjMgMzYuODM3IDE1Ljg2NCAyNi40MzggMTUuODY0IDI2LjQzOE00NzQuNzI0IDE0MS41NzVjLjQxNiA4LjY2NSAxNi44ODcgMjQuODc2IDI5Ljg0NiA0MS44OTggNy4wMiA5LjIwOCAxMS40NTcgMjAuMjM2IDkuNzY3IDIzLjcwOC0yLjA1IDQuMjIyLTE2LjU5Ni0yLjY0OC0xNC44NTYgNS4zNjYgMS43NDUgOC4wMTMgNTEuOTk4IDYzLjUyMiA0Ny40OTYgMTIwLjEwMyAwIDAgMi4zODIgNC42MTUgMy41ODctNC4xNjIgMS4yMS04Ljc4Ny0xLjc2LTY3LjI0NS0zMC42NjgtMTAzLjQ3Mi03Ljc5My05Ljc2NyA3LjMwMy0xLjI1MiA2Ljc3My01LjUwNS0uNTMtNC4yNS01LjA0Ni0xMi40OS05LjE5OC0yMC4zNS01LjUyLTEwLjQ1Ni0yMC40NC0zMi41NTYtMTcuOTktMzIuMDAyIDIuNDU4LjU1IDEwLjk2IDkuMzE3IDE5LjIxNSAyMy42NTUgMTUuMTUzIDI2LjMxIDIzLjY4NCA1Ni45ODggMjUuOTc0IDY0LjE0OCA4LjY2NSAyNy4wNjggMTAuNTQ4IDQ4Ljg5NSAxMC41NDggNDguODk1czEuNjE3LTY3Ljc5Mi0zNS4xNi0xMjEuMTY2Yy0xMC44MzUtMTUuNzItMjUuNTMtMzYuNTc3LTQ1LjMzNC00MS4xMTUiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNNTc0Ljk3MiAxNzUuMjI2Yy0zLjE5LTYuOTctNi40NDMgMTMuNjYtOC4zMTUgNi45My0xLjg4LTYuNzMzLTQuNTU4LTQyLjE0Mi0xOC43Ni01NC4zNDggMCAwLTcuMDcgMjEuNTcyLTMuNzYzIDQyLjU3IDIuNzcyIDE3LjY0LTI4LjA3LTEzLjE3LTcuMjEgMjEuOTQgMTcuOTk0IDMwLjI4NyAyOC40MyA5Ni4wODIgMjYuOTk4IDEwNy4wNjQgMCAwIDYuNjEzLTI3LjY3LTUuMDk1LTcwLjIzLTMuMzk3LTEyLjM0My0xNS44ODMtMzcuNzQtMTUuNDI3LTQwLjQ4IDIuMDU4LS40NTggNC45MzYgMS4zMDUgMTIuMzM3IDE1LjUzNiAyLjk3NCA1LjcxMyA0Ljk4NyAxMS44NTMgNS41MjggOC4zODUuNTQzLTMuNDctMTMuNDE4LTYxLjkyOC0xMC41ODQtNjIuOTMzIDEuNjQtLjU4NCA2LjA0IDExLjYzNCA5Ljg1MyAyNy4wODQgMi43NjcgMTEuMjE0IDQuNzE1IDIzLjA4OCA1LjU2IDI3LjQ1NyAxLjA1IDUuNDU1IDQuMDA4LTE3LjQyIDUuNjctMTMuNzM0IDEuNjYzIDMuNjguODMgMTYuMjUzLS4wOTMgMjkuMjgtLjczNSAxMC4zNTgtMi40NCA0Ny4zODQgMS41MTggNDcuMzU2IDQuODU0LS4wMzMgNC45MS00MS43MSA0LjY5My02MC4wOTQuMjc3LTkuMDAyLS4xLTI1LjY1LTIuOTA4LTMxLjc4Mk01MjAuOTcyIDI4MC45OTVjLTMuMjg2LS4wNi02LjAwOCAyLjU2Ni02LjA2NCA1Ljg2LS4wNTYgMy4yOTYgMi41NjcgNi4wMTIgNS44NjMgNi4wNyAzLjI5Ni4wNTYgNi4wMDgtMi41NjQgNi4wNjctNS44NjIuMDYzLTMuMjktMi41Ni02LjAxMi01Ljg2NS02LjA2OE00NjcuOTQ1IDQwOC4zMTdjLTMuMjkyLS4wNTYtNi4wMSAyLjU2Ni02LjA2NSA1Ljg2LS4wNjIgMy4zIDIuNTYyIDYuMDEyIDUuODU3IDYuMDcgMy4yOTYuMDYgNi4wMTUtMi41NjYgNi4wNjYtNS44NjMuMDY0LTMuMjkzLTIuNTYzLTYuMDEtNS44NTgtNi4wNjdNNTE2LjcyIDM2NC43OGMtMy42IDE0Ljg0Ni04LjU2IDMxLjA4LTEyLjY0OCAzNy42LTMuNTQ3IDUuNjU1LTYuOTIzLTE4LjgxLTkuNDA1LTE2LjM4LTQuNDUzIDQuMzctLjQyNiAxOS43Ny0zLjY3IDM5LjY3OC0xLjI5NSA3Ljk1NS0zLjY2IDE0LjAxOC02LjA2NCA4LjU2Mi0yLjQwNS01LjQ1Ni0yLjE4Mi01OC4wMTIgMy4wNi02NC4wMTIgNS4yNDUtNS45OSA3LjkyOCA3Ljc4MiAxMi41MjQgNi40NTIgNC41ODgtMS4zMjcgMTQuMDctNTcuMTI0IDI2LjE5LTY2LjQxNyAxMi4xMTItOS4zIDguMDA2IDQwLjExMyA4LjYzMyA0NC4zNDMuNjI3IDQuMjM0LjAyIDE4Ljk5NSAxOS4yODIgMy41MDIgMTkuMjU1LTE1LjQ5IDI5LjA2NS0zOC45NzcgMzAuNjQ1LTM2LjcwOCAyLjk1OCA0LjI0NS0yLjk2OCAzMC45NTYtMzEuMzEgNjIuMDk1LTEwLjM5NCAxMS40MzMgNS43NzQgNy4zMSA3Ljc3NiAxMi43MjMgMS45OTYgNS40MTMtMzEuNDg4IDM3LjIzMy02Mi40ODcgNDIuNDczIDAgLjAwMi0xMy42NDMgMS41MjMgMTcuNjgtMTguMTA3IDE5LjkxMi0xMi40NzcgMzIuNTktMjAuMzE4IDI2LjkxMi0yMS44NjYtNS42NzgtMS41NTMtMTQuNCA3Ljk5OC0yMy4wNjcgNy43NTctMi45ODUtLjA4NCAxMS4zODYtOS43MTggMjAuNjQtMTguNDQgOS44ODYtOS4zMjMgMTcuNTk4LTE4LjI1MyAxNS42LTIxLjU3LTEuODI3LTMuMDMzLTIxLjA3MyAyMC42MDgtMjguNjMgMjMuNDA1LTIuNjY4Ljk4IDMuOTUtMTQuOTMgMS45MzctMTkuMzQ0LTIuMTM3LTQuNzAzLTcuMzI0IDE1LjA0Ni0xMi4wNTQgMjAuNDgtMi41NDYgMi45My40ODMtMTAuNzk1IDMuMzI4LTI0Ljc5IDIuNzQ4LTEzLjUyNyA1LjA4LTI3LjgzIDMuNjI3LTMwLjM3My0xLjgwNi0zLjE1Mi00LjM4OCAxMS45ODgtOC40OTggMjguOTM2IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTQ0My41NTcgNDc4Ljg2bC4wMjYtLjAyM3ptODAuMDMtMzUuMTJjLTE2LjE4LjQyLTQwLjg5NyA3LjE4Ny01Ny43MjggMTYuNTkgMCAwLTEyLjU1IDIuNzg0LTQuNDU1LTE3LjgyIDguMDk4LTIwLjYwNC0yMC45MDMgMTQuMzM3LTIyLjc3IDE3LjMyMy0xLjg3IDIuOTg0LTIuMTM1LTIxLjEtMTAuODktMi45NjUtOC43NiAxOC4xMjctMjcuNjkgNDIuNjU3LTMxLjQxOCA0NS44My0zLjcyNyAzLjE3MiAxLjYyOCA3LjQxIDYuMjUgNC4zMyAyLjI1Ni0xLjUgNi42MjUtNC41NSAxMy4yODUtMTMuMDM2IDUuNDYtNi45NTggMTEuNzU1LTIxLjk0NSAxNC4zNTUtMjQuMjU1IDQuNDU4LTMuOTYtMS4wOTUgMTMuMjI1IDEuNDg3IDExLjM4NSA2LjkzLTQuOTUgOC44NS0xMy4zNjYgMTIuODctMTkuOCA0Ljk1LTcuOTIyIDcuMjQ0LTMuMTU3IDMuOTYyIDMuNDYzIDAgMC01Ljk0MiAxMy4wNjQgMS45OCA5LjQwNyA3LjkyLTMuNjYgMjUuMTMzLTE0Ljg4IDQzLjA2NC0xNS4zNDggNC4zNzItLjExMiAxMC45NTguNzUgNS40NDUgMi45NzMtMTcuNjczIDMuNTM1LTk1LjQ1NyA0NS42MzQtMTAyLjUwOCA1Ny45NjUtMS4yNjQgMi4yMi03LjM3IDExLjYyMyAxMC43NjUtLjAxNiAxNS4wMjQtOS42NDYgODIuNTc2LTQ2Ljg2IDkzLjU5Ni01MS45MDcgMTEuMDItNS4wNTUgMjcuMS0xMi4zMDIgMzYuOTUzLTE1LjM5OCA5LjA3Ni0yLjg1NiAxLjk0Ny05LjE0NS0xNC4yNDMtOC43MjNNNTE0LjY4MyA0NzAuNjZzLTUuMDg0IDI2Ljk3Ni01OS4zNTQgMzguODk2Yy0xMS45IDIuNjEzLTEwLjQ4MyA3IDYuMTUgMTAuMzg4IDguNjI3IDEuNzYtMjAuNDUgMTcuOTg4LTUwLjA5MiAxMS40MzQtNy43NTYtMS43MTYtNC45MDgtNC45OTQgNS44MzgtNC41NDUgMTEuOTEuNDk4IDIzLjU2Mi0yLjY3NSAyNy43MjQtNC4zOSA1LjMwMi0yLjE4NS02LjU2LTMuNDc2LTEwLjk1My00LjQxNS00LjM5LS45NDQtOC40MDYuMyAxMS4xMjMtMTAuNjEgMTkuNTI3LTEwLjkxIDY5LjU2My0zNi43NTggNjkuNTYzLTM2Ljc1OE0zOTYuOTQ1IDUzOS4zNzRjLTMuMjkzLS4wNi02LjAxIDIuNTYyLTYuMDY1IDUuODYzLS4wNjIgMy4yOTMgMi41NjIgNi4wMDcgNS44NiA2LjA3IDMuMjkyLjA1NyA2LjAxNy0yLjU3MiA2LjA2OC01Ljg2Ny4wNi0zLjI5My0yLjU2OC02LjAxLTUuODYzLTYuMDY2TTMzOS4yMDIgNTAzLjY3YzguODY2LTEwLjY0Mi45NiAxMi43NSA1Ljk4OCA3LjQzOCAxMi45NS0xMy42ODQgMjkuNzM0LTM0LjExNyAzMS4yNjctMzQuMDIgMy45MDMuMjQ1IDIuNjYzIDE4LjY3Ny0yLjEzIDI3LjEtNi45OTYgMTIuMjk3LTIxLjg3IDIyLjMtMTIuOTI2IDIwLjMxIDEyLjE4NS0yLjcxMyAzMS4xNDItMTUuOCAyNy45OC02LjMyNS0yLjUyNiA3LjU3NS02LjM0NSAxOC4xOC0zMC4wODYgMjQuMzU2LTYuNjgyIDEuNzM2IDExLjA5OCA3LjA4MyA1Ljc1IDkuNDQ2LTguMyAzLjY2Ny00Ni45OSAzLjQyMy00NS4zMjMtMS40MjMgMS42Ni00Ljg2IDEyLjYyLTQuNCAyMi43MTYtMi4zNzYgMS45ODYuNCA0LjY2OC4zMiA2LjE3Mi0xLjE4NSAxLjkwMi0xLjkwMi0xMS40OS00LjEtMTAuNTE0LTYuMS45MDgtMS44NjMgOC4wNy0yLjE5IDE0LjUyOC0zLjgwMiA3LjE5NS0xLjgwMiAxNC44MS00LjQ1MiAxNi4xMDUtNi43MzIgMS44Ni0zLjI3LTcuMDU3LS4wNDUtMTYuODEzIDIuNTktNy4zNjggMS45OS0xMi43MyAxLjQ2NC0xMy4xNzMuNTQ1LS45NzctMi4wNDUgMzIuMjM3LTI1Ljk1NSAzMy42MDctNDMuMDguNjA3LTcuNTMtMzIuNTQgMzYuMzg2LTM3LjIzNiAzOC4zMzQtNC43MDIgMS45NDcgNC4yNDctOC4xMyAzLjYzNi0xMC44NzgtMS43NC03Ljc3My0yMC4yMTYgMjYuODEyLTI5Ljc4NyAyNC40MTcgMCAwLTQuNzY1LTIuNzQtOC4wODQtNS42NjYgNy40NjItNC4xNjYgMTcuMjYtNy42NiAzOC4zMjYtMzIuOTVNMjgzLjE1NyA1NjIuNTU0cy0yNi41ODQgMTguNzE4LTI4LjQ0OCAyMC40NzhjLTEuODY0IDEuNzYtMTMuMDA2IDEuNzQ3LTEzLjgwMy4yNi0uNzk3LTEuNDkgMTIuNDkzLTcuNjg1IDE4LjM0NC0xMS4yNDQgNy42ODMtNC42NzIgMTEuODkyLTguMDcgMTUuMTg3LTkuOTYgMCAwIDIuOS4wNyA4LjcyLjQ2NiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0zNDYuOTYyIDU3Ni44NjdjLTYuNDE4LTMuMDUyLTExLjQ3NC02LjUyLTE2LjIwNC05LjY4LTMuNjA1LTIuNDEtMTUuNDIyLTEyLjQ2My0yMy45NS0xOC4yMi0yLjYxMy0xLjMwNC0zLjg1My45NzMtNi4yNi42MyAyLjA2Mi42MTcgMS40OTggMy43NjQtMS4zNDggMi43OS0xMi4xMTYtNC4xMzQtMzIuMzEzLTQuODItMzguOTk4LTUuNTY3LTguODcyLS45ODUgNS45MzUtNS4yNzcgMy40NTItNy4zMTItMy43MDUtMy4wMy00MC42OS0yLjQ2LTQ0LjA3Ny04LjcxLTIuMjItNC4wOTggMzAuMDkyIDEuMDUgMjMuNzY2LTYuNDA1LTQuNDM0LTUuMjM0LTEyLjU3Mi0xMC45NDQtMTguMzU4LTIxLjY1Ny0yLjQ3My00LjU3OC04LjU5Ni0xMy4xNDYtNy4yOS0xNy42MzggMS40MzctNC45MjQgMTkuNiAyNy41MzQgMjguMDQ0IDI3LjY4IDMuODY4LjA2Ny41Ny02LjUyIDQuODU1LTUuNzQgNi43IDEuMjE2IDkuMDU0IDI2LjQyIDUyLjYyIDQzLjcyNSAwIDAgNi43MTUuMzM3IDMuNDktMS44OTYtOS4wNDQtNi4yNy0yOC44OTUtMjAuMDEtMzkuNjY3LTMyLjE3LTguODU0LTEwLTE0LjA1LTIxLjAxLTE3Ljg3Ny0yMC45MzItMy44MjguMDczLTIuNzE1IDUuNjU3LTguOTYzIDIuMDIzLTQuMDktMi4zOC0yNy41ODUtMzUuMjQzLTMwLjE3Ny0yNi42NC0yLjU5MiA4LjYwNS0uMiAxOS4xNTUgNi4yNiAzMS45MjQgMCAwIDExLjAwMiAxNC4yNiA3LjAyMiAyMC41Mi0zLjk3NSA2LjI1Ny0zMC42MDItMi41ODItMjAuNzIgNS44NjggOS44OCA4LjQ0NSAzNi41MzIgMTAuMDU0IDQxLjg2NSAxMS43MjYgNS4zMzIgMS42NjgtOS4zNjQgOS43Mi0uMTkgMTAuODk2IDMzLjQzMiA0LjI4NCA1NC43MTgtLjE1NCA4Mi44MTUgMTguMzY2LjMxLjIwOC41NDUuMzQ4LjgxMy41MjQgMi45ODUgMi4yIDE0LjY2IDEwLjc3NSAxNy44NCAxMi40NjUgMy4yNTIgMS43NCA3LjUxNSAxLjU4IDExLjA3My43OTMgNi45NC0xLjU0Mi00LjAzNi00LjYxLTkuODM2LTcuMzYzTTE5Ni4wNzUgNTQwLjZjLTMuMjk1LS4wNTUtNi4wMSAyLjU2OC02LjA2NyA1Ljg2NC0uMDYgMy4yOTMgMi41NjQgNi4wMSA1Ljg1OCA2LjA2OCAzLjI5NS4wNiA2LjAxNS0yLjU2NyA2LjA3My01Ljg2LjA1NC0zLjI5NS0yLjU3LTYuMDE1LTUuODY1LTYuMDdNMTc4LjE3IDUxMi43ODNjLTkuODQ3LTMuNDktMjMuMzM1LTMuNjM1LTI5LjY5OC0zLjAzLTYuMzY1LjYxLTEyLjAyIDUuODItNy43OTMgOS40OTUgNC4yMjIgMy42OCA0MC42MzYgNi42ODUgNTAuNDIgMy4yMDYgNS4xMDItMS44MTUtMy41MzYtNi4zMzctMTIuOTMtOS42N004My4xNzQgNDYxLjA1OHMxMC42NTUgMzYuOTY0IDU5LjA4MiA0My42MjhjMCAwLTQ4LjMzLTIwLjg3OC00MC41Ni0zMS4xNjYgMy43NjctNC45OTIgMjkuMDY3IDEyLjY1OCAzNy40MjYgMTguMzI3IDkuNDI1IDYuMzk1IDIxLjM3MyAxMi42MTggMzAuMTY1IDEyLjE4NCA4Ljc5My0uNDMtNTYuMTQyLTQyLjk3Mi04Ni4xMTMtNDIuOTcyIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTE4MS40NiA0OTUuNzY3Yy0yMC4yMTgtMTUuMjctNTcuNDEtMzIuMDM4LTYxLjE2NC0zNy42LTUuMzgtNy45NTQgMzcuMTI0IDEyLjYyMyAzNy4xMjQgMTIuNjIzLTEzLjM2My0xNy4wNzYtMTEuNzQ3LTI4LjI1NC0xMS43NDctMjguMjU0IDIuNDEtMS41NzcgMTAuNTI2IDE2LjU5NSAxOS45MTQgMjkuMzcgMTEuNjQgMTUuODI3IDIwLjQ5NCAyNC40NzIgMjAuNTIyIDI1LjY0Ny4wMzMgMS4xNzQtMy44OTMtMS4yMS00LjY1LTEuNzg2em0xNy4xMDIgNS4yYy04Ljk5LTYuNzQyLTMxLjU2OC0yNy4xMDMtMzguMTMzLTYxLjgxIDAgMC0yLjM0NyA0LjEzNi01Ljk2MyAzLjI0Mi0zLjYxLS45MDMtMTYuNzIzLTE4LjA4NS0yMS4zMS0xNC42NC00LjU4NyAzLjQ1NSA3LjgzIDI0LjQwNiAyLjc4MyAyOC4xOS0zLjY1NyAyLjc0LTI3LjQ4LTE0LjI3OC01Mi41OC0xNi4yMzUtOS41OTgtLjc0My0yNy4zNDMgMS41MDQtMjguMyA2LjMxNi0uODQyIDQuMjU1IDE4LjI3LjY2IDM3Ljg4IDUuNjAzIDM1LjQ1OCA4LjkzNSAxMDUuNTQ4IDY1LjY2NCAxMDcuNjYgNjMuNDcgMi4xMS0yLjE4OC04LjgyNy05LjYyLTguMzY4LTExLjYzMi40NTgtMi4wMiAxMi4wNjMgMTAuNjY3IDE5LjA1MiA5LjA2MyA2Ljk4My0xLjYwMy03LjIzMy03LjQ0OC0xMi43MjItMTEuNTY2TTEyMi4wNTcgNDAxLjg5OGMtMy4yMS0uMDUyLTUuODU0IDIuNDk4LTUuOTA4IDUuNzA3LS4wNTQgMy4yMSAyLjQ5NyA1Ljg2IDUuNzA1IDUuOTEyIDMuMjA3LjA1MyA1Ljg1My0yLjUgNS45MTMtNS43MDMuMDU2LTMuMjE0LTIuNTAzLTUuODYzLTUuNzEtNS45MTYiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNODkuMTg4IDM3MS4wODRjMS4xNTctNS45NTggNS4zNjItNS4xODIgNS4zNjItNS4xODJzMy4xMyAxLjgxIDIuMzQ1IDYuNzIzYy0uNzg3IDQuOTE4LTQuNjU0IDQuODUyLTQuNjU0IDQuODUycy00LjIxLS40MjYtMy4wNTItNi4zOTN6bS0xMy4xMyAzMy4yMTNDNjUuNTQyIDM5OC4yIDM4LjIzIDM4NS43OSAzNy4wNiAzODAuNjRjLTEuMTQ0LTUuMDEyIDE2LjkzNCA0LjY5IDE2LjU0NiAyLjA1NS0uMTc1LTEuMjA1LTExLjk2Ny0xMi4zMjYtMTguODc2LTIwLjY4Ny04LjEyOC05LjgxNS0xMy44MTItMjAuMzI1LTExLjEzMy0yMS42MSAyLjU1Ny0xLjIyIDYuNzM4IDYuOTc4IDE2LjMxOCAxNy45NTcgOSAxMC4zMzUgMjMuMzk2IDI2LjY0OCAzNS40NTIgMzIuNzIgMCAwLTE1LjY4OC0zNy41NjMtOC41OTgtNDguNjIgMy45MzMtNi4xMzMgMy4yMDIgMy42ODMgNi4xNTIgMTYuNjg0IDIuMTQgOS40MTMgOS4xNyAzMy4zMzMgMTIuOTgyIDM1LjUzMiA0Ljg1MiAyLjc5NyAzLjgxLTExLjc1MyA3LjY0My0xMS44ODggMy44MzMtLjEzMyAyLjI2NiA5LjM4OCA1LjU3NiAxOS4xNzIgMi45MSA4LjYwNSA2LjYyNSAxNy41MTYgMTAuMzIyIDIwLjYzNSAwIDAtNi41MzUtNDEuNjQtNS4zMTgtNjEuNzk3LjMwNC01LjAzOC42OS0xOS4zMy0xMS4xNzgtNC4wNjUtMTEuODczIDE1LjI2Ny0xMy45OS0xMC4wNTQtMTUuMzgzLTE4LjQzNy0yLjE4OC0xMy4xMy01LjYxOC0yOS4xMzItMTEuMzI2LTI2LjAxLTEyLjYxNiA2Ljg5Ni02LjM1NyA0NS4wNy0xNC40MjcgNDQuMDg1LTEzLjAwNy0xLjU5Mi0zMC4yMDctNDMuMTE3LTQzLjI5LTM4Ljc2OCAwIDAtNy41NyA4Ljc1NiAyMC45NzUgNTEuNzQgMy44NyA1LjgxNi02LjUzNiA0Ljg4NC02LjEyMiA5LjAyLjMyNCAzLjIxNCA4LjY2MyA5LjkzNCAxNi4yNDUgMTYuMDU4IDAgMCA0NC40OTQgMzYuMzYyIDY2LjYwNCAzOC4xMjYgOS44Ni43OS0xNS4xNC0xOS41MjMtMzAuMTczLTI4LjI0M004MC4xMTMgMjkxLjgwNmMtMi45MTItLjA1LTUuMzIgMi4yNy01LjM3IDUuMTktLjA1IDIuOTE3IDIuMjcgNS4zMjIgNS4xODYgNS4zNzQgMi45Mi4wNTIgNS4zMjQtMi4yNzUgNS4zNzQtNS4xOTMuMDUtMi45MTQtMi4yNzQtNS4zMi01LjE5LTUuMzdNMTA0LjM1NSAxNTEuNTc2Yy0xNi4xOSAxMC4wNzItMzguODYgNDQuNjE2LTQ1LjYwNyA2OS40NzItNC4xOCAxNS40MDYtOS45NDcgNDIuODA1LTYuOTE0IDQzLjUxNSAxLjI5NS4zMDcgNi4zMDUtMjMuMTkzIDEzLjMwMi00Mi4xMDcgOS4zOTctMjUuMzk0IDIzLjA3LTQ4LjIxMyAyNS41NDYtNDguMjEzIDQuMzE4IDAtMTMuNjc0IDI3LjcwNS0yMC44NyA0OC4yMTMtMS4xNzcgMy4zNTUgMTYuNTUyLTE2LjU1IDEyLjIzNS01Ljc1Ni0xLjg4NCA4Ljc3Ny0xOC42MDggMzguNTA3LTIzLjkwOCA1NS45OS0zLjM1NyAxMS4wNzctMi4yMjIgMTguMzA2LTIuNzgyIDIxLjc5IDAgMCAxMC4yMi0yMS42MiAzMy42Ny0zNS4yNzYgMCAwIDIuMjM2LTYuODQ4LTExLjAxOCAyLjIxLTExLjY3NSA3Ljk3Ni0xMy40NjItLjI0OC0xLjAyLTE1LjM1NyAxNC4yMDMtMTcuMjQ3IDIxLjU2My0zNS43NDcgMjEuNTU4LTQxLjk4Ni0uMDEyLTYuMjM3LTE2LjQ3NyA1LjQxMi0xMy44MjMtLjI1IDMuOTMtOC4zODIgNy43NTgtMTguMyAxMi44MzgtMjUuNDEyIDcuMjUtMTAuMTUgMTUuNDU4LTIwLjQzNiAyMS40NzctMjYuOTggMy43NzUtNC4xMS0yLjAxNi03LjczOC0xNC42ODUuMTQ4IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTQwLjY4NSAyNzIuODdjMS4xOTcgNy40Ljk5MiAzLjI3NSAzLjAzOC0xMi41NTIgMi4wNDMtMTUuODIyIDQuODItNTQuNjUyIDI4LjQ2Mi04NC45NjggNS43NzUtNy40MS0uMzYzLTEyLjY3NS0xOC4xMjItMS42MDgtMS4yODQtMTIuMzU1IDcuNzQ4LTY0LjM0LS4yMjItNjEuODcyLTEzLjY4NSA0LjIzNi0yMi43MDcgNDIuNzItMjguMzM3IDY3LjM3NS0uNyAzLjA2My0zLjYzLTcuODItNS41NzItMy4xMy0xLjQ1NSAzLjUyLTEuNTk1IDkuMzI1LTEuNDAyIDE3LjcwMy4zMjcgMTQuMDEzIDMuMzQ2IDI5LjA4NSAxLjkyNiAzNC4wNzYtMS4xNCA0LjAwMy02LjIxMi00LjM4Ni03LjE2Ni0uNzQtMS4zMjIgNS4wNjIgMi4yMzIgMjcuMzY1IDUuMTEgNDAuMDU2IDYuOTcyIDMwLjc1OCAxOS4yOSA1OS43NjIgMjIuMzI0IDU4LjMxIDQuMjU1LTIuMDM2LTIuNDIyLTEwLjk5LTYuNDg2LTMzLjc2LTUuODkyLTMyLjkyNy0xMi4xOTMtOTAuNy04LjkyLTk3LjY5MiAzLjIyOC02Ljg4IDMuNDY3IDExLjk2MiA2LjU0MiA5Ljc5IDAgMCAxLjA0LTE0Ljk3OCAzLjQxMi0yOC44MyAzLjE4Ni0xOC42MSA3LjI1NC0yOC4yNjUgMTAuMzYtMzAuNjc2IDUuOTgyLTQuNjQ2LTMuODIyIDIxLjgyLTQuNDkyIDUwLjAxNC0uMTEyIDQuNiA3Ljc3Mi04LjUyNyAxMi4xNTQtOC41MjcgMi44MyAwIC4yNTMgMy4yMzUtMy4zMTYgOS4xOTQtMTUuNjcyIDI2LjEzNi0xMC40OSA3MC40My05LjI5IDc3LjgzNSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xNzQuNDE3IDI5LjkyN3MtMjguNjk1IDIuNzYzLTU5LjUxNSAzNi4zMzRjLTMwLjgyNyAzMy41Ny00OC4xMjIgODcuMDA1LTQ0Ljg4IDg1LjQyOCAzLjI0NS0xLjU3NyAxMy40ODgtMjAuMDYyIDE5LjY1LTMyLjk0NyA2LjE2Mi0xMi44ODYgMTAuMDktMjUuNzQ1IDE4Ljk2Ni0zNi40NzYgOC44OC0xMC43MzQtNC4wMjggMTkuNTE4LTQuMDI4IDE5LjUxOHM1LjY4LTguMTE2IDEyLjAxNS0xNy44MWM2LjAzLTkuMjIgMTYuMjkzLTI1LjA5MiAyMS4xMDUtMjkgNC4zOS0zLjU2Ni0zLjYyMyAxNC43NjMtMy42MjMgMTQuNzYzUzE1OC41MSA0My42MyAxNjIuMDQgNDMuNDM4YzMuNTMtLjE5LTE3LjU2IDI1LjM2LTI3LjI1MiAzNS43MjctMTMuNDIzIDE0LjM1My0xNS4xMjIgMTQuMDc3LTI1LjI1OCAyNy43NCAwIDAgMjQuMjUyLTE0LjQ5NSAyMi42My0xMC4wMjUtNi42MTUgNi41NS0yMy41NyAxOS45NjctMzQuMTYgMzAuMjQ0LTguOTE3IDguNjU3LTIyLjE2NiAyNy40NTUtMjAuMjggMzAuODk3IDAgMCA1MC4xMzItNTEuOTA0IDU3LjU4OC02MC4wMzggMCAwLS4xMi4wNzgtLjMxNi4yMTIgMy40OTctMy44MDUgMTEuODE2LTEzLjM2IDIxLjQ5Mi0yOC4wNjMgOC41Ni0xMy4wMDcgMTguMzYtMzUuMzcgMTcuOTMzLTQwLjIwM00xOTUuOSA1OC44NzNjLTMuMjk2LS4wNTgtNi4wMSAyLjU2Ni02LjA2NyA1Ljg2LS4wNTUgMy4yOTYgMi41NjQgNi4wMTIgNS44NiA2LjA3IDMuMjkzLjA1NiA2LjAxNC0yLjU2NiA2LjA3LTUuODYyLjA1Ny0zLjI5My0yLjU3LTYuMDEyLTUuODYzLTYuMDY3TTE4MS45MSA2Ni42NTdjMCAxLjEwNy4zOTMgMy4yNCAxLjI2NCA0LjM0OC03LjAzMy41NTMtMTcuNTQ0IDQuNjYzLTIwLjc4NSA3LjAzMyAxLjI2NC0yLjQ1IDMuNDgtMTAuMTE3IDE5LjUyLTExLjM4TTQyNS45ODcgNzIuNjZzLS44NDcgMS45ODItMS40NjIgMi45NjJjLTEuMjIzIDEuOTYgMTUuNTk4IDMuNDQ1IDIxLjMxIDguMjcgMCAwLTMuNTU4LTcuNzU0LTE5Ljg0OC0xMS4yMzIiIGZpbGw9IiNmZmYiLz48ZyBjbGlwLXBhdGg9InVybCgjZikiIHRyYW5zZm9ybT0ibWF0cml4KC4xMyAwIDAgLS4xMyAwIDU5Mi45MykiPjxwYXRoIGQ9Ik0yODYxLjkyIDExNjEuOTZjNDMuMDUgMjU4LjY3IDIxNi41IDEwMDUuMTkgODM0LjU2IDE1MTcuNjYgMTAuNjQtNzAuNTggMTYuMDctMTQyLjE1IDE2LjA3LTIxMy42OSAwLTU2NC42OS0zMzguNjEtMTA3OC4zMS04NTAuNjMtMTMwMy45N3ptODY4LjExIDE2MDYuN2MtNzgxLjE1LTU5OC4wNS05MTMuNjUtMTU1My44OS05MjguMjQtMTY4My45MSA1NjAuMjYgMjA4LjI4IDk1OS40MyA3NDcuOTYgOTU5LjQzIDEzODEuMTggMCAxMDMuNzktMTAuNzggMjA1LjAzLTMxLjE5IDMwMi43M3ptLTIzODYuMTQgNzYyLjI3YzI2MC44MiAyMzEuODggNTkzLjYxIDM1OC43OSA5NDQuOTIgMzU4Ljc5IDM1MC42MiAwIDY4Mi45NC0xMjYuNTYgOTQzLjU5LTM1Ny43Ny0xNTAuMi02Mi42MS01MDMuMzktMTg2LjE3LTk1My4xNC0xODYuMTctNDQ4LjE2IDAtNzkwLjAyIDEyMi41OC05MzUuMzcgMTg1LjE1em05NDQuOTIgNDA3LjQ2Yy00MDEuNjIgMC03NjUuNDktMTYwLjc4LTEwMzEuMTUtNDIxLjM3IDYzLjUzLTMxLjY0IDQ2NS4wMi0yMTkuOSAxMDIxLjYtMjE5LjkgNTU2Ljc3IDAgOTczLjgyIDE4OC40MyAxMDQwLjE5IDIyMC4yNC0yNjUuNTkgMjYwLjQtNjI5LjM4IDQyMS4wMy0xMDMwLjY0IDQyMS4wM3pNODY0LjkyNiAyNDY1LjkzYzAgNjkuMTMgNS4xNDggMTM4LjI2IDE1LjA1OCAyMDYuNSAyMTguMTM2LTIwMS45NiA4NDkuMzE2LTg0My4yMSA4OTQuODY2LTE1MzUuMDktNTQ3LjA3IDIxMS4yNS05MDkuOTI0IDczNi4zMy05MDkuOTI0IDEzMjguNTl6bS0xNy43MTUgMzAxLjMzYy0yMC4yNTMtOTcuMjktMzAuOTM3LTE5OC4wNS0zMC45MzctMzAxLjMzIDAtNjUyLjAyIDQyMy4zMDctMTIwNC45MSAxMDA5Ljg2Ny0xMzk4Ljg5LTUuNSA4MzAuNDEtODU1LjczNCAxNTk0LTk3OC45MyAxNzAwLjIyek0yMjkwLjkgOTM5LjM5OGMtODQxLjE1IDAtMTUyMy4wNTYgNjgxLjg4Mi0xNTIzLjA1NiAxNTIzLjA1MlMxNDQ5Ljc1IDM5ODUuNTQgMjI5MC45IDM5ODUuNTRjODQxLjE3IDAgMTUyMy4wNy02ODEuOTIgMTUyMy4wNy0xNTIzLjA5UzMxMzIuMDcgOTM5LjM5OCAyMjkwLjkgOTM5LjM5OHptMCAzMTM1LjIxMmMtODkwLjM0IDAtMTYxMi4xMzQtNzIxLjgtMTYxMi4xMzQtMTYxMi4xNiAwLTg5MC4zNSA3MjEuNzk0LTE2MTIuMTUgMTYxMi4xMzQtMTYxMi4xNSA4OTAuMzUgMCAxNjEyLjE1IDcyMS44IDE2MTIuMTUgMTYxMi4xNSAwIDg5MC4zNi03MjEuOCAxNjEyLjE2LTE2MTIuMTUgMTYxMi4xNiIgZmlsbD0idXJsKCNnKSIvPjwvZz48ZyBjbGlwLXBhdGg9InVybCgjaCkiIHRyYW5zZm9ybT0ibWF0cml4KC4xMyAwIDAgLS4xMyAwIDU5Mi45MykiPjxwYXRoIGQ9Ik0xNDMxLjYzIDMyMDQuNzdsMTA4LjItMzcuNjYtMjQzLjM4LTE0OC41MSA5Ni4wNS0zMDUuNTMtMTEyLjk2IDM5LjMzLTczLjU2IDI1Mi44LTEuMTcuNDMtNzAuNTUtMjAyLjY2LTg3Ljg3IDMwLjYxIDE1Ni45IDQ1MC43IDg3Ljg3LTMwLjZMMTIyNSAzMDYzLjZsMS4xOC0uNDEgMjA1LjQ1IDE0MS41OCIgZmlsbD0idXJsKCNpKSIvPjwvZz48ZyBjbGlwLXBhdGg9InVybCgjaikiIHRyYW5zZm9ybT0ibWF0cml4KC4xMyAwIDAgLS4xMyAwIDU5Mi45MykiPjxwYXRoIGQ9Ik0xNzAzLjY2IDMwMDIuOTFsLTEuMjUuMjYtODcuMjctMTU4Ljc5IDExMC44NC0yMy40MnptLTEzMC4yMi0yMjcuMzhsLTU5LjItOTAuMzMtOTUuOTUgMjAuMjcgMjgzLjMgNDQwLjg0IDcwLjYyLTE0LjkyIDc1LjgtNTE2LjctOTcuMiAyMC41My0xNS4xNCAxMDYuMDMtMTYyLjIzIDM0LjI4IiBmaWxsPSJ1cmwoI2spIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNsKSIgdHJhbnNmb3JtPSJtYXRyaXgoLjEzIDAgMCAtLjEzIDAgNTkyLjkzKSI+PHBhdGggZD0iTTE5OTMuOTcgMjY4Mi4zNWwxMzAuODYtMTMuNzUtOC40Mi04MC41Ny0yMjMuNDYgMjMuNDggNDkuOTEgNDc0LjUzIDkyLjUyLTkuNzEtNDEuNDEtMzkzLjk4IiBmaWxsPSJ1cmwoI20pIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNuKSIgdHJhbnNmb3JtPSJtYXRyaXgoLjEzIDAgMCAtLjEzIDAgNTkyLjkzKSI+PHBhdGggZD0iTTI1NDIuODggMjg4My4zNmgtMS4yM2wtMTAwLjczLTMwNS4xNy0zMi4yNC0uOC0xMTEuOTQgMjk5Ljg2LTEuMjctLjAyLTM1LjExLTI5Ny4xNy05My42Ni0yLjM0IDY4LjIxIDQ5MS43NiA2NS44OCAxLjYyIDEyNS41Mi0zMTEuNTcgMTA0Ljc5IDMxNy4yOSA2Ny4xMyAxLjY2IDgzLjYxLTQ4Ny45OS05My42NS0yLjMtNDUuMzEgMjk1LjE3IiBmaWxsPSJ1cmwoI28pIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNwKSIgdHJhbnNmb3JtPSJtYXRyaXgoLjEzIDAgMCAtLjEzIDAgNTkyLjkzKSI+PHBhdGggZD0iTTI4NzQuMDEgMjk4MS41M2wtMS4yNy0uMjYtMTYuOTctMTgwLjM3IDExMS4wMSAyMi41MnptLTI5LjI2LTI2MC4zNGwtMTguNDItMTA2LjQtOTYuMTMtMTkuNDkgODUgNTE3LjAxIDcwLjY4IDE0LjM1IDI3NC43NS00NDQuMDgtOTcuMzYtMTkuNzUtNTYuMDQgOTEuMjktMTYyLjQ4LTMyLjkzIiBmaWxsPSJ1cmwoI3EpIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNyKSIgdHJhbnNmb3JtPSJtYXRyaXgoLjEzIDAgMCAtLjEzIDAgNTkyLjkzKSI+PHBhdGggZD0iTTMyNDYuMzkgMjk4Ni44bDExLjI5IDQuMTljNDguMDkgMTcuNzQgOTIuMjUgNDQuNDYgNzIuMjMgOTkuMTMtMjMuNzUgNjQuNzgtNzUuMTIgNTIuOTctMTIxLjQzIDM1LjgzbC0xMS44OS00LjM5em0zMDQuODYtMTYxLjk1bC04OC4xOC0zMi41Mi0xNDkuNDkgMTUxLjA5LTQ0LjU3LTE3Ljc1IDY2Ljc0LTE4MC40OS04Ny4yNy0zMi4yNy0xNjUuNDkgNDQ3LjY0IDExOC4xMSA0My42NWM4OC40OSAzMi43MiAxNzMuNTkgMjguNDkgMjE1LjE3LTc5LjQ1IDE2LjcyLTQzLjQtMS45MS05NC4wOC0yOS4xMi0xMjkuODMtOC4zNC0xMC45MSAxNjQuMS0xNzAuMDcgMTY0LjEtMTcwLjA3IiBmaWxsPSJ1cmwoI3MpIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCN0KSIgdHJhbnNmb3JtPSJtYXRyaXgoLjEzIDAgMCAtLjEzIDAgNTkyLjkzKSI+PHBhdGggZD0iTTE5NDYuMzcgMTQ3Ny4xNHY3MjYuODFoMzk3LjM1di0xMjguMTZoLTI0Ni4yM3YtMTY3LjQ2aDE3Ni41MnYtMTI2LjI3aC0xNzYuNTJ2LTMwNC45MmgtMTUxLjEyIiBmaWxsPSJ1cmwoI3UpIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCN2KSIgdHJhbnNmb3JtPSJtYXRyaXgoLjEzIDAgMCAtLjEzIDAgNTkyLjkzKSI+PHBhdGggZD0iTTIzNjAuMTQgMTE3Ni42OXY3MjYuMjFoMzk3LjI1di0xMjcuNzRoLTI0Ni4yNXYtMTY3LjMyaDE3Ni40NnYtMTI2LjM1aC0xNzYuNDZ2LTMwNC44aC0xNTEiIGZpbGw9InVybCgjdykiLz48L2c+PC9zdmc+");
+  height: 16px;
+  margin-bottom: 4px;
+}
+
+.ife {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MzcuMzMzIiBoZWlnaHQ9IjUzNC42NjciIHZpZXdCb3g9IjAgMCA2MzcuMzMzMzEgNTM0LjY2NjY5Ij48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGQ9Ik0xNTM5LjEgMzQwNi40M2MwIDMwOC40MSAyNTAuMDEgNTU4LjQxIDU1OC40MSA1NTguNDFzNTU4LjQxLTI1MCA1NTguNDEtNTU4LjQxYzAtMzA4LjQtMjUwLjAxLTU1OC40LTU1OC40MS01NTguNHMtNTU4LjQxIDI1MC01NTguNDEgNTU4LjR6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PHBhdGggZD0iTTQzNi4wMSA2OC42MDhjLjM2Mi02LjMxMy4yNi0yMS4yNjMgMi4zOS0yNC40NTcgMjEuMzggMTAuODI2IDYwLjQyIDQyLjMwNyA3NS4yMyA2OC44MjIgNS43LTkuODQ0IDcuOTczLTE3LjYzNSAxMC42MzQtMTkuNzY1IDQ1Ljg2IDU0LjM5OCA0OS4wMDcgNjUuODg4IDU2Ljk5MyA4NS42MjQgNi41MjItNC40NSAxMi44ODItMTguOTYgMTcuMTQyLTIzLjIyIDExLjE5NyAzNS4xOTUgMjAuNzE1IDc4LjQzNyAxNC44NTcgMTA2LjE3OCAxMC4xNDgtMy42MjcgMTQuODgzLTguMzQ4IDIyLjg4OC02LjIyLjU3MiAzMC05LjUzNCA3Ni44NTctMjcuNjU2IDEwMS40MDMgNy41NTggMi41OSA5Ljk0IDEuODE0IDE5Ljg4MyA3LjM0LTExLjE5OCAyNS42MS00OC42OTggNTcuNzI0LTc5LjYzNCA3MC41MiA2LjUyIDQuNjY0IDEwLjc5NiA5LjM3IDE2LjY3IDE4LjQ0LTE5LjczNy0xLjYxNS02NS41NTUgMzUuNDEyLTEwNS42MyAyOC44OS41MzIgNi40MDcgMTMuOTQ3IDE1LjQ3NiA3LjU1NyAyMS4zMzQtMjIuOTI1IDIuNjctNDkuNzkzIDIuMDQtNTcuMjY1IDIuNTktMy42MjctMTEuNzAyLTEuNTUzLTIyLjU4Mi00LjY2My0yNy4wMzItMjAuMjcgMjAuMjY4LTQ5LjI3IDM2LjM2OC0xMTIuMjAzIDUwLjc2MiAwLTExLjIgNy41MDQtMTUuNzI3IDguODUyLTIyLjQyMi0xMy4zMyAxMC4xMTctMzUuNDQ3IDEzLjc1LTEwNS4zMiAyNi41NDggNC44MS02LjQwNyAxNC4xMDUtMjEuNTg2IDE4Ljg5Ny0yNi45MS0yMi40MiAyLjU0LTgwLjAxNyA0LjA4LTEwMC44MTgtOC43MTcgNi4yMTYtOC41OTUgMTMuMTQtMTAuNzgyIDE3LjQtMTcuMTg4LTI1LjYwMi05Ljk1Ni00Ni43NC04LjU5NS04MS40LTQwLjU5NSA4LjUyLTQuNzkyIDEyLjIyLTYuNzM1IDE5Ljk5LTEwLjE1LTMwLjQtMTguNjctNDYuNDQ3LTQ0LjMxMi01OS4yOS03NS41ODcgMjEuNjk2LTIuNTQgMjUuNjMzIDMuNDIyIDMxLjYzNyAyLjkwM0MyLjMwNCAzMTIuNDktMS42MTUgMjYwLjE0NiAyLjEzIDI1MC4wMTJjNC44IDEuNTA3IDguNTQzIDIuNjgzIDEzLjMzNiA1LjM0NS0xNS4zNTgtNjIuNzE0IDI3LjQxLTEyMC4wNSAzMS42ODctMTIxLjExNCA4Ljg0NyA2LjU3MyA4LjM0IDE1LjkyNSAxMy45MjcgMjMuMzI2IDguODUyLTM3LjA4IDYwLjczNC03OC42NTggNjcuOTg1LTk1LjgzIDQuMTQgNi44NjggNC44NjcgMTQuNjMyIDguMjc4IDI0LjU3MiAxMi4yOC04LjUzNiA0NC41MjQtNTEuMjMgNDguNzgyLTYxLjg5NyAxMy42MjIgMTEuODMtNS42NTggOTMuNTgyLTEyLjA2NiAxMTcuMDQ1LTYuNDA4IDIzLjQ2NCAyNS40MTIgMjUuODggMjUuNDEyIDI1Ljg4bDEwMi45MiAxMi4yNjUgNTAuMTQtMTguMTIgNTEuMjA0LTEwLjEzNnM2Ljc4LTEwLjIzIDUuNzE1LTE5LjgzYy00LjI1OC0yMS44NjctMzkuMDM3LTQxLjIxNi01My4yMy0xMTIuMTcgMjcuMjEgMjQuMDEgNTkuOTA3IDI4LjY1IDc5Ljc5IDQ5LjI1OCIgZmlsbD0iIzIzMWYyMCIvPjxwYXRoIGQ9Ik0yMjUuNyA0OTUuMjc1Yy0yLjM2NCAxLjQ3LTQuMzk3IDIuNzEyLTUuOTcgMy42MjYtMTAuOTAzIDYuMzQtNTUuOTcgMTAuMzgtOTYuMTAyLTIuMTc1LjI5NC0uNDkzLjYtLjk4LjkxNi0xLjQ2em0yNS4zNzcgMGMtNC40MTIgMy4yNTYtNy4wMDQgNi43OC03LjE2NiAxMC4zOCAzLjgzLTMuNDY3IDEwLjg0My03LjA5NyAxOS4wNzQtMTAuMzhoNDguMTY4Yy0yNi4wMjQgMjMuODUtOTAuMzc3IDI5LjA4NC0xMDQuMDA0IDMyIDQuMDk3LTEwLjYxNCAxNS40Ni0yMS45OTIgMjcuODY0LTMxLjk5M3ptODkuOTcgMGMtMy4zNSAyLjAwNC02LjI5NSA0LjI0Ni04LjYwMiA2LjgyIDEuMTQyLTIuNTY3IDIuNTctNC44MTggNC4yNTUtNi44MmgtMjAuMjE2Yy03LjYyMyA4LjQxLTE0LjI3MiAxOC4yMjgtMTguMDUzIDI5LjA5NyA4LjAzNC0xLjIzOCA0Mi41NC0xMy4yOTcgNzEuNDUzLTI5LjEwMnptMTE5LjIxIDBjLjExNC42Ny4xOTQgMS4zNTIuMjM1IDIuMDQ4LTE3LjA1NiAwLTM4Ljk5NyAyLjEzLTQ1LjEgMi40MzQtLjUzNy0xLjU2My0xLTMuMDU0LTEuNC00LjQ3OGw0Ni4yNjQtLjAwNSIgZmlsbD0iI2ZkZTAxMiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTE2OS4yNDMgNDYzLjI3NXYuMDY4Yy0yOS40OSAxNC4zODYtNTQuMzUyIDExLjQ0LTc3Ljc3NC0uMDc1em0yNDAuMzA4IDBjLTUuOTkzIDEwLjk3NS0yMS43NTUgMjIuMjA0LTM5LjY2NiAzMS45OTVsLTI4LjgzNy4wMDVjMTguODUtMTEuMjYgNTAuNDkyLTE0Ljg3OCA1Mi45MDgtMjYuOTUtMjQuNjM2IDExLjM5LTQ2LjM0MyAxMy45ODItNTcuMjU1IDI2Ljk1aC0yMC4yMTZjNS41MjMtNi4wOTIgMTEuNTYtMTEuNDQ3IDE3LjM4NS0xNS45MjgtMzIuODUzLTIuNzQtNjguMDI1IDUuMDYtODIuNzkzIDE1LjkzNGwtMTYuMDY1LS4wMDVjMTYuNjgtMTMuNDQyIDM1LjI0LTI0LjQwMiA0MC41NDMtMjcuNjYyLTEwLjE4OCAyLjQwNC0zNS44MzYgMTguOTY1LTQ5Ljg1NiAyNy42NjVsLTEwMS4xNTYtLjAwM2MxMS45NC0xOC4xMTcgMzkuNzYzLTI2LjM4MyA2MC42Ni0zMS45OTN6bTIwLjA2IDBjMTAuOTMzIDkuNTE0IDI4LjI3OCAxOC4xMTMgMzAuNjQ2IDMyaC00Ni4yNjRjLTQuOTE3LTE3LjU2OC4yMjUtMjQuOTcyIDQuMDEzLTMyem05Mi43OTggMGMtMjcuNTkgOS45OC02MS42NTYgMTguMS04My4zMTYuMDA3em0tMjU5LjQyNCAzMmMyMy44Ni05LjUxNiA1Ny45Ni0xNi4xMiA1NC41MjUtNy4zOTYtMS43MTQgMi42NDctMy44NiA1LjExLTYuMzU4IDcuMzk4em0tODguNzYtOC44MmMxOS4yLTguMTc2IDU1LjExMy0xMi40NDUgNzguOTMtMTQuNTgtMTYuMzUzIDguNTQtNjEuODY2IDE0LjU4LTc4LjkzIDE0LjU4IiBmaWxsPSIjZmRlMDEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNDAuNDY1IDMxMy45NGM2Ljg0MiAyMy41NjUgMjkuNDk1IDQyLjczMyAyOC41MTYgNTUuNTM3LTE5Ljk5Ny04LjAzOC0zOC40OS0zMC44MTQtNTAuMzQ2LTU1LjUzMnptNTYxLjQ2IDBjLTE0LjE3MiAyNS45MDgtMzcuNjU3IDQ4Ljk3NS00NS44MzQgNTUuODkzIDguNTMtMS40MjIgNDYuNDUtMTMuOTUgNjcuMDU4LTQuMzczLTUuMDggMTUuMzg0LTYzLjUwOCA2NS44ODMtODEuMjgzIDY0LjQ2LTE1LjY0LTQuNjE4LTI0Ljg5Mi04LjE4NC0zMy43NzgtMi44NDYgMTUuMjkyLTEuMDYgMzguNiA4LjQwNiA1MC4zMzQgMjIuMjY4LTguMTUgMi42NDItMjEuMTQgOC41Ni0zNi4wMTIgMTMuOTM3bC04My4zMTYtLjAwNWMtMi44MjUtMi4zNTMtNS40NC01LjE1OC03LjgtOC40NjQtMTguNDk1LTE0LjU4LTExLjM3Ny0xNi4wMDItMTEuMzc3LTE2LjAwMnMtNC42MzQgNS4zNDQtOC4xODQgMTguODVjLS40MTQgMS44NTctMS4xNTQgMy43My0yLjE4IDUuNjFsLTIyNC4zNDcuMDA3YzEwLjA0NS0yLjY5IDE4LjQ5LTQuNzczIDIyLjgtNy4wNC0zMC45NCA4Ljg4Ny03My45NjItMTIuNDQ2LTk0LjIyOC03LjgyOCAxLjc3NCA1LjMyMiA1NS4xNyA1LjY5IDU1LjQ2OCAxNC44NmwtNzcuNzc0LjAwOGMtMTEuMzE0LTUuNTY3LTIyLjI5Mi0xMy4xMjctMzMuMjkzLTIxLjY5NyAxNi4yNTQtMTIuNDggNjguOC05LjQ1IDkyLjI2OC0xMC4xNi0xOC43NDItMy4xMS0zOC41Mi0xMy4yNTctOTMuNTU0LTQ3LjcxNSA0LjYyIDE4LjQ4NyA2MC4wODggMzQuNDkgNTkuMzc2IDQyLjMxLTUwLjEzIDguODg4LTczLjI0NC0xMy41MTItOTguNDktNjcuOTEzIDI2LjEwNi00LjM5NSA1Ni4xOCAyNS45NiA3OS4yOTIgMjkuNTEtMTkuNzctNy4xOS00MC4wNDUtNTYuMjYzLTUyLjEwOC03My42NzV6bTIyLjI5MiAwYy0xMS41MzYgNDQuNjUzLTMxLjc0OCA0Ni42MjctNDguOTMgNDcuNzE3LTMuOTk4LTcuOTk3IDIyLjU3LTI2LjM1IDI5Ljg0LTQ3LjcxOHpNNDE4LjAwNSA0NjMuMjc2YzEuODMyLTMuNCAzLjM0Ny02LjcxIDMuMjUyLTExLjA0MiAxLjI1NCA0IDQuMzggNy41OCA4LjM1MiAxMS4wMzd6bTEwMi44ODMtMTIuMDJjLTEwLjY2NyA2LjQwMy01Ny45NTIgMC02OC4yNjMgMy4yIDguNTMyLTExLjM3NyA0NS4xNS0yLjQ5IDY4LjI2My0zLjJ6bTU0Ljc1Ni02Ny41NTJjLTUuNjg1IDcuODItMjkuMTUzIDI3LjczLTM5LjEwOCAyMS42OSA0LjYxNy00LjI3IDI5LjE1My0xNC45MzcgMzkuMTA4LTIxLjY5IiBmaWxsPSIjZmRlMDEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNDQuMjAyIDIzOS4yNzVjMS4yMDQgMTQuMzMyIDIuMDk2IDI3LjkzNC4yNDQgMzEuMzU3LTE2LjI5LTUuMy0yNC4yOTctMTcuMDItMjcuMDg4LTMxLjM2NXptNTQ0LjI1NSAwYy0yLjYzOCAxOS41MjItNS44MjggNDEuNjMyLTExLjAzMyA1MC45MSAxNS42NC0xLjc3OCAzMy45NTUtMjguODczIDU0LjU3Ni0yOS45NC0xLjU3MyAyMi42MjItNC4yOCA0MC4xMy03Ljc4MyA1My43bC0xOS4wOS0uMDA0YzEuMTQtMy4zNSAxLjgwNi02Ljc3MyAxLjgwNi0xMC4yNC0xLjQ3NiAzLjQ0LTMuMTY0IDYuODY0LTUuMDEgMTAuMjRINDQuOTZjLTIuMjU3LTMuMjYzLTQuMjI2LTUuNDEyLTUuODUtNS45NzIuMzI2IDIuMDIuNzg2IDQuMDA4IDEuMzU1IDUuOTY4bC0yMS44My4wMDVDOC45ODggMjkzLjgzNCAzLjc0IDI3Mi40MzYgNS42NSAyNTYuNjQ0YzM0LjQ5IDE0LjU4IDQ2LjYxNCAyNy44NTcgNTUuNTAyIDMxLjA2LTguNjQtNS4zNTUtMTEuOTIzLTI3LjM4LTEzLjYzNy00OC40M3ptMjIuNzQ4IDBjLjA4MiAxOS44OTItNS4zNyAzNS42OS0yMS42OTIgMzguMTE3LTEuMy0xNC4zLjIxLTI2Ljg1MyAxLjY0OC0zOC4xMTZoMjAuMDQ1IiBmaWxsPSIjZmRlMDEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTcuMzU4IDIzOS4yNzVjLTcuMzIyLTM3LjYzNSAyMS4yNC05My4zMTIgMzAuMjUtOTguNDYgMTcuNjk0IDI2Ljc5MiAxOC41MjcgNjEuOTEgMjcuMDYgNzcuNTUtMi44NDgtMTguNDg2LTIuMTM2LTIzLjExMiAyOS4xNTItNzkuNjQtMy4xOTUtNi40MDUtMjEuNjkgMjcuNzMtMjkuNTEgNDUuNTA2LTMwLjkzMi0zMy43NzggMzYuMDU2LTg4LjkwMyA1NC41NDMtMTEyLjcyIDcuMjU2IDE4LjQzLTIuOTggNjYuODUtNy4yNSA3OS4yOTggOC44ODgtMTcuNDIgMzguMzk3LTUxLjU1NSA0Ny42NC02NC43MTIgMC0xNC41OC0zNC4zNSA0OC45MTMtMzIuNTcyIDI2Ljg3NiAxLjA3LTMwLjkzMyAzMy45OC01NC42OTMgNDcuODUtNzYuNzQgOS4yNCA5Ljk1Ni0zLjU0MyA2My43NC0xNS45ODggOTkuNjQ3LTEyLjQ0NSAzNS45MDUgMTE5LjExMiA3My45NTMgMTE5LjExMiA3My45NTNsMTI0LjQ0My0zMy43NzhzMjIuNTc2LTIyLjgxNCA2LjU4LTQ0Ljg1OGMtMTcuMDY0LTI0LjE3My01MC4yMjQtNjIuNDQ2LTU1LjkyNC0xMDMuMDQgNDEuNjMgMzMuMzQgNjYuODIgMTguNjggODEuNDAyIDc0LjE0OC0zMi0yMC45NzctNDQuMTUtNDEuODA1LTUzLjM5Mi00NC42NTIgMTMuODY4IDIzLjgyNCA1MC40OTUgNDIuNjY3IDY3LjkxNCA3My45NTYtNS42ODYtMjguMDg3LTIwLjk3OC00MC41MzMtMTcuNDItODAuMzUzIDU4LjMwOCAzNy4zMyA3My45NTYgNjUuMDY3IDY4Ljk3NCA5Ni43MS0yOS4xNTItMjIuNzU1LTM2LjI2Ny00Ni4yMjMtNDMuNzQtNTAuMTM2LTEuNDE2IDEwLjY2NyAzOC40MSA1MS45MTggNTAuODUgNjguNjI2LTQuMjYyLTI4LjggMS43ODYtNjQuNzEyIDguMTgzLTY2Ljg0NyAyNS4yNCAzMC45MyA2Ni4xMzUgNzcuMTU3IDQzLjM3OCAxMTAuOTM1LTEzLjE1NS05LjU5OC0xMS43MzMtNDQuNDQ1LTMyLjM1NC02NS43NzggNC4yNiAyMC4yNjUgMzIgNzAuMDQgMjkuODY1IDkyLjc5NyA2Ljc1My02LjM5NyA3LjQ2NS00NS41MDUgMjkuODY3LTcxLjQ2NCA2Ljc4NiAxOS41ODcgMTQuODQyIDQ5LjMyNSAxNC45MzggNzMuMThsLTIwLjA0NC0uMDA1YzEuMzE2LTEwLjMwMyAyLjU2OC0xOS41MjYgMS41NDgtMjguMDE4LTEuNDIgNi41ODctMi43NDUgMTYuODgyLTQuMjUgMjguMDJsLTU0MC45NC0uMDAyYy0xLjI1LTE1LjMyNC0xLjY2Ny0zMC4xMy0yLjcxNi0zNy42MTgtNC44OTctNi44MTQtMi40IDE2LjIxNC0uNiAzNy42MTZsLTI2Ljg0NC4wMDIiIGZpbGw9IiNmZGUwMTIiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0yODMuNDMzIDExMS41NEMxNzYuNzY3IDExMS41NCA3MC4xIDE2OC44NyA3MC4xIDI3NC4yMDRjMCAxMDQgNzcuMzMzIDE5MC42NjcgMjQ4IDE5MC42NjdzMjU3LjMzMy03MC42NjcgMjU3LjMzMy0xNjEuMzMzYzAtMTc2LTE4NS4zMzMtMTkyLTI5Mi0xOTIiIGZpbGw9IiMyMzFmMjAiLz48cGF0aCBkPSJNMjAwLjA2NCA4MC40NzZjMC00My45NjUgMzUuNjQtNzkuNjA0IDc5LjYwNC03OS42MDRzNzkuNjA0IDM1LjY0IDc5LjYwNCA3OS42MDQtMzUuNjQgNzkuNjAzLTc5LjYwNCA3OS42MDNjLTQzLjk2NSAwLTc5LjYwNC0zNS42NC03OS42MDQtNzkuNjA0IiBmaWxsPSIjMjMxZjIwIi8+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiBmaWxsPSIjZmRlMDEyIiB0cmFuc2Zvcm09Im1hdHJpeCguMTMzMzMgMCAwIC0uMTMzMzMgMCA1MzQuNjY3KSI+PHBhdGggZD0iTTE5ODguNzMgMjgyNy4xbC0yNjYuOTMgMTIzLjYzLTEzNy4yNCAxNTQuNjggOTAuNDItMTQuNiA4My44NyAxMTUuNDUgMjIxLjg3LTUxLjM3IDY4LjQ3LTE2Ny43OXMtNjEuNTUtMTEyLjQxLTYwLjkzLTExMi40MWw4OC44MSA5NS43NCAyMDMuNzgtMjUuMDIgMTMyLjkgMTM5LjE1IDEyNS4wNC01LjE0LTEyMi45NiAzMi4yNC00NS4yIDE1My42NSAxMDcuOTMgMTkxIDE1MC4xNy01Ni43IDM5LjYxIDY3LjQ5IDE1LjI1LTg3Ljc2TDI2MDcuMSAzMTIwbC02Mi41NC04Mi4wOS0yNTkuNTQtMTgyLjkzLTI5Ni4yOS0yNy44OE0xNzAzLjUzIDM3OTIuMzdsODguOTgtNDQuODggNDIuODEtMTQ1Ljc1LTE1NC4wOC0xODAuNS0xMDkuOTcgODguMzMtNzUuODMtMTA5LjE4IDEwMS42MyAzMTAuODggODYuMjUgMTA5Ljk3IDE5OS42MSAxMzAuMDMgMjc4LjMxIDM0LjE0IDIxNC4yLTcxLjY2IDE2NC45NS0xMzIuOS0xMDEuNjIgMjEuNjItNDUuODctMTMwLjgxLTIxMi45IDQ3Ljc2LTUwLjgxIDExOC40OSA3OS4wMiA5Ni44My0xMDYuMTItNzUuOTgtMTgyLjk0IDM2LjIyLTExOC4zLTEyMi40Ny05Ny4zMiAxOS44NiIvPjxwYXRoIGQ9Ik0yMTgwIDM3MDIuODFsMjA2Ljc3LTUyLjgxIDc2Ljk3LTE3OC4xMy0xMTEuNjUtMTkxLjY2LTIwNy4zNSA0OS43OS04OS40NyAyMjkuNDJMMjE4MCAzNzAyLjgxTTIxMjQuMTcgMzMyMC45NGwtMTM1LjkxLTE0Ny40MS0yMzIuOTQgNTEuNzktNjQuMzggMTgxLjY2IDE1My45NSAxODEuMTUgMTg3LjItMzMuMjQgOTIuMDgtMjMzLjk1Ii8+PC9nPjxwYXRoIGQ9Ik0xMDkuNTI4IDM3MC41ODdjNS43MDggMzguODIgNTYuOTc2IDQwLjMzIDY0LjgyMiA0MC4zMyAzOS44OTUgMCA2Ni4xMDQtMTEuMzkyIDY5Ljk1My0xMi4yMDUuNTM0IDIuOTg0LS42NCAxNC41NCA0Ljk4MyAxNC41NCA3LjQxNCAwIDE1LjIxMy05LjIgMTguNzAyLTI1LjE1IDQuNTI1LTIuNDUgMTUuNzMyLTguMjkyIDI5LjIxOC0xNy41MWwtOS42MzctLjAwNWMtNS41MDUgMy40NDUtMTEuMzc0IDYuNzczLTE3LjYyNiA5LjkzNi43MDctMy4wNyAxLjI5Ny02LjQyIDEuNzgtOS45MzNsLTUuMzEzLS4wMDNjLS41MyA0Ljc0LTEuMjU1IDkuMDE3LTIuMTYzIDEyLjU1NC0yLjkxIDEuNTY0LTYuNzIgMy4xMS02LjcyIDMuMTEgMC0zLjc2Ni4wMzctOS4yNTIuMTEtMTUuNjdsLTExLjg1NC4wMDdjLS4zNDUgNi4xNjQtLjc3IDEzLjEyLTEuMjk0IDIwLjc4LTE0Ljg3NiA0LjcyNS0zNS4zNTMgOS4yNDYtNDkuNjQgOS4yNDYtMTEuMjggMC0zNi44Ni04LjYyNi00OC41Mi0zMC4wMjZ6bTkxLjY2NCAwYy0yLjk3IDcuNDEyLTUuNDIgMTQuODktNS44NDUgMTkuMzM2IDMuMzI0LTQuNTQgNS45NTctNi43MyA1Ljk1Ny02LjczLjkzLTMuODIgMi40NjMtOC4zMyA0LjIxLTEyLjYwN3ptNTYuNDQgMjIuMzUzbDQuNzM1LTIuMzY3cy0xLjI5NiA0LjcyOC00LjczNiAxMC4zNTd2LTcuOTkiIGZpbGw9IiNmZGUwMTIiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMjEuOTM4IDMyNy45MjJjLTcuNDEzIDExLjE0My0xMi45MjcgMjMuNDQ3LTEyLjkyNyAzNS4zNjggMCAyLjU2OC4xOCA0Ljk5Ny41MTggNy4yOTZoMzYuODAyYy0zLjctNi43ODQtNS45OTgtMTQuODUzLTUuOTk4LTI0LjMzOCAwLTYuNzQuODkyLTEyLjgzNiAyLjM1Ni0xOC4zMTh6bTkyLjcwNSAwYy0xLjQxNiAxMi41NTMtMy40ODYgMjEuNzQyLTUuOTQgMjYuMy0yLjI5MyA0LjI2Ny01LjA3NiAxMC4yOTUtNy41MSAxNi4zN2w0LjMyMi0uMDA1YzIuNjY4LTYuNTMyIDUuODM3LTEyLjUxOCA4LjEzNy0xNC42ODIgNC4zMDUgNi44NzggOC42NDggNy42MzggMTIuMDEyIDcuNjM4IDkuMzE1IDAgMTkuNDktMjAuNjQ2IDIxLjUwNi0yNC4zNDcgMCAwLS4yNzIgMTEuNTQtMS4zODcgMzEuMzk4bDExLjg1My0uMDA3Yy4xNDItMTIuNjI2LjQyMi0yOC44NDcuODMyLTQyLjY2NGgtMTMuNjg2Yy00LjE3NiAxMy4xMjUtMTMuNTc4IDI3Ljk4Mi0xNi43NjIgMjcuOTgyLTMuMiAwLTIuMjA4LTE0LjE2OC0xLjE0Mi0yNy45ODV6bTEyMC41NjMgMGMtMTEuMTQyIDE0LjYyNy0yNi43NTUgMjkuNTUtNDcuNjM3IDQyLjY1Nmw5LjYzNi4wMWMxNC44NDItMTAuMTQyIDMyLjQ0NC0yNC4zNzUgNDYuOTQtNDIuNjczem02OS4zOCAwYzMuMzc3IDEuMTkgNy4wMTMgMS43NTggMTAuNTQ0IDEuNzU4IDYuNzkgMCAxMy4yNTQtLjYxNyAxOS4zNy0xLjc1OHptLTEzOC4xNzUgNDIuNjY1YzEuNDMtMTIuNzggMS40MzgtMjguODg2LS4yMjMtNDIuNjY3bDYuNzEyLjAwMmMuNDIgNC4yNjUuNjQ4IDguNzc3LjY0OCAxMy41IDAgOS40NDctLjU0MyAxOS44OC0xLjgyMyAyOS4xNjhsLTUuMzE0LS4wMDMiIGZpbGw9IiNmZGUwMTIiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMzkuMTgyIDMwNi41OWMtNS44NDggNi4xNzYtMTIuMDE4IDEzLjQ2Mi0xNy4yNDQgMjEuMzI1bDIwLjc1LjAwN2MyLjI5NC04LjU4MyA1Ljk4OC0xNS42NiA5Ljg1LTIxLjMyOHptNzcuMDY2IDBjLS4zNDcgNy44NTctLjg5MyAxNS4wMjItMS42MDcgMjEuMzM3bDEyLjIzOC0uMDA1Yy41NjItNy4yODIgMS4xNDMtMTQuNDY0IDEuMTQzLTE5LjQyNyAwLS42MjYuMDA4LTEuMjYyLjAyLTEuOTA2em0zMi43NDIgMGMtLjcxNSA1LjktMS44MTUgMTIuNDMtMy4zNCAxOC4zMjUtLjI1My45ODctLjU0NSAxLjk5LS44NjggMy4wMDdoMTMuNjg2Yy4yNTItOC40OC41NTQtMTYuMDUyLjkwNC0yMS4zMzN6bTI2Ljg5OCAwYzIuNDEyIDIuOTA3IDMuOTY0IDUuMzk2IDExLjQxIDUuMzk2IDUuNTczIDAgMTAuODM2LTIuMDM1IDE1LjQwMi01LjQwNHptNzIuNzEgMGMtMy40MjggNi44Ny03Ljg2IDE0LjA2Mi0xMy4zOTIgMjEuMzI4bDguOTQuMDA0YzUuMjEyLTYuNTg4IDEwLjAyMi0xMy42OTUgMTQuMTU4LTIxLjMyNXptNDEuMzE4IDBjLS4wMi40NDMtLjAyOC44OS0uMDI4IDEuMzQgMCAxMC43MjggNi41OTUgMTcuMTUgMTQuNyAxOS45OTdsMjkuOTEzLS4wMDVjMTguMDMtMy4zNjMgMzMuMDYtMTEuMjc0IDQ0LjY2Ny0yMS4zMjRsLTE3LjIyNS0uMDFjLTE1LjIxMyA5LjA1OC0zMi45MzMgMTMuODY3LTQ3LjYyNyAxMy44NjctOS42OCAwLTE0LjA3Ni03LjAzMy0xNC42NjUtMTMuODY0em0tMTIzLjczIDIxLjMzMmMtMS4wMTMtOC40MDItMi42NDYtMTUuOTM3LTQuOTU0LTIxLjMzbDcuNDY3LS4wMDNjMS45MiA2LjA2MyAzLjQgMTMuMjU0IDQuMiAyMS4zM2wtNi43MTMuMDAyIiBmaWxsPSIjZmRlMDEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTQ5LjgyOCAyODUuMjU2YzIuNDYyIDEuNzcgNS4wODcgMy4wODUgNy43MTYgNC4xMDItMy43MjcgMy4wOC0xMC43NzIgOS4yMTgtMTguMzYyIDE3LjIzM2gxMy4zNTdjNS44NDMtOC41NzMgMTIuMDctMTMuOTE2IDE0LjM5My0xNi4zNyAxMS41NTUgMS42OSAyMi4zNTYtMS4wMTggMjkuODMtNC45NnptNjYuODUzIDB2LjkzMmMwIDcuMTk3LS4xNSAxNC4wMjgtLjQzMiAyMC40MDVsMTEuNzkzLS4wMDRjLjEzLTYuNTAyLjg5My0xMy45IDEuOTYtMjEuMzN6bTIzLjIzNCAwYzEuMjQgMy4xMSA3LjA4IDYuMDA1IDEwLjEwNSA3LjIxNi0uMDEzIDMuMzgtLjM0NCA4LjQ2LTEuMDMgMTQuMTE4aDEwLjM4MmMuMDgtMS4xOTcuMTYtMi4yNzcuMjQ2LTMuMjIzLjU3Ljk2NCAxLjEwNyAyLjA0MyAxLjYxNCAzLjIyNGg3LjQ2N2MtMi4zMjgtNy4zMzctNS4yOTYtMTMuMDE2LTguNDYtMTYuNTg1IDMuMzE3LTEuODg3IDcuMzEtMy4zMzMgMTEuMDYtNC43NXptNDUuMTcgMGMuNzE0LjE3IDEuNTU4LjI3NSAyLjU4Mi4yNzUgMS4wMjUgMCAyLjA2LS4xMDcgMy4wODQtLjI4em0yMC42NiAwYy4xNC41MzYuMjA2IDEuMTc1LjIwNiAxLjk0IDAgNS40ODUtNi4yNTYgMTQuNjkzLTEyLjExNSAxNC42OTMtNy41MyAwLTkuMzUzLTIuOTE3LTkuODUzLTQuODg2bC05LjM1MyA4LjE2M2MuNDYuNDguODcuOTYgMS4yNTggMS40MjdsMjYuODEyLS4wMDVjNi43MTgtNC45NjUgMTEuOTI1LTEyLjgxMyAxNC4zOTctMjEuMzN6bTUwLjcwMyAwYy0xLjQ2IDYuNDYtNC4wMzMgMTMuNjk2LTcuODUgMjEuMzRsOS43MDctLjAwN2MzLjYzNS02LjcgNi43NDgtMTMuODEgOS4xNTUtMjEuMzI2em00Mi40NTQgMGMtNS4zNzQgNi4zNC04LjY0OCAxMy40NzMtOC45ODQgMjEuMzNsOS43MzQuMDAzYy0uMDQ3LS41MzUtLjA3LTEuMDctLjA3LTEuNiAwLTYuMTc4IDQuNDc0LTEzLjExIDExLjkyMy0xOS43Mzd6bTYzLjA0MiAyMS4zMzNjOS4zMzYtNS41NTIgMTcuNzI3LTEyLjcwNSAyMy44OTctMjEuMzI1bDExLjMyOC0uMDFjLTQuNTIyIDcuNTc1LTEwLjU2IDE0LjktMTggMjEuMzQzbC0xNy4yMjYtLjAxIiBmaWxsPSIjZmRlMDEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTM3LjMzMyAyNjMuOTIzYzIuMDMgMTAuNzggNi44MzMgMTcuMjU4IDEyLjQ5NSAyMS4zMzJoNDYuOTM0YzYuMzItMy4zMyAxMC4yNi03LjU1IDEwLjI2LTEwLjc0MyAwLTYuOTY2LTQuNjAyLTYuNDYtOC44NzYtNi40Ni00LjI3NSAwLTE5Ljk4MiA1LjM3Ni0yOS45NDYgMTMuNDU2LTQuMjQ3LTIuNzI3LTEwLjkwOC05LjAzMi0xMy43ODQtMTcuNTg2em04MC4yMDQgMGMtLjU2IDYuNDg4LS44MzYgMTMuNjYtLjg1NiAyMS4zMzJIMjMwYzEuMDU0LTcuMzU1IDIuNDEtMTQuNzQ1IDMuNzQtMjEuMzN6bTMzLjA2MiAwYy4wNDggOC44NzUuMjIyIDE2LjE1Ny0uMjkyIDE5LjMzLTMuMDQ4LTEuNDI0LTguNzctMy41NjQtMTAuMzQtLjM3Ny0uMzg3Ljc5LS4zNjcgMS41ODgtLjA1NCAyLjM3M2wzMS4zODUuMDA2YzMuMTQ0LTEuMTkgNi4xMTctMi4zNTcgOC4zNzQtMy43NDggMS44MiAxLjIxMiAyLjYxIDMuMDQ3IDUuNDEgMy43NGw1LjY2Ni4wMDhjNC4wMi0uNjc3IDcuOTA4LTIuMzM1IDEwLjU4OC0yLjMzNSAyLjU5OCAwIDMuOTMzLjU0NSA0LjQwNiAyLjM0bDExLjM1My0uMDA0YzEuMDIyLTMuNTEzIDEuNTc1LTcuMTQ0IDEuNTc1LTEwLjczMyAxLjg2LTIuODMgNS42NjMtNy41NzMgNy4xMzMtOC43NzctLjYzIDcuMjA1LS41ODQgMTguNzczIDguNTc1IDE4Ljc3MyAxNC41NTcgMCAyMS40NTgtOS45ODUgMjQuOTUtMjAuNmwtOS40NzIuMDAzYy0yLjAzMiA1LjEwMy00Ljc3MyA5LjE0LTkuMDMgOS4xNC0yLjQzNSAwLTMuMjk4LTMuODMtMy4zOTUtOS4xNEgzMjIuMThjLTEuNCAxLjk5My0zLjEwNSAzLjc0NS01LjIwNyA1LjMxNi03LjM0NS01LjEzMi0xNi43NDMtMS4wMi0xOS42Ny0xLjAyLTIuODg4IDAtMy41ODQtMi4zODItMy42MDQtNC4yOWwtMTAuODk1LS4wMDdjLTEuOTMgMy42NzItMy4xMiA3LjI5LTMuNzUyIDkuOTY3LTIuMzYgMi4zNTgtMTIuMjg0IDcuMDItMTguMjg2IDkuODM3LjU0OC02LjQ0NCAxLjAyLTEzLjE2IDEuNDQ1LTE5LjgwM3ptMTc5LjgxMiAwYy0xMi45ODIgNS41MjgtMjQuMTk0IDEyLjY5Ni0zMS41MSAyMS4zMzJoMTIuNmM5LjMwNS04LjI3OCAyMy4yNTQtMTYuMDc2IDM4LjkzLTIxLjMyNHptLTYyLjk1MyAyMS4zMzNjLjU2NS0xLjc2IDEuMDkyLTMuNTUgMS41NzctNS4zNmwtMTIuMTQ1IDMuMjI0Yy0uMTM0LjctLjI4NCAxLjQwOC0uNDQ1IDIuMTI4em0xMTguMzggMGM0LjUzMy02LjMyNyA3Ljg2OC0xMy40NTQgOS40OTMtMjEuMzIybDEwLjQ1Mi0uMDFjLTEuNDkgNi45NzgtNC4zOTIgMTQuMjY1LTguNjE3IDIxLjMzN3ptLTI5MC41OTMtMTAuNTZjLTcuMDM0IDAtMTQuMDk2IDUuNDE3LTE5LjkyMyA5LjQgOS44MSAyLjI3NSAyMy4zMi0zLjEzMyAyMy4zMi02Ljk3IDAtMS45Mi0xLjE1OC0yLjQzLTMuMzk3LTIuNDMiIGZpbGw9IiNmZGUwMTIiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMzcuMTgzIDI0Mi41OWMtLjU4NCAzLjA3OC0uODg2IDYuMTY1LS44ODYgOS4yNDMgMCA0LjU0Mi4zNjggOC41NTIgMS4wMzYgMTIuMDk1bDE3LjA4My0uMDA1Yy0uODczLTIuNi0xLjM5OC01LjQxLTEuMzk4LTguMzkgMC0zLjM4NC43NDItNy44NTcgMi4yNjMtMTIuOTR6bTgzLjk5NyAwYy0xLjcyNyA1LjczLTIuOTIgMTIuOTY1LTMuNjQzIDIxLjMyOGwxNi4yMDQuMDA1YzEuOTk4LTkuODczIDMuOTQ1LTE3LjkzIDQuNzU4LTIxLjMzbC00LjY3Ny0uMDAzYy0uNDg2IDMuMy0xLjgxIDguMzUzLTQuMDIyIDE2LjE2Ny0xLjcxOC02LjM3LTEuODg2LTEyLjEzMi0xLjIzMy0xNi4xNzZ6bTI5Ljg0NyAwYy0uNDMgNy4zMS0uNDY0IDE0Ljc1Ni0uNDI4IDIxLjMyNWwxMS42MTIuMDA4Yy40NjgtNy4zNS44NzYtMTQuNjE0IDEuMjY0LTIxLjMzM3ptNzcuNTEzIDBjLTEuMTc2IDkuNDg4LTIuNzggMTYuMjE3LTYuMzYgMjEuMzI2bDE1LjI1My4wMDdjLS4xMTUtNi4zMjUuODUyLTE0Ljc1NCAxLjUzNy0yMS4zMzN6bTI1LjUzMiAwYy45NiAxLjYwOCAxLjE3NSAzLjY4My0uMDQ0IDcuNzctMS4yMDYgNC4wNS0yLjQyNyA5LjItNC4xNyAxMy41N2w5LjQ3Mi0uMDA3YzIuNDY1LTcuNDk3IDMuMjMtMTUuMzA1IDMuNzkyLTIwLjE0IDEuMjIuMTUzIDIuMDg2LS4zOTcgMi45Ny0xLjE5NHptMTUuNDgzIDBjMS4wNzcgMTAuMzggNy44OTcgMTguODg2IDE0LjM4IDE4Ljg4NiAxNi43NSAwIDIzLjY1Mi04LjIzIDI2LjEwOC0xOC44ODZoLTkuNTVjLTMuNDkgNC4xOC03LjkwMyA2LjUwMy0xMC4wNCA2LjUwMy0yLjc4NCAwLTUuODU2LTEuNDk1LTcuMzMyLTYuNTA4em02MS45NjQgMGMxLjk3IDIuMDQgNC40ODggMy4yODcgNi44IDMuMjg3IDEuNDMzIDAgMy45NjgtMS4yNzcgNi45MjUtMy4yOTJ6bTY2LjQxIDBjLS4zNiAzLjAzLS43MyA1Ljg1Mi0xLjA3MyA4LjA4NC0yMC45ODgtLjEyOC00NS45MjggNC41MTMtNjYuNDQ1IDEzLjI1aDIwLjAyYzE0LjU2Mi00Ljg2NyAzMC42MTUtNy41NCA0NS44Mi02LjM1My0uMTgyIDIuMTczLS40OSA0LjI5My0uOTIgNi4zNjJsMTAuNDUzLS4wMWMuNDItMS45OC43My0zLjkzLjkyMi01Ljg0NSA0LjAzOCAwIDE0LjQ3NiAyLjUgMTYuNjA4IDQuMDIzbDIuNTM1LTYuMDUzYy0yLjY0Ny0xLjY2OC0xMi40NTUtNC4xMTQtMTguNzE2LTQuNDMuMjg3LTIuMDcuNjkyLTUuMjEyIDEuMTY1LTkuMDIzek0yOTMuNyAyNjMuOTIzdi0uMDc3YzAtMS45MiAyLjI2NS03LjY0IDUuNjItNy42NCAyLjM1NSAwIDQuNzI3LS42MzUgNi4wMTYgMi4xOWw5LjAxNS02LjIzNWMtLjQ1My0yLjU3NC0zLjc5LTMuOTMtNy43MjgtMy45My0xMi40MDggMC0xOS43NTcgNy45Ny0yMy44MTcgMTUuNjkySDI5My43IiBmaWxsPSIjZmRlMDEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTU1LjI4IDI0Mi41OWM3LjIzNS0yNC4xNTUgMzIuMDctNjIuMDU4IDc4LjM2LTYyLjA1OCAyNi40NzYgMCAzOS40MjQgMTAuNTc0IDQzLjc1MiAxNy42NzMgMy40IDUuNTc3IDUuMzU3IDYuMzU2IDguMzg1IDYuMzU2IDMuMDI4IDAgNy40NjguNDU1IDE0LjU1LjY3LTkuNDgtMTIuODU3LTI1LjEyLTMzLjE3NS02NS4wOTMtMzMuMTc1LTQ2LjA5NSAwLTkxLjIyNiAzNC41NTItOTguMDUgNzAuNTM1em03OC41NCAwYy41Mi0zLjUxOC4wOC01LjAzMi0xLjI1Ni01Ljc1OC0xLjY3OC0uOTEyLTMuMzAzIDEuNDQ4LTQgNS43NWwtNy4zODQuMDA4YzIuNzMzLTkuMDYgNi44MDUtMTQuMzQ2IDEyLjQ2LTE0LjM0NiA0Ljk0NyAwIDYuMjQ1IDguMzQgNS4xNjMgMTMuMDU2LS4wNjguMjk0LS4xNy43My0uMzA1IDEuMjkyem0yOS42NTYgMGMuODgtMTUuMjcgMS42NDQtMjcuNzE2IDIuNzQzLTMxLjkyNiAyLjAxNy03LjczNy0zLjA3Mi00LjA4Mi01Ljg2NS0xLjQ5Ny02LjE4IDUuNzE3LTguNDk2IDE5LjMwOC05LjMyOCAzMy40M3ptNzUuNDk0IDBjLjM2My0zLjQ4Ni42NDYtNi40NTMuNjQ2LTguMzEgMC04LjMxMiA3LjA4LTUyLjY0IDcuMDgtNTcuNjg1IDAtNS4wNDctMy4wMzMtNC4yODYtNS4wNTMtNC4yODYtMi4wMTggMC02Ljc2IDEwLjkyLTkuMTEgMzAuNjktMi4wMTYgMTYuOTk0LTIuNzc3IDI5Ljc2NS0zLjk5MyAzOS41OHptMjcuMTIgMGMuOTM3LS44NDUgMS44OTQtMS45NjggMy4zMTgtMi44MjIgMCAuOTUzLjA1IDEuODk3LjE0NyAyLjgyNWwxMy41NjYtLjAwM2MtLjU2LTEuOTA0LS44OS00LjMwOC0uODktNy4zMjYgMC0xMC45ODcgOS42MDMtMTcuODUzIDE2LjMyLTE3Ljg1MyA0LjE1NSAwIDYuOTEgNC4yNTcgNi45MSAxMS45MyAwIDUuNDMzLTIuMTkgOS45MjgtNC45NjYgMTMuMjVoOS41NWMxLjY3NC03LjI3IDEuMjgtMTUuNjczLjUzLTIzLjM2MiA0Ljc2Ljc0IDExLjY5Ny01LjM1IDE0LjcyNS01LjM1IDMuMDI1IDAgNi40MiAxLjc0MiA2LjQyIDUuMTA2cy0zLjczIDguNDEyLTMuNzMgMTUuMDRjMCAzLjM5MyAxLjQ2MyA2LjQxNiAzLjUzIDguNTZsMTMuNzI1LjAwNmM2LjYyOC00LjUxOCAxNS4zODMtMTIuNzM3IDE4LjY3LTE4LjU5NSA4Ljc4IDE5Ljc4NiAzMC4zMDUgNS41NDQgMzUuODg1LS43MTQtLjI5IDQuNS0xLjA1NSAxMi40MzQtMS44NyAxOS4zMWgxMC4zN2MyLjExMy0xNy4wMzQgNS41NzItNDcuNDQzIDUuODI0LTU1LjM4NS01LjA2My0uMTA1LTkuMTkgMS4xNDUtMTIuNjUgMS4xNDVsLS45MTIgNS4yMWMtMy4zMy0yLjE5NC01LjI3OC02LjI3NS0xMi4xMjQtNi4yNzUtMTYuNTE1IDAtMjMuNjM0IDIyLjQ5NS0yNS43ODMgMzAuNDQ3LTQuNzE3IDcuMjA3LTcuOTUgMTAuNDQ0LTEzLjMzMyAxMC40NDQtNS4zODIgMC02LjYxLTIwLjgyNi0zLjctMjkuMDAyaC00LjYxMmMtMS44NDggNy40MTYtMTAuMjMgNC4xMzYtOC45ODMtMS4yNDcgMS4yNDYtNS4zODIgNC4wOTMtMTEuNjk3IDQuMDkzLTE2Ljk4IDAtMy4wNS0xLjc0LTUuMzYyLTUuNDQtNS4zNjItNC41MDMgMC01LjcgOS4zLTUuNyAxNC4zNDcgMCA1LjA0Ni40NzMgMTkuNDY0LTYuNjQyIDIzLjUyMi00LjY0NyAyLjY0OC00Ljg0OCAyLjgyMi04LjEzNCAyLjgyMi0xLjY2LTkuOTI3LTQuOTctMTYuNzY2LTYuOTEtMTYuNzY2LTIuNTk1IDAtNS4yNzYgNC44LTQuOTUgMTIuMDEzLTEyLjM5Ni0xLjgzNy0yNi42NDMgMTYuMzMzLTI4LjIxNSAyMi42MjQtMS45ODIgMi4zMTQtNC40OSAzLjk3My02Ljg0NiA0LjYzNy0uMTYyLTcuMjQtMy4wOTYtMTkuMjg2LTEwLjI5NS0xOS4yODYtNC4zNzUgMC04LjM1IDYuMDQ3LTcuNDI1IDkuNTMgMi40NjggOS4yOTQgNi43NDUgMTAuNjI1IDguNTA3IDEzLjU3em0xMjQuNjItNDguMTFjLTcuNzkgMC0xMi45MDYgNi4zOTUtMTIuOTA2IDEzLjg2NCAwIDcuNDY4LjUyNSAxMy42NiA2LjM5NiAxMy42NiA1Ljg3IDAgMTQuNjE3LTcuMTUgMTQuNjE3LTE2LjIxOCAwLTcuMzU1LTQuMjctMTEuMzA2LTguMTA4LTExLjMwNiIgZmlsbD0iI2ZkZTAxMiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
+  height: 12.8px;
+  margin-bottom: 3.6px;
+  margin-top: 3.6px;
+}
+
+.nor {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OTEuNDY3IiBoZWlnaHQ9IjU3Ny45NiIgdmlld0JveD0iMCAwIDQ5MS40NjY2NyA1NzcuOTYwMDIiPjxwYXRoIGQ9Ik0yNDUuNzMyIDEzLjA0OHMtODIuNjYgMTA4Ljg2NC0yMTkuNzQ1IDE4LjE0NWMwIDAtNTAuNDAyIDEzOS4xIDEyLjA5NCAyOTQuMzM1IDYyLjQ5NSAxNTUuMjMgMTU5LjI2NSAyMjEuNzYgMjAzLjYxNiAyNDMuOTM1bDMuOTA1IDEuNzY1IDMuMzYtMS42OGM0NC4zNTYtMjIuMTc0IDE0MS4xMi04OC43MDUgMjAzLjYyMy0yNDMuOTM1QzUxNS4wNzcgMTcwLjM3NyA0NjQuNjc3IDMxLjI3IDQ2NC42NzcgMzEuMjcgMzI3LjU4NSAxMjEuOTkgMjQ0LjkzIDEzLjEzMyAyNDQuOTMgMTMuMTMzIiBmaWxsPSIjMWY0ZmEyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNDAxLjkwNyA2MC45NjVzLTM3LjYzIDEwOC44NjctMTYzLjk3MiAxODUuNDhjMCAwLTg3LjM2IDU3Ljc4OC0yMDEuNiA3MS4yMjggMCAwIDQzLjAxIDEwNi4xNzQgNjguNTQ1IDEyOS4wMjQgMCAwIDExNi45MzItMTguODE0IDIzOS4yMzYtMTEyLjg5NCAwIDAgNjcuMi00MS42NjQgMTM5Ljc3Ni0xNDIuNDY2IDAgMCA0LjAzLTEwNi4xNzQtMjAuMTYtMTU5LjkzNGwtNjEuODI1IDI5LjU2MiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTQwMS45MDcgNjIuMzFzLTczLjkyIDIwOC4zMjMtMzYyLjg4MiAyNTUuMzYzTTQ4MS4yIDE5NC4wMlMzNTMuNTIgMzkyLjkzOCAxMDkuMjUyIDQ0NC43NjMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzkyN2YzYiIgc3Ryb2tlLXdpZHRoPSIxNC4zNjE5MDc2MTAwMDAwMDEiLz48cGF0aCBkPSJNMjQ1LjMzMiAxMS45MTJzLTgxLjg2IDEwOC43OC0yMTguOTQ2IDE4LjA2YzAgMC01MC40IDEzOS4xMDcgMTIuMDk2IDI5NC4zMzYgNjIuNDk0IDE1NS4yMzUgMTU5LjI2NSAyMjEuNzYgMjAzLjYxNCAyNDMuOTM1bDMuOTA0IDEuNzY1IDMuMzYtMS42OGM0NC4zNTYtMjIuMTc2IDE0MS4xMi04OC43MDcgMjAzLjYxNi0yNDMuOTM2IDYyLjUtMTU1LjIzIDEyLjEtMjk0LjMzNSAxMi4xLTI5NC4zMzUtMTM3LjA5IDkwLjcyLTIxOS43NDQtMTguMTQ1LTIxOS43NDQtMTguMTQ1eiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTI3ZjNiIiBzdHJva2Utd2lkdGg9IjE0LjM2MTkwNzYxMDAwMDAwMSIvPjxwYXRoIGQ9Ik0yMjUuMTEgNDk5Ljc5NmwyMC4xNiAzNS42MiAxOS4yMzQtMzUuNzg0LjA0Ny0uMDc0IDM1LjYxNS0yMC4xNi0zNS43ODUtMTkuMjM0LS4xMTItLjExLTIwLjE2LTM1LjYxNy0xOS4yMzUgMzUuNzg2LS4wNC4wNjYtMzUuNjIgMjAuMTU4TDIyNSA0OTkuNjg0bC4xMS4xMTIiIGZpbGw9IiM5MjdmM2IiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik03Ni43MDcgMTg0LjYzMmMwIDEzLjE3NyAxLjExOCAxMy41NSA2Ljk2MiAxNC4yOTZsMi43MzQuMzczYy44Ny44NzIuNzQ1IDMuMTEtLjI1IDMuNjA3LTUuNDctLjI0OC0xMS4wNjMtLjM3NC0xNi41MzQtLjM3NC01LjQ3IDAtMTEuMzEzLjEyNi0xNi43ODMuMzc0LS45OTUtLjQ5OC0xLjExOC0yLjczNS0uMjQ4LTMuNjA2bDIuNzMzLS4zNzJjNS44NDQtLjc0NSA2Ljk2My0xLjEyIDYuOTYzLTE0LjI5NnYtNDYuMjQ4YzAtMTMuMTgtMS4xMi0xMy41NS02Ljk2My0xNC4yOTZsLTIuNzM0LS4zNzNjLS44Ny0uODctLjc0OC0zLjEwOC4yNDctMy42MDYgNS40Ny4yNDcgMTEuMDY1LjM3MyAxNi43ODMuMzczIDUuNDcgMCAxMS4wNjUtLjEyNiAxNi41MzYtLjM3NC45OTMuNDk3IDEuMTE4IDIuNzM0LjI0OCAzLjYwNWwtMi43MzUuMzczYy01Ljg0NS43NDUtNi45NjMgMS4xMTctNi45NjMgMTQuMjk2djQ2LjI0OE0xMzcuMjUgMTIwLjQ4YzcuOTU1IDAgMTQuOTE4LS4xMjMgMTcuNTMtLjM3IDAgMi43MzQgMCAxMi4wNTguMjQ4IDE3LjkwMi0uNS45OTMtMi43MzYgMS4yNDMtMy45OC40OTYtMS4yNDMtNy4yMS0zLjIzLTEwLjgxNS03Ljk1Ni0xMi4wNi0zLjM1Ni0uODctNi40NjQtLjk5My0xMC40NDMtLjk5M2gtNi4zNGMtNS4yMjIgMC01LjIyMi4yNS01LjIyMiA3LjIxdjIyLjI1NGMwIDMuMTA3LjEyNSAzLjM1NiAyLjk4MyAzLjM1Nmg3LjMzNmMxMC44MTcgMCAxMi44MDYtLjI1IDEzLjkyNS01LjQ3bC45OTUtNC4yMjdjLjc0Ni0uODcyIDMuMTA4LS44NzIgMy43My4xMjMtLjEyNiAzLjIzMy0uMzc0IDcuODMyLS4zNzQgMTIuNDMzIDAgNC42LjI1IDkuMDc1LjM3NSAxMi45MjgtLjYyMi45OTUtMi45ODQuOTk1LTMuNzMuMTI1bC0uOTk0LTQuODVjLTEuMTE4LTUuMjItMy4xMDctNS40Ny0xMy45MjQtNS40N2gtNy4zMzVjLTIuODU3IDAtMi45ODIuMjUtMi45ODIgMy4zNTd2MTcuNDA1YzAgMTMuMTc3IDEuMTE4IDEzLjU1IDYuOTYgMTQuMDQ4bDUuMjIzLjYyYy44Ny44NzIuNzQ3IDMuMTEtLjI0OCAzLjYwNy03Ljk1Ni0uMjQ4LTEzLjU1LS4zNzQtMTkuMDItLjM3NC01LjQ3IDAtMTEuMDY1LjEyNi0xNi43ODQuMzc0LS45OTUtLjQ5OC0xLjEyLTIuNzM1LS4yNS0zLjYwNmwyLjczNi0uMzcyYzUuODQzLS43NDUgNi45NjMtMS4xMiA2Ljk2My0xNC4yOTZ2LTQ2LjI0OGMwLTEzLjE4LTEuMTItMTMuNTUtNi45NjMtMTQuNDJsLTEuNjE1LS4yNWMtLjg3Mi0uODctLjc0OC0zLjEwNy4yNDctMy42MDUgNC4zNS4yNDcgOS45NDUuMzcgMTUuNDE2LjM3aDIzLjQ5Nk0xODcuNzIzIDE1Mi4xODRjMCAzLjM1Ni4xMjQgNS41OTUgMi4xMTIgNS41OTUgMi4zNjIgMCA1LjIyLTIuODYgOS4zMjUtNy4zMzZsMTIuNjgtMTMuNjc2YzEuNjE2LTEuNjE2IDUuMjItNS43MiA2LjcxMy03LjcwOCAyLjI0LTIuODYgMi4zNjMtMy44NTUuODctNC4yMjdsLTMuODU0LTEuMTE4Yy0uOTk0LS44Ny0uNzQ2LTIuNjEuMjUtMy42MDYgNS4yMi4yNDcgOS4zMi4zNzMgMTMuOTIzLjM3MyA1LjM0NSAwIDkuMTk4LS4yNDggMTMuNjc0LS4zNzQgMS4zNjguMzcgMS42MTYgMi45ODIuMzc0IDMuNjA1LTExLjU2IDEuNjE2LTE0LjkxOCA0LjYtMjMuNDk1IDEyLjkzLTUuMzQ3IDUuMzQ0LTEwLjMyIDEwLjQ0Mi0xNS4xNjggMTUuMjktMS40OTIgMS40OTItMS43NCAyLjIzOC0uMzc0IDQuMTAyIDkuODIzIDEyLjkzIDIxLjYzNCAyNy43MjQgMzAuNTg0IDM4LjE2NyAyLjYxIDMuMTA4IDUuNDcgNC4yMjcgOS4yIDQuNzI0bDIuOTgzLjM3M2MuODcuNjIzLjc0NyAzLjIzMy0uMjUgMy42MDctNC4zNS0uMjQ4LTkuMzIzLS4zNzQtMTUuOTEtLjM3NC02LjA5MyAwLTExLjY4OC4xMjYtMTcuMTU3LjM3NC0xLjM2OC0uNDk4LTEuMzY4LTIuOTg0LS4yNS0zLjYwNmwzLjM1OC0uNDk2YzEuOTktLjM3MyAyLjIzOC0xLjYxNi44Ny0zLjM1Ny01LjIyLTYuNDY0LTIwLjAxNS0yNi42MDQtMjQuNjE1LTMxLjMyOC0uODctLjg3LTEuODY1LTEuODY3LTIuOTg0LTEuODY3LTMuMTA3IDAtMi44NTcgMi45ODQtMi44NTcgNi41OXYxNS43OWMwIDEzLjE3NiAxLjExOCAxMy41NSA2Ljk2IDE0LjI5NWwzLjExLjM3M2MuODcuNjIzLjc0NCAzLjExLS4yNSAzLjYwNy01Ljg0My0uMjQ4LTExLjQzOC0uMzc0LTE2LjkwNy0uMzc0LTUuNDcgMC0xMS4zMTMuMTI2LTE1Ljc5LjM3NC0uOTk0LS40OTgtMS4xMTgtMi45ODQtLjI0Ny0zLjYwNmwxLjc0LS4yNDdjNS44NC0uODcgNi45Ni0xLjI0NCA2Ljk2LTE0LjQydi00Ni4yNWMwLTEzLjE3OC0xLjEyLTEzLjU1LTYuOTYtMTQuMjk1bC0yLjM2NC0uMzczYy0uODctLjg3LS43NDUtMy4xMDguMjUtMy42MDYgNS4wOTcuMjQ3IDEwLjY5LjM3MyAxNi40MS4zNzMgNS40NyAwIDExLjA2NC0uMTI2IDE1LjkxMy0uMzc0Ljk5NC40OTcgMS4xMTggMi45ODIuMjQ3IDMuNjA1bC0yLjExMy4zNzNjLTUuODQzLjc0NS02Ljk2IDEuMTE3LTYuOTYgMTQuMjk2djEzLjhNMTM1LjkxMiA0MDUuNDFsLTI5LjM4LTQxLjcwNSAxNS4zMzggNDYuMTYyLTguMjU4IDIuNzQ1LTIwLjY2LTYyLjE3MiAxNC45NTctNC45NyAyNi4zODUgMzguMTIzLTE0LjAzMi00Mi4yMyA4LjEyOC0yLjcgMjAuNzIyIDYyLjM2LTEzLjIgNC4zODZNMTg0LjA1NSAzNTAuODIzYy02LjYwMi0xNS43NC0xNy4yODctMjkuMzQyLTMxLjI1LTIzLjQ4NC0xNC43ODYgNi4yLTEyLjMzIDIzLjA0LTUuNjUyIDM4Ljk2MyA2LjYwMyAxNS43MzggMTguMTQ4IDI5LjYyIDMxLjg2IDIzLjg3IDEzLjMzLTUuNTkyIDExLjYwNy0yMy43IDUuMDQyLTM5LjM1em0tMTEuMDA4IDQuNDA0YzQuMjc0IDEwLjE5IDguNjQgMjEuODQgMS42MjggMjQuNzgtNy4wMTQgMi45NDQtMTIuNDMtOC4zNzItMTYuNzQzLTE4LjY1NS00LjE5Ny0xMC4wMDgtNy4zMzctMjEuNzQ1LTEuMTQ1LTI0LjM0IDYuMTMtMi41NzIgMTIuMDI0IDguMTE2IDE2LjI2IDE4LjIxNU0yMzkuMDUzIDM2MC4zODhsLTIzLjU5LTIwLjczYzQuMTI4LTQuNjEgMi44OTctMTIuNzEzLTEuMDYtMjAuNDQyLTUuNjUyLTEwLjk2LTEzLjI1LTEzLjExLTIwLjg0My05LjNsLTE1LjkyIDcuOTkyIDI5LjM4NCA1OC41NTMgOS42NzYtNC44NTMtMTEuNDM1LTIyLjYzMiAzLjA4LTEuNjU4IDE5LjAzOCAxOS4xNXptLTMzLjY5Mi0zMy45ODRjMi40OCA0Ljk0IDIuMTQ1IDEwLjA3NS0xLjM0NyAxMS44MjdsLTMuMzA2IDEuNjYtOC42NzUtMTcuMjgzIDMtMS41MDdjMy42NzYtMS44NDUgNy4wMS0xLjMxIDEwLjMzIDUuMzA0TTI3OC4xNDMgMzM3Ljc5MkwyNTMuMyAzMTguNTg3YzMuODI4LTQuODYyIDIuMDktMTIuODcyLTIuMzQtMjAuMzM2LTYuMzMzLTEwLjU4Ni0xNC4wNDgtMTIuMjU0LTIxLjM4OC03Ljk3NGwtMTUuMzkgOC45NzYgMzMuMDA2IDU2LjU5MyA5LjM1LTUuNDU0LTEyLjgzMy0yMS44NyAyLjk3LTEuODQ1IDIwLjIwMiAxNy45MTN6bS0zNS43NTgtMzEuODAzYzIuNzgzIDQuNzczIDIuNzcgOS45Mi0uNjA0IDExLjg4N2wtMy4xOTUgMS44NjYtOS43NC0xNi43MDcgMi45LTEuNjljMy41NS0yLjA3MyA2LjkxLTEuNzUgMTAuNjQgNC42NDNNMzA2LjM2IDMxOS4xbC0yMy42NDQtMTcuMTcuMDA0IDYuNjUgMTIuMTQ0IDE4LjIzLTguODc3IDUuOTU0LTM2LjQ5Mi01NC40MSA4LjkzNC01Ljk5IDE1LjMzMyAyMi44Ni0zLjE1Ni0zMS4wMyA4LjUzNi01LjcyNSAzLjA2NiAyOS41NDMgMzQuNzM1IDIzLjk5LTEwLjU4NSA3LjA5OE0zMzQuMTI4IDI1Ny4yOGMtMTAuNDIzLTEzLjUyLTI0LjI0My0yMy45MTctMzYuMjM1LTE0LjY3LTEyLjY5NiA5Ljc5LTUuOTk3IDI1LjQzMyA0LjU0OCAzOS4xMDYgMTAuNDI3IDEzLjUxNiAyNS4xNDggMjMuOTY3IDM2LjkyNCAxNC44ODUgMTEuNDQ4LTguODI3IDUuMTI4LTI1Ljg4NC01LjIzNi0zOS4zMnptLTMzLjI2LTI4LjQyOGMtMS45OTMtMi43LTUuMDkyLTMuOC03LjA1LTIuNDEyLTEuOTA2IDEuMzQ0LTEuODU4IDQuNTQ3LjE0MyA3LjM2NyAxLjk5NSAyLjY5NyA1LjE0NyAzLjc1NiA3LjA1MiAyLjQxIDEuOTYtMS4zODYgMS44NS00LjY2OC0uMTQzLTcuMzY1em0tMTEuNCA4LjY2N2MtMi4wNTMtMi43NzctNS4yMDctMy44MzUtNy4xMS0yLjQ5LTEuOTYgMS4zODctMS44NTMgNC42NjcuMTQyIDcuMzY2IDEuOTk1IDIuNjk3IDUuMDkyIDMuNzk3IDcuMDUyIDIuNDEyIDEuOTA0LTEuMzQ1IDEuOTEyLTQuNTktLjA4My03LjI5em0zNS4xNTUgMjYuODRjNi43NDYgOC43NTIgMTMuOTYgMTguODkgNy45MzcgMjMuNTMzLTYuMDIgNC42NDYtMTQuMTY0LTQuOS0yMC45NzItMTMuNzMtNi42My04LjU5Mi0xMi42NzctMTkuMTMtNy4zNi0yMy4yMyA1LjI2LTQuMDYgMTMuNzA0IDQuNzU1IDIwLjM5NSAxMy40MjhNMzU3LjAyIDIxOS4zOTNjLTkuMDQ3LTEwLjA0Ni0xOC40NTUtOS4xMTQtMjQuMjYzLTMuOTkzTDMxOS42IDIyNy4wMDNsNDMuMzQgNDkuMTM0IDguMTE3LTcuMTYyLTE1Ljg0NC0xNy44NjIgNS42MDItNC45NGM1Ljk2LTUuMjU3IDUuNzA2LTE2LjIxNi0zLjc5Ni0yNi43OHptLTcuNzA4IDguNzY4YzMuNTQgNC4xMTcgNS44NTUgOC45MTcgMi4wMTMgMTIuNDM2bC0yLjk2NSAyLjc0OC0xMy42NC0xNS40NjcgMy4zNC0yLjk0NWMzLjU5Ni0zLjE3MiA3LjczLS43NjUgMTEuMjUyIDMuMjNNMzk0Ljg3MiAyNDcuMjM1bC00NS42NzUtNDYuOTcgNy43MTUtNy41IDQ1LjgxIDQ3LjExLTcuODUgNy4zNk00MjcuNzA4IDIxMy43NjRsLTQ1LjkzMi0yMi4xOTMgMzUuODIgMzIuOTEtNS44ODggNi40MDgtNDguMjQ0LTQ0LjMyMyAxMC42Ni0xMS42MDYgNDEuNTggMjAuNTE2LTMyLjc3Mi0zMC4xMDQgNS43OTUtNi4zMDcgNDguMzkgNDQuNDU2LTkuNDEgMTAuMjQ0TTQ1Ny45ODQgMTgwLjA1M2MtNy4wNTIgOS4wMTItMjIuNTY3IDcuMjIzLTQwLjUxNS02LjgyNC0xNS4xNTMtMTEuODYtMjAuMTIzLTI2LjgtMTIuNzMzLTM2LjI0MyA1Ljk1NC03LjYwOCAxNC43MS02LjE1IDIwLjE4Mi0zLjY5NWwtLjg1NyAxMC4zOGMtNC45NTYtMi4zMTItOC4xNzUtMy4wMDMtMTAuODM2LjM5Ni00LjY4OCA1Ljk5IDMuMDI0IDEzLjU4OCAxMS43MjQgMjAuNCA5LjI0NyA3LjIzNiAyMC4yODIgMTIuODI4IDI0LjIxIDcuODEgMS44Ni0yLjM3NCAyLjY3My0zLjczOCAyLjYxNi01LjI2MmwtOS44NzUtNy41NTUtNC41MTcgNS43NzUtOC40NjgtNi42MjggMTAuNzY4LTEzLjc2IDI1LjE3NCAxOS43MDJjLjY2MiAzLjQ3Ny0yLjgxOCAxMC4zMjItNi44NzMgMTUuNTAzIiBmaWxsPSIjOTI3ZjNiIi8+PC9zdmc+");
+}
+
+.dff {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MC44MTMiIGhlaWdodD0iODUuODEzIiB2aWV3Qm94PSIwIDAgNzAuODEzMzMyIDg1LjgxMzMzMiI+PGcgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMS41MzQgMS43MjdsNjcuODU3LjEwOC0uMDU1IDM1LjZMNjggNTMuMTg0bC01LjI1NyA5LjAzLTYuOCAxMC4xOC0xMi45ODMgNy42Ny03LjYyOCAzLjk3OC0xNi42NDUtOS45OTctOC4xMy02Ljk5My03LTEyLjAyLTIuMDkzLTguOTE2LjA3LTQ0LjM5IiBmaWxsPSIjZjRmNGY0Ii8+PHBhdGggZD0iTTMwLjA3IDIzLjk4Yy0uMTUtLjQ4Ni0uMzYtLjk0Mi0uNi0xLjMzNy0uMjY3LS4zOTUtLjU2Ni0uNzMtLjg2NS0xLjAwNC0uMy0uMzA0LS42MjgtLjUxOC0uOTg4LS42Ny0uMzg4LS4xODQtLjgzOC0uMzM1LTEuNDM2LS40MjctLjU5OC0uMTIyLTEuMzc3LS4xNTUtMi4xNTUtLjE1NmwtNS45OS0uMDEtLjAxNyAxMC43MmMtMi4xIDIuMjc0LTMuNzgyIDQuOTQzLTQuODk1IDcuNzY2LTEuMDgzIDIuNzkyLTEuNjI2IDUuNzY2LTEuNiA4Ljc0Mi4wMjQgMy4wMDYuNTg4IDUuOTg1IDEuNjYyIDguNzggMS4wNzQgMi43NjUgMi42NTggNS4zMTggNC42NiA3LjUwNyAyLjAzNCAyLjE5IDQuNDU3IDMuOTg0IDcuMTIgNS4yNjYgMi42NjMgMS4zMDggNS41NjcgMi4xMDIgOC41MDMgMi4zMiAyLjkwNS4yNDggNS44NC0uMTEyIDguNTk3LS45OWwtLjAzMiAxLjg4NCAzLjU5Mi4wMDUuMDA2LTMuMzRjMi40MjgtMS4yMTIgNC42OC0yLjg0NyA2LjU2Ny00LjgxNyAxLjg5LTEuOTcgMy40NS00LjI3NyA0LjU2Mi02LjgyNSAxLjExLTIuNTUgMS44MDYtNS4zMTIgMi4wMi04LjEwNS4yMTQtMi44MjQtLjA1LTUuNjgtLjc5Ni04LjM4Mi0uNzE0LTIuNzAzLTEuOTA4LTUuMjg3LTMuNDkyLTcuNTY2bDMuNjMtMy42NyA0LjEyNiA0LjM1LjA4Mi0xMy45Ny0xMy43NDYtLjA1IDMuOTE4IDMuNzQtMy42OSAzLjc2Yy0yLjk2NS0xLjQ5My01Ljg5Ny0zLjAxNi05LjAxLTMuNTk4LTMuMTQ0LS41ODItNi40MzgtLjI1My05LjczMy4wNzdNMi41NTcgMTUuNDM1bDY1LjUuMTA0LS4xMDMgMjYuNjljLS4wMDYgMy45MTgtLjc2IDcuODA1LTIuMDUzIDExLjYyNy0xLjI2NiAzLjgyNi0zLjE1NyA3LjU1Ni01Ljc0IDExLjAxNS0yLjU4IDMuNDI4LTUuODUgNi42MS0xMC4wMTcgOS41OC00LjEzOCAyLjk5OC05LjE0NiA1LjgxNS0xNC40MiA4LjA1NC01LjIzNy0yLjA3My0xMC4yMzMtNC44NDQtMTQuNDIyLTcuOTQ3LTQuMTg4LTMuMTA1LTcuNTY3LTYuNTQyLTEwLjM0Ny0xMC4yMi0yLjc3OC0zLjcwOC00Ljk5LTcuNjktNi4zOS0xMS42Ny0xLjQtNC4wMS0xLjkwNC04LjA1LTEuOTI3LTEyLjA5bC0uMDgyLTI1LjE0MyIgZmlsbD0iI2VkMTkyZCIvPjxwYXRoIGQ9Ik00Ni45MzMgNjAuMzI0bC0xLjI5LS4wMy4wMS01LjE5NCA1LjA5Mi4wMDhjLS41NyAxLTEuMTEyIDEuOTctMS43NDMgMi44NTItLjY2Ljg3OC0xLjM1IDEuNjA3LTIuMDcgMi4zNjQiIGZpbGw9IiNlZDE5MmQiLz48cGF0aCBkPSJNMzMuNDMgNTcuOTM1bDMuNTYzLjAwNS4wMzItMjAuNDA2LTMuNTY0LS4wMDV6bS0xNC4xMS0xNy4xNWwzLjgwMy4wMDZjLjk2LjAzMyAxLjk0Ny4wMDQgMi42OTYtLjExNi43NDgtLjA5IDEuMjU3LS4yMSAxLjY3Ny0uMzkuNDItLjE4My43NS0uNDI1IDEuMDUtLjY5OC4zLS4yNzMuNTQtLjYwNy43NS0xIC4zOS0uODUuNzgtMS43Ljk5My0zLjAzNi4yNC0xLjMwNS4zMDQtMy4wOTcuMzY3LTQuODkgMS41ODgtLjM2IDMuMjA2LS41NyA0LjczMy0uNTY3IDEuNTI3LjAwMiAyLjkzNS4xODUgNC4zNy41ODMgMS40MDcuMzk3IDIuODc2IDEuMDM3IDQuMTYyIDEuNzk4IDEuMzE3Ljc2MiAyLjUxMyAxLjY3NCAzLjU2IDIuNzQgMS4wNDcgMS4wNjMgMS45NDIgMi4yOCAyLjY1OCAzLjYxNi43NSAxLjMzOCAxLjM0NSAyLjc2NiAxLjczIDQuMjI1LjM2IDEuNDkuNTY1IDMuMDA3LjU2MyA0LjQ5NC0uMDMgMS41MTctLjIxNCAzLjAwNS0uNjM2IDQuNDZsLTkuNjc0LS4wMTUtLjAxOCAxMS42Yy0xLjc5OC43OS0zLjcxNiAxLjI3Mi01LjY5IDEuNDItMS45OC4xNS0zLjk4NS0uMDY4LTUuOS0uNjE4LTEuOTE4LS41NDgtMy43MTItMS40MzItNS4zMjgtMi41ODgtMS42MTYtMS4xNTgtMy4wMjItMi42Mi00LjE1Ni00LjI2LTEuMTA1LTEuNjctMS45Ny0zLjU1NC0yLjUwNy01LjUzLS41MzYtMS45NDUtLjc0Mi0zLjk4LS41OS01Ljg5LjEyNC0xLjkxNS42MDUtMy43MDYgMS4zODctNS4zNDVNMjYuNTAzIDI1LjAwN2MtLjkuMzY0LTEuOC43NTYtMi42MzcgMS4yMS0uODQuNDg1LTEuNTkgMS4wMy0yLjM3IDEuNTc2bC4wMDgtNC42MTYgMS43MzguMDAyYy40NzgtLjAzLjkyNyAwIDEuMjg3LjA2Mi4zNTguMDYuNTk4LjEyMy44MDcuMjQ0LjE4LjA5Mi4zNi4yMTQuNDc4LjM2Ni4xNS4xNTIuMjcuMzA0LjM5LjUxNy4xMTguMTguMjEuMzkzLjI5OC42MzciIGZpbGw9IiNlZDE5MmQiLz48cGF0aCBkPSJNMjcgMzIuMTQ0Yy0uMDYgMS4xMjMtLjA5MyAyLjI0Ny0uMjczIDMuMDk2LS4xNTIuODItLjQyMiAxLjMzNS0uNzIyIDEuODgyLS4wOS4xNS0uMjQuMzA0LS4zOS40MjUtLjEyLjA5LS4zLjE4LS41MS4yNzMtLjI0LjA2LS41MS4xMi0uODEuMTUtLjE1IDAtLjI5OC4wMy0uNDc4LjAzbC0uNTQtLjAwMi0xLjc5Ny0uMDAzLjAwMi0xLjE1M2MuODctLjk0IDEuNzEtMS44OCAyLjY0LTIuNjY4LjkzLS43NTggMS44OS0xLjM5NCAyLjg4LTIuMDMiIGZpbGw9IiNlZDE5MmQiLz48cGF0aCBkPSJNMzUuNzI3IDgyLjJjNS4yNzQtMi4zMyAxMC4zNC01LjIwNiAxNC40MTgtOC4yMDUgNC4xMS0zIDcuMjI2LTYuMDkzIDkuNjktOS40NiAyLjQ2LTMuMzY2IDQuMjMzLTcuMDEgNS40OTYtMTAuNzcgMS4yNjctMy43NjQgMi4yLTcuNjUgMi4yMDctMTEuNTM3bC4xMDItMjYuMjM0LTY0LjUxMi0uMTAzLS4wNzMgMjYuMzU4Yy0uMDA2IDMuNDkuNzk4IDYuOTU1IDIuMTcgMTAuNjYyIDEuMzcgMy43MzggMy40IDcuNzUgNi4wNiAxMS4zNjYgMi42NiAzLjU4NyA1Ljk1IDYuNzggMTAuMTEgOS43OTQgNC4xMjcgMy4wMTIgOS4xMjQgNS44NzUgMTQuMzMyIDguMTNtMzIuMDgtNzguOTlsLTY0Ljc1LS4xMDMtLjAxNiAxMC4wNSA2NC43NTIuMTAzek0zNS43NTIgODUuODE0Yy01LjcxNi0yLjQwOC0xMS4xOTItNS41MTMtMTUuNzA4LTguNzctNC41MTgtMy4yNTYtOC4xMDctNi42OTUtMTEuMDM2LTEwLjYxNi0yLjg5OC0zLjkyLTUuMTM4LTguMjk4LTYuNjI4LTEyLjM3Qy44ODYgNDkuOTktLjAwNiA0Ni4yNTIgMCA0Mi40ODdMLjAzNy4wMDZsNzAuNzcyLjExLS4wNjggNDIuNDgyYy0uMDA3IDQuMTMtMS4xNTMgOC4xNjYtMi41NjcgMTIuMjY0LTEuNDE2IDQuMDk2LTMuMzk3IDguMTkzLTYuMSAxMS44OTUtMi42OTggMy43My02LjE1IDcuMDM0LTEwLjYxNyAxMC4yNzYtNC40NjYgMy4yMTItOS45NTQgNi4zMy0xNS43MDcgOC43OCIgZmlsbD0iI2QwYTQ1MSIvPjxwYXRoIGQ9Ik02LjczNiA2LjA1OEw2LjczIDEwLjQ2bDEuMjI3LjAwM2MuMTUgMCAuMjctLjAzLjM5LS4wNnMuMjQtLjA5Mi4zMy0uMTUyYy4wOS0uMDYuMTgtLjE1LjI3LS4yNC4wNi0uMTIzLjE1LS4yNDQuMjEtLjM5Ni4wNi0uMTUyLjEyLS4zMzMuMTUtLjU3Ni4wMy0uMjEzLjA2LS40ODYuMDYtLjc2LS4wMjgtLjI3My0uMDI4LS41NDYtLjA1Ny0uNzktLjAzLS4yNDItLjA5LS4zOTQtLjE1LS41NzctLjA2LS4xNS0uMTUtLjI3Mi0uMjA4LS4zNjMtLjA5LS4xMi0uMTgtLjIxNC0uMjctLjI3NC0uMTItLjA2LS4yMS0uMTIyLS4zMjgtLjE1Mi0uMTItLjAzLS4yNC0uMDYtLjM5LS4wNnpNNS41IDExLjY3M2wuMDEtNi44MDIgMi42NjcuMDA1Yy4yMzggMCAuNDc4LjA2Mi42ODguMTIzLjI0LjA2LjQxOC4xODMuNjI4LjMzNS4xOC4xMjIuMzYuMzA0LjUwOC41NDcuMTUuMjE0LjMuNDg2LjM5Ljc5LjEyLjMwNC4xNzguNjcuMjM4IDEuMDMzLjAyOC4zNjUuMDI4Ljc5LS4wMDIgMS4xNTQtLjA2LjM5NS0uMTIuNzMtLjI0IDEuMDMyLS4wOTIuMzAzLS4yNDMuNTc2LS4zOTMuNzg3LS4xNS4yMTMtLjMzLjM5NS0uNTEuNTQ3LS4yMS4xNS0uMzkuMjczLS42My4zMzMtLjIxLjA2LS40NDguMDktLjY4OC4wOWwtMi42NjYuMDI2TTE3LjAxIDQuODl2MS4yNDVsLTMuMjk2LS4wMDYtLjAwMiAxLjQyNyAyLjk5NS4wMDQtLjAwMiAxLjE4NS0yLjk5NS0uMDA0LS4wMDIgMS43MzIgMy40NDQuMDA1LS4wMDMgMS4yMTUtNC43MDItLjAwOC4wMS02LjgwMiA0LjU1My4wMDdNMjMuMjM3IDYuOTk1Yy0uMDMtLjE1LS4wOS0uMjczLS4xNS0uMzk2LS4wNi0uMTIyLS4xNS0uMjEzLS4yMzgtLjMwNC0uMDkyLS4wOS0uMjEtLjE4My0uMzYtLjI0NC0uMTItLjA2LS4yNy0uMDkyLS40Mi0uMTIzLS4xNS0uMDMtLjMtLjAzLS40NSAwLS4xNDggMC0uMjk4LjA2LS40MTguMTItLjE1LjA2LS4yNy4xMi0uMzkuMjEyLS4wOS4xMi0uMjEuMjQzLS4zLjM5NC0uMDkuMTIyLS4xOC4zMDQtLjI0LjUxNi0uMDYuMTgyLS4wOS4zOTQtLjEyLjY2OC0uMDMyLjI0My0uMDMyLjUxNy0uMDMyLjc5LjAzLjI0Mi4wNTguNDg1LjExOC42NjcuMDYuMjEzLjE1LjM5Ni4yMS41NDguMDg4LjE1Mi4yMS4yNzQuMjk4LjM5NC4xMi4wOS4yNC4xODMuMzYuMjQ0LjE0OC4wOS4yNy4xMi40MTguMTUuMTUuMDMyLjMzLjAzMy40OC4wMDMuMTUgMCAuMy0uMDMuNDUtLjA5LjExOC0uMDYuMjY4LS4xNTIuMzktLjI0My4xMTgtLjA5LjIxLS4yMTMuMy0uMzMzLjA4OC0uMDkuMTQ4LS4yNDMuMTc4LS4zNjQuMDYtLjE1LjA2LS4yNzMuMDYtLjQyNWgtMS40MDZsLjAwMi0xLjE1NSAyLjYzNS4wMDQtLjAwNiAzLjYxM2gtLjg2OGwtLjE4LS44MjJjLS4wOS4yMTQtLjI0LjM5NS0uNDIuNTQ3LS4xOC4xODItLjM5LjMwNC0uNjYuMzY0LS4yNC4wOTItLjU0LjE1Mi0uODA4LjE1Mi0uMyAwLS42LS4wNjItLjg3LS4xNTQtLjI2OC0uMDktLjUzNy0uMjE0LS43NDYtLjM5Ni0uMjQtLjE4My0uNDUtLjQyNi0uNjI4LS42Ny0uMTgtLjI3My0uMzMtLjU3Ny0uNDQ4LS45NC0uMDktLjMzNS0uMTc4LS43My0uMTc4LTEuMTI1LS4wMy0uMzk1IDAtLjg1LjA5Mi0xLjI0NS4wNi0uMzk0LjE4LS43MjguMzMtMS4wNjIuMTUtLjMwMy4zMy0uNTQ2LjU0LS43NTguMjEtLjIxMy40NS0uMzk1LjcyLS41MTYuMjctLjE1LjU0LS4yNC44Ny0uMjcuMy0uMDYyLjY2LS4wMy45ODggMCAuMzMuMDYuNjI4LjE1My44NjcuMjc0LjI3LjEyMy41MS4zMDUuNjg4LjQ4OC4xOC4xODIuMzMuNDI2LjQ0OC42NjguMTIuMjQzLjE4LjUxNy4yMS44MmgtMS4zMk0zMC45NjcgNC45MWwtLjAwMiAxLjI0N0wyNy43IDYuMTUgMjcuNyA3LjU4bDIuOTk1LjAwNS0uMDAyIDEuMTg0LTIuOTkzLS4wMDQtLjAwMyAxLjczIDMuNDE0LjAwNi0uMDAyIDEuMjE0LTQuNzAyLS4wMDguMDEtNi44MDIgNC41NTMuMDA3TTM0LjE2NyA3Ljg2MmwxLjU1OC4wMDJjLjEyIDAgLjIxIDAgLjMtLjAzLjA5IDAgLjE1LS4wMy4yMS0uMDkuMDg4LS4wMy4xMi0uMDYuMTgtLjEyLjAyOC0uMDYyLjA5LS4xMjIuMTItLjIxNCAwLS4wNi4wMy0uMTUyLjA2LS4yNzMgMC0uMDkgMC0uMjEyLS4wMy0uMzAzIDAtLjEyMi0uMDMtLjIxMy0uMDYtLjI3NC0uMDMtLjA5LS4wNi0uMTUyLS4wOS0uMjEyLS4wNi0uMDYtLjEyLS4wOTMtLjE4LS4xMjItLjA2LS4wNi0uMTItLjA5LS4yMDgtLjA5LS4wOS0uMDMyLS4xOC0uMDYzLS4yOTgtLjA2M2wtMS41Ni0uMDAyem0yLjgxNC42MWMuMTIuMDYzLjI0LjEyNC4zMy4yMTUuMTIuMDkuMTguMTgyLjI0LjMzNC4wOS4xNTQuMTIuMzM2LjE1LjU0OC4wMy4yNDQuMDMuNTE2LjAyNy42OTh2LjYwN2MuMDMuMTIuMDU3LjI3NC4wOS4zOTUuMDMuMTIuMDkuMTguMTQ3LjIxMnYuMjQyaC0xLjM3N2MtLjAzLS4xMjMtLjA2LS4yMTQtLjA5LS4zMzYtLjAzLS4xMi0uMDMtLjMwMy0uMDI4LS40NTV2LS44ODFjLS4wMy0uMTItLjAzLS4yNzQtLjA2LS4zNjUtLjAzLS4xMi0uMDYtLjE4Mi0uMDktLjI0Mi0uMDMtLjA2Mi0uMDktLjEyMi0uMTItLjE4My0uMDU3LS4wNi0uMTItLjA5LS4xNzctLjEyMi0uMDYyLS4wMy0uMTUtLjA2LS4yNC0uMDktLjA5IDAtLjIxLS4wMzItLjMtLjAzMmwtMS4zMTgtLjAwMi0uMDA1IDIuNzAzLTEuMjU3LS4wMDQuMDEtNi44MDIgMy4wNTUuMDA2Yy4yNCAwIC40OC4wMy42OS4wOTIuMjA4LjA2LjM5LjE1Mi41MzguMjc0LjE1LjEyMi4yNy4yNzQuMzg4LjQyNS4wOS4xNTQuMTguMzY2LjI0LjU4LjA1OC4yMS4wNTguNDU1LjA1Ny42OTcgMCAuMjEzLS4wNTguNDI1LS4xMi42MDctLjA1Ny4xODItLjE4LjM2NS0uMy41MTctLjExOC4xNTItLjMuMjczLS40OC4zNjNNNDQuMTc1IDQuOTMzdjEuMjQ0bC0zLjExNi0uMDA1LS4wMDMgMS41NSAyLjc1My4wMDRWOC45MWwtMi43NTYtLjAwNS0uMDA0IDIuODI0LTEuMjktLjAwMi4wMTMtNi44MDIgNC40MDIuMDA3TTQ5LjI5MyA2LjAzNGMtLjE0OC0uMDMtLjMyOC0uMDYtLjQ3Ny0uMDYyLS4xOCAwLS4zMy4wMy0uNDguMDktLjEyLjA2Mi0uMjcuMTIyLS4zOS4yNDMtLjEyLjA5LS4yMzguMjEyLS4zMy4zOTQtLjA5LjE1LS4xOC4zMzMtLjI0LjU0NS0uMDkuMjQzLS4xMjIuNDg2LS4xNS43Ni0uMDMuMjczLS4wMy41NzYtLjAwMy44Mi4wNi4yNzMuMTIuNTE1LjE4LjY5OC4wOS4yMTMuMTguMzk2LjI2Ny41NDcuMTIuMTUyLjI0LjI3NC4zNi4zNjUuMTIuMDkuMjQuMTUyLjM5LjE4Mi4xNS4wNi4zMjguMDYyLjUwOC4wNjIuMTUgMCAuMy0uMDMuNDUtLjA5LjE1LS4wNjIuMjY4LS4xMjIuMzg4LS4yNDQuMTIzLS4wOS4yNDItLjIxLjM2LS4zOTQuMDkyLS4xNS4xODItLjMzMy4yNDItLjU0Ni4wOS0uMjQzLjEyLS40ODUuMTUtLjc2LjAzLS4yNC4wMDItLjU0NS0uMDMtLjc5LS4wMjgtLjI3LS4wODYtLjUxNS0uMTQ2LS43MjgtLjA5LS4yMTItLjE4LS4zOTQtLjMtLjU0Ni0uMDktLjEyMi0uMjA4LS4yNDQtLjMyOC0uMzM1LS4xMi0uMDktLjI3LS4xODMtLjQyLS4yMTNtLjEyMy0xLjIxNGMuMy4wNi42LjE1My44NjYuMzM1LjI0LjE1Mi40OC4zMzQuNjkuNjA4LjIxLjI0NC4zODguNTQ3LjUwNy44ODIuMTUuMzY1LjI0Ljc2LjI5OCAxLjE1NC4wMy40MjQuMDI3Ljg4LS4wMzMgMS4zMDUtLjA2LjM5NC0uMTguNzU4LS4zMyAxLjA5My0uMTUuMzMzLS4zMy42MDYtLjU3Ljg1LS4yMS4yNC0uNDUuNDIzLS43Mi41NDUtLjI3LjE1LS41Ny4yNDItLjg3LjI3LS4zMy4wNjItLjY1OC4wMy0uOTU4LS4wMy0uMzMtLjAzMi0uNi0uMTU0LS44NjgtLjMwNi0uMjctLjE1Mi0uNDgtLjM2NS0uNjktLjYwOC0uMjA4LS4yNDUtLjM4OC0uNTUtLjUzNi0uOTEzLS4xMi0uMzM1LS4yMS0uNzMtLjI3LTEuMTU0LS4wMjctLjM5NS0uMDI3LS44NS4wMzUtMS4yNzYuMDU4LS4zOTQuMTc4LS43OS4zMjgtMS4xMjIuMTUtLjMzNC4zMzItLjYwNy41Ny0uODUuMjEtLjIxMi40NTItLjM5NC43MjMtLjU0Ni4yNy0uMTIuNTY4LS4yNDMuODY4LS4yNzIuMzMtLjAzLjY2LS4wMy45Ni4wMzJNNTQuODMgNy44OTVsMS41Ni4wMDJjLjEyIDAgLjIxIDAgLjMtLjAzLjA5IDAgLjE4LS4wMy4yNC0uMDkuMDYtLjAzLjExOC0uMDkuMTUtLjEyMi4wNi0uMDYuMDg3LS4xMi4xMi0uMjEyLjAzLS4wNi4wNi0uMTUyLjA2LS4yNzN2LS4zMDRjLS4wMy0uMTItLjAzLS4yMTMtLjA2LS4yNzMtLjAzLS4wOS0uMDktLjE1My0uMTItLjIxMy0uMDYtLjAzLS4xMTctLjA5LS4xNzgtLjEyMi0uMDYtLjA2LS4xMi0uMDktLjIxLS4wOS0uMDktLjAzLS4xOC0uMDYyLS4zLS4wNjJsLTEuNTU4LS4wMDN6bTMuNzE3LS45MzVjMCAuMjEyLS4wMy40MjUtLjEyLjYzNy0uMDYyLjE4Mi0uMTUuMzY0LS4zLjUxNi0uMTIuMTUtLjMuMzAzLS40OC4zOTQuMDkuMDMuMTUuMDYuMjA4LjEyMi4wNi4wMy4xMjIuMDkuMTguMTUuMDYuMDYuMTIuMTIyLjE1LjE4My4wMy4wOS4wOS4xODMuMTIuMjczLjAzLjEyMi4wNTguMjEzLjA1OC4zOTYuMDMuMjEyLjAzLjQ1NS4wMy42MzhWMTAuOTY3Yy4wMjguMTIyLjAyOC4yMTMuMDU2LjI3NC4wMy4wOTIuMDYuMTUzLjA5LjE4M2wuMDkuMDl2LjI0NWwtMS4zNDctLjAwM2MtLjA2LS4xMjItLjA5LS4yMTItLjEyLS4zMzQgMC0uMTItLjAzLS4zMDMtLjAzLS40NTV2LS40ODRsLjAwMi0uMzY1Yy0uMDMtLjEyLS4wMy0uMjcyLS4wNi0uMzY0LS4wMy0uMTItLjA2LS4yMTItLjA5LS4yNzItLjAyNy0uMDYyLS4wNi0uMTIzLS4xMTctLjE4My0uMDYtLjAzLS4xMi0uMDktLjE4LS4xMjItLjA2LS4wMy0uMTUtLjA2LS4yNC0uMDkyLS4wOSAwLS4yMS0uMDMtLjMtLjAzSDU0LjgzbC0uMDA1IDIuN2gtMS4yNTdsLjAxLTYuODAzIDMuMDU1LjAwNWMuMjQyIDAgLjQ4LjAzMi42Ni4wOTMuMjEuMDYuMzkuMTUyLjUzOC4yNzMuMTUyLjA5Mi4yNy4yNDQuMzkuMzk2LjA5LjE1Mi4xOC4zMzUuMjM4LjU0Ny4wNi4yMTMuMDkuNDU2LjA5LjdNNjMuOTQgNi45N2MwLS4wOTMtLjAzMi0uMTg0LS4wMzItLjI3NS0uMDI4LS4wOTItLjA4Ny0uMTgyLS4xMTgtLjI0NC0uMDYtLjA5LS4xMi0uMTUtLjE4LS4yMS0uMDU4LS4wNjItLjE1LS4xMjMtLjI0LS4xNTQtLjA5LS4wMy0uMTgtLjA5LS4zLS4wOS0uMTE3LS4wMzItLjIzOC0uMDMyLS4zODgtLjAzMi0uMTIgMC0uMjY4IDAtLjM2LjAzLS4xMi4wMy0uMjA4LjA2LS4yOTguMDktLjA2LjA2LS4xNS4wOTItLjE4LjE1Mi0uMDYuMDYtLjA5LjEyLS4xMi4xOC0uMDMyLjA2Mi0uMDYuMTU0LS4wOS4yMTUgMCAuMDkgMCAuMTgyLjAyOC4yNDQgMCAuMDYuMDMuMTIuMDYuMTgyLjAzLjA2LjA5LjEyLjE1LjE4Mi4wNi4wNi4xNS4xMjMuMjQuMTgzLjEyLjAzLjI2OC4wOTIuNDQ4LjE1My4xOC4wMy4zOS4wOTIuNTcuMTIzLjE3OC4wMy4zMjguMDYuNDc3LjEyLjE4LjA2Mi40MTguMTI0LjU5OC4xODUuMTguMDkzLjMuMTUzLjQyLjI0NS4xMi4wOS4yNC4xNS4zLjI0My4wOS4wOS4xNDguMTgzLjIxLjI3NC4wNTguMDkuMTE4LjIxMi4xNDguMzM0LjAzLjEyMi4wNi4yNDMuMDYuMzY0IDAgLjE1MiAwIC4zMzQtLjAzMy40ODcgMCAuMTgtLjAzLjMzMy0uMDU4LjQ4NS0uMDYuMTUtLjA5Mi4yNzMtLjE4LjM5NC0uMDYzLjEyMi0uMTIuMjEyLS4yMTIuMzM0LS4wOS4wOS0uMTguMTgtLjI3LjI0My0uMTIuMDktLjIxLjE1LS4zNi4yNDItLjEyLjA2LS4yNy4wOS0uNDUuMTUtLjE0OC4wMzItLjMzLjA2Mi0uNTM3LjA5Mi0uMTguMDMtLjM5LjAyOC0uNi4wMjgtLjE4LS4wMy0uMzYtLjAzLS41MzgtLjA5LS4xOC0uMDMyLS4zMy0uMDYzLS40OC0uMTIzLS4xMi0uMDYyLS4yNy0uMTUzLS4zOS0uMjE0LS4xMi0uMDktLjIwOC0uMTgyLS4zMjctLjI3NC0uMDktLjA5LS4xOC0uMTgyLS4yNC0uMzAzLS4wNi0uMTItLjE1LS4yNDItLjE4LS4zOTUtLjA2LS4xMi0uMDg3LS4yNzQtLjEyLS40MjUtLjAzLS4xNTItLjA1OC0uMzA0LS4wNTgtLjQ4NmwxLjIyOC4wMDJjMCAuMTIuMDMuMjQzLjA2LjM2NS4wNi4wOTIuMDkuMTgzLjE4LjI3NC4wNTguMTIuMTc4LjE4My4yNjguMjczLjEyLjA2LjI3LjEyMy4zOS4xNTQuMTQ4LjAzLjMzLjA2Mi41MS4wNjIuMTIgMCAuMjY3IDAgLjM4OC0uMDMuMTItLjAzLjIxLS4wNi4zLS4wOS4wOS0uMDYuMTUtLjA5LjIxLS4xNTIuMDU4LS4wNi4xMi0uMTIyLjE1LS4xODIuMDMtLjA5LjA2LS4xODIuMDg4LS4yNzNsLjAwMi0uMjQzYzAtLjA5LS4wMy0uMTUyLS4wNi0uMjEzLS4wMy0uMDYtLjA2LS4xMjMtLjEyLS4xODMtLjA4OC0uMDYtLjE0OC0uMTIyLS4yNjgtLjE1Mi0uMDktLjA2Mi0uMjQtLjEyMi0uNDItLjE4My0uMTgtLjAzLS40Mi0uMDkyLS41OTctLjEyMy0uMjEtLjAzLS4zMzMtLjA2Mi0uNTEtLjEyMy0uMTUtLjAzLS4zOS0uMTIyLS41Ny0uMTgzLS4xOC0uMDkyLS4yOTgtLjE1My0uNDItLjI0My0uMTItLjA2LS4yMDgtLjE1Mi0uMjk4LS4yNDMtLjA5LS4wOS0uMTUtLjE4My0uMjA4LS4zMDUtLjA2LS4wOS0uMDktLjIxMi0uMTItLjMzMy0uMDMtLjEyMi0uMDYtLjI3NS0uMDYtLjQyNnYtLjQ4N2MuMDMtLjE1Mi4wNi0uMzAzLjEyLS40NTUuMDMtLjEyLjA5LS4yNDIuMTgyLS4zNjMuMDYtLjEyMy4xNS0uMjE0LjI0LS4zMDUuMDktLjA5LjE4LS4xODIuMy0uMjczLjEyLS4wNi4yNC0uMTIuMzktLjE4LjExOC0uMDYyLjMtLjA5Mi40OC0uMTIyLjE0Ny0uMDMuMzYtLjA2LjU2Ny0uMDYuMTggMCAuMzYgMCAuNTQuMDMuMTUuMDMyLjMzLjA2Mi40OC4xMjMuMTUuMDYuMjk4LjEyMi40Mi4xODNsLjM1Ni4yNzVjLjA5LjA5LjE4LjE4My4yNy4zMDQuMDkuMTIyLjE0OC4yNDMuMjA3LjM2NC4wNi4xMjMuMDkuMjc0LjEyLjQyNy4wMy4xMi4wNi4zMDIuMDYuNDU2SDYzLjk0TTMzLjM0MiAzNy4zNzdsMy44MzMuMDA2LS4wMzIgMjAuNjc4LTMuODM0LS4wMDQuMDMyLTIwLjY4TTMwLjIxOCAyMy45NWMtLjY5LjE1LTEuMzc3LjMtMi4wMzcuNDgyLS42MjguMTgyLTEuMjI3LjM5My0xLjgyNi42MDUtLjA5LS4yMTMtLjE4LS40MjUtLjI3LS42MDgtLjEyLS4xODMtLjI0LS4zMzUtLjM1Ny0uNDg3LS4xMi0uMTItLjI3LS4yNDQtLjQ4LS4zMzUtLjE4LS4wOS0uNDItLjE4My0uNzUtLjI0NC0uMzI4LS4wMy0uODA2LS4wNjMtMS4yNTYtLjAzMmwtMS41ODYtLjAwMy0uMDIzIDE0LjUxNCAxLjY0OC4wMDJjLjQyLjAzLjgwOC4wMDIgMS4xMDgtLjAyOC4zMy0uMDMuNTQtLjA5Ljc1LS4xNS4xOC0uMDkuMy0uMTUyLjQyLS4yNzMuMTUtLjA5LjIzOC0uMjEzLjMzLS4zNjQuMjctLjQ4NS41NC0xIC43Mi0xLjc5LjE1Mi0uODIuMjEzLTEuODgyLjI0NS0yLjk3NS42OS0uMzMzIDEuMzgtLjY5NiAyLjA0LS45Ny42NTgtLjI3IDEuMjg3LS40NTIgMS45MTctLjYzMy0uMDkzIDEuNzktLjE1NiAzLjU4My0uMzY3IDQuOTE4LS4yNDMgMS4zMzYtLjYzMyAyLjIxNi0xLjAyMyAzLjA5Ni0uMjEuMzY0LS40ODIuNzI4LS43OCAxLjAzLS4zLjI3My0uNjMuNTE3LTEuMDguNjk4LS40Mi4xODItLjk2LjMzMi0xLjcwOC40MjMtLjc1LjA5LTEuNzM4LjE0OC0yLjcyNy4xMTdsLTUuMjQtLjAxLjAzMi0yMC42NzcgNi4xMS4wMWMuNzc4IDAgMS41ODcuMDMyIDIuMTg1LjEyNC42My4xMjMgMS4wNzguMjc2IDEuNDY4LjQ2LjM4OC4xODIuNzE4LjM5NCAxLjA0Ny43LjI5OC4yNzIuNTk4LjYzNy44NjYgMS4wMzIuMjQuNDI3LjQ4Ljg4Mi42MjggMS4zNjhNNDEuOTEgNzIuNTIzbC4wMzMtMjAuNjggMTAuNjYzLjAxOC0uMDA1IDMuNDAyLTYuODMtLjAxLS4wMDYgNC44NiA0LjcwMy4wMDUtLjAwNiAzLjM0LTQuNzAyLS4wMDgtLjAxNCA5LjA3OC0zLjgzNC0uMDA1IiBmaWxsPSIjZDBhNDUxIi8+PC9nPjwvc3ZnPg==");
+}
+
+.hif {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzYuNDQiIGhlaWdodD0iMzMyLjI2NyIgdmlld0JveD0iMCAwIDI3Ni40NCAzMzIuMjY2NjYiPjxwYXRoIGQ9Ik0xNDkuMjA0IDE3Ny40MWMtLjEyMy0uMDkzLS4zMzMtLjI1OC0uNTc1LTEuMDgzLS40NzMtMS42MDItLjY0Mi02LjE4IDEuNjMtMTAuMDc4IDIuMDgtMy41NyA0Ljc3LTUuOTMgNi42ODgtNy4wODMgMS45Mi0xLjE1MiA0Ljk5Ni0yLjc2IDMuNzE2LTIuMTIyLTEuMjgzLjY0MyAyLjE1NS0xLjA1MiAzLjE4OC0xLjYxMyAxLjAzNy0uNTYzIDMuMDg0LTIuMDk3IDQuODE2LTMuNzMyIDIuNTgtMi40MyA0LjYxNy03LjQgNS43NTYtMTEuMjY0LjA4MyAwIC42OTYuMDUzLjczNiAwLS42NzYgNC45NjQuNDY1IDguNDYgMS4zMjggMTIuNTE1IDAgMCAuNzctMS45MiAxLjEzLTMuNDE3Ljg0My0zLjQ3OCAxLjk2Ny02Ljk3NiAzLjY5LTkuNTg4LjY1LTEuMDA2IDMuNTY3LTQuMjY1IDMuNjk1LTUuMDE3LjA5NC0uNTYuMzY2LS41Mi40ODItLjg4My04LjAwNSAwLTE0Ljc1LjgyNi0yMi44Ni4zOS03LjgzNC0uNDItMTcuNjY4LTIuNDY3LTI3LjMxMy0yLjM5NC0xNC4wNzMuMTA4LTMxLjg4IDMuMTEyLTQ1LjA2OCA2LjU3LjExNS4xMDcgMi40MyAzLjUxNyAyLjgxNiA0LjA5Ny42NC45NiAxLjUzOCAyLjE3NyAzLjM5MyAyLjk0NC4xOTItMS4yNjYuMTc4LTMuMzAyLjI5LTQuNzIuMDM4LjA2LjgzOC45OTguOTg0IDEuMjI3LjIxNS4zNDcuNzc3LjkwNyAxLjAzIDEuMjU0IDEuMjkyIDEuNzY3IDIuNDI0IDIuODE4IDQuMSA0LjE2MiA0LjU3NyAzLjY3MiAxMC40NzIgNS44NDggMTUuNTE4IDkuMDg4IDIuOTIgMS44NzYgNS40IDQuNzMzIDcuNjIgNy4zNzUgMi40MjggMi44OSA0Ljc5NiA0Ljk4NiA1LjY1NSA5LjU4OGwuMzQ2Ljk2NGMuOTQ0LS42NyAxLjUtLjc4NCAzLjM0LS43OTIgNC41MjctLjAzIDkuODkyIDEuODYgMTEuNjQzIDUuMSAwIDAgMS44MjgtMS4xMSAyLjIyNC0xLjQ4NHpNOTguOTU2IDY4LjkwNGMtMi45NzcgMTcuNzA0LTcuNzY1IDM1LjI2LTExLjQxIDUyLjYwNS0xLjEzNCA1LjQwMy0yLjQyIDExLjI4My0zLjcwMyAxNi40NmwxLjQ2My0zLjMyN2MuMjU1LS43NjcuOTIyLTEuOTE2IDEuNTYtMy42OSAyLjAzNS01LjcwNyA0Ljg2Ni0xNS4yNSA1LjM0LTE3LjA1My40NzgtMS44IDEuMjQtNC4yOSAxLjY5LTYuMTU2LjQ0NS0xLjg2NS44MDUtMy4yOTMuOTgtMy45MyAyLjc4Mi0xMC41OTQgMy45MzYtMjEuNzEgNC44MTctMzQuOTA3LS4wNzcgMC0uNzMuMDM4LS43MzcgMHptLTUuNDc4LTguMzM0Yy0uNDkuNjM1LTQuNTQ4IDQuMzE1LTYuODE0IDYuMzY2LS45ODMuODc2LTMuMzQyIDIuMTQzLTMuOTMyIDMuMTk1LS4zODQuNjYyLS4yMjQgMS40ODMtLjQ5MiAyLjIxMy0uMjcuNjkyLTEuMjgyIDIuMDEyLTEuNDc0IDIuNzA0LS43NDYgMi41OTgtMS40NiA1LjgxLTEuNzIyIDguMzU4LS43MjIgNi45NTIgMS4yNzYgMTIuNDQ2LjczNyAxOS42NjctLjQ1MiA2LjAwNy0yLjQ5NCAxMS40MS0zLjgzIDE2Ljc4NyAxLjg2IDEuNDY1IDMuMTIzIDMuMTkzIDQuMjkgNS41NDVsLjI5LS45OTNjMS45MDQtOC4zNyAzLjM3Ny0xNC43OTYgNS4wMDYtMjIuNTcyIDEuOTEyLTkuMTYzIDQuMDQyLTE4LjM3NiA2LjA0NC0yOC4wMi41ODUtMi44MTMgMS40OC01Ljc1NiAyLjAxNy04LjM2LjMwMy0xLjQ3IDEtNC42OTUgMS4xOC02LjM5IDAgMC0uNjU4LjY2Ny0xLjMgMS41em04My43OTUgMTQ1LjA0MmMtLjUxLjQ0OC0xLjI4IDEuNTM1LTIuNDY4IDIuMjE3LS43MDIuNC0xLjQ0OC40MzgtMS44OTcuMzQtLjQ1Ni0uMS0uNzA0LS44MDYtMS43OTMtMi4xMTMtMS4wOS0xLjMtMi4zOC0zLjEzMy0zLjgyNi00LjY4OC0xLjI5My0xLjM5LTIuOTYtMi42NzUtNC44NTQtMi45My0yLjE1LS4yOTItMy42NzMtLjcxNS03LjE3Ny0xLjQ1Mi0zLjAzNi0uNjQ3LTcuNjQ4LTIuMjQtMTAuMi0zLjY2LTEuMzQ1LS43NTUtMi4zNjUtMi4xNjgtMy40NC0zLjE5Ny0uMzU2LjEyMy0uNC0uOTMtMS4zNy4yNi0uMzguNDY2LTEuMTgyIDEtMS44MjYgMS4yMTctMy4zNDQgMS4wNzQtNi43ODQuMzA1LTguNjA2LTEuMjMtMS4wNi0uODkyLTEuNTktMS40OTYtMi4yODctMi43MTgtLjQxLS43MjMtLjkzNy0yLjEzMy0xLjAyMi0yLjk5LTEuNDc1LjIxNy0yLjQ3LjEzMy0zLjQ3LjQ1NC0xLjAzLjMzLTIuNDIzLjY2NS0zLjI5OCAxLjA3NS0zLjQ4OCAxLjU5Ny01LjgzMyA0LjYxLTguNzM3IDYuODYtMS4wMzguNzkzLTIuMTU3IDEuODAzLTMuMTYzIDIuNjI0LS45Mi43MzctMS44MTcgMS4zOC0yLjcwNSAyLjE3LS42NjIuNTg2LTEuNjk0IDEuNzg2LTEuOTI1IDEuOTkzLTEuNjA1IDEuMzk4LTIuNTE0IDMuODQtNC44NSA0LjM0OC0yLjQ4LjUzLTguNTUtMS44MDMtMTEuMzE1LTIuMDItLjA0OC0uNjY1LjQtMS4zMDMuNzgzLTEuNzIgMS41ODItMS43MiA1LjM3OC0yLjU1NiA3LjU3NS0zLjgzMiAyLjY5LTEuNTc2IDUuMDE3LTQuMDE4IDcuMzc1LTYuMDAyLjc1LS42MzYgMS4zMy0xLjQ1IDEuOTY3LTIuMjEtNi42NTMtLjUzLTEyLjQ0Ni0xLjE4My0xNy40NTQtMy4yOTctMi44MS0xLjE4Mi01Ljg0NS0yLjkyNS04LjM1Ny00LjU3LS44OS0uNTgzLTIuMTEyLTEuNi0yLjcwNC0xLjk3OC0uNS0uMzEzLS44NzYtLjcxOC0xLjQ3NS0uOTczLTEuMjI3IDUuNzEtMi40MDcgMTEuNDQ3LTMuNTQ0IDE3LjIwOC0uMzMyIDEuNjcyLS42MzIgMi44OC0xLjAxNiA0LjI5LS4xMTIuNDE3LTEuMDY3LjM1NC0xLjgzLjI4Mi0uNDQtLjA0OC0yLjk0OC0uNDQ0LTMuMTg1LS44ODQtLjMzNS0uNjEzLjQwNC0zLjE3NS40NzgtMy41NjguMzg1LTIuMDUgMi4xMTMtMTEuMjY3IDIuMzctMTIuMzU2LjMtMi4wNjUgMS41MDgtNy4wMyAxLjg2Ny04Ljc1NyAwIDAtNS4yMS01LjgyNC01LjcxLTYuMzkyLTEuNzE0LTEuOTQzLTMuNTU4LTMuMjM0LTUuNjU2LTQuODE4LS4xNy0uMTI4LS45MDctLjQ2Ni0xLjA0Ni0uNTczLjUwOC0uMTI0IDMuMjM1LS43NSA0LjIyNi0uODk3IDAtLjA0LTEuMjUyLS40ODctMS4yMTMtLjQ5NC00LjctMi40NDQtOC40NjYtNy4zMDYtMTEuMDYyLTExLjgtLjczLTEuMjYtMS45MDQtMy44ODgtMi4wNjUtMy44MjUtLjQ2OC0xLjAwNy0xLjI4NS0yLjkwNC0xLjYyMi0zLjc5Ni0xLjI2LTMuMjk1LTMuMzI4LTExLjkxLTIuNTY4LTguODE1IDAgMC0uNDMtMS43MzYtMS4xNS01LjE5Ny0uNzE1LTMuNDYtMS4xNDctNC43MjctMS42OS03LjEyOC0xLjM4NC00LjY4LTMuNTk3LTEwLjY3LTQuMTczLTEyLjU5LS4xNTUtLjUyLS43NjgtMi4xMTQtLjc2OC0yLjExNHMxLjc1NC45NiAxLjk4MyAxLjA4OGMtMS43MzYtNS43LTMuMTA1LTEyLjc5NS0yLjIwNi0yMC41NTMgMS4yMzctMTAuODEgNi4yMy0xOC40MTQgOS44MzMtMjYuNzk2Ljc2LTEuNzkgMS4zMTMtMi45OTggMi4zNi01LjM0Ni4yMjMtLjQ5NiAxLjA0OC0yLjc4OCAxLjA4LTMuMDEuMjAyLTEuMzQyLjM0LTIuMTM3Ljc0LTMuNDQyLjYzNy0yLjEyNyAxLjg1LTQuOTEgMi45NDctNi44ODMgMS43MDgtMy4wOSAzLjk4LTYuNTU2IDUuMDktNy43ODggMS4xMTItMS4yMzIgMy4zOTMtMy45MSAzLjc2Mi00LjI1NyAwIC4wMDcgOC4zMTctNy41IDEyLjUzNS05LjgzMyAxLjYwNi0uOSAzLjExMi0xLjI3NiA0LjY3Mi0yLjIxMiAzLjAxOC0xLjgzNiA2LjAxNC00LjAyIDkuMzQtNS42NTQtMS4yNSAyLjY2LTIuNzggNC4zNjUtMy42ODggNy4zNzUuMTM3IDAgLjU5Mi0uMDg2LjczNiAwQzkwLjU0IDkuMjQ1IDk4LjkyNiAyLjE3IDExMy45NDYuMTJjNS4wNzctLjY5MiAxMS4yNjggMi4wMDMgMTcuNTkzLjk3M2wtLjAxIDEuNTRjLTMuMjI4IDIuMjc1LTUuNzUyIDQuMTc2LTguODQyIDYuNTcyLTMuNzggMi45MTItNy40NDggNS43Mi0xMC45MTMgOS4wODctLjkwMi44NzctNS42IDUuNTA4LTUuNzU0IDUuNzUzIDIuNzMzLTEuMzY2IDYuNzEzLTEuNjczIDkuNTQtMS44MTIgNi42MTUtLjM0NSAxNC42NDIgMi41NzQgMjAuODk2Ljk4NC0xLjQyIDEuNzk4LTIuNTI3IDEuODI4LTQuMTc4IDMuMTk1LTIuNzA4IDIuMjItNC4zNiA1LjcxNi03LjEzIDcuODY4LTMuNDkgMi42ODgtNy4zODIgNC42Ny0xMS44IDYuMzkuMDMuMDA3IDAgLjcgMCAuNzM4IDEuMjg0LS4xMDcgMi42MjIuMzQ1IDIuMzkuNTc1LTEuNTEgMS40NDQtMy43MSAyLjMzNi01LjM0IDMuNjUtMi44MiAyLjI0OC01LjA2MiA0Ljg5NC04LjExMiA2Ljk4MyAxLjI0NSAyLjI3IDEuMDIzIDMuMzk2LjA1NyA1LjI2MyAzLjE0LS42NDcgNy40MjItMi4xMjMgMTAuMDY4LTIuODIgOC4wNS0yLjEyNSAxNC43MTItMi42NSAyMy44MDItMy4zMjcgMy40NDctLjI2MiA3LjUxNy0uNDQgMTEuNTUyLS4yNzQgMi4xNi4wODcgMTIuOTYuMzQgOS44NDQuMTI1IDYuNjYuNTEyIDExLjg0Ljk3IDE2LjY0NCAxLjIyNC0uNTEyLS40NS0xLjI1NS0xLjA1NS0xLjg1Ny0xLjYtLjQ4Mi0uNDM1LTEuMDItLjc3NS0xLjUyNC0xLjE5OC0xLjQyMi0xLjE5Ny0zLjAxNC0yLjYyNC00LjIzNS0zLjg2LS44NjctLjg3My0xLjMyNy0xLjg4LTIuNDAyLTIuNTMyLTIuODY0LTEuNzQ0LTUuNDkyLTIuNTg3LTguMTItNC40NTMtMi43NzMtMS45NzUtNS4zMTYtNC44NzQtNy42MTItNy4zNDYtMi4xMi0yLjI4LTQuNDQ3LTQuMTYtNi4zOS02LjYzNiA0LjI2NS42MyA4Ljg5NyAxLjU5IDEzLjc2NiAxLjIyOCAyLjA3LS4xNTcgNC41MS0uNTcgNy4wNi0uODE1di0uMzJzLTEuNzI4LTEuOTg2LTIuMTI4LTIuMzcyYy0xLjc2Ny0xLjY4LTMuNDczLTMuODctNC45OS01Ljc2LTIuMTE1LTIuNjM2LTMuNzktNS4yNTgtNS44NDMtNy45NC0xLjk1LTIuNTQyLTQuMTU0LTQuNTU2LTUuOS03LjM3NCAzLjM1IDEuMzQ1IDYuNDM4IDMuNzAzIDEwLjU3MiA0LjE4IDYuMTg0LjcwNiAxMS40NTQtLjkwNiAxNy40NTQgMCAxLjU2LjIzIDQuNzQgMS40MyA1LjY1MyAxLjk2Ni45MTUuNTM1IDEuNjEyIDEuODIgMi4yMTUgMS45NjcgMS44MzUuNDIyLS42OTItMi4yOS45OC0xLjcyMi45ODcuMzMyIDEuNTkzIDIuMTMgMi4yMTYgMi45NTIgMS4xNSAxLjUzNiAyLjIyIDMuMDI4IDMuODQ4IDQuMDk1IDIuMDY4IDEuMzUyIDcuNzUgNC40IDcuOTUgNC41MSAxMC42NjIgNS44NSAyNC45ODYgMTMuMTcyIDI1LjU2NSAyOC4wMjItLjIzOC0uMTcyLjA4NCAxLjM1My4wODQgMS4zNTNsLS4wNzQgNC4yOThjLjAxNi0uMzItLjQ2NS03LjE5NS0uMTczLTcuMTcuMTIyLjI0IDEuNTE2IDMuMzE1IDEuNjU0IDMuNzE1LjQ1IDEuMzUuOTA4IDMuMTEgMS42NjMgNC45OTIgMS4wNDggMi42MSAyLjAyIDUuMDM0IDMuMjU2IDcuNTU0IDEuNjIgMy4zMTIgMy44MDcgNi45OSA1LjM5IDEwLjMzMyAxLjM1MyAyLjg2IDEuOTIgNC44NjYgMi44NjUgOC4xNDcgMS4xMyAzLjk1NiAyLjYyMiA5LjYyMyAzLjAzOCAxNC4yMjMuNDYgNS4yMzItLjIwMyAxMC41LTEuMjMgMTQuNDAyLjU1NC0uMTE0IDEuNzItLjM5IDEuNzItLjM5cy00LjYxIDcuMjItNi4xNDcgMTAuODE3Yy0yLjExIDQuOS0xLjYgOC45NzMtMy4yNjMgMTUuMjQ3LS40MyAxLjYxNS0xLjM1NCA1LjAwOC0xLjg5OCA2LjM4NS0yLjA1OCA1LjA5NC00LjQ0NiA5LjY1NC04LjQ3NCAxMy40Ni0yLjMwNSAyLjE3Ni00LjA5NyAzLjcxLTUuNTA1IDUuMTJsLTEuMDc4LjgzNWMyLjA5My0uMjYgMy40MDQtLjQ1MyA1LjQ3My0uNzMzIDAgLjAzLS4wMTIuNzMgMCAuNzM3LS45NzguNDc1LTIuNDYuODM2LTMuNDQ0IDEuNDczLS42MjguNC0xLjE1NiAxLjQ4Ni0xLjcyIDEuOTY4LTEuNDIgMS4xOTgtMi43OSAyLjI2Ny00LjE4IDMuNDQyLTIuMjI3IDEuODc0LTQuMjk2IDIuOTM4LTYuMzgzIDQuOTQtMS41NSAxLjQ4OC0yLjk3OCAzLjQ4LTQuNDMyIDQuODkzLTEuMzMgMS4yNzUtNC43NjUgMy43NjQtNC45NiAzLjkzMi00LjAzNyAzLjQ3NS0yNS4zNzQgMTAuNjQ0LTMwLjU3IDEwLjYxNS4wMzQuMDI0Ljg2OC4zOTQuODY4LjQ0OCAxLjE2LjMzOCAyLjQyOC42IDMuNjg4LjgzOCAxLjY2Mi4zMDcgMy4xNTcuNTQ0IDQuNjczIDEuMTI3IDEuODEyLjcgMTAuODkgNi44NCA3LjM3MyA5LjM0MyAwIDAtLjk1IDEuMDE4LTEuNDYzIDEuNDciIGZpbGw9IiMyMzFmMjAiLz48cGF0aCBkPSJNOTcuNDE0IDE0NS45NzJjLS4xOTIgMS40Mi0uMjYgMy41Mi0uNjgyIDQuNzktLjkgMi42OTUtMS4zODQgNS45MzggMS4yODYgMTAuMzIzLjM4NC42MzIuMTQ2IDEuNC43MzYgMS43MjIgMS4xNi42MyAzLjQ2Mi43NTcgNC44OSAxLjExMiAyLjQ2Ny41ODggNC40MzggMS4yNTMgNi42MiAyLjA4NC43ODMuMjkgMi4zODYgMS41NyAyLjc3IDEuNjY4LTMuNDQtMy40MDMtNi45NjQtOC4xNTctOS45NDQtMTEuNjYtLjg5LTEuMDQ1LTIuMzUtMi42MjMtMy4wOTUtMy43NzUtMS4yMDYtMS44NTMtLjg0NC0yLjU4LTEuOTgtNC41MS0uMDk0LS4xNTItLjU1NS0xLjY1NS0uNi0xLjc1NU0xNzguMDY3IDIwMS45NDhjLTEuMjctMS42Ny0yLjIxLTMuMTItMy44MzQtNC4yMy0uNDQ4LS4zMDYtLjkxOC0uNjItMi40NzQtMS41MzUtMS41NTctLjkyLTYuNzQ0LTEuMzY3LTEwLjkyNS0yLjgxNi0uNDM0LS4xNS0zLjQ3NS0xLjA5Mi0zLjg2Ni0xLjMwNy0uOTktLjU1My0xLjk4Mi0uOTItMi45NS0xLjUyLTIuNDczLTEuNTMtNC4zMjQtMy44OS02LjM5LTUuODU2LS4wOTMuMTE1LS41OTMtLjA3Ni0uNzQgMCAuMTIzLS4wNTYtLjUwNi42OTMtLjg4NyAxLjIzNS0uOTUyIDEuMjY3LTIuMzUyIDIuMTIzLTMuODgzIDIuOC4yMDcuNDQ0LjQuNjguNjMyIDEuMDg1LjI4OC41MjQgMi4zNTYgMS45MTQgMS43MjcgMS41MTYgMy41MTYgMi4yMTMgMyAxLjg2NCA3LjQyNCAzLjI3Ni4yMi4wNyAzLjY2NCAxLjE5NiAzLjg5MyAxLjI0MyA0LjA5OC44NTUgOC45NSAxLjcyNSAxMC4yNyAyLjY1NiAxLjMxOC45MyA1LjU2OCA1LjYyNSA2LjM0NSA2Ljg5NSAxLjA0NSAxLjcxMy45ODUgMS43MiAyLjcwMy40OS41MDUtLjM2IDEuNzItMS41MTIgMi4yMzYtMi4wODguNTEtLjU3NiAxLjE3Ny0xLjE5LjcxNy0xLjg0NE03OC4zMDcgNzMuMDhjLTEuNDIyLjI2My01LjkzOCA0LjgwOC03LjYyMiA1LjY1NmgtLjI0M2MtLjU1NCAxLjU2NS4yNiA0LjU3NyAwIDYuMzkuMDc1IDAgLjY2Ny0uMDU0LjczNyAwIDIuMTI2LTQuNjEgNC44OS03LjkwNSA3Ljg2NC0xMS41NTMtLjI2LS4xNDUtLjEzLS42MTQtLjczNy0uNDkyTTIxOC44MDggNjIuMDI1Yy0uODQgMi40OTgtMS41MTIgNC41OC0yLjMwNSA3LjEyMy0uNDIyIDEuMzItMS41MjQgNC4zMjctMS45NCA1LjctMS4wMTUgMy4zMDQtMS40NzIgNC42MjMtMi41NiA4LjA2Ny0xLjQ0NCA0LjU3NC0zLjMzIDEwLjk1Ni00LjU2NyAxNi40NzMtMS40MzUgNi4zNi0yLjMwNSA5LjA0OC0zLjc1NiAxNS43MDcuMzIzLjExNCAxLjM0NSAzLjA5NCAxLjc5MyA1Ljk3NC41NTQgMi44MTUuMjU2IDQuODYzLjc2OCAxMC4yNC4yMTctLjE2IDIuMTM1LTIuMzQ1IDIuMzk1LTIuNDM3IDAtLjA4NSAzLjE5Mi0zLjU5NCA0LjM4Mi00LjYxNy45NS0uODMgMi4xMjMtMS41NzcgMy4wMi0yLjQzLTUuMjM3LTE3LjIgMS4zNC00MC44NjMgNC42NzItNTYuMTIuNDItMS45NSAxLjAyNS00Ljk0IDEuMTUzLTYuODYuMjE4LTMuMy0uNTEyLTUuNzYzLS45LTguNDUgMCAwLS45MzQgNy45NTUtMi4xNTUgMTEuNjNNMjExLjI0OCAxNjAuMTg0YzEuNTMzLTEuNzUzIDMuMjY4LTMuMTcgMy43MzYtMy41MjQgNS4xODQtMy45NiA4LjE1Ny05LjE2MyAxMC44MTctMTUuNzMuNjQ0LTEuNjE1IDEuMzg1LTMuODM4IDEuODI0LTUuNjUuNjMtMi42OCAxLjI4NS01LjEwNyAxLjYxNy03LjYyNy4wMjQtLjIwNi40Ni0yLjY3NC40ODMtMi45NS4wOS0xLjI3NS44NDYtMy45MzggMS4yOTQtNS40MjctLjIzOC4xNTMtLjcwNS41MTItMS4wMzguOTAzLS40MS40NzItMi44MjggMy45NC0zLjM0NCA0Ljc3LTEuMzA0IDIuMDk3LTIuNTYgNC4yNTUtMy44NCA2LjM5LTEuNTkyIDIuNjItMi45ODMgNS4yNC00LjgxNyA3LjYyLTUuNDYzIDcuMDctMTEuODY4IDEyLjE5Ny0xOC4xNCAxNy45Ni0uMjQ0LjIyMy0xLjYwNCAxLjQ0Ny0xLjgxNyAxLjcwNy0uODQ4Ljk3Ny0xLjAwNiAxLjA4LTEuNzY3IDIuMTMyLS4xODcuMjQ1LTEuMDc3IDEuNTE3LTEuMTg1IDEuOC0uMTA2LjI2My0uNTI3Ljg2LS42OCAxLjEwNCAyLjA2NyAwIDQuMzQtLjc3MiA1Ljg0NS0uOTYgMy45ODQtLjUwNCA2LjI1LS43NjMgOS45NTYtMS4yMjNsMS4wNTgtMS4yOTZNMTY1LjAzIDI1LjQzYzEuNzY3LS4xIDMuMjU3LS4xODYgNC45Ny4yMDcgNC4xMDcuOTQ0IDYuODIgMS44IDkuMDk1IDMuMTk2LjM5LjI0IDIuMDU2IDEuMTg4IDMuNTAyIDIuMTAyIDEuNDUuOTEzIDIuMTEgMS44ODUgMi45MDQgMi4zOS43OTYuNTAzIDIuMDEyIDEuMzc1IDIuMjYgMS41MzUtMS44OC0zLjU4NS0zLjMwMy05LjA4NC0zLjg4LTEzLjY0Ny0uMjY4LTIuMTEzLS4xNzctNC4xNTYtLjgxLTYuMTQ2LS41NDUtMS43MTItMi40MTgtMi40MTQtMy41MTQtMy42NjctMS45MjctMi4yLTIuODg4LTMuNjQtOS41NDgtNC4xNTItMy4yNzMtLjI1My02Ljc0NS4yNDctOS44NDQuMjU1LTIuOTQgMC01LjkgMC0xMC4zODUtMS42NjQuMjQuMjMgMS4zNDQgMS4xNSAyLjI3MyAxLjc2My43MTYuNDcyIDEuMzkuODIgMi4yMTUgMS4yNzMgMS45OTYgMS4wODQgNC4zNDQgMi4yNTMgNi4zOSAzLjI1MyAyLjEyIDEuMDM1IDQuMTg2IDEuNjggNi4zOTQgMi42NDcgMy4xNCAxLjM2NyA2LjIxIDMuMTQ0IDkuMDkgNC44MjcgMS44NzUgMS4xIDMuNzkgMi4zODUgNS40MSAzLjc3Ni4zMy4yODUuNDIgMS4yMzUuNzM3IDEuNTItMS4wNi0uNjctMS45LS45NjUtMi45NS0xLjYyLTIuNTY0LTEuNTg4LTQuOTctMy4zMS03Ljg2Ny00LjY3LTEuNjM3LS43NzQtMy4zMzMtMS44NjYtNC45MTctMi41NTgtMi41Mi0xLjExNS00LjczLTEuNjk3LTcuMTI3LTIuODUtMi4xLTEuMDEzLTMuMTY2LTEuNzc1LTUuMzYyLTIuOTQ1LS42MzItLjMzOC0yLjExNi0xLjQ0Ni0yLjMwNC0xLjU0NS0uODY0LS40NTUtMS4zMjgtMS4wNy0xLjcyOC0xLjIwOC45MjMgMS4zNiAyLjk4NyAzLjg5IDMuOTg0IDUuMTA0IDEuNTAzIDEuODMyIDIuNjYzIDMuNjEzIDQuMTQ1IDUuMzk1IDEuNTQ4IDEuODU2IDMuNDIgMy43MTIgNC45NDggNS42NjguMTctLjA5LjM1NS4xNzguNDk1LjI0NmwxLjQyIDEuNTEzTTIwOC42MSA1MS40ODNjLTQuMjYzLjUxNC04LjgyNS42NjgtMTMuNTQgMS4wMjItMi4yNS4xNi00LjYzNy4yNjctNi44OC40MzUtMi4xMjIuMTUzLTQuOTEuMDA0LTYuNzIyLjEzNi0uODc2LjA1My0zLjQtLjE1Mi00LjkwNy0uMTUybC03LjE5LTUuOTQ0Yy0uMTEtLjI2OC0xLjg5NS0xLjY2LTIuMDUtMS45IDMuNDU3Ljc3IDcuMzA0IDEuMjc2IDEwLjA1NS45NiAyLjAwNS0uMjM3IDQuNzYtMS4wNDMgNi43MTctMS4zNDMgNS43NTUtLjg4MiAxMS41LS4zNDggMTUuNTU1IDEuMDg4IDMuMjY2IDEuMTUyIDUuODkgMy4yMDIgNi42NiAzLjc3Ni43NjguNTggMi4zMDQgMS45MjMgMi4zMDQgMS45MjMiIGZpbGw9IiNmZGRkMDQiLz48cGF0aCBkPSJNMjA5Ljk1MyA1MS4yOWMzLjMxLS40NTUgNS44NzgtMS4yNDYgOC42NTgtMS44OTNsLjg0LS4ycy0uMDA2LTEuNTU0LS4wNDItMS45MjhjLS4xLTEuMTEtLjMtMi4zNDMtLjY5My0zLjQ0Mi0uODYtMi4zNi0yLjEyLTQuODYtMy40NC02Ljg4My00LjU4LTYuOTgyLTEyLjg1OC0xMi4wNi0yMC40NDgtMTUuOTgtMi42ODItMS4zOS00Ljg4LTIuNTgtNy42Mi0zLjkzMi4xMTQuMjU0Ljg3MyAxLjE0My45NzIgMS40Mi4zODMgMS4xMyAyLjg3NiAzLjYyOCAzLjggNC43MjYgMi43NDMgMy4yNDggNS4yNjUgNi41OCA4LjI1NSA5LjU4NyA0LjA0NCA0LjA1NiA4LjE0IDguNzUgMTEuOSAxMi43OC40MzIuNDYyLjg0NSAxLjM2IDEuMzczIDEuNzIyLjU0NS4zNzUtLjczLjcyMi0uNzM1LjczNy0xLjY2NS0yLjEzNS0zLjc3Mi0zLjU2LTUuMzk3LTUuNjY2LTMuMzA1LTQuMjctNy42LTcuNjI0LTExLjA3NS0xMS43NC0zLjc0Ny00LjQ1LTguMDY3LTguOTY4LTEwLjgxNS0xNC4yNi0uMDc2IDAtLjk1Ni0xLjIzNi0xLjAwNi0xLjI4Ljc5NSAzLjU2IDEuNDU1IDkuNzU2IDIuNTUyIDEzLjc3MyAxLjA2IDMuODk1IDIuNjg4IDYuODQ4IDQuNjE1IDkuOTU0LjczIDEuMTc2IDIuMDM3IDQuMDk4IDIuMTEyIDQuMTE4IDEuNDA4LjM4MyAyLjY2NS43ODIgNC4wOTYgMS4wODggMS43OS4zODQgMyAuODI4IDQuODY3IDEuNzI4IDEuNzI1Ljg0IDIuNSAxLjUyOCAzLjEzNCAxLjk4NSAzLjI2NiAyLjM2OCA0LjA5NiAzLjU4NiA0LjA5NiAzLjU4Nk02Ny4xNjYgMTk0LjI0Yy0uMTE4Ljc2NC0uNTYgMi40Mi0uNTYgMy40NzIuODE2LjIwMyAxLjY1LjMyNCAyLjc1LjQ5Mi45NjUtNC4yOSAxLjkyLTkuODY3IDIuOTUtMTQuNzUgNi4yOTgtMjkuODQgMTMuNTQtNTcuOTkgMTkuNzY2LTg3Ljc1OC41My0yLjU3MiAxLjUyMi01Ljc1MiAyLjA2OC04LjM1NyAxLjA3Ni01LjI1IDEuODczLTkuODg4IDIuOTk1LTE0Ljk5Ny44NDQtMy44ODcgMi4xMi04LjUxIDIuNTAyLTEyLjUzNi0xLjQ4NS42MzQtMi4zODIuMzc3LTMuNjMgMC0uNjI0IDIuNDI2LTEuMTIzIDUuMjIyLTEuNzIyIDcuODY2LTMuOTg2IDE3LjUtNy41MSAzNS4zNzYtMTEuNjkgNTMuMDA3LTEuMzkgNS44NDctMi41NjYgMTEuOTUyLTMuOTg4IDE3Ljc5Mi0yLjI2IDkuMi0zLjk3IDE4LjU0LTYuMDUgMjguNTE1LTEuMDIgNC44Ni0yLjQ5MyAxMC44OTItMy4xODYgMTUuNjAyLS4zODMgMS43OTMtMi4wNzcgMTAuODItMi4yMDQgMTEuNjVNMTE1Ljg4MyAxLjM1M2MtMi44NjUuMjU0LTYuMDQuNzY4LTguMzIyIDEuNTM4LTkuODg2IDMuMjk0LTE1Ljg3NSA3LjkzOC0yMS42MzYgMTUuNDkzLS41MzcuNzAyLTEuMTQgMS42NDYtMS43MTggMi4zMzgtLjg2IDEuMDE2LTIuMjg4IDEuNzItMi45NSAyLjk1LTEuMjYgMi4zMTMtMS44NzMgNi4wNzMtMS45NjcgOC41MTQgMS43MDUtMS42MjcgMi44OC0zLjA2NSA0LjQyNC00Ljg3Ljc2LS45MDcgMS44OTgtMi4wNzggMi43MDUtMi45NC40MzctLjQ4My41MTQtLjU0Ljk4LS45OTQgMi4xMDctMi4wNzMgNC41Mi00LjMxMyA2Ljg4NS02LjEzNSA5LjMwNi03LjIgMTYuMzctMTAuNzY2IDI5LjUtMTQuNzZsLS4yNDYtLjQ0NmMtMi40MjItLjE5NS00Ljk4My0uOTMzLTcuNjU3LS42ODciIGZpbGw9IiNmZGRkMDQiLz48cGF0aCBkPSJNOTQuMDM1IDU4LjI3Yy0uODc3LS43NzQtLjk2My0zLjQ2NS0uNjEzLTQuMzk0LjI5LS43NjQgMS4wMzMtMS45NjQgMS45MTMtMi42MDggMS42NjQtMS4yMTUgNS4xNi0uOTMgNi40MjcuNTMzIDIuMDYtMS45NzUgNS43Mi00LjgzIDguMjU2LTcuMjM1IDAgMCAyLjM3NS0xLjM4NCAyLjM3NS0xLjQ2Ni01LjExNSAwLTEyLjItLjQxNi0xNy44NjIuMjM3LTcuMDA1Ljc5OC0xNy41MTQgNC40OTQtMjIuMTI0IDcuODY2LTEuNzggMS4yOTctMi42NCA0LjA4LTMuOTMzIDUuOS0yLjc0MiAzLjg1LTUuOTc2IDcuMzU4LTkuMDk1IDEwLjgxNi0xLjM1IDEuNDgtMS44OTQgMi41NDgtMy4xMzggNC4xNDctLjU3LS4zMjMtMS41OC0uMDE4LTIuMDI0LS4yMTUuMzg1LTEuODk3IDEuMjY4LTIuNTM2IDIuNzA0LTMuOTMzLjQ2LS40NTMuNzYtMS4wNiAxLjIzLTEuNDc2IDQuODMtNC4zODcgOC41NC05LjUwNCAxMi4wNDQtMTUuMjQgMi4wMzctMy4zNSA0LjM3Mi02LjY0IDUuNjU0LTEwLjgxNyAxLjctNS41NCAyLjA2LTExLjg2MiAzLjkzMy0xNy40NTQuMzU1LTEuMDc0IDEuNTQ1LTIuMjIgMi4wMTQtMy4xOTQuODI4LTEuNzcgMS43LTMuNjYgMi43MjMtNS43MDctLjE0NiAwLTEuNjQ4IDEuMTEtMS43ODUgMS4wMzQtMi40NzQgMS42NTYtNC4zMyAyLjctNC41MjQgMi44MS0yLjYyIDEuNDM0LTQuNjU2IDIuMTUyLTcuMDMgMy44MjctMS4wMjIuNzA3LTMuNjQ4IDIuOTc1LTQuNTc3IDMuNzY3LTguNzY0IDcuMzc1LTE1LjM0OCAxNi4xMDctMTcuNTQ2IDI5LjkxLS4zIDEuODc3LjEzIDQuNDA0LjI0NSA1LjkuNDQgNS45MjUgMS4wNTIgMTAuNjE3IDIuNDU4IDE1LjI0My45NTItLjYzIDIuNjM4LTEuOTMgNC4wNDYtMy4yMSAyLjAyNy0xLjg0NCAyLjk2OC0zLjA5IDQuNTU3LTMuNjc0LjY2My0uMjU1Ljg3Ny0uMTMyIDEuMjMtLjI0Ny0uODUzIDIuODgyLS40MDYgNy4xMjIgMCAxMC4wOC4wNzcgMCAuNzA3LS42MzQuNzQtLjU4IDYuMTktOS44NjUgMTQuNDQ4LTE2LjkyNCAyMy44NDItMjMuNiAzLjYyNy0yLjU4MiA2Ljk3NS00LjY4OCAxMS4zMS02LjY5NC0xLjk1MyAxLjM4LTQuMTczIDMuMjcyLTYuMTQ3IDQuNTctMS4xOTguNzc1LTIuMjIzIDEuNTEzLTMuMzY3IDIuMzUtLjYxNC40MzctMS40NTggMS4xMi0yLjA0IDEuNTgzLS44My42MzctMS40MzIuOTEtMi4yNyAxLjU0NS0uNDc2LjM0Ny0uOTU3LjgtMS40MTggMS4xNi02LjIgNC43ODQtMTEuMzkyIDkuODE2LTE1Ljk3OCAxNi4yMjMtMS44MDYgMi41MDUtNC40OTUgNC4xNy00LjE4IDguMTU4LjE1NC0uMTMgMS41OTgtMS41MzcgMS45NjctMS45NjguNjM3LS43NjcgMS42NzQtMS42MzUgMi40NTctMi4yNTYgMi4xMDUtMS42OTcgMS4yODQtMi43NTcgMS45NjYtNS40MDguMTYyLjEuNzkzIDAgLjk4MyAwIC44NTMgMi4xMDUuMTcuOCAxLjcyMyAxLjcyIDIuMTMzLTEuMzQ0IDQuMzktMi43NDMgNi42MzUtNC4xNzcuNy0uNDU1IDQuMDQtMi44NzMgNC45MTctMy40OS45NjYtLjY5NyAzLjU3NC0yLjc5IDQuNDczLTMuNTU3IDIuNDcyLTIuMTUgMy4yMTItMi42OTIgNS42NDYtNS4wNi42OTItLjc3IDEuMzU4LTEuNTcgMS4xODUtMS43MjQiIGZpbGw9IiNmZGRkMDQiLz48cGF0aCBkPSJNMTE0LjU3IDIzLjc2NGMtMi4yMi4xNy05LjczIDEuNjY1LTEyLjQyIDMuMzQ3LTEuNjEzIDEuMDE0LTMuMDcgMi42Ni00LjY2OCAzLjY5LTMuOTEgMi40OS03LjQ5IDQuNTI0LTExLjggNi42MzYtMi42NSAxLjI5Mi00LjA1IDIuNzA0LTguMzYgMi43MDQtMS4wOTcgMy40MjctMi45MiA1LjU1LTMuOTc4IDguODQ3IDUuMjctMi40OSA5LjIxLTQuNzY4IDE1Ljc4LTYuMjQzIDIuNjM0LS42IDUuNTA2LTEuMTEgOC4xMTItMS4zMDMgMy44MS0uMjkgOC4wNS42NTMgMTEuNzk4LS4wNyAxLjEwNy0uMjIyIDIuNjI4LTEuMzQ1IDMuNjg3LTEuNzIgNi45OTMtMi41NDMgMTIuNjIzLTYuMzg1IDE2LjcxNi0xMS44LjY0LS44NTMgMi4wMzUtMS43OCAyLjY3NS0yLjU1LTQuMjI1LS42NC0xNC4yMS0xLjc5Mi0xNy41NC0xLjUzNk0xNDUuNDI1IDI2LjcwOGMuMTIzLjE3IDEuNTEgMS4xNiAxLjY2NiAxLjI4IDEuNDggMS4xNTUgNC40NyAxLjcyOCA1LjcgMi4zMi40MjMuMiAxLjEuMzg0IDEuNDc4LjU0NSAxLjY5NS43MjMgMi42NjMgMS4yOSA0LjQ3NSAxLjg3NCAxLjk4LjYzNyA0LjA2NCAxLjY0NSA2LjMzNyAyLjExMi43NDUuMTUyIDIuOTg4Ljc5IDQuMjkgMS4wMjMgMS43OTMuMzIgMi40Ny40OCA0LjA3LjczMy42NC4xIDEuNjkuMjkyIDIuOTA3LjU0NyAxLjYwNS4zMzggMi43MjQuOTIgNC4yMiAxLjQyLjg2NC4yODUgMS41ODUuNjAyIDIuMjEyLjg0LjMxLjExNi44OCAwIDEuMjI4IDAgMCAwIC43NSAxLjAzLS45OC45ODQtMS43LS4wNTQtNC43MzMtMS41MTQtNi44ODUtMS45NjctNS42My0xLjIwNS0xMS40NDctMS45MTYtMTYuOTYtNC4xOC0zLjAzNi0xLjI0NC03LjYxMi0zLjE4LTEwLjk0LTQuMzMuMjYuMzUzIDEuODIgMS4yNjYgMi4wOSAxLjYyNi4zMTQuNDI0IDEuMzAyIDEuNDUgMS43MSAxLjg3MyAzLjEyNSAzLjI1IDYuMTggNS40MzcgMTAuNSA3LjU5NyAxLjc4Ljg5IDIuOTk4IDEuNjI1IDUuMDk3IDIuMjggMS4wMjUuMzIgMi4wNTMuNjA0IDMuMTM3LjgzNCAxLjc2Ni4zNyA0LjgwMy43NyA2LjU5OC40NDUgNC44MTgtLjg3IDkuMDE2LTEuNzI1IDE1LjA0LTEuNzI1LS4yNDctLjMzNS0uNDk2LS44My0uNzY4LTEuNTc3LS4zOC0xLjA0My0xLjE2LTIuMDcyLTEuNjIzLTIuNzMyLS43My0xLjA1My0xLjM3My0xLjUyMy0yLjMyOC0yLjMyMi0xLjQ4LTEuMjQ1LTMuNzMyLTIuNDYtNS4zOTUtMy44NjUtMS4xMy0uOTU1LTIuMTA3LTEuMTA3LTMuMzI4LTEuOTIyLTEuODI3LTEuMjE3LTQuNDkyLTIuNjQtNy4zLTMuMzI3LTMuMDktLjc1OC00Ljk5Mi0uNzY4LTcuMjk2LS41MTItNi42MTcuNzM2LTEyLjM1IDEuMTA0LTE4Ljk1LjEyOE05Ny4zMiA1Mi4xNjVjLTMuNDcuNjgzLTQuMjI3IDcuNjM1IDEuODgyIDYuNjYgMy44ODctLjYyNSAzLjU1OC03LjczMi0xLjg4My02LjY2TTQ3LjMxIDU4LjI0N0M0Mi43IDY2LjQ0IDM4LjUyIDc1Ljc0NSAzNi41ODYgODcuNTRjLS4zNzcgMi4yOTYuMjE3IDUuNzIuNTI0IDguNjQ4LjI5IDIuODQzLjg3IDYuODcgMS44MSA5LjUxNy45NjggMi43MjYgMS4xNjYgMy41MzggMS41NjIgNC4wOTggMS4wMjQgMS40NSAxLjcyOCAxLjk3MiAyLjE4MiAyLjM2NSAyLjIwMyAxLjkwNCA0LjA1IDMuOTYzIDYuNTY0IDYgMi45IDIuMzQ4IDYuOTI0IDMuMTggMTAuMTUgNS4wNiAyLjA1IDEuMiA0LjI5NiAzLjExMiA2LjE0NiA0LjY3LjQuMzM4IDIuODIyIDIuNTIyIDMuMDgzIDIuNjQ1IDEuMTUtMS41MzYgMS44NS0zLjExIDIuODE2LTQuOTk0IDMuNDEyLTYuNzM3IDYuNDgzLTE1LjExNSA3LjE3NC0yNC4zNTUuNDM3LTUuODg2LTEuODU3LTExLjcxNC0xLjAzLTE4LjI4LjI0OC0xLjk4My45NTQtMy42ODIgMS4yMy02LjE0Ni0uMDM4LS4wMjUtLjQ5LS4yNDctLjQ5LS4yNDctMy4yMDMgMy4xODgtNC4yNTYgNi4yNi02LjM5IDEwLjU3LS42OTQgMS4zODMtMi4wNTIgMy4wOC0yLjQ2IDQuNjctLjU5IDIuMjc0LS41MzggMy44NTYtLjk4NCA2LjE0NS0xLjM5IDcuMDEzLTMuMTIgMTQuNzM1LTUuMTYgMjEuMTQtLjQ0NiAxLjM3Ny0uNzQ2IDIuNDItMS4yMyAzLjY4OC0uMTMuMDA4LS45MzguMzMtMS40NzYuNDkzIDAgMC0uMzA2LTEuMzE1LS4yNDYtMS43MjIuMjQ3LTEuODM3IDEuNTMtNC42MSAyLjIxNS02LjYzNiAxLjY2Ny01LjAyIDIuNTItMTAuMDcyIDMuNjg3LTE1Ljk4IDEuMDk4LTUuNTkyIDIuNzg3LTEyLjcwNSAxLjk2Ni0xOC4xOS0xLjM3NiAxLjI5OC0zLjMyNiAyLjM5Ny00LjQyNCAzLjkzMy0uNDA4LjU1My0xLjkzNiAyLjI3My0yLjIxMyAyLjcwNC0xLjExMyAxLjcwNS0uOTIyIDIuNTc2LTIuMDc0IDQuMjgtLjQ3LjY4LTIuMTY1IDIuNjYzLTIuMzUgMy41ODUtLjMxNSAxLjUyOC44MTUgMy44NTYuOTg0IDUuMTYyLjg2NyA2Ljg4NC45NSAxNC41NC4yNDUgMjAuODk0LS41ODMtLjE5LTEuMTk4LS4zNS0xLjcyLS40OS40MjItNS45OS44NC0xMi4wMDIuMTk0LTE3LjYyNi0uNDg1LTQuMTg3LTIuMzQzLTkuMzgtMy4wNi0xMi41MDQtMS4yMzMtNS4zNy0yLjU4LTkuMTk1LTMuMjU2LTExLjU2NS0xLjAyNS0zLjU4Ni0yLjA0Ny0xMS4yNjgtMi4wNDctMTEuMjY4cy0uODEyLTQuODM1LTEuMTc0LTYuMDM0bC0uMDIyLTMuNTI2TTIyMi44ODcgNTguOTNjLS4xOSAzLjA3NC0uODYzIDguMjE4LTEuNzU2IDExLjQyMi0uMTQ1LjUxMy0uNDg1IDIuNjM2LS42MzggMy4yMi0uNDY4IDEuNjktLjY3NSAyLjQxNi0xLjA0NyA0LjIyLS4yOSAxLjQwOC0uNzI2IDMuNDQtMS4wMiA0Ljg3Ny0xLjQ1MiA2LjkxOC0yLjM1IDEzLjE1OC0yLjQ1NyAyMC40MDItLjA5MyA1LjkxMy4yNiAxMS45OCAxLjU0NSAxNy43NDMgNC45MzItMi42NzUgOS4wMzgtNC4zNTQgMTMuNDQtNi43ODcuOTM4LS41MyAzLjM2Ni0xLjUwOCAzLjk0My0yLjM1My43NzMtMS4xNDQuOTg0LTMuMDc1IDEuMTc3LTQuNjkuNzY4LTYuNC4zMTQtMTMuMTkzLS45MzItMTguOTEtLjQxNy0xLjkyMi0xLjA1LTQuNTctMS41LTYuNDQtLjc5Ni0zLjMwMy0xLjg4My02LjMyMy0zLjE1Ni05LjIxOC0xLjQ5Mi0zLjM4LTQuNjEtOS41Ni02LjQwNC0xMi44OWwuNTQgMy43MmMuOTEyIDQuNTYgMS45ODMgMTAuMDI2IDIuNjA0IDE0Ljc1IDEuMjA3IDkuMTY0IDEuNzI0IDIwLjI1OC0uMDUgMjguNzYyLS40NzggMi4yNTYtLjM4MyAyLjg4LTEuMzczIDMuNDQuNTg1LTIuODU3LjUxMi01LjY5Mi44NS04LjYwNC4zMy0yLjkxLjQ2NS02LjU0LjI4NS05LjA0NC0uMzk0LTUuMi0uNzE1LTkuNTgtMS4yNzYtMTQuNTAzLS42MTMtNS4zMS0xLjczNy0xMC44ODItMi4yNi0xNS43OWwtLjUxMy0zLjMzIiBmaWxsPSIjZmRkZDA0Ii8+PHBhdGggZD0iTTU4Ljg4NyA3Mi4xYy0uNDk4LjQ2NC0xLjY2NCAxLjc4OC0zLjIxMiAzLjIyLTEuNjA1IDEuNDg0LTMuNTg0IDMuMDcyLTMuNTg0IDMuMDcyczEuMDI0IDQuNDM3IDEuNzA3IDcuMTdjLjY4NCAyLjczIDEuNTU1IDUuMjEgMi41NiA3Ljg1LjAyNS0uMDMgMS4zLTEuNDAzIDEuMy0xLjQwMyAxLjA5LTEuNjY3IDIuMTEtMi44NjUgMi40NTctNC43MTcuOTA2LTQuODkzLS4zODQtMTEuMjMzIDAtMTYuMDcybC0xLjIyNy44OE03Mi4xNDggMTYyLjg5NXMtMi42NTUuMDA4LTMuODYyLS4wMjRjLTIuMDMzLS4wNS0zLjAwOC0xLjAyMi04LjQ1LS40NDYuNzcuNTc2IDEuMjguODMyIDEuODU3IDEuMTUyLjgxNC43NTMgMS45ODcgMS4zNTYgMi44NDcgMi4xMjQgMi4wNDUgMS44MzYgMi40NjcgMi45OTcgNC41ODMgNS4wNC4yMjYuMjIuNjU0Ljk5NS44MzcgMS4yMi4zNTMtMS40MzcuNzYzLTIuODg1IDEuMDgtNC41NDMuMzQtMS43OTIuNjUyLTIuNDY2IDEuMTA4LTQuNTIyTTcyLjQwNCAxNjEuMzU3YzEuMzc0LTYuMTcyIDIuMzg1LTEyLjA1OCAzLjcwMi0xNy40NjYtLjI2LS4xMjMtMi4xMjItNC42NC00LjE5LTYuODk0LTEuNjYtMS44MS0zLjU1LTQuMzEtNS40MS01LjktMi43NTctMi4zNjgtNC40NzctNC40MDQtNy41ODctNi4yNzItMS4wNjgtLjYzNy0zLjMyOC0xLjUwMy00LjQ1Ny0yLjA4OC0xLjk5OC0xLjA0My0zLjQxNS0xLjY4LTUuMjc0LTIuODYzLS42NjItLjQyMi0yLjkxLTIuNjE4LTMuNTg3LTMuMDcyLTEuNjc0LTEuMTItNC43OC00LjYwNy01LjkzNC01LjM3LS4xNzQtLjExNS0xLjM5NC0xLjY4My0xLjU3Ny0xLjc5OCAxLjAxMyAyLjQ4NyAyLjc2IDYuODkgMy40MTMgOS41Ni43MjUgMi45NjUgMS40OTIgNS40MTYgMi4xODYgOC40NiAxLjE5NiA1LjI2NCAyLjk4IDExLjI1IDQuMTMgMTQuNDE1LjY4NSAxLjg3OCAyLjM1IDQuNDEgMy40NDUgNi4yMzcgNC4yMzggNy4wNzYgOS4xODggMTMuNTY1IDE5LjY2NSAxMy4wMjdsMS40NzIuMDI3TTIzMS40ODUgMTE1LjYzMmMtMy4yMjggMS4wNzUtNy4yMjYgMy41MjMtMTAuMDA2IDUuMDUzLTIuMjkgMS4yNDMtNC4zNDUgMi40NjYtNi4yNSA0LjAyLTEuODIyIDEuNDY2LTYuNjMgNS44OS03LjEzIDYuNjM2LS4yNzYuMzkzLTEuOTIgMS41NzItMS45MiAxLjU3Mi0uMzk1IDQuOTA4LTEuNTIgOS4xMTUtMi43NSAxMy40MjQtLjg2IDIuOTk2LTIuMTgyIDUuNDYtMy40NjIgOC40MDUgMy4zMjgtMi44OCA1LjQ4LTQuODQ1IDcuODQtNy4xNzMgMy4wNDQtMy4wMDMgNi41MTctNiA5LjEtOS40ODggMy4zLTQuNDg3IDUuNzA0LTkuNzcgOC44NDUtMTQuNDA0IDEuNTkyLTIuMzUgNS43NTQtNi42OTIgNy42MzItOC43NTMtLjA4NC0uMDYyLTEuODg2Ljc3Ny0xLjkuNzFNOTIuNDg0IDE0NC4wNTJjLTEuMTYzLTEuMTItMi4wMzItNC44Mi0zLjYwNy01LjA5LS42OTItLjEyMy0xLjkxMi42MjItMi40NTguNzM4LTEuMzMuMjYtMi41Ni4wNi0zLjE1Mi45OC0uNTI0LjgtLjQwNyAxLjkyMy0uNjM4IDIuOTUzLS43MTMgMy4xMTgtMS40ODIgNi4zMDYtMi4yMSA5LjgzMi0uNTU1IDIuNjEyLTEuMzc3IDUuNzAyLTEuOTY4IDguNTc1IDIuNzguNzA4IDYuMTM3LjIwNCA5LjQ0Mi4xNzUgMy4yOS0uMDMgNi40NjguNjM2IDkuMDk1LjUzNC0zLjkxLTcuOTA2LTIuMjQyLTkuMDU0LTEuMTE1LTE1LjgyMi0uNjg4LS41ODMtMi43NDgtMi4yNi0zLjM5LTIuODc2TTE3Ny4wNjMgMTU2Ljc5Yy0uMDk1LjU4My41IDguMTkzLjUgOC4xOTMuMjE0LS4xNi4zNC0xLjEuNjA1LTEuMTkyLjM1LS4xNCAxLjA3My0xLjYzNyAxLjMzLTEuOTY2IDEuNzItMi4yODQgMy44NjItNC42NCA1LjMwNS03LjEzIDIuNDUtNC4yNDIgNC45OTMtOS4wOCA3LjAzLTEzLjUyLjg2LTEuOTA1IDEuNTYzLTMuNDU3IDIuMzU2LTUuNDEuMS4wMzMuNjQ1LS4xNjguODgtLjI0My0uNDgzIDEuNjI4LS44MjMgMi43MjUtMS4zMyA0LjE4LTEuMDM2IDMtMi40MzcgNS4yNi0zLjU5NSA3Ljg2Ny0xLjM4MiAzLjA4LTIuODg4IDUuODM3LTQuNjE2IDguNjA0LTIuMTA1IDMuMzUtNS40NjIgNS44NTQtNi45MjcgOS44MzQgMi40NTYtLjM3IDQuNTEtLjgxNiA2Ljc3LTEuMTQ4IDIuMDItLjMgNC45MDgtLjA5NyA2LjUyOC0uODk2LjkxNy0uNDYgMi4yOTYtMy4xMjUgMi45NDctNC4wOTcgNS41MTMtOC4yMiA5LjQzOC0xOC44NTggOS41OTQtMzAuODQyLjAzNi0yLjc2NC4xMTctNS40MTItLjMzMi03Ljc4LS4yNy0xLjQyLS44NS0zLjg0LS44NS0zLjg0LS43NjUgMi4yNTctMi42NCAxNC41NDctNC4xMDcgMTUuNDE2LTEuNDM1LjgzNi00LjQ1NC41LTYuMjkuNzQtMS44MzYuMjMtNC4wMDMuNDktNi4xNDUuNDktMS43MTUgMy42OC00LjQ4IDYuMDg1LTYuMTQ3IDEwLjA3OC0uOTUzIDIuMjYtMS42NjcgNC41MzMtMi4yMSA3LjM3Ni0uMjcgMS43MDUtMS4xIDQuMTQtMS4yOTUgNS4yOU0xNDguNzU2IDE3OS4yNmMxMi43NC03LjYyIDIwLjYwNC0xMC4wOTIgMzIuNzk2LTEyLjAzIDQuNDEtLjcwNiA4LjI1LS43NTggMTIuNzgzLTEuNDc0IDUuMDE3LS44MDUgMTEuOTk0LTIuMzUgMTcuMjg0LTIuNjA4LS4zNC4zLTIuMTYgMi4wNTYtMi41MzYgMi4zNi0yLjg1IDIuMjctNS43ODggNC4wMjMtOC4zMDUgNi42MDQtMy44NjcgMy45NjQtNS4yMTcgNS43MDMtOC40MSA3LjgtMy41NSAyLjMyLTcuMjIzIDMuOTkyLTExLjU1NyA1LjYtNC4wNzggMS40OTctOC41NzIgMy4wMDctMTMuMDI2IDQuMDktMS42NjIuMzk4LTIuNzA2Ljc1LTQuNDI3IDEuMDctMS4yMi4yMjQtMi44NDguNTktNC40MjQuNDA0LTEuNTk2LS4xOTItNC4zOTMtMi4wMjctNS42NTUtMi45NS0xLjI2NS0uOTItNC44Ni0zLjgyNS01LjQwNS01LjE2Mi0uNDIzLTEuMDE1LjAxNy0xLjg0NS0uMzM1LTIuOTM2bDEuMjE2LS43NjgiIGZpbGw9IiNmZGRkMDQiLz48cGF0aCBkPSJNMTMxLjAzNSAxNzUuMTY0Yy0xLjA3NC43NjQtMS40NCAxLjM4NS0yLjEyNiAyLjI0LTEuMTk0LS40MjctMy43NTUtLjE3LTUuMjkzLjA4NS01LjU2IDEuNjg3LTUuNjY0IDIuMjY1LTEwLjE1OCA0Ljk4Mi0xLjU2Ljk0LTIuOTcgMi4wMi00LjUyMyAzLjEyNS0uMzIyLjIyMy0xLjIzMiAxLjE4NC0xLjYyMyAxLjMtMi40ODMuNy02LjU2OC0uMTg0LTguMzU4LS40OTItMTAuMjM0LTEuNzgyLTE2Ljc4NC01LjIzNi0yMy41LTEwLjM3LjExLS4wNzYuMTItLjYzOC4xOS0uOTQuNDM3LTEuODM2LjUyNi0yLjQ0LjY5NS0zLjE5NC42My0yLjkgMS4yMTItNS43NTMgMS44NjYtOC4zNTYgMy4xOTcuNDY4IDguMjA1LjAzIDEwLjkxOC4yNDcgNi40NzQuNTA3IDEyLjg0NCAxLjExNSAxOC4xOSAyLjk1IDIuMDUuNyA0LjA4NyAyLjI4OCA1LjkgMy4xOTUgMS41NzQuNzg1IDIuNzU3IDEuMDYyIDQuMTggMS45NjYgMS40MjcuOTA4IDMgMi4xMiA0LjQyMyAzLjE5Ni4xNi4xMjUuMzE0LjY3Ny40OTIuNzQuNDEzLjE0NC44MDUtLjE1NiAxLjIzIDAtMS41Ny0zLjM2NS00LjU2NS01LjU3Ny03LjYyMy03LjM3Ni0uNTMtLjMxNS0xLjcxMi0xLjM0NS0xLjk2Ni0xLjcyLS43OTgtMS4xNzYtMS41NDctMS44Ni0yLjQ3LTIuOTUtLjY0NC0uNzYtMS4zMDItMS42NzUtMS45MS0yLjQ2LTIuOTQyLTMuODEtNy4wNzUtNi44NDItOS4zNC0xMS4zMDYtLjU3LTEuMTEzLTEuMzItMi43OS0xLjcyOC0zLjg2LS4yNzUtLjcyLS42NDUtMS40OS0uNTc1LTEuNTM3IDEuMTQ0IDEuNjIgMy40NCAzLjQ5NiA0Ljk2MiA0Ljc3MiA0LjY1NCAzLjg5MiAxMC44NDYgNS42NTUgMTUuNzMgOS4zOTYgMi45MjggMi4yNCA0LjkgNC4zNSA3LjI1IDcuMjA4LjIuMjQ3IDIuMDA0IDIuMyAyLjE4NiAyLjUyNC45MjMgMS4xMjggMS43MjggMi42MzYgMi4zNjYgMy44NjcuMTEzLjIyMi4wNy44Mi4yNDUuOThsLjM2OCAxLjc5TTc1LjM1NyAxMjEuMjZjLTEuNjIgMy45NjctMy41MzUgNy4xOTItNS42NTQgMTAuNTczIDEuMzUgMS42NjYgMi41NDcgMy4xNSAzLjg2IDQuOTE2IDEuNTczIDIuMTE3IDIuODA3IDQuNzcgMi44NTMgNC42NzUuMTI1LS4zIDMuMjk0LTEzLjkxOCAzLjI3Ni0xNC4wMTgtLjI3LTEuNTY3LTMuMTM3LTUuMi00LjMzNS02LjE0Nk0xNzMuODUgMTQ2LjY3NmMtLjk3IDMuMTczLTIuMjk0IDkuNzI1LTMuNjAzIDEyLjY4OC0uMTEuMjQtLjU3NCAxLjAzLS42OTUgMS4yNzMtMS4wNzcgMS45ODMtMS45MDUgMy40ODQtMi45OTYgNS4zNjctLjcgMS4xOS0xLjEgMi4wMDMtMS42NzUgMy40NC4yMjMtLjA0NS4xODguMzM3LjY5NS4yNDcuOTI2LS4xNzcgOC41MTItMi40OTcgOC44NS0yLjk1IDIuMzYyLTMuMjQzLjI3NC0xMy41NS0uMjQ4LTE3LjQ1My0uMTYgMC0uMjEzLTIuNTEtLjMyNi0yLjYxTTE3MS45MyAxNTAuMDA1cy0zLjg0MyA0LjkwMi01Ljg2MyA1Ljk0N2MtMi43OTYgMS40NC01LjUzIDIuODgzLTguMTE0IDQuNjQzLS45Ni42NDUtMi43NzggMS43MTctMy41MyAyLjU5Mi0yLjY4OCAzLjEyNC01LjQ3MiA2LjkxMy00LjUzNiAxMi42NS4wNDIuMjYuMzM3LjQ5LjQ0NS43MzYgMy41MDMtMS42MTMgNi43ODMtMy45NCAxMC4zMjUtNS40MS45ODQtLjQxMiAxLjMzNC0uMTQ0IDIuMTIzLS43MzYuODMtLjYzIDEuMzg4LTIuMTg4IDEuODU1LTMuMTk2LjI4NS0uNjIyLjkxNy0xLjMzNSAxLjI4NC0xLjk2NiAxLjYwNS0yLjc4OCAyLjkyLTYuMDYgNC4wOC05LjA5My40Ni0xLjIzIDEuMjgtMi43OCAxLjQ3My0zLjkzMy4wNDYtLjI5My40NTYtMi4yMzIuNDU2LTIuMjMyTTEzMi45OTYgMTc1LjI0M2MtLjQ3OC4xMTQtMS41NjIgMS4wMTItMS45MDUgMS4zOTMtLjUxNS41NzUtMS43NzMgMS45NjMtMi4xMTYgMi44MTUtLjY1NyAxLjY0Ny0xLjY2IDMuNDgtLjk0IDYuMTMuMDg2LjMyIDEuMjk0IDMuNzYgNC40NTggNC43OTYgMS4yNS40MSAyLjIzMi41NjUgMy4zNC40NTUgMS4xMDMtLjExIDIuMDcyLS4xNTggMi45OC0uNzk0LjkwNy0uNjM1IDEuNjIzLTEuMzY0IDIuMTMzLTEuOTY0IDEuMzY4LTIuMzg4IDEuNTc1LTQuNDQ4IDIuNzUtNy4zMiAwIDAgLjYwMiAyLjAyLjU4IDIuNzMzLjE4MiAxLjIyMy0uODM0IDMuNDU4LS44MzQgMy40NThzMS43NTUtMS41MDcgMi4yMjMtMi4yNmMuNDY4LS43NS42NC0xLjM3NS45MTctMS45NjYuNDQ1LS45Ni0uMTMtMi40OTYtLjEzLTIuNDk2cy0uODk0LTEuODItMi4xNzUtMi43NTZjLTMuNTktMi42MzMtOC4zNi0yLjk0NS0xMS4yOC0yLjIyIiBmaWxsPSIjZmRkZDA0Ii8+PHBhdGggZD0iTTEyMy41NCAxNzguODg1Yy0xLjI4Ny4zOTgtMy4xNS45ODYtNC44NzMgMS45MzQtMi4zMiAxLjI1LTQuODMyIDMuMjA1LTYuOTMgNC43MDMtMy4xMDIgMi4xOTgtNS42MyAzLjUxOC04LjU2MiA2LjU0LTEuMzIgMS4zNi0zLjA5MiAzLjAxNi00LjYxIDQuMTc2LTIuNzUyIDIuMDk3LTYuMDggMi44NjQtOC4yNTggNC40MjMuMi4wNyAxLjQ4LjY0IDIuMjU4LjgzNyAxLjQ5LjM4IDMuNDk2IDEuNTEyIDUuMjMyIDEuMTkgMi4zMzctLjQ0NiA0LjM3NS0zLjkxIDYuMDItNS4yMjMgMS44MTgtMS40NjYgMy4zNS0yLjkzMiA1LjIxNy00LjM2OCAxLjExMy0uODcgMS44Mi0xLjUyIDIuOTEtMi4zOC41NDgtLjQ0IDEuMi0xLjEzMiAxLjc2Mi0xLjU1My45MjgtLjcxNiAyLjI0LTIuMDYzIDMuMTctMi44IDEuMzczLTEuMTEgNi41OS0yLjc4NiA5LjU4NC0yLjkwNC4xMDgtLjM5OC40NTMtMS42MjcuNjYtMi4zODguMi0uNzYzLjUxLTEuMzY3IDEuMTA4LTIuNTYtLjQxLS4xNDctMy45NDUuMTQtNC42OS4zN00xMjguOTEgMi45MzdzLTQuNzIuNTUtNC44OC42MjJjLTEuMzcuNTEyLTIuNTI4LjkyNS0zLjkzNCAxLjQxNi0xLjA5LjM3LTIuMzkuODkzLTMuNDQyIDEuMjg3LTE0LjEyNiA1LjItMjUuMDkgMTMuNTg4LTMzLjkyMiAyNC4wOS0xLjE5IDEuNDA0LTMuNDczIDMuMzYyLTQuMTggNS4xMDYtLjY1MyAxLjU4LS41NzYgMi43LS43MzcgMy45NDMgMi43MDQtLjUwNiA2LjY5OC0yLjU4OCA4Ljg1LTMuOTMyLjY2OC0uNDIzIDMuMjUzLTEuNzIgNC4zNDctMi4yMyAxLjkyLS44OTcgNC4xLTIuMTggNS4zNzgtMy4wNzMgNC41NDctMy4xODQgNS4wNTUtNC42NiA4Ljk1Ni03LjcyNiAyLjcxMy0yLjE0MyA0Ljg3LTUuMTkyIDcuNTItNy4zNzMgMy43NjYtMy4xMSA3LjAyOC01LjYxOCAxMC45MjMtOC41NDQuNTYtLjQzMiA1LjEyLTMuNTg2IDUuMTItMy41ODYiIGZpbGw9IiNmZGRkMDQiLz48cGF0aCBkPSJNMTM0LjcwOCAxODAuOTU1djEuODU2aC44MWMuNDA3IDAgLjU0My0uMzEuNTQzLS44OCAwLS43My0uMjQtLjk3NS0uNTUzLS45NzV6bTAgMi42MDJ2Mi4xNTJoLTEuMDcydi01LjUxaDEuOTVjLjkyMiAwIDEuNjgyLjM0OCAxLjY4MiAxLjcxNyAwIC42NjQtLjM4IDEuMTgtMS4xNTMgMS4yNiAxLjAwNC4xMjMuOTkyLjc1OCAxLjAxNiAxLjkyMyAwIC4yMTcuMDQyLjQ3My4wODMuNjFoLTEuMDQ0Yy0uMDQtLjE0Ny0uMDk1LS4zMjUtLjA5NS0uNjYzdi0uOTM1YzAtLjM4LS4yNTYtLjU1NS0uNTU2LS41NTV6bS42NzcgMy4zNDRjMi4xNjcgMCAzLjk0Mi0xLjggMy45NDItNC4wMiAwLTIuMTgtMS43NzUtNC4wMzctMy45NDItNC4wMzctMi4xODMgMC0zLjk4NCAxLjg1Ni0zLjk4NCA0LjAzNiAwIDIuMjIgMS43OSA0LjAyIDMuOTg1IDQuMDJ6bTQuNzY3LTQuMDJjLS4wMTIgMi42MjctMi4xNTMgNC44MS00Ljc2NyA0LjgxLTIuNjQzIDAtNC43ODMtMi4xODMtNC43OTUtNC44MS0uMDE1LTIuNjQzIDIuMTQtNC44MSA0Ljc5NS00LjgxIDIuNjI3IDAgNC43NjcgMi4xNjcgNC43NjcgNC44MU0xMjYuNzMzIDI2LjYyYy42ODUtLjE1My0xLjAyMiAxLjM4NC0xLjIzIDEuNDc1LTEuNTczLjYzMi0yLjg4Ny44ODQtNC42NyAxLjI3NC0yLjQwNC41MjItNS4xMjMgMS41MTQtNy4zNzQgMi4xNjYtNi4yNjIgMS43OS0xMS45MzIgMy4yNjUtMTcuNyA1LjQ1My0yLjg5IDEuMDktNS42MyAyLjUwNi04LjYwNCAzLjY0Mi4xNDYtLjEyMy4wNC0uODMuMjQ1LS45ODMgMS4xMTYtLjg3IDQuMDktMS43ODIgNS42NTYtMi4zNTggNC4yLTEuNTYgOS4xMDMtMy41NSAxMy41Mi01LjAyIDIuOTAzLS45NzMgNS4zMjQtMS4wOTYgOC4zNTgtMS45NjQgMi45OTYtLjg2OCA2Ljg1Mi0xLjU4IDEwLjA4LTIuNzA0LjUtLjE4NCAxLjAyLS44NCAxLjcyLS45ODNNNjMuNTYgMzguNjY1Yy4zNDYtLjczOCA4LjQ4Ni0xMi43NDQgMTMuMDI2LTE2Ljk2LjYxNS0uNTc3Ljk0NS0xLjU2IDEuNzItMS45NjYgMS4yLS42NDgtMS42MjcgMi41ODUtMS43MiAyLjctMy42MDMgMy45ODgtNi43MTcgOC4yNTItOS44NDMgMTIuNzg1LS4yMDguMjktMi4xNyAzLjE3OC0yLjIyIDMuMjYzLS40NDguNzctMS42MjIgMy4yNjctMS42IDMuMzMtLjExNi4xLTIuNTcgMy43My0yLjU3IDMuNzMtLjE2My4wNC0uODgyIDEuNTkyLTEuNTI4IDMuMTk2LS43NDUgMS44My0xLjc3IDMuMjU2LTIuNjUzIDUuNjU1LS44OCAyLjM5Ni0yLjI0NyA5LjU0Ny0yLjY5MyAxNS4yNC0uMDQgMC0uNzMtLjA0LS43NCAwIDAtMi43Mi40LTUuMDQ4Ljc0LTcuMTMuNzA1LTQuNDEgMS40NDQtNy41NjYgMi45NDgtMTEuMDYyIDEuNzQtNC4wNiA0LjA5Mi03LjIyMyA2LjAwMi0xMC41Ni42ODUtMS4xODMuODAyLTEuNTMzIDEuMTMtMi4yMjNNNDYuNSAxMDIuNDczYy0uNDM1LTEuMzI0LS45OC01LjIzMy0xLjEzNC02LjA0LS43My0zLjY3LTEuNDItOC4yNTctMS4yMjgtMTIuNTM2LjAyLS42NDUtLjEtLjkxNiAwLTEuNDc2LjItMi41OTMuMzg0LTUgLjQ5LTcuNjE3aC0uNDljLS4xNiAzLjg3LTEuMTkgOC45OTQtLjk4NCAxMi41MzYuMjE1IDMuODYzIDEuMjgyIDcuNzk2IDEuOTY2IDExLjA2LjIxIDEuMDA3LjYzOCAzLjUwNy44MzggNC4zNi40NDggMS45Mi42NCA0LjEgMS4yOCA1LjYzNS42NCAxLjUzNyAxLjUzNyA0LjI5IDEuNzk0IDUuMTg0LjI1Ni44OTYuMzI0IDEuNzEuNTE0IDEuNzgzLjE5LjA3My41NzMtLjM3NS43LS42OTUuMTMtLjMyLS44My0yLjQ5Ni0xLjQ3LTQuNjEtLjY0LTIuMTEtMi4wNTctNi45MTUtMi4yNzctNy41ODVNNzQuMzczIDg4LjMyYzAgMTAuNjI3LTIuMTQyIDE4Ljk5Mi00LjE4IDI4LjAyNS0uNTUyIDIuNDItMS4zNzMgNC45NDgtMi4yMTIgNy4xMjgtLjE5Ny0uMDA2LS45NSAxLjE2Mi0uNzM1LS4yNDQuMS0uNjcuNDc2LTEuNjcuNzM2LTIuNzA1IDEuMjkzLTUuMjQ4IDMuMjEzLTEwLjk2NCA0LjE4LTE2LjQ3LjcyMy00LjE0OC43LTExLjU3NiAyLjIxMy0xNS43MzRNMjEyLjc3MyA5Ni40MzNjLjM3NC0uMTIuMjg4IDEuMTYzLjI0NCAxLjQ3NS0xLjM2NSA5LjU4NC0uNjQ2IDE4LjExNi0xLjIzIDI1LjU2NWwtLjczNS0uMjQ0YzAtOC41NzQtLjM4Ny0xNi42OTQgMS4yMjctMjUuMDc0LjE2LS44NTMtLjI3LTEuNDg0LjQ5My0xLjcyM002MC4wMiAxNDUuOTNjMi41MDUgMy4xOTUgNi40OCA2LjIwNiA5LjkyOCA4LjAyNy4zNy4xOTQuNzMuNjMgMS4yMy43MzggMS40NDQuMy0xLjQ3NS0xLjcyLTEuNDc1LTEuNzItMS4zMTMtLjc5LTIuMzQzLTEuMzM2LTMuNDQtMi4yMTItMS4yMTYtLjk3LTQuNjg4LTQuNDYtNS4zMDQtNS40My0xLjAyNS0xLjYyMi00LjItNS4xMi01LjY1LTcuMzQtMS40NTItMi4yMi02Ljg5NS0xMC45MDItNi4yNTYtOS44NDguMzY2LjYwNC0zLjUzNC01LjI0OC00LjE4LTUuNjU0LS4yMzctLjE1LS40NjguMjQ2IDAgLjI0NiAxLjM5MiAyLjY3NSAyLjY2NyA0LjE2NCAzLjkzMyA2LjY0LjcxNCAxLjE5IDIuNDkgNC4xMSAzLjc3IDYuMTU3IDEuMjggMi4wNSAxLjY2OCAzLjUyMyAyLjk1NCA0Ljk2OC42ODQuNzcgMy42MzcgNC43NDggNC40OSA1LjQzTTIwMi45NCAxNjYuMDA0YzIuNzU2LS40ODUtMi4yMTYgMS43Mi0yLjIxNiAxLjcyLTMuMDI4IDIuMzc2LTYuMSAzLjgzLTkuMyA1LjcwNy0xLjE5My42OS0yLjQ4IDEuNTQtMy43MjggMi4xMTctOS4xNDggNC4yMTYtMTkuNDEgNy43MTctMzAuNDggOS44NzRsLjI0Ny0uNzM2YzIuNDY1LS41IDMuNzktMS4wMTIgOC4wOTgtMi4yMDcgMy40MjQtLjk0OCA1LjQxNS0xLjQwMiA1LjY2OC0xLjQ3OCA0LjUtMS40MyA1LjE5Mi0xLjgwOCA5LjgyNS0zLjYgMS44ODctLjczNSA1LjU2Mi0yLjI1NiA2Ljg5LTMuMDQgMy4yOTctMS45NTcgNi4yODItMy41MDMgOS41ODYtNS40MSAxLjUwNi0uODc0IDMuNTI2LTIuNjI1IDUuNDEtMi45NDZNODEuNTAzIDE3My44NjhjMy4yMzYgMS4xMDMgNy43OCAyLjQ0OCAxMS40OTQgMy4xNTIgNy45NDggMS41MDcgMTYuNzIyIDEuNTIgMjUuMTMzIDEuNTJ2LjQ5M2MtMTEuODg1LjkyNy0yNC40Ny0uMzkzLTMzLjQzMi0zLjQ0NC0xLjEzOC0uMzk0LTIuMTU3LS44MjItMy40NC0xLjIzLjA3NS0uMjg1LS4xOTgtLjY0LjI0NS0uNDkyIiBmaWxsPSIjMjMxZjIwIi8+PHBhdGggZD0iTTIxOS4yNjggNTAuOTA3Yy0xMC4yNDQgMi44MTYtMzMgNC42MS01My4zMDQgMi44NS0yMS43My0xLjg4NC00NC4yMTctLjgyNi02MC43MiA1LjA5LTEuMzguNDkyLTIuODcuNzI2LTQuMzIyIDEuMTU2LS4xNTQgNC45MDIuMDk4IDguODA2LS4yMyAxMi4yNDItLjM0MyAzLjU4Ni0uMTQ2IDYuNDg4LTEuMzQgMTUuODc2LTEuMTk2IDkuMzktMi44OSAxNS44NjUtMy45MzggMTkuNjItLjY3MiAyLjQwNC0uOTI1IDMuMzY1LTEuMzEyIDQuOTQtLjUzIDIuMTYtMi42NTQgOS45MjQtNC43MDMgMTUuNTYtMi4wNSA1LjYzMy0zLjg5MyAxMC4wOS0zLjg5MyAxMC4wOXMxNS41MS00LjA5NCAyNS4yMjItNS43MzhjOC4zMi0xLjQxIDE3LjUxNy0yLjIgMjYuODg1LTIuMDUgNS4yMi4wODUgMTEuMzg0LjgyIDE2LjU1OCAxLjU1IDEzLjgyOCAxLjk1IDI3LjQ2Mi42MzYgMzMuNjA2LjI5NSA2LjE0NS0uMzQyIDguNzA1LS44NTQgOS41Ni0uODU0Ljg1MyAwIDEtLjY4NCAxLjM0LTEuMzY2LjE0Ny0uMjk0IDEuMjEtNS43NzQgMi43NS0xMi42NCAyLjAyMy05LjA0MiA0Ljc2LTIwLjQ4NCA2LjIzOC0yNS42NSAzLjQ0LTEyLjAzNCA0LjkyMy0xNi42IDcuNjY1LTI1LjA5NCAyLjg3LTguOSAyLjI5OC02LjY4OCAzLjA1Ni0xMC4zNy42NTctMy4yMDIuODc4LTUuNTA2Ljg3OC01LjUwNiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xMDAuODQgNjguMjk1czEzLjc4NC0zLjY2IDMzLjAyLTYuMDIzYzEyLjcyLTEuNTYzIDI2LjMwNC40NiAzMi45NDguOTI1IDYuNjQ1LjQ2OCAxNy4wNzIgMS4wMjQgMjAuODI3Ljg1NSAzLjc1NC0uMTcyIDkuMDA1LS4yMzUgMTEuNTY0LS40MDUgMi41NjMtLjE3IDcuMDgtLjg5IDguOTItMS4zMDMgMS45LS40MjUgNS4zNTYtMS4zNDQgNi4zOC0xLjUxMyAxLjAyNC0uMTcgMi43MTIuMyAyLjcxMi4zbC00LjE5NSAxMy4xMXMtLjg1OC0uNDQ4LTEuOTk3LjA1M2MtMS44MzUuODEtNS40MTcgMS45NjQtMTAuNzUyIDIuMTQzLTE3LjA4My41NzYtMjcuODI3LjMzMy0zOS4xMi0uOTk2LTguMzA3LS45OC0xNi44NzMtMS4yOS0yNy43OTctLjA5NS0xMC45MjggMS4xOTQtMTYuMzQyIDIuNjI4LTIyLjg3NyAzLjk3Ni02LjkxMyAxLjQyNy0xMC41MTcgMy4wNTMtMTAuNTE3IDMuMDUzbC44ODUtMTQuMDc4TTk4LjU2NSA5Mi45OTJzMTguODIyLTUuODM1IDMwLjg1OC03LjExNmMxMi4wMzQtMS4yOCAyNy42NTYuNjI1IDQwLjk3MiAxLjEzNiAxMy4zMTMuNTEzIDE4LjE4LjUxMyAyNS42MDQtLjI1NiA3LjQyNC0uNzY4IDEzLjg2LTIuMzA0IDEzLjg2LTIuMzA0bC0zLjg3NSAxMy44MjdzLTIuMzA1LjE5LTUuODg4Ljc2N2MtMy44NjguNjIyLTEzLjA2IDIuNTYtMjkuNzAyIDEuMjgtMTYuNjQ3LTEuMjgtMjguOTM4LTIuMzA0LTQxLjQ4Ni0xLjAyMy0xNS42NDIgMS41OTYtMjEgNC4wOTYtMjYuMTIgNS42MzItNS4xMiAxLjUzNy03LjM3NiAyLjczNS03LjM3NiAyLjczNWwzLjE1LTE0LjY3OE05My4wMSAxMTYuNTkybC00LjkgMTQuODlzMS42NDUtLjY2IDQuMDk2LTEuNTM3YzIuNDU1LS44NzQgMTkuNTMtNS44OTYgMzYuMTktNy40ODUgMTEuMjctMS4wNzUgMjEuNjguMTIgMzQuOTk1IDEuNjU2IDEzLjMyIDEuNTM2IDE4LjQ0Ljg4IDI1LjYxLjUzNyA3LjE2OC0uMzQgMTEuMTkzLTEuMzY2IDExLjE5My0xLjM2NmwzLjEzOC0xMy44MjRzLTguMzU1LjM0LTIwLjk5IDIuMjE3Yy0yLjU4LjM4NC0xNi44NTItLjktMjQuOTItMS43MzItOC4wNy0uODMyLTE5LjYzMy0xLjk1NS0yOS44NzgtLjc2LTEwLjYyIDEuMjQtMTQuNTEgMi4xNzYtMTkuOCAzLjM3LTUuMjkzIDEuMTk3LTE0LjczIDQuMDM0LTE0LjczIDQuMDM0IiBmaWxsPSIjMDA3ZjRiIi8+PHBhdGggZD0iTTExNC44MiA2MC4zOGw0LjIxMi0uMzUyIDEuNzkzLS4xNS0uMjA3IDEuNzY2LS44NiA3LjM2My0xLjU4NC0xLjYyIDUuNjUtLjQ3LTEuMzEgMS4yNTguODU3LTcuMzYyLjEzNy0xLjE2IDEuMTc3LS4xIDQuMjEyLS4zNTMgMS43OTMtLjE1LS4yMDcgMS43Ny0yLjIzIDE5LjE4My0uMTM4IDEuMTYtMS4xOC4wOTgtNC4yMS4zNTUtMS43OS4xNS4yMDUtMS43NjYuOTU4LTguMjc2IDEuNTg3IDEuNjE2LTUuNjU0LjQ3MiAxLjMxNS0xLjI2LS45NiA4LjI3Ni0uMTMzIDEuMTYtMS4xOC4xLTQuMjEyLjM1My0xLjc5Mi4xNS4yMDYtMS43NjYgMi4yMzItMTkuMTg0LjEzNS0xLjE2IDEuMTgtLjEiIGZpbGw9IiMyMzFmMjAiLz48cGF0aCBkPSJNMTE0Ljk1NiA2MS44Mmw0LjIxMy0uMzU1LS44NiA3LjM2MyA1LjY1My0uNDczLjg1OC03LjM2MyA0LjIxNC0uMzUyLTIuMjMyIDE5LjE4NC00LjIxMy4zNTIuOTU4LTguMjc2LTUuNjUzLjQ3NS0uOTYgOC4yNzQtNC4yMS4zNTQgMi4yMy0xOS4xODUiIGZpbGw9IiNmZGRkMDQiLz48cGF0aCBkPSJNMTQ4LjAzNiA4MS41MTVoNmwtLjI2IDEuNzUzLTIuODE3IDE5LjAxNS0uMTc1IDEuMTVoLTcuMTczbC4yNi0xLjc1IDIuODE3LTE5LjAxNi4xNy0xLjE1MmgxLjE3NiIgZmlsbD0iIzIzMWYyMCIvPjxwYXRoIGQ9Ik0xNDguMTMgODIuOTY3aDQuMjA1bC0yLjgxNiAxOS4wMTZoLTQuMjA4bDIuODE3LTE5LjAxNiIgZmlsbD0iI2ZkZGQwNCIvPjxwYXRoIGQ9Ik0xNzUuMTQ3IDEwNi41NjdoMTUuMzM3bC0uMzMyIDEuNzY0LS42NjQgMy41MTctLjIxMyAxLjE0SDE3OC43ODVsMS4zODMtMS4xNS0uODA1IDQuODI4LTEuNDc2LTEuNzUySDE4NC43NTdsLS4zMTcgMS43NTQtLjU5MyAzLjI1LS4yMDcgMS4xNWgtNi4yMjZsMS4zODMtMS4xNS0xLjQxNiA3LjQyLS4yMDcgMS4xNUgxNzAuMDI2bC4zMTQtMS43NTIgMy40MjQtMTkuMDE2LjIxLTEuMTUzaDEuMTczIiBmaWxsPSIjMjMxZjIwIi8+PHBhdGggZD0iTTE3NS4xOTMgMTA4LjAyaDEzLjUzbC0uNjYyIDMuNTEzaC05LjMybC0uODA1IDQuODNoNS4wNzNsLS41OSAzLjI1aC01LjA1bC0xLjQxNiA3LjQyMmgtNC4xOGwzLjQyLTE5LjAxNiIgZmlsbD0iI2ZkZGQwNCIvPjxwYXRoIGQ9Ik03OS43NDUgMTUyLjgycy4zNCAxLjk2NC40MjcgNC4yNjhjLjEgMi43MTYtLjU5NyA1LjM4LS41OTcgNS4zOGwxLjE5NC4yNTNzLjU5Ny0zLjQ1NS41OTctNi40YzAtMi45NDQtLjkzOC02Ljc0LS45MzgtNi43NGwtLjY4NSAzLjI0TTI2Ljk1NSAyNzguODQ3aC04LjEwN3YtMTQuMzRIOC4xMDh2MTQuMzRIMFYyNDQuMDloOC4xMDd2MTMuNTc4aDEwLjc0VjI0NC4wOWg4LjEwOHYzNC43NTdNNDguMzg2IDI2NS4zMmwtMy43LTEyLjIxMi0zLjY5NyAxMi4yMXptMTIuNzY4IDEzLjUyN0g1Mi4zOWwtMi4xMy03LjE0NEgzOS4wMTRsLTIuMTggNy4xNDRIMjkuNjlsMTEuMTQ2LTM0Ljc1N2g5LjQyNWwxMC44OTQgMzQuNzU3TTg1Ljk4IDI3OC44NDdIODAuNDFsLTguNDYtMjguMzIzaC0uMTAzdjI4LjMyM2gtNi44NFYyNDQuMDloMTIuNzE4bDYuMDggMjAuODI0IDYuMzg0LTIwLjgyNGgxMi43MTd2MzQuNzU3aC04LjEwN3YtMjguMzIzaC0uMjAzbC04LjYxMyAyOC4zMjNNMTI5LjU1NSAyNzguODQ3aC01LjU3NGwtOC40Ni0yOC4zMjNoLS4xMDJ2MjguMzIzaC02Ljg0VjI0NC4wOWgxMi43MThsNi4wOCAyMC44MjQgNi4zODUtMjAuODI0aDEyLjcxN3YzNC43NTdoLTguMTA2di0yOC4zMjNoLS4yMDJsLTguNjEzIDI4LjMyM00xNjguOTcyIDI2NS4zMmwtMy42OTctMTIuMjEyLTMuNyAxMi4yMXptMTIuNzY4IDEzLjUyN2gtOC43NjVsLTIuMTI4LTcuMTQ0SDE1OS42bC0yLjE4IDcuMTQ0aC03LjE0M2wxMS4xNDYtMzQuNzU3aDkuNDI0bDEwLjg5MyAzNC43NTdNMTkzLjggMjU5LjEzN2g0LjQ1N2MxLjY3NCAwIDMuNDk2LjE1MyA0Ljk2Ny0uNzEgMS4zMTctLjgxIDIuMDI1LTIuNDMgMi4wMjUtMy45NSAwLTEuMzctLjgxLTIuODM4LTEuOTc1LTMuNTQ4LTEuMzctLjg2Mi0zLjctLjY2LTUuMjItLjY2SDE5My44em0wIDE5LjcxaC04LjEwN1YyNDQuMDloMTQuNjQyYzMuMDkyIDAgNi4yMzIuMDUgOC45MTcgMS43NzMgMi44MzcgMS44NzQgNC40MSA1LjI3IDQuNDEgOC42NjQgMCAzLjk1Mi0yLjI4IDcuNi02LjAzIDguOTY4bDYuNDMzIDE1LjM1MmgtOS4wMTdsLTUuMzItMTMuNzNoLTUuOTN2MTMuNzNNMjI3LjI0IDI3Mi40MTJoNS42MjNjMS40NyAwIDMuMzQ1LjEwMiA0LjYxLS43NiAxLjE2Ni0uNzYgMS44MjQtMi4xNzcgMS44MjQtMy41OTcgMC0xLjMxOC0uODEtMi42ODYtMS45NzQtMy4zNDUtMS4xNjYtLjY1OC0yLjc4Ny0uNjU4LTQuMTA0LS42NThoLTUuOTh6bTAtMTQuNTRoNS41MjNjMS40MTcgMCAzLjA5LjEgNC4zMDUtLjgxLjk2NC0uNzEgMS40Ny0xLjk3OCAxLjQ3LTMuMTQzIDAtMS4yNjgtLjYwNy0yLjQ4NC0xLjcyMi0zLjE0My0xLjE2NS0uNjU4LTMuMjk1LS41MDYtNC42Ni0uNTA2aC00LjkxN3ptNy40NDctMTMuNzgyYzIuNzM3IDAgNS41NzQgMCA3Ljk1NCAxLjUyIDIuNzkgMS43NzMgNC4yNTcgNC4zMDYgNC4yNTcgNy42IDAgMy45NS0yLjYzMyA2LjU4Ni02LjI4MiA3LjQ5OHYuMTAyYzQuMzA4Ljg2MiA3LjI0NSA0LjE1NCA3LjI0NSA4LjY2NSAwIDMuMDQtMS44MjMgNS43MjUtNC4yNTUgNy40OTgtMi41MzQgMS44NzQtNS45MyAxLjg3NC04LjkxOCAxLjg3NGgtMTUuNTU1VjI0NC4wOWgxNS41NTVNMjY1LjU0MyAyNjQuMjA0djE0LjY0M2gtOC4xMDd2LTE0LjY0M0wyNDYuNDQgMjQ0LjA5aDkuNDI0bDYuNjkgMTMuMjI0IDYuNTg1LTEzLjIyNGg3LjI5NmwtMTAuODkzIDIwLjExNE00Mi4xNTQgMzMxLjc2di0zNC43NTZoMjEuMjh2My43NUg0Ni41MXYxMS4wNDNoMTQuMDM2djMuNDk2SDQ2LjUxdjE2LjQ2OGgtNC4zNTZNODguNTY1IDMxNC4yM2MwLTMuMDktLjUwNy02LjY4Ny0yLjA3OC05LjQ3NC0xLjU3LTIuNzM3LTQuMjU2LTQuNjYtNy40OTgtNC42Ni03Ljc1NCAwLTkuODgyIDguMzU3LTkuODgyIDE0LjU5IDAgNS45OCAyLjQzMyAxNC4wMzUgOS43OCAxNC4wMzUgNy40NDcgMCA5LjY3Ny04LjUxIDkuNjc3LTE0LjQ5em0tMjQuMDE3LjQwNWMwLTguNjY0IDQuMjU3LTE4LjE0IDE0LjI4OC0xOC4xNCA5Ljc4IDAgMTQuMjkgOC45MiAxNC4yOSAxNy40ODIgMCA4LjUxLTQuMzYgMTguMjktMTQuMjQgMTguMjktOS45OCAwLTE0LjMzOC04LjkxOC0xNC4zMzgtMTcuNjMyTTEwNS4xODMgMzMxLjc2di0zMC45NTdoLTkuODh2LTMuOGgyNC4xMTd2My44aC05Ljg4djMwLjk1OGgtNC4zNTdNMTM3LjA1MyAzMjguMDZjMS45MjQgMCA0LjA1NC0uMiA1LjU3Mi0xLjQxNiAxLjQ3LTEuMTE1IDIuMTgtMi43ODggMi4xOC00LjY2IDAtMi4wOC0uOTEzLTQuMTU3LTIuNTMzLTUuNDIzLTEuNjcyLTEuMzE3LTMuODUyLTEuMzE3LTUuODI3LTEuMzE3aC03LjkwNHYxMi44MTh6TTEzNS4yOCAzMTEuOWMyLjE4IDAgNC41Ni4wNSA2LjMzMi0xLjMxNyAxLjQyLTEuMDEyIDIuMTgtMi44ODcgMi4xOC00LjU2IDAtMi4wNzYtLjgxLTMuNTQ1LTIuNTg0LTQuNjEtMS41Mi0uODYtMy4wOTItLjg2LTQuODE1LS44NmgtNy44NTJWMzExLjl6bS0xMS4wOTcgMTkuODYzdi0zNC43NTZoMTMuMTIyYzIuNjg3IDAgNC44MTUuMSA3LjE0NCAxLjYyIDIuMzMgMS41NzIgMy42NSA0LjAwMyAzLjY1IDYuODQgMCAzLjk1My0yLjMzMiA2Ljg5LTYuMTMzIDcuODAzdi4xYzQuMzA4LjkxNCA3LjE5NiA0LjM2IDcuMTk2IDguODE3IDAgMi45MzgtMS4wMTQgNS41MjMtMy4zNDQgNy4zNDgtMi42MzcgMi4wNzYtNS4zNzMgMi4yMy04LjU2NCAyLjIzaC0xMy4wNzNNMTc3LjczNyAzMTQuMjNjMC0zLjA5LS41MDYtNi42ODctMi4wNzctOS40NzQtMS41Ny0yLjczNy00LjI1Ni00LjY2LTcuNDk3LTQuNjYtNy43NTQgMC05Ljg4MiA4LjM1Ny05Ljg4MiAxNC41OSAwIDUuOTggMi40MzUgMTQuMDM1IDkuNzggMTQuMDM1IDcuNDQ4IDAgOS42NzctOC41MSA5LjY3Ny0xNC40OXptLTI0LjAxNC40MDVjMC04LjY2NCA0LjI1NC0xOC4xNCAxNC4yODYtMTguMTQgOS43NzggMCAxNC4yODcgOC45MiAxNC4yODcgMTcuNDgyIDAgOC41MS00LjM1NiAxOC4yOS0xNC4yMzcgMTguMjktOS45OCAwLTE0LjMzNy04LjkxOC0xNC4zMzctMTcuNjMyTTIwOS43MDggMzMxLjc2aC0yMC41MnYtMzQuNzU2aDQuMzU3djMwLjkwNWgxNi4xNjN2My44NU0yMzUuMDQgMzMxLjc2aC0yMC41MnYtMzQuNzU2aDQuMzZ2MzAuOTA1aDE2LjE2djMuODUiIGZpbGw9IiMyMzFmMjAiLz48L3N2Zz4=");
+}
+
+.dif {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NTkuNDEzIiBoZWlnaHQ9Ijc0OC4zNDciIHZpZXdCb3g9IjAgMCA2NTkuNDEzMzMgNzQ4LjM0NjY4Ij48cGF0aCBkPSJNNTI3LjM1NyAxNjIuNjM3bC0xLjg3LTcuOTkzLTguMDIgMS43MTdjLTk5LjE4MiAyMS4xOC0xODIuNzQ0LTI4LjUwNy0xODMuNTc0LTI5bC00LjM1Ny0yLjYzNS00LjMzMyAyLjY0NmMtLjgyOC40OTctODQuMjYgNTAuNDEtMTgzLjQ4OCAyOS40ODJsLTguMDI2LTEuNjk1LTEuODQ4IDcuOTk4Yy0uMzUgMS41MzQtOC42NjggMzguNC02Ljc3NyA5OS4zMzMgNS45MiAxOTEuMDg0IDEyOS4wMDcgMzE1LjI3IDIwMC44MDMgMzU4LjUzbDQuMzMgMi42MDQgNC4zMjItMi42MTZjNzEuNjgzLTQzLjQzOCAxOTQuNDU2LTE2Ny45NDUgMTk5Ljg3NS0zNTkuMDU0IDEuNzMtNjAuOTM2LTYuNjgzLTk3Ljc4LTcuMDM4LTk5LjMxNSIgZmlsbD0iI2NhYjM1YiIvPjxwYXRoIGQ9Ik00MDcgMTcyLjA4M2MtMzguNzQ0LTguMjM2LTY2Ljk0OC0yMi4yMjYtNzcuNDMtMjcuOTQ4LTE4LjU1OCAxMC4yLTkyLjgzIDQ2LjU1My0xODIuOTA2IDMwLjctMi4yNjggMTMuNjk3LTYuMjEgNDQuNDctNC44ODggODcuMTM2IDEuNTQgNDkuNjc4IDExLjMxMiA5NC42MTUgMjYuMDc1IDEzNC42MDdMNDA3IDE3Mi4wODMiIGZpbGw9IiNmN2VlMGMiLz48cGF0aCBkPSJNMzMwLjE3MiA2MDQuMDIzYzY4LjQ0LTQzLjQyOCAxNzkuNTUyLTE1OS41NjQgMTg3LjItMzM1Ljk3MkwyNDIuOTMgNTI1LjY3OGMyOS45ODcgMzUuODMgNjEuNjEyIDYyLjE3NSA4Ny4yNCA3OC4zNDYiIGZpbGw9IiMyZTY0YjYiLz48cGF0aCBkPSJNMjY4Ljc5MiA0MDEuNGM5LjczIDEwLjM0NCA2Ljc0IDIxLjY0My0uMDggMjguMDU1bC0xLjE1MiAxLjA4NC0yNy45My0yOS43IDEuMjc0LTEuMmM3LjMzMy02Ljg5NSAxOC45NTUtNy43NCAyNy44ODggMS43NnptMjQ5LjAzLTE0OS42NDhMMjM1LjYwNiA1MTYuNjhjLTIzLjktMzAuMTE3LTQ2LjI5NC02Ni4zOC02My4yNDctMTA4LjQ1Nkw0MjEuMTIgMTc0LjcxYzI2Ljk4NyA0LjM4NyA1OC4xMjcgNS42MDUgOTEuNDQ0LS4zNTQgMi4xMjQgMTIuNjEyIDUuNjUzIDM5Ljg0NSA1LjI1NyA3Ny4zOTZ6bS0yMzIuMTkgMTMzLjgxYy0xNS43MzUtMTYuNzM0LTQwLjUwOC0xNy45NzctNTcuMDgtMi4zOWwtMTkuODcgMTguNjg0IDU1Ljk3IDU5LjUxNiAxOS44NjgtMTguNjg0YzE2LjQ5Ny0xNS41MTUgMTYuODUzLTQwLjM5IDEuMTEzLTU3LjEyN3ptNDguMzk3LTMuNTE4Yy00LjcwNi01LjAxNS0xMi41ODUtNS4yNjQtMTcuNi0uNTYtNS4wMTMgNC43MDctNS4yNjMgMTIuNTg1LS41NTggMTcuNiA0LjcwNSA1LjAxNSAxMi41ODQgNS4yNjQgMTcuNi41NiA1LjAxMy00LjcwNyA1LjI2NC0xMi41ODUuNTU3LTE3LjZ6bTQyLjMzNS0yNS43M2wtNTUuODktNTkuNTU4LTE3LjEzNSAxNi4wOCA1NS44OSA1OS41NnptMjkuNTEtNDEuNjljLTQuNzA2LTUuMDE1LTEyLjU4NC01LjI2NC0xNy42LS41Ni01LjAxNCA0LjcwNy01LjI2MyAxMi41ODUtLjU1OCAxNy42IDQuNzA2IDUuMDEzIDEyLjU4NCA1LjI2NCAxNy42LjU2IDUuMDE0LTQuNzA3IDUuMjY0LTEyLjU4NS41NTgtMTcuNnptMjQuMTkzLTQ1LjA5NmwxOC4xODctMTcuMDc3LTE0LjMzLTE1LjIzNS0xOC4xODYgMTcuMDc3LTkuMTktOS43MzcgMTguNDctMTcuMzYzLTE0LjM2NC0xNS4yNzMtMzUuNDc2IDMzLjM1NSA1NS45NyA1OS41MTYgMTcuMDA3LTE1Ljk5NHptNTIuNDg4LTI2Ljg2M2MtNC43MDUtNS4wMTMtMTIuNTg0LTUuMjY0LTE3LjYtLjU1OC01LjAxMyA0LjcwNS01LjI2MyAxMi41ODUtLjU1NyAxNy41OTggNC43MDQgNS4wMTUgMTIuNTgzIDUuMjY2IDE3LjU5Ny41NiA1LjAxNS00LjcwNSA1LjI2NC0xMi41ODUuNTYtMTcuNiIgZmlsbD0iI2UzMWUyNyIvPjwvc3ZnPg==");
+}
+
+.maif {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMzQuMjUzIiBoZWlnaHQ9IjE4OC40IiB2aWV3Qm94PSIwIDAgMjM0LjI1MzMzIDE4OC4zOTk5OSI+PHBhdGggZD0iTTE1OC45MTUgMTQzLjM2Yy0xLjk1LjY0Mi0zLjkwMyAxLjM1Ny01Ljg1NCAyLjE3Mi0xMC45ODcgNC42MTctMjEuNDA1IDEyLjMyNC0yOC43NCAyMS41MDgtLjIyMiA1LjE2Mi0uMjcgMTAuMzItLjQ5MyAxNS40ODMgMi43OSAxLjk1IDUuMjg1IDQuNTE3IDguNTY4IDUuNTMgMi4zNy43NCA1LjA4Ni41MiA3LjIxLS42NjcuNjE4LTMuNDgtNS44MjYtMy41OC01LjIxLTUuODc3IDguMTczIDEuOTI2IDE2LjQ5NCAzLjM4MiAyNC41MiAydi0xOS41MDZjLS4zNy4xLS41OTQuMTIzLS41OTQuMS0xLjEzNS41NC0zLjIzMyAyLjE3LTQgMy4wMzUtMi40Mi0uMDc2LTYgLjQ0LTUuMTg0LS43OTIuNTItLjM0NCA0LjY5Mi0zLjQ4MyA5Ljc4LTguOTE1em0wLTEzNi4wNTZjLTQuNzktLjg2My05LjQzNC0yLjI0Ny0xNC4yNDctMi45MzcgNC44NjMgNS4wNiA5LjQzMiAxMC4yNzIgMTQuMjQ3IDE1LjIzNnptMzYuNTkzIDg3LjI0Yy01LjE4NSAxMC4zOTUtMTAuMDczIDIwLjc2NC0xNS41NTYgMzEuMTYtMS44NTIgNC40Mi00Ljg2NCA4LjE3NS02LjU0NCAxMy4yODQtNC44NCAxLjU1Ny05LjY1MyAyLjc2NS0xNC40OTMgNC4zNzJ2MTQuMDczYzMuMDYtMy4yNTcgNi40Ny03LjM4MiA5LjYzLTEyLjE5Ny40OTQgMi4xMjQuMjcgMy41NTctLjI3MiA1LjgyOC0xLjIzNCAyLjU0NC0zLjEzNiA0LjMyLTQuNjkyIDYuNDk1IDAgLjE0Ny0uNzkgMy41MDQtLjg4OCAzLjYwMy0uNzE2IDEuODI4LTIuNzY1IDIuNTkzLTMuNzc3IDIuODR2MTkuNTA2Yy41NjgtLjA3NCAxLjEzNi0uMiAxLjcwMi0uMzIgMTAuODQtMi40MiAyMS45MjgtNS44MyAzMC4xMDItMTQuMjk4LTUuMjYgMS4xODUtMTAuNDk2IDIuMTQ4LTE1LjgwNSAyLjAyNS0zLjkyNi0uMDk4LTguOTY0LS40NDUtMTEuNDMyLTIuNjkyIDkuNTgtMi41NjggMjAuMjk3LTIuNzY1IDI4Ljc0Mi03LjczIDEuMTM1LS42NjYgMi4yMjMtMS4zOCAzLjI4My0yLjEyMnYtMTYuNDdjLTIuMjQ3Ljk5LTQuNjQgMi02LjYxNiAyLjg2NCAyLjc0LTYuMTIzIDUuNDMyLTE0LjgxNSA2LjUxNy0xNC43OS4wNS4xOTYuMDc0LjM5NC4wOTguNTY4em0tMzIuMi04Ni42NDdjLTEuNDgtLjEyMi0yLjkzNi0uMzQ1LTQuMzkzLS41OTN2MTIuM2MzLjAzNiAzLjEzMyA2LjE5OCA2LjE0NSA5LjYwNSA4Ljk2IDMuMjYgMi42OTIgNy44NTIgMy4xMzcgMTEuNzc3IDQuNzE3IDMuNTMyIDUuODggNi41NDQgMTEuNzU1IDEwLjU5NSAxNy4zMSAxLjYyOCAyLjI0NyAzLjE2IDQuMzcgNC42MTYgNi41MlYxMi42ODdjLTIuMDI0LTEuNjA1LTQuMS0zLjEzNi02LjI5Ni00LjQ0NC01LjYzLTMuMzYtMTIuMzk2LTcuNjgtMTcuODI4LTguMjQ4IDQuMzIgNC45NCA5LjEzNiA5LjcwNCAxMC40MiAxNC4yOTctMS43MjguMS0xMS45NS01LjgyOC0xOC40OTUtNi4zOTZ6bTMyLjIgNDkuMjEyYzIuMzQ3IDMuNTA2IDQuNDk1IDcuMDg2IDYuNDcgMTEuNDU3LjA1IDUuMzMzLS4yMjIgMTAuOTg4LTEuMzYgMTUuOTc2LTEuNzUgMy4zMzMtMy40NTUgNi42NjYtNS4xMSAxMHYzNi4wMDJjLjI3MyAyLjI0Ni0uMDczIDQuODg4IDEuMDEzIDYuMTcyIDEuMTEyIDEuMjg1IDIuODkgMS42MyA1LjU4IDEuOTI3LS43MTUuNjE3LTMuNDggMS45LTYuNTkyIDMuMjZ2MTYuNDdjOC42MTctNi4xNSAxNS4yMTItMTUuMzM3IDIwLjI0OC0yNC41OTRsLTYuMjIzIDIuMzQ3Yy0uODg4LTEuNjMgMTAuOTg4LTguOTkgMTUuOTc2LTE5LjUwOCA0LjM5NS05LjI2MyA1Ljc3Ny0xOS42MDggOC43NC0yOS4zODUtMi4wMjUuMjItNC4wNSAxLjExLTUuODc1IDIuMTcyIDMuNzUyLTcuNTU2IDUuMDYtMTUuMzEgNC42OS0yMy4xODYtLjQ0NS05LjU4LTMuNTMtMTguNzY1LTcuMDYtMjcuOS0uMSA1LjAzNi0uNTQ1IDkuNDA3LTIuNjkzIDEzLjExLTMuMDEzLTE0LjQ5NC0xMS4wMTMtMjcuNjU1LTE5LjgyOC0zOS4zMzQtLjA1IDIuMjQ3LjM5NiA0LjQ5My0uMTcyIDYuODg4LTIuNjQzLTIuMDI0LTUuMTg3LTQuMjItNy44MDQtNi4yOTZ2NDQuNDIiIGZpbGw9IiMxYjE4MWEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xNjkuMTYzIDI0LjY2NGMtNS4zODMtMy42NTUtOS4xODctOS4yMzYtMTMuNzU1LTEzLjg1MyA1Ljk1LjA1IDEyLjQ3IDEuNDU4IDE4LjM3MiAzLjQzNCA0IDEuMzMyIDcuNDU2IDMuMTYgMTAuOTQgNi4zOTUgMS4xMSAyLjU2NyAyLjIyIDUuMTM2IDMuMzU2IDcuNzI3LTUuNTU2LTMuNzc4LTExLjEzNi03LjUzLTE3LjgwMy0xMC44NC0uMDUuNzQtLjA3NCAxLjUwNi0uMSAyLjI3MyA0LjQ0NiAzLjMzMyAxMC45MTUgNi45MTMgMTMuNzA2IDEwLjI0Ny02LjE1LjA1LTEwLjQ5NS0yLjU0NC0xNC43MTctNS4zODMiIGZpbGw9IiNmN2NlMTkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xOTMuMDE1IDE0LjU5Yy0zLjE4Ni0yLjIyMy02LjU2OC00LjQyLTEwLjI0Ny01LjYzIDMuMjYgNi41OTIgNi4wNzMgMTIuNzY1IDkuNTA3IDE4LjU2OCAyLjAyNCAzLjgwMyA2LjY5IDcuNzUzIDYuMzcgMTEuMjM1IDIuNTIgMi42OTIgNC43MTYgNS40NTcgNi44MTQgOC4wNzYuMjk2LTEuNDM1LjI3LTIuODY3LjE3Mi00LjMtNC4yOTUtNi4zOTMtOC40Mi0xMi42NC0xMi4xLTE5LjIzNS4wNS0uOTg4LjUyLTEuODI2LjkxNi0yLjUxOCAzLjE2IDQuMzIgNi4xNyA5LjA2MiA5LjUwNSAxMi45NFYyMy42NWMtMy42NTQtMy4wMS03LjAzNy02LjM3LTEwLjkzOC05LjA2TTE5Ni43OTIgNDEuNTUzYy0zLjUzLTIuOTM4LTcuOTUtNi4wNzQtMTIuMTczLTYuNDcgMS4yNiA2LjM3MiA3LjA2IDEwLjc0MiAxMC41OTIgMTYuMTI1IDIuNzY1IDQuMjIzIDUuNzA0IDcuNzA0IDguMzIgMTIuNjY4Ljc0My0uNzE3IDEuNDEtMS43OCAxLjc1NS0yLjk0LTQuMS00Ljk2My03LjU4LTkuNzAzLTEwLjc0Mi0xNC45MzctLjEyMi0uNzkyLjE5OC0xLjU4My42NjctMi4xIDMuNzA0IDQuNjQgNi43MTYgOS40NTYgMTEuMDg3IDEzLjk1LjE3Mi0xLjYwNS4wNzMtMy4zODItLjI0OC01LjA2Mi0yLjkxMy00LjMyLTUuNTA1LTguMTQ4LTkuMjYtMTEuMjM1TTIxNy44OCA0My44Yy0xLjcyOC02LjA3NS02LjU5My0xNS43MDQtOS4xMzYtMTYuNjE3LS4xNDggOC40NDQuMDUgMTYuMTk3IDEuNTggMjQuMSAxLjE2IDUuOTI1IDIuOTg4IDE1LjUwNyA2LjM5NiAxNi45NjItLjQ0NS03LjkyNS0zLjkyNy0xNi40Mi01LjM4My0yNC41MTguNTE4LS41NjggMS40MDctLjM3IDIuMzQ0LjM0NSAyLjM5NyA2LjQ5MyAzLjc1NiAxMi43NDIgNS4zODQgMTkuNDggMi44OS0uNjE1LjYxNy0xMy40MDUtMS4xODQtMTkuNzUyTTIyOS40ODUgNjguODRjLS4wNS00LjEtMS4yMzQtOC4zOTYtMi4yNzItMTIuMS0yLjA3MyA1LjA4NS01LjIzNCA5LjgyNy02LjIyIDE1LjIxLS45MTYgNC45ODctLjg2NiAxMy41OC41OSAxNS4yMSAyLjkxNC0zLjk1IDIuMjk3LTkuMjYgMy40MzMtMTMuODc3LjMyLS42NDIuNzktLjQ0NCAxLjE4NS0uMTQ4LjgxNiAyLjg0LjY5MiA1LjcwNCAxLjA4NyA4LjU2OCAyLjEyNC0uMjcgMi4yMjItOC41MiAyLjE5OC0xMi44NjRNMjEzLjA5IDY4LjU5Yy0xLjMxLTIuMTQ3LTIuNzY2LTQuNTE4LTQuNzktNS44NzUtLjk4OCA2LjM5NC0yLjI0OCAxMi44NC0xLjUwOCAxOS4yMzQuNjQ0IDUuMzgyIDMuNzA1IDEwLjE0NyA1LjU1NiAxNS4yNiAxLjc1NSAxLjExLjY2Ny0xMS4xODYgMC0xNi43NjYuNzQtLjI0OCAxLjQzMy0uMDUgMiAuNTY2IDEuOTUyIDcuMjEgMS4zMzMgMjEuMDE0IDEuODUyIDIxLjMxIDEuNTA4LTEuMDM1IDIuNTItMi4zOTUgMy43OC00LjA5Ny0uOTY1LTMuNTgyLTEuOTUyLTYuOTQtMi40Mi0xMC40OTUtLjQ5Ni0zLjUwNy0uMjk3LTcuMTEyLS40Mi0xMC42NjctMS4yNi0zLjA2Mi0yLjM5Ni01LjgwMy00LjA1LTguNDdNMjIyLjE3NiAxMTQuODRjMi41NDQtNS4wODUgNC0xMC42MTcgNS4xMS0xNi4yOTYtNC45MzcgNC4yOTYtMTAuNDkzIDkuOTc2LTE0LjYxNSAxNS44NzctMy41OCA1LjEzNi04IDEyLjAyNy04LjIyMiAxNi44OTIgNC44OS00LjU3IDguNzktMTIuNDk2IDEzLjQzMi0xOC40NzIuNDQ1LjE0OCAxLjIzNS40OTUgMS4zNTcgMS4yNi0xLjMzMyA0LjEtNC4wNzMgNy44MDMtNS43MjggMTEuODI4IDIuODE0LS42NjcgNi41NDMtNi44OSA4LjY2Ni0xMS4wODhNMjA5LjIzNyAxMDQuNTJjLjU2OC01Ljk1LTEuNjc4LTExLjc1NS0zLjk1LTE1LjQzNC0xLjYwNiA3LjA5LTQuNDk1IDEzLjc1NC02LjA1IDIwLjc5Mi0xLjIxIDUuNTMtMS42NzggMTEuNzA1IDAgMTYuODE0IDIuMzIyLTYuNDQzIDMuNDgyLTEzLjU1NSA0Ljk2My0yMC4zMi40OTUtLjM0NyAxLjA4Ny0uMTcyIDEuMjYuNDk1LjA0OCA0Ljk4Ni0uOTg4IDkuNzAyLTEuMDg3IDE0LjY5IDMuMTM2LTEuMzA4IDQuMjk4LTExLjE2MiA0Ljg2NC0xNy4wMzdNMTg2LjgxNyAxMzkuNTMyYzMuNzI4LTYuODg4IDUuMzM0LTE0LjQ5NSA2Ljg5LTIyLjQ5NS00LjE0OCA0LjItOS4xMTIgNy43My0xMi40NDYgMTIuNTk1LTMuNDggNS4xMTItNi43NCAxMi4xLTcuNzI4IDE2Ljg4OCAxLjkuMDI1IDcuMzMzLTkuMzU3IDExLjI2LTEzLjc4Ljc0LjQyMyAxLjAzNy4zMjQuOTEzIDEuNTA4LTMuNDU3IDcuNjgtMTIuMjk3IDE3LjI4NC0xMi4xNzMgMjAgMy44NTMtMS41NTUgMTAuMTI0LTguOTEzIDEzLjI4NS0xNC43MTZNMTk0Ljg2NyAxNTUuMTYzYzQuMzItMy43NTMgOC4yNDgtNi44NjUgMTEuNjgtMTIuNjk0LTUuODc4LjgxNS0xMi4xMjQgMy4zMzMtMTcuNjMgNi4yMjMtNS44NTQgMy4wNjMtMTEuNDM0IDYuODY2LTE2LjEyNiAxMS4zMzQgMS44OCAyLjY0NCAxNC45OS03LjQwOCAyMi40OTUtMTEuMTYyLjk5LjI1IDEuNDU4IDEuMDE0IDEuMTg2IDEuNzU0LTUuODUgNC4yMjMtMTEuNzc3IDcuNTMtMTcuOCAxMC45MTIgNC40NjcuODE2IDExLjc1LTIuNDkyIDE2LjE5Ny02LjM3TTE1MS43OCAxNTkuMzZjNC40Mi0zLjU1NSA4LjQ0NC03LjI4MyAxMC43NjQtMTMuMTg0LTUuODI3Ljg4OC0xMi4xNSAzLjM1Ni0xNy40ODMgNi41NC00Ljg4OCAyLjkxNi0xMy44NSAxMC4yLTEyLjU5IDExLjQzNi45MzcgMS43NzYgMTguMjctMTIuNzkyIDE5LjQ4LTExLjI2IDEuOTAyIDEuMDYzLTE1LjMzNCAxMS43MDMtMTUuMjEgMTQuMDIzIDQuMzQ3LS4wNzIgMTAuNjY4LTQuMDUgMTUuMDQtNy41NTVNMTUyLjcxNyAxODAuODY4YzcuNjU1LS40NDUgMTUuMzU4LTIuNzQgMjIuMTc0LTYuMTI0LTcuODI3LTEuNzA0LTE1LjU1NS0zLjI4NC0yMy40MzMtMy41MzItNS4xMzYtLjE3Mi0xNi4yNzMuNjY3LTE1LjIxIDIuMjQ4LS4yNzIgMi4xMjQgMzAuOTM4LS44NCAyOC44OSAyLjAyNS45ODcgMi44MTctMjAuNTQ0IDEuNjU0LTMxLjA2NCAxLjYwNS0uMjcgMi41OTQgMTIuMjk4IDQuMTUgMTguNjQ0IDMuNzc4IiBmaWxsPSIjZmJkMTE4IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMzguNjYzIDU3LjExYy0yLjM0NyAzLjUwNi00LjQ5NSA3LjA4Ni02LjQ3IDExLjQ1Ny0uMDUgNS4zMzMuMjIzIDEwLjk4OCAxLjM1OCAxNS45NzYgMS43NTQgMy4zMzMgMy40NTggNi42NjYgNS4xMTMgMTB2MzYuMDAyYy0uMjQ4IDIuMjQ2LjA3MyA0Ljg4OC0xLjAxNCA2LjE3Mi0xLjExIDEuMjg1LTIuODkgMS42My01LjU4IDEuOTI3LjcxNS42MTcgMy40ODIgMS45IDYuNTkzIDMuMjZ2MTYuNDdjLTguNTk0LTYuMTUtMTUuMjEtMTUuMzM3LTIwLjI0OC0yNC41OTRsNi4yMjIgMi4zNDdjLjg4OC0xLjYzLTEwLjk4OC04Ljk5LTE1Ljk3Ni0xOS41MDhDNC4yOSAxMDcuMzYgMi45MSA5Ny4wMS0uMDggODcuMjM0YzIuMDI0LjIyIDQuMDUgMS4xMSA1LjkgMi4xNzJDMi4wNyA4MS44NS43MzYgNzQuMDk3IDEuMTA2IDY2LjIyYy40NDYtOS41OCAzLjUzLTE4Ljc2NSA3LjA2Mi0yNy45LjEgNS4wMzYuNTcgOS40MDcgMi42OTIgMTMuMTEgMy4wMzYtMTQuNDk0IDExLjAxMi0yNy42NTUgMTkuODI2LTM5LjMzNC4wNSAyLjI0Ny0uMzk0IDQuNDkzLjE3MyA2Ljg4OCAyLjY0Mi0yLjAyNCA1LjE4NS00LjIyIDcuODAzLTYuMjk2em0wIDM3LjQzM2M1LjE4NSAxMC4zOTYgMTAuMDk4IDIwLjc2NSAxNS41NTYgMzEuMTYgMS44NSA0LjQyIDQuODYzIDguMTc2IDYuNTQzIDEzLjI4NSA0Ljg0IDEuNTU3IDkuNjUzIDIuNzY1IDE0LjQ5MyA0LjM3MnYxNC4wNzNjLTMuMDYtMy4yNTctNi40Ny03LjM4Mi05LjYwNS0xMi4xOTctLjUxNyAyLjEyNC0uMjcgMy41NTcuMjQ4IDUuODI4IDEuMjM1IDIuNTQ0IDMuMTM1IDQuMzIgNC42OTIgNi40OTUgMCAuMTQ3Ljc5IDMuNTA0Ljg5IDMuNjAzLjcxNSAxLjgyOCAyLjc2NCAyLjU5MyAzLjc3NiAyLjg0djE5LjUwNmMtLjU2Ni0uMDc0LTEuMTM1LS4yLTEuNzA0LS4zMi0xMC44MzgtMi40Mi0yMS45LTUuODMtMzAuMS0xNC4yOTggNS4yODUgMS4xODUgMTAuNDk1IDIuMTQ4IDE1LjgwNCAyLjAyNSAzLjkyNS0uMDk4IDguOTY0LS40NDUgMTEuNDMyLTIuNjkyLTkuNTgtMi41NjgtMjAuMjk3LTIuNzY1LTI4Ljc0LTcuNzMtMS4xMTMtLjY2Ni0yLjIyNC0xLjM4LTMuMjg1LTIuMTIydi0xNi40N2MyLjI0Ni45OSA0LjY0MiAyIDYuNjE3IDIuODY0LTIuNzQtNi4xMjMtNS40MzItMTQuODE1LTYuNTItMTQuNzktLjA0OC4xOTYtLjA3NC4zOTQtLjA5Ny41Njh6TTcwLjg2IDcuODk3YzEuNDgzLS4xMjIgMi45NC0uMzQ1IDQuMzk2LS41OTN2MTIuM2MtMy4wMzYgMy4xMzMtNi4xOTcgNi4xNDUtOS42MDUgOC45Ni0zLjI1OCAyLjY5Mi03Ljg1MiAzLjEzNy0xMS43NzcgNC43MTctMy41MzIgNS44OC02LjU0NCAxMS43NTUtMTAuNTY4IDE3LjMxLTEuNjU0IDIuMjQ3LTMuMTg2IDQuMzctNC42NDIgNi41MlYxMi42ODdjMi4wMjMtMS42MDUgNC4wOTgtMy4xMzYgNi4zMi00LjQ0NEM1MC41OSA0Ljg4NCA1Ny4zNTYuNTY0IDYyLjc4Ny0uMDA0Yy00LjMyIDQuOTQtOS4xMzUgOS43MDQtMTAuNDIgMTQuMjk3IDEuNzMuMSAxMS45NS01LjgyOCAxOC40OTUtNi4zOTZ6bTQuMzk2IDEzNS40NjNjMS45NS42NDIgMy45MDMgMS4zNTcgNS44NTMgMi4xNzIgMTAuOTg3IDQuNjE3IDIxLjQwNyAxMi4zMjQgMjguNzQgMjEuNTA4LjIyMyA1LjE2Mi4yNzMgMTAuMzIuNTIgMTUuNDgzLTIuODE1IDEuOTUtNS4zMSA0LjUxNy04LjU5NCA1LjUzLTIuMzcuNzQtNS4wODYuNTItNy4yMS0uNjY3LS42MTgtMy40OCA1LjgyNy0zLjU4IDUuMjEtNS44NzctOC4xNzMgMS45MjYtMTYuNDk1IDMuMzgyLTI0LjUyIDJ2LTE5LjUwNmMuMzcuMS41OTMuMTIzLjU5My4xIDEuMTM1LjU0IDMuMjYgMi4xNyA0IDMuMDM1IDIuNDItLjA3NiA2LjAyNS40NCA1LjE4NS0uNzkyLS41Mi0uMzQ0LTQuNjY3LTMuNDgzLTkuNzgtOC45MTV6bTAtMTM2LjA1NmM0Ljc5LS44NjMgOS40MzQtMi4yNDcgMTQuMjQ4LTIuOTM3LTQuODY0IDUuMDYtOS40MDggMTAuMjcyLTE0LjI0OCAxNS4yMzZ2LTEyLjMiIGZpbGw9IiMxYjE4MWEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMTYuODg4IDE0Ni4yMjVjLTQwLjY2OC0uNDk0LTgxLjI0LTIzLjUzMy04MS42ODMtNTkuMTY0LS40OTMtNDAuMSA0MC45NC02MS4xMzcgODEuMDE2LTYwLjUyIDM5LjY4LjU5MiA4NC44MiAxOS4xODcgODMuNzMyIDYxLjUzMy0xLjA2IDQwLjQ5Ni00NS45IDU4LjU5NS04My4wNjQgNTguMTUyIiBmaWxsPSIjZmJkMTE4IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTE2Ljg4OCAxNDYuMjI1Yy00MC42NjgtLjQ5NC04MS4yNC0yMy41MzMtODEuNjgzLTU5LjE2NC0uNDkzLTQwLjEgNDAuOTQtNjEuMTM3IDgxLjAxNi02MC41MiAzOS42OC41OTIgODQuODIgMTkuMTg3IDgzLjczMiA2MS41MzMtMS4wNiA0MC40OTYtNDUuOSA1OC41OTUtODMuMDY0IDU4LjE1MnoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFiMTgxYSIgc3Ryb2tlLXdpZHRoPSI2LjE3MzE3OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjIuNjEzIi8+PHBhdGggZD0iTTM1LjUyNyA4MC4zNDVjMS4yMzQtNS4xNiAzLjQ4LTExLjE2IDQuNzE2LTE2LjMyIDExLjExMiA5LjY1NCA1MS4xMzggMjIuMTcyIDc4LjY3IDIyLjcxNSAyNi40MjIuNDk1IDUyLjQ5NS03LjM1NyA3Ni45OS0xOC44NGwzLjcwNSAxOS4xNjNjLS43OSA1LjAxMi0xLjU1NiAxMC4wNzQtMi4zNDUgMTUuMTEtMjAuNDcgOS4xMzYtNTEuNDg0IDE2LjM3Mi03OC4wMyAxNS44MDMtMjcuOTI2LS41OTItNTguMjk4LTYuODg4LTgxLjY4LTE5LjMzM2wtMi4wMjYtMTguMjk4IiBmaWxsPSIjMWIxODFhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTIxLjgwMiA3NS4wNmMxLjg1LjI3MiAzLjY4Ljc0MiA1LjUwNiAxLjM2LjMyLS43MTcuNjE3LTEuNDM0Ljg5LTIuMTc1LjE5Ny0uNTE4LjM5NC0xLjAzNy41NjYtMS41OC4wNS0uMTI0LjA3NS0uMjIyLjEyNC0uMzQ2LjQyLTEuMjM1LjgxNi0yLjUxOCAxLjEzNi0zLjc4LjgxNS0zLjEzNSAxLjI2LTYuMzIgMS4xODQtOS4yMzMtLjEtMi43NjYtLjUxNy01LjUwNy0xLjE4NC04LjE5OC0uMzItMS4yNi0uNjkyLTIuNTQ1LTEuMTM2LTMuNzgtLjA1LS4xMjMtLjA3My0uMjIyLS4xMjQtLjMyLS4xNzItLjUyLS4zNy0xLjAzNy0uNTY3LTEuNTU3LS41NjgtMS40My0xLjIxLTIuODYyLTEuOTUtNC4yNy0xLjQ4My41OTItMi45NjQgMS4wMzctNC40NDUgMS4zNTctLjMyLjA3NS0uNjE4LjEyNC0uOTM4LjItLjAyNyAwLS4wNSAwLS4wNzQuMDIzaC0uMDc1Yy4wMjUuMDUuMDUuMTI0LjA3NS4xNzMuMDI1LjA1LjA0Ny4wNzMuMDc0LjEyMy4zMi42NjcuNjQgMS40My45MzggMi4yNDcgMS42MDUgNC40MiAyLjU5IDEwLjU2OCAyLjYxNyAxMy45MjUgMCA0LjM5Ni0xLjA2MyA4LjkxNS0yLjYxOCAxMy4xNi0uMjk4LjgxNi0uNjE4IDEuNjMtLjkzOCAyLjQyMiAwIC4wMjUtLjAyNy4wNS0uMDI3LjA5OGguMDI3bC45MzguMTQ4TTExMi4yMiA3Mi4zOTNjLS4wNzMtLjIyLS4xNDgtLjQxOC0uMjIyLS42NC0uMTk2LS41NDUtLjM5NS0xLjExMi0uNTkzLTEuNjU2LTEuMjgyLTMuNzUzLTIuMjItNy41MzItMi4zMi0xMS4zMzQtLjA3NS0zLjkuNzY2LTkuMDM2IDIuMzItMTMuNDU2LjE5OC0uNTQ0LjM5Ny0xLjAzOC41OTMtMS41NTYuMDc0LS4xNzMuMTUtLjM0NS4yMjMtLjUxOC4wNzUtLjE3My4xNzMtLjMyLjI0OC0uNDkzLS4wNzUtLjAyNy0uMTczLS4wNS0uMjQ3LS4wNS0uMDczLS4wMjYtLjE0OC0uMDI2LS4yMjItLjA1LS4xOTYtLjA1LS4zOTUtLjA3NS0uNTkzLS4xMjQtLjkzNy0uMjIzLTEuODUyLS40NDQtMi44MzgtLjc5LS40NDQtLjE3My0uOTQtLjM3LTEuNDU4LS41OTMtLjgxNSAxLjc3OC0xLjUzIDMuNTMtMi4xIDUuMjYtLjI3Ljc2NC0uNTE4IDEuNTMtLjcxNSAyLjI5Ni0uMjk3IDEuMDEtLjUyIDItLjcxNiAyLjk4Ni0uNDk2IDIuMzk2LS43NDMgNC43NjctLjcxNyA3LjIxIDAgMi4wMjYuMjcyIDQuMDUuNzE2IDYuMDc1LjE5Ni45MzguNDQzIDEuODguNzE1IDIuNzkyLjE5Ny43NjUuNDQ0IDEuNTU2LjcxNSAyLjMyLjY2NyAyLjA3NSAxLjQ1NyA0LjE1IDIuMjIzIDYuMi40NDQtLjE1LjkxNC0uMjk3IDEuMzM0LS4zOTcuOTg2LS4yOTYgMS45LS41MTggMi44MzgtLjY5LjE5OC0uMDUuMzk3LS4wNzYuNTkzLS4xMjUuMDc0IDAgLjE1LS4wMjQuMjIzLS4wMjQuMTI0LS4wMjYuMjQ4LS4wNS4zNzItLjA1LjE5OC0uMDI1LjM5My0uMDc0LjYxNi0uMDk4LS4yMjMtLjQ5NS0uNDE4LS45ODgtLjYxNi0xLjUwNy0uMTI0LS4zMi0uMjQ4LS42NjUtLjM3LS45ODciIGZpbGw9IiMxYjE4MWEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMTcuMjgzIDc0LjY0Yy42NjYgMCAxLjMxLjAyNSAyLjEyNC4wNzUuNDkzLTEuMzgzLjkzNy0yLjgxNSAxLjM4My00LjI0Ny4wMjUtLjA3NS4wNDctLjE1LjA3NC0uMjIzLjM0NC0xLjE2LjY2Ny0yLjMyLjkzOC0zLjQ4LjU5LTIuNDk2Ljk2Mi01LjAxMy45MzgtNy41MzMgMC0yLjc2NS0uMzItNS41NTUtLjkzOC04LjM0NS0uMjctMS4yMS0uNTctMi40NDYtLjkzOC0zLjY1NS0uMDI3LS4wNzUtLjA1LS4xNDgtLjA3NC0uMjIzLS40Mi0xLjM1OC0uOTE1LTIuNjktMS40NTgtNC4wMjUtLjc0LjA3NC0xLjM4My4xNDgtMi4wNS4xNzItMS4xMS4wNS0yLjE3My0uMDI0LTMuNDMtLjE5Ny0uNDQ3IDEuMjg0LS44NjcgMi42MTctMS4yNiAzLjkyNy0uMTI0LjQ3LS4yNDguOTEzLS4zNyAxLjM1N2wtLjIyNC44OWMtLjIyMi45MTMtLjQyIDEuODI2LS41OTMgMi43NC0uNDIgMi4zNDYtLjY0IDQuNjY3LS41NjYgNi45OS4wMjMgMS42NzcuMjQ1IDMuMzMyLjU2NSA0Ljk2LjE3NC44NC4zNyAxLjY4LjU5MyAyLjUyLjA3NC4yOTYuMTUuNTY4LjIyMy44NGwuMzcyIDEuMjZjLjY0IDIuMDk3IDEuMzU3IDQuMjIgMi4wOTggNi4zNDYuOTg3LS4xIDEuODAyLS4xNSAyLjU5My0uMTVNMTI4Ljg4OCA0MC4wN2MtLjA1LjAyNi0uMDczLjA1LS4xMjQuMDc1LS4xNzIuMS0uMzcuMTk4LS41NjcuMjk2LS4yMjIuMS0uNDQ1LjItLjY5Mi4yOTcuMjQ3LjQ5NS40Ny45NjQuNjkyIDEuNDM0LjE5OC4zOTUuMzk1Ljc5LjU2NyAxLjE4Ni4wNS4wNzMuMDc1LjE0OC4xMjQuMjIuNDIuODY3Ljc5IDEuNzA1IDEuMTM2IDIuNTQ0LjgxNSAxLjkwMyAxLjQzMiAzLjgwNCAxLjg1IDYuMTI0bDIuMDUtMS4yODQgMS44My0xLjExTDEzOCA0OC40NGwxLjI2LS43NjRjLjAyMy0uMDI0LjA3My0uMDczLjE0Ny0uMS0uNDItLjgxMy0uODg4LTEuNjAzLTEuNDA3LTIuMzkzLS42NjctMS4wMTItMS40MDgtMi0yLjI0Ny0yLjkxNC0uNTctLjY0My0xLjE4Ni0xLjI2LTEuODI4LTEuODUzLS43MTYtLjY0Mi0xLjQ4Mi0xLjI2LTIuMjk2LTEuODUyLS41Ny4yOTYtMS4wOS42MTgtMS42MDYuODg4LS4zNy4yMjMtLjc0LjQyLTEuMTM2LjYxOE0xMDUuMDEgMzguMjJjMS4wODYuNjY3IDIuMjk3IDEuMjYgMy41NTcgMS43NzcuOTM3LjM3IDEuOS43MTYgMi44MzguOTYzLjE5OC4wNzUuMzk3LjEyNC41OTMuMTczLjA3NC4wMjQuMTUuMDI0LjIyMy4wNS4xMjQuMDUuMjQ4LjA3My4zNzIuMDk4IDEuNDU2LjM3MiAyLjkzNy41NyA0LjMyLjU3aC4zN2MxLjE4Ni0uMDI2IDIuMzQ2LS4xOTggMy41MDgtLjQ0NS4wMjUgMCAuMDQ3LS4wMjUuMDc0LS4wMjUuMzItLjA3NS42MTctLjE0OC45MzgtLjIyMyAyLjEyMy0uNTkyIDQuMTk2LTEuNDggNi4zOTUtMi40OTMuMTk4LS4xLjM5NS0uMTk3LjU2Ny0uMjcyLjA1LS4wMjUuMDc1LS4wNS4xMjQtLjA3NS4zNy0uMTcyLjc2NS0uMzcgMS4xMzYtLjU2Ni4wNzMtLjAyNS4xNDgtLjA3NC4yMjMtLjEtLjA3NS0uMDQ3LS4xNS0uMDk3LS4yMjMtLjE0Ni0uMzQ1LS4yMjMtLjc0LS40NDUtMS4xMzYtLjY2Ny0uMDUtLjAyNS0uMDczLS4wMjUtLjEyNC0uMDUtLjE3Mi0uMS0uMzctLjE5OC0uNTY3LS4yOTYtMi0uOTg3LTQuMTUtMS43NTMtNi4zOTUtMi4xNzMtLjMyLS4wNS0uNjE4LS4xMjItLjkzOC0uMTQ4LS4wMjctLjAyNS0uMDUtLjAyNS0uMDc0LS4wMjUtMS4xNjItLjE5Ny0yLjI5OC0uMjcyLTMuNTA3LS4yNzJoLS4yNDdjLTEuNTMgMC0zLjAxMy4xMjQtNC40NDQuMzk1bC0uMzcuMDc1Yy0uMDc1LjAyNC0uMTUuMDI0LS4yMjQuMDUtLjE5Ni4wMjQtLjM5NS4wNzQtLjU5My4xMjItLjk2Mi4yMjItMS45LjUxOC0yLjgzOC44NC0xLjIxLjQ0NS0yLjQyLjk4OC0zLjU1NyAxLjYzLS4yNDcuMTIzLS40OTQuMjctLjcxNS4zOTUtLjEyNC4wNzMtLjE5OC4xMjQtLjMyMi4xNzMuMTI0LjA5OC4xOTguMTQ3LjMyMi4xOTguMjIuMTc0LjQ2OC4zMi43MTUuNDdNMTM5Ljg3NyA0OC42NGMtLjYxNy40Mi0xLjIzNC44NC0xLjg3NyAxLjIzNS0uNzQuNDY4LTEuNTA1LjkzNy0yLjI0NyAxLjQwOC0uNjE3LjM0NC0xLjIzNi43MTQtMS44MjggMS4wODUtLjU2OC4zNDUtMS4xMS42OTItMS42NzggMS4wMzctLjA1LjAyNC0uMS4wNzQtLjEyNC4xLjQ3IDMuMzA3LjYxNyA2Ljc2NC4yOTcgMTAuMTcyLjA3Mi4wMjUuMDk3LjAyNS4xNDcuMDVsMS4zNTguNTkyIDEuODI4LjgxNSAyLjI0Ny45NjIgMi42OSAxLjE2Yy44MTUtMi4zOTQgMS4yODUtNC44NjQgMS4zNi03LjM4MnYtMS45MDJjLS4xLTMuMTYtLjgxNS02LjM3LTIuMTczLTkuMzMzTTEzNS43NTMgNjYuNDkyYy0uNjE3LS4yOTYtMS4yMzYtLjU5NC0xLjgyOC0uODY0LS41NDItLjI0Ny0xLjA4Ni0uNDkzLTEuNjA1LS43NDItLjM3IDMuMDg3LTEuMTM2IDYuMTI0LTIuMjk2IDkuMDE0LS4zNDUuODQtLjcxNiAxLjY4LTEuMTM2IDIuNTItLjAyNC4wNzItLjA3My4xNDctLjEyNC4yNDUtLjAyNC4wNzUtLjA3My4xMjMtLjEuMTk4LjAyNy4wMjUuMDc2LjAyNS4xLjA1LjA1LjAyNC4xLjAyNC4xMjQuMDczLjM5NS4xNS43NjUuMjk3IDEuMTM2LjQ3LjgxNS4zNDYgMS42My43NCAyLjQ5MyAxLjE4NS40OTUtLjM5NS45NjQtLjc5IDEuNDA4LTEuMjEuNjQyLS41NjcgMS4yMzYtMS4xODUgMS44MjgtMS44MjYuODQtLjk0IDEuNTgtMS45MjcgMi4yNDctMi45NC44OS0xLjM1NiAxLjY1NS0yLjgxMyAyLjI0Ny00LjI5NS0uNzE2LS4yNS0xLjQ4Mi0uNTQ1LTIuMjQ3LS44NjUtLjc0LS4zMi0xLjUwNS0uNjY2LTIuMjQ3LTEuMDEzTTk3LjY1MiA0OS4zNTZjLjY0My4zMiAxLjI4NC42MTcgMS45LjkzNy43MTcuMzcgMS40MDguNzE2IDIuMSAxLjA2My40NDQtMi4yOTYgMS4wODctNC41MiAxLjkyNy02LjY0My4yMjItLjU2OC40NDMtMS4xMzYuNzE1LTEuNzA0LjIyLS40OTQuNDQ0LS45ODcuNzE1LTEuNDgyLjE5OC0uMzcuMzk1LS43NjUuNjE4LTEuMTM2LS4yMjMtLjEyNC0uNDItLjIyLS42MTgtLjM0NS0uMjQ3LS4xMjMtLjQ5NC0uMjcyLS43MTUtLjM5Ni0uMjQ3LS4xNDYtLjQ5My0uMzItLjcxNi0uNDY3LS4zNDctLjIyMy0uNjY4LS40NDYtLjk5LS43MTYtMS4wODYuNzktMi4wOTggMS42My0zLjAzNyAyLjU0Mi0uNjkuNjY2LTEuMzA4IDEuMzU4LTEuOSAyLjEtLjU0NC42NjYtMS4wNjIgMS4zNTctMS41MzIgMi4wNzMtLjU2Ny44NjQtMS4wODUgMS43NTMtMS41NTUgMi42OTIuNTIuMjIgMS4wMzguNDY4IDEuNTU2LjcxNi41Mi4yNDcgMS4wMTMuNTIgMS41MzIuNzY2TTEyOC44ODggNzguNjE2Yy0uMDUtLjAyNC0uMDczLS4wNS0uMTI0LS4wNS0uMTcyLS4wNzQtLjM3LS4xNDctLjU2Ny0uMjIyLTIuMTI0LS43OS00LjI0OC0xLjM1OC02LjM5NS0xLjY4LS4zMi0uMDQ4LS42MTgtLjA5Ny0uOTM4LS4xNDdoLS4wNzRjLTEuMTg3LS4xNDgtMi4zMjItLjE5Ny0zLjUwNy0uMjIyLTEuNTU2IDAtMy4xNi4xMjQtNC42OS4zNDYtLjEyNSAwLS4yNS4wMjUtLjM3Mi4wNS0uMDczIDAtLjE0OC4wMjUtLjIyMi4wMjUtLjE5Ni4wNS0uMzk1LjA3My0uNTkzLjEyNC0uOTM3LjE3LTEuOS4zOTMtMi44MzguNjY1LTEuMTg2LjMyLTIuMzcuNzE2LTMuNTU3IDEuMTg2LS4yNDcuMDk4LS40OTQuMTk4LS43MTUuMjk2LS4yNDcuMS0uNDkzLjE5OC0uNzE2LjI5Ny0uMTc1LjA5OC0uMzQ3LjE3Mi0uNTIuMjQ2LjE3My4xMjMuMzQ1LjI0Ny41Mi4zNDUuMjIyLjE3My40NjguMzIuNzE1LjQ3LjIyLjE0Ny40NjguMjk2LjcxNS40NDUgMS4xMzcuNjY2IDIuMzQ2IDEuMjM0IDMuNTU3IDEuNzAzLjkzNy4zMjIgMS45LjYxNyAyLjgzOC44NjRsLjU5My4xNDhjLjA3NCAwIC4xNS4wMjYuMjIzLjA1LjEyNC4wMjUuMjQ4LjA1LjM3Mi4wNzMgMS41My4yOTYgMy4xMS40NDUgNC42OS4zOTYgMS4xODYgMCAyLjM0Ni0uMDc1IDMuNTA4LS4yNzJoLjA3NGMuMzItLjA1LjYxNy0uMS45MzgtLjE3MiAyLjE5Ni0uNDIgNC4zNDYtMS4xNiA2LjM5NS0yLjIuMTk4LS4wOTcuMzk1LS4xOTYuNTY3LS4zMi4wNSAwIC4wNzUtLjAyNC4xMjQtLjA1LjM5NS0uMTk1Ljc2NS0uNDE4IDEuMTM2LS42NC4zOTUtLjI0Ny43NjYtLjQ5NSAxLjEzNS0uNzY2LS4zNy0uMTczLS43NC0uMzQ3LTEuMTM2LS41Mi0uMzctLjE0Ny0uNzY1LS4zMi0xLjEzNi0uNDY4TTEwNC4yOTUgNzcuMjgzYy4yMi0uMS40NDQtLjE5OC43MTUtLjI5Ny4yMjMtLjA3NC40Ny0uMTcuNjkzLS4yNy0uMjIzLS41Mi0uNDctMS4wNjMtLjY5My0xLjYzLS4yNDctLjU0NS0uNDk0LTEuMTEtLjcxNS0xLjY4LS4yNDctLjU5Mi0uNDkzLTEuMjEtLjcxNi0xLjgyNy0uNzkyLTIuMDc1LTEuNTA4LTQuMzQ3LTItNi44NjVsLTIuMDI3Ljk2Mi0xLjkuODY0LTEuNTMyLjcxNy0yLjI5NiAxLjA2M2MuNjIgMS41MDUgMS4zODMgMi45NjMgMi4yOTcgNC4zNDUuNDcuNzE2Ljk5IDEuNDMyIDEuNTMyIDIuMTI1LjU5My42OSAxLjIzNCAxLjM4MiAxLjkgMi4wNS42Mi41OSAxLjI2MiAxLjE1OCAxLjkyOCAxLjcuNTE3LS4yMiAxLjIxLS41NjUgMi4xLS45Ni4yMjItLjEuNDY4LS4yLjcxNS0uMjk3TTk3LjY1MiA2NS4yNTdsMS45LS44ODggMS41OC0uNzQyYy4wNzYtLjA1LjE1LS4wNS4yNDgtLjA1LS41OTItMy41MDYtLjUxNy03LjMzMy4wNzUtMTEuMDYyLS4wNSAwLS4xMjQtLjAyNC0uMTk4LS4wNWwtMS43MDQtLjg0LTEuOS0uOTM3LTEuNTMyLS43NjYtMi4wMjQtLjk4OGMtMS4yNiAyLjkzNy0xLjk1IDYuMDc1LTIuMDczIDkuMTg1djEuNjA3Yy4wOTggMi41NDIuNTQ0IDUuMDg1IDEuNDA2IDcuNDhsMi42OS0xLjIzNCAxLjUzMi0uNzE2IiBmaWxsPSIjMWIxODFhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNjUuMjMgMTA0LjAyNGwtMy4zMDctMS4yODQgMS45NzQtMTEuMTM2LTcuOTI1IDkuMTM2LTEuMjM2LS40Ny4yLTEyLjA3NC02LjA1MiA5LjUzMkw0NS42IDk2LjQ3bDExLjI2LTE3LjczIDEuODAzLjY5LS44MTUgMTQuNTQ1IDkuMDM3LTExLjM4NCAxLjgwMy42OTMtMy40NTcgMjAuNzRNNzAuNjQgMTAwLjc0bDMuMTYuODY1YzAgMS4yMzUuNzkgMi4wNzQgMi40NDUgMi40OTcgMS4xNi4zMiAyLjA3NC4xNyAyLjc0LS40NzMuNjkyLS42MTggMS4yMzYtMS42NzggMS42My0zLjIzNWwzLjM1OC0xMi40NDQgMy41My45NC0zLjMwNyAxMi4zNDZjLS43MTYgMi42NDItMS44MDMgNC40Ny0zLjI2IDUuNDMyLTEuNDguOTg4LTMuNDU2IDEuMTM2LTUuOTI2LjQ3LTEuNjU0LS40NDYtMi44NjUtMS4yMS0zLjY1NC0yLjM0Ny0uNzktMS4xMzQtMS4wMTItMi40OTQtLjcxNi00LjA1TTk3LjQ1NSA4Ni40MnYuNzRjLS4xLjUyLS4zNDYuOTM3LS43NjUgMS4yMzMtLjQ0NS4zNDctLjk0LjQ3LTEuNDgzLjM5Ny0uNTQzLS4wNzQtLjk4Ny0uMzQ2LTEuMzEtLjc5Mi0uMzQ0LS40MTgtLjQ2OC0uOTEzLS4zOTMtMS40NTUuMDczLS41NjguMzItLjk4OC43OS0xLjMzNC40Mi0uMzQ2LjkzOC0uNDcgMS40ODItLjM5Ni41NDMuMDc0Ljk4Ny4zNDYgMS4zMDguNzkuMTk3LjI0Ny4zMi41Mi4zNy44MTV6bTAgMjAuOTY0bC0zLjg3OC0uNTY4LTIgMy45NS00LjAyNC0uNTY4IDkuOTAyLTE3LjUzdjYuNTE3bC0yLjQ0NiA1LjAxMyAyLjQ0NS4zNDV6bTYuOTM4LTIxLjM2Yy41NjguMDczLjk4OC4zNDUgMS4zMzQuNzkuMzIuNDQ1LjQ0NC45MzguMzcgMS40ODItLjA3NC41NDMtLjMyLjk4Ny0uNzY1IDEuMzA4LS40NDYuMzItLjk0LjQ0NS0xLjQ4My4zNy0uNTQzLS4wNzQtLjk4Ny0uMzItMS4zMzQtLjc0LS4zMi0uNDQ0LS40Ny0uOTM4LS4zOTUtMS40ODIuMS0uNTY4LjM0Ny0uOTg4Ljc5Mi0xLjMzMy40NDQtLjM0Ny45MzctLjQ3IDEuNDgtLjM5NnptLTYuOTM4IDEuMTM2di0uNzRjLjA1LjIyLjA1LjQ0NCAwIC42NjV2LjA3NXptNC4wMjUgMjQuOTlsLS45MTMtNC4zNDctMy4xMTItLjQydi0yLjg0bDIuNDQ1LjM0Ny0xLjM4NC03Ljg3OC0xLjA2IDIuMTczdi02LjUxOGwxLjEzNS0yIDEuNTguMjIgNS4zMSAyMS44My00LS41NjhNMTExLjY1MyAxMTMuMTE0bC4zNy0yMC41OTUgMy42MzIuMDQ4LS4zMjIgMTcuMzU3IDkuMzA4LjE1LS4wNDggMy4yNi0xMi45NC0uMjJNMTMxLjM1NyAxMTMuMTM2TDEyOS4yMSA5Mi42NGwzLjYzLS4zNyAxLjgyNyAxNy4yNjIgOS4yNi0uOTkuMzIgMy4yMzQtMTIuODkgMS4zNk0xNTMuNTggMTA5LjcyOGwtMi43OS41OTMtNC4yOTUtMjAuMTIzYzIuNjktLjcxNiA0LjU5Mi0xLjE2IDUuNjc4LTEuMzgyLjQ5NS0uMTI0Ljk2My0uMTk4IDEuNDA4LS4yMjJ2My4wNjJjLS4yNy4wMjQtLjU2OC4wNS0uODYzLjEyNC0uNTY4LjEyMi0xLjIzNi4yOTUtMi4wMjUuNTE2bDEuMDEyIDQuODE2Yy41NjgtLjA3MyAxLjEzNi0uMTcyIDEuNzUzLS4zMi4wNSAwIC4wNzUgMCAuMTI0LS4wMjd2Mi44NGMtLjM0NS4wNzQtLjc2NC4xNzItMS4yODQuMjk4bDEuMjg1IDZ6bTMuMzYtLjcxNmwtMy4zNi43MTZ2LTMuODI1bC4xNDguNjY2Yy43NC0uMSAxLjMzMy0uMTc1IDEuNzgtLjI3NCAxLjU4LS4zNDQgMi42OS0uODYzIDMuMzA4LTEuNTU1LjU5Mi0uNjkuNzY1LTEuNjguNDkzLTIuOTM2LS4yNS0xLjEzNi0uNzY2LTEuOS0xLjUzLTIuMjczLS43OTItLjM5My0yLjAyNy0uMzkzLTMuNjgtLjA1LS4xNS4wMjctLjMyLjA3Ni0uNTIuMTI1di0yLjg0YzIuMjQ4LS40OTIgMy4xODctMS42MDUgMi44MTUtMy4zMzMtLjI5NS0xLjMzNC0xLjIzNC0xLjkyNS0yLjgxNC0xLjc3N3YtMy4wNjJjMS40NTctLjE1IDIuNzQuMDI0IDMuNzguNTE3IDEuMzU3LjYxOCAyLjIyIDEuNzU0IDIuNTY3IDMuNDMzLjM0NiAxLjU4LS4yMjIgMy4wMTQtMS43MDMgNC4zMiAyLjY5LjMyMyA0LjMyIDEuODU2IDQuODkgNC41OTQuMzkzIDEuODI4IDAgMy40MzMtMS4xMzggNC44MTUtMS4xNiAxLjM1Ny0yLjg0IDIuMjctNS4wMzYgMi43NE0xNzcuMDQgOTQuNzlsMi4zMiA4LjEyNC0zLjUwNyAxLjAxMy0yLjMyLTguMTIzLTEwLjA1LTkuNzMgMy43NTItMS4wNjIgNy4xMTIgNy4wNjMgMi4yNzItOS43OCAzLjcyNy0xLjA2Mi0zLjMwOCAxMy41NTgiIGZpbGw9IiNmYmQxMTgiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik04Ni4zNjggMTMxLjkwM2wtMy45MjUtMS4wNjMtMi4zNDcgMy40OC0zLjcyOC0uOTg1IDEwLTEzLjU1NXY1LjIzNWwtMi4yNzIgMy41MDUgMi4yNzIuNjE3em0yLjk0IDQuODlsLS4zNzItNC4xOTctMi41NjgtLjY5M3YtMi43NjZsMi4yOTcuNjE4LS40Mi03LjYzLTEuODc3IDIuODl2LTUuMjM1bDIuNjkyLTMuNjMgMS40OC4zOTMgMi40NyAyMS4yMzctMy43MDMtLjk4N00xMTMuMzggMTQwLjYybDEuNjgtMTkuNTM0IDMuNDgzLjI5OC0xLjcwNCAxOS41My0zLjQ2LS4yOTVNMTM1Ljc4IDEyMy4xNjNsLjg4NyA0LjUxOCA2Ljc2NS0xLjMxLjU3IDIuODktNi43NjcgMS4zMzUgMS43MDQgOC43OS0zLjQxLjY2Ni0zLjc1My0xOS4yNiAxMi42OTItMi40Ny41OSAzLjAzNy05LjI4IDEuODA2IiBmaWxsPSIjMWIxODFhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNjUuMDEgMjQuNjY0YzUuMzgyLTMuNjU1IDkuMTg1LTkuMjM2IDEzLjc3OC0xMy44NTMtNS45NzYuMDUtMTIuNDk1IDEuNDU4LTE4LjM5NiAzLjQzNC00IDEuMzMyLTcuNDU3IDMuMTYtMTAuOTQgNi4zOTUtMS4xMSAyLjU2Ny0yLjIyIDUuMTM2LTMuMzU3IDcuNzI3IDUuNTU2LTMuNzc4IDExLjEzNy03LjUzIDE3LjgyOC0xMC44NGwuMDc0IDIuMjczYy00LjQ0NSAzLjMzMy0xMC45MTQgNi45MTMtMTMuNjggMTAuMjQ3IDYuMTI0LjA1IDEwLjQ3LTIuNTQ0IDE0LjY5Mi01LjM4M000MS4xNTYgMTQuNTljMy4xODUtMi4yMjMgNi41NjgtNC40MiAxMC4yNDgtNS42My0zLjI2IDYuNTkyLTYuMDc1IDEyLjc2NS05LjUwNyAxOC41NjgtMi4wMjUgMy44MDMtNi42OTIgNy43NTMtNi4zNyAxMS4yMzUtMi41MiAyLjY5Mi00LjcxOCA1LjQ1Ny02LjgxNSA4LjA3Ni0uMjk3LTEuNDM1LS4yNzMtMi44NjctLjE3My00LjMgNC4yOTUtNi4zOTMgOC40Mi0xMi42NCAxMi4wOTctMTkuMjM1LS4wNS0uOTg4LS41MTgtMS44MjYtLjkxMy0yLjUxOC0zLjE2IDQuMzItNi4xNzMgOS4wNjItOS40OCAxMi45NFYyMy42NWMzLjYyOC0zLjAxIDcuMDEtNi4zNyAxMC45MTItOS4wNk0zNy4zOCA0MS41NTNjMy41My0yLjkzOCA3Ljk1LTYuMDc0IDEyLjE3Mi02LjQ3LTEuMjYgNi4zNzItNy4wNjIgMTAuNzQyLTEwLjU5MyAxNi4xMjUtMi43NjcgNC4yMjMtNS43MDUgNy43MDQtOC4yOTcgMTIuNjY4LS43NjYtLjcxNy0xLjQzMi0xLjc4LTEuNzgtMi45NCA0LjEtNC45NjMgNy41ODItOS43MDMgMTAuNzY4LTE0LjkzNy4xLS43OTItLjE5Ny0xLjU4My0uNjktMi4xLTMuNjggNC42NC02LjcxNyA5LjQ1Ni0xMS4wODggMTMuOTUtLjE3NC0xLjYwNS0uMDc1LTMuMzgyLjI0Ny01LjA2MiAyLjkxMy00LjMyIDUuNTA1LTguMTQ4IDkuMjYtMTEuMjM1TTE2LjI5IDQzLjhjMS43My02LjA3NSA2LjU5NC0xNS43MDQgOS4xNjItMTYuNjE3LjEyMyA4LjQ0NC0uMDc1IDE2LjE5Ny0xLjYwNSAyNC4xLTEuMTYyIDUuOTI1LTIuOTg4IDE1LjUwNy02LjM5NSAxNi45NjIuNDY4LTcuOTI1IDMuOTI1LTE2LjQyIDUuMzgzLTI0LjUxOC0uNTItLjU2OC0xLjQwOC0uMzctMi4zNDcuMzQ1LTIuMzcgNi40OTMtMy43NTIgMTIuNzQyLTUuMzgzIDE5LjQ4LTIuODg4LS42MTUtLjYxNy0xMy40MDUgMS4xODYtMTkuNzUyTTQuNjg1IDY4Ljg0Yy4wNS00LjEgMS4yMzYtOC4zOTYgMi4yNzMtMTIuMSAyLjA3MyA1LjA4NSA1LjIzNCA5LjgyNyA2LjIyMiAxNS4yMS45MTQgNC45ODcuODY0IDEzLjU4LS41OTIgMTUuMjEtMi45MTQtMy45NS0yLjI5Ny05LjI2LTMuNDMzLTEzLjg3Ny0uMzItLjY0Mi0uNzktLjQ0NC0xLjE4Ni0uMTQ4LS44MTUgMi44NC0uNjkgNS43MDQtMS4wODcgOC41NjgtMi4xMjMtLjI3LTIuMjIyLTguNTItMi4xOTgtMTIuODY0TTIxLjA4IDY4LjU5YzEuMzEtMi4xNDcgMi43NjctNC41MTggNC43OTItNS44NzUuOTg4IDYuMzk0IDIuMjQ3IDEyLjg0IDEuNTA3IDE5LjIzNC0uNjQ0IDUuMzgyLTMuNzA3IDEwLjE0Ny01LjU1NyAxNS4yNi0xLjc1NCAxLjExLS42NjctMTEuMTg2IDAtMTYuNzY2LS43NDItLjI0OC0xLjQwOC0uMDUtMiAuNTY2LTEuOTUyIDcuMjEtMS4zMSAyMS4wMTQtMS44NTIgMjEuMzEtMS41MDYtMS4wMzUtMi41MTgtMi4zOTUtMy43NzgtNC4wOTcuOTg4LTMuNTgyIDEuOTUtNi45NCAyLjQyLTEwLjQ5NS40OTUtMy41MDcuMjk2LTcuMTEyLjQyLTEwLjY2NyAxLjI4NC0zLjA2MiAyLjM5NS01LjgwMyA0LjA1LTguNDdNMTEuOTk1IDExNC44NGMtMi41NDQtNS4wODUtNC0xMC42MTctNS4xMTItMTYuMjk2IDQuOTYzIDQuMjk2IDEwLjQ5NSA5Ljk3NiAxNC42MiAxNS44NzcgMy41NzggNS4xMzYgOCAxMi4wMjcgOC4yMiAxNi44OTItNC44ODgtNC41Ny04Ljc5LTEyLjQ5Ni0xMy40MzItMTguNDcyLS40NDMuMTQ4LTEuMjM0LjQ5NS0xLjM1NyAxLjI2IDEuMzM0IDQuMSA0LjA3NCA3LjgwMyA1LjcyOCAxMS44MjgtMi44MTMtLjY2Ny02LjU0LTYuODktOC42NjUtMTEuMDg4TTI0LjkzMyAxMDQuNTJjLS41NjgtNS45NSAxLjY4LTExLjc1NSAzLjk1LTE1LjQzNCAxLjYwNSA3LjA5IDQuNDk0IDEzLjc1NCA2LjA1IDIwLjc5MiAxLjIzNSA1LjUzIDEuNjggMTEuNzA1IDAgMTYuODE0LTIuMzItNi40NDMtMy40OC0xMy41NTUtNC45NjItMjAuMzItLjQ5NC0uMzQ3LTEuMDg2LS4xNzItMS4yNi40OTUtLjA1IDQuOTg2Ljk4OCA5LjcwMiAxLjExMyAxNC42OS0zLjEzNy0xLjMwOC00LjMyLTExLjE2Mi00Ljg5LTE3LjAzN000Ny4zNTUgMTM5LjUzMmMtMy43MjgtNi44ODgtNS4zMzQtMTQuNDk1LTYuODY0LTIyLjQ5NSA0LjEyNCA0LjIgOS4wODcgNy43MyAxMi40MiAxMi41OTUgMy40ODIgNS4xMTIgNi43NDIgMTIuMSA3LjczIDE2Ljg4OC0xLjkuMDI1LTcuMzM1LTkuMzU3LTExLjI2LTEzLjc4LS43MTcuNDIzLTEuMDM3LjMyNC0uOTE1IDEuNTA4IDMuNDU4IDcuNjggMTIuMzIgMTcuMjg0IDEyLjE3NCAyMC0zLjgyOC0xLjU1NS0xMC4xMjQtOC45MTMtMTMuMjg1LTE0LjcxNk0zOS4zMDQgMTU1LjE2M2MtNC4zMi0zLjc1My04LjIyMy02Ljg2NS0xMS42OC0xMi42OTQgNS44NzguODE1IDEyLjEyNCAzLjMzMyAxNy42MyA2LjIyMyA1Ljg1MyAzLjA2MyAxMS40MzQgNi44NjYgMTYuMTUgMTEuMzM0LTEuODc2IDIuNjQ0LTE1LjAxMy03LjQwOC0yMi41Mi0xMS4xNjItLjk4Ny4yNS0xLjQ1NiAxLjAxNC0xLjE4NiAxLjc1NCA1Ljg1NCA0LjIyMyAxMS44MDUgNy41MyAxNy44MDUgMTAuOTEyLTQuNDcuODE2LTExLjc1NS0yLjQ5Mi0xNi4yLTYuMzdNODIuMzkyIDE1OS4zNmMtNC40Mi0zLjU1NS04LjQyLTcuMjgzLTEwLjc0LTEzLjE4NCA1LjguODg4IDEyLjEyMyAzLjM1NiAxNy40NTYgNi41NCA0Ljg5IDIuOTE2IDEzLjg1MyAxMC4yIDEyLjU5NCAxMS40MzYtLjk0IDEuNzc2LTE4LjI3My0xMi43OTItMTkuNDgzLTExLjI2LTEuOTAzIDEuMDYzIDE1LjMzMyAxMS43MDMgMTUuMjEgMTQuMDIzLTQuMzQ2LS4wNzItMTAuNjY3LTQuMDUtMTUuMDM4LTcuNTU1TTgxLjQ1NSAxODAuODY4Yy03LjY1NS0uNDQ1LTE1LjM2LTIuNzQtMjIuMTc0LTYuMTI0IDcuODI4LTEuNzA0IDE1LjU1Ny0zLjI4NCAyMy40Ni0zLjUzMiA1LjExLS4xNzIgMTYuMjQ2LjY2NyAxNS4xODUgMi4yNDguMjk2IDIuMTI0LTMwLjk0LS44NC0yOC44OTIgMi4wMjUtLjk4NiAyLjgxNyAyMC41NDYgMS42NTQgMzEuMDg4IDEuNjA1LjI1IDIuNTk0LTEyLjMyIDQuMTUtMTguNjY1IDMuNzc4TTExNy4yMzMgMTg1LjcwN2M0LjQ0NCAwIDguMDUtNC45MTQgOC4wNS0xMC45MzggMC02LTMuNjA2LTEwLjkxNC04LjA1LTEwLjkxNC00LjQyIDAtOC4wNSA0LjkxMy04LjA1IDEwLjkxMyAwIDYuMDIzIDMuNjMgMTAuOTM3IDguMDUgMTAuOTM3IiBmaWxsPSIjZmJkMTE4IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTE3LjIzMyAxODUuNzA3YzQuNDQ0IDAgOC4wNS00LjkxNCA4LjA1LTEwLjkzOCAwLTYtMy42MDYtMTAuOTE0LTguMDUtMTAuOTE0LTQuNDIgMC04LjA1IDQuOTEzLTguMDUgMTAuOTEzIDAgNi4wMjMgMy42MyAxMC45MzcgOC4wNSAxMC45Mzd6IiBmaWxsPSJub25lIiBzdHJva2U9IiMxYjE4MWEiIHN0cm9rZS13aWR0aD0iNC4xMTU4OTcxMDAwMDAwMDEiIHN0cm9rZS1taXRlcmxpbWl0PSIyLjYxMyIvPjwvc3ZnPg==");
+  height: 12.8px;
+  margin-bottom: 3.6px;
+  margin-top: 3.6px;
+}
+
+.ösk {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjMuODUzIiBoZWlnaHQ9IjI1Ny4xMiIgdmlld0JveD0iMCAwIDI2My44NTMzMyAyNTcuMTIiPjxwYXRoIGQ9Ik0xNzQuOTA4IDE1LjY2NWMyLjY2LS43OTctMS4wNjUtMy4xOSAwLTUuNTgyLjUzLTIuMzk0LTEuODYzLTQuNzg3LjI2NS02LjY0NyA5LjU3NC00Ljc4NyAxMS4xNjcgOS4zMDUgMTkuNjc1IDkuNTcyIDUuMDUyIDYuMzggNC43ODcgMTQuNjI0IDEwLjEwNCAyMS4wMDUtLjUzMiAzLjcyMyAzLjcyNCAyLjM5MiA1LjU4NSA0LjI1NSAyLjEyNi0yLjkyNS0zLjE5Mi0zLjQ1Ny0yLjkyNC02LjExNi43OTgtMy45ODgtMy45OS04LjI0NC41My0xMS4xNjggNS4zMi41MzIgNC43ODUgNi42NDggNi4xMTYgMTAuNjM2LS4yNjcgMS44Ni0yLjM5NSAzLjk4OC0xLjA2NCA2LjExNiAxLjMzIDEuMzMgMy40NTYuNTMyIDQuNzg3LS4yNjcgMi4xMjUtMS41OTUgMS4zMjgtNS4wNTMgNC41MTgtNS44NSAzLjE5NSAyLjkyNSAxMC42NC0xLjA2NCAxMS40MzYgNS41ODQtLjc5NyA2LjkxMyAzLjE5IDEyLjc2NCAyLjEyOCAxOS40MWwtLjI2OCA5LjMwNmMxLjA2NS4yNjcgMS4wNjUtMS4zMyAxLjA2NS0yLjM5MiAyLjY2LTEuMDY0IDMuOTktNS44NSA3LjQ0NS0zLjE5MiAyLjY2IDIuMzkzLjI2NyA2LjkxNSAyLjkyNiA5LjMwOCAyLjkyNS41MyA1LjMxOC0yLjM5MyA3LjcxIDAgMy40NTcgNC43ODUgMS4zMzIgMTIuMjMgMi42NiAxNy41NS0yLjM5MyAzLjE5LTIuMzkzIDcuMTc4LTIuOTI0IDExLjE2NiAwIDMuMTktNC41MiA1Ljg1LTEuODYzIDguNzc1IDMuMTkgMS4wNjIgNS41ODQtMi42NiA4LjI0MyAwIDEuNTk2IDEuODYgMS4zMyA0LjI1NC4yNjggNi4xMTYtMi4zOTYgMy43MjItNi45MTMgNC43ODYtOC43NzYgOC4yNDMgMy40NTYgMCA5LjMwOC02LjY0OCAxMS4xNjcgMGwtLjI2NiAxMS40MzNjLTMuNzIyIDMuOTktNC43ODcgOS4zMDgtOC4yNDMgMTMuNTYtMi42NiAzLjk5LTcuOTc2IDYuNjUtOS4zMDQgMTEuNDM0IDMuMTktLjc5NyA3Ljk3Ni0yLjkyNCAxMS40MzItLjUzIDEuNTkzIDEuNTk0IDEuMzI4IDMuOTg3LjUzIDUuODUtMy40NTQgMy40NTUtOC43NzMgNC41Mi0xMy41NiAzLjQ1NS0xLjMzIDAtMi4xMjYgMS4wNjQtMi45MjQgMS44NnYxLjA2NWMzLjE5MiAwIDcuMTgtLjUzMiAxMC4zNyAxLjMzIDIuMTMgMi42NTggMy45OSA2LjM4IDIuMTMgOS41NzMtNC4yNTYgMy40NTYtOC41MTIgNy43MS05LjU3NSAxMy4yOTQtNi4xMTYgNS41ODMtMTcuNTUgMS4wNjQtMjIuMDcgOC41MSAxLjg2MiAzLjcyMiAxMS40MzYgMS44NiA4Ljc3NyA4LjUwOC0yLjEyOCAzLjE5LTYuMTE3IDEuODYtOC43NzYuNzk3LTMuNzItMS41OTUtNS4wNTItOC43NzUtOS41NzMtNC4yNTMtMS44NiA2LjM4IDYuMTE3IDQuMjUyIDguNTEgOC4yNCAxLjg2MiAxLjMzIDIuMTI4IDQuMjU2IDEuMzI4IDYuMTE2LTIuOTIzIDMuNDU3LTcuNzEgMi45MjUtMTAuNjM1IDYuMzgtOS4zMDQgMy45OS0xOC44NzctMi4xMjUtMjguNzE2LTEuMDYzLTEuODYyIDEuMDY0LS43OTcgMy4xOTIgMCA0LjUyMiAzLjE5IDIuMzkzIDcuOTc3IDEuNTk0IDkuNTczIDYuMTE0LjUzIDIuNjYtLjUzNCA1LjMxOC0zLjE5NCA1Ljg1LTIuMTI1LjI2NS0zLjk4Ny0xLjg2LTQuNzgzLTMuNzIzLS4yNy0yLjkyNS4yNjUtNy40NDUtMy40Ni04LjI0Mi0yLjY1OC0xLjA2NC01Ljg0OC0zLjcyMy04LjUwNy0xLjA2NCAxLjMyOCA0LjUyMiAxMS45NjcgMS41OTYgNy4xOCA5LjA0MiAxLjU5MyAyLjM5MiAyLjEyNCA2LjkxMi0yLjM5MyA2LjkxMi01LjA1MiAwLTkuNTc0IDEuNTk2LTE0LjYyNiAyLjM5My02LjM4LTMuMTktMTMuMjkzLTUuMDUyLTIwLjIwNy02LjY0NmwtLjc5Ny41MzNjMS4wNjMgNS4zMTcgNy40NDUgOC41MDggNi42NDcgMTQuMDktMy4xOSAxLjA2NC01LjMyLTQuMjUzLTkuMzA2LTIuOTIzLTMuOTktNC41Mi0yLjkyNS0xMi40OTgtOS4zMDctMTQuODkyLTguMjQzIDMuMTkzLTkuODM4IDE1LjQyMy0xOS42NzYgMTcuMDItMS4wNjMuMjY1LTIuOTI1LjI2NS0zLjQ1Ny0xLjMzIDMuNDU3LTYuMTE2IDguMjQzLTEyLjIzMiAxNC42MjQtMTUuOTU1di0uNzk3Yy0xMC4xMDMtLjUzMi0xNS40MiAxMy4yOTUtMjYuMzIyIDEwLjktMy4xOS0uNTMtNy4xOC4yNjctOC43NzQtMy40NTYtMS44NjItNS4wNSA0Ljc4NS03LjQ0NCA0LjUyLTExLjk2NC0yLjM5NC0uMjY3LTQuNzg3LjI2NS02LjY0OCAyLjEyNy0uNTMyIDIuNjYtMi4xMjcgNS41ODQtNS4wNTIgNi4xMTYtMS41OTUuNTMtMy40NTcgMS4zMjgtNS4wNTMuNTMtMS44Ni0xLjA2My0yLjM5LTMuMTkyLTEuNTk0LTQuNzg2Ljc5OC0xLjMzIDIuMTI4LTIuMzkyIDEuNTk1LTMuNzIzLTUuMDUtMi4zOTItMTEuNDMyIDMuNzI0LTE1Ljk1LTEuMzI4LTMuMTkzLTMuNzIzLTguNzc2LTIuMzkzLTExLjQzNS03LjQ0NC0xLjA2NC0zLjcyMyAxLjU5NS02LjkxNSA0LjUyLTkuMDQgMi4xMjctMS4wNjQgNC41Mi0xLjMzMiA2LjY0Ny0xLjg2My41MzItMS4zMy41MzItMy43MjItMS41OTUtMy43MjItMy4xOS0xLjMzLTQuMjU0IDIuOTI0LTYuOTEzIDMuMTkyLTMuNzIzLjUzLTguNzc1Ljc5Ni0xMS40MzQtMi42Ni0uNzk4LTMuNDU2IDQuNTItNi45MTMgMC05LjA0Mi00Ljc4Ni0uNTMtMTAuNjM2IDMuOTktMTMuMDMtMi42NTgtMi42NTgtMy4xOS02LjM4LTcuMTgtNC41Mi0xMS40MzQgMy4xOS0uNzk2IDUuODUtMi42NTcgOC43NzUtMy45ODggMS41OTYtLjI2NSAzLjcyMy0xLjMzIDIuMTI4LTMuMTktMS4wNjQtMS41OTUtMS41OTYtMy45ODgtMy45OS00LjI1NC0zLjQ1NSAxLjg2LTcuOTc2IDUuODUtMTEuOTY0IDIuMTI3LTEuODYyLTEuMDY1LTMuOTktMy4xOS0zLjQ1OC01LjU4NCAxLjMzLTQuMjU0IDcuMTgtMy4xOSAxMS40MzQtMy43MjIgMS41OTUgMCAyLjY2IDMuMTkgMy45ODggMS4wNjQtMS44Ni0zLjQ1Ny01LjMxOC02LjM4LTcuNzEtOS4zMDctNi4xMTYtMi45MjUtMTUuMTU3LTQuNTItMTcuMjg0LTEyLjQ5Ny0uMjY2LTIuMTI2LjI2Ni0zLjQ1NiAxLjA2NC01LjA1Mi0uMjY2LTMuNzIzLTYuNjQ4LTguNTA4LS43OTgtMTEuMTY3IDIuMTI3Ljc5NiA0Ljc4NiAyLjEyNiA3LjE4Ljc5NiAxLjg2LTEuNTk2IDEuMzMtNC4yNTQgMS4wNjMtNi4zOC0yLjY2LTEuNTk2LTcuMTgtMS4zMy04LjI0NC01LjMyLS43OTgtMi4zOS0yLjY2LTUuMDUtMS4zMy03Ljk3NSAxLjA2NC0xLjU5NSAzLjcyMi0xLjg2IDUuMDUzLS41MyAyLjY1NyAxLjg2IDUuODUgNC41MiA1Ljg1IDcuOTc1IDEuMDYyIDEuMzMgMS44Ni0uNTMgMy4xOS0uMjY2LS4yNjctLjc5OC0xLjg2Mi0xLjA2NS0uOC0yLjM5NC41MzMtMS4wNjQgMi4xMjgtMS44NiAxLjA2NS0zLjE5LTMuMTktOC41MS0xMi4yMy0xNC42MjUtMTEuNDM0LTI0LjczLjUzMy0zLjk4Ny4yNjctOS4wNCAzLjk5LTExLjE2NyA2LjM4LTMuNzIzIDguNTA4IDEyLjQ5NyAxMy41NiAyLjkyNS43OTgtNC43ODYtNS44NS0zLjE5LTYuMzgtNy40NDYtLjI2Ny0zLjcyMy0yLjM5NC03Ljk3OCAwLTExLjQzNCAxLjA2Mi0yLjEyOCA0LjI1My0yLjEyOCA2LjExNC0xLjA2NCA0LjI1NSAyLjM5MyAyLjY2IDcuNzEyIDQuNTIgMTEuMTY4LjI2NyAxLjg2LTIuNjU4IDMuNzIzLS4yNjUgNS4wNTIgMi4zOSAwIDIuMTI2LTIuNjYgMi45MjQtNC4yNTUgMS44Ni05LjU3Mi01Ljg1LTE3LjAxNy0yLjkyNS0yNi44NTYgNC41Mi0zLjE5IDMuNzItMTQuMzU2IDExLjk2NC0xMC45IDQuMjU0IDIuMTI4LTEuMDYzIDkuODQgNS41ODMgOS4wNCAxLjA2NS0xLjU5NSAxLjg2Mi0zLjk4NyAxLjA2NS02LjExNS01Ljg1LTIuOTI1LTEuMDY1LTguNzc0LS41MzItMTIuNzYyIDEuMzMtMS44NjIgMy4xOS0yLjY2IDUuMzE4LTEuODYyIDMuNDU2IDIuMzk1IDIuMzkzIDcuNDQ3IDEuODYgMTAuOTAzLS41MyAyLjkyNS01LjA1IDMuOTg4LTMuNzIyIDcuNzEgMS4zMyAxLjA2NCAyLjkyNS0uMjY1IDMuOTktLjc5NyA5LjgzNy04LjI0MyA2LjExNC0yMi42IDE1Ljk1My0zMC44NDQgMi42NTgtNy40NDQgMTEuNDMzLTYuNjQ4IDE3LjI4Mi05LjA0IDEuMzMtLjI2NyAyLjEyNy41MyAyLjM5MyAxLjMzIDEuODYgNi4xMTUtNS4wNTIgOS4wNC00LjUyIDE0LjYyMyAzLjk5IDIuNjYgMy45OS0zLjQ1NyA2LjY0Ny01LjA1Mi0uMjY2LTUuODUgNi42NDgtNi45MTMgMTAuMTA0LTkuNTcyIDIuMTI3LS4yNjQgNC41Mi4yNjggNS4zMTggMi4zOTMgMS4wNjQgMy40NTgtNy4xOCA3LjQ0Ni0xLjMzIDguMjQzIDYuNjUtLjUzIDkuMzA2LTEwLjM2OCAxNi43NTItNy43MSA0Ljc4NyAzLjQ1NyA5LjMwNi0yLjY1OCAxNC4zNTguNTMgNS4zMi02LjExNSAxMC45MDMgMy40NiAxNi4yMi0xLjg2IDIuMzkzLjc5NyAyLjkyNCAzLjk4OCA0Ljc4NyA1Ljg1IDMuNzIyIDMuOTkgOC43NzQgNC43ODYgMTMuODI2IDUuNTgzIDEuMzMgMCAxLjU5Ni0xLjU5NSAxLjA2NS0yLjY2LTIuNjU3LTIuMzktNy4xOC43OTgtOS41NzItMi45MjMtMS44Ni0yLjkyNi00LjI1NS01Ljg1LTIuOTI0LTkuNTc0IDEuMDYzLTIuNjU4IDMuOTg3LS43OTcgNS44NDgtLjc5NyA2LjkxNSAzLjQ1NyA1LjMyIDExLjQzMyAxMS40MzYgMTQuODkiIGZpbGw9IiMwZDBiMGEiLz48cGF0aCBkPSJNMTc0LjkwOCAxNS42NjVjMi42Ni0uNzk3LTEuMDY1LTMuMTkgMC01LjU4Mi41My0yLjM5NC0xLjg2My00Ljc4Ny4yNjUtNi42NDcgOS41NzQtNC43ODcgMTEuMTY3IDkuMzA1IDE5LjY3NSA5LjU3MiA1LjA1MiA2LjM4IDQuNzg3IDE0LjYyNCAxMC4xMDQgMjEuMDA1LS41MzIgMy43MjMgMy43MjQgMi4zOTIgNS41ODUgNC4yNTUgMi4xMjYtMi45MjUtMy4xOTItMy40NTctMi45MjQtNi4xMTYuNzk4LTMuOTg4LTMuOTktOC4yNDQuNTMtMTEuMTY4IDUuMzIuNTMyIDQuNzg1IDYuNjQ4IDYuMTE2IDEwLjYzNi0uMjY3IDEuODYtMi4zOTUgMy45ODgtMS4wNjQgNi4xMTYgMS4zMyAxLjMzIDMuNDU2LjUzMiA0Ljc4Ny0uMjY3IDIuMTI1LTEuNTk1IDEuMzI4LTUuMDUzIDQuNTE4LTUuODUgMy4xOTUgMi45MjUgMTAuNjQtMS4wNjQgMTEuNDM2IDUuNTg0LS43OTcgNi45MTMgMy4xOSAxMi43NjQgMi4xMjggMTkuNDFsLS4yNjggOS4zMDZjMS4wNjUuMjY3IDEuMDY1LTEuMzMgMS4wNjUtMi4zOTIgMi42Ni0xLjA2NCAzLjk5LTUuODUgNy40NDUtMy4xOTIgMi42NiAyLjM5My4yNjcgNi45MTUgMi45MjYgOS4zMDggMi45MjUuNTMgNS4zMTgtMi4zOTMgNy43MSAwIDMuNDU3IDQuNzg1IDEuMzMyIDEyLjIzIDIuNjYgMTcuNTUtMi4zOTMgMy4xOS0yLjM5MyA3LjE3OC0yLjkyNCAxMS4xNjYgMCAzLjE5LTQuNTIgNS44NS0xLjg2MyA4Ljc3NSAzLjE5IDEuMDYyIDUuNTg0LTIuNjYgOC4yNDMgMCAxLjU5NiAxLjg2IDEuMzMgNC4yNTQuMjY4IDYuMTE2LTIuMzk2IDMuNzIyLTYuOTEzIDQuNzg2LTguNzc2IDguMjQzIDMuNDU2IDAgOS4zMDgtNi42NDggMTEuMTY3IDBsLS4yNjYgMTEuNDMzYy0zLjcyMiAzLjk5LTQuNzg3IDkuMzA4LTguMjQzIDEzLjU2LTIuNjYgMy45OS03Ljk3NiA2LjY1LTkuMzA0IDExLjQzNCAzLjE5LS43OTcgNy45NzYtMi45MjQgMTEuNDMyLS41MyAxLjU5MyAxLjU5NCAxLjMyOCAzLjk4Ny41MyA1Ljg1LTMuNDU0IDMuNDU1LTguNzczIDQuNTItMTMuNTYgMy40NTUtMS4zMyAwLTIuMTI2IDEuMDY0LTIuOTI0IDEuODZ2MS4wNjVjMy4xOTIgMCA3LjE4LS41MzIgMTAuMzcgMS4zMyAyLjEzIDIuNjU4IDMuOTkgNi4zOCAyLjEzIDkuNTczLTQuMjU2IDMuNDU2LTguNTEyIDcuNzEtOS41NzUgMTMuMjk0LTYuMTE2IDUuNTgzLTE3LjU1IDEuMDY0LTIyLjA3IDguNTEgMS44NjIgMy43MjIgMTEuNDM2IDEuODYgOC43NzcgOC41MDgtMi4xMjggMy4xOS02LjExNyAxLjg2LTguNzc2Ljc5Ny0zLjcyLTEuNTk1LTUuMDUyLTguNzc1LTkuNTczLTQuMjUzLTEuODYgNi4zOCA2LjExNyA0LjI1MiA4LjUxIDguMjQgMS44NjIgMS4zMyAyLjEyOCA0LjI1NiAxLjMyOCA2LjExNi0yLjkyMyAzLjQ1Ny03LjcxIDIuOTI1LTEwLjYzNSA2LjM4LTkuMzA0IDMuOTktMTguODc3LTIuMTI1LTI4LjcxNi0xLjA2My0xLjg2MiAxLjA2NC0uNzk3IDMuMTkyIDAgNC41MjIgMy4xOSAyLjM5MyA3Ljk3NyAxLjU5NCA5LjU3MyA2LjExNC41MyAyLjY2LS41MzQgNS4zMTgtMy4xOTQgNS44NS0yLjEyNS4yNjUtMy45ODctMS44Ni00Ljc4My0zLjcyMy0uMjctMi45MjUuMjY1LTcuNDQ1LTMuNDYtOC4yNDItMi42NTgtMS4wNjQtNS44NDgtMy43MjMtOC41MDctMS4wNjQgMS4zMjggNC41MjIgMTEuOTY3IDEuNTk2IDcuMTggOS4wNDIgMS41OTMgMi4zOTIgMi4xMjQgNi45MTItMi4zOTMgNi45MTItNS4wNTIgMC05LjU3NCAxLjU5Ni0xNC42MjYgMi4zOTMtNi4zOC0zLjE5LTEzLjI5My01LjA1Mi0yMC4yMDctNi42NDZsLS43OTcuNTMzYzEuMDYzIDUuMzE3IDcuNDQ1IDguNTA4IDYuNjQ3IDE0LjA5LTMuMTkgMS4wNjQtNS4zMi00LjI1My05LjMwNi0yLjkyMy0zLjk5LTQuNTItMi45MjUtMTIuNDk4LTkuMzA3LTE0Ljg5Mi04LjI0MyAzLjE5My05LjgzOCAxNS40MjMtMTkuNjc2IDE3LjAyLTEuMDYzLjI2NS0yLjkyNS4yNjUtMy40NTctMS4zMyAzLjQ1Ny02LjExNiA4LjI0My0xMi4yMzIgMTQuNjI0LTE1Ljk1NXYtLjc5N2MtMTAuMTAzLS41MzItMTUuNDIgMTMuMjk1LTI2LjMyMiAxMC45LTMuMTktLjUzLTcuMTguMjY3LTguNzc0LTMuNDU2LTEuODYyLTUuMDUgNC43ODUtNy40NDQgNC41Mi0xMS45NjQtMi4zOTQtLjI2Ny00Ljc4Ny4yNjUtNi42NDggMi4xMjctLjUzMiAyLjY2LTIuMTI3IDUuNTg0LTUuMDUyIDYuMTE2LTEuNTk1LjUzLTMuNDU3IDEuMzI4LTUuMDUzLjUzLTEuODYtMS4wNjMtMi4zOS0zLjE5Mi0xLjU5NC00Ljc4Ni43OTgtMS4zMyAyLjEyOC0yLjM5MiAxLjU5NS0zLjcyMy01LjA1LTIuMzkyLTExLjQzMiAzLjcyNC0xNS45NS0xLjMyOC0zLjE5My0zLjcyMy04Ljc3Ni0yLjM5My0xMS40MzUtNy40NDQtMS4wNjQtMy43MjMgMS41OTUtNi45MTUgNC41Mi05LjA0IDIuMTI3LTEuMDY0IDQuNTItMS4zMzIgNi42NDctMS44NjMuNTMyLTEuMzMuNTMyLTMuNzIyLTEuNTk1LTMuNzIyLTMuMTktMS4zMy00LjI1NCAyLjkyNC02LjkxMyAzLjE5Mi0zLjcyMy41My04Ljc3NS43OTYtMTEuNDM0LTIuNjYtLjc5OC0zLjQ1NiA0LjUyLTYuOTEzIDAtOS4wNDItNC43ODYtLjUzLTEwLjYzNiAzLjk5LTEzLjAzLTIuNjU4LTIuNjU4LTMuMTktNi4zOC03LjE4LTQuNTItMTEuNDM0IDMuMTktLjc5NiA1Ljg1LTIuNjU3IDguNzc1LTMuOTg4IDEuNTk2LS4yNjUgMy43MjMtMS4zMyAyLjEyOC0zLjE5LTEuMDY0LTEuNTk1LTEuNTk2LTMuOTg4LTMuOTktNC4yNTQtMy40NTUgMS44Ni03Ljk3NiA1Ljg1LTExLjk2NCAyLjEyNy0xLjg2Mi0xLjA2NS0zLjk5LTMuMTktMy40NTgtNS41ODQgMS4zMy00LjI1NCA3LjE4LTMuMTkgMTEuNDM0LTMuNzIyIDEuNTk1IDAgMi42NiAzLjE5IDMuOTg4IDEuMDY0LTEuODYtMy40NTctNS4zMTgtNi4zOC03LjcxLTkuMzA3LTYuMTE2LTIuOTI1LTE1LjE1Ny00LjUyLTE3LjI4NC0xMi40OTctLjI2Ni0yLjEyNi4yNjYtMy40NTYgMS4wNjQtNS4wNTItLjI2Ni0zLjcyMy02LjY0OC04LjUwOC0uNzk4LTExLjE2NyAyLjEyNy43OTYgNC43ODYgMi4xMjYgNy4xOC43OTYgMS44Ni0xLjU5NiAxLjMzLTQuMjU0IDEuMDYzLTYuMzgtMi42Ni0xLjU5Ni03LjE4LTEuMzMtOC4yNDQtNS4zMi0uNzk4LTIuMzktMi42Ni01LjA1LTEuMzMtNy45NzUgMS4wNjQtMS41OTUgMy43MjItMS44NiA1LjA1My0uNTMgMi42NTcgMS44NiA1Ljg1IDQuNTIgNS44NSA3Ljk3NSAxLjA2MiAxLjMzIDEuODYtLjUzIDMuMTktLjI2Ni0uMjY3LS43OTgtMS44NjItMS4wNjUtLjgtMi4zOTQuNTMzLTEuMDY0IDIuMTI4LTEuODYgMS4wNjUtMy4xOS0zLjE5LTguNTEtMTIuMjMtMTQuNjI1LTExLjQzNC0yNC43My41MzMtMy45ODcuMjY3LTkuMDQgMy45OS0xMS4xNjcgNi4zOC0zLjcyMyA4LjUwOCAxMi40OTcgMTMuNTYgMi45MjUuNzk4LTQuNzg2LTUuODUtMy4xOS02LjM4LTcuNDQ2LS4yNjctMy43MjMtMi4zOTQtNy45NzggMC0xMS40MzQgMS4wNjItMi4xMjggNC4yNTMtMi4xMjggNi4xMTQtMS4wNjQgNC4yNTUgMi4zOTMgMi42NiA3LjcxMiA0LjUyIDExLjE2OC4yNjcgMS44Ni0yLjY1OCAzLjcyMy0uMjY1IDUuMDUyIDIuMzkgMCAyLjEyNi0yLjY2IDIuOTI0LTQuMjU1IDEuODYtOS41NzItNS44NS0xNy4wMTctMi45MjUtMjYuODU2IDQuNTItMy4xOSAzLjcyLTE0LjM1NiAxMS45NjQtMTAuOSA0LjI1NCAyLjEyOC0xLjA2MyA5Ljg0IDUuNTgzIDkuMDQgMS4wNjUtMS41OTUgMS44NjItMy45ODcgMS4wNjUtNi4xMTUtNS44NS0yLjkyNS0xLjA2NS04Ljc3NC0uNTMyLTEyLjc2MiAxLjMzLTEuODYyIDMuMTktMi42NiA1LjMxOC0xLjg2MiAzLjQ1NiAyLjM5NSAyLjM5MyA3LjQ0NyAxLjg2IDEwLjkwMy0uNTMgMi45MjUtNS4wNSAzLjk4OC0zLjcyMiA3LjcxIDEuMzMgMS4wNjQgMi45MjUtLjI2NSAzLjk5LS43OTcgOS44MzctOC4yNDMgNi4xMTQtMjIuNiAxNS45NTMtMzAuODQ0IDIuNjU4LTcuNDQ0IDExLjQzMy02LjY0OCAxNy4yODItOS4wNCAxLjMzLS4yNjcgMi4xMjcuNTMgMi4zOTMgMS4zMyAxLjg2IDYuMTE1LTUuMDUyIDkuMDQtNC41MiAxNC42MjMgMy45OSAyLjY2IDMuOTktMy40NTcgNi42NDctNS4wNTItLjI2Ni01Ljg1IDYuNjQ4LTYuOTEzIDEwLjEwNC05LjU3MiAyLjEyNy0uMjY0IDQuNTIuMjY4IDUuMzE4IDIuMzkzIDEuMDY0IDMuNDU4LTcuMTggNy40NDYtMS4zMyA4LjI0MyA2LjY1LS41MyA5LjMwNi0xMC4zNjggMTYuNzUyLTcuNzEgNC43ODcgMy40NTcgOS4zMDYtMi42NTggMTQuMzU4LjUzIDUuMzItNi4xMTUgMTAuOTAzIDMuNDYgMTYuMjItMS44NiAyLjM5My43OTcgMi45MjQgMy45ODggNC43ODcgNS44NSAzLjcyMiAzLjk5IDguNzc0IDQuNzg2IDEzLjgyNiA1LjU4MyAxLjMzIDAgMS41OTYtMS41OTUgMS4wNjUtMi42Ni0yLjY1Ny0yLjM5LTcuMTguNzk4LTkuNTcyLTIuOTIzLTEuODYtMi45MjYtNC4yNTUtNS44NS0yLjkyNC05LjU3NCAxLjA2My0yLjY1OCAzLjk4Ny0uNzk3IDUuODQ4LS43OTcgNi45MTUgMy40NTcgNS4zMiAxMS40MzMgMTEuNDM2IDE0Ljg5eiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGQwYjBhIiBzdHJva2Utd2lkdGg9Ii4yODk4NTk0MiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiLz48cGF0aCBkPSJNMTYxLjg4IDMuN2MwIC44LS4yNyAxLjg2My0xLjMzMiAxLjU5Ni0uNTMgMC0xLjA2My0uMjY1LTEuMzMtLjc5Ny0uMjY2LTEuNTk3IDIuMTI3LTIuMTI4IDIuNjYtLjhNODQuNTAyIDUuODI4Yy0xLjMzIDUuMzItNi42NDggOS4zMDctNy43MSAxNC42MjQtMy43MjQgNS44NS0xMi40OTggMi4xMjgtMTQuNjI1IDguNzc1bC0zLjk4OCA5LjMwNmMyLjEyNS00Ljc4NiAxLjU5My0xMy41NiA5LjA0LTE0LjA5Mi43OTYtMS44NiAyLjY1OC0zLjQ1NiAyLjM5Mi01LjMxNy0yLjEyOCAwLTMuOTkgNC41Mi01Ljg1IDIuOTI1IDMuOTktNS44NSA3LjE4LTE0Ljg5IDE1LjQyMi0xNS4xNTYgMS41OTUtMS4zMyA0LjI1NC00LjI1NSA1LjMxOC0xLjA2NE0xMDIuNTgzIDcuOTU1Yy0uMjY2IDEuMzMtMS4wNjQgMi4zOTMtMi4xMjcgMi45MjUtMS41OTYuMjY3LTMuMTkgMC0zLjk4OC0xLjU5Ni0uMjY3LTEuNTk1IDEuMzMtMi45MjQgMi4zOTItMy40NTYgMS4zMy0uMjY1IDQuMjU1IDAgMy43MjMgMi4xMjdNMTkyLjk4OCAxNS40YzMuOTg3IDIuOTI1IDIuOTI1IDcuOTc3IDYuMTE1IDExLjQzNS4yNjUuNzk3LS4yNjYgMS41OTQtMS4wNjMgMi4xMjYtNC41Mi0xLjU5NS43OTctNy40NDQtNC41Mi04LjI0LTQuNTIgMi4zOS02LjM4My0xLjg2My04LjI0My00Ljc4OC0yLjEyOC0yLjM5My01Ljg1Mi0xLjA2NC03LjcxLTMuNzIzIDAtMi4zOTMuMjY1LTQuNTIuNzk2LTYuNjQ3IDUuNTg0IDIuMTI2IDkuODM4IDYuNjQ2IDE0LjYyNSA5LjgzN00xNjcuMTk2IDguNzUyYy0uMjY4LjgtLjUzMyAyLjEyOC0xLjg2IDEuODYzLTEuMDY3LjUzMi0yLjM5NS0uNTMyLTIuMzk1LTEuNTk2LS41My0xLjA2NS41MzItMS44NjMgMS4zMy0yLjM5NSAxLjMzIDAgMi45MjYuNzk4IDIuOTI2IDIuMTI3TTE0OS42NDcgNy42OWMzLjcyIDMuOTkgNy45NzcgOC43NzQgMTMuMjk0IDEwLjEwMy00LjUyIDIuMzk0LTguNzcyLTEuMDY0LTEyLjc2LTIuNjU4LTEuMDY0LjUzLS4yNjcgMS41OTQuMjY0IDIuMTI2IDIuOTI0IDEuODYzIDYuMzgzIDMuNDYgMTAuMTA0IDMuMTkyIDIuNjYgMi4zOTMgNi4xMTUtMS4wNjMgNy43MSAxLjU5Ni01Ljg0NyAxLjg2LTE0Ljg5IDMuNDU2LTE5Ljk0Mi0xLjMzLTMuNzIuMjY2LTYuNjQ1LTEuODYtOS4zMDQtNC4yNTQtMS4wNjUtMi4zOTMtMi42Ni01LjA1Mi0xLjg2My03LjQ0NSAyLjEyNy0xLjg2MyA1LjMxOC0xLjU5NyA3LjQ0NS0uNTMzIDEuNTk0IDEuODYgNC43ODYgMS44NiA1LjA1Mi0uNzk4TTEzMi42MyA5LjgxN2M1LjMxNyA1LjU4My00LjI1NSA4LjUwOC02LjM4MyAxMy4yOTQtOC43NzQgMy4xOTMtMjEuMjcgNS41ODUtMjguNDUtMS44NmwuNTMyLTEuODZjNi45MTItMy40NTggMTMuNTYtNy43MSAyMC43MzgtMTAuOTAzIDQuNzg3IDMuNzIyIDkuMDQtMi4xMjcgMTMuNTYgMS4zM005NS45MzUgMTEuOTQ0Yy41MzMgMS4zMy0uNTMgMS41OTUtMS41OTUgMi4xMjctMS4zMyAwLTMuMTktLjc5Ny0zLjQ1Ny0yLjEyNkw5Mi40OCA5LjU1YzEuNTk1IDAgMi42NTggMS4zMyAzLjQ1NSAyLjM5NCIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0xMTYuNjc1IDEyLjQ3NWMuNzk4IDEuMDY0LS41MyAyLjM5My0xLjU5NSAyLjM5M2gtLjUzMmMtLjUzMi0uNzk3LjI2Ni0zLjE5IDIuMTI3LTIuMzkzIiBmaWxsPSIjMGI5MDVhIi8+PHBhdGggZD0iTTEyMy4zMjMgMTQuNjAzYy00LjI1NSAzLjQ1Ny05LjU3MiA1LjA1Mi0xNS4xNTYgNS44NS0uNTMyLS4yNjYtLjI2Ni0uNzk4LS4yNjYtMS4zMyA0Ljc4Ny0uNzk4IDkuNTczLTIuMzk0IDEzLjU2LTUuMDUybDEuODYzLjUzMyIgZmlsbD0iIzBkMGIwYSIvPjxwYXRoIGQ9Ik03Mi4yNyAxNi4yYy4yNjYuNzk2LS43OTcgMS4wNi0xLjA2MyAxLjU5M2gtLjUzMmMuMjY3LS41MzIuNTMyLTEuODYgMS41OTYtMS41OTRNOTMuNTQyIDE2Ljk5NmMtLjUzMi41MzItMS44Ni43OTctMi45MjUuMjY1aC0uMjY1Yy41My0xLjA2IDIuMzkzLTEuMDYgMy4xOS0uMjY0TTE4Ni4zNCAyMS41MTZjLjI2NS43OTcgMCAyLjEyOC4yNjUgMi45MjUtMi42NTggMi4xMjgtNC41Mi0xLjMzLTYuOTEtMS41OTUtLjguNTMyLS41MzUgMS41OTYtLjI3IDIuMTI3IDcuNDQ2IDMuMTkyIDE0LjM2IDguMjQzIDIwLjc0MyAxNC4wOTNsLjUzIDEuNTk1Yy0zLjQ1NyAxLjA2NS02LjM4Mi0yLjY2LTEwLjEwMy0yLjM5Mi0yLjEyNy4yNjUtNC41Mi41MzItNi4zODMtLjI2Ny0xLjU5My0xLjMyOC4yNjUtNC43ODUtMi42Ni00Ljc4NS0yLjEyNyAwLTUuNTguMjY2LTYuMTEzLTIuNjYgMS4zMjctNC43ODQtOC4yNDQtOC4yNDItMi4zOTUtMTEuOTYzIDIuNjYtLjUzMiA0LjI1NiAyLjM5MiA2LjY1IDEuNTk1bDEuNTkzLTMuNzIzYzIuOTI0IDAgNC4yNTUgMi42NiA1LjA1MiA1LjA1MiIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0xMzUuODIgMjUuNTA0YzMuMTkyIDMuOTkgMy45ODggMTAuOSAxMC4zNyAxMS43IDguMjQzLTEuMDY0IDE2Ljc1LTEuNTk2IDIzLjY2Ni02LjExNWwuNzk2LjI2NWMuNzk3IDEuNTk0LTEuMzMgMi45MjUtMi45MjQgMy43MjItMi4xMjgtLjI2Ni0zLjQ2IDEuMzI4LTQuNzg3IDIuOTI0LjUzMiA1LjA1MyA1LjMyIDYuNjUgOS4wNDMgOS41NzMgNC4yNTMgMS4zMyA4LjI0Mi0xLjg2IDEyLjIzIDAgLjUzNCAzLjE5LTYuOTEyIDMuNzIzLTQuNTE4IDguMjQ0IDIuMzkgMi4zOTIgNS44NDggMy40NTYgOC43NzMgMS4zMy4yNjUgMy45ODggMi4zOTMgNy40NDQgNi4xMTUgOS44MzcgMS4zMyA5Ljg0IDEzLjAzIDUuMzIgMTguODggOS41NzItNy4xOCAyLjY2LTE1LjQyMyA3LjE4LTIyLjA3IDEzLjgyNy03LjcxMiA4Ljc3NC0xNy41NSAxNi43NTItMjcuOTIgMTkuOTQyIDEuMzMtMTEuNDMzIDYuNjQ4LTIyLjg2NiAxNS45NTItMzEuOTA4LTIuMzkzLTEuODYtNS41ODIuNTMyLTguNTA4Ljc5OC05LjU3MiA0Ljc4Ni0xOS40MSA5LjA0LTI5LjUxMiAxMi4yMzIgMi4zOSA0LjUyIDMuOTg3IDkuODM3IDIuOTI0IDE0Ljg5LTIuNjYtMi45MjUtNy43MTMtMS44NjItMTEuMTctMy43MjItNy45NzYtMy40NTgtMTguNjEyLTguNzc1LTIwLjc0LTE4LjM0Ny0xLjMyOC03LjcxMiAxLjA2NC0xNS4xNTcgNy40NDYtMTkuNjc3IDUuMDUyLTQuNTIgMTIuNzYzLTQuNzg1IDE4LjYxMy0xLjg2IDYuNjQ3IDQuMjU0IDEwLjEwMyAxMS40MzMgOC4yNDMgMTkuMTQ1bC0yLjM5NCA1LjA1MmM0LjI1My4yNjYgOC41MDctMS44NjIgMTIuNDk3LTMuNDU4IDEwLjEtNy4xOCAyMi4zMzMtMTAuNjM1IDM0LjgzLTkuNTczbC44LS43OTdjLTExLjE3LTE0Ljg5LTI2LjU5Mi0yNC4xOTYtNDIuNTQ0LTMwLjU3N2wtMTUuMTU3LTExLjE2OGMtMTQuNjI0IDEwLjEwNC0zMC4zMTIgMTcuNTUtNDUuMjAyIDI3LjEyLTMuMTktLjI2Ni01Ljg1IDIuMzkzLTYuOTEzIDUuMDUzLTEuMDYzIDQuNzg1LTExLjMgNC4xMjMtNy4zMSAxMS4wMzUtMy4xOTIuNzk4LTkuMzctMS4xNC0xOC45NDMgMi43MiAxLjA5NC0xLjU5NC0zLjQ5Ni0uODYzIDUuMzQ4LTQuNjAzLTQuNzQgMi42NzUtNi4yMTYgMS4yMTctMTAuNDcuOTUyLTEuMDY0LS4yNjctMS44NiAxLjg2LTMuNDU3IDEuMzMtLjc5OC0yLjkyNiAyLjEyNy01LjA1NCAzLjcyMy02LjExNyAyLjEyOCAyLjY2IDUuMDUzIDMuOTkgOC4yNDMgMi42NiAyLjY2LTEuMzMgMy45OS00LjI1NCAzLjcyMy02LjkxNCAxLjA2NC0zLjcyMi02LjM4LTQuNzg1LTMuMTktNy43MS4yNjUtMS4wNjMgMi4zOTItMi4xMjcgMS41OTUtMy43MjMtLjI2NS0xLjA2NC0uNzk3LTIuMTI2LS4yNjUtMy4xOSA0LjUyLTEuODYyIDkuNTcyIDAgMTQuMzU4LTEuMzMgNS41ODQgMS44NjIgMTIuMjMyIDIuMTI3IDE4LjA4MiAxLjMzIDIuNjU4LTIuMTI3IDIuMzkzLTYuNjQ3Ljc5Ny05LjA0LS43OTctMi4xMjctMy43MjMtMi4zOTQtMy43MjMtNC43ODcgMS4zMy0xLjMzIDIuNjU4IDAgMy45ODguMjY1Ljc5NyAzLjk5IDQuNTIgNi4zODMgNy45NzcgNy45NzggMS4zMy4yNjYgMi4xMjctLjUzMiAyLjkyNS0xLjMzLjc5Ny0zLjQ1Ni0xLjU5Ni02LjExNC00LjI1NS03LjE3OC0xLjU5NS0xLjMzLTYuMTE1LjUzLTUuMDUyLTIuNjYgNC4yNTQtMi45MjQgNi42NDggMy4xOSAxMC4zNyA0LjI1NCA2LjY0OCAyLjEyNyAxNC4wOTIuNTMgMTkuOTQyLTMuMTkgNi45MTQtMi45MjUtMS4zMy0xMy4yOTYgNy43MS0xNC4zNiAxLjg2MiAxLjU5Ni0uMjY0IDMuOTg4IDEuMDY1IDUuNTg0IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEzNS44MiAyNS41MDRjMy4xOTIgMy45OSAzLjk4OCAxMC45IDEwLjM3IDExLjcgOC4yNDMtMS4wNjQgMTYuNzUtMS41OTYgMjMuNjY2LTYuMTE1bC43OTYuMjY1Yy43OTcgMS41OTQtMS4zMyAyLjkyNS0yLjkyNCAzLjcyMi0yLjEyOC0uMjY2LTMuNDYgMS4zMjgtNC43ODcgMi45MjQuNTMyIDUuMDUzIDUuMzIgNi42NSA5LjA0MyA5LjU3MyA0LjI1MyAxLjMzIDguMjQyLTEuODYgMTIuMjMgMCAuNTM0IDMuMTktNi45MTIgMy43MjMtNC41MTggOC4yNDQgMi4zOSAyLjM5MiA1Ljg0OCAzLjQ1NiA4Ljc3MyAxLjMzLjI2NSAzLjk4OCAyLjM5MyA3LjQ0NCA2LjExNSA5LjgzNyAxLjMzIDkuODQgMTMuMDMgNS4zMiAxOC44OCA5LjU3Mi03LjE4IDIuNjYtMTUuNDIzIDcuMTgtMjIuMDcgMTMuODI3LTcuNzEyIDguNzc0LTE3LjU1IDE2Ljc1Mi0yNy45MiAxOS45NDIgMS4zMy0xMS40MzMgNi42NDgtMjIuODY2IDE1Ljk1Mi0zMS45MDgtMi4zOTMtMS44Ni01LjU4Mi41MzItOC41MDguNzk4LTkuNTcyIDQuNzg2LTE5LjQxIDkuMDQtMjkuNTEyIDEyLjIzMiAyLjM5IDQuNTIgMy45ODcgOS44MzcgMi45MjQgMTQuODktMi42Ni0yLjkyNS03LjcxMy0xLjg2Mi0xMS4xNy0zLjcyMi03Ljk3Ni0zLjQ1OC0xOC42MTItOC43NzUtMjAuNzQtMTguMzQ3LTEuMzI4LTcuNzEyIDEuMDY0LTE1LjE1NyA3LjQ0Ni0xOS42NzcgNS4wNTItNC41MiAxMi43NjMtNC43ODUgMTguNjEzLTEuODYgNi42NDcgNC4yNTQgMTAuMTAzIDExLjQzMyA4LjI0MyAxOS4xNDVsLTIuMzk0IDUuMDUyYzQuMjUzLjI2NiA4LjUwNy0xLjg2MiAxMi40OTctMy40NTggMTAuMS03LjE4IDIyLjMzMy0xMC42MzUgMzQuODMtOS41NzNsLjgtLjc5N2MtMTEuMTctMTQuODktMjYuNTkyLTI0LjE5Ni00Mi41NDQtMzAuNTc3bC0xNS4xNTctMTEuMTY4Yy0xNC42MjQgMTAuMTA0LTMwLjMxMiAxNy41NS00NS4yMDIgMjcuMTItMy4xOS0uMjY2LTUuODUgMi4zOTMtNi45MTMgNS4wNTMtMS4wNjMgNC43ODUtMTEuMyA0LjEyMy03LjMxIDExLjAzNS0zLjE5Mi43OTgtOS4zNy0xLjE0LTE4Ljk0MyAyLjcyIDEuMDk0LTEuNTk0LTMuNDk2LS44NjMgNS4zNDgtNC42MDMtNC43NCAyLjY3NS02LjIxNiAxLjIxNy0xMC40Ny45NTItMS4wNjQtLjI2Ny0xLjg2IDEuODYtMy40NTcgMS4zMy0uNzk4LTIuOTI2IDIuMTI3LTUuMDU0IDMuNzIzLTYuMTE3IDIuMTI4IDIuNjYgNS4wNTMgMy45OSA4LjI0MyAyLjY2IDIuNjYtMS4zMyAzLjk5LTQuMjU0IDMuNzIzLTYuOTE0IDEuMDY0LTMuNzIyLTYuMzgtNC43ODUtMy4xOS03LjcxLjI2NS0xLjA2MyAyLjM5Mi0yLjEyNyAxLjU5NS0zLjcyMy0uMjY1LTEuMDY0LS43OTctMi4xMjYtLjI2NS0zLjE5IDQuNTItMS44NjIgOS41NzIgMCAxNC4zNTgtMS4zMyA1LjU4NCAxLjg2MiAxMi4yMzIgMi4xMjcgMTguMDgyIDEuMzMgMi42NTgtMi4xMjcgMi4zOTMtNi42NDcuNzk3LTkuMDQtLjc5Ny0yLjEyNy0zLjcyMy0yLjM5NC0zLjcyMy00Ljc4NyAxLjMzLTEuMzMgMi42NTggMCAzLjk4OC4yNjUuNzk3IDMuOTkgNC41MiA2LjM4MyA3Ljk3NyA3Ljk3OCAxLjMzLjI2NiAyLjEyNy0uNTMyIDIuOTI1LTEuMzMuNzk3LTMuNDU2LTEuNTk2LTYuMTE0LTQuMjU1LTcuMTc4LTEuNTk1LTEuMzMtNi4xMTUuNTMtNS4wNTItMi42NiA0LjI1NC0yLjkyNCA2LjY0OCAzLjE5IDEwLjM3IDQuMjU0IDYuNjQ4IDIuMTI3IDE0LjA5Mi41MyAxOS45NDItMy4xOSA2LjkxNC0yLjkyNS0xLjMzLTEzLjI5NiA3LjcxLTE0LjM2IDEuODYyIDEuNTk2LS4yNjQgMy45ODggMS4wNjUgNS41ODR6IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjI4OTg1OTQyIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbWl0ZXJsaW1pdD0iMiIvPjxwYXRoIGQ9Ik05Ni4yIDIzLjExYy41MzMgMi42Ni0uNTMgNS4zMi0xLjg2IDcuNzEzLTQuMjU0IDEuODYtNy4xOCA1Ljg1LTEwLjYzNiA3Ljk3N2gtNi42NDdjLTMuNDU2IDMuNDU2LTguNTEgMy45ODgtMTMuNTYgMy45ODhsLS44LS43OTdjNi4zODMtNi4xMTUgMTYuNDg3LTcuNDQ1IDIzLjEzNC0xMi43NjNoLTIuNjU4Yy02LjM4IDMuNDU3LTEyLjc2MyA2LjExNi0xOS42NzYgNy45NzcgMC00LjI1NSAyLjM5NC04LjUxIDYuMzgyLTEwLjYzNiA0Ljc4NiAxLjg2IDcuMTgtMy40NTcgMTAuOS00LjUyIDUuMDUzIDAgOS4wNDItMi4xMjggMTQuMDk0LTEuMzNsMS4zMyAyLjM5M00xNDguODQ4IDI1LjUwNGwtLjc5NyAyLjY2YzIuMzk0IDIuOTI1IDcuOTc4LS44IDguMjQzIDMuNDU2LTMuNDU2IDEuODYtNi45MTIgNC43ODUtMTEuMTY2IDMuMTktMi4xMjgtNC43ODUtOS44NC04LjUwNy02LjM4My0xNC4zNTggMy40NTcgMS41OTYgOC4yNDQgMS41OTYgMTAuMTA0IDUuMDUyTTE5NS4zOCAzMS44ODdjLTIuMTI3IDAtMy45ODgtMi42Ni01LjMxNi00LjUyMi0uMjY4LTEuODYuNTMtMy40NTcgMS44Ni00LjUyIDQuNTIuOCAyLjY2IDYuMzgyIDMuNDU3IDkuMDQyTTIxMC41MzcgMjYuMzAzYzAgLjUzMi0uNTMzIDEuMDYyLTEuMDY1IDEuMDYyLTEuMDYtLjI2NS0xLjU5My0xLjU5NC0uNTMtMi4zOTMuNzk3IDAgMS4zMy44IDEuNTk1IDEuMzNNMTI2LjUxNCAyOC4xNjRjLS4yNjcgMS41OTUtMS4wNjQgMy4xOS0yLjY2IDMuNDU2LTEuODYuMjY3LTIuNjYtMS4zMy0zLjQ1Ni0yLjY2LjUzMi0yLjY1NyAzLjk4OC0xLjA2MyA1LjU4NC0yLjEyNWwuNTMyIDEuMzNNNDkuNjcgMjguOTZjLjI2NSAxLjMzLS41MzIgMy4xOTItMi4xMjggMy4xOTItMS41OTUuMjY1LTIuMTI3LTEuMDYzLTEuODYtMi4zOTMtLjI2Ny0xLjg2MyAzLjcyMi00LjI1NiAzLjk4Ny0uOE0xMDUuMjQyIDMwLjgyM3YuNzk3Yy0xLjg2LTEuMDY0LTMuOTktMS41OTUtNC43ODYtMy40NTYgMS44Ni0xLjU5NiAzLjk4OCAxLjA2MyA0Ljc4NiAyLjY2TTEyMC45MyAzMS44ODdjMCAuNzk3LS43OTggMS41OTQtMS4zMyAxLjU5NC0xLjU5NS0uNTMtMi42NTgtMS44Ni0yLjkyNS0zLjQ1NWwuNzk4LTEuMzNjMS41OTUuMjY2IDIuMzkzIDIuMTI4IDMuNDU3IDMuMTkyTTExNi42NzUgMzQuMjhjLTEuNTk1IDEuMDYzLTMuOTg4Ljc5Ny01Ljg1Ljc5Ny0xLjA2Mi0xLjMzLTIuMTI3LTIuMzkzLTIuMzkyLTMuOTg4IDEuNTk1LS44IDQuNzg2IDIuOTIzIDQuMjU0LTEuMzMgMS44Ni41MyAzLjcyMiAyLjY1NyAzLjk4OCA0LjUyTTE2MC41NDggMzEuMDljLS4yNjUuMjY1LS43OTcgMC0xLjA2My4yNjVsLjI2Ni0xLjMzYy4yNjcuMjY2IDEuMDYzLjI2Ni43OTggMS4wNjRNMjExLjYgMzIuNDE3Yy0uNzk2Ljc5OC0xLjMyOC41MzItMi4zOTMuMjY3LS4yNjYtLjUzMi0uMjY2LTEuNTk1LjUzMi0xLjU5NSAxLjA2NC0uMjY3IDIuMzkyLjI2NSAxLjg2IDEuMzI3TTIwMS40OTYgMzQuMjhjLjI2NSAxLjA2My4yNjUgMi4xMjUtLjc5NyAyLjEyNS0xLjA2NS0uMjY1LTIuMTI4LS43OTctMi4zOTUtMS44Ni0uNzk4LTIuMzkzIDMuOTg4LTMuNDU2IDMuMTktLjI2NU00OC4zNCAzNS4wNzdjLjUzMiAxLjA2My0uNzk4IDEuNTk1LTEuMzMgMS44NjItLjc5Ny0uMjY4LTIuMzkyIDAtMi4zOTItMS4zMzIuNTMtMS4zMjggMy4xOS0yLjM5MyAzLjcyMi0uNTNNMTc5LjY5NSAzNi4xNGMuNzk2IDEuODYtMi4xMjggMi4zOTMtMS41OTggMy43MjMgMS44NjMgMCAzLjE5IDEuMzMgMy40NTYgMy4xOSAwIDEuMzMtMS41OTMgMS41OTYtMi42NTggMS44NjItNi4zOCAyLjkyNS04Ljc3NC0yLjkyNC0xMy4yOTUtNS41ODRsLS4yNjUtLjUzYzIuMTI4LTEuNTk2IDUuMzE3LTIuMTI4IDcuNzEtMy45OSAyLjM5NC4yNjcgNS4zMTgtLjc5NyA2LjY1IDEuMzNNMjMwLjIxMiA0MC4xM2MuNTM1IDEuMDYzLjUzNSAzLjcyLTEuNTkzIDMuMTkuMjY0IDIuMzkyIDMuOTg1IDQuMjUzIDIuOTIzIDcuMThsLTUuMDUyLTQuNTItLjUzIDIuMzkyYy00Ljc4Ny0uNTMyLTEuNTk3LTYuMzgtNS4wNTItOC41MSAwLTEuNTk0IDAtMy40NTcgMS4zMjgtNC41MiAyLjEyNyAyLjY2IDcuNDQ1IDAgNy45NzYgNC43ODdNMzkuODMgNDguMTA1Yy0uMjY1IDIuMTI4LTEuMzI4IDMuOTg4LTIuOTI0IDUuNTg0LTEuMzMtMS4wNjUtMS4zMy0zLjE5LTIuMTI3LTUuMDUzLS41MzMgMy4xOS0xLjMzIDYuOTE0LTMuNzIzIDkuMzA3LTUuMzE4LS43OTctLjI2Ni02LjkxMy0xLjU5Ni0xMC4zNyA0LjI1Ni0yLjEyNyAxLjA2NS04Ljc3NCA2LjY1LTkuMzA2IDIuOTI0IDIuMzkyIDEuODYgNi42NDcgMy43MiA5LjgzN005OS4xMjYgMzguNTMzYzAgLjUzMi0uNTMyLjI2Ny0uNzk3LjI2Ny0uMjY3LS41MzIuNTMtLjI2Ny43OTYtLjI2NyIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0xNDkuOTEzIDQ3LjU3M2MxMS4xNjcgNS4wNTIgMjIuODY3IDEwLjM3IDMxLjY0IDIwLjIwOC05LjMwNCAxLjg2NC0xNi43NSA3LjQ0Ny0yNS43OTIgOS44NC0xLjU5Mi05LjA0LTcuOTc1LTIwLjQ3My0xOC4zNDQtMjIuMDctMTAuMzctMi4zOTMtMjAuNDc0IDAtMjcuNjUzIDcuMTgtNS4wNTQgNS4zMTgtNi45MTQgMTIuMjMtNy43MTIgMTkuMTQ1LTUuODUtMS41OTUtMTEuNDMzLTUuMDUyLTE4LjA4LTYuMTE2LS43OTgtMS4wNjUtMS4zMy0yLjEyOC0xLjMzLTMuNDU3IDIuNjYtMy40NTggNi4xMTYgMS4wNjIgOS4zMDctMS4wNjQgMi4xMjgtMS4zMzIgMy45ODgtMy43MjQgMy45ODgtNi4zODMtLjc5Ny0xLjMzIDAtMi42Ni43OTgtMy4xOTIgMTIuMjMtOS44MzcgMjUuNTI2LTE2LjQ4NSAzOS4zNTItMjIuMzM0IDQuNzg2IDIuMTMgOS4wNDIgNi4xMTcgMTMuODI4IDguMjQzIiBmaWxsPSIjZWQxOTJkIi8+PHBhdGggZD0iTTE0OS45MTMgNDcuNTczYzExLjE2NyA1LjA1MiAyMi44NjcgMTAuMzcgMzEuNjQgMjAuMjA4LTkuMzA0IDEuODY0LTE2Ljc1IDcuNDQ3LTI1Ljc5MiA5Ljg0LTEuNTkyLTkuMDQtNy45NzUtMjAuNDczLTE4LjM0NC0yMi4wNy0xMC4zNy0yLjM5My0yMC40NzQgMC0yNy42NTMgNy4xOC01LjA1NCA1LjMxOC02LjkxNCAxMi4yMy03LjcxMiAxOS4xNDUtNS44NS0xLjU5NS0xMS40MzMtNS4wNTItMTguMDgtNi4xMTYtLjc5OC0xLjA2NS0xLjMzLTIuMTI4LTEuMzMtMy40NTcgMi42Ni0zLjQ1OCA2LjExNiAxLjA2MiA5LjMwNy0xLjA2NCAyLjEyOC0xLjMzMiAzLjk4OC0zLjcyNCAzLjk4OC02LjM4My0uNzk3LTEuMzMgMC0yLjY2Ljc5OC0zLjE5MiAxMi4yMy05LjgzNyAyNS41MjYtMTYuNDg1IDM5LjM1Mi0yMi4zMzQgNC43ODYgMi4xMyA5LjA0MiA2LjExNyAxMy44MjggOC4yNDN6IiBmaWxsPSJub25lIiBzdHJva2U9IiNlNjIwMzAiIHN0cm9rZS13aWR0aD0iLjI4OTg1OTQyIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbWl0ZXJsaW1pdD0iMiIvPjxwYXRoIGQ9Ik0xMDUuMjQyIDQwLjkyN2MuMjY2Ljc5OC0uNzk4IDEuMzMtMS4zMyAxLjU5Ni0xLjA2My4yNjUtMS44Ni0uMjY3LTIuMzkzLTEuMzMuMjY1LTEuNTk2IDMuMTktMi4zOTMgMy43MjItLjI2Nk05Mi43NDUgNDIuNTIzbC0uNTMyLjUzYy0xLjA2NC0uMjY1LTEuODYtMS44Ni0xLjA2NC0yLjY1OCAxLjMzIDAgMS4zMyAxLjMzIDEuNTk1IDIuMTI4TTIxNC43OSA0My4zMmMuNTM0LTEuMzMgMS41OTctMi42NiAzLjE5My0yLjEyNyA2LjkxMi41MzItMS4zMyAxNS4xNTYgNy43MTIgOS41NyA1LjMxNyAyLjkyNi0zLjcyNCAxNC4wOTQgNi4xMTMgMTEuOTY2IDIuNjYgNC4yNTQtMS4wNiA4LjI0Mi0uNTMgMTIuNDk3IDEuNTkzIDEuODYyIDIuNjU4IDQuNTIgNS4wNSA1LjU4NCAxLjU5NS0xLjMzIDQuMjU1LTEuMzMgNC43ODggMS4wNjUgMi4xMjUgMy4xOS0yLjY2IDcuNDQ1IDEuMzI4IDkuMDQgMS4wNjMtLjI2NiAyLjEyOC0uNzk4IDMuMTktLjI2NiAzLjk5IDQuMjU0LTUuNTgzIDguNTA3LjUzNCAxMS40MzMuNTMgMy43MjItMi42NiA2LjExNC0yLjkyNyA5LjgzNy0xLjU5My02LjY0Ny0yLjM5LTEzLjU2LTQuNzgzLTE5Ljk0aC0uOGMxLjA2NiA3LjE3NyA0LjI1NiAxNC4zNTYgMi45MjYgMjIuMDY4LTEuODYtMy43MjMtMy43MjItOS41NzMtOC43NzUtMTAuMTA0LTMuNDU3LTIuOTI1IDQuNzg3LTUuNTg0LS43OTYtNy45NzctLjUzNS0uMjY2LTEuMDY1LTEuMDYzLTEuODYzLS43OTgtLjggMS4wNjMgMS4zMjcgMi4zOTMgMCAzLjQ1NS0xLjA2NiAyLjY2LTUuMzE4LTEuODYtMy45OSAyLjEyNyAyLjkyNCAyLjM5NSA2LjY0OCA0Ljc4NyA3LjQ0NSA4LjUxLjguNTMgMS44NjMgMS4zMyAxLjA2NiAyLjM5My0xLjg2MiAxLjg2LTQuNTIgMS4zMy02LjY0Ny41MzIgMC02LjM4Mi05LjA0LTUuODUtOC43NzQtMTIuMjMyIDQuNTE3IDAgOC41MDYtMi42NiAxMC4xLTYuNjQ3IDEuODYyLTMuMTkgMi4xMjctNy43MS0uMjY2LTEwLjYzNi0yLjEyNC0yLjY2LTQuNTE3LTQuMjU1LTcuNDQ1LTUuNTgzIDIuOTI3LS44IDUuODUgMy45ODcgNy4xOC41My0yLjM5NS00LjI1NS00Ljc4NS05LjU3Mi05LjgzNy0xMS43LTEuODYyLjI2Ny00LjUyLjUzMi02LjM4My0uNzk3LTEuNTk2LTEuODYyIDIuMTI4LTIuOTI2Ljc5Ny00Ljc4Ny0yLjY1OC0yLjEyNy03Ljk3Ny0xLjg2LTcuNDQ1LTYuMTE1IDYuMzgzLTMuNzItNy43MS05LjU3IDEuODYtMTMuMDI3IDMuNDYtMS41OTYgNC43ODggNC43ODYgNy45OCAyLjEyN005MC44ODMgNDQuNjVsLS4yNjYgMS4zM2MtMi4zOTIgMS4wNi0zLjQ1Ni0yLjEzLTQuMjUzLTMuNzI0IDEuMzMtMi4xMjcgMy45ODguNzk3IDQuNTIgMi4zOTNNODUuODMgNDQuMTE3Yy0uMjY1Ljc5OC4yNjcgMS41OTUtLjUzIDEuODYyLTEuMzMgMC0yLjY2LTEuNTk3LTMuMTktMi42NiAwLTMuMTkgMy40NTUtLjUzMiAzLjcyLjc5N00xODQuNDc3IDQyLjUyM2MwIC4yNjUtLjI2NS4yNjUtLjUzLjI2NWwtLjI2Ni0xLjA2M2MuMjY3LjI2NiAxLjA2Ny4yNjYuNzk3Ljc5OE0xOTYuNzEgNDMuMzJjLTEuMDYzLS4yNjctMi45MjUuNTMtMy43MjItLjc5N2wuMjY1LS43OThjMS4zMy4yNjYgMi4zOTQuNTMgMy40NTYgMS41OTVNODEuNTc3IDQ0LjkxNWMtLjUzMi4yNjUtLjI2Ni43OTctLjc5OCAxLjA2NC0xLjMzLS4yNjgtMi4zOTQtMS41OTctMi45MjYtMi42NmwuNTMyLTEuMzNjMS4wNjQuNzk4IDIuNjYgMS41OTUgMy4xOSAyLjkyNU01Ny45MTIgNDYuNzc2Yy0xLjMzIDQuMjU1IDIuNjYgNy43MS43OTcgMTEuNDMzLTIuNjYuMjY1LTYuMzggMS4wNjMtNy43MTIgNC41Mi0uNTMgMS4zMy0uNTMgMy43MjIgMCA1LjA1LTIuMTI2IDIuMTI4LTYuMzggMi42Ni05LjA0IDUuMDU1bC00Ljc4NiA0LjUyYy0xLjMzLTIuMzk0IDEuMzMtNS4zMiAyLjM5My03LjcxbDguMjQzLTEzLjI5NmgtMS41OTVjLTQuNTIgNS4zMTUtNy40NDUgMTEuNDMtMTAuOTAyIDE3LjI4MmwtMS4wNjMuNTNDMzQuNzggNjguNTggMzEuNTkgNjEuNCAzNi4zNzUgNTcuNjhjNS4zMTgtLjggMy43MjItNy43MTIgOC43NzQtOS41NzUgNC43ODUuMjY3IDkuMzA2LTguNTA4IDEyLjc2Mi0xLjMzTTc2LjI2IDQ0LjExN3YuNTMyaC0xLjA2NWMtLjI2NS0uNTMzLjc5OC0xLjA2NSAxLjA2NC0uNTMzTTcyLjAwNSA0NC45MTVjLjI2Ni43OTctLjc5OC41MzItMS4wNjMgMS4wNjQtLjUzMyAwLS44LS41MzMtMS4zMy0uOC4yNjYtLjc5NyAxLjg2LTEuMDYzIDIuMzkzLS4yNjVNNjUuMzU3IDQ1LjE4Yy0uMjY1LjgtMS4zMyAxLjA2NC0yLjEyNy44bC0uMjY2LS4yNjhjLjI2Ni0xLjA2MyAxLjg2LTEuNTk1IDIuMzkzLS41MzJNMjAyLjI5MyA0OS45NjhjLjI2OC43OTYtLjc5NyAxLjU5NS0xLjMyOCAxLjU5NUwxODkuNTMgNDkuMTdsLS41My0xLjA2NWMyLjkyMy0zLjE5IDcuOTc1LTEuNTk0IDExLjctLjI2NS41My41MzIgMS44NiAxLjA2NCAxLjU5MyAyLjEyOCIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0yMjcuNTUzIDY3Ljc4Yy4yNjYgMS44NjQgMi4xMjggMy40NiAxLjU5NiA1LjMyLTMuNzI1LTcuNDQ1LTguNzc3LTE0Ljg5LTE0LjA5NC0yMi4wNyA1LjMxNyAzLjk5IDguNzc2IDExLjE2NyAxMi40OTcgMTYuNzUiIGZpbGw9IiMwZDBiMGEiLz48cGF0aCBkPSJNMTg2LjA3NSA1My42OWMuMjY1IDEuMDYzLS41MzIgMS41OTQtMS4zMjggMS44Ni0xLjA2Ni4yNjctMi4zOTQuMjY3LTMuMTk0LS43OTctLjI2NS0xLjMzIDEuMDY2LTEuNTk2IDEuODYzLTIuMTI4IDEuMDYtLjI2NSAxLjg2LjI2NyAyLjY2IDEuMDY0TTIzMi4zNCA1Ni4wODNjLTEuMzI4Ljc5Ny0xLjg2My0xLjA2NC0yLjM5My0xLjg2MmwuMjY1LTEuMDYzYzEuNTk2LjI2NiAyLjM5MyAxLjg2MiAyLjEyOCAyLjkyNk0yMDcuNjEzIDYwLjMzNmMuNTMgMy40NTcgMS41OTQgNi4zODMgMy40NTYgOS4wNCAxLjMyNyAxLjMzIDQuNzg2IDEuODYzIDMuOTg2IDQuNTItNS4wNTItMS4wNi0xMC45LTEuODYtMTYuMjItMy4xOS0xLjg2LS43OTgtLjUzLTIuOTI1LS4yNjQtNC4yNTQtMy4xOS0xLjU5NS02LjkxNS01LjA1Mi02LjkxNS04LjUwOCA0LjI1NiAxLjMzIDYuMzgzLTQuMjU1IDEwLjM3LTEuNTk1IDEuMzMyIDIuMTI1IDMuNDU4IDMuNDU1IDUuNTg2IDMuOTg2TTIzMC43NDcgNTguNzRjLjI2NS4yNjgtLjI3LjUzMy0uNTM1LjhsLS4yNjUtMS4wNjVjLjI2NSAwIC44IDAgLjguMjY2TTI0My41MDcgNjUuMTIzYzAgLjc5Ny0uNzk4IDEuNTk2LTEuNTk0IDEuNTk2LTEuMDYyLjI2NC0xLjU5Ny0uNTMzLTIuMTI4LTEuMDY1IDAtMS4zMy4yNjYtMi42NiAxLjMzLTMuMTkgMS4zMyAwIDIuMTI2IDEuMzI4IDIuMzkyIDIuNjU4TTIxLjc1IDY1LjkyYy41MzIgMS44Ni0uNzk3IDMuNDU3LTIuMzkzIDMuOTg4LTEuMDYzLjUzMy0yLjM5My0uNzk3LTIuMzkzLTIuMTI3IDAtMS41OTMuNzk4LTIuOTIzIDIuMTI3LTMuNzIgMS4zMy0uOCAyLjEzIDEuMDYzIDIuNjYgMS44Nk0yNDMuNzc1IDcwLjQ0Yy4yNjUgMS4zMy0uMjY4IDIuNjYtMS41OTYgMi42Ni0xLjMzLjI2NS0yLjkyNy0xLjA2NC0yLjkyNy0yLjM5My0uMjY1LTEuMDYzLjI2Ny0xLjg2MiAxLjA2My0yLjEyNyAxLjU5NyAwIDIuNjYuNzk3IDMuNDYgMS44Nk0yMy4wOCA3Mi44MzVjLS4yNjYgMS4zMjgtMS4wNjQgMi42NTgtMi4zOTMgMi42NThsLTEuMDY0LS4yNjZjLS41MzItMS4zMy43OTctMi45MjQgMi4xMjgtMy4xOS41MzIuMjY2IDEuMzMuMjY2IDEuMzMuNzk4TTI1My44OCA3NC45NmwtLjI2Ny4yNjdjLS44LS4yNjYtMi42Ni0xLjg2Mi0xLjMzLTIuOTI0IDEuMDYyLjI2NSAxLjg2IDEuNTk0IDEuNTk2IDIuNjU4TTIzOC45ODggNzUuNDkzYzAgLjUzMi0uMjY1IDEuMDYzLS44IDEuMzMtMS4wNiAwLS43OTYtMS4zMy0xLjA2LTEuODYydi0xLjA2M2MuNzk1IDAgMS44Ni43OTggMS44NiAxLjU5Nk0yNTMuMDggNzkuMjE1bC0uMjY3LjI2NmMtMi4xMjYtLjI2NS0zLjQ1NC0yLjM5LTQuMjUyLTQuMjUzbC4yNjctMS4wNjRjMi4zOS4yNjYgMy4xOSAyLjkyNiA0LjI1MyA1LjA1MiIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik01Ny4xMTUgNzcuMDljLTUuODUgMy40NTUtMTIuMjMyIDUuODUtMTcuODE2IDEwLjYzNSAxLjA2NC01LjMyIDcuNTItMTAuNzI4IDEzLjEwNi0xMS43OTIgMS4zMy4yNjcgMy4zOC4zNTggNC43MSAxLjE1NiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNDkuODkgODAuMjhjMCAuNTMtLjI2NiAxLjMyOC0uNzk4IDEuNTk1LTIuMTI3LS41MzItMi45MjQtMi45MjYtNC41Mi00LjI1NSAxLjU5Ni0zLjcyMyA0LjI1NSAxLjMzIDUuMzE3IDIuNjZNMzMuNzE2IDgxLjg3NWMwIDMuMTktLjc5OCA2LjkxMyAxLjU5NSA5LjMwNS01LjU4MyA1LjU4NC05LjMwNSAxMi41LTE0LjA5IDE4LjYxMy0uOC01LjMxOC02LjY1LTExLjQzMy0xLjU5Ny0xNi40ODUtLjUzMi0yLjM5MyAwLTUuMzE3IDEuNTk2LTcuMTggNC43ODUtLjI2NSA1Ljg0OC03LjQ0NCAxMS4xNjYtNi42NDdsMS4zMyAyLjM5NU0yNTAuNjg3IDkwLjkxNWMtMS44Ni0uNTMyLTMuNzIyLTUuMDUyLTYuOTEyLTMuNzIyLTEuMzMtMS41OTYtMS4wNjYtNC4yNTQtLjI2OC01Ljg1IDEuMDY1LS43OTggMi4xMjggMCAyLjkyNi41MzIgMS41OTUgMi45MjUgNC4yNTQgNS44NSA0LjI1NCA5LjA0TTE2Ljk2NCA5MS40NDdjLS4yNjYgMS4zMy0xLjA2MyAxLjU5NC0yLjM5MyAxLjg2LTEuMDYyLS41My0yLjM5LTEuMzI4LTMuNDU1LS4yNjYgMy43MjIgMi4zOTYgMi4zOTMgNi42NSAyLjY1OCAxMC4xMDctLjc5Ny43OTctMi4xMjcuNTMyLTIuNjU4LS4yNjctMi4zOTQtMy4xOS0xLjg2Mi03LjQ0NC0zLjk4OC0xMC45IDIuNjU4LTMuMTkyLTIuMTMtMTEuNyA0Ljc4NS0xMC4xMDUgMi4zOTMgMi45MjUgMy45OSA1Ljg1IDUuMDUyIDkuNTcyTTI1My42MTMgODYuOTI3bC0uNTMzLjUzMmMtLjc5Ny0uNTMzLTEuNTk1LTEuODYzLTEuMDYzLTIuOTI3IDEuMzI4LjI2NyAxLjU5NiAxLjU5NiAxLjU5NiAyLjM5NCIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik04MS4wNDUgODguNTIzYzMuOTkgMTAuMTAyIDEwLjYzNiAxOS4xNDIgMTcuNTUgMjguMTg0bC41My43OTcgNi4xMTcgNy40NDZjLTEuMzMgOS44MzgtOS4zMDcgMTguNjEzLTE4LjM0NyAyMy4xMzMtMTMuMDMgMy43MjItMjkuMjUgMS44Ni0zOS4wODctOC4yNDMtOC41MS0xMS4xNjgtOS41NzItMjguNDUtMi4xMjctNDAuNDE3QzUxIDkwLjkxNSA1OS41MSA4NS44NjMgNjkuMDggODUuMDY1YzMuOTg4LjI2NiAxMC4xMDQtMS4wNjQgMTEuOTY1IDMuNDU4IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTgxLjA0NSA4OC41MjNjMy45OSAxMC4xMDIgMTAuNjM2IDE5LjE0MiAxNy41NSAyOC4xODRsLjUzLjc5NyA2LjExNyA3LjQ0NmMtMS4zMyA5LjgzOC05LjMwNyAxOC42MTMtMTguMzQ3IDIzLjEzMy0xMy4wMyAzLjcyMi0yOS4yNSAxLjg2LTM5LjA4Ny04LjI0My04LjUxLTExLjE2OC05LjU3Mi0yOC40NS0yLjEyNy00MC40MTdDNTEgOTAuOTE1IDU5LjUxIDg1Ljg2MyA2OS4wOCA4NS4wNjVjMy45ODguMjY2IDEwLjEwNC0xLjA2NCAxMS45NjUgMy40NTh6IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjI4OTg1OTQyIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbWl0ZXJsaW1pdD0iMiIvPjxwYXRoIGQ9Ik0xMDUuMjQyIDExNi4xNzVjLTcuNzEtOC4yNDMtMTQuMzYtMTcuMjgzLTE4LjA4LTI3LjEyMiAxMC45IDQuNTIgMTcuNTQ3IDE1LjY4OCAxOC4wOCAyNy4xMjIiIGZpbGw9IiNlZDE5MmQiLz48cGF0aCBkPSJNMTA1LjI0MiAxMTYuMTc1Yy03LjcxLTguMjQzLTE0LjM2LTE3LjI4My0xOC4wOC0yNy4xMjIgMTAuOSA0LjUyIDE3LjU0NyAxNS42ODggMTguMDggMjcuMTIyeiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTYyMDMwIiBzdHJva2Utd2lkdGg9Ii4yODk4NTk0MiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiLz48cGF0aCBkPSJNMjguMTMgOTguMzZoLS41M2wuMjY2LTcuNDQ1Yy43OTggMS44Ni41MzIgNS4wNTIuMjY1IDcuNDQ1IiBmaWxsPSIjMGI5MDVhIi8+PHBhdGggZD0iTTIxNi4zODcgOTkuNDIzYy0uNzk4IDUuMzE4IDYuMTE0IDcuOTc3IDYuMzggMTMuMjk2IDMuNzI0IDMuOTg3IDEzLjAzIDIuOTI0IDExLjk2NiAxMC42MzUtMS4wNjIgMS41OTUtMi45MjUgMi4xMjctNC43ODYgMS41OTUtMi4xMjgtNC43ODYtNi45MTItMy43MjMtMTAuMTA0LTEuODYtMS44NiAxLjU5NC0yLjkyNiAzLjcyLTEuODYgNS44NDggMS41OTQgMi4zOTIgNS4wNTIgMy40NTcgNC43ODQgNi42NDctMTEuNjk4LS43OTctNi42NDYgMTguMDgtMTkuNjc1IDEzLjI5NS03LjE4LTcuNDQ0LTQuMjU1LTE4LjYxMy02LjExNy0yOC4xODUtNS4zMTgtNS4wNS0xMy44MjYtMi42Ni0yMC43NC00Ljc4N2wuMjY2LS43OTdjMTAuMzctNi45MTMgMTkuNjgtMTYuNzUgMzEuMTEzLTIxLjUzNyAzLjcyMi0uMjY1IDUuMDUgNS41ODQgOC43NzQgNS44NSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yMTYuMzg3IDk5LjQyM2MtLjc5OCA1LjMxOCA2LjExNCA3Ljk3NyA2LjM4IDEzLjI5NiAzLjcyNCAzLjk4NyAxMy4wMyAyLjkyNCAxMS45NjYgMTAuNjM1LTEuMDYyIDEuNTk1LTIuOTI1IDIuMTI3LTQuNzg2IDEuNTk1LTIuMTI4LTQuNzg2LTYuOTEyLTMuNzIzLTEwLjEwNC0xLjg2LTEuODYgMS41OTQtMi45MjYgMy43Mi0xLjg2IDUuODQ4IDEuNTk0IDIuMzkyIDUuMDUyIDMuNDU3IDQuNzg0IDYuNjQ3LTExLjY5OC0uNzk3LTYuNjQ2IDE4LjA4LTE5LjY3NSAxMy4yOTUtNy4xOC03LjQ0NC00LjI1NS0xOC42MTMtNi4xMTctMjguMTg1LTUuMzE4LTUuMDUtMTMuODI2LTIuNjYtMjAuNzQtNC43ODdsLjI2Ni0uNzk3YzEwLjM3LTYuOTEzIDE5LjY4LTE2Ljc1IDMxLjExMy0yMS41MzcgMy43MjItLjI2NSA1LjA1IDUuNTg0IDguNzc0IDUuODV6IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjI4OTg1OTQyIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbWl0ZXJsaW1pdD0iMiIvPjxwYXRoIGQ9Ik0yNDkuODkgOTYuNzY0di41MzJsLS43OTgtMS4zM2MuNTMyLS4yNjUuNTMyLjUzMy43OTcuNzk4IiBmaWxsPSIjMGI5MDVhIi8+PHBhdGggZD0iTTEzOS4yNzcgMTA4Ljk5NmMxMC4xMDQgMTcuMjgzIDI5LjUxNCAyMC43NCAzOS4wODYgMzcuNzU3IDMuNDU2IDUuNTgzIDYuOTE0IDEwLjkwMiAxMS4xNjYgMTUuOTUzLTE0LjYyMiAyMC40NzUtMzUuODk1IDM2Ljk2LTU3LjcgNDYuOC0xOS42NzUtMTQuMzYtNDMuMDc0LTIwLjQ3NC02MS40Mi0zNy43NTggMTEuNyAwIDI0Ljk5NC0xLjMzIDM1Ljg5NS01LjMyIDIuMTI4IDYuMzgzIDUuMDUyIDEzLjI5NiAxMS4xNjggMTguMDgzIDcuNzEgNS4wNTMgMTguODggNy40NDYgMjcuOTIgMy40NTcgNy40NDQtMi42NiAxNC42MjQtMTAuMTA0IDE1Ljk1Mi0xNy44MTUgMS41OTYtOC41MS0uMjY1LTE3LjI4NC01Ljg1LTIzLjQtNy45NzUtNy45NzYtMTguODc4LTEwLjEwMy0yOC4xODQtMTUuOTUyIDIuMTI4LTMuNzIzIDUuMDU0LTYuOTE0IDcuOTc4LTEwLjM3LTUuMDUyLTUuMDUzLTkuNTcyLTEwLjkwMi0xMi4yMy0xNy4yODNsMTYuMjIgNS44NSIgZmlsbD0iI2VkMTkyZCIvPjxwYXRoIGQ9Ik0xMzkuMjc3IDEwOC45OTZjMTAuMTA0IDE3LjI4MyAyOS41MTQgMjAuNzQgMzkuMDg2IDM3Ljc1NyAzLjQ1NiA1LjU4MyA2LjkxNCAxMC45MDIgMTEuMTY2IDE1Ljk1My0xNC42MjIgMjAuNDc1LTM1Ljg5NSAzNi45Ni01Ny43IDQ2LjgtMTkuNjc1LTE0LjM2LTQzLjA3NC0yMC40NzQtNjEuNDItMzcuNzU4IDExLjcgMCAyNC45OTQtMS4zMyAzNS44OTUtNS4zMiAyLjEyOCA2LjM4MyA1LjA1MiAxMy4yOTYgMTEuMTY4IDE4LjA4MyA3LjcxIDUuMDUzIDE4Ljg4IDcuNDQ2IDI3LjkyIDMuNDU3IDcuNDQ0LTIuNjYgMTQuNjI0LTEwLjEwNCAxNS45NTItMTcuODE1IDEuNTk2LTguNTEtLjI2NS0xNy4yODQtNS44NS0yMy40LTcuOTc1LTcuOTc2LTE4Ljg3OC0xMC4xMDMtMjguMTg0LTE1Ljk1MiAyLjEyOC0zLjcyMyA1LjA1NC02LjkxNCA3Ljk3OC0xMC4zNy01LjA1Mi01LjA1My05LjU3Mi0xMC45MDItMTIuMjMtMTcuMjgzbDE2LjIyIDUuODV6IiBmaWxsPSJub25lIiBzdHJva2U9IiNlNjIwMzAiIHN0cm9rZS13aWR0aD0iLjI4OTg1OTQyIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbWl0ZXJsaW1pdD0iMiIvPjxwYXRoIGQ9Ik0xNi45NjQgMTA3LjEzNWMuMjY2LjUzIDAgMS4wNjItLjUzMiAxLjA2Mi0uNzk3LjI2Ni0xLjA2My0uMjY1LTEuNTk1LS41MzItLjUzMi0xLjU5NCAyLjM5My0yLjEyNiAyLjEyNy0uNTNNMjU5LjcyOCAxMTAuMzI1YzAgMS44NjItMS41OTYgMy43MjMtMy40NTYgMy43MjMtMS4wNjUtLjI2Ny0xLjg2LTEuMDY0LTIuMzkzLTIuMTI4LS4yNjctMS44NiAxLjU5Mi0yLjY2IDIuNjU3LTMuMTkgMS4zMjggMCAyLjkyNiAwIDMuMTkgMS41OTVNMTkuODkgMTExLjEyM2MtLjUzMyAxLjMzLTIuMTI4IDIuMTI4LTIuOTI2IDMuNDU3LS4yNjYtMS4wNjQuNzk4LTIuOTI1LS41MzItMy45OS41MzItMS41OTQgMy40NTgtMS4wNjIgMy40NTguNTMzTTI0NC41NzIgMTE1LjM3N2MtLjc5NyAwLTEuMzMtMS4zMy0xLjA2NS0yLjM5M2wxLjA2NSAyLjM5M00yNTMuMDggMTE1LjM3N2MtLjI2Ny43OTgtLjUzMiAxLjA2NC0xLjU5NSAxLjMzLS41MzMtLjI2Ni0xLjg2LS41MzItMS4zMy0xLjU5NmwxLjA2Mi0yLjEyNmMxLjA2Ni4yNjcgMS41OTYgMS4zMyAxLjg2MyAyLjM5M002LjMzIDExNi43MDdjLjI2NCAxLjA2NC0uMjY3IDEuNTk2LTEuMDY1IDIuMTI4LS43OTggMC0xLjg2LTEuMDY0LTEuODYtMS44NjMtLjgtMi4zOTIgMi45MjQtMi4zOTIgMi45MjQtLjI2NU0yNDQuODM3IDEyMC40M2MxLjMzIDIuMTI2LS41MzIgNy4xOCAzLjcyNCA2LjY0NyAxLjU5NS4yNjUgMS4wNjQgMi4zOTIuOCAzLjQ1Ni0xLjA2NyAxLjU5Ni0zLjE5MiAzLjE5LTIuMzk1IDUuMzIgMS4zMjguNzk2IDMuNDU1IDEuNTk0IDIuMTI3IDMuNDU1LTEuMDY0IDMuMTktNi4xMTcgNC41Mi00Ljc4NyA3Ljk3NiAxLjA2My44IDEuNTk4IDEuODYzIDEuMDYzIDIuOTI2bC04LjI0IDguMjQyLS41MzMtMS4zM2MxLjA2Mi01LjMxNyA0LjUyLTEwLjM3IDMuNzItMTUuOTUzaC0uNTNjLTIuMTI4IDcuNzEtMy43MiAxNS45NTMtOS44MzggMjIuMDdoLTEuODYzYzEuMzMyLTIuMTMgMy43MjQtNC43ODggMy4xOTMtOC4yNDRsLTEuODYtMS4wNjRjMi42NTgtMy45ODggNC4yNTQtMTAuNjM2IDEuMDYtMTUuMTU2IDYuMTE4LTEuNTk1LTEuNTkzLTcuNzEgMi4xMjgtMTEuNDM0IDUuMzE4LS43OTcgNi4xMTgtMTQuMDkgMTIuMjMyLTYuOTEzTTkuMjUzIDEyMC40M2MtLjI2Ni43OTctLjUzMiAxLjMzLTEuMzMgMS44Ni0uMjY1IDAtLjUzLS4yNjUtLjc5Ni0uNTMtLjI2Ny0xLjA2NSAxLjMzLTIuNjYgMi4xMjYtMS4zM00zNC43OCAxNDQuMDkzYy0xLjA2NCAzLjQ1OC0zLjQ1NyA2LjM4Mi0zLjQ1NyAxMC4xMDQtNC4yNTUtNC4yNTMtNS41ODQtMTAuMzctNy4xOC0xNS45NTMgMC0zLjE5LTEuMDYzLTUuODUtMi42Ni04LjI0My0uNzk2IDAtMS4zMjguOC0xLjA2MyAxLjU5NyAxLjA2NCAxMC4xMDQgNi45MTQgMTguMzQ3IDkuNTczIDI3LjY1MmwtLjc5OC41M2MtMy40NTYtMi4xMjUtNi4xMTUtNS41ODMtOS44MzgtNi42NDUtLjUzMi0zLjk4OC0xLjg2LTcuNDQ2LTQuNzg2LTEwLjEwNS0uNTMtMi42NTggMy43MjQtNC4yNTQgMS41OTctNy4xNzgtMS41OTYtMi4xMjgtNC4yNTUtNC41MjItMi4xMjctNy4xOCAyLjEyNy0xLjA2MyAxLjg2LTMuNDU3IDIuMTI3LTUuMzE3LjI2NS0uOC0xLjU5Ni0xLjg2MiAwLTEuODYyIDguMjQyIDYuMzgyIDExLjQzNCAxNS42ODggMTguNjEyIDIyLjYiIGZpbGw9IiMwYjkwNWEiLz48cGF0aCBkPSJNMTk5LjEwMyAxNTYuODU3bDUuODUgMy4xOWMtMS41OTQgNC4yNTYgMi45MjYgOS4wNC0xLjg2IDEyLjQ5OC0yLjY2IDAtNi4xMTguMjY2LTYuOTE0IDMuNDU2LS44IDEuNTk3LjI2NCAzLjk5LTEuMDY0IDUuMzE4LTIuMTI4LS41My00Ljc4Ny0yLjkyMy02LjkxNS0uNzk1LTEuMDYzIDMuNDU2LTQuMjUzIDMuNzItNi4zOCA2LjY0Ni4yNjQgNi42NDctMi4zOTUgMTIuNDk3LTIuMzk1IDE5LjE0NWwtMy43MiAxLjA2NGMuNzk2LTMuNDU4IDUuMDUtNy45OCAxLjU5Ni0xMS45NjgtMS4wNjQtMS4wNjMtMi45MjctMi45MjQtNC4yNTUtMS4wNjMtMi4zOTMgMi4xMjYtMi4xMjggNS41ODQtMi4xMjggOC43NzMuNTMyIDEuODYyIDIuNjYgMy4xOTIgMS41OTggNS41ODUtOC4yNDYgMi45MjQtMi4zOTQtMTEuNDMzLTExLjQzNS03LjE4LTMuMTkgMy45ODgtNy43MTIgNi45MTMtOC41MDggMTEuOTY3LTIuMzkzIDUuNTgyLTkuMDQzIDYuOTEtMTEuNDM1IDExLjY5OC0xLjg2LTguMjQ0LTEyLjIzLTQuNzg3LTE4LjA4LTUuNTg1LTEuODYyLTEuMDYtLjI2Ni0zLjcyLTEuMDY0LTUuMzE3LTEuMDYzLTMuNDU1LTYuMTE1LTIuNjU4LTUuODUtNi4xMTVsMTQuNjI1IDkuMzA4YzE0LjYyNC0xMS4xNjggMzEuNjQzLTE3LjgxNiA0NC40MDUtMzIuMTc1IDcuNDQ2LTcuOTc4IDE0Ljg5LTE1LjY4OCAyMy45My0yMS4wMDUtMTIuNzYzLTExLjctMTguODc4LTI3LjY1NC0zMy41MDMtMzguNTU2LTEuMDYzLTEuNTk1LTQuMjU1LTEuODYtMy40NTYtNC4yNTQgMTguODggMi45MjUgMjQuNDYgMjMuNCAzNi45NiAzNS4zNjQiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjU5LjQ2MyAxMjMuMzU1Yy4yNjUuNTMtLjI2NyAxLjA2My0uOCAxLjMzLS41My0uMjY3LTEuMzI4LS44LTEuMzI4LTEuNTk2bC41My0uOGMuNTMyIDAgMS4wNjMuNTMzIDEuNTk4IDEuMDY1TTIyOS4xNSAxMjcuMzQyYy4yNjYgMi42NiAxLjU5NyA1LjMyLjc5NyA3LjcxaC0xLjU5NmwtLjI2NiAxLjg2My00LjUxNy0xLjU5NWMyLjY1OC01LjA1My04LjUxLTYuNjQ4LTEuODYzLTEwLjkwMiAyLjkyNS0yLjEyNyA3LjE4LS41MzIgNy40NDUgMi45MjRNMjU5LjE5NiAxMzIuMTNsLS41MzMuMjY1Yy0xLjU5NC0xLjg2Mi0zLjE5LTUuMDUzLTMuOTg3LTcuNDQ1IDIuOTI0Ljc5NyA0LjI1MiA0Ljc4NiA0LjUyIDcuMThNMjU0LjY3NiAxMzAuOGMwIC41MyAwIDEuMDYzLS43OTcgMS4zMy0uOC0uMjY3LTIuMTMtMi4xMy0uNTM1LTIuOTI2LjggMCAxLjU5Ni41MzIgMS4zMyAxLjU5Nk0yNTIuMjgzIDEzNS4zMmMwIC43OTctLjc5OC43OTctMS4zMy43OTctLjc5OC0uNTMyLTEuNTk0LTEuODYtLjUzMy0yLjM5MyAxLjA2NS0uMjY1IDEuODYzLjggMS44NjMgMS41OTZNMTIuMTggMTM4Ljc3NmMtMS4wNjUgMS44Ni0uOCA1LjMxNy4yNjQgNy4xOCAxLjMzLjc5NyAzLjQ1NyAxLjU5NSAzLjcyMyAzLjQ1NiAwIDEuMDYzLS43OTggMi4zOTMtMS44NjIgMS41OTQtMi42Ni0uNzk2LTIuMzkzLTMuOTg4LTQuNTItNC41Mi0xLjA2NCAzLjk5IDIuOTI1IDYuMzgyIDQuNzg2IDkuMzA3LTMuMTkuNTMyLTYuMzgtMi42NTgtOS4wNC00Ljc4Ny0yLjkyNC0yLjkyMy41MzMtNS44NS4yNjYtOS4wNC4yNjctMi4zOTMtMy43MjItMy45ODctMS41OTUtNi4xMTQgMi42NiAxLjMzIDcuMTgtMS4wNjQgNy45OCAyLjkyNCIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0xMzguNDggMTQxLjk2N2MwIDcuOTc3LTQuNzg3IDE0LjM1OC0xMC4zNyAxOS45NDNsLjc5Ni43OTYgMjQuMTk3LjI2NmMuNTMyIDUuNTg0LTIuMzk0IDEwLjM3LTYuMTE1IDE0LjYyNS01LjA1MiA1LjMxOC0xMi4yMzIgNy4xOC0xOS45NDMgNS41ODQtNC41Mi0xLjMyOC05LjA0LTUuMDUtMTAuOS05LjgzNy0yLjM5NC02LjM4MiAwLTEzLjI5NSAzLjcyLTE4LjYxNGwzLjk5LTMuNDU3LS43OTgtLjUzMmMtMTQuODkgOS4wNC0zMS4zNzYgMTYuNzUzLTUwLjI1NCAxNC42MjUtNi42NDgtMS4wNjItMTMuNTYtMS41OTQtMTkuOTQzLTQuMjU0bC0xLjA2MyAxLjMzYzAtMS41OTUgMi4xMjctMy40NTYgMC00Ljc4NWwtLjgtLjUzMmMtMy45ODcgMS4wNjQtNC4yNTIgOS4wNC05LjMwNCA0Ljc4NyAxLjMzLTIuMTMgNC41Mi00LjI1NSA0LjI1NC03LjE4LTEuODYyLTIuMTI3LTQuNTItMi4xMjctNi4zODItMy45OS0uNzk3IDIuMzk1LTMuMTkgMS4zMy00LjUyLjUzMy0xLjg2LTIuMzkzIDEuMDY0LTQuMjU1IDEuMDY0LTYuMTE2IDE0Ljg4OCAxNC44OSAzNS44OTUgMjIuMDcgNTYuNjM1IDE0Ljg5IDExLjk2NC0zLjQ1NiAyMy45My0xMS45NjQgMzAuMzEyLTIzLjEzMiA1LjU4NC43OTggMTAuMzcgMy40NTcgMTUuNDIyIDUuMDUyIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTI1NC45NCAxNDAuOTA0Yy0uNTMuNTMyLTEuMDYgMS4wNjMtMS41OTUuNTMyLTEuMDYyLS44LS4yNjUtMi4xMjguNTM0LTIuMzk1IDEuMzI3LS4yNjQgMS41OTIgMS4wNjYgMS4wNiAxLjg2NE0yNTEuNDg1IDE0NC42MjVjMCAuMjY3LS41MzMuNTMyLS43OTguNTMyLTEuMDYzLS41MzItLjI2Ny0xLjU5NC4yNjUtMS41OTQuNTMzIDAgMS4wNjUuNTMuNTMzIDEuMDYyTTM2LjkwNiAxNTUuMjZ2LjUzM2MtLjc5NyAwLTEuMzMtMS4wNjQtMS4zMy0xLjg2LjUzMy4yNjQgMS4zMy41MyAxLjMzIDEuMzI4TTQzLjU1NCAxNTYuMDZjLjUzLjUzLS4yNjcgMS4wNjMtLjc5OCAxLjMzLTEuMDYzLS4yNjctMi4xMjctLjI2Ny0yLjY2LTEuMzMtLjUzLTIuMzk1IDMuMTktMS41OTYgMy40NTggME0zNS41NzcgMTU4LjQ1MmwtLjc5OC0uNTMyaC43OTd6TTI1NC45NCAxNjAuMzEzYy0uMjY0IDEuMDY0LTEuMzI3IDEuNTk3LTIuMzkyIDIuMTI4LTEuMDYzIDAtMS44Ni0uNzk3LTEuODYtMS44Ni0uMjY4LTEuMzMgMS4wNjMtMS44NjIgMi4xMjUtMi4xMjguOC41MzIgMS44NjMuNzk3IDIuMTI4IDEuODZNMjIzLjMgMTU5LjUxNmMtLjggMi4zOTQgMS41OTUgNi42NDgtMi4zOTIgNi45MTMtMS44NjMuMjY1LTIuMzkzLTIuMzk0LTMuNzI0LTIuNjYtMS4wNjMgMi4xMjcgMS44NiAyLjkyNSAyLjEyNyA0Ljc4Ni0uMjY1IDEuODYuNTMzIDQuNTItMS41OTUgNS4zMmwtMy40NTYtMS4zM2MtMS41OTcgMS4zMy0uNTMyIDQuMjU0LTIuOTI1IDUuMzE3bC0xLjMzLTEuMzNjLTEuMDY0LTUuMDUyLTMuNzIyLTEwLjEwNC0zLjQ1Ny0xNS40MjIgNS41ODQgMS4wNjUgMTEuNy4yNjcgMTYuNzUzLTEuNTk0TTI0LjY3NSAxNjIuNzA2Yy0uNzk3IDAtLjc5Ny0xLjMzLS41MzItMS44Ni43OTguMjY1IDEuMDY0IDEuMDY0LjUzMiAxLjg2TTI0OC4yOTMgMTYxLjkxYy41MzQgMS4wNjItLjc5Ny43OTYtMS4zMjggMS4zM2wtLjc5Ny0uMjY4Yy0uOC0xLjU5NSAxLjg2LTIuOTI0IDIuMTI1LTEuMDYyTTQ2Ljc0NSAxNjkuMzU1Yy0xLjA2NCAyLjEyNi0yLjY2IDQuNTItMS4zMyA2LjkxMyAxLjA2NCAyLjEyNyAzLjQ1NyAyLjEyNyA1LjMxOCAxLjMzLjc5OCAwIDEuMDY0LTEuMDY0IDEuODYtLjUzMy0uNzk2IDcuNDQ2IDcuOTc4IDExLjE3IDYuMzgzIDE4Ljg4LjI2NiAwIC4yNjYgMCAuNTMyLjI2Ni0xLjg2MiAxLjg2LTUuNTg0IDEuMzMtOC4yNDMuNTMzLjc5OC0xLjMzLTEuMDY0LTEuNTk2LTEuODYtMS44NjItMS41OTctNi42NDYtOS4zMDgtNC43ODUtMTIuMjMzLTkuMzA3IDIuOTI1LTQuNzg1LTMuOTg4LTUuODUtNS44NS05LjA0IDMuMTkyLTQuNTItNC4yNTQtMTMuMDMgMy43MjMtMTQuMDkyIDMuNzIzIDIuMzk0IDkuMDQgMi42NiAxMS43IDYuOTE1TTUzLjY1OCAxNjQuODM0YzEuMzMgMS4zMyA0Ljc4NiAzLjQ1NyAyLjkyNSA0Ljc4Ni41MzIgMS4wNjQuNzk3IDIuMzkzLjc5NyAzLjQ1Ny0zLjk4OC0xLjMzLTYuOTEyLTUuNTg0LTguNzc0LTkuMzA2IDIuMTI3LTEuODYgMy45ODggMi42NiA1LjA1MiAxLjA2NCIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0yMzcuMTI3IDE2NS42MzJjLTEuMDYzIDMuMTkgMCA2LjY0NyAzLjQ1NiA3LjE4LjI2OCA0LjUxOC01LjMyIDQuNzg1LTcuNzEyIDcuNzEtLjI2NSAyLjY2IDMuNzI1IDEuODYgMi4xMyA0LjUyLTIuNjYgMi4zOTMtNy43MTIgMi4xMjctOC43NzUgNi4xMTcgMCAxLjA2MiAxLjMyOCAxLjg1OC41MyAyLjkyMy03LjcxLjUzMi04LjI0IDEwLjkwMi0xNS42ODYgMTEuNy0uNTMzLjUzMi0xLjA2NiAxLjMzLTEuODYzIDEuMzMgMS4wNjUtMS44NjIgMi42NTgtMy45OSAxLjMzLTYuMTE2LS43OTgtMi4zOTMtMy4xOTItLjc5OC00LjUyLS43OTggMy4xOS01Ljg1IDQuNTItMTIuNSA4Ljc3NC0xNy44MTctLjI2NS0xLjg2LS43OTctNC43ODYgMS44NjItNC43ODYgNy43MSAxLjMzIDEuODYzLTguNzc0IDguMjQzLTkuNTcyIDUuMzE3IDEuODYyIDguNzc2LTguMjQ0IDEyLjIzMi0yLjM5M001MC40NjggMTcwLjE1MnYuMjY1Yy0uMjY3LjI2Ny0xLjg2Mi0uNTMtMS4zMy0xLjMzLjc5Ny0uMjY0IDEuMzMuNTMzIDEuMzMgMS4wNjUiIGZpbGw9IiMwYjkwNWEiLz48cGF0aCBkPSJNOTguMzMgMTk2Ljc0M2MtMS41OTcuNTMyLTMuOTkgMS4zMjgtNC41MjIgMy40NTYtLjUzIDIuMTI3LS43OTggNC41Mi0uMjY2IDYuOTEySDkyLjQ4YzEuMDYyLTcuOTc3LTYuNjUtMTEuOTY1LTEwLjM3LTE4LjA4bC01LjMyLTEuNTk3Yy0xLjMzLTEuMDYzLTMuMTktNS44NS01Ljg0OC0zLjE5LTEuMzMgMi4zOTItMy40NTggNC41Mi0yLjkyNiA3LjcxLTYuMTE1LTEuODYuNzk4LTkuODM4LTYuMTE1LTExLjQzMi0xLjA2My0xLjU5NiAyLjM5NC02LjExNy0xLjMzLTYuNjQ4bC0yLjM5LTQuNTJjMTEuOTYzIDEyLjIzIDI2LjU4OCAxOC4wOCA0MC4xNSAyNy4zODgiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjMuODc4IDE3My4zNDNjMCAxLjA2My0xLjA2NCAxLjg2LTEuODYyIDIuMTI2LS41MzItLjI2Ni0xLjg2LS4yNjYtMS44Ni0xLjMzIDAtMS4zMy43OTctMi4zOTIgMS44Ni0yLjY2IDEuMDY0LjI2OCAxLjU5NS44IDEuODYyIDEuODYzTTI1MC4xNTUgMTc4LjM5NWMtLjc5NiAxLjA2NC0xLjMyOCAyLjY1OC0yLjkyNCAyLjkyM2wtMS44NjItLjc5NWMtLjUzLjc5NS0uNTMgMS44Ni0xLjMyOCAyLjEyNi0xLjU5NiAwLTIuMTI3LTEuNTk3LTIuMzkzLTIuNjYtLjI2Ni0uNzk4IDAtMS41OTUuNTMyLTIuMTI3IDEuMDYtLjI2NiAxLjU5NS43OTggMi4xMjUgMCAuMjY3LTEuNTk1LTEuMzMtMy4xOSAwLTUuMDUyIDEuODYzLjUzMyAxLjg2MyAzLjQ1OCAzLjcyMyA0LjI1NSAxLjA2NC0xLjg2LTEuMzMtMy4xOS0uNTMyLTUuMDUyIDIuMTI4Ljc5OCAxLjU5NiA0LjI1NSAyLjY2IDYuMzgyIiBmaWxsPSIjMGI5MDVhIi8+PHBhdGggZD0iTTUwLjQ2OCAxODYuOTA0YzEuMzMuNzk3IDIuOTI0IDIuOTI1IDMuOTg4IDQuNTItNS41ODQtMi45MjUtMTAuMTA0LTkuMDQtMTMuODI3LTE0LjA5NGwtMi4xMjgtNS4wNWM1LjA1MiAzLjk4OCA3LjE4IDkuODM3IDExLjk2NiAxNC42MjQiIGZpbGw9IiMwZDBiMGEiLz48cGF0aCBkPSJNMjA4LjY3NiAxODAuNzg4Yy0xLjMzLTIuMzkzLTIuMzkzLTUuMDUyLTMuMTktNy45NzdsLjUzLS41M2MyLjEyOCAyLjEyNiAzLjE5IDUuMzE3IDIuNjYgOC41MDhNMTguMjk0IDE3My44NzVjLjI2Ni41My0uMjY2IDEuMDY0LS43OTggMS4zMy0uNzk4LjUzLTEuODYtLjI2Ni0yLjEyNy0xLjA2NSAwLTEuODYgMi45MjQtMS44NiAyLjkyNC0uMjY1TTIwMC45NjUgMTc3LjMzYy4yNjYuOC0uNzk3IDEuNTk3LTEuNTk3IDEuNTk3LS43OTYuMjY1LTEuMzI4LS43OTgtMS4zMjgtMS4zMyAwLTEuMDYzLjI2NS0yLjEyOCAxLjMyOC0yLjM5My44LjI2NSAxLjg2My43OTcgMS41OTcgMi4xMjYiIGZpbGw9IiMwYjkwNWEiLz48cGF0aCBkPSJNMjI4LjM1IDE3Ny44NjNjLTIuMTI1IDcuNzEtOC41MDcgMTQuODktMTUuMTU0IDIwLjQ3NCAzLjE5LTQuNzg1IDcuNzEyLTguNTA4IDEwLjktMTMuNTYgMS42LTIuMTI4IDIuMTMtNS41ODUgNC4yNTUtNi45MTQiIGZpbGw9IiMwZDBiMGEiLz48cGF0aCBkPSJNMjQyLjE4IDE4Ny45NjdjLTIuNjYuMjY3LTEuMzMtMy43MjMtMi42Ni01LjU4NC0uNzk3LS43OTgtMi45MjUtMS44Ni0xLjA2My0yLjY2IDEuMzI4IDIuMzk0IDMuOTg3IDUuMDUzIDMuNzIyIDguMjQ0TTIwOC4xNDQgMTg3LjE3Yy0uOCA1LjMxOC0yLjY2IDEwLjktNi45MTMgMTQuMzU4IDEuNTk3LTYuNjQ3IDEuMzMtMTQuNjI0IDQuNTItMjEuMDA1IDIuMTMgMS41OTQgMCA1LjA1IDIuMzk0IDYuNjQ2TTIwMi4wMjggMTgxLjU4NWMwIC41MzItLjI2NyAxLjMzLTEuMDYzIDEuNTk2SDE5OS45Yy0uNTMyLTEuMzI4IDEuMzMtMS44NjIgMi4xMjgtMS41OTVNMTk1LjkxMyAxOTEuMTZjLjc5NiA2LjExNS01LjMxOCAxMC4zNjgtOS4wNDIgMTUuMTU1LTEuMDYyLjc5Ny0yLjEyMyAxLjg2LTMuNzIgMS41OTUtMi45MjUtMi45MjUtLjc5Ny03LjQ0NiAwLTEwLjkwMiAwLTQuMjU1LTEuMDY2LTExLjE2OCA1LjMxOC0xMS43Ljc5Ni0uNzk3IDEuMDYtMy45OSAzLjE5LTIuNjYgMi45MjUgMi4xMjggMS4zMyA2LjExNyA0LjI1NSA4LjUxTTE5OS45IDE4OS4yOTdjLS4yNjUgMy40NTYgMCA3LjcxLTIuOTI1IDkuODM4LS43OTYtMS44NiAxLjg2Mi0zLjE5IDIuMTI4LTUuMDUyIDEuMzMtMy45ODgtMi42Ni01LjU4NC0yLjY2LTkuMDQgMS41OTcuNzk3IDMuNzI1IDIuMTI2IDMuNDU3IDQuMjU0TTI0MC4wNSAxOTEuMTZsLS43OTcuNzk2Yy0yLjEyNi0xLjA2NC0yLjkyNC0zLjcyMi0yLjEyNi01Ljg1bC41My0uNzk4YzIuMzk0Ljc5OCAyLjEyOCAzLjcyNCAyLjM5NCA1Ljg1TTg1LjAzNCAxOTYuNDc2Yy43OTcgMS4wNjQuNzk3IDMuMTkgMCA0LjUyLTIuMTI3Ljc5Ny0xLjg2Mi0zLjcyLTQuNTItMi4zOTIgMCAyLjkyNC0zLjQ1NyAyLjY2LTUuNTg0IDIuMzkzLTMuNzIzLTEuMzMtMy40NTctNS41ODUtNC43ODctOC43NzUgMC0yLjM5MyAwLTUuMDUzIDIuMzkzLTYuMTE2IDEuODYyIDYuOTEyIDExLjE2OCAyLjM5MyAxMi40OTggMTAuMzdNMzcuNzA0IDE5MC44OTJjMi4xMjcgMS4zMyA1LjMxOCAwIDYuMzggMi45MjUtNC4yNTMgMS4zMy04LjUwNy0uOC0xMi43Ni0xLjA2NC0xLjA2NSAxLjA2NC41MyAyLjEyOCAxLjMzIDIuMzk0IDIuOTIzIDEuMDY0IDYuNjQ1Ljc5NyA5LjMwNCAyLjEyOC0yLjkyNCAyLjEyNS03LjQ0NCAyLjEyNS0xMS40MzMgMi42Ni0yLjkyNC0uMjY4LTEuODYtMy40Ni0zLjE5LTUuMDU0LTEuNTk2LTEuNTk1LTUuMzItMS4zMjgtNS4wNTMtNC41MiAzLjE5LS41MyA1Ljg1LTIuNjYgOC43NzUtMy45ODggMy4xOS0uNTMyIDMuOTg4IDMuNzIzIDYuNjQ3IDQuNTJNMjM2Ljg2IDE5MS40MjRjMCAuNTMyIDAgMS4wNjQtLjUzIDEuMzMtMS41OTctLjI2Ni0yLjEzLTEuMzMtMi4zOTQtMi42NmwuNTMyLS43OTdjMS4wNiAwIDEuODYgMS4wNjMgMi4zOTMgMi4xMjdNMjMyLjg3IDE5MS45NTZjMCAuNTMyLjI3IDEuNTk2LS41MyAxLjU5Ni0xLjMyOCAwLTIuMzkzLTEuNTk2LTIuOTI0LTIuMzkzdi0xLjU5N2MxLjU5Ni0uNTMgMi45MjQgMS4wNjQgMy40NTUgMi4zOTNNNTcuOTEyIDE5NS40MTJjLTEuNTk1IDAtMy4xOS0xLjU5NS0zLjE5LTMuNDU2IDEuMDYzIDEuMDYyIDIuOTI0IDEuODYgMy4xOSAzLjQ1Nk0xNzUuNzA0IDE5Ny4wMDhjMCAuNzk3LS43OTYgMS4zMy0xLjMzIDEuODYtMS4zMy4yNjctMS4zMy0xLjU5My0xLjA2My0yLjEyNS41MzMtMS4zMyAyLjY2LS44IDIuMzk0LjI2NSIgZmlsbD0iIzBiOTA1YSIvPjxwYXRoIGQ9Ik0xODkuMjY0IDE5Ni43NDNjLS41MyAzLjcyLTIuMTI3IDcuNDQ0LTQuNzg3IDkuODM3IDEuMDY2LTMuMTkgMi4zOTQtNy4xOCA0Ljc4Ny05LjgzNyIgZmlsbD0iIzBkMGIwYSIvPjxwYXRoIGQ9Ik0xMDQuNzEgMjAwLjczYzAgMi4zOTMtMS41OTUgNC4yNTUtMi42NiA2LjM4Mi0uNTMtMy4xOS0xLjA2My02LjY0OC0yLjY1OC05LjU3MiAyLjEyNy4yNjUgMy45OSAxLjU5NSA1LjMxNyAzLjE5TTcwLjk0MiAyMDEuNzkzYzUuMzE3LS4yNjUgOC4yNDIgNC41MjIgMTAuMzcgOC41MSAxLjg2IDEuMzMgNC41MiAyLjM5MyA1LjMxNyA0Ljc4Ni0zLjE5MiA1LjU4Mi03Ljk3Ny0xLjA2NS0xMS43LTMuMTkzLTIuMTI3LTIuMTI1LTQuNTItNC41MTgtNi45MTQtNS44NDhsLS41MzIuMjY1YzMuOTkgNS44NSA5Ljg0IDEwLjEwMyAxNS42ODggMTMuMDI4Ljc5OCAxLjMzLTEuODYgMi4xMjgtLjUzIDMuNzIyLTMuNDU4LjgtOC43NzYgMS4zMy0xMS4xNy0xLjU5NCAwLTIuMTI3LjI2Ny02LjExNS0zLjE5LTUuMzE3LTMuMTkuNzk2LTUuODUtLjc5OC03LjE4LTMuNDU3IDEuMzMtNC43ODYtNS4zMTctNy45NzYtMi4zOTMtMTEuOTY2IDIuNjYtMi4xMjYgNi4xMTUtMi4xMjYgOS4wNC0yLjY2bDMuMTkyIDMuNzIzTTk4Ljg2IDIwMi4zMjdjLjI2NiAxLjMzLTEuMDYzIDEuNTk1LTEuODYyIDEuNTk1LTEuMzI4LS4yNjYtMS4zMjgtMS44NjItMS4wNjMtMi42NiAxLjA2My0xLjU5NSAzLjQ1Ny0uNzk4IDIuOTI1IDEuMDY1TTU1LjUyIDIwNC45ODVjLTEuMDY0IDEuNTk1LTQuMjU1LS4yNjUtNS4wNTIgMS41OTV2My40NTdjLTMuNDU4LS4yNjUtMS44NjItNS4zMTctNS4wNTMtNi42NDggMS44Ni0zLjcyMyA1LjU4My0uMjY3IDguMjQzLjI2Ni43OTguMjY2IDEuMzMuNTMgMS44NiAxLjMzTTIwOC4xNDQgMjAyLjMyN2MwIDUuODQ4LTguNTEgOC41MDgtOC43NzYgMTQuMzU3LTEuMzI4IDIuMTI4LTMuOTg3IDQuMjU1LTYuNjQ1IDIuNjZsLTIuMzk0LS43OTdjLjI2NSAzLjk4OC00LjUyMiA1LjU4Mi03LjQ0NiA3LjE3Ny0xLjMzLS41My0zLjQ2LS4yNjUtNC4yNTUtMi4xMjcgMy45OS0yLjM5MiAxMC42MzQtNS4wNSAxMC45LTEwLjEwMmwtMTEuMTY3IDkuMDRjMS41OTctMy45ODggMy43Mi03Ljk4IDUuODUtMTEuNDM0IDYuMTE2Ljc5NyA3LjE4LTcuNDQ0IDEyLjQ5Ni03LjQ0NCAzLjcyMy0uOCA4LjI0MiAxLjU5NSAxMS40MzQtMS4zM004Ni4zNjQgMjEwLjMwM2wuNzk3IDEuMDY0Yy0zLjcyMi0xLjU5NS00Ljc4NS01Ljg1LTcuOTc2LTcuOTc4IDMuMTktMi4xMjcgMy45ODggMi42NiA2LjY0NyAzLjk5bC41MzQgMi45MjNNMTE1LjA4IDIxMS42MzJjMS4zMyAxLjg2MyA2LjM4IDEuMDY0IDQuMjU0IDUuMDUyLTEuNTk1IDEuMDY0LS43OTggMy40NTctMy4xOSAzLjcyMi00Ljc4Ny0xLjMzLTEwLjkwMi0yLjY1OC0xMi40OTgtOC41MS0xLjg2LTMuNDU1IDIuMzk0LTUuODQ3IDMuNDU3LTguNTA3IDMuNzIyLjc5NyA2LjkxMyA0Ljc4NSA3Ljk3NyA4LjI0Mk0xNjYuMzk3IDIxMy40OTVjMS4wNjYgMS41OTQgMCAzLjQ1NC0xLjA2MiA0Ljc4NC0xLjU5NiAzLjk4OC0zLjk5LS43OTctNi4xMTgtLjUzMi0xLjU5My0uMjY1LTMuNzIuNTMtNS4wNS0uOCAyLjkyNS0yLjY1Ny0uMjY3LTguNzczIDUuMDUtOS41N2wyLjM5NC0xLjMzYzEuMDY2IDIuMzkzLjggNi45MTMgNC43ODcgNy40NDdNOTguMzMgMjA3LjY0NGMtMS41OTcuNzk3LTMuOTkgNC43ODYtNS44NSAxLjg2IDMuMTkgMS4wNjQgMy40NTUtNS4wNSA1Ljg1LTEuODZNMjI3LjU1MyAyMDguNzA4Yy0uNzk3LjI2NS0xLjMyOCAxLjA2NC0yLjM5My43OTctMS4wNjMtLjI2Ni0uNTMtMS4zMyAwLTEuODYuOC0xLjMzIDMuMTktMS4wNjUgMi4zOTMgMS4wNjNNNDQuNjE4IDIwOS41MDVjLjUzIDEuMDYzLS41MzMgMS4wNjMtMS4zMyAxLjMzLS41MzItLjI2Ny0xLjMzLS41MzItMS44Ni0xLjMzIDAtMS44NiAzLjQ1NS0yLjM5MyAzLjE5IDBNMTgwLjIyNSAyMDkuNTA1Yy0yLjEyOCA0LjUyLTUuNTg2IDkuODM4LTEwLjYzNiAxMS4xNjcuNTMtMS4wNjQgMS41OTQtMS44NiAxLjMyNy0yLjkyNC0uNTMtLjUzLTEuMzI4LS4yNjUtMS44Ni41MyAzLjE5Mi0zLjcyMiAzLjk4OC0xMC42MzQgMTAuMzY4LTkuODM3bC44IDEuMDY1TTIxMy4xOTYgMjIwLjQwNmMtMi42NiAwLTIuMTI3LTMuNDU3LTMuOTktNS4wNS0xLjA2MiAwLS43OTUgMi42NTctMi42NTggMS44NmwtMS4zMy0yLjEyN2MxLjA2NS0yLjEzIDMuMTkzLTIuOTI2IDUuMDU0LTMuOTkgMS44NiAyLjM5NSAzLjk4NyA1Ljg1IDIuOTI0IDkuMzA2TTIxNi42NTIgMjIwLjQwNmMtMS44Ni0uNTMtMS4wNjMtMi45MjMtMS41OTYtNC41MmwuMjY4LTEuMDYyYy43OTcgMS41OTQgMi4zOSAzLjcyMyAxLjMyOCA1LjU4Mk0xMDMuOTEyIDIyMC42NzJjNS44NS41MzMgMTAuMzcgNS41ODUgMTIuNzYzIDEwLjM3bDEuMDY0Ljc5OGMtNS44NS0xLjU5NS0xMS43LTMuNzIzLTE3LjAyLTYuMzhsLS41My41M2M1LjA1MiA0LjUyIDExLjk2NSA2LjExNiAxOC4zNDYgOC4yNDQtMy45ODgtMS4zMy04LjI0Mi4yNjUtMTEuOTY1IDEuMzMtMi4xMjYuMjY1LTMuNDU1LTEuODYzLTQuNzg1LTIuOTI1LTQuMjU0Ljc5Ni03LjQ0NS0yLjY2LTEwLjYzNi00Ljc4OC0uMjY3LTMuMTktNS4wNTMtNS41ODQtMi4zOTQtOS4zMDUgMi4zOTMtMi4xMyA1LjU4NC0xLjU5OCA3Ljk3Ny0yLjY2IDMuNDU3LS43OTggNC41MiAzLjE5IDcuMTggNC43ODVNNjMuNzYzIDIyMC42NzJjLjUzLjguMjY1IDIuMzkzLTEuMDY1IDIuMzkzLS43OTctLjI2NS0xLjMzIDAtMi4xMjcuNTMyIDEuMzMgMi4xMjcgNi4xMTcgNC4yNTUgNS4wNTMgNy4xOC0xLjMzLjUzLTMuNDU2IDEuNTk1LTQuNzg2IDAgLjc5OC04Ljc3Ni0xNS40MjItLjc5OC0xMC4xMDQtMTAuOSAzLjE5LTMuOTkgMTAuMzctMi45MjggMTMuMDMuNzk1TTIwNi4yODMgMjI0LjY2Yy0uMjY2LjgtMS41OTYuNTMzLTIuMTI4IDAtLjUzLTEuMDYzLTEuODYyLTIuOTI0LS4yNjYtMy43MiAxLjU5NS41MyAyLjY1OCAyLjM5IDIuMzkzIDMuNzJNMjEwLjUzNyAyMjMuMDY1YzAgLjUzMi0uMjY1IDEuMDY0LS43OTggMS41OTYtMS4wNjQtLjI2NS0xLjU5Ni0xLjMzLTEuNTk2LTIuMTI1bC4yNjctMS4zM2MxLjMzLS4yNjYgMS41OTQgMS4wNjMgMi4xMjcgMS44Nk0yMDAuNyAyMjQuMTNjLS44IDAtMS4zMzItLjUzMy0xLjU5Ny0xLjMzLjUzMi0xLjg2IDIuNjU4LjI2NSAxLjU5NiAxLjMzTTEyNS43MTYgMjI2LjI1N2MuNTMgMi45MjQtMi45MjUgMS41OTUtMy43MjMgMi45MjQtMS41OTUtMS41OTMtMy4xOS0zLjcyLTMuOTg4LTYuMTE1IDIuOTI1LTEuNTk0IDYuOTEzIDAgNy43MSAzLjE5Mk0xNzQuOTA4IDIyNS4xOTNjLjI2NSA0LjI1NC04LjI0NSA0LjI1NC02LjY1IDkuODQtMy43MiA1Ljg0OC0xMC45LTEuMDY1LTE0LjYyMyA0LjI1Mi00LjUyLS43OTctOS41Ny0xLjA2My0xMy44MjctMi45MjUgNy40NDUtLjI2NSAxNS40MjMtLjc5NyAyMS4wMDUtNS4wNTItNS41ODItLjUzMi0xMS4xNjYgMi45MjYtMTcuMjg0IDMuNDU3LTIuNjYtLjUzLTQuNzg2LjUzMi03LjE3OC4yNjcgNi4zOC00LjUyIDEzLjI5NS0xMS4xNjggMjEuODAzLTEwLjEwNCAyLjM5My4yNjUgNS4wNTItLjI2NyA2LjkxNC0xLjg2MyAzLjE5IDEuNTk2IDguMjQtMi45MjQgOS44MzggMi4xMjhNMTM2LjYxNyAyMjUuNDZjLjI2NyAxLjMyOC0xLjg2IDIuMzkyLTIuOTI0IDIuMzkyLS43OTgtLjI2NS0xLjg2Mi0uNTMyLTEuODYyLTEuNTk1LS4yNjQtMS4zMyAxLjU5Ny0xLjU5NiAyLjM5NC0yLjY2IDEuMDY0IDAgMi4zOTMuNTMyIDIuMzkzIDEuODYyTTY4LjI4MiAyMjcuODUydi41MzJjLTEuMDYzLjI2NS0yLjEyNy0xLjA2NC0xLjU5NS0xLjg2Ljc5NyAwIDEuMDY0Ljc5NiAxLjU5NSAxLjMyOE05MC4wODYgMjI4LjkxNmMtMi4zOTMgMy43MjMtNy4xOCAyLjkyNC0xMC45MDIgNC43ODUtLjUzIDAtMS41OTUtLjUzLTEuODYtMS4zMjgtLjUzMy0yLjM5MyAyLjY1OC0yLjM5MyA0LjI1My0zLjE5IDIuNjYgMCA2LjExNi0yLjEzIDguNTEtLjI2Nk0xMzEuMDM0IDIzMi4xMDZsLS41MzIgMi42NmMtMS41OTYuMjY2LTMuOTg4IDAtNC43ODYtMi4xMjcgMC0xLjMzMi43OTgtMi45MjcgMi4zOTMtMi45MjcgMS44Ni0uNzk3IDIuNjU4IDEuMDYzIDIuOTI0IDIuMzkzTTE3NC45MDggMjM4Ljc1M2MtLjI3IDEuMDY0LjUzIDMuNDU4LTEuMzMgMy40NTgtMS44NjMtMS4wNjMtMi4zOTQtMy40NTctMi4zOTQtNS41ODMgMS4wNjUtMy43MjMgMy4xOS43OTcgMy43MjQgMi4xMjZNMTAxLjUyIDI0Mi43NDN2Mi45MjRjLTIuNjYtMi4zOTItNS41ODUtNS41ODQtNi42NDgtOS4wNCAxLjA2My0xLjMzIDIuMTI2LjI2NSAyLjkyNS43OTcuNTMyIDIuMTI4IDIuMTI3IDMuOTg4IDMuNzIyIDUuMzJNODEuMzEgMjM3LjE2Yy0uMjY1LjI2NC0uNzk2IDAtMS4wNjMuMjY0di0xLjA2NGMuNzk4LS4yNjUuNzk4LjI2NyAxLjA2NC44TTE3Ny4zIDIzOS4wMTh2LjhjLS44LS4yNjYtMi4xMjctMi4xMy0xLjMzLTMuNDU4IDEuODYyLS41MyAxLjMzIDEuNTk2IDEuMzMgMi42NThNMTg5IDIzNy4xNmMwIC41My0uMjY3IDEuMDYyLS44IDEuMDYyLS41My4yNjYtLjc5NS0uMjY2LTEuMDYzLS41MzMgMC0uNTMgMS4zMy0xLjg2IDEuODYyLS41M003Ni41MjUgMjM5LjAxOGMtLjI2Ni4yNjctLjc5OCAwLTEuMzMuMjY3bC4yNjYtMS4wNjNjLjUzMyAwIDEuMzMgMCAxLjA2NS43OTZNMTA4LjQzMyAyMzkuMDE4YzAgLjI2Ny0uMjY2LjgtLjUzMi44LS41MyAwLS43OTctLjI2Ni0xLjA2My0uNTMzLS4yNjYtMS4wNjMgMS4zMy0xLjU5NiAxLjU5Ni0uMjY3TTE3MC42NTIgMjQxLjk0NGMuMjY1LjUzMiAwIDEuMzMtLjc5NiAxLjMzLTEuMDY1IDAtMS41OTctMS4wNjMtMi4xMjgtMS41OTUtLjUzMi0zLjE5MiAzLjcyLTIuMzk1IDIuOTI0LjI2NE0xMDMuOTEyIDI0MS4xNDdjLS4yNjYtLjI2Ni0xLjU5NS0uMjY2LS43OTctMS4wNjQuNTMuMjY2IDEuMDY0LjI2Ni43OTcgMS4wNjRNMTYyLjQxIDI0Mi4yMWwtLjI2NiAxLjg2Yy0xLjMzLjUzNC0yLjY2LS43OTUtMy40NTctMS44NmwuNzk4LTIuMTI3YzEuNTk1IDAgMi4xMjYgMS4zMyAyLjkyNiAyLjEyOE05Ny4yNjUgMjQ0LjA3Yy0xLjA2NC0uNTMtMy4xOS0yLjEyNi0yLjY2LTMuNzIgMS4zMy43OTcgMi42NiAyLjEyNiAyLjY2IDMuNzJNMTY2LjM5NyAyNDIuMjFjMCAuNzk4LS4yNjUgMS4zMy0xLjA2MiAxLjU5NS0xLjA2Ni0uNTMtMS41OTYtMi45MjQtLjI2Ni0zLjQ1Ni43OTUgMCAxLjMyNyAxLjA2MiAxLjMyNyAxLjg2TTkzLjU0MiAyNDQuMDdjLTEuMDYzLjUzNC0xLjU5NS0uNTMtMi4zOTMtMS4wNjJsLjUzLS43OTdjMS4wNjUgMCAxLjMzIDEuMDY1IDEuODYyIDEuODZNMTQzLjc5NiAyNTEuNTE2Yy0yLjEyNSAxLjA2NC0zLjcyLTEuMzMtNC41Mi0yLjkyNGwtMS44Ni02LjM4YzMuNDU1IDIuMTI1IDUuMDUyIDUuODQ4IDYuMzggOS4zMDRNMTIwLjEzMiAyNDMuMjc1YzAgMS41OTQtMS41OTYgMS44Ni0yLjY2IDIuOTI0bC0uMjY1LS4yNjZjLjUzMi0xLjA2NSAxLjA2NC0zLjQ1OCAyLjkyNS0yLjY2TTE3MS45ODMgMTMuMDA4bDEuODYgMS44Ni0xLjg2LTEuODZ6TTQ3LjAxIDIyNS40NmwyLjM5NCAyLjM5Mi0yLjM5NC0yLjM5M3oiIGZpbGw9IiMwYjkwNWEiLz48cGF0aCBkPSJNMjE0LjE1MiA5OS4wMjNjMTYuNTUyIDYuMjE2IDIyLjU1Ny0xOC43NjQgNS4xMS0yMi4yMy00LjUxMy0uNTM3LTEwLjI1IDEuMjU1LTEwLjI1IDEuMjU1IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjkzMzMxMDAwMDAwMDAwMDEiIHN0cm9rZS1taXRlcmxpbWl0PSIzLjg2NCIvPjxwYXRoIGQ9Ik00NS4yNTMgODIuOTU1Yy0xNC4wNiA4LjM0Ni0xOS4zMDMgMjAuNjMtMjQuMjAyIDI2LjUzLTMuOTYgNC4wOTItNy40MjggOC40MTYtNy4zOTYgOS42MS4xNSAxLjIyNSA3LjAyMyA2LjQ4OCA4LjkyNiA5LjM4OCA3LjkyMyAxMS42NyAxMS4yMjIgMTUuNDMgMTYuNTgzIDIwLjEzM004Mi43IDY1LjIxMmMwLTMuNjMyIDIuOTQ1LTYuNTc3IDYuNTc3LTYuNTc3czYuNTc3IDIuOTQ1IDYuNTc3IDYuNTc3LTIuOTQ1IDYuNTc3LTYuNTc3IDYuNTc3UzgyLjcgNjguODQzIDgyLjcgNjUuMjF6bS0zMi4zMS0uMDQ0YzAtMy42MzMgMi45NDYtNi41NzcgNi41NzgtNi41NzcgMy42MzMgMCA2LjU3NyAyLjk0NSA2LjU3NyA2LjU3OCAwIDMuNjMyLTIuOTQ0IDYuNTc2LTYuNTc3IDYuNTc2LTMuNjMyIDAtNi41NzctMi45NDQtNi41NzctNi41NzZ6bTE2OS41ODUgNzAuMDcyYzE1Ljg4OC0uODk2IDEyLjQyNSAxMS40MzUgMTEuOTIyIDE0LjI4My0yLjQyNiA3LjY1LTExLjAyIDE2LjYwNS0yOS45MyA5Ljk0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjk5OTk3NTAwMDAwMDAwMDEiIHN0cm9rZS1taXRlcmxpbWl0PSIzLjg2NCIvPjwvc3ZnPg==");
+  height: 16px;
+  margin-bottom: 2px;
+  margin-top: 2px;
+}
+
+.iks {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNzAuMiIgaGVpZ2h0PSI1MjQuNDQiIHZpZXdCb3g9IjAgMCAzNzAuMjAwMDEgNTI0LjQ0Ij48cGF0aCBkPSJNMTgzLjIxLjAwNUMzMC44NzYuMDA1LjA2MyAxMS45NjUuMDYzIDExLjk2NVYxMTUuMnMtMS4yNiAyMC4xNDQgNy41NTQgMjkuNTg3YzguODEzIDkuNDQgOS40NDIgMTQuNDc3IDkuNDQyIDI0LjU1IDAgMTAuMDctLjA2MiAxNjguNy0uMDYyIDE2OC43UzkuOTI0IDUyNC4yMzcgMTg1LjEzIDUyNC40NGMxNzQuNzk1LS4yMDQgMTY4LjAxLTE4Ni40MDMgMTY4LjAxLTE4Ni40MDN2LTE2OC43YzAtMTAuMDczLjYzMi0xNS4xMSA5LjQ0NC0yNC41NSA4LjgxMi05LjQ0MyA3LjU1Mi0yMi4wMzIgNy41NTItMjIuMDMyVjE5LjUyUzMzNC4yODYuMDA0IDE4My4yMS4wMDQiIGZpbGw9IiNjOGM3YzciLz48cGF0aCBkPSJNMjQzLjc4IDQ5Ni41NDdWMTQ1LjkyNGM0My41OSAxLjQwNyA3Mi42OTcgNi4wNCA5MS43ODggOC44MTMgMCAxMC4wNzIuMDU3IDE2MS43NzguMDU3IDE2MS43NzhzMTIuMjA0IDE0Mi44OTctOTEuODQ0IDE4MC4wMzIiIGZpbGw9IiMxYTVkYWQiLz48cGF0aCBkPSJNMjQzLjc4IDQ5Ni41NDdWMTQ1LjkyNGM0My41OSAxLjQwNyA3Mi42OTcgNi4wNCA5MS43ODggOC44MTMgMCAxMC4wNzIuMDU3IDE2MS43NzguMDU3IDE2MS43NzhzMTIuMjA0IDE0Mi44OTctOTEuODQ0IDE4MC4wMzJ6IiBmaWxsPSJub25lIiBzdHJva2U9IiMxYTVkYWQiIHN0cm9rZS13aWR0aD0iMi41MTcyNzA0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMy44NjQiLz48cGF0aCBkPSJNMTI0LjYzOCA0OTYuMDM3di0zNTAuNjJjLTQzLjU4NiAxLjQwNi03Mi42OTQgNi4wNC05MS43ODYgOC44MSAwIDEwLjA3My0uMDU2IDE2MS43NzgtLjA1NiAxNjEuNzc4UzIwLjU5IDQ1OC45MDMgMTI0LjYzOCA0OTYuMDM3IiBmaWxsPSIjMWE1ZGFkIi8+PHBhdGggZD0iTTEyNC42MzggNDk2LjAzN3YtMzUwLjYyYy00My41ODYgMS40MDYtNzIuNjk0IDYuMDQtOTEuNzg2IDguODEgMCAxMC4wNzMtLjA1NiAxNjEuNzc4LS4wNTYgMTYxLjc3OFMyMC41OSA0NTguOTAzIDEyNC42MzggNDk2LjAzN3oiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFhNWRhZCIgc3Ryb2tlLXdpZHRoPSIyLjUxNzI3MDQiIHN0cm9rZS1taXRlcmxpbWl0PSIzLjg2NCIvPjxwYXRoIGQ9Ik0xMzkuNzQ1IDE0NC43ODd2MzU3LjU0NmMxMy40MyAzLjY4MyAyOC4zODMgNS42NjYgNDUuMzg2IDUuNjY2IDE2LjM4IDAgMzAuOTg3LTIuMDIzIDQ0LjAxLTUuNjRsLjAzNy0zNTcuNzNjLTEzLjQ2Mi0uMzA1LTI4LjE4LS40NzMtNDQuMTcyLS40NzMtMTYuNDQ1IDAtMzEuNDkzLjMxNS00NS4yNi42MyIgZmlsbD0iIzIzMWYyMCIvPjxwYXRoIGQ9Ik0xMzkuNzQ1IDE0NC43ODd2MzU3LjU0NmMxMy40MyAzLjY4MyAyOC4zODMgNS42NjYgNDUuMzg2IDUuNjY2IDE2LjM4IDAgMzAuOTg3LTIuMDIzIDQ0LjAxLTUuNjRsLjAzNy0zNTcuNzNjLTEzLjQ2Mi0uMzA1LTI4LjE4LS40NzMtNDQuMTcyLS40NzMtMTYuNDQ1IDAtMzEuNDkzLjMxNS00NS4yNi42M3oiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIzMWYyMCIgc3Ryb2tlLXdpZHRoPSIyLjUxNzI3MDQiIHN0cm9rZS1taXRlcmxpbWl0PSIzLjg2NCIvPjxwYXRoIGQ9Ik0zNDguNDggMTQyLjg5N2M1LjAzNi02LjI5NCA0Ljk5Ny0xOS41MTMgNC45OTctMTkuNTEzVjMwLjg1QzMzMC45NyAyNi4zOSAyODIuNjEyIDE3LjYzIDE4NS43MyAxNy42M2MtOTYuMzE3IDAtMTQ0LjgxMyAzLjc0Mi0xNjcuNDQ0IDguMTgzbC0uMzA0IDk3LjU3cy0uMDA4IDEyLjY4NCA1LjAyOCAxOC45OGMyNC40OTctNC4zMDYgNzAuNTctMTAuMTY2IDE2MC4yLTEwLjE2NiA5MC4xNDUgMCAxNDAuODMzIDYuMzYyIDE2NS4yNyAxMC43IiBmaWxsPSIjMjMxZjIwIi8+PHBhdGggZD0iTTM0OC40OCAxNDIuODk3YzUuMDM2LTYuMjk0IDQuOTk3LTE5LjUxMyA0Ljk5Ny0xOS41MTNWMzAuODVDMzMwLjk3IDI2LjM5IDI4Mi42MTIgMTcuNjMgMTg1LjczIDE3LjYzYy05Ni4zMTcgMC0xNDQuODEzIDMuNzQyLTE2Ny40NDQgOC4xODNsLS4zMDQgOTcuNTdzLS4wMDggMTIuNjg0IDUuMDI4IDE4Ljk4YzI0LjQ5Ny00LjMwNiA3MC41Ny0xMC4xNjYgMTYwLjItMTAuMTY2IDkwLjE0NSAwIDE0MC44MzMgNi4zNjIgMTY1LjI3IDEwLjd6IiBmaWxsPSJub25lIiBzdHJva2U9IiMyMzFmMjAiIHN0cm9rZS13aWR0aD0iMi41MTcyNzA0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMy44NjQiLz48cGF0aCBkPSJNNTQuMTkgOTQuMjA1bC0xNy4wMzcuMjk4LjEyIDYuOTE0Yy4yOSAxNi41OTUgNC4wMjUgMjEuMzcgMjMuOTQgMjEuMDI0IDE1LjYtLjI3IDIyLjYxOC0zLjk2NyAyMi4yNjgtMjQuMDItLjM3My0yMS40MzUtMi42MTItMjIuODk1LTIyLjI4Ny0yNy44NTMtNS40NDYtMS4yOS02Ljc5LTIuMTg4LTYuODgyLTcuNDlsLS4wOTUtNS41MzJjLS4wNy0zLjkxNy4yMjctNS45OTcgNS4wOTUtNi4wODIgNC42NDctLjA4MiA1LjIxLjQ4NSA1LjMzOCA3Ljg2bC4wNyA0LjAzNCAxNi4zNzUtLjI4Ni0uMTc1LTEwLjAyNWMtLjIwMy0xMS42NC01LjU5My0xNi4xNTctMjEuNTI1LTE1Ljg3OC0xNy40OC4zMDQtMjMuMiAyLjM2NC0yMi44NiAyMS44NGwuMDkgNS4wNzJjLjI1OCAxNC44NjUgMy4wODYgMTguMzkgMTcuNDIgMjEuNzEyIDkuNjY4IDIuMjUyIDEwLjg5IDIuNTc3IDEwLjk5IDguMzRsLjE2IDguOTljLjA2IDMuNTctMS4yNDIgNC45NzctNS4zMzYgNS4wNS01LjQyMi4wOTMtNS40Ni0yLjIxMi01LjU2Mi03Ljk3NWwtLjEwNS01Ljk5Mk05NS4yMjQgMTE5LjAyOGwxOC43NDQtLjY4LTEuMzc3LTg2Ljc4LTE4LjY2Ni42NjggMS4zIDg2Ljc5MiIgZmlsbD0iI2RlZGRkZSIvPjxwYXRoIGQ9Ik0xMjkuMjU4IDExNy45MDNsLTEuMzM2LTg3LjQyOCAyNS4xMjctLjQ0YzIxLjgxNS0uMzgyIDI4LjAyMyA0LjAwNSAyOC4zMSAyMC41MmwuMTg1IDEwLjU2NGMuMjM0IDEzLjM1NS00Ljk4NCAxNi40ODMtMTMuNTM4IDE4LjA5IDkuMTA4IDIuMDI3IDEzLjkxNiAzLjUyMiAxNC4xMDUgMTQuMzNsLjE0NSAyMy42OTYtOS40MzMtLjE0Ny0xMC4zODUuMzE0LS42OTYtMjQuNzI0Yy0uMDY0LTMuNjQzLTIuMTc1LTUuMTg1LTkuMDQtNS4wNjVsLTMuNDMuMDYuMjYgMjkuNzMtMTAuMzg3LjMxNC05Ljg5LjE4M3ptMTkuMjczLTcyLjcyN2wuNDggMjcuNDQzIDMuOTIzLS4wN2M3LjIzLS4xMjcgOC40MjMtMi4wOSA4LjMyMy03Ljc5OGwtLjIzLTEzLjIzNmMtLjA4LTQuNDkyLTEuOTU0LTYuNTI1LTYuMzY2LTYuNDQ4bC02LjEzLjEwOCIgZmlsbD0iI2RlZGRkZSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTE5Ni4xMTUgMTE3LjU1bDE4LjI1Ni0uMTQ2VjI5Ljc4OGwtMTguMjU1LS4xOTd2ODcuOTZNMjc2LjkyNSAzNC4zMzVsLTE4Ljc4LTEuMy0xLjMyIDY2Ljc0NGMtLjA1OCAzLjMyMy0xLjQwMiA1LjQzNi01LjMyIDUuMzY4LTMuOTE2LS4wNjgtNS4xODYtMi4yMjgtNS4xMjYtNS41NWwxLjA3Ni02Ny4zOTgtMTkuODY3LTEuMDM2LS45MDcgNjcuNDk2Yy0uMzM0IDE5LjExIDguNzY1IDIxLjY0NCAyNC41NTIgMjEuOTIgMTUuNzg2LjI3NSAyNC4yMTMtMS42NiAyNC41NDYtMjAuNzdsMS4xNDUtNjUuNDc1TTMwNS43NCA5My4zNzVsLTE3LjAxNy0uODkyLS4zNjYgNi45NzZjLS44NzcgMTYuNzQgMi41MTQgMjEuODEyIDIyLjQwNCAyMi44NTUgMTUuNTguODE2IDIyLjg0My0yLjQxOCAyMy45MDMtMjIuNjQ0IDEuMTMyLTIxLjYyMy0uOTk4LTIzLjI1LTIwLjI3Ni0yOS42MjMtNS4zNDItMS42OC02LjYyLTIuNjgtNi4zNC04LjAyNmwuMjkyLTUuNThjLjIwOC0zLjk1Mi42NDgtNi4wMjcgNS41MS01Ljc3MiA0LjY0LjI0MyA1LjE2My44NTMgNC43NzMgOC4yOTNsLS4yMTQgNC4wNyAxNi4zNTQuODU3LjUzLTEwLjExNGMuNjE1LTExLjc0Mi00LjQ0NS0xNi42Ny0yMC4zNTUtMTcuNTA0LTE3LjQ2My0uOTE1LTIzLjMxMi43Ni0yNC4zNCAyMC40MDZsLS4yNjggNS4xMTZjLS43ODcgMTQuOTk2IDEuNzg1IDE4Ljc0NSAxNS44NSAyMy4wOTYgOS40ODcgMi45NDUgMTAuNjgzIDMuMzU3IDEwLjM4IDkuMTdsLS40NzUgOS4wN2MtLjE5IDMuNjAzLTEuNTg4IDQuOTI4LTUuNjc4IDQuNzEzLTUuNDE0LS4yODMtNS4yOTMtMi42MDctNC45ODctOC40MmwuMzE3LTYuMDQ1IiBmaWxsPSIjZGVkZGRlIi8+PHBhdGggZD0iTTI2Mi40NTYgMTk5LjMxYzAgOC4yMyAzLjU2OCAxMC4xMDUgMTIuNTg0IDEwLjEwNXMxMi41ODUtMS44NzYgMTIuNTg1LTEwLjEwNHYtMjMuMjk0YzAtOS41LTMuNTctMTEuMzc2LTEyLjU4NS0xMS4zNzYtOC41OTIgMC0xMi43MDcgMi4wNi0xMi41ODQgMTEuMzc2djIzLjI5NXptMTAuMDQzLTI1LjUzM2MwLTEuNTEzLjcyNC0xLjk5NyAyLjU0LTEuOTk3IDEuODE1IDAgMi41NC40MjQgMi41NCAxLjYzM3YyNi44NjZjMCAxLjUxLS43MjUgMS45OTYtMi41NCAxLjk5Ni0xLjgxNiAwLTIuNTQtLjQ4NS0yLjU0LTEuOTk3di0yNi41MDMiIGZpbGw9IiNkZWRkZGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0yOTMuMjYgMTcyLjYyOGgxMi4zNDNsLTkuNjIgMzYuMzAzaDEwLjE2NGw5LjM3Ny0zNi4zNjN2LTcuNDQzSDI5My4yNnY3LjUwNE00OS4xNjIgMTc3LjIyNWw1LjM4NSA1LjI2NCA2LjQ3NC05Ljg2MmguMTIydjM2LjMwM2gxMC4wNDR2LTQzLjgwNkg1OC40OGwtOS4zMTggMTIuMSIgZmlsbD0iI2RlZGRkZSIvPjxwYXRoIGQ9Ik04MS4xMTUgMjAxLjM2N2MwIDUuNjkuOTA4IDguMDQ4IDExLjA3MiA4LjA0OCAxMS4wNzMgMCAxNC4zNC0xLjA5IDE0LjM0LTE0Ljc2M1YxNzQuMDJjMC03LjgwNy0zLjE0Ni05LjM4LTEyLjc2Ni05LjM4LTEyLjEgMC0xMy4wMDggMi4xOC0xMy4wMDggMTUuMzY4IDAgOC4zNS42NjYgMTEuMzc2IDkuMTM3IDExLjM3NiAzLjYzIDAgNC45LS45MDcgNi4yMy0zLjE0N2guMjQzdjExLjU1OGMwIDIuMTE3LTEuMDMgMi40OC0yLjkwNSAyLjQ4LTIuNDIgMC0yLjY2Mi0uNjA0LTIuNjYyLTIuMTc4di00LjM1N2gtOS42OHY1LjYyN3ptOS42OC0yNy41M2MwLTEuNjMzLjYwNi0yLjA1NyAyLjg0NS0yLjA1NyAyLjI0IDAgMi44NDQuNDI0IDIuODQ0IDIuMDU3djguNDcyYzAgMS42OTMtMS4wMyAyLjI5OC0yLjg0NCAyLjI5OC0yLjMgMC0yLjg0NC0uNjY3LTIuODQ0LTIuNDJ2LTguMzUiIGZpbGw9IiNkZWRkZGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0yMjUuNzQ4IDM4NC4zMjVsLTI1LjU5NiAxOC41OTggOS43NzYgMzAuMDkyLTI1LjU5Ni0xOC41OTYtMjUuNTk3IDE4LjU5NSA5Ljc3Ny0zMC4wOTItMjUuNTk3LTE4LjU5NmgzMS42NGw5Ljc3Ny0zMC4wOSA5Ljc4IDMwLjA5IDMxLjYzNi0uMDAyIiBmaWxsPSIjZmRlMDEyIi8+PHBhdGggZD0iTTIyNS43NDggMzg0LjMyNWwtMjUuNTk2IDE4LjU5OCA5Ljc3NiAzMC4wOTItMjUuNTk2LTE4LjU5Ni0yNS41OTcgMTguNTk1IDkuNzc3LTMwLjA5Mi0yNS41OTctMTguNTk2aDMxLjY0bDkuNzc3LTMwLjA5IDkuNzggMzAuMDkgMzEuNjM2LS4wMDJ6IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZGUwMTIiIHN0cm9rZS13aWR0aD0iLjQzNzcyMjM5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMy44NjQiLz48L3N2Zz4=");
+  margin-left: 1px;
+  margin-right: 1px;
+  width: 14px;
+}
+
+.match {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.divider {
+  margin: 0 8px;
+}
+
+.result {
+  font-weight: bold;
+  font-size: 20px;
+  margin-top: 4px;
+}
+
+.standings {
+  font-size: 12px;
+}
+
+.team {
+  align-items: center;
+  display: flex;
+}
+
+.team-name {
+  margin-left: 4px;
+}
+
+.title {
+  align-items: center;
+  display: flex;
+  font-weight: 600;
+  height: 40px;
+  margin-top: 8px;
+  top: 0;
+}
+
+.bottom-filler {
+  height: 80px;
+}
+
+.nav {
+  background-color: #fff;
+  bottom: 0;
+  box-shadow: 0 0.4px 1px rgba(0, 0, 0, 0.026), 0 1px 2.3px rgba(0, 0, 0, 0.045),
+    0 1.9px 4.4px rgba(0, 0, 0, 0.065), 0 3.4px 7.8px rgba(0, 0, 0, 0.094),
+    0 6.3px 14.6px rgba(0, 0, 0, 0.145), 0 15px 35px rgba(0, 0, 0, 0.25);
+
+  height: 50px;
+  position: absolute;
+  width: 100%;
+}
diff --git a/staggered-cubes/README.markdown b/staggered-cubes/README.markdown
new file mode 100644
index 0000000..bc20a4f
--- /dev/null
+++ b/staggered-cubes/README.markdown
@@ -0,0 +1,8 @@
+# Staggered Cubes 😎
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jh3y/pen/PooMGaQ](https://codepen.io/jh3y/pen/PooMGaQ).
+
+ Saw this animation of nested staggered cubes online.
+
+Thought I'd have a go at recreating in a way that could be customised 👍
+
+Enjoy!
\ No newline at end of file
diff --git a/staggered-cubes/dist/index.html b/staggered-cubes/dist/index.html
new file mode 100644
index 0000000..86500e4
--- /dev/null
+++ b/staggered-cubes/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Staggered Cubes 😎</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas></canvas>
+<!-- partial -->
+  <script src='https://unpkg.com/zdog@1.1.0/dist/zdog.dist.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/staggered-cubes/dist/script.js b/staggered-cubes/dist/script.js
new file mode 100644
index 0000000..1605207
--- /dev/null
+++ b/staggered-cubes/dist/script.js
@@ -0,0 +1,177 @@
+const { Zdog, gsap, dat } = window;
+const { timeline, to } = gsap;
+const { Illustration, Anchor, Rect, TAU } = Zdog;
+
+const CONFIG = {
+  AMOUNT: 25,
+  SIZE: 15,
+  SPEED: 1.5,
+  STROKE: 1.5,
+  STAGGER: 0.1,
+  SCALE: 0.5,
+  DELAY: 0,
+  HUE: Math.floor(Math.random() * 360) };
+
+
+const CUBES = new Illustration({
+  element: 'canvas',
+  dragRotate: true,
+  resize: 'fullscreen',
+  rotate: {
+    x: TAU * 0.098,
+    y: TAU * 0.125 } });
+
+
+
+const CUBE = new Anchor({
+  addTo: CUBES });
+
+
+const FACE = new Rect({
+  addTo: CUBE,
+  width: CONFIG.SIZE,
+  height: CONFIG.SIZE,
+  stroke: CONFIG.STROKE,
+  color: `hsl(${CONFIG.HUE}, 100%, 50%)` });
+
+
+FACE.copy({
+  translate: {
+    z: CONFIG.SIZE / 2 } });
+
+
+
+FACE.copy({
+  translate: {
+    z: -CONFIG.SIZE / 2 } });
+
+
+
+FACE.copy({
+  rotate: {
+    y: TAU * 0.25 },
+
+  translate: {
+    x: CONFIG.SIZE / 2 } });
+
+
+
+FACE.copy({
+  rotate: {
+    y: TAU * 0.25 },
+
+  translate: {
+    x: -CONFIG.SIZE / 2 } });
+
+
+
+FACE.color = 'transparent';
+
+const addCubes = () => {
+  let scale = 1;
+  for (let c = 0; c < CONFIG.AMOUNT; c++) {
+    CUBE.copyGraph({
+      scale: scale += CONFIG.SCALE });
+
+  }
+};
+addCubes();
+const TL = new timeline();
+const addToTL = () => {
+  const ROTATES = CUBES.children.map(child => child.rotate);
+  TL.add(
+  to(ROTATES, CONFIG.SPEED, {
+    y: `+=${TAU}`,
+    stagger: CONFIG.STAGGER,
+    repeat: -1,
+    repeatDelay: CONFIG.DELAY }));
+
+
+};
+
+addToTL();
+
+const updateFaces = (key, value) => {
+  for (let c = 0; c < CUBES.children.length; c++) {
+    for (let f = 1; f < CUBES.children[c].children.length; f++) {
+      CUBES.children[c].children[f][key] = value;
+    }
+  }
+};
+
+const updateScale = () => {
+  for (let c = 0; c < CUBES.children.length; c++) {
+    CUBES.children[c].scale = {
+      x: c * CONFIG.SCALE,
+      y: c * CONFIG.SCALE,
+      z: c * CONFIG.SCALE };
+
+  }
+};
+
+const GUI = new dat.GUI({ closed: false });
+const amountController = GUI.add(CONFIG, 'AMOUNT', 1, 100);
+amountController.onFinishChange(value => {
+  CONFIG.AMOUNT = value;
+  CUBES.children = [];
+  addCubes();
+  TL.seek(0);
+  TL.clear();
+  addToTL();
+});
+const speedController = GUI.add(CONFIG, 'SPEED', 0.1, 10);
+speedController.onFinishChange(value => {
+  CONFIG.SPEED = value;
+  TL.seek(0);
+  TL.clear();
+  addToTL();
+});
+const staggerController = GUI.add(CONFIG, 'STAGGER', 0.01, 1);
+staggerController.onFinishChange(value => {
+  CONFIG.STAGGER = value;
+  TL.seek(0);
+  TL.clear();
+  addToTL();
+});
+const delayController = GUI.add(CONFIG, 'DELAY', 0, 5);
+delayController.onFinishChange(value => {
+  CONFIG.DELAY = value;
+  TL.seek(0);
+  TL.clear();
+  addToTL();
+});
+const strokeController = GUI.add(CONFIG, 'STROKE', 0.01, 4);
+strokeController.onFinishChange(value => {
+  CONFIG.STROKE = value;
+  updateFaces('stroke', value);
+});
+const scaleController = GUI.add(CONFIG, 'SCALE', 0.15, 3);
+scaleController.onFinishChange(value => {
+  CONFIG.SCALE = value;
+  updateScale();
+});
+const hueController = GUI.add(CONFIG, 'HUE', 0, 360);
+hueController.onChange(value => {
+  CONFIG.HUE = value;
+  updateFaces('color', `hsl(${value}, 100%, 50%)`);
+});
+
+const draw = () => {
+  CUBES.updateRenderGraph();
+  requestAnimationFrame(draw);
+};
+draw();
+
+const resetAngle = document.createElement('button');
+resetAngle.innerText = 'Reset Rotation';
+resetAngle.className = 'reset';
+resetAngle.addEventListener('click', () => {
+  CUBES.rotate = {
+    x: TAU * 0.098,
+    y: TAU * 0.125 };
+
+});
+const li = document.createElement('li');
+li.className = 'cr button-holder';
+li.appendChild(resetAngle);
+GUI.__ul.appendChild(li);
\ No newline at end of file
diff --git a/staggered-cubes/dist/style.css b/staggered-cubes/dist/style.css
new file mode 100644
index 0000000..9983ef3
--- /dev/null
+++ b/staggered-cubes/dist/style.css
@@ -0,0 +1,37 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  background: #111;
+  min-height: 100vh;
+}
+canvas {
+  touch-action: none;
+  height: 100vh;
+  width: 100vw;
+}
+.reset {
+  --hue: 199;
+  --lightness: 51;
+  text-transform: uppercase;
+  padding: 8px 16px;
+  background: hsl(var(--hue), 67%, calc(var(--lightness) * 1%));
+  color: #fff;
+  cursor: pointer;
+  border: 0;
+}
+.reset:hover {
+  --lightness: 65;
+}
+.reset:active {
+  --lightness: 75;
+}
+.button-holder {
+  height: auto !important;
+  border-left: 3px solid #2fa1d6;
+  padding: 8px !important;
+}
+.closed .button-holder {
+  height: 0 !important;
+  padding: 0 !important;
+}
\ No newline at end of file
diff --git a/staggered-cubes/license.txt b/staggered-cubes/license.txt
new file mode 100644
index 0000000..5353eb8
--- /dev/null
+++ b/staggered-cubes/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2019 by Jhey (https://codepen.io/jh3y/pen/PooMGaQ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/staggered-cubes/src/index.pug b/staggered-cubes/src/index.pug
new file mode 100644
index 0000000..5277c2a
--- /dev/null
+++ b/staggered-cubes/src/index.pug
@@ -0,0 +1 @@
+canvas
\ No newline at end of file
diff --git a/staggered-cubes/src/script.babel b/staggered-cubes/src/script.babel
new file mode 100644
index 0000000..dfcb9b6
--- /dev/null
+++ b/staggered-cubes/src/script.babel
@@ -0,0 +1,177 @@
+const { Zdog, gsap, dat } = window
+const { timeline, to } = gsap
+const { Illustration, Anchor, Rect, TAU } = Zdog
+
+const CONFIG = {
+  AMOUNT: 25,
+  SIZE: 15,
+  SPEED: 1.5,
+  STROKE: 1.5,
+  STAGGER: 0.1,
+  SCALE: 0.5,
+  DELAY: 0,
+  HUE: Math.floor(Math.random() * 360),
+}
+
+const CUBES = new Illustration({
+  element: 'canvas',
+  dragRotate: true,
+  resize: 'fullscreen',
+  rotate: {
+    x: TAU * 0.098,
+    y: TAU * 0.125,
+  },
+})
+
+const CUBE = new Anchor({
+  addTo: CUBES,
+})
+
+const FACE = new Rect({
+  addTo: CUBE,
+  width: CONFIG.SIZE,
+  height: CONFIG.SIZE,
+  stroke: CONFIG.STROKE,
+  color: `hsl(${CONFIG.HUE}, 100%, 50%)`,
+})
+
+FACE.copy({
+  translate: {
+    z: CONFIG.SIZE / 2,
+  },
+})
+
+FACE.copy({
+  translate: {
+    z: -CONFIG.SIZE / 2,
+  },
+})
+
+FACE.copy({
+  rotate: {
+    y: TAU * 0.25,
+  },
+  translate: {
+    x: CONFIG.SIZE / 2,
+  },
+})
+
+FACE.copy({
+  rotate: {
+    y: TAU * 0.25,
+  },
+  translate: {
+    x: -CONFIG.SIZE / 2,
+  },
+})
+
+FACE.color = 'transparent'
+
+const addCubes = () => {
+  let scale = 1
+  for (let c = 0; c < CONFIG.AMOUNT; c++) {
+    CUBE.copyGraph({
+      scale: scale += CONFIG.SCALE,
+    })
+  }
+}
+addCubes()
+const TL = new timeline()
+const addToTL = () => {
+  const ROTATES = CUBES.children.map(child => child.rotate)
+  TL.add(
+    to(ROTATES, CONFIG.SPEED, {
+      y: `+=${TAU}`,
+      stagger: CONFIG.STAGGER,
+      repeat: -1,
+      repeatDelay: CONFIG.DELAY,
+    })
+  )
+}
+
+addToTL()
+
+const updateFaces = (key, value) => {
+  for (let c = 0; c < CUBES.children.length; c++) {
+    for (let f = 1; f < CUBES.children[c].children.length; f++) {
+      CUBES.children[c].children[f][key] = value
+    }
+  }
+}
+
+const updateScale = () => {
+  for (let c = 0; c < CUBES.children.length; c++) {
+    CUBES.children[c].scale = {
+      x: c * CONFIG.SCALE,
+      y: c * CONFIG.SCALE,
+      z: c * CONFIG.SCALE,
+    }
+  }
+}
+
+const GUI = new dat.GUI({ closed: false })
+const amountController = GUI.add(CONFIG, 'AMOUNT', 1, 100)
+amountController.onFinishChange(value => {
+  CONFIG.AMOUNT = value
+  CUBES.children = []
+  addCubes()
+  TL.seek(0)
+  TL.clear()
+  addToTL()
+})
+const speedController = GUI.add(CONFIG, 'SPEED', 0.1, 10)
+speedController.onFinishChange(value => {
+  CONFIG.SPEED = value
+  TL.seek(0)
+  TL.clear()
+  addToTL()
+})
+const staggerController = GUI.add(CONFIG, 'STAGGER', 0.01, 1)
+staggerController.onFinishChange(value => {
+  CONFIG.STAGGER = value
+  TL.seek(0)
+  TL.clear()
+  addToTL()
+})
+const delayController = GUI.add(CONFIG, 'DELAY', 0, 5)
+delayController.onFinishChange(value => {
+  CONFIG.DELAY = value
+  TL.seek(0)
+  TL.clear()
+  addToTL()
+})
+const strokeController = GUI.add(CONFIG, 'STROKE', 0.01, 4)
+strokeController.onFinishChange(value => {
+  CONFIG.STROKE = value
+  updateFaces('stroke', value)
+})
+const scaleController = GUI.add(CONFIG, 'SCALE', 0.15, 3)
+scaleController.onFinishChange(value => {
+  CONFIG.SCALE = value
+  updateScale()
+})
+const hueController = GUI.add(CONFIG, 'HUE', 0, 360)
+hueController.onChange(value => {
+  CONFIG.HUE = value
+  updateFaces('color', `hsl(${value}, 100%, 50%)`)
+})
+
+const draw = () => {
+  CUBES.updateRenderGraph()
+  requestAnimationFrame(draw)
+}
+draw()
+
+const resetAngle = document.createElement('button')
+resetAngle.innerText = 'Reset Rotation'
+resetAngle.className = 'reset'
+resetAngle.addEventListener('click', () => {
+  CUBES.rotate = {
+    x: TAU * 0.098,
+    y: TAU * 0.125,
+  }
+})
+const li = document.createElement('li')
+li.className = 'cr button-holder'
+li.appendChild(resetAngle)
+GUI.__ul.appendChild(li)
diff --git a/staggered-cubes/src/style.styl b/staggered-cubes/src/style.styl
new file mode 100644
index 0000000..5c82cd2
--- /dev/null
+++ b/staggered-cubes/src/style.styl
@@ -0,0 +1,35 @@
+*
+  box-sizing border-box
+
+body
+  background #111
+  min-height 100vh
+
+canvas
+  touch-action none
+  height 100vh
+  width 100vw
+
+.reset
+  --hue 199
+  --lightness 51
+  text-transform uppercase
+  padding 8px 16px
+  background 'hsl(%s, 67%, %s)' % (var(--hue) calc(var(--lightness) * 1%))
+  color #fff
+  cursor pointer
+  border 0
+
+  &:hover
+    --lightness 65
+  &:active
+    --lightness 75
+
+.button-holder
+  height auto !important
+  border-left 3px solid #2FA1D6
+  padding 8px !important
+
+.closed .button-holder
+  height 0 !important
+  padding 0 !important
\ No newline at end of file
diff --git a/stay-true/README.markdown b/stay-true/README.markdown
new file mode 100644
index 0000000..937c00a
--- /dev/null
+++ b/stay-true/README.markdown
@@ -0,0 +1,4 @@
+# Stay True
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/wNovOJ](https://codepen.io/cobra_winfrey/pen/wNovOJ).
+
+ based on the excellent dribbble shot by Andy Detskas found here: https://dribbble.com/shots/1529305-Stay-True-Final
\ No newline at end of file
diff --git a/stay-true/dist/index.html b/stay-true/dist/index.html
new file mode 100644
index 0000000..87d365d
--- /dev/null
+++ b/stay-true/dist/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Stay True</title>
+  <link href="https://fonts.googleapis.com/css?family=Nova+Square" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input type='checkbox'>
+<div id='wrap'>
+  <div class='box'></div>
+  <div class='box'></div>
+  <div class='box'></div>
+  <div class='box'></div>
+  <div class='box'></div>
+  <div class='box'></div>
+  <div class='box'></div>
+  <div class='box'></div>
+  <div class='box'></div>
+  <div class='box'></div>
+  <div class='box'></div>
+  <div class='box'></div>
+  <div class='box'></div>
+  <div class='box'></div>
+  <div class='box'></div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/stay-true/dist/script.js b/stay-true/dist/script.js
new file mode 100644
index 0000000..90d124c
--- /dev/null
+++ b/stay-true/dist/script.js
@@ -0,0 +1 @@
+// based on the Dribbble shot by Andy Detskas found here: https://dribbble.com/shots/1529305-Stay-True-Final
\ No newline at end of file
diff --git a/stay-true/dist/style.css b/stay-true/dist/style.css
new file mode 100644
index 0000000..9ff1130
--- /dev/null
+++ b/stay-true/dist/style.css
@@ -0,0 +1,239 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: #000;
+  -webkit-perspective: 1000000000000px;
+          perspective: 1000000000000px;
+  font-family: 'Nova Square', cursive;
+}
+body input {
+  position: absolute;
+  z-index: 999;
+  width: 100vw;
+  height: 100vh;
+  opacity: 0;
+}
+body input:checked ~ #wrap {
+  -webkit-transform: rotateY(-45deg);
+          transform: rotateY(-45deg);
+}
+body input:checked ~ #wrap .box:last-of-type {
+  opacity: 0;
+  transition-delay: 0s;
+}
+body #wrap {
+  width: 325px;
+  height: 325px;
+  display: grid;
+  grid-template-columns: repeat(13, 25px);
+  grid-template-rows: repeat(13, 25px);
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-transform: rotateY(0deg) scaleY(0.9);
+          transform: rotateY(0deg) scaleY(0.9);
+  transition: all 800ms cubic-bezier(1, 0.25, 0.25, 1);
+}
+body #wrap .box {
+  position: relative;
+  background: #fff;
+}
+body #wrap .box:before, body #wrap .box:after {
+  content: '';
+  background: #fff;
+  position: absolute;
+  width: 100%;
+}
+body #wrap .box:first-of-type {
+  grid-column: 1;
+  grid-row: 3 / span 4;
+}
+body #wrap .box:first-of-type:before, body #wrap .box:first-of-type:after {
+  content: '';
+  position: absolute;
+  height: 50%;
+  top: -50%;
+  background: #fff;
+  -webkit-transform-origin: bottom;
+          transform-origin: bottom;
+  -webkit-transform: rotateX(45deg);
+          transform: rotateX(45deg);
+}
+body #wrap .box:first-of-type:after {
+  height: 70%;
+  top: 30%;
+}
+body #wrap .box:nth-of-type(2) {
+  grid-column: 3;
+  grid-row: 5 / span 3;
+}
+body #wrap .box:nth-of-type(2):before {
+  height: 200%;
+  bottom: -200%;
+  -webkit-transform-origin: top;
+          transform-origin: top;
+  -webkit-transform: rotateX(45deg);
+          transform: rotateX(45deg);
+}
+body #wrap .box:nth-of-type(3) {
+  grid-column: 1;
+  grid-row: 8 / span 6;
+}
+body #wrap .box:nth-of-type(4) {
+  grid-column: 5;
+  grid-row: 2 / span 6;
+}
+body #wrap .box:nth-of-type(4):before {
+  height: 100%;
+  top: -50%;
+  -webkit-transform: rotateX(45deg);
+          transform: rotateX(45deg);
+}
+body #wrap .box:nth-of-type(4):after {
+  height: 47.5%;
+  bottom: -47.5%;
+  -webkit-transform-origin: top;
+          transform-origin: top;
+  -webkit-transform: rotateX(45deg);
+          transform: rotateX(45deg);
+}
+body #wrap .box:nth-of-type(5) {
+  grid-column: 3;
+  grid-row: 10 / span 4;
+}
+body #wrap .box:nth-of-type(6) {
+  grid-column: 5;
+  grid-row: 8 / span 2;
+}
+body #wrap .box:nth-of-type(6):before {
+  height: 140%;
+  bottom: -140%;
+  -webkit-transform-origin: top;
+          transform-origin: top;
+  -webkit-transform: rotateX(45deg);
+          transform: rotateX(45deg);
+}
+body #wrap .box:nth-of-type(7) {
+  grid-column: 5;
+  grid-row: 12 / span 1;
+}
+body #wrap .box:nth-of-type(7):before {
+  height: 140%;
+  top: -140%;
+  -webkit-transform-origin: bottom;
+          transform-origin: bottom;
+  -webkit-transform: rotateX(-45deg);
+          transform: rotateX(-45deg);
+}
+body #wrap .box:nth-of-type(8) {
+  grid-column: 7;
+  grid-row: 3 / span 11;
+}
+body #wrap .box:nth-of-type(8):before {
+  height: 25.75%;
+  top: -25.75%;
+  -webkit-transform-origin: bottom;
+          transform-origin: bottom;
+  -webkit-transform: rotateX(45deg);
+          transform: rotateX(45deg);
+}
+body #wrap .box:nth-of-type(8):after {
+  height: 25.75%;
+  top: 74.25%;
+  -webkit-transform-origin: bottom;
+          transform-origin: bottom;
+  -webkit-transform: rotateX(45deg);
+          transform: rotateX(45deg);
+}
+body #wrap .box:nth-of-type(9) {
+  grid-column: 9;
+  grid-row: 1 / span 11;
+}
+body #wrap .box:nth-of-type(9):before {
+  height: 25.75%;
+  top: 0%;
+  -webkit-transform-origin: bottom;
+          transform-origin: bottom;
+  -webkit-transform: rotateX(-135deg);
+          transform: rotateX(-135deg);
+}
+body #wrap .box:nth-of-type(10) {
+  grid-column: 11;
+  grid-row: 2 / span 4;
+}
+body #wrap .box:nth-of-type(10):before, body #wrap .box:nth-of-type(10):after {
+  height: 70%;
+  top: 30%;
+  -webkit-transform-origin: bottom;
+          transform-origin: bottom;
+  -webkit-transform: rotateX(45deg);
+          transform: rotateX(45deg);
+}
+body #wrap .box:nth-of-type(10):after {
+  top: 78%;
+  height: 72%;
+}
+body #wrap .box:nth-of-type(11) {
+  grid-column: 13;
+  grid-row: 1 / span 5;
+}
+body #wrap .box:nth-of-type(11):before {
+  height: 100%;
+  top: -20%;
+}
+body #wrap .box:nth-of-type(12) {
+  grid-column: 11;
+  grid-row: 8 / span 6;
+}
+body #wrap .box:nth-of-type(13) {
+  background: transparent;
+  grid-column: 11;
+  grid-row: 2 / span 4;
+}
+body #wrap .box:nth-of-type(13):before, body #wrap .box:nth-of-type(13):after {
+  height: 70%;
+  top: 130%;
+  -webkit-transform-origin: bottom;
+          transform-origin: bottom;
+  -webkit-transform: rotateX(45deg);
+          transform: rotateX(45deg);
+}
+body #wrap .box:nth-of-type(13):after {
+  top: 180%;
+}
+body #wrap .box:nth-of-type(14) {
+  background: transparent;
+  grid-column: 11;
+  grid-row: 2 / span 4;
+}
+body #wrap .box:nth-of-type(14):before, body #wrap .box:nth-of-type(14):after {
+  height: 70%;
+  top: 230%;
+  -webkit-transform-origin: bottom;
+          transform-origin: bottom;
+  -webkit-transform: rotateX(45deg);
+          transform: rotateX(45deg);
+}
+body #wrap .box:nth-of-type(15) {
+  grid-column: 13;
+  grid-row: 7 / span 7;
+  background: transparent;
+  transition: 0.2s ease-in-out;
+  transition-delay: 0.5s;
+}
+body #wrap .box:nth-of-type(15):before {
+  background: transparent;
+  content: 'CLICK ME';
+  color: #fff;
+  -webkit-writing-mode: vertical-lr;
+      -ms-writing-mode: tb-lr;
+          writing-mode: vertical-lr;
+  font-size: 24px;
+  height: 100%;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
+  letter-spacing: 3px;
+}
diff --git a/stay-true/license.txt b/stay-true/license.txt
new file mode 100644
index 0000000..cf72657
--- /dev/null
+++ b/stay-true/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/wNovOJ)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/stay-true/src/index.haml b/stay-true/src/index.haml
new file mode 100644
index 0000000..9717aa8
--- /dev/null
+++ b/stay-true/src/index.haml
@@ -0,0 +1,4 @@
+%input{:type => "checkbox"}/
+#wrap
+ -15.times do
+  .box
\ No newline at end of file
diff --git a/stay-true/src/script.js b/stay-true/src/script.js
new file mode 100644
index 0000000..90d124c
--- /dev/null
+++ b/stay-true/src/script.js
@@ -0,0 +1 @@
+// based on the Dribbble shot by Andy Detskas found here: https://dribbble.com/shots/1529305-Stay-True-Final
\ No newline at end of file
diff --git a/stay-true/src/style.scss b/stay-true/src/style.scss
new file mode 100644
index 0000000..7d548dc
--- /dev/null
+++ b/stay-true/src/style.scss
@@ -0,0 +1,215 @@
+body{
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  height:100vh;
+  background:#000;
+  perspective:1000000000000px;
+  font-family: 'Nova Square', cursive;
+  input{
+    position:absolute;
+    z-index:999;
+    width:100vw;
+    height:100vh;
+    opacity:0;
+    &:checked{
+      & ~ #wrap{
+        transform:rotateY(-45deg);
+        .box{
+          &:last-of-type{
+            opacity:0;
+            transition-delay:0s;
+          }
+        }
+      }
+    }
+  }
+  #wrap{
+    width:325px;
+    height:325px;
+    display:grid;
+    grid-template-columns: repeat(13, 25px);
+    grid-template-rows: repeat(13, 25px);
+    transform-style:preserve-3d;
+    transform:rotateY(0deg) scaleY(0.9);
+    transition:all 800ms cubic-bezier(1, 0.25, 0.25, 1);
+    .box{
+      position:relative;
+      background:#fff;
+      &:before, &:after{
+        content:'';
+        background:#fff;
+        position:absolute;
+        width:100%;
+      }
+      &:first-of-type{
+        grid-column: 1;
+        grid-row: 3 / span 4;
+        &:before,&:after{
+          content:'';
+          position:absolute;
+          height:50%;
+          top:-50%;
+          background:#fff;
+          transform-origin:bottom;
+          transform:rotateX(45deg);
+        }
+        &:after{
+          height:70%;
+          top:30%;
+        }
+      }
+      &:nth-of-type(2){
+        grid-column: 3;
+        grid-row: 5 / span 3;
+        &:before{
+          height:200%;
+          bottom:-200%;
+          transform-origin:top;
+          transform:rotateX(45deg);
+        }
+      }
+      &:nth-of-type(3){
+        grid-column: 1;
+        grid-row: 8 / span 6;
+      }
+      &:nth-of-type(4){
+        grid-column: 5;
+        grid-row: 2 / span 6;
+        &:before{
+          height:100%;
+          top:-50%;
+          transform:rotateX(45deg);
+        }
+        &:after{
+          height:47.5%;
+          bottom:-47.5%;
+          transform-origin:top;
+          transform:rotateX(45deg);
+        }
+      }
+      &:nth-of-type(5){
+        grid-column: 3;
+        grid-row: 10 / span 4;
+      }
+      &:nth-of-type(6){
+        grid-column: 5;
+        grid-row: 8 / span 2;
+        &:before{
+          height:140%;
+          bottom:-140%;
+          transform-origin:top;
+          transform:rotateX(45deg);
+        }
+      }
+      
+      &:nth-of-type(7){
+        grid-column: 5;
+        grid-row: 12 / span 1;
+        &:before{
+          height:140%;
+          top:-140%;
+          transform-origin:bottom;
+          transform:rotateX(-45deg);
+        }
+      }
+      &:nth-of-type(8){
+        grid-column: 7;
+        grid-row: 3 / span 11;
+        &:before{
+          height:25.75%;
+          top:-25.75%;
+          transform-origin:bottom;
+          transform:rotateX(45deg);
+        }
+        &:after{
+          height:25.75%;
+          top:74.25%;
+          transform-origin:bottom;
+          transform:rotateX(45deg);
+        }
+      }
+      &:nth-of-type(9){
+        grid-column: 9;
+        grid-row: 1 / span 11;
+        &:before{
+          height:25.75%;
+          top:0%;
+          transform-origin:bottom;
+          transform:rotateX(-135deg);
+        }
+      }
+      &:nth-of-type(10){
+        grid-column: 11;
+        grid-row: 2 / span 4;
+        &:before, &:after{
+          height:70%;
+          top:30%;
+          transform-origin:bottom;
+          transform:rotateX(45deg);
+        }
+        &:after{
+          top:78%;
+          height:72%;
+        }
+      }
+      &:nth-of-type(11){
+        grid-column: 13;
+        grid-row: 1 / span 5;
+        &:before{
+          height:100%;
+          top:-20%;
+        }
+      }
+      &:nth-of-type(12){
+        grid-column: 11;
+        grid-row: 8 / span 6;
+      }
+      &:nth-of-type(13){
+        background:transparent;
+        grid-column: 11;
+        grid-row: 2 / span 4;
+        &:before, &:after{
+          height:70%;
+          top:130%;
+          transform-origin:bottom;
+          transform:rotateX(45deg);
+        }
+        &:after{
+          top:180%;
+        }
+      }
+      &:nth-of-type(14){
+        background:transparent;
+        grid-column: 11;
+        grid-row: 2 / span 4;
+        &:before, &:after{
+          height:70%;
+          top:230%;
+          transform-origin:bottom;
+          transform:rotateX(45deg);
+        }
+      }
+      &:nth-of-type(15){
+        grid-column: 13;
+        grid-row: 7 / span 7;
+        background:transparent;
+        transition:0.2s ease-in-out;
+        transition-delay:0.5s;
+        &:before{
+          background:transparent;
+          content:'CLICK ME';
+          color:#fff;
+          writing-mode: vertical-lr;
+          font-size:24px;
+          height:100%;
+          left:50%;
+          top:50%;
+          transform:translateX(-50%) translateY(-50%);
+          letter-spacing:3px;
+        }
+      }
+      
+    }
+  }
+}
\ No newline at end of file
diff --git a/sticky-cards/LICENSE.txt b/sticky-cards/LICENSE.txt
new file mode 100644
index 0000000..324d325
--- /dev/null
+++ b/sticky-cards/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Chris Coyier  (https://codepen.io/chriscoyier/pen/NWMQQoL)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/sticky-cards/README.md b/sticky-cards/README.md
new file mode 100644
index 0000000..6a7165b
--- /dev/null
+++ b/sticky-cards/README.md
@@ -0,0 +1,4 @@
+# Sticky Cards
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/chriscoyier/pen/NWMQQoL](https://codepen.io/chriscoyier/pen/NWMQQoL).
+
diff --git a/sticky-cards/dist/index.html b/sticky-cards/dist/index.html
new file mode 100644
index 0000000..a26cc2b
--- /dev/null
+++ b/sticky-cards/dist/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Sticky Cards</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<div class="card">
+  <h2>Card Title</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/sticky-cards/dist/style.css b/sticky-cards/dist/style.css
new file mode 100644
index 0000000..6d753ba
--- /dev/null
+++ b/sticky-cards/dist/style.css
@@ -0,0 +1,113 @@
+body {
+  margin-inline: max(0px, ((100% - 260px) / 2));
+  font: 90%/1.4 system-ui;
+}
+
+.card {
+  position: sticky;
+  top: 0;
+  background: white;
+  padding: 1.5rem;
+  box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+}
+
+.card:nth-child(1) {
+  top: 1rem;
+  rotate: 1deg;
+}
+
+.card:nth-child(2) {
+  top: 2rem;
+  rotate: 2deg;
+}
+
+.card:nth-child(3) {
+  top: 3rem;
+  rotate: 3deg;
+}
+
+.card:nth-child(4) {
+  top: 4rem;
+  rotate: 4deg;
+}
+
+.card:nth-child(5) {
+  top: 5rem;
+  rotate: 5deg;
+}
+
+.card:nth-child(6) {
+  top: 6rem;
+  rotate: 6deg;
+}
+
+.card:nth-child(7) {
+  top: 7rem;
+  rotate: 7deg;
+}
+
+.card:nth-child(8) {
+  top: 8rem;
+  rotate: 8deg;
+}
+
+.card:nth-child(9) {
+  top: 9rem;
+  rotate: 9deg;
+}
+
+.card:nth-child(10) {
+  top: 10rem;
+  rotate: 10deg;
+}
+
+.card:nth-child(11) {
+  top: 11rem;
+  rotate: 11deg;
+}
+
+.card:nth-child(12) {
+  top: 12rem;
+  rotate: 12deg;
+}
+
+.card:nth-child(13) {
+  top: 13rem;
+  rotate: 13deg;
+}
+
+.card:nth-child(14) {
+  top: 14rem;
+  rotate: 14deg;
+}
+
+.card:nth-child(15) {
+  top: 15rem;
+  rotate: 15deg;
+}
+
+.card:nth-child(16) {
+  top: 16rem;
+  rotate: 16deg;
+}
+
+.card:nth-child(17) {
+  top: 17rem;
+  rotate: 17deg;
+}
+
+.card:nth-child(18) {
+  top: 18rem;
+  rotate: 18deg;
+}
+
+.card:nth-child(19) {
+  top: 19rem;
+  rotate: 19deg;
+}
+
+.card:nth-child(20) {
+  top: 20rem;
+  rotate: 20deg;
+}
\ No newline at end of file
diff --git a/sticky-cards/src/index.pug b/sticky-cards/src/index.pug
new file mode 100644
index 0000000..455d800
--- /dev/null
+++ b/sticky-cards/src/index.pug
@@ -0,0 +1,4 @@
+- for (let i = 1; i < 20; i++)
+  .card
+    h2 Card Title
+    p Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.
diff --git a/sticky-cards/src/style.scss b/sticky-cards/src/style.scss
new file mode 100644
index 0000000..db5518e
--- /dev/null
+++ b/sticky-cards/src/style.scss
@@ -0,0 +1,20 @@
+body {
+  margin-inline: max(0px, ((100% - 260px) / 2));
+  font: 90%/1.4 system-ui;
+}
+
+.card {
+  position: sticky;
+  top: 0;
+  background: white;
+  padding: 1.5rem;
+  box-shadow: 0 -0.5rem 1rem rgba(0 0 0 / 0.15);
+  border-radius: 4px;
+}
+
+@for $i from 1 through 20 {
+  .card:nth-child(#{$i}) {
+    top: $i + rem;
+    rotate: $i + deg;
+  }
+}
diff --git a/sticky-photostack/README.markdown b/sticky-photostack/README.markdown
new file mode 100644
index 0000000..2a68983
--- /dev/null
+++ b/sticky-photostack/README.markdown
@@ -0,0 +1,5 @@
+# Sticky Photostack
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/bennettfeely/pen/NWRmGYb](https://codepen.io/bennettfeely/pen/NWRmGYb).
+
+
diff --git a/sticky-photostack/dist/index.html b/sticky-photostack/dist/index.html
new file mode 100644
index 0000000..790e961
--- /dev/null
+++ b/sticky-photostack/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Sticky Photostack</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<figure><img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600&amp;h=600&amp;q=50" width="1000" height="1000"/></figure>
+<figure><img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=600&amp;h=600&amp;q=50" width="1000" height="1000"/></figure>
+<figure><img src="https://images.unsplash.com/photo-1497671954146-59a89ff626ff?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600&amp;h=600&amp;q=50" width="1000" height="1000"/></figure>
+<figure><img src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600&amp;h=600&amp;q=50" width="1000" height="1000"/></figure>
+<figure><img src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600$h=600&amp;q=50" width="1000" height="1000"/></figure>
+<figure><img src="https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600$h=600&amp;q=50" width="1000" height="1000"/></figure>
+<figure><img src="https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=600$h=600&amp;q=50" width="1000" height="1000"/></figure>
+<figure><img src="https://images.unsplash.com/photo-1544568104-5b7eb8189dd4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600&amp;h=600&amp;q=50" width="1000" height="1000"/></figure>
+<figure><img src="https://images.unsplash.com/photo-1555424221-250de2a343ad?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=600&amp;h=600&amp;q=50" width="1000" height="1000"/></figure>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/sticky-photostack/dist/style.css b/sticky-photostack/dist/style.css
new file mode 100644
index 0000000..6194a91
--- /dev/null
+++ b/sticky-photostack/dist/style.css
@@ -0,0 +1,51 @@
+body {
+  background: #020520;
+  perspective: 500px;
+  overflow-x: hidden;
+}
+
+figure {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+}
+figure:nth-child(1) img {
+  transform: scale(0.6) rotate(-12.5deg);
+}
+figure:nth-child(2) img {
+  transform: scale(0.6) rotate(-9.7222222222deg);
+}
+figure:nth-child(3) img {
+  transform: scale(0.6) rotate(-6.9444444444deg);
+}
+figure:nth-child(4) img {
+  transform: scale(0.6) rotate(-4.1666666667deg);
+}
+figure:nth-child(5) img {
+  transform: scale(0.6) rotate(-1.3888888889deg);
+}
+figure:nth-child(6) img {
+  transform: scale(0.6) rotate(1.3888888889deg);
+}
+figure:nth-child(7) img {
+  transform: scale(0.6) rotate(4.1666666667deg);
+}
+figure:nth-child(8) img {
+  transform: scale(0.6) rotate(6.9444444444deg);
+}
+figure:nth-child(9) img {
+  transform: scale(0.6) rotate(9.7222222222deg);
+}
+figure:nth-child(10) img {
+  transform: scale(0.6) rotate(12.5deg);
+}
+figure img {
+  width: 100vmin;
+  height: 100vmin;
+  border-radius: 3px;
+}
\ No newline at end of file
diff --git a/sticky-photostack/license.txt b/sticky-photostack/license.txt
new file mode 100644
index 0000000..aa17a90
--- /dev/null
+++ b/sticky-photostack/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Bennett Feely (https://codepen.io/bennettfeely/pen/NWRmGYb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/sticky-photostack/src/index.pug b/sticky-photostack/src/index.pug
new file mode 100644
index 0000000..86d562d
--- /dev/null
+++ b/sticky-photostack/src/index.pug
@@ -0,0 +1,5 @@
+- var photos = ['https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50', 'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=600&h=600&q=50', 'https://images.unsplash.com/photo-1497671954146-59a89ff626ff?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50', 'https://images.unsplash.com/photo-1502082553048-f009c37129b9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50', 'https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600$h=600&q=50', 'https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600$h=600&q=50', 'https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=600$h=600&q=50', 'https://images.unsplash.com/photo-1544568104-5b7eb8189dd4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50', 'https://images.unsplash.com/photo-1555424221-250de2a343ad?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=600&h=600&q=50'];
+
+each photo in photos
+	figure
+		img(src=photo, width=1000, height=1000)
diff --git a/sticky-photostack/src/style.scss b/sticky-photostack/src/style.scss
new file mode 100644
index 0000000..0ceeb2e
--- /dev/null
+++ b/sticky-photostack/src/style.scss
@@ -0,0 +1,32 @@
+body {
+	background: #020520;
+	perspective: 500px;
+	overflow-x: hidden;
+}
+
+figure {
+	position: sticky;
+	top: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100vw;
+	height: 100vh;
+
+	$photos: 10;
+
+	@for $i from 1 through $photos {
+		&:nth-child(#{$i}) {
+			img {
+				$rotation: (($i - 1)/ ($photos - 1)) - 0.5;
+				transform: scale(0.6) rotate($rotation * 25deg);
+			}
+		}
+	}
+
+	img {
+		width: 100vmin;
+		height: 100vmin;
+		border-radius: 3px;
+	}
+}
diff --git a/sticky-portals/README.markdown b/sticky-portals/README.markdown
new file mode 100644
index 0000000..a8b9d5e
--- /dev/null
+++ b/sticky-portals/README.markdown
@@ -0,0 +1,5 @@
+# Sticky Portals
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/MWOWEdb](https://codepen.io/cobra_winfrey/pen/MWOWEdb).
+
+animated generativec SVG turbulence filters
diff --git a/sticky-portals/dist/index.html b/sticky-portals/dist/index.html
new file mode 100644
index 0000000..a955bb4
--- /dev/null
+++ b/sticky-portals/dist/index.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Sticky Portals</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id='wrap'>
+  <div class='cell'>
+    <div class='door'>
+      <div class='outer'>
+        <div class='inner'>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='door'>
+      <div class='outer'>
+        <div class='inner'>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='door'>
+      <div class='outer'>
+        <div class='inner'>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='door'>
+      <div class='outer'>
+        <div class='inner'>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='door'>
+      <div class='outer'>
+        <div class='inner'>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='door'>
+      <div class='outer'>
+        <div class='inner'>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='door'>
+      <div class='outer'>
+        <div class='inner'>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='door'>
+      <div class='outer'>
+        <div class='inner'>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='door'>
+      <div class='outer'>
+        <div class='inner'>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+          <div class='cavern'></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<svg version='1.1' xmlns='http://www.w3.org/2000/svg'>
+  <defs>
+    <filter class='wave' id='wave1'>
+      <feturbulence basefrequency='0.015 0.002' class='turbulence' numoctaves='1' result='noise' seed='13' type='fractalNoise'></feturbulence>
+      <fedisplacementmap class='scale' in2='noise' in='SourceGraphic' scale='282'></fedisplacementmap>
+    </filter>
+    <filter class='wave' id='wave2'>
+      <feturbulence basefrequency='0.015 0.002' class='turbulence' numoctaves='1' result='noise' seed='13' type='fractalNoise'></feturbulence>
+      <fedisplacementmap class='scale' in2='noise' in='SourceGraphic' scale='282'></fedisplacementmap>
+    </filter>
+    <filter class='wave' id='wave3'>
+      <feturbulence basefrequency='0.015 0.002' class='turbulence' numoctaves='1' result='noise' seed='13' type='fractalNoise'></feturbulence>
+      <fedisplacementmap class='scale' in2='noise' in='SourceGraphic' scale='282'></fedisplacementmap>
+    </filter>
+    <filter class='wave' id='wave4'>
+      <feturbulence basefrequency='0.015 0.002' class='turbulence' numoctaves='1' result='noise' seed='13' type='fractalNoise'></feturbulence>
+      <fedisplacementmap class='scale' in2='noise' in='SourceGraphic' scale='282'></fedisplacementmap>
+    </filter>
+    <filter class='wave' id='wave5'>
+      <feturbulence basefrequency='0.015 0.002' class='turbulence' numoctaves='1' result='noise' seed='13' type='fractalNoise'></feturbulence>
+      <fedisplacementmap class='scale' in2='noise' in='SourceGraphic' scale='282'></fedisplacementmap>
+    </filter>
+    <filter class='wave' id='wave6'>
+      <feturbulence basefrequency='0.015 0.002' class='turbulence' numoctaves='1' result='noise' seed='13' type='fractalNoise'></feturbulence>
+      <fedisplacementmap class='scale' in2='noise' in='SourceGraphic' scale='282'></fedisplacementmap>
+    </filter>
+    <filter class='wave' id='wave7'>
+      <feturbulence basefrequency='0.015 0.002' class='turbulence' numoctaves='1' result='noise' seed='13' type='fractalNoise'></feturbulence>
+      <fedisplacementmap class='scale' in2='noise' in='SourceGraphic' scale='282'></fedisplacementmap>
+    </filter>
+    <filter class='wave' id='wave8'>
+      <feturbulence basefrequency='0.015 0.002' class='turbulence' numoctaves='1' result='noise' seed='13' type='fractalNoise'></feturbulence>
+      <fedisplacementmap class='scale' in2='noise' in='SourceGraphic' scale='282'></fedisplacementmap>
+    </filter>
+    <filter class='wave' id='wave9'>
+      <feturbulence basefrequency='0.015 0.002' class='turbulence' numoctaves='1' result='noise' seed='13' type='fractalNoise'></feturbulence>
+      <fedisplacementmap class='scale' in2='noise' in='SourceGraphic' scale='282'></fedisplacementmap>
+    </filter>
+    <filter class='wave' id='wave10'>
+      <feturbulence basefrequency='0.015 0.002' class='turbulence' numoctaves='1' result='noise' seed='13' type='fractalNoise'></feturbulence>
+      <fedisplacementmap class='scale' in2='noise' in='SourceGraphic' scale='282'></fedisplacementmap>
+    </filter>
+    <filter class='wave' id='wave11'>
+      <feturbulence basefrequency='0.015 0.002' class='turbulence' numoctaves='1' result='noise' seed='13' type='fractalNoise'></feturbulence>
+      <fedisplacementmap class='scale' in2='noise' in='SourceGraphic' scale='282'></fedisplacementmap>
+    </filter>
+    <filter class='wave' id='wave12'>
+      <feturbulence basefrequency='0.015 0.002' class='turbulence' numoctaves='1' result='noise' seed='13' type='fractalNoise'></feturbulence>
+      <fedisplacementmap class='scale' in2='noise' in='SourceGraphic' scale='282'></fedisplacementmap>
+    </filter>
+  </defs>
+</svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/sticky-portals/dist/script.js b/sticky-portals/dist/script.js
new file mode 100644
index 0000000..6703969
--- /dev/null
+++ b/sticky-portals/dist/script.js
@@ -0,0 +1,60 @@
+var frames = 0,
+  bfx = [],
+  bfy = [];
+var rad = Math.PI / 180;
+
+function generate() {
+  document.querySelectorAll(".turbulence").forEach((turbulence, index) => {
+    bfx[index] = (Math.floor(Math.random() * 700) + 100) / 30000;
+    bfy[index] = (Math.floor(Math.random() * 250) + 100) / 60000;
+    turbulence.setAttribute("baseFrequency", bfx[index] + " " + bfy[index]);
+  });
+  document.querySelectorAll(".cavern").forEach((cavern, index) => {
+    cavern.style.setProperty(
+      "--scale",
+      Math.floor(Math.random() * 10) + 5 + "%"
+    );
+    cavern.style.setProperty(
+      "--left",
+      Math.floor(Math.random() * 100) + "%"
+    );
+    cavern.style.setProperty(
+      "--translate",
+      (Math.floor(Math.random() * 60) - 30) / 10 + "vmin"
+    );
+    cavern.style.setProperty(
+      "--color1", "var(--color" +
+      (Math.floor(Math.random() * 5) + 4) + ")"
+    );
+    cavern.style.setProperty(
+      "--color2", "var(--color" +
+      (Math.floor(Math.random() * 5) + 4) + ")"
+    );
+    cavern.style.setProperty(
+      "--color3", "var(--color" +
+      (Math.floor(Math.random() * 5) + 4) + ")"
+    );
+  });
+}
+
+function animate() {
+  document.querySelectorAll(".turbulence").forEach((turbulence, index) => {
+    bfx[index] += ([index] / 1.25 / 100000) * Math.cos(frames * rad);
+    bfy[index] += ([index] / 1.25 / 150000) * Math.sin(frames * rad);
+    frames += 0.25;
+    turbulence.setAttribute("baseFrequency", bfx[index] + " " + bfy[index]);
+  });
+  window.requestAnimationFrame(animate);
+}
+
+generate();
+
+document.addEventListener(
+  "click",
+  function (event) {
+    generate();
+  },
+  false
+);
+
+window.requestAnimationFrame(animate);
\ No newline at end of file
diff --git a/sticky-portals/dist/style.css b/sticky-portals/dist/style.css
new file mode 100644
index 0000000..8f9c91e
--- /dev/null
+++ b/sticky-portals/dist/style.css
@@ -0,0 +1,417 @@
+@charset "UTF-8";
+@font-face {
+  font-family: "Machinkly";
+  src: url("https://assets.codepen.io/383755/Machinkly.woff2") format("woff2");
+}
+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  --w: #c0cdd7;
+  --t: transparent;
+  background: #000;
+  overflow: hidden;
+  cursor: pointer;
+}
+body * {
+  transform-style: preserve-3d;
+  transform: translateZ(0px);
+}
+body svg {
+  position: absolute;
+}
+body #wrap {
+  width: 90vmin;
+  height: 90vmin;
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  background: linear-gradient(to bottom, var(--t) calc(50% - 0.5px), var(--w) calc(50% - 0.5px), var(--w) calc(50% + 0.5px), var(--t) calc(50% + 0.5px)), linear-gradient(to right, var(--t) calc(50% - 0.5px), var(--w) calc(50% - 0.5px), var(--w) calc(50% + 0.5px), var(--t) calc(50% + 0.5px)), linear-gradient(45deg, var(--t) calc(50% - 0.5px), var(--w) calc(50% - 0.5px), var(--w) calc(50% + 0.5px), var(--t) calc(50% + 0.5px)), linear-gradient(-45deg, var(--t) calc(50% - 0.5px), var(--w) calc(50% - 0.5px), var(--w) calc(50% + 0.5px), var(--t) calc(50% + 0.5px));
+  box-shadow: inset 0 0 0 15vmin #000, inset 0 0 0 calc(15vmin + 1px) var(--w);
+  font-family: "Machinkly";
+}
+body #wrap:before, body #wrap:after {
+  letter-spacing: 0.5vmin;
+  color: var(--w);
+  position: absolute;
+  font-size: 1.5vmin;
+  top: -2.5vmin;
+}
+body #wrap:before {
+  content: "regenerate";
+  left: 100%;
+  padding-left: 3vmin;
+  transform-origin: 0% 50%;
+  transform: rotate(90deg);
+  letter-spacing: 0.75vmin;
+  background: linear-gradient(to bottom, var(--t) calc(50% - 0.5px), var(--w) calc(50% - 0.5px), var(--w) calc(50% + 0.5px), var(--t) calc(50% + 0.5px)) 0% 50%/2vmin 100% no-repeat;
+}
+body #wrap:after {
+  content: "click to";
+  right: 0vmin;
+  padding-right: 3vmin;
+  background: linear-gradient(to bottom, var(--t) calc(50% - 0.5px), var(--w) calc(50% - 0.5px), var(--w) calc(50% + 0.5px), var(--t) calc(50% + 0.5px)) 100% 50%/2.5vmin 100% no-repeat;
+}
+body #wrap .cell {
+  position: relative;
+}
+body #wrap .cell:nth-of-type(even) {
+  transform: scaleX(-1) translateZ(0px);
+}
+body #wrap .cell:nth-of-type(even) .door:before, body #wrap .cell:nth-of-type(even) .door:after {
+  content: "𖤐";
+  left: calc(50% - 4vmin);
+  top: -10vmin;
+}
+body #wrap .cell:nth-of-type(even) .door:after {
+  top: auto;
+  bottom: -10vmin;
+}
+body #wrap .cell:nth-of-type(1) .inner .cavern:nth-of-type(1) {
+  filter: url(#wave2);
+}
+body #wrap .cell:nth-of-type(1) .inner .cavern:nth-of-type(1):before {
+  -webkit-animation-delay: -0.01s;
+          animation-delay: -0.01s;
+}
+body #wrap .cell:nth-of-type(1) .inner .cavern:nth-of-type(2) {
+  filter: url(#wave3);
+}
+body #wrap .cell:nth-of-type(1) .inner .cavern:nth-of-type(2):before {
+  -webkit-animation-delay: -0.04s;
+          animation-delay: -0.04s;
+}
+body #wrap .cell:nth-of-type(1) .inner .cavern:nth-of-type(3) {
+  filter: url(#wave4);
+}
+body #wrap .cell:nth-of-type(1) .inner .cavern:nth-of-type(3):before {
+  -webkit-animation-delay: -0.09s;
+          animation-delay: -0.09s;
+}
+body #wrap .cell:nth-of-type(2) .inner .cavern:nth-of-type(1) {
+  filter: url(#wave3);
+}
+body #wrap .cell:nth-of-type(2) .inner .cavern:nth-of-type(1):before {
+  -webkit-animation-delay: -0.04s;
+          animation-delay: -0.04s;
+}
+body #wrap .cell:nth-of-type(2) .inner .cavern:nth-of-type(2) {
+  filter: url(#wave4);
+}
+body #wrap .cell:nth-of-type(2) .inner .cavern:nth-of-type(2):before {
+  -webkit-animation-delay: -0.16s;
+          animation-delay: -0.16s;
+}
+body #wrap .cell:nth-of-type(2) .inner .cavern:nth-of-type(3) {
+  filter: url(#wave5);
+}
+body #wrap .cell:nth-of-type(2) .inner .cavern:nth-of-type(3):before {
+  -webkit-animation-delay: -0.36s;
+          animation-delay: -0.36s;
+}
+body #wrap .cell:nth-of-type(3) .inner .cavern:nth-of-type(1) {
+  filter: url(#wave4);
+}
+body #wrap .cell:nth-of-type(3) .inner .cavern:nth-of-type(1):before {
+  -webkit-animation-delay: -0.09s;
+          animation-delay: -0.09s;
+}
+body #wrap .cell:nth-of-type(3) .inner .cavern:nth-of-type(2) {
+  filter: url(#wave5);
+}
+body #wrap .cell:nth-of-type(3) .inner .cavern:nth-of-type(2):before {
+  -webkit-animation-delay: -0.36s;
+          animation-delay: -0.36s;
+}
+body #wrap .cell:nth-of-type(3) .inner .cavern:nth-of-type(3) {
+  filter: url(#wave6);
+}
+body #wrap .cell:nth-of-type(3) .inner .cavern:nth-of-type(3):before {
+  -webkit-animation-delay: -0.81s;
+          animation-delay: -0.81s;
+}
+body #wrap .cell:nth-of-type(4) .inner .cavern:nth-of-type(1) {
+  filter: url(#wave5);
+}
+body #wrap .cell:nth-of-type(4) .inner .cavern:nth-of-type(1):before {
+  -webkit-animation-delay: -0.16s;
+          animation-delay: -0.16s;
+}
+body #wrap .cell:nth-of-type(4) .inner .cavern:nth-of-type(2) {
+  filter: url(#wave6);
+}
+body #wrap .cell:nth-of-type(4) .inner .cavern:nth-of-type(2):before {
+  -webkit-animation-delay: -0.64s;
+          animation-delay: -0.64s;
+}
+body #wrap .cell:nth-of-type(4) .inner .cavern:nth-of-type(3) {
+  filter: url(#wave7);
+}
+body #wrap .cell:nth-of-type(4) .inner .cavern:nth-of-type(3):before {
+  -webkit-animation-delay: -1.44s;
+          animation-delay: -1.44s;
+}
+body #wrap .cell:nth-of-type(5) .inner .cavern:nth-of-type(1) {
+  filter: url(#wave6);
+}
+body #wrap .cell:nth-of-type(5) .inner .cavern:nth-of-type(1):before {
+  -webkit-animation-delay: -0.25s;
+          animation-delay: -0.25s;
+}
+body #wrap .cell:nth-of-type(5) .inner .cavern:nth-of-type(2) {
+  filter: url(#wave7);
+}
+body #wrap .cell:nth-of-type(5) .inner .cavern:nth-of-type(2):before {
+  -webkit-animation-delay: -1s;
+          animation-delay: -1s;
+}
+body #wrap .cell:nth-of-type(5) .inner .cavern:nth-of-type(3) {
+  filter: url(#wave8);
+}
+body #wrap .cell:nth-of-type(5) .inner .cavern:nth-of-type(3):before {
+  -webkit-animation-delay: -2.25s;
+          animation-delay: -2.25s;
+}
+body #wrap .cell:nth-of-type(6) .inner .cavern:nth-of-type(1) {
+  filter: url(#wave7);
+}
+body #wrap .cell:nth-of-type(6) .inner .cavern:nth-of-type(1):before {
+  -webkit-animation-delay: -0.36s;
+          animation-delay: -0.36s;
+}
+body #wrap .cell:nth-of-type(6) .inner .cavern:nth-of-type(2) {
+  filter: url(#wave8);
+}
+body #wrap .cell:nth-of-type(6) .inner .cavern:nth-of-type(2):before {
+  -webkit-animation-delay: -1.44s;
+          animation-delay: -1.44s;
+}
+body #wrap .cell:nth-of-type(6) .inner .cavern:nth-of-type(3) {
+  filter: url(#wave9);
+}
+body #wrap .cell:nth-of-type(6) .inner .cavern:nth-of-type(3):before {
+  -webkit-animation-delay: -3.24s;
+          animation-delay: -3.24s;
+}
+body #wrap .cell:nth-of-type(7) .inner .cavern:nth-of-type(1) {
+  filter: url(#wave8);
+}
+body #wrap .cell:nth-of-type(7) .inner .cavern:nth-of-type(1):before {
+  -webkit-animation-delay: -0.49s;
+          animation-delay: -0.49s;
+}
+body #wrap .cell:nth-of-type(7) .inner .cavern:nth-of-type(2) {
+  filter: url(#wave9);
+}
+body #wrap .cell:nth-of-type(7) .inner .cavern:nth-of-type(2):before {
+  -webkit-animation-delay: -1.96s;
+          animation-delay: -1.96s;
+}
+body #wrap .cell:nth-of-type(7) .inner .cavern:nth-of-type(3) {
+  filter: url(#wave10);
+}
+body #wrap .cell:nth-of-type(7) .inner .cavern:nth-of-type(3):before {
+  -webkit-animation-delay: -4.41s;
+          animation-delay: -4.41s;
+}
+body #wrap .cell:nth-of-type(8) .inner .cavern:nth-of-type(1) {
+  filter: url(#wave9);
+}
+body #wrap .cell:nth-of-type(8) .inner .cavern:nth-of-type(1):before {
+  -webkit-animation-delay: -0.64s;
+          animation-delay: -0.64s;
+}
+body #wrap .cell:nth-of-type(8) .inner .cavern:nth-of-type(2) {
+  filter: url(#wave10);
+}
+body #wrap .cell:nth-of-type(8) .inner .cavern:nth-of-type(2):before {
+  -webkit-animation-delay: -2.56s;
+          animation-delay: -2.56s;
+}
+body #wrap .cell:nth-of-type(8) .inner .cavern:nth-of-type(3) {
+  filter: url(#wave11);
+}
+body #wrap .cell:nth-of-type(8) .inner .cavern:nth-of-type(3):before {
+  -webkit-animation-delay: -5.76s;
+          animation-delay: -5.76s;
+}
+body #wrap .cell:nth-of-type(9) .inner .cavern:nth-of-type(1) {
+  filter: url(#wave10);
+}
+body #wrap .cell:nth-of-type(9) .inner .cavern:nth-of-type(1):before {
+  -webkit-animation-delay: -0.81s;
+          animation-delay: -0.81s;
+}
+body #wrap .cell:nth-of-type(9) .inner .cavern:nth-of-type(2) {
+  filter: url(#wave11);
+}
+body #wrap .cell:nth-of-type(9) .inner .cavern:nth-of-type(2):before {
+  -webkit-animation-delay: -3.24s;
+          animation-delay: -3.24s;
+}
+body #wrap .cell:nth-of-type(9) .inner .cavern:nth-of-type(3) {
+  filter: url(#wave12);
+}
+body #wrap .cell:nth-of-type(9) .inner .cavern:nth-of-type(3):before {
+  -webkit-animation-delay: -7.29s;
+          animation-delay: -7.29s;
+}
+body .door {
+  width: 60vmin;
+  height: 75vmin;
+  position: absolute;
+  padding: 3vmin;
+  box-shadow: 0 0 0 6vmin #000, 0 0 0 calc(6vmin + 4px) var(--w), 0 0 0 10vmin #000;
+  box-sizing: border-box;
+  border-radius: 75vmin 75vmin 0 0;
+  transform: translate(-50%, -50%) scale(0.3) translateZ(0px);
+  top: 50%;
+  left: 50%;
+}
+body .door:before, body .door:after {
+  content: "✦";
+  color: var(--w);
+  font-size: 5vmin;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+  display: flex;
+  background: #000;
+  position: absolute;
+  box-sizing: border-box;
+  width: 8vmin;
+  height: 8vmin;
+  left: -10.5vmin;
+  top: calc(50% - 4vmin);
+  -webkit-animation: spin 20s linear infinite;
+          animation: spin 20s linear infinite;
+}
+@-webkit-keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+body .door:after {
+  left: auto;
+  right: -10.5vmin;
+}
+body .door .outer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: #000;
+  overflow: hidden;
+  border-radius: inherit;
+}
+body .door .inner {
+  transform: translateY(-10vmin) translateZ(0px);
+  position: absolute;
+  width: 115%;
+  height: 140%;
+  left: -5%;
+  top: -5%;
+  background: #000;
+  --color4:#ff00eb;
+  --color5:#0000ff;
+  --color6:#00beff;
+  --color7: #ffbb00;
+  --color8: #c0cdd7;
+}
+body .door .cavern {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border-radius: 50vmin;
+}
+body .door .cavern:before {
+  content: "";
+  position: absolute;
+  width: var(--scale);
+  height: var(--scale);
+  top: 42.5%;
+  left: var(--left);
+  background: var(--color1);
+  border-radius: 100%;
+  transform: translateZ(0px) translateY(-100vmin) scale(2);
+  -webkit-animation: updown 8s ease-in-out infinite alternate;
+          animation: updown 8s ease-in-out infinite alternate;
+}
+body .door .cavern:nth-of-type(1) {
+  transform: translate(calc((-50% - 2.5vmin) + var(--translate)), calc(-50% + var(--translate))) scale(0.45) translateZ(0px);
+  width: 115%;
+  height: 70%;
+  z-index: 1;
+}
+@-webkit-keyframes updown {
+  50% {
+    transform: translateZ(0px) translateY(0vmin) scale(1);
+  }
+  100% {
+    transform: translateZ(0px) translateY(100vmin) scale(2);
+  }
+}
+@keyframes updown {
+  50% {
+    transform: translateZ(0px) translateY(0vmin) scale(1);
+  }
+  100% {
+    transform: translateZ(0px) translateY(100vmin) scale(2);
+  }
+}
+body .door .cavern:nth-of-type(3) {
+  box-shadow: inset 0 0 5vmin 7.5vmin var(--color1), inset 0 0 0 18.6666666667vmin var(--color2), 0 0 5vmin 22.5vmin var(--color1), 0 0 0 150vmin var(--color3);
+}
+body .door .cavern:nth-of-type(2) {
+  transform: translate(calc((-50% - 2.5vmin) + var(--translate)), calc(-50% + var(--translate))) scale(0.45) translateZ(0px);
+  width: 140%;
+  height: 115%;
+  z-index: 2;
+}
+@keyframes updown {
+  50% {
+    transform: translateZ(0px) translateY(0vmin) scale(1);
+  }
+  100% {
+    transform: translateZ(0px) translateY(100vmin) scale(2);
+  }
+}
+body .door .cavern:nth-of-type(2) {
+  box-shadow: inset 0 0 5vmin 6vmin var(--color1), inset 0 0 0 13.3333333333vmin var(--color2), 0 0 5vmin 15vmin var(--color1), 0 0 0 100vmin var(--color3);
+}
+body .door .cavern:nth-of-type(3) {
+  transform: translate(calc((-50% - 2.5vmin) + var(--translate)), calc(-50% + var(--translate))) scale(0.45) translateZ(0px);
+  width: 165%;
+  height: 160%;
+  z-index: 3;
+}
+@keyframes updown {
+  50% {
+    transform: translateZ(0px) translateY(0vmin) scale(1);
+  }
+  100% {
+    transform: translateZ(0px) translateY(100vmin) scale(2);
+  }
+}
+body .door .cavern:nth-of-type(1) {
+  box-shadow: inset 0 0 5vmin 4.5vmin var(--color1), inset 0 0 0 8vmin var(--color2), 0 0 5vmin 7.5vmin var(--color1), 0 0 0 50vmin var(--color3);
+}
+
+svg {
+  pointer-events: none;
+  width: 100vw;
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/sticky-portals/license.txt b/sticky-portals/license.txt
new file mode 100644
index 0000000..30e5c4f
--- /dev/null
+++ b/sticky-portals/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/MWOWEdb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/sticky-portals/src/index.haml b/sticky-portals/src/index.haml
new file mode 100644
index 0000000..3f0b64b
--- /dev/null
+++ b/sticky-portals/src/index.haml
@@ -0,0 +1,16 @@
+#wrap
+  -9.times do
+    .cell
+      .door
+        .outer
+          .inner
+            - (1..3).each do |i|
+              .cavern
+
+
+%svg{ :version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
+  %defs
+    - (1..12).each do |i|
+      %filter{:id => "wave#{i}", :class => "wave"}
+        %feturbulence{:class => "turbulence", :basefrequency => "0.015 0.002", :numoctaves => "1", :result => "noise", :seed => "13", :type => "fractalNoise"}
+        %fedisplacementmap{:class => "scale",:in => "SourceGraphic", :in2 => "noise", :scale => "282"}
\ No newline at end of file
diff --git a/sticky-portals/src/script.js b/sticky-portals/src/script.js
new file mode 100644
index 0000000..7484a5b
--- /dev/null
+++ b/sticky-portals/src/script.js
@@ -0,0 +1,60 @@
+var frames = 0,
+  bfx = [],
+  bfy = [];
+var rad = Math.PI / 180;
+
+function generate() {
+  document.querySelectorAll(".turbulence").forEach((turbulence, index) => {
+    bfx[index] = (Math.floor(Math.random() * 700) + 100) / 30000;
+    bfy[index] = (Math.floor(Math.random() * 250) + 100) / 60000;
+    turbulence.setAttribute("baseFrequency", bfx[index] + " " + bfy[index]);
+  });
+  document.querySelectorAll(".cavern").forEach((cavern, index) => {
+    cavern.style.setProperty(
+      "--scale",
+      Math.floor(Math.random() * 10) + 5 + "%"
+    );
+    cavern.style.setProperty(
+      "--left",
+      Math.floor(Math.random() * 100) + "%"
+    );
+    cavern.style.setProperty(
+      "--translate",
+      (Math.floor(Math.random() * 60) - 30) / 10 + "vmin"
+    );
+    cavern.style.setProperty(
+      "--color1", "var(--color" +
+      (Math.floor(Math.random() * 5) + 4) + ")"
+    );
+    cavern.style.setProperty(
+      "--color2", "var(--color" +
+      (Math.floor(Math.random() * 5) + 4) + ")"
+    );
+    cavern.style.setProperty(
+      "--color3", "var(--color" +
+      (Math.floor(Math.random() * 5) + 4) + ")"
+    );
+  });
+}
+
+function animate() {
+  document.querySelectorAll(".turbulence").forEach((turbulence, index) => {
+    bfx[index] += ([index] / 1.25 / 100000) * Math.cos(frames * rad);
+    bfy[index] += ([index] / 1.25 / 150000) * Math.sin(frames * rad);
+    frames += 0.25;
+    turbulence.setAttribute("baseFrequency", bfx[index] + " " + bfy[index]);
+  });
+  window.requestAnimationFrame(animate);
+}
+
+generate();
+
+document.addEventListener(
+  "click",
+  function (event) {
+    generate();
+  },
+  false
+);
+
+window.requestAnimationFrame(animate);
diff --git a/sticky-portals/src/style.scss b/sticky-portals/src/style.scss
new file mode 100644
index 0000000..3881da1
--- /dev/null
+++ b/sticky-portals/src/style.scss
@@ -0,0 +1,241 @@
+
+@font-face {
+  font-family:'Machinkly';
+  src: url("https://assets.codepen.io/383755/Machinkly.woff2") format("woff2");
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  --w: #c0cdd7;
+  --t: transparent;
+  background: #000;
+  overflow:hidden;
+  cursor:pointer;
+  * {
+    transform-style: preserve-3d;
+    transform: translateZ(0px);
+  }
+  svg {
+    position: absolute;
+  }
+  #wrap {
+    width: 90vmin;
+    height: 90vmin;
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    background: linear-gradient(
+        to bottom,
+        var(--t) calc(50% - 0.5px),
+        var(--w) calc(50% - 0.5px),
+        var(--w) calc(50% + 0.5px),
+        var(--t) calc(50% + 0.5px)
+      ),
+      linear-gradient(
+        to right,
+        var(--t) calc(50% - 0.5px),
+        var(--w) calc(50% - 0.5px),
+        var(--w) calc(50% + 0.5px),
+        var(--t) calc(50% + 0.5px)
+      ),
+      linear-gradient(
+        45deg,
+        var(--t) calc(50% - 0.5px),
+        var(--w) calc(50% - 0.5px),
+        var(--w) calc(50% + 0.5px),
+        var(--t) calc(50% + 0.5px)
+      ),
+      linear-gradient(
+        -45deg,
+        var(--t) calc(50% - 0.5px),
+        var(--w) calc(50% - 0.5px),
+        var(--w) calc(50% + 0.5px),
+        var(--t) calc(50% + 0.5px)
+      );
+    box-shadow: inset 0 0 0 15vmin #000, inset 0 0 0 calc(15vmin + 1px) var(--w);
+    font-family:'Machinkly';
+    &:before, &:after{
+      letter-spacing:0.5vmin;
+      color:var(--w);
+      position:absolute;
+      font-size:1.5vmin;
+      top:-2.5vmin;
+    }
+    &:before{
+      content:'regenerate';
+      left:100%;
+      padding-left:3vmin;
+      transform-origin:0% 50%;
+      transform:rotate(90deg);
+      letter-spacing:0.75vmin;
+      background:linear-gradient(to bottom, var(--t) calc(50% - 0.5px), var(--w) calc(50% - 0.5px), var(--w) calc(50% + 0.5px), var(--t) calc(50% + 0.5px)) 0% 50% / 2vmin 100% no-repeat;
+    }
+    &:after{
+      content:'click to';
+      right:0vmin;
+      padding-right:3vmin;
+      background:linear-gradient(to bottom, var(--t) calc(50% - 0.5px), var(--w) calc(50% - 0.5px), var(--w) calc(50% + 0.5px), var(--t) calc(50% + 0.5px)) 100% 50% / 2.5vmin 100% no-repeat;
+    }
+    .cell {
+      position: relative;
+      &:nth-of-type(even) {
+        transform: scaleX(-1) translateZ(0px);
+        .door {
+          &:before,
+          &:after {
+            content: "𖤐";
+            left: calc(50% - 4vmin);
+            top: -10vmin;
+          }
+          &:after {
+            top: auto;
+            bottom: -10vmin;
+          }
+        }
+      }
+      @for $i from 1 through 9 {
+        &:nth-of-type(#{$i}) {
+          .inner {
+            .cavern {
+              @for $j from 1 through 3 {
+                &:nth-of-type(#{$j}) {
+                  filter: url(#wave#{$j + $i});
+                  &:before{
+                    animation-delay:#{(($i * $i) * ($j * $j))/-100}s;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .door {
+    width: 60vmin;
+    height: 75vmin;
+    position: absolute;
+    padding: 3vmin;
+    box-shadow: 0 0 0 6vmin #000, 0 0 0 calc(6vmin + 4px) var(--w),
+      0 0 0 10vmin #000;
+    box-sizing: border-box;
+    border-radius: 75vmin 75vmin 0 0;
+    transform: translate(-50%, -50%) scale(0.3) translateZ(0px);
+    top: 50%;
+    left: 50%;
+    &:before,
+    &:after {
+      content: "✦";
+      color: var(--w);
+      font-size: 5vmin;
+      justify-content: center;
+      align-items: center;
+      border-radius: 100%;
+      display: flex;
+      background: #000;
+      position: absolute;
+      box-sizing: border-box;
+      width: 8vmin;
+      height: 8vmin;
+      left: -10.5vmin;
+      top: calc(50% - 4vmin);
+      animation:spin 20s linear infinite;
+      @keyframes spin{
+        to{
+          transform:rotate(360deg);
+        }
+      }
+    }
+    &:after {
+      left: auto;
+      right: -10.5vmin;
+    }
+    .outer {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background: #000;
+      overflow: hidden;
+      border-radius: inherit;
+    }
+    .inner {
+      transform: translateY(-10vmin) translateZ(0px);
+      position: absolute;
+      width: 115%;
+      height: 140%;
+      left: -5%;
+      top: -5%;
+      background: #000;
+      --color4:#ff00eb;
+      --color5:#0000ff;
+      --color6:#00beff;
+      --color7: #ffbb00;
+      --color8: #c0cdd7;
+    }
+
+    .cavern {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      border-radius: 50vmin;
+      &:before{
+        content:'';
+        position:absolute;
+        width:var(--scale);
+        height:var(--scale);
+        top:42.5%;
+        left:var(--left);
+        background:var(--color1);
+        border-radius:100%;
+        transform:translateZ(0px) translateY(-100vmin) scale(2);
+        animation:updown 8s ease-in-out infinite alternate;
+      }
+      @for $i from 1 through 3 {
+        &:nth-of-type(#{$i}) {
+          transform: translate(
+              calc((-50% - 2.5vmin) + var(--translate)),
+              calc(-50% + var(--translate))
+            )
+            scale(0.45)
+            translateZ(0px);
+          width: #{(($i * 3) * 15%) + 10% + ((4 - $i) * 20%)};
+          height: #{(($i * 3) * 15%) + 25%};
+          z-index: #{$i};
+          &:before{
+            @keyframes updown{
+              50%{
+                transform:translateZ(0px) translateY(0vmin) scale(1);
+              }
+              100%{
+                transform:translateZ(0px) translateY(100vmin) scale(2);
+              }
+            }
+          }
+        }
+        &:nth-of-type(#{4 - $i}) {
+          box-shadow: inset 0 0 5vmin #{((3 - ($i/2)) * 3)}vmin var(--color1),
+            inset 0 0 0 #{((3 - ($i/1.5)) * 8)}vmin var(--color2),
+            0 0 5vmin #{((4 - $i) * 7.5)}vmin var(--color1),
+            0 0 0 #{((4 - $i) * 50)}vmin var(--color3);
+        }
+      }
+    }
+  }
+}
+
+svg {
+  pointer-events: none;
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/striped-art-for-cpc-lines-and-codepenchallenge/README.markdown b/striped-art-for-cpc-lines-and-codepenchallenge/README.markdown
new file mode 100644
index 0000000..b1b6d98
--- /dev/null
+++ b/striped-art-for-cpc-lines-and-codepenchallenge/README.markdown
@@ -0,0 +1,4 @@
+# Striped Art for cpc-lines and codepenChallenge 
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/artyschein/pen/oNXNQbO](https://codepen.io/artyschein/pen/oNXNQbO).
+
+ 
\ No newline at end of file
diff --git a/striped-art-for-cpc-lines-and-codepenchallenge/dist/index.html b/striped-art-for-cpc-lines-and-codepenchallenge/dist/index.html
new file mode 100644
index 0000000..252a49d
--- /dev/null
+++ b/striped-art-for-cpc-lines-and-codepenchallenge/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Striped Art for cpc-lines and codepenChallenge </title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class='artboard'></div>
+<a class='collection' href='https://codepen.io/collection/AryRaN/' target='_blank'>Stripped art<br>collection</a>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/striped-art-for-cpc-lines-and-codepenchallenge/dist/script.js b/striped-art-for-cpc-lines-and-codepenchallenge/dist/script.js
new file mode 100644
index 0000000..539aeb2
--- /dev/null
+++ b/striped-art-for-cpc-lines-and-codepenchallenge/dist/script.js
@@ -0,0 +1,13 @@
+CSS.registerProperty({
+	name: '--angle',
+	syntax: '<angle>',
+	initialValue: '0deg',
+	inherits: true,
+})
+
+CSS.registerProperty({
+	name: '--angle2',
+	syntax: '<angle>',
+	initialValue: '90deg',
+	inherits: true,
+})
\ No newline at end of file
diff --git a/striped-art-for-cpc-lines-and-codepenchallenge/dist/style.css b/striped-art-for-cpc-lines-and-codepenchallenge/dist/style.css
new file mode 100644
index 0000000..b40cebc
--- /dev/null
+++ b/striped-art-for-cpc-lines-and-codepenchallenge/dist/style.css
@@ -0,0 +1,92 @@
+@import url("https://fonts.googleapis.com/css?family=Anton");
+body {
+  height: 100vh;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+  background: white;
+}
+
+.collection {
+  font-family: "Anton", Sans-serif;
+  color: #333333;
+  display: inline-block;
+  position: fixed;
+  bottom: 15px;
+  right: 15px;
+  font-size: 18px;
+  text-decoration: none;
+  text-align: center;
+  line-height: 0.9;
+}
+.collection::first-line {
+  color: crimson;
+  font-size: 14px;
+  text-transform: uppercase;
+}
+
+.artboard {
+  width: 340px;
+  height: 340px;
+  border: 20px solid #333;
+  box-shadow: 0 2px 15px 5px rgba(51, 51, 51, 0.15);
+  background-size: 201px 201px;
+  background-repeat: no-repeat;
+  --angle: 0deg;
+  --angle2: 90deg;
+  background-image: repeating-linear-gradient(calc(2 * var(--angle)), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(var(--angle2), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(calc(4 * var(--angle)), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(var(--angle2), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(calc(6 * var(--angle)), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(var(--angle2), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(calc(8 * var(--angle)), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(var(--angle2), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(calc(10 * var(--angle)), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(var(--angle2), #333 0px, #333 1px, transparent 1px, transparent 20px);
+  background-position: 50% 50%;
+  -webkit-animation: gridMovement 8s linear infinite;
+          animation: gridMovement 8s linear infinite;
+}
+
+@-webkit-keyframes gridMovement {
+  25%, 45% {
+    background-position: 47% 47%, 49% 49%, 51% 51%, 53% 53%, 55% 55%;
+    --angle: 0deg;
+    --angle2: 90deg;
+  }
+  50%, 70% {
+    background-position: 50% 50%;
+    --angle: 5deg;
+    --angle2: 88deg;
+  }
+  75% {
+    --angle: 0deg;
+    --angle2: 90deg;
+    background-position: 35% 35%, 45% 45%, 55% 55%, 65% 65%, 75% 75%;
+  }
+  95% {
+    background-position: 35% 35%, 45% 45%, 55% 55%, 65% 65%, 75% 75%;
+  }
+  20%, 100% {
+    background-position: 50% 50%;
+  }
+}
+
+@keyframes gridMovement {
+  25%, 45% {
+    background-position: 47% 47%, 49% 49%, 51% 51%, 53% 53%, 55% 55%;
+    --angle: 0deg;
+    --angle2: 90deg;
+  }
+  50%, 70% {
+    background-position: 50% 50%;
+    --angle: 5deg;
+    --angle2: 88deg;
+  }
+  75% {
+    --angle: 0deg;
+    --angle2: 90deg;
+    background-position: 35% 35%, 45% 45%, 55% 55%, 65% 65%, 75% 75%;
+  }
+  95% {
+    background-position: 35% 35%, 45% 45%, 55% 55%, 65% 65%, 75% 75%;
+  }
+  20%, 100% {
+    background-position: 50% 50%;
+  }
+}
\ No newline at end of file
diff --git a/striped-art-for-cpc-lines-and-codepenchallenge/license.txt b/striped-art-for-cpc-lines-and-codepenchallenge/license.txt
new file mode 100644
index 0000000..004eedb
--- /dev/null
+++ b/striped-art-for-cpc-lines-and-codepenchallenge/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Artem (https://codepen.io/artyschein/pen/oNXNQbO)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/striped-art-for-cpc-lines-and-codepenchallenge/src/index.haml b/striped-art-for-cpc-lines-and-codepenchallenge/src/index.haml
new file mode 100644
index 0000000..e6ea502
--- /dev/null
+++ b/striped-art-for-cpc-lines-and-codepenchallenge/src/index.haml
@@ -0,0 +1,4 @@
+.artboard
+	
+
+%a.collection(href="https://codepen.io/collection/AryRaN/" target="_blank") Stripped art<br>collection
diff --git a/striped-art-for-cpc-lines-and-codepenchallenge/src/script.js b/striped-art-for-cpc-lines-and-codepenchallenge/src/script.js
new file mode 100644
index 0000000..539aeb2
--- /dev/null
+++ b/striped-art-for-cpc-lines-and-codepenchallenge/src/script.js
@@ -0,0 +1,13 @@
+CSS.registerProperty({
+	name: '--angle',
+	syntax: '<angle>',
+	initialValue: '0deg',
+	inherits: true,
+})
+
+CSS.registerProperty({
+	name: '--angle2',
+	syntax: '<angle>',
+	initialValue: '90deg',
+	inherits: true,
+})
\ No newline at end of file
diff --git a/striped-art-for-cpc-lines-and-codepenchallenge/src/style.sass b/striped-art-for-cpc-lines-and-codepenchallenge/src/style.sass
new file mode 100644
index 0000000..e782853
--- /dev/null
+++ b/striped-art-for-cpc-lines-and-codepenchallenge/src/style.sass
@@ -0,0 +1,68 @@
+$bg: white
+$border: #333
+$num: 5
+@import url("https://fonts.googleapis.com/css?family=Anton")
+
+body
+	height: 100vh
+	display: flex
+	align-items: center
+	justify-content: center
+	background: $bg
+
+.collection
+	font-family: 'Anton', Sans-serif
+	color: #333333
+	display: inline-block
+	position: fixed
+	bottom: 15px
+	right: 15px
+	font-size: 18px
+	text-decoration: none
+	text-align: center
+	line-height: .9
+	&::first-line
+		color: crimson
+		font-size: 14px
+		text-transform: uppercase
+
+.artboard
+	width: 340px
+	height: 340px
+	border: 20px solid $border
+	box-shadow: 0 2px 15px 5px rgba($border, .15)
+	background-size: 201px 201px
+	background-repeat: no-repeat
+	$bgImg: ()
+	$bgPos: ()
+	--angle: 0deg
+	--angle2: 90deg
+	@for $i from 1 through $num
+		$bgImg: $bgImg, repeating-linear-gradient(calc(#{$i*2} * var(--angle)), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(var(--angle2), #333 0px, #333 1px, transparent 1px, transparent 20px)
+		$bgPos: $bgPos, (50 + ($i*2) * 1%) (50 + ($i*2) * 1%)
+	background-image: $bgImg
+	background-position: 50% 50%
+	animation: gridMovement 8s linear infinite
+
+@keyframes gridMovement
+	$bgPos: ()
+	$bgPos2: ()
+	@for $i from 1 through $num
+		$bgPos: $bgPos, (50 + ($i*2) - ceil($num/2 * 2) * 1%) (50 + ($i*2) - ceil($num/2 * 2) * 1%)	
+		$bgPos2: $bgPos2, (50 + ($i*10) - ceil($num/2 * 10) * 1%) (50 + ($i*10) - ceil($num/2 * 10) * 1%)	
+	25%, 45%
+		background-position: $bgPos
+		--angle: 0deg
+		--angle2: 90deg
+	50%, 70%
+		background-position: 50% 50%
+		--angle: 5deg
+		--angle2: 88deg
+	75%
+		--angle: 0deg
+		--angle2: 90deg
+		background-position: $bgPos2
+	95%
+		background-position: $bgPos2
+	20%, 100%
+		background-position: 50% 50%
\ No newline at end of file
diff --git a/styled-color-input/README.markdown b/styled-color-input/README.markdown
new file mode 100644
index 0000000..59039d3
--- /dev/null
+++ b/styled-color-input/README.markdown
@@ -0,0 +1,5 @@
+# Styled Color Input
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/leemartin/pen/ExPXRzx](https://codepen.io/leemartin/pen/ExPXRzx).
+
+Styling the standard HTML color input so it looks like a Pantone swatch
diff --git a/styled-color-input/dist/index.html b/styled-color-input/dist/index.html
new file mode 100644
index 0000000..4d39792
--- /dev/null
+++ b/styled-color-input/dist/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Styled Color Input</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="swatch">
+  <input type="color" id="color" name="color" value="#FF0000">
+  <div class="info">
+    <h1>Input</h1>
+    <h2>Color</h2>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/styled-color-input/dist/style.css b/styled-color-input/dist/style.css
new file mode 100644
index 0000000..91ef716
--- /dev/null
+++ b/styled-color-input/dist/style.css
@@ -0,0 +1,71 @@
+html, body{
+  height: 100%;
+  width: 100%;
+}
+
+html{
+  font: 2.2vh Helvetica-Neue, Helvetica, sans-serif;
+}
+
+body{
+  align-items: center;
+  background: whitesmoke;
+  display: flex;
+  justify-content: center;
+}
+
+#swatch{
+  background: white;
+  box-shadow: 1em 1em 1em rgba(0, 0, 0, .1);
+  display: flex;
+  flex-direction: column;
+}
+
+#swatch .info{
+  padding: 1em;
+}
+
+#swatch h1{
+  margin: 0;
+  text-transform: uppercase;
+}
+
+#swatch h2{
+  font-weight: normal;
+  margin: 0;
+}
+
+input[type="color"] {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  height: 15em;
+  padding: 0;
+  width: 15em;
+}
+
+*:focus{
+  border-radius: 0;
+  outline: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-color-swatch{
+  border: 0;
+  border-radius: 0;
+}
+
+::-moz-color-swatch,
+::-moz-focus-inner{
+  border: 0;
+}
+
+::-moz-focus-inner{
+  padding: 0;
+}
\ No newline at end of file
diff --git a/styled-color-input/license.txt b/styled-color-input/license.txt
new file mode 100644
index 0000000..5dc5f04
--- /dev/null
+++ b/styled-color-input/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Lee Martin (https://codepen.io/leemartin/pen/ExPXRzx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/styled-color-input/src/index.html b/styled-color-input/src/index.html
new file mode 100644
index 0000000..05a2e87
--- /dev/null
+++ b/styled-color-input/src/index.html
@@ -0,0 +1,7 @@
+<div id="swatch">
+  <input type="color" id="color" name="color" value="#FF0000">
+  <div class="info">
+    <h1>Input</h1>
+    <h2>Color</h2>
+  </div>
+</div>
\ No newline at end of file
diff --git a/styled-color-input/src/style.css b/styled-color-input/src/style.css
new file mode 100644
index 0000000..91ef716
--- /dev/null
+++ b/styled-color-input/src/style.css
@@ -0,0 +1,71 @@
+html, body{
+  height: 100%;
+  width: 100%;
+}
+
+html{
+  font: 2.2vh Helvetica-Neue, Helvetica, sans-serif;
+}
+
+body{
+  align-items: center;
+  background: whitesmoke;
+  display: flex;
+  justify-content: center;
+}
+
+#swatch{
+  background: white;
+  box-shadow: 1em 1em 1em rgba(0, 0, 0, .1);
+  display: flex;
+  flex-direction: column;
+}
+
+#swatch .info{
+  padding: 1em;
+}
+
+#swatch h1{
+  margin: 0;
+  text-transform: uppercase;
+}
+
+#swatch h2{
+  font-weight: normal;
+  margin: 0;
+}
+
+input[type="color"] {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  height: 15em;
+  padding: 0;
+  width: 15em;
+}
+
+*:focus{
+  border-radius: 0;
+  outline: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-color-swatch{
+  border: 0;
+  border-radius: 0;
+}
+
+::-moz-color-swatch,
+::-moz-focus-inner{
+  border: 0;
+}
+
+::-moz-focus-inner{
+  padding: 0;
+}
\ No newline at end of file
diff --git a/stylized-buttons/README.markdown b/stylized-buttons/README.markdown
new file mode 100644
index 0000000..0438826
--- /dev/null
+++ b/stylized-buttons/README.markdown
@@ -0,0 +1,4 @@
+# Stylized Buttons
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/perry_nt/pen/eVboze](https://codepen.io/perry_nt/pen/eVboze).
+
+ 
\ No newline at end of file
diff --git a/stylized-buttons/dist/index.html b/stylized-buttons/dist/index.html
new file mode 100644
index 0000000..80fb3e8
--- /dev/null
+++ b/stylized-buttons/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Stylized Buttons</title>
+  <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="btn from-top">From Top</div>
+<div class="btn from-left">From Left</div>
+<div class="btn from-right">From Right</div>
+<div class="btn from-middle">From Middle</div>
+<div class="btn from-bottom">From Bottom</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/stylized-buttons/dist/style.css b/stylized-buttons/dist/style.css
new file mode 100644
index 0000000..ce94dae
--- /dev/null
+++ b/stylized-buttons/dist/style.css
@@ -0,0 +1,197 @@
+/* ~~~~~~~ INIT. BTN ~~~~~~~ */
+
+.btn {		
+	position: relative;	
+	padding: 1.4rem 4.2rem;
+	padding-right: 3.1rem;
+	font-size: 1.4rem;
+	color: var(--inv);
+	letter-spacing: 1.1rem;
+	text-transform: uppercase;
+	transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);	
+	cursor: pointer;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+}
+
+.btn:before, .btn:after {
+	content: '';
+	position: absolute;	
+	transition: inherit;
+	z-index: -1;
+}
+
+.btn:hover {
+	color: var(--def);
+	transition-delay: .6s;
+}
+
+.btn:hover:before {
+	transition-delay: 0s;
+}
+
+.btn:hover:after {
+	background: var(--inv);
+	transition-delay: .4s;
+}
+
+/* From Top */
+
+.from-top:before, 
+.from-top:after {
+	left: 0;
+	height: 0;
+	width: 100%;
+}
+
+.from-top:before {
+	bottom: 0;	
+	border: 1px solid var(--inv);
+	border-top: 0;
+	border-bottom: 0;
+}
+
+.from-top:after {
+	top: 0;
+	height: 0;
+}
+
+.from-top:hover:before,
+.from-top:hover:after {
+	height: 100%;
+}
+
+/* From Left */
+
+.from-left:before, 
+.from-left:after {
+	top: 0;
+	width: 0;
+	height: 100%;
+}
+
+.from-left:before {
+	right: 0;
+	border: 1px solid var(--inv);
+	border-left: 0;
+	border-right: 0;	
+}
+
+.from-left:after {
+	left: 0;
+}
+
+.from-left:hover:before,
+.from-left:hover:after {
+	width: 100%;
+}
+
+/* From Right */
+
+.from-right:before, 
+.from-right:after {
+	top: 0;
+	width: 0;
+	height: 100%;
+}
+
+.from-right:before {
+	left: 0;
+	border: 1px solid var(--inv);
+	border-left: 0;
+	border-right: 0;	
+}
+
+.from-right:after {
+	right: 0;
+}
+
+.from-right:hover:before,
+.from-right:hover:after {
+	width: 100%;
+}
+
+/* From Middle */
+
+.from-middle:before {
+	top: 0;
+	left: 50%;
+	height: 100%;
+	width: 0;
+	border: 1px solid var(--inv);
+	border-left: 0;
+	border-right: 0;
+}
+
+.from-middle:after {
+	bottom: 0;
+	left: 0;
+	height: 0;
+	width: 100%;
+	background: var(--inv);
+}
+
+.from-middle:hover:before {
+	left: 0;
+	width: 100%;
+}
+
+.from-middle:hover:after {
+	top: 0;
+	height: 100%;
+}
+
+/* From Bottom */
+
+.from-bottom:before, 
+.from-bottom:after {
+	left: 0;
+	height: 0;
+	width: 100%;
+}
+
+.from-bottom:before {
+	top: 0;	
+	border: 1px solid var(--inv);
+	border-top: 0;
+	border-bottom: 0;
+}
+
+.from-bottom:after {
+	bottom: 0;
+	height: 0;
+}
+
+.from-bottom:hover:before,
+.from-bottom:hover:after {
+	height: 100%;
+}
+
+
+/* ~~~~~~~~~~~~ GLOBAL SETTINGS ~~~~~~~~~~~~ */
+
+*, *:before, *:after {
+	box-sizing: border-box;
+}
+
+body {
+	--def: #96B7C4; 	
+	--inv: #fff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	height: 100vh;
+	width: 100%;
+	background-image: linear-gradient(-25deg, #616161 0%, #96B7C4 100%);
+}
+
+html {
+	font-size: 12px;
+	font-family: 'Playfair Display', serif;
+}
+
+div {margin-bottom: 3rem;}
+div:last-child {margin-bottom: 0;}
\ No newline at end of file
diff --git a/stylized-buttons/license.txt b/stylized-buttons/license.txt
new file mode 100644
index 0000000..e7e46e1
--- /dev/null
+++ b/stylized-buttons/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Paraskevas Dinakis (https://codepen.io/perry_nt/pen/eVboze)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/stylized-buttons/src/index.html b/stylized-buttons/src/index.html
new file mode 100644
index 0000000..aac0f84
--- /dev/null
+++ b/stylized-buttons/src/index.html
@@ -0,0 +1,5 @@
+<div class="btn from-top">From Top</div>
+<div class="btn from-left">From Left</div>
+<div class="btn from-right">From Right</div>
+<div class="btn from-middle">From Middle</div>
+<div class="btn from-bottom">From Bottom</div>
\ No newline at end of file
diff --git a/stylized-buttons/src/style.css b/stylized-buttons/src/style.css
new file mode 100644
index 0000000..a65c5c6
--- /dev/null
+++ b/stylized-buttons/src/style.css
@@ -0,0 +1,194 @@
+/* ~~~~~~~ INIT. BTN ~~~~~~~ */
+
+.btn {		
+	position: relative;	
+	padding: 1.4rem 4.2rem;
+	padding-right: 3.1rem;
+	font-size: 1.4rem;
+	color: var(--inv);
+	letter-spacing: 1.1rem;
+	text-transform: uppercase;
+	transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);	
+	cursor: pointer;
+	user-select: none;
+}
+
+.btn:before, .btn:after {
+	content: '';
+	position: absolute;	
+	transition: inherit;
+	z-index: -1;
+}
+
+.btn:hover {
+	color: var(--def);
+	transition-delay: .6s;
+}
+
+.btn:hover:before {
+	transition-delay: 0s;
+}
+
+.btn:hover:after {
+	background: var(--inv);
+	transition-delay: .4s;
+}
+
+/* From Top */
+
+.from-top:before, 
+.from-top:after {
+	left: 0;
+	height: 0;
+	width: 100%;
+}
+
+.from-top:before {
+	bottom: 0;	
+	border: 1px solid var(--inv);
+	border-top: 0;
+	border-bottom: 0;
+}
+
+.from-top:after {
+	top: 0;
+	height: 0;
+}
+
+.from-top:hover:before,
+.from-top:hover:after {
+	height: 100%;
+}
+
+/* From Left */
+
+.from-left:before, 
+.from-left:after {
+	top: 0;
+	width: 0;
+	height: 100%;
+}
+
+.from-left:before {
+	right: 0;
+	border: 1px solid var(--inv);
+	border-left: 0;
+	border-right: 0;	
+}
+
+.from-left:after {
+	left: 0;
+}
+
+.from-left:hover:before,
+.from-left:hover:after {
+	width: 100%;
+}
+
+/* From Right */
+
+.from-right:before, 
+.from-right:after {
+	top: 0;
+	width: 0;
+	height: 100%;
+}
+
+.from-right:before {
+	left: 0;
+	border: 1px solid var(--inv);
+	border-left: 0;
+	border-right: 0;	
+}
+
+.from-right:after {
+	right: 0;
+}
+
+.from-right:hover:before,
+.from-right:hover:after {
+	width: 100%;
+}
+
+/* From Middle */
+
+.from-middle:before {
+	top: 0;
+	left: 50%;
+	height: 100%;
+	width: 0;
+	border: 1px solid var(--inv);
+	border-left: 0;
+	border-right: 0;
+}
+
+.from-middle:after {
+	bottom: 0;
+	left: 0;
+	height: 0;
+	width: 100%;
+	background: var(--inv);
+}
+
+.from-middle:hover:before {
+	left: 0;
+	width: 100%;
+}
+
+.from-middle:hover:after {
+	top: 0;
+	height: 100%;
+}
+
+/* From Bottom */
+
+.from-bottom:before, 
+.from-bottom:after {
+	left: 0;
+	height: 0;
+	width: 100%;
+}
+
+.from-bottom:before {
+	top: 0;	
+	border: 1px solid var(--inv);
+	border-top: 0;
+	border-bottom: 0;
+}
+
+.from-bottom:after {
+	bottom: 0;
+	height: 0;
+}
+
+.from-bottom:hover:before,
+.from-bottom:hover:after {
+	height: 100%;
+}
+
+
+/* ~~~~~~~~~~~~ GLOBAL SETTINGS ~~~~~~~~~~~~ */
+
+*, *:before, *:after {
+	box-sizing: border-box;
+}
+
+body {
+	--def: #96B7C4; 	
+	--inv: #fff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	height: 100vh;
+	width: 100%;
+	background-image: linear-gradient(-25deg, #616161 0%, #96B7C4 100%);
+}
+
+html {
+	font-size: 12px;
+	font-family: 'Playfair Display', serif;
+}
+
+div {margin-bottom: 3rem;}
+div:last-child {margin-bottom: 0;}
\ No newline at end of file
diff --git a/sun-rise-moon-rise/README.markdown b/sun-rise-moon-rise/README.markdown
new file mode 100644
index 0000000..1219eb1
--- /dev/null
+++ b/sun-rise-moon-rise/README.markdown
@@ -0,0 +1,4 @@
+# Sun Rise Moon Rise
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/renduh/pen/pKQYZw](https://codepen.io/renduh/pen/pKQYZw).
+
+ Sun and moon rising and setting. The animation uses the date/time to control the height above the horizon of the moon or sun depending on the time of day. You can also press the toggle switch to control the animation using the slider.
\ No newline at end of file
diff --git a/sun-rise-moon-rise/dist/index.html b/sun-rise-moon-rise/dist/index.html
new file mode 100644
index 0000000..57cbb4a
--- /dev/null
+++ b/sun-rise-moon-rise/dist/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Sun Rise Moon Rise</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="world">
+	<div id="sun">
+		<div class="sunbeams">
+		  <div class="beam beam1"></div>
+		  <div class="beam beam2"></div>
+		  <div class="beam beam3"></div>
+		  <div class="beam beam4"></div>
+		  <div class="beam beam5"></div>
+		  <div class="beam beam6"></div>
+		  <div class="beam beam7"></div>
+		  <div class="beam beam8"></div>
+		</div>
+		<div class="eyes">
+			<div class="eyes-l"></div>
+			<div class="eyes-r"></div>
+		</div>
+	</div>
+	<div id="moon">
+		<div class="crater crater1"></div>
+		<div class="crater crater2"></div>
+		<div class="crater crater3"></div>
+		<div class="crater crater4"></div>
+		<div class="crater crater5"></div>
+		<div class="crater crater6"></div>
+		<div class="eyes">
+			<div class="eyes-l"></div>
+			<div class="eyes-r"></div>
+		</div>
+	</div>
+</div>
+
+<div id="slidecontainer">
+  <input type="range" min="0" max="24" value="1" class="slider" id="myRange">
+  <p class="simtime">Simulated time: <span id="demo"></span>:00</p>
+</div>
+
+<div id="toggle-label-left">Real-time animation</div>
+<div class="toggle">
+  <div class="switch"></div>
+</div>
+<div id="toggle-label-right">Slider-based animation</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/sun-rise-moon-rise/dist/script.js b/sun-rise-moon-rise/dist/script.js
new file mode 100644
index 0000000..48eac64
--- /dev/null
+++ b/sun-rise-moon-rise/dist/script.js
@@ -0,0 +1,112 @@
+//this for slider based - setting up slider
+var slider = document.getElementById("myRange");
+var output = document.getElementById("demo");
+output.innerHTML = slider.value;
+
+slider.oninput = function() {
+  output.innerHTML = this.value;
+}
+
+//Get time funtion - it passes time to the animation control function gettimeofday
+function updatetime() {
+	var now = new Date();
+    gettimeofday(now.getHours());
+    //reset the slider to the actual time
+	slider.value = now.getHours();  
+	output.innerHTML = now.getHours();
+}
+
+//Animation control function - you could split these into rise and set funtions but I have'nt done that yet
+function gettimeofday(now) {
+	hour = now;
+	if (hour >= 0 && hour < 5) {
+		timeofdaypercent = hour - 0;
+		timeofdaypercent = (timeofdaypercent / 4) * 100;
+		var moon = document.getElementById('moon');
+		var moonheight = (timeofdaypercent * 2.5) + 50;
+		moon.style.top = moonheight + "px";
+		var sun = document.getElementById('sun');
+		sun.style.top = "450px";
+		document.body.style.backgroundColor = "#002551";
+		var world = document.getElementById('world');
+		world.style.borderBottom = "5px solid #67a8f1";
+		document.getElementById('toggle-label-left').style.color = "#d3d3d3";
+		document.getElementById('toggle-label-right').style.color = "#d3d3d3";
+		document.getElementsByClassName('simtime')[0].style.color = "#d3d3d3";
+	}
+	if (hour >= 5 && hour < 12) {
+		timeofdaypercent = hour - 5;
+		timeofdaypercent = (timeofdaypercent / 7) * 100;
+		var sun = document.getElementById('sun');
+		var sunheight = 300 - (timeofdaypercent * 2.9);
+		sun.style.top = sunheight + "px";
+		var moon = document.getElementById('moon');
+		moon.style.top = "400px";
+		document.body.style.backgroundColor = "#f4c042";
+		var world = document.getElementById('world');
+		world.style.borderBottom = "5px solid #7a6021";
+		document.getElementById('toggle-label-left').style.color = "#7a6021";
+		document.getElementById('toggle-label-right').style.color = "#7a6021";
+		document.getElementsByClassName('simtime')[0].style.color = "#7a6021";
+	}
+	if (hour >= 12 && hour < 19) {
+		timeofdaypercent = hour - 12;
+		timeofdaypercent = (timeofdaypercent / 7) * 100;
+		var sun = document.getElementById('sun');
+		var sunheight = (timeofdaypercent * 2.9) + 50;
+		sun.style.top = sunheight + "px";
+		var moon = document.getElementById('moon');
+		moon.style.top = "400px";
+		document.body.style.backgroundColor = "#f4c042";
+		var world = document.getElementById('world');
+		world.style.borderBottom = "5px solid #7a6021";
+		document.getElementById('toggle-label-left').style.color = "#7a6021";
+		document.getElementById('toggle-label-right').style.color = "#7a6021";
+		document.getElementsByClassName('simtime')[0].style.color = "#7a6021";
+	}
+	if (hour >= 19 && hour <= 24) {
+		timeofdaypercent = hour - 20;
+		timeofdaypercent = (timeofdaypercent / 5) * 100;
+		var moon = document.getElementById('moon');
+		var moonheight = 200 - (timeofdaypercent * 2.5) + 50;
+		moon.style.top = moonheight + "px";
+		var sun = document.getElementById('sun');
+		sun.style.top = "450px";
+		document.body.style.backgroundColor = "#002551";
+		var world = document.getElementById('world');
+		world.style.borderBottom = "5px solid #67a8f1";
+		document.getElementById('toggle-label-left').style.color = "#d3d3d3";
+		document.getElementById('toggle-label-right').style.color = "#d3d3d3";
+		document.getElementsByClassName('simtime')[0].style.color = "#d3d3d3";
+	}
+}
+
+
+//Start the loop going based of real time
+updatetime();
+var timeloop = setInterval(updatetime, 1000);
+
+//Toggle switch functions
+var togglestate=0;
+document.getElementsByClassName('toggle')[0].onclick = function() {
+  this.classList.toggle('on');
+  if (togglestate == 0) {
+  	togglestate = 1;
+  	clearInterval(timeloop);
+  	slider.oninput = function() {
+	  output.innerHTML = this.value;
+	  gettimeofday(this.value);
+	}
+	document.getElementById('slidecontainer').style.maxHeight = "300px";
+	document.getElementById('toggle-label-left').style.opacity = "0.2";
+	document.getElementById('toggle-label-right').style.opacity = "1";
+  } else if (togglestate == 1) {
+  	togglestate = 0;
+  	updatetime();
+  	timeloop = setInterval(updatetime, 1000);
+  	slider.oninput = null;
+	document.getElementById('slidecontainer').style.maxHeight = "0px";
+	document.getElementById('toggle-label-left').style.opacity = "1";
+	document.getElementById('toggle-label-right').style.opacity = "0.2";
+  }
+}
\ No newline at end of file
diff --git a/sun-rise-moon-rise/dist/style.css b/sun-rise-moon-rise/dist/style.css
new file mode 100644
index 0000000..d67a742
--- /dev/null
+++ b/sun-rise-moon-rise/dist/style.css
@@ -0,0 +1,266 @@
+body {
+	width:100%;
+  height:100%;
+	margin:0;
+	padding:0;
+	background-color:#eee;
+  transition: background-color 0.5s ease;
+  padding-bottom:100px;
+  text-align:center;
+}
+#world {
+	width:400px;
+	height:400px;
+	display: inline-block;
+	position:relative;
+	overflow:hidden;
+	border-bottom: 5px solid #7a6021;
+	transition: border 0.5s ease;
+}
+#sun {
+	height: 200px;
+	width: 200px;
+	background-color: #f4c042;
+	border-radius: 50%;
+	display: inline-block;
+	position:absolute;
+	top:50px;
+	left:90px;
+	border:5px solid #7a6021;
+	transition: top 0.1s ease;
+}
+#moon {
+	height: 200px;
+	width: 200px;
+	background-color: #95c7fa;
+	border-radius: 50%;
+	display: inline-block;
+	position:absolute;
+	top:50px;
+	left:90px;
+	border:5px solid #67a8f1;
+	transition: top 0.1s ease;
+}
+.crater {
+	position:absolute;
+	border-radius:50%;
+	background:#67a8f1;
+}
+.crater1 {
+	width:30px;
+	height:30px;
+	top:40px;
+	left:40px;
+}
+.crater2 {
+    width: 15px;
+    height: 15px;
+    top: 20px;
+    left: 110px;
+}
+.crater3 {
+    width: 25px;
+    height: 25px;
+    top: 50px;
+    left: 150px;
+}
+.crater4 {
+	width: 35px;
+	height: 35px;
+	top: 130px;
+	left: 30px;
+}
+.crater5 {
+	width: 25px;
+    height: 25px;
+    top: 160px;
+    left: 100px;
+}
+.crater6 {
+	width: 20px;
+    height: 20px;
+    top: 140px;
+    left: 150px;
+}
+.beam {
+	width:5px;
+	height:30px;
+	background:#7a6021;
+	position:absolute;
+}
+
+.beam1 {
+	transform: rotate(0deg);
+	top:-20px;
+	left:120px;
+}
+.beam2 {
+	transform: rotate(45deg);
+	top:20px;
+	left:220px;
+}
+.beam3 {
+	transform: rotate(90deg);
+	top:110px;
+	left:250px;
+}
+.beam4 {
+	transform: rotate(135deg);
+	top:200px;
+	left:220px;
+}
+.beam5 {
+	transform: rotate(180deg);
+	top:240px;
+	left:120px;
+}
+.beam6 {
+	transform: rotate(225deg);
+	top:200px;
+	left:20px;
+}
+.beam7 {
+	transform: rotate(270deg);
+	top:110px;
+	left:-10px;
+}
+.beam8 {
+	transform: rotate(315deg);
+	top:20px;
+	left:20px;
+}
+.sunbeams {
+    width: 250px;
+    height: 250px;
+    position: absolute;
+    top: -25px;
+    left: -25px;
+    animation: spin 28s linear 0s infinite;
+}
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+@keyframes blink {
+    0% { height: 15px; top:0; }
+    99% { height: 15px; top:0; }
+    100% { height: 0px; top:7px; }
+}
+.eyes {
+    position: absolute;
+    width: 110px;
+    height: 20px;
+    top: 90px;
+    left: 45px;
+}
+.eyes-l {
+	width:15px;
+	height:15px;
+	border-radius:50%;
+	position:absolute;
+	top:0;
+	left:0;	
+    animation: blink 7s linear 0s infinite;
+}
+.eyes-r {
+	width:15px;
+	height:15px;
+	border-radius:50%;
+	position:absolute;
+	top:0;
+	right:0;
+    animation: blink 7s linear 0s infinite;
+}
+#moon .eyes-l, #moon .eyes-r {
+	background:#0f2964;
+}
+#sun .eyes-l, #sun .eyes-r {
+	background:#4f0504;
+}
+/* Slider */
+#slidecontainer {
+	margin-top: 30px;
+	margin-bottom: 30px;
+	width: 100%;
+	height: auto;
+	max-height: 0px;
+	overflow:hidden;
+	transition: max-height 0.8s ease;
+}
+.slider {
+	-webkit-appearance: none;
+	width: 90%;
+	max-width:650px;
+	height: 4px;
+	background: #d3d3d3;
+	outline: none;
+	opacity: 0.7;
+	-webkit-transition: .2s;
+	transition: opacity .2s;
+}
+.slider:hover {
+	opacity: 1;
+}
+.slider::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	appearance: none;
+	width: 25px;
+	height: 25px;
+	background: lightblue;
+	cursor: pointer;
+	border-radius:50%;
+}
+.slider::-moz-range-thumb {
+	width: 25px;
+	height: 25px;
+	background: lightblue;
+	cursor: pointer;
+}
+.simtime {
+	color: #d3d3d3;
+	font-family: sans-serif;
+	font-weight: bold;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-size: 90%;
+}
+/* Toggle switch */
+.toggle {
+	background-color: #eee;
+	border: 1px solid #fff;
+	border-radius: 42px;
+	box-shadow: 0 0 5px #ddd;
+	box-sizing: border-box;
+	height: 42px;
+	transition: 400ms cubic-bezier(0, 0, 0, 1);
+	width: 70px;
+    display: inline-block;
+    vertical-align: middle;
+}
+.toggle.on {
+	background: lightblue;
+	padding-left: 28px;
+}
+.switch {
+	background: #fff;
+	border: 1px solid gray;
+	border-radius: 100%;
+	height: 36px;
+	margin: 2px;
+	position: relative;
+	width: 36px;
+	z-index: 9;
+} 
+#toggle-label-left, #toggle-label-right {
+	display: inline;
+	color: #d3d3d3;
+	font-family: sans-serif;
+	font-weight: bold;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-size: 90%;
+	margin:0 10px;
+}
+#toggle-label-right {
+	opacity:0.2;
+}
\ No newline at end of file
diff --git a/sun-rise-moon-rise/license.txt b/sun-rise-moon-rise/license.txt
new file mode 100644
index 0000000..62fb4f6
--- /dev/null
+++ b/sun-rise-moon-rise/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Adam Walker (https://codepen.io/renduh/pen/pKQYZw)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/sun-rise-moon-rise/src/index.html b/sun-rise-moon-rise/src/index.html
new file mode 100644
index 0000000..3d78110
--- /dev/null
+++ b/sun-rise-moon-rise/src/index.html
@@ -0,0 +1,41 @@
+<div id="world">
+	<div id="sun">
+		<div class="sunbeams">
+		  <div class="beam beam1"></div>
+		  <div class="beam beam2"></div>
+		  <div class="beam beam3"></div>
+		  <div class="beam beam4"></div>
+		  <div class="beam beam5"></div>
+		  <div class="beam beam6"></div>
+		  <div class="beam beam7"></div>
+		  <div class="beam beam8"></div>
+		</div>
+		<div class="eyes">
+			<div class="eyes-l"></div>
+			<div class="eyes-r"></div>
+		</div>
+	</div>
+	<div id="moon">
+		<div class="crater crater1"></div>
+		<div class="crater crater2"></div>
+		<div class="crater crater3"></div>
+		<div class="crater crater4"></div>
+		<div class="crater crater5"></div>
+		<div class="crater crater6"></div>
+		<div class="eyes">
+			<div class="eyes-l"></div>
+			<div class="eyes-r"></div>
+		</div>
+	</div>
+</div>
+
+<div id="slidecontainer">
+  <input type="range" min="0" max="24" value="1" class="slider" id="myRange">
+  <p class="simtime">Simulated time: <span id="demo"></span>:00</p>
+</div>
+
+<div id="toggle-label-left">Real-time animation</div>
+<div class="toggle">
+  <div class="switch"></div>
+</div>
+<div id="toggle-label-right">Slider-based animation</div>
\ No newline at end of file
diff --git a/sun-rise-moon-rise/src/script.js b/sun-rise-moon-rise/src/script.js
new file mode 100644
index 0000000..48eac64
--- /dev/null
+++ b/sun-rise-moon-rise/src/script.js
@@ -0,0 +1,112 @@
+//this for slider based - setting up slider
+var slider = document.getElementById("myRange");
+var output = document.getElementById("demo");
+output.innerHTML = slider.value;
+
+slider.oninput = function() {
+  output.innerHTML = this.value;
+}
+
+//Get time funtion - it passes time to the animation control function gettimeofday
+function updatetime() {
+	var now = new Date();
+    gettimeofday(now.getHours());
+    //reset the slider to the actual time
+	slider.value = now.getHours();  
+	output.innerHTML = now.getHours();
+}
+
+//Animation control function - you could split these into rise and set funtions but I have'nt done that yet
+function gettimeofday(now) {
+	hour = now;
+	if (hour >= 0 && hour < 5) {
+		timeofdaypercent = hour - 0;
+		timeofdaypercent = (timeofdaypercent / 4) * 100;
+		var moon = document.getElementById('moon');
+		var moonheight = (timeofdaypercent * 2.5) + 50;
+		moon.style.top = moonheight + "px";
+		var sun = document.getElementById('sun');
+		sun.style.top = "450px";
+		document.body.style.backgroundColor = "#002551";
+		var world = document.getElementById('world');
+		world.style.borderBottom = "5px solid #67a8f1";
+		document.getElementById('toggle-label-left').style.color = "#d3d3d3";
+		document.getElementById('toggle-label-right').style.color = "#d3d3d3";
+		document.getElementsByClassName('simtime')[0].style.color = "#d3d3d3";
+	}
+	if (hour >= 5 && hour < 12) {
+		timeofdaypercent = hour - 5;
+		timeofdaypercent = (timeofdaypercent / 7) * 100;
+		var sun = document.getElementById('sun');
+		var sunheight = 300 - (timeofdaypercent * 2.9);
+		sun.style.top = sunheight + "px";
+		var moon = document.getElementById('moon');
+		moon.style.top = "400px";
+		document.body.style.backgroundColor = "#f4c042";
+		var world = document.getElementById('world');
+		world.style.borderBottom = "5px solid #7a6021";
+		document.getElementById('toggle-label-left').style.color = "#7a6021";
+		document.getElementById('toggle-label-right').style.color = "#7a6021";
+		document.getElementsByClassName('simtime')[0].style.color = "#7a6021";
+	}
+	if (hour >= 12 && hour < 19) {
+		timeofdaypercent = hour - 12;
+		timeofdaypercent = (timeofdaypercent / 7) * 100;
+		var sun = document.getElementById('sun');
+		var sunheight = (timeofdaypercent * 2.9) + 50;
+		sun.style.top = sunheight + "px";
+		var moon = document.getElementById('moon');
+		moon.style.top = "400px";
+		document.body.style.backgroundColor = "#f4c042";
+		var world = document.getElementById('world');
+		world.style.borderBottom = "5px solid #7a6021";
+		document.getElementById('toggle-label-left').style.color = "#7a6021";
+		document.getElementById('toggle-label-right').style.color = "#7a6021";
+		document.getElementsByClassName('simtime')[0].style.color = "#7a6021";
+	}
+	if (hour >= 19 && hour <= 24) {
+		timeofdaypercent = hour - 20;
+		timeofdaypercent = (timeofdaypercent / 5) * 100;
+		var moon = document.getElementById('moon');
+		var moonheight = 200 - (timeofdaypercent * 2.5) + 50;
+		moon.style.top = moonheight + "px";
+		var sun = document.getElementById('sun');
+		sun.style.top = "450px";
+		document.body.style.backgroundColor = "#002551";
+		var world = document.getElementById('world');
+		world.style.borderBottom = "5px solid #67a8f1";
+		document.getElementById('toggle-label-left').style.color = "#d3d3d3";
+		document.getElementById('toggle-label-right').style.color = "#d3d3d3";
+		document.getElementsByClassName('simtime')[0].style.color = "#d3d3d3";
+	}
+}
+
+
+//Start the loop going based of real time
+updatetime();
+var timeloop = setInterval(updatetime, 1000);
+
+//Toggle switch functions
+var togglestate=0;
+document.getElementsByClassName('toggle')[0].onclick = function() {
+  this.classList.toggle('on');
+  if (togglestate == 0) {
+  	togglestate = 1;
+  	clearInterval(timeloop);
+  	slider.oninput = function() {
+	  output.innerHTML = this.value;
+	  gettimeofday(this.value);
+	}
+	document.getElementById('slidecontainer').style.maxHeight = "300px";
+	document.getElementById('toggle-label-left').style.opacity = "0.2";
+	document.getElementById('toggle-label-right').style.opacity = "1";
+  } else if (togglestate == 1) {
+  	togglestate = 0;
+  	updatetime();
+  	timeloop = setInterval(updatetime, 1000);
+  	slider.oninput = null;
+	document.getElementById('slidecontainer').style.maxHeight = "0px";
+	document.getElementById('toggle-label-left').style.opacity = "1";
+	document.getElementById('toggle-label-right').style.opacity = "0.2";
+  }
+}
\ No newline at end of file
diff --git a/sun-rise-moon-rise/src/style.css b/sun-rise-moon-rise/src/style.css
new file mode 100644
index 0000000..d67a742
--- /dev/null
+++ b/sun-rise-moon-rise/src/style.css
@@ -0,0 +1,266 @@
+body {
+	width:100%;
+  height:100%;
+	margin:0;
+	padding:0;
+	background-color:#eee;
+  transition: background-color 0.5s ease;
+  padding-bottom:100px;
+  text-align:center;
+}
+#world {
+	width:400px;
+	height:400px;
+	display: inline-block;
+	position:relative;
+	overflow:hidden;
+	border-bottom: 5px solid #7a6021;
+	transition: border 0.5s ease;
+}
+#sun {
+	height: 200px;
+	width: 200px;
+	background-color: #f4c042;
+	border-radius: 50%;
+	display: inline-block;
+	position:absolute;
+	top:50px;
+	left:90px;
+	border:5px solid #7a6021;
+	transition: top 0.1s ease;
+}
+#moon {
+	height: 200px;
+	width: 200px;
+	background-color: #95c7fa;
+	border-radius: 50%;
+	display: inline-block;
+	position:absolute;
+	top:50px;
+	left:90px;
+	border:5px solid #67a8f1;
+	transition: top 0.1s ease;
+}
+.crater {
+	position:absolute;
+	border-radius:50%;
+	background:#67a8f1;
+}
+.crater1 {
+	width:30px;
+	height:30px;
+	top:40px;
+	left:40px;
+}
+.crater2 {
+    width: 15px;
+    height: 15px;
+    top: 20px;
+    left: 110px;
+}
+.crater3 {
+    width: 25px;
+    height: 25px;
+    top: 50px;
+    left: 150px;
+}
+.crater4 {
+	width: 35px;
+	height: 35px;
+	top: 130px;
+	left: 30px;
+}
+.crater5 {
+	width: 25px;
+    height: 25px;
+    top: 160px;
+    left: 100px;
+}
+.crater6 {
+	width: 20px;
+    height: 20px;
+    top: 140px;
+    left: 150px;
+}
+.beam {
+	width:5px;
+	height:30px;
+	background:#7a6021;
+	position:absolute;
+}
+
+.beam1 {
+	transform: rotate(0deg);
+	top:-20px;
+	left:120px;
+}
+.beam2 {
+	transform: rotate(45deg);
+	top:20px;
+	left:220px;
+}
+.beam3 {
+	transform: rotate(90deg);
+	top:110px;
+	left:250px;
+}
+.beam4 {
+	transform: rotate(135deg);
+	top:200px;
+	left:220px;
+}
+.beam5 {
+	transform: rotate(180deg);
+	top:240px;
+	left:120px;
+}
+.beam6 {
+	transform: rotate(225deg);
+	top:200px;
+	left:20px;
+}
+.beam7 {
+	transform: rotate(270deg);
+	top:110px;
+	left:-10px;
+}
+.beam8 {
+	transform: rotate(315deg);
+	top:20px;
+	left:20px;
+}
+.sunbeams {
+    width: 250px;
+    height: 250px;
+    position: absolute;
+    top: -25px;
+    left: -25px;
+    animation: spin 28s linear 0s infinite;
+}
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+@keyframes blink {
+    0% { height: 15px; top:0; }
+    99% { height: 15px; top:0; }
+    100% { height: 0px; top:7px; }
+}
+.eyes {
+    position: absolute;
+    width: 110px;
+    height: 20px;
+    top: 90px;
+    left: 45px;
+}
+.eyes-l {
+	width:15px;
+	height:15px;
+	border-radius:50%;
+	position:absolute;
+	top:0;
+	left:0;	
+    animation: blink 7s linear 0s infinite;
+}
+.eyes-r {
+	width:15px;
+	height:15px;
+	border-radius:50%;
+	position:absolute;
+	top:0;
+	right:0;
+    animation: blink 7s linear 0s infinite;
+}
+#moon .eyes-l, #moon .eyes-r {
+	background:#0f2964;
+}
+#sun .eyes-l, #sun .eyes-r {
+	background:#4f0504;
+}
+/* Slider */
+#slidecontainer {
+	margin-top: 30px;
+	margin-bottom: 30px;
+	width: 100%;
+	height: auto;
+	max-height: 0px;
+	overflow:hidden;
+	transition: max-height 0.8s ease;
+}
+.slider {
+	-webkit-appearance: none;
+	width: 90%;
+	max-width:650px;
+	height: 4px;
+	background: #d3d3d3;
+	outline: none;
+	opacity: 0.7;
+	-webkit-transition: .2s;
+	transition: opacity .2s;
+}
+.slider:hover {
+	opacity: 1;
+}
+.slider::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	appearance: none;
+	width: 25px;
+	height: 25px;
+	background: lightblue;
+	cursor: pointer;
+	border-radius:50%;
+}
+.slider::-moz-range-thumb {
+	width: 25px;
+	height: 25px;
+	background: lightblue;
+	cursor: pointer;
+}
+.simtime {
+	color: #d3d3d3;
+	font-family: sans-serif;
+	font-weight: bold;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-size: 90%;
+}
+/* Toggle switch */
+.toggle {
+	background-color: #eee;
+	border: 1px solid #fff;
+	border-radius: 42px;
+	box-shadow: 0 0 5px #ddd;
+	box-sizing: border-box;
+	height: 42px;
+	transition: 400ms cubic-bezier(0, 0, 0, 1);
+	width: 70px;
+    display: inline-block;
+    vertical-align: middle;
+}
+.toggle.on {
+	background: lightblue;
+	padding-left: 28px;
+}
+.switch {
+	background: #fff;
+	border: 1px solid gray;
+	border-radius: 100%;
+	height: 36px;
+	margin: 2px;
+	position: relative;
+	width: 36px;
+	z-index: 9;
+} 
+#toggle-label-left, #toggle-label-right {
+	display: inline;
+	color: #d3d3d3;
+	font-family: sans-serif;
+	font-weight: bold;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-size: 90%;
+	margin:0 10px;
+}
+#toggle-label-right {
+	opacity:0.2;
+}
\ No newline at end of file
diff --git a/super-smash-bros-credits/LICENSE.txt b/super-smash-bros-credits/LICENSE.txt
new file mode 100644
index 0000000..80f7840
--- /dev/null
+++ b/super-smash-bros-credits/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Jon Kantner (https://codepen.io/jkantner/pen/RwyOmmW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/super-smash-bros-credits/README.md b/super-smash-bros-credits/README.md
new file mode 100644
index 0000000..a1ede24
--- /dev/null
+++ b/super-smash-bros-credits/README.md
@@ -0,0 +1,7 @@
+# Super Smash Bros. Credits
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jkantner/pen/RwyOmmW](https://codepen.io/jkantner/pen/RwyOmmW).
+
+A CSS replica of the credits for the original Super Smash Bros. (US version)
+
+The crosshairs to view staff details is controlled by CSS variables rather than a model in JS.
\ No newline at end of file
diff --git a/super-smash-bros-credits/dist/index.html b/super-smash-bros-credits/dist/index.html
new file mode 100644
index 0000000..97caa57
--- /dev/null
+++ b/super-smash-bros-credits/dist/index.html
@@ -0,0 +1,1701 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Super Smash Bros. Credits</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&amp;display=swap'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="credits">
+	<div class="credits__wrapper">
+		<h2 class="credits__heading credits__heading--delay1">Director</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name1" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay2">
+					<label for="name1" class="credits__name">
+						<span class="credits__name-text">Masahiro Sakurai</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Game Design</li>
+					<li class="credits__role">Planning</li>
+					<li class="credits__role">Direction</li>
+					<li class="credits__role">Motion Coaching</li>
+					<li class="credits__role">Kirby Original Design</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay3">Chief Programmer</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name2" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay4">
+					<label for="name2" class="credits__name">
+						<span class="credits__name-text">Yoshiki Suzuki</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Program Management</li>
+					<li class="credits__role">System, Player<br>Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay5">Programmers</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name3" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay6">
+					<label for="name3" class="credits__name">
+						<span class="credits__name-text">Kouichi Watanabe</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Library, Map, Display,<br>Effect, Computer Player,<br>1P Game, Boss,<br>Training Mode Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name4" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay7">
+					<label for="name4" class="credits__name">
+						<span class="credits__name-text">Yasuyuki Nagashima</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Character & Game Mode Select Screen, Ranking, Opening, Screen Adjust, Backup RAM Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name5" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay8">
+					<label for="name5" class="credits__name">
+						<span class="credits__name-text">Yoshimi Takahashi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Item, Device, Sound Test, Staff Roll, Title<br>Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name6" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay9">
+					<label for="name6" class="credits__name">
+						<span class="credits__name-text">Katsuhiro Sakoda</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pikachu, Ness<br>Special Moves Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name7" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay10">
+					<label for="name7" class="credits__name">
+						<span class="credits__name-text">Yoshiya Taniguchi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Link, Kirby, Yoshi,<br>C.Falcon<br>Special Moves Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay11">Chief Designer</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name8" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay12">
+					<label for="name8" class="credits__name">
+						<span class="credits__name-text">Tsuyoshi Wakayama</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Design Management</li>
+					<li class="credits__role">Modeling Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+		</ul>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay13">Designers</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name9" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay14">
+					<label for="name9" class="credits__name">
+						<span class="credits__name-text">Hitoshi Kikkawa</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Mario, Luigi, Fox, Yoshi,<br>Pikachu, Kirby,<br>Jigglypuff Model</li>
+					<li class="credits__role">Mario, Luigi, Yoshi Motion</li>
+					<li class="credits__role">Bonus Stage Map Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name10" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay15">
+					<label for="name10" class="credits__name">
+						<span class="credits__name-text">Junsuke Sugiura</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">DK, Samus, C.Falcon, Link, Ness Model</li>
+					<li class="credits__role">DK, Link Motion</li>
+					<li class="credits__role">Bonus Stage Map Support</li>
+					<li class="credits__role">Motion Capture Actor</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name11" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay16">
+					<label for="name11" class="credits__name">
+						<span class="credits__name-text">Satoko Nakamura</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Samus Motion</li>
+					<li class="credits__role">Item, Effect,<br>1P Start Screen</li>
+					<li class="credits__role">Training Screen Design</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name12" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay17">
+					<label for="name12" class="credits__name">
+						<span class="credits__name-text">Tadashi Hashikura</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Effect Design</li>
+					<li class="credits__role">Samus, DK, Fox, Kirby, Pikachu, Boss Map Design</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name13" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay18">
+					<label for="name13" class="credits__name">
+						<span class="credits__name-text">Michiko Takahashi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Menu, Character Select Screen, Mark, Title Design</li>
+					<li class="credits__role">Mario, Yoshi, <br>Classic Mario<br>Map Design</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name14" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay19">
+					<label for="name14" class="credits__name">
+						<span class="credits__name-text">Akio Hanyu</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Mario, DK, Samus, Fox<br>Motion Support</li>
+					<li class="credits__role">Yoshi Damage Motion</li>
+					<li class="credits__role">Bonus Stage Map Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name15" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay20">
+					<label for="name15" class="credits__name">
+						<span class="credits__name-text">Isao Takahashi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Fox, Kirby, Boss Motion</li>
+					<li class="credits__role">Motion Capture Data<br>Convert</li>
+					<li class="credits__role">Bonus Stage Map Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name16" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay21">
+					<label for="name16" class="credits__name">
+						<span class="credits__name-text">Youichi Sukino</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pikachu Motion</li>
+					<li class="credits__role">Samus, Fox Damage Motion</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name17" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay22">
+					<label for="name17" class="credits__name">
+						<span class="credits__name-text">Kazu Ozawa</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Item Design</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name18" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay23">
+					<label for="name18" class="credits__name">
+						<span class="credits__name-text">Kunio Watanabe</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Opening,<br>Effect Design</li>
+					<li class="credits__role">Bonus Stage Map</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name19" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay24">
+					<label for="name19" class="credits__name">
+						<span class="credits__name-text">Shigeru Hashiguchi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pokémon Model Confusion</li>
+					<li class="credits__role">Design Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name20" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay25">
+					<label for="name20" class="credits__name">
+						<span class="credits__name-text">Tatsuhiko Oi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">C.Falcon, Ness,<br>Jigglypuff Motion</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name21" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay26">
+					<label for="name21" class="credits__name">
+						<span class="credits__name-text">Masaya Akiyama</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">C.Falcon, Ness,<br>Jigglypuff Motion</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name22" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay27">
+					<label for="name22" class="credits__name">
+						<span class="credits__name-text">Senji Hirose</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">C.Falcon, Ness,<br>Jigglypuff Motion</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name23" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay28">
+					<label for="name23" class="credits__name">
+						<span class="credits__name-text">Eriko Suzuki</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">C.Falcon, Ness,<br>Jigglypuff Motion</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name24" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay29">
+					<label for="name24" class="credits__name">
+						<span class="credits__name-text">C Shane Allala</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pikachu Motion</li>
+					<li class="credits__role">Ness Damage Motion</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name25" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay30">
+					<label for="name25" class="credits__name">
+						<span class="credits__name-text">Takeshi Iizuka</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pikachu Map<br>Design</li>
+					<li class="credits__org">(Creatures)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name26" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay31">
+					<label for="name26" class="credits__name">
+						<span class="credits__name-text">Nachi Sugiyama</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Opening Design</li>
+					<li class="credits__org">(Creatures)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name27" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay32">
+					<label for="name27" class="credits__name">
+						<span class="credits__name-text">Ryuta Kusumi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Opening Design</li>
+					<li class="credits__org">(Creatures)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay33">Sound Composer</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name28" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay34">
+					<label for="name28" class="credits__name">
+						<span class="credits__name-text">Hirokazu Ando</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">BGM Compose & Arrange</li>
+					<li class="credits__role">FGM Compose</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay35">Support</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name29" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay36">
+					<label for="name29" class="credits__name">
+						<span class="credits__name-text">Hisatoshi Takeuchi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Project Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay37">Voice Actors</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name30" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay38">
+					<label for="name30" class="credits__name">
+						<span class="credits__name-text">Charles Martinet</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Mario, Luigi Voice</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name31" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay39">
+					<label for="name31" class="credits__name">
+						<span class="credits__name-text">Nobuyuki Hiyama</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Link Voice</li>
+					<li class="credits__org">(ARTSVISION)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name32" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay40">
+					<label for="name32" class="credits__name">
+						<span class="credits__name-text">Kazumi Totaka</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Yoshi Voice</li>
+					<li class="credits__role">'Yoshi's Story'<br>Original Sound Compose</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name33" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay41">
+					<label for="name33" class="credits__name">
+						<span class="credits__name-text">Makiko Ohmoto</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Kirby, Ness Voice</li>
+					<li class="credits__org">(AONI Prod.)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name34" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay42">
+					<label for="name34" class="credits__name">
+						<span class="credits__name-text">Shinobu Satouchi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Fox Voice</li>
+					<li class="credits__org">(AONI Prod.)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name35" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay43">
+					<label for="name35" class="credits__name">
+						<span class="credits__name-text">Ikue Ootani</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pikachu Voice</li>
+					<li class="credits__org">(EZAKI Prod.)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name36" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay44">
+					<label for="name36" class="credits__name">
+						<span class="credits__name-text">Ryo Horikawa</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">C.Falcon Voice</li>
+					<li class="credits__org">(AONI Prod.)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name37" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay45">
+					<label for="name37" class="credits__name">
+						<span class="credits__name-text">Rachael Lillis</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Jigglypuff Voice</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name38" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay46">
+					<label for="name38" class="credits__name">
+						<span class="credits__name-text">Jeff Manning</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Narrator Voice</li>
+					<li class="credits__org">(Mickey's Company)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay47">Original Game Staff</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name39" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay48">
+					<label for="name39" class="credits__name">
+						<span class="credits__name-text">Yoshiaki Koizumi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Mario, Luigi, Link,<br>Yoshi Source Model</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name40" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay49">
+					<label for="name40" class="credits__name">
+						<span class="credits__name-text">Koji Kondo</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Super Mario Bros.'<br>'The Legend of Zelda'<br>'Star Fox 64'<br>Original Sound Composing</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name41" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay50">
+					<label for="name41" class="credits__name">
+						<span class="credits__name-text">Hiroji Kiyotake</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Samus Original Design</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name42" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay51">
+					<label for="name42" class="credits__name">
+						<span class="credits__name-text">Tomoyoshi Yamane</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Super Metroid'<br>CG Design</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name43" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay52">
+					<label for="name43" class="credits__name">
+						<span class="credits__name-text">RARE</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Donkey Kong Country' Original Sound Composing</li>
+					<li class="credits__role">Rendered 3-D Donkey Kong Character used with permission of Rare.</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name44" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay53">
+					<label for="name44" class="credits__name">
+						<span class="credits__name-text">Hirokazu Tanaka</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Metroid' Original<br>Sound Composing</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name45" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay54">
+					<label for="name45" class="credits__name">
+						<span class="credits__name-text">Takashi Tezuka</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Yoshi's Story' Production</li>
+					<li class="credits__role">Advice</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name46" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay55">
+					<label for="name46" class="credits__name">
+						<span class="credits__name-text">Shigefumi Hino</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Yoshi Original Design</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name47" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay56">
+					<label for="name47" class="credits__name">
+						<span class="credits__name-text">Jun Ishikawa</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Kirby Super Star'<br>Original Sound Composing</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name48" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay57">
+					<label for="name48" class="credits__name">
+						<span class="credits__name-text">Takao Shimizu</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Star Fox 64' Direction</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name49" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay58">
+					<label for="name49" class="credits__name">
+						<span class="credits__name-text">Takaya Imamura</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Fox, C.Falcon<br>Original Design</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name50" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay59">
+					<label for="name50" class="credits__name">
+						<span class="credits__name-text">Satoshi Tajiri</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Pokémon'<br>Game Design,<br>Direction</li>
+					<li class="credits__org">(GAME FREAK)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name51" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay60">
+					<label for="name51" class="credits__name">
+						<span class="credits__name-text">Benimaru Itoh</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Pokémon Stadium'<br>Source Modeling Chief</li>
+					<li class="credits__org">(Creatures)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name52" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay61">
+					<label for="name52" class="credits__name">
+						<span class="credits__name-text">Makoto Wada</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pikachu Source Model</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name53" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay62">
+					<label for="name53" class="credits__name">
+						<span class="credits__name-text">Hikaru Jinguji</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Jigglypuff<br>Source Model</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name54" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay63">
+					<label for="name54" class="credits__name">
+						<span class="credits__name-text">Taro Bando</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'F-ZERO X' Original<br>Sound Composing</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name55" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay64">
+					<label for="name55" class="credits__name">
+						<span class="credits__name-text">Tsunekaz Ishihara</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pokémon<br>Products Supervisor</li>
+					<li class="credits__role">'Pokémon'<br>'Earthbound' Produce</li>
+					<li class="credits__org">(Creatures)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name56" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay65">
+					<label for="name56" class="credits__name">
+						<span class="credits__name-text">Shigesato Itoi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Earthbound' Producer,<br>Title, Story Concept</li>
+					<li class="credits__role">Advice</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay66">NOA Staff</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name57" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay67">
+					<label for="name57" class="credits__name">
+						<span class="credits__name-text">Bill Trinen</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Localization</li>
+					<li class="credits__org">(NOA)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name58" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay68">
+					<label for="name58" class="credits__name">
+						<span class="credits__name-text">Michelle Powers</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Localization</li>
+					<li class="credits__org">(NOA)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name59" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay69">
+					<label for="name59" class="credits__name">
+						<span class="credits__name-text">Greg Richardson</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Localization</li>
+					<li class="credits__org">(NOA)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay70">Special Thanks</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name60" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay71">
+					<label for="name60" class="credits__name">
+						<span class="credits__name-text">Satoshi Ishida</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Debug Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name61" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay72">
+					<label for="name61" class="credits__name">
+						<span class="credits__name-text">Chieko Obikane</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Debug Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name62" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay73">
+					<label for="name62" class="credits__name">
+						<span class="credits__name-text">Tetsuya Notoya</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Editorial Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name63" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay74">
+					<label for="name63" class="credits__name">
+						<span class="credits__name-text">Jun Yamazaki</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Model Converter Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name64" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay75">
+					<label for="name64" class="credits__name">
+						<span class="credits__name-text">Chiharu Itoh</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Model Converter Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name65" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay76">
+					<label for="name65" class="credits__name">
+						<span class="credits__name-text">Yoshiaki Shinohara</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">SGI Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name66" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay77">
+					<label for="name66" class="credits__name">
+						<span class="credits__name-text">Sigezo Kawase</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Data Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name67" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay78">
+					<label for="name67" class="credits__name">
+						<span class="credits__name-text">Shinya Takahashi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Motion Capture SE & OP</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name68" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay79">
+					<label for="name68" class="credits__name">
+						<span class="credits__name-text">Tsuyoshi Watanabe</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Motion Capture SE & OP</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name69" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay80">
+					<label for="name69" class="credits__name">
+						<span class="credits__name-text">Yoshiyuki Tagawa</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Data SE</li>
+					<li class="credits__org">(Creatures)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name70" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay81">
+					<label for="name70" class="credits__name">
+						<span class="credits__name-text">Kensuke Tanabe</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Diplomacy</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name71" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay82">
+					<label for="name71" class="credits__name">
+						<span class="credits__name-text">Yasuhiro Sakai</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Advice</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name72" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay83">
+					<label for="name72" class="credits__name">
+						<span class="credits__name-text">Shingo Okamoto</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Super Mario Club<br>Debug Support</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name73" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay84">
+					<label for="name73" class="credits__name">
+						<span class="credits__name-text">Super Mario Club</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Debug<br>Assessment</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name74" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay85">
+					<label for="name74" class="credits__name">
+						<span class="credits__name-text">HAL Debug Team</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Debug</li>
+					<li class="credits__role">Game Balance Support</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name75" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay86">
+					<label for="name75" class="credits__name">
+						<span class="credits__name-text">4Kids Productions</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">US Pokémon voices</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay87">Project Manager</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name76" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay88">
+					<label for="name76" class="credits__name">
+						<span class="credits__name-text">Ryuki Kuraoka</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Project Management</li>
+					<li class="credits__role">Traffic Management</li>
+					<li class="credits__role">Motion Capture Actor</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay89">Progress Manager</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name77" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay90">
+					<label for="name77" class="credits__name">
+						<span class="credits__name-text">Kimiyoshi Fukui</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Sales Schedule</li>
+					<li class="credits__role">Management</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay91">Producer</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name78" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay92">
+					<label for="name78" class="credits__name">
+						<span class="credits__name-text">Hiroaki Suga</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Negotiations</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name79" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay93">
+					<label for="name79" class="credits__name">
+						<span class="credits__name-text">Satoru Iwata</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Negotiation Chief</li>
+					<li class="credits__role">Computer Player,<br>Test Version Programming</li>
+					<li class="credits__role">Program Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name80" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay94">
+					<label for="name80" class="credits__name">
+						<span class="credits__name-text">Kenji Miki</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Diplomacy,<br>Advice</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name81" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay95">
+					<label for="name81" class="credits__name">
+						<span class="credits__name-text">Shigeru Miyamoto</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Mario, Luigi, Link, DK<br>Original Design</li>
+					<li class="credits__role">Various games<br>Production & Direction</li>
+					<li class="credits__role">Advice</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay96">Executive Producer</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name82" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay97">
+					<label for="name82" class="credits__name">
+						<span class="credits__name-text">Hiroshi Yamauchi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Company President<br>of Nintendo, Japan</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay98">Presents</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name83" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay99">
+					<label for="name83" class="credits__name">
+						<span class="credits__name-text">NINTENDO Co.,Ltd</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">60 KAMITAKAMATSU-CHO FUKUINE, HIGASHIYAMA-KU, KYOTO, 605-8660 JAPAN</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name84" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay100">
+					<label for="name84" class="credits__name">
+						<span class="credits__name-text">HAL Laboratory,Inc.</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">1999-9 Ryuoushinmachi, Ryuou-cho, Nakakomagun, Yamanashi, 400-0111<br>Japan</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+	</div>
+	<div class="credits__ui">
+		<div class="credits__role-box">
+			<svg class="credits__role-box-left" viewBox="0 0 24 172" aria-hidden="true">
+				<polygon points="2 2,22 2,22 30,14 40,14 132,22 142,22 170,2 170" fill="none" stroke-width="4" />
+			</svg>
+			<svg class="credits__role-box-right" viewBox="0 0 24 172" aria-hidden="true">
+				<polygon points="2 2,22 2,22 170,2 170,2 142,10 132,10 40,2 30" fill="none" stroke-width="4" />
+			</svg>
+		</div>
+		<div class="credits__crosshairs">
+			<div class="credits__crosshairs-top"></div>
+			<div class="credits__crosshairs-right"></div>
+			<div class="credits__crosshairs-bottom"></div>
+			<div class="credits__crosshairs-left"></div>
+		</div>
+	</div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/super-smash-bros-credits/dist/script.js b/super-smash-bros-credits/dist/script.js
new file mode 100644
index 0000000..90bb496
--- /dev/null
+++ b/super-smash-bros-credits/dist/script.js
@@ -0,0 +1,27 @@
+// just for crosshairs positioning
+window.addEventListener("DOMContentLoaded",() => {
+	const credits = new SSBCredits(".credits");
+});
+
+class SSBCredits {
+    constructor(sel) {
+        this.el = document.querySelector(sel);
+        this.el?.addEventListener("click",this.crosshairsUpdate.bind(this));
+    }
+    crosshairsUpdate(e) {
+        const { pageX, pageY } = e;
+
+        if (pageX > 0 && pageY > 0) {
+            const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = this.el;
+            const x = Math.round(pageX - offsetLeft - offsetWidth / 2);
+            const y = Math.round(pageY - offsetTop - offsetHeight / 2);
+    
+            this.el.style.setProperty("--crosshairsX",`${x}px`);
+            this.el.style.setProperty("--crosshairsY",`${y}px`);
+            this.el.style.setProperty("--hitVisibility","visible");
+        } else {
+            // hide the red box and do nothing to the crosshairs if keypress
+            this.el.style.setProperty("--hitVisibility","hidden");
+        }
+    }
+}
\ No newline at end of file
diff --git a/super-smash-bros-credits/dist/style.css b/super-smash-bros-credits/dist/style.css
new file mode 100644
index 0000000..77562be
--- /dev/null
+++ b/super-smash-bros-credits/dist/style.css
@@ -0,0 +1,646 @@
+* {
+  border: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
+}
+
+body {
+  background-color: black;
+  color: white;
+  font: 1em/1.5 sans-serif;
+  display: flex;
+  height: 100vh;
+  transition: background-color var(--trans-dur), color var(--trans-dur);
+}
+
+.credits {
+  --crosshairsX: 0;
+  --crosshairsY: 0;
+  --hitVisibility: visible;
+  aspect-ratio: 4/3;
+  margin: auto;
+  max-width: 100vw;
+  max-height: 100vh;
+  min-height: 33em;
+  object-fit: contain;
+  overflow: hidden;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  /* Name selection */
+  /* Name rotation */
+}
+.credits__crosshairs {
+  animation: crosshairsEnter 0.5s linear;
+  color: rgba(204, 24, 0, 0.7);
+  top: calc(50% - 1.875em);
+  left: calc(50% - 1.875em);
+  width: 3.75em;
+  height: 3.75em;
+  transform: translate(var(--crosshairsX), var(--crosshairsY));
+}
+.credits__crosshairs, .credits__crosshairs-top, .credits__crosshairs-right, .credits__crosshairs-bottom, .credits__crosshairs-left {
+  position: absolute;
+}
+.credits__crosshairs-top, .credits__crosshairs-right, .credits__crosshairs-bottom, .credits__crosshairs-left {
+  border: 0.75em solid transparent;
+  width: 0;
+  height: 0;
+}
+.credits__crosshairs-top {
+  border-top: 1.25em solid currentColor;
+  top: 0;
+  left: calc(50% - 0.75em);
+}
+.credits__crosshairs-right {
+  border-right: 1.25em solid currentColor;
+  top: calc(50% - 0.75em);
+  right: 0;
+}
+.credits__crosshairs-bottom {
+  border-bottom: 1.25em solid currentColor;
+  left: calc(50% - 0.75em);
+  bottom: 0;
+}
+.credits__crosshairs-left {
+  border-left: 1.25em solid currentColor;
+  top: calc(50% - 0.75em);
+  left: 0;
+}
+.credits__heading, .credits__name {
+  display: inline-block;
+  padding: 0 1rem 0 0.75rem;
+  white-space: nowrap;
+}
+.credits__heading, .credits__name-box {
+  animation: 4s nameRotate cubic-bezier(0.15, 0.6, 1, 1);
+  font-size: 2em;
+  line-height: 1;
+  position: absolute;
+  top: 57.5%;
+  left: calc(50% - 22rem);
+  visibility: hidden;
+}
+.credits__heading, .credits__name-text {
+  font-family: Cabin, sans-serif;
+  font-weight: 700;
+}
+.credits__heading {
+  color: #8b8b8d;
+}
+.credits__hit {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  top: calc(50% - 2.4em);
+  left: calc(50% - 3.2em);
+  width: 32em;
+  height: 24em;
+  transform: translate3d(var(--crosshairsX), var(--crosshairsY), 0);
+  z-index: 2;
+}
+.credits__hit-rect {
+  box-shadow: 0 0 0 0.25em rgba(204, 24, 0, 0.7) inset;
+  width: 0;
+  height: 0;
+  transform: translate(-8.7em, -6.6em);
+}
+.credits__input {
+  position: fixed;
+  top: -1.5em;
+  left: -1.5em;
+}
+.credits__name {
+  cursor: pointer;
+  position: relative;
+  -webkit-tap-highlight-color: #0000;
+}
+.credits__name:before, .credits__name:after {
+  background-color: #000;
+  content: "";
+  display: block;
+  position: absolute;
+}
+.credits__name:before {
+  top: -0.25rem;
+  right: 0.5rem;
+  bottom: -0.25rem;
+  left: 0.5rem;
+}
+.credits__name:after {
+  top: 0.75rem;
+  right: -0.25rem;
+  bottom: 0.75rem;
+  left: -0.25rem;
+}
+.credits__name-border {
+  background-image: linear-gradient(0deg, red 50%, white 50%);
+  background-size: 2px 16px;
+  display: none;
+  position: absolute;
+  top: 4px;
+  left: 0;
+  width: 2px;
+  height: calc(100% - 8px);
+  z-index: -1;
+}
+.credits__name-border:nth-child(even) {
+  background-image: linear-gradient(90deg, red 50%, white 50%);
+  background-size: 16px 2px;
+  width: 100%;
+  height: 2px;
+}
+.credits__name-border:nth-child(3) {
+  right: 0;
+  left: auto;
+}
+.credits__name-border:nth-child(4) {
+  top: auto;
+  bottom: 4px;
+}
+.credits__name-text {
+  color: #838de2;
+  display: block;
+  position: relative;
+  z-index: 1;
+}
+.credits__role {
+  color: #bfc1e8;
+}
+.credits__roles, .credits__role-box {
+  position: relative;
+  margin-top: 1.25em;
+  width: 17em;
+  height: 9.25em;
+}
+.credits__role-box, .credits__wrapper {
+  animation: roleBoxEnter 84s steps(1, end);
+  visibility: hidden;
+}
+.credits__role-box {
+  box-shadow: 0 0 0 0.25em #4b4644;
+}
+.credits__role-box-left, .credits__role-box-right {
+  stroke: #635e40;
+  position: absolute;
+  top: -0.5em;
+  right: 17.375em;
+  width: 1.5em;
+  height: 10.75em;
+}
+.credits__role-box-right {
+  right: -2.125em;
+}
+.credits__roles, .credits__staff-list {
+  list-style: none;
+}
+.credits__roles {
+  font-family: Orbitron, sans-serif;
+  font-weight: 500;
+  display: none;
+  flex-direction: column;
+  padding: 0 0.375em 0.25em 0.375em;
+  z-index: 1;
+}
+.credits__staff-entry {
+  display: block;
+}
+.credits__org {
+  color: #874a86;
+  margin-top: auto;
+}
+.credits__ui, .credits__wrapper {
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.credits__ui {
+  pointer-events: none;
+  z-index: 3;
+}
+.credits__input:checked ~ .credits__hit {
+  display: block;
+  visibility: var(--hitVisibility);
+}
+.credits__input:checked ~ .credits__hit .credits__hit-rect {
+  animation: nameHit 0.12s steps(1, end) 3;
+}
+.credits__input:checked ~ .credits__roles {
+  display: flex;
+}
+.credits__input:checked + .credits__name-box .credits__name-border {
+  display: block;
+}
+.credits__input:checked + .credits__name-box .credits__name-border:nth-child(2) {
+  animation: nameSelect1 0.2s linear infinite;
+}
+.credits__input:checked + .credits__name-box .credits__name-border:nth-child(3) {
+  animation: nameSelect2 0.2s linear infinite;
+}
+.credits__input:checked + .credits__name-box .credits__name-border:nth-child(4) {
+  animation: nameSelect3 0.2s linear infinite;
+}
+.credits__input:checked + .credits__name-box .credits__name-border:nth-child(5) {
+  animation: nameSelect4 0.2s linear infinite;
+}
+.credits__heading--delay1 {
+  animation-delay: 2.5s;
+}
+.credits__name-box--delay2 {
+  animation-delay: 3.18s;
+}
+.credits__heading--delay3 {
+  animation-delay: 4.54s;
+}
+.credits__name-box--delay4 {
+  animation-delay: 5.22s;
+}
+.credits__heading--delay5 {
+  animation-delay: 6.58s;
+}
+.credits__name-box--delay6 {
+  animation-delay: 7.26s;
+}
+.credits__name-box--delay7 {
+  animation-delay: 7.94s;
+}
+.credits__name-box--delay8 {
+  animation-delay: 8.62s;
+}
+.credits__name-box--delay9 {
+  animation-delay: 9.3s;
+}
+.credits__name-box--delay10 {
+  animation-delay: 9.98s;
+}
+.credits__heading--delay11 {
+  animation-delay: 11.34s;
+}
+.credits__name-box--delay12 {
+  animation-delay: 12.02s;
+}
+.credits__heading--delay13 {
+  animation-delay: 13.38s;
+}
+.credits__name-box--delay14 {
+  animation-delay: 14.06s;
+}
+.credits__name-box--delay15 {
+  animation-delay: 14.74s;
+}
+.credits__name-box--delay16 {
+  animation-delay: 15.42s;
+}
+.credits__name-box--delay17 {
+  animation-delay: 16.1s;
+}
+.credits__name-box--delay18 {
+  animation-delay: 16.78s;
+}
+.credits__name-box--delay19 {
+  animation-delay: 17.46s;
+}
+.credits__name-box--delay20 {
+  animation-delay: 18.14s;
+}
+.credits__name-box--delay21 {
+  animation-delay: 18.82s;
+}
+.credits__name-box--delay22 {
+  animation-delay: 19.5s;
+}
+.credits__name-box--delay23 {
+  animation-delay: 20.18s;
+}
+.credits__name-box--delay24 {
+  animation-delay: 20.86s;
+}
+.credits__name-box--delay25 {
+  animation-delay: 21.54s;
+}
+.credits__name-box--delay26 {
+  animation-delay: 22.22s;
+}
+.credits__name-box--delay27 {
+  animation-delay: 22.9s;
+}
+.credits__name-box--delay28 {
+  animation-delay: 23.58s;
+}
+.credits__name-box--delay29 {
+  animation-delay: 24.26s;
+}
+.credits__name-box--delay30 {
+  animation-delay: 24.94s;
+}
+.credits__name-box--delay31 {
+  animation-delay: 25.62s;
+}
+.credits__name-box--delay32 {
+  animation-delay: 26.3s;
+}
+.credits__heading--delay33 {
+  animation-delay: 27.66s;
+}
+.credits__name-box--delay34 {
+  animation-delay: 28.34s;
+}
+.credits__heading--delay35 {
+  animation-delay: 29.7s;
+}
+.credits__name-box--delay36 {
+  animation-delay: 30.38s;
+}
+.credits__heading--delay37 {
+  animation-delay: 31.74s;
+}
+.credits__name-box--delay38 {
+  animation-delay: 32.42s;
+}
+.credits__name-box--delay39 {
+  animation-delay: 33.1s;
+}
+.credits__name-box--delay40 {
+  animation-delay: 33.78s;
+}
+.credits__name-box--delay41 {
+  animation-delay: 34.46s;
+}
+.credits__name-box--delay42 {
+  animation-delay: 35.14s;
+}
+.credits__name-box--delay43 {
+  animation-delay: 35.82s;
+}
+.credits__name-box--delay44 {
+  animation-delay: 36.5s;
+}
+.credits__name-box--delay45 {
+  animation-delay: 37.18s;
+}
+.credits__name-box--delay46 {
+  animation-delay: 37.86s;
+}
+.credits__heading--delay47 {
+  animation-delay: 39.22s;
+}
+.credits__name-box--delay48 {
+  animation-delay: 39.9s;
+}
+.credits__name-box--delay49 {
+  animation-delay: 40.58s;
+}
+.credits__name-box--delay50 {
+  animation-delay: 41.26s;
+}
+.credits__name-box--delay51 {
+  animation-delay: 41.94s;
+}
+.credits__name-box--delay52 {
+  animation-delay: 42.62s;
+}
+.credits__name-box--delay53 {
+  animation-delay: 43.3s;
+}
+.credits__name-box--delay54 {
+  animation-delay: 43.98s;
+}
+.credits__name-box--delay55 {
+  animation-delay: 44.66s;
+}
+.credits__name-box--delay56 {
+  animation-delay: 45.34s;
+}
+.credits__name-box--delay57 {
+  animation-delay: 46.02s;
+}
+.credits__name-box--delay58 {
+  animation-delay: 46.7s;
+}
+.credits__name-box--delay59 {
+  animation-delay: 47.38s;
+}
+.credits__name-box--delay60 {
+  animation-delay: 48.06s;
+}
+.credits__name-box--delay61 {
+  animation-delay: 48.74s;
+}
+.credits__name-box--delay62 {
+  animation-delay: 49.42s;
+}
+.credits__name-box--delay63 {
+  animation-delay: 50.1s;
+}
+.credits__name-box--delay64 {
+  animation-delay: 50.78s;
+}
+.credits__name-box--delay65 {
+  animation-delay: 51.46s;
+}
+.credits__heading--delay66 {
+  animation-delay: 52.82s;
+}
+.credits__name-box--delay67 {
+  animation-delay: 53.5s;
+}
+.credits__name-box--delay68 {
+  animation-delay: 54.18s;
+}
+.credits__name-box--delay69 {
+  animation-delay: 54.86s;
+}
+.credits__heading--delay70 {
+  animation-delay: 56.22s;
+}
+.credits__name-box--delay71 {
+  animation-delay: 56.9s;
+}
+.credits__name-box--delay72 {
+  animation-delay: 57.58s;
+}
+.credits__name-box--delay73 {
+  animation-delay: 58.26s;
+}
+.credits__name-box--delay74 {
+  animation-delay: 58.94s;
+}
+.credits__name-box--delay75 {
+  animation-delay: 59.62s;
+}
+.credits__name-box--delay76 {
+  animation-delay: 60.3s;
+}
+.credits__name-box--delay77 {
+  animation-delay: 60.98s;
+}
+.credits__name-box--delay78 {
+  animation-delay: 61.66s;
+}
+.credits__name-box--delay79 {
+  animation-delay: 62.34s;
+}
+.credits__name-box--delay80 {
+  animation-delay: 63.02s;
+}
+.credits__name-box--delay81 {
+  animation-delay: 63.7s;
+}
+.credits__name-box--delay82 {
+  animation-delay: 64.38s;
+}
+.credits__name-box--delay83 {
+  animation-delay: 65.06s;
+}
+.credits__name-box--delay84 {
+  animation-delay: 65.74s;
+}
+.credits__name-box--delay85 {
+  animation-delay: 66.42s;
+}
+.credits__name-box--delay86 {
+  animation-delay: 67.1s;
+}
+.credits__heading--delay87 {
+  animation-delay: 68.46s;
+}
+.credits__name-box--delay88 {
+  animation-delay: 69.14s;
+}
+.credits__heading--delay89 {
+  animation-delay: 70.5s;
+}
+.credits__name-box--delay90 {
+  animation-delay: 71.18s;
+}
+.credits__heading--delay91 {
+  animation-delay: 72.54s;
+}
+.credits__name-box--delay92 {
+  animation-delay: 73.22s;
+}
+.credits__name-box--delay93 {
+  animation-delay: 73.9s;
+}
+.credits__name-box--delay94 {
+  animation-delay: 74.58s;
+}
+.credits__name-box--delay95 {
+  animation-delay: 75.26s;
+}
+.credits__heading--delay96 {
+  animation-delay: 76.62s;
+}
+.credits__name-box--delay97 {
+  animation-delay: 77.3s;
+}
+.credits__heading--delay98 {
+  animation-delay: 78.66s;
+}
+.credits__name-box--delay99 {
+  animation-delay: 79.34s;
+}
+.credits__name-box--delay100 {
+  animation-delay: 80.02s;
+}
+
+/* Beyond Smaller Mobile */
+@media (min-width: 375px) {
+  .credits__roles, .credits__role-box {
+    margin-right: 3em;
+  }
+  .credits__ui, .credits__wrapper {
+    justify-content: flex-end;
+  }
+}
+/* Animations */
+@keyframes crosshairsEnter {
+  from {
+    transform: translateY(-20.25em);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes nameHit {
+  from {
+    width: 100%;
+    height: 100%;
+    transform: translate(-8.7em, -6.6em);
+  }
+  33% {
+    width: 60%;
+    height: 60%;
+    transform: translate(-4.35em, -3.3em);
+  }
+  67% {
+    width: 20%;
+    height: 20%;
+    transform: translate(0, 0);
+  }
+  to {
+    width: 0;
+    height: 0;
+    transform: translate(0, 0);
+  }
+}
+@keyframes nameRotate {
+  from {
+    transform: translateX(-50%) rotateX(65deg) rotateZ(0) translateY(12.5em) rotateZ(0) rotateX(-65deg) rotateZ(20deg) scale(2);
+    visibility: visible;
+  }
+  to {
+    transform: translateX(-50%) rotateX(65deg) rotateZ(-185deg) translateY(13em) rotateZ(185deg) rotateX(-65deg) rotateZ(-18deg) scale(0.6);
+    visibility: visible;
+  }
+}
+@keyframes nameSelect1 {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 16px 0;
+  }
+}
+@keyframes nameSelect2 {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 0 16px;
+  }
+}
+@keyframes nameSelect3 {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -16px 0;
+  }
+}
+@keyframes nameSelect4 {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 0 -16px;
+  }
+}
+@keyframes roleBoxEnter {
+  from {
+    visibility: hidden;
+  }
+  2.9761904762%, to {
+    visibility: visible;
+  }
+}
\ No newline at end of file
diff --git a/super-smash-bros-credits/src/index.html b/super-smash-bros-credits/src/index.html
new file mode 100644
index 0000000..eee100f
--- /dev/null
+++ b/super-smash-bros-credits/src/index.html
@@ -0,0 +1,1685 @@
+<div class="credits">
+	<div class="credits__wrapper">
+		<h2 class="credits__heading credits__heading--delay1">Director</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name1" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay2">
+					<label for="name1" class="credits__name">
+						<span class="credits__name-text">Masahiro Sakurai</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Game Design</li>
+					<li class="credits__role">Planning</li>
+					<li class="credits__role">Direction</li>
+					<li class="credits__role">Motion Coaching</li>
+					<li class="credits__role">Kirby Original Design</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay3">Chief Programmer</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name2" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay4">
+					<label for="name2" class="credits__name">
+						<span class="credits__name-text">Yoshiki Suzuki</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Program Management</li>
+					<li class="credits__role">System, Player<br>Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay5">Programmers</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name3" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay6">
+					<label for="name3" class="credits__name">
+						<span class="credits__name-text">Kouichi Watanabe</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Library, Map, Display,<br>Effect, Computer Player,<br>1P Game, Boss,<br>Training Mode Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name4" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay7">
+					<label for="name4" class="credits__name">
+						<span class="credits__name-text">Yasuyuki Nagashima</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Character & Game Mode Select Screen, Ranking, Opening, Screen Adjust, Backup RAM Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name5" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay8">
+					<label for="name5" class="credits__name">
+						<span class="credits__name-text">Yoshimi Takahashi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Item, Device, Sound Test, Staff Roll, Title<br>Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name6" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay9">
+					<label for="name6" class="credits__name">
+						<span class="credits__name-text">Katsuhiro Sakoda</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pikachu, Ness<br>Special Moves Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name7" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay10">
+					<label for="name7" class="credits__name">
+						<span class="credits__name-text">Yoshiya Taniguchi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Link, Kirby, Yoshi,<br>C.Falcon<br>Special Moves Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay11">Chief Designer</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name8" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay12">
+					<label for="name8" class="credits__name">
+						<span class="credits__name-text">Tsuyoshi Wakayama</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Design Management</li>
+					<li class="credits__role">Modeling Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+		</ul>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay13">Designers</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name9" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay14">
+					<label for="name9" class="credits__name">
+						<span class="credits__name-text">Hitoshi Kikkawa</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Mario, Luigi, Fox, Yoshi,<br>Pikachu, Kirby,<br>Jigglypuff Model</li>
+					<li class="credits__role">Mario, Luigi, Yoshi Motion</li>
+					<li class="credits__role">Bonus Stage Map Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name10" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay15">
+					<label for="name10" class="credits__name">
+						<span class="credits__name-text">Junsuke Sugiura</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">DK, Samus, C.Falcon, Link, Ness Model</li>
+					<li class="credits__role">DK, Link Motion</li>
+					<li class="credits__role">Bonus Stage Map Support</li>
+					<li class="credits__role">Motion Capture Actor</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name11" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay16">
+					<label for="name11" class="credits__name">
+						<span class="credits__name-text">Satoko Nakamura</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Samus Motion</li>
+					<li class="credits__role">Item, Effect,<br>1P Start Screen</li>
+					<li class="credits__role">Training Screen Design</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name12" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay17">
+					<label for="name12" class="credits__name">
+						<span class="credits__name-text">Tadashi Hashikura</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Effect Design</li>
+					<li class="credits__role">Samus, DK, Fox, Kirby, Pikachu, Boss Map Design</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name13" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay18">
+					<label for="name13" class="credits__name">
+						<span class="credits__name-text">Michiko Takahashi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Menu, Character Select Screen, Mark, Title Design</li>
+					<li class="credits__role">Mario, Yoshi, <br>Classic Mario<br>Map Design</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name14" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay19">
+					<label for="name14" class="credits__name">
+						<span class="credits__name-text">Akio Hanyu</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Mario, DK, Samus, Fox<br>Motion Support</li>
+					<li class="credits__role">Yoshi Damage Motion</li>
+					<li class="credits__role">Bonus Stage Map Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name15" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay20">
+					<label for="name15" class="credits__name">
+						<span class="credits__name-text">Isao Takahashi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Fox, Kirby, Boss Motion</li>
+					<li class="credits__role">Motion Capture Data<br>Convert</li>
+					<li class="credits__role">Bonus Stage Map Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name16" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay21">
+					<label for="name16" class="credits__name">
+						<span class="credits__name-text">Youichi Sukino</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pikachu Motion</li>
+					<li class="credits__role">Samus, Fox Damage Motion</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name17" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay22">
+					<label for="name17" class="credits__name">
+						<span class="credits__name-text">Kazu Ozawa</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Item Design</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name18" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay23">
+					<label for="name18" class="credits__name">
+						<span class="credits__name-text">Kunio Watanabe</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Opening,<br>Effect Design</li>
+					<li class="credits__role">Bonus Stage Map</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name19" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay24">
+					<label for="name19" class="credits__name">
+						<span class="credits__name-text">Shigeru Hashiguchi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pokémon Model Confusion</li>
+					<li class="credits__role">Design Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name20" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay25">
+					<label for="name20" class="credits__name">
+						<span class="credits__name-text">Tatsuhiko Oi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">C.Falcon, Ness,<br>Jigglypuff Motion</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name21" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay26">
+					<label for="name21" class="credits__name">
+						<span class="credits__name-text">Masaya Akiyama</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">C.Falcon, Ness,<br>Jigglypuff Motion</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name22" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay27">
+					<label for="name22" class="credits__name">
+						<span class="credits__name-text">Senji Hirose</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">C.Falcon, Ness,<br>Jigglypuff Motion</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name23" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay28">
+					<label for="name23" class="credits__name">
+						<span class="credits__name-text">Eriko Suzuki</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">C.Falcon, Ness,<br>Jigglypuff Motion</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name24" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay29">
+					<label for="name24" class="credits__name">
+						<span class="credits__name-text">C Shane Allala</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pikachu Motion</li>
+					<li class="credits__role">Ness Damage Motion</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name25" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay30">
+					<label for="name25" class="credits__name">
+						<span class="credits__name-text">Takeshi Iizuka</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pikachu Map<br>Design</li>
+					<li class="credits__org">(Creatures)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name26" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay31">
+					<label for="name26" class="credits__name">
+						<span class="credits__name-text">Nachi Sugiyama</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Opening Design</li>
+					<li class="credits__org">(Creatures)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name27" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay32">
+					<label for="name27" class="credits__name">
+						<span class="credits__name-text">Ryuta Kusumi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Opening Design</li>
+					<li class="credits__org">(Creatures)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay33">Sound Composer</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name28" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay34">
+					<label for="name28" class="credits__name">
+						<span class="credits__name-text">Hirokazu Ando</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">BGM Compose & Arrange</li>
+					<li class="credits__role">FGM Compose</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay35">Support</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name29" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay36">
+					<label for="name29" class="credits__name">
+						<span class="credits__name-text">Hisatoshi Takeuchi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Project Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay37">Voice Actors</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name30" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay38">
+					<label for="name30" class="credits__name">
+						<span class="credits__name-text">Charles Martinet</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Mario, Luigi Voice</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name31" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay39">
+					<label for="name31" class="credits__name">
+						<span class="credits__name-text">Nobuyuki Hiyama</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Link Voice</li>
+					<li class="credits__org">(ARTSVISION)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name32" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay40">
+					<label for="name32" class="credits__name">
+						<span class="credits__name-text">Kazumi Totaka</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Yoshi Voice</li>
+					<li class="credits__role">'Yoshi's Story'<br>Original Sound Compose</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name33" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay41">
+					<label for="name33" class="credits__name">
+						<span class="credits__name-text">Makiko Ohmoto</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Kirby, Ness Voice</li>
+					<li class="credits__org">(AONI Prod.)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name34" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay42">
+					<label for="name34" class="credits__name">
+						<span class="credits__name-text">Shinobu Satouchi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Fox Voice</li>
+					<li class="credits__org">(AONI Prod.)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name35" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay43">
+					<label for="name35" class="credits__name">
+						<span class="credits__name-text">Ikue Ootani</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pikachu Voice</li>
+					<li class="credits__org">(EZAKI Prod.)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name36" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay44">
+					<label for="name36" class="credits__name">
+						<span class="credits__name-text">Ryo Horikawa</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">C.Falcon Voice</li>
+					<li class="credits__org">(AONI Prod.)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name37" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay45">
+					<label for="name37" class="credits__name">
+						<span class="credits__name-text">Rachael Lillis</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Jigglypuff Voice</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name38" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay46">
+					<label for="name38" class="credits__name">
+						<span class="credits__name-text">Jeff Manning</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Narrator Voice</li>
+					<li class="credits__org">(Mickey's Company)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay47">Original Game Staff</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name39" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay48">
+					<label for="name39" class="credits__name">
+						<span class="credits__name-text">Yoshiaki Koizumi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Mario, Luigi, Link,<br>Yoshi Source Model</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name40" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay49">
+					<label for="name40" class="credits__name">
+						<span class="credits__name-text">Koji Kondo</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Super Mario Bros.'<br>'The Legend of Zelda'<br>'Star Fox 64'<br>Original Sound Composing</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name41" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay50">
+					<label for="name41" class="credits__name">
+						<span class="credits__name-text">Hiroji Kiyotake</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Samus Original Design</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name42" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay51">
+					<label for="name42" class="credits__name">
+						<span class="credits__name-text">Tomoyoshi Yamane</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Super Metroid'<br>CG Design</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name43" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay52">
+					<label for="name43" class="credits__name">
+						<span class="credits__name-text">RARE</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Donkey Kong Country' Original Sound Composing</li>
+					<li class="credits__role">Rendered 3-D Donkey Kong Character used with permission of Rare.</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name44" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay53">
+					<label for="name44" class="credits__name">
+						<span class="credits__name-text">Hirokazu Tanaka</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Metroid' Original<br>Sound Composing</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name45" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay54">
+					<label for="name45" class="credits__name">
+						<span class="credits__name-text">Takashi Tezuka</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Yoshi's Story' Production</li>
+					<li class="credits__role">Advice</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name46" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay55">
+					<label for="name46" class="credits__name">
+						<span class="credits__name-text">Shigefumi Hino</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Yoshi Original Design</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name47" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay56">
+					<label for="name47" class="credits__name">
+						<span class="credits__name-text">Jun Ishikawa</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Kirby Super Star'<br>Original Sound Composing</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name48" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay57">
+					<label for="name48" class="credits__name">
+						<span class="credits__name-text">Takao Shimizu</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Star Fox 64' Direction</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name49" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay58">
+					<label for="name49" class="credits__name">
+						<span class="credits__name-text">Takaya Imamura</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Fox, C.Falcon<br>Original Design</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name50" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay59">
+					<label for="name50" class="credits__name">
+						<span class="credits__name-text">Satoshi Tajiri</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Pokémon'<br>Game Design,<br>Direction</li>
+					<li class="credits__org">(GAME FREAK)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name51" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay60">
+					<label for="name51" class="credits__name">
+						<span class="credits__name-text">Benimaru Itoh</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Pokémon Stadium'<br>Source Modeling Chief</li>
+					<li class="credits__org">(Creatures)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name52" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay61">
+					<label for="name52" class="credits__name">
+						<span class="credits__name-text">Makoto Wada</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pikachu Source Model</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name53" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay62">
+					<label for="name53" class="credits__name">
+						<span class="credits__name-text">Hikaru Jinguji</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Jigglypuff<br>Source Model</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name54" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay63">
+					<label for="name54" class="credits__name">
+						<span class="credits__name-text">Taro Bando</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'F-ZERO X' Original<br>Sound Composing</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name55" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay64">
+					<label for="name55" class="credits__name">
+						<span class="credits__name-text">Tsunekaz Ishihara</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Pokémon<br>Products Supervisor</li>
+					<li class="credits__role">'Pokémon'<br>'Earthbound' Produce</li>
+					<li class="credits__org">(Creatures)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name56" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay65">
+					<label for="name56" class="credits__name">
+						<span class="credits__name-text">Shigesato Itoi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">'Earthbound' Producer,<br>Title, Story Concept</li>
+					<li class="credits__role">Advice</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay66">NOA Staff</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name57" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay67">
+					<label for="name57" class="credits__name">
+						<span class="credits__name-text">Bill Trinen</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Localization</li>
+					<li class="credits__org">(NOA)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name58" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay68">
+					<label for="name58" class="credits__name">
+						<span class="credits__name-text">Michelle Powers</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Localization</li>
+					<li class="credits__org">(NOA)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name59" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay69">
+					<label for="name59" class="credits__name">
+						<span class="credits__name-text">Greg Richardson</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Localization</li>
+					<li class="credits__org">(NOA)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay70">Special Thanks</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name60" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay71">
+					<label for="name60" class="credits__name">
+						<span class="credits__name-text">Satoshi Ishida</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Debug Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name61" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay72">
+					<label for="name61" class="credits__name">
+						<span class="credits__name-text">Chieko Obikane</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Debug Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name62" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay73">
+					<label for="name62" class="credits__name">
+						<span class="credits__name-text">Tetsuya Notoya</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Editorial Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name63" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay74">
+					<label for="name63" class="credits__name">
+						<span class="credits__name-text">Jun Yamazaki</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Model Converter Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name64" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay75">
+					<label for="name64" class="credits__name">
+						<span class="credits__name-text">Chiharu Itoh</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Model Converter Programming</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name65" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay76">
+					<label for="name65" class="credits__name">
+						<span class="credits__name-text">Yoshiaki Shinohara</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">SGI Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name66" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay77">
+					<label for="name66" class="credits__name">
+						<span class="credits__name-text">Sigezo Kawase</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Data Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name67" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay78">
+					<label for="name67" class="credits__name">
+						<span class="credits__name-text">Shinya Takahashi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Motion Capture SE & OP</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name68" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay79">
+					<label for="name68" class="credits__name">
+						<span class="credits__name-text">Tsuyoshi Watanabe</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Motion Capture SE & OP</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name69" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay80">
+					<label for="name69" class="credits__name">
+						<span class="credits__name-text">Yoshiyuki Tagawa</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Data SE</li>
+					<li class="credits__org">(Creatures)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name70" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay81">
+					<label for="name70" class="credits__name">
+						<span class="credits__name-text">Kensuke Tanabe</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Diplomacy</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name71" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay82">
+					<label for="name71" class="credits__name">
+						<span class="credits__name-text">Yasuhiro Sakai</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Advice</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name72" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay83">
+					<label for="name72" class="credits__name">
+						<span class="credits__name-text">Shingo Okamoto</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Super Mario Club<br>Debug Support</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name73" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay84">
+					<label for="name73" class="credits__name">
+						<span class="credits__name-text">Super Mario Club</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Debug<br>Assessment</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name74" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay85">
+					<label for="name74" class="credits__name">
+						<span class="credits__name-text">HAL Debug Team</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Debug</li>
+					<li class="credits__role">Game Balance Support</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name75" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay86">
+					<label for="name75" class="credits__name">
+						<span class="credits__name-text">4Kids Productions</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">US Pokémon voices</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay87">Project Manager</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name76" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay88">
+					<label for="name76" class="credits__name">
+						<span class="credits__name-text">Ryuki Kuraoka</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Project Management</li>
+					<li class="credits__role">Traffic Management</li>
+					<li class="credits__role">Motion Capture Actor</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay89">Progress Manager</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name77" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay90">
+					<label for="name77" class="credits__name">
+						<span class="credits__name-text">Kimiyoshi Fukui</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Sales Schedule</li>
+					<li class="credits__role">Management</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay91">Producer</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name78" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay92">
+					<label for="name78" class="credits__name">
+						<span class="credits__name-text">Hiroaki Suga</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Negotiations</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name79" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay93">
+					<label for="name79" class="credits__name">
+						<span class="credits__name-text">Satoru Iwata</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Negotiation Chief</li>
+					<li class="credits__role">Computer Player,<br>Test Version Programming</li>
+					<li class="credits__role">Program Support</li>
+					<li class="credits__org">(HAL)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name80" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay94">
+					<label for="name80" class="credits__name">
+						<span class="credits__name-text">Kenji Miki</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Diplomacy,<br>Advice</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name81" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay95">
+					<label for="name81" class="credits__name">
+						<span class="credits__name-text">Shigeru Miyamoto</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Mario, Luigi, Link, DK<br>Original Design</li>
+					<li class="credits__role">Various games<br>Production & Direction</li>
+					<li class="credits__role">Advice</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay96">Executive Producer</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name82" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay97">
+					<label for="name82" class="credits__name">
+						<span class="credits__name-text">Hiroshi Yamauchi</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">Company President<br>of Nintendo, Japan</li>
+					<li class="credits__org">(NINTENDO)</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+		<h2 class="credits__heading credits__heading--delay98">Presents</h2>
+		<ul class="credits__staff-list">
+			<li class="credits__staff-entry">
+				<input id="name83" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay99">
+					<label for="name83" class="credits__name">
+						<span class="credits__name-text">NINTENDO Co.,Ltd</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">60 KAMITAKAMATSU-CHO FUKUINE, HIGASHIYAMA-KU, KYOTO, 605-8660 JAPAN</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+			<li class="credits__staff-entry">
+				<input id="name84" class="credits__input" type="radio" name="staff_entry">
+				<div class="credits__name-box credits__name-box--delay100">
+					<label for="name84" class="credits__name">
+						<span class="credits__name-text">HAL Laboratory,Inc.</span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+						<span class="credits__name-border"></span>
+					</label>
+				</div>
+				<ul class="credits__roles">
+					<li class="credits__role">1999-9 Ryuoushinmachi, Ryuou-cho, Nakakomagun, Yamanashi, 400-0111<br>Japan</li>
+				</ul>
+				<div class="credits__hit">
+					<div class="credits__hit-rect"></div>
+				</div>
+			</li>
+		</ul>
+	</div>
+	<div class="credits__ui">
+		<div class="credits__role-box">
+			<svg class="credits__role-box-left" viewBox="0 0 24 172" aria-hidden="true">
+				<polygon points="2 2,22 2,22 30,14 40,14 132,22 142,22 170,2 170" fill="none" stroke-width="4" />
+			</svg>
+			<svg class="credits__role-box-right" viewBox="0 0 24 172" aria-hidden="true">
+				<polygon points="2 2,22 2,22 170,2 170,2 142,10 132,10 40,2 30" fill="none" stroke-width="4" />
+			</svg>
+		</div>
+		<div class="credits__crosshairs">
+			<div class="credits__crosshairs-top"></div>
+			<div class="credits__crosshairs-right"></div>
+			<div class="credits__crosshairs-bottom"></div>
+			<div class="credits__crosshairs-left"></div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/super-smash-bros-credits/src/script.js b/super-smash-bros-credits/src/script.js
new file mode 100644
index 0000000..90bb496
--- /dev/null
+++ b/super-smash-bros-credits/src/script.js
@@ -0,0 +1,27 @@
+// just for crosshairs positioning
+window.addEventListener("DOMContentLoaded",() => {
+	const credits = new SSBCredits(".credits");
+});
+
+class SSBCredits {
+    constructor(sel) {
+        this.el = document.querySelector(sel);
+        this.el?.addEventListener("click",this.crosshairsUpdate.bind(this));
+    }
+    crosshairsUpdate(e) {
+        const { pageX, pageY } = e;
+
+        if (pageX > 0 && pageY > 0) {
+            const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = this.el;
+            const x = Math.round(pageX - offsetLeft - offsetWidth / 2);
+            const y = Math.round(pageY - offsetTop - offsetHeight / 2);
+    
+            this.el.style.setProperty("--crosshairsX",`${x}px`);
+            this.el.style.setProperty("--crosshairsY",`${y}px`);
+            this.el.style.setProperty("--hitVisibility","visible");
+        } else {
+            // hide the red box and do nothing to the crosshairs if keypress
+            this.el.style.setProperty("--hitVisibility","hidden");
+        }
+    }
+}
\ No newline at end of file
diff --git a/super-smash-bros-credits/src/style.scss b/super-smash-bros-credits/src/style.scss
new file mode 100644
index 0000000..df8d608
--- /dev/null
+++ b/super-smash-bros-credits/src/style.scss
@@ -0,0 +1,408 @@
+@function strip-seconds($s) {
+	@return $s / 1s;
+}
+
+$creditsDur: 84s;
+$nameSelectDur: 0.2s;
+
+* {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+:root {
+	font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
+}
+body {
+	background-color: hsl(0,0%,0%);
+	color: hsl(0,0%,100%);
+	font: 1em/1.5 sans-serif;
+	display: flex;
+	height: 100vh;
+	transition:
+		background-color var(--trans-dur),
+		color var(--trans-dur);
+}
+.credits {
+	--crosshairsX: 0;
+	--crosshairsY: 0;
+	--hitVisibility: visible;
+	aspect-ratio: 4 / 3;
+	margin: auto;
+	max-width: 100vw;
+	max-height: 100vh;
+	min-height: 33em;
+	object-fit: contain;
+	overflow: hidden;
+	position: relative;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+
+	&__crosshairs {
+		animation: crosshairsEnter 0.5s linear;
+		color: hsla(7,100%,40%,0.7);
+		top: calc(50% - 1.875em);
+		left: calc(50% - 1.875em);
+		width: 3.75em;
+		height: 3.75em;
+		transform: translate(var(--crosshairsX),var(--crosshairsY));
+
+		&,
+		&-top,
+		&-right,
+		&-bottom,
+		&-left {
+			position: absolute;
+		}
+		&-top,
+		&-right,
+		&-bottom,
+		&-left {
+			border: 0.75em solid transparent;
+			width: 0;
+			height: 0;
+		}
+		&-top {
+			border-top: 1.25em solid currentColor;
+			top: 0;
+			left: calc(50% - 0.75em);
+		}
+		&-right {
+			border-right: 1.25em solid currentColor;
+			top: calc(50% - 0.75em);
+			right: 0;
+		}
+		&-bottom {
+			border-bottom: 1.25em solid currentColor;
+			left: calc(50% - 0.75em);
+			bottom: 0;
+		}
+		&-left {
+			border-left: 1.25em solid currentColor;
+			top: calc(50% - 0.75em);
+			left: 0;
+		}
+	}
+	&__heading,
+	&__name {
+		display: inline-block;
+		padding: 0 1rem 0 0.75rem;
+		white-space: nowrap;
+	}
+	&__heading,
+	&__name-box {
+		animation: 4s nameRotate cubic-bezier(0.15,0.6,1,1);
+		font-size: 2em;
+		line-height: 1;
+		position: absolute;
+		top: 57.5%;
+		left: calc(50% - 22rem);
+		visibility: hidden;
+	}
+	&__heading,
+	&__name-text {
+		font-family: Cabin, sans-serif;
+		font-weight: 700;
+	}
+	&__heading {
+		color: hsl(240,1%,55%);
+	}
+	&__hit {
+		display: none;
+		pointer-events: none;
+		position: absolute;
+		top: calc(50% - 2.4em);
+		left: calc(50% - 3.2em);
+		width: 32em;
+		height: 24em;
+		transform: translate3d(var(--crosshairsX),var(--crosshairsY),0);
+		z-index: 2;
+
+		&-rect {
+			box-shadow: 0 0 0 0.25em hsla(7,100%,40%,0.7) inset;
+			width: 0;
+			height: 0;
+			transform: translate(-8.7em,-6.6em);
+		}
+	}
+	&__input {
+		position: fixed;
+		top: -1.5em;
+		left: -1.5em;
+	}
+	&__name {
+		cursor: pointer;
+		position: relative;
+		-webkit-tap-highlight-color: #0000;
+
+		&:before,
+		&:after {
+			background-color: #000;
+			content: "";
+			display: block;
+			position: absolute;
+		}
+		&:before {
+			top: -0.25rem;
+			right: 0.5rem;
+			bottom: -0.25rem;
+			left: 0.5rem;
+		}
+		&:after {
+			top: 0.75rem;
+			right: -0.25rem;
+			bottom: 0.75rem;
+			left: -0.25rem;
+		}
+		&-border {
+			background: {
+				image: linear-gradient(0deg,hsl(0,100%,50%) 50%,hsl(0,100%,100%) 50%);
+				size: 2px 16px;
+			};
+			display: none;
+			position: absolute;
+			top: 4px;
+			left: 0;
+			width: 2px;
+			height: calc(100% - 8px);
+			z-index: -1;
+
+			&:nth-child(even) {
+				background: {
+					image: linear-gradient(90deg,hsl(0,100%,50%) 50%,hsl(0,100%,100%) 50%);
+					size: 16px 2px;
+				};
+				width: 100%;
+				height: 2px;
+			}
+			&:nth-child(3) {
+				right: 0;
+				left: auto;
+			}
+			&:nth-child(4) {
+				top: auto;
+				bottom: 4px;
+			}
+		}
+		&-text {
+			color: hsl(234,62%,70%);
+			display: block;
+			position: relative;
+			z-index: 1;
+		}
+	}
+	&__role {
+		color: hsl(237,48%,83%);
+	}
+	&__roles,
+	&__role-box {
+		position: relative;
+		margin-top: 1.25em;
+		width: 17em;
+		height: 9.25em;
+	}
+	&__role-box,
+	&__wrapper {
+		animation: roleBoxEnter $creditsDur steps(1,end);
+		visibility: hidden;
+	}
+	&__role-box {
+		box-shadow: 0 0 0 0.25em hsl(17,5%,28%);
+	}
+	&__role-box-left,
+	&__role-box-right {
+		stroke: hsl(51,21%,32%);
+		position: absolute;
+		top: -0.5em;
+		right: 17.375em;
+		width: 1.5em;
+		height: 10.75em;
+	}
+	&__role-box-right {
+		right: -2.125em;
+	}
+	&__roles,
+	&__staff-list {
+		list-style: none;
+	}
+	&__roles {
+		font-family: Orbitron, sans-serif;
+		font-weight: 500;
+		display: none;
+		flex-direction: column;
+		padding: 0 0.375em 0.25em 0.375em;
+		z-index: 1;
+	}
+	&__staff-entry {
+		display: block;
+	}
+	&__org {
+		color: hsl(301,29%,41%);
+		margin-top: auto;
+	}
+	&__ui,
+	&__wrapper {
+		display: flex;
+		justify-content: center;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+	&__ui {
+		pointer-events: none;
+		z-index: 3;
+	}
+
+	/* Name selection */
+	&__input:checked ~ &__hit {
+		display: block;
+		visibility: var(--hitVisibility);
+	}
+	&__input:checked ~ &__hit &__hit-rect {
+		animation: nameHit 0.12s steps(1,end) 3;
+	}
+	&__input:checked ~ &__roles {
+		display: flex;
+	}
+	&__input:checked + &__name-box &__name-border {
+		display: block;
+	}
+	&__input:checked + &__name-box &__name-border:nth-child(2) {
+		animation: nameSelect1 $nameSelectDur linear infinite;
+	}
+	&__input:checked + &__name-box &__name-border:nth-child(3) {
+		animation: nameSelect2 $nameSelectDur linear infinite;
+	}
+	&__input:checked + &__name-box &__name-border:nth-child(4) {
+		animation: nameSelect3 $nameSelectDur linear infinite;
+	}
+	&__input:checked + &__name-box &__name-border:nth-child(5) {
+		animation: nameSelect4 $nameSelectDur linear infinite;
+	}
+
+	/* Name rotation */
+	$delayInc: 0.68s;
+	$delayMore: 1.14s;
+	$headingNthChildren: 1,3,5,11,13,33,35,37,47,66,70,87,89,91,96,98;
+
+	@for $n from 1 through 100 {
+		$delay: $delayInc * $n + $delayMore;
+
+		@if index($headingNthChildren, $n) != null {
+			$delayMore: $delayMore + $delayInc;
+			$delay: $delayInc * $n + $delayMore;
+			&__heading--delay#{$n} {
+				animation-delay: $delay;
+			}
+		}
+		@else {
+			&__name-box--delay#{$n} {
+				animation-delay: $delay;
+			}
+		}
+
+	}
+}
+
+/* Beyond Smaller Mobile */
+@media (min-width: 375px) {
+	.credits {
+		&__roles,
+		&__role-box {
+			margin-right: 3em;
+		}
+		&__ui,
+		&__wrapper {
+			justify-content: flex-end;
+		}
+	}
+}
+
+/* Animations */
+@keyframes crosshairsEnter {
+	from {
+		transform: translateY(-20.25em);
+	}
+	to {
+		transform: translateY(0);
+	}
+}
+@keyframes nameHit {
+	from {
+		width: 100%;
+		height: 100%;
+		transform: translate(-8.7em,-6.6em);
+	}
+	33% {
+		width: 60%;
+		height: 60%;
+		transform: translate(-4.35em,-3.3em);
+	}
+	67% {
+		width: 20%;
+		height: 20%;
+		transform: translate(0,0);
+	}
+	to {
+		width: 0;
+		height: 0;
+		transform: translate(0,0);
+	}
+}
+@keyframes nameRotate {
+	from {
+		transform:
+			translateX(-50%) rotateX(65deg) rotateZ(0) translateY(12.5em) rotateZ(0) rotateX(-65deg) rotateZ(20deg) scale(2);
+		visibility: visible;
+	}
+	to {
+		transform:
+			translateX(-50%) rotateX(65deg) rotateZ(-185deg) translateY(13em) rotateZ(185deg) rotateX(-65deg) rotateZ(-18deg) scale(0.6);
+		visibility: visible;
+	}
+}
+@keyframes nameSelect1 {
+	from {
+		background-position: 0 0;
+	}
+	to {
+		background-position: 16px 0;
+	}
+}
+@keyframes nameSelect2 {
+	from {
+		background-position: 0 0;
+	}
+	to {
+		background-position: 0 16px;
+	}
+}
+@keyframes nameSelect3 {
+	from {
+		background-position: 0 0;
+	}
+	to {
+		background-position: -16px 0;
+	}
+}
+@keyframes nameSelect4 {
+	from {
+		background-position: 0 0;
+	}
+	to {
+		background-position: 0 -16px;
+	}
+}
+@keyframes roleBoxEnter {
+	from {
+		visibility: hidden;
+	}
+	#{2.5 / strip-seconds($creditsDur) * 100%},
+	to {
+		visibility: visible;
+	}
+}
\ No newline at end of file
diff --git a/svg-blob-u-lator/README.markdown b/svg-blob-u-lator/README.markdown
new file mode 100644
index 0000000..05239da
--- /dev/null
+++ b/svg-blob-u-lator/README.markdown
@@ -0,0 +1,5 @@
+# SVG Blob-u-lator
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/WNGJPXm](https://codepen.io/cobra_winfrey/pen/WNGJPXm).
+
+
diff --git a/svg-blob-u-lator/dist/index.html b/svg-blob-u-lator/dist/index.html
new file mode 100644
index 0000000..71b3d93
--- /dev/null
+++ b/svg-blob-u-lator/dist/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - SVG Blob-u-lator</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id='grid'>
+  <div class='cell'>
+    <div class='inner'>
+      <div class='sphere'></div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='inner'>
+      <div class='sphere'></div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='inner'>
+      <div class='sphere'></div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='inner'>
+      <div class='sphere'></div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='inner'>
+      <div class='sphere'></div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='inner'>
+      <div class='sphere'></div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='inner'>
+      <div class='sphere'></div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='inner'>
+      <div class='sphere'></div>
+    </div>
+  </div>
+  <div class='cell'>
+    <div class='inner'>
+      <div class='sphere'></div>
+    </div>
+  </div>
+</div>
+<div id='controls'>
+  <input class='slider' id='scale' max='125' min='0' step='0.5' type='range' value='67'>
+  <input class='slider' id='frequencyX' max='200' min='0' step='0.5' type='range' value='150'>
+  <input class='slider' id='frequencyY' max='200' min='0' step='0.5' type='range' value='150'>
+</div>
+<svg version='1.1' xmlns='http://www.w3.org/2000/svg'>
+  <defs>
+    <filter id='filter1'>
+      <feturbulence basefrequency='0.005 0.005' id='frequency1' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement1' in2='fractalNoise' in='SourceGraphic' scale='0'></fedisplacementmap>
+    </filter>
+    <filter id='filter2'>
+      <feturbulence basefrequency='0.005 0.005' id='frequency2' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement2' in2='fractalNoise' in='SourceGraphic' scale='0'></fedisplacementmap>
+    </filter>
+    <filter id='filter3'>
+      <feturbulence basefrequency='0.005 0.005' id='frequency3' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement3' in2='fractalNoise' in='SourceGraphic' scale='0'></fedisplacementmap>
+    </filter>
+    <filter id='filter4'>
+      <feturbulence basefrequency='0.005 0.005' id='frequency4' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement4' in2='fractalNoise' in='SourceGraphic' scale='0'></fedisplacementmap>
+    </filter>
+    <filter id='filter5'>
+      <feturbulence basefrequency='0.005 0.005' id='frequency5' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement5' in2='fractalNoise' in='SourceGraphic' scale='0'></fedisplacementmap>
+    </filter>
+    <filter id='filter6'>
+      <feturbulence basefrequency='0.005 0.005' id='frequency6' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement6' in2='fractalNoise' in='SourceGraphic' scale='0'></fedisplacementmap>
+    </filter>
+    <filter id='filter7'>
+      <feturbulence basefrequency='0.005 0.005' id='frequency7' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement7' in2='fractalNoise' in='SourceGraphic' scale='0'></fedisplacementmap>
+    </filter>
+    <filter id='filter8'>
+      <feturbulence basefrequency='0.005 0.005' id='frequency8' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement8' in2='fractalNoise' in='SourceGraphic' scale='0'></fedisplacementmap>
+    </filter>
+    <filter id='filter9'>
+      <feturbulence basefrequency='0.005 0.005' id='frequency9' numoctaves='1' result='noise' seed='1' type='fractalNoise'></feturbulence>
+      <fedisplacementmap id='displacement9' in2='fractalNoise' in='SourceGraphic' scale='0'></fedisplacementmap>
+    </filter>
+  </defs>
+</svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/svg-blob-u-lator/dist/script.js b/svg-blob-u-lator/dist/script.js
new file mode 100644
index 0000000..e224047
--- /dev/null
+++ b/svg-blob-u-lator/dist/script.js
@@ -0,0 +1,55 @@
+const grid = document.querySelector('#grid');
+const body = document.body;
+let index = -1;
+let toggle = true;
+const scaleFilter = document.querySelector('#scale');
+const frequencyFilterX = document.querySelector('#frequencyX');
+const frequencyFilterY = document.querySelector('#frequencyY');
+const displacement = document.querySelectorAll('fedisplacementmap');
+const frequency = document.querySelectorAll('feturbulence');
+let totalVal = [];
+
+
+document.addEventListener("DOMContentLoaded", function(){
+  updateCell();
+ grid.querySelectorAll(".cell").forEach(cell => { 
+   index += 1;
+   var displaceVal = displacement[index];
+   var freqVal = frequency[index];
+   var totalX = Math.min(0.05, Math.max(Math.random() * 90)/915000);
+   var totalY = Math.min(0.05, Math.max(Math.random() * 90)/915000);
+   var scaleVal = Math.min(40, ((Math.random() * 80)/30));
+   
+   displaceVal.setAttribute("scale", (scaleFilter.value * scaleVal));
+    freqVal.setAttribute("baseFrequency", (frequencyFilterX.value * totalX) + ' ' + (frequencyFilterY.value * totalY));
+   body.querySelectorAll(".slider").forEach(slider => { 
+     
+  slider.addEventListener('input', e => {
+    displaceVal.setAttribute("scale", (scaleFilter.value * scaleVal));
+    freqVal.setAttribute("baseFrequency", (frequencyFilterX.value * totalX) + ' ' + (frequencyFilterY.value * totalY));
+    updateCell();
+  });
+  
+  
+     });
+})
+});
+
+function updateCell(){
+   grid.querySelectorAll(".cell").forEach(cell => { 
+  cell.style.setProperty("--angle", Math.floor(Math.random() * 360) + "deg");
+  cell.style.setProperty("--angle1", Math.floor(Math.random() * 100)); 
+  cell.style.setProperty("--angle2", Math.floor(Math.random() * 100)); 
+    cell.style.setProperty("--scale", (Math.floor(Math.random() * 100) * 0.01) + 0.35); 
+    cell.style.setProperty("--scale2", (Math.floor(Math.random() * 100) * 0.01) + 0.35); 
+     cell.style.setProperty("--radius1", Math.max(100, Math.random() * 200));
+     cell.style.setProperty("--radius2", Math.max(100, Math.random() * 200));
+     cell.style.setProperty("--radius3", Math.max(100, Math.random() * 200));
+     cell.style.setProperty("--radius4", Math.max(100, Math.random() * 200));
+    cell.style.setProperty("--depth", Math.max(10, (Math.random() * 50))); 
+  cell.style.setProperty("--colorA","var(--color" + Math.floor(Math.random() * 4) + ")");
+     cell.style.setProperty("--colorB","var(--color" + Math.floor(Math.random() * 4) + ")");
+    cell.style.setProperty("--colorC","var(--color" + Math.floor(Math.random() * 4) + ")");
+     cell.style.setProperty("--colorD","var(--color" + Math.floor(Math.random() * 4) + ")");
+   });
+}
\ No newline at end of file
diff --git a/svg-blob-u-lator/dist/style.css b/svg-blob-u-lator/dist/style.css
new file mode 100644
index 0000000..b662da3
--- /dev/null
+++ b/svg-blob-u-lator/dist/style.css
@@ -0,0 +1,242 @@
+body {
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  height: 100vh;
+  --t: rgba(255,255,255,0.001);
+  --color0: #75fefb;
+  --color1: #5d83fe;
+  --color2: #fe47f9;
+  --color3: #ffe33a;
+  --colorA: var(--color2);
+  --colorB: var(--color3);
+  --angle1: 25%;
+  --angle2: 50%;
+  --depth:25;
+  background: radial-gradient(circle at center, var(--color0), var(--t) 250px) -75vw 25%, radial-gradient(circle at center, var(--color3), var(--t) 350px) -25vw 25%, conic-gradient(var(--color0), var(--t), var(--color0)) -75vw 25%, conic-gradient(var(--color1), var(--t), var(--color1)) 50vw -25%, conic-gradient(var(--color2), var(--t), var(--color2)) 75vw 25%, conic-gradient(var(--t), var(--color3), var(--t)) 15vw -25%, var(--color3);
+}
+body * {
+  box-sizing: border-box;
+}
+body svg {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+body #controls {
+  position: absolute;
+  top: calc(50% + 260px);
+  left: 50%;
+  transform: translate(-50%);
+  height: 75px;
+  width: 550px;
+  box-shadow: inset 0 20px 40px -20px rgba(0, 0, 0, 0.05), inset 0 0 0 1px #efefef, 0 0 0 1px #efefef, 0 20px 40px -15px rgba(0, 0, 0, 0.15);
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  align-items: center;
+  z-index: 0;
+  padding-top: 40px;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 0 0 10px 10px;
+  font-family: "Oswald";
+}
+body #controls input[type=range] {
+  -webkit-appearance: none;
+  background: transparent;
+  margin-bottom: 10px;
+}
+body #controls input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+}
+body #controls input[type=range]:focus {
+  outline: none;
+}
+body #controls input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 50px;
+  cursor: pointer;
+  margin-top: -6px;
+  background: var(--colorA);
+  box-shadow: inset 0 -5px 7.5px -5px #000, inset 0 -10px 10px -2.5px var(--colorB);
+}
+body #controls input[type=range]:nth-of-type(2)::-webkit-slider-thumb {
+  --colorA:var(--color1);
+  --colorB: var(--color0);
+}
+body #controls input[type=range]:nth-of-type(3)::-webkit-slider-thumb {
+  --colorA:var(--color0);
+  --colorB:var(--color2);
+}
+body #controls input[type=range]::-webkit-slider-runnable-track, body #controls input[type=range]:focus::-webkit-slider-runnable-track {
+  height: 8px;
+  cursor: pointer;
+  background: #efefef;
+  border-radius: 25px;
+  box-shadow: inset 0 2px 8px -4px #666;
+  outline: none;
+}
+body #controls input {
+  position: relative;
+  outline: none;
+}
+body #controls input:before {
+  content: "Displacement Scale";
+  color: #666;
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  top: -30px;
+  font-size: 14px;
+  font-family: "Oswald";
+}
+body #controls input:nth-of-type(2):before {
+  content: "Turbulence Frequency Y";
+}
+body #controls input:nth-of-type(3):before {
+  content: "Turbulence Frequency X";
+}
+body #grid {
+  width: 450px;
+  height: 450px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  pointer-events: none;
+  position: relative;
+  z-index: 1;
+  transform: translateY(-30px);
+}
+body #grid:before {
+  content: "";
+  position: absolute;
+  width: 130%;
+  height: 130%;
+  left: -15%;
+  top: -15%;
+  box-shadow: inset 0 0 0 1px #efefef, 0 0 0 1px #efefef, 0 20px 40px -15px rgba(0, 0, 0, 0.15);
+  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.75) 1.5px, var(--t) 1px, var(--t) 10px) 50% 50%/20px 20px, radial-gradient(circle at center, rgba(255, 255, 255, 0.75) 1.5px, var(--t) 1px, var(--t) 10px) calc(50% + 10px) calc(50% + 10px)/20px 20px;
+  -webkit-backdrop-filter: blur(5px);
+          backdrop-filter: blur(5px);
+  z-index: -1;
+}
+body #grid .cell {
+  position: relative;
+  transform: translateX(-12.5px);
+  background: radial-gradient(circle at center, var(--color0), var(--t) 250px) -75vw 25%, radial-gradient(circle at center, var(--color3), var(--t) 300px) -25vw 25%, conic-gradient(var(--color0), var(--t), var(--color0)) -75vw 25%, conic-gradient(var(--color1), var(--t), var(--color1)) 50vw -25%, conic-gradient(var(--color2), var(--t), var(--color2)) 75vw 25%, conic-gradient(var(--t), var(--color3), var(--t)) 15vw -25%, var(--color3);
+  background-attachment: fixed;
+  box-shadow: inset 0 0 0 1px #efefef, 0 0 0 1px #efefef, 0 20px 40px -15px rgba(0, 0, 0, 0.25);
+  z-index: 3;
+}
+body #grid .cell:nth-of-type(4) {
+  transform: translateX(12.5px);
+}
+body #grid .cell:nth-of-type(5) {
+  transform: translateX(12.5px);
+}
+body #grid .cell:nth-of-type(6) {
+  transform: translateX(12.5px);
+}
+body #grid .cell:nth-of-type(1) .inner {
+  filter: url(#filter1);
+}
+body #grid .cell:nth-of-type(1) .inner:nth-of-type(2) {
+  filter: url(#filter8);
+}
+body #grid .cell:nth-of-type(2) .inner {
+  filter: url(#filter2);
+}
+body #grid .cell:nth-of-type(2) .inner:nth-of-type(2) {
+  filter: url(#filter7);
+}
+body #grid .cell:nth-of-type(3) .inner {
+  filter: url(#filter3);
+}
+body #grid .cell:nth-of-type(3) .inner:nth-of-type(2) {
+  filter: url(#filter6);
+}
+body #grid .cell:nth-of-type(4) .inner {
+  filter: url(#filter4);
+}
+body #grid .cell:nth-of-type(4) .inner:nth-of-type(2) {
+  filter: url(#filter5);
+}
+body #grid .cell:nth-of-type(5) .inner {
+  filter: url(#filter5);
+}
+body #grid .cell:nth-of-type(5) .inner:nth-of-type(2) {
+  filter: url(#filter4);
+}
+body #grid .cell:nth-of-type(6) .inner {
+  filter: url(#filter6);
+}
+body #grid .cell:nth-of-type(6) .inner:nth-of-type(2) {
+  filter: url(#filter3);
+}
+body #grid .cell:nth-of-type(7) .inner {
+  filter: url(#filter7);
+}
+body #grid .cell:nth-of-type(7) .inner:nth-of-type(2) {
+  filter: url(#filter2);
+}
+body #grid .cell:nth-of-type(8) .inner {
+  filter: url(#filter8);
+}
+body #grid .cell:nth-of-type(8) .inner:nth-of-type(2) {
+  filter: url(#filter1);
+}
+body #grid .cell:nth-of-type(9) .inner {
+  filter: url(#filter9);
+}
+body #grid .cell:nth-of-type(9) .inner:nth-of-type(2) {
+  filter: url(#filter0);
+}
+body #grid .cell .inner {
+  position: absolute;
+  width: 500%;
+  height: 500%;
+  left: -200%;
+  top: -200%;
+}
+body #grid .cell .inner .sphere {
+  content: "";
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  left: calc(50% - 50px);
+  top: calc(50% - 50px);
+  border-radius: calc(var(--radius1) * 1px) calc(var(--radius2) * 1px) calc(var(--radius3) * 1px) calc(var(--radius4) * 1px);
+  background: var(--colorB);
+  z-index: 1;
+  transition: 0.25s ease-in-out;
+  transition-delay: 0.05s;
+  transform: translate(calc(var(--angle1) * var(--scale) * 0.5), calc(var(--angle2) * var(--scale2) * 0.5)) scale(calc(var(--scale) * 0.75));
+  box-shadow: inset 0 -20px 40px -10px #000, inset calc(var(--angle1) * 1px) calc(var(--angle2) * 1px) 40px calc((var(--angle1) + var(--angle2)) * -0.25px) var(--colorA), 0 calc(var(--depth) * 2px) 30px calc(var(--depth) * -1px) rgba(0, 0, 0, 0.25);
+}
+body #grid .cell .inner .sphere:before, body #grid .cell .inner .sphere:after {
+  content: "";
+  position: absolute;
+  --colorA: var(--colorC);
+  --colorB: var(--colorD);
+  width: 100px;
+  height: 100px;
+  left: calc(50% - 50px);
+  top: calc(50% - 50px);
+  border-radius: calc(var(--radius2) * 1px) calc(var(--radius4) * 1px) calc(var(--radius3) * 1px) calc(var(--radius4) * 1px);
+  background: var(--colorB);
+  z-index: 1;
+  transition: 0.25s ease-in-out;
+  transition-delay: 0.05s;
+  transform: translate(calc((var(--angle1) * 2%) * (var(--scale2) * -0.5) - 25px), calc((var(--angle2) * 2%) * (var(--scale) * -0.5) + 25px)) scale(calc(var(--scale2) * 0.75));
+  box-shadow: inherit;
+}
+body #grid .cell .inner .sphere:after {
+  --colorA: var(--colorB);
+  --colorB: var(--colorC);
+  border-radius: calc(var(--radius4) * 1px) calc(var(--radius3) * 1px) calc(var(--radius1) * 1px) calc(var(--radius2) * 1px);
+  transform: translate(calc(50px + (var(--angle2) * -4%) * (var(--scale) * 0.25)), calc(50px + (var(--angle1) * -2%) * var(--scale2) * 0.25)) scale(calc(var(--scale) * 0.5));
+}
\ No newline at end of file
diff --git a/svg-blob-u-lator/license.txt b/svg-blob-u-lator/license.txt
new file mode 100644
index 0000000..a392531
--- /dev/null
+++ b/svg-blob-u-lator/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/WNGJPXm)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/svg-blob-u-lator/src/index.haml b/svg-blob-u-lator/src/index.haml
new file mode 100644
index 0000000..2700dd3
--- /dev/null
+++ b/svg-blob-u-lator/src/index.haml
@@ -0,0 +1,18 @@
+#grid
+ -9.times do
+  .cell
+   .inner
+    .sphere
+
+#controls
+ %input#scale.slider{:max => "125", :min => "0", :step => "0.5", :type => "range", :value => "67"}/
+ %input#frequencyX.slider{:max => "200", :min => "0", :step => "0.5", :type => "range", :value => "150"}/
+ %input#frequencyY.slider{:max => "200", :min => "0", :step => "0.5", :type => "range", :value => "150"}/
+ 
+%svg{ :version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
+ %defs
+  - (1..9).each do |i|
+   %filter{:id => "filter#{i}"}
+    %feturbulence{:id => "frequency#{i}", :basefrequency => "0.005 0.005", :numoctaves => "1", :result => "noise", :seed => "1", :type => "fractalNoise"}
+    %fedisplacementmap{:id => "displacement#{i}", :in => "SourceGraphic", :in2 => "fractalNoise", :scale => "0"}
+
diff --git a/svg-blob-u-lator/src/script.js b/svg-blob-u-lator/src/script.js
new file mode 100644
index 0000000..e224047
--- /dev/null
+++ b/svg-blob-u-lator/src/script.js
@@ -0,0 +1,55 @@
+const grid = document.querySelector('#grid');
+const body = document.body;
+let index = -1;
+let toggle = true;
+const scaleFilter = document.querySelector('#scale');
+const frequencyFilterX = document.querySelector('#frequencyX');
+const frequencyFilterY = document.querySelector('#frequencyY');
+const displacement = document.querySelectorAll('fedisplacementmap');
+const frequency = document.querySelectorAll('feturbulence');
+let totalVal = [];
+
+
+document.addEventListener("DOMContentLoaded", function(){
+  updateCell();
+ grid.querySelectorAll(".cell").forEach(cell => { 
+   index += 1;
+   var displaceVal = displacement[index];
+   var freqVal = frequency[index];
+   var totalX = Math.min(0.05, Math.max(Math.random() * 90)/915000);
+   var totalY = Math.min(0.05, Math.max(Math.random() * 90)/915000);
+   var scaleVal = Math.min(40, ((Math.random() * 80)/30));
+   
+   displaceVal.setAttribute("scale", (scaleFilter.value * scaleVal));
+    freqVal.setAttribute("baseFrequency", (frequencyFilterX.value * totalX) + ' ' + (frequencyFilterY.value * totalY));
+   body.querySelectorAll(".slider").forEach(slider => { 
+     
+  slider.addEventListener('input', e => {
+    displaceVal.setAttribute("scale", (scaleFilter.value * scaleVal));
+    freqVal.setAttribute("baseFrequency", (frequencyFilterX.value * totalX) + ' ' + (frequencyFilterY.value * totalY));
+    updateCell();
+  });
+  
+  
+     });
+})
+});
+
+function updateCell(){
+   grid.querySelectorAll(".cell").forEach(cell => { 
+  cell.style.setProperty("--angle", Math.floor(Math.random() * 360) + "deg");
+  cell.style.setProperty("--angle1", Math.floor(Math.random() * 100)); 
+  cell.style.setProperty("--angle2", Math.floor(Math.random() * 100)); 
+    cell.style.setProperty("--scale", (Math.floor(Math.random() * 100) * 0.01) + 0.35); 
+    cell.style.setProperty("--scale2", (Math.floor(Math.random() * 100) * 0.01) + 0.35); 
+     cell.style.setProperty("--radius1", Math.max(100, Math.random() * 200));
+     cell.style.setProperty("--radius2", Math.max(100, Math.random() * 200));
+     cell.style.setProperty("--radius3", Math.max(100, Math.random() * 200));
+     cell.style.setProperty("--radius4", Math.max(100, Math.random() * 200));
+    cell.style.setProperty("--depth", Math.max(10, (Math.random() * 50))); 
+  cell.style.setProperty("--colorA","var(--color" + Math.floor(Math.random() * 4) + ")");
+     cell.style.setProperty("--colorB","var(--color" + Math.floor(Math.random() * 4) + ")");
+    cell.style.setProperty("--colorC","var(--color" + Math.floor(Math.random() * 4) + ")");
+     cell.style.setProperty("--colorD","var(--color" + Math.floor(Math.random() * 4) + ")");
+   });
+}
\ No newline at end of file
diff --git a/svg-blob-u-lator/src/style.scss b/svg-blob-u-lator/src/style.scss
new file mode 100644
index 0000000..972a050
--- /dev/null
+++ b/svg-blob-u-lator/src/style.scss
@@ -0,0 +1,207 @@
+
+
+body{
+  display:grid;
+  place-items:center;
+  overflow:hidden;
+  height:100vh;
+  --t: rgba(255,255,255,0.001);
+  --color0: #75fefb;
+  --color1: #5d83fe;
+  --color2: #fe47f9;
+  --color3: #ffe33a;
+  --colorA: var(--color2);
+  --colorB: var(--color3);
+  --angle1: 25%;
+  --angle2: 50%;
+  --depth:25;
+  background: radial-gradient(circle at center, var(--color0), var(--t) 250px) -75vw 25%, radial-gradient(circle at center, var(--color3), var(--t) 350px) -25vw 25%, conic-gradient(var(--color0), var(--t), var(--color0)) -75vw 25%, conic-gradient(var(--color1), var(--t), var(--color1)) 50vw -25%, conic-gradient(var(--color2), var(--t), var(--color2)) 75vw 25%, conic-gradient(var(--t), var(--color3), var(--t)) 15vw -25%, var(--color3);
+  *{
+    box-sizing:border-box;
+  }
+  svg{
+    position:absolute;
+    width:0;
+    height:0;
+  }
+  #controls{
+    position:absolute;
+    top:calc(50% + 260px);
+    left:50%;
+    transform:translate(-50%);
+    height:75px;
+    width:550px;
+    box-shadow:inset 0 20px 40px -20px rgba(0,0,0,0.05), inset 0 0 0 1px #efefef, 0 0 0 1px #efefef, 0 20px 40px -15px rgba(0,0,0,0.15);
+    display:flex;
+    justify-content:space-around;
+    flex-wrap:wrap;
+    align-items:center;
+    z-index:0;
+    padding-top:40px;
+    background:rgba(255,255,255,0.5);
+    border-radius:0 0 10px 10px;
+    font-family:'Oswald';
+    input[type=range] {
+        -webkit-appearance: none;
+        background: transparent;
+        margin-bottom:10px;
+      }
+
+      input[type=range]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+      }
+
+      input[type=range]:focus {
+        outline: none;
+      }
+        input[type=range]::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          height: 20px;
+          width: 20px;
+          border-radius: 50px;
+          cursor: pointer;
+          margin-top: -6px;
+          background:var(--colorA);
+          box-shadow:inset 0 -5px 7.5px -5px #000, inset 0 -10px 10px -2.5px var(--colorB);
+        }
+        input[type=range]:nth-of-type(2)::-webkit-slider-thumb{
+          --colorA:var(--color1);
+          --colorB: var(--color0);
+        }
+        input[type=range]:nth-of-type(3)::-webkit-slider-thumb{
+          --colorA:var(--color0);
+          --colorB:var(--color2);
+        }
+
+        input[type=range]::-webkit-slider-runnable-track, input[type=range]:focus::-webkit-slider-runnable-track {
+          height: 8px;
+          cursor: pointer;
+          background: #efefef;
+          border-radius: 25px;
+          box-shadow:inset 0 2px 8px -4px #666;
+          outline:none;
+        }
+
+      input{
+        position:relative;
+        outline: none;
+        &:before{
+          content:'Displacement Scale';
+          color:#666;
+          position:absolute;
+          width:100%;
+          text-align:center;
+          top:-30px;
+          font-size:14px;
+          font-family:'Oswald';
+        }
+        &:nth-of-type(2){
+          &:before{
+            content:'Turbulence Frequency Y'
+          }
+        }
+        &:nth-of-type(3){
+          &:before{
+            content:'Turbulence Frequency X'
+          }
+        }
+    }
+  }
+  #grid{
+    width:450px;
+    height:450px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+    pointer-events:none;
+    position:relative;
+    z-index:1;
+    transform:translateY(-30px);
+    &:before{
+      content:'';
+      position:absolute;
+      width:130%;
+      height:130%;
+      left:-15%;
+      top:-15%;
+      box-shadow:inset 0 0 0 1px #efefef, 0 0 0 1px #efefef, 0 20px 40px -15px rgba(0,0,0,0.15);
+      background:radial-gradient(circle at center, rgba(255,255,255,0.75) 1.5px, var(--t) 1px, var(--t) 10px) 50% 50% / 20px 20px, radial-gradient(circle at center, rgba(255,255,255,0.75) 1.5px, var(--t) 1px, var(--t) 10px) calc(50% + 10px) calc(50% + 10px) / 20px 20px;
+      backdrop-filter:blur(5px);
+      z-index:-1;
+    }
+    .cell{
+      position:relative;
+      transform:translateX(-12.5px);
+      background: radial-gradient(circle at center, var(--color0), var(--t) 250px) -75vw 25%, radial-gradient(circle at center, var(--color3), var(--t) 300px) -25vw 25%, conic-gradient(var(--color0), var(--t), var(--color0)) -75vw 25%, conic-gradient(var(--color1), var(--t), var(--color1)) 50vw -25%, conic-gradient(var(--color2), var(--t), var(--color2)) 75vw 25%, conic-gradient(var(--t), var(--color3), var(--t)) 15vw -25%, var(--color3);
+      background-attachment:fixed;
+      box-shadow:inset 0 0 0 1px #efefef, 0 0 0 1px #efefef, 0 20px 40px -15px rgba(0,0,0,0.25);
+      z-index:3;
+      @for $i from 4 through 6{
+        &:nth-of-type(#{$i}){
+          transform:translateX(12.5px);
+        }
+      }
+      @for $i from 1 through 9{
+        &:nth-of-type(#{$i}){
+          .inner{
+            filter:url(#filter#{$i});
+            &:nth-of-type(2){
+              filter:url(#filter#{9 - $i});
+            }
+          }
+        }
+      }
+      .inner{
+        position:absolute;
+        width:500%;
+        height:500%;
+        left:-200%;
+        top:-200%;
+        .sphere{
+          content:'';
+          position:absolute;
+          width:100px;
+          height:100px;
+          
+          
+          left:calc(50% - 50px);
+          top:calc(50% - 50px);
+          border-radius:calc(var(--radius1) * 1px) calc(var(--radius2) * 1px) calc(var(--radius3) * 1px) calc(var(--radius4) * 1px);
+          background: var(--colorB);
+          z-index:1;
+          transition:0.25s ease-in-out;
+          transition-delay:0.05s;
+          transform:translate(calc(var(--angle1) * var(--scale) * 0.5), calc(var(--angle2) * var(--scale2) * 0.5)) scale(calc(var(--scale) * 0.75));
+          box-shadow:inset 0 -20px 40px -10px #000, inset calc(var(--angle1) * 1px) calc(var(--angle2) * 1px) 40px calc((var(--angle1) + var(--angle2)) * -0.25px) var(--colorA), 0 calc(var(--depth) * 2px) 30px calc(var(--depth) * -1px) rgba(0,0,0,0.25);
+          
+          &:before, &:after{
+          content:'';
+          position:absolute;
+          --colorA: var(--colorC);
+          --colorB: var(--colorD);
+          width:100px;
+          height:100px;
+          left:calc(50% - 50px);
+          top:calc(50% - 50px);
+          border-radius:calc(var(--radius2) * 1px) calc(var(--radius4) * 1px) calc(var(--radius3) * 1px) calc(var(--radius4) * 1px);
+          background: var(--colorB);
+          z-index:1;
+          transition:0.25s ease-in-out;
+          transition-delay:0.05s;
+          
+          transform:translate(calc((var(--angle1) * 2%) * (var(--scale2) * -0.5) - 25px), calc((var(--angle2) * 2%) * (var(--scale) * -0.5) + 25px)) scale(calc(var(--scale2) * 0.75));
+          box-shadow:inherit;
+          }
+          &:after{
+            --colorA: var(--colorB);
+            --colorB: var(--colorC);
+            border-radius:calc(var(--radius4) * 1px) calc(var(--radius3) * 1px) calc(var(--radius1) * 1px) calc(var(--radius2) * 1px);
+            transform:translate(calc(50px + (var(--angle2) * -4%) * (var(--scale) * 0.25)), calc(50px + (var(--angle1) * -2%) * var(--scale2) * 0.25)) scale(calc(var(--scale) * 0.5));
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/svg-flower-generator/README.markdown b/svg-flower-generator/README.markdown
new file mode 100644
index 0000000..ea40a20
--- /dev/null
+++ b/svg-flower-generator/README.markdown
@@ -0,0 +1,7 @@
+# SVG Flower Generator
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/soju22/pen/XGLZLp](https://codepen.io/soju22/pen/XGLZLp).
+
+ Another toy for my daughters ^^
+Made with svg & css animation (looks better on Firefox).
+
+Previous toy : https://codepen.io/soju22/pen/NJdEpg
\ No newline at end of file
diff --git a/svg-flower-generator/dist/index.html b/svg-flower-generator/dist/index.html
new file mode 100644
index 0000000..962cd78
--- /dev/null
+++ b/svg-flower-generator/dist/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>SVG Flower Generator</title>
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat'>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg id="svg"></svg>
+
+<header>
+  <h1>Random Flower Generator</h1>
+  <a href="https://codepen.io/collection/DPjZxo/" target="_blank">SVG Collection</a>
+</header>
+<footer>
+  Click to generate random flowers
+</footer>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/svg-flower-generator/dist/script.js b/svg-flower-generator/dist/script.js
new file mode 100644
index 0000000..0cf4369
--- /dev/null
+++ b/svg-flower-generator/dist/script.js
@@ -0,0 +1,206 @@
+const { random, PI, sin, cos, round, floor, ceil, min, max } = Math;
+
+function App() {
+  const svg = document.getElementById('svg');
+  let width, height, cx, cy;
+
+  let zoom = 100;
+  let vbOX = 0;
+  let vbOY = 0;
+
+  init();
+
+  function init() {
+    onResize();
+    initEventHandlers();
+
+    new Flower({
+      parent: svg,
+      x: 0,
+      y: 0,
+      petals: 8,
+      rings: 12,
+      step: 4,
+      colors: ['#21B91B', '#FFFF80', '#D1104D', '#7F266A'],
+      alpha: 0.8,
+      angle: rnd(PI),
+      layerAnim: 'layerAnim5',
+      reverseDelay: false });
+
+  }
+
+  function initEventHandlers() {
+    window.addEventListener('resize', onResize);
+    document.body.addEventListener('click', onClick);
+  }
+
+  function onClick(e) {
+    createFlower({
+      x: e.clientX - cx,
+      y: e.clientY - cy });
+
+  }
+
+  function createFlower(params) {
+    const iRadiusCoef = rnd(1, 7);
+    const oRadiusCoef = rnd(iRadiusCoef, 7);
+    new Flower({
+      parent: svg,
+      petals: rndInt(4, 12),
+      rings: rndInt(3, 8),
+      step: rndInt(3, 8),
+      alpha: rnd(0.7, 1),
+      angle: rnd(PI),
+      iRadius: rnd(2, 5),
+      iRadiusCoef,
+      oRadius: rnd(5, 10),
+      oRadiusCoef,
+      ...params });
+
+  }
+
+  function onResize() {
+    const r = svg.getBoundingClientRect();
+    width = r.width;
+    height = r.height;
+    cx = width / 2;
+    cy = height / 2;
+    updateViewBox();
+  }
+
+  function updateViewBox() {
+    const vbW = width * 100 / zoom;
+    const vbH = height * 100 / zoom;
+    const vbX = vbOX - vbW / 2;
+    const vbY = vbOY - vbH / 2;
+    svg.setAttribute('viewBox', `${vbX} ${vbY} ${vbW} ${vbH}`);
+  }
+}
+
+class Flower {
+  constructor(conf) {
+    this.conf = {
+      alpha: 1,
+      angle: 0,
+      iRadius: 2, iRadiusCoef: 5,
+      oRadius: 5, oRadiusCoef: 10,
+      layerAnim: 'layerAnim' + rndInt(1, 12),
+      reverseDelay: rnd(1) > 0.5,
+      ...conf };
+
+    this.create();
+  }
+  create() {
+    let { parent, x, y, petals, rings, step, colors, alpha, angle, iRadius, iRadiusCoef, oRadius, oRadiusCoef, layerAnim, reverseDelay } = this.conf;
+
+    this.group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    this.group.classList.add('flower');
+    parent.appendChild(this.group);
+
+    if (!colors) {
+      colors = [chroma.random(), chroma.random()];
+      if (rings > 6) colors.push(chroma.random());
+    }
+
+    const cscale = chroma.scale(colors);
+    let layer, np, color, di;
+    for (let i = rings; i > 0; i--) {
+      layer = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      layer.classList.add('layer');
+
+      np = floor((i + step - 1) / step) * petals;
+      color = cscale(i * 1 / rings).alpha(alpha);
+      this.createPetalsRing(layer, x, y, np, iRadius + i * iRadiusCoef, oRadius + i * oRadiusCoef, angle + i % 2 * PI / np, color);
+
+      di = reverseDelay ? rings - i + 1 : i;
+      layer.style.animationName = layerAnim;
+      layer.style.animationDuration = rings * 0.3 + 's';
+      layer.style.animationDelay = di * 0.15 + 's';
+      this.group.appendChild(layer);
+    }
+  }
+  createPetalsRing(parent, x, y, n, iRadius, oRadius, angle, fill) {
+    const da = 2 * PI / n;
+    const dr = oRadius - iRadius;
+    const cpda = rnd(0.5 * da / 5, 1.5 * da / 5);
+    const cpdr = rnd(dr * 0.25, dr * 1.1);
+    let a;
+    for (let i = 0; i < n; i++) {
+      a = angle + i * da;
+      new Petal({
+        parent,
+        x, y,
+        startA: a,
+        endA: a + da,
+        iRadius,
+        oRadius,
+        cpda,
+        cpdr,
+        fill });
+
+    }
+  }}
+
+
+class Petal {
+  constructor({ parent, x, y, startA, endA, iRadius, oRadius, cpda, cpdr, fill }) {
+    this.parent = parent;
+    this.fill = fill;
+
+    const da = endA - startA;
+    const iRadius0 = iRadius / 5;
+    this.sp = [x + cos(startA + da / 2) * iRadius0, y + sin(startA + da / 2) * iRadius0];
+    this.cp1 = [x + cos(startA - cpda) * (iRadius + cpdr), y + sin(startA - cpda) * (iRadius + cpdr)];
+    this.cp2 = [x + cos(endA + cpda) * (iRadius + cpdr), y + sin(endA + cpda) * (iRadius + cpdr)];
+    this.ep = [x + cos(startA + da / 2) * oRadius, y + sin(startA + da / 2) * oRadius];
+
+    this.curve1 = new QCurve({ sp: this.sp, cp: this.cp1, ep: this.ep });
+    this.curve2 = new QCurve({ sp: this.sp, cp: this.cp2, ep: this.ep });
+    this.create();
+  }
+  create() {
+    this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    this.path.setAttribute('d', this.pathD());
+    this.path.style.fill = this.fill;
+    this.parent.appendChild(this.path);
+  }
+  pathD() {
+    return [
+    this.curve1.pathD(),
+    this.curve2.pathD()].
+    join(' ');
+  }}
+
+
+class QCurve {
+  constructor({ sp, cp, ep }) {
+    this.sp = sp;
+    this.cp = cp;
+    this.ep = ep;
+  }
+  pathD() {
+    return [
+    `M${this.sp[0]} ${this.sp[1]}`,
+    `Q${this.cp[0]} ${this.cp[1]}`,
+    `${this.ep[0]} ${this.ep[1]}`].
+    join(' ');
+  }}
+
+
+function clamp(v, min, max) {
+  return min(max(v, min), max);
+}
+
+function rnd(min, max) {
+  if (max === undefined) {max = min;min = 0;}
+  return random() * (max - min) + min;
+}
+
+function rndInt(min, max) {
+  if (max === undefined) {max = min;min = 0;}
+  min = ceil(min);
+  max = floor(max);
+  return floor(random() * (max - min)) + min;
+}
+
+App();
\ No newline at end of file
diff --git a/svg-flower-generator/dist/style.css b/svg-flower-generator/dist/style.css
new file mode 100644
index 0000000..527afbf
--- /dev/null
+++ b/svg-flower-generator/dist/style.css
@@ -0,0 +1,210 @@
+body {
+  margin: 0;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 0.9rem;
+  color: #000;
+  text-shadow: 1px 1px 1px #fff;
+}
+
+#svg {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  filter: drop-shadow(0 0 4px #000);
+}
+
+.flower path {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.layer {
+  animation-name: layerAnim1;
+  animation-duration: 4s;
+  animation-fill-mode: both; 
+  transform-box: fill-box;
+  transform-origin: center center;
+}
+
+.layer path {
+  stroke: rgba(0, 0, 0, 0.7);
+  stroke-width: 0.75px;
+}
+
+a {
+  color: #555;
+  text-decoration: none;
+  border-bottom: 0.25rem solid transparent;
+  transition: all 0.4s;
+}
+a:hover {
+  color: #000;
+  border-bottom-color: rgba(0, 0, 0, 0.7);
+}
+
+header, footer {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+header h1 {
+  font-size: 2em;
+  margin: 0.5em 0 0;
+}
+footer {
+  bottom: 0.5em;
+}
+
+@-moz-document url-prefix() {
+  #svg {
+    filter: none;
+  }
+  .layer {
+    filter: drop-shadow(0 0 2px #000);
+  }
+}
+
+@keyframes layerAnim1 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes layerAnim2 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: scale3d(0.2, 0.2, 0.2); }
+  to { opacity: 1; transform: scale3d(1, 1, 1); }
+}
+
+@keyframes layerAnim3 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: rotateZ(-270deg); }
+  to { opacity: 1; opacity: 1; transform: rotateZ(0deg); }
+}
+
+@keyframes layerAnim4 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: rotateZ(360deg) scale3d(0.2, 0.2, 0.2); }
+  to { opacity: 1; opacity: 1; transform: rotateZ(0deg) scale3d(1, 1, 1); }
+}
+
+@keyframes layerAnim5 {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes layerAnim6 {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: rotateZ(180deg) scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    transform: rotateZ(-25.71deg) scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: rotateZ(25.71deg) scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    transform: rotateZ(-7.71deg) scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: rotateZ(7.71deg) scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: rotateZ(0deg) scale3d(1, 1, 1);
+  }
+}
+
+@keyframes layerAnim7 {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: rotateZ(-180deg) scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    transform: rotateZ(25.71deg) scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: rotateZ(-25.71deg) scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    transform: rotateZ(7.71deg) scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: rotateZ(-7.71deg) scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: rotateZ(0deg) scale3d(1, 1, 1);
+  }
+}
+
+@keyframes layerAnim8 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: rotate3d(1, 1, 1, 360deg); }
+  to { opacity: 1; transform: rotate3d(1, 1, 1, 0deg); }
+}
+
+@keyframes layerAnim9 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: rotate3d(1, 1, 1, 360deg) scale3d(0.1, 0.1, 0.1); }
+  to { opacity: 1; transform: rotate3d(1, 1, 1, 0deg) scale3d(1, 1, 1); }
+}
+
+@keyframes layerAnim10 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: scale3d(2, 2, 2); }
+  to { opacity: 1; transform: scale3d(1, 1, 1); }
+}
+
+@keyframes layerAnim11 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: rotateZ(-360deg) scale3d(2, 2, 2); }
+  to { opacity: 1; transform: rotateZ(0deg) scale3d(1, 1, 1); }
+}
diff --git a/svg-flower-generator/license.txt b/svg-flower-generator/license.txt
new file mode 100644
index 0000000..bb99ad3
--- /dev/null
+++ b/svg-flower-generator/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Kevin Levron (https://codepen.io/soju22/pen/XGLZLp)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/svg-flower-generator/src/index.html b/svg-flower-generator/src/index.html
new file mode 100644
index 0000000..dadd861
--- /dev/null
+++ b/svg-flower-generator/src/index.html
@@ -0,0 +1,9 @@
+<svg id="svg"></svg>
+
+<header>
+  <h1>Random Flower Generator</h1>
+  <a href="https://codepen.io/collection/DPjZxo/" target="_blank">SVG Collection</a>
+</header>
+<footer>
+  Click to generate random flowers
+</footer>
diff --git a/svg-flower-generator/src/script.babel b/svg-flower-generator/src/script.babel
new file mode 100644
index 0000000..8cb6fe7
--- /dev/null
+++ b/svg-flower-generator/src/script.babel
@@ -0,0 +1,206 @@
+const { random, PI, sin, cos, round, floor, ceil, min, max } = Math;
+
+function App() {
+  const svg = document.getElementById('svg');
+  let width, height, cx, cy;
+
+  let zoom = 100;
+  let vbOX = 0;
+  let vbOY = 0;
+
+  init();
+
+  function init() {
+    onResize();
+    initEventHandlers();
+
+    new Flower({
+      parent: svg,
+      x: 0,
+      y: 0,
+      petals: 8,
+      rings: 12,
+      step: 4,
+      colors: ['#21B91B', '#FFFF80', '#D1104D', '#7F266A'],
+      alpha: 0.8,
+      angle: rnd(PI),
+      layerAnim: 'layerAnim5',
+      reverseDelay: false,
+    });
+  }
+
+  function initEventHandlers() {
+    window.addEventListener('resize', onResize);
+    document.body.addEventListener('click', onClick);
+  }
+
+  function onClick(e) {
+    createFlower({
+      x: e.clientX - cx,
+      y: e.clientY - cy,
+    });
+  }
+  
+  function createFlower(params) {
+    const iRadiusCoef = rnd(1, 7);
+    const oRadiusCoef = rnd(iRadiusCoef, 7);
+    new Flower({
+      parent: svg,
+      petals: rndInt(4, 12),
+      rings: rndInt(3, 8),
+      step: rndInt(3, 8),
+      alpha: rnd(0.7, 1),
+      angle: rnd(PI),
+      iRadius: rnd(2, 5),
+      iRadiusCoef,
+      oRadius: rnd(5, 10),
+      oRadiusCoef,
+      ...params
+    });
+  }
+
+  function onResize() {
+    const r = svg.getBoundingClientRect();
+    width = r.width;
+    height = r.height;
+    cx = width / 2;
+    cy = height / 2;
+    updateViewBox();
+  }
+
+  function updateViewBox() {
+    const vbW = (width * 100) / zoom;
+    const vbH = (height * 100) / zoom;
+    const vbX = vbOX - vbW / 2;
+    const vbY = vbOY - vbH / 2;
+    svg.setAttribute('viewBox', `${vbX} ${vbY} ${vbW} ${vbH}`);
+  }
+}
+
+class Flower {
+  constructor(conf) {
+    this.conf = {
+      alpha: 1,
+      angle: 0,
+      iRadius: 2, iRadiusCoef: 5,
+      oRadius: 5, oRadiusCoef: 10,
+      layerAnim: 'layerAnim' + (rndInt(1, 12)),
+      reverseDelay: rnd(1) > 0.5,
+      ...conf
+    };
+    this.create();
+  }
+  create() {
+    let { parent, x, y, petals, rings, step, colors, alpha, angle, iRadius, iRadiusCoef, oRadius, oRadiusCoef, layerAnim, reverseDelay } = this.conf;
+
+    this.group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    this.group.classList.add('flower');
+    parent.appendChild(this.group);
+
+    if (!colors) {
+      colors = [chroma.random(), chroma.random()];
+      if (rings > 6) colors.push(chroma.random());
+    }
+
+    const cscale = chroma.scale(colors);
+    let layer, np, color, di;
+    for (let i = rings; i > 0; i--) {
+      layer = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      layer.classList.add('layer');
+
+      np = floor((i + step - 1) / step) * petals;
+      color = cscale(i * 1 / rings).alpha(alpha);
+      this.createPetalsRing(layer, x, y, np, iRadius + i * iRadiusCoef, oRadius + i * oRadiusCoef, angle + i % 2 * PI / np, color);
+
+      di = reverseDelay ? (rings - i + 1) : i;
+      layer.style.animationName = layerAnim;
+      layer.style.animationDuration = (rings * 0.3) + 's';
+      layer.style.animationDelay = (di * 0.15) + 's';
+      this.group.appendChild(layer);
+    }
+  }
+  createPetalsRing(parent, x, y, n, iRadius, oRadius, angle, fill) {
+    const da = 2 * PI / n;
+    const dr = oRadius - iRadius;
+    const cpda = rnd(0.5 * da / 5, 1.5 * da / 5);
+    const cpdr = rnd(dr * 0.25, dr * 1.1);
+    let a;
+    for (let i = 0; i < n; i++) {
+      a = angle + i * da;
+      new Petal({
+        parent,
+        x, y,
+        startA: a,
+        endA: a + da,
+        iRadius,
+        oRadius,
+        cpda,
+        cpdr,
+        fill,
+      });
+    }
+  }
+}
+
+class Petal {
+  constructor({ parent, x, y, startA, endA, iRadius, oRadius, cpda, cpdr, fill }) {
+    this.parent = parent;
+    this.fill = fill;
+
+    const da = endA - startA;
+    const iRadius0 = iRadius / 5;
+    this.sp = [x + cos(startA + da / 2) * iRadius0, y + sin(startA + da / 2) * iRadius0];
+    this.cp1 = [x + cos(startA - cpda) * (iRadius + cpdr), y + sin(startA - cpda) * (iRadius + cpdr)];
+    this.cp2 = [x + cos(endA + cpda) * (iRadius + cpdr), y + sin(endA + cpda) * (iRadius + cpdr)];
+    this.ep = [x + cos(startA + da / 2) * oRadius, y + sin(startA + da / 2) * oRadius];
+
+    this.curve1 = new QCurve({ sp: this.sp, cp: this.cp1, ep: this.ep });
+    this.curve2 = new QCurve({ sp: this.sp, cp: this.cp2, ep: this.ep });
+    this.create();
+  }
+  create() {
+    this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    this.path.setAttribute('d', this.pathD());
+    this.path.style.fill = this.fill;
+    this.parent.appendChild(this.path);
+  }
+  pathD() {
+    return [
+      this.curve1.pathD(),
+      this.curve2.pathD(),
+    ].join(' ');
+  }
+}
+
+class QCurve {
+  constructor({ sp, cp, ep }) {
+    this.sp = sp;
+    this.cp = cp;
+    this.ep = ep;
+  }
+  pathD() {
+    return [
+      `M${this.sp[0]} ${this.sp[1]}`,
+      `Q${this.cp[0]} ${this.cp[1]}`,
+      `${this.ep[0]} ${this.ep[1]}`,
+    ].join(' ');
+  }
+}
+
+function clamp(v, min, max) {
+  return min(max(v, min), max);
+}
+
+function rnd(min, max) {
+  if (max === undefined) { max = min; min = 0; }
+  return random() * (max - min) + min;
+}
+
+function rndInt(min, max) {
+  if (max === undefined) { max = min; min = 0; }
+  min = ceil(min);
+  max = floor(max);
+  return floor(random() * (max - min)) + min;
+}
+
+App();
diff --git a/svg-flower-generator/src/style.css b/svg-flower-generator/src/style.css
new file mode 100644
index 0000000..527afbf
--- /dev/null
+++ b/svg-flower-generator/src/style.css
@@ -0,0 +1,210 @@
+body {
+  margin: 0;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 0.9rem;
+  color: #000;
+  text-shadow: 1px 1px 1px #fff;
+}
+
+#svg {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  filter: drop-shadow(0 0 4px #000);
+}
+
+.flower path {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.layer {
+  animation-name: layerAnim1;
+  animation-duration: 4s;
+  animation-fill-mode: both; 
+  transform-box: fill-box;
+  transform-origin: center center;
+}
+
+.layer path {
+  stroke: rgba(0, 0, 0, 0.7);
+  stroke-width: 0.75px;
+}
+
+a {
+  color: #555;
+  text-decoration: none;
+  border-bottom: 0.25rem solid transparent;
+  transition: all 0.4s;
+}
+a:hover {
+  color: #000;
+  border-bottom-color: rgba(0, 0, 0, 0.7);
+}
+
+header, footer {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+header h1 {
+  font-size: 2em;
+  margin: 0.5em 0 0;
+}
+footer {
+  bottom: 0.5em;
+}
+
+@-moz-document url-prefix() {
+  #svg {
+    filter: none;
+  }
+  .layer {
+    filter: drop-shadow(0 0 2px #000);
+  }
+}
+
+@keyframes layerAnim1 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes layerAnim2 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: scale3d(0.2, 0.2, 0.2); }
+  to { opacity: 1; transform: scale3d(1, 1, 1); }
+}
+
+@keyframes layerAnim3 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: rotateZ(-270deg); }
+  to { opacity: 1; opacity: 1; transform: rotateZ(0deg); }
+}
+
+@keyframes layerAnim4 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: rotateZ(360deg) scale3d(0.2, 0.2, 0.2); }
+  to { opacity: 1; opacity: 1; transform: rotateZ(0deg) scale3d(1, 1, 1); }
+}
+
+@keyframes layerAnim5 {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes layerAnim6 {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: rotateZ(180deg) scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    transform: rotateZ(-25.71deg) scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: rotateZ(25.71deg) scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    transform: rotateZ(-7.71deg) scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: rotateZ(7.71deg) scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: rotateZ(0deg) scale3d(1, 1, 1);
+  }
+}
+
+@keyframes layerAnim7 {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: rotateZ(-180deg) scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    transform: rotateZ(25.71deg) scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: rotateZ(-25.71deg) scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    transform: rotateZ(7.71deg) scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: rotateZ(-7.71deg) scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: rotateZ(0deg) scale3d(1, 1, 1);
+  }
+}
+
+@keyframes layerAnim8 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: rotate3d(1, 1, 1, 360deg); }
+  to { opacity: 1; transform: rotate3d(1, 1, 1, 0deg); }
+}
+
+@keyframes layerAnim9 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: rotate3d(1, 1, 1, 360deg) scale3d(0.1, 0.1, 0.1); }
+  to { opacity: 1; transform: rotate3d(1, 1, 1, 0deg) scale3d(1, 1, 1); }
+}
+
+@keyframes layerAnim10 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: scale3d(2, 2, 2); }
+  to { opacity: 1; transform: scale3d(1, 1, 1); }
+}
+
+@keyframes layerAnim11 {
+  from, to { animation-timing-function: ease-out; }
+  from { opacity: 0; transform: rotateZ(-360deg) scale3d(2, 2, 2); }
+  to { opacity: 1; transform: rotateZ(0deg) scale3d(1, 1, 1); }
+}
diff --git a/svg-gradient-wave-generator/LICENSE.txt b/svg-gradient-wave-generator/LICENSE.txt
new file mode 100644
index 0000000..db366a2
--- /dev/null
+++ b/svg-gradient-wave-generator/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Fabio Ottaviani (https://codepen.io/supah/pen/prVVOx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/svg-gradient-wave-generator/README.md b/svg-gradient-wave-generator/README.md
new file mode 100644
index 0000000..f341a25
--- /dev/null
+++ b/svg-gradient-wave-generator/README.md
@@ -0,0 +1,5 @@
+# SVG Gradient Wave Generator
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/supah/pen/prVVOx](https://codepen.io/supah/pen/prVVOx).
+
+Generate your own favourite SVG Wave
\ No newline at end of file
diff --git a/svg-gradient-wave-generator/dist/index.html b/svg-gradient-wave-generator/dist/index.html
new file mode 100644
index 0000000..db229c4
--- /dev/null
+++ b/svg-gradient-wave-generator/dist/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - SVG Gradient Wave Generator</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!--
+
+Follow me on
+Instagram: https://www.instagram.com/supahfunk/
+Dribbble: https://dribbble.com/supahfunk
+Twitter: https://twitter.com/supahfunk
+Codepen: https://codepen.io/supah/
+
+-->
+<svg id="svg"></svg>
+
+<a class="the-most" target="_blank" href="https://codepen.io/2017/popular/pens/9/">
+  <img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/themost-2017.png">
+</a>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/svg-gradient-wave-generator/dist/script.js b/svg-gradient-wave-generator/dist/script.js
new file mode 100644
index 0000000..486aea4
--- /dev/null
+++ b/svg-gradient-wave-generator/dist/script.js
@@ -0,0 +1,282 @@
+/*--------------------
+SETTINGS
+--------------------*/
+let settings = {
+    amplitudeX: 100,
+    amplitudeY: 20,
+    lines: 20,
+    hueStartColor: 53,
+    saturationStartColor: 74,
+    lightnessStartColor: 67,
+    hueEndColor: 216,
+    saturationEndColor: 100,
+    lightnessEndColor: 7,
+    smoothness: 3,
+    offsetX: 10,
+    fill: true,
+    crazyness: false
+}
+
+
+/*--------------------
+VARS
+--------------------*/
+let svg = document.getElementById('svg'),
+    winW = window.innerWidth,
+    winH = window.innerHeight,
+    Colors = [],
+    Paths = [],
+    Mouse = {
+        x: winW / 2,
+        y: winH / 2
+    },
+    overflow,
+    startColor,
+    endColor,
+    gui;
+
+
+/*--------------------
+PATH
+--------------------*/
+class Path {
+    constructor (y, fill, offsetX) {
+        this.rootY = y;
+        this.fill = fill;
+        this.offsetX = offsetX;
+    };
+
+    createRoot() {
+        this.root = [];
+        let offsetX = this.offsetX;
+        let x = -overflow + offsetX;
+        let y = 0;
+        let rootY = this.rootY;
+        let upSideDown = 0;
+
+        this.root.push({ x: x, y: rootY});
+
+        while (x < winW) {
+            let value = Math.random() > 0.5 ? 1 : -1;
+
+            // Crazyness
+            if (settings.crazyness) {
+                x += parseInt((Math.random() * settings.amplitudeX / 2) + (settings.amplitudeX / 2));
+                y = (parseInt((Math.random() * settings.amplitudeY / 2) + (settings.amplitudeY / 2)) * value) + rootY;
+            } else {
+            // Geometric
+                upSideDown = !upSideDown;
+                value = (upSideDown == 0) ? 1 : -1;
+
+                x += settings.amplitudeX;
+                y = settings.amplitudeY * value + rootY;
+            }
+
+            this.root.push({ x: x, y: y});
+        };
+
+        this.root.push({ x: winW + overflow, y: rootY});
+    };
+
+    createCircles() {
+        const fill = '#fff';
+        this.root.forEach(function(key, obj) {
+            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+            circle.setAttribute('r', 1);
+            circle.setAttribute('cx', key.x);
+            circle.setAttribute('cy', key.y);
+            circle.setAttribute('fill', 'rgba(255, 255, 255, .3)');
+            svg.appendChild(circle);
+        })
+    };
+
+    createPath(){
+        const root = this.root;
+        const fill = this.fill;
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('fill', fill);
+        path.setAttribute('stroke', fill);
+        svg.appendChild(path);
+        if (settings.fill) {
+            svg.setAttribute('class','path');
+        } else {
+            svg.setAttribute('class','stroke');
+        }
+
+        // first & second points
+        let d = `M -${overflow} ${winH + overflow}`;
+        d += ` L ${root[0].x} ${root[0].y}`;
+
+        // magic points
+        for (let i = 1; i < this.root.length - 1; i++) {
+            let prevPoint = root[i - 1];
+            let actualPoint = root[i];
+            let diffX = (actualPoint.x - prevPoint.x) / settings.smoothness;
+            let x1 = prevPoint.x + diffX;
+            let x2 = actualPoint.x - diffX;
+            let x = actualPoint.x;
+            let y1 = prevPoint.y;
+            let y2 = actualPoint.y;
+            let y = actualPoint.y;
+
+            d += ` C ${x1} ${y1}, ${x2} ${y2}, ${x} ${y}`;
+        }
+
+        // Second last
+        const reverseRoot = root.reverse();
+        d += ` L ${reverseRoot[0].x} ${reverseRoot[0].y}`;
+        root.reverse();
+
+        // Last point
+        d += ` L ${winW + overflow} ${winH + overflow}`;
+
+        // Close path
+        d += ` Z`;
+
+        path.setAttribute('d', d);
+    };
+
+    createLines(){
+        const root = this.root;
+        const fill = this.fill;
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('fill', fill);
+        path.classList.add('path');
+        svg.appendChild(path);
+
+        // first & second points
+        let d = `M -${overflow} ${winH + overflow}`;
+        d += ` L ${root[0].x} ${root[0].y}`;
+
+        // Magic points
+        for (let i = 1; i < root.length - 1; i++) {
+            d += ` L ${root[i].x} ${root[i].y}`;
+        }
+
+        // Second last & last points
+        const reverseRoot = root.reverse();
+        d += ` L ${reverseRoot[0].x} ${reverseRoot[0].y}`;
+        d += ` L ${winW + overflow} ${winH + overflow}`;
+        root.reverse();
+
+        // Close path
+        d += ` Z`;
+
+        path.setAttribute('d', d);
+    };
+};
+
+
+/*--------------------
+INIT
+--------------------*/
+function init(){
+    // Overflow
+    overflow = Math.abs(settings.lines * settings.offsetX);
+
+    // Colors
+    startColor = `hsl(${settings.hueStartColor}, ${settings.saturationStartColor}%, ${settings.lightnessStartColor}%)`;
+    endColor = `hsl(${settings.hueEndColor}, ${settings.saturationEndColor}%, ${settings.lightnessEndColor}%)`;
+    Colors = chroma.scale([startColor, endColor]).mode('lch').colors(settings.lines + 2);
+
+    // Reset
+    Paths = [];
+    document.body.removeChild(svg);
+    svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute('id', 'svg');
+    document.body.appendChild(svg);
+
+    // Background
+    if (settings.fill) {
+        svg.style.backgroundColor = Colors[0];
+    } else {
+        svg.style.backgroundColor = '#000';
+    }
+
+    // Lines
+    for (let i = 0; i < settings.lines + 1; i++) {
+        let rootY = parseInt(winH / settings.lines * i);
+        const path = new Path(rootY, Colors[i + 1], settings.offsetX * i);
+        Paths.push(path);
+        path.createRoot();
+    }
+    Paths.forEach(function(path) {
+        path.createPath();
+    });
+};
+init();
+
+
+/*--------------------
+WIN RESIZE
+--------------------*/
+window.addEventListener('resize', function() {
+    winW = window.innerWidth;
+    winH = window.innerHeight;
+    init();
+});
+
+
+/*--------------------
+DAT GUI
+--------------------*/
+function datgui(){
+    gui = new dat.GUI();
+
+    // Settings
+    let guiSettings = gui.addFolder('Settings');
+    guiSettings.add(settings, 'lines', 5, 50).step(1).onChange(init);
+    guiSettings.add(settings, 'amplitudeX', 20, 300).step(1).onChange(init);
+    guiSettings.add(settings, 'amplitudeY', 0, 200).step(1).onChange(init);
+    guiSettings.add(settings, 'offsetX', -100, 100).step(1).onChange(init);
+    guiSettings.add(settings, 'smoothness', 0.5, 10).step(0.2).onChange(init);
+    guiSettings.add(settings, 'fill', false).onChange(init);
+    guiSettings.add(settings, 'crazyness', false).onChange(init);
+    guiSettings.open();
+
+    // Start Color
+    let guiStartColor = gui.addFolder('Start Color');
+    guiStartColor.add(settings, 'hueStartColor', 0, 360).step(1).onChange(init);
+    guiStartColor.add(settings, 'saturationStartColor', 0, 100).step(1).onChange(init);
+    guiStartColor.add(settings, 'lightnessStartColor', 0, 100).step(1).onChange(init);
+    guiStartColor.open();
+
+    // End Color
+    let guiEndColor = gui.addFolder('End Color');
+    guiEndColor.add(settings, 'hueEndColor', 0, 360).step(1).onChange(init);
+    guiEndColor.add(settings, 'saturationEndColor', 0, 100).step(1).onChange(init);
+    guiEndColor.add(settings, 'lightnessEndColor', 0, 100).step(1).onChange(init);
+    guiEndColor.open();
+
+    // Randomize
+    let guiRandomize = { randomize:function(){ randomize() }};
+    gui.add(guiRandomize,'randomize');
+
+    return gui;
+}
+datgui();
+
+
+/*--------------------
+RANDOMIZE
+--------------------*/
+function randomize(){
+    settings = {
+        lines: parseInt(5 + Math.random() * 45),
+        amplitudeX: parseInt(20 + Math.random()* 300),
+        amplitudeY: parseInt(Math.random() * 200),
+        hueStartColor: parseInt(Math.random() * 360),
+        saturationStartColor: 74,
+        lightnessStartColor: 67,
+        hueEndColor: parseInt(Math.random() * 360),
+        saturationEndColor: 90,
+        lightnessEndColor: 14,
+        smoothness: 1 + parseInt(Math.random() * 9),
+        offsetX: parseInt(-20 + Math.random() * 40),
+        fill: Math.random() * 1 > 0.3 ? true : false,
+        crazyness:  Math.random() * 1 > 0.9 ? true : false
+    }
+    init();
+    gui.destroy();
+    datgui();
+}
\ No newline at end of file
diff --git a/svg-gradient-wave-generator/dist/style.css b/svg-gradient-wave-generator/dist/style.css
new file mode 100644
index 0000000..5cada48
--- /dev/null
+++ b/svg-gradient-wave-generator/dist/style.css
@@ -0,0 +1,40 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  height: 100vh;
+  overflow: hidden;
+  font-family: "Roboto", sans-serif;
+  background: url(https://github.com/supahfunk/gradientwaves-svg/blob/master/dist/img/bg-gradient-wave.png?raw=true) repeat center/cover;
+}
+
+svg {
+  width: 100vw;
+  height: 100vh;
+}
+svg.path path {
+  stroke: none;
+}
+svg.stroke path {
+  fill: none;
+  stroke-width: 1px;
+}
+svg .circle {
+  fill: #fff;
+}
+
+.the-most {
+  position: fixed;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  width: 50vw;
+  max-width: 100px;
+  padding: 10px;
+}
+.the-most img {
+  max-width: 100%;
+}
\ No newline at end of file
diff --git a/svg-gradient-wave-generator/src/index.html b/svg-gradient-wave-generator/src/index.html
new file mode 100644
index 0000000..26a5466
--- /dev/null
+++ b/svg-gradient-wave-generator/src/index.html
@@ -0,0 +1,14 @@
+<!--
+
+Follow me on
+Instagram: https://www.instagram.com/supahfunk/
+Dribbble: https://dribbble.com/supahfunk
+Twitter: https://twitter.com/supahfunk
+Codepen: https://codepen.io/supah/
+
+-->
+<svg id="svg"></svg>
+
+<a class="the-most" target="_blank" href="https://codepen.io/2017/popular/pens/9/">
+  <img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/themost-2017.png">
+</a>
\ No newline at end of file
diff --git a/svg-gradient-wave-generator/src/script.js b/svg-gradient-wave-generator/src/script.js
new file mode 100644
index 0000000..9e44683
--- /dev/null
+++ b/svg-gradient-wave-generator/src/script.js
@@ -0,0 +1,282 @@
+/*--------------------
+SETTINGS
+--------------------*/
+let settings = {
+    amplitudeX: 100,
+    amplitudeY: 20,
+    lines: 20,
+    hueStartColor: 53,
+    saturationStartColor: 74,
+    lightnessStartColor: 67,
+    hueEndColor: 216,
+    saturationEndColor: 100,
+    lightnessEndColor: 7,
+    smoothness: 3,
+    offsetX: 10,
+    fill: true,
+    crazyness: false
+}
+
+
+/*--------------------
+VARS
+--------------------*/
+let svg = document.getElementById('svg'),
+    winW = window.innerWidth,
+    winH = window.innerHeight,
+    Colors = [],
+    Paths = [],
+    Mouse = {
+        x: winW / 2,
+        y: winH / 2
+    },
+    overflow,
+    startColor,
+    endColor,
+    gui;
+
+
+/*--------------------
+PATH
+--------------------*/
+class Path {
+    constructor (y, fill, offsetX) {
+        this.rootY = y;
+        this.fill = fill;
+        this.offsetX = offsetX;
+    };
+    
+    createRoot() {
+        this.root = [];
+        let offsetX = this.offsetX;
+        let x = -overflow + offsetX;
+        let y = 0;
+        let rootY = this.rootY;
+        let upSideDown = 0;
+
+        this.root.push({ x: x, y: rootY});
+
+        while (x < winW) {
+            let value = Math.random() > 0.5 ? 1 : -1;
+
+            // Crazyness
+            if (settings.crazyness) {
+                x += parseInt((Math.random() * settings.amplitudeX / 2) + (settings.amplitudeX / 2));
+                y = (parseInt((Math.random() * settings.amplitudeY / 2) + (settings.amplitudeY / 2)) * value) + rootY;
+            } else {
+            // Geometric
+                upSideDown = !upSideDown;
+                value = (upSideDown == 0) ? 1 : -1;
+
+                x += settings.amplitudeX;
+                y = settings.amplitudeY * value + rootY;
+            }
+
+            this.root.push({ x: x, y: y}); 
+        };
+
+        this.root.push({ x: winW + overflow, y: rootY});
+    };
+
+    createCircles() {
+        const fill = '#fff';
+        this.root.forEach(function(key, obj) {
+            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+            circle.setAttribute('r', 1);
+            circle.setAttribute('cx', key.x);
+            circle.setAttribute('cy', key.y);
+            circle.setAttribute('fill', 'rgba(255, 255, 255, .3)');
+            svg.appendChild(circle);
+        })
+    };
+
+    createPath(){
+        const root = this.root;
+        const fill = this.fill;
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('fill', fill);
+        path.setAttribute('stroke', fill);
+        svg.appendChild(path);
+        if (settings.fill) {
+            svg.setAttribute('class','path');
+        } else {
+            svg.setAttribute('class','stroke');
+        }
+
+        // first & second points
+        let d = `M -${overflow} ${winH + overflow}`;
+        d += ` L ${root[0].x} ${root[0].y}`;
+
+        // magic points
+        for (let i = 1; i < this.root.length - 1; i++) {
+            let prevPoint = root[i - 1];
+            let actualPoint = root[i];
+            let diffX = (actualPoint.x - prevPoint.x) / settings.smoothness;
+            let x1 = prevPoint.x + diffX;
+            let x2 = actualPoint.x - diffX;
+            let x = actualPoint.x;
+            let y1 = prevPoint.y;
+            let y2 = actualPoint.y;
+            let y = actualPoint.y;
+            
+            d += ` C ${x1} ${y1}, ${x2} ${y2}, ${x} ${y}`;
+        }
+
+        // Second last
+        const reverseRoot = root.reverse();
+        d += ` L ${reverseRoot[0].x} ${reverseRoot[0].y}`;
+        root.reverse();
+
+        // Last point
+        d += ` L ${winW + overflow} ${winH + overflow}`;
+
+        // Close path
+        d += ` Z`;
+
+        path.setAttribute('d', d);
+    };
+
+    createLines(){
+        const root = this.root;
+        const fill = this.fill;
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('fill', fill);
+        path.classList.add('path');
+        svg.appendChild(path);
+
+        // first & second points
+        let d = `M -${overflow} ${winH + overflow}`;
+        d += ` L ${root[0].x} ${root[0].y}`;
+
+        // Magic points
+        for (let i = 1; i < root.length - 1; i++) {
+            d += ` L ${root[i].x} ${root[i].y}`;
+        }
+
+        // Second last & last points
+        const reverseRoot = root.reverse();
+        d += ` L ${reverseRoot[0].x} ${reverseRoot[0].y}`;
+        d += ` L ${winW + overflow} ${winH + overflow}`;
+        root.reverse();
+
+        // Close path
+        d += ` Z`;
+
+        path.setAttribute('d', d);
+    };
+};
+
+
+/*--------------------
+INIT
+--------------------*/
+function init(){
+    // Overflow
+    overflow = Math.abs(settings.lines * settings.offsetX);
+
+    // Colors
+    startColor = `hsl(${settings.hueStartColor}, ${settings.saturationStartColor}%, ${settings.lightnessStartColor}%)`;
+    endColor = `hsl(${settings.hueEndColor}, ${settings.saturationEndColor}%, ${settings.lightnessEndColor}%)`;
+    Colors = chroma.scale([startColor, endColor]).mode('lch').colors(settings.lines + 2);
+
+    // Reset
+    Paths = [];
+    document.body.removeChild(svg);
+    svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute('id', 'svg');
+    document.body.appendChild(svg);
+
+    // Background
+    if (settings.fill) {
+        svg.style.backgroundColor = Colors[0];
+    } else {
+        svg.style.backgroundColor = '#000';
+    }
+
+    // Lines
+    for (let i = 0; i < settings.lines + 1; i++) {
+        let rootY = parseInt(winH / settings.lines * i);
+        const path = new Path(rootY, Colors[i + 1], settings.offsetX * i);
+        Paths.push(path);
+        path.createRoot();
+    }
+    Paths.forEach(function(path) {
+        path.createPath();
+    });
+};
+init();
+
+
+/*--------------------
+WIN RESIZE
+--------------------*/
+window.addEventListener('resize', function() {
+    winW = window.innerWidth;
+    winH = window.innerHeight;
+    init();
+});
+
+
+/*--------------------
+DAT GUI
+--------------------*/
+function datgui(){
+    gui = new dat.GUI();
+
+    // Settings
+    let guiSettings = gui.addFolder('Settings');
+    guiSettings.add(settings, 'lines', 5, 50).step(1).onChange(init);
+    guiSettings.add(settings, 'amplitudeX', 20, 300).step(1).onChange(init);
+    guiSettings.add(settings, 'amplitudeY', 0, 200).step(1).onChange(init);
+    guiSettings.add(settings, 'offsetX', -20, 20).step(1).onChange(init);
+    guiSettings.add(settings, 'smoothness', 0.5, 10).step(0.2).onChange(init);
+    guiSettings.add(settings, 'fill', false).onChange(init);
+    guiSettings.add(settings, 'crazyness', false).onChange(init);
+    guiSettings.open();
+
+    // Start Color
+    let guiStartColor = gui.addFolder('Start Color');
+    guiStartColor.add(settings, 'hueStartColor', 0, 360).step(1).onChange(init);
+    guiStartColor.add(settings, 'saturationStartColor', 0, 100).step(1).onChange(init);
+    guiStartColor.add(settings, 'lightnessStartColor', 0, 100).step(1).onChange(init);
+    guiStartColor.open();
+
+    // End Color
+    let guiEndColor = gui.addFolder('End Color');
+    guiEndColor.add(settings, 'hueEndColor', 0, 360).step(1).onChange(init);
+    guiEndColor.add(settings, 'saturationEndColor', 0, 100).step(1).onChange(init);
+    guiEndColor.add(settings, 'lightnessEndColor', 0, 100).step(1).onChange(init);
+    guiEndColor.open();
+
+    // Randomize
+    let guiRandomize = { randomize:function(){ randomize() }};
+    gui.add(guiRandomize,'randomize');
+
+    return gui;
+}
+datgui();
+
+
+/*--------------------
+RANDOMIZE
+--------------------*/
+function randomize(){
+    settings = {
+        lines: parseInt(5 + Math.random() * 45),
+        amplitudeX: parseInt(20 + Math.random()* 300),
+        amplitudeY: parseInt(Math.random() * 200),
+        hueStartColor: parseInt(Math.random() * 360),
+        saturationStartColor: 74,
+        lightnessStartColor: 67,
+        hueEndColor: parseInt(Math.random() * 360),
+        saturationEndColor: 90,
+        lightnessEndColor: 14,
+        smoothness: 1 + parseInt(Math.random() * 9),
+        offsetX: parseInt(-20 + Math.random() * 40),
+        fill: Math.random() * 1 > 0.3 ? true : false,
+        crazyness:  Math.random() * 1 > 0.9 ? true : false
+    }
+    init();
+    gui.destroy();
+    datgui();
+}
diff --git a/svg-gradient-wave-generator/src/style.scss b/svg-gradient-wave-generator/src/style.scss
new file mode 100644
index 0000000..8822282
--- /dev/null
+++ b/svg-gradient-wave-generator/src/style.scss
@@ -0,0 +1,51 @@
+*, *:before, *:after {
+    box-sizing: border-box;
+}
+
+body {
+    padding: 0;
+    margin: 0;
+    height: 100vh;
+    overflow: hidden;
+    font-family: 'Roboto', sans-serif;
+    background: url(https://github.com/supahfunk/gradientwaves-svg/blob/master/dist/img/bg-gradient-wave.png?raw=true) repeat center / cover;
+}
+
+svg {
+    width: 100vw;
+    height: 100vh;
+
+    &.path {
+
+        path {
+            stroke: none;
+        }
+    }
+
+    &.stroke {
+
+        path {
+            fill: none;
+            stroke-width: 1px;
+        }
+    }
+
+    .circle {
+        fill: #fff;
+    }
+}
+
+
+.the-most {
+  position: fixed;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  width: 50vw;
+  max-width: 100px;
+  padding: 10px;
+  
+  img {
+    max-width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/svg-jigsaw-solver-drag-n-drop-version/README.markdown b/svg-jigsaw-solver-drag-n-drop-version/README.markdown
new file mode 100644
index 0000000..ea73081
--- /dev/null
+++ b/svg-jigsaw-solver-drag-n-drop-version/README.markdown
@@ -0,0 +1,13 @@
+# SVG Jigsaw Solver (Drag'n'Drop version)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pouretrebelle/pen/NWNOLPN](https://codepen.io/pouretrebelle/pen/NWNOLPN).
+
+Give it a scroll, and drop in your own image if you fancy it.
+
+Experimenting with ideas for my generative art jigsaw puzzle project, follow @abstractpuzzles on Instagram for updates, launching soon!
+
+This pen uses a lotttt of css variables and calc maths to figure out how/where to position the pieces and set their transform-origin, and a spot of Sass's random to pick a rotation for each of them. It only uses js to set a css variable for the scroll position, and an enhancement to fit the scattered pieces to the aspect ratio of the screen (no viewport lengths in svgs, sad times).
+
+Thanks to @cassie-codes for the svg help and inspiration!
+
+(definitely works in Chrome 85, probably most modern browsers,no guarantees going back)
diff --git a/svg-jigsaw-solver-drag-n-drop-version/dist/index.html b/svg-jigsaw-solver-drag-n-drop-version/dist/index.html
new file mode 100644
index 0000000..d485761
--- /dev/null
+++ b/svg-jigsaw-solver-drag-n-drop-version/dist/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - SVG Jigsaw Solver (Drag&#39;n&#39;Drop version)</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input id="upload" type="file" accept="image/png, image/jpeg, image/gif" />
+<div id="upload-mask"><span>Drop an image to update the jigsaw</span></div>
+<!-- svg paths exported from https://github.com/pouretrebelle/jigsaws -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+  <defs>
+    <pattern id="puzzle" height="100%" width="100%" patternUnits="userSpaceOnUse">
+      <image id="image" width="1000" height="1000" preserveAspectRatio="xMidYMax slice" xlink:href="https://assets.codepen.io/2361/puzzle-sample-3.png?width=1500&height=1500&format=auto" />
+    </pattern>
+  </defs>
+  <path d="M0 0h255.2c-62.1 167.8 46.4 45.1 28.7 120.7s-60.4-82.5-79.3 95.4c-160 49.8-39.9-45.6-111.5-32.8s74.2 60.6-93.1 69.5V0z" />
+  <path d="M0 252.7c167.3-8.9 21.5-56.7 93.1-69.5S44.6 265.9 204.6 216c-12.7 208.1 67 34.6 72.7 125s-95.3-71.7-56.4 133.2c-181.1 12.3-22.4 61.7-99.7 76.7C43.9 566 172.5 460.7 0 517.2V252.7z" />
+  <path d="M0 517.2c172.5-56.5 43.9 48.8 121.2 33.7s-81.3-64.4 99.7-76.7c23 211.1-66.4 38.5-67.9 130.6s93.4-77.5 63.7 132.7c-170.3 47.1-40.5-49.4-116.3-38.3-75.8 11.1 76.2 66.3-100.4 70.1V517.2z" />
+  <path d="M0 769.3c176.6-3.8 24.6-59 100.4-70.1 75.9-11.1-53.9 85.4 116.3 38.3 7.5 214.2 72 28.8 86.7 120.7 14.7 91.9-104.5-64-44.6 141.8H0V769.3z" />
+  <path d="M255.2 0h247.4c-40.2 187 56 40.6 48.7 123.3-7.3 82.7-76.5-78.2-69.5 113-219.8-44-46.7 66.3-143.7 59.2-97-7.1 90.3-91-133.6-79.5 18.9-177.9 61.6-19.7 79.3-95.4S193.1 167.8 255.2 0z" />
+  <path d="M204.6 216c223.8-11.5 36.5 72.4 133.6 79.5s-76.1-103.1 143.7-59.2C460 437.7 545.3 273 546.7 360.9c1.4 87.9-89.1-73.9-60.7 126.6-213.3 15.9-36.4-68.2-129.2-72.9-92.8-4.7 74.8 96.7-135.8 59.6-39-204.9 62-42.8 56.3-133.2s-85.4 83.2-72.7-125z" />
+  <path d="M220.9 474.2c210.7 37.1 43.1-64.3 135.8-59.6 92.8 4.7-84.2 88.8 129.2 72.9-39.3 191.7 57.7 41 51.1 125.7s-79-79.2-70 116.3c-201-18.6-35.5 63.8-123.1 66.6-87.6 2.8 72.3-90-127.1-58.6 29.7-210.2-65.2-40.5-63.7-132.7 1.4-92.2 90.8 80.4 67.8-130.6z" />
+  <path d="M216.8 737.5c199.4-31.4 39.5 61.4 127.1 58.6S266 710.9 467 729.5c36.3 215.2-65.9 43.5-61.9 138.1 4 94.7 91.2-85.2 73.4 132.4H258.9c-60-205.8 59.3-49.9 44.6-141.8-14.8-91.9-79.3 93.5-86.7-120.7z" />
+  <path d="M502.6 0h252.5c-1.2 202-67 29.1-78.4 116.1-11.4 87 96.7-63.2 45.9 132.4-193.8 14.3-33.1-62-117.3-66.3-84.3-4.3 68 87.9-123.4 54.1-7-191.1 62.2-30.3 69.5-113 7.2-82.7-89 63.7-48.8-123.3z" />
+  <path d="M481.8 236.3c191.4 33.8 39.2-58.4 123.4-54.1 84.3 4.3-76.5 80.6 117.3 66.3-26 185 57.4 35.6 56.1 116.7-1.3 81.1-80-70.8-59.7 114.9-185.7 29.2-36.8-57.2-118.4-54.6-81.6 2.6 72.5 79.4-114.7 61.9-28.4-200.5 62.2-38.7 60.7-126.6s-86.5 76.9-64.7-124.5z" />
+  <path d="M486 487.5c187.2 17.5 33.1-59.4 114.7-61.9 81.6-2.6-67.4 83.8 118.4 54.6 8.7 197.5-64.1 31.7-71 117.3-6.9 85.5 91.5-66.4 51.2 127.1C514 751.7 663.2 667.3 582 669s71.4 79.8-114.9 60.5c-9.1-195.5 63.3-31.6 70-116.3 6.5-84.7-90.5 66-51.1-125.7z" />
+  <path d="M467.1 729.5c186.3 19.3 33.6-58.8 114.9-60.5 81.3-1.7-68 82.8 117.4 55.6-9.9 222.5 72.2 35.8 79.9 132.2s-103-74.9-57.8 143.2H478.6c17.8-217.6-69.4-37.7-73.4-132.4-4-94.6 98.1 77.1 61.9-138.1z" />
+  <path d="M755.1 0H1000v225.3c-219.6 46.3-47.4-65.9-144.5-57.8-97.1 8.1 91.3 90.1-132.9 80.9C773.5 52.9 665.4 203 676.7 116c11.4-86.9 77.3 86 78.4-116z" />
+  <path d="M722.6 248.5c224.2 9.2 35.8-72.8 132.9-80.9 97.1-8.1-75.1 104 144.5 57.8V499c-222.9-43.2-46.9 67.4-145.2 60.8-98.3-6.6 90.9-92.7-135.8-79.7-20.3-185.7 58.5-33.9 59.7-114.9 1.3-81.1-82.1 68.3-56.1-116.7z" />
+  <path d="M719 480.2c226.7-13 37.4 73.1 135.8 79.7 98.3 6.6-77.7-104 145.2-60.8v246.5c-238.5-46.8-50.3 72-155.6 64.7-105.2-7.3 97.5-99-145.1-85.6 40.2-193.6-58.1-41.6-51.2-127.1 6.9-85.7 79.6 80.1 70.9-117.4z" />
+  <path d="M699.3 724.6c242.6-13.3 39.9 78.3 145.1 85.6 105.2 7.3-82.9-111.5 155.6-64.7V1000H721.4c-45.2-218.1 65.5-46.8 57.8-143.2-7.7-96.4-89.8 90.3-79.9-132.2z" />
+</svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/svg-jigsaw-solver-drag-n-drop-version/dist/script.js b/svg-jigsaw-solver-drag-n-drop-version/dist/script.js
new file mode 100644
index 0000000..2bf1423
--- /dev/null
+++ b/svg-jigsaw-solver-drag-n-drop-version/dist/script.js
@@ -0,0 +1,46 @@
+const root = document.documentElement;
+
+/* animation */
+const setScroll = () => {
+  root.style.setProperty("--animate", window.scrollY / window.innerHeight);
+};
+setScroll();
+window.addEventListener("scroll", setScroll); // debounce this in production
+
+/* page aspect ratio */
+const setWindowSize = () => {
+  const aspectRatio = window.innerWidth / window.innerHeight;
+  root.style.setProperty(
+    "--windowHeightScalar",
+    aspectRatio > 1 ? 1 : 1 / aspectRatio
+  );
+  root.style.setProperty(
+    "--windowWidthScalar",
+    aspectRatio < 1 ? 1 : aspectRatio
+  );
+};
+setWindowSize();
+window.addEventListener("resize", setWindowSize); // debounce this in production
+
+/* drag n drop */
+const upload = document.getElementById("upload");
+const uploadMask = document.getElementById("upload-mask");
+upload.addEventListener("input", (e) => {
+  uploadMask.style.opacity = 0;
+  const input = e.target;
+  if (input.files && input.files[0]) {
+    const reader = new FileReader();
+    reader.onload = (readerE) => {
+      document
+        .getElementById("image")
+        .setAttribute("xlink:href", readerE.target.result);
+    };
+    reader.readAsDataURL(input.files[0]);
+  }
+});
+upload.addEventListener("dragenter", () => {
+  uploadMask.style.opacity = 1;
+});
+upload.addEventListener("dragleave", () => {
+  uploadMask.style.opacity = 0;
+});
\ No newline at end of file
diff --git a/svg-jigsaw-solver-drag-n-drop-version/dist/style.css b/svg-jigsaw-solver-drag-n-drop-version/dist/style.css
new file mode 100644
index 0000000..7a37db9
--- /dev/null
+++ b/svg-jigsaw-solver-drag-n-drop-version/dist/style.css
@@ -0,0 +1,155 @@
+:root {
+  --animate: 0;
+  --windowWidthScalar: 1;
+  --windowHeightScalar: 1;
+  --bg: #f3f0ed;
+  --color: #9da2b9;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #242733;
+    --color: #b6a491;
+  }
+}
+
+body {
+  margin: 0;
+  height: 200vh;
+  color: var(--color);
+  background: var(--bg);
+}
+
+svg {
+  position: fixed;
+  width: 50vmin;
+  height: 50vmin;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  overflow: visible !important;
+}
+
+path {
+  fill: url(#puzzle);
+  --startX: calc(var(--pieceX) * (100 * var(--windowWidthScalar) - 50) / 100 * 100%);
+  --endX: 0px;
+  --startY: calc(var(--pieceY) * (100 * var(--windowHeightScalar) - 50) / 100 * 100%);
+  --endY: 0px;
+  --startRotate: 0deg // set randomly below;
+  --endRotate: 0deg;
+  --x: calc(var(--startX) * (-1 * var(--animate) + 1) + var(--endX) * var(--animate));
+  --y: calc(var(--startY) * (-1 * var(--animate) + 1) + var(--endY) * var(--animate));
+  --rotate: calc(var(--startRotate) * (-1 * var(--animate) + 1) + var(--endRotate) * var(--animate));
+  -webkit-transform-origin: calc(50% + 50% * var(--pieceX)) calc(50% + 50% * var(--pieceY));
+          transform-origin: calc(50% + 50% * var(--pieceX)) calc(50% + 50% * var(--pieceY));
+  -webkit-transform: translate(var(--x), var(--y)) rotate(var(--rotate));
+          transform: translate(var(--x), var(--y)) rotate(var(--rotate));
+  stroke-width: 0.5vmin;
+  stroke: var(--bg);
+}
+path:nth-of-type(n + 1) {
+  --pieceX: -0.75;
+}
+path:nth-of-type(n + 5) {
+  --pieceX: -0.25;
+}
+path:nth-of-type(n + 9) {
+  --pieceX: 0.25;
+}
+path:nth-of-type(n + 13) {
+  --pieceX: 0.75;
+}
+path:nth-of-type(4n + 1) {
+  --pieceY: -0.75;
+}
+path:nth-of-type(4n + 2) {
+  --pieceY: -0.25;
+}
+path:nth-of-type(4n + 3) {
+  --pieceY: 0.25;
+}
+path:nth-of-type(4n + 4) {
+  --pieceY: 0.75;
+}
+path:nth-of-type(1) {
+  --startRotate: -67deg;
+}
+path:nth-of-type(2) {
+  --startRotate: -72deg;
+}
+path:nth-of-type(3) {
+  --startRotate: 77deg;
+}
+path:nth-of-type(4) {
+  --startRotate: 97deg;
+}
+path:nth-of-type(5) {
+  --startRotate: 70deg;
+}
+path:nth-of-type(6) {
+  --startRotate: -65deg;
+}
+path:nth-of-type(7) {
+  --startRotate: -90deg;
+}
+path:nth-of-type(8) {
+  --startRotate: 56deg;
+}
+path:nth-of-type(9) {
+  --startRotate: -53deg;
+}
+path:nth-of-type(10) {
+  --startRotate: -54deg;
+}
+path:nth-of-type(11) {
+  --startRotate: -90deg;
+}
+path:nth-of-type(12) {
+  --startRotate: 85deg;
+}
+path:nth-of-type(13) {
+  --startRotate: -86deg;
+}
+path:nth-of-type(14) {
+  --startRotate: 97deg;
+}
+path:nth-of-type(15) {
+  --startRotate: -75deg;
+}
+path:nth-of-type(16) {
+  --startRotate: -85deg;
+}
+
+#upload {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+}
+
+#upload-mask {
+  position: fixed;
+  top: 1em;
+  left: 1em;
+  bottom: 1em;
+  right: 1em;
+  pointer-events: none;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  padding: 1em;
+  border-radius: 0.5em;
+  border: 0.1em dashed var(--color);
+  text-align: center;
+  font-size: 32px;
+  color: var(--color);
+  opacity: 0;
+  z-index: 2;
+}
\ No newline at end of file
diff --git a/svg-jigsaw-solver-drag-n-drop-version/license.txt b/svg-jigsaw-solver-drag-n-drop-version/license.txt
new file mode 100644
index 0000000..49c41f3
--- /dev/null
+++ b/svg-jigsaw-solver-drag-n-drop-version/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Charlotte Dann (https://codepen.io/pouretrebelle/pen/NWNOLPN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/svg-jigsaw-solver-drag-n-drop-version/src/index.html b/svg-jigsaw-solver-drag-n-drop-version/src/index.html
new file mode 100644
index 0000000..968097d
--- /dev/null
+++ b/svg-jigsaw-solver-drag-n-drop-version/src/index.html
@@ -0,0 +1,26 @@
+<input id="upload" type="file" accept="image/png, image/jpeg, image/gif" />
+<div id="upload-mask"><span>Drop an image to update the jigsaw</span></div>
+<!-- svg paths exported from https://github.com/pouretrebelle/jigsaws -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+  <defs>
+    <pattern id="puzzle" height="100%" width="100%" patternUnits="userSpaceOnUse">
+      <image id="image" width="1000" height="1000" preserveAspectRatio="xMidYMax slice" xlink:href="https://assets.codepen.io/2361/puzzle-sample-3.png?width=1500&height=1500&format=auto" />
+    </pattern>
+  </defs>
+  <path d="M0 0h255.2c-62.1 167.8 46.4 45.1 28.7 120.7s-60.4-82.5-79.3 95.4c-160 49.8-39.9-45.6-111.5-32.8s74.2 60.6-93.1 69.5V0z" />
+  <path d="M0 252.7c167.3-8.9 21.5-56.7 93.1-69.5S44.6 265.9 204.6 216c-12.7 208.1 67 34.6 72.7 125s-95.3-71.7-56.4 133.2c-181.1 12.3-22.4 61.7-99.7 76.7C43.9 566 172.5 460.7 0 517.2V252.7z" />
+  <path d="M0 517.2c172.5-56.5 43.9 48.8 121.2 33.7s-81.3-64.4 99.7-76.7c23 211.1-66.4 38.5-67.9 130.6s93.4-77.5 63.7 132.7c-170.3 47.1-40.5-49.4-116.3-38.3-75.8 11.1 76.2 66.3-100.4 70.1V517.2z" />
+  <path d="M0 769.3c176.6-3.8 24.6-59 100.4-70.1 75.9-11.1-53.9 85.4 116.3 38.3 7.5 214.2 72 28.8 86.7 120.7 14.7 91.9-104.5-64-44.6 141.8H0V769.3z" />
+  <path d="M255.2 0h247.4c-40.2 187 56 40.6 48.7 123.3-7.3 82.7-76.5-78.2-69.5 113-219.8-44-46.7 66.3-143.7 59.2-97-7.1 90.3-91-133.6-79.5 18.9-177.9 61.6-19.7 79.3-95.4S193.1 167.8 255.2 0z" />
+  <path d="M204.6 216c223.8-11.5 36.5 72.4 133.6 79.5s-76.1-103.1 143.7-59.2C460 437.7 545.3 273 546.7 360.9c1.4 87.9-89.1-73.9-60.7 126.6-213.3 15.9-36.4-68.2-129.2-72.9-92.8-4.7 74.8 96.7-135.8 59.6-39-204.9 62-42.8 56.3-133.2s-85.4 83.2-72.7-125z" />
+  <path d="M220.9 474.2c210.7 37.1 43.1-64.3 135.8-59.6 92.8 4.7-84.2 88.8 129.2 72.9-39.3 191.7 57.7 41 51.1 125.7s-79-79.2-70 116.3c-201-18.6-35.5 63.8-123.1 66.6-87.6 2.8 72.3-90-127.1-58.6 29.7-210.2-65.2-40.5-63.7-132.7 1.4-92.2 90.8 80.4 67.8-130.6z" />
+  <path d="M216.8 737.5c199.4-31.4 39.5 61.4 127.1 58.6S266 710.9 467 729.5c36.3 215.2-65.9 43.5-61.9 138.1 4 94.7 91.2-85.2 73.4 132.4H258.9c-60-205.8 59.3-49.9 44.6-141.8-14.8-91.9-79.3 93.5-86.7-120.7z" />
+  <path d="M502.6 0h252.5c-1.2 202-67 29.1-78.4 116.1-11.4 87 96.7-63.2 45.9 132.4-193.8 14.3-33.1-62-117.3-66.3-84.3-4.3 68 87.9-123.4 54.1-7-191.1 62.2-30.3 69.5-113 7.2-82.7-89 63.7-48.8-123.3z" />
+  <path d="M481.8 236.3c191.4 33.8 39.2-58.4 123.4-54.1 84.3 4.3-76.5 80.6 117.3 66.3-26 185 57.4 35.6 56.1 116.7-1.3 81.1-80-70.8-59.7 114.9-185.7 29.2-36.8-57.2-118.4-54.6-81.6 2.6 72.5 79.4-114.7 61.9-28.4-200.5 62.2-38.7 60.7-126.6s-86.5 76.9-64.7-124.5z" />
+  <path d="M486 487.5c187.2 17.5 33.1-59.4 114.7-61.9 81.6-2.6-67.4 83.8 118.4 54.6 8.7 197.5-64.1 31.7-71 117.3-6.9 85.5 91.5-66.4 51.2 127.1C514 751.7 663.2 667.3 582 669s71.4 79.8-114.9 60.5c-9.1-195.5 63.3-31.6 70-116.3 6.5-84.7-90.5 66-51.1-125.7z" />
+  <path d="M467.1 729.5c186.3 19.3 33.6-58.8 114.9-60.5 81.3-1.7-68 82.8 117.4 55.6-9.9 222.5 72.2 35.8 79.9 132.2s-103-74.9-57.8 143.2H478.6c17.8-217.6-69.4-37.7-73.4-132.4-4-94.6 98.1 77.1 61.9-138.1z" />
+  <path d="M755.1 0H1000v225.3c-219.6 46.3-47.4-65.9-144.5-57.8-97.1 8.1 91.3 90.1-132.9 80.9C773.5 52.9 665.4 203 676.7 116c11.4-86.9 77.3 86 78.4-116z" />
+  <path d="M722.6 248.5c224.2 9.2 35.8-72.8 132.9-80.9 97.1-8.1-75.1 104 144.5 57.8V499c-222.9-43.2-46.9 67.4-145.2 60.8-98.3-6.6 90.9-92.7-135.8-79.7-20.3-185.7 58.5-33.9 59.7-114.9 1.3-81.1-82.1 68.3-56.1-116.7z" />
+  <path d="M719 480.2c226.7-13 37.4 73.1 135.8 79.7 98.3 6.6-77.7-104 145.2-60.8v246.5c-238.5-46.8-50.3 72-155.6 64.7-105.2-7.3 97.5-99-145.1-85.6 40.2-193.6-58.1-41.6-51.2-127.1 6.9-85.7 79.6 80.1 70.9-117.4z" />
+  <path d="M699.3 724.6c242.6-13.3 39.9 78.3 145.1 85.6 105.2 7.3-82.9-111.5 155.6-64.7V1000H721.4c-45.2-218.1 65.5-46.8 57.8-143.2-7.7-96.4-89.8 90.3-79.9-132.2z" />
+</svg>
\ No newline at end of file
diff --git a/svg-jigsaw-solver-drag-n-drop-version/src/script.js b/svg-jigsaw-solver-drag-n-drop-version/src/script.js
new file mode 100644
index 0000000..f5e3157
--- /dev/null
+++ b/svg-jigsaw-solver-drag-n-drop-version/src/script.js
@@ -0,0 +1,46 @@
+const root = document.documentElement;
+
+/* animation */
+const setScroll = () => {
+  root.style.setProperty("--animate", window.scrollY / window.innerHeight);
+};
+setScroll();
+window.addEventListener("scroll", setScroll); // debounce this in production
+
+/* page aspect ratio */
+const setWindowSize = () => {
+  const aspectRatio = window.innerWidth / window.innerHeight;
+  root.style.setProperty(
+    "--windowHeightScalar",
+    aspectRatio > 1 ? 1 : 1 / aspectRatio
+  );
+  root.style.setProperty(
+    "--windowWidthScalar",
+    aspectRatio < 1 ? 1 : aspectRatio
+  );
+};
+setWindowSize();
+window.addEventListener("resize", setWindowSize); // debounce this in production
+
+/* drag n drop */
+const upload = document.getElementById("upload");
+const uploadMask = document.getElementById("upload-mask");
+upload.addEventListener("input", (e) => {
+  uploadMask.style.opacity = 0;
+  const input = e.target;
+  if (input.files && input.files[0]) {
+    const reader = new FileReader();
+    reader.onload = (readerE) => {
+      document
+        .getElementById("image")
+        .setAttribute("xlink:href", readerE.target.result);
+    };
+    reader.readAsDataURL(input.files[0]);
+  }
+});
+upload.addEventListener("dragenter", () => {
+  uploadMask.style.opacity = 1;
+});
+upload.addEventListener("dragleave", () => {
+  uploadMask.style.opacity = 0;
+});
diff --git a/svg-jigsaw-solver-drag-n-drop-version/src/style.sass b/svg-jigsaw-solver-drag-n-drop-version/src/style.sass
new file mode 100644
index 0000000..1af682d
--- /dev/null
+++ b/svg-jigsaw-solver-drag-n-drop-version/src/style.sass
@@ -0,0 +1,93 @@
+$size: 50vmin
+$rows: 4
+$columns: 4
+
+\:root
+  --animate: 0
+  --windowWidthScalar: 1
+  --windowHeightScalar: 1
+  --bg: #f3f0ed
+  --color: #{lighten(#242733, 50%)}
+  @media (prefers-color-scheme: dark)
+    --bg: #242733
+    --color: #{darken(#f3f0ed, 30%)}
+
+body
+  margin: 0
+  height: 200vh
+  color: var(--color)
+  background: var(--bg)
+
+svg
+  position: fixed
+  width: $size
+  height: $size
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+  overflow: visible !important
+
+path
+  fill: url(#puzzle)
+  // remove unit from $size
+  $s: $size / ($size * 0 + 1)
+  --startX: calc(var(--pieceX) * (100 * var(--windowWidthScalar) - #{$s}) / #{(2 * $s)} * 100%)
+  --endX: 0px
+  --startY: calc(var(--pieceY) * (100 * var(--windowHeightScalar) - #{$s}) / #{(2 * $s)} * 100%)
+  --endY: 0px
+  --startRotate: 0deg // set randomly below
+  --endRotate: 0deg
+  // lerp between start and end using --animate
+  --x: calc(var(--startX) * (-1 * var(--animate) + 1) + var(--endX) * var(--animate))
+  --y: calc(var(--startY) * (-1 * var(--animate) + 1) + var(--endY) * var(--animate))
+  --rotate: calc(var(--startRotate) * (-1 * var(--animate) + 1) + var(--endRotate) * var(--animate))
+  // set origin to the middle of each piece so they can be rotated without fill-box
+  // if we used 50% 50% and fill-box, using percentages for position in the whole svg won't work
+  transform-origin: calc(50% + 50% * var(--pieceX)) calc(50% + 50% * var(--pieceY))
+  transform: translate(var(--x), var(--y)) rotate(var(--rotate)) 
+  stroke-width: 0.5vmin
+  stroke: var(--bg)
+
+  @for $column from 1 through $columns
+    &:nth-of-type(n + #{1-$rows+$column*$rows})
+      // -1 for left edge, +1 for right edge
+      --pieceX: #{-1+(-1+2*$column)/$columns}
+  
+  @for $row from 1 through $rows
+    &:nth-of-type(#{$columns}n + #{$row})
+      // -1 for top edge, +1 for bottom edge
+      --pieceY: #{-1+(-1+2*$row)/$rows}
+
+  @for $i from 1 through $rows*$columns
+    &:nth-of-type(#{$i})
+      // between 50 - 100, randomly +/-
+      --startRotate: #{(50+random(50)) * (-3+round(random(2))*2)}deg
+
+#upload
+  position: fixed
+  width: 100%
+  height: 100%
+  top: 0
+  left: 0
+  opacity: 0
+  z-index: 1
+  
+#upload-mask
+  position: fixed
+  top: 1em
+  left: 1em
+  bottom: 1em
+  right: 1em
+  pointer-events: none
+  display: flex
+  justify-content: center
+  align-items: center
+  padding: 1em
+  border-radius: 0.5em
+  border: 0.1em dashed var(--color)
+  text-align: center
+  font-size: 32px
+  color: var(--color)
+  opacity: 0
+  z-index: 2
+  
\ No newline at end of file
diff --git a/svg-loader/README.markdown b/svg-loader/README.markdown
new file mode 100644
index 0000000..5553454
--- /dev/null
+++ b/svg-loader/README.markdown
@@ -0,0 +1,5 @@
+# SVG Loader
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/kassandrasanch/pen/GRNRJaN](https://codepen.io/kassandrasanch/pen/GRNRJaN).
+
+
diff --git a/svg-loader/dist/index.html b/svg-loader/dist/index.html
new file mode 100644
index 0000000..3c37e29
--- /dev/null
+++ b/svg-loader/dist/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - SVG Loader</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1056 248"><defs><style></style></defs><path d="M85,184q0,19.58-16.82,19.57h-.47v30.6q23.84-.13,36.41-13.77t12.69-38.84V151.22H85ZM104.1,27.66Q91.53,14,67.69,13.89v30.6h.47Q85,44.48,85,64.36V89.13h31.81V66.5Q116.79,41.42,104.1,27.66Z"/><path d="M224.14,144.49q-5.87-11.09-19-24l-24,24a78.33,78.33,0,0,1,11.19,13.88,45.38,45.38,0,0,1,6.12,23.71c0,7.55-1.48,13-4.43,16.36s-7.29,5.05-13,5.05q-17.45,0-17.44-20.8V168H131.77v12.24q0,26,12.54,39.9t37,13.93q24.78,0,37.78-14.07t13-40.37Q232.09,159.48,224.14,144.49Z"/><path d="M337.92,144.49Q330.55,130.66,312,114L288.08,137.9q12.81,11.76,18,20.5a45.48,45.48,0,0,1,6.12,23.71c0,7.55-1.48,13-4.43,16.36s-7.31,5.05-13,5.05q-17.43,0-17.43-20.8V168H245.55v12.24q0,26,12.54,39.9t37,13.93q24.76,0,37.78-14.07t13-40.37Q345.87,159.48,337.92,144.49Z"/><path d="M485.65,17h-24V54.27h.16l15,105.82H461.63v29.06h19.12v-.61l6.12,42.51h33.64Z"/><path d="M637.34,219.88a142.71,142.71,0,0,1-.62-14.83V167.43q0-19-5-30.28a26.24,26.24,0,0,0-17.28-15v-.61q22-8.86,22-42.2V66.19q0-25.08-11.93-37.16T586.56,17h-.14v30.6q8.28.23,12.23,5.19,4.13,5.19,4.12,16.82V86.07q0,12.24-5,17.44c-2.69,2.76-6.47,4.44-11.31,5v31q8.15.93,11.93,5.56,4.73,5.82,4.73,20.5v39.15a149.24,149.24,0,0,0,.61,16.51,49.33,49.33,0,0,0,2.45,9.79h34.25A37.28,37.28,0,0,1,637.34,219.88Z"/><path d="M702.64,17v214.1h16.67V47.54h35.17V17Z"/><path d="M787.06,17v214.1h17.27V17Z"/><path d="M916,144.49q-6.65-12.5-22.39-27.3l-24,24q10.08,9.74,14.56,17.24a45.48,45.48,0,0,1,6.12,23.71c0,7.55-1.48,13-4.44,16.36s-7.3,5.05-13,5.05q-17.43,0-17.43-20.8V168H823.6v12.24q0,26,12.54,39.9t37,13.93q24.78,0,37.77-14.07t13-40.37Q923.92,159.48,916,144.49Z"/><path d="M986.31,17v214.1h16.83V47.54h35.17V17Z"/><rect class="cls-1" x="44.45" y="87.82" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="70.21" width="6.89" height="3.6"/><path class="cls-1" d="M44.45,52.59v3.6h7.81a20,20,0,0,1,1.28-3.6Z"/><rect class="cls-1" x="44.45" y="34.97" width="23.25" height="3.6"/><path class="cls-1" d="M67.69,21v-3.6H45.9c-.5.19-1,.39-1.45.59v3Z"/><rect class="cls-1" x="44.45" y="79.01" width="6.89" height="3.6"/><path class="cls-1" d="M44.45,61.4V65h6.88v-.64c0-1,.05-2,.12-3Z"/><path class="cls-1" d="M44.45,43.78v3.6H57.77a16.88,16.88,0,0,1,9.92-2.89v-.71Z"/><rect class="cls-1" x="44.45" y="26.16" width="23.25" height="3.6"/><rect class="cls-1" x="44.14" y="87.82" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="70.21" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="52.59" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="34.97" width="0.31" height="3.6"/><path class="cls-1" d="M44.45,21v-3l-.31.12V21Z"/><rect class="cls-1" x="44.14" y="79.01" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="61.4" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="26.16" width="0.31" height="3.6"/><rect class="cls-1" x="44.45" y="175.91" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="158.29" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="140.67" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="123.06" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="105.44" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="167.1" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="149.48" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="131.86" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="114.25" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="96.63" width="6.89" height="3.6"/><rect class="cls-1" x="44.14" y="175.91" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="158.29" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="140.67" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="123.06" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="105.44" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="167.1" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="149.48" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="131.86" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="114.25" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="96.63" width="0.31" height="3.6"/><path class="cls-1" d="M44.45,228.76v1.3a48.89,48.89,0,0,0,7.08,2.3H67.69v-3.6Z"/><rect class="cls-1" x="44.45" y="211.14" width="23.25" height="3.6"/><path class="cls-1" d="M44.45,193.53v3.6h10a16.37,16.37,0,0,1-1.7-3.6Z"/><rect class="cls-1" x="44.45" y="219.95" width="23.25" height="3.6"/><path class="cls-1" d="M44.45,205.93H67.69v-2.42A19.78,19.78,0,0,1,61,202.33H44.45Z"/><path class="cls-1" d="M44.45,184.72v3.6h7.13c-.14-1.14-.2-2.34-.23-3.6Z"/><path class="cls-1" d="M44.14,228.76v1.18l.31.12v-1.3Z"/><rect class="cls-1" x="44.14" y="211.14" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="193.53" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="219.95" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="202.33" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="184.72" width="0.31" height="3.6"/><polygon class="cls-1" points="43.83 87.82 17.69 87.82 17.69 91.42 43.83 91.42 44.14 91.42 44.14 87.82 43.83 87.82"/><polygon class="cls-1" points="43.83 70.2 17.69 70.2 17.69 73.81 43.83 73.81 44.14 73.81 44.14 70.2 43.83 70.2"/><path class="cls-1" d="M43.83,52.59h-25c-.2,1.17-.37,2.37-.52,3.6H44.14v-3.6Z"/><path class="cls-1" d="M43.83,35H25c-.67,1.16-1.3,2.36-1.88,3.6h21V35Z"/><path class="cls-1" d="M43.83,21h.31V18.06A42.69,42.69,0,0,0,38.55,21Z"/><polygon class="cls-1" points="43.83 79.01 17.69 79.01 17.69 82.61 43.83 82.61 44.14 82.61 44.14 79.01 43.83 79.01"/><path class="cls-1" d="M43.83,61.4h-26c-.07,1.18-.11,2.38-.13,3.6H44.14V61.4Z"/><path class="cls-1" d="M43.83,43.78H21q-.59,1.76-1.08,3.6H44.14v-3.6Z"/><path class="cls-1" d="M43.83,26.16h-12c-.5.49-1,1-1.46,1.5-.63.68-1.22,1.38-1.8,2.1H44.14v-3.6Z"/><polygon class="cls-1" points="43.83 175.91 17.69 175.91 17.69 179.51 43.83 179.51 44.14 179.51 44.14 175.91 43.83 175.91"/><polygon class="cls-1" points="43.83 158.29 17.69 158.29 17.69 161.89 43.83 161.89 44.14 161.89 44.14 158.29 43.83 158.29"/><polygon class="cls-1" points="43.83 140.67 17.69 140.67 17.69 144.27 43.83 144.27 44.14 144.27 44.14 140.67 43.83 140.67"/><polygon class="cls-1" points="43.83 123.06 17.69 123.06 17.69 126.66 43.83 126.66 44.14 126.66 44.14 123.06 43.83 123.06"/><polygon class="cls-1" points="43.83 105.44 17.69 105.44 17.69 109.04 43.83 109.04 44.14 109.04 44.14 105.44 43.83 105.44"/><polygon class="cls-1" points="43.83 167.1 17.69 167.1 17.69 170.7 43.83 170.7 44.14 170.7 44.14 167.1 43.83 167.1"/><polygon class="cls-1" points="43.83 149.48 17.69 149.48 17.69 153.08 43.83 153.08 44.14 153.08 44.14 149.48 43.83 149.48"/><polygon class="cls-1" points="43.83 131.86 17.69 131.86 17.69 135.46 43.83 135.46 44.14 135.46 44.14 131.86 43.83 131.86"/><polygon class="cls-1" points="43.83 114.25 17.69 114.25 17.69 117.85 43.83 117.85 44.14 117.85 44.14 114.25 43.83 114.25"/><polygon class="cls-1" points="43.83 96.63 17.69 96.63 17.69 100.23 43.83 100.23 44.14 100.23 44.14 96.63 43.83 96.63"/><path class="cls-1" d="M43.83,228.76H41.58c.83.42,1.69.81,2.56,1.18v-1.18Z"/><path class="cls-1" d="M43.83,211.14H24c.65,1.24,1.34,2.45,2.09,3.6H44.14v-3.6Z"/><path class="cls-1" d="M43.83,193.53H18.51c.18,1.22.4,2.42.64,3.6h25v-3.6Z"/><path class="cls-1" d="M43.83,220H30.05c.11.13.22.27.34.39a38.77,38.77,0,0,0,3.33,3.21H44.14V220Z"/><path class="cls-1" d="M43.83,202.33H20.44c.36,1.23.76,2.44,1.2,3.6h22.5v-3.6Z"/><path class="cls-1" d="M43.83,184.72H17.75c0,1.22.11,2.41.2,3.6H44.14v-3.6Z"/><rect class="cls-1" x="220.62" y="70.21" width="10.86" height="3.6"/><path class="cls-1" d="M220.62,52.59v3.6h10.17c-.15-1.23-.32-2.43-.53-3.6Z"/><path class="cls-1" d="M220.62,35v3.6H226q-.85-1.86-1.83-3.6Z"/><path class="cls-1" d="M220.62,61.4V65h10.82c0-1.22-.08-2.43-.15-3.6Z"/><path class="cls-1" d="M220.62,43.78v3.6h8.51c-.32-1.24-.68-2.43-1.07-3.6Z"/><path class="cls-1" d="M220.62,29.76h.11l-.11-.15Z"/><rect class="cls-1" x="220.31" y="70.21" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="52.59" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="61.4" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="43.78" width="0.31" height="3.6"/><path class="cls-1" d="M220.31,29.25v.51h.31v-.15Z"/><path class="cls-1" d="M175.63,91.42c-1-1.24-1.83-2.44-2.59-3.6H135.28c.36,1.22.75,2.42,1.18,3.6Z"/><path class="cls-1" d="M132.66,73.8H167c-.27-1.18-.47-2.38-.63-3.59H132.53V72C132.57,72.58,132.61,73.2,132.66,73.8Z"/><polygon class="cls-1" points="220.01 70.2 199.67 70.2 199.67 73.81 220.01 73.81 220.31 73.81 220.31 70.2 220.01 70.2"/><path class="cls-1" d="M133.06,56.19h34a19.31,19.31,0,0,1,1.31-3.6H133.6C133.39,53.76,133.22,55,133.06,56.19Z"/><path class="cls-1" d="M220,52.59H197.34a21.07,21.07,0,0,1,1.29,3.6h21.68v-3.6Z"/><path class="cls-1" d="M220,35H139.92c-.68,1.16-1.32,2.36-1.91,3.6h82.3V35Z"/><path class="cls-1" d="M211,21a41.51,41.51,0,0,0-7.25-3.6H161a43.55,43.55,0,0,0-7.42,3.6Z"/><path class="cls-1" d="M134,82.61h36.13c-.57-1.18-1.1-2.38-1.55-3.6H133.29Q133.57,80.84,134,82.61Z"/><path class="cls-1" d="M166,65v0c0-1.26.06-2.43.16-3.57H132.56l0,.63v3Z"/><path class="cls-1" d="M220,61.4H199.48c.1,1.14.16,2.33.18,3.6h20.65V61.4Z"/><path class="cls-1" d="M220,43.78H135.88q-.6,1.76-1.11,3.6h37.8q4-2.9,10.28-2.9a16.93,16.93,0,0,1,10.23,2.9h27.23v-3.6Z"/><path class="cls-1" d="M219.1,27.8c-.5-.56-1-1.11-1.55-1.64H146.84c-.55.53-1.09,1.08-1.61,1.64s-1.14,1.29-1.69,2h76.77v-.51C219.92,28.76,219.52,28.27,219.1,27.8Z"/><path class="cls-1" d="M132.53,70.21h-.08c0,.58.05,1.17.08,1.76Z"/><path class="cls-1" d="M132.53,65V62c-.05,1-.09,2-.11,3Z"/><path class="cls-1" d="M185,140.67h-7.74c1.28,1.23,2.51,2.43,3.65,3.6h.49Z"/><path class="cls-1" d="M202.6,123.06H158.32q1.76,1.77,3.64,3.6h37Z"/><path class="cls-1" d="M192.69,109q-2.07-1.85-3.94-3.6H143.62q1.19,1.77,2.53,3.6Z"/><path class="cls-1" d="M193.79,131.86H167.55l2.15,1.93c.65.56,1.26,1.12,1.89,1.67h18.6Z"/><path class="cls-1" d="M202.46,117.85q-1.87-1.78-3.89-3.6H150.26q1.5,1.77,3.15,3.6Z"/><path class="cls-1" d="M140.45,100.23h43c-1.2-1.23-2.34-2.43-3.4-3.6H138.62Q139.48,98.46,140.45,100.23Z"/><rect class="cls-1" x="313.45" y="70.21" width="31.81" height="3.6"/><path class="cls-1" d="M311.11,52.59a20.25,20.25,0,0,1,1.3,3.6h32.16c-.16-1.23-.33-2.43-.53-3.6Z"/><path class="cls-1" d="M308.7,35v3.6h31.11c-.57-1.24-1.18-2.44-1.84-3.6Z"/><path class="cls-1" d="M324.75,21a42,42,0,0,0-7.26-3.6H308.7V21Z"/><path class="cls-1" d="M313.26,61.4c.1,1.14.16,2.33.18,3.6h31.78c0-1.22-.08-2.43-.16-3.6Z"/><path class="cls-1" d="M308.7,43.78v3.6h34.21c-.32-1.24-.68-2.43-1.07-3.6Z"/><path class="cls-1" d="M308.7,29.76h25.8c-.52-.67-1.06-1.32-1.62-2s-1-1.11-1.56-1.64H308.7Z"/><rect class="cls-1" x="308.4" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="308.4" y="17.35" width="0.31" height="3.6"/><rect class="cls-1" x="308.4" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="308.4" y="26.16" width="0.31" height="3.6"/><polygon class="cls-1" points="308.7 114.25 308.7 117.27 311.73 114.25 308.7 114.25"/><polygon class="cls-1" points="308.4 114.25 308.4 117.58 308.7 117.27 308.7 114.25 308.4 114.25"/><path class="cls-1" d="M289.41,91.42q-1.44-1.86-2.6-3.6H249.05c.37,1.22.76,2.42,1.19,3.6Z"/><path class="cls-1" d="M280.77,73.8c-.26-1.18-.47-2.38-.62-3.59H246.23c0,1.21.11,2.41.21,3.59Z"/><path class="cls-1" d="M246.84,56.19h34a20.05,20.05,0,0,1,1.32-3.6H247.38Q247.07,54.35,246.84,56.19Z"/><path class="cls-1" d="M308.09,35H253.7c-.68,1.16-1.32,2.36-1.91,3.6H308.4V35Z"/><path class="cls-1" d="M308.09,21h.31v-3.6H274.81a43.19,43.19,0,0,0-7.42,3.6Z"/><path class="cls-1" d="M283.86,82.61c-.57-1.18-1.1-2.38-1.56-3.6H247.07c.19,1.22.4,2.42.65,3.6Z"/><path class="cls-1" d="M279.81,65v0c0-1.26.06-2.43.15-3.57H246.34c-.07,1.17-.12,2.38-.14,3.6Z"/><path class="cls-1" d="M308.09,43.78H249.66c-.4,1.17-.78,2.37-1.11,3.6h37.8q3.94-2.9,10.28-2.9a17,17,0,0,1,10.23,2.9h1.54v-3.6Z"/><path class="cls-1" d="M308.09,26.16H260.62c-.55.53-1.09,1.08-1.61,1.64s-1.15,1.29-1.69,2H308.4v-3.6Z"/><path class="cls-1" d="M302.92,123.06H272.09q1.76,1.77,3.64,3.6h23.59Z"/><path class="cls-1" d="M306.46,109q-2.06-1.85-3.94-3.6H257.4c.78,1.18,1.63,2.38,2.53,3.6Z"/><path class="cls-1" d="M294.11,131.86H281.32l2.16,1.93,1.9,1.67h5.13Z"/><path class="cls-1" d="M308.09,114.25H264c1,1.18,2,2.38,3.14,3.6h40.95l.27-.27v-3.33Z"/><path class="cls-1" d="M254.22,100.23h43q-1.81-1.85-3.4-3.6h-41.4C253,97.85,253.58,99.05,254.22,100.23Z"/><polygon class="cls-1" points="456.02 91.42 456.52 87.82 428.53 87.82 427.94 91.42 456.02 91.42"/><polygon class="cls-1" points="431.4 70.2 430.81 73.81 458.47 73.81 458.97 70.2 431.4 70.2"/><polygon class="cls-1" points="434.27 52.59 433.68 56.19 460.91 56.19 461.18 54.27 461.63 54.27 461.63 52.59 434.27 52.59"/><polygon class="cls-1" points="437.14 34.97 436.55 38.57 461.63 38.57 461.63 34.97 437.14 34.97"/><polygon class="cls-1" points="461.63 20.95 461.63 17.35 440.01 17.35 439.42 20.95 461.63 20.95"/><polygon class="cls-1" points="429.97 79.01 429.38 82.61 457.25 82.61 457.74 79.01 429.97 79.01"/><polygon class="cls-1" points="432.83 61.4 432.25 65 459.69 65 460.19 61.4 432.83 61.4"/><polygon class="cls-1" points="435.7 43.78 435.12 47.38 461.63 47.38 461.63 43.78 435.7 43.78"/><polygon class="cls-1" points="438.57 26.16 437.99 29.76 461.63 29.76 461.63 26.16 438.57 26.16"/><polygon class="cls-1" points="461.63 179.51 461.63 175.91 414.19 175.91 413.6 179.51 461.63 179.51"/><polygon class="cls-1" points="417.06 158.29 416.47 161.89 461.63 161.89 461.63 160.09 446.5 160.09 446.75 158.29 417.06 158.29"/><polygon class="cls-1" points="419.92 140.67 419.34 144.27 448.69 144.27 449.19 140.67 419.92 140.67"/><polygon class="cls-1" points="422.79 123.06 422.21 126.66 451.13 126.66 451.63 123.06 422.79 123.06"/><polygon class="cls-1" points="425.66 105.44 425.08 109.04 453.58 109.04 454.08 105.44 425.66 105.44"/><polygon class="cls-1" points="415.62 167.1 415.04 170.7 461.63 170.7 461.63 167.1 415.62 167.1"/><polygon class="cls-1" points="418.49 149.48 417.9 153.08 447.47 153.08 447.97 149.48 418.49 149.48"/><polygon class="cls-1" points="421.36 131.86 420.77 135.46 449.91 135.46 450.41 131.86 421.36 131.86"/><polygon class="cls-1" points="424.23 114.25 423.64 117.85 452.36 117.85 452.86 114.25 424.23 114.25"/><polygon class="cls-1" points="427.1 96.63 426.51 100.23 454.8 100.23 455.3 96.63 427.1 96.63"/><polygon class="cls-1" points="405.58 228.76 405.21 231.05 436.4 231.05 436.74 228.76 405.58 228.76"/><polygon class="cls-1" points="408.45 211.14 407.86 214.74 438.78 214.74 439.31 211.14 408.45 211.14"/><polygon class="cls-1" points="411.32 193.53 410.73 197.13 441.36 197.13 441.88 193.53 411.32 193.53"/><polygon class="cls-1" points="407.01 219.95 406.43 223.55 437.5 223.55 438.02 219.95 407.01 219.95"/><polygon class="cls-1" points="409.88 202.33 409.3 205.93 440.07 205.93 440.6 202.33 409.88 202.33"/><polygon class="cls-1" points="412.75 184.72 412.17 188.31 461.63 188.31 461.63 184.72 412.75 184.72"/><rect class="cls-1" x="572.96" y="34.97" width="13.46" height="3.6"/><rect class="cls-1" x="572.96" y="17.35" width="13.46" height="3.6"/><rect class="cls-1" x="572.96" y="43.78" width="13.46" height="3.6"/><rect class="cls-1" x="572.96" y="26.16" width="13.46" height="3.6"/><rect class="cls-1" x="572.65" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="17.35" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="26.16" width="0.31" height="3.6"/><rect class="cls-1" x="572.96" y="123.06" width="13.46" height="3.6"/><path class="cls-1" d="M573,108.71V109h13.46v-.54a35.82,35.82,0,0,1-3.83.21Z"/><rect class="cls-1" x="572.96" y="131.86" width="13.46" height="3.6"/><rect class="cls-1" x="572.96" y="114.25" width="13.46" height="3.6"/><rect class="cls-1" x="572.65" y="123.06" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="108.71" width="0.31" height="0.33"/><rect class="cls-1" x="572.65" y="131.86" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="114.25" width="0.31" height="3.6"/><rect class="cls-1" x="536.71" y="87.82" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="70.21" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="52.59" width="33.64" height="3.6"/><polygon class="cls-1" points="572.35 34.97 536.71 34.97 536.71 38.57 572.35 38.57 572.65 38.57 572.65 34.97 572.35 34.97"/><polygon class="cls-1" points="572.35 20.95 572.65 20.95 572.65 17.35 572.35 17.35 536.71 17.35 536.71 20.95 572.35 20.95"/><rect class="cls-1" x="536.71" y="79.01" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="61.4" width="33.64" height="3.6"/><polygon class="cls-1" points="572.35 43.78 536.71 43.78 536.71 47.38 572.35 47.38 572.65 47.38 572.65 43.78 572.35 43.78"/><polygon class="cls-1" points="572.35 26.16 536.71 26.16 536.71 29.76 572.35 29.76 572.65 29.76 572.65 26.16 572.35 26.16"/><rect class="cls-1" x="536.71" y="175.91" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="158.29" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="140.67" width="33.64" height="3.6"/><polygon class="cls-1" points="572.35 123.06 536.71 123.06 536.71 126.66 572.35 126.66 572.65 126.66 572.65 123.06 572.35 123.06"/><polygon class="cls-1" points="570.36 108.71 570.36 105.44 536.71 105.44 536.71 109.04 572.35 109.04 572.65 109.04 572.65 108.71 570.36 108.71"/><rect class="cls-1" x="536.71" y="167.1" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="149.48" width="33.64" height="3.6"/><polygon class="cls-1" points="572.35 131.86 536.71 131.86 536.71 135.46 572.35 135.46 572.65 135.46 572.65 131.86 572.35 131.86"/><polygon class="cls-1" points="572.35 114.25 536.71 114.25 536.71 117.85 572.35 117.85 572.65 117.85 572.65 114.25 572.35 114.25"/><rect class="cls-1" x="536.71" y="96.63" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="228.76" width="33.64" height="2.29"/><rect class="cls-1" x="536.71" y="211.14" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="193.53" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="219.95" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="202.33" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="184.72" width="33.64" height="3.6"/><rect class="cls-1" x="685.66" y="87.82" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="70.21" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="52.59" width="16.98" height="3.6"/><rect class="cls-1" x="661.05" y="34.97" width="41.6" height="3.6"/><rect class="cls-1" x="661.05" y="17.35" width="41.6" height="3.6"/><rect class="cls-1" x="685.66" y="79.01" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="61.4" width="16.98" height="3.6"/><rect class="cls-1" x="661.05" y="43.78" width="41.6" height="3.6"/><rect class="cls-1" x="661.05" y="26.16" width="41.6" height="3.6"/><rect class="cls-1" x="660.74" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="660.74" y="17.35" width="0.31" height="3.6"/><rect class="cls-1" x="660.74" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="660.74" y="26.16" width="0.31" height="3.6"/><rect class="cls-1" x="685.66" y="175.91" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="158.29" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="140.67" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="123.06" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="105.44" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="167.1" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="149.48" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="131.86" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="114.25" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="96.63" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="228.76" width="16.98" height="2.29"/><rect class="cls-1" x="685.66" y="211.14" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="193.53" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="219.95" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="202.33" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="184.72" width="16.98" height="3.6"/><polygon class="cls-1" points="660.43 34.97 650.49 34.97 650.49 38.57 660.43 38.57 660.74 38.57 660.74 34.97 660.43 34.97"/><polygon class="cls-1" points="660.43 20.95 660.74 20.95 660.74 17.35 660.43 17.35 650.49 17.35 650.49 20.95 660.43 20.95"/><polygon class="cls-1" points="660.43 43.78 650.49 43.78 650.49 47.38 660.43 47.38 660.74 47.38 660.74 43.78 660.43 43.78"/><polygon class="cls-1" points="660.43 26.16 650.49 26.16 650.49 29.76 660.43 29.76 660.74 29.76 660.74 26.16 660.43 26.16"/><rect class="cls-1" x="770.69" y="87.82" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="70.21" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="52.59" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="34.97" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="17.35" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="79.01" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="61.4" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="43.78" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="26.16" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="175.91" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="158.29" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="140.67" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="123.06" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="105.44" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="167.1" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="149.48" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="131.86" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="114.25" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="96.63" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="228.76" width="16.37" height="2.29"/><rect class="cls-1" x="770.69" y="211.14" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="193.53" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="219.95" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="202.33" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="184.72" width="16.37" height="3.6"/><path class="cls-1" d="M864.85,87.82H837.22v3.6h30.23Q866,89.56,864.85,87.82Z"/><path class="cls-1" d="M858.82,73.8c-.26-1.18-.47-2.38-.62-3.59h-21V73.8Z"/><rect class="cls-1" x="891.5" y="70.21" width="31.81" height="3.6"/><path class="cls-1" d="M889.16,52.59a20.25,20.25,0,0,1,1.3,3.6h32.16c-.16-1.23-.33-2.43-.53-3.6Z"/><path class="cls-1" d="M858.87,56.19a19.31,19.31,0,0,1,1.31-3.6h-23v3.6Z"/><path class="cls-1" d="M837.22,35v3.6h80.63c-.57-1.24-1.18-2.44-1.84-3.6Z"/><path class="cls-1" d="M902.79,21a42.22,42.22,0,0,0-7.25-3.6H852.86a43.19,43.19,0,0,0-7.42,3.6Z"/><path class="cls-1" d="M837.22,79v3.6h24.69a38,38,0,0,1-1.56-3.6Z"/><path class="cls-1" d="M857.86,65v0c0-1.26.06-2.43.15-3.57H837.22V65Z"/><path class="cls-1" d="M891.31,61.4c.1,1.14.16,2.33.18,3.6h31.78c0-1.22-.08-2.43-.16-3.6Z"/><path class="cls-1" d="M837.22,43.78v3.6H864.4q3.95-2.9,10.28-2.9a17,17,0,0,1,10.23,2.9H921c-.32-1.24-.69-2.43-1.08-3.6Z"/><path class="cls-1" d="M837.22,27.64v2.12h75.32c-.52-.67-1.06-1.32-1.62-2s-1-1.11-1.56-1.64H838.67C838.17,26.64,837.69,27.13,837.22,27.64Z"/><rect class="cls-1" x="836.91" y="87.82" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="70.21" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="52.59" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="79.01" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="61.4" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="43.78" width="0.31" height="3.6"/><path class="cls-1" d="M837.06,27.8l-.15.17v1.79h.31V27.64Z"/><path class="cls-1" d="M869.08,140.67l.52.49.49-.49Z"/><path class="cls-1" d="M850.14,123.06q1.75,1.77,3.64,3.6h30.33l3.6-3.6Z"/><path class="cls-1" d="M837.22,105.44V108c.24.35.5.69.76,1h46.53q-2.06-1.85-3.94-3.6Z"/><path class="cls-1" d="M859.37,131.86l2.16,1.93,1.9,1.67H875.3l3.6-3.6Z"/><path class="cls-1" d="M845.23,117.85h47.69l.66-.66q-1.55-1.47-3.18-2.94H842.09C843.08,115.43,844.14,116.63,845.23,117.85Z"/><path class="cls-1" d="M837.22,96.63v3.6h38q-1.82-1.85-3.4-3.6Z"/><path class="cls-1" d="M836.91,105.44v2.13c.1.14.2.29.31.43v-2.56Z"/><rect class="cls-1" x="836.91" y="96.63" width="0.31" height="3.6"/><path class="cls-1" d="M836.61,87.82H827.1c.37,1.22.76,2.42,1.19,3.6h8.62v-3.6Z"/><path class="cls-1" d="M836.61,73.8h.3V70.21H824.28c0,1.21.11,2.41.21,3.59Z"/><path class="cls-1" d="M836.91,56.19v-3.6H825.43q-.31,1.75-.54,3.6h12Z"/><path class="cls-1" d="M836.61,35h-4.86c-.68,1.16-1.32,2.36-1.91,3.6h7.07V35Z"/><path class="cls-1" d="M836.61,79H825.12c.19,1.22.4,2.42.66,3.6h11.13V79Z"/><path class="cls-1" d="M836.61,65h.3V61.4H824.39c-.07,1.17-.12,2.38-.14,3.6Z"/><path class="cls-1" d="M836.61,43.78h-8.9c-.4,1.17-.78,2.37-1.11,3.6h10.31v-3.6Z"/><path class="cls-1" d="M835.37,29.76h1.54V28C836.38,28.55,835.87,29.15,835.37,29.76Z"/><path class="cls-1" d="M836.61,105.44h-1.16c.46.7.95,1.41,1.46,2.13v-2.13Z"/><path class="cls-1" d="M836.61,96.63h-6.16c.57,1.22,1.18,2.42,1.82,3.6h4.64v-3.6Z"/><rect class="cls-1" x="969.49" y="87.82" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="70.21" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="52.59" width="16.82" height="3.6"/><rect class="cls-1" x="934.32" y="34.97" width="52" height="3.6"/><rect class="cls-1" x="934.32" y="17.35" width="52" height="3.6"/><rect class="cls-1" x="969.49" y="79.01" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="61.4" width="16.82" height="3.6"/><rect class="cls-1" x="934.32" y="43.78" width="52" height="3.6"/><rect class="cls-1" x="934.32" y="26.16" width="52" height="3.6"/><rect class="cls-1" x="969.49" y="175.91" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="158.29" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="140.67" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="123.06" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="105.44" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="167.1" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="149.48" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="131.86" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="114.25" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="96.63" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="228.76" width="16.82" height="2.29"/><rect class="cls-1" x="969.49" y="211.14" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="193.53" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="219.95" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="202.33" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="184.72" width="16.82" height="3.6"/></svg>  
+
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js'></script>
+<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/svg-loader/dist/script.js b/svg-loader/dist/script.js
new file mode 100644
index 0000000..d11fdf3
--- /dev/null
+++ b/svg-loader/dist/script.js
@@ -0,0 +1,42 @@
+var elemets = document.querySelector('svg').children;
+
+let lines = document.querySelectorAll('.cls-1');
+
+var tl = gsap.timeline({delay: 1, repeat: -1, yoyo: true});
+
+tl.from('.cls-1', {
+  x: '300px',
+  // duration: .05,
+  stagger:.01,
+  duration: 1,
+  opacity: 0,
+  // fill: "yellow"
+})
+tl.to('.cls-1', {
+  // fill:'yellow',
+  duration: 1,
+  
+}, '<')
+
+let colors = ['#4cc9f0', '#4895ef', '#4361ee', '#3f37c9', '#3a0ca3'];
+
+// let colors = ['#4cc9f0', '#4895ef', '#4361ee', '#3f37c9', '#3a0ca3', "orange"];
+
+// let colors = ['#00377e', '#002d67',"#002657"]
+
+function getRandomInt(max) {
+  return Math.floor(Math.random() * Math.floor(max));
+  
+}
+ 
+
+
+
+var intervalID = window.setInterval(myCallback, 500);
+
+function myCallback() {
+  lines.forEach((element) => {
+  let newColor = colors[getRandomInt(colors.length)]  
+    $( element ).css( "fill", newColor );
+  });
+}
\ No newline at end of file
diff --git a/svg-loader/dist/style.css b/svg-loader/dist/style.css
new file mode 100644
index 0000000..c926324
--- /dev/null
+++ b/svg-loader/dist/style.css
@@ -0,0 +1,25 @@
+body {
+  font-family: "Lato", sans-serif;
+}
+
+.container {
+  width: 100vw;
+  height: 100vh;
+  background: #232323;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+svg {
+  fill: #F6EF03;
+  fill: #00AEEF;
+  fill: #fff;
+  fill: #000;
+  width: 60%;
+}
+
+.cls-1 {
+  fill: #000;
+}
\ No newline at end of file
diff --git a/svg-loader/license.txt b/svg-loader/license.txt
new file mode 100644
index 0000000..26e3f8a
--- /dev/null
+++ b/svg-loader/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Kass (https://codepen.io/kassandrasanch/pen/GRNRJaN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/svg-loader/src/index.html b/svg-loader/src/index.html
new file mode 100644
index 0000000..d80789b
--- /dev/null
+++ b/svg-loader/src/index.html
@@ -0,0 +1,4 @@
+<div class="container">
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1056 248"><defs><style></style></defs><path d="M85,184q0,19.58-16.82,19.57h-.47v30.6q23.84-.13,36.41-13.77t12.69-38.84V151.22H85ZM104.1,27.66Q91.53,14,67.69,13.89v30.6h.47Q85,44.48,85,64.36V89.13h31.81V66.5Q116.79,41.42,104.1,27.66Z"/><path d="M224.14,144.49q-5.87-11.09-19-24l-24,24a78.33,78.33,0,0,1,11.19,13.88,45.38,45.38,0,0,1,6.12,23.71c0,7.55-1.48,13-4.43,16.36s-7.29,5.05-13,5.05q-17.45,0-17.44-20.8V168H131.77v12.24q0,26,12.54,39.9t37,13.93q24.78,0,37.78-14.07t13-40.37Q232.09,159.48,224.14,144.49Z"/><path d="M337.92,144.49Q330.55,130.66,312,114L288.08,137.9q12.81,11.76,18,20.5a45.48,45.48,0,0,1,6.12,23.71c0,7.55-1.48,13-4.43,16.36s-7.31,5.05-13,5.05q-17.43,0-17.43-20.8V168H245.55v12.24q0,26,12.54,39.9t37,13.93q24.76,0,37.78-14.07t13-40.37Q345.87,159.48,337.92,144.49Z"/><path d="M485.65,17h-24V54.27h.16l15,105.82H461.63v29.06h19.12v-.61l6.12,42.51h33.64Z"/><path d="M637.34,219.88a142.71,142.71,0,0,1-.62-14.83V167.43q0-19-5-30.28a26.24,26.24,0,0,0-17.28-15v-.61q22-8.86,22-42.2V66.19q0-25.08-11.93-37.16T586.56,17h-.14v30.6q8.28.23,12.23,5.19,4.13,5.19,4.12,16.82V86.07q0,12.24-5,17.44c-2.69,2.76-6.47,4.44-11.31,5v31q8.15.93,11.93,5.56,4.73,5.82,4.73,20.5v39.15a149.24,149.24,0,0,0,.61,16.51,49.33,49.33,0,0,0,2.45,9.79h34.25A37.28,37.28,0,0,1,637.34,219.88Z"/><path d="M702.64,17v214.1h16.67V47.54h35.17V17Z"/><path d="M787.06,17v214.1h17.27V17Z"/><path d="M916,144.49q-6.65-12.5-22.39-27.3l-24,24q10.08,9.74,14.56,17.24a45.48,45.48,0,0,1,6.12,23.71c0,7.55-1.48,13-4.44,16.36s-7.3,5.05-13,5.05q-17.43,0-17.43-20.8V168H823.6v12.24q0,26,12.54,39.9t37,13.93q24.78,0,37.77-14.07t13-40.37Q923.92,159.48,916,144.49Z"/><path d="M986.31,17v214.1h16.83V47.54h35.17V17Z"/><rect class="cls-1" x="44.45" y="87.82" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="70.21" width="6.89" height="3.6"/><path class="cls-1" d="M44.45,52.59v3.6h7.81a20,20,0,0,1,1.28-3.6Z"/><rect class="cls-1" x="44.45" y="34.97" width="23.25" height="3.6"/><path class="cls-1" d="M67.69,21v-3.6H45.9c-.5.19-1,.39-1.45.59v3Z"/><rect class="cls-1" x="44.45" y="79.01" width="6.89" height="3.6"/><path class="cls-1" d="M44.45,61.4V65h6.88v-.64c0-1,.05-2,.12-3Z"/><path class="cls-1" d="M44.45,43.78v3.6H57.77a16.88,16.88,0,0,1,9.92-2.89v-.71Z"/><rect class="cls-1" x="44.45" y="26.16" width="23.25" height="3.6"/><rect class="cls-1" x="44.14" y="87.82" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="70.21" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="52.59" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="34.97" width="0.31" height="3.6"/><path class="cls-1" d="M44.45,21v-3l-.31.12V21Z"/><rect class="cls-1" x="44.14" y="79.01" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="61.4" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="26.16" width="0.31" height="3.6"/><rect class="cls-1" x="44.45" y="175.91" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="158.29" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="140.67" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="123.06" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="105.44" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="167.1" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="149.48" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="131.86" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="114.25" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="96.63" width="6.89" height="3.6"/><rect class="cls-1" x="44.14" y="175.91" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="158.29" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="140.67" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="123.06" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="105.44" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="167.1" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="149.48" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="131.86" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="114.25" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="96.63" width="0.31" height="3.6"/><path class="cls-1" d="M44.45,228.76v1.3a48.89,48.89,0,0,0,7.08,2.3H67.69v-3.6Z"/><rect class="cls-1" x="44.45" y="211.14" width="23.25" height="3.6"/><path class="cls-1" d="M44.45,193.53v3.6h10a16.37,16.37,0,0,1-1.7-3.6Z"/><rect class="cls-1" x="44.45" y="219.95" width="23.25" height="3.6"/><path class="cls-1" d="M44.45,205.93H67.69v-2.42A19.78,19.78,0,0,1,61,202.33H44.45Z"/><path class="cls-1" d="M44.45,184.72v3.6h7.13c-.14-1.14-.2-2.34-.23-3.6Z"/><path class="cls-1" d="M44.14,228.76v1.18l.31.12v-1.3Z"/><rect class="cls-1" x="44.14" y="211.14" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="193.53" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="219.95" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="202.33" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="184.72" width="0.31" height="3.6"/><polygon class="cls-1" points="43.83 87.82 17.69 87.82 17.69 91.42 43.83 91.42 44.14 91.42 44.14 87.82 43.83 87.82"/><polygon class="cls-1" points="43.83 70.2 17.69 70.2 17.69 73.81 43.83 73.81 44.14 73.81 44.14 70.2 43.83 70.2"/><path class="cls-1" d="M43.83,52.59h-25c-.2,1.17-.37,2.37-.52,3.6H44.14v-3.6Z"/><path class="cls-1" d="M43.83,35H25c-.67,1.16-1.3,2.36-1.88,3.6h21V35Z"/><path class="cls-1" d="M43.83,21h.31V18.06A42.69,42.69,0,0,0,38.55,21Z"/><polygon class="cls-1" points="43.83 79.01 17.69 79.01 17.69 82.61 43.83 82.61 44.14 82.61 44.14 79.01 43.83 79.01"/><path class="cls-1" d="M43.83,61.4h-26c-.07,1.18-.11,2.38-.13,3.6H44.14V61.4Z"/><path class="cls-1" d="M43.83,43.78H21q-.59,1.76-1.08,3.6H44.14v-3.6Z"/><path class="cls-1" d="M43.83,26.16h-12c-.5.49-1,1-1.46,1.5-.63.68-1.22,1.38-1.8,2.1H44.14v-3.6Z"/><polygon class="cls-1" points="43.83 175.91 17.69 175.91 17.69 179.51 43.83 179.51 44.14 179.51 44.14 175.91 43.83 175.91"/><polygon class="cls-1" points="43.83 158.29 17.69 158.29 17.69 161.89 43.83 161.89 44.14 161.89 44.14 158.29 43.83 158.29"/><polygon class="cls-1" points="43.83 140.67 17.69 140.67 17.69 144.27 43.83 144.27 44.14 144.27 44.14 140.67 43.83 140.67"/><polygon class="cls-1" points="43.83 123.06 17.69 123.06 17.69 126.66 43.83 126.66 44.14 126.66 44.14 123.06 43.83 123.06"/><polygon class="cls-1" points="43.83 105.44 17.69 105.44 17.69 109.04 43.83 109.04 44.14 109.04 44.14 105.44 43.83 105.44"/><polygon class="cls-1" points="43.83 167.1 17.69 167.1 17.69 170.7 43.83 170.7 44.14 170.7 44.14 167.1 43.83 167.1"/><polygon class="cls-1" points="43.83 149.48 17.69 149.48 17.69 153.08 43.83 153.08 44.14 153.08 44.14 149.48 43.83 149.48"/><polygon class="cls-1" points="43.83 131.86 17.69 131.86 17.69 135.46 43.83 135.46 44.14 135.46 44.14 131.86 43.83 131.86"/><polygon class="cls-1" points="43.83 114.25 17.69 114.25 17.69 117.85 43.83 117.85 44.14 117.85 44.14 114.25 43.83 114.25"/><polygon class="cls-1" points="43.83 96.63 17.69 96.63 17.69 100.23 43.83 100.23 44.14 100.23 44.14 96.63 43.83 96.63"/><path class="cls-1" d="M43.83,228.76H41.58c.83.42,1.69.81,2.56,1.18v-1.18Z"/><path class="cls-1" d="M43.83,211.14H24c.65,1.24,1.34,2.45,2.09,3.6H44.14v-3.6Z"/><path class="cls-1" d="M43.83,193.53H18.51c.18,1.22.4,2.42.64,3.6h25v-3.6Z"/><path class="cls-1" d="M43.83,220H30.05c.11.13.22.27.34.39a38.77,38.77,0,0,0,3.33,3.21H44.14V220Z"/><path class="cls-1" d="M43.83,202.33H20.44c.36,1.23.76,2.44,1.2,3.6h22.5v-3.6Z"/><path class="cls-1" d="M43.83,184.72H17.75c0,1.22.11,2.41.2,3.6H44.14v-3.6Z"/><rect class="cls-1" x="220.62" y="70.21" width="10.86" height="3.6"/><path class="cls-1" d="M220.62,52.59v3.6h10.17c-.15-1.23-.32-2.43-.53-3.6Z"/><path class="cls-1" d="M220.62,35v3.6H226q-.85-1.86-1.83-3.6Z"/><path class="cls-1" d="M220.62,61.4V65h10.82c0-1.22-.08-2.43-.15-3.6Z"/><path class="cls-1" d="M220.62,43.78v3.6h8.51c-.32-1.24-.68-2.43-1.07-3.6Z"/><path class="cls-1" d="M220.62,29.76h.11l-.11-.15Z"/><rect class="cls-1" x="220.31" y="70.21" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="52.59" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="61.4" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="43.78" width="0.31" height="3.6"/><path class="cls-1" d="M220.31,29.25v.51h.31v-.15Z"/><path class="cls-1" d="M175.63,91.42c-1-1.24-1.83-2.44-2.59-3.6H135.28c.36,1.22.75,2.42,1.18,3.6Z"/><path class="cls-1" d="M132.66,73.8H167c-.27-1.18-.47-2.38-.63-3.59H132.53V72C132.57,72.58,132.61,73.2,132.66,73.8Z"/><polygon class="cls-1" points="220.01 70.2 199.67 70.2 199.67 73.81 220.01 73.81 220.31 73.81 220.31 70.2 220.01 70.2"/><path class="cls-1" d="M133.06,56.19h34a19.31,19.31,0,0,1,1.31-3.6H133.6C133.39,53.76,133.22,55,133.06,56.19Z"/><path class="cls-1" d="M220,52.59H197.34a21.07,21.07,0,0,1,1.29,3.6h21.68v-3.6Z"/><path class="cls-1" d="M220,35H139.92c-.68,1.16-1.32,2.36-1.91,3.6h82.3V35Z"/><path class="cls-1" d="M211,21a41.51,41.51,0,0,0-7.25-3.6H161a43.55,43.55,0,0,0-7.42,3.6Z"/><path class="cls-1" d="M134,82.61h36.13c-.57-1.18-1.1-2.38-1.55-3.6H133.29Q133.57,80.84,134,82.61Z"/><path class="cls-1" d="M166,65v0c0-1.26.06-2.43.16-3.57H132.56l0,.63v3Z"/><path class="cls-1" d="M220,61.4H199.48c.1,1.14.16,2.33.18,3.6h20.65V61.4Z"/><path class="cls-1" d="M220,43.78H135.88q-.6,1.76-1.11,3.6h37.8q4-2.9,10.28-2.9a16.93,16.93,0,0,1,10.23,2.9h27.23v-3.6Z"/><path class="cls-1" d="M219.1,27.8c-.5-.56-1-1.11-1.55-1.64H146.84c-.55.53-1.09,1.08-1.61,1.64s-1.14,1.29-1.69,2h76.77v-.51C219.92,28.76,219.52,28.27,219.1,27.8Z"/><path class="cls-1" d="M132.53,70.21h-.08c0,.58.05,1.17.08,1.76Z"/><path class="cls-1" d="M132.53,65V62c-.05,1-.09,2-.11,3Z"/><path class="cls-1" d="M185,140.67h-7.74c1.28,1.23,2.51,2.43,3.65,3.6h.49Z"/><path class="cls-1" d="M202.6,123.06H158.32q1.76,1.77,3.64,3.6h37Z"/><path class="cls-1" d="M192.69,109q-2.07-1.85-3.94-3.6H143.62q1.19,1.77,2.53,3.6Z"/><path class="cls-1" d="M193.79,131.86H167.55l2.15,1.93c.65.56,1.26,1.12,1.89,1.67h18.6Z"/><path class="cls-1" d="M202.46,117.85q-1.87-1.78-3.89-3.6H150.26q1.5,1.77,3.15,3.6Z"/><path class="cls-1" d="M140.45,100.23h43c-1.2-1.23-2.34-2.43-3.4-3.6H138.62Q139.48,98.46,140.45,100.23Z"/><rect class="cls-1" x="313.45" y="70.21" width="31.81" height="3.6"/><path class="cls-1" d="M311.11,52.59a20.25,20.25,0,0,1,1.3,3.6h32.16c-.16-1.23-.33-2.43-.53-3.6Z"/><path class="cls-1" d="M308.7,35v3.6h31.11c-.57-1.24-1.18-2.44-1.84-3.6Z"/><path class="cls-1" d="M324.75,21a42,42,0,0,0-7.26-3.6H308.7V21Z"/><path class="cls-1" d="M313.26,61.4c.1,1.14.16,2.33.18,3.6h31.78c0-1.22-.08-2.43-.16-3.6Z"/><path class="cls-1" d="M308.7,43.78v3.6h34.21c-.32-1.24-.68-2.43-1.07-3.6Z"/><path class="cls-1" d="M308.7,29.76h25.8c-.52-.67-1.06-1.32-1.62-2s-1-1.11-1.56-1.64H308.7Z"/><rect class="cls-1" x="308.4" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="308.4" y="17.35" width="0.31" height="3.6"/><rect class="cls-1" x="308.4" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="308.4" y="26.16" width="0.31" height="3.6"/><polygon class="cls-1" points="308.7 114.25 308.7 117.27 311.73 114.25 308.7 114.25"/><polygon class="cls-1" points="308.4 114.25 308.4 117.58 308.7 117.27 308.7 114.25 308.4 114.25"/><path class="cls-1" d="M289.41,91.42q-1.44-1.86-2.6-3.6H249.05c.37,1.22.76,2.42,1.19,3.6Z"/><path class="cls-1" d="M280.77,73.8c-.26-1.18-.47-2.38-.62-3.59H246.23c0,1.21.11,2.41.21,3.59Z"/><path class="cls-1" d="M246.84,56.19h34a20.05,20.05,0,0,1,1.32-3.6H247.38Q247.07,54.35,246.84,56.19Z"/><path class="cls-1" d="M308.09,35H253.7c-.68,1.16-1.32,2.36-1.91,3.6H308.4V35Z"/><path class="cls-1" d="M308.09,21h.31v-3.6H274.81a43.19,43.19,0,0,0-7.42,3.6Z"/><path class="cls-1" d="M283.86,82.61c-.57-1.18-1.1-2.38-1.56-3.6H247.07c.19,1.22.4,2.42.65,3.6Z"/><path class="cls-1" d="M279.81,65v0c0-1.26.06-2.43.15-3.57H246.34c-.07,1.17-.12,2.38-.14,3.6Z"/><path class="cls-1" d="M308.09,43.78H249.66c-.4,1.17-.78,2.37-1.11,3.6h37.8q3.94-2.9,10.28-2.9a17,17,0,0,1,10.23,2.9h1.54v-3.6Z"/><path class="cls-1" d="M308.09,26.16H260.62c-.55.53-1.09,1.08-1.61,1.64s-1.15,1.29-1.69,2H308.4v-3.6Z"/><path class="cls-1" d="M302.92,123.06H272.09q1.76,1.77,3.64,3.6h23.59Z"/><path class="cls-1" d="M306.46,109q-2.06-1.85-3.94-3.6H257.4c.78,1.18,1.63,2.38,2.53,3.6Z"/><path class="cls-1" d="M294.11,131.86H281.32l2.16,1.93,1.9,1.67h5.13Z"/><path class="cls-1" d="M308.09,114.25H264c1,1.18,2,2.38,3.14,3.6h40.95l.27-.27v-3.33Z"/><path class="cls-1" d="M254.22,100.23h43q-1.81-1.85-3.4-3.6h-41.4C253,97.85,253.58,99.05,254.22,100.23Z"/><polygon class="cls-1" points="456.02 91.42 456.52 87.82 428.53 87.82 427.94 91.42 456.02 91.42"/><polygon class="cls-1" points="431.4 70.2 430.81 73.81 458.47 73.81 458.97 70.2 431.4 70.2"/><polygon class="cls-1" points="434.27 52.59 433.68 56.19 460.91 56.19 461.18 54.27 461.63 54.27 461.63 52.59 434.27 52.59"/><polygon class="cls-1" points="437.14 34.97 436.55 38.57 461.63 38.57 461.63 34.97 437.14 34.97"/><polygon class="cls-1" points="461.63 20.95 461.63 17.35 440.01 17.35 439.42 20.95 461.63 20.95"/><polygon class="cls-1" points="429.97 79.01 429.38 82.61 457.25 82.61 457.74 79.01 429.97 79.01"/><polygon class="cls-1" points="432.83 61.4 432.25 65 459.69 65 460.19 61.4 432.83 61.4"/><polygon class="cls-1" points="435.7 43.78 435.12 47.38 461.63 47.38 461.63 43.78 435.7 43.78"/><polygon class="cls-1" points="438.57 26.16 437.99 29.76 461.63 29.76 461.63 26.16 438.57 26.16"/><polygon class="cls-1" points="461.63 179.51 461.63 175.91 414.19 175.91 413.6 179.51 461.63 179.51"/><polygon class="cls-1" points="417.06 158.29 416.47 161.89 461.63 161.89 461.63 160.09 446.5 160.09 446.75 158.29 417.06 158.29"/><polygon class="cls-1" points="419.92 140.67 419.34 144.27 448.69 144.27 449.19 140.67 419.92 140.67"/><polygon class="cls-1" points="422.79 123.06 422.21 126.66 451.13 126.66 451.63 123.06 422.79 123.06"/><polygon class="cls-1" points="425.66 105.44 425.08 109.04 453.58 109.04 454.08 105.44 425.66 105.44"/><polygon class="cls-1" points="415.62 167.1 415.04 170.7 461.63 170.7 461.63 167.1 415.62 167.1"/><polygon class="cls-1" points="418.49 149.48 417.9 153.08 447.47 153.08 447.97 149.48 418.49 149.48"/><polygon class="cls-1" points="421.36 131.86 420.77 135.46 449.91 135.46 450.41 131.86 421.36 131.86"/><polygon class="cls-1" points="424.23 114.25 423.64 117.85 452.36 117.85 452.86 114.25 424.23 114.25"/><polygon class="cls-1" points="427.1 96.63 426.51 100.23 454.8 100.23 455.3 96.63 427.1 96.63"/><polygon class="cls-1" points="405.58 228.76 405.21 231.05 436.4 231.05 436.74 228.76 405.58 228.76"/><polygon class="cls-1" points="408.45 211.14 407.86 214.74 438.78 214.74 439.31 211.14 408.45 211.14"/><polygon class="cls-1" points="411.32 193.53 410.73 197.13 441.36 197.13 441.88 193.53 411.32 193.53"/><polygon class="cls-1" points="407.01 219.95 406.43 223.55 437.5 223.55 438.02 219.95 407.01 219.95"/><polygon class="cls-1" points="409.88 202.33 409.3 205.93 440.07 205.93 440.6 202.33 409.88 202.33"/><polygon class="cls-1" points="412.75 184.72 412.17 188.31 461.63 188.31 461.63 184.72 412.75 184.72"/><rect class="cls-1" x="572.96" y="34.97" width="13.46" height="3.6"/><rect class="cls-1" x="572.96" y="17.35" width="13.46" height="3.6"/><rect class="cls-1" x="572.96" y="43.78" width="13.46" height="3.6"/><rect class="cls-1" x="572.96" y="26.16" width="13.46" height="3.6"/><rect class="cls-1" x="572.65" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="17.35" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="26.16" width="0.31" height="3.6"/><rect class="cls-1" x="572.96" y="123.06" width="13.46" height="3.6"/><path class="cls-1" d="M573,108.71V109h13.46v-.54a35.82,35.82,0,0,1-3.83.21Z"/><rect class="cls-1" x="572.96" y="131.86" width="13.46" height="3.6"/><rect class="cls-1" x="572.96" y="114.25" width="13.46" height="3.6"/><rect class="cls-1" x="572.65" y="123.06" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="108.71" width="0.31" height="0.33"/><rect class="cls-1" x="572.65" y="131.86" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="114.25" width="0.31" height="3.6"/><rect class="cls-1" x="536.71" y="87.82" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="70.21" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="52.59" width="33.64" height="3.6"/><polygon class="cls-1" points="572.35 34.97 536.71 34.97 536.71 38.57 572.35 38.57 572.65 38.57 572.65 34.97 572.35 34.97"/><polygon class="cls-1" points="572.35 20.95 572.65 20.95 572.65 17.35 572.35 17.35 536.71 17.35 536.71 20.95 572.35 20.95"/><rect class="cls-1" x="536.71" y="79.01" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="61.4" width="33.64" height="3.6"/><polygon class="cls-1" points="572.35 43.78 536.71 43.78 536.71 47.38 572.35 47.38 572.65 47.38 572.65 43.78 572.35 43.78"/><polygon class="cls-1" points="572.35 26.16 536.71 26.16 536.71 29.76 572.35 29.76 572.65 29.76 572.65 26.16 572.35 26.16"/><rect class="cls-1" x="536.71" y="175.91" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="158.29" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="140.67" width="33.64" height="3.6"/><polygon class="cls-1" points="572.35 123.06 536.71 123.06 536.71 126.66 572.35 126.66 572.65 126.66 572.65 123.06 572.35 123.06"/><polygon class="cls-1" points="570.36 108.71 570.36 105.44 536.71 105.44 536.71 109.04 572.35 109.04 572.65 109.04 572.65 108.71 570.36 108.71"/><rect class="cls-1" x="536.71" y="167.1" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="149.48" width="33.64" height="3.6"/><polygon class="cls-1" points="572.35 131.86 536.71 131.86 536.71 135.46 572.35 135.46 572.65 135.46 572.65 131.86 572.35 131.86"/><polygon class="cls-1" points="572.35 114.25 536.71 114.25 536.71 117.85 572.35 117.85 572.65 117.85 572.65 114.25 572.35 114.25"/><rect class="cls-1" x="536.71" y="96.63" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="228.76" width="33.64" height="2.29"/><rect class="cls-1" x="536.71" y="211.14" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="193.53" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="219.95" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="202.33" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="184.72" width="33.64" height="3.6"/><rect class="cls-1" x="685.66" y="87.82" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="70.21" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="52.59" width="16.98" height="3.6"/><rect class="cls-1" x="661.05" y="34.97" width="41.6" height="3.6"/><rect class="cls-1" x="661.05" y="17.35" width="41.6" height="3.6"/><rect class="cls-1" x="685.66" y="79.01" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="61.4" width="16.98" height="3.6"/><rect class="cls-1" x="661.05" y="43.78" width="41.6" height="3.6"/><rect class="cls-1" x="661.05" y="26.16" width="41.6" height="3.6"/><rect class="cls-1" x="660.74" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="660.74" y="17.35" width="0.31" height="3.6"/><rect class="cls-1" x="660.74" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="660.74" y="26.16" width="0.31" height="3.6"/><rect class="cls-1" x="685.66" y="175.91" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="158.29" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="140.67" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="123.06" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="105.44" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="167.1" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="149.48" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="131.86" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="114.25" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="96.63" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="228.76" width="16.98" height="2.29"/><rect class="cls-1" x="685.66" y="211.14" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="193.53" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="219.95" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="202.33" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="184.72" width="16.98" height="3.6"/><polygon class="cls-1" points="660.43 34.97 650.49 34.97 650.49 38.57 660.43 38.57 660.74 38.57 660.74 34.97 660.43 34.97"/><polygon class="cls-1" points="660.43 20.95 660.74 20.95 660.74 17.35 660.43 17.35 650.49 17.35 650.49 20.95 660.43 20.95"/><polygon class="cls-1" points="660.43 43.78 650.49 43.78 650.49 47.38 660.43 47.38 660.74 47.38 660.74 43.78 660.43 43.78"/><polygon class="cls-1" points="660.43 26.16 650.49 26.16 650.49 29.76 660.43 29.76 660.74 29.76 660.74 26.16 660.43 26.16"/><rect class="cls-1" x="770.69" y="87.82" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="70.21" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="52.59" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="34.97" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="17.35" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="79.01" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="61.4" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="43.78" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="26.16" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="175.91" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="158.29" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="140.67" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="123.06" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="105.44" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="167.1" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="149.48" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="131.86" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="114.25" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="96.63" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="228.76" width="16.37" height="2.29"/><rect class="cls-1" x="770.69" y="211.14" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="193.53" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="219.95" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="202.33" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="184.72" width="16.37" height="3.6"/><path class="cls-1" d="M864.85,87.82H837.22v3.6h30.23Q866,89.56,864.85,87.82Z"/><path class="cls-1" d="M858.82,73.8c-.26-1.18-.47-2.38-.62-3.59h-21V73.8Z"/><rect class="cls-1" x="891.5" y="70.21" width="31.81" height="3.6"/><path class="cls-1" d="M889.16,52.59a20.25,20.25,0,0,1,1.3,3.6h32.16c-.16-1.23-.33-2.43-.53-3.6Z"/><path class="cls-1" d="M858.87,56.19a19.31,19.31,0,0,1,1.31-3.6h-23v3.6Z"/><path class="cls-1" d="M837.22,35v3.6h80.63c-.57-1.24-1.18-2.44-1.84-3.6Z"/><path class="cls-1" d="M902.79,21a42.22,42.22,0,0,0-7.25-3.6H852.86a43.19,43.19,0,0,0-7.42,3.6Z"/><path class="cls-1" d="M837.22,79v3.6h24.69a38,38,0,0,1-1.56-3.6Z"/><path class="cls-1" d="M857.86,65v0c0-1.26.06-2.43.15-3.57H837.22V65Z"/><path class="cls-1" d="M891.31,61.4c.1,1.14.16,2.33.18,3.6h31.78c0-1.22-.08-2.43-.16-3.6Z"/><path class="cls-1" d="M837.22,43.78v3.6H864.4q3.95-2.9,10.28-2.9a17,17,0,0,1,10.23,2.9H921c-.32-1.24-.69-2.43-1.08-3.6Z"/><path class="cls-1" d="M837.22,27.64v2.12h75.32c-.52-.67-1.06-1.32-1.62-2s-1-1.11-1.56-1.64H838.67C838.17,26.64,837.69,27.13,837.22,27.64Z"/><rect class="cls-1" x="836.91" y="87.82" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="70.21" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="52.59" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="79.01" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="61.4" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="43.78" width="0.31" height="3.6"/><path class="cls-1" d="M837.06,27.8l-.15.17v1.79h.31V27.64Z"/><path class="cls-1" d="M869.08,140.67l.52.49.49-.49Z"/><path class="cls-1" d="M850.14,123.06q1.75,1.77,3.64,3.6h30.33l3.6-3.6Z"/><path class="cls-1" d="M837.22,105.44V108c.24.35.5.69.76,1h46.53q-2.06-1.85-3.94-3.6Z"/><path class="cls-1" d="M859.37,131.86l2.16,1.93,1.9,1.67H875.3l3.6-3.6Z"/><path class="cls-1" d="M845.23,117.85h47.69l.66-.66q-1.55-1.47-3.18-2.94H842.09C843.08,115.43,844.14,116.63,845.23,117.85Z"/><path class="cls-1" d="M837.22,96.63v3.6h38q-1.82-1.85-3.4-3.6Z"/><path class="cls-1" d="M836.91,105.44v2.13c.1.14.2.29.31.43v-2.56Z"/><rect class="cls-1" x="836.91" y="96.63" width="0.31" height="3.6"/><path class="cls-1" d="M836.61,87.82H827.1c.37,1.22.76,2.42,1.19,3.6h8.62v-3.6Z"/><path class="cls-1" d="M836.61,73.8h.3V70.21H824.28c0,1.21.11,2.41.21,3.59Z"/><path class="cls-1" d="M836.91,56.19v-3.6H825.43q-.31,1.75-.54,3.6h12Z"/><path class="cls-1" d="M836.61,35h-4.86c-.68,1.16-1.32,2.36-1.91,3.6h7.07V35Z"/><path class="cls-1" d="M836.61,79H825.12c.19,1.22.4,2.42.66,3.6h11.13V79Z"/><path class="cls-1" d="M836.61,65h.3V61.4H824.39c-.07,1.17-.12,2.38-.14,3.6Z"/><path class="cls-1" d="M836.61,43.78h-8.9c-.4,1.17-.78,2.37-1.11,3.6h10.31v-3.6Z"/><path class="cls-1" d="M835.37,29.76h1.54V28C836.38,28.55,835.87,29.15,835.37,29.76Z"/><path class="cls-1" d="M836.61,105.44h-1.16c.46.7.95,1.41,1.46,2.13v-2.13Z"/><path class="cls-1" d="M836.61,96.63h-6.16c.57,1.22,1.18,2.42,1.82,3.6h4.64v-3.6Z"/><rect class="cls-1" x="969.49" y="87.82" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="70.21" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="52.59" width="16.82" height="3.6"/><rect class="cls-1" x="934.32" y="34.97" width="52" height="3.6"/><rect class="cls-1" x="934.32" y="17.35" width="52" height="3.6"/><rect class="cls-1" x="969.49" y="79.01" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="61.4" width="16.82" height="3.6"/><rect class="cls-1" x="934.32" y="43.78" width="52" height="3.6"/><rect class="cls-1" x="934.32" y="26.16" width="52" height="3.6"/><rect class="cls-1" x="969.49" y="175.91" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="158.29" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="140.67" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="123.06" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="105.44" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="167.1" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="149.48" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="131.86" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="114.25" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="96.63" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="228.76" width="16.82" height="2.29"/><rect class="cls-1" x="969.49" y="211.14" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="193.53" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="219.95" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="202.33" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="184.72" width="16.82" height="3.6"/></svg>  
+
+</div>
\ No newline at end of file
diff --git a/svg-loader/src/script.js b/svg-loader/src/script.js
new file mode 100644
index 0000000..e229fb5
--- /dev/null
+++ b/svg-loader/src/script.js
@@ -0,0 +1,43 @@
+var elemets = document.querySelector('svg').children;
+
+let lines = document.querySelectorAll('.cls-1');
+
+var tl = gsap.timeline({delay: 1, repeat: -1, yoyo: true});
+
+tl.from('.cls-1', {
+  x: '300px',
+  // duration: .05,
+  stagger:.01,
+  duration: 1,
+  opacity: 0,
+  // fill: "yellow"
+})
+tl.to('.cls-1', {
+  // fill:'yellow',
+  duration: 1,
+  
+}, '<')
+
+let colors = ['#4cc9f0', '#4895ef', '#4361ee', '#3f37c9', '#3a0ca3'];
+
+// let colors = ['#4cc9f0', '#4895ef', '#4361ee', '#3f37c9', '#3a0ca3', "orange"];
+
+// let colors = ['#00377e', '#002d67',"#002657"]
+
+function getRandomInt(max) {
+  return Math.floor(Math.random() * Math.floor(max));
+  
+}
+ 
+
+
+
+var intervalID = window.setInterval(myCallback, 500);
+
+function myCallback() {
+  lines.forEach((element) => {
+  let newColor = colors[getRandomInt(colors.length)]  
+    $( element ).css( "fill", newColor );
+  });
+}  
+
diff --git a/svg-loader/src/style.scss b/svg-loader/src/style.scss
new file mode 100644
index 0000000..53ccf80
--- /dev/null
+++ b/svg-loader/src/style.scss
@@ -0,0 +1,26 @@
+body{
+  font-family: 'Lato', sans-serif;
+}
+
+.container{
+  width: 100vw;
+  height: 100vh;
+  background: #232323;
+  background:#fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+svg{
+  fill:#F6EF03;
+  fill:#00AEEF;
+  fill: #fff;
+  fill:#000;
+  width: 60%;
+}
+
+
+.cls-1{
+  fill:#000;
+}
diff --git a/svg-scribblemation/README.markdown b/svg-scribblemation/README.markdown
new file mode 100644
index 0000000..6a20bf6
--- /dev/null
+++ b/svg-scribblemation/README.markdown
@@ -0,0 +1,5 @@
+# SVG Scribblemation
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cobra_winfrey/pen/XWpGZYb](https://codepen.io/cobra_winfrey/pen/XWpGZYb).
+
+
diff --git a/svg-scribblemation/dist/index.html b/svg-scribblemation/dist/index.html
new file mode 100644
index 0000000..1252f5a
--- /dev/null
+++ b/svg-scribblemation/dist/index.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - SVG Scribblemation</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id='wrap'>
+  <div class='overlay'></div>
+  <div class='inner'>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+  </div>
+  <div class='inner'>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+    <svg data-name='Layer 1' id='Layer_1' viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
+      <path class='squig' d='M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 '></path>
+    </svg>
+  </div>
+</div>
+<div id='controls'>
+  <div class='control'>
+    <input class='slider' id='speed' max='2' min='0' step='0.005' type='range' value='0.5'>
+  </div>
+  <div class='control'>
+    <input class='slider' id='delay' max='2' min='0' step='0.0125' type='range' value='1.5'>
+  </div>
+  <div class='control'>
+    <input class='slider' id='width' type='checkbox'>
+  </div>
+  <div class='control'>
+    <input class='slider' id='easing' type='checkbox'>
+  </div>
+  <div class='control'>
+    <input class='slider' id='left' max='2' min='0' step='0.0125' type='range' value='1'>
+  </div>
+  <div class='control'>
+    <input class='slider' id='right' max='2' min='0' step='0.0125' type='range' value='1'>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/svg-scribblemation/dist/script.js b/svg-scribblemation/dist/script.js
new file mode 100644
index 0000000..ab13676
--- /dev/null
+++ b/svg-scribblemation/dist/script.js
@@ -0,0 +1,27 @@
+const body = document.body;
+const speed = document.getElementById("speed");
+const delay = document.getElementById("delay");
+const width = document.getElementById("width");
+const easing = document.getElementById("easing");
+const left = document.getElementById("left");
+const right = document.getElementById("right");
+
+body.querySelectorAll(".slider").forEach(slider => { 
+slider.addEventListener('input', e => {
+  body.style.setProperty("--speed", speed.value);
+  body.style.setProperty("--delay", delay.value);
+  body.style.setProperty("--left", left.value);
+  body.style.setProperty("--right", right.value);
+  if (easing.checked === true){
+    body.style.setProperty("--easing", "cubic-bezier(0.85, 0.5, 0.5, 1.25)");
+  }else{
+    body.style.setProperty("--easing", "linear");
+  }
+  if (width.checked === true){
+    body.style.setProperty("--width", 2);
+  }else{
+    body.style.setProperty("--width", 1);
+  }
+  
+  });
+});
\ No newline at end of file
diff --git a/svg-scribblemation/dist/style.css b/svg-scribblemation/dist/style.css
new file mode 100644
index 0000000..9df5c42
--- /dev/null
+++ b/svg-scribblemation/dist/style.css
@@ -0,0 +1,443 @@
+@import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap");
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: #000;
+  --speed:0.5;
+  --delay:1.5;
+  --width:2;
+  --left:1;
+  --right:1;
+  --easing: linear;
+  overflow: hidden;
+  font-family: "Major Mono Display";
+}
+body:before, body:after {
+  content: "";
+  position: absolute;
+  width: 400px;
+  height: 400px;
+  top: calc(50% - 235px);
+  left: calc(50% - 200px);
+  z-index: 1;
+  border-radius: 10px;
+  box-shadow: inset 0 0 0 2px blue, 0 20px 80px -20px #000066;
+}
+body:after {
+  z-index: 2;
+  box-shadow: inset 0 0 0 2px #ffff66;
+  -webkit-mask: linear-gradient(to bottom, transparent, #000);
+          mask: linear-gradient(to bottom, transparent, #000);
+}
+body #controls {
+  position: absolute;
+  top: calc(50% + 250px);
+  z-index: 9;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  width: 400px;
+  left: calc(50% - 200px);
+}
+body #controls input {
+  outline: none;
+  cursor: pointer;
+  transition: 0.5s ease-in-out;
+  opacity: 0.5;
+}
+body #controls input:hover {
+  opacity: 0.75;
+}
+body #controls .control {
+  box-sizing: border-box;
+  width: 50%;
+  padding: 0px 10px 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+body #controls .control:before {
+  position: absolute;
+  top: -30px;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  color: #ffff99;
+  font-size: 12px;
+  letter-spacing: 2px;
+  font-weight: 900;
+}
+body #controls .control:first-of-type:before {
+  content: "duration";
+}
+body #controls .control:nth-of-type(2):before {
+  content: "delay";
+}
+body #controls .control:nth-of-type(3):before {
+  content: "iterations++";
+}
+body #controls .control:nth-of-type(4):before {
+  content: "alt easing";
+}
+body #controls .control:nth-of-type(5) {
+  left: -175px;
+}
+body #controls .control:nth-of-type(5):before {
+  content: "left modifier";
+}
+body #controls .control:nth-of-type(6) {
+  right: -175px;
+}
+body #controls .control:nth-of-type(6):before {
+  content: "right modifier";
+}
+body #controls .control:nth-of-type(5), body #controls .control:nth-of-type(6) {
+  top: -400px;
+}
+body #controls .control:nth-of-type(5) input, body #controls .control:nth-of-type(6) input {
+  transform: rotate(90deg);
+}
+body #controls .control:nth-of-type(5):before, body #controls .control:nth-of-type(6):before {
+  width: 100px;
+  top: -150px;
+  left: 50px;
+}
+body #controls input[type=range] {
+  -webkit-appearance: none;
+  background: transparent;
+  width: 100%;
+}
+body #controls input[type=checkbox] {
+  width: 20px;
+  height: 20px;
+  position: relative;
+  background: transparent;
+  color: transparent;
+  -webkit-appearance: none;
+}
+body #controls input[type=checkbox]:checked:before {
+  box-shadow: 0 0 0 1.5px #ffff99, inset 0 0 0 4px #000;
+}
+body #controls input[type=checkbox]:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 0 0 1.5px #ffff99, inset 0 0 0 20px #000;
+  background: linear-gradient(45deg, transparent calc(50% - 2px), blue calc(50% - 2px), blue calc(50% + 2px), transparent calc(50% + 2px)), linear-gradient(-45deg, #000 calc(50% - 2px), blue calc(50% - 2px), blue calc(50% + 2px), #000 calc(50% + 2px));
+}
+body #controls input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+}
+body #controls input[type=range]:focus {
+  outline: none;
+}
+body #controls input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 15px;
+  width: 15px;
+  border-radius: 50px;
+  cursor: pointer;
+  margin-top: -6px;
+  background: blue;
+  box-shadow: 0 0 0 3px #000;
+}
+body #controls input[type=range]::-webkit-slider-runnable-track, body #controls input[type=range]:focus::-webkit-slider-runnable-track {
+  height: 2px;
+  cursor: pointer;
+  background: #ffff99;
+  border-radius: 25px;
+  outline: none;
+}
+body #wrap {
+  position: absolute;
+  width: 200px;
+  height: 400px;
+  transform: translateY(calc(((var(--width) - 1) * -10%) - 50px)) scale(calc(((var(--width) - 1)/-2) + 1));
+  background: #000;
+  box-shadow: 0 0 0 100vw #000;
+  pointer-events: none;
+}
+body #wrap .overlay {
+  content: "";
+  position: absolute;
+  width: calc(var(--width) * 120%);
+  height: calc(var(--width) * 120%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: linear-gradient(to bottom, red, blue, yellow);
+  mix-blend-mode: darken;
+  z-index: 9;
+}
+body #wrap:before, body #wrap:after {
+  content: "";
+  position: absolute;
+  width: 25px;
+  height: 200px;
+  -webkit-mask: radial-gradient(circle at left, transparent 20%, #000 20%, #000 calc(20% + 2px), transparent 10px) 0px 0px/40px 40px;
+  right: -25px;
+  top: 110px;
+  background: #fff;
+  transform: translate(calc((var(--width) - 1) * 112.5px), calc((var(--width) - 1) * 90px)) scale(var(--width));
+}
+body #wrap:after {
+  right: auto;
+  left: -25px;
+  -webkit-mask: radial-gradient(circle at right, transparent 20%, #000 20%, #000 calc(20% + 2px), transparent 10px) 25px 0px/40px 40px;
+  transform: translate(calc((var(--width) - 1) * -112.5px), calc((var(--width) - 1) * 90px)) scale(var(--width));
+}
+body .inner {
+  position: absolute;
+  width: calc(100px * var(--width));
+  height: calc(100% * var(--width));
+  transform: translate(calc((var(--width) - 1) * -100px), calc((var(--width) - 1) * -20px));
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  background: #000;
+}
+body .inner:nth-of-type(2) {
+  left: auto;
+  right: 0;
+  transform: translate(calc((var(--width) - 1) * 100px), calc(20px + ((var(--width) - 1) * -200px))) scaleY(-1);
+}
+body .inner:nth-of-type(2) svg:nth-of-type(1) {
+  -webkit-animation-delay: calc(((-0.1428571429s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-0.1428571429s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(1) path {
+  -webkit-animation-delay: calc(((-0.1428571429s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-0.1428571429s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(2) {
+  -webkit-animation-delay: calc(((-0.2857142857s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-0.2857142857s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(2) path {
+  -webkit-animation-delay: calc(((-0.2857142857s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-0.2857142857s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(3) {
+  -webkit-animation-delay: calc(((-0.4285714286s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-0.4285714286s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(3) path {
+  -webkit-animation-delay: calc(((-0.4285714286s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-0.4285714286s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(4) {
+  -webkit-animation-delay: calc(((-0.5714285714s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-0.5714285714s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(4) path {
+  -webkit-animation-delay: calc(((-0.5714285714s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-0.5714285714s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(5) {
+  -webkit-animation-delay: calc(((-0.7142857143s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-0.7142857143s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(5) path {
+  -webkit-animation-delay: calc(((-0.7142857143s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-0.7142857143s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(6) {
+  -webkit-animation-delay: calc(((-0.8571428571s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-0.8571428571s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(6) path {
+  -webkit-animation-delay: calc(((-0.8571428571s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-0.8571428571s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(7) {
+  -webkit-animation-delay: calc(((-1s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-1s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(7) path {
+  -webkit-animation-delay: calc(((-1s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-1s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(8) {
+  -webkit-animation-delay: calc(((-1.1428571429s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-1.1428571429s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(8) path {
+  -webkit-animation-delay: calc(((-1.1428571429s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-1.1428571429s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(9) {
+  -webkit-animation-delay: calc(((-1.2857142857s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-1.2857142857s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(9) path {
+  -webkit-animation-delay: calc(((-1.2857142857s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-1.2857142857s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(10) {
+  -webkit-animation-delay: calc(((-1.4285714286s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-1.4285714286s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner:nth-of-type(2) svg:nth-of-type(10) path {
+  -webkit-animation-delay: calc(((-1.4285714286s / var(--speed)) * var(--delay)) * var(--right));
+          animation-delay: calc(((-1.4285714286s / var(--speed)) * var(--delay)) * var(--right));
+}
+body .inner svg {
+  position: absolute;
+  top: 0;
+  left: 0px;
+  height: 200px;
+  width: 200px;
+  -webkit-animation: flip calc(5s / var(--speed)) ease-in-out infinite;
+          animation: flip calc(5s / var(--speed)) ease-in-out infinite;
+}
+body .inner svg:nth-of-type(1) {
+  top: calc(20px * var(--width));
+  -webkit-animation-delay: calc(((-0.1428571429s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-0.1428571429s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(1) path {
+  -webkit-animation-delay: calc(((-0.1428571429s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-0.1428571429s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(2) {
+  top: calc(40px * var(--width));
+  -webkit-animation-delay: calc(((-0.2857142857s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-0.2857142857s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(2) path {
+  -webkit-animation-delay: calc(((-0.2857142857s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-0.2857142857s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(3) {
+  top: calc(60px * var(--width));
+  -webkit-animation-delay: calc(((-0.4285714286s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-0.4285714286s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(3) path {
+  -webkit-animation-delay: calc(((-0.4285714286s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-0.4285714286s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(4) {
+  top: calc(80px * var(--width));
+  -webkit-animation-delay: calc(((-0.5714285714s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-0.5714285714s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(4) path {
+  -webkit-animation-delay: calc(((-0.5714285714s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-0.5714285714s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(5) {
+  top: calc(100px * var(--width));
+  -webkit-animation-delay: calc(((-0.7142857143s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-0.7142857143s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(5) path {
+  -webkit-animation-delay: calc(((-0.7142857143s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-0.7142857143s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(6) {
+  top: calc(120px * var(--width));
+  -webkit-animation-delay: calc(((-0.8571428571s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-0.8571428571s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(6) path {
+  -webkit-animation-delay: calc(((-0.8571428571s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-0.8571428571s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(7) {
+  top: calc(140px * var(--width));
+  -webkit-animation-delay: calc(((-1s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-1s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(7) path {
+  -webkit-animation-delay: calc(((-1s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-1s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(8) {
+  top: calc(160px * var(--width));
+  -webkit-animation-delay: calc(((-1.1428571429s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-1.1428571429s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(8) path {
+  -webkit-animation-delay: calc(((-1.1428571429s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-1.1428571429s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(9) {
+  top: calc(180px * var(--width));
+  -webkit-animation-delay: calc(((-1.2857142857s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-1.2857142857s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(9) path {
+  -webkit-animation-delay: calc(((-1.2857142857s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-1.2857142857s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(10) {
+  top: calc(200px * var(--width));
+  -webkit-animation-delay: calc(((-1.4285714286s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-1.4285714286s / var(--speed)) * var(--delay)) * var(--left));
+}
+body .inner svg:nth-of-type(10) path {
+  -webkit-animation-delay: calc(((-1.4285714286s / var(--speed)) * var(--delay)) * var(--left));
+          animation-delay: calc(((-1.4285714286s / var(--speed)) * var(--delay)) * var(--left));
+}
+@-webkit-keyframes flip {
+  49.9999% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(-1);
+  }
+  100% {
+    transform: scaleY(-1);
+  }
+}
+@keyframes flip {
+  49.9999% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(-1);
+  }
+  100% {
+    transform: scaleY(-1);
+  }
+}
+body .inner svg path {
+  fill: transparent;
+  stroke: #fff;
+  stroke-width: calc(5px + ((var(--width) - 1) * 4px));
+  -webkit-animation: morph calc(2.5s / var(--speed)) var(--easing) infinite;
+          animation: morph calc(2.5s / var(--speed)) var(--easing) infinite;
+}
+@-webkit-keyframes morph {
+  25% {
+    d: path("M 0 200 C 100 200 20 280 100 280 C 200 280 130 200 210 200 C 280 200 210 120 300 120 C 380 120 320 200 400 200 ");
+  }
+  50% {
+    d: path("M 0 200 C 120 200 190 340 100 340 C 30 340 100 200 210 200 C 290 200 390 70 300 70 C 200 70 290 200 400 200 ");
+  }
+  75% {
+    d: path("M 0 200 C 100 200 20 280 100 280 C 200 280 130 200 210 200 C 280 200 210 120 300 120 C 380 120 320 200 400 200 ");
+  }
+  100% {
+    d: path("M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 ");
+  }
+}
+@keyframes morph {
+  25% {
+    d: path("M 0 200 C 100 200 20 280 100 280 C 200 280 130 200 210 200 C 280 200 210 120 300 120 C 380 120 320 200 400 200 ");
+  }
+  50% {
+    d: path("M 0 200 C 120 200 190 340 100 340 C 30 340 100 200 210 200 C 290 200 390 70 300 70 C 200 70 290 200 400 200 ");
+  }
+  75% {
+    d: path("M 0 200 C 100 200 20 280 100 280 C 200 280 130 200 210 200 C 280 200 210 120 300 120 C 380 120 320 200 400 200 ");
+  }
+  100% {
+    d: path("M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 ");
+  }
+}
\ No newline at end of file
diff --git a/svg-scribblemation/license.txt b/svg-scribblemation/license.txt
new file mode 100644
index 0000000..f47de62
--- /dev/null
+++ b/svg-scribblemation/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Adam Kuhn (https://codepen.io/cobra_winfrey/pen/XWpGZYb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/svg-scribblemation/src/index.haml b/svg-scribblemation/src/index.haml
new file mode 100644
index 0000000..417e8db
--- /dev/null
+++ b/svg-scribblemation/src/index.haml
@@ -0,0 +1,21 @@
+#wrap
+ .overlay
+ -2.times do
+  .inner
+   -10.times do
+    %svg#Layer_1{"data-name" => "Layer 1", :viewbox => "0 0 400 400", :xmlns => "http://www.w3.org/2000/svg"}
+     %path.squig{:d => "M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 "}
+ 
+#controls
+ .control
+  %input#speed.slider{:max => "2", :min => "0", :step => "0.005", :type => "range", :value => "0.5"}/
+ .control
+  %input#delay.slider{:max => "2", :min => "0", :step => "0.0125", :type => "range", :value => "1.5"}/
+ .control
+  %input#width.slider{:type => "checkbox"}
+ .control 
+  %input#easing.slider{:type => "checkbox"}
+ .control
+  %input#left.slider{:max => "2", :min => "0", :step => "0.0125", :type => "range", :value => "1"}/
+ .control
+  %input#right.slider{:max => "2", :min => "0", :step => "0.0125", :type => "range", :value => "1"}/
\ No newline at end of file
diff --git a/svg-scribblemation/src/script.js b/svg-scribblemation/src/script.js
new file mode 100644
index 0000000..ab13676
--- /dev/null
+++ b/svg-scribblemation/src/script.js
@@ -0,0 +1,27 @@
+const body = document.body;
+const speed = document.getElementById("speed");
+const delay = document.getElementById("delay");
+const width = document.getElementById("width");
+const easing = document.getElementById("easing");
+const left = document.getElementById("left");
+const right = document.getElementById("right");
+
+body.querySelectorAll(".slider").forEach(slider => { 
+slider.addEventListener('input', e => {
+  body.style.setProperty("--speed", speed.value);
+  body.style.setProperty("--delay", delay.value);
+  body.style.setProperty("--left", left.value);
+  body.style.setProperty("--right", right.value);
+  if (easing.checked === true){
+    body.style.setProperty("--easing", "cubic-bezier(0.85, 0.5, 0.5, 1.25)");
+  }else{
+    body.style.setProperty("--easing", "linear");
+  }
+  if (width.checked === true){
+    body.style.setProperty("--width", 2);
+  }else{
+    body.style.setProperty("--width", 1);
+  }
+  
+  });
+});
\ No newline at end of file
diff --git a/svg-scribblemation/src/style.scss b/svg-scribblemation/src/style.scss
new file mode 100644
index 0000000..019009c
--- /dev/null
+++ b/svg-scribblemation/src/style.scss
@@ -0,0 +1,280 @@
+@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');
+
+body{
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  height:100vh;
+  background:#000;
+  --speed:0.5;
+  --delay:1.5;
+  --width:2;
+  --left:1;
+  --right:1;
+  --easing: linear;
+  overflow:hidden;
+  font-family:'Major Mono Display';
+  &:before, &:after{
+        content:'';
+        position:absolute;
+        width:400px;
+        height:400px;
+        top:calc(50% - 235px);
+        left:calc(50% - 200px);
+        z-index:1;
+        border-radius:10px;
+        box-shadow:inset 0 0 0 2px blue, 0 20px 80px -20px darken(blue, 30%);
+      }
+  &:after{
+    z-index:2;
+    box-shadow:inset 0 0 0 2px lighten(yellow, 20%);
+    mask:linear-gradient(to bottom, transparent, #000);
+  }
+  #controls{
+    position:absolute;
+    top:calc(50% + 250px);
+    z-index:9;
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:space-around;
+    width:400px;
+    left:calc(50% - 200px);
+    input{
+      outline:none;
+      cursor:pointer;
+      transition:0.5s ease-in-out;
+      opacity:0.5;
+      &:hover{
+        opacity:0.75;
+      }
+    }
+    .control{
+      box-sizing:border-box;
+      width:50%;
+      padding:0px 10px 60px;
+      display:flex;
+      justify-content:center;
+      align-items:center;
+      position:relative;
+      &:before{
+        position:absolute;
+        top:-30px;
+        left:0;
+        width:100%;
+        text-align:center;
+        color:lighten(yellow, 30%);
+        font-size:12px;
+        letter-spacing:2px;
+        font-weight:900;
+      }
+      &:first-of-type{
+        &:before{
+          content:'duration';
+        }
+      }
+      &:nth-of-type(2){
+        &:before{
+          content:'delay';
+        }
+      }
+      &:nth-of-type(3){
+        &:before{
+          content:'iterations++';
+        }
+      }
+      &:nth-of-type(4){
+        &:before{
+          content:'alt easing';
+        }
+      }
+      &:nth-of-type(5){
+        left:-175px;
+        &:before{
+          content:'left modifier';
+        }
+      }
+      &:nth-of-type(6){
+        right:-175px;
+        &:before{
+          content:'right modifier';
+        }
+      }
+      &:nth-of-type(5), &:nth-of-type(6){
+        top:-400px;
+        input{
+          transform:rotate(90deg);
+        }
+        &:before{
+          width:100px;
+          top:-150px;
+          left:50px;
+        }
+      }
+    }
+    input[type=range] {
+        -webkit-appearance: none;
+        background: transparent;
+        width: 100%;
+      }
+    input[type=checkbox]{
+      width:20px;
+      height:20px;
+      position:relative;
+      background:transparent;
+      color:transparent;
+      -webkit-appearance: none;
+      &:checked{
+        &:before{
+            box-shadow:0 0 0 1.5px lighten(yellow, 30%), inset 0 0 0 4px #000;
+          }
+        }
+      &:before{
+        content:'';
+        position:absolute;
+        width:100%;
+        height:100%;
+        box-shadow:0 0 0 1.5px lighten(yellow, 30%), inset 0 0 0 20px #000;
+        background:linear-gradient(45deg, transparent calc(50% - 2px), blue calc(50% - 2px), blue calc(50% + 2px), transparent calc(50% + 2px)), linear-gradient(-45deg, #000 calc(50% - 2px), blue calc(50% - 2px), blue calc(50% + 2px), #000 calc(50% + 2px));
+        
+      }
+    }
+ 
+      input[type=range]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+      }
+
+      input[type=range]:focus {
+        outline: none;
+      }
+        input[type=range]::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          height: 15px;
+          width: 15px;
+          border-radius: 50px;
+          cursor: pointer;
+          margin-top: -6px;
+          background:blue;
+          box-shadow:0 0 0 3px #000;
+        }
+
+        input[type=range]::-webkit-slider-runnable-track, input[type=range]:focus::-webkit-slider-runnable-track {
+          height: 2px;
+          cursor: pointer;
+          background: lighten(yellow, 30%);
+          border-radius: 25px;
+          outline:none;
+        }
+  }
+  #wrap{
+    position:absolute;
+    width:200px;
+    height:400px;
+    transform:translateY(calc(((var(--width) - 1) * -10%) - 50px)) scale(calc(((var(--width) - 1)/-2) + 1));
+    background:#000;
+    box-shadow:0 0 0 100vw #000;
+    pointer-events:none;
+    .overlay{
+      content:'';
+      position:absolute;
+      width:calc(var(--width) * 120%);
+      height:calc(var(--width) * 120%);
+      top:50%;
+      left:50%;
+      transform:translate(-50%, -50%);
+      background:linear-gradient(to bottom, red, blue, yellow);
+      mix-blend-mode:darken;
+      z-index:9;
+    }
+    &:before, &:after{
+      content:'';
+      position:absolute;
+      width:25px;
+      height:200px;
+      -webkit-mask:radial-gradient(circle at left, transparent 20%, #000 20%, #000 calc(20% + 2px), transparent 10px) 0px 0px / 40px 40px;
+      right:-25px;
+      top:110px;
+      background:#fff;
+      transform:translate(calc((var(--width) - 1) * 112.5px), calc((var(--width) - 1) * 90px)) scale(var(--width));
+    }
+    &:after{
+      right:auto;
+      left:-25px;
+      -webkit-mask:radial-gradient(circle at right, transparent 20%, #000 20%, #000 calc(20% + 2px), transparent 10px) 25px 0px / 40px 40px;
+      
+       transform:translate(calc((var(--width) - 1) * -112.5px), calc((var(--width) - 1) * 90px)) scale(var(--width));
+    }
+  }
+  .inner{
+    position:absolute;
+    width:calc(100px * var(--width));
+    height:calc(100% * var(--width));
+    transform:translate(calc((var(--width) - 1) * -100px),  calc((var(--width) - 1) * -20px));
+    overflow:hidden;
+    top:0;
+    left:0;
+    background:#000;
+    &:nth-of-type(2){
+      left:auto;
+      right:0;
+      transform:translate(calc((var(--width) - 1) * 100px), calc(20px + ((var(--width) - 1) * -200px))) scaleY(-1);
+     svg{
+        @for $i from 1 through 10{
+          &:nth-of-type(#{$i}){
+            animation-delay:calc(((#{$i/-7}s / var(--speed)) * var(--delay)) * var(--right));
+            path{
+              animation-delay:calc(((#{$i/-7}s / var(--speed)) * var(--delay)) * var(--right));
+            }
+          }
+        }
+      }
+    }
+  }
+  .inner svg{
+    position:absolute;
+    top:0;
+    left:0px;
+    height:200px;
+    width:200px;
+    animation:flip calc(5s / var(--speed)) ease-in-out infinite;
+    @for $i from 1 through 10{
+      &:nth-of-type(#{$i}){
+        top:calc(#{$i * 20}px * var(--width));
+        animation-delay:calc(((#{$i/-7}s / var(--speed)) * var(--delay)) * var(--left));
+        path{
+         animation-delay:calc(((#{$i/-7}s / var(--speed)) * var(--delay)) * var(--left));
+        }
+      }
+    }
+    @keyframes flip{
+      49.9999%{
+        transform:scaleY(1);
+      }
+      50%{
+        transform: scaleY(-1);
+      }
+      100%{
+        transform: scaleY(-1);
+      }
+    }
+    path{
+      fill:transparent;
+      stroke:#fff;
+      stroke-width:calc(5px + ((var(--width) - 1) * 4px));
+      animation: morph calc(2.5s / var(--speed)) var(--easing) infinite;
+      @keyframes morph{
+        25%{
+          d: path('M 0 200 C 100 200 20 280 100 280 C 200 280 130 200 210 200 C 280 200 210 120 300 120 C 380 120 320 200 400 200 ');
+        }
+        50%{
+          d: path('M 0 200 C 120 200 190 340 100 340 C 30 340 100 200 210 200 C 290 200 390 70 300 70 C 200 70 290 200 400 200 ')
+        }
+        75%{
+          d: path('M 0 200 C 100 200 20 280 100 280 C 200 280 130 200 210 200 C 280 200 210 120 300 120 C 380 120 320 200 400 200 ');
+        }
+        100%{
+          d: path('M 0 200 C 30 200 60 200 100 200 C 130 200 170 200 210 200 C 240 200 280 200 310 200 C 340 200 370 200 400 200 ')
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/svg-sphere-animation-with-anime-js/LICENSE.txt b/svg-sphere-animation-with-anime-js/LICENSE.txt
new file mode 100644
index 0000000..fa1d1a4
--- /dev/null
+++ b/svg-sphere-animation-with-anime-js/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 by Julian Garnier (https://codepen.io/juliangarnier/pen/LMrRNW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/svg-sphere-animation-with-anime-js/README.md b/svg-sphere-animation-with-anime-js/README.md
new file mode 100644
index 0000000..a3c2c79
--- /dev/null
+++ b/svg-sphere-animation-with-anime-js/README.md
@@ -0,0 +1,5 @@
+# SVG sphere animation with anime.js
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/juliangarnier/pen/LMrRNW](https://codepen.io/juliangarnier/pen/LMrRNW).
+
+Made for https://animejs.com
\ No newline at end of file
diff --git a/svg-sphere-animation-with-anime-js/dist/index.html b/svg-sphere-animation-with-anime-js/dist/index.html
new file mode 100644
index 0000000..f2c334e
--- /dev/null
+++ b/svg-sphere-animation-with-anime-js/dist/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - SVG sphere animation with anime.js</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://codepen.io/juliangarnier/pen/REyzrR/75efae7724dbc3c055e918057fc4aca5.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="animation-wrapper">
+  <div class="sphere-animation">
+    <svg class="sphere" viewBox="0 0 440 440" stroke="rgba(80,80,80,.35)">
+      <defs>
+        <linearGradient id="sphereGradient" x1="5%" x2="5%" y1="0%" y2="15%">
+          <stop stop-color="#373734" offset="0%"/>
+          <stop stop-color="#242423" offset="50%"/>
+          <stop stop-color="#0D0D0C" offset="100%"/>
+        </linearGradient>
+      </defs>
+      <path d="M361.604 361.238c-24.407 24.408-51.119 37.27-59.662 28.727-8.542-8.543 4.319-35.255 28.726-59.663 24.408-24.407 51.12-37.269 59.663-28.726 8.542 8.543-4.319 35.255-28.727 59.662z"/>
+      <path d="M360.72 360.354c-35.879 35.88-75.254 54.677-87.946 41.985-12.692-12.692 6.105-52.067 41.985-87.947 35.879-35.879 75.254-54.676 87.946-41.984 12.692 12.692-6.105 52.067-41.984 87.946z"/>
+      <path d="M357.185 356.819c-44.91 44.91-94.376 68.258-110.485 52.149-16.11-16.11 7.238-65.575 52.149-110.485 44.91-44.91 94.376-68.259 110.485-52.15 16.11 16.11-7.239 65.576-52.149 110.486z"/>
+      <path d="M350.998 350.632c-53.21 53.209-111.579 81.107-130.373 62.313-18.794-18.793 9.105-77.163 62.314-130.372 53.209-53.21 111.579-81.108 130.373-62.314 18.794 18.794-9.105 77.164-62.314 130.373z"/>
+      <path d="M343.043 342.677c-59.8 59.799-125.292 91.26-146.283 70.268-20.99-20.99 10.47-86.483 70.269-146.282 59.799-59.8 125.292-91.26 146.283-70.269 20.99 20.99-10.47 86.484-70.27 146.283z"/>
+      <path d="M334.646 334.28c-65.169 65.169-136.697 99.3-159.762 76.235-23.065-23.066 11.066-94.593 76.235-159.762s136.697-99.3 159.762-76.235c23.065 23.065-11.066 94.593-76.235 159.762z"/>
+      <path d="M324.923 324.557c-69.806 69.806-146.38 106.411-171.031 81.76-24.652-24.652 11.953-101.226 81.759-171.032 69.806-69.806 146.38-106.411 171.031-81.76 24.652 24.653-11.953 101.226-81.759 171.032z"/>
+      <path d="M312.99 312.625c-73.222 73.223-153.555 111.609-179.428 85.736-25.872-25.872 12.514-106.205 85.737-179.428s153.556-111.609 179.429-85.737c25.872 25.873-12.514 106.205-85.737 179.429z"/>
+      <path d="M300.175 299.808c-75.909 75.909-159.11 115.778-185.837 89.052-26.726-26.727 13.143-109.929 89.051-185.837 75.908-75.908 159.11-115.778 185.837-89.051 26.726 26.726-13.143 109.928-89.051 185.836z"/>
+      <path d="M284.707 284.34c-77.617 77.617-162.303 118.773-189.152 91.924-26.848-26.848 14.308-111.534 91.924-189.15C265.096 109.496 349.782 68.34 376.63 95.188c26.849 26.849-14.307 111.535-91.923 189.151z"/>
+      <path d="M269.239 267.989c-78.105 78.104-163.187 119.656-190.035 92.807-26.849-26.848 14.703-111.93 92.807-190.035 78.105-78.104 163.187-119.656 190.035-92.807 26.849 26.848-14.703 111.93-92.807 190.035z"/>
+      <path d="M252.887 252.52C175.27 330.138 90.584 371.294 63.736 344.446 36.887 317.596 78.043 232.91 155.66 155.293 233.276 77.677 317.962 36.521 344.81 63.37c26.85 26.848-14.307 111.534-91.923 189.15z"/>
+      <path d="M236.977 236.61C161.069 312.52 77.867 352.389 51.14 325.663c-26.726-26.727 13.143-109.928 89.052-185.837 75.908-75.908 159.11-115.777 185.836-89.05 26.727 26.726-13.143 109.928-89.051 185.836z"/>
+      <path d="M221.067 220.7C147.844 293.925 67.51 332.31 41.639 306.439c-25.873-25.873 12.513-106.206 85.736-179.429C200.6 53.786 280.931 15.4 306.804 41.272c25.872 25.873-12.514 106.206-85.737 179.429z"/>
+      <path d="M205.157 204.79c-69.806 69.807-146.38 106.412-171.031 81.76-24.652-24.652 11.953-101.225 81.759-171.031 69.806-69.807 146.38-106.411 171.031-81.76 24.652 24.652-11.953 101.226-81.759 171.032z"/>
+      <path d="M189.247 188.881c-65.169 65.169-136.696 99.3-159.762 76.235-23.065-23.065 11.066-94.593 76.235-159.762s136.697-99.3 159.762-76.235c23.065 23.065-11.066 94.593-76.235 159.762z"/>
+      <path d="M173.337 172.971c-59.799 59.8-125.292 91.26-146.282 70.269-20.991-20.99 10.47-86.484 70.268-146.283 59.8-59.799 125.292-91.26 146.283-70.269 20.99 20.991-10.47 86.484-70.269 146.283z"/>
+      <path d="M157.427 157.061c-53.209 53.21-111.578 81.108-130.372 62.314-18.794-18.794 9.104-77.164 62.313-130.373 53.21-53.209 111.58-81.108 130.373-62.314 18.794 18.794-9.105 77.164-62.314 130.373z"/>
+      <path d="M141.517 141.151c-44.91 44.91-94.376 68.259-110.485 52.15-16.11-16.11 7.239-65.576 52.15-110.486 44.91-44.91 94.375-68.258 110.485-52.15 16.109 16.11-7.24 65.576-52.15 110.486z"/>
+      <path d="M125.608 125.241c-35.88 35.88-75.255 54.677-87.947 41.985-12.692-12.692 6.105-52.067 41.985-87.947C115.525 43.4 154.9 24.603 167.592 37.295c12.692 12.692-6.105 52.067-41.984 87.946z"/>
+      <path d="M109.698 109.332c-24.408 24.407-51.12 37.268-59.663 28.726-8.542-8.543 4.319-35.255 28.727-59.662 24.407-24.408 51.12-37.27 59.662-28.727 8.543 8.543-4.319 35.255-28.726 59.663z"/>
+    </svg>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://codepen.io/juliangarnier/pen/REyzrR/75efae7724dbc3c055e918057fc4aca5.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/svg-sphere-animation-with-anime-js/dist/script.js b/svg-sphere-animation-with-anime-js/dist/script.js
new file mode 100644
index 0000000..1f63ef3
--- /dev/null
+++ b/svg-sphere-animation-with-anime-js/dist/script.js
@@ -0,0 +1,85 @@
+function fitElementToParent(el, padding) {
+  var timeout = null;
+  function resize() {
+    if (timeout) clearTimeout(timeout);
+    anime.set(el, {scale: 1});
+    var pad = padding || 0;
+    var parentEl = el.parentNode;
+    var elOffsetWidth = el.offsetWidth - pad;
+    var parentOffsetWidth = parentEl.offsetWidth;
+    var ratio = parentOffsetWidth / elOffsetWidth;
+    timeout = setTimeout(anime.set(el, {scale: ratio}), 10);
+  }
+  resize();
+  window.addEventListener('resize', resize);
+}
+
+var sphereAnimation = (function() {
+
+  var sphereEl = document.querySelector('.sphere-animation');
+  var spherePathEls = sphereEl.querySelectorAll('.sphere path');
+  var pathLength = spherePathEls.length;
+  var hasStarted = false;
+  var aimations = [];
+
+  fitElementToParent(sphereEl);
+
+  var breathAnimation = anime({
+    begin: function() {
+      for (var i = 0; i < pathLength; i++) {
+        aimations.push(anime({
+          targets: spherePathEls[i],
+          stroke: {value: ['rgba(255,75,75,1)', 'rgba(80,80,80,.35)'], duration: 500},
+          translateX: [2, -4],
+          translateY: [2, -4],
+          easing: 'easeOutQuad',
+          autoplay: false
+        }));
+      }
+    },
+    update: function(ins) {
+      aimations.forEach(function(animation, i) {
+        var percent = (1 - Math.sin((i * .35) + (.0022 * ins.currentTime))) / 2;
+        animation.seek(animation.duration * percent);
+      });
+    },
+    duration: Infinity,
+    autoplay: false
+  });
+
+  var introAnimation = anime.timeline({
+    autoplay: false
+  })
+  .add({
+    targets: spherePathEls,
+    strokeDashoffset: {
+      value: [anime.setDashoffset, 0],
+      duration: 3900,
+      easing: 'easeInOutCirc',
+      delay: anime.stagger(190, {direction: 'reverse'})
+    },
+    duration: 2000,
+    delay: anime.stagger(60, {direction: 'reverse'}),
+    easing: 'linear'
+  }, 0);
+
+  var shadowAnimation = anime({
+      targets: '#sphereGradient',
+      x1: '25%',
+      x2: '25%',
+      y1: '0%',
+      y2: '75%',
+      duration: 30000,
+      easing: 'easeOutQuint',
+      autoplay: false
+    }, 0);
+
+  function init() {
+    introAnimation.play();
+    breathAnimation.play();
+    shadowAnimation.play();
+  }
+  
+  init();
+
+})();
\ No newline at end of file
diff --git a/svg-sphere-animation-with-anime-js/dist/style.css b/svg-sphere-animation-with-anime-js/dist/style.css
new file mode 100644
index 0000000..c9567f1
--- /dev/null
+++ b/svg-sphere-animation-with-anime-js/dist/style.css
@@ -0,0 +1,36 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+}
+
+.animation-wrapper {
+  width: 50%;
+  padding-bottom: 50%;
+}
+
+.sphere-animation {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 580px;
+  height: 580px;
+  margin: -290px 0 0 -290px;
+}
+
+.sphere path {
+  fill: url(#sphereGradient);
+  stroke-width: 1px;
+  stroke: rgba(80,80,80,.35);
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+
+@media (min-width: 500px) {
+  .sphere path {
+    stroke-width: .4px;
+  }
+}
\ No newline at end of file
diff --git a/svg-sphere-animation-with-anime-js/src/index.html b/svg-sphere-animation-with-anime-js/src/index.html
new file mode 100644
index 0000000..a88cef5
--- /dev/null
+++ b/svg-sphere-animation-with-anime-js/src/index.html
@@ -0,0 +1,34 @@
+<div class="animation-wrapper">
+  <div class="sphere-animation">
+    <svg class="sphere" viewBox="0 0 440 440" stroke="rgba(80,80,80,.35)">
+      <defs>
+        <linearGradient id="sphereGradient" x1="5%" x2="5%" y1="0%" y2="15%">
+          <stop stop-color="#373734" offset="0%"/>
+          <stop stop-color="#242423" offset="50%"/>
+          <stop stop-color="#0D0D0C" offset="100%"/>
+        </linearGradient>
+      </defs>
+      <path d="M361.604 361.238c-24.407 24.408-51.119 37.27-59.662 28.727-8.542-8.543 4.319-35.255 28.726-59.663 24.408-24.407 51.12-37.269 59.663-28.726 8.542 8.543-4.319 35.255-28.727 59.662z"/>
+      <path d="M360.72 360.354c-35.879 35.88-75.254 54.677-87.946 41.985-12.692-12.692 6.105-52.067 41.985-87.947 35.879-35.879 75.254-54.676 87.946-41.984 12.692 12.692-6.105 52.067-41.984 87.946z"/>
+      <path d="M357.185 356.819c-44.91 44.91-94.376 68.258-110.485 52.149-16.11-16.11 7.238-65.575 52.149-110.485 44.91-44.91 94.376-68.259 110.485-52.15 16.11 16.11-7.239 65.576-52.149 110.486z"/>
+      <path d="M350.998 350.632c-53.21 53.209-111.579 81.107-130.373 62.313-18.794-18.793 9.105-77.163 62.314-130.372 53.209-53.21 111.579-81.108 130.373-62.314 18.794 18.794-9.105 77.164-62.314 130.373z"/>
+      <path d="M343.043 342.677c-59.8 59.799-125.292 91.26-146.283 70.268-20.99-20.99 10.47-86.483 70.269-146.282 59.799-59.8 125.292-91.26 146.283-70.269 20.99 20.99-10.47 86.484-70.27 146.283z"/>
+      <path d="M334.646 334.28c-65.169 65.169-136.697 99.3-159.762 76.235-23.065-23.066 11.066-94.593 76.235-159.762s136.697-99.3 159.762-76.235c23.065 23.065-11.066 94.593-76.235 159.762z"/>
+      <path d="M324.923 324.557c-69.806 69.806-146.38 106.411-171.031 81.76-24.652-24.652 11.953-101.226 81.759-171.032 69.806-69.806 146.38-106.411 171.031-81.76 24.652 24.653-11.953 101.226-81.759 171.032z"/>
+      <path d="M312.99 312.625c-73.222 73.223-153.555 111.609-179.428 85.736-25.872-25.872 12.514-106.205 85.737-179.428s153.556-111.609 179.429-85.737c25.872 25.873-12.514 106.205-85.737 179.429z"/>
+      <path d="M300.175 299.808c-75.909 75.909-159.11 115.778-185.837 89.052-26.726-26.727 13.143-109.929 89.051-185.837 75.908-75.908 159.11-115.778 185.837-89.051 26.726 26.726-13.143 109.928-89.051 185.836z"/>
+      <path d="M284.707 284.34c-77.617 77.617-162.303 118.773-189.152 91.924-26.848-26.848 14.308-111.534 91.924-189.15C265.096 109.496 349.782 68.34 376.63 95.188c26.849 26.849-14.307 111.535-91.923 189.151z"/>
+      <path d="M269.239 267.989c-78.105 78.104-163.187 119.656-190.035 92.807-26.849-26.848 14.703-111.93 92.807-190.035 78.105-78.104 163.187-119.656 190.035-92.807 26.849 26.848-14.703 111.93-92.807 190.035z"/>
+      <path d="M252.887 252.52C175.27 330.138 90.584 371.294 63.736 344.446 36.887 317.596 78.043 232.91 155.66 155.293 233.276 77.677 317.962 36.521 344.81 63.37c26.85 26.848-14.307 111.534-91.923 189.15z"/>
+      <path d="M236.977 236.61C161.069 312.52 77.867 352.389 51.14 325.663c-26.726-26.727 13.143-109.928 89.052-185.837 75.908-75.908 159.11-115.777 185.836-89.05 26.727 26.726-13.143 109.928-89.051 185.836z"/>
+      <path d="M221.067 220.7C147.844 293.925 67.51 332.31 41.639 306.439c-25.873-25.873 12.513-106.206 85.736-179.429C200.6 53.786 280.931 15.4 306.804 41.272c25.872 25.873-12.514 106.206-85.737 179.429z"/>
+      <path d="M205.157 204.79c-69.806 69.807-146.38 106.412-171.031 81.76-24.652-24.652 11.953-101.225 81.759-171.031 69.806-69.807 146.38-106.411 171.031-81.76 24.652 24.652-11.953 101.226-81.759 171.032z"/>
+      <path d="M189.247 188.881c-65.169 65.169-136.696 99.3-159.762 76.235-23.065-23.065 11.066-94.593 76.235-159.762s136.697-99.3 159.762-76.235c23.065 23.065-11.066 94.593-76.235 159.762z"/>
+      <path d="M173.337 172.971c-59.799 59.8-125.292 91.26-146.282 70.269-20.991-20.99 10.47-86.484 70.268-146.283 59.8-59.799 125.292-91.26 146.283-70.269 20.99 20.991-10.47 86.484-70.269 146.283z"/>
+      <path d="M157.427 157.061c-53.209 53.21-111.578 81.108-130.372 62.314-18.794-18.794 9.104-77.164 62.313-130.373 53.21-53.209 111.58-81.108 130.373-62.314 18.794 18.794-9.105 77.164-62.314 130.373z"/>
+      <path d="M141.517 141.151c-44.91 44.91-94.376 68.259-110.485 52.15-16.11-16.11 7.239-65.576 52.15-110.486 44.91-44.91 94.375-68.258 110.485-52.15 16.109 16.11-7.24 65.576-52.15 110.486z"/>
+      <path d="M125.608 125.241c-35.88 35.88-75.255 54.677-87.947 41.985-12.692-12.692 6.105-52.067 41.985-87.947C115.525 43.4 154.9 24.603 167.592 37.295c12.692 12.692-6.105 52.067-41.984 87.946z"/>
+      <path d="M109.698 109.332c-24.408 24.407-51.12 37.268-59.663 28.726-8.542-8.543 4.319-35.255 28.727-59.662 24.407-24.408 51.12-37.27 59.662-28.727 8.543 8.543-4.319 35.255-28.726 59.663z"/>
+    </svg>
+  </div>
+</div>
\ No newline at end of file
diff --git a/svg-sphere-animation-with-anime-js/src/script.js b/svg-sphere-animation-with-anime-js/src/script.js
new file mode 100644
index 0000000..1f63ef3
--- /dev/null
+++ b/svg-sphere-animation-with-anime-js/src/script.js
@@ -0,0 +1,85 @@
+function fitElementToParent(el, padding) {
+  var timeout = null;
+  function resize() {
+    if (timeout) clearTimeout(timeout);
+    anime.set(el, {scale: 1});
+    var pad = padding || 0;
+    var parentEl = el.parentNode;
+    var elOffsetWidth = el.offsetWidth - pad;
+    var parentOffsetWidth = parentEl.offsetWidth;
+    var ratio = parentOffsetWidth / elOffsetWidth;
+    timeout = setTimeout(anime.set(el, {scale: ratio}), 10);
+  }
+  resize();
+  window.addEventListener('resize', resize);
+}
+
+var sphereAnimation = (function() {
+
+  var sphereEl = document.querySelector('.sphere-animation');
+  var spherePathEls = sphereEl.querySelectorAll('.sphere path');
+  var pathLength = spherePathEls.length;
+  var hasStarted = false;
+  var aimations = [];
+
+  fitElementToParent(sphereEl);
+
+  var breathAnimation = anime({
+    begin: function() {
+      for (var i = 0; i < pathLength; i++) {
+        aimations.push(anime({
+          targets: spherePathEls[i],
+          stroke: {value: ['rgba(255,75,75,1)', 'rgba(80,80,80,.35)'], duration: 500},
+          translateX: [2, -4],
+          translateY: [2, -4],
+          easing: 'easeOutQuad',
+          autoplay: false
+        }));
+      }
+    },
+    update: function(ins) {
+      aimations.forEach(function(animation, i) {
+        var percent = (1 - Math.sin((i * .35) + (.0022 * ins.currentTime))) / 2;
+        animation.seek(animation.duration * percent);
+      });
+    },
+    duration: Infinity,
+    autoplay: false
+  });
+
+  var introAnimation = anime.timeline({
+    autoplay: false
+  })
+  .add({
+    targets: spherePathEls,
+    strokeDashoffset: {
+      value: [anime.setDashoffset, 0],
+      duration: 3900,
+      easing: 'easeInOutCirc',
+      delay: anime.stagger(190, {direction: 'reverse'})
+    },
+    duration: 2000,
+    delay: anime.stagger(60, {direction: 'reverse'}),
+    easing: 'linear'
+  }, 0);
+
+  var shadowAnimation = anime({
+      targets: '#sphereGradient',
+      x1: '25%',
+      x2: '25%',
+      y1: '0%',
+      y2: '75%',
+      duration: 30000,
+      easing: 'easeOutQuint',
+      autoplay: false
+    }, 0);
+
+  function init() {
+    introAnimation.play();
+    breathAnimation.play();
+    shadowAnimation.play();
+  }
+  
+  init();
+
+})();
\ No newline at end of file
diff --git a/svg-sphere-animation-with-anime-js/src/style.css b/svg-sphere-animation-with-anime-js/src/style.css
new file mode 100644
index 0000000..d471309
--- /dev/null
+++ b/svg-sphere-animation-with-anime-js/src/style.css
@@ -0,0 +1,35 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+}
+
+.animation-wrapper {
+  width: 50%;
+  padding-bottom: 50%;
+}
+
+.sphere-animation {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 580px;
+  height: 580px;
+  margin: -290px 0 0 -290px;
+}
+
+.sphere path {
+  fill: url(#sphereGradient);
+  stroke-width: 1px;
+  stroke: rgba(80,80,80,.35);
+  backface-visibility: hidden;
+}
+
+@media (min-width: 500px) {
+  .sphere path {
+    stroke-width: .4px;
+  }
+}
\ No newline at end of file
diff --git a/sweater-swag-cpc/README.markdown b/sweater-swag-cpc/README.markdown
new file mode 100644
index 0000000..7dd5e76
--- /dev/null
+++ b/sweater-swag-cpc/README.markdown
@@ -0,0 +1,5 @@
+# Sweater Swag 👕 [CPC]
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/JoshuaVB/pen/VwbmQpv](https://codepen.io/JoshuaVB/pen/VwbmQpv).
+
+
diff --git a/sweater-swag-cpc/dist/index.html b/sweater-swag-cpc/dist/index.html
new file mode 100644
index 0000000..8b5f59a
--- /dev/null
+++ b/sweater-swag-cpc/dist/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Sweater Swag 👕 [CPC]</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="title">
+	sweater swag 👕
+	<small>codepen textile challenge</small>
+</div>
+<div class="shirt">
+	<span>Sweater Loading...</span>
+	<img src="https://assets.codepen.io/450456/t-shirt.png" loading="lazy" />
+	<div class="shirt__overlay" style="display: none;">
+		<div class="shirt__overlay__pattern"></div>
+		<img src="https://assets.codepen.io/450456/t-shirt-overlay-70c.png" />
+	</div>
+</div>
+<div class="textiles">
+	<button class="textiles__option textiles__option--clear active"></button>
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch2-preview.png" />
+	</button>
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch5-preview.png" />
+	</button>
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch3-preview.png" />
+	</button>
+</div>
+<div class="textiles textiles--2">
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch6-preview.png" />
+	</button>
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch7-preview.png" />
+	</button>
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch8-preview.png" />
+	</button>
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch9-preview.png" />
+	</button>
+</div>
+<div class="disclaimer">patterns sourced from <a href="http://www.colourlovers.com/patterns" target="_blank" rel="nofollow">colourlovers.com</a></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/sweater-swag-cpc/dist/script.js b/sweater-swag-cpc/dist/script.js
new file mode 100644
index 0000000..12ceecc
--- /dev/null
+++ b/sweater-swag-cpc/dist/script.js
@@ -0,0 +1,22 @@
+$(".textiles__option").on("click", function () {
+	$(".textiles__option").removeClass("active");
+	$(this).addClass("active");
+	if ($(this).hasClass("textiles__option--clear")) {
+		$(".shirt__overlay").fadeOut("fast");
+	} else {
+		const pattern = $(this).find("img").attr("src");
+		if ($(".shirt__overlay:visible").length) {
+			$(".shirt__overlay__pattern").fadeOut("fast", function () {
+				$(".shirt__overlay__pattern")
+					.css("background-image", "url(" + pattern + ")")
+					.fadeIn("slow");
+			});
+		} else {
+			$(".shirt__overlay__pattern").css(
+				"background-image",
+				"url(" + pattern + ")"
+			);
+			$(".shirt__overlay").fadeIn("fast");
+		}
+	}
+});
\ No newline at end of file
diff --git a/sweater-swag-cpc/dist/style.css b/sweater-swag-cpc/dist/style.css
new file mode 100644
index 0000000..2192499
--- /dev/null
+++ b/sweater-swag-cpc/dist/style.css
@@ -0,0 +1,204 @@
+@import url("https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap");
+body {
+  background: #404749;
+  background: radial-gradient(#404749 0%, #404749 85%, #303535);
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.shirt {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.shirt span {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100vw;
+  text-align: center;
+  color: white;
+  font-size: 18px;
+  font-weight: bold;
+}
+.shirt img {
+  max-height: 90%;
+  max-width: 90%;
+  margin: auto;
+  position: relative;
+}
+.shirt__overlay {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.shirt__overlay img {
+  mix-blend-mode: multiply;
+}
+.shirt__overlay__pattern {
+  position: absolute;
+  top: 0%;
+  left: 5%;
+  width: 90%;
+  height: 100%;
+  -webkit-mask-image: url(https://assets.codepen.io/450456/shirt-mask.png);
+  mask-image: url(https://assets.codepen.io/450456/shirt-mask.png);
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+.textiles {
+  position: absolute;
+  z-index: 10;
+  top: 165px;
+  left: 0;
+}
+.textiles__option {
+  position: absolute;
+  border-radius: 100%;
+  overflow: hidden;
+  width: 60px;
+  height: 60px;
+  border: 2px solid white;
+  margin: 0 6px;
+  -webkit-appearance: none;
+  background: none;
+  box-shadow: none;
+  padding: 0;
+  cursor: pointer;
+  transform-origin: 150px 0;
+}
+.textiles__option img {
+  cursor: pointer;
+}
+.textiles__option:hover, .textiles__option.active {
+  border-color: red;
+}
+.textiles__option--clear {
+  background: white;
+}
+.textiles__option:nth-of-type(1) {
+  transform: rotate(-10deg);
+}
+.textiles__option:nth-of-type(2) {
+  transform: rotate(30deg);
+}
+.textiles__option:nth-of-type(3) {
+  transform: rotate(70deg);
+}
+.textiles__option:nth-of-type(4) {
+  transform: rotate(110deg);
+}
+.textiles--2 {
+  top: auto;
+  left: auto;
+  bottom: 165px;
+  right: 320px;
+}
+.textiles--2 .textiles__option:nth-of-type(1) {
+  transform: rotate(-80deg);
+}
+.textiles--2 .textiles__option:nth-of-type(2) {
+  transform: rotate(-120deg);
+}
+.textiles--2 .textiles__option:nth-of-type(3) {
+  transform: rotate(-160deg);
+}
+.textiles--2 .textiles__option:nth-of-type(4) {
+  transform: rotate(-200deg);
+}
+
+.title {
+  user-select: none;
+  position: absolute;
+  z-index: 20;
+  font-family: "Major Mono Display", monospace;
+  color: white;
+  top: 16px;
+  right: 16px;
+  font-size: 28px;
+  text-align: right;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  word-spacing: -5px;
+  letter-spacing: -1px;
+  padding-bottom: 15px;
+  text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.5);
+}
+.title small {
+  font-size: 14px;
+  position: absolute;
+  top: 120%;
+  right: 0;
+}
+.title::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  opacity: 0.25;
+  right: 0px;
+  height: 3px;
+  width: 87px;
+  background: white;
+}
+
+.disclaimer {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  font-size: 14px;
+  font-family: "Major Mono Display", sans-serif;
+  color: white;
+  z-index: 10;
+  letter-spacing: -1px;
+}
+.disclaimer a {
+  color: white;
+  margin-left: 5px;
+}
+
+@media screen and (max-width: 540px) {
+  .textiles__option {
+    width: 40px;
+    height: 40px;
+    transform-origin: 100px 0;
+  }
+  .textiles--2 {
+    right: 220px;
+  }
+
+  .title {
+    font-size: 22px;
+  }
+  .title small {
+    font-size: 12px;
+  }
+
+  .disclaimer {
+    font-size: 12px;
+  }
+}
+@media screen and (max-height: 450px) {
+  .textiles {
+    top: 135px;
+  }
+  .textiles__option {
+    width: 40px;
+    height: 40px;
+    transform-origin: 80px 0;
+  }
+  .textiles--2 {
+    right: 210px;
+  }
+
+  .title small {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/sweater-swag-cpc/license.txt b/sweater-swag-cpc/license.txt
new file mode 100644
index 0000000..75f76bc
--- /dev/null
+++ b/sweater-swag-cpc/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Joshua van Boxtel (https://codepen.io/JoshuaVB/pen/VwbmQpv)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/sweater-swag-cpc/src/index.html b/sweater-swag-cpc/src/index.html
new file mode 100644
index 0000000..d8e1bca
--- /dev/null
+++ b/sweater-swag-cpc/src/index.html
@@ -0,0 +1,39 @@
+<div class="title">
+	sweater swag 👕
+	<small>codepen textile challenge</small>
+</div>
+<div class="shirt">
+	<span>Sweater Loading...</span>
+	<img src="https://assets.codepen.io/450456/t-shirt.png" loading="lazy" />
+	<div class="shirt__overlay" style="display: none;">
+		<div class="shirt__overlay__pattern"></div>
+		<img src="https://assets.codepen.io/450456/t-shirt-overlay-70c.png" />
+	</div>
+</div>
+<div class="textiles">
+	<button class="textiles__option textiles__option--clear active"></button>
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch2-preview.png" />
+	</button>
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch5-preview.png" />
+	</button>
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch3-preview.png" />
+	</button>
+</div>
+<div class="textiles textiles--2">
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch6-preview.png" />
+	</button>
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch7-preview.png" />
+	</button>
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch8-preview.png" />
+	</button>
+	<button class="textiles__option">
+		<img src="https://assets.codepen.io/450456/swatch9-preview.png" />
+	</button>
+</div>
+<div class="disclaimer">patterns sourced from <a href="http://www.colourlovers.com/patterns" target="_blank" rel="nofollow">colourlovers.com</a></div>
\ No newline at end of file
diff --git a/sweater-swag-cpc/src/script.js b/sweater-swag-cpc/src/script.js
new file mode 100644
index 0000000..5a66fe9
--- /dev/null
+++ b/sweater-swag-cpc/src/script.js
@@ -0,0 +1,22 @@
+$(".textiles__option").on("click", function () {
+	$(".textiles__option").removeClass("active");
+	$(this).addClass("active");
+	if ($(this).hasClass("textiles__option--clear")) {
+		$(".shirt__overlay").fadeOut("fast");
+	} else {
+		const pattern = $(this).find("img").attr("src");
+		if ($(".shirt__overlay:visible").length) {
+			$(".shirt__overlay__pattern").fadeOut("fast", function () {
+				$(".shirt__overlay__pattern")
+					.css("background-image", "url(" + pattern + ")")
+					.fadeIn("slow");
+			});
+		} else {
+			$(".shirt__overlay__pattern").css(
+				"background-image",
+				"url(" + pattern + ")"
+			);
+			$(".shirt__overlay").fadeIn("fast");
+		}
+	}
+});
diff --git a/sweater-swag-cpc/src/style.scss b/sweater-swag-cpc/src/style.scss
new file mode 100644
index 0000000..649c81a
--- /dev/null
+++ b/sweater-swag-cpc/src/style.scss
@@ -0,0 +1,241 @@
+@import url("https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap");
+
+$bg: #404749;
+
+body {
+	background: $bg;
+	background: radial-gradient($bg 0%, $bg 85%, #303535);
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.shirt {
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+
+	span {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: 100vw;
+		text-align: center;
+		color: white;
+		font-size: 18px;
+		font-weight: bold;
+	}
+
+	img {
+		max-height: 90%;
+		max-width: 90%;
+		margin: auto;
+		position: relative;
+	}
+
+	&__overlay {
+		position: absolute;
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		img {
+			mix-blend-mode: multiply;
+		}
+
+		&__pattern {
+			position: absolute;
+			top: 0%;
+			left: 5%;
+			width: 90%;
+			height: 100%;
+			-webkit-mask-image: url(https://assets.codepen.io/450456/shirt-mask.png);
+			mask-image: url(https://assets.codepen.io/450456/shirt-mask.png);
+			-webkit-mask-size: contain;
+			mask-size: contain;
+		}
+	}
+}
+
+.textiles {
+	position: absolute;
+	z-index: 10;
+	top: 165px;
+	left: 0;
+
+	&__option {
+		position: absolute;
+		border-radius: 100%;
+		overflow: hidden;
+		width: 60px;
+		height: 60px;
+		border: 2px solid white;
+		margin: 0 6px;
+		-webkit-appearance: none;
+		background: none;
+		box-shadow: none;
+		padding: 0;
+		cursor: pointer;
+
+		img {
+			cursor: pointer;
+		}
+
+		&:hover,
+		&.active {
+			border-color: red;
+		}
+
+		&--clear {
+			background: white;
+		}
+
+		transform-origin: 150px 0;
+
+		&:nth-of-type(1) {
+			transform: rotate(-10deg);
+		}
+
+		&:nth-of-type(2) {
+			transform: rotate(30deg);
+		}
+
+		&:nth-of-type(3) {
+			transform: rotate(70deg);
+		}
+
+		&:nth-of-type(4) {
+			transform: rotate(110deg);
+		}
+	}
+
+	&--2 {
+		top: auto;
+		left: auto;
+		bottom: 165px;
+		right: 320px;
+
+		.textiles__option {
+			&:nth-of-type(1) {
+				transform: rotate(-80deg);
+			}
+
+			&:nth-of-type(2) {
+				transform: rotate(-120deg);
+			}
+
+			&:nth-of-type(3) {
+				transform: rotate(-160deg);
+			}
+
+			&:nth-of-type(4) {
+				transform: rotate(-200deg);
+			}
+		}
+	}
+}
+
+.title {
+	user-select: none;
+	position: absolute;
+	z-index: 20;
+	font-family: "Major Mono Display", monospace;
+	color: white;
+	top: 16px;
+	right: 16px;
+	font-size: 28px;
+	text-align: right;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	word-spacing: -5px;
+	letter-spacing: -1px;
+	padding-bottom: 15px;
+	text-shadow: 4px 4px 2px rgba(black, 0.5);
+
+	small {
+		font-size: 14px;
+		position: absolute;
+		top: 120%;
+		right: 0;
+	}
+
+	&::before {
+		content: "";
+		position: absolute;
+		bottom: 0;
+		opacity: 0.25;
+		right: 0px;
+		height: 3px;
+		width: 87px;
+		background: white;
+	}
+}
+
+.disclaimer {
+	position: fixed;
+	bottom: 10px;
+	left: 10px;
+	font-size: 14px;
+	font-family: "Major Mono Display", sans-serif;
+	color: white;
+	z-index: 10;
+	letter-spacing: -1px;
+
+	a {
+		color: white;
+		margin-left: 5px;
+	}
+}
+
+@media screen and (max-width: 540px) {
+	.textiles {
+		&__option {
+			width: 40px;
+			height: 40px;
+			transform-origin: 100px 0;
+		}
+
+		&--2 {
+			right: 220px;
+		}
+	}
+
+	.title {
+		font-size: 22px;
+
+		small {
+			font-size: 12px;
+		}
+	}
+
+	.disclaimer {
+		font-size: 12px;
+	}
+}
+
+@media screen and (max-height: 450px) {
+	.textiles {
+		top: 135px;
+
+		&__option {
+			width: 40px;
+			height: 40px;
+			transform-origin: 80px 0;
+		}
+
+		&--2 {
+			right: 210px;
+		}
+	}
+
+	.title {
+		small {
+			display: none;
+		}
+	}
+}
diff --git a/swipey-gridclearleft/README.markdown b/swipey-gridclearleft/README.markdown
new file mode 100644
index 0000000..0263d05
--- /dev/null
+++ b/swipey-gridclearleft/README.markdown
@@ -0,0 +1,5 @@
+# swipey grid - clearleft
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/cassie-codes/pen/mdRbGzO](https://codepen.io/cassie-codes/pen/mdRbGzO).
+
+
diff --git a/swipey-gridclearleft/dist/index.html b/swipey-gridclearleft/dist/index.html
new file mode 100644
index 0000000..535ff54
--- /dev/null
+++ b/swipey-gridclearleft/dist/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - swipey grid - clearleft</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg class="Hero__image-grid anim-hero" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 590.91 632.66">
+	<defs>
+		<clipPath id="heroclip1">
+			<rect class="hero__swipe-1" id="heroclip1Rect" x="101.31" y="51.24" width="488.79" height="221.87" fill="#fff" data-svg-origin="590.1000061035156 162.17499923706055" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		</clipPath>
+
+		<clipPath id="heroclip2">
+			<rect class="hero__swipe-2" id="heroclip1Rect" x="195.36" y="293.94" width="292.4" height="268.6" fill="#fff" data-svg-origin="487.75999450683594 428.24000549316406" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		</clipPath>
+
+		<clipPath id="heroclip3">
+			<rect class="hero__swipe-3" id="heroclip3Rect" x="1.73" y="233.41" width="174.53" height="162.61" fill="#fff" data-svg-origin="176.25999879837036 314.71500396728516" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		</clipPath>
+
+		<clipPath id="heroclip4">
+			<rect class="hero__swipe-4" id="heroclip4Rect" x="100.03" y="405.79" width="75.83" height="73.12" fill="#fff" data-svg-origin="175.86000061035156 442.3500099182129" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		</clipPath>
+
+	</defs>
+	<g class="fouc fouc--hero" opacity="0" data-svg-origin="591 314.5249938964844" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px; opacity: 1;">
+		<circle class="hero__circle" cx="90.18" cy="79.56" r="50" fill="#dae1e2" data-svg-origin="90.18000030517578 79.55999755859375" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px; opacity: 1;"></circle>
+		<circle class="hero__circle" cx="488.39" cy="563.49" r="30" fill="#23d8a0" data-svg-origin="488.3900146484375 563.489990234375" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px; opacity: 1;"></circle>
+
+		<rect class="hero__swipe-1" x="102" y="52" width="488" height="220" fill="#23d8a0" data-svg-origin="590 162" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		<rect class="hero__swipe-2" x="196" y="294" width="292" height="268" fill="#FAFAFA" data-svg-origin="488 428" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		<rect class="hero__swipe-3" x="2" y="234" width="173" height="162" fill="#FAFAFA" data-svg-origin="175 315" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		<rect class="hero__swipe-4" x="101" y="406" width="75" height="73" fill="#23d8a0" data-svg-origin="176 442.5" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+
+		<image clip-path="url(#heroclip1)" href="https://s3.eu-west-1.amazonaws.com/clearleft-v5/uploads/hero1.jpg?mtime=20210107055409&amp;focal=none" preserveAspectRatio="xMidYMid slice" x="101" y="51" width="490" height="223"></image>
+		<image clip-path="url(#heroclip2)" href="https://s3.eu-west-1.amazonaws.com/clearleft-v5/uploads/hero2.jpg?mtime=20210107055410&amp;focal=none" preserveAspectRatio="xMidYMid slice" x="195" y="293" width="294" height="270"></image>
+		<image clip-path="url(#heroclip3)" href="https://s3.eu-west-1.amazonaws.com/clearleft-v5/uploads/hero3.jpg?mtime=20210107055411&amp;focal=none" preserveAspectRatio="xMidYMid slice" x="1" y="233" width="176" height="164"></image>
+		<image clip-path="url(#heroclip4)" href="https://s3.eu-west-1.amazonaws.com/clearleft-v5/uploads/hero4.jpg?mtime=20210107055413&amp;focal=none" preserveAspectRatio="xMidYMid slice" x="99" y="404" width="78" height="76"></image>
+	</g>
+</svg>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/swipey-gridclearleft/dist/script.js b/swipey-gridclearleft/dist/script.js
new file mode 100644
index 0000000..2d2fd26
--- /dev/null
+++ b/swipey-gridclearleft/dist/script.js
@@ -0,0 +1,58 @@
+var HeroGrid = document.querySelector(".anim-hero");
+
+var animationIsOk = window.matchMedia("(prefers-reduced-motion: no-preference)")
+	.matches;
+
+if (animationIsOk) {
+	var tl = gsap.timeline({
+		delay: 1.7,
+		defaults: {
+			transformOrigin: "right center",
+			ease: "expo.out",
+			duration: 1.2,
+			stagger: {
+				each: 0.5,
+				from: "end"
+			}
+		}
+	});
+	tl
+		.set(".fouc--hero", {
+			opacity: 1
+		})
+		.from(".hero__swipe-1", {
+			scaleX: 0
+		})
+		.from(
+			".hero__swipe-2",
+			{
+				scaleX: 0
+			},
+			"<"
+		)
+		.from(
+			".hero__swipe-3",
+			{
+				scaleX: 0
+			},
+			"<"
+		)
+		.from(
+			".hero__swipe-4",
+			{
+				scaleX: 0
+			},
+			"<"
+		)
+		.from(
+			".hero__circle",
+			{
+				duration: 0.7,
+				transformOrigin: "center",
+				opacity: 0,
+				scale: 0.7,
+				ease: "sine.out"
+			},
+			"<"
+		);
+}
\ No newline at end of file
diff --git a/swipey-gridclearleft/dist/style.css b/swipey-gridclearleft/dist/style.css
new file mode 100644
index 0000000..6719f7f
--- /dev/null
+++ b/swipey-gridclearleft/dist/style.css
@@ -0,0 +1,11 @@
+body {
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+svg {
+	max-width: 70vw;
+	max-height: 90vh;
+}
\ No newline at end of file
diff --git a/swipey-gridclearleft/license.txt b/swipey-gridclearleft/license.txt
new file mode 100644
index 0000000..4dd3147
--- /dev/null
+++ b/swipey-gridclearleft/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Cassie Evans (https://codepen.io/cassie-codes/pen/mdRbGzO)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/swipey-gridclearleft/src/index.html b/swipey-gridclearleft/src/index.html
new file mode 100644
index 0000000..ab3e179
--- /dev/null
+++ b/swipey-gridclearleft/src/index.html
@@ -0,0 +1,34 @@
+<svg class="Hero__image-grid anim-hero" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 590.91 632.66">
+	<defs>
+		<clipPath id="heroclip1">
+			<rect class="hero__swipe-1" id="heroclip1Rect" x="101.31" y="51.24" width="488.79" height="221.87" fill="#fff" data-svg-origin="590.1000061035156 162.17499923706055" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		</clipPath>
+
+		<clipPath id="heroclip2">
+			<rect class="hero__swipe-2" id="heroclip1Rect" x="195.36" y="293.94" width="292.4" height="268.6" fill="#fff" data-svg-origin="487.75999450683594 428.24000549316406" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		</clipPath>
+
+		<clipPath id="heroclip3">
+			<rect class="hero__swipe-3" id="heroclip3Rect" x="1.73" y="233.41" width="174.53" height="162.61" fill="#fff" data-svg-origin="176.25999879837036 314.71500396728516" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		</clipPath>
+
+		<clipPath id="heroclip4">
+			<rect class="hero__swipe-4" id="heroclip4Rect" x="100.03" y="405.79" width="75.83" height="73.12" fill="#fff" data-svg-origin="175.86000061035156 442.3500099182129" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		</clipPath>
+
+	</defs>
+	<g class="fouc fouc--hero" opacity="0" data-svg-origin="591 314.5249938964844" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px; opacity: 1;">
+		<circle class="hero__circle" cx="90.18" cy="79.56" r="50" fill="#dae1e2" data-svg-origin="90.18000030517578 79.55999755859375" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px; opacity: 1;"></circle>
+		<circle class="hero__circle" cx="488.39" cy="563.49" r="30" fill="#23d8a0" data-svg-origin="488.3900146484375 563.489990234375" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px; opacity: 1;"></circle>
+
+		<rect class="hero__swipe-1" x="102" y="52" width="488" height="220" fill="#23d8a0" data-svg-origin="590 162" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		<rect class="hero__swipe-2" x="196" y="294" width="292" height="268" fill="#FAFAFA" data-svg-origin="488 428" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		<rect class="hero__swipe-3" x="2" y="234" width="173" height="162" fill="#FAFAFA" data-svg-origin="175 315" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+		<rect class="hero__swipe-4" x="101" y="406" width="75" height="73" fill="#23d8a0" data-svg-origin="176 442.5" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></rect>
+
+		<image clip-path="url(#heroclip1)" href="https://s3.eu-west-1.amazonaws.com/clearleft-v5/uploads/hero1.jpg?mtime=20210107055409&amp;focal=none" preserveAspectRatio="xMidYMid slice" x="101" y="51" width="490" height="223"></image>
+		<image clip-path="url(#heroclip2)" href="https://s3.eu-west-1.amazonaws.com/clearleft-v5/uploads/hero2.jpg?mtime=20210107055410&amp;focal=none" preserveAspectRatio="xMidYMid slice" x="195" y="293" width="294" height="270"></image>
+		<image clip-path="url(#heroclip3)" href="https://s3.eu-west-1.amazonaws.com/clearleft-v5/uploads/hero3.jpg?mtime=20210107055411&amp;focal=none" preserveAspectRatio="xMidYMid slice" x="1" y="233" width="176" height="164"></image>
+		<image clip-path="url(#heroclip4)" href="https://s3.eu-west-1.amazonaws.com/clearleft-v5/uploads/hero4.jpg?mtime=20210107055413&amp;focal=none" preserveAspectRatio="xMidYMid slice" x="99" y="404" width="78" height="76"></image>
+	</g>
+</svg>
\ No newline at end of file
diff --git a/swipey-gridclearleft/src/script.js b/swipey-gridclearleft/src/script.js
new file mode 100644
index 0000000..d40c037
--- /dev/null
+++ b/swipey-gridclearleft/src/script.js
@@ -0,0 +1,58 @@
+var HeroGrid = document.querySelector(".anim-hero");
+
+var animationIsOk = window.matchMedia("(prefers-reduced-motion: no-preference)")
+	.matches;
+
+if (animationIsOk) {
+	var tl = gsap.timeline({
+		delay: 1.7,
+		defaults: {
+			transformOrigin: "right center",
+			ease: "expo.out",
+			duration: 1.2,
+			stagger: {
+				each: 0.5,
+				from: "end"
+			}
+		}
+	});
+	tl
+		.set(".fouc--hero", {
+			opacity: 1
+		})
+		.from(".hero__swipe-1", {
+			scaleX: 0
+		})
+		.from(
+			".hero__swipe-2",
+			{
+				scaleX: 0
+			},
+			"<"
+		)
+		.from(
+			".hero__swipe-3",
+			{
+				scaleX: 0
+			},
+			"<"
+		)
+		.from(
+			".hero__swipe-4",
+			{
+				scaleX: 0
+			},
+			"<"
+		)
+		.from(
+			".hero__circle",
+			{
+				duration: 0.7,
+				transformOrigin: "center",
+				opacity: 0,
+				scale: 0.7,
+				ease: "sine.out"
+			},
+			"<"
+		);
+}
diff --git a/swipey-gridclearleft/src/style.css b/swipey-gridclearleft/src/style.css
new file mode 100644
index 0000000..621f8a4
--- /dev/null
+++ b/swipey-gridclearleft/src/style.css
@@ -0,0 +1,11 @@
+body {
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+svg {
+	max-width: 70vw;
+	max-height: 90vh;
+}
diff --git a/tab-bar-interaction-1/README.markdown b/tab-bar-interaction-1/README.markdown
new file mode 100644
index 0000000..fa09842
--- /dev/null
+++ b/tab-bar-interaction-1/README.markdown
@@ -0,0 +1,5 @@
+# Tab Bar Interaction #1
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/dev_loop/pen/WNvBzZG](https://codepen.io/dev_loop/pen/WNvBzZG).
+
+
diff --git a/tab-bar-interaction-1/dist/index.html b/tab-bar-interaction-1/dist/index.html
new file mode 100644
index 0000000..3cbeba8
--- /dev/null
+++ b/tab-bar-interaction-1/dist/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Tab Bar Interaction #1</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<nav>
+	<ul>
+		<li>
+			<a class="active">
+				<svg><use xlink:href="#home-icon"></use></svg>
+			</a>
+		</li>
+	</ul>
+	<ul>
+		<li>
+			<a>
+				<svg><use xlink:href="#bookmark-icon"></use></svg>
+			</a>
+		</li>
+	</ul>
+	<ul>
+		<li>
+			<a>
+				<svg><use xlink:href="#plus-icon"></use></svg>
+			</a>
+		</li>
+	</ul>
+	<ul>
+		<li>
+			<a>
+				<svg><use xlink:href="#user-icon"></use></svg>
+			</a>
+		</li>
+	</ul>
+	<ul>
+		<li>
+			<a>
+				<svg><use xlink:href="#settings-icon"></use></svg>
+			</a>
+		</li>
+	</ul>
+
+	<div class="tubelight">
+		<div class="light-ray"></div>
+	</div>
+</nav>
+
+
+
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="home-icon">
+		<path
+				d="M13.1428571,14.5 C13.6571429,14.5 14,14.175507 14,13.6887676 L14,6.38767551 C14,6.14430577 13.9142857,5.90093604 13.6571429,5.73868955 L8.51428571,1.6825273 C8.17142857,1.43915757 7.74285714,1.43915757 7.4,1.6825273 L2.25714286,5.73868955 C2.08571429,5.90093604 2,6.14430577 2,6.38767551 L2,13.6887676 C2,14.175507 2.34285714,14.5 2.85714286,14.5 L13.1428571,14.5 Z M5.42857143,12.8775351 L3.71428571,12.8775351 L3.71428571,6.79329173 L8,3.38611544 L12.2857143,6.79329173 L12.2857143,12.8775351 L10.5714286,12.8775351 L5.42857143,12.8775351 Z">
+		</path>
+	</symbol>
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="favorites-icon">
+		<path
+				d="M7.5125,14.3196446 C6.8625,13.7292662 1.5,9.09057902 1.5,5.54830881 C1.5,3.27113511 3.2875,1.5 5.4,1.5 C6.375,1.5 7.26875,1.92169883 8,2.5120772 C8.73125,1.83735907 9.625,1.5 10.6,1.5 C12.79375,1.5 14.5,3.35547487 14.5,5.54830881 C14.5,9.09057902 9.1375,13.7292662 8.4875,14.2353048 C8.24375,14.5726639 7.75625,14.5726639 7.5125,14.3196446 Z M5.4,3.18679534 C4.18125,3.18679534 3.125,4.28321231 3.125,5.54830881 C3.125,7.40378368 5.96875,10.6086948 8,12.4641697 C9.70625,10.8617141 12.875,7.57246322 12.875,5.54830881 C12.875,4.19887254 11.81875,3.18679534 10.6,3.18679534 C9.86875,3.18679534 9.1375,3.60849417 8.73125,4.28321231 C8.40625,4.78925091 7.675,4.78925091 7.35,4.28321231 C6.8625,3.60849417 6.2125,3.18679534 5.4,3.18679534 Z">
+		</path>
+	</symbol>
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 568" id="settings-icon">
+		<path d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z" />
+	</symbol>
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="plus-icon">
+		<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M12 2C6.48 2 2 6.48001 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48001 17.52 2 12 2ZM11 7V11H7V13H11V17H13V13H17V11H13V7H11ZM4 12C4 16.41 7.59 20 12 20C16.41 20 20 16.41 20 12C20 7.59 16.41 4 12 4C7.59 4 4 7.59 4 12Z" />
+	</symbol>
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="bookmark-icon">
+		<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M7 3H17C18.1 3 19 3.89999 19 5V21L12 18L5 21V5C5 3.89999 5.90002 3 7 3ZM12 15.82L17 18V5H7V18L12 15.82Z" />
+	</symbol>
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 570" id="user-icon">
+		<path d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z" />
+	</symbol>
+</svg>
+
+
+
+
+<div class="support">
+	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
+	<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/tab-bar-interaction-1/dist/script.js b/tab-bar-interaction-1/dist/script.js
new file mode 100644
index 0000000..79a5653
--- /dev/null
+++ b/tab-bar-interaction-1/dist/script.js
@@ -0,0 +1,33 @@
+console.clear();
+
+const uls = document.querySelectorAll("nav ul");
+const links = [...document.querySelectorAll("nav a")];
+const light = document.querySelector("nav .tubelight");
+
+let activeIndex = 0;
+let currentIndex = 0;
+let increment = 1;
+links.forEach((link, index) => {
+	if (links[index].classList.contains("active")) {
+		light.style.left = `${links[index].offsetLeft + light.offsetWidth / 4}px`;
+	}
+
+	link.addEventListener("click", e => {
+		activeIndex = index;
+		let t = setInterval(() => {
+			if (activeIndex > currentIndex) increment = 1;
+			else if (activeIndex < currentIndex) increment = -1;
+			currentIndex += increment;
+
+			links[currentIndex].classList.add("active");
+			if (currentIndex != -1) links[currentIndex - increment].classList.remove("active");
+
+			if (currentIndex == activeIndex) {
+				e.target.classList.add("active");
+				increment = 0;
+				clearInterval(t);
+			}
+		}, 50);
+		light.style.left = `${e.target.offsetLeft + light.offsetWidth / 4}px`;
+	});
+});
\ No newline at end of file
diff --git a/tab-bar-interaction-1/dist/style.css b/tab-bar-interaction-1/dist/style.css
new file mode 100644
index 0000000..0bced55
--- /dev/null
+++ b/tab-bar-interaction-1/dist/style.css
@@ -0,0 +1,102 @@
+:root {
+  --background: #cecece;
+  --scale: 1;
+  --icon-size: 24px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--background);
+  overflow: hidden;
+}
+
+nav {
+  position: relative;
+  min-width: 350px;
+  min-height: 80px;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  border-radius: 10px;
+  padding: 0 15px;
+  background: black;
+  box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.12), 0 22.3px 17.9px rgba(0, 0, 0, 0.08), 0 100px 80px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+}
+nav ul {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+nav ul li {
+  list-style: none;
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+nav ul li a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+nav ul li a svg {
+  fill: #fff;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+  transition: opacity 100ms ease;
+  pointer-events: none;
+}
+nav ul li a.active svg {
+  opacity: 1;
+}
+nav .tubelight {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  transform: translateX(-50%);
+  width: 45px;
+  height: 5px;
+  border-radius: 5px;
+  background: #ffffff;
+  transition: left 400ms ease;
+  z-index: 10;
+}
+nav .tubelight .light-ray {
+  position: absolute;
+  left: -30%;
+  top: 5px;
+  width: 160%;
+  height: 80px;
+  clip-path: polygon(5% 100%, 25% 0px, 75% 0px, 95% 100%);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) -50%, rgba(255, 255, 255, 0) 90%);
+  pointer-events: none;
+}
+
+.support {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  padding: 10px;
+  display: flex;
+}
+.support a {
+  margin: 0 10px;
+  color: #222;
+  font-size: 1.8rem;
+  backface-visibility: hidden;
+  transition: all 150ms ease;
+}
+.support a:hover {
+  transform: scale(1.1);
+}
\ No newline at end of file
diff --git a/tab-bar-interaction-1/license.txt b/tab-bar-interaction-1/license.txt
new file mode 100644
index 0000000..4f1a598
--- /dev/null
+++ b/tab-bar-interaction-1/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Sikriti Dakua (https://codepen.io/dev_loop/pen/WNvBzZG)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/tab-bar-interaction-1/src/index.html b/tab-bar-interaction-1/src/index.html
new file mode 100644
index 0000000..e4fe406
--- /dev/null
+++ b/tab-bar-interaction-1/src/index.html
@@ -0,0 +1,79 @@
+
+<nav>
+	<ul>
+		<li>
+			<a class="active">
+				<svg><use xlink:href="#home-icon"></use></svg>
+			</a>
+		</li>
+	</ul>
+	<ul>
+		<li>
+			<a>
+				<svg><use xlink:href="#bookmark-icon"></use></svg>
+			</a>
+		</li>
+	</ul>
+	<ul>
+		<li>
+			<a>
+				<svg><use xlink:href="#plus-icon"></use></svg>
+			</a>
+		</li>
+	</ul>
+	<ul>
+		<li>
+			<a>
+				<svg><use xlink:href="#user-icon"></use></svg>
+			</a>
+		</li>
+	</ul>
+	<ul>
+		<li>
+			<a>
+				<svg><use xlink:href="#settings-icon"></use></svg>
+			</a>
+		</li>
+	</ul>
+
+	<div class="tubelight">
+		<div class="light-ray"></div>
+	</div>
+</nav>
+
+
+
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="home-icon">
+		<path
+				d="M13.1428571,14.5 C13.6571429,14.5 14,14.175507 14,13.6887676 L14,6.38767551 C14,6.14430577 13.9142857,5.90093604 13.6571429,5.73868955 L8.51428571,1.6825273 C8.17142857,1.43915757 7.74285714,1.43915757 7.4,1.6825273 L2.25714286,5.73868955 C2.08571429,5.90093604 2,6.14430577 2,6.38767551 L2,13.6887676 C2,14.175507 2.34285714,14.5 2.85714286,14.5 L13.1428571,14.5 Z M5.42857143,12.8775351 L3.71428571,12.8775351 L3.71428571,6.79329173 L8,3.38611544 L12.2857143,6.79329173 L12.2857143,12.8775351 L10.5714286,12.8775351 L5.42857143,12.8775351 Z">
+		</path>
+	</symbol>
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="favorites-icon">
+		<path
+				d="M7.5125,14.3196446 C6.8625,13.7292662 1.5,9.09057902 1.5,5.54830881 C1.5,3.27113511 3.2875,1.5 5.4,1.5 C6.375,1.5 7.26875,1.92169883 8,2.5120772 C8.73125,1.83735907 9.625,1.5 10.6,1.5 C12.79375,1.5 14.5,3.35547487 14.5,5.54830881 C14.5,9.09057902 9.1375,13.7292662 8.4875,14.2353048 C8.24375,14.5726639 7.75625,14.5726639 7.5125,14.3196446 Z M5.4,3.18679534 C4.18125,3.18679534 3.125,4.28321231 3.125,5.54830881 C3.125,7.40378368 5.96875,10.6086948 8,12.4641697 C9.70625,10.8617141 12.875,7.57246322 12.875,5.54830881 C12.875,4.19887254 11.81875,3.18679534 10.6,3.18679534 C9.86875,3.18679534 9.1375,3.60849417 8.73125,4.28321231 C8.40625,4.78925091 7.675,4.78925091 7.35,4.28321231 C6.8625,3.60849417 6.2125,3.18679534 5.4,3.18679534 Z">
+		</path>
+	</symbol>
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 568" id="settings-icon">
+		<path d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z" />
+	</symbol>
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="plus-icon">
+		<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M12 2C6.48 2 2 6.48001 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48001 17.52 2 12 2ZM11 7V11H7V13H11V17H13V13H17V11H13V7H11ZM4 12C4 16.41 7.59 20 12 20C16.41 20 20 16.41 20 12C20 7.59 16.41 4 12 4C7.59 4 4 7.59 4 12Z" />
+	</symbol>
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="bookmark-icon">
+		<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M7 3H17C18.1 3 19 3.89999 19 5V21L12 18L5 21V5C5 3.89999 5.90002 3 7 3ZM12 15.82L17 18V5H7V18L12 15.82Z" />
+	</symbol>
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 570" id="user-icon">
+		<path d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z" />
+	</symbol>
+</svg>
+
+
+
+
+<div class="support">
+	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
+	<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
+</div>
\ No newline at end of file
diff --git a/tab-bar-interaction-1/src/script.js b/tab-bar-interaction-1/src/script.js
new file mode 100644
index 0000000..3c850b0
--- /dev/null
+++ b/tab-bar-interaction-1/src/script.js
@@ -0,0 +1,33 @@
+console.clear();
+
+const uls = document.querySelectorAll("nav ul");
+const links = [...document.querySelectorAll("nav a")];
+const light = document.querySelector("nav .tubelight");
+
+let activeIndex = 0;
+let currentIndex = 0;
+let increment = 1;
+links.forEach((link, index) => {
+	if (links[index].classList.contains("active")) {
+		light.style.left = `${links[index].offsetLeft + light.offsetWidth / 4}px`;
+	}
+
+	link.addEventListener("click", e => {
+		activeIndex = index;
+		let t = setInterval(() => {
+			if (activeIndex > currentIndex) increment = 1;
+			else if (activeIndex < currentIndex) increment = -1;
+			currentIndex += increment;
+
+			links[currentIndex].classList.add("active");
+			if (currentIndex != -1) links[currentIndex - increment].classList.remove("active");
+
+			if (currentIndex == activeIndex) {
+				e.target.classList.add("active");
+				increment = 0;
+				clearInterval(t);
+			}
+		}, 50);
+		light.style.left = `${e.target.offsetLeft + light.offsetWidth / 4}px`;
+	});
+});
diff --git a/tab-bar-interaction-1/src/style.scss b/tab-bar-interaction-1/src/style.scss
new file mode 100644
index 0000000..4b098f0
--- /dev/null
+++ b/tab-bar-interaction-1/src/style.scss
@@ -0,0 +1,108 @@
+:root {
+	--background: #cecece;
+	--scale: 1;
+	--icon-size: 24px;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	width: 100%;
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: var(--background);
+	overflow: hidden;
+}
+
+nav {
+	position: relative;
+	min-width: 350px;
+	min-height: 80px;
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	border-radius: 10px;
+	padding: 0 15px;
+	background: rgb(0, 0, 0);
+	box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.12), 0 22.3px 17.9px rgba(0, 0, 0, 0.08), 0 100px 80px rgba(0, 0, 0, 0.04);
+	overflow: hidden;
+	ul {
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		li {
+			list-style: none;
+			width: var(--icon-size);
+			height: var(--icon-size);
+			a {
+				display: block;
+				width: 100%;
+				height: 100%;
+				cursor: pointer;
+				svg {
+					fill: #fff;
+					width: 100%;
+					height: 100%;
+					opacity: 0.4;
+					transition: opacity 100ms ease;
+					pointer-events: none;
+				}
+				&.active {
+					svg {
+						opacity: 1;
+					}
+				}
+			}
+		}
+	}
+	.tubelight {
+		position: absolute;
+		left: 0px;
+		top: 0px;
+		transform: translateX(-50%);
+		width: 45px;
+		height: 5px;
+		border-radius: 5px;
+		background: #ffffff;
+		transition: left 400ms ease;
+		z-index: 10;
+		.light-ray {
+			position: absolute;
+			left: -30%;
+			top: 5px;
+			width: 160%;
+			height: 80px;
+			clip-path: polygon(5% 100%, 25% 0px, 75% 0px, 95% 100%);
+			background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) -50%, rgba(255, 255, 255, 0) 90%);
+			pointer-events: none;
+		}
+	}
+}
+
+
+
+
+.support{
+	position: fixed;
+	right: 10px;
+	bottom: 10px;
+	padding: 10px;
+	display: flex;
+	a{
+		margin: 0 10px;
+		color: #222;
+		font-size: 1.8rem;
+		backface-visibility: hidden;
+		transition: all 150ms ease;
+		&:hover{
+			transform: scale(1.1);
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/tabbar-animationonly-css/README.markdown b/tabbar-animationonly-css/README.markdown
new file mode 100644
index 0000000..c01f1da
--- /dev/null
+++ b/tabbar-animationonly-css/README.markdown
@@ -0,0 +1,4 @@
+# Tabbar animation - Only CSS
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/milanraring/pen/qBEPzKB](https://codepen.io/milanraring/pen/qBEPzKB).
+
+ Awesome tabbar animation
\ No newline at end of file
diff --git a/tabbar-animationonly-css/dist/index.html b/tabbar-animationonly-css/dist/index.html
new file mode 100644
index 0000000..c62cf50
--- /dev/null
+++ b/tabbar-animationonly-css/dist/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Tabbar animation - Only CSS</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="tabs">
+  <!-- TAB 1 -->
+  <input type="radio" name="tab" id="tab-01" checked />
+  <label for="tab-01">
+    <svg>
+      <use xlink:href="#icon-01" class="icon" />
+    </svg>
+    <div class="wave"></div>
+  </label>
+  <!-- TAB 2 -->
+  <input type="radio" name="tab" id="tab-02" />
+  <label for="tab-02">
+    <svg>
+      <use xlink:href="#icon-02" class="icon" />
+    </svg>
+    <div class="wave"></div>
+  </label>
+  <!-- TAB 3 -->
+  <input type="radio" name="tab" id="tab-03" />
+  <label for="tab-03">
+    <svg>
+      <use xlink:href="#icon-03" class="icon" />
+    </svg>
+    <div class="wave"></div>
+  </label>
+  <!-- TAB 4 -->
+  <input type="radio" name="tab" id="tab-04" />
+  <label for="tab-04">
+    <svg>
+      <use xlink:href="#icon-04" class="icon" />
+    </svg>
+    <div class="wave"></div>
+  </label>
+</div>
+
+
+<!-- SVG -->
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-01">
+    <path d="M13.93,1H20.8A4.21,4.21,0,0,1,25,5.2V20.8A4.21,4.21,0,0,1,20.8,25H5.2A4.21,4.21,0,0,1,1,20.8V5.2A4.21,4.21,0,0,1,5.2,1h.47"/>
+    <line x1="16" y1="10" x2="18" y2="10"/>
+    <line x1="8" y1="10" x2="12" y2="10"/>
+    <line x1="8" y1="15" x2="18" y2="15"/>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-02">
+    <path d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1"/>
+  <polygon points="15 14.33 11 17 11 11.67 15 9 15 14.33"/>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-03">
+    <path d="M7.91,2.08a11.15,11.15,0,0,0-5.73,9.81v6a7.83,7.83,0,0,1-1,2.92A1.47,1.47,0,0,0,2.43,23H23.57a1.47,1.47,0,0,0,1.26-2.16,7.83,7.83,0,0,1-1-2.92v-6A11.06,11.06,0,0,0,15.18,1"/>
+  <path d="M15,23a2,2,0,0,1-4,0"/>
+  <path d="M16,5.51A6.53,6.53,0,0,1,19.65,9.4"/>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-04">
+    <path d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1"/>
+  <path d="M18,18.26a8,8,0,0,1-10.09-.1"/>
+  </symbol>
+</svg>
+
+<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0">
+  <clipPath id="path-icon-01">
+    <path d="M13.93,1H20.8A4.21,4.21,0,0,1,25,5.2V20.8A4.21,4.21,0,0,1,20.8,25H5.2A4.21,4.21,0,0,1,1,20.8V5.2A4.21,4.21,0,0,1,5.2,1h.47"/>
+  </clipPath>
+  <clipPath id="path-icon-02">
+    <path d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1"/>
+  </clipPath>
+  <clipPath id="path-icon-03">
+    <path d="M7.91,2.08a11.15,11.15,0,0,0-5.73,9.81v6a7.83,7.83,0,0,1-1,2.92A1.47,1.47,0,0,0,2.43,23H23.57a1.47,1.47,0,0,0,1.26-2.16,7.83,7.83,0,0,1-1-2.92v-6A11.06,11.06,0,0,0,15.18,1"/>
+  </clipPath>
+  <clipPath id="path-icon-04">
+    <path d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1"/>
+  </clipPath>
+</svg>
+
+
+<!--- ## DRIBBBLE + TWITTER ############# -->
+<div class="socials">
+  <a class="dribbble" href="https://dribbble.com/shots/9713873-Tabbar-animation-CodePen" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" fill="black" d="M16 0C7.16703 0 0 7.16703 0 16C0 24.833 7.16703 32 16 32C24.8156 32 32 24.833 32 16C32 7.16703 24.8156 0 16 0ZM26.5683 7.37527C28.4772 9.70065 29.6226 12.6681 29.6573 15.8785C29.2061 15.7918 24.6941 14.872 20.1475 15.4447C20.0434 15.2191 19.9566 14.9761 19.8525 14.7332C19.5748 14.0738 19.2625 13.397 18.9501 12.7549C23.9826 10.7072 26.2733 7.75705 26.5683 7.37527ZM16 2.36009C19.4707 2.36009 22.6464 3.66161 25.0586 5.7961C24.8156 6.14317 22.7505 8.90239 17.8915 10.7245C15.6529 6.61171 13.1714 3.24512 12.7896 2.72451C13.8134 2.48156 14.8894 2.36009 16 2.36009ZM10.1866 3.64425C10.551 4.13015 12.9805 7.5141 15.2538 11.5401C8.86768 13.2408 3.22777 13.2061 2.62039 13.2061C3.50542 8.9718 6.36876 5.44902 10.1866 3.64425ZM2.32538 16.0174C2.32538 15.8785 2.32538 15.7397 2.32538 15.6009C2.9154 15.6182 9.54447 15.705 16.3644 13.6573C16.7636 14.4208 17.128 15.2017 17.4751 15.9826C17.3015 16.0347 17.1106 16.0868 16.9371 16.1388C9.89154 18.4121 6.14317 24.6247 5.8308 25.1453C3.6616 22.7332 2.32538 19.5228 2.32538 16.0174ZM16 29.6746C12.8416 29.6746 9.92625 28.5987 7.61822 26.7939C7.86117 26.2907 10.6377 20.9458 18.3427 18.256C18.3774 18.2386 18.3948 18.2386 18.4295 18.2213C20.3557 23.2017 21.1367 27.3839 21.3449 28.5813C19.6963 29.2928 17.8915 29.6746 16 29.6746ZM23.6182 27.3319C23.4794 26.4989 22.7505 22.5076 20.9631 17.5965C25.2495 16.9197 28.9978 18.0304 29.4664 18.1866C28.8764 21.987 26.6898 25.2668 23.6182 27.3319Z" fill="#EA4C89"></path></svg></a>
+  <a class="twitter" href="https://twitter.com/MilanRaring" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 72 72"><path fill="black" d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/tabbar-animationonly-css/dist/style.css b/tabbar-animationonly-css/dist/style.css
new file mode 100644
index 0000000..5268a81
--- /dev/null
+++ b/tabbar-animationonly-css/dist/style.css
@@ -0,0 +1,257 @@
+.tabs {
+  --background: #FFFFFF;
+  --light-grey: #C6CFD9;
+  --wave-color: #2AC8DD;
+  --width: 300px;
+  --height: 75px;
+  --border-radius: var(--height);
+  background: var(--background);
+  width: var(--width);
+  height: var(--height);
+  padding: 0;
+  position: relative;
+  border-radius: var(--border-radius);
+  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
+  display: -webkit-box;
+  display: flex;
+  justify-content: space-around;
+  -webkit-box-align: center;
+          align-items: center;
+  padding: 0 15px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.tabs label {
+  width: 26px;
+  height: 26px;
+  cursor: pointer;
+  position: relative;
+  display: -webkit-box;
+  display: flex;
+  justify-content: space-around;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-transform-origin: center bottom;
+          transform-origin: center bottom;
+}
+.tabs label::before {
+  content: "";
+  height: 4px;
+  width: 4px;
+  border-radius: 0% 100% 50% 50% / 0% 50% 50% 100%;
+  -webkit-transform: scale(1, 1) rotate(45deg);
+          transform: scale(1, 1) rotate(45deg);
+  -webkit-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+  background: var(--wave-color);
+  display: block;
+  position: absolute;
+  top: -30px;
+}
+.tabs label svg {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+}
+.tabs label svg .icon {
+  fill: none;
+  stroke: var(--light-grey);
+  stroke-dashoffset: 98;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  -webkit-transition: stroke .15s linear .3s;
+  transition: stroke .15s linear .3s;
+}
+.tabs label .wave {
+  height: 26px;
+  width: 26px;
+  position: absolute;
+  overflow: hidden;
+}
+.tabs label .wave::before, .tabs label .wave::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -12px;
+  right: 0;
+  background-repeat: repeat;
+  height: 14px;
+  width: 48px;
+  background-size: 12px 12px;
+  -webkit-animation: wave-animation 3s linear infinite;
+          animation: wave-animation 3s linear infinite;
+  -webkit-transition: bottom .15s ease-out .35s;
+  transition: bottom .15s ease-out .35s;
+}
+.tabs label .wave::before {
+  background-image: radial-gradient(circle at 6px -3px, transparent 6px, var(--wave-color) 6px);
+  -webkit-animation-duration: 2s;
+          animation-duration: 2s;
+  opacity: .5;
+}
+.tabs label .wave::after {
+  background-image: radial-gradient(circle at 6px -3px, transparent 6px, var(--wave-color) 6px);
+  -webkit-animation-duration: 3s;
+          animation-duration: 3s;
+}
+.tabs label:nth-of-type(1) .wave {
+  -webkit-clip-path: url(#path-icon-01);
+          clip-path: url(#path-icon-01);
+}
+.tabs label:nth-of-type(2) .wave {
+  -webkit-clip-path: url(#path-icon-02);
+          clip-path: url(#path-icon-02);
+}
+.tabs label:nth-of-type(3) .wave {
+  -webkit-clip-path: url(#path-icon-03);
+          clip-path: url(#path-icon-03);
+}
+.tabs label:nth-of-type(4) .wave {
+  -webkit-clip-path: url(#path-icon-04);
+          clip-path: url(#path-icon-04);
+}
+.tabs input {
+  display: none;
+}
+.tabs input:checked + label {
+  -webkit-animation: wiggle-animation 1s ease .3s;
+          animation: wiggle-animation 1s ease .3s;
+}
+.tabs input:checked + label::before {
+  -webkit-animation: drop-animation .35s ease-in both;
+          animation: drop-animation .35s ease-in both;
+}
+.tabs input:checked + label svg .icon {
+  stroke: #4B4B4B;
+}
+.tabs input:checked + label .wave:before {
+  bottom: 0;
+}
+.tabs input:checked + label .wave:after {
+  bottom: -4px;
+}
+
+@-webkit-keyframes wiggle-animation {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  20% {
+    -webkit-transform: rotate(-7deg);
+            transform: rotate(-7deg);
+  }
+  60% {
+    -webkit-transform: rotate(7deg);
+            transform: rotate(7deg);
+  }
+  90% {
+    -webkit-transform: rotate(-3deg);
+            transform: rotate(-3deg);
+  }
+  100% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+}
+
+@keyframes wiggle-animation {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  20% {
+    -webkit-transform: rotate(-7deg);
+            transform: rotate(-7deg);
+  }
+  60% {
+    -webkit-transform: rotate(7deg);
+            transform: rotate(7deg);
+  }
+  90% {
+    -webkit-transform: rotate(-3deg);
+            transform: rotate(-3deg);
+  }
+  100% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+}
+@-webkit-keyframes wave-animation {
+  0% {
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+  100% {
+    -webkit-transform: translateX(-50%);
+            transform: translateX(-50%);
+  }
+}
+@keyframes wave-animation {
+  0% {
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+  100% {
+    -webkit-transform: translateX(-50%);
+            transform: translateX(-50%);
+  }
+}
+@-webkit-keyframes drop-animation {
+  70% {
+    -webkit-transform: scale(0.8, 3) rotate(45deg);
+            transform: scale(0.8, 3) rotate(45deg);
+    top: -7px;
+  }
+  100% {
+    -webkit-transform: scale(1.5, 0.5) rotate(45deg);
+            transform: scale(1.5, 0.5) rotate(45deg);
+    top: 19px;
+  }
+}
+@keyframes drop-animation {
+  70% {
+    -webkit-transform: scale(0.8, 3) rotate(45deg);
+            transform: scale(0.8, 3) rotate(45deg);
+    top: -7px;
+  }
+  100% {
+    -webkit-transform: scale(1.5, 0.5) rotate(45deg);
+            transform: scale(1.5, 0.5) rotate(45deg);
+    top: 19px;
+  }
+}
+body {
+  background: #eeeef5;
+  height: 100vh;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+}
+body .socials {
+  position: fixed;
+  display: block;
+  left: 20px;
+  bottom: 20px;
+}
+body .socials > a {
+  display: block;
+  width: 30px;
+  opacity: .2;
+  -webkit-transform: scale(var(--scale, 0.8));
+          transform: scale(var(--scale, 0.8));
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
+  transition: -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
+  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
+  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91), -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
+}
+body .socials > a:hover {
+  --scale: 1;
+}
\ No newline at end of file
diff --git a/tabbar-animationonly-css/license.txt b/tabbar-animationonly-css/license.txt
new file mode 100644
index 0000000..2aef6cb
--- /dev/null
+++ b/tabbar-animationonly-css/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Milan Raring (https://codepen.io/milanraring/pen/qBEPzKB)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/tabbar-animationonly-css/src/index.html b/tabbar-animationonly-css/src/index.html
new file mode 100644
index 0000000..bac466b
--- /dev/null
+++ b/tabbar-animationonly-css/src/index.html
@@ -0,0 +1,80 @@
+<div class="tabs">
+  <!-- TAB 1 -->
+  <input type="radio" name="tab" id="tab-01" checked />
+  <label for="tab-01">
+    <svg>
+      <use xlink:href="#icon-01" class="icon" />
+    </svg>
+    <div class="wave"></div>
+  </label>
+  <!-- TAB 2 -->
+  <input type="radio" name="tab" id="tab-02" />
+  <label for="tab-02">
+    <svg>
+      <use xlink:href="#icon-02" class="icon" />
+    </svg>
+    <div class="wave"></div>
+  </label>
+  <!-- TAB 3 -->
+  <input type="radio" name="tab" id="tab-03" />
+  <label for="tab-03">
+    <svg>
+      <use xlink:href="#icon-03" class="icon" />
+    </svg>
+    <div class="wave"></div>
+  </label>
+  <!-- TAB 4 -->
+  <input type="radio" name="tab" id="tab-04" />
+  <label for="tab-04">
+    <svg>
+      <use xlink:href="#icon-04" class="icon" />
+    </svg>
+    <div class="wave"></div>
+  </label>
+</div>
+
+
+<!-- SVG -->
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-01">
+    <path d="M13.93,1H20.8A4.21,4.21,0,0,1,25,5.2V20.8A4.21,4.21,0,0,1,20.8,25H5.2A4.21,4.21,0,0,1,1,20.8V5.2A4.21,4.21,0,0,1,5.2,1h.47"/>
+    <line x1="16" y1="10" x2="18" y2="10"/>
+    <line x1="8" y1="10" x2="12" y2="10"/>
+    <line x1="8" y1="15" x2="18" y2="15"/>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-02">
+    <path d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1"/>
+  <polygon points="15 14.33 11 17 11 11.67 15 9 15 14.33"/>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-03">
+    <path d="M7.91,2.08a11.15,11.15,0,0,0-5.73,9.81v6a7.83,7.83,0,0,1-1,2.92A1.47,1.47,0,0,0,2.43,23H23.57a1.47,1.47,0,0,0,1.26-2.16,7.83,7.83,0,0,1-1-2.92v-6A11.06,11.06,0,0,0,15.18,1"/>
+  <path d="M15,23a2,2,0,0,1-4,0"/>
+  <path d="M16,5.51A6.53,6.53,0,0,1,19.65,9.4"/>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-04">
+    <path d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1"/>
+  <path d="M18,18.26a8,8,0,0,1-10.09-.1"/>
+  </symbol>
+</svg>
+
+<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0">
+  <clipPath id="path-icon-01">
+    <path d="M13.93,1H20.8A4.21,4.21,0,0,1,25,5.2V20.8A4.21,4.21,0,0,1,20.8,25H5.2A4.21,4.21,0,0,1,1,20.8V5.2A4.21,4.21,0,0,1,5.2,1h.47"/>
+  </clipPath>
+  <clipPath id="path-icon-02">
+    <path d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1"/>
+  </clipPath>
+  <clipPath id="path-icon-03">
+    <path d="M7.91,2.08a11.15,11.15,0,0,0-5.73,9.81v6a7.83,7.83,0,0,1-1,2.92A1.47,1.47,0,0,0,2.43,23H23.57a1.47,1.47,0,0,0,1.26-2.16,7.83,7.83,0,0,1-1-2.92v-6A11.06,11.06,0,0,0,15.18,1"/>
+  </clipPath>
+  <clipPath id="path-icon-04">
+    <path d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1"/>
+  </clipPath>
+</svg>
+
+
+<!--- ## DRIBBBLE + TWITTER ############# -->
+<div class="socials">
+  <a class="dribbble" href="https://dribbble.com/shots/9713873-Tabbar-animation-CodePen" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" fill="black" d="M16 0C7.16703 0 0 7.16703 0 16C0 24.833 7.16703 32 16 32C24.8156 32 32 24.833 32 16C32 7.16703 24.8156 0 16 0ZM26.5683 7.37527C28.4772 9.70065 29.6226 12.6681 29.6573 15.8785C29.2061 15.7918 24.6941 14.872 20.1475 15.4447C20.0434 15.2191 19.9566 14.9761 19.8525 14.7332C19.5748 14.0738 19.2625 13.397 18.9501 12.7549C23.9826 10.7072 26.2733 7.75705 26.5683 7.37527ZM16 2.36009C19.4707 2.36009 22.6464 3.66161 25.0586 5.7961C24.8156 6.14317 22.7505 8.90239 17.8915 10.7245C15.6529 6.61171 13.1714 3.24512 12.7896 2.72451C13.8134 2.48156 14.8894 2.36009 16 2.36009ZM10.1866 3.64425C10.551 4.13015 12.9805 7.5141 15.2538 11.5401C8.86768 13.2408 3.22777 13.2061 2.62039 13.2061C3.50542 8.9718 6.36876 5.44902 10.1866 3.64425ZM2.32538 16.0174C2.32538 15.8785 2.32538 15.7397 2.32538 15.6009C2.9154 15.6182 9.54447 15.705 16.3644 13.6573C16.7636 14.4208 17.128 15.2017 17.4751 15.9826C17.3015 16.0347 17.1106 16.0868 16.9371 16.1388C9.89154 18.4121 6.14317 24.6247 5.8308 25.1453C3.6616 22.7332 2.32538 19.5228 2.32538 16.0174ZM16 29.6746C12.8416 29.6746 9.92625 28.5987 7.61822 26.7939C7.86117 26.2907 10.6377 20.9458 18.3427 18.256C18.3774 18.2386 18.3948 18.2386 18.4295 18.2213C20.3557 23.2017 21.1367 27.3839 21.3449 28.5813C19.6963 29.2928 17.8915 29.6746 16 29.6746ZM23.6182 27.3319C23.4794 26.4989 22.7505 22.5076 20.9631 17.5965C25.2495 16.9197 28.9978 18.0304 29.4664 18.1866C28.8764 21.987 26.6898 25.2668 23.6182 27.3319Z" fill="#EA4C89"></path></svg></a>
+  <a class="twitter" href="https://twitter.com/MilanRaring" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 72 72"><path fill="black" d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
+</div> 
\ No newline at end of file
diff --git a/tabbar-animationonly-css/src/style.scss b/tabbar-animationonly-css/src/style.scss
new file mode 100644
index 0000000..9b2b845
--- /dev/null
+++ b/tabbar-animationonly-css/src/style.scss
@@ -0,0 +1,179 @@
+.tabs {
+  --background: #FFFFFF;
+  --light-grey: #C6CFD9;
+  --wave-color: #2AC8DD;
+  --width: 300px;    
+  --height: 75px;
+  --border-radius: var(--height);     
+  background: var(--background);
+  width: var(--width);
+  height: var(--height);
+  padding: 0;
+  position: relative;
+  border-radius: var(--border-radius);
+  box-shadow: 0 10px 30px rgba(#414856, 0.05);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 15px;
+  box-sizing: border-box;
+  overflow: hidden;
+  label {
+    width: 26px;
+    height: 26px;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    transform-origin: center bottom;
+    &::before {
+      content: "";
+      height: 4px;
+      width: 4px;
+      border-radius: 0% 100% 50% 50% / 0% 50% 50% 100%;
+      transform: scale(1, 1) rotate(45deg);
+      transform-origin: 50% 50%;
+      background: var(--wave-color);
+      display: block;
+      position: absolute;
+      top: -30px;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      z-index: 1;
+      .icon {
+        fill: none;
+        stroke: var(--light-grey);
+        stroke-dashoffset: 98;
+        stroke-width: 2px;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        transition: stroke .15s linear .3s;
+      }
+    }
+    .wave {
+      height: 26px;
+      width: 26px;
+      position: absolute;
+      overflow: hidden;
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: -12px;
+        right: 0;
+        background-repeat: repeat;
+        height: 14px;
+        width: 48px;
+        background-size: 12px 12px;
+        animation: wave-animation 3s linear infinite;
+        transition: bottom .15s ease-out .35s;
+      }
+      &::before {
+        background-image: radial-gradient(circle at 6px -3px, transparent 6px, var(--wave-color) 6px);
+        animation-duration: 2s;
+        opacity: .5;
+      }
+      &::after {
+        background-image: radial-gradient(circle at 6px -3px, transparent 6px, var(--wave-color) 6px);
+        animation-duration: 3s;
+      }
+    }
+    @for $icon from 1 through 4 {
+      &:nth-of-type(#{$icon}) {
+        .wave {
+          clip-path: url(#path-icon-0+$icon);
+        }
+      }
+    }
+  }
+  input {
+    display: none;
+    &:checked {
+      + label {
+        animation: wiggle-animation 1s ease .3s;
+        &::before {
+          animation: drop-animation .35s ease-in both;
+        }
+        svg {
+          .icon {
+            stroke: #4B4B4B;
+          }
+        }
+        .wave {
+          &:before {
+            bottom: 0;
+          }
+          &:after {
+            bottom: -4px;
+          }
+        }
+      }
+    }
+  }
+}
+@keyframes wiggle-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  20% {
+    transform: rotate(-7deg);
+  }
+  60% {
+    transform: rotate(7deg);
+  }
+  90% {
+    transform: rotate(-3deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+@keyframes wave-animation {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+@keyframes drop-animation {
+  70% {
+    transform: scale(.8, 3) rotate(45deg);
+    top: -7px;
+  }
+  100% {
+    transform: scale(1.5, .5) rotate(45deg);
+    top: 19px;
+  }
+}
+
+//--- ## BASIC #############
+body {
+  background: #eeeef5;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .socials {
+    position: fixed;
+    display: block;
+    left: 20px;
+    bottom: 20px;
+    > a {
+      display: block;
+      width: 30px;
+      opacity: .2;
+      transform: scale(var(--scale, .8));
+      transition: transform .3s cubic-bezier(0.38,-0.12, 0.24, 1.91);
+      &:hover {
+        --scale: 1;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/task-management-dashboard-ui/LICENSE.txt b/task-management-dashboard-ui/LICENSE.txt
new file mode 100644
index 0000000..e2ae83d
--- /dev/null
+++ b/task-management-dashboard-ui/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Aybüke Ceylan (https://codepen.io/aybukeceylan/pen/gOpbRPO)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/task-management-dashboard-ui/README.md b/task-management-dashboard-ui/README.md
new file mode 100644
index 0000000..86bb156
--- /dev/null
+++ b/task-management-dashboard-ui/README.md
@@ -0,0 +1,5 @@
+# Task Management Dashboard UI
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/aybukeceylan/pen/gOpbRPO](https://codepen.io/aybukeceylan/pen/gOpbRPO).
+
+Inspired by : https://dribbble.com/shots/6938734-Task-Management-Dashboard-Design
\ No newline at end of file
diff --git a/task-management-dashboard-ui/dist/index.html b/task-management-dashboard-ui/dist/index.html
new file mode 100644
index 0000000..f617920
--- /dev/null
+++ b/task-management-dashboard-ui/dist/index.html
@@ -0,0 +1,360 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Task Management Dashboard UI</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet">
+<div class="task-manager">
+  <div class="left-bar">
+    <div class="upper-part">
+      <div class="actions">
+        <div class="circle"></div>
+        <div class="circle-2"></div>
+      </div>
+    </div>
+    <div class="left-content">
+      <ul class="action-list">
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
+            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-inbox"
+            viewBox="0 0 24 24">
+            <path d="M22 12h-6l-2 3h-4l-2-3H2" />
+            <path
+              d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+          </svg>
+          <span>Inbox</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-star">
+            <polygon
+              points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+            </svg>
+          <span> Today</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
+            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-calendar"
+            viewBox="0 0 24 24">
+            <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+            <path d="M16 2v4M8 2v4m-5 4h18" />
+          </svg>
+          <span>Upcoming</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-hash">
+            <line x1="4" y1="9" x2="20" y2="9" />
+            <line x1="4" y1="15" x2="20" y2="15" />
+            <line x1="10" y1="3" x2="8" y2="21" />
+            <line x1="16" y1="3" x2="14" y2="21" /></svg>
+          <span>Important</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-users">
+            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+            <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
+          <span>Meetings</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
+            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-trash"
+            viewBox="0 0 24 24">
+            <path d="M3 6h18m-2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+          </svg>
+          <span>Trash</span>
+        </li>
+      </ul>
+      <ul class="category-list">
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-users">
+            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+            <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
+          <span>Family</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
+            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-sun"
+            viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="5" />
+            <path
+              d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+          </svg>
+          <span>Vacation</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-trending-up">
+            <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />
+            <polyline points="17 6 23 6 23 12" /></svg>
+          <span>Festival</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-zap">
+            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg>
+          <span>Concerts</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="page-content">
+    <div class="header">Today Tasks</div>
+    <div class="content-categories">
+      <div class="label-wrapper">
+        <input class="nav-item" name="nav" type="radio" id="opt-1">
+        <label class="category" for="opt-1">All</label>
+      </div>
+      <div class="label-wrapper">
+        <input class="nav-item" name="nav" type="radio" id="opt-2" checked>
+        <label class="category" for="opt-2">Important</label>
+      </div>
+      <div class="label-wrapper">
+        <input class="nav-item" name="nav" type="radio" id="opt-3">
+        <label class="category" for="opt-3">Notes</label>
+      </div>
+      <div class="label-wrapper">
+        <input class="nav-item" name="nav" type="radio" id="opt-4">
+        <label class="category" for="opt-4">Links</label>
+      </div>
+    </div>
+    <div class="tasks-wrapper">
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-1" checked>
+        <label for="item-1">
+          <span class="label-text">Dashboard Design Implementation</span>
+        </label>
+        <span class="tag approved">Approved</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-2" checked>
+        <label for="item-2">
+          <span class="label-text">Create a userflow</span>
+        </label>
+        <span class="tag progress">In Progress</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-3">
+        <label for="item-3">
+          <span class="label-text">Application Implementation</span>
+        </label>
+        <span class="tag review">In Review</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-4">
+        <label for="item-4">
+          <span class="label-text">Create a Dashboard Design</span>
+        </label>
+        <span class="tag progress">In Progress</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-5">
+        <label for="item-5">
+          <span class="label-text">Create a Web Application Design</span>
+        </label>
+        <span class="tag approved">Approved</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-6">
+        <label for="item-6">
+          <span class="label-text">Interactive Design</span>
+        </label>
+        <span class="tag review">In Review</span>
+      </div>
+      <div class="header upcoming">Upcoming Tasks</div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-7">
+        <label for="item-7">
+          <span class="label-text">Dashboard Design Implementation</span>
+        </label>
+        <span class="tag waiting">Waiting</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-8">
+        <label for="item-8">
+          <span class="label-text">Create a userflow</span>
+        </label>
+        <span class="tag waiting">Waiting</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-9">
+        <label for="item-9">
+          <span class="label-text">Application Implementation</span>
+        </label>
+        <span class="tag waiting">Waiting</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-10">
+        <label for="item-10">
+          <span class="label-text">Create a Dashboard Design</span>
+        </label>
+        <span class="tag waiting">Waiting</span>
+      </div>
+    </div>
+  </div>
+  <div class="right-bar">
+    <div class="top-part">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+        class="feather feather-users">
+        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+        <circle cx="9" cy="7" r="4" />
+        <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+        <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
+      <div class="count">6</div>
+    </div>
+    <div class="header">Schedule</div>
+    <div class="right-content">
+      <div class="task-box yellow">
+        <div class="description-task">
+          <div class="time">08:00 - 09:00 AM</div>
+          <div class="task-name">Product Review</div>
+        </div>
+        <div class="more-button"></div>
+        <div class="members">
+          <img
+            src="https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
+            alt="member">
+          <img
+            src="https://images.unsplash.com/photo-1476657680631-c07285ff2581?ixlib=rb-1.2.1&auto=format&fit=crop&w=2210&q=80"
+            alt="member-2">
+          <img
+            src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
+            alt="member-3">
+          <img
+            src="https://images.unsplash.com/photo-1455504490126-80ed4d83b3b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"
+            alt="member-4">
+        </div>
+      </div>
+      <div class="task-box blue">
+        <div class="description-task">
+          <div class="time">10:00 - 11:00 AM</div>
+          <div class="task-name">Design Meeting</div>
+        </div>
+        <div class="more-button"></div>
+        <div class="members">
+          <img
+            src="https://images.unsplash.com/photo-1484688493527-670f98f9b195?ixlib=rb-1.2.1&auto=format&fit=crop&w=2230&q=80"
+            alt="member">
+          <img
+            src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
+            alt="member-2">
+          <img
+            src="https://images.unsplash.com/photo-1455504490126-80ed4d83b3b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"
+            alt="member-3">
+        </div>
+      </div>
+      <div class="task-box red">
+        <div class="description-task">
+          <div class="time">01:00 - 02:00 PM</div>
+          <div class="task-name">Team Meeting</div>
+        </div>
+        <div class="more-button"></div>
+        <div class="members">
+          <img
+            src="https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
+            alt="member">
+          <img
+            src="https://images.unsplash.com/photo-1475552113915-6fcb52652ba2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80"
+            alt="member-2">
+          <img
+            src="https://images.unsplash.com/photo-1493752603190-08d8b5d1781d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"
+            alt="member-3">
+          <img
+            src="https://images.unsplash.com/photo-1484688493527-670f98f9b195?ixlib=rb-1.2.1&auto=format&fit=crop&w=2230&q=80"
+            alt="member-4">
+        </div>
+      </div>
+      <div class="task-box green">
+        <div class="description-task">
+          <div class="time">03:00 - 04:00 PM</div>
+          <div class="task-name">Release Event</div>
+        </div>
+        <div class="more-button"></div>
+        <div class="members">
+          <img
+            src="https://images.unsplash.com/photo-1523419409543-a5e549c1faa8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=943&q=80"
+            alt="member">
+          <img
+            src="https://images.unsplash.com/photo-1519742866993-66d3cfef4bbd?ixlib=rb-1.2.1&auto=format&fit=crop&w=881&q=80"
+            alt="member-2">
+          <img
+            src="https://images.unsplash.com/photo-1521122872341-065792fb2fa0?ixlib=rb-1.2.1&auto=format&fit=crop&w=2208&q=80"
+            alt="member-3">
+          <img
+            src="https://images.unsplash.com/photo-1486302913014-862923f5fd48?ixlib=rb-1.2.1&auto=format&fit=crop&w=3400&q=80"
+            alt="member-4">
+          <img
+            src="https://images.unsplash.com/photo-1484187216010-59798e9cc726?ixlib=rb-1.2.1&auto=format&fit=crop&w=955&q=80"
+            alt="member-5">
+        </div>
+      </div>
+      <div class="task-box blue">
+        <div class="description-task">
+          <div class="time">08:00 - 09:00 PM</div>
+          <div class="task-name">Release Event</div>
+        </div>
+        <div class="more-button"></div>
+        <div class="members">
+          <img
+            src="https://images.unsplash.com/photo-1523419409543-a5e549c1faa8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=943&q=80"
+            alt="member">
+          <img
+            src="https://images.unsplash.com/photo-1519742866993-66d3cfef4bbd?ixlib=rb-1.2.1&auto=format&fit=crop&w=881&q=80"
+            alt="member-2">
+          <img
+            src="https://images.unsplash.com/photo-1521122872341-065792fb2fa0?ixlib=rb-1.2.1&auto=format&fit=crop&w=2208&q=80"
+            alt="member-3">
+          <img
+            src="https://images.unsplash.com/photo-1486302913014-862923f5fd48?ixlib=rb-1.2.1&auto=format&fit=crop&w=3400&q=80"
+            alt="member-4">
+          <img
+            src="https://images.unsplash.com/photo-1484187216010-59798e9cc726?ixlib=rb-1.2.1&auto=format&fit=crop&w=955&q=80"
+            alt="member-5">
+        </div>
+      </div>
+      <div class="task-box yellow">
+        <div class="description-task">
+          <div class="time">11:00 - 12:00 PM</div>
+          <div class="task-name">Practise</div>
+        </div>
+        <div class="more-button"></div>
+        <div class="members">
+          <img
+            src="https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
+            alt="member">
+          <img
+            src="https://images.unsplash.com/photo-1476657680631-c07285ff2581?ixlib=rb-1.2.1&auto=format&fit=crop&w=2210&q=80"
+            alt="member-2">
+          <img
+            src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
+            alt="member-3">
+          <img
+            src="https://images.unsplash.com/photo-1455504490126-80ed4d83b3b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"
+            alt="member-4">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/task-management-dashboard-ui/dist/style.css b/task-management-dashboard-ui/dist/style.css
new file mode 100644
index 0000000..921f651
--- /dev/null
+++ b/task-management-dashboard-ui/dist/style.css
@@ -0,0 +1,383 @@
+* {
+  box-sizing: border-box;
+  outline: none;
+}
+
+:root {
+  --bg-color: #f5f8ff;
+  --main-color: #353536;
+  --secondary-color: #8e92a4;
+  --main-text-color: #5d606b;
+  --secondary-dark-color: #9496a5;
+  --tag-color-one: #e0fbf6;
+  --tag-color-text-one: #58c2a9;
+  --tag-color-two: #ece7fe;
+  --tag-color-text-two: #8972f3;
+  --tag-color-three: #fde7ea;
+  --tag-color-text-three: #e77f89;
+  --tag-color-four: #f7f8fc;
+  --tag-color-text-four: #a0a6b5;
+  --checkbox-color: #009e90;
+  --button-color: #49beb7;
+  --box-color: #fff1d6;
+  --box-color-2: #d3e6ff;
+  --box-color-3: #ffd9d9;
+  --box-color-4: #daffe5;
+  --task-color: #777982;
+}
+
+.top-part .count, .top-part, .item, body {
+  display: flex;
+  align-items: center;
+}
+
+body {
+  margin: 0;
+  justify-content: center;
+  flex-direction: column;
+  overflow: auto;
+  width: 100%;
+  height: 100vh;
+  padding: 20px;
+  font-family: "DM Sans", sans-serif;
+  font-size: 12px;
+  background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003235) 68%, rgba(255, 206, 196, 0.5) 163%), linear-gradient(163deg, rgba(49, 146, 170, 0.0794448997) 86%, rgba(239, 112, 138, 0.5) 40%), linear-gradient(30deg, rgba(76, 79, 173, 0.6173675717) 22%, rgba(237, 106, 134, 0.5) 169%), linear-gradient(48deg, rgba(31, 85, 147, 0.7323890642) 64%, rgba(247, 126, 132, 0.5) 43%);
+  background-blend-mode: overlay, multiply, color, normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.task-manager {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1200px;
+  height: 90vh;
+  max-height: 900px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 0.3px 2.2px rgba(0, 0, 0, 0.011), 0 0.7px 5.3px rgba(0, 0, 0, 0.016), 0 1.3px 10px rgba(0, 0, 0, 0.02), 0 2.2px 17.9px rgba(0, 0, 0, 0.024), 0 4.2px 33.4px rgba(0, 0, 0, 0.029), 0 10px 80px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+}
+
+.left-bar {
+  background-color: var(--bg-color);
+  width: 230px;
+  border-right: 1px solid #e3e7f7;
+  position: relative;
+}
+
+.left-content {
+  padding: 40px;
+}
+
+.item {
+  color: var(--main-color);
+  margin-bottom: 14px;
+  font-weight: 500;
+}
+.item svg {
+  width: 14px;
+  height: 14px;
+  color: currentcolor;
+  margin-right: 10px;
+}
+
+.category-list {
+  margin-top: 50px;
+}
+.category-list .item {
+  color: var(--secondary-color);
+}
+
+.actions {
+  padding: 12px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.circle {
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  background-color: #fe4d46;
+  box-shadow: 14px 0 0 0 #fbc023, 28px 0 0 0 #7dd21f;
+}
+
+.circle-2 {
+  border-radius: 50%;
+  width: 4px;
+  height: 4px;
+  background-color: #d5d7e3;
+  box-shadow: -6px 0 0 0 #d5d7e3, 6px 0 0 0 #d5d7e3;
+}
+
+.right-bar {
+  width: 320px;
+  border-left: 1px solid #e3e7f7;
+  display: flex;
+  flex-direction: column;
+}
+.right-bar .header {
+  font-size: 20px;
+  color: var(--main-text-color);
+  margin-left: 30px;
+}
+
+.top-part {
+  padding: 30px;
+  align-self: flex-end;
+}
+.top-part svg {
+  width: 14px;
+  height: 14px;
+  color: var(--main-color);
+  margin-right: 14px;
+}
+.top-part .count {
+  font-size: 12px;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  background-color: #623ce8;
+  color: #fff;
+  justify-content: center;
+}
+
+.right-content {
+  padding: 10px 40px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.task-box {
+  position: relative;
+  border-radius: 12px;
+  width: 100%;
+  margin: 20px 0;
+  padding: 16px;
+  cursor: pointer;
+  box-shadow: 2px 2px 4px 0px #ebebeb;
+}
+.task-box:hover {
+  transform: scale(1.02);
+}
+
+.time {
+  margin-bottom: 6px;
+  opacity: 0.4;
+  font-size: 10px;
+}
+
+.task-name {
+  font-size: 14px;
+  font-weight: 500;
+  opacity: 0.6;
+}
+
+.yellow {
+  background-color: var(--box-color);
+}
+
+.blue {
+  background-color: var(--box-color-2);
+}
+
+.red {
+  background-color: var(--box-color-3);
+}
+
+.green {
+  background-color: var(--box-color-4);
+}
+
+.more-button {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background-color: #8e92a4;
+  box-shadow: 0 -4px 0 0 #8e92a4, 0 4px 0 0 #8e92a4;
+  opacity: 0.4;
+  right: 20px;
+  top: 30px;
+  cursor: pointer;
+}
+
+.members {
+  display: flex;
+  margin-top: 14px;
+}
+.members img {
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  margin-right: 4px;
+  object-fit: cover;
+}
+
+.page-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 40px 20px 0 20px;
+}
+.page-content .header {
+  font-size: 26px;
+  color: var(--main-color);
+  margin-top: 30px;
+}
+
+.content-categories {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  border-bottom: 1px solid #ddd;
+  padding: 20px 0;
+}
+
+.nav-item {
+  display: none;
+}
+
+.category {
+  font-weight: 500;
+  color: var(--secondary-color);
+  border-bottom: 1px solid #ddd;
+  transition: 0.4s ease-in;
+  padding: 20px 30px;
+  cursor: pointer;
+}
+
+#opt-1:checked + label,
+#opt-2:checked + label,
+#opt-3:checked + label,
+#opt-4:checked + label {
+  color: var(--checkbox-color);
+  border-bottom: 2px solid var(--checkbox-color);
+}
+
+.task-item {
+  display: none;
+}
+
+.tasks-wrapper {
+  padding: 30px 0;
+  flex: 1;
+  overflow-y: auto;
+  height: 100%;
+  padding-right: 8px;
+}
+
+.task {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  margin-bottom: 16px;
+  padding-left: 30px;
+  color: var(--task-color);
+  font-size: 13px;
+  font-weight: 500;
+}
+.task:hover {
+  transform: translatex(2px);
+}
+.task label {
+  cursor: pointer;
+}
+
+label .label-text {
+  position: relative;
+}
+
+label .label-text:before {
+  content: "";
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  left: -24px;
+  transition: 0.2s ease;
+}
+
+.task-item:checked + label .label-text:before {
+  background-color: var(--checkbox-color);
+  border: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: 10px;
+  background-position: center;
+  border: 1px solid var(--checkbox-color);
+}
+
+.tag {
+  font-size: 10px;
+  padding: 4px 8px;
+  border-radius: 20px;
+}
+.tag.approved {
+  background-color: var(--tag-color-one);
+  color: var(--tag-color-text-one);
+}
+.tag.progress {
+  background-color: var(--tag-color-two);
+  color: var(--tag-color-text-two);
+}
+.tag.review {
+  background-color: var(--tag-color-three);
+  color: var(--tag-color-text-three);
+}
+.tag.waiting {
+  background-color: var(--tag-color-four);
+  color: var(--tag-color-text-four);
+}
+
+.upcoming {
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 30px;
+  margin-bottom: 30px;
+}
+
+@media screen and (max-width: 900px) {
+  .left-bar {
+    display: none;
+  }
+}
+@media screen and (max-width: 700px) {
+  .task-manager {
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  .right-bar, .page-content {
+    width: 100%;
+    display: block;
+  }
+
+  .tasks-wrapper {
+    height: auto;
+  }
+}
+@media screen and (max-width: 520px) {
+  .page-content {
+    padding: 40px 10px 0 10px;
+  }
+
+  .right-content {
+    padding: 10px 16px;
+  }
+
+  .category {
+    padding: 20px;
+  }
+}
\ No newline at end of file
diff --git a/task-management-dashboard-ui/src/index.html b/task-management-dashboard-ui/src/index.html
new file mode 100644
index 0000000..c887ecb
--- /dev/null
+++ b/task-management-dashboard-ui/src/index.html
@@ -0,0 +1,346 @@
+<link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet">
+<div class="task-manager">
+  <div class="left-bar">
+    <div class="upper-part">
+      <div class="actions">
+        <div class="circle"></div>
+        <div class="circle-2"></div>
+      </div>
+    </div>
+    <div class="left-content">
+      <ul class="action-list">
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
+            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-inbox"
+            viewBox="0 0 24 24">
+            <path d="M22 12h-6l-2 3h-4l-2-3H2" />
+            <path
+              d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+          </svg>
+          <span>Inbox</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-star">
+            <polygon
+              points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+            </svg>
+          <span> Today</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
+            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-calendar"
+            viewBox="0 0 24 24">
+            <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+            <path d="M16 2v4M8 2v4m-5 4h18" />
+          </svg>
+          <span>Upcoming</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-hash">
+            <line x1="4" y1="9" x2="20" y2="9" />
+            <line x1="4" y1="15" x2="20" y2="15" />
+            <line x1="10" y1="3" x2="8" y2="21" />
+            <line x1="16" y1="3" x2="14" y2="21" /></svg>
+          <span>Important</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-users">
+            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+            <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
+          <span>Meetings</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
+            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-trash"
+            viewBox="0 0 24 24">
+            <path d="M3 6h18m-2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+          </svg>
+          <span>Trash</span>
+        </li>
+      </ul>
+      <ul class="category-list">
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-users">
+            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+            <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
+          <span>Family</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
+            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-sun"
+            viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="5" />
+            <path
+              d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+          </svg>
+          <span>Vacation</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-trending-up">
+            <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />
+            <polyline points="17 6 23 6 23 12" /></svg>
+          <span>Festival</span>
+        </li>
+        <li class="item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="feather feather-zap">
+            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg>
+          <span>Concerts</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="page-content">
+    <div class="header">Today Tasks</div>
+    <div class="content-categories">
+      <div class="label-wrapper">
+        <input class="nav-item" name="nav" type="radio" id="opt-1">
+        <label class="category" for="opt-1">All</label>
+      </div>
+      <div class="label-wrapper">
+        <input class="nav-item" name="nav" type="radio" id="opt-2" checked>
+        <label class="category" for="opt-2">Important</label>
+      </div>
+      <div class="label-wrapper">
+        <input class="nav-item" name="nav" type="radio" id="opt-3">
+        <label class="category" for="opt-3">Notes</label>
+      </div>
+      <div class="label-wrapper">
+        <input class="nav-item" name="nav" type="radio" id="opt-4">
+        <label class="category" for="opt-4">Links</label>
+      </div>
+    </div>
+    <div class="tasks-wrapper">
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-1" checked>
+        <label for="item-1">
+          <span class="label-text">Dashboard Design Implementation</span>
+        </label>
+        <span class="tag approved">Approved</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-2" checked>
+        <label for="item-2">
+          <span class="label-text">Create a userflow</span>
+        </label>
+        <span class="tag progress">In Progress</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-3">
+        <label for="item-3">
+          <span class="label-text">Application Implementation</span>
+        </label>
+        <span class="tag review">In Review</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-4">
+        <label for="item-4">
+          <span class="label-text">Create a Dashboard Design</span>
+        </label>
+        <span class="tag progress">In Progress</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-5">
+        <label for="item-5">
+          <span class="label-text">Create a Web Application Design</span>
+        </label>
+        <span class="tag approved">Approved</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-6">
+        <label for="item-6">
+          <span class="label-text">Interactive Design</span>
+        </label>
+        <span class="tag review">In Review</span>
+      </div>
+      <div class="header upcoming">Upcoming Tasks</div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-7">
+        <label for="item-7">
+          <span class="label-text">Dashboard Design Implementation</span>
+        </label>
+        <span class="tag waiting">Waiting</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-8">
+        <label for="item-8">
+          <span class="label-text">Create a userflow</span>
+        </label>
+        <span class="tag waiting">Waiting</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-9">
+        <label for="item-9">
+          <span class="label-text">Application Implementation</span>
+        </label>
+        <span class="tag waiting">Waiting</span>
+      </div>
+      <div class="task">
+        <input class="task-item" name="task" type="checkbox" id="item-10">
+        <label for="item-10">
+          <span class="label-text">Create a Dashboard Design</span>
+        </label>
+        <span class="tag waiting">Waiting</span>
+      </div>
+    </div>
+  </div>
+  <div class="right-bar">
+    <div class="top-part">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+        class="feather feather-users">
+        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+        <circle cx="9" cy="7" r="4" />
+        <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+        <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
+      <div class="count">6</div>
+    </div>
+    <div class="header">Schedule</div>
+    <div class="right-content">
+      <div class="task-box yellow">
+        <div class="description-task">
+          <div class="time">08:00 - 09:00 AM</div>
+          <div class="task-name">Product Review</div>
+        </div>
+        <div class="more-button"></div>
+        <div class="members">
+          <img
+            src="https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
+            alt="member">
+          <img
+            src="https://images.unsplash.com/photo-1476657680631-c07285ff2581?ixlib=rb-1.2.1&auto=format&fit=crop&w=2210&q=80"
+            alt="member-2">
+          <img
+            src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
+            alt="member-3">
+          <img
+            src="https://images.unsplash.com/photo-1455504490126-80ed4d83b3b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"
+            alt="member-4">
+        </div>
+      </div>
+      <div class="task-box blue">
+        <div class="description-task">
+          <div class="time">10:00 - 11:00 AM</div>
+          <div class="task-name">Design Meeting</div>
+        </div>
+        <div class="more-button"></div>
+        <div class="members">
+          <img
+            src="https://images.unsplash.com/photo-1484688493527-670f98f9b195?ixlib=rb-1.2.1&auto=format&fit=crop&w=2230&q=80"
+            alt="member">
+          <img
+            src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
+            alt="member-2">
+          <img
+            src="https://images.unsplash.com/photo-1455504490126-80ed4d83b3b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"
+            alt="member-3">
+        </div>
+      </div>
+      <div class="task-box red">
+        <div class="description-task">
+          <div class="time">01:00 - 02:00 PM</div>
+          <div class="task-name">Team Meeting</div>
+        </div>
+        <div class="more-button"></div>
+        <div class="members">
+          <img
+            src="https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
+            alt="member">
+          <img
+            src="https://images.unsplash.com/photo-1475552113915-6fcb52652ba2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80"
+            alt="member-2">
+          <img
+            src="https://images.unsplash.com/photo-1493752603190-08d8b5d1781d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"
+            alt="member-3">
+          <img
+            src="https://images.unsplash.com/photo-1484688493527-670f98f9b195?ixlib=rb-1.2.1&auto=format&fit=crop&w=2230&q=80"
+            alt="member-4">
+        </div>
+      </div>
+      <div class="task-box green">
+        <div class="description-task">
+          <div class="time">03:00 - 04:00 PM</div>
+          <div class="task-name">Release Event</div>
+        </div>
+        <div class="more-button"></div>
+        <div class="members">
+          <img
+            src="https://images.unsplash.com/photo-1523419409543-a5e549c1faa8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=943&q=80"
+            alt="member">
+          <img
+            src="https://images.unsplash.com/photo-1519742866993-66d3cfef4bbd?ixlib=rb-1.2.1&auto=format&fit=crop&w=881&q=80"
+            alt="member-2">
+          <img
+            src="https://images.unsplash.com/photo-1521122872341-065792fb2fa0?ixlib=rb-1.2.1&auto=format&fit=crop&w=2208&q=80"
+            alt="member-3">
+          <img
+            src="https://images.unsplash.com/photo-1486302913014-862923f5fd48?ixlib=rb-1.2.1&auto=format&fit=crop&w=3400&q=80"
+            alt="member-4">
+          <img
+            src="https://images.unsplash.com/photo-1484187216010-59798e9cc726?ixlib=rb-1.2.1&auto=format&fit=crop&w=955&q=80"
+            alt="member-5">
+        </div>
+      </div>
+      <div class="task-box blue">
+        <div class="description-task">
+          <div class="time">08:00 - 09:00 PM</div>
+          <div class="task-name">Release Event</div>
+        </div>
+        <div class="more-button"></div>
+        <div class="members">
+          <img
+            src="https://images.unsplash.com/photo-1523419409543-a5e549c1faa8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=943&q=80"
+            alt="member">
+          <img
+            src="https://images.unsplash.com/photo-1519742866993-66d3cfef4bbd?ixlib=rb-1.2.1&auto=format&fit=crop&w=881&q=80"
+            alt="member-2">
+          <img
+            src="https://images.unsplash.com/photo-1521122872341-065792fb2fa0?ixlib=rb-1.2.1&auto=format&fit=crop&w=2208&q=80"
+            alt="member-3">
+          <img
+            src="https://images.unsplash.com/photo-1486302913014-862923f5fd48?ixlib=rb-1.2.1&auto=format&fit=crop&w=3400&q=80"
+            alt="member-4">
+          <img
+            src="https://images.unsplash.com/photo-1484187216010-59798e9cc726?ixlib=rb-1.2.1&auto=format&fit=crop&w=955&q=80"
+            alt="member-5">
+        </div>
+      </div>
+      <div class="task-box yellow">
+        <div class="description-task">
+          <div class="time">11:00 - 12:00 PM</div>
+          <div class="task-name">Practise</div>
+        </div>
+        <div class="more-button"></div>
+        <div class="members">
+          <img
+            src="https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
+            alt="member">
+          <img
+            src="https://images.unsplash.com/photo-1476657680631-c07285ff2581?ixlib=rb-1.2.1&auto=format&fit=crop&w=2210&q=80"
+            alt="member-2">
+          <img
+            src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
+            alt="member-3">
+          <img
+            src="https://images.unsplash.com/photo-1455504490126-80ed4d83b3b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"
+            alt="member-4">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/task-management-dashboard-ui/src/style.scss b/task-management-dashboard-ui/src/style.scss
new file mode 100644
index 0000000..61bad80
--- /dev/null
+++ b/task-management-dashboard-ui/src/style.scss
@@ -0,0 +1,380 @@
+* {
+  box-sizing: border-box;
+  outline: none;
+}
+
+:root {
+  --bg-color: #f5f8ff;;
+  --main-color: #353536;
+  --secondary-color: #8e92a4;
+  --main-text-color: #5d606b;
+  --secondary-dark-color: #9496a5;
+  --tag-color-one: #e0fbf6;
+  --tag-color-text-one: #58c2a9;
+  --tag-color-two: #ece7fe;
+  --tag-color-text-two: #8972f3;
+  --tag-color-three: #fde7ea;
+  --tag-color-text-three: #e77f89;
+  --tag-color-four: #f7f8fc;
+  --tag-color-text-four: #a0a6b5;
+  --checkbox-color: #009e90;
+  --button-color: #49beb7;
+  --box-color: #fff1d6;
+  --box-color-2: #d3e6ff;
+  --box-color-3: #ffd9d9;
+  --box-color-4: #daffe5;
+  --task-color: #777982;
+}
+
+%flex {
+  display: flex;
+  align-items: center;
+}
+
+body {
+  margin: 0;
+  @extend %flex;
+  justify-content: center;
+  flex-direction: column;
+  overflow: auto;
+  width: 100%;
+  height: 100vh;
+  padding: 20px;
+  font-family: 'DM Sans', sans-serif;;
+  font-size: 12px;
+  background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003234675773) 68%, rgba(255, 206, 196, 0.5) 163%),linear-gradient(163deg, rgba(49, 146, 170, 0.07944489965716128) 86%, rgba(239, 112, 138, 0.5) 40%),linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%); background-blend-mode: overlay,multiply,color,normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+button { 
+  border: none; 
+  background: none;
+  cursor: pointer;
+}
+
+.task-manager {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1200px;
+  height: 90vh;
+  max-height: 900px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow:
+  0 0.3px 2.2px rgba(0, 0, 0, 0.011),
+  0 0.7px 5.3px rgba(0, 0, 0, 0.016),
+  0 1.3px 10px rgba(0, 0, 0, 0.02),
+  0 2.2px 17.9px rgba(0, 0, 0, 0.024),
+  0 4.2px 33.4px rgba(0, 0, 0, 0.029),
+  0 10px 80px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+}
+
+.left-bar {
+  background-color: var(--bg-color);
+  width: 230px;
+  border-right: 1px solid #e3e7f7;
+  position: relative;
+}
+
+.left-content { padding: 40px; }
+
+.item {
+  @extend %flex;
+  color: var(--main-color);
+  margin-bottom: 14px;
+  font-weight: 500;
+  
+  svg {
+    width: 14px;
+    height: 14px;
+    color: currentcolor;
+    margin-right: 10px;
+  }
+}
+
+.category-list{
+  margin-top: 50px;
+  
+  .item{ color: var(--secondary-color); }
+} 
+
+.actions {
+  padding: 12px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.circle {
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  background-color: #fe4d46;
+  box-shadow: 14px 0 0 0 #fbc023, 28px 0 0 0 #7dd21f;
+}
+
+.circle-2 {
+  border-radius: 50%;
+  width: 4px;
+  height: 4px;
+  background-color: #d5d7e3;
+  box-shadow: -6px 0 0 0 #d5d7e3, 6px 0 0 0 #d5d7e3;
+}
+
+.right-bar {
+  width: 320px;
+  border-left: 1px solid #e3e7f7;
+  display: flex;
+  flex-direction: column;
+  
+  .header { 
+    font-size: 20px; 
+    color: var(--main-text-color);
+    margin-left: 30px;
+  }
+}
+
+.top-part {
+  padding: 30px;
+  @extend %flex; 
+  align-self: flex-end;
+  
+  svg {
+    width: 14px;
+    height: 14px;
+    color: var(--main-color);
+    margin-right: 14px;
+  }
+  
+  .count {
+    font-size: 12px;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    background-color: #623ce8;
+    color: #fff;
+    @extend %flex;
+    justify-content: center;
+  }
+}
+
+.right-content {
+  padding: 10px 40px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.task-box {
+  position: relative;
+  border-radius: 12px;
+  width: 100%;
+  margin: 20px 0;
+  padding: 16px;
+  cursor: pointer;
+  box-shadow: 2px 2px 4px 0px rgba(235,235,235,1);
+  
+  &:hover {
+    transform: scale(1.02);
+  }
+}
+
+.time { margin-bottom: 6px; opacity: 0.4; font-size: 10px; }
+
+.task-name { 
+  font-size: 14px; 
+  font-weight: 500;
+  opacity: 0.6;
+}
+
+.yellow { 
+  background-color: var(--box-color);
+}
+
+.blue { background-color: var(--box-color-2); }
+
+.red { background-color: var(--box-color-3); }
+
+.green { background-color: var(--box-color-4); }
+
+.more-button {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background-color: #8e92a4;
+  box-shadow: 0 -4px 0 0 #8e92a4, 0 4px 0 0 #8e92a4;
+  opacity: 0.4;
+  right: 20px;
+  top: 30px;
+  cursor: pointer;
+}
+
+.members {
+  display: flex;
+  margin-top: 14px;
+  
+  img {
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    margin-right: 4px;
+    object-fit: cover;
+  }
+}
+
+.page-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 40px 20px 0 20px;
+  
+  .header { 
+    font-size: 26px; 
+    color: var(--main-color); 
+    margin-top: 30px;
+  }
+}
+
+.content-categories {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  border-bottom: 1px solid #ddd;
+  padding: 20px 0;
+}
+
+.nav-item { display: none; }
+
+.category { 
+  font-weight: 500; 
+  color: var(--secondary-color); 
+  border-bottom: 1px solid #ddd;
+  transition: .4s ease-in;
+  padding: 20px 30px;
+  cursor: pointer;
+}
+
+#opt-1:checked + label ,
+#opt-2:checked +  label ,
+#opt-3:checked +  label ,
+#opt-4:checked +  label {
+  color: var(--checkbox-color);
+  border-bottom: 2px solid var(--checkbox-color);
+}
+
+.task-item { display: none; }
+
+.tasks-wrapper {
+  padding: 30px 0;
+  flex: 1;
+  overflow-y: auto;
+  height: 100%;
+  padding-right: 8px;
+}
+
+.task {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  margin-bottom: 16px;
+  padding-left: 30px;
+  color: var(--task-color);
+  font-size: 13px;
+  font-weight: 500;
+  
+  &:hover {
+    transform: translatex(2px);
+  }
+  
+  label {
+    cursor: pointer;
+  }
+}
+
+ label .label-text { position: relative; }
+
+ label .label-text:before {
+  content:'';
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  left: -24px;
+  transition: .2s ease;
+}
+
+.task-item:checked + label .label-text:before {
+  background-color: var(--checkbox-color);
+  border: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: 10px;
+  background-position: center;
+  border: 1px solid var(--checkbox-color);
+}
+
+.tag {
+  font-size: 10px;
+  padding: 4px 8px;
+  border-radius: 20px;
+  
+  &.approved {
+    background-color: var(--tag-color-one);
+    color: var(--tag-color-text-one);
+  }
+  
+  &.progress {
+    background-color: var(--tag-color-two);
+    color: var(--tag-color-text-two);
+  }
+  
+  &.review {
+    background-color: var(--tag-color-three);
+    color: var(--tag-color-text-three);
+  }
+  
+  &.waiting {
+    background-color: var(--tag-color-four);
+    color: var(--tag-color-text-four);
+  }
+}
+
+.upcoming { 
+  border-bottom: 1px solid #ddd; 
+  padding-bottom: 30px;
+  margin-bottom: 30px;
+}
+
+@media screen and (max-width: 900px) {
+  .left-bar {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .task-manager {
+    flex-direction: column;
+    overflow-y: auto;
+  }
+  
+  .right-bar, .page-content {
+    width: 100%;
+    display: block;
+  }
+  
+  .tasks-wrapper { height: auto; }
+}
+
+@media screen and (max-width: 520px) {
+  .page-content { padding: 40px 10px 0 10px; }
+  
+  .right-content { padding: 10px 16px; }
+  
+  .category { padding: 20px; }
+}
\ No newline at end of file
diff --git a/task-management-ui/LICENSE.txt b/task-management-ui/LICENSE.txt
new file mode 100644
index 0000000..c48f0dc
--- /dev/null
+++ b/task-management-ui/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 AaronMcGuire (https://codepen.io/aaronmcg/pen/GRjaRva)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/task-management-ui/README.md b/task-management-ui/README.md
new file mode 100644
index 0000000..65c7a63
--- /dev/null
+++ b/task-management-ui/README.md
@@ -0,0 +1,7 @@
+# Task Management UI
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/aaronmcg/pen/GRjaRva](https://codepen.io/aaronmcg/pen/GRjaRva).
+
+Task Management UI created for fun, you can drag and drop tasks over each other using Drag and Drop API.
+
+Design of the POC comes from Dwinawan ( https://dribbble.com/shots/14552329--Exploration-Task-Management-Dashboard) 
\ No newline at end of file
diff --git a/task-management-ui/dist/index.html b/task-management-ui/dist/index.html
new file mode 100644
index 0000000..4df1caf
--- /dev/null
+++ b/task-management-ui/dist/index.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Task Management UI</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet"><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- Working version of https://dribbble.com/shots/14552329--Exploration-Task-Management-Dashboard -->
+<div class='app'>
+  <main class='project'>
+    <div class='project-info'>
+      <h1>Homepage Design</h1>
+      <div class='project-participants'>
+        <span></span>
+        <span></span>
+        <span></span>
+        <button class='project-participants__add'>Add Participant</button>
+          
+        </div>
+    </div>
+    <div class='project-tasks'>
+      <div class='project-column'>
+        <div class='project-column-heading'>
+          <h2 class='project-column-heading__title'>Task Ready</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
+        </div>
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Konsep hero title yang menarik</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>3</span>
+            <span><i class="fas fa-paperclip"></i>7</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+                <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--design'>UI Design</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Icon di section our services</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>2</span>
+            <span><i class="fas fa-paperclip"></i>5</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+                <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Konsep hero title yang menarik</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>2</span>
+            <span><i class="fas fa-paperclip"></i>3</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+      </div>
+      <div class='project-column'><div class='project-column-heading'>
+          <h2 class='project-column-heading__title'>In Progress</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
+        </div>
+          
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--design'>UI Design</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Replace lorem ipsum text in the final designs</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>5</span>
+            <span><i class="fas fa-paperclip"></i>5</span> 
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Create and generate the custom SVG illustrations.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>8</span>
+            <span><i class="fas fa-paperclip"></i>7</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Proof read the legal page and check for and loopholes</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>12</span>
+            <span><i class="fas fa-paperclip"></i>11</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Create the landing page graphics for the hero slider.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>4</span>
+            <span><i class="fas fa-paperclip"></i>8</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+        </div>
+      <div class='project-column'><div class='project-column-heading'>
+          <h2 class='project-column-heading__title'>Needs Review</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
+        </div>
+          
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Check the company we copied doesn't think we copied them.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>4</span>
+            <span><i class="fas fa-paperclip"></i>0</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--design'>UI Design</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Design the about page.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>0</span>
+            <span><i class="fas fa-paperclip"></i>5</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Move that one image 5px down to make Phil Happy.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>2</span>
+            <span><i class="fas fa-paperclip"></i>2</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        </div>
+      <div class='project-column'><div class='project-column-heading'>
+          <h2 class='project-column-heading__title'>Done</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
+        </div>
+        
+         <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Send Advert illustrations over to production company.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>12</span>
+            <span><i class="fas fa-paperclip"></i>5</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+         <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Dawn wants to move the text 3px to the right.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>3</span>
+            <span><i class="fas fa-paperclip"></i>7</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+         <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Amend the contract details.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>8</span>
+            <span><i class="fas fa-paperclip"></i>16</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+        </div>
+      
+    </div>
+  </main>
+  <aside class='task-details'>
+    <div class='tag-progress'>
+      <h2>Task Progress</h2>
+      <div class='tag-progress'>
+        <p>Copywriting <span>3/8</span></p>
+        <progress class="progress progress--copyright" max="8" value="3"> 3 </progress>
+      </div>
+      <div class='tag-progress'>
+        <p>Illustration <span>6/10</span></p>
+        <progress class="progress progress--illustration" max="10" value="6"> 6 </progress>
+      </div>
+      <div class='tag-progress'>
+        <p>UI Design <span>2/7</span></p>
+        <progress class="progress progress--design" max="7" value="2"> 2 </progress>
+      </div>
+    </div>
+    <div class='task-activity'>
+      <h2>Recent Activity</h2>
+      <ul>
+        <li>
+          <span class='task-icon task-icon--attachment'><i class="fas fa-paperclip"></i></span>
+          <b>Andrea </b>uploaded 3 documents
+          <time datetime="2021-11-24T20:00:00">Aug 10</time>
+        </li>
+          <li>
+              <span class='task-icon task-icon--comment'><i class="fas fa-comment"></i></span>
+          <b>Karen </b> left a comment
+          <time datetime="2021-11-24T20:00:00">Aug 10</time>
+        </li>
+         <li>
+             <span class='task-icon task-icon--edit'><i class="fas fa-pencil-alt"></i></span>
+          <b>Karen </b>uploaded 3 documents
+          <time datetime="2021-11-24T20:00:00">Aug 11</time>
+        </li>
+          <li>
+              <span class='task-icon task-icon--attachment'><i class="fas fa-paperclip"></i></span>
+          <b>Andrea </b>uploaded 3 documents
+          <time datetime="2021-11-24T20:00:00">Aug 11</time>
+        </li>
+         <li>
+             <span class='task-icon task-icon--comment'><i class="fas fa-comment"></i></span>
+          <b>Karen </b> left a comment
+          <time datetime="2021-11-24T20:00:00">Aug 12</time>
+        </li>
+      </ul>
+    </div>
+  </aside>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/task-management-ui/dist/script.js b/task-management-ui/dist/script.js
new file mode 100644
index 0000000..9c302dc
--- /dev/null
+++ b/task-management-ui/dist/script.js
@@ -0,0 +1,65 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+
+  var dragSrcEl = null;
+  
+  function handleDragStart(e) {
+    this.style.opacity = '0.1';
+    this.style.border = '3px dashed #c4cad3';
+    
+    dragSrcEl = this;
+
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/html', this.innerHTML);
+  }
+
+  function handleDragOver(e) {
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+
+    e.dataTransfer.dropEffect = 'move';
+    
+    return false;
+  }
+
+  function handleDragEnter(e) {
+    this.classList.add('task-hover');
+  }
+
+  function handleDragLeave(e) {
+    this.classList.remove('task-hover');
+  }
+
+  function handleDrop(e) {
+    if (e.stopPropagation) {
+      e.stopPropagation(); // stops the browser from redirecting.
+    }
+    
+    if (dragSrcEl != this) {
+      dragSrcEl.innerHTML = this.innerHTML;
+      this.innerHTML = e.dataTransfer.getData('text/html');
+    }
+    
+    return false;
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+    this.style.border = 0;
+    
+    items.forEach(function (item) {
+      item.classList.remove('task-hover');
+    });
+  }
+  
+  
+  let items = document.querySelectorAll('.task'); 
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart, false);
+    item.addEventListener('dragenter', handleDragEnter, false);
+    item.addEventListener('dragover', handleDragOver, false);
+    item.addEventListener('dragleave', handleDragLeave, false);
+    item.addEventListener('drop', handleDrop, false);
+    item.addEventListener('dragend', handleDragEnd, false);
+  });
+});
\ No newline at end of file
diff --git a/task-management-ui/dist/style.css b/task-management-ui/dist/style.css
new file mode 100644
index 0000000..d0494aa
--- /dev/null
+++ b/task-management-ui/dist/style.css
@@ -0,0 +1,319 @@
+:root {
+  --bg:#ebf0f7;
+  --header:#fbf4f6;
+  --text:#2e2e2f;
+  --white:#ffffff;
+  --light-grey:#c4cad3;
+  --tag-1:#ceecfd;
+  --tag-1-text:#2e87ba;
+  --tag-2:#d6ede2;
+  --tag-2-text:#13854e;
+  --tag-3:#ceecfd;
+  --tag-3-text:#2d86ba;
+  --tag-4:#f2dcf5;
+  --tag-4-text:#a734ba;
+  --purple:#7784ee;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+body {
+  color: var(--text);
+}
+
+.app {
+  background-color: var(--bg);
+  width: 100%;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 30px;
+}
+
+.project {
+  padding: 2rem;
+  max-width: 75%;
+  width: 100%;
+  display: inline-block;
+}
+.project-info {
+  padding: 2rem 0;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+.project-participants {
+  display: flex;
+  align-items: center;
+}
+.project-participants span, .project-participants__add {
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  background: var(--purple);
+  border-radius: 100rem;
+  margin: 0 0.2rem;
+}
+.project-participants__add {
+  background: transparent;
+  border: 1px dashed #969696;
+  font-size: 0;
+  cursor: pointer;
+  position: relative;
+}
+.project-participants__add:after {
+  content: "+";
+  font-size: 15px;
+  color: #969696;
+}
+.project-tasks {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  width: 100%;
+  grid-column-gap: 1.5rem;
+}
+.project-column-heading {
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.project-column-heading__title {
+  font-size: 20px;
+}
+.project-column-heading__options {
+  background: transparent;
+  color: var(--light-grey);
+  font-size: 18px;
+  border: 0;
+  cursor: pointer;
+}
+
+.task {
+  cursor: move;
+  background-color: var(--white);
+  padding: 1rem;
+  border-radius: 8px;
+  width: 100%;
+  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
+  margin-bottom: 1rem;
+  border: 3px dashed transparent;
+}
+.task:hover {
+  box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
+  border-color: rgba(162, 179, 207, 0.2) !important;
+}
+.task p {
+  font-size: 15px;
+  margin: 1.2rem 0;
+}
+.task__tag {
+  border-radius: 100px;
+  padding: 2px 13px;
+  font-size: 12px;
+}
+.task__tag--copyright {
+  color: var(--tag-4-text);
+  background-color: var(--tag-4);
+}
+.task__tag--design {
+  color: var(--tag-3-text);
+  background-color: var(--tag-3);
+}
+.task__tag--illustration {
+  color: var(--tag-2-text);
+  background-color: var(--tag-2);
+}
+.task__tags {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.task__options {
+  background: transparent;
+  border: 0;
+  color: var(--light-grey);
+  font-size: 17px;
+}
+.task__stats {
+  position: relative;
+  width: 100%;
+  color: var(--light-grey);
+  font-size: 12px;
+}
+.task__stats span:not(:last-of-type) {
+  margin-right: 1rem;
+}
+.task__stats svg {
+  margin-right: 5px;
+}
+.task__owner {
+  width: 25px;
+  height: 25px;
+  border-radius: 100rem;
+  background: var(--purple);
+  position: absolute;
+  display: inline-block;
+  right: 0;
+  bottom: 0;
+}
+
+.task-hover {
+  border: 3px dashed var(--light-grey) !important;
+}
+
+.task-details {
+  width: 24%;
+  border-left: 1px solid #d9e0e9;
+  display: inline-block;
+  height: 100%;
+  vertical-align: top;
+  padding: 3rem 2rem;
+}
+
+.tag-progress {
+  margin: 1.5rem 0;
+}
+.tag-progress h2 {
+  font-size: 16px;
+  margin-bottom: 1rem;
+}
+.tag-progress p {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+.tag-progress p span {
+  color: #b4b4b4;
+}
+.tag-progress .progress {
+  width: 100%;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+  border: none;
+  border-radius: 10px;
+  height: 10px;
+}
+.tag-progress .progress::-webkit-progress-bar, .tag-progress .progress::-webkit-progress-value {
+  border-radius: 10px;
+}
+.tag-progress .progress--copyright::-webkit-progress-bar {
+  background-color: #ecd8e6;
+}
+.tag-progress .progress--copyright::-webkit-progress-value {
+  background: #d459e8;
+}
+.tag-progress .progress--illustration::-webkit-progress-bar {
+  background-color: #dee7e3;
+}
+.tag-progress .progress--illustration::-webkit-progress-value {
+  background-color: #46bd84;
+}
+.tag-progress .progress--design::-webkit-progress-bar {
+  background-color: #d8e7f4;
+}
+.tag-progress .progress--design::-webkit-progress-value {
+  background-color: #08a0f7;
+}
+
+.task-activity h2 {
+  font-size: 16px;
+  margin-bottom: 1rem;
+}
+.task-activity li {
+  list-style: none;
+  margin: 1rem 0;
+  padding: 0rem 1rem 1rem 3rem;
+  position: relative;
+}
+.task-activity time {
+  display: block;
+  color: var(--light-grey);
+}
+
+.task-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 100rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.task-icon svg {
+  font-size: 12px;
+  color: var(--white);
+}
+.task-icon--attachment {
+  background-color: #fba63c;
+}
+.task-icon--comment {
+  background-color: #5dc983;
+}
+.task-icon--edit {
+  background-color: #7784ee;
+}
+
+@media only screen and (max-width: 1300px) {
+  .project {
+    max-width: 100%;
+  }
+
+  .task-details {
+    width: 100%;
+    display: flex;
+  }
+
+  .tag-progress,
+.task-activity {
+    flex-basis: 50%;
+    background: var(--white);
+    padding: 1rem;
+    border-radius: 8px;
+    margin: 1rem;
+  }
+}
+@media only screen and (max-width: 1000px) {
+  .project-column:nth-child(2),
+.project-column:nth-child(3) {
+    display: none;
+  }
+
+  .project-tasks {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media only screen and (max-width: 600px) {
+  .project-column:nth-child(4) {
+    display: none;
+  }
+
+  .project-tasks {
+    grid-template-columns: 1fr;
+  }
+
+  .task-details {
+    flex-wrap: wrap;
+    padding: 3rem 1rem;
+  }
+
+  .tag-progress,
+.task-activity {
+    flex-basis: 100%;
+  }
+
+  h1 {
+    font-size: 25px;
+  }
+}
\ No newline at end of file
diff --git a/task-management-ui/src/index.html b/task-management-ui/src/index.html
new file mode 100644
index 0000000..51c186b
--- /dev/null
+++ b/task-management-ui/src/index.html
@@ -0,0 +1,224 @@
+<!-- Working version of https://dribbble.com/shots/14552329--Exploration-Task-Management-Dashboard -->
+<div class='app'>
+  <main class='project'>
+    <div class='project-info'>
+      <h1>Homepage Design</h1>
+      <div class='project-participants'>
+        <span></span>
+        <span></span>
+        <span></span>
+        <button class='project-participants__add'>Add Participant</button>
+          
+        </div>
+    </div>
+    <div class='project-tasks'>
+      <div class='project-column'>
+        <div class='project-column-heading'>
+          <h2 class='project-column-heading__title'>Task Ready</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
+        </div>
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Konsep hero title yang menarik</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>3</span>
+            <span><i class="fas fa-paperclip"></i>7</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+                <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--design'>UI Design</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Icon di section our services</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>2</span>
+            <span><i class="fas fa-paperclip"></i>5</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+                <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Konsep hero title yang menarik</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>2</span>
+            <span><i class="fas fa-paperclip"></i>3</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+      </div>
+      <div class='project-column'><div class='project-column-heading'>
+          <h2 class='project-column-heading__title'>In Progress</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
+        </div>
+          
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--design'>UI Design</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Replace lorem ipsum text in the final designs</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>5</span>
+            <span><i class="fas fa-paperclip"></i>5</span> 
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Create and generate the custom SVG illustrations.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>8</span>
+            <span><i class="fas fa-paperclip"></i>7</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Proof read the legal page and check for and loopholes</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>12</span>
+            <span><i class="fas fa-paperclip"></i>11</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Create the landing page graphics for the hero slider.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>4</span>
+            <span><i class="fas fa-paperclip"></i>8</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+        </div>
+      <div class='project-column'><div class='project-column-heading'>
+          <h2 class='project-column-heading__title'>Needs Review</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
+        </div>
+          
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Check the company we copied doesn't think we copied them.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>4</span>
+            <span><i class="fas fa-paperclip"></i>0</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--design'>UI Design</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Design the about page.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>0</span>
+            <span><i class="fas fa-paperclip"></i>5</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Move that one image 5px down to make Phil Happy.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>2</span>
+            <span><i class="fas fa-paperclip"></i>2</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        </div>
+      <div class='project-column'><div class='project-column-heading'>
+          <h2 class='project-column-heading__title'>Done</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
+        </div>
+        
+         <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Send Advert illustrations over to production company.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>12</span>
+            <span><i class="fas fa-paperclip"></i>5</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+         <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Dawn wants to move the text 3px to the right.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>3</span>
+            <span><i class="fas fa-paperclip"></i>7</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+         <div class='task' draggable='true'>
+          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
+          <p>Amend the contract details.</p>
+          <div class='task__stats'>
+            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
+            <span><i class="fas fa-comment"></i>8</span>
+            <span><i class="fas fa-paperclip"></i>16</span>
+            <span class='task__owner'></span>
+          </div>
+        </div>
+        
+        </div>
+      
+    </div>
+  </main>
+  <aside class='task-details'>
+    <div class='tag-progress'>
+      <h2>Task Progress</h2>
+      <div class='tag-progress'>
+        <p>Copywriting <span>3/8</span></p>
+        <progress class="progress progress--copyright" max="8" value="3"> 3 </progress>
+      </div>
+      <div class='tag-progress'>
+        <p>Illustration <span>6/10</span></p>
+        <progress class="progress progress--illustration" max="10" value="6"> 6 </progress>
+      </div>
+      <div class='tag-progress'>
+        <p>UI Design <span>2/7</span></p>
+        <progress class="progress progress--design" max="7" value="2"> 2 </progress>
+      </div>
+    </div>
+    <div class='task-activity'>
+      <h2>Recent Activity</h2>
+      <ul>
+        <li>
+          <span class='task-icon task-icon--attachment'><i class="fas fa-paperclip"></i></span>
+          <b>Andrea </b>uploaded 3 documents
+          <time datetime="2021-11-24T20:00:00">Aug 10</time>
+        </li>
+          <li>
+              <span class='task-icon task-icon--comment'><i class="fas fa-comment"></i></span>
+          <b>Karen </b> left a comment
+          <time datetime="2021-11-24T20:00:00">Aug 10</time>
+        </li>
+         <li>
+             <span class='task-icon task-icon--edit'><i class="fas fa-pencil-alt"></i></span>
+          <b>Karen </b>uploaded 3 documents
+          <time datetime="2021-11-24T20:00:00">Aug 11</time>
+        </li>
+          <li>
+              <span class='task-icon task-icon--attachment'><i class="fas fa-paperclip"></i></span>
+          <b>Andrea </b>uploaded 3 documents
+          <time datetime="2021-11-24T20:00:00">Aug 11</time>
+        </li>
+         <li>
+             <span class='task-icon task-icon--comment'><i class="fas fa-comment"></i></span>
+          <b>Karen </b> left a comment
+          <time datetime="2021-11-24T20:00:00">Aug 12</time>
+        </li>
+      </ul>
+    </div>
+  </aside>
+</div>
\ No newline at end of file
diff --git a/task-management-ui/src/script.js b/task-management-ui/src/script.js
new file mode 100644
index 0000000..9c302dc
--- /dev/null
+++ b/task-management-ui/src/script.js
@@ -0,0 +1,65 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+
+  var dragSrcEl = null;
+  
+  function handleDragStart(e) {
+    this.style.opacity = '0.1';
+    this.style.border = '3px dashed #c4cad3';
+    
+    dragSrcEl = this;
+
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/html', this.innerHTML);
+  }
+
+  function handleDragOver(e) {
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+
+    e.dataTransfer.dropEffect = 'move';
+    
+    return false;
+  }
+
+  function handleDragEnter(e) {
+    this.classList.add('task-hover');
+  }
+
+  function handleDragLeave(e) {
+    this.classList.remove('task-hover');
+  }
+
+  function handleDrop(e) {
+    if (e.stopPropagation) {
+      e.stopPropagation(); // stops the browser from redirecting.
+    }
+    
+    if (dragSrcEl != this) {
+      dragSrcEl.innerHTML = this.innerHTML;
+      this.innerHTML = e.dataTransfer.getData('text/html');
+    }
+    
+    return false;
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+    this.style.border = 0;
+    
+    items.forEach(function (item) {
+      item.classList.remove('task-hover');
+    });
+  }
+  
+  
+  let items = document.querySelectorAll('.task'); 
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart, false);
+    item.addEventListener('dragenter', handleDragEnter, false);
+    item.addEventListener('dragover', handleDragOver, false);
+    item.addEventListener('dragleave', handleDragLeave, false);
+    item.addEventListener('drop', handleDrop, false);
+    item.addEventListener('dragend', handleDragEnd, false);
+  });
+});
\ No newline at end of file
diff --git a/task-management-ui/src/style.scss b/task-management-ui/src/style.scss
new file mode 100644
index 0000000..0f09927
--- /dev/null
+++ b/task-management-ui/src/style.scss
@@ -0,0 +1,364 @@
+:root {
+  --bg:#ebf0f7;
+  --header:#fbf4f6;
+  --text:#2e2e2f;
+  --white:#ffffff;
+  --light-grey:#c4cad3; 
+  --tag-1:#ceecfd;
+  --tag-1-text:#2e87ba;
+  --tag-2:#d6ede2;
+  --tag-2-text:#13854e;
+  --tag-3:#ceecfd;
+  --tag-3-text:#2d86ba;
+  --tag-4:#f2dcf5;
+  --tag-4-text:#a734ba;
+  --purple:#7784ee;
+}
+*{
+  margin:0;
+  padding:0;
+  box-sizing:border-box;
+  font-family: 'Poppins', sans-serif;
+  
+}
+
+body {
+  color:var(--text);
+}
+
+@mixin display {
+  display:flex;
+  align-items:center;
+}
+
+.app {
+  background-color:var(--bg);
+  width:100%;
+  min-height:100vh;
+}
+
+h1 {
+  font-size:30px;
+}
+.project {
+  padding:2rem;
+  max-width:75%;
+  width:100%;
+  display:inline-block;
+  
+  &-info {
+    padding:2rem 0;
+    display:flex;
+    width:100%;
+    justify-content:space-between;
+    align-items:center;
+  }
+  &-participants {
+    @include display;
+    span,
+    &__add{
+      width:30px;
+      height:30px;
+      display:inline-block;
+      background:var(--purple);
+      border-radius:100rem;
+      margin:0 .2rem; 
+    }
+    &__add {
+     background:transparent;
+     border:1px dashed rgb(150,150,150);
+     font-size:0;
+     cursor:pointer;
+     position:relative;
+      
+      &:after {
+        content:'+';
+        font-size:15px;
+        color:rgb(150,150,150);
+        
+      }
+    }
+  }
+  
+  &-tasks {
+    display:grid;
+    grid-template-columns:repeat(4,1fr);
+    width:100%;
+    grid-column-gap:1.5rem;
+  }
+  &-column {
+    
+    &-heading {
+      margin-bottom:1rem;
+      @include display;
+      justify-content:space-between;
+      &__title {
+        font-size:20px;
+ 
+      }
+      &__options {
+        background:transparent;
+        color:var(--light-grey);
+        font-size:18px;
+        border:0;
+          cursor:pointer;
+      }
+    }
+  }
+}
+
+.task {
+  cursor:move;
+  background-color:var(--white);
+  padding:1rem;
+  border-radius:8px;
+  width:100%;
+  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
+  margin-bottom:1rem;
+  border:3px dashed transparent;
+  
+  &:hover {
+     box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
+    border-color:rgba(162,179,207,.2)!important;
+  }
+  
+  p {
+    font-size:15px;
+    margin:1.2rem 0;
+  }
+  &__tag {
+    border-radius:100px;
+    padding:2px 13px;
+    font-size:12px;
+    
+    &--copyright {
+      color:var(--tag-4-text);
+      background-color:var(--tag-4);
+    }
+    &--design {
+       color:var(--tag-3-text);
+      background-color:var(--tag-3);
+    }
+    &--illustration {
+      color:var(--tag-2-text);
+      background-color:var(--tag-2);
+    }
+    
+  }
+  &__tags { 
+    width:100%;
+    @include display;
+    justify-content:space-between;
+  }
+  
+  &__options {
+      background:transparent; 
+      border:0;
+    color:var(--light-grey);
+    font-size:17px;
+    }
+  
+  &__stats {
+    
+    position:relative;
+    width:100%;
+    color:var(--light-grey);
+    
+    font-size:12px;
+    span:not(:last-of-type){
+      margin-right:1rem;
+    }
+    svg {
+      margin-right:5px;
+    }
+  }
+  
+  &__owner {
+    width:25px;
+    height:25px;
+    border-radius:100rem;
+    background:var(--purple);
+    position:absolute;
+    display:inline-block;
+    right:0;
+    bottom:0;
+    
+  }
+}
+
+.task-hover {
+border:3px dashed var(--light-grey)!important;
+}
+.task-details {
+  width:24%;
+  border-left:1px solid #d9e0e9;
+  display:inline-block;
+  height:100%;
+  vertical-align:top;
+  padding:3rem 2rem;
+}
+
+.tag-progress {
+  margin:1.5rem 0;
+  h2 {
+    font-size:16px;
+    margin-bottom:1rem;
+  }
+  p {
+    display:flex;
+    width:100%;
+    justify-content:space-between;
+    
+    span {
+      color:rgb(180,180,180);
+    }
+  }
+  .progress {
+    width:100%;
+    -webkit-appearance: none;
+    appearance: none;
+    border:none;
+    border-radius:10px;
+    height:10px;
+    
+    &::-webkit-progress-bar,
+    &::-webkit-progress-value {
+      border-radius:10px;
+    }
+    &--copyright {
+      &::-webkit-progress-bar {
+      background-color:#ecd8e6;
+    }
+    
+    &::-webkit-progress-value {
+      background:#d459e8
+    }
+    }
+    
+        &--illustration {
+      &::-webkit-progress-bar {
+      background-color:#dee7e3;
+      
+    }
+    
+    &::-webkit-progress-value {
+      background-color:#46bd84;
+    }
+    }
+    
+        &--design {
+      &::-webkit-progress-bar {
+      
+      background-color:#d8e7f4;
+    }
+    
+    &::-webkit-progress-value {
+      background-color:#08a0f7;
+    }
+    }
+    
+
+  }
+}
+
+.task-activity {
+   h2 {
+    font-size:16px;
+    margin-bottom:1rem;
+  }
+  
+  li {
+    list-style:none;
+    margin:1rem 0;
+    padding:0rem 1rem 1rem 3rem;
+    position:relative;
+  }
+  time {
+    display:block;
+    color:var(--light-grey);
+  }
+}
+
+.task-icon {
+  width:30px;
+  height:30px;
+  border-radius:100rem;
+  position:absolute;
+  top:0;
+  left:0;
+  @include display;
+  justify-content:center;
+  
+
+  svg {
+    font-size:12px;
+    color:var(--white);
+  }
+  &--attachment {
+    background-color:#fba63c;
+  }
+  
+  &--comment {
+    background-color:#5dc983;
+  }
+  
+  &--edit {
+    background-color:#7784ee;
+  }
+ 
+}
+
+
+
+
+
+@media only screen and (max-width: 1300px) {
+  .project {
+    max-width:100%;
+  }
+  .task-details {
+    width:100%;
+    display:flex;
+  }
+  .tag-progress,
+  .task-activity {
+    flex-basis:50%;
+    background:var(--white);
+    padding:1rem;
+    border-radius:8px;
+    margin:1rem;
+  }
+}
+
+@media only screen and (max-width: 1000px) {
+  .project-column:nth-child(2),
+  .project-column:nth-child(3){
+    display:none;
+  }
+  .project-tasks {
+    grid-template-columns:1fr 1fr;
+  }
+}
+
+
+
+@media only screen and (max-width: 600px) {
+  .project-column:nth-child(4){
+    display:none;
+  }
+  .project-tasks {
+    grid-template-columns:1fr;
+  }
+  
+  .task-details {
+    flex-wrap:wrap;
+    padding:3rem 1rem;
+  }
+  .tag-progress,
+  .task-activity {
+    flex-basis:100%;
+  }
+  h1 {
+    font-size:25px;
+  }
+}
\ No newline at end of file
diff --git a/test-snowflake/README.markdown b/test-snowflake/README.markdown
new file mode 100644
index 0000000..1f2872b
--- /dev/null
+++ b/test-snowflake/README.markdown
@@ -0,0 +1,5 @@
+# Test Snowflake
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/yuanchuan/pen/LYzoawW](https://codepen.io/yuanchuan/pen/LYzoawW).
+
+
diff --git a/test-snowflake/dist/index.html b/test-snowflake/dist/index.html
new file mode 100644
index 0000000..ad1c24b
--- /dev/null
+++ b/test-snowflake/dist/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Test Snowflake</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<css-doodle click-to-update>
+  <style>
+    @grid: 8x6 / 100vmin auto;
+    background: @doodle(
+      :doodle {
+        @grid: 6x1 / 100%;
+        --polygon: polygon(
+          50% 0,
+          @m(@r(2, 10), (@r(40%, 80%) @r(20%, 60%))),
+          50% 100%,
+          @m(@r(2, 10), (@r(50%, 100%) @r(60%, 80%))),
+          108% 100%,
+          @m(@r(2, 10), (@r(50%, 100%) @r(20%, 100%)))
+        );
+      }
+      clip-path: @shape(
+        points: 3; rotate: 30
+      );
+      @offset: @plot(
+        r: .49; dir: auto -90
+      );
+      @size: 50%;
+      :before, :after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        clip-path: var(--polygon);
+        transform: rotateY(@pn(180deg, 0));
+        background: #fff; 
+      }
+    );
+  </style>
+</css-doodle>
+<!-- partial -->
+  <script src='https://unpkg.com/css-doodle@0.24.1/css-doodle.min.js'></script>
+</body>
+</html>
diff --git a/test-snowflake/dist/style.css b/test-snowflake/dist/style.css
new file mode 100644
index 0000000..5adc74b
--- /dev/null
+++ b/test-snowflake/dist/style.css
@@ -0,0 +1,7 @@
+html, body {
+  height: 100%;
+  background: #202124;
+  margin: 0;
+  display: grid;
+  place-items: center;
+}
\ No newline at end of file
diff --git a/test-snowflake/license.txt b/test-snowflake/license.txt
new file mode 100644
index 0000000..e597be4
--- /dev/null
+++ b/test-snowflake/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by yuanchuan (https://codepen.io/yuanchuan/pen/LYzoawW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/test-snowflake/src/index.html b/test-snowflake/src/index.html
new file mode 100644
index 0000000..eb3c5a5
--- /dev/null
+++ b/test-snowflake/src/index.html
@@ -0,0 +1,33 @@
+<css-doodle click-to-update>
+  <style>
+    @grid: 8x6 / 100vmin auto;
+    background: @doodle(
+      :doodle {
+        @grid: 6x1 / 100%;
+        --polygon: polygon(
+          50% 0,
+          @m(@r(2, 10), (@r(40%, 80%) @r(20%, 60%))),
+          50% 100%,
+          @m(@r(2, 10), (@r(50%, 100%) @r(60%, 80%))),
+          108% 100%,
+          @m(@r(2, 10), (@r(50%, 100%) @r(20%, 100%)))
+        );
+      }
+      clip-path: @shape(
+        points: 3; rotate: 30
+      );
+      @offset: @plot(
+        r: .49; dir: auto -90
+      );
+      @size: 50%;
+      :before, :after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        clip-path: var(--polygon);
+        transform: rotateY(@pn(180deg, 0));
+        background: #fff; 
+      }
+    );
+  </style>
+</css-doodle> 
\ No newline at end of file
diff --git a/test-snowflake/src/style.css b/test-snowflake/src/style.css
new file mode 100644
index 0000000..5adc74b
--- /dev/null
+++ b/test-snowflake/src/style.css
@@ -0,0 +1,7 @@
+html, body {
+  height: 100%;
+  background: #202124;
+  margin: 0;
+  display: grid;
+  place-items: center;
+}
\ No newline at end of file
diff --git a/tetradic-truchet/README.markdown b/tetradic-truchet/README.markdown
new file mode 100644
index 0000000..50b3d81
--- /dev/null
+++ b/tetradic-truchet/README.markdown
@@ -0,0 +1,5 @@
+# Tetradic Truchet
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/team/wtc/pen/vYyoNaY](https://codepen.io/team/wtc/pen/vYyoNaY).
+
+Easter egg factory? What better use for a tetradic color picker?
diff --git a/tetradic-truchet/dist/apxlmx.js b/tetradic-truchet/dist/apxlmx.js
new file mode 100644
index 0000000..33ed3c7
--- /dev/null
+++ b/tetradic-truchet/dist/apxlmx.js
@@ -0,0 +1,726 @@
+/**
+ * A basic Web GL class. This provides a very basic setup for GLSL shader code.
+ * Currently it doesn't support anything except for clip-space 3d, but this was
+ * done so that we could start writing fragments right out of the gate. My
+ * Intention is to update it with particle and polygonal 3d support later on.
+ *
+ * @class WTCGL
+ * @author Liam Egan <liam@wethecollective.com>
+ * @version 0.0.8
+ * @created Jan 16, 2019
+ */
+class WTCGL {  
+
+	/**
+	 * The WTCGL Class constructor. If construction of the webGL context fails 
+   * for any reason this will return null.
+   * 
+   * @TODO make the dimension properties properly optional
+   * @TODO provide the ability to allow for programmable buffers
+	 *
+	 * @constructor
+	 * @param {HTMLElement} el The canvas element to use as the root
+	 * @param {string} vertexShaderSource The vertex shader source
+	 * @param {string} fragmentShaderSource The fragment shader source
+   * @param {number} [width] The width of the webGL context. This will default to the canvas dimensions
+   * @param {number} [height] The height of the webGL context. This will default to the canvas dimensions
+   * @param {number} [pxratio=1] The pixel aspect ratio of the canvas
+   * @param {boolean} [styleElement] A boolean indicating whether to apply a style property to the canvas (resizing the canvas by the inverse of the pixel ratio)
+   * @param {boolean} [webgl2] A boolean indicating whether to try to create a webgl2 context instead of a regulart context
+	 */
+  constructor(el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, styleElement, webgl2, params = {}) {
+    this.run = this.run.bind(this);
+    
+    this._onRun = ()=>{};
+    
+    // Destructure if an object is aprovided instead a series of parameters
+    if(el instanceof Object && el.el) {
+      ({el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, webgl2, styleElement} = el);
+    }
+
+    // If the HTML element isn't a canvas, return null
+    if(!el instanceof HTMLElement || el.nodeName.toLowerCase() !== 'canvas') {
+      console.log('Provided element should be a canvas element');
+      return null;
+    }
+    
+    this._el = el;
+    // The context should be either webgl2, webgl or experimental-webgl
+    if(webgl2 === true) {
+      this.isWebgl2 = true;
+      this._ctx = this._el.getContext("webgl2", this.webgl_params) || this._el.getContext("webgl", this.webgl_params) || this._el.getContext("experimental-webgl", this.webgl_params);
+    } else {
+      this.isWebgl2 = false;
+      this._ctx = this._el.getContext("webgl", Object.assign({}, this.webgl_params, params)) || this._el.getContext("experimental-webgl", Object.assign({}, this.webgl_params, params));
+    }
+    
+    // Set up the extensions
+    this._ctx.getExtension('OES_standard_derivatives');
+    this._ctx.getExtension('EXT_shader_texture_lod');
+    this._ctx.getExtension('OES_texture_float');
+    this._ctx.getExtension('WEBGL_color_buffer_float');
+    this._ctx.getExtension('OES_texture_float_linear');
+    this._ctx.getExtension('EXT_color_buffer_float');
+    
+    // We can't make the context so return an error
+    if (!this._ctx) {
+      console.log('Browser doesn\'t support WebGL ');
+      return null;
+    }
+        
+    // Create the shaders
+    this._vertexShader = WTCGL.createShaderOfType(this._ctx, this._ctx.VERTEX_SHADER, vertexShaderSource);
+    this._fragmentShader = WTCGL.createShaderOfType(this._ctx, this._ctx.FRAGMENT_SHADER, fragmentShaderSource);
+    
+    // Create the program and link the shaders
+    this._program = this._ctx.createProgram();
+    this._ctx.attachShader(this._program, this._vertexShader);
+    this._ctx.attachShader(this._program, this._fragmentShader);
+    this._ctx.linkProgram(this._program);
+    
+    // If we can't set up the params, this means the shaders have failed for some reason
+    if (!this._ctx.getProgramParameter(this._program, this._ctx.LINK_STATUS)) {
+      console.log('Unable to initialize the shader program: ' + this._ctx.getProgramInfoLog(this._program));
+      return null;
+    }
+
+    // Initialise the vertex buffers
+    this.initBuffers([
+      -1.0,  1.0, -1.,
+       1.0,  1.0, -1.,
+      -1.0, -1.0, -1.,
+       1.0, -1.0, -1.,
+    ]);
+    
+    // Initialise the frame buffers
+    this.frameBuffers = [];
+    
+    // The program information object. This is essentially a state machine for the webGL instance
+    this._programInfo = {
+      attribs: {
+        vertexPosition: this._ctx.getAttribLocation(this._program, 'a_position'),
+      },
+      uniforms: {
+        projectionMatrix: this._ctx.getUniformLocation(this._program, 'u_projectionMatrix'),
+        modelViewMatrix: this._ctx.getUniformLocation(this._program, 'u_modelViewMatrix'),
+        resolution: this._ctx.getUniformLocation(this._program, 'u_resolution'),
+        time: this._ctx.getUniformLocation(this._program, 'u_time'),
+      },
+    };
+    
+    // Tell WebGL to use our program when drawing
+    this._ctx.useProgram(this._program);
+    
+    this.pxratio = pxratio;
+
+    this.styleElement = styleElement !== true;
+    
+    this.resize(width, height);
+  }
+
+
+  /**
+   * Public methods
+   */
+  
+  addFrameBuffer(w, h, tiling = 0, buffertype = 0) {
+    // create to render to
+    const gl = this._ctx;
+    const targetTextureWidth = w * this.pxratio;
+    const targetTextureHeight = h * this.pxratio;
+    const targetTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, targetTexture);
+    {
+      // define size and format of level 0
+      const level = 0;
+      let internalFormat = gl.RGBA;
+      const border = 0;
+      let format = gl.RGBA;
+      let t;
+      if(buffertype & WTCGL.TEXTYPE_FLOAT) {
+        const e = gl.getExtension('OES_texture_float');
+        window.extension = e;
+        t = e.FLOAT;
+        // internalFormat = gl.RGBA32F;
+      } else if(buffertype & WTCGL.TEXTYPE_HALF_FLOAT_OES) {
+        // t = gl.renderer.isWebgl2 ? e.HALF_FLOAT : e.HALF_FLOAT_OES;
+        //     gl.renderer.extensions['OES_texture_half_float'] ? gl.renderer.extensions['OES_texture_half_float'].HALF_FLOAT_OES : 
+        //     gl.UNSIGNED_BYTE;
+        const e = gl.getExtension('OES_texture_half_float');
+        t = this.isWebgl2 ? gl.HALF_FLOAT : e.HALF_FLOAT_OES;
+        // format = gl.RGBA;
+        if(this.isWebgl2) {
+          internalFormat = gl.RGBA16F;
+        }
+        // internalFormat = gl.RGB32F;
+        // format = gl.RGB32F;
+        // window.gl = gl
+        // t = e.HALF_FLOAT_OES;
+      } else {
+        t = gl.UNSIGNED_BYTE;
+      }
+      const type = t;
+      const data = null;
+      gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                    targetTextureWidth, targetTextureHeight, border,
+                    format, type, data);
+      // gl.generateMipmap(gl.TEXTURE_2D);
+
+      // set the filtering so we don't need mips
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      
+      // Set the parameters based on the passed type
+      if(tiling === WTCGL.IMAGETYPE_TILE) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+      } else if(tiling === WTCGL.IMAGETYPE_MIRROR) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
+      } else if(tiling === WTCGL.IMAGETYPE_REGULAR) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      }
+    }
+    
+    // Create and bind the framebuffer
+    const fb = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+
+    // attach the texture as the first color attachment
+    const attachmentPoint = gl.COLOR_ATTACHMENT0;
+    const level = 0;
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);
+
+    return {
+      w: w * this.pxratio,
+      h: h * this.pxratio,
+      fb: fb,
+      frameTexture: targetTexture
+    };
+  }
+  
+
+	/**
+	 * Resizes the canvas to a specified width and height, respecting the pixel ratio
+	 *
+	 * @param  {number} w The width of the canvas
+	 * @param  {number} h The height of the canvas
+	 * @return {Void}
+	 */
+  resize(w, h) {
+    this.width = w;
+    this.height = h;
+    this._el.width = w * this.pxratio;
+    this._el.height = h * this.pxratio;
+    this._size = [w * this.pxratio, h * this.pxratio];
+    if(this.styleElement) {
+      this._el.style.width = w + 'px';
+      this._el.style.height = h + 'px';
+    }
+    
+    this._ctx.viewportWidth = w * this.pxratio;
+    this._ctx.viewportHeight = h * this.pxratio;
+    
+    this._ctx.uniform2fv( this._programInfo.uniforms.resolution, this._size);
+    
+    this.initBuffers(this._positions);
+  }
+  
+	/**
+	 * Initialise a provided vertex buffer
+	 *
+	 * @param  {array} positions The vertex positions to initialise
+	 * @return {Void}
+	 */
+  initBuffers(positions) {
+    this._positions = positions;
+    this._positionBuffer = this._ctx.createBuffer();
+    
+    this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
+    
+    this._ctx.bufferData(this._ctx.ARRAY_BUFFER,
+                  new Float32Array(positions),
+                  this._ctx.STATIC_DRAW);
+  }
+  
+	/**
+	 * Add a uniform to the program. At this time the following types are supported:
+   * - Float - WTCGL.TYPE_FLOAT
+   * - Vector 2 - WTCGL.TYPE_V2
+   * - Vector 3 - WTCGL.TYPE_V3
+   * - Vector 4 - WTCGL.TYPE_V4
+	 *
+	 * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
+	 * @param  {WTCGL.UNIFORM_TYPE} type The unfiform type 
+	 * @param  {number|array} value The unfiform value. The type depends on the uniform type being created 
+	 * @return {WebGLUniformLocation} The uniform location for later reference
+	 */
+  addUniform(name, type, value) {
+    let uniform = this._programInfo.uniforms[name];
+    uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+    switch(type) {
+      case WTCGL.TYPE_INT : 
+        if(!isNaN(value)) this._ctx.uniform1i( uniform, value);
+        break;
+      case WTCGL.TYPE_FLOAT : 
+        if(!isNaN(value)) this._ctx.uniform1f( uniform, value);
+        break;
+      case WTCGL.TYPE_V2 : 
+        if(value instanceof Array && value.length === 2.) this._ctx.uniform2fv( uniform, value);
+        break;
+      case WTCGL.TYPE_V3 : 
+        if(value instanceof Array && value.length === 3.) this._ctx.uniform3fv( uniform, value);
+        break;
+      case WTCGL.TYPE_V4 : 
+        if(value instanceof Array && value.length === 4.) this._ctx.uniform4fv( uniform, value);
+        break;
+      case WTCGL.TYPE_BOOL : 
+        if(!isNaN(value)) this._ctx.uniform1i( uniform, value);
+        break;
+    }
+    this._programInfo.uniforms[name] = uniform;
+    return uniform;
+  }
+
+  /**
+   * Adds a texture to the program and links it to a named uniform. Providing the type changes the tiling properties of the texture. Possible values for type:
+   * - WTCGL.IMAGETYPE_REGULAR - No tiling, clamp to edges and doesn't need to be power of 2.
+   * - WTCGL.IMAGETYPE_TILE - full x and y tiling, needs to be power of 2.
+   * - WTCGL.IMAGETYPE_MIRROR - mirror tiling, needs to be power of 2.
+   *
+   * @public
+	 * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
+   * @param  {WTCGL.TYPE_IMAGETYPE} type The type of texture to create. This is basically the tiling behaviour of the texture as described above
+	 * @param  {Image} image The image object to add to the texture
+   * @return {WebGLTexture} The texture object
+   */
+  addTexture(name, type, image, liveUpdate = false) {
+    
+    var texture = this._ctx.createTexture();
+    this._ctx.pixelStorei(this._ctx.UNPACK_FLIP_Y_WEBGL, true);
+    this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
+    
+    // this._ctx.generateMipmap(this._ctx.TEXTURE_2D);
+ 
+    // Set the parameters based on the passed type
+    if(type === WTCGL.IMAGETYPE_MIRROR) {
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.MIRRORED_REPEAT);
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.MIRRORED_REPEAT);
+    } else if(type === WTCGL.IMAGETYPE_REGULAR) {
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.CLAMP_TO_EDGE);
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.CLAMP_TO_EDGE);
+    }
+    
+    this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MIN_FILTER, this._ctx.LINEAR);
+    // this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MAG_FILTER, this._ctx.LINEAR);
+ 
+    // Upload the image into the texture.
+    this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
+ 
+    // add the texture to the array of textures.
+    this.pushTexture(name, texture, image, this._ctx.TEXTURE_2D, liveUpdate);
+    
+    
+    return texture;
+  }
+  
+  pushTexture(name, texture, image, target, liveUpdate = false) {
+    let textures = this.textures;
+    
+    textures.push({ name: name, tex: texture, liveUpdate: liveUpdate, image: image, target: target });
+    
+    // Finally set the this.textures (this is just to get around the funnyness of default getters)
+    this.textures = textures;
+  }
+
+	/**
+	 * Updates a texture location for a given WebGLTexture with an image
+	 *
+	 * @param  {WebGLTexture} texture The texture location to update
+	 * @param  {Image} image The image object to add to the texture
+	 * @return {Void}
+	 */
+  updateTexture(texture, image, name) {
+    
+    let uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+    // Set the texture unit to the uniform
+    this._ctx.uniform1i(uniform, 0);
+    this._ctx.activeTexture(this._ctx.TEXTURE0);
+    
+    this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
+    // Upload the image into the texture.
+    this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
+  }
+
+	/**
+	 * Initialise texture locations in the program
+	 *
+	 * @return {Void}
+	 */
+  initTextures() {
+    for(let i = 0; i < this.textures.length; i++) {
+      let name = this.textures[i].name;
+      let uniform = this._programInfo.uniforms[name];
+      uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+
+      // Set the texture unit to the uniform
+      this._ctx.uniform1i(uniform, i);
+
+      // find the active texture based on the index
+      this._ctx.activeTexture(this._ctx[`TEXTURE${i}`]);
+
+      // Finally, bind the texture
+      this._ctx.bindTexture(this.textures[i].target, this.textures[i].tex);
+    }
+  }
+  
+	/**
+	 * The run loop. This function is run as a part of a RaF and updates the internal
+   * time uniform (`u_time`).
+	 *
+   * @param  {number} delta The delta time provided by the RaF loop
+	 * @return {Void}
+	 */
+  run(delta) {
+    this.running && requestAnimationFrame(this.run);
+    
+    const runFunction = () => {
+      this.time = this.startTime + delta * .0002;
+      this.onRun(delta);
+      this.render();
+    }
+    
+    if(this.frameRate) {
+      let now = Date.now();
+      let elapsed = now - this._then;
+
+      if (elapsed > this.frameRate) {
+        this._then = now - (elapsed % this.frameRate);
+
+        runFunction();
+      }
+    } else {
+      runFunction();
+    }
+  }
+  
+	/**
+	 * Render the program
+	 *
+	 * @return {Void}
+	 */
+  render(buffer = {}) {
+    this._ctx.bindFramebuffer(this._ctx.FRAMEBUFFER, buffer.fb || null);
+    // Update the time uniform
+    this._ctx.uniform1f( this._programInfo.uniforms.time, this.time);
+    
+    this.textures.forEach((textureInfo) => {
+      if(textureInfo.liveUpdate === true) {
+        this.updateTexture(textureInfo.tex, textureInfo.image, textureInfo.name);
+      }
+    });
+
+    this._ctx.viewport(0, 0, buffer.w || this._ctx.viewportWidth, buffer.h || this._ctx.viewportHeight);
+    if(this.clearing) {
+      this._ctx.clearColor(1.0, 0.0, 0.0, 0.0);
+      // this._ctx.clearDepth(1.0);
+      // this._ctx.enable(this._ctx.DEPTH_TEST);
+      // this._ctx.depthFunc(this._ctx.LEQUAL);
+      
+      this._ctx.blendFunc(this._ctx.SRC_ALPHA, this._ctx.ONE_MINUS_SRC_ALPHA);
+
+      this._ctx.clear( this._ctx.COLOR_BUFFER_BIT );
+    }
+
+    this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
+    this._ctx.vertexAttribPointer(
+        this._programInfo.attribs.vertexPosition,
+        3,
+        this._ctx.FLOAT,
+        false,
+        0,
+        0);
+    this._ctx.enableVertexAttribArray(this._programInfo.attribs.vertexPosition);
+
+    // Set the shader uniforms
+    this.includePerspectiveMatrix && this._ctx.uniformMatrix4fv( this._programInfo.uniforms.projectionMatrix, false, this.perspectiveMatrix);
+    this.includeModelViewMatrix && this._ctx.uniformMatrix4fv( this._programInfo.uniforms.modelViewMatrix, false, this.modelViewMatrix);
+
+    this._ctx.drawArrays(this._ctx.TRIANGLE_STRIP, 0, 4);
+  }
+
+
+  /**
+   * Getters and setters
+   */
+
+  /**
+   * The default webGL parameters to be used for the program.
+   * This is read only and should only be overridden as a part of a subclass.
+   *
+   * @readonly
+   * @type {object}
+   * @default { alpha: true }
+   */
+  get webgl_params() {
+    return { alpha: true };
+  }
+  
+  /**
+   * (getter/setter) Whether the element should include styling as a part of
+   * its rendition.
+   *
+   * @type {boolean}
+   * @default true
+   */
+  set styleElement(value) {
+    this._styleElement = value === true;
+    if(this._styleElement === false && this._el) {
+      this._el.style.width = '';
+      this._el.style.height = '';
+    }
+  }
+  get styleElement() {
+    return this._styleElement !== false;
+  }
+
+  /**
+   * (getter/setter) startTime. This is a value to begin the `u_time` 
+   * unform at. This is here in case you want `u_time` to begin at a 
+   * specific value other than 0.
+   *
+   * @type {number}
+   * @default 0
+   */
+  set startTime(value) {
+    if(!isNaN(value)) {
+      this._startTime = value;
+    }
+  }
+  get startTime() {
+    return this._startTime || 0;
+  }
+  
+  /**
+   * (getter/setter) time. This is the time that the program currently
+   * sits at. By default this value is set as a part of the run loop
+   * however this is a public property so that we can specify time
+   * for rendition outside of the run loop.
+   *
+   * @type {number}
+   * @default 0
+   */
+  set time(value) {
+    if(!isNaN(value)) {
+      this._time = value;
+    }
+  }
+  get time() {
+    return this._time || 0;
+  }
+  
+  /**
+   * (getter/setter) includePerspectiveMatrix. This determines whether the 
+   * perspecive matrix is included in the program. This doesn't really make
+   * a difference right now, but this is here to provide future interoperability.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set includePerspectiveMatrix(value) {
+    this._includePerspectiveMatrix = value === true;
+  }
+  get includePerspectiveMatrix() {
+    return this._includePerspectiveMatrix === true;
+  }
+  
+  /**
+   * (getter/setter) includeModelViewMatrix. This determines whether the 
+   * model view matrix is included in the program. This doesn't really make
+   * a difference right now, but this is here to provide future interoperability.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set includeModelViewMatrix(value) {
+    this._includeModelViewMatrix = value === true;
+  }
+  get includeModelViewMatrix() {
+    return this._includeModelViewMatrix === true;
+  }
+
+  /**
+   * (getter/setter) textures. The array of textures to initialise into the program.
+   *
+   * @private
+   * @type {array}
+   * @default []
+   */
+  set textures(value) {
+    if(value instanceof Array) {
+      this._textures = value;
+    }
+  }
+  get textures() {
+    return this._textures || [];
+  }
+  
+  /**
+   * (getter/setter) clearing. Specifies whether the program should clear the screen 
+   * before drawing anew.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set clearing(value) {
+    this._clearing = value === true;
+  }
+  get clearing() {
+    return this._clearing === true;
+  }
+  
+  /**
+   * (getter/setter) running. Specifies whether the programming is running. Setting 
+   * this to true will create a RaF loop which will call the run function.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set running(value) {
+    if(!this.running && value === true) {
+      
+      this._then = Date.now();
+      
+      requestAnimationFrame(this.run);
+    } 
+    this._running = value === true;
+  }
+  get running() {
+    return this._running === true;
+  }
+  
+  set frameRate(value) {
+    if(!isNaN(value)) this._frameRate = 1000 / value;
+  }
+  get frameRate() {
+    return this._frameRate || null;
+  }
+  
+  /**
+   * (getter/setter) pxratio. The 1-dimensional pixel ratio of the application.
+   * This should be used either for making a program look good on high density
+   * screens or for raming down pixel density for performance.
+   *
+   * @type {number}
+   * @default 1
+   */
+  set pxratio(value) {
+    if(value > 0) this._pxratio = value;
+  }
+  get pxratio() {
+    return this._pxratio || 1;
+  }
+  
+  /**
+   * (getter/setter) perspectiveMatrix. Calculate a perspective matrix, a 
+   * special matrix that is used to simulate the distortion of perspective in 
+   * a camera. Our field of view is 45 degrees, with a width/height ratio 
+   * that matches the display size of the canvas and we only want to see 
+   * objects between 0.1 units and 100 units away from the camera.
+   *
+   * @readonly
+   * @type {mat4}
+   */
+  get perspectiveMatrix() {
+    const fieldOfView = 45 * Math.PI / 180;   // in radians
+    const aspect = this._size.w / this._size.h;
+    const zNear = 0.1;
+    const zFar = 100.0;
+    const projectionMatrix = mat4.create();
+    // note: glmatrix.js always has the first argument
+    // as the destination to receive the result.
+    mat4.perspective(projectionMatrix,
+                     fieldOfView,
+                     aspect,
+                     zNear,
+                     zFar);
+    
+    return projectionMatrix;
+  }
+  
+  /**
+   * (getter/setter) perspectiveMatrix. Calculate a model view matrix.
+   *
+   * @readonly
+   * @type {mat4}
+   */
+  get modelViewMatrix() {
+    // Set the drawing position to the "identity" point, which is
+    // the center of the scene.
+    const modelViewMatrix = mat4.create();
+    
+    // Now move the drawing position a bit to where we want to
+    // start drawing the square.
+    mat4.translate(modelViewMatrix,     // destination matrix
+                   modelViewMatrix,     // matrix to translate
+                   [-0.0, 0.0, -1.]);  // amount to translate
+    
+    return modelViewMatrix;
+  }
+  
+  set onRun(runMethod) {
+    if(typeof runMethod == 'function') {
+      this._onRun = runMethod.bind(this);
+    }
+  }
+  get onRun() {
+    return this._onRun;
+  }
+  
+  get context() {
+    return this._ctx || null;
+  }
+  
+  /**
+   * Static Methods
+   */
+
+	/**
+	 * Create a shader of a given type given a context, type and source.
+	 *
+   * @static
+	 * @param  {WebGLContext} ctx The context under which to create the shader
+	 * @param  {WebGLShaderType} type The shader type, vertex or fragment
+	 * @param  {string} source The shader source.
+	 * @return {WebGLShader} The created shader
+	 */
+  static createShaderOfType(ctx, type, source) {
+    const shader = ctx.createShader(type);
+    ctx.shaderSource(shader, source);
+    ctx.compileShader(shader);
+    
+    if (!ctx.getShaderParameter(shader, ctx.COMPILE_STATUS)) {
+      console.log('An error occurred compiling the shaders: ' + ctx.getShaderInfoLog(shader));
+      ctx.deleteShader(shader);
+      return null;
+    }
+    
+    return shader;
+  }
+}
+
+WTCGL.TYPE_INT = 0;
+WTCGL.TYPE_FLOAT = 1;
+WTCGL.TYPE_V2 = 2;
+WTCGL.TYPE_V3 = 3;
+WTCGL.TYPE_V4 = 4;
+WTCGL.TYPE_BOOL = 5;
+
+WTCGL.IMAGETYPE_REGULAR = 0;
+WTCGL.IMAGETYPE_TILE = 1;
+WTCGL.IMAGETYPE_MIRROR = 2;
+
+WTCGL.TEXTYPE_FLOAT = 0;
+WTCGL.TEXTYPE_UNSIGNED_BYTE = 1;
+WTCGL.TEXTYPE_HALF_FLOAT_OES = 2;
\ No newline at end of file
diff --git a/tetradic-truchet/dist/index.html b/tetradic-truchet/dist/index.html
new file mode 100644
index 0000000..25d0a4d
--- /dev/null
+++ b/tetradic-truchet/dist/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Tetradic Truchet</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="toggle" aria-expanded="true">
+  <button class="toggle__button"><span class="toggle__text">Tetradic Color Picker</span>
+    <svg class="toggle__icon" width="48" height="48" viewBox="0 0 48 48">
+      <g fill="none" fill-rule="evenodd">
+        <circle cx="24" cy="24" r="24" fill="#E7E8E8"></circle>
+        <g stroke="#101820" stroke-width="3" transform="translate(14 14)">
+          <rect width="17" height="17" x="1.5" y="1.5"></rect>
+          <rect width="17" height="5" x="1.5" y="1.5"></rect>
+        </g>
+      </g>
+    </svg>
+  </button>
+  <div class="toggle__content">
+    <div class="color-picker">
+      <div class="color-picker__canvas-wrap">
+        <canvas class="color-picker__canvas"></canvas>
+      </div>
+      <ul class="color-picker__inputs">
+        <li class="color-picker__item">
+          <div class="color-picker__input-wrap">
+            <input class="color-picker__input" type="range" min="0" max="100" step="1"/>
+          </div><span class="color-picker__color-label"></span>
+        </li>
+        <li class="color-picker__item">
+          <div class="color-picker__input-wrap">
+            <input class="color-picker__input" type="range" min="0" max="100" step="1"/>
+          </div><span class="color-picker__color-label"></span>
+        </li>
+        <li class="color-picker__item">
+          <div class="color-picker__input-wrap">
+            <input class="color-picker__input" type="range" min="0" max="100" step="1"/>
+          </div><span class="color-picker__color-label"></span>
+        </li>
+        <li class="color-picker__item">
+          <div class="color-picker__input-wrap">
+            <input class="color-picker__input" type="range" min="0" max="100" step="1"/>
+          </div><span class="color-picker__color-label"></span>
+        </li>
+      </ul>
+      <button class="color-picker__button">Download!</button>
+    </div>
+  </div>
+</div>
+<canvas id="webgl"></canvas>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/tetradic-truchet/dist/script.js b/tetradic-truchet/dist/script.js
new file mode 100644
index 0000000..1080208
--- /dev/null
+++ b/tetradic-truchet/dist/script.js
@@ -0,0 +1,1258 @@
+/**
+ * A basic Web GL class. This provides a very basic setup for GLSL shader code.
+ * Currently it doesn't support anything except for clip-space 3d, but this was
+ * done so that we could start writing fragments right out of the gate. My
+ * Intention is to update it with particle and polygonal 3d support later on.
+ *
+ * @class WTCGL
+ * @author Liam Egan <liam@wethecollective.com>
+ * @version 0.0.8
+ * @created Jan 16, 2019
+ */
+class WTCGL {
+
+  /**
+   * The WTCGL Class constructor. If construction of the webGL context fails 
+    * for any reason this will return null.
+    * 
+    * @TODO make the dimension properties properly optional
+    * @TODO provide the ability to allow for programmable buffers
+   *
+   * @constructor
+   * @param {HTMLElement} el The canvas element to use as the root
+   * @param {string} vertexShaderSource The vertex shader source
+   * @param {string} fragmentShaderSource The fragment shader source
+    * @param {number} [width] The width of the webGL context. This will default to the canvas dimensions
+    * @param {number} [height] The height of the webGL context. This will default to the canvas dimensions
+    * @param {number} [pxratio=1] The pixel aspect ratio of the canvas
+    * @param {boolean} [styleElement] A boolean indicating whether to apply a style property to the canvas (resizing the canvas by the inverse of the pixel ratio)
+    * @param {boolean} [webgl2] A boolean indicating whether to try to create a webgl2 context instead of a regulart context
+   */
+  constructor(el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, styleElement, webgl2, params = {}) {
+    this.run = this.run.bind(this);
+
+    this._onRun = () => {};
+
+    // Destructure if an object is aprovided instead a series of parameters
+    if (el instanceof Object && el.el) {
+      ({ el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, webgl2, styleElement } = el);
+    }
+
+    // If the HTML element isn't a canvas, return null
+    if (!el instanceof HTMLElement || el.nodeName.toLowerCase() !== 'canvas') {
+      console.log('Provided element should be a canvas element');
+      return null;
+    }
+
+    this._el = el;
+    // The context should be either webgl2, webgl or experimental-webgl
+    if (webgl2 === true) {
+      this.isWebgl2 = true;
+      this._ctx = this._el.getContext("webgl2", this.webgl_params) || this._el.getContext("webgl", this.webgl_params) || this._el.getContext("experimental-webgl", this.webgl_params);
+    } else {
+      this.isWebgl2 = false;
+      this._ctx = this._el.getContext("webgl", Object.assign({}, this.webgl_params, params)) || this._el.getContext("experimental-webgl", Object.assign({}, this.webgl_params, params));
+    }
+
+    // Set up the extensions
+    this._ctx.getExtension('OES_standard_derivatives');
+    this._ctx.getExtension('EXT_shader_texture_lod');
+    this._ctx.getExtension('OES_texture_float');
+    this._ctx.getExtension('WEBGL_color_buffer_float');
+    this._ctx.getExtension('OES_texture_float_linear');
+    this._ctx.getExtension('EXT_color_buffer_float');
+
+    // We can't make the context so return an error
+    if (!this._ctx) {
+      console.log('Browser doesn\'t support WebGL ');
+      return null;
+    }
+
+    // Create the shaders
+    this._vertexShader = WTCGL.createShaderOfType(this._ctx, this._ctx.VERTEX_SHADER, vertexShaderSource);
+    this._fragmentShader = WTCGL.createShaderOfType(this._ctx, this._ctx.FRAGMENT_SHADER, fragmentShaderSource);
+
+    // Create the program and link the shaders
+    this._program = this._ctx.createProgram();
+    this._ctx.attachShader(this._program, this._vertexShader);
+    this._ctx.attachShader(this._program, this._fragmentShader);
+    this._ctx.linkProgram(this._program);
+
+    // If we can't set up the params, this means the shaders have failed for some reason
+    if (!this._ctx.getProgramParameter(this._program, this._ctx.LINK_STATUS)) {
+      console.log('Unable to initialize the shader program: ' + this._ctx.getProgramInfoLog(this._program));
+      return null;
+    }
+
+    // Initialise the vertex buffers
+    this.initBuffers([
+    -1.0, 1.0, -1.,
+    1.0, 1.0, -1.,
+    -1.0, -1.0, -1.,
+    1.0, -1.0, -1.]);
+
+
+    // Initialise the frame buffers
+    this.frameBuffers = [];
+
+    // The program information object. This is essentially a state machine for the webGL instance
+    this._programInfo = {
+      attribs: {
+        vertexPosition: this._ctx.getAttribLocation(this._program, 'a_position') },
+
+      uniforms: {
+        projectionMatrix: this._ctx.getUniformLocation(this._program, 'u_projectionMatrix'),
+        modelViewMatrix: this._ctx.getUniformLocation(this._program, 'u_modelViewMatrix'),
+        resolution: this._ctx.getUniformLocation(this._program, 'u_resolution'),
+        time: this._ctx.getUniformLocation(this._program, 'u_time') } };
+
+
+
+    // Tell WebGL to use our program when drawing
+    this._ctx.useProgram(this._program);
+
+    this.pxratio = pxratio;
+
+    this.styleElement = styleElement !== true;
+
+    this.resize(width, height);
+  }
+
+
+  /**
+   * Public methods
+   */
+
+  addFrameBuffer(w, h, tiling = 0, buffertype = 0) {
+    // create to render to
+    const gl = this._ctx;
+    const targetTextureWidth = w * this.pxratio;
+    const targetTextureHeight = h * this.pxratio;
+    const targetTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, targetTexture);
+    {
+      // define size and format of level 0
+      const level = 0;
+      let internalFormat = gl.RGBA;
+      const border = 0;
+      let format = gl.RGBA;
+      let t;
+      if (buffertype & WTCGL.TEXTYPE_FLOAT) {
+        const e = gl.getExtension('OES_texture_float');
+        window.extension = e;
+        t = e.FLOAT;
+        // internalFormat = gl.RGBA32F;
+      } else if (buffertype & WTCGL.TEXTYPE_HALF_FLOAT_OES) {
+        // t = gl.renderer.isWebgl2 ? e.HALF_FLOAT : e.HALF_FLOAT_OES;
+        //     gl.renderer.extensions['OES_texture_half_float'] ? gl.renderer.extensions['OES_texture_half_float'].HALF_FLOAT_OES : 
+        //     gl.UNSIGNED_BYTE;
+        const e = gl.getExtension('OES_texture_half_float');
+        t = this.isWebgl2 ? gl.HALF_FLOAT : e.HALF_FLOAT_OES;
+        // format = gl.RGBA;
+        if (this.isWebgl2) {
+          internalFormat = gl.RGBA16F;
+        }
+        // internalFormat = gl.RGB32F;
+        // format = gl.RGB32F;
+        // window.gl = gl
+        // t = e.HALF_FLOAT_OES;
+      } else {
+        t = gl.UNSIGNED_BYTE;
+      }
+      const type = t;
+      const data = null;
+      gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+      targetTextureWidth, targetTextureHeight, border,
+      format, type, data);
+      // gl.generateMipmap(gl.TEXTURE_2D);
+
+      // set the filtering so we don't need mips
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+
+      // Set the parameters based on the passed type
+      if (tiling === WTCGL.IMAGETYPE_TILE) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+      } else if (tiling === WTCGL.IMAGETYPE_MIRROR) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
+      } else if (tiling === WTCGL.IMAGETYPE_REGULAR) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      }
+    }
+
+    // Create and bind the framebuffer
+    const fb = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+
+    // attach the texture as the first color attachment
+    const attachmentPoint = gl.COLOR_ATTACHMENT0;
+    const level = 0;
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);
+
+    return {
+      w: w * this.pxratio,
+      h: h * this.pxratio,
+      fb: fb,
+      frameTexture: targetTexture };
+
+  }
+
+
+  /**
+   * Resizes the canvas to a specified width and height, respecting the pixel ratio
+   *
+   * @param  {number} w The width of the canvas
+   * @param  {number} h The height of the canvas
+   * @return {Void}
+   */
+  resize(w, h) {
+    this.width = w;
+    this.height = h;
+    this._el.width = w * this.pxratio;
+    this._el.height = h * this.pxratio;
+    this._size = [w * this.pxratio, h * this.pxratio];
+    if (this.styleElement) {
+      this._el.style.width = w + 'px';
+      this._el.style.height = h + 'px';
+    }
+
+    this._ctx.viewportWidth = w * this.pxratio;
+    this._ctx.viewportHeight = h * this.pxratio;
+
+    this._ctx.uniform2fv(this._programInfo.uniforms.resolution, this._size);
+
+    this.initBuffers(this._positions);
+  }
+
+  /**
+   * Initialise a provided vertex buffer
+   *
+   * @param  {array} positions The vertex positions to initialise
+   * @return {Void}
+   */
+  initBuffers(positions) {
+    this._positions = positions;
+    this._positionBuffer = this._ctx.createBuffer();
+
+    this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
+
+    this._ctx.bufferData(this._ctx.ARRAY_BUFFER,
+    new Float32Array(positions),
+    this._ctx.STATIC_DRAW);
+  }
+
+  /**
+   * Add a uniform to the program. At this time the following types are supported:
+    * - Float - WTCGL.TYPE_FLOAT
+    * - Vector 2 - WTCGL.TYPE_V2
+    * - Vector 3 - WTCGL.TYPE_V3
+    * - Vector 4 - WTCGL.TYPE_V4
+   *
+   * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
+   * @param  {WTCGL.UNIFORM_TYPE} type The unfiform type 
+   * @param  {number|array} value The unfiform value. The type depends on the uniform type being created 
+   * @return {WebGLUniformLocation} The uniform location for later reference
+   */
+  addUniform(name, type, value) {
+    let uniform = this._programInfo.uniforms[name];
+    uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+    switch (type) {
+      case WTCGL.TYPE_INT:
+        if (!isNaN(value)) this._ctx.uniform1i(uniform, value);
+        break;
+      case WTCGL.TYPE_FLOAT:
+        if (!isNaN(value)) this._ctx.uniform1f(uniform, value);
+        break;
+      case WTCGL.TYPE_V2:
+        if (value instanceof Array && value.length === 2.) this._ctx.uniform2fv(uniform, value);
+        break;
+      case WTCGL.TYPE_V3:
+        if (value instanceof Array && value.length === 3.) this._ctx.uniform3fv(uniform, value);
+        break;
+      case WTCGL.TYPE_V4:
+        if (value instanceof Array && value.length === 4.) this._ctx.uniform4fv(uniform, value);
+        break;
+      case WTCGL.TYPE_BOOL:
+        if (!isNaN(value)) this._ctx.uniform1i(uniform, value);
+        break;}
+
+    this._programInfo.uniforms[name] = uniform;
+    return uniform;
+  }
+
+  /**
+   * Adds a texture to the program and links it to a named uniform. Providing the type changes the tiling properties of the texture. Possible values for type:
+   * - WTCGL.IMAGETYPE_REGULAR - No tiling, clamp to edges and doesn't need to be power of 2.
+   * - WTCGL.IMAGETYPE_TILE - full x and y tiling, needs to be power of 2.
+   * - WTCGL.IMAGETYPE_MIRROR - mirror tiling, needs to be power of 2.
+   *
+   * @public
+  * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
+   * @param  {WTCGL.TYPE_IMAGETYPE} type The type of texture to create. This is basically the tiling behaviour of the texture as described above
+  * @param  {Image} image The image object to add to the texture
+   * @return {WebGLTexture} The texture object
+   */
+  addTexture(name, type, image, liveUpdate = false) {
+
+    var texture = this._ctx.createTexture();
+    this._ctx.pixelStorei(this._ctx.UNPACK_FLIP_Y_WEBGL, true);
+    this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
+
+    // this._ctx.generateMipmap(this._ctx.TEXTURE_2D);
+
+    // Set the parameters based on the passed type
+    if (type === WTCGL.IMAGETYPE_MIRROR) {
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.MIRRORED_REPEAT);
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.MIRRORED_REPEAT);
+    } else if (type === WTCGL.IMAGETYPE_REGULAR) {
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.CLAMP_TO_EDGE);
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.CLAMP_TO_EDGE);
+    }
+
+    this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MIN_FILTER, this._ctx.LINEAR);
+    // this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MAG_FILTER, this._ctx.LINEAR);
+
+    // Upload the image into the texture.
+    this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
+
+    // add the texture to the array of textures.
+    this.pushTexture(name, texture, image, this._ctx.TEXTURE_2D, liveUpdate);
+
+
+    return texture;
+  }
+
+  pushTexture(name, texture, image, target, liveUpdate = false) {
+    let textures = this.textures;
+
+    textures.push({ name: name, tex: texture, liveUpdate: liveUpdate, image: image, target: target });
+
+    // Finally set the this.textures (this is just to get around the funnyness of default getters)
+    this.textures = textures;
+  }
+
+  /**
+   * Updates a texture location for a given WebGLTexture with an image
+   *
+   * @param  {WebGLTexture} texture The texture location to update
+   * @param  {Image} image The image object to add to the texture
+   * @return {Void}
+   */
+  updateTexture(texture, image, name) {
+
+    let uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+    // Set the texture unit to the uniform
+    this._ctx.uniform1i(uniform, 0);
+    this._ctx.activeTexture(this._ctx.TEXTURE0);
+
+    this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
+    // Upload the image into the texture.
+    this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
+  }
+
+  /**
+   * Initialise texture locations in the program
+   *
+   * @return {Void}
+   */
+  initTextures() {
+    for (let i = 0; i < this.textures.length; i++) {
+      let name = this.textures[i].name;
+      let uniform = this._programInfo.uniforms[name];
+      uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+
+      // Set the texture unit to the uniform
+      this._ctx.uniform1i(uniform, i);
+
+      // find the active texture based on the index
+      this._ctx.activeTexture(this._ctx[`TEXTURE${i}`]);
+
+      // Finally, bind the texture
+      this._ctx.bindTexture(this.textures[i].target, this.textures[i].tex);
+    }
+  }
+
+  /**
+   * The run loop. This function is run as a part of a RaF and updates the internal
+    * time uniform (`u_time`).
+   *
+    * @param  {number} delta The delta time provided by the RaF loop
+   * @return {Void}
+   */
+  run(delta) {
+    this.running && requestAnimationFrame(this.run);
+
+    const runFunction = () => {
+      this.time = this.startTime + delta * .0002;
+      this.onRun(delta);
+      this.render();
+    };
+
+    if (this.frameRate) {
+      let now = Date.now();
+      let elapsed = now - this._then;
+
+      if (elapsed > this.frameRate) {
+        this._then = now - elapsed % this.frameRate;
+
+        runFunction();
+      }
+    } else {
+      runFunction();
+    }
+  }
+
+  /**
+   * Render the program
+   *
+   * @return {Void}
+   */
+  render(buffer = {}) {
+    this._ctx.bindFramebuffer(this._ctx.FRAMEBUFFER, buffer.fb || null);
+    // Update the time uniform
+    this._ctx.uniform1f(this._programInfo.uniforms.time, this.time);
+
+    this.textures.forEach(textureInfo => {
+      if (textureInfo.liveUpdate === true) {
+        this.updateTexture(textureInfo.tex, textureInfo.image, textureInfo.name);
+      }
+    });
+
+    this._ctx.viewport(0, 0, buffer.w || this._ctx.viewportWidth, buffer.h || this._ctx.viewportHeight);
+    if (this.clearing) {
+      this._ctx.clearColor(1.0, 0.0, 0.0, 0.0);
+      // this._ctx.clearDepth(1.0);
+      // this._ctx.enable(this._ctx.DEPTH_TEST);
+      // this._ctx.depthFunc(this._ctx.LEQUAL);
+
+      this._ctx.blendFunc(this._ctx.SRC_ALPHA, this._ctx.ONE_MINUS_SRC_ALPHA);
+
+      this._ctx.clear(this._ctx.COLOR_BUFFER_BIT);
+    }
+
+    this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
+    this._ctx.vertexAttribPointer(
+    this._programInfo.attribs.vertexPosition,
+    3,
+    this._ctx.FLOAT,
+    false,
+    0,
+    0);
+    this._ctx.enableVertexAttribArray(this._programInfo.attribs.vertexPosition);
+
+    // Set the shader uniforms
+    this.includePerspectiveMatrix && this._ctx.uniformMatrix4fv(this._programInfo.uniforms.projectionMatrix, false, this.perspectiveMatrix);
+    this.includeModelViewMatrix && this._ctx.uniformMatrix4fv(this._programInfo.uniforms.modelViewMatrix, false, this.modelViewMatrix);
+
+    this._ctx.drawArrays(this._ctx.TRIANGLE_STRIP, 0, 4);
+  }
+
+
+  /**
+   * Getters and setters
+   */
+
+  /**
+   * The default webGL parameters to be used for the program.
+   * This is read only and should only be overridden as a part of a subclass.
+   *
+   * @readonly
+   * @type {object}
+   * @default { alpha: true }
+   */
+  get webgl_params() {
+    return { alpha: true };
+  }
+
+  /**
+   * (getter/setter) Whether the element should include styling as a part of
+   * its rendition.
+   *
+   * @type {boolean}
+   * @default true
+   */
+  set styleElement(value) {
+    this._styleElement = value === true;
+    if (this._styleElement === false && this._el) {
+      this._el.style.width = '';
+      this._el.style.height = '';
+    }
+  }
+  get styleElement() {
+    return this._styleElement !== false;
+  }
+
+  /**
+   * (getter/setter) startTime. This is a value to begin the `u_time` 
+   * unform at. This is here in case you want `u_time` to begin at a 
+   * specific value other than 0.
+   *
+   * @type {number}
+   * @default 0
+   */
+  set startTime(value) {
+    if (!isNaN(value)) {
+      this._startTime = value;
+    }
+  }
+  get startTime() {
+    return this._startTime || 0;
+  }
+
+  /**
+   * (getter/setter) time. This is the time that the program currently
+   * sits at. By default this value is set as a part of the run loop
+   * however this is a public property so that we can specify time
+   * for rendition outside of the run loop.
+   *
+   * @type {number}
+   * @default 0
+   */
+  set time(value) {
+    if (!isNaN(value)) {
+      this._time = value;
+    }
+  }
+  get time() {
+    return this._time || 0;
+  }
+
+  /**
+   * (getter/setter) includePerspectiveMatrix. This determines whether the 
+   * perspecive matrix is included in the program. This doesn't really make
+   * a difference right now, but this is here to provide future interoperability.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set includePerspectiveMatrix(value) {
+    this._includePerspectiveMatrix = value === true;
+  }
+  get includePerspectiveMatrix() {
+    return this._includePerspectiveMatrix === true;
+  }
+
+  /**
+   * (getter/setter) includeModelViewMatrix. This determines whether the 
+   * model view matrix is included in the program. This doesn't really make
+   * a difference right now, but this is here to provide future interoperability.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set includeModelViewMatrix(value) {
+    this._includeModelViewMatrix = value === true;
+  }
+  get includeModelViewMatrix() {
+    return this._includeModelViewMatrix === true;
+  }
+
+  /**
+   * (getter/setter) textures. The array of textures to initialise into the program.
+   *
+   * @private
+   * @type {array}
+   * @default []
+   */
+  set textures(value) {
+    if (value instanceof Array) {
+      this._textures = value;
+    }
+  }
+  get textures() {
+    return this._textures || [];
+  }
+
+  /**
+   * (getter/setter) clearing. Specifies whether the program should clear the screen 
+   * before drawing anew.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set clearing(value) {
+    this._clearing = value === true;
+  }
+  get clearing() {
+    return this._clearing === true;
+  }
+
+  /**
+   * (getter/setter) running. Specifies whether the programming is running. Setting 
+   * this to true will create a RaF loop which will call the run function.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set running(value) {
+    if (!this.running && value === true) {
+
+      this._then = Date.now();
+
+      requestAnimationFrame(this.run);
+    }
+    this._running = value === true;
+  }
+  get running() {
+    return this._running === true;
+  }
+
+  set frameRate(value) {
+    if (!isNaN(value)) this._frameRate = 1000 / value;
+  }
+  get frameRate() {
+    return this._frameRate || null;
+  }
+
+  /**
+   * (getter/setter) pxratio. The 1-dimensional pixel ratio of the application.
+   * This should be used either for making a program look good on high density
+   * screens or for raming down pixel density for performance.
+   *
+   * @type {number}
+   * @default 1
+   */
+  set pxratio(value) {
+    if (value > 0) this._pxratio = value;
+  }
+  get pxratio() {
+    return this._pxratio || 1;
+  }
+
+  /**
+   * (getter/setter) perspectiveMatrix. Calculate a perspective matrix, a 
+   * special matrix that is used to simulate the distortion of perspective in 
+   * a camera. Our field of view is 45 degrees, with a width/height ratio 
+   * that matches the display size of the canvas and we only want to see 
+   * objects between 0.1 units and 100 units away from the camera.
+   *
+   * @readonly
+   * @type {mat4}
+   */
+  get perspectiveMatrix() {
+    const fieldOfView = 45 * Math.PI / 180; // in radians
+    const aspect = this._size.w / this._size.h;
+    const zNear = 0.1;
+    const zFar = 100.0;
+    const projectionMatrix = mat4.create();
+    // note: glmatrix.js always has the first argument
+    // as the destination to receive the result.
+    mat4.perspective(projectionMatrix,
+    fieldOfView,
+    aspect,
+    zNear,
+    zFar);
+
+    return projectionMatrix;
+  }
+
+  /**
+   * (getter/setter) perspectiveMatrix. Calculate a model view matrix.
+   *
+   * @readonly
+   * @type {mat4}
+   */
+  get modelViewMatrix() {
+    // Set the drawing position to the "identity" point, which is
+    // the center of the scene.
+    const modelViewMatrix = mat4.create();
+
+    // Now move the drawing position a bit to where we want to
+    // start drawing the square.
+    mat4.translate(modelViewMatrix, // destination matrix
+    modelViewMatrix, // matrix to translate
+    [-0.0, 0.0, -1.]); // amount to translate
+
+    return modelViewMatrix;
+  }
+
+  set onRun(runMethod) {
+    if (typeof runMethod == 'function') {
+      this._onRun = runMethod.bind(this);
+    }
+  }
+  get onRun() {
+    return this._onRun;
+  }
+
+  get context() {
+    return this._ctx || null;
+  }
+
+  /**
+   * Static Methods
+   */
+
+  /**
+   * Create a shader of a given type given a context, type and source.
+   *
+    * @static
+   * @param  {WebGLContext} ctx The context under which to create the shader
+   * @param  {WebGLShaderType} type The shader type, vertex or fragment
+   * @param  {string} source The shader source.
+   * @return {WebGLShader} The created shader
+   */
+  static createShaderOfType(ctx, type, source) {
+    const shader = ctx.createShader(type);
+    ctx.shaderSource(shader, source);
+    ctx.compileShader(shader);
+
+    if (!ctx.getShaderParameter(shader, ctx.COMPILE_STATUS)) {
+      console.log('An error occurred compiling the shaders: ' + ctx.getShaderInfoLog(shader));
+      ctx.deleteShader(shader);
+      return null;
+    }
+
+    return shader;
+  }}
+
+
+WTCGL.TYPE_INT = 0;
+WTCGL.TYPE_FLOAT = 1;
+WTCGL.TYPE_V2 = 2;
+WTCGL.TYPE_V3 = 3;
+WTCGL.TYPE_V4 = 4;
+WTCGL.TYPE_BOOL = 5;
+
+WTCGL.IMAGETYPE_REGULAR = 0;
+WTCGL.IMAGETYPE_TILE = 1;
+WTCGL.IMAGETYPE_MIRROR = 2;
+
+WTCGL.TEXTYPE_FLOAT = 0;
+WTCGL.TEXTYPE_UNSIGNED_BYTE = 1;
+WTCGL.TEXTYPE_HALF_FLOAT_OES = 2;
+console.clear();
+
+const colorPicker = document.querySelector(".color-picker"),
+canvParent = colorPicker.querySelector(".color-picker__canvas-wrap"),
+canv = colorPicker.querySelector(".color-picker__canvas"),
+ctx = canv.getContext("2d"),
+c_wheel = document.createElement('canvas'),
+ctx_wheel = c_wheel.getContext("2d"),
+dpr = Math.round(Math.min(window.devicePixelRatio, 2)),
+picker_input_parent = colorPicker.querySelector('.color-picker__inputs'),
+sliders = colorPicker.querySelectorAll("input[type='range']"),
+colour_inputs = colorPicker.querySelectorAll(".color-picker__item"),
+toggle = document.querySelector(".toggle"),
+toggleButton = toggle.querySelector(".toggle__button"),
+toggleContent = toggle.querySelector(".toggle__content"),
+numHandles = sliders.length;
+
+let canvW,
+canvH,
+wheelX,
+wheelY,
+wheelRadius,
+handleRadius, // just a starting point,
+handles = new Array(numHandles).fill(),
+activeHueIndex = 0,
+resizeTimer,
+pointerDown = false,
+wheel_drawn = false;
+
+const degreesToRadians = degrees => Math.PI / 180 * degrees;
+const radiansToDegrees = radians => 180 / Math.PI * radians;
+
+// Thanks to Jon Kantner for this function:
+// https://css-tricks.com/converting-color-spaces-in-javascript
+const HSLToRGB = (h, s, l) => {
+  // Must be fractions of 1
+  s /= 100;
+  l /= 100;
+
+  let c = (1 - Math.abs(2 * l - 1)) * s,
+  x = c * (1 - Math.abs(h / 60 % 2 - 1)),
+  m = l - c / 2,
+  r = 0,
+  g = 0,
+  b = 0;
+
+  if (0 <= h && h < 60) {
+    r = c;g = x;b = 0;
+  } else if (60 <= h && h < 120) {
+    r = x;g = c;b = 0;
+  } else if (120 <= h && h < 180) {
+    r = 0;g = c;b = x;
+  } else if (180 <= h && h < 240) {
+    r = 0;g = x;b = c;
+  } else if (240 <= h && h < 300) {
+    r = x;g = 0;b = c;
+  } else if (300 <= h && h < 360) {
+    r = c;g = 0;b = x;
+  }
+  r = Math.min(Math.abs(Math.round((r + m) * 255)), 255);
+  g = Math.min(Math.abs(Math.round((g + m) * 255)), 255);
+  b = Math.min(Math.abs(Math.round((b + m) * 255)), 255);
+
+  return { r, g, b };
+};
+
+const RGBToHex = colour => {
+  const hr = ('00' + Math.floor(colour.r).toString(16)).substr(-2);
+  const hg = ('00' + Math.floor(colour.g).toString(16)).substr(-2);
+  const hb = ('00' + Math.floor(colour.b).toString(16)).substr(-2);
+  return hr + hg + hb;
+};
+
+const setLayout = () => {
+  let size = canvParent.offsetWidth * dpr;
+  wheel_drawn = false;
+
+  canvW = size;
+  canvH = size;
+  canv.width = c_wheel.width = size;
+  canv.height = c_wheel.height = size;
+  wheelRadius = size * .5;
+  cx = size * .5;
+  cy = size * .5;
+  handleRadius = wheelRadius * .5;
+};
+
+const getColourAtPosition = (x, y, l = 50) => {
+  const xCartesian = x + wheelRadius,
+  yCartesian = y + wheelRadius;
+  const diameter = wheelRadius * 2;
+  const pixelIndex = (xCartesian + yCartesian * diameter) * 4;
+  const coordRadius = Math.sqrt(x ** 2 + y ** 2);
+  const coordAngle = Math.atan2(y, x) - 0.0001;
+
+  const colour = HSLToRGB(
+  radiansToDegrees(coordAngle + Math.PI),
+  coordRadius / wheelRadius * 100,
+  l);
+
+
+  colour.coordRadius = coordRadius;
+  colour.pixelIndex = pixelIndex;
+
+  return colour;
+};
+
+
+const drawWheel = () => {
+  if (wheel_drawn === true) {
+    ctx.drawImage(c_wheel, 0, 0);
+    return;
+  }
+  wheel_drawn = true;
+  const diameter = wheelRadius * 2,
+  imageData = ctx_wheel.createImageData(diameter, diameter),
+  pixels = imageData.data;
+
+  // ctx_wheel.clearRect(0, 0, canvW, canvH);
+
+  for (let y = -wheelRadius; y <= wheelRadius; y++) {
+    for (let x = -wheelRadius; x <= wheelRadius; x++) {
+
+      const { r, g, b, coordRadius, pixelIndex } = getColourAtPosition(x, y);
+
+      if (coordRadius < wheelRadius) {
+        pixels[pixelIndex] = r;
+        pixels[pixelIndex + 1] = g;
+        pixels[pixelIndex + 2] = b;
+        pixels[pixelIndex + 3] = 255;
+      }
+    }
+  }
+
+  ctx_wheel.putImageData(imageData, 0, 0);
+  ctx.drawImage(c_wheel, 0, 0);
+};
+
+const updateHandles = (a = 0, l = handleRadius) => {
+  const angleIncr = Math.PI * 2 / numHandles;
+  for (let i = 1; i <= numHandles; i++) {
+    const x = cx + l * Math.cos(angleIncr * i + Math.PI + a),
+    y = cy - l * Math.sin(angleIncr * i + Math.PI + a);
+    handles[i - 1] = {
+      x: x,
+      y: y };
+
+  }
+  updateColours();
+};
+
+const updateColours = () => {
+  handles.forEach((handle, i) => {
+    const { x, y } = handle;
+    const slider = sliders[i];
+    handle.color = getColourAtPosition(x - wheelRadius, y - wheelRadius, slider.value);
+    handle.unModifiedColor = getColourAtPosition(x - wheelRadius, y - wheelRadius);
+  });
+};
+
+const drawHandles = () => {
+  handles.forEach(point => {
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, 7 * dpr, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.strokeStyle = "white";
+    ctx.lineWidth = 2 * dpr;
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, 9 * dpr, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.strokeStyle = "black";
+    ctx.lineWidth = 2 * dpr;
+    ctx.stroke();
+  });
+};
+
+const drawColours = () => {
+  setTimeout(() => {
+    colour_inputs.forEach((input, i) => {
+      const rangeBG = input.querySelector(".color-picker__input-wrap");
+      input.style.setProperty("--fill", `#${RGBToHex(handles[i].unModifiedColor)}`);
+      input.style.setProperty("--modified-fill", `#${RGBToHex(handles[i].color)}`);
+    });
+  }, 0);
+};
+
+const setupUniforms = () => {
+  twodWebGL.addUniform('col1', WTCGL.TYPE_V3, hexToVec3(RGBToHex(handles[0].color)));
+  twodWebGL.addUniform('col2', WTCGL.TYPE_V3, hexToVec3(RGBToHex(handles[1].color)));
+  twodWebGL.addUniform('col3', WTCGL.TYPE_V3, hexToVec3(RGBToHex(handles[2].color)));
+  twodWebGL.addUniform('col4', WTCGL.TYPE_V3, hexToVec3(RGBToHex(handles[3].color)));
+  twodWebGL.addUniform('seed', WTCGL.TYPE_FLOAT, 133.791);
+};
+
+const onResize = () => {
+  if (resizeTimer) clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(() => {
+    setLayout();
+    // updateHandles(); // This was causing the colour scheme to reset. Removing.
+    drawWheel();
+    drawHandles();
+    drawColours();
+    setupUniforms();
+  }, 100);
+};
+
+const respondToPointer = e => {
+  const b = canv.getBoundingClientRect();
+  const m = [(e.clientX - (e.override ? 0 : b.x)) * dpr - wheelRadius, (e.clientY - (e.override ? 0 : b.y)) * dpr - wheelRadius];
+  const p = [Math.atan2(m[0], m[1]), Math.sqrt(m[0] * m[0] + m[1] * m[1])];
+  updateHandles(p[0], p[1]);
+  ctx.clearRect(0, 0, canvW, canvH);
+  drawWheel();
+  drawHandles();
+  drawColours();
+  setupUniforms();
+};
+
+
+const init = () => {
+  setLayout();
+  updateHandles();
+  drawWheel();
+  drawHandles();
+  drawColours();
+  setupUniforms();
+
+  setTimeout(() => {
+    respondToPointer({ clientX: 270 / dpr, clientY: 130 / dpr, override: true });
+  }, 1);
+
+  canv.addEventListener('pointerdown', e => {
+    pointerDown = true;
+    respondToPointer(e);
+  });
+
+  canv.addEventListener('pointerup', e => {
+    pointerDown = false;
+  });
+
+  canv.addEventListener('pointerleave', e => {
+    pointerDown = false;
+  });
+
+  canv.addEventListener('pointermove', e => {
+    if (pointerDown) respondToPointer(e);
+  });
+
+  picker_input_parent.addEventListener('input', e => {
+    updateColours();
+    drawWheel();
+    drawHandles();
+    drawColours();
+    setupUniforms();
+  });
+
+  toggleButton.addEventListener("click", () => {
+    const isExpanded = toggle.getAttribute("aria-expanded") === "true";
+    toggle.setAttribute("aria-expanded", isExpanded ? "false" : "true");
+  });
+
+  window.addEventListener("resize", onResize);
+};
+
+const shader_vert = `
+
+  attribute vec4 a_position;
+  
+  uniform mat4 u_modelViewMatrix;
+  uniform mat4 u_projectionMatrix;
+  
+  void main() {
+    gl_Position = a_position;
+  }
+  `;
+
+const shader_frag = `
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D u_noise;
+  
+  uniform float u_seed;
+  
+  uniform vec3 u_col1;
+  uniform vec3 u_col2;
+  uniform vec3 u_col3;
+  uniform vec3 u_col4;
+  
+  #define PI 3.14159265359
+  
+  vec2 getScreenSpace() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    return uv;
+  }
+  
+  float hash2(vec2 p) {
+    vec3 p3  = fract(vec3(p.xyx) * .1031);
+    p3 += dot(p3, p3.yzx + 33.33);
+    return fract((p3.x + p3.y) * p3.z);
+  }
+  
+  vec4 truchet(inout vec2 uv, float w) {
+    
+    vec2 _uv = uv;
+    
+    vec2 grid = fract(uv)-.5;
+    vec2 id = floor(uv);
+    float r = hash2(id)+.012;
+    float r1 = hash2(id+vec2(50., -50.*r));
+    grid.x *= sign(r-.5);
+    
+    if(r1 >= .0) {
+      vec2 p = grid - .5 * sign(grid.x + grid.y + .0001);
+
+      float f = length(p);
+
+      float a = atan(p.y, p.x);
+      
+      float checker = sign(mod(id.x+id.y, 2.) - .5);
+      if(checker == 0.) checker = 1.;
+      
+      uv = p;
+
+      return vec4(
+        vec2(
+          fract(checker * a / (PI / 4.) - u_time * 10. * hash2(vec2(u_seed, u_seed+10.))), 
+          abs((f - (.5-w)) / (2. * w) - .5) * 2.
+        ),
+        floor(checker * a / (PI / 4.) - u_time * 5.),
+        f
+      );
+    }
+  }
+  
+  vec3 tile(vec2 uv) {
+    vec2 _uv = uv;
+    vec2 id = floor(uv);
+    float r = hash2(id);
+    
+    vec3 col1 = u_col1;
+    vec3 col2 = u_col2;
+    vec3 col3 = u_col3;
+    vec3 col4 = u_col4;
+    
+    if(r < .25) {
+      col1 = u_col2;
+      col2 = u_col1;
+      col3 = u_col4;
+      col4 = u_col3;
+    } else if(r < .5) {
+      col1 = u_col3;
+      col2 = u_col4;
+      col3 = u_col1;
+      col4 = u_col2;
+    } else if(r < .75) {
+      col1 = u_col4;
+      col2 = u_col3;
+      col3 = u_col2;
+      col4 = u_col1;
+    }
+    
+    vec3 colour = col1;
+    
+    float w = .05 + max(hash2(vec2(u_seed, u_seed+1.)) * .2, .05);
+    vec4 t = truchet(uv, w);
+    vec2 luv = t.xy;
+    float luvid = t.z;
+    float field = t.a;
+    
+    colour = mix(
+      colour + (texture2D(u_noise, _uv).rgb - .5) * .05,
+      mix(col2, col3, step(0., uv.x + uv.y)) + (texture2D(u_noise, luv*.3).rgb - .5) * .05,
+      smoothstep(w, w-.01, abs(field-.5))
+    );
+    luv.x *= 1.25;
+    luv.x -= .5;
+    luv.y *= .75;
+    colour = mix(
+      colour,
+      mix(col3, col4, step(0., uv.x + uv.y)) + (texture2D(u_noise, (luv+.5)*.4).rgb - .5) * .05,
+      smoothstep(w, w-.01, abs(field-.5))*smoothstep(.21, .2, length(((luv*.5))))
+    );
+    // colour = mix(
+    //   colour,
+    //   vec3(1) - smoothstep(.0, .2, length(((luv*.5)))) * .1,
+    //   smoothstep(w, w-.01, abs(field-.5))*smoothstep(.21, .2, length(((luv*.5))))
+    // );
+    
+    return colour;
+  }
+
+  void main() {
+    vec2 uv = getScreenSpace();
+    
+    vec3 colour = u_col1;
+    
+    uv *= 3. + 10. * hash2(vec2(u_seed, u_seed));
+    uv += vec2(u_time*2., sin(u_time*.5)*2.);
+    
+    colour = tile(uv);
+
+    gl_FragColor = vec4(colour,1.0);
+  }
+`;
+
+
+const twodWebGL = new WTCGL(
+document.querySelector('canvas#webgl'),
+shader_vert,
+shader_frag,
+window.innerWidth,
+window.innerHeight,
+Math.min(window.devicePixelRatio, 2),
+null,
+false,
+{ preserveDrawingBuffer: true });
+
+twodWebGL.startTime = -100 + Math.random() * 50;
+
+window.addEventListener('resize', () => {
+  twodWebGL.resize(window.innerWidth, window.innerHeight);
+});
+
+const download = () => {
+  const initRatio = twodWebGL.pxratio;
+  twodWebGL.pxratio = 1;
+  twodWebGL.resize(screen.width, screen.height);
+  twodWebGL.render();
+
+  var link = document.createElement('a');
+  link.download = 'codepen-wtc-tetradic.png';
+  link.href = twodWebGL.context.canvas.toDataURL();
+  link.click();
+
+  twodWebGL.pxratio = initRatio;
+  twodWebGL.resize(window.innerWidth, window.innerHeight);
+};
+document.querySelector('button.color-picker__button').addEventListener('click', download);
+
+const hexToVec3 = hex => {
+  const components = /^#?([A-F0-9]{2})([A-F0-9]{2})([A-F0-9]{2})/i.exec(hex);
+  const rtn = [];
+  if (components && components.length === 4) {
+    rtn.push(Math.round(`0x${components[1]}` / 255 * 1000) / 1000);
+    rtn.push(Math.round(`0x${components[2]}` / 255 * 1000) / 1000);
+    rtn.push(Math.round(`0x${components[3]}` / 255 * 1000) / 1000);
+  }
+  return rtn;
+};
+
+// track mouse move
+let mousepos = [0, 0];
+const u_mousepos = twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
+window.addEventListener('pointermove', e => {
+  let ratio = window.innerHeight / window.innerWidth;
+  if (window.innerHeight > window.innerWidth) {
+    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth;
+    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1 * ratio;
+  } else {
+    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
+    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
+  }
+  twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
+});
+
+// Load all our textures. We only initiate the instance once all images are loaded.
+const textures = [
+{
+  name: 'noise',
+  url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',
+  type: WTCGL.IMAGETYPE_TILE,
+  img: null }];
+
+
+const loadImage = function (imageObject) {
+  let img = document.createElement('img');
+  img.crossOrigin = "anonymous";
+
+  return new Promise((resolve, reject) => {
+    img.addEventListener('load', e => {
+      imageObject.img = img;
+      resolve(imageObject);
+    });
+    img.addEventListener('error', e => {
+      reject(e);
+    });
+    img.src = imageObject.url;
+  });
+};
+const loadTextures = function (textures) {
+  return new Promise((resolve, reject) => {
+    const loadTexture = pointer => {
+      if (pointer >= textures.length || pointer > 10) {
+        resolve(textures);
+        return;
+      };
+      const imageObject = textures[pointer];
+
+      const p = loadImage(imageObject);
+      p.then(
+      result => {
+        twodWebGL.addTexture(result.name, result.type, result.img);
+      },
+      error => {
+        console.log('error', error);
+      }).finally(e => {
+        loadTexture(pointer + 1);
+      });
+    };
+    loadTexture(0);
+  });
+
+};
+
+loadTextures(textures).then(
+result => {
+  twodWebGL.initTextures();
+  // twodWebGL.render();
+  twodWebGL.running = true;
+},
+error => {
+  console.log('error');
+});
+
+
+init();
\ No newline at end of file
diff --git a/tetradic-truchet/dist/style.css b/tetradic-truchet/dist/style.css
new file mode 100644
index 0000000..e0d5a0f
--- /dev/null
+++ b/tetradic-truchet/dist/style.css
@@ -0,0 +1,221 @@
+:root {
+  --black: #101820;
+}
+
+body {
+  align-content: start;
+  box-sizing: border-box;
+  display: grid;
+  font-family: sans-serif;
+  font-weight: bold;
+  min-height: 100vh;
+  grid-template-columns: minmax(280px, 485px) 1fr;
+  letter-spacing: 0.03em;
+  line-height: 1;
+  padding: 16px;
+  text-align: center;
+}
+body *:focus:not(:focus-visible) {
+  outline: none;
+}
+
+canvas#webgl {
+  left: 0;
+  position: fixed;
+  top: 0;
+  z-index: 0;
+}
+
+button {
+  appearance: none;
+  background: white;
+  border: none;
+  border-radius: 0;
+  color: var(--black);
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+.toggle {
+  background: white;
+  box-shadow: 0 0 32px rgba(17, 25, 33, 0.5);
+  position: relative;
+  z-index: 1;
+}
+.toggle[aria-expanded=true] .toggle__content {
+  max-height: 800px;
+  opacity: 1;
+  transition-delay: 0.2s, 0s, 0s;
+  transition-duration: 0.4s, 0.4s, 0s;
+  visibility: visible;
+}
+
+.toggle__button {
+  --space: 8px;
+  align-items: center;
+  display: flex;
+  font-size: 1.2rem;
+  justify-content: center;
+  padding: calc(var(--space) * 3);
+  position: relative;
+  width: 100%;
+}
+
+.toggle__icon {
+  position: absolute;
+  top: 50%;
+  right: calc(var(--space) * 2);
+  transform: translateY(-50%);
+}
+
+.toggle__content {
+  max-height: 0;
+  opacity: 0;
+  transition-delay: 0s, 0.2s, 0.6s;
+  transition-duration: 0.2s, 0.4s, 0s;
+  transition-property: opacity, max-height, visibility;
+  visibility: hidden;
+}
+.toggle__content::before {
+  background-color: var(--black);
+  content: "";
+  display: block;
+  height: 1px;
+  margin: auto;
+  width: 94px;
+}
+
+.color-picker {
+  display: grid;
+  padding: 20px 20px 16px;
+  position: relative;
+  gap: 16px;
+  z-index: 1;
+}
+
+.color-picker__canvas-wrap {
+  justify-self: center;
+  position: relative;
+  touch-action: none;
+  width: 73%;
+}
+
+.color-picker__canvas {
+  cursor: grab;
+  display: block;
+  width: 100%;
+}
+.color-picker__canvas:active {
+  cursor: grabbing;
+}
+
+.color-picker__selected {
+  border: 1px solid #101820;
+  color: #6F747B;
+  padding: 20px;
+}
+
+.color-picker__inputs {
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  list-style-type: none;
+}
+
+.color-picker__item {
+  display: flex;
+  margin: 0;
+}
+
+.color-picker__input-wrap {
+  align-items: center;
+  background-color: var(--fill);
+  display: flex;
+  flex: 0 1 85%;
+  height: 32px;
+  position: relative;
+}
+.color-picker__input-wrap::before {
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0.9) 100%);
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.color-picker__input {
+  --size: 14px;
+  --scale: 1;
+  --active-scale: 1.3;
+  appearance: none;
+  background: rgba(255, 255, 255, 0);
+  flex: 1;
+  height: 2px;
+  margin: 0 16px;
+  outline: none;
+  padding: 0;
+  position: relative;
+}
+.color-picker__input::-webkit-slider-thumb {
+  appearance: none;
+  background: var(--modified-fill);
+  height: var(--size);
+  border-radius: 50%;
+  border: 2px solid white;
+  box-shadow: 0 0 0 2px black;
+  cursor: pointer;
+  transform: scale(var(--scale));
+  transition: transform 0.2s;
+  width: var(--size);
+}
+.color-picker__input::-webkit-slider-thumb:hover {
+  --scale: var(--active-scale);
+}
+.color-picker__input:hover, .color-picker__input:active, .color-picker__input:focus {
+  background: white;
+}
+.color-picker__input:focus::-webkit-slider-thumb {
+  --scale: 1.3;
+}
+.color-picker__input:focus::-moz-range-thumb {
+  --scale: 1.3;
+}
+.color-picker__input::-moz-range-thumb {
+  appearance: none;
+  background: var(--modified-fill);
+  height: var(--size);
+  border-radius: 50%;
+  border: 2px solid white;
+  box-shadow: 0 0 0 2px black;
+  cursor: pointer;
+  transform: scale(var(--scale));
+  transition: transform 0.2s;
+  width: var(--size);
+}
+.color-picker__input::-moz-range-thumb:hover {
+  --scale: var(--active-scale);
+}
+.color-picker__input:active::-moz-range-thumb {
+  --scale: 1.3;
+}
+
+.color-picker__color-label {
+  background-color: var(--modified-fill);
+  flex: 1 1 auto;
+  margin-left: 1px;
+}
+
+.color-picker__button {
+  appearance: none;
+  background-color: var(--black);
+  color: white;
+  padding: 24px 64px;
+  justify-self: center;
+  text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/tetradic-truchet/license.txt b/tetradic-truchet/license.txt
new file mode 100644
index 0000000..a095ca6
--- /dev/null
+++ b/tetradic-truchet/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by We The Collective (https://codepen.io/team/wtc/pen/vYyoNaY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/tetradic-truchet/src/apxlmx.js b/tetradic-truchet/src/apxlmx.js
new file mode 100644
index 0000000..33ed3c7
--- /dev/null
+++ b/tetradic-truchet/src/apxlmx.js
@@ -0,0 +1,726 @@
+/**
+ * A basic Web GL class. This provides a very basic setup for GLSL shader code.
+ * Currently it doesn't support anything except for clip-space 3d, but this was
+ * done so that we could start writing fragments right out of the gate. My
+ * Intention is to update it with particle and polygonal 3d support later on.
+ *
+ * @class WTCGL
+ * @author Liam Egan <liam@wethecollective.com>
+ * @version 0.0.8
+ * @created Jan 16, 2019
+ */
+class WTCGL {  
+
+	/**
+	 * The WTCGL Class constructor. If construction of the webGL context fails 
+   * for any reason this will return null.
+   * 
+   * @TODO make the dimension properties properly optional
+   * @TODO provide the ability to allow for programmable buffers
+	 *
+	 * @constructor
+	 * @param {HTMLElement} el The canvas element to use as the root
+	 * @param {string} vertexShaderSource The vertex shader source
+	 * @param {string} fragmentShaderSource The fragment shader source
+   * @param {number} [width] The width of the webGL context. This will default to the canvas dimensions
+   * @param {number} [height] The height of the webGL context. This will default to the canvas dimensions
+   * @param {number} [pxratio=1] The pixel aspect ratio of the canvas
+   * @param {boolean} [styleElement] A boolean indicating whether to apply a style property to the canvas (resizing the canvas by the inverse of the pixel ratio)
+   * @param {boolean} [webgl2] A boolean indicating whether to try to create a webgl2 context instead of a regulart context
+	 */
+  constructor(el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, styleElement, webgl2, params = {}) {
+    this.run = this.run.bind(this);
+    
+    this._onRun = ()=>{};
+    
+    // Destructure if an object is aprovided instead a series of parameters
+    if(el instanceof Object && el.el) {
+      ({el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, webgl2, styleElement} = el);
+    }
+
+    // If the HTML element isn't a canvas, return null
+    if(!el instanceof HTMLElement || el.nodeName.toLowerCase() !== 'canvas') {
+      console.log('Provided element should be a canvas element');
+      return null;
+    }
+    
+    this._el = el;
+    // The context should be either webgl2, webgl or experimental-webgl
+    if(webgl2 === true) {
+      this.isWebgl2 = true;
+      this._ctx = this._el.getContext("webgl2", this.webgl_params) || this._el.getContext("webgl", this.webgl_params) || this._el.getContext("experimental-webgl", this.webgl_params);
+    } else {
+      this.isWebgl2 = false;
+      this._ctx = this._el.getContext("webgl", Object.assign({}, this.webgl_params, params)) || this._el.getContext("experimental-webgl", Object.assign({}, this.webgl_params, params));
+    }
+    
+    // Set up the extensions
+    this._ctx.getExtension('OES_standard_derivatives');
+    this._ctx.getExtension('EXT_shader_texture_lod');
+    this._ctx.getExtension('OES_texture_float');
+    this._ctx.getExtension('WEBGL_color_buffer_float');
+    this._ctx.getExtension('OES_texture_float_linear');
+    this._ctx.getExtension('EXT_color_buffer_float');
+    
+    // We can't make the context so return an error
+    if (!this._ctx) {
+      console.log('Browser doesn\'t support WebGL ');
+      return null;
+    }
+        
+    // Create the shaders
+    this._vertexShader = WTCGL.createShaderOfType(this._ctx, this._ctx.VERTEX_SHADER, vertexShaderSource);
+    this._fragmentShader = WTCGL.createShaderOfType(this._ctx, this._ctx.FRAGMENT_SHADER, fragmentShaderSource);
+    
+    // Create the program and link the shaders
+    this._program = this._ctx.createProgram();
+    this._ctx.attachShader(this._program, this._vertexShader);
+    this._ctx.attachShader(this._program, this._fragmentShader);
+    this._ctx.linkProgram(this._program);
+    
+    // If we can't set up the params, this means the shaders have failed for some reason
+    if (!this._ctx.getProgramParameter(this._program, this._ctx.LINK_STATUS)) {
+      console.log('Unable to initialize the shader program: ' + this._ctx.getProgramInfoLog(this._program));
+      return null;
+    }
+
+    // Initialise the vertex buffers
+    this.initBuffers([
+      -1.0,  1.0, -1.,
+       1.0,  1.0, -1.,
+      -1.0, -1.0, -1.,
+       1.0, -1.0, -1.,
+    ]);
+    
+    // Initialise the frame buffers
+    this.frameBuffers = [];
+    
+    // The program information object. This is essentially a state machine for the webGL instance
+    this._programInfo = {
+      attribs: {
+        vertexPosition: this._ctx.getAttribLocation(this._program, 'a_position'),
+      },
+      uniforms: {
+        projectionMatrix: this._ctx.getUniformLocation(this._program, 'u_projectionMatrix'),
+        modelViewMatrix: this._ctx.getUniformLocation(this._program, 'u_modelViewMatrix'),
+        resolution: this._ctx.getUniformLocation(this._program, 'u_resolution'),
+        time: this._ctx.getUniformLocation(this._program, 'u_time'),
+      },
+    };
+    
+    // Tell WebGL to use our program when drawing
+    this._ctx.useProgram(this._program);
+    
+    this.pxratio = pxratio;
+
+    this.styleElement = styleElement !== true;
+    
+    this.resize(width, height);
+  }
+
+
+  /**
+   * Public methods
+   */
+  
+  addFrameBuffer(w, h, tiling = 0, buffertype = 0) {
+    // create to render to
+    const gl = this._ctx;
+    const targetTextureWidth = w * this.pxratio;
+    const targetTextureHeight = h * this.pxratio;
+    const targetTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, targetTexture);
+    {
+      // define size and format of level 0
+      const level = 0;
+      let internalFormat = gl.RGBA;
+      const border = 0;
+      let format = gl.RGBA;
+      let t;
+      if(buffertype & WTCGL.TEXTYPE_FLOAT) {
+        const e = gl.getExtension('OES_texture_float');
+        window.extension = e;
+        t = e.FLOAT;
+        // internalFormat = gl.RGBA32F;
+      } else if(buffertype & WTCGL.TEXTYPE_HALF_FLOAT_OES) {
+        // t = gl.renderer.isWebgl2 ? e.HALF_FLOAT : e.HALF_FLOAT_OES;
+        //     gl.renderer.extensions['OES_texture_half_float'] ? gl.renderer.extensions['OES_texture_half_float'].HALF_FLOAT_OES : 
+        //     gl.UNSIGNED_BYTE;
+        const e = gl.getExtension('OES_texture_half_float');
+        t = this.isWebgl2 ? gl.HALF_FLOAT : e.HALF_FLOAT_OES;
+        // format = gl.RGBA;
+        if(this.isWebgl2) {
+          internalFormat = gl.RGBA16F;
+        }
+        // internalFormat = gl.RGB32F;
+        // format = gl.RGB32F;
+        // window.gl = gl
+        // t = e.HALF_FLOAT_OES;
+      } else {
+        t = gl.UNSIGNED_BYTE;
+      }
+      const type = t;
+      const data = null;
+      gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                    targetTextureWidth, targetTextureHeight, border,
+                    format, type, data);
+      // gl.generateMipmap(gl.TEXTURE_2D);
+
+      // set the filtering so we don't need mips
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      
+      // Set the parameters based on the passed type
+      if(tiling === WTCGL.IMAGETYPE_TILE) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+      } else if(tiling === WTCGL.IMAGETYPE_MIRROR) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
+      } else if(tiling === WTCGL.IMAGETYPE_REGULAR) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      }
+    }
+    
+    // Create and bind the framebuffer
+    const fb = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+
+    // attach the texture as the first color attachment
+    const attachmentPoint = gl.COLOR_ATTACHMENT0;
+    const level = 0;
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);
+
+    return {
+      w: w * this.pxratio,
+      h: h * this.pxratio,
+      fb: fb,
+      frameTexture: targetTexture
+    };
+  }
+  
+
+	/**
+	 * Resizes the canvas to a specified width and height, respecting the pixel ratio
+	 *
+	 * @param  {number} w The width of the canvas
+	 * @param  {number} h The height of the canvas
+	 * @return {Void}
+	 */
+  resize(w, h) {
+    this.width = w;
+    this.height = h;
+    this._el.width = w * this.pxratio;
+    this._el.height = h * this.pxratio;
+    this._size = [w * this.pxratio, h * this.pxratio];
+    if(this.styleElement) {
+      this._el.style.width = w + 'px';
+      this._el.style.height = h + 'px';
+    }
+    
+    this._ctx.viewportWidth = w * this.pxratio;
+    this._ctx.viewportHeight = h * this.pxratio;
+    
+    this._ctx.uniform2fv( this._programInfo.uniforms.resolution, this._size);
+    
+    this.initBuffers(this._positions);
+  }
+  
+	/**
+	 * Initialise a provided vertex buffer
+	 *
+	 * @param  {array} positions The vertex positions to initialise
+	 * @return {Void}
+	 */
+  initBuffers(positions) {
+    this._positions = positions;
+    this._positionBuffer = this._ctx.createBuffer();
+    
+    this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
+    
+    this._ctx.bufferData(this._ctx.ARRAY_BUFFER,
+                  new Float32Array(positions),
+                  this._ctx.STATIC_DRAW);
+  }
+  
+	/**
+	 * Add a uniform to the program. At this time the following types are supported:
+   * - Float - WTCGL.TYPE_FLOAT
+   * - Vector 2 - WTCGL.TYPE_V2
+   * - Vector 3 - WTCGL.TYPE_V3
+   * - Vector 4 - WTCGL.TYPE_V4
+	 *
+	 * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
+	 * @param  {WTCGL.UNIFORM_TYPE} type The unfiform type 
+	 * @param  {number|array} value The unfiform value. The type depends on the uniform type being created 
+	 * @return {WebGLUniformLocation} The uniform location for later reference
+	 */
+  addUniform(name, type, value) {
+    let uniform = this._programInfo.uniforms[name];
+    uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+    switch(type) {
+      case WTCGL.TYPE_INT : 
+        if(!isNaN(value)) this._ctx.uniform1i( uniform, value);
+        break;
+      case WTCGL.TYPE_FLOAT : 
+        if(!isNaN(value)) this._ctx.uniform1f( uniform, value);
+        break;
+      case WTCGL.TYPE_V2 : 
+        if(value instanceof Array && value.length === 2.) this._ctx.uniform2fv( uniform, value);
+        break;
+      case WTCGL.TYPE_V3 : 
+        if(value instanceof Array && value.length === 3.) this._ctx.uniform3fv( uniform, value);
+        break;
+      case WTCGL.TYPE_V4 : 
+        if(value instanceof Array && value.length === 4.) this._ctx.uniform4fv( uniform, value);
+        break;
+      case WTCGL.TYPE_BOOL : 
+        if(!isNaN(value)) this._ctx.uniform1i( uniform, value);
+        break;
+    }
+    this._programInfo.uniforms[name] = uniform;
+    return uniform;
+  }
+
+  /**
+   * Adds a texture to the program and links it to a named uniform. Providing the type changes the tiling properties of the texture. Possible values for type:
+   * - WTCGL.IMAGETYPE_REGULAR - No tiling, clamp to edges and doesn't need to be power of 2.
+   * - WTCGL.IMAGETYPE_TILE - full x and y tiling, needs to be power of 2.
+   * - WTCGL.IMAGETYPE_MIRROR - mirror tiling, needs to be power of 2.
+   *
+   * @public
+	 * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
+   * @param  {WTCGL.TYPE_IMAGETYPE} type The type of texture to create. This is basically the tiling behaviour of the texture as described above
+	 * @param  {Image} image The image object to add to the texture
+   * @return {WebGLTexture} The texture object
+   */
+  addTexture(name, type, image, liveUpdate = false) {
+    
+    var texture = this._ctx.createTexture();
+    this._ctx.pixelStorei(this._ctx.UNPACK_FLIP_Y_WEBGL, true);
+    this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
+    
+    // this._ctx.generateMipmap(this._ctx.TEXTURE_2D);
+ 
+    // Set the parameters based on the passed type
+    if(type === WTCGL.IMAGETYPE_MIRROR) {
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.MIRRORED_REPEAT);
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.MIRRORED_REPEAT);
+    } else if(type === WTCGL.IMAGETYPE_REGULAR) {
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.CLAMP_TO_EDGE);
+      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.CLAMP_TO_EDGE);
+    }
+    
+    this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MIN_FILTER, this._ctx.LINEAR);
+    // this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MAG_FILTER, this._ctx.LINEAR);
+ 
+    // Upload the image into the texture.
+    this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
+ 
+    // add the texture to the array of textures.
+    this.pushTexture(name, texture, image, this._ctx.TEXTURE_2D, liveUpdate);
+    
+    
+    return texture;
+  }
+  
+  pushTexture(name, texture, image, target, liveUpdate = false) {
+    let textures = this.textures;
+    
+    textures.push({ name: name, tex: texture, liveUpdate: liveUpdate, image: image, target: target });
+    
+    // Finally set the this.textures (this is just to get around the funnyness of default getters)
+    this.textures = textures;
+  }
+
+	/**
+	 * Updates a texture location for a given WebGLTexture with an image
+	 *
+	 * @param  {WebGLTexture} texture The texture location to update
+	 * @param  {Image} image The image object to add to the texture
+	 * @return {Void}
+	 */
+  updateTexture(texture, image, name) {
+    
+    let uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+    // Set the texture unit to the uniform
+    this._ctx.uniform1i(uniform, 0);
+    this._ctx.activeTexture(this._ctx.TEXTURE0);
+    
+    this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
+    // Upload the image into the texture.
+    this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
+  }
+
+	/**
+	 * Initialise texture locations in the program
+	 *
+	 * @return {Void}
+	 */
+  initTextures() {
+    for(let i = 0; i < this.textures.length; i++) {
+      let name = this.textures[i].name;
+      let uniform = this._programInfo.uniforms[name];
+      uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
+
+      // Set the texture unit to the uniform
+      this._ctx.uniform1i(uniform, i);
+
+      // find the active texture based on the index
+      this._ctx.activeTexture(this._ctx[`TEXTURE${i}`]);
+
+      // Finally, bind the texture
+      this._ctx.bindTexture(this.textures[i].target, this.textures[i].tex);
+    }
+  }
+  
+	/**
+	 * The run loop. This function is run as a part of a RaF and updates the internal
+   * time uniform (`u_time`).
+	 *
+   * @param  {number} delta The delta time provided by the RaF loop
+	 * @return {Void}
+	 */
+  run(delta) {
+    this.running && requestAnimationFrame(this.run);
+    
+    const runFunction = () => {
+      this.time = this.startTime + delta * .0002;
+      this.onRun(delta);
+      this.render();
+    }
+    
+    if(this.frameRate) {
+      let now = Date.now();
+      let elapsed = now - this._then;
+
+      if (elapsed > this.frameRate) {
+        this._then = now - (elapsed % this.frameRate);
+
+        runFunction();
+      }
+    } else {
+      runFunction();
+    }
+  }
+  
+	/**
+	 * Render the program
+	 *
+	 * @return {Void}
+	 */
+  render(buffer = {}) {
+    this._ctx.bindFramebuffer(this._ctx.FRAMEBUFFER, buffer.fb || null);
+    // Update the time uniform
+    this._ctx.uniform1f( this._programInfo.uniforms.time, this.time);
+    
+    this.textures.forEach((textureInfo) => {
+      if(textureInfo.liveUpdate === true) {
+        this.updateTexture(textureInfo.tex, textureInfo.image, textureInfo.name);
+      }
+    });
+
+    this._ctx.viewport(0, 0, buffer.w || this._ctx.viewportWidth, buffer.h || this._ctx.viewportHeight);
+    if(this.clearing) {
+      this._ctx.clearColor(1.0, 0.0, 0.0, 0.0);
+      // this._ctx.clearDepth(1.0);
+      // this._ctx.enable(this._ctx.DEPTH_TEST);
+      // this._ctx.depthFunc(this._ctx.LEQUAL);
+      
+      this._ctx.blendFunc(this._ctx.SRC_ALPHA, this._ctx.ONE_MINUS_SRC_ALPHA);
+
+      this._ctx.clear( this._ctx.COLOR_BUFFER_BIT );
+    }
+
+    this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
+    this._ctx.vertexAttribPointer(
+        this._programInfo.attribs.vertexPosition,
+        3,
+        this._ctx.FLOAT,
+        false,
+        0,
+        0);
+    this._ctx.enableVertexAttribArray(this._programInfo.attribs.vertexPosition);
+
+    // Set the shader uniforms
+    this.includePerspectiveMatrix && this._ctx.uniformMatrix4fv( this._programInfo.uniforms.projectionMatrix, false, this.perspectiveMatrix);
+    this.includeModelViewMatrix && this._ctx.uniformMatrix4fv( this._programInfo.uniforms.modelViewMatrix, false, this.modelViewMatrix);
+
+    this._ctx.drawArrays(this._ctx.TRIANGLE_STRIP, 0, 4);
+  }
+
+
+  /**
+   * Getters and setters
+   */
+
+  /**
+   * The default webGL parameters to be used for the program.
+   * This is read only and should only be overridden as a part of a subclass.
+   *
+   * @readonly
+   * @type {object}
+   * @default { alpha: true }
+   */
+  get webgl_params() {
+    return { alpha: true };
+  }
+  
+  /**
+   * (getter/setter) Whether the element should include styling as a part of
+   * its rendition.
+   *
+   * @type {boolean}
+   * @default true
+   */
+  set styleElement(value) {
+    this._styleElement = value === true;
+    if(this._styleElement === false && this._el) {
+      this._el.style.width = '';
+      this._el.style.height = '';
+    }
+  }
+  get styleElement() {
+    return this._styleElement !== false;
+  }
+
+  /**
+   * (getter/setter) startTime. This is a value to begin the `u_time` 
+   * unform at. This is here in case you want `u_time` to begin at a 
+   * specific value other than 0.
+   *
+   * @type {number}
+   * @default 0
+   */
+  set startTime(value) {
+    if(!isNaN(value)) {
+      this._startTime = value;
+    }
+  }
+  get startTime() {
+    return this._startTime || 0;
+  }
+  
+  /**
+   * (getter/setter) time. This is the time that the program currently
+   * sits at. By default this value is set as a part of the run loop
+   * however this is a public property so that we can specify time
+   * for rendition outside of the run loop.
+   *
+   * @type {number}
+   * @default 0
+   */
+  set time(value) {
+    if(!isNaN(value)) {
+      this._time = value;
+    }
+  }
+  get time() {
+    return this._time || 0;
+  }
+  
+  /**
+   * (getter/setter) includePerspectiveMatrix. This determines whether the 
+   * perspecive matrix is included in the program. This doesn't really make
+   * a difference right now, but this is here to provide future interoperability.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set includePerspectiveMatrix(value) {
+    this._includePerspectiveMatrix = value === true;
+  }
+  get includePerspectiveMatrix() {
+    return this._includePerspectiveMatrix === true;
+  }
+  
+  /**
+   * (getter/setter) includeModelViewMatrix. This determines whether the 
+   * model view matrix is included in the program. This doesn't really make
+   * a difference right now, but this is here to provide future interoperability.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set includeModelViewMatrix(value) {
+    this._includeModelViewMatrix = value === true;
+  }
+  get includeModelViewMatrix() {
+    return this._includeModelViewMatrix === true;
+  }
+
+  /**
+   * (getter/setter) textures. The array of textures to initialise into the program.
+   *
+   * @private
+   * @type {array}
+   * @default []
+   */
+  set textures(value) {
+    if(value instanceof Array) {
+      this._textures = value;
+    }
+  }
+  get textures() {
+    return this._textures || [];
+  }
+  
+  /**
+   * (getter/setter) clearing. Specifies whether the program should clear the screen 
+   * before drawing anew.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set clearing(value) {
+    this._clearing = value === true;
+  }
+  get clearing() {
+    return this._clearing === true;
+  }
+  
+  /**
+   * (getter/setter) running. Specifies whether the programming is running. Setting 
+   * this to true will create a RaF loop which will call the run function.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  set running(value) {
+    if(!this.running && value === true) {
+      
+      this._then = Date.now();
+      
+      requestAnimationFrame(this.run);
+    } 
+    this._running = value === true;
+  }
+  get running() {
+    return this._running === true;
+  }
+  
+  set frameRate(value) {
+    if(!isNaN(value)) this._frameRate = 1000 / value;
+  }
+  get frameRate() {
+    return this._frameRate || null;
+  }
+  
+  /**
+   * (getter/setter) pxratio. The 1-dimensional pixel ratio of the application.
+   * This should be used either for making a program look good on high density
+   * screens or for raming down pixel density for performance.
+   *
+   * @type {number}
+   * @default 1
+   */
+  set pxratio(value) {
+    if(value > 0) this._pxratio = value;
+  }
+  get pxratio() {
+    return this._pxratio || 1;
+  }
+  
+  /**
+   * (getter/setter) perspectiveMatrix. Calculate a perspective matrix, a 
+   * special matrix that is used to simulate the distortion of perspective in 
+   * a camera. Our field of view is 45 degrees, with a width/height ratio 
+   * that matches the display size of the canvas and we only want to see 
+   * objects between 0.1 units and 100 units away from the camera.
+   *
+   * @readonly
+   * @type {mat4}
+   */
+  get perspectiveMatrix() {
+    const fieldOfView = 45 * Math.PI / 180;   // in radians
+    const aspect = this._size.w / this._size.h;
+    const zNear = 0.1;
+    const zFar = 100.0;
+    const projectionMatrix = mat4.create();
+    // note: glmatrix.js always has the first argument
+    // as the destination to receive the result.
+    mat4.perspective(projectionMatrix,
+                     fieldOfView,
+                     aspect,
+                     zNear,
+                     zFar);
+    
+    return projectionMatrix;
+  }
+  
+  /**
+   * (getter/setter) perspectiveMatrix. Calculate a model view matrix.
+   *
+   * @readonly
+   * @type {mat4}
+   */
+  get modelViewMatrix() {
+    // Set the drawing position to the "identity" point, which is
+    // the center of the scene.
+    const modelViewMatrix = mat4.create();
+    
+    // Now move the drawing position a bit to where we want to
+    // start drawing the square.
+    mat4.translate(modelViewMatrix,     // destination matrix
+                   modelViewMatrix,     // matrix to translate
+                   [-0.0, 0.0, -1.]);  // amount to translate
+    
+    return modelViewMatrix;
+  }
+  
+  set onRun(runMethod) {
+    if(typeof runMethod == 'function') {
+      this._onRun = runMethod.bind(this);
+    }
+  }
+  get onRun() {
+    return this._onRun;
+  }
+  
+  get context() {
+    return this._ctx || null;
+  }
+  
+  /**
+   * Static Methods
+   */
+
+	/**
+	 * Create a shader of a given type given a context, type and source.
+	 *
+   * @static
+	 * @param  {WebGLContext} ctx The context under which to create the shader
+	 * @param  {WebGLShaderType} type The shader type, vertex or fragment
+	 * @param  {string} source The shader source.
+	 * @return {WebGLShader} The created shader
+	 */
+  static createShaderOfType(ctx, type, source) {
+    const shader = ctx.createShader(type);
+    ctx.shaderSource(shader, source);
+    ctx.compileShader(shader);
+    
+    if (!ctx.getShaderParameter(shader, ctx.COMPILE_STATUS)) {
+      console.log('An error occurred compiling the shaders: ' + ctx.getShaderInfoLog(shader));
+      ctx.deleteShader(shader);
+      return null;
+    }
+    
+    return shader;
+  }
+}
+
+WTCGL.TYPE_INT = 0;
+WTCGL.TYPE_FLOAT = 1;
+WTCGL.TYPE_V2 = 2;
+WTCGL.TYPE_V3 = 3;
+WTCGL.TYPE_V4 = 4;
+WTCGL.TYPE_BOOL = 5;
+
+WTCGL.IMAGETYPE_REGULAR = 0;
+WTCGL.IMAGETYPE_TILE = 1;
+WTCGL.IMAGETYPE_MIRROR = 2;
+
+WTCGL.TEXTYPE_FLOAT = 0;
+WTCGL.TEXTYPE_UNSIGNED_BYTE = 1;
+WTCGL.TEXTYPE_HALF_FLOAT_OES = 2;
\ No newline at end of file
diff --git a/tetradic-truchet/src/index.pug b/tetradic-truchet/src/index.pug
new file mode 100644
index 0000000..130eb7c
--- /dev/null
+++ b/tetradic-truchet/src/index.pug
@@ -0,0 +1,33 @@
+- const numColors = 4
+
+.toggle(aria-expanded="true")
+
+  button.toggle__button
+    span.toggle__text Tetradic Color Picker
+    svg.toggle__icon(width="48" height="48" viewBox="0 0 48 48")
+      g(fill="none" fill-rule="evenodd")
+        circle(cx="24" cy="24" r="24" fill="#E7E8E8")
+        g(stroke="#101820" stroke-width="3" transform="translate(14 14)")
+          rect(width="17" height="17" x="1.5" y="1.5")
+          rect(width="17" height="5" x="1.5" y="1.5")
+
+  .toggle__content
+    .color-picker
+      .color-picker__canvas-wrap
+        canvas.color-picker__canvas
+      ul.color-picker__inputs
+        - i = 0
+        while i < numColors
+          li.color-picker__item
+            .color-picker__input-wrap
+              input.color-picker__input(
+                type="range"
+                min=0
+                max=100
+                step=1
+              )
+            span.color-picker__color-label
+          - i++
+      button.color-picker__button Download!
+  
+canvas#webgl
\ No newline at end of file
diff --git a/tetradic-truchet/src/script.babel b/tetradic-truchet/src/script.babel
new file mode 100644
index 0000000..eefe70a
--- /dev/null
+++ b/tetradic-truchet/src/script.babel
@@ -0,0 +1,532 @@
+console.clear();
+
+const colorPicker = document.querySelector(".color-picker"),
+      canvParent = colorPicker.querySelector(".color-picker__canvas-wrap"),
+      canv = colorPicker.querySelector(".color-picker__canvas"),
+      ctx = canv.getContext("2d"),
+      c_wheel = document.createElement('canvas'),
+      ctx_wheel = c_wheel.getContext("2d"),
+      dpr = Math.round(Math.min(window.devicePixelRatio, 2)),
+      picker_input_parent = colorPicker.querySelector('.color-picker__inputs'),
+      sliders = colorPicker.querySelectorAll("input[type='range']"),
+      colour_inputs = colorPicker.querySelectorAll(".color-picker__item"),
+      toggle = document.querySelector(".toggle"),
+      toggleButton = toggle.querySelector(".toggle__button"),
+      toggleContent = toggle.querySelector(".toggle__content"),
+      numHandles = sliders.length;
+
+let canvW,
+    canvH,
+    wheelX,
+    wheelY,
+    wheelRadius,
+    handleRadius, // just a starting point,
+    handles = new Array(numHandles).fill(),
+    activeHueIndex = 0,
+    resizeTimer,
+    pointerDown = false,
+    wheel_drawn = false;
+
+const degreesToRadians = (degrees) => Math.PI / 180 * degrees;
+const radiansToDegrees = (radians) => 180 / Math.PI * radians;
+
+// Thanks to Jon Kantner for this function:
+// https://css-tricks.com/converting-color-spaces-in-javascript
+const HSLToRGB = (h,s,l) => {
+  // Must be fractions of 1
+  s /= 100;
+  l /= 100;
+
+  let c = (1 - Math.abs(2 * l - 1)) * s,
+      x = c * (1 - Math.abs((h / 60) % 2 - 1)),
+      m = l - c/2,
+      r = 0,
+      g = 0,
+      b = 0;
+  
+  if (0 <= h && h < 60) {
+    r = c; g = x; b = 0;  
+  } else if (60 <= h && h < 120) {
+    r = x; g = c; b = 0;
+  } else if (120 <= h && h < 180) {
+    r = 0; g = c; b = x;
+  } else if (180 <= h && h < 240) {
+    r = 0; g = x; b = c;
+  } else if (240 <= h && h < 300) {
+    r = x; g = 0; b = c;
+  } else if (300 <= h && h < 360) {
+    r = c; g = 0; b = x;
+  }
+  r = Math.min(Math.abs(Math.round((r + m) * 255)), 255);
+  g = Math.min(Math.abs(Math.round((g + m) * 255)), 255);
+  b = Math.min(Math.abs(Math.round((b + m) * 255)), 255);
+
+  return {r, g, b};
+}
+
+const RGBToHex = (colour) => {
+  const hr = ('00' + Math.floor(colour.r).toString(16)).substr(-2);
+  const hg = ('00' + Math.floor(colour.g).toString(16)).substr(-2);
+  const hb = ('00' + Math.floor(colour.b).toString(16)).substr(-2);
+  return hr + hg + hb;
+}
+
+const setLayout = () => {
+  let size = canvParent.offsetWidth * dpr;
+  wheel_drawn = false;
+  
+  canvW = size;
+  canvH = size;
+  canv.width = c_wheel.width = size;
+  canv.height = c_wheel.height = size;
+  wheelRadius = size * .5;
+  cx = size * .5;
+  cy = size * .5;
+  handleRadius = wheelRadius * .5;
+}
+
+const getColourAtPosition = (x, y, l = 50) => {
+  const xCartesian = x + wheelRadius,
+        yCartesian = y + wheelRadius;
+  const diameter = wheelRadius * 2;
+  const pixelIndex = (xCartesian + yCartesian * diameter) * 4;
+  const coordRadius = Math.sqrt(x**2 + y**2);
+  const coordAngle = Math.atan2(y, x) - 0.0001;
+  
+  const colour = HSLToRGB(
+              radiansToDegrees(coordAngle + Math.PI),
+              coordRadius / wheelRadius * 100,
+              l
+  );
+  
+  colour.coordRadius = coordRadius;
+  colour.pixelIndex = pixelIndex;
+  
+  return colour;
+}
+
+
+const drawWheel = () => {
+  if(wheel_drawn === true) {
+    ctx.drawImage(c_wheel, 0, 0);
+    return;
+  }
+  wheel_drawn = true;
+  const diameter = wheelRadius * 2,
+        imageData = ctx_wheel.createImageData(diameter, diameter),
+        pixels = imageData.data;
+  
+  // ctx_wheel.clearRect(0, 0, canvW, canvH);
+  
+  for (let y = -wheelRadius; y <= wheelRadius; y++) {
+    for (let x = -wheelRadius; x <= wheelRadius; x++) {
+      
+      const {r, g, b, coordRadius, pixelIndex} = getColourAtPosition(x, y);
+      
+      if (coordRadius < wheelRadius) {
+        pixels[pixelIndex] = r;
+        pixels[pixelIndex + 1] = g;
+        pixels[pixelIndex + 2] = b;
+        pixels[pixelIndex + 3] = 255;
+      }
+    }
+  }
+  
+  ctx_wheel.putImageData(imageData, 0, 0);
+  ctx.drawImage(c_wheel, 0, 0);
+}
+
+const updateHandles = (a = 0, l = handleRadius) => {
+  const angleIncr = Math.PI * 2 / numHandles;
+  for (let i = 1; i <= numHandles; i++) {
+    const x = cx + l * Math.cos(angleIncr * i + Math.PI + a),
+          y = cy - l * Math.sin(angleIncr * i + Math.PI + a);
+    handles[i-1] = {
+      x: x,
+      y: y
+    }
+  }
+  updateColours();
+}
+
+const updateColours = () => {
+  handles.forEach((handle, i) => {
+    const {x, y} = handle;
+    const slider = sliders[i];
+    handle.color = getColourAtPosition(x - wheelRadius, y - wheelRadius, slider.value);
+    handle.unModifiedColor = getColourAtPosition(x - wheelRadius, y - wheelRadius)
+  });
+}
+
+const drawHandles = () => {
+  handles.forEach(point => {
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, 7 * dpr, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.strokeStyle = "white";
+    ctx.lineWidth = 2 * dpr;
+    ctx.stroke();
+    
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, 9 * dpr, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.strokeStyle = "black";
+    ctx.lineWidth = 2 * dpr;
+    ctx.stroke();
+  });
+}
+
+const drawColours = () => {
+  setTimeout(() => {
+    colour_inputs.forEach((input, i) => {
+      const rangeBG = input.querySelector(".color-picker__input-wrap");
+      input.style.setProperty("--fill", `#${RGBToHex(handles[i].unModifiedColor)}`);
+      input.style.setProperty("--modified-fill", `#${RGBToHex(handles[i].color)}`);
+    });
+  }, 0);
+}
+
+const setupUniforms = () => {
+  twodWebGL.addUniform('col1', WTCGL.TYPE_V3, hexToVec3(RGBToHex(handles[0].color)));
+  twodWebGL.addUniform('col2', WTCGL.TYPE_V3, hexToVec3(RGBToHex(handles[1].color)));
+  twodWebGL.addUniform('col3', WTCGL.TYPE_V3, hexToVec3(RGBToHex(handles[2].color)));
+  twodWebGL.addUniform('col4', WTCGL.TYPE_V3, hexToVec3(RGBToHex(handles[3].color)));
+  twodWebGL.addUniform('seed', WTCGL.TYPE_FLOAT, 133.791);
+}
+
+const onResize = () => {
+  if (resizeTimer) clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(() => {
+    setLayout();
+    // updateHandles(); // This was causing the colour scheme to reset. Removing.
+    drawWheel();
+    drawHandles();
+    drawColours();
+    setupUniforms();
+  }, 100);
+}
+
+const respondToPointer = (e) => {
+  const b = canv.getBoundingClientRect()
+  const m = [(e.clientX - (e.override ? 0 : b.x))*dpr - wheelRadius, (e.clientY - (e.override ? 0 : b.y))*dpr - wheelRadius];
+  const p = [Math.atan2(m[0], m[1]), Math.sqrt( m[0]*m[0] + m[1]*m[1] )];
+  updateHandles(p[0], p[1]);
+  ctx.clearRect(0, 0, canvW, canvH);
+  drawWheel();
+  drawHandles();
+  drawColours();
+  setupUniforms();
+}
+
+
+const init = () => {
+  setLayout();
+  updateHandles();
+  drawWheel();
+  drawHandles();
+  drawColours();
+  setupUniforms();
+  
+  setTimeout(() => {
+    respondToPointer({clientX: 270/dpr, clientY: 130/dpr, override: true});
+  }, 1);
+  
+  canv.addEventListener('pointerdown', (e) => {
+    pointerDown = true;
+    respondToPointer(e);
+  });
+
+  canv.addEventListener('pointerup', (e) => {
+    pointerDown = false;
+  });
+
+  canv.addEventListener('pointerleave', (e) => {
+    pointerDown = false;
+  });
+
+  canv.addEventListener('pointermove', (e) => {
+    if (pointerDown) respondToPointer(e);
+  });
+  
+  picker_input_parent.addEventListener('input', (e) => {
+    updateColours();
+    drawWheel();
+    drawHandles();
+    drawColours();
+    setupUniforms();
+  });
+
+  toggleButton.addEventListener("click", () => {
+    const isExpanded = toggle.getAttribute("aria-expanded") === "true";
+    toggle.setAttribute("aria-expanded", isExpanded ? "false" : "true");
+  });
+  
+  window.addEventListener("resize", onResize);
+}
+
+const shader_vert = `
+
+  attribute vec4 a_position;
+  
+  uniform mat4 u_modelViewMatrix;
+  uniform mat4 u_projectionMatrix;
+  
+  void main() {
+    gl_Position = a_position;
+  }
+  `;
+
+const shader_frag = `
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform vec2 u_mouse;
+  uniform float u_time;
+  uniform sampler2D u_noise;
+  
+  uniform float u_seed;
+  
+  uniform vec3 u_col1;
+  uniform vec3 u_col2;
+  uniform vec3 u_col3;
+  uniform vec3 u_col4;
+  
+  #define PI 3.14159265359
+  
+  vec2 getScreenSpace() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
+    
+    return uv;
+  }
+  
+  float hash2(vec2 p) {
+    vec3 p3  = fract(vec3(p.xyx) * .1031);
+    p3 += dot(p3, p3.yzx + 33.33);
+    return fract((p3.x + p3.y) * p3.z);
+  }
+  
+  vec4 truchet(inout vec2 uv, float w) {
+    
+    vec2 _uv = uv;
+    
+    vec2 grid = fract(uv)-.5;
+    vec2 id = floor(uv);
+    float r = hash2(id)+.012;
+    float r1 = hash2(id+vec2(50., -50.*r));
+    grid.x *= sign(r-.5);
+    
+    if(r1 >= .0) {
+      vec2 p = grid - .5 * sign(grid.x + grid.y + .0001);
+
+      float f = length(p);
+
+      float a = atan(p.y, p.x);
+      
+      float checker = sign(mod(id.x+id.y, 2.) - .5);
+      if(checker == 0.) checker = 1.;
+      
+      uv = p;
+
+      return vec4(
+        vec2(
+          fract(checker * a / (PI / 4.) - u_time * 10. * hash2(vec2(u_seed, u_seed+10.))), 
+          abs((f - (.5-w)) / (2. * w) - .5) * 2.
+        ),
+        floor(checker * a / (PI / 4.) - u_time * 5.),
+        f
+      );
+    }
+  }
+  
+  vec3 tile(vec2 uv) {
+    vec2 _uv = uv;
+    vec2 id = floor(uv);
+    float r = hash2(id);
+    
+    vec3 col1 = u_col1;
+    vec3 col2 = u_col2;
+    vec3 col3 = u_col3;
+    vec3 col4 = u_col4;
+    
+    if(r < .25) {
+      col1 = u_col2;
+      col2 = u_col1;
+      col3 = u_col4;
+      col4 = u_col3;
+    } else if(r < .5) {
+      col1 = u_col3;
+      col2 = u_col4;
+      col3 = u_col1;
+      col4 = u_col2;
+    } else if(r < .75) {
+      col1 = u_col4;
+      col2 = u_col3;
+      col3 = u_col2;
+      col4 = u_col1;
+    }
+    
+    vec3 colour = col1;
+    
+    float w = .05 + max(hash2(vec2(u_seed, u_seed+1.)) * .2, .05);
+    vec4 t = truchet(uv, w);
+    vec2 luv = t.xy;
+    float luvid = t.z;
+    float field = t.a;
+    
+    colour = mix(
+      colour + (texture2D(u_noise, _uv).rgb - .5) * .05,
+      mix(col2, col3, step(0., uv.x + uv.y)) + (texture2D(u_noise, luv*.3).rgb - .5) * .05,
+      smoothstep(w, w-.01, abs(field-.5))
+    );
+    luv.x *= 1.25;
+    luv.x -= .5;
+    luv.y *= .75;
+    colour = mix(
+      colour,
+      mix(col3, col4, step(0., uv.x + uv.y)) + (texture2D(u_noise, (luv+.5)*.4).rgb - .5) * .05,
+      smoothstep(w, w-.01, abs(field-.5))*smoothstep(.21, .2, length(((luv*.5))))
+    );
+    // colour = mix(
+    //   colour,
+    //   vec3(1) - smoothstep(.0, .2, length(((luv*.5)))) * .1,
+    //   smoothstep(w, w-.01, abs(field-.5))*smoothstep(.21, .2, length(((luv*.5))))
+    // );
+    
+    return colour;
+  }
+
+  void main() {
+    vec2 uv = getScreenSpace();
+    
+    vec3 colour = u_col1;
+    
+    uv *= 3. + 10. * hash2(vec2(u_seed, u_seed));
+    uv += vec2(u_time*2., sin(u_time*.5)*2.);
+    
+    colour = tile(uv);
+
+    gl_FragColor = vec4(colour,1.0);
+  }
+`;
+
+
+const twodWebGL = new WTCGL(
+  document.querySelector('canvas#webgl'), 
+  shader_vert, 
+  shader_frag,
+  window.innerWidth,
+  window.innerHeight,
+  Math.min(window.devicePixelRatio, 2),
+  null,
+  false,
+  { preserveDrawingBuffer: true }
+);
+twodWebGL.startTime = -100 + Math.random() * 50;
+
+window.addEventListener('resize', () => {
+  twodWebGL.resize(window.innerWidth, window.innerHeight);
+});
+
+const download = () => {
+  const initRatio = twodWebGL.pxratio;
+  twodWebGL.pxratio = 1;
+  twodWebGL.resize(screen.width, screen.height);
+  twodWebGL.render();
+  
+  var link = document.createElement('a');
+  link.download = 'codepen-wtc-tetradic.png';
+  link.href = twodWebGL.context.canvas.toDataURL();
+  link.click();
+  
+  twodWebGL.pxratio = initRatio;
+  twodWebGL.resize(window.innerWidth, window.innerHeight);
+}
+document.querySelector('button.color-picker__button').addEventListener('click', download);
+
+const hexToVec3 = (hex) => {
+  const components = /^#?([A-F0-9]{2})([A-F0-9]{2})([A-F0-9]{2})/i.exec(hex);
+  const rtn = [];
+  if(components && components.length === 4) {
+    rtn.push(Math.round(`0x${components[1]}` / 255 * 1000) / 1000);
+    rtn.push(Math.round(`0x${components[2]}` / 255 * 1000) / 1000);
+    rtn.push(Math.round(`0x${components[3]}` / 255 * 1000) / 1000);
+  }
+  return rtn;
+}
+
+// track mouse move
+let mousepos = [0,0];
+const u_mousepos = twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
+window.addEventListener('pointermove', (e) => {
+  let ratio = window.innerHeight / window.innerWidth;
+  if(window.innerHeight > window.innerWidth) {
+    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth;
+    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1 * ratio;
+  } else {
+    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
+    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
+  }
+  twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
+});
+
+// Load all our textures. We only initiate the instance once all images are loaded.
+const textures = [
+  {
+    name: 'noise',
+    url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',
+    type: WTCGL.IMAGETYPE_TILE,
+    img: null
+  }
+];
+const loadImage = function (imageObject) {
+  let img = document.createElement('img');
+  img.crossOrigin="anonymous";
+  
+  return new Promise((resolve, reject) => {
+    img.addEventListener('load', (e) => {
+      imageObject.img = img;
+      resolve(imageObject);
+    });
+    img.addEventListener('error', (e) => {
+      reject(e);
+    });
+    img.src = imageObject.url
+  });
+}
+const loadTextures = function(textures) {
+  return new Promise((resolve, reject) => {
+    const loadTexture = (pointer) => {
+      if(pointer >= textures.length || pointer > 10) {
+        resolve(textures);
+        return;
+      };
+      const imageObject = textures[pointer];
+
+      const p = loadImage(imageObject);
+      p.then(
+        (result) => {
+          twodWebGL.addTexture(result.name, result.type, result.img);
+        },
+        (error) => {
+          console.log('error', error)
+        }).finally((e) => {
+          loadTexture(pointer+1);
+      });
+    }
+    loadTexture(0);
+  });
+  
+}
+
+loadTextures(textures).then(
+  (result) => {
+    twodWebGL.initTextures();
+    // twodWebGL.render();
+    twodWebGL.running = true;
+  },
+  (error) => {
+    console.log('error');
+  }
+);
+
+init();
\ No newline at end of file
diff --git a/tetradic-truchet/src/style.scss b/tetradic-truchet/src/style.scss
new file mode 100644
index 0000000..5aa6603
--- /dev/null
+++ b/tetradic-truchet/src/style.scss
@@ -0,0 +1,243 @@
+:root {
+  --black: #101820;
+}
+
+body {
+  align-content: start;
+  box-sizing: border-box;
+  display: grid;
+  font-family: sans-serif;
+  font-weight: bold;
+  min-height: 100vh;
+  grid-template-columns: minmax(280px, 485px) 1fr;
+  letter-spacing: 0.03em;
+  line-height: 1;
+  padding: 16px;
+  text-align: center;
+  
+  *:focus {
+    &:not(:focus-visible) {
+      outline: none;
+    }
+  }
+}
+
+canvas#webgl {
+  left: 0;
+  position: fixed;
+  top: 0;
+  z-index: 0;
+}
+
+button {
+  appearance: none;
+  background: white;
+  border: none;
+  border-radius: 0;
+  color: var(--black);
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+.toggle {
+  background: white;
+  box-shadow: 0 0 32px rgba(17, 25, 33, .5);
+  position: relative;
+  z-index: 1;
+  
+  &[aria-expanded="true"] {
+    .toggle__content {
+      max-height: 800px;
+      opacity: 1;
+      transition-delay: .2s, 0s, 0s;
+      transition-duration: .4s, .4s, 0s;
+      visibility: visible;
+    }
+  }
+}
+
+.toggle__button {
+  --space: 8px;
+  
+  align-items: center;
+  display: flex;
+  font-size: 1.2rem;
+  justify-content: center;
+  padding: calc(var(--space) * 3);
+  position: relative;
+  width: 100%;
+}
+
+.toggle__icon {
+  position: absolute;
+  top: 50%;
+  right: calc(var(--space) * 2);
+  transform: translateY(-50%);
+}
+
+.toggle__content {
+  max-height: 0;
+  opacity: 0;
+  transition-delay: 0s, .2s, .6s;
+  transition-duration: .2s, .4s, 0s;
+  transition-property: opacity, max-height, visibility;
+  visibility: hidden;
+  
+  &::before {
+    background-color: var(--black);
+    content: "";
+    display: block;
+    height: 1px;
+    margin: auto;
+    width: 94px;
+  }
+}
+
+.color-picker {
+  display: grid;
+  padding: 20px 20px 16px;
+  position: relative;
+  gap: 16px;
+  z-index: 1;
+}
+
+.color-picker__canvas-wrap {
+  justify-self: center;
+  position: relative;
+  touch-action: none;
+  width: 73%;
+}
+  
+.color-picker__canvas {
+  cursor: grab;
+  display: block;
+  width: 100%;
+  
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.color-picker__selected {
+  border: 1px solid #101820;
+  color: #6F747B;
+  padding: 20px;
+}
+
+.color-picker__inputs {
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  list-style-type: none;
+}
+
+.color-picker__item {
+  display: flex;
+  margin: 0;
+}
+
+.color-picker__input-wrap {
+  align-items: center;
+  background-color: var(--fill);
+  display: flex;
+  flex: 0 1 85%;
+  height: 32px;
+  position: relative;
+  
+  &::before {
+    background-image: linear-gradient(
+      90deg,
+      rgba(0,0,0,.9) 0%,
+      rgba(0,0,0,0) 50%,
+      rgba(255,255,255,0) 51%,
+      rgba(255,255,255,.9) 100%
+    );
+    content: "";
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
+
+// ugly, cross-browser range input styles
+.color-picker__input {
+  --size: 14px;
+  --scale: 1;
+  --active-scale: 1.3;
+  
+  @mixin range-thumb {
+    appearance: none;
+    background: var(--modified-fill);
+    height: var(--size);
+    border-radius: 50%;
+    border: 2px solid white;
+    box-shadow: 0 0 0 2px black;
+    cursor: pointer;
+    transform: scale(var(--scale));
+    transition: transform .2s;
+    width: var(--size);
+
+    &:hover {
+      --scale: var(--active-scale);
+    }
+  }
+  
+  appearance: none;
+  background: rgba(255,255,255,0);
+  flex: 1;
+  height: 2px;
+  margin: 0 16px;
+  outline: none;
+  padding: 0;
+  position: relative;
+
+  &::-webkit-slider-thumb {
+    @include range-thumb;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: rgba(255,255,255,1);
+  }
+  
+  &:focus {
+    &::-webkit-slider-thumb {
+      --scale: 1.3;
+    }
+    
+    &::-moz-range-thumb {
+      --scale: 1.3;
+    }
+  }
+
+  &::-moz-range-thumb {
+    @include range-thumb;
+  }
+
+  &:active::-moz-range-thumb {
+    --scale: 1.3;
+  }
+}
+
+.color-picker__color-label {
+  background-color: var(--modified-fill);
+  flex: 1 1 auto;
+  margin-left: 1px;
+}
+
+.color-picker__button {
+  appearance: none;
+  background-color: var(--black);
+  color: white;
+  padding: 24px 64px;
+  justify-self: center;
+  text-transform: uppercase;
+}
+
diff --git a/tetris/README.markdown b/tetris/README.markdown
new file mode 100644
index 0000000..5282dc7
--- /dev/null
+++ b/tetris/README.markdown
@@ -0,0 +1,5 @@
+# Tetris
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/hiteshsahu/pen/LYZbjGq](https://codepen.io/hiteshsahu/pen/LYZbjGq).
+
+
diff --git a/tetris/dist/index.html b/tetris/dist/index.html
new file mode 100644
index 0000000..47d7329
--- /dev/null
+++ b/tetris/dist/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Tetris</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+     <title>Babylon.js Tetris Demo by Hitesh Sahu</title>
+    </head>
+<body>
+    <canvas id="renderCanvas"></canvas>
+</body>
+<!-- partial -->
+  <script src='https://code.jquery.com/pep/0.4.2/pep.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js'></script>
+<script src='https://preview.babylonjs.com/ammo.js'></script>
+<script src='https://preview.babylonjs.com/cannon.js'></script>
+<script src='https://preview.babylonjs.com/Oimo.js'></script>
+<script src='https://preview.babylonjs.com/earcut.min.js'></script>
+<script src='https://preview.babylonjs.com/babylon.js'></script>
+<script src='https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js'></script>
+<script src='https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js'></script>
+<script src='https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js'></script>
+<script src='https://preview.babylonjs.com/loaders/babylonjs.loaders.js'></script>
+<script src='https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js'></script>
+<script src='https://preview.babylonjs.com/gui/babylon.gui.min.js'></script>
+<script src='https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/tetris/dist/script.js b/tetris/dist/script.js
new file mode 100644
index 0000000..f78f44e
--- /dev/null
+++ b/tetris/dist/script.js
@@ -0,0 +1,231 @@
+const BOX_SIZE = 1
+ const BOX_DEPTH = 4
+ const GROUND_SIZE = 50
+ const colors = {
+   seaFoam: BABYLON.Color3.FromHexString("#16a085"),
+   green: BABYLON.Color3.FromHexString("#27ae60"),
+   blue: BABYLON.Color3.FromHexString("#2980b9"),
+   purple: BABYLON.Color3.FromHexString("#8e44ad"),
+   navy: BABYLON.Color3.FromHexString("#2c3e50"),
+   yellow: BABYLON.Color3.FromHexString("#f39c12"),
+   orange: BABYLON.Color3.FromHexString("#d35400"),
+   red: BABYLON.Color3.FromHexString("#c0392b"),
+   white: BABYLON.Color3.FromHexString("#bdc3c7"),
+   gray: BABYLON.Color3.FromHexString("#7f8c8d")
+ }
+
+ const SHAPES = ["I", "O", "S", "T", "L"]
+ var BODIES = { "I": {}, "O": {}, "S": {}, "T": {}, "L": {} }
+           
+var canvas = document.getElementById("renderCanvas");
+        var engine = null;
+        var scene = null;
+        var sceneToRender = null;
+        var createDefaultEngine = ()=>{ 
+          return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil:true}); };
+       
+        var createScene = async  ()=> {
+            var scene = new BABYLON.Scene(engine);
+            scene.clearColor = colors.navy;
+            scene.enablePhysics(null, new BABYLON.AmmoJSPlugin());
+            //CAMERA
+            var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2.5, 25, BABYLON.Vector3.Zero(), scene); 
+            camera.attachControl(canvas, true);
+            camera.setPosition(new BABYLON.Vector3(GROUND_SIZE / 2, GROUND_SIZE / 2, GROUND_SIZE / 2))
+            //LIGHT
+            var light = new BABYLON.DirectionalLight("dir02", new BABYLON.Vector3(0.2, -1, 0), scene);
+            light.position = new BABYLON.Vector3(0, GROUND_SIZE, 0);
+            light.intensity = 0.9
+            shadowGenerator = new BABYLON.ShadowGenerator(2048, light);
+        
+           //MATERIAL
+            BODIES["O"].material = createMat(scene, colors.purple)
+            BODIES["I"].material = createMat(scene, colors.red)
+            BODIES["L"].material = createMat(scene, colors.yellow)
+            BODIES["T"].material = createMat(scene, colors.green)
+            BODIES["S"].material = createMat(scene, colors.orange)
+        
+            var grass = new BABYLON.StandardMaterial("grass", scene);
+            grass.diffuseTexture = new BABYLON.Texture("https://images.pexels.com/photos/3038740/pexels-photo-3038740.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
+            grass.diffuseTexture.uScale = 5;
+            grass.diffuseTexture.vScale = 5;
+        
+            var ground = BABYLON.MeshBuilder.CreateBox("ground", { width: GROUND_SIZE, depth: GROUND_SIZE, height: 1 }, scene);
+            ground.material = grass;
+            ground.receiveShadows = true;
+            ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, friction: 0.5, restitution: 0 }, scene);
+      
+              var ticker = 0;
+        
+                scene.registerBeforeRender(function() {
+                    if((ticker++ % 60)) return;
+                    for (var ii = 0; ii < 10; ii++) {
+                     let nextChar = SHAPES[randomInteger(0, SHAPES.length)]
+                                getBody(nextChar, scene, new BABYLON.Vector3(randomInteger(-GROUND_SIZE/2,GROUND_SIZE/2), 
+                                GROUND_SIZE/2, 
+                                randomInteger(-GROUND_SIZE/2,GROUND_SIZE/2)))
+                    }
+                });
+                scene.registerBeforeRender( ()=> {
+                    scene.meshes.forEach( (m)=> {
+                        if (m.name=="s" && m.position.y < -10) {
+                            m.dispose();
+                        }
+                    })
+                });
+          
+            
+          scene.onKeyboardObservable.add((kbInfo) => {
+            switch (kbInfo.type) {
+              case BABYLON.KeyboardEventTypes.KEYDOWN:
+                switch (kbInfo.event.keyCode) {
+                  case 65:  //A
+                    // nextShape.position.z -= 0.1;
+                    break
+                  case 68: //D
+                    // nextShape.position.z += 0.1;
+                    break
+                  case 87://"W":
+                    // nextShape.position.y += 0.1;
+                    break
+                  case 83: // "S":
+                    // nextShape.position.y -= 0.1;
+                    break
+                  case 32: // "SPACE":
+                    let nextChar = SHAPES[randomInteger(0, SHAPES.length)]
+                    let nextShape = getBody(nextChar, scene, new BABYLON.Vector3(randomInteger(-GROUND_SIZE/4,GROUND_SIZE/4), 
+                                                                                 50, randomInteger(-GROUND_SIZE/4,GROUND_SIZE/4)))
+                    // nextShape.rotation.x += Math.PI / 2;
+                    break
+                }
+                break;
+            }
+          });
+
+            return scene;
+        };
+        
+        var getBody = (nextChar, scene, position = new BABYLON.Vector3(0, 50, 0)) => {
+        
+            let body
+            if (BODIES[nextChar].mesh) {
+                body = BODIES[nextChar].mesh.clone("s")
+            } else {
+                let shape = getShape(nextChar, scene)
+                BODIES[nextChar].mesh = shape
+                body = BODIES[nextChar].mesh.clone("s")
+                body.isVisible = true
+            }
+  
+            body.position = position
+            shadowGenerator.addShadowCaster(body);
+            return body
+        }
+        
+        var getShape = (shape, scene) => {
+        
+            switch (shape) {
+                case "O":
+                    var boxO = BABYLON.MeshBuilder.CreateBox("boxO", { height: BOX_DEPTH/2, width: BOX_SIZE, depth: BOX_DEPTH/2 }, scene);
+                    boxO.physicsImpostor = new BABYLON.PhysicsImpostor(boxO, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+                    boxO.material = BODIES[shape].material
+                    return boxO
+        
+                case "I":
+                    var boxI = BABYLON.MeshBuilder.CreateBox("boxI", { height: BOX_DEPTH, width: BOX_SIZE, depth: BOX_SIZE }, scene);
+                    boxI.physicsImpostor = new BABYLON.PhysicsImpostor(boxI, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+                    boxI.material = BODIES[shape].material
+        
+                    return boxI
+        
+                case "L":
+        
+                    var boxL = BABYLON.MeshBuilder.CreateBox("boxL", { height: BOX_SIZE, width: BOX_SIZE, depth: BOX_DEPTH }, scene);
+                    var boxLTop = BABYLON.MeshBuilder.CreateBox("boxLTop", { height: BOX_SIZE, width: BOX_SIZE, depth: BOX_SIZE }, scene);
+                    boxLTop.position.y = BOX_SIZE
+                    boxLTop.position.z = BOX_SIZE * 2
+                    boxLTop.parent = boxL
+        
+                    boxLTop.physicsImpostor = new BABYLON.PhysicsImpostor(boxLTop, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+                    boxL.physicsImpostor = new BABYLON.PhysicsImpostor(boxL, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+                    boxL.material = BODIES[shape].material
+                    boxLTop.material = BODIES[shape].material
+        
+                    return boxL
+                    /** 
+                    return  BABYLON.Mesh.MergeMeshes([boxL, boxLTop])
+                    */
+        
+                    var subCSG = BABYLON.CSG.FromMesh(boxL).subtract(BABYLON.CSG.FromMesh(boxLTop));
+                    var newMesh = subCSG.toMesh("csg", materials[shape], scene);
+                    newMesh.position = new BABYLON.Vector3(10, 0, 0);
+                    return newMesh
+        
+                case "T":
+                    var boxT = BABYLON.MeshBuilder.CreateBox("boxT", { height: BOX_SIZE, width: BOX_SIZE, depth: BOX_DEPTH }, scene);
+                    var boxTBottom = BABYLON.MeshBuilder.CreateBox("box", { height: BOX_SIZE, width: BOX_SIZE, depth: BOX_SIZE }, scene);
+                    boxTBottom.position.y = -BOX_SIZE
+                    boxTBottom.parent = boxT
+        
+                    boxT.physicsImpostor = new BABYLON.PhysicsImpostor(boxT, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+                    boxTBottom.physicsImpostor = new BABYLON.PhysicsImpostor(boxTBottom, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+        
+                    boxT.material = BODIES[shape].material
+                    boxTBottom.material = BODIES[shape].material
+                    return boxT //BABYLON.Mesh.MergeMeshes([boxT, boxTBottom])
+        
+                case "S":
+                    var boxS = BABYLON.MeshBuilder.CreateBox("boxS", { height: BOX_SIZE, width: BOX_SIZE, depth: BOX_DEPTH / 2 }, scene);
+                    var boxSTop = BABYLON.MeshBuilder.CreateBox("boxS", { height: BOX_SIZE, width: BOX_SIZE, depth: BOX_DEPTH / 2 }, scene);
+                    boxSTop.position.y = BOX_SIZE
+                    boxSTop.position.z = BOX_SIZE
+                    boxSTop.parent = boxS
+        
+                    boxS.physicsImpostor = new BABYLON.PhysicsImpostor(boxS, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+                    boxSTop.physicsImpostor = new BABYLON.PhysicsImpostor(boxSTop, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+        
+                    boxS.material = BODIES[shape].material
+                    boxSTop.material = BODIES[shape].material
+                    return boxS
+        
+                //return BABYLON.Mesh.MergeMeshes([boxS, boxSTop])
+            }
+        }
+        
+         randomInteger=(min, max)=> {
+            return Math.floor(Math.random() * (max-min)) + min
+        }
+        
+        var createMat = (scene, color) => {
+            var mat = new BABYLON.StandardMaterial("", scene);
+            mat.diffuseColor = color;
+            mat.specularColor = BABYLON.Color3.FromHexString("#555555");
+            mat.specularPower = 1;
+            mat.emissiveColor = color // color.clone().scale(0.7);
+            mat.backFaceCulling = false;
+            return mat;
+        }
+        
+        
+    var engine;
+    try {
+    engine = createDefaultEngine();
+    } catch(e) {
+    console.log("the available createEngine function failed. Creating the default engine instead");
+    engine = createDefaultEngine();
+    }
+        if (!engine) throw 'engine should not be null.';
+        scene = createScene();;
+        scene.then(returnedScene => { sceneToRender = returnedScene; });
+        
+
+        engine.runRenderLoop(function () {
+            if (sceneToRender && sceneToRender.activeCamera) {
+                sceneToRender.render();
+            }
+        });
+
+        // Resize
+        window.addEventListener("resize", function () {
+            engine.resize();
+        });
\ No newline at end of file
diff --git a/tetris/dist/style.css b/tetris/dist/style.css
new file mode 100644
index 0000000..929ab80
--- /dev/null
+++ b/tetris/dist/style.css
@@ -0,0 +1,13 @@
+html, body {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#renderCanvas {
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+}
\ No newline at end of file
diff --git a/tetris/license.txt b/tetris/license.txt
new file mode 100644
index 0000000..9bd2750
--- /dev/null
+++ b/tetris/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Hitesh  Sahu (https://codepen.io/hiteshsahu/pen/LYZbjGq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/tetris/src/index.html b/tetris/src/index.html
new file mode 100644
index 0000000..adbdab2
--- /dev/null
+++ b/tetris/src/index.html
@@ -0,0 +1,7 @@
+ <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+     <title>Babylon.js Tetris Demo by Hitesh Sahu</title>
+    </head>
+<body>
+    <canvas id="renderCanvas"></canvas>
+</body>
diff --git a/tetris/src/script.js b/tetris/src/script.js
new file mode 100644
index 0000000..8aefd18
--- /dev/null
+++ b/tetris/src/script.js
@@ -0,0 +1,231 @@
+ const BOX_SIZE = 1
+ const BOX_DEPTH = 4
+ const GROUND_SIZE = 50
+ const colors = {
+   seaFoam: BABYLON.Color3.FromHexString("#16a085"),
+   green: BABYLON.Color3.FromHexString("#27ae60"),
+   blue: BABYLON.Color3.FromHexString("#2980b9"),
+   purple: BABYLON.Color3.FromHexString("#8e44ad"),
+   navy: BABYLON.Color3.FromHexString("#2c3e50"),
+   yellow: BABYLON.Color3.FromHexString("#f39c12"),
+   orange: BABYLON.Color3.FromHexString("#d35400"),
+   red: BABYLON.Color3.FromHexString("#c0392b"),
+   white: BABYLON.Color3.FromHexString("#bdc3c7"),
+   gray: BABYLON.Color3.FromHexString("#7f8c8d")
+ }
+
+ const SHAPES = ["I", "O", "S", "T", "L"]
+ var BODIES = { "I": {}, "O": {}, "S": {}, "T": {}, "L": {} }
+           
+var canvas = document.getElementById("renderCanvas");
+        var engine = null;
+        var scene = null;
+        var sceneToRender = null;
+        var createDefaultEngine = ()=>{ 
+          return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil:true}); };
+       
+        var createScene = async  ()=> {
+            var scene = new BABYLON.Scene(engine);
+            scene.clearColor = colors.navy;
+            scene.enablePhysics(null, new BABYLON.AmmoJSPlugin());
+            //CAMERA
+            var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2.5, 25, BABYLON.Vector3.Zero(), scene); 
+            camera.attachControl(canvas, true);
+            camera.setPosition(new BABYLON.Vector3(GROUND_SIZE / 2, GROUND_SIZE / 2, GROUND_SIZE / 2))
+            //LIGHT
+            var light = new BABYLON.DirectionalLight("dir02", new BABYLON.Vector3(0.2, -1, 0), scene);
+            light.position = new BABYLON.Vector3(0, GROUND_SIZE, 0);
+            light.intensity = 0.9
+            shadowGenerator = new BABYLON.ShadowGenerator(2048, light);
+        
+           //MATERIAL
+            BODIES["O"].material = createMat(scene, colors.purple)
+            BODIES["I"].material = createMat(scene, colors.red)
+            BODIES["L"].material = createMat(scene, colors.yellow)
+            BODIES["T"].material = createMat(scene, colors.green)
+            BODIES["S"].material = createMat(scene, colors.orange)
+        
+            var grass = new BABYLON.StandardMaterial("grass", scene);
+            grass.diffuseTexture = new BABYLON.Texture("https://images.pexels.com/photos/3038740/pexels-photo-3038740.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
+            grass.diffuseTexture.uScale = 5;
+            grass.diffuseTexture.vScale = 5;
+        
+            var ground = BABYLON.MeshBuilder.CreateBox("ground", { width: GROUND_SIZE, depth: GROUND_SIZE, height: 1 }, scene);
+            ground.material = grass;
+            ground.receiveShadows = true;
+            ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, friction: 0.5, restitution: 0 }, scene);
+      
+              var ticker = 0;
+        
+                scene.registerBeforeRender(function() {
+                    if((ticker++ % 60)) return;
+                    for (var ii = 0; ii < 10; ii++) {
+                     let nextChar = SHAPES[randomInteger(0, SHAPES.length)]
+                                getBody(nextChar, scene, new BABYLON.Vector3(randomInteger(-GROUND_SIZE/2,GROUND_SIZE/2), 
+                                GROUND_SIZE/2, 
+                                randomInteger(-GROUND_SIZE/2,GROUND_SIZE/2)))
+                    }
+                });
+                scene.registerBeforeRender( ()=> {
+                    scene.meshes.forEach( (m)=> {
+                        if (m.name=="s" && m.position.y < -10) {
+                            m.dispose();
+                        }
+                    })
+                });
+          
+            
+          scene.onKeyboardObservable.add((kbInfo) => {
+            switch (kbInfo.type) {
+              case BABYLON.KeyboardEventTypes.KEYDOWN:
+                switch (kbInfo.event.keyCode) {
+                  case 65:  //A
+                    // nextShape.position.z -= 0.1;
+                    break
+                  case 68: //D
+                    // nextShape.position.z += 0.1;
+                    break
+                  case 87://"W":
+                    // nextShape.position.y += 0.1;
+                    break
+                  case 83: // "S":
+                    // nextShape.position.y -= 0.1;
+                    break
+                  case 32: // "SPACE":
+                    let nextChar = SHAPES[randomInteger(0, SHAPES.length)]
+                    let nextShape = getBody(nextChar, scene, new BABYLON.Vector3(randomInteger(-GROUND_SIZE/4,GROUND_SIZE/4), 
+                                                                                 50, randomInteger(-GROUND_SIZE/4,GROUND_SIZE/4)))
+                    // nextShape.rotation.x += Math.PI / 2;
+                    break
+                }
+                break;
+            }
+          });
+
+            return scene;
+        };
+        
+        var getBody = (nextChar, scene, position = new BABYLON.Vector3(0, 50, 0)) => {
+        
+            let body
+            if (BODIES[nextChar].mesh) {
+                body = BODIES[nextChar].mesh.clone("s")
+            } else {
+                let shape = getShape(nextChar, scene)
+                BODIES[nextChar].mesh = shape
+                body = BODIES[nextChar].mesh.clone("s")
+                body.isVisible = true
+            }
+  
+            body.position = position
+            shadowGenerator.addShadowCaster(body);
+            return body
+        }
+        
+        var getShape = (shape, scene) => {
+        
+            switch (shape) {
+                case "O":
+                    var boxO = BABYLON.MeshBuilder.CreateBox("boxO", { height: BOX_DEPTH/2, width: BOX_SIZE, depth: BOX_DEPTH/2 }, scene);
+                    boxO.physicsImpostor = new BABYLON.PhysicsImpostor(boxO, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+                    boxO.material = BODIES[shape].material
+                    return boxO
+        
+                case "I":
+                    var boxI = BABYLON.MeshBuilder.CreateBox("boxI", { height: BOX_DEPTH, width: BOX_SIZE, depth: BOX_SIZE }, scene);
+                    boxI.physicsImpostor = new BABYLON.PhysicsImpostor(boxI, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+                    boxI.material = BODIES[shape].material
+        
+                    return boxI
+        
+                case "L":
+        
+                    var boxL = BABYLON.MeshBuilder.CreateBox("boxL", { height: BOX_SIZE, width: BOX_SIZE, depth: BOX_DEPTH }, scene);
+                    var boxLTop = BABYLON.MeshBuilder.CreateBox("boxLTop", { height: BOX_SIZE, width: BOX_SIZE, depth: BOX_SIZE }, scene);
+                    boxLTop.position.y = BOX_SIZE
+                    boxLTop.position.z = BOX_SIZE * 2
+                    boxLTop.parent = boxL
+        
+                    boxLTop.physicsImpostor = new BABYLON.PhysicsImpostor(boxLTop, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+                    boxL.physicsImpostor = new BABYLON.PhysicsImpostor(boxL, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+                    boxL.material = BODIES[shape].material
+                    boxLTop.material = BODIES[shape].material
+        
+                    return boxL
+                    /** 
+                    return  BABYLON.Mesh.MergeMeshes([boxL, boxLTop])
+                    */
+        
+                    var subCSG = BABYLON.CSG.FromMesh(boxL).subtract(BABYLON.CSG.FromMesh(boxLTop));
+                    var newMesh = subCSG.toMesh("csg", materials[shape], scene);
+                    newMesh.position = new BABYLON.Vector3(10, 0, 0);
+                    return newMesh
+        
+                case "T":
+                    var boxT = BABYLON.MeshBuilder.CreateBox("boxT", { height: BOX_SIZE, width: BOX_SIZE, depth: BOX_DEPTH }, scene);
+                    var boxTBottom = BABYLON.MeshBuilder.CreateBox("box", { height: BOX_SIZE, width: BOX_SIZE, depth: BOX_SIZE }, scene);
+                    boxTBottom.position.y = -BOX_SIZE
+                    boxTBottom.parent = boxT
+        
+                    boxT.physicsImpostor = new BABYLON.PhysicsImpostor(boxT, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+                    boxTBottom.physicsImpostor = new BABYLON.PhysicsImpostor(boxTBottom, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+        
+                    boxT.material = BODIES[shape].material
+                    boxTBottom.material = BODIES[shape].material
+                    return boxT //BABYLON.Mesh.MergeMeshes([boxT, boxTBottom])
+        
+                case "S":
+                    var boxS = BABYLON.MeshBuilder.CreateBox("boxS", { height: BOX_SIZE, width: BOX_SIZE, depth: BOX_DEPTH / 2 }, scene);
+                    var boxSTop = BABYLON.MeshBuilder.CreateBox("boxS", { height: BOX_SIZE, width: BOX_SIZE, depth: BOX_DEPTH / 2 }, scene);
+                    boxSTop.position.y = BOX_SIZE
+                    boxSTop.position.z = BOX_SIZE
+                    boxSTop.parent = boxS
+        
+                    boxS.physicsImpostor = new BABYLON.PhysicsImpostor(boxS, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+                    boxSTop.physicsImpostor = new BABYLON.PhysicsImpostor(boxSTop, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
+        
+                    boxS.material = BODIES[shape].material
+                    boxSTop.material = BODIES[shape].material
+                    return boxS
+        
+                //return BABYLON.Mesh.MergeMeshes([boxS, boxSTop])
+            }
+        }
+        
+         randomInteger=(min, max)=> {
+            return Math.floor(Math.random() * (max-min)) + min
+        }
+        
+        var createMat = (scene, color) => {
+            var mat = new BABYLON.StandardMaterial("", scene);
+            mat.diffuseColor = color;
+            mat.specularColor = BABYLON.Color3.FromHexString("#555555");
+            mat.specularPower = 1;
+            mat.emissiveColor = color // color.clone().scale(0.7);
+            mat.backFaceCulling = false;
+            return mat;
+        }
+        
+        
+    var engine;
+    try {
+    engine = createDefaultEngine();
+    } catch(e) {
+    console.log("the available createEngine function failed. Creating the default engine instead");
+    engine = createDefaultEngine();
+    }
+        if (!engine) throw 'engine should not be null.';
+        scene = createScene();;
+        scene.then(returnedScene => { sceneToRender = returnedScene; });
+        
+
+        engine.runRenderLoop(function () {
+            if (sceneToRender && sceneToRender.activeCamera) {
+                sceneToRender.render();
+            }
+        });
+
+        // Resize
+        window.addEventListener("resize", function () {
+            engine.resize();
+        });
\ No newline at end of file
diff --git a/tetris/src/style.css b/tetris/src/style.css
new file mode 100644
index 0000000..929ab80
--- /dev/null
+++ b/tetris/src/style.css
@@ -0,0 +1,13 @@
+html, body {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#renderCanvas {
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+}
\ No newline at end of file
diff --git a/text-grid-with-mouse-interaction-keyframers-3-20/README.markdown b/text-grid-with-mouse-interaction-keyframers-3-20/README.markdown
new file mode 100644
index 0000000..7376bca
--- /dev/null
+++ b/text-grid-with-mouse-interaction-keyframers-3-20/README.markdown
@@ -0,0 +1,16 @@
+# Text Grid with Mouse Interaction | @keyframers 3.20
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/team/keyframers/pen/QWKpEdE](https://codepen.io/team/keyframers/pen/QWKpEdE).
+
+David Khourshid & Stephen Shaw live code a fancy text grid effect with CSS variables & mouse interaction 
+
+💡 Inspiration: https://dribbble.com/shots/14758210-Reactive-typeface
+🎥  Video: https://youtu.be/QXJZkK4Jc5U
+💻  Code: https://codepen.io/team/keyframers/pen/QWKpEdE
+
+Like what we're doing? Support @keyframers so we can keep live coding awesome animations!
+
+* Like & subscribe on YouTube at https://youtube.com/keyframers
+* Buy web dev shirts, stickers & more at https://keyframe.rs/merch
+* Follow & tweet us at https://twitter.com/keyframers
+* Support us on Patreon at https://patreon.com/keyframers
diff --git a/text-grid-with-mouse-interaction-keyframers-3-20/dist/index.html b/text-grid-with-mouse-interaction-keyframers-3-20/dist/index.html
new file mode 100644
index 0000000..a6352e8
--- /dev/null
+++ b/text-grid-with-mouse-interaction-keyframers-3-20/dist/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Text Grid with Mouse Interaction | @keyframers 3.20</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!--
+
+  1. Splitting Lite
+  2. Normalizing CSS Variables (0-1)
+
+-->
+
+<div class="text-grid">
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+</div>
+
+<a href="https://youtu.be/QXJZkK4Jc5U" target="_blank" data-keyframers-credit style="color: #FFF"></a>
+<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/text-grid-with-mouse-interaction-keyframers-3-20/dist/script.js b/text-grid-with-mouse-interaction-keyframers-3-20/dist/script.js
new file mode 100644
index 0000000..df4c691
--- /dev/null
+++ b/text-grid-with-mouse-interaction-keyframers-3-20/dist/script.js
@@ -0,0 +1,55 @@
+console.clear();
+
+const elTextGrid = document.querySelector(".text-grid");
+
+function splittingLite(el) {
+  let characters = el.innerText
+    .split("")
+    .filter((char) => char !== " ")
+    .map(
+      (char, i) =>
+        `<span class="char" data-char="${char}" style="--i: ${i}">${char}</span>`
+    );
+  el.innerHTML = characters.join("");
+  el.style.setProperty("--total", characters.length);
+  return el.querySelectorAll(".char");
+}
+
+const elCharacters = splittingLite(elTextGrid);
+
+function getCharMeasurements() {
+  return Array.from(elCharacters, (elChar) => {
+    return {
+      element: elChar,
+      rect: elChar.getBoundingClientRect(),
+      distance: 0
+    };
+  });
+}
+
+let charMeasurements = getCharMeasurements();
+
+window.addEventListener("resize", () => {
+  charMeasurements = getCharMeasurements();
+});
+
+function recalculateDistances(mouseCoords) {
+  let containerRect = elTextGrid.getBoundingClientRect();
+  let diagonal = Math.hypot(containerRect.width, containerRect.height);
+  charMeasurements.forEach(({ element, rect }) => {
+    const distance = Math.hypot(
+      rect.left - mouseCoords.x,
+      rect.top - mouseCoords.y
+    );
+    const normalizedDistance = 1 - distance / diagonal;
+    element.style.setProperty(
+      "--distance",
+      Math.max(Math.pow(normalizedDistance, 3), 0)
+    );
+  });
+}
+
+document.addEventListener("mousemove", (event) => {
+  const { clientX, clientY } = event.touches ? event.touches[0] : event;
+  recalculateDistances({ x: clientX, y: clientY });
+});
\ No newline at end of file
diff --git a/text-grid-with-mouse-interaction-keyframers-3-20/dist/style.css b/text-grid-with-mouse-interaction-keyframers-3-20/dist/style.css
new file mode 100644
index 0000000..9b001de
--- /dev/null
+++ b/text-grid-with-mouse-interaction-keyframers-3-20/dist/style.css
@@ -0,0 +1,49 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap");
+* {
+  box-sizing: border-box;
+  position: relative;
+  cursor: crosshair;
+}
+
+html {
+  cursor: crosshair;
+  height: 100%;
+  background: #000;
+  color: #fff;
+}
+
+body {
+  display: flex;
+  place-items: center;
+}
+
+body {
+  min-height: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.text-grid {
+  cursor: crosshair;
+  font-family: "Roboto Condensed", sans-serif;
+  font-weight: bold;
+  --chars: 11;
+  text-transform: uppercase;
+  font-size: calc(70vmin / var(--chars));
+  display: grid;
+  grid-template-columns: repeat(var(--chars), 1.2em);
+}
+
+html {
+  background: #0a1e0f;
+}
+
+.char {
+  --d: max(0.25, var(--distance, 0));
+  opacity: var(--d);
+  display: inline-grid;
+  place-items: center;
+  transform: scale(calc(var(--d) * 1.4));
+  color: rgb(calc(255 * var(--d)), calc(255 * (1 - var(--d))), calc(20 + (40 * var(--d))));
+  transition: color 0.2s linear;
+}
\ No newline at end of file
diff --git a/text-grid-with-mouse-interaction-keyframers-3-20/license.txt b/text-grid-with-mouse-interaction-keyframers-3-20/license.txt
new file mode 100644
index 0000000..40490ec
--- /dev/null
+++ b/text-grid-with-mouse-interaction-keyframers-3-20/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by @keyframers (https://codepen.io/team/keyframers/pen/QWKpEdE)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/text-grid-with-mouse-interaction-keyframers-3-20/src/index.html b/text-grid-with-mouse-interaction-keyframers-3-20/src/index.html
new file mode 100644
index 0000000..3e28f3c
--- /dev/null
+++ b/text-grid-with-mouse-interaction-keyframers-3-20/src/index.html
@@ -0,0 +1,23 @@
+<!--
+
+  1. Splitting Lite
+  2. Normalizing CSS Variables (0-1)
+
+-->
+
+<div class="text-grid">
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+  keyframers
+</div>
+
+<a href="https://youtu.be/QXJZkK4Jc5U" target="_blank" data-keyframers-credit style="color: #FFF"></a>
+<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
\ No newline at end of file
diff --git a/text-grid-with-mouse-interaction-keyframers-3-20/src/script.js b/text-grid-with-mouse-interaction-keyframers-3-20/src/script.js
new file mode 100644
index 0000000..74e5412
--- /dev/null
+++ b/text-grid-with-mouse-interaction-keyframers-3-20/src/script.js
@@ -0,0 +1,55 @@
+console.clear();
+
+const elTextGrid = document.querySelector(".text-grid");
+
+function splittingLite(el) {
+  let characters = el.innerText
+    .split("")
+    .filter((char) => char !== " ")
+    .map(
+      (char, i) =>
+        `<span class="char" data-char="${char}" style="--i: ${i}">${char}</span>`
+    );
+  el.innerHTML = characters.join("");
+  el.style.setProperty("--total", characters.length);
+  return el.querySelectorAll(".char");
+}
+
+const elCharacters = splittingLite(elTextGrid);
+
+function getCharMeasurements() {
+  return Array.from(elCharacters, (elChar) => {
+    return {
+      element: elChar,
+      rect: elChar.getBoundingClientRect(),
+      distance: 0
+    };
+  });
+}
+
+let charMeasurements = getCharMeasurements();
+
+window.addEventListener("resize", () => {
+  charMeasurements = getCharMeasurements();
+});
+
+function recalculateDistances(mouseCoords) {
+  let containerRect = elTextGrid.getBoundingClientRect();
+  let diagonal = Math.hypot(containerRect.width, containerRect.height);
+  charMeasurements.forEach(({ element, rect }) => {
+    const distance = Math.hypot(
+      rect.left - mouseCoords.x,
+      rect.top - mouseCoords.y
+    );
+    const normalizedDistance = 1 - distance / diagonal;
+    element.style.setProperty(
+      "--distance",
+      Math.max(Math.pow(normalizedDistance, 3), 0)
+    );
+  });
+}
+
+document.addEventListener("mousemove", (event) => {
+  const { clientX, clientY } = event.touches ? event.touches[0] : event;
+  recalculateDistances({ x: clientX, y: clientY });
+});
diff --git a/text-grid-with-mouse-interaction-keyframers-3-20/src/style.scss b/text-grid-with-mouse-interaction-keyframers-3-20/src/style.scss
new file mode 100644
index 0000000..cbd81c7
--- /dev/null
+++ b/text-grid-with-mouse-interaction-keyframers-3-20/src/style.scss
@@ -0,0 +1,53 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap");
+
+* {
+  box-sizing: border-box;
+  position: relative;
+  cursor: crosshair;
+}
+
+html {
+  cursor: crosshair;
+  height: 100%;
+  background: #000;
+  color: #fff;
+}
+
+body {
+  display: flex;
+  place-items: center;
+}
+
+body {
+  min-height: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.text-grid {
+  cursor: crosshair;
+  font-family: "Roboto Condensed", sans-serif;
+  font-weight: bold;
+  --chars: 11;
+  text-transform: uppercase;
+  font-size: calc(70vmin / var(--chars));
+  display: grid;
+  grid-template-columns: repeat(var(--chars), 1.2em);
+}
+
+html {
+  background: rgb(10, 30, 15);
+}
+.char {
+  --d: max(0.25, var(--distance, 0));
+  opacity: var(--d);
+  display: inline-grid;
+  place-items: center;
+  transform: scale(calc(var(--d) * 1.4));
+  color: rgb(
+    calc(255 * var(--d)),
+    calc(255 * (1 - var(--d))),
+    calc(20 + (40 * var(--d)))
+  );
+  transition: color 0.2s linear;
+}
diff --git a/text-hover/README.markdown b/text-hover/README.markdown
new file mode 100644
index 0000000..bb74f26
--- /dev/null
+++ b/text-hover/README.markdown
@@ -0,0 +1,5 @@
+# Text Hover
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/gayane-gasparyan/pen/vYmYMeV](https://codepen.io/gayane-gasparyan/pen/vYmYMeV).
+
+just having fun with variable fonts 🤓
diff --git a/text-hover/dist/index.html b/text-hover/dist/index.html
new file mode 100644
index 0000000..85c6029
--- /dev/null
+++ b/text-hover/dist/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Text Hover</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<main>LINE</main>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/text-hover/dist/style.css b/text-hover/dist/style.css
new file mode 100644
index 0000000..e7ae91c
--- /dev/null
+++ b/text-hover/dist/style.css
@@ -0,0 +1,40 @@
+@font-face {
+  src: url("https://www.axis-praxis.org/fonts/webfonts/MetaVariableDemo-Set.woff2")
+    format("woff2");
+  font-family: "Meta";
+  font-style: normal;
+  font-weight: normal;
+}
+
+body {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  background-color: #8357eb;
+  width: 100vw;
+  height: 100vh;
+}
+
+main {
+  transition: all 0.5s;
+  -webkit-text-stroke: 4px #d6f4f4;
+  font-variation-settings: "wght" 900, "ital" 1;
+  font-size: 15rem;
+  text-align: center;
+  color: transparent;
+  font-family: "Meta", sans-serif;
+  text-shadow: 10px 10px 0px #07bccc,
+    15px 15px 0px #e601c0,
+    20px 20px 0px #e9019a,
+    25px 25px 0px #f40468,
+    45px 45px 10px #482896;
+  cursor: pointer;
+}
+
+main:hover {
+  font-variation-settings: "wght" 100, "ital" 0;
+  text-shadow: none;
+}
\ No newline at end of file
diff --git a/text-hover/license.txt b/text-hover/license.txt
new file mode 100644
index 0000000..e408a41
--- /dev/null
+++ b/text-hover/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Gayane (https://codepen.io/gayane-gasparyan/pen/vYmYMeV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/text-hover/src/index.html b/text-hover/src/index.html
new file mode 100644
index 0000000..528b3ce
--- /dev/null
+++ b/text-hover/src/index.html
@@ -0,0 +1 @@
+<main>LINE</main>
\ No newline at end of file
diff --git a/text-hover/src/style.css b/text-hover/src/style.css
new file mode 100644
index 0000000..bb18310
--- /dev/null
+++ b/text-hover/src/style.css
@@ -0,0 +1,40 @@
+@font-face {
+  src: url("https://www.axis-praxis.org/fonts/webfonts/MetaVariableDemo-Set.woff2")
+    format("woff2");
+  font-family: "Meta";
+  font-style: normal;
+  font-weight: normal;
+}
+
+body {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  background-color: #8357eb;
+  width: 100vw;
+  height: 100vh;
+}
+
+main {
+  transition: all 0.5s;
+  -webkit-text-stroke: 4px #d6f4f4;
+  font-variation-settings: "wght" 900, "ital" 1;
+  font-size: 15rem;
+  text-align: center;
+  color: transparent;
+  font-family: "Meta", sans-serif;
+  text-shadow: 10px 10px 0px #07bccc,
+    15px 15px 0px #e601c0,
+    20px 20px 0px #e9019a,
+    25px 25px 0px #f40468,
+    45px 45px 10px #482896;
+  cursor: pointer;
+}
+
+main:hover {
+  font-variation-settings: "wght" 100, "ital" 0;
+  text-shadow: none;
+}
diff --git a/text-mask-over-colorful-cubes/README.markdown b/text-mask-over-colorful-cubes/README.markdown
new file mode 100644
index 0000000..f8757b9
--- /dev/null
+++ b/text-mask-over-colorful-cubes/README.markdown
@@ -0,0 +1,12 @@
+# Text Mask Over Colorful Cubes
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/DonKarlssonSan/pen/OJNzLVR](https://codepen.io/DonKarlssonSan/pen/OJNzLVR).
+
+Click to generate a new pattern!
+
+This is how it works:
+
+* Draw pattern on off-screen canvas
+* Draw text on on-screen canvas
+* For on-screen canvas, set `globalCompositeOperation = "source-in"` which means "The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent."
+* Copy image from off-screen canvas to on-screen
diff --git a/text-mask-over-colorful-cubes/dist/index.html b/text-mask-over-colorful-cubes/dist/index.html
new file mode 100644
index 0000000..abf4c3e
--- /dev/null
+++ b/text-mask-over-colorful-cubes/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Text Mask Over Colorful Cubes</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input type="text" id="text" value="MASK"/>
+<canvas id="canvas"></canvas>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/text-mask-over-colorful-cubes/dist/script.js b/text-mask-over-colorful-cubes/dist/script.js
new file mode 100644
index 0000000..0e010c4
--- /dev/null
+++ b/text-mask-over-colorful-cubes/dist/script.js
@@ -0,0 +1,235 @@
+/*
+  Johan Karlsson, 2020
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+
+let config = {};
+let canvas;
+let canvasOffscreen;
+let ctx;
+let ctxOffscreen;
+let w, h;
+let hexagons;
+let colors;
+let text;
+
+class Hexagon {
+  constructor(x, y, R) {
+    this.x = x;
+    this.y = y;
+    this.R = R;
+  }
+
+  draw(ctx) {
+    ctx.save();
+    ctx.translate(this.x, this.y);
+    let angle = Math.PI * 2 / 3;
+    let nrOfRotations = 3;
+    let a = Math.PI / 6;
+    let color = getRandomColor();
+    for (let rot = 0; rot < nrOfRotations; rot++) {
+      ctx.rotate(angle);
+      let darken = -rot * 0.2;
+      let col = pSBC(darken, color);
+      ctx.strokeStyle = col;
+      ctx.fillStyle = col;
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      let x1 = Math.cos(Math.PI / 3 + a) * this.R;
+      let y1 = Math.sin(Math.PI / 3 + a) * this.R;
+      ctx.lineTo(x1, y1);
+      let x2 = Math.cos(a) * this.R;
+      let y2 = Math.sin(a) * this.R;
+      ctx.lineTo(x2, y2);
+      let x3 = Math.cos(-Math.PI / 3 + a) * this.R;
+      let y3 = Math.sin(-Math.PI / 3 + a) * this.R;
+      ctx.lineTo(x3, y3);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+    }
+    ctx.restore();
+  }}
+
+
+function setup() {
+  setupColors();
+
+  canvas = document.querySelector("#canvas");
+  canvasOffscreen = document.createElement("canvas");
+  ctx = canvas.getContext("2d");
+  ctxOffscreen = canvasOffscreen.getContext("2d");
+
+  window.addEventListener("resize", resize);
+  canvas.addEventListener("click", () => {
+    drawPattern();
+    draw();
+  });
+  let textElement = document.querySelector("#text");
+  textElement.addEventListener("input", input);
+  text = textElement.value;
+
+  resize();
+}
+
+function setupColors() {
+  colors = [
+  [
+  "#ffadad",
+  "#ffd6a5",
+  "#fdffb6",
+  "#caffbf",
+  "#9bf6ff",
+  "#a0c4ff",
+  "#bdb2ff",
+  "#ffc6ff",
+  "#fffffc"],
+
+  [
+  "#9b5de5",
+  "#f15bb5",
+  "#fee440",
+  "#00bbf9",
+  "#00f5d4"],
+
+  [
+  "#004e64",
+  "#00a5cf",
+  "#9fffcb",
+  "#25a18e",
+  "#7ae582"],
+
+  [
+  "#fffcf2",
+  "#ccc5b9",
+  "#403d39",
+  "#252422",
+  "#eb5e28"],
+
+  [
+  "#006ba6",
+  "#0496ff",
+  "#ffbc42",
+  "#d81159",
+  "#8f2d56"],
+
+  [
+  "#ffb5a7",
+  "#fcd5ce",
+  "#f8edeb",
+  "#f9dcc4",
+  "#fec89a"]];
+
+
+}
+
+function getRandomColor() {
+  let len = colors[colorSchemeIndex].length;
+  let randomIndex = Math.floor(Math.random() * len);
+  return colors[colorSchemeIndex][randomIndex];
+}
+
+function input(event) {
+  text = event.target.value;
+  draw();
+}
+
+function resize() {
+  w = canvasOffscreen.width = canvas.width = window.innerWidth;
+  h = canvasOffscreen.height = canvas.height = window.innerHeight;
+
+  ctxOffscreen.lineCap = "round";
+  ctxOffscreen.lineJoin = "round";
+
+  drawPattern();
+  draw();
+}
+
+function setupHexagons() {
+  hexagons = [];
+  let r = config.size;
+  let R = r / Math.cos(Math.PI / 6);
+  let t = r * 2 / Math.sqrt(3);
+  let rows = w / (r * 2) + 1;
+  let cols = h / R;
+  for (let x = 0; x < rows; x++) {
+    for (let y = 0; y < cols; y++) {
+      let xOffset = y % 2 === 0 ? r : 0;
+      let xPixel = r * x * 2 + xOffset;
+      let yPixel = (t / 2 + R) * y;
+      let hexagon = new Hexagon(xPixel, yPixel, R);
+      hexagons.push(hexagon);
+    }
+  }
+}
+
+function drawText(ctx) {
+  ctx.save();
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  let size = w / text.length * 1.5;
+  ctx.font = `${size}px 'Oswald', sans-serif`;
+  ctx.fillText(text, w / 2, h / 2);
+  ctx.restore();
+}
+
+function clearCtx() {
+  ctx.globalCompositeOperation = "source-over";
+  ctx.clearRect(0, 0, w, h);
+}
+
+function clearCtxOffscreen() {
+  ctxOffscreen.globalCompositeOperation = "source-over";
+  ctxOffscreen.clearRect(0, 0, w, h);
+}
+
+function copyFromOffscreenCanvas() {
+  ctx.drawImage(canvasOffscreen, 0, 0);
+}
+
+function drawPattern() {
+  clearCtxOffscreen();
+  let nrOfColorSchemes = colors.length;
+  colorSchemeIndex = Math.floor(Math.random() * nrOfColorSchemes);
+  config.size = Math.random() * 15 + 5;
+  setupHexagons();
+  hexagons.forEach(h => {
+    h.draw(ctxOffscreen);
+  });
+}
+
+function draw() {
+  clearCtx();
+  drawText(ctx);
+  ctx.globalCompositeOperation = "source-in";
+  copyFromOffscreenCanvas();
+}
+
+setup();
+
+// https://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
+function pSBC(p, c0, c1, l) {
+  let r,g,b,P,f,t,h,i = parseInt,m = Math.round,a = typeof c1 == "string";
+  if (typeof p != "number" || p < -1 || p > 1 || typeof c0 != "string" || c0[0] != 'r' && c0[0] != '#' || c1 && !a) return null;
+  if (!this.pSBCr) this.pSBCr = d => {
+    let n = d.length,x = {};
+    if (n > 9) {
+      [r, g, b, a] = d = d.split(","), n = d.length;
+      if (n < 3 || n > 4) return null;
+      x.r = i(r[3] == "a" ? r.slice(5) : r.slice(4)), x.g = i(g), x.b = i(b), x.a = a ? parseFloat(a) : -1;
+    } else {
+      if (n == 8 || n == 6 || n < 4) return null;
+      if (n < 6) d = "#" + d[1] + d[1] + d[2] + d[2] + d[3] + d[3] + (n > 4 ? d[4] + d[4] : "");
+      d = i(d.slice(1), 16);
+      if (n == 9 || n == 5) x.r = d >> 24 & 255, x.g = d >> 16 & 255, x.b = d >> 8 & 255, x.a = m((d & 255) / 0.255) / 1000;else
+      x.r = d >> 16, x.g = d >> 8 & 255, x.b = d & 255, x.a = -1;
+    }return x;};
+  h = c0.length > 9, h = a ? c1.length > 9 ? true : c1 == "c" ? !h : false : h, f = this.pSBCr(c0), P = p < 0, t = c1 && c1 != "c" ? this.pSBCr(c1) : P ? { r: 0, g: 0, b: 0, a: -1 } : { r: 255, g: 255, b: 255, a: -1 }, p = P ? p * -1 : p, P = 1 - p;
+  if (!f || !t) return null;
+  if (l) r = m(P * f.r + p * t.r), g = m(P * f.g + p * t.g), b = m(P * f.b + p * t.b);else
+  r = m((P * f.r ** 2 + p * t.r ** 2) ** 0.5), g = m((P * f.g ** 2 + p * t.g ** 2) ** 0.5), b = m((P * f.b ** 2 + p * t.b ** 2) ** 0.5);
+  a = f.a, t = t.a, f = a >= 0 || t >= 0, a = f ? a < 0 ? t : t < 0 ? a : a * P + t * p : 0;
+  if (h) return "rgb" + (f ? "a(" : "(") + r + "," + g + "," + b + (f ? "," + m(a * 1000) / 1000 : "") + ")";else
+  return "#" + (4294967296 + r * 16777216 + g * 65536 + b * 256 + (f ? m(a * 255) : 0)).toString(16).slice(1, f ? undefined : -2);
+}
\ No newline at end of file
diff --git a/text-mask-over-colorful-cubes/dist/style.css b/text-mask-over-colorful-cubes/dist/style.css
new file mode 100644
index 0000000..50ed47f
--- /dev/null
+++ b/text-mask-over-colorful-cubes/dist/style.css
@@ -0,0 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
+
+body, html {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+  cursor: pointer;
+}
+input {
+  position: absolute;
+}
\ No newline at end of file
diff --git a/text-mask-over-colorful-cubes/license.txt b/text-mask-over-colorful-cubes/license.txt
new file mode 100644
index 0000000..50dd6c3
--- /dev/null
+++ b/text-mask-over-colorful-cubes/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Johan Karlsson (https://codepen.io/DonKarlssonSan/pen/OJNzLVR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/text-mask-over-colorful-cubes/src/index.html b/text-mask-over-colorful-cubes/src/index.html
new file mode 100644
index 0000000..4a5b0c5
--- /dev/null
+++ b/text-mask-over-colorful-cubes/src/index.html
@@ -0,0 +1,2 @@
+<input type="text" id="text" value="MASK"/>
+<canvas id="canvas"></canvas>
\ No newline at end of file
diff --git a/text-mask-over-colorful-cubes/src/script.babel b/text-mask-over-colorful-cubes/src/script.babel
new file mode 100644
index 0000000..f67b7c9
--- /dev/null
+++ b/text-mask-over-colorful-cubes/src/script.babel
@@ -0,0 +1,235 @@
+/*
+  Johan Karlsson, 2020
+  https://twitter.com/DonKarlssonSan
+  MIT License, see Details View
+*/
+
+let config = {};
+let canvas;
+let canvasOffscreen;
+let ctx;
+let ctxOffscreen;
+let w, h;
+let hexagons;
+let colors;
+let text;
+
+class Hexagon {
+  constructor(x, y, R) {
+    this.x = x;
+    this.y = y;
+    this.R = R;
+  }
+  
+  draw(ctx) {
+    ctx.save();
+    ctx.translate(this.x, this.y);
+    let angle = Math.PI * 2 / 3;
+    let nrOfRotations = 3;
+    let a = Math.PI / 6;
+    let color = getRandomColor();
+    for(let rot = 0; rot < nrOfRotations; rot++) {
+      ctx.rotate(angle);
+      let darken = -rot * 0.2;
+      let col = pSBC(darken, color);
+      ctx.strokeStyle = col;
+      ctx.fillStyle = col;
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      let x1 = Math.cos(Math.PI / 3 + a) * this.R;
+      let y1 = Math.sin(Math.PI / 3 + a) * this.R;
+      ctx.lineTo(x1, y1);
+      let x2 = Math.cos(a) * this.R;
+      let y2 = Math.sin(a) * this.R;
+      ctx.lineTo(x2, y2);
+      let x3 = Math.cos(-Math.PI / 3 + a) * this.R;
+      let y3 = Math.sin(-Math.PI / 3 + a) * this.R;
+      ctx.lineTo(x3, y3);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+}
+
+function setup() {
+  setupColors();
+  
+  canvas = document.querySelector("#canvas");
+  canvasOffscreen = document.createElement("canvas");
+  ctx = canvas.getContext("2d");
+  ctxOffscreen = canvasOffscreen.getContext("2d");
+  
+  window.addEventListener("resize", resize);
+  canvas.addEventListener("click", () => {
+    drawPattern();                      
+    draw();
+  });
+  let textElement = document.querySelector("#text");
+  textElement.addEventListener("input", input);
+  text = textElement.value;
+  
+  resize();
+}
+
+function setupColors() {
+  colors = [
+    [
+      "#ffadad",
+      "#ffd6a5",
+      "#fdffb6",
+      "#caffbf",
+      "#9bf6ff",
+      "#a0c4ff",
+      "#bdb2ff",
+      "#ffc6ff",
+      "#fffffc"
+    ],
+    [
+      "#9b5de5",
+      "#f15bb5",
+      "#fee440",
+      "#00bbf9",
+      "#00f5d4"
+    ],
+    [
+      "#004e64",
+      "#00a5cf",
+      "#9fffcb",
+      "#25a18e",
+      "#7ae582"
+    ],
+    [
+      "#fffcf2",
+      "#ccc5b9",
+      "#403d39",
+      "#252422",
+      "#eb5e28"
+    ],
+    [
+      "#006ba6",
+      "#0496ff",
+      "#ffbc42",
+      "#d81159",
+      "#8f2d56"
+    ],
+    [
+      "#ffb5a7",
+      "#fcd5ce",
+      "#f8edeb",
+      "#f9dcc4",
+      "#fec89a"
+    ],
+  ];
+}
+
+function getRandomColor() {
+  let len = colors[colorSchemeIndex].length;
+  let randomIndex = Math.floor(Math.random() * len);
+  return colors[colorSchemeIndex][randomIndex];
+}
+
+function input(event) {
+  text = event.target.value;
+  draw();
+}
+
+function resize() {
+  w = canvasOffscreen.width = canvas.width = window.innerWidth;
+  h = canvasOffscreen.height = canvas.height = window.innerHeight;
+
+  ctxOffscreen.lineCap = "round";
+  ctxOffscreen.lineJoin = "round";
+
+  drawPattern();
+  draw();
+}
+
+function setupHexagons() {
+  hexagons = [];
+  let r = config.size;
+  let R = r / Math.cos(Math.PI / 6);
+  let t = r * 2 / Math.sqrt(3);
+  let rows = w / (r * 2) + 1;
+  let cols = h / R;
+  for(let x = 0; x < rows; x++) {
+    for(let y = 0; y < cols; y++) {
+      let xOffset = y % 2 === 0 ? r : 0;
+      let xPixel = r * x * 2 + xOffset;
+      let yPixel = (t / 2 + R) * y;
+      let hexagon = new Hexagon(xPixel, yPixel, R);
+      hexagons.push(hexagon);
+    }
+  }
+}
+
+function drawText(ctx) {
+  ctx.save();
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  let size = w / text.length * 1.5;
+  ctx.font = `${size}px 'Oswald', sans-serif`;
+  ctx.fillText(text, w / 2, h / 2);
+  ctx.restore();
+}
+
+function clearCtx() {
+  ctx.globalCompositeOperation = "source-over";
+  ctx.clearRect(0, 0, w, h);
+}
+
+function clearCtxOffscreen() {
+  ctxOffscreen.globalCompositeOperation = "source-over";
+  ctxOffscreen.clearRect(0, 0, w, h);
+}
+
+function copyFromOffscreenCanvas() {
+  ctx.drawImage(canvasOffscreen, 0, 0);
+}
+
+function drawPattern() {
+  clearCtxOffscreen();
+  let nrOfColorSchemes = colors.length;
+  colorSchemeIndex = Math.floor(Math.random() * nrOfColorSchemes);
+  config.size = Math.random() * 15 + 5;
+  setupHexagons();
+  hexagons.forEach(h => {
+    h.draw(ctxOffscreen);
+  });
+}
+
+function draw() {
+  clearCtx();
+  drawText(ctx);
+  ctx.globalCompositeOperation = "source-in";
+  copyFromOffscreenCanvas();
+}
+
+setup();
+
+// https://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
+function pSBC(p,c0,c1,l) {
+    let r,g,b,P,f,t,h,i=parseInt,m=Math.round,a=typeof(c1)=="string";
+    if(typeof(p)!="number"||p<-1||p>1||typeof(c0)!="string"||(c0[0]!='r'&&c0[0]!='#')||(c1&&!a))return null;
+    if(!this.pSBCr)this.pSBCr=(d)=>{
+        let n=d.length,x={};
+        if(n>9){
+            [r,g,b,a]=d=d.split(","),n=d.length;
+            if(n<3||n>4)return null;
+            x.r=i(r[3]=="a"?r.slice(5):r.slice(4)),x.g=i(g),x.b=i(b),x.a=a?parseFloat(a):-1
+        }else{
+            if(n==8||n==6||n<4)return null;
+            if(n<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(n>4?d[4]+d[4]:"");
+            d=i(d.slice(1),16);
+            if(n==9||n==5)x.r=d>>24&255,x.g=d>>16&255,x.b=d>>8&255,x.a=m((d&255)/0.255)/1000;
+            else x.r=d>>16,x.g=d>>8&255,x.b=d&255,x.a=-1
+        }return x};
+    h=c0.length>9,h=a?c1.length>9?true:c1=="c"?!h:false:h,f=this.pSBCr(c0),P=p<0,t=c1&&c1!="c"?this.pSBCr(c1):P?{r:0,g:0,b:0,a:-1}:{r:255,g:255,b:255,a:-1},p=P?p*-1:p,P=1-p;
+    if(!f||!t)return null;
+    if(l)r=m(P*f.r+p*t.r),g=m(P*f.g+p*t.g),b=m(P*f.b+p*t.b);
+    else r=m((P*f.r**2+p*t.r**2)**0.5),g=m((P*f.g**2+p*t.g**2)**0.5),b=m((P*f.b**2+p*t.b**2)**0.5);
+    a=f.a,t=t.a,f=a>=0||t>=0,a=f?a<0?t:t<0?a:a*P+t*p:0;
+    if(h)return"rgb"+(f?"a(":"(")+r+","+g+","+b+(f?","+m(a*1000)/1000:"")+")";
+    else return"#"+(4294967296+r*16777216+g*65536+b*256+(f?m(a*255):0)).toString(16).slice(1,f?undefined:-2)
+}
\ No newline at end of file
diff --git a/text-mask-over-colorful-cubes/src/style.css b/text-mask-over-colorful-cubes/src/style.css
new file mode 100644
index 0000000..50ed47f
--- /dev/null
+++ b/text-mask-over-colorful-cubes/src/style.css
@@ -0,0 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
+
+body, html {
+  margin: 0;
+}
+
+canvas {
+  display: block;
+  cursor: pointer;
+}
+input {
+  position: absolute;
+}
\ No newline at end of file
diff --git a/textarea-with-syntax-highlighting/LICENSE.txt b/textarea-with-syntax-highlighting/LICENSE.txt
new file mode 100644
index 0000000..ab6f69d
--- /dev/null
+++ b/textarea-with-syntax-highlighting/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Daniel Schulz (https://codepen.io/iamschulz/pen/ZEXyqPr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/textarea-with-syntax-highlighting/README.md b/textarea-with-syntax-highlighting/README.md
new file mode 100644
index 0000000..4e17786
--- /dev/null
+++ b/textarea-with-syntax-highlighting/README.md
@@ -0,0 +1,4 @@
+# Textarea with Syntax Highlighting
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/iamschulz/pen/ZEXyqPr](https://codepen.io/iamschulz/pen/ZEXyqPr).
+
diff --git a/textarea-with-syntax-highlighting/dist/index.html b/textarea-with-syntax-highlighting/dist/index.html
new file mode 100644
index 0000000..39238cc
--- /dev/null
+++ b/textarea-with-syntax-highlighting/dist/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Textarea with Syntax Highlighting</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>A Markdown Editor in a Textarea</h1>
+
+<main>
+<div class="plain">
+	<textarea class="plain__editor" data-el="input"># test
+This is a *test*
+With a [Link](https://iamschulz.com)!</textarea>
+	<pre aria-hidden="true" class="plain__highlights"><code data-el="highlight" class="markdown"></code></pre>
+</div>
+<div class="text">
+	<div data-el="output"></div>
+</div>
+</main>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/textarea-with-syntax-highlighting/dist/script.js b/textarea-with-syntax-highlighting/dist/script.js
new file mode 100644
index 0000000..170151d
--- /dev/null
+++ b/textarea-with-syntax-highlighting/dist/script.js
@@ -0,0 +1,61 @@
+const inputEl = document.querySelector('[data-el="input"]');
+		const highlightEl = document.querySelector('[data-el="highlight"]');
+		const outputEl = document.querySelector('[data-el="output"]');
+
+const converter = new showdown.Converter({
+	metadata: true,
+	parseImgDimensions: true,
+	strikethrough: true,
+	tables: true,
+	ghCodeBlocks: true,
+	smoothLivePreview: true,
+	simpleLineBreaks: true,
+	emoji: true,
+});
+
+const resizeTextarea = (textArea) => {
+	if (!textArea) {
+		return;
+	}
+
+
+	window.requestAnimationFrame(() => {
+		textArea.style.height = 0;
+		if (textArea.scrollHeight > 0) {
+			textArea.style.height = `${textArea.scrollHeight + 2}px`;
+		}
+	});
+};
+
+const highlight = () => {
+	window.requestAnimationFrame(() => {
+		const highlighted = hljs.highlight(
+			"markdown",
+			inputEl.value
+		).value;
+		highlightEl.innerHTML = highlighted;
+	});
+};
+
+const updateReadonly = () => {
+	window.requestAnimationFrame(() => {
+		const htmlContent = converter.makeHtml(inputEl.value);
+		outputEl.innerHTML = htmlContent;
+	});
+};
+
+const init = () => {
+	inputEl.addEventListener("input", () => {
+		resizeTextarea(inputEl);
+		highlight();
+		updateReadonly();
+	});
+	inputEl.setAttribute('data-initialized', true);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+	init();
+	resizeTextarea(inputEl);
+	highlight();
+	updateReadonly();
+})
\ No newline at end of file
diff --git a/textarea-with-syntax-highlighting/dist/style.css b/textarea-with-syntax-highlighting/dist/style.css
new file mode 100644
index 0000000..acdac8c
--- /dev/null
+++ b/textarea-with-syntax-highlighting/dist/style.css
@@ -0,0 +1,52 @@
+main {
+	display: flex;
+}
+
+.plain,
+.text {
+	flex: 1 0 20rem;
+	position: relative;
+}
+
+[data-el="input"] {
+	border-width: 1px;
+	color: black;
+	caret-color: black;
+	white-space: break-spaces;
+	word-break: break-word;
+	resize: vertical;
+}
+
+[data-el="input"][data-initialized="true"] {
+	color: transparent;
+	resize: none;
+	overflow: hidden;
+}
+
+[data-el="highlight"] {
+	font-family: inherit;
+	line-height: inherit;
+	font-size: inherit;
+	margin: 0;
+	padding: 0;
+	white-space: break-spaces;
+	word-break: break-word;
+}
+
+.plain__highlights {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 90%;
+	border: 1px solid transparent;
+	pointer-events: none;
+}
+
+.plain__editor, .plain__highlights {
+	width: 90%;
+	font-size: 1.1rem;
+	font-family: monospace;
+	margin: 0;
+	padding: 0.7rem 1.4ch;
+	line-height: 1.313;
+}
\ No newline at end of file
diff --git a/textarea-with-syntax-highlighting/src/index.html b/textarea-with-syntax-highlighting/src/index.html
new file mode 100644
index 0000000..33217ae
--- /dev/null
+++ b/textarea-with-syntax-highlighting/src/index.html
@@ -0,0 +1,13 @@
+<h1>A Markdown Editor in a Textarea</h1>
+
+<main>
+<div class="plain">
+	<textarea class="plain__editor" data-el="input"># test
+This is a *test*
+With a [Link](https://iamschulz.com)!</textarea>
+	<pre aria-hidden="true" class="plain__highlights"><code data-el="highlight" class="markdown"></code></pre>
+</div>
+<div class="text">
+	<div data-el="output"></div>
+</div>
+</main>
\ No newline at end of file
diff --git a/textarea-with-syntax-highlighting/src/script.js b/textarea-with-syntax-highlighting/src/script.js
new file mode 100644
index 0000000..170151d
--- /dev/null
+++ b/textarea-with-syntax-highlighting/src/script.js
@@ -0,0 +1,61 @@
+const inputEl = document.querySelector('[data-el="input"]');
+		const highlightEl = document.querySelector('[data-el="highlight"]');
+		const outputEl = document.querySelector('[data-el="output"]');
+
+const converter = new showdown.Converter({
+	metadata: true,
+	parseImgDimensions: true,
+	strikethrough: true,
+	tables: true,
+	ghCodeBlocks: true,
+	smoothLivePreview: true,
+	simpleLineBreaks: true,
+	emoji: true,
+});
+
+const resizeTextarea = (textArea) => {
+	if (!textArea) {
+		return;
+	}
+
+
+	window.requestAnimationFrame(() => {
+		textArea.style.height = 0;
+		if (textArea.scrollHeight > 0) {
+			textArea.style.height = `${textArea.scrollHeight + 2}px`;
+		}
+	});
+};
+
+const highlight = () => {
+	window.requestAnimationFrame(() => {
+		const highlighted = hljs.highlight(
+			"markdown",
+			inputEl.value
+		).value;
+		highlightEl.innerHTML = highlighted;
+	});
+};
+
+const updateReadonly = () => {
+	window.requestAnimationFrame(() => {
+		const htmlContent = converter.makeHtml(inputEl.value);
+		outputEl.innerHTML = htmlContent;
+	});
+};
+
+const init = () => {
+	inputEl.addEventListener("input", () => {
+		resizeTextarea(inputEl);
+		highlight();
+		updateReadonly();
+	});
+	inputEl.setAttribute('data-initialized', true);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+	init();
+	resizeTextarea(inputEl);
+	highlight();
+	updateReadonly();
+})
\ No newline at end of file
diff --git a/textarea-with-syntax-highlighting/src/style.css b/textarea-with-syntax-highlighting/src/style.css
new file mode 100644
index 0000000..e6b6ae5
--- /dev/null
+++ b/textarea-with-syntax-highlighting/src/style.css
@@ -0,0 +1,52 @@
+main {
+	display: flex;
+}
+
+.plain,
+.text {
+	flex: 1 0 20rem;
+	position: relative;
+}
+
+[data-el="input"] {
+	border-width: 1px;
+	color: black;
+	caret-color: black;
+	white-space: break-spaces;
+	word-break: break-word;
+	resize: vertical;
+}
+
+[data-el="input"][data-initialized="true"] {
+	color: transparent;
+	resize: none;
+	overflow: hidden;
+}
+
+[data-el="highlight"] {
+	font-family: inherit;
+	line-height: inherit;
+	font-size: inherit;
+	margin: 0;
+	padding: 0;
+	white-space: break-spaces;
+	word-break: break-word;
+}
+
+.plain__highlights {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 90%;
+	border: 1px solid transparent;
+	pointer-events: none;
+}
+
+.plain__editor, .plain__highlights {
+	width: 90%;
+	font-size: 1.1rem;
+	font-family: monospace;
+	margin: 0;
+	padding: 0.7rem 1.4ch;
+	line-height: 1.313;
+}
diff --git a/texture-challengepen-92020/README.markdown b/texture-challengepen-92020/README.markdown
new file mode 100644
index 0000000..58a69d9
--- /dev/null
+++ b/texture-challengepen-92020/README.markdown
@@ -0,0 +1,11 @@
+# Texture Challenge - Pen #9 - 2020
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/rickyeckhardt/pen/abOOXbv](https://codepen.io/rickyeckhardt/pen/abOOXbv).
+
+ I wanted to do something fun for the Codepen challenge this week. I went with a wedding invite layout. 
+
+It's a fun layout with loads of color, a few images overlaid, and some good typography. 
+
+I was inspired by a Dribbble by Bailey Sullivan. 
+
+https://dribbble.com/shots/2931185-Peaches-Pandas
+
diff --git a/texture-challengepen-92020/dist/index.html b/texture-challengepen-92020/dist/index.html
new file mode 100644
index 0000000..505beb3
--- /dev/null
+++ b/texture-challengepen-92020/dist/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Texture Challenge - Pen #9 - 2020</title>
+  <script src="https://kit.fontawesome.com/e2ac9cc532.js" crossorigin="anonymous"></script><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="contents">
+    <div class="one">
+      <h2>Together with their parents</h2>
+      <h1>Kyrie Anne Johnson</h1>
+      <h1 class="large-font gold-gradient accent-font">&</h1>
+      <h1>Ricky Eugene Eckhardt</h1>
+    </div>
+    <div class="two">
+      <h2>request the pleasure of your company </h2>
+      <h2>to celebrate their marriage</h2>
+    </div>
+    <div class="three">
+      <h1>FRIDAY,</h1>
+      <h1>JULY</h1>
+      <div class="date accent-font">
+        <div class="year-one">
+          <h2>2</h2>
+          <h2>0</h2>
+        </div>
+        <div class="day">
+          <h2>19</h2>
+        </div>
+        <div class="year-two">
+          <h2>2</h2>
+          <h2>0</h2>
+        </div>
+      </div>
+      <h2>at 4 o'clock</h2>
+    </div>
+    <div class="four">
+      <h1>Botanical </h1>
+      <h1>Gardens</h1>
+      <h2>6700 Azalea Garden Rd</h2>
+      <h2>Norfolk, VA </h2>
+      <h2>23518</h2>
+    </div>
+    <div class="five">
+      <h1>DINNER + DRINKS TO FOLLOW</h1>
+      <h1><i class="fas fa-utensils"></i>&nbsp;&nbsp;+&nbsp;&nbsp;<i class="fas fa-cocktail"></i></h1>
+      <h2>Kindly respond by July 1</h2>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/texture-challengepen-92020/dist/style.css b/texture-challengepen-92020/dist/style.css
new file mode 100644
index 0000000..209eebf
--- /dev/null
+++ b/texture-challengepen-92020/dist/style.css
@@ -0,0 +1,150 @@
+@import url("https://fonts.googleapis.com/css?family=Raleway:300,500&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: #534551;
+  font-family: "Raleway", sans-serif;
+  zoom: 75%;
+}
+
+h1, h2 {
+  color: #4e4b43;
+}
+
+h1 {
+  font-weight: 500;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  letter-spacing: 4px;
+}
+
+h2 {
+  font-weight: 300;
+  font-size: 1rem;
+  letter-spacing: 2px;
+}
+
+.large-font {
+  font-size: 2.5rem;
+}
+
+.gold-gradient {
+  background: -webkit-linear-gradient(#f5d0a9, #c58568);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.accent-font {
+  font-family: "Playfair Display", serif;
+}
+
+.one h2 {
+  margin-bottom: 40px;
+}
+
+.one h1:nth-of-type(2) {
+  margin-top: 10px;
+}
+
+.two {
+  line-height: 30px;
+  padding: 20px 0;
+}
+
+.one {
+  padding-bottom: 25px;
+}
+
+.two, .three, .four, .five {
+  padding: 25px 0;
+}
+
+.date {
+  display: grid;
+  width: 100px;
+  margin: 10px auto;
+  grid-template-areas: "year-one day year-two";
+}
+.date h2 {
+  color: #c58568;
+  font-weight: bold;
+}
+.date .day h2 {
+  font-size: 2.5rem;
+  line-height: 2.5rem;
+}
+
+.four h1:nth-of-type(1), .four h1:nth-of-type(2) {
+  color: #c58568;
+  font-weight: bold;
+}
+
+.four h1:nth-of-type(2) {
+  margin-bottom: 20px;
+}
+
+.five h1 {
+  font-size: 1.25rem;
+}
+
+.five h1:nth-of-type(2) {
+  font-size: 2rem;
+  color: #c58568;
+  margin: 30px 0;
+}
+
+.five h2 {
+  font-size: 1rem;
+}
+
+/* LAYOUT */
+.container {
+  box-sizing: border-box;
+  width: 850px;
+  height: 1200px;
+  margin: 20px auto;
+  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-rawpixel-id-594540-png.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/paperboard-texture_95678-72.jpg");
+  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
+}
+
+.contents {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 0.2fr 0.5fr 1fr;
+  grid-template-areas: "one one" "two two" "three four" "five five";
+  padding-top: 300px;
+  text-align: center;
+  width: 60%;
+  margin: 0 auto;
+}
+
+.one {
+  grid-area: one;
+}
+
+.two {
+  grid-area: two;
+  border-top: 2px solid #cccac4;
+}
+
+.three {
+  grid-area: three;
+  border-top: 2px solid #cccac4;
+  border-bottom: 2px solid #cccac4;
+}
+
+.four {
+  grid-area: four;
+  border-top: 2px solid #cccac4;
+  border-left: 2px solid #cccac4;
+  border-bottom: 2px solid #cccac4;
+}
+
+.five {
+  grid-area: five;
+}
\ No newline at end of file
diff --git a/texture-challengepen-92020/license.txt b/texture-challengepen-92020/license.txt
new file mode 100644
index 0000000..646812a
--- /dev/null
+++ b/texture-challengepen-92020/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Ricky Eckhardt (https://codepen.io/rickyeckhardt/pen/abOOXbv)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/texture-challengepen-92020/src/index.pug b/texture-challengepen-92020/src/index.pug
new file mode 100644
index 0000000..2e0be6b
--- /dev/null
+++ b/texture-challengepen-92020/src/index.pug
@@ -0,0 +1,37 @@
+.container
+  .contents
+    .one
+      h2 Together with their parents
+      h1 Kyrie Anne Johnson
+      h1.large-font.gold-gradient.accent-font &
+      h1 Ricky Eugene Eckhardt
+    .two
+      h2 request the pleasure of your company 
+      h2 to celebrate their marriage
+    .three
+      h1 FRIDAY,
+      h1 JULY
+      .date.accent-font
+        .year-one
+          h2 2
+          h2 0
+        .day
+          h2 19
+        .year-two
+          h2 2
+          h2 0
+      h2 at 4 o'clock
+    .four
+      h1 Botanical 
+      h1 Gardens
+      h2 6700 Azalea Garden Rd
+      h2 Norfolk, VA 
+      h2 23518
+    .five
+      h1 DINNER + DRINKS TO FOLLOW
+      h1
+        i.fas.fa-utensils
+        | &nbsp;&nbsp;+&nbsp;&nbsp;
+        i.fas.fa-cocktail
+      h2 Kindly respond by July 1
+  
\ No newline at end of file
diff --git a/texture-challengepen-92020/src/style.sass b/texture-challengepen-92020/src/style.sass
new file mode 100644
index 0000000..f6bb8a9
--- /dev/null
+++ b/texture-challengepen-92020/src/style.sass
@@ -0,0 +1,138 @@
+@import url('https://fonts.googleapis.com/css?family=Raleway:300,500&display=swap')
+@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap')
+
+$bg-color: #534551
+$dark: #4e4b43
+$lightgold: rgba(245,208,169,1)
+$darkgold: rgba(197,133,104,1)
+$font-main: 'Raleway', sans-serif
+$font-accent: 'Playfair Display', serif
+
+
+* 
+  margin: 0
+  padding: 0
+  box-sizing: border-box
+
+body 
+  background: $bg-color
+  font-family: $font-main
+  zoom: 75%
+
+
+h1, h2
+  color: $dark
+  
+h1
+  font-weight: 500
+  text-transform: uppercase
+  font-size: 1.5rem
+  letter-spacing: 4px
+  
+h2
+  font-weight: 300
+  font-size: 1rem
+  letter-spacing: 2px
+  
+.large-font
+  font-size: 2.5rem
+  
+.gold-gradient
+  background: -webkit-linear-gradient($lightgold, $darkgold)
+  -webkit-background-clip: text
+  -webkit-text-fill-color: transparent
+  
+.accent-font
+  font-family: 'Playfair Display', serif
+  
+.one h2 
+  margin-bottom: 40px 
+
+.one h1:nth-of-type(2)
+  margin-top: 10px
+  
+.two 
+  line-height: 30px
+  padding: 20px 0
+  
+.one
+  padding-bottom: 25px
+  
+.two, .three, .four, .five
+  padding: 25px 0
+  
+.date
+  display: grid
+  width: 100px
+  margin: 10px auto
+  grid-template-areas: "year-one day year-two"
+  
+  & h2
+    color: rgba(197,133,104,1)
+    font-weight: bold
+  
+  & .day h2
+    font-size: 2.5rem
+    line-height: 2.5rem
+  
+.four h1:nth-of-type(1), .four h1:nth-of-type(2)
+  color: $darkgold
+  font-weight: bold
+  
+.four h1:nth-of-type(2)
+  margin-bottom: 20px
+  
+.five h1
+  font-size: 1.25rem
+  
+.five h1:nth-of-type(2)
+  font-size: 2rem
+  color: $darkgold
+  margin: 30px 0
+  
+.five h2
+  font-size: 1rem
+
+/* LAYOUT */
+
+.container
+  box-sizing: border-box
+  width: 850px
+  height: 1200px
+  margin: 20px auto
+  background-image:  url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-rawpixel-id-594540-png.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/paperboard-texture_95678-72.jpg") 
+  box-shadow: 10px 10px 20px rgba(0,0,0,.3)
+  
+.contents
+  display: grid
+  grid-template-columns: 1fr 1fr
+  grid-template-rows: 1fr .2fr .5fr 1fr
+  grid-template-areas: "one one" "two two" "three four" "five five"
+  padding-top: 300px
+  text-align: center
+  width: 60%
+  margin: 0 auto
+
+.one
+  grid-area: one
+  
+.two
+  grid-area: two
+  border-top: 2px solid lighten($dark, 50%)
+
+.three
+  grid-area: three
+  border-top: 2px solid lighten($dark, 50%)
+  border-bottom: 2px solid lighten($dark, 50%)
+
+.four
+  grid-area: four
+  border-top: 2px solid lighten($dark, 50%)
+  border-left: 2px solid lighten($dark, 50%)
+  border-bottom: 2px solid lighten($dark, 50%)
+  
+.five
+  grid-area: five
+ 
+  
+  
\ No newline at end of file
diff --git a/the-cat-god/README.markdown b/the-cat-god/README.markdown
new file mode 100644
index 0000000..fd84783
--- /dev/null
+++ b/the-cat-god/README.markdown
@@ -0,0 +1,4 @@
+# The Cat God
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/chenxinnn/pen/VJyNmB](https://codepen.io/chenxinnn/pen/VJyNmB).
+
+ 
\ No newline at end of file
diff --git a/the-cat-god/dist/index.html b/the-cat-god/dist/index.html
new file mode 100644
index 0000000..c95ebd5
--- /dev/null
+++ b/the-cat-god/dist/index.html
@@ -0,0 +1,343 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>The Cat God</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="svgWrap">
+<svg version="1.1" id="cat-god" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40vw" height="30.4vw" viewBox="0 0 172.9 131.4" style="enable-background:new 0 0 172.9 131.4;" xml:space="preserve"
+	>
+<style type="text/css">
+	.st0{fill:#E9E4EA;}
+	.st1{fill:#040E41;}
+	.st2{fill:#EDE8E2;}
+	.st3{fill:#FDD64A;}
+	.st4{fill:#221714;}
+	.st5{fill:#060001;}
+	.st6{fill:#D4394F;}
+	.st7{fill:#D43855;}
+	.st8{fill:#F7B3C2;}
+	.st9{fill:#ED71A3;}
+  .st10{fill:#CFCAE2;}
+  .st11{fill:#ffffff;}
+
+</style>
+<defs>
+  <filter id="goo" color-interpolation-filters="sRGB">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
+      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 17 -10" result="cm" />
+  </filter>
+
+  <!-- <filter id = "lightning">
+      <feSpecularLighting result="specOut"
+          specularExponent="100" lighting-color="#D4394E">
+        <fePointLight id="fePointLight" x="86.3" y="15.8" z="10"/>
+      </feSpecularLighting>
+      <feComposite in="SourceGraphic" in2="specOut"
+          operator="arithmetic" k1="1" k2="1" k3="1" k4="0"/>
+  </filter> -->
+
+  <filter id="breath" x="-50%" y="-50%" width="200%" height="200%">
+      <feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="2" result="turbulence"/>
+      <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="R" yChannelSelector="G"/>
+  </filter>
+
+  <circle id="bubbleL1" class="st1" cx="122.8" cy="55" r="4"/>
+  <circle id="bubbleL2" class="st1" cx="141.9" cy="52" r="3.5"/>
+  <circle id="bubbleL3" class="st1" cx="161" cy="59" r="3.5"/>
+  <circle id="bubbleR1" class="st1" cx="50" cy="55" r="4"/>
+  <circle id="bubbleR2" class="st1" cx="31" cy="52" r="3.5"/>
+  <circle id="bubbleR3" class="st1" cx="12" cy="59" r="3.5"/>
+  <!-- <circle id="bubble-l-3" class="st9" cx="150" cy="55" r="4"/> -->
+  <circle id="breathL" opacity="0.2" class="st11" cx="95" cy="90" r="3.5"/>
+  <circle id="breathR" opacity="0.2" class="st11" cx=76 cy="90" r="3"/>
+
+  <path id="eyeSKin-l-close" class="st4" d="M34.5,57.6c-4.5,0-9.9,3.7-10,10c0,6.2,5.4,9.2,10,9.2c5.3,0,10.1-2.6,10-9.2
+  C44.6,61.4,39.5,57.6,34.5,57.6z"/>
+  <path id="eyeSKin-r-close" class="st4" d="M138.8,57.6c-4.5,0-9.9,3.7-10,10c0,6.2,5.4,9.2,10,9.2c5.3,0,10.1-2.6,10-9.2
+  C148.9,61.4,143.7,57.6,138.8,57.6z"/>
+</defs>
+
+
+<path id="bg" class="st0" d="M162.1,131.4H10.8c-6,0-10.8-4.8-10.8-10.8V10.8C0,4.8,4.8,0,10.8,0h151.2c6,0,10.8,4.8,10.8,10.8
+	v109.8C172.9,126.6,168,131.4,162.1,131.4z"/>
+<path id="ec-r" class="st1" d="M150.7,55.7c-4.2-1-6-6.4-3.5-10.1c0.6-0.9-6.5,2.3-9.8,5.2c-2.3,2-5,2.8-7.2,1.4
+	c-2.3-1.5-1.8-3.9-1.5-6.2c0.2-1.7,0.5-3.4,0.7-5.1c-0.8-0.1-1.4,0-1.9,0.4c0,0-16.7,13.9-9.5,40.5c0.7,2.7,1.8,5.4,4.2,7.2
+	c-1.4-5.6,2.4-6.9,6.4-6.4c2.6,0.3,5.1,0.6,7.7,0.8c7.2,0.4,13.4-2.1,17.9-7.8c3.8-4.8,6.6-10.4,10-15.5c2.4-3.5,5-6.8,7.6-10
+	c0.3-0.4,0.7-0.8,1.1-1.2v-1.4c-3.4,2.1-6.9,4.3-10.3,6.4C158.9,56.1,154.8,56.7,150.7,55.7z"/>
+<path id="ec-l" class="st1" d="M0.9,49.9c2.6,3.3,5.3,6.6,7.6,10c3.4,5.1,6.2,10.7,10,15.5c4.5,5.7,10.7,8.2,17.9,7.8
+	c2.6-0.1,5.1-0.4,7.7-0.8c3.9-0.5,7.8,0.8,6.4,6.4c2.4-1.8,3.4-4.5,4.2-7.2c7.2-26.6-9.5-40.5-9.5-40.5c-0.4-0.4-1.1-0.4-1.9-0.4
+	c0.2,1.7,0.5,3.4,0.7,5.1c0.3,2.3,0.8,4.7-1.5,6.2c-2.1,1.4-4.8,0.6-7.2-1.4c-3.4-2.9-10.4-6.1-9.8-5.2c2.5,3.7,0.7,9.1-3.5,10.1
+	c-4.2,1-8.2,0.4-11.9-2C6.7,51.6,3.4,49.5,0,47.5V49C0.3,49.3,0.6,49.6,0.9,49.9z"/>
+
+  <g id="eye-r">
+	
+		<ellipse transform="matrix(0.9871 -0.1602 0.1602 0.9871 -9.0334 23.1013)" class="st2" cx="138.8" cy="67.6" rx="12.4" ry="12.4"/>
+	<g>
+		<path class="st3" d="M138.8,76.7c-5,0-9.2-4.1-9.2-9.2c0-5,4.1-9.2,9.2-9.2c5,0,9.2,4.1,9.2,9.2C147.9,72.6,143.8,76.7,138.8,76.7
+			z"/>
+		<g>
+			<path class="st4" d="M138.8,59.9c4.3,0,7.7,3.5,7.7,7.7s-3.5,7.7-7.7,7.7c-4.3,0-7.7-3.5-7.7-7.7S134.5,59.9,138.8,59.9
+				 M138.8,57c-5.9,0-10.6,4.7-10.6,10.6c0,5.9,4.7,10.6,10.6,10.6c5.9,0,10.6-4.7,10.6-10.6C149.4,61.7,144.6,57,138.8,57L138.8,57
+				z"/>
+		</g>
+	</g>
+	<g id="eye-r-0">
+		<path class="st5" d="M135.8,67.6c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9c0-1.6-1.3-2.9-2.9-2.9
+			C137.2,64.7,135.8,66,135.8,67.6z"/>
+		<path class="st4" d="M138.8,71c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4s3.4,1.5,3.4,3.4C142.2,69.5,140.6,71,138.8,71z
+			 M138.8,65.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.3,1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4C141.2,66.2,140.1,65.1,138.8,65.1z"/>
+	</g>
+</g>
+<path class="st6" d="M99.1,34.3c-0.7,0.8-1,1.2-1.4,1.6c-3.9,4.1-5.4,8.8-4.4,14.4c0.5,2.6,0.9,5.2,1.1,7.9c0.1,1.4-0.2,2.8-0.7,4.1
+	c-1.2,3.1-4.1,3.6-6.4,1.1c-0.3-0.3-0.5-0.6-0.9-1.1c-0.9,2.2-2.5,3-4.6,2.5c-2.1-0.5-3.2-2.1-3.4-4.1c-0.1-2,0-4,0.3-5.9
+	c0.5-3.8,1-7.7-0.4-11.4c-0.7-1.9-1.9-3.6-3-5.4c-0.5-0.8-1.1-1.5-1.7-2.2c0.2-0.2,0.3-0.3,0.5-0.5c1.2,1.2,2.5,2.3,3.5,3.7
+	c3,4.3,3.9,9,2.9,14.2c-0.3,1.6-0.5,3.3-0.8,4.9c0,0.2-0.1,0.5-0.1,0.7c0,2.1,1,3.8,2.4,4.1c1.5,0.2,2.2-0.6,2.6-1.8
+	c0.7-2.3,0-4-2-4.8c-0.2-0.1-0.4-0.2-0.7-0.4c2.2-0.7,3.2,0.1,4.3,3.6c0.8-2.1,1.4-3.9,3.6-4c-0.7,1.3-1.5,2.5-1.9,3.8
+	c-0.5,1.5,0.8,3.2,2.2,3.5c1.4,0.3,2.5-0.6,2.8-2.5c0.2-1.1,0.1-2.2,0-3.3c-0.4-2.8-0.7-5.6-1.3-8.4C90.7,44.1,94.4,36.3,99.1,34.3z
+	"/>
+<path id="eb-l-2" class="st3" d="M21.9,44.9c0-0.1-0.1-0.3-0.1-0.4c0,0,0,0,0-0.1c-1.5-3.2,0.4-5.5,4.6-4c1.4,0.5,2.4,0.8,3.1,1.1
+	c0.3,0.1,0.7,0.2,1,0.4c1.1,0.5,2,1.2,2.9,2c0,0,0,0,0,0c2.7,2.1,7.6,2.8,7.3-0.2c0,0,0,0,0,0c-0.2-1.2-0.3-2.4-0.4-3.5
+	c-0.5-9.3-5.2-15.6-13.6-19.4c-4.8-2.2-12.1-0.2-15.8,3.9c-3,3.3-3.8,7.5-4.2,11.7C6.1,43,8.7,49.7,15.1,52c4.1,1.5,7.4-0.5,7.4-4.8
+	C22.5,46.4,22.1,45.6,21.9,44.9z"/>
+<g id="eye-dot-l">
+	<path id="eye-dot-l-2" class="st6" d="M27.7,27.3c0,1.3-1.1,2.4-2.4,2.4c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4
+		C26.7,24.9,27.7,26,27.7,27.3z"/>
+	<path id="eye-dot-l-5" class="st6" d="M34.2,34.9c0,1.4-1.1,2.5-2.5,2.5c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5
+		C33.1,32.4,34.2,33.5,34.2,34.9z"/>
+	<circle id="eye-dot-l-1" class="st6" cx="13.7" cy="30.6" r="2.5"/>
+	<path id="eye-dot-l-3" class="st6" d="M23,34.3c0,1.2-0.9,2.1-2.1,2.1c-1.2,0-2.1-0.9-2.1-2.1c0-1.2,0.9-2.1,2.1-2.1
+		C22.1,32.2,23,33.1,23,34.3z"/>
+	<circle id="eye-dot-l-4" class="st6" cx="13.7" cy="42.3" r="2.5"/>
+</g>
+<path id="eb-r-2" class="st3" d="M165.9,36.4c-0.4-4.2-1.1-8.4-4.2-11.7c-3.7-4.1-11-6.1-15.8-3.9c-8.4,3.8-13.1,10-13.6,19.4
+	c-0.1,1.2-0.2,2.3-0.4,3.5c0,0,0,0,0,0c-0.3,3,4.6,2.3,7.3,0.2c0,0,0,0,0,0c0.9-0.8,1.8-1.5,2.9-2c0.3-0.1,0.7-0.3,1-0.4
+	c0.8-0.3,1.7-0.6,3.1-1.1c4.1-1.5,6,0.8,4.6,4c0,0,0,0,0,0.1c0,0.1,0,0.3-0.1,0.4c-0.3,0.8-0.7,1.5-0.7,2.3c0,4.4,3.3,6.3,7.4,4.8
+	C164,49.7,166.5,43,165.9,36.4z"/>
+<g id="eye-dot-r">
+	<path id="eye-dot-r-2" class="st6" d="M144.9,27.3c0,1.3,1.1,2.4,2.4,2.4c1.3,0,2.4-1.1,2.4-2.4c0-1.3-1.1-2.4-2.4-2.4
+		C146,24.9,144.9,26,144.9,27.3z"/>
+	<path id="eye-dot-r-5" class="st6" d="M138.4,34.9c0,1.4,1.1,2.5,2.5,2.5c1.4,0,2.5-1.1,2.5-2.5c0-1.4-1.1-2.5-2.5-2.5
+		C139.6,32.4,138.4,33.5,138.4,34.9z"/>
+	<circle id="eye-dot-r-1" class="st6" cx="159" cy="30.6" r="2.5"/>
+	<path id="eye-dot-r-3" class="st6" d="M149.6,34.3c0,1.2,0.9,2.1,2.1,2.1c1.2,0,2.1-0.9,2.1-2.1c0-1.2-0.9-2.1-2.1-2.1
+		C150.6,32.2,149.6,33.1,149.6,34.3z"/>
+	<circle id="eye-dot-r-4" class="st6" cx="159" cy="42.3" r="2.5"/>
+</g>
+<g id="eye-l">
+	
+	<ellipse transform="matrix(0.2298 -0.9732 0.9732 0.2298 -39.2087 85.6189)" class="st2" cx="34.5" cy="67.6" rx="12.4" ry="12.4"/>
+	<g id="eyeBall-l">
+		<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -37.6855 44.1805)" class="st3" cx="34.5" cy="67.6" rx="9.2" ry="9.2"/>
+		<g>
+			<path class="st4" d="M34.5,59.9c4.3,0,7.7,3.5,7.7,7.7c0,4.3-3.5,7.7-7.7,7.7c-4.3,0-7.7-3.5-7.7-7.7
+				C26.8,63.3,30.2,59.9,34.5,59.9 M34.5,57c-5.9,0-10.6,4.7-10.6,10.6c0,5.9,4.7,10.6,10.6,10.6c5.9,0,10.6-4.7,10.6-10.6
+				C45.1,61.7,40.3,57,34.5,57L34.5,57z"/>
+		</g>
+	
+    <g id="eye-l-0">
+      <path class="st5" d="M37.4,67.6c0,1.6-1.3,2.9-2.9,2.9c-1.6,0-2.9-1.3-2.9-2.9c0-1.6,1.3-2.9,2.9-2.9C36.1,64.7,37.4,66,37.4,67.6
+        z"/>
+      <path class="st4" d="M34.5,71c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C37.9,69.5,36.4,71,34.5,71z
+        M34.5,65.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.3,1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4C36.9,66.2,35.8,65.1,34.5,65.1z"/>
+    </g>
+  </g>
+</g>
+<g id="sun">
+	<circle id="sun0" opacity=1 class="st7" cx="86.3" cy="15.8" r="12.1"/>
+	<path id="sun1" class="st8" d="M86.3,28.8c-7.2,0-13.1-5.9-13.1-13.1c0-7.2,5.9-13.1,13.1-13.1c7.2,0,13.1,5.9,13.1,13.1
+		C99.4,23,93.5,28.8,86.3,28.8z M86.3,4.7c-6.1,0-11.1,5-11.1,11.1s5,11.1,11.1,11.1c6.1,0,11.1-5,11.1-11.1S92.4,4.7,86.3,4.7z"/>
+</g>
+<path class="st9" d="M100.4,80.3c-0.9-0.1-3.1,0.4-6-3.1c-2.8-3.3-7.7-3.3-7.7-3.3s-5,0-7.7,3.3c-2.9,3.4-5.1,3-6,3.1
+	c-3,0.4-4.8,2.4-4.8,6.9c0,4,11.2,10.3,18.6,5.8c7.4,4.5,18.6-1.8,18.6-5.8C105.2,82.7,103.4,80.6,100.4,80.3z"/>
+<g>
+	<path class="st1" d="M105.3,93.1c1.1-1.1,2-2.4,2.5-3.9c0.2-0.7,0.3-1.5,0.3-2.2c-0.1-0.8-0.1-1.5-0.3-2.3
+		c-0.3-1.5-0.8-2.9-1.7-4.1c-0.8-1.2-2-2-3.3-2.6c-0.7-0.3-1.4-0.4-2.1-0.5c-0.4-0.1-0.7,0-1.1-0.1c-0.4,0-1.1-0.1-1.5-0.4
+		c-0.9-0.5-1.5-1.1-2.1-1.7c-0.5-0.5-1-1-1.6-1.4c-2.3-1.7-5.3-2.6-8.1-2.7c-2.9,0.1-5.9,0.9-8.1,2.7c-0.6,0.4-1.1,0.9-1.6,1.4
+		c-0.6,0.6-1.1,1.3-2.1,1.7c-0.4,0.2-1.1,0.4-1.5,0.4c-0.4,0-0.7,0-1.1,0.1c-0.7,0.1-1.4,0.3-2.1,0.5c-1.3,0.5-2.5,1.4-3.3,2.5
+		c-0.8,1.2-1.4,2.6-1.7,4.1c-0.2,0.7-0.2,1.5-0.3,2.3c-0.1,0.7,0.1,1.5,0.3,2.2c0.5,1.4,1.4,2.7,2.5,3.9c-1.2-1-2.3-2.2-3-3.7
+		c-0.3-0.7-0.5-1.6-0.6-2.4c0-0.8,0-1.6,0.1-2.4c0.2-1.6,0.6-3.2,1.5-4.7c0.9-1.4,2.3-2.6,3.8-3.3c0.8-0.4,1.6-0.6,2.4-0.8
+		c0.4-0.1,0.9-0.1,1.3-0.1c0.3,0,0.5-0.1,0.7-0.2c0.5-0.3,1-0.8,1.4-1.3c0.6-0.6,1.1-1.3,1.8-1.8c1.3-1,2.9-1.8,4.4-2.3
+		c1.6-0.5,3.2-0.8,4.9-0.8c1.7,0,3.3,0.3,4.9,0.8c1.6,0.5,3.1,1.3,4.4,2.3c0.7,0.5,1.3,1.1,1.8,1.8c0.5,0.6,1,1.1,1.4,1.3
+		c0.2,0.1,0.4,0.2,0.7,0.2c0.4,0,0.9,0,1.3,0.1c0.8,0.1,1.7,0.4,2.4,0.7c1.6,0.7,2.9,1.8,3.8,3.3c0.9,1.4,1.4,3.1,1.5,4.7
+		c0.1,0.8,0.1,1.6,0.1,2.4c0,0.8-0.2,1.6-0.6,2.4C107.6,90.9,106.5,92.1,105.3,93.1z"/>
+</g>
+<path id="mouth" class="st7" d="M100.8,116.3c-13.3-4.7-14.1-18-14.1-18s-0.8,13.3-14.1,18c-13.3,4.7-21.6,4.8-27.4-3.4
+	c0,0,0.5,8,13.1,8.8c12.6,0.8,20.5-8.8,28.4-8.5c7.9-0.3,15.8,9.3,28.4,8.5c12.6-0.8,13.1-8.8,13.1-8.8
+	C122.4,121.1,114.1,121.1,100.8,116.3z"/>
+<path class="st1" d="M99.4,85.9c-0.9-0.8-4.5-2.7-6.7,1.9c-2.2,4.7-6,4.2-6,4.2s-3.8,0.5-6-4.2c-2.2-4.7-5.8-2.7-6.7-1.9
+	c-0.9,0.8-3.1,4.6,4.9,9.1c8,4.5,7.9,9.2,7.9,9.2s-0.1-4.7,7.9-9.2C102.5,90.5,100.3,86.7,99.4,85.9z"/>
+<path class="st1" d="M108.9,123.4c-5,1-9.7,0.6-14.1-2.2c-0.6-0.4-1.2-0.7-1.9-0.9c-2.1-0.7-4.2-1.2-6.3-1.3c-2.1,0-4.2,0.5-6.3,1.3
+	c-0.7,0.2-1.3,0.5-1.9,0.9c-4.4,2.9-9.1,3.2-14.1,2.2c0,0.2-0.1,0.4-0.1,0.6c1.9,0.5,3.8,1.1,5.8,1.3c4.2,0.6,7.8-1.4,11.4-3.2
+	c1.7-0.9,3.5-1.2,5.2-1c1.8-0.2,3.5,0.1,5.2,1c3.6,1.8,7.2,3.8,11.4,3.2c2-0.3,3.9-0.9,5.8-1.3C109,123.8,109,123.6,108.9,123.4z"/>
+<path class="st1" d="M105.5,127.1c-0.9,0.2-1.8,0.3-2.7,0.6c-3,0.9-5.9,0.4-8.4-1.2c-2.6-1.7-5.2-2.2-7.7-2c-2.5-0.2-5.1,0.4-7.7,2
+	c-2.5,1.6-5.4,2.1-8.4,1.2c-0.9-0.3-1.8-0.4-2.7-0.6c-0.1,0.2-0.1,0.3-0.2,0.5c1.4,0.6,2.8,1.5,4.3,1.8c2.7,0.5,5.3,0.3,7.8-0.9
+	c2.2-1.1,4.5-1.5,6.8-1.5c2.3-0.1,4.6,0.4,6.8,1.5c2.5,1.2,5.2,1.5,7.8,0.9c1.5-0.3,2.9-1.2,4.3-1.8
+	C105.6,127.4,105.6,127.2,105.5,127.1z"/>
+<g id="beard-l-1">
+	<g id="beard-root-l-1">
+		<path class="st1" d="M73.2,104.4c-0.2,0-0.4,0-0.6-0.1c-1.1-0.4-1.6-1.8-1.1-3.1c0.4-1.1,1.3-1.8,2.2-1.8c0.2,0,0.4,0,0.6,0.1
+			c1.1,0.4,1.6,1.8,1.1,3.1C75.1,103.7,74.2,104.4,73.2,104.4z"/>
+		<path class="st10" d="M73.7,100.1c0.1,0,0.3,0,0.4,0.1c0.8,0.3,1.1,1.3,0.7,2.2c-0.3,0.8-1,1.3-1.6,1.3c-0.1,0-0.3,0-0.4-0.1
+			c-0.8-0.3-1.1-1.3-0.7-2.2C72.4,100.6,73.1,100.1,73.7,100.1 M73.7,98.8L73.7,98.8c-1.2,0-2.4,0.9-2.8,2.2
+			c-0.6,1.7,0.1,3.4,1.5,3.9c0.3,0.1,0.6,0.1,0.8,0.1c1.2,0,2.4-0.9,2.8-2.2c0.6-1.7-0.1-3.4-1.5-3.9C74.3,98.8,74,98.8,73.7,98.8
+			L73.7,98.8z"/>
+	</g>
+	<path id="beard-tip-l-1" class="st1" d="M72.8,102.3c-0.9-1.7-2.2-3.3-3.6-4.7c-1.4-1.4-3-2.7-4.7-3.8c-1.7-1.1-3.5-2-5.5-2.8
+		c-0.9-0.4-1.9-0.7-2.9-1c-1-0.3-2-0.5-3-0.8c1,0.2,2,0.4,3,0.6c1,0.3,2,0.5,3,0.9c2,0.6,3.9,1.5,5.7,2.5c1.8,1,3.5,2.2,5.1,3.6
+		c1.6,1.4,3,2.9,4.1,4.9L72.8,102.3z"/>
+</g>
+<g id="beard-l-2">
+	<g id="beard-root-l-2">
+		<path class="st1" d="M66.2,112.7c-0.3,0-0.5,0-0.8-0.1c-1.2-0.4-1.8-1.9-1.4-3.2c0.4-1,1.3-1.7,2.3-1.7c0.3,0,0.5,0,0.8,0.1
+			c0.6,0.2,1.1,0.7,1.3,1.3c0.2,0.6,0.2,1.3,0,1.9C68.2,112,67.3,112.7,66.2,112.7z"/>
+		<path class="st10" d="M66.5,108.3c0.2,0,0.3,0,0.5,0.1c0.9,0.3,1.3,1.3,0.9,2.3c-0.3,0.8-1,1.3-1.7,1.3c-0.2,0-0.3,0-0.5-0.1
+			c-0.9-0.3-1.3-1.3-0.9-2.3C65.1,108.8,65.8,108.3,66.5,108.3 M66.5,106.9L66.5,106.9c-1.3,0-2.5,0.9-3,2.2c-0.3,0.8-0.3,1.7,0,2.4
+			c0.3,0.8,1,1.4,1.8,1.7c0.3,0.1,0.7,0.2,1,0.2c1.3,0,2.5-0.9,3-2.2c0.6-1.7-0.2-3.6-1.8-4.1C67.2,106.9,66.8,106.9,66.5,106.9
+			L66.5,106.9z"/>
+	</g>
+	<path id="beard-tip-l-2" class="st1" d="M65.9,110.8c-3.2-2.6-6.8-4.9-10.5-7c-3.7-2.1-7.5-3.9-11.5-5.3c-4-1.5-8.1-2.5-12.2-3.1
+		c-4.2-0.6-8.4-0.6-12.7-0.1c4.2-0.6,8.5-0.8,12.7-0.3c4.2,0.5,8.4,1.4,12.4,2.8c4,1.4,8,3.1,11.7,5.1c3.8,2,7.4,4.2,10.9,6.8
+		L65.9,110.8z"/>
+</g>
+<g id="beard-l-4">
+	<g id="beard-root-l-4">
+		<path class="st1" d="M54.7,110.2c-0.2,0-0.3,0-0.5-0.1c-0.5-0.2-0.8-0.6-1-1.1c-0.1-0.5-0.1-1,0.1-1.5c0.3-0.9,1.1-1.5,1.9-1.5
+			c0.2,0,0.3,0,0.5,0.1c0.9,0.3,1.3,1.5,0.9,2.6C56.2,109.6,55.5,110.2,54.7,110.2z"/>
+		<path class="st10" d="M55.2,106.5c0.1,0,0.2,0,0.3,0.1c0.6,0.2,0.9,1.1,0.6,1.9c-0.3,0.7-0.8,1.2-1.3,1.2c-0.1,0-0.2,0-0.3-0.1
+			c-0.6-0.2-0.9-1.1-0.6-1.9C54.1,107,54.7,106.5,55.2,106.5 M55.2,105.4c-1,0-2,0.8-2.4,1.9c-0.5,1.4,0,2.9,1.2,3.3
+			c0.2,0.1,0.4,0.1,0.7,0.1c1,0,2-0.8,2.4-1.9c0.5-1.4,0-2.9-1.2-3.3C55.6,105.5,55.4,105.4,55.2,105.4L55.2,105.4z"/>
+	</g>
+	<path id="beard-tip-l-4" class="st1" d="M54.7,108.7c-2.2-1.1-4.7-2-7.1-2.7c-2.4-0.7-4.9-1.3-7.5-1.7c-1.3-0.2-2.5-0.3-3.8-0.5
+		c-1.3-0.1-2.5-0.2-3.8-0.1c-2.6-0.1-5.1,0.2-7.7,0.6c2.5-0.5,5.1-0.8,7.6-0.9c1.3-0.1,2.6,0,3.9,0c1.3,0.1,2.6,0.1,3.9,0.3
+		c2.6,0.3,5.1,0.7,7.6,1.4c2.5,0.6,5,1.4,7.4,2.5L54.7,108.7z"/>
+</g>
+<g id="beard-l-3">
+	<g id="beard-root-l-3">
+		<path class="st1" d="M58.9,102.5c-0.2,0-0.4,0-0.6-0.1c-0.5-0.2-0.9-0.7-1.1-1.3c-0.2-0.5-0.1-1.2,0.1-1.8
+			c0.4-1.1,1.3-1.8,2.2-1.8c0.2,0,0.4,0,0.6,0.1c1.1,0.4,1.5,1.7,1,3C60.7,101.8,59.8,102.5,58.9,102.5z"/>
+		<path class="st10" d="M59.5,98.3c0.1,0,0.2,0,0.3,0.1c0.7,0.3,1,1.2,0.6,2.2c-0.3,0.8-0.9,1.3-1.6,1.3c-0.1,0-0.2,0-0.3-0.1
+			c-0.7-0.3-1-1.2-0.6-2.2C58.2,98.8,58.9,98.3,59.5,98.3 M59.5,97L59.5,97c-1.2,0-2.3,0.9-2.8,2.2c-0.3,0.7-0.3,1.5-0.1,2.2
+			c0.2,0.8,0.8,1.4,1.5,1.7c0.3,0.1,0.5,0.1,0.8,0.1c1.2,0,2.3-0.9,2.8-2.2c0.6-1.7,0-3.3-1.4-3.9C60,97,59.8,97,59.5,97L59.5,97z"
+			/>
+	</g>
+	<path id="beard-tip-l-3" class="st1" d="M58.2,99.8c-0.5-0.7-1.3-1.5-2.1-2.1c-0.8-0.7-1.7-1.2-2.6-1.8c-1.8-1.1-3.7-2-5.7-2.8
+		c-2-0.8-4-1.4-6.1-2l-3.1-0.7l-3.2-0.6l3.2,0.4l3.2,0.6c2.1,0.5,4.2,0.9,6.3,1.6c2.1,0.7,4.1,1.5,6,2.5c1,0.5,1.9,1.1,2.8,1.7
+		c0.9,0.7,1.8,1.3,2.6,2.3L58.2,99.8z"/>
+</g>
+<g id="beard-r-1">
+	<g id="beard-root-r-1">
+		<path class="st1" d="M99.4,104.4c-0.9,0-1.8-0.7-2.2-1.8c-0.5-1.3,0-2.7,1.1-3.1c0.2-0.1,0.4-0.1,0.6-0.1c0.9,0,1.8,0.7,2.2,1.8
+			c0.5,1.3,0,2.7-1.1,3.1C99.8,104.4,99.6,104.4,99.4,104.4L99.4,104.4z"/>
+		<path class="st10" d="M98.9,100.1c0.6,0,1.3,0.5,1.6,1.3c0.3,1,0,2-0.7,2.2c-0.1,0-0.3,0.1-0.4,0.1c-0.6,0-1.3-0.5-1.6-1.3
+			c-0.3-1,0-2,0.7-2.2C98.7,100.1,98.8,100.1,98.9,100.1 M98.9,98.8c-0.3,0-0.6,0-0.8,0.1c-1.4,0.5-2.1,2.3-1.5,3.9
+			c0.5,1.3,1.6,2.2,2.8,2.2c0.3,0,0.6,0,0.8-0.1c1.4-0.5,2.1-2.3,1.5-3.9C101.3,99.7,100.2,98.8,98.9,98.8L98.9,98.8z"/>
+	</g>
+	<path id="beard-tip-r-1" class="st1" d="M98.5,101.6c1.2-1.9,2.6-3.4,4.1-4.9c1.6-1.4,3.3-2.6,5.1-3.6c1.8-1,3.7-1.9,5.7-2.5
+		c1-0.4,2-0.6,3-0.9c1-0.2,2-0.4,3-0.6c-1,0.3-2,0.5-3,0.8c-1,0.4-2,0.6-2.9,1c-1.9,0.7-3.7,1.7-5.5,2.8c-1.7,1.1-3.3,2.4-4.7,3.8
+		c-1.4,1.4-2.7,3.1-3.6,4.7L98.5,101.6z"/>
+</g>
+<g id="beard-r-2">
+	<g id="beard-root-r-2">
+		<path class="st1" d="M106.4,112.7c-1,0-2-0.7-2.3-1.7c-0.5-1.3,0.1-2.8,1.4-3.2c0.2-0.1,0.5-0.1,0.8-0.1c1,0,2,0.7,2.3,1.7
+			c0.5,1.3-0.1,2.8-1.4,3.2C106.9,112.6,106.7,112.7,106.4,112.7L106.4,112.7z"/>
+		<path class="st10" d="M106.2,108.3c0.7,0,1.4,0.5,1.7,1.3c0.3,1-0.1,2-0.9,2.3c-0.2,0.1-0.3,0.1-0.5,0.1c-0.7,0-1.4-0.5-1.7-1.3
+			c-0.3-1,0.1-2,0.9-2.3C105.8,108.3,106,108.3,106.2,108.3 M106.2,106.9c-0.3,0-0.7,0.1-1,0.2c-1.6,0.6-2.4,2.4-1.8,4.1
+			c0.5,1.3,1.7,2.2,3,2.2c0.3,0,0.7-0.1,1-0.2c1.6-0.6,2.4-2.4,1.8-4.1C108.7,107.8,107.5,106.9,106.2,106.9L106.2,106.9z"/>
+	</g>
+	<path id="beard-tip-r-2" class="st1" d="M105.8,109.6c3.5-2.6,7.1-4.8,10.9-6.8c3.8-2,7.7-3.7,11.7-5.1c4-1.4,8.2-2.3,12.4-2.8
+		c4.2-0.5,8.5-0.3,12.7,0.3c-4.2-0.5-8.5-0.5-12.7,0.1c-4.2,0.6-8.3,1.7-12.2,3.1c-4,1.5-7.8,3.3-11.5,5.3c-3.7,2.1-7.2,4.4-10.5,7
+		L105.8,109.6z"/>
+</g>
+<g id="beard-r-4">
+	<g id="beard-root-r-4">
+		<path class="st1" d="M118,110.2c-0.8,0-1.5-0.6-1.9-1.5c-0.4-1.1,0-2.3,0.9-2.6c0.2-0.1,0.3-0.1,0.5-0.1c0.8,0,1.5,0.6,1.9,1.5
+			c0.2,0.5,0.2,1.1,0.1,1.5c-0.2,0.5-0.5,0.9-1,1.1C118.3,110.2,118.1,110.2,118,110.2z"/>
+		<path class="st10" d="M117.5,106.5c0.5,0,1.1,0.5,1.3,1.2c0.3,0.8,0.1,1.7-0.6,1.9c-0.1,0-0.2,0.1-0.3,0.1c-0.5,0-1.1-0.5-1.3-1.2
+			c-0.3-0.8-0.1-1.7,0.6-1.9C117.3,106.6,117.4,106.5,117.5,106.5 M117.5,105.4c-0.2,0-0.5,0-0.7,0.1c-1.2,0.4-1.7,1.9-1.2,3.3
+			c0.4,1.1,1.4,1.9,2.4,1.9c0.2,0,0.5,0,0.7-0.1c1.2-0.4,1.7-1.9,1.2-3.3C119.4,106.2,118.5,105.4,117.5,105.4L117.5,105.4z"/>
+	</g>
+	<path id="beard-tip-r-4" class="st1" d="M117.4,107.5c2.4-1,4.9-1.8,7.4-2.5c2.5-0.6,5.1-1.1,7.6-1.4c1.3-0.2,2.6-0.2,3.9-0.3
+		c1.3,0,2.6-0.1,3.9,0c2.6,0.1,5.1,0.4,7.6,0.9c-2.5-0.3-5.1-0.6-7.7-0.6c-1.3,0-2.6,0.1-3.8,0.1c-1.3,0.1-2.5,0.2-3.8,0.5
+		c-2.5,0.4-5,0.9-7.5,1.7c-2.4,0.7-4.8,1.6-7.1,2.7L117.4,107.5z"/>
+</g>
+<g id="beard-r-3">
+	<g id="beard-root-r-3">
+		<path class="st1" d="M113.7,102.5c-0.9,0-1.8-0.7-2.2-1.8c-0.5-1.3,0-2.6,1-3c0.2-0.1,0.4-0.1,0.6-0.1c0.9,0,1.8,0.7,2.2,1.8
+			c0.2,0.6,0.2,1.2,0.1,1.8c-0.2,0.6-0.6,1.1-1.1,1.3C114.1,102.5,113.9,102.5,113.7,102.5L113.7,102.5z"/>
+		<path class="st10" d="M113.2,98.3c0.6,0,1.3,0.5,1.6,1.3c0.3,1,0.1,2-0.6,2.2c-0.1,0-0.2,0.1-0.3,0.1c-0.6,0-1.3-0.5-1.6-1.3
+			c-0.3-1-0.1-2,0.6-2.2C112.9,98.3,113,98.3,113.2,98.3 M113.2,97c-0.3,0-0.5,0-0.8,0.1c-1.4,0.5-2,2.2-1.4,3.9
+			c0.5,1.3,1.6,2.2,2.8,2.2c0.3,0,0.5,0,0.8-0.1c0.7-0.3,1.3-0.9,1.5-1.7c0.2-0.7,0.2-1.4-0.1-2.2C115.5,97.8,114.3,97,113.2,97
+			L113.2,97z"/>
+	</g>
+	<path id="beard-tip-r-3" class="st1" d="M113.3,99c0.8-1,1.7-1.6,2.6-2.3c0.9-0.6,1.9-1.2,2.8-1.7c1.9-1,4-1.9,6-2.5
+		c2.1-0.7,4.2-1.2,6.3-1.6l3.2-0.6l3.2-0.4l-3.2,0.6l-3.1,0.7c-2.1,0.6-4.1,1.2-6.1,2c-2,0.8-3.9,1.7-5.7,2.8
+		c-0.9,0.6-1.8,1.1-2.6,1.8c-0.8,0.6-1.6,1.4-2.1,2.1L113.3,99z"/>
+</g>
+<path id="cheek-l" class="st1" d="M7.3,68.4c2.8,0.7,4.5,2.8,6.1,4.9c2.6,3.4,5.1,7,7.9,10.2c4,4.4,9.1,4.5,14.4,2.9
+	c2.1-0.6,4.2-1.5,6.3-1.9c1-0.2,2.2,0.4,3.3,1c-4.1-0.3-7.4,1.7-10.9,3.1c-3.8,1.5-7.9,2.3-11.6-0.1c-3.4-2.1-5.9-5.1-7.8-8.7
+	C12.9,75.8,11.5,71.1,7.3,68.4z"/>
+<path id="cheek-r" class="st1" d="M165.3,68.4c-2.8,0.7-4.5,2.8-6.1,4.9c-2.6,3.4-5.1,7-7.9,10.2c-4,4.4-9.1,4.5-14.4,2.9
+	c-2.1-0.6-4.2-1.5-6.3-1.9c-1-0.2-2.2,0.4-3.3,1c4.1-0.3,7.4,1.7,10.9,3.1c3.8,1.5,7.9,2.3,11.6-0.1c3.4-2.1,5.9-5.1,7.8-8.7
+	C159.8,75.8,161.1,71.1,165.3,68.4z"/>
+<path id="eb-l-1" class="st6" d="M42.2,29c-0.2-0.5-0.5-1-0.7-1.5c-0.2-0.4-0.4-0.9-0.6-1.3c-0.3-0.7-0.6-1.5-0.9-2.2
+	c-0.6-1.4-1.2-2.9-1.9-4.3c-0.7-1.4-1.4-2.8-2.2-4.1c-0.8-1.4-1.6-2.7-2.5-4c-0.4-0.7-0.9-1.3-1.3-1.9c-0.8-1.2-1.8-2.3-2.7-3.3
+	c-0.5-0.5-1-1-1.5-1.4c-1.1-0.9-2.2-1.7-3.4-2.4c-1.2-0.7-2.5-1.3-3.9-1.7c-0.7-0.2-1.4-0.5-2.1-0.6c-0.3-0.1-0.6-0.1-0.8-0.2
+	C17.3,0,17.1,0,16.8,0s-0.5,0-0.7,0c-0.2,0-0.5,0.1-0.7,0.1c-0.7,0.2-1.3,0.5-1.9,0.9c-0.2,0.1-0.4,0.3-0.6,0.4
+	c-1,0.7-1.8,1.5-2.6,2.4C9.6,4.7,8.9,5.7,8.3,6.6C7.7,7.5,7.1,8.5,6.5,9.5c-0.5,1-1.1,2-1.6,3c-0.4,0.8-0.8,1.6-1.2,2.4
+	c-0.3,0.6-0.6,1.4-0.9,2.3c-0.2,0.6-0.4,1.2-0.6,1.8c-0.1,0.3-0.2,0.7-0.3,1c-0.4,1.4-0.7,3-1,4.7c-0.4,2.6-0.6,5.6-0.4,8.9
+	c0,0.6,0.1,1.2,0.1,1.8c0,0.5,0.1,0.9,0.1,1.4c0,0.4,0.1,0.7,0.1,1.1c0,0.1,0,0.2,0,0.3c0.4,2.7,1,5.4,2.1,7.9c0,0,0,0,0,0
+	c0.1,0.2,0.2,0.4,0.2,0.6c0.2,0,0.4,0,0.6-0.1C4,45,4.2,43.3,4.2,41.7c0.2-5.5,1.1-10.8,4.1-15.5c2.9-4.6,6.8-7.5,12.8-7.5
+	c7.7,0,13.2,3.6,18.1,8.8c0.9,1,1.9,1.8,3.2,2.9c0-0.6,0.1-0.8,0-1c-0.1-0.1-0.1-0.2-0.2-0.4c0,0,0,0,0,0C42.2,29,42.2,29,42.2,29
+	C42.2,29,42.2,29,42.2,29C42.2,29,42.2,29,42.2,29z"/>
+<path id="eb-l-0" class="st8" d="M1,38.2c0-0.1,0-0.2,0-0.3c0-0.4-0.1-0.7-0.1-1.1c0-0.5-0.1-0.9-0.1-1.4c-0.1-0.6-0.1-1.2-0.1-1.8
+	c-0.1-3.3,0.1-6.2,0.4-8.9c0.3-1.7,0.6-3.3,1-4.7c0.1-0.4,0.2-0.7,0.3-1c0.2-0.7,0.4-1.3,0.6-1.8c0.3-0.9,0.6-1.6,0.9-2.3
+	c0.4-0.8,0.8-1.6,1.2-2.4c0.5-1,1-2,1.6-3c0.5-1,1.1-2,1.7-2.9c0.6-0.9,1.3-1.8,2.1-2.7C11.1,3,12,2.3,12.9,1.5
+	c0.2-0.2,0.4-0.3,0.6-0.4c0.6-0.4,1.2-0.7,1.9-0.9c0.2-0.1,0.4-0.1,0.7-0.1c0.2,0,0.5,0,0.7,0s0.5,0,0.8,0.1c0.3,0,0.5,0.1,0.8,0.2
+	c0.7,0.2,1.4,0.4,2.1,0.6c1.4,0.5,2.7,1.1,3.9,1.7c1.2,0.7,2.3,1.5,3.4,2.4c0.5,0.4,1,0.9,1.5,1.4c1,1,1.9,2.1,2.7,3.3
+	c0.5,0.6,0.9,1.3,1.3,1.9c0.9,1.3,1.7,2.6,2.5,4c0.8,1.4,1.5,2.7,2.2,4.1c0.7,1.4,1.3,2.8,1.9,4.3c0.3,0.7,0.6,1.4,0.9,2.2
+	c0.2,0.4,0.4,0.9,0.6,1.3c0.2,0.5,0.5,1,0.7,1.5c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c-0.1-2.7-0.4-3.7-0.4-3.7
+	c-2.3-6.1-4.7-11.4-8.3-16.5C30.6,4.7,27.2,1.8,23,0H12.1c-0.1,0.1-0.2,0.1-0.2,0.2c-4,3-6.1,7-8.1,10.9l-0.3,0.6
+	c-0.4,0.7-0.7,1.4-1,2.1l-0.2,0.5C1.4,16,0.6,18.3,0,21v19c0.9,2.2,2.1,4,3.1,6C2,43.6,1.3,40.9,1,38.2z"/>
+<path id="eb-r-1" class="st6" d="M171.7,37.9c0-0.4,0.1-0.7,0.1-1.1c0-0.5,0.1-0.9,0.1-1.4c0.1-0.6,0.1-1.2,0.1-1.8
+	c0.4-8.8-1.7-15.3-3.2-18.7c-0.4-0.8-0.8-1.6-1.2-2.4c-0.5-1-1-2-1.6-3c-0.3-0.5-0.5-1-0.8-1.5c-0.9-1.5-1.8-2.9-3-4.1
+	c-0.8-0.8-1.6-1.6-2.6-2.4c-0.2-0.2-0.4-0.3-0.6-0.4c-0.6-0.4-1.2-0.7-1.9-0.9c-0.4-0.1-0.9-0.2-1.4-0.2s-1,0.1-1.6,0.2
+	c-0.7,0.2-1.4,0.4-2.1,0.6c-0.7,0.2-1.4,0.5-2,0.8c-3.9,1.7-7,4.4-9.5,8c-1.4,1.9-2.6,3.9-3.8,5.9c-1.5,2.7-2.9,5.5-4.1,8.4
+	c-0.3,0.7-0.6,1.4-0.9,2.2c-0.2,0.4-0.4,0.9-0.6,1.3c-0.2,0.5-0.5,1-0.7,1.5c0,0.1-0.1,0.1-0.1,0.2c0,0.1-0.1,0.2-0.1,0.3
+	c0,0,0,0,0,0c0,0,0,0,0,0c-0.1,0.2,0,0.4,0,1c1.2-1.1,2.3-1.9,3.2-2.9c4.8-5.2,10.3-8.9,18.1-8.8c6,0,9.9,2.9,12.8,7.5
+	c3,4.7,3.9,10.1,4.1,15.5c0.1,1.6,0.2,3.3,0.3,4.9c0.2,0,0.4,0,0.6,0.1c0.1-0.2,0.2-0.4,0.2-0.6c1.1-2.5,1.7-5.2,2.1-7.9
+	C171.7,38.1,171.7,38,171.7,37.9z"/>
+<path id="eb-r-0" class="st8" d="M139.2,8.6c-3.6,5.1-6,10.4-8.3,16.5c0,0-0.3,1.1-0.4,3.7c0,0,0,0,0,0c0,0,0,0,0,0
+	c0.2-0.5,0.5-1,0.7-1.5c0.2-0.4,0.4-0.9,0.6-1.3c0.3-0.7,0.6-1.5,0.9-2.2c1.2-2.9,2.6-5.7,4.1-8.4c1.2-2,2.4-4,3.8-5.9
+	c2.5-3.6,5.7-6.2,9.5-8c0.6-0.3,1.3-0.6,2-0.8c0.7-0.2,1.4-0.5,2.1-0.6c0.6-0.2,1.1-0.2,1.6-0.2s1,0.1,1.4,0.2
+	c0.7,0.2,1.3,0.5,1.9,0.9c0.2,0.1,0.4,0.3,0.6,0.4c1,0.7,1.8,1.5,2.6,2.4c1.1,1.3,2.1,2.7,3,4.1c0.3,0.5,0.6,1,0.8,1.5
+	c0.5,1,1.1,2,1.6,3c0.4,0.8,0.8,1.6,1.2,2.4c1.5,3.5,3.6,10,3.2,18.7c0,0.6-0.1,1.2-0.1,1.8c0,0.5-0.1,0.9-0.1,1.4
+	c0,0.4-0.1,0.7-0.1,1.1c0,0.1,0,0.2,0,0.3c-0.4,2.7-1,5.4-2.1,7.9c0,0,0,0,0,0c1.1-2.3,2.4-4.1,3.3-6.7V22.1
+	c-0.7-3.2-1.6-5.8-2.4-7.8l-0.2-0.5c-0.3-0.7-0.7-1.4-1-2.1l-0.3-0.6c-2-3.9-4.1-8-8.1-10.9c-0.1-0.1-0.2-0.1-0.2-0.2h-10.8
+  C145.5,1.8,142,4.7,139.2,8.6z"/>
+<g id="eyeSKin">
+	<path id="eyeSKin-l-open" class="st4" d="M34.5,57.6c-3.7,0.1-9.2,2.3-10,10c-0.3-0.2,3.6-8.8,10-9.2c6.7,0.1,10.7,8.9,9.9,9.2
+		C44.1,60.8,38.9,57.3,34.5,57.6z"/>
+	<path id="eyeSKin-r-open" class="st4" d="M138.7,57.6c-3.7,0.1-9.2,2.3-10,10c-0.3-0.2,3.6-8.8,10-9.2c6.7,0.1,10.7,8.9,9.9,9.2
+		C148.4,60.8,143.1,57.3,138.7,57.6z"/>
+</g>
+<g class="bubbleWrap" filter="url(#goo)"></g>
+<g class="breathWrap" filter="url(#breath)"></g>
+</svg>
+<div class="credits">
+  <p>Designed by <a href="https://dribbble.com/shots/6544480-Chinese-Opera-Faces-89" target="_blank">Wang KongKong</a>. Animated by <a href="https://twitter.com/ChenXin_nth" target="_blank">Chen Xin</a></p>
+</div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/the-cat-god/dist/script.js b/the-cat-god/dist/script.js
new file mode 100644
index 0000000..27d7e29
--- /dev/null
+++ b/the-cat-god/dist/script.js
@@ -0,0 +1,215 @@
+const xmlns = "http://www.w3.org/2000/svg";
+const xlinkns = "http://www.w3.org/1999/xlink";
+
+const bubbleWrap = document.querySelector(".bubbleWrap");
+const breathWrap = document.querySelector(".breathWrap");
+const fePointLight = document.querySelector("#fePointLight");
+// let fePointLight_Z = fePointLight.z.animVal;
+// console.log(fePointLight.z)
+
+const masterTl = new TimelineMax();
+
+// const animatedObject = {
+//   fePointLightZ: 12,
+// }
+
+const leftEyeTl = new TimelineMax({ paused: true });
+const rightEyeTl = new TimelineMax({ paused: true });
+leftEyeTl.to("#eyeSKin-l-open", 0.06, {
+  morphSVG: "#eyeSKin-l-close" }).
+
+to("#eyeSKin-l-open", 0.06, {
+  morphSVG: "#eyeSKin-l-open" });
+
+rightEyeTl.to("#eyeSKin-r-open", 0.06, {
+  morphSVG: "#eyeSKin-r-close" }).
+
+to("#eyeSKin-r-open", 0.06, {
+  morphSVG: "#eyeSKin-r-open" });
+
+
+const id = setInterval(blinkEye, 1000);
+function blinkEye() {
+  if (Math.random() > 0.7) {
+    leftEyeTl.restart();
+    rightEyeTl.restart();
+  }
+}
+
+
+// sun
+// const tl = new TimelineMax({onUpdate: render, repeat: -1});
+// tl.to(animatedObject, 8, {
+//   fePointLightZ: 5,
+//   ease: CustomEase.create("custom", "M0,0 C0,0 0.037,0.772 0.04,0.782 0.04,0.77 0.084,-0.027 0.085,-0.053 0.094,-0.039 0.108,0.408 0.148,0.466 0.174,0.422 0.238,0.067 0.24,0.076 0.24,0.071 0.254,0.194 0.255,0.191 0.255,0.196 0.264,0.503 0.265,0.522 0.27,0.515 0.29,0.343 0.31,0.316 0.325,0.265 0.362,0.194 0.365,0.185 0.367,0.195 0.379,0.925 0.388,0.964 0.414,0.912 0.528,0.094 0.545,0.066 0.568,0.142 0.598,0.456 0.598,0.546 0.599,0.593 0.605,0.753 0.606,0.754 0.606,0.753 0.685,0.316 0.686,0.312 0.688,0.323 0.746,0.899 0.75,0.912 0.75,0.903 0.786,0.738 0.79,0.702 0.804,0.644 0.868,0.444 0.89,0.408 0.906,0.5 0.986,0.998 0.995,1.018 0.995,1.018 1,1 1,1"),
+// })
+// .to(animatedObject, 8, {
+//   fePointLightZ: 12,
+//   ease: CustomEase.create("custom", "M0,0 C0,0 0.037,0.772 0.04,0.782 0.04,0.77 0.084,-0.027 0.085,-0.053 0.094,-0.039 0.108,0.408 0.148,0.466 0.174,0.422 0.238,0.067 0.24,0.076 0.24,0.071 0.254,0.194 0.255,0.191 0.255,0.196 0.264,0.503 0.265,0.522 0.27,0.515 0.29,0.343 0.31,0.316 0.325,0.265 0.362,0.194 0.365,0.185 0.367,0.195 0.379,0.925 0.388,0.964 0.414,0.912 0.528,0.094 0.545,0.066 0.568,0.142 0.598,0.456 0.598,0.546 0.599,0.593 0.605,0.753 0.606,0.754 0.606,0.753 0.685,0.316 0.686,0.312 0.688,0.323 0.746,0.899 0.75,0.912 0.75,0.903 0.786,0.738 0.79,0.702 0.804,0.644 0.868,0.444 0.89,0.408 0.906,0.5 0.986,0.998 0.995,1.018 0.995,1.018 1,1 1,1"),
+// })
+// function render(){
+//   fePointLight.z.baseVal = animatedObject.fePointLightZ;
+// }
+
+// bubble around eyes
+let bubbleCount = 40;
+const bubble = {
+  bubbleL1: null,
+  bubbleL2: null,
+  bubbleL3: null,
+  bubbleR1: null,
+  bubbleR2: null,
+  bubbleR3: null };
+
+const bubbleTl = {
+  bubbleL1_Tl: null,
+  bubbleL2_Tl: null,
+  bubbleL3_Tl: null,
+  bubbleR1_Tl: null,
+  bubbleR2_Tl: null,
+  bubbleR3_Tl: null };
+
+
+while (bubbleCount-- > 0) {
+
+  for (let bubbleName in bubble) {
+    bubble[bubbleName] = document.createElementNS(xmlns, "use");
+    bubble[bubbleName].setAttributeNS(xlinkns, "xlink:href", `#${bubbleName}`);
+    bubbleWrap.appendChild(bubble[bubbleName]);
+    TweenMax.set(bubble[bubbleName], {
+      transformOrigin: "50% 50%" });
+
+  }
+
+  for (let bubbleTlName in bubbleTl) {
+    bubbleTl[bubbleTlName] = new TimelineMax();
+  }
+
+  bubbleTl.bubbleL1_Tl.to(bubble.bubbleL1, 0.5, {
+    physics2D: {
+      velocity: randomBetween(10, 70),
+      angle: randomBetween(-65, -75),
+      gravity: 0 },
+
+    scale: 0.4,
+    repeat: -1 });
+
+
+  bubbleTl.bubbleL2_Tl.to(bubble.bubbleL2, 0.5, {
+    physics2D: {
+      velocity: randomBetween(10, 70),
+      angle: randomBetween(-52, -68),
+      gravity: 0 },
+
+    scale: 0.1,
+    repeat: -1 });
+
+
+  bubbleTl.bubbleL3_Tl.to(bubble.bubbleL3, 0.5, {
+    physics2D: {
+      velocity: randomBetween(10, 70),
+      angle: randomBetween(-38, -50),
+      gravity: 0 },
+
+    scale: 0.2,
+    repeat: -1 });
+
+
+  bubbleTl.bubbleR1_Tl.to(bubble.bubbleR1, 0.5, {
+    physics2D: {
+      velocity: randomBetween(10, 70),
+      angle: randomBetween(-105, -115),
+      gravity: 0 },
+
+    scale: 0.4,
+    repeat: -1 });
+
+
+  bubbleTl.bubbleR2_Tl.to(bubble.bubbleR2, 0.5, {
+    physics2D: {
+      velocity: randomBetween(10, 70),
+      angle: randomBetween(-112, -128),
+      gravity: 0 },
+
+    scale: 0.1,
+    repeat: -1 });
+
+
+  bubbleTl.bubbleR3_Tl.to(bubble.bubbleR3, 0.5, {
+    physics2D: {
+      velocity: randomBetween(10, 70),
+      angle: randomBetween(-130, -142),
+      gravity: 0 },
+
+    scale: 0.2,
+    repeat: -1 });
+
+
+  for (let bubbleTlName in bubbleTl) {
+    masterTl.add(bubbleTl[bubbleTlName].timeScale(0.4), bubbleCount / 20);
+  }
+
+}
+
+// breath under nose
+let breathCount = 20;
+const breath = {
+  breathL: null,
+  breathR: null };
+
+while (breathCount-- > 0) {
+  for (let breathName in breath) {
+    breath[breathName] = document.createElementNS(xmlns, "use");
+    breath[breathName].setAttributeNS(xlinkns, "xlink:href", `#${breathName}`);
+    breathWrap.appendChild(breath[breathName]);
+    TweenMax.set(breath[breathName], {
+      transformOrigin: "50% 50%" });
+
+  }
+  // console.log(breath)
+
+  const breathLTl = new TimelineMax();
+  const breathRTl = new TimelineMax();
+  // const bubbleL2_Tl = new TimelineMax();
+
+  breathLTl.to(breath.breathL, 2, {
+    physics2D: {
+      velocity: randomBetween(10, 30),
+      angle: randomBetween(60, 80),
+      gravity: 0 },
+
+    ease: Power2.easeIn,
+    scale: 4,
+    opacity: 0,
+    repeat: -1
+    // repeatDelay:1,
+  });
+
+  breathRTl.to(breath.breathR, 2, {
+    physics2D: {
+      velocity: randomBetween(10, 30),
+      angle: randomBetween(100, 120),
+      gravity: 0 },
+
+    ease: Power2.easeIn,
+    scale: 4,
+    opacity: 0,
+    repeat: -1
+    // repeatDelay:1,
+  });
+
+  masterTl.add(breathLTl, breathCount / 100);
+  masterTl.add(breathRTl, breathCount / 100);
+}
+
+
+
+
+
+
+// masterTl.seek(100);
+
+
+function randomBetween(min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
\ No newline at end of file
diff --git a/the-cat-god/dist/style.css b/the-cat-god/dist/style.css
new file mode 100644
index 0000000..9af5e79
--- /dev/null
+++ b/the-cat-god/dist/style.css
@@ -0,0 +1,38 @@
+body {
+  margin: 0;
+  height: 100vh;
+  width: 100vw;
+  background: no-repeat 50%/cover url("https://user-images.githubusercontent.com/45284685/62537388-dfb5be80-b882-11e9-952f-cb2b88f49425.jpeg");
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+svg {
+  display: block;
+  width: 40vw;
+  height: 30.4vw;
+}
+.svgWrap {
+  border-radius: 3vw;
+  box-shadow: 0px 0px 5vw 2.4vw rgba(247,179,194,0.25), 
+    3vw 3vw 4.8vw 1.4vw rgba(247,179,194,0.35),
+    0px 5vw 3vw -3vw rgba(216,157,170,0.9),
+    inset 0px 0px 5vw 2.4vw rgba(247,179,194,0.3), 
+    inset 3vw 3vw 4.8vw 1.4vw rgba(247,179,194,0.35),
+    inset 0px 5vw 2.7vw -3vw rgba(216,157,170,1);
+}
+.credits {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  font-size: 14px;
+}
+p {
+  text-align: right;
+  margin: 2px;
+  color: #D4394F;
+}
+a {
+  color: #040E41;
+}
+
diff --git a/the-cat-god/license.txt b/the-cat-god/license.txt
new file mode 100644
index 0000000..a88b8fb
--- /dev/null
+++ b/the-cat-god/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by ChenXin_nth (https://codepen.io/chenxinnn/pen/VJyNmB)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/the-cat-god/src/index.html b/the-cat-god/src/index.html
new file mode 100644
index 0000000..9803477
--- /dev/null
+++ b/the-cat-god/src/index.html
@@ -0,0 +1,325 @@
+<div class="svgWrap">
+<svg version="1.1" id="cat-god" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40vw" height="30.4vw" viewBox="0 0 172.9 131.4" style="enable-background:new 0 0 172.9 131.4;" xml:space="preserve"
+	>
+<style type="text/css">
+	.st0{fill:#E9E4EA;}
+	.st1{fill:#040E41;}
+	.st2{fill:#EDE8E2;}
+	.st3{fill:#FDD64A;}
+	.st4{fill:#221714;}
+	.st5{fill:#060001;}
+	.st6{fill:#D4394F;}
+	.st7{fill:#D43855;}
+	.st8{fill:#F7B3C2;}
+	.st9{fill:#ED71A3;}
+  .st10{fill:#CFCAE2;}
+  .st11{fill:#ffffff;}
+
+</style>
+<defs>
+  <filter id="goo" color-interpolation-filters="sRGB">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
+      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 17 -10" result="cm" />
+  </filter>
+
+  <!-- <filter id = "lightning">
+      <feSpecularLighting result="specOut"
+          specularExponent="100" lighting-color="#D4394E">
+        <fePointLight id="fePointLight" x="86.3" y="15.8" z="10"/>
+      </feSpecularLighting>
+      <feComposite in="SourceGraphic" in2="specOut"
+          operator="arithmetic" k1="1" k2="1" k3="1" k4="0"/>
+  </filter> -->
+
+  <filter id="breath" x="-50%" y="-50%" width="200%" height="200%">
+      <feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="2" result="turbulence"/>
+      <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="R" yChannelSelector="G"/>
+  </filter>
+
+  <circle id="bubbleL1" class="st1" cx="122.8" cy="55" r="4"/>
+  <circle id="bubbleL2" class="st1" cx="141.9" cy="52" r="3.5"/>
+  <circle id="bubbleL3" class="st1" cx="161" cy="59" r="3.5"/>
+  <circle id="bubbleR1" class="st1" cx="50" cy="55" r="4"/>
+  <circle id="bubbleR2" class="st1" cx="31" cy="52" r="3.5"/>
+  <circle id="bubbleR3" class="st1" cx="12" cy="59" r="3.5"/>
+  <!-- <circle id="bubble-l-3" class="st9" cx="150" cy="55" r="4"/> -->
+  <circle id="breathL" opacity="0.2" class="st11" cx="95" cy="90" r="3.5"/>
+  <circle id="breathR" opacity="0.2" class="st11" cx=76 cy="90" r="3"/>
+
+  <path id="eyeSKin-l-close" class="st4" d="M34.5,57.6c-4.5,0-9.9,3.7-10,10c0,6.2,5.4,9.2,10,9.2c5.3,0,10.1-2.6,10-9.2
+  C44.6,61.4,39.5,57.6,34.5,57.6z"/>
+  <path id="eyeSKin-r-close" class="st4" d="M138.8,57.6c-4.5,0-9.9,3.7-10,10c0,6.2,5.4,9.2,10,9.2c5.3,0,10.1-2.6,10-9.2
+  C148.9,61.4,143.7,57.6,138.8,57.6z"/>
+</defs>
+
+
+<path id="bg" class="st0" d="M162.1,131.4H10.8c-6,0-10.8-4.8-10.8-10.8V10.8C0,4.8,4.8,0,10.8,0h151.2c6,0,10.8,4.8,10.8,10.8
+	v109.8C172.9,126.6,168,131.4,162.1,131.4z"/>
+<path id="ec-r" class="st1" d="M150.7,55.7c-4.2-1-6-6.4-3.5-10.1c0.6-0.9-6.5,2.3-9.8,5.2c-2.3,2-5,2.8-7.2,1.4
+	c-2.3-1.5-1.8-3.9-1.5-6.2c0.2-1.7,0.5-3.4,0.7-5.1c-0.8-0.1-1.4,0-1.9,0.4c0,0-16.7,13.9-9.5,40.5c0.7,2.7,1.8,5.4,4.2,7.2
+	c-1.4-5.6,2.4-6.9,6.4-6.4c2.6,0.3,5.1,0.6,7.7,0.8c7.2,0.4,13.4-2.1,17.9-7.8c3.8-4.8,6.6-10.4,10-15.5c2.4-3.5,5-6.8,7.6-10
+	c0.3-0.4,0.7-0.8,1.1-1.2v-1.4c-3.4,2.1-6.9,4.3-10.3,6.4C158.9,56.1,154.8,56.7,150.7,55.7z"/>
+<path id="ec-l" class="st1" d="M0.9,49.9c2.6,3.3,5.3,6.6,7.6,10c3.4,5.1,6.2,10.7,10,15.5c4.5,5.7,10.7,8.2,17.9,7.8
+	c2.6-0.1,5.1-0.4,7.7-0.8c3.9-0.5,7.8,0.8,6.4,6.4c2.4-1.8,3.4-4.5,4.2-7.2c7.2-26.6-9.5-40.5-9.5-40.5c-0.4-0.4-1.1-0.4-1.9-0.4
+	c0.2,1.7,0.5,3.4,0.7,5.1c0.3,2.3,0.8,4.7-1.5,6.2c-2.1,1.4-4.8,0.6-7.2-1.4c-3.4-2.9-10.4-6.1-9.8-5.2c2.5,3.7,0.7,9.1-3.5,10.1
+	c-4.2,1-8.2,0.4-11.9-2C6.7,51.6,3.4,49.5,0,47.5V49C0.3,49.3,0.6,49.6,0.9,49.9z"/>
+
+  <g id="eye-r">
+	
+		<ellipse transform="matrix(0.9871 -0.1602 0.1602 0.9871 -9.0334 23.1013)" class="st2" cx="138.8" cy="67.6" rx="12.4" ry="12.4"/>
+	<g>
+		<path class="st3" d="M138.8,76.7c-5,0-9.2-4.1-9.2-9.2c0-5,4.1-9.2,9.2-9.2c5,0,9.2,4.1,9.2,9.2C147.9,72.6,143.8,76.7,138.8,76.7
+			z"/>
+		<g>
+			<path class="st4" d="M138.8,59.9c4.3,0,7.7,3.5,7.7,7.7s-3.5,7.7-7.7,7.7c-4.3,0-7.7-3.5-7.7-7.7S134.5,59.9,138.8,59.9
+				 M138.8,57c-5.9,0-10.6,4.7-10.6,10.6c0,5.9,4.7,10.6,10.6,10.6c5.9,0,10.6-4.7,10.6-10.6C149.4,61.7,144.6,57,138.8,57L138.8,57
+				z"/>
+		</g>
+	</g>
+	<g id="eye-r-0">
+		<path class="st5" d="M135.8,67.6c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9c0-1.6-1.3-2.9-2.9-2.9
+			C137.2,64.7,135.8,66,135.8,67.6z"/>
+		<path class="st4" d="M138.8,71c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4s3.4,1.5,3.4,3.4C142.2,69.5,140.6,71,138.8,71z
+			 M138.8,65.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.3,1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4C141.2,66.2,140.1,65.1,138.8,65.1z"/>
+	</g>
+</g>
+<path class="st6" d="M99.1,34.3c-0.7,0.8-1,1.2-1.4,1.6c-3.9,4.1-5.4,8.8-4.4,14.4c0.5,2.6,0.9,5.2,1.1,7.9c0.1,1.4-0.2,2.8-0.7,4.1
+	c-1.2,3.1-4.1,3.6-6.4,1.1c-0.3-0.3-0.5-0.6-0.9-1.1c-0.9,2.2-2.5,3-4.6,2.5c-2.1-0.5-3.2-2.1-3.4-4.1c-0.1-2,0-4,0.3-5.9
+	c0.5-3.8,1-7.7-0.4-11.4c-0.7-1.9-1.9-3.6-3-5.4c-0.5-0.8-1.1-1.5-1.7-2.2c0.2-0.2,0.3-0.3,0.5-0.5c1.2,1.2,2.5,2.3,3.5,3.7
+	c3,4.3,3.9,9,2.9,14.2c-0.3,1.6-0.5,3.3-0.8,4.9c0,0.2-0.1,0.5-0.1,0.7c0,2.1,1,3.8,2.4,4.1c1.5,0.2,2.2-0.6,2.6-1.8
+	c0.7-2.3,0-4-2-4.8c-0.2-0.1-0.4-0.2-0.7-0.4c2.2-0.7,3.2,0.1,4.3,3.6c0.8-2.1,1.4-3.9,3.6-4c-0.7,1.3-1.5,2.5-1.9,3.8
+	c-0.5,1.5,0.8,3.2,2.2,3.5c1.4,0.3,2.5-0.6,2.8-2.5c0.2-1.1,0.1-2.2,0-3.3c-0.4-2.8-0.7-5.6-1.3-8.4C90.7,44.1,94.4,36.3,99.1,34.3z
+	"/>
+<path id="eb-l-2" class="st3" d="M21.9,44.9c0-0.1-0.1-0.3-0.1-0.4c0,0,0,0,0-0.1c-1.5-3.2,0.4-5.5,4.6-4c1.4,0.5,2.4,0.8,3.1,1.1
+	c0.3,0.1,0.7,0.2,1,0.4c1.1,0.5,2,1.2,2.9,2c0,0,0,0,0,0c2.7,2.1,7.6,2.8,7.3-0.2c0,0,0,0,0,0c-0.2-1.2-0.3-2.4-0.4-3.5
+	c-0.5-9.3-5.2-15.6-13.6-19.4c-4.8-2.2-12.1-0.2-15.8,3.9c-3,3.3-3.8,7.5-4.2,11.7C6.1,43,8.7,49.7,15.1,52c4.1,1.5,7.4-0.5,7.4-4.8
+	C22.5,46.4,22.1,45.6,21.9,44.9z"/>
+<g id="eye-dot-l">
+	<path id="eye-dot-l-2" class="st6" d="M27.7,27.3c0,1.3-1.1,2.4-2.4,2.4c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4
+		C26.7,24.9,27.7,26,27.7,27.3z"/>
+	<path id="eye-dot-l-5" class="st6" d="M34.2,34.9c0,1.4-1.1,2.5-2.5,2.5c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5
+		C33.1,32.4,34.2,33.5,34.2,34.9z"/>
+	<circle id="eye-dot-l-1" class="st6" cx="13.7" cy="30.6" r="2.5"/>
+	<path id="eye-dot-l-3" class="st6" d="M23,34.3c0,1.2-0.9,2.1-2.1,2.1c-1.2,0-2.1-0.9-2.1-2.1c0-1.2,0.9-2.1,2.1-2.1
+		C22.1,32.2,23,33.1,23,34.3z"/>
+	<circle id="eye-dot-l-4" class="st6" cx="13.7" cy="42.3" r="2.5"/>
+</g>
+<path id="eb-r-2" class="st3" d="M165.9,36.4c-0.4-4.2-1.1-8.4-4.2-11.7c-3.7-4.1-11-6.1-15.8-3.9c-8.4,3.8-13.1,10-13.6,19.4
+	c-0.1,1.2-0.2,2.3-0.4,3.5c0,0,0,0,0,0c-0.3,3,4.6,2.3,7.3,0.2c0,0,0,0,0,0c0.9-0.8,1.8-1.5,2.9-2c0.3-0.1,0.7-0.3,1-0.4
+	c0.8-0.3,1.7-0.6,3.1-1.1c4.1-1.5,6,0.8,4.6,4c0,0,0,0,0,0.1c0,0.1,0,0.3-0.1,0.4c-0.3,0.8-0.7,1.5-0.7,2.3c0,4.4,3.3,6.3,7.4,4.8
+	C164,49.7,166.5,43,165.9,36.4z"/>
+<g id="eye-dot-r">
+	<path id="eye-dot-r-2" class="st6" d="M144.9,27.3c0,1.3,1.1,2.4,2.4,2.4c1.3,0,2.4-1.1,2.4-2.4c0-1.3-1.1-2.4-2.4-2.4
+		C146,24.9,144.9,26,144.9,27.3z"/>
+	<path id="eye-dot-r-5" class="st6" d="M138.4,34.9c0,1.4,1.1,2.5,2.5,2.5c1.4,0,2.5-1.1,2.5-2.5c0-1.4-1.1-2.5-2.5-2.5
+		C139.6,32.4,138.4,33.5,138.4,34.9z"/>
+	<circle id="eye-dot-r-1" class="st6" cx="159" cy="30.6" r="2.5"/>
+	<path id="eye-dot-r-3" class="st6" d="M149.6,34.3c0,1.2,0.9,2.1,2.1,2.1c1.2,0,2.1-0.9,2.1-2.1c0-1.2-0.9-2.1-2.1-2.1
+		C150.6,32.2,149.6,33.1,149.6,34.3z"/>
+	<circle id="eye-dot-r-4" class="st6" cx="159" cy="42.3" r="2.5"/>
+</g>
+<g id="eye-l">
+	
+	<ellipse transform="matrix(0.2298 -0.9732 0.9732 0.2298 -39.2087 85.6189)" class="st2" cx="34.5" cy="67.6" rx="12.4" ry="12.4"/>
+	<g id="eyeBall-l">
+		<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -37.6855 44.1805)" class="st3" cx="34.5" cy="67.6" rx="9.2" ry="9.2"/>
+		<g>
+			<path class="st4" d="M34.5,59.9c4.3,0,7.7,3.5,7.7,7.7c0,4.3-3.5,7.7-7.7,7.7c-4.3,0-7.7-3.5-7.7-7.7
+				C26.8,63.3,30.2,59.9,34.5,59.9 M34.5,57c-5.9,0-10.6,4.7-10.6,10.6c0,5.9,4.7,10.6,10.6,10.6c5.9,0,10.6-4.7,10.6-10.6
+				C45.1,61.7,40.3,57,34.5,57L34.5,57z"/>
+		</g>
+	
+    <g id="eye-l-0">
+      <path class="st5" d="M37.4,67.6c0,1.6-1.3,2.9-2.9,2.9c-1.6,0-2.9-1.3-2.9-2.9c0-1.6,1.3-2.9,2.9-2.9C36.1,64.7,37.4,66,37.4,67.6
+        z"/>
+      <path class="st4" d="M34.5,71c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C37.9,69.5,36.4,71,34.5,71z
+        M34.5,65.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.3,1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4C36.9,66.2,35.8,65.1,34.5,65.1z"/>
+    </g>
+  </g>
+</g>
+<g id="sun">
+	<circle id="sun0" opacity=1 class="st7" cx="86.3" cy="15.8" r="12.1"/>
+	<path id="sun1" class="st8" d="M86.3,28.8c-7.2,0-13.1-5.9-13.1-13.1c0-7.2,5.9-13.1,13.1-13.1c7.2,0,13.1,5.9,13.1,13.1
+		C99.4,23,93.5,28.8,86.3,28.8z M86.3,4.7c-6.1,0-11.1,5-11.1,11.1s5,11.1,11.1,11.1c6.1,0,11.1-5,11.1-11.1S92.4,4.7,86.3,4.7z"/>
+</g>
+<path class="st9" d="M100.4,80.3c-0.9-0.1-3.1,0.4-6-3.1c-2.8-3.3-7.7-3.3-7.7-3.3s-5,0-7.7,3.3c-2.9,3.4-5.1,3-6,3.1
+	c-3,0.4-4.8,2.4-4.8,6.9c0,4,11.2,10.3,18.6,5.8c7.4,4.5,18.6-1.8,18.6-5.8C105.2,82.7,103.4,80.6,100.4,80.3z"/>
+<g>
+	<path class="st1" d="M105.3,93.1c1.1-1.1,2-2.4,2.5-3.9c0.2-0.7,0.3-1.5,0.3-2.2c-0.1-0.8-0.1-1.5-0.3-2.3
+		c-0.3-1.5-0.8-2.9-1.7-4.1c-0.8-1.2-2-2-3.3-2.6c-0.7-0.3-1.4-0.4-2.1-0.5c-0.4-0.1-0.7,0-1.1-0.1c-0.4,0-1.1-0.1-1.5-0.4
+		c-0.9-0.5-1.5-1.1-2.1-1.7c-0.5-0.5-1-1-1.6-1.4c-2.3-1.7-5.3-2.6-8.1-2.7c-2.9,0.1-5.9,0.9-8.1,2.7c-0.6,0.4-1.1,0.9-1.6,1.4
+		c-0.6,0.6-1.1,1.3-2.1,1.7c-0.4,0.2-1.1,0.4-1.5,0.4c-0.4,0-0.7,0-1.1,0.1c-0.7,0.1-1.4,0.3-2.1,0.5c-1.3,0.5-2.5,1.4-3.3,2.5
+		c-0.8,1.2-1.4,2.6-1.7,4.1c-0.2,0.7-0.2,1.5-0.3,2.3c-0.1,0.7,0.1,1.5,0.3,2.2c0.5,1.4,1.4,2.7,2.5,3.9c-1.2-1-2.3-2.2-3-3.7
+		c-0.3-0.7-0.5-1.6-0.6-2.4c0-0.8,0-1.6,0.1-2.4c0.2-1.6,0.6-3.2,1.5-4.7c0.9-1.4,2.3-2.6,3.8-3.3c0.8-0.4,1.6-0.6,2.4-0.8
+		c0.4-0.1,0.9-0.1,1.3-0.1c0.3,0,0.5-0.1,0.7-0.2c0.5-0.3,1-0.8,1.4-1.3c0.6-0.6,1.1-1.3,1.8-1.8c1.3-1,2.9-1.8,4.4-2.3
+		c1.6-0.5,3.2-0.8,4.9-0.8c1.7,0,3.3,0.3,4.9,0.8c1.6,0.5,3.1,1.3,4.4,2.3c0.7,0.5,1.3,1.1,1.8,1.8c0.5,0.6,1,1.1,1.4,1.3
+		c0.2,0.1,0.4,0.2,0.7,0.2c0.4,0,0.9,0,1.3,0.1c0.8,0.1,1.7,0.4,2.4,0.7c1.6,0.7,2.9,1.8,3.8,3.3c0.9,1.4,1.4,3.1,1.5,4.7
+		c0.1,0.8,0.1,1.6,0.1,2.4c0,0.8-0.2,1.6-0.6,2.4C107.6,90.9,106.5,92.1,105.3,93.1z"/>
+</g>
+<path id="mouth" class="st7" d="M100.8,116.3c-13.3-4.7-14.1-18-14.1-18s-0.8,13.3-14.1,18c-13.3,4.7-21.6,4.8-27.4-3.4
+	c0,0,0.5,8,13.1,8.8c12.6,0.8,20.5-8.8,28.4-8.5c7.9-0.3,15.8,9.3,28.4,8.5c12.6-0.8,13.1-8.8,13.1-8.8
+	C122.4,121.1,114.1,121.1,100.8,116.3z"/>
+<path class="st1" d="M99.4,85.9c-0.9-0.8-4.5-2.7-6.7,1.9c-2.2,4.7-6,4.2-6,4.2s-3.8,0.5-6-4.2c-2.2-4.7-5.8-2.7-6.7-1.9
+	c-0.9,0.8-3.1,4.6,4.9,9.1c8,4.5,7.9,9.2,7.9,9.2s-0.1-4.7,7.9-9.2C102.5,90.5,100.3,86.7,99.4,85.9z"/>
+<path class="st1" d="M108.9,123.4c-5,1-9.7,0.6-14.1-2.2c-0.6-0.4-1.2-0.7-1.9-0.9c-2.1-0.7-4.2-1.2-6.3-1.3c-2.1,0-4.2,0.5-6.3,1.3
+	c-0.7,0.2-1.3,0.5-1.9,0.9c-4.4,2.9-9.1,3.2-14.1,2.2c0,0.2-0.1,0.4-0.1,0.6c1.9,0.5,3.8,1.1,5.8,1.3c4.2,0.6,7.8-1.4,11.4-3.2
+	c1.7-0.9,3.5-1.2,5.2-1c1.8-0.2,3.5,0.1,5.2,1c3.6,1.8,7.2,3.8,11.4,3.2c2-0.3,3.9-0.9,5.8-1.3C109,123.8,109,123.6,108.9,123.4z"/>
+<path class="st1" d="M105.5,127.1c-0.9,0.2-1.8,0.3-2.7,0.6c-3,0.9-5.9,0.4-8.4-1.2c-2.6-1.7-5.2-2.2-7.7-2c-2.5-0.2-5.1,0.4-7.7,2
+	c-2.5,1.6-5.4,2.1-8.4,1.2c-0.9-0.3-1.8-0.4-2.7-0.6c-0.1,0.2-0.1,0.3-0.2,0.5c1.4,0.6,2.8,1.5,4.3,1.8c2.7,0.5,5.3,0.3,7.8-0.9
+	c2.2-1.1,4.5-1.5,6.8-1.5c2.3-0.1,4.6,0.4,6.8,1.5c2.5,1.2,5.2,1.5,7.8,0.9c1.5-0.3,2.9-1.2,4.3-1.8
+	C105.6,127.4,105.6,127.2,105.5,127.1z"/>
+<g id="beard-l-1">
+	<g id="beard-root-l-1">
+		<path class="st1" d="M73.2,104.4c-0.2,0-0.4,0-0.6-0.1c-1.1-0.4-1.6-1.8-1.1-3.1c0.4-1.1,1.3-1.8,2.2-1.8c0.2,0,0.4,0,0.6,0.1
+			c1.1,0.4,1.6,1.8,1.1,3.1C75.1,103.7,74.2,104.4,73.2,104.4z"/>
+		<path class="st10" d="M73.7,100.1c0.1,0,0.3,0,0.4,0.1c0.8,0.3,1.1,1.3,0.7,2.2c-0.3,0.8-1,1.3-1.6,1.3c-0.1,0-0.3,0-0.4-0.1
+			c-0.8-0.3-1.1-1.3-0.7-2.2C72.4,100.6,73.1,100.1,73.7,100.1 M73.7,98.8L73.7,98.8c-1.2,0-2.4,0.9-2.8,2.2
+			c-0.6,1.7,0.1,3.4,1.5,3.9c0.3,0.1,0.6,0.1,0.8,0.1c1.2,0,2.4-0.9,2.8-2.2c0.6-1.7-0.1-3.4-1.5-3.9C74.3,98.8,74,98.8,73.7,98.8
+			L73.7,98.8z"/>
+	</g>
+	<path id="beard-tip-l-1" class="st1" d="M72.8,102.3c-0.9-1.7-2.2-3.3-3.6-4.7c-1.4-1.4-3-2.7-4.7-3.8c-1.7-1.1-3.5-2-5.5-2.8
+		c-0.9-0.4-1.9-0.7-2.9-1c-1-0.3-2-0.5-3-0.8c1,0.2,2,0.4,3,0.6c1,0.3,2,0.5,3,0.9c2,0.6,3.9,1.5,5.7,2.5c1.8,1,3.5,2.2,5.1,3.6
+		c1.6,1.4,3,2.9,4.1,4.9L72.8,102.3z"/>
+</g>
+<g id="beard-l-2">
+	<g id="beard-root-l-2">
+		<path class="st1" d="M66.2,112.7c-0.3,0-0.5,0-0.8-0.1c-1.2-0.4-1.8-1.9-1.4-3.2c0.4-1,1.3-1.7,2.3-1.7c0.3,0,0.5,0,0.8,0.1
+			c0.6,0.2,1.1,0.7,1.3,1.3c0.2,0.6,0.2,1.3,0,1.9C68.2,112,67.3,112.7,66.2,112.7z"/>
+		<path class="st10" d="M66.5,108.3c0.2,0,0.3,0,0.5,0.1c0.9,0.3,1.3,1.3,0.9,2.3c-0.3,0.8-1,1.3-1.7,1.3c-0.2,0-0.3,0-0.5-0.1
+			c-0.9-0.3-1.3-1.3-0.9-2.3C65.1,108.8,65.8,108.3,66.5,108.3 M66.5,106.9L66.5,106.9c-1.3,0-2.5,0.9-3,2.2c-0.3,0.8-0.3,1.7,0,2.4
+			c0.3,0.8,1,1.4,1.8,1.7c0.3,0.1,0.7,0.2,1,0.2c1.3,0,2.5-0.9,3-2.2c0.6-1.7-0.2-3.6-1.8-4.1C67.2,106.9,66.8,106.9,66.5,106.9
+			L66.5,106.9z"/>
+	</g>
+	<path id="beard-tip-l-2" class="st1" d="M65.9,110.8c-3.2-2.6-6.8-4.9-10.5-7c-3.7-2.1-7.5-3.9-11.5-5.3c-4-1.5-8.1-2.5-12.2-3.1
+		c-4.2-0.6-8.4-0.6-12.7-0.1c4.2-0.6,8.5-0.8,12.7-0.3c4.2,0.5,8.4,1.4,12.4,2.8c4,1.4,8,3.1,11.7,5.1c3.8,2,7.4,4.2,10.9,6.8
+		L65.9,110.8z"/>
+</g>
+<g id="beard-l-4">
+	<g id="beard-root-l-4">
+		<path class="st1" d="M54.7,110.2c-0.2,0-0.3,0-0.5-0.1c-0.5-0.2-0.8-0.6-1-1.1c-0.1-0.5-0.1-1,0.1-1.5c0.3-0.9,1.1-1.5,1.9-1.5
+			c0.2,0,0.3,0,0.5,0.1c0.9,0.3,1.3,1.5,0.9,2.6C56.2,109.6,55.5,110.2,54.7,110.2z"/>
+		<path class="st10" d="M55.2,106.5c0.1,0,0.2,0,0.3,0.1c0.6,0.2,0.9,1.1,0.6,1.9c-0.3,0.7-0.8,1.2-1.3,1.2c-0.1,0-0.2,0-0.3-0.1
+			c-0.6-0.2-0.9-1.1-0.6-1.9C54.1,107,54.7,106.5,55.2,106.5 M55.2,105.4c-1,0-2,0.8-2.4,1.9c-0.5,1.4,0,2.9,1.2,3.3
+			c0.2,0.1,0.4,0.1,0.7,0.1c1,0,2-0.8,2.4-1.9c0.5-1.4,0-2.9-1.2-3.3C55.6,105.5,55.4,105.4,55.2,105.4L55.2,105.4z"/>
+	</g>
+	<path id="beard-tip-l-4" class="st1" d="M54.7,108.7c-2.2-1.1-4.7-2-7.1-2.7c-2.4-0.7-4.9-1.3-7.5-1.7c-1.3-0.2-2.5-0.3-3.8-0.5
+		c-1.3-0.1-2.5-0.2-3.8-0.1c-2.6-0.1-5.1,0.2-7.7,0.6c2.5-0.5,5.1-0.8,7.6-0.9c1.3-0.1,2.6,0,3.9,0c1.3,0.1,2.6,0.1,3.9,0.3
+		c2.6,0.3,5.1,0.7,7.6,1.4c2.5,0.6,5,1.4,7.4,2.5L54.7,108.7z"/>
+</g>
+<g id="beard-l-3">
+	<g id="beard-root-l-3">
+		<path class="st1" d="M58.9,102.5c-0.2,0-0.4,0-0.6-0.1c-0.5-0.2-0.9-0.7-1.1-1.3c-0.2-0.5-0.1-1.2,0.1-1.8
+			c0.4-1.1,1.3-1.8,2.2-1.8c0.2,0,0.4,0,0.6,0.1c1.1,0.4,1.5,1.7,1,3C60.7,101.8,59.8,102.5,58.9,102.5z"/>
+		<path class="st10" d="M59.5,98.3c0.1,0,0.2,0,0.3,0.1c0.7,0.3,1,1.2,0.6,2.2c-0.3,0.8-0.9,1.3-1.6,1.3c-0.1,0-0.2,0-0.3-0.1
+			c-0.7-0.3-1-1.2-0.6-2.2C58.2,98.8,58.9,98.3,59.5,98.3 M59.5,97L59.5,97c-1.2,0-2.3,0.9-2.8,2.2c-0.3,0.7-0.3,1.5-0.1,2.2
+			c0.2,0.8,0.8,1.4,1.5,1.7c0.3,0.1,0.5,0.1,0.8,0.1c1.2,0,2.3-0.9,2.8-2.2c0.6-1.7,0-3.3-1.4-3.9C60,97,59.8,97,59.5,97L59.5,97z"
+			/>
+	</g>
+	<path id="beard-tip-l-3" class="st1" d="M58.2,99.8c-0.5-0.7-1.3-1.5-2.1-2.1c-0.8-0.7-1.7-1.2-2.6-1.8c-1.8-1.1-3.7-2-5.7-2.8
+		c-2-0.8-4-1.4-6.1-2l-3.1-0.7l-3.2-0.6l3.2,0.4l3.2,0.6c2.1,0.5,4.2,0.9,6.3,1.6c2.1,0.7,4.1,1.5,6,2.5c1,0.5,1.9,1.1,2.8,1.7
+		c0.9,0.7,1.8,1.3,2.6,2.3L58.2,99.8z"/>
+</g>
+<g id="beard-r-1">
+	<g id="beard-root-r-1">
+		<path class="st1" d="M99.4,104.4c-0.9,0-1.8-0.7-2.2-1.8c-0.5-1.3,0-2.7,1.1-3.1c0.2-0.1,0.4-0.1,0.6-0.1c0.9,0,1.8,0.7,2.2,1.8
+			c0.5,1.3,0,2.7-1.1,3.1C99.8,104.4,99.6,104.4,99.4,104.4L99.4,104.4z"/>
+		<path class="st10" d="M98.9,100.1c0.6,0,1.3,0.5,1.6,1.3c0.3,1,0,2-0.7,2.2c-0.1,0-0.3,0.1-0.4,0.1c-0.6,0-1.3-0.5-1.6-1.3
+			c-0.3-1,0-2,0.7-2.2C98.7,100.1,98.8,100.1,98.9,100.1 M98.9,98.8c-0.3,0-0.6,0-0.8,0.1c-1.4,0.5-2.1,2.3-1.5,3.9
+			c0.5,1.3,1.6,2.2,2.8,2.2c0.3,0,0.6,0,0.8-0.1c1.4-0.5,2.1-2.3,1.5-3.9C101.3,99.7,100.2,98.8,98.9,98.8L98.9,98.8z"/>
+	</g>
+	<path id="beard-tip-r-1" class="st1" d="M98.5,101.6c1.2-1.9,2.6-3.4,4.1-4.9c1.6-1.4,3.3-2.6,5.1-3.6c1.8-1,3.7-1.9,5.7-2.5
+		c1-0.4,2-0.6,3-0.9c1-0.2,2-0.4,3-0.6c-1,0.3-2,0.5-3,0.8c-1,0.4-2,0.6-2.9,1c-1.9,0.7-3.7,1.7-5.5,2.8c-1.7,1.1-3.3,2.4-4.7,3.8
+		c-1.4,1.4-2.7,3.1-3.6,4.7L98.5,101.6z"/>
+</g>
+<g id="beard-r-2">
+	<g id="beard-root-r-2">
+		<path class="st1" d="M106.4,112.7c-1,0-2-0.7-2.3-1.7c-0.5-1.3,0.1-2.8,1.4-3.2c0.2-0.1,0.5-0.1,0.8-0.1c1,0,2,0.7,2.3,1.7
+			c0.5,1.3-0.1,2.8-1.4,3.2C106.9,112.6,106.7,112.7,106.4,112.7L106.4,112.7z"/>
+		<path class="st10" d="M106.2,108.3c0.7,0,1.4,0.5,1.7,1.3c0.3,1-0.1,2-0.9,2.3c-0.2,0.1-0.3,0.1-0.5,0.1c-0.7,0-1.4-0.5-1.7-1.3
+			c-0.3-1,0.1-2,0.9-2.3C105.8,108.3,106,108.3,106.2,108.3 M106.2,106.9c-0.3,0-0.7,0.1-1,0.2c-1.6,0.6-2.4,2.4-1.8,4.1
+			c0.5,1.3,1.7,2.2,3,2.2c0.3,0,0.7-0.1,1-0.2c1.6-0.6,2.4-2.4,1.8-4.1C108.7,107.8,107.5,106.9,106.2,106.9L106.2,106.9z"/>
+	</g>
+	<path id="beard-tip-r-2" class="st1" d="M105.8,109.6c3.5-2.6,7.1-4.8,10.9-6.8c3.8-2,7.7-3.7,11.7-5.1c4-1.4,8.2-2.3,12.4-2.8
+		c4.2-0.5,8.5-0.3,12.7,0.3c-4.2-0.5-8.5-0.5-12.7,0.1c-4.2,0.6-8.3,1.7-12.2,3.1c-4,1.5-7.8,3.3-11.5,5.3c-3.7,2.1-7.2,4.4-10.5,7
+		L105.8,109.6z"/>
+</g>
+<g id="beard-r-4">
+	<g id="beard-root-r-4">
+		<path class="st1" d="M118,110.2c-0.8,0-1.5-0.6-1.9-1.5c-0.4-1.1,0-2.3,0.9-2.6c0.2-0.1,0.3-0.1,0.5-0.1c0.8,0,1.5,0.6,1.9,1.5
+			c0.2,0.5,0.2,1.1,0.1,1.5c-0.2,0.5-0.5,0.9-1,1.1C118.3,110.2,118.1,110.2,118,110.2z"/>
+		<path class="st10" d="M117.5,106.5c0.5,0,1.1,0.5,1.3,1.2c0.3,0.8,0.1,1.7-0.6,1.9c-0.1,0-0.2,0.1-0.3,0.1c-0.5,0-1.1-0.5-1.3-1.2
+			c-0.3-0.8-0.1-1.7,0.6-1.9C117.3,106.6,117.4,106.5,117.5,106.5 M117.5,105.4c-0.2,0-0.5,0-0.7,0.1c-1.2,0.4-1.7,1.9-1.2,3.3
+			c0.4,1.1,1.4,1.9,2.4,1.9c0.2,0,0.5,0,0.7-0.1c1.2-0.4,1.7-1.9,1.2-3.3C119.4,106.2,118.5,105.4,117.5,105.4L117.5,105.4z"/>
+	</g>
+	<path id="beard-tip-r-4" class="st1" d="M117.4,107.5c2.4-1,4.9-1.8,7.4-2.5c2.5-0.6,5.1-1.1,7.6-1.4c1.3-0.2,2.6-0.2,3.9-0.3
+		c1.3,0,2.6-0.1,3.9,0c2.6,0.1,5.1,0.4,7.6,0.9c-2.5-0.3-5.1-0.6-7.7-0.6c-1.3,0-2.6,0.1-3.8,0.1c-1.3,0.1-2.5,0.2-3.8,0.5
+		c-2.5,0.4-5,0.9-7.5,1.7c-2.4,0.7-4.8,1.6-7.1,2.7L117.4,107.5z"/>
+</g>
+<g id="beard-r-3">
+	<g id="beard-root-r-3">
+		<path class="st1" d="M113.7,102.5c-0.9,0-1.8-0.7-2.2-1.8c-0.5-1.3,0-2.6,1-3c0.2-0.1,0.4-0.1,0.6-0.1c0.9,0,1.8,0.7,2.2,1.8
+			c0.2,0.6,0.2,1.2,0.1,1.8c-0.2,0.6-0.6,1.1-1.1,1.3C114.1,102.5,113.9,102.5,113.7,102.5L113.7,102.5z"/>
+		<path class="st10" d="M113.2,98.3c0.6,0,1.3,0.5,1.6,1.3c0.3,1,0.1,2-0.6,2.2c-0.1,0-0.2,0.1-0.3,0.1c-0.6,0-1.3-0.5-1.6-1.3
+			c-0.3-1-0.1-2,0.6-2.2C112.9,98.3,113,98.3,113.2,98.3 M113.2,97c-0.3,0-0.5,0-0.8,0.1c-1.4,0.5-2,2.2-1.4,3.9
+			c0.5,1.3,1.6,2.2,2.8,2.2c0.3,0,0.5,0,0.8-0.1c0.7-0.3,1.3-0.9,1.5-1.7c0.2-0.7,0.2-1.4-0.1-2.2C115.5,97.8,114.3,97,113.2,97
+			L113.2,97z"/>
+	</g>
+	<path id="beard-tip-r-3" class="st1" d="M113.3,99c0.8-1,1.7-1.6,2.6-2.3c0.9-0.6,1.9-1.2,2.8-1.7c1.9-1,4-1.9,6-2.5
+		c2.1-0.7,4.2-1.2,6.3-1.6l3.2-0.6l3.2-0.4l-3.2,0.6l-3.1,0.7c-2.1,0.6-4.1,1.2-6.1,2c-2,0.8-3.9,1.7-5.7,2.8
+		c-0.9,0.6-1.8,1.1-2.6,1.8c-0.8,0.6-1.6,1.4-2.1,2.1L113.3,99z"/>
+</g>
+<path id="cheek-l" class="st1" d="M7.3,68.4c2.8,0.7,4.5,2.8,6.1,4.9c2.6,3.4,5.1,7,7.9,10.2c4,4.4,9.1,4.5,14.4,2.9
+	c2.1-0.6,4.2-1.5,6.3-1.9c1-0.2,2.2,0.4,3.3,1c-4.1-0.3-7.4,1.7-10.9,3.1c-3.8,1.5-7.9,2.3-11.6-0.1c-3.4-2.1-5.9-5.1-7.8-8.7
+	C12.9,75.8,11.5,71.1,7.3,68.4z"/>
+<path id="cheek-r" class="st1" d="M165.3,68.4c-2.8,0.7-4.5,2.8-6.1,4.9c-2.6,3.4-5.1,7-7.9,10.2c-4,4.4-9.1,4.5-14.4,2.9
+	c-2.1-0.6-4.2-1.5-6.3-1.9c-1-0.2-2.2,0.4-3.3,1c4.1-0.3,7.4,1.7,10.9,3.1c3.8,1.5,7.9,2.3,11.6-0.1c3.4-2.1,5.9-5.1,7.8-8.7
+	C159.8,75.8,161.1,71.1,165.3,68.4z"/>
+<path id="eb-l-1" class="st6" d="M42.2,29c-0.2-0.5-0.5-1-0.7-1.5c-0.2-0.4-0.4-0.9-0.6-1.3c-0.3-0.7-0.6-1.5-0.9-2.2
+	c-0.6-1.4-1.2-2.9-1.9-4.3c-0.7-1.4-1.4-2.8-2.2-4.1c-0.8-1.4-1.6-2.7-2.5-4c-0.4-0.7-0.9-1.3-1.3-1.9c-0.8-1.2-1.8-2.3-2.7-3.3
+	c-0.5-0.5-1-1-1.5-1.4c-1.1-0.9-2.2-1.7-3.4-2.4c-1.2-0.7-2.5-1.3-3.9-1.7c-0.7-0.2-1.4-0.5-2.1-0.6c-0.3-0.1-0.6-0.1-0.8-0.2
+	C17.3,0,17.1,0,16.8,0s-0.5,0-0.7,0c-0.2,0-0.5,0.1-0.7,0.1c-0.7,0.2-1.3,0.5-1.9,0.9c-0.2,0.1-0.4,0.3-0.6,0.4
+	c-1,0.7-1.8,1.5-2.6,2.4C9.6,4.7,8.9,5.7,8.3,6.6C7.7,7.5,7.1,8.5,6.5,9.5c-0.5,1-1.1,2-1.6,3c-0.4,0.8-0.8,1.6-1.2,2.4
+	c-0.3,0.6-0.6,1.4-0.9,2.3c-0.2,0.6-0.4,1.2-0.6,1.8c-0.1,0.3-0.2,0.7-0.3,1c-0.4,1.4-0.7,3-1,4.7c-0.4,2.6-0.6,5.6-0.4,8.9
+	c0,0.6,0.1,1.2,0.1,1.8c0,0.5,0.1,0.9,0.1,1.4c0,0.4,0.1,0.7,0.1,1.1c0,0.1,0,0.2,0,0.3c0.4,2.7,1,5.4,2.1,7.9c0,0,0,0,0,0
+	c0.1,0.2,0.2,0.4,0.2,0.6c0.2,0,0.4,0,0.6-0.1C4,45,4.2,43.3,4.2,41.7c0.2-5.5,1.1-10.8,4.1-15.5c2.9-4.6,6.8-7.5,12.8-7.5
+	c7.7,0,13.2,3.6,18.1,8.8c0.9,1,1.9,1.8,3.2,2.9c0-0.6,0.1-0.8,0-1c-0.1-0.1-0.1-0.2-0.2-0.4c0,0,0,0,0,0C42.2,29,42.2,29,42.2,29
+	C42.2,29,42.2,29,42.2,29C42.2,29,42.2,29,42.2,29z"/>
+<path id="eb-l-0" class="st8" d="M1,38.2c0-0.1,0-0.2,0-0.3c0-0.4-0.1-0.7-0.1-1.1c0-0.5-0.1-0.9-0.1-1.4c-0.1-0.6-0.1-1.2-0.1-1.8
+	c-0.1-3.3,0.1-6.2,0.4-8.9c0.3-1.7,0.6-3.3,1-4.7c0.1-0.4,0.2-0.7,0.3-1c0.2-0.7,0.4-1.3,0.6-1.8c0.3-0.9,0.6-1.6,0.9-2.3
+	c0.4-0.8,0.8-1.6,1.2-2.4c0.5-1,1-2,1.6-3c0.5-1,1.1-2,1.7-2.9c0.6-0.9,1.3-1.8,2.1-2.7C11.1,3,12,2.3,12.9,1.5
+	c0.2-0.2,0.4-0.3,0.6-0.4c0.6-0.4,1.2-0.7,1.9-0.9c0.2-0.1,0.4-0.1,0.7-0.1c0.2,0,0.5,0,0.7,0s0.5,0,0.8,0.1c0.3,0,0.5,0.1,0.8,0.2
+	c0.7,0.2,1.4,0.4,2.1,0.6c1.4,0.5,2.7,1.1,3.9,1.7c1.2,0.7,2.3,1.5,3.4,2.4c0.5,0.4,1,0.9,1.5,1.4c1,1,1.9,2.1,2.7,3.3
+	c0.5,0.6,0.9,1.3,1.3,1.9c0.9,1.3,1.7,2.6,2.5,4c0.8,1.4,1.5,2.7,2.2,4.1c0.7,1.4,1.3,2.8,1.9,4.3c0.3,0.7,0.6,1.4,0.9,2.2
+	c0.2,0.4,0.4,0.9,0.6,1.3c0.2,0.5,0.5,1,0.7,1.5c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c-0.1-2.7-0.4-3.7-0.4-3.7
+	c-2.3-6.1-4.7-11.4-8.3-16.5C30.6,4.7,27.2,1.8,23,0H12.1c-0.1,0.1-0.2,0.1-0.2,0.2c-4,3-6.1,7-8.1,10.9l-0.3,0.6
+	c-0.4,0.7-0.7,1.4-1,2.1l-0.2,0.5C1.4,16,0.6,18.3,0,21v19c0.9,2.2,2.1,4,3.1,6C2,43.6,1.3,40.9,1,38.2z"/>
+<path id="eb-r-1" class="st6" d="M171.7,37.9c0-0.4,0.1-0.7,0.1-1.1c0-0.5,0.1-0.9,0.1-1.4c0.1-0.6,0.1-1.2,0.1-1.8
+	c0.4-8.8-1.7-15.3-3.2-18.7c-0.4-0.8-0.8-1.6-1.2-2.4c-0.5-1-1-2-1.6-3c-0.3-0.5-0.5-1-0.8-1.5c-0.9-1.5-1.8-2.9-3-4.1
+	c-0.8-0.8-1.6-1.6-2.6-2.4c-0.2-0.2-0.4-0.3-0.6-0.4c-0.6-0.4-1.2-0.7-1.9-0.9c-0.4-0.1-0.9-0.2-1.4-0.2s-1,0.1-1.6,0.2
+	c-0.7,0.2-1.4,0.4-2.1,0.6c-0.7,0.2-1.4,0.5-2,0.8c-3.9,1.7-7,4.4-9.5,8c-1.4,1.9-2.6,3.9-3.8,5.9c-1.5,2.7-2.9,5.5-4.1,8.4
+	c-0.3,0.7-0.6,1.4-0.9,2.2c-0.2,0.4-0.4,0.9-0.6,1.3c-0.2,0.5-0.5,1-0.7,1.5c0,0.1-0.1,0.1-0.1,0.2c0,0.1-0.1,0.2-0.1,0.3
+	c0,0,0,0,0,0c0,0,0,0,0,0c-0.1,0.2,0,0.4,0,1c1.2-1.1,2.3-1.9,3.2-2.9c4.8-5.2,10.3-8.9,18.1-8.8c6,0,9.9,2.9,12.8,7.5
+	c3,4.7,3.9,10.1,4.1,15.5c0.1,1.6,0.2,3.3,0.3,4.9c0.2,0,0.4,0,0.6,0.1c0.1-0.2,0.2-0.4,0.2-0.6c1.1-2.5,1.7-5.2,2.1-7.9
+	C171.7,38.1,171.7,38,171.7,37.9z"/>
+<path id="eb-r-0" class="st8" d="M139.2,8.6c-3.6,5.1-6,10.4-8.3,16.5c0,0-0.3,1.1-0.4,3.7c0,0,0,0,0,0c0,0,0,0,0,0
+	c0.2-0.5,0.5-1,0.7-1.5c0.2-0.4,0.4-0.9,0.6-1.3c0.3-0.7,0.6-1.5,0.9-2.2c1.2-2.9,2.6-5.7,4.1-8.4c1.2-2,2.4-4,3.8-5.9
+	c2.5-3.6,5.7-6.2,9.5-8c0.6-0.3,1.3-0.6,2-0.8c0.7-0.2,1.4-0.5,2.1-0.6c0.6-0.2,1.1-0.2,1.6-0.2s1,0.1,1.4,0.2
+	c0.7,0.2,1.3,0.5,1.9,0.9c0.2,0.1,0.4,0.3,0.6,0.4c1,0.7,1.8,1.5,2.6,2.4c1.1,1.3,2.1,2.7,3,4.1c0.3,0.5,0.6,1,0.8,1.5
+	c0.5,1,1.1,2,1.6,3c0.4,0.8,0.8,1.6,1.2,2.4c1.5,3.5,3.6,10,3.2,18.7c0,0.6-0.1,1.2-0.1,1.8c0,0.5-0.1,0.9-0.1,1.4
+	c0,0.4-0.1,0.7-0.1,1.1c0,0.1,0,0.2,0,0.3c-0.4,2.7-1,5.4-2.1,7.9c0,0,0,0,0,0c1.1-2.3,2.4-4.1,3.3-6.7V22.1
+	c-0.7-3.2-1.6-5.8-2.4-7.8l-0.2-0.5c-0.3-0.7-0.7-1.4-1-2.1l-0.3-0.6c-2-3.9-4.1-8-8.1-10.9c-0.1-0.1-0.2-0.1-0.2-0.2h-10.8
+  C145.5,1.8,142,4.7,139.2,8.6z"/>
+<g id="eyeSKin">
+	<path id="eyeSKin-l-open" class="st4" d="M34.5,57.6c-3.7,0.1-9.2,2.3-10,10c-0.3-0.2,3.6-8.8,10-9.2c6.7,0.1,10.7,8.9,9.9,9.2
+		C44.1,60.8,38.9,57.3,34.5,57.6z"/>
+	<path id="eyeSKin-r-open" class="st4" d="M138.7,57.6c-3.7,0.1-9.2,2.3-10,10c-0.3-0.2,3.6-8.8,10-9.2c6.7,0.1,10.7,8.9,9.9,9.2
+		C148.4,60.8,143.1,57.3,138.7,57.6z"/>
+</g>
+<g class="bubbleWrap" filter="url(#goo)"></g>
+<g class="breathWrap" filter="url(#breath)"></g>
+</svg>
+<div class="credits">
+  <p>Designed by <a href="https://dribbble.com/shots/6544480-Chinese-Opera-Faces-89" target="_blank">Wang KongKong</a>. Animated by <a href="https://twitter.com/ChenXin_nth" target="_blank">Chen Xin</a></p>
+</div>
+</div>
\ No newline at end of file
diff --git a/the-cat-god/src/script.babel b/the-cat-god/src/script.babel
new file mode 100644
index 0000000..1fa5f17
--- /dev/null
+++ b/the-cat-god/src/script.babel
@@ -0,0 +1,215 @@
+const xmlns = "http://www.w3.org/2000/svg";
+const xlinkns = "http://www.w3.org/1999/xlink";
+
+const bubbleWrap = document.querySelector(".bubbleWrap");
+const breathWrap = document.querySelector(".breathWrap");
+const fePointLight = document.querySelector("#fePointLight");
+// let fePointLight_Z = fePointLight.z.animVal;
+// console.log(fePointLight.z)
+
+const masterTl = new TimelineMax();
+
+// const animatedObject = {
+//   fePointLightZ: 12,
+// }
+
+const leftEyeTl = new TimelineMax({paused: true});
+const rightEyeTl = new TimelineMax({paused: true});
+leftEyeTl.to("#eyeSKin-l-open", 0.06, {
+  morphSVG:"#eyeSKin-l-close"
+})
+  .to("#eyeSKin-l-open", 0.06, {
+  morphSVG:"#eyeSKin-l-open"
+})
+rightEyeTl.to("#eyeSKin-r-open", 0.06, {
+  morphSVG:"#eyeSKin-r-close"
+})
+  .to("#eyeSKin-r-open", 0.06, {
+  morphSVG:"#eyeSKin-r-open"
+})
+
+const id = setInterval(blinkEye, 1000);
+function blinkEye() {
+  if (Math.random() > 0.7) {
+    leftEyeTl.restart();
+    rightEyeTl.restart();
+  }
+}
+
+
+// sun
+// const tl = new TimelineMax({onUpdate: render, repeat: -1});
+// tl.to(animatedObject, 8, {
+//   fePointLightZ: 5,
+//   ease: CustomEase.create("custom", "M0,0 C0,0 0.037,0.772 0.04,0.782 0.04,0.77 0.084,-0.027 0.085,-0.053 0.094,-0.039 0.108,0.408 0.148,0.466 0.174,0.422 0.238,0.067 0.24,0.076 0.24,0.071 0.254,0.194 0.255,0.191 0.255,0.196 0.264,0.503 0.265,0.522 0.27,0.515 0.29,0.343 0.31,0.316 0.325,0.265 0.362,0.194 0.365,0.185 0.367,0.195 0.379,0.925 0.388,0.964 0.414,0.912 0.528,0.094 0.545,0.066 0.568,0.142 0.598,0.456 0.598,0.546 0.599,0.593 0.605,0.753 0.606,0.754 0.606,0.753 0.685,0.316 0.686,0.312 0.688,0.323 0.746,0.899 0.75,0.912 0.75,0.903 0.786,0.738 0.79,0.702 0.804,0.644 0.868,0.444 0.89,0.408 0.906,0.5 0.986,0.998 0.995,1.018 0.995,1.018 1,1 1,1"),
+// })
+// .to(animatedObject, 8, {
+//   fePointLightZ: 12,
+//   ease: CustomEase.create("custom", "M0,0 C0,0 0.037,0.772 0.04,0.782 0.04,0.77 0.084,-0.027 0.085,-0.053 0.094,-0.039 0.108,0.408 0.148,0.466 0.174,0.422 0.238,0.067 0.24,0.076 0.24,0.071 0.254,0.194 0.255,0.191 0.255,0.196 0.264,0.503 0.265,0.522 0.27,0.515 0.29,0.343 0.31,0.316 0.325,0.265 0.362,0.194 0.365,0.185 0.367,0.195 0.379,0.925 0.388,0.964 0.414,0.912 0.528,0.094 0.545,0.066 0.568,0.142 0.598,0.456 0.598,0.546 0.599,0.593 0.605,0.753 0.606,0.754 0.606,0.753 0.685,0.316 0.686,0.312 0.688,0.323 0.746,0.899 0.75,0.912 0.75,0.903 0.786,0.738 0.79,0.702 0.804,0.644 0.868,0.444 0.89,0.408 0.906,0.5 0.986,0.998 0.995,1.018 0.995,1.018 1,1 1,1"),
+// })
+// function render(){
+//   fePointLight.z.baseVal = animatedObject.fePointLightZ;
+// }
+
+// bubble around eyes
+let bubbleCount = 40;
+const bubble = {
+  bubbleL1: null,
+  bubbleL2: null,
+  bubbleL3: null,
+  bubbleR1: null,
+  bubbleR2: null,
+  bubbleR3: null,
+};
+const bubbleTl = {
+  bubbleL1_Tl: null,
+  bubbleL2_Tl: null,
+  bubbleL3_Tl: null,
+  bubbleR1_Tl: null,
+  bubbleR2_Tl: null,
+  bubbleR3_Tl: null,
+}
+
+while(bubbleCount-- > 0) {
+
+  for (let bubbleName in bubble) {
+    bubble[bubbleName] = document.createElementNS(xmlns, "use");
+    bubble[bubbleName].setAttributeNS(xlinkns, "xlink:href", `#${bubbleName}`);       
+    bubbleWrap.appendChild(bubble[bubbleName]);
+    TweenMax.set(bubble[bubbleName], {
+      transformOrigin: "50% 50%",
+    })
+  }
+
+  for (let bubbleTlName in bubbleTl) {
+    bubbleTl[bubbleTlName] = new TimelineMax();
+  }
+
+  bubbleTl.bubbleL1_Tl.to(bubble.bubbleL1, 0.5, {
+    physics2D: {
+      velocity: randomBetween(10, 70),
+      angle: randomBetween(-65, -75),
+      gravity: 0
+    },
+    scale:0.4,
+    repeat:-1,
+  });
+
+  bubbleTl.bubbleL2_Tl.to(bubble.bubbleL2, 0.5, {
+    physics2D: {
+      velocity: randomBetween(10, 70),
+      angle: randomBetween(-52, -68),
+      gravity: 0
+    },
+    scale:0.1,
+    repeat:-1,
+  });
+
+  bubbleTl.bubbleL3_Tl.to(bubble.bubbleL3, 0.5, {
+    physics2D: {
+      velocity: randomBetween(10, 70),
+      angle: randomBetween(-38, -50),
+      gravity: 0
+    },
+    scale:0.2,
+    repeat:-1,
+  });
+
+  bubbleTl.bubbleR1_Tl.to(bubble.bubbleR1, 0.5, {
+    physics2D: {
+      velocity: randomBetween(10, 70),
+      angle: randomBetween(-105, -115),
+      gravity: 0
+    },
+    scale:0.4,
+    repeat:-1,
+  });
+
+  bubbleTl.bubbleR2_Tl.to(bubble.bubbleR2, 0.5, {
+    physics2D: {
+      velocity: randomBetween(10, 70),
+      angle: randomBetween(-112, -128),
+      gravity: 0
+    },
+    scale:0.1,
+    repeat:-1,
+  });
+
+  bubbleTl.bubbleR3_Tl.to(bubble.bubbleR3, 0.5, {
+    physics2D: {
+      velocity: randomBetween(10, 70),
+      angle: randomBetween(-130, -142),
+      gravity: 0
+    },
+    scale:0.2,
+    repeat:-1,
+  });
+
+  for (let bubbleTlName in bubbleTl) {
+    masterTl.add(bubbleTl[bubbleTlName].timeScale(0.4), bubbleCount/20);   
+  }
+
+}
+
+// breath under nose
+let breathCount = 20;
+const breath = {
+  breathL: null,
+  breathR: null,
+}
+while(breathCount-- > 0) {
+  for (let breathName in breath) {
+    breath[breathName] = document.createElementNS(xmlns, "use");
+    breath[breathName].setAttributeNS(xlinkns, "xlink:href", `#${breathName}`);       
+    breathWrap.appendChild(breath[breathName]);
+    TweenMax.set(breath[breathName], {
+      transformOrigin: "50% 50%",
+    })
+  }
+  // console.log(breath)
+
+  const breathLTl = new TimelineMax();
+  const breathRTl = new TimelineMax();
+  // const bubbleL2_Tl = new TimelineMax();
+
+  breathLTl.to(breath.breathL, 2, {
+    physics2D: {
+      velocity: randomBetween(10, 30),
+      angle: randomBetween(60, 80),
+      gravity: 0
+    },
+    ease: Power2.easeIn,
+    scale: 4,
+    opacity: 0,
+    repeat:-1,
+    // repeatDelay:1,
+  });
+
+  breathRTl.to(breath.breathR, 2, {
+    physics2D: {
+      velocity: randomBetween(10, 30),
+      angle: randomBetween(100, 120),
+      gravity: 0
+    },
+    ease: Power2.easeIn,
+    scale: 4,
+    opacity: 0,
+    repeat:-1,
+    // repeatDelay:1,
+  });
+
+  masterTl.add(breathLTl, breathCount/100);   
+  masterTl.add(breathRTl, breathCount/100);   
+}
+
+
+
+
+
+
+// masterTl.seek(100);
+
+
+function randomBetween(min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
\ No newline at end of file
diff --git a/the-cat-god/src/style.css b/the-cat-god/src/style.css
new file mode 100644
index 0000000..9af5e79
--- /dev/null
+++ b/the-cat-god/src/style.css
@@ -0,0 +1,38 @@
+body {
+  margin: 0;
+  height: 100vh;
+  width: 100vw;
+  background: no-repeat 50%/cover url("https://user-images.githubusercontent.com/45284685/62537388-dfb5be80-b882-11e9-952f-cb2b88f49425.jpeg");
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+svg {
+  display: block;
+  width: 40vw;
+  height: 30.4vw;
+}
+.svgWrap {
+  border-radius: 3vw;
+  box-shadow: 0px 0px 5vw 2.4vw rgba(247,179,194,0.25), 
+    3vw 3vw 4.8vw 1.4vw rgba(247,179,194,0.35),
+    0px 5vw 3vw -3vw rgba(216,157,170,0.9),
+    inset 0px 0px 5vw 2.4vw rgba(247,179,194,0.3), 
+    inset 3vw 3vw 4.8vw 1.4vw rgba(247,179,194,0.35),
+    inset 0px 5vw 2.7vw -3vw rgba(216,157,170,1);
+}
+.credits {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  font-size: 14px;
+}
+p {
+  text-align: right;
+  margin: 2px;
+  color: #D4394F;
+}
+a {
+  color: #040E41;
+}
+
diff --git a/the-clips-of-css-v2-react-prism/README.markdown b/the-clips-of-css-v2-react-prism/README.markdown
new file mode 100644
index 0000000..53fecf2
--- /dev/null
+++ b/the-clips-of-css-v2-react-prism/README.markdown
@@ -0,0 +1,5 @@
+# The Clips of CSS v2 (React && Prism)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jh3y/pen/RwKpLYg](https://codepen.io/jh3y/pen/RwKpLYg).
+
+
diff --git a/the-clips-of-css-v2-react-prism/dist/index.html b/the-clips-of-css-v2-react-prism/dist/index.html
new file mode 100644
index 0000000..866b194
--- /dev/null
+++ b/the-clips-of-css-v2-react-prism/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - The Clips of CSS v2 (React &amp;&amp; Prism)</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="app"></div>
+<!-- partial -->
+  <script src='https://assets.codepen.io/605876/prism.js'></script><script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/the-clips-of-css-v2-react-prism/dist/script.js b/the-clips-of-css-v2-react-prism/dist/script.js
new file mode 100644
index 0000000..9eb388b
--- /dev/null
+++ b/the-clips-of-css-v2-react-prism/dist/script.js
@@ -0,0 +1,337 @@
+import React, {
+useRef,
+useEffect,
+useState } from
+'https://cdn.skypack.dev/react';
+
+import { render } from 'https://cdn.skypack.dev/react-dom';
+
+const { Prism } = window;
+
+const ROOT_NODE = document.querySelector('#app');
+
+const CLIPS = [
+{
+  label: 'Triangle Up',
+  code: `polygon(50% 0, 7% 75%,
+            93% 75%)`,
+  clip:
+  'polygon(50% 0, 7% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Triangle Left',
+  code: `polygon(75% 7%, 0% 50%,
+            75% 93%)`,
+  clip:
+  'polygon(75% 7%, 0% 50%, 75% 93%, 75% 93%, 75% 93%, 75% 93%, 75% 93%, 75% 93%, 75% 93%, 75% 93%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Triangle Down',
+  code: `polygon(93% 25%, 7% 25%,
+            50% 100%)`,
+  clip:
+  'polygon(93% 25%, 7% 25%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Triangle Right',
+  code: `polygon(100% 50%, 25% 7%,
+            25% 93%)`,
+  clip:
+  'polygon(100% 50%, 25% 7%, 25% 93%, 25% 93%, 25% 93%, 25% 93%, 25% 93%, 25% 93%, 25% 93%, 25% 93%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Triangle Top Left',
+  code: `polygon(87.5% 12.5%, 12.5% 12.5%,
+            12.5% 87.5%)`,
+  clip:
+  'polygon(87.5% 12.5%, 12.5% 12.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Triangle Top Right',
+  code: `polygon(87.5% 12.5%, 12.5% 12.5%,
+            87.5% 87.5%)`,
+  clip:
+  'polygon(87.5% 12.5%, 12.5% 12.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Triangle Bottom Left',
+  code: `polygon(12.5% 12.5%, 12.5% 87.5%,
+            87.5% 87.5%)`,
+  clip:
+  'polygon(12.5% 12.5%, 12.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Triangle Bottom Right',
+  code: `polygon(87.5% 12.5%, 12.5% 87.5%,
+            87.5% 87.5%)`,
+  clip:
+  'polygon(87.5% 12.5%, 12.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Square',
+  code: `polygon(15% 15%, 15% 85%,
+            85% 85%, 85% 15%)`,
+  clip:
+  'polygon(15% 15%, 15% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 15%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Rectangle',
+  code: `polygon(0% 25%, 0% 75%,
+            100% 75%, 100% 25%)`,
+  clip:
+  'polygon(0% 25%, 0% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 25%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Trapezoid',
+  code: `polygon(25% 20%, 5% 80%,
+            95% 80%, 75% 20%)`,
+  clip:
+  'polygon(25% 20%, 5% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 75% 20%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Parallelogram',
+  code: `polygon(5% 20%, 25% 80%,
+            95% 80%, 75% 20%)`,
+  clip:
+  'polygon(5% 20%, 25% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 75% 20%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Diamond Square',
+  code: `polygon(15% 50%, 50% 85%,
+            85% 50%, 50% 15%)`,
+  clip:
+  'polygon(15% 50%, 50% 85%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 50% 15%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Diamond Shield',
+  code: `polygon(15% 35%, 50% 85%,
+            85% 35%, 50% 15%)`,
+  clip:
+  'polygon(15% 35%, 50% 85%, 85% 35%, 85% 35%, 85% 35%, 85% 35%, 85% 35%, 85% 35%, 85% 35%, 50% 15%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Diamond Narrow',
+  code: `polygon(25% 50%, 50% 85%,
+            75% 50%, 50% 15%)`,
+  clip:
+  'polygon(25% 50%, 50% 85%, 75% 50%, 75% 50%, 75% 50%, 75% 50%, 75% 50%, 75% 50%, 75% 50%, 50% 15%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Pentagon',
+  code: `polygon(2% 35%, 21% 90%,
+            79% 90%, 98% 35%,
+            50% 0%)`,
+  clip:
+  'polygon(2% 35%, 21% 90%, 79% 90%, 79% 90%, 79% 90%, 79% 90%, 79% 90%, 79% 90%, 98% 35%, 50% 0%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Cut Diamond',
+  code: `polygon(2% 35%, 50% 90%,
+            98% 35%, 75% 0%,
+            25% 0%)`,
+  clip:
+  'polygon(2% 35%, 50% 90%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 75% 0%, 25% 0%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Base',
+  code: `polygon(2% 35%, 2% 85%,
+            98% 85%, 98% 35%,
+            50% 0%)`,
+  clip:
+  'polygon(2% 35%, 2% 85%, 98% 85%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 50% 0%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Flag',
+  code: `polygon(2% 15%, 2% 85%,
+            50% 65%, 98% 85%,
+            98% 15%)`,
+  clip:
+  'polygon(2% 15%, 2% 85%, 50% 65%, 98% 85%, 98% 85%, 98% 85%, 98% 85%, 98% 85%, 98% 85%, 98% 15%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Hexagon',
+  code: `polygon(0% 50%, 25% 93%,
+            75% 93%, 100% 50%,
+            75% 7%, 25% 7%)`,
+  clip:
+  'polygon(0% 50%, 25% 93%, 75% 93%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 75% 7%, 25% 7%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'House',
+  code: `polygon(0% 50%, 0% 93%,
+            100% 93%, 100% 50%,
+            75% 7%, 25% 7%)`,
+  clip:
+  'polygon(0% 50%, 0% 93%, 100% 93%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 75% 7%, 25% 7%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Pointer',
+  code: `polygon(25% 50%, 0% 75%,
+            75% 75%, 100% 50%,
+            75% 25%, 0% 25%)`,
+  clip:
+  'polygon(25% 50%, 0% 75%, 75% 75%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 75% 25%, 0% 25%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Chevron',
+  code: `polygon(0% 50%, 0% 75%,
+            50% 55%, 100% 75%,
+            100% 50%, 50% 25%)`,
+  clip:
+  'polygon(0% 50%, 0% 75%, 50% 55%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 50%, 50% 25%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Isotoxal Star',
+  code: `polygon(40% 45%, 7% 75%,
+            50% 60%, 93% 75%,
+            60% 45%, 50% 0%)`,
+  clip:
+  'polygon(40% 45%, 7% 75%, 50% 60%, 50% 60%, 50% 60%, 50% 60%, 50% 60%, 93% 75%, 60% 45%, 50% 0%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Heptagon',
+  code: `polygon(1% 61%, 28% 95%,
+            72% 95%, 99% 61%,
+            89% 19%, 50% 0%,
+            11% 19%)`,
+  clip:
+  'polygon(1% 61%, 28% 95%, 72% 95%, 99% 61%, 99% 61%, 99% 61%, 99% 61%, 89% 19%, 50% 0%, 11% 19%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Talk Bubble',
+  code: `polygon(0% 50%, 15% 60%,
+            15% 85%, 85% 85%,
+            85% 15%, 15% 15%,
+            15% 40%)`,
+  clip:
+  'polygon(0% 50%, 15% 60%, 15% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 15%, 15% 15%, 15% 40%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Octagon',
+  code: `polygon(4% 69%, 31% 96%,
+            69% 96%, 96% 69%,
+            96% 31%, 69% 4%,
+            31% 4%, 4% 31%)`,
+  clip:
+  'polygon(4% 69%, 31% 96%, 69% 96%, 96% 69%, 96% 31%, 96% 31%, 96% 31%, 69% 4%, 31% 4%, 4% 31%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Nonagon',
+  code: `polygon(7% 75%, 33% 97%,
+            67% 97%, 93% 75%,
+            99% 41%, 82% 12%,
+            50% 0%, 18% 12%,
+            1% 41%)`,
+  clip:
+  'polygon(7% 75%, 33% 97%, 67% 97%, 93% 75%, 99% 41%, 99% 41%, 82% 12%, 50% 0%, 18% 12%, 1% 41%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Decagon',
+  code: `polygon(10% 79%, 35% 98%,
+            65% 98%, 90% 79%,
+            100% 50%, 90% 21%,
+            65% 2%, 35% 2%,
+            10% 21%, 0% 50%)`,
+  clip:
+  'polygon(10% 79%, 35% 98%, 65% 98%, 90% 79%, 100% 50%, 90% 21%, 65% 2%, 35% 2%, 10% 21%, 0% 50%)',
+  hue: Math.random() * 360 },
+
+{
+  label: 'Star',
+  code: `polygon(20% 87%, 50% 66%,
+            80% 87%, 67% 54%,
+            96% 35%, 60% 35%,
+            50% 5%, 40% 35%,
+            4% 35%, 33% 54%)`,
+  clip:
+  'polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%)',
+  hue: Math.random() * 360 }];
+
+
+
+const getCode = clip => {
+  let RESULT = `.clipped {\n`;
+  RESULT += `  clip-path:\n`;
+  RESULT += `    ${CLIPS[clip].code};`;
+  return RESULT += '\n}';
+};
+
+const getCodeMarkup = code => {
+  return Prism.highlight(code, Prism.languages.css, 'css');
+};
+
+const App = () => {
+  const [clip, setClip] = useState(0);
+  const cssRef = useRef(getCodeMarkup(getCode(clip)));
+
+  useEffect(() => {
+    document.documentElement.style.setProperty('--hue', CLIPS[clip].hue);
+  }, [clip]);
+
+  const selectClip = e => {
+    cssRef.current = getCodeMarkup(getCode(e.target.value));
+    setClip(e.target.value);
+  };
+
+  return /*#__PURE__*/(
+    React.createElement("div", { className: "scene" }, /*#__PURE__*/
+    React.createElement("div", { className: "result" }, /*#__PURE__*/
+    React.createElement("pre", null, /*#__PURE__*/
+    React.createElement("code", {
+      className: "language-css",
+      dangerouslySetInnerHTML: { __html: cssRef.current } })), /*#__PURE__*/
+
+
+    React.createElement("div", {
+      className: "result__render",
+      style: {
+        '--clip': CLIPS[clip].clip,
+        '--hue': CLIPS[clip].hue } }, /*#__PURE__*/
+
+    React.createElement("div", { className: "clipped" }))), /*#__PURE__*/
+
+
+    React.createElement("div", { className: "controls" }, /*#__PURE__*/
+    React.createElement("div", { className: "select-wrapper" }, /*#__PURE__*/
+    React.createElement("select", { onChange: selectClip, value: clip },
+    CLIPS.map(({ label }, index) => /*#__PURE__*/
+    React.createElement("option", { key: index, value: index },
+    label)))))));
+
+
+
+
+
+
+
+};
+
+render( /*#__PURE__*/React.createElement(App, null), ROOT_NODE);
\ No newline at end of file
diff --git a/the-clips-of-css-v2-react-prism/dist/style.css b/the-clips-of-css-v2-react-prism/dist/style.css
new file mode 100644
index 0000000..79d2c70
--- /dev/null
+++ b/the-clips-of-css-v2-react-prism/dist/style.css
@@ -0,0 +1,323 @@
+/* PrismJS 1.23.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=css+css-extras&plugins=line-numbers+inline-color+toolbar+copy-to-clipboard */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #ccc;
+  background: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 2rem;
+  margin: 0;
+  overflow: auto;
+  outline: transparent;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #2d2d2d;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+pre {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #999;
+}
+.token.punctuation {
+  color: #ccc;
+}
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+  color: #e2777a;
+}
+.token.function-name {
+  color: #6196cc;
+}
+.token.boolean,
+.token.number,
+.token.function {
+  color: #f08d49;
+}
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+  color: #f8c555;
+}
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+  color: #cc99cd;
+}
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+  color: #7ec699;
+}
+.token.operator,
+.token.entity,
+.token.url {
+  color: #67cdcc;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+.token.inserted {
+  color: #008000;
+}
+pre[class*="language-"].line-numbers {
+  position: relative;
+  padding-left: 3.8em;
+  counter-reset: linenumber;
+}
+pre[class*="language-"].line-numbers > code {
+  position: relative;
+  white-space: inherit;
+}
+.line-numbers .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  font-size: 100%;
+  left: -3.8em;
+  width: 3em; /* works for line-numbers below 1000 lines */
+  letter-spacing: -1px;
+  border-right: 1px solid #999;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.line-numbers-rows > span {
+  display: block;
+  counter-increment: linenumber;
+}
+.line-numbers-rows > span:before {
+  content: counter(linenumber);
+  color: #999;
+  display: block;
+  padding-right: 0.8em;
+  text-align: right;
+}
+span.inline-color-wrapper {
+/*
+   * The background image is the following SVG inline in base 64:
+   *
+   * <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
+   *     <path fill="gray" d="M0 0h2v2H0z"/>
+   *     <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
+   * </svg>
+   *
+   * SVG-inlining explained:
+   * https://stackoverflow.com/a/21626701/7595472
+   */
+  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=");
+/* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */
+  background-position: center;
+  background-size: 110%;
+  display: inline-block;
+  height: 1.333ch;
+  width: 1.333ch;
+  margin: 0 0.333ch;
+  box-sizing: border-box;
+  border: 1px solid #fff;
+  outline: 1px solid rgba(0,0,0,0.5);
+  overflow: hidden;
+}
+span.inline-color {
+  display: block;
+/* To prevent visual glitches again */
+  height: 120%;
+  width: 120%;
+}
+div.code-toolbar {
+  height: 100%;
+  position: relative;
+}
+div.code-toolbar > .toolbar {
+  position: absolute;
+  top: 0.3em;
+  right: 0.2em;
+  opacity: 1;
+}
+div.code-toolbar:hover > .toolbar {
+  opacity: 1;
+}
+/* Separate line b/c rules are thrown out if selector is invalid.
+   IE11 and old Edge versions don't support :focus-within. */
+div.code-toolbar:focus-within > .toolbar {
+  opacity: 1;
+}
+div.code-toolbar > .toolbar .toolbar-item {
+  display: inline-block;
+}
+div.code-toolbar > .toolbar a {
+  cursor: pointer;
+}
+div.code-toolbar > .toolbar button {
+  background: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  overflow: visible;
+  padding: 0;
+  -webkit-user-select: none; /* for button */
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button {
+  color: #bbb;
+  font-size: 1rem;
+  padding: 0.5rem;
+  font-family: sans-serif;
+  background: #404040;
+  border-radius: 0.5em;
+  outline: transparent;
+  cursor: pointer;
+}
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+  background: #666;
+  text-decoration: none;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: hsl(var(--hue, 10), 90%, 90%);
+}
+#hue,
+#saturation,
+#lightness {
+  width: 200px;
+}
+label {
+  font-family: sans-serif;
+  font-weight: bold;
+  color: #242424;
+}
+.controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+select {
+  font-family: sans-serif;
+  padding: 0.5rem;
+  background: #fafafa;
+  border: 2px solid hsl(var(--hue, 10), 80%, 25%);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 15px 25px 15px 15px;
+  cursor: pointer;
+  font-size: 1rem;
+  outline: transparent;
+}
+.select-wrapper {
+  position: relative;
+}
+.select-wrapper:after {
+  content: "";
+  position: absolute;
+  height: 20px;
+  right: 8px;
+  top: 54%;
+  width: 16px;
+  transform: translate(0, -50%);
+  background: hsl(var(--hue, 10), 80%, 35%);
+  clip-path: polygon(0 10%, 50% 80%, 100% 10%);
+  -webkit-clip-path: polygon(0 10%, 50% 80%, 100% 10%);
+}
+.result {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr auto;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2rem 3rem -2rem #1a1a1a;
+  margin-bottom: 3rem;
+  background: #fff;
+}
+.result__render {
+  height: 200px;
+  width: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.clipped {
+  height: 85%;
+  width: 85%;
+  filter: drop-shadow(0 0 4px hsl(var(--hue, 10), 80%, 34%));
+  position: relative;
+}
+.clipped:after {
+  content: '';
+  background: hsl(var(--hue, 10), 80%, 64%);
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-clip-path: var(--clip, none);
+          clip-path: var(--clip, none);
+  transition: background 0.15s ease-in-out, -webkit-clip-path 0.15s ease-in-out;
+  transition: clip-path 0.15s ease-in-out, background 0.15s ease-in-out;
+  transition: clip-path 0.15s ease-in-out, background 0.15s ease-in-out, -webkit-clip-path 0.15s ease-in-out;
+}
\ No newline at end of file
diff --git a/the-clips-of-css-v2-react-prism/license.txt b/the-clips-of-css-v2-react-prism/license.txt
new file mode 100644
index 0000000..8633030
--- /dev/null
+++ b/the-clips-of-css-v2-react-prism/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Jhey (https://codepen.io/jh3y/pen/RwKpLYg)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/the-clips-of-css-v2-react-prism/src/index.pug b/the-clips-of-css-v2-react-prism/src/index.pug
new file mode 100644
index 0000000..4b9f0fe
--- /dev/null
+++ b/the-clips-of-css-v2-react-prism/src/index.pug
@@ -0,0 +1 @@
+#app
\ No newline at end of file
diff --git a/the-clips-of-css-v2-react-prism/src/script.babel b/the-clips-of-css-v2-react-prism/src/script.babel
new file mode 100644
index 0000000..b4452ef
--- /dev/null
+++ b/the-clips-of-css-v2-react-prism/src/script.babel
@@ -0,0 +1,337 @@
+import React, {
+  useRef,
+  useEffect,
+  useState,
+} from 'https://cdn.skypack.dev/react'
+
+import { render } from 'https://cdn.skypack.dev/react-dom'
+
+const { Prism } = window
+
+const ROOT_NODE = document.querySelector('#app')
+
+const CLIPS = [
+  {
+    label: 'Triangle Up',
+    code: `polygon(50% 0, 7% 75%,
+            93% 75%)`,
+    clip:
+      'polygon(50% 0, 7% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Triangle Left',
+    code: `polygon(75% 7%, 0% 50%,
+            75% 93%)`,
+    clip:
+      'polygon(75% 7%, 0% 50%, 75% 93%, 75% 93%, 75% 93%, 75% 93%, 75% 93%, 75% 93%, 75% 93%, 75% 93%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Triangle Down',
+    code: `polygon(93% 25%, 7% 25%,
+            50% 100%)`,
+    clip:
+      'polygon(93% 25%, 7% 25%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Triangle Right',
+    code: `polygon(100% 50%, 25% 7%,
+            25% 93%)`,
+    clip:
+      'polygon(100% 50%, 25% 7%, 25% 93%, 25% 93%, 25% 93%, 25% 93%, 25% 93%, 25% 93%, 25% 93%, 25% 93%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Triangle Top Left',
+    code: `polygon(87.5% 12.5%, 12.5% 12.5%,
+            12.5% 87.5%)`,
+    clip:
+      'polygon(87.5% 12.5%, 12.5% 12.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Triangle Top Right',
+    code: `polygon(87.5% 12.5%, 12.5% 12.5%,
+            87.5% 87.5%)`,
+    clip:
+      'polygon(87.5% 12.5%, 12.5% 12.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Triangle Bottom Left',
+    code: `polygon(12.5% 12.5%, 12.5% 87.5%,
+            87.5% 87.5%)`,
+    clip:
+      'polygon(12.5% 12.5%, 12.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Triangle Bottom Right',
+    code: `polygon(87.5% 12.5%, 12.5% 87.5%,
+            87.5% 87.5%)`,
+    clip:
+      'polygon(87.5% 12.5%, 12.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Square',
+    code: `polygon(15% 15%, 15% 85%,
+            85% 85%, 85% 15%)`,
+    clip:
+      'polygon(15% 15%, 15% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 15%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Rectangle',
+    code: `polygon(0% 25%, 0% 75%,
+            100% 75%, 100% 25%)`,
+    clip:
+      'polygon(0% 25%, 0% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 25%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Trapezoid',
+    code: `polygon(25% 20%, 5% 80%,
+            95% 80%, 75% 20%)`,
+    clip:
+      'polygon(25% 20%, 5% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 75% 20%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Parallelogram',
+    code: `polygon(5% 20%, 25% 80%,
+            95% 80%, 75% 20%)`,
+    clip:
+      'polygon(5% 20%, 25% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 75% 20%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Diamond Square',
+    code: `polygon(15% 50%, 50% 85%,
+            85% 50%, 50% 15%)`,
+    clip:
+      'polygon(15% 50%, 50% 85%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 50% 15%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Diamond Shield',
+    code: `polygon(15% 35%, 50% 85%,
+            85% 35%, 50% 15%)`,
+    clip:
+      'polygon(15% 35%, 50% 85%, 85% 35%, 85% 35%, 85% 35%, 85% 35%, 85% 35%, 85% 35%, 85% 35%, 50% 15%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Diamond Narrow',
+    code: `polygon(25% 50%, 50% 85%,
+            75% 50%, 50% 15%)`,
+    clip:
+      'polygon(25% 50%, 50% 85%, 75% 50%, 75% 50%, 75% 50%, 75% 50%, 75% 50%, 75% 50%, 75% 50%, 50% 15%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Pentagon',
+    code: `polygon(2% 35%, 21% 90%,
+            79% 90%, 98% 35%,
+            50% 0%)`,
+    clip:
+      'polygon(2% 35%, 21% 90%, 79% 90%, 79% 90%, 79% 90%, 79% 90%, 79% 90%, 79% 90%, 98% 35%, 50% 0%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Cut Diamond',
+    code: `polygon(2% 35%, 50% 90%,
+            98% 35%, 75% 0%,
+            25% 0%)`,
+    clip:
+      'polygon(2% 35%, 50% 90%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 75% 0%, 25% 0%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Base',
+    code: `polygon(2% 35%, 2% 85%,
+            98% 85%, 98% 35%,
+            50% 0%)`,
+    clip:
+      'polygon(2% 35%, 2% 85%, 98% 85%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 50% 0%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Flag',
+    code: `polygon(2% 15%, 2% 85%,
+            50% 65%, 98% 85%,
+            98% 15%)`,
+    clip:
+      'polygon(2% 15%, 2% 85%, 50% 65%, 98% 85%, 98% 85%, 98% 85%, 98% 85%, 98% 85%, 98% 85%, 98% 15%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Hexagon',
+    code: `polygon(0% 50%, 25% 93%,
+            75% 93%, 100% 50%,
+            75% 7%, 25% 7%)`,
+    clip:
+      'polygon(0% 50%, 25% 93%, 75% 93%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 75% 7%, 25% 7%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'House',
+    code: `polygon(0% 50%, 0% 93%,
+            100% 93%, 100% 50%,
+            75% 7%, 25% 7%)`,
+    clip:
+      'polygon(0% 50%, 0% 93%, 100% 93%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 75% 7%, 25% 7%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Pointer',
+    code: `polygon(25% 50%, 0% 75%,
+            75% 75%, 100% 50%,
+            75% 25%, 0% 25%)`,
+    clip:
+      'polygon(25% 50%, 0% 75%, 75% 75%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 75% 25%, 0% 25%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Chevron',
+    code: `polygon(0% 50%, 0% 75%,
+            50% 55%, 100% 75%,
+            100% 50%, 50% 25%)`,
+    clip:
+      'polygon(0% 50%, 0% 75%, 50% 55%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 50%, 50% 25%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Isotoxal Star',
+    code: `polygon(40% 45%, 7% 75%,
+            50% 60%, 93% 75%,
+            60% 45%, 50% 0%)`,
+    clip:
+      'polygon(40% 45%, 7% 75%, 50% 60%, 50% 60%, 50% 60%, 50% 60%, 50% 60%, 93% 75%, 60% 45%, 50% 0%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Heptagon',
+    code: `polygon(1% 61%, 28% 95%,
+            72% 95%, 99% 61%,
+            89% 19%, 50% 0%,
+            11% 19%)`,
+    clip:
+      'polygon(1% 61%, 28% 95%, 72% 95%, 99% 61%, 99% 61%, 99% 61%, 99% 61%, 89% 19%, 50% 0%, 11% 19%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Talk Bubble',
+    code: `polygon(0% 50%, 15% 60%,
+            15% 85%, 85% 85%,
+            85% 15%, 15% 15%,
+            15% 40%)`,
+    clip:
+      'polygon(0% 50%, 15% 60%, 15% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 15%, 15% 15%, 15% 40%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Octagon',
+    code: `polygon(4% 69%, 31% 96%,
+            69% 96%, 96% 69%,
+            96% 31%, 69% 4%,
+            31% 4%, 4% 31%)`,
+    clip:
+      'polygon(4% 69%, 31% 96%, 69% 96%, 96% 69%, 96% 31%, 96% 31%, 96% 31%, 69% 4%, 31% 4%, 4% 31%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Nonagon',
+    code: `polygon(7% 75%, 33% 97%,
+            67% 97%, 93% 75%,
+            99% 41%, 82% 12%,
+            50% 0%, 18% 12%,
+            1% 41%)`,
+    clip:
+      'polygon(7% 75%, 33% 97%, 67% 97%, 93% 75%, 99% 41%, 99% 41%, 82% 12%, 50% 0%, 18% 12%, 1% 41%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Decagon',
+    code: `polygon(10% 79%, 35% 98%,
+            65% 98%, 90% 79%,
+            100% 50%, 90% 21%,
+            65% 2%, 35% 2%,
+            10% 21%, 0% 50%)`,
+    clip:
+      'polygon(10% 79%, 35% 98%, 65% 98%, 90% 79%, 100% 50%, 90% 21%, 65% 2%, 35% 2%, 10% 21%, 0% 50%)',
+    hue: Math.random() * 360,
+  },
+  {
+    label: 'Star',
+    code: `polygon(20% 87%, 50% 66%,
+            80% 87%, 67% 54%,
+            96% 35%, 60% 35%,
+            50% 5%, 40% 35%,
+            4% 35%, 33% 54%)`,
+    clip:
+      'polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%)',
+    hue: Math.random() * 360,
+  },
+]
+
+const getCode = clip => {
+  let RESULT = `.clipped {\n`
+  RESULT += `  clip-path:\n`
+  RESULT += `    ${CLIPS[clip].code};`
+  return (RESULT += '\n}')
+}
+
+const getCodeMarkup = code => {
+  return Prism.highlight(code, Prism.languages.css, 'css')
+}
+
+const App = () => {
+  const [clip, setClip] = useState(0)
+  const cssRef = useRef(getCodeMarkup(getCode(clip)))
+
+  useEffect(() => {
+    document.documentElement.style.setProperty('--hue', CLIPS[clip].hue)
+  }, [clip])
+
+  const selectClip = e => {
+    cssRef.current = getCodeMarkup(getCode(e.target.value))
+    setClip(e.target.value)
+  }
+
+  return (
+    <div className="scene">
+      <div className="result">
+        <pre>
+          <code
+            className="language-css"
+            dangerouslySetInnerHTML={{ __html: cssRef.current }}
+          />
+        </pre>
+        <div
+          className="result__render"
+          style={{
+            '--clip': CLIPS[clip].clip,
+            '--hue': CLIPS[clip].hue,
+          }}>
+          <div className="clipped"></div>
+        </div>
+      </div>
+      <div className="controls">
+        <div className="select-wrapper">
+          <select onChange={selectClip} value={clip}>
+            {CLIPS.map(({ label }, index) => (
+              <option key={index} value={index}>
+                {label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+render(<App />, ROOT_NODE)
diff --git a/the-clips-of-css-v2-react-prism/src/style.styl b/the-clips-of-css-v2-react-prism/src/style.styl
new file mode 100644
index 0000000..ecac546
--- /dev/null
+++ b/the-clips-of-css-v2-react-prism/src/style.styl
@@ -0,0 +1,373 @@
+/* PrismJS 1.23.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=css+css-extras&plugins=line-numbers+inline-color+toolbar+copy-to-clipboard */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #ccc;
+  background: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 2rem;
+  margin: 0;
+  overflow: auto;
+  outline: transparent;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #2d2d2d;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+pre {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #999;
+}
+
+.token.punctuation {
+  color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+  color: #e2777a;
+}
+
+.token.function-name {
+  color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+  color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+  color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+  color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+  color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+  color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.inserted {
+  color: green;
+}
+
+pre[class*="language-"].line-numbers {
+  position: relative;
+  padding-left: 3.8em;
+  counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+  position: relative;
+  white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  font-size: 100%;
+  left: -3.8em;
+  width: 3em; /* works for line-numbers below 1000 lines */
+  letter-spacing: -1px;
+  border-right: 1px solid #999;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+}
+
+  .line-numbers-rows > span {
+    display: block;
+    counter-increment: linenumber;
+  }
+
+    .line-numbers-rows > span:before {
+      content: counter(linenumber);
+      color: #999;
+      display: block;
+      padding-right: 0.8em;
+      text-align: right;
+    }
+
+span.inline-color-wrapper {
+  /*
+   * The background image is the following SVG inline in base 64:
+   *
+   * <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
+   *     <path fill="gray" d="M0 0h2v2H0z"/>
+   *     <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
+   * </svg>
+   *
+   * SVG-inlining explained:
+   * https://stackoverflow.com/a/21626701/7595472
+   */
+  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=");
+  /* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */
+  background-position: center;
+  background-size: 110%;
+
+  display: inline-block;
+  height: 1.333ch;
+  width: 1.333ch;
+  margin: 0 .333ch;
+  box-sizing: border-box;
+  border: 1px solid white;
+  outline: 1px solid rgba(0,0,0,.5);
+  overflow: hidden;
+}
+
+span.inline-color {
+  display: block;
+  /* To prevent visual glitches again */
+  height: 120%;
+  width: 120%;
+}
+
+div.code-toolbar {
+  height: 100%;
+  position: relative;
+}
+
+div.code-toolbar > .toolbar {
+  position: absolute;
+  top: .3em;
+  right: .2em;
+  opacity: 1;
+}
+
+div.code-toolbar:hover > .toolbar {
+  opacity: 1;
+}
+
+/* Separate line b/c rules are thrown out if selector is invalid.
+   IE11 and old Edge versions don't support :focus-within. */
+div.code-toolbar:focus-within > .toolbar {
+  opacity: 1;
+}
+
+div.code-toolbar > .toolbar .toolbar-item {
+  display: inline-block;
+}
+
+div.code-toolbar > .toolbar a {
+  cursor: pointer;
+}
+
+div.code-toolbar > .toolbar button {
+  background: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  overflow: visible;
+  padding: 0;
+  -webkit-user-select: none; /* for button */
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button {
+  color: #bbb;
+  font-size: 1rem;
+  padding: 0.5rem;
+  font-family: sans-serif;
+  background: hsl(0, 0%, 25%);
+  border-radius: .5em;
+  outline: transparent;
+  cursor: pointer;
+}
+
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+  background: hsl(0, 0%, 40%);
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: 'hsl(%s, 90%, 90%)' % var(--hue, 10);
+}
+
+#hue,
+#saturation,
+#lightness {
+  width: 200px;
+}
+
+label {
+  font-family: sans-serif;
+  font-weight: bold;
+  color: hsl(0, 0%, 14%);
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+select {
+  font-family: sans-serif;
+  padding: 0.5rem;
+  background: #fafafa;
+  border: '2px solid hsl(%s, 80%, 25%)' % var(--hue, 10);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 15px 25px 15px 15px;
+  cursor: pointer;
+  font-size: 1rem;
+  outline: transparent;
+}
+
+.select-wrapper {
+  position: relative;
+}
+
+.select-wrapper:after {
+  content: "";
+  position: absolute;
+  height: 20px;
+  right: 8px;
+  top: 54%;
+  width: 16px;
+  transform: translate(0, -50%);
+  background: 'hsl(%s, 80%, 35%)' % var(--hue, 10);
+  clip-path: polygon(0 10%, 50% 80%, 100% 10%);
+  -webkit-clip-path: polygon(0 10%, 50% 80%, 100% 10%);
+}
+
+.result {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr auto;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2rem 3rem -2rem hsl(0, 0%, 10%);
+  margin-bottom: 3rem;
+  background: hsl(0, 0%, 100%);
+}
+
+.result__render {
+  height: 200px;
+  width: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.clipped {
+  height: 85%;
+  width: 85%;
+  filter: 'drop-shadow(0 0 4px hsl(%s, 80%, 34%))' % var(--hue, 10);
+  position: relative;
+}
+
+.clipped:after {
+  content: '';
+  background: 'hsl(%s, 80%, 64%)' % var(--hue, 10);
+  height: 100%;
+  width 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  clip-path: var(--clip, none);
+  transition: clip-path 0.15s ease-in-out, background 0.15s ease-in-out;
+}
\ No newline at end of file
diff --git a/the-cube-of-cubes-css-only/LICENSE.txt b/the-cube-of-cubes-css-only/LICENSE.txt
new file mode 100644
index 0000000..8dc6e7b
--- /dev/null
+++ b/the-cube-of-cubes-css-only/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Amit Sheen (https://codepen.io/amit_sheen/pen/yLxLOKR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/the-cube-of-cubes-css-only/README.md b/the-cube-of-cubes-css-only/README.md
new file mode 100644
index 0000000..c00bc87
--- /dev/null
+++ b/the-cube-of-cubes-css-only/README.md
@@ -0,0 +1,4 @@
+# The Cube of Cubes! (CSS only)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/amit_sheen/pen/yLxLOKR](https://codepen.io/amit_sheen/pen/yLxLOKR).
+
diff --git a/the-cube-of-cubes-css-only/dist/index.html b/the-cube-of-cubes-css-only/dist/index.html
new file mode 100644
index 0000000..62da8dc
--- /dev/null
+++ b/the-cube-of-cubes-css-only/dist/index.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - The Cube of Cubes! (CSS only)</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="scene">
+  <div class="cubes">
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="mainCube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://assets.codepen.io/1948355/twitterButton-2.1.0.js'></script>
+</body>
+</html>
diff --git a/the-cube-of-cubes-css-only/dist/style.css b/the-cube-of-cubes-css-only/dist/style.css
new file mode 100644
index 0000000..d918177
--- /dev/null
+++ b/the-cube-of-cubes-css-only/dist/style.css
@@ -0,0 +1,3537 @@
+* {
+  padding: 0;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+body {
+  background-image: radial-gradient(circle, #111, #000 800px);
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  perspective: 1200px;
+}
+body *:not(:empty) {
+  transform-style: preserve-3d;
+}
+
+.scene {
+  position: absolute;
+  font-size: 24px;
+  -webkit-animation: sceneRotate 45s infinite linear;
+          animation: sceneRotate 45s infinite linear;
+}
+@-webkit-keyframes sceneRotate {
+  to {
+    transform: rotateX(360deg) rotateY(1080deg);
+  }
+}
+@keyframes sceneRotate {
+  to {
+    transform: rotateX(360deg) rotateY(1080deg);
+  }
+}
+
+.cubes {
+  -webkit-animation: cubesScale 10s infinite linear;
+          animation: cubesScale 10s infinite linear;
+}
+@-webkit-keyframes cubesScale {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(1.66666, 1.66666, 1.66666);
+  }
+}
+@keyframes cubesScale {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(1.66666, 1.66666, 1.66666);
+  }
+}
+
+.cube, .mainCube {
+  position: absolute;
+  inset: calc(var(--hSize) * -1);
+}
+
+.cube {
+  --hSize: 0.5em;
+  --bgSize: 5em;
+}
+.cube:nth-child(1) {
+  --x: -2;
+  --y: -2;
+  --z: -2;
+}
+.cube:nth-child(2) {
+  --x: -2;
+  --y: -2;
+  --z: -1;
+}
+.cube:nth-child(3) {
+  --x: -2;
+  --y: -2;
+  --z: 0;
+}
+.cube:nth-child(4) {
+  --x: -2;
+  --y: -2;
+  --z: 1;
+}
+.cube:nth-child(5) {
+  --x: -2;
+  --y: -2;
+  --z: 2;
+}
+.cube:nth-child(6) {
+  --x: -2;
+  --y: -1;
+  --z: -2;
+}
+.cube:nth-child(7) {
+  --x: -2;
+  --y: -1;
+  --z: -1;
+}
+.cube:nth-child(8) {
+  --x: -2;
+  --y: -1;
+  --z: 0;
+}
+.cube:nth-child(9) {
+  --x: -2;
+  --y: -1;
+  --z: 1;
+}
+.cube:nth-child(10) {
+  --x: -2;
+  --y: -1;
+  --z: 2;
+}
+.cube:nth-child(11) {
+  --x: -2;
+  --y: 0;
+  --z: -2;
+}
+.cube:nth-child(12) {
+  --x: -2;
+  --y: 0;
+  --z: -1;
+}
+.cube:nth-child(13) {
+  --x: -2;
+  --y: 0;
+  --z: 0;
+}
+.cube:nth-child(14) {
+  --x: -2;
+  --y: 0;
+  --z: 1;
+}
+.cube:nth-child(15) {
+  --x: -2;
+  --y: 0;
+  --z: 2;
+}
+.cube:nth-child(16) {
+  --x: -2;
+  --y: 1;
+  --z: -2;
+}
+.cube:nth-child(17) {
+  --x: -2;
+  --y: 1;
+  --z: -1;
+}
+.cube:nth-child(18) {
+  --x: -2;
+  --y: 1;
+  --z: 0;
+}
+.cube:nth-child(19) {
+  --x: -2;
+  --y: 1;
+  --z: 1;
+}
+.cube:nth-child(20) {
+  --x: -2;
+  --y: 1;
+  --z: 2;
+}
+.cube:nth-child(21) {
+  --x: -2;
+  --y: 2;
+  --z: -2;
+}
+.cube:nth-child(22) {
+  --x: -2;
+  --y: 2;
+  --z: -1;
+}
+.cube:nth-child(23) {
+  --x: -2;
+  --y: 2;
+  --z: 0;
+}
+.cube:nth-child(24) {
+  --x: -2;
+  --y: 2;
+  --z: 1;
+}
+.cube:nth-child(25) {
+  --x: -2;
+  --y: 2;
+  --z: 2;
+}
+.cube:nth-child(26) {
+  --x: -1;
+  --y: -2;
+  --z: -2;
+}
+.cube:nth-child(27) {
+  --x: -1;
+  --y: -2;
+  --z: -1;
+}
+.cube:nth-child(28) {
+  --x: -1;
+  --y: -2;
+  --z: 0;
+}
+.cube:nth-child(29) {
+  --x: -1;
+  --y: -2;
+  --z: 1;
+}
+.cube:nth-child(30) {
+  --x: -1;
+  --y: -2;
+  --z: 2;
+}
+.cube:nth-child(31) {
+  --x: -1;
+  --y: -1;
+  --z: -2;
+}
+.cube:nth-child(32) {
+  --x: -1;
+  --y: -1;
+  --z: 2;
+}
+.cube:nth-child(33) {
+  --x: -1;
+  --y: 0;
+  --z: -2;
+}
+.cube:nth-child(34) {
+  --x: -1;
+  --y: 0;
+  --z: 2;
+}
+.cube:nth-child(35) {
+  --x: -1;
+  --y: 1;
+  --z: -2;
+}
+.cube:nth-child(36) {
+  --x: -1;
+  --y: 1;
+  --z: 2;
+}
+.cube:nth-child(37) {
+  --x: -1;
+  --y: 2;
+  --z: -2;
+}
+.cube:nth-child(38) {
+  --x: -1;
+  --y: 2;
+  --z: -1;
+}
+.cube:nth-child(39) {
+  --x: -1;
+  --y: 2;
+  --z: 0;
+}
+.cube:nth-child(40) {
+  --x: -1;
+  --y: 2;
+  --z: 1;
+}
+.cube:nth-child(41) {
+  --x: -1;
+  --y: 2;
+  --z: 2;
+}
+.cube:nth-child(42) {
+  --x: 0;
+  --y: -2;
+  --z: -2;
+}
+.cube:nth-child(43) {
+  --x: 0;
+  --y: -2;
+  --z: -1;
+}
+.cube:nth-child(44) {
+  --x: 0;
+  --y: -2;
+  --z: 0;
+}
+.cube:nth-child(45) {
+  --x: 0;
+  --y: -2;
+  --z: 1;
+}
+.cube:nth-child(46) {
+  --x: 0;
+  --y: -2;
+  --z: 2;
+}
+.cube:nth-child(47) {
+  --x: 0;
+  --y: -1;
+  --z: -2;
+}
+.cube:nth-child(48) {
+  --x: 0;
+  --y: -1;
+  --z: 2;
+}
+.cube:nth-child(49) {
+  --x: 0;
+  --y: 0;
+  --z: -2;
+}
+.cube:nth-child(50) {
+  --x: 0;
+  --y: 0;
+  --z: 2;
+}
+.cube:nth-child(51) {
+  --x: 0;
+  --y: 1;
+  --z: -2;
+}
+.cube:nth-child(52) {
+  --x: 0;
+  --y: 1;
+  --z: 2;
+}
+.cube:nth-child(53) {
+  --x: 0;
+  --y: 2;
+  --z: -2;
+}
+.cube:nth-child(54) {
+  --x: 0;
+  --y: 2;
+  --z: -1;
+}
+.cube:nth-child(55) {
+  --x: 0;
+  --y: 2;
+  --z: 0;
+}
+.cube:nth-child(56) {
+  --x: 0;
+  --y: 2;
+  --z: 1;
+}
+.cube:nth-child(57) {
+  --x: 0;
+  --y: 2;
+  --z: 2;
+}
+.cube:nth-child(58) {
+  --x: 1;
+  --y: -2;
+  --z: -2;
+}
+.cube:nth-child(59) {
+  --x: 1;
+  --y: -2;
+  --z: -1;
+}
+.cube:nth-child(60) {
+  --x: 1;
+  --y: -2;
+  --z: 0;
+}
+.cube:nth-child(61) {
+  --x: 1;
+  --y: -2;
+  --z: 1;
+}
+.cube:nth-child(62) {
+  --x: 1;
+  --y: -2;
+  --z: 2;
+}
+.cube:nth-child(63) {
+  --x: 1;
+  --y: -1;
+  --z: -2;
+}
+.cube:nth-child(64) {
+  --x: 1;
+  --y: -1;
+  --z: 2;
+}
+.cube:nth-child(65) {
+  --x: 1;
+  --y: 0;
+  --z: -2;
+}
+.cube:nth-child(66) {
+  --x: 1;
+  --y: 0;
+  --z: 2;
+}
+.cube:nth-child(67) {
+  --x: 1;
+  --y: 1;
+  --z: -2;
+}
+.cube:nth-child(68) {
+  --x: 1;
+  --y: 1;
+  --z: 2;
+}
+.cube:nth-child(69) {
+  --x: 1;
+  --y: 2;
+  --z: -2;
+}
+.cube:nth-child(70) {
+  --x: 1;
+  --y: 2;
+  --z: -1;
+}
+.cube:nth-child(71) {
+  --x: 1;
+  --y: 2;
+  --z: 0;
+}
+.cube:nth-child(72) {
+  --x: 1;
+  --y: 2;
+  --z: 1;
+}
+.cube:nth-child(73) {
+  --x: 1;
+  --y: 2;
+  --z: 2;
+}
+.cube:nth-child(74) {
+  --x: 2;
+  --y: -2;
+  --z: -2;
+}
+.cube:nth-child(75) {
+  --x: 2;
+  --y: -2;
+  --z: -1;
+}
+.cube:nth-child(76) {
+  --x: 2;
+  --y: -2;
+  --z: 0;
+}
+.cube:nth-child(77) {
+  --x: 2;
+  --y: -2;
+  --z: 1;
+}
+.cube:nth-child(78) {
+  --x: 2;
+  --y: -2;
+  --z: 2;
+}
+.cube:nth-child(79) {
+  --x: 2;
+  --y: -1;
+  --z: -2;
+}
+.cube:nth-child(80) {
+  --x: 2;
+  --y: -1;
+  --z: -1;
+}
+.cube:nth-child(81) {
+  --x: 2;
+  --y: -1;
+  --z: 0;
+}
+.cube:nth-child(82) {
+  --x: 2;
+  --y: -1;
+  --z: 1;
+}
+.cube:nth-child(83) {
+  --x: 2;
+  --y: -1;
+  --z: 2;
+}
+.cube:nth-child(84) {
+  --x: 2;
+  --y: 0;
+  --z: -2;
+}
+.cube:nth-child(85) {
+  --x: 2;
+  --y: 0;
+  --z: -1;
+}
+.cube:nth-child(86) {
+  --x: 2;
+  --y: 0;
+  --z: 0;
+}
+.cube:nth-child(87) {
+  --x: 2;
+  --y: 0;
+  --z: 1;
+}
+.cube:nth-child(88) {
+  --x: 2;
+  --y: 0;
+  --z: 2;
+}
+.cube:nth-child(89) {
+  --x: 2;
+  --y: 1;
+  --z: -2;
+}
+.cube:nth-child(90) {
+  --x: 2;
+  --y: 1;
+  --z: -1;
+}
+.cube:nth-child(91) {
+  --x: 2;
+  --y: 1;
+  --z: 0;
+}
+.cube:nth-child(92) {
+  --x: 2;
+  --y: 1;
+  --z: 1;
+}
+.cube:nth-child(93) {
+  --x: 2;
+  --y: 1;
+  --z: 2;
+}
+.cube:nth-child(94) {
+  --x: 2;
+  --y: 2;
+  --z: -2;
+}
+.cube:nth-child(95) {
+  --x: 2;
+  --y: 2;
+  --z: -1;
+}
+.cube:nth-child(96) {
+  --x: 2;
+  --y: 2;
+  --z: 0;
+}
+.cube:nth-child(97) {
+  --x: 2;
+  --y: 2;
+  --z: 1;
+}
+.cube:nth-child(98) {
+  --x: 2;
+  --y: 2;
+  --z: 2;
+}
+.cube:nth-child(1) {
+  -webkit-animation: cubeTransform0 10s infinite ease-in;
+          animation: cubeTransform0 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform0 {
+  0%, 14.89% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  29.89% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  44.89%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform0 {
+  0%, 14.89% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  29.89% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  44.89%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(2) {
+  -webkit-animation: cubeTransform1 10s infinite ease-in;
+          animation: cubeTransform1 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform1 {
+  0%, 57.84% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  72.84% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  87.84%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform1 {
+  0%, 57.84% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  72.84% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  87.84%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(3) {
+  -webkit-animation: cubeTransform2 10s infinite ease-in;
+          animation: cubeTransform2 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform2 {
+  0%, 52.04% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  67.04% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  82.04%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform2 {
+  0%, 52.04% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  67.04% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  82.04%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(4) {
+  -webkit-animation: cubeTransform3 10s infinite ease-in;
+          animation: cubeTransform3 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform3 {
+  0%, 2.39% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  17.39% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  32.39%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform3 {
+  0%, 2.39% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  17.39% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  32.39%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(5) {
+  -webkit-animation: cubeTransform4 10s infinite ease-in;
+          animation: cubeTransform4 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform4 {
+  0%, 42.82% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  57.82% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  72.82%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform4 {
+  0%, 42.82% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  57.82% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  72.82%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(6) {
+  -webkit-animation: cubeTransform5 10s infinite ease-in;
+          animation: cubeTransform5 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform5 {
+  0%, 12.9% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  27.9% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  42.9%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform5 {
+  0%, 12.9% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  27.9% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  42.9%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(7) {
+  -webkit-animation: cubeTransform6 10s infinite ease-in;
+          animation: cubeTransform6 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform6 {
+  0%, 66.25% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  81.25% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  96.25%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform6 {
+  0%, 66.25% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  81.25% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  96.25%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(8) {
+  -webkit-animation: cubeTransform7 10s infinite ease-in;
+          animation: cubeTransform7 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform7 {
+  0%, 35.03% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  50.03% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  65.03%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform7 {
+  0%, 35.03% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  50.03% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  65.03%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(9) {
+  -webkit-animation: cubeTransform8 10s infinite ease-in;
+          animation: cubeTransform8 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform8 {
+  0%, 10.76% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  25.76% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  40.76%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform8 {
+  0%, 10.76% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  25.76% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  40.76%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(10) {
+  -webkit-animation: cubeTransform9 10s infinite ease-in;
+          animation: cubeTransform9 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform9 {
+  0%, 25.59% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  40.59% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  55.59%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform9 {
+  0%, 25.59% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  40.59% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  55.59%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(11) {
+  -webkit-animation: cubeTransform10 10s infinite ease-in;
+          animation: cubeTransform10 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform10 {
+  0%, 56.18% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  71.18% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  86.18%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform10 {
+  0%, 56.18% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  71.18% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  86.18%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(12) {
+  -webkit-animation: cubeTransform11 10s infinite ease-in;
+          animation: cubeTransform11 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform11 {
+  0%, 10.08% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  25.08% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  40.08%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform11 {
+  0%, 10.08% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  25.08% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  40.08%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(13) {
+  -webkit-animation: cubeTransform12 10s infinite ease-in;
+          animation: cubeTransform12 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform12 {
+  0%, 59.05% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  74.05% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  89.05%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform12 {
+  0%, 59.05% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  74.05% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  89.05%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(14) {
+  -webkit-animation: cubeTransform13 10s infinite ease-in;
+          animation: cubeTransform13 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform13 {
+  0%, 54.19% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  69.19% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  84.19%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform13 {
+  0%, 54.19% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  69.19% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  84.19%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(15) {
+  -webkit-animation: cubeTransform14 10s infinite ease-in;
+          animation: cubeTransform14 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform14 {
+  0%, 29.74% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  44.74% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  59.74%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform14 {
+  0%, 29.74% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  44.74% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  59.74%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(16) {
+  -webkit-animation: cubeTransform15 10s infinite ease-in;
+          animation: cubeTransform15 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform15 {
+  0%, 16.77% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  31.77% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  46.77%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform15 {
+  0%, 16.77% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  31.77% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  46.77%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(17) {
+  -webkit-animation: cubeTransform16 10s infinite ease-in;
+          animation: cubeTransform16 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform16 {
+  0%, 48.41% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  63.41% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  78.41%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform16 {
+  0%, 48.41% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  63.41% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  78.41%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(18) {
+  -webkit-animation: cubeTransform17 10s infinite ease-in;
+          animation: cubeTransform17 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform17 {
+  0%, 37.34% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  52.34% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  67.34%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform17 {
+  0%, 37.34% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  52.34% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  67.34%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(19) {
+  -webkit-animation: cubeTransform18 10s infinite ease-in;
+          animation: cubeTransform18 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform18 {
+  0%, 5.53% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  20.53% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  35.53%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform18 {
+  0%, 5.53% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  20.53% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  35.53%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(20) {
+  -webkit-animation: cubeTransform19 10s infinite ease-in;
+          animation: cubeTransform19 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform19 {
+  0%, 35.87% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  50.87% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  65.87%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform19 {
+  0%, 35.87% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  50.87% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  65.87%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(21) {
+  -webkit-animation: cubeTransform20 10s infinite ease-in;
+          animation: cubeTransform20 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform20 {
+  0%, 51.04% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  66.04% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  81.04%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform20 {
+  0%, 51.04% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  66.04% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  81.04%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(22) {
+  -webkit-animation: cubeTransform21 10s infinite ease-in;
+          animation: cubeTransform21 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform21 {
+  0%, 48.91% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  63.91% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  78.91%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform21 {
+  0%, 48.91% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  63.91% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  78.91%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(23) {
+  -webkit-animation: cubeTransform22 10s infinite ease-in;
+          animation: cubeTransform22 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform22 {
+  0%, 64.75% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  79.75% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  94.75%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform22 {
+  0%, 64.75% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  79.75% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  94.75%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(24) {
+  -webkit-animation: cubeTransform23 10s infinite ease-in;
+          animation: cubeTransform23 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform23 {
+  0%, 30.72% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  45.72% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  60.72%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform23 {
+  0%, 30.72% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  45.72% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  60.72%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(25) {
+  -webkit-animation: cubeTransform24 10s infinite ease-in;
+          animation: cubeTransform24 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform24 {
+  0%, 49.27% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  64.27% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  79.27%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform24 {
+  0%, 49.27% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  64.27% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  79.27%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(26) {
+  -webkit-animation: cubeTransform25 10s infinite ease-in;
+          animation: cubeTransform25 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform25 {
+  0%, 1.05% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  16.05% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  31.05%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform25 {
+  0%, 1.05% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  16.05% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  31.05%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(27) {
+  -webkit-animation: cubeTransform26 10s infinite ease-in;
+          animation: cubeTransform26 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform26 {
+  0%, 68.5% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  83.5% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  98.5%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform26 {
+  0%, 68.5% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  83.5% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  98.5%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(28) {
+  -webkit-animation: cubeTransform27 10s infinite ease-in;
+          animation: cubeTransform27 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform27 {
+  0%, 22.23% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  37.23% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  52.23%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform27 {
+  0%, 22.23% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  37.23% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  52.23%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(29) {
+  -webkit-animation: cubeTransform28 10s infinite ease-in;
+          animation: cubeTransform28 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform28 {
+  0%, 32.52% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  47.52% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  62.52%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform28 {
+  0%, 32.52% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  47.52% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  62.52%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(30) {
+  -webkit-animation: cubeTransform29 10s infinite ease-in;
+          animation: cubeTransform29 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform29 {
+  0%, 13.61% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  28.61% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  43.61%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform29 {
+  0%, 13.61% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  28.61% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  43.61%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(31) {
+  -webkit-animation: cubeTransform30 10s infinite ease-in;
+          animation: cubeTransform30 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform30 {
+  0%, 44.3% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  59.3% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  74.3%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform30 {
+  0%, 44.3% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  59.3% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  74.3%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(32) {
+  -webkit-animation: cubeTransform31 10s infinite ease-in;
+          animation: cubeTransform31 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform31 {
+  0%, 68.01% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  83.01% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  98.01%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform31 {
+  0%, 68.01% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  83.01% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  98.01%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(33) {
+  -webkit-animation: cubeTransform32 10s infinite ease-in;
+          animation: cubeTransform32 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform32 {
+  0%, 27.45% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  42.45% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  57.45%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform32 {
+  0%, 27.45% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  42.45% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  57.45%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(34) {
+  -webkit-animation: cubeTransform33 10s infinite ease-in;
+          animation: cubeTransform33 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform33 {
+  0%, 35.09% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  50.09% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  65.09%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform33 {
+  0%, 35.09% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  50.09% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  65.09%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(35) {
+  -webkit-animation: cubeTransform34 10s infinite ease-in;
+          animation: cubeTransform34 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform34 {
+  0%, 57.41% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  72.41% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  87.41%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform34 {
+  0%, 57.41% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  72.41% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  87.41%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(36) {
+  -webkit-animation: cubeTransform35 10s infinite ease-in;
+          animation: cubeTransform35 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform35 {
+  0%, 28.19% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  43.19% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  58.19%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform35 {
+  0%, 28.19% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  43.19% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  58.19%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(37) {
+  -webkit-animation: cubeTransform36 10s infinite ease-in;
+          animation: cubeTransform36 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform36 {
+  0%, 7.75% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  22.75% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  37.75%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform36 {
+  0%, 7.75% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  22.75% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  37.75%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(38) {
+  -webkit-animation: cubeTransform37 10s infinite ease-in;
+          animation: cubeTransform37 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform37 {
+  0%, 48.73% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  63.73% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  78.73%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform37 {
+  0%, 48.73% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  63.73% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  78.73%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(39) {
+  -webkit-animation: cubeTransform38 10s infinite ease-in;
+          animation: cubeTransform38 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform38 {
+  0%, 27.85% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  42.85% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  57.85%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform38 {
+  0%, 27.85% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  42.85% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  57.85%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(40) {
+  -webkit-animation: cubeTransform39 10s infinite ease-in;
+          animation: cubeTransform39 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform39 {
+  0%, 10.07% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  25.07% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  40.07%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform39 {
+  0%, 10.07% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  25.07% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  40.07%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(41) {
+  -webkit-animation: cubeTransform40 10s infinite ease-in;
+          animation: cubeTransform40 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform40 {
+  0%, 30.44% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  45.44% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  60.44%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform40 {
+  0%, 30.44% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  45.44% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  60.44%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(42) {
+  -webkit-animation: cubeTransform41 10s infinite ease-in;
+          animation: cubeTransform41 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform41 {
+  0%, 34.26% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  49.26% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  64.26%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform41 {
+  0%, 34.26% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  49.26% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  64.26%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(43) {
+  -webkit-animation: cubeTransform42 10s infinite ease-in;
+          animation: cubeTransform42 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform42 {
+  0%, 16.58% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  31.58% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  46.58%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform42 {
+  0%, 16.58% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  31.58% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  46.58%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(44) {
+  -webkit-animation: cubeTransform43 10s infinite ease-in;
+          animation: cubeTransform43 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform43 {
+  0%, 61.63% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  76.63% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  91.63%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform43 {
+  0%, 61.63% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  76.63% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  91.63%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(45) {
+  -webkit-animation: cubeTransform44 10s infinite ease-in;
+          animation: cubeTransform44 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform44 {
+  0%, 16.19% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  31.19% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  46.19%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform44 {
+  0%, 16.19% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  31.19% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  46.19%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(46) {
+  -webkit-animation: cubeTransform45 10s infinite ease-in;
+          animation: cubeTransform45 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform45 {
+  0%, 56.82% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  71.82% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  86.82%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform45 {
+  0%, 56.82% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  71.82% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  86.82%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(47) {
+  -webkit-animation: cubeTransform46 10s infinite ease-in;
+          animation: cubeTransform46 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform46 {
+  0%, 50.74% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  65.74% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  80.74%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform46 {
+  0%, 50.74% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  65.74% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  80.74%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(48) {
+  -webkit-animation: cubeTransform47 10s infinite ease-in;
+          animation: cubeTransform47 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform47 {
+  0%, 62.73% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  77.73% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  92.73%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform47 {
+  0%, 62.73% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  77.73% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  92.73%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(49) {
+  -webkit-animation: cubeTransform48 10s infinite ease-in;
+          animation: cubeTransform48 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform48 {
+  0%, 52.7% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  67.7% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  82.7%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform48 {
+  0%, 52.7% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  67.7% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  82.7%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(50) {
+  -webkit-animation: cubeTransform49 10s infinite ease-in;
+          animation: cubeTransform49 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform49 {
+  0%, 0.75% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  15.75% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  30.75%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform49 {
+  0%, 0.75% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  15.75% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  30.75%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(51) {
+  -webkit-animation: cubeTransform50 10s infinite ease-in;
+          animation: cubeTransform50 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform50 {
+  0%, 19.84% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  34.84% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  49.84%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform50 {
+  0%, 19.84% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  34.84% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  49.84%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(52) {
+  -webkit-animation: cubeTransform51 10s infinite ease-in;
+          animation: cubeTransform51 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform51 {
+  0%, 27.87% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  42.87% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  57.87%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform51 {
+  0%, 27.87% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  42.87% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  57.87%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(53) {
+  -webkit-animation: cubeTransform52 10s infinite ease-in;
+          animation: cubeTransform52 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform52 {
+  0%, 10.89% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  25.89% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  40.89%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform52 {
+  0%, 10.89% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  25.89% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  40.89%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(54) {
+  -webkit-animation: cubeTransform53 10s infinite ease-in;
+          animation: cubeTransform53 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform53 {
+  0%, 33.5% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  48.5% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  63.5%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform53 {
+  0%, 33.5% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  48.5% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  63.5%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(55) {
+  -webkit-animation: cubeTransform54 10s infinite ease-in;
+          animation: cubeTransform54 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform54 {
+  0%, 50.56% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  65.56% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  80.56%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform54 {
+  0%, 50.56% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  65.56% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  80.56%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(56) {
+  -webkit-animation: cubeTransform55 10s infinite ease-in;
+          animation: cubeTransform55 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform55 {
+  0%, 45.27% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  60.27% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  75.27%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform55 {
+  0%, 45.27% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  60.27% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  75.27%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(57) {
+  -webkit-animation: cubeTransform56 10s infinite ease-in;
+          animation: cubeTransform56 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform56 {
+  0%, 66.95% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  81.95% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  96.95%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform56 {
+  0%, 66.95% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  81.95% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  96.95%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(58) {
+  -webkit-animation: cubeTransform57 10s infinite ease-in;
+          animation: cubeTransform57 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform57 {
+  0%, 13.17% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  28.17% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  43.17%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform57 {
+  0%, 13.17% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  28.17% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  43.17%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(59) {
+  -webkit-animation: cubeTransform58 10s infinite ease-in;
+          animation: cubeTransform58 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform58 {
+  0%, 39.92% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  54.92% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  69.92%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform58 {
+  0%, 39.92% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  54.92% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  69.92%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(60) {
+  -webkit-animation: cubeTransform59 10s infinite ease-in;
+          animation: cubeTransform59 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform59 {
+  0%, 38.87% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  53.87% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  68.87%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform59 {
+  0%, 38.87% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  53.87% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  68.87%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(61) {
+  -webkit-animation: cubeTransform60 10s infinite ease-in;
+          animation: cubeTransform60 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform60 {
+  0%, 19.74% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  34.74% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  49.74%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform60 {
+  0%, 19.74% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  34.74% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  49.74%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(62) {
+  -webkit-animation: cubeTransform61 10s infinite ease-in;
+          animation: cubeTransform61 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform61 {
+  0%, 56.56% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  71.56% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  86.56%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform61 {
+  0%, 56.56% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  71.56% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  86.56%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(63) {
+  -webkit-animation: cubeTransform62 10s infinite ease-in;
+          animation: cubeTransform62 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform62 {
+  0%, 43% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  58% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  73%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform62 {
+  0%, 43% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  58% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  73%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(64) {
+  -webkit-animation: cubeTransform63 10s infinite ease-in;
+          animation: cubeTransform63 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform63 {
+  0%, 55.6% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  70.6% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  85.6%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform63 {
+  0%, 55.6% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  70.6% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  85.6%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(65) {
+  -webkit-animation: cubeTransform64 10s infinite ease-in;
+          animation: cubeTransform64 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform64 {
+  0%, 0.94% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  15.94% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  30.94%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform64 {
+  0%, 0.94% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  15.94% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  30.94%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(66) {
+  -webkit-animation: cubeTransform65 10s infinite ease-in;
+          animation: cubeTransform65 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform65 {
+  0%, 8.4% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  23.4% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  38.4%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform65 {
+  0%, 8.4% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  23.4% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  38.4%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(67) {
+  -webkit-animation: cubeTransform66 10s infinite ease-in;
+          animation: cubeTransform66 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform66 {
+  0%, 62.59% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  77.59% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  92.59%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform66 {
+  0%, 62.59% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  77.59% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  92.59%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(68) {
+  -webkit-animation: cubeTransform67 10s infinite ease-in;
+          animation: cubeTransform67 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform67 {
+  0%, 40.08% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  55.08% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  70.08%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform67 {
+  0%, 40.08% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  55.08% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  70.08%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(69) {
+  -webkit-animation: cubeTransform68 10s infinite ease-in;
+          animation: cubeTransform68 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform68 {
+  0%, 13.22% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  28.22% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  43.22%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform68 {
+  0%, 13.22% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  28.22% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  43.22%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(70) {
+  -webkit-animation: cubeTransform69 10s infinite ease-in;
+          animation: cubeTransform69 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform69 {
+  0%, 17.39% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  32.39% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  47.39%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform69 {
+  0%, 17.39% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  32.39% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  47.39%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(71) {
+  -webkit-animation: cubeTransform70 10s infinite ease-in;
+          animation: cubeTransform70 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform70 {
+  0%, 46.79% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  61.79% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  76.79%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform70 {
+  0%, 46.79% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  61.79% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  76.79%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(72) {
+  -webkit-animation: cubeTransform71 10s infinite ease-in;
+          animation: cubeTransform71 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform71 {
+  0%, 48.52% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  63.52% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  78.52%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform71 {
+  0%, 48.52% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  63.52% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  78.52%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(73) {
+  -webkit-animation: cubeTransform72 10s infinite ease-in;
+          animation: cubeTransform72 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform72 {
+  0%, 55.24% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  70.24% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  85.24%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform72 {
+  0%, 55.24% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  70.24% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  85.24%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(74) {
+  -webkit-animation: cubeTransform73 10s infinite ease-in;
+          animation: cubeTransform73 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform73 {
+  0%, 63.1% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  78.1% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  93.1%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform73 {
+  0%, 63.1% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  78.1% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  93.1%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(75) {
+  -webkit-animation: cubeTransform74 10s infinite ease-in;
+          animation: cubeTransform74 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform74 {
+  0%, 23.03% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  38.03% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  53.03%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform74 {
+  0%, 23.03% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  38.03% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  53.03%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(76) {
+  -webkit-animation: cubeTransform75 10s infinite ease-in;
+          animation: cubeTransform75 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform75 {
+  0%, 14.63% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  29.63% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  44.63%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform75 {
+  0%, 14.63% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  29.63% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  44.63%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(77) {
+  -webkit-animation: cubeTransform76 10s infinite ease-in;
+          animation: cubeTransform76 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform76 {
+  0%, 29.51% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  44.51% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  59.51%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform76 {
+  0%, 29.51% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  44.51% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  59.51%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(78) {
+  -webkit-animation: cubeTransform77 10s infinite ease-in;
+          animation: cubeTransform77 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform77 {
+  0%, 44.11% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  59.11% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  74.11%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform77 {
+  0%, 44.11% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  59.11% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  74.11%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(79) {
+  -webkit-animation: cubeTransform78 10s infinite ease-in;
+          animation: cubeTransform78 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform78 {
+  0%, 49.86% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  64.86% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  79.86%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform78 {
+  0%, 49.86% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  64.86% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  79.86%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(80) {
+  -webkit-animation: cubeTransform79 10s infinite ease-in;
+          animation: cubeTransform79 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform79 {
+  0%, 43.04% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  58.04% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  73.04%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform79 {
+  0%, 43.04% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  58.04% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  73.04%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(81) {
+  -webkit-animation: cubeTransform80 10s infinite ease-in;
+          animation: cubeTransform80 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform80 {
+  0%, 26.2% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  41.2% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  56.2%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform80 {
+  0%, 26.2% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  41.2% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  56.2%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(82) {
+  -webkit-animation: cubeTransform81 10s infinite ease-in;
+          animation: cubeTransform81 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform81 {
+  0%, 1.88% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  16.88% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  31.88%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform81 {
+  0%, 1.88% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  16.88% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  31.88%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(83) {
+  -webkit-animation: cubeTransform82 10s infinite ease-in;
+          animation: cubeTransform82 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform82 {
+  0%, 63.8% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  78.8% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  93.8%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform82 {
+  0%, 63.8% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  78.8% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  93.8%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(84) {
+  -webkit-animation: cubeTransform83 10s infinite ease-in;
+          animation: cubeTransform83 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform83 {
+  0%, 55.71% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  70.71% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  85.71%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform83 {
+  0%, 55.71% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  70.71% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  85.71%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(85) {
+  -webkit-animation: cubeTransform84 10s infinite ease-in;
+          animation: cubeTransform84 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform84 {
+  0%, 7.73% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  22.73% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  37.73%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform84 {
+  0%, 7.73% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  22.73% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  37.73%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(86) {
+  -webkit-animation: cubeTransform85 10s infinite ease-in;
+          animation: cubeTransform85 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform85 {
+  0%, 29.91% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  44.91% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  59.91%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform85 {
+  0%, 29.91% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  44.91% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  59.91%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(87) {
+  -webkit-animation: cubeTransform86 10s infinite ease-in;
+          animation: cubeTransform86 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform86 {
+  0%, 34.84% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  49.84% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  64.84%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform86 {
+  0%, 34.84% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  49.84% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  64.84%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(88) {
+  -webkit-animation: cubeTransform87 10s infinite ease-in;
+          animation: cubeTransform87 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform87 {
+  0%, 28.25% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  43.25% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  58.25%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform87 {
+  0%, 28.25% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  43.25% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  58.25%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(89) {
+  -webkit-animation: cubeTransform88 10s infinite ease-in;
+          animation: cubeTransform88 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform88 {
+  0%, 7.2% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  22.2% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  37.2%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform88 {
+  0%, 7.2% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  22.2% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  37.2%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(90) {
+  -webkit-animation: cubeTransform89 10s infinite ease-in;
+          animation: cubeTransform89 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform89 {
+  0%, 12.8% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  27.8% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  42.8%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform89 {
+  0%, 12.8% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  27.8% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  42.8%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(91) {
+  -webkit-animation: cubeTransform90 10s infinite ease-in;
+          animation: cubeTransform90 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform90 {
+  0%, 63.93% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  78.93% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  93.93%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform90 {
+  0%, 63.93% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  78.93% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  93.93%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(92) {
+  -webkit-animation: cubeTransform91 10s infinite ease-in;
+          animation: cubeTransform91 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform91 {
+  0%, 19.25% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  34.25% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  49.25%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform91 {
+  0%, 19.25% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  34.25% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  49.25%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(93) {
+  -webkit-animation: cubeTransform92 10s infinite ease-in;
+          animation: cubeTransform92 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform92 {
+  0%, 55.21% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  70.21% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  85.21%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform92 {
+  0%, 55.21% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  70.21% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  85.21%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(94) {
+  -webkit-animation: cubeTransform93 10s infinite ease-in;
+          animation: cubeTransform93 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform93 {
+  0%, 62.01% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  77.01% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  92.01%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform93 {
+  0%, 62.01% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  77.01% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  92.01%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(95) {
+  -webkit-animation: cubeTransform94 10s infinite ease-in;
+          animation: cubeTransform94 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform94 {
+  0%, 27.03% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  42.03% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  57.03%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform94 {
+  0%, 27.03% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  42.03% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  57.03%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(96) {
+  -webkit-animation: cubeTransform95 10s infinite ease-in;
+          animation: cubeTransform95 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform95 {
+  0%, 52.04% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  67.04% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  82.04%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform95 {
+  0%, 52.04% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  67.04% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  82.04%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(97) {
+  -webkit-animation: cubeTransform96 10s infinite ease-in;
+          animation: cubeTransform96 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform96 {
+  0%, 5.61% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  20.61% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  35.61%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform96 {
+  0%, 5.61% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  20.61% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  35.61%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+.cube:nth-child(98) {
+  -webkit-animation: cubeTransform97 10s infinite ease-in;
+          animation: cubeTransform97 10s infinite ease-in;
+}
+@-webkit-keyframes cubeTransform97 {
+  0%, 56.24% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  71.24% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  86.24%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+@keyframes cubeTransform97 {
+  0%, 56.24% {
+    transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+  }
+  71.24% {
+    transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  86.24%, 100% {
+    transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+  }
+}
+
+.mainCube {
+  --hSize: 1.5em;
+  --bgSize: 3em;
+}
+
+i {
+  position: absolute;
+  inset: 0;
+  background-color: hsl(var(--hue), 75%, 75%);
+  background-size: var(--bgSize) var(--bgSize);
+  background-image: radial-gradient(transparent, #000 var(--bgSize));
+}
+i:nth-child(1) {
+  --hue: 0;
+  background-position: calc((var(--x, 0) + 2) * 25%) calc((var(--y, 0) + 2) * 25%);
+  transform: translateZ(var(--hSize));
+}
+i:nth-child(2) {
+  --hue: 60;
+  background-position: calc((2 - var(--z, 0)) * 25%) calc((var(--y, 0) + 2) * 25%);
+  transform: rotateY(90deg) translateZ(var(--hSize));
+}
+i:nth-child(3) {
+  --hue: 120;
+  background-position: calc((2 - var(--x, 0)) * 25%) calc((var(--y, 0) + 2) * 25%);
+  transform: rotateY(180deg) translateZ(var(--hSize));
+}
+i:nth-child(4) {
+  --hue: 180;
+  background-position: calc((var(--z, 0) + 2) * 25%) calc((var(--y, 0) + 2) * 25%);
+  transform: rotateY(270deg) translateZ(var(--hSize));
+}
+i:nth-child(5) {
+  --hue: 240;
+  background-position: calc((var(--x, 0) + 2) * 25%) calc((var(--z, 0) + 2) * 25%);
+  transform: rotateX(90deg) translateZ(var(--hSize));
+}
+i:nth-child(6) {
+  --hue: 300;
+  background-position: calc((var(--x, 0) + 2) * 25%) calc((2 - var(--z, 0)) * 25%);
+  transform: rotateX(270deg) translateZ(var(--hSize));
+}
\ No newline at end of file
diff --git a/the-cube-of-cubes-css-only/src/index.html b/the-cube-of-cubes-css-only/src/index.html
new file mode 100644
index 0000000..0e5ddda
--- /dev/null
+++ b/the-cube-of-cubes-css-only/src/index.html
@@ -0,0 +1,103 @@
+<div class="scene">
+  <div class="cubes">
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="cube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="mainCube"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+  </div>
+</div>
diff --git a/the-cube-of-cubes-css-only/src/style.scss b/the-cube-of-cubes-css-only/src/style.scss
new file mode 100644
index 0000000..759eef6
--- /dev/null
+++ b/the-cube-of-cubes-css-only/src/style.scss
@@ -0,0 +1,213 @@
+* {
+  padding: 0;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+body {
+  background-image: radial-gradient(circle, #111, #000 800px);
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  perspective: 1200px;
+
+  *:not(:empty) {
+    transform-style: preserve-3d;
+  }
+}
+
+$duration: 10s;
+
+.scene {
+  position: absolute;
+  font-size: 24px;
+  animation: sceneRotate 45s infinite linear;
+
+  @keyframes sceneRotate {
+    to { transform: rotateX(360deg) rotateY(1080deg); }
+  }
+}
+
+.cubes {
+  animation: cubesScale $duration infinite linear;
+
+  @keyframes cubesScale {
+    from { transform: scale3d(1, 1, 1); }
+    to { transform: scale3d(1.66666, 1.66666, 1.66666); }
+  }
+
+}
+
+.cube, .mainCube {
+  position: absolute;
+  inset: calc(var(--hSize) * -1);
+}
+
+.cube {
+  --hSize: 0.5em;
+  --bgSize: 5em;
+
+  &:nth-child(1) { --x: -2; --y: -2; --z: -2; }
+  &:nth-child(2) { --x: -2; --y: -2; --z: -1; }
+  &:nth-child(3) { --x: -2; --y: -2; --z: 0; }
+  &:nth-child(4) { --x: -2; --y: -2; --z: 1; }
+  &:nth-child(5) { --x: -2; --y: -2; --z: 2; }
+  &:nth-child(6) { --x: -2; --y: -1; --z: -2; }
+  &:nth-child(7) { --x: -2; --y: -1; --z: -1; }
+  &:nth-child(8) { --x: -2; --y: -1; --z: 0; }
+  &:nth-child(9) { --x: -2; --y: -1; --z: 1; }
+  &:nth-child(10) { --x: -2; --y: -1; --z: 2; }
+  &:nth-child(11) { --x: -2; --y: 0; --z: -2; }
+  &:nth-child(12) { --x: -2; --y: 0; --z: -1; }
+  &:nth-child(13) { --x: -2; --y: 0; --z: 0; }
+  &:nth-child(14) { --x: -2; --y: 0; --z: 1; }
+  &:nth-child(15) { --x: -2; --y: 0; --z: 2; }
+  &:nth-child(16) { --x: -2; --y: 1; --z: -2; }
+  &:nth-child(17) { --x: -2; --y: 1; --z: -1; }
+  &:nth-child(18) { --x: -2; --y: 1; --z: 0; }
+  &:nth-child(19) { --x: -2; --y: 1; --z: 1; }
+  &:nth-child(20) { --x: -2; --y: 1; --z: 2; }
+  &:nth-child(21) { --x: -2; --y: 2; --z: -2; }
+  &:nth-child(22) { --x: -2; --y: 2; --z: -1; }
+  &:nth-child(23) { --x: -2; --y: 2; --z: 0; }
+  &:nth-child(24) { --x: -2; --y: 2; --z: 1; }
+  &:nth-child(25) { --x: -2; --y: 2; --z: 2; }
+  &:nth-child(26) { --x: -1; --y: -2; --z: -2; }
+  &:nth-child(27) { --x: -1; --y: -2; --z: -1; }
+  &:nth-child(28) { --x: -1; --y: -2; --z: 0; }
+  &:nth-child(29) { --x: -1; --y: -2; --z: 1; }
+  &:nth-child(30) { --x: -1; --y: -2; --z: 2; }
+  &:nth-child(31) { --x: -1; --y: -1; --z: -2; }
+  &:nth-child(32) { --x: -1; --y: -1; --z: 2; }
+  &:nth-child(33) { --x: -1; --y: 0; --z: -2; }
+  &:nth-child(34) { --x: -1; --y: 0; --z: 2; }
+  &:nth-child(35) { --x: -1; --y: 1; --z: -2; }
+  &:nth-child(36) { --x: -1; --y: 1; --z: 2; }
+  &:nth-child(37) { --x: -1; --y: 2; --z: -2; }
+  &:nth-child(38) { --x: -1; --y: 2; --z: -1; }
+  &:nth-child(39) { --x: -1; --y: 2; --z: 0; }
+  &:nth-child(40) { --x: -1; --y: 2; --z: 1; }
+  &:nth-child(41) { --x: -1; --y: 2; --z: 2; }
+  &:nth-child(42) { --x: 0; --y: -2; --z: -2; }
+  &:nth-child(43) { --x: 0; --y: -2; --z: -1; }
+  &:nth-child(44) { --x: 0; --y: -2; --z: 0; }
+  &:nth-child(45) { --x: 0; --y: -2; --z: 1; }
+  &:nth-child(46) { --x: 0; --y: -2; --z: 2; }
+  &:nth-child(47) { --x: 0; --y: -1; --z: -2; }
+  &:nth-child(48) { --x: 0; --y: -1; --z: 2; }
+  &:nth-child(49) { --x: 0; --y: 0; --z: -2; }
+  &:nth-child(50) { --x: 0; --y: 0; --z: 2; }
+  &:nth-child(51) { --x: 0; --y: 1; --z: -2; }
+  &:nth-child(52) { --x: 0; --y: 1; --z: 2; }
+  &:nth-child(53) { --x: 0; --y: 2; --z: -2; }
+  &:nth-child(54) { --x: 0; --y: 2; --z: -1; }
+  &:nth-child(55) { --x: 0; --y: 2; --z: 0; }
+  &:nth-child(56) { --x: 0; --y: 2; --z: 1; }
+  &:nth-child(57) { --x: 0; --y: 2; --z: 2; }
+  &:nth-child(58) { --x: 1; --y: -2; --z: -2; }
+  &:nth-child(59) { --x: 1; --y: -2; --z: -1; }
+  &:nth-child(60) { --x: 1; --y: -2; --z: 0; }
+  &:nth-child(61) { --x: 1; --y: -2; --z: 1; }
+  &:nth-child(62) { --x: 1; --y: -2; --z: 2; }
+  &:nth-child(63) { --x: 1; --y: -1; --z: -2; }
+  &:nth-child(64) { --x: 1; --y: -1; --z: 2; }
+  &:nth-child(65) { --x: 1; --y: 0; --z: -2; }
+  &:nth-child(66) { --x: 1; --y: 0; --z: 2; }
+  &:nth-child(67) { --x: 1; --y: 1; --z: -2; }
+  &:nth-child(68) { --x: 1; --y: 1; --z: 2; }
+  &:nth-child(69) { --x: 1; --y: 2; --z: -2; }
+  &:nth-child(70) { --x: 1; --y: 2; --z: -1; }
+  &:nth-child(71) { --x: 1; --y: 2; --z: 0; }
+  &:nth-child(72) { --x: 1; --y: 2; --z: 1; }
+  &:nth-child(73) { --x: 1; --y: 2; --z: 2; }
+  &:nth-child(74) { --x: 2; --y: -2; --z: -2; }
+  &:nth-child(75) { --x: 2; --y: -2; --z: -1; }
+  &:nth-child(76) { --x: 2; --y: -2; --z: 0; }
+  &:nth-child(77) { --x: 2; --y: -2; --z: 1; }
+  &:nth-child(78) { --x: 2; --y: -2; --z: 2; }
+  &:nth-child(79) { --x: 2; --y: -1; --z: -2; }
+  &:nth-child(80) { --x: 2; --y: -1; --z: -1; }
+  &:nth-child(81) { --x: 2; --y: -1; --z: 0; }
+  &:nth-child(82) { --x: 2; --y: -1; --z: 1; }
+  &:nth-child(83) { --x: 2; --y: -1; --z: 2; }
+  &:nth-child(84) { --x: 2; --y: 0; --z: -2; }
+  &:nth-child(85) { --x: 2; --y: 0; --z: -1; }
+  &:nth-child(86) { --x: 2; --y: 0; --z: 0; }
+  &:nth-child(87) { --x: 2; --y: 0; --z: 1; }
+  &:nth-child(88) { --x: 2; --y: 0; --z: 2; }
+  &:nth-child(89) { --x: 2; --y: 1; --z: -2; }
+  &:nth-child(90) { --x: 2; --y: 1; --z: -1; }
+  &:nth-child(91) { --x: 2; --y: 1; --z: 0; }
+  &:nth-child(92) { --x: 2; --y: 1; --z: 1; }
+  &:nth-child(93) { --x: 2; --y: 1; --z: 2; }
+  &:nth-child(94) { --x: 2; --y: 2; --z: -2; }
+  &:nth-child(95) { --x: 2; --y: 2; --z: -1; }
+  &:nth-child(96) { --x: 2; --y: 2; --z: 0; }
+  &:nth-child(97) { --x: 2; --y: 2; --z: 1; }
+  &:nth-child(98) { --x: 2; --y: 2; --z: 2; }
+
+  @for $i from 0 to 98 {
+    &:nth-child(#{$i + 1}) {
+      animation: cubeTransform#{$i} $duration infinite ease-in;
+      $pos: random(7000) *  0.01%;
+
+      @keyframes cubeTransform#{$i} {
+        0%, #{$pos} {
+          transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(1, 1, 1);
+        }
+        #{$pos + 15%} {
+          transform: translate3d(calc(var(--x) * 2em), calc(var(--y) * 2em), calc(var(--z) * 2em)) scale3d(1, 1, 1);
+          animation-timing-function: ease-out;
+        }
+        #{$pos + 30%}, 100% {
+          transform: translate3d(calc(var(--x) * 3em), calc(var(--y) * 3em), calc(var(--z) * 3em)) scale3d(0, 0, 0);
+        }
+      }
+    }
+  }
+}
+
+.mainCube {
+  --hSize: 1.5em;
+  --bgSize: 3em;
+}
+
+i {
+  position: absolute;
+  inset: 0;
+  background-color: hsl(var(--hue), 75%, 75%);
+  background-size: var(--bgSize) var(--bgSize);
+  background-image: radial-gradient(transparent, #000 var(--bgSize)); 
+
+  &:nth-child(1) {
+    --hue: 0;
+    background-position: calc((var(--x, 0) + 2) * 25%) calc((var(--y, 0) + 2) * 25%);
+    transform: translateZ(var(--hSize));
+  }
+  &:nth-child(2) {
+    --hue: 60;
+    background-position: calc((2 - var(--z, 0)) * 25%) calc((var(--y, 0) + 2) * 25%);
+    transform: rotateY(90deg) translateZ(var(--hSize));
+  }
+  &:nth-child(3) {
+    --hue: 120;
+    background-position: calc((2 - var(--x, 0)) * 25%) calc((var(--y, 0) + 2) * 25%);
+    transform: rotateY(180deg) translateZ(var(--hSize));
+  }
+  &:nth-child(4) {
+    --hue: 180;
+    background-position: calc((var(--z, 0) + 2) * 25%) calc((var(--y, 0) + 2) * 25%);
+    transform: rotateY(270deg) translateZ(var(--hSize));
+  }
+  &:nth-child(5) {
+    --hue: 240;
+    background-position: calc((var(--x, 0) + 2) * 25%) calc((var(--z, 0) + 2) * 25%);
+    transform: rotateX(90deg) translateZ(var(--hSize));
+  }
+  &:nth-child(6) {
+    --hue: 300; 
+    background-position: calc((var(--x, 0) + 2) * 25%) calc((2 - var(--z, 0)) * 25%);
+    transform: rotateX(270deg) translateZ(var(--hSize));
+  }
+}
+
diff --git a/the-cube/README.markdown b/the-cube/README.markdown
new file mode 100644
index 0000000..2801818
--- /dev/null
+++ b/the-cube/README.markdown
@@ -0,0 +1,4 @@
+# The Cube
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/bsehovac/pen/EMyWVv](https://codepen.io/bsehovac/pen/EMyWVv).
+
+ See if you can solve this classic Rubik's puzzle game made in three.js.
\ No newline at end of file
diff --git a/the-cube/dist/index.html b/the-cube/dist/index.html
new file mode 100644
index 0000000..db9c8c6
--- /dev/null
+++ b/the-cube/dist/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>The Cube</title>
+  <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- PWA: https://bsehovac.github.io/the-cube/ -->
+
+<div class="ui">
+
+  <div class="ui__background"></div>
+
+  <div class="ui__game"></div>
+
+  <div class="ui__texts">
+    <h1 class="text text--title">
+      <span>THE</span>
+      <span>CUBE</span>
+    </h1>
+    <div class="text text--note">
+      Double tap to start
+    </div>
+    <div class="text text--timer">
+      0:00
+    </div>
+    <div class="text text--complete">
+      <span>Complete!</span>
+    </div>
+    <div class="text text--best-time">
+      <icon trophy></icon>
+      <span>Best Time!</span>
+    </div>
+  </div>
+
+  <div class="ui__prefs">
+    <range name="size" title="Cube Size" list="2,3,4,5"></range>
+    <range name="flip" title="Flip Type" list="Swift&nbsp;,Smooth,Bounce"></range>
+    <range name="scramble" title="Scramble Length" list="20,25,30"></range>
+    <range name="fov" title="Camera Angle" list="Ortographic,Perspective"></range>
+    <range name="theme" title="Color Scheme" list="Cube,Erno,Dust,Camo,Rain"></range>
+  </div>
+
+  <div class="ui__theme">
+    <range name="hue" title="Hue" color></range>
+    <range name="saturation" title="Saturation" color></range>
+    <range name="lightness" title="Lightness" color></range>
+  </div>
+
+  <div class="ui__stats">
+    <div class="stats" name="cube-size">
+      <i>Cube:</i><b>3x3x3</b>
+    </div>
+    <div class="stats" name="total-solves">
+      <i>Total solves:</i><b>-</b>
+    </div>
+    <div class="stats" name="best-time">
+      <i>Best time:</i><b>-</b>
+    </div>
+    <div class="stats" name="worst-time">
+      <i>Worst time:</i><b>-</b>
+    </div>
+    <div class="stats" name="average-5">
+      <i>Average of 5:</i><b>-</b>
+    </div>
+    <div class="stats" name="average-12">
+      <i>Average of 12:</i><b>-</b>
+    </div>
+    <div class="stats" name="average-25">
+      <i>Average of 25:</i><b>-</b>
+    </div>
+  </div>
+
+  <div class="ui__buttons">
+    <button class="btn btn--bl btn--stats">
+      <icon trophy></icon>
+    </button>
+    <button class="btn btn--br btn--prefs">
+      <icon settings></icon>
+    </button>
+    <button class="btn btn--bl btn--back">
+      <icon back></icon>
+    </button>
+    <button class="btn btn--br btn--theme">
+      <icon theme></icon>
+    </button>
+    <button class="btn btn--br btn--reset">
+      <icon reset></icon>
+    </button>
+  </div>
+
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/the-cube/dist/script.js b/the-cube/dist/script.js
new file mode 100644
index 0000000..9e3e7ba
--- /dev/null
+++ b/the-cube/dist/script.js
@@ -0,0 +1,4083 @@
+// Three.js - https://github.com/mrdoob/three.js/
+// RoundedBoxGeometry - https://github.com/pailhead/three-rounded-box
+
+const animationEngine = ( () => {
+
+  let uniqueID = 0;
+
+  class AnimationEngine {
+
+    constructor() {
+
+      this.ids = [];
+      this.animations = {};
+      this.update = this.update.bind( this );
+      this.raf = 0;
+      this.time = 0;
+
+    }
+
+    update() {
+
+      const now = performance.now();
+      const delta = now - this.time;
+      this.time = now;
+
+      let i = this.ids.length;
+
+      this.raf = i ? requestAnimationFrame( this.update ) : 0;
+
+      while ( i-- )
+        this.animations[ this.ids[ i ] ] && this.animations[ this.ids[ i ] ].update( delta );
+
+    }
+
+    add( animation ) {
+
+      animation.id = uniqueID ++;
+
+      this.ids.push( animation.id );
+      this.animations[ animation.id ] = animation;
+
+      if ( this.raf !== 0 ) return;
+
+      this.time = performance.now();
+      this.raf = requestAnimationFrame( this.update );
+
+    }
+
+    remove( animation ) {
+
+      const index = this.ids.indexOf( animation.id );
+
+      if ( index < 0 ) return;
+
+      this.ids.splice( index, 1 );
+      delete this.animations[ animation.id ];
+      animation = null;
+
+    }
+
+  }
+
+  return new AnimationEngine();
+
+} )();
+
+class Animation {
+
+  constructor( start ) {
+
+    if ( start === true ) this.start();
+
+  }
+
+  start() {
+
+    animationEngine.add( this );
+
+  }
+
+  stop() {
+
+    animationEngine.remove( this );
+
+  }
+
+  update( delta ) {}
+
+}
+
+class World extends Animation {
+
+  constructor( game ) {
+
+    super( true );
+
+    this.game = game;
+
+    this.container = this.game.dom.game;
+    this.scene = new THREE.Scene();
+
+    this.renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
+    this.renderer.setPixelRatio( window.devicePixelRatio );
+    this.container.appendChild( this.renderer.domElement );
+
+    this.camera = new THREE.PerspectiveCamera( 2, 1, 0.1, 10000 );
+
+    this.stage = { width: 2, height: 3 };
+    this.fov = 10;
+
+    this.createLights();
+
+    this.onResize = [];
+
+    this.resize();
+    window.addEventListener( 'resize', () => this.resize(), false );
+
+  }
+
+  update() {
+
+    this.renderer.render( this.scene, this.camera );
+
+  }
+
+  resize() {
+
+    this.width = this.container.offsetWidth;
+    this.height = this.container.offsetHeight;
+
+    this.renderer.setSize( this.width, this.height );
+
+    this.camera.fov = this.fov;
+    this.camera.aspect = this.width / this.height;
+
+    const aspect = this.stage.width / this.stage.height;
+    const fovRad = this.fov * THREE.Math.DEG2RAD;
+
+    let distance = ( aspect < this.camera.aspect )
+      ? ( this.stage.height / 2 ) / Math.tan( fovRad / 2 )
+      : ( this.stage.width / this.camera.aspect ) / ( 2 * Math.tan( fovRad / 2 ) );
+
+    distance *= 0.5;
+
+    this.camera.position.set( distance, distance, distance);
+    this.camera.lookAt( this.scene.position );
+    this.camera.updateProjectionMatrix();
+
+    const docFontSize = ( aspect < this.camera.aspect )
+      ? ( this.height / 100 ) * aspect
+      : this.width / 100;
+
+    document.documentElement.style.fontSize = docFontSize + 'px';
+
+    if ( this.onResize ) this.onResize.forEach( cb => cb() );
+
+  }
+
+  createLights() {
+
+    this.lights = {
+      holder:  new THREE.Object3D,
+      ambient: new THREE.AmbientLight( 0xffffff, 0.69 ),
+      front:   new THREE.DirectionalLight( 0xffffff, 0.36 ),
+      back:    new THREE.DirectionalLight( 0xffffff, 0.19 ),
+    };
+
+    this.lights.front.position.set( 1.5, 5, 3 );
+    this.lights.back.position.set( -1.5, -5, -3 );
+
+    this.lights.holder.add( this.lights.ambient );
+    this.lights.holder.add( this.lights.front );
+    this.lights.holder.add( this.lights.back );
+
+    this.scene.add( this.lights.holder );
+
+  }
+
+}
+
+function RoundedBoxGeometry( size, radius, radiusSegments ) {
+
+  THREE.BufferGeometry.call( this );
+
+  this.type = 'RoundedBoxGeometry';
+
+  radiusSegments = ! isNaN( radiusSegments ) ? Math.max( 1, Math.floor( radiusSegments ) ) : 1;
+
+  var width, height, depth;
+
+  width = height = depth = size;
+  radius = size * radius;
+
+  radius = Math.min( radius, Math.min( width, Math.min( height, Math.min( depth ) ) ) / 2 );
+
+  var edgeHalfWidth = width / 2 - radius;
+  var edgeHalfHeight = height / 2 - radius;
+  var edgeHalfDepth = depth / 2 - radius;
+
+  this.parameters = {
+    width: width,
+    height: height,
+    depth: depth,
+    radius: radius,
+    radiusSegments: radiusSegments
+  };
+
+  var rs1 = radiusSegments + 1;
+  var totalVertexCount = ( rs1 * radiusSegments + 1 ) << 3;
+
+  var positions = new THREE.BufferAttribute( new Float32Array( totalVertexCount * 3 ), 3 );
+  var normals = new THREE.BufferAttribute( new Float32Array( totalVertexCount * 3 ), 3 );
+
+  var
+    cornerVerts = [],
+    cornerNormals = [],
+    normal = new THREE.Vector3(),
+    vertex = new THREE.Vector3(),
+    vertexPool = [],
+    normalPool = [],
+    indices = []
+  ;
+
+  var
+    lastVertex = rs1 * radiusSegments,
+    cornerVertNumber = rs1 * radiusSegments + 1
+  ;
+
+  doVertices();
+  doFaces();
+  doCorners();
+  doHeightEdges();
+  doWidthEdges();
+  doDepthEdges();
+
+  function doVertices() {
+
+    var cornerLayout = [
+      new THREE.Vector3( 1, 1, 1 ),
+      new THREE.Vector3( 1, 1, - 1 ),
+      new THREE.Vector3( - 1, 1, - 1 ),
+      new THREE.Vector3( - 1, 1, 1 ),
+      new THREE.Vector3( 1, - 1, 1 ),
+      new THREE.Vector3( 1, - 1, - 1 ),
+      new THREE.Vector3( - 1, - 1, - 1 ),
+      new THREE.Vector3( - 1, - 1, 1 )
+    ];
+
+    for ( var j = 0; j < 8; j ++ ) {
+
+      cornerVerts.push( [] );
+      cornerNormals.push( [] );
+
+    }
+
+    var PIhalf = Math.PI / 2;
+    var cornerOffset = new THREE.Vector3( edgeHalfWidth, edgeHalfHeight, edgeHalfDepth );
+
+    for ( var y = 0; y <= radiusSegments; y ++ ) {
+
+      var v = y / radiusSegments;
+      var va = v * PIhalf;
+      var cosVa = Math.cos( va );
+      var sinVa = Math.sin( va );
+
+      if ( y == radiusSegments ) {
+
+        vertex.set( 0, 1, 0 );
+        var vert = vertex.clone().multiplyScalar( radius ).add( cornerOffset );
+        cornerVerts[ 0 ].push( vert );
+        vertexPool.push( vert );
+        var norm = vertex.clone();
+        cornerNormals[ 0 ].push( norm );
+        normalPool.push( norm );
+        continue;
+
+      }
+
+      for ( var x = 0; x <= radiusSegments; x ++ ) {
+
+        var u = x / radiusSegments;
+        var ha = u * PIhalf;
+        vertex.x = cosVa * Math.cos( ha );
+        vertex.y = sinVa;
+        vertex.z = cosVa * Math.sin( ha );
+
+        var vert = vertex.clone().multiplyScalar( radius ).add( cornerOffset );
+        cornerVerts[ 0 ].push( vert );
+        vertexPool.push( vert );
+
+        var norm = vertex.clone().normalize();
+        cornerNormals[ 0 ].push( norm );
+        normalPool.push( norm );
+
+      }
+
+    }
+
+    for ( var i = 1; i < 8; i ++ ) {
+
+      for ( var j = 0; j < cornerVerts[ 0 ].length; j ++ ) {
+
+        var vert = cornerVerts[ 0 ][ j ].clone().multiply( cornerLayout[ i ] );
+        cornerVerts[ i ].push( vert );
+        vertexPool.push( vert );
+
+        var norm = cornerNormals[ 0 ][ j ].clone().multiply( cornerLayout[ i ] );
+        cornerNormals[ i ].push( norm );
+        normalPool.push( norm );
+
+      }
+
+    }
+
+  }
+
+  function doCorners() {
+
+    var flips = [
+      true,
+      false,
+      true,
+      false,
+      false,
+      true,
+      false,
+      true
+    ];
+
+    var lastRowOffset = rs1 * ( radiusSegments - 1 );
+
+    for ( var i = 0; i < 8; i ++ ) {
+
+      var cornerOffset = cornerVertNumber * i;
+
+      for ( var v = 0; v < radiusSegments - 1; v ++ ) {
+
+        var r1 = v * rs1;
+        var r2 = ( v + 1 ) * rs1;
+
+        for ( var u = 0; u < radiusSegments; u ++ ) {
+
+          var u1 = u + 1;
+          var a = cornerOffset + r1 + u;
+          var b = cornerOffset + r1 + u1;
+          var c = cornerOffset + r2 + u;
+          var d = cornerOffset + r2 + u1;
+
+          if ( ! flips[ i ] ) {
+
+            indices.push( a );
+            indices.push( b );
+            indices.push( c );
+
+            indices.push( b );
+            indices.push( d );
+            indices.push( c );
+
+          } else {
+
+            indices.push( a );
+            indices.push( c );
+            indices.push( b );
+
+            indices.push( b );
+            indices.push( c );
+            indices.push( d );
+
+          }
+
+        }
+
+      }
+
+      for ( var u = 0; u < radiusSegments; u ++ ) {
+
+        var a = cornerOffset + lastRowOffset + u;
+        var b = cornerOffset + lastRowOffset + u + 1;
+        var c = cornerOffset + lastVertex;
+
+        if ( ! flips[ i ] ) {
+
+          indices.push( a );
+          indices.push( b );
+          indices.push( c );
+
+        } else {
+
+          indices.push( a );
+          indices.push( c );
+          indices.push( b );
+
+        }
+
+      }
+
+    }
+
+  }
+
+  function doFaces() {
+
+    var a = lastVertex;
+    var b = lastVertex + cornerVertNumber;
+    var c = lastVertex + cornerVertNumber * 2;
+    var d = lastVertex + cornerVertNumber * 3;
+
+    indices.push( a );
+    indices.push( b );
+    indices.push( c );
+    indices.push( a );
+    indices.push( c );
+    indices.push( d );
+
+    a = lastVertex + cornerVertNumber * 4;
+    b = lastVertex + cornerVertNumber * 5;
+    c = lastVertex + cornerVertNumber * 6;
+    d = lastVertex + cornerVertNumber * 7;
+
+    indices.push( a );
+    indices.push( c );
+    indices.push( b );
+    indices.push( a );
+    indices.push( d );
+    indices.push( c );
+
+    a = 0;
+    b = cornerVertNumber;
+    c = cornerVertNumber * 4;
+    d = cornerVertNumber * 5;
+
+    indices.push( a );
+    indices.push( c );
+    indices.push( b );
+    indices.push( b );
+    indices.push( c );
+    indices.push( d );
+
+    a = cornerVertNumber * 2;
+    b = cornerVertNumber * 3;
+    c = cornerVertNumber * 6;
+    d = cornerVertNumber * 7;
+
+    indices.push( a );
+    indices.push( c );
+    indices.push( b );
+    indices.push( b );
+    indices.push( c );
+    indices.push( d );
+
+    a = radiusSegments;
+    b = radiusSegments + cornerVertNumber * 3;
+    c = radiusSegments + cornerVertNumber * 4;
+    d = radiusSegments + cornerVertNumber * 7;
+
+    indices.push( a );
+    indices.push( b );
+    indices.push( c );
+    indices.push( b );
+    indices.push( d );
+    indices.push( c );
+
+    a = radiusSegments + cornerVertNumber;
+    b = radiusSegments + cornerVertNumber * 2;
+    c = radiusSegments + cornerVertNumber * 5;
+    d = radiusSegments + cornerVertNumber * 6;
+
+    indices.push( a );
+    indices.push( c );
+    indices.push( b );
+    indices.push( b );
+    indices.push( c );
+    indices.push( d );
+
+  }
+
+  function doHeightEdges() {
+
+    for ( var i = 0; i < 4; i ++ ) {
+
+      var cOffset = i * cornerVertNumber;
+      var cRowOffset = 4 * cornerVertNumber + cOffset;
+      var needsFlip = i & 1 === 1;
+
+      for ( var u = 0; u < radiusSegments; u ++ ) {
+
+        var u1 = u + 1;
+        var a = cOffset + u;
+        var b = cOffset + u1;
+        var c = cRowOffset + u;
+        var d = cRowOffset + u1;
+
+        if ( ! needsFlip ) {
+
+          indices.push( a );
+          indices.push( b );
+          indices.push( c );
+          indices.push( b );
+          indices.push( d );
+          indices.push( c );
+
+        } else {
+
+          indices.push( a );
+          indices.push( c );
+          indices.push( b );
+          indices.push( b );
+          indices.push( c );
+          indices.push( d );
+
+        }
+
+      }
+
+    }
+
+  }
+
+  function doDepthEdges() {
+
+    var cStarts = [ 0, 2, 4, 6 ];
+    var cEnds = [ 1, 3, 5, 7 ];
+
+    for ( var i = 0; i < 4; i ++ ) {
+
+      var cStart = cornerVertNumber * cStarts[ i ];
+      var cEnd = cornerVertNumber * cEnds[ i ];
+
+      var needsFlip = 1 >= i;
+
+      for ( var u = 0; u < radiusSegments; u ++ ) {
+
+        var urs1 = u * rs1;
+        var u1rs1 = ( u + 1 ) * rs1;
+
+        var a = cStart + urs1;
+        var b = cStart + u1rs1;
+        var c = cEnd + urs1;
+        var d = cEnd + u1rs1;
+
+        if ( needsFlip ) {
+
+          indices.push( a );
+          indices.push( c );
+          indices.push( b );
+          indices.push( b );
+          indices.push( c );
+          indices.push( d );
+
+        } else {
+
+          indices.push( a );
+          indices.push( b );
+          indices.push( c );
+          indices.push( b );
+          indices.push( d );
+          indices.push( c );
+
+        }
+
+      }
+
+    }
+
+  }
+
+  function doWidthEdges() {
+
+    var end = radiusSegments - 1;
+
+    var cStarts = [ 0, 1, 4, 5 ];
+    var cEnds = [ 3, 2, 7, 6 ];
+    var needsFlip = [ 0, 1, 1, 0 ];
+
+    for ( var i = 0; i < 4; i ++ ) {
+
+      var cStart = cStarts[ i ] * cornerVertNumber;
+      var cEnd = cEnds[ i ] * cornerVertNumber;
+
+      for ( var u = 0; u <= end; u ++ ) {
+
+        var a = cStart + radiusSegments + u * rs1;
+        var b = cStart + ( u != end ? radiusSegments + ( u + 1 ) * rs1 : cornerVertNumber - 1 );
+
+        var c = cEnd + radiusSegments + u * rs1;
+        var d = cEnd + ( u != end ? radiusSegments + ( u + 1 ) * rs1 : cornerVertNumber - 1 );
+
+        if ( ! needsFlip[ i ] ) {
+
+          indices.push( a );
+          indices.push( b );
+          indices.push( c );
+          indices.push( b );
+          indices.push( d );
+          indices.push( c );
+
+        } else {
+
+          indices.push( a );
+          indices.push( c );
+          indices.push( b );
+          indices.push( b );
+          indices.push( c );
+          indices.push( d );
+
+        }
+
+      }
+
+    }
+
+  }
+
+  var index = 0;
+
+  for ( var i = 0; i < vertexPool.length; i ++ ) {
+
+    positions.setXYZ(
+      index,
+      vertexPool[ i ].x,
+      vertexPool[ i ].y,
+      vertexPool[ i ].z
+    );
+
+    normals.setXYZ(
+      index,
+      normalPool[ i ].x,
+      normalPool[ i ].y,
+      normalPool[ i ].z
+    );
+
+    index ++;
+
+  }
+
+  this.setIndex( new THREE.BufferAttribute( new Uint16Array( indices ), 1 ) );
+  this.addAttribute( 'position', positions );
+  this.addAttribute( 'normal', normals );
+
+}
+
+RoundedBoxGeometry.prototype = Object.create( THREE.BufferGeometry.prototype );
+RoundedBoxGeometry.constructor = RoundedBoxGeometry;
+
+function RoundedPlaneGeometry( size, radius, depth ) {
+
+  var x, y, width, height;
+
+  x = y = - size / 2;
+  width = height = size;
+  radius = size * radius;
+
+  const shape = new THREE.Shape();
+
+  shape.moveTo( x, y + radius );
+  shape.lineTo( x, y + height - radius );
+  shape.quadraticCurveTo( x, y + height, x + radius, y + height );
+  shape.lineTo( x + width - radius, y + height );
+  shape.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
+  shape.lineTo( x + width, y + radius );
+  shape.quadraticCurveTo( x + width, y, x + width - radius, y );
+  shape.lineTo( x + radius, y );
+  shape.quadraticCurveTo( x, y, x, y + radius );
+
+  const geometry = new THREE.ExtrudeBufferGeometry(
+    shape,
+    { depth: depth, bevelEnabled: false, curveSegments: 3 }
+  );
+
+  return geometry;
+
+}
+
+class Cube {
+
+  constructor( game ) {
+
+    this.game = game;
+    this.size = 3;
+
+    this.geometry = {
+      pieceCornerRadius: 0.12,
+      edgeCornerRoundness: 0.15,
+      edgeScale: 0.82,
+      edgeDepth: 0.01,
+    };
+
+    this.holder = new THREE.Object3D();
+    this.object = new THREE.Object3D();
+    this.animator = new THREE.Object3D();
+
+    this.holder.add( this.animator );
+    this.animator.add( this.object );
+
+    this.game.world.scene.add( this.holder );
+
+  }
+
+  init() {
+
+    this.cubes = [];
+    this.object.children = [];
+    this.object.add( this.game.controls.group );
+
+    if ( this.size === 2 ) this.scale = 1.25;
+    else if ( this.size === 3 ) this.scale = 1;
+    else if ( this.size > 3 ) this.scale = 3 / this.size;
+
+    this.object.scale.set( this.scale, this.scale, this.scale );
+
+    const controlsScale = this.size === 2 ? 0.825 : 1;
+    this.game.controls.edges.scale.set( controlsScale, controlsScale, controlsScale );
+    
+    this.generatePositions();
+    this.generateModel();
+
+    this.pieces.forEach( piece => {
+
+      this.cubes.push( piece.userData.cube );
+      this.object.add( piece );
+
+    } );
+
+    this.holder.traverse( node => {
+
+      if ( node.frustumCulled ) node.frustumCulled = false;
+
+    } );
+
+    this.updateColors( this.game.themes.getColors() );
+
+    this.sizeGenerated = this.size;
+
+  }
+
+  resize( force = false ) {
+
+    if ( this.size !== this.sizeGenerated || force ) {
+
+      this.size = this.game.preferences.ranges.size.value;
+
+      this.reset();
+      this.init();
+
+      this.game.saved = false;
+      this.game.timer.reset();
+      this.game.storage.clearGame();
+
+    }
+
+  }
+
+  reset() {
+
+    this.game.controls.edges.rotation.set( 0, 0, 0 );
+
+    this.holder.rotation.set( 0, 0, 0 );
+    this.object.rotation.set( 0, 0, 0 );
+    this.animator.rotation.set( 0, 0, 0 );
+
+  }
+
+  generatePositions() {
+
+    const m = this.size - 1;
+    const first = this.size % 2 !== 0
+      ? 0 - Math.floor(this.size / 2)
+      : 0.5 - this.size / 2;
+
+    let x, y, z;
+
+    this.positions = [];
+
+    for ( x = 0; x < this.size; x ++ ) {
+      for ( y = 0; y < this.size; y ++ ) {
+        for ( z = 0; z < this.size; z ++ ) {
+
+          let position = new THREE.Vector3(first + x, first + y, first + z);
+          let edges = [];
+
+          if ( x == 0 ) edges.push(0);
+          if ( x == m ) edges.push(1);
+          if ( y == 0 ) edges.push(2);
+          if ( y == m ) edges.push(3);
+          if ( z == 0 ) edges.push(4);
+          if ( z == m ) edges.push(5);
+
+          position.edges = edges;
+          this.positions.push( position );
+
+        }
+      }
+    }
+
+  }
+
+  generateModel() {
+
+    this.pieces = [];
+    this.edges = [];
+
+    const pieceSize = 1 / 3;
+
+    const mainMaterial = new THREE.MeshLambertMaterial();
+
+    const pieceMesh = new THREE.Mesh(
+      new RoundedBoxGeometry( pieceSize, this.geometry.pieceCornerRadius, 3 ),
+      mainMaterial.clone()
+    );
+
+    const edgeGeometry = RoundedPlaneGeometry(
+      pieceSize,
+      this.geometry.edgeCornerRoundness,
+      this.geometry.edgeDepth
+    );
+
+    this.positions.forEach( ( position, index ) => {
+
+      const piece = new THREE.Object3D();
+      const pieceCube = pieceMesh.clone();
+      const pieceEdges = [];
+
+      piece.position.copy( position.clone().divideScalar( 3 ) );
+      piece.add( pieceCube );
+      piece.name = index;
+      piece.edgesName = '';
+
+      position.edges.forEach( position => {
+
+        const edge = new THREE.Mesh( edgeGeometry, mainMaterial.clone() );
+        const name = [ 'L', 'R', 'D', 'U', 'B', 'F' ][ position ];
+        const distance = pieceSize / 2;
+
+        edge.position.set(
+          distance * [ - 1, 1, 0, 0, 0, 0 ][ position ],
+          distance * [ 0, 0, - 1, 1, 0, 0 ][ position ],
+          distance * [ 0, 0, 0, 0, - 1, 1 ][ position ]
+        );
+
+        edge.rotation.set(
+          Math.PI / 2 * [ 0, 0, 1, - 1, 0, 0 ][ position ],
+          Math.PI / 2 * [ - 1, 1, 0, 0, 2, 0 ][ position ],
+          0
+        );
+
+        edge.scale.set(
+          this.geometry.edgeScale,
+          this.geometry.edgeScale,
+          this.geometry.edgeScale
+        );
+
+        edge.name = name;
+
+        piece.add( edge );
+        pieceEdges.push( name );
+        this.edges.push( edge );
+
+      } );
+
+      piece.userData.edges = pieceEdges;
+      piece.userData.cube = pieceCube;
+
+      piece.userData.start = {
+        position: piece.position.clone(),
+        rotation: piece.rotation.clone(),
+      };
+
+      this.pieces.push( piece );
+
+    } );
+
+  }
+
+  updateColors( colors ) {
+
+    if ( typeof this.pieces !== 'object' && typeof this.edges !== 'object' ) return;
+
+    this.pieces.forEach( piece => piece.userData.cube.material.color.setHex( colors.P ) );
+    this.edges.forEach( edge => edge.material.color.setHex( colors[ edge.name ] ) );
+
+  }
+
+  loadFromData( data ) {
+
+    this.size = data.size;
+
+    this.reset();
+    this.init();
+
+    this.pieces.forEach( piece => {
+
+      const index = data.names.indexOf( piece.name );
+
+      const position = data.positions[index];
+      const rotation = data.rotations[index];
+
+      piece.position.set( position.x, position.y, position.z );
+      piece.rotation.set( rotation.x, rotation.y, rotation.z );
+
+    } );
+
+  }
+
+}
+
+const Easing = {
+
+  Power: {
+
+    In: power => {
+
+      power = Math.round( power || 1 );
+
+      return t => Math.pow( t, power );
+
+    },
+
+    Out: power => {
+
+      power = Math.round( power || 1 );
+
+      return t => 1 - Math.abs( Math.pow( t - 1, power ) );
+
+    },
+
+    InOut: power => {
+
+      power = Math.round( power || 1 );
+
+      return t => ( t < 0.5 )
+        ? Math.pow( t * 2, power ) / 2
+        : ( 1 - Math.abs( Math.pow( ( t * 2 - 1 ) - 1, power ) ) ) / 2 + 0.5;
+
+    },
+
+  },
+
+  Sine: {
+
+    In: () => t => 1 + Math.sin( Math.PI / 2 * t - Math.PI / 2 ),
+
+    Out: () => t => Math.sin( Math.PI / 2 * t ),
+
+    InOut: () => t => ( 1 + Math.sin( Math.PI * t - Math.PI / 2 ) ) / 2,
+
+  },
+
+  Back: {
+
+    Out: s => {
+
+      s = s || 1.70158;
+
+      return t => { return ( t -= 1 ) * t * ( ( s + 1 ) * t + s ) + 1; };
+
+    },
+
+    In: s => {
+
+      s = s || 1.70158;
+
+      return t => { return t * t * ( ( s + 1 ) * t - s ); };
+
+    }
+
+  },
+
+  Elastic: {
+
+    Out: ( amplitude, period ) => {
+
+      let PI2 = Math.PI * 2;
+
+      let p1 = ( amplitude >= 1 ) ? amplitude : 1;
+      let p2 = ( period || 0.3 ) / ( amplitude < 1 ? amplitude : 1 );
+      let p3 = p2 / PI2 * ( Math.asin( 1 / p1 ) || 0 );
+
+      p2 = PI2 / p2;
+
+      return t => { return p1 * Math.pow( 2, -10 * t ) * Math.sin( ( t - p3 ) * p2 ) + 1 }
+
+    },
+
+  },
+
+};
+
+class Tween extends Animation {
+
+  constructor( options ) {
+
+    super( false );
+
+    this.duration = options.duration || 500;
+    this.easing = options.easing || ( t => t );
+    this.onUpdate = options.onUpdate || ( () => {} );
+    this.onComplete = options.onComplete || ( () => {} );
+
+    this.delay = options.delay || false;
+    this.yoyo = options.yoyo ? false : null;
+
+    this.progress = 0;
+    this.value = 0;
+    this.delta = 0;
+
+    this.getFromTo( options );
+
+    if ( this.delay ) setTimeout( () => super.start(), this.delay );
+    else super.start();
+
+    this.onUpdate( this );
+
+  }
+
+  update( delta ) {
+
+    const old = this.value * 1;
+    const direction = ( this.yoyo === true ) ? - 1 : 1;
+
+    this.progress += ( delta / this.duration ) * direction;
+
+    this.value = this.easing( this.progress );
+    this.delta = this.value - old;
+
+    if ( this.values !== null ) this.updateFromTo();
+
+    if ( this.yoyo !== null ) this.updateYoyo();
+    else if ( this.progress <= 1 ) this.onUpdate( this );
+    else {
+
+      this.progress = 1;
+      this.value = 1;
+      this.onUpdate( this );
+      this.onComplete( this );
+      super.stop();      
+
+    }
+
+  }
+
+  updateYoyo() {
+
+    if ( this.progress > 1 || this.progress < 0 ) {
+
+      this.value = this.progress = ( this.progress > 1 ) ? 1 : 0;
+      this.yoyo = ! this.yoyo;
+
+    }
+
+    this.onUpdate( this );
+
+  }
+
+  updateFromTo() {
+
+    this.values.forEach( key => {
+
+      this.target[ key ] = this.from[ key ] + ( this.to[ key ] - this.from[ key ] ) * this.value;
+
+    } );
+
+  }
+
+  getFromTo( options ) {
+
+    if ( ! options.target || ! options.to ) {
+
+      this.values = null;
+      return;
+
+    }
+
+    this.target = options.target || null;
+    this.from = options.from || {};
+    this.to = options.to || null;
+    this.values = [];
+
+    if ( Object.keys( this.from ).length < 1 )
+      Object.keys( this.to ).forEach( key => { this.from[ key ] = this.target[ key ]; } );
+
+    Object.keys( this.to ).forEach( key => { this.values.push( key ); } );
+
+  }
+
+}
+
+window.addEventListener( 'touchmove', () => {} );
+document.addEventListener( 'touchmove',  event => { event.preventDefault(); }, { passive: false } );
+
+class Draggable {
+
+  constructor( element, options ) {
+
+    this.position = {
+      current: new THREE.Vector2(),
+      start: new THREE.Vector2(),
+      delta: new THREE.Vector2(),
+      old: new THREE.Vector2(),
+      drag: new THREE.Vector2(),
+    };
+
+    this.options = Object.assign( {
+      calcDelta: false,
+    }, options || {} );
+
+    this.element = element;
+    this.touch = null;
+
+    this.drag = {
+
+      start: ( event ) => {
+
+        if ( event.type == 'mousedown' && event.which != 1 ) return;
+        if ( event.type == 'touchstart' && event.touches.length > 1 ) return;
+
+        this.getPositionCurrent( event );
+
+        if ( this.options.calcDelta ) {
+
+          this.position.start = this.position.current.clone();
+          this.position.delta.set( 0, 0 );
+          this.position.drag.set( 0, 0 );
+
+        }
+
+        this.touch = ( event.type == 'touchstart' );
+
+        this.onDragStart( this.position );
+
+        window.addEventListener( ( this.touch ) ? 'touchmove' : 'mousemove', this.drag.move, false );
+        window.addEventListener( ( this.touch ) ? 'touchend' : 'mouseup', this.drag.end, false );
+
+      },
+
+      move: ( event ) => {
+
+        if ( this.options.calcDelta ) {
+
+          this.position.old = this.position.current.clone();
+
+        }
+
+        this.getPositionCurrent( event );
+
+        if ( this.options.calcDelta ) {
+
+          this.position.delta = this.position.current.clone().sub( this.position.old );
+          this.position.drag = this.position.current.clone().sub( this.position.start );
+
+        }
+
+        this.onDragMove( this.position );
+
+      },
+
+      end: ( event ) => {
+
+        this.getPositionCurrent( event );
+
+        this.onDragEnd( this.position );
+
+        window.removeEventListener( ( this.touch ) ? 'touchmove' : 'mousemove', this.drag.move, false );
+        window.removeEventListener( ( this.touch ) ? 'touchend' : 'mouseup', this.drag.end, false );
+
+      },
+
+    };
+
+    this.onDragStart = () => {};
+    this.onDragMove = () => {};
+    this.onDragEnd = () => {};
+
+    this.enable();
+
+    return this;
+
+  }
+
+  enable() {
+
+    this.element.addEventListener( 'touchstart', this.drag.start, false );
+    this.element.addEventListener( 'mousedown', this.drag.start, false );
+
+    return this;
+
+  }
+
+  disable() {
+
+    this.element.removeEventListener( 'touchstart', this.drag.start, false );
+    this.element.removeEventListener( 'mousedown', this.drag.start, false );
+
+    return this;
+
+  }
+
+  getPositionCurrent( event ) {
+
+    const dragEvent = event.touches
+      ? ( event.touches[ 0 ] || event.changedTouches[ 0 ] )
+      : event;
+
+    this.position.current.set( dragEvent.pageX, dragEvent.pageY );
+
+  }
+
+  convertPosition( position ) {
+
+    position.x = ( position.x / this.element.offsetWidth ) * 2 - 1;
+    position.y = - ( ( position.y / this.element.offsetHeight ) * 2 - 1 );
+
+    return position;
+
+  }
+
+}
+
+const STILL = 0;
+const PREPARING = 1;
+const ROTATING = 2;
+const ANIMATING = 3;
+
+class Controls {
+
+  constructor( game ) {
+
+    this.game = game;
+
+    this.flipConfig = 0;
+
+    this.flipEasings = [ Easing.Power.Out( 3 ), Easing.Sine.Out(), Easing.Back.Out( 1.5 ) ];
+    this.flipSpeeds = [ 125, 200, 300 ];
+
+    this.raycaster = new THREE.Raycaster();
+
+    const helperMaterial = new THREE.MeshBasicMaterial( { depthWrite: false, transparent: true, opacity: 0, color: 0x0033ff } );
+
+    this.group = new THREE.Object3D();
+    this.group.name = 'controls';
+    this.game.cube.object.add( this.group );
+
+    this.helper = new THREE.Mesh(
+      new THREE.PlaneBufferGeometry( 200, 200 ),
+      helperMaterial.clone()
+    );
+
+    this.helper.rotation.set( 0, Math.PI / 4, 0 );
+    this.game.world.scene.add( this.helper );
+
+    this.edges = new THREE.Mesh(
+      new THREE.BoxBufferGeometry( 1, 1, 1 ),
+      helperMaterial.clone(),
+    );
+
+    this.game.world.scene.add( this.edges );
+
+    this.onSolved = () => {};
+    this.onMove = () => {};
+
+    this.momentum = [];
+
+    this.scramble = null;
+    this.state = STILL;
+    this.enabled = false;
+
+    this.initDraggable();
+
+  }
+
+  enable() {
+
+    this.draggable.enable();
+    this.enabled = true;
+
+  }
+
+  disable() {
+
+    this.draggable.disable();
+    this.enabled = false;
+
+  }
+
+  initDraggable() {
+
+    this.draggable = new Draggable( this.game.dom.game );
+
+    this.draggable.onDragStart = position => {
+
+      if ( this.scramble !== null ) return;
+      if ( this.state === PREPARING || this.state === ROTATING ) return;
+
+      this.gettingDrag = this.state === ANIMATING;
+
+      const edgeIntersect = this.getIntersect( position.current, this.edges, false );
+
+      if ( edgeIntersect !== false ) {
+
+        this.dragIntersect = this.getIntersect( position.current, this.game.cube.cubes, true );
+
+      }
+
+      if ( edgeIntersect !== false && this.dragIntersect !== false ) {
+
+        this.dragNormal = edgeIntersect.face.normal.round();
+        this.flipType = 'layer';
+
+        this.attach( this.helper, this.edges );
+
+        this.helper.rotation.set( 0, 0, 0 );
+        this.helper.position.set( 0, 0, 0 );
+        this.helper.lookAt( this.dragNormal );
+        this.helper.translateZ( 0.5 );
+        this.helper.updateMatrixWorld();
+
+        this.detach( this.helper, this.edges );
+
+      } else {
+
+        this.dragNormal = new THREE.Vector3( 0, 0, 1 );
+        this.flipType = 'cube';
+
+        this.helper.position.set( 0, 0, 0 );
+        this.helper.rotation.set( 0, Math.PI / 4, 0 );
+        this.helper.updateMatrixWorld();
+
+      }
+
+      let planeIntersect = this.getIntersect( position.current, this.helper, false );
+      if ( planeIntersect === false ) return;
+
+      this.dragCurrent = this.helper.worldToLocal( planeIntersect.point );
+      this.dragTotal = new THREE.Vector3();
+      this.state = ( this.state === STILL ) ? PREPARING : this.state;
+
+    };
+
+    this.draggable.onDragMove = position => {
+
+      if ( this.scramble !== null ) return;
+      if ( this.state === STILL || ( this.state === ANIMATING && this.gettingDrag === false ) ) return;
+
+      const planeIntersect = this.getIntersect( position.current, this.helper, false );
+      if ( planeIntersect === false ) return;
+
+      const point = this.helper.worldToLocal( planeIntersect.point.clone() );
+
+      this.dragDelta = point.clone().sub( this.dragCurrent ).setZ( 0 );
+      this.dragTotal.add( this.dragDelta );
+      this.dragCurrent = point;
+      this.addMomentumPoint( this.dragDelta );
+
+      if ( this.state === PREPARING && this.dragTotal.length() > 0.05 ) {
+
+        this.dragDirection = this.getMainAxis( this.dragTotal );
+
+        if ( this.flipType === 'layer' ) {
+
+          const direction = new THREE.Vector3();
+          direction[ this.dragDirection ] = 1;
+
+          const worldDirection = this.helper.localToWorld( direction ).sub( this.helper.position );
+          const objectDirection = this.edges.worldToLocal( worldDirection ).round();
+
+          this.flipAxis = objectDirection.cross( this.dragNormal ).negate();
+
+          this.selectLayer( this.getLayer( false ) );
+
+        } else {
+
+          const axis = ( this.dragDirection != 'x' )
+            ? ( ( this.dragDirection == 'y' && position.current.x > this.game.world.width / 2 ) ? 'z' : 'x' )
+            : 'y';
+
+          this.flipAxis = new THREE.Vector3();
+          this.flipAxis[ axis ] = 1 * ( ( axis == 'x' ) ? - 1 : 1 );
+
+        }
+
+        this.flipAngle = 0;
+        this.state = ROTATING;
+
+      } else if ( this.state === ROTATING ) {
+
+        const rotation = this.dragDelta[ this.dragDirection ];
+
+        if ( this.flipType === 'layer' ) { 
+
+          this.group.rotateOnAxis( this.flipAxis, rotation );
+          this.flipAngle += rotation;
+
+        } else {
+
+          this.edges.rotateOnWorldAxis( this.flipAxis, rotation );
+          this.game.cube.object.rotation.copy( this.edges.rotation );
+          this.flipAngle += rotation;
+
+        }
+
+      }
+
+    };
+
+    this.draggable.onDragEnd = position => {
+
+      if ( this.scramble !== null ) return;
+      if ( this.state !== ROTATING ) {
+
+        this.gettingDrag = false;
+        this.state = STILL;
+        return;
+
+      }
+
+      this.state = ANIMATING;
+
+      const momentum = this.getMomentum()[ this.dragDirection ];
+      const flip = ( Math.abs( momentum ) > 0.05 && Math.abs( this.flipAngle ) < Math.PI / 2 );
+
+      const angle = flip
+        ? this.roundAngle( this.flipAngle + Math.sign( this.flipAngle ) * ( Math.PI / 4 ) )
+        : this.roundAngle( this.flipAngle );
+
+      const delta = angle - this.flipAngle;
+
+      if ( this.flipType === 'layer' ) {
+
+        this.rotateLayer( delta, false, layer => {
+
+          this.game.storage.saveGame();
+          
+          this.state = this.gettingDrag ? PREPARING : STILL;
+          this.gettingDrag = false;
+
+          this.checkIsSolved();
+
+        } );
+
+      } else {
+
+        this.rotateCube( delta, () => {
+
+          this.state = this.gettingDrag ? PREPARING : STILL;
+          this.gettingDrag = false;
+
+        } );
+
+      }
+
+    };
+
+  }
+
+  rotateLayer( rotation, scramble, callback ) {
+
+    const config = scramble ? 0 : this.flipConfig;
+
+    const easing = this.flipEasings[ config ];
+    const duration = this.flipSpeeds[ config ];
+    const bounce = ( config == 2 ) ? this.bounceCube() : ( () => {} );
+
+    this.rotationTween = new Tween( {
+      easing: easing,
+      duration: duration,
+      onUpdate: tween => {
+
+        let deltaAngle = tween.delta * rotation;
+        this.group.rotateOnAxis( this.flipAxis, deltaAngle );
+        bounce( tween.value, deltaAngle, rotation );
+
+      },
+      onComplete: () => {
+
+        if ( ! scramble ) this.onMove();
+
+        const layer = this.flipLayer.slice( 0 );
+
+        this.game.cube.object.rotation.setFromVector3( this.snapRotation( this.game.cube.object.rotation.toVector3() ) );
+        this.group.rotation.setFromVector3( this.snapRotation( this.group.rotation.toVector3() ) );
+        this.deselectLayer( this.flipLayer );
+
+        callback( layer );
+
+      },
+    } );
+
+  }
+
+  bounceCube() {
+
+    let fixDelta = true;
+
+    return ( progress, delta, rotation ) => {
+
+        if ( progress >= 1 ) {
+
+          if ( fixDelta ) {
+
+            delta = ( progress - 1 ) * rotation;
+            fixDelta = false;
+
+          }
+
+          this.game.cube.object.rotateOnAxis( this.flipAxis, delta );
+
+        }
+
+    }
+
+  }
+
+  rotateCube( rotation, callback ) {
+
+    const config = this.flipConfig;
+    const easing = [ Easing.Power.Out( 4 ), Easing.Sine.Out(), Easing.Back.Out( 2 ) ][ config ];
+    const duration = [ 100, 150, 350 ][ config ];
+
+    this.rotationTween = new Tween( {
+      easing: easing,
+      duration: duration,
+      onUpdate: tween => {
+
+        this.edges.rotateOnWorldAxis( this.flipAxis, tween.delta * rotation );
+        this.game.cube.object.rotation.copy( this.edges.rotation );
+
+      },
+      onComplete: () => {
+
+        this.edges.rotation.setFromVector3( this.snapRotation( this.edges.rotation.toVector3() ) );
+        this.game.cube.object.rotation.copy( this.edges.rotation );
+        callback();
+
+      },
+    } );
+
+  }
+
+  selectLayer( layer ) {
+
+    this.group.rotation.set( 0, 0, 0 );
+    this.movePieces( layer, this.game.cube.object, this.group );
+    this.flipLayer = layer;
+
+  }
+
+  deselectLayer( layer ) {
+
+    this.movePieces( layer, this.group, this.game.cube.object );
+    this.flipLayer = null;
+
+  }
+
+  movePieces( layer, from, to ) {
+
+    from.updateMatrixWorld();
+    to.updateMatrixWorld();
+
+    layer.forEach( index => {
+
+      const piece = this.game.cube.pieces[ index ];
+
+      piece.applyMatrix( from.matrixWorld );
+      from.remove( piece );
+      piece.applyMatrix( new THREE.Matrix4().getInverse( to.matrixWorld ) );
+      to.add( piece );
+
+    } );
+
+  }
+
+  getLayer( position ) {
+
+    const scalar = { 2: 6, 3: 3, 4: 4, 5: 3 }[ this.game.cube.size ];
+    const layer = [];
+
+    let axis;
+
+    if ( position === false ) {
+
+      const piece = this.dragIntersect.object.parent;
+
+      axis = this.getMainAxis( this.flipAxis );
+      position = piece.position.clone() .multiplyScalar( scalar ) .round();
+
+    } else {
+
+      axis = this.getMainAxis( position );
+
+    }
+
+    this.game.cube.pieces.forEach( piece => {
+
+      const piecePosition = piece.position.clone().multiplyScalar( scalar ).round();
+
+      if ( piecePosition[ axis ] == position[ axis ] ) layer.push( piece.name );
+
+    } );
+
+    return layer;
+
+  }
+
+  keyboardMove( type, move, callback ) {
+
+    if ( this.state !== STILL ) return;
+    if ( this.enabled !== true ) return;
+
+    if ( type === 'LAYER' ) {
+
+      const layer = this.getLayer( move.position );
+
+      this.flipAxis = new THREE.Vector3();
+      this.flipAxis[ move.axis ] = 1;
+      this.state = ROTATING;
+
+      this.selectLayer( layer );
+      this.rotateLayer( move.angle, false, layer => {
+
+        this.game.storage.saveGame();
+        this.state = STILL;
+        this.checkIsSolved();
+
+      } );
+
+    } else if ( type === 'CUBE' ) {
+
+      this.flipAxis = new THREE.Vector3();
+      this.flipAxis[ move.axis ] = 1;
+      this.state = ROTATING;
+
+      this.rotateCube( move.angle, () => {
+
+        this.state = STILL;
+
+      } );
+
+    }
+
+  }
+
+  scrambleCube() {
+
+    if ( this.scramble == null ) {
+
+      this.scramble = this.game.scrambler;
+      this.scramble.callback = ( typeof callback !== 'function' ) ? () => {} : callback;
+
+    }
+
+    const converted = this.scramble.converted;
+    const move = converted[ 0 ];
+    const layer = this.getLayer( move.position );
+
+    this.flipAxis = new THREE.Vector3();
+    this.flipAxis[ move.axis ] = 1;
+
+    this.selectLayer( layer );
+    this.rotateLayer( move.angle, true, () => {
+
+      converted.shift();
+
+      if ( converted.length > 0 ) {
+
+        this.scrambleCube();
+
+      } else {
+
+        this.scramble = null;
+        this.game.storage.saveGame();
+
+      }
+
+    } );
+
+  }
+
+  getIntersect( position, object, multiple ) {
+
+    this.raycaster.setFromCamera(
+      this.draggable.convertPosition( position.clone() ),
+      this.game.world.camera
+    );
+
+    const intersect = ( multiple )
+      ? this.raycaster.intersectObjects( object )
+      : this.raycaster.intersectObject( object );
+
+    return ( intersect.length > 0 ) ? intersect[ 0 ] : false;
+
+  }
+
+  getMainAxis( vector ) {
+
+    return Object.keys( vector ).reduce(
+      ( a, b ) => Math.abs( vector[ a ] ) > Math.abs( vector[ b ] ) ? a : b
+    );
+
+  }
+
+  detach( child, parent ) {
+
+    child.applyMatrix( parent.matrixWorld );
+    parent.remove( child );
+    this.game.world.scene.add( child );
+
+  }
+
+  attach( child, parent ) {
+
+    child.applyMatrix( new THREE.Matrix4().getInverse( parent.matrixWorld ) );
+    this.game.world.scene.remove( child );
+    parent.add( child );
+
+  }
+
+  addMomentumPoint( delta ) {
+
+    const time = Date.now();
+
+    this.momentum = this.momentum.filter( moment => time - moment.time < 500 );
+
+    if ( delta !== false ) this.momentum.push( { delta, time } );
+
+  }
+
+  getMomentum() {
+
+    const points = this.momentum.length;
+    const momentum = new THREE.Vector2();
+
+    this.addMomentumPoint( false );
+
+    this.momentum.forEach( ( point, index ) => {
+
+      momentum.add( point.delta.multiplyScalar( index / points ) );
+
+    } );
+
+    return momentum;
+
+  }
+
+  roundAngle( angle ) {
+
+    const round = Math.PI / 2;
+    return Math.sign( angle ) * Math.round( Math.abs( angle) / round ) * round;
+
+  }
+
+  snapRotation( angle ) {
+
+    return angle.set(
+      this.roundAngle( angle.x ),
+      this.roundAngle( angle.y ),
+      this.roundAngle( angle.z )
+    );
+
+  }
+
+  checkIsSolved() {
+
+    const start = performance.now();
+
+    let solved = true;
+    const sides = { 'x-': [], 'x+': [], 'y-': [], 'y+': [], 'z-': [], 'z+': [] };
+
+    this.game.cube.edges.forEach( edge => {
+
+      const position = edge.parent
+        .localToWorld( edge.position.clone() )
+        .sub( this.game.cube.object.position );
+
+      const mainAxis = this.getMainAxis( position );
+      const mainSign = position.multiplyScalar( 2 ).round()[ mainAxis ] < 1 ? '-' : '+';
+
+      sides[ mainAxis + mainSign ].push( edge.name );
+
+    } );
+
+    Object.keys( sides ).forEach( side => {
+
+      if ( ! sides[ side ].every( value => value === sides[ side ][ 0 ] ) ) solved = false;
+
+    } );
+
+    if ( solved ) this.onSolved();
+
+  }
+
+}
+
+class Scrambler {
+
+  constructor( game ) {
+
+    this.game = game;
+
+    this.dificulty = 0;
+
+    this.scrambleLength = {
+      2: [ 7, 9, 11 ],
+      3: [ 20, 25, 30 ],
+      4: [ 30, 40, 50 ],
+      5: [ 40, 60, 80 ],
+    };
+
+    this.moves = [];
+    this.conveted = [];
+    this.pring = '';
+
+  }
+
+  scramble( scramble ) {
+
+    let count = 0;
+    this.moves = ( typeof scramble !== 'undefined' ) ? scramble.split( ' ' ) : [];
+
+    if ( this.moves.length < 1 ) {
+
+      const scrambleLength = this.scrambleLength[ this.game.cube.size ][ this.dificulty ];
+
+      const faces = this.game.cube.size < 4 ? 'UDLRFB' : 'UuDdLlRrFfBb';
+      const modifiers = [ "", "'", "2" ];
+      const total = ( typeof scramble === 'undefined' ) ? scrambleLength : scramble;
+
+      while ( count < total ) {
+
+        const move =
+          faces[ Math.floor( Math.random() * faces.length ) ] +
+          modifiers[ Math.floor( Math.random() * 3 ) ];
+
+        if ( count > 0 && move.charAt( 0 ) == this.moves[ count - 1 ].charAt( 0 ) ) continue;
+        if ( count > 1 && move.charAt( 0 ) == this.moves[ count - 2 ].charAt( 0 ) ) continue;
+
+        this.moves.push( move );
+        count ++;
+
+      }
+
+    }
+
+    this.callback = () => {};
+    this.convert();
+    this.print = this.moves.join( ' ' );
+
+    return this;
+
+  }
+
+  convert( moves ) {
+
+    this.converted = [];
+
+    this.moves.forEach( move => {
+
+      const convertedMove = this.convertMove( move );
+      const modifier = move.charAt( 1 );
+
+      this.converted.push( convertedMove );
+      if ( modifier == "2" ) this.converted.push( convertedMove );
+
+    } );
+
+  }
+
+  convertMove( move ) {
+
+    const face = move.charAt( 0 );
+    const modifier = move.charAt( 1 );
+
+    const axis = { D: 'y', U: 'y', L: 'x', R: 'x', F: 'z', B: 'z' }[ face.toUpperCase() ];
+    let row = { D: -1, U: 1, L: -1, R: 1, F: 1, B: -1 }[ face.toUpperCase() ];
+
+    if ( this.game.cube.size > 3 && face !== face.toLowerCase() ) row = row * 2;
+
+    const position = new THREE.Vector3();
+    position[ { D: 'y', U: 'y', L: 'x', R: 'x', F: 'z', B: 'z' }[ face.toUpperCase() ] ] = row;
+
+    const angle = ( Math.PI / 2 ) * - row * ( ( modifier == "'" ) ? - 1 : 1 );
+
+    return { position, axis, angle, name: move };
+
+  }
+
+}
+
+class Transition {
+
+  constructor( game ) {
+
+    this.game = game;
+
+    this.tweens = {};
+    this.durations = {};
+    this.data = {
+      cubeY: -0.2,
+      cameraZoom: 0.85,
+    };
+
+    this.activeTransitions = 0;
+
+  }
+
+  init() {
+
+    this.game.controls.disable();
+
+    this.game.cube.object.position.y = this.data.cubeY;
+    this.game.cube.animator.position.y = 4;
+    this.game.cube.animator.rotation.x = - Math.PI / 3;
+    this.game.world.camera.zoom = this.data.cameraZoom;
+    this.game.world.camera.updateProjectionMatrix();
+
+    this.tweens.buttons = {};
+    this.tweens.timer = [];
+    this.tweens.title = [];
+    this.tweens.best = [];
+    this.tweens.complete = [];
+    this.tweens.prefs = [];
+    this.tweens.theme = [];
+    this.tweens.stats = [];
+
+  }
+
+  buttons( show, hide ) {
+
+    const buttonTween = ( button, show ) => {
+
+      return new Tween( {
+        target: button.style,
+        duration: 300,
+        easing: show ? Easing.Power.Out( 2 ) : Easing.Power.In( 3 ),
+        from: { opacity: show ? 0 : 1 },
+        to: { opacity: show ? 1 : 0 },
+        onUpdate: tween => {
+
+          const translate = show ? 1 - tween.value : tween.value;
+          button.style.transform = `translate3d(0, ${translate * 1.5}em, 0)`;
+
+        },
+        onComplete: () => button.style.pointerEvents = show ? 'all' : 'none'
+      } );
+
+    };
+
+    hide.forEach( button =>
+      this.tweens.buttons[ button ] = buttonTween( this.game.dom.buttons[ button ], false )
+    );
+
+    setTimeout( () => show.forEach( button => {
+
+      this.tweens.buttons[ button ] = buttonTween( this.game.dom.buttons[ button ], true );
+
+    } ), hide ? 500 : 0 );
+
+  }
+
+  cube( show, theming = false ) {
+
+    this.activeTransitions++;
+
+    try { this.tweens.cube.stop(); } catch(e) {}
+    const currentY = this.game.cube.animator.position.y;
+    const currentRotation = this.game.cube.animator.rotation.x;
+
+    this.tweens.cube = new Tween( {
+      duration: show ? 3000 : 1250,
+      easing: show ? Easing.Elastic.Out( 0.8, 0.6 ) : Easing.Back.In( 1 ),
+      onUpdate: tween => {
+
+        this.game.cube.animator.position.y = show
+          ? ( theming ? 0.9 + ( 1 - tween.value ) * 3.5 : ( 1 - tween.value ) * 4 )
+          : currentY + tween.value * 4;
+
+        this.game.cube.animator.rotation.x = show
+          ? ( 1 - tween.value ) * Math.PI / 3
+          : currentRotation + tween.value * - Math.PI / 3;
+
+      },
+    } );
+
+    if ( theming ) {
+
+      if ( show ) {
+
+        this.game.world.camera.zoom = 0.75;
+        this.game.world.camera.updateProjectionMatrix();
+
+      } else {
+
+        setTimeout( () => {
+
+          this.game.world.camera.zoom = this.data.cameraZoom;
+          this.game.world.camera.updateProjectionMatrix();
+
+        }, 1500 );
+
+      }
+
+    }
+
+    this.durations.cube = show ? 1500 : 1500;
+
+    setTimeout( () => this.activeTransitions--, this.durations.cube );
+
+  }
+
+  float() {
+
+    try { this.tweens.float.stop(); } catch(e) {}
+    this.tweens.float = new Tween( {
+      duration: 1500,
+      easing: Easing.Sine.InOut(),
+      yoyo: true,
+      onUpdate: tween => {
+
+        this.game.cube.holder.position.y = (- 0.02 + tween.value * 0.04); 
+        this.game.cube.holder.rotation.x = 0.005 - tween.value * 0.01;
+        this.game.cube.holder.rotation.z = - this.game.cube.holder.rotation.x;
+        this.game.cube.holder.rotation.y = this.game.cube.holder.rotation.x;
+
+        this.game.controls.edges.position.y =
+          this.game.cube.holder.position.y + this.game.cube.object.position.y;
+
+      },
+    } );
+
+  }
+
+  zoom( play, time ) {
+
+    this.activeTransitions++;
+
+    const zoom = ( play ) ? 1 : this.data.cameraZoom;
+    const duration = ( time > 0 ) ? Math.max( time, 1500 ) : 1500;
+    const rotations = ( time > 0 ) ? Math.round( duration / 1500 ) : 1;
+    const easing = Easing.Power.InOut( ( time > 0 ) ? 2 : 3 );
+
+    this.tweens.zoom = new Tween( {
+      target: this.game.world.camera,
+      duration: duration,
+      easing: easing,
+      to: { zoom: zoom },
+      onUpdate: () => { this.game.world.camera.updateProjectionMatrix(); },
+    } );
+
+    this.tweens.rotate = new Tween( {
+      target: this.game.cube.animator.rotation,
+      duration: duration,
+      easing: easing,
+      to: { y: - Math.PI * 2 * rotations },
+      onComplete: () => { this.game.cube.animator.rotation.y = 0; },
+    } );
+
+    this.durations.zoom = duration;
+
+    setTimeout( () => this.activeTransitions--, this.durations.zoom );
+
+  }
+
+  elevate( complete ) {
+
+    this.activeTransitions++;
+
+    const cubeY = 
+
+    this.tweens.elevate = new Tween( {
+      target: this.game.cube.object.position,
+      duration: complete ? 1500 : 0,
+      easing: Easing.Power.InOut( 3 ),
+      to: { y: complete ? -0.05 : this.data.cubeY }
+    } );
+
+    this.durations.elevate = 1500;
+
+    setTimeout( () => this.activeTransitions--, this.durations.elevate );
+
+  }
+
+  complete( show, best ) {
+
+    this.activeTransitions++;
+
+    const text = best ? this.game.dom.texts.best : this.game.dom.texts.complete;
+
+    if ( text.querySelector( 'span i' ) === null )
+      text.querySelectorAll( 'span' ).forEach( span => this.splitLetters( span ) );
+
+    const letters = text.querySelectorAll( '.icon, i' );
+
+    this.flipLetters( best ? 'best' : 'complete', letters, show );
+
+    text.style.opacity = 1;
+
+    const duration = this.durations[ best ? 'best' : 'complete' ];
+
+    if ( ! show ) setTimeout( () => this.game.dom.texts.timer.style.transform = '', duration );
+
+    setTimeout( () => this.activeTransitions--, duration );
+
+  } 
+
+  stats( show ) {
+
+    if ( show ) this.game.scores.calcStats();
+
+    this.activeTransitions++;
+
+    this.tweens.stats.forEach( tween => { tween.stop(); tween = null; } );
+
+    let tweenId = -1;
+
+    const stats = this.game.dom.stats.querySelectorAll( '.stats' );
+    const easing = show ? Easing.Power.Out( 2 ) : Easing.Power.In( 3 );
+
+    stats.forEach( ( stat, index ) => {
+
+      const delay = index * ( show ? 80 : 60 );
+
+      this.tweens.stats[ tweenId++ ] = new Tween( {
+        delay: delay,
+        duration: 400,
+        easing: easing,
+        onUpdate: tween => {
+
+          const translate = show ? ( 1 - tween.value ) * 2 : tween.value;
+          const opacity = show ? tween.value : ( 1 - tween.value );
+
+          stat.style.transform = `translate3d(0, ${translate}em, 0)`;
+          stat.style.opacity = opacity;
+
+        }
+      } );
+
+    } );
+
+    this.durations.stats = 0;
+
+    setTimeout( () => this.activeTransitions--, this.durations.stats );
+
+  }
+
+  preferences( show ) {
+
+    this.ranges( this.game.dom.prefs.querySelectorAll( '.range' ), 'prefs', show );
+
+  }
+
+  theming( show ) {
+
+    this.ranges( this.game.dom.theme.querySelectorAll( '.range' ), 'prefs', show );
+
+  }
+
+  ranges( ranges, type, show ) {
+
+    this.activeTransitions++;
+
+    this.tweens[ type ].forEach( tween => { tween.stop(); tween = null; } );
+
+    const easing = show ? Easing.Power.Out(2) : Easing.Power.In(3);
+
+    let tweenId = -1;
+    let listMax = 0;
+
+    ranges.forEach( ( range, rangeIndex ) => {
+    
+      const label = range.querySelector( '.range__label' );
+      const track = range.querySelector( '.range__track-line' );
+      const handle = range.querySelector( '.range__handle' );
+      const list = range.querySelectorAll( '.range__list div' );
+
+      const delay = rangeIndex * ( show ? 120 : 100 );
+
+      label.style.opacity = show ? 0 : 1;
+      track.style.opacity = show ? 0 : 1;
+      handle.style.opacity = show ? 0 : 1;
+      handle.style.pointerEvents = show ? 'all' : 'none';
+
+      this.tweens[ type ][ tweenId++ ] = new Tween( {
+        delay: show ? delay : delay,
+        duration: 400,
+        easing: easing,
+        onUpdate: tween => {
+
+          const translate = show ? ( 1 - tween.value ) : tween.value;
+          const opacity = show ? tween.value : ( 1 - tween.value );
+
+          label.style.transform = `translate3d(0, ${translate}em, 0)`;
+          label.style.opacity = opacity;
+
+        }
+      } );
+
+      this.tweens[ type ][ tweenId++ ] = new Tween( {
+        delay: show ? delay + 100 : delay,
+        duration: 400,
+        easing: easing,
+        onUpdate: tween => {
+
+          const translate = show ? ( 1 - tween.value ) : tween.value;
+          const scale = show ? tween.value : ( 1 - tween.value );
+          const opacity = scale;
+
+          track.style.transform = `translate3d(0, ${translate}em, 0) scale3d(${scale}, 1, 1)`;
+          track.style.opacity = opacity;
+
+        }
+      } );
+
+      this.tweens[ type ][ tweenId++ ] = new Tween( {
+        delay: show ? delay + 100 : delay,
+        duration: 400,
+        easing: easing,
+        onUpdate: tween => {
+
+          const translate = show ? ( 1 - tween.value ) : tween.value;
+          const opacity = 1 - translate;
+          const scale = 0.5 + opacity * 0.5;
+
+          handle.style.transform = `translate3d(0, ${translate}em, 0) scale3d(${scale}, ${scale}, ${scale})`;
+          handle.style.opacity = opacity;
+
+        }
+      } );
+
+      list.forEach( ( listItem, labelIndex ) => {
+
+        listItem.style.opacity = show ? 0 : 1;
+
+        this.tweens[ type ][ tweenId++ ] = new Tween( {
+          delay: show ? delay + 200 + labelIndex * 50 : delay,
+          duration: 400,
+          easing: easing,
+          onUpdate: tween => {
+
+            const translate = show ? ( 1 - tween.value ) : tween.value;
+            const opacity = show ? tween.value : ( 1 - tween.value );
+
+            listItem.style.transform = `translate3d(0, ${translate}em, 0)`;
+            listItem.style.opacity = opacity;
+
+          }
+        } );
+
+      } );
+
+      listMax = list.length > listMax ? list.length - 1 : listMax;
+
+      range.style.opacity = 1;
+
+    } );
+
+    this.durations[ type ] = show
+      ? ( ( ranges.length - 1 ) * 100 ) + 200 + listMax * 50 + 400
+      : ( ( ranges.length - 1 ) * 100 ) + 400;
+
+    setTimeout( () => this.activeTransitions--, this.durations[ type ] ); 
+
+  }
+
+  title( show ) {
+
+    this.activeTransitions++;
+
+    const title = this.game.dom.texts.title;
+
+    if ( title.querySelector( 'span i' ) === null )
+      title.querySelectorAll( 'span' ).forEach( span => this.splitLetters( span ) );
+
+    const letters = title.querySelectorAll( 'i' );
+
+    this.flipLetters( 'title', letters, show );
+
+    title.style.opacity = 1;
+
+    const note = this.game.dom.texts.note;
+
+    this.tweens.title[ letters.length ] = new Tween( {
+      target: note.style,
+      easing: Easing.Sine.InOut(),
+      duration: show ? 800 : 400,
+      yoyo: show ? true : null,
+      from: { opacity: show ? 0 : ( parseFloat( getComputedStyle( note ).opacity ) ) },
+      to: { opacity: show ? 1 : 0 },
+    } );
+
+    setTimeout( () => this.activeTransitions--, this.durations.title );
+
+  }
+
+  timer( show ) {
+
+    this.activeTransitions++;
+
+    const timer = this.game.dom.texts.timer;
+
+    timer.style.opacity = 0;
+    this.game.timer.convert();
+    this.game.timer.setText();
+
+    this.splitLetters( timer );
+    const letters = timer.querySelectorAll( 'i' );
+    this.flipLetters( 'timer', letters, show );
+
+    timer.style.opacity = 1;
+
+    setTimeout( () => this.activeTransitions--, this.durations.timer );
+
+  }
+
+  splitLetters( element ) {
+
+    const text = element.innerHTML;
+
+    element.innerHTML = '';
+
+    text.split( '' ).forEach( letter => {
+
+      const i = document.createElement( 'i' );
+
+      i.innerHTML = letter;
+
+      element.appendChild( i );
+
+    } );
+
+  }
+
+  flipLetters( type, letters, show ) {
+
+    try { this.tweens[ type ].forEach( tween => tween.stop() ); } catch(e) {}
+    letters.forEach( ( letter, index ) => {
+
+      letter.style.opacity = show ? 0 : 1;
+
+      this.tweens[ type ][ index ] = new Tween( {
+        easing: Easing.Sine.Out(),
+        duration: show ? 800 : 400,
+        delay: index * 50,
+        onUpdate: tween => {
+
+          const rotation = show ? ( 1 - tween.value ) * -80 : tween.value * 80;
+
+          letter.style.transform = `rotate3d(0, 1, 0, ${rotation}deg)`;
+          letter.style.opacity = show ? tween.value : ( 1 - tween.value );
+
+        },
+      } );
+
+    } );
+
+    this.durations[ type ] = ( letters.length - 1 ) * 50 + ( show ? 800 : 400 );
+
+  }
+
+}
+
+class Timer extends Animation {
+
+  constructor( game ) {
+
+    super( false );
+
+    this.game = game;
+    this.reset();
+    
+  }
+
+  start( continueGame ) {
+
+    this.startTime = continueGame ? ( Date.now() - this.deltaTime ) : Date.now();
+    this.deltaTime = 0;
+    this.converted = this.convert();
+
+    super.start();
+
+  }
+
+  reset() {
+
+    this.startTime = 0;
+    this.currentTime = 0;
+    this.deltaTime = 0;
+    this.converted = '0:00';
+
+  }
+
+  stop() {
+
+    this.currentTime = Date.now();
+    this.deltaTime = this.currentTime - this.startTime;
+    this.convert();
+
+    super.stop();
+
+    return { time: this.converted, millis: this.deltaTime };
+
+  }
+
+  update() {
+
+    const old = this.converted;
+
+    this.currentTime = Date.now();
+    this.deltaTime = this.currentTime - this.startTime;
+    this.convert();
+
+    if ( this.converted != old ) {
+
+      localStorage.setItem( 'theCube_time', this.deltaTime );
+      this.setText();
+
+    }
+
+  }
+
+  convert() {
+
+    const seconds = parseInt( ( this.deltaTime / 1000 ) % 60 );
+    const minutes = parseInt( ( this.deltaTime / ( 1000 * 60 ) ) );
+
+    this.converted = minutes + ':' + ( seconds < 10 ? '0' : '' ) + seconds;
+
+  }
+
+  setText() {
+
+    this.game.dom.texts.timer.innerHTML = this.converted;
+
+  }
+
+}
+
+const RangeHTML = [
+
+  '<div class="range">',
+    '<div class="range__label"></div>',
+    '<div class="range__track">',
+      '<div class="range__track-line"></div>',
+      '<div class="range__handle"><div></div></div>',
+    '</div>',
+    '<div class="range__list"></div>',
+  '</div>',
+
+].join( '\n' );
+
+document.querySelectorAll( 'range' ).forEach( el => {
+
+  const temp = document.createElement( 'div' );
+  temp.innerHTML = RangeHTML;
+
+  const range = temp.querySelector( '.range' );
+  const rangeLabel = range.querySelector( '.range__label' );
+  const rangeList = range.querySelector( '.range__list' );
+
+  range.setAttribute( 'name', el.getAttribute( 'name' ) );
+  rangeLabel.innerHTML = el.getAttribute( 'title' );
+
+  if ( el.hasAttribute( 'color' ) ) {
+
+    range.classList.add( 'range--type-color' );
+    range.classList.add( 'range--color-' + el.getAttribute( 'name' ) );
+
+  }
+
+  if ( el.hasAttribute( 'list' ) ) {
+
+    el.getAttribute( 'list' ).split( ',' ).forEach( listItemText => {
+
+      const listItem = document.createElement( 'div' );
+      listItem.innerHTML = listItemText;
+      rangeList.appendChild( listItem );
+
+    } );
+
+  }
+
+  el.parentNode.replaceChild( range, el );
+
+} );
+
+class Range {
+
+  constructor( name, options ) {
+
+    options = Object.assign( {
+      range: [ 0, 1 ],
+      value: 0,
+      step: 0,
+      onUpdate: () => {},
+      onComplete: () => {},
+    }, options || {} );
+
+    this.element = document.querySelector( '.range[name="' + name + '"]' );
+    this.track = this.element.querySelector( '.range__track' );
+    this.handle = this.element.querySelector( '.range__handle' );
+    this.list = [].slice.call( this.element.querySelectorAll( '.range__list div' ) );
+
+    this.value = options.value;
+    this.min = options.range[0];
+    this.max = options.range[1];
+    this.step = options.step;
+
+    this.onUpdate = options.onUpdate;
+    this.onComplete = options.onComplete;
+
+    this.setValue( this.value );
+
+    this.initDraggable();
+
+  }
+
+  setValue( value ) {
+
+    this.value = this.round( this.limitValue( value ) );
+    this.setHandlePosition();
+
+  }
+
+  initDraggable() {
+
+    let current;
+
+    this.draggable = new Draggable( this.handle, { calcDelta: true } );
+
+    this.draggable.onDragStart = position => {
+
+      current = this.positionFromValue( this.value );
+      this.handle.style.left = current + 'px';
+
+    };
+
+    this.draggable.onDragMove = position => {
+
+      current = this.limitPosition( current + position.delta.x );
+      this.value = this.round( this.valueFromPosition( current ) );
+      this.setHandlePosition();
+      
+      this.onUpdate( this.value );
+
+    };
+
+    this.draggable.onDragEnd = position => {
+
+      this.onComplete( this.value );
+
+    };
+
+  }
+
+  round( value ) {
+
+    if ( this.step < 1 ) return value;
+
+    return Math.round( ( value - this.min ) / this.step ) * this.step + this.min;
+
+  }
+
+  limitValue( value ) {
+
+    const max = Math.max( this.max, this.min );
+    const min = Math.min( this.max, this.min );
+
+    return Math.min( Math.max( value, min ), max );
+
+  }
+
+  limitPosition( position ) {
+
+    return Math.min( Math.max( position, 0 ), this.track.offsetWidth );
+
+  }
+
+  percentsFromValue( value ) {
+
+    return ( value - this.min ) / ( this.max - this.min );
+
+  }
+
+  valueFromPosition( position ) {
+
+    return this.min + ( this.max - this.min ) * ( position / this.track.offsetWidth );
+
+  }
+
+  positionFromValue( value ) {
+
+    return this.percentsFromValue( value ) * this.track.offsetWidth;
+
+  }
+
+  setHandlePosition() {
+
+    this.handle.style.left = this.percentsFromValue( this.value ) * 100 + '%';
+
+  }
+
+}
+
+class Preferences {
+
+  constructor( game ) {
+
+    this.game = game;
+
+  }
+
+  init() {
+
+    this.ranges = {
+
+      size: new Range( 'size', {
+        value: this.game.cube.size,
+        range: [ 2, 5 ],
+        step: 1,
+        onUpdate: value => {
+
+          this.game.cube.size = value;
+
+          this.game.preferences.ranges.scramble.list.forEach( ( item, i ) => {
+
+            item.innerHTML = this.game.scrambler.scrambleLength[ this.game.cube.size ][ i ];
+
+          } );
+
+        },
+        onComplete: () => this.game.storage.savePreferences(),
+      } ),
+
+      flip: new Range( 'flip', {
+        value: this.game.controls.flipConfig,
+        range: [ 0, 2 ],
+        step: 1,
+        onUpdate: value => {
+
+          this.game.controls.flipConfig = value;
+
+        },
+        onComplete: () => this.game.storage.savePreferences(),
+      } ),
+
+      scramble: new Range( 'scramble', {
+        value: this.game.scrambler.dificulty,
+        range: [ 0, 2 ],
+        step: 1,
+        onUpdate: value => {
+
+          this.game.scrambler.dificulty = value;
+
+        },
+        onComplete: () => this.game.storage.savePreferences()
+      } ),
+
+      fov: new Range( 'fov', {
+        value: this.game.world.fov,
+        range: [ 2, 45 ],
+        onUpdate: value => {
+
+          this.game.world.fov = value;
+          this.game.world.resize();
+
+        },
+        onComplete: () => this.game.storage.savePreferences()
+      } ),
+
+      theme: new Range( 'theme', {
+        value: { cube: 0, erno: 1, dust: 2, camo: 3, rain: 4 }[ this.game.themes.theme ],
+        range: [ 0, 4 ],
+        step: 1,
+        onUpdate: value => {
+
+          const theme = [ 'cube', 'erno', 'dust', 'camo', 'rain' ][ value ];
+          this.game.themes.setTheme( theme );
+
+        },
+        onComplete: () => this.game.storage.savePreferences()
+      } ),
+
+      hue: new Range( 'hue', {
+        value: 0,
+        range: [ 0, 360 ],
+        onUpdate: value => this.game.themeEditor.updateHSL(),
+        onComplete: () => this.game.storage.savePreferences(),
+      } ),
+
+      saturation: new Range( 'saturation', {
+        value: 100,
+        range: [ 0, 100 ],
+        onUpdate: value => this.game.themeEditor.updateHSL(),
+        onComplete: () => this.game.storage.savePreferences(),
+      } ),
+
+      lightness: new Range( 'lightness', {
+        value: 50,
+        range: [ 0, 100 ],
+        onUpdate: value => this.game.themeEditor.updateHSL(),
+        onComplete: () => this.game.storage.savePreferences(),
+      } ),
+
+    };
+
+    this.ranges.scramble.list.forEach( ( item, i ) => {
+
+      item.innerHTML = this.game.scrambler.scrambleLength[ this.game.cube.size ][ i ];
+
+    } );
+    
+  }
+
+}
+
+class Confetti {
+
+  constructor( game ) {
+
+    this.game = game;
+    this.started = 0;
+
+    this.options = {
+      speed: { min: 0.0011, max: 0.0022 },
+      revolution: { min: 0.01, max: 0.05 },
+      size: { min: 0.1, max: 0.15 },
+      colors: [ 0x41aac8, 0x82ca38, 0xffef48, 0xef3923, 0xff8c0a ],
+    };
+
+    this.geometry = new THREE.PlaneGeometry( 1, 1 );
+    this.material = new THREE.MeshLambertMaterial( { side: THREE.DoubleSide } );
+
+    this.holders = [
+      new ConfettiStage( this.game, this, 1, 20 ),
+      new ConfettiStage( this.game, this, -1, 30 ),
+    ];
+
+  }
+
+  start() {
+
+    if ( this.started > 0 ) return;
+
+    this.holders.forEach( holder => {
+
+      this.game.world.scene.add( holder.holder );
+      holder.start();
+      this.started ++;
+
+    } );
+
+  }
+
+  stop() {
+
+    if ( this.started == 0 ) return;
+
+    this.holders.forEach( holder => {
+
+      holder.stop( () => {
+
+        this.game.world.scene.remove( holder.holder );
+        this.started --;
+
+      } );
+
+    } );
+
+  }
+
+  updateColors( colors ) {
+
+    this.holders.forEach( holder => {
+
+      holder.options.colors.forEach( ( color, index ) => {
+
+        holder.options.colors[ index ] = colors[ [ 'D', 'F', 'R', 'B', 'L' ][ index ] ];
+
+      } );
+
+    } );
+
+  }
+
+}
+
+class ConfettiStage extends Animation {
+
+  constructor( game, parent, distance, count ) {
+
+    super( false );
+
+    this.game = game;
+    this.parent = parent;
+
+    this.distanceFromCube = distance;
+
+    this.count = count;
+    this.particles = [];
+
+    this.holder = new THREE.Object3D();
+    this.holder.rotation.copy( this.game.world.camera.rotation );
+
+    this.object = new THREE.Object3D();
+    this.holder.add( this.object );
+
+    this.resizeViewport = this.resizeViewport.bind( this );
+    this.game.world.onResize.push( this.resizeViewport );
+    this.resizeViewport();    
+
+    this.geometry = this.parent.geometry;
+    this.material = this.parent.material;
+
+    this.options = this.parent.options;
+
+    let i = this.count;
+    while ( i-- ) this.particles.push( new Particle( this ) );
+
+  }
+
+  start() {
+
+    this.time = performance.now();
+    this.playing = true;
+
+    let i = this.count;
+    while ( i-- ) this.particles[ i ].reset();
+
+    super.start();
+
+  }
+
+  stop( callback ) {
+
+    this.playing = false;
+    this.completed = 0;
+    this.callback = callback;
+
+  }
+
+  reset() {
+
+    super.stop();
+
+    this.callback();
+
+  }
+
+  update() {
+
+    const now = performance.now();
+    const delta = now - this.time;
+    this.time = now;
+
+    let i = this.count;
+
+    while ( i-- )
+      if ( ! this.particles[ i ].completed ) this.particles[ i ].update( delta );
+
+    if ( ! this.playing && this.completed == this.count ) this.reset();
+
+  }
+
+  resizeViewport() {
+
+    const fovRad = this.game.world.camera.fov * THREE.Math.DEG2RAD;
+
+    this.height = 2 * Math.tan( fovRad / 2 ) * ( this.game.world.camera.position.length() - this.distanceFromCube );
+    this.width = this.height * this.game.world.camera.aspect;
+
+    const scale = 1 / this.game.transition.data.cameraZoom;
+
+    this.width *= scale;
+    this.height *= scale;
+
+    this.object.position.z = this.distanceFromCube;
+    this.object.position.y = this.height / 2;
+
+  }
+  
+}
+
+class Particle {
+
+  constructor( confetti ) {
+
+    this.confetti = confetti;
+    this.options = this.confetti.options;
+
+    this.velocity = new THREE.Vector3();
+    this.force = new THREE.Vector3();
+
+    this.mesh = new THREE.Mesh( this.confetti.geometry, this.confetti.material.clone() );
+    this.confetti.object.add( this.mesh );
+
+    this.size = THREE.Math.randFloat( this.options.size.min, this.options.size.max );
+    this.mesh.scale.set( this.size, this.size, this.size );
+
+    return this;
+
+  }
+
+  reset( randomHeight = true ) {
+
+    this.completed = false;
+
+    this.color = new THREE.Color( this.options.colors[ Math.floor( Math.random() * this.options.colors.length ) ] );
+    this.mesh.material.color.set( this.color );
+
+    this.speed = THREE.Math.randFloat( this.options.speed.min, this.options.speed.max ) * - 1;
+    this.mesh.position.x = THREE.Math.randFloat( - this.confetti.width / 2, this.confetti.width / 2 );
+    this.mesh.position.y = ( randomHeight )
+      ? THREE.Math.randFloat( this.size, this.confetti.height + this.size )
+      : this.size;
+
+    this.revolutionSpeed = THREE.Math.randFloat( this.options.revolution.min, this.options.revolution.max );
+    this.revolutionAxis = [ 'x', 'y', 'z' ][ Math.floor( Math.random() * 3 ) ];
+    this.mesh.rotation.set( Math.random() * Math.PI / 3, Math.random() * Math.PI / 3, Math.random() * Math.PI / 3 );
+
+  }
+
+  stop() {
+
+    this.completed = true;
+    this.confetti.completed ++;
+
+  }
+
+  update( delta ) {
+
+    this.mesh.position.y += this.speed * delta;
+    this.mesh.rotation[ this.revolutionAxis ] += this.revolutionSpeed;
+
+    if ( this.mesh.position.y < - this.confetti.height - this.size )
+      ( this.confetti.playing ) ? this.reset( false ) : this.stop();
+
+  }
+
+}
+
+class Scores {
+
+  constructor( game ) {
+
+    this.game = game;
+
+    this.data = {
+      2: {
+        scores: [],
+        solves: 0,
+        best: 0,
+        worst: 0,
+      },
+      3: {
+        scores: [],
+        solves: 0,
+        best: 0,
+        worst: 0,
+      },
+      4: {
+        scores: [],
+        solves: 0,
+        best: 0,
+        worst: 0,
+      },
+      5: {
+        scores: [],
+        solves: 0,
+        best: 0,
+        worst: 0,
+      }
+    };
+
+  }
+
+  addScore( time ) {
+
+    const data = this.data[ this.game.cube.sizeGenerated ];
+
+    data.scores.push( time );
+    data.solves++;
+
+    if ( data.scores.lenght > 100 ) data.scores.shift();
+
+    let bestTime = false;    
+
+    if ( time < data.best || data.best === 0 ) {
+
+      data.best = time;
+      bestTime = true;
+
+    }
+
+    if ( time > data.worst ) data.worst = time;
+
+    this.game.storage.saveScores();
+
+    return bestTime;
+
+  }
+
+  calcStats() {
+
+    const s = this.game.cube.sizeGenerated;
+    const data = this.data[ s ];
+
+    this.setStat( 'cube-size', `${s}<i>x</i>${s}<i>x</i>${s}` );
+    this.setStat( 'total-solves', data.solves );
+    this.setStat( 'best-time', this.convertTime( data.best ) );
+    this.setStat( 'worst-time', this.convertTime( data.worst ) );
+    this.setStat( 'average-5', this.getAverage( 5 ) );
+    this.setStat( 'average-12', this.getAverage( 12 ) );
+    this.setStat( 'average-25', this.getAverage( 25 ) );
+
+  }
+
+  setStat( name, value ) {
+
+    if ( value === 0 ) value = '-';
+
+    this.game.dom.stats.querySelector( `.stats[name="${name}"] b` ).innerHTML = value;
+
+  }
+
+  getAverage( count ) {
+
+    const data = this.data[ this.game.cube.sizeGenerated ];
+
+    if ( data.scores.length < count ) return 0;
+
+    return this.convertTime( data.scores.slice( -count ).reduce( ( a, b ) => a + b, 0 ) / count );
+
+  }
+
+  convertTime( time ) {
+
+    if ( time <= 0 ) return 0;
+
+    const seconds = parseInt( ( time / 1000 ) % 60 );
+    const minutes = parseInt( ( time / ( 1000 * 60 ) ) );
+
+    return minutes + ':' + ( seconds < 10 ? '0' : '' ) + seconds;
+
+  }
+
+}
+
+class Storage {
+
+  constructor( game ) {
+
+    this.game = game;
+
+    const userVersion = localStorage.getItem( 'theCube_version' );
+
+    if ( ! userVersion || userVersion !== window.gameVersion ) {
+
+      this.clearGame();
+      this.clearPreferences();
+      this.migrateScores();
+      localStorage.setItem( 'theCube_version', window.gameVersion );
+
+    }
+
+  }
+
+  init() {
+
+    this.loadPreferences();
+    this.loadScores();
+
+  }
+
+  loadGame() {
+
+    try {
+
+      const gameInProgress = localStorage.getItem( 'theCube_playing' ) === 'true';
+
+      if ( ! gameInProgress ) throw new Error();
+
+      const gameCubeData = JSON.parse( localStorage.getItem( 'theCube_savedState' ) );
+      const gameTime = parseInt( localStorage.getItem( 'theCube_time' ) );
+
+      if ( ! gameCubeData || gameTime === null ) throw new Error();
+      if ( gameCubeData.size !== this.game.cube.sizeGenerated ) throw new Error();
+
+      this.game.cube.loadFromData( gameCubeData );
+
+      this.game.timer.deltaTime = gameTime;
+
+      this.game.saved = true;
+
+    } catch( e ) {
+
+      this.game.saved = false;
+
+    }
+
+  }
+
+  saveGame() {
+
+    const gameInProgress = true;
+    const gameCubeData = { names: [], positions: [], rotations: [] };
+    const gameTime = this.game.timer.deltaTime;
+
+    gameCubeData.size = this.game.cube.sizeGenerated;
+
+    this.game.cube.pieces.forEach( piece => {
+
+      gameCubeData.names.push( piece.name );
+      gameCubeData.positions.push( piece.position );
+      gameCubeData.rotations.push( piece.rotation.toVector3() );
+
+    } );
+
+    localStorage.setItem( 'theCube_playing', gameInProgress );
+    localStorage.setItem( 'theCube_savedState', JSON.stringify( gameCubeData ) );
+    localStorage.setItem( 'theCube_time', gameTime );
+
+  }
+
+  clearGame() {
+
+    localStorage.removeItem( 'theCube_playing' );
+    localStorage.removeItem( 'theCube_savedState' );
+    localStorage.removeItem( 'theCube_time' );
+
+  }
+
+  loadScores() {
+
+    try {
+
+      const scoresData = JSON.parse( localStorage.getItem( 'theCube_scores' ) );
+
+      if ( ! scoresData ) throw new Error();
+
+      this.game.scores.data = scoresData;
+
+    } catch( e ) {}
+
+  }
+
+  saveScores() {
+
+    const scoresData = this.game.scores.data;
+
+    localStorage.setItem( 'theCube_scores', JSON.stringify( scoresData ) );
+
+  }
+
+  clearScores() {
+
+    localStorage.removeItem( 'theCube_scores' );
+
+  }
+
+  migrateScores() {
+
+    try {
+
+      const scoresData = JSON.parse( localStorage.getItem( 'theCube_scoresData' ) );
+      const scoresBest = parseInt( localStorage.getItem( 'theCube_scoresBest' ) );
+      const scoresWorst = parseInt( localStorage.getItem( 'theCube_scoresWorst' ) );
+      const scoresSolves = parseInt( localStorage.getItem( 'theCube_scoresSolves' ) );
+
+      if ( ! scoresData || ! scoresBest || ! scoresSolves || ! scoresWorst ) return false;
+
+      this.game.scores.data[ 3 ].scores = scoresData;
+      this.game.scores.data[ 3 ].best = scoresBest;
+      this.game.scores.data[ 3 ].solves = scoresSolves;
+      this.game.scores.data[ 3 ].worst = scoresWorst;
+
+      localStorage.removeItem( 'theCube_scoresData' );
+      localStorage.removeItem( 'theCube_scoresBest' );
+      localStorage.removeItem( 'theCube_scoresWorst' );
+      localStorage.removeItem( 'theCube_scoresSolves' );
+
+    } catch( e ) {}
+
+  }
+
+  loadPreferences() {
+
+    try {
+
+      const preferences = JSON.parse( localStorage.getItem( 'theCube_preferences' ) );
+
+      if ( ! preferences ) throw new Error();
+
+      this.game.cube.size = parseInt( preferences.cubeSize );
+      this.game.controls.flipConfig = parseInt( preferences.flipConfig );
+      this.game.scrambler.dificulty = parseInt( preferences.dificulty );
+
+      this.game.world.fov = parseFloat( preferences.fov );
+      this.game.world.resize();
+
+      this.game.themes.colors = preferences.colors;
+      this.game.themes.setTheme( preferences.theme );
+
+      return true;
+
+    } catch (e) {
+
+      this.game.cube.size = 3;
+      this.game.controls.flipConfig = 0;
+      this.game.scrambler.dificulty = 1;
+
+      this.game.world.fov = 10;
+      this.game.world.resize();
+
+      this.game.themes.setTheme( 'cube' );
+
+      this.savePreferences();
+
+      return false;
+
+    }
+
+  }
+
+  savePreferences() {
+
+    const preferences = {
+      cubeSize: this.game.cube.size,
+      flipConfig: this.game.controls.flipConfig,
+      dificulty: this.game.scrambler.dificulty,
+      fov: this.game.world.fov,
+      theme: this.game.themes.theme,
+      colors: this.game.themes.colors,
+    };
+
+    localStorage.setItem( 'theCube_preferences', JSON.stringify( preferences ) );
+
+  }
+
+  clearPreferences() {
+
+    localStorage.removeItem( 'theCube_preferences' );
+
+  }
+
+}
+
+class Themes {
+
+  constructor( game ) {
+
+    this.game = game;
+    this.theme = null;
+
+    this.defaults = {
+      cube: {
+        U: 0xfff7ff, // white
+        D: 0xffef48, // yellow
+        F: 0xef3923, // red
+        R: 0x41aac8, // blue
+        B: 0xff8c0a, // orange
+        L: 0x82ca38, // green
+        P: 0x08101a, // piece
+        G: 0xd1d5db, // background
+      },
+      erno: {
+        U: 0xffffff,
+        D: 0xffd500,
+        F: 0xc41e3a,
+        R: 0x0051ba,
+        B: 0xff5800,
+        L: 0x009e60,
+        P: 0x08101a,
+        G: 0x8abdff,
+      },
+      dust: {
+        U: 0xfff6eb,
+        D: 0xe7c48d,
+        F: 0x8f253e,
+        R: 0x607e69,
+        B: 0xbe6f62,
+        L: 0x849f5d,
+        P: 0x08101a,
+        G: 0xE7C48D,
+      },
+      camo: {
+        U: 0xfff6eb,
+        D: 0xbfb672,
+        F: 0x37241c,
+        R: 0x718456,
+        B: 0x805831,
+        L: 0x37431d,
+        P: 0x08101a,
+        G: 0xBFB672,
+      },
+      rain: {
+        U: 0xfafaff,
+        D: 0xedb92d,
+        F: 0xce2135,
+        R: 0x449a89,
+        B: 0xec582f,
+        L: 0xa3a947,
+        P: 0x08101a,
+        G: 0x87b9ac,
+      },
+    };
+
+    this.colors = JSON.parse( JSON.stringify( this.defaults ) );
+
+  }
+
+  getColors() {
+
+    return this.colors[ this.theme ];
+
+  }
+
+  setTheme( theme = false, force = false ) {
+
+    if ( theme === this.theme && force === false ) return;
+    if ( theme !== false ) this.theme = theme;
+
+    const colors = this.getColors();
+
+    this.game.dom.prefs.querySelectorAll( '.range__handle div' ).forEach( range => {
+
+      range.style.background = '#' + colors.R.toString(16).padStart(6, '0');
+
+    } );
+
+    this.game.cube.updateColors( colors );
+
+    this.game.confetti.updateColors( colors );
+
+    this.game.dom.back.style.background = '#' + colors.G.toString(16).padStart(6, '0');
+
+  }
+
+}
+
+class ThemeEditor {
+
+  constructor( game ) {
+
+    this.game = game;
+
+    this.editColor = 'R';
+
+    this.getPieceColor = this.getPieceColor.bind( this );
+
+  }
+
+  colorFromHSL( h, s, l ) {
+
+    h = Math.round( h );
+    s = Math.round( s );
+    l = Math.round( l );
+
+    return new THREE.Color( `hsl(${h}, ${s}%, ${l}%)` );
+
+  }
+
+  setHSL( color = null, animate = false ) {
+
+    this.editColor = ( color === null) ? 'R' : color;
+
+    const hsl = new THREE.Color( this.game.themes.getColors()[ this.editColor ] );
+
+    const { h, s, l } = hsl.getHSL( hsl );
+    const { hue, saturation, lightness } = this.game.preferences.ranges;
+
+    if ( animate ) {
+
+      const ho = hue.value / 360;
+      const so = saturation.value / 100;
+      const lo = lightness.value / 100;
+
+      const colorOld = this.colorFromHSL( hue.value, saturation.value, lightness.value );
+
+      if ( this.tweenHSL ) this.tweenHSL.stop();
+
+      this.tweenHSL = new Tween( {
+        duration: 200,
+        easing: Easing.Sine.Out(),
+        onUpdate: tween => {
+
+          hue.setValue( ( ho + ( h - ho ) * tween.value ) * 360 );
+          saturation.setValue( ( so + ( s - so ) * tween.value ) * 100 );
+          lightness.setValue( ( lo + ( l - lo ) * tween.value ) * 100 );
+
+          const colorTween = colorOld.clone().lerp( hsl, tween.value );
+
+          const colorTweenStyle = colorTween.getStyle();
+          const colorTweenHex = colorTween.getHSL( colorTween );
+
+          hue.handle.style.color = colorTweenStyle;
+          saturation.handle.style.color = colorTweenStyle;
+          lightness.handle.style.color = colorTweenStyle;
+
+          saturation.track.style.color =
+            this.colorFromHSL( colorTweenHex.h * 360, 100, 50 ).getStyle();
+          lightness.track.style.color =
+            this.colorFromHSL( colorTweenHex.h * 360, colorTweenHex.s * 100, 50 ).getStyle();
+
+          this.game.dom.theme.style.display = 'none';
+          this.game.dom.theme.offsetHeight;
+          this.game.dom.theme.style.display = '';
+
+        },
+        onComplete: () => {
+
+          this.updateHSL();
+          this.game.storage.savePreferences();
+
+        },
+      } );
+
+    } else {
+
+      hue.setValue( h * 360 );
+      saturation.setValue( s * 100 );
+      lightness.setValue( l * 100 );
+
+      this.updateHSL();
+      this.game.storage.savePreferences();
+
+    }
+
+  }
+
+  updateHSL() {
+
+    const { hue, saturation, lightness } = this.game.preferences.ranges;
+
+    const h = hue.value;
+    const s = saturation.value;
+    const l = lightness.value;
+
+    const color = this.colorFromHSL( h, s, l ).getStyle();
+
+    hue.handle.style.color = color;
+    saturation.handle.style.color = color;
+    lightness.handle.style.color = color;
+
+    saturation.track.style.color = this.colorFromHSL( h, 100, 50 ).getStyle();
+    lightness.track.style.color = this.colorFromHSL( h, s, 50 ).getStyle();
+
+    this.game.dom.theme.style.display = 'none';
+    this.game.dom.theme.offsetHeight;
+    this.game.dom.theme.style.display = '';
+
+    const theme = this.game.themes.theme;
+
+    this.game.themes.colors[ theme ][ this.editColor ] = this.colorFromHSL( h, s, l ).getHex();
+    this.game.themes.setTheme();
+
+  }
+
+  colorPicker( enable ) {
+
+    if ( enable ) {
+
+      this.game.dom.game.addEventListener( 'click', this.getPieceColor, false );
+
+    } else {
+
+      this.game.dom.game.removeEventListener( 'click', this.getPieceColor, false );
+
+    }
+
+  }
+
+  getPieceColor( event ) {
+
+    const clickEvent = event.touches
+      ? ( event.touches[ 0 ] || event.changedTouches[ 0 ] )
+      : event;
+
+    const clickPosition = new THREE.Vector2( clickEvent.pageX, clickEvent.pageY );
+
+    let edgeIntersect = this.game.controls.getIntersect( clickPosition, this.game.cube.edges, true );
+    let pieceIntersect = this.game.controls.getIntersect( clickPosition, this.game.cube.cubes, true );
+
+    if ( edgeIntersect !== false ) {
+
+      const edge = edgeIntersect.object;
+
+      const position = edge.parent
+        .localToWorld( edge.position.clone() )
+        .sub( this.game.cube.object.position )
+        .sub( this.game.cube.animator.position );
+
+      const mainAxis = this.game.controls.getMainAxis( position );
+      if ( position.multiplyScalar( 2 ).round()[ mainAxis ] < 1 ) edgeIntersect = false;
+
+    }
+
+    const name = edgeIntersect ? edgeIntersect.object.name : pieceIntersect ? 'P' : 'G';
+
+    this.setHSL( name, true );
+
+  }
+
+  resetTheme() {
+
+    this.game.themes.colors[ this.game.themes.theme ] =
+      JSON.parse( JSON.stringify( this.game.themes.defaults[ this.game.themes.theme ] ) );
+
+    this.game.themes.setTheme();
+
+    this.setHSL( this.editColor, true );
+
+  }
+
+}
+
+const States = {
+  3: {
+    checkerboard: {
+      names: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26 ],
+      positions: [
+        { "x": 1/3, "y": -1/3, "z": 1/3 },
+        { "x": -1/3, "y": 1/3, "z": 0 },
+        { "x": 1/3, "y": -1/3, "z": -1/3 },
+        { "x": -1/3, "y": 0, "z": -1/3 },
+        { "x": 1/3, "y": 0, "z": 0 },
+        { "x": -1/3, "y": 0, "z": 1/3 },
+        { "x": 1/3, "y": 1/3, "z": 1/3 },
+        { "x": -1/3, "y": -1/3, "z": 0 },
+        { "x": 1/3, "y": 1/3, "z": -1/3 },
+        { "x": 0, "y": 1/3, "z": -1/3 },
+        { "x": 0, "y": -1/3, "z": 0 },
+        { "x": 0, "y": 1/3, "z": 1/3 },
+        { "x": 0, "y": 0, "z": 1/3 },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": 0, "y": 0, "z": -1/3 },
+        { "x": 0, "y": -1/3, "z": -1/3 },
+        { "x": 0, "y": 1/3, "z": 0 },
+        { "x": 0, "y": -1/3, "z": 1/3 },
+        { "x": -1/3, "y": -1/3, "z": 1/3 },
+        { "x": 1/3, "y": 1/3, "z": 0 },
+        { "x": -1/3, "y": -1/3, "z": -1/3 },
+        { "x": 1/3, "y": 0, "z": -1/3 },
+        { "x": -1/3, "y": 0, "z": 0 },
+        { "x": 1/3, "y": 0, "z": 1/3 },
+        { "x": -1/3, "y": 1/3, "z": 1/3 },
+        { "x": 1/3, "y": -1/3, "z": 0 },
+        { "x": -1/3, "y": 1/3, "z": -1/3 }
+      ],
+      rotations: [
+        { "x": -Math.PI, "y": 0, "z": Math.PI, },
+        { "x": Math.PI, "y": 0, "z": 0 },
+        { "x": -Math.PI, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": 0, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": -Math.PI, "y": 0, "z": Math.PI },
+        { "x": Math.PI, "y": 0, "z": 0 },
+        { "x": -Math.PI, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": 0, "y": 0, "z": Math.PI },
+        { "x": -Math.PI, "y": 0, "z": 0 },
+        { "x": Math.PI, "y": 0, "z": Math.PI },
+        { "x": Math.PI, "y": 0, "z": 0 },
+        { "x": 0, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": 0, "y": 0, "z": Math.PI },
+        { "x": Math.PI, "y": 0, "z": Math.PI },
+        { "x": -Math.PI, "y": 0, "z": 0 },
+        { "x": Math.PI, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": 0, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": Math.PI, "y": 0, "z": Math.PI },
+        { "x": -Math.PI, "y": 0, "z": 0 },
+        { "x": Math.PI, "y": 0, "z": Math.PI }
+      ],
+      size: 3,
+    },
+  }
+};
+
+class IconsConverter {
+
+  constructor( options ) {
+
+    options = Object.assign( {
+      tagName: 'icon',
+      className: 'icon',
+      styles: false,
+      icons: {},
+      observe: false,
+      convert: false,
+    }, options || {} );
+
+    this.tagName = options.tagName;
+    this.className = options.className;
+    this.icons = options.icons;
+
+    this.svgTag = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+    this.svgTag.setAttribute( 'class', this.className );
+
+    if ( options.styles ) this.addStyles();
+    if ( options.convert ) this.convertAllIcons();
+
+    if ( options.observe ) {
+
+      const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+      this.observer = new MutationObserver( mutations => { this.convertAllIcons(); } );
+      this.observer.observe( document.documentElement, { childList: true, subtree: true } );
+
+    }
+
+    return this;
+
+  }
+
+  convertAllIcons() {
+
+    document.querySelectorAll( this.tagName ).forEach( icon => { this.convertIcon( icon ); } );
+
+  }
+
+  convertIcon( icon ) {
+
+    const svgData = this.icons[ icon.attributes[0].localName ];
+
+    if ( typeof svgData === 'undefined' ) return;
+
+    const svg = this.svgTag.cloneNode( true );
+    const viewBox = svgData.viewbox.split( ' ' );
+
+    svg.setAttributeNS( null, 'viewBox', svgData.viewbox );
+    svg.style.width = viewBox[2] / viewBox[3] + 'em';
+    svg.style.height = '1em';
+    svg.innerHTML = svgData.content;
+
+    icon.parentNode.replaceChild( svg, icon );
+
+  }
+
+  addStyles() {
+
+    const style = document.createElement( 'style' );
+    style.innerHTML = `.${this.className} { display: inline-block; font-size: inherit; overflow: visible; vertical-align: -0.125em; preserveAspectRatio: none; }`;
+    document.head.appendChild( style );
+
+  }
+
+}
+
+const Icons = new IconsConverter( {
+
+  icons: {
+    settings: {
+      viewbox: '0 0 512 512',
+      content: '<path fill="currentColor" d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z" />',
+    },
+    back: {
+      viewbox: '0 0 512 512',
+      content: '<path transform="translate(512, 0) scale(-1,1)" fill="currentColor" d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z" />',
+    },
+    trophy: {
+      viewbox: '0 0 576 512',
+      content: '<path fill="currentColor" d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 66.5 77.9 131.7 171.9 142.4C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6C498.4 275.6 576 210.3 576 144V88c0-13.3-10.7-24-24-24zM64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-47.5-16.4-77-49.9-77-70.2zm448 0c0 20.2-29.4 53.8-77 70.2 7-25 11.8-53.6 12.8-86.2H512v16zm-127.3 4.7l-39.6 38.6 9.4 54.6c1.7 9.8-8.7 17.2-17.4 12.6l-49-25.8-49 25.8c-8.8 4.6-19.1-2.9-17.4-12.6l9.4-54.6-39.6-38.6c-7.1-6.9-3.2-19 6.7-20.5l54.8-8 24.5-49.6c4.4-8.9 17.1-8.9 21.5 0l24.5 49.6 54.8 8c9.6 1.5 13.5 13.6 6.4 20.5z" />',
+    },
+    cancel: {
+      viewbox: '0 0 352 512',
+      content: '<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" />',
+    },
+    theme: {
+      viewbox: '0 0 512 512',
+      content: '<path fill="currentColor" d="M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"/>',
+    },
+    reset: {
+      viewbox: '0 0 512 512',
+      content: '<path fill="currentColor" d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z" />',
+    },
+    trash: {
+      viewbox: '0 0 448 512',
+      content: '<path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z" />',
+    },
+  },
+
+  convert: true,
+
+} );
+
+const STATE = {
+  Menu: 0,
+  Playing: 1,
+  Complete: 2,
+  Stats: 3,
+  Prefs: 4,
+  Theme: 5,
+};
+
+const BUTTONS = {
+  Menu: [ 'stats', 'prefs' ],
+  Playing: [ 'back' ],
+  Complete: [],
+  Stats: [],
+  Prefs: [ 'back', 'theme' ],
+  Theme: [ 'back', 'reset' ],
+  None: [],
+};
+
+const SHOW = true;
+const HIDE = false;
+
+class Game {
+
+  constructor() {
+
+    this.dom = {
+      ui: document.querySelector( '.ui' ),
+      game: document.querySelector( '.ui__game' ),
+      back: document.querySelector( '.ui__background' ),
+      prefs: document.querySelector( '.ui__prefs' ),
+      theme: document.querySelector( '.ui__theme' ),
+      stats: document.querySelector( '.ui__stats' ),
+      texts: {
+        title: document.querySelector( '.text--title' ),
+        note: document.querySelector( '.text--note' ),
+        timer: document.querySelector( '.text--timer' ),
+        complete: document.querySelector( '.text--complete' ),
+        best: document.querySelector( '.text--best-time' ),
+        theme: document.querySelector( '.text--theme' ),
+      },
+      buttons: {
+        prefs: document.querySelector( '.btn--prefs' ),
+        back: document.querySelector( '.btn--back' ),
+        stats: document.querySelector( '.btn--stats' ),
+        reset: document.querySelector( '.btn--reset' ),
+        theme: document.querySelector( '.btn--theme' ),
+      },
+    };
+
+    this.world = new World( this );
+    this.cube = new Cube( this );
+    this.controls = new Controls( this );
+    this.scrambler = new Scrambler( this );
+    this.transition = new Transition( this );
+    this.timer = new Timer( this );
+    this.preferences = new Preferences( this );
+    this.scores = new Scores( this );
+    this.storage = new Storage( this );
+    this.confetti = new Confetti( this );
+    this.themes = new Themes( this );
+    this.themeEditor = new ThemeEditor( this );
+
+    this.initActions();
+
+    this.state = STATE.Menu;
+    this.newGame = false;
+    this.saved = false;
+
+    this.storage.init();
+    this.preferences.init();
+    this.cube.init();
+    this.transition.init();
+
+    this.storage.loadGame();
+    this.scores.calcStats();
+
+    setTimeout( () => {
+
+      this.transition.float();
+      this.transition.cube( SHOW );
+
+      setTimeout( () => this.transition.title( SHOW ), 700 );
+      setTimeout( () => this.transition.buttons( BUTTONS.Menu, BUTTONS.None ), 1000 );
+
+    }, 500 );
+
+  }
+
+  initActions() {
+
+    let tappedTwice = false;
+
+    this.dom.game.addEventListener( 'click', event => {
+
+      if ( this.transition.activeTransitions > 0 ) return;
+      if ( this.state === STATE.Playing ) return;
+
+      if ( this.state === STATE.Menu ) {
+
+        if ( ! tappedTwice ) {
+
+          tappedTwice = true;
+          setTimeout( () => tappedTwice = false, 300 );
+          return false;
+
+        }
+
+        this.game( SHOW );
+
+      } else if ( this.state === STATE.Complete ) {
+
+        this.complete( HIDE );
+
+      } else if ( this.state === STATE.Stats ) {
+
+        this.stats( HIDE );
+
+      } 
+
+    }, false );
+
+    this.controls.onMove = () => {
+
+      if ( this.newGame ) {
+        
+        this.timer.start( true );
+        this.newGame = false;
+
+      }
+
+    };
+
+    this.dom.buttons.back.onclick = event => {
+
+      if ( this.transition.activeTransitions > 0 ) return;
+
+      if ( this.state === STATE.Playing ) {
+
+        this.game( HIDE );
+
+      } else if ( this.state === STATE.Prefs ) {
+
+        this.prefs( HIDE );
+
+      } else if ( this.state === STATE.Theme ) {
+
+        this.theme( HIDE );
+
+      }
+
+    };
+
+    this.dom.buttons.reset.onclick = event => {
+
+      if ( this.state === STATE.Theme ) {
+
+        this.themeEditor.resetTheme();
+
+      }
+      
+    };
+
+    this.dom.buttons.prefs.onclick = event => this.prefs( SHOW );
+
+    this.dom.buttons.theme.onclick = event => this.theme( SHOW );
+
+    this.dom.buttons.stats.onclick = event => this.stats( SHOW );
+
+    this.controls.onSolved = () => this.complete( SHOW );
+
+  }
+
+  game( show ) {
+
+    if ( show ) {
+
+      if ( ! this.saved ) {
+
+        this.scrambler.scramble();
+        this.controls.scrambleCube();
+        this.newGame = true;
+
+      }
+
+      const duration = this.saved ? 0 :
+        this.scrambler.converted.length * ( this.controls.flipSpeeds[0] + 10 );
+
+      this.state = STATE.Playing;
+      this.saved = true;
+
+      this.transition.buttons( BUTTONS.None, BUTTONS.Menu );
+
+      this.transition.zoom( STATE.Playing, duration );
+      this.transition.title( HIDE );
+
+      setTimeout( () => {
+
+        this.transition.timer( SHOW );
+        this.transition.buttons( BUTTONS.Playing, BUTTONS.None );
+
+      }, this.transition.durations.zoom - 1000 );
+
+      setTimeout( () => {
+
+        this.controls.enable();
+        if ( ! this.newGame ) this.timer.start( true );
+
+      }, this.transition.durations.zoom );
+
+    } else {
+
+      this.state = STATE.Menu;
+
+      this.transition.buttons( BUTTONS.Menu, BUTTONS.Playing );
+
+      this.transition.zoom( STATE.Menu, 0 );
+
+      this.controls.disable();
+      if ( ! this.newGame ) this.timer.stop();
+      this.transition.timer( HIDE );
+
+      setTimeout( () => this.transition.title( SHOW ), this.transition.durations.zoom - 1000 );
+
+      this.playing = false;
+      this.controls.disable();
+
+    }
+
+  }
+
+  prefs( show ) {
+
+    if ( show ) {
+
+      if ( this.transition.activeTransitions > 0 ) return;
+
+      this.state = STATE.Prefs;
+
+      this.transition.buttons( BUTTONS.Prefs, BUTTONS.Menu );
+
+      this.transition.title( HIDE );
+      this.transition.cube( HIDE );
+
+      setTimeout( () => this.transition.preferences( SHOW ), 1000 );
+
+    } else {
+
+      this.cube.resize();
+
+      this.state = STATE.Menu;
+
+      this.transition.buttons( BUTTONS.Menu, BUTTONS.Prefs );
+
+      this.transition.preferences( HIDE );
+
+      setTimeout( () => this.transition.cube( SHOW ), 500 );
+      setTimeout( () => this.transition.title( SHOW ), 1200 );
+
+    }
+
+  }
+
+  theme( show ) {
+
+    this.themeEditor.colorPicker( show );
+    
+    if ( show ) {
+
+      if ( this.transition.activeTransitions > 0 ) return;
+
+      this.cube.loadFromData( States[ '3' ][ 'checkerboard' ] );
+
+      this.themeEditor.setHSL( null, false );
+
+      this.state = STATE.Theme;
+
+      this.transition.buttons( BUTTONS.Theme, BUTTONS.Prefs );
+
+      this.transition.preferences( HIDE );
+
+      setTimeout( () => this.transition.cube( SHOW, true ), 500 );
+      setTimeout( () => this.transition.theming( SHOW ), 1000 );
+
+    } else {
+
+      this.state = STATE.Prefs;
+
+      this.transition.buttons( BUTTONS.Prefs, BUTTONS.Theme );
+
+      this.transition.cube( HIDE, true );
+      this.transition.theming( HIDE );
+
+      setTimeout( () => this.transition.preferences( SHOW ), 1000 );
+      setTimeout( () => {
+
+        const gameCubeData = JSON.parse( localStorage.getItem( 'theCube_savedState' ) );
+
+        if ( !gameCubeData ) {
+
+          this.cube.resize( true );
+          return;
+
+        }
+
+        this.cube.loadFromData( gameCubeData );
+
+      }, 1500 );
+
+    }
+
+  }
+
+  stats( show ) {
+
+    if ( show ) {
+
+      if ( this.transition.activeTransitions > 0 ) return;
+
+      this.state = STATE.Stats;
+
+      this.transition.buttons( BUTTONS.Stats, BUTTONS.Menu );
+
+      this.transition.title( HIDE );
+      this.transition.cube( HIDE );
+
+      setTimeout( () => this.transition.stats( SHOW ), 1000 );
+
+    } else {
+
+      this.state = STATE.Menu;
+
+      this.transition.buttons( BUTTONS.Menu, BUTTONS.None );
+
+      this.transition.stats( HIDE );
+
+      setTimeout( () => this.transition.cube( SHOW ), 500 );
+      setTimeout( () => this.transition.title( SHOW ), 1200 );
+
+    }
+
+  }
+
+  complete( show ) {
+
+    if ( show ) {
+
+      this.transition.buttons( BUTTONS.Complete, BUTTONS.Playing );
+
+      this.state = STATE.Complete;
+      this.saved = false;
+
+      this.controls.disable();
+      this.timer.stop();
+      this.storage.clearGame();
+
+      this.bestTime = this.scores.addScore( this.timer.deltaTime );
+
+      this.transition.zoom( STATE.Menu, 0 );
+      this.transition.elevate( SHOW );
+
+      setTimeout( () => {
+
+        this.transition.complete( SHOW, this.bestTime );
+        this.confetti.start();
+
+      }, 1000 );
+
+    } else {
+
+      this.state = STATE.Stats;
+      this.saved = false;
+
+      this.transition.timer( HIDE );
+      this.transition.complete( HIDE, this.bestTime );
+      this.transition.cube( HIDE );
+      this.timer.reset();
+
+      setTimeout( () => {
+
+        this.cube.reset();
+        this.confetti.stop();
+
+        this.transition.stats( SHOW );
+        this.transition.elevate( 0 );
+
+      }, 1000 );
+
+      return false;
+
+    }
+
+  }
+
+}
+
+window.version = '0.99.2';
+window.game = new Game();
\ No newline at end of file
diff --git a/the-cube/dist/style.css b/the-cube/dist/style.css
new file mode 100644
index 0000000..efb69aa
--- /dev/null
+++ b/the-cube/dist/style.css
@@ -0,0 +1,345 @@
+@font-face {
+  font-family: "BungeeFont";
+  font-weight: normal;
+  font-style: normal;
+  src: url("data:font/truetype;charset=utf-8;base64,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") format("woff2"), url("data:font/truetype;charset=utf-8;base64,d09GRgABAAAAADCIABIAAAAAbvQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAwbAAAABwAAAAcgMaRMEdERUYAACp8AAAAHAAAAB4AJwBoR1BPUwAAKygAAAVDAAAkYl+xQ2BHU1VCAAAqmAAAAI4AAADuG+w0B09TLzIAAAIMAAAATAAAAGCWIuetY21hcAAAA3gAAADPAAABmq1lz21jdnQgAAAGvAAAAFAAAABQHj4lfmZwZ20AAARIAAABsQAAAmVTtC+nZ2FzcAAAKnQAAAAIAAAACAAAABBnbHlmAAAHwAAAHtIAADeIYFYc6GhlYWQAAAGUAAAANQAAADYSj5dVaGhlYQAAAcwAAAAgAAAAJBWYAf1obXR4AAACWAAAAR4AAAGIw8giGmxvY2EAAAcMAAAAsgAAAMYcxw9WbWF4cAAAAewAAAAgAAAAIAF/Ah5uYW1lAAAmlAAAAvEAAAZjloOeOHBvc3QAACmIAAAA7AAAAY9ePAmCcHJlcAAABfwAAAC9AAABMcb0/DZ42mNgZGBgAGJzsc274vltvjLIczCAwKVr+xJB9A2mXjEGhv+6HM3sW4BcDgYmkCgAI/EKQwAAAHjaY2BkYOAV+tHJwMApxMDw/z9HMwNQBAUkAQBo9wSpAAEAAABiAFIABQAAAAAAAgABAAIAFgAAAQAByAAAAAB42mNgZtnEOIGBlYGF1ZjlLAMDwywIzQTCaQxIQIGBgR1IMcL4KVlFCgwODAqqf9ge/nvIwMArxF6uwMA4GSTH+IXpAlgLMwB4xA5BeNotkKFLQ2EUxX++9+7nNL5kMFhFTCYxrAguiMgQ02OMsWCZ8lCZYBpiEBnzf5iCimFpmAwGgwyxTZMY1gZi0er5nu+Dw7nc79zDPTcYs4pecAsTAwjrXNsCFQclW2KnUGTbzbEevLMf7lITEnvg0D7ohDFpmFD2HDwxba80oxdqNkvZZqjbHS1bJLVzmhaxYT2qqqvZnGB9Lr2P+N6KJO6LYxuyZwPa5jTzK16hHX2Lb2i6WPWQhrXYyv46tN2z4FSPpD/I2eu1uzyXpTvxnu5K3iOhq/3XqPgsfucsT59Nv0eEsnSZV/809Dr1spv4jG8w2VOdc3Che42F0j/4EZ+JG7k+h/eYivNb+cxH8hUKn6Re7z3sEf4AOzpYcgAAeNpjYGBgZoBgGQZGBhCYAuQxgvksDBVAWopBACjCxZDAUMewgGGtApeCiIKkgqyCmoK+Qrzqn///gWoUGKrBcgwKAgoSCjIIuf+P/5/8v+L/nAdeD1wfOD1weGDxwOAB461UqF04ACMbA1wBIxOQYEJXAHQyCysbOwcnFzcPLx+/gKCQsIiomLiEpJS0jKycvIKikrKKqpq6hqaWto6unr6BoZGxiamZuYWllbWNrZ29g6OTM27rXVzd3BmoBuI8wFREZExsVDTx2gAWWiwuAHjaXVG7TltBEN0NDwOBxNggOdoUs5mQxnuhBQnE1Y1iZDuF5QhpN3KRi3EBH0CBRA3arxmgoaRImwYhF0h8Qj4hEjNriKI0Ozuzc86ZM0vKkap36WvPU+ckkMLdBs02/U5ItbMA96Tr642MtIMHWmxm9Mp1+/4LBpvRlDtqAOU9bykPGU07gVq0p/7R/AqG+/wf8zsYtDTT9NQ6CekhBOabcUuD7xnNussP+oLV4WIwMKSYpuIuP6ZS/rc052rLsLWR0byDMxH5yTRAU2ttBJr+1CHV83EUS5DLprE2mJiy/iQTwYXJdFVTtcz42sFdsrPoYIMqzYEH2MNWeQweDg8mFNK3JMosDRH2YqvECBGTHAo55dzJ/qRA+UgSxrxJSjvjhrUGxpHXwKA2T7P/PJtNbW8dwvhZHMF3vxlLOvjIhtoYEWI7YimACURCRlX5hhrPvSwG5FL7z0CUgOXxj3+dCLTu2EQ8l7V1DjFWCHp+29zyy4q7VrnOi0J3b6pqqNIpzftezr7HA54eC8NBY8Gbz/v+SoH6PCyuNGgOBEN6N3r/orXqiKu8Fz6yJ9O/sVoAAAB42kXOOw6CQBCAYRZkeYo81pIEbbeztrAQLIiJsYLEA3gCGwttrIwexQxWxnN4HnHUce3m+5OZzI21B2AnrQR7UTWMneum4LIaQFiXIJY47OsUuFxVGhhZDoacgpPlV+Opyw9shHMkWAh7RuAIa0QwETwldBBmQnDf1x4ED+FuCT7CGxK6CN//gkFAr8RYg4suG6PYICNkvFYMkdFEsYcMx4pJlt+1YNdqqoh3SRj/lz6uiPmPNQj5AnNnVq8AAAAAAAXDBcMBhwE7AVwBbwF1AX8BgwGMAZEBrAIaAdEBvAHAAcUBywHRAdUB3wFnAV8BQgFOAXgBUAFZAb4AxwGUAYUArwArAC0BtAHIAEQFEXjaY2Bg0IHCNoZXTFZM15jXsSixRLHMYLnGasU6g/UWGxObGVsI2wq2b+w+7Os4mDiCOE5wKnAu4OLgCuHaxPWMW4U7gvsITxHPI94g3jm8D/gs+Dr4XvG78M/ifycQJbBIUEgwS3CfEJ9QidALYTvhNuFrIi4ih0STRK+JSYmFiZWIbRB7IS4gniN+QfyHRIwkFxCq4YBOknGSVZKLJE9J8Uj5Se2T1pOeB4ZHALNAMRwAAHja1Xt7dBTnlWd91Q+1RKu6+q1Wd6tVXeouNUWr6S615EbowcM2xrJMNJhhOIpgcSZLfEwU4vWwDMeHJQxhGYcwWZzYYWzW4yUMh2GYqlYno0McB8chxPEyHI4XdGaJBzMej6eJJyZewmAHFXvvV/0Uwh7vf6tzqO9R3V333u8+fvfWhWGZ5QzDfsHyCGNiGpgujTCpxfkGc/xfM5rV8svFeRMLU0Yz4bYFt/MNVunW4jzBfcUpOGOCU1jOtusd5Dl9k+WRj/9qufksAz/JHIXLK5bXGAcTYR5g8mGGkTWPvQi/yMj0QtT2lMpfVJmMFvAW1QY6TNoCvE3WHJ6i6khpNk9RE4gMz/c4Xeq83MK0O96jCBlfg4kjohCNSyZnN93wOj1W3DjGChLZI7WzITYm6T+RomxQlMg2KRqV9D2SaNkmiaJ0q4jrmX8hdlzp1+HKUJrH2dfM50s0r2MolapbKdibmQazrAYzdKe0pOQ7Lmo2rqja+MmHbA2crDHACJPSGry4p0WIrLVwxcmHIjzc83sNZu5kgsxab2AjWTKqRFgeJvrfZyMs+1h5y4lb/xu2LBPZSCQ7czQbaeth11bnyMcKhrFMAR8PMg+TnzN5OGJZzSl0zLuRqbBCx8ID5uXuZnnSsmD4oQ6/oj1gLU5mBwZXdPgzBa6B3rLKIw/jLQ5uOVoCUbhF1FUp7XNEVntaTw4+cuM045WbOPV+XnWe0pb4PlL9p04Obvy3KG6r/bwaPKX1wq5wygKfmbTc73TDr9KrA68nBz//bwx8dt4kj0uLuoSfbFnid8vw3clAfxA/MXbjt/QTrbi0qL38ZLRXgB+Q6XUBvWbxWv2xHlxa8DcG8Ev4q4P4q9UfG8IlpWkFPhg/MVx+7kP4ncmR8jcfxv080Nf+p+1/Klo5pyuXh6/jACThAI+DgRmy8/5Woad/6H5nsHdJV80fGQpZrA7e3xJoFaLygmxP/8Dg0P0rhh8aeXj2R2f/qUOtBLUm293TR3rFaLyf0NkA6SMZn4Mo1VnGFyYeq0waqjOOyCQaHyRidRaNw3fEFVFpV3gNWsDTQXNEmpYkc/C90szSOowmsjO8Gu/vDZfuh98rzSyhETCt3vfC75HxS5J4Roz/Uoq+ip991bhGJdg4I0pw8xe48QvjKpLhMwxhNt1eYb5i3c4MMnuYfD96BnNjMd9vbpInh/rvaZTzIVBOrcNUzIc6cC/kbwR7G0qpfRdVd0brdhTRGLv78F73wka8CvCtvm7c6GMaZdWR0ZaA9XX3OV3ft8yzxTrlDn+O0cz94EeUnNrh1JqTuZwacmkudw78Sm+W+pGebHdcinURlHBpC+RYEibYptXr8fktbQSXDV7D5fQTuGwSJVYKtrYG9bP7/+ZHR8Q4SYBYqHsRg+FwkKT3q1MvwWpaiurvSeLKD+BeiyiwsueZ49Mv/oB7Aj/7ZVECZxQNBmNswnPgr6efn+KfwHOYoP7Jwqy5fb3hpuUs4wT/lGKWMA8zp5n8IFr3AqVwr5nhzHLejHYdMuYiGnwHgY3h7kFzMwx0X/W2X3QWHHSOxqwyFwsuBzMP7rh4rYXIhSZj1cRrC2G11Fgt5bUVsFpEV2UHMCBc+57hANp5sHEt4f9I7TzFTLYLnQmq95UZqrHW4nK6NIc5l9NWLIXZYHcuh6qNXjzTxoIX51hQz5jHp8BZOLvjIoi8kRj63UAMDY594qfXHPjl5m+MRiKj+x6/9AxJBJJyS4ucDJBRssIWA91tt+lTxoRdc+DS5n30o5svHSCJlqQcCMjJFtNqsnvzHnFoLKtvz44NiXuOcz4fRxrsPp/9d6olFYO/j8/D5Sfk65u/Lg7C5/44OzaIn/P7OWK1+/12PC/CDMOhXQM/vIzJMvklqOeyrZiXl6Caygpo7DzUc4+tSNTlKe1ejHQe2enKm/sW51Ar0eR7DW00NNFQQhh9KBDDwo01VV5n9XMyKann8IGJ5dmT54hKlfFCOhRKR3B6OB0Op4mYFCA+7sON1I/yM2dePkM2Hd5/eF74qyMb90yK0vtSNBaQAx2i9CYq7FCgI5EgQSkqxv9Bin7+8E9PUz6fYF9jH6NxM8PUBngeVQujIf6btDUwGNo5I7RzRc05ZzR8km3rgVDXVo1+taGOPm/j7TGTy/pFsAKBoXEYnuLkinkng5J1NoIDaMmUgm0vCEVQqsICrakRXnt84zQRJtDIhtKimB6i5qZfntZNp08Wo9JNSUxnb13IZqJomVfh2WPwbHvts20XtQA82xbAZ9t4eDZTfrafumxDN1FzDcfdTtGKAJo7JkqDaTGaGaTGT4Tpaf3ylyVx3XUpmu4xydm0CAREiydv9U1dFeHZT5KQZQ3IeQEzn6G6Qy9ETSIVBYeD4cEwu8DvOWxgXHyUGpcLXP4A8VtM8R5qRaZYjy9CfNYGi99ndRBrXJoHhpUiXWSQxJ728Su5RJKIKVtb9wdK0JYggWTcOcz7Ff3MFdEsv5rsCDz37YCUPCWbxcv6z03rROUdxen7E5JRBEHR/+5P/M7udxTRprwvJdq+EZ4nE0G/LDeFvhHplN5XDLvYz+y0rLIsZURmlFGFlOpTNLOtqHKZvEBjgBAC2zALODU3ouvvSKmRi6olo7WA62/O5FsieK/FDR+LtOA0Ak5fixn6RP22k0oeJF2xGyc9/3jWCUq2H5R+BMxBipIRahd5wIeSqOclkd1clESylu4eFSVY6EdxQdaKlPYttxX2JVZhQkwXozanCh4zYwPn2JrSzHaw4zD1po1exmGWS4PWVlHEMlStKkOmpx8D8paoRA5J4pG9h/BZ+4Lht6XoSZKiVOx4/ruiNCqJbcFI1JDfKMuZmkwFsDc/0oBPNp7Op8pGNQsXj0J8iqHZzkBEZtcSF/3lX1PkCzwBaESeHBBV8s00HjcXK5OSHc9iynkHU/icEh/w2xul6Ery3+n0PxgAmzBNt1ewpyHuOxjG7x4gtWbP3QBkAUFTMuMEwqQ0YX0Rv/3RBjBJwLRbb1+xrLNcYbygNYsYMHUgLtBUzFvRhbbPK1IlAT/gA//i47UQWIHdVUSd0EI+sAantRxqBtia6NHF1oePrb1PX3/55d8+nc0+ff1HL19/upec69u0aXHflzb1kV3syfGDE/39E99dP3Pf+MHHBwYeP3g00dubYCWpt1cyzmYjw5h3gI22QWaVD1ERNhUBteQ5JLShCQiNpFTLRc3tLebdFlRedwvoscWNUwuDaMbSBNrcbgiYuhBnCfUZoq7ikfhGUXr3ZRQTCwryU5rcbAV0AV6DPY7OAzdcYhwnqDdAWwFoSzKdTF5G2qKAu7xIGNcIhHWltBQGIS4KArOGKTBCefXGBgggIwPtVGNMg4UDJFQNTPHR1Jqt9xK34GuJ6MtQ29jPnzh5/IBejPjY+yktGSCObNj63Udznt+3tQsRnyhdk8S/+d6rB/9Hcq3NK8ii9IFB6xeA1teA1h4mzeS7yxixA2kNm4oFT3N3RzPETiuQ3ZvS7qGxsxnQ3YIaNAfEVog2TG0OJgw0h9tfADGyGBb1w0jsNJ3uotLtO3Yku+xbW14/PbPNAG+xQG8gSvFtrCWC8RHCw6E9W0eeCPH/bc/ZQz+gdrUT4n8EeBCYISbfimCMXhCiqU6FjkSNUrVtBLVt5LUwoKrmDCqxJiJL5lZgyZ6rM2gIX7Osjvq0neCj+oHY0I9h0kcN7zQ4ryNnTrDH2HO4njknxNitOPv4PHVp9iOGzoL9my8AnQlGZvJSWdaekqyJOj+lyUhN2Ox0Tdqb2yIApu+Uci38EAVvvVdgnYG2SItuxueankDd0D0kcOTU9NTMfwJPARL1t6wKgDqwOn4EpLn78F/o7zw/JZZsX6ZyTDGPlmoJsYYiFaDWjNqwIGxGbbAAsQupPKMgTz6Tj1JEEEVEEOW1TiMh19IwdoKO55s9oOQ5tcUJMgb9WQDCdpaEnSC1gAucVTsua10G5RtdBiAIMk1LDDuHs+mdo8RzVtn9z+rL1/Yo5Fx67Vg6PbY2TXawL568KkofSmLqwSTHn/zB6fHnHl+8+PHndgiyLGyLzJ8fwbMYgbM4CLxG0X94UF08ZZ3R2tF7iCnVf1HjwXvwfmSOt4H38PM49WMU7MCTaseCiSNXjob0KDjWQSoKA1Y9SLIwhTBompJEaWTb6LOgMgVjemQGNMa8kzqQmY83/Nd1fYGkfpAqzVeN1RTNSUzMBjibVeCXRbDTQchI8hE8HckK8QNJXmwtFrJdkWY4nay5SJO4+Re1VmcxP78VSZ6PJGOq1joffI7LB05ay3bB1GeuR8CG165a7Fwn4a5bbXhqbHl3dvv57x4895+7e5aNPbV4//WpqRv7F5PT905MLFs2MXGvIq9ZK0lr18jkvp/tf94NqHfr8B+tTiZXb30QTdn1wv6frdq1XlHW73pBmC+3b47IcoRM43mtwynWWjaAjXuAf9TN+5g8j9z7TaW4tAC4j8R4K3AfKelm8KLamdHsgBiDdhRAEEAMKiSjxSJwZiGD6UqMsiZIxV8BZxAs2+P1TG9Qvv4u1bWL+mU9QY9oB6jh1z6nv/93oH5jazMZUEHTjtPjz27u69v87PjMBtTD34AeDic55w+vICfbkCdaA6NYwNJEa2BKFQ0AsAH/WiyhbTCtEg4AoF1GBMKciCBAPgEh3A0tsHo9dEC6EHcBXSFAv313Ii/0UQLSl6T0hSv0xTKFuEFf16fDsLsQWwfLammeC6Kx35xFO2EOM1vMumUEMAFDFRoQOD4B42epoIBLLDwc3r3DRKuSMwUPx3nYYRo1r+/YzX7nwHM7O962CZL+oSRZD5l5t8tpfsEqSfpvIKe9HNsJMtrPXLOsMr9Jz67VQIY24+Rs9OTK9cdsXT4Zd85aAzo2J/HBv8Okr2ZOcldxehWEwH6ziNNihccpZovFZfCIIi5BBuQJ40KlaGKxxqfAyQ97HA7PTIFGA/uO3bt33AKPP0UcUrzhBQgywNohYI1wkmB7O/ZfngPeY5dt7agHY+Af36H4qou5n8kvQP0U7aVYEEIHmaLJgjOjdYKP7KSZQif4SCxlaJ1gY3lf0JNDPxMSweC4XL1AkEIJcqUazDMbTEPaxn77zJXj35q5IIlW2QoW92ykJRSceUMSD8NiK40Fe0sO9Icnpo8/4xk2h5GdhDlnDkfCIfF31+qqzyyz/fZ91ietT4EPfYDZy6h9qULG0G9XqrCMlmoKbcbGfalCwKjjSKmCle4RdSWF6EkHrVQnec1L5MKQUbcZ4rXlsGozVm08akHBTj+pPQgyWT4EMpEyVoyEbU4sjwkurae3ApdJh5IxUxUFn1sT571OCpu7wBFz6Kra2Bol6ugitErhRBe1fdkxIv/zu0Q+tlT8wvf360+dO3jwHDkbbF2VSm+/dPTopafS6acuHSW7pQhg/+3v6v/r2DL2W+HE3idzAukzrdhycvfKlbtPbpl5f/zg5v4ju8nTe460BmeyX/ocKyz9ykgyOfKVpbeOLv3yiNwmLZLaHtj1QzIO2cTpVNDwHRPgozdR/CADBqYRSvUodMzb2NKl0BqN2MBRtzaADi2gICLIF9UgrYhheUFLInwIQmyKiqg+NkAQqmRg5J7eUj7jdxvGXIJlpRkRTF1Yu7I2TEidk3YFMwbFPpmIg578IhHXvw2K8CYkoxfIkg02t12xu20r2VD/XzxGzouCIOqpx14cmPkn6tvb9H9EB3mS9LqcTpcRg/cBf1uBPx/Tzsxn1hu4QfNbinkLWsV8S7EgtHsswJyAMVimzPldRVXI5P0UIfnBQFQ/rwWBRd5Z1BbAGPQDf7GcyhvoSGgvQdFe55zomVSgoLMUnWSyDyxl3+uvLu7fteO1N25BuknOkiYJ/vQbJ3A4sdICDvTgixvXbG61P/+dl48fBh+TSKxKAIJNJGBm+JatYPPHgT8akYw3SaYy+msqfloFaDaaQwhd1dT2+NabhCH/hxrjHw4O9A+RP6fz5tvMTfIS+9SFczSRUhS9RUmJEnzwLOoUynwnrXkFmIVM3o5U8Y0liQcQNbdSqngEorzmAYECxkcBV4KQUQjCAE+UcpEIJZYnzM2bt5mZEZDX+evpVCp9ncrp7IWZnRfOimRDWiEfKilDNkCHeRroENEbCkhFS2NZNo3FAucXEBlz1kqC3OIySihUUi0oqVDGqKWUCii9d+D42bNoHMg0/YDGqTfIfiquLWyWxqqVkB9ZaFSExO4FmiGppaSuQm+e+u97jfzYuFSgvJ8LIcF+k5EoI8HcLIJL1LZ/IrXOKqHfooTeIH9I044/B2JfqxAJ7vdCVLoBidJmI+8EXbP0A30dzGoG0gfUNcyFovhwT6BRrlG72Fxq56S+V2uDs47D6AUjVZupY7Xn7qKMs/I5QyNZhkaRNYMDqdQZwBwD9J3ldkMpd4AalJTSp6TJEK3s7KGaWZKxZTfViQcMnVB9Ch2N1JMzUs9CY4jqRqO9ohthfJmZUcO81gqJaFNGc3PFWVrhdQp3Zp9VYWMKStaUUlEqaP1YncD1ZeRHNSnoz/RFhtw3g15sqtNjs6kIRlypm6i+DCXTAhrhKeZbLOUSIOhv3kKrgFg3wepr7C6lE6PmW1s/2RyV3ngDJWv6El7PnMHrrWcBjYKds2qphAKXmVXU9I061urbVwDPYTxZXvJH9nnFvD2MNNgtjcZLVnqppPcOmt47MIJ4aG6vORpBM8K5mmIdreNXy/iVCtVqEStj0e7xteB/yBJJzO6+Wsj/y26F7CIUIH6MRSgTLVrcaioVpsp68BTQOZ95hMl3oh60KnSs04NyQOgwDr+Dx4Kl5ueMKNDWAWQ25VS/U3O6MeyZOyECNkZzuVqdUCrlvNrwR4NBnWqMvsll4mSx2MKdf2KvUaEQ2vXf1GtIgrwVi4iCLlq/s33mx1RN9gsxXa71IRYF+AowixkIYCD/RrDRRpoON3IlGy3x1lpbXmkChtyOei88l0qXFTkAYydFv7+ukHeryRD6zPZaeqzoM9LMMJNPoZxDCh0NOXvKcs5QWmRnUZV5dF/44kBTYGyXQaY2FxVvCqZ2oVa8iCkwRSljjKqAS+90U6SG7pWC7Jpqctjddq7pb12yQOirXP2nUnSbqxuSFMW1DWR8rsRPWNDzCCTIiBAuGyV7/m2xLRJ9eyZVqg+jvLfRmgT47Hbkz6vQ0eCvucyfSPkLAX8hXguAB2nMaC5AE7QkYW5HvQmWGcPqvH92Iauf1HByQeoNYjwkCtWKs+BKXjJGSnkgoi8ihaoruUWOzowhwUa9aOIz1oq5/5da8b6Pf/zKzX333LPv5iuv/G5fLznfPzHRP/Dlif5/T63YwBBJkKsHouEgk3ehROmFgog2W7HQ7HUhbGu2VqIhBzR7MypHBYx+pS4Olt8tlXFnHRJ7gvj/51n96vuGtZGzU33x2OIpKsx/yOsf59/SjyO0/NWA9Lg0wFA5rqByDIEHGWEM8Unz4Pkprb25AiQxaEDEEEtSRKcRZsBpBHKq6FStOdUOEqW63e5F4bbmcrNlW32X3kXuIuPYukPbDIfx6+/VyPk77F9W5PwHI7v/40p+C6r7FnH6TOKeexJsypC2IeuDNL4ksYZIo6K7FBWpuJPWYiHUIaC4Q1ZaDC8z15EBJ4++JYwoGVj1I0oGVlPoJ8PAamcFJXeE5kbJczrF+uM59u4JZXACveJPIJ7L+hWDXXLuYDYWyx6k5/TjZ9ev2QZQeadO31uRXFLWJ2BmSvQm7kv0Ym8FxNErdTV+rOW6aXZsqqnxhyDN1po77tL8UPu6uabnQZzd6vCPP2MH6rsc3qmUyKv9DSd+OKux4cRJ6ldycCZW6sfrtJ8iLD9EfHuG+m8vaD2k8pwXz4ADkJX3cjj1Yu0wOEdJo7YsnhMlc46S+GaUljch0SpXNuFyy01rEP9K6dkFfuNJGtcX18R1s9EGVl+u91Tjuetu8ZwmGnPE811GFB94bHM/zHol8Z59N1555cY3e8ku0w3qytbRgH6kPqCTSh6rMP3G2RoXSmCoTGC3QaCXEoipqwCAI0s9MEQZlZ/1MqE2uNRRWu2x6zJNAAC9T0rYbBusTt7PO60bbDYgfakUtfIB1+ucIs38SlK4110B3moaY8NGZuCZ79OveByclwj+Ti9L3fjMO+nl/cuT+jwpHJbIb5OwMGLodoihWOPPYQxV0DqjCh0N9nxl9hbVxnMXpqkQYPpgdIH8tfhCGkMVDDXzc3Wsuo0uEn9tNaeGRyM9r1lvN16jbOWz0hop6/wjWKYlsSn4xSZJ0D8QsrZxq9vusrtBFl0AYYRU0xeDTexGk5+yyRFWDIdFXWc/pKf47tKvDOtXI3K4nYygSPR8pC0hkNbhLQbvFuyf+BwzzuQfRt57FDrSGroaU+hI1FFa24Sg+iDkcM6M+iCvLYIoK2Q0BTYSGe33QA4Pou+15DRlEYxdII3mh0EagaVlSx8kUp2N+yLE0ABsE6i1fQfxV60e3RT2CKCUHISr7G8XkkeOpCKGrMzcuiY/H+C99jHOIsbJPVK0HW+3geX9XIqaHevsXj7Me5rHODMY5OvgJy6Njw9dvjy4ftyosHq6PF/jXS7+a56kl3alHIL7V96C+5doAxned/G8C+//ooK/xkB+Kyj+gig1H+U2/067yNQqDrULZ3EyLrTYwPWDsSRTWtxL0Rjoz/w5DKVWTNlaHaq+VAH5jJUlsb7J5/Tw/qb1yCpqjpDUXzdesOhnUhHTNbKXeiUVWHoGWXoGWCKr6N7W8fWD+jr9FnXxVnJ4cNzgEwZzkfqnNibfhv7JZyq9Z7FiQhpN0beGpYoUEWpfGiOhNQn8eKCVfKivpM7vBICpoB4jV2nyY8NXtC6pL8yOldIf/VxicWjmVDkBqvbfBBiZKSHsghu8sVmGBAIL7zhzZWg1yc3QBBi7YZx3y8I2QkgJ48OfeYZmue9I4jorraKih7bR3huxvn+g1DXkd/voL0icWcIkKWK+ARN9GibWdKV9QKrp2wlAXCzRDAluieyCiw5Vgi25SvtO/bv3SgX4wAEKlcM09X7HaNox3aQNO1Hpo70V3VxFxiyy5WWsiwdJ2QUB0bTM3EUa4tTpSLFofO1bsZ3Pffu5HdJbtghW+RPmF82c28PBkMB1hBwz2Xfs2UNr5SwLD1/lcbKs0zOj0nWpt+Z20rKKefMTekP8s0B3Xbl/b11rCPYMWFnT8QbsNfljRrWnan8L+/9uLji1nXb62rs4lTulWVs+sqjmUydv9p/ahm22qpmftJitbsg2+clmzu4GtGW21vTRwh52zk5amq0cbRj8vtliL83rel/LGAQhyijAVDR/caZHEq1HT4sd5rXmiPRTMYYjpTsB570CzruHSTHYIqAqF1Vzhia5nky+Q0EA0dEMeE7OYPeA1qHQt2+lh83uGjP8IX1dg36gvgOvHUy/iySWLJ0mwjqUnpwWpexyzm7nlmclMY2Jq7ROvzy9dAl7csXKUQ9xVnrLrvUvstlZu4Ozs8223MCvyp1mU6TJ8wjysRt0finVeT9T7qhD1I//5j7P3bRcINJmU7Gui4Yp2cH2WrnYLqr+jLYQ5CJl8raFtIstYtRRUC4LbdQX1nSzoTFQJ2hEBAPA1ja3lV71VJvc5pQHEUAeS5dM65fXGdaTyf4KhNHM2jkOLrZF/dcqDXD6B57RlStW/p5Xv4GdcFTPWY9llekCE2P+CXvItIbGohpov+hUWxWNs2HFkKjxlCYZanpDO3WCqmlrl9rQpbbyWnPDR5zawGttDR/BMGlraHbLk4302kSv8+jVjle1jZ8MtrXCMkSvYbzm4StVPVYbc1glmQfZTi4P93ErlFODOWaosbFpXijcZrMHa7rB7cZmg83e3Bq8o9tbEwIg9Y6c1sCVWxJQKQdYX4RtA9H39hh5BcfGU2wX6GWDNb4/GRl57NGvrM0MbtiyenQw25MOjjz+6FfXpEZHJ9auzik97Lq/z3Y1BVtYvtlq4+Y1+NyckHwjm4Qtk9NunWe32bwurq2uv4z5DI1k//98bz/Lge58lv65Oh95R/8c/J5t12f9vYYNNAV5ca5+PPY19iWI8yF8s0BLtc2Vd93Oapehz2jI89V2GbpLpZWq41JqXmcf2fuC8SI7dLn8CttkJzufP0jfXkdaAcfp59FTzEGD1movVl+7f1Kno/uzdjqaV1bfo0fLlOC7XvY1S5jSkGOWGVSoglIWRiKDYbxHQZGoXZlSalASB9Z1wkQuKAZhfZ8unNgn3Ryro1eMg+RE9s/+veKU5hLxXfmjgu7JgKzVhFLuckhX+Cv1NRjNYuXehr5PF3zsk24ibD0kResYYv9s1lHB5txHJc11fIwJe0lsW2hfKf5/hZFSN0logaJgS4nm6chkarpMF85ijwf2AsYqQMulhYTBbHrORpPYp6zrGk/Y94Boyqv+KHD6nli9J9Y2okh3mRtYC/9TBvYomrBHkcGUg14IW7oQ1Ux5MnnxZXtp0CyU/LRTcOKXP+6H7/xffa44cwAAeNqllM1uEzEQx2fT9CPqx4GeQEj4gCoQrZNWVFWTXlpVQa0i9SNVL5ycrJPdZrMb2U7yALwA4sKJA0/BBY7cOPAsSHDmb6/bNKjqgWa19s/jmfHMeDZE9DS4pIDy3yq98BzQHB17LtA8Cc8z9Jg+eS5C57vnWdoJ9jzP0UrwwfM8vQx+e16g1cIbzyXwO8+L9KjwzfMS+I/nZXpffOV5hZ4Uf+H0oFjCas1FYjmAxZ7nArTOPM/QFsWei9D54nmWUvrheQ65G8/zdB589rxAa4Vnnkvgt54X6Xnho+cl8E/PywGbKXleodfFr3RJkhQZRNBG5RJibjROmoItaaJLqUzcFgkTiZEqFUZCeEBD6HShIbEYpl2J+RyLLjYSGCssZXeYCMAmcaq4p0YhXWGPgW672PjXdpNXKpVaeKVYLfe+cePtzqPzXDRyybDJpo48peaNpEYRNAwytnqjGzmnHdxFjfo4vgdfVqcDaQKPLexw2nbvrvNpa6LjLGV5mKdNC7UoM+0sHVnmO1u1vujJzHR4Ere2+Dbf3q1U6P6k78uUIRDtroghNIU5hLTvDHuQZQiX0QXSs7p1l54BWR8KMoGZXx/BYs0EM0qEsi9Uj2UddhFJVs9Sww6GSoohVA9hM8KpIbwcO3+2JSKMtsDnkGjbHodiFIfsOENjRCJl55nWD7ONoGloQFUq4xm7h/u+4e7i+lAyZlAtl8fjMUeT8HbWf4ChrVpe3Undmq6iBi6Eq991/RP3uUhoaYw2P3tHoWs/5nKUzvqIGphPEI50OU88N6Y8rENyV/Pal92KbPrcSTeM8MaugVoY7c4YaxtH3it12sffDXP1r2KeLpKGTwX9AWQaJ2rniyMOhb4rI/464qWLCA3juqOZdcxYKNdBSdyWqZYhG6ahVMygg5pHDXYykGmu3MgV1tnkc9nkzDnztq4RRyJORCuRbBybCH1Z3z9jwlSZvyrdVvHAaK7jhGeqWz6pN+j/0rjH4V9fXDYhAAAAeNp9zEdOw2AUReHzUuzE6ZXee//txCm0YIKyDCAISCIhhEAZsCZm1O0h5DfmTj7pDg4R/t8NSESiRIkRx8ImQRKHFGkyZMmRp0CREmUqVJlgkimmmWGWOeZZYJEllllhlTXW2WCTLbbZYZc99jnA4OJRo45PgyYt2hxyxDEnnNLhjIBzulxyxTV9iUlcLLElIUlxJCVpyUhWcpKXghSlxDsffPPDJ1+8SVkqUrUGD69PQzfEs8ePI2MCo1786RljVFf11JpaV321oTbVltpWg1BXu67r3I8G4+e72/7LMLy8Xqgf6ve6v1wlP+4AAQAB//8AD3jaY2BkYGDgAWIxIGZiYATCRCBmAfMYAAfJAJB42n2NvQrCQBCEv7tICotDNEgQi7yBjS8gylWKIHkANZZHAuL7x8nlgp0s+zczO4sB5nju2JM/17jw+LRsmAmn7zGKBfZ4qCvK2/VSaZvwoVvJDDZ0TcB171dLERFiFUOui1ybFbNPk+dJFhXyZq1/o3oXL8fpxxeUyXPKTHWpdOnP4GlYsf3PfQGAahI0AAB42s1aO2wbRxAdkZatMJIo0bQlW7Kpnx1KkBM4TpEigRPEMFzkAxgqglguUgQIYMMAgyAIECCdazepWAYug0NK9qxZb83+ilRXcvN2bsnbO96X3jV8izvud3Z2dv4SLRFRg76gH6j24OHXZ7T+/MdfX9AuXUA/SUk1/CzRBtW++vJsjzYef/cNvsZI7dlPv7yg9d+e4dvmniX+EsYvqnVca9NpWGv+vvEAoy1a4VmraqYUvKqD0W9Vf7Pb/JRO6EOM+FJg1MkjA1UcwR6j+NJ3AtsH3r4jvH1dAkd4O8M82sUJTdxR/J7sxyjv2+RwV1SeDFKpJPg7lD2uDdV3EdhJvJUO0GUoz2ewRXV62aZwDHY/yYNupMgBzKE7qTTpHdXt7FftLqtwI+R9OKVNmfuQffmy7I1NgogKU36c6pjZrowrbEgQtVVL3VSch7NtmKnH4xp9fkWZe9GYBmVvr8rthDQJYc/TRL7ktqaJeZ+qVUQTDU1Ed5qvJ02Pw+TdPDsP2CKDM8bzuCRprmcGcVzkI+P29F3OfofSy6BJENlwQ94Svg7z0riCPNjXmg3+titLscY61yuMYFfyHmVHeikykSEtk2ASFMn8vKTb1/zzkKcU0hwipta5WL71Sn8mNRbsZfH6kvqkiv527GW68raKrM27eooiPRmTzPY7FKe5hO078zZrKC2UJh2i1NGqc/uI2zfpPkpHxeboO8TvvxzNr9IBdRFVf0YP6Qzx/nP6E+2/6G/M2OEY/CpoUac11LfAiR28NdQC1Hz0b+F7HW+H56raBV4R9o/pgHtaWLWj1+zjXcYcf7ZWzbmP9XVqY17YKxj2gGu7DHsVeF8Gn1yhq7RN1+g67dAu7eNUtcs/q7Ns/tf6hz6hU/a8hBOf2DfusG8RrgcLNkrwiGUOtIlvJm8PXfC38qNxn30unmmNy3v5tm2J4W26i5I8+Rg79GxbNPkacEf5cBfPbbjis6x7t0f/MNKy4ZNpL8smZok8mRER2M9tCaaDsJNlfdveyyL0gKSN0rzlLE+aCzRRkY4GVBHFYYl7U1HiOH6TrE9ew+pR6Jkv7p2lx6tVtKF9uHLAenyYBzcjZhFykGGLE1mqGDXHKfcm1F1Xo2+GjIjq1ob5IRtfP641NJ8NplopB5seLOMosZMfSXNijDOlk9FkVOTHyHvyXP4RZSHU7Cks2UA5jnnNnspATF5NXjGVz+3FE/Nnz49Zi7gxGcUbNB9n5EKHRj4lMHNn4DKRKseeomw+n837eXF+SBspb52AwSNg10uVNy/iqmScxhzjFd1dGSxMbtfyPXbzl7uCHMYoO8+Xxo9VaL2gDxZk5LGq64dZLqdwzxHHRf2cPG6SGyMdMs6L7kN7mE2fOUsRyc4oL+uU5u9oiCIlR1uYr2Y96SUk259FGb2MNT3Wez1T98e5OMy7vonNSIcdxlOF/C2KOdSWN/cm8VVV+5rid4kCe+WX0xRxblVcqPRk+XgobR+TX5nP+ul8VpEGIkOf+TYydkYmOnCTxXQSHS9RnZ7QOmp3Z3139cgdOqYTvGtoLdMmNbl/ld4P/3eFnzv6N8wn7XJGaQvtbTrgvJJ6dukG3pvUoT30HtIR3aLb1OU8W9XnhP9v5SN+Q9xvoHeTx9Zon2uH2H2dLgGnS9iP6AO8Xeyqnts4zy0NS51aYahOs6L7Vjh/ujzbb0W/W9jtPWrg7BeB9RX0XKuMe5hR3OC3BjrWURRllzXsGk7QAjZt0LAB+Dto75H6b6AjnHqTTnHmbfqYPgc1VQayS9/TUzr+H7peH0IAAAAAAQAAAADV7UW4AAAAANLWvmEAAAAA2AKNFg==") format("woff");
+}
+*, *:before, *:after {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  cursor: inherit;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  text-transform: uppercase;
+}
+*:focus {
+  outline: none;
+}
+
+html {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  overflow: hidden;
+  height: 100%;
+}
+
+body {
+  font-family: "BungeeFont", sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  cursor: default;
+  overflow: hidden;
+  height: 100%;
+  font-size: 5rem;
+}
+
+.icon {
+  display: inline-block;
+  font-size: inherit;
+  overflow: visible;
+  vertical-align: -0.125em;
+  preserveAspectRatio: none;
+}
+
+.range {
+  position: relative;
+  width: 14em;
+  z-index: 1;
+  opacity: 0;
+}
+.range:not(:last-child) {
+  margin-bottom: 2em;
+}
+.range__label {
+  position: relative;
+  font-size: 0.9em;
+  line-height: 0.75em;
+  padding-bottom: 0.5em;
+  z-index: 2;
+}
+.range__track {
+  position: relative;
+  height: 1em;
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+  z-index: 3;
+}
+.range__track-line {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.2);
+  height: 2px;
+  top: 50%;
+  margin-top: -1px;
+  left: -0.5em;
+  right: -0.5em;
+  transform-origin: left center;
+}
+.range__handle {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 50%;
+  left: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.range__handle div {
+  transition: background 500ms ease;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0.9em;
+  height: 0.9em;
+  border-radius: 0.2em;
+  margin-left: -0.45em;
+  margin-top: -0.45em;
+  background: #41aac8;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
+}
+.range.is-active .range__handle div {
+  transform: scale(1.25);
+}
+.range__handle:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 3em;
+  height: 3em;
+  margin-left: -1.5em;
+  margin-top: -1.5em;
+}
+.range__list {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  position: relative;
+  padding-top: 0.5em;
+  font-size: 0.55em;
+  color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+.range--type-color:not(:last-child) {
+  margin-bottom: 1em;
+}
+.range--type-color .range__list {
+  display: none;
+}
+.range--type-color .range__handle > div {
+  background: currentColor !important;
+}
+.range--type-color .range__track-line {
+  background: transparent;
+}
+.range--type-color .range__track-line:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  opacity: 0.5;
+}
+.range--color-hue .range__handle {
+  color: red;
+}
+.range--color-hue .range__track {
+  color: red;
+}
+.range--color-hue .range__track-line:after {
+  background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);
+}
+.range--color-saturation .range__handle {
+  color: red;
+}
+.range--color-saturation .range__track {
+  color: red;
+}
+.range--color-saturation .range__track-line:after {
+  background: linear-gradient(to right, gray, currentColor);
+}
+.range--color-lightness .range__handle {
+  color: red;
+}
+.range--color-lightness .range__track {
+  color: red;
+}
+.range--color-lightness .range__track-line:after {
+  background: linear-gradient(to right, black, currentColor, white);
+}
+
+.stats {
+  position: relative;
+  width: 14em;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  opacity: 0;
+}
+.stats:not(:last-child) {
+  margin-bottom: 1.5em;
+}
+.stats > i {
+  display: block;
+  color: rgba(0, 0, 0, 0.5);
+  font-size: 0.9em;
+}
+.stats > b {
+  display: block;
+  font-size: 0.9em;
+}
+.stats > b > i {
+  font-size: 0.75em;
+}
+.stats[name="worst-time"] {
+  display: none;
+}
+
+.text {
+  position: absolute;
+  left: 0;
+  right: 0;
+  text-align: center;
+  line-height: 0.75;
+  perspective: 100rem;
+  opacity: 0;
+}
+.text i {
+  display: inline-block;
+  opacity: 0;
+  white-space: pre-wrap;
+}
+.text--title {
+  bottom: 75%;
+  font-size: 4.4em;
+  height: 1.2em;
+}
+.text--title span {
+  display: block;
+}
+.text--title span:first-child {
+  font-size: 0.5em;
+  margin-bottom: 0.2em;
+}
+.text--note {
+  top: 87%;
+  font-size: 1em;
+}
+.text--timer {
+  bottom: 78%;
+  font-size: 3.5em;
+  line-height: 1;
+}
+.text--complete, .text--best-time {
+  font-size: 1.5em;
+  top: 83%;
+  line-height: 1em;
+}
+
+.btn {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  border-radius: 0;
+  border-width: 0;
+  position: absolute;
+  pointer-events: none;
+  font-size: 1.2em;
+  color: rgba(0, 0, 0, 0.25);
+  opacity: 0;
+}
+.btn:after {
+  position: absolute;
+  content: "";
+  width: 3em;
+  height: 3em;
+  left: 50%;
+  top: 50%;
+  margin-left: -1.5em;
+  margin-top: -1.5em;
+  border-radius: 100%;
+}
+.btn--bl {
+  bottom: 0.8em;
+  left: 0.8em;
+}
+.btn--br {
+  bottom: 0.8em;
+  right: 0.8em;
+}
+.btn--bc {
+  bottom: 0.8em;
+  left: calc(50% - 0.5em);
+}
+.btn svg {
+  display: block;
+}
+.btn--cancel {
+  display: none !important;
+}
+
+.ui {
+  pointer-events: none;
+  color: #070d15;
+}
+.ui, .ui__background, .ui__game, .ui__texts, .ui__prefs, .ui__theme, .ui__stats, .ui__buttons {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.ui__background {
+  z-index: 1;
+  transition: background 500ms ease;
+  background: #d1d5db;
+}
+.ui__background:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
+}
+.ui__game {
+  pointer-events: all;
+  z-index: 2;
+}
+.ui__game canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.ui__texts {
+  z-index: 3;
+}
+.ui__prefs, .ui__stats, .ui__theme {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  z-index: 4;
+}
+.ui__theme {
+  padding-top: 15em;
+}
+.ui__buttons {
+  z-index: 5;
+}
diff --git a/the-cube/license.txt b/the-cube/license.txt
new file mode 100644
index 0000000..fe6935b
--- /dev/null
+++ b/the-cube/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Boris Šehovac (https://codepen.io/bsehovac/pen/EMyWVv)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/the-cube/src/index.html b/the-cube/src/index.html
new file mode 100644
index 0000000..ec9e1c2
--- /dev/null
+++ b/the-cube/src/index.html
@@ -0,0 +1,85 @@
+<!-- PWA: https://bsehovac.github.io/the-cube/ -->
+
+<div class="ui">
+
+  <div class="ui__background"></div>
+
+  <div class="ui__game"></div>
+
+  <div class="ui__texts">
+    <h1 class="text text--title">
+      <span>THE</span>
+      <span>CUBE</span>
+    </h1>
+    <div class="text text--note">
+      Double tap to start
+    </div>
+    <div class="text text--timer">
+      0:00
+    </div>
+    <div class="text text--complete">
+      <span>Complete!</span>
+    </div>
+    <div class="text text--best-time">
+      <icon trophy></icon>
+      <span>Best Time!</span>
+    </div>
+  </div>
+
+  <div class="ui__prefs">
+    <range name="size" title="Cube Size" list="2,3,4,5"></range>
+    <range name="flip" title="Flip Type" list="Swift&nbsp;,Smooth,Bounce"></range>
+    <range name="scramble" title="Scramble Length" list="20,25,30"></range>
+    <range name="fov" title="Camera Angle" list="Ortographic,Perspective"></range>
+    <range name="theme" title="Color Scheme" list="Cube,Erno,Dust,Camo,Rain"></range>
+  </div>
+
+  <div class="ui__theme">
+    <range name="hue" title="Hue" color></range>
+    <range name="saturation" title="Saturation" color></range>
+    <range name="lightness" title="Lightness" color></range>
+  </div>
+
+  <div class="ui__stats">
+    <div class="stats" name="cube-size">
+      <i>Cube:</i><b>3x3x3</b>
+    </div>
+    <div class="stats" name="total-solves">
+      <i>Total solves:</i><b>-</b>
+    </div>
+    <div class="stats" name="best-time">
+      <i>Best time:</i><b>-</b>
+    </div>
+    <div class="stats" name="worst-time">
+      <i>Worst time:</i><b>-</b>
+    </div>
+    <div class="stats" name="average-5">
+      <i>Average of 5:</i><b>-</b>
+    </div>
+    <div class="stats" name="average-12">
+      <i>Average of 12:</i><b>-</b>
+    </div>
+    <div class="stats" name="average-25">
+      <i>Average of 25:</i><b>-</b>
+    </div>
+  </div>
+
+  <div class="ui__buttons">
+    <button class="btn btn--bl btn--stats">
+      <icon trophy></icon>
+    </button>
+    <button class="btn btn--br btn--prefs">
+      <icon settings></icon>
+    </button>
+    <button class="btn btn--bl btn--back">
+      <icon back></icon>
+    </button>
+    <button class="btn btn--br btn--theme">
+      <icon theme></icon>
+    </button>
+    <button class="btn btn--br btn--reset">
+      <icon reset></icon>
+    </button>
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/the-cube/src/script.js b/the-cube/src/script.js
new file mode 100644
index 0000000..9e3e7ba
--- /dev/null
+++ b/the-cube/src/script.js
@@ -0,0 +1,4083 @@
+// Three.js - https://github.com/mrdoob/three.js/
+// RoundedBoxGeometry - https://github.com/pailhead/three-rounded-box
+
+const animationEngine = ( () => {
+
+  let uniqueID = 0;
+
+  class AnimationEngine {
+
+    constructor() {
+
+      this.ids = [];
+      this.animations = {};
+      this.update = this.update.bind( this );
+      this.raf = 0;
+      this.time = 0;
+
+    }
+
+    update() {
+
+      const now = performance.now();
+      const delta = now - this.time;
+      this.time = now;
+
+      let i = this.ids.length;
+
+      this.raf = i ? requestAnimationFrame( this.update ) : 0;
+
+      while ( i-- )
+        this.animations[ this.ids[ i ] ] && this.animations[ this.ids[ i ] ].update( delta );
+
+    }
+
+    add( animation ) {
+
+      animation.id = uniqueID ++;
+
+      this.ids.push( animation.id );
+      this.animations[ animation.id ] = animation;
+
+      if ( this.raf !== 0 ) return;
+
+      this.time = performance.now();
+      this.raf = requestAnimationFrame( this.update );
+
+    }
+
+    remove( animation ) {
+
+      const index = this.ids.indexOf( animation.id );
+
+      if ( index < 0 ) return;
+
+      this.ids.splice( index, 1 );
+      delete this.animations[ animation.id ];
+      animation = null;
+
+    }
+
+  }
+
+  return new AnimationEngine();
+
+} )();
+
+class Animation {
+
+  constructor( start ) {
+
+    if ( start === true ) this.start();
+
+  }
+
+  start() {
+
+    animationEngine.add( this );
+
+  }
+
+  stop() {
+
+    animationEngine.remove( this );
+
+  }
+
+  update( delta ) {}
+
+}
+
+class World extends Animation {
+
+  constructor( game ) {
+
+    super( true );
+
+    this.game = game;
+
+    this.container = this.game.dom.game;
+    this.scene = new THREE.Scene();
+
+    this.renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
+    this.renderer.setPixelRatio( window.devicePixelRatio );
+    this.container.appendChild( this.renderer.domElement );
+
+    this.camera = new THREE.PerspectiveCamera( 2, 1, 0.1, 10000 );
+
+    this.stage = { width: 2, height: 3 };
+    this.fov = 10;
+
+    this.createLights();
+
+    this.onResize = [];
+
+    this.resize();
+    window.addEventListener( 'resize', () => this.resize(), false );
+
+  }
+
+  update() {
+
+    this.renderer.render( this.scene, this.camera );
+
+  }
+
+  resize() {
+
+    this.width = this.container.offsetWidth;
+    this.height = this.container.offsetHeight;
+
+    this.renderer.setSize( this.width, this.height );
+
+    this.camera.fov = this.fov;
+    this.camera.aspect = this.width / this.height;
+
+    const aspect = this.stage.width / this.stage.height;
+    const fovRad = this.fov * THREE.Math.DEG2RAD;
+
+    let distance = ( aspect < this.camera.aspect )
+      ? ( this.stage.height / 2 ) / Math.tan( fovRad / 2 )
+      : ( this.stage.width / this.camera.aspect ) / ( 2 * Math.tan( fovRad / 2 ) );
+
+    distance *= 0.5;
+
+    this.camera.position.set( distance, distance, distance);
+    this.camera.lookAt( this.scene.position );
+    this.camera.updateProjectionMatrix();
+
+    const docFontSize = ( aspect < this.camera.aspect )
+      ? ( this.height / 100 ) * aspect
+      : this.width / 100;
+
+    document.documentElement.style.fontSize = docFontSize + 'px';
+
+    if ( this.onResize ) this.onResize.forEach( cb => cb() );
+
+  }
+
+  createLights() {
+
+    this.lights = {
+      holder:  new THREE.Object3D,
+      ambient: new THREE.AmbientLight( 0xffffff, 0.69 ),
+      front:   new THREE.DirectionalLight( 0xffffff, 0.36 ),
+      back:    new THREE.DirectionalLight( 0xffffff, 0.19 ),
+    };
+
+    this.lights.front.position.set( 1.5, 5, 3 );
+    this.lights.back.position.set( -1.5, -5, -3 );
+
+    this.lights.holder.add( this.lights.ambient );
+    this.lights.holder.add( this.lights.front );
+    this.lights.holder.add( this.lights.back );
+
+    this.scene.add( this.lights.holder );
+
+  }
+
+}
+
+function RoundedBoxGeometry( size, radius, radiusSegments ) {
+
+  THREE.BufferGeometry.call( this );
+
+  this.type = 'RoundedBoxGeometry';
+
+  radiusSegments = ! isNaN( radiusSegments ) ? Math.max( 1, Math.floor( radiusSegments ) ) : 1;
+
+  var width, height, depth;
+
+  width = height = depth = size;
+  radius = size * radius;
+
+  radius = Math.min( radius, Math.min( width, Math.min( height, Math.min( depth ) ) ) / 2 );
+
+  var edgeHalfWidth = width / 2 - radius;
+  var edgeHalfHeight = height / 2 - radius;
+  var edgeHalfDepth = depth / 2 - radius;
+
+  this.parameters = {
+    width: width,
+    height: height,
+    depth: depth,
+    radius: radius,
+    radiusSegments: radiusSegments
+  };
+
+  var rs1 = radiusSegments + 1;
+  var totalVertexCount = ( rs1 * radiusSegments + 1 ) << 3;
+
+  var positions = new THREE.BufferAttribute( new Float32Array( totalVertexCount * 3 ), 3 );
+  var normals = new THREE.BufferAttribute( new Float32Array( totalVertexCount * 3 ), 3 );
+
+  var
+    cornerVerts = [],
+    cornerNormals = [],
+    normal = new THREE.Vector3(),
+    vertex = new THREE.Vector3(),
+    vertexPool = [],
+    normalPool = [],
+    indices = []
+  ;
+
+  var
+    lastVertex = rs1 * radiusSegments,
+    cornerVertNumber = rs1 * radiusSegments + 1
+  ;
+
+  doVertices();
+  doFaces();
+  doCorners();
+  doHeightEdges();
+  doWidthEdges();
+  doDepthEdges();
+
+  function doVertices() {
+
+    var cornerLayout = [
+      new THREE.Vector3( 1, 1, 1 ),
+      new THREE.Vector3( 1, 1, - 1 ),
+      new THREE.Vector3( - 1, 1, - 1 ),
+      new THREE.Vector3( - 1, 1, 1 ),
+      new THREE.Vector3( 1, - 1, 1 ),
+      new THREE.Vector3( 1, - 1, - 1 ),
+      new THREE.Vector3( - 1, - 1, - 1 ),
+      new THREE.Vector3( - 1, - 1, 1 )
+    ];
+
+    for ( var j = 0; j < 8; j ++ ) {
+
+      cornerVerts.push( [] );
+      cornerNormals.push( [] );
+
+    }
+
+    var PIhalf = Math.PI / 2;
+    var cornerOffset = new THREE.Vector3( edgeHalfWidth, edgeHalfHeight, edgeHalfDepth );
+
+    for ( var y = 0; y <= radiusSegments; y ++ ) {
+
+      var v = y / radiusSegments;
+      var va = v * PIhalf;
+      var cosVa = Math.cos( va );
+      var sinVa = Math.sin( va );
+
+      if ( y == radiusSegments ) {
+
+        vertex.set( 0, 1, 0 );
+        var vert = vertex.clone().multiplyScalar( radius ).add( cornerOffset );
+        cornerVerts[ 0 ].push( vert );
+        vertexPool.push( vert );
+        var norm = vertex.clone();
+        cornerNormals[ 0 ].push( norm );
+        normalPool.push( norm );
+        continue;
+
+      }
+
+      for ( var x = 0; x <= radiusSegments; x ++ ) {
+
+        var u = x / radiusSegments;
+        var ha = u * PIhalf;
+        vertex.x = cosVa * Math.cos( ha );
+        vertex.y = sinVa;
+        vertex.z = cosVa * Math.sin( ha );
+
+        var vert = vertex.clone().multiplyScalar( radius ).add( cornerOffset );
+        cornerVerts[ 0 ].push( vert );
+        vertexPool.push( vert );
+
+        var norm = vertex.clone().normalize();
+        cornerNormals[ 0 ].push( norm );
+        normalPool.push( norm );
+
+      }
+
+    }
+
+    for ( var i = 1; i < 8; i ++ ) {
+
+      for ( var j = 0; j < cornerVerts[ 0 ].length; j ++ ) {
+
+        var vert = cornerVerts[ 0 ][ j ].clone().multiply( cornerLayout[ i ] );
+        cornerVerts[ i ].push( vert );
+        vertexPool.push( vert );
+
+        var norm = cornerNormals[ 0 ][ j ].clone().multiply( cornerLayout[ i ] );
+        cornerNormals[ i ].push( norm );
+        normalPool.push( norm );
+
+      }
+
+    }
+
+  }
+
+  function doCorners() {
+
+    var flips = [
+      true,
+      false,
+      true,
+      false,
+      false,
+      true,
+      false,
+      true
+    ];
+
+    var lastRowOffset = rs1 * ( radiusSegments - 1 );
+
+    for ( var i = 0; i < 8; i ++ ) {
+
+      var cornerOffset = cornerVertNumber * i;
+
+      for ( var v = 0; v < radiusSegments - 1; v ++ ) {
+
+        var r1 = v * rs1;
+        var r2 = ( v + 1 ) * rs1;
+
+        for ( var u = 0; u < radiusSegments; u ++ ) {
+
+          var u1 = u + 1;
+          var a = cornerOffset + r1 + u;
+          var b = cornerOffset + r1 + u1;
+          var c = cornerOffset + r2 + u;
+          var d = cornerOffset + r2 + u1;
+
+          if ( ! flips[ i ] ) {
+
+            indices.push( a );
+            indices.push( b );
+            indices.push( c );
+
+            indices.push( b );
+            indices.push( d );
+            indices.push( c );
+
+          } else {
+
+            indices.push( a );
+            indices.push( c );
+            indices.push( b );
+
+            indices.push( b );
+            indices.push( c );
+            indices.push( d );
+
+          }
+
+        }
+
+      }
+
+      for ( var u = 0; u < radiusSegments; u ++ ) {
+
+        var a = cornerOffset + lastRowOffset + u;
+        var b = cornerOffset + lastRowOffset + u + 1;
+        var c = cornerOffset + lastVertex;
+
+        if ( ! flips[ i ] ) {
+
+          indices.push( a );
+          indices.push( b );
+          indices.push( c );
+
+        } else {
+
+          indices.push( a );
+          indices.push( c );
+          indices.push( b );
+
+        }
+
+      }
+
+    }
+
+  }
+
+  function doFaces() {
+
+    var a = lastVertex;
+    var b = lastVertex + cornerVertNumber;
+    var c = lastVertex + cornerVertNumber * 2;
+    var d = lastVertex + cornerVertNumber * 3;
+
+    indices.push( a );
+    indices.push( b );
+    indices.push( c );
+    indices.push( a );
+    indices.push( c );
+    indices.push( d );
+
+    a = lastVertex + cornerVertNumber * 4;
+    b = lastVertex + cornerVertNumber * 5;
+    c = lastVertex + cornerVertNumber * 6;
+    d = lastVertex + cornerVertNumber * 7;
+
+    indices.push( a );
+    indices.push( c );
+    indices.push( b );
+    indices.push( a );
+    indices.push( d );
+    indices.push( c );
+
+    a = 0;
+    b = cornerVertNumber;
+    c = cornerVertNumber * 4;
+    d = cornerVertNumber * 5;
+
+    indices.push( a );
+    indices.push( c );
+    indices.push( b );
+    indices.push( b );
+    indices.push( c );
+    indices.push( d );
+
+    a = cornerVertNumber * 2;
+    b = cornerVertNumber * 3;
+    c = cornerVertNumber * 6;
+    d = cornerVertNumber * 7;
+
+    indices.push( a );
+    indices.push( c );
+    indices.push( b );
+    indices.push( b );
+    indices.push( c );
+    indices.push( d );
+
+    a = radiusSegments;
+    b = radiusSegments + cornerVertNumber * 3;
+    c = radiusSegments + cornerVertNumber * 4;
+    d = radiusSegments + cornerVertNumber * 7;
+
+    indices.push( a );
+    indices.push( b );
+    indices.push( c );
+    indices.push( b );
+    indices.push( d );
+    indices.push( c );
+
+    a = radiusSegments + cornerVertNumber;
+    b = radiusSegments + cornerVertNumber * 2;
+    c = radiusSegments + cornerVertNumber * 5;
+    d = radiusSegments + cornerVertNumber * 6;
+
+    indices.push( a );
+    indices.push( c );
+    indices.push( b );
+    indices.push( b );
+    indices.push( c );
+    indices.push( d );
+
+  }
+
+  function doHeightEdges() {
+
+    for ( var i = 0; i < 4; i ++ ) {
+
+      var cOffset = i * cornerVertNumber;
+      var cRowOffset = 4 * cornerVertNumber + cOffset;
+      var needsFlip = i & 1 === 1;
+
+      for ( var u = 0; u < radiusSegments; u ++ ) {
+
+        var u1 = u + 1;
+        var a = cOffset + u;
+        var b = cOffset + u1;
+        var c = cRowOffset + u;
+        var d = cRowOffset + u1;
+
+        if ( ! needsFlip ) {
+
+          indices.push( a );
+          indices.push( b );
+          indices.push( c );
+          indices.push( b );
+          indices.push( d );
+          indices.push( c );
+
+        } else {
+
+          indices.push( a );
+          indices.push( c );
+          indices.push( b );
+          indices.push( b );
+          indices.push( c );
+          indices.push( d );
+
+        }
+
+      }
+
+    }
+
+  }
+
+  function doDepthEdges() {
+
+    var cStarts = [ 0, 2, 4, 6 ];
+    var cEnds = [ 1, 3, 5, 7 ];
+
+    for ( var i = 0; i < 4; i ++ ) {
+
+      var cStart = cornerVertNumber * cStarts[ i ];
+      var cEnd = cornerVertNumber * cEnds[ i ];
+
+      var needsFlip = 1 >= i;
+
+      for ( var u = 0; u < radiusSegments; u ++ ) {
+
+        var urs1 = u * rs1;
+        var u1rs1 = ( u + 1 ) * rs1;
+
+        var a = cStart + urs1;
+        var b = cStart + u1rs1;
+        var c = cEnd + urs1;
+        var d = cEnd + u1rs1;
+
+        if ( needsFlip ) {
+
+          indices.push( a );
+          indices.push( c );
+          indices.push( b );
+          indices.push( b );
+          indices.push( c );
+          indices.push( d );
+
+        } else {
+
+          indices.push( a );
+          indices.push( b );
+          indices.push( c );
+          indices.push( b );
+          indices.push( d );
+          indices.push( c );
+
+        }
+
+      }
+
+    }
+
+  }
+
+  function doWidthEdges() {
+
+    var end = radiusSegments - 1;
+
+    var cStarts = [ 0, 1, 4, 5 ];
+    var cEnds = [ 3, 2, 7, 6 ];
+    var needsFlip = [ 0, 1, 1, 0 ];
+
+    for ( var i = 0; i < 4; i ++ ) {
+
+      var cStart = cStarts[ i ] * cornerVertNumber;
+      var cEnd = cEnds[ i ] * cornerVertNumber;
+
+      for ( var u = 0; u <= end; u ++ ) {
+
+        var a = cStart + radiusSegments + u * rs1;
+        var b = cStart + ( u != end ? radiusSegments + ( u + 1 ) * rs1 : cornerVertNumber - 1 );
+
+        var c = cEnd + radiusSegments + u * rs1;
+        var d = cEnd + ( u != end ? radiusSegments + ( u + 1 ) * rs1 : cornerVertNumber - 1 );
+
+        if ( ! needsFlip[ i ] ) {
+
+          indices.push( a );
+          indices.push( b );
+          indices.push( c );
+          indices.push( b );
+          indices.push( d );
+          indices.push( c );
+
+        } else {
+
+          indices.push( a );
+          indices.push( c );
+          indices.push( b );
+          indices.push( b );
+          indices.push( c );
+          indices.push( d );
+
+        }
+
+      }
+
+    }
+
+  }
+
+  var index = 0;
+
+  for ( var i = 0; i < vertexPool.length; i ++ ) {
+
+    positions.setXYZ(
+      index,
+      vertexPool[ i ].x,
+      vertexPool[ i ].y,
+      vertexPool[ i ].z
+    );
+
+    normals.setXYZ(
+      index,
+      normalPool[ i ].x,
+      normalPool[ i ].y,
+      normalPool[ i ].z
+    );
+
+    index ++;
+
+  }
+
+  this.setIndex( new THREE.BufferAttribute( new Uint16Array( indices ), 1 ) );
+  this.addAttribute( 'position', positions );
+  this.addAttribute( 'normal', normals );
+
+}
+
+RoundedBoxGeometry.prototype = Object.create( THREE.BufferGeometry.prototype );
+RoundedBoxGeometry.constructor = RoundedBoxGeometry;
+
+function RoundedPlaneGeometry( size, radius, depth ) {
+
+  var x, y, width, height;
+
+  x = y = - size / 2;
+  width = height = size;
+  radius = size * radius;
+
+  const shape = new THREE.Shape();
+
+  shape.moveTo( x, y + radius );
+  shape.lineTo( x, y + height - radius );
+  shape.quadraticCurveTo( x, y + height, x + radius, y + height );
+  shape.lineTo( x + width - radius, y + height );
+  shape.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
+  shape.lineTo( x + width, y + radius );
+  shape.quadraticCurveTo( x + width, y, x + width - radius, y );
+  shape.lineTo( x + radius, y );
+  shape.quadraticCurveTo( x, y, x, y + radius );
+
+  const geometry = new THREE.ExtrudeBufferGeometry(
+    shape,
+    { depth: depth, bevelEnabled: false, curveSegments: 3 }
+  );
+
+  return geometry;
+
+}
+
+class Cube {
+
+  constructor( game ) {
+
+    this.game = game;
+    this.size = 3;
+
+    this.geometry = {
+      pieceCornerRadius: 0.12,
+      edgeCornerRoundness: 0.15,
+      edgeScale: 0.82,
+      edgeDepth: 0.01,
+    };
+
+    this.holder = new THREE.Object3D();
+    this.object = new THREE.Object3D();
+    this.animator = new THREE.Object3D();
+
+    this.holder.add( this.animator );
+    this.animator.add( this.object );
+
+    this.game.world.scene.add( this.holder );
+
+  }
+
+  init() {
+
+    this.cubes = [];
+    this.object.children = [];
+    this.object.add( this.game.controls.group );
+
+    if ( this.size === 2 ) this.scale = 1.25;
+    else if ( this.size === 3 ) this.scale = 1;
+    else if ( this.size > 3 ) this.scale = 3 / this.size;
+
+    this.object.scale.set( this.scale, this.scale, this.scale );
+
+    const controlsScale = this.size === 2 ? 0.825 : 1;
+    this.game.controls.edges.scale.set( controlsScale, controlsScale, controlsScale );
+    
+    this.generatePositions();
+    this.generateModel();
+
+    this.pieces.forEach( piece => {
+
+      this.cubes.push( piece.userData.cube );
+      this.object.add( piece );
+
+    } );
+
+    this.holder.traverse( node => {
+
+      if ( node.frustumCulled ) node.frustumCulled = false;
+
+    } );
+
+    this.updateColors( this.game.themes.getColors() );
+
+    this.sizeGenerated = this.size;
+
+  }
+
+  resize( force = false ) {
+
+    if ( this.size !== this.sizeGenerated || force ) {
+
+      this.size = this.game.preferences.ranges.size.value;
+
+      this.reset();
+      this.init();
+
+      this.game.saved = false;
+      this.game.timer.reset();
+      this.game.storage.clearGame();
+
+    }
+
+  }
+
+  reset() {
+
+    this.game.controls.edges.rotation.set( 0, 0, 0 );
+
+    this.holder.rotation.set( 0, 0, 0 );
+    this.object.rotation.set( 0, 0, 0 );
+    this.animator.rotation.set( 0, 0, 0 );
+
+  }
+
+  generatePositions() {
+
+    const m = this.size - 1;
+    const first = this.size % 2 !== 0
+      ? 0 - Math.floor(this.size / 2)
+      : 0.5 - this.size / 2;
+
+    let x, y, z;
+
+    this.positions = [];
+
+    for ( x = 0; x < this.size; x ++ ) {
+      for ( y = 0; y < this.size; y ++ ) {
+        for ( z = 0; z < this.size; z ++ ) {
+
+          let position = new THREE.Vector3(first + x, first + y, first + z);
+          let edges = [];
+
+          if ( x == 0 ) edges.push(0);
+          if ( x == m ) edges.push(1);
+          if ( y == 0 ) edges.push(2);
+          if ( y == m ) edges.push(3);
+          if ( z == 0 ) edges.push(4);
+          if ( z == m ) edges.push(5);
+
+          position.edges = edges;
+          this.positions.push( position );
+
+        }
+      }
+    }
+
+  }
+
+  generateModel() {
+
+    this.pieces = [];
+    this.edges = [];
+
+    const pieceSize = 1 / 3;
+
+    const mainMaterial = new THREE.MeshLambertMaterial();
+
+    const pieceMesh = new THREE.Mesh(
+      new RoundedBoxGeometry( pieceSize, this.geometry.pieceCornerRadius, 3 ),
+      mainMaterial.clone()
+    );
+
+    const edgeGeometry = RoundedPlaneGeometry(
+      pieceSize,
+      this.geometry.edgeCornerRoundness,
+      this.geometry.edgeDepth
+    );
+
+    this.positions.forEach( ( position, index ) => {
+
+      const piece = new THREE.Object3D();
+      const pieceCube = pieceMesh.clone();
+      const pieceEdges = [];
+
+      piece.position.copy( position.clone().divideScalar( 3 ) );
+      piece.add( pieceCube );
+      piece.name = index;
+      piece.edgesName = '';
+
+      position.edges.forEach( position => {
+
+        const edge = new THREE.Mesh( edgeGeometry, mainMaterial.clone() );
+        const name = [ 'L', 'R', 'D', 'U', 'B', 'F' ][ position ];
+        const distance = pieceSize / 2;
+
+        edge.position.set(
+          distance * [ - 1, 1, 0, 0, 0, 0 ][ position ],
+          distance * [ 0, 0, - 1, 1, 0, 0 ][ position ],
+          distance * [ 0, 0, 0, 0, - 1, 1 ][ position ]
+        );
+
+        edge.rotation.set(
+          Math.PI / 2 * [ 0, 0, 1, - 1, 0, 0 ][ position ],
+          Math.PI / 2 * [ - 1, 1, 0, 0, 2, 0 ][ position ],
+          0
+        );
+
+        edge.scale.set(
+          this.geometry.edgeScale,
+          this.geometry.edgeScale,
+          this.geometry.edgeScale
+        );
+
+        edge.name = name;
+
+        piece.add( edge );
+        pieceEdges.push( name );
+        this.edges.push( edge );
+
+      } );
+
+      piece.userData.edges = pieceEdges;
+      piece.userData.cube = pieceCube;
+
+      piece.userData.start = {
+        position: piece.position.clone(),
+        rotation: piece.rotation.clone(),
+      };
+
+      this.pieces.push( piece );
+
+    } );
+
+  }
+
+  updateColors( colors ) {
+
+    if ( typeof this.pieces !== 'object' && typeof this.edges !== 'object' ) return;
+
+    this.pieces.forEach( piece => piece.userData.cube.material.color.setHex( colors.P ) );
+    this.edges.forEach( edge => edge.material.color.setHex( colors[ edge.name ] ) );
+
+  }
+
+  loadFromData( data ) {
+
+    this.size = data.size;
+
+    this.reset();
+    this.init();
+
+    this.pieces.forEach( piece => {
+
+      const index = data.names.indexOf( piece.name );
+
+      const position = data.positions[index];
+      const rotation = data.rotations[index];
+
+      piece.position.set( position.x, position.y, position.z );
+      piece.rotation.set( rotation.x, rotation.y, rotation.z );
+
+    } );
+
+  }
+
+}
+
+const Easing = {
+
+  Power: {
+
+    In: power => {
+
+      power = Math.round( power || 1 );
+
+      return t => Math.pow( t, power );
+
+    },
+
+    Out: power => {
+
+      power = Math.round( power || 1 );
+
+      return t => 1 - Math.abs( Math.pow( t - 1, power ) );
+
+    },
+
+    InOut: power => {
+
+      power = Math.round( power || 1 );
+
+      return t => ( t < 0.5 )
+        ? Math.pow( t * 2, power ) / 2
+        : ( 1 - Math.abs( Math.pow( ( t * 2 - 1 ) - 1, power ) ) ) / 2 + 0.5;
+
+    },
+
+  },
+
+  Sine: {
+
+    In: () => t => 1 + Math.sin( Math.PI / 2 * t - Math.PI / 2 ),
+
+    Out: () => t => Math.sin( Math.PI / 2 * t ),
+
+    InOut: () => t => ( 1 + Math.sin( Math.PI * t - Math.PI / 2 ) ) / 2,
+
+  },
+
+  Back: {
+
+    Out: s => {
+
+      s = s || 1.70158;
+
+      return t => { return ( t -= 1 ) * t * ( ( s + 1 ) * t + s ) + 1; };
+
+    },
+
+    In: s => {
+
+      s = s || 1.70158;
+
+      return t => { return t * t * ( ( s + 1 ) * t - s ); };
+
+    }
+
+  },
+
+  Elastic: {
+
+    Out: ( amplitude, period ) => {
+
+      let PI2 = Math.PI * 2;
+
+      let p1 = ( amplitude >= 1 ) ? amplitude : 1;
+      let p2 = ( period || 0.3 ) / ( amplitude < 1 ? amplitude : 1 );
+      let p3 = p2 / PI2 * ( Math.asin( 1 / p1 ) || 0 );
+
+      p2 = PI2 / p2;
+
+      return t => { return p1 * Math.pow( 2, -10 * t ) * Math.sin( ( t - p3 ) * p2 ) + 1 }
+
+    },
+
+  },
+
+};
+
+class Tween extends Animation {
+
+  constructor( options ) {
+
+    super( false );
+
+    this.duration = options.duration || 500;
+    this.easing = options.easing || ( t => t );
+    this.onUpdate = options.onUpdate || ( () => {} );
+    this.onComplete = options.onComplete || ( () => {} );
+
+    this.delay = options.delay || false;
+    this.yoyo = options.yoyo ? false : null;
+
+    this.progress = 0;
+    this.value = 0;
+    this.delta = 0;
+
+    this.getFromTo( options );
+
+    if ( this.delay ) setTimeout( () => super.start(), this.delay );
+    else super.start();
+
+    this.onUpdate( this );
+
+  }
+
+  update( delta ) {
+
+    const old = this.value * 1;
+    const direction = ( this.yoyo === true ) ? - 1 : 1;
+
+    this.progress += ( delta / this.duration ) * direction;
+
+    this.value = this.easing( this.progress );
+    this.delta = this.value - old;
+
+    if ( this.values !== null ) this.updateFromTo();
+
+    if ( this.yoyo !== null ) this.updateYoyo();
+    else if ( this.progress <= 1 ) this.onUpdate( this );
+    else {
+
+      this.progress = 1;
+      this.value = 1;
+      this.onUpdate( this );
+      this.onComplete( this );
+      super.stop();      
+
+    }
+
+  }
+
+  updateYoyo() {
+
+    if ( this.progress > 1 || this.progress < 0 ) {
+
+      this.value = this.progress = ( this.progress > 1 ) ? 1 : 0;
+      this.yoyo = ! this.yoyo;
+
+    }
+
+    this.onUpdate( this );
+
+  }
+
+  updateFromTo() {
+
+    this.values.forEach( key => {
+
+      this.target[ key ] = this.from[ key ] + ( this.to[ key ] - this.from[ key ] ) * this.value;
+
+    } );
+
+  }
+
+  getFromTo( options ) {
+
+    if ( ! options.target || ! options.to ) {
+
+      this.values = null;
+      return;
+
+    }
+
+    this.target = options.target || null;
+    this.from = options.from || {};
+    this.to = options.to || null;
+    this.values = [];
+
+    if ( Object.keys( this.from ).length < 1 )
+      Object.keys( this.to ).forEach( key => { this.from[ key ] = this.target[ key ]; } );
+
+    Object.keys( this.to ).forEach( key => { this.values.push( key ); } );
+
+  }
+
+}
+
+window.addEventListener( 'touchmove', () => {} );
+document.addEventListener( 'touchmove',  event => { event.preventDefault(); }, { passive: false } );
+
+class Draggable {
+
+  constructor( element, options ) {
+
+    this.position = {
+      current: new THREE.Vector2(),
+      start: new THREE.Vector2(),
+      delta: new THREE.Vector2(),
+      old: new THREE.Vector2(),
+      drag: new THREE.Vector2(),
+    };
+
+    this.options = Object.assign( {
+      calcDelta: false,
+    }, options || {} );
+
+    this.element = element;
+    this.touch = null;
+
+    this.drag = {
+
+      start: ( event ) => {
+
+        if ( event.type == 'mousedown' && event.which != 1 ) return;
+        if ( event.type == 'touchstart' && event.touches.length > 1 ) return;
+
+        this.getPositionCurrent( event );
+
+        if ( this.options.calcDelta ) {
+
+          this.position.start = this.position.current.clone();
+          this.position.delta.set( 0, 0 );
+          this.position.drag.set( 0, 0 );
+
+        }
+
+        this.touch = ( event.type == 'touchstart' );
+
+        this.onDragStart( this.position );
+
+        window.addEventListener( ( this.touch ) ? 'touchmove' : 'mousemove', this.drag.move, false );
+        window.addEventListener( ( this.touch ) ? 'touchend' : 'mouseup', this.drag.end, false );
+
+      },
+
+      move: ( event ) => {
+
+        if ( this.options.calcDelta ) {
+
+          this.position.old = this.position.current.clone();
+
+        }
+
+        this.getPositionCurrent( event );
+
+        if ( this.options.calcDelta ) {
+
+          this.position.delta = this.position.current.clone().sub( this.position.old );
+          this.position.drag = this.position.current.clone().sub( this.position.start );
+
+        }
+
+        this.onDragMove( this.position );
+
+      },
+
+      end: ( event ) => {
+
+        this.getPositionCurrent( event );
+
+        this.onDragEnd( this.position );
+
+        window.removeEventListener( ( this.touch ) ? 'touchmove' : 'mousemove', this.drag.move, false );
+        window.removeEventListener( ( this.touch ) ? 'touchend' : 'mouseup', this.drag.end, false );
+
+      },
+
+    };
+
+    this.onDragStart = () => {};
+    this.onDragMove = () => {};
+    this.onDragEnd = () => {};
+
+    this.enable();
+
+    return this;
+
+  }
+
+  enable() {
+
+    this.element.addEventListener( 'touchstart', this.drag.start, false );
+    this.element.addEventListener( 'mousedown', this.drag.start, false );
+
+    return this;
+
+  }
+
+  disable() {
+
+    this.element.removeEventListener( 'touchstart', this.drag.start, false );
+    this.element.removeEventListener( 'mousedown', this.drag.start, false );
+
+    return this;
+
+  }
+
+  getPositionCurrent( event ) {
+
+    const dragEvent = event.touches
+      ? ( event.touches[ 0 ] || event.changedTouches[ 0 ] )
+      : event;
+
+    this.position.current.set( dragEvent.pageX, dragEvent.pageY );
+
+  }
+
+  convertPosition( position ) {
+
+    position.x = ( position.x / this.element.offsetWidth ) * 2 - 1;
+    position.y = - ( ( position.y / this.element.offsetHeight ) * 2 - 1 );
+
+    return position;
+
+  }
+
+}
+
+const STILL = 0;
+const PREPARING = 1;
+const ROTATING = 2;
+const ANIMATING = 3;
+
+class Controls {
+
+  constructor( game ) {
+
+    this.game = game;
+
+    this.flipConfig = 0;
+
+    this.flipEasings = [ Easing.Power.Out( 3 ), Easing.Sine.Out(), Easing.Back.Out( 1.5 ) ];
+    this.flipSpeeds = [ 125, 200, 300 ];
+
+    this.raycaster = new THREE.Raycaster();
+
+    const helperMaterial = new THREE.MeshBasicMaterial( { depthWrite: false, transparent: true, opacity: 0, color: 0x0033ff } );
+
+    this.group = new THREE.Object3D();
+    this.group.name = 'controls';
+    this.game.cube.object.add( this.group );
+
+    this.helper = new THREE.Mesh(
+      new THREE.PlaneBufferGeometry( 200, 200 ),
+      helperMaterial.clone()
+    );
+
+    this.helper.rotation.set( 0, Math.PI / 4, 0 );
+    this.game.world.scene.add( this.helper );
+
+    this.edges = new THREE.Mesh(
+      new THREE.BoxBufferGeometry( 1, 1, 1 ),
+      helperMaterial.clone(),
+    );
+
+    this.game.world.scene.add( this.edges );
+
+    this.onSolved = () => {};
+    this.onMove = () => {};
+
+    this.momentum = [];
+
+    this.scramble = null;
+    this.state = STILL;
+    this.enabled = false;
+
+    this.initDraggable();
+
+  }
+
+  enable() {
+
+    this.draggable.enable();
+    this.enabled = true;
+
+  }
+
+  disable() {
+
+    this.draggable.disable();
+    this.enabled = false;
+
+  }
+
+  initDraggable() {
+
+    this.draggable = new Draggable( this.game.dom.game );
+
+    this.draggable.onDragStart = position => {
+
+      if ( this.scramble !== null ) return;
+      if ( this.state === PREPARING || this.state === ROTATING ) return;
+
+      this.gettingDrag = this.state === ANIMATING;
+
+      const edgeIntersect = this.getIntersect( position.current, this.edges, false );
+
+      if ( edgeIntersect !== false ) {
+
+        this.dragIntersect = this.getIntersect( position.current, this.game.cube.cubes, true );
+
+      }
+
+      if ( edgeIntersect !== false && this.dragIntersect !== false ) {
+
+        this.dragNormal = edgeIntersect.face.normal.round();
+        this.flipType = 'layer';
+
+        this.attach( this.helper, this.edges );
+
+        this.helper.rotation.set( 0, 0, 0 );
+        this.helper.position.set( 0, 0, 0 );
+        this.helper.lookAt( this.dragNormal );
+        this.helper.translateZ( 0.5 );
+        this.helper.updateMatrixWorld();
+
+        this.detach( this.helper, this.edges );
+
+      } else {
+
+        this.dragNormal = new THREE.Vector3( 0, 0, 1 );
+        this.flipType = 'cube';
+
+        this.helper.position.set( 0, 0, 0 );
+        this.helper.rotation.set( 0, Math.PI / 4, 0 );
+        this.helper.updateMatrixWorld();
+
+      }
+
+      let planeIntersect = this.getIntersect( position.current, this.helper, false );
+      if ( planeIntersect === false ) return;
+
+      this.dragCurrent = this.helper.worldToLocal( planeIntersect.point );
+      this.dragTotal = new THREE.Vector3();
+      this.state = ( this.state === STILL ) ? PREPARING : this.state;
+
+    };
+
+    this.draggable.onDragMove = position => {
+
+      if ( this.scramble !== null ) return;
+      if ( this.state === STILL || ( this.state === ANIMATING && this.gettingDrag === false ) ) return;
+
+      const planeIntersect = this.getIntersect( position.current, this.helper, false );
+      if ( planeIntersect === false ) return;
+
+      const point = this.helper.worldToLocal( planeIntersect.point.clone() );
+
+      this.dragDelta = point.clone().sub( this.dragCurrent ).setZ( 0 );
+      this.dragTotal.add( this.dragDelta );
+      this.dragCurrent = point;
+      this.addMomentumPoint( this.dragDelta );
+
+      if ( this.state === PREPARING && this.dragTotal.length() > 0.05 ) {
+
+        this.dragDirection = this.getMainAxis( this.dragTotal );
+
+        if ( this.flipType === 'layer' ) {
+
+          const direction = new THREE.Vector3();
+          direction[ this.dragDirection ] = 1;
+
+          const worldDirection = this.helper.localToWorld( direction ).sub( this.helper.position );
+          const objectDirection = this.edges.worldToLocal( worldDirection ).round();
+
+          this.flipAxis = objectDirection.cross( this.dragNormal ).negate();
+
+          this.selectLayer( this.getLayer( false ) );
+
+        } else {
+
+          const axis = ( this.dragDirection != 'x' )
+            ? ( ( this.dragDirection == 'y' && position.current.x > this.game.world.width / 2 ) ? 'z' : 'x' )
+            : 'y';
+
+          this.flipAxis = new THREE.Vector3();
+          this.flipAxis[ axis ] = 1 * ( ( axis == 'x' ) ? - 1 : 1 );
+
+        }
+
+        this.flipAngle = 0;
+        this.state = ROTATING;
+
+      } else if ( this.state === ROTATING ) {
+
+        const rotation = this.dragDelta[ this.dragDirection ];
+
+        if ( this.flipType === 'layer' ) { 
+
+          this.group.rotateOnAxis( this.flipAxis, rotation );
+          this.flipAngle += rotation;
+
+        } else {
+
+          this.edges.rotateOnWorldAxis( this.flipAxis, rotation );
+          this.game.cube.object.rotation.copy( this.edges.rotation );
+          this.flipAngle += rotation;
+
+        }
+
+      }
+
+    };
+
+    this.draggable.onDragEnd = position => {
+
+      if ( this.scramble !== null ) return;
+      if ( this.state !== ROTATING ) {
+
+        this.gettingDrag = false;
+        this.state = STILL;
+        return;
+
+      }
+
+      this.state = ANIMATING;
+
+      const momentum = this.getMomentum()[ this.dragDirection ];
+      const flip = ( Math.abs( momentum ) > 0.05 && Math.abs( this.flipAngle ) < Math.PI / 2 );
+
+      const angle = flip
+        ? this.roundAngle( this.flipAngle + Math.sign( this.flipAngle ) * ( Math.PI / 4 ) )
+        : this.roundAngle( this.flipAngle );
+
+      const delta = angle - this.flipAngle;
+
+      if ( this.flipType === 'layer' ) {
+
+        this.rotateLayer( delta, false, layer => {
+
+          this.game.storage.saveGame();
+          
+          this.state = this.gettingDrag ? PREPARING : STILL;
+          this.gettingDrag = false;
+
+          this.checkIsSolved();
+
+        } );
+
+      } else {
+
+        this.rotateCube( delta, () => {
+
+          this.state = this.gettingDrag ? PREPARING : STILL;
+          this.gettingDrag = false;
+
+        } );
+
+      }
+
+    };
+
+  }
+
+  rotateLayer( rotation, scramble, callback ) {
+
+    const config = scramble ? 0 : this.flipConfig;
+
+    const easing = this.flipEasings[ config ];
+    const duration = this.flipSpeeds[ config ];
+    const bounce = ( config == 2 ) ? this.bounceCube() : ( () => {} );
+
+    this.rotationTween = new Tween( {
+      easing: easing,
+      duration: duration,
+      onUpdate: tween => {
+
+        let deltaAngle = tween.delta * rotation;
+        this.group.rotateOnAxis( this.flipAxis, deltaAngle );
+        bounce( tween.value, deltaAngle, rotation );
+
+      },
+      onComplete: () => {
+
+        if ( ! scramble ) this.onMove();
+
+        const layer = this.flipLayer.slice( 0 );
+
+        this.game.cube.object.rotation.setFromVector3( this.snapRotation( this.game.cube.object.rotation.toVector3() ) );
+        this.group.rotation.setFromVector3( this.snapRotation( this.group.rotation.toVector3() ) );
+        this.deselectLayer( this.flipLayer );
+
+        callback( layer );
+
+      },
+    } );
+
+  }
+
+  bounceCube() {
+
+    let fixDelta = true;
+
+    return ( progress, delta, rotation ) => {
+
+        if ( progress >= 1 ) {
+
+          if ( fixDelta ) {
+
+            delta = ( progress - 1 ) * rotation;
+            fixDelta = false;
+
+          }
+
+          this.game.cube.object.rotateOnAxis( this.flipAxis, delta );
+
+        }
+
+    }
+
+  }
+
+  rotateCube( rotation, callback ) {
+
+    const config = this.flipConfig;
+    const easing = [ Easing.Power.Out( 4 ), Easing.Sine.Out(), Easing.Back.Out( 2 ) ][ config ];
+    const duration = [ 100, 150, 350 ][ config ];
+
+    this.rotationTween = new Tween( {
+      easing: easing,
+      duration: duration,
+      onUpdate: tween => {
+
+        this.edges.rotateOnWorldAxis( this.flipAxis, tween.delta * rotation );
+        this.game.cube.object.rotation.copy( this.edges.rotation );
+
+      },
+      onComplete: () => {
+
+        this.edges.rotation.setFromVector3( this.snapRotation( this.edges.rotation.toVector3() ) );
+        this.game.cube.object.rotation.copy( this.edges.rotation );
+        callback();
+
+      },
+    } );
+
+  }
+
+  selectLayer( layer ) {
+
+    this.group.rotation.set( 0, 0, 0 );
+    this.movePieces( layer, this.game.cube.object, this.group );
+    this.flipLayer = layer;
+
+  }
+
+  deselectLayer( layer ) {
+
+    this.movePieces( layer, this.group, this.game.cube.object );
+    this.flipLayer = null;
+
+  }
+
+  movePieces( layer, from, to ) {
+
+    from.updateMatrixWorld();
+    to.updateMatrixWorld();
+
+    layer.forEach( index => {
+
+      const piece = this.game.cube.pieces[ index ];
+
+      piece.applyMatrix( from.matrixWorld );
+      from.remove( piece );
+      piece.applyMatrix( new THREE.Matrix4().getInverse( to.matrixWorld ) );
+      to.add( piece );
+
+    } );
+
+  }
+
+  getLayer( position ) {
+
+    const scalar = { 2: 6, 3: 3, 4: 4, 5: 3 }[ this.game.cube.size ];
+    const layer = [];
+
+    let axis;
+
+    if ( position === false ) {
+
+      const piece = this.dragIntersect.object.parent;
+
+      axis = this.getMainAxis( this.flipAxis );
+      position = piece.position.clone() .multiplyScalar( scalar ) .round();
+
+    } else {
+
+      axis = this.getMainAxis( position );
+
+    }
+
+    this.game.cube.pieces.forEach( piece => {
+
+      const piecePosition = piece.position.clone().multiplyScalar( scalar ).round();
+
+      if ( piecePosition[ axis ] == position[ axis ] ) layer.push( piece.name );
+
+    } );
+
+    return layer;
+
+  }
+
+  keyboardMove( type, move, callback ) {
+
+    if ( this.state !== STILL ) return;
+    if ( this.enabled !== true ) return;
+
+    if ( type === 'LAYER' ) {
+
+      const layer = this.getLayer( move.position );
+
+      this.flipAxis = new THREE.Vector3();
+      this.flipAxis[ move.axis ] = 1;
+      this.state = ROTATING;
+
+      this.selectLayer( layer );
+      this.rotateLayer( move.angle, false, layer => {
+
+        this.game.storage.saveGame();
+        this.state = STILL;
+        this.checkIsSolved();
+
+      } );
+
+    } else if ( type === 'CUBE' ) {
+
+      this.flipAxis = new THREE.Vector3();
+      this.flipAxis[ move.axis ] = 1;
+      this.state = ROTATING;
+
+      this.rotateCube( move.angle, () => {
+
+        this.state = STILL;
+
+      } );
+
+    }
+
+  }
+
+  scrambleCube() {
+
+    if ( this.scramble == null ) {
+
+      this.scramble = this.game.scrambler;
+      this.scramble.callback = ( typeof callback !== 'function' ) ? () => {} : callback;
+
+    }
+
+    const converted = this.scramble.converted;
+    const move = converted[ 0 ];
+    const layer = this.getLayer( move.position );
+
+    this.flipAxis = new THREE.Vector3();
+    this.flipAxis[ move.axis ] = 1;
+
+    this.selectLayer( layer );
+    this.rotateLayer( move.angle, true, () => {
+
+      converted.shift();
+
+      if ( converted.length > 0 ) {
+
+        this.scrambleCube();
+
+      } else {
+
+        this.scramble = null;
+        this.game.storage.saveGame();
+
+      }
+
+    } );
+
+  }
+
+  getIntersect( position, object, multiple ) {
+
+    this.raycaster.setFromCamera(
+      this.draggable.convertPosition( position.clone() ),
+      this.game.world.camera
+    );
+
+    const intersect = ( multiple )
+      ? this.raycaster.intersectObjects( object )
+      : this.raycaster.intersectObject( object );
+
+    return ( intersect.length > 0 ) ? intersect[ 0 ] : false;
+
+  }
+
+  getMainAxis( vector ) {
+
+    return Object.keys( vector ).reduce(
+      ( a, b ) => Math.abs( vector[ a ] ) > Math.abs( vector[ b ] ) ? a : b
+    );
+
+  }
+
+  detach( child, parent ) {
+
+    child.applyMatrix( parent.matrixWorld );
+    parent.remove( child );
+    this.game.world.scene.add( child );
+
+  }
+
+  attach( child, parent ) {
+
+    child.applyMatrix( new THREE.Matrix4().getInverse( parent.matrixWorld ) );
+    this.game.world.scene.remove( child );
+    parent.add( child );
+
+  }
+
+  addMomentumPoint( delta ) {
+
+    const time = Date.now();
+
+    this.momentum = this.momentum.filter( moment => time - moment.time < 500 );
+
+    if ( delta !== false ) this.momentum.push( { delta, time } );
+
+  }
+
+  getMomentum() {
+
+    const points = this.momentum.length;
+    const momentum = new THREE.Vector2();
+
+    this.addMomentumPoint( false );
+
+    this.momentum.forEach( ( point, index ) => {
+
+      momentum.add( point.delta.multiplyScalar( index / points ) );
+
+    } );
+
+    return momentum;
+
+  }
+
+  roundAngle( angle ) {
+
+    const round = Math.PI / 2;
+    return Math.sign( angle ) * Math.round( Math.abs( angle) / round ) * round;
+
+  }
+
+  snapRotation( angle ) {
+
+    return angle.set(
+      this.roundAngle( angle.x ),
+      this.roundAngle( angle.y ),
+      this.roundAngle( angle.z )
+    );
+
+  }
+
+  checkIsSolved() {
+
+    const start = performance.now();
+
+    let solved = true;
+    const sides = { 'x-': [], 'x+': [], 'y-': [], 'y+': [], 'z-': [], 'z+': [] };
+
+    this.game.cube.edges.forEach( edge => {
+
+      const position = edge.parent
+        .localToWorld( edge.position.clone() )
+        .sub( this.game.cube.object.position );
+
+      const mainAxis = this.getMainAxis( position );
+      const mainSign = position.multiplyScalar( 2 ).round()[ mainAxis ] < 1 ? '-' : '+';
+
+      sides[ mainAxis + mainSign ].push( edge.name );
+
+    } );
+
+    Object.keys( sides ).forEach( side => {
+
+      if ( ! sides[ side ].every( value => value === sides[ side ][ 0 ] ) ) solved = false;
+
+    } );
+
+    if ( solved ) this.onSolved();
+
+  }
+
+}
+
+class Scrambler {
+
+  constructor( game ) {
+
+    this.game = game;
+
+    this.dificulty = 0;
+
+    this.scrambleLength = {
+      2: [ 7, 9, 11 ],
+      3: [ 20, 25, 30 ],
+      4: [ 30, 40, 50 ],
+      5: [ 40, 60, 80 ],
+    };
+
+    this.moves = [];
+    this.conveted = [];
+    this.pring = '';
+
+  }
+
+  scramble( scramble ) {
+
+    let count = 0;
+    this.moves = ( typeof scramble !== 'undefined' ) ? scramble.split( ' ' ) : [];
+
+    if ( this.moves.length < 1 ) {
+
+      const scrambleLength = this.scrambleLength[ this.game.cube.size ][ this.dificulty ];
+
+      const faces = this.game.cube.size < 4 ? 'UDLRFB' : 'UuDdLlRrFfBb';
+      const modifiers = [ "", "'", "2" ];
+      const total = ( typeof scramble === 'undefined' ) ? scrambleLength : scramble;
+
+      while ( count < total ) {
+
+        const move =
+          faces[ Math.floor( Math.random() * faces.length ) ] +
+          modifiers[ Math.floor( Math.random() * 3 ) ];
+
+        if ( count > 0 && move.charAt( 0 ) == this.moves[ count - 1 ].charAt( 0 ) ) continue;
+        if ( count > 1 && move.charAt( 0 ) == this.moves[ count - 2 ].charAt( 0 ) ) continue;
+
+        this.moves.push( move );
+        count ++;
+
+      }
+
+    }
+
+    this.callback = () => {};
+    this.convert();
+    this.print = this.moves.join( ' ' );
+
+    return this;
+
+  }
+
+  convert( moves ) {
+
+    this.converted = [];
+
+    this.moves.forEach( move => {
+
+      const convertedMove = this.convertMove( move );
+      const modifier = move.charAt( 1 );
+
+      this.converted.push( convertedMove );
+      if ( modifier == "2" ) this.converted.push( convertedMove );
+
+    } );
+
+  }
+
+  convertMove( move ) {
+
+    const face = move.charAt( 0 );
+    const modifier = move.charAt( 1 );
+
+    const axis = { D: 'y', U: 'y', L: 'x', R: 'x', F: 'z', B: 'z' }[ face.toUpperCase() ];
+    let row = { D: -1, U: 1, L: -1, R: 1, F: 1, B: -1 }[ face.toUpperCase() ];
+
+    if ( this.game.cube.size > 3 && face !== face.toLowerCase() ) row = row * 2;
+
+    const position = new THREE.Vector3();
+    position[ { D: 'y', U: 'y', L: 'x', R: 'x', F: 'z', B: 'z' }[ face.toUpperCase() ] ] = row;
+
+    const angle = ( Math.PI / 2 ) * - row * ( ( modifier == "'" ) ? - 1 : 1 );
+
+    return { position, axis, angle, name: move };
+
+  }
+
+}
+
+class Transition {
+
+  constructor( game ) {
+
+    this.game = game;
+
+    this.tweens = {};
+    this.durations = {};
+    this.data = {
+      cubeY: -0.2,
+      cameraZoom: 0.85,
+    };
+
+    this.activeTransitions = 0;
+
+  }
+
+  init() {
+
+    this.game.controls.disable();
+
+    this.game.cube.object.position.y = this.data.cubeY;
+    this.game.cube.animator.position.y = 4;
+    this.game.cube.animator.rotation.x = - Math.PI / 3;
+    this.game.world.camera.zoom = this.data.cameraZoom;
+    this.game.world.camera.updateProjectionMatrix();
+
+    this.tweens.buttons = {};
+    this.tweens.timer = [];
+    this.tweens.title = [];
+    this.tweens.best = [];
+    this.tweens.complete = [];
+    this.tweens.prefs = [];
+    this.tweens.theme = [];
+    this.tweens.stats = [];
+
+  }
+
+  buttons( show, hide ) {
+
+    const buttonTween = ( button, show ) => {
+
+      return new Tween( {
+        target: button.style,
+        duration: 300,
+        easing: show ? Easing.Power.Out( 2 ) : Easing.Power.In( 3 ),
+        from: { opacity: show ? 0 : 1 },
+        to: { opacity: show ? 1 : 0 },
+        onUpdate: tween => {
+
+          const translate = show ? 1 - tween.value : tween.value;
+          button.style.transform = `translate3d(0, ${translate * 1.5}em, 0)`;
+
+        },
+        onComplete: () => button.style.pointerEvents = show ? 'all' : 'none'
+      } );
+
+    };
+
+    hide.forEach( button =>
+      this.tweens.buttons[ button ] = buttonTween( this.game.dom.buttons[ button ], false )
+    );
+
+    setTimeout( () => show.forEach( button => {
+
+      this.tweens.buttons[ button ] = buttonTween( this.game.dom.buttons[ button ], true );
+
+    } ), hide ? 500 : 0 );
+
+  }
+
+  cube( show, theming = false ) {
+
+    this.activeTransitions++;
+
+    try { this.tweens.cube.stop(); } catch(e) {}
+    const currentY = this.game.cube.animator.position.y;
+    const currentRotation = this.game.cube.animator.rotation.x;
+
+    this.tweens.cube = new Tween( {
+      duration: show ? 3000 : 1250,
+      easing: show ? Easing.Elastic.Out( 0.8, 0.6 ) : Easing.Back.In( 1 ),
+      onUpdate: tween => {
+
+        this.game.cube.animator.position.y = show
+          ? ( theming ? 0.9 + ( 1 - tween.value ) * 3.5 : ( 1 - tween.value ) * 4 )
+          : currentY + tween.value * 4;
+
+        this.game.cube.animator.rotation.x = show
+          ? ( 1 - tween.value ) * Math.PI / 3
+          : currentRotation + tween.value * - Math.PI / 3;
+
+      },
+    } );
+
+    if ( theming ) {
+
+      if ( show ) {
+
+        this.game.world.camera.zoom = 0.75;
+        this.game.world.camera.updateProjectionMatrix();
+
+      } else {
+
+        setTimeout( () => {
+
+          this.game.world.camera.zoom = this.data.cameraZoom;
+          this.game.world.camera.updateProjectionMatrix();
+
+        }, 1500 );
+
+      }
+
+    }
+
+    this.durations.cube = show ? 1500 : 1500;
+
+    setTimeout( () => this.activeTransitions--, this.durations.cube );
+
+  }
+
+  float() {
+
+    try { this.tweens.float.stop(); } catch(e) {}
+    this.tweens.float = new Tween( {
+      duration: 1500,
+      easing: Easing.Sine.InOut(),
+      yoyo: true,
+      onUpdate: tween => {
+
+        this.game.cube.holder.position.y = (- 0.02 + tween.value * 0.04); 
+        this.game.cube.holder.rotation.x = 0.005 - tween.value * 0.01;
+        this.game.cube.holder.rotation.z = - this.game.cube.holder.rotation.x;
+        this.game.cube.holder.rotation.y = this.game.cube.holder.rotation.x;
+
+        this.game.controls.edges.position.y =
+          this.game.cube.holder.position.y + this.game.cube.object.position.y;
+
+      },
+    } );
+
+  }
+
+  zoom( play, time ) {
+
+    this.activeTransitions++;
+
+    const zoom = ( play ) ? 1 : this.data.cameraZoom;
+    const duration = ( time > 0 ) ? Math.max( time, 1500 ) : 1500;
+    const rotations = ( time > 0 ) ? Math.round( duration / 1500 ) : 1;
+    const easing = Easing.Power.InOut( ( time > 0 ) ? 2 : 3 );
+
+    this.tweens.zoom = new Tween( {
+      target: this.game.world.camera,
+      duration: duration,
+      easing: easing,
+      to: { zoom: zoom },
+      onUpdate: () => { this.game.world.camera.updateProjectionMatrix(); },
+    } );
+
+    this.tweens.rotate = new Tween( {
+      target: this.game.cube.animator.rotation,
+      duration: duration,
+      easing: easing,
+      to: { y: - Math.PI * 2 * rotations },
+      onComplete: () => { this.game.cube.animator.rotation.y = 0; },
+    } );
+
+    this.durations.zoom = duration;
+
+    setTimeout( () => this.activeTransitions--, this.durations.zoom );
+
+  }
+
+  elevate( complete ) {
+
+    this.activeTransitions++;
+
+    const cubeY = 
+
+    this.tweens.elevate = new Tween( {
+      target: this.game.cube.object.position,
+      duration: complete ? 1500 : 0,
+      easing: Easing.Power.InOut( 3 ),
+      to: { y: complete ? -0.05 : this.data.cubeY }
+    } );
+
+    this.durations.elevate = 1500;
+
+    setTimeout( () => this.activeTransitions--, this.durations.elevate );
+
+  }
+
+  complete( show, best ) {
+
+    this.activeTransitions++;
+
+    const text = best ? this.game.dom.texts.best : this.game.dom.texts.complete;
+
+    if ( text.querySelector( 'span i' ) === null )
+      text.querySelectorAll( 'span' ).forEach( span => this.splitLetters( span ) );
+
+    const letters = text.querySelectorAll( '.icon, i' );
+
+    this.flipLetters( best ? 'best' : 'complete', letters, show );
+
+    text.style.opacity = 1;
+
+    const duration = this.durations[ best ? 'best' : 'complete' ];
+
+    if ( ! show ) setTimeout( () => this.game.dom.texts.timer.style.transform = '', duration );
+
+    setTimeout( () => this.activeTransitions--, duration );
+
+  } 
+
+  stats( show ) {
+
+    if ( show ) this.game.scores.calcStats();
+
+    this.activeTransitions++;
+
+    this.tweens.stats.forEach( tween => { tween.stop(); tween = null; } );
+
+    let tweenId = -1;
+
+    const stats = this.game.dom.stats.querySelectorAll( '.stats' );
+    const easing = show ? Easing.Power.Out( 2 ) : Easing.Power.In( 3 );
+
+    stats.forEach( ( stat, index ) => {
+
+      const delay = index * ( show ? 80 : 60 );
+
+      this.tweens.stats[ tweenId++ ] = new Tween( {
+        delay: delay,
+        duration: 400,
+        easing: easing,
+        onUpdate: tween => {
+
+          const translate = show ? ( 1 - tween.value ) * 2 : tween.value;
+          const opacity = show ? tween.value : ( 1 - tween.value );
+
+          stat.style.transform = `translate3d(0, ${translate}em, 0)`;
+          stat.style.opacity = opacity;
+
+        }
+      } );
+
+    } );
+
+    this.durations.stats = 0;
+
+    setTimeout( () => this.activeTransitions--, this.durations.stats );
+
+  }
+
+  preferences( show ) {
+
+    this.ranges( this.game.dom.prefs.querySelectorAll( '.range' ), 'prefs', show );
+
+  }
+
+  theming( show ) {
+
+    this.ranges( this.game.dom.theme.querySelectorAll( '.range' ), 'prefs', show );
+
+  }
+
+  ranges( ranges, type, show ) {
+
+    this.activeTransitions++;
+
+    this.tweens[ type ].forEach( tween => { tween.stop(); tween = null; } );
+
+    const easing = show ? Easing.Power.Out(2) : Easing.Power.In(3);
+
+    let tweenId = -1;
+    let listMax = 0;
+
+    ranges.forEach( ( range, rangeIndex ) => {
+    
+      const label = range.querySelector( '.range__label' );
+      const track = range.querySelector( '.range__track-line' );
+      const handle = range.querySelector( '.range__handle' );
+      const list = range.querySelectorAll( '.range__list div' );
+
+      const delay = rangeIndex * ( show ? 120 : 100 );
+
+      label.style.opacity = show ? 0 : 1;
+      track.style.opacity = show ? 0 : 1;
+      handle.style.opacity = show ? 0 : 1;
+      handle.style.pointerEvents = show ? 'all' : 'none';
+
+      this.tweens[ type ][ tweenId++ ] = new Tween( {
+        delay: show ? delay : delay,
+        duration: 400,
+        easing: easing,
+        onUpdate: tween => {
+
+          const translate = show ? ( 1 - tween.value ) : tween.value;
+          const opacity = show ? tween.value : ( 1 - tween.value );
+
+          label.style.transform = `translate3d(0, ${translate}em, 0)`;
+          label.style.opacity = opacity;
+
+        }
+      } );
+
+      this.tweens[ type ][ tweenId++ ] = new Tween( {
+        delay: show ? delay + 100 : delay,
+        duration: 400,
+        easing: easing,
+        onUpdate: tween => {
+
+          const translate = show ? ( 1 - tween.value ) : tween.value;
+          const scale = show ? tween.value : ( 1 - tween.value );
+          const opacity = scale;
+
+          track.style.transform = `translate3d(0, ${translate}em, 0) scale3d(${scale}, 1, 1)`;
+          track.style.opacity = opacity;
+
+        }
+      } );
+
+      this.tweens[ type ][ tweenId++ ] = new Tween( {
+        delay: show ? delay + 100 : delay,
+        duration: 400,
+        easing: easing,
+        onUpdate: tween => {
+
+          const translate = show ? ( 1 - tween.value ) : tween.value;
+          const opacity = 1 - translate;
+          const scale = 0.5 + opacity * 0.5;
+
+          handle.style.transform = `translate3d(0, ${translate}em, 0) scale3d(${scale}, ${scale}, ${scale})`;
+          handle.style.opacity = opacity;
+
+        }
+      } );
+
+      list.forEach( ( listItem, labelIndex ) => {
+
+        listItem.style.opacity = show ? 0 : 1;
+
+        this.tweens[ type ][ tweenId++ ] = new Tween( {
+          delay: show ? delay + 200 + labelIndex * 50 : delay,
+          duration: 400,
+          easing: easing,
+          onUpdate: tween => {
+
+            const translate = show ? ( 1 - tween.value ) : tween.value;
+            const opacity = show ? tween.value : ( 1 - tween.value );
+
+            listItem.style.transform = `translate3d(0, ${translate}em, 0)`;
+            listItem.style.opacity = opacity;
+
+          }
+        } );
+
+      } );
+
+      listMax = list.length > listMax ? list.length - 1 : listMax;
+
+      range.style.opacity = 1;
+
+    } );
+
+    this.durations[ type ] = show
+      ? ( ( ranges.length - 1 ) * 100 ) + 200 + listMax * 50 + 400
+      : ( ( ranges.length - 1 ) * 100 ) + 400;
+
+    setTimeout( () => this.activeTransitions--, this.durations[ type ] ); 
+
+  }
+
+  title( show ) {
+
+    this.activeTransitions++;
+
+    const title = this.game.dom.texts.title;
+
+    if ( title.querySelector( 'span i' ) === null )
+      title.querySelectorAll( 'span' ).forEach( span => this.splitLetters( span ) );
+
+    const letters = title.querySelectorAll( 'i' );
+
+    this.flipLetters( 'title', letters, show );
+
+    title.style.opacity = 1;
+
+    const note = this.game.dom.texts.note;
+
+    this.tweens.title[ letters.length ] = new Tween( {
+      target: note.style,
+      easing: Easing.Sine.InOut(),
+      duration: show ? 800 : 400,
+      yoyo: show ? true : null,
+      from: { opacity: show ? 0 : ( parseFloat( getComputedStyle( note ).opacity ) ) },
+      to: { opacity: show ? 1 : 0 },
+    } );
+
+    setTimeout( () => this.activeTransitions--, this.durations.title );
+
+  }
+
+  timer( show ) {
+
+    this.activeTransitions++;
+
+    const timer = this.game.dom.texts.timer;
+
+    timer.style.opacity = 0;
+    this.game.timer.convert();
+    this.game.timer.setText();
+
+    this.splitLetters( timer );
+    const letters = timer.querySelectorAll( 'i' );
+    this.flipLetters( 'timer', letters, show );
+
+    timer.style.opacity = 1;
+
+    setTimeout( () => this.activeTransitions--, this.durations.timer );
+
+  }
+
+  splitLetters( element ) {
+
+    const text = element.innerHTML;
+
+    element.innerHTML = '';
+
+    text.split( '' ).forEach( letter => {
+
+      const i = document.createElement( 'i' );
+
+      i.innerHTML = letter;
+
+      element.appendChild( i );
+
+    } );
+
+  }
+
+  flipLetters( type, letters, show ) {
+
+    try { this.tweens[ type ].forEach( tween => tween.stop() ); } catch(e) {}
+    letters.forEach( ( letter, index ) => {
+
+      letter.style.opacity = show ? 0 : 1;
+
+      this.tweens[ type ][ index ] = new Tween( {
+        easing: Easing.Sine.Out(),
+        duration: show ? 800 : 400,
+        delay: index * 50,
+        onUpdate: tween => {
+
+          const rotation = show ? ( 1 - tween.value ) * -80 : tween.value * 80;
+
+          letter.style.transform = `rotate3d(0, 1, 0, ${rotation}deg)`;
+          letter.style.opacity = show ? tween.value : ( 1 - tween.value );
+
+        },
+      } );
+
+    } );
+
+    this.durations[ type ] = ( letters.length - 1 ) * 50 + ( show ? 800 : 400 );
+
+  }
+
+}
+
+class Timer extends Animation {
+
+  constructor( game ) {
+
+    super( false );
+
+    this.game = game;
+    this.reset();
+    
+  }
+
+  start( continueGame ) {
+
+    this.startTime = continueGame ? ( Date.now() - this.deltaTime ) : Date.now();
+    this.deltaTime = 0;
+    this.converted = this.convert();
+
+    super.start();
+
+  }
+
+  reset() {
+
+    this.startTime = 0;
+    this.currentTime = 0;
+    this.deltaTime = 0;
+    this.converted = '0:00';
+
+  }
+
+  stop() {
+
+    this.currentTime = Date.now();
+    this.deltaTime = this.currentTime - this.startTime;
+    this.convert();
+
+    super.stop();
+
+    return { time: this.converted, millis: this.deltaTime };
+
+  }
+
+  update() {
+
+    const old = this.converted;
+
+    this.currentTime = Date.now();
+    this.deltaTime = this.currentTime - this.startTime;
+    this.convert();
+
+    if ( this.converted != old ) {
+
+      localStorage.setItem( 'theCube_time', this.deltaTime );
+      this.setText();
+
+    }
+
+  }
+
+  convert() {
+
+    const seconds = parseInt( ( this.deltaTime / 1000 ) % 60 );
+    const minutes = parseInt( ( this.deltaTime / ( 1000 * 60 ) ) );
+
+    this.converted = minutes + ':' + ( seconds < 10 ? '0' : '' ) + seconds;
+
+  }
+
+  setText() {
+
+    this.game.dom.texts.timer.innerHTML = this.converted;
+
+  }
+
+}
+
+const RangeHTML = [
+
+  '<div class="range">',
+    '<div class="range__label"></div>',
+    '<div class="range__track">',
+      '<div class="range__track-line"></div>',
+      '<div class="range__handle"><div></div></div>',
+    '</div>',
+    '<div class="range__list"></div>',
+  '</div>',
+
+].join( '\n' );
+
+document.querySelectorAll( 'range' ).forEach( el => {
+
+  const temp = document.createElement( 'div' );
+  temp.innerHTML = RangeHTML;
+
+  const range = temp.querySelector( '.range' );
+  const rangeLabel = range.querySelector( '.range__label' );
+  const rangeList = range.querySelector( '.range__list' );
+
+  range.setAttribute( 'name', el.getAttribute( 'name' ) );
+  rangeLabel.innerHTML = el.getAttribute( 'title' );
+
+  if ( el.hasAttribute( 'color' ) ) {
+
+    range.classList.add( 'range--type-color' );
+    range.classList.add( 'range--color-' + el.getAttribute( 'name' ) );
+
+  }
+
+  if ( el.hasAttribute( 'list' ) ) {
+
+    el.getAttribute( 'list' ).split( ',' ).forEach( listItemText => {
+
+      const listItem = document.createElement( 'div' );
+      listItem.innerHTML = listItemText;
+      rangeList.appendChild( listItem );
+
+    } );
+
+  }
+
+  el.parentNode.replaceChild( range, el );
+
+} );
+
+class Range {
+
+  constructor( name, options ) {
+
+    options = Object.assign( {
+      range: [ 0, 1 ],
+      value: 0,
+      step: 0,
+      onUpdate: () => {},
+      onComplete: () => {},
+    }, options || {} );
+
+    this.element = document.querySelector( '.range[name="' + name + '"]' );
+    this.track = this.element.querySelector( '.range__track' );
+    this.handle = this.element.querySelector( '.range__handle' );
+    this.list = [].slice.call( this.element.querySelectorAll( '.range__list div' ) );
+
+    this.value = options.value;
+    this.min = options.range[0];
+    this.max = options.range[1];
+    this.step = options.step;
+
+    this.onUpdate = options.onUpdate;
+    this.onComplete = options.onComplete;
+
+    this.setValue( this.value );
+
+    this.initDraggable();
+
+  }
+
+  setValue( value ) {
+
+    this.value = this.round( this.limitValue( value ) );
+    this.setHandlePosition();
+
+  }
+
+  initDraggable() {
+
+    let current;
+
+    this.draggable = new Draggable( this.handle, { calcDelta: true } );
+
+    this.draggable.onDragStart = position => {
+
+      current = this.positionFromValue( this.value );
+      this.handle.style.left = current + 'px';
+
+    };
+
+    this.draggable.onDragMove = position => {
+
+      current = this.limitPosition( current + position.delta.x );
+      this.value = this.round( this.valueFromPosition( current ) );
+      this.setHandlePosition();
+      
+      this.onUpdate( this.value );
+
+    };
+
+    this.draggable.onDragEnd = position => {
+
+      this.onComplete( this.value );
+
+    };
+
+  }
+
+  round( value ) {
+
+    if ( this.step < 1 ) return value;
+
+    return Math.round( ( value - this.min ) / this.step ) * this.step + this.min;
+
+  }
+
+  limitValue( value ) {
+
+    const max = Math.max( this.max, this.min );
+    const min = Math.min( this.max, this.min );
+
+    return Math.min( Math.max( value, min ), max );
+
+  }
+
+  limitPosition( position ) {
+
+    return Math.min( Math.max( position, 0 ), this.track.offsetWidth );
+
+  }
+
+  percentsFromValue( value ) {
+
+    return ( value - this.min ) / ( this.max - this.min );
+
+  }
+
+  valueFromPosition( position ) {
+
+    return this.min + ( this.max - this.min ) * ( position / this.track.offsetWidth );
+
+  }
+
+  positionFromValue( value ) {
+
+    return this.percentsFromValue( value ) * this.track.offsetWidth;
+
+  }
+
+  setHandlePosition() {
+
+    this.handle.style.left = this.percentsFromValue( this.value ) * 100 + '%';
+
+  }
+
+}
+
+class Preferences {
+
+  constructor( game ) {
+
+    this.game = game;
+
+  }
+
+  init() {
+
+    this.ranges = {
+
+      size: new Range( 'size', {
+        value: this.game.cube.size,
+        range: [ 2, 5 ],
+        step: 1,
+        onUpdate: value => {
+
+          this.game.cube.size = value;
+
+          this.game.preferences.ranges.scramble.list.forEach( ( item, i ) => {
+
+            item.innerHTML = this.game.scrambler.scrambleLength[ this.game.cube.size ][ i ];
+
+          } );
+
+        },
+        onComplete: () => this.game.storage.savePreferences(),
+      } ),
+
+      flip: new Range( 'flip', {
+        value: this.game.controls.flipConfig,
+        range: [ 0, 2 ],
+        step: 1,
+        onUpdate: value => {
+
+          this.game.controls.flipConfig = value;
+
+        },
+        onComplete: () => this.game.storage.savePreferences(),
+      } ),
+
+      scramble: new Range( 'scramble', {
+        value: this.game.scrambler.dificulty,
+        range: [ 0, 2 ],
+        step: 1,
+        onUpdate: value => {
+
+          this.game.scrambler.dificulty = value;
+
+        },
+        onComplete: () => this.game.storage.savePreferences()
+      } ),
+
+      fov: new Range( 'fov', {
+        value: this.game.world.fov,
+        range: [ 2, 45 ],
+        onUpdate: value => {
+
+          this.game.world.fov = value;
+          this.game.world.resize();
+
+        },
+        onComplete: () => this.game.storage.savePreferences()
+      } ),
+
+      theme: new Range( 'theme', {
+        value: { cube: 0, erno: 1, dust: 2, camo: 3, rain: 4 }[ this.game.themes.theme ],
+        range: [ 0, 4 ],
+        step: 1,
+        onUpdate: value => {
+
+          const theme = [ 'cube', 'erno', 'dust', 'camo', 'rain' ][ value ];
+          this.game.themes.setTheme( theme );
+
+        },
+        onComplete: () => this.game.storage.savePreferences()
+      } ),
+
+      hue: new Range( 'hue', {
+        value: 0,
+        range: [ 0, 360 ],
+        onUpdate: value => this.game.themeEditor.updateHSL(),
+        onComplete: () => this.game.storage.savePreferences(),
+      } ),
+
+      saturation: new Range( 'saturation', {
+        value: 100,
+        range: [ 0, 100 ],
+        onUpdate: value => this.game.themeEditor.updateHSL(),
+        onComplete: () => this.game.storage.savePreferences(),
+      } ),
+
+      lightness: new Range( 'lightness', {
+        value: 50,
+        range: [ 0, 100 ],
+        onUpdate: value => this.game.themeEditor.updateHSL(),
+        onComplete: () => this.game.storage.savePreferences(),
+      } ),
+
+    };
+
+    this.ranges.scramble.list.forEach( ( item, i ) => {
+
+      item.innerHTML = this.game.scrambler.scrambleLength[ this.game.cube.size ][ i ];
+
+    } );
+    
+  }
+
+}
+
+class Confetti {
+
+  constructor( game ) {
+
+    this.game = game;
+    this.started = 0;
+
+    this.options = {
+      speed: { min: 0.0011, max: 0.0022 },
+      revolution: { min: 0.01, max: 0.05 },
+      size: { min: 0.1, max: 0.15 },
+      colors: [ 0x41aac8, 0x82ca38, 0xffef48, 0xef3923, 0xff8c0a ],
+    };
+
+    this.geometry = new THREE.PlaneGeometry( 1, 1 );
+    this.material = new THREE.MeshLambertMaterial( { side: THREE.DoubleSide } );
+
+    this.holders = [
+      new ConfettiStage( this.game, this, 1, 20 ),
+      new ConfettiStage( this.game, this, -1, 30 ),
+    ];
+
+  }
+
+  start() {
+
+    if ( this.started > 0 ) return;
+
+    this.holders.forEach( holder => {
+
+      this.game.world.scene.add( holder.holder );
+      holder.start();
+      this.started ++;
+
+    } );
+
+  }
+
+  stop() {
+
+    if ( this.started == 0 ) return;
+
+    this.holders.forEach( holder => {
+
+      holder.stop( () => {
+
+        this.game.world.scene.remove( holder.holder );
+        this.started --;
+
+      } );
+
+    } );
+
+  }
+
+  updateColors( colors ) {
+
+    this.holders.forEach( holder => {
+
+      holder.options.colors.forEach( ( color, index ) => {
+
+        holder.options.colors[ index ] = colors[ [ 'D', 'F', 'R', 'B', 'L' ][ index ] ];
+
+      } );
+
+    } );
+
+  }
+
+}
+
+class ConfettiStage extends Animation {
+
+  constructor( game, parent, distance, count ) {
+
+    super( false );
+
+    this.game = game;
+    this.parent = parent;
+
+    this.distanceFromCube = distance;
+
+    this.count = count;
+    this.particles = [];
+
+    this.holder = new THREE.Object3D();
+    this.holder.rotation.copy( this.game.world.camera.rotation );
+
+    this.object = new THREE.Object3D();
+    this.holder.add( this.object );
+
+    this.resizeViewport = this.resizeViewport.bind( this );
+    this.game.world.onResize.push( this.resizeViewport );
+    this.resizeViewport();    
+
+    this.geometry = this.parent.geometry;
+    this.material = this.parent.material;
+
+    this.options = this.parent.options;
+
+    let i = this.count;
+    while ( i-- ) this.particles.push( new Particle( this ) );
+
+  }
+
+  start() {
+
+    this.time = performance.now();
+    this.playing = true;
+
+    let i = this.count;
+    while ( i-- ) this.particles[ i ].reset();
+
+    super.start();
+
+  }
+
+  stop( callback ) {
+
+    this.playing = false;
+    this.completed = 0;
+    this.callback = callback;
+
+  }
+
+  reset() {
+
+    super.stop();
+
+    this.callback();
+
+  }
+
+  update() {
+
+    const now = performance.now();
+    const delta = now - this.time;
+    this.time = now;
+
+    let i = this.count;
+
+    while ( i-- )
+      if ( ! this.particles[ i ].completed ) this.particles[ i ].update( delta );
+
+    if ( ! this.playing && this.completed == this.count ) this.reset();
+
+  }
+
+  resizeViewport() {
+
+    const fovRad = this.game.world.camera.fov * THREE.Math.DEG2RAD;
+
+    this.height = 2 * Math.tan( fovRad / 2 ) * ( this.game.world.camera.position.length() - this.distanceFromCube );
+    this.width = this.height * this.game.world.camera.aspect;
+
+    const scale = 1 / this.game.transition.data.cameraZoom;
+
+    this.width *= scale;
+    this.height *= scale;
+
+    this.object.position.z = this.distanceFromCube;
+    this.object.position.y = this.height / 2;
+
+  }
+  
+}
+
+class Particle {
+
+  constructor( confetti ) {
+
+    this.confetti = confetti;
+    this.options = this.confetti.options;
+
+    this.velocity = new THREE.Vector3();
+    this.force = new THREE.Vector3();
+
+    this.mesh = new THREE.Mesh( this.confetti.geometry, this.confetti.material.clone() );
+    this.confetti.object.add( this.mesh );
+
+    this.size = THREE.Math.randFloat( this.options.size.min, this.options.size.max );
+    this.mesh.scale.set( this.size, this.size, this.size );
+
+    return this;
+
+  }
+
+  reset( randomHeight = true ) {
+
+    this.completed = false;
+
+    this.color = new THREE.Color( this.options.colors[ Math.floor( Math.random() * this.options.colors.length ) ] );
+    this.mesh.material.color.set( this.color );
+
+    this.speed = THREE.Math.randFloat( this.options.speed.min, this.options.speed.max ) * - 1;
+    this.mesh.position.x = THREE.Math.randFloat( - this.confetti.width / 2, this.confetti.width / 2 );
+    this.mesh.position.y = ( randomHeight )
+      ? THREE.Math.randFloat( this.size, this.confetti.height + this.size )
+      : this.size;
+
+    this.revolutionSpeed = THREE.Math.randFloat( this.options.revolution.min, this.options.revolution.max );
+    this.revolutionAxis = [ 'x', 'y', 'z' ][ Math.floor( Math.random() * 3 ) ];
+    this.mesh.rotation.set( Math.random() * Math.PI / 3, Math.random() * Math.PI / 3, Math.random() * Math.PI / 3 );
+
+  }
+
+  stop() {
+
+    this.completed = true;
+    this.confetti.completed ++;
+
+  }
+
+  update( delta ) {
+
+    this.mesh.position.y += this.speed * delta;
+    this.mesh.rotation[ this.revolutionAxis ] += this.revolutionSpeed;
+
+    if ( this.mesh.position.y < - this.confetti.height - this.size )
+      ( this.confetti.playing ) ? this.reset( false ) : this.stop();
+
+  }
+
+}
+
+class Scores {
+
+  constructor( game ) {
+
+    this.game = game;
+
+    this.data = {
+      2: {
+        scores: [],
+        solves: 0,
+        best: 0,
+        worst: 0,
+      },
+      3: {
+        scores: [],
+        solves: 0,
+        best: 0,
+        worst: 0,
+      },
+      4: {
+        scores: [],
+        solves: 0,
+        best: 0,
+        worst: 0,
+      },
+      5: {
+        scores: [],
+        solves: 0,
+        best: 0,
+        worst: 0,
+      }
+    };
+
+  }
+
+  addScore( time ) {
+
+    const data = this.data[ this.game.cube.sizeGenerated ];
+
+    data.scores.push( time );
+    data.solves++;
+
+    if ( data.scores.lenght > 100 ) data.scores.shift();
+
+    let bestTime = false;    
+
+    if ( time < data.best || data.best === 0 ) {
+
+      data.best = time;
+      bestTime = true;
+
+    }
+
+    if ( time > data.worst ) data.worst = time;
+
+    this.game.storage.saveScores();
+
+    return bestTime;
+
+  }
+
+  calcStats() {
+
+    const s = this.game.cube.sizeGenerated;
+    const data = this.data[ s ];
+
+    this.setStat( 'cube-size', `${s}<i>x</i>${s}<i>x</i>${s}` );
+    this.setStat( 'total-solves', data.solves );
+    this.setStat( 'best-time', this.convertTime( data.best ) );
+    this.setStat( 'worst-time', this.convertTime( data.worst ) );
+    this.setStat( 'average-5', this.getAverage( 5 ) );
+    this.setStat( 'average-12', this.getAverage( 12 ) );
+    this.setStat( 'average-25', this.getAverage( 25 ) );
+
+  }
+
+  setStat( name, value ) {
+
+    if ( value === 0 ) value = '-';
+
+    this.game.dom.stats.querySelector( `.stats[name="${name}"] b` ).innerHTML = value;
+
+  }
+
+  getAverage( count ) {
+
+    const data = this.data[ this.game.cube.sizeGenerated ];
+
+    if ( data.scores.length < count ) return 0;
+
+    return this.convertTime( data.scores.slice( -count ).reduce( ( a, b ) => a + b, 0 ) / count );
+
+  }
+
+  convertTime( time ) {
+
+    if ( time <= 0 ) return 0;
+
+    const seconds = parseInt( ( time / 1000 ) % 60 );
+    const minutes = parseInt( ( time / ( 1000 * 60 ) ) );
+
+    return minutes + ':' + ( seconds < 10 ? '0' : '' ) + seconds;
+
+  }
+
+}
+
+class Storage {
+
+  constructor( game ) {
+
+    this.game = game;
+
+    const userVersion = localStorage.getItem( 'theCube_version' );
+
+    if ( ! userVersion || userVersion !== window.gameVersion ) {
+
+      this.clearGame();
+      this.clearPreferences();
+      this.migrateScores();
+      localStorage.setItem( 'theCube_version', window.gameVersion );
+
+    }
+
+  }
+
+  init() {
+
+    this.loadPreferences();
+    this.loadScores();
+
+  }
+
+  loadGame() {
+
+    try {
+
+      const gameInProgress = localStorage.getItem( 'theCube_playing' ) === 'true';
+
+      if ( ! gameInProgress ) throw new Error();
+
+      const gameCubeData = JSON.parse( localStorage.getItem( 'theCube_savedState' ) );
+      const gameTime = parseInt( localStorage.getItem( 'theCube_time' ) );
+
+      if ( ! gameCubeData || gameTime === null ) throw new Error();
+      if ( gameCubeData.size !== this.game.cube.sizeGenerated ) throw new Error();
+
+      this.game.cube.loadFromData( gameCubeData );
+
+      this.game.timer.deltaTime = gameTime;
+
+      this.game.saved = true;
+
+    } catch( e ) {
+
+      this.game.saved = false;
+
+    }
+
+  }
+
+  saveGame() {
+
+    const gameInProgress = true;
+    const gameCubeData = { names: [], positions: [], rotations: [] };
+    const gameTime = this.game.timer.deltaTime;
+
+    gameCubeData.size = this.game.cube.sizeGenerated;
+
+    this.game.cube.pieces.forEach( piece => {
+
+      gameCubeData.names.push( piece.name );
+      gameCubeData.positions.push( piece.position );
+      gameCubeData.rotations.push( piece.rotation.toVector3() );
+
+    } );
+
+    localStorage.setItem( 'theCube_playing', gameInProgress );
+    localStorage.setItem( 'theCube_savedState', JSON.stringify( gameCubeData ) );
+    localStorage.setItem( 'theCube_time', gameTime );
+
+  }
+
+  clearGame() {
+
+    localStorage.removeItem( 'theCube_playing' );
+    localStorage.removeItem( 'theCube_savedState' );
+    localStorage.removeItem( 'theCube_time' );
+
+  }
+
+  loadScores() {
+
+    try {
+
+      const scoresData = JSON.parse( localStorage.getItem( 'theCube_scores' ) );
+
+      if ( ! scoresData ) throw new Error();
+
+      this.game.scores.data = scoresData;
+
+    } catch( e ) {}
+
+  }
+
+  saveScores() {
+
+    const scoresData = this.game.scores.data;
+
+    localStorage.setItem( 'theCube_scores', JSON.stringify( scoresData ) );
+
+  }
+
+  clearScores() {
+
+    localStorage.removeItem( 'theCube_scores' );
+
+  }
+
+  migrateScores() {
+
+    try {
+
+      const scoresData = JSON.parse( localStorage.getItem( 'theCube_scoresData' ) );
+      const scoresBest = parseInt( localStorage.getItem( 'theCube_scoresBest' ) );
+      const scoresWorst = parseInt( localStorage.getItem( 'theCube_scoresWorst' ) );
+      const scoresSolves = parseInt( localStorage.getItem( 'theCube_scoresSolves' ) );
+
+      if ( ! scoresData || ! scoresBest || ! scoresSolves || ! scoresWorst ) return false;
+
+      this.game.scores.data[ 3 ].scores = scoresData;
+      this.game.scores.data[ 3 ].best = scoresBest;
+      this.game.scores.data[ 3 ].solves = scoresSolves;
+      this.game.scores.data[ 3 ].worst = scoresWorst;
+
+      localStorage.removeItem( 'theCube_scoresData' );
+      localStorage.removeItem( 'theCube_scoresBest' );
+      localStorage.removeItem( 'theCube_scoresWorst' );
+      localStorage.removeItem( 'theCube_scoresSolves' );
+
+    } catch( e ) {}
+
+  }
+
+  loadPreferences() {
+
+    try {
+
+      const preferences = JSON.parse( localStorage.getItem( 'theCube_preferences' ) );
+
+      if ( ! preferences ) throw new Error();
+
+      this.game.cube.size = parseInt( preferences.cubeSize );
+      this.game.controls.flipConfig = parseInt( preferences.flipConfig );
+      this.game.scrambler.dificulty = parseInt( preferences.dificulty );
+
+      this.game.world.fov = parseFloat( preferences.fov );
+      this.game.world.resize();
+
+      this.game.themes.colors = preferences.colors;
+      this.game.themes.setTheme( preferences.theme );
+
+      return true;
+
+    } catch (e) {
+
+      this.game.cube.size = 3;
+      this.game.controls.flipConfig = 0;
+      this.game.scrambler.dificulty = 1;
+
+      this.game.world.fov = 10;
+      this.game.world.resize();
+
+      this.game.themes.setTheme( 'cube' );
+
+      this.savePreferences();
+
+      return false;
+
+    }
+
+  }
+
+  savePreferences() {
+
+    const preferences = {
+      cubeSize: this.game.cube.size,
+      flipConfig: this.game.controls.flipConfig,
+      dificulty: this.game.scrambler.dificulty,
+      fov: this.game.world.fov,
+      theme: this.game.themes.theme,
+      colors: this.game.themes.colors,
+    };
+
+    localStorage.setItem( 'theCube_preferences', JSON.stringify( preferences ) );
+
+  }
+
+  clearPreferences() {
+
+    localStorage.removeItem( 'theCube_preferences' );
+
+  }
+
+}
+
+class Themes {
+
+  constructor( game ) {
+
+    this.game = game;
+    this.theme = null;
+
+    this.defaults = {
+      cube: {
+        U: 0xfff7ff, // white
+        D: 0xffef48, // yellow
+        F: 0xef3923, // red
+        R: 0x41aac8, // blue
+        B: 0xff8c0a, // orange
+        L: 0x82ca38, // green
+        P: 0x08101a, // piece
+        G: 0xd1d5db, // background
+      },
+      erno: {
+        U: 0xffffff,
+        D: 0xffd500,
+        F: 0xc41e3a,
+        R: 0x0051ba,
+        B: 0xff5800,
+        L: 0x009e60,
+        P: 0x08101a,
+        G: 0x8abdff,
+      },
+      dust: {
+        U: 0xfff6eb,
+        D: 0xe7c48d,
+        F: 0x8f253e,
+        R: 0x607e69,
+        B: 0xbe6f62,
+        L: 0x849f5d,
+        P: 0x08101a,
+        G: 0xE7C48D,
+      },
+      camo: {
+        U: 0xfff6eb,
+        D: 0xbfb672,
+        F: 0x37241c,
+        R: 0x718456,
+        B: 0x805831,
+        L: 0x37431d,
+        P: 0x08101a,
+        G: 0xBFB672,
+      },
+      rain: {
+        U: 0xfafaff,
+        D: 0xedb92d,
+        F: 0xce2135,
+        R: 0x449a89,
+        B: 0xec582f,
+        L: 0xa3a947,
+        P: 0x08101a,
+        G: 0x87b9ac,
+      },
+    };
+
+    this.colors = JSON.parse( JSON.stringify( this.defaults ) );
+
+  }
+
+  getColors() {
+
+    return this.colors[ this.theme ];
+
+  }
+
+  setTheme( theme = false, force = false ) {
+
+    if ( theme === this.theme && force === false ) return;
+    if ( theme !== false ) this.theme = theme;
+
+    const colors = this.getColors();
+
+    this.game.dom.prefs.querySelectorAll( '.range__handle div' ).forEach( range => {
+
+      range.style.background = '#' + colors.R.toString(16).padStart(6, '0');
+
+    } );
+
+    this.game.cube.updateColors( colors );
+
+    this.game.confetti.updateColors( colors );
+
+    this.game.dom.back.style.background = '#' + colors.G.toString(16).padStart(6, '0');
+
+  }
+
+}
+
+class ThemeEditor {
+
+  constructor( game ) {
+
+    this.game = game;
+
+    this.editColor = 'R';
+
+    this.getPieceColor = this.getPieceColor.bind( this );
+
+  }
+
+  colorFromHSL( h, s, l ) {
+
+    h = Math.round( h );
+    s = Math.round( s );
+    l = Math.round( l );
+
+    return new THREE.Color( `hsl(${h}, ${s}%, ${l}%)` );
+
+  }
+
+  setHSL( color = null, animate = false ) {
+
+    this.editColor = ( color === null) ? 'R' : color;
+
+    const hsl = new THREE.Color( this.game.themes.getColors()[ this.editColor ] );
+
+    const { h, s, l } = hsl.getHSL( hsl );
+    const { hue, saturation, lightness } = this.game.preferences.ranges;
+
+    if ( animate ) {
+
+      const ho = hue.value / 360;
+      const so = saturation.value / 100;
+      const lo = lightness.value / 100;
+
+      const colorOld = this.colorFromHSL( hue.value, saturation.value, lightness.value );
+
+      if ( this.tweenHSL ) this.tweenHSL.stop();
+
+      this.tweenHSL = new Tween( {
+        duration: 200,
+        easing: Easing.Sine.Out(),
+        onUpdate: tween => {
+
+          hue.setValue( ( ho + ( h - ho ) * tween.value ) * 360 );
+          saturation.setValue( ( so + ( s - so ) * tween.value ) * 100 );
+          lightness.setValue( ( lo + ( l - lo ) * tween.value ) * 100 );
+
+          const colorTween = colorOld.clone().lerp( hsl, tween.value );
+
+          const colorTweenStyle = colorTween.getStyle();
+          const colorTweenHex = colorTween.getHSL( colorTween );
+
+          hue.handle.style.color = colorTweenStyle;
+          saturation.handle.style.color = colorTweenStyle;
+          lightness.handle.style.color = colorTweenStyle;
+
+          saturation.track.style.color =
+            this.colorFromHSL( colorTweenHex.h * 360, 100, 50 ).getStyle();
+          lightness.track.style.color =
+            this.colorFromHSL( colorTweenHex.h * 360, colorTweenHex.s * 100, 50 ).getStyle();
+
+          this.game.dom.theme.style.display = 'none';
+          this.game.dom.theme.offsetHeight;
+          this.game.dom.theme.style.display = '';
+
+        },
+        onComplete: () => {
+
+          this.updateHSL();
+          this.game.storage.savePreferences();
+
+        },
+      } );
+
+    } else {
+
+      hue.setValue( h * 360 );
+      saturation.setValue( s * 100 );
+      lightness.setValue( l * 100 );
+
+      this.updateHSL();
+      this.game.storage.savePreferences();
+
+    }
+
+  }
+
+  updateHSL() {
+
+    const { hue, saturation, lightness } = this.game.preferences.ranges;
+
+    const h = hue.value;
+    const s = saturation.value;
+    const l = lightness.value;
+
+    const color = this.colorFromHSL( h, s, l ).getStyle();
+
+    hue.handle.style.color = color;
+    saturation.handle.style.color = color;
+    lightness.handle.style.color = color;
+
+    saturation.track.style.color = this.colorFromHSL( h, 100, 50 ).getStyle();
+    lightness.track.style.color = this.colorFromHSL( h, s, 50 ).getStyle();
+
+    this.game.dom.theme.style.display = 'none';
+    this.game.dom.theme.offsetHeight;
+    this.game.dom.theme.style.display = '';
+
+    const theme = this.game.themes.theme;
+
+    this.game.themes.colors[ theme ][ this.editColor ] = this.colorFromHSL( h, s, l ).getHex();
+    this.game.themes.setTheme();
+
+  }
+
+  colorPicker( enable ) {
+
+    if ( enable ) {
+
+      this.game.dom.game.addEventListener( 'click', this.getPieceColor, false );
+
+    } else {
+
+      this.game.dom.game.removeEventListener( 'click', this.getPieceColor, false );
+
+    }
+
+  }
+
+  getPieceColor( event ) {
+
+    const clickEvent = event.touches
+      ? ( event.touches[ 0 ] || event.changedTouches[ 0 ] )
+      : event;
+
+    const clickPosition = new THREE.Vector2( clickEvent.pageX, clickEvent.pageY );
+
+    let edgeIntersect = this.game.controls.getIntersect( clickPosition, this.game.cube.edges, true );
+    let pieceIntersect = this.game.controls.getIntersect( clickPosition, this.game.cube.cubes, true );
+
+    if ( edgeIntersect !== false ) {
+
+      const edge = edgeIntersect.object;
+
+      const position = edge.parent
+        .localToWorld( edge.position.clone() )
+        .sub( this.game.cube.object.position )
+        .sub( this.game.cube.animator.position );
+
+      const mainAxis = this.game.controls.getMainAxis( position );
+      if ( position.multiplyScalar( 2 ).round()[ mainAxis ] < 1 ) edgeIntersect = false;
+
+    }
+
+    const name = edgeIntersect ? edgeIntersect.object.name : pieceIntersect ? 'P' : 'G';
+
+    this.setHSL( name, true );
+
+  }
+
+  resetTheme() {
+
+    this.game.themes.colors[ this.game.themes.theme ] =
+      JSON.parse( JSON.stringify( this.game.themes.defaults[ this.game.themes.theme ] ) );
+
+    this.game.themes.setTheme();
+
+    this.setHSL( this.editColor, true );
+
+  }
+
+}
+
+const States = {
+  3: {
+    checkerboard: {
+      names: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26 ],
+      positions: [
+        { "x": 1/3, "y": -1/3, "z": 1/3 },
+        { "x": -1/3, "y": 1/3, "z": 0 },
+        { "x": 1/3, "y": -1/3, "z": -1/3 },
+        { "x": -1/3, "y": 0, "z": -1/3 },
+        { "x": 1/3, "y": 0, "z": 0 },
+        { "x": -1/3, "y": 0, "z": 1/3 },
+        { "x": 1/3, "y": 1/3, "z": 1/3 },
+        { "x": -1/3, "y": -1/3, "z": 0 },
+        { "x": 1/3, "y": 1/3, "z": -1/3 },
+        { "x": 0, "y": 1/3, "z": -1/3 },
+        { "x": 0, "y": -1/3, "z": 0 },
+        { "x": 0, "y": 1/3, "z": 1/3 },
+        { "x": 0, "y": 0, "z": 1/3 },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": 0, "y": 0, "z": -1/3 },
+        { "x": 0, "y": -1/3, "z": -1/3 },
+        { "x": 0, "y": 1/3, "z": 0 },
+        { "x": 0, "y": -1/3, "z": 1/3 },
+        { "x": -1/3, "y": -1/3, "z": 1/3 },
+        { "x": 1/3, "y": 1/3, "z": 0 },
+        { "x": -1/3, "y": -1/3, "z": -1/3 },
+        { "x": 1/3, "y": 0, "z": -1/3 },
+        { "x": -1/3, "y": 0, "z": 0 },
+        { "x": 1/3, "y": 0, "z": 1/3 },
+        { "x": -1/3, "y": 1/3, "z": 1/3 },
+        { "x": 1/3, "y": -1/3, "z": 0 },
+        { "x": -1/3, "y": 1/3, "z": -1/3 }
+      ],
+      rotations: [
+        { "x": -Math.PI, "y": 0, "z": Math.PI, },
+        { "x": Math.PI, "y": 0, "z": 0 },
+        { "x": -Math.PI, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": 0, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": -Math.PI, "y": 0, "z": Math.PI },
+        { "x": Math.PI, "y": 0, "z": 0 },
+        { "x": -Math.PI, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": 0, "y": 0, "z": Math.PI },
+        { "x": -Math.PI, "y": 0, "z": 0 },
+        { "x": Math.PI, "y": 0, "z": Math.PI },
+        { "x": Math.PI, "y": 0, "z": 0 },
+        { "x": 0, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": 0, "y": 0, "z": Math.PI },
+        { "x": Math.PI, "y": 0, "z": Math.PI },
+        { "x": -Math.PI, "y": 0, "z": 0 },
+        { "x": Math.PI, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": 0, "y": 0, "z": Math.PI },
+        { "x": 0, "y": 0, "z": 0 },
+        { "x": Math.PI, "y": 0, "z": Math.PI },
+        { "x": -Math.PI, "y": 0, "z": 0 },
+        { "x": Math.PI, "y": 0, "z": Math.PI }
+      ],
+      size: 3,
+    },
+  }
+};
+
+class IconsConverter {
+
+  constructor( options ) {
+
+    options = Object.assign( {
+      tagName: 'icon',
+      className: 'icon',
+      styles: false,
+      icons: {},
+      observe: false,
+      convert: false,
+    }, options || {} );
+
+    this.tagName = options.tagName;
+    this.className = options.className;
+    this.icons = options.icons;
+
+    this.svgTag = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+    this.svgTag.setAttribute( 'class', this.className );
+
+    if ( options.styles ) this.addStyles();
+    if ( options.convert ) this.convertAllIcons();
+
+    if ( options.observe ) {
+
+      const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+      this.observer = new MutationObserver( mutations => { this.convertAllIcons(); } );
+      this.observer.observe( document.documentElement, { childList: true, subtree: true } );
+
+    }
+
+    return this;
+
+  }
+
+  convertAllIcons() {
+
+    document.querySelectorAll( this.tagName ).forEach( icon => { this.convertIcon( icon ); } );
+
+  }
+
+  convertIcon( icon ) {
+
+    const svgData = this.icons[ icon.attributes[0].localName ];
+
+    if ( typeof svgData === 'undefined' ) return;
+
+    const svg = this.svgTag.cloneNode( true );
+    const viewBox = svgData.viewbox.split( ' ' );
+
+    svg.setAttributeNS( null, 'viewBox', svgData.viewbox );
+    svg.style.width = viewBox[2] / viewBox[3] + 'em';
+    svg.style.height = '1em';
+    svg.innerHTML = svgData.content;
+
+    icon.parentNode.replaceChild( svg, icon );
+
+  }
+
+  addStyles() {
+
+    const style = document.createElement( 'style' );
+    style.innerHTML = `.${this.className} { display: inline-block; font-size: inherit; overflow: visible; vertical-align: -0.125em; preserveAspectRatio: none; }`;
+    document.head.appendChild( style );
+
+  }
+
+}
+
+const Icons = new IconsConverter( {
+
+  icons: {
+    settings: {
+      viewbox: '0 0 512 512',
+      content: '<path fill="currentColor" d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z" />',
+    },
+    back: {
+      viewbox: '0 0 512 512',
+      content: '<path transform="translate(512, 0) scale(-1,1)" fill="currentColor" d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z" />',
+    },
+    trophy: {
+      viewbox: '0 0 576 512',
+      content: '<path fill="currentColor" d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 66.5 77.9 131.7 171.9 142.4C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6C498.4 275.6 576 210.3 576 144V88c0-13.3-10.7-24-24-24zM64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-47.5-16.4-77-49.9-77-70.2zm448 0c0 20.2-29.4 53.8-77 70.2 7-25 11.8-53.6 12.8-86.2H512v16zm-127.3 4.7l-39.6 38.6 9.4 54.6c1.7 9.8-8.7 17.2-17.4 12.6l-49-25.8-49 25.8c-8.8 4.6-19.1-2.9-17.4-12.6l9.4-54.6-39.6-38.6c-7.1-6.9-3.2-19 6.7-20.5l54.8-8 24.5-49.6c4.4-8.9 17.1-8.9 21.5 0l24.5 49.6 54.8 8c9.6 1.5 13.5 13.6 6.4 20.5z" />',
+    },
+    cancel: {
+      viewbox: '0 0 352 512',
+      content: '<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" />',
+    },
+    theme: {
+      viewbox: '0 0 512 512',
+      content: '<path fill="currentColor" d="M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"/>',
+    },
+    reset: {
+      viewbox: '0 0 512 512',
+      content: '<path fill="currentColor" d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z" />',
+    },
+    trash: {
+      viewbox: '0 0 448 512',
+      content: '<path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z" />',
+    },
+  },
+
+  convert: true,
+
+} );
+
+const STATE = {
+  Menu: 0,
+  Playing: 1,
+  Complete: 2,
+  Stats: 3,
+  Prefs: 4,
+  Theme: 5,
+};
+
+const BUTTONS = {
+  Menu: [ 'stats', 'prefs' ],
+  Playing: [ 'back' ],
+  Complete: [],
+  Stats: [],
+  Prefs: [ 'back', 'theme' ],
+  Theme: [ 'back', 'reset' ],
+  None: [],
+};
+
+const SHOW = true;
+const HIDE = false;
+
+class Game {
+
+  constructor() {
+
+    this.dom = {
+      ui: document.querySelector( '.ui' ),
+      game: document.querySelector( '.ui__game' ),
+      back: document.querySelector( '.ui__background' ),
+      prefs: document.querySelector( '.ui__prefs' ),
+      theme: document.querySelector( '.ui__theme' ),
+      stats: document.querySelector( '.ui__stats' ),
+      texts: {
+        title: document.querySelector( '.text--title' ),
+        note: document.querySelector( '.text--note' ),
+        timer: document.querySelector( '.text--timer' ),
+        complete: document.querySelector( '.text--complete' ),
+        best: document.querySelector( '.text--best-time' ),
+        theme: document.querySelector( '.text--theme' ),
+      },
+      buttons: {
+        prefs: document.querySelector( '.btn--prefs' ),
+        back: document.querySelector( '.btn--back' ),
+        stats: document.querySelector( '.btn--stats' ),
+        reset: document.querySelector( '.btn--reset' ),
+        theme: document.querySelector( '.btn--theme' ),
+      },
+    };
+
+    this.world = new World( this );
+    this.cube = new Cube( this );
+    this.controls = new Controls( this );
+    this.scrambler = new Scrambler( this );
+    this.transition = new Transition( this );
+    this.timer = new Timer( this );
+    this.preferences = new Preferences( this );
+    this.scores = new Scores( this );
+    this.storage = new Storage( this );
+    this.confetti = new Confetti( this );
+    this.themes = new Themes( this );
+    this.themeEditor = new ThemeEditor( this );
+
+    this.initActions();
+
+    this.state = STATE.Menu;
+    this.newGame = false;
+    this.saved = false;
+
+    this.storage.init();
+    this.preferences.init();
+    this.cube.init();
+    this.transition.init();
+
+    this.storage.loadGame();
+    this.scores.calcStats();
+
+    setTimeout( () => {
+
+      this.transition.float();
+      this.transition.cube( SHOW );
+
+      setTimeout( () => this.transition.title( SHOW ), 700 );
+      setTimeout( () => this.transition.buttons( BUTTONS.Menu, BUTTONS.None ), 1000 );
+
+    }, 500 );
+
+  }
+
+  initActions() {
+
+    let tappedTwice = false;
+
+    this.dom.game.addEventListener( 'click', event => {
+
+      if ( this.transition.activeTransitions > 0 ) return;
+      if ( this.state === STATE.Playing ) return;
+
+      if ( this.state === STATE.Menu ) {
+
+        if ( ! tappedTwice ) {
+
+          tappedTwice = true;
+          setTimeout( () => tappedTwice = false, 300 );
+          return false;
+
+        }
+
+        this.game( SHOW );
+
+      } else if ( this.state === STATE.Complete ) {
+
+        this.complete( HIDE );
+
+      } else if ( this.state === STATE.Stats ) {
+
+        this.stats( HIDE );
+
+      } 
+
+    }, false );
+
+    this.controls.onMove = () => {
+
+      if ( this.newGame ) {
+        
+        this.timer.start( true );
+        this.newGame = false;
+
+      }
+
+    };
+
+    this.dom.buttons.back.onclick = event => {
+
+      if ( this.transition.activeTransitions > 0 ) return;
+
+      if ( this.state === STATE.Playing ) {
+
+        this.game( HIDE );
+
+      } else if ( this.state === STATE.Prefs ) {
+
+        this.prefs( HIDE );
+
+      } else if ( this.state === STATE.Theme ) {
+
+        this.theme( HIDE );
+
+      }
+
+    };
+
+    this.dom.buttons.reset.onclick = event => {
+
+      if ( this.state === STATE.Theme ) {
+
+        this.themeEditor.resetTheme();
+
+      }
+      
+    };
+
+    this.dom.buttons.prefs.onclick = event => this.prefs( SHOW );
+
+    this.dom.buttons.theme.onclick = event => this.theme( SHOW );
+
+    this.dom.buttons.stats.onclick = event => this.stats( SHOW );
+
+    this.controls.onSolved = () => this.complete( SHOW );
+
+  }
+
+  game( show ) {
+
+    if ( show ) {
+
+      if ( ! this.saved ) {
+
+        this.scrambler.scramble();
+        this.controls.scrambleCube();
+        this.newGame = true;
+
+      }
+
+      const duration = this.saved ? 0 :
+        this.scrambler.converted.length * ( this.controls.flipSpeeds[0] + 10 );
+
+      this.state = STATE.Playing;
+      this.saved = true;
+
+      this.transition.buttons( BUTTONS.None, BUTTONS.Menu );
+
+      this.transition.zoom( STATE.Playing, duration );
+      this.transition.title( HIDE );
+
+      setTimeout( () => {
+
+        this.transition.timer( SHOW );
+        this.transition.buttons( BUTTONS.Playing, BUTTONS.None );
+
+      }, this.transition.durations.zoom - 1000 );
+
+      setTimeout( () => {
+
+        this.controls.enable();
+        if ( ! this.newGame ) this.timer.start( true );
+
+      }, this.transition.durations.zoom );
+
+    } else {
+
+      this.state = STATE.Menu;
+
+      this.transition.buttons( BUTTONS.Menu, BUTTONS.Playing );
+
+      this.transition.zoom( STATE.Menu, 0 );
+
+      this.controls.disable();
+      if ( ! this.newGame ) this.timer.stop();
+      this.transition.timer( HIDE );
+
+      setTimeout( () => this.transition.title( SHOW ), this.transition.durations.zoom - 1000 );
+
+      this.playing = false;
+      this.controls.disable();
+
+    }
+
+  }
+
+  prefs( show ) {
+
+    if ( show ) {
+
+      if ( this.transition.activeTransitions > 0 ) return;
+
+      this.state = STATE.Prefs;
+
+      this.transition.buttons( BUTTONS.Prefs, BUTTONS.Menu );
+
+      this.transition.title( HIDE );
+      this.transition.cube( HIDE );
+
+      setTimeout( () => this.transition.preferences( SHOW ), 1000 );
+
+    } else {
+
+      this.cube.resize();
+
+      this.state = STATE.Menu;
+
+      this.transition.buttons( BUTTONS.Menu, BUTTONS.Prefs );
+
+      this.transition.preferences( HIDE );
+
+      setTimeout( () => this.transition.cube( SHOW ), 500 );
+      setTimeout( () => this.transition.title( SHOW ), 1200 );
+
+    }
+
+  }
+
+  theme( show ) {
+
+    this.themeEditor.colorPicker( show );
+    
+    if ( show ) {
+
+      if ( this.transition.activeTransitions > 0 ) return;
+
+      this.cube.loadFromData( States[ '3' ][ 'checkerboard' ] );
+
+      this.themeEditor.setHSL( null, false );
+
+      this.state = STATE.Theme;
+
+      this.transition.buttons( BUTTONS.Theme, BUTTONS.Prefs );
+
+      this.transition.preferences( HIDE );
+
+      setTimeout( () => this.transition.cube( SHOW, true ), 500 );
+      setTimeout( () => this.transition.theming( SHOW ), 1000 );
+
+    } else {
+
+      this.state = STATE.Prefs;
+
+      this.transition.buttons( BUTTONS.Prefs, BUTTONS.Theme );
+
+      this.transition.cube( HIDE, true );
+      this.transition.theming( HIDE );
+
+      setTimeout( () => this.transition.preferences( SHOW ), 1000 );
+      setTimeout( () => {
+
+        const gameCubeData = JSON.parse( localStorage.getItem( 'theCube_savedState' ) );
+
+        if ( !gameCubeData ) {
+
+          this.cube.resize( true );
+          return;
+
+        }
+
+        this.cube.loadFromData( gameCubeData );
+
+      }, 1500 );
+
+    }
+
+  }
+
+  stats( show ) {
+
+    if ( show ) {
+
+      if ( this.transition.activeTransitions > 0 ) return;
+
+      this.state = STATE.Stats;
+
+      this.transition.buttons( BUTTONS.Stats, BUTTONS.Menu );
+
+      this.transition.title( HIDE );
+      this.transition.cube( HIDE );
+
+      setTimeout( () => this.transition.stats( SHOW ), 1000 );
+
+    } else {
+
+      this.state = STATE.Menu;
+
+      this.transition.buttons( BUTTONS.Menu, BUTTONS.None );
+
+      this.transition.stats( HIDE );
+
+      setTimeout( () => this.transition.cube( SHOW ), 500 );
+      setTimeout( () => this.transition.title( SHOW ), 1200 );
+
+    }
+
+  }
+
+  complete( show ) {
+
+    if ( show ) {
+
+      this.transition.buttons( BUTTONS.Complete, BUTTONS.Playing );
+
+      this.state = STATE.Complete;
+      this.saved = false;
+
+      this.controls.disable();
+      this.timer.stop();
+      this.storage.clearGame();
+
+      this.bestTime = this.scores.addScore( this.timer.deltaTime );
+
+      this.transition.zoom( STATE.Menu, 0 );
+      this.transition.elevate( SHOW );
+
+      setTimeout( () => {
+
+        this.transition.complete( SHOW, this.bestTime );
+        this.confetti.start();
+
+      }, 1000 );
+
+    } else {
+
+      this.state = STATE.Stats;
+      this.saved = false;
+
+      this.transition.timer( HIDE );
+      this.transition.complete( HIDE, this.bestTime );
+      this.transition.cube( HIDE );
+      this.timer.reset();
+
+      setTimeout( () => {
+
+        this.cube.reset();
+        this.confetti.stop();
+
+        this.transition.stats( SHOW );
+        this.transition.elevate( 0 );
+
+      }, 1000 );
+
+      return false;
+
+    }
+
+  }
+
+}
+
+window.version = '0.99.2';
+window.game = new Game();
\ No newline at end of file
diff --git a/the-cube/src/style.sass b/the-cube/src/style.sass
new file mode 100644
index 0000000..1b321f2
--- /dev/null
+++ b/the-cube/src/style.sass
@@ -0,0 +1,359 @@
+@font-face
+  font-family: 'BungeeFont'
+  font-weight: normal
+  font-style: normal
+  src: url('data:font/truetype;charset=utf-8;base64,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') format('woff2'), url('data:font/truetype;charset=utf-8;base64,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') format('woff')
+
+=inset($position: absolute)
+  position: $position
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+
+*
+  &,
+  &:before,
+  &:after
+    -webkit-user-select: none
+    -moz-user-select: none
+    user-select: none
+    box-sizing: border-box
+    cursor: inherit
+    margin: 0
+    padding: 0
+    outline: none
+    font-size: inherit
+    font-family: inherit
+    font-weight: inherit
+    font-style: inherit
+    text-transform: uppercase
+
+  &:focus
+    outline: none
+
+html
+  -webkit-tap-highlight-color: transparent
+  -webkit-text-size-adjust: 100%
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  -ms-text-size-adjust: 100%
+  -webkit-text-size-adjust: 100%
+  overflow: hidden
+  height: 100%
+
+body
+  font-family: 'BungeeFont', sans-serif
+  font-weight: normal
+  font-style: normal
+  line-height: 1
+  cursor: default
+  overflow: hidden
+  height: 100%
+  font-size: 5rem
+
+.icon
+  display: inline-block
+  font-size: inherit
+  overflow: visible
+  vertical-align: -0.125em
+  preserveAspectRatio: none
+  
+.range
+  position: relative
+  width: 14em
+  z-index: 1
+  opacity: 0
+
+  &:not(:last-child)
+    margin-bottom: 2em
+
+  &__label
+    position: relative
+    font-size: 0.9em
+    line-height: 0.75em
+    padding-bottom: 0.5em
+    z-index: 2
+
+  &__track
+    position: relative
+    height: 1em
+    margin-left: 0.5em
+    margin-right: 0.5em
+    z-index: 3
+
+    &-line
+      position: absolute
+      background: rgba(#000, 0.2)
+      height: 2px
+      top: 50%
+      margin-top: -1px
+      left: -0.5em
+      right: -0.5em
+      transform-origin: left center
+
+  &__handle
+    position: absolute
+    width: 0
+    height: 0
+    top: 50%
+    left: 0
+    cursor: pointer
+    z-index: 1
+
+    div
+      transition: background 500ms ease
+      position: absolute
+      left: 0
+      top: 0
+      width: 0.9em
+      height: 0.9em
+      border-radius: 0.2em
+      margin-left: -0.45em
+      margin-top: -0.45em
+      background: #41aac8
+      border-bottom: 2px solid rgba(#000, 0.2)
+
+      .range.is-active &
+        transform: scale(1.25)
+
+    &:after
+      content: ''
+      position: absolute
+      left: 0
+      top: 0
+      width: 3em
+      height: 3em
+      margin-left: -1.5em
+      margin-top: -1.5em
+
+  &__list
+    display: flex
+    flex-flow: row nowrap
+    justify-content: space-between
+    position: relative
+    padding-top: 0.5em
+    font-size: 0.55em
+    color: rgba(#000, 0.5)
+    z-index: 1
+
+  &--type
+    &-color
+      &:not(:last-child)
+        margin-bottom: 1em
+
+      .range
+        &__list
+          display: none
+
+        &__handle
+          > div
+            background: currentColor !important
+
+        &__track
+          &-line
+            background: transparent
+
+            &:after
+              +inset
+              content: ''
+              opacity: 0.5
+
+  &--color
+    &-hue
+      .range
+        &__handle
+          color: red
+
+        &__track
+          color: red
+
+          &-line
+            &:after
+              background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)
+              
+
+    &-saturation
+      .range
+        &__handle
+          color: red
+
+        &__track
+          color: red
+
+          &-line
+            &:after
+              background: linear-gradient(to right, gray, currentColor)
+
+    &-lightness
+      .range
+        &__handle
+          color: red
+
+        &__track
+          color: red
+
+          &-line
+            &:after
+              background: linear-gradient(to right, black, currentColor, white)
+
+.stats
+  position: relative
+  width: 14em
+  z-index: 1
+  display: flex
+  justify-content: space-between
+  opacity: 0
+
+  &:not(:last-child)
+    margin-bottom: 1.5em
+
+  > i
+    display: block
+    color: rgba(#000, 0.5)
+    font-size: 0.9em
+
+  > b
+    display: block
+    font-size: 0.9em
+
+    > i
+      font-size: 0.75em
+
+  &[name="worst-time"]
+    display: none
+
+.text
+  position: absolute
+  left: 0
+  right: 0
+  text-align: center
+  line-height: 0.75
+  perspective: 100rem
+  opacity: 0
+
+  i
+    display: inline-block
+    opacity: 0
+    white-space: pre-wrap
+
+  &--title
+    bottom: 75%
+    font-size: 4.4em
+    height: 1.2em
+
+    span
+      display: block
+
+      &:first-child
+        font-size: 0.5em
+        margin-bottom: 0.2em
+
+  &--note
+    top: 87%
+    font-size: 1em
+
+  &--timer
+    bottom: 78%
+    font-size: 3.5em
+    line-height: 1
+
+  &--complete,
+  &--best-time
+    font-size: 1.5em
+    top: 83%
+    line-height: 1em
+
+.btn
+  -webkit-appearance: none
+  -moz-appearance: none
+  appearance: none
+  background-color: transparent
+  border-radius: 0
+  border-width: 0
+  position: absolute
+  pointer-events: none
+  font-size: 1.2em
+  color: rgba(#000, 0.25)
+  opacity: 0
+
+  &:after
+    position: absolute
+    content: ''
+    width: 3em
+    height: 3em
+    left: 50%
+    top: 50%
+    margin-left: -1.5em
+    margin-top: -1.5em
+    border-radius: 100%
+
+  &--bl
+    bottom: 0.8em
+    left: 0.8em
+
+  &--br
+    bottom: 0.8em
+    right: 0.8em
+
+  &--bc
+    bottom: 0.8em
+    left: calc(50% - 0.5em)
+
+  svg 
+    display: block
+
+  &--cancel
+    display: none !important
+.ui
+  pointer-events: none
+  color: #070d15
+
+  &,
+  &__background,
+  &__game,
+  &__texts,
+  &__prefs,
+  &__theme,
+  &__stats,
+  &__buttons
+    +inset
+    overflow: hidden
+
+  &__background
+    z-index: 1
+    transition: background 500ms ease
+    background: #d1d5db
+
+    &:after
+      +inset
+      content: ''
+      background-image: linear-gradient(to bottom, rgba(#fff, 1) 50%, rgba(#fff, 0) 100%)
+
+  &__game
+    pointer-events: all
+    z-index: 2
+
+    canvas
+      display: block
+      width: 100%
+      height: 100%
+
+  &__texts
+    z-index: 3
+
+  &__prefs,
+  &__stats,
+  &__theme
+    display: flex
+    flex-flow: column nowrap
+    justify-content: center
+    align-items: center
+    overflow: hidden
+    z-index: 4
+
+  &__theme
+    padding-top: 15em
+
+  &__buttons
+    z-index: 5
\ No newline at end of file
diff --git a/the-div-that-look-different-in-every-browser/README.markdown b/the-div-that-look-different-in-every-browser/README.markdown
new file mode 100644
index 0000000..a19adde
--- /dev/null
+++ b/the-div-that-look-different-in-every-browser/README.markdown
@@ -0,0 +1,4 @@
+# The div that look different in every browser
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/MartijnCuppens/pen/MXojmw](https://codepen.io/MartijnCuppens/pen/MXojmw).
+
+ 
\ No newline at end of file
diff --git a/the-div-that-look-different-in-every-browser/dist/index.html b/the-div-that-look-different-in-every-browser/dist/index.html
new file mode 100644
index 0000000..45bc5f2
--- /dev/null
+++ b/the-div-that-look-different-in-every-browser/dist/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>The div that look different in every browser</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/the-div-that-look-different-in-every-browser/dist/script.js b/the-div-that-look-different-in-every-browser/dist/script.js
new file mode 100644
index 0000000..0742d4e
--- /dev/null
+++ b/the-div-that-look-different-in-every-browser/dist/script.js
@@ -0,0 +1,4 @@
+// Browser screenshot see https://twitter.com/Martijn_Cuppens/status/1015169981368225793
+
+
+// Struggling with responsive font sizes? Check out RFS: https://github.com/twbs/rfs
\ No newline at end of file
diff --git a/the-div-that-look-different-in-every-browser/dist/style.css b/the-div-that-look-different-in-every-browser/dist/style.css
new file mode 100644
index 0000000..708ba86
--- /dev/null
+++ b/the-div-that-look-different-in-every-browser/dist/style.css
@@ -0,0 +1,18 @@
+html {
+  display: table;
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+div {
+  margin: auto;
+  width: 100px;
+  height: 100px;
+  outline: inset 100px green;
+  outline-offset: -125px;
+}
\ No newline at end of file
diff --git a/the-div-that-look-different-in-every-browser/license.txt b/the-div-that-look-different-in-every-browser/license.txt
new file mode 100644
index 0000000..93443b8
--- /dev/null
+++ b/the-div-that-look-different-in-every-browser/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Martijn Cuppens (https://codepen.io/MartijnCuppens/pen/MXojmw)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/the-div-that-look-different-in-every-browser/src/index.html b/the-div-that-look-different-in-every-browser/src/index.html
new file mode 100644
index 0000000..281c686
--- /dev/null
+++ b/the-div-that-look-different-in-every-browser/src/index.html
@@ -0,0 +1 @@
+<div></div>
\ No newline at end of file
diff --git a/the-div-that-look-different-in-every-browser/src/script.js b/the-div-that-look-different-in-every-browser/src/script.js
new file mode 100644
index 0000000..30697c7
--- /dev/null
+++ b/the-div-that-look-different-in-every-browser/src/script.js
@@ -0,0 +1,4 @@
+// Browser screenshot see https://twitter.com/Martijn_Cuppens/status/1015169981368225793
+
+
+// Struggling with responsive font sizes? Check out RFS: https://github.com/twbs/rfs
diff --git a/the-div-that-look-different-in-every-browser/src/style.css b/the-div-that-look-different-in-every-browser/src/style.css
new file mode 100644
index 0000000..708ba86
--- /dev/null
+++ b/the-div-that-look-different-in-every-browser/src/style.css
@@ -0,0 +1,18 @@
+html {
+  display: table;
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+div {
+  margin: auto;
+  width: 100px;
+  height: 100px;
+  outline: inset 100px green;
+  outline-offset: -125px;
+}
\ No newline at end of file
diff --git a/the-dots-vs-the-bars/README.markdown b/the-dots-vs-the-bars/README.markdown
new file mode 100644
index 0000000..98994d7
--- /dev/null
+++ b/the-dots-vs-the-bars/README.markdown
@@ -0,0 +1,5 @@
+# The Dots vs The Bars
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/t_afif/pen/gOmooGQ](https://codepen.io/t_afif/pen/gOmooGQ).
+
+More loaders here: https://dev.to/afif/series/12889
diff --git a/the-dots-vs-the-bars/dist/index.html b/the-dots-vs-the-bars/dist/index.html
new file mode 100644
index 0000000..636dc49
--- /dev/null
+++ b/the-dots-vs-the-bars/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - The Dots vs The Bars</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="dots-bars-1"></div>
+<div class="dots-bars-2"></div>
+<div class="dots-bars-3"></div>
+<div class="dots-bars-4"></div>
+<div class="dots-bars-5"></div>
+<div class="dots-bars-6"></div>
+<div class="dots-bars-7"></div>
+<div class="dots-bars-8"></div>
+<div class="dots-bars-9"></div>
+<div class="dots-bars-10"></div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/the-dots-vs-the-bars/dist/style.css b/the-dots-vs-the-bars/dist/style.css
new file mode 100644
index 0000000..db0ab94
--- /dev/null
+++ b/the-dots-vs-the-bars/dist/style.css
@@ -0,0 +1,440 @@
+.dots-bars-1 {
+  width: 40px;
+  height: 40px;
+  --c: linear-gradient(currentColor 0 0);
+  --r1: radial-gradient(farthest-side at bottom,currentColor 93%,#0000);
+  --r2: radial-gradient(farthest-side at top   ,currentColor 93%,#0000);
+  background: 
+    var(--c) ,
+    var(--r1),
+    var(--r2),
+    var(--c) ,  
+    var(--r1),
+    var(--r2),
+    var(--c) ,
+    var(--r1),
+    var(--r2);
+  background-repeat: no-repeat;
+  animation: db1 1s infinite  alternate;
+}
+
+@keyframes db1 {
+  0%,10% {
+    background-size: 8px 0,8px 4px,8px 4px;
+    background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
+ }
+ 90%,100% {
+    background-size: 8px 100%,8px 4px, 8px 4px;
+    background-position: 0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);
+ }
+}
+
+.dots-bars-2 {
+  width: 40px;
+  height: 40px;
+  --c: linear-gradient(currentColor 0 0);
+  --r1: radial-gradient(farthest-side at bottom,currentColor 93%,#0000);
+  --r2: radial-gradient(farthest-side at top   ,currentColor 93%,#0000);
+  background: 
+    var(--c) ,
+    var(--r1),
+    var(--r2),
+    var(--c) ,  
+    var(--r1),
+    var(--r2),
+    var(--c) ,
+    var(--r1),
+    var(--r2);
+  background-repeat: no-repeat;
+  animation: db2 1s infinite alternate;
+}
+
+@keyframes db2 {
+  0%,25% {
+    background-size: 8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
+    background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
+ }
+ 50% {
+    background-size: 8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
+    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
+ }
+ 75% {
+    background-size: 8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
+    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
+ }
+ 95%,100% {
+    background-size: 8px 100%,8px 4px, 8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px;
+    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(0% - 2px),100% calc(100% + 2px);
+ }
+}
+
+.dots-bars-3 {
+  width: 40px;
+  height: 26px;
+  --c: linear-gradient(currentColor 0 0);
+  background:
+    var(--c) 0    100%,
+    var(--c) 50%  100%,
+    var(--c) 100% 100%;
+  background-size:8px calc(100% - 4px);
+  background-repeat: no-repeat;
+  position: relative;
+}
+.dots-bars-3:before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background:currentColor;
+  left:0;
+  top:0;
+  animation: 
+    db3-1 1.5s  linear infinite alternate,
+    db3-2 0.75s cubic-bezier(0,200,.8,200) infinite;
+}
+
+
+@keyframes db3-1 {
+  100% {left:calc(100% - 8px)}
+}
+
+@keyframes db3-2 {
+  100% {top:-0.1px}
+}
+
+
+.dots-bars-4 {
+  width: 40px;
+  height: 20px;
+  --c:radial-gradient(farthest-side,currentColor 93%,#0000);
+  background:
+    var(--c) 0    0,
+    var(--c) 50%  0,
+    var(--c) 100% 0;
+  background-size:8px 8px;
+  background-repeat: no-repeat;
+  position: relative;
+  animation: db4-0 1s linear infinite alternate;
+}
+.dots-bars-4:before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 12px;
+  background:currentColor;
+  left:0;
+  top:0;
+  animation: 
+    db4-1 1s  linear infinite alternate,
+    db4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
+}
+
+@keyframes db4-0 {
+  0%      {background-position: 0  100%,50% 0   ,100% 0}
+  8%,42%  {background-position: 0  0   ,50% 0   ,100% 0}
+  50%     {background-position: 0  0   ,50% 100%,100% 0}
+  58%,92% {background-position: 0  0   ,50% 0   ,100% 0}
+  100%    {background-position: 0  0   ,50% 0   ,100% 100%}
+}
+
+@keyframes db4-1 {
+  100% {left:calc(100% - 8px)}
+}
+
+@keyframes db4-2 {
+  100% {top:-0.1px}
+}
+
+.dots-bars-5 {
+  width: 40px;
+  height: 30px;
+  --c: linear-gradient(currentColor 0 0);
+  background:
+    var(--c) 0    100%/8px 30px,
+    var(--c) 50%  100%/8px 20px,
+    var(--c) 100% 100%/8px 10px;
+  background-repeat: no-repeat;
+  position: relative;
+  clip-path: inset(-100% 0);
+}
+.dots-bars-5:before{
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background:currentColor;
+  left:-16px;
+  top:0;
+  animation: 
+    db5-1 2s   linear infinite,
+    db5-2 0.5s cubic-bezier(0,200,.8,200) infinite;
+}
+
+@keyframes db5-1 {
+  0%   {left:-16px;transform:translateY(-8px)}
+  100% {left:calc(100% + 8px);transform:translateY(22px)}
+}
+
+@keyframes db5-2 {
+  100% {top:-0.1px}
+}
+
+
+.dots-bars-6 {
+  width: 40px;
+  height: 20px;
+  --c:radial-gradient(farthest-side,currentColor 93%,#0000);
+  background:
+    var(--c) 0    0,
+    var(--c) 50%  0;
+  background-size:8px 8px;
+  background-repeat: no-repeat;
+  position: relative;
+  clip-path: inset(-200% -100% 0 0);
+  animation: db6-0 1.5s linear infinite;
+}
+.dots-bars-6:before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 12px;
+  background:currentColor;
+  left:-16px;
+  top:0;
+  animation: 
+    db6-1 1.5s linear infinite,
+    db6-2 0.5s cubic-bezier(0,200,.8,200) infinite;
+}
+.dots-bars-6:after {
+  content: "";
+  position: absolute;
+  inset:0 0 auto auto;
+  width:8px;
+  height: 8px;
+  border-radius: 50%;
+  background:currentColor; 
+  animation: db6-3 1.5s  linear infinite;
+}
+
+@keyframes db6-0 {
+  0%,30%  {background-position: 0  0   ,50% 0   }
+  33%     {background-position: 0  100%,50% 0   }
+  41%,63% {background-position: 0  0   ,50% 0   }
+  66%     {background-position: 0  0   ,50% 100%}
+  74%,100%{background-position: 0  0   ,50% 0   }
+}
+
+@keyframes db6-1 {
+  90%  {transform:translateY(0)}
+  95%  {transform:translateY(15px)}
+  100% {transform:translateY(15px);left:calc(100% - 8px)}
+}
+
+@keyframes db6-2 {
+  100% {top:-0.1px}
+}
+
+@keyframes db6-3 {
+  0%,80%,100% {transform:translate(0)}
+  90%         {transform:translate(26px)}
+}
+
+
+.dots-bars-7 {
+  width: 40px;
+  height: 40px;
+  --c: linear-gradient(currentColor 0 0);
+  background: 
+    var(--c) 0    0,
+    var(--c) 0    100%, 
+    var(--c) 50%  0,  
+    var(--c) 50%  100%, 
+    var(--c) 100% 0, 
+    var(--c) 100% 100%;
+  background-size: 8px 50%;
+  background-repeat: no-repeat;
+  animation: db7-0 1s infinite;
+  position: relative;
+  overflow: hidden;
+}
+.dots-bars-7:before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  top:calc(50% - 4px);
+  left:-8px;
+  animation:inherit;
+  animation-name:db7-1;
+}
+
+@keyframes db7-0 {
+ 16.67% {background-size:8px 30%, 8px 30%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
+ 33.33% {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 50%    {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 30%}
+ 66.67% {background-size:8px 50%, 8px 50%, 8px 30%, 8px 30%, 8px 30%, 8px 30%}
+ 83.33% {background-size:8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 30%, 8px 30%}
+}
+
+@keyframes db7-1 {
+ 20%  {left:0px}
+ 40%  {left:calc(50%  - 4px)}
+ 60%  {left:calc(100% - 8px)}
+ 80%,
+ 100% {left:100%}
+}
+
+.dots-bars-8 {
+  width: 40px;
+  height: 40px;
+  --c: linear-gradient(currentColor 0 0);
+  background: 
+    var(--c) 0    0,
+    var(--c) 0    100%, 
+    var(--c) 50%  0,  
+    var(--c) 50%  100%, 
+    var(--c) 100% 0, 
+    var(--c) 100% 100%;
+  background-size: 8px 50%;
+  background-repeat: no-repeat;
+  animation: db8-0 2s infinite;
+  position: relative;
+  overflow: hidden;
+}
+.dots-bars-8:before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  top:calc(50% - 4px);
+  left:-8px;
+  animation:inherit;
+  animation-name:db8-1;
+}
+
+@keyframes db8-0 {
+ 16.67% {background-size:8px 30%, 8px 30%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
+ 33.33% {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 50%    {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 66.67% {background-size:8px 50%, 8px 50%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 83.33% {background-size:8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
+}
+
+@keyframes db8-1 {
+ 20%      {left:0px}
+ 40%,100% {left:calc(50% - 4px)}
+}
+
+.dots-bars-9 {
+  width: 40px;
+  height: 40px;
+  --c: linear-gradient(currentColor 0 0);
+  background: 
+    var(--c) 0    0,
+    var(--c) 0    100%, 
+    var(--c) 50%  0,  
+    var(--c) 50%  100%, 
+    var(--c) 100% 0, 
+    var(--c) 100% 100%;
+  background-size: 8px 50%;
+  background-repeat: no-repeat;
+  animation: db9-0 2s infinite;
+  position: relative;
+  overflow: hidden;
+}
+.dots-bars-9:before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  top:calc(50% - 4px);
+  left:-8px;
+  animation:inherit;
+  animation-name:db9-1;
+}
+
+@keyframes db9-0 {
+ 16.67% {background-size:8px 30%, 8px 30%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
+ 33.33% {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 50%    {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 66.67% {background-size:8px 50%, 8px 50%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 83.33% {background-size:8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
+}
+
+@keyframes db9-1 {
+ 20%     {left:0px}
+ 40%,70% {left:calc(50% - 4px)}
+ 80%,85% {left:8px;top:calc(50% - 4px)}
+ 100%    {left:8px;top:-8px}
+}
+
+
+.dots-bars-10 {
+  width: 70px;
+  height: 30px;
+  overflow: hidden;
+  position: relative;
+}
+.dots-bars-10::before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius:50%;
+  inset:0;
+  margin:auto; 
+  background: currentColor;
+  transform-origin: bottom;
+  animation: db10-1 3s infinite;
+}
+.dots-bars-10::after {
+  content: "";
+  position: absolute;
+  width:8px;
+  height:14px;
+  bottom:calc(50% - 4px);
+  background: currentColor;
+  animation: db10-2 3s infinite;
+}
+
+@keyframes db10-1 {
+ 0%,
+ 10% {transform:translate(0)     scale(1)  ;box-shadow: 60px 0 ,60px 0}
+ 20%,
+ 40% {transform:translate(20px)  scale(1)  ;box-shadow: 60px 0 ,60px 0}
+ 48% {transform:translate(20px)  scale(1)  ;box-shadow: 8px  0 ,60px 0}
+ 50% {transform:translate(20px)  scale(1.5);box-shadow: 0    0 ,60px 0}
+ 58% {transform:translate(20px)  scale(1.5);box-shadow: 0    0 ,8px  0}
+ 60%,
+ 70% {transform:translate(20px)  scale(2)  ;box-shadow: 0    0 ,0    0}
+
+ 85% {transform:translate(-50px) scale(2)  ;box-shadow: 0    0 ,0    0}
+ 87% {transform:translate(-50px) scale(1)  ;box-shadow: 0    0 ,0    0}
+ 100%{transform:translate(0)     scale(1)  ;box-shadow: 0    0 ,0    0}
+}
+
+@keyframes db10-2 {
+ 20%,70% {left:50%}
+ 0%,10%,85%,100% {left:-25px}
+}
+
+/**/
+body {
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
+  grid-auto-rows: 130px;
+  place-items:center;
+}
+
+
+* {
+  box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/the-dots-vs-the-bars/license.txt b/the-dots-vs-the-bars/license.txt
new file mode 100644
index 0000000..ccb3316
--- /dev/null
+++ b/the-dots-vs-the-bars/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Temani Afif (https://codepen.io/t_afif/pen/gOmooGQ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/the-dots-vs-the-bars/src/index.html b/the-dots-vs-the-bars/src/index.html
new file mode 100644
index 0000000..b9530b3
--- /dev/null
+++ b/the-dots-vs-the-bars/src/index.html
@@ -0,0 +1,10 @@
+<div class="dots-bars-1"></div>
+<div class="dots-bars-2"></div>
+<div class="dots-bars-3"></div>
+<div class="dots-bars-4"></div>
+<div class="dots-bars-5"></div>
+<div class="dots-bars-6"></div>
+<div class="dots-bars-7"></div>
+<div class="dots-bars-8"></div>
+<div class="dots-bars-9"></div>
+<div class="dots-bars-10"></div>
\ No newline at end of file
diff --git a/the-dots-vs-the-bars/src/style.css b/the-dots-vs-the-bars/src/style.css
new file mode 100644
index 0000000..db0ab94
--- /dev/null
+++ b/the-dots-vs-the-bars/src/style.css
@@ -0,0 +1,440 @@
+.dots-bars-1 {
+  width: 40px;
+  height: 40px;
+  --c: linear-gradient(currentColor 0 0);
+  --r1: radial-gradient(farthest-side at bottom,currentColor 93%,#0000);
+  --r2: radial-gradient(farthest-side at top   ,currentColor 93%,#0000);
+  background: 
+    var(--c) ,
+    var(--r1),
+    var(--r2),
+    var(--c) ,  
+    var(--r1),
+    var(--r2),
+    var(--c) ,
+    var(--r1),
+    var(--r2);
+  background-repeat: no-repeat;
+  animation: db1 1s infinite  alternate;
+}
+
+@keyframes db1 {
+  0%,10% {
+    background-size: 8px 0,8px 4px,8px 4px;
+    background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
+ }
+ 90%,100% {
+    background-size: 8px 100%,8px 4px, 8px 4px;
+    background-position: 0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);
+ }
+}
+
+.dots-bars-2 {
+  width: 40px;
+  height: 40px;
+  --c: linear-gradient(currentColor 0 0);
+  --r1: radial-gradient(farthest-side at bottom,currentColor 93%,#0000);
+  --r2: radial-gradient(farthest-side at top   ,currentColor 93%,#0000);
+  background: 
+    var(--c) ,
+    var(--r1),
+    var(--r2),
+    var(--c) ,  
+    var(--r1),
+    var(--r2),
+    var(--c) ,
+    var(--r1),
+    var(--r2);
+  background-repeat: no-repeat;
+  animation: db2 1s infinite alternate;
+}
+
+@keyframes db2 {
+  0%,25% {
+    background-size: 8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
+    background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
+ }
+ 50% {
+    background-size: 8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
+    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
+ }
+ 75% {
+    background-size: 8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
+    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
+ }
+ 95%,100% {
+    background-size: 8px 100%,8px 4px, 8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px;
+    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(0% - 2px),100% calc(100% + 2px);
+ }
+}
+
+.dots-bars-3 {
+  width: 40px;
+  height: 26px;
+  --c: linear-gradient(currentColor 0 0);
+  background:
+    var(--c) 0    100%,
+    var(--c) 50%  100%,
+    var(--c) 100% 100%;
+  background-size:8px calc(100% - 4px);
+  background-repeat: no-repeat;
+  position: relative;
+}
+.dots-bars-3:before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background:currentColor;
+  left:0;
+  top:0;
+  animation: 
+    db3-1 1.5s  linear infinite alternate,
+    db3-2 0.75s cubic-bezier(0,200,.8,200) infinite;
+}
+
+
+@keyframes db3-1 {
+  100% {left:calc(100% - 8px)}
+}
+
+@keyframes db3-2 {
+  100% {top:-0.1px}
+}
+
+
+.dots-bars-4 {
+  width: 40px;
+  height: 20px;
+  --c:radial-gradient(farthest-side,currentColor 93%,#0000);
+  background:
+    var(--c) 0    0,
+    var(--c) 50%  0,
+    var(--c) 100% 0;
+  background-size:8px 8px;
+  background-repeat: no-repeat;
+  position: relative;
+  animation: db4-0 1s linear infinite alternate;
+}
+.dots-bars-4:before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 12px;
+  background:currentColor;
+  left:0;
+  top:0;
+  animation: 
+    db4-1 1s  linear infinite alternate,
+    db4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
+}
+
+@keyframes db4-0 {
+  0%      {background-position: 0  100%,50% 0   ,100% 0}
+  8%,42%  {background-position: 0  0   ,50% 0   ,100% 0}
+  50%     {background-position: 0  0   ,50% 100%,100% 0}
+  58%,92% {background-position: 0  0   ,50% 0   ,100% 0}
+  100%    {background-position: 0  0   ,50% 0   ,100% 100%}
+}
+
+@keyframes db4-1 {
+  100% {left:calc(100% - 8px)}
+}
+
+@keyframes db4-2 {
+  100% {top:-0.1px}
+}
+
+.dots-bars-5 {
+  width: 40px;
+  height: 30px;
+  --c: linear-gradient(currentColor 0 0);
+  background:
+    var(--c) 0    100%/8px 30px,
+    var(--c) 50%  100%/8px 20px,
+    var(--c) 100% 100%/8px 10px;
+  background-repeat: no-repeat;
+  position: relative;
+  clip-path: inset(-100% 0);
+}
+.dots-bars-5:before{
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background:currentColor;
+  left:-16px;
+  top:0;
+  animation: 
+    db5-1 2s   linear infinite,
+    db5-2 0.5s cubic-bezier(0,200,.8,200) infinite;
+}
+
+@keyframes db5-1 {
+  0%   {left:-16px;transform:translateY(-8px)}
+  100% {left:calc(100% + 8px);transform:translateY(22px)}
+}
+
+@keyframes db5-2 {
+  100% {top:-0.1px}
+}
+
+
+.dots-bars-6 {
+  width: 40px;
+  height: 20px;
+  --c:radial-gradient(farthest-side,currentColor 93%,#0000);
+  background:
+    var(--c) 0    0,
+    var(--c) 50%  0;
+  background-size:8px 8px;
+  background-repeat: no-repeat;
+  position: relative;
+  clip-path: inset(-200% -100% 0 0);
+  animation: db6-0 1.5s linear infinite;
+}
+.dots-bars-6:before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 12px;
+  background:currentColor;
+  left:-16px;
+  top:0;
+  animation: 
+    db6-1 1.5s linear infinite,
+    db6-2 0.5s cubic-bezier(0,200,.8,200) infinite;
+}
+.dots-bars-6:after {
+  content: "";
+  position: absolute;
+  inset:0 0 auto auto;
+  width:8px;
+  height: 8px;
+  border-radius: 50%;
+  background:currentColor; 
+  animation: db6-3 1.5s  linear infinite;
+}
+
+@keyframes db6-0 {
+  0%,30%  {background-position: 0  0   ,50% 0   }
+  33%     {background-position: 0  100%,50% 0   }
+  41%,63% {background-position: 0  0   ,50% 0   }
+  66%     {background-position: 0  0   ,50% 100%}
+  74%,100%{background-position: 0  0   ,50% 0   }
+}
+
+@keyframes db6-1 {
+  90%  {transform:translateY(0)}
+  95%  {transform:translateY(15px)}
+  100% {transform:translateY(15px);left:calc(100% - 8px)}
+}
+
+@keyframes db6-2 {
+  100% {top:-0.1px}
+}
+
+@keyframes db6-3 {
+  0%,80%,100% {transform:translate(0)}
+  90%         {transform:translate(26px)}
+}
+
+
+.dots-bars-7 {
+  width: 40px;
+  height: 40px;
+  --c: linear-gradient(currentColor 0 0);
+  background: 
+    var(--c) 0    0,
+    var(--c) 0    100%, 
+    var(--c) 50%  0,  
+    var(--c) 50%  100%, 
+    var(--c) 100% 0, 
+    var(--c) 100% 100%;
+  background-size: 8px 50%;
+  background-repeat: no-repeat;
+  animation: db7-0 1s infinite;
+  position: relative;
+  overflow: hidden;
+}
+.dots-bars-7:before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  top:calc(50% - 4px);
+  left:-8px;
+  animation:inherit;
+  animation-name:db7-1;
+}
+
+@keyframes db7-0 {
+ 16.67% {background-size:8px 30%, 8px 30%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
+ 33.33% {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 50%    {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 30%}
+ 66.67% {background-size:8px 50%, 8px 50%, 8px 30%, 8px 30%, 8px 30%, 8px 30%}
+ 83.33% {background-size:8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 30%, 8px 30%}
+}
+
+@keyframes db7-1 {
+ 20%  {left:0px}
+ 40%  {left:calc(50%  - 4px)}
+ 60%  {left:calc(100% - 8px)}
+ 80%,
+ 100% {left:100%}
+}
+
+.dots-bars-8 {
+  width: 40px;
+  height: 40px;
+  --c: linear-gradient(currentColor 0 0);
+  background: 
+    var(--c) 0    0,
+    var(--c) 0    100%, 
+    var(--c) 50%  0,  
+    var(--c) 50%  100%, 
+    var(--c) 100% 0, 
+    var(--c) 100% 100%;
+  background-size: 8px 50%;
+  background-repeat: no-repeat;
+  animation: db8-0 2s infinite;
+  position: relative;
+  overflow: hidden;
+}
+.dots-bars-8:before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  top:calc(50% - 4px);
+  left:-8px;
+  animation:inherit;
+  animation-name:db8-1;
+}
+
+@keyframes db8-0 {
+ 16.67% {background-size:8px 30%, 8px 30%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
+ 33.33% {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 50%    {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 66.67% {background-size:8px 50%, 8px 50%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 83.33% {background-size:8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
+}
+
+@keyframes db8-1 {
+ 20%      {left:0px}
+ 40%,100% {left:calc(50% - 4px)}
+}
+
+.dots-bars-9 {
+  width: 40px;
+  height: 40px;
+  --c: linear-gradient(currentColor 0 0);
+  background: 
+    var(--c) 0    0,
+    var(--c) 0    100%, 
+    var(--c) 50%  0,  
+    var(--c) 50%  100%, 
+    var(--c) 100% 0, 
+    var(--c) 100% 100%;
+  background-size: 8px 50%;
+  background-repeat: no-repeat;
+  animation: db9-0 2s infinite;
+  position: relative;
+  overflow: hidden;
+}
+.dots-bars-9:before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  top:calc(50% - 4px);
+  left:-8px;
+  animation:inherit;
+  animation-name:db9-1;
+}
+
+@keyframes db9-0 {
+ 16.67% {background-size:8px 30%, 8px 30%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
+ 33.33% {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 50%    {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 66.67% {background-size:8px 50%, 8px 50%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
+ 83.33% {background-size:8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
+}
+
+@keyframes db9-1 {
+ 20%     {left:0px}
+ 40%,70% {left:calc(50% - 4px)}
+ 80%,85% {left:8px;top:calc(50% - 4px)}
+ 100%    {left:8px;top:-8px}
+}
+
+
+.dots-bars-10 {
+  width: 70px;
+  height: 30px;
+  overflow: hidden;
+  position: relative;
+}
+.dots-bars-10::before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius:50%;
+  inset:0;
+  margin:auto; 
+  background: currentColor;
+  transform-origin: bottom;
+  animation: db10-1 3s infinite;
+}
+.dots-bars-10::after {
+  content: "";
+  position: absolute;
+  width:8px;
+  height:14px;
+  bottom:calc(50% - 4px);
+  background: currentColor;
+  animation: db10-2 3s infinite;
+}
+
+@keyframes db10-1 {
+ 0%,
+ 10% {transform:translate(0)     scale(1)  ;box-shadow: 60px 0 ,60px 0}
+ 20%,
+ 40% {transform:translate(20px)  scale(1)  ;box-shadow: 60px 0 ,60px 0}
+ 48% {transform:translate(20px)  scale(1)  ;box-shadow: 8px  0 ,60px 0}
+ 50% {transform:translate(20px)  scale(1.5);box-shadow: 0    0 ,60px 0}
+ 58% {transform:translate(20px)  scale(1.5);box-shadow: 0    0 ,8px  0}
+ 60%,
+ 70% {transform:translate(20px)  scale(2)  ;box-shadow: 0    0 ,0    0}
+
+ 85% {transform:translate(-50px) scale(2)  ;box-shadow: 0    0 ,0    0}
+ 87% {transform:translate(-50px) scale(1)  ;box-shadow: 0    0 ,0    0}
+ 100%{transform:translate(0)     scale(1)  ;box-shadow: 0    0 ,0    0}
+}
+
+@keyframes db10-2 {
+ 20%,70% {left:50%}
+ 0%,10%,85%,100% {left:-25px}
+}
+
+/**/
+body {
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
+  grid-auto-rows: 130px;
+  place-items:center;
+}
+
+
+* {
+  box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/the-flame-keeps-burning/README.markdown b/the-flame-keeps-burning/README.markdown
new file mode 100644
index 0000000..4854df6
--- /dev/null
+++ b/the-flame-keeps-burning/README.markdown
@@ -0,0 +1,7 @@
+# The Flame Keeps Burning
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/chrisgannon/pen/KKajBdx](https://codepen.io/chrisgannon/pen/KKajBdx).
+
+I have just reached 9000 followers here on Codepen.
+
+Thank you to all the people on here who inspire me - you push me forward to make new things.
diff --git a/the-flame-keeps-burning/dist/index.html b/the-flame-keeps-burning/dist/index.html
new file mode 100644
index 0000000..969d112
--- /dev/null
+++ b/the-flame-keeps-burning/dist/index.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - The Flame Keeps Burning</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
+    <linearGradient id="grad1" x1="393.05" y1="391.01" x2="393.05" y2="147.71" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#35AAF9"/>
+      <stop offset="1" stop-color="#993BDC"/>
+    </linearGradient>	
+
+   <linearGradient id="grad2" x1="393.05" y1="391.01" x2="393.05" y2="247.71" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#FFEE2A"/>
+      <stop offset="1" stop-color="#35AAF9"/>
+    </linearGradient>	
+
+   <linearGradient id="grad3" x1="393.05" y1="551.01" x2="393.05" y2="347.71" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#D93964"/>
+      <stop offset="1" stop-color="#8D2AE6"/>
+    </linearGradient>
+
+   <linearGradient id="grad4" x1="393.05" y1="351.01" x2="393.05" y2="207.71" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#EF5927"/>
+      <stop offset="1" stop-color="#F72785"/>
+    </linearGradient>		
+<g >
+	  
+
+	<g id="fat" stroke="#DC2922" fill="none"  stroke-linecap="round" stroke-miterlimit="10" stroke-width="4">
+            <path d="M349.55,495.05l100.29-.1h-.29"/>
+        <line x1="309.55" y1="480.95" x2="489.55" y2="480.77"/>
+        <line x1="284.55" y1="465.95" x2="514.55" y2="465.73"/>
+        <line x1="265.55" y1="450.95" x2="533.55" y2="450.69"/>
+        <line x1="250.55" y1="435.95" x2="548.55" y2="435.67"/>
+        <line x1="237.55" y1="420.95" x2="561.55" y2="420.65"/>
+        <line x1="227.55" y1="405.95" x2="571.55" y2="405.63"/>
+        <line x1="219.55" y1="390.95" x2="579.55" y2="390.61"/>
+        <line x1="212.55" y1="375.95" x2="586.55" y2="375.59"/>
+        <line x1="207.55" y1="360.95" x2="591.55" y2="360.59"/>
+        <line x1="203.55" y1="345.95" x2="595.55" y2="345.57"/>
+        <line x1="200.55" y1="330.95" x2="598.55" y2="330.57"/>
+        <line x1="198.55" y1="315.95" x2="600.55" y2="315.57"/>
+        <line x1="198.55" y1="300.95" x2="600.55" y2="300.57"/>
+        <line x1="198.55" y1="285.95" x2="600.55" y2="285.57"/>
+        <line x1="200.55" y1="270.95" x2="598.55" y2="270.57"/>
+        <line x1="203.55" y1="255.95" x2="595.55" y2="255.57"/>
+        <line x1="207.55" y1="240.95" x2="591.55" y2="240.59"/>
+        <line x1="212.55" y1="225.95" x2="586.55" y2="225.59"/>
+        <line x1="219.55" y1="210.95" x2="579.55" y2="210.61"/>
+        <line x1="227.55" y1="195.95" x2="571.55" y2="195.63"/>
+        <line x1="237.55" y1="180.95" x2="561.55" y2="180.65"/>
+        <line x1="250.55" y1="165.95" x2="548.55" y2="165.67"/>
+        <line x1="265.55" y1="150.95" x2="533.55" y2="150.69"/>
+        <line x1="284.55" y1="135.95" x2="514.55" y2="135.73"/>
+        <line x1="309.55" y1="120.95" x2="489.55" y2="120.77"/>
+        <polyline points="349.55 104.95 349.26 104.95 449.55 104.95"/>
+
+    </g> 
+	
+<g id="mid" stroke="#F7811E"  fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4">
+         <path d="M349.55,495.05l100.29-.1h-.29"/>
+        <line x1="309.55" y1="480.95" x2="489.55" y2="480.77"/>
+        <line x1="284.55" y1="465.95" x2="514.55" y2="465.73"/>
+        <line x1="265.55" y1="450.95" x2="533.55" y2="450.69"/>
+        <line x1="250.55" y1="435.95" x2="548.55" y2="435.67"/>
+        <line x1="237.55" y1="420.95" x2="561.55" y2="420.65"/>
+        <line x1="227.55" y1="405.95" x2="571.55" y2="405.63"/>
+        <line x1="219.55" y1="390.95" x2="579.55" y2="390.61"/>
+        <line x1="212.55" y1="375.95" x2="586.55" y2="375.59"/>
+        <line x1="207.55" y1="360.95" x2="591.55" y2="360.59"/>
+        <line x1="203.55" y1="345.95" x2="595.55" y2="345.57"/>
+        <line x1="200.55" y1="330.95" x2="598.55" y2="330.57"/>
+        <line x1="198.55" y1="315.95" x2="600.55" y2="315.57"/>
+        <line x1="198.55" y1="300.95" x2="600.55" y2="300.57"/>
+        <line x1="198.55" y1="285.95" x2="600.55" y2="285.57"/>
+        <line x1="200.55" y1="270.95" x2="598.55" y2="270.57"/>
+        <line x1="203.55" y1="255.95" x2="595.55" y2="255.57"/>
+        <line x1="207.55" y1="240.95" x2="591.55" y2="240.59"/>
+        <line x1="212.55" y1="225.95" x2="586.55" y2="225.59"/>
+        <line x1="219.55" y1="210.95" x2="579.55" y2="210.61"/>
+        <line x1="227.55" y1="195.95" x2="571.55" y2="195.63"/>
+        <line x1="237.55" y1="180.95" x2="561.55" y2="180.65"/>
+        <line x1="250.55" y1="165.95" x2="548.55" y2="165.67"/>
+        <line x1="265.55" y1="150.95" x2="533.55" y2="150.69"/>
+        <line x1="284.55" y1="135.95" x2="514.55" y2="135.73"/>
+        <line x1="309.55" y1="120.95" x2="489.55" y2="120.77"/>
+        <polyline points="349.55 104.95 349.26 104.95 449.55 104.95"/>
+
+    </g>	
+	<g id="thin" stroke="#FCDE35" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4">
+            <path d="M349.55,495.05l100.29-.1h-.29"/>
+        <line x1="309.55" y1="480.95" x2="489.55" y2="480.77"/>
+        <line x1="284.55" y1="465.95" x2="514.55" y2="465.73"/>
+        <line x1="265.55" y1="450.95" x2="533.55" y2="450.69"/>
+        <line x1="250.55" y1="435.95" x2="548.55" y2="435.67"/>
+        <line x1="237.55" y1="420.95" x2="561.55" y2="420.65"/>
+        <line x1="227.55" y1="405.95" x2="571.55" y2="405.63"/>
+        <line x1="219.55" y1="390.95" x2="579.55" y2="390.61"/>
+        <line x1="212.55" y1="375.95" x2="586.55" y2="375.59"/>
+        <line x1="207.55" y1="360.95" x2="591.55" y2="360.59"/>
+        <line x1="203.55" y1="345.95" x2="595.55" y2="345.57"/>
+        <line x1="200.55" y1="330.95" x2="598.55" y2="330.57"/>
+        <line x1="198.55" y1="315.95" x2="600.55" y2="315.57"/>
+        <line x1="198.55" y1="300.95" x2="600.55" y2="300.57"/>
+        <line x1="198.55" y1="285.95" x2="600.55" y2="285.57"/>
+        <line x1="200.55" y1="270.95" x2="598.55" y2="270.57"/>
+        <line x1="203.55" y1="255.95" x2="595.55" y2="255.57"/>
+        <line x1="207.55" y1="240.95" x2="591.55" y2="240.59"/>
+        <line x1="212.55" y1="225.95" x2="586.55" y2="225.59"/>
+        <line x1="219.55" y1="210.95" x2="579.55" y2="210.61"/>
+        <line x1="227.55" y1="195.95" x2="571.55" y2="195.63"/>
+        <line x1="237.55" y1="180.95" x2="561.55" y2="180.65"/>
+        <line x1="250.55" y1="165.95" x2="548.55" y2="165.67"/>
+        <line x1="265.55" y1="150.95" x2="533.55" y2="150.69"/>
+        <line x1="284.55" y1="135.95" x2="514.55" y2="135.73"/>
+        <line x1="309.55" y1="120.95" x2="489.55" y2="120.77"/>
+        <polyline points="349.55 104.95 349.26 104.95 449.55 104.95"/>
+
+    </g>
+ 
+	
+	
+<!-- 	<g id="front" stroke="#FFF" fill="none"  stroke-linecap="round" stroke-miterlimit="10" stroke-width="4">
+         <path d="M349.55,495.05l100.29-.1h-.29"/>
+        <line x1="309.55" y1="480.95" x2="489.55" y2="480.77"/>
+        <line x1="284.55" y1="465.95" x2="514.55" y2="465.73"/>
+        <line x1="265.55" y1="450.95" x2="533.55" y2="450.69"/>
+        <line x1="250.55" y1="435.95" x2="548.55" y2="435.67"/>
+        <line x1="237.55" y1="420.95" x2="561.55" y2="420.65"/>
+        <line x1="227.55" y1="405.95" x2="571.55" y2="405.63"/>
+        <line x1="219.55" y1="390.95" x2="579.55" y2="390.61"/>
+        <line x1="212.55" y1="375.95" x2="586.55" y2="375.59"/>
+        <line x1="207.55" y1="360.95" x2="591.55" y2="360.59"/>
+        <line x1="203.55" y1="345.95" x2="595.55" y2="345.57"/>
+        <line x1="200.55" y1="330.95" x2="598.55" y2="330.57"/>
+        <line x1="198.55" y1="315.95" x2="600.55" y2="315.57"/>
+        <line x1="198.55" y1="300.95" x2="600.55" y2="300.57"/>
+        <line x1="198.55" y1="285.95" x2="600.55" y2="285.57"/>
+        <line x1="200.55" y1="270.95" x2="598.55" y2="270.57"/>
+        <line x1="203.55" y1="255.95" x2="595.55" y2="255.57"/>
+        <line x1="207.55" y1="240.95" x2="591.55" y2="240.59"/>
+        <line x1="212.55" y1="225.95" x2="586.55" y2="225.59"/>
+        <line x1="219.55" y1="210.95" x2="579.55" y2="210.61"/>
+        <line x1="227.55" y1="195.95" x2="571.55" y2="195.63"/>
+        <line x1="237.55" y1="180.95" x2="561.55" y2="180.65"/>
+        <line x1="250.55" y1="165.95" x2="548.55" y2="165.67"/>
+        <line x1="265.55" y1="150.95" x2="533.55" y2="150.69"/>
+        <line x1="284.55" y1="135.95" x2="514.55" y2="135.73"/>
+        <line x1="309.55" y1="120.95" x2="489.55" y2="120.77"/>
+        <polyline points="349.55 104.95 349.26 104.95 449.55 104.95"/>
+
+    </g>    
+    -->
+	
+</g>
+</svg>
+<!-- partial -->
+  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/the-flame-keeps-burning/dist/script.js b/the-flame-keeps-burning/dist/script.js
new file mode 100644
index 0000000..4f5921b
--- /dev/null
+++ b/the-flame-keeps-burning/dist/script.js
@@ -0,0 +1,56 @@
+let select = s => document.querySelector(s),
+  selectAll = s =>  document.querySelectorAll(s),
+		mainSVG = select('#mainSVG'),
+		mid = gsap.utils.toArray('#mid *')//.reverse()
+
+gsap.set('svg', {
+	visibility: 'visible'
+})
+
+let fatTl = gsap.timeline();
+fatTl.fromTo('#fat *', {
+	drawSVG: '70% 0%'
+}, {
+		drawSVG: '40% 60%',
+	stagger: {
+		each: 0.05,
+		repeat: -1,
+		yoyo: true
+	},
+	duration: 0.75,
+	ease: 'sine.inOut'
+})
+
+let midTl = gsap.timeline();
+midTl.fromTo(mid, {
+	drawSVG: '50% 0%'
+}, {
+		drawSVG: '50% 60%',
+	stagger: {
+		each: 0.05,
+		repeat: -1,
+		yoyo: true
+	},
+	duration: 0.75,
+	ease: 'sine.inOut'
+})
+
+let thinTl = gsap.timeline();
+thinTl.fromTo('#thin *', {
+	drawSVG: '0% 30%'
+}, {
+		drawSVG: '60% 60%',
+	stagger: {
+		each: 0.05,
+		repeat: -1,
+		yoyo: true
+	},
+	duration: 0.75,
+	ease: 'sine.inOut'
+})
+
+let mainTl = gsap.timeline();
+mainTl.add(fatTl)
+.add(midTl, 0.1)
+.add(thinTl, 0.2).seek(100)
+//ScrubGSAPTimeline(mainTl)
\ No newline at end of file
diff --git a/the-flame-keeps-burning/dist/style.css b/the-flame-keeps-burning/dist/style.css
new file mode 100644
index 0000000..c36433c
--- /dev/null
+++ b/the-flame-keeps-burning/dist/style.css
@@ -0,0 +1,23 @@
+body {
+ background-color: #1c1c1c;
+ overflow: hidden;
+ text-align:center;
+  display: flex;
+  align-items: center;
+  justify-content: center; 
+}
+
+body,
+html {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+svg {
+ width: 100%;
+ height: 100%;
+ visibility: hidden;
+ 
+}
\ No newline at end of file
diff --git a/the-flame-keeps-burning/license.txt b/the-flame-keeps-burning/license.txt
new file mode 100644
index 0000000..efdbc73
--- /dev/null
+++ b/the-flame-keeps-burning/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Chris Gannon (https://codepen.io/chrisgannon/pen/KKajBdx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/the-flame-keeps-burning/src/index.html b/the-flame-keeps-burning/src/index.html
new file mode 100644
index 0000000..25c4913
--- /dev/null
+++ b/the-flame-keeps-burning/src/index.html
@@ -0,0 +1,151 @@
+<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
+    <linearGradient id="grad1" x1="393.05" y1="391.01" x2="393.05" y2="147.71" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#35AAF9"/>
+      <stop offset="1" stop-color="#993BDC"/>
+    </linearGradient>	
+
+   <linearGradient id="grad2" x1="393.05" y1="391.01" x2="393.05" y2="247.71" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#FFEE2A"/>
+      <stop offset="1" stop-color="#35AAF9"/>
+    </linearGradient>	
+
+   <linearGradient id="grad3" x1="393.05" y1="551.01" x2="393.05" y2="347.71" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#D93964"/>
+      <stop offset="1" stop-color="#8D2AE6"/>
+    </linearGradient>
+
+   <linearGradient id="grad4" x1="393.05" y1="351.01" x2="393.05" y2="207.71" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#EF5927"/>
+      <stop offset="1" stop-color="#F72785"/>
+    </linearGradient>		
+<g >
+	  
+
+	<g id="fat" stroke="#DC2922" fill="none"  stroke-linecap="round" stroke-miterlimit="10" stroke-width="4">
+            <path d="M349.55,495.05l100.29-.1h-.29"/>
+        <line x1="309.55" y1="480.95" x2="489.55" y2="480.77"/>
+        <line x1="284.55" y1="465.95" x2="514.55" y2="465.73"/>
+        <line x1="265.55" y1="450.95" x2="533.55" y2="450.69"/>
+        <line x1="250.55" y1="435.95" x2="548.55" y2="435.67"/>
+        <line x1="237.55" y1="420.95" x2="561.55" y2="420.65"/>
+        <line x1="227.55" y1="405.95" x2="571.55" y2="405.63"/>
+        <line x1="219.55" y1="390.95" x2="579.55" y2="390.61"/>
+        <line x1="212.55" y1="375.95" x2="586.55" y2="375.59"/>
+        <line x1="207.55" y1="360.95" x2="591.55" y2="360.59"/>
+        <line x1="203.55" y1="345.95" x2="595.55" y2="345.57"/>
+        <line x1="200.55" y1="330.95" x2="598.55" y2="330.57"/>
+        <line x1="198.55" y1="315.95" x2="600.55" y2="315.57"/>
+        <line x1="198.55" y1="300.95" x2="600.55" y2="300.57"/>
+        <line x1="198.55" y1="285.95" x2="600.55" y2="285.57"/>
+        <line x1="200.55" y1="270.95" x2="598.55" y2="270.57"/>
+        <line x1="203.55" y1="255.95" x2="595.55" y2="255.57"/>
+        <line x1="207.55" y1="240.95" x2="591.55" y2="240.59"/>
+        <line x1="212.55" y1="225.95" x2="586.55" y2="225.59"/>
+        <line x1="219.55" y1="210.95" x2="579.55" y2="210.61"/>
+        <line x1="227.55" y1="195.95" x2="571.55" y2="195.63"/>
+        <line x1="237.55" y1="180.95" x2="561.55" y2="180.65"/>
+        <line x1="250.55" y1="165.95" x2="548.55" y2="165.67"/>
+        <line x1="265.55" y1="150.95" x2="533.55" y2="150.69"/>
+        <line x1="284.55" y1="135.95" x2="514.55" y2="135.73"/>
+        <line x1="309.55" y1="120.95" x2="489.55" y2="120.77"/>
+        <polyline points="349.55 104.95 349.26 104.95 449.55 104.95"/>
+
+    </g> 
+	
+<g id="mid" stroke="#F7811E"  fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4">
+         <path d="M349.55,495.05l100.29-.1h-.29"/>
+        <line x1="309.55" y1="480.95" x2="489.55" y2="480.77"/>
+        <line x1="284.55" y1="465.95" x2="514.55" y2="465.73"/>
+        <line x1="265.55" y1="450.95" x2="533.55" y2="450.69"/>
+        <line x1="250.55" y1="435.95" x2="548.55" y2="435.67"/>
+        <line x1="237.55" y1="420.95" x2="561.55" y2="420.65"/>
+        <line x1="227.55" y1="405.95" x2="571.55" y2="405.63"/>
+        <line x1="219.55" y1="390.95" x2="579.55" y2="390.61"/>
+        <line x1="212.55" y1="375.95" x2="586.55" y2="375.59"/>
+        <line x1="207.55" y1="360.95" x2="591.55" y2="360.59"/>
+        <line x1="203.55" y1="345.95" x2="595.55" y2="345.57"/>
+        <line x1="200.55" y1="330.95" x2="598.55" y2="330.57"/>
+        <line x1="198.55" y1="315.95" x2="600.55" y2="315.57"/>
+        <line x1="198.55" y1="300.95" x2="600.55" y2="300.57"/>
+        <line x1="198.55" y1="285.95" x2="600.55" y2="285.57"/>
+        <line x1="200.55" y1="270.95" x2="598.55" y2="270.57"/>
+        <line x1="203.55" y1="255.95" x2="595.55" y2="255.57"/>
+        <line x1="207.55" y1="240.95" x2="591.55" y2="240.59"/>
+        <line x1="212.55" y1="225.95" x2="586.55" y2="225.59"/>
+        <line x1="219.55" y1="210.95" x2="579.55" y2="210.61"/>
+        <line x1="227.55" y1="195.95" x2="571.55" y2="195.63"/>
+        <line x1="237.55" y1="180.95" x2="561.55" y2="180.65"/>
+        <line x1="250.55" y1="165.95" x2="548.55" y2="165.67"/>
+        <line x1="265.55" y1="150.95" x2="533.55" y2="150.69"/>
+        <line x1="284.55" y1="135.95" x2="514.55" y2="135.73"/>
+        <line x1="309.55" y1="120.95" x2="489.55" y2="120.77"/>
+        <polyline points="349.55 104.95 349.26 104.95 449.55 104.95"/>
+
+    </g>	
+	<g id="thin" stroke="#FCDE35" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4">
+            <path d="M349.55,495.05l100.29-.1h-.29"/>
+        <line x1="309.55" y1="480.95" x2="489.55" y2="480.77"/>
+        <line x1="284.55" y1="465.95" x2="514.55" y2="465.73"/>
+        <line x1="265.55" y1="450.95" x2="533.55" y2="450.69"/>
+        <line x1="250.55" y1="435.95" x2="548.55" y2="435.67"/>
+        <line x1="237.55" y1="420.95" x2="561.55" y2="420.65"/>
+        <line x1="227.55" y1="405.95" x2="571.55" y2="405.63"/>
+        <line x1="219.55" y1="390.95" x2="579.55" y2="390.61"/>
+        <line x1="212.55" y1="375.95" x2="586.55" y2="375.59"/>
+        <line x1="207.55" y1="360.95" x2="591.55" y2="360.59"/>
+        <line x1="203.55" y1="345.95" x2="595.55" y2="345.57"/>
+        <line x1="200.55" y1="330.95" x2="598.55" y2="330.57"/>
+        <line x1="198.55" y1="315.95" x2="600.55" y2="315.57"/>
+        <line x1="198.55" y1="300.95" x2="600.55" y2="300.57"/>
+        <line x1="198.55" y1="285.95" x2="600.55" y2="285.57"/>
+        <line x1="200.55" y1="270.95" x2="598.55" y2="270.57"/>
+        <line x1="203.55" y1="255.95" x2="595.55" y2="255.57"/>
+        <line x1="207.55" y1="240.95" x2="591.55" y2="240.59"/>
+        <line x1="212.55" y1="225.95" x2="586.55" y2="225.59"/>
+        <line x1="219.55" y1="210.95" x2="579.55" y2="210.61"/>
+        <line x1="227.55" y1="195.95" x2="571.55" y2="195.63"/>
+        <line x1="237.55" y1="180.95" x2="561.55" y2="180.65"/>
+        <line x1="250.55" y1="165.95" x2="548.55" y2="165.67"/>
+        <line x1="265.55" y1="150.95" x2="533.55" y2="150.69"/>
+        <line x1="284.55" y1="135.95" x2="514.55" y2="135.73"/>
+        <line x1="309.55" y1="120.95" x2="489.55" y2="120.77"/>
+        <polyline points="349.55 104.95 349.26 104.95 449.55 104.95"/>
+
+    </g>
+ 
+	
+	
+<!-- 	<g id="front" stroke="#FFF" fill="none"  stroke-linecap="round" stroke-miterlimit="10" stroke-width="4">
+         <path d="M349.55,495.05l100.29-.1h-.29"/>
+        <line x1="309.55" y1="480.95" x2="489.55" y2="480.77"/>
+        <line x1="284.55" y1="465.95" x2="514.55" y2="465.73"/>
+        <line x1="265.55" y1="450.95" x2="533.55" y2="450.69"/>
+        <line x1="250.55" y1="435.95" x2="548.55" y2="435.67"/>
+        <line x1="237.55" y1="420.95" x2="561.55" y2="420.65"/>
+        <line x1="227.55" y1="405.95" x2="571.55" y2="405.63"/>
+        <line x1="219.55" y1="390.95" x2="579.55" y2="390.61"/>
+        <line x1="212.55" y1="375.95" x2="586.55" y2="375.59"/>
+        <line x1="207.55" y1="360.95" x2="591.55" y2="360.59"/>
+        <line x1="203.55" y1="345.95" x2="595.55" y2="345.57"/>
+        <line x1="200.55" y1="330.95" x2="598.55" y2="330.57"/>
+        <line x1="198.55" y1="315.95" x2="600.55" y2="315.57"/>
+        <line x1="198.55" y1="300.95" x2="600.55" y2="300.57"/>
+        <line x1="198.55" y1="285.95" x2="600.55" y2="285.57"/>
+        <line x1="200.55" y1="270.95" x2="598.55" y2="270.57"/>
+        <line x1="203.55" y1="255.95" x2="595.55" y2="255.57"/>
+        <line x1="207.55" y1="240.95" x2="591.55" y2="240.59"/>
+        <line x1="212.55" y1="225.95" x2="586.55" y2="225.59"/>
+        <line x1="219.55" y1="210.95" x2="579.55" y2="210.61"/>
+        <line x1="227.55" y1="195.95" x2="571.55" y2="195.63"/>
+        <line x1="237.55" y1="180.95" x2="561.55" y2="180.65"/>
+        <line x1="250.55" y1="165.95" x2="548.55" y2="165.67"/>
+        <line x1="265.55" y1="150.95" x2="533.55" y2="150.69"/>
+        <line x1="284.55" y1="135.95" x2="514.55" y2="135.73"/>
+        <line x1="309.55" y1="120.95" x2="489.55" y2="120.77"/>
+        <polyline points="349.55 104.95 349.26 104.95 449.55 104.95"/>
+
+    </g>    
+    -->
+	
+</g>
+</svg>
diff --git a/the-flame-keeps-burning/src/script.js b/the-flame-keeps-burning/src/script.js
new file mode 100644
index 0000000..4f5921b
--- /dev/null
+++ b/the-flame-keeps-burning/src/script.js
@@ -0,0 +1,56 @@
+let select = s => document.querySelector(s),
+  selectAll = s =>  document.querySelectorAll(s),
+		mainSVG = select('#mainSVG'),
+		mid = gsap.utils.toArray('#mid *')//.reverse()
+
+gsap.set('svg', {
+	visibility: 'visible'
+})
+
+let fatTl = gsap.timeline();
+fatTl.fromTo('#fat *', {
+	drawSVG: '70% 0%'
+}, {
+		drawSVG: '40% 60%',
+	stagger: {
+		each: 0.05,
+		repeat: -1,
+		yoyo: true
+	},
+	duration: 0.75,
+	ease: 'sine.inOut'
+})
+
+let midTl = gsap.timeline();
+midTl.fromTo(mid, {
+	drawSVG: '50% 0%'
+}, {
+		drawSVG: '50% 60%',
+	stagger: {
+		each: 0.05,
+		repeat: -1,
+		yoyo: true
+	},
+	duration: 0.75,
+	ease: 'sine.inOut'
+})
+
+let thinTl = gsap.timeline();
+thinTl.fromTo('#thin *', {
+	drawSVG: '0% 30%'
+}, {
+		drawSVG: '60% 60%',
+	stagger: {
+		each: 0.05,
+		repeat: -1,
+		yoyo: true
+	},
+	duration: 0.75,
+	ease: 'sine.inOut'
+})
+
+let mainTl = gsap.timeline();
+mainTl.add(fatTl)
+.add(midTl, 0.1)
+.add(thinTl, 0.2).seek(100)
+//ScrubGSAPTimeline(mainTl)
\ No newline at end of file
diff --git a/the-flame-keeps-burning/src/style.css b/the-flame-keeps-burning/src/style.css
new file mode 100644
index 0000000..c36433c
--- /dev/null
+++ b/the-flame-keeps-burning/src/style.css
@@ -0,0 +1,23 @@
+body {
+ background-color: #1c1c1c;
+ overflow: hidden;
+ text-align:center;
+  display: flex;
+  align-items: center;
+  justify-content: center; 
+}
+
+body,
+html {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+svg {
+ width: 100%;
+ height: 100%;
+ visibility: hidden;
+ 
+}
\ No newline at end of file
diff --git a/the-goo-filter-illustrated/README.markdown b/the-goo-filter-illustrated/README.markdown
new file mode 100644
index 0000000..696f4c3
--- /dev/null
+++ b/the-goo-filter-illustrated/README.markdown
@@ -0,0 +1,11 @@
+# The "Goo Filter" illustrated
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/chrisgannon/pen/JpYKOg](https://codepen.io/chrisgannon/pen/JpYKOg).
+
+ ###Click the circles to animate them to demonstrate the effect further.
+I spoke at [GenerateConf](https://youtu.be/ZDFwBEXN0pM) last year and I used this pen to demonstrate how the 'goo' filter is working.
+
+1. First we apply a blur to the contents of a group.
+2. Then we apply a color matrix filter to boost the transparent areas back up to full opacity. 
+
+The result is a liquid effect - every time two object come close to each other their blurred edges touch but because those edges have their opacity boosted to full they appear to join together like liquid. 
+
diff --git a/the-goo-filter-illustrated/dist/index.html b/the-goo-filter-illustrated/dist/index.html
new file mode 100644
index 0000000..122f89e
--- /dev/null
+++ b/the-goo-filter-illustrated/dist/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>The "Goo Filter" illustrated</title>
+  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet"><link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
+<filter id="goo" width="300%" height="300%" x="-100%" y="-100%" color-interpolation-filters="sRGB">
+   <feGaussianBlur class="blurValue" in="SourceGraphic" stdDeviation="0" result="blur" />
+   <feColorMatrix class="matrix" in="blur" mode="matrix" values="1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0"/>
+</filter>
+<g transform="translate(0, -100)">
+<g class="blurGroup" filter="url(#goo)" fill="#EF2D56">
+   <circle cx="280" cy="260" r="36" />
+   <circle cx="360" cy="260" r="36" />
+   <circle cx="440" cy="260" r="36" />
+   <circle cx="520" cy="260" r="36" />
+</g>
+ 
+ <g class="sliderGroup" transform="translate(0, 420)"> 
+      <line id="fillBar" fill="none" stroke="#EDE6E3" stroke-width="8" stroke-linecap="round" stroke-miterlimit="10" x1="170" y1="20" x2="630" y2="20" opacity="0.3" />
+
+  <g class="handle">
+
+      <circle class="handleCircle" fill="#EDE6E3" cx="200" cy="20" r="20" /> 
+   
+  </g>
+ </g> 
+ <g class="sliderGroup2" transform="translate(0, 540)"> 
+      <line id="fillBar" fill="none" stroke="#EDE6E3" stroke-width="8" stroke-linecap="round" stroke-miterlimit="10" x1="170" y1="20" x2="630" y2="20" opacity="0.3" />
+  <g class="handle2">
+
+      <circle class="handleCircle" fill="#EDE6E3" cx="200" cy="20" r="20" /> 
+   
+  </g>
+ </g> 
+ <text x="166" y="400">1. Apply feGaussianBlur to the group containing the circles</text> 
+ <text x="166" y="520">2. Boost the transparent areas of the blur with feColorMatrix</text> 
+ <text class="info" x="50%" y="160" opacity="0">Now click the circles!</text> 
+ </g>
+</svg>
+<!-- partial -->
+  <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/EndArrayPlugin.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/the-goo-filter-illustrated/dist/script.js b/the-goo-filter-illustrated/dist/script.js
new file mode 100644
index 0000000..06befc3
--- /dev/null
+++ b/the-goo-filter-illustrated/dist/script.js
@@ -0,0 +1,114 @@
+var xmlns = "http://www.w3.org/2000/svg",
+  xlinkns = "http://www.w3.org/1999/xlink",
+  select = function(s) {
+    return document.querySelector(s);
+  },
+  selectAll = function(s) {
+    return document.querySelectorAll(s);
+  },
+    matrix = select('.matrix'),
+    blurGroup = select('.blurGroup'),
+    blurValue = select('.blurValue'),
+    goo = select('#goo'),
+    handle = select('.handle'),
+    handle2 = select('.handle2'),
+    maxX = 400,
+    matrixInitValues = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0],
+    matrixEndValues = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,23,-7]
+  
+
+TweenMax.set('svg', {
+  visibility: 'visible'
+})
+
+TweenMax.set([handle, handle2], {
+ x:0
+})
+/* TweenMax.set(blurGroup, {
+ scale:3,
+ transformOrigin:'50% 50%'
+}) */
+ Draggable.create(handle, {
+  type:'x',
+  cursor:'pointer',
+  bounds:{minX:0, maxX:maxX},
+  onDrag:dragUpdate,
+  onDragEnd:checkProgress
+  
+ })
+Draggable.create(handle2, {
+  type:'x',
+  cursor:'pointer',
+  bounds:{minX:0, maxX:maxX},
+  onDrag:dragUpdate2,
+  onDragEnd:checkProgress  
+  
+ })
+
+var matrixTl = new TimelineMax({paused:true});
+matrixTl.to(matrixInitValues, 10, {
+ endArray:matrixEndValues,
+ onUpdate:function(){
+  TweenMax.set(matrix, {
+   attr:{
+    values:matrixInitValues
+   }
+  })
+ },
+   ease:Expo.easeIn
+})
+
+function dragUpdate(){
+ 
+ var posX = handle._gsTransform.x;
+ var posY = handle._gsTransform.y;
+ var dragPercent = (posX/maxX);
+
+ TweenMax.set(blurValue, {
+  attr:{
+   stdDeviation:dragPercent*20
+  }
+ }) 
+
+ 
+}
+
+function dragUpdate2(){
+ 
+ var posX = handle2._gsTransform.x;
+ var posY = handle2._gsTransform.y;
+ var dragPercent = (posX/maxX);
+
+ TweenMax.set(matrixTl, {
+  progress:dragPercent
+ }) 
+ 
+}
+
+var animTl =  new TimelineMax({paused:true})
+animTl.to('.blurGroup circle', 2, {
+  //rotation:180,
+  attr:{
+   cx:420
+  },
+  svgOrigin:'400 300',
+  repeat:-1,
+  ease:Expo.easeInOut,
+  yoyoEase:Elastic.easeOut.config(1,0.28)
+ })
+
+blurGroup.onclick = function(){
+ animTl.paused(!animTl.paused())
+}
+
+function checkProgress(){
+ if(animTl.isActive()){return};
+ if(handle._gsTransform.x >= maxX && handle2._gsTransform.x >= maxX){
+  TweenMax.to('.info', 0.6, {
+   autoAlpha:1,
+   repeat:7,
+   ease:Power2.easeIn,
+   yoyoEase:Power2.easeOut
+  })
+ }
+}
\ No newline at end of file
diff --git a/the-goo-filter-illustrated/dist/style.css b/the-goo-filter-illustrated/dist/style.css
new file mode 100644
index 0000000..0f83357
--- /dev/null
+++ b/the-goo-filter-illustrated/dist/style.css
@@ -0,0 +1,47 @@
+body {
+  background-color:#2d2d2d;;
+  overflow: hidden;
+  text-align:center;
+}
+
+body,
+html {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+
+svg{
+  width:100%;
+  height:100%;
+  visibility:hidden;
+}
+
+circle, g{
+ -webkit-tap-highlight-color:transparent;
+}
+
+text{
+ fill:#FFFCF9;
+ font-family: 'Questrial', serif;
+ font-size:17px;
+ letter-spacing:0.3px;
+ user-select:none;
+ -moz-user-select:none;
+}
+
+circle{
+ -webkit-tap-highlight-color:transparent;
+}
+
+.blurGroup{
+ 
+ cursor:pointer;
+}
+
+.info{
+ text-anchor:middle;
+ font-size:42px;
+}
\ No newline at end of file
diff --git a/the-goo-filter-illustrated/license.txt b/the-goo-filter-illustrated/license.txt
new file mode 100644
index 0000000..93c72fc
--- /dev/null
+++ b/the-goo-filter-illustrated/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Chris Gannon (https://codepen.io/chrisgannon/pen/JpYKOg)
+
+
+Fork of an original work that is now private.
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/the-goo-filter-illustrated/src/index.html b/the-goo-filter-illustrated/src/index.html
new file mode 100644
index 0000000..c1582b9
--- /dev/null
+++ b/the-goo-filter-illustrated/src/index.html
@@ -0,0 +1,35 @@
+<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
+<filter id="goo" width="300%" height="300%" x="-100%" y="-100%" color-interpolation-filters="sRGB">
+   <feGaussianBlur class="blurValue" in="SourceGraphic" stdDeviation="0" result="blur" />
+   <feColorMatrix class="matrix" in="blur" mode="matrix" values="1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0"/>
+</filter>
+<g transform="translate(0, -100)">
+<g class="blurGroup" filter="url(#goo)" fill="#EF2D56">
+   <circle cx="280" cy="260" r="36" />
+   <circle cx="360" cy="260" r="36" />
+   <circle cx="440" cy="260" r="36" />
+   <circle cx="520" cy="260" r="36" />
+</g>
+ 
+ <g class="sliderGroup" transform="translate(0, 420)"> 
+      <line id="fillBar" fill="none" stroke="#EDE6E3" stroke-width="8" stroke-linecap="round" stroke-miterlimit="10" x1="170" y1="20" x2="630" y2="20" opacity="0.3" />
+
+  <g class="handle">
+
+      <circle class="handleCircle" fill="#EDE6E3" cx="200" cy="20" r="20" /> 
+   
+  </g>
+ </g> 
+ <g class="sliderGroup2" transform="translate(0, 540)"> 
+      <line id="fillBar" fill="none" stroke="#EDE6E3" stroke-width="8" stroke-linecap="round" stroke-miterlimit="10" x1="170" y1="20" x2="630" y2="20" opacity="0.3" />
+  <g class="handle2">
+
+      <circle class="handleCircle" fill="#EDE6E3" cx="200" cy="20" r="20" /> 
+   
+  </g>
+ </g> 
+ <text x="166" y="400">1. Apply feGaussianBlur to the group containing the circles</text> 
+ <text x="166" y="520">2. Boost the transparent areas of the blur with feColorMatrix</text> 
+ <text class="info" x="50%" y="160" opacity="0">Now click the circles!</text> 
+ </g>
+</svg>
\ No newline at end of file
diff --git a/the-goo-filter-illustrated/src/script.js b/the-goo-filter-illustrated/src/script.js
new file mode 100644
index 0000000..06befc3
--- /dev/null
+++ b/the-goo-filter-illustrated/src/script.js
@@ -0,0 +1,114 @@
+var xmlns = "http://www.w3.org/2000/svg",
+  xlinkns = "http://www.w3.org/1999/xlink",
+  select = function(s) {
+    return document.querySelector(s);
+  },
+  selectAll = function(s) {
+    return document.querySelectorAll(s);
+  },
+    matrix = select('.matrix'),
+    blurGroup = select('.blurGroup'),
+    blurValue = select('.blurValue'),
+    goo = select('#goo'),
+    handle = select('.handle'),
+    handle2 = select('.handle2'),
+    maxX = 400,
+    matrixInitValues = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0],
+    matrixEndValues = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,23,-7]
+  
+
+TweenMax.set('svg', {
+  visibility: 'visible'
+})
+
+TweenMax.set([handle, handle2], {
+ x:0
+})
+/* TweenMax.set(blurGroup, {
+ scale:3,
+ transformOrigin:'50% 50%'
+}) */
+ Draggable.create(handle, {
+  type:'x',
+  cursor:'pointer',
+  bounds:{minX:0, maxX:maxX},
+  onDrag:dragUpdate,
+  onDragEnd:checkProgress
+  
+ })
+Draggable.create(handle2, {
+  type:'x',
+  cursor:'pointer',
+  bounds:{minX:0, maxX:maxX},
+  onDrag:dragUpdate2,
+  onDragEnd:checkProgress  
+  
+ })
+
+var matrixTl = new TimelineMax({paused:true});
+matrixTl.to(matrixInitValues, 10, {
+ endArray:matrixEndValues,
+ onUpdate:function(){
+  TweenMax.set(matrix, {
+   attr:{
+    values:matrixInitValues
+   }
+  })
+ },
+   ease:Expo.easeIn
+})
+
+function dragUpdate(){
+ 
+ var posX = handle._gsTransform.x;
+ var posY = handle._gsTransform.y;
+ var dragPercent = (posX/maxX);
+
+ TweenMax.set(blurValue, {
+  attr:{
+   stdDeviation:dragPercent*20
+  }
+ }) 
+
+ 
+}
+
+function dragUpdate2(){
+ 
+ var posX = handle2._gsTransform.x;
+ var posY = handle2._gsTransform.y;
+ var dragPercent = (posX/maxX);
+
+ TweenMax.set(matrixTl, {
+  progress:dragPercent
+ }) 
+ 
+}
+
+var animTl =  new TimelineMax({paused:true})
+animTl.to('.blurGroup circle', 2, {
+  //rotation:180,
+  attr:{
+   cx:420
+  },
+  svgOrigin:'400 300',
+  repeat:-1,
+  ease:Expo.easeInOut,
+  yoyoEase:Elastic.easeOut.config(1,0.28)
+ })
+
+blurGroup.onclick = function(){
+ animTl.paused(!animTl.paused())
+}
+
+function checkProgress(){
+ if(animTl.isActive()){return};
+ if(handle._gsTransform.x >= maxX && handle2._gsTransform.x >= maxX){
+  TweenMax.to('.info', 0.6, {
+   autoAlpha:1,
+   repeat:7,
+   ease:Power2.easeIn,
+   yoyoEase:Power2.easeOut
+  })
+ }
+}
\ No newline at end of file
diff --git a/the-goo-filter-illustrated/src/style.css b/the-goo-filter-illustrated/src/style.css
new file mode 100644
index 0000000..0f83357
--- /dev/null
+++ b/the-goo-filter-illustrated/src/style.css
@@ -0,0 +1,47 @@
+body {
+  background-color:#2d2d2d;;
+  overflow: hidden;
+  text-align:center;
+}
+
+body,
+html {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+
+svg{
+  width:100%;
+  height:100%;
+  visibility:hidden;
+}
+
+circle, g{
+ -webkit-tap-highlight-color:transparent;
+}
+
+text{
+ fill:#FFFCF9;
+ font-family: 'Questrial', serif;
+ font-size:17px;
+ letter-spacing:0.3px;
+ user-select:none;
+ -moz-user-select:none;
+}
+
+circle{
+ -webkit-tap-highlight-color:transparent;
+}
+
+.blurGroup{
+ 
+ cursor:pointer;
+}
+
+.info{
+ text-anchor:middle;
+ font-size:42px;
+}
\ No newline at end of file
diff --git a/the-matrix-resurrections-sparklingman-digital-poster-026/README.markdown b/the-matrix-resurrections-sparklingman-digital-poster-026/README.markdown
new file mode 100644
index 0000000..baba6cf
--- /dev/null
+++ b/the-matrix-resurrections-sparklingman-digital-poster-026/README.markdown
@@ -0,0 +1,5 @@
+# The Matrix Resurrections | Sparklingman digital poster #026
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/sparklingman/pen/vYedGEX](https://codepen.io/sparklingman/pen/vYedGEX).
+
+
diff --git a/the-matrix-resurrections-sparklingman-digital-poster-026/dist/index.html b/the-matrix-resurrections-sparklingman-digital-poster-026/dist/index.html
new file mode 100644
index 0000000..5eabf53
--- /dev/null
+++ b/the-matrix-resurrections-sparklingman-digital-poster-026/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - The Matrix Resurrections | Sparklingman digital poster #026</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/the-matrix-resurrections-sparklingman-digital-poster-026/dist/script.js b/the-matrix-resurrections-sparklingman-digital-poster-026/dist/script.js
new file mode 100644
index 0000000..bdb66fe
--- /dev/null
+++ b/the-matrix-resurrections-sparklingman-digital-poster-026/dist/script.js
@@ -0,0 +1,36 @@
+let body, box, canvas, poster, random
+body = document.body
+poster = document.createElement('div')
+poster.setAttribute('id', 'poster')
+body.prepend(poster)
+canvas = document.createElement('div')
+canvas.setAttribute('id', 'canvas')
+poster.prepend(canvas)
+
+box = 160
+random = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function colors() {
+    return getComputedStyle(document.documentElement).getPropertyValue('--clr' + random(1, 5) + '')
+}
+for (let i = 0; i < box; i++) {
+    let span = document.createElement('span')
+    span.style.left = random(-5, 100) + "%"
+    canvas.prepend(span)
+}
+
+function randomFull() {
+    for (let d = 0; d < document.querySelectorAll('span').length; d++) {
+        let span = document.querySelectorAll('span')[d]
+        span.style.background = "linear-gradient(" + colors() + ", transparent)"
+        span.style.height = random(8, 96) + "%"
+        span.style.opacity = '0.' + random(1, 9)
+        span.style.transform = "translate(1." + random(0, 9) + "vmin, 0)"
+    }
+}
+
+poster.onclick = randomFull;
+// setInterval(randomFull, 1000);
+window.requestAnimationFrame(randomFull);
\ No newline at end of file
diff --git a/the-matrix-resurrections-sparklingman-digital-poster-026/dist/style.css b/the-matrix-resurrections-sparklingman-digital-poster-026/dist/style.css
new file mode 100644
index 0000000..9fdf96e
--- /dev/null
+++ b/the-matrix-resurrections-sparklingman-digital-poster-026/dist/style.css
@@ -0,0 +1,69 @@
+:root {
+    --black: #000;
+    --grey: #7D808A;
+    --white: #fff;
+    --clr1: #2fb982;
+    --clr2: #2b883e;
+    --clr3: #229940;
+    --clr4: #038C4C;
+    --clr5: #025930;
+}
+
+*,
+*::after,
+*::before,
+html,
+body {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background: var(--grey);
+    display: grid;
+    height: 100vh;
+    place-items: center;
+}
+
+#poster {
+    background-color: var(--white);
+    border: 2vmin solid var(--black);
+    box-shadow: 0 4vmin 8vmin -4vmin;
+    box-sizing: content-box;
+    display: grid;
+    height: 80vmin;
+    padding: 4vmin;
+    place-items: center;
+    width: 50vmin;
+}
+
+#canvas {
+    align-items: flex-start;
+    background: var(--black);
+    display: flex;
+    gap: .3vmin;
+    height: 80vmin;
+    overflow: hidden;
+    justify-content: center;
+    position: relative;
+    width: 50vmin;
+}
+
+#canvas::before {
+    bottom: 4.8vmin;
+    color: var(--clr4);
+    content: 'The Matrix Resurrections';
+    font: normal 1.25vmin/1 monospace;
+    position: absolute;
+    pointer-events: none;
+}
+
+#canvas span {
+    background: var(--clr5);
+    height: 10%;
+    opacity: .75;
+    position: absolute;
+    transition: .2s linear;
+    width: .4vmin;
+}
\ No newline at end of file
diff --git a/the-matrix-resurrections-sparklingman-digital-poster-026/license.txt b/the-matrix-resurrections-sparklingman-digital-poster-026/license.txt
new file mode 100644
index 0000000..2db6fd1
--- /dev/null
+++ b/the-matrix-resurrections-sparklingman-digital-poster-026/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Sparklingman (https://codepen.io/sparklingman/pen/vYedGEX)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/the-matrix-resurrections-sparklingman-digital-poster-026/src/index.haml b/the-matrix-resurrections-sparklingman-digital-poster-026/src/index.haml
new file mode 100644
index 0000000..e69de29
diff --git a/the-matrix-resurrections-sparklingman-digital-poster-026/src/script.js b/the-matrix-resurrections-sparklingman-digital-poster-026/src/script.js
new file mode 100644
index 0000000..bdb66fe
--- /dev/null
+++ b/the-matrix-resurrections-sparklingman-digital-poster-026/src/script.js
@@ -0,0 +1,36 @@
+let body, box, canvas, poster, random
+body = document.body
+poster = document.createElement('div')
+poster.setAttribute('id', 'poster')
+body.prepend(poster)
+canvas = document.createElement('div')
+canvas.setAttribute('id', 'canvas')
+poster.prepend(canvas)
+
+box = 160
+random = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function colors() {
+    return getComputedStyle(document.documentElement).getPropertyValue('--clr' + random(1, 5) + '')
+}
+for (let i = 0; i < box; i++) {
+    let span = document.createElement('span')
+    span.style.left = random(-5, 100) + "%"
+    canvas.prepend(span)
+}
+
+function randomFull() {
+    for (let d = 0; d < document.querySelectorAll('span').length; d++) {
+        let span = document.querySelectorAll('span')[d]
+        span.style.background = "linear-gradient(" + colors() + ", transparent)"
+        span.style.height = random(8, 96) + "%"
+        span.style.opacity = '0.' + random(1, 9)
+        span.style.transform = "translate(1." + random(0, 9) + "vmin, 0)"
+    }
+}
+
+poster.onclick = randomFull;
+// setInterval(randomFull, 1000);
+window.requestAnimationFrame(randomFull);
\ No newline at end of file
diff --git a/the-matrix-resurrections-sparklingman-digital-poster-026/src/style.css b/the-matrix-resurrections-sparklingman-digital-poster-026/src/style.css
new file mode 100644
index 0000000..9fdf96e
--- /dev/null
+++ b/the-matrix-resurrections-sparklingman-digital-poster-026/src/style.css
@@ -0,0 +1,69 @@
+:root {
+    --black: #000;
+    --grey: #7D808A;
+    --white: #fff;
+    --clr1: #2fb982;
+    --clr2: #2b883e;
+    --clr3: #229940;
+    --clr4: #038C4C;
+    --clr5: #025930;
+}
+
+*,
+*::after,
+*::before,
+html,
+body {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background: var(--grey);
+    display: grid;
+    height: 100vh;
+    place-items: center;
+}
+
+#poster {
+    background-color: var(--white);
+    border: 2vmin solid var(--black);
+    box-shadow: 0 4vmin 8vmin -4vmin;
+    box-sizing: content-box;
+    display: grid;
+    height: 80vmin;
+    padding: 4vmin;
+    place-items: center;
+    width: 50vmin;
+}
+
+#canvas {
+    align-items: flex-start;
+    background: var(--black);
+    display: flex;
+    gap: .3vmin;
+    height: 80vmin;
+    overflow: hidden;
+    justify-content: center;
+    position: relative;
+    width: 50vmin;
+}
+
+#canvas::before {
+    bottom: 4.8vmin;
+    color: var(--clr4);
+    content: 'The Matrix Resurrections';
+    font: normal 1.25vmin/1 monospace;
+    position: absolute;
+    pointer-events: none;
+}
+
+#canvas span {
+    background: var(--clr5);
+    height: 10%;
+    opacity: .75;
+    position: absolute;
+    transition: .2s linear;
+    width: .4vmin;
+}
\ No newline at end of file
diff --git a/the-power-of-inherit/README.markdown b/the-power-of-inherit/README.markdown
new file mode 100644
index 0000000..b97f284
--- /dev/null
+++ b/the-power-of-inherit/README.markdown
@@ -0,0 +1,5 @@
+# the power of inherit
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/warkentien2/pen/jOERBGw](https://codepen.io/warkentien2/pen/jOERBGw).
+
+Inherit is great for creating stagger animations and for transferring a border-radius from the parent to a child element.
diff --git a/the-power-of-inherit/dist/index.html b/the-power-of-inherit/dist/index.html
new file mode 100644
index 0000000..2ead78d
--- /dev/null
+++ b/the-power-of-inherit/dist/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - the power of inherit</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="outer-box">
+  <div class="box box-a">
+    <div class="box box-b">
+      <div class="box box-a">
+        <div class="box box-b">
+          <div class="box box-a">
+            <div class="box box-b">
+              <div class="box box-a">
+                <div class="box box-b">
+                  <div class="box box-a">
+                    <div class="box box-b">
+                      <div class="box box-a">
+                        <div class="box box-b">
+                          <div class="box box-a">
+                            <div class="box box-b">
+                              <div class="box box-a">
+                                <div class="box box-b">
+                                  <div class="box box-a">
+                                    <div class="box box-b">
+                                      <div class="box box-a"></div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/the-power-of-inherit/dist/script.js b/the-power-of-inherit/dist/script.js
new file mode 100644
index 0000000..e454d9b
--- /dev/null
+++ b/the-power-of-inherit/dist/script.js
@@ -0,0 +1 @@
+// Nothing here ¯\_(ツ)_/¯
\ No newline at end of file
diff --git a/the-power-of-inherit/dist/style.css b/the-power-of-inherit/dist/style.css
new file mode 100644
index 0000000..4eacd50
--- /dev/null
+++ b/the-power-of-inherit/dist/style.css
@@ -0,0 +1,47 @@
+body {
+  margin: 0;
+  background: #121318;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+}
+
+.outer-box {
+  width: 90vw;
+  height: 90vw;
+  background: #8324ff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: rotate(-45deg);
+  animation: spiral 5s ease-in-out -1s alternate infinite;
+}
+
+@keyframes spiral {
+  0% {
+    transform: rotate(-45deg);
+  }
+  100% {
+    transform: rotate(45deg);
+  }
+}
+.box {
+  width: 82.5%;
+  height: 82.5%;
+  animation: inherit;
+  display: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+  transform: inherit;
+}
+
+.box-a {
+  background: #121318;
+}
+
+.box-b {
+  background: #8324ff;
+}
\ No newline at end of file
diff --git a/the-power-of-inherit/license.txt b/the-power-of-inherit/license.txt
new file mode 100644
index 0000000..0f6b867
--- /dev/null
+++ b/the-power-of-inherit/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Philip Warkentien II (https://codepen.io/warkentien2/pen/jOERBGw)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/the-power-of-inherit/src/index.html b/the-power-of-inherit/src/index.html
new file mode 100644
index 0000000..f9c11f7
--- /dev/null
+++ b/the-power-of-inherit/src/index.html
@@ -0,0 +1,39 @@
+<div class="outer-box">
+  <div class="box box-a">
+    <div class="box box-b">
+      <div class="box box-a">
+        <div class="box box-b">
+          <div class="box box-a">
+            <div class="box box-b">
+              <div class="box box-a">
+                <div class="box box-b">
+                  <div class="box box-a">
+                    <div class="box box-b">
+                      <div class="box box-a">
+                        <div class="box box-b">
+                          <div class="box box-a">
+                            <div class="box box-b">
+                              <div class="box box-a">
+                                <div class="box box-b">
+                                  <div class="box box-a">
+                                    <div class="box box-b">
+                                      <div class="box box-a"></div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/the-power-of-inherit/src/script.js b/the-power-of-inherit/src/script.js
new file mode 100644
index 0000000..e454d9b
--- /dev/null
+++ b/the-power-of-inherit/src/script.js
@@ -0,0 +1 @@
+// Nothing here ¯\_(ツ)_/¯
\ No newline at end of file
diff --git a/the-power-of-inherit/src/style.scss b/the-power-of-inherit/src/style.scss
new file mode 100644
index 0000000..0e880d9
--- /dev/null
+++ b/the-power-of-inherit/src/style.scss
@@ -0,0 +1,52 @@
+$bgA: #121318;
+$bgB: #8324ff;
+
+body {
+  margin: 0;
+  background: $bgA;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+}
+
+.outer-box {
+  width: 90vw;
+  height: 90vw;
+  background: $bgB;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: rotate(-45deg);
+  animation: spiral 5s ease-in-out -1s alternate infinite;
+}
+
+@keyframes spiral {
+  0% {
+    transform: rotate(-45deg);
+  }
+  100% {
+    transform: rotate(45deg);
+  }
+}
+
+// INHERIT!!
+.box {
+  width: 82.5%;
+  height: 82.5%;
+  animation: inherit;
+  display: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+  transform: inherit;
+}
+
+.box-a {
+  background: $bgA;
+}
+
+.box-b {
+  background: $bgB;
+}
\ No newline at end of file
diff --git a/the-web-artisan-society-2/README.markdown b/the-web-artisan-society-2/README.markdown
new file mode 100644
index 0000000..ba24358
--- /dev/null
+++ b/the-web-artisan-society-2/README.markdown
@@ -0,0 +1,5 @@
+# The Web Artisan Society #2
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/syndicatefx/pen/XWajRJq](https://codepen.io/syndicatefx/pen/XWajRJq).
+
+Handcrafted HTML and CSS titles and page heros
diff --git a/the-web-artisan-society-2/dist/index.html b/the-web-artisan-society-2/dist/index.html
new file mode 100644
index 0000000..407fb67
--- /dev/null
+++ b/the-web-artisan-society-2/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - The Web Artisan Society #2</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div>
+	<h1>The Web <span>Artisan</span> Society</h1>
+	<h2><span>240</span> Minutes of <span>Handcrafted HTML &amp; CSS</span></h2>
+	<p>The unique art &amp; craftmanship of web design in the 21<sup>st</sup> century</p>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/the-web-artisan-society-2/dist/style.css b/the-web-artisan-society-2/dist/style.css
new file mode 100644
index 0000000..4dbbcee
--- /dev/null
+++ b/the-web-artisan-society-2/dist/style.css
@@ -0,0 +1,150 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;900&subset=latin&display=swap');
+
+:root {
+	--cream: hsl(38 47% 75%);
+	--black: hsl(20 3% 19%);
+	--red: #ea6962;
+	--orange: #e78a4e;
+	--yellow: #d8a657;
+	--green: #a9b665;
+	--aqua: #89b482;
+	--ff: "Rubik", sans-serif;
+}
+
+html {
+	font-family: var(--ff);
+	font-size: 100%;
+	block-size: 100%;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+	text-rendering: optimizeSpeed;
+	-webkit-text-size-adjust: 100%;
+	-ms-text-size-adjust: 100%;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	box-sizing: border-box;
+}
+
+*, *::before, *::after {
+	box-sizing: inherit;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	block-size: 100%;
+	padding: 5vw;
+	background-color: var(--cream);
+	color: var(--black);
+}
+
+div {
+	max-inline-size: 32rem;
+	margin-inline: auto;
+	display: grid;
+	background: linear-gradient(to top, var(--aqua), 
+		var(--aqua) 2rem, 
+		var(--green) 2rem, 
+		var(--green) 4rem,
+		var(--yellow) 4rem,
+		var(--yellow) 6rem,
+		var(--orange) 6rem,
+		var(--orange) 8rem,
+		var(--red) 8rem,
+		var(--red) 10rem,
+		var(--cream) 10rem);
+	box-shadow:
+		0 2.8px 2.2px hsl(20 3% 19% / 0.02),
+		0 6.7px 5.3px hsl(20 3% 19% / 0.028),
+		0 12.5px 10px hsl(20 3% 19% / 0.035),
+		0 22.3px 17.9px hsl(20 3% 19% / 0.042),
+		0 41.8px 33.4px hsl(20 3% 19% / 0.05),
+		0 100px 80px hsl(20 3% 19% / 0.07);
+}
+
+div > * {
+	padding: 1rem;
+}
+
+h1 {
+	align-self: start;
+	font-size: 1rem;
+	font-weight: 400;
+	line-height: 1;
+	letter-spacing: .1em;
+	text-transform: uppercase;
+	display: grid;
+	position: relative;
+	isolation: isolate;
+	background: linear-gradient(to right, var(--black), var(--black) 14rem, var(--yellow) 14rem);
+	color: var(--yellow);
+}
+
+h1 span {
+	font-size: 1.5rem;
+	font-weight: 500;
+}
+
+h1::before, h1::after {
+	content: "";
+	position: absolute;
+	width: 4rem;
+	height: 100%;
+	top: 0;
+}
+
+h1::before {
+	background-color: var(--red);
+	left: 12rem;
+	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 50% 50%);
+	
+}
+
+h1::after {
+	background-color: var(--orange);
+	left: 14rem;
+	clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%);
+}
+
+h2 {
+	align-self: center;
+	font-size: 1rem;
+	font-weight: 500;
+	line-height: 1;
+	text-transform: uppercase;
+	display: grid;
+	padding-block: 10vh 20vh;
+}
+
+h2 span:first-child {
+	font-size: 7.5rem;
+	font-weight: 900;
+}
+
+h2 span:last-child {
+	font-size: 1.5rem;
+	max-inline-size: 10ch
+}
+
+h2 + p {
+	align-self: end;
+	font-size: .875rem;
+	font-weight: 500;
+	line-height: 1.1;
+	max-inline-size: 28ch;
+	position: relative;
+	isolation: isolate;
+	background-color: var(--aqua);
+}
+
+h2 + p::before {
+	content: "";
+	position: absolute;
+	width: 4rem;
+	height: 100%;
+	top: 0;
+	left: 14rem;
+	background-color: inherit;
+	clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%);
+	z-index: -1;
+}
\ No newline at end of file
diff --git a/the-web-artisan-society-2/license.txt b/the-web-artisan-society-2/license.txt
new file mode 100644
index 0000000..4bba70a
--- /dev/null
+++ b/the-web-artisan-society-2/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Paulo Nunes (https://codepen.io/syndicatefx/pen/XWajRJq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/the-web-artisan-society-2/src/index.html b/the-web-artisan-society-2/src/index.html
new file mode 100644
index 0000000..b29eb92
--- /dev/null
+++ b/the-web-artisan-society-2/src/index.html
@@ -0,0 +1,5 @@
+<div>
+	<h1>The Web <span>Artisan</span> Society</h1>
+	<h2><span>240</span> Minutes of <span>Handcrafted HTML &amp; CSS</span></h2>
+	<p>The unique art &amp; craftmanship of web design in the 21<sup>st</sup> century</p>
+</div>
\ No newline at end of file
diff --git a/the-web-artisan-society-2/src/style.css b/the-web-artisan-society-2/src/style.css
new file mode 100644
index 0000000..62cc8be
--- /dev/null
+++ b/the-web-artisan-society-2/src/style.css
@@ -0,0 +1,151 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;900&subset=latin&display=swap');
+
+:root {
+	--cream: hsl(38 47% 75%);
+	--black: hsl(20 3% 19%);
+	--red: #ea6962;
+	--orange: #e78a4e;
+	--yellow: #d8a657;
+	--green: #a9b665;
+	--aqua: #89b482;
+	--ff: "Rubik", sans-serif;
+}
+
+html {
+	font-family: var(--ff);
+	font-size: 100%;
+	block-size: 100%;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+	text-rendering: optimizeSpeed;
+	-webkit-text-size-adjust: 100%;
+	-ms-text-size-adjust: 100%;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	box-sizing: border-box;
+}
+
+*, *::before, *::after {
+	box-sizing: inherit;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	block-size: 100%;
+	padding: 5vw;
+	background-color: var(--cream);
+	color: var(--black);
+}
+
+div {
+	max-inline-size: 32rem;
+	margin-inline: auto;
+	display: grid;
+	background: linear-gradient(to top, var(--aqua), 
+		var(--aqua) 2rem, 
+		var(--green) 2rem, 
+		var(--green) 4rem,
+		var(--yellow) 4rem,
+		var(--yellow) 6rem,
+		var(--orange) 6rem,
+		var(--orange) 8rem,
+		var(--red) 8rem,
+		var(--red) 10rem,
+		var(--cream) 10rem);
+	box-shadow:
+		0 2.8px 2.2px hsl(20 3% 19% / 0.02),
+		0 6.7px 5.3px hsl(20 3% 19% / 0.028),
+		0 12.5px 10px hsl(20 3% 19% / 0.035),
+		0 22.3px 17.9px hsl(20 3% 19% / 0.042),
+		0 41.8px 33.4px hsl(20 3% 19% / 0.05),
+		0 100px 80px hsl(20 3% 19% / 0.07);
+}
+
+div > * {
+	padding: 1rem;
+}
+
+h1 {
+	align-self: start;
+	font-size: 1rem;
+	font-weight: 400;
+	line-height: 1;
+	letter-spacing: .1em;
+	text-transform: uppercase;
+	display: grid;
+	position: relative;
+	isolation: isolate;
+	background: linear-gradient(to right, var(--black), var(--black) 14rem, var(--yellow) 14rem);
+	color: var(--yellow);
+}
+
+h1 span {
+	font-size: 1.5rem;
+	font-weight: 500;
+}
+
+h1::before, h1::after {
+	content: "";
+	position: absolute;
+	width: 4rem;
+	height: 100%;
+	top: 0;
+}
+
+h1::before {
+	background-color: var(--red);
+	left: 12rem;
+	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 50% 50%);
+	
+}
+
+h1::after {
+	background-color: var(--orange);
+	left: 14rem;
+	clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%);
+}
+
+h2 {
+	align-self: center;
+	font-size: 1rem;
+	font-weight: 500;
+	line-height: 1;
+	text-transform: uppercase;
+	display: grid;
+	padding-block: 10vh 20vh;
+}
+
+h2 span:first-child {
+	font-size: 7.5rem;
+	font-weight: 900;
+}
+
+h2 span:last-child {
+	font-size: 1.5rem;
+	max-inline-size: 10ch
+}
+
+h2 + p {
+	align-self: end;
+	font-size: .875rem;
+	font-weight: 500;
+	line-height: 1.1;
+	max-inline-size: 28ch;
+	position: relative;
+	isolation: isolate;
+	background-color: var(--aqua);
+}
+
+h2 + p::before {
+	content: "";
+	position: absolute;
+	width: 4rem;
+	height: 100%;
+	top: 0;
+	left: 14rem;
+	background-color: inherit;
+	clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%);
+	z-index: -1;
+}
+
diff --git a/three-js-dancing-tree-for-xmas/README.markdown b/three-js-dancing-tree-for-xmas/README.markdown
new file mode 100644
index 0000000..3ff949b
--- /dev/null
+++ b/three-js-dancing-tree-for-xmas/README.markdown
@@ -0,0 +1,5 @@
+# Three.js dancing Tree (for Xmas)
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pehaa/pen/KKXMKMN](https://codepen.io/pehaa/pen/KKXMKMN).
+
+A three.js experiment. That's how I learned some more about instanced geometry (instanced mesh should do the job as well - I just had no time to try it). Anyway, that took me some time to make things work but I kind of like the final result. Merry Xmas 
diff --git a/three-js-dancing-tree-for-xmas/dist/index.html b/three-js-dancing-tree-for-xmas/dist/index.html
new file mode 100644
index 0000000..4880fea
--- /dev/null
+++ b/three-js-dancing-tree-for-xmas/dist/index.html
@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Three.js dancing Tree (for Xmas)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="https://use.typekit.net/bji5ovt.css"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas class="webgl"></canvas>
+<h1><small>With</small> Seasonal Wishes <small>from</small> PeHaa</h1>
+<button id="play-music" type="button">Play music</button>
+<footer>
+  <p>Built with Three.js and GSAP.</p>
+  <p>Inspired by <a href="https://threejs-audio-reactive-visual.netlify.app/">this demo by Francesco Michelini</a></p>
+</footer>
+<script type="x-shader/x-vertex" id="vertexShader">
+  uniform float uTime;
+uniform float uSize;
+attribute float aScale;
+attribute vec3 aColor;
+attribute float phi;
+attribute float random;
+//attribute float random1;
+varying vec2 vUv;
+varying vec3 vColor;
+
+void main() {
+  float angle = phi;
+  angle += uTime * random;
+  angle = mod(angle, 39.3);
+  float radius = 0.065 * angle;
+  float rand = (random - 0.5) * 0.05 * pow(angle, .75);
+  vec3 myOffset =
+      vec3(radius * cos(angle) + rand,
+           2.9 - 2.7 * radius + rand +
+               0.1 * (random - .5) * pow(angle, .25) * sin(2.0 * uTime),
+           radius * sin(angle) + rand);
+  vec3 myPosition = myOffset;
+  vec4 modelPosition = modelMatrix * vec4(myPosition, 1.0);
+
+  vec4 viewPosition = viewMatrix * modelPosition;
+  viewPosition.xyz += position * aScale * uSize;
+  gl_Position = projectionMatrix * viewPosition;
+
+  vColor = aColor;
+  vUv = uv;
+}
+</script>
+
+<script type="x-shader/x-fragment" id="fragmentShader">
+  varying vec3 vColor;
+varying vec2 vUv;
+
+void main() {
+  vec2 uv = vUv;
+  vec3 color = vColor;
+  float strength = distance(uv, vec2(0.5));
+  strength *= 2.0;
+  strength = 1.0 - strength;
+  gl_FragColor = vec4(strength * color, 1.0);
+}
+</script>
+
+<script type="x-shader/x-vertex" id="vertexShaderExt">
+  #define M_PI 3.1415926535897932384626433832795
+varying float vColorMix;
+varying vec2 vUv;
+uniform float uTime;
+
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+     return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v)
+  {
+  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+// First corner
+  vec3 i  = floor(v + dot(v, C.yyy) );
+  vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+// Other corners
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min( g.xyz, l.zxy );
+  vec3 i2 = max( g.xyz, l.zxy );
+
+  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+  //   x1 = x0 - i1  + 1.0 * C.xxx;
+  //   x2 = x0 - i2  + 2.0 * C.xxx;
+  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+// Permutations
+  i = mod289(i);
+  vec4 p = permute( permute( permute(
+             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+// Gradients: 7x7 points over a square, mapped onto an octahedron.
+// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+  float n_ = 0.142857142857; // 1.0/7.0
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+  vec4 x = x_ *ns.x + ns.yyyy;
+  vec4 y = y_ *ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4( x.xy, y.xy );
+  vec4 b1 = vec4( x.zw, y.zw );
+
+  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+  vec4 s0 = floor(b0)*2.0 + 1.0;
+  vec4 s1 = floor(b1)*2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+  vec3 p0 = vec3(a0.xy,h.x);
+  vec3 p1 = vec3(a0.zw,h.y);
+  vec3 p2 = vec3(a1.xy,h.z);
+  vec3 p3 = vec3(a1.zw,h.w);
+
+//Normalise gradients
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+// Mix final noise value
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
+                                dot(p2,x2), dot(p3,x3) ) );
+  }
+
+
+mat3 rotation3dY(float angle) {
+	float s = sin(angle);
+	float c = cos(angle);
+
+	return mat3(
+		c, 0.0, -s,
+		0.0, 1.0, 0.0,
+		s, 0.0, c
+	);
+}
+
+vec3 rotateY(vec3 v, float angle) {
+	return rotation3dY(angle) * v;
+}
+
+
+void main() {
+  float t = uTime * 0.1;
+  float n = snoise(vec3(position.xy, t)*.2 + t);
+  vec3 pos = position + n * 0.1;
+  pos += 0.1*snoise(pos + t);
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+  vUv = uv;
+  vColorMix = n;
+}
+</script>
+
+<script type="x-shader/x-fragment" id="fragmentShaderExt">
+  varying float vColorMix;
+varying vec2 vUv;
+
+void main() {
+  float n = vColorMix;
+  vec2 uv = vUv;
+  gl_FragColor = vec4(mix(vec3(uv, 1.0), vec3(0.0, 1.0, 1.0), 1.0 - n*n) , n * n * n );
+}
+</script>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/three-js-dancing-tree-for-xmas/dist/script.js b/three-js-dancing-tree-for-xmas/dist/script.js
new file mode 100644
index 0000000..ab21c1e
--- /dev/null
+++ b/three-js-dancing-tree-for-xmas/dist/script.js
@@ -0,0 +1,346 @@
+import * as THREE from "https://cdn.skypack.dev/three@0.135.0";
+import {
+BloomEffect,
+EffectComposer,
+EffectPass,
+RenderPass,
+BlendFunction,
+KernelSize } from
+"https://cdn.skypack.dev/postprocessing";
+import { gsap } from "https://cdn.skypack.dev/gsap@3.8.0";
+
+class World {
+  constructor({
+    canvas,
+    width,
+    height,
+    cameraPosition,
+    fieldOfView = 75,
+    nearPlane = 0.1,
+    farPlane = 100 })
+  {
+    this.parameters = {
+      count: 1500,
+      max: 12.5 * Math.PI,
+      a: 2,
+      c: 4.5 };
+
+    this.scene = new THREE.Scene();
+    this.scene.background = new THREE.Color("#00101a");
+    this.clock = new THREE.Clock();
+    this.data = 0;
+    this.time = { current: 0, t0: 0, t1: 0, t: 0, frequency: 0.0005 };
+    this.angle = { x: 0, z: 0 };
+    this.width = width || window.innerWidth;
+    this.height = height || window.innerHeight;
+    this.aspectRatio = this.width / this.height;
+    this.fieldOfView = fieldOfView;
+    this.camera = new THREE.PerspectiveCamera(
+    this.fieldOfView,
+    this.aspectRatio,
+    nearPlane,
+    farPlane);
+
+    this.camera.position.set(
+    cameraPosition.x,
+    cameraPosition.y,
+    cameraPosition.z);
+
+    this.scene.add(this.camera);
+    this.renderer = new THREE.WebGLRenderer({
+      canvas,
+      powerPreference: "high-performance",
+      antialias: false,
+      stencil: false,
+      depth: false });
+
+    this.pixelRatio = Math.min(window.devicePixelRatio, 2);
+    this.renderer.setPixelRatio(this.pixelRatio);
+    this.renderer.setSize(this.width, this.height);
+    this.timer = 0;
+    this.addToScene();
+    this.addButton();
+
+    this.render();
+    this.postProcessing();
+    this.listenToResize();
+  }
+  start() {}
+  render() {
+    this.renderer.render(this.scene, this.camera);
+    this.composer && this.composer.render();
+  }
+  loop() {
+    this.time.elapsed = this.clock.getElapsedTime();
+    this.time.delta = Math.min(
+    60,
+    (this.time.current - this.time.elapsed) * 1000);
+
+    if (this.analyser && this.isRunning) {
+      this.time.t = this.time.elapsed - this.time.t0 + this.time.t1;
+      this.data = this.analyser.getAverageFrequency();
+      this.data *= this.data / 2000;
+      this.angle.x += this.time.delta * 0.001 * 0.63;
+      this.angle.z += this.time.delta * 0.001 * 0.39;
+      const justFinished = this.isRunning && !this.sound.isPlaying;
+      if (justFinished) {
+        this.time.t1 = this.time.t;
+        this.audioBtn.textContent = "Play again";
+        this.audioBtn.disabled = false;
+        this.isRunning = false;
+        const tl = gsap.timeline();
+        this.angle.x = 0;
+        this.angle.z = 0;
+        tl.to(this.camera.position, {
+          x: 0,
+          z: 4.5,
+          duration: 4,
+          ease: "expo.in" });
+
+        tl.to(this.audioBtn, {
+          opacity: () => 1,
+          duration: 1,
+          ease: "power1.out" });
+
+      } else {
+        this.camera.position.x = Math.sin(this.angle.x) * this.parameters.a;
+        this.camera.position.z = Math.min(
+        Math.max(Math.cos(this.angle.z) * this.parameters.c, -4.5),
+        4.5);
+
+      }
+    }
+    this.camera.lookAt(this.scene.position);
+    this.spiralMaterial.uniforms.uTime.value +=
+    this.time.delta * this.time.frequency * (1 + this.data * 0.2);
+    this.extMaterial.uniforms.uTime.value +=
+    this.time.delta * this.time.frequency;
+    //this.mesh.rotation.y += 0.0001 * this.time.delta * data
+    for (const octa of this.octas.children) {
+      octa.rotation.y += this.data ?
+      0.001 * this.time.delta * this.data / 5 :
+      0.001 * this.time.delta;
+    }
+    this.octas.rotation.y -= 0.0002 * this.time.delta;
+    this.externalSphere.rotation.y += 0.0001 * this.time.delta;
+    this.render();
+
+    this.time.current = this.time.elapsed;
+    requestAnimationFrame(this.loop.bind(this));
+  }
+  listenToResize() {
+    window.addEventListener("resize", () => {
+      // Update sizes
+      this.width = window.innerWidth;
+      this.height = window.innerHeight;
+
+      // Update camera
+      this.camera.aspect = this.width / this.height;
+      this.camera.updateProjectionMatrix();
+
+      // Update renderer
+      this.renderer.setSize(this.width, this.height);
+      this.composer.setSize(this.width, this.height);
+    });
+  }
+  addSpiral() {
+    this.spiralMaterial = new THREE.ShaderMaterial({
+      vertexShader: document.getElementById("vertexShader").textContent,
+      fragmentShader: document.getElementById("fragmentShader").textContent,
+      uniforms: {
+        uTime: { value: 0 },
+        uSize: { value: 0.045 } },
+
+      depthWrite: false,
+      blending: THREE.AdditiveBlending });
+
+    const count = this.parameters.count; //2000
+    const scales = new Float32Array(count * 1);
+    const colors = new Float32Array(count * 3);
+    const phis = new Float32Array(count);
+    const randoms = new Float32Array(count);
+    const randoms1 = new Float32Array(count);
+    const colorChoices = ["pink", "green", "cyan", "wheat", "red"];
+
+    const squareGeometry = new THREE.PlaneGeometry(1, 1);
+    this.instancedGeometry = new THREE.InstancedBufferGeometry();
+    Object.keys(squareGeometry.attributes).forEach(attr => {
+      this.instancedGeometry.attributes[attr] = squareGeometry.attributes[attr];
+    });
+    this.instancedGeometry.index = squareGeometry.index;
+    this.instancedGeometry.maxInstancedCount = count;
+
+    for (let i = 0; i < count; i++) {
+      const i3 = 3 * i;
+      const colorIndex = Math.floor(Math.random() * colorChoices.length);
+      const color = new THREE.Color(colorChoices[colorIndex]);
+      phis[i] = Math.random() * this.parameters.max;
+      randoms[i] = Math.random();
+      scales[i] = Math.random();
+      colors[i3 + 0] = color.r;
+      colors[i3 + 1] = color.g;
+      colors[i3 + 2] = color.b;
+    }
+    this.instancedGeometry.setAttribute(
+    "phi",
+    new THREE.InstancedBufferAttribute(phis, 1, false));
+
+    this.instancedGeometry.setAttribute(
+    "random",
+    new THREE.InstancedBufferAttribute(randoms, 1, false));
+
+    this.instancedGeometry.setAttribute(
+    "aScale",
+    new THREE.InstancedBufferAttribute(scales, 1, false));
+
+    this.instancedGeometry.setAttribute(
+    "aColor",
+    new THREE.InstancedBufferAttribute(colors, 3, false));
+
+    this.spiral = new THREE.Mesh(this.instancedGeometry, this.spiralMaterial);
+
+    this.scene.add(this.spiral);
+  }
+
+  addExternalSphere() {
+    this.extMaterial = new THREE.ShaderMaterial({
+      vertexShader: document.getElementById("vertexShaderExt").textContent,
+      fragmentShader: document.getElementById("fragmentShaderExt").textContent,
+      uniforms: {
+        uTime: { value: 0 },
+        uColor: { value: new THREE.Color("orange") } },
+
+      wireframe: true,
+      transparent: true });
+
+    const geometry = new THREE.SphereGeometry(6, 128, 128);
+    this.externalSphere = new THREE.Mesh(geometry, this.extMaterial);
+    this.scene.add(this.externalSphere);
+  }
+  addOctahedron({ color = "white", scale, position = [0, 0, 0] }) {
+    const octa = new THREE.Mesh(
+    this.octaGeometry,
+    new THREE.MeshBasicMaterial({
+      wireframe: true,
+      color }));
+
+
+    octa.scale.set(...scale);
+    octa.position.set(...position);
+    this.octas.add(octa);
+  }
+  addOctahedrons() {
+    this.octas = new THREE.Group();
+    this.octaGeometry = new THREE.OctahedronGeometry(0.2, 0);
+    this.addOctahedron({ color: "red", scale: [1, 1.4, 1] });
+    this.addOctahedron({
+      color: "tomato",
+      position: [0, 0.85, 0],
+      scale: [0.5, 0.7, 0.5] });
+
+
+    this.addOctahedron({
+      color: "red",
+      position: [1, -0.75, 0],
+      scale: [0.5, 0.7, 0.5] });
+
+    this.addOctahedron({
+      color: "tomato",
+      position: [-0.75, -1.75, 0],
+      scale: [1, 1.2, 1] });
+
+    this.addOctahedron({
+      color: "red",
+      position: [0.5, -1.2, 0.5],
+      scale: [0.25, 0.37, 0.25] });
+
+    this.scene.add(this.octas);
+  }
+  addToScene() {
+    this.addSpiral();
+    this.addExternalSphere();
+    this.addOctahedrons();
+  }
+  addButton() {
+    this.audioBtn = document.querySelector("button");
+    this.audioBtn.addEventListener("click", () => {
+      this.audioBtn.disabled = true;
+      if (this.analyser) {
+        this.sound.play();
+        this.time.t0 = this.time.elapsed;
+        this.data = 0;
+        this.isRunning = true;
+        gsap.to(this.audioBtn, {
+          opacity: 0,
+          duration: 1,
+          ease: "power1.out" });
+
+      } else {
+        this.audioBtn.textContent = "Loading...";
+        this.loadMusic().then(() => {
+          console.log("music loaded");
+        });
+      }
+    });
+  }
+
+  loadMusic() {
+    return new Promise(resolve => {
+      const listener = new THREE.AudioListener();
+      this.camera.add(listener);
+      // create a global audio source
+      this.sound = new THREE.Audio(listener);
+      const audioLoader = new THREE.AudioLoader();
+      audioLoader.load(
+      "https://assets.codepen.io/74321/short-snow_01.mp3",
+      buffer => {
+        this.sound.setBuffer(buffer);
+        this.sound.setLoop(false);
+        this.sound.setVolume(0.5);
+        this.sound.play();
+        this.analyser = new THREE.AudioAnalyser(this.sound, 32);
+        // get the average frequency of the sound
+        const data = this.analyser.getAverageFrequency();
+        this.isRunning = true;
+        this.t0 = this.time.elapsed;
+        resolve(data);
+      },
+      progress => {
+        gsap.to(this.audioBtn, {
+          opacity: () => 1 - progress.loaded / progress.total,
+          duration: 1,
+          ease: "power1.out" });
+
+      },
+
+      error => {
+        console.log(error);
+      });
+
+    });
+  }
+  postProcessing() {
+    this.composer = new EffectComposer(this.renderer);
+    this.composer.addPass(new RenderPass(this.scene, this.camera));
+    this.composer.addPass(
+    new EffectPass(
+    this.camera,
+    new BloomEffect({
+      blendFunction: BlendFunction.SCREEN,
+      kernelSize: KernelSize.MEDIUM,
+      luminanceThreshold: 0.4,
+      intensity: 2.6,
+      luminanceSmoothing: 0.4,
+      height: 480 })));
+
+
+
+  }}
+
+
+const world = new World({
+  canvas: document.querySelector("canvas.webgl"),
+  cameraPosition: { x: 0, y: 0, z: 4.5 } });
+
+
+world.loop();
\ No newline at end of file
diff --git a/three-js-dancing-tree-for-xmas/dist/style.css b/three-js-dancing-tree-for-xmas/dist/style.css
new file mode 100644
index 0000000..3c229ac
--- /dev/null
+++ b/three-js-dancing-tree-for-xmas/dist/style.css
@@ -0,0 +1,62 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  overflow: hidden;
+  background: #00101a;
+}
+body {
+  font-family: fino-sans, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 700;
+  font-style: normal;
+}
+.webgl {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+}
+
+button {
+  position: absolute;
+  bottom: 3rem;
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-appearance: none;
+  background: crimson;
+  color: white;
+  font: inherit;
+  font-size: 1.5rem;
+  padding: 0.75rem 2.5rem;
+  border: none;
+  border-radius: 1.75rem;
+  cursor: pointer;
+}
+
+h1 {
+  position: absolute;
+  color: white;
+  top: 3rem;
+  left: 3rem;
+  right: 3rem;
+  text-align: center;
+  font-size: 3rem;
+}
+
+footer {
+  position: absolute;
+  left: 0.5rem;
+  bottom: 0.5rem;
+  color: white;
+  font-family: monospace;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+a {
+  color: inherit;
+}
\ No newline at end of file
diff --git a/three-js-dancing-tree-for-xmas/license.txt b/three-js-dancing-tree-for-xmas/license.txt
new file mode 100644
index 0000000..0b7e504
--- /dev/null
+++ b/three-js-dancing-tree-for-xmas/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Paulina Hetman (https://codepen.io/pehaa/pen/KKXMKMN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/three-js-dancing-tree-for-xmas/src/index.html b/three-js-dancing-tree-for-xmas/src/index.html
new file mode 100644
index 0000000..45f2024
--- /dev/null
+++ b/three-js-dancing-tree-for-xmas/src/index.html
@@ -0,0 +1,191 @@
+<canvas class="webgl"></canvas>
+<h1><small>With</small> Seasonal Wishes <small>from</small> PeHaa</h1>
+<button id="play-music" type="button">Play music</button>
+<footer>
+  <p>Built with Three.js and GSAP.</p>
+  <p>Inspired by <a href="https://threejs-audio-reactive-visual.netlify.app/">this demo by Francesco Michelini</a></p>
+</footer>
+<script type="x-shader/x-vertex" id="vertexShader">
+  uniform float uTime;
+uniform float uSize;
+attribute float aScale;
+attribute vec3 aColor;
+attribute float phi;
+attribute float random;
+//attribute float random1;
+varying vec2 vUv;
+varying vec3 vColor;
+
+void main() {
+  float angle = phi;
+  angle += uTime * random;
+  angle = mod(angle, 39.3);
+  float radius = 0.065 * angle;
+  float rand = (random - 0.5) * 0.05 * pow(angle, .75);
+  vec3 myOffset =
+      vec3(radius * cos(angle) + rand,
+           2.9 - 2.7 * radius + rand +
+               0.1 * (random - .5) * pow(angle, .25) * sin(2.0 * uTime),
+           radius * sin(angle) + rand);
+  vec3 myPosition = myOffset;
+  vec4 modelPosition = modelMatrix * vec4(myPosition, 1.0);
+
+  vec4 viewPosition = viewMatrix * modelPosition;
+  viewPosition.xyz += position * aScale * uSize;
+  gl_Position = projectionMatrix * viewPosition;
+
+  vColor = aColor;
+  vUv = uv;
+}
+</script>
+
+<script type="x-shader/x-fragment" id="fragmentShader">
+  varying vec3 vColor;
+varying vec2 vUv;
+
+void main() {
+  vec2 uv = vUv;
+  vec3 color = vColor;
+  float strength = distance(uv, vec2(0.5));
+  strength *= 2.0;
+  strength = 1.0 - strength;
+  gl_FragColor = vec4(strength * color, 1.0);
+}
+</script>
+
+<script type="x-shader/x-vertex" id="vertexShaderExt">
+  #define M_PI 3.1415926535897932384626433832795
+varying float vColorMix;
+varying vec2 vUv;
+uniform float uTime;
+
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+     return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v)
+  {
+  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+// First corner
+  vec3 i  = floor(v + dot(v, C.yyy) );
+  vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+// Other corners
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min( g.xyz, l.zxy );
+  vec3 i2 = max( g.xyz, l.zxy );
+
+  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+  //   x1 = x0 - i1  + 1.0 * C.xxx;
+  //   x2 = x0 - i2  + 2.0 * C.xxx;
+  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+// Permutations
+  i = mod289(i);
+  vec4 p = permute( permute( permute(
+             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+// Gradients: 7x7 points over a square, mapped onto an octahedron.
+// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+  float n_ = 0.142857142857; // 1.0/7.0
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+  vec4 x = x_ *ns.x + ns.yyyy;
+  vec4 y = y_ *ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4( x.xy, y.xy );
+  vec4 b1 = vec4( x.zw, y.zw );
+
+  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+  vec4 s0 = floor(b0)*2.0 + 1.0;
+  vec4 s1 = floor(b1)*2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+  vec3 p0 = vec3(a0.xy,h.x);
+  vec3 p1 = vec3(a0.zw,h.y);
+  vec3 p2 = vec3(a1.xy,h.z);
+  vec3 p3 = vec3(a1.zw,h.w);
+
+//Normalise gradients
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+// Mix final noise value
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
+                                dot(p2,x2), dot(p3,x3) ) );
+  }
+
+
+mat3 rotation3dY(float angle) {
+	float s = sin(angle);
+	float c = cos(angle);
+
+	return mat3(
+		c, 0.0, -s,
+		0.0, 1.0, 0.0,
+		s, 0.0, c
+	);
+}
+
+vec3 rotateY(vec3 v, float angle) {
+	return rotation3dY(angle) * v;
+}
+
+
+void main() {
+  float t = uTime * 0.1;
+  float n = snoise(vec3(position.xy, t)*.2 + t);
+  vec3 pos = position + n * 0.1;
+  pos += 0.1*snoise(pos + t);
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+  vUv = uv;
+  vColorMix = n;
+}
+</script>
+
+<script type="x-shader/x-fragment" id="fragmentShaderExt">
+  varying float vColorMix;
+varying vec2 vUv;
+
+void main() {
+  float n = vColorMix;
+  vec2 uv = vUv;
+  gl_FragColor = vec4(mix(vec3(uv, 1.0), vec3(0.0, 1.0, 1.0), 1.0 - n*n) , n * n * n );
+}
+</script>
\ No newline at end of file
diff --git a/three-js-dancing-tree-for-xmas/src/script.babel b/three-js-dancing-tree-for-xmas/src/script.babel
new file mode 100644
index 0000000..776a623
--- /dev/null
+++ b/three-js-dancing-tree-for-xmas/src/script.babel
@@ -0,0 +1,346 @@
+import * as THREE from "https://cdn.skypack.dev/three@0.135.0";
+import {
+  BloomEffect,
+  EffectComposer,
+  EffectPass,
+  RenderPass,
+  BlendFunction,
+  KernelSize
+} from "https://cdn.skypack.dev/postprocessing";
+import { gsap } from "https://cdn.skypack.dev/gsap@3.8.0";
+
+class World {
+  constructor({
+    canvas,
+    width,
+    height,
+    cameraPosition,
+    fieldOfView = 75,
+    nearPlane = 0.1,
+    farPlane = 100
+  }) {
+    this.parameters = {
+      count: 1500,
+      max: 12.5 * Math.PI,
+      a: 2,
+      c: 4.5
+    };
+    this.scene = new THREE.Scene();
+    this.scene.background = new THREE.Color("#00101a");
+    this.clock = new THREE.Clock();
+    this.data = 0;
+    this.time = { current: 0, t0: 0, t1: 0, t: 0, frequency: 0.0005 };
+    this.angle = { x: 0, z: 0 };
+    this.width = width || window.innerWidth;
+    this.height = height || window.innerHeight;
+    this.aspectRatio = this.width / this.height;
+    this.fieldOfView = fieldOfView;
+    this.camera = new THREE.PerspectiveCamera(
+      this.fieldOfView,
+      this.aspectRatio,
+      nearPlane,
+      farPlane
+    );
+    this.camera.position.set(
+      cameraPosition.x,
+      cameraPosition.y,
+      cameraPosition.z
+    );
+    this.scene.add(this.camera);
+    this.renderer = new THREE.WebGLRenderer({
+      canvas,
+      powerPreference: "high-performance",
+      antialias: false,
+      stencil: false,
+      depth: false
+    });
+    this.pixelRatio = Math.min(window.devicePixelRatio, 2);
+    this.renderer.setPixelRatio(this.pixelRatio);
+    this.renderer.setSize(this.width, this.height);
+    this.timer = 0;
+    this.addToScene();
+    this.addButton();
+
+    this.render();
+    this.postProcessing();
+    this.listenToResize();
+  }
+  start() {}
+  render() {
+    this.renderer.render(this.scene, this.camera);
+    this.composer && this.composer.render();
+  }
+  loop() {
+    this.time.elapsed = this.clock.getElapsedTime();
+    this.time.delta = Math.min(
+      60,
+      (this.time.current - this.time.elapsed) * 1000
+    );
+    if (this.analyser && this.isRunning) {
+      this.time.t = this.time.elapsed - this.time.t0 + this.time.t1;
+      this.data = this.analyser.getAverageFrequency();
+      this.data *= this.data / 2000;
+      this.angle.x += this.time.delta * 0.001 * 0.63;
+      this.angle.z += this.time.delta * 0.001 * 0.39;
+      const justFinished = this.isRunning && !this.sound.isPlaying;
+      if (justFinished) {
+        this.time.t1 = this.time.t;
+        this.audioBtn.textContent = "Play again";
+        this.audioBtn.disabled = false;
+        this.isRunning = false;
+        const tl = gsap.timeline();
+        this.angle.x = 0;
+        this.angle.z = 0;
+        tl.to(this.camera.position, {
+          x: 0,
+          z: 4.5,
+          duration: 4,
+          ease: "expo.in"
+        });
+        tl.to(this.audioBtn, {
+          opacity: () => 1,
+          duration: 1,
+          ease: "power1.out"
+        });
+      } else {
+        this.camera.position.x = Math.sin(this.angle.x) * this.parameters.a;
+        this.camera.position.z = Math.min(
+          Math.max(Math.cos(this.angle.z) * this.parameters.c, -4.5),
+          4.5
+        );
+      }
+    }
+    this.camera.lookAt(this.scene.position);
+    this.spiralMaterial.uniforms.uTime.value +=
+      this.time.delta * this.time.frequency * (1 + this.data * 0.2);
+    this.extMaterial.uniforms.uTime.value +=
+      this.time.delta * this.time.frequency;
+    //this.mesh.rotation.y += 0.0001 * this.time.delta * data
+    for (const octa of this.octas.children) {
+      octa.rotation.y += this.data
+        ? (0.001 * this.time.delta * this.data) / 5
+        : 0.001 * this.time.delta;
+    }
+    this.octas.rotation.y -= 0.0002 * this.time.delta;
+    this.externalSphere.rotation.y += 0.0001 * this.time.delta;
+    this.render();
+
+    this.time.current = this.time.elapsed;
+    requestAnimationFrame(this.loop.bind(this));
+  }
+  listenToResize() {
+    window.addEventListener("resize", () => {
+      // Update sizes
+      this.width = window.innerWidth;
+      this.height = window.innerHeight;
+
+      // Update camera
+      this.camera.aspect = this.width / this.height;
+      this.camera.updateProjectionMatrix();
+
+      // Update renderer
+      this.renderer.setSize(this.width, this.height);
+      this.composer.setSize(this.width, this.height);
+    });
+  }
+  addSpiral() {
+    this.spiralMaterial = new THREE.ShaderMaterial({
+      vertexShader: document.getElementById("vertexShader").textContent,
+      fragmentShader: document.getElementById("fragmentShader").textContent,
+      uniforms: {
+        uTime: { value: 0 },
+        uSize: { value: 0.045 }
+      },
+      depthWrite: false,
+      blending: THREE.AdditiveBlending
+    });
+    const count = this.parameters.count; //2000
+    const scales = new Float32Array(count * 1);
+    const colors = new Float32Array(count * 3);
+    const phis = new Float32Array(count);
+    const randoms = new Float32Array(count);
+    const randoms1 = new Float32Array(count);
+    const colorChoices = ["pink", "green", "cyan", "wheat", "red"];
+
+    const squareGeometry = new THREE.PlaneGeometry(1, 1);
+    this.instancedGeometry = new THREE.InstancedBufferGeometry();
+    Object.keys(squareGeometry.attributes).forEach((attr) => {
+      this.instancedGeometry.attributes[attr] = squareGeometry.attributes[attr];
+    });
+    this.instancedGeometry.index = squareGeometry.index;
+    this.instancedGeometry.maxInstancedCount = count;
+
+    for (let i = 0; i < count; i++) {
+      const i3 = 3 * i;
+      const colorIndex = Math.floor(Math.random() * colorChoices.length);
+      const color = new THREE.Color(colorChoices[colorIndex]);
+      phis[i] = Math.random() * this.parameters.max;
+      randoms[i] = Math.random();
+      scales[i] = Math.random();
+      colors[i3 + 0] = color.r;
+      colors[i3 + 1] = color.g;
+      colors[i3 + 2] = color.b;
+    }
+    this.instancedGeometry.setAttribute(
+      "phi",
+      new THREE.InstancedBufferAttribute(phis, 1, false)
+    );
+    this.instancedGeometry.setAttribute(
+      "random",
+      new THREE.InstancedBufferAttribute(randoms, 1, false)
+    );
+    this.instancedGeometry.setAttribute(
+      "aScale",
+      new THREE.InstancedBufferAttribute(scales, 1, false)
+    );
+    this.instancedGeometry.setAttribute(
+      "aColor",
+      new THREE.InstancedBufferAttribute(colors, 3, false)
+    );
+    this.spiral = new THREE.Mesh(this.instancedGeometry, this.spiralMaterial);
+
+    this.scene.add(this.spiral);
+  }
+
+  addExternalSphere() {
+    this.extMaterial = new THREE.ShaderMaterial({
+      vertexShader: document.getElementById("vertexShaderExt").textContent,
+      fragmentShader: document.getElementById("fragmentShaderExt").textContent,
+      uniforms: {
+        uTime: { value: 0 },
+        uColor: { value: new THREE.Color("orange") }
+      },
+      wireframe: true,
+      transparent: true
+    });
+    const geometry = new THREE.SphereGeometry(6, 128, 128);
+    this.externalSphere = new THREE.Mesh(geometry, this.extMaterial);
+    this.scene.add(this.externalSphere);
+  }
+  addOctahedron({ color = "white", scale, position = [0, 0, 0] }) {
+    const octa = new THREE.Mesh(
+      this.octaGeometry,
+      new THREE.MeshBasicMaterial({
+        wireframe: true,
+        color
+      })
+    );
+    octa.scale.set(...scale);
+    octa.position.set(...position);
+    this.octas.add(octa);
+  }
+  addOctahedrons() {
+    this.octas = new THREE.Group();
+    this.octaGeometry = new THREE.OctahedronGeometry(0.2, 0);
+    this.addOctahedron({ color: "red", scale: [1, 1.4, 1] });
+    this.addOctahedron({
+      color: "tomato",
+      position: [0, 0.85, 0],
+      scale: [0.5, 0.7, 0.5]
+    });
+
+    this.addOctahedron({
+      color: "red",
+      position: [1, -0.75, 0],
+      scale: [0.5, 0.7, 0.5]
+    });
+    this.addOctahedron({
+      color: "tomato",
+      position: [-0.75, -1.75, 0],
+      scale: [1, 1.2, 1]
+    });
+    this.addOctahedron({
+      color: "red",
+      position: [0.5, -1.2, 0.5],
+      scale: [0.25, 0.37, 0.25]
+    });
+    this.scene.add(this.octas);
+  }
+  addToScene() {
+    this.addSpiral();
+    this.addExternalSphere();
+    this.addOctahedrons();
+  }
+  addButton() {
+    this.audioBtn = document.querySelector("button");
+    this.audioBtn.addEventListener("click", () => {
+      this.audioBtn.disabled = true;
+      if (this.analyser) {
+        this.sound.play();
+        this.time.t0 = this.time.elapsed;
+        this.data = 0;
+        this.isRunning = true;
+        gsap.to(this.audioBtn, {
+          opacity: 0,
+          duration: 1,
+          ease: "power1.out"
+        });
+      } else {
+        this.audioBtn.textContent = "Loading...";
+        this.loadMusic().then(() => {
+          console.log("music loaded");
+        });
+      }
+    });
+  }
+
+  loadMusic() {
+    return new Promise((resolve) => {
+      const listener = new THREE.AudioListener();
+      this.camera.add(listener);
+      // create a global audio source
+      this.sound = new THREE.Audio(listener);
+      const audioLoader = new THREE.AudioLoader();
+      audioLoader.load(
+        "https://assets.codepen.io/74321/short-snow_01.mp3",
+        (buffer) => {
+          this.sound.setBuffer(buffer);
+          this.sound.setLoop(false);
+          this.sound.setVolume(0.5);
+          this.sound.play();
+          this.analyser = new THREE.AudioAnalyser(this.sound, 32);
+          // get the average frequency of the sound
+          const data = this.analyser.getAverageFrequency();
+          this.isRunning = true;
+          this.t0 = this.time.elapsed;
+          resolve(data);
+        },
+        (progress) => {
+          gsap.to(this.audioBtn, {
+            opacity: () => 1 - progress.loaded / progress.total,
+            duration: 1,
+            ease: "power1.out"
+          });
+        },
+
+        (error) => {
+          console.log(error);
+        }
+      );
+    });
+  }
+  postProcessing() {
+    this.composer = new EffectComposer(this.renderer);
+    this.composer.addPass(new RenderPass(this.scene, this.camera));
+    this.composer.addPass(
+      new EffectPass(
+        this.camera,
+        new BloomEffect({
+          blendFunction: BlendFunction.SCREEN,
+          kernelSize: KernelSize.MEDIUM,
+          luminanceThreshold: 0.4,
+          intensity: 2.6,
+          luminanceSmoothing: 0.4,
+          height: 480
+        })
+      )
+    );
+  }
+}
+
+const world = new World({
+  canvas: document.querySelector("canvas.webgl"),
+  cameraPosition: { x: 0, y: 0, z: 4.5 }
+});
+
+world.loop();
diff --git a/three-js-dancing-tree-for-xmas/src/style.css b/three-js-dancing-tree-for-xmas/src/style.css
new file mode 100644
index 0000000..7c5d677
--- /dev/null
+++ b/three-js-dancing-tree-for-xmas/src/style.css
@@ -0,0 +1,62 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  overflow: hidden;
+  background: #00101a;
+}
+body {
+  font-family: fino-sans, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 700;
+  font-style: normal;
+}
+.webgl {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+}
+
+button {
+  position: absolute;
+  bottom: 3rem;
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-appearance: none;
+  background: crimson;
+  color: white;
+  font: inherit;
+  font-size: 1.5rem;
+  padding: 0.75rem 2.5rem;
+  border: none;
+  border-radius: 1.75rem;
+  cursor: pointer;
+}
+
+h1 {
+  position: absolute;
+  color: white;
+  top: 3rem;
+  left: 3rem;
+  right: 3rem;
+  text-align: center;
+  font-size: 3rem;
+}
+
+footer {
+  position: absolute;
+  left: 0.5rem;
+  bottom: 0.5rem;
+  color: white;
+  font-family: monospace;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+a {
+  color: inherit;
+}
diff --git a/tiles-with-a-mediterranean-vibe/README.markdown b/tiles-with-a-mediterranean-vibe/README.markdown
new file mode 100644
index 0000000..33f7f0c
--- /dev/null
+++ b/tiles-with-a-mediterranean-vibe/README.markdown
@@ -0,0 +1,5 @@
+# Tiles with a Mediterranean vibe
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/nszafraniec/pen/abJdLNg](https://codepen.io/nszafraniec/pen/abJdLNg).
+
+
diff --git a/tiles-with-a-mediterranean-vibe/dist/index.html b/tiles-with-a-mediterranean-vibe/dist/index.html
new file mode 100644
index 0000000..04a653b
--- /dev/null
+++ b/tiles-with-a-mediterranean-vibe/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Tiles with a Mediterranean vibe</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg class="scene" id="illustration" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" aria-labelledby="svgTitle svgDesc" role="img">
+  <title id="svgTitle">A generative illustration</title>
+  <desc id="svgDesc">Click on the image to redraw it!</desc>
+</svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/tiles-with-a-mediterranean-vibe/dist/script.js b/tiles-with-a-mediterranean-vibe/dist/script.js
new file mode 100644
index 0000000..07c9702
--- /dev/null
+++ b/tiles-with-a-mediterranean-vibe/dist/script.js
@@ -0,0 +1,294 @@
+function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const settings = {
+  colors: ["#0F1E52", "#11225C", "#0B1840", "#0E1C4D"],
+  // Using normalized paths for triangles
+  triangles: [
+  [[0, 0], [1, 0], [0, 1]],
+  [[0, 0], [1, 0], [1, 1]],
+  [[0, 0], [0, 1], [1, 1]],
+  [[0, 1], [1, 0], [1, 1]]] };
+
+
+
+const utils = {
+  getRandFromRange: function (min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  },
+  count: function (array) {
+    return array.length ?
+    array.reduce(function (previous, current) {
+      return previous + current;
+    }) :
+    0;
+  } };
+
+
+class Illustration {
+
+
+
+
+
+
+
+  constructor(selector, colors) {_defineProperty(this, "columnCount", void 0);_defineProperty(this, "rowCount", void 0);_defineProperty(this, "boxSize", void 0);_defineProperty(this, "color", void 0);_defineProperty(this, "screen", { width: 0, height: 0 });_defineProperty(this, "svg", void 0);
+    this.boxes = [];
+    this.screen = {
+      width: window.innerWidth,
+      height: window.innerHeight };
+
+
+    this.boxSize = 65;
+    this.columnCount = Math.floor(this.screen.width / this.boxSize);
+    this.rowCount = Math.floor(this.screen.height / this.boxSize);
+
+    this.setSVG(selector);
+    this.colors = colors;
+
+    this.draw();
+  }
+
+  setSVG(selector) {
+    this.svg = document.querySelector(selector);
+    this.svg.addEventListener("click", this.draw.bind(this));
+    this.svg.setAttribute(
+    "viewBox",
+    `0 0 ${this.boxSize * this.columnCount} ${this.boxSize * this.rowCount}`);
+
+  }
+
+  reset() {
+    delete this.boxes;
+    this.boxes = [];
+    this.svg.innerHTML = "";
+  }
+
+  draw() {
+    this.reset();
+
+    for (let i = 0; i < this.rowCount; i++) {
+      for (let j = 0; j < this.columnCount; j++) {
+        const box = new Box(
+        j * this.boxSize,
+        i * this.boxSize,
+        this.boxSize,
+        this.boxSize,
+        this.colors[utils.getRandFromRange(0, this.colors.length - 1)]);
+
+
+        this.boxes.push(box);
+        this.svg.appendChild(box.getDOMElement());
+      }
+    }
+  }}
+
+
+class Box {
+
+
+
+
+
+
+
+
+  constructor(x, y, width, height, color) {_defineProperty(this, "x", void 0);_defineProperty(this, "y", void 0);_defineProperty(this, "width", void 0);_defineProperty(this, "height", void 0);_defineProperty(this, "bgColor", void 0);_defineProperty(this, "elementColor", void 0);_defineProperty(this, "element", void 0);
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.color = color;
+
+    this.hasTriangle = Math.random() > 0.55;
+    this.hasStripes = !this.hasTriangle;
+
+    this.rectangle = new Rectangle(x, y, width, height, "none", color, 2);
+    this.triangle = this.hasTriangle ? new Triangle(x, y, width, height, utils.getRandFromRange(0, settings.triangles.length - 1), color) : null;
+    this.stripes = this.hasStripes ? new Stripes(x, y, width, height, 1, utils.getRandFromRange(0, 1), color) : null;
+
+    this.setDOMElement();
+  }
+
+  getDOMElement() {
+    return this.element;
+  }
+
+  setDOMElement() {
+    this.element = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "g");
+
+
+    this.rectangle ? this.element.append(this.rectangle.getDOMElement()) : null;
+    this.circle ? this.element.append(this.circle.getDOMElement()) : null;
+    this.triangle ? this.element.append(this.triangle.getDOMElement()) : null;
+    this.stripes ? this.element.append(this.stripes.getDOMElement()) : null;
+  }}
+
+
+class Rectangle {
+
+
+
+
+
+
+
+
+  constructor(x, y, width, height, fill, stroke, strokeWidth) {_defineProperty(this, "cx", void 0);_defineProperty(this, "cy", void 0);_defineProperty(this, "r", void 0);_defineProperty(this, "fill", void 0);_defineProperty(this, "stroke", void 0);_defineProperty(this, "strokeWidth", void 0);_defineProperty(this, "element", void 0);
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.fill = fill;
+    this.stroke = stroke;
+    this.strokeWidth = strokeWidth;
+
+    this.setDOMElement();
+  }
+
+  getDOMElement() {
+    return this.element;
+  }
+
+  setDOMElement(x, y, width, height, fill, stroke, strokeWidth) {
+    this.element = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "rect");
+
+
+    this.element.setAttribute("x", x ? x : this.x);
+    this.element.setAttribute("y", y ? y : this.y);
+    this.element.setAttribute("width", width ? width : this.width);
+    this.element.setAttribute("height", height ? height : this.height);
+    this.element.style.fill = fill ? fill : this.fill;
+    this.element.style.stroke = stroke ? stroke : this.stroke;
+    this.element.style.fill = strokeWidth ? strokeWidth : this.strokeWidth;
+  }}
+
+
+class Triangle {
+
+
+
+
+
+
+
+
+
+  constructor(x, y, width, height, points, fill) {_defineProperty(this, "x", void 0);_defineProperty(this, "y", void 0);_defineProperty(this, "width", void 0);_defineProperty(this, "height", void 0);_defineProperty(this, "position", void 0);_defineProperty(this, "fill", void 0);_defineProperty(this, "path", void 0);_defineProperty(this, "element", void 0);
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.points = points;
+    this.fill = fill;
+
+    this.setPath();
+    this.setDOMElement();
+  }
+
+  setPath() {
+    let d = [];
+    settings.triangles[this.points].forEach(point => {
+      let p = [
+      this.x + point[0] * this.width,
+      this.y + point[1] * this.height];
+
+      d.push(p.join(","));
+    });
+
+    this.path = d.join(" ");
+  }
+
+  getDOMElement() {
+    return this.element;
+  }
+
+  setDOMElement(x, y, width, height, points, fill) {
+    this.element = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "polygon");
+
+
+    this.element.setAttribute("points", this.path);
+    this.element.style.fill = fill ? fill : this.fill;
+  }}
+
+
+class Stripes {
+
+
+
+
+
+
+
+
+
+
+  constructor(x, y, width, height, count, direction, fill) {_defineProperty(this, "x", void 0);_defineProperty(this, "y", void 0);_defineProperty(this, "width", void 0);_defineProperty(this, "height", void 0);_defineProperty(this, "count", void 0);_defineProperty(this, "direction", void 0);_defineProperty(this, "fill", void 0);_defineProperty(this, "rectangles", void 0);_defineProperty(this, "element", void 0);
+    this.x = x;
+    this.y = y;
+    this.count = count;
+    this.direction = direction;
+    this.fill = fill;
+    this.rectangles = [];
+
+    if (count === 1) {
+      direction ? this.width = width : this.width = width / 5;
+      direction ? this.height = height / 5 : this.height = height;
+    } else {
+      direction ? this.width = width : this.width = width / (count * 2 - 1);
+      direction ? this.height = height / (count * 2 - 1) : this.height = height;
+    }
+
+    this.setRectangles();
+    this.setDOMElement();
+  }
+
+  setRectangles() {
+    if (this.count === 1) {
+      this.rectangles.push(new Rectangle(
+      this.direction ? this.x : this.x + 2 * this.width,
+      this.direction ? this.y + 2 * this.height : this.y,
+      this.width,
+      this.height,
+      this.fill,
+      "none",
+      0));
+
+    } else {
+      for (let i = 0; i < this.count; i++) {
+        this.rectangles.push(new Rectangle(
+        this.direction ? this.x : this.x + 2 * i * this.width,
+        this.direction ? this.y + 2 * i * this.height : this.y,
+        this.width,
+        this.height,
+        this.fill,
+        "none",
+        0));
+
+      }
+    }
+  }
+
+  getDOMElement() {
+    return this.element;
+  }
+
+  setDOMElement(x, y, width, height, points, fill) {
+    this.element = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "g");
+
+
+    this.rectangles.forEach(rectangle => {
+      this.element.append(rectangle.getDOMElement());
+    });
+  }}
+
+
+const illustration = new Illustration(
+"#illustration",
+settings.colors);
\ No newline at end of file
diff --git a/tiles-with-a-mediterranean-vibe/dist/style.css b/tiles-with-a-mediterranean-vibe/dist/style.css
new file mode 100644
index 0000000..7ed037e
--- /dev/null
+++ b/tiles-with-a-mediterranean-vibe/dist/style.css
@@ -0,0 +1,22 @@
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #F2F9FE;
+}
+
+.scene {
+  width: 100vw;
+  height: 100vh;
+}
+
+svg * {
+  transform: translate3d(0, 0, 0);
+}
\ No newline at end of file
diff --git a/tiles-with-a-mediterranean-vibe/license.txt b/tiles-with-a-mediterranean-vibe/license.txt
new file mode 100644
index 0000000..28cdbcf
--- /dev/null
+++ b/tiles-with-a-mediterranean-vibe/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Natalia 🤟 (https://codepen.io/nszafraniec/pen/abJdLNg)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/tiles-with-a-mediterranean-vibe/src/index.html b/tiles-with-a-mediterranean-vibe/src/index.html
new file mode 100644
index 0000000..3545d85
--- /dev/null
+++ b/tiles-with-a-mediterranean-vibe/src/index.html
@@ -0,0 +1,4 @@
+<svg class="scene" id="illustration" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" aria-labelledby="svgTitle svgDesc" role="img">
+  <title id="svgTitle">A generative illustration</title>
+  <desc id="svgDesc">Click on the image to redraw it!</desc>
+</svg>
\ No newline at end of file
diff --git a/tiles-with-a-mediterranean-vibe/src/script.babel b/tiles-with-a-mediterranean-vibe/src/script.babel
new file mode 100644
index 0000000..39d0a7f
--- /dev/null
+++ b/tiles-with-a-mediterranean-vibe/src/script.babel
@@ -0,0 +1,295 @@
+const settings = {
+	colors: ["#0F1E52", "#11225C", "#0B1840", "#0E1C4D"],
+	// Using normalized paths for triangles
+	triangles: [
+		[[0,0], [1,0], [0,1]],
+		[[0,0], [1,0], [1,1]],
+		[[0,0], [0,1], [1,1]],
+		[[0,1], [1,0], [1,1]]
+	]
+};
+
+const utils = {
+	getRandFromRange: function (min, max) {
+		return Math.floor(Math.random() * (max - min + 1)) + min;
+	},
+	count: function (array) {
+		return array.length
+			? array.reduce(function (previous, current) {
+			return previous + current;
+		})
+		: 0;
+	}
+};
+
+class Illustration {
+	columnCount;
+	rowCount;
+	boxSize;
+	color;
+	screen = { width: 0, height: 0 };
+	svg;
+
+	constructor(selector, colors) {
+		this.boxes = [];
+		this.screen = {
+			width: window.innerWidth,
+			height: window.innerHeight
+		};
+
+		this.boxSize = 65;
+		this.columnCount = Math.floor(this.screen.width / this.boxSize);
+		this.rowCount = Math.floor(this.screen.height / this.boxSize);
+
+		this.setSVG(selector);
+		this.colors = colors;
+
+		this.draw();
+	}
+
+	setSVG(selector) {
+		this.svg = document.querySelector(selector);
+		this.svg.addEventListener("click", this.draw.bind(this));
+		this.svg.setAttribute(
+			"viewBox",
+			`0 0 ${this.boxSize * this.columnCount} ${this.boxSize * this.rowCount}`
+		);
+	}
+
+	reset() {
+		delete this.boxes;
+		this.boxes = [];
+		this.svg.innerHTML = "";
+	}
+
+	draw() {
+		this.reset();
+
+		for (let i = 0; i < this.rowCount; i++) {
+			for (let j = 0; j < this.columnCount; j++) {
+				const box = new Box(
+					j * this.boxSize,
+					i * this.boxSize,
+					this.boxSize,
+					this.boxSize,
+					this.colors[utils.getRandFromRange(0, this.colors.length - 1)]
+				);
+
+				this.boxes.push(box);
+				this.svg.appendChild(box.getDOMElement());
+			}
+		}
+	}
+}
+
+class Box {
+	x;
+	y;
+	width;
+	height;
+	bgColor;
+	elementColor;
+	element;
+
+	constructor(x, y, width, height, color) {
+		this.x = x;
+		this.y = y;
+		this.width = width;
+		this.height = height;
+		this.color = color;
+
+		this.hasTriangle = Math.random() > 0.55;
+		this.hasStripes = !this.hasTriangle;
+
+		this.rectangle = new Rectangle(x, y, width, height, "none", color, 2);
+		this.triangle = this.hasTriangle ? new Triangle(x, y, width, height, utils.getRandFromRange(0, settings.triangles.length - 1), color) : null;
+		this.stripes = this.hasStripes ? new Stripes(x, y, width, height, 1, utils.getRandFromRange(0, 1), color) : null;
+
+		this.setDOMElement();
+	}
+
+	getDOMElement() {
+		return this.element;
+	}
+
+	setDOMElement() {
+		this.element = document.createElementNS(
+			"http://www.w3.org/2000/svg",
+			"g"
+		);
+
+		this.rectangle ? this.element.append(this.rectangle.getDOMElement()) : null;
+		this.circle ? this.element.append(this.circle.getDOMElement()) : null;
+		this.triangle ? this.element.append(this.triangle.getDOMElement()) : null;
+		this.stripes ? this.element.append(this.stripes.getDOMElement()) : null;
+	}
+}
+
+class Rectangle {
+	cx;
+	cy;
+	r;
+	fill;
+	stroke;
+	strokeWidth;
+	element;
+
+	constructor(x, y, width, height, fill, stroke, strokeWidth) {
+		this.x = x;
+		this.y = y;
+		this.width = width;
+		this.height = height;
+		this.fill = fill;
+		this.stroke = stroke;
+		this.strokeWidth = strokeWidth;
+
+		this.setDOMElement();
+	}
+
+	getDOMElement() {
+		return this.element;
+	}
+
+	setDOMElement(x, y, width, height, fill, stroke, strokeWidth) {
+		this.element = document.createElementNS(
+			"http://www.w3.org/2000/svg",
+			"rect"
+		);
+
+		this.element.setAttribute("x", x ? x : this.x);
+		this.element.setAttribute("y", y ? y : this.y);
+		this.element.setAttribute("width", width ? width : this.width);
+		this.element.setAttribute("height", height ? height : this.height);
+		this.element.style.fill = fill ? fill : this.fill;
+		this.element.style.stroke = stroke ? stroke : this.stroke;
+		this.element.style.fill = strokeWidth ? strokeWidth : this.strokeWidth;
+	}
+}
+
+class Triangle {
+	x;
+	y;
+	width;
+	height;
+	position;
+	fill;
+	path;
+	element;
+
+	constructor(x, y, width, height, points, fill) {
+		this.x = x;
+		this.y = y;
+		this.width = width;
+		this.height = height;
+		this.points = points;
+		this.fill = fill;
+
+		this.setPath();
+		this.setDOMElement();
+	}
+
+	setPath() {
+		let d = [];
+		settings.triangles[this.points].forEach(point => {
+			let p = [
+				this.x + point[0] * this.width,
+				this.y + point[1] * this.height
+			];
+			d.push(p.join(","));
+		});
+
+		this.path = d.join(" ");
+	}
+
+	getDOMElement() {
+		return this.element;
+	}
+
+	setDOMElement(x, y, width, height, points, fill) {
+		this.element = document.createElementNS(
+			"http://www.w3.org/2000/svg",
+			"polygon"
+		);
+
+		this.element.setAttribute("points", this.path);
+		this.element.style.fill = fill ? fill : this.fill;
+	}
+}
+
+class Stripes {
+	x;
+	y;
+	width;
+	height;
+	count;
+	direction;
+	fill;
+	rectangles;
+	element;
+
+	constructor(x, y, width, height, count, direction, fill) {
+		this.x = x;
+		this.y = y;
+		this.count = count;
+		this.direction = direction;
+		this.fill = fill;
+		this.rectangles = [];
+
+		if(count === 1) {
+			direction ? this.width = width : this.width = width / 5;
+			direction ? this.height = height / 5 : this.height = height;
+		} else {
+			direction ? this.width = width : this.width = width / (count * 2 - 1);
+			direction ? this.height = height / (count * 2 - 1) : this.height = height;
+		}
+
+		this.setRectangles();
+		this.setDOMElement();
+	}
+
+	setRectangles() {
+		if(this.count === 1) {
+			this.rectangles.push(new Rectangle(
+				this.direction ? this.x : this.x + (2 * this.width), 
+				this.direction ? this.y + (2 * this.height) : this.y,
+				this.width, 
+				this.height, 
+				this.fill,
+				"none",
+				0
+			));
+		} else {
+			for(let i = 0; i < this.count; i++) {
+				this.rectangles.push(new Rectangle(
+					this.direction ? this.x : this.x + (2 * i * this.width), 
+					this.direction ? this.y + (2 * i * this.height) : this.y,
+					this.width, 
+					this.height, 
+					this.fill,
+					"none",
+					0
+				));
+			}
+		}
+	}
+
+	getDOMElement() {
+		return this.element;
+	}
+
+	setDOMElement(x, y, width, height, points, fill) {
+		this.element = document.createElementNS(
+			"http://www.w3.org/2000/svg",
+			"g"
+		);
+
+		this.rectangles.forEach(rectangle => {
+			this.element.append(rectangle.getDOMElement());
+		});
+	}
+}
+
+const illustration = new Illustration(
+	"#illustration",
+	settings.colors
+);
diff --git a/tiles-with-a-mediterranean-vibe/src/style.scss b/tiles-with-a-mediterranean-vibe/src/style.scss
new file mode 100644
index 0000000..622c274
--- /dev/null
+++ b/tiles-with-a-mediterranean-vibe/src/style.scss
@@ -0,0 +1,23 @@
+html, body  {
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+}
+
+body {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #F2F9FE;
+}
+
+.scene {
+	width: 100vw;
+	height: 100vh;
+}
+
+// To prevent subpixel rendering
+svg * {
+	transform: translate3d(0, 0, 0);
+}
\ No newline at end of file
diff --git a/tilt-to-make-room-for-menu/README.markdown b/tilt-to-make-room-for-menu/README.markdown
new file mode 100644
index 0000000..7d936a1
--- /dev/null
+++ b/tilt-to-make-room-for-menu/README.markdown
@@ -0,0 +1,8 @@
+# Tilt to make room for menu
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ainalem/pen/MWJYqQE](https://codepen.io/ainalem/pen/MWJYqQE).
+
+An effect similar to the mobile Safari tab experience. tilt background and fade to make room for a menu
+
+Icons: Sushi by Luiz Carvalho from the Noun Project
+Photo by Alex Knight on Unsplash
diff --git a/tilt-to-make-room-for-menu/dist/index.html b/tilt-to-make-room-for-menu/dist/index.html
new file mode 100644
index 0000000..d052854
--- /dev/null
+++ b/tilt-to-make-room-for-menu/dist/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Tilt to make room for menu</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="phone-frame">
+  <div class="phone-screen">
+    <div class="imageContainer">
+      <img class="image" src="data:image/jpg;base64,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" />
+      <div class="overlay"></div>
+    </div>
+    <!-- <div class="button-menu button-menu1"></div> -->
+    <svg class="button-menu button-menu1" height="24" width="24" onclick="document.querySelector('.phone-screen').classList.toggle('active')">
+      <circle class="bg" r="12" cx="12" cy="12" />
+      <path class="line line1" d="M 6,8 H 18" />
+      <path class="line line2" d="M 6,12 H 18" />
+      <path class="line line3" d="M 6,16 H 18" />
+    </svg>
+    <div class="menu" onclick="document.querySelector('.phone-screen').classList.remove('active')">
+      <div class="option">
+        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
+          <title>Sushi</title>
+          <path d="M96.697 25.12a21.525 20.56 0 0 0 .774-3.23C99.147 10.54 88.228 2.11 76.69.53 59.07-1.9 40.142 4.1 24.773 17 9.07 30.1-.197 48.36.003 65.81.108 75.25 6.965 95.1 17.8 99.19a11.715 11.19 0 0 0 4.345.81 12.69 12.12 0 0 0 6.523-1.81l46.064-19.85a43.018 41.09 0 0 0 21.965-53.22zm-76.55 68.49c-7.832-2.95-13.78-20.08-13.873-27.87a53.393 51 0 0 1 3.643-18.57L31.61 55l2.22-5.61-21.39-7.72a69.997 66.86 0 0 1 16.47-20.2c.344-.29.7-.56 1.045-.84l26.864 9.7 2.22-5.61-23.21-8.38C46.182 9.6 57.7 6 68.9 6a48.975 46.78 0 0 1 6.9.46c7.16 1 16.75 6.17 15.453 14.59-1.047 7.33-8.02 12.15-14.73 16.81-1.3.9-2.576 1.79-3.78 2.67A152.85 146 0 0 0 48.1 63.11a106.786 102 0 0 0-9.005 13c-3.235 5.27-6.28 10.25-10.343 14.33a15.16 14.48 0 0 1-3.005 2.4l-2.094.92a5.12 4.89 0 0 1-3.507-.15zm52-20.73L39.534 86.93c1.748-2.54 3.36-5.16 4.952-7.73a98.944 94.51 0 0 1 8.438-12.29 145.825 139.29 0 0 1 23.65-21.62c1.162-.86 2.387-1.71 3.643-2.58 4.324-3 8.972-6.25 12.396-10.39a36.768 35.12 0 0 1-20.468 40.56z" />
+        </svg>
+        <div class="japanese">にぎり</div>
+        <div class="roman">Nigiri</div>
+      </div>
+      <div class="option">
+        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
+          <title>Sushi_2</title>
+          <path d="M71.945 28.205L50 16.26 28.05 28.204a10.902 11.493 0 0 0-1 3.533 10.522 11.092 0 0 0 1 3.606L50 47.3l22.005-11.946a10.902 11.493 0 0 0 1-3.532 10.522 11.092 0 0 0-1.06-3.617zM34.59 31.79L50 23.355l15.424 8.435L50 40.183z" />
+          <path d="M98.77 37.62a28.755 30.314 0 0 0-2.76-8.824c-2.76-5.778-7.352-10.882-13.893-15.426C72.735 6.77 61.563.095 50.06 0h-.12c-11.5.095-22.673 6.77-32.094 13.37-6.55 4.555-11.162 9.67-13.912 15.468a28.865 30.43 0 0 0-1.18 2.815 29.165 30.747 0 0 0-1.52 5.968c-2.24 14.404-1.43 26.288 2.45 35.334 4 9.385 11.87 14.636 19.743 18.906 10 5.4 18.623 8.056 26.514 8.14h.12c7.893-.084 16.564-2.74 26.516-8.14 7.87-4.218 15.712-9.49 19.743-18.906 3.87-9.046 4.69-20.93 2.45-35.333zM21.155 18.643C29.818 12.612 40 6.442 49.91 6.326h.18c9.913.116 20.095 6.327 28.756 12.326 5.69 3.965 9.642 8.32 11.922 13.202-2.28 4.83-6.2 9.13-11.852 13.074-8.66 6.032-18.853 12.21-28.765 12.316H50c-9.94-.106-20.132-6.327-28.794-12.326-5.72-3.975-9.65-8.33-11.922-13.223 2.32-4.818 6.24-9.11 11.872-13.043zm69.692 51.666c-3.27 7.613-10.112 12.136-17.003 15.89-9.06 4.913-16.833 7.38-23.734 7.38h-.18c-6.9-.084-14.67-2.52-23.733-7.38-6.91-3.754-13.752-8.277-17.003-15.89-3.25-7.613-4-17.925-2.16-30.578a43.207 45.55 0 0 0 10.922 10.44C27.306 56.737 38.46 63.443 50 63.57h.19c11.503-.126 22.655-6.832 32.007-13.37A43.447 45.803 0 0 0 93.01 39.92c1.84 12.568 1.11 22.796-2.162 30.43z" />
+        </svg>
+        <div class="japanese">細巻き</div>
+        <div class="roman">Hosomaki</div>
+      </div>
+      <div class="option">
+        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
+          <title>Tempura_1</title>
+          <path d="M99.877 77.004a11.048 11.047 0 0 0-5.64-7.848l-13.566-7.588-.55-.56c-1.3-1.71-2.34-2.95-3.228-3.998-.89-1.05-1.65-1.78-2.39-2.54l-1.36-1.42a57.317 57.312 0 0 1-3.79-4.528l-.06-.08a57.217 57.213 0 0 1-4.288-6.428 59.667 59.662 0 0 0-4.79-7.138 61.986 61.98 0 0 0-5.607-6.488l-.6-.56a50.92 50.914 0 0 1-4-4.608l-.58-.75a54.048 54.043 0 0 1-4.418-6.528 61.037 61.03 0 0 0-4.79-7.128 16.656 16.655 0 0 0-6.32-4.578c-.47-.23-.93-.46-1.37-.7l-1.318-.75c-2.1-1.2-4.47-2.55-7.3-2.76-2.828-.21-5.358.84-7.587 1.74q-.72.3-1.44.57c-.47.18-1 .34-1.45.51l-.42.18a16.086 16.085 0 0 0-9.997 9.997l-.14.41c-.17.49-.33 1-.51 1.45-.18.45-.37 1-.57 1.44-.92 2.238-1.95 4.768-1.78 7.597.17 2.83 1.54 5.208 2.74 7.298.25.45.51.9.75 1.35.24.45.47.9.7 1.37a16.656 16.655 0 0 0 4.58 6.317 61.037 61.03 0 0 0 7.147 4.758 55.218 55.213 0 0 1 6.54 4.39 54.538 54.533 0 0 1 4.398 3.668l-1.36 1.45c-.74.76-1.49 1.53-2.39 2.54-.9 1.01-1.93 2.25-3.23 3.998l-.54.55-13.576 7.548A10.998 10.997 0 0 0 .15 77.004 10.578 10.577 0 0 0 10.815 89.2a10.588 10.587 0 0 0 12.197 10.677 10.998 10.997 0 0 0 7.84-5.64l7.597-13.565.55-.55a61.097 61.09 0 0 0 6.5-5.618 52.25 52.244 0 0 1 4.508-3.998 52.25 52.244 0 0 1 4.51 3.998 61.097 61.09 0 0 0 6.487 5.62l.55.548 7.598 13.566a10.998 10.997 0 0 0 7.85 5.64A10.588 10.587 0 0 0 89.198 89.2a10.588 10.587 0 0 0 10.677-12.196zm-92.51 4.868a4.56 4.56 0 0 1-1.35-3.87 4.63 4.63 0 0 1 2.33-3.408l13.357-7.477 3.48 3.48-11.28 11.275a4.62 4.62 0 0 1-6.537 0zm18.086 9.767a4.59 4.59 0 0 1-3.44 2.358 4.54 4.54 0 0 1-3.898-1.31 4.62 4.62 0 0 1 0-6.537l11.337-11.346 3.48 3.48zM41.31 70.215a50.46 50.455 0 0 1-4.2 3.79L26.013 62.907c1.58-1.94 2.66-3.06 3.78-4.21.46-.47.93-.95 1.43-1.488.998.83 2.128 1.79 3.688 3a58.987 58.982 0 0 0 7.1 4.797c.94.55 1.85 1.09 3 1.84-1.61 1.34-2.67 2.37-3.7 3.37zm17.396 0c-1-1-2.08-2-3.72-3.4-.77-.65-1.68-1.37-2.78-2.21-.81-.598-1.54-1.158-2.198-1.598a58.507 58.502 0 0 0-4.93-3.16 55.758 55.753 0 0 1-6.528-4.378c-1.48-1.13-2.57-2-3.46-2.82-.89-.82-1.72-1.638-2.49-2.358-.588-.57-1.178-1.15-1.878-1.8-1.12-1-2.53-2.22-4.62-3.82a62.376 62.37 0 0 0-7.088-4.787 54.048 54.043 0 0 1-6.528-4.39 11.787 11.786 0 0 1-2.86-4.217c-.26-.52-.51-1-.78-1.54l-.83-1.48c-1-1.69-1.91-3.24-2-4.738-.09-1.5.59-3.15 1.31-4.95.22-.518.43-1.048.63-1.578s.38-1.07.57-1.62a11.727 11.726 0 0 1 2.27-4.568 11.727 11.726 0 0 1 4.57-2.27c.55-.19 1.09-.37 1.62-.57.53-.2 1.06-.41 1.578-.63a12.607 12.606 0 0 1 5-1.31c1.45.09 3 1 4.728 2l1.48.83c.5.27 1 .52 1.54.78a11.787 11.786 0 0 1 4.22 2.86 55.298 55.293 0 0 1 4.348 6.527 59.757 59.752 0 0 0 4.79 7.13c.48.63.93 1.2 1.348 1.72a55.608 55.603 0 0 0 4 4.487l.27.28a56.648 56.643 0 0 1 5.148 5.998 55.758 55.753 0 0 1 4.38 6.528 62.376 62.37 0 0 0 4.788 7.128l.33.42c1.62 2.1 2.82 3.47 3.86 4.59.5.54 1 1 1.43 1.49A54.558 54.553 0 0 1 74 62.907L62.905 74.005a50.46 50.455 0 0 1-4.2-3.79zM81.87 92.65A4.54 4.54 0 0 1 78 93.997a4.59 4.59 0 0 1-3.408-2.32l-7.498-13.395 3.47-3.48L81.87 86.112a4.62 4.62 0 0 1 0 6.54zM92.65 81.87a4.62 4.62 0 0 1-6.538 0L74.802 70.566l3.48-3.48 13.356 7.478a4.62 4.62 0 0 1 1 7.308zM54.717 19.49a42.8 42.797 0 0 0 2.93 3.47c1.1-1.61 1.798-2.81 2.488-4a55.298 55.293 0 0 1 4.39-6.527 11.787 11.786 0 0 1 4.218-2.86c.52-.26 1-.51 1.54-.78l1.49-.768c1.68-1 3.23-1.91 4.73-2a12.607 12.606 0 0 1 4.998 1.31c.52.22 1 .43 1.58.63.58.2 1.07.38 1.62.57a11.727 11.726 0 0 1 4.57 2.27 11.727 11.726 0 0 1 2.268 4.567c.19.55.37 1.09.57 1.62.2.53.41 1.06.63 1.58.72 1.8 1.41 3.498 1.31 4.948-.1 1.45-1 3.05-2 4.738l-.83 1.48c-.27.5-.52 1-.78 1.54a11.787 11.786 0 0 1-2.86 4.218 54.048 54.043 0 0 1-6.577 4.39 62.536 62.53 0 0 0-7.118 4.777l.14.18.16.21a49.04 49.035 0 0 0 3.31 4l.24.26a52.988 52.984 0 0 1 6.348-4.3 61.037 61.03 0 0 0 7.13-4.788 16.656 16.655 0 0 0 4.577-6.318c.23-.47.46-.93.7-1.37.24-.44.5-.9.75-1.35 1.2-2.09 2.55-4.468 2.74-7.297.19-2.83-.84-5.36-1.74-7.588q-.3-.72-.57-1.44c-.18-.47-.34-1-.51-1.45l-.16-.39A16.086 16.085 0 0 0 87 3.027l-.41-.14c-.49-.17-1-.33-1.45-.51l-1.44-.57c-2.24-.92-4.77-1.95-7.598-1.78-2.83.17-5.2 1.54-7.3 2.74-.448.25-.898.51-1.348.75-.45.24-.9.47-1.37.7a16.656 16.655 0 0 0-6.32 4.578 61.037 61.03 0 0 0-4.758 7.148c-.42.71-.83 1.4-1.31 2.18.17.22.34.46.53.7z" />
+        </svg>
+        <div class="japanese">天ぷら</div>
+        <div class="roman">Tempura</div>
+      </div>
+      <div class="option">
+        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
+          <title>Soup</title>
+          <path d="M85.16 38.74L92.37 0h-6.11l-7.21 38.74H65.91L67.71 0h-6L59.9 38.74H0v2.93A48.48 48.48 0 0 0 20.67 81.2V100h58.66V81.2A48.48 48.48 0 0 0 100 41.67v-2.93zm-11.83 55.4H26.67v-9.28a50.83 50.83 0 0 0 46.66 0zM50 84.66c-20.36 0-37.54-13.59-42.53-32A41.7 41.7 0 0 1 6.1 44.6h87.8C92.36 67 73.26 84.66 50 84.66z" />
+        </svg>
+        <div class="japanese">そば</div>
+        <div class="roman">Soba</div>
+      </div>
+      <div class="option">
+        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
+          <title>Dango</title>
+          <path d="M100 95.76l-19-19A18.75 18.75 0 0 0 65.76 47a19.29 19.29 0 0 0-4 .43 18.75 18.75 0 0 0-5-17.21 18.75 18.75 0 0 0-17.21-5.05 19.29 19.29 0 0 0 .43-4A18.74 18.74 0 0 0 10.27 6l-6-6L0 4.24l6 6A18.75 18.75 0 0 0 21.22 40a19.29 19.29 0 0 0 4-.43A18.7 18.7 0 0 0 47.44 61.8a19.29 19.29 0 0 0-.43 4A18.74 18.74 0 0 0 76.72 81l19 19zM21.22 34a12.75 12.75 0 1 1 9-21.77 12.76 12.76 0 0 1-9 21.77zm13.25 18.51a12.75 12.75 0 0 1 18-18 12.76 12.76 0 0 1-18 18zm22.28 22.27a12.75 12.75 0 1 1 18 0 12.67 12.67 0 0 1-18 0z" />
+        </svg>
+        <div class="japanese">団子</div>
+        <div class="roman">Dango</div>
+      </div>
+      <div class="option">
+        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
+          <title>Dumpling</title>
+          <path d="M99.58 53C96.26 31.92 73.69 6.1 52.08 6H47.9C26.31 6.1 3.74 31.92.42 53-1.8 67.06 4.85 79.69 18.19 86.82a58.35 58.35 0 0 0 19.21 5.87 86.738 86.74 0 0 0 25.2 0 58.35 58.35 0 0 0 19.21-5.87C95.15 79.69 101.8 67.06 99.58 53zM79 81.49a52.65 52.65 0 0 1-17.28 5.27 80.748 80.75 0 0 1-23.44 0A52.65 52.65 0 0 1 21 81.49C10 75.65 4.54 65.35 6.34 53.93c2.36-15 16.17-33.31 31.21-39.63l-6.3 12.06 5.31 2.78 8.85-17c.53-.06 1.06-.1 1.59-.13v15h6v-15c.53 0 1.06.07 1.59.13l8.85 17 5.31-2.78-6.3-12.06c15 6.33 28.85 24.63 31.21 39.63C95.46 65.35 90 75.65 79 81.49z" />
+        </svg>
+        <div class="japanese">餃子</div>
+        <div class="roman">Gyoza</div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/tilt-to-make-room-for-menu/dist/script.js b/tilt-to-make-room-for-menu/dist/script.js
new file mode 100644
index 0000000..330a106
--- /dev/null
+++ b/tilt-to-make-room-for-menu/dist/script.js
@@ -0,0 +1 @@
+// Nothing to see here, move along..
\ No newline at end of file
diff --git a/tilt-to-make-room-for-menu/dist/style.css b/tilt-to-make-room-for-menu/dist/style.css
new file mode 100644
index 0000000..467bf4d
--- /dev/null
+++ b/tilt-to-make-room-for-menu/dist/style.css
@@ -0,0 +1,154 @@
+body {
+  align-items: center;
+  background-color: #569bd7;
+  display: flex;
+  font-family: "Inter", serif;
+  font-size: 14px;
+  justify-content: center;
+  overflow: hidden;
+  height: 100vh;
+  margin: 0;
+  user-select: none;
+}
+.phone-frame {
+  background-color: #353535;
+  border-radius: 30px;
+  box-shadow: 0 0.4px 1px rgba(0, 0, 0, 0.026), 0 1px 2.3px rgba(0, 0, 0, 0.045),
+    0 1.9px 4.4px rgba(0, 0, 0, 0.065), 0 3.4px 7.8px rgba(0, 0, 0, 0.094),
+    0 6.3px 14.6px rgba(0, 0, 0, 0.145), 0 15px 35px rgba(0, 0, 0, 0.25);
+  width: 240px;
+  height: 480px;
+  padding: 5px;
+}
+.phone-screen {
+  align-items: center;
+  background-color: #000;
+  border-radius: 26px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  perspective: 460px;
+  position: relative;
+  width: 100%;
+}
+.imageContainer {
+  overflow: hidden;
+  transform-origin: 100% 0;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100%;
+}
+.active .imageContainer {
+  transform: rotateX(-45deg);
+}
+.image {
+  left: -76%;
+  position: relative;
+  width: 250%;
+}
+.overlay {
+  background: linear-gradient(#0000001f 0%, #0000009f 80%, #000000bf 100%);
+  height: 100%;
+  opacity: 0;
+  position: absolute;
+  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  top: 0;
+  width: 100%;
+}
+.active .overlay {
+  opacity: 1;
+}
+.button-menu {
+  border-radius: 50%;
+  position: absolute;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.button-menu1 {
+  bottom: 25px;
+  cursor: pointer;
+  fill: none;
+  height: 24px;
+  /* left: 35px; */
+  padding: 5px;
+  -webkit-tap-highlight-color: transparent;
+  width: 24px;
+}
+.bg {
+  fill: #282828;
+}
+.button-menu1:active .bg {
+  fill: #555;
+}
+.line {
+  stroke: #fff;
+  stroke-width: 2;
+  transition: stroke 300ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: 50%;
+}
+.active .line1 {
+  stroke: #50cea1;
+  transform: translateX(-2.5px) translateY(3px) rotate(45deg);
+}
+.active .line2 {
+  stroke: #50cea1;
+  transform: scale(0);
+}
+.active .line3 {
+  stroke: #50cea1;
+  transform: translateX(-2.5px) translateY(-3px) rotate(-45deg);
+}
+.active .button-menu {
+  transform: translateY(-180px);
+}
+.menu {
+  background: linear-gradient(rgb(131 63 63), transparent),
+    linear-gradient(to top left, rgb(47 144 120), transparent),
+    linear-gradient(to top right, rgb(94 94 160), transparent);
+  background-blend-mode: screen;
+  bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+  height: 192px;
+  position: absolute;
+  transform: translateY(192px);
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100%;
+}
+.option {
+  align-items: center;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  width: 80px;
+}
+.option:active::after {
+  background-color: #000;
+  content: " ";
+  opacity: 0.25;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.food {
+  height: 40px;
+  width: 40px;
+}
+.active .menu {
+  transform: translateY(0);
+}
+
+.japanese {
+  font-weight: 600;
+  font-family: sans-serif;
+}
+.roman {
+  font-family: sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+}
\ No newline at end of file
diff --git a/tilt-to-make-room-for-menu/license.txt b/tilt-to-make-room-for-menu/license.txt
new file mode 100644
index 0000000..ea41fa1
--- /dev/null
+++ b/tilt-to-make-room-for-menu/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Mikael Ainalem (https://codepen.io/ainalem/pen/MWJYqQE)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/tilt-to-make-room-for-menu/src/index.html b/tilt-to-make-room-for-menu/src/index.html
new file mode 100644
index 0000000..bde643f
--- /dev/null
+++ b/tilt-to-make-room-for-menu/src/index.html
@@ -0,0 +1,66 @@
+<div class="phone-frame">
+  <div class="phone-screen">
+    <div class="imageContainer">
+      <img class="image" src="data:image/jpg;base64,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" />
+      <div class="overlay"></div>
+    </div>
+    <!-- <div class="button-menu button-menu1"></div> -->
+    <svg class="button-menu button-menu1" height="24" width="24" onclick="document.querySelector('.phone-screen').classList.toggle('active')">
+      <circle class="bg" r="12" cx="12" cy="12" />
+      <path class="line line1" d="M 6,8 H 18" />
+      <path class="line line2" d="M 6,12 H 18" />
+      <path class="line line3" d="M 6,16 H 18" />
+    </svg>
+    <div class="menu" onclick="document.querySelector('.phone-screen').classList.remove('active')">
+      <div class="option">
+        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
+          <title>Sushi</title>
+          <path d="M96.697 25.12a21.525 20.56 0 0 0 .774-3.23C99.147 10.54 88.228 2.11 76.69.53 59.07-1.9 40.142 4.1 24.773 17 9.07 30.1-.197 48.36.003 65.81.108 75.25 6.965 95.1 17.8 99.19a11.715 11.19 0 0 0 4.345.81 12.69 12.12 0 0 0 6.523-1.81l46.064-19.85a43.018 41.09 0 0 0 21.965-53.22zm-76.55 68.49c-7.832-2.95-13.78-20.08-13.873-27.87a53.393 51 0 0 1 3.643-18.57L31.61 55l2.22-5.61-21.39-7.72a69.997 66.86 0 0 1 16.47-20.2c.344-.29.7-.56 1.045-.84l26.864 9.7 2.22-5.61-23.21-8.38C46.182 9.6 57.7 6 68.9 6a48.975 46.78 0 0 1 6.9.46c7.16 1 16.75 6.17 15.453 14.59-1.047 7.33-8.02 12.15-14.73 16.81-1.3.9-2.576 1.79-3.78 2.67A152.85 146 0 0 0 48.1 63.11a106.786 102 0 0 0-9.005 13c-3.235 5.27-6.28 10.25-10.343 14.33a15.16 14.48 0 0 1-3.005 2.4l-2.094.92a5.12 4.89 0 0 1-3.507-.15zm52-20.73L39.534 86.93c1.748-2.54 3.36-5.16 4.952-7.73a98.944 94.51 0 0 1 8.438-12.29 145.825 139.29 0 0 1 23.65-21.62c1.162-.86 2.387-1.71 3.643-2.58 4.324-3 8.972-6.25 12.396-10.39a36.768 35.12 0 0 1-20.468 40.56z" />
+        </svg>
+        <div class="japanese">にぎり</div>
+        <div class="roman">Nigiri</div>
+      </div>
+      <div class="option">
+        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
+          <title>Sushi_2</title>
+          <path d="M71.945 28.205L50 16.26 28.05 28.204a10.902 11.493 0 0 0-1 3.533 10.522 11.092 0 0 0 1 3.606L50 47.3l22.005-11.946a10.902 11.493 0 0 0 1-3.532 10.522 11.092 0 0 0-1.06-3.617zM34.59 31.79L50 23.355l15.424 8.435L50 40.183z" />
+          <path d="M98.77 37.62a28.755 30.314 0 0 0-2.76-8.824c-2.76-5.778-7.352-10.882-13.893-15.426C72.735 6.77 61.563.095 50.06 0h-.12c-11.5.095-22.673 6.77-32.094 13.37-6.55 4.555-11.162 9.67-13.912 15.468a28.865 30.43 0 0 0-1.18 2.815 29.165 30.747 0 0 0-1.52 5.968c-2.24 14.404-1.43 26.288 2.45 35.334 4 9.385 11.87 14.636 19.743 18.906 10 5.4 18.623 8.056 26.514 8.14h.12c7.893-.084 16.564-2.74 26.516-8.14 7.87-4.218 15.712-9.49 19.743-18.906 3.87-9.046 4.69-20.93 2.45-35.333zM21.155 18.643C29.818 12.612 40 6.442 49.91 6.326h.18c9.913.116 20.095 6.327 28.756 12.326 5.69 3.965 9.642 8.32 11.922 13.202-2.28 4.83-6.2 9.13-11.852 13.074-8.66 6.032-18.853 12.21-28.765 12.316H50c-9.94-.106-20.132-6.327-28.794-12.326-5.72-3.975-9.65-8.33-11.922-13.223 2.32-4.818 6.24-9.11 11.872-13.043zm69.692 51.666c-3.27 7.613-10.112 12.136-17.003 15.89-9.06 4.913-16.833 7.38-23.734 7.38h-.18c-6.9-.084-14.67-2.52-23.733-7.38-6.91-3.754-13.752-8.277-17.003-15.89-3.25-7.613-4-17.925-2.16-30.578a43.207 45.55 0 0 0 10.922 10.44C27.306 56.737 38.46 63.443 50 63.57h.19c11.503-.126 22.655-6.832 32.007-13.37A43.447 45.803 0 0 0 93.01 39.92c1.84 12.568 1.11 22.796-2.162 30.43z" />
+        </svg>
+        <div class="japanese">細巻き</div>
+        <div class="roman">Hosomaki</div>
+      </div>
+      <div class="option">
+        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
+          <title>Tempura_1</title>
+          <path d="M99.877 77.004a11.048 11.047 0 0 0-5.64-7.848l-13.566-7.588-.55-.56c-1.3-1.71-2.34-2.95-3.228-3.998-.89-1.05-1.65-1.78-2.39-2.54l-1.36-1.42a57.317 57.312 0 0 1-3.79-4.528l-.06-.08a57.217 57.213 0 0 1-4.288-6.428 59.667 59.662 0 0 0-4.79-7.138 61.986 61.98 0 0 0-5.607-6.488l-.6-.56a50.92 50.914 0 0 1-4-4.608l-.58-.75a54.048 54.043 0 0 1-4.418-6.528 61.037 61.03 0 0 0-4.79-7.128 16.656 16.655 0 0 0-6.32-4.578c-.47-.23-.93-.46-1.37-.7l-1.318-.75c-2.1-1.2-4.47-2.55-7.3-2.76-2.828-.21-5.358.84-7.587 1.74q-.72.3-1.44.57c-.47.18-1 .34-1.45.51l-.42.18a16.086 16.085 0 0 0-9.997 9.997l-.14.41c-.17.49-.33 1-.51 1.45-.18.45-.37 1-.57 1.44-.92 2.238-1.95 4.768-1.78 7.597.17 2.83 1.54 5.208 2.74 7.298.25.45.51.9.75 1.35.24.45.47.9.7 1.37a16.656 16.655 0 0 0 4.58 6.317 61.037 61.03 0 0 0 7.147 4.758 55.218 55.213 0 0 1 6.54 4.39 54.538 54.533 0 0 1 4.398 3.668l-1.36 1.45c-.74.76-1.49 1.53-2.39 2.54-.9 1.01-1.93 2.25-3.23 3.998l-.54.55-13.576 7.548A10.998 10.997 0 0 0 .15 77.004 10.578 10.577 0 0 0 10.815 89.2a10.588 10.587 0 0 0 12.197 10.677 10.998 10.997 0 0 0 7.84-5.64l7.597-13.565.55-.55a61.097 61.09 0 0 0 6.5-5.618 52.25 52.244 0 0 1 4.508-3.998 52.25 52.244 0 0 1 4.51 3.998 61.097 61.09 0 0 0 6.487 5.62l.55.548 7.598 13.566a10.998 10.997 0 0 0 7.85 5.64A10.588 10.587 0 0 0 89.198 89.2a10.588 10.587 0 0 0 10.677-12.196zm-92.51 4.868a4.56 4.56 0 0 1-1.35-3.87 4.63 4.63 0 0 1 2.33-3.408l13.357-7.477 3.48 3.48-11.28 11.275a4.62 4.62 0 0 1-6.537 0zm18.086 9.767a4.59 4.59 0 0 1-3.44 2.358 4.54 4.54 0 0 1-3.898-1.31 4.62 4.62 0 0 1 0-6.537l11.337-11.346 3.48 3.48zM41.31 70.215a50.46 50.455 0 0 1-4.2 3.79L26.013 62.907c1.58-1.94 2.66-3.06 3.78-4.21.46-.47.93-.95 1.43-1.488.998.83 2.128 1.79 3.688 3a58.987 58.982 0 0 0 7.1 4.797c.94.55 1.85 1.09 3 1.84-1.61 1.34-2.67 2.37-3.7 3.37zm17.396 0c-1-1-2.08-2-3.72-3.4-.77-.65-1.68-1.37-2.78-2.21-.81-.598-1.54-1.158-2.198-1.598a58.507 58.502 0 0 0-4.93-3.16 55.758 55.753 0 0 1-6.528-4.378c-1.48-1.13-2.57-2-3.46-2.82-.89-.82-1.72-1.638-2.49-2.358-.588-.57-1.178-1.15-1.878-1.8-1.12-1-2.53-2.22-4.62-3.82a62.376 62.37 0 0 0-7.088-4.787 54.048 54.043 0 0 1-6.528-4.39 11.787 11.786 0 0 1-2.86-4.217c-.26-.52-.51-1-.78-1.54l-.83-1.48c-1-1.69-1.91-3.24-2-4.738-.09-1.5.59-3.15 1.31-4.95.22-.518.43-1.048.63-1.578s.38-1.07.57-1.62a11.727 11.726 0 0 1 2.27-4.568 11.727 11.726 0 0 1 4.57-2.27c.55-.19 1.09-.37 1.62-.57.53-.2 1.06-.41 1.578-.63a12.607 12.606 0 0 1 5-1.31c1.45.09 3 1 4.728 2l1.48.83c.5.27 1 .52 1.54.78a11.787 11.786 0 0 1 4.22 2.86 55.298 55.293 0 0 1 4.348 6.527 59.757 59.752 0 0 0 4.79 7.13c.48.63.93 1.2 1.348 1.72a55.608 55.603 0 0 0 4 4.487l.27.28a56.648 56.643 0 0 1 5.148 5.998 55.758 55.753 0 0 1 4.38 6.528 62.376 62.37 0 0 0 4.788 7.128l.33.42c1.62 2.1 2.82 3.47 3.86 4.59.5.54 1 1 1.43 1.49A54.558 54.553 0 0 1 74 62.907L62.905 74.005a50.46 50.455 0 0 1-4.2-3.79zM81.87 92.65A4.54 4.54 0 0 1 78 93.997a4.59 4.59 0 0 1-3.408-2.32l-7.498-13.395 3.47-3.48L81.87 86.112a4.62 4.62 0 0 1 0 6.54zM92.65 81.87a4.62 4.62 0 0 1-6.538 0L74.802 70.566l3.48-3.48 13.356 7.478a4.62 4.62 0 0 1 1 7.308zM54.717 19.49a42.8 42.797 0 0 0 2.93 3.47c1.1-1.61 1.798-2.81 2.488-4a55.298 55.293 0 0 1 4.39-6.527 11.787 11.786 0 0 1 4.218-2.86c.52-.26 1-.51 1.54-.78l1.49-.768c1.68-1 3.23-1.91 4.73-2a12.607 12.606 0 0 1 4.998 1.31c.52.22 1 .43 1.58.63.58.2 1.07.38 1.62.57a11.727 11.726 0 0 1 4.57 2.27 11.727 11.726 0 0 1 2.268 4.567c.19.55.37 1.09.57 1.62.2.53.41 1.06.63 1.58.72 1.8 1.41 3.498 1.31 4.948-.1 1.45-1 3.05-2 4.738l-.83 1.48c-.27.5-.52 1-.78 1.54a11.787 11.786 0 0 1-2.86 4.218 54.048 54.043 0 0 1-6.577 4.39 62.536 62.53 0 0 0-7.118 4.777l.14.18.16.21a49.04 49.035 0 0 0 3.31 4l.24.26a52.988 52.984 0 0 1 6.348-4.3 61.037 61.03 0 0 0 7.13-4.788 16.656 16.655 0 0 0 4.577-6.318c.23-.47.46-.93.7-1.37.24-.44.5-.9.75-1.35 1.2-2.09 2.55-4.468 2.74-7.297.19-2.83-.84-5.36-1.74-7.588q-.3-.72-.57-1.44c-.18-.47-.34-1-.51-1.45l-.16-.39A16.086 16.085 0 0 0 87 3.027l-.41-.14c-.49-.17-1-.33-1.45-.51l-1.44-.57c-2.24-.92-4.77-1.95-7.598-1.78-2.83.17-5.2 1.54-7.3 2.74-.448.25-.898.51-1.348.75-.45.24-.9.47-1.37.7a16.656 16.655 0 0 0-6.32 4.578 61.037 61.03 0 0 0-4.758 7.148c-.42.71-.83 1.4-1.31 2.18.17.22.34.46.53.7z" />
+        </svg>
+        <div class="japanese">天ぷら</div>
+        <div class="roman">Tempura</div>
+      </div>
+      <div class="option">
+        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
+          <title>Soup</title>
+          <path d="M85.16 38.74L92.37 0h-6.11l-7.21 38.74H65.91L67.71 0h-6L59.9 38.74H0v2.93A48.48 48.48 0 0 0 20.67 81.2V100h58.66V81.2A48.48 48.48 0 0 0 100 41.67v-2.93zm-11.83 55.4H26.67v-9.28a50.83 50.83 0 0 0 46.66 0zM50 84.66c-20.36 0-37.54-13.59-42.53-32A41.7 41.7 0 0 1 6.1 44.6h87.8C92.36 67 73.26 84.66 50 84.66z" />
+        </svg>
+        <div class="japanese">そば</div>
+        <div class="roman">Soba</div>
+      </div>
+      <div class="option">
+        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
+          <title>Dango</title>
+          <path d="M100 95.76l-19-19A18.75 18.75 0 0 0 65.76 47a19.29 19.29 0 0 0-4 .43 18.75 18.75 0 0 0-5-17.21 18.75 18.75 0 0 0-17.21-5.05 19.29 19.29 0 0 0 .43-4A18.74 18.74 0 0 0 10.27 6l-6-6L0 4.24l6 6A18.75 18.75 0 0 0 21.22 40a19.29 19.29 0 0 0 4-.43A18.7 18.7 0 0 0 47.44 61.8a19.29 19.29 0 0 0-.43 4A18.74 18.74 0 0 0 76.72 81l19 19zM21.22 34a12.75 12.75 0 1 1 9-21.77 12.76 12.76 0 0 1-9 21.77zm13.25 18.51a12.75 12.75 0 0 1 18-18 12.76 12.76 0 0 1-18 18zm22.28 22.27a12.75 12.75 0 1 1 18 0 12.67 12.67 0 0 1-18 0z" />
+        </svg>
+        <div class="japanese">団子</div>
+        <div class="roman">Dango</div>
+      </div>
+      <div class="option">
+        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
+          <title>Dumpling</title>
+          <path d="M99.58 53C96.26 31.92 73.69 6.1 52.08 6H47.9C26.31 6.1 3.74 31.92.42 53-1.8 67.06 4.85 79.69 18.19 86.82a58.35 58.35 0 0 0 19.21 5.87 86.738 86.74 0 0 0 25.2 0 58.35 58.35 0 0 0 19.21-5.87C95.15 79.69 101.8 67.06 99.58 53zM79 81.49a52.65 52.65 0 0 1-17.28 5.27 80.748 80.75 0 0 1-23.44 0A52.65 52.65 0 0 1 21 81.49C10 75.65 4.54 65.35 6.34 53.93c2.36-15 16.17-33.31 31.21-39.63l-6.3 12.06 5.31 2.78 8.85-17c.53-.06 1.06-.1 1.59-.13v15h6v-15c.53 0 1.06.07 1.59.13l8.85 17 5.31-2.78-6.3-12.06c15 6.33 28.85 24.63 31.21 39.63C95.46 65.35 90 75.65 79 81.49z" />
+        </svg>
+        <div class="japanese">餃子</div>
+        <div class="roman">Gyoza</div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/tilt-to-make-room-for-menu/src/script.js b/tilt-to-make-room-for-menu/src/script.js
new file mode 100644
index 0000000..330a106
--- /dev/null
+++ b/tilt-to-make-room-for-menu/src/script.js
@@ -0,0 +1 @@
+// Nothing to see here, move along..
\ No newline at end of file
diff --git a/tilt-to-make-room-for-menu/src/style.css b/tilt-to-make-room-for-menu/src/style.css
new file mode 100644
index 0000000..a656ded
--- /dev/null
+++ b/tilt-to-make-room-for-menu/src/style.css
@@ -0,0 +1,154 @@
+body {
+  align-items: center;
+  background-color: #569bd7;
+  display: flex;
+  font-family: "Inter", serif;
+  font-size: 14px;
+  justify-content: center;
+  overflow: hidden;
+  height: 100vh;
+  margin: 0;
+  user-select: none;
+}
+.phone-frame {
+  background-color: #353535;
+  border-radius: 30px;
+  box-shadow: 0 0.4px 1px rgba(0, 0, 0, 0.026), 0 1px 2.3px rgba(0, 0, 0, 0.045),
+    0 1.9px 4.4px rgba(0, 0, 0, 0.065), 0 3.4px 7.8px rgba(0, 0, 0, 0.094),
+    0 6.3px 14.6px rgba(0, 0, 0, 0.145), 0 15px 35px rgba(0, 0, 0, 0.25);
+  width: 240px;
+  height: 480px;
+  padding: 5px;
+}
+.phone-screen {
+  align-items: center;
+  background-color: #000;
+  border-radius: 26px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  perspective: 460px;
+  position: relative;
+  width: 100%;
+}
+.imageContainer {
+  overflow: hidden;
+  transform-origin: 100% 0;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100%;
+}
+.active .imageContainer {
+  transform: rotateX(-45deg);
+}
+.image {
+  left: -76%;
+  position: relative;
+  width: 250%;
+}
+.overlay {
+  background: linear-gradient(#0000001f 0%, #0000009f 80%, #000000bf 100%);
+  height: 100%;
+  opacity: 0;
+  position: absolute;
+  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  top: 0;
+  width: 100%;
+}
+.active .overlay {
+  opacity: 1;
+}
+.button-menu {
+  border-radius: 50%;
+  position: absolute;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.button-menu1 {
+  bottom: 25px;
+  cursor: pointer;
+  fill: none;
+  height: 24px;
+  /* left: 35px; */
+  padding: 5px;
+  -webkit-tap-highlight-color: transparent;
+  width: 24px;
+}
+.bg {
+  fill: #282828;
+}
+.button-menu1:active .bg {
+  fill: #555;
+}
+.line {
+  stroke: #fff;
+  stroke-width: 2;
+  transition: stroke 300ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: 50%;
+}
+.active .line1 {
+  stroke: #50cea1;
+  transform: translateX(-2.5px) translateY(3px) rotate(45deg);
+}
+.active .line2 {
+  stroke: #50cea1;
+  transform: scale(0);
+}
+.active .line3 {
+  stroke: #50cea1;
+  transform: translateX(-2.5px) translateY(-3px) rotate(-45deg);
+}
+.active .button-menu {
+  transform: translateY(-180px);
+}
+.menu {
+  background: linear-gradient(rgb(131 63 63), transparent),
+    linear-gradient(to top left, rgb(47 144 120), transparent),
+    linear-gradient(to top right, rgb(94 94 160), transparent);
+  background-blend-mode: screen;
+  bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+  height: 192px;
+  position: absolute;
+  transform: translateY(192px);
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100%;
+}
+.option {
+  align-items: center;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  width: 80px;
+}
+.option:active::after {
+  background-color: #000;
+  content: " ";
+  opacity: 0.25;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.food {
+  height: 40px;
+  width: 40px;
+}
+.active .menu {
+  transform: translateY(0);
+}
+
+.japanese {
+  font-weight: 600;
+  font-family: sans-serif;
+}
+.roman {
+  font-family: sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+}
diff --git a/tiny-but-accessible-5-star-rating/README.markdown b/tiny-but-accessible-5-star-rating/README.markdown
new file mode 100644
index 0000000..0b4f034
--- /dev/null
+++ b/tiny-but-accessible-5-star-rating/README.markdown
@@ -0,0 +1,5 @@
+# Tiny but accessible 5 star rating
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/FredGenkin/pen/eaXYGV](https://codepen.io/FredGenkin/pen/eaXYGV).
+
+
diff --git a/tiny-but-accessible-5-star-rating/dist/index.html b/tiny-but-accessible-5-star-rating/dist/index.html
new file mode 100644
index 0000000..0777895
--- /dev/null
+++ b/tiny-but-accessible-5-star-rating/dist/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Tiny but accessible 5 star rating</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="Stars" style="--rating: 2.3;" aria-label="Rating of this product is 2.3 out of 5.">
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/tiny-but-accessible-5-star-rating/dist/style.css b/tiny-but-accessible-5-star-rating/dist/style.css
new file mode 100644
index 0000000..a9dd074
--- /dev/null
+++ b/tiny-but-accessible-5-star-rating/dist/style.css
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+:root {
+  --star-size: 60px;
+  --star-color: #fff;
+  --star-background: #fc0;
+}
+
+.Stars {
+  --percent: calc(var(--rating) / 5 * 100%);
+  display: inline-block;
+  font-size: var(--star-size);
+  font-family: Times;
+  line-height: 1;
+}
+.Stars::before {
+  content: "★★★★★";
+  letter-spacing: 3px;
+  background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+body {
+  background: #eee;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+* {
+  position: relative;
+  box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/tiny-but-accessible-5-star-rating/license.txt b/tiny-but-accessible-5-star-rating/license.txt
new file mode 100644
index 0000000..e930f1f
--- /dev/null
+++ b/tiny-but-accessible-5-star-rating/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Fred Genkin (https://codepen.io/FredGenkin/pen/eaXYGV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/tiny-but-accessible-5-star-rating/src/index.html b/tiny-but-accessible-5-star-rating/src/index.html
new file mode 100644
index 0000000..d6b79ba
--- /dev/null
+++ b/tiny-but-accessible-5-star-rating/src/index.html
@@ -0,0 +1 @@
+<div class="Stars" style="--rating: 2.3;" aria-label="Rating of this product is 2.3 out of 5.">
\ No newline at end of file
diff --git a/tiny-but-accessible-5-star-rating/src/style.scss b/tiny-but-accessible-5-star-rating/src/style.scss
new file mode 100644
index 0000000..ba376ef
--- /dev/null
+++ b/tiny-but-accessible-5-star-rating/src/style.scss
@@ -0,0 +1,37 @@
+:root {
+  --star-size: 60px;
+  --star-color: #fff;
+  --star-background: #fc0;
+}
+
+.Stars {
+  --percent: calc(var(--rating) / 5 * 100%);
+  
+  display: inline-block;
+  font-size: var(--star-size);
+  font-family: Times; // make sure ★ appears correctly
+  line-height: 1;
+  
+  &::before {
+    content: '★★★★★';
+    letter-spacing: 3px;
+    background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+// Just to make a preview more beautifull
+
+body {
+  background: #eee;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+* {
+  position: relative;
+  box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/to-stick-and-stand/README.markdown b/to-stick-and-stand/README.markdown
new file mode 100644
index 0000000..9f4a61a
--- /dev/null
+++ b/to-stick-and-stand/README.markdown
@@ -0,0 +1,5 @@
+# to stick and stand
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ge1doot/pen/NWrrojJ](https://codepen.io/ge1doot/pen/NWrrojJ).
+
+Together.
diff --git a/to-stick-and-stand/dist/index.html b/to-stick-and-stand/dist/index.html
new file mode 100644
index 0000000..48ab3d0
--- /dev/null
+++ b/to-stick-and-stand/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - to stick and stand</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/to-stick-and-stand/dist/script.js b/to-stick-and-stand/dist/script.js
new file mode 100644
index 0000000..70ddcdb
--- /dev/null
+++ b/to-stick-and-stand/dist/script.js
@@ -0,0 +1,241 @@
+// import box 2D Lite Javascript module
+import * as box2D from "https://codepen.io/ge1doot/pen/OJXXGKv.js";
+const bodies = box2D.bodies;
+let numBodies = 0;
+let tempo = 0;
+// ---- init canvas ----
+
+const canvas = {
+	elem: document.createElement("canvas"),
+	init(w, h) {
+		const ctx = this.elem.getContext("2d");
+		this.width = w;
+		this.height = h;
+		this.elem.width = w;
+		this.elem.height = h;
+		document.body.appendChild(this.elem);
+		this.resize();
+		window.addEventListener("resize", () => this.resize(), false);
+		return ctx;
+	},
+	resize() {
+		let o = this.elem;
+		this.sx = this.width / this.elem.offsetWidth;
+		this.sy = this.height / this.elem.offsetHeight;
+		for (this.left = 0, this.top = 0; o != null; o = o.offsetParent) {
+			this.left += o.offsetLeft;
+			this.top += o.offsetTop;
+		}
+	}
+};
+
+// ---- init pointer ----
+
+const pointer = {
+	x: 0,
+	y: 0,
+	init() {
+		window.addEventListener("mousemove", (e) => this.move(e), false);
+		canvas.elem.addEventListener("touchmove", (e) => this.move(e), false);
+		window.addEventListener("mousedown", (e) => this.down(e), false);
+		window.addEventListener("touchstart", (e) => this.down(e), false);
+	},
+	move(e) {
+		let touchMode = e.targetTouches,
+			pointer;
+		if (touchMode) {
+			e.preventDefault();
+			pointer = touchMode[0];
+		} else pointer = e;
+		this.x = (-canvas.left + pointer.clientX) * canvas.sx;
+		this.y = (-canvas.top + pointer.clientY) * canvas.sy;
+	},
+	down(e) {
+		this.move(e);
+		e.preventDefault();
+		const over = box2D.isPointerInside(ctx, this.x, this.y);
+		if (over !== false && over.invMass > 0) {
+			if (over.group !== "") {
+				const group = over.group;
+				for (const body of bodies) {
+					if (body.group === group) {
+						body.velocity.x = Math.random() * 500 - 250;
+						body.velocity.y = -Math.random() * 400;
+						if (body.gravity < 0) body.gravity = 40;
+						box2D.remove.joints(body);
+						body.group = "";
+						body.fillColor = "#bbb";
+						body.age = 0;
+					}
+				}
+				numBodies--;
+				tempo = 0;
+			}
+		}
+	}
+};
+
+// ---- main loop ----
+let frame = 0;
+const run = () => {
+	requestAnimationFrame(run);
+	ctx.fillStyle = "#eee";
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+	box2D.step();
+
+	for (const body of bodies) {
+		body.drawLines(ctx);
+		ctx.strokeStyle = "#555";
+		ctx.fillStyle = body.fillColor;
+		ctx.fill();
+		ctx.stroke();
+	}
+	
+	let ok = true;
+	for (const body of bodies) {
+		if (body.invMass > 0.0 && body.group === "" && tempo > 100 && ok === true) {
+			ok = false;
+			box2D.remove.body(body);
+		}
+	}
+
+	if (frame % 140 === 0) {
+		if (numBodies < 10) {
+			ragdoll(
+				100 + Math.floor(Math.random() * 600),
+				-1000,
+				Math.floor(Math.random() * 360)
+			);
+		}
+	}
+	frame++;
+	tempo++;
+};
+
+// ---- setup ----
+
+const ctx = canvas.init(800, 800);
+pointer.init();
+const assets = "https://assets.codepen.io/222599/";
+console.clear();
+
+box2D.set.gravity(40);
+box2D.set.iterations(40);
+box2D.set.friction(2.0);
+box2D.set.timeStep(1 / 20);
+box2D.set.allowedPenetration(10.0);
+
+box2D.clear();
+
+// ground
+let ground = box2D.addBody(400, 850, 800, 100, Infinity);
+
+// side walls
+box2D.addBody(-50, 400, 100, 800, Infinity, { friction: 0.0 });
+box2D.addBody(850, 400, 100, 800, Infinity, { friction: 0.0 });
+
+// ragdoll
+
+const ragdoll = (x, y, hue) => {
+	const lum = Math.floor(Math.random() * 40);
+	const col1 = `hsl(${hue},50%, ${20 + lum}%`;
+	const col2 = `hsl(${hue},50%, ${40 + lum}%`;
+	const name = Math.floor(Math.random() * 10000);
+	const t1 = box2D.addBody(x, y - 10, 60, 60, -1, {
+		group: name,
+		fillColor: col1
+	});
+	const c0 = box2D
+		.addBody(x, y + 40, 25, 20, -1, { group: name, fillColor: col2 })
+		.addJoint(t1, 0, -10, 0, 35, 0);
+	const c1 = box2D
+		.addBody(x, y + 55, 100, 10, -1, { group: name, fillColor: col1 })
+		.addJoint(c0, 0, -5, 0, 10, 0);
+	const b1 = box2D
+		.addBody(x, y + 65, 25, 10, -1, { group: name, fillColor: col2 })
+		.addJoint(c1, 0, -5, 0, 5, 0);
+	const c2 = box2D
+		.addBody(x, y + 75, 100, 10, -1, { group: name, fillColor: col1 })
+		.addJoint(b1, 0, -5, 0, 5, 0);
+	const b2 = box2D
+		.addBody(x, y + 85, 25, 10, -1, { group: name, fillColor: col2 })
+		.addJoint(c2, 0, -5, 0, 5, 0);
+	const c3 = box2D
+		.addBody(x, y + 95, 100, 10, -1, { group: name, fillColor: col1 })
+		.addJoint(b2, 0, -5, 0, 5, 0);
+	const b3 = box2D
+		.addBody(x, y + 105, 25, 10, -1, { group: name, fillColor: col2 })
+		.addJoint(c3, 0, -5, 0, 5, 0);
+	const c4 = box2D
+		.addBody(x, y + 115, 100, 10, -1, { group: name, fillColor: col1 })
+		.addJoint(b3, 0, -5, 0, 5, 0);
+	const b4 = box2D
+		.addBody(x, y + 125, 25, 15, -1, { group: name, fillColor: col2 })
+		.addJoint(c4, 0, -8.5, 0, 5, 0);
+	const b5 = box2D
+		.addBody(x, y + 140, 25, 15, -1, { group: name, fillColor: col2 })
+		.addJoint(b4, 0, -8.5, 0, 8.5, 0);
+	const b6 = box2D
+		.addBody(x, y + 155, 25, 15, -1, { group: name, fillColor: col2 })
+		.addJoint(b5, 0, -8.5, 0, 8.5, 0);
+	const h1 = box2D
+		.addBody(x, y + 185, 100, 30, -1, { group: name, fillColor: col1 })
+		.addJoint(b6, 0, -15, 0, 7.5, 0);
+	const l1 = box2D
+		.addBody(x - 25, y + 240, 30, 80, -1, { group: name, fillColor: col2 })
+		.addJoint(h1, 0, -40, -25, 15, 0.05);
+	const p1 = box2D
+		.addBody(x - 25, y + 330, 20, 100, -1, { group: name, fillColor: col2 })
+		.addJoint(l1, 0, -52.5, 0, 42.5, 0);
+	const p3 = box2D
+		.addBody(x - 25, y + 390, 30, 20, -1, { group: name, fillColor: col1 })
+		.addJoint(p1, 0, -12.5, 0, 52.5, 0);
+	const l2 = box2D
+		.addBody(x + 25, y + 240, 30, 80, -1, { group: name, fillColor: col2 })
+		.addJoint(h1, 0, -40, 25, 15, 0.05);
+	const p2 = box2D
+		.addBody(x + 25, y + 330, 20, 100, -1, { group: name, fillColor: col2 })
+		.addJoint(l2, 0, -52.5, 0, 42.5, 0);
+	const p4 = box2D
+		.addBody(x + 25, y + 390, 30, 20, -1, { group: name, fillColor: col1 })
+		.addJoint(p2, 0, -12.5, 0, 52.5, 0);
+	const e1 = box2D
+		.addBody(x - 75, y + 60, 40, 40, -1, { group: name, fillColor: col1 })
+		.addJoint(c1, 22.5, 0, -52.5, 0, 0.1);
+	const e2 = box2D
+		.addBody(x + 75, y + 60, 40, 40, -1, { group: name, fillColor: col1 })
+		.addJoint(c1, -22.5, 0, 52.5, 0, 0.1);
+	const r1 = box2D
+		.addBody(x - 75, y + 115, 20, 60, -1, { group: name, fillColor: col2 })
+		.addJoint(e1, 0, -32.5, 0, 22.5, 0);
+	const r2 = box2D
+		.addBody(x + 75, y + 115, 20, 60, -1, { group: name, fillColor: col2 })
+		.addJoint(e2, 0, -32.5, 0, 22.5, 0);
+	const a1 = box2D
+		.addBody(x - 75, y + 190, 15, 80, -1, { group: name, fillColor: col2 })
+		.addJoint(r1, 0, -42.5, 0, 32.5, 0);
+	const a2 = box2D
+		.addBody(x + 75, y + 190, 15, 80, -1, { group: name, fillColor: col2 })
+		.addJoint(r2, 0, -42.5, 0, 32.5, 0);
+	const m1 = box2D
+		.addBody(x - 75, y + 250, 25, 30, -1, {
+			group: name,
+			gravity: -150 * Math.random(),
+			fillColor: col1
+		})
+		.addJoint(a1, 0, -17.5, 0, 42.5, 0);
+	const m2 = box2D
+		.addBody(x + 75, y + 250, 25, 30, -1, {
+			group: name,
+			gravity: -150 * Math.random(),
+			fillColor: col1
+		})
+		.addJoint(a2, 0, -17.5, 0, 42.5, 0);
+	numBodies++;
+};
+
+ragdoll(200, 100, Math.floor(Math.random() * 360));
+ragdoll(400, 100, Math.floor(Math.random() * 360));
+ragdoll(600, 100, Math.floor(Math.random() * 360));
+
+run();
\ No newline at end of file
diff --git a/to-stick-and-stand/dist/style.css b/to-stick-and-stand/dist/style.css
new file mode 100644
index 0000000..53a7b32
--- /dev/null
+++ b/to-stick-and-stand/dist/style.css
@@ -0,0 +1,25 @@
+body, html {
+	position: absolute;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	background: #fff;
+}
+
+canvas {
+	position: absolute;
+	padding: 0;
+	width: 100vw;
+	height: 100vw;
+	max-height: 100vh;
+	max-width: 100vh;
+	margin: auto;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: #eee;
+	cursor: pointer;
+}
\ No newline at end of file
diff --git a/to-stick-and-stand/license.txt b/to-stick-and-stand/license.txt
new file mode 100644
index 0000000..0d4282d
--- /dev/null
+++ b/to-stick-and-stand/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Gerard Ferrandez (https://codepen.io/ge1doot/pen/NWrrojJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/to-stick-and-stand/src/index.html b/to-stick-and-stand/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/to-stick-and-stand/src/script.js b/to-stick-and-stand/src/script.js
new file mode 100644
index 0000000..f563ff2
--- /dev/null
+++ b/to-stick-and-stand/src/script.js
@@ -0,0 +1,241 @@
+// import box 2D Lite Javascript module
+import * as box2D from "https://codepen.io/ge1doot/pen/OJXXGKv.js";
+const bodies = box2D.bodies;
+let numBodies = 0;
+let tempo = 0;
+// ---- init canvas ----
+
+const canvas = {
+	elem: document.createElement("canvas"),
+	init(w, h) {
+		const ctx = this.elem.getContext("2d");
+		this.width = w;
+		this.height = h;
+		this.elem.width = w;
+		this.elem.height = h;
+		document.body.appendChild(this.elem);
+		this.resize();
+		window.addEventListener("resize", () => this.resize(), false);
+		return ctx;
+	},
+	resize() {
+		let o = this.elem;
+		this.sx = this.width / this.elem.offsetWidth;
+		this.sy = this.height / this.elem.offsetHeight;
+		for (this.left = 0, this.top = 0; o != null; o = o.offsetParent) {
+			this.left += o.offsetLeft;
+			this.top += o.offsetTop;
+		}
+	}
+};
+
+// ---- init pointer ----
+
+const pointer = {
+	x: 0,
+	y: 0,
+	init() {
+		window.addEventListener("mousemove", (e) => this.move(e), false);
+		canvas.elem.addEventListener("touchmove", (e) => this.move(e), false);
+		window.addEventListener("mousedown", (e) => this.down(e), false);
+		window.addEventListener("touchstart", (e) => this.down(e), false);
+	},
+	move(e) {
+		let touchMode = e.targetTouches,
+			pointer;
+		if (touchMode) {
+			e.preventDefault();
+			pointer = touchMode[0];
+		} else pointer = e;
+		this.x = (-canvas.left + pointer.clientX) * canvas.sx;
+		this.y = (-canvas.top + pointer.clientY) * canvas.sy;
+	},
+	down(e) {
+		this.move(e);
+		e.preventDefault();
+		const over = box2D.isPointerInside(ctx, this.x, this.y);
+		if (over !== false && over.invMass > 0) {
+			if (over.group !== "") {
+				const group = over.group;
+				for (const body of bodies) {
+					if (body.group === group) {
+						body.velocity.x = Math.random() * 500 - 250;
+						body.velocity.y = -Math.random() * 400;
+						if (body.gravity < 0) body.gravity = 40;
+						box2D.remove.joints(body);
+						body.group = "";
+						body.fillColor = "#bbb";
+						body.age = 0;
+					}
+				}
+				numBodies--;
+				tempo = 0;
+			}
+		}
+	}
+};
+
+// ---- main loop ----
+let frame = 0;
+const run = () => {
+	requestAnimationFrame(run);
+	ctx.fillStyle = "#eee";
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+	box2D.step();
+
+	for (const body of bodies) {
+		body.drawLines(ctx);
+		ctx.strokeStyle = "#555";
+		ctx.fillStyle = body.fillColor;
+		ctx.fill();
+		ctx.stroke();
+	}
+	
+	let ok = true;
+	for (const body of bodies) {
+		if (body.invMass > 0.0 && body.group === "" && tempo > 100 && ok === true) {
+			ok = false;
+			box2D.remove.body(body);
+		}
+	}
+
+	if (frame % 140 === 0) {
+		if (numBodies < 10) {
+			ragdoll(
+				100 + Math.floor(Math.random() * 600),
+				-1000,
+				Math.floor(Math.random() * 360)
+			);
+		}
+	}
+	frame++;
+	tempo++;
+};
+
+// ---- setup ----
+
+const ctx = canvas.init(800, 800);
+pointer.init();
+const assets = "https://assets.codepen.io/222599/";
+console.clear();
+
+box2D.set.gravity(40);
+box2D.set.iterations(40);
+box2D.set.friction(2.0);
+box2D.set.timeStep(1 / 20);
+box2D.set.allowedPenetration(10.0);
+
+box2D.clear();
+
+// ground
+let ground = box2D.addBody(400, 850, 800, 100, Infinity);
+
+// side walls
+box2D.addBody(-50, 400, 100, 800, Infinity, { friction: 0.0 });
+box2D.addBody(850, 400, 100, 800, Infinity, { friction: 0.0 });
+
+// ragdoll
+
+const ragdoll = (x, y, hue) => {
+	const lum = Math.floor(Math.random() * 40);
+	const col1 = `hsl(${hue},50%, ${20 + lum}%`;
+	const col2 = `hsl(${hue},50%, ${40 + lum}%`;
+	const name = Math.floor(Math.random() * 10000);
+	const t1 = box2D.addBody(x, y - 10, 60, 60, -1, {
+		group: name,
+		fillColor: col1
+	});
+	const c0 = box2D
+		.addBody(x, y + 40, 25, 20, -1, { group: name, fillColor: col2 })
+		.addJoint(t1, 0, -10, 0, 35, 0);
+	const c1 = box2D
+		.addBody(x, y + 55, 100, 10, -1, { group: name, fillColor: col1 })
+		.addJoint(c0, 0, -5, 0, 10, 0);
+	const b1 = box2D
+		.addBody(x, y + 65, 25, 10, -1, { group: name, fillColor: col2 })
+		.addJoint(c1, 0, -5, 0, 5, 0);
+	const c2 = box2D
+		.addBody(x, y + 75, 100, 10, -1, { group: name, fillColor: col1 })
+		.addJoint(b1, 0, -5, 0, 5, 0);
+	const b2 = box2D
+		.addBody(x, y + 85, 25, 10, -1, { group: name, fillColor: col2 })
+		.addJoint(c2, 0, -5, 0, 5, 0);
+	const c3 = box2D
+		.addBody(x, y + 95, 100, 10, -1, { group: name, fillColor: col1 })
+		.addJoint(b2, 0, -5, 0, 5, 0);
+	const b3 = box2D
+		.addBody(x, y + 105, 25, 10, -1, { group: name, fillColor: col2 })
+		.addJoint(c3, 0, -5, 0, 5, 0);
+	const c4 = box2D
+		.addBody(x, y + 115, 100, 10, -1, { group: name, fillColor: col1 })
+		.addJoint(b3, 0, -5, 0, 5, 0);
+	const b4 = box2D
+		.addBody(x, y + 125, 25, 15, -1, { group: name, fillColor: col2 })
+		.addJoint(c4, 0, -8.5, 0, 5, 0);
+	const b5 = box2D
+		.addBody(x, y + 140, 25, 15, -1, { group: name, fillColor: col2 })
+		.addJoint(b4, 0, -8.5, 0, 8.5, 0);
+	const b6 = box2D
+		.addBody(x, y + 155, 25, 15, -1, { group: name, fillColor: col2 })
+		.addJoint(b5, 0, -8.5, 0, 8.5, 0);
+	const h1 = box2D
+		.addBody(x, y + 185, 100, 30, -1, { group: name, fillColor: col1 })
+		.addJoint(b6, 0, -15, 0, 7.5, 0);
+	const l1 = box2D
+		.addBody(x - 25, y + 240, 30, 80, -1, { group: name, fillColor: col2 })
+		.addJoint(h1, 0, -40, -25, 15, 0.05);
+	const p1 = box2D
+		.addBody(x - 25, y + 330, 20, 100, -1, { group: name, fillColor: col2 })
+		.addJoint(l1, 0, -52.5, 0, 42.5, 0);
+	const p3 = box2D
+		.addBody(x - 25, y + 390, 30, 20, -1, { group: name, fillColor: col1 })
+		.addJoint(p1, 0, -12.5, 0, 52.5, 0);
+	const l2 = box2D
+		.addBody(x + 25, y + 240, 30, 80, -1, { group: name, fillColor: col2 })
+		.addJoint(h1, 0, -40, 25, 15, 0.05);
+	const p2 = box2D
+		.addBody(x + 25, y + 330, 20, 100, -1, { group: name, fillColor: col2 })
+		.addJoint(l2, 0, -52.5, 0, 42.5, 0);
+	const p4 = box2D
+		.addBody(x + 25, y + 390, 30, 20, -1, { group: name, fillColor: col1 })
+		.addJoint(p2, 0, -12.5, 0, 52.5, 0);
+	const e1 = box2D
+		.addBody(x - 75, y + 60, 40, 40, -1, { group: name, fillColor: col1 })
+		.addJoint(c1, 22.5, 0, -52.5, 0, 0.1);
+	const e2 = box2D
+		.addBody(x + 75, y + 60, 40, 40, -1, { group: name, fillColor: col1 })
+		.addJoint(c1, -22.5, 0, 52.5, 0, 0.1);
+	const r1 = box2D
+		.addBody(x - 75, y + 115, 20, 60, -1, { group: name, fillColor: col2 })
+		.addJoint(e1, 0, -32.5, 0, 22.5, 0);
+	const r2 = box2D
+		.addBody(x + 75, y + 115, 20, 60, -1, { group: name, fillColor: col2 })
+		.addJoint(e2, 0, -32.5, 0, 22.5, 0);
+	const a1 = box2D
+		.addBody(x - 75, y + 190, 15, 80, -1, { group: name, fillColor: col2 })
+		.addJoint(r1, 0, -42.5, 0, 32.5, 0);
+	const a2 = box2D
+		.addBody(x + 75, y + 190, 15, 80, -1, { group: name, fillColor: col2 })
+		.addJoint(r2, 0, -42.5, 0, 32.5, 0);
+	const m1 = box2D
+		.addBody(x - 75, y + 250, 25, 30, -1, {
+			group: name,
+			gravity: -150 * Math.random(),
+			fillColor: col1
+		})
+		.addJoint(a1, 0, -17.5, 0, 42.5, 0);
+	const m2 = box2D
+		.addBody(x + 75, y + 250, 25, 30, -1, {
+			group: name,
+			gravity: -150 * Math.random(),
+			fillColor: col1
+		})
+		.addJoint(a2, 0, -17.5, 0, 42.5, 0);
+	numBodies++;
+};
+
+ragdoll(200, 100, Math.floor(Math.random() * 360));
+ragdoll(400, 100, Math.floor(Math.random() * 360));
+ragdoll(600, 100, Math.floor(Math.random() * 360));
+
+run();
diff --git a/to-stick-and-stand/src/style.css b/to-stick-and-stand/src/style.css
new file mode 100644
index 0000000..53a7b32
--- /dev/null
+++ b/to-stick-and-stand/src/style.css
@@ -0,0 +1,25 @@
+body, html {
+	position: absolute;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	background: #fff;
+}
+
+canvas {
+	position: absolute;
+	padding: 0;
+	width: 100vw;
+	height: 100vw;
+	max-height: 100vh;
+	max-width: 100vh;
+	margin: auto;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: #eee;
+	cursor: pointer;
+}
\ No newline at end of file
diff --git a/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/README.markdown b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/README.markdown
new file mode 100644
index 0000000..b4d439f
--- /dev/null
+++ b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/README.markdown
@@ -0,0 +1,26 @@
+# 🚦Toggle animation with CSS & State Machines! Live collaborative coding with the @keyframers 2.32.0
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/team/keyframers/pen/QWweedX](https://codepen.io/team/keyframers/pen/QWweedX).
+
+ State machines for a toggle? You bet! 
+David Khourshid & Stephen Shaw recreate this perfect example of a state machine powered animation using CSS & JavaScript.
+
+* 💡 Inspiration: https://dribbble.com/shots/9841408-Loading-switch-interaction
+* 📺 Video: https://youtu.be/0Wx9QbRQYuI
+* 💻 Code: https://codepen.io/team/keyframers/pen/QWweedX
+
+Additional Resources:
+
+* Indeterminante Checkboxes https://css-tricks.com/indeterminate-checkboxes/
+
+Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!
+
+* Like & subscribe on YouTube at https://youtube.com/keyframers
+* Buy web dev shirts, stickers & more at https://keyframe.rs/merch
+* Follow & tweet us at https://twitter.com/keyframers.
+* Support us on Patreon at https://patreon.com/keyframers 
+
+Topics covered:
+
+* State Machines
+* CSS Animation
+* Data Attributes
\ No newline at end of file
diff --git a/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/dist/index.html b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/dist/index.html
new file mode 100644
index 0000000..41eada7
--- /dev/null
+++ b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/dist/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - 🚦Toggle animation with CSS &amp; State Machines! Live collaborative coding with the @keyframers 2.32.0</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<a href="https://youtu.be/0Wx9QbRQYuI" target="_blank" data-keyframers-credit style="color: #000"></a>
+<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
+
+<form id="app" data-state="off">
+  <div class="toggle-wrapper">
+    <input id="toggle" name="toggle" type="checkbox">
+    <label for="toggle" class="fancy-toggle">
+      <div class="bg"></div>
+      <div class="circle">
+        <svg viewBox="0 0 100 100">
+          <circle class="loader" cx="50" cy="50" r="45" pathLength="1" />
+        </svg>
+      </div>
+    </label>
+    <output class="status">
+      <div class="status-text" data-for="off">Devices Off</div>
+      <div class="status-text" data-for="pending">Please Wait...</div>
+      <div class="status-text" data-for="on">Devices On</div>
+    </output>
+  </div>
+  
+</form>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/dist/script.js b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/dist/script.js
new file mode 100644
index 0000000..84b47dc
--- /dev/null
+++ b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/dist/script.js
@@ -0,0 +1,96 @@
+console.clear();
+const elToggle = document.querySelector('#toggle');
+const elApp = document.querySelector('#app');
+const elBody = document.body;
+
+// const machine = {
+//   initial: 'off',
+//   states: {
+//     off: {},
+//     pending: {},
+//     on: {}
+//   }
+// }
+
+const TIMEOUT = 1000;
+
+elBody.style.setProperty('--timeout', TIMEOUT);
+
+const transition = (state, event) => {
+  switch (state) {
+    case 'off':
+      return 'pending';
+    case 'pending':
+      switch (event.type) {
+        case 'ALL_ON':
+          return 'on';
+        case 'ALL_OFF':
+          return 'off';
+        default:
+          return state;
+      }
+    case 'on':
+      return 'pending';
+    default:
+      return 'off';
+  }
+}
+
+let current = elApp.dataset.state;
+
+function activate(state) {
+  elApp.dataset.state = current;
+  elBody.dataset.toggleState = current;
+  
+  document.querySelectorAll(`[data-active]`)
+    .forEach(el => delete el.dataset.active);
+  document.querySelectorAll(`[data-for="${current}"]`)
+    .forEach(el => el.dataset.active = true);
+}
+
+activate(current);
+
+function send(event) {
+  const prevState = current;
+  elApp.dataset.prevState = prevState;
+  
+  current = transition(current, event);
+  
+  if (prevState === current) {
+    return;
+  }
+  
+  activate(current);
+  
+  switch (current) {
+    case 'off':
+      elToggle.indeterminate = false;
+      elToggle.checked = false;
+      elToggle.readOnly = false;
+      break;
+    case 'pending':
+      elToggle.readOnly = true;
+      elToggle.indeterminate = true;
+      
+      setTimeout(() => {
+        if (prevState === 'on') {
+          send({ type: 'ALL_OFF' })
+        } else {
+          send({ type: 'ALL_ON' })
+        }
+      }, TIMEOUT);
+      break;
+    case 'on':
+      elToggle.readOnly = false;
+      elToggle.checked = true;
+      elToggle.indeterminate = false;
+      break;
+    default:
+      break;
+  }
+}
+
+elToggle.addEventListener('click', e => {
+  e.preventDefault();
+  send({ type: 'TOGGLE' });
+});
\ No newline at end of file
diff --git a/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/dist/style.css b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/dist/style.css
new file mode 100644
index 0000000..0e1ceb3
--- /dev/null
+++ b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/dist/style.css
@@ -0,0 +1,182 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
+*, *:before, *:after {
+  box-sizing: border-box;
+  position: relative;
+}
+
+:root {
+  --easing: cubic-bezier(.5, 0, .5, 1);
+  --duration: .3s;
+  --blue: #6C80F5;
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: 'Open Sans', sans-serif;
+}
+
+body {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+}
+
+/* ---------------------------------- */
+.toggle-wrapper {
+  font-size: 2rem;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+}
+
+#toggle {
+  width: 2em;
+  height: 2em;
+  visibility: hidden;
+  position: absolute;
+}
+
+#app {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+          flex-direction: row;
+  color: #404843;
+}
+
+.fancy-toggle {
+  font-size: 3rem;
+  width: 1em;
+  height: 1em;
+  padding: 0.2em;
+  box-sizing: content-box;
+  margin-right: 1.5em;
+  -webkit-transition: -webkit-transform 0.4s var(--easing);
+  transition: -webkit-transform 0.4s var(--easing);
+  transition: transform 0.4s var(--easing);
+  transition: transform 0.4s var(--easing), -webkit-transform 0.4s var(--easing);
+  -webkit-transition-property: width, background-color, -webkit-transform;
+  transition-property: width, background-color, -webkit-transform;
+  transition-property: transform, width, background-color;
+  transition-property: transform, width, background-color, -webkit-transform;
+}
+.fancy-toggle .bg {
+  background: grey;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 175%;
+  height: 100%;
+  border-radius: 2em;
+  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
+  -webkit-transition: inherit;
+  transition: inherit;
+}
+.fancy-toggle .circle {
+  width: 1em;
+  height: 1em;
+  background: white;
+  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  -webkit-transition: inherit;
+  transition: inherit;
+}
+.fancy-toggle .circle > svg {
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+  margin: -.1em;
+}
+.fancy-toggle .loader {
+  stroke: var(--blue);
+  stroke-width: 6;
+  fill: none;
+  stroke-dasharray: 1 1;
+  stroke-dashoffset: -1;
+  -webkit-transition: stroke-dasharray calc(var(--timeout, 0) * 0.5ms) linear, stroke-dashoffset 1000ms linear;
+  transition: stroke-dasharray calc(var(--timeout, 0) * 0.5ms) linear, stroke-dashoffset 1000ms linear;
+}
+
+.status {
+  overflow: hidden;
+  display: grid;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.status > div {
+  grid-area: 1 / 1;
+}
+
+.status-text {
+  -webkit-transition: -webkit-transform var(--duration) var(--easing);
+  transition: -webkit-transform var(--duration) var(--easing);
+  transition: transform var(--duration) var(--easing);
+  transition: transform var(--duration) var(--easing), -webkit-transform var(--duration) var(--easing);
+}
+.status-text[data-for="off"], .status-text[data-for="pending"] {
+  -webkit-transform: translateY(-100%);
+          transform: translateY(-100%);
+}
+.status-text[data-for="on"] {
+  -webkit-transform: translateY(100%);
+          transform: translateY(100%);
+}
+.status-text[data-active] ~ [data-for="pending"] {
+  -webkit-transform: translateY(100%);
+          transform: translateY(100%);
+}
+.status-text[data-active] {
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+}
+
+[data-state="off"] .fancy-toggle .bg {
+  background: #E44B45;
+}
+
+[data-state="pending"] .fancy-toggle {
+  -webkit-transform: translateX(50%);
+          transform: translateX(50%);
+}
+[data-state="pending"] .fancy-toggle .bg {
+  width: 100%;
+  background: #b5b5b5;
+}
+[data-state="pending"] .fancy-toggle .loader {
+  stroke-dashoffset: 0;
+}
+
+[data-state="on"] .fancy-toggle .bg {
+  background: #1BCE6F;
+}
+[data-state="on"] .fancy-toggle .circle {
+  -webkit-transform: translateX(100%);
+          transform: translateX(100%);
+}
+[data-state="on"] .fancy-toggle .loader {
+  stroke-dashoffset: 1;
+}
+
+body {
+  -webkit-transition: background-color 0.3s var(--easing);
+  transition: background-color 0.3s var(--easing);
+  background-color: var(--bg-color);
+}
+body[data-toggle-state="off"] {
+  --bg-color: #FFE3E2;
+}
+body[data-toggle-state="pending"] {
+  --bg-color: #DCE1FF;
+}
+body[data-toggle-state="on"] {
+  --bg-color: #E1FCED;
+}
\ No newline at end of file
diff --git a/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/license.txt b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/license.txt
new file mode 100644
index 0000000..1c8c11b
--- /dev/null
+++ b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by @keyframers (https://codepen.io/team/keyframers/pen/QWweedX)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/src/index.html b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/src/index.html
new file mode 100644
index 0000000..d60e61f
--- /dev/null
+++ b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/src/index.html
@@ -0,0 +1,22 @@
+<a href="https://youtu.be/0Wx9QbRQYuI" target="_blank" data-keyframers-credit style="color: #000"></a>
+<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
+
+<form id="app" data-state="off">
+  <div class="toggle-wrapper">
+    <input id="toggle" name="toggle" type="checkbox">
+    <label for="toggle" class="fancy-toggle">
+      <div class="bg"></div>
+      <div class="circle">
+        <svg viewBox="0 0 100 100">
+          <circle class="loader" cx="50" cy="50" r="45" pathLength="1" />
+        </svg>
+      </div>
+    </label>
+    <output class="status">
+      <div class="status-text" data-for="off">Devices Off</div>
+      <div class="status-text" data-for="pending">Please Wait...</div>
+      <div class="status-text" data-for="on">Devices On</div>
+    </output>
+  </div>
+  
+</form>
\ No newline at end of file
diff --git a/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/src/script.js b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/src/script.js
new file mode 100644
index 0000000..84b47dc
--- /dev/null
+++ b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/src/script.js
@@ -0,0 +1,96 @@
+console.clear();
+const elToggle = document.querySelector('#toggle');
+const elApp = document.querySelector('#app');
+const elBody = document.body;
+
+// const machine = {
+//   initial: 'off',
+//   states: {
+//     off: {},
+//     pending: {},
+//     on: {}
+//   }
+// }
+
+const TIMEOUT = 1000;
+
+elBody.style.setProperty('--timeout', TIMEOUT);
+
+const transition = (state, event) => {
+  switch (state) {
+    case 'off':
+      return 'pending';
+    case 'pending':
+      switch (event.type) {
+        case 'ALL_ON':
+          return 'on';
+        case 'ALL_OFF':
+          return 'off';
+        default:
+          return state;
+      }
+    case 'on':
+      return 'pending';
+    default:
+      return 'off';
+  }
+}
+
+let current = elApp.dataset.state;
+
+function activate(state) {
+  elApp.dataset.state = current;
+  elBody.dataset.toggleState = current;
+  
+  document.querySelectorAll(`[data-active]`)
+    .forEach(el => delete el.dataset.active);
+  document.querySelectorAll(`[data-for="${current}"]`)
+    .forEach(el => el.dataset.active = true);
+}
+
+activate(current);
+
+function send(event) {
+  const prevState = current;
+  elApp.dataset.prevState = prevState;
+  
+  current = transition(current, event);
+  
+  if (prevState === current) {
+    return;
+  }
+  
+  activate(current);
+  
+  switch (current) {
+    case 'off':
+      elToggle.indeterminate = false;
+      elToggle.checked = false;
+      elToggle.readOnly = false;
+      break;
+    case 'pending':
+      elToggle.readOnly = true;
+      elToggle.indeterminate = true;
+      
+      setTimeout(() => {
+        if (prevState === 'on') {
+          send({ type: 'ALL_OFF' })
+        } else {
+          send({ type: 'ALL_ON' })
+        }
+      }, TIMEOUT);
+      break;
+    case 'on':
+      elToggle.readOnly = false;
+      elToggle.checked = true;
+      elToggle.indeterminate = false;
+      break;
+    default:
+      break;
+  }
+}
+
+elToggle.addEventListener('click', e => {
+  e.preventDefault();
+  send({ type: 'TOGGLE' });
+});
\ No newline at end of file
diff --git a/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/src/style.scss b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/src/style.scss
new file mode 100644
index 0000000..4f3adf5
--- /dev/null
+++ b/toggle-animation-with-css-state-machines-live-collaborative-coding-with-the-keyframers-2-32-0/src/style.scss
@@ -0,0 +1,178 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  position: relative;
+}
+
+:root {
+  --easing: cubic-bezier(.5, 0, .5, 1);
+  --duration: .3s;
+  --blue: #6C80F5;
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: 'Open Sans', sans-serif;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* ---------------------------------- */
+
+.toggle-wrapper {
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+}
+
+
+#toggle {
+  width: 2em;
+  height: 2em;
+  visibility: hidden;
+  position: absolute;
+}
+
+
+#app {
+  display: flex;
+  flex-direction: row;
+  color: #404843;
+}
+
+.fancy-toggle {
+  font-size: 3rem;
+  width: 1em;
+  height: 1em;
+  // border: solid 5px blue;
+  padding: 0.2em;
+  box-sizing: content-box;
+  margin-right: 1.5em;
+  transition: transform 0.4s var(--easing);
+  transition-property: transform, width, background-color;
+  
+  .bg { 
+    background: grey;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 175%;
+    height: 100%;
+    border-radius: 2em;
+    box-shadow: 0 .25em .5em rgba(0,0,0,0.1);
+    transition: inherit;
+  } 
+  
+  .circle {
+    width: 1em;
+    height: 1em;
+    background: white;
+    box-shadow: 0 .25em .5em rgba(0,0,0,0.1);
+    border-radius: 50%;
+    transition: inherit;
+    
+    > svg {
+      transform: rotate(-90deg); 
+      margin: -.1em;
+    }
+  }
+  
+  .loader {
+    stroke: var(--blue);
+    stroke-width: 6;
+    fill: none;
+    stroke-dasharray: 1 1;
+    stroke-dashoffset: -1;
+    transition:
+      stroke-dasharray calc(var(--timeout, 0) * 0.5ms) linear,
+      stroke-dashoffset 1000ms linear;
+  }
+}
+
+.status {
+  overflow: hidden;
+  display: grid;
+  user-select: none;
+  
+  > div {
+    grid-area: 1 / 1;
+  }
+}
+
+.status-text {
+  transition: transform var(--duration) var(--easing);
+  
+  &[data-for="off"],
+  &[data-for="pending"] {
+    transform: translateY(-100%);
+  }
+  &[data-for="on"] {
+    transform: translateY(100%);
+  }
+  &[data-active] ~ [data-for="pending"] {
+    transform: translateY(100%);
+  }
+  &[data-active] {
+    transform: translateY(0); 
+  }
+}
+
+[data-state="off"] {
+  .fancy-toggle .bg {
+    background: #E44B45; 
+  }
+}
+
+[data-state="pending"] {
+  .fancy-toggle {
+    transform: translateX(50%);
+    .bg {
+      width: 100%;
+      background: #b5b5b5;
+    }
+    
+    .loader {
+      stroke-dashoffset: 0; 
+    }
+  }
+}
+
+[data-state="on"] {
+  .fancy-toggle {
+    .bg {
+      background: #1BCE6F;
+    }
+    
+    .circle {
+      transform: translateX(100%);
+    }
+    .loader {
+      stroke-dashoffset: 1;
+    }
+  }
+}
+
+body {
+  transition: background-color .3s var(--easing);
+  background-color: var(--bg-color);
+  
+  &[data-toggle-state="off"] {
+    --bg-color: #FFE3E2;
+  }
+  
+  &[data-toggle-state="pending"] {
+    --bg-color: #DCE1FF;
+  }
+  
+  &[data-toggle-state="on"] {
+    --bg-color: #E1FCED;
+  }
+}
\ No newline at end of file
diff --git a/toggle-checkbox-without-label/README.markdown b/toggle-checkbox-without-label/README.markdown
new file mode 100644
index 0000000..eeb49cf
--- /dev/null
+++ b/toggle-checkbox-without-label/README.markdown
@@ -0,0 +1,4 @@
+# Toggle (checkbox without label)
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/andreasstorm/pen/jOEpBLW](https://codepen.io/andreasstorm/pen/jOEpBLW).
+
+ 
\ No newline at end of file
diff --git a/toggle-checkbox-without-label/dist/index.html b/toggle-checkbox-without-label/dist/index.html
new file mode 100644
index 0000000..f31c697
--- /dev/null
+++ b/toggle-checkbox-without-label/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Toggle (checkbox without label)</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input type="checkbox" class="toggle" checked>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/toggle-checkbox-without-label/dist/style.css b/toggle-checkbox-without-label/dist/style.css
new file mode 100644
index 0000000..1ec759f
--- /dev/null
+++ b/toggle-checkbox-without-label/dist/style.css
@@ -0,0 +1,48 @@
+body {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+}
+input[type="checkbox"]:focus {
+  outline: 0;
+}
+
+.toggle {
+  height: 28px;
+  width: 46px;
+  border-radius: 16px;
+  display: inline-block;
+  position: relative;
+  margin: 0;
+  border: 0;
+  background: #c7c7cc;
+  transition: all 0.2s ease;
+  box-shadow: 0 6px 16px -3px rgba(44, 44, 44, 0.1);
+}
+.toggle:after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: white;
+  box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2);
+  transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
+}
+.toggle:checked {
+  background: #34c759;
+}
+.toggle:checked:after {
+  transform: translatex(18px);
+}
\ No newline at end of file
diff --git a/toggle-checkbox-without-label/license.txt b/toggle-checkbox-without-label/license.txt
new file mode 100644
index 0000000..1b10f11
--- /dev/null
+++ b/toggle-checkbox-without-label/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Andreas Storm (https://codepen.io/andreasstorm/pen/jOEpBLW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/toggle-checkbox-without-label/src/index.html b/toggle-checkbox-without-label/src/index.html
new file mode 100644
index 0000000..065d832
--- /dev/null
+++ b/toggle-checkbox-without-label/src/index.html
@@ -0,0 +1 @@
+<input type="checkbox" class="toggle" checked>
\ No newline at end of file
diff --git a/toggle-checkbox-without-label/src/style.sass b/toggle-checkbox-without-label/src/style.sass
new file mode 100644
index 0000000..343a659
--- /dev/null
+++ b/toggle-checkbox-without-label/src/style.sass
@@ -0,0 +1,42 @@
+body
+  min-height: 100vh
+  display: flex
+  justify-content: center
+  align-items: center
+  
+input[type="checkbox"]
+  -webkit-appearance: none
+  -moz-appearance: none
+  appearance: none
+  -webkit-tap-highlight-color: transparent
+  cursor: pointer
+  &:focus
+    outline: 0
+
+.toggle
+  height: 28px
+  width: 46px
+  border-radius: 16px
+  display: inline-block
+  position: relative
+  margin: 0
+  border: 0
+  background: #c7c7cc
+  transition: all .2s ease
+  box-shadow: 0 6px 16px -3px rgba(44,44,44,.1)
+  &:after
+    content: ''
+    position: absolute
+    top: 2px
+    left: 2px
+    width: 24px
+    height: 24px
+    border-radius: 50%
+    background: white
+    box-shadow: 0 1px 2px rgba(44,44,44,.2)
+    transition: all .2s cubic-bezier(.5,.1,.75,1.35)
+  &:checked
+    background: #34c759
+    &:after
+      transform: translatex(18px)
+    
\ No newline at end of file
diff --git a/toggle/README.markdown b/toggle/README.markdown
new file mode 100644
index 0000000..baeab47
--- /dev/null
+++ b/toggle/README.markdown
@@ -0,0 +1,5 @@
+# Toggle
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/KittyGiraudel/pen/xxgrPvg](https://codepen.io/KittyGiraudel/pen/xxgrPvg).
+
+
diff --git a/toggle/dist/index.html b/toggle/dist/index.html
new file mode 100644
index 0000000..51ebeb5
--- /dev/null
+++ b/toggle/dist/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Toggle</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="content">
+
+    <label class='Toggle' for='toggle'>
+      <input type='checkbox' name='toggle' id='toggle' class="Toggle__input" checked />
+      <span class="Toggle__display" hidden>
+        <svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--checkmark">
+          <path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
+        </svg>
+        <svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--cross">
+          <path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
+        </svg>
+      </span>
+      Receive notifications
+    </label>
+
+    <label class='Toggle' for='toggle-rtl' dir="rtl">
+      <input type='checkbox' name='toggle-rtl' id='toggle-rtl' class="Toggle__input" />
+      <span class="Toggle__display" hidden>
+        <svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--checkmark">
+          <path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
+        </svg>
+        <svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--cross">
+          <path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
+        </svg>
+      </span>
+      Receive notifications (RTL)
+    </label>
+
+    <label class='Toggle' for='disabled-toggle'>
+      <input type='checkbox' name='disabled-toggle' id='disabled-toggle' class="Toggle__input" disabled />
+      <span class="Toggle__display" hidden>
+        <svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--checkmark">
+          <path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
+        </svg>
+        <svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--cross">
+          <path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
+        </svg>
+      </span>
+      Receive notifications (disabled)
+    </label>
+
+    <button class='Toggle' type="button">
+      <span class="Toggle__display" hidden>
+        <svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--checkmark">
+          <path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
+        </svg>
+        <svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--cross">
+          <path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
+        </svg>
+      </span>
+      Receive notifications (button)
+    </button>
+
+    <label for='no-css-toggle'>
+      <input type='checkbox' name='no-css-toggle' id='no-css-toggle' />
+      <span hidden>
+        <svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false">
+          <path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
+        </svg>
+        <svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false">
+          <path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
+        </svg>
+      </span>
+      Receive notifications (without CSS)
+    </label>
+
+  </div>
+</div>
+
+<div class="footer">
+  <p>Read more about <a href="https://kittygiraudel.com/2021/04/05/an-accessible-toggle/">these accessible toggles</a>.</p>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/toggle/dist/script.js b/toggle/dist/script.js
new file mode 100644
index 0000000..66525e9
--- /dev/null
+++ b/toggle/dist/script.js
@@ -0,0 +1,9 @@
+Array.from(document.querySelectorAll('button.Toggle')).forEach(button => {
+  button.addEventListener('click', event => {
+    if (button.getAttribute('aria-pressed') === 'true') {
+      button.removeAttribute('aria-pressed')
+    } else {
+      button.setAttribute('aria-pressed', 'true')
+    }
+  })
+})
\ No newline at end of file
diff --git a/toggle/dist/style.css b/toggle/dist/style.css
new file mode 100644
index 0000000..2c400fa
--- /dev/null
+++ b/toggle/dist/style.css
@@ -0,0 +1,162 @@
+/* Uncomment this rule to effectively break the stylesheet, thus simulating no-CSS styles. */
+/* .selector { [property: value; } */
+
+.Toggle {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  position: relative;
+  margin-bottom: 1em;
+  cursor: pointer;
+  gap: 1ch;
+}
+
+button.Toggle {
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  font: inherit;
+}
+
+.Toggle__input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.Toggle__display {
+  --offset: 0.25em;
+  --diameter: 1.8em;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-around;
+  box-sizing: content-box;
+  width: calc(var(--diameter) * 2 + var(--offset) * 2);
+  height: calc(var(--diameter) + var(--offset) * 2);
+  border: 0.1em solid rgb(0 0 0 / 0.2);
+  position: relative;
+  border-radius: 100vw;
+  background-color: #fbe4e2;
+  transition: 250ms;
+}
+
+.Toggle__display::before {
+  content: "";
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: var(--offset);
+  box-sizing: border-box;
+  width: var(--diameter);
+  height: var(--diameter);
+  border: 0.1em solid rgb(0 0 0 / 0.2);
+  border-radius: 50%;
+  background-color: white;
+  transform: translate(0, -50%);
+  will-change: transform;
+  transition: inherit;
+}
+
+
+.Toggle:focus .Toggle__display,
+.Toggle__input:focus + .Toggle__display {
+  outline: 1px dotted #212121;
+  outline: 1px auto -webkit-focus-ring-color;
+  outline-offset: 2px;
+}
+
+.Toggle:focus,
+.Toggle:focus:not(:focus-visible) .Toggle__display,
+.Toggle__input:focus:not(:focus-visible) + .Toggle__display {
+  outline: 0;
+}
+
+.Toggle[aria-pressed="true"] .Toggle__display,
+.Toggle__input:checked + .Toggle__display {
+  background-color: #e3f5eb;
+}
+
+.Toggle[aria-pressed="true"] .Toggle__display::before,
+.Toggle__input:checked + .Toggle__display::before {
+  transform: translate(100%, -50%);
+}
+
+.Toggle[disabled] .Toggle__display,
+.Toggle__input:disabled + .Toggle__display {
+  opacity: 0.6;
+  filter: grayscale(40%);
+  cursor: not-allowed;
+}
+
+[dir="rtl"] .Toggle__display::before {
+  left: auto;
+  right: var(--offset);
+}
+
+[dir="rtl"] .Toggle[aria-pressed="true"] + .Toggle__display::before,
+[dir="rtl"] .Toggle__input:checked + .Toggle__display::before {
+  transform: translate(-100%, -50%);
+}
+
+.Toggle__icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  fill: currentcolor;
+  vertical-align: middle;
+  overflow: hidden;
+}
+
+.Toggle__icon--cross {
+  color: #e74c3c;
+  font-size: 85%;
+}
+
+.Toggle__icon--checkmark {
+  color: #1fb978;
+}
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+html {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 100%;
+}
+
+.container {
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+}
+
+.content {
+  max-width: 450px;
+  padding: 2em;
+  margin: auto;
+  border: 1px solid rgb(0 0 0 / 0.2);
+  border-radius: 0.25em;
+}
+
+.footer {
+  padding: 2em;
+  background-color: #eee;
+}
+
+.footer > p {
+  margin: 0;
+}
\ No newline at end of file
diff --git a/toggle/license.txt b/toggle/license.txt
new file mode 100644
index 0000000..00533b5
--- /dev/null
+++ b/toggle/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Kitty Giraudel (https://codepen.io/KittyGiraudel/pen/xxgrPvg)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/toggle/src/index.html b/toggle/src/index.html
new file mode 100644
index 0000000..11d94b0
--- /dev/null
+++ b/toggle/src/index.html
@@ -0,0 +1,73 @@
+<div class="container">
+  <div class="content">
+
+    <label class='Toggle' for='toggle'>
+      <input type='checkbox' name='toggle' id='toggle' class="Toggle__input" checked />
+      <span class="Toggle__display" hidden>
+        <svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--checkmark">
+          <path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
+        </svg>
+        <svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--cross">
+          <path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
+        </svg>
+      </span>
+      Receive notifications
+    </label>
+
+    <label class='Toggle' for='toggle-rtl' dir="rtl">
+      <input type='checkbox' name='toggle-rtl' id='toggle-rtl' class="Toggle__input" />
+      <span class="Toggle__display" hidden>
+        <svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--checkmark">
+          <path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
+        </svg>
+        <svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--cross">
+          <path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
+        </svg>
+      </span>
+      Receive notifications (RTL)
+    </label>
+
+    <label class='Toggle' for='disabled-toggle'>
+      <input type='checkbox' name='disabled-toggle' id='disabled-toggle' class="Toggle__input" disabled />
+      <span class="Toggle__display" hidden>
+        <svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--checkmark">
+          <path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
+        </svg>
+        <svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--cross">
+          <path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
+        </svg>
+      </span>
+      Receive notifications (disabled)
+    </label>
+
+    <button class='Toggle' type="button">
+      <span class="Toggle__display" hidden>
+        <svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--checkmark">
+          <path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
+        </svg>
+        <svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="Toggle__icon Toggle__icon--cross">
+          <path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
+        </svg>
+      </span>
+      Receive notifications (button)
+    </button>
+
+    <label for='no-css-toggle'>
+      <input type='checkbox' name='no-css-toggle' id='no-css-toggle' />
+      <span hidden>
+        <svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false">
+          <path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
+        </svg>
+        <svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false">
+          <path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
+        </svg>
+      </span>
+      Receive notifications (without CSS)
+    </label>
+
+  </div>
+</div>
+
+<div class="footer">
+  <p>Read more about <a href="https://kittygiraudel.com/2021/04/05/an-accessible-toggle/">these accessible toggles</a>.</p>
+</div>
\ No newline at end of file
diff --git a/toggle/src/script.js b/toggle/src/script.js
new file mode 100644
index 0000000..eabc71d
--- /dev/null
+++ b/toggle/src/script.js
@@ -0,0 +1,9 @@
+Array.from(document.querySelectorAll('button.Toggle')).forEach(button => {
+  button.addEventListener('click', event => {
+    if (button.getAttribute('aria-pressed') === 'true') {
+      button.removeAttribute('aria-pressed')
+    } else {
+      button.setAttribute('aria-pressed', 'true')
+    }
+  })
+}) 
\ No newline at end of file
diff --git a/toggle/src/style.css b/toggle/src/style.css
new file mode 100644
index 0000000..4fbed21
--- /dev/null
+++ b/toggle/src/style.css
@@ -0,0 +1,162 @@
+/* Uncomment this rule to effectively break the stylesheet, thus simulating no-CSS styles. */
+/* .selector { [property: value; } */
+
+.Toggle {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  position: relative;
+  margin-bottom: 1em;
+  cursor: pointer;
+  gap: 1ch;
+}
+
+button.Toggle {
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  font: inherit;
+}
+
+.Toggle__input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.Toggle__display {
+  --offset: 0.25em;
+  --diameter: 1.8em;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-around;
+  box-sizing: content-box;
+  width: calc(var(--diameter) * 2 + var(--offset) * 2);
+  height: calc(var(--diameter) + var(--offset) * 2);
+  border: 0.1em solid rgb(0 0 0 / 0.2);
+  position: relative;
+  border-radius: 100vw;
+  background-color: #fbe4e2;
+  transition: 250ms;
+}
+
+.Toggle__display::before {
+  content: "";
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: var(--offset);
+  box-sizing: border-box;
+  width: var(--diameter);
+  height: var(--diameter);
+  border: 0.1em solid rgb(0 0 0 / 0.2);
+  border-radius: 50%;
+  background-color: white;
+  transform: translate(0, -50%);
+  will-change: transform;
+  transition: inherit;
+}
+
+
+.Toggle:focus .Toggle__display,
+.Toggle__input:focus + .Toggle__display {
+  outline: 1px dotted #212121;
+  outline: 1px auto -webkit-focus-ring-color;
+  outline-offset: 2px;
+}
+
+.Toggle:focus,
+.Toggle:focus:not(:focus-visible) .Toggle__display,
+.Toggle__input:focus:not(:focus-visible) + .Toggle__display {
+  outline: 0;
+}
+
+.Toggle[aria-pressed="true"] .Toggle__display,
+.Toggle__input:checked + .Toggle__display {
+  background-color: #e3f5eb;
+}
+
+.Toggle[aria-pressed="true"] .Toggle__display::before,
+.Toggle__input:checked + .Toggle__display::before {
+  transform: translate(100%, -50%);
+}
+
+.Toggle[disabled] .Toggle__display,
+.Toggle__input:disabled + .Toggle__display {
+  opacity: 0.6;
+  filter: grayscale(40%);
+  cursor: not-allowed;
+}
+
+[dir="rtl"] .Toggle__display::before {
+  left: auto;
+  right: var(--offset);
+}
+
+[dir="rtl"] .Toggle[aria-pressed="true"] + .Toggle__display::before,
+[dir="rtl"] .Toggle__input:checked + .Toggle__display::before {
+  transform: translate(-100%, -50%);
+}
+
+.Toggle__icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  fill: currentcolor;
+  vertical-align: middle;
+  overflow: hidden;
+}
+
+.Toggle__icon--cross {
+  color: #e74c3c;
+  font-size: 85%;
+}
+
+.Toggle__icon--checkmark {
+  color: #1fb978;
+}
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+html {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 100%;
+}
+
+.container {
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+}
+
+.content {
+  max-width: 450px;
+  padding: 2em;
+  margin: auto;
+  border: 1px solid rgb(0 0 0 / 0.2);
+  border-radius: 0.25em;
+}
+
+.footer {
+  padding: 2em;
+  background-color: #eee;
+}
+
+.footer > p {
+  margin: 0;
+}
diff --git a/toggles/README.markdown b/toggles/README.markdown
new file mode 100644
index 0000000..e5a52dd
--- /dev/null
+++ b/toggles/README.markdown
@@ -0,0 +1,5 @@
+# Toggles
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/oliviale/pen/xxboXzo](https://codepen.io/oliviale/pen/xxboXzo).
+
+Do you want your toggle fancy or functional? Yes.
diff --git a/toggles/dist/index.html b/toggles/dist/index.html
new file mode 100644
index 0000000..db60fca
--- /dev/null
+++ b/toggles/dist/index.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Toggles</title>
+  <link href="https://fonts.googleapis.com/css?family=Margarine|Rubik:400,500" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="toggle-wrapper">
+  <div class="toggle normal">
+    <input id="normal" type="checkbox"/>
+    <label class="toggle-item" for="normal"></label>
+  </div>
+  <div class="name">Normal</div>
+</div>
+<div class="toggle-wrapper">
+  <div class="toggle transparent">
+    <input id="transparent" type="checkbox"/>
+    <label class="toggle-item" for="transparent"></label>
+  </div>
+  <div class="name">Transparent</div>
+</div>
+<div class="toggle-wrapper">
+  <div class="toggle checkcross">
+    <input id="checkcross" type="checkbox"/>
+    <label class="toggle-item" for="checkcross">
+      <div class="check"></div>
+    </label>
+  </div>
+  <div class="name">Yes & No</div>
+</div>
+<div class="toggle-wrapper">
+  <div class="toggle">
+    <input id="gravity" type="checkbox"/>
+    <label class="toggle-item" for="gravity"></label>
+  </div>
+  <div class="name">Gravity</div>
+</div>
+<div class="toggle-wrapper">
+  <div class="toggle pancake-stack">
+    <input id="pancake" type="checkbox"/>
+    <label class="toggle-item" for="pancake">
+      <div class="pancakes">
+        <div class="pancake"></div>
+        <div class="pancake"></div>
+        <div class="pancake"></div>
+        <div class="butter"></div>
+      </div>
+    </label>
+  </div>
+  <div class="name">Pancake Stacks</div>
+</div>
+<div class="toggle-wrapper">
+  <div class="toggle dog-rollover">
+    <input id="doggo" type="checkbox"/>
+    <label class="toggle-item" for="doggo">
+      <div class="dog">
+        <div class="ear"></div>
+        <div class="ear right"></div>
+        <div class="face">
+          <div class="eyes"></div>
+          <div class="mouth"></div>
+        </div>
+      </div>
+    </label>
+  </div>
+  <div class="name">Doggo Wants a Treat</div>
+</div>
+<div class="toggle-wrapper">
+  <div class="toggle basketball-hoop">
+    <input id="hoop" type="checkbox"/>
+    <label class="toggle-item" for="hoop">
+      <div class="ball__wrapper">
+        <div class="ball"></div>
+      </div>
+      <div class="hoop"></div>
+    </label>
+  </div>
+  <div class="name">Kobe Bryant Tribute</div>
+</div>
+<div class="toggle-wrapper">
+  <div class="toggle beer-pong">
+    <input id="beer-pong" type="checkbox"/>
+    <label class="toggle-item" for="beer-pong"></label>
+    <div class="cup">
+      <div class="lid"></div>
+    </div>
+  </div>
+  <div class="name">Beer Pong</div>
+</div>
+<div class="footer">
+  <div class="explanation">Part of the <a href="https://codepen.io/collection/XJNKLz/" target="_blank">CSS Animations collection here</a>. <br/>See the <a href="https://codepen.io/oliviale/full/vPvvyr" target="_blank">Buttons version here</a>.
+    <footer><a href="https://twitter.com/meowlivia_" target="_blank"><i class="icon-social-twitter icons"></i></a><a href="https://github.com/oliviale" target="_blank"><i class="icon-social-github icons"></i></a><a href="https://dribbble.com/oliviale" target="_blank"><i class="icon-social-dribbble icons"></i></a></footer>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
+</body>
+</html>
diff --git a/toggles/dist/style.css b/toggles/dist/style.css
new file mode 100644
index 0000000..164a36a
--- /dev/null
+++ b/toggles/dist/style.css
@@ -0,0 +1,646 @@
+body {
+  background: #2e394d;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+* {
+  box-sizing: border-box;
+}
+*:before, *:after {
+  content: '';
+  position: absolute;
+}
+
+input {
+  height: 40px;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: 40px;
+}
+
+.toggle-wrapper {
+  flex: 1 1 calc(100% / 3);
+  min-height: 50vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+@media (max-width: 960px) {
+  .toggle-wrapper {
+    flex: 1 1 calc(100% / 2);
+  }
+}
+@media (max-width: 700px) {
+  .toggle-wrapper {
+    flex: 1 1 100%;
+  }
+}
+.toggle-wrapper:nth-child(1) {
+  background: #dec387;
+}
+.toggle-wrapper:nth-child(2) {
+  background: #de8797;
+}
+.toggle-wrapper:nth-child(3) {
+  background: #87aade;
+}
+.toggle-wrapper:nth-child(4) {
+  background: #c5de87;
+}
+.toggle-wrapper:nth-child(5) {
+  background: #87ded2;
+}
+.toggle-wrapper:nth-child(6) {
+  background: #c487de;
+}
+.toggle-wrapper:nth-child(7) {
+  background: #de8787;
+}
+.toggle-wrapper:nth-child(7) .toggle {
+  transform: translate(-40px, 40px);
+}
+.toggle-wrapper:nth-child(8) {
+  background: #decf87;
+}
+.toggle-wrapper:nth-child(8) .toggle {
+  transform: translate(-40px, 40px);
+}
+
+.name {
+  width: 80%;
+  position: absolute;
+  font: 500 14px 'Rubik', sans-serif;
+  letter-spacing: .5px;
+  text-transform: uppercase;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+  bottom: 15px;
+  right: 15px;
+  text-align: right;
+}
+
+.toggle {
+  position: relative;
+  display: inline-block;
+}
+
+label.toggle-item {
+  width: 7em;
+  background: #2e394d;
+  height: 3em;
+  display: inline-block;
+  border-radius: 50px;
+  margin: 40px;
+  position: relative;
+  transition: all .3s ease;
+  transform-origin: 20% center;
+  cursor: pointer;
+}
+label.toggle-item:before {
+  display: block;
+  transition: all .2s ease;
+  width: 2.3em;
+  height: 2.3em;
+  top: .25em;
+  left: .25em;
+  border-radius: 2em;
+  border: 2px solid #88cf8f;
+  transition: .3s ease;
+}
+
+.normal label {
+  background: #af4c4c;
+  border: 0.5px solid rgba(117, 117, 117, 0.31);
+  box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0 -3px 4px rgba(0, 0, 0, 0.15);
+}
+.normal label:before {
+  border: none;
+  width: 2.5em;
+  height: 2.5em;
+  box-shadow: inset 0.5px -1px 1px rgba(0, 0, 0, 0.35);
+  background: #fff;
+  transform: rotate(-25deg);
+}
+.normal label:after {
+  background: transparent;
+  height: calc(100% + 8px);
+  border-radius: 30px;
+  top: -5px;
+  width: calc(100% + 8px);
+  left: -4px;
+  z-index: 0;
+  box-shadow: inset 0px 2px 4px -2px rgba(0, 0, 0, 0.2), 0px 1px 2px 0px rgba(151, 151, 151, 0.2);
+}
+
+#normal:checked + label {
+  background: #4caf50;
+}
+#normal:checked + label:before {
+  left: 67px;
+}
+
+.transparent label {
+  background: transparent;
+  border: 3px solid #fff;
+  height: 3.35em;
+}
+.transparent label:before {
+  border: 3px solid #fff;
+  width: 2em;
+  height: 2em;
+  top: .3em;
+  left: .3em;
+  background: #fff;
+}
+
+#transparent:checked + label:before {
+  transform: translateX(59px);
+}
+
+.checkcross label:before {
+  content: none;
+}
+.checkcross .check {
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  position: absolute;
+  background: #8BC34A;
+  transition: .4s ease;
+  top: 4.5px;
+  left: 4.5px;
+}
+.checkcross .check:before, .checkcross .check:after {
+  height: 4px;
+  border-radius: 10px;
+  background: #fff;
+  transition: .4s ease;
+}
+.checkcross .check:before {
+  width: 25px;
+  transform: rotate(-45deg) translate(-6px, 20px);
+}
+.checkcross .check:after {
+  width: 10px;
+  transform: rotate(45deg) translate(20px, 11px);
+}
+
+#checkcross:checked + label .check {
+  left: 68px;
+  transform: rotate(360deg);
+  background: #c34a4a;
+}
+#checkcross:checked + label .check:before {
+  width: 27px;
+  transform: rotate(-45deg) translate(-8px, 18px);
+}
+#checkcross:checked + label .check:after {
+  width: 27px;
+  transform: rotate(45deg) translate(18px, 8px);
+}
+
+#gravity:checked + label {
+  transform: rotate(90deg);
+}
+#gravity:checked + label:before {
+  transform: translateX(67px);
+  transition-delay: .2s;
+  transition: 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.2s;
+}
+
+.beer-pong label:before {
+  background: #f9f9f9;
+  box-shadow: inset 0 -3px 0 0 #c6c5c5;
+  border: none;
+  width: 2.5em;
+  height: 2.5em;
+  top: .25em;
+  left: .25em;
+}
+.beer-pong .cup {
+  top: -3%;
+  right: -118px;
+  border-top: 90px solid #f44336;
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+  height: 3px;
+  position: absolute;
+  width: 80px;
+  transform-origin: bottom right;
+  transition: 0.2s cubic-bezier(0.42, 0.5, 0.58, 1);
+}
+.beer-pong .cup:before {
+  box-shadow: 0 -10px 0 0px rgba(39, 39, 39, 0.1), 0px -20px 0 0px rgba(39, 39, 39, 0.1);
+  border-radius: 3px;
+  overflow: hidden;
+  background: rgba(39, 39, 39, 0.1);
+  width: 120%;
+  left: -5px;
+  height: 4px;
+  top: -40px;
+}
+.beer-pong .cup .lid {
+  position: absolute;
+  width: 95px;
+  height: 8px;
+  border-radius: 20px;
+  background: #efefef;
+  bottom: 86px;
+  left: -23px;
+}
+.beer-pong .cup .lid:after {
+  background: #efefef;
+  width: 48px;
+  height: 5px;
+  left: 50%;
+  margin-left: -24px;
+  top: 94px;
+  border-radius: 0 0 3px 3px;
+}
+
+#beer-pong:checked ~ .cup {
+  animation: .2s linear cup 1s forwards;
+}
+#beer-pong:checked + label:before {
+  animation: 2s linear bounce-off forwards;
+}
+
+@keyframes cup {
+  0% {
+    transform: none;
+  }
+  50% {
+    transform: rotate(75deg) translate(10px, 15px);
+  }
+  90% {
+    transform: rotate(70deg) translate(10px, 15px);
+  }
+  100% {
+    transform: rotate(75deg) translate(10px, 15px);
+  }
+}
+@keyframes bounce-off {
+  0% {
+    transform: translateY(0);
+  }
+  10%,25% {
+    transform: translate(-20px, -80px);
+  }
+  50% {
+    transform: rotate(163deg);
+    transform-origin: 100px -12px;
+  }
+  70% {
+    transform: rotate(0) translate(-3px, -8px);
+    transform-origin: 100px -12px;
+  }
+  75% {
+    transform: translate(20px, -8px);
+  }
+  80% {
+    transform: translate(30px, 0px);
+  }
+  85% {
+    transform: translate(40px, -3px);
+  }
+  87% {
+    transform: translate(46px, 0px);
+  }
+  90% {
+    transform: translate(52px, -1px);
+  }
+  95% {
+    transform: translate(60px, 0px);
+  }
+  100% {
+    transform: translate(64px, 0px);
+  }
+}
+.dog-rollover label:before {
+  content: none;
+}
+.dog-rollover label .dog {
+  display: inline-block;
+  position: absolute;
+  width: 2.5em;
+  height: 2.5em;
+  top: .25em;
+  left: .2em;
+  transition: .6s ease;
+}
+.dog-rollover label .eyes {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #222;
+  border-radius: 50%;
+  transform: translate(8px, 14px);
+  box-shadow: 16px 0 0 #222, 22px -4px 0 12px #e4ac04;
+}
+.dog-rollover label .ear {
+  width: 18px;
+  height: 20px;
+  position: absolute;
+  left: -4px;
+  bottom: 80%;
+  background: #f9bb00;
+  margin-bottom: -5px;
+  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
+  box-shadow: inset 4px 0 0 0px #ffffff, inset -4px 0 0 0px #ffffff;
+  transform: rotate(-40deg);
+}
+.dog-rollover label .ear.right {
+  transform: rotate(60deg) scaleX(-1);
+  left: auto;
+  transform-origin: center bottom;
+  transition: .4s ease-in-out;
+  right: 0px;
+}
+.dog-rollover label .face {
+  overflow: hidden;
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  position: absolute;
+  background: #fff;
+  z-index: 8;
+}
+.dog-rollover label .mouth {
+  position: absolute;
+  background: #222;
+  width: 14px;
+  height: 7px;
+  left: 50%;
+  margin-left: -7px;
+  bottom: 12px;
+  border-radius: 2px 2px 20px 20px;
+  bottom: 8px;
+  transform: scale(0);
+  transition: .1s ease;
+}
+.dog-rollover label .mouth:before {
+  width: 8px;
+  height: 8px;
+  background: #ec788d;
+  border-radius: 0 0 50% 50%;
+  transform: translate(3px, 5px);
+}
+.dog-rollover label:before {
+  border-color: white;
+  background: white;
+}
+
+#doggo:checked ~ .cup {
+  animation: .2s linear cup 1s forwards;
+}
+#doggo:checked + label .dog {
+  left: 68px;
+  transform: rotate(360deg);
+}
+#doggo:checked + label .mouth {
+  transform: scale(1);
+  transition-delay: .7s;
+}
+#doggo:checked + label .ear.right {
+  transform: scaleX(-1) rotate(-35deg);
+  transition-delay: .6s;
+}
+
+.basketball-hoop label {
+  background: #fdb827;
+}
+.basketball-hoop label:before {
+  content: none;
+}
+.basketball-hoop .ball {
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  position: absolute;
+  background: #FF9800;
+  border: 2px solid black;
+  transition: .4s ease;
+  top: 4px;
+  left: 4px;
+  background-image: radial-gradient(circle at -5px 10px, transparent 15px, black 15px, black 17px, transparent 17px), radial-gradient(circle at 41px 25px, transparent 15px, black 15px, black 17px, transparent 17px), linear-gradient(110deg, transparent 22px, black 22px, black 24px, transparent 24px), linear-gradient(18deg, transparent 22px, black 22px, black 24px, transparent 24px);
+}
+.basketball-hoop .ball__wrapper {
+  transition: .4s ease;
+  width: 195%;
+  height: 200%;
+  transform-origin: 50% -2%;
+}
+.basketball-hoop .hoop {
+  top: -50px;
+  right: -84px;
+  width: 50px;
+  background: #f44336;
+  height: 8px;
+  position: absolute;
+}
+.basketball-hoop .hoop:before {
+  position: absolute;
+  right: -4px;
+  width: 7px;
+  height: 60px;
+  background: #cd2e22;
+  top: -40px;
+}
+.basketball-hoop .hoop:after {
+  width: 40px;
+  height: 35px;
+  background: repeating-linear-gradient(45deg, transparent, transparent 13px, white 13px, white 15px), repeating-linear-gradient(-45deg, transparent, transparent 13px, white 13px, white 15px);
+  top: 8px;
+  border-radius: 0 0 20% 20%/40% 40% 60% 60%;
+  border: 2px solid #fff;
+  border-width: 0 2px;
+  left: 2px;
+  z-index: 20;
+}
+
+#hoop:checked + label {
+  background: #542583;
+  transition-delay: 1.35s;
+}
+#hoop:checked + label .ball__wrapper {
+  animation: 1.5s linear ball-wrapper forwards;
+}
+#hoop:checked + label .ball {
+  animation: 1.5s linear ball forwards;
+}
+
+@keyframes ball {
+  0% {
+    transform: none;
+  }
+  40% {
+    transform: rotate(-150deg);
+  }
+  48% {
+    transform: rotate(-150deg) translateY(92px);
+  }
+  52% {
+    transform: rotate(-150deg) translate(-10px, 80px);
+  }
+  56% {
+    transform: rotate(-150deg) translate(-25px, 91px);
+  }
+  60% {
+    transform: rotate(-150deg) translate(-35px, 86px);
+  }
+  65% {
+    transform: rotate(-150deg) translate(-45px, 91px);
+  }
+  70% {
+    transform: rotate(-150deg) translate(-50px, 87px);
+  }
+  75% {
+    transform: rotate(-150deg) translate(-60px, 91px);
+  }
+  80% {
+    transform: rotate(-150deg) translate(-65px, 88px);
+  }
+  85% {
+    transform: rotate(-150deg) translate(-70px, 91px);
+  }
+  90% {
+    transform: rotate(-150deg) translate(-75px, 90px);
+  }
+  95% {
+    transform: rotate(-150deg) translate(-80px, 90px);
+  }
+  100% {
+    transform: rotate(-150deg) translate(-82px, 91px);
+  }
+}
+@keyframes ball-wrapper {
+  0% {
+    transform: none;
+  }
+  40%, 100% {
+    transform: rotate(150deg);
+  }
+}
+.pancake-stack label:before {
+  content: none;
+}
+.pancake-stack .pancakes {
+  transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.pancake-stack .pancake {
+  background: #e27c31;
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  position: absolute;
+  transition: .4s ease;
+  top: 2px;
+  left: 4px;
+  box-shadow: 0 2px 0 2px #fbbe7c;
+}
+.pancake-stack .pancake:nth-child(2) {
+  left: 0;
+  top: -3px;
+  transform: scale(0);
+  transition: .2s ease .2s;
+}
+.pancake-stack .pancake:nth-child(3) {
+  top: -8px;
+  transform: scale(0);
+  transition: .2s ease .2s;
+}
+.pancake-stack .pancake:nth-child(3):before, .pancake-stack .pancake:nth-child(3):after {
+  background: #ef8927;
+  border-radius: 20px;
+  width: 50%;
+  height: 20%;
+}
+.pancake-stack .pancake:nth-child(3):before {
+  top: 20px;
+  left: 5px;
+}
+.pancake-stack .pancake:nth-child(3):after {
+  top: 22px;
+  right: 5px;
+}
+.pancake-stack .butter {
+  width: 12px;
+  height: 11px;
+  background: #fbdb60;
+  top: 6px;
+  left: 20px;
+  position: absolute;
+  border-radius: 4px;
+  box-shadow: 0 1px 0 1px #d67823;
+  transform: scale(0);
+  transition: .2s ease;
+}
+
+#pancake:checked + label .pancakes {
+  transform: translateX(70px);
+}
+#pancake:checked + label .pancake:nth-child(2) {
+  transform: scale(1);
+  transition-delay: .2s;
+}
+#pancake:checked + label .pancake:nth-child(3) {
+  transform: scale(1);
+  transition-delay: .4s;
+}
+#pancake:checked + label .butter {
+  transform: scale(1);
+  transition-delay: .6s;
+}
+
+.footer {
+  flex-wrap: wrap;
+  padding: 5rem 5rem 3rem;
+  text-align: center;
+  min-height: 20vh;
+  display: flex;
+  font: 14px/1.7 'Rubik';
+  color: #fff;
+  align-items: center;
+  justify-content: center;
+}
+.footer a {
+  text-decoration: none;
+  color: #fff;
+  padding: 3px 0;
+  border-bottom: 1px dashed;
+}
+.footer a:hover {
+  border-bottom: 1px solid;
+}
+
+footer {
+  margin-top: 1.5rem;
+}
+footer a {
+  text-decoration: none;
+  display: inline-block;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  background: transparent;
+  border: 1px dashed #fff;
+  color: #fff;
+  margin: 5px;
+}
+footer a:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+footer a .icons {
+  margin-top: 8px;
+  display: inline-block;
+  font-size: 20px;
+}
+footer a .icons:before {
+  position: relative;
+}
\ No newline at end of file
diff --git a/toggles/license.txt b/toggles/license.txt
new file mode 100644
index 0000000..aea5955
--- /dev/null
+++ b/toggles/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Olivia Ng (https://codepen.io/oliviale/pen/xxboXzo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/toggles/src/index.pug b/toggles/src/index.pug
new file mode 100644
index 0000000..d82d41c
--- /dev/null
+++ b/toggles/src/index.pug
@@ -0,0 +1,85 @@
+.toggle-wrapper
+	.toggle.normal
+		input#normal(type="checkbox")
+		label.toggle-item(for="normal")
+	.name Normal
+
+.toggle-wrapper
+	.toggle.transparent
+		input#transparent(type="checkbox")
+		label.toggle-item(for="transparent")
+	.name Transparent
+
+.toggle-wrapper
+	.toggle.checkcross
+		input#checkcross(type="checkbox")
+		label.toggle-item(for="checkcross")
+			.check
+	.name Yes & No
+
+.toggle-wrapper
+	.toggle
+		input#gravity(type="checkbox")
+		label.toggle-item(for="gravity")
+	.name Gravity
+
+.toggle-wrapper
+	.toggle.pancake-stack
+		input#pancake(type="checkbox")
+		label.toggle-item(for="pancake")
+			.pancakes
+				.pancake
+				.pancake
+				.pancake
+				.butter
+	.name Pancake Stacks
+			
+.toggle-wrapper
+	.toggle.dog-rollover
+		input#doggo(type="checkbox")
+		label.toggle-item(for="doggo")
+			.dog
+				.ear
+				.ear.right
+				.face
+					.eyes
+					.mouth
+	.name Doggo Wants a Treat
+					
+.toggle-wrapper
+	.toggle.basketball-hoop
+		input#hoop(type="checkbox")
+		label.toggle-item(for="hoop")
+			.ball__wrapper
+				.ball
+			.hoop
+	.name Kobe Bryant Tribute
+
+.toggle-wrapper
+	.toggle.beer-pong
+		input#beer-pong(type="checkbox")
+		label.toggle-item(for="beer-pong")
+		.cup
+			.lid
+	.name Beer Pong
+
+
+
+.footer
+	.explanation
+		| Part of the 
+		a(href="https://codepen.io/collection/XJNKLz/" target="_blank") CSS Animations collection here
+		|. 
+		br
+		| See the 
+		a(href="https://codepen.io/oliviale/full/vPvvyr" target="_blank") Buttons version here
+		|.
+
+		footer
+			a(href="https://twitter.com/meowlivia_" target="_blank")
+				i.icon-social-twitter.icons
+			a(href="https://github.com/oliviale" target="_blank")
+				i.icon-social-github.icons
+			a(href="https://dribbble.com/oliviale" target="_blank")
+				i.icon-social-dribbble.icons
+	
\ No newline at end of file
diff --git a/toggles/src/style.scss b/toggles/src/style.scss
new file mode 100644
index 0000000..df16b7b
--- /dev/null
+++ b/toggles/src/style.scss
@@ -0,0 +1,620 @@
+
+body {
+  background: #2e394d;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+}
+
+* {
+	box-sizing: border-box;
+	&:before, &:after {
+		content: '';
+		position: absolute;
+	}
+}
+
+input {
+	height: 40px;
+	left: 0;
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	width: 40px;
+}
+
+.toggle-wrapper {
+	flex: 1 1 calc(100% / 3);
+	min-height: 50vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	position: relative;
+	@media (max-width: 960px) {
+		flex: 1 1 calc(100% / 2);
+	}
+	@media (max-width: 700px) {
+		flex: 1 1 100%;
+	}
+	&:nth-child(1) {
+		background: #dec387;
+	}
+	&:nth-child(2) {
+		background: #de8797;
+	}
+	&:nth-child(3) {
+		background: #87aade;
+	}
+	&:nth-child(4) {
+		background: #c5de87;
+	}
+	&:nth-child(5) {
+		background: #87ded2;
+	}
+	&:nth-child(6) {
+		background: #c487de;
+	}
+	&:nth-child(7) {
+		background: #de8787;
+		.toggle {
+			transform: translate(-40px, 40px);
+		}
+	}
+	&:nth-child(8) {
+		background: #decf87;
+		.toggle {
+			transform: translate(-40px, 40px);
+		}
+	}
+}
+
+.name {
+	width: 80%;
+	position: absolute;
+	font: 500 14px 'Rubik', sans-serif;
+	letter-spacing: .5px;
+	text-transform: uppercase;
+	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
+	bottom: 15px;
+	right: 15px;
+	text-align: right;
+}
+
+.toggle {
+	position: relative;
+	display: inline-block;
+}
+
+label.toggle-item {
+	width: 7em;
+	background: #2e394d;
+	height: 3em;
+	display: inline-block;
+	border-radius: 50px;
+	margin: 40px;
+	position: relative;
+	transition: all .3s ease;
+	transform-origin: 20% center;
+	cursor: pointer;
+	&:before {
+		display: block;
+		transition: all .2s ease;
+		width: 2.3em;
+    height: 2.3em;
+		top: .25em;
+		left: .25em;
+    border-radius: 2em;
+    border: 2px solid #88cf8f;
+		transition: .3s ease;
+	}
+}
+
+.normal {
+	label {
+		background: #af4c4c;
+    border: .5px solid rgba(117, 117, 117, 0.31);
+    box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.2), 0 -3px 4px rgba(0,0,0,0.15);
+		&:before {
+			border: none;
+			width: 2.5em;
+			height: 2.5em;
+			box-shadow: inset 0.5px -1px 1px rgba(0, 0, 0, 0.35);
+			background: #fff;
+			transform: rotate(-25deg);
+		}
+		&:after {
+			background: transparent;
+			height: calc(100% + 8px);
+			border-radius: 30px;
+			top: -5px;
+			width: calc(100% + 8px);
+			left: -4px;
+			z-index: 0;
+			box-shadow: inset 0px 2px 4px -2px rgba(0,0,0,0.2), 0px 1px 2px 0px rgba(151, 151, 151, 0.2);
+		}
+	}
+}
+
+#normal:checked + label {
+	background: #4caf50;
+	&:before {
+		left: 67px;
+	}
+}
+
+.transparent {
+	label {
+		background: transparent;
+		border: 3px solid #fff;
+		height: 3.35em;
+		&:before {
+			border: 3px solid #fff;
+			width: 2em;
+			height: 2em;
+			top: .3em;
+			left: .3em;
+			background: #fff;
+		}
+	}
+}
+
+#transparent:checked + label {
+	&:before {
+		transform: translateX(59px);
+	}
+}
+
+.checkcross {
+	label:before {
+		content: none;
+	}
+	.check {
+		border-radius: 50%;
+    width: 2.5em;
+    height: 2.5em;
+    position: absolute;
+    background: #8BC34A;
+    transition: .4s ease;
+    top: 4.5px;
+    left: 4.5px;
+		&:before, &:after {
+			height: 4px;
+			border-radius: 10px;
+			background: #fff;
+			transition: .4s ease;
+		}
+		&:before {
+			width: 25px;
+			transform: rotate(-45deg) translate(-6px, 20px);
+		}
+		&:after {
+			width: 10px;
+			transform: rotate(45deg) translate(20px, 11px);
+		}
+	}
+}
+
+#checkcross:checked + label {
+	.check {
+		left: 68px;
+		transform: rotate(360deg);
+		background: #c34a4a;
+		&:before {
+			width: 27px;
+			transform: rotate(-45deg) translate(-8px, 18px);
+    
+		}
+		&:after {
+			width: 27px;
+    	transform: rotate(45deg) translate(18px, 8px);
+		}
+	}
+}
+
+#gravity:checked + label {
+	transform: rotate(90deg);
+	&:before {
+		transform: translateX(67px);
+		transition-delay: .2s;
+		transition: 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) .2s; 
+	}
+}
+
+.beer-pong {
+	label:before {
+		background: #f9f9f9;
+    box-shadow: inset 0 -3px 0 0 #c6c5c5;
+    border: none;
+    width: 2.5em;
+    height: 2.5em;
+    top: .25em;
+    left: .25em;
+	}
+	.cup {
+		top: -3%;
+		right: -118px;
+		border-top: 90px solid #f44336;
+		border-left: 15px solid transparent;
+		border-right: 15px solid transparent;
+		height: 3px;
+		position: absolute;
+		width: 80px;
+    transform-origin: bottom right;
+    transition: .2s cubic-bezier(0.42, 0.5, 0.58, 1);
+		&:before {
+			box-shadow: 0 -10px 0 0px rgba(39, 39, 39, 0.1), 0px -20px 0 0px rgba(39, 39, 39, 0.1);
+			border-radius: 3px;
+			overflow: hidden;
+			background: rgba(39, 39, 39, 0.1);
+			width: 120%;
+			left: -5px;
+			height: 4px;
+			top: -40px;
+		}
+		.lid {
+			position: absolute;
+			width: 95px;
+			height: 8px;
+			border-radius: 20px;
+			background: #efefef;
+			bottom: 86px;
+			left: -23px;
+			&:after {
+				background: #efefef;
+				width: 48px;
+				height: 5px;
+				left: 50%;
+				margin-left: -24px;
+				top: 94px;
+				border-radius: 0 0 3px 3px;
+			}
+		}
+	}
+}
+
+#beer-pong:checked  {
+	~ .cup {
+		animation: .2s linear cup 1s forwards;
+	}
+	+ label:before {
+		animation: 2s linear bounce-off forwards;
+	}
+}
+
+@keyframes cup {
+	0% { transform: none; }
+	50% { transform: rotate(75deg) translate(10px,15px); }
+	90% { transform: rotate(70deg) translate(10px,15px); }
+	100% { transform: rotate(75deg) translate(10px,15px); }
+}
+
+@keyframes bounce-off {
+	0% { transform: translateY(0); }
+	10%,25% { transform: translate(-20px, -80px); }
+	50% { transform: rotate(163deg); transform-origin: 100px -12px; }
+	70% { transform: rotate(0) translate(-3px, -8px);  transform-origin: 100px -12px;  }
+	75% { transform: translate(20px, -8px);}
+	80% { transform:  translate(30px,0px) }
+	85% { transform:  translate(40px, -3px) }
+	87% { transform:  translate(46px, 0px) }
+	90% { transform:  translate(52px, -1px) }
+	95% { transform:  translate(60px, 0px) }
+	100% { transform:  translate(64px,0px);}
+}
+
+
+.dog-rollover {
+	label {
+		&:before {
+			content: none;
+		}
+		.dog {
+			display: inline-block;
+			position: absolute;
+			width: 2.5em;
+			height: 2.5em;
+			top: .25em;
+			left: .2em;
+			transition: .6s ease;
+		}
+		.eyes {
+			position: absolute;
+			width: 8px;
+			height: 8px;
+			background: #222;
+			border-radius: 50%;
+			transform: translate(8px, 14px);
+			box-shadow: 16px 0 0 #222, 22px -4px 0 12px #e4ac04;
+		}
+		.ear {
+			width: 18px;
+			height: 20px;
+			position: absolute;
+			left: -4px;
+			bottom: 80%;
+			background: #f9bb00;
+			margin-bottom: -5px;
+			border-radius: 50% 50% 0 0 / 100% 100% 0 0;
+			box-shadow: inset 4px 0 0 0px #ffffff, inset -4px 0 0 0px #ffffff;
+			transform: rotate(-40deg);
+			&.right {
+				transform: rotate(60deg) scaleX(-1);
+				left: auto;
+				transform-origin: center bottom;
+				transition: .4s ease-in-out;
+				right: 0px;
+			}
+		}
+		.face {
+			overflow: hidden;
+			border-radius: 50%;
+			width: 2.5em;
+			height: 2.5em;
+			position: absolute;
+			background: #fff;
+			z-index: 8;
+		}
+		.mouth {
+			position: absolute;
+			background: #222;
+			width: 14px;
+			height: 7px;
+			left: 50%;
+			margin-left: -7px;
+			bottom: 12px;
+			border-radius: 2px 2px 20px 20px;
+			bottom: 8px;
+			transform: scale(0);
+			transition: .1s ease;
+			&:before {
+				width: 8px;
+				height: 8px;
+				background: #ec788d;
+				border-radius: 0 0 50% 50%;
+				transform: translate(3px, 5px);
+			}
+		}
+		&:before {
+			border-color: white;
+			background: white;
+		}
+	}
+}
+
+#doggo:checked  {
+	~ .cup {
+		animation: .2s linear cup 1s forwards;
+	}
+	+ label {
+		.dog {
+			left: 68px;
+			transform: rotate(360deg);
+		}
+		.mouth {
+			transform: scale(1);
+			transition-delay: .7s;
+		}
+		.ear.right {
+			transform: scaleX(-1) rotate(-35deg);
+			transition-delay: .6s;
+		}
+	}
+}
+
+
+.basketball-hoop {
+	label {
+		background: #fdb827;
+	}
+	label:before {
+		content: none;
+	}
+	.ball {
+    border-radius: 50%;
+    width: 2.5em;
+    height: 2.5em;
+    position: absolute;
+    background: #FF9800;
+    border: 2px solid black;
+    transition: .4s ease;
+    top: 4px;
+    left: 4px;
+    background-image: radial-gradient(circle at -5px 10px, transparent 15px, black 15px, black 17px, transparent 17px), radial-gradient(circle at 41px 25px, transparent 15px, black 15px, black 17px, transparent 17px), linear-gradient(110deg, transparent 22px, black 22px, black 24px, transparent 24px), linear-gradient(18deg, transparent 22px, black 22px, black 24px, transparent 24px);
+		&__wrapper {
+			transition: .4s ease;
+			width: 195%;
+			height: 200%;
+			transform-origin: 50% -2%;
+		}
+	}
+	.hoop {
+		top: -50px;
+    right: -84px;
+    width: 50px;
+    background: #f44336;
+    height: 8px;
+    position: absolute;
+		&:before {
+			position: absolute;
+			right: -4px;
+			width: 7px;
+			height: 60px;
+			background: #cd2e22;
+			top: -40px;
+		}
+		&:after {
+			width: 40px;
+			height: 35px;
+			background: repeating-linear-gradient(45deg, transparent, transparent 13px, white 13px, white 15px), repeating-linear-gradient(-45deg, transparent, transparent 13px, white 13px, white 15px);
+			top: 8px;
+			border-radius: 0 0 20% 20%/40% 40% 60% 60%;
+			border: 2px solid #fff;
+			border-width: 0 2px;
+			left: 2px;
+			z-index: 20;
+		}
+	}
+}
+	
+#hoop:checked  {
+	+ label {
+		background: #542583;
+		transition-delay: 1.35s;
+		.ball__wrapper {
+			animation: 1.5s linear ball-wrapper forwards;
+		}
+		.ball {
+			animation: 1.5s linear ball forwards;
+		}
+	} 
+}
+
+@keyframes ball {
+	0% { transform: none; }
+	40% { transform: rotate(-150deg) }
+	48% { transform: rotate(-150deg) translateY(92px) }
+	52% { transform: rotate(-150deg) translate(-10px, 80px) }
+	56% { transform: rotate(-150deg) translate(-25px, 91px) }
+	60% { transform: rotate(-150deg) translate(-35px, 86px) }
+	65% { transform: rotate(-150deg) translate(-45px, 91px) }
+	70% { transform: rotate(-150deg) translate(-50px, 87px) }
+	75% { transform: rotate(-150deg) translate(-60px, 91px) }
+	80% { transform: rotate(-150deg) translate(-65px, 88px) }
+	85% { transform: rotate(-150deg) translate(-70px, 91px) }
+	90% { transform: rotate(-150deg) translate(-75px, 90px) }
+	95% { transform: rotate(-150deg) translate(-80px, 90px) }
+	100% { transform: rotate(-150deg) translate(-82px,91px) }
+}
+
+@keyframes ball-wrapper {
+	0% { transform: none; }
+	40%, 100% { transform: rotate(150deg); }
+}
+
+.pancake-stack {
+	label:before {
+		content: none;
+	}
+	.pancakes {
+		transition: .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+	}
+	.pancake {
+		background: #e27c31;
+		border-radius: 50%;
+    width: 2.5em;
+    height: 2.5em;
+    position: absolute;
+		transition: .4s ease;
+		top: 2px;
+		left: 4px;
+		box-shadow: 0 2px 0 2px #fbbe7c;
+		&:nth-child(2) {
+			left: 0;
+			top: -3px;
+			transform: scale(0);
+			transition: .2s ease .2s;
+		}
+		&:nth-child(3) {
+			top: -8px;
+			transform: scale(0);
+			transition: .2s ease .2s;
+			&:before, &:after {
+				background: #ef8927;
+				border-radius: 20px;
+				width: 50%;
+				height: 20%;
+			}
+			&:before {
+				top: 20px;
+				left: 5px;
+			}
+			&:after {
+				top: 22px;
+				right: 5px;
+			}
+		}
+	}
+	.butter {
+		width: 12px;
+    height: 11px;
+    background: #fbdb60;
+    top: 6px;
+    left: 20px;
+    position: absolute;
+    border-radius: 4px;
+    box-shadow: 0 1px 0 1px #d67823;
+		transform: scale(0);
+		transition: .2s ease;
+	}
+}
+
+#pancake:checked  {
+	+ label {
+		.pancakes {
+			transform: translateX(70px);
+		}
+		.pancake {
+			&:nth-child(2) {
+				transform: scale(1);
+				transition-delay: .2s;
+			}
+			&:nth-child(3) {
+				transform: scale(1);
+				transition-delay: .4s;
+			}
+		}
+		.butter {
+			transform: scale(1);
+			transition-delay: .6s;
+		}
+	} 
+}
+
+.footer {
+	flex-wrap: wrap;
+	padding: 5rem 5rem 3rem;
+	text-align: center;
+	min-height: 20vh;
+	display: flex;
+	font: 14px/1.7 'Rubik';
+	color: #fff;
+	align-items: center;
+	justify-content: center;
+	a {
+		text-decoration: none;
+		color: #fff;
+		padding: 3px 0;
+		border-bottom: 1px dashed;
+		&:hover {
+			border-bottom: 1px solid;
+		}
+	}
+}
+
+footer {
+	margin-top: 1.5rem;
+	a {
+		text-decoration: none;
+		display: inline-block;
+		width: 45px;
+		height: 45px;
+		border-radius: 50%;
+		background: transparent;
+		border: 1px dashed #fff;
+		color: #fff;
+		margin: 5px;
+		&:hover {
+			background: rgba(255, 255, 255, 0.1);
+		}
+		.icons {
+			margin-top: 8px;
+			display: inline-block;
+			font-size: 20px;
+			&:before {
+				position: relative;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/tooltip-appear/README.markdown b/tooltip-appear/README.markdown
new file mode 100644
index 0000000..18d5453
--- /dev/null
+++ b/tooltip-appear/README.markdown
@@ -0,0 +1,7 @@
+# Tooltip appear
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ainalem/pen/ZELZKwg](https://codepen.io/ainalem/pen/ZELZKwg).
+
+Using clip-path: path(...) to create an appear effect consisting of repeated shapes. Here the effect is used for tooltips.
+
+Text about circle and triangle from Wikipedia
diff --git a/tooltip-appear/dist/index.html b/tooltip-appear/dist/index.html
new file mode 100644
index 0000000..4ded81c
--- /dev/null
+++ b/tooltip-appear/dist/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Tooltip appear</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="title">
+    Circle
+    <div class="tooltip">
+      <div class="tooltip-spacing">
+        <div class="tooltip-bg1"></div>
+        <div class="tooltip-bg2"></div>
+        <div class="tooltip-text">?</div>
+        <div class="bubble">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
+            <path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
+          </svg>
+          <div class="bubble-text">Hovering circle</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="body">
+    A circle is a shape consisting of all points in a plane that are at a
+    given distance from a given point, the centre; equivalently it is the
+    curve traced out by a point that moves in a plane so that its distance
+    from a given point is constant.
+  </div>
+  <div class="title title--spacing">
+    Triangle
+    <div class="tooltip">
+      <div class="tooltip-spacing">
+        <div class="tooltip-bg1"></div>
+        <div class="tooltip-bg2"></div>
+        <div class="tooltip-text">?</div>
+        <div class="bubble bubble-triangles">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
+            <path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
+          </svg>
+          <div class="bubble-text bubble-text-triangles">
+            Hovering triangle
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="body">
+    In Euclidean geometry, any three points, when non-collinear, determine a
+    unique triangle and simultaneously, a unique plane (i.e. a
+    two-dimensional Euclidean space).
+  </div>
+  <div class="title title--spacing">
+    Square
+    <div class="tooltip">
+      <div class="tooltip-spacing">
+        <div class="tooltip-bg1"></div>
+        <div class="tooltip-bg2"></div>
+        <div class="tooltip-text">?</div>
+      </div>
+      <div class="bubble bubble-rects">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
+          <path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
+        </svg>
+        <div class="bubble-text bubble-text-rects">Hovering square</div>
+      </div>
+    </div>
+  </div>
+  <div class="body">Don't be a ...</div>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/tooltip-appear/dist/script.js b/tooltip-appear/dist/script.js
new file mode 100644
index 0000000..952b982
--- /dev/null
+++ b/tooltip-appear/dist/script.js
@@ -0,0 +1 @@
+// Into the void
\ No newline at end of file
diff --git a/tooltip-appear/dist/style.css b/tooltip-appear/dist/style.css
new file mode 100644
index 0000000..e221bee
--- /dev/null
+++ b/tooltip-appear/dist/style.css
@@ -0,0 +1,127 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");
+body {
+  align-items: center;
+  background-color: #5f9a74;
+  display: flex;
+  font-family: "Source Sans Pro", sans-serif;
+  height: 100vh;
+  justify-content: center;
+}
+.container {
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 3.6px rgba(0, 0, 0, 0.023),
+    0 5.6px 10px rgba(0, 0, 0, 0.028), 0 13.6px 24.1px rgba(0, 0, 0, 0.034),
+    0 45px 80px rgba(0, 0, 0, 0.06);
+  margin: 0 20px;
+  max-width: 500px;
+  padding: 20px 16px;
+}
+.title {
+  display: flex;
+  font-size: 28px;
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+.title--spacing {
+  margin-top: 16px;
+}
+.tooltip {
+  font-size: 16px;
+  font-weight: normal;
+  margin-top: 2px;
+  position: relative;
+}
+.tooltip:hover {
+  cursor: help;
+}
+.tooltip-spacing {
+  height: 20px;
+  margin: 8px;
+  position: relative;
+  width: 20px;
+}
+.tooltip-bg1 {
+  background-color: #000;
+  border-radius: 10px;
+  content: " ";
+  display: flex;
+  height: 20px;
+  position: absolute;
+  top: 0;
+  width: 20px;
+}
+.tooltip-bg2 {
+  background-color: #fff;
+  border-radius: 8px;
+  content: " ";
+  display: flex;
+  height: 16px;
+  left: 2px;
+  position: absolute;
+  top: 2px;
+  width: 16px;
+}
+.tooltip-text {
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 20px;
+  position: relative;
+  text-align: center;
+  width: 20px;
+}
+.bubble {
+  clip-path: path(
+    "M 201.23862,50.748829 A 0.006,0.006 0 0 1 201.23262,50.754829 0.006,0.006 0 0 1 201.22662,50.748829 0.006,0.006 0 0 1 201.23262,50.742829 0.006,0.006 0 0 1 201.23862,50.748829 M 191.85968,17.069946 A 0.006,0.006 0 0 1 191.85368,17.075946 0.006,0.006 0 0 1 191.84768,17.069946 0.006,0.006 0 0 1 191.85368,17.063946 0.006,0.006 0 0 1 191.85968,17.069946 M 161.59133,52.880402 A 0.006,0.006 0 0 1 161.58533,52.886402 0.006,0.006 0 0 1 161.57933,52.880402 0.006,0.006 0 0 1 161.58533,52.874402 0.006,0.006 0 0 1 161.59133,52.880402 M 138.57033,11.101538 A 0.006,0.006 0 0 1 138.56433,11.107538 0.006,0.006 0 0 1 138.55833,11.101538 0.006,0.006 0 0 1 138.56433,11.095538 0.006,0.006 0 0 1 138.57033,11.101538 M 113.84406,50.322514 A 0.006,0.006 0 0 1 113.83806,50.328514 0.006,0.006 0 0 1 113.83206,50.322514 0.006,0.006 0 0 1 113.83806,50.316514 0.006,0.006 0 0 1 113.84406,50.322514 M 102.33355,21.333096 A 0.006,0.006 0 0 1 102.32755,21.339096 0.006,0.006 0 0 1 102.32155,21.333096 0.006,0.006 0 0 1 102.32755,21.327096 0.006,0.006 0 0 1 102.33355,21.333096 M 64.391521,55.864605 A 0.006,0.006 0 0 1 64.385521,55.870605 0.006,0.006 0 0 1 64.379521,55.864605 0.006,0.006 0 0 1 64.385521,55.858605 0.006,0.006 0 0 1 64.391521,55.864605 M 63.112575,17.496262 A 0.006,0.006 0 0 1 63.106575,17.502262 0.006,0.006 0 0 1 63.100575,17.496262 0.006,0.006 0 0 1 63.106575,17.490262 0.006,0.006 0 0 1 63.112575,17.496262 M 27.198234,49.857197 A 0.006,0.006 0 0 1 27.192234,49.863197 0.006,0.006 0 0 1 27.186234,49.857197 0.006,0.006 0 0 1 27.192234,49.851197 0.006,0.006 0 0 1 27.198234,49.857197 M 14.309602,18.772854 A 0.006,0.006 0 0 1 14.303602,18.778854 0.006,0.006 0 0 1 14.297602,18.772854 0.006,0.006 0 0 1 28.303602,18.766854 0.006,0.006 0 0 1 14.309602,18.772854"
+  );
+  filter: drop-shadow(rgba(0, 0, 0, 0.16) 0px 3px 6px)
+    drop-shadow(rgba(0, 0, 0, 0.23) 0px 3px 6px);
+  left: 28px;
+  opacity: 0.5;
+  position: absolute;
+  top: -30px;
+  transition: transform 400ms, clip-path 400ms, opacity 400ms;
+  transform: rotate(10deg);
+  transform-origin: -10% 50%;
+}
+.bubble-triangles {
+  clip-path: path(
+    "M 203.0404,15.981094 H 203.05405 L 203.04722,15.99297 Z M 179.0404,21.981094 H 179.05405 L 179.04722,21.99297 Z M 137.0404,17.981094 H 137.05405 L 137.04722,17.99297 Z M 193.39923,31.578348 H 193.38558 L 193.39241,31.566472 Z M 153.39923,35.578348 H 153.38558 L 153.39241,35.566472 Z M 113.39923,35.578348 H 113.38558 L 113.39241,35.566472 Z M 69.399234,35.578348 H 69.385576 L 69.392405,35.566472 Z M 97.040397,23.981094 H 97.054055 L 97.047226,23.99297 Z M 15.399233,37.578349 H 15.385575 L 15.392404,37.566472 Z M 40.248519,26.488708 H 40.262177 L 40.255348,26.500584 Z M 14.248519,26.488708 H 14.262177 L 14.255348,26.500584 Z"
+  );
+}
+.bubble-rects {
+  clip-path: path(
+    "M 220.41818,50.596475 H 220.42935 C 220.43075,50.596475 220.43188,50.597602 220.43188,50.599002 V 50.607633 C 220.43188,50.609033 220.43075,50.61016 220.42935,50.61016 H 220.41818 C 220.41678,50.61016 220.41565,50.609033 220.41565,50.607633 V 50.599002 C 220.41565,50.597602 220.41678,50.596475 220.41818,50.596475 Z M 207.09587,16.57393 H 207.10704 C 207.10844,16.57393 207.10957,16.575057 207.10957,16.576457 V 16.585088 C 207.10957,16.586488 207.10844,16.587615 207.10704,16.587615 H 207.09587 C 207.09447,16.587615 207.09334,16.586488 207.09334,16.585088 V 16.576457 C 207.09334,16.575057 207.09447,16.57393 207.09587,16.57393 Z M 171.9734,53.513078 H 171.98457 C 171.98597,53.513078 171.9871,53.514205 171.9871,53.515605 V 53.524236 C 171.9871,53.525636 171.98597,53.526763 171.98457,53.526763 H 171.9734 C 171.972,53.526763 171.97087,53.525636 171.97087,53.524236 V 53.515605 C 171.97087,53.514205 171.972,53.513078 171.9734,53.513078 Z M 168.9456,2.0404937 H 168.95677 C 168.95817,2.0404937 168.9593,2.0416208 168.9593,2.0430209 V 2.0516521 C 168.9593,2.0530522 168.95817,2.0541793 168.95677,2.0541793 H 168.9456 C 168.9442,2.0541793 168.94307,2.0530522 168.94307,2.0516521 V 2.0430209 C 168.94307,2.0416208 168.9442,2.0404937 168.9456,2.0404937 Z M 126.55641,48.063039 H 126.56758 C 126.56898,48.063039 126.57011,48.064166 126.57011,48.065566 V 48.074197 C 126.57011,48.075597 126.56898,48.076724 126.56758,48.076724 H 126.55641 C 126.55501,48.076724 126.55388,48.075597 126.55388,48.074197 V 48.065566 C 126.55388,48.064166 126.55501,48.063039 126.55641,48.063039 Z M 112.02298,11.012696 H 112.03415 C 112.03555,11.012696 112.03668,11.013823 112.03668,11.015223 V 11.023854 C 112.03668,11.025254 112.03555,11.026381 112.03415,11.026381 H 112.02298 C 112.02158,11.026381 112.02045,11.025254 112.02045,11.023854 V 11.015223 C 112.02045,11.013823 112.02158,11.012696 112.02298,11.012696 Z M 68.828384,53.513078 H 68.839559 C 68.840959,53.513078 68.842086,53.514205 68.842086,53.515605 V 53.524236 C 68.842086,53.525636 68.840959,53.526763 68.839559,53.526763 H 68.828384 C 68.826984,53.526763 68.825857,53.525636 68.825857,53.524236 V 53.515605 C 68.825857,53.514205 68.826984,53.513078 68.828384,53.513078 Z M 56.917034,3.7459782 H 56.928208 C 56.929608,3.7459782 56.930736,3.7471053 56.930736,3.7485054 V 3.7571366 C 56.930736,3.7585367 56.929608,3.7596638 56.928208,3.7596638 H 56.917034 C 56.915634,3.7596638 56.914506,3.7585367 56.914506,3.7571366 V 3.7485054 C 56.914506,3.7471053 56.915634,3.7459782 56.917034,3.7459782 Z M 6.0334827,41.474006 H 6.0446573 C 6.0460574,41.474006 6.0471845,41.475133 6.0471845,41.476533 V 41.485164 C 6.0471845,41.486564 6.0460574,41.487691 6.0446573,41.487691 H 6.0334827 C 6.0320826,41.487691 6.0309555,41.486564 6.0309555,41.485164 V 41.476533 C 6.0309555,41.475133 6.0320826,41.474006 6.0334827,41.474006 Z M -9.6945443,5.1404177 H -9.6833697 C -9.6819696,5.1404177 -9.6808425,5.1415448 -9.6808425,5.1429449 V 5.1515761 C -9.6808425,5.1529762 -9.6819696,5.1541033 -9.6833697,5.1541033 H -9.6945443 C -9.6959444,5.1541033 -9.6970715,5.1529762 -9.6970715,5.1515761 V 5.1429449 C -9.6970715,5.1415448 -9.6959444,5.1404177 -9.6945443,5.1404177 Z"
+  );
+  left: 37px;
+  top: -22px;
+}
+.bubble-text {
+  color: white;
+  left: 68px;
+  position: absolute;
+  top: 28px;
+}
+.bubble-text-triangles {
+  left: 62px;
+}
+.bubble-text-rects {
+  left: 68px;
+}
+.tooltip:hover .bubble {
+  clip-path: path(
+    "M 231.23262,50.748829 A 30,30 0 0 1 201.23262,80.748829 30,30 0 0 1 171.23262,50.748829 30,30 0 0 1 201.23262,20.748829 30,30 0 0 1 231.23262,50.748829 M 221.85368,17.069946 A 30,30 0 0 1 191.85368,47.069946 30,30 0 0 1 161.85368,17.069946 30,30 0 0 1 191.85368,-12.930054 30,30 0 0 1 221.85368,17.069946 M 191.58533,52.880402 A 30,30 0 0 1 161.58533,82.880402 30,30 0 0 1 131.58533,52.880402 30,30 0 0 1 161.58533,22.880402 30,30 0 0 1 191.58533,52.880402 M 168.56433,11.101538 A 30,30 0 0 1 138.56433,41.101538 30,30 0 0 1 108.56433,11.101538 30,30 0 0 1 138.56433,-18.898462 30,30 0 0 1 168.56433,11.101538 M 143.83806,50.322514 A 30,30 0 0 1 113.83806,80.322514 30,30 0 0 1 83.838058,50.322514 30,30 0 0 1 113.83806,20.322514 30,30 0 0 1 143.83806,50.322514 M 132.32755,21.333096 A 30,30 0 0 1 102.32755,51.333096 30,30 0 0 1 72.327553,21.333096 30,30 0 0 1 102.32755,-8.6669044 30,30 0 0 1 132.32755,21.333096 M 94.385521,55.864605 A 30,30 0 0 1 64.385521,85.864605 30,30 0 0 1 34.385521,55.864605 30,30 0 0 1 64.385521,25.864605 30,30 0 0 1 94.385521,55.864605 M 93.106575,17.496262 A 30,30 0 0 1 63.106575,47.496262 30,30 0 0 1 33.106575,17.496262 30,30 0 0 1 63.106575,-12.503738 30,30 0 0 1 93.106575,17.496262 M 57.192234,49.857197 A 30,30 0 0 1 27.192234,79.857197 30,30 0 0 1 -2.807766,49.857197 30,30 0 0 1 27.192234,19.857197 30,30 0 0 1 57.192234,49.857197 M 44.303602,18.772854 A 30,30 0 0 1 14.303602,48.772854 30,30 0 0 1 -15.696398,18.772854 30,30 0 0 1 14.303602,-11.227146 30,30 0 0 1 44.303602,18.772854"
+  );
+  opacity: 1;
+  transform: rotate(0deg);
+}
+.tooltip:hover .bubble-triangles {
+  clip-path: path(
+    "M 180.95134,-20.140107 H 262.90149 L 221.92642,51.116808 Z M 152.15134,-14.940107 H 234.10149 L 193.12642,56.316808 Z M 101.75134,-19.740107 H 183.70149 L 142.72642,51.516808 Z M 251.3157,68.499549 H 169.36555 L 210.34062,-2.7573658 Z M 203.3157,73.299549 H 121.36555 L 162.34062,2.0426342 Z M 155.3157,73.299549 H 73.365555 L 114.34062,2.0426342 Z M 100.5157,73.299549 H 18.565555 L 59.540627,2.0426342 Z M 47.751341,-12.540106 H 129.70149 L 88.726414,58.716808 Z M 37.7157,75.699549 H -44.234445 L -3.2593726,4.4426344 Z M -14.398913,-9.5309691 H 67.551233 L 26.57616,61.725945 Z M -45.598913,-9.5309691 H 36.351233 L -4.6238398,61.725945 Z"
+  );
+}
+.tooltip:hover .bubble-rects {
+  clip-path: path(
+    "M 192.48716,16.389187 H 248.36037 C 255.36066,16.389187 260.99627,22.024798 260.99627,29.025086 V 72.181548 C 260.99627,79.181836 255.36066,84.817448 248.36037,84.817448 H 192.48716 C 185.48687,84.817448 179.85126,79.181836 179.85126,72.181548 V 29.025086 C 179.85126,22.024798 185.48687,16.389187 192.48716,16.389187 Z M 179.16485,-17.633358 H 235.03806 C 242.03835,-17.633358 247.67396,-11.997747 247.67396,-4.9974585 V 38.159003 C 247.67396,45.159292 242.03835,50.794903 235.03806,50.794903 H 179.16485 C 172.16456,50.794903 166.52895,45.159292 166.52895,38.159003 V -4.9974585 C 166.52895,-11.997747 172.16456,-17.633358 179.16485,-17.633358 Z M 144.04238,19.30579 H 199.91559 C 206.91588,19.30579 212.55149,24.941401 212.55149,31.941689 V 75.098151 C 212.55149,82.09844 206.91588,87.734051 199.91559,87.734051 H 144.04238 C 137.04209,87.734051 131.40648,82.09844 131.40648,75.098151 V 31.941689 C 131.40648,24.941401 137.04209,19.30579 144.04238,19.30579 Z M 141.01458,-32.166794 H 196.88779 C 203.88808,-32.166794 209.52369,-26.531183 209.52369,-19.530894 V 23.625567 C 209.52369,30.625856 203.88808,36.261467 196.88779,36.261467 H 141.01458 C 134.01429,36.261467 128.37868,30.625856 128.37868,23.625567 V -19.530894 C 128.37868,-26.531183 134.01429,-32.166794 141.01458,-32.166794 Z M 98.625386,13.855751 H 154.4986 C 161.49889,13.855751 167.1345,19.491362 167.1345,26.491651 V 69.648112 C 167.1345,76.648401 161.49889,82.284012 154.4986,82.284012 H 98.625386 C 91.625098,82.284012 85.989487,76.648401 85.989487,69.648112 V 26.491651 C 85.989487,19.491362 91.625098,13.855751 98.625386,13.855751 Z M 84.091954,-23.194592 H 139.96517 C 146.96546,-23.194592 152.60107,-17.55898 152.60107,-10.558692 V 32.59777 C 152.60107,39.598058 146.96546,45.233669 139.96517,45.233669 H 84.091954 C 77.091666,45.233669 71.456055,39.598058 71.456055,32.59777 V -10.558692 C 71.456055,-17.55898 77.091666,-23.194592 84.091954,-23.194592 Z M 40.897363,19.30579 H 96.770576 C 103.77086,19.30579 109.40648,24.941401 109.40648,31.941689 V 75.098151 C 109.40648,82.09844 103.77086,87.734051 96.770576,87.734051 H 40.897363 C 33.897074,87.734051 28.261463,82.09844 28.261463,75.098151 V 31.941689 C 28.261463,24.941401 33.897074,19.30579 40.897363,19.30579 Z M 28.986014,-30.461309 H 84.859227 C 91.859516,-30.461309 97.495127,-24.825698 97.495127,-17.82541 V 25.331052 C 97.495127,32.33134 91.859516,37.966951 84.859227,37.966951 H 28.986014 C 21.985726,37.966951 16.350115,32.33134 16.350115,25.331052 V -17.82541 C 16.350115,-24.825698 21.985726,-30.461309 28.986014,-30.461309 Z M -21.897536,7.2667179 H 33.975677 C 40.975965,7.2667179 46.611576,12.902329 46.611576,19.902617 V 63.059079 C 46.611576,70.059368 40.975965,75.694979 33.975677,75.694979 H -21.897536 C -28.897825,75.694979 -34.533436,70.059368 -34.533436,63.059079 V 19.902617 C -34.533436,12.902329 -28.897825,7.2667179 -21.897536,7.2667179 Z M -37.625564,-29.06687 H 18.247649 C 25.247938,-29.06687 30.883549,-23.431259 30.883549,-16.43097 V 26.725492 C 30.883549,33.72578 25.247938,39.361391 18.247649,39.361391 H -37.625564 C -44.625852,39.361391 -50.261463,33.72578 -50.261463,26.725492 V -16.43097 C -50.261463,-23.431259 -44.625852,-29.06687 -37.625564,-29.06687 Z"
+  );
+}
\ No newline at end of file
diff --git a/tooltip-appear/license.txt b/tooltip-appear/license.txt
new file mode 100644
index 0000000..b2ae8ce
--- /dev/null
+++ b/tooltip-appear/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Mikael Ainalem (https://codepen.io/ainalem/pen/ZELZKwg)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/tooltip-appear/src/index.html b/tooltip-appear/src/index.html
new file mode 100644
index 0000000..c3c53e6
--- /dev/null
+++ b/tooltip-appear/src/index.html
@@ -0,0 +1,64 @@
+<div class="container">
+  <div class="title">
+    Circle
+    <div class="tooltip">
+      <div class="tooltip-spacing">
+        <div class="tooltip-bg1"></div>
+        <div class="tooltip-bg2"></div>
+        <div class="tooltip-text">?</div>
+        <div class="bubble">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
+            <path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
+          </svg>
+          <div class="bubble-text">Hovering circle</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="body">
+    A circle is a shape consisting of all points in a plane that are at a
+    given distance from a given point, the centre; equivalently it is the
+    curve traced out by a point that moves in a plane so that its distance
+    from a given point is constant.
+  </div>
+  <div class="title title--spacing">
+    Triangle
+    <div class="tooltip">
+      <div class="tooltip-spacing">
+        <div class="tooltip-bg1"></div>
+        <div class="tooltip-bg2"></div>
+        <div class="tooltip-text">?</div>
+        <div class="bubble bubble-triangles">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
+            <path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
+          </svg>
+          <div class="bubble-text bubble-text-triangles">
+            Hovering triangle
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="body">
+    In Euclidean geometry, any three points, when non-collinear, determine a
+    unique triangle and simultaneously, a unique plane (i.e. a
+    two-dimensional Euclidean space).
+  </div>
+  <div class="title title--spacing">
+    Square
+    <div class="tooltip">
+      <div class="tooltip-spacing">
+        <div class="tooltip-bg1"></div>
+        <div class="tooltip-bg2"></div>
+        <div class="tooltip-text">?</div>
+      </div>
+      <div class="bubble bubble-rects">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
+          <path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
+        </svg>
+        <div class="bubble-text bubble-text-rects">Hovering square</div>
+      </div>
+    </div>
+  </div>
+  <div class="body">Don't be a ...</div>
+</div>
\ No newline at end of file
diff --git a/tooltip-appear/src/script.js b/tooltip-appear/src/script.js
new file mode 100644
index 0000000..952b982
--- /dev/null
+++ b/tooltip-appear/src/script.js
@@ -0,0 +1 @@
+// Into the void
\ No newline at end of file
diff --git a/tooltip-appear/src/style.css b/tooltip-appear/src/style.css
new file mode 100644
index 0000000..31d1610
--- /dev/null
+++ b/tooltip-appear/src/style.css
@@ -0,0 +1,127 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");
+body {
+  align-items: center;
+  background-color: #5f9a74;
+  display: flex;
+  font-family: "Source Sans Pro", sans-serif;
+  height: 100vh;
+  justify-content: center;
+}
+.container {
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 3.6px rgba(0, 0, 0, 0.023),
+    0 5.6px 10px rgba(0, 0, 0, 0.028), 0 13.6px 24.1px rgba(0, 0, 0, 0.034),
+    0 45px 80px rgba(0, 0, 0, 0.06);
+  margin: 0 20px;
+  max-width: 500px;
+  padding: 20px 16px;
+}
+.title {
+  display: flex;
+  font-size: 28px;
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+.title--spacing {
+  margin-top: 16px;
+}
+.tooltip {
+  font-size: 16px;
+  font-weight: normal;
+  margin-top: 2px;
+  position: relative;
+}
+.tooltip:hover {
+  cursor: help;
+}
+.tooltip-spacing {
+  height: 20px;
+  margin: 8px;
+  position: relative;
+  width: 20px;
+}
+.tooltip-bg1 {
+  background-color: #000;
+  border-radius: 10px;
+  content: " ";
+  display: flex;
+  height: 20px;
+  position: absolute;
+  top: 0;
+  width: 20px;
+}
+.tooltip-bg2 {
+  background-color: #fff;
+  border-radius: 8px;
+  content: " ";
+  display: flex;
+  height: 16px;
+  left: 2px;
+  position: absolute;
+  top: 2px;
+  width: 16px;
+}
+.tooltip-text {
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 20px;
+  position: relative;
+  text-align: center;
+  width: 20px;
+}
+.bubble {
+  clip-path: path(
+    "M 201.23862,50.748829 A 0.006,0.006 0 0 1 201.23262,50.754829 0.006,0.006 0 0 1 201.22662,50.748829 0.006,0.006 0 0 1 201.23262,50.742829 0.006,0.006 0 0 1 201.23862,50.748829 M 191.85968,17.069946 A 0.006,0.006 0 0 1 191.85368,17.075946 0.006,0.006 0 0 1 191.84768,17.069946 0.006,0.006 0 0 1 191.85368,17.063946 0.006,0.006 0 0 1 191.85968,17.069946 M 161.59133,52.880402 A 0.006,0.006 0 0 1 161.58533,52.886402 0.006,0.006 0 0 1 161.57933,52.880402 0.006,0.006 0 0 1 161.58533,52.874402 0.006,0.006 0 0 1 161.59133,52.880402 M 138.57033,11.101538 A 0.006,0.006 0 0 1 138.56433,11.107538 0.006,0.006 0 0 1 138.55833,11.101538 0.006,0.006 0 0 1 138.56433,11.095538 0.006,0.006 0 0 1 138.57033,11.101538 M 113.84406,50.322514 A 0.006,0.006 0 0 1 113.83806,50.328514 0.006,0.006 0 0 1 113.83206,50.322514 0.006,0.006 0 0 1 113.83806,50.316514 0.006,0.006 0 0 1 113.84406,50.322514 M 102.33355,21.333096 A 0.006,0.006 0 0 1 102.32755,21.339096 0.006,0.006 0 0 1 102.32155,21.333096 0.006,0.006 0 0 1 102.32755,21.327096 0.006,0.006 0 0 1 102.33355,21.333096 M 64.391521,55.864605 A 0.006,0.006 0 0 1 64.385521,55.870605 0.006,0.006 0 0 1 64.379521,55.864605 0.006,0.006 0 0 1 64.385521,55.858605 0.006,0.006 0 0 1 64.391521,55.864605 M 63.112575,17.496262 A 0.006,0.006 0 0 1 63.106575,17.502262 0.006,0.006 0 0 1 63.100575,17.496262 0.006,0.006 0 0 1 63.106575,17.490262 0.006,0.006 0 0 1 63.112575,17.496262 M 27.198234,49.857197 A 0.006,0.006 0 0 1 27.192234,49.863197 0.006,0.006 0 0 1 27.186234,49.857197 0.006,0.006 0 0 1 27.192234,49.851197 0.006,0.006 0 0 1 27.198234,49.857197 M 14.309602,18.772854 A 0.006,0.006 0 0 1 14.303602,18.778854 0.006,0.006 0 0 1 14.297602,18.772854 0.006,0.006 0 0 1 28.303602,18.766854 0.006,0.006 0 0 1 14.309602,18.772854"
+  );
+  filter: drop-shadow(rgba(0, 0, 0, 0.16) 0px 3px 6px)
+    drop-shadow(rgba(0, 0, 0, 0.23) 0px 3px 6px);
+  left: 28px;
+  opacity: 0.5;
+  position: absolute;
+  top: -30px;
+  transition: transform 400ms, clip-path 400ms, opacity 400ms;
+  transform: rotate(10deg);
+  transform-origin: -10% 50%;
+}
+.bubble-triangles {
+  clip-path: path(
+    "M 203.0404,15.981094 H 203.05405 L 203.04722,15.99297 Z M 179.0404,21.981094 H 179.05405 L 179.04722,21.99297 Z M 137.0404,17.981094 H 137.05405 L 137.04722,17.99297 Z M 193.39923,31.578348 H 193.38558 L 193.39241,31.566472 Z M 153.39923,35.578348 H 153.38558 L 153.39241,35.566472 Z M 113.39923,35.578348 H 113.38558 L 113.39241,35.566472 Z M 69.399234,35.578348 H 69.385576 L 69.392405,35.566472 Z M 97.040397,23.981094 H 97.054055 L 97.047226,23.99297 Z M 15.399233,37.578349 H 15.385575 L 15.392404,37.566472 Z M 40.248519,26.488708 H 40.262177 L 40.255348,26.500584 Z M 14.248519,26.488708 H 14.262177 L 14.255348,26.500584 Z"
+  );
+}
+.bubble-rects {
+  clip-path: path(
+    "M 220.41818,50.596475 H 220.42935 C 220.43075,50.596475 220.43188,50.597602 220.43188,50.599002 V 50.607633 C 220.43188,50.609033 220.43075,50.61016 220.42935,50.61016 H 220.41818 C 220.41678,50.61016 220.41565,50.609033 220.41565,50.607633 V 50.599002 C 220.41565,50.597602 220.41678,50.596475 220.41818,50.596475 Z M 207.09587,16.57393 H 207.10704 C 207.10844,16.57393 207.10957,16.575057 207.10957,16.576457 V 16.585088 C 207.10957,16.586488 207.10844,16.587615 207.10704,16.587615 H 207.09587 C 207.09447,16.587615 207.09334,16.586488 207.09334,16.585088 V 16.576457 C 207.09334,16.575057 207.09447,16.57393 207.09587,16.57393 Z M 171.9734,53.513078 H 171.98457 C 171.98597,53.513078 171.9871,53.514205 171.9871,53.515605 V 53.524236 C 171.9871,53.525636 171.98597,53.526763 171.98457,53.526763 H 171.9734 C 171.972,53.526763 171.97087,53.525636 171.97087,53.524236 V 53.515605 C 171.97087,53.514205 171.972,53.513078 171.9734,53.513078 Z M 168.9456,2.0404937 H 168.95677 C 168.95817,2.0404937 168.9593,2.0416208 168.9593,2.0430209 V 2.0516521 C 168.9593,2.0530522 168.95817,2.0541793 168.95677,2.0541793 H 168.9456 C 168.9442,2.0541793 168.94307,2.0530522 168.94307,2.0516521 V 2.0430209 C 168.94307,2.0416208 168.9442,2.0404937 168.9456,2.0404937 Z M 126.55641,48.063039 H 126.56758 C 126.56898,48.063039 126.57011,48.064166 126.57011,48.065566 V 48.074197 C 126.57011,48.075597 126.56898,48.076724 126.56758,48.076724 H 126.55641 C 126.55501,48.076724 126.55388,48.075597 126.55388,48.074197 V 48.065566 C 126.55388,48.064166 126.55501,48.063039 126.55641,48.063039 Z M 112.02298,11.012696 H 112.03415 C 112.03555,11.012696 112.03668,11.013823 112.03668,11.015223 V 11.023854 C 112.03668,11.025254 112.03555,11.026381 112.03415,11.026381 H 112.02298 C 112.02158,11.026381 112.02045,11.025254 112.02045,11.023854 V 11.015223 C 112.02045,11.013823 112.02158,11.012696 112.02298,11.012696 Z M 68.828384,53.513078 H 68.839559 C 68.840959,53.513078 68.842086,53.514205 68.842086,53.515605 V 53.524236 C 68.842086,53.525636 68.840959,53.526763 68.839559,53.526763 H 68.828384 C 68.826984,53.526763 68.825857,53.525636 68.825857,53.524236 V 53.515605 C 68.825857,53.514205 68.826984,53.513078 68.828384,53.513078 Z M 56.917034,3.7459782 H 56.928208 C 56.929608,3.7459782 56.930736,3.7471053 56.930736,3.7485054 V 3.7571366 C 56.930736,3.7585367 56.929608,3.7596638 56.928208,3.7596638 H 56.917034 C 56.915634,3.7596638 56.914506,3.7585367 56.914506,3.7571366 V 3.7485054 C 56.914506,3.7471053 56.915634,3.7459782 56.917034,3.7459782 Z M 6.0334827,41.474006 H 6.0446573 C 6.0460574,41.474006 6.0471845,41.475133 6.0471845,41.476533 V 41.485164 C 6.0471845,41.486564 6.0460574,41.487691 6.0446573,41.487691 H 6.0334827 C 6.0320826,41.487691 6.0309555,41.486564 6.0309555,41.485164 V 41.476533 C 6.0309555,41.475133 6.0320826,41.474006 6.0334827,41.474006 Z M -9.6945443,5.1404177 H -9.6833697 C -9.6819696,5.1404177 -9.6808425,5.1415448 -9.6808425,5.1429449 V 5.1515761 C -9.6808425,5.1529762 -9.6819696,5.1541033 -9.6833697,5.1541033 H -9.6945443 C -9.6959444,5.1541033 -9.6970715,5.1529762 -9.6970715,5.1515761 V 5.1429449 C -9.6970715,5.1415448 -9.6959444,5.1404177 -9.6945443,5.1404177 Z"
+  );
+  left: 37px;
+  top: -22px;
+}
+.bubble-text {
+  color: white;
+  left: 68px;
+  position: absolute;
+  top: 28px;
+}
+.bubble-text-triangles {
+  left: 62px;
+}
+.bubble-text-rects {
+  left: 68px;
+}
+.tooltip:hover .bubble {
+  clip-path: path(
+    "M 231.23262,50.748829 A 30,30 0 0 1 201.23262,80.748829 30,30 0 0 1 171.23262,50.748829 30,30 0 0 1 201.23262,20.748829 30,30 0 0 1 231.23262,50.748829 M 221.85368,17.069946 A 30,30 0 0 1 191.85368,47.069946 30,30 0 0 1 161.85368,17.069946 30,30 0 0 1 191.85368,-12.930054 30,30 0 0 1 221.85368,17.069946 M 191.58533,52.880402 A 30,30 0 0 1 161.58533,82.880402 30,30 0 0 1 131.58533,52.880402 30,30 0 0 1 161.58533,22.880402 30,30 0 0 1 191.58533,52.880402 M 168.56433,11.101538 A 30,30 0 0 1 138.56433,41.101538 30,30 0 0 1 108.56433,11.101538 30,30 0 0 1 138.56433,-18.898462 30,30 0 0 1 168.56433,11.101538 M 143.83806,50.322514 A 30,30 0 0 1 113.83806,80.322514 30,30 0 0 1 83.838058,50.322514 30,30 0 0 1 113.83806,20.322514 30,30 0 0 1 143.83806,50.322514 M 132.32755,21.333096 A 30,30 0 0 1 102.32755,51.333096 30,30 0 0 1 72.327553,21.333096 30,30 0 0 1 102.32755,-8.6669044 30,30 0 0 1 132.32755,21.333096 M 94.385521,55.864605 A 30,30 0 0 1 64.385521,85.864605 30,30 0 0 1 34.385521,55.864605 30,30 0 0 1 64.385521,25.864605 30,30 0 0 1 94.385521,55.864605 M 93.106575,17.496262 A 30,30 0 0 1 63.106575,47.496262 30,30 0 0 1 33.106575,17.496262 30,30 0 0 1 63.106575,-12.503738 30,30 0 0 1 93.106575,17.496262 M 57.192234,49.857197 A 30,30 0 0 1 27.192234,79.857197 30,30 0 0 1 -2.807766,49.857197 30,30 0 0 1 27.192234,19.857197 30,30 0 0 1 57.192234,49.857197 M 44.303602,18.772854 A 30,30 0 0 1 14.303602,48.772854 30,30 0 0 1 -15.696398,18.772854 30,30 0 0 1 14.303602,-11.227146 30,30 0 0 1 44.303602,18.772854"
+  );
+  opacity: 1;
+  transform: rotate(0deg);
+}
+.tooltip:hover .bubble-triangles {
+  clip-path: path(
+    "M 180.95134,-20.140107 H 262.90149 L 221.92642,51.116808 Z M 152.15134,-14.940107 H 234.10149 L 193.12642,56.316808 Z M 101.75134,-19.740107 H 183.70149 L 142.72642,51.516808 Z M 251.3157,68.499549 H 169.36555 L 210.34062,-2.7573658 Z M 203.3157,73.299549 H 121.36555 L 162.34062,2.0426342 Z M 155.3157,73.299549 H 73.365555 L 114.34062,2.0426342 Z M 100.5157,73.299549 H 18.565555 L 59.540627,2.0426342 Z M 47.751341,-12.540106 H 129.70149 L 88.726414,58.716808 Z M 37.7157,75.699549 H -44.234445 L -3.2593726,4.4426344 Z M -14.398913,-9.5309691 H 67.551233 L 26.57616,61.725945 Z M -45.598913,-9.5309691 H 36.351233 L -4.6238398,61.725945 Z"
+  );
+}
+.tooltip:hover .bubble-rects {
+  clip-path: path(
+    "M 192.48716,16.389187 H 248.36037 C 255.36066,16.389187 260.99627,22.024798 260.99627,29.025086 V 72.181548 C 260.99627,79.181836 255.36066,84.817448 248.36037,84.817448 H 192.48716 C 185.48687,84.817448 179.85126,79.181836 179.85126,72.181548 V 29.025086 C 179.85126,22.024798 185.48687,16.389187 192.48716,16.389187 Z M 179.16485,-17.633358 H 235.03806 C 242.03835,-17.633358 247.67396,-11.997747 247.67396,-4.9974585 V 38.159003 C 247.67396,45.159292 242.03835,50.794903 235.03806,50.794903 H 179.16485 C 172.16456,50.794903 166.52895,45.159292 166.52895,38.159003 V -4.9974585 C 166.52895,-11.997747 172.16456,-17.633358 179.16485,-17.633358 Z M 144.04238,19.30579 H 199.91559 C 206.91588,19.30579 212.55149,24.941401 212.55149,31.941689 V 75.098151 C 212.55149,82.09844 206.91588,87.734051 199.91559,87.734051 H 144.04238 C 137.04209,87.734051 131.40648,82.09844 131.40648,75.098151 V 31.941689 C 131.40648,24.941401 137.04209,19.30579 144.04238,19.30579 Z M 141.01458,-32.166794 H 196.88779 C 203.88808,-32.166794 209.52369,-26.531183 209.52369,-19.530894 V 23.625567 C 209.52369,30.625856 203.88808,36.261467 196.88779,36.261467 H 141.01458 C 134.01429,36.261467 128.37868,30.625856 128.37868,23.625567 V -19.530894 C 128.37868,-26.531183 134.01429,-32.166794 141.01458,-32.166794 Z M 98.625386,13.855751 H 154.4986 C 161.49889,13.855751 167.1345,19.491362 167.1345,26.491651 V 69.648112 C 167.1345,76.648401 161.49889,82.284012 154.4986,82.284012 H 98.625386 C 91.625098,82.284012 85.989487,76.648401 85.989487,69.648112 V 26.491651 C 85.989487,19.491362 91.625098,13.855751 98.625386,13.855751 Z M 84.091954,-23.194592 H 139.96517 C 146.96546,-23.194592 152.60107,-17.55898 152.60107,-10.558692 V 32.59777 C 152.60107,39.598058 146.96546,45.233669 139.96517,45.233669 H 84.091954 C 77.091666,45.233669 71.456055,39.598058 71.456055,32.59777 V -10.558692 C 71.456055,-17.55898 77.091666,-23.194592 84.091954,-23.194592 Z M 40.897363,19.30579 H 96.770576 C 103.77086,19.30579 109.40648,24.941401 109.40648,31.941689 V 75.098151 C 109.40648,82.09844 103.77086,87.734051 96.770576,87.734051 H 40.897363 C 33.897074,87.734051 28.261463,82.09844 28.261463,75.098151 V 31.941689 C 28.261463,24.941401 33.897074,19.30579 40.897363,19.30579 Z M 28.986014,-30.461309 H 84.859227 C 91.859516,-30.461309 97.495127,-24.825698 97.495127,-17.82541 V 25.331052 C 97.495127,32.33134 91.859516,37.966951 84.859227,37.966951 H 28.986014 C 21.985726,37.966951 16.350115,32.33134 16.350115,25.331052 V -17.82541 C 16.350115,-24.825698 21.985726,-30.461309 28.986014,-30.461309 Z M -21.897536,7.2667179 H 33.975677 C 40.975965,7.2667179 46.611576,12.902329 46.611576,19.902617 V 63.059079 C 46.611576,70.059368 40.975965,75.694979 33.975677,75.694979 H -21.897536 C -28.897825,75.694979 -34.533436,70.059368 -34.533436,63.059079 V 19.902617 C -34.533436,12.902329 -28.897825,7.2667179 -21.897536,7.2667179 Z M -37.625564,-29.06687 H 18.247649 C 25.247938,-29.06687 30.883549,-23.431259 30.883549,-16.43097 V 26.725492 C 30.883549,33.72578 25.247938,39.361391 18.247649,39.361391 H -37.625564 C -44.625852,39.361391 -50.261463,33.72578 -50.261463,26.725492 V -16.43097 C -50.261463,-23.431259 -44.625852,-29.06687 -37.625564,-29.06687 Z"
+  );
+}
diff --git a/toon-fire-shader/README.markdown b/toon-fire-shader/README.markdown
new file mode 100644
index 0000000..e4d9dd7
--- /dev/null
+++ b/toon-fire-shader/README.markdown
@@ -0,0 +1,5 @@
+# Toon Fire Shader
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pizza3/pen/MWyxYjw](https://codepen.io/pizza3/pen/MWyxYjw).
+
+
diff --git a/toon-fire-shader/dist/index.html b/toon-fire-shader/dist/index.html
new file mode 100644
index 0000000..e023fb0
--- /dev/null
+++ b/toon-fire-shader/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Toon Fire Shader</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="world"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js'></script><script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/toon-fire-shader/dist/script.js b/toon-fire-shader/dist/script.js
new file mode 100644
index 0000000..75b3bd9
--- /dev/null
+++ b/toon-fire-shader/dist/script.js
@@ -0,0 +1,214 @@
+import { EffectComposer } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/EffectComposer.js";
+import { RenderPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/RenderPass.js";
+import { UnrealBloomPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/UnrealBloomPass.js";
+
+
+
+var options = {
+  exposure: 2.8,
+  bloomStrength: 1.2,
+  bloomThreshold: 0,
+  bloomRadius: 0.8,
+  color0: [74, 30, 0], // CSS string
+  color1: [201, 158, 72], // RGB array
+};
+var gui = new dat.GUI();
+
+var bloom = gui.addFolder("Bloom");
+// bloom.add(options, "exposure", 0.0, 5.0).name("exposure").listen();
+bloom.add(options, "bloomStrength", 0.0, 5.0).name("bloomStrength").listen();
+// bloom.add(options, "bloomThreshold", 0.0, 1.0).name("bloomThreshold").listen();
+bloom.add(options, "bloomRadius", 0.1, 2.0).name("bloomRadius").listen();
+bloom.open();
+
+var color = gui.addFolder("Colors");
+color.addColor(options, "color0").name("Border");
+color.addColor(options, "color1").name("Base");
+color.open();
+
+const vert = `
+      varying vec3 vNormal;
+      void main() {
+        	vNormal = normal;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+      }
+
+`;
+
+const frag = `
+      #define NUM_OCTAVES 5
+      uniform vec4 resolution;
+      uniform vec3 color1;
+      uniform vec3 color0;
+      uniform float time;
+      varying vec3 vNormal;
+
+      float rand(vec2 n) {
+        return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+      }
+
+      float noise(vec2 p){
+        vec2 ip = floor(p);
+        vec2 u = fract(p);
+        u = u*u*(3.0-2.0*u);
+
+        float res = mix(
+          mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x),
+          mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y);
+        return res*res;
+      }
+
+      float fbm(vec2 x) {
+        float v = 0.0;
+        float a = 0.5;
+        vec2 shift = vec2(100);
+        // Rotate to reduce axial bias
+          mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50));
+        for (int i = 0; i < NUM_OCTAVES; ++i) {
+          v += a * noise(x);
+          x = rot * x * 2.0 + shift;
+          a *= 0.5;
+        }
+        return v;
+      }
+
+      vec3 rgbcol(float r, float g, float b) {
+        return vec3(r/255.0,g/255.0,b/255.0);
+      }
+
+      float setOpacity(float r, float g, float b) {
+        float tone = (r + g + b) / 3.0;
+        float alpha = 1.0;
+        if(tone<0.99) {
+          alpha = 0.0;
+        }
+        return alpha;
+      }
+
+      void main()	{
+       //this is for plane geometry
+       //vec2 uv = gl_FragCoord.xy/resolution.xy ;
+
+       vec2 uv = normalize( vNormal ).xy * 0.5 + 0.5; ;
+       vec2 newUv = uv + vec2(0.0, -time*0.0004);
+       float scale = 12.;
+       vec2 p = newUv*scale;
+       float noise = fbm( p + fbm( p ) );
+
+       vec4 backColor = vec4(1.0 - uv.y) + vec4(vec3(noise*(1.0 - uv.y)),1.0);
+       float aback = setOpacity(backColor.r,backColor.g,backColor.b);
+       backColor.a = aback;
+       backColor.rgb = rgbcol(color1.r,color1.g,color1.b);
+
+       vec4 frontColor = vec4(1.08 - uv.y) + vec4(vec3(noise*(1.0 - uv.y)),1.0);
+       float afront = setOpacity(frontColor.r,frontColor.g,frontColor.b);
+       frontColor.a = afront ;
+       frontColor.rgb = rgbcol(color0.r,color0.g,color0.b);
+
+       // create edge
+       frontColor.a = frontColor.a - backColor.a;
+
+       if(frontColor.a>0.0){
+        // show first color
+        gl_FragColor = frontColor;
+       } else {
+        // show 2nd color
+         gl_FragColor = backColor;
+       }
+      }
+
+`;
+
+var scene,
+  camera,
+  renderer,
+  width = window.innerWidth,
+  height = window.innerHeight,
+  material,
+  bloomPass,
+  composer;
+var uniforms = {
+  time: {
+    type: "f",
+    value: 10.0,
+  },
+  resolution: {
+    value: new THREE.Vector2(width, height),
+  },
+  color1: {
+    value: new THREE.Vector3(...options.color1),
+  },
+  color0: {
+    value: new THREE.Vector3(...options.color0),
+  },
+};
+
+function init() {
+  createScene();
+  plane();
+  animate();
+}
+function createScene() {
+  scene = new THREE.Scene();
+  camera = new THREE.PerspectiveCamera(
+    75,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    1000
+  );
+  camera.position.z = 5;
+  renderer = new THREE.WebGLRenderer();
+  renderer.antialias = true;
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(width, height);
+  // renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  // renderer.interpolateneMapping = THREE.ACESFilmicToneMapping;
+  // renderer.outputEncoding = THREE.sRGBEncoding;
+  document.getElementById("world").appendChild(renderer.domElement);
+
+  var renderScene = new RenderPass(scene, camera);
+
+  bloomPass = new UnrealBloomPass(
+    new THREE.Vector2(window.innerWidth, window.innerHeight),
+    1.5,
+    0.4,
+    0.85
+  );
+  bloomPass.threshold = options.bloomThreshold;
+  bloomPass.strength = options.bloomStrength;
+  bloomPass.radius = options.bloomRadius;
+
+  composer = new EffectComposer(renderer);
+  composer.addPass(renderScene);
+  composer.addPass(bloomPass);
+}
+
+function plane() {
+  var spheregeometry = new THREE.SphereGeometry(1.7, 32, 32);
+  material = new THREE.ShaderMaterial({
+    uniforms: uniforms,
+    transparent: true,
+    vertexShader: vert,
+    fragmentShader: frag,
+  });
+  var plane = new THREE.Mesh(spheregeometry, material);
+  scene.add(plane);
+}
+function handleResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+function animate(delta) {
+  requestAnimationFrame(animate);
+  material.uniforms.time.value = delta;
+  material.uniforms.color1.value = new THREE.Vector3(...options.color1);
+  material.uniforms.color0.value = new THREE.Vector3(...options.color0);
+
+  bloomPass.threshold = options.bloomThreshold;
+  bloomPass.strength = options.bloomStrength;
+  bloomPass.radius = options.bloomRadius;
+  composer.render();
+}
+init();
+window.addEventListener("resize", handleResize, false);
\ No newline at end of file
diff --git a/toon-fire-shader/dist/style.css b/toon-fire-shader/dist/style.css
new file mode 100644
index 0000000..f22780b
--- /dev/null
+++ b/toon-fire-shader/dist/style.css
@@ -0,0 +1,11 @@
+* {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    #world {
+      position: relative;
+      width: 100%;
+      height: 100vh;
+    }
\ No newline at end of file
diff --git a/toon-fire-shader/license.txt b/toon-fire-shader/license.txt
new file mode 100644
index 0000000..43b770c
--- /dev/null
+++ b/toon-fire-shader/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Yugam (https://codepen.io/pizza3/pen/MWyxYjw)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/toon-fire-shader/src/index.html b/toon-fire-shader/src/index.html
new file mode 100644
index 0000000..c782fdb
--- /dev/null
+++ b/toon-fire-shader/src/index.html
@@ -0,0 +1 @@
+<div id="world"></div>
\ No newline at end of file
diff --git a/toon-fire-shader/src/script.js b/toon-fire-shader/src/script.js
new file mode 100644
index 0000000..a9fce45
--- /dev/null
+++ b/toon-fire-shader/src/script.js
@@ -0,0 +1,214 @@
+import { EffectComposer } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/EffectComposer.js";
+import { RenderPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/RenderPass.js";
+import { UnrealBloomPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/UnrealBloomPass.js";
+
+
+
+var options = {
+  exposure: 2.8,
+  bloomStrength: 1.2,
+  bloomThreshold: 0,
+  bloomRadius: 0.8,
+  color0: [74, 30, 0], // CSS string
+  color1: [201, 158, 72], // RGB array
+};
+var gui = new dat.GUI();
+
+var bloom = gui.addFolder("Bloom");
+// bloom.add(options, "exposure", 0.0, 5.0).name("exposure").listen();
+bloom.add(options, "bloomStrength", 0.0, 5.0).name("bloomStrength").listen();
+// bloom.add(options, "bloomThreshold", 0.0, 1.0).name("bloomThreshold").listen();
+bloom.add(options, "bloomRadius", 0.1, 2.0).name("bloomRadius").listen();
+bloom.open();
+
+var color = gui.addFolder("Colors");
+color.addColor(options, "color0").name("Border");
+color.addColor(options, "color1").name("Base");
+color.open();
+
+const vert = `
+      varying vec3 vNormal;
+      void main() {
+        	vNormal = normal;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+      }
+
+`;
+
+const frag = `
+      #define NUM_OCTAVES 5
+      uniform vec4 resolution;
+      uniform vec3 color1;
+      uniform vec3 color0;
+      uniform float time;
+      varying vec3 vNormal;
+
+      float rand(vec2 n) {
+        return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+      }
+
+      float noise(vec2 p){
+        vec2 ip = floor(p);
+        vec2 u = fract(p);
+        u = u*u*(3.0-2.0*u);
+
+        float res = mix(
+          mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x),
+          mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y);
+        return res*res;
+      }
+
+      float fbm(vec2 x) {
+        float v = 0.0;
+        float a = 0.5;
+        vec2 shift = vec2(100);
+        // Rotate to reduce axial bias
+          mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50));
+        for (int i = 0; i < NUM_OCTAVES; ++i) {
+          v += a * noise(x);
+          x = rot * x * 2.0 + shift;
+          a *= 0.5;
+        }
+        return v;
+      }
+
+      vec3 rgbcol(float r, float g, float b) {
+        return vec3(r/255.0,g/255.0,b/255.0);
+      }
+
+      float setOpacity(float r, float g, float b) {
+        float tone = (r + g + b) / 3.0;
+        float alpha = 1.0;
+        if(tone<0.99) {
+          alpha = 0.0;
+        }
+        return alpha;
+      }
+
+      void main()	{
+       //this is for plane geometry
+       //vec2 uv = gl_FragCoord.xy/resolution.xy ;
+
+       vec2 uv = normalize( vNormal ).xy * 0.5 + 0.5; ;
+       vec2 newUv = uv + vec2(0.0, -time*0.0004);
+       float scale = 12.;
+       vec2 p = newUv*scale;
+       float noise = fbm( p + fbm( p ) );
+
+       vec4 backColor = vec4(1.0 - uv.y) + vec4(vec3(noise*(1.0 - uv.y)),1.0);
+       float aback = setOpacity(backColor.r,backColor.g,backColor.b);
+       backColor.a = aback;
+       backColor.rgb = rgbcol(color1.r,color1.g,color1.b);
+
+       vec4 frontColor = vec4(1.08 - uv.y) + vec4(vec3(noise*(1.0 - uv.y)),1.0);
+       float afront = setOpacity(frontColor.r,frontColor.g,frontColor.b);
+       frontColor.a = afront ;
+       frontColor.rgb = rgbcol(color0.r,color0.g,color0.b);
+
+       // create edge
+       frontColor.a = frontColor.a - backColor.a;
+
+       if(frontColor.a>0.0){
+        // show first color
+        gl_FragColor = frontColor;
+       } else {
+        // show 2nd color
+         gl_FragColor = backColor;
+       }
+      }
+
+`;
+
+var scene,
+  camera,
+  renderer,
+  width = window.innerWidth,
+  height = window.innerHeight,
+  material,
+  bloomPass,
+  composer;
+var uniforms = {
+  time: {
+    type: "f",
+    value: 10.0,
+  },
+  resolution: {
+    value: new THREE.Vector2(width, height),
+  },
+  color1: {
+    value: new THREE.Vector3(...options.color1),
+  },
+  color0: {
+    value: new THREE.Vector3(...options.color0),
+  },
+};
+
+function init() {
+  createScene();
+  plane();
+  animate();
+}
+function createScene() {
+  scene = new THREE.Scene();
+  camera = new THREE.PerspectiveCamera(
+    75,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    1000
+  );
+  camera.position.z = 5;
+  renderer = new THREE.WebGLRenderer();
+  renderer.antialias = true;
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(width, height);
+  // renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  // renderer.interpolateneMapping = THREE.ACESFilmicToneMapping;
+  // renderer.outputEncoding = THREE.sRGBEncoding;
+  document.getElementById("world").appendChild(renderer.domElement);
+
+  var renderScene = new RenderPass(scene, camera);
+
+  bloomPass = new UnrealBloomPass(
+    new THREE.Vector2(window.innerWidth, window.innerHeight),
+    1.5,
+    0.4,
+    0.85
+  );
+  bloomPass.threshold = options.bloomThreshold;
+  bloomPass.strength = options.bloomStrength;
+  bloomPass.radius = options.bloomRadius;
+
+  composer = new EffectComposer(renderer);
+  composer.addPass(renderScene);
+  composer.addPass(bloomPass);
+}
+
+function plane() {
+  var spheregeometry = new THREE.SphereGeometry(1.7, 32, 32);
+  material = new THREE.ShaderMaterial({
+    uniforms: uniforms,
+    transparent: true,
+    vertexShader: vert,
+    fragmentShader: frag,
+  });
+  var plane = new THREE.Mesh(spheregeometry, material);
+  scene.add(plane);
+}
+function handleResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+function animate(delta) {
+  requestAnimationFrame(animate);
+  material.uniforms.time.value = delta;
+  material.uniforms.color1.value = new THREE.Vector3(...options.color1);
+  material.uniforms.color0.value = new THREE.Vector3(...options.color0);
+
+  bloomPass.threshold = options.bloomThreshold;
+  bloomPass.strength = options.bloomStrength;
+  bloomPass.radius = options.bloomRadius;
+  composer.render();
+}
+init();
+window.addEventListener("resize", handleResize, false);
diff --git a/toon-fire-shader/src/style.css b/toon-fire-shader/src/style.css
new file mode 100644
index 0000000..7434a48
--- /dev/null
+++ b/toon-fire-shader/src/style.css
@@ -0,0 +1,11 @@
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    #world {
+      position: relative;
+      width: 100%;
+      height: 100vh;
+    }
diff --git a/toon-fireball/README.markdown b/toon-fireball/README.markdown
new file mode 100644
index 0000000..540a03a
--- /dev/null
+++ b/toon-fireball/README.markdown
@@ -0,0 +1,5 @@
+# Toon Fireball
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pizza3/pen/Rwoqemx](https://codepen.io/pizza3/pen/Rwoqemx).
+
+
diff --git a/toon-fireball/dist/index.html b/toon-fireball/dist/index.html
new file mode 100644
index 0000000..246fb72
--- /dev/null
+++ b/toon-fireball/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Toon Fireball</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="world"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js'></script><script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/toon-fireball/dist/script.js b/toon-fireball/dist/script.js
new file mode 100644
index 0000000..14ec44a
--- /dev/null
+++ b/toon-fireball/dist/script.js
@@ -0,0 +1,487 @@
+import { EffectComposer } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/EffectComposer.js";
+import { RenderPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/RenderPass.js";
+import { UnrealBloomPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/UnrealBloomPass.js";
+import { ShaderPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/ShaderPass.js";
+import { OrbitControls } from "https://unpkg.com/three@0.120.0/examples/jsm/controls/OrbitControls.js";
+
+const ENTIRE_SCENE = 0,
+BLOOM_SCENE = 1;
+
+const bloomLayer = new THREE.Layers();
+bloomLayer.set(BLOOM_SCENE);
+const materials = {};
+const darkMaterial = new THREE.MeshBasicMaterial({ color: "black" });
+
+const vert = `
+    varying vec3 vNormal;
+    varying vec3 camPos;
+    varying vec2 vUv;
+
+    void main() {
+    vNormal = normal;
+    vUv = uv;
+    camPos = cameraPosition;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+    }
+`;
+
+const frag = `
+#define NUM_OCTAVES 5
+#define M_PI 3.1415926535897932384626433832795
+uniform vec4 resolution;
+varying vec3 vNormal;
+uniform sampler2D perlinnoise;
+uniform sampler2D sparknoise;
+uniform float time;
+uniform vec3 color0;
+uniform vec3 color1;
+uniform vec3 color2;
+uniform vec3 color3;
+uniform vec3 color4;
+uniform vec3 color5;
+varying vec3 camPos;
+varying vec2 vUv;
+
+float setOpacity(float r, float g, float b, float tonethreshold) {
+  float tone = (r + g + b) / 3.0;
+  float alpha = 1.0;
+  if(tone<tonethreshold) {
+    alpha = 0.0;
+  }
+  return alpha;
+}
+
+vec3 rgbcol(vec3 col) {
+  return vec3(col.r/255.0,col.g/255.0,col.b/255.0);
+}
+
+vec2 rotate(vec2 v, float a) {
+  float s = sin(a);
+  float c = cos(a);
+  mat2 m = mat2(c, -s, s, c);
+  return m * v;
+}
+
+vec2 UnityPolarCoordinates (vec2 UV, vec2 Center, float RadialScale, float LengthScale){
+  //https://twitter.com/Cyanilux/status/1123950519133908995/photo/1
+  vec2 delta = UV - Center;
+  float radius = length(delta) * 2. * RadialScale;
+  float angle = atan(delta.x, delta.y) * 1.0/6.28 * LengthScale;
+  return vec2(radius, angle);
+}
+
+void main() {
+  vec2 olduv = gl_FragCoord.xy/resolution.xy ;
+  vec2 uv = vUv ; 
+  vec2 imguv = uv;
+  float scale = 1.;
+  olduv *= 0.5 + time; 
+  olduv.y = olduv.y ;
+  vec2 p = olduv*scale;
+  vec4 txt = texture2D(perlinnoise, olduv);
+  float gradient = dot(normalize( -camPos ), normalize( vNormal ));
+  float pct = distance(vUv,vec2(0.5));
+
+  vec3 rgbcolor0 = rgbcol(color0);
+  vec3 rgbcolor1 = rgbcol(color1);
+  vec3 rgbcolor2 = rgbcol(color2);
+  vec3 rgbcolor5 = rgbcol(color5);
+
+  // set solid background
+  float y = smoothstep(0.16,0.525,pct);
+  vec3 backcolor = mix(rgbcolor0, rgbcolor5, y);
+
+  gl_FragColor = vec4(backcolor,1.);
+
+  // set polar coords
+  vec2 center = vec2(0.5);
+  vec2 cor = UnityPolarCoordinates(vec2(vUv.x,vUv.y), center, 1., 1.);
+
+  // set textures
+  vec2 newUv = vec2(cor.x + time,cor.x*0.2+cor.y);
+  vec3 noisetex = texture2D(perlinnoise,mod(newUv,1.)).rgb;    
+  vec3 noisetex2 = texture2D(sparknoise,mod(newUv,1.)).rgb;    
+
+
+  // set textures tones
+  float tone0 =  1. - smoothstep(0.3,0.6,noisetex.r);
+  float tone1 =  smoothstep(0.3,0.6,noisetex2.r);
+
+
+  // set opacity for each tone
+  float opacity0 = setOpacity(tone0,tone0,tone0,.29);
+  float opacity1 = setOpacity(tone1,tone1,tone1,.49);
+
+  //set final render
+  if(opacity1>0.0){
+    gl_FragColor = vec4(rgbcolor2,0.)*vec4(opacity1);
+  } else if(opacity0>0.0){
+    gl_FragColor = vec4(rgbcolor1,0.)*vec4(opacity0);
+  }   
+}
+`;
+
+const vertcylinder = `
+    varying vec2 vUv;
+
+    void main() {
+        vUv = uv;
+        vec3 pos = vec3(position.x/1.,position.y,position.z/1.);
+        if(pos.y >= 1.87){
+            pos = vec3(position.x*(sin((position.y - 0.6)*1.27)-0.16),position.y,position.z*(sin((position.y - 0.6)*1.27)-0.16));
+        } else{
+            pos = vec3(position.x*(sin((position.y/2. -  .01)*.11)+0.75),position.y,position.z*(sin((position.y/2. -  .01)*.11)+0.75));
+        }
+        gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
+    }
+`;
+
+const fragcylinder = `
+    varying vec2 vUv;
+    uniform sampler2D perlinnoise;
+    uniform vec3 color4;
+    uniform float time;
+    varying vec3 vNormal;
+
+    vec3 rgbcol(vec3 col) {
+        return vec3(col.r/255.0,col.g/255.0,col.b/255.0);
+    }
+
+    void main() {
+        vec3 noisetex = texture2D(perlinnoise,mod(1.*vec2(vUv.y-time*2.,vUv.x + time*1.),1.)).rgb;    
+        gl_FragColor = vec4(noisetex.r);
+
+        if(gl_FragColor.r >= 0.5){
+            gl_FragColor = vec4(rgbcol(color4),gl_FragColor.r);
+        }else{
+            gl_FragColor = vec4(0.);
+        }
+        gl_FragColor *= vec4(sin(vUv.y) - 0.1);
+        gl_FragColor *= vec4(smoothstep(0.3,0.628,vUv.y));
+
+    }
+
+`;
+
+const vertflame = `
+    varying vec2 vUv;
+    varying vec3 camPos;
+    varying vec3 vNormal;
+    varying vec3 nois;
+    uniform sampler2D noise;
+    uniform float time;
+
+    void main() {
+        vUv = uv;
+        camPos = cameraPosition;
+        vNormal = normal;
+        vec3 pos = vec3(position.x/1.,position.y,position.z/1.);
+        vec3 noisetex = texture2D(noise,mod(1.*vec2(vUv.y-time*2.,vUv.x + time*1.),1.)).rgb;
+        if(pos.y >= 1.87){
+            pos = vec3(position.x*(sin((position.y - 0.64)*1.27)-0.12),position.y,position.z*(sin((position.y - 0.64)*1.27)-0.12));
+        } else{
+            pos = vec3(position.x*(sin((position.y/2. -  .01)*.11)+0.79),position.y,position.z*(sin((position.y/2. -  .01)*.11)+0.79));
+        }
+        pos.xz *= noisetex.r;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
+    }
+`;
+
+const fragflame = `
+    varying vec2 vUv;
+    uniform sampler2D perlinnoise;
+    uniform sampler2D noise;
+    uniform vec3 color4;
+    uniform float time;
+    varying vec3 camPos;
+    varying vec3 vNormal;
+    varying vec3 nois;
+
+    vec3 rgbcol(vec3 col) {
+        return vec3(col.r/255.0,col.g/255.0,col.b/255.0);
+    }
+
+      
+    void main() {
+        // vec3 noisetex = texture2D(perlinnoise,mod(1.*vec2(vUv.y-time*2.,vUv.x + time*1.),1.)).rgb;    
+        // gl_FragColor += vec4(sin((vUv.y - time)*(20. + vUv.y)));
+        vec3 noisetex = texture2D(noise,mod(1.*vec2(vUv.y-time*2.,vUv.x + time*1.),1.)).rgb;
+        // nois = noisetex;
+        gl_FragColor = vec4(noisetex.r);
+
+        if(gl_FragColor.r >= 0.44){
+            gl_FragColor = vec4(rgbcol(color4),gl_FragColor.r);
+        }
+        // else if(gl_FragColor.r >= 0.9){
+        //     // gl_FragColor = vec4(rgbcol(color4),gl_FragColor.r)*0.5;
+        // }
+        else{
+            gl_FragColor = vec4(0.);
+        }
+        gl_FragColor *= vec4(smoothstep(0.2,0.628,vUv.y));
+        // gl_FragColor = vec4(vUv.y - 0.3 );
+        // gl_FragColor = 1. - vec4(dot(normalize(vNormal),normalize(camPos)).r);
+    }
+
+`;
+
+let options = {
+  exposure: 2.8,
+  bloomStrength: 3.5,
+  bloomRadius: 0.39,
+  color0: [0, 0, 0],
+  color1: [81, 14, 5],
+  color2: [181, 156, 24],
+  color3: [66, 66, 66],
+  color4: [79, 79, 79],
+  color5: [64, 27, 0] };
+
+
+// let options = {
+//   exposure: 2.8,
+//   bloomStrength: 3.5,
+//   //   bloomStrength: 0,
+//   bloomRadius: 0.39,
+//   color0: [15, 0, 10],
+//   color1: [13, 6, 5],
+//   color2: [137, 56, 10],
+//   color3: [166, 166, 166],
+//   color4: [237, 149, 67],
+//   color5: [20, 0, 51],
+// };
+let gui = new dat.GUI();
+
+let bloom = gui.addFolder("Bloom");
+bloom.add(options, "bloomStrength", 0.0, 5.0).name("bloomStrength").listen();
+bloom.add(options, "bloomRadius", 0.1, 2.0).name("bloomRadius").listen();
+bloom.open();
+
+let color = gui.addFolder("Colors");
+color.addColor(options, "color0").name("ball0");
+color.addColor(options, "color1").name("ball1");
+color.addColor(options, "color2").name("ball2");
+color.addColor(options, "color4").name("steam");
+color.addColor(options, "color5").name("trail");
+color.open();
+gui.close();
+
+let scene,
+camera,
+renderer,
+controls,
+material,
+material2,
+material3,
+bloomPass,
+bloomComposer,
+composer,
+finalPass,
+finalComposer;
+const width = window.innerWidth,
+height = window.innerHeight;
+
+function init() {
+  createScene();
+  postProc();
+  mesh();
+  flame();
+  cylinder();
+  animatBloom();
+}
+
+function createScene() {
+  scene = new THREE.Scene();
+  camera = new THREE.PerspectiveCamera(
+  75,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000);
+
+  camera.position.set(3.4369982203815655, 3.5239085092722098, 2.994862383531814);
+  renderer = new THREE.WebGLRenderer();
+  renderer.antialias = true;
+  renderer.setClearColor(new THREE.Color('#000'));
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(width, height);
+  controls = new OrbitControls(camera, renderer.domElement);
+  document.getElementById("world").appendChild(renderer.domElement);
+}
+
+function postProc() {
+  const renderScene = new RenderPass(scene, camera);
+  bloomPass = new UnrealBloomPass(
+  new THREE.Vector2(window.innerWidth, window.innerHeight),
+  1.5,
+  0.4,
+  0.85);
+
+  bloomPass.threshold = options.bloomThreshold;
+  bloomPass.strength = options.bloomStrength;
+  bloomPass.radius = options.bloomRadius;
+
+  bloomComposer = new EffectComposer(renderer);
+  bloomComposer.addPass(renderScene);
+  bloomComposer.addPass(bloomPass);
+}
+
+function mesh() {
+  const geometry = new THREE.SphereBufferGeometry(1, 30, 30);
+  material = new THREE.ShaderMaterial({
+    uniforms: {
+      time: {
+        type: "f",
+        value: 0.0 },
+
+      perlinnoise: {
+        type: "t",
+        value: new THREE.TextureLoader().load(
+        "https://raw.githubusercontent.com/pizza3/asset/master/noise9.jpg") },
+
+
+      sparknoise: {
+        type: "t",
+        value: new THREE.TextureLoader().load(
+        "https://raw.githubusercontent.com/pizza3/asset/master/sparklenoise.jpg") },
+
+
+      color5: {
+        value: new THREE.Vector3(...options.color5) },
+
+      color4: {
+        value: new THREE.Vector3(...options.color4) },
+
+      color3: {
+        value: new THREE.Vector3(...options.color3) },
+
+      color2: {
+        value: new THREE.Vector3(...options.color2) },
+
+      color1: {
+        value: new THREE.Vector3(...options.color1) },
+
+      color0: {
+        value: new THREE.Vector3(...options.color0) },
+
+      resolution: { value: new THREE.Vector2(width, height) } },
+
+    vertexShader: vert,
+    fragmentShader: frag });
+
+
+  const mesh = new THREE.Mesh(geometry, material);
+  mesh.scale.set(0.78, 0.78, 0.78);
+  mesh.position.set(1 + 0, 0, 0);
+  scene.add(mesh);
+}
+
+function cylinder() {
+  const geometry = new THREE.CylinderBufferGeometry(1.11, 0, 5.3, 50, 50, true);
+  material2 = new THREE.ShaderMaterial({
+    uniforms: {
+      perlinnoise: {
+        type: "t",
+        value: new THREE.TextureLoader().load(
+        "https://raw.githubusercontent.com/pizza3/asset/master/water-min.jpg") },
+
+
+      color4: {
+        value: new THREE.Vector3(...options.color4) },
+
+      time: {
+        type: "f",
+        value: 0.0 },
+
+      noise: {
+        type: "t",
+        value: new THREE.TextureLoader().load(
+        "https://raw.githubusercontent.com/pizza3/asset/master/noise9.jpg") } },
+
+
+
+    // wireframe:true,
+    vertexShader: vertcylinder,
+    fragmentShader: fragcylinder,
+    transparent: true,
+    depthWrite: false,
+    side: THREE.DoubleSide });
+
+
+  const mesh = new THREE.Mesh(geometry, material2);
+  mesh.rotation.set(0, 0, -Math.PI / 2);
+  mesh.position.set(1 + -4.05, 0, 0);
+  mesh.scale.set(1.5, 1.7, 1.5);
+  scene.add(mesh);
+}
+
+function flame() {
+  const geometry = new THREE.CylinderBufferGeometry(1, 0, 5.3, 50, 50, true);
+  material3 = new THREE.ShaderMaterial({
+    uniforms: {
+      perlinnoise: {
+        type: "t",
+        value: new THREE.TextureLoader().load(
+        "https://raw.githubusercontent.com/pizza3/asset/master/water-min.jpg") },
+
+
+      color4: {
+        value: new THREE.Vector3(...options.color5) },
+
+      time: {
+        type: "f",
+        value: 0.0 },
+
+      noise: {
+        type: "t",
+        value: new THREE.TextureLoader().load(
+        "https://raw.githubusercontent.com/pizza3/asset/master/noise9.jpg") } },
+
+
+
+    // wireframe:true,
+    vertexShader: vertflame,
+    fragmentShader: fragflame,
+    transparent: true,
+    depthWrite: false,
+    side: THREE.DoubleSide });
+
+
+  const mesh = new THREE.Mesh(geometry, material3);
+  mesh.rotation.set(0, 0, -Math.PI / 2);
+  mesh.position.set(1 + -4.78, 0, 0);
+  mesh.scale.set(2, 2, 2);
+  scene.add(mesh);
+}
+
+function updateDraw(deltaTime) {
+  material.uniforms.time.value = -deltaTime / (1000 * 2);
+  material2.uniforms.time.value = -deltaTime / (3000 * 2);
+  material3.uniforms.time.value = -deltaTime / (3000 * 2);
+  material.uniforms.color5.value = new THREE.Vector3(...options.color5);
+  material2.uniforms.color4.value = new THREE.Vector3(...options.color4);
+  material3.uniforms.color4.value = new THREE.Vector3(...options.color5);
+  material.uniforms.color3.value = new THREE.Vector3(...options.color3);
+  material.uniforms.color2.value = new THREE.Vector3(...options.color2);
+  material.uniforms.color1.value = new THREE.Vector3(...options.color1);
+  material.uniforms.color0.value = new THREE.Vector3(...options.color0);
+}
+
+
+
+function animatBloom(deltaTime) {
+  requestAnimationFrame(animatBloom);
+  updateDraw(deltaTime);
+  controls.update();
+  bloomPass.strength = options.bloomStrength;
+  bloomPass.radius = options.bloomRadius;
+  bloomComposer.render();
+}
+
+
+function handleResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+window.addEventListener("load", init);
+window.addEventListener("resize", handleResize, false);
\ No newline at end of file
diff --git a/toon-fireball/dist/style.css b/toon-fireball/dist/style.css
new file mode 100644
index 0000000..4721693
--- /dev/null
+++ b/toon-fireball/dist/style.css
@@ -0,0 +1,5 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/toon-fireball/license.txt b/toon-fireball/license.txt
new file mode 100644
index 0000000..a34a6a2
--- /dev/null
+++ b/toon-fireball/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Yugam (https://codepen.io/pizza3/pen/Rwoqemx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/toon-fireball/src/index.html b/toon-fireball/src/index.html
new file mode 100644
index 0000000..c782fdb
--- /dev/null
+++ b/toon-fireball/src/index.html
@@ -0,0 +1 @@
+<div id="world"></div>
\ No newline at end of file
diff --git a/toon-fireball/src/script.babel b/toon-fireball/src/script.babel
new file mode 100644
index 0000000..4286a4a
--- /dev/null
+++ b/toon-fireball/src/script.babel
@@ -0,0 +1,487 @@
+import { EffectComposer } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/EffectComposer.js";
+import { RenderPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/RenderPass.js";
+import { UnrealBloomPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/UnrealBloomPass.js";
+import { ShaderPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/ShaderPass.js";
+import { OrbitControls } from "https://unpkg.com/three@0.120.0/examples/jsm/controls/OrbitControls.js";
+
+const ENTIRE_SCENE = 0,
+	BLOOM_SCENE = 1;
+
+const bloomLayer = new THREE.Layers();
+bloomLayer.set(BLOOM_SCENE);
+const materials = {};
+const darkMaterial = new THREE.MeshBasicMaterial({ color: "black" });
+
+const vert = `
+    varying vec3 vNormal;
+    varying vec3 camPos;
+    varying vec2 vUv;
+
+    void main() {
+    vNormal = normal;
+    vUv = uv;
+    camPos = cameraPosition;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+    }
+`;
+
+const frag = `
+#define NUM_OCTAVES 5
+#define M_PI 3.1415926535897932384626433832795
+uniform vec4 resolution;
+varying vec3 vNormal;
+uniform sampler2D perlinnoise;
+uniform sampler2D sparknoise;
+uniform float time;
+uniform vec3 color0;
+uniform vec3 color1;
+uniform vec3 color2;
+uniform vec3 color3;
+uniform vec3 color4;
+uniform vec3 color5;
+varying vec3 camPos;
+varying vec2 vUv;
+
+float setOpacity(float r, float g, float b, float tonethreshold) {
+  float tone = (r + g + b) / 3.0;
+  float alpha = 1.0;
+  if(tone<tonethreshold) {
+    alpha = 0.0;
+  }
+  return alpha;
+}
+
+vec3 rgbcol(vec3 col) {
+  return vec3(col.r/255.0,col.g/255.0,col.b/255.0);
+}
+
+vec2 rotate(vec2 v, float a) {
+  float s = sin(a);
+  float c = cos(a);
+  mat2 m = mat2(c, -s, s, c);
+  return m * v;
+}
+
+vec2 UnityPolarCoordinates (vec2 UV, vec2 Center, float RadialScale, float LengthScale){
+  //https://twitter.com/Cyanilux/status/1123950519133908995/photo/1
+  vec2 delta = UV - Center;
+  float radius = length(delta) * 2. * RadialScale;
+  float angle = atan(delta.x, delta.y) * 1.0/6.28 * LengthScale;
+  return vec2(radius, angle);
+}
+
+void main() {
+  vec2 olduv = gl_FragCoord.xy/resolution.xy ;
+  vec2 uv = vUv ; 
+  vec2 imguv = uv;
+  float scale = 1.;
+  olduv *= 0.5 + time; 
+  olduv.y = olduv.y ;
+  vec2 p = olduv*scale;
+  vec4 txt = texture2D(perlinnoise, olduv);
+  float gradient = dot(normalize( -camPos ), normalize( vNormal ));
+  float pct = distance(vUv,vec2(0.5));
+
+  vec3 rgbcolor0 = rgbcol(color0);
+  vec3 rgbcolor1 = rgbcol(color1);
+  vec3 rgbcolor2 = rgbcol(color2);
+  vec3 rgbcolor5 = rgbcol(color5);
+
+  // set solid background
+  float y = smoothstep(0.16,0.525,pct);
+  vec3 backcolor = mix(rgbcolor0, rgbcolor5, y);
+
+  gl_FragColor = vec4(backcolor,1.);
+
+  // set polar coords
+  vec2 center = vec2(0.5);
+  vec2 cor = UnityPolarCoordinates(vec2(vUv.x,vUv.y), center, 1., 1.);
+
+  // set textures
+  vec2 newUv = vec2(cor.x + time,cor.x*0.2+cor.y);
+  vec3 noisetex = texture2D(perlinnoise,mod(newUv,1.)).rgb;    
+  vec3 noisetex2 = texture2D(sparknoise,mod(newUv,1.)).rgb;    
+
+
+  // set textures tones
+  float tone0 =  1. - smoothstep(0.3,0.6,noisetex.r);
+  float tone1 =  smoothstep(0.3,0.6,noisetex2.r);
+
+
+  // set opacity for each tone
+  float opacity0 = setOpacity(tone0,tone0,tone0,.29);
+  float opacity1 = setOpacity(tone1,tone1,tone1,.49);
+
+  //set final render
+  if(opacity1>0.0){
+    gl_FragColor = vec4(rgbcolor2,0.)*vec4(opacity1);
+  } else if(opacity0>0.0){
+    gl_FragColor = vec4(rgbcolor1,0.)*vec4(opacity0);
+  }   
+}
+`;
+
+const vertcylinder = `
+    varying vec2 vUv;
+
+    void main() {
+        vUv = uv;
+        vec3 pos = vec3(position.x/1.,position.y,position.z/1.);
+        if(pos.y >= 1.87){
+            pos = vec3(position.x*(sin((position.y - 0.6)*1.27)-0.16),position.y,position.z*(sin((position.y - 0.6)*1.27)-0.16));
+        } else{
+            pos = vec3(position.x*(sin((position.y/2. -  .01)*.11)+0.75),position.y,position.z*(sin((position.y/2. -  .01)*.11)+0.75));
+        }
+        gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
+    }
+`;
+
+const fragcylinder = `
+    varying vec2 vUv;
+    uniform sampler2D perlinnoise;
+    uniform vec3 color4;
+    uniform float time;
+    varying vec3 vNormal;
+
+    vec3 rgbcol(vec3 col) {
+        return vec3(col.r/255.0,col.g/255.0,col.b/255.0);
+    }
+
+    void main() {
+        vec3 noisetex = texture2D(perlinnoise,mod(1.*vec2(vUv.y-time*2.,vUv.x + time*1.),1.)).rgb;    
+        gl_FragColor = vec4(noisetex.r);
+
+        if(gl_FragColor.r >= 0.5){
+            gl_FragColor = vec4(rgbcol(color4),gl_FragColor.r);
+        }else{
+            gl_FragColor = vec4(0.);
+        }
+        gl_FragColor *= vec4(sin(vUv.y) - 0.1);
+        gl_FragColor *= vec4(smoothstep(0.3,0.628,vUv.y));
+
+    }
+
+`;
+
+const vertflame = `
+    varying vec2 vUv;
+    varying vec3 camPos;
+    varying vec3 vNormal;
+    varying vec3 nois;
+    uniform sampler2D noise;
+    uniform float time;
+
+    void main() {
+        vUv = uv;
+        camPos = cameraPosition;
+        vNormal = normal;
+        vec3 pos = vec3(position.x/1.,position.y,position.z/1.);
+        vec3 noisetex = texture2D(noise,mod(1.*vec2(vUv.y-time*2.,vUv.x + time*1.),1.)).rgb;
+        if(pos.y >= 1.87){
+            pos = vec3(position.x*(sin((position.y - 0.64)*1.27)-0.12),position.y,position.z*(sin((position.y - 0.64)*1.27)-0.12));
+        } else{
+            pos = vec3(position.x*(sin((position.y/2. -  .01)*.11)+0.79),position.y,position.z*(sin((position.y/2. -  .01)*.11)+0.79));
+        }
+        pos.xz *= noisetex.r;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
+    }
+`;
+
+const fragflame = `
+    varying vec2 vUv;
+    uniform sampler2D perlinnoise;
+    uniform sampler2D noise;
+    uniform vec3 color4;
+    uniform float time;
+    varying vec3 camPos;
+    varying vec3 vNormal;
+    varying vec3 nois;
+
+    vec3 rgbcol(vec3 col) {
+        return vec3(col.r/255.0,col.g/255.0,col.b/255.0);
+    }
+
+      
+    void main() {
+        // vec3 noisetex = texture2D(perlinnoise,mod(1.*vec2(vUv.y-time*2.,vUv.x + time*1.),1.)).rgb;    
+        // gl_FragColor += vec4(sin((vUv.y - time)*(20. + vUv.y)));
+        vec3 noisetex = texture2D(noise,mod(1.*vec2(vUv.y-time*2.,vUv.x + time*1.),1.)).rgb;
+        // nois = noisetex;
+        gl_FragColor = vec4(noisetex.r);
+
+        if(gl_FragColor.r >= 0.44){
+            gl_FragColor = vec4(rgbcol(color4),gl_FragColor.r);
+        }
+        // else if(gl_FragColor.r >= 0.9){
+        //     // gl_FragColor = vec4(rgbcol(color4),gl_FragColor.r)*0.5;
+        // }
+        else{
+            gl_FragColor = vec4(0.);
+        }
+        gl_FragColor *= vec4(smoothstep(0.2,0.628,vUv.y));
+        // gl_FragColor = vec4(vUv.y - 0.3 );
+        // gl_FragColor = 1. - vec4(dot(normalize(vNormal),normalize(camPos)).r);
+    }
+
+`;
+
+let options = {
+	exposure: 2.8,
+	bloomStrength: 3.5,
+	bloomRadius: 0.39,
+	color0: [0, 0, 0],
+	color1: [81, 14, 5],
+	color2: [181, 156, 24],
+	color3: [66, 66, 66],
+	color4: [79, 79, 79],
+	color5: [64, 27, 0]
+};
+
+// let options = {
+//   exposure: 2.8,
+//   bloomStrength: 3.5,
+//   //   bloomStrength: 0,
+//   bloomRadius: 0.39,
+//   color0: [15, 0, 10],
+//   color1: [13, 6, 5],
+//   color2: [137, 56, 10],
+//   color3: [166, 166, 166],
+//   color4: [237, 149, 67],
+//   color5: [20, 0, 51],
+// };
+let gui = new dat.GUI();
+
+let bloom = gui.addFolder("Bloom");
+bloom.add(options, "bloomStrength", 0.0, 5.0).name("bloomStrength").listen();
+bloom.add(options, "bloomRadius", 0.1, 2.0).name("bloomRadius").listen();
+bloom.open();
+
+let color = gui.addFolder("Colors");
+color.addColor(options, "color0").name("ball0");
+color.addColor(options, "color1").name("ball1");
+color.addColor(options, "color2").name("ball2");
+color.addColor(options, "color4").name("steam");
+color.addColor(options, "color5").name("trail");
+color.open();
+gui.close();
+
+let scene,
+	camera,
+	renderer,
+	controls,
+	material,
+	material2,
+	material3,
+	bloomPass,
+	bloomComposer,
+	composer,
+	finalPass,
+	finalComposer;
+const width = window.innerWidth,
+	height = window.innerHeight;
+
+function init() {
+	createScene();
+	postProc();
+	mesh();
+	flame();
+	cylinder();
+	animatBloom();
+}
+
+function createScene() {
+	scene = new THREE.Scene();
+	camera = new THREE.PerspectiveCamera(
+		75,
+		window.innerWidth / window.innerHeight,
+		0.1,
+		1000
+	);
+	camera.position.set(3.4369982203815655, 3.5239085092722098, 2.994862383531814);
+	renderer = new THREE.WebGLRenderer();
+	renderer.antialias = true;
+	renderer.setClearColor(new THREE.Color('#000'));
+	renderer.setPixelRatio(window.devicePixelRatio);
+	renderer.setSize(width, height);
+	controls = new OrbitControls(camera, renderer.domElement);
+	document.getElementById("world").appendChild(renderer.domElement);
+}
+
+function postProc() {
+	const renderScene = new RenderPass(scene, camera);
+	bloomPass = new UnrealBloomPass(
+		new THREE.Vector2(window.innerWidth, window.innerHeight),
+		1.5,
+		0.4,
+		0.85
+	);
+	bloomPass.threshold = options.bloomThreshold;
+	bloomPass.strength = options.bloomStrength;
+	bloomPass.radius = options.bloomRadius;
+
+	bloomComposer = new EffectComposer(renderer);
+	bloomComposer.addPass(renderScene);
+	bloomComposer.addPass(bloomPass);
+}
+
+function mesh() {
+	const geometry = new THREE.SphereBufferGeometry(1, 30, 30);
+	material = new THREE.ShaderMaterial({
+		uniforms: {
+			time: {
+				type: "f",
+				value: 0.0
+			},
+			perlinnoise: {
+				type: "t",
+				value: new THREE.TextureLoader().load(
+					"https://raw.githubusercontent.com/pizza3/asset/master/noise9.jpg"
+				)
+			},
+			sparknoise: {
+				type: "t",
+				value: new THREE.TextureLoader().load(
+					"https://raw.githubusercontent.com/pizza3/asset/master/sparklenoise.jpg"
+				)
+			},
+			color5: {
+				value: new THREE.Vector3(...options.color5)
+			},
+			color4: {
+				value: new THREE.Vector3(...options.color4)
+			},
+			color3: {
+				value: new THREE.Vector3(...options.color3)
+			},
+			color2: {
+				value: new THREE.Vector3(...options.color2)
+			},
+			color1: {
+				value: new THREE.Vector3(...options.color1)
+			},
+			color0: {
+				value: new THREE.Vector3(...options.color0)
+			},
+			resolution: { value: new THREE.Vector2(width, height) }
+		},
+		vertexShader: vert,
+		fragmentShader: frag
+	});
+
+	const mesh = new THREE.Mesh(geometry, material);
+	mesh.scale.set(0.78, 0.78, 0.78);
+	mesh.position.set(1 + 0, 0, 0);
+	scene.add(mesh);
+}
+
+function cylinder() {
+	const geometry = new THREE.CylinderBufferGeometry(1.11, 0, 5.3, 50, 50, true);
+	material2 = new THREE.ShaderMaterial({
+		uniforms: {
+			perlinnoise: {
+				type: "t",
+				value: new THREE.TextureLoader().load(
+					"https://raw.githubusercontent.com/pizza3/asset/master/water-min.jpg"
+				)
+			},
+			color4: {
+				value: new THREE.Vector3(...options.color4)
+			},
+			time: {
+				type: "f",
+				value: 0.0
+			},
+			noise: {
+				type: "t",
+				value: new THREE.TextureLoader().load(
+					"https://raw.githubusercontent.com/pizza3/asset/master/noise9.jpg"
+				)
+			}
+		},
+		// wireframe:true,
+		vertexShader: vertcylinder,
+		fragmentShader: fragcylinder,
+		transparent: true,
+		depthWrite: false,
+		side: THREE.DoubleSide
+	});
+
+	const mesh = new THREE.Mesh(geometry, material2);
+	mesh.rotation.set(0, 0, -Math.PI / 2);
+	mesh.position.set(1 + -4.05, 0, 0);
+	mesh.scale.set(1.5, 1.7, 1.5);
+	scene.add(mesh);
+}
+
+function flame() {
+	const geometry = new THREE.CylinderBufferGeometry(1, 0, 5.3, 50, 50, true);
+	material3 = new THREE.ShaderMaterial({
+		uniforms: {
+			perlinnoise: {
+				type: "t",
+				value: new THREE.TextureLoader().load(
+					"https://raw.githubusercontent.com/pizza3/asset/master/water-min.jpg"
+				)
+			},
+			color4: {
+				value: new THREE.Vector3(...options.color5)
+			},
+			time: {
+				type: "f",
+				value: 0.0
+			},
+			noise: {
+				type: "t",
+				value: new THREE.TextureLoader().load(
+					"https://raw.githubusercontent.com/pizza3/asset/master/noise9.jpg"
+				)
+			}
+		},
+		// wireframe:true,
+		vertexShader: vertflame,
+		fragmentShader: fragflame,
+		transparent: true,
+		depthWrite: false,
+		side: THREE.DoubleSide
+	});
+
+	const mesh = new THREE.Mesh(geometry, material3);
+	mesh.rotation.set(0, 0, -Math.PI / 2);
+	mesh.position.set(1 + -4.78, 0, 0);
+	mesh.scale.set(2, 2, 2);
+	scene.add(mesh);
+}
+
+function updateDraw(deltaTime) {
+	material.uniforms.time.value = -deltaTime / (1000 * 2);
+	material2.uniforms.time.value = -deltaTime / (3000 * 2);
+	material3.uniforms.time.value = -deltaTime / (3000 * 2);
+	material.uniforms.color5.value = new THREE.Vector3(...options.color5);
+	material2.uniforms.color4.value = new THREE.Vector3(...options.color4);
+	material3.uniforms.color4.value = new THREE.Vector3(...options.color5);
+	material.uniforms.color3.value = new THREE.Vector3(...options.color3);
+	material.uniforms.color2.value = new THREE.Vector3(...options.color2);
+	material.uniforms.color1.value = new THREE.Vector3(...options.color1);
+	material.uniforms.color0.value = new THREE.Vector3(...options.color0);
+}
+
+
+
+function animatBloom(deltaTime) {
+	requestAnimationFrame(animatBloom);
+	updateDraw(deltaTime);
+	controls.update();
+	bloomPass.strength = options.bloomStrength;
+	bloomPass.radius = options.bloomRadius;
+	bloomComposer.render();
+}
+
+
+function handleResize() {
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+	renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+window.addEventListener("load", init);
+window.addEventListener("resize", handleResize, false);
diff --git a/toon-fireball/src/style.css b/toon-fireball/src/style.css
new file mode 100644
index 0000000..da5b6fc
--- /dev/null
+++ b/toon-fireball/src/style.css
@@ -0,0 +1,5 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
diff --git a/tracked-session-schedule-with-css-grid-v1/README.markdown b/tracked-session-schedule-with-css-grid-v1/README.markdown
new file mode 100644
index 0000000..3cc6bb1
--- /dev/null
+++ b/tracked-session-schedule-with-css-grid-v1/README.markdown
@@ -0,0 +1,4 @@
+# Tracked Session Schedule with CSS Grid v1
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/mrwweb/pen/ZaONLW](https://codepen.io/mrwweb/pen/ZaONLW).
+
+ 
\ No newline at end of file
diff --git a/tracked-session-schedule-with-css-grid-v1/dist/index.html b/tracked-session-schedule-with-css-grid-v1/dist/index.html
new file mode 100644
index 0000000..c4086b1
--- /dev/null
+++ b/tracked-session-schedule-with-css-grid-v1/dist/index.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Tracked Session Schedule with CSS Grid v1</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="text">
+	
+	<h1>Attempting to build a CSS Grid Schedule</h1>
+	
+	<p class="meta">By <a href="https://mrwweb.com">Mark Root-Wiley</a> | <a href="#description">See below for details</a></p>
+	
+	<hr>
+	
+</div>
+
+<div class="schedule">
+	
+	<span class="track-slot" aria-hidden="true" style="grid-column: track-1; grid-row: tracks;">Track 1</span>
+	<span class="track-slot" aria-hidden="true" style="grid-column: track-2; grid-row: tracks;">Track 2</span>
+	<span class="track-slot" aria-hidden="true" style="grid-column: track-3; grid-row: tracks;">Track 3</span>
+	<span class="track-slot" aria-hidden="true" style="grid-column: track-4; grid-row: tracks;">Track 4</span>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-0800;">8:00am</h2>
+
+	<div class="session session-1 track-1" style="grid-column: track-1; grid-row: time-0800 / time-0900;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">8:00 - 9:00</span>
+		<span class="track">Track: 1</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<div class="session session-2 track-2" style="grid-column: track-2-start; grid-row: time-0800 / time-0900;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">8:00 - 9:00</span>
+		<span class="track">Track: 2</span>
+		<span class="author">Mike Rofone</span>
+	</div>	
+	
+	<div class="session session-3 track-3" style="grid-column: track-3-start; grid-row: time-0800 / time-0830;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">8:00 - 8:30</span>
+		<span class="track">Track: 3</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<div class="session session-4 track-4" style="grid-column: track-4-start; grid-row: time-0800 / time-1000;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">8:00 - 10:00</span>
+		<span class="track">Track: 2</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-0830;">8:30am</h2>
+	
+	<div class="session session-5 track-3" style="grid-column: track-3-start; grid-row: time-0830 / time-1000;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">8:30 - 10:00</span>
+		<span class="track">Track: 1</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-0900;">9:00am</h2>
+	
+	<div class="session session-6 track-1" style="grid-column: track-1-start / track-2-end; grid-row: time-0900 / time-1000;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">9:00 - 10:00</span>
+		<span class="track">Track: 1</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-1000;">10:00am</h2>
+	
+	<div class="session session-7 track-many" style="grid-column: track-1-start / track-4-end; grid-row: time-1000 / time-1030;">
+		<h3 class="title">Take a break!</h3>
+	</div>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-1030;">10:30am</h2>
+	
+	<div class="session session-8 track-1" style="grid-column: track-1-start; grid-row: time-1030 / time-1130;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">10:30 - 11:30</span>
+		<span class="track">Track: 1</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<div class="session session-9 track-2" style="grid-column: track-2-start; grid-row: time-1030 / time-1230;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">10:30 - 12:30</span>
+		<span class="track">Track: 2</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<div class="session session-10 track-4" style="grid-column: track-4-start; grid-row: time-1030 / time-1100;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">10:30 - 11:0</span>
+		<span class="track">Track: 4</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-1100;">11:00am</h2>
+	
+	<div class="session session-11 track-3" style="grid-column: track-3-start; grid-row: time-1100 / time-1130;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">11:00 - 11:30</span>
+		<span class="track">Track: 3</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-1130;">11:30am</h2>
+	
+	<div class="session track-1 track-many" style="grid-column: track-1-start; grid-row: time-1130 / time-1230;">
+		<h3 class="title">Lunch!</h3>
+	</div>
+	
+		<div class="session track-3 track-4 track-many" style="grid-column: track-3-start / track-4-end; grid-row: time-1130 / time-1230;">
+		<h3 class="title">Lunch!</h3>
+	</div>
+	
+</div>
+
+<div class="text" id="description">
+	<hr>
+	<h2>Background &amp; Inspiration</h2>
+	<p>This project is inspired by the WordCamp.org schedule building tool and its shortcomings. <a href="https://meta.trac.wordpress.org/ticket/3117">Meta trac ticket #3117</a> is tracking improvements to the schedule builder and layout.</p>
+	<p>With the intention of implementing this via a CMS, I'm attempting to create a schedule layout capable of automatic generation from session metadata ("track," start time, and end time). This is primarily achieved through the use of named grid-lines for tracks and time slots. Inspiration is due to <a href="https://css-tricks.com/making-a-bar-chart-with-css-grid/">"Making a Bar Chart with CSS Grid."</a></p>
+	<p>Edge-cases currently supported:</p>
+	<ul>
+		<li>Sessions spanning any length of time. (For ease of reading, this demo only supports 30-minute increments, but this could easily be adapted for the 5-minute increments allowed by WordCamp.org sites.)</li>
+		<li>Gaps between sessions during sessions without similar gaps</li>
+		<li>Sessions spanning multiple contiguous tracks</li>
+	</ul>
+	<p>Edge-cases <em>not</em> supported:</p>
+	<ul>
+		<li>Sessions spanning multiple, <em>non-contiguous</em> tracks (though future improvements to CSS Grid may allow this)</li>
+		<li>Overlapping session times within the same track</li>
+	</ul>
+	
+	<h2>Fallbacks & Accessibility</h2>
+	
+	<p>Note that the source order is based on <em>start time</em> and not as it may appear when simply reading left-to-right in the grid (see the Session #s which align with source order). This is presumably a good thing as it means that the non-grid fallback (similar to the current schedule mobile view) and output read to screen readers is chronological. Each time in the left column is a Heading 2 with session titles being Heading 3s, producing the following document outline:</p>
+	<ul>
+		<li>1: Page Title
+			<ul>
+				<li>2: Time
+					<ul><li>3: {Sessions}</li></ul>
+				</li>
+				<li>2: Time
+					<ul><li>3: {Sessions}</li></ul>
+				</li>
+				<li>2: Time
+					<ul><li>3: {Sessions}</li></ul>
+				</li>
+			</ul>
+		</li>
+	</ul>
+	
+	<h2>Other Notes</h2>
+	<ul>
+		<li>By using the <code>fr</code> unit for <code>grid-template-rows</code>, each session's height visually aligns with its length. A more compact but less clear view can be achieved with the <code>auto</code> keyword instead of <code>fr</code>.</li>
+		<li>Due to the nature of the <code>fr</code> unit and the variable number of tracks, the CSS grid template rules will need to be generated dynamically so they only span the time between the first and last session. This shouldn't be too hard, but it's worth noting here.</li>
+		<li>The source order of the session details is important but can be safely rearranged within the "card" via grid or flexbox for lots of creative layouts. Presumably the session time (in the session blocks) and track could be visually [accessibly] hidden if desired by the themer.</li>
+	</ul>
+	<h2>In-progress list of implementation requirements:</h2>
+	<ul>
+		<li>The major admin-side change required for this schedule is that <strong>it requires site editors to specify either an end time or length of the session</strong>. For the purposes of display, an end time is slightly more valuable, though could just as easily be generated from a session length which is probably easier for users to enter.
+			<ul>
+				<li>The layout CSS code for each session requires a modified version of the start and end times: <code>time-hhmm</code> specified in 24hr time.</li>
+				<li><ins>Following some discussion on Slack, the current plan is to use a new required Length field with a sensible default. Changing the value will update the default value for future sessions.</ins></li>
+			</ul>
+		</li>
+		<li>The grid CSS will need to be uniquely generated for each session schedule. That likely means outputting an inline style block using a prefixed class associated with that schedule (in case multiple schedules appear on the same page, a common occurrence, e.g. Saturday & Sunday schedules). Each grid template outputs named lines in the format <code>time-hhmm</code> for 5 minute increments starting at the first session and ending at the last session. (This demo only uses 30 minute increments as a proof-of-concept.) Each line is separated either with <code>1fr</code> or <code>auto</code> as the length between.</li>
+		<li>Tracks similarly use named lines though with an extra name so that each track has both a defined start and end line.</li>
+		<li>As mentioned above, the session source order is:
+			<ul>
+				<li>Heading 2 containing start time</li>
+				<li>All sessions with that start time. Session title = Heading 3.</li>
+				<li>Heading 2 with next start time</li>
+				<li><em>etc&hellip;</em></li>
+			</ul></li>
+		<li>For styling, each session should be given a unique class and a class for what track it's in, possibly with an additional class for any session in multiple tracks.</li>
+	</ul>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/tracked-session-schedule-with-css-grid-v1/dist/style.css b/tracked-session-schedule-with-css-grid-v1/dist/style.css
new file mode 100644
index 0000000..73669d5
--- /dev/null
+++ b/tracked-session-schedule-with-css-grid-v1/dist/style.css
@@ -0,0 +1,163 @@
+/*************************
+ * LAYOUT
+ *************************/
+body {
+	padding: 50px;
+	counter-reset: session;
+	max-width: 1100px;
+	margin: 0 auto;
+	line-height: 1.5;
+}
+
+.track-slot {
+	display: none;
+}
+.session {
+	margin-bottom:  1em;
+}
+
+@supports( display:grid ) {
+	@media screen and (min-width:700px) {
+		.schedule {
+			display: grid;
+		}
+		
+		/* a background for the sticky tracks */
+		.schedule::after {
+			display: block;
+			content: '';
+			position: -webkit-sticky;
+			position: sticky;
+			top: 0;
+			grid-column: track-1 / -1;
+			grid-row: tracks;
+			z-index: 999;
+			background-color: rgba(255,255,255,.9);
+		}
+		
+		.track-slot {
+			display: block;
+			padding: 10px 5px 5px;
+			position: -webkit-sticky;
+			position: sticky;
+			top: 0; /* otherwise seeing a gap above in at least Firefox. */
+			z-index: 1000;
+		}
+		.session {
+			margin: 0;
+		}
+	}
+}
+
+.schedule {
+	grid-gap: 1em;
+	grid-template-rows:
+		[tracks] auto
+		[time-0800] 1fr
+		[time-0830] 1fr
+		[time-0900] 1fr
+		[time-0930] 1fr
+		[time-1000] 1fr
+		[time-1030] 1fr
+		[time-1100] 1fr
+		[time-1130] 1fr
+		[time-1200] 1fr
+	 /* Note 1:
+		In this format, gridlines will need to be "named" in 24hr time
+	
+		Note 2: Use "auto" instead of "1fr" for a more compact schedule where height of a slot is not proportional to the session length. Implementing a "compact" shortcode attribute might make sense for this!
+	*/
+	;
+	grid-template-columns:
+		[times] 4em
+		[track-1-start] 1fr
+		[track-1-end track-2-start] 1fr
+		[track-2-end track-3-start] 1fr
+		[track-3-end track-4-start] 1fr
+		[track-4-end]
+	;
+}
+
+/*************************
+ * VISUAL STYLES
+ *************************/
+.text {
+	max-width: 750px;
+	font-size: 18px;
+	margin: 0 auto 50px;
+}
+
+.meta {
+	color: #555;
+	font-style: italic;
+}
+.meta a {
+	color: #555;
+}
+
+hr {
+	margin: 40px 0;
+}
+
+.session {
+	padding: .5em;
+	border-radius: 2px;
+	font-size: 14px;
+}
+
+.title,
+.time-slot {
+	margin: 0;
+	font-size: 1em;
+}
+
+body {
+	counter-reset: session-count;
+}
+.title::before {
+	counter-increment: session-count;
+	content: 'Session #' counter(session-count) ': ';
+}
+
+.track-slot,
+.time-slot {
+	font-weight: bold;
+	font-size:.75em;
+}
+
+span {
+	display: block;
+}
+
+.track-1 {
+	background-color: #1259B2;
+	color: #fff;
+}
+
+.track-2 {
+	background-color: #687f00;
+	color: #fff;
+}
+
+.track-3 {
+	background-color: #544D69;
+	color: #fff;
+}
+
+.track-4 {
+	background-color: #c35500;
+	color: #fff;
+}
+
+.track-many {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: #ccc;
+	color: #000;
+}
+
+ins {
+	text-decoration: none;
+	background-color: #ddffdd;
+}
\ No newline at end of file
diff --git a/tracked-session-schedule-with-css-grid-v1/license.txt b/tracked-session-schedule-with-css-grid-v1/license.txt
new file mode 100644
index 0000000..3dabab9
--- /dev/null
+++ b/tracked-session-schedule-with-css-grid-v1/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Mark Root-Wiley (https://codepen.io/mrwweb/pen/ZaONLW)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/tracked-session-schedule-with-css-grid-v1/src/index.html b/tracked-session-schedule-with-css-grid-v1/src/index.html
new file mode 100644
index 0000000..865cefc
--- /dev/null
+++ b/tracked-session-schedule-with-css-grid-v1/src/index.html
@@ -0,0 +1,177 @@
+<div class="text">
+	
+	<h1>Attempting to build a CSS Grid Schedule</h1>
+	
+	<p class="meta">By <a href="https://mrwweb.com">Mark Root-Wiley</a> | <a href="#description">See below for details</a></p>
+	
+	<hr>
+	
+</div>
+
+<div class="schedule">
+	
+	<span class="track-slot" aria-hidden="true" style="grid-column: track-1; grid-row: tracks;">Track 1</span>
+	<span class="track-slot" aria-hidden="true" style="grid-column: track-2; grid-row: tracks;">Track 2</span>
+	<span class="track-slot" aria-hidden="true" style="grid-column: track-3; grid-row: tracks;">Track 3</span>
+	<span class="track-slot" aria-hidden="true" style="grid-column: track-4; grid-row: tracks;">Track 4</span>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-0800;">8:00am</h2>
+
+	<div class="session session-1 track-1" style="grid-column: track-1; grid-row: time-0800 / time-0900;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">8:00 - 9:00</span>
+		<span class="track">Track: 1</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<div class="session session-2 track-2" style="grid-column: track-2-start; grid-row: time-0800 / time-0900;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">8:00 - 9:00</span>
+		<span class="track">Track: 2</span>
+		<span class="author">Mike Rofone</span>
+	</div>	
+	
+	<div class="session session-3 track-3" style="grid-column: track-3-start; grid-row: time-0800 / time-0830;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">8:00 - 8:30</span>
+		<span class="track">Track: 3</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<div class="session session-4 track-4" style="grid-column: track-4-start; grid-row: time-0800 / time-1000;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">8:00 - 10:00</span>
+		<span class="track">Track: 2</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-0830;">8:30am</h2>
+	
+	<div class="session session-5 track-3" style="grid-column: track-3-start; grid-row: time-0830 / time-1000;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">8:30 - 10:00</span>
+		<span class="track">Track: 1</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-0900;">9:00am</h2>
+	
+	<div class="session session-6 track-1" style="grid-column: track-1-start / track-2-end; grid-row: time-0900 / time-1000;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">9:00 - 10:00</span>
+		<span class="track">Track: 1</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-1000;">10:00am</h2>
+	
+	<div class="session session-7 track-many" style="grid-column: track-1-start / track-4-end; grid-row: time-1000 / time-1030;">
+		<h3 class="title">Take a break!</h3>
+	</div>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-1030;">10:30am</h2>
+	
+	<div class="session session-8 track-1" style="grid-column: track-1-start; grid-row: time-1030 / time-1130;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">10:30 - 11:30</span>
+		<span class="track">Track: 1</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<div class="session session-9 track-2" style="grid-column: track-2-start; grid-row: time-1030 / time-1230;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">10:30 - 12:30</span>
+		<span class="track">Track: 2</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<div class="session session-10 track-4" style="grid-column: track-4-start; grid-row: time-1030 / time-1100;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">10:30 - 11:0</span>
+		<span class="track">Track: 4</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-1100;">11:00am</h2>
+	
+	<div class="session session-11 track-3" style="grid-column: track-3-start; grid-row: time-1100 / time-1130;">
+		<h3 class="title">Talk Title</h3>
+		<span class="time">11:00 - 11:30</span>
+		<span class="track">Track: 3</span>
+		<span class="author">Mike Rofone</span>
+	</div>
+	
+	<h2 class="time-slot" style="grid-column: times; grid-row: time-1130;">11:30am</h2>
+	
+	<div class="session track-1 track-many" style="grid-column: track-1-start; grid-row: time-1130 / time-1230;">
+		<h3 class="title">Lunch!</h3>
+	</div>
+	
+		<div class="session track-3 track-4 track-many" style="grid-column: track-3-start / track-4-end; grid-row: time-1130 / time-1230;">
+		<h3 class="title">Lunch!</h3>
+	</div>
+	
+</div>
+
+<div class="text" id="description">
+	<hr>
+	<h2>Background &amp; Inspiration</h2>
+	<p>This project is inspired by the WordCamp.org schedule building tool and its shortcomings. <a href="https://meta.trac.wordpress.org/ticket/3117">Meta trac ticket #3117</a> is tracking improvements to the schedule builder and layout.</p>
+	<p>With the intention of implementing this via a CMS, I'm attempting to create a schedule layout capable of automatic generation from session metadata ("track," start time, and end time). This is primarily achieved through the use of named grid-lines for tracks and time slots. Inspiration is due to <a href="https://css-tricks.com/making-a-bar-chart-with-css-grid/">"Making a Bar Chart with CSS Grid."</a></p>
+	<p>Edge-cases currently supported:</p>
+	<ul>
+		<li>Sessions spanning any length of time. (For ease of reading, this demo only supports 30-minute increments, but this could easily be adapted for the 5-minute increments allowed by WordCamp.org sites.)</li>
+		<li>Gaps between sessions during sessions without similar gaps</li>
+		<li>Sessions spanning multiple contiguous tracks</li>
+	</ul>
+	<p>Edge-cases <em>not</em> supported:</p>
+	<ul>
+		<li>Sessions spanning multiple, <em>non-contiguous</em> tracks (though future improvements to CSS Grid may allow this)</li>
+		<li>Overlapping session times within the same track</li>
+	</ul>
+	
+	<h2>Fallbacks & Accessibility</h2>
+	
+	<p>Note that the source order is based on <em>start time</em> and not as it may appear when simply reading left-to-right in the grid (see the Session #s which align with source order). This is presumably a good thing as it means that the non-grid fallback (similar to the current schedule mobile view) and output read to screen readers is chronological. Each time in the left column is a Heading 2 with session titles being Heading 3s, producing the following document outline:</p>
+	<ul>
+		<li>1: Page Title
+			<ul>
+				<li>2: Time
+					<ul><li>3: {Sessions}</li></ul>
+				</li>
+				<li>2: Time
+					<ul><li>3: {Sessions}</li></ul>
+				</li>
+				<li>2: Time
+					<ul><li>3: {Sessions}</li></ul>
+				</li>
+			</ul>
+		</li>
+	</ul>
+	
+	<h2>Other Notes</h2>
+	<ul>
+		<li>By using the <code>fr</code> unit for <code>grid-template-rows</code>, each session's height visually aligns with its length. A more compact but less clear view can be achieved with the <code>auto</code> keyword instead of <code>fr</code>.</li>
+		<li>Due to the nature of the <code>fr</code> unit and the variable number of tracks, the CSS grid template rules will need to be generated dynamically so they only span the time between the first and last session. This shouldn't be too hard, but it's worth noting here.</li>
+		<li>The source order of the session details is important but can be safely rearranged within the "card" via grid or flexbox for lots of creative layouts. Presumably the session time (in the session blocks) and track could be visually [accessibly] hidden if desired by the themer.</li>
+	</ul>
+	<h2>In-progress list of implementation requirements:</h2>
+	<ul>
+		<li>The major admin-side change required for this schedule is that <strong>it requires site editors to specify either an end time or length of the session</strong>. For the purposes of display, an end time is slightly more valuable, though could just as easily be generated from a session length which is probably easier for users to enter.
+			<ul>
+				<li>The layout CSS code for each session requires a modified version of the start and end times: <code>time-hhmm</code> specified in 24hr time.</li>
+				<li><ins>Following some discussion on Slack, the current plan is to use a new required Length field with a sensible default. Changing the value will update the default value for future sessions.</ins></li>
+			</ul>
+		</li>
+		<li>The grid CSS will need to be uniquely generated for each session schedule. That likely means outputting an inline style block using a prefixed class associated with that schedule (in case multiple schedules appear on the same page, a common occurrence, e.g. Saturday & Sunday schedules). Each grid template outputs named lines in the format <code>time-hhmm</code> for 5 minute increments starting at the first session and ending at the last session. (This demo only uses 30 minute increments as a proof-of-concept.) Each line is separated either with <code>1fr</code> or <code>auto</code> as the length between.</li>
+		<li>Tracks similarly use named lines though with an extra name so that each track has both a defined start and end line.</li>
+		<li>As mentioned above, the session source order is:
+			<ul>
+				<li>Heading 2 containing start time</li>
+				<li>All sessions with that start time. Session title = Heading 3.</li>
+				<li>Heading 2 with next start time</li>
+				<li><em>etc&hellip;</em></li>
+			</ul></li>
+		<li>For styling, each session should be given a unique class and a class for what track it's in, possibly with an additional class for any session in multiple tracks.</li>
+	</ul>
+</div>
\ No newline at end of file
diff --git a/tracked-session-schedule-with-css-grid-v1/src/style.css b/tracked-session-schedule-with-css-grid-v1/src/style.css
new file mode 100644
index 0000000..ea412d5
--- /dev/null
+++ b/tracked-session-schedule-with-css-grid-v1/src/style.css
@@ -0,0 +1,161 @@
+/*************************
+ * LAYOUT
+ *************************/
+body {
+	padding: 50px;
+	counter-reset: session;
+	max-width: 1100px;
+	margin: 0 auto;
+	line-height: 1.5;
+}
+
+.track-slot {
+	display: none;
+}
+.session {
+	margin-bottom:  1em;
+}
+
+@supports( display:grid ) {
+	@media screen and (min-width:700px) {
+		.schedule {
+			display: grid;
+		}
+		
+		/* a background for the sticky tracks */
+		.schedule::after {
+			display: block;
+			content: '';
+			position: sticky;
+			top: 0;
+			grid-column: track-1 / -1;
+			grid-row: tracks;
+			z-index: 999;
+			background-color: rgba(255,255,255,.9);
+		}
+		
+		.track-slot {
+			display: block;
+			padding: 10px 5px 5px;
+			position: sticky;
+			top: 0; /* otherwise seeing a gap above in at least Firefox. */
+			z-index: 1000;
+		}
+		.session {
+			margin: 0;
+		}
+	}
+}
+
+.schedule {
+	grid-gap: 1em;
+	grid-template-rows:
+		[tracks] auto
+		[time-0800] 1fr
+		[time-0830] 1fr
+		[time-0900] 1fr
+		[time-0930] 1fr
+		[time-1000] 1fr
+		[time-1030] 1fr
+		[time-1100] 1fr
+		[time-1130] 1fr
+		[time-1200] 1fr
+	 /* Note 1:
+		In this format, gridlines will need to be "named" in 24hr time
+	
+		Note 2: Use "auto" instead of "1fr" for a more compact schedule where height of a slot is not proportional to the session length. Implementing a "compact" shortcode attribute might make sense for this!
+	*/
+	;
+	grid-template-columns:
+		[times] 4em
+		[track-1-start] 1fr
+		[track-1-end track-2-start] 1fr
+		[track-2-end track-3-start] 1fr
+		[track-3-end track-4-start] 1fr
+		[track-4-end]
+	;
+}
+
+/*************************
+ * VISUAL STYLES
+ *************************/
+.text {
+	max-width: 750px;
+	font-size: 18px;
+	margin: 0 auto 50px;
+}
+
+.meta {
+	color: #555;
+	font-style: italic;
+}
+.meta a {
+	color: #555;
+}
+
+hr {
+	margin: 40px 0;
+}
+
+.session {
+	padding: .5em;
+	border-radius: 2px;
+	font-size: 14px;
+}
+
+.title,
+.time-slot {
+	margin: 0;
+	font-size: 1em;
+}
+
+body {
+	counter-reset: session-count;
+}
+.title::before {
+	counter-increment: session-count;
+	content: 'Session #' counter(session-count) ': ';
+}
+
+.track-slot,
+.time-slot {
+	font-weight: bold;
+	font-size:.75em;
+}
+
+span {
+	display: block;
+}
+
+.track-1 {
+	background-color: #1259B2;
+	color: #fff;
+}
+
+.track-2 {
+	background-color: #687f00;
+	color: #fff;
+}
+
+.track-3 {
+	background-color: #544D69;
+	color: #fff;
+}
+
+.track-4 {
+	background-color: #c35500;
+	color: #fff;
+}
+
+.track-many {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: #ccc;
+	color: #000;
+}
+
+ins {
+	text-decoration: none;
+	background-color: #ddffdd;
+}
\ No newline at end of file
diff --git a/travel/README.markdown b/travel/README.markdown
new file mode 100644
index 0000000..868f18b
--- /dev/null
+++ b/travel/README.markdown
@@ -0,0 +1,4 @@
+# Travel
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/kathykato/pen/MqYVOq](https://codepen.io/kathykato/pen/MqYVOq).
+
+ Travel landing page made with Flexbox and CSS Grid.
\ No newline at end of file
diff --git a/travel/dist/https___raw_githubusercon.css b/travel/dist/https___raw_githubusercon.css
new file mode 100644
index 0000000..7faa097
--- /dev/null
+++ b/travel/dist/https___raw_githubusercon.css
@@ -0,0 +1,143 @@
+/* 12columns.css | Created by Katherine Kato | Released under the MIT license */
+
+$grid-columns: 12;
+
+$sm: 48rem;
+$md: 62rem;
+$lg: 75rem;
+
+.container {
+  margin: auto;
+  padding: 0 1rem;
+  max-width: 71.25rem;
+  width: 100%;
+}
+
+.grid {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  > [class*="column-"] {
+    display: block;
+  }
+}
+
+.first {
+  -webkit-box-ordinal-group: 0;
+  -ms-flex-order: -1;
+  order: -1;
+}
+
+.last {
+  -webkit-box-ordinal-group: 13;
+  -ms-flex-order: 12;
+  order: 12;
+}
+
+.align-top {
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+}
+
+.align-center {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.align-bottom {
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: end;
+}
+
+@for $i from 1 through $grid-columns {
+  .column-xs-#{$i} {
+    -ms-flex-preferred-size: $i / $grid-columns * 100%;
+    flex-basis: $i / $grid-columns * 100%;
+    max-width: $i / $grid-columns * 100%;
+  }
+}
+
+@media (min-width: $sm) {
+  @for $i from 1 through $grid-columns {
+    .column-sm-#{$i} {
+      -ms-flex-preferred-size: $i / $grid-columns * 100%;
+      flex-basis: $i / $grid-columns * 100%;
+      max-width: $i / $grid-columns * 100%;
+    }
+  }
+}
+
+@media (min-width: $md) {
+  @for $i from 1 through $grid-columns {
+    .column-md-#{$i} {
+      -ms-flex-preferred-size: $i / $grid-columns * 100%;
+      flex-basis: $i / $grid-columns * 100%;
+      max-width: $i / $grid-columns * 100%;
+    }
+  }
+}
+
+@media (min-width: $lg) {
+  @for $i from 1 through $grid-columns {
+    .column-lg-#{$i} {
+      -ms-flex-preferred-size: $i / $grid-columns * 100%;
+      flex-basis: $i / $grid-columns * 100%;
+      max-width: $i / $grid-columns * 100%;
+    }
+  }
+}
+
+@supports (display: grid) {
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-template-rows: auto;
+    > [class*="column-"] {
+      margin: 0;
+      max-width: 100%;
+    }
+  }
+
+  @for $i from 1 through $grid-columns {
+    .column-xs-#{$i} {
+      grid-column-start: span #{$i};
+      grid-column-end: span #{$i};
+    }
+  }
+
+  @media(min-width: $sm) {
+    @for $i from 1 through $grid-columns {
+      .column-sm-#{$i} {
+        grid-column-start: span #{$i};
+        grid-column-end: span #{$i};
+      }
+    }
+  }
+
+  @media(min-width: $md) {
+    @for $i from 1 through $grid-columns {
+      .column-md-#{$i} {
+        grid-column-start: span #{$i};
+        grid-column-end: span #{$i};
+      }
+    }
+  }
+
+  @media(min-width: $lg) {
+    @for $i from 1 through $grid-columns {
+      .column-lg-#{$i} {
+        grid-column-start: span #{$i};
+        grid-column-end: span #{$i};
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/travel/dist/index.html b/travel/dist/index.html
new file mode 100644
index 0000000..0a1170a
--- /dev/null
+++ b/travel/dist/index.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Travel</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='css/https___raw_githubusercon.css'>
+<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<nav class="flex-nav">
+  <div class="container">
+    <div class="grid">
+      <div class="column-xs-9 column-md-8">
+        <p id="logo">Japan<span id="highlight">.</span></p>
+      </div>
+      <div class="column-xs-3 column-md-4">
+        <a href="#" class="toggle-nav">Menu <i class="ion-navicon-round"></i></a>
+        <ul>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Discover</a></li>
+          <li><a href="#">Plan Your Trip</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</nav>
+<main class="intro-section">
+  <div class="container">
+    <div class="grid">
+      <div class="column-xs-12">
+        <ul class="slider">
+          <li class="slider-item active">
+            <div class="grid vertical">
+              <div class="column-xs-12 column-md-2 hide-mobile">
+                <div class="intro">
+                  <a href="#">
+                    <h1 class="title"><span class="underline">Explore Tokyo</span></h1>
+                  </a>
+                </div>
+              </div>
+              <div class="column-xs-12 column-md-10">
+                <div class="image-holder">
+                  <img src="https://source.unsplash.com/cddaZDt6uRw">
+                </div>
+                <div class="grid">
+                  <div class="column-xs-12 column-md-9">
+                    <div class="intro show-mobile">
+                      <a href="#">
+                        <h1 class="title"><span class="underline">Explore Tokyo</span></h1>
+                      </a>
+                    </div>
+                    <p class="description">Tokyo, Japan’s busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="slider-item">
+            <div class="grid vertical">
+              <div class="column-xs-12 column-md-2 hide-mobile">
+                <div class="intro">
+                  <a href="#">
+                    <h1 class="title"><span class="underline">Explore Kyoto</span></h1>
+                  </a>
+                </div>
+              </div>
+              <div class="column-xs-12 column-md-10">
+                <div class="image-holder">
+                  <img src="https://source.unsplash.com/Pz3EHf-KJfc">
+                </div>
+                <div class="grid">
+                  <div class="column-xs-12 column-md-9">
+                    <div class="intro show-mobile">
+                      <a href="#">
+                        <h1 class="title"><span class="underline">Explore Kyoto</span></h1>
+                      </a>
+                    </div>
+                    <p class="description">Kyoto is famous for its numerous classical Buddhist temples, gardens, imperial palaces, Shinto shrines and traditional wooden houses.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="slider-item">
+            <div class="grid vertical">
+              <div class="column-xs-12 column-md-2 hide-mobile">
+                <div class="intro">
+                  <a href="#">
+                     <h1 class="title"><span class="underline">Explore Osaka</span></h1>
+                  </a>
+                </div>
+              </div>
+              <div class="column-xs-12 column-md-10">
+                <div class="image-holder">
+                  <img src="https://source.unsplash.com/peYW3VwICpE">
+                </div>
+                <div class="grid">
+                  <div class="column-xs-12 column-md-9">
+                    <div class="intro show-mobile">
+                      <a href="#">
+                        <h1 class="title"><span class="underline">Explore Osaka</span></h1>
+                      </a>
+                    </div>
+                    <p class="description">Osaka is a large port city and commercial center known for its modern architecture, nightlife and hearty street food.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="slider-item">
+            <div class="grid vertical">
+              <div class="column-xs-12 column-md-2 hide-mobile">
+                <div class="intro">
+                  <a href="#">
+                    <h1 class="title"><span class="underline">Explore Hokkaido</span></h1>
+                  </a>
+                </div>
+              </div>
+              <div class="column-xs-12 column-md-10">
+                <div class="image-holder">
+                  <img src="https://source.unsplash.com/VmeOZQjTVGE">
+                </div>
+                <div class="grid">
+                  <div class="column-xs-12 column-md-9">
+                    <div class="intro show-mobile">
+                      <a href="#">
+                        <h1 class="title"><span class="underline">Explore Hokkaido</span></h1>
+                      </a>
+                    </div>
+                    <p class="description">Hokkaido, the northernmost of Japan’s main islands, is known for its volcanoes, natural hot springs ("onsen") and ski areas.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      <div class="grid">
+        <div class="column-xs-12">
+          <div class="controls">
+              <button class="previous">
+                <i class="ion-ios-arrow-thin-left"></i>
+              </a>
+              <button class="next">
+                <i class="ion-ios-arrow-thin-right"></i>
+              </a>
+            </div>
+          </div>
+      </div>
+    </div>
+  </div>
+</main>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/travel/dist/script.js b/travel/dist/script.js
new file mode 100644
index 0000000..e752e13
--- /dev/null
+++ b/travel/dist/script.js
@@ -0,0 +1,52 @@
+const items = document.querySelectorAll('.slider-item');
+const itemCount = items.length;
+const nextItem = document.querySelector('.next');
+const previousItem = document.querySelector('.previous');
+const navItem = document.querySelector('a.toggle-nav');
+let count = 0;
+
+function showNextItem() {
+  items[count].classList.remove('active');
+
+  if(count < itemCount - 1) {
+    count++;
+  } else {
+    count = 0;
+  }
+
+  items[count].classList.add('active');
+  console.log(count);
+}
+
+function showPreviousItem() {
+  items[count].classList.remove('active');
+
+  if(count > 0) {
+    count--;
+  } else {
+    count = itemCount - 1;
+  }
+
+  items[count].classList.add('active');
+  // Check if working...
+  console.log(count);
+}
+
+function toggleNavigation(){
+  this.nextElementSibling.classList.toggle('active');
+}
+
+function keyPress(e) {
+  e = e || window.event;
+  
+  if (e.keyCode == '37') {
+    showPreviousItem();
+  } else if (e.keyCode == '39') {
+    showNextItem();
+  }
+}
+
+nextItem.addEventListener('click', showNextItem);
+previousItem.addEventListener('click', showPreviousItem);
+document.addEventListener('keydown', keyPress);
+navItem.addEventListener('click', toggleNavigation);
\ No newline at end of file
diff --git a/travel/license.txt b/travel/license.txt
new file mode 100644
index 0000000..99e9745
--- /dev/null
+++ b/travel/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Katherine Kato (https://codepen.io/kathykato/pen/MqYVOq)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/travel/src/https___raw_githubusercon.css b/travel/src/https___raw_githubusercon.css
new file mode 100644
index 0000000..7faa097
--- /dev/null
+++ b/travel/src/https___raw_githubusercon.css
@@ -0,0 +1,143 @@
+/* 12columns.css | Created by Katherine Kato | Released under the MIT license */
+
+$grid-columns: 12;
+
+$sm: 48rem;
+$md: 62rem;
+$lg: 75rem;
+
+.container {
+  margin: auto;
+  padding: 0 1rem;
+  max-width: 71.25rem;
+  width: 100%;
+}
+
+.grid {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  > [class*="column-"] {
+    display: block;
+  }
+}
+
+.first {
+  -webkit-box-ordinal-group: 0;
+  -ms-flex-order: -1;
+  order: -1;
+}
+
+.last {
+  -webkit-box-ordinal-group: 13;
+  -ms-flex-order: 12;
+  order: 12;
+}
+
+.align-top {
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+}
+
+.align-center {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.align-bottom {
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: end;
+}
+
+@for $i from 1 through $grid-columns {
+  .column-xs-#{$i} {
+    -ms-flex-preferred-size: $i / $grid-columns * 100%;
+    flex-basis: $i / $grid-columns * 100%;
+    max-width: $i / $grid-columns * 100%;
+  }
+}
+
+@media (min-width: $sm) {
+  @for $i from 1 through $grid-columns {
+    .column-sm-#{$i} {
+      -ms-flex-preferred-size: $i / $grid-columns * 100%;
+      flex-basis: $i / $grid-columns * 100%;
+      max-width: $i / $grid-columns * 100%;
+    }
+  }
+}
+
+@media (min-width: $md) {
+  @for $i from 1 through $grid-columns {
+    .column-md-#{$i} {
+      -ms-flex-preferred-size: $i / $grid-columns * 100%;
+      flex-basis: $i / $grid-columns * 100%;
+      max-width: $i / $grid-columns * 100%;
+    }
+  }
+}
+
+@media (min-width: $lg) {
+  @for $i from 1 through $grid-columns {
+    .column-lg-#{$i} {
+      -ms-flex-preferred-size: $i / $grid-columns * 100%;
+      flex-basis: $i / $grid-columns * 100%;
+      max-width: $i / $grid-columns * 100%;
+    }
+  }
+}
+
+@supports (display: grid) {
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-template-rows: auto;
+    > [class*="column-"] {
+      margin: 0;
+      max-width: 100%;
+    }
+  }
+
+  @for $i from 1 through $grid-columns {
+    .column-xs-#{$i} {
+      grid-column-start: span #{$i};
+      grid-column-end: span #{$i};
+    }
+  }
+
+  @media(min-width: $sm) {
+    @for $i from 1 through $grid-columns {
+      .column-sm-#{$i} {
+        grid-column-start: span #{$i};
+        grid-column-end: span #{$i};
+      }
+    }
+  }
+
+  @media(min-width: $md) {
+    @for $i from 1 through $grid-columns {
+      .column-md-#{$i} {
+        grid-column-start: span #{$i};
+        grid-column-end: span #{$i};
+      }
+    }
+  }
+
+  @media(min-width: $lg) {
+    @for $i from 1 through $grid-columns {
+      .column-lg-#{$i} {
+        grid-column-start: span #{$i};
+        grid-column-end: span #{$i};
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/travel/src/index.html b/travel/src/index.html
new file mode 100644
index 0000000..4eb24b5
--- /dev/null
+++ b/travel/src/index.html
@@ -0,0 +1,142 @@
+<nav class="flex-nav">
+  <div class="container">
+    <div class="grid">
+      <div class="column-xs-9 column-md-8">
+        <p id="logo">Japan<span id="highlight">.</span></p>
+      </div>
+      <div class="column-xs-3 column-md-4">
+        <a href="#" class="toggle-nav">Menu <i class="ion-navicon-round"></i></a>
+        <ul>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Discover</a></li>
+          <li><a href="#">Plan Your Trip</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</nav>
+<main class="intro-section">
+  <div class="container">
+    <div class="grid">
+      <div class="column-xs-12">
+        <ul class="slider">
+          <li class="slider-item active">
+            <div class="grid vertical">
+              <div class="column-xs-12 column-md-2 hide-mobile">
+                <div class="intro">
+                  <a href="#">
+                    <h1 class="title"><span class="underline">Explore Tokyo</span></h1>
+                  </a>
+                </div>
+              </div>
+              <div class="column-xs-12 column-md-10">
+                <div class="image-holder">
+                  <img src="https://source.unsplash.com/cddaZDt6uRw">
+                </div>
+                <div class="grid">
+                  <div class="column-xs-12 column-md-9">
+                    <div class="intro show-mobile">
+                      <a href="#">
+                        <h1 class="title"><span class="underline">Explore Tokyo</span></h1>
+                      </a>
+                    </div>
+                    <p class="description">Tokyo, Japan’s busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="slider-item">
+            <div class="grid vertical">
+              <div class="column-xs-12 column-md-2 hide-mobile">
+                <div class="intro">
+                  <a href="#">
+                    <h1 class="title"><span class="underline">Explore Kyoto</span></h1>
+                  </a>
+                </div>
+              </div>
+              <div class="column-xs-12 column-md-10">
+                <div class="image-holder">
+                  <img src="https://source.unsplash.com/Pz3EHf-KJfc">
+                </div>
+                <div class="grid">
+                  <div class="column-xs-12 column-md-9">
+                    <div class="intro show-mobile">
+                      <a href="#">
+                        <h1 class="title"><span class="underline">Explore Kyoto</span></h1>
+                      </a>
+                    </div>
+                    <p class="description">Kyoto is famous for its numerous classical Buddhist temples, gardens, imperial palaces, Shinto shrines and traditional wooden houses.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="slider-item">
+            <div class="grid vertical">
+              <div class="column-xs-12 column-md-2 hide-mobile">
+                <div class="intro">
+                  <a href="#">
+                     <h1 class="title"><span class="underline">Explore Osaka</span></h1>
+                  </a>
+                </div>
+              </div>
+              <div class="column-xs-12 column-md-10">
+                <div class="image-holder">
+                  <img src="https://source.unsplash.com/peYW3VwICpE">
+                </div>
+                <div class="grid">
+                  <div class="column-xs-12 column-md-9">
+                    <div class="intro show-mobile">
+                      <a href="#">
+                        <h1 class="title"><span class="underline">Explore Osaka</span></h1>
+                      </a>
+                    </div>
+                    <p class="description">Osaka is a large port city and commercial center known for its modern architecture, nightlife and hearty street food.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="slider-item">
+            <div class="grid vertical">
+              <div class="column-xs-12 column-md-2 hide-mobile">
+                <div class="intro">
+                  <a href="#">
+                    <h1 class="title"><span class="underline">Explore Hokkaido</span></h1>
+                  </a>
+                </div>
+              </div>
+              <div class="column-xs-12 column-md-10">
+                <div class="image-holder">
+                  <img src="https://source.unsplash.com/VmeOZQjTVGE">
+                </div>
+                <div class="grid">
+                  <div class="column-xs-12 column-md-9">
+                    <div class="intro show-mobile">
+                      <a href="#">
+                        <h1 class="title"><span class="underline">Explore Hokkaido</span></h1>
+                      </a>
+                    </div>
+                    <p class="description">Hokkaido, the northernmost of Japan’s main islands, is known for its volcanoes, natural hot springs ("onsen") and ski areas.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      <div class="grid">
+        <div class="column-xs-12">
+          <div class="controls">
+              <button class="previous">
+                <i class="ion-ios-arrow-thin-left"></i>
+              </a>
+              <button class="next">
+                <i class="ion-ios-arrow-thin-right"></i>
+              </a>
+            </div>
+          </div>
+      </div>
+    </div>
+  </div>
+</main>
\ No newline at end of file
diff --git a/travel/src/script.js b/travel/src/script.js
new file mode 100644
index 0000000..e752e13
--- /dev/null
+++ b/travel/src/script.js
@@ -0,0 +1,52 @@
+const items = document.querySelectorAll('.slider-item');
+const itemCount = items.length;
+const nextItem = document.querySelector('.next');
+const previousItem = document.querySelector('.previous');
+const navItem = document.querySelector('a.toggle-nav');
+let count = 0;
+
+function showNextItem() {
+  items[count].classList.remove('active');
+
+  if(count < itemCount - 1) {
+    count++;
+  } else {
+    count = 0;
+  }
+
+  items[count].classList.add('active');
+  console.log(count);
+}
+
+function showPreviousItem() {
+  items[count].classList.remove('active');
+
+  if(count > 0) {
+    count--;
+  } else {
+    count = itemCount - 1;
+  }
+
+  items[count].classList.add('active');
+  // Check if working...
+  console.log(count);
+}
+
+function toggleNavigation(){
+  this.nextElementSibling.classList.toggle('active');
+}
+
+function keyPress(e) {
+  e = e || window.event;
+  
+  if (e.keyCode == '37') {
+    showPreviousItem();
+  } else if (e.keyCode == '39') {
+    showNextItem();
+  }
+}
+
+nextItem.addEventListener('click', showNextItem);
+previousItem.addEventListener('click', showPreviousItem);
+document.addEventListener('keydown', keyPress);
+navItem.addEventListener('click', toggleNavigation);
\ No newline at end of file
diff --git a/troisjs-starfield/README.markdown b/troisjs-starfield/README.markdown
new file mode 100644
index 0000000..d9148d2
--- /dev/null
+++ b/troisjs-starfield/README.markdown
@@ -0,0 +1,5 @@
+# TroisJS Starfield
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/soju22/pen/JjEqebK](https://codepen.io/soju22/pen/JjEqebK).
+
+Made with TroisJS : https://github.com/troisjs/trois
diff --git a/troisjs-starfield/dist/index.html b/troisjs-starfield/dist/index.html
new file mode 100644
index 0000000..7f7a827
--- /dev/null
+++ b/troisjs-starfield/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - TroisJS Starfield</title>
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@900&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="app"></div>
+<!-- partial -->
+  <script src='https://codepen.io/soju22/pen/40e576c3acef9d41be38338a5abfc3d4.js'></script><script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/troisjs-starfield/dist/script.js b/troisjs-starfield/dist/script.js
new file mode 100644
index 0000000..0a6af88
--- /dev/null
+++ b/troisjs-starfield/dist/script.js
@@ -0,0 +1,121 @@
+// Made with TroisJS : https://github.com/troisjs/trois
+import { createApp } from 'https://unpkg.com/vue@3.0.11/dist/vue.esm-browser.prod.js'
+import { lerp, BufferGeometry, Camera, EffectComposer, Points, Renderer, RenderPass, Scene, ShaderMaterial, Texture, UnrealBloomPass, ZoomBlurPass } from 'https://unpkg.com/troisjs@0.3.0-beta.4/build/trois.module.cdn.min.js'
+import { Clock, Color, MathUtils, Vector3 } from 'https://unpkg.com/three@0.127.0/build/three.module.js'
+
+const { randFloat: rnd, randInt, randFloatSpread: rndFS } = MathUtils
+
+const vertexShader = `
+  uniform float uTime;
+  attribute vec3 color;
+  attribute float size;
+  attribute float velocity;
+  varying vec4 vColor;
+  void main(){
+    vColor = vec4(color, 1.0);
+    vec3 p = vec3(position);
+    p.z = -150. + mod(position.z + uTime, 300.);
+    vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );
+    gl_PointSize = size * (-50.0 / mvPosition.z);
+    gl_Position = projectionMatrix * mvPosition;
+  }
+`
+
+const fragmentShader = `
+  uniform sampler2D uTexture;
+  varying vec4 vColor;
+  void main() {
+    gl_FragColor = vColor * texture2D(uTexture, gl_PointCoord);
+  }
+`
+
+createApp({
+  template: `
+    <Renderer ref="renderer" pointer resize="window">
+      <Camera :position="{ z: 0 }" :fov="50" />
+      <Scene>
+        <Points ref="points" :position="{ z: -150 }">
+          <BufferGeometry :attributes="attributes" />
+          <ShaderMaterial :blending="2" :depth-test="false" :uniforms="uniforms" :vertex-shader="vertexShader" :fragment-shader="fragmentShader">
+            <Texture src="https://assets.codepen.io/33787/sprite.png" uniform="uTexture" />
+          </ShaderMaterial>
+        </Points>
+      </Scene>
+      <EffectComposer>
+        <RenderPass />
+        <UnrealBloomPass :strength="2" :radius="0" :threshold="0" />
+        <ZoomBlurPass :strength="zoomStrength" />
+      </EffectComposer>
+    </Renderer>
+    <a href="#" @click="updateColors" @mouseenter="targetTimeCoef = 100" @mouseleave="targetTimeCoef = 1">Random Colors</a>
+  `,
+  components: { BufferGeometry, Camera, EffectComposer, Points, Renderer, RenderPass, Scene, ShaderMaterial, Texture, UnrealBloomPass, ZoomBlurPass },
+  setup() {
+    const POINTS_COUNT = 50000
+
+    const palette = niceColors[83]
+
+    const positions = new Float32Array(POINTS_COUNT * 3)
+    const colors = new Float32Array(POINTS_COUNT * 3)
+    const sizes = new Float32Array(POINTS_COUNT)
+    const v3 = new Vector3(), color = new Color()
+    for (let i = 0; i < POINTS_COUNT; i++) {
+      v3.set(rndFS(200), rndFS(200), rndFS(300))
+      v3.toArray(positions, i * 3)
+      color.set(palette[Math.floor(rnd(0, palette.length))])
+      color.toArray(colors, i * 3)
+      sizes[i] = rnd(5, 20)
+    }
+
+    const attributes = [
+      { name: 'position', array: positions, itemSize: 3 },
+      { name: 'color', array: colors, itemSize: 3 },
+      { name: 'size', array: sizes, itemSize: 1 },
+    ]
+
+    const uniforms = { uTime: { value: 0 } }
+
+    const clock = new Clock()
+
+    const timeCoef = 1, targetTimeCoef = 1
+
+    return {
+      POINTS_COUNT,
+      attributes, uniforms, vertexShader, fragmentShader,
+      clock, timeCoef, targetTimeCoef,
+    }
+  },
+  data() {
+    return {
+      zoomStrength: 0,
+    }
+  },
+  mounted() {
+    const renderer = this.$refs.renderer
+    const positionN = renderer.three.pointer.positionN
+    const points = this.$refs.points.points
+
+    renderer.onBeforeRender(() => {
+      this.timeCoef = lerp(this.timeCoef, this.targetTimeCoef, 0.02)
+      this.uniforms.uTime.value += this.clock.getDelta() * this.timeCoef * 4
+      this.zoomStrength = this.timeCoef * 0.004
+
+      const da = 0.05
+      const tiltX = lerp(points.rotation.x, positionN.y * da, 0.02)
+      const tiltY = lerp(points.rotation.y, -positionN.x * da, 0.02)
+      points.rotation.set(tiltX, tiltY, 0)
+    })
+  },
+  methods: {
+    updateColors() {
+      const colorAttribute = this.$refs.points.geometry.attributes.color
+      const ip = randInt(0, 99); const palette = niceColors[ip]; console.log(ip)
+      const color = new Color()
+      for (let i = 0; i < this.POINTS_COUNT; i++) {
+        color.set(palette[randInt(0, palette.length)])
+        color.toArray(colorAttribute.array, i * 3)
+      }
+      colorAttribute.needsUpdate = true
+    },
+  },
+}).mount('#app')
\ No newline at end of file
diff --git a/troisjs-starfield/dist/style.css b/troisjs-starfield/dist/style.css
new file mode 100644
index 0000000..708f97a
--- /dev/null
+++ b/troisjs-starfield/dist/style.css
@@ -0,0 +1,23 @@
+body, html {
+  margin: 0;
+}
+canvas {
+  display: block;
+}
+a {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 30px;
+  position: absolute;
+  top: calc(50% - 25px);
+  left: calc(50% - 150px);
+  width: 300px;
+  height: 50px;
+  line-height: 50px;
+  box-sizing: border-box;
+  text-align: center;
+  text-decoration: none;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  border: 1px solid #fff;
+  border-radius: 50px;
+}
\ No newline at end of file
diff --git a/troisjs-starfield/license.txt b/troisjs-starfield/license.txt
new file mode 100644
index 0000000..84585fb
--- /dev/null
+++ b/troisjs-starfield/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Kevin Levron (https://codepen.io/soju22/pen/JjEqebK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/troisjs-starfield/src/index.html b/troisjs-starfield/src/index.html
new file mode 100644
index 0000000..6c217c6
--- /dev/null
+++ b/troisjs-starfield/src/index.html
@@ -0,0 +1 @@
+<div id="app"></div>
diff --git a/troisjs-starfield/src/script.js b/troisjs-starfield/src/script.js
new file mode 100644
index 0000000..0bbbdfb
--- /dev/null
+++ b/troisjs-starfield/src/script.js
@@ -0,0 +1,121 @@
+// Made with TroisJS : https://github.com/troisjs/trois
+import { createApp } from 'https://unpkg.com/vue@3.0.11/dist/vue.esm-browser.prod.js'
+import { lerp, BufferGeometry, Camera, EffectComposer, Points, Renderer, RenderPass, Scene, ShaderMaterial, Texture, UnrealBloomPass, ZoomBlurPass } from 'https://unpkg.com/troisjs@0.3.0-beta.4/build/trois.module.cdn.min.js'
+import { Clock, Color, MathUtils, Vector3 } from 'https://unpkg.com/three@0.127.0/build/three.module.js'
+
+const { randFloat: rnd, randInt, randFloatSpread: rndFS } = MathUtils
+
+const vertexShader = `
+  uniform float uTime;
+  attribute vec3 color;
+  attribute float size;
+  attribute float velocity;
+  varying vec4 vColor;
+  void main(){
+    vColor = vec4(color, 1.0);
+    vec3 p = vec3(position);
+    p.z = -150. + mod(position.z + uTime, 300.);
+    vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );
+    gl_PointSize = size * (-50.0 / mvPosition.z);
+    gl_Position = projectionMatrix * mvPosition;
+  }
+`
+
+const fragmentShader = `
+  uniform sampler2D uTexture;
+  varying vec4 vColor;
+  void main() {
+    gl_FragColor = vColor * texture2D(uTexture, gl_PointCoord);
+  }
+`
+
+createApp({
+  template: `
+    <Renderer ref="renderer" pointer resize="window">
+      <Camera :position="{ z: 0 }" :fov="50" />
+      <Scene>
+        <Points ref="points" :position="{ z: -150 }">
+          <BufferGeometry :attributes="attributes" />
+          <ShaderMaterial :blending="2" :depth-test="false" :uniforms="uniforms" :vertex-shader="vertexShader" :fragment-shader="fragmentShader">
+            <Texture src="https://assets.codepen.io/33787/sprite.png" uniform="uTexture" />
+          </ShaderMaterial>
+        </Points>
+      </Scene>
+      <EffectComposer>
+        <RenderPass />
+        <UnrealBloomPass :strength="2" :radius="0" :threshold="0" />
+        <ZoomBlurPass :strength="zoomStrength" />
+      </EffectComposer>
+    </Renderer>
+    <a href="#" @click="updateColors" @mouseenter="targetTimeCoef = 100" @mouseleave="targetTimeCoef = 1">Random Colors</a>
+  `,
+  components: { BufferGeometry, Camera, EffectComposer, Points, Renderer, RenderPass, Scene, ShaderMaterial, Texture, UnrealBloomPass, ZoomBlurPass },
+  setup() {
+    const POINTS_COUNT = 50000
+
+    const palette = niceColors[83]
+
+    const positions = new Float32Array(POINTS_COUNT * 3)
+    const colors = new Float32Array(POINTS_COUNT * 3)
+    const sizes = new Float32Array(POINTS_COUNT)
+    const v3 = new Vector3(), color = new Color()
+    for (let i = 0; i < POINTS_COUNT; i++) {
+      v3.set(rndFS(200), rndFS(200), rndFS(300))
+      v3.toArray(positions, i * 3)
+      color.set(palette[Math.floor(rnd(0, palette.length))])
+      color.toArray(colors, i * 3)
+      sizes[i] = rnd(5, 20)
+    }
+
+    const attributes = [
+      { name: 'position', array: positions, itemSize: 3 },
+      { name: 'color', array: colors, itemSize: 3 },
+      { name: 'size', array: sizes, itemSize: 1 },
+    ]
+
+    const uniforms = { uTime: { value: 0 } }
+
+    const clock = new Clock()
+
+    const timeCoef = 1, targetTimeCoef = 1
+
+    return {
+      POINTS_COUNT,
+      attributes, uniforms, vertexShader, fragmentShader,
+      clock, timeCoef, targetTimeCoef,
+    }
+  },
+  data() {
+    return {
+      zoomStrength: 0,
+    }
+  },
+  mounted() {
+    const renderer = this.$refs.renderer
+    const positionN = renderer.three.pointer.positionN
+    const points = this.$refs.points.points
+
+    renderer.onBeforeRender(() => {
+      this.timeCoef = lerp(this.timeCoef, this.targetTimeCoef, 0.02)
+      this.uniforms.uTime.value += this.clock.getDelta() * this.timeCoef * 4
+      this.zoomStrength = this.timeCoef * 0.004
+
+      const da = 0.05
+      const tiltX = lerp(points.rotation.x, positionN.y * da, 0.02)
+      const tiltY = lerp(points.rotation.y, -positionN.x * da, 0.02)
+      points.rotation.set(tiltX, tiltY, 0)
+    })
+  },
+  methods: {
+    updateColors() {
+      const colorAttribute = this.$refs.points.geometry.attributes.color
+      const ip = randInt(0, 99); const palette = niceColors[ip]; console.log(ip)
+      const color = new Color()
+      for (let i = 0; i < this.POINTS_COUNT; i++) {
+        color.set(palette[randInt(0, palette.length)])
+        color.toArray(colorAttribute.array, i * 3)
+      }
+      colorAttribute.needsUpdate = true
+    },
+  },
+}).mount('#app')
diff --git a/troisjs-starfield/src/style.css b/troisjs-starfield/src/style.css
new file mode 100644
index 0000000..708f97a
--- /dev/null
+++ b/troisjs-starfield/src/style.css
@@ -0,0 +1,23 @@
+body, html {
+  margin: 0;
+}
+canvas {
+  display: block;
+}
+a {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 30px;
+  position: absolute;
+  top: calc(50% - 25px);
+  left: calc(50% - 150px);
+  width: 300px;
+  height: 50px;
+  line-height: 50px;
+  box-sizing: border-box;
+  text-align: center;
+  text-decoration: none;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  border: 1px solid #fff;
+  border-radius: 50px;
+}
\ No newline at end of file
diff --git a/turbulence/README.markdown b/turbulence/README.markdown
new file mode 100644
index 0000000..65e6234
--- /dev/null
+++ b/turbulence/README.markdown
@@ -0,0 +1,4 @@
+# Turbulence
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/janxalot/pen/MWwaNzB](https://codepen.io/janxalot/pen/MWwaNzB).
+
+ Messing around with animated svg filters, blend modes and hover interactions.
\ No newline at end of file
diff --git a/turbulence/dist/index.html b/turbulence/dist/index.html
new file mode 100644
index 0000000..6d691da
--- /dev/null
+++ b/turbulence/dist/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Turbulence</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<p class="hover">select mode + hover = ?</p>
+<div class="wrapper">
+  <svg viewBox="0 0 180 100">
+    <filter id='noise' x='0%' y='0%' width='100%' height='100%'>
+        <feTurbulence type="fractalNoise" baseFrequency="0" result="noise" numOctaves="3" seed="10"/>
+      <feDisplacementMap in="SourceGraphic" in2="noise" scale="10" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>  
+  </filter>    
+  </svg>
+  <div class="split">
+    <div class="list-outer">
+      <ul id="imageList">
+        <li class="bold">image blend</li>
+        <li class="active" data-mode="normal">normal</li> 
+        <li data-mode="multiply">multiply</li>
+        <li data-mode="screen">screen</li>
+        <li data-mode="overlay">overlay</li>
+        <li data-mode="darken">darken</li>
+        <li data-mode="lighten">lighten</li>
+        <li data-mode="color-dodge">color-dodge</li>
+        <li data-mode="color-burn">color-burn</li>
+        <li data-mode="difference">difference</li>
+        <li data-mode="exclusion">exclusion</li>
+        <li data-mode="hue">hue</li>
+        <li data-mode="saturation">saturation</li>
+        <li data-mode="color">color</li>
+        <li data-mode="luminosity">luminosity</li>
+      </ul>
+      <ul id="overlayList">
+        <li class="bold">overlay blend</li>
+        <li data-mode="normal">normal</li> 
+        <li class="active" data-mode="multiply">multiply</li>
+        <li data-mode="screen">screen</li>
+        <li data-mode="overlay">overlay</li>
+        <li data-mode="darken">darken</li>
+        <li data-mode="lighten">lighten</li>
+        <li data-mode="color-dodge">color-dodge</li>
+        <li data-mode="color-burn">color-burn</li>
+        <li data-mode="difference">difference</li>
+        <li data-mode="exclusion">exclusion</li>
+        <li data-mode="hue">hue</li>
+        <li data-mode="saturation">saturation</li>
+        <li data-mode="color">color</li>
+        <li data-mode="luminosity">luminosity</li>
+      </ul>
+    </div>
+    <div id="container">
+      <div id="inner">
+        <div id="mask" class="turb-mask"></div>
+        <img id="image" src="https://source.unsplash.com/Pzv28NRtgko/400x450/">
+      </div>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/turbulence/dist/script.js b/turbulence/dist/script.js
new file mode 100644
index 0000000..1a111c9
--- /dev/null
+++ b/turbulence/dist/script.js
@@ -0,0 +1,161 @@
+const container = document.getElementById('container'),
+mask = document.getElementById('mask'),
+turbVal = { val: 0.0 },
+octavesVal = { val: 0 },
+turb = document.querySelector('#noise feTurbulence'),
+
+turbTl = gsap.timeline({
+  paused: true,
+  repeat: -1,
+  yoyo: true,
+  onUpdate: function () {
+    turb.setAttribute('baseFrequency', turbVal.val);
+    // turb.setAttribute('numOctaves', octavesVal.val);
+  } }),
+
+maskTl = gsap.timeline({ paused: true });
+
+turbTl.to(turbVal, 12, { ease: Sine.easeInOut, val: 0.03 });
+
+maskTl.to(mask, 0.5, { ease: Sine.ease, opacity: 0.9 });
+
+container.addEventListener('mouseenter', e => {
+  turbTl.restart();
+  maskTl.restart();
+});
+
+container.addEventListener('mouseleave', e => {
+  turbTl.delay(0.5).reverse(1);
+  maskTl.reverse(1);
+});
+
+const imageListItem = document.querySelectorAll('#imageList li'),
+overlayListItem = document.querySelectorAll('#overlayList li'),
+image = document.getElementById('image');
+
+for (const item of imageListItem) {
+  item.addEventListener('click', function (e) {
+    imageListItem.forEach(node => {
+      node.classList.remove('active');
+    });
+    e.currentTarget.classList.add('active');
+    image.style.mixBlendMode = this.getAttribute('data-mode');
+  });
+}
+
+for (const item of overlayListItem) {
+  item.addEventListener('click', function (e) {
+    overlayListItem.forEach(node => {
+      node.classList.remove('active');
+    });
+    e.currentTarget.classList.add('active');
+    mask.style.backgroundBlendMode = this.getAttribute('data-mode');
+  });
+}
+
+// Handle perspective, from: https://css-tricks.com/animate-a-container-on-mouse-over-using-perspective-and-transform/
+
+(function () {
+  // Init
+  var container = document.getElementById("container"),
+  inner = document.getElementById("inner");
+
+  // Mouse
+  var mouse = {
+    _x: 0,
+    _y: 0,
+    x: 0,
+    y: 0,
+    updatePosition: function (event) {
+      var e = event || window.event;
+      this.x = e.clientX - this._x;
+      this.y = (e.clientY - this._y) * -1;
+    },
+    setOrigin: function (e) {
+      this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
+      this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
+    },
+    show: function () {
+      return "(" + this.x + ", " + this.y + ")";
+    } };
+
+
+  mouse.setOrigin(container);
+
+  var counter = 0;
+  var updateRate = 10;
+  var isTimeToUpdate = function () {
+    return counter++ % updateRate === 0;
+  };
+
+  var onMouseEnterHandler = function (event) {
+    update(event);
+  };
+
+  var onMouseLeaveHandler = function () {
+    inner.style = "";
+  };
+
+  var onMouseMoveHandler = function (event) {
+    if (isTimeToUpdate()) {
+      update(event);
+    }
+  };
+
+  var update = function (event) {
+    mouse.updatePosition(event);
+    updateTransformStyle(
+    (mouse.y / inner.offsetHeight / 2).toFixed(2),
+    (mouse.x / inner.offsetWidth / 2).toFixed(2));
+
+  };
+
+  var updateTransformStyle = function (x, y) {
+    var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
+    inner.style.transform = style;
+    inner.style.webkitTransform = style;
+    inner.style.mozTransform = style;
+    inner.style.msTransform = style;
+    inner.style.oTransform = style;
+  };
+
+  container.onmouseenter = onMouseEnterHandler;
+  container.onmouseleave = onMouseLeaveHandler;
+  container.onmousemove = onMouseMoveHandler;
+})();
+
+
+
+
+// Another idea for later
+// function onMouseMove(e) { 
+//    var rect = this.getBoundingClientRect()
+
+//     // Find its child
+//    var follower = this.querySelector('#mask')
+
+//    TweenMax.to(follower, 0.3, {
+//      x: e.offsetX,
+//      y: e.offsetY,
+//      ease:Power4.easeOut
+//    })
+// }
+
+// function init() {
+//   // Listen for mouse movement when over either one of the parents
+//   container.addEventListener('mousemove', onMouseMove)
+// };
+
+// document.addEventListener("DOMContentLoaded", function(event) {
+//   // wait until window, stylesheets, images, links, and other media assets are loaded
+//   window.onload = function() {         
+//     // Center the pivot point of the follower
+//     TweenMax.set('#mask', {
+//       xPercent: -50,
+//       yPercent: -50
+//     })
+
+//     // All ready, start!
+//     init();
+//   };
+// });
\ No newline at end of file
diff --git a/turbulence/dist/style.css b/turbulence/dist/style.css
new file mode 100644
index 0000000..f86aaf2
--- /dev/null
+++ b/turbulence/dist/style.css
@@ -0,0 +1,124 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 17px;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1rem;
+}
+
+.list-outer {
+  display: flex;
+  justify-content: space-between;
+  padding: 2rem;
+}
+.list-outer > ul:first-child {
+  margin-right: 5rem;
+}
+@media screen and (max-width: 50rem) {
+  .list-outer {
+    padding-top: 4rem;
+  }
+}
+
+ul {
+  list-style: none;
+  line-height: 1.5;
+  padding: 0;
+  margin: 0;
+}
+ul li {
+  cursor: pointer;
+  font-size: 0.8em;
+}
+
+.active {
+  font-weight: bold;
+}
+
+.bold {
+  font-weight: bold;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.05em;
+  font-size: 1rem;
+}
+
+svg {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+}
+
+.hover {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  margin: 0;
+  font-weight: bold;
+  font-style: italic;
+  letter-spacing: 0.05em;
+}
+
+.wrapper {
+  max-width: 1600px;
+  min-height: 100vh;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.split {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-direction: column;
+}
+@media screen and (min-width: 50rem) {
+  .split {
+    flex-direction: row;
+  }
+}
+
+#container {
+  perspective: 1.5rem;
+}
+
+#inner {
+  position: relative;
+  overflow: hidden;
+  box-shadow: 2px 2px 50px rgba(0, 0, 0, 0.4);
+  transition: transform 0.5s;
+  display: flex;
+}
+#inner img {
+  mix-blend-mode: normal;
+  max-width: 100%;
+  height: auto;
+}
+
+.turb-mask {
+  position: absolute;
+  width: 110%;
+  height: 110%;
+  left: -5%;
+  top: -5%;
+  opacity: 0.5;
+  pointer-events: none;
+  background-color: rgba(255, 0, 0, 0.65);
+  background-image: url(https://source.unsplash.com/Pzv28NRtgko/400x450/);
+  background-size: cover;
+  background-position: center;
+  background-blend-mode: multiply;
+  z-index: 0;
+  -webkit-filter: url(#noise);
+  filter: url(#noise);
+}
\ No newline at end of file
diff --git a/turbulence/license.txt b/turbulence/license.txt
new file mode 100644
index 0000000..d828efa
--- /dev/null
+++ b/turbulence/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Janxalot (https://codepen.io/janxalot/pen/MWwaNzB)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/turbulence/src/index.html b/turbulence/src/index.html
new file mode 100644
index 0000000..8052c21
--- /dev/null
+++ b/turbulence/src/index.html
@@ -0,0 +1,54 @@
+<p class="hover">select mode + hover = ?</p>
+<div class="wrapper">
+  <svg viewBox="0 0 180 100">
+    <filter id='noise' x='0%' y='0%' width='100%' height='100%'>
+        <feTurbulence type="fractalNoise" baseFrequency="0" result="noise" numOctaves="3" seed="10"/>
+      <feDisplacementMap in="SourceGraphic" in2="noise" scale="10" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>  
+  </filter>    
+  </svg>
+  <div class="split">
+    <div class="list-outer">
+      <ul id="imageList">
+        <li class="bold">image blend</li>
+        <li class="active" data-mode="normal">normal</li> 
+        <li data-mode="multiply">multiply</li>
+        <li data-mode="screen">screen</li>
+        <li data-mode="overlay">overlay</li>
+        <li data-mode="darken">darken</li>
+        <li data-mode="lighten">lighten</li>
+        <li data-mode="color-dodge">color-dodge</li>
+        <li data-mode="color-burn">color-burn</li>
+        <li data-mode="difference">difference</li>
+        <li data-mode="exclusion">exclusion</li>
+        <li data-mode="hue">hue</li>
+        <li data-mode="saturation">saturation</li>
+        <li data-mode="color">color</li>
+        <li data-mode="luminosity">luminosity</li>
+      </ul>
+      <ul id="overlayList">
+        <li class="bold">overlay blend</li>
+        <li data-mode="normal">normal</li> 
+        <li class="active" data-mode="multiply">multiply</li>
+        <li data-mode="screen">screen</li>
+        <li data-mode="overlay">overlay</li>
+        <li data-mode="darken">darken</li>
+        <li data-mode="lighten">lighten</li>
+        <li data-mode="color-dodge">color-dodge</li>
+        <li data-mode="color-burn">color-burn</li>
+        <li data-mode="difference">difference</li>
+        <li data-mode="exclusion">exclusion</li>
+        <li data-mode="hue">hue</li>
+        <li data-mode="saturation">saturation</li>
+        <li data-mode="color">color</li>
+        <li data-mode="luminosity">luminosity</li>
+      </ul>
+    </div>
+    <div id="container">
+      <div id="inner">
+        <div id="mask" class="turb-mask"></div>
+        <img id="image" src="https://source.unsplash.com/Pzv28NRtgko/400x450/">
+      </div>
+    </div>
+  </div>
+</div>
+	
diff --git a/turbulence/src/script.babel b/turbulence/src/script.babel
new file mode 100644
index 0000000..cbeaf1d
--- /dev/null
+++ b/turbulence/src/script.babel
@@ -0,0 +1,161 @@
+const container = document.getElementById('container'),
+      mask = document.getElementById('mask'),
+	    turbVal = { val: 0.0 },
+      octavesVal = { val: 0 },
+	    turb = document.querySelector('#noise feTurbulence'),
+      
+      turbTl = gsap.timeline({ 
+        paused: true, 
+        repeat: -1,
+        yoyo: true,
+        onUpdate: function(){
+          turb.setAttribute('baseFrequency', turbVal.val);
+          // turb.setAttribute('numOctaves', octavesVal.val);
+        }}),
+
+      maskTl = gsap.timeline({ paused: true });
+
+turbTl.to(turbVal, 12, { ease: Sine.easeInOut, val: 0.03 });
+
+maskTl.to(mask, 0.5, { ease: Sine.ease, opacity: 0.9 })
+
+container.addEventListener('mouseenter', e => {
+  turbTl.restart();
+  maskTl.restart();
+});
+
+container.addEventListener('mouseleave', e => {
+  turbTl.delay(0.5).reverse(1);
+  maskTl.reverse(1);
+});
+
+const imageListItem = document.querySelectorAll('#imageList li'),
+      overlayListItem = document.querySelectorAll('#overlayList li'),
+      image = document.getElementById('image');
+
+for (const item of imageListItem) {
+  item.addEventListener('click', function(e) {
+    imageListItem.forEach(node => {
+      node.classList.remove('active');
+    });
+    e.currentTarget.classList.add('active');
+    image.style.mixBlendMode = this.getAttribute('data-mode');
+  })
+}
+
+for (const item of overlayListItem) {
+  item.addEventListener('click', function(e) {
+    overlayListItem.forEach(node => {
+      node.classList.remove('active');
+    });
+    e.currentTarget.classList.add('active');
+    mask.style.backgroundBlendMode = this.getAttribute('data-mode');
+  })
+}
+
+// Handle perspective, from: https://css-tricks.com/animate-a-container-on-mouse-over-using-perspective-and-transform/
+
+(function() {
+  // Init
+  var container = document.getElementById("container"),
+      inner = document.getElementById("inner");
+
+  // Mouse
+  var mouse = {
+    _x: 0,
+    _y: 0,
+    x: 0,
+    y: 0,
+    updatePosition: function(event) {
+      var e = event || window.event;
+      this.x = e.clientX - this._x;
+      this.y = (e.clientY - this._y) * -1;
+    },
+    setOrigin: function(e) {
+      this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
+      this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
+    },
+    show: function() {
+      return "(" + this.x + ", " + this.y + ")";
+    }
+  };
+
+  mouse.setOrigin(container);
+  
+  var counter = 0;
+  var updateRate = 10;
+  var isTimeToUpdate = function() {
+    return counter++ % updateRate === 0;
+  };
+
+  var onMouseEnterHandler = function(event) {
+    update(event);
+  };
+
+  var onMouseLeaveHandler = function() {
+    inner.style = "";
+  };
+
+  var onMouseMoveHandler = function(event) {
+    if (isTimeToUpdate()) {
+      update(event);
+    }
+  };
+
+  var update = function(event) {
+    mouse.updatePosition(event);
+    updateTransformStyle(
+      (mouse.y / inner.offsetHeight / 2).toFixed(2),
+      (mouse.x / inner.offsetWidth / 2).toFixed(2)
+    );
+  };
+
+  var updateTransformStyle = function(x, y) {
+    var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
+    inner.style.transform = style;
+    inner.style.webkitTransform = style;
+    inner.style.mozTransform = style;
+    inner.style.msTransform = style;
+    inner.style.oTransform = style;
+  };
+
+  container.onmouseenter = onMouseEnterHandler;
+  container.onmouseleave = onMouseLeaveHandler;
+  container.onmousemove = onMouseMoveHandler;
+})();
+
+
+
+
+// Another idea for later
+// function onMouseMove(e) { 
+//    var rect = this.getBoundingClientRect()
+    
+//     // Find its child
+//    var follower = this.querySelector('#mask')
+    
+//    TweenMax.to(follower, 0.3, {
+//      x: e.offsetX,
+//      y: e.offsetY,
+//      ease:Power4.easeOut
+//    })
+// }
+
+// function init() {
+//   // Listen for mouse movement when over either one of the parents
+//   container.addEventListener('mousemove', onMouseMove)
+// };
+
+// document.addEventListener("DOMContentLoaded", function(event) {
+//   // wait until window, stylesheets, images, links, and other media assets are loaded
+//   window.onload = function() {         
+//     // Center the pivot point of the follower
+//     TweenMax.set('#mask', {
+//       xPercent: -50,
+//       yPercent: -50
+//     })
+
+//     // All ready, start!
+//     init();
+//   };
+// });
\ No newline at end of file
diff --git a/turbulence/src/style.scss b/turbulence/src/style.scss
new file mode 100644
index 0000000..71fa2ab
--- /dev/null
+++ b/turbulence/src/style.scss
@@ -0,0 +1,125 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 17px;
+}
+
+body {
+	padding: 0;
+  margin: 0;
+	font-family: sans-serif;
+	font-size: 1rem;
+}
+
+.list-outer {
+  display: flex;
+  justify-content: space-between;
+  padding: 2rem;
+  
+  > ul:first-child {
+    margin-right: 5rem;
+  }
+  
+  @media screen and (max-width: 50rem) {
+    padding-top: 4rem;
+  }
+}
+
+ul {
+  list-style: none;
+  line-height: 1.5;
+  padding: 0;
+  margin: 0;
+  
+  li {
+    cursor: pointer;
+    font-size: 0.8em;
+  }
+}
+
+.active {
+  font-weight: bold;
+}
+
+.bold {
+  font-weight: bold;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.05em;
+  font-size: 1rem;
+}
+
+svg {
+	height: 0;
+	width: 0;
+	visibility: hidden;
+}
+
+.hover {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  margin: 0;
+  font-weight: bold;
+  font-style: italic;
+  letter-spacing: 0.05em;
+}
+
+.wrapper {
+	max-width: 1600px;
+  min-height: 100vh;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.split {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-direction: column;
+  
+  @media screen and (min-width: 50rem) {
+    flex-direction: row;
+  }
+}
+
+#container {
+  perspective: 1.5rem;
+}
+
+#inner {
+  position: relative;
+  overflow: hidden;
+  box-shadow: 2px 2px 50px rgba(0, 0, 0, 0.4);
+  transition: transform 0.5s;
+  display: flex;
+  
+  img {
+    mix-blend-mode: normal;
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.turb-mask {
+  position: absolute;
+  width: 110%;
+  height: 110%;
+  left: -5%;
+  top: -5%;
+  opacity: 0.5;
+  pointer-events: none;
+  background-color: rgba(255, 0, 0, 0.65);
+  background-image: url(https://source.unsplash.com/Pzv28NRtgko/400x450/);
+  background-size: cover;
+  background-position: center;
+  background-blend-mode: multiply;
+  z-index: 0;
+  -webkit-filter: url(#noise);
+	filter: url(#noise);
+}
\ No newline at end of file
diff --git a/turkey/README.markdown b/turkey/README.markdown
new file mode 100644
index 0000000..af23ddf
--- /dev/null
+++ b/turkey/README.markdown
@@ -0,0 +1,5 @@
+# Turkey 🦃
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/abxlfazl/pen/gOrpOZL](https://codepen.io/abxlfazl/pen/gOrpOZL).
+
+
diff --git a/turkey/dist/index.html b/turkey/dist/index.html
new file mode 100644
index 0000000..343a5c6
--- /dev/null
+++ b/turkey/dist/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Turkey 🦃</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="bird">
+		<div class="head"></div>
+		<div class="body">
+			<div class="wing"></div>
+		</div>
+		<div class="dams">
+			<div class="dam dam-1"></div>
+			<div class="dam dam-2"></div>
+			<div class="dam dam-3"></div>
+			<div class="dam dam-4"></div>
+			<div class="dam dam-5"></div>
+			<div class="dam dam-6"></div>
+		</div>
+	</div>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/turkey/dist/style.css b/turkey/dist/style.css
new file mode 100644
index 0000000..4d9d67e
--- /dev/null
+++ b/turkey/dist/style.css
@@ -0,0 +1,272 @@
+html{
+    box-sizing: border-box;
+    --black: black;
+    --cream: #f2eee3;
+    --red: #d91729; 
+}
+html *,
+html *::before,
+html *::after{
+    box-sizing: inherit;
+}
+*::before,
+*::after{
+    content: "";
+    position: absolute;
+}
+*{
+    flex-shrink: 0;
+}
+body{
+    margin: 0;
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    background-color: var(--cream);
+    overflow: hidden;
+   
+}
+.bird{
+    width: 34em;
+    height: 30em;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    position: relative;
+    transform: scale(.8);
+    margin-top: 10em;
+}
+@media screen and (max-width: 40em){
+  .bird{
+    transform: scale(.55);
+  }
+}
+.head{
+    width: 5.7em;
+    height: 13em;
+    position: absolute;
+    z-index: -1;
+    right: -2.85em;
+    bottom: 5em;
+    border-radius: 100px;
+    background-image: radial-gradient(circle at center 0% ,var(--cream) 45%, transparent 48%), linear-gradient( transparent 24% , var(--red) 0), radial-gradient(circle 8.5px at 75% 18% , var(--black) 79% , transparent 100%);
+    background-size: 50% 20% , 100% 100% , 100% 100%;
+    background-position: 98% 29% , 0 0 , 0 0;
+    background-repeat: no-repeat;
+}
+.head::after{
+    width: 4em;
+    height: 4em;
+    top: 14%;
+    left: 98.5%;
+    background-image: radial-gradient( 18px 15px at 40% 100% , var(--black) 41% , var(--cream) 44%), linear-gradient(45deg ,var(--black) 34% , transparent 35.5%);
+    background-size: 10px 12px ,80% 50%;
+    background-repeat: no-repeat;
+    background-position: left top -11%, left top -33.5%;
+    border-radius: 5px;
+}
+.body{
+    position: relative;
+    width: 20em;
+    height: 20em;
+    border-radius: 50%;
+
+    background-image: 
+    repeating-radial-gradient(circle 115px at right bottom, var(--black) 0,  var(--black) 5% , var(--cream) 6.5% , var(--cream) 7.5% , var(--black) 8.5% ),
+    repeating-radial-gradient(circle 260px at center top,    var(--cream) 0, var(--cream) 7.5% , var(--black) 8% , var(--black) 15% , var(--cream) 15.5% ),
+    radial-gradient(circle 55px  at center bottom, var(--black) 0,   var(--black) 17% , var(--cream) 18% , var(--cream) 27%  , transparent 28% ),
+    radial-gradient(circle 55px  at center bottom, var(--black) 0,   var(--black) 17% , var(--cream) 18% , var(--cream) 27%  , black 28% );
+
+    background-size: 50% 50% ,  100% 50% , 12.6% 13% ,  12.6% 13% ;
+    background-repeat: no-repeat , no-repeat , repeat, repeat ; 
+    background-position: left top , center bottom,  right 9% top 5.25% , right 1.6% top 27.6% ;
+}
+.body::before,
+.body::after {
+    top: 95%;
+    width: 1.7em;
+    height: 3em;
+    right: 0;
+    margin: 0 auto;
+    border: 1.5px solid var(--black);
+    border-color: transparent transparent var(--black) var(--black);
+    z-index: -1;
+}
+.body::before{
+    left: -17%;
+    border-bottom-left-radius: 25px;
+}
+.body::after {
+    left: 17%;
+}
+.wing{
+    width: 100%;
+    height: 50%;
+    right: 50%;
+    bottom: 0;
+    position: absolute;
+    border-radius: 50% / 0 0 100% 100% ;
+    background-image: repeating-linear-gradient( var(--black) 0 ,var(--black) 8% ,  var(--cream) 9% , var(--cream) 11%),
+    radial-gradient(circle 80px at 100% center , var(--black) 26% , var(--cream) 27%);
+    background-size: 50% 125% , 9% 26.5%;
+    background-position: left bottom;
+    background-repeat: no-repeat , repeat;
+    border: 2px solid var(--black);
+    background-position: left top 20% , right -3% top;
+}
+.dams{
+    width: 24em;
+    height: 25em;
+    position: absolute;
+    bottom: 61%;
+    right: 31%;
+    display: flex;
+    z-index: -1;
+    
+}
+.dam{
+    position: absolute;
+    width: 6.5em;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+   
+}
+.dam::before{
+    width: 22em;
+    height: 27em;
+    border-radius: 50%;
+}
+.dam-1{
+    top: -2%;
+    left: 75%;
+}
+.dam-1::before{
+    background-image: 
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    repeating-linear-gradient(var(--black) 0 , var(--black) 5px , var(--cream) 6px , var(--cream) 7px , var(--black) 8px , var(--black) 20px);
+    background-size: var(--c-size),var(--c-size),var(--c-size),
+    var(--c-size),var(--c-size),var(--c-size),
+    var(--c-size),var(--c-size),var(--c-size),100% 100%;
+    background-repeat: no-repeat;
+    background-position: 21% 3.8% , 12% 14.5% , 19% 20% ,6% 31% , 18% 42% , 14.5% 52.7% ,  20.5% 63.7%,  18.5% 74.5%, 0 0;
+    --c-size: 15% 15%;
+
+}
+.dam-2{
+    transform: rotate(-18deg);
+    top: 3%;
+    left: 59%;
+}
+.dam-2::before{
+    background-image: radial-gradient(circle 20px ,var(--cream) 30% , transparent 37%), radial-gradient(circle 20px ,var(--cream) 30% , var(--black) 37%);
+    background-size: 11% 5.5%;
+    background-position: 1% 24% ,7% 21%;
+}
+.dam-3{
+    transform: rotate(-32deg);
+    top: 11%;
+    left: 42%;
+}
+.dam-3::before{
+    background-image: repeating-linear-gradient( -106deg,  var(--black) 0 , var(--black) 1px ,var(--cream) 2px , var(--cream) 8px , var(--black) 9px , var(--black) 18px);
+    background-size: 100% 120%;
+    background-position: left top 30%;
+}
+.dam-4{
+    transform: rotate(-48deg);
+    top: 22%;
+    left: 26%;
+}
+.dam-4::before{
+    background-image: repeating-radial-gradient(circle at 17% 43% , var(--black) 0%, var(--black) 5.2% , var(--cream) 5.7% , var(--cream) 5.9% , var(--black) 6.2%);
+}
+.dam-5{
+    transform: rotate(-61deg);
+    top: 39%;
+    left: 17%;
+}
+
+.dam-5::before{
+    background-image:
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0), 
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0), 
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0), 
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0);
+    background-size: 440px 440px;
+    background-position:
+    349% -55% , 343% -49% ,
+    318% -24%, 312% -18% ,
+    287% 7% , 281% 13% ,
+    256% 38% , 250% 272%,
+    225% 276% ,219% 303%,
+    194% 307% , 188% 333%,
+
+    -352% -280% , -346% -274%, 
+    -311% -249% , -320% -243%, 
+    -328% -218% , -352% -212%,
+
+    165% -185% , 159% -178% ,
+    134% -153% , 128%  -147%,
+    103% -122% , 97%  -116%,
+    72% -91% , 66%  -85%,
+    41% -60% , 35%  -54%;
+
+    width: 31em;
+    height: 31em;
+    transform: rotate(61deg);
+    background-color: var(--black);
+    background-repeat: no-repeat;
+}
+
+.dam-6{
+    transform: rotate(-76deg);
+    top: 56%;
+    left: 10%;
+}
+.dam-6::before{
+    background-image: radial-gradient(circle 30px , var(--black) 25% , var(--cream) 28% , var(--cream) 45% , transparent 47%), 
+    radial-gradient(circle 36px , var(--black) 25% , var(--cream) 28% , var(--cream) 32% , var(--black) 34%);
+    background-size: 14% 10%;
+    position: absolute;
+    background-position: left 6% top 32%, left 14% top 38%;
+    border-radius: 50%;
+    width: 27em;
+    transform: rotate(76deg);
+}
\ No newline at end of file
diff --git a/turkey/license.txt b/turkey/license.txt
new file mode 100644
index 0000000..6db05ad
--- /dev/null
+++ b/turkey/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by abxlfazl khxrshidi (https://codepen.io/abxlfazl/pen/gOrpOZL)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/turkey/src/index.html b/turkey/src/index.html
new file mode 100644
index 0000000..dc340ad
--- /dev/null
+++ b/turkey/src/index.html
@@ -0,0 +1,14 @@
+<div class="bird">
+		<div class="head"></div>
+		<div class="body">
+			<div class="wing"></div>
+		</div>
+		<div class="dams">
+			<div class="dam dam-1"></div>
+			<div class="dam dam-2"></div>
+			<div class="dam dam-3"></div>
+			<div class="dam dam-4"></div>
+			<div class="dam dam-5"></div>
+			<div class="dam dam-6"></div>
+		</div>
+	</div>
\ No newline at end of file
diff --git a/turkey/src/style.css b/turkey/src/style.css
new file mode 100644
index 0000000..17e7037
--- /dev/null
+++ b/turkey/src/style.css
@@ -0,0 +1,272 @@
+html{
+    box-sizing: border-box;
+    --black: black;
+    --cream: #f2eee3;
+    --red: #d91729; 
+}
+html *,
+html *::before,
+html *::after{
+    box-sizing: inherit;
+}
+*::before,
+*::after{
+    content: "";
+    position: absolute;
+}
+*{
+    flex-shrink: 0;
+}
+body{
+    margin: 0;
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    background-color: var(--cream);
+    overflow: hidden;
+   
+}
+.bird{
+    width: 34em;
+    height: 30em;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    position: relative;
+    transform: scale(.8);
+    margin-top: 10em;
+}
+@media screen and (max-width: 40em){
+  .bird{
+    transform: scale(.55);
+  }
+}
+.head{
+    width: 5.7em;
+    height: 13em;
+    position: absolute;
+    z-index: -1;
+    right: -2.85em;
+    bottom: 5em;
+    border-radius: 100px;
+    background-image: radial-gradient(circle at center 0% ,var(--cream) 45%, transparent 48%), linear-gradient( transparent 24% , var(--red) 0), radial-gradient(circle 8.5px at 75% 18% , var(--black) 79% , transparent 100%);
+    background-size: 50% 20% , 100% 100% , 100% 100%;
+    background-position: 98% 29% , 0 0 , 0 0;
+    background-repeat: no-repeat;
+}
+.head::after{
+    width: 4em;
+    height: 4em;
+    top: 14%;
+    left: 98.5%;
+    background-image: radial-gradient( 18px 15px at 40% 100% , var(--black) 41% , var(--cream) 44%), linear-gradient(45deg ,var(--black) 34% , transparent 35.5%);
+    background-size: 10px 12px ,80% 50%;
+    background-repeat: no-repeat;
+    background-position: left top -11%, left top -33.5%;
+    border-radius: 5px;
+}
+.body{
+    position: relative;
+    width: 20em;
+    height: 20em;
+    border-radius: 50%;
+
+    background-image: 
+    repeating-radial-gradient(circle 115px at right bottom, var(--black) 0,  var(--black) 5% , var(--cream) 6.5% , var(--cream) 7.5% , var(--black) 8.5% ),
+    repeating-radial-gradient(circle 260px at center top,    var(--cream) 0, var(--cream) 7.5% , var(--black) 8% , var(--black) 15% , var(--cream) 15.5% ),
+    radial-gradient(circle 55px  at center bottom, var(--black) 0,   var(--black) 17% , var(--cream) 18% , var(--cream) 27%  , transparent 28% ),
+    radial-gradient(circle 55px  at center bottom, var(--black) 0,   var(--black) 17% , var(--cream) 18% , var(--cream) 27%  , black 28% );
+
+    background-size: 50% 50% ,  100% 50% , 12.6% 13% ,  12.6% 13% ;
+    background-repeat: no-repeat , no-repeat , repeat, repeat ; 
+    background-position: left top , center bottom,  right 9% top 5.25% , right 1.6% top 27.6% ;
+}
+.body::before,
+.body::after {
+    top: 95%;
+    width: 1.7em;
+    height: 3em;
+    right: 0;
+    margin: 0 auto;
+    border: 1.5px solid var(--black);
+    border-color: transparent transparent var(--black) var(--black);
+    z-index: -1;
+}
+.body::before{
+    left: -17%;
+    border-bottom-left-radius: 25px;
+}
+.body::after {
+    left: 17%;
+}
+.wing{
+    width: 100%;
+    height: 50%;
+    right: 50%;
+    bottom: 0;
+    position: absolute;
+    border-radius: 50% / 0 0 100% 100% ;
+    background-image: repeating-linear-gradient( var(--black) 0 ,var(--black) 8% ,  var(--cream) 9% , var(--cream) 11%),
+    radial-gradient(circle 80px at 100% center , var(--black) 26% , var(--cream) 27%);
+    background-size: 50% 125% , 9% 26.5%;
+    background-position: left bottom;
+    background-repeat: no-repeat , repeat;
+    border: 2px solid var(--black);
+    background-position: left top 20% , right -3% top;
+}
+.dams{
+    width: 24em;
+    height: 25em;
+    position: absolute;
+    bottom: 61%;
+    right: 31%;
+    display: flex;
+    z-index: -1;
+    
+}
+.dam{
+    position: absolute;
+    width: 6.5em;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+   
+}
+.dam::before{
+    width: 22em;
+    height: 27em;
+    border-radius: 50%;
+}
+.dam-1{
+    top: -2%;
+    left: 75%;
+}
+.dam-1::before{
+    background-image: 
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    radial-gradient(circle 14px , var(--cream) 30% , transparent 40%),
+    repeating-linear-gradient(var(--black) 0 , var(--black) 5px , var(--cream) 6px , var(--cream) 7px , var(--black) 8px , var(--black) 20px);
+    background-size: var(--c-size),var(--c-size),var(--c-size),
+    var(--c-size),var(--c-size),var(--c-size),
+    var(--c-size),var(--c-size),var(--c-size),100% 100%;
+    background-repeat: no-repeat;
+    background-position: 21% 3.8% , 12% 14.5% , 19% 20% ,6% 31% , 18% 42% , 14.5% 52.7% ,  20.5% 63.7%,  18.5% 74.5%, 0 0;
+    --c-size: 15% 15%;
+
+}
+.dam-2{
+    transform: rotate(-18deg);
+    top: 3%;
+    left: 59%;
+}
+.dam-2::before{
+    background-image: radial-gradient(circle 20px ,var(--cream) 30% , transparent 37%), radial-gradient(circle 20px ,var(--cream) 30% , var(--black) 37%);
+    background-size: 11% 5.5%;
+    background-position: 1% 24% ,7% 21%;
+}
+.dam-3{
+    transform: rotate(-32deg);
+    top: 11%;
+    left: 42%;
+}
+.dam-3::before{
+    background-image: repeating-linear-gradient( -106deg,  var(--black) 0 , var(--black) 1px ,var(--cream) 2px , var(--cream) 8px , var(--black) 9px , var(--black) 18px);
+    background-size: 100% 120%;
+    background-position: left top 30%;
+}
+.dam-4{
+    transform: rotate(-48deg);
+    top: 22%;
+    left: 26%;
+}
+.dam-4::before{
+    background-image: repeating-radial-gradient(circle at 17% 43% , var(--black) 0%, var(--black) 5.2% , var(--cream) 5.7% , var(--cream) 5.9% , var(--black) 6.2%);
+}
+.dam-5{
+    transform: rotate(-61deg);
+    top: 39%;
+    left: 17%;
+}
+
+.dam-5::before{
+    background-image:
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0), 
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0), 
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0), 
+    linear-gradient(45deg , var(--cream) 25% , transparent 0),
+    linear-gradient(45deg , var(--black) 25% , transparent 0),
+    linear-gradient(45deg , var(--cream) 25% , transparent 0);
+    background-size: 440px 440px;
+    background-position:
+    349% -55% , 343% -49% ,
+    318% -24%, 312% -18% ,
+    287% 7% , 281% 13% ,
+    256% 38% , 250% 272%,
+    225% 276% ,219% 303%,
+    194% 307% , 188% 333%,
+
+    -352% -280% , -346% -274%, 
+    -311% -249% , -320% -243%, 
+    -328% -218% , -352% -212%,
+
+    165% -185% , 159% -178% ,
+    134% -153% , 128%  -147%,
+    103% -122% , 97%  -116%,
+    72% -91% , 66%  -85%,
+    41% -60% , 35%  -54%;
+
+    width: 31em;
+    height: 31em;
+    transform: rotate(61deg);
+    background-color: var(--black);
+    background-repeat: no-repeat;
+}
+
+.dam-6{
+    transform: rotate(-76deg);
+    top: 56%;
+    left: 10%;
+}
+.dam-6::before{
+    background-image: radial-gradient(circle 30px , var(--black) 25% , var(--cream) 28% , var(--cream) 45% , transparent 47%), 
+    radial-gradient(circle 36px , var(--black) 25% , var(--cream) 28% , var(--cream) 32% , var(--black) 34%);
+    background-size: 14% 10%;
+    position: absolute;
+    background-position: left 6% top 32%, left 14% top 38%;
+    border-radius: 50%;
+    width: 27em;
+    transform: rotate(76deg);
+}
diff --git a/turnsolepure-javascript/README.markdown b/turnsolepure-javascript/README.markdown
new file mode 100644
index 0000000..7a3f555
--- /dev/null
+++ b/turnsolepure-javascript/README.markdown
@@ -0,0 +1,5 @@
+# turnsole - pure JavaScript
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/toshiya-marukubo/pen/oNbgPRX](https://codepen.io/toshiya-marukubo/pen/oNbgPRX).
+
+
diff --git a/turnsolepure-javascript/dist/index.html b/turnsolepure-javascript/dist/index.html
new file mode 100644
index 0000000..c941a60
--- /dev/null
+++ b/turnsolepure-javascript/dist/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - turnsole - pure JavaScript</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canvas">Canvas not supported.</canvas>
+<ul id="navigation">
+  <li>Scroll up, down and click.</li>
+</ul>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/turnsolepure-javascript/dist/script.js b/turnsolepure-javascript/dist/script.js
new file mode 100644
index 0000000..75b3392
--- /dev/null
+++ b/turnsolepure-javascript/dist/script.js
@@ -0,0 +1,205 @@
+(function () {
+  'use strict';
+  window.addEventListener('load', function () {
+    var canvas = document.getElementById('canvas');
+
+    if (!canvas || !canvas.getContext) {
+      return false;
+    }
+
+    /********************
+      Random Number
+    ********************/
+
+    function rand(min, max) {
+      return Math.floor(Math.random() * (max - min + 1) + min);
+    }
+
+    /********************
+      Var
+    ********************/
+
+    var ctx = canvas.getContext('2d');
+    var X = canvas.width = window.innerWidth;
+    var Y = canvas.height = window.innerHeight;
+    var mouseX = null;
+    var mouseY = null;
+    var flowers = [];
+    var flowerNum = 1;
+    var flowerSize = Y / 3;
+    var flg = true;
+    var angle = 137.5;
+
+    /********************
+      Animation
+    ********************/
+
+    window.requestAnimationFrame =
+      window.requestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      window.webkitRequestAnimationFrame ||
+      window.msRequestAnimationFrame ||
+      function(cb) {
+        setTimeout(cb, 17);
+      };
+
+    /********************
+      Flower
+    ********************/
+    
+    function Flower(ctx, x, y) {
+      this.ctx = ctx;
+      this.init(x, y);
+    }
+
+    Flower.prototype.init = function(x, y) {
+      this.x = x;
+      this.y = y;
+      this.r = Y / 2;
+      this.lw = 5;
+      this.a = 0;
+      this.rad = this.a * Math.PI / 180; 
+      this.v = {
+        x: 0,
+        y: 0
+      };
+      this.c = {
+        r: rand(0, 255),
+        g: rand(0, 255),
+        b: rand(0, 255)
+      };
+    };
+
+    Flower.prototype.draw = function() {
+      var ctx  = this.ctx;
+      ctx.save();
+      ctx.globalCompositeOperation = 'lighter';
+      ctx.fillStyle = 'rgb(' + this.c.r + ',' + this.c.g + ', ' + this.c.b + ')';
+      ctx.strokeStyle = 'rgb(' + this.c.r + ',' + this.c.g + ', ' + this.c.b + ')';
+      if (flg === true) {
+        ctx.translate(this.x, this.y);
+        ctx.rotate(Math.cos(this.rad));
+        ctx.scale(Math.cos(this.rad), Math.sin(this.rad));
+        ctx.translate(-this.x, -this.y);
+      }
+      for (var i = 0; i < this.r; i++) {
+        ctx.beginPath();
+        ctx.arc(Math.cos(angle * Math.PI / 180 * i) * i / 2 + this.x, Math.sin(angle * Math.PI / 180 * i) * i / 2 + this.y, 2 * i / 100, 0, Math.PI * 2, false);
+        ctx.fill();
+      }
+      ctx.restore();
+      ctx.save();
+      ctx.globalCompositeOperation = 'lighter';
+      ctx.lineWidth = Math.sin(this.rad) * this.lw;
+      if (flg === true) {
+        ctx.translate(this.x, this.y);
+        ctx.rotate(Math.sin(this.rad));
+        ctx.scale(Math.cos(this.rad), Math.sin(this.rad));
+        ctx.translate(-this.x, -this.y);
+      }
+      ctx.strokeStyle = 'rgb(' + this.c.r + ',' + this.c.g + ', ' + this.c.b + ')';
+      for (var i = 0; i < 36; i++) {
+        ctx.translate(this.x, this.y);
+        ctx.rotate(10 * Math.PI / 180);
+        ctx.translate(-this.x, -this.y);
+        ctx.beginPath();
+        ctx.ellipse(this.x + this.r / 2, this.y + this.r / 2, this.r / 30, this.r / 6, -45 * Math.PI / 180, 0, Math.PI * 2, false);
+        ctx.stroke();
+      }
+      ctx.restore();
+    };
+
+    Flower.prototype.updateParams = function() {
+      this.a += 0.5;
+      this.rad = this.a * Math.PI / 180;
+    };
+    
+    Flower.prototype.render = function() {
+      this.updateParams();
+      this.draw();
+    };
+    
+    for (var i = 0; i < flowerNum; i++) {
+      var f = new Flower(ctx, X / 2, Y / 2);
+      flowers.push(f);
+    }
+
+    /********************
+      ChangeColor
+    ********************/
+
+    function changeColor() {
+      var time = rand(1000, 5000);
+      var r = rand(0, 255);
+      var g = rand(0, 255);
+      var b = rand(0, 255);
+      for (var i = 0; i < flowers.length; i++) {
+        flowers[i].c  = {
+          r: r,
+          g: g,
+          b: b
+        };
+      }
+      setTimeout(changeColor, time);
+    }
+
+    changeColor();
+
+    /********************
+      Render
+    ********************/
+   
+    function render() {
+      //ctx.clearRect(0, 0, X, Y);
+      ctx.globalCompositeOperation = "darken";
+      ctx.globalAlpha = 0.03;
+      ctx.fillStyle = "rgb(0,0,0)";
+      ctx.fillRect(0, 0, X, Y);
+      ctx.globalCompositeOperation = "source-over";
+      ctx.globalAlpha = 1;
+      for (var i = 0; i < flowers.length; i++) {
+        flowers[i].render();
+      }
+      requestAnimationFrame(render);
+    }
+
+    render();
+
+    /********************
+      Event
+    ********************/
+    
+    function onResize() {
+      X = canvas.width = window.innerWidth;
+      Y = canvas.height = window.innerHeight;
+      flowerSize = Y / 3;
+      flowers = [];
+      for (var i = 0; i < flowerNum; i++) {
+        var f = new Flower(ctx, X / 2, Y / 2);
+        flowers.push(f);
+      }
+    }
+
+    window.addEventListener('resize', function(){
+      onResize();
+    });
+    
+    canvas.addEventListener('mousemove', function(e) {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+    });
+
+    canvas.addEventListener('click', function(e) {
+      flg === true ? flg = false : flg = true;
+    });
+
+    canvas.addEventListener('wheel', function(e) {
+      for (var i = 0; i < flowers.length; i++) {
+        flowers[i].a += e.deltaY;
+      }
+    });
+
+  });
+  // Author
+  console.log('File Name / turnsole.js\nCreated Date / Jun 05, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo');
+})();
\ No newline at end of file
diff --git a/turnsolepure-javascript/dist/style.css b/turnsolepure-javascript/dist/style.css
new file mode 100644
index 0000000..4da521c
--- /dev/null
+++ b/turnsolepure-javascript/dist/style.css
@@ -0,0 +1,35 @@
+* {
+  margin: 0;
+  padding: 0;
+  color: #FFF;
+}
+
+canvas#canvas {
+  display: block;
+  background: #000;
+}
+
+ul#navigation {
+  display: none;
+}
+
+@media screen and (min-width: 48rem) {
+
+  ul#navigation {
+    display: block;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 0;
+    -webkit-writing-mode: vertical-rl;
+        -ms-writing-mode: tb-rl;
+            writing-mode: vertical-rl;
+    text-align: center;
+    margin-right: 1.6rem;
+    font-size: 0.8rem;
+  }
+  ul#navigation > li {
+    display: inline-block;
+  }
+
+}
\ No newline at end of file
diff --git a/turnsolepure-javascript/license.txt b/turnsolepure-javascript/license.txt
new file mode 100644
index 0000000..4982c41
--- /dev/null
+++ b/turnsolepure-javascript/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Toshiya Marukubo (https://codepen.io/toshiya-marukubo/pen/oNbgPRX)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/turnsolepure-javascript/src/index.html b/turnsolepure-javascript/src/index.html
new file mode 100644
index 0000000..7bcb681
--- /dev/null
+++ b/turnsolepure-javascript/src/index.html
@@ -0,0 +1,4 @@
+<canvas id="canvas">Canvas not supported.</canvas>
+<ul id="navigation">
+  <li>Scroll up, down and click.</li>
+</ul>
\ No newline at end of file
diff --git a/turnsolepure-javascript/src/script.js b/turnsolepure-javascript/src/script.js
new file mode 100644
index 0000000..75b3392
--- /dev/null
+++ b/turnsolepure-javascript/src/script.js
@@ -0,0 +1,205 @@
+(function () {
+  'use strict';
+  window.addEventListener('load', function () {
+    var canvas = document.getElementById('canvas');
+
+    if (!canvas || !canvas.getContext) {
+      return false;
+    }
+
+    /********************
+      Random Number
+    ********************/
+
+    function rand(min, max) {
+      return Math.floor(Math.random() * (max - min + 1) + min);
+    }
+
+    /********************
+      Var
+    ********************/
+
+    var ctx = canvas.getContext('2d');
+    var X = canvas.width = window.innerWidth;
+    var Y = canvas.height = window.innerHeight;
+    var mouseX = null;
+    var mouseY = null;
+    var flowers = [];
+    var flowerNum = 1;
+    var flowerSize = Y / 3;
+    var flg = true;
+    var angle = 137.5;
+
+    /********************
+      Animation
+    ********************/
+
+    window.requestAnimationFrame =
+      window.requestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      window.webkitRequestAnimationFrame ||
+      window.msRequestAnimationFrame ||
+      function(cb) {
+        setTimeout(cb, 17);
+      };
+
+    /********************
+      Flower
+    ********************/
+    
+    function Flower(ctx, x, y) {
+      this.ctx = ctx;
+      this.init(x, y);
+    }
+
+    Flower.prototype.init = function(x, y) {
+      this.x = x;
+      this.y = y;
+      this.r = Y / 2;
+      this.lw = 5;
+      this.a = 0;
+      this.rad = this.a * Math.PI / 180; 
+      this.v = {
+        x: 0,
+        y: 0
+      };
+      this.c = {
+        r: rand(0, 255),
+        g: rand(0, 255),
+        b: rand(0, 255)
+      };
+    };
+
+    Flower.prototype.draw = function() {
+      var ctx  = this.ctx;
+      ctx.save();
+      ctx.globalCompositeOperation = 'lighter';
+      ctx.fillStyle = 'rgb(' + this.c.r + ',' + this.c.g + ', ' + this.c.b + ')';
+      ctx.strokeStyle = 'rgb(' + this.c.r + ',' + this.c.g + ', ' + this.c.b + ')';
+      if (flg === true) {
+        ctx.translate(this.x, this.y);
+        ctx.rotate(Math.cos(this.rad));
+        ctx.scale(Math.cos(this.rad), Math.sin(this.rad));
+        ctx.translate(-this.x, -this.y);
+      }
+      for (var i = 0; i < this.r; i++) {
+        ctx.beginPath();
+        ctx.arc(Math.cos(angle * Math.PI / 180 * i) * i / 2 + this.x, Math.sin(angle * Math.PI / 180 * i) * i / 2 + this.y, 2 * i / 100, 0, Math.PI * 2, false);
+        ctx.fill();
+      }
+      ctx.restore();
+      ctx.save();
+      ctx.globalCompositeOperation = 'lighter';
+      ctx.lineWidth = Math.sin(this.rad) * this.lw;
+      if (flg === true) {
+        ctx.translate(this.x, this.y);
+        ctx.rotate(Math.sin(this.rad));
+        ctx.scale(Math.cos(this.rad), Math.sin(this.rad));
+        ctx.translate(-this.x, -this.y);
+      }
+      ctx.strokeStyle = 'rgb(' + this.c.r + ',' + this.c.g + ', ' + this.c.b + ')';
+      for (var i = 0; i < 36; i++) {
+        ctx.translate(this.x, this.y);
+        ctx.rotate(10 * Math.PI / 180);
+        ctx.translate(-this.x, -this.y);
+        ctx.beginPath();
+        ctx.ellipse(this.x + this.r / 2, this.y + this.r / 2, this.r / 30, this.r / 6, -45 * Math.PI / 180, 0, Math.PI * 2, false);
+        ctx.stroke();
+      }
+      ctx.restore();
+    };
+
+    Flower.prototype.updateParams = function() {
+      this.a += 0.5;
+      this.rad = this.a * Math.PI / 180;
+    };
+    
+    Flower.prototype.render = function() {
+      this.updateParams();
+      this.draw();
+    };
+    
+    for (var i = 0; i < flowerNum; i++) {
+      var f = new Flower(ctx, X / 2, Y / 2);
+      flowers.push(f);
+    }
+
+    /********************
+      ChangeColor
+    ********************/
+
+    function changeColor() {
+      var time = rand(1000, 5000);
+      var r = rand(0, 255);
+      var g = rand(0, 255);
+      var b = rand(0, 255);
+      for (var i = 0; i < flowers.length; i++) {
+        flowers[i].c  = {
+          r: r,
+          g: g,
+          b: b
+        };
+      }
+      setTimeout(changeColor, time);
+    }
+
+    changeColor();
+
+    /********************
+      Render
+    ********************/
+   
+    function render() {
+      //ctx.clearRect(0, 0, X, Y);
+      ctx.globalCompositeOperation = "darken";
+      ctx.globalAlpha = 0.03;
+      ctx.fillStyle = "rgb(0,0,0)";
+      ctx.fillRect(0, 0, X, Y);
+      ctx.globalCompositeOperation = "source-over";
+      ctx.globalAlpha = 1;
+      for (var i = 0; i < flowers.length; i++) {
+        flowers[i].render();
+      }
+      requestAnimationFrame(render);
+    }
+
+    render();
+
+    /********************
+      Event
+    ********************/
+    
+    function onResize() {
+      X = canvas.width = window.innerWidth;
+      Y = canvas.height = window.innerHeight;
+      flowerSize = Y / 3;
+      flowers = [];
+      for (var i = 0; i < flowerNum; i++) {
+        var f = new Flower(ctx, X / 2, Y / 2);
+        flowers.push(f);
+      }
+    }
+
+    window.addEventListener('resize', function(){
+      onResize();
+    });
+    
+    canvas.addEventListener('mousemove', function(e) {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+    });
+
+    canvas.addEventListener('click', function(e) {
+      flg === true ? flg = false : flg = true;
+    });
+
+    canvas.addEventListener('wheel', function(e) {
+      for (var i = 0; i < flowers.length; i++) {
+        flowers[i].a += e.deltaY;
+      }
+    });
+
+  });
+  // Author
+  console.log('File Name / turnsole.js\nCreated Date / Jun 05, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo');
+})();
\ No newline at end of file
diff --git a/turnsolepure-javascript/src/style.css b/turnsolepure-javascript/src/style.css
new file mode 100644
index 0000000..4da521c
--- /dev/null
+++ b/turnsolepure-javascript/src/style.css
@@ -0,0 +1,35 @@
+* {
+  margin: 0;
+  padding: 0;
+  color: #FFF;
+}
+
+canvas#canvas {
+  display: block;
+  background: #000;
+}
+
+ul#navigation {
+  display: none;
+}
+
+@media screen and (min-width: 48rem) {
+
+  ul#navigation {
+    display: block;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 0;
+    -webkit-writing-mode: vertical-rl;
+        -ms-writing-mode: tb-rl;
+            writing-mode: vertical-rl;
+    text-align: center;
+    margin-right: 1.6rem;
+    font-size: 0.8rem;
+  }
+  ul#navigation > li {
+    display: inline-block;
+  }
+
+}
\ No newline at end of file
diff --git a/types-of-coffee-pure-css/README.markdown b/types-of-coffee-pure-css/README.markdown
new file mode 100644
index 0000000..f151b45
--- /dev/null
+++ b/types-of-coffee-pure-css/README.markdown
@@ -0,0 +1,4 @@
+# Types of Coffee | Pure CSS
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/juliepark/pen/odrjom](https://codepen.io/juliepark/pen/odrjom).
+
+ Coffee Infographic on the types of coffee - all done in pure CSS! What is your favorite type of coffee? Mine is Americano and Cappuccino :)
\ No newline at end of file
diff --git a/types-of-coffee-pure-css/dist/index.html b/types-of-coffee-pure-css/dist/index.html
new file mode 100644
index 0000000..1f0e646
--- /dev/null
+++ b/types-of-coffee-pure-css/dist/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Types of Coffee | Pure CSS</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <div class="bar">
+    <div class="bold"><h3>Bold</h3></div>
+    <div class="circle top"></div>
+    <div class="circle middle"></div>
+    <div class="circle bottom"></div>
+    <div class="creamy"><h3>Creamy</h3></div>
+  </div>
+  <div class="coffee-cups">
+    <div class="cup-small doppio">
+      <div class="handle"></div>
+    </div>
+    <div class="cup americano">
+      <div class="handle"></div>
+    </div>
+    <div class="cup-small macchiato">
+      <div class="handle"></div>
+    </div>
+    <div class="cup-small flatwhite">
+      <div class="handle"></div>
+    </div>
+    <div class="cup cappuccino">
+      <div class="handle"></div>
+    </div>
+    <div class="cup-long latte">
+      <div class="handle"></div>
+      <div class="bottom-handle"></div>
+    </div>
+  </div>
+  <div class="info">
+    <div class="first">
+      <h1>doppio</h1>
+      <p>Double shot of espresso. Straight.</p>
+    </div>
+    <div class="second">
+      <h1>americano</h1>
+      <p>Shots of espresso diluted with water</p>
+    </div>
+    <div class="third">
+      <h1>Macchiato</h1>
+      <p>Espresso with a dash of frothy foamed milk.</p>
+    </div>
+    <div class="fourth">
+      <h1>Flat White</h1>
+      <p>Double shot of espresso with steamed milk.</p>
+    </div>
+    <div class="fifth">
+      <h1>Cappuccino</h1>
+      <p>Double shot of espresso topped with an airy thick layer of foamed milk.</p>
+    </div>
+    <div class="sixth">
+      <h1>Caffe Latte</h1>
+      <p>A shot of espresso in steamed milk lightly topped with foam.</p>
+    </div>
+    
+  </div>
+</div>
+
+<div class="key">
+  <div class="circle espresso"><p class="small">espresso</p></div>
+  <div class="circle milk"><p class="small">steamed milk</p></div>
+  <div class="circle foam"><p class="small">milk foam</p></div>
+  <div class="circle water"><p class="small">water</p></div>
+</div>
+
+<footer>
+  <p>made by <a href="https://codepen.io/juliepark"> julie</a> ♡
+</footer>
+<!-- partial -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/types-of-coffee-pure-css/dist/style.css b/types-of-coffee-pure-css/dist/style.css
new file mode 100644
index 0000000..f07c1eb
--- /dev/null
+++ b/types-of-coffee-pure-css/dist/style.css
@@ -0,0 +1,269 @@
+@import url("https://fonts.googleapis.com/css?family=Lato|Lora");
+html {
+  display: grid;
+  min-height: 100%;
+}
+
+body {
+  background: #252C32;
+  display: grid;
+  font-family: "Lato", sans-serif;
+  text-transform: uppercase;
+}
+
+h3 {
+  font-size: 0.8em;
+  letter-spacing: 1px;
+  font-weight: 100;
+}
+
+.container {
+  position: relative;
+  margin: auto;
+  overflow: hidden;
+  width: 500px;
+  height: 700px;
+}
+
+.bar {
+  position: absolute;
+  height: 85%;
+  width: 2px;
+  left: 7%;
+  top: 7.5%;
+  background: #F4E8DA;
+}
+
+.circle {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  border-radius: 50%;
+  left: -5px;
+  border: 1px solid #F4E8DA;
+  box-shadow: 0px 0px 7px #f4e8da;
+}
+
+.top {
+  background: #5B4644;
+  top: -1%;
+}
+
+.middle {
+  background: #87624F;
+  top: 38%;
+}
+
+.bottom {
+  background: #DAB7A3;
+  bottom: -1%;
+}
+
+.bold {
+  color: #87624F;
+  position: absolute;
+  top: -7%;
+  left: -17px;
+}
+
+.creamy {
+  color: #DAB7A3;
+  position: absolute;
+  bottom: -7%;
+  left: -27px;
+}
+
+.info {
+  width: 55%;
+  height: 100%;
+  position: absolute;
+  left: 43%;
+}
+
+.coffee-cups {
+  width: 40%;
+  height: 100%;
+  position: absolute;
+  left: 10%;
+  top: 3%;
+}
+
+.handle {
+  position: absolute;
+  height: 20px;
+  width: 15px;
+  background: transparent;
+  border-radius: 50% 30%;
+  left: 95%;
+  top: 10%;
+  z-index: -1;
+  border: 2px solid #F4E8DA;
+}
+
+.cup {
+  position: absolute;
+  width: 70px;
+  height: 55px;
+  background: #252C32;
+  border: 2px solid #F4E8DA;
+  border-radius: 0 0 5rem 5rem;
+  left: 20%;
+}
+
+.cup-small {
+  position: absolute;
+  width: 55px;
+  height: 40px;
+  background: #252C32;
+  border: 2px solid #F4E8DA;
+  border-radius: 0 0 5rem 5rem;
+  left: 23%;
+}
+
+.cup-long {
+  position: absolute;
+  width: 60px;
+  height: 70px;
+  background: #252C32;
+  border: 2px solid #F4E8DA;
+  border-radius: 10% 10% 50% 50%;
+  left: 22%;
+}
+
+.doppio {
+  top: 5%;
+  background: linear-gradient(to bottom, #252C32 40%, #5B4644 40%, #87624F 70%);
+}
+
+.americano {
+  top: 18.5%;
+  background: linear-gradient(to bottom, #252C32 13%, #859FB5 13%, #859FB5 50%, #87624F 50%);
+}
+
+.macchiato {
+  top: 35%;
+  background: linear-gradient(to bottom, #252C32 20%, #F4E8DA 20%, #F4E8DA 40%, #87624F 40%);
+}
+
+.flatwhite {
+  top: 50%;
+  background: linear-gradient(to bottom, #252C32 10%, #F4E8DA 10%, #DAB7A3 60%, #87624F 65%, #5B4644 90%);
+}
+
+.cappuccino {
+  top: 64%;
+  background: linear-gradient(to bottom, #F4E8DA 50%, #DAB7A3 50%, #DAB7A3 55%, #87624F 60%);
+}
+
+.latte {
+  top: 81%;
+  background: linear-gradient(to bottom, #252C32 5%, #F4E8DA 5%, #F4E8DA 30%, #DAB7A3 30%, #DAB7A3 70%, #87624F 70%);
+}
+
+h1 {
+  color: #F4E8DA;
+  font-size: 1em;
+  letter-spacing: 3px;
+}
+
+p {
+  color: #F4E8DA;
+  font-family: "Lora", serif;
+  text-transform: none;
+  font-size: 0.7em;
+  letter-spacing: 0.5px;
+  margin-top: -5px;
+}
+
+.first, .second, .third, .fourth, .fifth, .sixth {
+  position: absolute;
+}
+
+.first {
+  top: 7%;
+}
+
+.second {
+  top: 21%;
+}
+
+.third {
+  top: 36%;
+}
+
+.fourth {
+  top: 52%;
+}
+
+.fifth {
+  top: 65%;
+}
+
+.sixth {
+  top: 83%;
+}
+
+.small {
+  margin-left: 20px;
+  margin-top: -1px;
+  font-family: "Lato", sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+
+.key {
+  position: relative;
+  margin: auto;
+  width: 500px;
+  height: 200px;
+}
+
+.espresso {
+  background: #5B4644;
+  position: absolute;
+  left: 17%;
+}
+
+.milk {
+  background: #DAB7A3;
+  position: absolute;
+  left: 40%;
+}
+
+.foam {
+  background: #F4E8DA;
+  position: absolute;
+  left: 63%;
+}
+
+.water {
+  background: #859FB5;
+  position: absolute;
+  left: 83%;
+}
+
+footer {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  text-align: center;
+  font-size: 1em;
+  text-transform: uppercase;
+  padding: 10px;
+  color: #EA7996;
+}
+footer p {
+  text-transform: uppercase;
+  color: #DAB7A3;
+  font-family: "Lato", sans-serif;
+  letter-spacing: 3px;
+}
+footer a {
+  font-family: "Lato", sans-serif;
+  text-transform: uppercase;
+  color: #ffffff;
+  text-decoration: none;
+}
+footer a:hover {
+  color: #859FB5;
+}
diff --git a/types-of-coffee-pure-css/license.txt b/types-of-coffee-pure-css/license.txt
new file mode 100644
index 0000000..be585fa
--- /dev/null
+++ b/types-of-coffee-pure-css/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Julie Park (https://codepen.io/juliepark/pen/odrjom)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/types-of-coffee-pure-css/src/index.html b/types-of-coffee-pure-css/src/index.html
new file mode 100644
index 0000000..dd5e391
--- /dev/null
+++ b/types-of-coffee-pure-css/src/index.html
@@ -0,0 +1,68 @@
+<div class="container">
+  <div class="bar">
+    <div class="bold"><h3>Bold</h3></div>
+    <div class="circle top"></div>
+    <div class="circle middle"></div>
+    <div class="circle bottom"></div>
+    <div class="creamy"><h3>Creamy</h3></div>
+  </div>
+  <div class="coffee-cups">
+    <div class="cup-small doppio">
+      <div class="handle"></div>
+    </div>
+    <div class="cup americano">
+      <div class="handle"></div>
+    </div>
+    <div class="cup-small macchiato">
+      <div class="handle"></div>
+    </div>
+    <div class="cup-small flatwhite">
+      <div class="handle"></div>
+    </div>
+    <div class="cup cappuccino">
+      <div class="handle"></div>
+    </div>
+    <div class="cup-long latte">
+      <div class="handle"></div>
+      <div class="bottom-handle"></div>
+    </div>
+  </div>
+  <div class="info">
+    <div class="first">
+      <h1>doppio</h1>
+      <p>Double shot of espresso. Straight.</p>
+    </div>
+    <div class="second">
+      <h1>americano</h1>
+      <p>Shots of espresso diluted with water</p>
+    </div>
+    <div class="third">
+      <h1>Macchiato</h1>
+      <p>Espresso with a dash of frothy foamed milk.</p>
+    </div>
+    <div class="fourth">
+      <h1>Flat White</h1>
+      <p>Double shot of espresso with steamed milk.</p>
+    </div>
+    <div class="fifth">
+      <h1>Cappuccino</h1>
+      <p>Double shot of espresso topped with an airy thick layer of foamed milk.</p>
+    </div>
+    <div class="sixth">
+      <h1>Caffe Latte</h1>
+      <p>A shot of espresso in steamed milk lightly topped with foam.</p>
+    </div>
+    
+  </div>
+</div>
+
+<div class="key">
+  <div class="circle espresso"><p class="small">espresso</p></div>
+  <div class="circle milk"><p class="small">steamed milk</p></div>
+  <div class="circle foam"><p class="small">milk foam</p></div>
+  <div class="circle water"><p class="small">water</p></div>
+</div>
+
+<footer>
+  <p>made by <a href="https://codepen.io/juliepark"> julie</a> ♡
+</footer>
\ No newline at end of file
diff --git a/types-of-coffee-pure-css/src/style.scss b/types-of-coffee-pure-css/src/style.scss
new file mode 100644
index 0000000..fb6c600
--- /dev/null
+++ b/types-of-coffee-pure-css/src/style.scss
@@ -0,0 +1,283 @@
+@import url('https://fonts.googleapis.com/css?family=Lato|Lora');
+
+$dark: #252C32;
+$brown: #5B4644;
+$coffee: #87624F;
+$tan: #DAB7A3;
+$white: #F4E8DA;
+$water: #859FB5;
+
+$sans: 'Lato', sans-serif;
+$serif: 'Lora', serif;
+
+html {
+  display: grid;
+  min-height: 100%;
+}
+
+body {
+  background: $dark;
+  display: grid;
+  font-family: $sans;
+  text-transform: uppercase;
+}
+
+h3 {
+  font-size: 0.8em;
+  letter-spacing: 1px;
+  font-weight: 100;
+}
+
+.container {
+  position: relative;
+  margin: auto;
+  overflow: hidden;
+  width: 500px;
+  height: 700px;
+}
+
+.bar {
+  position: absolute;
+  height: 85%;
+  width: 2px;
+  left: 7%;
+  top: 7.5%;
+  background: $white;
+}
+
+.circle {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  border-radius: 50%;
+  left: -5px;
+  border: 1px solid $white;
+  box-shadow: 0px 0px 7px rgba($white, 100%);
+}
+
+.top {
+  background: $brown;
+  top: -1%;
+}
+.middle {
+  background: $coffee;
+  top: 38%;
+}
+.bottom {
+  background: $tan;
+  bottom: -1%;
+}
+
+.bold {
+  color: $coffee;
+  position: absolute;
+  top: -7%;
+  left: -17px;
+}
+
+.creamy {
+  color: $tan;
+  position: absolute;
+  bottom: -7%;
+  left: -27px;
+}
+
+.info {
+  width: 55%;
+  height: 100%;
+  position: absolute;
+  left: 43%;
+}
+
+//coffee cup drawings
+
+.coffee-cups {
+  width: 40%;
+  height: 100%;
+  position: absolute;
+  left: 10%;
+  top: 3%;
+}
+
+.handle {
+  position: absolute;
+  height: 20px;
+  width: 15px;
+  background: transparent;
+  border-radius: 50% 30%;
+  left: 95%;
+  top: 10%;
+  z-index: -1;
+  border: 2px solid $white;
+}
+
+.cup {
+  position: absolute;
+  width: 70px;
+  height: 55px;
+  background: $dark;
+  border: 2px solid $white;
+  border-radius: 0 0 5rem 5rem;
+  left: 20%;
+}
+
+.cup-small {
+  position: absolute;
+  width: 55px;
+  height: 40px;
+  background: $dark;
+  border: 2px solid $white;
+  border-radius: 0 0 5rem 5rem;
+  left: 23%;
+}
+
+.cup-long {
+  position: absolute;
+  width: 60px;
+  height: 70px;
+  background: $dark;
+  border: 2px solid $white;
+  border-radius: 10% 10% 50% 50%;
+  left: 22%;
+}
+
+.doppio {
+  top: 5%;
+  background: linear-gradient(to bottom, $dark 40%, $brown 40%, $coffee 70%);
+}
+
+.americano {
+  top: 18.5%;
+  background: linear-gradient(to bottom, $dark 13%, $water 13%, $water 50%, $coffee 50%);
+}
+
+.macchiato {
+  top: 35%;
+   background: linear-gradient(to bottom, $dark 20%, $white 20%, $white 40%, $coffee 40%);
+}
+
+.flatwhite {
+  top: 50%;
+  background: linear-gradient(to bottom, $dark 10%, $white 10%, $tan 60%, $coffee 65%, $brown 90%);
+}
+
+.cappuccino {
+  top: 64%;
+  background: linear-gradient(to bottom, $white 50%, $tan 50%, $tan 55%, $coffee 60%);
+}
+
+.latte {
+  top: 81%;
+  background: linear-gradient(to bottom, $dark 5%, $white 5%, $white 30%, $tan 30%, $tan 70%, $coffee 70%);
+}
+
+//description
+h1 {
+  color: $white;
+  font-size: 1em;
+  letter-spacing: 3px;
+}
+
+p {
+  color: $white;
+  font-family: $serif;
+  text-transform: none;
+  font-size: 0.7em;
+  letter-spacing: 0.5px;
+  margin-top: -5px;
+}
+
+.first, .second, .third, .fourth, .fifth, .sixth {
+  position: absolute;
+}
+
+.first {
+  top: 7%;
+}
+
+.second {
+  top: 21%;
+}
+
+.third {
+  top: 36%;
+}
+
+.fourth {
+  top: 52%;
+}
+
+.fifth {
+  top: 65%;
+}
+
+.sixth {
+  top: 83%;
+}
+
+
+// key for the colors
+.small {
+  margin-left: 20px;
+  margin-top: -1px;
+  font-family: $sans;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+
+.key {
+  position: relative;
+  margin: auto;
+  width: 500px;
+  height: 200px;
+}
+
+.espresso {
+  background: $brown;
+  position: absolute;
+  left: 17%;
+}
+
+.milk {
+  background: $tan;
+  position: absolute;
+  left: 40%;
+}
+
+.foam {
+  background: $white;
+  position: absolute;
+  left: 63%;
+}
+
+.water {
+  background: $water;
+  position: absolute;
+  left: 83%;
+}
+
+footer {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  text-align: center;
+  font-size: 1em;
+  text-transform: uppercase;
+  padding: 10px;
+  color: #EA7996;
+  p {
+    text-transform: uppercase;
+    color: $tan;
+    font-family: $sans;
+    letter-spacing: 3px;
+  }
+  a {
+    font-family: $sans;
+    text-transform: uppercase;
+    color: #ffffff;
+    text-decoration: none;
+    &:hover {
+      color: $water;
+    }
+  }
+}
\ No newline at end of file
diff --git a/typesetting-hover-over-the-text/README.markdown b/typesetting-hover-over-the-text/README.markdown
new file mode 100644
index 0000000..53c7b5f
--- /dev/null
+++ b/typesetting-hover-over-the-text/README.markdown
@@ -0,0 +1,7 @@
+# Typesetting (hover over the text)
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/DXC/pen/aKwYRz](https://codepen.io/DXC/pen/aKwYRz).
+
+ I spent too much time on this...<br>I regret nothing.
+<br>
+<br>
+I also maybe cheated and touched the HTML a little bit... 😱
\ No newline at end of file
diff --git a/typesetting-hover-over-the-text/dist/index.html b/typesetting-hover-over-the-text/dist/index.html
new file mode 100644
index 0000000..06b0ea2
--- /dev/null
+++ b/typesetting-hover-over-the-text/dist/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Typesetting (hover over the text)</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<article class="A">
+	<div class="insight">
+		<article class="B" id="B">
+			<div class="content">
+				<div class="content-head">
+					<h1>A Tremendous Post Title</h1>
+					<p><strong><em>June 11th, 2018</em> by Writerton McWriterpants</strong></p>
+					<hr>
+					<h2>An Inspiring Subtitle</h2>
+				</div>
+				<div class="content-feature">
+					<img class="plax" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cherry-blossoms-unsplash.jpg" alt="cherry blossoms">
+				</div>
+				<div class="content-body">
+					<p>Spring has sprung! In this tremendous blog article we're going to cover some points. This is where I'm telling you that what I'm going to tell you. Then I'm going to tell you those things. Then, because your special, and I'm to tell you what I told you. <strong>Here comes a&nbsp;blockquote:</strong></p>
+					<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis fringilla dolor, a sollicitudin turpis posuere elementum.</blockquote>
+					<p>That quote was from the famous latin composer... nope, just kidding. Emmet generated it because that's a feature that it has. In the next section, we're really going to get into the meat of this blog&nbsp;post.</p>
+					<h3>All the Good Stuff is in These Paragraphs</h3>
+					<p><em>Donec accumsan lacinia blandit</em>. Nunc ornare ante id sapien ullamcorper sollicitudin. Vestibulum vel odio sapien. Nam quis est maximus, cursus nibh at, dictum lorem. Donec vestibulum quam quis lorem egestas semper. Nullam et congue libero, a ultricies urna. Vivamus sed efficitur nisl. Fusce dapibus, lectus vel laoreet mattis, quam tellus fermentum diam, et luctus sem tortor in lorem. Nunc interdum ipsum ligula. Pellentesque sed diam&nbsp;erat.</p>
+					<p>Aliquam porta metus nec erat ullamcorper accumsan. Etiam egestas sit amet ante vitae lacinia. Donec ultricies eu nisl vel mattis. Suspendisse vestibulum sed velit lacinia imperdiet. Vivamus in nibh ullamcorper, laoreet arcu ut, gravida nulla. Curabitur in diam tempus, cursus mauris a, posuere tellus. Pellentesque purus orci, commodo non ex eu, porttitor sagittis erat. Vestibulum at orci nec turpis pharetra imperdiet quis ut urna. Donec eget accumsan tortor. In interdum mauris at velit gravida, in euismod lacus sodales. Curabitur pellentesque nunc nulla, id convallis enim eleifend&nbsp;vel.</p>
+					<p>Vivamus mollis fringilla dolor, a sollicitudin turpis posuere elementum. Quisque risus dolor, rhoncus sed imperdiet vel, tristique ac nisi. Sed dapibus aliquam nibh, at posuere dolor lobortis ac. Nam quis urna ac magna facilisis blandit. Maecenas vel arcu nec ipsum venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam semper ac sem at interdum. Ut massa est, egestas id sem at, commodo consequat&nbsp;velit.</p>
+					<h3>Some Key Takeaways</h3>
+					<p>After reading this tremendous blog article, these are the salient&nbsp;points:</p>
+					<ul>
+						<li>A bullet point</li>
+						<li>Another one
+							<ol>
+								<li>Sub point one</li>
+								<li>Sub point two</li>
+							</ol>
+						</li>
+						<li>Another one</li>
+						<li>How about four?</li>
+					</ul>
+					<p>In a pellentesque eros. Morbi elementum venenatis est quis cursus. Nunc vitae mi maximus, volutpat enim nec, ultricies libero. Donec pharetra dui arcu, vel sagittis dolor scelerisque&nbsp;nec!</p>
+				</div>
+			</div>
+		</article>
+	</div>
+
+	<div class="content">
+		<div class="content-head">
+			<h1>A Tremendous Post Title</h1>
+			<p><strong><em>June 11th, 2018</em> by Writerton McWriterpants</strong></p>
+			<hr>
+			<h2>An Inspiring Subtitle</h2>
+		</div>
+		<div class="content-feature">
+			<img class="plax" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cherry-blossoms-unsplash.jpg" alt="cherry blossoms">
+		</div>
+		<div class="content-body">
+			<p>Spring has sprung! In this tremendous blog article we're going to cover some points. This is where I'm telling you that what I'm going to tell you. Then I'm going to tell you those things. Then, because your special, and I'm to tell you what I told you. <strong>Here comes a&nbsp;blockquote:</strong></p>
+			<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis fringilla dolor, a sollicitudin turpis posuere elementum.</blockquote>
+			<p>That quote was from the famous latin composer... nope, just kidding. Emmet generated it because that's a feature that it has. In the next section, we're really going to get into the meat of this blog&nbsp;post.</p>
+			<h3>All the Good Stuff is in These Paragraphs</h3>
+			<p><em>Donec accumsan lacinia blandit</em>. Nunc ornare ante id sapien ullamcorper sollicitudin. Vestibulum vel odio sapien. Nam quis est maximus, cursus nibh at, dictum lorem. Donec vestibulum quam quis lorem egestas semper. Nullam et congue libero, a ultricies urna. Vivamus sed efficitur nisl. Fusce dapibus, lectus vel laoreet mattis, quam tellus fermentum diam, et luctus sem tortor in lorem. Nunc interdum ipsum ligula. Pellentesque sed diam&nbsp;erat.</p>
+			<p>Aliquam porta metus nec erat ullamcorper accumsan. Etiam egestas sit amet ante vitae lacinia. Donec ultricies eu nisl vel mattis. Suspendisse vestibulum sed velit lacinia imperdiet. Vivamus in nibh ullamcorper, laoreet arcu ut, gravida nulla. Curabitur in diam tempus, cursus mauris a, posuere tellus. Pellentesque purus orci, commodo non ex eu, porttitor sagittis erat. Vestibulum at orci nec turpis pharetra imperdiet quis ut urna. Donec eget accumsan tortor. In interdum mauris at velit gravida, in euismod lacus sodales. Curabitur pellentesque nunc nulla, id convallis enim eleifend&nbsp;vel.</p>
+			<p>Vivamus mollis fringilla dolor, a sollicitudin turpis posuere elementum. Quisque risus dolor, rhoncus sed imperdiet vel, tristique ac nisi. Sed dapibus aliquam nibh, at posuere dolor lobortis ac. Nam quis urna ac magna facilisis blandit. Maecenas vel arcu nec ipsum venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam semper ac sem at interdum. Ut massa est, egestas id sem at, commodo consequat&nbsp;velit.</p>
+			<h3>Some Key Takeaways</h3>
+			<p>After reading this tremendous blog article, these are the salient&nbsp;points:</p>
+			<ul>
+				<li>A bullet point</li>
+				<li>Another one
+					<ol>
+						<li>Sub point one</li>
+						<li>Sub point two</li>
+					</ol>
+				</li>
+				<li>Another one</li>
+				<li>How about four?</li>
+			</ul>
+			<p>In a pellentesque eros. Morbi elementum venenatis est quis cursus. Nunc vitae mi maximus, volutpat enim nec, ultricies libero. Donec pharetra dui arcu, vel sagittis dolor scelerisque&nbsp;nec!</p>
+		</div>
+	</div>
+</article>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/typesetting-hover-over-the-text/dist/script.js b/typesetting-hover-over-the-text/dist/script.js
new file mode 100644
index 0000000..dbff573
--- /dev/null
+++ b/typesetting-hover-over-the-text/dist/script.js
@@ -0,0 +1,37 @@
+//It's messy, don't look at it lol
+
+function resize() {
+	var actualInnerWidth = document.body.clientWidth;
+	document.getElementById("B").style.width = actualInnerWidth + "px";
+}
+
+resize();
+window.onresize = function() {
+	resize();
+};
+
+/*** *** *** *** ***/
+
+$('.A').mousemove(function(e){
+	var offs = $(this).offset(),
+			p    = {x:offs.left, y:offs.top},
+			mPos = {x:e.pageX, y:e.pageY},
+			x    = mPos.x - p.x - ($('.insight').width()/2),
+			y    = mPos.y - p.y - ($('.insight').height()/2);
+	$('.insight', this).css({left:x, top:y});
+	$('.B', this).css({left:-x, top:-y});
+});
+
+/*** *** *** *** ***/
+
+$(document).ready(function(){
+	$('img').each(function(){
+		var src = $(this).attr('src');
+		$(this).css('background-image', 'url(' + src + ')');
+	});
+});
+
+$(window).on("scroll", function() {
+	var yScroll = $(this).scrollTop();
+	$(".plax").css({"background-position": '50% ' + ((yScroll / 10) + 0) + '%'});
+});
\ No newline at end of file
diff --git a/typesetting-hover-over-the-text/dist/style.css b/typesetting-hover-over-the-text/dist/style.css
new file mode 100644
index 0000000..f0540a5
--- /dev/null
+++ b/typesetting-hover-over-the-text/dist/style.css
@@ -0,0 +1,326 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 100;
+  src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEzAdKg.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc6CsE.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzc.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 500;
+  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc6CsE.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic6CsE.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 900;
+  src: local('Roboto Black Italic'), local('Roboto-BlackItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc6CsE.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxIIzc.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc9.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc9.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc9.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'ComicSansMS';
+  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/581960/ComicSansMS.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+body {
+  background-color: #fff;
+  overflow-x: hidden;
+  margin: 0;
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'Roboto', sans-serif;
+  font-size: 100%;
+}
+article.A {
+  background-color: #fff;
+  width: 100%;
+  overflow: hidden;
+  margin: 0 auto;
+  position: relative;
+}
+article.B {
+  background-color: #fff;
+  position: relative;
+  top: 0;
+  left: 0;
+  font-family: "Comic Sans MS", ComicSansMS !important;
+}
+article.B .content .content-body p:first-of-type:first-letter {
+  font-family: "Comic Sans MS", ComicSansMS !important;
+}
+article.B h1,
+article.B h2,
+article.B h3,
+article.B blockquote {
+  font-family: "Comic Sans MS", ComicSansMS !important;
+}
+article .insight {
+  border-radius: 100%;
+  box-shadow: 0px 0px 0px 1px #000;
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9001;
+}
+.content {
+  border-left: 1px solid rgba(0, 0, 0, 0.25);
+  border-right: 1px solid rgba(0, 0, 0, 0.25);
+  width: calc(100% - 122px);
+  width: -o-calc(100% - 122px);
+  width: -moz-calc(100% - 122px);
+  width: -webkit-calc(100% - 122px);
+  width: expression(100% - 122px);
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 60px;
+}
+@media all and (max-width: 900px) {
+  .content {
+    border-left: none;
+    border-right: none;
+    width: calc(100% - 120px);
+    width: -o-calc(100% - 120px);
+    width: -moz-calc(100% - 120px);
+    width: -webkit-calc(100% - 120px);
+    width: expression(100% - 120px);
+  }
+}
+@media all and (max-width: 768px) {
+  .content {
+    width: calc(100% - 80px);
+    width: -o-calc(100% - 80px);
+    width: -moz-calc(100% - 80px);
+    width: -webkit-calc(100% - 80px);
+    width: expression(100% - 80px);
+    padding: 40px 40px 160px;
+  }
+}
+.content .content-head {
+  text-align: center;
+}
+@media all and (max-width: 768px) {
+  .content .content-head {
+    text-align: left;
+  }
+}
+.content .content-feature {
+  background-color: #eee;
+  width: 100%;
+  height: 400px;
+  margin: 2em auto;
+  display: inline-block;
+  position: relative;
+}
+.content .content-feature img {
+  background-position: 50% 0%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 0;
+  height: 0;
+  padding: 200px 52.5%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+@media all and (max-width: 768px) {
+  .content .content-feature {
+    height: 300px;
+  }
+  .content .content-feature img {
+    padding: 150px 52.5%;
+  }
+}
+.content .content-body {
+  -webkit-columns: 340px 2;
+  -moz-columns: 340px 2;
+  columns: 340px 2;
+  -webkit-column-gap: 40px;
+  -moz-column-gap: 40px;
+  column-gap: 40px;
+}
+.content .content-body p:first-of-type {
+  margin-top: 0;
+}
+.content .content-body p:first-of-type:first-letter {
+  padding: 4px 8px 0px 3px;
+  float: left;
+  font-family: 'Georgia', serif;
+  font-size: 75px;
+  line-height: 60px;
+}
+hr {
+  border: 2px solid rgba(0, 0, 0, 0.8);
+  width: 50%;
+  height: 0px;
+  margin: 1em auto;
+}
+@media all and (max-width: 768px) {
+  hr {
+    margin: 1em 0;
+  }
+}
+p {
+  font-size: 1em;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.375em;
+}
+@media all and (max-width: 768px) {
+  p {
+    line-height: 1.25em;
+  }
+}
+h1,
+h2,
+h3,
+blockquote {
+  font-family: 'Georgia', serif;
+}
+h1 {
+  margin: 0 auto;
+  font-size: 3em;
+  font-weight: 700;
+  font-style: normal;
+  line-height: 1.05em;
+}
+@media all and (max-width: 900px) {
+  h1 {
+    font-size: 2.5em;
+    line-height: 1.125em;
+  }
+}
+@media all and (max-width: 768px) {
+  h1 {
+    font-size: 2em;
+    line-height: 1.25em;
+  }
+}
+h2 {
+  margin: 0 auto;
+  font-size: 2.25em;
+  font-weight: 700;
+  font-style: normal;
+  line-height: 1.25em;
+}
+@media all and (max-width: 900px) {
+  h2 {
+    font-size: 2em;
+  }
+}
+@media all and (max-width: 768px) {
+  h2 {
+    font-size: 1.625em;
+    line-height: 1.15384615em;
+  }
+}
+h3 {
+  margin: 1.5em auto 0.83em auto;
+  font-size: 1.75em;
+  font-weight: 700;
+  font-style: normal;
+  line-height: 1.25em;
+}
+@media all and (max-width: 900px) {
+  h3 {
+    font-size: 1.5em;
+  }
+}
+@media all and (max-width: 768px) {
+  h3 {
+    font-size: 1.375em;
+    line-height: 1.13636364em;
+  }
+}
+blockquote {
+  border-left: 4px solid rgba(0, 0, 0, 0.8);
+  margin: 1.5em 20px 1.5em 0px;
+  padding-left: 20px;
+  font-size: 1.25em;
+  font-weight: 500;
+  font-style: italic;
+  line-height: 1.45833333em;
+}
+@media all and (max-width: 768px) {
+  blockquote {
+    font-size: 1.15em;
+    line-height: 1.15em;
+  }
+}
+blockquote:before {
+  content: "\201C\00a0";
+  font-size: 1.5em;
+  vertical-align: text-top;
+}
+blockquote:after {
+  content: "\00a0\201D";
+  font-size: 1.5em;
+  vertical-align: text-top;
+}
+ul {
+  line-height: 1.5em;
+  list-style-type: circle;
+}
+ol {
+  list-style-type: square;
+}
diff --git a/typesetting-hover-over-the-text/license.txt b/typesetting-hover-over-the-text/license.txt
new file mode 100644
index 0000000..dbacba0
--- /dev/null
+++ b/typesetting-hover-over-the-text/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Daniel Constance (https://codepen.io/DXC/pen/aKwYRz)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/typesetting-hover-over-the-text/src/index.html b/typesetting-hover-over-the-text/src/index.html
new file mode 100644
index 0000000..4188ba2
--- /dev/null
+++ b/typesetting-hover-over-the-text/src/index.html
@@ -0,0 +1,75 @@
+<article class="A">
+	<div class="insight">
+		<article class="B" id="B">
+			<div class="content">
+				<div class="content-head">
+					<h1>A Tremendous Post Title</h1>
+					<p><strong><em>June 11th, 2018</em> by Writerton McWriterpants</strong></p>
+					<hr>
+					<h2>An Inspiring Subtitle</h2>
+				</div>
+				<div class="content-feature">
+					<img class="plax" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cherry-blossoms-unsplash.jpg" alt="cherry blossoms">
+				</div>
+				<div class="content-body">
+					<p>Spring has sprung! In this tremendous blog article we're going to cover some points. This is where I'm telling you that what I'm going to tell you. Then I'm going to tell you those things. Then, because your special, and I'm to tell you what I told you. <strong>Here comes a&nbsp;blockquote:</strong></p>
+					<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis fringilla dolor, a sollicitudin turpis posuere elementum.</blockquote>
+					<p>That quote was from the famous latin composer... nope, just kidding. Emmet generated it because that's a feature that it has. In the next section, we're really going to get into the meat of this blog&nbsp;post.</p>
+					<h3>All the Good Stuff is in These Paragraphs</h3>
+					<p><em>Donec accumsan lacinia blandit</em>. Nunc ornare ante id sapien ullamcorper sollicitudin. Vestibulum vel odio sapien. Nam quis est maximus, cursus nibh at, dictum lorem. Donec vestibulum quam quis lorem egestas semper. Nullam et congue libero, a ultricies urna. Vivamus sed efficitur nisl. Fusce dapibus, lectus vel laoreet mattis, quam tellus fermentum diam, et luctus sem tortor in lorem. Nunc interdum ipsum ligula. Pellentesque sed diam&nbsp;erat.</p>
+					<p>Aliquam porta metus nec erat ullamcorper accumsan. Etiam egestas sit amet ante vitae lacinia. Donec ultricies eu nisl vel mattis. Suspendisse vestibulum sed velit lacinia imperdiet. Vivamus in nibh ullamcorper, laoreet arcu ut, gravida nulla. Curabitur in diam tempus, cursus mauris a, posuere tellus. Pellentesque purus orci, commodo non ex eu, porttitor sagittis erat. Vestibulum at orci nec turpis pharetra imperdiet quis ut urna. Donec eget accumsan tortor. In interdum mauris at velit gravida, in euismod lacus sodales. Curabitur pellentesque nunc nulla, id convallis enim eleifend&nbsp;vel.</p>
+					<p>Vivamus mollis fringilla dolor, a sollicitudin turpis posuere elementum. Quisque risus dolor, rhoncus sed imperdiet vel, tristique ac nisi. Sed dapibus aliquam nibh, at posuere dolor lobortis ac. Nam quis urna ac magna facilisis blandit. Maecenas vel arcu nec ipsum venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam semper ac sem at interdum. Ut massa est, egestas id sem at, commodo consequat&nbsp;velit.</p>
+					<h3>Some Key Takeaways</h3>
+					<p>After reading this tremendous blog article, these are the salient&nbsp;points:</p>
+					<ul>
+						<li>A bullet point</li>
+						<li>Another one
+							<ol>
+								<li>Sub point one</li>
+								<li>Sub point two</li>
+							</ol>
+						</li>
+						<li>Another one</li>
+						<li>How about four?</li>
+					</ul>
+					<p>In a pellentesque eros. Morbi elementum venenatis est quis cursus. Nunc vitae mi maximus, volutpat enim nec, ultricies libero. Donec pharetra dui arcu, vel sagittis dolor scelerisque&nbsp;nec!</p>
+				</div>
+			</div>
+		</article>
+	</div>
+
+	<div class="content">
+		<div class="content-head">
+			<h1>A Tremendous Post Title</h1>
+			<p><strong><em>June 11th, 2018</em> by Writerton McWriterpants</strong></p>
+			<hr>
+			<h2>An Inspiring Subtitle</h2>
+		</div>
+		<div class="content-feature">
+			<img class="plax" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cherry-blossoms-unsplash.jpg" alt="cherry blossoms">
+		</div>
+		<div class="content-body">
+			<p>Spring has sprung! In this tremendous blog article we're going to cover some points. This is where I'm telling you that what I'm going to tell you. Then I'm going to tell you those things. Then, because your special, and I'm to tell you what I told you. <strong>Here comes a&nbsp;blockquote:</strong></p>
+			<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis fringilla dolor, a sollicitudin turpis posuere elementum.</blockquote>
+			<p>That quote was from the famous latin composer... nope, just kidding. Emmet generated it because that's a feature that it has. In the next section, we're really going to get into the meat of this blog&nbsp;post.</p>
+			<h3>All the Good Stuff is in These Paragraphs</h3>
+			<p><em>Donec accumsan lacinia blandit</em>. Nunc ornare ante id sapien ullamcorper sollicitudin. Vestibulum vel odio sapien. Nam quis est maximus, cursus nibh at, dictum lorem. Donec vestibulum quam quis lorem egestas semper. Nullam et congue libero, a ultricies urna. Vivamus sed efficitur nisl. Fusce dapibus, lectus vel laoreet mattis, quam tellus fermentum diam, et luctus sem tortor in lorem. Nunc interdum ipsum ligula. Pellentesque sed diam&nbsp;erat.</p>
+			<p>Aliquam porta metus nec erat ullamcorper accumsan. Etiam egestas sit amet ante vitae lacinia. Donec ultricies eu nisl vel mattis. Suspendisse vestibulum sed velit lacinia imperdiet. Vivamus in nibh ullamcorper, laoreet arcu ut, gravida nulla. Curabitur in diam tempus, cursus mauris a, posuere tellus. Pellentesque purus orci, commodo non ex eu, porttitor sagittis erat. Vestibulum at orci nec turpis pharetra imperdiet quis ut urna. Donec eget accumsan tortor. In interdum mauris at velit gravida, in euismod lacus sodales. Curabitur pellentesque nunc nulla, id convallis enim eleifend&nbsp;vel.</p>
+			<p>Vivamus mollis fringilla dolor, a sollicitudin turpis posuere elementum. Quisque risus dolor, rhoncus sed imperdiet vel, tristique ac nisi. Sed dapibus aliquam nibh, at posuere dolor lobortis ac. Nam quis urna ac magna facilisis blandit. Maecenas vel arcu nec ipsum venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam semper ac sem at interdum. Ut massa est, egestas id sem at, commodo consequat&nbsp;velit.</p>
+			<h3>Some Key Takeaways</h3>
+			<p>After reading this tremendous blog article, these are the salient&nbsp;points:</p>
+			<ul>
+				<li>A bullet point</li>
+				<li>Another one
+					<ol>
+						<li>Sub point one</li>
+						<li>Sub point two</li>
+					</ol>
+				</li>
+				<li>Another one</li>
+				<li>How about four?</li>
+			</ul>
+			<p>In a pellentesque eros. Morbi elementum venenatis est quis cursus. Nunc vitae mi maximus, volutpat enim nec, ultricies libero. Donec pharetra dui arcu, vel sagittis dolor scelerisque&nbsp;nec!</p>
+		</div>
+	</div>
+</article>
\ No newline at end of file
diff --git a/typesetting-hover-over-the-text/src/script.js b/typesetting-hover-over-the-text/src/script.js
new file mode 100644
index 0000000..dbff573
--- /dev/null
+++ b/typesetting-hover-over-the-text/src/script.js
@@ -0,0 +1,37 @@
+//It's messy, don't look at it lol
+
+function resize() {
+	var actualInnerWidth = document.body.clientWidth;
+	document.getElementById("B").style.width = actualInnerWidth + "px";
+}
+
+resize();
+window.onresize = function() {
+	resize();
+};
+
+/*** *** *** *** ***/
+
+$('.A').mousemove(function(e){
+	var offs = $(this).offset(),
+			p    = {x:offs.left, y:offs.top},
+			mPos = {x:e.pageX, y:e.pageY},
+			x    = mPos.x - p.x - ($('.insight').width()/2),
+			y    = mPos.y - p.y - ($('.insight').height()/2);
+	$('.insight', this).css({left:x, top:y});
+	$('.B', this).css({left:-x, top:-y});
+});
+
+/*** *** *** *** ***/
+
+$(document).ready(function(){
+	$('img').each(function(){
+		var src = $(this).attr('src');
+		$(this).css('background-image', 'url(' + src + ')');
+	});
+});
+
+$(window).on("scroll", function() {
+	var yScroll = $(this).scrollTop();
+	$(".plax").css({"background-position": '50% ' + ((yScroll / 10) + 0) + '%'});
+});
\ No newline at end of file
diff --git a/typesetting-hover-over-the-text/src/style.less b/typesetting-hover-over-the-text/src/style.less
new file mode 100644
index 0000000..fc87e7f
--- /dev/null
+++ b/typesetting-hover-over-the-text/src/style.less
@@ -0,0 +1,363 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
+
+@font-face {
+	font-family: 'ComicSansMS';
+	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/581960/ComicSansMS.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+}
+
+//variables
+@tablet: 900px;
+@mobile: 768px;
+
+body {
+	background-color: #fff;
+	overflow-x: hidden;
+	margin: 0;
+	color: rgba(0, 0, 0, 0.8);
+	font-family: 'Roboto', sans-serif;
+	font-size: 100%;
+}
+
+article {
+	&.A {
+		background-color: #fff;
+		width: 100%;
+		overflow: hidden;
+		margin: 0 auto;
+		position: relative;
+	}
+
+	&.B {
+		background-color: #fff;
+		position: relative;
+		top: 0;
+		left: 0;
+		font-family: "Comic Sans MS", ComicSansMS !important;
+
+		.content .content-body {
+			p:first-of-type:first-letter {
+				font-family: "Comic Sans MS", ComicSansMS !important;
+			}
+		}
+
+		h1, h2, h3, blockquote {
+			font-family: "Comic Sans MS", ComicSansMS !important;
+		}
+	}
+
+	.insight {
+		border-radius: 100%;
+		box-shadow: 0px 0px 0px 1px #000;
+		width: 100px;
+		height: 100px;
+		overflow: hidden;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 9001;
+	}
+}
+
+.content {
+	border-left: 1px solid rgba(0, 0, 0, 0.25);
+	border-right: 1px solid rgba(0, 0, 0, 0.25);
+	.width-calc(~"100% - 122px");
+	max-width: 960px;
+	margin: 0 auto;
+	padding: 60px;
+
+	@media all and (max-width: @tablet) {
+		border-left: none;
+		border-right: none;
+		.width-calc(~"100% - 120px");
+	}
+
+	@media all and (max-width: @mobile) {
+		.width-calc(~"100% - 80px");
+		padding: 40px 40px 160px;
+	}
+
+	.content-head {
+		text-align: center;
+		
+		@media all and (max-width: @mobile) {
+			text-align: left;
+		}
+	}
+
+	.content-feature {
+		background-color: #eee;
+		width: 100%;
+		height: 400px;
+		margin: 2em auto;
+		display: inline-block;
+		position: relative;
+
+		img {
+			background-position: 50% 0%;
+			background-size: cover;
+			background-repeat: no-repeat;
+			width: 0;
+			height: 0;
+			padding: 200px 52.5%;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			.transform(translate(-50%, -50%));
+		}
+
+		@media all and (max-width: @mobile) {
+			height: 300px;
+
+			img {
+				padding: 150px 52.5%;
+			}
+		}
+	}
+
+	.content-body {
+		-webkit-columns: 340px 2;
+		-moz-columns: 340px 2;
+		columns: 340px 2;
+		-webkit-column-gap: 40px;
+		-moz-column-gap: 40px;
+		column-gap: 40px;
+
+		p:first-of-type {
+			margin-top: 0;
+			
+			&:first-letter {
+				padding: 4px 8px 0px 3px;
+				float: left;
+				font-family: 'Georgia', serif;
+				font-size: 75px;
+				line-height: 60px;
+			}
+		}
+	}
+}
+
+hr {
+	border: 2px solid rgba(0, 0, 0, 0.8);
+	width: 50%;
+	height: 0px;
+	margin: 1em auto;
+	
+	@media all and (max-width: @mobile) {
+		margin: 1em 0;
+	}
+}
+
+p {
+	font-size: 1em;
+	font-weight: 400;
+	font-style: normal;
+	line-height: 1.375em;
+
+	@media all and (max-width: @mobile) {
+		line-height: 1.25em;
+	}
+}
+
+h1, h2, h3, blockquote {
+	font-family: 'Georgia', serif;
+}
+
+h1 {
+	margin: 0 auto;
+	font-size: 3em;
+	font-weight: 700;
+	font-style: normal;
+	line-height: 1.05em;
+
+	@media all and (max-width: @tablet) {
+		font-size: 2.5em;
+		line-height: 1.125em;
+	}
+
+	@media all and (max-width: @mobile) {
+		font-size: 2em;
+		line-height: 1.25em;
+	}
+}
+
+h2 {
+	margin: 0 auto;
+	font-size: 2.25em;
+	font-weight: 700;
+	font-style: normal;
+	line-height: 1.25em;
+
+	@media all and (max-width: @tablet) {
+		font-size: 2em;
+	}
+
+	@media all and (max-width: @mobile) {
+		font-size: 1.625em;
+		line-height: 1.15384615em;
+	}
+}
+
+h3 {
+	margin: 1.5em auto 0.83em auto;
+	font-size: 1.75em;
+	font-weight: 700;
+	font-style: normal;
+	line-height: 1.25em;
+
+	@media all and (max-width: @tablet) {
+		font-size: 1.5em;
+	}
+
+	@media all and (max-width: @mobile) {
+		font-size: 1.375em;
+		line-height: 1.13636364em;
+	}
+}
+
+blockquote {
+	border-left: 4px solid rgba(0, 0, 0, 0.8);
+	margin: 1.5em 20px 1.5em 0px;
+	padding-left: 20px;
+	font-size: 1.25em;
+	font-weight: 500;
+	font-style: italic;
+	line-height: 1.45833333em;
+
+	@media all and (max-width: @mobile) {
+		font-size: 1.15em;
+		line-height: 1.15em;
+	}
+
+	&:before {
+		content: "\201C\00a0";
+		font-size: 1.5em;
+		// font-style: normal;
+		vertical-align: text-top;
+	}
+
+	&:after {
+		content: "\00a0\201D";
+		font-size: 1.5em;
+		// font-style: normal;
+		vertical-align: text-top;
+	}
+}
+
+ul {
+	line-height: 1.5em;
+	list-style-type: circle;
+}
+
+ol {
+	list-style-type: square;
+}
+
+
+
+// mixins
+.width-calc(@expression) {
+	width: calc(@expression);
+	width: -o-calc(@expression);
+	width: -moz-calc(@expression);
+	width: -webkit-calc(@expression);
+	width: expression(@expression);
+}
+
+.max-width-calc(@expression) {
+	max-width: calc(@expression);
+	max-width: -o-calc(@expression);
+	max-width: -moz-calc(@expression);
+	max-width: -webkit-calc(@expression);
+	max-width: expression(@expression);
+}
+
+.min-width-calc(@expression) {
+	min-width: calc(@expression);
+	min-width: -o-calc(@expression);
+	min-width: -moz-calc(@expression);
+	min-width: -webkit-calc(@expression);
+	min-width: expression(@expression);
+}
+
+.height-calc(@expression) {
+	height: calc(@expression);
+	height: -o-calc(@expression);
+	height: -moz-calc(@expression);
+	height: -webkit-calc(@expression);
+	height: expression(@expression);
+}
+
+.gradient(@angle: 45deg, @startColor: red, @endColor: blue) {
+	//background-color: @startColor;
+	background-image: -webkit-linear-gradient(@angle, @startColor, @endColor);
+	background-image: -moz-linear-gradient(@angle, @startColor, @endColor);
+	background-image: -ms-linear-gradient(@angle, @startColor, @endColor);
+	background-image: -o-linear-gradient(@angle, @startColor, @endColor);
+	background-image: linear-gradient(@angle, @startColor, @endColor);
+}
+
+.transition(@transition) {
+	-webkit-transition: @transition;
+	-moz-transition: @transition;
+	-ms-transition: @transition;
+	-o-transition: @transition;
+	transition: @transition;
+}
+
+.transition-delay(@delay:0) {
+	-webkit-transition-delay: @delay;
+	-moz-transition-delay: @delay;
+	-o-transition-delay: @delay;
+	-ms-transition-delay: @delay;
+	transition-delay: @delay;
+}
+
+.transform(@string){
+	-webkit-transform: @string;
+	-moz-transform: @string;
+	-ms-transform: @string;
+	-o-transform: @string;
+	transform: @string;
+}
+
+.transform-origin (@x:center, @y:center) {
+	-webkit-transform-origin: @x @y;
+	-moz-transform-origin: @x @y;
+	-ms-transform-origin: @x @y;
+	-o-transform-origin: @x @y;
+	transform-origin: @x @y;
+}
+
+.perspective (@value: 1000) {
+	-webkit-perspective: @value;
+	-moz-perspective: @value;
+	-ms-perspective: @value;
+	perspective: @value;
+}
+
+.keyframes(@name; @arguments) {
+	@-moz-keyframes @name { @arguments(); }
+	@-webkit-keyframes @name { @arguments(); }
+	@keyframes @name { @arguments(); }
+}
+
+.animation(@arguments) {
+	-webkit-animation: @arguments;
+	-moz-animation: @arguments;
+	animation: @arguments;
+}
+
+.animation-delay(@arguments) {
+	-webkit-animation-delay: @arguments;
+	animation-delay: @arguments;
+}
+
+.playstate(@playstate) {
+	webkit-animation-play-state: @playstate;
+	-moz-animation-play-state: @playstate;
+	-o-animation-play-state: @playstate;
+	animation-play-state: @playstate;
+}
\ No newline at end of file
diff --git a/ui-design-stats-dashboard/README.markdown b/ui-design-stats-dashboard/README.markdown
new file mode 100644
index 0000000..166f778
--- /dev/null
+++ b/ui-design-stats-dashboard/README.markdown
@@ -0,0 +1,5 @@
+# UI Design: Stats Dashboard
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/oliviale/pen/BaKamvY](https://codepen.io/oliviale/pen/BaKamvY).
+
+
diff --git a/ui-design-stats-dashboard/dist/index.html b/ui-design-stats-dashboard/dist/index.html
new file mode 100644
index 0000000..dbea263
--- /dev/null
+++ b/ui-design-stats-dashboard/dist/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - UI Design: Stats Dashboard</title>
+  <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Montserrat+Subrayada:wght@700&family=Montserrat:ital,wght@0,300;0,600;0,700;1,300&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <h1>Netflix Binge:  <br/><span>Top Stats</span><small>When your friend recommended you that series, you <span>should've said no.</span></small></h1>
+  <div class="legend">
+    <div class="legend__item"><span class="legend__box kdrama"></span><span>Korean Drama</span></div>
+    <div class="legend__item"><span class="legend__box anime"></span><span>Anime</span></div>
+    <div class="legend__item"><span class="legend__box western"></span><span>Western Series</span></div>
+  </div>
+  <div class="box kdrama cloy">
+    <h4>Crash Landing on You</h4>
+    <p>16 episodes // 960 minutes in 1 day. One sitting.</p>
+  </div>
+  <div class="box kdrama inheritors">
+    <h4 class="break">Inheritors</h4>
+    <p>16 episodes // 960 minutes in 1 day. One sitting.</p>
+  </div>
+  <div class="box anime foodwars">
+    <h4>Food Wars</h4>
+    <p>85 episodes // 1700 minutes in 3 days.</p>
+  </div>
+  <div class="box kdrama theking">
+    <h4>The King</h4>
+    <p>16 episodes // 960 minutes in 2 days.</p>
+  </div>
+  <div class="box western mindhunter shadow">
+    <h4 class="break">Mindhunter</h4>
+    <p>19 episodes // 942 minutes in 3 days.</p>
+  </div>
+  <div class="box anime kakegurui shadow">
+    <h4 class="break">Kakegurui</h4>
+    <p>24 episodes // 480 minutes in 2 days.</p>
+  </div>
+  <!--.box.anime.haikyuu
+  h4.break Haikyuu!
+  p 72 episodes // 1440 minutes in 7 days.
+  
+  
+  -->
+</div>
+<div class="more-info">
+  <div class="image"><img src="https://assets.codepen.io/567707/palette-ts.png" alt="Taylor Swift album"/></div>
+  <p>Part of the <a href="https://codepen.io/collection/XPxJmz">UI Designs inspired by Taylor Swift Album Covers</a> collection. This is <em>Taylor Swift (2006)</em>.</p>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/ui-design-stats-dashboard/dist/script.js b/ui-design-stats-dashboard/dist/script.js
new file mode 100644
index 0000000..563e913
--- /dev/null
+++ b/ui-design-stats-dashboard/dist/script.js
@@ -0,0 +1,11 @@
+$(window).on("load resize", function (e) {
+	if ($(window).width() > 700) {
+		$(".box").each(function (index) {
+			$(this).outerHeight($(this).outerWidth());
+		});
+	} else {
+		$(".box").each(function (index) {
+			$(this).outerHeight('auto')
+		});
+	}
+});
\ No newline at end of file
diff --git a/ui-design-stats-dashboard/dist/style.css b/ui-design-stats-dashboard/dist/style.css
new file mode 100644
index 0000000..fd870fd
--- /dev/null
+++ b/ui-design-stats-dashboard/dist/style.css
@@ -0,0 +1,337 @@
+:root {
+  --yellow-lighter: #fdfdec;
+  --yellow-light: #f8f8b4;
+  --yellow: #f4f482;
+  --green-lime: #bdf195;
+  --green-blue: #15e6cd;
+  --blue-light: #31bfda;
+  --blue: #3b94b5;
+  --blue-dark: #407fa3;
+  --green: #206466;
+  --green-dark: #004829;
+}
+
+body {
+  background: #fff;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 300;
+  line-height: 1.1;
+  background: #cfe2e8;
+  overflow-x: hidden;
+}
+
+em {
+  font-style: italic;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.container {
+  min-height: 100vh;
+  max-width: 70rem;
+  margin: auto;
+  padding: 1rem 1rem 12rem;
+  padding-bottom: 8rem;
+  background-image: url(https://assets.codepen.io/567707/bg-popcorn.png);
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: 55%;
+}
+
+h1 {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: -0.03rem;
+  line-height: 1;
+  color: var(--green);
+  font-size: clamp(2.5rem, 6vw, 5rem);
+  margin: 2rem auto 1rem;
+  width: 100%;
+}
+h1 small {
+  display: none;
+}
+@media (max-width: 1024px) {
+  h1 {
+    text-align: center;
+  }
+  h1 br {
+    display: none;
+  }
+}
+@media (min-width: 1024px) {
+  h1 {
+    line-height: 0.9;
+    position: relative;
+  }
+  h1 span {
+    display: inline-block;
+    margin-top: 14rem;
+  }
+  h1 small {
+    display: block;
+    position: absolute;
+    font-weight: 300;
+    font-size: clamp(1rem, 1.8vw, 1.3rem);
+    text-transform: none;
+    top: 30%;
+    right: 110%;
+    height: 60%;
+    line-height: 1.2;
+  }
+  h1 small span {
+    display: inline-block;
+    transform: translate(0.15rem, 0.2rem);
+    margin-top: 0;
+    font-size: 140%;
+    font-family: "Dancing Script", cursive;
+  }
+}
+
+h4 {
+  font-weight: 800;
+  text-transform: uppercase;
+  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
+  line-height: 1;
+}
+
+.kdrama {
+  background: var(--yellow);
+  color: var(--green);
+}
+
+.anime {
+  background: var(--green-blue);
+  color: var(--yellow-lighter);
+}
+
+.western {
+  background: var(--blue-light);
+  color: var(--yellow-lighter);
+}
+
+.box {
+  padding: 1.5rem;
+  margin: 1rem auto;
+}
+.box p {
+  margin-top: 0.5rem;
+  font-size: clamp(1rem, 1.2vw, 1rem);
+}
+@media (min-width: 700px) {
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+  .box:before {
+    content: "";
+    float: left;
+  }
+}
+
+.legend {
+  margin: 1.5rem auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+.legend__item {
+  margin-right: 2rem;
+  min-width: 7rem;
+}
+.legend__box {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.5rem;
+  vertical-align: middle;
+}
+.legend__box + span {
+  vertical-align: middle;
+  margin: 0.2rem;
+}
+
+@media (min-width: 700px) {
+  .container {
+    display: grid;
+    grid-gap: 0.5rem;
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  h1,
+  .legend {
+    grid-column: 1 / -1;
+  }
+
+  h4.break {
+    word-break: break-all;
+  }
+
+  .box {
+    margin: 0;
+    position: relative;
+  }
+
+  .cloy {
+    grid-column: 1 / 3;
+    grid-row: 3 / span 2;
+  }
+
+  .inheritors {
+    grid-column: 3 / 5;
+    grid-row: 3 / span 2;
+  }
+
+  .foodwars {
+    grid-row: 5 / span 1;
+    grid-column: 1 / 5;
+  }
+  .foodwars:after {
+    position: absolute;
+    content: "";
+    width: 80%;
+    height: 80%;
+    background: url("https://assets.codepen.io/567707/show-foodwars.jpg") no-repeat center center/cover;
+    top: 0;
+    right: 0%;
+  }
+
+  .theking {
+    grid-row: 5 / span 1;
+    grid-column: 5 / 7;
+  }
+
+  .mindhunter {
+    grid-column: 5 / 7;
+    grid-row: 6;
+  }
+  .mindhunter:after {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 100%;
+    background: url("https://assets.codepen.io/567707/show-mindhunter.png") no-repeat center center/cover;
+    top: 0;
+    right: 100%;
+  }
+
+  .kakegurui {
+    grid-row: 3 / 7;
+    grid-column: 5 / 7;
+  }
+
+  .haikyuu {
+    grid-row: 6;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    grid-template-columns: repeat(12, 1fr);
+    grid-gap: 0;
+    padding-top: 4rem;
+  }
+
+  .box {
+    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12), 0 20px 30px rgba(0, 0, 0, 0.05);
+  }
+
+  .box:before {
+    padding-top: 20%;
+  }
+
+  h1 {
+    grid-row: 1 / 10;
+    grid-column: 1 / 2;
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    transform: rotate(180deg) translate(0.2rem, 4rem);
+  }
+
+  .cloy {
+    grid-column: 4 / 6;
+    grid-row: 2 / 4;
+    width: 150%;
+  }
+  .cloy:after {
+    position: absolute;
+    content: "";
+    width: 90%;
+    height: 90%;
+    background: url("https://assets.codepen.io/567707/show-cloy.jpg") no-repeat center center/cover;
+    top: -40%;
+    right: -30%;
+    z-index: -1;
+  }
+
+  .theking {
+    grid-column: 8 / 11;
+    grid-row: 1 / 3;
+    width: 80%;
+  }
+
+  .foodwars {
+    grid-column: 3/5;
+    grid-row: 4;
+    width: 110%;
+    transform: translate(30%, 0%);
+  }
+  .foodwars:after {
+    content: none;
+  }
+
+  .kakegurui {
+    grid-column: 7/9;
+    grid-row: 3;
+    width: 115%;
+    transform: translate(-25%, 60%);
+  }
+
+  .mindhunter {
+    grid-column: -4 / -1;
+    grid-row: 3;
+    width: 80%;
+    transform: translate(0%, -30%);
+  }
+  .mindhunter:after {
+    right: -100%;
+    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12), 0 20px 30px rgba(0, 0, 0, 0.05);
+  }
+
+  .inheritors {
+    grid-column: -4/-1;
+    grid-row: 4;
+    width: 80%;
+    transform: translate(-30%, -10%);
+  }
+
+  .legend {
+    grid-column: 6 / 13;
+    grid-row: 5;
+  }
+}
+.more-info {
+  display: flex;
+  align-items: center;
+  background: var(--blue-dark);
+  color: var(--yellow-light);
+}
+.more-info a {
+  color: var(--yellow-light);
+}
+.more-info .image {
+  flex: 0 0 30%;
+  max-width: 10rem;
+  line-height: 0;
+}
+.more-info .image img {
+  width: 100%;
+}
+.more-info p {
+  flex: 1;
+  padding: 0 1.5rem;
+}
\ No newline at end of file
diff --git a/ui-design-stats-dashboard/license.txt b/ui-design-stats-dashboard/license.txt
new file mode 100644
index 0000000..97a7d05
--- /dev/null
+++ b/ui-design-stats-dashboard/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Olivia Ng (https://codepen.io/oliviale/pen/BaKamvY)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/ui-design-stats-dashboard/src/index.pug b/ui-design-stats-dashboard/src/index.pug
new file mode 100644
index 0000000..3cafdf3
--- /dev/null
+++ b/ui-design-stats-dashboard/src/index.pug
@@ -0,0 +1,48 @@
+.container
+	h1 Netflix Binge:  
+		br
+		span Top Stats
+		small When your friend recommended you that series, you 
+			span should've said no.
+	.legend
+		.legend__item
+			span.legend__box.kdrama
+			span Korean Drama
+		.legend__item
+			span.legend__box.anime
+			span Anime
+		.legend__item
+			span.legend__box.western
+			span Western Series
+	.box.kdrama.cloy
+		h4 Crash Landing on You
+		p 16 episodes // 960 minutes in 1 day. One sitting.
+	.box.kdrama.inheritors
+		h4.break Inheritors
+		p 16 episodes // 960 minutes in 1 day. One sitting.
+	.box.anime.foodwars
+		h4 Food Wars
+		p 85 episodes // 1700 minutes in 3 days.
+	.box.kdrama.theking
+		h4 The King
+		p 16 episodes // 960 minutes in 2 days.
+	.box.western.mindhunter.shadow
+		h4.break Mindhunter
+		p 19 episodes // 942 minutes in 3 days.
+	.box.anime.kakegurui.shadow
+		h4.break Kakegurui
+		p 24 episodes // 480 minutes in 2 days.
+	//.box.anime.haikyuu
+		h4.break Haikyuu!
+		p 72 episodes // 1440 minutes in 7 days.
+	
+
+.more-info
+	.image
+		img(src="https://assets.codepen.io/567707/palette-ts.png" alt="Taylor Swift album")
+	p Part of the 
+		a(href="https://codepen.io/collection/XPxJmz") UI Designs inspired by Taylor Swift Album Covers
+		|  collection. This is 
+		em Taylor Swift (2006)
+		|.
+	
\ No newline at end of file
diff --git a/ui-design-stats-dashboard/src/script.js b/ui-design-stats-dashboard/src/script.js
new file mode 100644
index 0000000..30b21ca
--- /dev/null
+++ b/ui-design-stats-dashboard/src/script.js
@@ -0,0 +1,11 @@
+$(window).on("load resize", function (e) {
+	if ($(window).width() > 700) {
+		$(".box").each(function (index) {
+			$(this).outerHeight($(this).outerWidth());
+		});
+	} else {
+		$(".box").each(function (index) {
+			$(this).outerHeight('auto')
+		});
+	}
+});
diff --git a/ui-design-stats-dashboard/src/style.scss b/ui-design-stats-dashboard/src/style.scss
new file mode 100644
index 0000000..dfb807d
--- /dev/null
+++ b/ui-design-stats-dashboard/src/style.scss
@@ -0,0 +1,320 @@
+:root {
+	--yellow-lighter: #fdfdec;
+	--yellow-light: #f8f8b4;
+	--yellow: #f4f482;
+	--green-lime: #bdf195;
+	--green-blue: #15e6cd;
+	--blue-light: #31bfda;
+	--blue: #3b94b5;
+	--blue-dark: #407fa3;
+	--green: #206466;
+	--green-dark: #004829;
+}
+
+body {
+	background: #fff;
+	font-family: "Montserrat", sans-serif;
+	font-weight: 300;
+	line-height: 1.1;
+	background: #cfe2e8;
+	overflow-x: hidden;
+}
+
+
+em {
+	font-style: italic;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+.container {
+	min-height: 100vh;
+	max-width: 70rem;
+	margin: auto;
+	padding: 1rem 1rem 12rem;
+	padding-bottom: 8rem;
+
+	background-image: url(https://assets.codepen.io/567707/bg-popcorn.png);
+	background-repeat: no-repeat;
+	background-position: bottom left;
+	background-size: 55%;
+}
+
+h1 {
+	font-family: "Montserrat", sans-serif;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: -0.03rem;
+	line-height: 1;
+	color: var(--green);
+	font-size: clamp(2.5rem, 6vw, 5rem);
+	margin: 2rem auto 1rem;
+	width: 100%;
+	small {
+		display: none;
+	}
+	@media (max-width: 1024px) {
+		text-align: center;
+		br {
+			display: none;
+		}
+	}
+	@media (min-width: 1024px) {
+		line-height: 0.9;
+		position: relative;
+		span {
+			display: inline-block;
+			margin-top: 14rem;
+		}
+		small {
+			display: block;
+			position: absolute;
+			font-weight: 300;
+			font-size: clamp(1rem, 1.8vw, 1.3rem);
+			text-transform: none;
+			top: 30%;
+			right: 110%;
+			height: 60%;
+			line-height: 1.2;
+			span {
+				display: inline-block;
+				transform: translate(0.15rem, 0.2rem);
+				margin-top: 0;
+				font-size: 140%;
+				font-family: "Dancing Script", cursive;
+			}
+		}
+	}
+}
+
+h4 {
+	font-weight: 800;
+	text-transform: uppercase;
+	font-size: clamp(1.5rem, 2.5vw, 2.5rem);
+	line-height: 1;
+}
+
+.kdrama {
+	background: var(--yellow);
+	color: var(--green);
+}
+
+.anime {
+	background: var(--green-blue);
+	color: var(--yellow-lighter);
+}
+
+.western {
+	background: var(--blue-light);
+	color: var(--yellow-lighter);
+}
+
+.box {
+	padding: 1.5rem;
+	margin: 1rem auto;
+	p {
+		margin-top: 0.5rem;
+		font-size: clamp(1rem, 1.2vw, 1rem);
+	}
+	@media (min-width: 700px) {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		&:before {
+			content: "";
+			float: left;
+		}
+	}
+}
+
+.legend {
+	margin: 1.5rem auto;
+	display: flex;
+	flex-wrap: wrap;
+	&__item {
+		margin-right: 2rem;
+		min-width: 7rem;
+	}
+	&__box {
+		display: inline-block;
+		width: 1.5rem;
+		height: 1.5rem;
+		margin-right: 0.5rem;
+		vertical-align: middle;
+		+ span {
+			vertical-align: middle;
+			margin: 0.2rem;
+		}
+	}
+}
+
+@media (min-width: 700px) {
+	.container {
+		display: grid;
+		grid-gap: 0.5rem;
+		grid-template-columns: repeat(6, 1fr);
+	}
+	h1,
+	.legend {
+		grid-column: 1 / -1;
+	}
+	h4.break {
+		word-break: break-all;
+	}
+	.box {
+		margin: 0;
+		position: relative;
+	}
+	.cloy {
+		grid-column: 1 / 3;
+		grid-row: 3 / span 2;
+	}
+	.inheritors {
+		grid-column: 3 / 5;
+		grid-row: 3 / span 2;
+	}
+	.foodwars {
+		grid-row: 5 / span 1;
+		grid-column: 1 / 5;
+		&:after {
+			position: absolute;
+			content: "";
+			width: 80%;
+			height: 80%;
+			background: url("https://assets.codepen.io/567707/show-foodwars.jpg")
+				no-repeat center center / cover;
+			top: 0;
+			right: 0%;
+		}
+	}
+	.theking {
+		grid-row: 5 / span 1;
+		grid-column: 5 / 7;
+	}
+	.mindhunter {
+		grid-column: 5 / 7;
+		grid-row: 6;
+		&:after {
+			position: absolute;
+			content: "";
+			width: 100%;
+			height: 100%;
+			background: url("https://assets.codepen.io/567707/show-mindhunter.png")
+				no-repeat center center / cover;
+			top: 0;
+			right: 100%;
+		}
+	}
+	.kakegurui {
+		grid-row: 3 / 7;
+		grid-column: 5 / 7;
+	}
+	.haikyuu {
+		grid-row: 6;
+	}
+}
+
+@media (min-width: 1024px) {
+	.container {
+		grid-template-columns: repeat(12, 1fr);
+		grid-gap: 0;
+		padding-top: 4rem;
+	}
+	.box {
+		box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12), 0 20px 30px rgba(0, 0, 0, 0.05);
+	}
+	.box:before {
+		padding-top: 20%;
+	}
+
+	h1 {
+		grid-row: 1 / 10;
+		grid-column: 1 / 2;
+		writing-mode: vertical-rl;
+		text-orientation: mixed;
+		transform: rotate(180deg) translate(0.2rem, 4rem);
+	}
+	.cloy {
+		grid-column: 4 / 6;
+		grid-row: 2 / 4;
+		width: 150%;
+		&:after {
+			position: absolute;
+			content: "";
+			width: 90%;
+			height: 90%;
+			background: url("https://assets.codepen.io/567707/show-cloy.jpg") no-repeat
+				center center / cover;
+			top: -40%;
+			right: -30%;
+			z-index: -1;
+		}
+	}
+	.theking {
+		grid-column: 8 / 11;
+		grid-row: 1 / 3;
+		width: 80%;
+	}
+	.foodwars {
+		grid-column: 3/5;
+		grid-row: 4;
+		width: 110%;
+		transform: translate(30%, 0%);
+		&:after {
+			content: none;
+		}
+	}
+	.kakegurui {
+		grid-column: 7/9;
+		grid-row: 3;
+		width: 115%;
+		transform: translate(-25%, 60%);
+	}
+	.mindhunter {
+		grid-column: -4 / -1;
+		grid-row: 3;
+		width: 80%;
+		transform: translate(0%, -30%);
+		&:after {
+			right: -100%;
+			box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12), 0 20px 30px rgba(0, 0, 0, 0.05);
+		}
+	}
+	.inheritors {
+		grid-column: -4/-1;
+		grid-row: 4;
+		width: 80%;
+		transform: translate(-30%, -10%);
+	}
+	.legend {
+		grid-column: 6 / 13;
+		grid-row: 5;
+	}
+}
+
+
+.more-info {
+	display: flex;
+	align-items: center;
+	background: var(--blue-dark);
+	color: var(--yellow-light);
+	a {
+		color: var(--yellow-light);
+	}
+	.image {
+		flex: 0 0 30%;
+		max-width: 10rem;
+		line-height: 0;
+		img {
+			width: 100%;
+		}
+	}
+	p {
+		flex: 1;
+		padding: 0 1.5rem;
+	}
+}
\ No newline at end of file
diff --git a/ui-design-wedding-planning-app/README.markdown b/ui-design-wedding-planning-app/README.markdown
new file mode 100644
index 0000000..b154f8d
--- /dev/null
+++ b/ui-design-wedding-planning-app/README.markdown
@@ -0,0 +1,5 @@
+# UI Design: Wedding Planning App
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/oliviale/pen/rNWyzmx](https://codepen.io/oliviale/pen/rNWyzmx).
+
+Credits: [Watercolor leaves](https://www.freepik.com/free-psd/wedding-invitation-template-with-watercolor-leaves_10016540.htm#page=1&query=wedding&position=31), [Inspiration gallery photo](https://www.elegantweddinginvites.com/wedding-blog/the-10-perfect-fall-wedding-color-combos-to-steal/)
diff --git a/ui-design-wedding-planning-app/dist/index.html b/ui-design-wedding-planning-app/dist/index.html
new file mode 100644
index 0000000..03d996a
--- /dev/null
+++ b/ui-design-wedding-planning-app/dist/index.html
@@ -0,0 +1,612 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - UI Design: Wedding Planning App</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Display&family=Manrope:wght@300;600&family=Newsreader:ital@1&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="grid-parent">
+  <div class="grid-child">
+    <div class="mobile-screen">
+      <div class="mobile-background plain">
+        <svg class="back" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve">
+          <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068    l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019    l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492    c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z"></path>
+        </svg>
+        <div class="signup-text">
+          <h2>Sign up<small>'tis the damn season to get weddings right</small></h2>
+        </div>
+        <div class="signup-form">
+          <div class="input-wrapper">
+            <label>Email</label>
+            <input type="text" placeholder="dorothea@gmail.com"/>
+          </div>
+          <div class="input-wrapper">
+            <label>Password</label>
+            <input type="password" placeholder="At least 8 characters"/>
+          </div>
+          <div class="button-wrapper">
+            <button class="btn btn-primary">Sign up</button>
+            <p>Already have an account?<br/><a href="#">Log in here</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mobile-screen">
+      <div class="mobile-background">
+        <div class="topbar">
+          <div class="menu-icon"></div>
+          <h3 class="title">Budget</h3>
+          <div class="more-icon"></div>
+        </div>
+        <button class="btn btn-plus">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.66667 426.66667">
+            <path d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"></path>
+          </svg>
+        </button>
+        <nav>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 438.891 438.891" style="enable-background: new 0 0 438.891 438.891" xml:space="preserve">
+              <path d="M347.968,57.503h-39.706V39.74c0-5.747-6.269-8.359-12.016-8.359h-30.824c-7.314-20.898-25.6-31.347-46.498-31.347     c-20.668-0.777-39.467,11.896-46.498,31.347h-30.302c-5.747,0-11.494,2.612-11.494,8.359v17.763H90.923     c-23.53,0.251-42.78,18.813-43.886,42.318v299.363c0,22.988,20.898,39.706,43.886,39.706h257.045     c22.988,0,43.886-16.718,43.886-39.706V99.822C390.748,76.316,371.498,57.754,347.968,57.503z M151.527,52.279h28.735     c5.016-0.612,9.045-4.428,9.927-9.404c3.094-13.474,14.915-23.146,28.735-23.51c13.692,0.415,25.335,10.117,28.212,23.51     c0.937,5.148,5.232,9.013,10.449,9.404h29.78v41.796H151.527V52.279z M370.956,399.185c0,11.494-11.494,18.808-22.988,18.808     H90.923c-11.494,0-22.988-7.314-22.988-18.808V99.822c1.066-11.964,10.978-21.201,22.988-21.42h39.706v26.645     c0.552,5.854,5.622,10.233,11.494,9.927h154.122c5.98,0.327,11.209-3.992,12.016-9.927V78.401h39.706     c12.009,0.22,21.922,9.456,22.988,21.42V399.185z"></path>
+              <path d="M179.217,233.569c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,233.962,179.427,233.761,179.217,233.569z"></path>
+              <path d="M329.16,256.034H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,256.034,329.16,256.034z"></path>
+              <path d="M179.217,149.977c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.364-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,150.37,179.427,150.169,179.217,149.977z"></path>
+              <path d="M329.16,172.442H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,172.442,329.16,172.442z"></path>
+              <path d="M179.217,317.16c-3.919-4.131-10.425-4.363-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,317.554,179.427,317.353,179.217,317.16z"></path>
+              <path d="M329.16,339.626H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,339.626,329.16,339.626z"></path>
+            </svg><span>Checklist</span>
+          </div>
+          <div class="icon active">
+            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 505.935 505.935" height="512" viewBox="0 0 505.935 505.935" width="512">
+              <path d="m360.574 153.145c13.337-2.438 29.261-4.145 52.393-4.145v-30c-35.14 0-55.752 3.746-73.623 7.988z"></path>
+              <path d="m166.59 126.988c-17.871-4.242-38.482-7.988-73.623-7.988v30c23.132 0 39.057 1.707 52.394 4.145z"></path>
+              <path d="m252.967 139c38.153 0 56.713-4.64 76.362-9.552 3.293-.823 6.605-1.651 10.016-2.46l37.842-93.222-10.979-6.614c-1.841-1.11-45.847-27.152-113.241-27.152s-111.4 26.042-113.24 27.151l-10.979 6.614 37.843 93.222c3.411.81 6.723 1.637 10.015 2.46 19.648 4.913 38.208 9.553 76.361 9.553z"></path>
+              <path d="m425.375 260.474c-17.602-42.21-40.115-79.35-64.801-107.329-8.66 1.583-16.232 3.473-23.968 5.408-20.546 5.135-41.792 10.447-83.639 10.447s-63.092-5.312-83.638-10.448c-7.736-1.934-15.308-3.825-23.968-5.408-24.85 28.167-47.507 65.638-65.145 108.158-20.454 49.306-32.184 100.696-32.184 140.994 0 34.144 8.4 58.961 25.682 75.87 30.308 29.656 81.258 28.548 140.251 27.264 12.626-.274 25.682-.559 39.003-.559s26.377.284 39.003.559c11.752.256 23.184.505 34.198.504 44.274 0 81.783-4.02 106.053-27.768 17.281-16.909 25.682-41.727 25.682-75.87-.001-40.558-11.857-92.25-32.529-141.822zm-188.487 31.52c8.084 6.341 22.555 11.926 35.644 16.552 48.986 17.064 41.392 84.36-5.457 97.808v22.646h-30v-21.191c-15.601-1.219-28.635-10.527-42.973-20.052l16.423-25.105 12.552 8.211c10.662 6.975 14.989 7.65 28.898 7.568 21.971.839 35.963-32.406 10.559-41.6-22.098-7.812-34.892-13.963-44.159-21.232-26.926-21.429-12.731-66.562 18.7-76.216v-21.383h30v19.206c19.198 3.475 26.897 9.467 40.527 16.521l-14.233 26.408s-13.204-7.117-13.204-7.116c-10.468-6.266-40.891-14.648-45.826 9.68-.229 1.532-.719 6.732 2.549 9.295z"></path>
+            </svg><span>Budget</span>
+          </div>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 477.867 477.867" style="enable-background: new 0 0 477.867 477.867" xml:space="preserve">
+              <path d="M238.933,0C106.974,0,0,106.974,0,238.933s106.974,238.933,238.933,238.933s238.933-106.974,238.933-238.933    C477.726,107.033,370.834,0.141,238.933,0z M238.933,443.733c-113.108,0-204.8-91.692-204.8-204.8s91.692-204.8,204.8-204.8    s204.8,91.692,204.8,204.8C443.611,351.991,351.991,443.611,238.933,443.733z"></path>
+              <circle cx="153.6" cy="204.8" r="34.133"></circle>
+              <circle cx="324.267" cy="204.8" r="34.133"></circle>
+              <path d="M304.287,296.61c-5.637-7.554-16.331-9.108-23.885-3.47c-0.327,0.244-0.644,0.499-0.953,0.766h0    c-24.135,17.628-56.898,17.628-81.033,0c-7.131-6.164-17.909-5.379-24.072,1.752c-6.164,7.131-5.379,17.909,1.752,24.072    c0.308,0.267,0.626,0.522,0.953,0.766c36.531,27.922,87.236,27.922,123.767,0C308.371,314.858,309.925,304.164,304.287,296.61z"></path>
+            </svg><span>Guests</span>
+          </div>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve">
+              <path d="M506.791,186.581c-17.89-55.053-77.234-85.287-132.283-67.403c-7.272,2.363-14.634,5.631-21.91,9.68    c1.603-8.169,2.436-16.182,2.436-23.828c0-58.447-40.387-104.981-97.982-104.981c-57.679,0-100.086,46.637-100.086,104.981    c0,7.645,0.833,15.658,2.436,23.828c-7.276-4.048-14.638-7.317-21.91-9.68C82.446,101.291,23.098,131.528,5.209,186.581    c-18.142,55.838,12.726,118.021,67.403,135.788c7.272,2.363,15.148,4.045,23.414,5.047c-6.099,5.668-11.481,11.661-15.976,17.846    C46.025,392.094,56.444,457.876,103.274,491.9c46.808,34.01,107.605,23.759,141.74-23.225c4.495-6.186,8.529-13.158,12.037-20.71    c3.507,7.553,7.542,14.524,12.037,20.71c34.181,47.048,92.928,57.162,139.636,23.225c46.831-34.025,57.25-99.807,23.225-146.638    c-4.493-6.186-9.878-12.178-15.976-17.847c8.264-1.001,16.145-2.685,23.417-5.046C494.066,304.603,524.933,242.42,506.791,186.581    z M257.052,30.044c39.394,0,67.987,31.536,67.987,74.986c0,19.556-7.653,43.667-20.471,64.497    c-1.551,2.521-2.268,5.33-2.222,8.099l-15.616,27.028c-4.67-2.021-9.78-3.588-14.881-4.627V138.53    c0-8.282-6.515-14.997-14.797-14.997c-8.282,0-14.997,6.715-14.997,14.997v61.498c-5.221,1.064-10.239,2.686-15.007,4.775    l-17.435-28.556c-0.175-2.314-0.888-4.618-2.182-6.72c-12.818-20.83-20.471-44.941-20.471-64.497    C186.961,62.281,217.093,30.044,257.052,30.044z M81.88,293.843c-38.539-12.523-61.037-58.314-48.145-97.993    c12.778-39.324,55.162-60.921,94.489-48.146c16.144,5.246,33.771,17.046,48.512,32.256l25.755,42.184    c-4.094,4.347-7.675,9.179-10.647,14.404l-58.527-19.016c-7.884-2.561-16.339,1.752-18.898,9.628    c-2.561,7.878,1.752,16.338,9.628,18.898l58.505,19.01c-0.678,6.02-0.632,11.422,0.037,17.164l-37.46,13.069    C122.678,300.014,99.332,299.513,81.88,293.843z M242.053,387.296c-1.939,24.232-9.884,48.032-21.303,63.749    c-24.406,33.59-66.469,40.839-99.845,16.589c-33.45-24.304-40.891-71.29-16.588-104.742    c19.857-27.333,54.348-39.752,56.964-41.457l30.712-10.715c2.766,4.816,6.037,9.306,9.764,13.375l-36.175,49.792    c-4.869,6.701-3.383,16.08,3.317,20.948c6.697,4.867,16.077,3.385,20.948-3.317l36.165-49.779    c5.074,2.317,10.44,4.102,16.04,5.243V387.296z M257.052,318.497c-24.808,0-44.992-20.183-44.992-44.992    s20.183-44.992,44.992-44.992c24.808,0,44.992,20.183,44.992,44.992S281.86,318.497,257.052,318.497z M391.094,467.634    c-34.467,25.043-74.131,15.904-97.741-16.589c-11.419-15.717-19.564-39.517-21.505-63.748v-40.314    c5.6-1.142,11.166-2.925,16.24-5.243l36.165,49.779c4.869,6.701,14.248,8.185,20.948,3.317c6.701-4.869,8.187-14.247,3.317-20.948    l-36.174-49.791c3.695-4.036,6.943-8.483,9.694-13.254l27.954,10.071c3.446,2.555,37.543,14.246,57.689,41.978    C431.987,396.344,424.545,443.33,391.094,467.634z M368.012,295.523l-36.516-13.156c0.699-5.9,0.725-11.338,0.054-17.3    l58.505-19.01c7.877-2.56,12.188-11.02,9.628-18.898s-11.021-12.189-18.898-9.628l-58.527,19.016    c-3.024-5.315-6.678-10.224-10.862-14.629l24.769-42.868c14.556-14.767,31.791-26.206,47.61-31.346    c39.321-12.775,81.71,8.821,94.489,48.144c12.892,39.68-9.606,85.471-48.145,97.994h0.001    C412.962,299.417,390.11,299.983,368.012,295.523z"></path>
+            </svg><span>Vision</span>
+          </div>
+        </nav>
+        <div class="margin-adjustment">
+          <div class="budget">
+            <div class="budget-list">
+              <p><strong>Total: $12,000</strong></p>
+              <p class="budget-unpaid"><span class="circle"></span>Allocated (Unpaid): $7,000</p>
+              <p class="budget-paid"> <span class="circle"></span>Allocated (Paid): $3,500</p>
+              <p class="budget-remaining"> <span class="circle"></span>Remaining: $1,500</p>
+            </div>
+            <svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg">
+              <path fill="#f59300" d="m19.93 20.99c-2.12 1.88-4.89 3.01-7.93 3.01-6.62 0-12-5.38-12-12 0-6.37 4.98-11.59 11.25-11.97v5.02c-3.51.37-6.25 3.35-6.25 6.95 0 3.86 3.14 7 7 7 1.66 0 3.19-.58 4.39-1.55z"></path>
+              <path fill="#757761" d="m23.97 12.75c-.16 2.74-1.25 5.24-2.98 7.18l-3.54-3.54c.82-1.01 1.36-2.27 1.5-3.64z"></path>
+              <path fill="#8b4218" d="m23.97 11.25h-5.02c-.34-3.26-2.94-5.86-6.2-6.2v-5.02c6.02.36 10.86 5.2 11.22 11.22z"></path>
+            </svg>
+          </div>
+          <h4>Allocated Items</h4>
+          <div class="budget-items">
+            <div class="budget-item">
+              <p>Attire</p>
+              <div class="budget-item__number">$ 800</div>
+              <div class="budget-item__tick">
+                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 45.958 45.958">
+                  <path d="M22.979,0C10.287,0,0,10.288,0,22.979s10.287,22.979,22.979,22.979s22.979-10.289,22.979-22.979S35.67,0,22.979,0z    M24.37,33.215v2.66c0,0.415-0.323,0.717-0.739,0.717h-1.773c-0.416,0-0.751-0.302-0.751-0.717v-2.426   c-1.632-0.074-3.278-0.422-4.524-0.896c-0.675-0.256-1.051-0.979-0.872-1.679L16,29.748c0.101-0.395,0.365-0.725,0.726-0.91   c0.361-0.188,0.785-0.207,1.164-0.062c1.187,0.459,2.589,0.793,4.086,0.793c1.906,0,3.211-0.736,3.211-2.074   c0-1.271-1.07-2.074-3.546-2.911c-3.579-1.204-6.03-2.876-6.03-6.121c0-2.943,2.083-5.251,5.644-5.954v-2.426   c0-0.415,0.355-0.787,0.771-0.787h1.773c0.416,0,0.721,0.372,0.721,0.787v2.191c1.557,0.067,2.681,0.298,3.621,0.604   c0.711,0.232,1.131,0.977,0.944,1.703l-0.254,1.008c-0.099,0.384-0.353,0.71-0.701,0.898s-0.759,0.222-1.135,0.093   c-0.854-0.293-1.968-0.559-3.38-0.559c-2.174,0-2.877,0.937-2.877,1.874c0,1.104,1.171,1.806,4.014,2.877   c3.98,1.405,5.579,3.245,5.579,6.254C30.33,30.003,28.227,32.547,24.37,33.215z"></path>
+                </svg>
+              </div>
+            </div>
+            <div class="budget-item">
+              <p>DJ</p>
+              <div class="budget-item__number">$ 1200</div>
+              <div class="budget-item__tick">
+                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 45.958 45.958">
+                  <path d="M22.979,0C10.287,0,0,10.288,0,22.979s10.287,22.979,22.979,22.979s22.979-10.289,22.979-22.979S35.67,0,22.979,0z    M24.37,33.215v2.66c0,0.415-0.323,0.717-0.739,0.717h-1.773c-0.416,0-0.751-0.302-0.751-0.717v-2.426   c-1.632-0.074-3.278-0.422-4.524-0.896c-0.675-0.256-1.051-0.979-0.872-1.679L16,29.748c0.101-0.395,0.365-0.725,0.726-0.91   c0.361-0.188,0.785-0.207,1.164-0.062c1.187,0.459,2.589,0.793,4.086,0.793c1.906,0,3.211-0.736,3.211-2.074   c0-1.271-1.07-2.074-3.546-2.911c-3.579-1.204-6.03-2.876-6.03-6.121c0-2.943,2.083-5.251,5.644-5.954v-2.426   c0-0.415,0.355-0.787,0.771-0.787h1.773c0.416,0,0.721,0.372,0.721,0.787v2.191c1.557,0.067,2.681,0.298,3.621,0.604   c0.711,0.232,1.131,0.977,0.944,1.703l-0.254,1.008c-0.099,0.384-0.353,0.71-0.701,0.898s-0.759,0.222-1.135,0.093   c-0.854-0.293-1.968-0.559-3.38-0.559c-2.174,0-2.877,0.937-2.877,1.874c0,1.104,1.171,1.806,4.014,2.877   c3.98,1.405,5.579,3.245,5.579,6.254C30.33,30.003,28.227,32.547,24.37,33.215z"></path>
+                </svg>
+              </div>
+            </div>
+            <div class="budget-item">
+              <p>Hair/Makeup</p>
+              <div class="budget-item__number">$ 300</div>
+              <div class="budget-item__tick">
+                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 45.958 45.958">
+                  <path d="M22.979,0C10.287,0,0,10.288,0,22.979s10.287,22.979,22.979,22.979s22.979-10.289,22.979-22.979S35.67,0,22.979,0z    M24.37,33.215v2.66c0,0.415-0.323,0.717-0.739,0.717h-1.773c-0.416,0-0.751-0.302-0.751-0.717v-2.426   c-1.632-0.074-3.278-0.422-4.524-0.896c-0.675-0.256-1.051-0.979-0.872-1.679L16,29.748c0.101-0.395,0.365-0.725,0.726-0.91   c0.361-0.188,0.785-0.207,1.164-0.062c1.187,0.459,2.589,0.793,4.086,0.793c1.906,0,3.211-0.736,3.211-2.074   c0-1.271-1.07-2.074-3.546-2.911c-3.579-1.204-6.03-2.876-6.03-6.121c0-2.943,2.083-5.251,5.644-5.954v-2.426   c0-0.415,0.355-0.787,0.771-0.787h1.773c0.416,0,0.721,0.372,0.721,0.787v2.191c1.557,0.067,2.681,0.298,3.621,0.604   c0.711,0.232,1.131,0.977,0.944,1.703l-0.254,1.008c-0.099,0.384-0.353,0.71-0.701,0.898s-0.759,0.222-1.135,0.093   c-0.854-0.293-1.968-0.559-3.38-0.559c-2.174,0-2.877,0.937-2.877,1.874c0,1.104,1.171,1.806,4.014,2.877   c3.98,1.405,5.579,3.245,5.579,6.254C30.33,30.003,28.227,32.547,24.37,33.215z"></path>
+                </svg>
+              </div>
+            </div>
+            <div class="budget-item">
+              <p>Flowers</p>
+              <div class="budget-item__number">$ 750</div>
+              <div class="budget-item__tick">
+                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 45.958 45.958">
+                  <path d="M22.979,0C10.287,0,0,10.288,0,22.979s10.287,22.979,22.979,22.979s22.979-10.289,22.979-22.979S35.67,0,22.979,0z    M24.37,33.215v2.66c0,0.415-0.323,0.717-0.739,0.717h-1.773c-0.416,0-0.751-0.302-0.751-0.717v-2.426   c-1.632-0.074-3.278-0.422-4.524-0.896c-0.675-0.256-1.051-0.979-0.872-1.679L16,29.748c0.101-0.395,0.365-0.725,0.726-0.91   c0.361-0.188,0.785-0.207,1.164-0.062c1.187,0.459,2.589,0.793,4.086,0.793c1.906,0,3.211-0.736,3.211-2.074   c0-1.271-1.07-2.074-3.546-2.911c-3.579-1.204-6.03-2.876-6.03-6.121c0-2.943,2.083-5.251,5.644-5.954v-2.426   c0-0.415,0.355-0.787,0.771-0.787h1.773c0.416,0,0.721,0.372,0.721,0.787v2.191c1.557,0.067,2.681,0.298,3.621,0.604   c0.711,0.232,1.131,0.977,0.944,1.703l-0.254,1.008c-0.099,0.384-0.353,0.71-0.701,0.898s-0.759,0.222-1.135,0.093   c-0.854-0.293-1.968-0.559-3.38-0.559c-2.174,0-2.877,0.937-2.877,1.874c0,1.104,1.171,1.806,4.014,2.877   c3.98,1.405,5.579,3.245,5.579,6.254C30.33,30.003,28.227,32.547,24.37,33.215z"></path>
+                </svg>
+              </div>
+            </div>
+            <div class="budget-item">
+              <p>Food</p>
+              <div class="budget-item__number">$ 3,000</div>
+              <div class="budget-item__tick">
+                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 45.958 45.958">
+                  <path d="M22.979,0C10.287,0,0,10.288,0,22.979s10.287,22.979,22.979,22.979s22.979-10.289,22.979-22.979S35.67,0,22.979,0z    M24.37,33.215v2.66c0,0.415-0.323,0.717-0.739,0.717h-1.773c-0.416,0-0.751-0.302-0.751-0.717v-2.426   c-1.632-0.074-3.278-0.422-4.524-0.896c-0.675-0.256-1.051-0.979-0.872-1.679L16,29.748c0.101-0.395,0.365-0.725,0.726-0.91   c0.361-0.188,0.785-0.207,1.164-0.062c1.187,0.459,2.589,0.793,4.086,0.793c1.906,0,3.211-0.736,3.211-2.074   c0-1.271-1.07-2.074-3.546-2.911c-3.579-1.204-6.03-2.876-6.03-6.121c0-2.943,2.083-5.251,5.644-5.954v-2.426   c0-0.415,0.355-0.787,0.771-0.787h1.773c0.416,0,0.721,0.372,0.721,0.787v2.191c1.557,0.067,2.681,0.298,3.621,0.604   c0.711,0.232,1.131,0.977,0.944,1.703l-0.254,1.008c-0.099,0.384-0.353,0.71-0.701,0.898s-0.759,0.222-1.135,0.093   c-0.854-0.293-1.968-0.559-3.38-0.559c-2.174,0-2.877,0.937-2.877,1.874c0,1.104,1.171,1.806,4.014,2.877   c3.98,1.405,5.579,3.245,5.579,6.254C30.33,30.003,28.227,32.547,24.37,33.215z"></path>
+                </svg>
+              </div>
+            </div>
+            <div class="budget-item">
+              <p>Venue</p>
+              <div class="budget-item__number">$ 4,500</div>
+              <div class="budget-item__tick">
+                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 45.958 45.958">
+                  <path d="M22.979,0C10.287,0,0,10.288,0,22.979s10.287,22.979,22.979,22.979s22.979-10.289,22.979-22.979S35.67,0,22.979,0z    M24.37,33.215v2.66c0,0.415-0.323,0.717-0.739,0.717h-1.773c-0.416,0-0.751-0.302-0.751-0.717v-2.426   c-1.632-0.074-3.278-0.422-4.524-0.896c-0.675-0.256-1.051-0.979-0.872-1.679L16,29.748c0.101-0.395,0.365-0.725,0.726-0.91   c0.361-0.188,0.785-0.207,1.164-0.062c1.187,0.459,2.589,0.793,4.086,0.793c1.906,0,3.211-0.736,3.211-2.074   c0-1.271-1.07-2.074-3.546-2.911c-3.579-1.204-6.03-2.876-6.03-6.121c0-2.943,2.083-5.251,5.644-5.954v-2.426   c0-0.415,0.355-0.787,0.771-0.787h1.773c0.416,0,0.721,0.372,0.721,0.787v2.191c1.557,0.067,2.681,0.298,3.621,0.604   c0.711,0.232,1.131,0.977,0.944,1.703l-0.254,1.008c-0.099,0.384-0.353,0.71-0.701,0.898s-0.759,0.222-1.135,0.093   c-0.854-0.293-1.968-0.559-3.38-0.559c-2.174,0-2.877,0.937-2.877,1.874c0,1.104,1.171,1.806,4.014,2.877   c3.98,1.405,5.579,3.245,5.579,6.254C30.33,30.003,28.227,32.547,24.37,33.215z"></path>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="grid-child">
+    <div class="mobile-screen">
+      <div class="mobile-background">
+        <div class="topbar">
+          <div class="menu-icon"></div>
+          <h3 class="title">Wedding Vision</h3>
+          <div class="more-icon"></div>
+        </div>
+        <button class="btn btn-plus">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.66667 426.66667">
+            <path d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"></path>
+          </svg>
+        </button>
+        <nav>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 438.891 438.891" style="enable-background: new 0 0 438.891 438.891" xml:space="preserve">
+              <path d="M347.968,57.503h-39.706V39.74c0-5.747-6.269-8.359-12.016-8.359h-30.824c-7.314-20.898-25.6-31.347-46.498-31.347     c-20.668-0.777-39.467,11.896-46.498,31.347h-30.302c-5.747,0-11.494,2.612-11.494,8.359v17.763H90.923     c-23.53,0.251-42.78,18.813-43.886,42.318v299.363c0,22.988,20.898,39.706,43.886,39.706h257.045     c22.988,0,43.886-16.718,43.886-39.706V99.822C390.748,76.316,371.498,57.754,347.968,57.503z M151.527,52.279h28.735     c5.016-0.612,9.045-4.428,9.927-9.404c3.094-13.474,14.915-23.146,28.735-23.51c13.692,0.415,25.335,10.117,28.212,23.51     c0.937,5.148,5.232,9.013,10.449,9.404h29.78v41.796H151.527V52.279z M370.956,399.185c0,11.494-11.494,18.808-22.988,18.808     H90.923c-11.494,0-22.988-7.314-22.988-18.808V99.822c1.066-11.964,10.978-21.201,22.988-21.42h39.706v26.645     c0.552,5.854,5.622,10.233,11.494,9.927h154.122c5.98,0.327,11.209-3.992,12.016-9.927V78.401h39.706     c12.009,0.22,21.922,9.456,22.988,21.42V399.185z"></path>
+              <path d="M179.217,233.569c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,233.962,179.427,233.761,179.217,233.569z"></path>
+              <path d="M329.16,256.034H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,256.034,329.16,256.034z"></path>
+              <path d="M179.217,149.977c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.364-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,150.37,179.427,150.169,179.217,149.977z"></path>
+              <path d="M329.16,172.442H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,172.442,329.16,172.442z"></path>
+              <path d="M179.217,317.16c-3.919-4.131-10.425-4.363-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,317.554,179.427,317.353,179.217,317.16z"></path>
+              <path d="M329.16,339.626H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,339.626,329.16,339.626z"></path>
+            </svg><span>Checklist</span>
+          </div>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 505.743 505.743" height="512" viewBox="0 0 505.743 505.743" width="512">
+              <path d="m425.246 260.217c-17.602-42.21-40.115-79.35-64.801-107.329 13.337-2.438 29.261-4.145 52.393-4.145v-30c-35.14 0-55.752 3.746-73.623 7.988l37.843-93.222c-66.961-44.841-182.06-44.515-248.439 0l37.843 93.222c-17.871-4.242-38.483-7.988-73.623-7.988v30c23.132 0 39.057 1.707 52.394 4.145-58.869 62.268-139.67 256.557-71.649 325.022 30.309 29.656 81.257 28.548 140.252 27.263 25.119-.699 52.887-.699 78.006 0 48.182 1.136 110.558 3.569 140.251-27.264 47.766-48.898 20.061-150.248-6.847-217.692zm-172.407-230.474c39.966 0 70.719 10.527 86.352 17.291l-35.67 87.871c-22.645 4.984-78.717 4.985-101.363 0l-35.67-87.869c15.649-6.772 46.396-17.293 86.351-17.293zm158.273 426.724c-25.366 27.103-107.285 17.498-158.273 18.147-51.021-.651-132.866 8.955-158.273-18.148-11.213-10.971-16.663-28.774-16.663-54.427-1.016-72.963 47.253-191.171 101.212-241.307 35.297 10.488 112.202 10.475 147.442.001 54.006 50.179 102.254 168.427 101.216 241.307.001 25.652-5.449 43.456-16.661 54.427z"></path>
+              <path d="m245.754 267.835c19.796-6.332 35.086 5.992 47.485 12.043l14.233-26.408c-13.63-7.054-21.329-13.046-40.527-16.521v-19.206h-30v21.384c-31.431 9.654-45.626 54.788-18.7 76.216 9.268 7.269 22.062 13.42 44.159 21.232 25.404 9.194 11.412 42.439-10.559 41.6-13.908.081-18.235-.593-28.898-7.568l-12.552-8.211-16.422 25.104c14.339 9.525 27.372 18.834 42.973 20.052v21.191h30v-22.645c46.777-13.264 54.403-80.945 5.456-97.808-13.088-4.627-27.558-10.212-35.643-16.552-3.269-2.563-2.778-7.763-2.55-9.295.739-4.962 4.206-11.764 11.545-14.608z"></path>
+            </svg><span>Budget</span>
+          </div>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 477.867 477.867" style="enable-background: new 0 0 477.867 477.867" xml:space="preserve">
+              <path d="M238.933,0C106.974,0,0,106.974,0,238.933s106.974,238.933,238.933,238.933s238.933-106.974,238.933-238.933    C477.726,107.033,370.834,0.141,238.933,0z M238.933,443.733c-113.108,0-204.8-91.692-204.8-204.8s91.692-204.8,204.8-204.8    s204.8,91.692,204.8,204.8C443.611,351.991,351.991,443.611,238.933,443.733z"></path>
+              <circle cx="153.6" cy="204.8" r="34.133"></circle>
+              <circle cx="324.267" cy="204.8" r="34.133"></circle>
+              <path d="M304.287,296.61c-5.637-7.554-16.331-9.108-23.885-3.47c-0.327,0.244-0.644,0.499-0.953,0.766h0    c-24.135,17.628-56.898,17.628-81.033,0c-7.131-6.164-17.909-5.379-24.072,1.752c-6.164,7.131-5.379,17.909,1.752,24.072    c0.308,0.267,0.626,0.522,0.953,0.766c36.531,27.922,87.236,27.922,123.767,0C308.371,314.858,309.925,304.164,304.287,296.61z"></path>
+            </svg><span>Guests</span>
+          </div>
+          <div class="icon active">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 511.999 511.999" style="enable-background: new 0 0 511.999 511.999" xml:space="preserve">
+              <path d="M506.827,190.017c-17.9-55.093-71.314-85.254-126.305-67.412c-7.266,2.358-14.634,5.625-21.914,9.683    c1.597-8.174,2.432-19.642,2.432-27.288c0-57.891-47.109-105-105-105s-99.085,47.109-99.085,105    c0,7.646,0.835,19.114,2.432,27.288c-7.28-4.058-14.634-7.324-21.899-9.683c-55.108-17.842-114.42,12.334-132.32,67.426    c-17.911,55.189,12.215,114.366,67.412,132.29c7.281,2.358,15.162,4.043,23.423,5.054c-6.094,5.669-11.484,11.66-15.967,17.842    c-34.11,46.925-23.751,112.548,23.218,146.66c47.234,34.388,106.86,23.438,140.745-23.218c4.497-6.182,8.54-13.154,12.041-20.713    c3.501,7.559,7.544,14.531,12.041,20.713c34.105,46.959,93.716,57.346,140.66,23.218c46.94-34.091,57.35-99.705,23.218-146.66    c-4.482-6.182-9.873-12.173-15.967-17.842c8.262-1.011,16.143-2.695,23.408-5.054C494.487,304.443,524.778,245.36,506.827,190.017    z M389.062,246.003l-58.865,19.125c2.649,23.56-4.815,43.214-19.001,58.727l36.323,49.999    c11.806,16.238-12.82,33.421-24.258,17.637l-36.262-49.916c-9.467,4.323-19.893,6.879-30.959,6.879s-21.493-2.556-30.959-6.879    l-36.262,49.916c-11.568,15.964-36.053-1.414-24.258-17.637l36.323-49.999c-12.202-13.345-19.843-30.938-19.843-50.402    c0-2.851,0.531-5.557,0.842-8.326l-58.865-19.125c-18.953-6.165-9.457-34.646,9.258-28.535l58.852,19.122    c10.541-18.481,28.231-32.239,49.713-36.617v-61.518c0-19.773,30.2-19.854,30.2,0v61.518    c21.482,4.378,39.371,18.137,49.913,36.617l58.852-19.122C398.446,211.335,408.032,239.832,389.062,246.003z"></path>
+              <path>d="M256.04,228.454c-24.814,0-45,20.186-45,45s20.186,45,45,45c24.814,0,45-20.186,45-45 C301.04,248.64,280.854,228.454,256.04,228.454z")</path>
+            </svg><span>Vision</span>
+          </div>
+        </nav>
+        <div class="margin-adjustment">
+          <h4>Color Palette
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512.001 512.001">
+              <path d="M496.063,62.299l-46.396-46.4c-21.199-21.199-55.689-21.198-76.888,0C352.82,35.86,47.964,340.739,27.591,361.113    c-2.17,2.17-3.624,5.054-4.142,7.875L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    L143,488.549c2.895-0.54,5.741-2.008,7.875-4.143l345.188-345.214C517.311,117.944,517.314,83.55,496.063,62.299z M33.721,478.276    l14.033-75.784l61.746,61.75L33.721,478.276z M140.269,452.585L59.41,371.721L354.62,76.488l80.859,80.865L140.269,452.585z     M474.85,117.979l-18.159,18.161l-80.859-80.865l18.159-18.161c9.501-9.502,24.96-9.503,34.463,0l46.396,46.4    C484.375,93.039,484.375,108.453,474.85,117.979z"></path>
+            </svg>
+          </h4>
+          <div class="color-palette">
+            <div class="color-palette__item"></div>
+            <div class="color-palette__item"></div>
+            <div class="color-palette__item"></div>
+            <div class="color-palette__item"></div>
+          </div>
+          <h4>Inspiration Gallery</h4>
+          <div class="inspiration"><img src="https://assets.codepen.io/567707/evermore-wedding_1.jpg?format=auto"/></div>
+        </div>
+      </div>
+    </div>
+    <div class="mobile-screen">
+      <div class="mobile-background flowers">
+        <h1>evermore<small>Your love should be celebrated</small></h1>
+        <div class="button-wrapper">
+          <button class="btn btn-primary">Sign up for free</button>
+          <p>Already have an account?<br/><a href="#">Log in here</a></p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="grid-child">
+    <div class="mobile-screen">
+      <div class="mobile-background">
+        <div class="topbar">
+          <div class="menu-icon"></div>
+          <h3 class="title">Checklist</h3>
+          <div class="more-icon"></div>
+        </div>
+        <button class="btn btn-plus">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.66667 426.66667">
+            <path d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"></path>
+          </svg>
+        </button>
+        <nav>
+          <div class="icon active">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 407.007 407.007" style="enable-background: new 0 0 407.007 407.007" xml:space="preserve">
+              <path d="M271.422,30.844h-29.78c-3.716-0.115-6.909-2.67-7.837-6.269c-2.822-14.661-15.903-25.082-30.824-24.555     c-15.011-0.263-28.028,10.327-30.824,25.078c-0.966,3.5-4.209,5.878-7.837,5.747h-28.735v52.245h135.837V30.844z"></path>
+              <path d="M355.014,382.974V83.611c0.032-11.83-9.533-21.446-21.363-21.478c-0.542-0.001-1.084,0.018-1.625,0.057h-44.931v26.645     c0,4.18-2.612,9.927-6.792,9.927H126.181c-4.18,0-6.269-5.747-6.269-9.927V62.191H74.981     c-11.798-0.866-22.065,7.997-22.93,19.796c-0.04,0.541-0.059,1.083-0.057,1.625v299.363     c-0.292,12.981,9.995,23.741,22.976,24.032c0.004,0,0.008,0,0.012,0h257.045c12.981-0.285,23.273-11.04,22.988-24.021     C355.014,382.982,355.014,382.978,355.014,382.974z M161.185,314.011l-40.751,38.139c-1.303,1.559-3.196,2.505-5.224,2.612     c-2.183-0.086-4.246-1.024-5.747-2.612l-21.42-21.943c-2.847-3.188-2.614-8.069,0.522-10.971c3.047-2.987,7.924-2.987,10.971,0     l15.673,16.718l35.527-33.437c3.562-2.458,8.443-1.564,10.901,1.998C163.643,307.421,163.457,311.309,161.185,314.011z      M161.185,230.419L161.185,230.419l-40.751,38.139c-1.303,1.559-3.196,2.505-5.224,2.612c-2.183-0.086-4.246-1.024-5.747-2.612     l-21.42-21.943c-2.847-3.188-2.614-8.069,0.522-10.971c3.047-2.987,7.924-2.987,10.971,0l15.673,16.718l35.527-33.437     c3.562-2.458,8.443-1.564,10.901,1.998C163.643,223.829,163.457,227.717,161.185,230.419z M161.185,146.827l-40.751,38.139     c-1.303,1.559-3.196,2.505-5.224,2.612c-2.183-0.086-4.246-1.024-5.747-2.612l-21.42-21.943     c-2.847-3.188-2.614-8.069,0.522-10.971c3.047-2.987,7.924-2.987,10.971,0l15.673,16.718l35.527-33.437     c3.562-2.458,8.443-1.564,10.901,1.998C163.643,140.237,163.457,144.125,161.185,146.827z M313.218,344.313H193.054     c-4.328,0-7.837-3.509-7.837-7.837s3.509-7.837,7.837-7.837h120.163c4.328,0,7.837,3.509,7.837,7.837     S317.546,344.313,313.218,344.313z M313.218,260.721H193.054c-4.328,0-7.837-3.509-7.837-7.837c0-4.328,3.509-7.837,7.837-7.837     h120.163c4.328,0,7.837,3.509,7.837,7.837C321.054,257.212,317.546,260.721,313.218,260.721z M313.218,177.129H193.054     c-4.328,0-7.837-3.509-7.837-7.837c0-4.328,3.509-7.837,7.837-7.837h120.163c4.328,0,7.837,3.509,7.837,7.837     C321.054,173.621,317.546,177.129,313.218,177.129z"></path>
+            </svg><span>Checklist</span>
+          </div>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 505.743 505.743" height="512" viewBox="0 0 505.743 505.743" width="512">
+              <path d="m425.246 260.217c-17.602-42.21-40.115-79.35-64.801-107.329 13.337-2.438 29.261-4.145 52.393-4.145v-30c-35.14 0-55.752 3.746-73.623 7.988l37.843-93.222c-66.961-44.841-182.06-44.515-248.439 0l37.843 93.222c-17.871-4.242-38.483-7.988-73.623-7.988v30c23.132 0 39.057 1.707 52.394 4.145-58.869 62.268-139.67 256.557-71.649 325.022 30.309 29.656 81.257 28.548 140.252 27.263 25.119-.699 52.887-.699 78.006 0 48.182 1.136 110.558 3.569 140.251-27.264 47.766-48.898 20.061-150.248-6.847-217.692zm-172.407-230.474c39.966 0 70.719 10.527 86.352 17.291l-35.67 87.871c-22.645 4.984-78.717 4.985-101.363 0l-35.67-87.869c15.649-6.772 46.396-17.293 86.351-17.293zm158.273 426.724c-25.366 27.103-107.285 17.498-158.273 18.147-51.021-.651-132.866 8.955-158.273-18.148-11.213-10.971-16.663-28.774-16.663-54.427-1.016-72.963 47.253-191.171 101.212-241.307 35.297 10.488 112.202 10.475 147.442.001 54.006 50.179 102.254 168.427 101.216 241.307.001 25.652-5.449 43.456-16.661 54.427z"></path>
+              <path d="m245.754 267.835c19.796-6.332 35.086 5.992 47.485 12.043l14.233-26.408c-13.63-7.054-21.329-13.046-40.527-16.521v-19.206h-30v21.384c-31.431 9.654-45.626 54.788-18.7 76.216 9.268 7.269 22.062 13.42 44.159 21.232 25.404 9.194 11.412 42.439-10.559 41.6-13.908.081-18.235-.593-28.898-7.568l-12.552-8.211-16.422 25.104c14.339 9.525 27.372 18.834 42.973 20.052v21.191h30v-22.645c46.777-13.264 54.403-80.945 5.456-97.808-13.088-4.627-27.558-10.212-35.643-16.552-3.269-2.563-2.778-7.763-2.55-9.295.739-4.962 4.206-11.764 11.545-14.608z"></path>
+            </svg><span>Budget</span>
+          </div>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 477.867 477.867" style="enable-background: new 0 0 477.867 477.867" xml:space="preserve">
+              <path d="M238.933,0C106.974,0,0,106.974,0,238.933s106.974,238.933,238.933,238.933s238.933-106.974,238.933-238.933    C477.726,107.033,370.834,0.141,238.933,0z M238.933,443.733c-113.108,0-204.8-91.692-204.8-204.8s91.692-204.8,204.8-204.8    s204.8,91.692,204.8,204.8C443.611,351.991,351.991,443.611,238.933,443.733z"></path>
+              <circle cx="153.6" cy="204.8" r="34.133"></circle>
+              <circle cx="324.267" cy="204.8" r="34.133"></circle>
+              <path d="M304.287,296.61c-5.637-7.554-16.331-9.108-23.885-3.47c-0.327,0.244-0.644,0.499-0.953,0.766h0    c-24.135,17.628-56.898,17.628-81.033,0c-7.131-6.164-17.909-5.379-24.072,1.752c-6.164,7.131-5.379,17.909,1.752,24.072    c0.308,0.267,0.626,0.522,0.953,0.766c36.531,27.922,87.236,27.922,123.767,0C308.371,314.858,309.925,304.164,304.287,296.61z"></path>
+            </svg><span>Guests</span>
+          </div>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve">
+              <path d="M506.791,186.581c-17.89-55.053-77.234-85.287-132.283-67.403c-7.272,2.363-14.634,5.631-21.91,9.68    c1.603-8.169,2.436-16.182,2.436-23.828c0-58.447-40.387-104.981-97.982-104.981c-57.679,0-100.086,46.637-100.086,104.981    c0,7.645,0.833,15.658,2.436,23.828c-7.276-4.048-14.638-7.317-21.91-9.68C82.446,101.291,23.098,131.528,5.209,186.581    c-18.142,55.838,12.726,118.021,67.403,135.788c7.272,2.363,15.148,4.045,23.414,5.047c-6.099,5.668-11.481,11.661-15.976,17.846    C46.025,392.094,56.444,457.876,103.274,491.9c46.808,34.01,107.605,23.759,141.74-23.225c4.495-6.186,8.529-13.158,12.037-20.71    c3.507,7.553,7.542,14.524,12.037,20.71c34.181,47.048,92.928,57.162,139.636,23.225c46.831-34.025,57.25-99.807,23.225-146.638    c-4.493-6.186-9.878-12.178-15.976-17.847c8.264-1.001,16.145-2.685,23.417-5.046C494.066,304.603,524.933,242.42,506.791,186.581    z M257.052,30.044c39.394,0,67.987,31.536,67.987,74.986c0,19.556-7.653,43.667-20.471,64.497    c-1.551,2.521-2.268,5.33-2.222,8.099l-15.616,27.028c-4.67-2.021-9.78-3.588-14.881-4.627V138.53    c0-8.282-6.515-14.997-14.797-14.997c-8.282,0-14.997,6.715-14.997,14.997v61.498c-5.221,1.064-10.239,2.686-15.007,4.775    l-17.435-28.556c-0.175-2.314-0.888-4.618-2.182-6.72c-12.818-20.83-20.471-44.941-20.471-64.497    C186.961,62.281,217.093,30.044,257.052,30.044z M81.88,293.843c-38.539-12.523-61.037-58.314-48.145-97.993    c12.778-39.324,55.162-60.921,94.489-48.146c16.144,5.246,33.771,17.046,48.512,32.256l25.755,42.184    c-4.094,4.347-7.675,9.179-10.647,14.404l-58.527-19.016c-7.884-2.561-16.339,1.752-18.898,9.628    c-2.561,7.878,1.752,16.338,9.628,18.898l58.505,19.01c-0.678,6.02-0.632,11.422,0.037,17.164l-37.46,13.069    C122.678,300.014,99.332,299.513,81.88,293.843z M242.053,387.296c-1.939,24.232-9.884,48.032-21.303,63.749    c-24.406,33.59-66.469,40.839-99.845,16.589c-33.45-24.304-40.891-71.29-16.588-104.742    c19.857-27.333,54.348-39.752,56.964-41.457l30.712-10.715c2.766,4.816,6.037,9.306,9.764,13.375l-36.175,49.792    c-4.869,6.701-3.383,16.08,3.317,20.948c6.697,4.867,16.077,3.385,20.948-3.317l36.165-49.779    c5.074,2.317,10.44,4.102,16.04,5.243V387.296z M257.052,318.497c-24.808,0-44.992-20.183-44.992-44.992    s20.183-44.992,44.992-44.992c24.808,0,44.992,20.183,44.992,44.992S281.86,318.497,257.052,318.497z M391.094,467.634    c-34.467,25.043-74.131,15.904-97.741-16.589c-11.419-15.717-19.564-39.517-21.505-63.748v-40.314    c5.6-1.142,11.166-2.925,16.24-5.243l36.165,49.779c4.869,6.701,14.248,8.185,20.948,3.317c6.701-4.869,8.187-14.247,3.317-20.948    l-36.174-49.791c3.695-4.036,6.943-8.483,9.694-13.254l27.954,10.071c3.446,2.555,37.543,14.246,57.689,41.978    C431.987,396.344,424.545,443.33,391.094,467.634z M368.012,295.523l-36.516-13.156c0.699-5.9,0.725-11.338,0.054-17.3    l58.505-19.01c7.877-2.56,12.188-11.02,9.628-18.898s-11.021-12.189-18.898-9.628l-58.527,19.016    c-3.024-5.315-6.678-10.224-10.862-14.629l24.769-42.868c14.556-14.767,31.791-26.206,47.61-31.346    c39.321-12.775,81.71,8.821,94.489,48.144c12.892,39.68-9.606,85.471-48.145,97.994h0.001    C412.962,299.417,390.11,299.983,368.012,295.523z"></path>
+            </svg><span>Vision</span>
+          </div>
+        </nav>
+        <div class="margin-adjustment"> 
+          <h4>Due by March 2021</h4>
+          <div class="check-item">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 459 459">
+              <path d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51 C459,22.95,436.05,0,408,0L408,0z"></path>
+            </svg>
+            <p>Draft budget</p>
+          </div>
+          <div class="check-item">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 459 459">
+              <path d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51 C459,22.95,436.05,0,408,0L408,0z"></path>
+            </svg>
+            <p>Finalize guest list</p>
+          </div>
+          <h4>Due by May 2021</h4>
+          <div class="check-item">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 459 459">
+              <path d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51 C459,22.95,436.05,0,408,0L408,0z"></path>
+            </svg>
+            <p>Research venues</p>
+          </div>
+          <div class="check-item">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 459 459">
+              <path d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51 C459,22.95,436.05,0,408,0L408,0z"></path>
+            </svg>
+            <p>Contact venues/Schedule tours</p>
+          </div>
+          <div class="check-item">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 459 459">
+              <path d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51 C459,22.95,436.05,0,408,0L408,0z"></path>
+            </svg>
+            <p>Research caterers</p>
+          </div>
+          <div class="check-item">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 459 459">
+              <path d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51 C459,22.95,436.05,0,408,0L408,0z"></path>
+            </svg>
+            <p>Research bakery</p>
+          </div>
+          <h4>Due by June 2021</h4>
+          <div class="check-item">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 459 459">
+              <path d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51 C459,22.95,436.05,0,408,0L408,0z"></path>
+            </svg>
+            <p>Finalize venue + down payment</p>
+          </div>
+          <div class="check-item">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 459 459">
+              <path d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51 C459,22.95,436.05,0,408,0L408,0z"></path>
+            </svg>
+            <p>Finalize wedding theme</p>
+          </div>
+          <div class="check-item">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 459 459">
+              <path d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51 C459,22.95,436.05,0,408,0L408,0z"></path>
+            </svg>
+            <p>Research photographers</p>
+          </div>
+          <div class="check-item">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 459 459">
+              <path d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51 C459,22.95,436.05,0,408,0L408,0z"></path>
+            </svg>
+            <p>Contact caterers</p>
+          </div>
+          <h4>Due by July 2021</h4>
+          <div class="check-item">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 459 459">
+              <path d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51 C459,22.95,436.05,0,408,0L408,0z"></path>
+            </svg>
+            <p>Food tasting</p>
+          </div>
+          <div class="check-item">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 459 459">
+              <path d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51 C459,22.95,436.05,0,408,0L408,0z"></path>
+            </svg>
+            <p>Order save-the-dates</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mobile-screen">
+      <div class="mobile-background plain">
+        <div class="onboarding-text">
+          <h2>Vision Board<small>Import and save photos to help you envision your big day</small></h2>
+        </div>
+        <div class="onboarding-image"><img src="https://assets.codepen.io/567707/evermore-flowers.jpg?format=auto"/>
+          <div class="rounded-ph rounded-ph--long"></div>
+          <div class="rounded-ph rounded-ph--short"></div>
+        </div>
+        <div class="onboarding-steps"></div>
+        <div class="button-wrapper">
+          <button class="btn btn-primary">Get started</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="grid-child">
+    <div class="mobile-screen">
+      <div class="mobile-background">
+        <div class="topbar">
+          <div class="menu-icon"></div>
+          <h3 class="title">Guestlist</h3>
+          <div class="more-icon"></div>
+        </div>
+        <button class="btn btn-plus">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.66667 426.66667">
+            <path d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"></path>
+          </svg>
+        </button>
+        <nav>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 438.891 438.891" style="enable-background: new 0 0 438.891 438.891" xml:space="preserve">
+              <path d="M347.968,57.503h-39.706V39.74c0-5.747-6.269-8.359-12.016-8.359h-30.824c-7.314-20.898-25.6-31.347-46.498-31.347     c-20.668-0.777-39.467,11.896-46.498,31.347h-30.302c-5.747,0-11.494,2.612-11.494,8.359v17.763H90.923     c-23.53,0.251-42.78,18.813-43.886,42.318v299.363c0,22.988,20.898,39.706,43.886,39.706h257.045     c22.988,0,43.886-16.718,43.886-39.706V99.822C390.748,76.316,371.498,57.754,347.968,57.503z M151.527,52.279h28.735     c5.016-0.612,9.045-4.428,9.927-9.404c3.094-13.474,14.915-23.146,28.735-23.51c13.692,0.415,25.335,10.117,28.212,23.51     c0.937,5.148,5.232,9.013,10.449,9.404h29.78v41.796H151.527V52.279z M370.956,399.185c0,11.494-11.494,18.808-22.988,18.808     H90.923c-11.494,0-22.988-7.314-22.988-18.808V99.822c1.066-11.964,10.978-21.201,22.988-21.42h39.706v26.645     c0.552,5.854,5.622,10.233,11.494,9.927h154.122c5.98,0.327,11.209-3.992,12.016-9.927V78.401h39.706     c12.009,0.22,21.922,9.456,22.988,21.42V399.185z"></path>
+              <path d="M179.217,233.569c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,233.962,179.427,233.761,179.217,233.569z"></path>
+              <path d="M329.16,256.034H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,256.034,329.16,256.034z"></path>
+              <path d="M179.217,149.977c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.364-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,150.37,179.427,150.169,179.217,149.977z"></path>
+              <path d="M329.16,172.442H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,172.442,329.16,172.442z"></path>
+              <path d="M179.217,317.16c-3.919-4.131-10.425-4.363-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,317.554,179.427,317.353,179.217,317.16z"></path>
+              <path d="M329.16,339.626H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,339.626,329.16,339.626z"></path>
+            </svg><span>Checklist</span>
+          </div>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 505.743 505.743" height="512" viewBox="0 0 505.743 505.743" width="512">
+              <path d="m425.246 260.217c-17.602-42.21-40.115-79.35-64.801-107.329 13.337-2.438 29.261-4.145 52.393-4.145v-30c-35.14 0-55.752 3.746-73.623 7.988l37.843-93.222c-66.961-44.841-182.06-44.515-248.439 0l37.843 93.222c-17.871-4.242-38.483-7.988-73.623-7.988v30c23.132 0 39.057 1.707 52.394 4.145-58.869 62.268-139.67 256.557-71.649 325.022 30.309 29.656 81.257 28.548 140.252 27.263 25.119-.699 52.887-.699 78.006 0 48.182 1.136 110.558 3.569 140.251-27.264 47.766-48.898 20.061-150.248-6.847-217.692zm-172.407-230.474c39.966 0 70.719 10.527 86.352 17.291l-35.67 87.871c-22.645 4.984-78.717 4.985-101.363 0l-35.67-87.869c15.649-6.772 46.396-17.293 86.351-17.293zm158.273 426.724c-25.366 27.103-107.285 17.498-158.273 18.147-51.021-.651-132.866 8.955-158.273-18.148-11.213-10.971-16.663-28.774-16.663-54.427-1.016-72.963 47.253-191.171 101.212-241.307 35.297 10.488 112.202 10.475 147.442.001 54.006 50.179 102.254 168.427 101.216 241.307.001 25.652-5.449 43.456-16.661 54.427z"></path>
+              <path d="m245.754 267.835c19.796-6.332 35.086 5.992 47.485 12.043l14.233-26.408c-13.63-7.054-21.329-13.046-40.527-16.521v-19.206h-30v21.384c-31.431 9.654-45.626 54.788-18.7 76.216 9.268 7.269 22.062 13.42 44.159 21.232 25.404 9.194 11.412 42.439-10.559 41.6-13.908.081-18.235-.593-28.898-7.568l-12.552-8.211-16.422 25.104c14.339 9.525 27.372 18.834 42.973 20.052v21.191h30v-22.645c46.777-13.264 54.403-80.945 5.456-97.808-13.088-4.627-27.558-10.212-35.643-16.552-3.269-2.563-2.778-7.763-2.55-9.295.739-4.962 4.206-11.764 11.545-14.608z"></path>
+            </svg><span>Budget</span>
+          </div>
+          <div class="icon active">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 477.867 477.867" style="enable-background: new 0 0 477.867 477.867" xml:space="preserve">
+              <path d="M238.933,0C106.974,0,0,106.974,0,238.933s106.974,238.933,238.933,238.933s238.933-106.974,238.933-238.933    C477.716,107.036,370.83,0.15,238.933,0z M119.467,204.8c0-18.851,15.282-34.133,34.133-34.133s34.133,15.282,34.133,34.133    s-15.282,34.133-34.133,34.133S119.467,223.651,119.467,204.8z M300.817,320.512L300.817,320.512    c-36.539,27.899-87.228,27.899-123.768,0c-7.215-6.065-8.147-16.831-2.081-24.046c5.874-6.987,16.205-8.115,23.449-2.561    c24.135,17.628,56.898,17.628,81.033,0c7.48-5.736,18.193-4.322,23.928,3.158C308.932,304.306,307.804,314.638,300.817,320.512z     M324.267,238.933c-18.851,0-34.133-15.282-34.133-34.133s15.282-34.133,34.133-34.133c18.851,0,34.133,15.282,34.133,34.133    S343.118,238.933,324.267,238.933z"></path>
+            </svg><span>Guests</span>
+          </div>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve">
+              <path d="M506.791,186.581c-17.89-55.053-77.234-85.287-132.283-67.403c-7.272,2.363-14.634,5.631-21.91,9.68    c1.603-8.169,2.436-16.182,2.436-23.828c0-58.447-40.387-104.981-97.982-104.981c-57.679,0-100.086,46.637-100.086,104.981    c0,7.645,0.833,15.658,2.436,23.828c-7.276-4.048-14.638-7.317-21.91-9.68C82.446,101.291,23.098,131.528,5.209,186.581    c-18.142,55.838,12.726,118.021,67.403,135.788c7.272,2.363,15.148,4.045,23.414,5.047c-6.099,5.668-11.481,11.661-15.976,17.846    C46.025,392.094,56.444,457.876,103.274,491.9c46.808,34.01,107.605,23.759,141.74-23.225c4.495-6.186,8.529-13.158,12.037-20.71    c3.507,7.553,7.542,14.524,12.037,20.71c34.181,47.048,92.928,57.162,139.636,23.225c46.831-34.025,57.25-99.807,23.225-146.638    c-4.493-6.186-9.878-12.178-15.976-17.847c8.264-1.001,16.145-2.685,23.417-5.046C494.066,304.603,524.933,242.42,506.791,186.581    z M257.052,30.044c39.394,0,67.987,31.536,67.987,74.986c0,19.556-7.653,43.667-20.471,64.497    c-1.551,2.521-2.268,5.33-2.222,8.099l-15.616,27.028c-4.67-2.021-9.78-3.588-14.881-4.627V138.53    c0-8.282-6.515-14.997-14.797-14.997c-8.282,0-14.997,6.715-14.997,14.997v61.498c-5.221,1.064-10.239,2.686-15.007,4.775    l-17.435-28.556c-0.175-2.314-0.888-4.618-2.182-6.72c-12.818-20.83-20.471-44.941-20.471-64.497    C186.961,62.281,217.093,30.044,257.052,30.044z M81.88,293.843c-38.539-12.523-61.037-58.314-48.145-97.993    c12.778-39.324,55.162-60.921,94.489-48.146c16.144,5.246,33.771,17.046,48.512,32.256l25.755,42.184    c-4.094,4.347-7.675,9.179-10.647,14.404l-58.527-19.016c-7.884-2.561-16.339,1.752-18.898,9.628    c-2.561,7.878,1.752,16.338,9.628,18.898l58.505,19.01c-0.678,6.02-0.632,11.422,0.037,17.164l-37.46,13.069    C122.678,300.014,99.332,299.513,81.88,293.843z M242.053,387.296c-1.939,24.232-9.884,48.032-21.303,63.749    c-24.406,33.59-66.469,40.839-99.845,16.589c-33.45-24.304-40.891-71.29-16.588-104.742    c19.857-27.333,54.348-39.752,56.964-41.457l30.712-10.715c2.766,4.816,6.037,9.306,9.764,13.375l-36.175,49.792    c-4.869,6.701-3.383,16.08,3.317,20.948c6.697,4.867,16.077,3.385,20.948-3.317l36.165-49.779    c5.074,2.317,10.44,4.102,16.04,5.243V387.296z M257.052,318.497c-24.808,0-44.992-20.183-44.992-44.992    s20.183-44.992,44.992-44.992c24.808,0,44.992,20.183,44.992,44.992S281.86,318.497,257.052,318.497z M391.094,467.634    c-34.467,25.043-74.131,15.904-97.741-16.589c-11.419-15.717-19.564-39.517-21.505-63.748v-40.314    c5.6-1.142,11.166-2.925,16.24-5.243l36.165,49.779c4.869,6.701,14.248,8.185,20.948,3.317c6.701-4.869,8.187-14.247,3.317-20.948    l-36.174-49.791c3.695-4.036,6.943-8.483,9.694-13.254l27.954,10.071c3.446,2.555,37.543,14.246,57.689,41.978    C431.987,396.344,424.545,443.33,391.094,467.634z M368.012,295.523l-36.516-13.156c0.699-5.9,0.725-11.338,0.054-17.3    l58.505-19.01c7.877-2.56,12.188-11.02,9.628-18.898s-11.021-12.189-18.898-9.628l-58.527,19.016    c-3.024-5.315-6.678-10.224-10.862-14.629l24.769-42.868c14.556-14.767,31.791-26.206,47.61-31.346    c39.321-12.775,81.71,8.821,94.489,48.144c12.892,39.68-9.606,85.471-48.145,97.994h0.001    C412.962,299.417,390.11,299.983,368.012,295.523z"></path>
+            </svg><span>Vision</span>
+          </div>
+        </nav>
+        <div class="margin-adjustment">
+          <div class="guest-list-header">
+            <p>Total Guests: 32</p><span>Sent?</span><span>RSVP?</span>
+          </div>
+          <div class="guest-item">
+            <p class="name">Amelia Frost (1)</p>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+          </div>
+          <div class="guest-item">
+            <p class="name">Benji MacKenzie (1)</p>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+          </div>
+          <div class="guest-item">
+            <p class="name">Betty Tang &amp; Family (4)</p>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+          </div>
+          <div class="guest-item">
+            <p class="name">Brandon Steward (1)</p>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+          </div>
+          <div class="guest-item">
+            <p class="name">Dean Portland (3)</p>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+          </div>
+          <div class="guest-item">
+            <p class="name">Este Rochelle (1)</p>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+          </div>
+          <div class="guest-item">
+            <p class="name">Ivy Rochelle (1)</p>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+          </div>
+          <div class="guest-item">
+            <p class="name">Francine Estella (2)</p>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+          </div>
+          <div class="guest-item">
+            <p class="name">Geller Family (5)</p>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+          </div>
+          <div class="guest-item">
+            <p class="name">Jordan Green (3)</p>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+            <div class="guest-item__tick">
+              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 191.667 191.667">
+                <path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mobile-screen">
+      <div class="mobile-background">
+        <div class="topbar">
+          <div class="menu-icon"></div>
+          <h3 class="title">Wedding Vision</h3>
+          <div class="more-icon"></div>
+        </div>
+        <button class="btn btn-plus">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.66667 426.66667">
+            <path d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"></path>
+          </svg>
+        </button>
+        <nav>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 438.891 438.891" style="enable-background: new 0 0 438.891 438.891" xml:space="preserve">
+              <path d="M347.968,57.503h-39.706V39.74c0-5.747-6.269-8.359-12.016-8.359h-30.824c-7.314-20.898-25.6-31.347-46.498-31.347     c-20.668-0.777-39.467,11.896-46.498,31.347h-30.302c-5.747,0-11.494,2.612-11.494,8.359v17.763H90.923     c-23.53,0.251-42.78,18.813-43.886,42.318v299.363c0,22.988,20.898,39.706,43.886,39.706h257.045     c22.988,0,43.886-16.718,43.886-39.706V99.822C390.748,76.316,371.498,57.754,347.968,57.503z M151.527,52.279h28.735     c5.016-0.612,9.045-4.428,9.927-9.404c3.094-13.474,14.915-23.146,28.735-23.51c13.692,0.415,25.335,10.117,28.212,23.51     c0.937,5.148,5.232,9.013,10.449,9.404h29.78v41.796H151.527V52.279z M370.956,399.185c0,11.494-11.494,18.808-22.988,18.808     H90.923c-11.494,0-22.988-7.314-22.988-18.808V99.822c1.066-11.964,10.978-21.201,22.988-21.42h39.706v26.645     c0.552,5.854,5.622,10.233,11.494,9.927h154.122c5.98,0.327,11.209-3.992,12.016-9.927V78.401h39.706     c12.009,0.22,21.922,9.456,22.988,21.42V399.185z"></path>
+              <path d="M179.217,233.569c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,233.962,179.427,233.761,179.217,233.569z"></path>
+              <path d="M329.16,256.034H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,256.034,329.16,256.034z"></path>
+              <path d="M179.217,149.977c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.364-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,150.37,179.427,150.169,179.217,149.977z"></path>
+              <path d="M329.16,172.442H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,172.442,329.16,172.442z"></path>
+              <path d="M179.217,317.16c-3.919-4.131-10.425-4.363-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,317.554,179.427,317.353,179.217,317.16z"></path>
+              <path d="M329.16,339.626H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,339.626,329.16,339.626z"></path>
+            </svg><span>Checklist</span>
+          </div>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 505.743 505.743" height="512" viewBox="0 0 505.743 505.743" width="512">
+              <path d="m425.246 260.217c-17.602-42.21-40.115-79.35-64.801-107.329 13.337-2.438 29.261-4.145 52.393-4.145v-30c-35.14 0-55.752 3.746-73.623 7.988l37.843-93.222c-66.961-44.841-182.06-44.515-248.439 0l37.843 93.222c-17.871-4.242-38.483-7.988-73.623-7.988v30c23.132 0 39.057 1.707 52.394 4.145-58.869 62.268-139.67 256.557-71.649 325.022 30.309 29.656 81.257 28.548 140.252 27.263 25.119-.699 52.887-.699 78.006 0 48.182 1.136 110.558 3.569 140.251-27.264 47.766-48.898 20.061-150.248-6.847-217.692zm-172.407-230.474c39.966 0 70.719 10.527 86.352 17.291l-35.67 87.871c-22.645 4.984-78.717 4.985-101.363 0l-35.67-87.869c15.649-6.772 46.396-17.293 86.351-17.293zm158.273 426.724c-25.366 27.103-107.285 17.498-158.273 18.147-51.021-.651-132.866 8.955-158.273-18.148-11.213-10.971-16.663-28.774-16.663-54.427-1.016-72.963 47.253-191.171 101.212-241.307 35.297 10.488 112.202 10.475 147.442.001 54.006 50.179 102.254 168.427 101.216 241.307.001 25.652-5.449 43.456-16.661 54.427z"></path>
+              <path d="m245.754 267.835c19.796-6.332 35.086 5.992 47.485 12.043l14.233-26.408c-13.63-7.054-21.329-13.046-40.527-16.521v-19.206h-30v21.384c-31.431 9.654-45.626 54.788-18.7 76.216 9.268 7.269 22.062 13.42 44.159 21.232 25.404 9.194 11.412 42.439-10.559 41.6-13.908.081-18.235-.593-28.898-7.568l-12.552-8.211-16.422 25.104c14.339 9.525 27.372 18.834 42.973 20.052v21.191h30v-22.645c46.777-13.264 54.403-80.945 5.456-97.808-13.088-4.627-27.558-10.212-35.643-16.552-3.269-2.563-2.778-7.763-2.55-9.295.739-4.962 4.206-11.764 11.545-14.608z"></path>
+            </svg><span>Budget</span>
+          </div>
+          <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 477.867 477.867" style="enable-background: new 0 0 477.867 477.867" xml:space="preserve">
+              <path d="M238.933,0C106.974,0,0,106.974,0,238.933s106.974,238.933,238.933,238.933s238.933-106.974,238.933-238.933    C477.726,107.033,370.834,0.141,238.933,0z M238.933,443.733c-113.108,0-204.8-91.692-204.8-204.8s91.692-204.8,204.8-204.8    s204.8,91.692,204.8,204.8C443.611,351.991,351.991,443.611,238.933,443.733z"></path>
+              <circle cx="153.6" cy="204.8" r="34.133"></circle>
+              <circle cx="324.267" cy="204.8" r="34.133"></circle>
+              <path d="M304.287,296.61c-5.637-7.554-16.331-9.108-23.885-3.47c-0.327,0.244-0.644,0.499-0.953,0.766h0    c-24.135,17.628-56.898,17.628-81.033,0c-7.131-6.164-17.909-5.379-24.072,1.752c-6.164,7.131-5.379,17.909,1.752,24.072    c0.308,0.267,0.626,0.522,0.953,0.766c36.531,27.922,87.236,27.922,123.767,0C308.371,314.858,309.925,304.164,304.287,296.61z"></path>
+            </svg><span>Guests</span>
+          </div>
+          <div class="icon active">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 511.999 511.999" style="enable-background: new 0 0 511.999 511.999" xml:space="preserve">
+              <path d="M506.827,190.017c-17.9-55.093-71.314-85.254-126.305-67.412c-7.266,2.358-14.634,5.625-21.914,9.683    c1.597-8.174,2.432-19.642,2.432-27.288c0-57.891-47.109-105-105-105s-99.085,47.109-99.085,105    c0,7.646,0.835,19.114,2.432,27.288c-7.28-4.058-14.634-7.324-21.899-9.683c-55.108-17.842-114.42,12.334-132.32,67.426    c-17.911,55.189,12.215,114.366,67.412,132.29c7.281,2.358,15.162,4.043,23.423,5.054c-6.094,5.669-11.484,11.66-15.967,17.842    c-34.11,46.925-23.751,112.548,23.218,146.66c47.234,34.388,106.86,23.438,140.745-23.218c4.497-6.182,8.54-13.154,12.041-20.713    c3.501,7.559,7.544,14.531,12.041,20.713c34.105,46.959,93.716,57.346,140.66,23.218c46.94-34.091,57.35-99.705,23.218-146.66    c-4.482-6.182-9.873-12.173-15.967-17.842c8.262-1.011,16.143-2.695,23.408-5.054C494.487,304.443,524.778,245.36,506.827,190.017    z M389.062,246.003l-58.865,19.125c2.649,23.56-4.815,43.214-19.001,58.727l36.323,49.999    c11.806,16.238-12.82,33.421-24.258,17.637l-36.262-49.916c-9.467,4.323-19.893,6.879-30.959,6.879s-21.493-2.556-30.959-6.879    l-36.262,49.916c-11.568,15.964-36.053-1.414-24.258-17.637l36.323-49.999c-12.202-13.345-19.843-30.938-19.843-50.402    c0-2.851,0.531-5.557,0.842-8.326l-58.865-19.125c-18.953-6.165-9.457-34.646,9.258-28.535l58.852,19.122    c10.541-18.481,28.231-32.239,49.713-36.617v-61.518c0-19.773,30.2-19.854,30.2,0v61.518    c21.482,4.378,39.371,18.137,49.913,36.617l58.852-19.122C398.446,211.335,408.032,239.832,389.062,246.003z"></path>
+              <path>d="M256.04,228.454c-24.814,0-45,20.186-45,45s20.186,45,45,45c24.814,0,45-20.186,45-45 C301.04,248.64,280.854,228.454,256.04,228.454z")</path>
+            </svg><span>Vision</span>
+          </div>
+        </nav>
+        <div class="import-images">
+          <div class="import-images__image"><img src="https://assets.codepen.io/567707/evermore-cake.jpg"/><img src="https://assets.codepen.io/567707/evermore-flowers-2.jpg"/></div>
+          <p>Connect your Pinterest account to import images from your selected Pinterest board<small>Your Pinterest board must be public. We will never post anything to your Pinterest account.</small></p>
+          <button class="btn btn-primary">Connect now</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="more-info">
+  <div class="image"><img src="https://assets.codepen.io/567707/palette-evermore.jpg" alt="Taylor Swift album"/></div>
+  <p>Part of the <a href="https://codepen.io/collection/XPxJmz">UI Designs inspired by Taylor Swift Album Covers</a>
+    collection. This is evermore (2020).
+  </p>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/ui-design-wedding-planning-app/dist/script.js b/ui-design-wedding-planning-app/dist/script.js
new file mode 100644
index 0000000..df3b37a
--- /dev/null
+++ b/ui-design-wedding-planning-app/dist/script.js
@@ -0,0 +1 @@
+// 🌻
\ No newline at end of file
diff --git a/ui-design-wedding-planning-app/dist/style.css b/ui-design-wedding-planning-app/dist/style.css
new file mode 100644
index 0000000..799ec1d
--- /dev/null
+++ b/ui-design-wedding-planning-app/dist/style.css
@@ -0,0 +1,566 @@
+:root {
+  --baby-powder: #fdfff7;
+  --gold-rush: #f9c97c;
+  --orange: #f59300;
+  --orange-light: #ffa51f;
+  --brown: #8b4218;
+  --champagne-problems: #fdf6ea;
+  --onyx: #363946;
+  --xanadu: #757761;
+  --gray: #a3a7b8;
+  --light-gray: #cecccc;
+  --dark-gray: #646773;
+  --font-title: "Big Shoulders Inline Display", cursive;
+  --font-cursive: "Newsreader", sans-serif;
+  --font-text: "Manrope", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-text);
+  font-size: 1.3rem;
+  color: var(--onyx);
+  font-weight: 300;
+  line-height: 1.25;
+  background: var(--champagne-problems);
+}
+
+.mobile-screen {
+  width: 450px;
+  height: 800px;
+  margin: 3rem;
+  border-radius: 30px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 2px 20px rgba(0, 0, 0, 0.05);
+}
+
+.mobile-background {
+  width: 100%;
+  height: 800px;
+  overflow: hidden;
+  border-radius: 30px;
+  padding: 2rem 2.5rem;
+  background: var(--baby-powder);
+  position: relative;
+}
+.mobile-background.flowers {
+  background-image: url("https://assets.codepen.io/567707/evermore-splash.jpg");
+  background-size: cover;
+}
+.mobile-background.plain {
+  background-image: url("https://assets.codepen.io/567707/evermore-background.jpg");
+  background-size: cover;
+  background-position: center bottom;
+}
+
+strong {
+  font-weight: 600;
+}
+
+a {
+  color: var(--brown);
+}
+a:hover {
+  color: var(--orange);
+}
+
+h1 {
+  font-family: var(--font-title);
+  font-size: 7rem;
+  text-align: center;
+  margin-top: 31%;
+  color: var(--brown);
+}
+h1 small {
+  display: block;
+  font-size: 18%;
+  font-family: var(--font-text);
+  color: var(--gray);
+  margin-top: -10px;
+}
+
+h2 {
+  font-family: var(--font-text);
+  font-weight: 600;
+  font-size: 2.4rem;
+}
+h2 small {
+  display: block;
+  font-size: 50%;
+  font-weight: 300;
+  font-family: var(--font-text);
+  margin-top: 0.75rem;
+}
+
+h4 {
+  font-size: 105%;
+  font-weight: 600;
+  padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--onyx);
+  margin-top: 1.5rem;
+  position: relative;
+}
+h4 svg {
+  width: 24px;
+  position: absolute;
+  right: 0;
+  fill: var(--onyx);
+}
+
+.btn {
+  font-family: var(--font-text);
+  width: 100%;
+  margin: 15px 0;
+  border-radius: 80px;
+  border: none !important;
+  padding: 1rem;
+  font-size: 1.6rem;
+  transition: all 0.2s ease-in;
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--onyx);
+}
+.btn.btn-primary {
+  background: linear-gradient(45deg, var(--orange-light), var(--gold-rush));
+}
+.btn.btn-plus {
+  width: 3.7rem;
+  height: 3.7rem;
+  position: absolute;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  right: 1rem;
+  bottom: 6.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem;
+  background: var(--xanadu);
+  z-index: 9;
+}
+.btn.btn-plus svg {
+  width: 100%;
+  fill: var(--baby-powder);
+}
+
+label {
+  font-size: 90%;
+  font-weight: 600;
+}
+
+input {
+  width: 100%;
+  background: transparent;
+  border-radius: 0;
+  padding: 0.8rem 0;
+  font-size: 110%;
+  font-family: var(--font-text);
+  box-shadow: none;
+  border: none;
+  border-bottom: 1px solid var(--onyx);
+}
+input:focus {
+  outline: none;
+  box-shadow: 0 2px var(--onyx);
+}
+
+.input-wrapper {
+  margin: 1.8rem 0;
+}
+
+.back {
+  width: 40px;
+  fill: var(--onyx);
+  margin-top: 50px;
+}
+
+.button-wrapper {
+  margin-top: 1.2rem;
+  text-align: center;
+}
+.button-wrapper p {
+  margin-top: 0.5rem;
+}
+
+nav {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: var(--baby-powder);
+  padding: 1rem 1.5rem 0.8rem;
+  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+nav .icon {
+  flex: 1;
+  text-align: center;
+  color: var(--dark-gray);
+}
+nav .icon.active {
+  color: var(--orange);
+}
+nav .icon.active svg {
+  fill: var(--orange);
+}
+nav svg {
+  width: 2rem;
+  height: 2rem;
+  object-fit: contain;
+  fill: var(--dark-gray);
+}
+nav span {
+  display: block;
+  font-size: 55%;
+  text-transform: uppercase;
+  font-weight: 600;
+  margin-top: 0.2rem;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+  width: calc(100% + 5rem);
+  margin-left: -2.5rem;
+  padding: 3rem 1.5rem 1.5rem;
+  margin-top: -2.5rem;
+}
+.topbar .menu-icon {
+  width: 25px;
+  height: 2px;
+  background: var(--onyx);
+  box-shadow: 0 -8px var(--onyx), 0 8px var(--onyx);
+}
+.topbar h3 {
+  margin-left: 1.1rem;
+  font-weight: 600;
+  font-size: 130%;
+}
+.topbar .more-icon {
+  width: 6px;
+  height: 6px;
+  border-radius: 100%;
+  background: var(--onyx);
+  box-shadow: 0 -10px var(--onyx), 0 10px var(--onyx);
+  margin-left: auto;
+}
+
+.margin-adjustment {
+  margin-left: -2.5rem;
+  padding: 0.5rem 1.5rem;
+  width: calc(100% + 5rem);
+}
+
+.onboarding-text h2 {
+  text-align: center;
+  margin-top: 10%;
+  padding: 2rem;
+}
+
+.onboarding-image {
+  width: 60%;
+  margin: 1rem auto 0;
+  background: var(--baby-powder);
+  padding: 1rem 1rem 0.4rem;
+  border-radius: 15px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+.onboarding-image img {
+  width: 100%;
+  border-radius: 8px;
+  height: 220px;
+  object-fit: cover;
+  margin-bottom: 0.2rem;
+}
+.onboarding-image .rounded-ph {
+  border-radius: 100px;
+  height: 14px;
+  background: var(--light-gray);
+  margin: 0.8rem 0;
+}
+.onboarding-image .rounded-ph--long {
+  width: 180px;
+}
+.onboarding-image .rounded-ph--short {
+  width: 110px;
+}
+
+.onboarding-steps {
+  width: 12px;
+  height: 12px;
+  background: var(--light-gray);
+  border-radius: 50%;
+  margin: 2rem auto 3rem;
+  box-shadow: 25px 0 var(--orange), -25px 0 var(--light-gray);
+}
+
+.signup-text h2 {
+  width: 75%;
+  margin-top: 10%;
+  margin-bottom: 2rem;
+}
+
+.check-item {
+  display: flex;
+  margin: 0.6rem 0;
+  align-items: center;
+}
+.check-item svg {
+  width: 20px;
+  height: 20px;
+  fill: var(--onyx);
+  opacity: 0.5;
+}
+.check-item p {
+  flex: 1;
+  margin-left: 0.75rem;
+}
+
+.import-images {
+  margin-top: 4rem;
+  text-align: center;
+}
+.import-images p {
+  margin-bottom: 1rem;
+}
+.import-images p small {
+  display: block;
+  color: var(--gray);
+  font-size: 80%;
+  margin-top: 0.8rem;
+}
+.import-images__image {
+  margin: 5rem 0 2rem;
+  line-height: 0;
+}
+.import-images__image img {
+  border-radius: 0.7rem;
+  width: 120px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.1);
+  transform: rotate(-8deg);
+  border: 2px solid var(--baby-powder);
+}
+.import-images__image img:nth-child(2) {
+  transform: rotate(8deg) translate(-0.5rem, -1.5rem);
+}
+
+.color-palette {
+  display: flex;
+  justify-content: space-between;
+}
+.color-palette__item {
+  height: 80px;
+  flex: 0 0 24.2%;
+}
+.color-palette__item:nth-child(2) {
+  background: #e6d3c2;
+}
+.color-palette__item:nth-child(3) {
+  background: #b69987;
+}
+.color-palette__item:nth-child(4) {
+  background: #994d0d;
+}
+.color-palette__item:nth-child(1) {
+  background: #e67853;
+}
+
+.inspiration img {
+  width: 100%;
+}
+
+.guest-list-header {
+  display: flex;
+  font-weight: 600;
+  padding: 0 0 0.5rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--onyx);
+  margin-top: 1.5rem;
+  text-transform: uppercase;
+  font-size: 70%;
+}
+.guest-list-header span {
+  width: 65px;
+  text-align: center;
+}
+.guest-list-header span:nth-child(2) {
+  margin-left: auto;
+}
+
+.guest-item {
+  display: flex;
+  margin: 1rem 0;
+  border-bottom: 1px solid var(--light-gray);
+  padding: 0.3rem 0 1rem;
+}
+.guest-item__tick {
+  width: 65px;
+  text-align: center;
+}
+.guest-item__tick:nth-child(2) {
+  margin-left: auto;
+}
+.guest-item__tick svg {
+  width: 24px;
+  height: 24px;
+  fill: var(--light-gray);
+  opacity: 0.8;
+}
+
+.circle {
+  width: 8px;
+  height: 8px;
+  margin-right: 8px;
+  background: black;
+  border-radius: 50%;
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 6px;
+}
+
+.budget {
+  background: var(--champagne-problems);
+  border-radius: 10px;
+  margin-top: 1.5rem;
+  display: flex;
+  padding: 1.25rem;
+  position: relative;
+}
+.budget p:first-child {
+  margin-bottom: 0.5rem;
+}
+.budget p:not(:first-child) {
+  font-size: 85%;
+  margin-top: 0.1rem;
+}
+.budget svg {
+  width: 6rem;
+  position: absolute;
+  top: 1.5rem;
+  right: 1rem;
+}
+.budget-unpaid .circle {
+  background: var(--orange);
+}
+.budget-paid .circle {
+  background: var(--brown);
+}
+.budget-remaining .circle {
+  background: var(--xanadu);
+}
+
+.budget-item {
+  display: flex;
+  margin: 1rem 0;
+  border-bottom: 1px solid var(--light-gray);
+  padding: 0.3rem 0 1rem;
+}
+.budget-item__number {
+  margin-left: auto;
+}
+.budget-item__tick {
+  width: 65px;
+  text-align: center;
+}
+.budget-item__tick svg {
+  width: 24px;
+  height: 24px;
+  fill: var(--light-gray);
+  opacity: 0.8;
+}
+
+body {
+  height: 100vh;
+  width: 100%;
+  position: relative;
+}
+@media (min-width: 800px) {
+  body {
+    overflow: hidden;
+  }
+}
+
+.grid-parent {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 0 2rem;
+  margin: auto;
+}
+@media (max-width: 600px) {
+  .grid-parent {
+    transform: scale(0.75);
+    margin-top: -55rem;
+  }
+}
+@media (min-width: 800px) {
+  .grid-parent {
+    flex-wrap: nowrap;
+    position: absolute;
+    top: 58%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+}
+@media (min-width: 1800px) {
+  .grid-parent {
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@media (min-width: 800px) {
+  .grid-child {
+    transform: rotate(20deg) translateY(2rem);
+  }
+  .grid-child:nth-child(2) {
+    transform: rotate(20deg) translateY(-4rem);
+  }
+  .grid-child:nth-child(3) {
+    transform: rotate(20deg) translateY(-2rem);
+  }
+  .grid-child:nth-child(4) {
+    transform: rotate(20deg) translateY(13rem);
+  }
+}
+
+.more-info {
+  width: 100%;
+  margin: -50rem 0 0;
+  background: var(--onyx);
+  display: flex;
+  align-items: center;
+  color: var(--baby-powder);
+  font-size: 85%;
+}
+.more-info a {
+  color: var(--baby-powder);
+}
+@media (min-width: 600px) {
+  .more-info {
+    margin: 0;
+  }
+}
+@media (min-width: 800px) {
+  .more-info {
+    position: fixed;
+    top: 0;
+    right: 0;
+    max-width: 500px;
+  }
+}
+.more-info .image {
+  flex: 0 0 30%;
+  max-width: 10rem;
+  line-height: 0;
+}
+.more-info .image img {
+  width: 100%;
+}
+.more-info p {
+  flex: 1;
+  padding: 1.1rem 1.5rem;
+}
\ No newline at end of file
diff --git a/ui-design-wedding-planning-app/license.txt b/ui-design-wedding-planning-app/license.txt
new file mode 100644
index 0000000..70e400a
--- /dev/null
+++ b/ui-design-wedding-planning-app/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Olivia Ng (https://codepen.io/oliviale/pen/rNWyzmx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/ui-design-wedding-planning-app/src/index.pug b/ui-design-wedding-planning-app/src/index.pug
new file mode 100644
index 0000000..c4d0266
--- /dev/null
+++ b/ui-design-wedding-planning-app/src/index.pug
@@ -0,0 +1,472 @@
+mixin back
+	svg.back(
+		xmlns="http://www.w3.org/2000/svg",
+		x="0px",
+		y="0px",
+		viewBox="0 0 512 512",
+		style="enable-background: new 0 0 512 512",
+		xml:space="preserve"
+	)
+		path(
+			d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068    l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019    l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492    c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z"
+		)
+
+mixin checklist(type)
+	if type=="solid"
+		svg(
+			xmlns="http://www.w3.org/2000/svg",
+			x="0px",
+			y="0px",
+			viewBox="0 0 407.007 407.007",
+			style="enable-background: new 0 0 407.007 407.007",
+			xml:space="preserve"
+		)
+			path(
+				d="M271.422,30.844h-29.78c-3.716-0.115-6.909-2.67-7.837-6.269c-2.822-14.661-15.903-25.082-30.824-24.555     c-15.011-0.263-28.028,10.327-30.824,25.078c-0.966,3.5-4.209,5.878-7.837,5.747h-28.735v52.245h135.837V30.844z"
+			)
+			path(
+				d="M355.014,382.974V83.611c0.032-11.83-9.533-21.446-21.363-21.478c-0.542-0.001-1.084,0.018-1.625,0.057h-44.931v26.645     c0,4.18-2.612,9.927-6.792,9.927H126.181c-4.18,0-6.269-5.747-6.269-9.927V62.191H74.981     c-11.798-0.866-22.065,7.997-22.93,19.796c-0.04,0.541-0.059,1.083-0.057,1.625v299.363     c-0.292,12.981,9.995,23.741,22.976,24.032c0.004,0,0.008,0,0.012,0h257.045c12.981-0.285,23.273-11.04,22.988-24.021     C355.014,382.982,355.014,382.978,355.014,382.974z M161.185,314.011l-40.751,38.139c-1.303,1.559-3.196,2.505-5.224,2.612     c-2.183-0.086-4.246-1.024-5.747-2.612l-21.42-21.943c-2.847-3.188-2.614-8.069,0.522-10.971c3.047-2.987,7.924-2.987,10.971,0     l15.673,16.718l35.527-33.437c3.562-2.458,8.443-1.564,10.901,1.998C163.643,307.421,163.457,311.309,161.185,314.011z      M161.185,230.419L161.185,230.419l-40.751,38.139c-1.303,1.559-3.196,2.505-5.224,2.612c-2.183-0.086-4.246-1.024-5.747-2.612     l-21.42-21.943c-2.847-3.188-2.614-8.069,0.522-10.971c3.047-2.987,7.924-2.987,10.971,0l15.673,16.718l35.527-33.437     c3.562-2.458,8.443-1.564,10.901,1.998C163.643,223.829,163.457,227.717,161.185,230.419z M161.185,146.827l-40.751,38.139     c-1.303,1.559-3.196,2.505-5.224,2.612c-2.183-0.086-4.246-1.024-5.747-2.612l-21.42-21.943     c-2.847-3.188-2.614-8.069,0.522-10.971c3.047-2.987,7.924-2.987,10.971,0l15.673,16.718l35.527-33.437     c3.562-2.458,8.443-1.564,10.901,1.998C163.643,140.237,163.457,144.125,161.185,146.827z M313.218,344.313H193.054     c-4.328,0-7.837-3.509-7.837-7.837s3.509-7.837,7.837-7.837h120.163c4.328,0,7.837,3.509,7.837,7.837     S317.546,344.313,313.218,344.313z M313.218,260.721H193.054c-4.328,0-7.837-3.509-7.837-7.837c0-4.328,3.509-7.837,7.837-7.837     h120.163c4.328,0,7.837,3.509,7.837,7.837C321.054,257.212,317.546,260.721,313.218,260.721z M313.218,177.129H193.054     c-4.328,0-7.837-3.509-7.837-7.837c0-4.328,3.509-7.837,7.837-7.837h120.163c4.328,0,7.837,3.509,7.837,7.837     C321.054,173.621,317.546,177.129,313.218,177.129z"
+			)
+	else
+		svg(
+			xmlns="http://www.w3.org/2000/svg",
+			x="0px",
+			y="0px",
+			viewBox="0 0 438.891 438.891",
+			style="enable-background: new 0 0 438.891 438.891",
+			xml:space="preserve"
+		)
+			path(
+				d="M347.968,57.503h-39.706V39.74c0-5.747-6.269-8.359-12.016-8.359h-30.824c-7.314-20.898-25.6-31.347-46.498-31.347     c-20.668-0.777-39.467,11.896-46.498,31.347h-30.302c-5.747,0-11.494,2.612-11.494,8.359v17.763H90.923     c-23.53,0.251-42.78,18.813-43.886,42.318v299.363c0,22.988,20.898,39.706,43.886,39.706h257.045     c22.988,0,43.886-16.718,43.886-39.706V99.822C390.748,76.316,371.498,57.754,347.968,57.503z M151.527,52.279h28.735     c5.016-0.612,9.045-4.428,9.927-9.404c3.094-13.474,14.915-23.146,28.735-23.51c13.692,0.415,25.335,10.117,28.212,23.51     c0.937,5.148,5.232,9.013,10.449,9.404h29.78v41.796H151.527V52.279z M370.956,399.185c0,11.494-11.494,18.808-22.988,18.808     H90.923c-11.494,0-22.988-7.314-22.988-18.808V99.822c1.066-11.964,10.978-21.201,22.988-21.42h39.706v26.645     c0.552,5.854,5.622,10.233,11.494,9.927h154.122c5.98,0.327,11.209-3.992,12.016-9.927V78.401h39.706     c12.009,0.22,21.922,9.456,22.988,21.42V399.185z"
+			)
+			path(
+				d="M179.217,233.569c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,233.962,179.427,233.761,179.217,233.569z"
+			)
+			path(
+				d="M329.16,256.034H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,256.034,329.16,256.034z"
+			)
+			path(
+				d="M179.217,149.977c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.364-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,150.37,179.427,150.169,179.217,149.977z"
+			)
+			path(
+				d="M329.16,172.442H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,172.442,329.16,172.442z"
+			)
+			path(
+				d="M179.217,317.16c-3.919-4.131-10.425-4.363-14.629-0.522l-33.437,31.869l-14.106-14.629     c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135     c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025     C179.628,317.554,179.427,317.353,179.217,317.16z"
+			)
+			path(
+				d="M329.16,339.626H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16     c5.771,0,10.449-4.678,10.449-10.449S334.931,339.626,329.16,339.626z"
+			)
+
+mixin budget(type)
+	if type=="solid"
+		svg(
+			xmlns="http://www.w3.org/2000/svg",
+			enable-background="new 0 0 505.935 505.935",
+			height="512",
+			viewBox="0 0 505.935 505.935",
+			width="512"
+		)
+			path(
+				d="m360.574 153.145c13.337-2.438 29.261-4.145 52.393-4.145v-30c-35.14 0-55.752 3.746-73.623 7.988z"
+			)
+			path(
+				d="m166.59 126.988c-17.871-4.242-38.482-7.988-73.623-7.988v30c23.132 0 39.057 1.707 52.394 4.145z"
+			)
+			path(
+				d="m252.967 139c38.153 0 56.713-4.64 76.362-9.552 3.293-.823 6.605-1.651 10.016-2.46l37.842-93.222-10.979-6.614c-1.841-1.11-45.847-27.152-113.241-27.152s-111.4 26.042-113.24 27.151l-10.979 6.614 37.843 93.222c3.411.81 6.723 1.637 10.015 2.46 19.648 4.913 38.208 9.553 76.361 9.553z"
+			)
+			path(
+				d="m425.375 260.474c-17.602-42.21-40.115-79.35-64.801-107.329-8.66 1.583-16.232 3.473-23.968 5.408-20.546 5.135-41.792 10.447-83.639 10.447s-63.092-5.312-83.638-10.448c-7.736-1.934-15.308-3.825-23.968-5.408-24.85 28.167-47.507 65.638-65.145 108.158-20.454 49.306-32.184 100.696-32.184 140.994 0 34.144 8.4 58.961 25.682 75.87 30.308 29.656 81.258 28.548 140.251 27.264 12.626-.274 25.682-.559 39.003-.559s26.377.284 39.003.559c11.752.256 23.184.505 34.198.504 44.274 0 81.783-4.02 106.053-27.768 17.281-16.909 25.682-41.727 25.682-75.87-.001-40.558-11.857-92.25-32.529-141.822zm-188.487 31.52c8.084 6.341 22.555 11.926 35.644 16.552 48.986 17.064 41.392 84.36-5.457 97.808v22.646h-30v-21.191c-15.601-1.219-28.635-10.527-42.973-20.052l16.423-25.105 12.552 8.211c10.662 6.975 14.989 7.65 28.898 7.568 21.971.839 35.963-32.406 10.559-41.6-22.098-7.812-34.892-13.963-44.159-21.232-26.926-21.429-12.731-66.562 18.7-76.216v-21.383h30v19.206c19.198 3.475 26.897 9.467 40.527 16.521l-14.233 26.408s-13.204-7.117-13.204-7.116c-10.468-6.266-40.891-14.648-45.826 9.68-.229 1.532-.719 6.732 2.549 9.295z"
+			)
+	else
+		svg(
+			xmlns="http://www.w3.org/2000/svg",
+			enable-background="new 0 0 505.743 505.743",
+			height="512",
+			viewBox="0 0 505.743 505.743",
+			width="512"
+		)
+			path(
+				d="m425.246 260.217c-17.602-42.21-40.115-79.35-64.801-107.329 13.337-2.438 29.261-4.145 52.393-4.145v-30c-35.14 0-55.752 3.746-73.623 7.988l37.843-93.222c-66.961-44.841-182.06-44.515-248.439 0l37.843 93.222c-17.871-4.242-38.483-7.988-73.623-7.988v30c23.132 0 39.057 1.707 52.394 4.145-58.869 62.268-139.67 256.557-71.649 325.022 30.309 29.656 81.257 28.548 140.252 27.263 25.119-.699 52.887-.699 78.006 0 48.182 1.136 110.558 3.569 140.251-27.264 47.766-48.898 20.061-150.248-6.847-217.692zm-172.407-230.474c39.966 0 70.719 10.527 86.352 17.291l-35.67 87.871c-22.645 4.984-78.717 4.985-101.363 0l-35.67-87.869c15.649-6.772 46.396-17.293 86.351-17.293zm158.273 426.724c-25.366 27.103-107.285 17.498-158.273 18.147-51.021-.651-132.866 8.955-158.273-18.148-11.213-10.971-16.663-28.774-16.663-54.427-1.016-72.963 47.253-191.171 101.212-241.307 35.297 10.488 112.202 10.475 147.442.001 54.006 50.179 102.254 168.427 101.216 241.307.001 25.652-5.449 43.456-16.661 54.427z"
+			)
+			path(
+				d="m245.754 267.835c19.796-6.332 35.086 5.992 47.485 12.043l14.233-26.408c-13.63-7.054-21.329-13.046-40.527-16.521v-19.206h-30v21.384c-31.431 9.654-45.626 54.788-18.7 76.216 9.268 7.269 22.062 13.42 44.159 21.232 25.404 9.194 11.412 42.439-10.559 41.6-13.908.081-18.235-.593-28.898-7.568l-12.552-8.211-16.422 25.104c14.339 9.525 27.372 18.834 42.973 20.052v21.191h30v-22.645c46.777-13.264 54.403-80.945 5.456-97.808-13.088-4.627-27.558-10.212-35.643-16.552-3.269-2.563-2.778-7.763-2.55-9.295.739-4.962 4.206-11.764 11.545-14.608z"
+			)
+
+mixin guest(type)
+	if type=="solid"
+		svg(
+			xmlns="http://www.w3.org/2000/svg",
+			x="0px",
+			y="0px",
+			viewBox="0 0 477.867 477.867",
+			style="enable-background: new 0 0 477.867 477.867",
+			xml:space="preserve"
+		)
+			path(
+				d="M238.933,0C106.974,0,0,106.974,0,238.933s106.974,238.933,238.933,238.933s238.933-106.974,238.933-238.933    C477.716,107.036,370.83,0.15,238.933,0z M119.467,204.8c0-18.851,15.282-34.133,34.133-34.133s34.133,15.282,34.133,34.133    s-15.282,34.133-34.133,34.133S119.467,223.651,119.467,204.8z M300.817,320.512L300.817,320.512    c-36.539,27.899-87.228,27.899-123.768,0c-7.215-6.065-8.147-16.831-2.081-24.046c5.874-6.987,16.205-8.115,23.449-2.561    c24.135,17.628,56.898,17.628,81.033,0c7.48-5.736,18.193-4.322,23.928,3.158C308.932,304.306,307.804,314.638,300.817,320.512z     M324.267,238.933c-18.851,0-34.133-15.282-34.133-34.133s15.282-34.133,34.133-34.133c18.851,0,34.133,15.282,34.133,34.133    S343.118,238.933,324.267,238.933z"
+			)
+	else
+		svg(
+			xmlns="http://www.w3.org/2000/svg",
+			x="0px",
+			y="0px",
+			viewBox="0 0 477.867 477.867",
+			style="enable-background: new 0 0 477.867 477.867",
+			xml:space="preserve"
+		)
+			path(
+				d="M238.933,0C106.974,0,0,106.974,0,238.933s106.974,238.933,238.933,238.933s238.933-106.974,238.933-238.933    C477.726,107.033,370.834,0.141,238.933,0z M238.933,443.733c-113.108,0-204.8-91.692-204.8-204.8s91.692-204.8,204.8-204.8    s204.8,91.692,204.8,204.8C443.611,351.991,351.991,443.611,238.933,443.733z"
+			)
+			circle(cx="153.6", cy="204.8", r="34.133")
+			circle(cx="324.267", cy="204.8", r="34.133")
+			path(
+				d="M304.287,296.61c-5.637-7.554-16.331-9.108-23.885-3.47c-0.327,0.244-0.644,0.499-0.953,0.766h0    c-24.135,17.628-56.898,17.628-81.033,0c-7.131-6.164-17.909-5.379-24.072,1.752c-6.164,7.131-5.379,17.909,1.752,24.072    c0.308,0.267,0.626,0.522,0.953,0.766c36.531,27.922,87.236,27.922,123.767,0C308.371,314.858,309.925,304.164,304.287,296.61z"
+			)
+
+mixin flower(type)
+	if type=="solid"
+		svg(
+			xmlns="http://www.w3.org/2000/svg",
+			x="0px",
+			y="0px",
+			viewBox="0 0 511.999 511.999",
+			style="enable-background: new 0 0 511.999 511.999",
+			xml:space="preserve"
+		)
+			path(
+				d="M506.827,190.017c-17.9-55.093-71.314-85.254-126.305-67.412c-7.266,2.358-14.634,5.625-21.914,9.683    c1.597-8.174,2.432-19.642,2.432-27.288c0-57.891-47.109-105-105-105s-99.085,47.109-99.085,105    c0,7.646,0.835,19.114,2.432,27.288c-7.28-4.058-14.634-7.324-21.899-9.683c-55.108-17.842-114.42,12.334-132.32,67.426    c-17.911,55.189,12.215,114.366,67.412,132.29c7.281,2.358,15.162,4.043,23.423,5.054c-6.094,5.669-11.484,11.66-15.967,17.842    c-34.11,46.925-23.751,112.548,23.218,146.66c47.234,34.388,106.86,23.438,140.745-23.218c4.497-6.182,8.54-13.154,12.041-20.713    c3.501,7.559,7.544,14.531,12.041,20.713c34.105,46.959,93.716,57.346,140.66,23.218c46.94-34.091,57.35-99.705,23.218-146.66    c-4.482-6.182-9.873-12.173-15.967-17.842c8.262-1.011,16.143-2.695,23.408-5.054C494.487,304.443,524.778,245.36,506.827,190.017    z M389.062,246.003l-58.865,19.125c2.649,23.56-4.815,43.214-19.001,58.727l36.323,49.999    c11.806,16.238-12.82,33.421-24.258,17.637l-36.262-49.916c-9.467,4.323-19.893,6.879-30.959,6.879s-21.493-2.556-30.959-6.879    l-36.262,49.916c-11.568,15.964-36.053-1.414-24.258-17.637l36.323-49.999c-12.202-13.345-19.843-30.938-19.843-50.402    c0-2.851,0.531-5.557,0.842-8.326l-58.865-19.125c-18.953-6.165-9.457-34.646,9.258-28.535l58.852,19.122    c10.541-18.481,28.231-32.239,49.713-36.617v-61.518c0-19.773,30.2-19.854,30.2,0v61.518    c21.482,4.378,39.371,18.137,49.913,36.617l58.852-19.122C398.446,211.335,408.032,239.832,389.062,246.003z"
+			)
+			path d="M256.04,228.454c-24.814,0-45,20.186-45,45s20.186,45,45,45c24.814,0,45-20.186,45-45 C301.04,248.64,280.854,228.454,256.04,228.454z")
+	else
+		svg(
+			xmlns="http://www.w3.org/2000/svg",
+			x="0px",
+			y="0px",
+			viewBox="0 0 512 512",
+			style="enable-background: new 0 0 512 512",
+			xml:space="preserve"
+		)
+			path(
+				d="M506.791,186.581c-17.89-55.053-77.234-85.287-132.283-67.403c-7.272,2.363-14.634,5.631-21.91,9.68    c1.603-8.169,2.436-16.182,2.436-23.828c0-58.447-40.387-104.981-97.982-104.981c-57.679,0-100.086,46.637-100.086,104.981    c0,7.645,0.833,15.658,2.436,23.828c-7.276-4.048-14.638-7.317-21.91-9.68C82.446,101.291,23.098,131.528,5.209,186.581    c-18.142,55.838,12.726,118.021,67.403,135.788c7.272,2.363,15.148,4.045,23.414,5.047c-6.099,5.668-11.481,11.661-15.976,17.846    C46.025,392.094,56.444,457.876,103.274,491.9c46.808,34.01,107.605,23.759,141.74-23.225c4.495-6.186,8.529-13.158,12.037-20.71    c3.507,7.553,7.542,14.524,12.037,20.71c34.181,47.048,92.928,57.162,139.636,23.225c46.831-34.025,57.25-99.807,23.225-146.638    c-4.493-6.186-9.878-12.178-15.976-17.847c8.264-1.001,16.145-2.685,23.417-5.046C494.066,304.603,524.933,242.42,506.791,186.581    z M257.052,30.044c39.394,0,67.987,31.536,67.987,74.986c0,19.556-7.653,43.667-20.471,64.497    c-1.551,2.521-2.268,5.33-2.222,8.099l-15.616,27.028c-4.67-2.021-9.78-3.588-14.881-4.627V138.53    c0-8.282-6.515-14.997-14.797-14.997c-8.282,0-14.997,6.715-14.997,14.997v61.498c-5.221,1.064-10.239,2.686-15.007,4.775    l-17.435-28.556c-0.175-2.314-0.888-4.618-2.182-6.72c-12.818-20.83-20.471-44.941-20.471-64.497    C186.961,62.281,217.093,30.044,257.052,30.044z M81.88,293.843c-38.539-12.523-61.037-58.314-48.145-97.993    c12.778-39.324,55.162-60.921,94.489-48.146c16.144,5.246,33.771,17.046,48.512,32.256l25.755,42.184    c-4.094,4.347-7.675,9.179-10.647,14.404l-58.527-19.016c-7.884-2.561-16.339,1.752-18.898,9.628    c-2.561,7.878,1.752,16.338,9.628,18.898l58.505,19.01c-0.678,6.02-0.632,11.422,0.037,17.164l-37.46,13.069    C122.678,300.014,99.332,299.513,81.88,293.843z M242.053,387.296c-1.939,24.232-9.884,48.032-21.303,63.749    c-24.406,33.59-66.469,40.839-99.845,16.589c-33.45-24.304-40.891-71.29-16.588-104.742    c19.857-27.333,54.348-39.752,56.964-41.457l30.712-10.715c2.766,4.816,6.037,9.306,9.764,13.375l-36.175,49.792    c-4.869,6.701-3.383,16.08,3.317,20.948c6.697,4.867,16.077,3.385,20.948-3.317l36.165-49.779    c5.074,2.317,10.44,4.102,16.04,5.243V387.296z M257.052,318.497c-24.808,0-44.992-20.183-44.992-44.992    s20.183-44.992,44.992-44.992c24.808,0,44.992,20.183,44.992,44.992S281.86,318.497,257.052,318.497z M391.094,467.634    c-34.467,25.043-74.131,15.904-97.741-16.589c-11.419-15.717-19.564-39.517-21.505-63.748v-40.314    c5.6-1.142,11.166-2.925,16.24-5.243l36.165,49.779c4.869,6.701,14.248,8.185,20.948,3.317c6.701-4.869,8.187-14.247,3.317-20.948    l-36.174-49.791c3.695-4.036,6.943-8.483,9.694-13.254l27.954,10.071c3.446,2.555,37.543,14.246,57.689,41.978    C431.987,396.344,424.545,443.33,391.094,467.634z M368.012,295.523l-36.516-13.156c0.699-5.9,0.725-11.338,0.054-17.3    l58.505-19.01c7.877-2.56,12.188-11.02,9.628-18.898s-11.021-12.189-18.898-9.628l-58.527,19.016    c-3.024-5.315-6.678-10.224-10.862-14.629l24.769-42.868c14.556-14.767,31.791-26.206,47.61-31.346    c39.321-12.775,81.71,8.821,94.489,48.144c12.892,39.68-9.606,85.471-48.145,97.994h0.001    C412.962,299.417,390.11,299.983,368.012,295.523z"
+			)
+
+mixin topbar(title)
+	.topbar
+		.menu-icon
+		h3.title= title
+		.more-icon
+
+mixin add-button
+	button.btn.btn-plus
+		svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 426.66667 426.66667")
+			path(
+				d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
+			)
+
+mixin check-item(item)
+	.check-item
+		svg(
+			xmlns="http://www.w3.org/2000/svg",
+			x="0px",
+			y="0px",
+			viewBox="0 0 459 459"
+		)
+			path(
+				d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51 C459,22.95,436.05,0,408,0L408,0z"
+			)
+		p= item
+
+mixin guest-item(name)
+	.guest-item
+		p.name= name
+		.guest-item__tick
+			svg(
+				xmlns="http://www.w3.org/2000/svg",
+				x="0px",
+				y="0px",
+				viewBox="0 0 191.667 191.667"
+			)
+				path(
+					d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"
+				)
+		.guest-item__tick
+			svg(
+				xmlns="http://www.w3.org/2000/svg",
+				x="0px",
+				y="0px",
+				viewBox="0 0 191.667 191.667"
+			)
+				path(
+					d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z   M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685  c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971  l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969  C156.146,65.765,156.146,74.362,150.862,79.646z"
+				)
+
+mixin budget-item(name,budget)
+	.budget-item
+		p= name
+		.budget-item__number= budget
+		.budget-item__tick
+			svg(
+				xmlns="http://www.w3.org/2000/svg",
+				x="0px",
+				y="0px",
+				viewBox="0 0 45.958 45.958"
+			)
+				path(
+					d="M22.979,0C10.287,0,0,10.288,0,22.979s10.287,22.979,22.979,22.979s22.979-10.289,22.979-22.979S35.67,0,22.979,0z    M24.37,33.215v2.66c0,0.415-0.323,0.717-0.739,0.717h-1.773c-0.416,0-0.751-0.302-0.751-0.717v-2.426   c-1.632-0.074-3.278-0.422-4.524-0.896c-0.675-0.256-1.051-0.979-0.872-1.679L16,29.748c0.101-0.395,0.365-0.725,0.726-0.91   c0.361-0.188,0.785-0.207,1.164-0.062c1.187,0.459,2.589,0.793,4.086,0.793c1.906,0,3.211-0.736,3.211-2.074   c0-1.271-1.07-2.074-3.546-2.911c-3.579-1.204-6.03-2.876-6.03-6.121c0-2.943,2.083-5.251,5.644-5.954v-2.426   c0-0.415,0.355-0.787,0.771-0.787h1.773c0.416,0,0.721,0.372,0.721,0.787v2.191c1.557,0.067,2.681,0.298,3.621,0.604   c0.711,0.232,1.131,0.977,0.944,1.703l-0.254,1.008c-0.099,0.384-0.353,0.71-0.701,0.898s-0.759,0.222-1.135,0.093   c-0.854-0.293-1.968-0.559-3.38-0.559c-2.174,0-2.877,0.937-2.877,1.874c0,1.104,1.171,1.806,4.014,2.877   c3.98,1.405,5.579,3.245,5.579,6.254C30.33,30.003,28.227,32.547,24.37,33.215z"
+				)
+
+.grid-parent
+	.grid-child
+		.mobile-screen
+			.mobile-background.plain
+				+back
+				.signup-text
+					h2 Sign up
+						small 'tis the damn season to get weddings right
+				.signup-form
+					.input-wrapper
+						label Email
+						input(type="text", placeholder="dorothea@gmail.com")
+					.input-wrapper
+						label Password
+						input(type="password", placeholder="At least 8 characters")
+					.button-wrapper
+						button.btn.btn-primary Sign up
+						p Already have an account?
+							br
+							a(href="#") Log in here
+
+		.mobile-screen
+			.mobile-background
+				+topbar("Budget")
+				+add-button
+				nav
+					.icon
+						+checklist('lined')
+						span Checklist
+					.icon.active
+						+budget('solid')
+						span Budget
+					.icon
+						+guest('lined')
+						span Guests
+					.icon
+						+flower('lined')
+						span Vision
+				.margin-adjustment
+					.budget
+						.budget-list
+							p
+								strong Total: $12,000
+							p.budget-unpaid
+								span.circle
+								| Allocated (Unpaid): $7,000
+							p.budget-paid 
+								span.circle
+								| Allocated (Paid): $3,500
+							p.budget-remaining 
+								span.circle
+								| Remaining: $1,500
+						svg(
+							enable-background="new 0 0 24 24",
+							viewBox="0 0 24 24",
+							width="512",
+							xmlns="http://www.w3.org/2000/svg"
+						)
+							path(
+								fill="#f59300",
+								d="m19.93 20.99c-2.12 1.88-4.89 3.01-7.93 3.01-6.62 0-12-5.38-12-12 0-6.37 4.98-11.59 11.25-11.97v5.02c-3.51.37-6.25 3.35-6.25 6.95 0 3.86 3.14 7 7 7 1.66 0 3.19-.58 4.39-1.55z"
+							)
+							path(
+								fill="#757761",
+								d="m23.97 12.75c-.16 2.74-1.25 5.24-2.98 7.18l-3.54-3.54c.82-1.01 1.36-2.27 1.5-3.64z"
+							)
+							path(
+								fill="#8b4218",
+								d="m23.97 11.25h-5.02c-.34-3.26-2.94-5.86-6.2-6.2v-5.02c6.02.36 10.86 5.2 11.22 11.22z"
+							)
+					h4 Allocated Items
+					.budget-items
+						+budget-item("Attire", "$ 800")
+						+budget-item("DJ", "$ 1200")
+						+budget-item("Hair/Makeup", "$ 300")
+						+budget-item("Flowers", "$ 750")
+						+budget-item("Food", "$ 3,000")
+						+budget-item("Venue", "$ 4,500")
+
+	.grid-child
+		.mobile-screen
+			.mobile-background
+				+topbar("Wedding Vision")
+				+add-button
+				nav
+					.icon
+						+checklist('lined')
+						span Checklist
+					.icon
+						+budget('lined')
+						span Budget
+					.icon
+						+guest('lined')
+						span Guests
+					.icon.active
+						+flower('solid')
+						span Vision
+				.margin-adjustment
+					h4 Color Palette
+						svg(
+							xmlns="http://www.w3.org/2000/svg",
+							x="0px",
+							y="0px",
+							viewBox="0 0 512.001 512.001"
+						)
+							path(
+								d="M496.063,62.299l-46.396-46.4c-21.199-21.199-55.689-21.198-76.888,0C352.82,35.86,47.964,340.739,27.591,361.113    c-2.17,2.17-3.624,5.054-4.142,7.875L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    L143,488.549c2.895-0.54,5.741-2.008,7.875-4.143l345.188-345.214C517.311,117.944,517.314,83.55,496.063,62.299z M33.721,478.276    l14.033-75.784l61.746,61.75L33.721,478.276z M140.269,452.585L59.41,371.721L354.62,76.488l80.859,80.865L140.269,452.585z     M474.85,117.979l-18.159,18.161l-80.859-80.865l18.159-18.161c9.501-9.502,24.96-9.503,34.463,0l46.396,46.4    C484.375,93.039,484.375,108.453,474.85,117.979z"
+							)
+					.color-palette
+						.color-palette__item
+						.color-palette__item
+						.color-palette__item
+						.color-palette__item
+					h4 Inspiration Gallery
+					.inspiration
+						img(
+							src="https://assets.codepen.io/567707/evermore-wedding_1.jpg?format=auto"
+						)
+
+		.mobile-screen
+			.mobile-background.flowers
+				h1 evermore
+					small Your love should be celebrated
+				.button-wrapper
+					button.btn.btn-primary Sign up for free
+					p Already have an account?
+						br
+						a(href="#") Log in here
+
+	.grid-child
+		.mobile-screen
+			.mobile-background
+				+topbar("Checklist")
+				+add-button
+				nav
+					.icon.active
+						+checklist('solid')
+						span Checklist
+					.icon
+						+budget('lined')
+						span Budget
+					.icon
+						+guest('lined')
+						span Guests
+					.icon
+						+flower('lined')
+						span Vision
+				.margin-adjustment 
+					h4 Due by March 2021
+					+check-item("Draft budget")
+					+check-item("Finalize guest list")
+
+					h4 Due by May 2021
+					+check-item("Research venues")
+					+check-item("Contact venues/Schedule tours")
+					+check-item("Research caterers")
+					+check-item("Research bakery")
+
+					h4 Due by June 2021
+					+check-item("Finalize venue + down payment")
+					+check-item("Finalize wedding theme")
+					+check-item("Research photographers")
+					+check-item("Contact caterers")
+
+					h4 Due by July 2021
+					+check-item("Food tasting")
+					+check-item("Order save-the-dates")
+
+		.mobile-screen
+			.mobile-background.plain
+				.onboarding-text
+					h2 Vision Board
+						small Import and save photos to help you envision your big day
+				.onboarding-image
+					img(
+						src="https://assets.codepen.io/567707/evermore-flowers.jpg?format=auto"
+					)
+					.rounded-ph.rounded-ph--long
+					.rounded-ph.rounded-ph--short
+
+				.onboarding-steps
+				.button-wrapper
+					button.btn.btn-primary Get started
+
+	.grid-child
+		.mobile-screen
+			.mobile-background
+				+topbar("Guestlist")
+				+add-button
+				nav
+					.icon
+						+checklist('lined')
+						span Checklist
+					.icon
+						+budget('lined')
+						span Budget
+					.icon.active
+						+guest('solid')
+						span Guests
+					.icon
+						+flower('lined')
+						span Vision
+				.margin-adjustment
+					.guest-list-header
+						p Total Guests: 32
+						span Sent?
+						span RSVP?
+					+guest-item("Amelia Frost (1)")
+					+guest-item("Benji MacKenzie (1)")
+					+guest-item("Betty Tang & Family (4)")
+					+guest-item("Brandon Steward (1)")
+					+guest-item("Dean Portland (3)")
+					+guest-item("Este Rochelle (1)") 
+					+guest-item("Ivy Rochelle (1)")
+					+guest-item("Francine Estella (2)")
+					+guest-item("Geller Family (5)")
+					+guest-item("Jordan Green (3)")
+
+		.mobile-screen
+			.mobile-background
+				+topbar("Wedding Vision")
+				+add-button
+				nav
+					.icon
+						+checklist('lined')
+						span Checklist
+					.icon
+						+budget('lined')
+						span Budget
+					.icon
+						+guest('lined')
+						span Guests
+					.icon.active
+						+flower('solid')
+						span Vision
+				.import-images
+					.import-images__image
+						img(src="https://assets.codepen.io/567707/evermore-cake.jpg")
+						img(src="https://assets.codepen.io/567707/evermore-flowers-2.jpg")
+					p Connect your Pinterest account to import images from your selected Pinterest board
+						small Your Pinterest board must be public. We will never post anything to your Pinterest account.
+					button.btn.btn-primary Connect now
+
+.more-info
+	.image
+		img(
+			src="https://assets.codepen.io/567707/palette-evermore.jpg",
+			alt="Taylor Swift album"
+		)
+	p Part of the 
+		a(href="https://codepen.io/collection/XPxJmz") UI Designs inspired by Taylor Swift Album Covers
+		|
+		| collection. This is evermore (2020).
diff --git a/ui-design-wedding-planning-app/src/script.js b/ui-design-wedding-planning-app/src/script.js
new file mode 100644
index 0000000..df3b37a
--- /dev/null
+++ b/ui-design-wedding-planning-app/src/script.js
@@ -0,0 +1 @@
+// 🌻
\ No newline at end of file
diff --git a/ui-design-wedding-planning-app/src/style.scss b/ui-design-wedding-planning-app/src/style.scss
new file mode 100644
index 0000000..e2b1eab
--- /dev/null
+++ b/ui-design-wedding-planning-app/src/style.scss
@@ -0,0 +1,563 @@
+:root {
+	--baby-powder: #fdfff7;
+	--gold-rush: #f9c97c;
+	--orange: #f59300;
+	--orange-light: #ffa51f;
+	--brown: #8b4218;
+	--champagne-problems: #fdf6ea;
+	--onyx: #363946;
+	--xanadu: #757761;
+	--gray: #a3a7b8;
+	--light-gray: #cecccc;
+	--dark-gray: #646773;
+	--font-title: "Big Shoulders Inline Display", cursive;
+	--font-cursive: "Newsreader", sans-serif;
+	--font-text: "Manrope", sans-serif;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	font-family: var(--font-text);
+	font-size: 1.3rem;
+	color: var(--onyx);
+	font-weight: 300;
+	line-height: 1.25;
+	background: var(--champagne-problems);
+}
+
+.mobile-screen {
+	width: 450px;
+	height: 800px;
+	margin: 3rem;
+	border-radius: 30px;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 2px 20px rgba(0, 0, 0, 0.05);
+}
+
+.mobile-background {
+	width: 100%;
+	height: 800px;
+	overflow: hidden;
+	border-radius: 30px;
+	padding: 2rem 2.5rem;
+	background: var(--baby-powder);
+	position: relative;
+	&.flowers {
+		background-image: url("https://assets.codepen.io/567707/evermore-splash.jpg");
+		background-size: cover;
+	}
+	&.plain {
+		background-image: url("https://assets.codepen.io/567707/evermore-background.jpg");
+		background-size: cover;
+		background-position: center bottom;
+	}
+}
+
+strong {
+	font-weight: 600;
+}
+
+a {
+	color: var(--brown);
+	&:hover {
+		color: var(--orange);
+	}
+}
+
+h1 {
+	font-family: var(--font-title);
+	font-size: 7rem;
+	text-align: center;
+	margin-top: 31%;
+	color: var(--brown);
+	small {
+		display: block;
+		font-size: 18%;
+		font-family: var(--font-text);
+		color: var(--gray);
+		margin-top: -10px;
+	}
+}
+
+h2 {
+	font-family: var(--font-text);
+	font-weight: 600;
+	font-size: 2.4rem;
+
+	small {
+		display: block;
+		font-size: 50%;
+		font-weight: 300;
+		font-family: var(--font-text);
+		margin-top: 0.75rem;
+	}
+}
+
+h4 {
+	font-size: 105%;
+	font-weight: 600;
+	padding-bottom: 0.5rem;
+	margin-bottom: 1rem;
+	border-bottom: 1px solid var(--onyx);
+	margin-top: 1.5rem;
+	position: relative;
+	svg {
+		width: 24px;
+		position: absolute;
+		right: 0;
+		fill: var(--onyx);
+	}
+}
+
+.btn {
+	font-family: var(--font-text);
+	width: 100%;
+	margin: 15px 0;
+	border-radius: 80px;
+	border: none !important;
+	padding: 1rem;
+	font-size: 1.6rem;
+	transition: all 0.2s ease-in;
+	cursor: pointer;
+	font-weight: 600;
+	color: var(--onyx);
+	&:hover {
+	}
+	&.btn-primary {
+		background: linear-gradient(45deg, var(--orange-light), var(--gold-rush));
+	}
+	&.btn-plus {
+		width: 3.7rem;
+		height: 3.7rem;
+		position: absolute;
+		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+		right: 1rem;
+		bottom: 6.1rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.75rem;
+		background: var(--xanadu);
+		z-index: 9;
+		svg {
+			width: 100%;
+			fill: var(--baby-powder);
+		}
+	}
+}
+
+label {
+	font-size: 90%;
+	font-weight: 600;
+}
+
+input {
+	width: 100%;
+	background: transparent;
+	border-radius: 0;
+	padding: 0.8rem 0;
+	font-size: 110%;
+	font-family: var(--font-text);
+	box-shadow: none;
+	border: none;
+	border-bottom: 1px solid var(--onyx);
+	&:focus {
+		outline: none;
+		box-shadow: 0 2px var(--onyx);
+	}
+}
+
+.input-wrapper {
+	margin: 1.8rem 0;
+}
+
+.back {
+	width: 40px;
+	fill: var(--onyx);
+	margin-top: 50px;
+}
+
+.button-wrapper {
+	margin-top: 1.2rem;
+	text-align: center;
+	p {
+		margin-top: 0.5rem;
+	}
+}
+
+nav {
+	display: flex;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	background: var(--baby-powder);
+	padding: 1rem 1.5rem 0.8rem;
+	box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
+	z-index: 10;
+	.icon {
+		flex: 1;
+		text-align: center;
+		color: var(--dark-gray);
+		&.active {
+			color: var(--orange);
+			svg {
+				fill: var(--orange);
+			}
+		}
+	}
+	svg {
+		width: 2rem;
+		height: 2rem;
+		object-fit: contain;
+		fill: var(--dark-gray);
+	}
+	span {
+		display: block;
+		font-size: 55%;
+		text-transform: uppercase;
+		font-weight: 600;
+		margin-top: 0.2rem;
+	}
+}
+
+.topbar {
+	display: flex;
+	align-items: center;
+	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+	width: calc(100% + 5rem);
+	margin-left: -2.5rem;
+	padding: 3rem 1.5rem 1.5rem;
+	margin-top: -2.5rem;
+	.menu-icon {
+		width: 25px;
+		height: 2px;
+		background: var(--onyx);
+		box-shadow: 0 -8px var(--onyx), 0 8px var(--onyx);
+	}
+	h3 {
+		margin-left: 1.1rem;
+		font-weight: 600;
+		font-size: 130%;
+	}
+	.more-icon {
+		width: 6px;
+		height: 6px;
+		border-radius: 100%;
+		background: var(--onyx);
+		box-shadow: 0 -10px var(--onyx), 0 10px var(--onyx);
+		margin-left: auto;
+	}
+}
+
+.margin-adjustment {
+	margin-left: -2.5rem;
+	padding: 0.5rem 1.5rem;
+	width: calc(100% + 5rem);
+}
+
+.onboarding-text h2 {
+	text-align: center;
+	margin-top: 10%;
+	padding: 2rem;
+}
+
+.onboarding-image {
+	width: 60%;
+	margin: 1rem auto 0;
+	background: var(--baby-powder);
+	padding: 1rem 1rem 0.4rem;
+	border-radius: 15px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	img {
+		width: 100%;
+		border-radius: 8px;
+		height: 220px;
+		object-fit: cover;
+		margin-bottom: 0.2rem;
+	}
+	.rounded-ph {
+		border-radius: 100px;
+		height: 14px;
+		background: var(--light-gray);
+		margin: 0.8rem 0;
+		&--long {
+			width: 180px;
+		}
+		&--short {
+			width: 110px;
+		}
+	}
+}
+
+.onboarding-steps {
+	width: 12px;
+	height: 12px;
+	background: var(--light-gray);
+	border-radius: 50%;
+	margin: 2rem auto 3rem;
+	box-shadow: 25px 0 var(--orange), -25px 0 var(--light-gray);
+}
+
+.signup-text h2 {
+	width: 75%;
+	margin-top: 10%;
+	margin-bottom: 2rem;
+}
+
+.signup-form {
+}
+
+.check-item {
+	display: flex;
+	margin: 0.6rem 0;
+	align-items: center;
+	svg {
+		width: 20px;
+		height: 20px;
+		fill: var(--onyx);
+		opacity: 0.5;
+	}
+	p {
+		flex: 1;
+		margin-left: 0.75rem;
+	}
+}
+
+.import-images {
+	margin-top: 4rem;
+	text-align: center;
+	p {
+		margin-bottom: 1rem;
+		small {
+			display: block;
+			color: var(--gray);
+			font-size: 80%;
+			margin-top: 0.8rem;
+		}
+	}
+	&__image {
+		margin: 5rem 0 2rem;
+		line-height: 0;
+		img {
+			border-radius: 0.7rem;
+			width: 120px;
+			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.1);
+			transform: rotate(-8deg);
+			border: 2px solid var(--baby-powder);
+			&:nth-child(2) {
+				transform: rotate(8deg) translate(-0.5rem, -1.5rem);
+			}
+		}
+	}
+}
+
+.color-palette {
+	display: flex;
+	justify-content: space-between;
+	&__item {
+		height: 80px;
+		flex: 0 0 24.2%;
+		&:nth-child(2) {
+			background: #e6d3c2;
+		}
+		&:nth-child(3) {
+			background: #b69987;
+		}
+		&:nth-child(4) {
+			background: #994d0d;
+		}
+		&:nth-child(1) {
+			background: #e67853;
+		}
+	}
+}
+
+.inspiration img {
+	width: 100%;
+}
+
+.guest-list-header {
+	display: flex;
+	font-weight: 600;
+	padding: 0 0 0.5rem;
+	margin-bottom: 1rem;
+	border-bottom: 1px solid var(--onyx);
+	margin-top: 1.5rem;
+	text-transform: uppercase;
+	font-size: 70%;
+	span {
+		width: 65px;
+		text-align: center;
+		&:nth-child(2) {
+			margin-left: auto;
+		}
+	}
+}
+
+.guest-item {
+	display: flex;
+	margin: 1rem 0;
+	border-bottom: 1px solid var(--light-gray);
+	padding: 0.3rem 0 1rem;
+	&__tick {
+		width: 65px;
+		text-align: center;
+		&:nth-child(2) {
+			margin-left: auto;
+		}
+		svg {
+			width: 24px;
+			height: 24px;
+			fill: var(--light-gray);
+			opacity: 0.8;
+		}
+	}
+}
+
+.circle {
+	width: 8px;
+	height: 8px;
+	margin-right: 8px;
+	background: black;
+	border-radius: 50%;
+	display: inline-block;
+	vertical-align: top;
+	margin-top: 6px;
+}
+
+.budget {
+	background: var(--champagne-problems);
+	border-radius: 10px;
+	margin-top: 1.5rem;
+	display: flex;
+	padding: 1.25rem;
+	position: relative;
+	p:first-child {
+		margin-bottom: 0.5rem;
+	}
+	p:not(:first-child) {
+		font-size: 85%;
+		margin-top: 0.1rem;
+	}
+	svg {
+		width: 6rem;
+		position: absolute;
+		top: 1.5rem;
+		right: 1rem;
+	}
+	&-unpaid .circle {
+		background: var(--orange);
+	}
+	&-paid .circle {
+		background: var(--brown);
+	}
+	&-remaining .circle {
+		background: var(--xanadu);
+	}
+}
+
+.budget-item {
+	display: flex;
+	margin: 1rem 0;
+	border-bottom: 1px solid var(--light-gray);
+	padding: 0.3rem 0 1rem;
+	&__number {
+		margin-left: auto;
+	}
+	&__tick {
+		width: 65px;
+		text-align: center;
+		svg {
+			width: 24px;
+			height: 24px;
+			fill: var(--light-gray);
+			opacity: 0.8;
+		}
+	}
+}
+
+body {
+	height: 100vh;
+	width: 100%;
+	position: relative;
+	@media (min-width: 800px) {
+		overflow: hidden;
+	}
+}
+
+.grid-parent {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	padding: 0 2rem;
+	margin: auto;
+
+	@media (max-width: 600px) {
+		transform: scale(0.75);
+		margin-top: -55rem;
+	}
+	@media (min-width: 800px) {
+		flex-wrap: nowrap;
+		position: absolute;
+		top: 58%;
+		left: 50%;
+		transform: translate(-50%, -50%) scale(0.8);
+	}
+	@media (min-width: 1200px) {
+	}
+	@media (min-width: 1800px) {
+		transform: translate(-50%, -50%) scale(1);
+	}
+}
+
+.grid-child {
+	@media (min-width: 800px) {
+		transform: rotate(20deg) translateY(2rem);
+		&:nth-child(2) {
+			transform: rotate(20deg) translateY(-4rem);
+		}
+		&:nth-child(3) {
+			transform: rotate(20deg) translateY(-2rem);
+		}
+		&:nth-child(4) {
+			transform: rotate(20deg) translateY(13rem);
+		}
+	}
+}
+
+.more-info {
+	width: 100%;
+	margin: -50rem 0 0;
+	background: var(--onyx);
+	display: flex;
+	align-items: center;
+	color: var(--baby-powder);
+	font-size: 85%;
+	a {
+		color: var(--baby-powder);
+	}
+	@media (min-width: 600px) {
+		margin: 0;
+	}
+	@media (min-width: 800px) {
+		position: fixed;
+		top: 0;
+		right: 0;
+		max-width: 500px;
+	}
+	.image {
+		flex: 0 0 30%;
+		max-width: 10rem;
+		line-height: 0;
+		img {
+			width: 100%;
+		}
+	}
+	p {
+		flex: 1;
+		padding: 1.1rem 1.5rem;
+	}
+}
diff --git a/vacation-todo-list/README.markdown b/vacation-todo-list/README.markdown
new file mode 100644
index 0000000..0bd0198
--- /dev/null
+++ b/vacation-todo-list/README.markdown
@@ -0,0 +1,4 @@
+# Vacation Todo List
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/tjgill/pen/gObKNZB](https://codepen.io/tjgill/pen/gObKNZB).
+
+ 
\ No newline at end of file
diff --git a/vacation-todo-list/dist/index.html b/vacation-todo-list/dist/index.html
new file mode 100644
index 0000000..0968987
--- /dev/null
+++ b/vacation-todo-list/dist/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Vacation Todo List</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!--
+Twitter: https://twitter.com/tjgillweb
+Codepen: https://codepen.io/tjgill/
+Github: https://github.com/tjgillweb/
+-->
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
+        integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+<div class="todoList">
+        <div class="cover-img">
+            <div class="cover-inner">
+                <h3>Vacation</h3>
+            </div>
+        </div>
+        <div class="content">
+            <form class="add">
+                <input type="text" name="add" placeholder="Add item...">
+                <div class="input-buttons">
+                    <a href="#" class="add-todo">
+                        <i class="fas fa-plus add"></i>
+                    </a>
+                </div>
+            </form>
+            <ul class="todos">
+                <li>
+                    <input type="checkbox" id="todo_1" />
+                    <label for="todo_1">
+                        <span class="check"></span>Buy Flight Tickets
+                    </label>
+                    <i class="far fa-trash-alt delete"></i>
+                </li>
+                <li>
+                    <input type="checkbox" id="todo_2" />
+                    <label for="todo_2">
+                        <span class="check"></span>Find AirBnB
+                    </label>
+                    <i class="far fa-trash-alt delete"></i>
+                </li>
+                <li>
+                    <input type="checkbox" id="todo_3" />
+                    <label for="todo_3">
+                        <span class="check"></span> Look up things to do
+                    </label>
+                    <i class="far fa-trash-alt delete"></i>
+                </li>
+                <li>
+                    <input type="checkbox" id="todo_4" />
+                    <label for="todo_4">
+                        <span class="check"></span> Passport
+                    </label>
+                    <i class="far fa-trash-alt delete"></i>
+                </li>
+            </ul>
+        </div>
+
+    </div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/vacation-todo-list/dist/script.js b/vacation-todo-list/dist/script.js
new file mode 100644
index 0000000..6eebe94
--- /dev/null
+++ b/vacation-todo-list/dist/script.js
@@ -0,0 +1,39 @@
+const submitForm = document.querySelector('.add');
+const addButton = document.querySelector('.add-todo');
+const todoList = document.querySelector('.todos');
+const list = document.querySelectorAll('.todos li'); //gives a NodeList of all li's
+let listLength = list.length;
+
+const generateTemplate = (todo) => {
+
+    const html = `<li>
+                    <input type="checkbox" id="todo_${listLength}" />
+                    <label for="todo_${listLength}">
+                        <span class="check"></span>${todo}
+                    </label>
+                    <i class="far fa-trash-alt delete"></i>
+                  </li>`
+    todoList.innerHTML += html;
+};
+
+function addTodos(e) {
+    e.preventDefault();
+    const todo = submitForm.add.value.trim(); //trim extra space in input
+    if (todo.length) { // to check whether the input is empty
+        listLength = listLength + 1; // to update the checkbox id when we add a new list item
+        generateTemplate(todo);
+        submitForm.reset();
+    }
+
+}
+//add todos
+submitForm.addEventListener('submit', addTodos);
+addButton.addEventListener('click', addTodos);
+
+function deleteTodos(e) {
+    if (e.target.classList.contains('delete')) {
+        e.target.parentElement.remove();
+    }
+}
+//delete todos
+todoList.addEventListener('click', deleteTodos);
\ No newline at end of file
diff --git a/vacation-todo-list/dist/style.css b/vacation-todo-list/dist/style.css
new file mode 100644
index 0000000..0466abd
--- /dev/null
+++ b/vacation-todo-list/dist/style.css
@@ -0,0 +1,192 @@
+@import url("https://fonts.googleapis.com/css?family=Nunito:600,700&display=swap");
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+body {
+  min-height: 450px;
+  height: 100vh;
+  margin: 0;
+  background: radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%);
+  color: #fff;
+  font-family: 'Nunito', sans-serif;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/*-------------------- ToDo List -------------------*/
+.todoList {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 320px;
+  height: 500px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 7px 30px rgba(62, 9, 11, 0.3);
+}
+
+/** Header Image **/
+.cover-img .cover-inner {
+  background: url("https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1533&q=80");
+  height: 190px;
+  background-size: cover;
+  background-position: 10% 20%;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  position: relative;
+}
+.cover-img .cover-inner::after {
+  background: rgba(0, 0, 0, 0.3);
+  content: "";
+  top: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.cover-img .cover-inner h3 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: 'Nunito', sans-serif;
+  text-transform: uppercase;
+  font-size: 2.8rem;
+  z-index: 10;
+  font-weight: 700;
+}
+
+/* Main Content */
+.content {
+  padding: 10px 20px;
+}
+.content form {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  padding: 0 10px 0 5px;
+  border-bottom: 1px solid #8e979c;
+}
+.content form > * {
+  background: transparent;
+  border: none;
+  height: 35px;
+}
+.content input[type=text] {
+  font-weight: 700;
+  font-size: 1.2rem;
+  color: #6C717B;
+}
+.content .input-buttons a {
+  text-decoration: none;
+}
+.content .input-buttons i {
+  margin-top: 5px;
+  font-size: 20px;
+  color: #8e979c;
+}
+.content ul.todos {
+  margin-left: 0;
+  padding: 0;
+  list-style: none;
+  height: 220px;
+  overflow: auto;
+}
+.content li {
+  user-select: none;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+}
+.content li i {
+  color: #6C717B;
+  font-size: 15px;
+  cursor: pointer;
+  padding: 5px 10px;
+}
+.content input[type=checkbox] {
+  display: none;
+}
+.content input[type=checkbox] + label {
+  color: #6C717B;
+  font-size: 15px;
+  cursor: pointer;
+  position: relative;
+  border-radius: 3px;
+  display: inline-block;
+  padding: 5px 5px 5px 30px;
+}
+.content input[type=checkbox] + label:hover {
+  color: #353A42;
+  background-color: #F4F7FA;
+}
+.content input[type=checkbox] + label span.check {
+  left: 4px;
+  top: 50%;
+  position: absolute;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 18px;
+  display: block;
+  background: white;
+  border-radius: 3px;
+  border: 1px solid #b8bfcc;
+  box-shadow: 0 2px 3px #F0F4F8;
+}
+.content input[type=checkbox]:checked + label {
+  color: #AEB7C6;
+  text-decoration: line-through;
+}
+.content input[type=checkbox]:checked + label span.check {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.content input[type=checkbox] + label span.check::after {
+  width: 100%;
+  height: 100%;
+  content: '';
+  display: block;
+  position: absolute;
+  background-image: url("https://tjgillweb.github.io/Vacation-Todo-App/images/tick.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px 16px;
+  transform: scale(0);
+  transition: transform 300ms cubic-bezier(0.3, 0, 0, 1.5);
+}
+.content input[type=checkbox]:checked + label span.check::after {
+  transform: scale(1);
+}
+.content input[type=checkbox] + label span.check::before {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  background: #8798AA;
+  opacity: .8;
+  transform: scale(0);
+}
+.content input[type=checkbox]:checked + label span.check::before {
+  opacity: 0;
+  transform: scale(1.3);
+  transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1), transform 400ms cubic-bezier(0.3, 0, 0, 1.4);
+}
\ No newline at end of file
diff --git a/vacation-todo-list/license.txt b/vacation-todo-list/license.txt
new file mode 100644
index 0000000..3669afd
--- /dev/null
+++ b/vacation-todo-list/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Taranjot Gill (https://codepen.io/tjgill/pen/gObKNZB)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/vacation-todo-list/src/index.html b/vacation-todo-list/src/index.html
new file mode 100644
index 0000000..ab8411e
--- /dev/null
+++ b/vacation-todo-list/src/index.html
@@ -0,0 +1,55 @@
+<!--
+Twitter: https://twitter.com/tjgillweb
+Codepen: https://codepen.io/tjgill/
+Github: https://github.com/tjgillweb/
+-->
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
+        integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+<div class="todoList">
+        <div class="cover-img">
+            <div class="cover-inner">
+                <h3>Vacation</h3>
+            </div>
+        </div>
+        <div class="content">
+            <form class="add">
+                <input type="text" name="add" placeholder="Add item...">
+                <div class="input-buttons">
+                    <a href="#" class="add-todo">
+                        <i class="fas fa-plus add"></i>
+                    </a>
+                </div>
+            </form>
+            <ul class="todos">
+                <li>
+                    <input type="checkbox" id="todo_1" />
+                    <label for="todo_1">
+                        <span class="check"></span>Buy Flight Tickets
+                    </label>
+                    <i class="far fa-trash-alt delete"></i>
+                </li>
+                <li>
+                    <input type="checkbox" id="todo_2" />
+                    <label for="todo_2">
+                        <span class="check"></span>Find AirBnB
+                    </label>
+                    <i class="far fa-trash-alt delete"></i>
+                </li>
+                <li>
+                    <input type="checkbox" id="todo_3" />
+                    <label for="todo_3">
+                        <span class="check"></span> Look up things to do
+                    </label>
+                    <i class="far fa-trash-alt delete"></i>
+                </li>
+                <li>
+                    <input type="checkbox" id="todo_4" />
+                    <label for="todo_4">
+                        <span class="check"></span> Passport
+                    </label>
+                    <i class="far fa-trash-alt delete"></i>
+                </li>
+            </ul>
+        </div>
+
+    </div>
\ No newline at end of file
diff --git a/vacation-todo-list/src/script.js b/vacation-todo-list/src/script.js
new file mode 100644
index 0000000..6eebe94
--- /dev/null
+++ b/vacation-todo-list/src/script.js
@@ -0,0 +1,39 @@
+const submitForm = document.querySelector('.add');
+const addButton = document.querySelector('.add-todo');
+const todoList = document.querySelector('.todos');
+const list = document.querySelectorAll('.todos li'); //gives a NodeList of all li's
+let listLength = list.length;
+
+const generateTemplate = (todo) => {
+
+    const html = `<li>
+                    <input type="checkbox" id="todo_${listLength}" />
+                    <label for="todo_${listLength}">
+                        <span class="check"></span>${todo}
+                    </label>
+                    <i class="far fa-trash-alt delete"></i>
+                  </li>`
+    todoList.innerHTML += html;
+};
+
+function addTodos(e) {
+    e.preventDefault();
+    const todo = submitForm.add.value.trim(); //trim extra space in input
+    if (todo.length) { // to check whether the input is empty
+        listLength = listLength + 1; // to update the checkbox id when we add a new list item
+        generateTemplate(todo);
+        submitForm.reset();
+    }
+
+}
+//add todos
+submitForm.addEventListener('submit', addTodos);
+addButton.addEventListener('click', addTodos);
+
+function deleteTodos(e) {
+    if (e.target.classList.contains('delete')) {
+        e.target.parentElement.remove();
+    }
+}
+//delete todos
+todoList.addEventListener('click', deleteTodos);
\ No newline at end of file
diff --git a/vacation-todo-list/src/style.scss b/vacation-todo-list/src/style.scss
new file mode 100644
index 0000000..435cc2e
--- /dev/null
+++ b/vacation-todo-list/src/style.scss
@@ -0,0 +1,227 @@
+@import url('https://fonts.googleapis.com/css?family=Nunito:600,700&display=swap');
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+body {
+  min-height: 450px;
+  height: 100vh;
+  margin: 0;
+  background: radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%);
+  color: #fff;
+  font-family: 'Nunito', sans-serif;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/*-------------------- ToDo List -------------------*/
+.todoList {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 320px;
+  height: 500px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 7px 30px rgba(62, 9, 11, .3);
+
+}
+
+/** Header Image **/
+.cover-img {
+
+  .cover-inner {
+    background: url('https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1533&q=80');
+    height: 190px;
+    background-size: cover;
+    background-position: 10% 20%;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    position: relative;
+
+    &::after {
+      background: rgba(0, 0, 0, 0.3);
+      content: "";
+      top: 0;
+      left: 0;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+    }
+
+    h3 {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-family: 'Nunito', sans-serif;
+      text-transform: uppercase;
+      font-size: 2.8rem;
+      z-index: 10;
+      font-weight: 700;
+    }
+  }
+}
+
+/* Main Content */
+.content {
+  padding: 10px 20px;
+
+  form {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    padding: 0 10px 0 5px;
+    border-bottom: 1px solid #8e979c;
+  }
+
+  form>* {
+    background: transparent;
+    border: none;
+    height: 35px;
+  }
+
+  input[type=text] {
+    //flex-basis: 80%;
+    //padding: 0 5px;
+    font-weight: 700;
+    font-size: 1.2rem;
+    color: #6C717B;
+  }
+
+  .input-buttons {
+    //border-bottom: 1px solid #8e979c;
+    //flex-basis: 20%;
+    //text-align: center;
+    //padding: 0px 0 0 10px;
+  }
+
+  .input-buttons a {
+    text-decoration: none;
+  }
+
+  .input-buttons i {
+    margin-top: 5px;
+    font-size: 20px;
+    color: #8e979c;
+  }
+
+  ul.todos {
+    margin-left: 0;
+    padding: 0;
+    list-style: none;
+    height: 220px;
+    overflow: auto;
+  }
+
+  li {
+    user-select: none;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  li i {
+    color: #6C717B;
+    font-size: 15px;
+    cursor: pointer;
+    padding: 5px 10px;
+  }
+
+  input[type=checkbox] {
+    display: none
+  }
+
+  input[type=checkbox]+label {
+    color: #6C717B;
+    font-size: 15px;
+    cursor: pointer;
+    position: relative;
+    border-radius: 3px;
+    display: inline-block;
+    padding: 5px 5px 5px 30px;
+  }
+
+  input[type=checkbox]+label:hover {
+    color: #353A42;
+    background-color: #F4F7FA;
+  }
+
+  input[type=checkbox]+label span.check {
+    left: 4px;
+    top: 50%;
+    position: absolute;
+    transform: translateY(-50%);
+    width: 18px;
+    height: 18px;
+    display: block;
+    background: white;
+    border-radius: 3px;
+    border: 1px solid #b8bfcc;
+    box-shadow: 0 2px 3px #F0F4F8;
+  }
+
+  input[type=checkbox]:checked+label {
+    color: #AEB7C6;
+    text-decoration: line-through;
+  }
+
+  input[type=checkbox]:checked+label span.check {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  input[type=checkbox]+label span.check::after {
+    width: 100%;
+    height: 100%;
+    content: '';
+    display: block;
+    position: absolute;
+    background-image: url('https://tjgillweb.github.io/Vacation-Todo-App/images/tick.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 16px 16px;
+    transform: scale(0);
+    transition: transform 300ms cubic-bezier(0.3, 0, 0, 1.5);
+  }
+
+  input[type=checkbox]:checked+label span.check::after {
+    transform: scale(1);
+  }
+
+  input[type=checkbox]+label span.check::before {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    background: #8798AA;
+
+    opacity: .8;
+    transform: scale(0);
+  }
+
+  input[type=checkbox]:checked+label span.check::before {
+    opacity: 0;
+    transform: scale(1.3);
+    transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1), transform 400ms cubic-bezier(0.3, 0, 0, 1.4);
+  }
+}
\ No newline at end of file
diff --git a/vhs-stuck/README.markdown b/vhs-stuck/README.markdown
new file mode 100644
index 0000000..fc9ed69
--- /dev/null
+++ b/vhs-stuck/README.markdown
@@ -0,0 +1,5 @@
+# VHS Stuck
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/fractalkitty/pen/YzrMdBM](https://codepen.io/fractalkitty/pen/YzrMdBM).
+
+
diff --git a/vhs-stuck/dist/index.html b/vhs-stuck/dist/index.html
new file mode 100644
index 0000000..f7809a4
--- /dev/null
+++ b/vhs-stuck/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - VHS Stuck</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/vhs-stuck/dist/script.js b/vhs-stuck/dist/script.js
new file mode 100644
index 0000000..5410a2e
--- /dev/null
+++ b/vhs-stuck/dist/script.js
@@ -0,0 +1,44 @@
+//https://fractalkitty.com/101-days-of-creative-coding-docc/
+let cnt = 100,dx = 1,dy=1;
+let cnty = 0;
+function preload() {
+  bg = loadImage('https://assets.codepen.io/4559259/IMG_1068.jpeg');
+}
+function setup() {
+  cnv = createCanvas(bg.width/7, bg.height/7);//canvas creation
+  noStroke();  
+  cnty=height;
+  background(bg);
+}
+function draw() {
+  translate(1*sin(frameCount/10)*sin(frameCount/10),0)
+  for(i=0;i<height;i=i+dx){    
+    let x = cnty;
+    let y = i;
+    pix = bg.get(bg.width/(width/x),bg.height/(height/y));
+    fill(pix[0]+random(-50,50),pix[1]+random(-50,50),pix[2]+random(-50,50),200);
+    x = cnty+100;
+    y = i; 
+    tmpx = random(0,50);
+    tmpy = random(3,500);
+    rect(x,y,tmpx,tmpy);
+    tmpx = random(10,20);
+    tmpy = random(300,500);
+    x = cnty-100;
+    y = i; fill(pix[0]+random(-50,50)+100,pix[1]+random(-50,50),pix[2]+100+random(-50,50),200);
+    rect(x,y,tmpx,tmpy);
+    tmpx = random(10,20);
+    tmpy = random(300,500);
+    
+    
+    rect(x-200,y,tmpx,tmpy);
+    fill(pix[0]+random(-50,50),pix[1]+random(-50,50)-100,pix[2]+random(-50,50),200);
+    rect(x+100,y,tmpx,tmpy);
+    tmpx = random(90,100);
+    tmpy = random(300,500);
+    rect(x,y,tmpx,tmpy);
+  }
+  cnty = (cnty+dy)%width;
+  
+  
+}
\ No newline at end of file
diff --git a/vhs-stuck/dist/style.css b/vhs-stuck/dist/style.css
new file mode 100644
index 0000000..2ef2bef
--- /dev/null
+++ b/vhs-stuck/dist/style.css
@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #1d2324;
+}
\ No newline at end of file
diff --git a/vhs-stuck/license.txt b/vhs-stuck/license.txt
new file mode 100644
index 0000000..433bf78
--- /dev/null
+++ b/vhs-stuck/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2022 by Sophia (https://codepen.io/fractalkitty/pen/YzrMdBM)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/vhs-stuck/src/index.html b/vhs-stuck/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/vhs-stuck/src/script.js b/vhs-stuck/src/script.js
new file mode 100644
index 0000000..5410a2e
--- /dev/null
+++ b/vhs-stuck/src/script.js
@@ -0,0 +1,44 @@
+//https://fractalkitty.com/101-days-of-creative-coding-docc/
+let cnt = 100,dx = 1,dy=1;
+let cnty = 0;
+function preload() {
+  bg = loadImage('https://assets.codepen.io/4559259/IMG_1068.jpeg');
+}
+function setup() {
+  cnv = createCanvas(bg.width/7, bg.height/7);//canvas creation
+  noStroke();  
+  cnty=height;
+  background(bg);
+}
+function draw() {
+  translate(1*sin(frameCount/10)*sin(frameCount/10),0)
+  for(i=0;i<height;i=i+dx){    
+    let x = cnty;
+    let y = i;
+    pix = bg.get(bg.width/(width/x),bg.height/(height/y));
+    fill(pix[0]+random(-50,50),pix[1]+random(-50,50),pix[2]+random(-50,50),200);
+    x = cnty+100;
+    y = i; 
+    tmpx = random(0,50);
+    tmpy = random(3,500);
+    rect(x,y,tmpx,tmpy);
+    tmpx = random(10,20);
+    tmpy = random(300,500);
+    x = cnty-100;
+    y = i; fill(pix[0]+random(-50,50)+100,pix[1]+random(-50,50),pix[2]+100+random(-50,50),200);
+    rect(x,y,tmpx,tmpy);
+    tmpx = random(10,20);
+    tmpy = random(300,500);
+    
+    
+    rect(x-200,y,tmpx,tmpy);
+    fill(pix[0]+random(-50,50),pix[1]+random(-50,50)-100,pix[2]+random(-50,50),200);
+    rect(x+100,y,tmpx,tmpy);
+    tmpx = random(90,100);
+    tmpy = random(300,500);
+    rect(x,y,tmpx,tmpy);
+  }
+  cnty = (cnty+dy)%width;
+  
+  
+}
\ No newline at end of file
diff --git a/vhs-stuck/src/style.css b/vhs-stuck/src/style.css
new file mode 100644
index 0000000..ade2400
--- /dev/null
+++ b/vhs-stuck/src/style.css
@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #1d2324;
+}
diff --git a/video-blend-modes-cool-modal/README.markdown b/video-blend-modes-cool-modal/README.markdown
new file mode 100644
index 0000000..68a705d
--- /dev/null
+++ b/video-blend-modes-cool-modal/README.markdown
@@ -0,0 +1,4 @@
+# Video + Blend modes = Cool modal
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jcoulterdesign/pen/QagxgJ](https://codepen.io/jcoulterdesign/pen/QagxgJ).
+
+ 
\ No newline at end of file
diff --git a/video-blend-modes-cool-modal/dist/index.html b/video-blend-modes-cool-modal/dist/index.html
new file mode 100644
index 0000000..50b0223
--- /dev/null
+++ b/video-blend-modes-cool-modal/dist/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Video + Blend modes = Cool modal</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class='container'>
+  <div class='wrap'>
+    <div id='bg'>
+      <img class='a' src='https://wallpapertag.com/wallpaper/full/a/d/c/49949-steampunk-background-5000x2801-mobile.jpg'>
+    </div>
+    <video data-depth='50' height='540' id='myVideo' width='620'>
+      <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/ink4.mp4" type="video/mp4">
+    </video>
+    <img class='b' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/clockwork.png'>
+    <div class='wrap_inner'>
+      <div class='container_inner'>
+        <h1>The inkblot modal</h1>
+        <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/trill.png'>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ulla</p>
+        <a>confirm</a>
+      </div>
+    </div>
+  </div>
+</div>
+<div class='button'>Open the modal</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/video-blend-modes-cool-modal/dist/script.js b/video-blend-modes-cool-modal/dist/script.js
new file mode 100644
index 0000000..ccf7fe8
--- /dev/null
+++ b/video-blend-modes-cool-modal/dist/script.js
@@ -0,0 +1,18 @@
+var vid = document.getElementById("myVideo"); 
+
+function playVid() { 
+    vid.play(); 
+} 
+
+$('.button').click(function(){
+    $(this).fadeOut(500);
+
+    setTimeout(function(){
+        playVid();
+    },800);
+ 
+    setTimeout(function(){
+        $('h1,.container_inner img,a').css('opacity','1');
+        $('p').css('opacity','.6');
+    },1700);
+});
\ No newline at end of file
diff --git a/video-blend-modes-cool-modal/dist/style.css b/video-blend-modes-cool-modal/dist/style.css
new file mode 100644
index 0000000..70d0c06
--- /dev/null
+++ b/video-blend-modes-cool-modal/dist/style.css
@@ -0,0 +1,151 @@
+@font-face {
+  font-family: 'Princess';
+  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/PrincesSANDTHEFROG.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+body {
+  margin: 0;
+  font-family: 'Princess';
+  height: 100vh;
+  overflow: hidden;
+}
+body .container {
+  height: 0px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  margin: auto;
+}
+body .container .wrap {
+  background: white;
+  position: absolute;
+  height: 100vh;
+  width: 100%;
+}
+body .container video {
+  mix-blend-mode: multiply;
+  top: calc(50% + 40px);
+  position: absolute;
+  left: 0;
+  width: 940px;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  right: 0;
+  margin: auto;
+}
+body .container img.a {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  left: 0;
+  z-index: 0;
+}
+body .container img.b {
+  position: absolute;
+  mix-blend-mode: exclusion;
+  width: 640px;
+  top: calc(50% - 40px);
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+body .container_inner {
+  mix-blend-mode: lighten;
+}
+body .container_inner h1 {
+  color: white;
+  font-weight: normal;
+  font-size: 15px;
+  opacity: 0;
+  transition: all 0.8s 0.2s;
+}
+body .container_inner p {
+  color: white;
+  opacity: 0.6;
+  line-height: 18px;
+  font-size: 9px;
+  margin: 16px 0;
+  opacity: 0;
+  transition: all 0.8s 0.4s;
+}
+body .container_inner img {
+  opacity: 0;
+  transition: all 0.8s 0.3s;
+}
+body .container_inner a {
+  color: white;
+  font-size: 12px;
+  border-bottom: 1px solid white;
+  opacity: 0;
+  transition: all 0.8s 0.5s;
+}
+body .container .wrap_inner {
+  position: absolute;
+  top: calc(50%);
+  text-align: center;
+  position: absolute;
+  left: -69px;
+  right: 0;
+  mix-blend-mode: screen;
+  margin: auto;
+  width: 280px;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.button {
+  position: absolute;
+  z-index: 3;
+  color: white;
+  background: rgba(61, 21, 24, 0.54);
+  display: block;
+  width: 132px;
+  text-align: center;
+  border-radius: 2px;
+  top: 50%;
+  padding: 13px;
+  right: 0;
+  margin: auto;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  font-size: 12px;
+  left: -90px;
+  cursor: pointer;
+  transition: background .7s;
+}
+.button:hover {
+  background: #3d1518;
+}
+
+/* YAY CSS TRICKS! */
+img.a {
+  position: fixed;
+  top: 0;
+  left: 0;
+  /* Preserve aspet ratio */
+  min-width: 100%;
+  min-height: 100%;
+}
+
+#bg {
+  position: fixed;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+}
+
+#bg img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  min-width: 50%;
+  min-height: 50%;
+}
diff --git a/video-blend-modes-cool-modal/license.txt b/video-blend-modes-cool-modal/license.txt
new file mode 100644
index 0000000..3104dbd
--- /dev/null
+++ b/video-blend-modes-cool-modal/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Jamie Coulter (https://codepen.io/jcoulterdesign/pen/QagxgJ)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/video-blend-modes-cool-modal/src/index.haml b/video-blend-modes-cool-modal/src/index.haml
new file mode 100644
index 0000000..191da9e
--- /dev/null
+++ b/video-blend-modes-cool-modal/src/index.haml
@@ -0,0 +1,14 @@
+.container
+    .wrap
+        #bg
+            %img.a{:src => 'https://wallpapertag.com/wallpaper/full/a/d/c/49949-steampunk-background-5000x2801-mobile.jpg'}
+        %video#myVideo{:width => "620", :height => "540", 'data-depth' => '50'}
+            <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/ink4.mp4" type="video/mp4">
+        %img.b{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/clockwork.png'}
+        .wrap_inner
+            .container_inner
+                %h1 The inkblot modal
+                %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/trill.png'}
+                %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ulla
+                %a confirm
+.button Open the modal
\ No newline at end of file
diff --git a/video-blend-modes-cool-modal/src/script.js b/video-blend-modes-cool-modal/src/script.js
new file mode 100644
index 0000000..dae07fa
--- /dev/null
+++ b/video-blend-modes-cool-modal/src/script.js
@@ -0,0 +1,18 @@
+var vid = document.getElementById("myVideo"); 
+
+function playVid() { 
+    vid.play(); 
+} 
+
+$('.button').click(function(){
+    $(this).fadeOut(500);
+
+    setTimeout(function(){
+        playVid();
+    },800);
+ 
+    setTimeout(function(){
+        $('h1,.container_inner img,a').css('opacity','1');
+        $('p').css('opacity','.6');
+    },1700);
+});
diff --git a/video-blend-modes-cool-modal/src/style.scss b/video-blend-modes-cool-modal/src/style.scss
new file mode 100644
index 0000000..831735a
--- /dev/null
+++ b/video-blend-modes-cool-modal/src/style.scss
@@ -0,0 +1,163 @@
+@font-face {
+    font-family: 'Princess';
+    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/PrincesSANDTHEFROG.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+    margin: 0;
+    font-family: 'Princess';
+    height: 100vh;
+    overflow: hidden;
+
+    .container {
+        height: 0px;
+        left: 0;
+        position: absolute;
+        right: 0;
+        margin: auto;
+
+        .wrap {
+            background: white;
+            position: absolute;
+            height: 100vh;
+            width: 100%;
+        }
+
+        video {
+            mix-blend-mode: multiply;
+            top: calc(50% + 40px);
+            position: absolute;
+            left:0;
+            width: 940px;
+            transform: translateY(-50%);
+            right:0;
+            margin:auto;
+        }
+
+        img.a {
+            position: absolute;
+            top:0;
+            width: 100%;
+            left:0;
+            z-index:0;
+        }
+
+        img.b {
+            position: absolute;
+            mix-blend-mode: exclusion;
+            width: 640px;
+            top: calc(50% - 40px);
+            -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+            position: absolute;
+            left: 0;
+            right: 0;
+            margin: auto;
+        }
+
+        &_inner {
+            mix-blend-mode: lighten;
+
+            h1 {
+                color: white;
+                font-weight: normal;
+                font-size: 15px;
+                opacity: 0;
+                transition: all 0.8s 0.2s;
+            }
+
+            p {    
+                color: white;
+                opacity: 0.6;
+                line-height: 18px;
+                font-size: 9px;
+                margin: 16px 0;
+                opacity: 0;
+                transition: all 0.8s 0.4s;
+            }
+            
+            img {
+                opacity: 0;
+                transition: all 0.8s 0.3s;
+            }
+
+            a {
+                color: white;
+                font-size: 12px;
+                border-bottom: 1px solid white;
+                opacity: 0;
+                transition: all 0.8s 0.5s;
+            }
+        }
+
+        & .wrap_inner {
+            position: absolute;
+            top: calc(50%);
+            text-align: center;
+            position: absolute;
+            left: -69px;
+            right: 0;
+            mix-blend-mode: screen;
+            margin: auto;
+            width: 280px;
+            -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+        }
+    }
+}
+
+.button {
+    position: absolute;
+    z-index: 3;
+    color: white;
+    background: rgba(61, 21, 24, 0.54);
+    display: block;
+    width: 132px;
+    text-align: center;
+    border-radius: 2px;
+    top: 50%;
+    padding: 13px;
+    right: 0;
+    margin: auto;
+    transform: translateY(-50%);
+    font-size: 12px;
+    left: -90px;
+    cursor: pointer;
+    transition: background .7s;
+    &:hover {
+            background: rgb(61, 21, 24);
+    }
+        
+}
+
+/* YAY CSS TRICKS! */
+
+img.a {
+  position: fixed; 
+  top: 0; 
+  left: 0; 
+	
+  /* Preserve aspet ratio */
+  min-width: 100%;
+  min-height: 100%;
+}
+
+#bg {
+  position: fixed; 
+  top: -50%; 
+  left: -50%; 
+  width: 200%; 
+  height: 200%;
+}
+#bg img {
+  position: absolute; 
+  top: 0; 
+  left: 0; 
+  right: 0; 
+  bottom: 0; 
+  margin: auto; 
+  min-width: 50%;
+  min-height: 50%;
+}
\ No newline at end of file
diff --git a/visual-representation-of-color-names-in-different-color-models/LICENSE.txt b/visual-representation-of-color-names-in-different-color-models/LICENSE.txt
new file mode 100644
index 0000000..a98ff5c
--- /dev/null
+++ b/visual-representation-of-color-names-in-different-color-models/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 David Aerne (https://codepen.io/meodai/pen/zdgXJj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/visual-representation-of-color-names-in-different-color-models/README.md b/visual-representation-of-color-names-in-different-color-models/README.md
new file mode 100644
index 0000000..ec04728
--- /dev/null
+++ b/visual-representation-of-color-names-in-different-color-models/README.md
@@ -0,0 +1,5 @@
+# Visual representation of color names in different color models
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/meodai/pen/zdgXJj](https://codepen.io/meodai/pen/zdgXJj).
+
+shows the colors-name distribution for https://github.com/meodai/color-names in different color spaces. Related to issue: https://github.com/meodai/color-names/issues/6
\ No newline at end of file
diff --git a/visual-representation-of-color-names-in-different-color-models/dist/index.html b/visual-representation-of-color-names-in-different-color-models/dist/index.html
new file mode 100644
index 0000000..213c1b3
--- /dev/null
+++ b/visual-representation-of-color-names-in-different-color-models/dist/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Visual representation of color names in different color models</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<a class="github-corner" href="//github.com/meodai/color-names" target="_blank" aria-label="View source on Github">
+  <svg width="80" height="80" viewbox="0 0 250 250" aria-hidden="true">
+    <path class="triange" d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+    <path class="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" style="transform-origin: 130px 106px;"></path>
+    <path class="octo-body" d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"></path>
+  </svg></a>
+<div class="options">
+  <label><span class="label">List</span>
+    <select data-list="data-list">
+      <option value="default">Color Name List</option>
+      <option value="bestOf">Best of</option>
+      <option value="basic">Basic Colors</option>
+      <option value="html">HTML / CSS</option>
+      <option value="wikipedia">Wikipedia</option>
+      <option value="french">French Colors</option>
+      <option value="japaneseTraditional">Japanese Traditional</option>
+      <option value="chineseTraditional">Chinese Traditional</option>
+      <option value="leCorbusier">Le Corbusier</option>
+      <option value="nbsIscc">NBS-ISCC</option>
+      <option value="ntc">NTC.js</option>
+      <option value="osxcrayons">OSX Crayon</option>
+      <option value="ral">RAL color</option>
+      <option value="ridgway">Ridgway's Nomenclature </option>
+      <option value="sanzoWadaI">Sanzo Wada</option>
+      <option value="thesaurus">Thesaurus</option>
+      <option value="werner">Werner's Nomenclature</option>
+      <option value="windows">MS Windows</option>
+      <option value="x11">x11</option>
+      <option value="xkcd">xkcd survey</option>
+    </select>
+  </label>
+  <label><span class="label">Model</span>
+    <select data-model="data-model">
+      <option value="rgb">rgb</option>
+      <option value="xyz">xyz</option>
+      <option value="cat02">cat02</option>
+      <option value="jab">jab</option>
+      <option value="luv">luv</option>
+      <option value="yuv">yuv</option>
+      <option value="lab">lab</option>
+      <option value="oklab">OK lab</option>
+      <option value="lch">lch</option>
+      <option value="hsv">hsv</option>
+      <option value="hsl">hsl</option>
+      <option value="hsi">hsi</option>
+      <option value="hwb">hwb</option>
+      <option value="hcg">hcg</option>
+    </select>
+  </label>
+</div>
+<button> <span>toggle darkmode</span><strong>
+    <svg xmlns="http://www.w3.org/2000/svg" width="184" height="184" viewBox="0 0 184 184">
+      <g>
+        <path class="line" d="M43.27,54.49A7.93,7.93,0,0,0,54.49,43.27l-8.33-8.33A7.93,7.93,0,0,0,34.95,46.16Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M159.45,167.38a7.93,7.93,0,0,0,5.61-13.54l-8.33-8.33a7.93,7.93,0,0,0-11.21,11.21l8.33,8.33A7.9,7.9,0,0,0,159.45,167.38Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M46.16,165.05l8.33-8.33a7.93,7.93,0,1,0-11.21-11.21l-8.33,8.33a7.93,7.93,0,1,0,11.21,11.21Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M151.12,56.81a7.91,7.91,0,0,0,5.61-2.32l8.33-8.33a7.93,7.93,0,0,0-11.21-11.21l-8.33,8.33a7.93,7.93,0,0,0,5.61,13.54Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M15.93,107.93H27.71a7.93,7.93,0,0,0,0-15.86H15.93a7.93,7.93,0,0,0,0,15.86Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M164.36,100a7.93,7.93,0,0,0,7.93,7.93h11.78a7.93,7.93,0,0,0,0-15.86H172.29A7.93,7.93,0,0,0,164.36,100Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M100,164.36a7.93,7.93,0,0,0-7.93,7.93v11.78a7.93,7.93,0,0,0,15.86,0V172.29A7.93,7.93,0,0,0,100,164.36Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M100,35.64a7.93,7.93,0,0,0,7.93-7.93V15.93a7.93,7.93,0,0,0-15.86,0V27.71A7.93,7.93,0,0,0,100,35.64Z" transform="translate(-8 -8)"/>
+        <path class="circle" d="M100,153.09A53.09,53.09,0,1,0,46.91,100,53.15,53.15,0,0,0,100,153.09Zm0-90.33A37.23,37.23,0,1,1,62.77,100,37.27,37.27,0,0,1,100,62.77Z" transform="translate(-8 -8)"/>
+      </g>
+    </svg>
+    </strong></button>
+<div class="currentColor"></div>
+<div id="container"></div>
+<!-- partial -->
+  <script src='https://cdn.jsdelivr.net/npm/ac-colors@1/dist/ac-colors.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js'></script><script type="module" src="./script.js"></script>
+
+</body>
+</html>
diff --git a/visual-representation-of-color-names-in-different-color-models/dist/script.js b/visual-representation-of-color-names-in-different-color-models/dist/script.js
new file mode 100644
index 0000000..e399470
--- /dev/null
+++ b/visual-representation-of-color-names-in-different-color-models/dist/script.js
@@ -0,0 +1,588 @@
+console.clear();
+
+import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/build/three.module.js';
+import { OrbitControls } from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/controls/OrbitControls.js';
+
+let cam,scene,root,renderer,controls,layers,
+objects = [],cubeSize = 100,dotSize = 1.25,
+width = window.innerWidth + 1,
+height = window.innerHeight + 1,
+$select = document.querySelector('[data-model]'),
+$selectList = document.querySelector('[data-list]'),
+cDark = '#202124',cLight = '#ffffff',
+bg = cDark,colorMode = 'rgb',spaceCube,isDark = true;
+
+const colorModes = {
+  hsv: {
+    func: 'hsv',
+    x: [0, 360],
+    y: [1, 1],
+    z: [2, 1] },
+
+  hsi: {
+    func: 'hsi',
+    x: [0, 360],
+    y: [1, 1],
+    z: [2, 1] },
+
+  hsl: {
+    func: 'hsl',
+    x: [0, 360],
+    y: [1, 1],
+    z: [2, 1] },
+
+  rgb: {
+    func: 'rgb',
+    x: [0, 255],
+    y: [1, 255],
+    z: [2, 255] },
+
+  xyz: {
+    func: 'xyz',
+    x: [0, 95.047],
+    y: [1, 100],
+    z: [2, 108.883] },
+
+  'cat02': {
+    func: 'cat02',
+    x: [0, 95.047],
+    y: [1, 104],
+    z: [2, 108.883] },
+
+  jab: {
+    func: 'jzazbz',
+    x: [0, .2],
+    y: [1, .16, -.16],
+    z: [2, .16, -.16] },
+
+  luv: {
+    func: 'luv',
+    x: [0, 100],
+    y: [1, 224, -134],
+    z: [2, 122, -140] },
+
+  lab: {
+    func: 'lab',
+    z: [0, 100],
+    y: [1, 127, -128],
+    x: [2, 127, -128] },
+
+  oklab: {
+    func: 'oklab',
+    z: [0, 1],
+    y: [1, .3, -.3],
+    x: [2, .35, -.35] },
+
+  lch: {
+    func: 'lch',
+    z: [0, 100],
+    y: [1, 100],
+    x: [2, 0, 360] },
+
+  yuv: {
+    func: 'yuv',
+    z: [0, 255],
+    y: [1, 255],
+    x: [2, 255] },
+
+  hwb: {
+    func: 'hwb',
+    x: [0, 360],
+    y: [1, 1],
+    z: [2, 1] },
+
+  hcg: {
+    func: 'hcg',
+    x: [0, 360],
+    y: [1, 1],
+    z: [2, 1] } };
+
+
+
+init();
+
+function onWindowResize() {
+  width = window.innerWidth + 1;
+  height = window.innerHeight + 1;
+  cam.aspect = width / height;
+  cam.updateProjectionMatrix();
+  renderer.setSize(width, height);
+}
+
+let colorList = [];
+/*
+const xhr = new XMLHttpRequest();
+xhr.open('GET', 'https://unpkg.com/color-name-list/dist/colornames.json');
+xhr.onload = e => {
+  if (xhr.status === 200) {
+    colorList = JSON.parse(xhr.responseText);
+    addParticles(colorList, colorMode);
+  } else {
+    console.log(xhr.status);
+  }
+};
+xhr.send();*/
+
+function fetchList(listname = 'default') {
+  fetch(`https://api.color.pizza/v1/?list=${listname}`).then(d => d.json()).then(d => {
+    colorList = d.colors;
+    addParticles(colorList, colorMode);
+  });
+}
+
+fetchList();
+
+let part;
+
+function createCanvasMaterial(color, size = 256) {
+  var matCanvas = document.createElement('canvas');
+  matCanvas.width = matCanvas.height = size;
+  var matContext = matCanvas.getContext('2d');
+  // create exture object from canvas.
+  var texture = new THREE.Texture(matCanvas);
+  // Draw a circle
+  var center = size / 2;
+
+  matContext.beginPath();
+  matContext.arc(center, center, size / 2, 0, 2 * Math.PI, false);
+  matContext.closePath();
+  matContext.fillStyle = color;
+  matContext.fill();
+  // need to set needsUpdate
+  texture.needsUpdate = true;
+  // return a texture made from the canvas
+  return texture;
+}
+
+let pMaterial, particles;
+
+function addParticles(colorNames, cMode) {
+  // create the particle variables
+  const particleCount = colorNames.length;
+
+  if (particles) {
+    particles.dispose();
+  }
+
+  particles = new THREE.Geometry();
+
+  if (pMaterial) {
+    pMaterial.dispose();
+  }
+
+  dotSize = 255 / Math.sqrt(colorNames.length / 3) * .4;
+  dotSize = Math.max(Math.min(dotSize, 4), 1.25);
+
+  pMaterial = new THREE.PointsMaterial({
+    vertexColors: THREE.VertexColors,
+    size: dotSize,
+    alphaMap: createCanvasMaterial('#ffffff', dotSize * 100),
+    flatShading: true,
+    //fog: false,
+    //depthWrite: false,
+    transparent: true,
+    alphaTest: .5
+    //sizeAttenuation: true,
+  });
+
+
+  let colors = [];
+
+  const mode = colorModes[cMode];
+
+  colorNames.forEach((col, i) => {
+    let colorComp;
+    let color = new Color({
+      "color": col.hex,
+      "type": "hex" });
+
+
+    if (mode.func === 'oklab') {
+      colorComp = linear_srgb_to_oklab(chroma(col.hex).rgb());
+    } else if (mode.func === 'yuv') {
+      colorComp = yuv(chroma(col.hex).rgb());
+    } else if (mode.func === "luv") {
+      colorComp = color.luv;
+    } else if (mode.func === "xyz" || mode.func === "cat02" || mode.func === "jzazbz") {
+
+      colorComp = color.xyz;
+
+      if (mode.func === "jzazbz") {
+        colorComp = Jzazbz(colorComp);
+      }
+
+      if (mode.func === "cat02") {
+        colorComp = xyz2cat02(colorComp);
+      }
+
+    } else if (mode.func === 'hwb') {
+      const [hsvH, hsvS, hsvV] = chroma(col.hex).hsv();
+      colorComp = [
+      hsvH,
+      (1 - hsvS) * hsvV,
+      1 - hsvV];
+
+    } else {
+      colorComp = chroma(col.hex)[mode.func]();
+      if (mode.func === 'hcg') {
+        colorComp = [colorComp[0], colorComp[1] / 100, colorComp[2] / 100];
+      }
+    }
+
+
+
+    let pX = translate(colorComp[mode.x[0]], mode.x[2] || 0, mode.x[1], -cubeSize * .5, cubeSize * .5),
+    pY = translate(colorComp[mode.y[0]], mode.y[2] || 0, mode.y[1], -cubeSize * .5, cubeSize * .5),
+    pZ = translate(colorComp[mode.z[0]], mode.z[2] || 0, mode.z[1], -cubeSize * .5, cubeSize * .5);
+
+    if (mode.func === 'hsl' || mode.func === 'hsv' || mode.func === 'hsi' || mode.func === 'hcg') {
+      let theta = Math.PI * colorComp[mode.x[0]] / 180;
+      let r = colorComp[mode.y[0]] * cubeSize;
+
+      if (mode.func === 'hsi') {
+        r *= colorComp[mode.z[0]] * 0.75;
+      } else if (mode.func === 'hsv') {
+        r *= colorComp[mode.z[0]] * 0.5;
+      } else if (mode.func === 'hcg') {
+        r *= .5;
+      } else {
+        r *= colorComp[mode.z[0]] < 0.5 ? colorComp[mode.z[0]] : 1 - colorComp[mode.z[0]];
+      }
+
+      pY = r * Math.cos(theta);
+      pX = r * Math.sin(theta);
+    }
+
+
+    if (mode.func === 'lch') {
+      let theta = Math.PI * colorComp[mode.x[0]] / 180;
+      let r = translate(colorComp[mode.y[0]], 0, mode.y[1], 0, cubeSize * .5);
+
+      pY = r * Math.cos(theta);
+      pX = r * Math.sin(theta);
+    }
+
+
+    let particle = new THREE.Vector3(pX, pY, pZ),
+    Tcolor = new THREE.Color(col.hex);
+
+    colors.push(Tcolor);
+
+    // add it to the geometry
+    particles.vertices.push(particle);
+  });
+
+
+  // create the particle system
+  const particleSystem = new THREE.Points(
+  particles,
+  pMaterial);
+
+
+  particleSystem.name = 'colors';
+  particles.colors = colors;
+
+  // add it to the scene
+  objects.push(particleSystem);
+  scene.add(particleSystem);
+  part = particleSystem;
+}
+
+renderer.render(scene, cam);
+
+
+animate();
+
+function setSceneColor(color) {
+  scene.background = new THREE.Color(color);
+  scene.fog = new THREE.Fog(color, 150, 300); //new THREE.FogExp2(0x000000, 0.0007);
+}
+/*
+var aspect = window.innerWidth / window.innerHeight;
+var d = 20;
+camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 1000 );
+
+camera.position.set( 20, 20, 20 ); // all components equal
+camera.lookAt( scene.position ); // or the origin
+*/
+
+function init() {
+  cam = new THREE.PerspectiveCamera(75, width / height, 1, 500);
+  cam.position.z = cubeSize * 1.5;
+  scene = new THREE.Scene();
+  setSceneColor(bg);
+  root = new THREE.Object3D();
+
+  renderer = new THREE.WebGLRenderer({ antialias: true });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(width, height);
+
+  addCube();
+
+  controls = new OrbitControls(cam, renderer.domElement);
+  // controls.addEventListener( 'change', render ); // remove when using animation loop
+  // enable animation loop when using damping or autorotation
+  controls.enableDamping = true;
+  controls.dampingFactor = .75;
+  controls.enableZoom = true;
+  controls.zoomSpeed = .25;
+  controls.autoRotate = true;
+  controls.autoRotateSpeed = 2.0;
+  controls.maxDistance = cubeSize * 1.75;
+  controls.maxPolarAngle = Math.PI * 4;
+  //controls.minPolarAngle = 0;
+  controls.maxAzimuthAngle = Infinity;
+  controls.minAzimuthAngle = -Infinity;
+
+  controls.noPan = true;
+  controls.noKeys = true;
+  //controls.noZoom = true;
+
+  const container = document.querySelector('#container');
+  container.appendChild(renderer.domElement);
+
+  window.addEventListener('resize', onWindowResize, false);
+
+  document.querySelector('button').addEventListener('click', toggleDarkMode, false);
+}
+
+function toggleDarkMode() {
+  isDark = !isDark;
+
+  document.querySelector('body').classList.toggle('isDark');
+  var newColor = isDark ? cDark : cLight;
+
+  setSceneColor(newColor);
+  var colorspace = scene.getObjectByName('colorspace');
+  scene.remove(colorspace);
+  addCube(isDark ? '#ffffff' : cDark);
+
+  document.documentElement.style.setProperty('--background', newColor);
+  document.documentElement.style.setProperty('--foreground', isDark ? '#ffffff' : cDark);
+}
+
+function addCube(color) {
+  let geometryCube = cube(cubeSize);
+  //geometryCube.computeLineDistances();
+  const material = new THREE.LineBasicMaterial({
+    color: color || 0xffffff,
+    linewidth: 1,
+    linecap: 'round', //ignored by WebGLRenderer
+    linejoin: 'round' //ignored by WebGLRenderer
+  });
+
+  const colorspace = new THREE.LineSegments(
+  geometryCube,
+  material);
+
+
+  colorspace.name = 'colorspace';
+
+  objects.push(colorspace);
+  scene.add(colorspace);
+
+  spaceCube = colorspace;
+}
+
+function cube(size) {
+  const h = size * 0.5;
+  const geometry = new THREE.Geometry();
+
+  geometry.vertices.push(
+  new THREE.Vector3(-h, -h, -h),
+  new THREE.Vector3(-h, h, -h),
+  new THREE.Vector3(-h, h, -h),
+  new THREE.Vector3(h, h, -h),
+  new THREE.Vector3(h, h, -h),
+  new THREE.Vector3(h, -h, -h),
+  new THREE.Vector3(h, -h, -h),
+  new THREE.Vector3(-h, -h, -h),
+  new THREE.Vector3(-h, -h, h),
+  new THREE.Vector3(-h, h, h),
+  new THREE.Vector3(-h, h, h),
+  new THREE.Vector3(h, h, h),
+  new THREE.Vector3(h, h, h),
+  new THREE.Vector3(h, -h, h),
+  new THREE.Vector3(h, -h, h),
+  new THREE.Vector3(-h, -h, h),
+  new THREE.Vector3(-h, -h, -h),
+  new THREE.Vector3(-h, -h, h),
+  new THREE.Vector3(-h, h, -h),
+  new THREE.Vector3(-h, h, h),
+  new THREE.Vector3(h, h, -h),
+  new THREE.Vector3(h, h, h),
+  new THREE.Vector3(h, -h, -h),
+  new THREE.Vector3(h, -h, h));
+
+
+  return geometry;
+}
+
+
+function render() {
+  const time = Date.now() * 0.0001;
+  renderer.render(scene, cam);
+  //controls.update();
+  objects.forEach(object => {
+    //object.rotation.x = 0.25 * time * ( i%2 == 1 ? 1 : -1);
+    object.rotation.x = 0.25 * time;
+    object.rotation.y = 0.25 * time;
+  });
+}
+
+function animate() {
+  requestAnimationFrame(animate);
+  render();
+}
+
+
+$select.addEventListener('change', e => {
+  colorMode = $select.value;
+  objects = [];
+  const colorspace = scene.getObjectByName('colorspace');
+  scene.remove(colorspace);
+  const colors = scene.getObjectByName('colors');
+  scene.remove(colors);
+  addParticles(colorList, colorMode);
+  addCube(isDark ? cLight : cDark);
+}, false);
+
+$selectList.addEventListener('change', e => {
+  const listName = $selectList.value;
+  objects = [];
+  const colorspace = scene.getObjectByName('colorspace');
+  scene.remove(colorspace);
+  const colors = scene.getObjectByName('colors');
+  scene.remove(colors);
+  fetchList(listName);
+  //addParticles(colorList, colorMode);
+  addCube(isDark ? cLight : cDark);
+}, false);
+
+function translate(value, low1, high1, low2, high2) {
+  return low2 + (high2 - low2) * ((value - low1) / (high1 - low1));
+}
+
+const PQ = function perceptual_quantizer(X) {
+  const XX = Math.pow(X * 1e-4, 0.1593017578125);
+  return Math.pow(
+  (0.8359375 + 18.8515625 * XX) / (1 + 18.6875 * XX),
+  134.034375);
+};
+
+function Jzazbz([X, Y, Z]) {
+  const
+  Lp = PQ(0.674207838 * X + 0.382799340 * Y - 0.047570458 * Z),
+  Mp = PQ(0.149284160 * X + 0.739628340 * Y + 0.083327300 * Z),
+  Sp = PQ(0.070941080 * X + 0.174768000 * Y + 0.670970020 * Z),
+  Iz = 0.5 * (Lp + Mp),
+  az = 3.524000 * Lp - 4.066708 * Mp + 0.542708 * Sp,
+  bz = 0.199076 * Lp + 1.096799 * Mp - 1.295875 * Sp,
+  Jz = 0.44 * Iz / (1 - 0.56 * Iz) - 1.6295499532821566e-11;
+  return [Jz, az, bz];
+}
+
+function cat022hpe(l, m, s) {
+  var lh = 0.7409792 * l + 0.2180250 * m + 0.0410058 * s,
+  mh = 0.2853532 * l + 0.6242014 * m + 0.0904454 * s,
+  sh = -0.0096280 * l - 0.0056980 * m + 1.0153260 * s;
+
+  return { lh: lh, mh: mh, sh: sh };
+}
+
+function xyz2cat02([x, y, z]) {
+
+  const l = 0.7328 * x + 0.4296 * y - 0.1624 * z,
+  m = -0.7036 * x + 1.6975 * y + 0.0061 * z,
+  s = 0.0030 * x + 0.0136 * y + 0.9834 * z;
+
+  return [l, m, s];
+}
+
+function yuv(rgb) {
+  return [
+  /*Y*/rgb[0] * .299000 + rgb[1] * .587000 + rgb[2] * .114000,
+  /*U*/rgb[0] * -.168736 + rgb[1] * -.331264 + rgb[2] * .500000 + 128,
+  /*V*/rgb[0] * .500000 + rgb[1] * -.418688 + rgb[2] * -.081312 + 128];
+
+}
+
+function f(x)
+{
+  if (x >= 0.0031308)
+  return 1.055 * x ^ 1.0 / 2.4 - 0.055;else
+
+  return 12.92 * x;
+}
+
+function linear_srgb_to_oklab(rgb)
+{
+  rgb = rgb.map(comp => comp / 255);
+
+  let l = 0.4121656120 * rgb[0] + 0.5362752080 * rgb[1] + 0.0514575653 * rgb[2];
+  let m = 0.2118591070 * rgb[0] + 0.6807189584 * rgb[1] + 0.1074065790 * rgb[2];
+  let s = 0.0883097947 * rgb[0] + 0.2818474174 * rgb[1] + 0.6302613616 * rgb[2];
+
+  l = Math.cbrt(l);
+  m = Math.cbrt(m);
+  s = Math.cbrt(s);
+
+  return [
+  0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
+  1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
+  0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s];
+
+}
+
+let rayCaster = new THREE.Raycaster();
+
+document.querySelector('body').addEventListener('mousemove', onDocumentMouseMove);
+
+const $currentColor = document.querySelector('.currentColor');
+
+let currentColorTimer;
+
+function showColor(name, hex) {
+  clearTimeout(currentColorTimer);
+  $currentColor.innerHTML = `<div><h2>${name}</h2><span>${hex}</span></div>`;
+  $currentColor.style = `--color: ${hex}`;
+  currentColorTimer = setTimeout(() => {
+    $currentColor.innerHTML = '';
+  }, 3000);
+}
+
+// Highlight a color name using a raycaster at some point
+function onDocumentMouseMove(event) {
+  let mousePosition = {};
+  event.preventDefault();
+  mousePosition.x = event.clientX / renderer.domElement.clientWidth * 2 - 1;
+  mousePosition.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
+  rayCaster.setFromCamera(mousePosition, cam);
+  var intersects = rayCaster.intersectObjects([scene.getObjectByName('colors')], false);
+  if (intersects.length > 0) {
+    var descriptions = [];
+    for (var i = 0; i < intersects.length; i++) {
+      //Only display those points we can SEE due to the near clipping plane.
+      //Without this check, the ray caster will list them all, even if they're clipped by the near plane.
+      //".distance" is relative to the camera, not absolute world units.
+      if (intersects[i].distance > cam.near) {
+        var description = "  " + colorList[intersects[i].index].name + ", ";
+        description += "  " + colorList[intersects[i].index].hex + ", ";
+        description += "  Distance: " + intersects[i].distance.toFixed(2) + ", ";
+        description += "  Ray to point dist: " + intersects[i].distanceToRay.toFixed(2) + ", ";
+        description += "  Index: " + intersects[i].index + ", ";
+        description += "  Coords: [" + intersects[i].point.x.toFixed(2) + ", " + intersects[i].point.y.toFixed(2) + ", " + intersects[i].point.z.toFixed(2) + "]";
+        descriptions.push(description);
+
+        showColor(colorList[intersects[i].index].name, colorList[intersects[i].index].hex);
+        break;
+      }
+
+      if (descriptions.length > 0) {
+        console.log("Mouse pointer intersected the following points, closest to furthest: ");
+        for (var v = 0; v < descriptions.length; v++)
+        console.log(descriptions[v]);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/visual-representation-of-color-names-in-different-color-models/dist/style.css b/visual-representation-of-color-names-in-different-color-models/dist/style.css
new file mode 100644
index 0000000..501e400
--- /dev/null
+++ b/visual-representation-of-color-names-in-different-color-models/dist/style.css
@@ -0,0 +1,204 @@
+@charset "UTF-8";
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200&display=swap");
+:root {
+  --dark: $c-black;
+  --light: $c-white;
+  --background: var($c-black);
+  --foreground: var($c-white);
+}
+
+body {
+  overflow: hidden;
+  background: #202124;
+  background: var(--background);
+  font-family: "Inter", sans-serif;
+  color: #fff;
+  color: var(--foreground, #fff);
+}
+
+.github-corner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate3d(0, 0, 0);
+  transition: 333ms transform cubic-bezier(0.7, 0.3, 0.25, 1.15) 1200ms;
+  will-change: transform;
+}
+.github-corner svg {
+  width: 4rem;
+  height: 4rem;
+}
+.github-corner path {
+  will-chrange: fill;
+}
+.github-corner .octo-arm,
+.github-corner .octo-body {
+  fill: #202124;
+  fill: var(--background, #202124);
+}
+.github-corner .triange {
+  fill: #fff;
+  fill: var(--foreground, #fff);
+}
+
+.github-corner:hover .octo-arm {
+  -webkit-animation: octocat-wave 560ms ease-in-out;
+          animation: octocat-wave 560ms ease-in-out;
+}
+
+@-webkit-keyframes octocat-wave {
+  0%, 100% {
+    transform: rotate(0);
+  }
+  20%, 60% {
+    transform: rotate(-25deg);
+  }
+  40%, 80% {
+    transform: rotate(10deg);
+  }
+}
+
+@keyframes octocat-wave {
+  0%, 100% {
+    transform: rotate(0);
+  }
+  20%, 60% {
+    transform: rotate(-25deg);
+  }
+  40%, 80% {
+    transform: rotate(10deg);
+  }
+}
+@media (max-width: 500px) {
+  .github-corner:hover .octo-arm {
+    -webkit-animation: none;
+            animation: none;
+  }
+
+  .github-corner .octo-arm {
+    -webkit-animation: octocat-wave 560ms ease-in-out;
+            animation: octocat-wave 560ms ease-in-out;
+  }
+}
+button,
+select {
+  position: absolute;
+  font-family: "Inter", sans-serif;
+  box-sizing: border-box;
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  color: #fff;
+  color: var(--foreground, #fff);
+  background-color: transparent;
+  cursor: pointer;
+}
+
+select {
+  position: relative;
+}
+
+.options {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding: 1rem;
+}
+
+button {
+  bottom: 1rem;
+  left: 1rem;
+  padding: 0;
+  outline: none;
+  padding: 0 0 0.5em 0.3em;
+}
+button span {
+  display: none;
+}
+button stonrg {
+  display: block;
+}
+button svg {
+  display: block;
+  width: 2rem;
+  height: 2rem;
+}
+button path {
+  fill: currentColor;
+}
+button .line {
+  display: none;
+}
+
+.isDark button .line {
+  display: block;
+}
+
+select {
+  font-size: 1.5rem;
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  border-radius: 0;
+  color: turquoise;
+  padding: 0.25em 1.2em 0.25em 0.3em;
+  background-color: rgba(32, 33, 36, 0.5);
+  background-size: auto 25%;
+  background-repeat: no-repeat;
+  background-position: calc(100% - .7rem) 55%;
+  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%20%3C%21--%20Generator%3A%20IcoMoon.io%20--%3E%20%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%20%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M%2096.00%2C96.00l-96.00%2C96.00l%20256.00%2C256.00l%20256.00-256.00l-96.00-96.00L%20256.00%2C256.00L%2096.00%2C96.00z%22%20%3E%3C/path%3E%3C/svg%3E");
+  transition: 150ms background-color;
+}
+select:focus {
+  outline: none;
+}
+select:hover {
+  background-color: rgba(32, 33, 36, 0.8);
+}
+
+label {
+  display: inline-block;
+}
+
+@media (max-width: 480px) {
+  button {
+    left: auto;
+    right: 1rem;
+    bottom: 7rem;
+  }
+
+  select,
+label {
+    width: 100%;
+  }
+}
+.label {
+  font-size: 0.7em;
+  display: block;
+  padding: 0 0.5em;
+}
+
+.currentColor {
+  pointer-events: none;
+  position: absolute;
+  left: 1.5rem;
+  top: 1rem;
+  text-shadow: 0 1px 10px #202124;
+}
+.currentColor h2 {
+  margin: 0;
+}
+.currentColor span {
+  display: block;
+  margin-top: 0.1em;
+}
+.currentColor span::before {
+  position: relative;
+  top: -0.2em;
+  display: inline-block;
+  margin-right: 0.25em;
+  color: var(--color);
+  content: "⬤";
+  font-size: 0.9em;
+}
\ No newline at end of file
diff --git a/visual-representation-of-color-names-in-different-color-models/src/index.pug b/visual-representation-of-color-names-in-different-color-models/src/index.pug
new file mode 100644
index 0000000..695f0d2
--- /dev/null
+++ b/visual-representation-of-color-names-in-different-color-models/src/index.pug
@@ -0,0 +1,69 @@
+a.github-corner(href='//github.com/meodai/color-names', target='_blank', aria-label='View source on Github')
+  svg(width='80', height='80', viewbox='0 0 250 250', aria-hidden='true')
+    path.triange(d='M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z')
+    path.octo-arm(d='M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2', style='transform-origin: 130px 106px;')
+    path.octo-body(d='M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z')
+.options
+  label
+    span.label List
+    select(data-list)
+      option(value="default") Color Name List
+      option(value="bestOf") Best of
+      option(value="basic") Basic Colors
+      option(value="html") HTML / CSS
+      option(value="wikipedia") Wikipedia
+      option(value="french") French Colors
+      option(value="japaneseTraditional") Japanese Traditional
+      option(value="chineseTraditional") Chinese Traditional
+      option(value="leCorbusier") Le Corbusier
+      option(value="nbsIscc") NBS-ISCC
+      option(value="ntc") NTC.js
+      option(value="osxcrayons") OSX Crayon
+      option(value="ral") RAL color
+      option(value="ridgway") Ridgway's Nomenclature 
+      option(value="sanzoWadaI") Sanzo Wada
+      option(value="thesaurus") Thesaurus
+      option(value="werner") Werner's Nomenclature
+      option(value="windows") MS Windows
+      option(value="x11") x11
+      option(value="xkcd") xkcd survey
+      
+  
+  label
+    span.label Model
+    select(data-model)
+      option(value="rgb") rgb
+      option(value="xyz") xyz
+      option(value="cat02") cat02
+      option(value="jab") jab
+      option(value="luv") luv
+      option(value="yuv") yuv
+      option(value="lab") lab
+      option(value="oklab") OK lab
+      option(value="lch") lch
+      option(value="hsv") hsv
+      option(value="hsl") hsl
+      option(value="hsi") hsi
+      option(value="hwb") hwb
+      option(value="hcg") hcg
+      
+button 
+  span toggle darkmode
+  strong.
+    <svg xmlns="http://www.w3.org/2000/svg" width="184" height="184" viewBox="0 0 184 184">
+      <g>
+        <path class="line" d="M43.27,54.49A7.93,7.93,0,0,0,54.49,43.27l-8.33-8.33A7.93,7.93,0,0,0,34.95,46.16Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M159.45,167.38a7.93,7.93,0,0,0,5.61-13.54l-8.33-8.33a7.93,7.93,0,0,0-11.21,11.21l8.33,8.33A7.9,7.9,0,0,0,159.45,167.38Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M46.16,165.05l8.33-8.33a7.93,7.93,0,1,0-11.21-11.21l-8.33,8.33a7.93,7.93,0,1,0,11.21,11.21Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M151.12,56.81a7.91,7.91,0,0,0,5.61-2.32l8.33-8.33a7.93,7.93,0,0,0-11.21-11.21l-8.33,8.33a7.93,7.93,0,0,0,5.61,13.54Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M15.93,107.93H27.71a7.93,7.93,0,0,0,0-15.86H15.93a7.93,7.93,0,0,0,0,15.86Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M164.36,100a7.93,7.93,0,0,0,7.93,7.93h11.78a7.93,7.93,0,0,0,0-15.86H172.29A7.93,7.93,0,0,0,164.36,100Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M100,164.36a7.93,7.93,0,0,0-7.93,7.93v11.78a7.93,7.93,0,0,0,15.86,0V172.29A7.93,7.93,0,0,0,100,164.36Z" transform="translate(-8 -8)"/>
+        <path class="line" d="M100,35.64a7.93,7.93,0,0,0,7.93-7.93V15.93a7.93,7.93,0,0,0-15.86,0V27.71A7.93,7.93,0,0,0,100,35.64Z" transform="translate(-8 -8)"/>
+        <path class="circle" d="M100,153.09A53.09,53.09,0,1,0,46.91,100,53.15,53.15,0,0,0,100,153.09Zm0-90.33A37.23,37.23,0,1,1,62.77,100,37.27,37.27,0,0,1,100,62.77Z" transform="translate(-8 -8)"/>
+      </g>
+    </svg>
+
+.currentColor
+
+#container
diff --git a/visual-representation-of-color-names-in-different-color-models/src/script.js b/visual-representation-of-color-names-in-different-color-models/src/script.js
new file mode 100644
index 0000000..4be3c98
--- /dev/null
+++ b/visual-representation-of-color-names-in-different-color-models/src/script.js
@@ -0,0 +1,589 @@
+console.clear();
+
+import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/build/three.module.js';
+import { OrbitControls } from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/controls/OrbitControls.js';
+
+let cam, scene, root, renderer, controls, layers,
+  objects = [], cubeSize = 100, dotSize = 1.25,
+  width = window.innerWidth + 1,
+  height = window.innerHeight + 1,
+  $select = document.querySelector('[data-model]'),
+  $selectList = document.querySelector('[data-list]'),
+  cDark = '#202124', cLight = '#ffffff',
+  bg = cDark, colorMode = 'rgb', spaceCube, isDark = true;
+
+const colorModes = {
+  hsv: {
+    func: 'hsv',
+    x: [0, 360],
+    y: [1, 1],
+    z: [2, 1]
+  },
+  hsi: {
+    func: 'hsi',
+    x: [0, 360],
+    y: [1, 1],
+    z: [2, 1]
+  },
+  hsl: {
+    func: 'hsl',
+    x: [0, 360],
+    y: [1, 1],
+    z: [2, 1]
+  },
+  rgb: {
+    func: 'rgb',
+    x: [0, 255],
+    y: [1, 255],
+    z: [2, 255]
+  },
+  xyz: {
+    func: 'xyz',
+    x: [0, 95.047],
+    y: [1, 100],
+    z: [2, 108.883]
+  },
+  'cat02': {
+    func: 'cat02',
+    x: [0, 95.047],
+    y: [1, 104],
+    z: [2, 108.883],
+  },
+  jab: {
+    func: 'jzazbz',
+    x: [0, .2],
+    y: [1, .16, -.16],
+    z: [2, .16, -.16],
+  },
+  luv: {
+    func: 'luv',
+    x: [0, 100],
+    y: [1, 224, -134],
+    z: [2, 122, -140],
+  },
+  lab: {
+    func: 'lab',
+    z: [0, 100],
+    y: [1, 127, -128],
+    x: [2, 127, -128]
+  },
+  oklab: {
+    func: 'oklab',
+    z: [0, 1],
+    y: [1, .3, -.3],
+    x: [2, .35, -.35]
+  },
+  lch: {
+    func: 'lch',
+    z: [0, 100],
+    y: [1, 100],
+    x: [2, 0, 360]
+  },
+  yuv: {
+    func: 'yuv',
+    z: [0, 255],
+    y: [1, 255],
+    x: [2, 255]
+  },
+  hwb: {
+    func: 'hwb',
+    x: [0, 360],
+    y: [1, 1],
+    z: [2, 1]
+  },
+  hcg: {
+    func: 'hcg',
+    x: [0, 360],
+    y: [1, 1],
+    z: [2, 1]
+  }
+};
+
+init();
+
+function onWindowResize() {
+  width = window.innerWidth + 1;
+  height = window.innerHeight + 1;
+  cam.aspect = width / height;
+  cam.updateProjectionMatrix();
+  renderer.setSize(width, height);
+}
+
+let colorList = [];
+/*
+const xhr = new XMLHttpRequest();
+xhr.open('GET', 'https://unpkg.com/color-name-list/dist/colornames.json');
+xhr.onload = e => {
+  if (xhr.status === 200) {
+    colorList = JSON.parse(xhr.responseText);
+    addParticles(colorList, colorMode);
+  } else {
+    console.log(xhr.status);
+  }
+};
+xhr.send();*/
+
+function fetchList (listname='default') {
+  fetch(`https://api.color.pizza/v1/?list=${listname}`).then(d => d.json()).then(d => {
+    colorList = d.colors;
+    addParticles(colorList, colorMode);
+  })
+}
+
+fetchList()
+
+let part;
+
+function createCanvasMaterial(color, size = 256) {
+  var matCanvas = document.createElement('canvas');
+  matCanvas.width = matCanvas.height = size;
+  var matContext = matCanvas.getContext('2d');
+  // create exture object from canvas.
+  var texture = new THREE.Texture(matCanvas);
+  // Draw a circle
+  var center = size / 2;
+
+  matContext.beginPath();
+  matContext.arc(center, center, size / 2, 0, 2 * Math.PI, false);
+  matContext.closePath();
+  matContext.fillStyle = color;
+  matContext.fill();
+  // need to set needsUpdate
+  texture.needsUpdate = true;
+  // return a texture made from the canvas
+  return texture;
+}
+
+let pMaterial, particles;
+
+function addParticles(colorNames, cMode) {
+  // create the particle variables
+  const particleCount = colorNames.length;
+  
+  if (particles) {
+    particles.dispose();
+  }
+  
+  particles = new THREE.Geometry();
+  
+  if (pMaterial) {
+    pMaterial.dispose();
+  }
+  
+  dotSize = 255/Math.sqrt(colorNames.length/3) * .4;
+  dotSize = Math.max(Math.min(dotSize, 4), 1.25);
+  
+  pMaterial = new THREE.PointsMaterial({
+    vertexColors: THREE.VertexColors,
+    size: dotSize,
+    alphaMap: createCanvasMaterial('#ffffff', dotSize * 100),
+    flatShading: true,
+    //fog: false,
+    //depthWrite: false,
+    transparent: true,
+    alphaTest: .5,
+    //sizeAttenuation: true,
+  });
+
+
+  let colors = [];
+
+  const mode = colorModes[cMode];
+
+  colorNames.forEach((col, i) => {
+    let colorComp;
+    let color = new Color({
+        "color": col.hex,
+        "type": "hex"
+    });
+    
+    if (mode.func === 'oklab') {
+      colorComp = linear_srgb_to_oklab(chroma(col.hex).rgb());
+    } else if (mode.func === 'yuv') {
+      colorComp = yuv(chroma(col.hex).rgb());
+    } else if (mode.func === "luv") {
+      colorComp = color.luv;
+    } else if (mode.func === "xyz" || mode.func === "cat02" || mode.func === "jzazbz") {
+      
+      colorComp = color.xyz;
+      
+      if (mode.func === "jzazbz") {
+        colorComp = Jzazbz(colorComp);
+      }
+      
+      if (mode.func === "cat02") {
+        colorComp = xyz2cat02(colorComp);  
+      }
+      
+    } else if (mode.func === 'hwb') {
+      const [hsvH, hsvS, hsvV] = chroma(col.hex).hsv();
+      colorComp = [
+        hsvH,
+        (1 - hsvS) * hsvV,
+        1 - hsvV
+      ]
+    } else {
+      colorComp = chroma(col.hex)[mode.func]();
+      if (mode.func === 'hcg') {
+        colorComp = [colorComp[0],colorComp[1] / 100,colorComp[2] / 100];
+      }
+    }
+    
+
+
+    let pX = translate(colorComp[mode.x[0]], mode.x[2] || 0, mode.x[1], -cubeSize * .5, cubeSize * .5),
+        pY = translate(colorComp[mode.y[0]], mode.y[2] || 0, mode.y[1], -cubeSize * .5, cubeSize * .5),
+        pZ = translate(colorComp[mode.z[0]], mode.z[2] || 0, mode.z[1], -cubeSize * .5, cubeSize * .5);
+
+    if (mode.func === 'hsl' || mode.func === 'hsv' || mode.func === 'hsi' || mode.func === 'hcg') {
+      let theta = Math.PI * colorComp[mode.x[0]] / 180;
+      let r = colorComp[mode.y[0]] * cubeSize;
+
+      if (mode.func === 'hsi') {
+        r *= colorComp[mode.z[0]] * 0.75;
+      } else if (mode.func === 'hsv') {
+        r *= colorComp[mode.z[0]] * 0.5;
+      } else if (mode.func === 'hcg') {
+        r *= .5;
+      } else {
+        r *= colorComp[mode.z[0]] < 0.5 ? colorComp[mode.z[0]] : 1 - colorComp[mode.z[0]];
+      }
+
+      pY = r * Math.cos(theta);
+      pX = r * Math.sin(theta);
+    }
+    
+
+    if (mode.func === 'lch') {
+      let theta = Math.PI * colorComp[mode.x[0]] / 180;
+      let r = translate(colorComp[mode.y[0]], 0, mode.y[1], 0, cubeSize * .5);
+
+      pY = r * Math.cos(theta);
+      pX = r * Math.sin(theta);
+    }
+
+
+    let particle = new THREE.Vector3(pX, pY, pZ),
+          Tcolor = new THREE.Color(col.hex);
+
+    colors.push(Tcolor)
+
+    // add it to the geometry
+    particles.vertices.push(particle);
+  });
+
+
+  // create the particle system
+  const particleSystem = new THREE.Points(
+    particles,
+    pMaterial
+  );
+
+  particleSystem.name = 'colors';
+  particles.colors = colors;
+
+  // add it to the scene
+  objects.push(particleSystem)
+  scene.add(particleSystem);
+  part = particleSystem;
+}
+
+renderer.render(scene, cam);
+
+
+animate();
+
+function setSceneColor(color) {
+  scene.background = new THREE.Color(color);
+  scene.fog = new THREE.Fog(color, 150, 300); //new THREE.FogExp2(0x000000, 0.0007);
+}
+/*
+var aspect = window.innerWidth / window.innerHeight;
+var d = 20;
+camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 1000 );
+
+camera.position.set( 20, 20, 20 ); // all components equal
+camera.lookAt( scene.position ); // or the origin
+*/
+
+function init() {
+  cam = new THREE.PerspectiveCamera(75, width / height, 1, 500);
+  cam.position.z = cubeSize * 1.5;
+  scene = new THREE.Scene();
+  setSceneColor(bg)
+  root = new THREE.Object3D();
+
+  renderer = new THREE.WebGLRenderer({ antialias: true });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(width, height);
+
+  addCube();
+
+  controls = new OrbitControls(cam, renderer.domElement);
+  // controls.addEventListener( 'change', render ); // remove when using animation loop
+  // enable animation loop when using damping or autorotation
+  controls.enableDamping = true;
+  controls.dampingFactor = .75;
+  controls.enableZoom = true;
+  controls.zoomSpeed = .25;
+  controls.autoRotate = true;
+  controls.autoRotateSpeed = 2.0;
+  controls.maxDistance = cubeSize * 1.75;
+  controls.maxPolarAngle = Math.PI * 4;
+  //controls.minPolarAngle = 0;
+  controls.maxAzimuthAngle = Infinity;
+  controls.minAzimuthAngle = -Infinity;
+
+  controls.noPan = true;
+  controls.noKeys = true;
+  //controls.noZoom = true;
+
+  const container = document.querySelector('#container');
+  container.appendChild(renderer.domElement);
+
+  window.addEventListener('resize', onWindowResize, false);
+  
+  document.querySelector('button').addEventListener('click', toggleDarkMode, false);
+}
+
+function toggleDarkMode() {
+  isDark = !isDark;
+
+  document.querySelector('body').classList.toggle('isDark');
+  var newColor = isDark ? cDark : cLight;
+
+  setSceneColor(newColor);
+  var colorspace = scene.getObjectByName('colorspace');
+  scene.remove(colorspace);
+  addCube(isDark ? '#ffffff' : cDark);
+
+  document.documentElement.style.setProperty('--background', newColor);
+  document.documentElement.style.setProperty('--foreground', isDark ? '#ffffff' : cDark);
+}
+
+function addCube(color) {
+  let geometryCube = cube(cubeSize);
+  //geometryCube.computeLineDistances();
+  const material = new THREE.LineBasicMaterial({
+    color: color || 0xffffff,
+    linewidth: 1,
+    linecap: 'round', //ignored by WebGLRenderer
+    linejoin: 'round' //ignored by WebGLRenderer
+  });
+  
+  const colorspace = new THREE.LineSegments(
+    geometryCube,
+    material
+  );
+
+  colorspace.name = 'colorspace';
+
+  objects.push(colorspace);
+  scene.add(colorspace);
+
+  spaceCube = colorspace;
+}
+
+function cube(size) {
+  const h = size * 0.5;
+  const geometry = new THREE.Geometry();
+
+  geometry.vertices.push(
+    new THREE.Vector3(-h, -h, -h),
+    new THREE.Vector3(-h, h, -h),
+    new THREE.Vector3(-h, h, -h),
+    new THREE.Vector3(h, h, -h),
+    new THREE.Vector3(h, h, -h),
+    new THREE.Vector3(h, -h, -h),
+    new THREE.Vector3(h, -h, -h),
+    new THREE.Vector3(-h, -h, -h),
+    new THREE.Vector3(-h, -h, h),
+    new THREE.Vector3(-h, h, h),
+    new THREE.Vector3(-h, h, h),
+    new THREE.Vector3(h, h, h),
+    new THREE.Vector3(h, h, h),
+    new THREE.Vector3(h, -h, h),
+    new THREE.Vector3(h, -h, h),
+    new THREE.Vector3(-h, -h, h),
+    new THREE.Vector3(-h, -h, -h),
+    new THREE.Vector3(-h, -h, h),
+    new THREE.Vector3(-h, h, -h),
+    new THREE.Vector3(-h, h, h),
+    new THREE.Vector3(h, h, -h),
+    new THREE.Vector3(h, h, h),
+    new THREE.Vector3(h, -h, -h),
+    new THREE.Vector3(h, -h, h)
+  );
+
+  return geometry;
+}
+
+
+function render() {
+  const time = Date.now() * 0.0001;
+  renderer.render(scene, cam);
+  //controls.update();
+  objects.forEach(object => {
+    //object.rotation.x = 0.25 * time * ( i%2 == 1 ? 1 : -1);
+    object.rotation.x = 0.25 * time;
+    object.rotation.y = 0.25 * time;
+  })
+}
+
+function animate() {
+  requestAnimationFrame(animate);
+  render();
+}
+
+
+$select.addEventListener('change', e => {
+  colorMode = $select.value;
+  objects = [];
+  const colorspace = scene.getObjectByName('colorspace');
+  scene.remove(colorspace);
+  const colors = scene.getObjectByName('colors');
+  scene.remove(colors);
+  addParticles(colorList, colorMode);
+  addCube(isDark ? cLight : cDark);
+}, false);
+
+$selectList.addEventListener('change', e => {
+  const listName = $selectList.value;
+  objects = [];
+  const colorspace = scene.getObjectByName('colorspace');
+  scene.remove(colorspace);
+  const colors = scene.getObjectByName('colors');
+  scene.remove(colors);
+  fetchList(listName);
+  //addParticles(colorList, colorMode);
+  addCube(isDark ? cLight : cDark);
+}, false);
+
+function translate(value, low1, high1, low2, high2) {
+  return low2 + (high2 - low2) * ((value - low1) / (high1 - low1));
+}
+
+const PQ = function perceptual_quantizer(X) {
+  const XX = Math.pow(X*1e-4, 0.1593017578125);
+  return Math.pow(
+    (0.8359375 + 18.8515625*XX) / (1 + 18.6875*XX),
+    134.034375); 
+};
+
+function Jzazbz([X, Y, Z]) {
+  const
+    Lp = PQ(0.674207838*X + 0.382799340*Y - 0.047570458*Z),
+    Mp = PQ(0.149284160*X + 0.739628340*Y + 0.083327300*Z),
+    Sp = PQ(0.070941080*X + 0.174768000*Y + 0.670970020*Z),
+    Iz = 0.5 * (Lp + Mp),
+    az = 3.524000*Lp - 4.066708*Mp + 0.542708*Sp,
+    bz = 0.199076*Lp + 1.096799*Mp - 1.295875*Sp,
+    Jz = (0.44 * Iz) / (1 - 0.56*Iz) - 1.6295499532821566e-11;
+  return [Jz, az, bz];
+}
+
+function cat022hpe(l,m,s) {
+  var lh = ( 0.7409792 * l) + (0.2180250 * m) + (0.0410058 * s),
+      mh = ( 0.2853532 * l) + (0.6242014 * m) + (0.0904454 * s),
+      sh = (-0.0096280 * l) - (0.0056980 * m) + (1.0153260 * s);
+
+  return {lh: lh, mh: mh, sh: sh};
+}
+
+function xyz2cat02([x,y,z]) {
+  
+  const l = ( 0.7328 * x) + (0.4296 * y) - (0.1624 * z),
+        m = (-0.7036 * x) + (1.6975 * y) + (0.0061 * z),
+        s = ( 0.0030 * x) + (0.0136 * y) + (0.9834 * z);
+  
+  return [l, m, s];
+}
+
+function yuv(rgb) {
+  return [
+    /*Y*/ rgb[0] * .299000 + rgb[1] * .587000 + rgb[2] * .114000,
+    /*U*/ rgb[0] * -.168736 + rgb[1] * -.331264 + rgb[2] * .500000 + 128,
+    /*V*/ rgb[0] * .500000 + rgb[1] * -.418688 + rgb[2] * -.081312 + 128
+  ]
+}
+
+function f(x)
+{
+    if (x >= 0.0031308)
+        return (1.055) * x^(1.0/2.4) - 0.055
+    else
+        return 12.92 * x;
+}
+
+function linear_srgb_to_oklab(rgb) 
+{
+  rgb = rgb.map(comp => comp / 255);
+  
+  let l = 0.4121656120 * rgb[0] + 0.5362752080 * rgb[1] + 0.0514575653 * rgb[2];
+  let m = 0.2118591070 * rgb[0] + 0.6807189584 * rgb[1] + 0.1074065790 * rgb[2];
+  let s = 0.0883097947 * rgb[0] + 0.2818474174 * rgb[1] + 0.6302613616 * rgb[2];
+
+  l = Math.cbrt(l);
+  m = Math.cbrt(m);
+  s = Math.cbrt(s);
+
+  return [
+    (0.2104542553*l + 0.7936177850*m - 0.0040720468*s),
+    (1.9779984951*l - 2.4285922050*m + 0.4505937099*s),
+    (0.0259040371*l + 0.7827717662*m - 0.8086757660*s),
+  ];
+}
+
+let rayCaster = new THREE.Raycaster();
+
+document.querySelector('body').addEventListener('mousemove', onDocumentMouseMove);
+
+const $currentColor = document.querySelector('.currentColor');
+
+let currentColorTimer;
+
+function showColor(name, hex) {
+  clearTimeout(currentColorTimer);
+  $currentColor.innerHTML = `<div><h2>${name}</h2><span>${hex}</span></div>`
+  $currentColor.style = `--color: ${hex}`;
+  currentColorTimer = setTimeout(() => {
+    $currentColor.innerHTML = '';
+  }, 3000);
+}
+
+// Highlight a color name using a raycaster at some point
+function onDocumentMouseMove(event) {
+  let mousePosition = {};
+  event.preventDefault();
+  mousePosition.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
+  mousePosition.y = - (event.clientY / renderer.domElement.clientHeight) * 2 + 1;
+  rayCaster.setFromCamera(mousePosition, cam);
+  var intersects = rayCaster.intersectObjects([scene.getObjectByName('colors')], false);
+  if (intersects.length > 0) {
+    var descriptions = [];
+    for (var i = 0; i < intersects.length; i++) {
+      //Only display those points we can SEE due to the near clipping plane.
+      //Without this check, the ray caster will list them all, even if they're clipped by the near plane.
+      //".distance" is relative to the camera, not absolute world units.
+      if (intersects[i].distance > cam.near) {
+        var description = "  " + colorList[intersects[i].index].name + ", ";
+        description += "  " + colorList[intersects[i].index].hex + ", ";
+        description += "  Distance: " + intersects[i].distance.toFixed(2) + ", ";
+        description += "  Ray to point dist: " + intersects[i].distanceToRay.toFixed(2) + ", ";
+        description += "  Index: " + intersects[i].index + ", ";
+        description += "  Coords: [" + intersects[i].point.x.toFixed(2) + ", " + intersects[i].point.y.toFixed(2) + ", " + intersects[i].point.z.toFixed(2) + "]";
+        descriptions.push(description);
+
+        showColor(colorList[intersects[i].index].name, colorList[intersects[i].index].hex);
+        break;
+      }
+
+      if (descriptions.length > 0) {
+        console.log("Mouse pointer intersected the following points, closest to furthest: ");
+        for (var v = 0; v < descriptions.length; v++)
+          console.log(descriptions[v]);
+      }
+    }
+  }
+}
+
diff --git a/visual-representation-of-color-names-in-different-color-models/src/style.scss b/visual-representation-of-color-names-in-different-color-models/src/style.scss
new file mode 100644
index 0000000..020d9e7
--- /dev/null
+++ b/visual-representation-of-color-names-in-different-color-models/src/style.scss
@@ -0,0 +1,178 @@
+$c-black: #202124;
+$c-white: #fff;
+$bg: $c-white;
+
+:root {
+  --dark: $c-black;
+  --light: $c-white;
+  --background: var($c-black);
+  --foreground: var($c-white);
+}
+
+// <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
+//@import 'https://fonts.googleapis.com/css?family=Inconsolata';
+//$t-code: 'Inconsolata', ipm, Menlo, 'Courier New', monospace;
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200&display=swap');
+
+$t-code: 'Inter', sans-serif;
+//@import 'https://fonts.googleapis.com/css?family=Space+Mono';
+//$t-code: 'Space Mono', ipm, Menlo, 'Courier New', monospace;
+
+body {
+  overflow: hidden;
+  background: $c-black;
+  background: var(--background);
+  font-family: $t-code;
+  color: #fff;
+  color: var(--foreground, #{$c-white});
+}
+.github-corner {
+  position: absolute;
+  top: 0; right: 0;
+  transform: translate3d(0,0,0);
+  transition: 333ms transform cubic-bezier(.7,.3,.25,1.15) 1200ms;
+  will-change: transform;
+  svg {
+    width: 4rem; height: 4rem;
+  }
+  path {
+    will-chrange: fill;
+  }
+  .octo-arm,
+  .octo-body {
+    fill: $c-black;
+    fill: var(--background, #{$c-black});
+  }
+  .triange {
+    fill: $c-white;
+    fill: var(--foreground, #{$c-white});
+  }
+}
+.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+
+button,
+select {
+  position: absolute;
+  font-family: $t-code;
+  box-sizing: border-box;
+  
+  appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  
+  color: $c-white;
+  color: var(--foreground, #{$c-white});
+  background-color: transparent;
+  
+  cursor: pointer;
+}
+select {
+  position: relative;
+  //max-width: 10rem;
+}
+.options {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding: 1rem;
+}
+
+button {
+  bottom: 1rem; left: 1rem;
+  padding: 0;
+  outline: none;
+  padding: 0 0 0.5em 0.3em;
+  span {
+    display: none;
+  }
+  stonrg {
+    display: block;
+  }
+  svg {
+    display: block;
+    width: 2rem; height: 2rem;
+  }
+  path {
+    fill: currentColor;
+  }
+  .line {
+    display: none;
+  }
+}
+
+.isDark {
+  button {
+    .line {
+      display: block;
+    }
+  }
+}
+select {
+  font-size: 1.5rem;
+  //text-decoration: underline;
+  appearance: none;
+  -webkit-appearance: none;
+  border-radius: 0;
+  color: turquoise;
+  //text-decoration-color: pink;
+  padding: 0.25em 1.2em 0.25em 0.3em;
+  background-color: rgba(#202124,.5);
+  background-size: auto 25%;
+  background-repeat: no-repeat;
+  background-position: calc(100% - .7rem) 55%;
+  background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%20%3C%21--%20Generator%3A%20IcoMoon.io%20--%3E%20%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%20%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M%2096.00%2C96.00l-96.00%2C96.00l%20256.00%2C256.00l%20256.00-256.00l-96.00-96.00L%20256.00%2C256.00L%2096.00%2C96.00z%22%20%3E%3C/path%3E%3C/svg%3E');
+transition: 150ms background-color;
+  
+  &:focus {
+    outline: none;
+  }
+  &:hover {
+    background-color: rgba(#202124,.8);
+  }
+}
+label {
+  display: inline-block;
+}
+
+
+@media (max-width: 480px) {
+  button {
+    left: auto;
+    right: 1rem;
+    bottom: 7rem;
+  }
+  select,
+  label {
+    width: 100%;
+  }
+}
+
+.label {
+  font-size: .7em;
+  display: block;
+  padding: 0 0.5em;
+}
+.currentColor {
+  pointer-events: none;
+  position: absolute;
+  left: 1.5rem;
+  top: 1rem;
+  text-shadow: 0 1px 10px #202124;
+  h2 {
+    margin: 0;
+  }
+  span {
+    display: block;
+    margin-top: .1em;
+    &::before {
+      position: relative;
+      top: -.2em;
+      display: inline-block;
+      margin-right: 0.25em;
+      color: var(--color);
+      content: '⬤';
+      font-size: .9em;
+    }
+  }
+}
\ No newline at end of file
diff --git a/visualizing-the-sun-s-path-in-the-sky/README.markdown b/visualizing-the-sun-s-path-in-the-sky/README.markdown
new file mode 100644
index 0000000..28fecf6
--- /dev/null
+++ b/visualizing-the-sun-s-path-in-the-sky/README.markdown
@@ -0,0 +1,6 @@
+# Visualizing The Sun's Path in the Sky
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/pavlovsk/pen/JjjPRem](https://codepen.io/pavlovsk/pen/JjjPRem).
+
+ Change location using the south/north buttons to see latitude's effect on sun's path in the sky.
+
+Rewind, pause or fast-forward using the buttons below.
\ No newline at end of file
diff --git a/visualizing-the-sun-s-path-in-the-sky/dist/index.html b/visualizing-the-sun-s-path-in-the-sky/dist/index.html
new file mode 100644
index 0000000..fbee286
--- /dev/null
+++ b/visualizing-the-sun-s-path-in-the-sky/dist/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Visualizing The Sun's Path in the Sky</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="zdog-canvas" width="800" height="640"></canvas>
+<div class="place-controls">
+  <button id="south">« South</button>
+  <p id="place">Current Place</p>
+  <button id="north">North »</button>
+</div>
+<div class="time-controls">
+  <p id="month">Current Month</p>
+  <div class="buttons">
+    <button id="rewind">«</button>
+    <button id="pause">||</button>
+    <button id="play" class="hidden">&gt;</button>
+    <button id="forward">»</button>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.com/zdog@1/dist/zdog.dist.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/visualizing-the-sun-s-path-in-the-sky/dist/script.js b/visualizing-the-sun-s-path-in-the-sky/dist/script.js
new file mode 100644
index 0000000..352ef2a
--- /dev/null
+++ b/visualizing-the-sun-s-path-in-the-sky/dist/script.js
@@ -0,0 +1,265 @@
+const { cos, PI, ceil, random } = Math;
+
+const deg = degrees => {
+  return PI / 180 * degrees;
+};
+
+const maybeNegative = number => {
+  return random() >= .5 ? -number : number;
+};
+
+const times = (howMany, what) => {
+  return [...Array(howMany).keys()].map(what);
+};
+
+const query = (selector) =>
+selector[0] === '#' ?
+document.getElementById(selector.slice(1)) :
+document.querySelectorAll(selector);
+
+const getPlace = (placeList, index) => {
+  const { name, country, lat } = placeList[index];
+  const nameAndCountry = [name, country].filter(Boolean);
+  const hemisphere = lat > 0 ? 'N' : lat < 0 ? 'S' : '';
+  return {
+    name: `${nameAndCountry.join(', ')} (${lat}°${hemisphere})`,
+    lat };
+
+};
+
+const calculateMonth = (monthList, time) => {
+  const monthLength = 1 / 6;
+  const monthIndex = time / monthLength;
+  return monthList[ceil(monthIndex) % 12];
+};
+
+const places = [
+{ name: 'South Pole', country: null, lat: -90 },
+{ name: 'Vostok', country: 'Antarctica', lat: -75 },
+{ name: 'Falkland Islands', country: 'UK', lat: -51 },
+{ name: 'Christchurch', country: 'New Zealand', lat: -43 },
+{ name: 'São Paulo', country: 'Brazil', lat: -23 },
+{ name: 'Kampala', country: 'Uganda', lat: 0 },
+{ name: 'Dubai', country: 'UAE', lat: 23 },
+{ name: 'Istanbul', country: 'Turkey', lat: 41 },
+{ name: 'Helsinki', country: 'Finland', lat: 60 },
+{ name: 'Tromsø', country: 'Norway', lat: 69 },
+{ name: 'Alert', country: 'Canada', lat: 82 },
+{ name: 'North Pole', country: null, lat: 90 }];
+
+
+const months = [
+'June',
+'July',
+'August',
+'September',
+'October',
+'November',
+'December',
+'January',
+'February',
+'March',
+'April',
+'May'];
+
+
+const daySpeeds = {
+  paused: 0,
+  playing: 0.01,
+  rewinding: -0.01,
+  forwarding: 0.1 };
+
+
+const maxAscension = .23;
+
+const state = {
+  place: 8,
+  mode: 'playing',
+  season: 0 // 0 = june, 1 = december
+};
+
+const drawing = new Zdog.Illustration({
+  element: '#zdog-canvas',
+  dragRotate: true,
+  zoom: 500,
+  rotate: { x: -deg(25) } });
+
+
+const ground = new Zdog.Cylinder({
+  addTo: drawing,
+  diameter: 1,
+  length: .05,
+  stroke: false,
+  color: 'forestgreen',
+  frontFace: 'yellowgreen',
+  backface: 'rgb(30, 100, 10)',
+  rotate: { x: deg(90) } });
+
+
+const clouds = [];
+
+const addRandomCloud = (parent, x) => {
+  const color = 'rgba(230, 240, 255, .2)';
+  const z = maybeNegative(random() / 2);
+  clouds.push(new Zdog.Box({
+    addTo: parent,
+    width: .001,
+    height: .0025,
+    depth: .001,
+    stroke: .1,
+    color,
+    translate: {
+      x,
+      y: -.3,
+      z } }));
+
+
+
+  clouds.push(new Zdog.Box({
+    addTo: parent,
+    width: .001,
+    height: .003,
+    depth: .001,
+    stroke: .15,
+    color,
+    translate: {
+      x: x + .1,
+      y: -.3,
+      z } }));
+
+
+
+  if (random() > .75) {
+    clouds.push(new Zdog.Box({
+      addTo: parent,
+      width: .001,
+      height: .0025,
+      depth: .001,
+      stroke: .1,
+      color,
+      translate: {
+        x: x + .2,
+        y: -.3,
+        z } }));
+
+
+    if (random() > .5) {
+      clouds.push(new Zdog.Box({
+        addTo: parent,
+        width: .0005,
+        height: .0005,
+        depth: .0005,
+        stroke: .07,
+        color,
+        translate: {
+          x: x + .27,
+          y: -.3,
+          z } }));
+
+
+    }
+  }
+};
+
+const sunTiltPlane = new Zdog.Anchor({
+  addTo: drawing });
+
+
+const sunOrbitPlane = new Zdog.Anchor({
+  addTo: sunTiltPlane });
+
+
+const sunAscensionPlane = new Zdog.Anchor({
+  addTo: sunOrbitPlane });
+
+
+const sun = new Zdog.Shape({
+  addTo: sunAscensionPlane,
+  stroke: .1,
+  color: '#fd5',
+  translate: { y: -.5 } });
+
+
+let cloudX = 0;
+let cloudBoost = 2.5;
+
+const loop = () => {
+  const speed = daySpeeds[state.mode];
+  const place = getPlace(places, state.place);
+  const tilt = deg(-place.lat);
+  if (sunTiltPlane.rotate.z !== tilt) {
+    sunTiltPlane.rotate.z += (tilt - sunTiltPlane.rotate.z) / 5;
+  }
+  sunOrbitPlane.rotate.x += speed;
+  sunAscensionPlane.translate.x =
+  cos(PI * state.season) * maxAscension;
+
+  state.season += speed / 180;
+  if (random() < speed * cloudBoost) {
+    cloudX += (.6 - cloudX) / 10;
+    cloudBoost -= (cloudBoost - .5) / 10;
+    addRandomCloud(drawing, cloudX);
+  }
+  clouds.forEach(cloud => {
+    if (cloud) {
+      cloud.translate.x -= speed / 10;
+      if (cloud.translate.x < -3) {
+        cloud.remove();
+        cloud = null;
+      }
+    }
+  });
+  query('#place').innerText = place.name;
+  const month = calculateMonth(months, state.season);
+  query('#month').innerText = month;
+  drawing.updateRenderGraph();
+  requestAnimationFrame(loop);
+};
+
+loop();
+
+const onClickSouth = () => {
+  state.place--;
+  query('#north').removeAttribute('disabled');
+  if (!places[state.place - 1]) {
+    query('#south').setAttribute('disabled', true);
+  }
+};
+
+const onClickNorth = () => {
+  state.place++;
+  query('#south').removeAttribute('disabled');
+  if (!places[state.place + 1]) {
+    query('#north').setAttribute('disabled', true);
+  }
+};
+
+const playPause = () => {
+  if (state.mode !== 'paused') {
+    state.savedMode = state.mode;
+    state.mode = 'paused';
+  } else {
+    state.mode = state.savedMode;
+  }
+  query('#play').classList.toggle('hidden');
+  query('#pause').classList.toggle('hidden');
+};
+
+const toggleRewind = () => {
+  state.mode = state.mode !== 'rewinding' ?
+  'rewinding' :
+  'playing';
+};
+
+const toggleForward = () => {
+  state.mode = state.mode !== 'forwarding' ?
+  'forwarding' :
+  'playing';
+};
+
+query('#south').addEventListener('click', onClickSouth);
+query('#north').addEventListener('click', onClickNorth);
+query('#play').addEventListener('click', playPause);
+query('#pause').addEventListener('click', playPause);
+query('#rewind').addEventListener('click', toggleRewind);
+query('#forward').addEventListener('click', toggleForward);
\ No newline at end of file
diff --git a/visualizing-the-sun-s-path-in-the-sky/dist/style.css b/visualizing-the-sun-s-path-in-the-sky/dist/style.css
new file mode 100644
index 0000000..22a31ec
--- /dev/null
+++ b/visualizing-the-sun-s-path-in-the-sky/dist/style.css
@@ -0,0 +1,89 @@
+html, body {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+body {
+  font: normal 100%/1 "Operator Mono", monospace;
+}
+
+button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  background: #000;
+  color: #fff;
+  padding: .3em;
+  min-width: 32px;
+  font: inherit;
+}
+button:disabled {
+  background: gray;
+}
+
+.hidden {
+  display: none;
+}
+
+#zdog-canvas {
+  cursor: move;
+}
+
+@media (max-width: 800px) {
+  #zdog-canvas {
+    width: 100%;
+  }
+}
+.place-controls {
+  position: absolute;
+  top: 30px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 800px;
+}
+.place-controls button {
+  padding: .5em;
+}
+.place-controls #place {
+  font-size: 1.2em;
+}
+
+@media (max-height: 640px) {
+  .place-controls {
+    top: 0;
+  }
+}
+.time-controls {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+}
+.time-controls .buttons {
+  display: flex;
+}
+.time-controls button:not(:last-child) {
+  margin-right: 1em;
+}
+.time-controls #month {
+  font-size: 1.2em;
+  padding-bottom: .25em;
+  text-align: center;
+}
+
+@media (max-height: 640px) {
+  .time-controls {
+    bottom: 0;
+  }
+}
diff --git a/visualizing-the-sun-s-path-in-the-sky/license.txt b/visualizing-the-sun-s-path-in-the-sky/license.txt
new file mode 100644
index 0000000..51218c4
--- /dev/null
+++ b/visualizing-the-sun-s-path-in-the-sky/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Mustafa Enes (https://codepen.io/pavlovsk/pen/JjjPRem)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/visualizing-the-sun-s-path-in-the-sky/src/index.html b/visualizing-the-sun-s-path-in-the-sky/src/index.html
new file mode 100644
index 0000000..a62493c
--- /dev/null
+++ b/visualizing-the-sun-s-path-in-the-sky/src/index.html
@@ -0,0 +1,15 @@
+<canvas id="zdog-canvas" width="800" height="640"></canvas>
+<div class="place-controls">
+  <button id="south">« South</button>
+  <p id="place">Current Place</p>
+  <button id="north">North »</button>
+</div>
+<div class="time-controls">
+  <p id="month">Current Month</p>
+  <div class="buttons">
+    <button id="rewind">«</button>
+    <button id="pause">||</button>
+    <button id="play" class="hidden">&gt;</button>
+    <button id="forward">»</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/visualizing-the-sun-s-path-in-the-sky/src/script.babel b/visualizing-the-sun-s-path-in-the-sky/src/script.babel
new file mode 100644
index 0000000..dd0244d
--- /dev/null
+++ b/visualizing-the-sun-s-path-in-the-sky/src/script.babel
@@ -0,0 +1,265 @@
+const { cos, PI, ceil, random } = Math
+
+const deg = degrees => {
+  return PI / 180 * degrees
+}
+
+const maybeNegative = number => {
+  return random() >= .5 ? -number : number
+}
+
+const times = (howMany, what) => {
+  return [...Array(howMany).keys()].map(what)
+}
+
+const query = selector =>
+  selector[0] === '#'
+    ? document.getElementById(selector.slice(1))
+    : document.querySelectorAll(selector)
+
+const getPlace = (placeList, index) => {
+  const { name, country, lat } = placeList[index]
+  const nameAndCountry = [ name, country ].filter(Boolean)
+  const hemisphere = lat > 0 ? 'N' : lat < 0 ? 'S' : ''
+  return {
+    name: `${nameAndCountry.join(', ')} (${lat}°${hemisphere})`,
+    lat
+  }
+}
+
+const calculateMonth = (monthList, time) => {
+  const monthLength = 1 / 6
+  const monthIndex = time / monthLength
+  return monthList[ceil(monthIndex) % 12]
+}
+
+const places = [
+  { name: 'South Pole', country: null, lat: -90 },
+  { name: 'Vostok', country: 'Antarctica', lat: -75 },
+  { name: 'Falkland Islands', country: 'UK', lat: -51 },
+  { name: 'Christchurch', country: 'New Zealand', lat: -43 },
+  { name: 'São Paulo', country: 'Brazil', lat: -23 },
+  { name: 'Kampala', country: 'Uganda', lat: 0 },
+  { name: 'Dubai', country: 'UAE', lat: 23 },
+  { name: 'Istanbul', country: 'Turkey', lat: 41 },
+  { name: 'Helsinki', country: 'Finland', lat: 60 },
+  { name: 'Tromsø', country: 'Norway', lat: 69 },
+  { name: 'Alert', country: 'Canada', lat: 82 },
+  { name: 'North Pole', country: null, lat: 90 },
+]
+
+const months = [
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+  'January',
+  'February',
+  'March',
+  'April',
+  'May'
+]
+
+const daySpeeds = {
+  paused: 0,
+  playing: 0.01,
+  rewinding: -0.01,
+  forwarding: 0.1
+}
+
+const maxAscension = .23
+
+const state = {
+  place: 8,
+  mode: 'playing',
+  season: 0 // 0 = june, 1 = december
+}
+
+const drawing = new Zdog.Illustration({
+  element: '#zdog-canvas',
+  dragRotate: true,
+  zoom: 500,
+  rotate: { x: -deg(25) }
+})
+
+const ground = new Zdog.Cylinder({
+  addTo: drawing,
+  diameter: 1,
+  length: .05,
+  stroke: false,
+  color: 'forestgreen',
+  frontFace: 'yellowgreen',
+  backface: 'rgb(30, 100, 10)',
+  rotate: { x: deg(90) }
+})
+
+const clouds = []
+
+const addRandomCloud = (parent, x) => {
+  const color = 'rgba(230, 240, 255, .2)'
+  const z = maybeNegative(random() / 2)
+  clouds.push(new Zdog.Box({
+    addTo: parent,
+    width: .001,
+    height: .0025,
+    depth: .001,
+    stroke: .1,
+    color,
+    translate: {
+      x,
+      y: -.3,
+      z
+    }
+  }))
+
+  clouds.push(new Zdog.Box({
+    addTo: parent,
+    width: .001,
+    height: .003,
+    depth: .001,
+    stroke: .15,
+    color,
+    translate: {
+      x: x + .1,
+      y: -.3,
+      z
+    }
+  }))
+
+  if (random() > .75) {
+    clouds.push(new Zdog.Box({
+      addTo: parent,
+      width: .001,
+      height: .0025,
+      depth: .001,
+      stroke: .1,
+      color,
+      translate: {
+        x: x + .2,
+        y: -.3,
+        z
+      }
+    }))
+    if (random() > .5) {
+      clouds.push(new Zdog.Box({
+        addTo: parent,
+        width: .0005,
+        height: .0005,
+        depth: .0005,
+        stroke: .07,
+        color,
+        translate: {
+          x: x + .27,
+          y: -.3,
+          z
+        }
+      }))
+    }
+  }
+}
+
+const sunTiltPlane = new Zdog.Anchor({
+  addTo: drawing,
+})
+
+const sunOrbitPlane = new Zdog.Anchor({
+  addTo: sunTiltPlane
+})
+
+const sunAscensionPlane = new Zdog.Anchor({
+  addTo: sunOrbitPlane,
+})
+
+const sun = new Zdog.Shape({
+  addTo: sunAscensionPlane,
+  stroke: .1,
+  color: '#fd5',
+  translate: { y: -.5 }
+})
+
+let cloudX = 0
+let cloudBoost = 2.5
+
+const loop = () => {
+  const speed = daySpeeds[state.mode]
+  const place = getPlace(places, state.place)
+  const tilt = deg(-place.lat)
+  if (sunTiltPlane.rotate.z !== tilt) {
+    sunTiltPlane.rotate.z += ((tilt - sunTiltPlane.rotate.z) / 5)
+  }
+  sunOrbitPlane.rotate.x += speed
+  sunAscensionPlane.translate.x = (
+    cos(PI * state.season) * maxAscension
+  )
+  state.season += (speed / 180)
+  if (random() < speed * cloudBoost) {
+    cloudX += ((.6 - cloudX) / 10)
+    cloudBoost -= ((cloudBoost - .5) / 10)
+    addRandomCloud(drawing, cloudX)
+  }
+  clouds.forEach(cloud => {
+    if (cloud) {
+      cloud.translate.x -= (speed / 10)
+      if (cloud.translate.x < -3) {
+        cloud.remove()
+        cloud = null
+      }
+    }
+  })
+  query('#place').innerText = place.name
+  const month = calculateMonth(months, state.season)
+  query('#month').innerText = month
+  drawing.updateRenderGraph()
+  requestAnimationFrame(loop)
+}
+
+loop()
+
+const onClickSouth = () => {
+  state.place--
+  query('#north').removeAttribute('disabled')
+  if (!places[state.place - 1]) {
+    query('#south').setAttribute('disabled', true)
+  }
+}
+
+const onClickNorth = () => {
+  state.place++
+  query('#south').removeAttribute('disabled')
+  if (!places[state.place + 1]) {
+    query('#north').setAttribute('disabled', true)
+  }
+}
+
+const playPause = () => {
+  if (state.mode !== 'paused') {
+    state.savedMode = state.mode
+    state.mode = 'paused'
+  } else {
+    state.mode = state.savedMode
+  }
+  query('#play').classList.toggle('hidden')
+  query('#pause').classList.toggle('hidden')
+}
+
+const toggleRewind = () => {
+  state.mode = state.mode !== 'rewinding'
+    ? 'rewinding'
+    : 'playing'
+}
+
+const toggleForward = () => {
+  state.mode = state.mode !== 'forwarding'
+    ? 'forwarding'
+    : 'playing'
+}
+
+query('#south').addEventListener('click', onClickSouth)
+query('#north').addEventListener('click', onClickNorth)
+query('#play').addEventListener('click', playPause)
+query('#pause').addEventListener('click', playPause)
+query('#rewind').addEventListener('click', toggleRewind)
+query('#forward').addEventListener('click', toggleForward)
\ No newline at end of file
diff --git a/visualizing-the-sun-s-path-in-the-sky/src/style.scss b/visualizing-the-sun-s-path-in-the-sky/src/style.scss
new file mode 100644
index 0000000..956d729
--- /dev/null
+++ b/visualizing-the-sun-s-path-in-the-sky/src/style.scss
@@ -0,0 +1,93 @@
+html, body {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+body {
+  font: normal 100%/1 "Operator Mono", monospace;
+}
+
+button {
+  appearance: none;
+  border: none;
+  background: #000;
+  color: #fff;
+  padding: .3em;
+  min-width: 32px;
+  font: inherit;
+
+  &:disabled {
+    background: gray;
+  }
+}
+  
+.hidden {
+  display: none;
+}
+
+#zdog-canvas {
+  cursor: move;
+}
+
+@media (max-width: 800px) {
+  #zdog-canvas {
+    width: 100%;
+  }
+}
+
+.place-controls {
+  position: absolute;
+  top: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 800px;
+
+  button {
+    padding: .5em;
+  }
+
+  #place {
+    font-size: 1.2em;
+  }
+}
+
+@media (max-height: 640px) {
+  .place-controls {
+    top: 0;
+  }
+}
+
+.time-controls {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+
+  .buttons {
+    display: flex;
+  }
+
+  button:not(:last-child) {
+    margin-right: 1em;
+  }
+
+  #month {
+    font-size: 1.2em;
+    padding-bottom: .25em;
+    text-align: center;
+  }
+}
+
+@media (max-height: 640px) {
+  .time-controls {
+    bottom: 0;
+  }
+}
\ No newline at end of file
diff --git a/vocsselseasily-create-3d-css-html-voxel-models/README.markdown b/vocsselseasily-create-3d-css-html-voxel-models/README.markdown
new file mode 100644
index 0000000..4c61005
--- /dev/null
+++ b/vocsselseasily-create-3d-css-html-voxel-models/README.markdown
@@ -0,0 +1,5 @@
+# VoCSSels - Easily create 3D CSS & HTML  Voxel Models
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/jcoulterdesign/pen/vYyzZdo](https://codepen.io/jcoulterdesign/pen/vYyzZdo).
+
+
diff --git a/vocsselseasily-create-3d-css-html-voxel-models/dist/index.html b/vocsselseasily-create-3d-css-html-voxel-models/dist/index.html
new file mode 100644
index 0000000..16dc624
--- /dev/null
+++ b/vocsselseasily-create-3d-css-html-voxel-models/dist/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - VoCSSels - Easily create 3D CSS &amp; HTML  Voxel Models</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class='_audio'></div>
+<div class='l'></div>
+<div @mousemove='colorPicker($event)' class='p3d'>
+  <div :style='`background: #${picker.color};left: ${picker.x}px; top: ${picker.y}px;`' @click="picker.active = !picker.active, picker.color = '#25273E'" class='p3d_colorPicker' v-if='picker.active'></div>
+  <div class='p3d_loader'>
+    <div class='p3d_loader__inner'>
+      <img src='https://assets.codepen.io/217233/p3d_logoLoading_2.svg'>
+      <div class='b'></div>
+      <div class='f'></div>
+    </div>
+  </div>
+  <div class='p3d_main'>
+    <div :class='{open : modalOpen}' @click='closeModals()' class='p3d_overlay'></div>
+    <div :class="{open : modalOpen &amp;&amp; modal == 'share'}" class='p3d_load modal'>
+      <div class='p3d_load__inner modal'>
+        <div @click="closeModals(), enJin.audioController.play('pop6')" class='close'>
+          X
+        </div>
+        <h1 v-if='submitted'>Creation shared!</h1>
+        <h1 v-if='!submitted'>Share your creation</h1>
+        <div class='wrap' v-if='submitted'>
+          <p>Amazing! Thanks for being part of the community. If your VoCSSel is approved, everyone will be able to view it in the community section. I really hope you enjoyed using VoCSSels!</p>
+        </div>
+        <div class='wrap' v-if='!submitted'>
+          <p>Want other people to be able to load in your VoCSSel? If approved, your VoCSSel will be added to our community section.</p>
+          <div class='row'>
+            <div class='row-half'>
+              <label for='name'>VoCSSel name</label>
+              <input :value='exportSettings.name' id='name' type='text' v-model='exportSettings.name'>
+            </div>
+            <div class='row-half'>
+              <label for='name'>Author name</label>
+              <input :value='author' id='name' type='text' v-model='author'>
+            </div>
+          </div>
+        </div>
+        <div class='b' v-if='!submitted'>
+          <button :class='{submitting : submitting}' @click='shareModel()'>
+            <img class='loader' draggable='false' src='https://assets.codepen.io/217233/Dual+Ring-1s-200px.gif'>
+            Share it
+          </button>
+          <button @click="closeModals(), enJin.audioController.play('pop6')">No thanks</button>
+        </div>
+      </div>
+    </div>
+    <div :class="{open : modalOpen &amp;&amp; modal == 'community'}" class='p3d_load modal community'>
+      <div class='p3d_load__inner modal'>
+        <div @click="closeModals(), enJin.audioController.play('pop6')" class='close'>
+          X
+        </div>
+        <h1>Community content</h1>
+        <p>Take a look at some of the incredible VoCSSels people have made</p>
+        <div class='s-wrap'>
+          <div class='x-wrap'>
+            <div class='p3d_load__model empty' v-if='communityContent.length == 0'>
+              <h4>Sorry, we seem to be having a problem loading content. Please try again later</h4>
+            </div>
+            <div :key='model' @click="load(model, true), closeModals(), enJin.audioController.play('pop6')" class='p3d_load__model' v-for='(model, index) in communityContent'>
+              <div :style='`background: url(${model.image})`' class='m_image'></div>
+              <div class='m_details'>
+                <p class='date'>{{model.date}}</p>
+                <p class='name'>{{model.name}}</p>
+                <p class='author'>by {{model.author}}</p>
+                <p class='voxels'>
+                  <span>
+                    {{model.voxels}}
+                  </span>
+                  voxels 
+                  <span>
+                    {{model.vertices}}
+                  </span>
+                  vertices
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div :class="{open : modalOpen &amp;&amp; modal == 'load'}" class='p3d_load modal'>
+      <div class='p3d_load__inner modal'>
+        <div @click="closeModals(), enJin.audioController.play('pop6')" class='close'>
+          X
+        </div>
+        <h1>Load a VoCSSel</h1>
+        <p>Select or manage your saved VoCSSels</p>
+        <div class='s-wrap'>
+          <div class='p3d_load__model empty' v-if='savedModelsMeta.length == 0'>
+            <h4>You don't have any VoCSSels saved. Go and make one first</h4>
+          </div>
+          <div :key='model' @click="load(index, false), closeModals(), enJin.audioController.play('pop6')" class='p3d_load__model' v-for='(model, index) in savedModelsMeta'>
+            <div :style="`background: url(${getMetaData('image', model)})`" class='m_image'></div>
+            <div class='m_details'>
+              <p class='date'>{{getMetaData('date', model)}}</p>
+              <p class='name'>{{getMetaData('name', model)}}</p>
+              <p class='author'>by {{getMetaData('author', model)}}</p>
+              <p class='voxels'>
+                <span>
+                  {{getMetaData('voxels', model)}}
+                </span>
+                voxels 
+                <span>
+                  {{getMetaData('vertices', model)}}
+                </span>
+                vertices
+              </p>
+              <div @click="deleteModel(index), enJin.audioController.play('pop5')" class='delete'>Delete</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class='p3d_main__header'>
+      <div class='header_left'>
+        <img draggable='false' src='https://assets.codepen.io/217233/p3d_logo_new.svg'>
+      </div>
+      <div class='header_right'>
+        <div class='name'>
+          <input :value='exportSettings.name' v-model='exportSettings.name'>
+        </div>
+        <div class='buttons'>
+          <div @click="newModel(), enJin.audioController.play('pop6')" class='save button'>
+            <img :class='{saving : saving}' draggable='false' src='https://assets.codepen.io/217233/p3d_load_1.svg'>
+              <div class='tooltip'>
+                New
+              </div>
+            </img>
+          </div>
+          <div @click="save(), enJin.audioController.play('pop6')" class='save button'>
+            <img :class='{saving : saving}' class='icon' draggable='false' src='https://assets.codepen.io/217233/p3d_save_1.svg'>
+            <img :class='{saving : saving}' class='loader' draggable='false' src='https://assets.codepen.io/217233/Dual+Ring-1s-200px.gif'>
+              <div class='tooltip'>
+                Save
+              </div>
+            </img>
+          </div>
+          <div @click="openModal('load'), enJin.audioController.play('pop6')" class='load button'>
+            <img draggable='false' src='https://assets.codepen.io/217233/p3d_new.svg'>
+              <div class='tooltip'>
+                Load
+              </div>
+            </img>
+          </div>
+          <div @click="openModal('community'), enJin.audioController.play('pop6')" class='community button'>
+            Community
+          </div>
+        </div>
+        <div class='options'>
+          <div :class='{active : muted}' @click='toggleAudio()' class='button'>
+            <img class='icon' draggable='false' src='https://assets.codepen.io/217233/p3d_mute.svg'>
+              <div class='tooltip'>
+                Audio
+              </div>
+            </img>
+          </div>
+          <div :class='{active : !motion}' @click='toggleMotion()' class='button'>
+            <img draggable='false' src='https://assets.codepen.io/217233/p3d_nomotion.svg'>
+              <div class='tooltip'>
+                Motion
+              </div>
+            </img>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class='p3d_main__editor'>
+      <div class='editor_left'>
+        <div :class="{export : mode == 'export'}" class='editor_left__header'>
+          <div :class="{hide : mode != 'drawing'}" class='e_buttons'>
+            <div :class="{active : symMode == ''}" @click="symMode = ''" class='button'>
+              <img draggable='false' src='https://assets.codepen.io/217233/p3d_sym_none_1.svg'>
+              <div class='tooltip'>
+                No Symmetry
+              </div>
+            </div>
+            <div :class="{active : symMode == 'x'}" @click="symMode = 'x'" class='button'>
+              <img draggable='false' src='https://assets.codepen.io/217233/p3d_sym_x_1.svg'>
+              <div class='tooltip'>
+                X Symmetry
+              </div>
+            </div>
+            <div :class="{active : symMode == 'y'}" @click="symMode = 'y'" class='button'>
+              <img draggable='false' src='https://assets.codepen.io/217233/p3d_sym_y_1.svg'>
+              <div class='tooltip'>
+                Y Symmetry
+              </div>
+            </div>
+            <div :class="{active : symMode == 'xy'}" @click="symMode = 'xy'" class='button'>
+              <img draggable='false' src='https://assets.codepen.io/217233/p3d_sym_xy_1.svg'>
+              <div class='tooltip'>
+                XY Symmetry
+              </div>
+            </div>
+          </div>
+          <div class='e_tabs'>
+            <div :class="{active : mode == 'drawing'}" @click="swapMode('drawing'), drawMode = 'draw', exportSettings.scale = 0.8, updateOrientation(0, 90, 0, false)" class='e_tabs__tab button'>
+              Draw
+              <div class='tooltip'>
+                Draw pixel art
+              </div>
+            </div>
+            <div :class="{active : mode == 'extrude'}" @click="swapMode('extrude'), drawMode = 'extrude', exportSettings.scale = 0.8, updateOrientation(-30, 140, 0, false)" class='e_tabs__tab button'>
+              Extrude
+              <div class='tooltip'>
+                Give depth
+              </div>
+            </div>
+            <div :class="{active : mode == 'paint'}" @click="swapMode('paint'), drawMode = 'draw', exportSettings.scale = 0.8, updateOrientation(0, 90, 0, false), orientationButton = 'front'" class='e_tabs__tab button'>
+              Paint
+              <div class='tooltip'>
+                Paint voxels
+              </div>
+            </div>
+            <div :class="{active : mode == 'export'}" @click="swapMode('export'), updateOrientation(0, 90, 0, true)" class='e_tabs__tab button'>
+              Export
+              <div class='tooltip'>
+                Export for web
+              </div>
+            </div>
+          </div>
+          <div class='e_sym'></div>
+        </div>
+        <div @mouseleave='picker.active = false' class='editor_left__main'>
+          <div :class="{hide : mode == 'extrude'}" class='m_palette'>
+            <div class='buttons'>
+              <div :class="{active : drawMode == 'draw'}" @click="drawMode = 'draw', enJin.audioController.play('pop6')" class='button draw'>
+                <img draggable='false' src='https://assets.codepen.io/217233/p3d_pencil.svg'>
+                <div class='tooltip'>
+                  Draw
+                </div>
+              </div>
+              <div :class="{active : drawMode == 'erase'}" @click="picker.active = false, drawMode = 'erase', enJin.audioController.play('pop6')" class='button erase' v-if="mode != 'paint'">
+                <img draggable='false' src='https://assets.codepen.io/217233/p3d_eraser_2.svg'>
+                <div class='tooltip'>
+                  Erase
+                </div>
+              </div>
+            </div>
+            <div :class='{active : picker.active}' @click='picker.active = !picker.active' class='cPicker'>
+              <svg fill='none' height='18' viewbox='0 0 18 18' width='18' xmlns='http://www.w3.org/2000/svg'>
+                <path d='M16.3 0.75C15.3 -0.25 13.7 -0.25 12.7 0.75L10.9 2.55L10.2 1.85C9.8 1.45 9.2 1.45 8.8 1.85L8 2.55C7.6 2.95 7.6 3.55 8 3.95L13 8.95C13.4 9.35 14 9.35 14.4 8.95L15.1 8.25C15.5 7.85 15.5 7.25 15.1 6.85L14.5 6.15L16.3 4.35C17.3 3.35 17.3 1.75 16.3 0.75V0.75ZM2.9 10.55C0.7 12.75 2 13.75 0 16.35L0.7 17.05C3.3 15.05 4.3 16.35 6.5 14.15L11.6 9.05L8 5.45L2.9 10.55Z' fill='black'></path>
+              </svg>
+            </div>
+            <div id='colorPicker'></div>
+          </div>
+          <div :class="{hide : mode != 'extrude'}" class='m_palette palette--depth'>
+            <div class='buttons'>
+              <div :class="{active : drawMode == 'extrude'}" @click="drawMode = 'extrude', enJin.audioController.play('pop6')" class='button erase'>
+                <img draggable='false' src='https://assets.codepen.io/217233/p3d_extrude.svg?x=ghfh'>
+                <div class='tooltip'>
+                  Extrude
+                </div>
+              </div>
+              <div :class="{active : drawMode == 'hollow'}" @click="drawMode = 'hollow', enJin.audioController.play('pop6')" class='button erase'>
+                <img draggable='false' src='https://assets.codepen.io/217233/p3d_hollow.svg?x=ghfh'>
+                <div class='tooltip'>
+                  Shell
+                </div>
+              </div>
+            </div>
+            <div class='dp-outer'>
+              <div :class="{hide : drawMode == 'extrude'}" class='hollowTip'>
+                <div class='help'>
+                  Shell a group
+                  <img class='icon' draggable='false' src='https://assets.codepen.io/217233/p3d_help.svg'>
+                  <div class='gif'>
+                    <div class='desc'>
+                      <h4>Shell tool</h4>
+                      Use the shell toggle to remove the voxels between the first and last in the row. Handy for optimising your model and removing voxels that cannot be seen. Also great for creating legs.
+                    </div>
+                    <img draggable='false' src='https://assets.codepen.io/217233/shell.gif'>
+                  </div>
+                </div>
+                <div :class='{active : shell}' @click="shell = true, enJin.audioController.play('pop6')" class='button'>
+                  On
+                </div>
+                <div :class='{active : !shell}' @click="shell = false, enJin.audioController.play('pop6')" class='button'>
+                  Off
+                </div>
+              </div>
+              <div :class="{hide : drawMode == 'hollow'}" class='dpgrid'>
+                <div class='help'>
+                  Select a depth
+                  <img class='icon' draggable='false' src='https://assets.codepen.io/217233/p3d_help.svg'>
+                  <div class='gif'>
+                    <div class='desc'>
+                      <h4>Extrude tool</h4>
+                      Select a level of depth, then click on any pixel to extrude by that amount. New voxels will be created along the z axis which can be individually painted.
+                    </div>
+                    <img draggable='false' src='https://assets.codepen.io/217233/depth.gif'>
+                  </div>
+                </div>
+                <div :class='{active : currentDepth == 1}' :data-depth='1' @click="setDepth($event), enJin.audioController.play('pop6')" class='dp'>1</div>
+                <div :class='{active : currentDepth == 2}' :data-depth='2' @click="setDepth($event), enJin.audioController.play('pop6')" class='dp'>2</div>
+                <div :class='{active : currentDepth == 3}' :data-depth='3' @click="setDepth($event), enJin.audioController.play('pop6')" class='dp'>3</div>
+                <div :class='{active : currentDepth == 4}' :data-depth='4' @click="setDepth($event), enJin.audioController.play('pop6')" class='dp'>4</div>
+                <div :class='{active : currentDepth == 5}' :data-depth='5' @click="setDepth($event), enJin.audioController.play('pop6')" class='dp'>5</div>
+                <div :class='{active : currentDepth == 6}' :data-depth='6' @click="setDepth($event), enJin.audioController.play('pop6')" class='dp'>6</div>
+                <div :class='{active : currentDepth == 7}' :data-depth='7' @click="setDepth($event), enJin.audioController.play('pop6')" class='dp'>7</div>
+                <div :class='{active : currentDepth == 8}' :data-depth='8' @click="setDepth($event), enJin.audioController.play('pop6')" class='dp'>8</div>
+                <div :class='{active : currentDepth == 9}' :data-depth='9' @click="setDepth($event), enJin.audioController.play('pop6')" class='dp'>9</div>
+              </div>
+            </div>
+          </div>
+          <div :class="{hide : mode == 'paint', loading : loading}" @mousedown='drawing = true' @mouseleave='drawing = false' @mouseup.right='handleRightClick()' @mouseup='drawing = false' class='m_grid'>
+            <div :class="{active : symMode == 'x' || symMode == 'xy'}" class='helper-x'></div>
+            <div :class="{active : symMode == 'y' || symMode == 'xy'}" class='helper-y'></div>
+            <img :class='{saving : saving}' class='loader' draggable='false' src='https://assets.codepen.io/217233/Dual+Ring-1s-200px.gif'>
+            <div :data-index='index' :data-x='Math.ceil(`${index % canvasSize}`)' :data-y='Math.floor(`${index / canvasSize + 1}`)' :key='voxel.x' :style='' @click='selectColor()' @contextmenu.prevent='' @mousedown='drawPixel($event)' @mouseenter='drawPixel($event)' class='m_grid__pixel' v-for='(voxel, index) in voxels'>
+              <div :style='`background: #${voxel.c[0][1]}`' class='p' v-if='voxel.c'></div>
+              <div :class="{show : mode == 'extrude' &amp;&amp; drawMode == 'extrude'}" class='d'>{{voxel.d}}</div>
+              <div :class="{show : mode == 'extrude' &amp;&amp; drawMode == 'hollow' &amp;&amp; voxel.h}" class='d'>S</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class='editor_right'>
+        <div :class="{show : mode == 'export'}" class='editor_right__export'>
+          <h3>Export settings</h3>
+          <p class='sub'>Export your VoCSSel for web, or as a png based on the current view</p>
+          <div class='form'></div>
+          <div class='row'>
+            <div class='row-half'>
+              <label for='name'>VoCSSel name</label>
+              <input :value='exportSettings.name' id='name' type='text' v-model='exportSettings.name'>
+            </div>
+            <div class='row-half'>
+              <label for='name'>Author name</label>
+              <input :value='author' id='name' type='text' v-model='author'>
+            </div>
+            <div @click="save(), enJin.audioController.play('pop6')" class='save button'>
+              <img :class='{saving : saving}' class='icon' draggable='false' src='https://assets.codepen.io/217233/p3d_save_1.svg'>
+              <img :class='{saving : saving}' class='loader' draggable='false' src='https://assets.codepen.io/217233/Dual+Ring-1s-200px.gif'>
+                <div class='tooltip'>
+                  Save
+                </div>
+              </img>
+            </div>
+          </div>
+          <br>
+          <div class='row'>
+            <label for='exportBg'>Background color</label>
+            <input id='exportBg'>
+            <img @click='resetBgColor()' draggable='false' src='https://assets.codepen.io/217233/p3d_resetColour.svg'>
+          </div>
+          <div class='row'>
+            <label for='perspective'>
+              Perspective:
+              <span>{{exportSettings.perspective}}px</span>
+            </label>
+            <input :value='exportSettings.perspective' id='perspective' max='3000' min='100' type='range' v-model='exportSettings.perspective'>
+          </div>
+          <div class='row'>
+            <label for='animate'>
+              Animate
+              <span>
+                <span>Turn off for viewport control</span>
+              </span>
+            </label>
+            <input :value='exportSettings.animate' id='animate' type='checkbox' v-model='exportSettings.animate'>
+          </div>
+          <div class='row' v-if='exportSettings.animate'>
+            <label for='speed'>
+              Speed:
+              <span>{{exportSettings.spinSpeed}}s</span>
+            </label>
+            <input :value='exportSettings.spinSpeed' id='speed' max='20' min='0.1' step='0.1' type='range' v-model='exportSettings.spinSpeed'>
+          </div>
+          <div class='row' v-if='!exportSettings.animate'>
+            <div class='row-half'>
+              <label for='rotateX'>
+                Rotate X:
+                <span>{{exportSettings.x}}deg</span>
+              </label>
+              <input :value='exportSettings.x' id='rotateX' max='180' min='-180' step='10' type='range' v-model='exportSettings.x'>
+            </div>
+            <div class='row-half'>
+              <label for='rotateY'>
+                Rotate Y:
+                <span>{{exportSettings.y}}deg</span>
+              </label>
+              <input :value='exportSettings.y' id='rotateY' max='180' min='-180' step='10' type='range' v-model='exportSettings.y'>
+            </div>
+          </div>
+          <div class='row' v-if='!exportSettings.animate'>
+            <div class='row-half'>
+              <label for='rotateZ'>
+                Rotate Z:
+                <span>{{exportSettings.z}}deg</span>
+              </label>
+              <input :value='exportSettings.z' id='rotateZ' max='180' min='-180' step='10' type='range' v-model='exportSettings.z'>
+            </div>
+            <div class='row-half'>
+              <label for='scale'>
+                Scale:
+                <span>{{exportSettings.scale}}</span>
+              </label>
+              <input :value='exportSettings.scale' id='scale' max='3' min='0.01' step='0.01' type='range' v-model='exportSettings.scale'>
+            </div>
+          </div>
+          <div class='buttons'>
+            <button @click="openModal('share'), enJin.audioController.play('pop6')">Share with community</button>
+            <button :class='{exporting : exporting}' @click='processForExport()' class='cp'>
+              <img :class='{saving : saving}' class='loader' draggable='false' src='https://assets.codepen.io/217233/Dual+Ring-1s-200px.gif'>
+              Export to CodePen
+            </button>
+          </div>
+        </div>
+        <p :class="{hide : mode == 'export' || mode == 'paint'}">HTML / CSS Output</p>
+        <img :class="{hide : mode == 'export'}" @click='resetBgColor()' draggable='false' src='https://assets.codepen.io/217233/p3d_resetColour.svg'>
+        <input :class="{hide : mode == 'export'}" id='colorBg'>
+        <div :class="{export : mode == 'export', paint : mode == 'paint'}" class='editor_right__preview'>
+          <div :style='`background: ${exportSettings.bgColor};`' class='p_inner' id='model'>
+            <div :class="{hide : mode == 'export'}" @click="handleZoom(0.05), enJin.audioController.play('pop6')" class='button zooms first'>
+              <img draggable='false' src='https://assets.codepen.io/217233/p3d_zoomIn.svg'>
+            </div>
+            <div :class="{hide : mode == 'export'}" @click="handleZoom(-0.05), enJin.audioController.play('pop6')" class='button zooms'>
+              <img draggable='false' src='https://assets.codepen.io/217233/p3d_zoomOut.svg'>
+            </div>
+            <div :class="{hide : mode == 'export'}" @click="zoomLevel = .8, enJin.audioController.play('pop6')" class='button zooms'>
+              <img draggable='false' src='https://assets.codepen.io/217233/p3d_resetZoom.svg'>
+            </div>
+            <div :class="{show : mode == 'paint'}" class='views'>
+              <div :class="{active : orientationButton == 'front'}" @click="updateOrientation(0, 90, 0, false), orientationButton = 'front'" class='button'>Front</div>
+              <div :class="{active : orientationButton == 'back'}" @click="updateOrientation(0, -90, 0, false), orientationButton = 'back'" class='button'>Back</div>
+              <div :class="{active : orientationButton == 'left'}" @click="updateOrientation(0, 180, 0, false), orientationButton = 'left'" class='button'>Left</div>
+              <div :class="{active : orientationButton == 'right'}" @click="updateOrientation(0, 0, 0, false), orientationButton = 'right'" class='button'>Right</div>
+              <div :class="{active : orientationButton == 'top'}" @click="updateOrientation(-90, 0, 0, false), orientationButton = 'top'" class='button'>Top</div>
+              <div :class="{active : orientationButton == 'bottom'}" @click="updateOrientation(90, 0, 0, false), orientationButton = 'bottom'" class='button'>Bottom</div>
+              <div :class="{active : orientationButton == 'iso1'}" @click="updateOrientation(-30, 50, 0, false), orientationButton = 'iso1'" class='button'>Isometric 1</div>
+              <div :class="{active : orientationButton == 'iso2'}" @click="updateOrientation(-30, 140, 0, false), orientationButton = 'iso2'" class='button'>Isometric 2</div>
+              <div :class="{active : orientationButton == 'iso3'}" @click="updateOrientation(-30, 230, 0, false), orientationButton = 'iso3'" class='button'>Isometric 3</div>
+              <div :class="{active : orientationButton == 'iso4'}" @click="updateOrientation(-30, 310, 0, false), orientationButton = 'iso4'" class='button'>Isometric 4</div>
+            </div>
+            <div :style='`transform: scale(${zoomLevel})`' @wheel='zoom($event)' class='zoom'>
+              <div class='exportWrap'>
+                <div :class="{extrude : mode == 'extrude', spin : mode == 'export' &amp;&amp; exportSettings.animate, export : mode == 'export', paint : mode == 'paint'}" :style='`transform: scale(${exportSettings.scale}) rotateZ(${exportSettings.z}deg) rotateX(${exportSettings.x}deg) rotateY(${exportSettings.y}deg); animation-duration: ${exportSettings.spinSpeed}s`' class='model' v-if='voxels'>
+                  <div :class='`g-${voxelGroup.d}`' :data-index='`${voxelGroup.index}`' :key='voxelGroup.x' class='voxel-group' stagger='50' v-for='(voxelGroup, index) in voxels' v-if='voxelGroup.length != 0'>
+                    <div :class='`d-${index}`' :key='index' class='voxel' v-for='(voxel, index) in voxelGroup.d' v-if='voxelGroup.c'>
+                      <div :class='`x-${voxelGroup.x} y-${voxelGroup.y}`' :data-index='`${index}`' class='v' v-if="voxelGroup.c[index] != ''">
+                        <div :class="{paintable : mode == 'paint'}" :data-vertex='0' :style='[voxelGroup.c ? { background: `#${voxelGroup.c[index][0]}` } : null]' @click='paint($event)' class='f f--f' v-if='voxelGroup?.c?.[index]?.[0]'></div>
+                        <div :class="{paintable : mode == 'paint'}" :data-vertex='1' :style='[voxelGroup.c ? { background: `#${voxelGroup.c[index][1]}` } : null]' @click='paint($event)' class='f f--ba' v-if='voxelGroup?.c?.[index]?.[0]'></div>
+                        <div :class="{paintable : mode == 'paint'}" :data-vertex='2' :style='[voxelGroup.c ? { background: `#${voxelGroup.c[index][2]}` } : null]' @click='paint($event)' class='f f--t' v-if='voxelGroup?.c?.[index]?.[0]'></div>
+                        <div :class="{paintable : mode == 'paint'}" :data-vertex='3' :style='[voxelGroup.c ? { background: `#${voxelGroup.c[index][3]}` } : null]' @click='paint($event)' class='f f--b' v-if='voxelGroup?.c?.[index]?.[0]'></div>
+                        <div :class="{paintable : mode == 'paint'}" :data-vertex='4' :style='[voxelGroup.c ? { background: `#${voxelGroup.c[index][4]}` } : null]' @click='paint($event)' class='f f--l' v-if='voxelGroup?.c?.[index]?.[0]'></div>
+                        <div :class="{paintable : mode == 'paint'}" :data-vertex='5' :style='[voxelGroup.c ? { background: `#${voxelGroup.c[index][5]}` } : null]' @click='paint($event)' class='f f--r' v-if='voxelGroup?.c?.[index]?.[0]'></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <p :class="{hide : mode == 'export' || mode == 'paint'}" class='voxelCount'>
+          <span>
+            {{getVoxelsCount()}}
+          </span>
+          Voxels 
+          <span>
+            {{getVerticesCount() - 1}}
+          </span>
+          Vertices
+          <span :class='{show : getVerticesCount() &gt; 750}' class='block'>
+            <img class='icon' draggable='false' src='https://assets.codepen.io/217233/p3d_warning.svg'>
+            Performance will decrease as the vertices count increases. Make sure to shell out any unused voxels for maximum performance.
+          </span>
+        </p>
+      </div>
+    </div>
+    <div class='p3d_main_footer'>
+      <p>
+        Made with love by
+        <a href='https://www.codepen.io/jcoulterdesign' target='_blank'>Jamie Coulter</a>
+      </p>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://codepen.io/jcoulterdesign/pen/1e3ed378fed68f1a43bc4f73f9964945.js'></script>
+<script src='https://codepen.io/jcoulterdesign/pen/6c44bfdc74442457826e062bc719c586.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/rasterizehtml/1.3.0/rasterizeHTML.allinone.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/vocsselseasily-create-3d-css-html-voxel-models/dist/script.js b/vocsselseasily-create-3d-css-html-voxel-models/dist/script.js
new file mode 100644
index 0000000..bc4d62e
--- /dev/null
+++ b/vocsselseasily-create-3d-css-html-voxel-models/dist/script.js
@@ -0,0 +1,1105 @@
+/*
+    Dependencies
+    https://codepen.io/jcoulterdesign/pen/1e3ed378fed68f1a43bc4f73f9964945
+    https://codepen.io/jcoulterdesign/pen/6c44bfdc74442457826e062bc719c586
+    https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
+    https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js
+    https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.js
+    https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js
+*/
+
+// Master audio array. This is for audio that will not be manipulated by any HTML5 filters.
+// For audio needing low, high pass effects, add them to the _specialAudio array.
+const _masterAudio = [
+    {
+        'name'   : 'pop1',
+        'source' : 'https://assets.codepen.io/217233/p3d_pop1_t.mp3',
+        'stackSize' : 15
+    },
+    {
+        'name'   : 'pop2',
+        'source' : 'https://assets.codepen.io/217233/p3d_pop2_t.mp3',
+        'stackSize' : 15
+    },
+    {
+        'name'   : 'pop3',
+        'source' : 'https://assets.codepen.io/217233/p3d_pop3_t.mp3',
+        'stackSize' : 3
+    },
+    {
+        'name'   : 'pop4',
+        'source' : 'https://assets.codepen.io/217233/p3d_pop4_t.mp3',
+    },
+
+    {
+        'name'   : 'pop5',
+        'source' : 'https://assets.codepen.io/217233/p3d_pop5_t.mp3',
+    },
+
+    {
+        'name'   : 'pop6',
+        'source' : 'https://assets.codepen.io/217233/p3d_pop7.mp3',
+    },
+    {
+        'name'   : 'save',
+        'source' : 'https://assets.codepen.io/217233/p3d_save.wav',
+    }
+];
+
+// Create new instance of EnJin (normally used in my browser games, but using the audio module for it)
+const enJin = new Enjin();
+
+// Create audio controller
+enJin.createAudioController(_masterAudio);
+
+// Voxel
+// Class containing all our volxel data including its position and vertex information
+// This technically represents a voxel group as well, as vue renders out a voxel for each entry in the colors array
+class Voxel {
+    constructor(x, y, depth, color, index) {
+        this.x = x;
+        this.y = y;
+        this.d = depth;
+        this.h = false;
+        this.c = [ // Color array for each side of the voxel
+            {
+                0: lightenDarkenColor(color, 0),
+                1: lightenDarkenColor(color, -5),
+                2: lightenDarkenColor(color, -10),
+                3: lightenDarkenColor(color, -15),
+                4: lightenDarkenColor(color, -20),
+                5: lightenDarkenColor(color, -25)
+            }
+        ]
+        this.index = index;
+    }
+}
+
+// Lighten darken any hex color by amt
+function lightenDarkenColor(col, amt) {
+    col = col.replace(/^#/, '')
+    if (col.length === 3) col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2]
+    let [r, g, b] = col.match(/.{2}/g);
+    ([r, g, b] = [parseInt(r, 16) + amt, parseInt(g, 16) + amt, parseInt(b, 16) + amt])
+    r = Math.max(Math.min(255, r), 0).toString(16)
+    g = Math.max(Math.min(255, g), 0).toString(16)
+    b = Math.max(Math.min(255, b), 0).toString(16)
+    const rr = (r.length < 2 ? '0' : '') + r
+    const gg = (g.length < 2 ? '0' : '') + g
+    const bb = (b.length < 2 ? '0' : '') + b
+
+    return `${rr}${gg}${bb}`
+}
+
+// Rot13 function. Not critical to ser but used as a way of tracking what has been made with the tool
+// If I added a unique string to this CodePen, which then passes it on to the exported pen, I could use the search to find all the models exported with this tool. The
+// issue ofcourse is that the string would also exist on this pen, and so i would be supplied with all the forks. Doing it with a simple rot13 means the string will
+// appear only on the exported pen.
+function rot13(str) {
+    var input     = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+    var output    = 'NOPQRSTUVWXYZABCDEFGHIJKLMnopqrstuvwxyzabcdefghijklm';
+    var index     = x => input.indexOf(x);
+    var translate = x => index(x) > -1 ? output[index(x)] : x;
+    return str.split('').map(translate).join('');
+}
+
+// Vue app
+new Vue({
+    el: '.p3d',
+
+    data() {
+        return {
+            gridElement       : '.m_grid',
+            voxelElement      : '.m_grid__pixel',
+            canvasSize        : 17, // In voxel units
+            voxels            : [],
+            currentColor      : 'fff',
+            currentDepth      : 1,
+            mode              : 'drawing',
+            drawMode          : 'draw',
+            drawing           : false,
+            author            : 'VoCSSels',
+            zoomLevel         : .8, // Initial zoom level of our models preview
+            maxZoom           : 3, // The maximum you can zoom in 
+            minZoom           : .3, // The maximum you can zoom out
+            orientation       : '',
+            orientationButton : 'front',
+            savedModels       : '',
+            savedModelsMeta   : '',
+            loading           : false,
+            saving            : false,
+            shell             : true,
+            exporting         : false,
+            motion            : true,
+            muted             : false,
+            exportSettings: {
+                'name'        : 'My VoCSSel model',
+                'perspective' : 3000,
+                'bgColor'     : '#25273E',
+                'scale'       : 1,
+                'uid'         : 'madewithvocssels',
+                'spinSpeed'   : 10,
+                'animate'     : true,
+                'x'           : 0,
+                'y'           : 90,
+                'z'           : 0
+            },
+            metaPrefix        : 'p3d_metadata_',
+            modelPrefix       : 'p3d_modeldata_',
+            modal             : '',
+            modalOpen         : false,
+            symMode           : '',
+            picker: {
+                'x'      : 0,
+                'y'      : 0,
+                'active' : false,
+                'color'  : 'ffffff'
+            },
+            submitting       : false,
+            submitted        : false,
+            communityContent : []
+        }
+    },
+
+    methods: {
+        // Main draw function. Name is deceiving. Handles all interaction with pixels such as colour depth and shell
+        // debounced
+        drawPixel: _.debounce(function(event) {
+
+            event.stopPropagation();
+
+            let target = event.target;
+            let data = $(target).data(); // Get pixel data
+            let x = data.x; // Get pixel column
+            let y = data.y; // Get pixel row
+            let index = data.index; // Get index of pixel
+
+            if(event.which == 3 && this.mode == "drawing") {
+                this.drawMode = 'erase'
+            }
+
+            var v = _.get(this.voxels[index], 'c[0][0]', 'undefined');
+
+            if(v != 'undefined') {
+                this.picker.color = this.voxels[index].c[0][0]
+            }
+
+            // Fire when in drawing mode and not picking a colour
+            if(this.mode == 'drawing' && this.drawing && !this.picker.active) {
+
+                // Set colorpicker to current color
+                $("#colorPicker").spectrum("set", this.currentColor);
+
+                // Create a new voxel instance
+                if(this.drawMode == 'draw') {
+
+                    // If the user is currently in draw mode using draw
+                    var v = _.isEmpty(this.voxels[index].c);
+                    if(v) {
+                        // If no voxel, make one and store in array
+                        var voxel = new Voxel(x, y, 1, this.currentColor, index);   
+
+                        // Vue set to keep reactive
+                        Vue.set(this.voxels, index, voxel);
+
+                        // Play audio
+                        enJin.audioController.play('pop1');
+                    } else {
+
+                        // If the pixel we clicked on already has a voxel associated with it
+                        // Firstly, set the color array to empty
+                        let v = _.get(this.voxels[index], 'c', 'undefined');
+
+                        if(v != 'undefined') {
+                            this.voxels[index].h = false
+                            _.omit(this.voxels[index], 'd')
+
+
+
+
+                            // Generate each voxel (colour group)
+                            this.generateColors(index);
+
+                            // Only play a sound if the colour is different
+
+                            enJin.audioController.play('pop1')
+                        }
+
+                    }
+                } else {
+                    // If not in draw mode, then we must be in erase mode
+                    if(this.voxels[index].c != []) { // No point deleting nothing
+                        // Set the voxel back to an empty array
+                        Vue.set(this.voxels, index, []);
+
+                        // Play audio
+                        enJin.audioController.play('pop2');
+                    }
+                }
+                // If we are not in drawing mode, then check if in extrude mode
+            } else if(this.mode == 'extrude' && this.drawing) {
+
+                // Check if extruding and not shelling
+                if(this.drawMode == 'extrude') {
+
+                    // Check to make sure the selected extrusion is not on a voxel that doesnt exist
+                    var v = _.get(this.voxels[index], 'c', 'undefined');
+
+                    if(v != 'undefined') {
+                        // Start extrude
+                        // Set the d property of the voxel to the selected depth
+                        this.voxels[index].d = this.currentDepth;
+
+                        // Reset any shell props on the voxel
+                        this.voxels[index].h = false;
+
+                        // Generate each voxel (colour group)
+                        this.generateColors(index);
+
+                        // play audio
+                        enJin.audioController.play('pop2')
+                    }
+                } else {
+                    // If not extrude, then must be hollow
+                    var v = _.get(this.voxels[index], 'c', 'undefined');
+
+                    if(v != 'undefined') {
+
+                        // If shell is on
+                        if(this.shell == true) {
+                            // Check to make sure the selected extrusion is not on a voxel that doesnt exist
+                            var v = _.get(this.voxels[index], 'c', 'undefined');
+
+                            if(v != 'undefined') {
+                                // set the voxels hollow prop to true
+                                this.voxels[index].h = true;
+
+                                // Get ctx
+                                that = this;    
+
+                                var length = this.voxels[index].c.length;
+                                let color = this.voxels[index].c[0][0];
+
+                                let shelledColors = [];
+
+                                for(let i = 0; i < length; i++) {
+                                    if(i == 0 || i == (length - 1)) {
+
+                                        var s = {
+                                            0: lightenDarkenColor(color, 0),
+                                            1: lightenDarkenColor(color, -5),
+                                            2: lightenDarkenColor(color, -10),
+                                            3: lightenDarkenColor(color, -15),
+                                            4: lightenDarkenColor(color, -20),
+                                            5: lightenDarkenColor(color, -25)
+                                        }
+
+                                        } else {
+                                            var s = '';
+                                        }
+
+                                    shelledColors.push(s)   
+                                }
+
+                                Vue.set(this.voxels[index], 'c', shelledColors);
+                            }
+
+                        } else {
+                            // If shell is off
+                            // Check to make sure the selected extrusion is not on a voxel that doesnt exist
+                            var v = _.get(this.voxels[index], 'c', 'undefined');
+
+                            if(v != 'undefined') {
+                                // set the voxels hollow prop to false
+                                this.voxels[index].h = false
+
+                                // Generate each voxel (colour group)
+                                this.generateColors(index);
+                            }
+
+                        }
+
+                        // Play audio only if the voxel is shelled
+                        if(this.voxels[index].h) {
+                            enJin.audioController.play('pop4') ;
+                        }
+                    }
+                }
+            }
+        }, 1),
+
+        generateColors(voxel) {
+
+            var v = _.get(this.voxels[voxel], 'c[0][0]', 'undefined');
+
+            if(v != 'undefined') {
+
+                if(this.mode == 'extrude') {
+                    var color = this.voxels[voxel].c[0][0];
+                } else {
+                    var color = this.currentColor;
+                }
+
+                // Then set all colours to [].
+                this.voxels[voxel].c = [];
+
+                // Now create an empty object for our colours
+                let newColours = [];
+
+                // Loop through and create colours for each voxel
+                for(let i = 0; i < this.currentDepth; i++) {
+                    let colours = {
+                        0: lightenDarkenColor(color, 0),
+                        1: lightenDarkenColor(color, -5),
+                        2: lightenDarkenColor(color, -10),
+                        3: lightenDarkenColor(color, -15),
+                        4: lightenDarkenColor(color, -20),
+                        5: lightenDarkenColor(color, -25)
+                    }
+                    // Add colours to array
+                    newColours.push(colours);
+                }
+
+                // Push this array to the voxel
+                Vue.set(this.voxels[voxel], 'c', newColours);
+            }
+        },
+
+        paint: _.debounce(function(event) {
+            let target = event.target;
+            let index = $(target).closest('.voxel-group').data().index // Get index of pixel
+            let voxelIndex = $(target).parent().data().index // Get index of pixel
+            let vertexIndex = $(target).data().vertex // Get index of pixel
+
+            enJin.audioController.play('pop1');
+            Vue.set(this.voxels[index].c[voxelIndex], vertexIndex, this.currentColor);
+        }, 15),
+
+        swapMode(mode) {
+            this.orientation = {}
+            this.zoomLevel = .8;
+            this.mode = mode;
+
+            enJin.audioController.play('pop3')
+        },
+
+        setDepth(event) {
+            let target = event.target;
+            let depth = $(target).data().depth;
+            this.currentDepth = depth;
+
+        },
+
+        handleZoom(amount) {
+
+            if(amount > 0) {
+                // in
+                if(this.zoomLevel < this.maxZoom) {
+                    this.zoomLevel += amount;
+                } else {
+                    this.zoomLevel = this.maxZoom;
+                }
+            } else {
+                // out
+                if(this.zoomLevel > this.minZoom) {
+                    this.zoomLevel += amount;
+                } else {
+                    this.zoomLevel = this.minZoom;
+                }
+            }
+        },
+
+
+        zoom(event) {
+            if(this.mode != 'export') {
+                const deltaY = event.deltaY;
+                if(deltaY < 0) {
+                    this.handleZoom(0.03);
+                } else {
+                    this.handleZoom(-0.03);
+                }      
+            }
+        },
+
+        updateOrientation(x, y, z, exp) {
+
+            enJin.audioController.play('pop4')
+
+            this.exportSettings.x = x;
+            this.exportSettings.y = y;
+            this.exportSettings.z = z;
+        },
+
+        processForExport() {
+
+            enJin.audioController.play('pop6');
+            this.exporting = true;
+            var hamlArray = '- @voxels = [';
+
+            that.voxels.forEach(function(v) {
+                if(v.length != 0) {
+                    let colors = '[';
+                    v.c.forEach(function(c) {
+                        let colourString = '{'
+                        for (let key of Object.keys(c)) {
+                            let col = c[key];
+                            let index = key;
+                            var comma;
+                            if(key != 0) {
+                                comma = ','
+                            } else {
+                                comma = ''
+                            }
+                            colourString = `${colourString} ${comma} ${index} => '${col}'`
+                        }
+                        colourString = colourString + '}'
+                        colors = colors + colourString + ','
+                    })
+                    let haml = `{:x => ${v.x}, :y => ${v.y}, :d => ${v.d}, :c => ${colors}]},`
+                    hamlArray += haml
+                }
+            })
+
+            const data = {
+                title : `${this.exportSettings.name} - A 3D Pure CSS & HTML Model Made With VoCSSels`,
+                css : `$voxelSize: 26; // We want to work as 1 unit is 1 voxel occupying one space. So here we are setting the the amount of pixels a voxel takes. This will need to be the same as the voxel size in the vue data object.
+$maxDepth: 17;
+$spinSpeed: ${this.exportSettings.spinSpeed}s;
+$uid: ${rot13(this.exportSettings.uid)};
+
+// Return the true px size of a voxel based on the passed unit.
+@function getVoxelSize($size, $operator) {
+    @return unquote($operator + $size * $voxelSize + px);    
+}
+
+// Function to set the orientation of a side
+@function setFaceOrientation($tx, $ty, $tz, $sx, $sy, $rx, $ry, $rz) {
+    @return rotateX($rx + deg) rotateY($ry + deg) rotateZ($rz + deg) scaleX($sx) scaleY($sy) translate3d(unquote($tx + ',' + $ty + ',' + $tz)); 
+}
+
+%voxel {
+    position: absolute;
+    top: 50%;
+    transform-style: preserve-3d;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 10px;
+}
+
+%face {
+    width: $voxelSize + px;
+    height: $voxelSize + px;
+    position: absolute;
+    transform-style: preserve-3d;
+    transform-origin: 50% 50%;
+}
+
+body {
+    height: 100vh;
+    overflow: hidden;
+    background: ${this.exportSettings.bgColor};
+
+    .p3d_playground {
+        height: 100vh;
+        perspective: ${this.exportSettings.perspective}px;
+        transform: scale(${this.exportSettings.scale});
+
+        .model {
+            height: 100vh;
+            transform-style: preserve-3d;
+            ${this.exportSettings.animate ? 'animation: spin $spinSpeed infinite linear;' : ''}
+            transform-origin: 50% 50% getVoxelSize($maxDepth / 2, '');
+            transform: scale(.6) rotateZ(${this.exportSettings.z}deg) rotatex(${this.exportSettings.x}deg) rotateY(-${this.exportSettings.y}deg) translateY(getVoxelSize($maxDepth / 2, '-'));
+            transition: all .3s;
+
+            @media only screen and (max-width: 700px) {
+               transform: scale(.5) rotateZ(${this.exportSettings.z}deg) rotatex(${this.exportSettings.x}deg) rotateY(-${this.exportSettings.y}deg) translateY(getVoxelSize($maxDepth / 2, '-'));
+            }
+
+            @keyframes spin {
+                from { transform: scale(1) rotateY(0deg) rotateZ(0deg) rotatex(0deg) translateY(getVoxelSize($maxDepth / 2, '-'));}
+                to { transform: scale(1) rotateY(360deg) rotateZ(0deg) rotatex(0deg) translateY(getVoxelSize($maxDepth / 2, '-'));}
+            }
+
+            .voxel,
+            .voxel-group,
+            .v {
+                @extend %voxel;
+            }
+
+            .f {
+                @extend %face;
+            }
+
+            // Utility classes
+            @for $x from 0 through 20 {
+                @for $y from 0 through 20 {
+                    .x-#{$x}.y-#{$y} {
+                        transform: translateZ(getVoxelSize($x - 0.1, '')) translateY(getVoxelSize($y - 0.1, ''));
+                    }
+                }
+            }
+
+            // Depths
+            // This can be done on a normal loop as depth will be limited
+            .f {
+                @for $v from 1 through 6 {
+                    &:nth-of-type(#{$v}) {
+                        $operator: if($v % 2 == 0, '', '-');
+                        @if $v == 1 or $v == 2 {
+                            transform: setFaceOrientation(0, 0, getVoxelSize(1 / 2, $operator), 1, 1, 0, 90, 0);
+                        }
+                        @if $v == 3 or $v == 4 {
+                            transform: setFaceOrientation(0, 0, getVoxelSize(1 / 2, $operator),1 , 1, 0, 0, 0);
+                        }
+                        @if $v == 5 or $v == 6 {
+                            transform: setFaceOrientation(0, 0, getVoxelSize(1 / 2, $operator), 1, 1, 90, 0, 0);
+                        }
+                    }
+                }
+            }
+
+            @for $i from 0 through 14 {
+                .d-#{$i} {
+                    transform: translateX(23px * $i);
+                }
+                .g-#{$i} {
+                    transform: translateX(-23px * ($i / 2));
+                }
+            }
+        }
+    }
+}`,
+                css_pre_processor : "scss",
+                html_pre_processor : "haml",
+                html : `${hamlArray}] 
+-# Created using VoCSSels by Jamie Coulter https://codepen.io/jcoulterdesign/pen/vYyzZdo
+.p3d_playground
+    .model
+        - @voxels.each do | voxel |
+            .voxel-group{:class => "g-#{voxel[:d]}"}
+                -(1..voxel[:d]).each do | index |
+                    .voxel{:class => "d-#{index}"}
+                        .v{:class => "x-#{voxel[:x]} y-#{voxel[:y]}"}
+                            -(1..6).each do | v |
+                                .f.f--t{:style => "background-color: ##{voxel[:c][index - 1][v]}"}`
+            };
+
+            const JSONstring = JSON.stringify(data).replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+            const form = `<form class="export" action="https://codepen.io/pen/define" method="POST" target="_blank"><input class="change" type="hidden" name="data" value='${JSONstring}'><input type="submit" width="40" height="40" value="Export to new pen"></form>`;
+            $('.editor_right__export .form').html('');
+            $('.editor_right__export .form').append(form);
+            that = this;
+            setTimeout(function() {
+                that.exporting = false;
+                $('.export').submit();
+            }, 1500)
+
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Save model to local storage
+
+        ------------------------------------------------------------------------- */
+
+        save() {
+            // Work out todays date
+            let today = new Date();
+            let dd = String(today.getDate()).padStart(2, '0');
+            let mm = String(today.getMonth() + 1).padStart(2, '0');
+            let yyyy = today.getFullYear();
+
+            let date = mm + '.' + dd + '.' + yyyy;
+
+            // Save model to local storage
+            // Start by creating a metadata object for our models information
+            let metaData = {
+                'date'     : date,
+                'author'   : this.author,
+                'name'     : this.exportSettings.name,      // Get the model name
+                'voxels'   : $('.v').length, // Get the total voxels in the model
+                'vertices' : $('.f').length, // Get the total vertices in the model
+                'image'    : '',             // Set a blank string for the base64 image data
+                'bgColor'  : this.exportSettings.bgColor
+            }
+
+            // Set a new item in local storage for the model data and assing the JSON to it
+            window.localStorage.setItem(this.modelPrefix + this.exportSettings.name.toLowerCase().replace(/\s/g, ''), JSON.stringify(this.voxels));
+
+            // Set saving flag to show saving icon
+            this.saving = !this.saving;
+
+            // Reset the zoom level for the snap shot
+            this.zoomLevel = 0.8;
+
+            // Take snapshop of model node
+            const node = document.getElementById('model');
+
+            // Hide preview buttons
+            $('.zooms').hide();
+
+            domtoimage.toPng(node)
+                .then(function (dataUrl) {
+
+                var that = this; // Get context
+                var img = new Image(); 
+
+                // Set image in meta data to data url
+                metaData.image = dataUrl; 
+
+                // Set local storage item to metadata
+                window.localStorage.setItem(that.metaPrefix + that.exportSettings.name.toLowerCase().replace(/\s/g, ''), JSON.stringify(metaData));
+
+
+
+                // Set saving flag back to false after a reasonable delay
+                setTimeout(function() {
+                    // Show preview buttons
+                    $('.zooms').show();
+
+                    // Reset saving flag
+                    that.saving = !that.saving;
+
+                    // Update the saved models arrays so they are accessible in the modal straight away
+                    that.getSavedModels();
+
+                    // Play sound feedback
+                    enJin.audioController.play('save')
+                }, 1000)
+
+            }.bind(this)); 
+        },
+
+        handleRightClick() {
+
+            if(this.drawMode == 'erase') {
+                this.drawMode = 'draw'
+            }  
+
+        },
+        shareModel() {
+            // Work out todays date
+            let today = new Date();
+            let dd = String(today.getDate()).padStart(2, '0');
+            let mm = String(today.getMonth() + 1).padStart(2, '0');
+            let yyyy = today.getFullYear();
+
+            let date = mm + '.' + dd + '.' + yyyy;
+
+            let metaData = {
+                'date'     : date,
+                'author'   : this.author,
+                'name'     : this.exportSettings.name,      // Get the model name
+                'voxels'   : $('.v').length, // Get the total voxels in the model
+                'vertices' : $('.f').length, // Get the total vertices in the model
+                'image'    : '',             // Set a blank string for the base64 image data
+                'bgColor'  : this.exportSettings.bgColor
+            }
+
+            metaData.modelData = [this.voxels];
+
+            // Reset the zoom level for the snap shot
+            this.zoomLevel = 0.8;
+
+            // Take snapshop of model node
+            const node = document.getElementById('model');
+
+            // Hide preview buttons
+            $('.zooms').hide();
+
+            this.submitting = !this.submitting;
+
+            domtoimage.toPng(node)
+                .then(function (dataUrl) {
+
+                var that = this; // Get context
+                var img = new Image(); 
+
+                // Set image in meta data to data url
+                metaData.image = dataUrl; 
+
+                // Set local storage item to metadata
+                window.localStorage.setItem(that.metaPrefix + that.exportSettings.name.toLowerCase().replace(/\s/g, ''), JSON.stringify(metaData));
+                if(that.submitting == false) {
+                    // Set saving flag back to false after a reasonable delay
+                    setTimeout(function() {
+                        // Show preview buttons
+                        $('.zooms').show();
+
+                        // Post data to zapier webhook
+                        var xhr = new XMLHttpRequest();
+                        xhr.open("POST", 'https://hooks.zapier.com/hooks/catch/708069/onctccu', true);
+                        xhr.send(JSON.stringify(metaData));
+
+
+
+                        setTimeout(function() {
+                            that.submitted = true;
+                            that.submitting = false;
+                            enJin.audioController.play('save')
+                        }, 2000)
+                    }, 1000)
+                }
+
+            }.bind(this));
+
+
+        },
+        /* -------------------------------------------------------------------------
+
+        Get models from local storage
+
+        ------------------------------------------------------------------------- */
+
+        getSavedModels() {
+
+            // First, clear any data from the saved models and meta arrays
+            let savedModels = [];
+            let savedModelsMeta = [];
+
+            // Iterate over localStorage and insert the keys that meet the condition into arr
+            for (let i = 0; i < window.localStorage.length; i++) {
+                // Check for p3d_modeldata prefix
+                if (window.localStorage.key(i).substring(0, this.modelPrefix.length) == this.modelPrefix) {
+                    savedModels.push(window.localStorage.key(i));
+                }
+                // Check for p3d_modeldata prefix
+                if (window.localStorage.key(i).substring(0, this.metaPrefix.length) == this.metaPrefix) {
+                    savedModelsMeta.push(window.localStorage.key(i));
+                }
+            }
+
+            // Set the arrays to the model data and meta keys. This will then update vue loop in the load modal
+            let meta = savedModelsMeta.sort();
+            let data = savedModels.sort();
+
+            this.savedModelsMeta = meta;
+            this.savedModels = data;
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Get meta data entry for saved model
+
+        ------------------------------------------------------------------------- */
+
+        getMetaData(key, index) {
+            let data = JSON.parse(window.localStorage.getItem(index));
+            let metaData = data[key];
+            return metaData;
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Load model from local storage
+
+        ------------------------------------------------------------------------- */
+
+        load(model, community) {
+
+            if(!community) {
+
+                var target = this.savedModels[model];
+                var metaTarget = this.savedModelsMeta[model];
+
+                var modelData = window.localStorage.getItem(target);
+                var metaData = JSON.parse(window.localStorage.getItem(metaTarget));
+
+
+            } else {
+                var metaData = model
+                var modelData = model.modelData[0];
+            }
+
+
+
+
+            // Remove all voxel information
+            this.voxels = [];
+            this.exportSettings.name = metaData.name;
+            this.mode = 'drawing';
+
+            // Re get context
+            that = this;
+            this.loading = !this.loading;
+
+            setTimeout(function() {
+
+                $("#colorBg, #exportBg").spectrum("set", metaData.bgColor);
+                that.exportSettings.bgColor = metaData.bgColor;
+
+                if(!community) {
+                    that.voxels = JSON.parse(modelData);
+                } else {
+                    that.voxels = modelData;
+                }
+
+                that.loading = !that.loading;
+            }, 1000)
+        },
+
+        newModel() {
+            this.voxels = [];
+            this.mode = 'drawing';
+            $("#colorBg, #exportBg").spectrum("set", '#25273E');
+            $("#colorPicker").spectrum("set", '#ffffff');
+            that.exportSettings.bgColor = '#25273E';
+
+            for(let i = 0; i < Math.pow(this.canvasSize, 2); i++) {
+                this.voxels.push([]);
+            }
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Open modal
+
+        ------------------------------------------------------------------------- */
+
+        openModal(modal) {
+            this.modalOpen = true;
+            this.modal = modal;
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Close modals
+
+        ------------------------------------------------------------------------- */
+
+        closeModals() {
+            this.modalOpen = false;
+
+
+            this.modal = '';
+            that = this;
+
+            setTimeout(function() {
+                that.submitted = false;
+            }, 1000)
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Open modal
+
+        ------------------------------------------------------------------------- */
+
+        colorPicker(event) {
+            this.picker.x = event.clientX;
+            this.picker.y = event.clientY;
+        },
+
+        selectColor: _.debounce(function() {
+            if(this.picker.active) {
+                this.picker.active = !this.picker.active;
+                this.currentColor = this.picker.color;
+                $("#colorPicker").spectrum("set", this.picker.color);
+            }
+        }, 10),
+
+        /* -------------------------------------------------------------------------
+
+        Reset all of the colour pickers to their default values
+
+        ------------------------------------------------------------------------- */
+
+        getVoxelsCount(model) {
+            return $('.v').length;
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Reset all of the colour pickers to their default values
+
+        ------------------------------------------------------------------------- */
+
+        getVerticesCount(model) {
+            return $('.f').length;
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Reset all of the colour pickers to their default values
+
+        ------------------------------------------------------------------------- */
+
+        resetBgColor() {
+            $("#colorBg, #exportBg").spectrum("set", '#25273E');
+            this.exportSettings.bgColor = '#25273E';
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Get all community models from GitHub gists
+
+        ------------------------------------------------------------------------- */
+
+        getCommunityModels() {
+            let xhr = new XMLHttpRequest();
+
+            xhr.open('GET', 'https://api.github.com/users/jcoulterdesign/gists');
+            xhr.send();
+
+            // Store contenxt
+            that = this;
+
+            xhr.onload = function() {
+                if (xhr.status == 200) { 
+                    let gists = JSON.parse(xhr.response);
+                    let urls = []; // Raw urls array
+
+                    gists.forEach(function(g) {
+                        let files = g.files;
+
+                        for (let key of Object.keys(files)) {
+                            let raw_url = files[key].raw_url;
+                            urls.push(raw_url);
+                        }
+                    })
+
+                    // Now we have a list of all approved gists. Loop through and get the content of each one and
+                    // store to our vue instance
+
+                    var xhrReq = [];
+
+                    urls.forEach(function(u, i) {
+                        xhrReq[i] = new XMLHttpRequest();
+                        xhrReq[i].open('GET', u);
+                        xhrReq[i].send();
+
+                        ctx = that;
+                        xhrReq[i].onload = function() {
+                            if (xhrReq[i].status == 200) {
+                                ctx.communityContent.push(JSON.parse(xhrReq[i].response));
+                            }
+                        }
+                    })
+
+                    $('.community .x-wrap').width(urls.length * 265 + 'px')
+                }
+            };
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Delete model from local storage
+
+        ------------------------------------------------------------------------- */
+
+        deleteModel(model) {
+            // Get the relevant entry in storage
+            let target = this.savedModels[model];
+            let targetMeta = this.savedModelsMeta[model];
+
+            // Remove both the meta and the model data
+            window.localStorage.removeItem(target);
+            window.localStorage.removeItem(targetMeta);
+
+            // Update the UI by updating models array
+            this.getSavedModels();
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Toggle the audio controller muted prop
+
+        ------------------------------------------------------------------------- */
+
+        toggleAudio() {
+            enJin.audioController.play('pop6');
+            enJin.audioController.muted = !enJin.audioController.muted;
+            this.muted = !this.muted
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Quick and dirty way to reduce motion in the app. Add a class to everything that
+        has transition-duration 0
+
+        ------------------------------------------------------------------------- */
+
+        toggleMotion() {
+            enJin.audioController.play('pop6');
+            this.motion = !this.motion;
+            if(this.motion) {
+                $('*').removeClass('noMotion');
+            } else {
+                $('*').addClass('noMotion');
+            }
+        }
+    },
+
+    mounted() {
+
+        // Get all the community VoCSSels for github gists
+        this.getCommunityModels();
+
+        // Get all saved models from local storage
+        this.getSavedModels();
+
+        // Prepare an empty voxels array
+        for(let i = 0; i < Math.pow(this.canvasSize, 2); i++) {
+            this.voxels.push([]);
+        }
+
+        /* -------------------------------------------------------------------------
+
+        Set up our spectrums
+
+        ------------------------------------------------------------------------- */
+
+        // Main colour selector
+        $("#colorPicker").spectrum({
+            color: "ffffff",
+            preferredFormat: "hex",
+            flat: true,
+            showInput: true,
+            showPalette: true,
+            palette: [],
+            showSelectionPalette: true, // true by default
+            selectionPalette: [],
+            clickoutFiresChange: true,
+            maxSelectionSize: 15,
+            move(color) {
+                that.currentColor = color.toHexString().substring(1); // #ff0000
+
+            }
+        });
+
+        // Auto switch to draw when selecting a colour
+        $('#colorPicker').on("dragstart.spectrum", function(e, color) {
+            that.drawMode = 'draw'
+        });
+
+        // Auto switch to draw when selecting a colour
+        $('#colorPicker').on("move.spectrum", function(e, color) {
+            that.drawMode = 'draw'
+        });
+
+        // Background color selectors for preview panel and export
+        $("#colorBg, #exportBg").spectrum({
+            color: "25273E",
+            containerClassName: 'bg',
+            move(color) {
+                that.bgColor = color.toHexString(); // #ff0000
+                that.exportSettings.bgColor = color.toHexString();
+                $("#colorBg, #exportBg").spectrum("set", color.toHexString());
+            }
+        });
+
+        // Make sure the first palette entry is selected
+        $('.sp-thumb-inner').click();
+
+        // Simple preloader
+        setTimeout(function() {
+            $('.p3d_loader').fadeOut();
+        }, 4000)
+    }
+});
+
+// Symmetry
+// Fix intermittent bug
+// Optimize
\ No newline at end of file
diff --git a/vocsselseasily-create-3d-css-html-voxel-models/dist/style.css b/vocsselseasily-create-3d-css-html-voxel-models/dist/style.css
new file mode 100644
index 0000000..76b201c
--- /dev/null
+++ b/vocsselseasily-create-3d-css-html-voxel-models/dist/style.css
@@ -0,0 +1,7321 @@
+@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&display=swap");
+* {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+body {
+  background: #25273E;
+  color: white;
+  font-family: "Baloo 2", cursive;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  height: 100vh;
+}
+body .l {
+  position: fixed;
+  width: 50px;
+  height: 10px;
+  background: red;
+  right: 358px;
+  top: -10px;
+  box-shadow: 0 0 20px 1px #f44336;
+  -webkit-animation: love 2s infinite;
+          animation: love 2s infinite;
+}
+@-webkit-keyframes love {
+  0% {
+    box-shadow: 0 0 20px 1px #f44336;
+  }
+  50% {
+    box-shadow: 0 0 26px 3px #f44336;
+  }
+  100% {
+    box-shadow: 0 0 20px 1px #f44336;
+  }
+}
+@keyframes love {
+  0% {
+    box-shadow: 0 0 20px 1px #f44336;
+  }
+  50% {
+    box-shadow: 0 0 26px 3px #f44336;
+  }
+  100% {
+    box-shadow: 0 0 20px 1px #f44336;
+  }
+}
+body .noMotion {
+  transition-duration: 0s !important;
+}
+body .noMotion div {
+  transition-duration: 0s !important;
+}
+body .hide {
+  pointer-events: none;
+}
+body .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner,
+body .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
+  background-image: none;
+}
+body .sp-flat {
+  z-index: 0;
+}
+body .sp-input {
+  font-size: 12px !important;
+  border: 1px inset;
+  padding: 8px 10px;
+  margin: -20px 0 0 0;
+  width: calc(100% - 56px);
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  font-family: "Baloo 2", cursive;
+  font-weight: 700;
+  color: white;
+  position: relative;
+  top: -11px;
+  left: 2px;
+  border: 0 !important;
+  outline: none !important;
+}
+body .sp-input:focus {
+  box-shadow: 0 0 0 3px #E5513A inset;
+}
+body .sp-container {
+  background: transparent;
+  border: 0;
+  width: 170px;
+  margin-left: 6px;
+  margin-top: 22px;
+}
+body .sp-container.bg {
+  border: 0;
+  height: 130px;
+  border-radius: 10px;
+  width: 170px;
+  margin-left: 6px;
+  margin-top: 22px;
+  transform: translate(-363px, 12px) !important;
+}
+body .sp-thumb-el {
+  border-radius: 10px;
+  transition: all 0.2s;
+}
+body .sp-thumb-el:hover {
+  transform: scale(1.1);
+}
+body .sp-thumb-inner {
+  box-shadow: 0 0 0 0 inset white;
+  transition: all 0.3s;
+  background: none;
+}
+body .sp-thumb-active .sp-thumb-inner {
+  background: none;
+  box-shadow: 0 0 0 3px inset white;
+}
+body .sp-top-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 140px;
+  height: 110px;
+  right: 0;
+}
+body .sp-palette .sp-thumb-inner {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  border-radius: 10px;
+}
+body .sp-color,
+body .sp-hue,
+body .sp-clear {
+  border: 0;
+}
+body .sp-palette-container {
+  border: 0;
+}
+body .sp-palette .sp-thumb-el {
+  width: 40px;
+  height: 40px;
+  margin: 5px;
+  border: 0;
+  background: transparent;
+}
+body .sp-hue {
+  width: 10px;
+  border-radius: 10px;
+  margin-left: 11px;
+}
+body .sp-slider, body .sp-dragger {
+  position: absolute;
+  top: 0;
+  cursor: pointer;
+  height: 10px;
+  width: 10px;
+  transform: translate(4px, 4px);
+  left: -6px;
+  top: 4px;
+  border-radius: 16px;
+  border: 2px solid #fff;
+  background: transparent;
+  opacity: 1;
+}
+body .sp-button-container.sp-cf {
+  display: none;
+}
+body .sp-picker-container {
+  width: 172px;
+  border-left: solid 0px #fff;
+}
+body .sp-val {
+  box-shadow: 0 0 0 3px inset white;
+  border-radius: 10px;
+  padding: 10px;
+}
+body .sp-color {
+  border-radius: 10px;
+  overflow: hidden;
+}
+body .sp-top {
+  margin-left: 4px;
+}
+body .p3d {
+  height: 100vh;
+  width: 100vw;
+}
+body .p3d_colorPicker {
+  width: 40px;
+  height: 40px;
+  background: red;
+  position: absolute;
+  z-index: 2;
+  border-radius: 30px;
+  transform: translate(-20px, -20px);
+  pointer-events: none;
+  transition: background 0.1s;
+  border: 3px solid white;
+}
+body .p3d_loader {
+  position: fixed;
+  background: #25273E;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+body .p3d_loader__inner {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  top: 50%;
+  transform: translateY(-50%) scale(0);
+  width: 100px;
+  -webkit-animation: loadIn 2.75s 1s cubic-bezier(0.035, 1.495, 0.625, 0.89) forwards;
+          animation: loadIn 2.75s 1s cubic-bezier(0.035, 1.495, 0.625, 0.89) forwards;
+}
+body .p3d_loader__inner .b, body .p3d_loader__inner .f {
+  position: absolute;
+  width: 45px;
+  height: 45px;
+  background: #0000001c;
+  border-radius: 10px;
+  top: -13px;
+  left: 30px;
+  z-index: -1;
+}
+body .p3d_loader__inner .f {
+  background: #E5513A;
+  -webkit-animation: load 1.5s 1.5s forwards;
+          animation: load 1.5s 1.5s forwards;
+  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
+          clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
+}
+@-webkit-keyframes load {
+  from {
+    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
+            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
+  }
+  to {
+    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
+            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
+  }
+}
+@keyframes load {
+  from {
+    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
+            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
+  }
+  to {
+    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
+            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
+  }
+}
+@-webkit-keyframes loadIn {
+  0% {
+    transform: translateY(-50%) scale(0);
+    opacity: 1;
+  }
+  10% {
+    transform: translateY(-50%) scale(1);
+    opacity: 1;
+  }
+  90% {
+    transform: translateY(-50%) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-50%) scale(0);
+    opacity: 0;
+  }
+}
+@keyframes loadIn {
+  0% {
+    transform: translateY(-50%) scale(0);
+    opacity: 1;
+  }
+  10% {
+    transform: translateY(-50%) scale(1);
+    opacity: 1;
+  }
+  90% {
+    transform: translateY(-50%) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-50%) scale(0);
+    opacity: 0;
+  }
+}
+body .p3d_overlay {
+  background: rgba(16, 14, 29, 0.8);
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  opacity: 0;
+  transition: all 0.2s 0.2s;
+  pointer-events: none;
+}
+body .p3d_overlay.open {
+  opacity: 1;
+  pointer-events: all;
+  transition: all 0.2s 0s;
+}
+body .p3d .modal .row {
+  padding: 10px;
+}
+body .p3d .modal .row-half {
+  margin-bottom: 10px;
+  width: 50%;
+  float: left;
+}
+body .p3d .modal .row label {
+  font-size: 14px;
+  margin-bottom: 6px;
+  display: block;
+}
+body .p3d .modal input[type=text] {
+  padding: 14px 20px;
+  font-weight: 600;
+  width: calc(100% - 50px);
+  border-radius: 10px;
+  color: white;
+  border: none;
+  font-family: "Baloo 2", cursive;
+  background: #00000024;
+  outline: none;
+  box-shadow: 0 0 0 0px #ffc215 inset;
+  transition: all 0.3s;
+}
+body .p3d .modal input[type=text]:focus {
+  box-shadow: 0 0 0 3px #ffc215 inset;
+}
+body .p3d .modal .b {
+  padding: 11px;
+  margin-top: 10px;
+  clear: both;
+  float: left;
+}
+body .p3d .modal .b button {
+  color: #6d581e;
+  background: #f3c032;
+  border: 0;
+  border-radius: 10px;
+  font-size: 14px;
+  padding: 16px 24px;
+  font-weight: 700;
+  outline: none;
+  font-family: "Baloo 2", cursive;
+  position: relative;
+  float: left;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+body .p3d .modal .b button img {
+  mix-blend-mode: luminosity;
+}
+body .p3d .modal .b button.submitting {
+  padding-left: 46px;
+}
+body .p3d .modal .b button.submitting img {
+  transform: scale(1);
+}
+body .p3d .modal .b button:nth-of-type(1) {
+  margin-right: 16px;
+}
+body .p3d .modal .b button:nth-of-type(1):hover {
+  transform: scale(1.1);
+}
+body .p3d .modal .b button:nth-of-type(2) {
+  margin-right: 16px;
+  color: #ffffff;
+  background: transparent;
+  box-shadow: 0 0 0 3px inset white;
+}
+body .p3d .modal .b button:nth-of-type(2):hover {
+  background: white;
+  color: #25273E;
+}
+body .p3d .modal .b button img {
+  transform: scale(0);
+  position: absolute;
+  left: 13px;
+  top: 13px;
+  height: 26px;
+  transition: all 0.3s 0.1s;
+}
+body .p3d_load {
+  position: fixed;
+  left: 0;
+  right: 0;
+  margin: auto;
+  z-index: 10;
+  transform: scale(0);
+  height: 100%;
+  width: 0;
+  pointer-events: none;
+  transition: all 0.3s 0s cubic-bezier(0.035, 1.495, 0.625, 0.89);
+}
+body .p3d_load.open {
+  transform: scale(1);
+  pointer-events: all;
+  transition: all 0.3s 0.2s cubic-bezier(0.035, 1.495, 0.625, 0.89);
+}
+body .p3d_load h4 {
+  color: #E5513A;
+}
+body .p3d_load .close {
+  position: absolute;
+  right: -24px;
+  top: -24px;
+  background: #25273E;
+  border-radius: 100px;
+  width: 40px;
+  height: 40px;
+  line-height: 42px;
+  text-align: center;
+  border: 3px solid white;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+body .p3d_load .close:hover {
+  background: white;
+  color: #25273E;
+}
+body .p3d_load__inner {
+  position: fixed;
+  left: 0;
+  right: 0;
+  margin: auto;
+  z-index: 10;
+  background: #25273E;
+  border: 3px solid white;
+  width: 440px;
+  border-radius: 20px;
+  padding: 40px;
+  font-weight: 600;
+  top: 50%;
+  transform: translateY(-50%) translateX(-50%);
+}
+body .p3d_load__inner h1 {
+  margin: -10px 0px 0px 10px;
+}
+body .p3d_load__inner p {
+  margin: 0 0 20px 10px;
+}
+body .p3d_load__inner .delete,
+body .p3d_load__inner .load {
+  cursor: pointer;
+}
+body .p3d_load__inner .delete {
+  color: #E5513A;
+}
+body .p3d_load__inner .s-wrap {
+  max-height: 315px;
+  overflow-x: hidden;
+  padding-right: 10px;
+  overflow-y: scroll;
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+body .p3d_load__inner .s-wrap::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 10px;
+}
+body .p3d_load__inner .s-wrap::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.2);
+}
+body .p3d_load__inner .s-wrap::-webkit-scrollbar-thumb {
+  background: #E5513A;
+  border-radius: 10px;
+}
+body .p3d_load__inner .p3d_load__model {
+  overflow: hidden;
+  background: transparent;
+  border-radius: 10px;
+  padding: 10px;
+  transition: all 0.3s;
+  position: relative;
+}
+body .p3d_load__inner .p3d_load__model:last-child:not(.empty) {
+  margin-bottom: 0;
+}
+body .p3d_load__inner .p3d_load__model:not(.empty) {
+  cursor: pointer;
+}
+body .p3d_load__inner .p3d_load__model:not(.empty):hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+body .p3d_load__inner .p3d_load__model:not(.empty):hover .delete {
+  opacity: 1;
+  top: 0;
+}
+body .p3d_load__inner .p3d_load__model .m_image {
+  width: 35%;
+  float: left;
+  height: 142px;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 3px solid white;
+  border-radius: 10px;
+  background-size: 190% !important;
+  background-position: center center !important;
+}
+body .p3d_load__inner .p3d_load__model .m_image img {
+  width: 100%;
+  border-radius: 10px;
+  display: block;
+}
+body .p3d_load__inner .p3d_load__model .m_details {
+  width: 50%;
+  float: left;
+  padding-left: 15px;
+  padding-top: 14px;
+}
+body .p3d_load__inner .p3d_load__model .m_details .load {
+  margin: 10px;
+  background: #ffc720;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  transition: all 0.3s;
+  border-radius: 40px;
+  transform: scale(1);
+}
+body .p3d_load__inner .p3d_load__model .m_details .load:hover {
+  transform: scale(1.1);
+}
+body .p3d_load__inner .p3d_load__model .m_details .load img {
+  position: relative;
+  left: 12px;
+  top: 8px;
+  opacity: 0.5;
+}
+body .p3d_load__inner .p3d_load__model .m_details .delete {
+  font-size: 14px;
+  opacity: 0;
+  transition: all 0.2s;
+  margin-top: 16px;
+  position: absolute;
+  right: 20px;
+  top: 10px;
+}
+body .p3d_load__inner .p3d_load__model .m_details .delete:hover {
+  text-decoration: underline;
+}
+body .p3d_load__inner .p3d_load__model .m_details p.name {
+  margin-bottom: 0px;
+  font-size: 22px;
+  margin-top: 8px;
+  text-transform: capitalize;
+}
+body .p3d_load__inner .p3d_load__model .m_details p.date {
+  margin-bottom: -6px;
+  font-size: 12px;
+  opacity: 0.3;
+  margin-top: 10px;
+}
+body .p3d_load__inner .p3d_load__model .m_details p.author {
+  font-size: 12px;
+  margin: -7px 0 7px 10px;
+}
+body .p3d_load__inner .p3d_load__model .m_details p.voxels {
+  margin-bottom: 0px;
+  font-size: 12px;
+}
+body .p3d_load__inner .p3d_load__model .m_details p.voxels span {
+  color: #E5513A;
+}
+body .p3d_load.community .p3d_load__inner {
+  width: 800px;
+}
+body .p3d_load.community .p3d_load__model {
+  overflow: hidden;
+  background: transparent;
+  border-radius: 10px;
+  padding: 10px;
+  float: left;
+  transition: all 0.3s;
+  width: 244px;
+  position: relative;
+}
+body .p3d_load.community .p_name {
+  margin-bottom: 1px;
+  font-size: 22px;
+  margin-top: 6px;
+  text-transform: capitalize;
+}
+body .p3d_load.community .m_image {
+  width: 100%;
+  float: left;
+  height: 220px;
+}
+body .p3d_load.community .m_details {
+  width: 100%;
+  float: left;
+  padding-left: 0;
+  padding-top: 24px;
+  margin-left: -10px;
+}
+body .p3d_load.community .x-wrap {
+  width: 10000px;
+}
+body .p3d_load.community .s-wrap {
+  max-height: 390px;
+  overflow-x: hidden;
+  padding-right: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  padding-bottom: 20px;
+}
+body .p3d_main_footer {
+  position: absolute;
+  bottom: 0;
+  padding: 0 0 20px 50px;
+  font-size: 12px;
+}
+body .p3d_main_footer a {
+  color: #E5513A;
+  font-weight: 700;
+}
+body .p3d_main_footer span {
+  opacity: 0.4;
+}
+body .p3d_main .help {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 14px;
+}
+body .p3d_main .help .icon {
+  width: 8px;
+  border: 2px solid white;
+  padding: 4px 6px;
+  border-radius: 20px;
+  transform: scale(0.7);
+  cursor: pointer;
+}
+body .p3d_main .help .icon:hover + div {
+  opacity: 1;
+  transform: translateY(0px);
+}
+body .p3d_main .help .gif {
+  transition: transform 0.3s 0.2s cubic-bezier(0.035, 1.495, 0.625, 0.89), opacity 0.2s 0.2s;
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+  width: 740px;
+  transform: translateY(20px);
+  z-index: 3;
+  top: 48px;
+  border: 3px solid white;
+  border-radius: 10px;
+  padding: 16px;
+  background: #151c29;
+}
+body .p3d_main .help .gif .desc {
+  width: 200px;
+  float: left;
+  padding: 30px;
+  line-height: 20px;
+}
+body .p3d_main .help .gif .desc h4 {
+  margin: 0;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+body .p3d_main .help .gif img {
+  width: 480px;
+  display: block;
+  border-radius: 10px;
+  float: right;
+}
+body .p3d_main .button {
+  line-height: 42px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-weight: 800;
+  position: relative;
+  height: 40px;
+}
+body .p3d_main .button img.icon {
+  transform: scale(1);
+  transition: all 0.1s 0.1s;
+}
+body .p3d_main .button img.icon.saving {
+  transition: all 0.1s 0s;
+  transform: scale(0);
+}
+body .p3d_main .button img.loader {
+  transition: all 0.1s 0s;
+  position: absolute;
+  left: -4px;
+  height: 28px;
+  top: -3px;
+  transform: scale(0);
+}
+body .p3d_main .button img.loader.saving {
+  transition: all 0.1s 0.1s;
+  transform: scale(1);
+}
+body .p3d_main .button:hover > .tooltip {
+  opacity: 1;
+  top: -54px;
+  transition: all 0.3s 0.2s;
+}
+body .p3d_main .button img {
+  margin: 9px 10px;
+  height: 20px;
+}
+body .p3d_main .button > .tooltip {
+  transition: all 0.23s 0s;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  top: -50px;
+  color: #25273E;
+  border-radius: 10px;
+  position: absolute;
+  background: white;
+  width: 140px;
+  font-size: 14px;
+  text-align: center;
+}
+body .p3d_main .button > .tooltip:after {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: white;
+  content: "";
+  margin: auto;
+  display: block;
+  left: 0;
+  bottom: -3px;
+  right: 0;
+  transform: rotate(45deg);
+}
+body .p3d_main .button:after, body .p3d_main .button:before {
+  border-radius: 10px;
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  top: 0;
+  left: 0;
+  z-index: -1;
+  transform: scale(0);
+  transition: all 0.3s cubic-bezier(0.035, 1.495, 0.625, 0.89);
+}
+body .p3d_main .button:before {
+  background: #E5513A;
+}
+body .p3d_main .button.active:before {
+  transform: scale(1);
+}
+body .p3d_main .button:not(.active):hover {
+  color: #E5513A;
+}
+body .p3d_main .button:not(.active):hover:after {
+  transform: scale(1);
+}
+body .p3d_main__header {
+  padding: 40px;
+}
+body .p3d_main__header .header_left,
+body .p3d_main__header .header_right {
+  width: 50%;
+  float: left;
+}
+body .p3d_main__header .header_left {
+  width: 200px;
+}
+body .p3d_main__header .header_right {
+  margin-top: 6px;
+  text-align: left;
+  width: calc(100% - 200px);
+  float: right;
+}
+body .p3d_main__header .header_right .button {
+  width: 40px;
+  text-align: center;
+}
+body .p3d_main__header .header_right .button::before {
+  display: block;
+  content: "";
+  position: absolute;
+  height: 3px;
+  width: 0px;
+  background: #E5513A;
+  z-index: 1;
+  left: 5px;
+  border-radius: 10px;
+  top: 17px;
+  transform: scale(1);
+}
+body .p3d_main__header .header_right .button.active img {
+  opacity: 0.5;
+}
+body .p3d_main__header .header_right .button.active::before {
+  width: 30px;
+}
+@-webkit-keyframes pulse {
+  from {
+    box-shadow: 0 0 0 0 #f3c032;
+  }
+  to {
+    box-shadow: 0 0 0 12px rgba(243, 192, 50, 0);
+  }
+}
+@keyframes pulse {
+  from {
+    box-shadow: 0 0 0 0 #f3c032;
+  }
+  to {
+    box-shadow: 0 0 0 12px rgba(243, 192, 50, 0);
+  }
+}
+body .p3d_main__header .header_right .buttons {
+  float: left;
+}
+body .p3d_main__header .header_right .buttons .community {
+  background: #f3c032;
+  width: 120px;
+  position: relative;
+  font-size: 15px;
+  height: 44px;
+  line-height: 46px;
+  top: -14px;
+  color: #504014;
+  margin-left: 10px;
+  transform: scale(1);
+  transition: all 0.3s;
+  -webkit-animation: pulse 1.3s infinite;
+          animation: pulse 1.3s infinite;
+}
+body .p3d_main__header .header_right .buttons .community::after, body .p3d_main__header .header_right .buttons .community::before {
+  display: none;
+}
+body .p3d_main__header .header_right .buttons .community:hover {
+  background: #ffbc00;
+  transform: scale(1.05);
+}
+body .p3d_main__header .header_right .options {
+  float: right;
+}
+body .p3d_main__header .header_right input {
+  float: left;
+  width: 300px;
+  font-family: "Baloo 2", cursive;
+  background: transparent;
+  font-weight: 700;
+  color: white;
+  border: 0;
+  border-bottom: 2px solid white;
+  outline: none;
+  padding: 0 0 8px 0;
+  margin-right: 16px;
+}
+body .p3d_main__header .header_right .button {
+  display: inline-block;
+}
+body .p3d_main__header .header_right .button:hover .tooltip {
+  bottom: -50px;
+}
+body .p3d_main__header .header_right .button .tooltip {
+  left: -20px;
+  width: 80px;
+  top: auto;
+  bottom: -44px;
+}
+body .p3d_main__header .header_right .button .tooltip:after {
+  bottom: auto;
+  top: -3px;
+}
+body .p3d_main__editor {
+  height: 100px;
+  width: 1300px;
+  margin: 0 auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%) scale(1);
+  height: 600px;
+}
+@media only screen and (max-height: 962px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 1)));
+  }
+}
+@media only screen and (max-height: 954px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 2)));
+  }
+}
+@media only screen and (max-height: 946px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 3)));
+  }
+}
+@media only screen and (max-height: 938px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 4)));
+  }
+}
+@media only screen and (max-height: 930px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 5)));
+  }
+}
+@media only screen and (max-height: 922px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 6)));
+  }
+}
+@media only screen and (max-height: 914px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 7)));
+  }
+}
+@media only screen and (max-height: 906px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 8)));
+  }
+}
+@media only screen and (max-height: 898px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 9)));
+  }
+}
+@media only screen and (max-height: 890px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 10)));
+  }
+}
+@media only screen and (max-height: 882px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 11)));
+  }
+}
+@media only screen and (max-height: 874px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 12)));
+  }
+}
+@media only screen and (max-height: 866px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 13)));
+  }
+}
+@media only screen and (max-height: 858px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 14)));
+  }
+}
+@media only screen and (max-height: 850px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 15)));
+  }
+}
+@media only screen and (max-height: 842px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 16)));
+  }
+}
+@media only screen and (max-height: 834px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 17)));
+  }
+}
+@media only screen and (max-height: 826px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 18)));
+  }
+}
+@media only screen and (max-height: 818px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 19)));
+  }
+}
+@media only screen and (max-height: 810px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 20)));
+  }
+}
+@media only screen and (max-height: 802px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 21)));
+  }
+}
+@media only screen and (max-height: 794px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 22)));
+  }
+}
+@media only screen and (max-height: 786px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 23)));
+  }
+}
+@media only screen and (max-height: 778px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 24)));
+  }
+}
+@media only screen and (max-height: 770px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 25)));
+  }
+}
+@media only screen and (max-height: 762px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 26)));
+  }
+}
+@media only screen and (max-height: 754px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 27)));
+  }
+}
+@media only screen and (max-height: 746px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 28)));
+  }
+}
+@media only screen and (max-height: 738px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 29)));
+  }
+}
+@media only screen and (max-height: 730px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 30)));
+  }
+}
+@media only screen and (max-height: 722px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 31)));
+  }
+}
+@media only screen and (max-height: 714px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 32)));
+  }
+}
+@media only screen and (max-height: 706px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 33)));
+  }
+}
+@media only screen and (max-height: 698px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 34)));
+  }
+}
+@media only screen and (max-height: 690px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 35)));
+  }
+}
+@media only screen and (max-height: 682px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 36)));
+  }
+}
+@media only screen and (max-height: 674px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 37)));
+  }
+}
+@media only screen and (max-height: 666px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 38)));
+  }
+}
+@media only screen and (max-height: 658px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 39)));
+  }
+}
+@media only screen and (max-height: 650px) {
+  body .p3d_main__editor {
+    transform: translateY(-50%) scale(calc(1 - (0.007 * 40)));
+  }
+}
+body .p3d_main__editor .editor_right {
+  width: 35%;
+  float: right;
+  position: relative;
+}
+body .p3d_main__editor .editor_right__export {
+  opacity: 0;
+  pointer-events: none;
+  float: left;
+  position: absolute;
+  padding-left: 70px;
+  padding-top: 70px;
+  transition: all 0.1s 0s;
+}
+body .p3d_main__editor .editor_right__export .buttons {
+  clear: both;
+  float: left;
+  margin-top: 30px;
+}
+body .p3d_main__editor .editor_right__export input[type=text] {
+  padding: 14px 20px;
+  font-weight: 600;
+  border-radius: 10px;
+  color: white;
+  border: none;
+  font-family: "Baloo 2", cursive;
+  background: #00000024;
+  outline: none;
+  box-shadow: 0 0 0 0px #ffc215 inset;
+  transition: all 0.3s;
+}
+body .p3d_main__editor .editor_right__export input[type=text]:focus {
+  box-shadow: 0 0 0 3px #ffc215 inset;
+}
+body .p3d_main__editor .editor_right__export input {
+  margin-top: 8px;
+}
+body .p3d_main__editor .editor_right__export p.sub {
+  margin: -17px 0 16px 0px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  opacity: 0.5;
+}
+body .p3d_main__editor .editor_right__export button {
+  color: #6d581e;
+  background: #f3c032;
+  border: 0;
+  border-radius: 10px;
+  font-size: 14px;
+  padding: 16px 19px;
+  font-weight: 700;
+  outline: none;
+  font-family: "Baloo 2", cursive;
+  float: left;
+  transition: all 0.3s;
+  cursor: pointer;
+  -webkit-animation: pulse 1.3s infinite;
+          animation: pulse 1.3s infinite;
+}
+body .p3d_main__editor .editor_right__export button:hover {
+  background: #ffbc00;
+}
+body .p3d_main__editor .editor_right__export input[type=submit] {
+  opacity: 0;
+  position: absolute;
+  left: -10000px;
+  top: -1000000px;
+}
+body .p3d_main__editor .editor_right__export button.cp {
+  margin-top: 0px;
+  margin-left: 16px;
+  background: #694a7d;
+  color: #fff;
+  position: relative;
+  -webkit-animation: none;
+          animation: none;
+}
+body .p3d_main__editor .editor_right__export button.cp img {
+  transform: scale(0);
+  position: absolute;
+  left: 13px;
+  top: 13px;
+  height: 26px;
+  transition: all 0.3s 0.1s;
+}
+body .p3d_main__editor .editor_right__export button.cp.exporting {
+  padding-left: 46px;
+}
+body .p3d_main__editor .editor_right__export button.cp.exporting img {
+  transform: scale(1);
+}
+body .p3d_main__editor .editor_right__export button.cp:hover {
+  background: #8f4db9;
+}
+body .p3d_main__editor .editor_right__export .row {
+  margin-bottom: 8px;
+  position: relative;
+  clear: both;
+  float: left;
+  transition: all 0.3s;
+}
+body .p3d_main__editor .editor_right__export .row.inactive {
+  opacity: 0.4;
+  pointer-events: none;
+}
+body .p3d_main__editor .editor_right__export .row .sp-replacer + img {
+  height: 15px;
+  opacity: 0.2;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.3s;
+  top: 5px;
+}
+body .p3d_main__editor .editor_right__export .row .sp-replacer + img.hide {
+  opacity: 0;
+}
+body .p3d_main__editor .editor_right__export .row .sp-replacer + img:hover {
+  opacity: 1;
+}
+body .p3d_main__editor .editor_right__export .row-half {
+  float: left;
+  width: 50%;
+}
+body .p3d_main__editor .editor_right__export .row-half input {
+  width: calc(100% - 50px);
+}
+body .p3d_main__editor .editor_right__export .row-half input[type=range] {
+  width: calc(100% - 22px) !important;
+}
+body .p3d_main__editor .editor_right__export .row-half + .save {
+  position: absolute;
+  right: -50px;
+  top: 44px;
+  width: 40px;
+}
+body .p3d_main__editor .editor_right__export .row-half + .save .tooltip {
+  left: -19px;
+  width: 80px;
+}
+body .p3d_main__editor .editor_right__export .row input[type=checkbox] {
+  margin-top: 8px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  width: 20px;
+  height: 20px;
+  margin-left: -1px;
+  border-radius: 7px;
+  border: 3px solid white;
+  outline: none;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+}
+body .p3d_main__editor .editor_right__export .row input[type=checkbox]::after {
+  display: block;
+  content: "";
+  width: 8px;
+  height: 8px;
+  left: 3px;
+  top: 3px;
+  border-radius: 2px;
+  background: #E5513A;
+  position: absolute;
+  transition: all 0.3s cubic-bezier(0.035, 1.495, 0.625, 0.89);
+  transform: scale(0);
+}
+body .p3d_main__editor .editor_right__export .row input[type=checkbox]:checked::after {
+  transform: scale(1);
+}
+body .p3d_main__editor .editor_right__export .row input[type=range] {
+  overflow: hidden;
+  height: 6px;
+  border-radius: 10px;
+  outline: none;
+  width: 200px;
+  -webkit-appearance: none;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+body .p3d_main__editor .editor_right__export .row input[type=range]::-webkit-slider-runnable-track {
+  height: 10px;
+  -webkit-appearance: none;
+  color: #13bba4;
+  margin-top: -1px;
+}
+body .p3d_main__editor .editor_right__export .row input[type=range]::-webkit-slider-thumb {
+  width: 10px;
+  -webkit-appearance: none;
+  height: 10px;
+  cursor: ew-resize;
+  background: #fff;
+  box-shadow: -180px 0 0 180px #E5513A;
+}
+body .p3d_main__editor .editor_right__export .row label {
+  display: block;
+  font-weight: 700;
+  font-size: 14px;
+  display: block;
+  margin-top: 10px;
+}
+body .p3d_main__editor .editor_right__export .row label span {
+  font-weight: 700;
+}
+body .p3d_main__editor .editor_right__export .row label span span {
+  font-size: 12px;
+  font-weight: 500;
+  opacity: 0.3;
+}
+body .p3d_main__editor .editor_right__export.show {
+  opacity: 1;
+  pointer-events: all;
+  transition: all 0.3s 0.2s;
+}
+body .p3d_main__editor .editor_right #colorBg + div {
+  opacity: 1;
+  transition: all 0.29s;
+}
+body .p3d_main__editor .editor_right #colorBg.hide + div {
+  opacity: 0;
+  pointer-events: none;
+}
+body .p3d_main__editor .editor_right p {
+  font-weight: 700;
+  margin: 10px 0px 20px 40px;
+  opacity: 1;
+  transition: all 0.2s;
+  transform: translateY(0px);
+}
+body .p3d_main__editor .editor_right p.hide {
+  transform: translateY(-12px);
+  opacity: 0;
+}
+body .p3d_main__editor .editor_right p + img {
+  position: absolute;
+  right: 59px;
+  top: 19px;
+  height: 15px;
+  opacity: 0.2;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+body .p3d_main__editor .editor_right p + img.hide {
+  opacity: 0;
+}
+body .p3d_main__editor .editor_right p + img:hover {
+  opacity: 1;
+}
+body .p3d_main__editor .editor_right p.voxelCount {
+  clear: both;
+  float: right;
+  position: absolute;
+  top: 476px;
+  left: 0px;
+  font-size: 14px;
+  transform: translateY(0px);
+  transition: all 0.2s 0.2s;
+}
+body .p3d_main__editor .editor_right p.voxelCount.hide {
+  transition: all 0.002s;
+  pointer-events: none;
+}
+body .p3d_main__editor .editor_right p.voxelCount span {
+  color: #E5513A;
+}
+body .p3d_main__editor .editor_right p.voxelCount span.block {
+  opacity: 0;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 12px;
+  display: block;
+  font-weight: 400;
+  margin-top: 10px;
+}
+body .p3d_main__editor .editor_right p.voxelCount span.block.show {
+  opacity: 1;
+}
+body .p3d_main__editor .editor_right p.voxelCount span.block img {
+  width: 16px;
+  margin-top: -1px;
+  margin-right: 9px;
+  position: relative;
+  top: 3px;
+  margin-bottom: 13px;
+  float: left;
+}
+body .p3d_main__editor .editor_right #colorBg + div,
+body .p3d_main__editor .editor_right #exportBg + div {
+  position: absolute;
+  right: -6px;
+  top: 10px;
+  border: 0;
+  background: transparent;
+}
+body .p3d_main__editor .editor_right #colorBg + div .sp-preview,
+body .p3d_main__editor .editor_right #exportBg + div .sp-preview {
+  position: relative;
+  width: 25px;
+  height: 20px;
+  border: solid 3px #fff;
+  margin-right: 8px;
+  border-radius: 6px;
+  float: left;
+  z-index: 0;
+}
+body .p3d_main__editor .editor_right #colorBg + div .sp-preview-inner,
+body .p3d_main__editor .editor_right #exportBg + div .sp-preview-inner {
+  border-radius: 3px;
+}
+body .p3d_main__editor .editor_right #colorBg + div .sp-dd,
+body .p3d_main__editor .editor_right #exportBg + div .sp-dd {
+  padding: 6px 0;
+  height: 20px;
+  line-height: 12px;
+  float: left;
+  color: white;
+  font-size: 10px;
+  transform: scaleY(0.6);
+}
+body .p3d_main__editor .editor_right #exportBg + div {
+  margin-top: 8px;
+  position: static;
+}
+body .p3d_main__editor .editor_right__preview {
+  box-shadow: 0 0 0 3px inset white;
+  background: #25273E;
+  height: 415px;
+  width: 415px;
+  left: calc(65% + 40px);
+  float: right;
+  border-radius: 14px;
+  z-index: 1;
+  position: fixed;
+  transition: all 0.3s cubic-bezier(0.035, 1.495, 0.625, 0.89);
+}
+body .p3d_main__editor .editor_right__preview.export {
+  position: fixed;
+  width: calc(100% - 460px);
+  left: 20px;
+  height: calc(100% + 34px);
+}
+body .p3d_main__editor .editor_right__preview.paint {
+  position: fixed;
+  width: calc(100% - 210px);
+  left: 210px;
+  height: calc(100% + 34px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner {
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  overflow: hidden;
+  width: calc(100% - 6px);
+  height: calc(100% - 6px);
+  border-radius: 10px;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .button.zooms {
+  background: #25273E;
+  display: block;
+  color: #fff;
+  border: 0;
+  float: right;
+  margin: 4px 18px;
+  width: 30px;
+  clear: both;
+  text-align: center;
+  height: 30px;
+  line-height: 28px;
+  position: relative;
+  z-index: 2;
+  transform: scale(1);
+  transition: all 0.2s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .button.zooms img {
+  margin: 5px 1px;
+  width: 16px;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .button.zooms.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .button.zooms:hover {
+  transform: scale(1.1);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .button.zooms:after, body .p3d_main__editor .editor_right__preview .p_inner .button.zooms:before {
+  display: none;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .button.zooms.first {
+  margin-top: 19px;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views {
+  position: absolute;
+  top: 12px;
+  left: 15px;
+  z-index: 1;
+  padding: 0 4px;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show {
+  background: #25273E;
+  border-radius: 10px;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button {
+  opacity: 1;
+  transform: translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(1) {
+  transition: color 0.3s, transform 0.5s 0.2s, opacity 0.5s 0.2s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(2) {
+  transition: color 0.3s, transform 0.5s 0.25s, opacity 0.5s 0.25s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(3) {
+  transition: color 0.3s, transform 0.5s 0.3s, opacity 0.5s 0.3s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(4) {
+  transition: color 0.3s, transform 0.5s 0.35s, opacity 0.5s 0.35s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(5) {
+  transition: color 0.3s, transform 0.5s 0.4s, opacity 0.5s 0.4s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(6) {
+  transition: color 0.3s, transform 0.5s 0.45s, opacity 0.5s 0.45s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(7) {
+  transition: color 0.3s, transform 0.5s 0.5s, opacity 0.5s 0.5s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(8) {
+  transition: color 0.3s, transform 0.5s 0.55s, opacity 0.5s 0.55s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(9) {
+  transition: color 0.3s, transform 0.5s 0.6s, opacity 0.5s 0.6s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(10) {
+  transition: color 0.3s, transform 0.5s 0.65s, opacity 0.5s 0.65s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(11) {
+  transition: color 0.3s, transform 0.5s 0.7s, opacity 0.5s 0.7s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(12) {
+  transition: color 0.3s, transform 0.5s 0.75s, opacity 0.5s 0.75s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(13) {
+  transition: color 0.3s, transform 0.5s 0.8s, opacity 0.5s 0.8s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views.show .button:nth-of-type(14) {
+  transition: color 0.3s, transform 0.5s 0.85s, opacity 0.5s 0.85s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button {
+  font-size: 15px;
+  display: inline-block;
+  margin: 0 10px;
+  transition: all 0.3s;
+  opacity: 0;
+  transform: translateY(16px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(1) {
+  transition: color 0.3s, transform 0s 0s, opacity 0s 0s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(2) {
+  transition: color 0.3s, transform 0s 0.0008183306s, opacity 0s 0.0008183306s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(3) {
+  transition: color 0.3s, transform 0s 0.0016366612s, opacity 0s 0.0016366612s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(4) {
+  transition: color 0.3s, transform 0s 0.0024549918s, opacity 0s 0.0024549918s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(5) {
+  transition: color 0.3s, transform 0s 0.0032733224s, opacity 0s 0.0032733224s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(6) {
+  transition: color 0.3s, transform 0s 0.004091653s, opacity 0s 0.004091653s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(7) {
+  transition: color 0.3s, transform 0s 0.0049099836s, opacity 0s 0.0049099836s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(8) {
+  transition: color 0.3s, transform 0s 0.0057283142s, opacity 0s 0.0057283142s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(9) {
+  transition: color 0.3s, transform 0s 0.0065466448s, opacity 0s 0.0065466448s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(10) {
+  transition: color 0.3s, transform 0s 0.0073649755s, opacity 0s 0.0073649755s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(11) {
+  transition: color 0.3s, transform 0s 0.0081833061s, opacity 0s 0.0081833061s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(12) {
+  transition: color 0.3s, transform 0s 0.0090016367s, opacity 0s 0.0090016367s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(13) {
+  transition: color 0.3s, transform 0s 0.0098199673s, opacity 0s 0.0098199673s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:nth-of-type(14) {
+  transition: color 0.3s, transform 0s 0.0106382979s, opacity 0s 0.0106382979s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button.active {
+  color: #E5513A;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .views .button:after, body .p3d_main__editor .editor_right__preview .p_inner .views .button:before {
+  display: none;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .resetZoom {
+  position: absolute;
+  z-index: 1;
+  right: 10px;
+  top: 8px;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .spin {
+  position: absolute;
+  z-index: 1;
+  right: 10px;
+  bottom: 8px;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .exportWrap {
+  height: 100%;
+  transform-origin: 50% 365px;
+  transform-style: preserve-3d;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .zoom {
+  transform: scale(1);
+  transform-origin: 50% calc(50% + -60px);
+  height: 415px;
+  transition: all 0.3s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model {
+  position: absolute;
+  left: -3px;
+  top: -96px;
+  width: 415px;
+  height: 140px;
+  transform-style: preserve-3d;
+  transition: all 0.3s cubic-bezier(0.035, 1.495, 0.625, 0.89);
+  transform: rotateY(90deg) rotateZ(0) rotatex(0deg);
+  transform-origin: 50% calc(905px / 2) calc(370px / 2);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--f {
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--ba {
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--t {
+  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--b {
+  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--l {
+  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--r {
+  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--f {
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--ba {
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--t {
+  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--b {
+  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--l {
+  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--r {
+  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--f {
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--ba {
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--t {
+  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--b {
+  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--l {
+  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--r {
+  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--f {
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--ba {
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--t {
+  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--b {
+  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--l {
+  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--r {
+  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--f {
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--ba {
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--t {
+  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--b {
+  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--l {
+  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--r {
+  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--f {
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--ba {
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--t {
+  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--b {
+  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--l {
+  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f--r {
+  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0,0,-13px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f.paintable {
+  cursor: pointer;
+  box-shadow: 0 0 0 0px #E5513A inset;
+  transition: all 0.3s;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .f.paintable:hover {
+  box-shadow: 0 0 0 4px #E5513A inset;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model.export, body .p3d_main__editor .editor_right__preview .p_inner .model.paint {
+  position: fixed;
+  width: calc(100% + -60px);
+  left: 0;
+  height: calc(100% + 10px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model.export {
+  width: calc(100%);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model.spin {
+  -webkit-animation: spin 6s infinite linear;
+          animation: spin 6s infinite linear;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model.extrude {
+  transform: scale(0.8) rotateX(-30deg) rotateY(140deg) rotateZ(0deg);
+  top: -144px;
+}
+@-webkit-keyframes spin {
+  from {
+    transform: scale(1) rotateY(140deg) rotateZ(0deg) rotatex(0deg);
+  }
+  to {
+    transform: scale(1) rotateY(500deg) rotateZ(0deg) rotatex(0deg);
+  }
+}
+@keyframes spin {
+  from {
+    transform: scale(1) rotateY(140deg) rotateZ(0deg) rotatex(0deg);
+  }
+  to {
+    transform: scale(1) rotateY(500deg) rotateZ(0deg) rotatex(0deg);
+  }
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .v, body .p3d_main__editor .editor_right__preview .p_inner .model .voxel,
+body .p3d_main__editor .editor_right__preview .p_inner .model .voxel-group {
+  position: absolute;
+  top: 50%;
+  transform-style: preserve-3d;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 10px;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .v .f {
+  width: 26px;
+  height: 26px;
+  position: absolute;
+  transform-style: preserve-3d;
+  transform-origin: 50% 50%;
+  background: transparent;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-de2b14 .f:nth-of-type(1) {
+  background-color: #de2b14;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-de2b14 .f:nth-of-type(2) {
+  background-color: #df331d;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-de2b14 .f:nth-of-type(3) {
+  background-color: #e13c27;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-de2b14 .f:nth-of-type(4) {
+  background-color: #e24430;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-de2b14 .f:nth-of-type(5) {
+  background-color: #e34d3a;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-de2b14 .f:nth-of-type(6) {
+  background-color: #e55543;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-d5713f .f:nth-of-type(1) {
+  background-color: #d5713f;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-d5713f .f:nth-of-type(2) {
+  background-color: #d77747;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-d5713f .f:nth-of-type(3) {
+  background-color: #d87c4e;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-d5713f .f:nth-of-type(4) {
+  background-color: #da8256;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-d5713f .f:nth-of-type(5) {
+  background-color: #dc885e;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-d5713f .f:nth-of-type(6) {
+  background-color: #dd8d65;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-ffda25 .f:nth-of-type(1) {
+  background-color: #ffda25;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-ffda25 .f:nth-of-type(2) {
+  background-color: #ffdb2e;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-ffda25 .f:nth-of-type(3) {
+  background-color: #ffdd36;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-ffda25 .f:nth-of-type(4) {
+  background-color: #ffde3f;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-ffda25 .f:nth-of-type(5) {
+  background-color: #ffe048;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-ffda25 .f:nth-of-type(6) {
+  background-color: #ffe151;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-2c4c35 .f:nth-of-type(1) {
+  background-color: #2c4c35;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-2c4c35 .f:nth-of-type(2) {
+  background-color: #34533d;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-2c4c35 .f:nth-of-type(3) {
+  background-color: #3d5a45;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-2c4c35 .f:nth-of-type(4) {
+  background-color: #45614d;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-2c4c35 .f:nth-of-type(5) {
+  background-color: #4e6955;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-2c4c35 .f:nth-of-type(6) {
+  background-color: #56705d;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-503d1f .f:nth-of-type(1) {
+  background-color: #503d1f;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-503d1f .f:nth-of-type(2) {
+  background-color: #574528;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-503d1f .f:nth-of-type(3) {
+  background-color: #5e4d31;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-503d1f .f:nth-of-type(4) {
+  background-color: #65543a;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-503d1f .f:nth-of-type(5) {
+  background-color: #6c5c43;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .c-503d1f .f:nth-of-type(6) {
+  background-color: #73644c;
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-0 {
+  transform: translateZ(-26px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-1 {
+  transform: translateZ(-26px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-2 {
+  transform: translateZ(-26px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-3 {
+  transform: translateZ(-26px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-4 {
+  transform: translateZ(-26px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-5 {
+  transform: translateZ(-26px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-6 {
+  transform: translateZ(-26px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-7 {
+  transform: translateZ(-26px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-8 {
+  transform: translateZ(-26px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-9 {
+  transform: translateZ(-26px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-10 {
+  transform: translateZ(-26px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-11 {
+  transform: translateZ(-26px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-12 {
+  transform: translateZ(-26px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-13 {
+  transform: translateZ(-26px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-14 {
+  transform: translateZ(-26px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-15 {
+  transform: translateZ(-26px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-16 {
+  transform: translateZ(-26px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-17 {
+  transform: translateZ(-26px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-18 {
+  transform: translateZ(-26px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-19 {
+  transform: translateZ(-26px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-20 {
+  transform: translateZ(-26px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-21 {
+  transform: translateZ(-26px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-22 {
+  transform: translateZ(-26px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-23 {
+  transform: translateZ(-26px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-24 {
+  transform: translateZ(-26px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-25 {
+  transform: translateZ(-26px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-26 {
+  transform: translateZ(-26px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-27 {
+  transform: translateZ(-26px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-28 {
+  transform: translateZ(-26px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-29 {
+  transform: translateZ(-26px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-30 {
+  transform: translateZ(-26px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-31 {
+  transform: translateZ(-26px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-32 {
+  transform: translateZ(-26px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-33 {
+  transform: translateZ(-26px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-34 {
+  transform: translateZ(-26px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-35 {
+  transform: translateZ(-26px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-36 {
+  transform: translateZ(-26px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-37 {
+  transform: translateZ(-26px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-38 {
+  transform: translateZ(-26px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-39 {
+  transform: translateZ(-26px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-0.y-40 {
+  transform: translateZ(-26px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-0 {
+  transform: translateZ(0px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-1 {
+  transform: translateZ(0px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-2 {
+  transform: translateZ(0px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-3 {
+  transform: translateZ(0px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-4 {
+  transform: translateZ(0px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-5 {
+  transform: translateZ(0px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-6 {
+  transform: translateZ(0px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-7 {
+  transform: translateZ(0px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-8 {
+  transform: translateZ(0px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-9 {
+  transform: translateZ(0px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-10 {
+  transform: translateZ(0px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-11 {
+  transform: translateZ(0px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-12 {
+  transform: translateZ(0px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-13 {
+  transform: translateZ(0px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-14 {
+  transform: translateZ(0px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-15 {
+  transform: translateZ(0px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-16 {
+  transform: translateZ(0px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-17 {
+  transform: translateZ(0px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-18 {
+  transform: translateZ(0px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-19 {
+  transform: translateZ(0px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-20 {
+  transform: translateZ(0px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-21 {
+  transform: translateZ(0px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-22 {
+  transform: translateZ(0px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-23 {
+  transform: translateZ(0px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-24 {
+  transform: translateZ(0px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-25 {
+  transform: translateZ(0px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-26 {
+  transform: translateZ(0px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-27 {
+  transform: translateZ(0px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-28 {
+  transform: translateZ(0px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-29 {
+  transform: translateZ(0px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-30 {
+  transform: translateZ(0px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-31 {
+  transform: translateZ(0px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-32 {
+  transform: translateZ(0px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-33 {
+  transform: translateZ(0px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-34 {
+  transform: translateZ(0px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-35 {
+  transform: translateZ(0px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-36 {
+  transform: translateZ(0px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-37 {
+  transform: translateZ(0px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-38 {
+  transform: translateZ(0px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-39 {
+  transform: translateZ(0px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-1.y-40 {
+  transform: translateZ(0px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-0 {
+  transform: translateZ(26px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-1 {
+  transform: translateZ(26px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-2 {
+  transform: translateZ(26px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-3 {
+  transform: translateZ(26px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-4 {
+  transform: translateZ(26px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-5 {
+  transform: translateZ(26px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-6 {
+  transform: translateZ(26px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-7 {
+  transform: translateZ(26px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-8 {
+  transform: translateZ(26px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-9 {
+  transform: translateZ(26px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-10 {
+  transform: translateZ(26px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-11 {
+  transform: translateZ(26px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-12 {
+  transform: translateZ(26px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-13 {
+  transform: translateZ(26px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-14 {
+  transform: translateZ(26px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-15 {
+  transform: translateZ(26px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-16 {
+  transform: translateZ(26px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-17 {
+  transform: translateZ(26px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-18 {
+  transform: translateZ(26px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-19 {
+  transform: translateZ(26px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-20 {
+  transform: translateZ(26px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-21 {
+  transform: translateZ(26px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-22 {
+  transform: translateZ(26px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-23 {
+  transform: translateZ(26px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-24 {
+  transform: translateZ(26px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-25 {
+  transform: translateZ(26px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-26 {
+  transform: translateZ(26px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-27 {
+  transform: translateZ(26px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-28 {
+  transform: translateZ(26px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-29 {
+  transform: translateZ(26px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-30 {
+  transform: translateZ(26px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-31 {
+  transform: translateZ(26px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-32 {
+  transform: translateZ(26px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-33 {
+  transform: translateZ(26px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-34 {
+  transform: translateZ(26px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-35 {
+  transform: translateZ(26px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-36 {
+  transform: translateZ(26px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-37 {
+  transform: translateZ(26px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-38 {
+  transform: translateZ(26px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-39 {
+  transform: translateZ(26px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-2.y-40 {
+  transform: translateZ(26px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-0 {
+  transform: translateZ(52px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-1 {
+  transform: translateZ(52px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-2 {
+  transform: translateZ(52px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-3 {
+  transform: translateZ(52px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-4 {
+  transform: translateZ(52px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-5 {
+  transform: translateZ(52px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-6 {
+  transform: translateZ(52px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-7 {
+  transform: translateZ(52px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-8 {
+  transform: translateZ(52px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-9 {
+  transform: translateZ(52px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-10 {
+  transform: translateZ(52px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-11 {
+  transform: translateZ(52px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-12 {
+  transform: translateZ(52px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-13 {
+  transform: translateZ(52px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-14 {
+  transform: translateZ(52px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-15 {
+  transform: translateZ(52px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-16 {
+  transform: translateZ(52px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-17 {
+  transform: translateZ(52px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-18 {
+  transform: translateZ(52px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-19 {
+  transform: translateZ(52px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-20 {
+  transform: translateZ(52px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-21 {
+  transform: translateZ(52px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-22 {
+  transform: translateZ(52px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-23 {
+  transform: translateZ(52px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-24 {
+  transform: translateZ(52px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-25 {
+  transform: translateZ(52px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-26 {
+  transform: translateZ(52px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-27 {
+  transform: translateZ(52px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-28 {
+  transform: translateZ(52px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-29 {
+  transform: translateZ(52px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-30 {
+  transform: translateZ(52px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-31 {
+  transform: translateZ(52px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-32 {
+  transform: translateZ(52px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-33 {
+  transform: translateZ(52px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-34 {
+  transform: translateZ(52px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-35 {
+  transform: translateZ(52px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-36 {
+  transform: translateZ(52px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-37 {
+  transform: translateZ(52px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-38 {
+  transform: translateZ(52px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-39 {
+  transform: translateZ(52px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-3.y-40 {
+  transform: translateZ(52px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-0 {
+  transform: translateZ(78px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-1 {
+  transform: translateZ(78px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-2 {
+  transform: translateZ(78px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-3 {
+  transform: translateZ(78px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-4 {
+  transform: translateZ(78px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-5 {
+  transform: translateZ(78px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-6 {
+  transform: translateZ(78px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-7 {
+  transform: translateZ(78px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-8 {
+  transform: translateZ(78px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-9 {
+  transform: translateZ(78px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-10 {
+  transform: translateZ(78px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-11 {
+  transform: translateZ(78px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-12 {
+  transform: translateZ(78px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-13 {
+  transform: translateZ(78px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-14 {
+  transform: translateZ(78px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-15 {
+  transform: translateZ(78px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-16 {
+  transform: translateZ(78px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-17 {
+  transform: translateZ(78px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-18 {
+  transform: translateZ(78px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-19 {
+  transform: translateZ(78px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-20 {
+  transform: translateZ(78px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-21 {
+  transform: translateZ(78px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-22 {
+  transform: translateZ(78px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-23 {
+  transform: translateZ(78px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-24 {
+  transform: translateZ(78px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-25 {
+  transform: translateZ(78px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-26 {
+  transform: translateZ(78px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-27 {
+  transform: translateZ(78px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-28 {
+  transform: translateZ(78px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-29 {
+  transform: translateZ(78px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-30 {
+  transform: translateZ(78px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-31 {
+  transform: translateZ(78px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-32 {
+  transform: translateZ(78px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-33 {
+  transform: translateZ(78px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-34 {
+  transform: translateZ(78px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-35 {
+  transform: translateZ(78px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-36 {
+  transform: translateZ(78px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-37 {
+  transform: translateZ(78px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-38 {
+  transform: translateZ(78px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-39 {
+  transform: translateZ(78px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-4.y-40 {
+  transform: translateZ(78px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-0 {
+  transform: translateZ(104px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-1 {
+  transform: translateZ(104px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-2 {
+  transform: translateZ(104px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-3 {
+  transform: translateZ(104px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-4 {
+  transform: translateZ(104px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-5 {
+  transform: translateZ(104px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-6 {
+  transform: translateZ(104px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-7 {
+  transform: translateZ(104px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-8 {
+  transform: translateZ(104px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-9 {
+  transform: translateZ(104px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-10 {
+  transform: translateZ(104px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-11 {
+  transform: translateZ(104px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-12 {
+  transform: translateZ(104px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-13 {
+  transform: translateZ(104px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-14 {
+  transform: translateZ(104px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-15 {
+  transform: translateZ(104px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-16 {
+  transform: translateZ(104px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-17 {
+  transform: translateZ(104px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-18 {
+  transform: translateZ(104px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-19 {
+  transform: translateZ(104px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-20 {
+  transform: translateZ(104px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-21 {
+  transform: translateZ(104px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-22 {
+  transform: translateZ(104px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-23 {
+  transform: translateZ(104px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-24 {
+  transform: translateZ(104px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-25 {
+  transform: translateZ(104px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-26 {
+  transform: translateZ(104px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-27 {
+  transform: translateZ(104px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-28 {
+  transform: translateZ(104px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-29 {
+  transform: translateZ(104px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-30 {
+  transform: translateZ(104px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-31 {
+  transform: translateZ(104px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-32 {
+  transform: translateZ(104px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-33 {
+  transform: translateZ(104px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-34 {
+  transform: translateZ(104px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-35 {
+  transform: translateZ(104px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-36 {
+  transform: translateZ(104px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-37 {
+  transform: translateZ(104px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-38 {
+  transform: translateZ(104px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-39 {
+  transform: translateZ(104px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-5.y-40 {
+  transform: translateZ(104px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-0 {
+  transform: translateZ(130px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-1 {
+  transform: translateZ(130px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-2 {
+  transform: translateZ(130px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-3 {
+  transform: translateZ(130px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-4 {
+  transform: translateZ(130px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-5 {
+  transform: translateZ(130px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-6 {
+  transform: translateZ(130px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-7 {
+  transform: translateZ(130px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-8 {
+  transform: translateZ(130px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-9 {
+  transform: translateZ(130px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-10 {
+  transform: translateZ(130px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-11 {
+  transform: translateZ(130px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-12 {
+  transform: translateZ(130px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-13 {
+  transform: translateZ(130px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-14 {
+  transform: translateZ(130px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-15 {
+  transform: translateZ(130px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-16 {
+  transform: translateZ(130px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-17 {
+  transform: translateZ(130px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-18 {
+  transform: translateZ(130px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-19 {
+  transform: translateZ(130px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-20 {
+  transform: translateZ(130px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-21 {
+  transform: translateZ(130px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-22 {
+  transform: translateZ(130px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-23 {
+  transform: translateZ(130px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-24 {
+  transform: translateZ(130px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-25 {
+  transform: translateZ(130px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-26 {
+  transform: translateZ(130px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-27 {
+  transform: translateZ(130px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-28 {
+  transform: translateZ(130px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-29 {
+  transform: translateZ(130px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-30 {
+  transform: translateZ(130px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-31 {
+  transform: translateZ(130px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-32 {
+  transform: translateZ(130px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-33 {
+  transform: translateZ(130px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-34 {
+  transform: translateZ(130px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-35 {
+  transform: translateZ(130px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-36 {
+  transform: translateZ(130px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-37 {
+  transform: translateZ(130px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-38 {
+  transform: translateZ(130px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-39 {
+  transform: translateZ(130px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-6.y-40 {
+  transform: translateZ(130px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-0 {
+  transform: translateZ(156px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-1 {
+  transform: translateZ(156px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-2 {
+  transform: translateZ(156px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-3 {
+  transform: translateZ(156px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-4 {
+  transform: translateZ(156px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-5 {
+  transform: translateZ(156px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-6 {
+  transform: translateZ(156px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-7 {
+  transform: translateZ(156px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-8 {
+  transform: translateZ(156px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-9 {
+  transform: translateZ(156px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-10 {
+  transform: translateZ(156px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-11 {
+  transform: translateZ(156px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-12 {
+  transform: translateZ(156px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-13 {
+  transform: translateZ(156px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-14 {
+  transform: translateZ(156px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-15 {
+  transform: translateZ(156px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-16 {
+  transform: translateZ(156px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-17 {
+  transform: translateZ(156px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-18 {
+  transform: translateZ(156px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-19 {
+  transform: translateZ(156px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-20 {
+  transform: translateZ(156px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-21 {
+  transform: translateZ(156px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-22 {
+  transform: translateZ(156px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-23 {
+  transform: translateZ(156px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-24 {
+  transform: translateZ(156px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-25 {
+  transform: translateZ(156px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-26 {
+  transform: translateZ(156px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-27 {
+  transform: translateZ(156px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-28 {
+  transform: translateZ(156px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-29 {
+  transform: translateZ(156px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-30 {
+  transform: translateZ(156px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-31 {
+  transform: translateZ(156px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-32 {
+  transform: translateZ(156px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-33 {
+  transform: translateZ(156px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-34 {
+  transform: translateZ(156px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-35 {
+  transform: translateZ(156px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-36 {
+  transform: translateZ(156px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-37 {
+  transform: translateZ(156px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-38 {
+  transform: translateZ(156px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-39 {
+  transform: translateZ(156px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-7.y-40 {
+  transform: translateZ(156px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-0 {
+  transform: translateZ(182px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-1 {
+  transform: translateZ(182px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-2 {
+  transform: translateZ(182px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-3 {
+  transform: translateZ(182px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-4 {
+  transform: translateZ(182px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-5 {
+  transform: translateZ(182px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-6 {
+  transform: translateZ(182px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-7 {
+  transform: translateZ(182px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-8 {
+  transform: translateZ(182px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-9 {
+  transform: translateZ(182px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-10 {
+  transform: translateZ(182px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-11 {
+  transform: translateZ(182px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-12 {
+  transform: translateZ(182px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-13 {
+  transform: translateZ(182px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-14 {
+  transform: translateZ(182px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-15 {
+  transform: translateZ(182px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-16 {
+  transform: translateZ(182px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-17 {
+  transform: translateZ(182px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-18 {
+  transform: translateZ(182px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-19 {
+  transform: translateZ(182px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-20 {
+  transform: translateZ(182px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-21 {
+  transform: translateZ(182px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-22 {
+  transform: translateZ(182px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-23 {
+  transform: translateZ(182px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-24 {
+  transform: translateZ(182px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-25 {
+  transform: translateZ(182px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-26 {
+  transform: translateZ(182px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-27 {
+  transform: translateZ(182px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-28 {
+  transform: translateZ(182px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-29 {
+  transform: translateZ(182px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-30 {
+  transform: translateZ(182px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-31 {
+  transform: translateZ(182px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-32 {
+  transform: translateZ(182px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-33 {
+  transform: translateZ(182px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-34 {
+  transform: translateZ(182px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-35 {
+  transform: translateZ(182px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-36 {
+  transform: translateZ(182px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-37 {
+  transform: translateZ(182px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-38 {
+  transform: translateZ(182px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-39 {
+  transform: translateZ(182px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-8.y-40 {
+  transform: translateZ(182px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-0 {
+  transform: translateZ(208px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-1 {
+  transform: translateZ(208px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-2 {
+  transform: translateZ(208px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-3 {
+  transform: translateZ(208px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-4 {
+  transform: translateZ(208px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-5 {
+  transform: translateZ(208px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-6 {
+  transform: translateZ(208px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-7 {
+  transform: translateZ(208px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-8 {
+  transform: translateZ(208px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-9 {
+  transform: translateZ(208px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-10 {
+  transform: translateZ(208px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-11 {
+  transform: translateZ(208px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-12 {
+  transform: translateZ(208px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-13 {
+  transform: translateZ(208px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-14 {
+  transform: translateZ(208px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-15 {
+  transform: translateZ(208px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-16 {
+  transform: translateZ(208px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-17 {
+  transform: translateZ(208px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-18 {
+  transform: translateZ(208px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-19 {
+  transform: translateZ(208px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-20 {
+  transform: translateZ(208px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-21 {
+  transform: translateZ(208px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-22 {
+  transform: translateZ(208px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-23 {
+  transform: translateZ(208px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-24 {
+  transform: translateZ(208px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-25 {
+  transform: translateZ(208px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-26 {
+  transform: translateZ(208px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-27 {
+  transform: translateZ(208px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-28 {
+  transform: translateZ(208px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-29 {
+  transform: translateZ(208px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-30 {
+  transform: translateZ(208px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-31 {
+  transform: translateZ(208px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-32 {
+  transform: translateZ(208px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-33 {
+  transform: translateZ(208px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-34 {
+  transform: translateZ(208px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-35 {
+  transform: translateZ(208px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-36 {
+  transform: translateZ(208px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-37 {
+  transform: translateZ(208px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-38 {
+  transform: translateZ(208px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-39 {
+  transform: translateZ(208px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-9.y-40 {
+  transform: translateZ(208px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-0 {
+  transform: translateZ(234px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-1 {
+  transform: translateZ(234px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-2 {
+  transform: translateZ(234px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-3 {
+  transform: translateZ(234px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-4 {
+  transform: translateZ(234px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-5 {
+  transform: translateZ(234px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-6 {
+  transform: translateZ(234px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-7 {
+  transform: translateZ(234px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-8 {
+  transform: translateZ(234px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-9 {
+  transform: translateZ(234px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-10 {
+  transform: translateZ(234px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-11 {
+  transform: translateZ(234px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-12 {
+  transform: translateZ(234px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-13 {
+  transform: translateZ(234px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-14 {
+  transform: translateZ(234px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-15 {
+  transform: translateZ(234px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-16 {
+  transform: translateZ(234px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-17 {
+  transform: translateZ(234px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-18 {
+  transform: translateZ(234px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-19 {
+  transform: translateZ(234px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-20 {
+  transform: translateZ(234px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-21 {
+  transform: translateZ(234px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-22 {
+  transform: translateZ(234px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-23 {
+  transform: translateZ(234px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-24 {
+  transform: translateZ(234px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-25 {
+  transform: translateZ(234px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-26 {
+  transform: translateZ(234px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-27 {
+  transform: translateZ(234px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-28 {
+  transform: translateZ(234px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-29 {
+  transform: translateZ(234px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-30 {
+  transform: translateZ(234px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-31 {
+  transform: translateZ(234px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-32 {
+  transform: translateZ(234px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-33 {
+  transform: translateZ(234px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-34 {
+  transform: translateZ(234px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-35 {
+  transform: translateZ(234px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-36 {
+  transform: translateZ(234px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-37 {
+  transform: translateZ(234px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-38 {
+  transform: translateZ(234px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-39 {
+  transform: translateZ(234px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-10.y-40 {
+  transform: translateZ(234px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-0 {
+  transform: translateZ(260px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-1 {
+  transform: translateZ(260px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-2 {
+  transform: translateZ(260px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-3 {
+  transform: translateZ(260px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-4 {
+  transform: translateZ(260px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-5 {
+  transform: translateZ(260px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-6 {
+  transform: translateZ(260px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-7 {
+  transform: translateZ(260px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-8 {
+  transform: translateZ(260px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-9 {
+  transform: translateZ(260px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-10 {
+  transform: translateZ(260px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-11 {
+  transform: translateZ(260px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-12 {
+  transform: translateZ(260px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-13 {
+  transform: translateZ(260px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-14 {
+  transform: translateZ(260px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-15 {
+  transform: translateZ(260px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-16 {
+  transform: translateZ(260px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-17 {
+  transform: translateZ(260px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-18 {
+  transform: translateZ(260px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-19 {
+  transform: translateZ(260px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-20 {
+  transform: translateZ(260px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-21 {
+  transform: translateZ(260px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-22 {
+  transform: translateZ(260px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-23 {
+  transform: translateZ(260px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-24 {
+  transform: translateZ(260px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-25 {
+  transform: translateZ(260px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-26 {
+  transform: translateZ(260px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-27 {
+  transform: translateZ(260px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-28 {
+  transform: translateZ(260px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-29 {
+  transform: translateZ(260px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-30 {
+  transform: translateZ(260px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-31 {
+  transform: translateZ(260px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-32 {
+  transform: translateZ(260px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-33 {
+  transform: translateZ(260px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-34 {
+  transform: translateZ(260px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-35 {
+  transform: translateZ(260px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-36 {
+  transform: translateZ(260px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-37 {
+  transform: translateZ(260px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-38 {
+  transform: translateZ(260px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-39 {
+  transform: translateZ(260px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-11.y-40 {
+  transform: translateZ(260px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-0 {
+  transform: translateZ(286px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-1 {
+  transform: translateZ(286px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-2 {
+  transform: translateZ(286px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-3 {
+  transform: translateZ(286px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-4 {
+  transform: translateZ(286px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-5 {
+  transform: translateZ(286px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-6 {
+  transform: translateZ(286px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-7 {
+  transform: translateZ(286px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-8 {
+  transform: translateZ(286px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-9 {
+  transform: translateZ(286px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-10 {
+  transform: translateZ(286px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-11 {
+  transform: translateZ(286px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-12 {
+  transform: translateZ(286px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-13 {
+  transform: translateZ(286px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-14 {
+  transform: translateZ(286px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-15 {
+  transform: translateZ(286px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-16 {
+  transform: translateZ(286px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-17 {
+  transform: translateZ(286px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-18 {
+  transform: translateZ(286px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-19 {
+  transform: translateZ(286px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-20 {
+  transform: translateZ(286px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-21 {
+  transform: translateZ(286px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-22 {
+  transform: translateZ(286px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-23 {
+  transform: translateZ(286px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-24 {
+  transform: translateZ(286px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-25 {
+  transform: translateZ(286px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-26 {
+  transform: translateZ(286px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-27 {
+  transform: translateZ(286px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-28 {
+  transform: translateZ(286px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-29 {
+  transform: translateZ(286px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-30 {
+  transform: translateZ(286px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-31 {
+  transform: translateZ(286px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-32 {
+  transform: translateZ(286px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-33 {
+  transform: translateZ(286px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-34 {
+  transform: translateZ(286px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-35 {
+  transform: translateZ(286px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-36 {
+  transform: translateZ(286px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-37 {
+  transform: translateZ(286px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-38 {
+  transform: translateZ(286px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-39 {
+  transform: translateZ(286px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-12.y-40 {
+  transform: translateZ(286px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-0 {
+  transform: translateZ(312px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-1 {
+  transform: translateZ(312px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-2 {
+  transform: translateZ(312px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-3 {
+  transform: translateZ(312px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-4 {
+  transform: translateZ(312px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-5 {
+  transform: translateZ(312px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-6 {
+  transform: translateZ(312px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-7 {
+  transform: translateZ(312px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-8 {
+  transform: translateZ(312px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-9 {
+  transform: translateZ(312px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-10 {
+  transform: translateZ(312px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-11 {
+  transform: translateZ(312px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-12 {
+  transform: translateZ(312px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-13 {
+  transform: translateZ(312px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-14 {
+  transform: translateZ(312px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-15 {
+  transform: translateZ(312px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-16 {
+  transform: translateZ(312px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-17 {
+  transform: translateZ(312px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-18 {
+  transform: translateZ(312px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-19 {
+  transform: translateZ(312px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-20 {
+  transform: translateZ(312px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-21 {
+  transform: translateZ(312px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-22 {
+  transform: translateZ(312px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-23 {
+  transform: translateZ(312px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-24 {
+  transform: translateZ(312px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-25 {
+  transform: translateZ(312px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-26 {
+  transform: translateZ(312px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-27 {
+  transform: translateZ(312px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-28 {
+  transform: translateZ(312px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-29 {
+  transform: translateZ(312px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-30 {
+  transform: translateZ(312px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-31 {
+  transform: translateZ(312px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-32 {
+  transform: translateZ(312px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-33 {
+  transform: translateZ(312px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-34 {
+  transform: translateZ(312px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-35 {
+  transform: translateZ(312px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-36 {
+  transform: translateZ(312px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-37 {
+  transform: translateZ(312px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-38 {
+  transform: translateZ(312px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-39 {
+  transform: translateZ(312px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-13.y-40 {
+  transform: translateZ(312px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-0 {
+  transform: translateZ(338px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-1 {
+  transform: translateZ(338px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-2 {
+  transform: translateZ(338px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-3 {
+  transform: translateZ(338px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-4 {
+  transform: translateZ(338px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-5 {
+  transform: translateZ(338px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-6 {
+  transform: translateZ(338px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-7 {
+  transform: translateZ(338px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-8 {
+  transform: translateZ(338px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-9 {
+  transform: translateZ(338px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-10 {
+  transform: translateZ(338px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-11 {
+  transform: translateZ(338px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-12 {
+  transform: translateZ(338px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-13 {
+  transform: translateZ(338px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-14 {
+  transform: translateZ(338px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-15 {
+  transform: translateZ(338px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-16 {
+  transform: translateZ(338px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-17 {
+  transform: translateZ(338px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-18 {
+  transform: translateZ(338px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-19 {
+  transform: translateZ(338px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-20 {
+  transform: translateZ(338px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-21 {
+  transform: translateZ(338px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-22 {
+  transform: translateZ(338px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-23 {
+  transform: translateZ(338px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-24 {
+  transform: translateZ(338px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-25 {
+  transform: translateZ(338px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-26 {
+  transform: translateZ(338px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-27 {
+  transform: translateZ(338px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-28 {
+  transform: translateZ(338px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-29 {
+  transform: translateZ(338px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-30 {
+  transform: translateZ(338px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-31 {
+  transform: translateZ(338px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-32 {
+  transform: translateZ(338px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-33 {
+  transform: translateZ(338px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-34 {
+  transform: translateZ(338px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-35 {
+  transform: translateZ(338px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-36 {
+  transform: translateZ(338px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-37 {
+  transform: translateZ(338px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-38 {
+  transform: translateZ(338px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-39 {
+  transform: translateZ(338px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-14.y-40 {
+  transform: translateZ(338px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-0 {
+  transform: translateZ(364px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-1 {
+  transform: translateZ(364px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-2 {
+  transform: translateZ(364px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-3 {
+  transform: translateZ(364px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-4 {
+  transform: translateZ(364px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-5 {
+  transform: translateZ(364px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-6 {
+  transform: translateZ(364px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-7 {
+  transform: translateZ(364px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-8 {
+  transform: translateZ(364px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-9 {
+  transform: translateZ(364px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-10 {
+  transform: translateZ(364px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-11 {
+  transform: translateZ(364px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-12 {
+  transform: translateZ(364px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-13 {
+  transform: translateZ(364px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-14 {
+  transform: translateZ(364px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-15 {
+  transform: translateZ(364px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-16 {
+  transform: translateZ(364px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-17 {
+  transform: translateZ(364px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-18 {
+  transform: translateZ(364px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-19 {
+  transform: translateZ(364px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-20 {
+  transform: translateZ(364px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-21 {
+  transform: translateZ(364px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-22 {
+  transform: translateZ(364px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-23 {
+  transform: translateZ(364px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-24 {
+  transform: translateZ(364px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-25 {
+  transform: translateZ(364px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-26 {
+  transform: translateZ(364px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-27 {
+  transform: translateZ(364px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-28 {
+  transform: translateZ(364px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-29 {
+  transform: translateZ(364px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-30 {
+  transform: translateZ(364px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-31 {
+  transform: translateZ(364px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-32 {
+  transform: translateZ(364px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-33 {
+  transform: translateZ(364px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-34 {
+  transform: translateZ(364px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-35 {
+  transform: translateZ(364px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-36 {
+  transform: translateZ(364px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-37 {
+  transform: translateZ(364px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-38 {
+  transform: translateZ(364px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-39 {
+  transform: translateZ(364px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-15.y-40 {
+  transform: translateZ(364px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-0 {
+  transform: translateZ(390px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-1 {
+  transform: translateZ(390px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-2 {
+  transform: translateZ(390px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-3 {
+  transform: translateZ(390px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-4 {
+  transform: translateZ(390px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-5 {
+  transform: translateZ(390px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-6 {
+  transform: translateZ(390px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-7 {
+  transform: translateZ(390px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-8 {
+  transform: translateZ(390px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-9 {
+  transform: translateZ(390px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-10 {
+  transform: translateZ(390px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-11 {
+  transform: translateZ(390px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-12 {
+  transform: translateZ(390px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-13 {
+  transform: translateZ(390px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-14 {
+  transform: translateZ(390px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-15 {
+  transform: translateZ(390px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-16 {
+  transform: translateZ(390px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-17 {
+  transform: translateZ(390px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-18 {
+  transform: translateZ(390px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-19 {
+  transform: translateZ(390px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-20 {
+  transform: translateZ(390px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-21 {
+  transform: translateZ(390px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-22 {
+  transform: translateZ(390px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-23 {
+  transform: translateZ(390px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-24 {
+  transform: translateZ(390px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-25 {
+  transform: translateZ(390px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-26 {
+  transform: translateZ(390px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-27 {
+  transform: translateZ(390px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-28 {
+  transform: translateZ(390px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-29 {
+  transform: translateZ(390px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-30 {
+  transform: translateZ(390px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-31 {
+  transform: translateZ(390px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-32 {
+  transform: translateZ(390px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-33 {
+  transform: translateZ(390px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-34 {
+  transform: translateZ(390px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-35 {
+  transform: translateZ(390px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-36 {
+  transform: translateZ(390px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-37 {
+  transform: translateZ(390px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-38 {
+  transform: translateZ(390px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-39 {
+  transform: translateZ(390px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-16.y-40 {
+  transform: translateZ(390px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-0 {
+  transform: translateZ(416px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-1 {
+  transform: translateZ(416px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-2 {
+  transform: translateZ(416px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-3 {
+  transform: translateZ(416px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-4 {
+  transform: translateZ(416px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-5 {
+  transform: translateZ(416px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-6 {
+  transform: translateZ(416px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-7 {
+  transform: translateZ(416px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-8 {
+  transform: translateZ(416px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-9 {
+  transform: translateZ(416px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-10 {
+  transform: translateZ(416px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-11 {
+  transform: translateZ(416px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-12 {
+  transform: translateZ(416px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-13 {
+  transform: translateZ(416px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-14 {
+  transform: translateZ(416px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-15 {
+  transform: translateZ(416px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-16 {
+  transform: translateZ(416px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-17 {
+  transform: translateZ(416px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-18 {
+  transform: translateZ(416px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-19 {
+  transform: translateZ(416px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-20 {
+  transform: translateZ(416px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-21 {
+  transform: translateZ(416px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-22 {
+  transform: translateZ(416px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-23 {
+  transform: translateZ(416px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-24 {
+  transform: translateZ(416px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-25 {
+  transform: translateZ(416px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-26 {
+  transform: translateZ(416px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-27 {
+  transform: translateZ(416px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-28 {
+  transform: translateZ(416px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-29 {
+  transform: translateZ(416px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-30 {
+  transform: translateZ(416px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-31 {
+  transform: translateZ(416px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-32 {
+  transform: translateZ(416px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-33 {
+  transform: translateZ(416px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-34 {
+  transform: translateZ(416px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-35 {
+  transform: translateZ(416px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-36 {
+  transform: translateZ(416px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-37 {
+  transform: translateZ(416px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-38 {
+  transform: translateZ(416px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-39 {
+  transform: translateZ(416px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-17.y-40 {
+  transform: translateZ(416px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-0 {
+  transform: translateZ(442px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-1 {
+  transform: translateZ(442px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-2 {
+  transform: translateZ(442px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-3 {
+  transform: translateZ(442px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-4 {
+  transform: translateZ(442px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-5 {
+  transform: translateZ(442px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-6 {
+  transform: translateZ(442px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-7 {
+  transform: translateZ(442px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-8 {
+  transform: translateZ(442px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-9 {
+  transform: translateZ(442px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-10 {
+  transform: translateZ(442px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-11 {
+  transform: translateZ(442px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-12 {
+  transform: translateZ(442px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-13 {
+  transform: translateZ(442px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-14 {
+  transform: translateZ(442px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-15 {
+  transform: translateZ(442px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-16 {
+  transform: translateZ(442px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-17 {
+  transform: translateZ(442px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-18 {
+  transform: translateZ(442px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-19 {
+  transform: translateZ(442px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-20 {
+  transform: translateZ(442px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-21 {
+  transform: translateZ(442px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-22 {
+  transform: translateZ(442px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-23 {
+  transform: translateZ(442px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-24 {
+  transform: translateZ(442px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-25 {
+  transform: translateZ(442px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-26 {
+  transform: translateZ(442px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-27 {
+  transform: translateZ(442px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-28 {
+  transform: translateZ(442px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-29 {
+  transform: translateZ(442px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-30 {
+  transform: translateZ(442px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-31 {
+  transform: translateZ(442px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-32 {
+  transform: translateZ(442px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-33 {
+  transform: translateZ(442px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-34 {
+  transform: translateZ(442px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-35 {
+  transform: translateZ(442px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-36 {
+  transform: translateZ(442px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-37 {
+  transform: translateZ(442px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-38 {
+  transform: translateZ(442px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-39 {
+  transform: translateZ(442px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-18.y-40 {
+  transform: translateZ(442px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-0 {
+  transform: translateZ(468px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-1 {
+  transform: translateZ(468px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-2 {
+  transform: translateZ(468px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-3 {
+  transform: translateZ(468px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-4 {
+  transform: translateZ(468px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-5 {
+  transform: translateZ(468px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-6 {
+  transform: translateZ(468px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-7 {
+  transform: translateZ(468px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-8 {
+  transform: translateZ(468px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-9 {
+  transform: translateZ(468px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-10 {
+  transform: translateZ(468px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-11 {
+  transform: translateZ(468px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-12 {
+  transform: translateZ(468px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-13 {
+  transform: translateZ(468px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-14 {
+  transform: translateZ(468px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-15 {
+  transform: translateZ(468px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-16 {
+  transform: translateZ(468px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-17 {
+  transform: translateZ(468px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-18 {
+  transform: translateZ(468px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-19 {
+  transform: translateZ(468px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-20 {
+  transform: translateZ(468px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-21 {
+  transform: translateZ(468px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-22 {
+  transform: translateZ(468px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-23 {
+  transform: translateZ(468px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-24 {
+  transform: translateZ(468px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-25 {
+  transform: translateZ(468px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-26 {
+  transform: translateZ(468px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-27 {
+  transform: translateZ(468px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-28 {
+  transform: translateZ(468px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-29 {
+  transform: translateZ(468px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-30 {
+  transform: translateZ(468px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-31 {
+  transform: translateZ(468px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-32 {
+  transform: translateZ(468px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-33 {
+  transform: translateZ(468px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-34 {
+  transform: translateZ(468px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-35 {
+  transform: translateZ(468px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-36 {
+  transform: translateZ(468px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-37 {
+  transform: translateZ(468px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-38 {
+  transform: translateZ(468px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-39 {
+  transform: translateZ(468px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-19.y-40 {
+  transform: translateZ(468px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-0 {
+  transform: translateZ(494px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-1 {
+  transform: translateZ(494px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-2 {
+  transform: translateZ(494px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-3 {
+  transform: translateZ(494px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-4 {
+  transform: translateZ(494px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-5 {
+  transform: translateZ(494px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-6 {
+  transform: translateZ(494px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-7 {
+  transform: translateZ(494px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-8 {
+  transform: translateZ(494px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-9 {
+  transform: translateZ(494px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-10 {
+  transform: translateZ(494px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-11 {
+  transform: translateZ(494px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-12 {
+  transform: translateZ(494px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-13 {
+  transform: translateZ(494px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-14 {
+  transform: translateZ(494px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-15 {
+  transform: translateZ(494px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-16 {
+  transform: translateZ(494px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-17 {
+  transform: translateZ(494px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-18 {
+  transform: translateZ(494px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-19 {
+  transform: translateZ(494px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-20 {
+  transform: translateZ(494px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-21 {
+  transform: translateZ(494px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-22 {
+  transform: translateZ(494px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-23 {
+  transform: translateZ(494px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-24 {
+  transform: translateZ(494px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-25 {
+  transform: translateZ(494px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-26 {
+  transform: translateZ(494px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-27 {
+  transform: translateZ(494px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-28 {
+  transform: translateZ(494px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-29 {
+  transform: translateZ(494px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-30 {
+  transform: translateZ(494px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-31 {
+  transform: translateZ(494px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-32 {
+  transform: translateZ(494px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-33 {
+  transform: translateZ(494px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-34 {
+  transform: translateZ(494px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-35 {
+  transform: translateZ(494px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-36 {
+  transform: translateZ(494px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-37 {
+  transform: translateZ(494px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-38 {
+  transform: translateZ(494px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-39 {
+  transform: translateZ(494px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-20.y-40 {
+  transform: translateZ(494px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-0 {
+  transform: translateZ(520px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-1 {
+  transform: translateZ(520px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-2 {
+  transform: translateZ(520px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-3 {
+  transform: translateZ(520px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-4 {
+  transform: translateZ(520px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-5 {
+  transform: translateZ(520px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-6 {
+  transform: translateZ(520px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-7 {
+  transform: translateZ(520px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-8 {
+  transform: translateZ(520px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-9 {
+  transform: translateZ(520px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-10 {
+  transform: translateZ(520px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-11 {
+  transform: translateZ(520px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-12 {
+  transform: translateZ(520px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-13 {
+  transform: translateZ(520px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-14 {
+  transform: translateZ(520px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-15 {
+  transform: translateZ(520px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-16 {
+  transform: translateZ(520px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-17 {
+  transform: translateZ(520px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-18 {
+  transform: translateZ(520px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-19 {
+  transform: translateZ(520px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-20 {
+  transform: translateZ(520px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-21 {
+  transform: translateZ(520px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-22 {
+  transform: translateZ(520px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-23 {
+  transform: translateZ(520px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-24 {
+  transform: translateZ(520px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-25 {
+  transform: translateZ(520px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-26 {
+  transform: translateZ(520px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-27 {
+  transform: translateZ(520px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-28 {
+  transform: translateZ(520px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-29 {
+  transform: translateZ(520px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-30 {
+  transform: translateZ(520px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-31 {
+  transform: translateZ(520px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-32 {
+  transform: translateZ(520px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-33 {
+  transform: translateZ(520px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-34 {
+  transform: translateZ(520px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-35 {
+  transform: translateZ(520px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-36 {
+  transform: translateZ(520px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-37 {
+  transform: translateZ(520px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-38 {
+  transform: translateZ(520px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-39 {
+  transform: translateZ(520px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-21.y-40 {
+  transform: translateZ(520px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-0 {
+  transform: translateZ(546px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-1 {
+  transform: translateZ(546px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-2 {
+  transform: translateZ(546px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-3 {
+  transform: translateZ(546px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-4 {
+  transform: translateZ(546px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-5 {
+  transform: translateZ(546px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-6 {
+  transform: translateZ(546px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-7 {
+  transform: translateZ(546px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-8 {
+  transform: translateZ(546px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-9 {
+  transform: translateZ(546px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-10 {
+  transform: translateZ(546px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-11 {
+  transform: translateZ(546px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-12 {
+  transform: translateZ(546px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-13 {
+  transform: translateZ(546px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-14 {
+  transform: translateZ(546px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-15 {
+  transform: translateZ(546px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-16 {
+  transform: translateZ(546px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-17 {
+  transform: translateZ(546px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-18 {
+  transform: translateZ(546px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-19 {
+  transform: translateZ(546px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-20 {
+  transform: translateZ(546px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-21 {
+  transform: translateZ(546px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-22 {
+  transform: translateZ(546px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-23 {
+  transform: translateZ(546px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-24 {
+  transform: translateZ(546px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-25 {
+  transform: translateZ(546px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-26 {
+  transform: translateZ(546px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-27 {
+  transform: translateZ(546px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-28 {
+  transform: translateZ(546px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-29 {
+  transform: translateZ(546px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-30 {
+  transform: translateZ(546px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-31 {
+  transform: translateZ(546px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-32 {
+  transform: translateZ(546px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-33 {
+  transform: translateZ(546px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-34 {
+  transform: translateZ(546px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-35 {
+  transform: translateZ(546px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-36 {
+  transform: translateZ(546px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-37 {
+  transform: translateZ(546px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-38 {
+  transform: translateZ(546px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-39 {
+  transform: translateZ(546px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-22.y-40 {
+  transform: translateZ(546px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-0 {
+  transform: translateZ(572px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-1 {
+  transform: translateZ(572px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-2 {
+  transform: translateZ(572px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-3 {
+  transform: translateZ(572px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-4 {
+  transform: translateZ(572px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-5 {
+  transform: translateZ(572px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-6 {
+  transform: translateZ(572px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-7 {
+  transform: translateZ(572px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-8 {
+  transform: translateZ(572px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-9 {
+  transform: translateZ(572px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-10 {
+  transform: translateZ(572px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-11 {
+  transform: translateZ(572px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-12 {
+  transform: translateZ(572px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-13 {
+  transform: translateZ(572px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-14 {
+  transform: translateZ(572px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-15 {
+  transform: translateZ(572px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-16 {
+  transform: translateZ(572px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-17 {
+  transform: translateZ(572px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-18 {
+  transform: translateZ(572px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-19 {
+  transform: translateZ(572px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-20 {
+  transform: translateZ(572px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-21 {
+  transform: translateZ(572px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-22 {
+  transform: translateZ(572px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-23 {
+  transform: translateZ(572px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-24 {
+  transform: translateZ(572px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-25 {
+  transform: translateZ(572px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-26 {
+  transform: translateZ(572px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-27 {
+  transform: translateZ(572px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-28 {
+  transform: translateZ(572px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-29 {
+  transform: translateZ(572px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-30 {
+  transform: translateZ(572px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-31 {
+  transform: translateZ(572px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-32 {
+  transform: translateZ(572px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-33 {
+  transform: translateZ(572px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-34 {
+  transform: translateZ(572px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-35 {
+  transform: translateZ(572px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-36 {
+  transform: translateZ(572px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-37 {
+  transform: translateZ(572px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-38 {
+  transform: translateZ(572px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-39 {
+  transform: translateZ(572px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-23.y-40 {
+  transform: translateZ(572px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-0 {
+  transform: translateZ(598px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-1 {
+  transform: translateZ(598px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-2 {
+  transform: translateZ(598px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-3 {
+  transform: translateZ(598px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-4 {
+  transform: translateZ(598px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-5 {
+  transform: translateZ(598px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-6 {
+  transform: translateZ(598px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-7 {
+  transform: translateZ(598px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-8 {
+  transform: translateZ(598px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-9 {
+  transform: translateZ(598px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-10 {
+  transform: translateZ(598px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-11 {
+  transform: translateZ(598px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-12 {
+  transform: translateZ(598px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-13 {
+  transform: translateZ(598px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-14 {
+  transform: translateZ(598px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-15 {
+  transform: translateZ(598px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-16 {
+  transform: translateZ(598px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-17 {
+  transform: translateZ(598px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-18 {
+  transform: translateZ(598px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-19 {
+  transform: translateZ(598px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-20 {
+  transform: translateZ(598px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-21 {
+  transform: translateZ(598px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-22 {
+  transform: translateZ(598px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-23 {
+  transform: translateZ(598px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-24 {
+  transform: translateZ(598px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-25 {
+  transform: translateZ(598px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-26 {
+  transform: translateZ(598px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-27 {
+  transform: translateZ(598px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-28 {
+  transform: translateZ(598px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-29 {
+  transform: translateZ(598px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-30 {
+  transform: translateZ(598px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-31 {
+  transform: translateZ(598px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-32 {
+  transform: translateZ(598px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-33 {
+  transform: translateZ(598px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-34 {
+  transform: translateZ(598px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-35 {
+  transform: translateZ(598px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-36 {
+  transform: translateZ(598px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-37 {
+  transform: translateZ(598px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-38 {
+  transform: translateZ(598px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-39 {
+  transform: translateZ(598px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-24.y-40 {
+  transform: translateZ(598px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-0 {
+  transform: translateZ(624px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-1 {
+  transform: translateZ(624px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-2 {
+  transform: translateZ(624px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-3 {
+  transform: translateZ(624px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-4 {
+  transform: translateZ(624px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-5 {
+  transform: translateZ(624px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-6 {
+  transform: translateZ(624px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-7 {
+  transform: translateZ(624px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-8 {
+  transform: translateZ(624px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-9 {
+  transform: translateZ(624px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-10 {
+  transform: translateZ(624px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-11 {
+  transform: translateZ(624px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-12 {
+  transform: translateZ(624px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-13 {
+  transform: translateZ(624px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-14 {
+  transform: translateZ(624px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-15 {
+  transform: translateZ(624px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-16 {
+  transform: translateZ(624px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-17 {
+  transform: translateZ(624px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-18 {
+  transform: translateZ(624px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-19 {
+  transform: translateZ(624px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-20 {
+  transform: translateZ(624px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-21 {
+  transform: translateZ(624px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-22 {
+  transform: translateZ(624px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-23 {
+  transform: translateZ(624px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-24 {
+  transform: translateZ(624px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-25 {
+  transform: translateZ(624px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-26 {
+  transform: translateZ(624px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-27 {
+  transform: translateZ(624px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-28 {
+  transform: translateZ(624px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-29 {
+  transform: translateZ(624px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-30 {
+  transform: translateZ(624px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-31 {
+  transform: translateZ(624px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-32 {
+  transform: translateZ(624px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-33 {
+  transform: translateZ(624px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-34 {
+  transform: translateZ(624px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-35 {
+  transform: translateZ(624px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-36 {
+  transform: translateZ(624px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-37 {
+  transform: translateZ(624px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-38 {
+  transform: translateZ(624px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-39 {
+  transform: translateZ(624px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-25.y-40 {
+  transform: translateZ(624px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-0 {
+  transform: translateZ(650px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-1 {
+  transform: translateZ(650px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-2 {
+  transform: translateZ(650px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-3 {
+  transform: translateZ(650px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-4 {
+  transform: translateZ(650px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-5 {
+  transform: translateZ(650px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-6 {
+  transform: translateZ(650px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-7 {
+  transform: translateZ(650px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-8 {
+  transform: translateZ(650px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-9 {
+  transform: translateZ(650px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-10 {
+  transform: translateZ(650px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-11 {
+  transform: translateZ(650px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-12 {
+  transform: translateZ(650px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-13 {
+  transform: translateZ(650px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-14 {
+  transform: translateZ(650px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-15 {
+  transform: translateZ(650px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-16 {
+  transform: translateZ(650px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-17 {
+  transform: translateZ(650px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-18 {
+  transform: translateZ(650px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-19 {
+  transform: translateZ(650px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-20 {
+  transform: translateZ(650px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-21 {
+  transform: translateZ(650px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-22 {
+  transform: translateZ(650px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-23 {
+  transform: translateZ(650px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-24 {
+  transform: translateZ(650px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-25 {
+  transform: translateZ(650px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-26 {
+  transform: translateZ(650px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-27 {
+  transform: translateZ(650px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-28 {
+  transform: translateZ(650px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-29 {
+  transform: translateZ(650px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-30 {
+  transform: translateZ(650px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-31 {
+  transform: translateZ(650px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-32 {
+  transform: translateZ(650px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-33 {
+  transform: translateZ(650px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-34 {
+  transform: translateZ(650px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-35 {
+  transform: translateZ(650px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-36 {
+  transform: translateZ(650px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-37 {
+  transform: translateZ(650px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-38 {
+  transform: translateZ(650px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-39 {
+  transform: translateZ(650px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-26.y-40 {
+  transform: translateZ(650px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-0 {
+  transform: translateZ(676px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-1 {
+  transform: translateZ(676px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-2 {
+  transform: translateZ(676px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-3 {
+  transform: translateZ(676px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-4 {
+  transform: translateZ(676px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-5 {
+  transform: translateZ(676px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-6 {
+  transform: translateZ(676px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-7 {
+  transform: translateZ(676px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-8 {
+  transform: translateZ(676px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-9 {
+  transform: translateZ(676px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-10 {
+  transform: translateZ(676px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-11 {
+  transform: translateZ(676px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-12 {
+  transform: translateZ(676px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-13 {
+  transform: translateZ(676px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-14 {
+  transform: translateZ(676px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-15 {
+  transform: translateZ(676px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-16 {
+  transform: translateZ(676px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-17 {
+  transform: translateZ(676px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-18 {
+  transform: translateZ(676px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-19 {
+  transform: translateZ(676px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-20 {
+  transform: translateZ(676px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-21 {
+  transform: translateZ(676px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-22 {
+  transform: translateZ(676px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-23 {
+  transform: translateZ(676px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-24 {
+  transform: translateZ(676px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-25 {
+  transform: translateZ(676px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-26 {
+  transform: translateZ(676px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-27 {
+  transform: translateZ(676px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-28 {
+  transform: translateZ(676px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-29 {
+  transform: translateZ(676px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-30 {
+  transform: translateZ(676px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-31 {
+  transform: translateZ(676px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-32 {
+  transform: translateZ(676px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-33 {
+  transform: translateZ(676px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-34 {
+  transform: translateZ(676px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-35 {
+  transform: translateZ(676px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-36 {
+  transform: translateZ(676px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-37 {
+  transform: translateZ(676px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-38 {
+  transform: translateZ(676px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-39 {
+  transform: translateZ(676px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-27.y-40 {
+  transform: translateZ(676px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-0 {
+  transform: translateZ(702px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-1 {
+  transform: translateZ(702px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-2 {
+  transform: translateZ(702px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-3 {
+  transform: translateZ(702px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-4 {
+  transform: translateZ(702px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-5 {
+  transform: translateZ(702px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-6 {
+  transform: translateZ(702px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-7 {
+  transform: translateZ(702px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-8 {
+  transform: translateZ(702px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-9 {
+  transform: translateZ(702px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-10 {
+  transform: translateZ(702px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-11 {
+  transform: translateZ(702px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-12 {
+  transform: translateZ(702px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-13 {
+  transform: translateZ(702px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-14 {
+  transform: translateZ(702px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-15 {
+  transform: translateZ(702px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-16 {
+  transform: translateZ(702px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-17 {
+  transform: translateZ(702px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-18 {
+  transform: translateZ(702px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-19 {
+  transform: translateZ(702px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-20 {
+  transform: translateZ(702px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-21 {
+  transform: translateZ(702px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-22 {
+  transform: translateZ(702px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-23 {
+  transform: translateZ(702px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-24 {
+  transform: translateZ(702px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-25 {
+  transform: translateZ(702px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-26 {
+  transform: translateZ(702px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-27 {
+  transform: translateZ(702px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-28 {
+  transform: translateZ(702px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-29 {
+  transform: translateZ(702px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-30 {
+  transform: translateZ(702px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-31 {
+  transform: translateZ(702px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-32 {
+  transform: translateZ(702px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-33 {
+  transform: translateZ(702px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-34 {
+  transform: translateZ(702px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-35 {
+  transform: translateZ(702px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-36 {
+  transform: translateZ(702px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-37 {
+  transform: translateZ(702px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-38 {
+  transform: translateZ(702px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-39 {
+  transform: translateZ(702px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-28.y-40 {
+  transform: translateZ(702px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-0 {
+  transform: translateZ(728px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-1 {
+  transform: translateZ(728px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-2 {
+  transform: translateZ(728px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-3 {
+  transform: translateZ(728px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-4 {
+  transform: translateZ(728px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-5 {
+  transform: translateZ(728px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-6 {
+  transform: translateZ(728px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-7 {
+  transform: translateZ(728px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-8 {
+  transform: translateZ(728px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-9 {
+  transform: translateZ(728px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-10 {
+  transform: translateZ(728px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-11 {
+  transform: translateZ(728px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-12 {
+  transform: translateZ(728px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-13 {
+  transform: translateZ(728px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-14 {
+  transform: translateZ(728px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-15 {
+  transform: translateZ(728px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-16 {
+  transform: translateZ(728px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-17 {
+  transform: translateZ(728px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-18 {
+  transform: translateZ(728px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-19 {
+  transform: translateZ(728px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-20 {
+  transform: translateZ(728px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-21 {
+  transform: translateZ(728px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-22 {
+  transform: translateZ(728px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-23 {
+  transform: translateZ(728px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-24 {
+  transform: translateZ(728px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-25 {
+  transform: translateZ(728px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-26 {
+  transform: translateZ(728px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-27 {
+  transform: translateZ(728px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-28 {
+  transform: translateZ(728px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-29 {
+  transform: translateZ(728px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-30 {
+  transform: translateZ(728px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-31 {
+  transform: translateZ(728px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-32 {
+  transform: translateZ(728px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-33 {
+  transform: translateZ(728px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-34 {
+  transform: translateZ(728px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-35 {
+  transform: translateZ(728px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-36 {
+  transform: translateZ(728px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-37 {
+  transform: translateZ(728px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-38 {
+  transform: translateZ(728px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-39 {
+  transform: translateZ(728px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-29.y-40 {
+  transform: translateZ(728px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-0 {
+  transform: translateZ(754px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-1 {
+  transform: translateZ(754px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-2 {
+  transform: translateZ(754px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-3 {
+  transform: translateZ(754px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-4 {
+  transform: translateZ(754px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-5 {
+  transform: translateZ(754px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-6 {
+  transform: translateZ(754px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-7 {
+  transform: translateZ(754px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-8 {
+  transform: translateZ(754px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-9 {
+  transform: translateZ(754px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-10 {
+  transform: translateZ(754px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-11 {
+  transform: translateZ(754px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-12 {
+  transform: translateZ(754px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-13 {
+  transform: translateZ(754px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-14 {
+  transform: translateZ(754px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-15 {
+  transform: translateZ(754px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-16 {
+  transform: translateZ(754px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-17 {
+  transform: translateZ(754px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-18 {
+  transform: translateZ(754px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-19 {
+  transform: translateZ(754px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-20 {
+  transform: translateZ(754px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-21 {
+  transform: translateZ(754px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-22 {
+  transform: translateZ(754px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-23 {
+  transform: translateZ(754px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-24 {
+  transform: translateZ(754px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-25 {
+  transform: translateZ(754px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-26 {
+  transform: translateZ(754px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-27 {
+  transform: translateZ(754px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-28 {
+  transform: translateZ(754px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-29 {
+  transform: translateZ(754px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-30 {
+  transform: translateZ(754px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-31 {
+  transform: translateZ(754px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-32 {
+  transform: translateZ(754px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-33 {
+  transform: translateZ(754px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-34 {
+  transform: translateZ(754px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-35 {
+  transform: translateZ(754px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-36 {
+  transform: translateZ(754px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-37 {
+  transform: translateZ(754px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-38 {
+  transform: translateZ(754px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-39 {
+  transform: translateZ(754px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-30.y-40 {
+  transform: translateZ(754px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-0 {
+  transform: translateZ(780px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-1 {
+  transform: translateZ(780px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-2 {
+  transform: translateZ(780px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-3 {
+  transform: translateZ(780px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-4 {
+  transform: translateZ(780px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-5 {
+  transform: translateZ(780px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-6 {
+  transform: translateZ(780px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-7 {
+  transform: translateZ(780px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-8 {
+  transform: translateZ(780px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-9 {
+  transform: translateZ(780px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-10 {
+  transform: translateZ(780px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-11 {
+  transform: translateZ(780px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-12 {
+  transform: translateZ(780px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-13 {
+  transform: translateZ(780px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-14 {
+  transform: translateZ(780px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-15 {
+  transform: translateZ(780px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-16 {
+  transform: translateZ(780px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-17 {
+  transform: translateZ(780px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-18 {
+  transform: translateZ(780px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-19 {
+  transform: translateZ(780px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-20 {
+  transform: translateZ(780px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-21 {
+  transform: translateZ(780px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-22 {
+  transform: translateZ(780px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-23 {
+  transform: translateZ(780px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-24 {
+  transform: translateZ(780px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-25 {
+  transform: translateZ(780px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-26 {
+  transform: translateZ(780px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-27 {
+  transform: translateZ(780px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-28 {
+  transform: translateZ(780px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-29 {
+  transform: translateZ(780px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-30 {
+  transform: translateZ(780px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-31 {
+  transform: translateZ(780px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-32 {
+  transform: translateZ(780px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-33 {
+  transform: translateZ(780px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-34 {
+  transform: translateZ(780px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-35 {
+  transform: translateZ(780px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-36 {
+  transform: translateZ(780px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-37 {
+  transform: translateZ(780px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-38 {
+  transform: translateZ(780px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-39 {
+  transform: translateZ(780px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-31.y-40 {
+  transform: translateZ(780px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-0 {
+  transform: translateZ(806px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-1 {
+  transform: translateZ(806px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-2 {
+  transform: translateZ(806px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-3 {
+  transform: translateZ(806px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-4 {
+  transform: translateZ(806px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-5 {
+  transform: translateZ(806px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-6 {
+  transform: translateZ(806px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-7 {
+  transform: translateZ(806px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-8 {
+  transform: translateZ(806px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-9 {
+  transform: translateZ(806px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-10 {
+  transform: translateZ(806px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-11 {
+  transform: translateZ(806px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-12 {
+  transform: translateZ(806px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-13 {
+  transform: translateZ(806px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-14 {
+  transform: translateZ(806px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-15 {
+  transform: translateZ(806px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-16 {
+  transform: translateZ(806px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-17 {
+  transform: translateZ(806px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-18 {
+  transform: translateZ(806px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-19 {
+  transform: translateZ(806px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-20 {
+  transform: translateZ(806px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-21 {
+  transform: translateZ(806px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-22 {
+  transform: translateZ(806px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-23 {
+  transform: translateZ(806px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-24 {
+  transform: translateZ(806px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-25 {
+  transform: translateZ(806px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-26 {
+  transform: translateZ(806px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-27 {
+  transform: translateZ(806px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-28 {
+  transform: translateZ(806px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-29 {
+  transform: translateZ(806px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-30 {
+  transform: translateZ(806px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-31 {
+  transform: translateZ(806px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-32 {
+  transform: translateZ(806px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-33 {
+  transform: translateZ(806px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-34 {
+  transform: translateZ(806px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-35 {
+  transform: translateZ(806px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-36 {
+  transform: translateZ(806px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-37 {
+  transform: translateZ(806px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-38 {
+  transform: translateZ(806px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-39 {
+  transform: translateZ(806px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-32.y-40 {
+  transform: translateZ(806px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-0 {
+  transform: translateZ(832px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-1 {
+  transform: translateZ(832px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-2 {
+  transform: translateZ(832px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-3 {
+  transform: translateZ(832px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-4 {
+  transform: translateZ(832px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-5 {
+  transform: translateZ(832px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-6 {
+  transform: translateZ(832px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-7 {
+  transform: translateZ(832px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-8 {
+  transform: translateZ(832px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-9 {
+  transform: translateZ(832px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-10 {
+  transform: translateZ(832px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-11 {
+  transform: translateZ(832px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-12 {
+  transform: translateZ(832px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-13 {
+  transform: translateZ(832px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-14 {
+  transform: translateZ(832px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-15 {
+  transform: translateZ(832px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-16 {
+  transform: translateZ(832px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-17 {
+  transform: translateZ(832px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-18 {
+  transform: translateZ(832px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-19 {
+  transform: translateZ(832px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-20 {
+  transform: translateZ(832px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-21 {
+  transform: translateZ(832px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-22 {
+  transform: translateZ(832px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-23 {
+  transform: translateZ(832px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-24 {
+  transform: translateZ(832px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-25 {
+  transform: translateZ(832px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-26 {
+  transform: translateZ(832px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-27 {
+  transform: translateZ(832px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-28 {
+  transform: translateZ(832px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-29 {
+  transform: translateZ(832px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-30 {
+  transform: translateZ(832px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-31 {
+  transform: translateZ(832px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-32 {
+  transform: translateZ(832px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-33 {
+  transform: translateZ(832px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-34 {
+  transform: translateZ(832px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-35 {
+  transform: translateZ(832px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-36 {
+  transform: translateZ(832px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-37 {
+  transform: translateZ(832px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-38 {
+  transform: translateZ(832px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-39 {
+  transform: translateZ(832px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-33.y-40 {
+  transform: translateZ(832px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-0 {
+  transform: translateZ(858px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-1 {
+  transform: translateZ(858px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-2 {
+  transform: translateZ(858px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-3 {
+  transform: translateZ(858px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-4 {
+  transform: translateZ(858px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-5 {
+  transform: translateZ(858px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-6 {
+  transform: translateZ(858px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-7 {
+  transform: translateZ(858px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-8 {
+  transform: translateZ(858px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-9 {
+  transform: translateZ(858px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-10 {
+  transform: translateZ(858px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-11 {
+  transform: translateZ(858px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-12 {
+  transform: translateZ(858px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-13 {
+  transform: translateZ(858px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-14 {
+  transform: translateZ(858px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-15 {
+  transform: translateZ(858px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-16 {
+  transform: translateZ(858px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-17 {
+  transform: translateZ(858px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-18 {
+  transform: translateZ(858px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-19 {
+  transform: translateZ(858px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-20 {
+  transform: translateZ(858px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-21 {
+  transform: translateZ(858px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-22 {
+  transform: translateZ(858px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-23 {
+  transform: translateZ(858px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-24 {
+  transform: translateZ(858px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-25 {
+  transform: translateZ(858px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-26 {
+  transform: translateZ(858px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-27 {
+  transform: translateZ(858px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-28 {
+  transform: translateZ(858px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-29 {
+  transform: translateZ(858px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-30 {
+  transform: translateZ(858px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-31 {
+  transform: translateZ(858px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-32 {
+  transform: translateZ(858px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-33 {
+  transform: translateZ(858px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-34 {
+  transform: translateZ(858px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-35 {
+  transform: translateZ(858px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-36 {
+  transform: translateZ(858px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-37 {
+  transform: translateZ(858px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-38 {
+  transform: translateZ(858px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-39 {
+  transform: translateZ(858px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-34.y-40 {
+  transform: translateZ(858px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-0 {
+  transform: translateZ(884px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-1 {
+  transform: translateZ(884px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-2 {
+  transform: translateZ(884px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-3 {
+  transform: translateZ(884px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-4 {
+  transform: translateZ(884px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-5 {
+  transform: translateZ(884px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-6 {
+  transform: translateZ(884px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-7 {
+  transform: translateZ(884px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-8 {
+  transform: translateZ(884px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-9 {
+  transform: translateZ(884px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-10 {
+  transform: translateZ(884px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-11 {
+  transform: translateZ(884px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-12 {
+  transform: translateZ(884px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-13 {
+  transform: translateZ(884px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-14 {
+  transform: translateZ(884px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-15 {
+  transform: translateZ(884px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-16 {
+  transform: translateZ(884px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-17 {
+  transform: translateZ(884px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-18 {
+  transform: translateZ(884px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-19 {
+  transform: translateZ(884px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-20 {
+  transform: translateZ(884px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-21 {
+  transform: translateZ(884px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-22 {
+  transform: translateZ(884px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-23 {
+  transform: translateZ(884px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-24 {
+  transform: translateZ(884px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-25 {
+  transform: translateZ(884px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-26 {
+  transform: translateZ(884px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-27 {
+  transform: translateZ(884px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-28 {
+  transform: translateZ(884px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-29 {
+  transform: translateZ(884px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-30 {
+  transform: translateZ(884px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-31 {
+  transform: translateZ(884px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-32 {
+  transform: translateZ(884px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-33 {
+  transform: translateZ(884px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-34 {
+  transform: translateZ(884px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-35 {
+  transform: translateZ(884px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-36 {
+  transform: translateZ(884px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-37 {
+  transform: translateZ(884px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-38 {
+  transform: translateZ(884px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-39 {
+  transform: translateZ(884px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-35.y-40 {
+  transform: translateZ(884px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-0 {
+  transform: translateZ(910px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-1 {
+  transform: translateZ(910px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-2 {
+  transform: translateZ(910px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-3 {
+  transform: translateZ(910px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-4 {
+  transform: translateZ(910px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-5 {
+  transform: translateZ(910px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-6 {
+  transform: translateZ(910px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-7 {
+  transform: translateZ(910px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-8 {
+  transform: translateZ(910px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-9 {
+  transform: translateZ(910px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-10 {
+  transform: translateZ(910px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-11 {
+  transform: translateZ(910px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-12 {
+  transform: translateZ(910px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-13 {
+  transform: translateZ(910px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-14 {
+  transform: translateZ(910px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-15 {
+  transform: translateZ(910px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-16 {
+  transform: translateZ(910px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-17 {
+  transform: translateZ(910px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-18 {
+  transform: translateZ(910px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-19 {
+  transform: translateZ(910px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-20 {
+  transform: translateZ(910px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-21 {
+  transform: translateZ(910px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-22 {
+  transform: translateZ(910px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-23 {
+  transform: translateZ(910px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-24 {
+  transform: translateZ(910px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-25 {
+  transform: translateZ(910px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-26 {
+  transform: translateZ(910px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-27 {
+  transform: translateZ(910px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-28 {
+  transform: translateZ(910px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-29 {
+  transform: translateZ(910px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-30 {
+  transform: translateZ(910px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-31 {
+  transform: translateZ(910px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-32 {
+  transform: translateZ(910px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-33 {
+  transform: translateZ(910px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-34 {
+  transform: translateZ(910px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-35 {
+  transform: translateZ(910px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-36 {
+  transform: translateZ(910px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-37 {
+  transform: translateZ(910px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-38 {
+  transform: translateZ(910px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-39 {
+  transform: translateZ(910px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-36.y-40 {
+  transform: translateZ(910px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-0 {
+  transform: translateZ(936px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-1 {
+  transform: translateZ(936px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-2 {
+  transform: translateZ(936px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-3 {
+  transform: translateZ(936px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-4 {
+  transform: translateZ(936px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-5 {
+  transform: translateZ(936px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-6 {
+  transform: translateZ(936px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-7 {
+  transform: translateZ(936px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-8 {
+  transform: translateZ(936px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-9 {
+  transform: translateZ(936px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-10 {
+  transform: translateZ(936px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-11 {
+  transform: translateZ(936px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-12 {
+  transform: translateZ(936px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-13 {
+  transform: translateZ(936px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-14 {
+  transform: translateZ(936px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-15 {
+  transform: translateZ(936px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-16 {
+  transform: translateZ(936px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-17 {
+  transform: translateZ(936px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-18 {
+  transform: translateZ(936px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-19 {
+  transform: translateZ(936px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-20 {
+  transform: translateZ(936px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-21 {
+  transform: translateZ(936px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-22 {
+  transform: translateZ(936px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-23 {
+  transform: translateZ(936px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-24 {
+  transform: translateZ(936px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-25 {
+  transform: translateZ(936px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-26 {
+  transform: translateZ(936px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-27 {
+  transform: translateZ(936px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-28 {
+  transform: translateZ(936px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-29 {
+  transform: translateZ(936px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-30 {
+  transform: translateZ(936px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-31 {
+  transform: translateZ(936px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-32 {
+  transform: translateZ(936px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-33 {
+  transform: translateZ(936px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-34 {
+  transform: translateZ(936px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-35 {
+  transform: translateZ(936px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-36 {
+  transform: translateZ(936px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-37 {
+  transform: translateZ(936px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-38 {
+  transform: translateZ(936px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-39 {
+  transform: translateZ(936px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-37.y-40 {
+  transform: translateZ(936px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-0 {
+  transform: translateZ(962px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-1 {
+  transform: translateZ(962px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-2 {
+  transform: translateZ(962px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-3 {
+  transform: translateZ(962px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-4 {
+  transform: translateZ(962px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-5 {
+  transform: translateZ(962px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-6 {
+  transform: translateZ(962px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-7 {
+  transform: translateZ(962px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-8 {
+  transform: translateZ(962px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-9 {
+  transform: translateZ(962px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-10 {
+  transform: translateZ(962px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-11 {
+  transform: translateZ(962px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-12 {
+  transform: translateZ(962px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-13 {
+  transform: translateZ(962px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-14 {
+  transform: translateZ(962px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-15 {
+  transform: translateZ(962px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-16 {
+  transform: translateZ(962px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-17 {
+  transform: translateZ(962px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-18 {
+  transform: translateZ(962px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-19 {
+  transform: translateZ(962px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-20 {
+  transform: translateZ(962px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-21 {
+  transform: translateZ(962px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-22 {
+  transform: translateZ(962px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-23 {
+  transform: translateZ(962px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-24 {
+  transform: translateZ(962px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-25 {
+  transform: translateZ(962px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-26 {
+  transform: translateZ(962px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-27 {
+  transform: translateZ(962px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-28 {
+  transform: translateZ(962px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-29 {
+  transform: translateZ(962px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-30 {
+  transform: translateZ(962px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-31 {
+  transform: translateZ(962px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-32 {
+  transform: translateZ(962px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-33 {
+  transform: translateZ(962px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-34 {
+  transform: translateZ(962px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-35 {
+  transform: translateZ(962px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-36 {
+  transform: translateZ(962px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-37 {
+  transform: translateZ(962px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-38 {
+  transform: translateZ(962px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-39 {
+  transform: translateZ(962px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-38.y-40 {
+  transform: translateZ(962px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-0 {
+  transform: translateZ(988px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-1 {
+  transform: translateZ(988px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-2 {
+  transform: translateZ(988px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-3 {
+  transform: translateZ(988px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-4 {
+  transform: translateZ(988px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-5 {
+  transform: translateZ(988px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-6 {
+  transform: translateZ(988px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-7 {
+  transform: translateZ(988px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-8 {
+  transform: translateZ(988px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-9 {
+  transform: translateZ(988px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-10 {
+  transform: translateZ(988px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-11 {
+  transform: translateZ(988px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-12 {
+  transform: translateZ(988px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-13 {
+  transform: translateZ(988px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-14 {
+  transform: translateZ(988px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-15 {
+  transform: translateZ(988px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-16 {
+  transform: translateZ(988px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-17 {
+  transform: translateZ(988px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-18 {
+  transform: translateZ(988px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-19 {
+  transform: translateZ(988px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-20 {
+  transform: translateZ(988px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-21 {
+  transform: translateZ(988px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-22 {
+  transform: translateZ(988px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-23 {
+  transform: translateZ(988px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-24 {
+  transform: translateZ(988px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-25 {
+  transform: translateZ(988px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-26 {
+  transform: translateZ(988px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-27 {
+  transform: translateZ(988px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-28 {
+  transform: translateZ(988px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-29 {
+  transform: translateZ(988px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-30 {
+  transform: translateZ(988px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-31 {
+  transform: translateZ(988px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-32 {
+  transform: translateZ(988px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-33 {
+  transform: translateZ(988px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-34 {
+  transform: translateZ(988px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-35 {
+  transform: translateZ(988px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-36 {
+  transform: translateZ(988px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-37 {
+  transform: translateZ(988px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-38 {
+  transform: translateZ(988px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-39 {
+  transform: translateZ(988px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-39.y-40 {
+  transform: translateZ(988px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-0 {
+  transform: translateZ(1014px) translateY(-26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-1 {
+  transform: translateZ(1014px) translateY(0px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-2 {
+  transform: translateZ(1014px) translateY(26px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-3 {
+  transform: translateZ(1014px) translateY(52px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-4 {
+  transform: translateZ(1014px) translateY(78px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-5 {
+  transform: translateZ(1014px) translateY(104px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-6 {
+  transform: translateZ(1014px) translateY(130px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-7 {
+  transform: translateZ(1014px) translateY(156px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-8 {
+  transform: translateZ(1014px) translateY(182px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-9 {
+  transform: translateZ(1014px) translateY(208px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-10 {
+  transform: translateZ(1014px) translateY(234px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-11 {
+  transform: translateZ(1014px) translateY(260px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-12 {
+  transform: translateZ(1014px) translateY(286px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-13 {
+  transform: translateZ(1014px) translateY(312px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-14 {
+  transform: translateZ(1014px) translateY(338px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-15 {
+  transform: translateZ(1014px) translateY(364px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-16 {
+  transform: translateZ(1014px) translateY(390px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-17 {
+  transform: translateZ(1014px) translateY(416px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-18 {
+  transform: translateZ(1014px) translateY(442px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-19 {
+  transform: translateZ(1014px) translateY(468px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-20 {
+  transform: translateZ(1014px) translateY(494px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-21 {
+  transform: translateZ(1014px) translateY(520px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-22 {
+  transform: translateZ(1014px) translateY(546px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-23 {
+  transform: translateZ(1014px) translateY(572px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-24 {
+  transform: translateZ(1014px) translateY(598px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-25 {
+  transform: translateZ(1014px) translateY(624px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-26 {
+  transform: translateZ(1014px) translateY(650px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-27 {
+  transform: translateZ(1014px) translateY(676px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-28 {
+  transform: translateZ(1014px) translateY(702px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-29 {
+  transform: translateZ(1014px) translateY(728px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-30 {
+  transform: translateZ(1014px) translateY(754px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-31 {
+  transform: translateZ(1014px) translateY(780px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-32 {
+  transform: translateZ(1014px) translateY(806px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-33 {
+  transform: translateZ(1014px) translateY(832px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-34 {
+  transform: translateZ(1014px) translateY(858px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-35 {
+  transform: translateZ(1014px) translateY(884px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-36 {
+  transform: translateZ(1014px) translateY(910px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-37 {
+  transform: translateZ(1014px) translateY(936px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-38 {
+  transform: translateZ(1014px) translateY(962px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-39 {
+  transform: translateZ(1014px) translateY(988px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .x-40.y-40 {
+  transform: translateZ(1014px) translateY(1014px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-1 {
+  transform: translateX(23px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-1 {
+  transform: translateX(-11.5px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-2 {
+  transform: translateX(46px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-2 {
+  transform: translateX(-23px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-3 {
+  transform: translateX(69px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-3 {
+  transform: translateX(-34.5px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-4 {
+  transform: translateX(92px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-4 {
+  transform: translateX(-46px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-5 {
+  transform: translateX(115px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-5 {
+  transform: translateX(-57.5px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-6 {
+  transform: translateX(138px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-6 {
+  transform: translateX(-69px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-7 {
+  transform: translateX(161px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-7 {
+  transform: translateX(-80.5px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-8 {
+  transform: translateX(184px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-8 {
+  transform: translateX(-92px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-9 {
+  transform: translateX(207px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-9 {
+  transform: translateX(-103.5px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-10 {
+  transform: translateX(230px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-10 {
+  transform: translateX(-115px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-11 {
+  transform: translateX(253px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-11 {
+  transform: translateX(-126.5px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-12 {
+  transform: translateX(276px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-12 {
+  transform: translateX(-138px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-13 {
+  transform: translateX(299px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-13 {
+  transform: translateX(-149.5px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-14 {
+  transform: translateX(322px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-14 {
+  transform: translateX(-161px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .d-15 {
+  transform: translateX(345px);
+}
+body .p3d_main__editor .editor_right__preview .p_inner .model .g-15 {
+  transform: translateX(-172.5px);
+}
+body .p3d_main__editor .editor_left {
+  width: 65%;
+  float: left;
+}
+body .p3d_main__editor .editor_left__header {
+  width: 634px;
+  transition: all 0.3s 0s;
+  float: right;
+  position: relative;
+  left: 0;
+}
+body .p3d_main__editor .editor_left__header.export {
+  left: -196px;
+  z-index: 2;
+}
+body .p3d_main__editor .editor_left__header .e_buttons {
+  float: right;
+  position: relative;
+  display: block;
+}
+body .p3d_main__editor .editor_left__header .e_buttons.hide .button {
+  opacity: 0;
+  transform: translateY(0px);
+}
+body .p3d_main__editor .editor_left__header .e_buttons.hide .button:nth-of-type(1) {
+  transition: transform 0.3s 0s, opacity 0.2s 0s;
+  transform: translateY(-30px);
+}
+body .p3d_main__editor .editor_left__header .e_buttons.hide .button:nth-of-type(2) {
+  transition: transform 0.3s 0.0333333333s, opacity 0.2s 0.0333333333s;
+  transform: translateY(-30px);
+}
+body .p3d_main__editor .editor_left__header .e_buttons.hide .button:nth-of-type(3) {
+  transition: transform 0.3s 0.0666666667s, opacity 0.2s 0.0666666667s;
+  transform: translateY(-30px);
+}
+body .p3d_main__editor .editor_left__header .e_buttons.hide .button:nth-of-type(4) {
+  transition: transform 0.3s 0.1s, opacity 0.2s 0.1s;
+  transform: translateY(-30px);
+}
+body .p3d_main__editor .editor_left__header .e_buttons.hide .button:nth-of-type(5) {
+  transition: transform 0.3s 0.1333333333s, opacity 0.2s 0.1333333333s;
+  transform: translateY(-30px);
+}
+body .p3d_main__editor .editor_left__header .e_buttons .button {
+  display: inline-block;
+  width: 40px;
+}
+body .p3d_main__editor .editor_left__header .e_buttons .button img {
+  width: 20px;
+  position: relative;
+  top: 1px;
+  left: 1px;
+}
+body .p3d_main__editor .editor_left__header .e_buttons .button:nth-of-type(1) img {
+  top: 0px;
+  left: 0px;
+}
+body .p3d_main__editor .editor_left__header .e_buttons .button .tooltip {
+  left: -50px;
+}
+body .p3d_main__editor .editor_left__header .e_buttons .button:nth-of-type(1) {
+  transition: transform 0.3s 0.3s, opacity 0.2s 0.3s;
+}
+body .p3d_main__editor .editor_left__header .e_buttons .button:nth-of-type(2) {
+  transition: transform 0.3s 0.3333333333s, opacity 0.2s 0.3333333333s;
+}
+body .p3d_main__editor .editor_left__header .e_buttons .button:nth-of-type(3) {
+  transition: transform 0.3s 0.3666666667s, opacity 0.2s 0.3666666667s;
+}
+body .p3d_main__editor .editor_left__header .e_buttons .button:nth-of-type(4) {
+  transition: transform 0.3s 0.4s, opacity 0.2s 0.4s;
+}
+body .p3d_main__editor .editor_left__header .e_buttons .button:nth-of-type(5) {
+  transition: transform 0.3s 0.4333333333s, opacity 0.2s 0.4333333333s;
+}
+body .p3d_main__editor .editor_left__header .e_tabs {
+  float: left;
+}
+body .p3d_main__editor .editor_left__header .e_tabs__tab {
+  display: inline-block;
+  margin-bottom: 16px;
+  margin-right: 8px;
+  padding-left: 12px;
+  padding-right: 12px;
+  width: 64px;
+  text-align: center;
+}
+body .p3d_main__editor .editor_left__header .e_tabs__tab .tooltip {
+  left: -25px;
+}
+body .p3d_main__editor .editor_left__main .m_palette {
+  float: left;
+  width: 211px;
+  transform: translateX(0px);
+  position: relative;
+  z-index: 1;
+  transition: transform 0.3s 0.2s cubic-bezier(0.035, 1.495, 0.625, 0.89), opacity 0.2s 0.2s;
+}
+body .p3d_main__editor .editor_left__main .m_palette .cPicker {
+  position: absolute;
+  border: 3px solid white;
+  border-radius: 7px;
+  height: 24px;
+  width: 24px;
+  line-height: 30px;
+  right: 42px;
+  cursor: pointer;
+  z-index: 1;
+  text-align: center;
+  bottom: 36px;
+}
+body .p3d_main__editor .editor_left__main .m_palette .cPicker svg {
+  height: 14px;
+}
+body .p3d_main__editor .editor_left__main .m_palette .cPicker.active svg path {
+  fill: #E5513A;
+}
+body .p3d_main__editor .editor_left__main .m_palette .cPicker svg path {
+  fill: white;
+}
+body .p3d_main__editor .editor_left__main .m_palette .buttons {
+  margin: 51px 0 10px 16px;
+}
+body .p3d_main__editor .editor_left__main .m_palette .button {
+  display: inline-block;
+  margin: 5px;
+}
+body .p3d_main__editor .editor_left__main .m_palette .button .tooltip {
+  left: -50px;
+}
+body .p3d_main__editor .editor_left__main .m_palette.palette--depth .hollowTip {
+  position: absolute;
+  width: 140px;
+}
+body .p3d_main__editor .editor_left__main .m_palette.palette--depth .hollowTip .button {
+  width: 40px;
+  text-align: center;
+}
+body .p3d_main__editor .editor_left__main .m_palette.palette--depth .hollowTip p {
+  font-size: 13px;
+  color: #E5513A;
+  margin: 10px 0 0 6px;
+}
+body .p3d_main__editor .editor_left__main .m_palette.palette--depth .dpgrid,
+body .p3d_main__editor .editor_left__main .m_palette.palette--depth .hollowTip {
+  opacity: 1;
+  transform: translateY(0);
+  transition: transform 0.3s 0s cubic-bezier(0.035, 1.495, 0.625, 0.89), opacity 0.2s 0s;
+}
+body .p3d_main__editor .editor_left__main .m_palette.palette--depth .dpgrid.hide,
+body .p3d_main__editor .editor_left__main .m_palette.palette--depth .hollowTip.hide {
+  transform: translateY(20px);
+  opacity: 0;
+  pointer-events: none;
+}
+body .p3d_main__editor .editor_left__main .m_palette.palette--depth .hollowTip {
+  transition: transform 0.3s 0.2s cubic-bezier(0.035, 1.495, 0.625, 0.89), opacity 0.2s 0.2s;
+}
+body .p3d_main__editor .editor_left__main .m_palette.palette--depth .hollowTip.hide {
+  transition: transform 0s 0s cubic-bezier(0.035, 1.495, 0.625, 0.89), opacity 0s 0s;
+}
+body .p3d_main__editor .editor_left__main .m_palette.palette--depth .dp-outer {
+  width: 150px;
+  padding-left: 15px;
+  margin-top: 52px;
+}
+body .p3d_main__editor .editor_left__main .m_palette.palette--depth .dp {
+  width: 40px;
+  height: 40px;
+  margin: 5px;
+  border-radius: 10px;
+  box-shadow: 0 0 0 3px white inset;
+  text-align: center;
+  float: left;
+  position: relative;
+  cursor: pointer;
+  line-height: 42px;
+  font-weight: 700;
+  transition: all 0.2s;
+}
+body .p3d_main__editor .editor_left__main .m_palette.palette--depth .dp:not(.active):hover {
+  transform: scale(1.1);
+  color: #25273E;
+  background: white;
+}
+body .p3d_main__editor .editor_left__main .m_palette.palette--depth .dp.active {
+  color: #25273E;
+  background: white;
+}
+body .p3d_main__editor .editor_left__main .m_palette.hide {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-40px);
+  position: absolute;
+  transition: transform 0.3s 0s cubic-bezier(0.035, 1.495, 0.625, 0.89), opacity 0.2s 0s;
+}
+body .p3d_main__editor .editor_left__main .m_grid {
+  width: 634px;
+  box-shadow: 0 0 0 3px inset white;
+  border-radius: 14px;
+  overflow: hidden;
+  transition: opacity 0.3s 0.1s;
+  opacity: 1;
+  position: relative;
+}
+body .p3d_main__editor .editor_left__main .m_grid .helper-x {
+  width: 316px;
+  height: 640px;
+  border-right: 2px dashed rgba(255, 255, 255, 0.08);
+  position: absolute;
+  pointer-events: none;
+  transition: all 0.3s;
+  z-index: 1;
+}
+body .p3d_main__editor .editor_left__main .m_grid .helper-x.active {
+  border-right: 2px dashed #E5513A;
+}
+body .p3d_main__editor .editor_left__main .m_grid .helper-y {
+  width: 640px;
+  height: 316px;
+  border-bottom: 2px dashed rgba(255, 255, 255, 0.08);
+  position: absolute;
+  pointer-events: none;
+  transition: all 0.3s;
+  z-index: 1;
+}
+body .p3d_main__editor .editor_left__main .m_grid .helper-y.active {
+  border-bottom: 2px dashed #E5513A;
+}
+body .p3d_main__editor .editor_left__main .m_grid.loading {
+  width: 633px;
+  height: 633px;
+}
+body .p3d_main__editor .editor_left__main .m_grid.loading img.loader {
+  transform: translateY(-50%) scale(1);
+}
+body .p3d_main__editor .editor_left__main .m_grid img.loader {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 30px;
+  z-index: 1;
+  top: 50%;
+  transform: translateY(-50%) scale(0);
+  transition: all 0.3s 0s cubic-bezier(0.035, 1.495, 0.625, 0.89);
+}
+body .p3d_main__editor .editor_left__main .m_grid.hide {
+  opacity: 0;
+  transition: opacity 0.3s 0s;
+}
+body .p3d_main__editor .editor_left__main .m_grid__pixel {
+  box-shadow: 0 0 0 1px inset rgba(255, 255, 255, 0.1);
+  float: left;
+  position: relative;
+  cursor: pointer;
+  width: 37.2px;
+  height: 37.2px;
+}
+body .p3d_main__editor .editor_left__main .m_grid__pixel:after {
+  display: block;
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 0 0 3px #fff;
+  border-radius: 5px;
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0;
+  transition: all 0.01s;
+}
+body .p3d_main__editor .editor_left__main .m_grid__pixel:hover:after {
+  opacity: 1;
+}
+body .p3d_main__editor .editor_left__main .m_grid__pixel .p {
+  position: absolute;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+body .p3d_main__editor .editor_left__main .m_grid__pixel .d {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  top: 50%;
+  transform: translateY(-50%);
+  display: none;
+  color: black;
+  font-weight: 700;
+  font-size: 16px;
+  pointer-events: none;
+}
+body .p3d_main__editor .editor_left__main .m_grid__pixel .d.show {
+  display: block;
+}
\ No newline at end of file
diff --git a/vocsselseasily-create-3d-css-html-voxel-models/license.txt b/vocsselseasily-create-3d-css-html-voxel-models/license.txt
new file mode 100644
index 0000000..7792d33
--- /dev/null
+++ b/vocsselseasily-create-3d-css-html-voxel-models/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Jamie Coulter (https://codepen.io/jcoulterdesign/pen/vYyzZdo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/vocsselseasily-create-3d-css-html-voxel-models/src/index.haml b/vocsselseasily-create-3d-css-html-voxel-models/src/index.haml
new file mode 100644
index 0000000..df3c4a2
--- /dev/null
+++ b/vocsselseasily-create-3d-css-html-voxel-models/src/index.haml
@@ -0,0 +1,323 @@
+._audio
+.l
+.p3d{"@mousemove" => "colorPicker($event)"}
+    .p3d_colorPicker{"v-if" => "picker.active", ":style" => "`background: #${picker.color};left: ${picker.x}px; top: ${picker.y}px;`", "@click" => "picker.active = !picker.active, picker.color = '#25273E'"}
+    .p3d_loader
+        .p3d_loader__inner
+            %img{:src => 'https://assets.codepen.io/217233/p3d_logoLoading_2.svg'}
+            .b
+            .f
+    .p3d_main
+        .p3d_overlay{":class" => "{open : modalOpen}", "@click" => "closeModals()"}
+        .p3d_load.modal{":class" => "{open : modalOpen && modal == 'share'}"}
+            .p3d_load__inner.modal
+                .close{"@click" => "closeModals(), enJin.audioController.play('pop6')"}
+                    X
+                %h1{"v-if" => "submitted"} Creation shared!
+                %h1{"v-if" => "!submitted"} Share your creation
+                .wrap{"v-if" => "submitted"}
+                    %p Amazing! Thanks for being part of the community. If your VoCSSel is approved, everyone will be able to view it in the community section. I really hope you enjoyed using VoCSSels!
+                .wrap{"v-if" => "!submitted"}
+                    %p Want other people to be able to load in your VoCSSel? If approved, your VoCSSel will be added to our community section.
+                    .row
+                        .row-half
+                            %label{:for => 'name'} VoCSSel name
+                            %input#name{":value" => "exportSettings.name", "v-model" => "exportSettings.name", :type => 'text'}
+                        .row-half
+                            %label{:for => 'name'} Author name
+                            %input#name{":value" => "author", "v-model" => "author", :type => 'text'}
+                .b{"v-if" => "!submitted"}
+                    %button{"@click" => "shareModel()", ":class" => "{submitting : submitting}"} 
+                        %img.loader{:src => 'https://assets.codepen.io/217233/Dual+Ring-1s-200px.gif', :draggable => 'false'}
+                        Share it
+                    %button{"@click" => "closeModals(), enJin.audioController.play('pop6')"} No thanks
+        .p3d_load.modal.community{":class" => "{open : modalOpen && modal == 'community'}"}
+            .p3d_load__inner.modal
+                .close{"@click" => "closeModals(), enJin.audioController.play('pop6')"}
+                    X
+                %h1 Community content
+                %p Take a look at some of the incredible VoCSSels people have made
+                .s-wrap
+                    .x-wrap
+                        .p3d_load__model.empty{"v-if" => "communityContent.length == 0"}
+                            %h4 Sorry, we seem to be having a problem loading content. Please try again later
+                        .p3d_load__model{":key" => "model", "v-for" => "(model, index) in communityContent", "@click" => "load(model, true), closeModals(), enJin.audioController.play('pop6')"}
+                            .m_image{":style" => "`background: url(${model.image})`"}
+                            .m_details
+                                %p.date {{model.date}}
+                                %p.name {{model.name}}
+                                %p.author by {{model.author}}
+                                %p.voxels 
+                                    %span 
+                                        {{model.voxels}}
+                                    voxels | 
+                                    %span
+                                        {{model.vertices}}
+                                    vertices
+        .p3d_load.modal{":class" => "{open : modalOpen && modal == 'load'}"}
+            .p3d_load__inner.modal
+                .close{"@click" => "closeModals(), enJin.audioController.play('pop6')"}
+                    X
+                %h1 Load a VoCSSel
+                %p Select or manage your saved VoCSSels
+                .s-wrap
+                    .p3d_load__model.empty{"v-if" => "savedModelsMeta.length == 0"}
+                        %h4 You don't have any VoCSSels saved. Go and make one first
+                    .p3d_load__model{":key" => "model", "v-for" => "(model, index) in savedModelsMeta", "@click" => "load(index, false), closeModals(), enJin.audioController.play('pop6')"}
+                        .m_image{":style" => "`background: url(${getMetaData('image', model)})`"}
+                        .m_details
+                            %p.date {{getMetaData('date', model)}}
+                            %p.name {{getMetaData('name', model)}} 
+                            %p.author by {{getMetaData('author', model)}} 
+                            %p.voxels 
+                                %span 
+                                    {{getMetaData('voxels', model)}} 
+                                voxels | 
+                                %span
+                                    {{getMetaData('vertices', model)}} 
+                                vertices
+                            .delete{"@click" => "deleteModel(index), enJin.audioController.play('pop5')"} Delete
+            
+        .p3d_main__header
+            .header_left
+                %img{:src => 'https://assets.codepen.io/217233/p3d_logo_new.svg', :draggable => 'false'}
+            .header_right
+                .name
+                    %input{":value" => "exportSettings.name", "v-model" => "exportSettings.name"}
+                .buttons
+                    .save.button{"@click" => "newModel(), enJin.audioController.play('pop6')"}
+                        %img{:src => 'https://assets.codepen.io/217233/p3d_load_1.svg', :draggable => 'false', ":class" => "{saving : saving}"}
+                            .tooltip
+                                New
+                    .save.button{"@click" => "save(), enJin.audioController.play('pop6')"}
+                        %img.icon{:src => 'https://assets.codepen.io/217233/p3d_save_1.svg', :draggable => 'false', ":class" => "{saving : saving}"}
+                        %img.loader{:src => 'https://assets.codepen.io/217233/Dual+Ring-1s-200px.gif', :draggable => 'false', ":class" => "{saving : saving}"}
+                            .tooltip
+                                Save
+                    .load.button{"@click" => "openModal('load'), enJin.audioController.play('pop6')"}
+                        %img{:src => 'https://assets.codepen.io/217233/p3d_new.svg', :draggable => 'false'}
+                            .tooltip
+                                Load
+                    .community.button{"@click" => "openModal('community'), enJin.audioController.play('pop6')"}
+                        Community
+                .options
+                    .button{"@click" => "toggleAudio()", ":class" => "{active : muted}"}
+                        %img.icon{:src => 'https://assets.codepen.io/217233/p3d_mute.svg', :draggable => 'false'}
+                            .tooltip
+                                Audio
+                    .button{"@click" => "toggleMotion()", ":class" => "{active : !motion}"}
+                        %img{:src => 'https://assets.codepen.io/217233/p3d_nomotion.svg', :draggable => 'false'}
+                            .tooltip
+                                Motion
+        .p3d_main__editor
+            .editor_left
+                .editor_left__header{":class" => "{export : mode == 'export'}"}
+                    .e_buttons{":class" => "{hide : mode != 'drawing'}"}
+                        .button{":class" => "{active : symMode == ''}", "@click" => "symMode = ''"}
+                            %img{:src => 'https://assets.codepen.io/217233/p3d_sym_none_1.svg', :draggable => 'false'}
+                            .tooltip
+                                No Symmetry
+                        .button{":class" => "{active : symMode == 'x'}", "@click" => "symMode = 'x'"}
+                            %img{:src => 'https://assets.codepen.io/217233/p3d_sym_x_1.svg', :draggable => 'false'}
+                            .tooltip
+                                X Symmetry
+                        .button{":class" => "{active : symMode == 'y'}", "@click" => "symMode = 'y'"}
+                            %img{:src => 'https://assets.codepen.io/217233/p3d_sym_y_1.svg', :draggable => 'false'}
+                            .tooltip
+                                Y Symmetry
+                        .button{":class" => "{active : symMode == 'xy'}", "@click" => "symMode = 'xy'"}
+                            %img{:src => 'https://assets.codepen.io/217233/p3d_sym_xy_1.svg', :draggable => 'false'}
+                            .tooltip
+                                XY Symmetry
+                    .e_tabs
+                        .e_tabs__tab.button{"@click" => "swapMode('drawing'), drawMode = 'draw', exportSettings.scale = 0.8, updateOrientation(0, 90, 0, false)", ":class" => "{active : mode == 'drawing'}"}
+                            Draw
+                            .tooltip
+                                Draw pixel art
+                        .e_tabs__tab.button{"@click" => "swapMode('extrude'), drawMode = 'extrude', exportSettings.scale = 0.8, updateOrientation(-30, 140, 0, false)", ":class" => "{active : mode == 'extrude'}"}
+                            Extrude
+                            .tooltip
+                                Give depth
+                        .e_tabs__tab.button{"@click" => "swapMode('paint'), drawMode = 'draw', exportSettings.scale = 0.8, updateOrientation(0, 90, 0, false), orientationButton = 'front'", ":class" => "{active : mode == 'paint'}"}
+                            Paint
+                            .tooltip
+                                Paint voxels
+                        .e_tabs__tab.button{"@click" => "swapMode('export'), updateOrientation(0, 90, 0, true)", ":class" => "{active : mode == 'export'}"}
+                            Export
+                            .tooltip
+                                Export for web
+                    .e_sym
+                .editor_left__main{"@mouseleave" => "picker.active = false"}
+                    .m_palette{":class" => "{hide : mode == 'extrude'}"}
+                        .buttons
+                            .button.draw{"@click" => "drawMode = 'draw', enJin.audioController.play('pop6')", ":class" => "{active : drawMode == 'draw'}"}
+                                %img{:src => 'https://assets.codepen.io/217233/p3d_pencil.svg', :draggable => 'false'}
+                                .tooltip
+                                    Draw
+                            .button.erase{"v-if" => "mode != 'paint'", "@click" => "picker.active = false, drawMode = 'erase', enJin.audioController.play('pop6')", ":class" => "{active : drawMode == 'erase'}"}
+                                %img{:src => 'https://assets.codepen.io/217233/p3d_eraser_2.svg', :draggable => 'false'}
+                                .tooltip
+                                    Erase
+                        
+                        .cPicker{"@click" => "picker.active = !picker.active", ":class" => "{active : picker.active}"}
+                            %svg{:fill => "none", :height => "18", :viewbox => "0 0 18 18", :width => "18", :xmlns => "http://www.w3.org/2000/svg"}
+                                %path{:d => "M16.3 0.75C15.3 -0.25 13.7 -0.25 12.7 0.75L10.9 2.55L10.2 1.85C9.8 1.45 9.2 1.45 8.8 1.85L8 2.55C7.6 2.95 7.6 3.55 8 3.95L13 8.95C13.4 9.35 14 9.35 14.4 8.95L15.1 8.25C15.5 7.85 15.5 7.25 15.1 6.85L14.5 6.15L16.3 4.35C17.3 3.35 17.3 1.75 16.3 0.75V0.75ZM2.9 10.55C0.7 12.75 2 13.75 0 16.35L0.7 17.05C3.3 15.05 4.3 16.35 6.5 14.15L11.6 9.05L8 5.45L2.9 10.55Z", :fill => "black"}
+                        #colorPicker             
+                    .m_palette.palette--depth{":class" => "{hide : mode != 'extrude'}"}
+                        .buttons
+                            .button.erase{"@click" => "drawMode = 'extrude', enJin.audioController.play('pop6')", ":class" => "{active : drawMode == 'extrude'}"}
+                                %img{:src => 'https://assets.codepen.io/217233/p3d_extrude.svg?x=ghfh', :draggable => 'false'}
+                                .tooltip
+                                    Extrude 
+                            .button.erase{"@click" => "drawMode = 'hollow', enJin.audioController.play('pop6')", ":class" => "{active : drawMode == 'hollow'}"}
+                                %img{:src => 'https://assets.codepen.io/217233/p3d_hollow.svg?x=ghfh', :draggable => 'false', :draggable => 'false'}
+                                .tooltip
+                                    Shell 
+                        .dp-outer
+                            .hollowTip{":class" => "{hide : drawMode == 'extrude'}"}
+                                .help
+                                    Shell a group
+                                    %img.icon{:src => 'https://assets.codepen.io/217233/p3d_help.svg', :draggable => 'false'}
+                                    .gif
+                                        .desc
+                                            %h4 Shell tool
+                                            Use the shell toggle to remove the voxels between the first and last in the row. Handy for optimising your model and removing voxels that cannot be seen. Also great for creating legs.
+                                        %img{:src => 'https://assets.codepen.io/217233/shell.gif', :draggable => 'false'}
+                                .button{"@click" => "shell = true, enJin.audioController.play('pop6')", ":class" => "{active : shell}"}
+                                    On
+                                .button{"@click" => "shell = false, enJin.audioController.play('pop6')", ":class" => "{active : !shell}"}
+                                    Off
+                            .dpgrid{":class" => "{hide : drawMode == 'hollow'}"}
+                                .help
+                                    Select a depth
+                                    %img.icon{:src => 'https://assets.codepen.io/217233/p3d_help.svg', :draggable => 'false'}
+                                    .gif
+                                        .desc
+                                            %h4 Extrude tool
+                                            Select a level of depth, then click on any pixel to extrude by that amount. New voxels will be created along the z axis which can be individually painted.
+                                        %img{:src => 'https://assets.codepen.io/217233/depth.gif', :draggable => 'false'}
+                                -(1..9).each do | index |
+                                    .dp{':data-depth' => index, "@click" => "setDepth($event), enJin.audioController.play('pop6')", ":class" => "{active : currentDepth == #{index}}"} #{index}
+                    .m_grid{"@mousedown" => "drawing = true", "@mouseup" => "drawing = false", "@mouseup.right" => "handleRightClick()", "@mouseleave" => "drawing = false", ":class" => "{hide : mode == 'paint', loading : loading}"}
+                        .helper-x{":class" => "{active : symMode == 'x' || symMode == 'xy'}"}
+                        .helper-y{":class" => "{active : symMode == 'y' || symMode == 'xy'}"}
+                        %img.loader{:src => 'https://assets.codepen.io/217233/Dual+Ring-1s-200px.gif', :draggable => 'false', ":class" => "{saving : saving}"}
+                        .m_grid__pixel{":data-index" => "index", ":data-y" => "Math.floor(`${index / canvasSize + 1}`)", ":data-x" => "Math.ceil(`${index % canvasSize}`)", "@click" => "selectColor()", "@mouseenter" => "drawPixel($event)", "@mousedown" => "drawPixel($event)", "@contextmenu.prevent" => '', ":key" => "voxel.x", "v-for" => "(voxel, index) in voxels", ":style" => ""}
+                            .p{"v-if" => "voxel.c", ":style" => "`background: #${voxel.c[0][1]}`"}
+                            .d{":class" => "{show : mode == 'extrude' && drawMode == 'extrude'}"}{{voxel.d}}
+                            .d{":class" => "{show : mode == 'extrude' && drawMode == 'hollow' && voxel.h}"} S
+                            
+            .editor_right
+                .editor_right__export{":class" => "{show : mode == 'export'}"}
+                    %h3 Export settings
+                    %p.sub Export your VoCSSel for web, or as a png based on the current view
+                    .form
+                    .row
+                        .row-half
+                            %label{:for => 'name'} VoCSSel name
+                            %input#name{":value" => "exportSettings.name", "v-model" => "exportSettings.name", :type => 'text'}
+                        .row-half
+                            %label{:for => 'name'} Author name
+                            %input#name{":value" => "author", "v-model" => "author", :type => 'text'}
+                        .save.button{"@click" => "save(), enJin.audioController.play('pop6')"}
+                            %img.icon{:src => 'https://assets.codepen.io/217233/p3d_save_1.svg', :draggable => 'false', ":class" => "{saving : saving}"}
+                            %img.loader{:src => 'https://assets.codepen.io/217233/Dual+Ring-1s-200px.gif', :draggable => 'false', ":class" => "{saving : saving}"}
+                                .tooltip
+                                    Save
+                    %br
+                    .row
+                        %label{:for => 'exportBg'} Background color
+                        %input#exportBg
+                        %img{:src => 'https://assets.codepen.io/217233/p3d_resetColour.svg', :draggable => 'false', "@click" => "resetBgColor()"}
+                    .row
+                        %label{:for => 'perspective'} 
+                            Perspective: 
+                            %span {{exportSettings.perspective}}px
+                        %input#perspective{":value" => "exportSettings.perspective", :min => 100, :max => 3000, :type => 'range', "v-model" => "exportSettings.perspective"}
+                    .row
+                        %label{:for => 'animate'} 
+                            Animate 
+                            %span 
+                                %span Turn off for viewport control
+                        %input#animate{":value" => "exportSettings.animate", :type => 'checkbox', "v-model" => "exportSettings.animate"}
+                    .row{"v-if" => "exportSettings.animate"}
+                        %label{:for => 'speed'} 
+                            Speed: 
+                            %span {{exportSettings.spinSpeed}}s
+                        %input#speed{":value" => "exportSettings.spinSpeed", :type => 'range', :min => 0.1, :max => 20, :step => 0.1, "v-model" => "exportSettings.spinSpeed"}
+                    .row{"v-if" => "!exportSettings.animate"}
+                        .row-half
+                            %label{:for => 'rotateX'} 
+                                Rotate X: 
+                                %span {{exportSettings.x}}deg
+                            %input#rotateX{":value" => "exportSettings.x", :type => 'range', :min => -180, :max => 180, :step => 10, "v-model" => "exportSettings.x"}
+                        .row-half
+                            %label{:for => 'rotateY'} 
+                                Rotate Y: 
+                                %span {{exportSettings.y}}deg
+                            %input#rotateY{":value" => "exportSettings.y", :type => 'range', :min => -180, :max => 180, :step => 10, "v-model" => "exportSettings.y"}
+
+                    .row{"v-if" => "!exportSettings.animate"}
+                        .row-half
+                            %label{:for => 'rotateZ'} 
+                                Rotate Z: 
+                                %span {{exportSettings.z}}deg
+                            %input#rotateZ{":value" => "exportSettings.z", :type => 'range', :min => -180, :max => 180, :step => 10, "v-model" => "exportSettings.z"}
+                        .row-half
+                            %label{:for => 'scale'} 
+                                Scale: 
+                                %span {{exportSettings.scale}}
+                            %input#scale{":value" => "exportSettings.scale", :type => 'range', :min => 0.01, :max => 3, :step => 0.01, "v-model" => "exportSettings.scale"}
+                    .buttons
+                        %button{"@click" => "openModal('share'), enJin.audioController.play('pop6')"} Share with community
+                        %button.cp{"@click" => "processForExport()", ":class" => "{exporting : exporting}"}
+                            %img.loader{:src => 'https://assets.codepen.io/217233/Dual+Ring-1s-200px.gif', :draggable => 'false', ":class" => "{saving : saving}"}
+                            Export to CodePen
+                %p{":class" => "{hide : mode == 'export' || mode == 'paint'}"} HTML / CSS Output
+                %img{:src => 'https://assets.codepen.io/217233/p3d_resetColour.svg', :draggable => 'false', "@click" => "resetBgColor()", ":class" => "{hide : mode == 'export'}"}
+                %input#colorBg{":class" => "{hide : mode == 'export'}"}
+                .editor_right__preview{":class" => "{export : mode == 'export', paint : mode == 'paint'}"}
+                    .p_inner#model{":style" => "`background: ${exportSettings.bgColor};`"}
+                        .button.zooms.first{"@click" => "handleZoom(0.05), enJin.audioController.play('pop6')", ":class" => "{hide : mode == 'export'}"}
+                            %img{:src => 'https://assets.codepen.io/217233/p3d_zoomIn.svg', :draggable => 'false'}
+                        .button.zooms{"@click" => "handleZoom(-0.05), enJin.audioController.play('pop6')", ":class" => "{hide : mode == 'export'}"}
+                            %img{:src => 'https://assets.codepen.io/217233/p3d_zoomOut.svg', :draggable => 'false'}
+                        .button.zooms{"@click" => "zoomLevel = .8, enJin.audioController.play('pop6')", ":class" => "{hide : mode == 'export'}"}
+                            %img{:src => 'https://assets.codepen.io/217233/p3d_resetZoom.svg', :draggable => 'false'}
+                        .views{":class" => "{show : mode == 'paint'}"}
+                            .button{"@click" => "updateOrientation(0, 90, 0, false), orientationButton = 'front'", ":class" => "{active : orientationButton == 'front'}"} Front
+                            .button{"@click" => "updateOrientation(0, -90, 0, false), orientationButton = 'back'", ":class" => "{active : orientationButton == 'back'}"} Back
+                            .button{"@click" => "updateOrientation(0, 180, 0, false), orientationButton = 'left'", ":class" => "{active : orientationButton == 'left'}"} Left
+                            .button{"@click" => "updateOrientation(0, 0, 0, false), orientationButton = 'right'", ":class" => "{active : orientationButton == 'right'}"} Right
+                            .button{"@click" => "updateOrientation(-90, 0, 0, false), orientationButton = 'top'", ":class" => "{active : orientationButton == 'top'}"} Top
+                            .button{"@click" => "updateOrientation(90, 0, 0, false), orientationButton = 'bottom'", ":class" => "{active : orientationButton == 'bottom'}"} Bottom
+                            .button{"@click" => "updateOrientation(-30, 50, 0, false), orientationButton = 'iso1'", ":class" => "{active : orientationButton == 'iso1'}"} Isometric 1
+                            .button{"@click" => "updateOrientation(-30, 140, 0, false), orientationButton = 'iso2'", ":class" => "{active : orientationButton == 'iso2'}"} Isometric 2
+                            .button{"@click" => "updateOrientation(-30, 230, 0, false), orientationButton = 'iso3'", ":class" => "{active : orientationButton == 'iso3'}"} Isometric 3
+                            .button{"@click" => "updateOrientation(-30, 310, 0, false), orientationButton = 'iso4'", ":class" => "{active : orientationButton == 'iso4'}"} Isometric 4
+                        .zoom{"@wheel" => "zoom($event)", ":style" => "`transform: scale(${zoomLevel})`"}
+                            .exportWrap
+                                .model{"v-if" => "voxels", ":class" => "{extrude : mode == 'extrude', spin : mode == 'export' && exportSettings.animate, export : mode == 'export', paint : mode == 'paint'}", ":style" => "`transform: scale(${exportSettings.scale}) rotateZ(${exportSettings.z}deg) rotateX(${exportSettings.x}deg) rotateY(${exportSettings.y}deg); animation-duration: ${exportSettings.spinSpeed}s`"}
+                                    .voxel-group{"v-if" => "voxelGroup.length != 0", ":key" => "voxelGroup.x", "v-for" => "(voxelGroup, index) in voxels", "stagger" => "50", ":class" => "`g-${voxelGroup.d}`", ":data-index" => "`${voxelGroup.index}`"}
+                                        .voxel{"v-if" => "voxelGroup.c", ":key" => "index", "v-for" => "(voxel, index) in voxelGroup.d", ":class" => "`d-${index}`"}
+                                            .v{"v-if" => "voxelGroup.c[index] != ''", ":class" => "`x-${voxelGroup.x} y-${voxelGroup.y}`", ":data-index" => "`${index}`"}
+                                                .f.f--f{"v-if" => "voxelGroup?.c?.[index]?.[0]", ":data-vertex"  => "0" ,":style" => "[voxelGroup.c ? { background: `#${voxelGroup.c[index][0]}` } : null]", ":class" => "{paintable : mode == 'paint'}", "@click" => "paint($event)"}
+                                                .f.f--ba{"v-if" => "voxelGroup?.c?.[index]?.[0]", ":data-vertex" => "1" ,":style" => "[voxelGroup.c ? { background: `#${voxelGroup.c[index][1]}` } : null]", ":class" => "{paintable : mode == 'paint'}", "@click" => "paint($event)"}
+                                                .f.f--t{"v-if" => "voxelGroup?.c?.[index]?.[0]", ":data-vertex"  => "2" ,":style" => "[voxelGroup.c ? { background: `#${voxelGroup.c[index][2]}` } : null]", ":class" => "{paintable : mode == 'paint'}", "@click" => "paint($event)"}
+                                                .f.f--b{"v-if" => "voxelGroup?.c?.[index]?.[0]", ":data-vertex"  => "3" ,":style" => "[voxelGroup.c ? { background: `#${voxelGroup.c[index][3]}` } : null]", ":class" => "{paintable : mode == 'paint'}", "@click" => "paint($event)"}
+                                                .f.f--l{"v-if" => "voxelGroup?.c?.[index]?.[0]", ":data-vertex"  => "4" ,":style" => "[voxelGroup.c ? { background: `#${voxelGroup.c[index][4]}` } : null]", ":class" => "{paintable : mode == 'paint'}", "@click" => "paint($event)"}
+                                                .f.f--r{"v-if" => "voxelGroup?.c?.[index]?.[0]", ":data-vertex"  => "5" ,":style" => "[voxelGroup.c ? { background: `#${voxelGroup.c[index][5]}` } : null]", ":class" => "{paintable : mode == 'paint'}", "@click" => "paint($event)"}
+                %p.voxelCount{":class" => "{hide : mode == 'export' || mode == 'paint'}"} 
+                    %span 
+                        {{getVoxelsCount()}} 
+                    Voxels | 
+                    %span
+                        {{getVerticesCount() - 1}} 
+                    Vertices
+                    %span.block{":class" => "{show : getVerticesCount() > 750}"}
+                        %img.icon{:src => 'https://assets.codepen.io/217233/p3d_warning.svg', :draggable => 'false'}
+                        Performance will decrease as the vertices count increases. Make sure to shell out any unused voxels for maximum performance.
+        .p3d_main_footer
+            %p 
+                Made with love by 
+                %a{:href => 'https://www.codepen.io/jcoulterdesign', :target => "_blank"} Jamie Coulter
\ No newline at end of file
diff --git a/vocsselseasily-create-3d-css-html-voxel-models/src/script.js b/vocsselseasily-create-3d-css-html-voxel-models/src/script.js
new file mode 100644
index 0000000..23386f2
--- /dev/null
+++ b/vocsselseasily-create-3d-css-html-voxel-models/src/script.js
@@ -0,0 +1,1105 @@
+/*
+    Dependencies
+    https://codepen.io/jcoulterdesign/pen/1e3ed378fed68f1a43bc4f73f9964945
+    https://codepen.io/jcoulterdesign/pen/6c44bfdc74442457826e062bc719c586
+    https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
+    https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js
+    https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.js
+    https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js
+*/
+
+// Master audio array. This is for audio that will not be manipulated by any HTML5 filters.
+// For audio needing low, high pass effects, add them to the _specialAudio array.
+const _masterAudio = [
+    {
+        'name'   : 'pop1',
+        'source' : 'https://assets.codepen.io/217233/p3d_pop1_t.mp3',
+        'stackSize' : 15
+    },
+    {
+        'name'   : 'pop2',
+        'source' : 'https://assets.codepen.io/217233/p3d_pop2_t.mp3',
+        'stackSize' : 15
+    },
+    {
+        'name'   : 'pop3',
+        'source' : 'https://assets.codepen.io/217233/p3d_pop3_t.mp3',
+        'stackSize' : 3
+    },
+    {
+        'name'   : 'pop4',
+        'source' : 'https://assets.codepen.io/217233/p3d_pop4_t.mp3',
+    },
+
+    {
+        'name'   : 'pop5',
+        'source' : 'https://assets.codepen.io/217233/p3d_pop5_t.mp3',
+    },
+
+    {
+        'name'   : 'pop6',
+        'source' : 'https://assets.codepen.io/217233/p3d_pop7.mp3',
+    },
+    {
+        'name'   : 'save',
+        'source' : 'https://assets.codepen.io/217233/p3d_save.wav',
+    }
+];
+
+// Create new instance of EnJin (normally used in my browser games, but using the audio module for it)
+const enJin = new Enjin();
+
+// Create audio controller
+enJin.createAudioController(_masterAudio);
+
+// Voxel
+// Class containing all our volxel data including its position and vertex information
+// This technically represents a voxel group as well, as vue renders out a voxel for each entry in the colors array
+class Voxel {
+    constructor(x, y, depth, color, index) {
+        this.x = x;
+        this.y = y;
+        this.d = depth;
+        this.h = false;
+        this.c = [ // Color array for each side of the voxel
+            {
+                0: lightenDarkenColor(color, 0),
+                1: lightenDarkenColor(color, -5),
+                2: lightenDarkenColor(color, -10),
+                3: lightenDarkenColor(color, -15),
+                4: lightenDarkenColor(color, -20),
+                5: lightenDarkenColor(color, -25)
+            }
+        ]
+        this.index = index;
+    }
+}
+
+// Lighten darken any hex color by amt
+function lightenDarkenColor(col, amt) {
+    col = col.replace(/^#/, '')
+    if (col.length === 3) col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2]
+    let [r, g, b] = col.match(/.{2}/g);
+    ([r, g, b] = [parseInt(r, 16) + amt, parseInt(g, 16) + amt, parseInt(b, 16) + amt])
+    r = Math.max(Math.min(255, r), 0).toString(16)
+    g = Math.max(Math.min(255, g), 0).toString(16)
+    b = Math.max(Math.min(255, b), 0).toString(16)
+    const rr = (r.length < 2 ? '0' : '') + r
+    const gg = (g.length < 2 ? '0' : '') + g
+    const bb = (b.length < 2 ? '0' : '') + b
+
+    return `${rr}${gg}${bb}`
+}
+
+// Rot13 function. Not critical to ser but used as a way of tracking what has been made with the tool
+// If I added a unique string to this CodePen, which then passes it on to the exported pen, I could use the search to find all the models exported with this tool. The
+// issue ofcourse is that the string would also exist on this pen, and so i would be supplied with all the forks. Doing it with a simple rot13 means the string will
+// appear only on the exported pen.
+function rot13(str) {
+    var input     = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+    var output    = 'NOPQRSTUVWXYZABCDEFGHIJKLMnopqrstuvwxyzabcdefghijklm';
+    var index     = x => input.indexOf(x);
+    var translate = x => index(x) > -1 ? output[index(x)] : x;
+    return str.split('').map(translate).join('');
+}
+
+// Vue app
+new Vue({
+    el: '.p3d',
+
+    data() {
+        return {
+            gridElement       : '.m_grid',
+            voxelElement      : '.m_grid__pixel',
+            canvasSize        : 17, // In voxel units
+            voxels            : [],
+            currentColor      : 'fff',
+            currentDepth      : 1,
+            mode              : 'drawing',
+            drawMode          : 'draw',
+            drawing           : false,
+            author            : 'VoCSSels',
+            zoomLevel         : .8, // Initial zoom level of our models preview
+            maxZoom           : 3, // The maximum you can zoom in 
+            minZoom           : .3, // The maximum you can zoom out
+            orientation       : '',
+            orientationButton : 'front',
+            savedModels       : '',
+            savedModelsMeta   : '',
+            loading           : false,
+            saving            : false,
+            shell             : true,
+            exporting         : false,
+            motion            : true,
+            muted             : false,
+            exportSettings: {
+                'name'        : 'My VoCSSel model',
+                'perspective' : 3000,
+                'bgColor'     : '#25273E',
+                'scale'       : 1,
+                'uid'         : 'madewithvocssels',
+                'spinSpeed'   : 10,
+                'animate'     : true,
+                'x'           : 0,
+                'y'           : 90,
+                'z'           : 0
+            },
+            metaPrefix        : 'p3d_metadata_',
+            modelPrefix       : 'p3d_modeldata_',
+            modal             : '',
+            modalOpen         : false,
+            symMode           : '',
+            picker: {
+                'x'      : 0,
+                'y'      : 0,
+                'active' : false,
+                'color'  : 'ffffff'
+            },
+            submitting       : false,
+            submitted        : false,
+            communityContent : []
+        }
+    },
+
+    methods: {
+        // Main draw function. Name is deceiving. Handles all interaction with pixels such as colour depth and shell
+        // debounced
+        drawPixel: _.debounce(function(event) {
+
+            event.stopPropagation();
+
+            let target = event.target;
+            let data = $(target).data(); // Get pixel data
+            let x = data.x; // Get pixel column
+            let y = data.y; // Get pixel row
+            let index = data.index; // Get index of pixel
+
+            if(event.which == 3 && this.mode == "drawing") {
+                this.drawMode = 'erase'
+            }
+
+            var v = _.get(this.voxels[index], 'c[0][0]', 'undefined');
+
+            if(v != 'undefined') {
+                this.picker.color = this.voxels[index].c[0][0]
+            }
+
+            // Fire when in drawing mode and not picking a colour
+            if(this.mode == 'drawing' && this.drawing && !this.picker.active) {
+
+                // Set colorpicker to current color
+                $("#colorPicker").spectrum("set", this.currentColor);
+
+                // Create a new voxel instance
+                if(this.drawMode == 'draw') {
+
+                    // If the user is currently in draw mode using draw
+                    var v = _.isEmpty(this.voxels[index].c);
+                    if(v) {
+                        // If no voxel, make one and store in array
+                        var voxel = new Voxel(x, y, 1, this.currentColor, index);   
+
+                        // Vue set to keep reactive
+                        Vue.set(this.voxels, index, voxel);
+
+                        // Play audio
+                        enJin.audioController.play('pop1');
+                    } else {
+
+                        // If the pixel we clicked on already has a voxel associated with it
+                        // Firstly, set the color array to empty
+                        let v = _.get(this.voxels[index], 'c', 'undefined');
+
+                        if(v != 'undefined') {
+                            this.voxels[index].h = false
+                            _.omit(this.voxels[index], 'd')
+
+
+
+
+                            // Generate each voxel (colour group)
+                            this.generateColors(index);
+
+                            // Only play a sound if the colour is different
+
+                            enJin.audioController.play('pop1')
+                        }
+
+                    }
+                } else {
+                    // If not in draw mode, then we must be in erase mode
+                    if(this.voxels[index].c != []) { // No point deleting nothing
+                        // Set the voxel back to an empty array
+                        Vue.set(this.voxels, index, []);
+
+                        // Play audio
+                        enJin.audioController.play('pop2');
+                    }
+                }
+                // If we are not in drawing mode, then check if in extrude mode
+            } else if(this.mode == 'extrude' && this.drawing) {
+
+                // Check if extruding and not shelling
+                if(this.drawMode == 'extrude') {
+
+                    // Check to make sure the selected extrusion is not on a voxel that doesnt exist
+                    var v = _.get(this.voxels[index], 'c', 'undefined');
+
+                    if(v != 'undefined') {
+                        // Start extrude
+                        // Set the d property of the voxel to the selected depth
+                        this.voxels[index].d = this.currentDepth;
+
+                        // Reset any shell props on the voxel
+                        this.voxels[index].h = false;
+
+                        // Generate each voxel (colour group)
+                        this.generateColors(index);
+
+                        // play audio
+                        enJin.audioController.play('pop2')
+                    }
+                } else {
+                    // If not extrude, then must be hollow
+                    var v = _.get(this.voxels[index], 'c', 'undefined');
+
+                    if(v != 'undefined') {
+
+                        // If shell is on
+                        if(this.shell == true) {
+                            // Check to make sure the selected extrusion is not on a voxel that doesnt exist
+                            var v = _.get(this.voxels[index], 'c', 'undefined');
+
+                            if(v != 'undefined') {
+                                // set the voxels hollow prop to true
+                                this.voxels[index].h = true;
+
+                                // Get ctx
+                                that = this;    
+
+                                var length = this.voxels[index].c.length;
+                                let color = this.voxels[index].c[0][0];
+
+                                let shelledColors = [];
+
+                                for(let i = 0; i < length; i++) {
+                                    if(i == 0 || i == (length - 1)) {
+
+                                        var s = {
+                                            0: lightenDarkenColor(color, 0),
+                                            1: lightenDarkenColor(color, -5),
+                                            2: lightenDarkenColor(color, -10),
+                                            3: lightenDarkenColor(color, -15),
+                                            4: lightenDarkenColor(color, -20),
+                                            5: lightenDarkenColor(color, -25)
+                                        }
+
+                                        } else {
+                                            var s = '';
+                                        }
+
+                                    shelledColors.push(s)   
+                                }
+
+                                Vue.set(this.voxels[index], 'c', shelledColors);
+                            }
+
+                        } else {
+                            // If shell is off
+                            // Check to make sure the selected extrusion is not on a voxel that doesnt exist
+                            var v = _.get(this.voxels[index], 'c', 'undefined');
+
+                            if(v != 'undefined') {
+                                // set the voxels hollow prop to false
+                                this.voxels[index].h = false
+
+                                // Generate each voxel (colour group)
+                                this.generateColors(index);
+                            }
+
+                        }
+
+                        // Play audio only if the voxel is shelled
+                        if(this.voxels[index].h) {
+                            enJin.audioController.play('pop4') ;
+                        }
+                    }
+                }
+            }
+        }, 1),
+
+        generateColors(voxel) {
+
+            var v = _.get(this.voxels[voxel], 'c[0][0]', 'undefined');
+
+            if(v != 'undefined') {
+
+                if(this.mode == 'extrude') {
+                    var color = this.voxels[voxel].c[0][0];
+                } else {
+                    var color = this.currentColor;
+                }
+
+                // Then set all colours to [].
+                this.voxels[voxel].c = [];
+
+                // Now create an empty object for our colours
+                let newColours = [];
+
+                // Loop through and create colours for each voxel
+                for(let i = 0; i < this.currentDepth; i++) {
+                    let colours = {
+                        0: lightenDarkenColor(color, 0),
+                        1: lightenDarkenColor(color, -5),
+                        2: lightenDarkenColor(color, -10),
+                        3: lightenDarkenColor(color, -15),
+                        4: lightenDarkenColor(color, -20),
+                        5: lightenDarkenColor(color, -25)
+                    }
+                    // Add colours to array
+                    newColours.push(colours);
+                }
+
+                // Push this array to the voxel
+                Vue.set(this.voxels[voxel], 'c', newColours);
+            }
+        },
+
+        paint: _.debounce(function(event) {
+            let target = event.target;
+            let index = $(target).closest('.voxel-group').data().index // Get index of pixel
+            let voxelIndex = $(target).parent().data().index // Get index of pixel
+            let vertexIndex = $(target).data().vertex // Get index of pixel
+
+            enJin.audioController.play('pop1');
+            Vue.set(this.voxels[index].c[voxelIndex], vertexIndex, this.currentColor);
+        }, 15),
+
+        swapMode(mode) {
+            this.orientation = {}
+            this.zoomLevel = .8;
+            this.mode = mode;
+
+            enJin.audioController.play('pop3')
+        },
+
+        setDepth(event) {
+            let target = event.target;
+            let depth = $(target).data().depth;
+            this.currentDepth = depth;
+
+        },
+
+        handleZoom(amount) {
+
+            if(amount > 0) {
+                // in
+                if(this.zoomLevel < this.maxZoom) {
+                    this.zoomLevel += amount;
+                } else {
+                    this.zoomLevel = this.maxZoom;
+                }
+            } else {
+                // out
+                if(this.zoomLevel > this.minZoom) {
+                    this.zoomLevel += amount;
+                } else {
+                    this.zoomLevel = this.minZoom;
+                }
+            }
+        },
+
+
+        zoom(event) {
+            if(this.mode != 'export') {
+                const deltaY = event.deltaY;
+                if(deltaY < 0) {
+                    this.handleZoom(0.03);
+                } else {
+                    this.handleZoom(-0.03);
+                }      
+            }
+        },
+
+        updateOrientation(x, y, z, exp) {
+
+            enJin.audioController.play('pop4')
+
+            this.exportSettings.x = x;
+            this.exportSettings.y = y;
+            this.exportSettings.z = z;
+        },
+
+        processForExport() {
+
+            enJin.audioController.play('pop6');
+            this.exporting = true;
+            var hamlArray = '- @voxels = [';
+
+            that.voxels.forEach(function(v) {
+                if(v.length != 0) {
+                    let colors = '[';
+                    v.c.forEach(function(c) {
+                        let colourString = '{'
+                        for (let key of Object.keys(c)) {
+                            let col = c[key];
+                            let index = key;
+                            var comma;
+                            if(key != 0) {
+                                comma = ','
+                            } else {
+                                comma = ''
+                            }
+                            colourString = `${colourString} ${comma} ${index} => '${col}'`
+                        }
+                        colourString = colourString + '}'
+                        colors = colors + colourString + ','
+                    })
+                    let haml = `{:x => ${v.x}, :y => ${v.y}, :d => ${v.d}, :c => ${colors}]},`
+                    hamlArray += haml
+                }
+            })
+
+            const data = {
+                title : `${this.exportSettings.name} - A 3D Pure CSS & HTML Model Made With VoCSSels`,
+                css : `$voxelSize: 26; // We want to work as 1 unit is 1 voxel occupying one space. So here we are setting the the amount of pixels a voxel takes. This will need to be the same as the voxel size in the vue data object.
+$maxDepth: 17;
+$spinSpeed: ${this.exportSettings.spinSpeed}s;
+$uid: ${rot13(this.exportSettings.uid)};
+
+// Return the true px size of a voxel based on the passed unit.
+@function getVoxelSize($size, $operator) {
+    @return unquote($operator + $size * $voxelSize + px);    
+}
+
+// Function to set the orientation of a side
+@function setFaceOrientation($tx, $ty, $tz, $sx, $sy, $rx, $ry, $rz) {
+    @return rotateX($rx + deg) rotateY($ry + deg) rotateZ($rz + deg) scaleX($sx) scaleY($sy) translate3d(unquote($tx + ',' + $ty + ',' + $tz)); 
+}
+
+%voxel {
+    position: absolute;
+    top: 50%;
+    transform-style: preserve-3d;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 10px;
+}
+
+%face {
+    width: $voxelSize + px;
+    height: $voxelSize + px;
+    position: absolute;
+    transform-style: preserve-3d;
+    transform-origin: 50% 50%;
+}
+
+body {
+    height: 100vh;
+    overflow: hidden;
+    background: ${this.exportSettings.bgColor};
+
+    .p3d_playground {
+        height: 100vh;
+        perspective: ${this.exportSettings.perspective}px;
+        transform: scale(${this.exportSettings.scale});
+
+        .model {
+            height: 100vh;
+            transform-style: preserve-3d;
+            ${this.exportSettings.animate ? 'animation: spin $spinSpeed infinite linear;' : ''}
+            transform-origin: 50% 50% getVoxelSize($maxDepth / 2, '');
+            transform: scale(.6) rotateZ(${this.exportSettings.z}deg) rotatex(${this.exportSettings.x}deg) rotateY(-${this.exportSettings.y}deg) translateY(getVoxelSize($maxDepth / 2, '-'));
+            transition: all .3s;
+
+            @media only screen and (max-width: 700px) {
+               transform: scale(.5) rotateZ(${this.exportSettings.z}deg) rotatex(${this.exportSettings.x}deg) rotateY(-${this.exportSettings.y}deg) translateY(getVoxelSize($maxDepth / 2, '-'));
+            }
+
+            @keyframes spin {
+                from { transform: scale(1) rotateY(0deg) rotateZ(0deg) rotatex(0deg) translateY(getVoxelSize($maxDepth / 2, '-'));}
+                to { transform: scale(1) rotateY(360deg) rotateZ(0deg) rotatex(0deg) translateY(getVoxelSize($maxDepth / 2, '-'));}
+            }
+
+            .voxel,
+            .voxel-group,
+            .v {
+                @extend %voxel;
+            }
+
+            .f {
+                @extend %face;
+            }
+
+            // Utility classes
+            @for $x from 0 through 20 {
+                @for $y from 0 through 20 {
+                    .x-#{$x}.y-#{$y} {
+                        transform: translateZ(getVoxelSize($x - 0.1, '')) translateY(getVoxelSize($y - 0.1, ''));
+                    }
+                }
+            }
+
+            // Depths
+            // This can be done on a normal loop as depth will be limited
+            .f {
+                @for $v from 1 through 6 {
+                    &:nth-of-type(#{$v}) {
+                        $operator: if($v % 2 == 0, '', '-');
+                        @if $v == 1 or $v == 2 {
+                            transform: setFaceOrientation(0, 0, getVoxelSize(1 / 2, $operator), 1, 1, 0, 90, 0);
+                        }
+                        @if $v == 3 or $v == 4 {
+                            transform: setFaceOrientation(0, 0, getVoxelSize(1 / 2, $operator),1 , 1, 0, 0, 0);
+                        }
+                        @if $v == 5 or $v == 6 {
+                            transform: setFaceOrientation(0, 0, getVoxelSize(1 / 2, $operator), 1, 1, 90, 0, 0);
+                        }
+                    }
+                }
+            }
+
+            @for $i from 0 through 14 {
+                .d-#{$i} {
+                    transform: translateX(23px * $i);
+                }
+                .g-#{$i} {
+                    transform: translateX(-23px * ($i / 2));
+                }
+            }
+        }
+    }
+}`,
+                css_pre_processor : "scss",
+                html_pre_processor : "haml",
+                html : `${hamlArray}] 
+-# Created using VoCSSels by Jamie Coulter https://codepen.io/jcoulterdesign/pen/vYyzZdo
+.p3d_playground
+    .model
+        - @voxels.each do | voxel |
+            .voxel-group{:class => "g-#{voxel[:d]}"}
+                -(1..voxel[:d]).each do | index |
+                    .voxel{:class => "d-#{index}"}
+                        .v{:class => "x-#{voxel[:x]} y-#{voxel[:y]}"}
+                            -(1..6).each do | v |
+                                .f.f--t{:style => "background-color: ##{voxel[:c][index - 1][v]}"}`
+            };
+
+            const JSONstring = JSON.stringify(data).replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+            const form = `<form class="export" action="https://codepen.io/pen/define" method="POST" target="_blank"><input class="change" type="hidden" name="data" value='${JSONstring}'><input type="submit" width="40" height="40" value="Export to new pen"></form>`;
+            $('.editor_right__export .form').html('');
+            $('.editor_right__export .form').append(form);
+            that = this;
+            setTimeout(function() {
+                that.exporting = false;
+                $('.export').submit();
+            }, 1500)
+
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Save model to local storage
+
+        ------------------------------------------------------------------------- */
+
+        save() {
+            // Work out todays date
+            let today = new Date();
+            let dd = String(today.getDate()).padStart(2, '0');
+            let mm = String(today.getMonth() + 1).padStart(2, '0');
+            let yyyy = today.getFullYear();
+
+            let date = mm + '.' + dd + '.' + yyyy;
+
+            // Save model to local storage
+            // Start by creating a metadata object for our models information
+            let metaData = {
+                'date'     : date,
+                'author'   : this.author,
+                'name'     : this.exportSettings.name,      // Get the model name
+                'voxels'   : $('.v').length, // Get the total voxels in the model
+                'vertices' : $('.f').length, // Get the total vertices in the model
+                'image'    : '',             // Set a blank string for the base64 image data
+                'bgColor'  : this.exportSettings.bgColor
+            }
+
+            // Set a new item in local storage for the model data and assing the JSON to it
+            window.localStorage.setItem(this.modelPrefix + this.exportSettings.name.toLowerCase().replace(/\s/g, ''), JSON.stringify(this.voxels));
+
+            // Set saving flag to show saving icon
+            this.saving = !this.saving;
+
+            // Reset the zoom level for the snap shot
+            this.zoomLevel = 0.8;
+
+            // Take snapshop of model node
+            const node = document.getElementById('model');
+
+            // Hide preview buttons
+            $('.zooms').hide();
+
+            domtoimage.toPng(node)
+                .then(function (dataUrl) {
+
+                var that = this; // Get context
+                var img = new Image(); 
+
+                // Set image in meta data to data url
+                metaData.image = dataUrl; 
+
+                // Set local storage item to metadata
+                window.localStorage.setItem(that.metaPrefix + that.exportSettings.name.toLowerCase().replace(/\s/g, ''), JSON.stringify(metaData));
+
+
+
+                // Set saving flag back to false after a reasonable delay
+                setTimeout(function() {
+                    // Show preview buttons
+                    $('.zooms').show();
+
+                    // Reset saving flag
+                    that.saving = !that.saving;
+
+                    // Update the saved models arrays so they are accessible in the modal straight away
+                    that.getSavedModels();
+
+                    // Play sound feedback
+                    enJin.audioController.play('save')
+                }, 1000)
+
+            }.bind(this)); 
+        },
+
+        handleRightClick() {
+
+            if(this.drawMode == 'erase') {
+                this.drawMode = 'draw'
+            }  
+
+        },
+        shareModel() {
+            // Work out todays date
+            let today = new Date();
+            let dd = String(today.getDate()).padStart(2, '0');
+            let mm = String(today.getMonth() + 1).padStart(2, '0');
+            let yyyy = today.getFullYear();
+
+            let date = mm + '.' + dd + '.' + yyyy;
+
+            let metaData = {
+                'date'     : date,
+                'author'   : this.author,
+                'name'     : this.exportSettings.name,      // Get the model name
+                'voxels'   : $('.v').length, // Get the total voxels in the model
+                'vertices' : $('.f').length, // Get the total vertices in the model
+                'image'    : '',             // Set a blank string for the base64 image data
+                'bgColor'  : this.exportSettings.bgColor
+            }
+
+            metaData.modelData = [this.voxels];
+
+            // Reset the zoom level for the snap shot
+            this.zoomLevel = 0.8;
+
+            // Take snapshop of model node
+            const node = document.getElementById('model');
+
+            // Hide preview buttons
+            $('.zooms').hide();
+
+            this.submitting = !this.submitting;
+
+            domtoimage.toPng(node)
+                .then(function (dataUrl) {
+
+                var that = this; // Get context
+                var img = new Image(); 
+
+                // Set image in meta data to data url
+                metaData.image = dataUrl; 
+
+                // Set local storage item to metadata
+                window.localStorage.setItem(that.metaPrefix + that.exportSettings.name.toLowerCase().replace(/\s/g, ''), JSON.stringify(metaData));
+                if(that.submitting == false) {
+                    // Set saving flag back to false after a reasonable delay
+                    setTimeout(function() {
+                        // Show preview buttons
+                        $('.zooms').show();
+
+                        // Post data to zapier webhook
+                        var xhr = new XMLHttpRequest();
+                        xhr.open("POST", 'https://hooks.zapier.com/hooks/catch/708069/onctccu', true);
+                        xhr.send(JSON.stringify(metaData));
+
+
+
+                        setTimeout(function() {
+                            that.submitted = true;
+                            that.submitting = false;
+                            enJin.audioController.play('save')
+                        }, 2000)
+                    }, 1000)
+                }
+
+            }.bind(this));
+
+
+        },
+        /* -------------------------------------------------------------------------
+
+        Get models from local storage
+
+        ------------------------------------------------------------------------- */
+
+        getSavedModels() {
+
+            // First, clear any data from the saved models and meta arrays
+            let savedModels = [];
+            let savedModelsMeta = [];
+
+            // Iterate over localStorage and insert the keys that meet the condition into arr
+            for (let i = 0; i < window.localStorage.length; i++) {
+                // Check for p3d_modeldata prefix
+                if (window.localStorage.key(i).substring(0, this.modelPrefix.length) == this.modelPrefix) {
+                    savedModels.push(window.localStorage.key(i));
+                }
+                // Check for p3d_modeldata prefix
+                if (window.localStorage.key(i).substring(0, this.metaPrefix.length) == this.metaPrefix) {
+                    savedModelsMeta.push(window.localStorage.key(i));
+                }
+            }
+
+            // Set the arrays to the model data and meta keys. This will then update vue loop in the load modal
+            let meta = savedModelsMeta.sort();
+            let data = savedModels.sort();
+
+            this.savedModelsMeta = meta;
+            this.savedModels = data;
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Get meta data entry for saved model
+
+        ------------------------------------------------------------------------- */
+
+        getMetaData(key, index) {
+            let data = JSON.parse(window.localStorage.getItem(index));
+            let metaData = data[key];
+            return metaData;
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Load model from local storage
+
+        ------------------------------------------------------------------------- */
+
+        load(model, community) {
+
+            if(!community) {
+
+                var target = this.savedModels[model];
+                var metaTarget = this.savedModelsMeta[model];
+
+                var modelData = window.localStorage.getItem(target);
+                var metaData = JSON.parse(window.localStorage.getItem(metaTarget));
+
+
+            } else {
+                var metaData = model
+                var modelData = model.modelData[0];
+            }
+
+
+
+
+            // Remove all voxel information
+            this.voxels = [];
+            this.exportSettings.name = metaData.name;
+            this.mode = 'drawing';
+
+            // Re get context
+            that = this;
+            this.loading = !this.loading;
+
+            setTimeout(function() {
+
+                $("#colorBg, #exportBg").spectrum("set", metaData.bgColor);
+                that.exportSettings.bgColor = metaData.bgColor;
+
+                if(!community) {
+                    that.voxels = JSON.parse(modelData);
+                } else {
+                    that.voxels = modelData;
+                }
+
+                that.loading = !that.loading;
+            }, 1000)
+        },
+
+        newModel() {
+            this.voxels = [];
+            this.mode = 'drawing';
+            $("#colorBg, #exportBg").spectrum("set", '#25273E');
+            $("#colorPicker").spectrum("set", '#ffffff');
+            that.exportSettings.bgColor = '#25273E';
+
+            for(let i = 0; i < Math.pow(this.canvasSize, 2); i++) {
+                this.voxels.push([]);
+            }
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Open modal
+
+        ------------------------------------------------------------------------- */
+
+        openModal(modal) {
+            this.modalOpen = true;
+            this.modal = modal;
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Close modals
+
+        ------------------------------------------------------------------------- */
+
+        closeModals() {
+            this.modalOpen = false;
+
+
+            this.modal = '';
+            that = this;
+
+            setTimeout(function() {
+                that.submitted = false;
+            }, 1000)
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Open modal
+
+        ------------------------------------------------------------------------- */
+
+        colorPicker(event) {
+            this.picker.x = event.clientX;
+            this.picker.y = event.clientY;
+        },
+
+        selectColor: _.debounce(function() {
+            if(this.picker.active) {
+                this.picker.active = !this.picker.active;
+                this.currentColor = this.picker.color;
+                $("#colorPicker").spectrum("set", this.picker.color);
+            }
+        }, 10),
+
+        /* -------------------------------------------------------------------------
+
+        Reset all of the colour pickers to their default values
+
+        ------------------------------------------------------------------------- */
+
+        getVoxelsCount(model) {
+            return $('.v').length;
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Reset all of the colour pickers to their default values
+
+        ------------------------------------------------------------------------- */
+
+        getVerticesCount(model) {
+            return $('.f').length;
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Reset all of the colour pickers to their default values
+
+        ------------------------------------------------------------------------- */
+
+        resetBgColor() {
+            $("#colorBg, #exportBg").spectrum("set", '#25273E');
+            this.exportSettings.bgColor = '#25273E';
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Get all community models from GitHub gists
+
+        ------------------------------------------------------------------------- */
+
+        getCommunityModels() {
+            let xhr = new XMLHttpRequest();
+
+            xhr.open('GET', 'https://api.github.com/users/jcoulterdesign/gists');
+            xhr.send();
+
+            // Store contenxt
+            that = this;
+
+            xhr.onload = function() {
+                if (xhr.status == 200) { 
+                    let gists = JSON.parse(xhr.response);
+                    let urls = []; // Raw urls array
+
+                    gists.forEach(function(g) {
+                        let files = g.files;
+
+                        for (let key of Object.keys(files)) {
+                            let raw_url = files[key].raw_url;
+                            urls.push(raw_url);
+                        }
+                    })
+
+                    // Now we have a list of all approved gists. Loop through and get the content of each one and
+                    // store to our vue instance
+
+                    var xhrReq = [];
+
+                    urls.forEach(function(u, i) {
+                        xhrReq[i] = new XMLHttpRequest();
+                        xhrReq[i].open('GET', u);
+                        xhrReq[i].send();
+
+                        ctx = that;
+                        xhrReq[i].onload = function() {
+                            if (xhrReq[i].status == 200) {
+                                ctx.communityContent.push(JSON.parse(xhrReq[i].response));
+                            }
+                        }
+                    })
+
+                    $('.community .x-wrap').width(urls.length * 265 + 'px')
+                }
+            };
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Delete model from local storage
+
+        ------------------------------------------------------------------------- */
+
+        deleteModel(model) {
+            // Get the relevant entry in storage
+            let target = this.savedModels[model];
+            let targetMeta = this.savedModelsMeta[model];
+
+            // Remove both the meta and the model data
+            window.localStorage.removeItem(target);
+            window.localStorage.removeItem(targetMeta);
+
+            // Update the UI by updating models array
+            this.getSavedModels();
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Toggle the audio controller muted prop
+
+        ------------------------------------------------------------------------- */
+
+        toggleAudio() {
+            enJin.audioController.play('pop6');
+            enJin.audioController.muted = !enJin.audioController.muted;
+            this.muted = !this.muted
+        },
+
+        /* -------------------------------------------------------------------------
+
+        Quick and dirty way to reduce motion in the app. Add a class to everything that
+        has transition-duration 0
+
+        ------------------------------------------------------------------------- */
+
+        toggleMotion() {
+            enJin.audioController.play('pop6');
+            this.motion = !this.motion;
+            if(this.motion) {
+                $('*').removeClass('noMotion');
+            } else {
+                $('*').addClass('noMotion');
+            }
+        }
+    },
+
+    mounted() {
+
+        // Get all the community VoCSSels for github gists
+        this.getCommunityModels();
+
+        // Get all saved models from local storage
+        this.getSavedModels();
+
+        // Prepare an empty voxels array
+        for(let i = 0; i < Math.pow(this.canvasSize, 2); i++) {
+            this.voxels.push([]);
+        }
+
+        /* -------------------------------------------------------------------------
+
+        Set up our spectrums
+
+        ------------------------------------------------------------------------- */
+
+        // Main colour selector
+        $("#colorPicker").spectrum({
+            color: "ffffff",
+            preferredFormat: "hex",
+            flat: true,
+            showInput: true,
+            showPalette: true,
+            palette: [],
+            showSelectionPalette: true, // true by default
+            selectionPalette: [],
+            clickoutFiresChange: true,
+            maxSelectionSize: 15,
+            move(color) {
+                that.currentColor = color.toHexString().substring(1); // #ff0000
+
+            }
+        });
+
+        // Auto switch to draw when selecting a colour
+        $('#colorPicker').on("dragstart.spectrum", function(e, color) {
+            that.drawMode = 'draw'
+        });
+
+        // Auto switch to draw when selecting a colour
+        $('#colorPicker').on("move.spectrum", function(e, color) {
+            that.drawMode = 'draw'
+        });
+
+        // Background color selectors for preview panel and export
+        $("#colorBg, #exportBg").spectrum({
+            color: "25273E",
+            containerClassName: 'bg',
+            move(color) {
+                that.bgColor = color.toHexString(); // #ff0000
+                that.exportSettings.bgColor = color.toHexString();
+                $("#colorBg, #exportBg").spectrum("set", color.toHexString());
+            }
+        });
+
+        // Make sure the first palette entry is selected
+        $('.sp-thumb-inner').click();
+
+        // Simple preloader
+        setTimeout(function() {
+            $('.p3d_loader').fadeOut();
+        }, 4000)
+    }
+});
+
+// Symmetry
+// Fix intermittent bug
+// Optimize
diff --git a/vocsselseasily-create-3d-css-html-voxel-models/src/style.scss b/vocsselseasily-create-3d-css-html-voxel-models/src/style.scss
new file mode 100644
index 0000000..071a787
--- /dev/null
+++ b/vocsselseasily-create-3d-css-html-voxel-models/src/style.scss
@@ -0,0 +1,2047 @@
+@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&display=swap');
+
+$primary: #25273E;
+$secondary: #E5513A;
+$borderRadius: 14px;
+
+$voxelSize: 26; // We want to work as 1 unit is 1 voxel occupying one space. So here we are setting the the amount of pixels a voxel takes. This will need to be the same as the voxel size in the vue data object.
+$shadingMixTolerance: 4; // How agressive the SASS mix is on each side of the voxel. Lower is less noticeable.
+$maximumDepth: 15;
+$maxX: 40;
+$maxY: 40;
+
+* {
+    user-select: none;
+}
+
+body {
+    background: $primary;
+    color: white;
+    font-family: 'Baloo 2', cursive;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100vh;
+
+    .l {
+        position: fixed;
+        width: 50px;
+        height: 10px;
+        background: red;
+        right: 358px;
+        top: -10px;
+        box-shadow: 0 0 20px 1px #f44336;
+        animation: love 2s infinite;
+    }
+
+    @keyframes love {
+        0%{box-shadow: 0 0 20px 1px #f44336;}
+        50%{box-shadow: 0 0 26px 3px #f44336;}
+        100%{box-shadow: 0 0 20px 1px #f44336;}
+    }
+
+    .noMotion {
+        transition-duration: 0s !important;
+
+        div {
+            transition-duration: 0s !important;
+        }
+    }
+
+    .hide {
+        pointer-events: none;
+    }
+
+    // Spectrum
+
+    .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner,
+    .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
+        background-image: none;
+    }
+
+    .sp-flat {
+        z-index: 0;
+    }
+
+    .sp-input {
+        font-size: 12px !important;
+        border: 1px inset;
+        padding: 8px 10px;
+        margin: -20px 0 0 0;
+        width: calc(100% - 56px);
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 8px;
+        font-family: "Baloo 2", cursive;
+        font-weight: 700;
+        color: white;
+        position: relative;
+        top: -11px;
+        left: 2px;
+        border: 0 !important;
+        outline: none !important;
+
+        &:focus {
+            box-shadow: 0 0 0 3px $secondary inset;
+        }
+    }
+
+    .sp-container {
+        background: transparent;
+        border: 0;
+        width: 170px;
+        margin-left: 6px;
+        margin-top: 22px;
+    }
+
+    .sp-container.bg {
+        border: 0;
+        height: 130px;
+        border-radius: 10px;
+        width: 170px;
+        margin-left: 6px;
+        margin-top: 22px;
+        transform: translate(-363px, 12px) !important;
+    }
+
+    .sp-thumb-el {
+        border-radius: 10px;
+        transition: all .2s;
+
+        &:hover {
+            transform: scale(1.1);
+        }
+    }
+
+    .sp-thumb-inner {
+        box-shadow: 0 0 0 0 inset white;
+        transition: all .3s;
+        background: none;
+    }
+
+    .sp-thumb-active .sp-thumb-inner {
+        background: none;
+        box-shadow: 0 0 0 3px inset white;
+    }
+
+    .sp-top-inner {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 140px;
+        height: 110px;
+        right: 0;
+    }
+
+    .sp-palette .sp-thumb-inner {
+        background-position: 50% 50%;
+        background-repeat: no-repeat;
+        border-radius: 10px;
+    }
+
+    .sp-color, 
+    .sp-hue, 
+    .sp-clear {
+        border: 0;
+    }
+
+    .sp-palette-container {
+        border: 0;
+    }
+
+    .sp-palette .sp-thumb-el {
+        width: 40px;
+        height: 40px;
+        margin: 5px;
+        border: 0;
+        background: transparent;
+    }
+
+    .sp-hue {
+        width: 10px;
+        border-radius: 10px;
+        margin-left: 11px;
+    }
+
+    .sp-slider, .sp-dragger {
+        position: absolute;
+        top: 0;
+        cursor: pointer;
+        height: 10px;
+        width: 10px;
+        transform: translate(4px, 4px);
+        left: -6px;
+        top: 4px;
+        border-radius: 16px;
+        border: 2px solid #fff;
+        background: transparent;
+        opacity: 1;
+    }
+
+    .sp-button-container.sp-cf {
+        display: none;
+    }
+
+    .sp-picker-container {
+        width: 172px;
+        border-left: solid 0px #fff;
+
+    }
+
+    .sp-val {
+        box-shadow: 0 0 0 3px inset white;
+        border-radius: 10px;
+        padding: 10px;
+    }
+
+    .sp-color {
+        border-radius: 10px;
+        overflow: hidden;
+    }
+
+    .sp-top {
+        margin-left: 4px;
+    }
+
+    .p3d {
+        height: 100vh;
+        width: 100vw;
+
+        &_colorPicker {
+            width: 40px;
+            height: 40px;
+            background: red;
+            position: absolute;
+            z-index: 2;
+            border-radius: 30px;
+            transform: translate(-20px, -20px);
+            pointer-events: none;
+            transition: background .1s;
+            border: 3px solid white;
+        }
+
+        &_loader {
+            position: fixed;
+            background: $primary;
+            width: 100%;
+            height: 100%;
+            z-index: 1000;
+            &__inner {
+                position: absolute;
+                left: 0;
+                right: 0;
+                margin: auto;
+                top: 50%;
+                transform: translateY(-50%) scale(0);
+                width: 100px;
+                animation: loadIn 2.75s 1s cubic-bezier(0.035, 1.495, 0.625, 0.890) forwards;
+
+                .b, .f {
+                    position: absolute;
+                    width: 45px;
+                    height: 45px;
+                    background: #0000001c;
+                    border-radius: 10px;
+                    top: -13px;
+                    left: 30px;
+                    z-index: -1;
+                }
+
+                .f {
+                    background: $secondary;
+                    animation: load 1.5s 1.5s forwards;
+                    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
+                }
+
+                @keyframes load {
+                    from {clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);}
+                    to {clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);}
+                }
+
+                @keyframes loadIn {
+                    0%{transform: translateY(-50%) scale(0); opacity: 1}
+                    10%{transform: translateY(-50%) scale(1); opacity: 1}
+                    90%{transform: translateY(-50%) scale(1); opacity: 1}
+                    100%{transform: translateY(-50%) scale(0); opacity: 0}
+                }
+            }
+        }
+
+        &_overlay {
+            background: rgb(16 14 29 / 80%);
+            position: fixed;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            opacity: 0;
+            transition: all .2s .2s;
+            pointer-events: none;
+
+            &.open {
+                opacity: 1;
+                pointer-events: all;
+                transition: all .2s 0s;
+            }
+        }
+
+        .modal {
+            .row {
+                padding: 10px;
+
+                &-half {
+                    margin-bottom: 10px;
+                    width: 50%;
+                    float: left;
+                }
+
+                label {
+                    font-size: 14px;
+                    margin-bottom: 6px;
+                    display: block;
+                }
+            }
+
+            input[type=text] {
+                padding: 14px 20px;
+                font-weight: 600;
+                width: calc(100% - 50px);
+                border-radius: 10px;
+                color: white;
+                border: none;
+                font-family: "Baloo 2", cursive;
+                background: #00000024;
+                outline: none;
+                box-shadow: 0 0 0 0px #ffc215 inset;
+                transition: all 0.3s;
+
+                &:focus {
+                    box-shadow: 0 0 0 3px #ffc215 inset;
+                }
+            }
+
+            .b {
+                padding: 11px;
+                margin-top: 10px;
+                clear: both;
+                float: left;
+
+                button {
+                    color: #6d581e;
+                    background: #f3c032;
+                    border: 0;
+                    border-radius: 10px;
+                    font-size: 14px;
+                    padding: 16px 24px;
+                    font-weight: 700;
+                    outline: none;
+                    font-family: "Baloo 2", cursive;
+                    position: relative;
+                    float: left;
+                    transition: all 0.3s;
+                    cursor: pointer;
+
+                    img {
+                        mix-blend-mode: luminosity;
+                    }
+
+                    &.submitting {
+                        padding-left: 46px;
+
+                        img {
+                            transform: scale(1);
+                        }
+                    }
+
+                    &:nth-of-type(1) {
+                        margin-right: 16px;
+
+                        &:hover {
+                            transform: scale(1.1);
+                        }
+                    }
+
+                    &:nth-of-type(2) {
+                        margin-right: 16px;
+                        color: #ffffff;
+                        background: transparent;
+                        box-shadow: 0 0 0 3px inset white;
+
+                        &:hover {
+                            background: white;
+                            color: $primary;
+                        }
+                    }
+
+                    img {
+                        transform: scale(0);
+                        position: absolute;
+                        left: 13px;
+                        top: 13px;
+                        height: 26px;
+                        transition: all 0.3s 0.1s;
+                    }
+                }
+            }
+        }
+
+        &_load {
+            position: fixed;
+            left: 0;
+            right: 0;
+            margin: auto;
+            z-index: 10;
+            transform: scale(0);
+            height: 100%;
+            width: 0;
+            pointer-events: none;
+            transition: all .3s 0s cubic-bezier(0.035, 1.495, 0.625, 0.890);
+
+
+            &.open {
+                transform: scale(1);
+                pointer-events: all;
+                transition: all .3s .2s cubic-bezier(0.035, 1.495, 0.625, 0.890);
+            }
+
+            h4 {
+                color: $secondary;
+            }
+
+            .close {
+                position: absolute;
+                right: -24px;
+                top: -24px;
+                background: $primary;
+                border-radius: 100px;
+                width: 40px;
+                height: 40px;
+                line-height: 42px;
+                text-align: center;
+                border: 3px solid white;
+                cursor: pointer;
+                transition: all .3s;
+
+                &:hover {
+                    background: white;
+                    color:  $primary;
+                }
+            }
+            &__inner {
+                position: fixed;
+                left: 0;
+                right: 0;
+                margin: auto;
+                z-index: 10;
+                background: $primary;
+                border: 3px solid white;
+                width: 440px;
+                border-radius: 20px;
+                padding: 40px;
+                font-weight: 600;
+                top: 50%;
+                transform: translateY(-50%) translateX(-50%);
+
+                h1 {
+                    margin: -10px 0px 0px 10px;
+                }
+
+                p {
+                    margin: 0 0 20px 10px;
+                }
+
+                .delete,
+                .load {
+                    cursor: pointer;
+                }
+
+                .delete {
+                    color: $secondary;
+                }
+
+                .s-wrap {
+                    max-height: 315px;
+                    overflow-x: hidden;
+                    padding-right: 10px;
+                    overflow-y: scroll;
+
+                    /* width */
+                    &::-webkit-scrollbar {
+                        width: 4px;
+                        border-radius: 10px;
+                    }
+
+                    /* Track */
+                    &::-webkit-scrollbar-track {
+                        background: rgba(0, 0, 0, 0.2); 
+                    }
+
+                    /* Handle */
+                    &::-webkit-scrollbar-thumb {
+                        background: $secondary; 
+                        border-radius: 10px;
+                    }
+
+                    /* Handle on hover */
+                    &::-webkit-scrollbar-thumb:hover {
+                        //background: #555; 
+                    }
+                }
+
+                .p3d_load__model {
+                    overflow: hidden;
+                    background: transparent;
+                    border-radius: 10px;
+                    padding: 10px;
+                    transition: all .3s;
+                    position: relative;
+
+                    &:last-child {
+                        &:not(.empty) {
+                            margin-bottom: 0;
+                        }
+                    }
+
+                    &:not(.empty) {
+                        cursor: pointer;
+                        &:hover {
+                            background: rgba(0, 0, 0, 0.2);
+
+                            .delete {
+                                opacity: 1;
+                                top: 0;
+                            }
+                        }
+                    }
+
+                    .m_image {
+                        width: 35%;
+                        float: left;
+                        height: 142px;
+                        overflow: hidden;
+                        box-sizing: border-box;
+                        border: 3px solid white;
+                        border-radius: 10px;
+                        background-size: 190% !important;
+                        background-position: center center !important;
+
+                        img {
+                            width: 100%;
+                            border-radius: 10px;
+                            display: block;
+                        }    
+                    }
+
+                    .m_details {
+                        width: 50%;
+                        float: left;
+                        padding-left: 15px;
+                        padding-top: 14px;
+
+                        .load {
+                            margin: 10px;
+                            background: #ffc720;
+                            position: absolute;
+                            right: 10px;
+                            top: 50%;
+                            width: 40px;
+                            height: 40px;
+                            cursor: pointer;
+                            transition: all .3s;
+                            border-radius: 40px;
+                            transform: scale(1);
+
+                            &:hover {
+                                transform: scale(1.1);
+                            }
+
+                            img {
+                                position: relative;
+                                left: 12px;
+                                top: 8px;
+                                opacity: 0.5;
+
+                            }
+                        }
+
+                        .delete {
+                            font-size: 14px;
+                            opacity: 0;
+                            transition: all .2s;
+                            margin-top: 16px;
+                            position: absolute;
+                            right: 20px;
+                            top: 10px;
+
+                            &:hover {
+                                text-decoration: underline;
+                            }
+                        }
+
+                        p.name {
+                            margin-bottom: 0px;
+                            font-size: 22px;
+                            margin-top: 8px;
+                            text-transform: capitalize;
+                        }
+
+                        p.date {
+                            margin-bottom: -6px;
+                            font-size: 12px;
+                            opacity: 0.3;
+                            margin-top: 10px;
+                        }
+
+                        p.author {
+                            font-size: 12px;
+                            margin: -7px 0 7px 10px;
+                        }
+
+                        p.voxels {
+                            margin-bottom: 0px;
+                            font-size: 12px;
+
+                            span {
+                                color: $secondary;
+                            }
+                        }
+                    }
+                }
+            }
+
+
+            &.community {
+                .p3d_load__inner {
+                    width: 800px;
+                }
+                .p3d_load__model {
+                    overflow: hidden;
+                    background: transparent;
+                    border-radius: 10px;
+                    padding: 10px;
+                    float: left;
+                    transition: all 0.3s;
+                    width: 244px;
+                    position: relative;
+                }
+
+                .p_name {
+                    margin-bottom: 1px;
+                    font-size: 22px;
+                    margin-top: 6px;
+                    text-transform: capitalize;
+                }
+                .m_image {
+                    width: 100%;
+                    float: left;
+                    height: 220px;
+                }
+
+                .m_details {
+                    width: 100%;
+                    float: left;
+                    padding-left: 0;
+                    padding-top: 24px;
+                    margin-left: -10px;
+                }
+
+                .x-wrap {
+                    width: 10000px;
+                }
+
+                .s-wrap {
+                    max-height: 390px;
+                    overflow-x: hidden;
+                    padding-right: 0;
+                    overflow-y: hidden;
+                    overflow-x: scroll;
+                    padding-bottom: 20px;
+                }
+            }
+        }
+
+        &_main {
+            &_footer {
+                position: absolute;
+                bottom: 0;
+                padding: 0 0 20px 50px;
+                font-size: 12px;
+
+                a {
+                    color: $secondary;
+                    font-weight: 700;
+                }
+
+                span {
+                    opacity: 0.4;
+                }
+            }
+            .help {
+                font-size: 16px;
+                font-weight: 700;
+                margin-bottom: 14px;
+
+                .icon {
+                    width: 8px;
+                    border: 2px solid white;
+                    padding: 4px 6px;
+                    border-radius: 20px;
+                    transform: scale(0.7);
+                    cursor: pointer;
+
+                    &:hover {
+                        & + div {
+                            opacity: 1;
+                            transform: translateY(0px);
+                        }
+                    }
+                }
+
+                .gif {
+                    transition: transform 0.3s 0.2s cubic-bezier(0.035, 1.495, 0.625, 0.89), opacity 0.2s 0.2s;
+                    opacity: 0;
+                    position: absolute;
+                    pointer-events: none;
+                    width: 740px;
+                    transform: translateY(20px);
+                    z-index: 3;
+                    top: 48px;
+                    border: 3px solid white;
+                    border-radius: 10px;
+                    padding: 16px;
+                    background: #151c29;
+
+                    .desc {
+                        width: 200px;
+                        float: left;
+                        padding: 30px;
+                        line-height: 20px;
+
+
+                        h4 {
+                            margin: 0;
+                            font-size: 20px;
+                            margin-bottom: 10px;
+                        }
+                    }
+
+                    img {
+                        width: 480px;
+                        display: block;
+                        border-radius: 10px;
+                        float: right;
+                    }
+
+                }
+            }
+            .button {
+                line-height: 42px;
+                border-radius: 10px;
+                cursor: pointer;
+                transition: all .3s;
+                font-weight: 800;
+                position: relative;
+                height: 40px;
+
+
+
+                img.icon {
+                    transform: scale(1);
+                    transition: all .1s .1s;
+
+                    &.saving {
+                        transition: all .1s 0s;
+                        transform: scale(0);
+                    }
+                }
+
+                img.loader {
+                    transition: all .1s 0s;
+                    position: absolute;
+                    left: -4px;
+                    height: 28px;
+                    top: -3px;
+                    transform: scale(0);
+
+                    &.saving {
+                        transition: all .1s .1s;
+                        transform: scale(1);
+                    }
+                }
+
+                &:hover {
+                    & > .tooltip {
+                        opacity: 1; 
+                        top: -54px;
+
+                        transition: all .3s .2s;
+                    }
+                }
+
+                img {
+                    margin: 9px 10px;
+                    height: 20px;
+                }
+
+                & > .tooltip {
+                    transition: all .23s 0s;
+                    left: 0;
+                    opacity: 0;
+                    pointer-events: none;
+                    top: -50px;
+                    color: #25273E;
+                    border-radius: 10px;
+                    position: absolute;
+                    background: white;
+                    width: 140px;
+                    font-size: 14px;
+                    text-align: center;
+
+                    &:after {
+                        position: absolute;
+                        width: 10px;
+                        height: 10px;
+                        background: white;
+                        content: "";
+                        margin: auto;
+                        display: block;
+                        left: 0;
+                        bottom: -3px;
+                        right: 0;
+                        transform: rotate(45deg);
+                    }
+                }
+
+                &:after,
+                &:before {
+                    border-radius: 10px;
+                    position: absolute;
+                    content: "";
+                    width: 100%;
+                    height: 100%;
+                    background: rgb(0 0 0 / 30%);
+                    top: 0;
+                    left: 0;
+                    z-index: -1;
+                    transform: scale(0);
+                    transition: all 0.3s cubic-bezier(0.035, 1.495, 0.625, 0.89);
+                }
+
+                &:before {
+                    background: $secondary;
+                }
+
+                &.active {
+                    &:before {
+                        transform: scale(1);
+                    }
+                }
+
+                &:not(.active):hover {
+                    color: $secondary;
+
+                    &:after {
+                        transform: scale(1);
+                    }
+                }
+            }
+
+            &__header {
+                padding: 40px;
+
+                .header_left,
+                .header_right {
+                    width: 50%;
+                    float: left;
+                }
+
+                .header_left {
+                    width: 200px;
+                }
+
+                .header_right {
+                    margin-top: 6px;
+                    text-align: left;
+                    width: calc(100% - 200px);
+                    float: right;
+
+                    .button {
+                        width: 40px;
+                        text-align: center;
+
+                        &::before {
+                            display: block;
+                            content: "";
+                            position: absolute;
+                            height: 3px;
+                            width: 0px;
+                            background: $secondary;
+                            z-index: 1;
+                            left: 5px;
+                            border-radius: 10px;
+                            top: 17px;
+                            transform: scale(1);
+                        }
+
+                        &.active {
+                            img {
+                                opacity: 0.5;
+                            }
+                            &::before {
+                                width: 30px;
+                            }
+                        }
+                    }
+
+                    @keyframes pulse {
+                        from {box-shadow: 0 0 0 0 rgba(243, 192, 50, 1)}
+                        to {box-shadow: 0 0 0 12px rgba(243, 192, 50, 0)}
+                    }
+
+                    .buttons {
+                        float: left;
+
+                        .community {
+                            background: #f3c032;
+                            width: 120px;
+                            position: relative;
+                            font-size: 15px;
+                            height: 44px;
+                            line-height: 46px;
+                            top: -14px;
+                            color: #504014;
+                            margin-left: 10px;
+                            transform: scale(1);
+                            transition: all .3s;
+
+                            animation: pulse 1.3s infinite;
+
+                            &::after,
+                            &::before {
+                                display: none;
+                            }
+                            &:hover {
+                                background: #ffbc00;
+                                transform: scale(1.05);
+                            }
+                        }
+                    }
+
+                    .options {
+                        float: right;
+                    }
+
+                    input {
+                        float: left;
+                        width: 300px;
+                        font-family: 'Baloo 2', cursive;
+                        background: transparent;
+                        font-weight: 700;
+                        color: white;
+                        border: 0;
+                        border-bottom: 2px solid white;
+                        outline: none;
+                        padding: 0 0 8px 0;
+                        margin-right: 16px;
+                    }
+
+                    .button {
+                        display: inline-block;
+
+                        &:hover {
+                            .tooltip {
+                                bottom: -50px;
+                            }
+                        }
+
+                        .tooltip {
+                            left: -20px;
+                            width: 80px;
+                            top: auto;
+                            bottom: -44px;
+
+                            &:after {
+                                bottom: auto;
+                                top: -3px;
+                            }
+                        }
+
+
+                    }
+                }
+            }
+
+            &__editor {
+                height: 100px;
+                width: 1300px;
+                margin: 0 auto;
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 50%;
+                transform: translateY(-50%) scale(1);
+                height: 600px;
+
+                @for $i from 1 through 40 {
+                 @media only screen and (max-height: #{970 - ($i * 8)}px) {
+                     transform: translateY(-50%) scale(calc(1 - (0.007 * #{$i})));
+                   }
+                 }
+
+                .editor {
+                    &_right {
+                        width: 35%;
+                        float: right;
+                        position: relative;
+
+                        &__export {
+                            opacity: 0;
+                            pointer-events: none;
+                            float: left;
+                            position: absolute;
+                            padding-left: 70px;
+                            padding-top: 70px;
+                            transition: all .1s 0s;
+
+                            .buttons {
+                                clear: both;
+                                float: left;
+                                margin-top: 30px;
+                            }
+
+                            input[type="text"] {
+                                padding: 14px 20px;
+                                font-weight: 600;
+                                border-radius: 10px;
+                                color: white;
+                                border: none;
+                                font-family: 'Baloo 2', cursive;
+                                background: #00000024;
+                                outline: none;
+                                box-shadow: 0 0 0 0px #ffc215 inset;
+                                transition: all .3s;
+
+                                &:focus {
+                                    box-shadow: 0 0 0 3px #ffc215 inset
+                                }
+                            }
+
+                            input {
+                                margin-top: 8px;
+                            }
+
+                            p.sub {
+                                margin: -17px 0 16px 0px;
+                                font-size: 14px;
+                                line-height: 20px;
+                                font-weight: 500;
+                                opacity: 0.5;
+                            }
+
+                            button
+                            {
+                                color: #6d581e;
+                                background: #f3c032;
+                                border: 0;
+                                border-radius: 10px;
+                                font-size: 14px;
+                                padding: 16px 19px;
+                                font-weight: 700;
+                                outline: none;
+                                font-family: "Baloo 2", cursive;
+                                float: left;
+                                transition: all .3s;
+                                cursor: pointer;
+                                animation: pulse 1.3s infinite;
+
+                                &:hover {
+                                    background: #ffbc00;
+                                }
+                            }
+
+                            input[type="submit"] {
+                                opacity: 0;
+                                position: absolute;
+                                left: -10000px;
+                                top: -1000000px;
+                            }
+
+                            button.cp {
+                                margin-top: 0px;
+                                margin-left: 16px;
+                                background: #694a7d;
+                                color: #fff;
+                                position: relative;
+                                animation: none;
+
+                                img {
+                                    transform: scale(0);
+                                    position: absolute;
+                                    left: 13px;
+                                    top: 13px;
+                                    height: 26px;
+                                    transition: all .3s .1s;
+                                }
+
+                                &.exporting {
+                                    padding-left: 46px;
+
+                                    img {
+                                        transform: scale(1);
+                                    }
+                                }
+
+                                &:hover {
+                                    background: #8f4db9;
+                                }
+                            }
+
+                            .row {
+                                margin-bottom: 8px;
+                                position: relative;
+                                clear: both;
+                                float: left;
+                                transition: all .3s;
+
+                                &.inactive {
+                                    opacity: 0.4;
+                                    pointer-events: none;
+                                }
+
+                                .sp-replacer + img {
+                                    height: 15px;
+                                    opacity: 0.2;
+                                    cursor: pointer;
+                                    position: relative;
+                                    transition: all 0.3s;
+                                    top: 5px;
+
+                                    &.hide {
+                                        opacity: 0;   
+                                    }
+
+                                    &:hover {
+                                        opacity: 1;
+                                    }
+                                }
+
+                                &-half {
+                                    float: left;
+                                    width: 50%;
+
+
+                                    input {
+                                        width: calc(100% - 50px);
+                                    }
+
+                                    input[type='range'] {
+                                        width: calc(100% - 22px) !important;
+                                    }
+
+                                    & + .save {
+                                        position: absolute;
+                                        right: -50px;
+                                        top: 44px;
+                                        width: 40px;
+
+                                        .tooltip {
+                                            left: -19px;
+                                            width: 80px;
+                                        }
+                                    }
+                                }
+
+                                input[type='checkbox'] {
+                                    margin-top: 8px;
+                                    appearance: none;
+                                    width: 20px;
+                                    height: 20px;
+                                    margin-left: -1px;
+                                    border-radius: 7px;
+                                    border: 3px solid white;
+                                    outline: none;
+                                    cursor: pointer;
+                                    overflow: hidden;
+                                    position: relative;
+
+                                    &::after {
+                                        display: block;
+                                        content: "";
+                                        width: 8px;
+                                        height: 8px;
+                                        left: 3px;
+                                        top: 3px;
+                                        border-radius: 2px;
+                                        background: #E5513A;
+                                        position: absolute;
+                                        transition: all 0.3s cubic-bezier(0.035, 1.495, 0.625, 0.89);
+                                        transform: scale(0);
+                                    }
+
+                                    &:checked {
+                                        &::after {
+                                            transform: scale(1);
+                                        }
+                                    }
+                                }
+
+                                input[type='range'] {
+                                    overflow: hidden;
+                                    height: 6px;
+                                    border-radius: 10px;
+                                    outline: none;
+                                    width: 200px;
+                                    -webkit-appearance: none;
+                                    background-color: rgba(0, 0, 0,  0.3);
+                                }
+
+                                input[type='range']::-webkit-slider-runnable-track {
+                                    height: 10px;
+                                    -webkit-appearance: none;
+                                    color: #13bba4;
+                                    margin-top: -1px;
+                                }
+
+                                input[type='range']::-webkit-slider-thumb {
+                                    width: 10px;
+                                    -webkit-appearance: none;
+                                    height: 10px;
+                                    cursor: ew-resize;
+                                    background: #fff;
+                                    box-shadow: -180px 0 0 180px $secondary;
+                                }
+
+
+                                label {
+                                    display: block;
+                                    font-weight: 700;
+                                    font-size: 14px;
+                                    display: block;
+                                    margin-top: 10px;
+
+                                    span {
+                                        // color: $secondary;
+                                        font-weight: 700;
+
+                                        span {
+                                            font-size: 12px;
+                                            font-weight: 500;
+                                            opacity: 0.3;
+                                        }
+
+                                    }
+                                }
+                            }
+
+                            &.show {
+                                opacity: 1;
+                                pointer-events: all;
+                                transition: all .3s .2s;
+                            }
+                        }
+
+                        #colorBg {
+                            & + div {
+                                opacity: 1;
+                                transition: all .29s;
+                            }
+
+                            &.hide {
+
+                                & + div {
+                                    opacity: 0;
+                                    pointer-events: none;
+                                }
+                            }
+                        }
+                        p {
+                            font-weight: 700;
+                            margin: 10px 0px 20px 40px;
+                            opacity: 1;
+                            transition: all .2s;
+                            transform: translateY(0px);
+
+
+                            &.hide {
+                                transform: translateY(-12px);
+                                opacity: 0;
+                            }
+                            & + img {
+                                position: absolute;
+                                right: 59px;
+                                top: 19px;
+                                height: 15px;
+                                opacity: 0.2;
+                                cursor: pointer;
+                                transition: all .3s;
+
+                                &.hide {
+                                    opacity: 0;   
+                                }
+
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+
+                        p.voxelCount {
+                            clear: both;
+                            float: right;
+                            position: absolute;
+                            top: 476px;
+                            left: 0px;
+                            font-size: 14px;
+                            transform: translateY(0px);
+                            transition: all .2s .2s;
+
+                            &.hide {
+                                transition: all .002s;
+                                pointer-events: none;
+                            }
+
+                            span {
+                                color: $secondary;
+
+                                &.block {
+                                    opacity: 0;
+                                    color: rgba(255, 255, 255, 0.5);
+                                    font-size: 12px;
+                                    display: block;
+                                    font-weight: 400;
+                                    margin-top: 10px;
+
+                                    &.show {
+                                        opacity: 1;
+                                    }
+
+                                    img {
+                                        width: 16px;
+                                        margin-top: -1px;
+                                        margin-right: 9px;
+                                        position: relative;
+                                        top: 3px;
+                                        margin-bottom: 13px;
+                                        float: left;
+
+                                    }
+                                }
+                            }
+                        }
+
+
+
+                        #colorBg + div ,
+                        #exportBg + div {
+                            position: absolute;
+                            right: -6px;
+                            top: 10px;
+                            border: 0;
+                            background: transparent;
+
+                            .sp-preview {
+                                position: relative;
+                                width: 25px;
+                                height: 20px;
+                                border: solid 3px #fff;
+                                margin-right: 8px;
+                                border-radius: 6px;
+                                float: left;
+                                z-index: 0;
+                            }
+
+                            .sp-preview-inner {
+                                border-radius: 3px;
+                            }
+
+                            .sp-dd {
+                                padding: 6px 0;
+                                height: 20px;
+                                line-height: 12px;
+                                float: left;
+                                color: white;
+                                font-size: 10px;
+                                transform: scaleY(.6);
+                            }
+                        }
+
+                        #exportBg + div {
+                            margin-top: 8px;
+                            position: static   
+                        }
+
+                        &__preview {
+                            box-shadow: 0 0 0 3px inset white;
+                            background: $primary;
+                            height: 415px;
+                            width: 415px;
+                            left: calc(65% + 40px);
+                            float: right;
+                            border-radius: 14px;
+                            z-index: 1;
+                            position: fixed;
+                            transition: all .3s cubic-bezier(0.035, 1.495, 0.625, 0.890);
+
+
+
+                            &.export {
+                                position: fixed;
+                                width: calc(100% - 460px);
+                                left: 20px;
+                                height: calc(100% + 34px);
+                            }
+
+                            &.paint {
+                                position: fixed;
+                                width: calc(100% - 210px);
+                                left: 210px;
+                                height: calc(100% + 34px);
+                            }
+
+                            // Return the true px size of a voxel based on the passed unit.
+                            @function getVoxelSize($size, $operator) {
+                                @return unquote($operator + $size * $voxelSize + px);    
+                            }
+
+                            // Function to set the orientation of a side
+                            @function setFaceOrientation($tx, $ty, $tz, $sx, $sy, $rx, $ry, $rz) {
+                                @return rotateX($rx + deg) rotateY($ry + deg) rotateZ($rz + deg) scaleX($sx) scaleY($sy) translate3d(unquote($tx + ',' + $ty + ',' + $tz)); 
+                            }
+
+                            .p_inner {
+                                position: absolute;
+                                left: 3px;
+                                top: 3px;
+                                overflow: hidden;
+                                width: calc(100% - 6px);
+                                height: calc(100% - 6px);
+                                border-radius: 10px;
+
+                                .button.zooms {
+                                    background: #25273E;
+                                    display: block;
+                                    color: #fff;
+                                    border: 0;
+                                    float: right;
+                                    margin: 4px 18px;
+                                    width: 30px;
+                                    clear: both;
+                                    text-align: center;
+                                    height: 30px;
+                                    line-height: 28px;
+                                    position: relative;
+                                    z-index: 2;
+                                    transform: scale(1);
+                                    transition: all 0.2s;
+
+                                    img {
+                                        margin: 5px 1px;
+                                        width: 16px;
+                                    }
+
+                                    &.hide {
+                                        opacity: 0;
+                                        pointer-events: none;
+                                    }
+
+                                    &:hover {
+                                        transform: scale(1.1);
+                                    }
+
+                                    &:after,
+                                    &:before {
+                                        display: none;
+                                    }
+
+                                    &.first {
+                                        margin-top: 19px;
+                                    }
+                                }
+
+                                .views {
+                                    position: absolute;
+                                    top: 12px;
+                                    left: 15px;
+                                    z-index: 1;
+                                    padding: 0 4px;
+
+                                    &.show {
+                                        background: $primary;
+                                        border-radius: 10px;
+
+                                        .button {
+                                            opacity: 1;
+                                            transform: translateY(0px);
+
+
+
+                                            @for $i from 1 through 14 {
+                                                &:nth-of-type(#{$i}) {
+                                                    transition:  color .3s, transform .5s ($i - 1) / 20 + .2s, opacity .5s ($i - 1) / 20 + .2s;
+
+                                                }
+                                            }
+                                        }
+                                    }
+
+                                    .button {
+                                        font-size: 15px;
+                                        display: inline-block;
+                                        margin: 0 10px;
+                                        transition: all .3s;
+                                        opacity: 0;
+                                        transform: translateY(16px);
+
+                                        @for $i from 1 through 14 {
+                                            &:nth-of-type(#{$i}) {
+                                                transition: color .3s, transform .0s ($i - 1) / 1222 + 0s, opacity .0s ($i - 1) / 1222 + 0s;
+
+                                            }
+                                        }
+
+                                        &.active {
+                                            color: $secondary;
+                                        }
+
+                                        &:after,
+                                        &:before {
+                                            display: none;
+                                        }
+
+                                    }
+                                }
+
+                                .resetZoom {
+                                    position: absolute;
+                                    z-index: 1;
+                                    right: 10px;
+                                    top: 8px;
+                                }
+
+                                .spin {
+                                    position: absolute;
+                                    z-index: 1;
+                                    right: 10px;
+                                    bottom: 8px;
+                                }
+
+                                .exportWrap {
+                                    height: 100%;
+                                    transform-origin: 50% 365px;
+                                    transform-style: preserve-3d;
+                                }
+
+                                .zoom {
+                                    transform: scale(1);
+                                    transform-origin: 50% calc(50% + -60px);
+                                    height: 415px;
+                                    transition: all .3s;
+
+                                }
+
+                                .model {
+                                    position: absolute;
+                                    left: -3px;
+                                    top: -96px;
+                                    width: 415px;
+                                    height: 140px;
+                                    transform-style: preserve-3d;
+                                    transition: all .3s cubic-bezier(0.035, 1.495, 0.625, 0.890);
+                                    transform: rotateY(90deg) rotateZ(0) rotatex(0deg);
+                                    transform-origin: 50% calc(905px / 2) calc(370px / 2);
+
+                                    .f {
+                                        @for $v from 1 through 6 {
+                                            $width: 1;
+                                            $height: 1;
+                                            $depth: 1;
+
+                                            &--f {
+                                                transform: setFaceOrientation(0, 0, getVoxelSize($depth / 2, ''), $height, $width, 0, 90, 0);
+                                            }
+
+                                            &--ba {
+                                                transform: setFaceOrientation(0, 0, getVoxelSize($depth / 2, '-'), $height, $width, 0, 90, 0);
+                                            }
+
+                                            &--t {
+                                                transform: setFaceOrientation(0, 0, getVoxelSize($height / 2, ''), $depth, $width, 0, 0, 0);
+                                            }
+
+                                            &--b {
+                                                transform: setFaceOrientation(0, 0, getVoxelSize($height / 2, '-'), $depth, $width, 0, 0, 0);
+                                            }
+
+                                            &--l {
+                                                transform: setFaceOrientation(0, 0, getVoxelSize($width / 2, ''), $depth, $height, 90, 0, 0);
+                                            }
+
+                                            &--r {
+                                                transform: setFaceOrientation(0, 0, getVoxelSize($width / 2, '-'), $depth, $height, 90, 0, 0);
+                                            }
+                                        }
+
+                                        &.paintable {
+                                            cursor: pointer;
+                                            box-shadow: 0 0 0 0px $secondary inset;
+                                            transition: all .3s;
+
+                                            &:hover {
+                                                box-shadow: 0 0 0 4px $secondary inset;
+                                            }
+                                        }
+                                    }
+
+                                    &.export,
+                                    &.paint {
+                                        position: fixed;
+                                        width: calc(100% + -60px);
+                                        left: 0;
+                                        height: calc(100% + 10px);
+                                    }
+
+                                    &.export {
+                                        width: calc(100%);
+                                    }
+
+                                    &.spin {
+                                        animation: spin 6s infinite linear;
+                                    }
+
+                                    &.extrude {
+                                        transform: scale(.8) rotateX(-30deg) rotateY(140deg) rotateZ(0deg);
+                                        top: -144px;
+                                    }
+
+                                    @keyframes spin {
+                                        from { transform: scale(1) rotateY(140deg) rotateZ(0deg) rotatex(0deg);}
+                                        to { transform: scale(1) rotateY(500deg) rotateZ(0deg) rotatex(0deg);}
+                                    }
+
+                                    %voxel {
+                                        position: absolute;
+                                        top: 50%;
+                                        transform-style: preserve-3d;
+                                        left: 0;
+                                        right: 0;
+                                        margin: auto;
+                                        width: 10px;
+                                    }
+
+                                    %face {
+                                        width: $voxelSize + px;
+                                        height: $voxelSize + px;
+                                        position: absolute;
+                                        transform-style: preserve-3d;
+                                        transform-origin: 50% 50%;
+                                        background: transparent; // Default color
+                                    }
+
+                                    .voxel,
+                                    .voxel-group {
+                                        @extend %voxel;
+                                    }
+
+                                    .v {
+
+                                        @extend %voxel;
+                                        & .f {
+                                            @extend %face;
+                                        }
+                                    }
+
+                                    // Utility classes
+
+                                    // Colors
+                                    $colors: [#de2b14, #d5713f, #ffda25, #2c4c35, #503d1f];
+
+                                    @each $color in $colors {
+                                        $class: #{$color};
+                                        $class: unquote(str_slice($class, 2));
+
+                                        .c-#{$class} {
+                                            .f {
+                                                @for $i from 1 through 6 {
+                                                    &:nth-of-type(#{$i}) {
+                                                        background-color: mix(white, $color, ($i - 1) * $shadingMixTolerance);
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+
+                                    @for $x from 0 through $maxX {
+                                        @for $y from 0 through $maxY {
+                                            .x-#{$x}.y-#{$y} {
+                                                transform: translateZ(getVoxelSize($x - 1, '')) translateY(getVoxelSize($y - 1, ''));
+                                            }
+                                        }
+                                    }
+
+                                    // Depths
+                                    // This can be done on a normal loop as depth will be limited
+
+
+
+                                    @for $i from 1 through $maximumDepth {
+                                        .d-#{$i} {
+                                            transform: translateX(23px * $i)
+                                        }
+
+                                        .g-#{$i} {
+                                            transform: translateX(-23px * ($i / 2))
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    &_left {
+                        width: 65%;
+                        float: left;
+
+                        &__header {
+                            width: 634px;
+                            transition: all .3s 0s;
+                            float: right;
+                            position: relative;
+                            left: 0;
+
+                            &.export {
+
+                                left: -196px;
+                                z-index: 2;
+                            }
+
+                            .e_buttons {
+                                float: right;
+                                position: relative;
+                                display: block;
+
+                                &.hide {
+                                    .button {
+                                        opacity: 0;
+                                        transform: translateY(0px);
+
+                                        @for $i from 1 through 5 {
+                                            &:nth-of-type(#{$i}) {
+                                                transition: transform .3s ($i - 1) / 30 + 0s, opacity .2s ($i - 1) / 30 + 0s;
+                                                transform: translateY(-30px);
+                                            }
+                                        }
+                                    }
+                                }
+
+                                .button {
+                                    display: inline-block;
+                                    width: 40px;
+
+                                    img {
+                                        width: 20px;
+                                        position: relative;
+                                        top: 1px;
+                                        left: 1px;
+                                    }
+
+                                    &:nth-of-type(1) {
+                                        img {
+                                            top: 0px;
+                                            left: 0px;
+                                        }
+                                    }
+
+                                    .tooltip {
+                                        left: -50px;
+                                    }
+
+                                    @for $i from 1 through 5 {
+                                        &:nth-of-type(#{$i}) {
+                                            transition: transform .3s ($i - 1) / 30 + .3s, opacity .2s ($i - 1) / 30 + .3s;
+                                        }
+                                    }
+                                }
+                            }
+
+                            .e_tabs {
+                                float: left;
+
+                                &__tab {
+                                    display: inline-block;
+                                    margin-bottom: 16px;
+                                    margin-right: 8px;
+                                    padding-left: 12px;
+                                    padding-right: 12px;
+                                    width: 64px;
+                                    text-align: center;
+
+                                    .tooltip {
+                                        left: -25px;
+                                    }
+                                }
+                            }
+                        }
+
+                        &__main {
+                            .m {
+                                &_palette {
+                                    float: left;
+                                    width: 211px;
+                                    transform: translateX(0px);
+                                    position: relative;
+                                    z-index: 1;
+                                    transition: transform .3s .2s cubic-bezier(0.035, 1.495, 0.625, 0.890), opacity .2s .2s;
+
+                                    .cPicker {
+                                        position: absolute;
+                                        border: 3px solid white;
+                                        border-radius: 7px;
+                                        height: 24px;
+                                        width: 24px;
+                                        line-height: 30px;
+                                        right: 42px;
+                                        cursor: pointer;
+                                        z-index:1;
+                                        text-align: center;
+                                        bottom: 36px;
+
+                                        svg {
+                                            height: 14px;
+                                        }
+
+                                        &.active {
+                                            svg path {
+                                                fill: $secondary;
+                                            }
+                                        }
+
+                                        svg path {
+                                            fill: white;
+                                        }    
+                                    }
+
+                                    .buttons {
+                                        margin: 51px 0 10px 16px;
+                                    }
+
+                                    .button {
+                                        display: inline-block;
+                                        margin: 5px;
+
+                                        .tooltip {
+                                            left: -50px;
+                                        }
+                                    }
+
+                                    &.palette--depth {
+                                        .hollowTip {
+                                            position: absolute;
+                                            width: 140px;
+
+                                            .button {
+                                                width: 40px;
+                                                text-align: center;
+                                            }
+
+                                            p {
+                                                font-size: 13px;
+                                                color: $secondary;
+                                                margin: 10px 0 0 6px;
+                                            }
+                                        }
+
+                                        .dpgrid,
+                                        .hollowTip{
+                                            opacity: 1;
+                                            transform: translateY(0);
+                                            transition: transform .3s 0s cubic-bezier(0.035, 1.495, 0.625, 0.890), opacity .2s 0s;
+
+                                            &.hide {
+                                                transform: translateY(20px);
+                                                opacity: 0;
+                                                pointer-events: none;
+                                            }
+                                        }
+
+                                        .hollowTip {
+                                            transition: transform .3s .2s cubic-bezier(0.035, 1.495, 0.625, 0.890), opacity .2s .2s;
+
+                                            &.hide {
+                                                transition: transform 0s 0s cubic-bezier(0.035, 1.495, 0.625, 0.890), opacity 0s 0s;
+                                            }
+                                        }
+
+                                        .dp-outer {
+                                            width: 150px;
+                                            padding-left: 15px;
+                                            margin-top: 52px;
+                                        }
+
+                                        .dp {
+                                            width: 40px;
+                                            height: 40px;
+                                            margin: 5px;
+                                            border-radius: 10px;
+                                            box-shadow: 0 0 0 3px white inset;
+                                            text-align: center;
+                                            float: left;
+                                            position: relative;
+                                            cursor: pointer;
+                                            line-height: 42px;
+                                            font-weight: 700;
+                                            transition: all .2s;
+
+                                            &:not(.active):hover {
+                                                transform: scale(1.1);
+                                                color: $primary;
+                                                background: white;
+                                            }
+
+                                            &.active {
+                                                color: $primary;
+                                                background: white;
+                                            }
+                                        }
+                                    }
+
+                                    &.hide {
+                                        opacity: 0;
+                                        pointer-events: none;
+                                        transform: translateX(-40px);
+                                        position: absolute;
+                                        transition: transform .3s 0s cubic-bezier(0.035, 1.495, 0.625, 0.890), opacity .2s 0s;
+                                    }
+
+
+                                }
+
+                                &_grid {
+                                    width: 634px;
+                                    box-shadow: 0 0 0 3px inset white;
+                                    border-radius: $borderRadius;
+                                    overflow: hidden;
+                                    transition: opacity 0.3s .1s;
+                                    opacity: 1;
+                                    position: relative;
+
+                                    .helper-x {
+                                        width: 316px;
+                                        height: 640px;
+                                        border-right: 2px dashed rgb(255 255 255 / 8%);
+                                        position: absolute;
+                                        pointer-events: none;
+                                        transition: all .3s;
+                                        z-index: 1;
+
+                                        &.active {
+                                            border-right: 2px dashed $secondary;
+                                        }
+                                    }
+
+                                    .helper-y {
+                                        width: 640px;
+                                        height: 316px;
+                                        border-bottom: 2px dashed rgb(255 255 255 / 8%);
+                                        position: absolute;
+                                        pointer-events: none;
+                                        transition: all .3s;
+                                        z-index: 1;
+
+                                        &.active {
+                                            border-bottom: 2px dashed $secondary;
+                                        }
+                                    }
+
+                                    &.loading {
+                                        width: 633px;
+                                        height: 633px;
+
+                                        img.loader {
+                                            transform: translateY(-50%) scale(1);
+                                        }
+                                    }
+
+                                    img.loader {
+                                        position: absolute;
+                                        left: 0;
+                                        right: 0;
+                                        margin: auto;
+                                        width: 30px;
+                                        z-index: 1;
+                                        top: 50%;
+                                        transform: translateY(-50%) scale(0);
+                                        transition: all 0.3s 0s cubic-bezier(0.035, 1.495, 0.625, 0.89);
+
+                                    }
+
+                                    &.hide {
+                                        opacity: 0;
+                                        transition: opacity 0.3s 0s;
+                                    }
+
+                                    &__pixel {
+                                        box-shadow: 0 0 0 1px inset rgba(255, 255, 255, 0.1);
+                                        float: left;
+                                        position: relative;
+                                        cursor: pointer;
+                                        width: 37.2px;
+                                        height: 37.2px;
+                                        
+                                        &:after {
+                                            display: block;
+                                            content: '';
+                                            position: absolute;
+                                            width: 100%;
+                                            height: 100%;
+                                            box-shadow: 0 0 0 3px #fff;
+                                            border-radius: 5px;
+                                            z-index: 2;
+                                            pointer-events: none;
+                                            opacity: 0;
+                                            transition: all .01s;
+                                        }
+
+                                        &:hover {
+                                            &:after {
+                                                opacity: 1;
+                                            }
+                                        }
+
+                                        .p {
+                                            position: absolute;
+                                            pointer-events: none;
+                                            width: 100%;
+                                            height: 100%;
+                                            left: 0;
+                                            top: 0;
+                                        }
+
+                                        .d {
+                                            position: absolute;
+                                            width: 100%;
+                                            text-align: center;
+                                            top: 50%;
+                                            transform: translateY(-50%);
+                                            display: none;
+                                            color: black;
+                                            font-weight: 700;
+                                            font-size: 16px;
+                                            pointer-events: none;
+
+
+
+                                            &.show {
+                                                display: block;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/volumes/README.markdown b/volumes/README.markdown
new file mode 100644
index 0000000..6692661
--- /dev/null
+++ b/volumes/README.markdown
@@ -0,0 +1,4 @@
+# Volumes
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/Gthibaud/pen/gOYwNPM](https://codepen.io/Gthibaud/pen/gOYwNPM).
+
+ 
\ No newline at end of file
diff --git a/volumes/dist/index.html b/volumes/dist/index.html
new file mode 100644
index 0000000..3438710
--- /dev/null
+++ b/volumes/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Volumes</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js'></script>
+<script src='http://zenozeng.github.io/p5.js-pdf/p5.pdf.js'></script>
+<script src='http://zenozeng.github.io/p5.js-pdf/examples/lib/p5.svg.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/volumes/dist/script.js b/volumes/dist/script.js
new file mode 100644
index 0000000..fde9e50
--- /dev/null
+++ b/volumes/dist/script.js
@@ -0,0 +1,40 @@
+let divisions = 3,
+  padding = 10,
+  cell_size,
+  total_cell;
+
+function setup() {
+  createCanvas(480, 480);
+  cell_size = (width - padding * 2) / divisions;
+  total_cell = divisions * divisions;
+  noLoop();
+  noStroke();
+}
+
+function draw() {
+  background(255);
+  for (let i = 0; i < total_cell; i++) {
+    let x = padding + (i % divisions) * cell_size,
+      y = padding + Math.floor(i / divisions) * cell_size;
+    translate(x + cell_size / 2, y + cell_size * 0.8);
+    scale(1, 0.6);
+    let curves = random(0.01, 0.1);
+    noiseSeed(i);
+    
+    let seed_offset = random(-200,200);
+    
+    total_steps = floor(cell_size / 6);
+    
+    for (let s = 0; s < total_steps; s++) {
+      fill(map(s, 0, total_steps, 0, 250));
+      if(s+1 == total_steps) fill(20);
+      let size = noise(seed_offset + s * curves) * cell_size * 0.8;
+
+      ellipse(0, -s * 6, size, size);
+    }
+    resetMatrix();
+  }
+}
+function mousePressed() {
+  redraw();
+}
\ No newline at end of file
diff --git a/volumes/dist/style.css b/volumes/dist/style.css
new file mode 100644
index 0000000..d0b0c80
--- /dev/null
+++ b/volumes/dist/style.css
@@ -0,0 +1,21 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+body {
+  background-color: rgba(0, 0, 0, 0.04);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+canvas {
+  flex-shrink: 0;
+  background-color: white;
+  object-fit: contain;
+  box-shadow: 0.2rem 0.1rem 0.4rem rgba(0, 0, 0, 0.2);
+  padding: 2rem;
+  border-radius: 3px;
+}
\ No newline at end of file
diff --git a/volumes/license.txt b/volumes/license.txt
new file mode 100644
index 0000000..7f2a159
--- /dev/null
+++ b/volumes/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Thibaud Goiffon (https://codepen.io/Gthibaud/pen/gOYwNPM)
+
+
+Fork of an original work by Thibaud Goiffon (https://codepen.io/Gthibaud/pen/YzKGowP)
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/volumes/src/index.html b/volumes/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/volumes/src/script.js b/volumes/src/script.js
new file mode 100644
index 0000000..4c08ef4
--- /dev/null
+++ b/volumes/src/script.js
@@ -0,0 +1,40 @@
+let divisions = 3,
+  padding = 10,
+  cell_size,
+  total_cell;
+
+function setup() {
+  createCanvas(480, 480);
+  cell_size = (width - padding * 2) / divisions;
+  total_cell = divisions * divisions;
+  noLoop();
+  noStroke();
+}
+
+function draw() {
+  background(255);
+  for (let i = 0; i < total_cell; i++) {
+    let x = padding + (i % divisions) * cell_size,
+      y = padding + Math.floor(i / divisions) * cell_size;
+    translate(x + cell_size / 2, y + cell_size * 0.8);
+    scale(1, 0.6);
+    let curves = random(0.01, 0.1);
+    noiseSeed(i);
+    
+    let seed_offset = random(-200,200);
+    
+    total_steps = floor(cell_size / 6);
+    
+    for (let s = 0; s < total_steps; s++) {
+      fill(map(s, 0, total_steps, 0, 250));
+      if(s+1 == total_steps) fill(20);
+      let size = noise(seed_offset + s * curves) * cell_size * 0.8;
+
+      ellipse(0, -s * 6, size, size);
+    }
+    resetMatrix();
+  }
+}
+function mousePressed() {
+  redraw();
+}
diff --git a/volumes/src/style.css b/volumes/src/style.css
new file mode 100644
index 0000000..d0b0c80
--- /dev/null
+++ b/volumes/src/style.css
@@ -0,0 +1,21 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+body {
+  background-color: rgba(0, 0, 0, 0.04);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+canvas {
+  flex-shrink: 0;
+  background-color: white;
+  object-fit: contain;
+  box-shadow: 0.2rem 0.1rem 0.4rem rgba(0, 0, 0, 0.2);
+  padding: 2rem;
+  border-radius: 3px;
+}
\ No newline at end of file
diff --git a/vortex-lines/README.markdown b/vortex-lines/README.markdown
new file mode 100644
index 0000000..6ca3918
--- /dev/null
+++ b/vortex-lines/README.markdown
@@ -0,0 +1,5 @@
+# Vortex Lines
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/ste-vg/pen/xxdRPbV](https://codepen.io/ste-vg/pen/xxdRPbV).
+
+
diff --git a/vortex-lines/dist/index.html b/vortex-lines/dist/index.html
new file mode 100644
index 0000000..ecf49a6
--- /dev/null
+++ b/vortex-lines/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Vortex Lines</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container" id="webgl"></div>
+<!-- partial -->
+  <script src='https://codepen.io/ste-vg/pen/zBVakw.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/three.meshline/1.3.0/THREE.MeshLine.js'></script>
+<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
+<script src='https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/vortex-lines/dist/script.js b/vortex-lines/dist/script.js
new file mode 100644
index 0000000..3d9ad5d
--- /dev/null
+++ b/vortex-lines/dist/script.js
@@ -0,0 +1,162 @@
+"use strict";
+console.clear();
+class Stage {
+    constructor(mount) {
+        this.container = mount;
+        this.lines = [];
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color('black');
+        this.tickFunctions = [];
+        this.size = {
+            width: 1,
+            height: 1
+        };
+        this.setupCamera();
+        this.setupRenderer();
+        this.onResize();
+        window.addEventListener('resize', () => this.onResize());
+        this.tick();
+    }
+    setupCamera() {
+        this.lookAt = new THREE.Vector3(0, 0, 0);
+        this.camera = new THREE.PerspectiveCamera(40, this.size.width / this.size.height, 0.1, 150);
+        this.camera.position.set(0, 80, 100);
+        this.camera.home = {
+            position: Object.assign({}, this.camera.position)
+        };
+        this.add(this.camera);
+    }
+    setupRenderer() {
+        this.renderer = new THREE.WebGLRenderer({
+            canvas: this.canvas,
+            antialias: true,
+        });
+        this.container.appendChild(this.renderer.domElement);
+    }
+    onResize() {
+        this.size.width = this.container.clientWidth;
+        this.size.height = this.container.clientHeight;
+        this.camera.aspect = this.size.width / this.size.height;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(this.size.width, this.size.height);
+        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    }
+    addTickFunction(tickFunction) {
+        this.tickFunctions.push(tickFunction);
+    }
+    tick() {
+        this.camera.lookAt(this.lookAt);
+        this.tickFunctions.forEach(func => func());
+        this.renderer.render(this.scene, this.camera);
+        window.requestAnimationFrame(() => this.tick());
+    }
+    add(element) { this.scene.add(element); }
+    destroy() {
+        this.container.removeChild(this.renderer.domElement);
+        window.removeEventListener('resize', this.onResize);
+    }
+}
+class Line {
+    constructor(width, color, radius, near, far) {
+        this.color = color;
+        this.width = width;
+        this.radius = radius;
+        this.near = near;
+        this.far = far;
+        this.dashLength = 5;
+        this.travelDistance = 1;
+        this.mesh = null;
+        this.createLine();
+    }
+    createLine() {
+        const points = [];
+        var angle = Math.random() * TAU;
+        this.radius += Math.random() * 0.1;
+        let pos = {
+            x: Math.cos(angle) * this.radius,
+            y: 0,
+            z: Math.sin(angle) * this.radius
+        };
+        let direction = angle + 1 + (Math.random() * 0.1);
+        let y = 0;
+        const steps = 75;
+        for (let j = 0; j < steps; j++) {
+            direction += (0.012 * ((steps - j) * 0.1)) + (-0.4 + Math.random() * 0.8) * (j * (Math.random() * 0.02));
+            y += (-1 + Math.random() * 2) * (j * 0.001);
+            pos.x += Math.cos(direction) * this.travelDistance;
+            pos.y += Math.sin(y) * this.travelDistance;
+            pos.z += Math.sin(direction) * this.travelDistance;
+            points.push(pos.x, pos.y, pos.z);
+        }
+        const line = new MeshLine();
+        line.setPoints(points, p => this.width * Math.pow(1 - Math.cos(TAU * p), 0.3));
+        const material = new MeshLineMaterial({
+            color: new THREE.Color(this.color),
+            transparent: true,
+            depthTest: false,
+            dashArray: this.dashLength,
+            dashOffset: 0,
+            dashRatio: 0.92
+        });
+        this.mesh = new THREE.Mesh(line, material);
+        setTimeout(() => {
+            const delayedStart = Math.random() > 0.3;
+            if (delayedStart)
+                setTimeout(() => this.animate(), 100 + Math.random() * 4000);
+            else
+                this.animate(false);
+        }, 1000);
+    }
+    animate(slow = true) {
+        const duration = (slow ? 4 : 3) + Math.random() * 1;
+        const ease = 'power4.inOut';
+        const brightness = slow ? .8 : 1;
+        gsap.fromTo(this.mesh.material.uniforms.dashOffset, { value: 0 }, {
+            value: -this.dashLength * 0.3,
+            duration,
+            ease,
+            onComplete: () => setTimeout(() => this.animate(), Math.random() * 4000)
+        });
+        const color = this.mesh.material.uniforms.color.value;
+        gsap.fromTo(color, { r: 0, g: 0, b: 0, }, {
+            motionPath: [
+                {
+                    r: color.r + brightness,
+                    g: color.g + brightness,
+                    b: color.b + brightness,
+                },
+                {
+                    r: color.r,
+                    g: color.g,
+                    b: color.b,
+                }
+            ],
+            duration: duration * 0.5,
+            ease: 'power2.in'
+        });
+    }
+}
+const TAU = Math.PI * 2;
+const colors = ["#f94144", "#f3722c", "#f8961e", "#f9844a", "#f9c74f", "#90be6d", "#43aa8b", "#4d908e", "#577590", "#277da1"];
+const canvas = document.getElementById('webgl');
+const stage = new Stage(canvas);
+const lineGroup = new THREE.Group();
+lineGroup.rotation.y = Math.PI;
+stage.add(lineGroup);
+for (let i = 0; i < 600; i++) {
+    const lineThickness = 0.1 + Math.random() * 0.1;
+    const startRadius = 2 + Math.random() * 0.5;
+    const lineColor = colors[Math.floor(Math.random() * colors.length)];
+    const line = new Line(lineThickness, lineColor, startRadius, stage.camera.near, stage.camera.far);
+    lineGroup.add(line.mesh);
+    stage.lines.push({
+        obj: line,
+        speed: 0.002 + Math.random() * 0.009
+    });
+}
+const tick = () => {
+    lineGroup.rotation.y += 0.01;
+    lineGroup.rotation.x = Math.cos(lineGroup.rotation.y * 1.2) * 0.5;
+    lineGroup.rotation.z = Math.sin(lineGroup.rotation.y) * 0.01;
+};
+stage.addTickFunction(tick);
\ No newline at end of file
diff --git a/vortex-lines/dist/style.css b/vortex-lines/dist/style.css
new file mode 100644
index 0000000..818a7e4
--- /dev/null
+++ b/vortex-lines/dist/style.css
@@ -0,0 +1,13 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+}
\ No newline at end of file
diff --git a/vortex-lines/license.txt b/vortex-lines/license.txt
new file mode 100644
index 0000000..3690369
--- /dev/null
+++ b/vortex-lines/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Steve Gardner (https://codepen.io/ste-vg/pen/xxdRPbV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/vortex-lines/src/index.html b/vortex-lines/src/index.html
new file mode 100644
index 0000000..5008789
--- /dev/null
+++ b/vortex-lines/src/index.html
@@ -0,0 +1 @@
+<div class="container" id="webgl"></div>
\ No newline at end of file
diff --git a/vortex-lines/src/script.ts b/vortex-lines/src/script.ts
new file mode 100644
index 0000000..7926e17
--- /dev/null
+++ b/vortex-lines/src/script.ts
@@ -0,0 +1,218 @@
+console.clear();
+
+class Stage {
+
+  constructor(mount) {
+
+    this.container = mount;
+    this.lines = [];
+      
+    this.scene = new THREE.Scene();
+    this.scene.background = new THREE.Color( 'black' );
+    
+    this.tickFunctions = [];
+
+    this.size = {
+      width: 1,
+      height: 1
+    }
+
+    this.setupCamera();
+    this.setupRenderer();
+    this.onResize();
+    window.addEventListener('resize', () => this.onResize());
+    
+    this.tick();
+  }
+
+  setupCamera() {
+
+    this.lookAt = new THREE.Vector3(0, 0, 0);
+    this.camera = new THREE.PerspectiveCamera(40, this.size.width / this.size.height, 0.1, 150);
+    this.camera.position.set(0, 80, 100);
+    this.camera.home = {
+      position: { ...this.camera.position }
+    }
+    
+    this.add(this.camera);
+  }
+
+  setupRenderer() {
+
+    this.renderer = new THREE.WebGLRenderer({
+      canvas: this.canvas,
+      antialias: true,
+      
+    })
+    
+	  this.container.appendChild( this.renderer.domElement );
+  }
+
+  onResize() {
+  
+    this.size.width = this.container.clientWidth;
+    this.size.height = this.container.clientHeight;
+    
+    this.camera.aspect = this.size.width / this.size.height
+    this.camera.updateProjectionMatrix()
+
+    this.renderer.setSize(this.size.width, this.size.height)
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+  }
+
+  addTickFunction(tickFunction)
+  {
+    this.tickFunctions.push(tickFunction)
+  }
+
+  tick() {
+    this.camera.lookAt(this.lookAt);
+    this.tickFunctions.forEach(func => func())
+    this.renderer.render(this.scene, this.camera);
+    window.requestAnimationFrame(() => this.tick())
+  }
+
+  add(element) { this.scene.add(element);}
+
+  destroy() {
+
+    this.container.removeChild( this.renderer.domElement);
+    window.removeEventListener('resize', this.onResize);
+  }
+}
+
+class Line 
+{
+  constructor(width, color, radius, near, far) {
+    this.color = color;
+    this.width = width;
+    this.radius = radius;
+    this.near = near;
+    this.far = far;
+    this.dashLength = 5 ;
+    this.travelDistance = 1;
+    this.mesh = null;
+    this.createLine()
+  }
+
+  createLine()
+  {
+    const points = [];
+    var angle = Math.random() * TAU
+    this.radius += Math.random() * 0.1
+
+    let pos = {
+      x: Math.cos(angle) * this.radius, 
+      y: 0,
+      z: Math.sin(angle) * this.radius
+    }
+
+    let direction = angle + 1 + (Math.random() * 0.1);
+    let y = 0;
+
+    const steps = 75;
+
+     for (let j = 0; j < steps; j ++) {
+   
+      direction += (0.012 * ((steps - j) * 0.1)) + (-0.4 + Math.random() * 0.8 ) * (j * (Math.random() * 0.02));
+      y += (-1 + Math.random() * 2)  * (j * 0.001);
+
+      pos.x += Math.cos(direction) * this.travelDistance 
+      pos.y += Math.sin(y) * this.travelDistance
+      pos.z += Math.sin(direction) * this.travelDistance
+
+      points.push(pos.x, pos.y, pos.z);
+    }
+
+    const line = new MeshLine();
+    line.setPoints(points,  p => this.width * Math.pow(1 - Math.cos(TAU * p), 0.3)  );
+
+    const material = new MeshLineMaterial({
+      color: new THREE.Color(this.color),
+      transparent: true,
+      depthTest: false,
+      dashArray: this.dashLength,
+      dashOffset: 0,
+      dashRatio: 0.92
+    });
+
+    this.mesh = new THREE.Mesh(line, material);
+
+    setTimeout(() => {
+      const delayedStart = Math.random() > 0.3;
+      if(delayedStart) setTimeout(() => this.animate(), 100 + Math.random() * 4000)
+      else this.animate(false)
+    }, 1000)
+  }
+
+  animate(slow = true) 
+  {
+    const duration = (slow ? 4 : 3) + Math.random() * 1;
+    const ease = 'power4.inOut';
+    const brightness = slow ? .8 : 1;
+
+    gsap.fromTo(this.mesh.material.uniforms.dashOffset, 
+      { value: 0 },
+      {
+        value: -this.dashLength * 0.3, 
+        duration, 
+        ease,
+        onComplete: () => setTimeout(() => this.animate(), Math.random() * 4000)
+      })
+    const color = this.mesh.material.uniforms.color.value;
+    gsap.fromTo(color, { r: 0, g: 0, b: 0, }, {
+      motionPath: [
+        {
+          r: color.r + brightness, 
+          g: color.g + brightness, 
+          b: color.b + brightness, 
+        },
+        {
+          r: color.r, 
+          g: color.g, 
+          b: color.b, 
+        }
+      ],
+      duration: duration * 0.5, 
+      ease: 'power2.in'
+    })
+  }
+}
+
+const TAU = Math.PI * 2;
+const colors = ["#f94144","#f3722c","#f8961e","#f9844a","#f9c74f","#90be6d","#43aa8b","#4d908e","#577590","#277da1"]
+
+const canvas = document.getElementById('webgl');
+const stage = new Stage(canvas);
+
+const lineGroup = new THREE.Group();
+lineGroup.rotation.y = Math.PI
+stage.add(lineGroup);
+
+for (let i = 0; i < 600; i++) {
+
+  const lineThickness = 0.1 + Math.random() * 0.1;
+  const startRadius = 2 + Math.random() * 0.5;
+  const lineColor = colors[Math.floor(Math.random() * colors.length)];
+
+  const line = new Line(
+    lineThickness,
+    lineColor,
+    startRadius,
+    stage.camera.near,
+    stage.camera.far
+  )
+  lineGroup.add(line.mesh);
+  stage.lines.push({
+    obj: line,
+    speed: 0.002 + Math.random() * 0.009
+  });
+}
+
+const tick = () => {
+  lineGroup.rotation.y += 0.01;
+  lineGroup.rotation.x = Math.cos(lineGroup.rotation.y * 1.2) * 0.5;
+  lineGroup.rotation.z = Math.sin(lineGroup.rotation.y) * 0.01;
+}
+
+stage.addTickFunction(tick)
\ No newline at end of file
diff --git a/vortex-lines/src/style.scss b/vortex-lines/src/style.scss
new file mode 100644
index 0000000..762ebd2
--- /dev/null
+++ b/vortex-lines/src/style.scss
@@ -0,0 +1,14 @@
+html, body
+{
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+	background-color: black;
+}
\ No newline at end of file
diff --git a/voyage-slider-gsap/README.markdown b/voyage-slider-gsap/README.markdown
new file mode 100644
index 0000000..0425799
--- /dev/null
+++ b/voyage-slider-gsap/README.markdown
@@ -0,0 +1,5 @@
+# Voyage Slider | GSAP
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/dev_loop/pen/MWKbJmO](https://codepen.io/dev_loop/pen/MWKbJmO).
+
+Inspired by this design: https://dribbble.com/shots/6759822-Voyage-travel-website
diff --git a/voyage-slider-gsap/dist/index.html b/voyage-slider-gsap/dist/index.html
new file mode 100644
index 0000000..c81c185
--- /dev/null
+++ b/voyage-slider-gsap/dist/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Voyage Slider | GSAP</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap"rel="stylesheet'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="app">
+
+	<div class="cardList">
+		<button class="cardList__btn btn btn--left">
+			<div class="icon">
+				<svg>
+					<use xlink:href="#arrow-left"></use>
+				</svg>
+			</div>
+		</button>
+
+		<div class="cards__wrapper">
+			<div class="card current--card">
+				<div class="card__image">
+					<img src="https://source.unsplash.com/Z8dtTatMVMw" alt="" />
+				</div>
+			</div>
+
+			<div class="card next--card">
+				<div class="card__image">
+					<img src="https://source.unsplash.com/9dmycbFE7mQ" alt="" />
+				</div>
+			</div>
+
+			<div class="card previous--card">
+				<div class="card__image">
+					<img src="https://source.unsplash.com/m7K4KzL5aQ8" alt="" />
+				</div>
+			</div>
+		</div>
+
+		<button class="cardList__btn btn btn--right">
+			<div class="icon">
+				<svg>
+					<use xlink:href="#arrow-right"></use>
+				</svg>
+			</div>
+		</button>
+	</div>
+
+	<div class="infoList">
+		<div class="info__wrapper">
+			<div class="info current--info">
+				<h1 class="text name">Highlands</h1>
+				<h4 class="text location">Scotland</h4>
+				<p class="text description">The mountains are calling</p>
+			</div>
+
+			<div class="info next--info">
+				<h1 class="text name">Machu Pichu</h1>
+				<h4 class="text location">Peru</h4>
+				<p class="text description">Adventure is never far away</p>
+			</div>
+
+			<div class="info previous--info">
+				<h1 class="text name">Chamonix</h1>
+				<h4 class="text location">France</h4>
+				<p class="text description">Let your dreams come true</p>
+			</div>
+		</div>
+	</div>
+
+
+	<div class="app__bg">
+		<div class="app__bg__image current--image">
+			<img src="https://source.unsplash.com/Z8dtTatMVMw" alt="" />
+		</div>
+		<div class="app__bg__image next--image">
+			<img src="https://source.unsplash.com/9dmycbFE7mQ" alt="" />
+		</div>
+		<div class="app__bg__image previous--image">
+			<img src="https://source.unsplash.com/m7K4KzL5aQ8" alt="" />
+		</div>
+	</div>
+</div>
+
+<div class="loading__wrapper">
+	<div class="loader--text">Loading...</div>
+	<div class="loader">
+		<span></span>
+	</div>
+</div>
+
+
+<svg class="icons" style="display: none;">
+	<symbol id="arrow-left" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+		<polyline points='328 112 184 256 328 400'
+					 style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
+	</symbol>
+	<symbol id="arrow-right" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+		<polyline points='184 112 328 256 184 400'
+					 style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
+	</symbol>
+</svg>
+
+
+
+
+
+
+
+
+
+
+
+<div class="support">
+	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
+	<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/voyage-slider-gsap/dist/script.js b/voyage-slider-gsap/dist/script.js
new file mode 100644
index 0000000..ae6b60d
--- /dev/null
+++ b/voyage-slider-gsap/dist/script.js
@@ -0,0 +1,255 @@
+console.clear();
+
+const { gsap, imagesLoaded } = window;
+
+const buttons = {
+	prev: document.querySelector(".btn--left"),
+	next: document.querySelector(".btn--right"),
+};
+const cardsContainerEl = document.querySelector(".cards__wrapper");
+const appBgContainerEl = document.querySelector(".app__bg");
+
+const cardInfosContainerEl = document.querySelector(".info__wrapper");
+
+buttons.next.addEventListener("click", () => swapCards("right"));
+
+buttons.prev.addEventListener("click", () => swapCards("left"));
+
+function swapCards(direction) {
+	const currentCardEl = cardsContainerEl.querySelector(".current--card");
+	const previousCardEl = cardsContainerEl.querySelector(".previous--card");
+	const nextCardEl = cardsContainerEl.querySelector(".next--card");
+
+	const currentBgImageEl = appBgContainerEl.querySelector(".current--image");
+	const previousBgImageEl = appBgContainerEl.querySelector(".previous--image");
+	const nextBgImageEl = appBgContainerEl.querySelector(".next--image");
+
+	changeInfo(direction);
+	swapCardsClass();
+
+	removeCardEvents(currentCardEl);
+
+	function swapCardsClass() {
+		currentCardEl.classList.remove("current--card");
+		previousCardEl.classList.remove("previous--card");
+		nextCardEl.classList.remove("next--card");
+
+		currentBgImageEl.classList.remove("current--image");
+		previousBgImageEl.classList.remove("previous--image");
+		nextBgImageEl.classList.remove("next--image");
+
+		currentCardEl.style.zIndex = "50";
+		currentBgImageEl.style.zIndex = "-2";
+
+		if (direction === "right") {
+			previousCardEl.style.zIndex = "20";
+			nextCardEl.style.zIndex = "30";
+
+			nextBgImageEl.style.zIndex = "-1";
+
+			currentCardEl.classList.add("previous--card");
+			previousCardEl.classList.add("next--card");
+			nextCardEl.classList.add("current--card");
+
+			currentBgImageEl.classList.add("previous--image");
+			previousBgImageEl.classList.add("next--image");
+			nextBgImageEl.classList.add("current--image");
+		} else if (direction === "left") {
+			previousCardEl.style.zIndex = "30";
+			nextCardEl.style.zIndex = "20";
+
+			previousBgImageEl.style.zIndex = "-1";
+
+			currentCardEl.classList.add("next--card");
+			previousCardEl.classList.add("current--card");
+			nextCardEl.classList.add("previous--card");
+
+			currentBgImageEl.classList.add("next--image");
+			previousBgImageEl.classList.add("current--image");
+			nextBgImageEl.classList.add("previous--image");
+		}
+	}
+}
+
+function changeInfo(direction) {
+	let currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
+	let previousInfoEl = cardInfosContainerEl.querySelector(".previous--info");
+	let nextInfoEl = cardInfosContainerEl.querySelector(".next--info");
+
+	gsap.timeline()
+		.to([buttons.prev, buttons.next], {
+		duration: 0.2,
+		opacity: 0.5,
+		pointerEvents: "none",
+	})
+		.to(
+		currentInfoEl.querySelectorAll(".text"),
+		{
+			duration: 0.4,
+			stagger: 0.1,
+			translateY: "-120px",
+			opacity: 0,
+		},
+		"-="
+	)
+		.call(() => {
+		swapInfosClass(direction);
+	})
+		.call(() => initCardEvents())
+		.fromTo(
+		direction === "right"
+		? nextInfoEl.querySelectorAll(".text")
+		: previousInfoEl.querySelectorAll(".text"),
+		{
+			opacity: 0,
+			translateY: "40px",
+		},
+		{
+			duration: 0.4,
+			stagger: 0.1,
+			translateY: "0px",
+			opacity: 1,
+		}
+	)
+		.to([buttons.prev, buttons.next], {
+		duration: 0.2,
+		opacity: 1,
+		pointerEvents: "all",
+	});
+
+	function swapInfosClass() {
+		currentInfoEl.classList.remove("current--info");
+		previousInfoEl.classList.remove("previous--info");
+		nextInfoEl.classList.remove("next--info");
+
+		if (direction === "right") {
+			currentInfoEl.classList.add("previous--info");
+			nextInfoEl.classList.add("current--info");
+			previousInfoEl.classList.add("next--info");
+		} else if (direction === "left") {
+			currentInfoEl.classList.add("next--info");
+			nextInfoEl.classList.add("previous--info");
+			previousInfoEl.classList.add("current--info");
+		}
+	}
+}
+
+function updateCard(e) {
+	const card = e.currentTarget;
+	const box = card.getBoundingClientRect();
+	const centerPosition = {
+		x: box.left + box.width / 2,
+		y: box.top + box.height / 2,
+	};
+	let angle = Math.atan2(e.pageX - centerPosition.x, 0) * (35 / Math.PI);
+	gsap.set(card, {
+		"--current-card-rotation-offset": `${angle}deg`,
+	});
+	const currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
+	gsap.set(currentInfoEl, {
+		rotateY: `${angle}deg`,
+	});
+}
+
+function resetCardTransforms(e) {
+	const card = e.currentTarget;
+	const currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
+	gsap.set(card, {
+		"--current-card-rotation-offset": 0,
+	});
+	gsap.set(currentInfoEl, {
+		rotateY: 0,
+	});
+}
+
+function initCardEvents() {
+	const currentCardEl = cardsContainerEl.querySelector(".current--card");
+	currentCardEl.addEventListener("pointermove", updateCard);
+	currentCardEl.addEventListener("pointerout", (e) => {
+		resetCardTransforms(e);
+	});
+}
+
+initCardEvents();
+
+function removeCardEvents(card) {
+	card.removeEventListener("pointermove", updateCard);
+}
+
+function init() {
+
+	let tl = gsap.timeline();
+
+	tl.to(cardsContainerEl.children, {
+		delay: 0.15,
+		duration: 0.5,
+		stagger: {
+			ease: "power4.inOut",
+			from: "right",
+			amount: 0.1,
+		},
+		"--card-translateY-offset": "0%",
+	})
+		.to(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), {
+		delay: 0.5,
+		duration: 0.4,
+		stagger: 0.1,
+		opacity: 1,
+		translateY: 0,
+	})
+		.to(
+		[buttons.prev, buttons.next],
+		{
+			duration: 0.4,
+			opacity: 1,
+			pointerEvents: "all",
+		},
+		"-=0.4"
+	);
+}
+
+const waitForImages = () => {
+	const images = [...document.querySelectorAll("img")];
+	const totalImages = images.length;
+	let loadedImages = 0;
+	const loaderEl = document.querySelector(".loader span");
+
+	gsap.set(cardsContainerEl.children, {
+		"--card-translateY-offset": "100vh",
+	});
+	gsap.set(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), {
+		translateY: "40px",
+		opacity: 0,
+	});
+	gsap.set([buttons.prev, buttons.next], {
+		pointerEvents: "none",
+		opacity: "0",
+	});
+
+	images.forEach((image) => {
+		imagesLoaded(image, (instance) => {
+			if (instance.isComplete) {
+				loadedImages++;
+				let loadProgress = loadedImages / totalImages;
+
+				gsap.to(loaderEl, {
+					duration: 1,
+					scaleX: loadProgress,
+					backgroundColor: `hsl(${loadProgress * 120}, 100%, 50%`,
+				});
+
+				if (totalImages == loadedImages) {
+					gsap.timeline()
+						.to(".loading__wrapper", {
+						duration: 0.8,
+						opacity: 0,
+						pointerEvents: "none",
+					})
+						.call(() => init());
+				}
+			}
+		});
+	});
+};
+
+waitForImages();
\ No newline at end of file
diff --git a/voyage-slider-gsap/dist/style.css b/voyage-slider-gsap/dist/style.css
new file mode 100644
index 0000000..b112e60
--- /dev/null
+++ b/voyage-slider-gsap/dist/style.css
@@ -0,0 +1,319 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap");
+:root {
+  --card-width: 200px;
+  --card-height: 300px;
+  --card-transition-duration: 800ms;
+  --card-transition-easing: ease;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.787);
+  overflow: hidden;
+}
+
+button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+button:focus {
+  outline: none;
+  border: none;
+}
+
+.app {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.app__bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -5;
+  filter: blur(8px);
+  pointer-events: none;
+  user-select: none;
+  overflow: hidden;
+}
+.app__bg::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  z-index: 1;
+  opacity: 0.8;
+}
+.app__bg__image {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) translateX(var(--image-translate-offset, 0));
+  width: 180%;
+  height: 180%;
+  transition: transform 1000ms ease, opacity 1000ms ease;
+  overflow: hidden;
+}
+.app__bg__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.app__bg__image.current--image {
+  opacity: 1;
+  --image-translate-offset: 0;
+}
+.app__bg__image.previous--image, .app__bg__image.next--image {
+  opacity: 0;
+}
+.app__bg__image.previous--image {
+  --image-translate-offset: -25%;
+}
+.app__bg__image.next--image {
+  --image-translate-offset: 25%;
+}
+
+.cardList {
+  position: absolute;
+  width: calc(3 * var(--card-width));
+  height: auto;
+}
+.cardList__btn {
+  --btn-size: 35px;
+  width: var(--btn-size);
+  height: var(--btn-size);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+}
+.cardList__btn.btn--left {
+  left: -5%;
+}
+.cardList__btn.btn--right {
+  right: -5%;
+}
+.cardList__btn .icon {
+  width: 100%;
+  height: 100%;
+}
+.cardList__btn .icon svg {
+  width: 100%;
+  height: 100%;
+}
+.cardList .cards__wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  perspective: 1000px;
+}
+
+.card {
+  --card-translateY-offset: 100vh;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) translateX(var(--card-translateX-offset)) translateY(var(--card-translateY-offset)) rotateY(var(--card-rotation-offset)) scale(var(--card-scale-offset));
+  display: inline-block;
+  width: var(--card-width);
+  height: var(--card-height);
+  transition: transform var(--card-transition-duration) var(--card-transition-easing);
+  user-select: none;
+}
+.card::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  z-index: 1;
+  transition: opacity var(--card-transition-duration) var(--card-transition-easing);
+  opacity: calc(1 - var(--opacity));
+}
+.card__image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.card__image img {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.card.current--card {
+  --current-card-rotation-offset: 0;
+  --card-translateX-offset: 0;
+  --card-rotation-offset: var(--current-card-rotation-offset);
+  --card-scale-offset: 1.2;
+  --opacity: 0.8;
+}
+.card.previous--card {
+  --card-translateX-offset: calc(-1 * var(--card-width) * 1.1);
+  --card-rotation-offset: 25deg;
+}
+.card.next--card {
+  --card-translateX-offset: calc(var(--card-width) * 1.1);
+  --card-rotation-offset: -25deg;
+}
+.card.previous--card, .card.next--card {
+  --card-scale-offset: 0.9;
+  --opacity: 0.4;
+}
+
+.infoList {
+  position: absolute;
+  width: calc(3 * var(--card-width));
+  height: var(--card-height);
+  pointer-events: none;
+}
+.infoList .info__wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-end;
+  perspective: 1000px;
+  transform-style: preserve-3d;
+}
+
+.info {
+  margin-bottom: calc(var(--card-height) / 8);
+  margin-left: calc(var(--card-width) / 1.5);
+  transform: translateZ(2rem);
+  transition: transform var(--card-transition-duration) var(--card-transition-easing);
+}
+.info .text {
+  position: relative;
+  font-family: "Montserrat";
+  font-size: calc(var(--card-width) * var(--text-size-offset, 0.2));
+  white-space: nowrap;
+  color: #fff;
+  width: fit-content;
+}
+.info .name,
+.info .location {
+  text-transform: uppercase;
+}
+.info .location {
+  font-weight: 800;
+}
+.info .location {
+  --mg-left: 40px;
+  --text-size-offset: 0.12;
+  font-weight: 600;
+  margin-left: var(--mg-left);
+  margin-bottom: calc(var(--mg-left) / 2);
+  padding-bottom: 0.8rem;
+}
+.info .location::before, .info .location::after {
+  content: "";
+  position: absolute;
+  background: #fff;
+  left: 0%;
+  transform: translate(calc(-1 * var(--mg-left)), -50%);
+}
+.info .location::before {
+  top: 50%;
+  width: 20px;
+  height: 5px;
+}
+.info .location::after {
+  bottom: 0;
+  width: 60px;
+  height: 2px;
+}
+.info .description {
+  --text-size-offset: 0.065;
+  font-weight: 500;
+}
+.info.current--info {
+  opacity: 1;
+  display: block;
+}
+.info.previous--info, .info.next--info {
+  opacity: 0;
+  display: none;
+}
+
+.loading__wrapper {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #000;
+  z-index: 200;
+}
+.loading__wrapper .loader--text {
+  color: #fff;
+  font-family: "Montserrat";
+  font-weight: 500;
+  margin-bottom: 1.4rem;
+}
+.loading__wrapper .loader {
+  position: relative;
+  width: 200px;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.25);
+}
+.loading__wrapper .loader span {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: red;
+  transform: scaleX(0);
+  transform-origin: left;
+}
+
+@media only screen and (min-width: 800px) {
+  :root {
+    --card-width: 250px;
+    --card-height: 400px;
+  }
+}
+.support {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  padding: 10px;
+  display: flex;
+}
+.support a {
+  margin: 0 10px;
+  color: #fff;
+  font-size: 1.8rem;
+  backface-visibility: hidden;
+  transition: all 150ms ease;
+}
+.support a:hover {
+  transform: scale(1.1);
+}
\ No newline at end of file
diff --git a/voyage-slider-gsap/license.txt b/voyage-slider-gsap/license.txt
new file mode 100644
index 0000000..cadf226
--- /dev/null
+++ b/voyage-slider-gsap/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Sikriti Dakua (https://codepen.io/dev_loop/pen/MWKbJmO)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/voyage-slider-gsap/src/index.html b/voyage-slider-gsap/src/index.html
new file mode 100644
index 0000000..eb55158
--- /dev/null
+++ b/voyage-slider-gsap/src/index.html
@@ -0,0 +1,110 @@
+
+<div class="app">
+
+	<div class="cardList">
+		<button class="cardList__btn btn btn--left">
+			<div class="icon">
+				<svg>
+					<use xlink:href="#arrow-left"></use>
+				</svg>
+			</div>
+		</button>
+
+		<div class="cards__wrapper">
+			<div class="card current--card">
+				<div class="card__image">
+					<img src="https://source.unsplash.com/Z8dtTatMVMw" alt="" />
+				</div>
+			</div>
+
+			<div class="card next--card">
+				<div class="card__image">
+					<img src="https://source.unsplash.com/9dmycbFE7mQ" alt="" />
+				</div>
+			</div>
+
+			<div class="card previous--card">
+				<div class="card__image">
+					<img src="https://source.unsplash.com/m7K4KzL5aQ8" alt="" />
+				</div>
+			</div>
+		</div>
+
+		<button class="cardList__btn btn btn--right">
+			<div class="icon">
+				<svg>
+					<use xlink:href="#arrow-right"></use>
+				</svg>
+			</div>
+		</button>
+	</div>
+
+	<div class="infoList">
+		<div class="info__wrapper">
+			<div class="info current--info">
+				<h1 class="text name">Highlands</h1>
+				<h4 class="text location">Scotland</h4>
+				<p class="text description">The mountains are calling</p>
+			</div>
+
+			<div class="info next--info">
+				<h1 class="text name">Machu Pichu</h1>
+				<h4 class="text location">Peru</h4>
+				<p class="text description">Adventure is never far away</p>
+			</div>
+
+			<div class="info previous--info">
+				<h1 class="text name">Chamonix</h1>
+				<h4 class="text location">France</h4>
+				<p class="text description">Let your dreams come true</p>
+			</div>
+		</div>
+	</div>
+
+
+	<div class="app__bg">
+		<div class="app__bg__image current--image">
+			<img src="https://source.unsplash.com/Z8dtTatMVMw" alt="" />
+		</div>
+		<div class="app__bg__image next--image">
+			<img src="https://source.unsplash.com/9dmycbFE7mQ" alt="" />
+		</div>
+		<div class="app__bg__image previous--image">
+			<img src="https://source.unsplash.com/m7K4KzL5aQ8" alt="" />
+		</div>
+	</div>
+</div>
+
+<div class="loading__wrapper">
+	<div class="loader--text">Loading...</div>
+	<div class="loader">
+		<span></span>
+	</div>
+</div>
+
+
+<svg class="icons" style="display: none;">
+	<symbol id="arrow-left" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+		<polyline points='328 112 184 256 328 400'
+					 style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
+	</symbol>
+	<symbol id="arrow-right" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+		<polyline points='184 112 328 256 184 400'
+					 style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
+	</symbol>
+</svg>
+
+
+
+
+
+
+
+
+
+
+
+<div class="support">
+	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
+	<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
+</div>
\ No newline at end of file
diff --git a/voyage-slider-gsap/src/script.js b/voyage-slider-gsap/src/script.js
new file mode 100644
index 0000000..adadbe0
--- /dev/null
+++ b/voyage-slider-gsap/src/script.js
@@ -0,0 +1,255 @@
+console.clear();
+
+const { gsap, imagesLoaded } = window;
+
+const buttons = {
+	prev: document.querySelector(".btn--left"),
+	next: document.querySelector(".btn--right"),
+};
+const cardsContainerEl = document.querySelector(".cards__wrapper");
+const appBgContainerEl = document.querySelector(".app__bg");
+
+const cardInfosContainerEl = document.querySelector(".info__wrapper");
+
+buttons.next.addEventListener("click", () => swapCards("right"));
+
+buttons.prev.addEventListener("click", () => swapCards("left"));
+
+function swapCards(direction) {
+	const currentCardEl = cardsContainerEl.querySelector(".current--card");
+	const previousCardEl = cardsContainerEl.querySelector(".previous--card");
+	const nextCardEl = cardsContainerEl.querySelector(".next--card");
+
+	const currentBgImageEl = appBgContainerEl.querySelector(".current--image");
+	const previousBgImageEl = appBgContainerEl.querySelector(".previous--image");
+	const nextBgImageEl = appBgContainerEl.querySelector(".next--image");
+
+	changeInfo(direction);
+	swapCardsClass();
+
+	removeCardEvents(currentCardEl);
+
+	function swapCardsClass() {
+		currentCardEl.classList.remove("current--card");
+		previousCardEl.classList.remove("previous--card");
+		nextCardEl.classList.remove("next--card");
+
+		currentBgImageEl.classList.remove("current--image");
+		previousBgImageEl.classList.remove("previous--image");
+		nextBgImageEl.classList.remove("next--image");
+
+		currentCardEl.style.zIndex = "50";
+		currentBgImageEl.style.zIndex = "-2";
+
+		if (direction === "right") {
+			previousCardEl.style.zIndex = "20";
+			nextCardEl.style.zIndex = "30";
+
+			nextBgImageEl.style.zIndex = "-1";
+
+			currentCardEl.classList.add("previous--card");
+			previousCardEl.classList.add("next--card");
+			nextCardEl.classList.add("current--card");
+
+			currentBgImageEl.classList.add("previous--image");
+			previousBgImageEl.classList.add("next--image");
+			nextBgImageEl.classList.add("current--image");
+		} else if (direction === "left") {
+			previousCardEl.style.zIndex = "30";
+			nextCardEl.style.zIndex = "20";
+
+			previousBgImageEl.style.zIndex = "-1";
+
+			currentCardEl.classList.add("next--card");
+			previousCardEl.classList.add("current--card");
+			nextCardEl.classList.add("previous--card");
+
+			currentBgImageEl.classList.add("next--image");
+			previousBgImageEl.classList.add("current--image");
+			nextBgImageEl.classList.add("previous--image");
+		}
+	}
+}
+
+function changeInfo(direction) {
+	let currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
+	let previousInfoEl = cardInfosContainerEl.querySelector(".previous--info");
+	let nextInfoEl = cardInfosContainerEl.querySelector(".next--info");
+
+	gsap.timeline()
+		.to([buttons.prev, buttons.next], {
+		duration: 0.2,
+		opacity: 0.5,
+		pointerEvents: "none",
+	})
+		.to(
+		currentInfoEl.querySelectorAll(".text"),
+		{
+			duration: 0.4,
+			stagger: 0.1,
+			translateY: "-120px",
+			opacity: 0,
+		},
+		"-="
+	)
+		.call(() => {
+		swapInfosClass(direction);
+	})
+		.call(() => initCardEvents())
+		.fromTo(
+		direction === "right"
+		? nextInfoEl.querySelectorAll(".text")
+		: previousInfoEl.querySelectorAll(".text"),
+		{
+			opacity: 0,
+			translateY: "40px",
+		},
+		{
+			duration: 0.4,
+			stagger: 0.1,
+			translateY: "0px",
+			opacity: 1,
+		}
+	)
+		.to([buttons.prev, buttons.next], {
+		duration: 0.2,
+		opacity: 1,
+		pointerEvents: "all",
+	});
+
+	function swapInfosClass() {
+		currentInfoEl.classList.remove("current--info");
+		previousInfoEl.classList.remove("previous--info");
+		nextInfoEl.classList.remove("next--info");
+
+		if (direction === "right") {
+			currentInfoEl.classList.add("previous--info");
+			nextInfoEl.classList.add("current--info");
+			previousInfoEl.classList.add("next--info");
+		} else if (direction === "left") {
+			currentInfoEl.classList.add("next--info");
+			nextInfoEl.classList.add("previous--info");
+			previousInfoEl.classList.add("current--info");
+		}
+	}
+}
+
+function updateCard(e) {
+	const card = e.currentTarget;
+	const box = card.getBoundingClientRect();
+	const centerPosition = {
+		x: box.left + box.width / 2,
+		y: box.top + box.height / 2,
+	};
+	let angle = Math.atan2(e.pageX - centerPosition.x, 0) * (35 / Math.PI);
+	gsap.set(card, {
+		"--current-card-rotation-offset": `${angle}deg`,
+	});
+	const currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
+	gsap.set(currentInfoEl, {
+		rotateY: `${angle}deg`,
+	});
+}
+
+function resetCardTransforms(e) {
+	const card = e.currentTarget;
+	const currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
+	gsap.set(card, {
+		"--current-card-rotation-offset": 0,
+	});
+	gsap.set(currentInfoEl, {
+		rotateY: 0,
+	});
+}
+
+function initCardEvents() {
+	const currentCardEl = cardsContainerEl.querySelector(".current--card");
+	currentCardEl.addEventListener("pointermove", updateCard);
+	currentCardEl.addEventListener("pointerout", (e) => {
+		resetCardTransforms(e);
+	});
+}
+
+initCardEvents();
+
+function removeCardEvents(card) {
+	card.removeEventListener("pointermove", updateCard);
+}
+
+function init() {
+
+	let tl = gsap.timeline();
+
+	tl.to(cardsContainerEl.children, {
+		delay: 0.15,
+		duration: 0.5,
+		stagger: {
+			ease: "power4.inOut",
+			from: "right",
+			amount: 0.1,
+		},
+		"--card-translateY-offset": "0%",
+	})
+		.to(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), {
+		delay: 0.5,
+		duration: 0.4,
+		stagger: 0.1,
+		opacity: 1,
+		translateY: 0,
+	})
+		.to(
+		[buttons.prev, buttons.next],
+		{
+			duration: 0.4,
+			opacity: 1,
+			pointerEvents: "all",
+		},
+		"-=0.4"
+	);
+}
+
+const waitForImages = () => {
+	const images = [...document.querySelectorAll("img")];
+	const totalImages = images.length;
+	let loadedImages = 0;
+	const loaderEl = document.querySelector(".loader span");
+
+	gsap.set(cardsContainerEl.children, {
+		"--card-translateY-offset": "100vh",
+	});
+	gsap.set(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), {
+		translateY: "40px",
+		opacity: 0,
+	});
+	gsap.set([buttons.prev, buttons.next], {
+		pointerEvents: "none",
+		opacity: "0",
+	});
+
+	images.forEach((image) => {
+		imagesLoaded(image, (instance) => {
+			if (instance.isComplete) {
+				loadedImages++;
+				let loadProgress = loadedImages / totalImages;
+
+				gsap.to(loaderEl, {
+					duration: 1,
+					scaleX: loadProgress,
+					backgroundColor: `hsl(${loadProgress * 120}, 100%, 50%`,
+				});
+
+				if (totalImages == loadedImages) {
+					gsap.timeline()
+						.to(".loading__wrapper", {
+						duration: 0.8,
+						opacity: 0,
+						pointerEvents: "none",
+					})
+						.call(() => init());
+				}
+			}
+		});
+	});
+};
+
+waitForImages();
diff --git a/voyage-slider-gsap/src/style.scss b/voyage-slider-gsap/src/style.scss
new file mode 100644
index 0000000..42633a0
--- /dev/null
+++ b/voyage-slider-gsap/src/style.scss
@@ -0,0 +1,351 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap");
+:root {
+	--card-width: 200px;
+	--card-height: 300px;
+
+	--card-transition-duration: 800ms;
+	--card-transition-easing: ease;
+}
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	width: 100%;
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: rgba(0, 0, 0, 0.787);
+	overflow: hidden;
+}
+
+button {
+	border: none;
+	background: none;
+	cursor: pointer;
+	&:focus {
+		outline: none;
+		border: none;
+	}
+}
+
+.app {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	&__bg {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		z-index: -5;
+		filter: blur(8px);
+		pointer-events: none;
+		user-select: none;
+		overflow: hidden;
+
+		&::before {
+			content: "";
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			background: #000;
+			z-index: 1;
+			opacity: 0.8;
+		}
+
+		&__image {
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%) translateX(var(--image-translate-offset, 0));
+			width: 180%;
+			height: 180%;
+			transition: transform 1000ms ease, opacity 1000ms ease;
+			overflow: hidden;
+
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+			&.current--image {
+				opacity: 1;
+				--image-translate-offset: 0;
+			}
+			&.previous--image,
+			&.next--image {
+				opacity: 0;
+			}
+			&.previous--image {
+				--image-translate-offset: -25%;
+			}
+			&.next--image {
+				--image-translate-offset: 25%;
+			}
+		}
+	}
+}
+
+.cardList {
+	position: absolute;
+	width: calc(3 * var(--card-width));
+	height: auto;
+
+	&__btn {
+		--btn-size: 35px;
+		width: var(--btn-size);
+		height: var(--btn-size);
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 100;
+
+		&.btn--left {
+			left: -5%;
+		}
+		&.btn--right {
+			right: -5%;
+		}
+
+		.icon {
+			width: 100%;
+			height: 100%;
+			svg {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+
+	.cards__wrapper {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		perspective: 1000px;
+	}
+}
+
+.card {
+	--card-translateY-offset: 100vh;
+
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%) translateX(var(--card-translateX-offset))
+		translateY(var(--card-translateY-offset)) rotateY(var(--card-rotation-offset))
+		scale(var(--card-scale-offset));
+	display: inline-block;
+	width: var(--card-width);
+	height: var(--card-height);
+	transition: transform var(--card-transition-duration)
+		var(--card-transition-easing);
+	user-select: none;
+
+	&::before {
+		content: "";
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		background: #000;
+		z-index: 1;
+		transition: opacity var(--card-transition-duration)
+			var(--card-transition-easing);
+		opacity: calc(1 - var(--opacity));
+	}
+
+	&__image {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		img {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+	}
+
+	&.current--card {
+		--current-card-rotation-offset: 0;
+		--card-translateX-offset: 0;
+		--card-rotation-offset: var(--current-card-rotation-offset);
+		--card-scale-offset: 1.2;
+		--opacity: 0.8;
+	}
+
+	&.previous--card {
+		--card-translateX-offset: calc(-1 * var(--card-width) * 1.1);
+		--card-rotation-offset: 25deg;
+	}
+
+	&.next--card {
+		--card-translateX-offset: calc(var(--card-width) * 1.1);
+		--card-rotation-offset: -25deg;
+	}
+
+	&.previous--card,
+	&.next--card {
+		--card-scale-offset: 0.9;
+		--opacity: 0.4;
+	}
+}
+
+.infoList {
+	position: absolute;
+	width: calc(3 * var(--card-width));
+	height: var(--card-height);
+	pointer-events: none;
+
+	.info__wrapper {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: flex-start;
+		align-items: flex-end;
+	perspective: 1000px;
+	transform-style: preserve-3d;
+	}
+}
+
+.info {
+	margin-bottom: calc(var(--card-height) / 8);
+	margin-left: calc(var(--card-width) / 1.5);
+	transform: translateZ(2rem);
+	transition: transform var(--card-transition-duration)
+		var(--card-transition-easing);
+	.text {
+		position: relative;
+		font-family: "Montserrat";
+		font-size: calc(var(--card-width) * var(--text-size-offset, 0.2));
+		white-space: nowrap;
+		color: #fff;
+		width: fit-content;
+	}
+
+	.name,
+	.location {
+		text-transform: uppercase;
+	}
+
+	.location {
+		font-weight: 800;
+	}
+
+	.location {
+		--mg-left: 40px;
+		--text-size-offset: 0.12;
+		font-weight: 600;
+		margin-left: var(--mg-left);
+		margin-bottom: calc(var(--mg-left) / 2);
+		padding-bottom: 0.8rem;
+		&::before,
+		&::after {
+			content: "";
+			position: absolute;
+			background: #fff;
+			left: 0%;
+			transform: translate(calc(-1 * var(--mg-left)), -50%);
+		}
+		&::before {
+			top: 50%;
+			width: 20px;
+			height: 5px;
+		}
+		&::after {
+			bottom: 0;
+			width: 60px;
+			height: 2px;
+		}
+	}
+
+	.description {
+		--text-size-offset: 0.065;
+		font-weight: 500;
+	}
+
+	&.current--info {
+		opacity: 1;
+		display: block;
+	}
+	&.previous--info,
+	&.next--info {
+		opacity: 0;
+		display: none;
+	}
+}
+
+.loading__wrapper {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	background: #000;
+	z-index: 200;
+	.loader--text {
+		color: #fff;
+		font-family: "Montserrat";
+		font-weight: 500;
+		margin-bottom: 1.4rem;
+	}
+	.loader {
+		position: relative;
+		width: 200px;
+		height: 2px;
+		background: rgba(255, 255, 255, 0.25);
+		span {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			background: rgb(255, 0, 0);
+			transform: scaleX(0);
+			transform-origin: left;
+		}
+	}
+}
+
+@media only screen and (min-width: 800px) {
+	:root {
+		--card-width: 250px;
+		--card-height: 400px;
+	}
+}
+
+.support {
+	position: absolute;
+	right: 10px;
+	bottom: 10px;
+	padding: 10px;
+	display: flex;
+	a {
+		margin: 0 10px;
+		color: #fff;
+		font-size: 1.8rem;
+		backface-visibility: hidden;
+		transition: all 150ms ease;
+		&:hover {
+			transform: scale(1.1);
+		}
+	}
+}
diff --git a/vue-slider-ui-interaction/README.markdown b/vue-slider-ui-interaction/README.markdown
new file mode 100644
index 0000000..c588c2a
--- /dev/null
+++ b/vue-slider-ui-interaction/README.markdown
@@ -0,0 +1,4 @@
+# Vue Slider UI Interaction
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/xdesro/pen/dEwMOq](https://codepen.io/xdesro/pen/dEwMOq).
+
+ Little Vue interactivity sample UI; inspired by a cool shot I found on Dribbble. Feedback welcome as always.
\ No newline at end of file
diff --git a/vue-slider-ui-interaction/dist/index.html b/vue-slider-ui-interaction/dist/index.html
new file mode 100644
index 0000000..c3e7e64
--- /dev/null
+++ b/vue-slider-ui-interaction/dist/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Vue Slider UI Interaction</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://rsms.me/inter/inter.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="viewport" id="app">
+  <transition name="nav">
+    <nav class="nav" v-if="loaded">
+      <a class="nav__brand" href="https://codepen.io/xdesro">
+            <svg viewBox="0 0 100 100">
+              <path
+                d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z"
+              ></path>
+            </svg>
+          </a>
+      <ul class="nav__list">
+        <li class="nav__list-item">
+          <a class="nav__list-item-link" href="https://henry.codes">About</a>
+        </li>
+        <li class="nav__list-item">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+                <path
+                  d="M1 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM5 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM9 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM1 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM1 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM5 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM9 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM5 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM9 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
+                />
+              </svg>
+        </li>
+      </ul>
+    </nav>
+  </transition>
+  <main class="main">
+    <transition name="main__slider">
+      <transition-group v-if="loaded" tag="div" class="main__slider" name="main__slide-image" mode="out-in">
+        <img class="main__slide-image" alt="" v-for="(slide, index) of slides" :key="index" :src="slide.img" v-if="index === currentActiveSlide" />
+      </transition-group>
+    </transition>
+    <transition-group tag="div" class="main__headline" name="main__headline-span" mode="out-in">
+      <span v-for="(slide, index) of slides" :key="index" v-if="index === currentActiveSlide" class="main__headline-span">{{ slide.headline }}</span
+          >
+        </transition-group>
+        <transition name="main__nav">
+          <div class="main__nav" v-if="loaded">
+            <p>Play Video</p>
+            <ul class="social-links">
+              <li class="social-links__item">
+                <a href="https://instagram.com/xdesro">Ig</a>
+              </li>
+              <li class="social-links__item">
+                <a href="https://twitter.com/xdesro">Tw</a>
+              </li>
+              <li class="social-links__item">
+                <a href="https://www.linkedin.com/in/henrydesroches/">In</a>
+              </li>
+            </ul>
+          </div>
+        </transition>
+      </main>
+      <aside class="aside">
+        <transition name="aside__nav">
+          <div class="aside__nav" v-if="loaded">
+            <button class="aside__button" @click="incrementSlide(-1)">←</button
+            ><button class="aside__button" @click="incrementSlide(1)">→</button>
+          </div>
+        </transition>
+        <transition name="aside__slider">
+          <transition-group
+            v-if="loaded"
+            tag="div"
+            class="aside__slider"
+            name="aside__slide-image"
+            mode="out-in"
+            ref="aside"
+          >
+            <img
+              class="aside__slide-image"
+              alt=""
+              v-for="(slide, index) of slides"
+              :key="index"
+              :src="slide.img"
+              v-if="index === nextActiveSlide"
+            />
+          </transition-group>
+        </transition>
+        <transition name="progress-indicator">
+          <ul
+            class="progress-indicator"
+            :data-slides-count="'0' + slides.length"
+            v-if="loaded"
+          >
+            <li
+              v-for="(slide,index) of slides"
+              :class="index === currentActiveSlide ? 'progress-indicator__bar  progress-indicator__bar--active' : 'progress-indicator__bar'"
+              :key="index"
+            ></li>
+          </ul>
+        </transition>
+      </aside>
+    </div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/node-vibrant@3.2.0-alpha/dist/vibrant.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/vue-slider-ui-interaction/dist/script.js b/vue-slider-ui-interaction/dist/script.js
new file mode 100644
index 0000000..2c8eaa4
--- /dev/null
+++ b/vue-slider-ui-interaction/dist/script.js
@@ -0,0 +1,79 @@
+// https://dribbble.com/shots/6566320-Kalli-Hero
+const img64 = [
+  `data:image/jpeg;base64,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`,
+  `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAIDAwMEAwQFBQQGBgYGBggIBwcICA0JCgkKCQ0TDA4MDA4MExEUEQ8RFBEeGBUVGB4jHRwdIyolJSo1MjVFRVz/2wBDAQIDAwMEAwQFBQQGBgYGBggIBwcICA0JCgkKCQ0TDA4MDA4MExEUEQ8RFBEeGBUVGB4jHRwdIyolJSo1MjVFRVz/wAARCAIcA88DASIAAhEBAxEB/8QAHgAAAgIDAQEBAQAAAAAAAAAABgcFCAMECQIBAAr/xABGEAACAQMCBAUCBAQEBQQBAQkBAgMABBEFIQYSMUEHEyJRYXGBFDKRoSNCscEIFVLRM2Jy4fAWJEPxgheSohg0U8IlstL/xAAcAQACAgMBAQAAAAAAAAAAAAAEBQMGAAECBwj/xAA6EQACAgEDAwMCBQMDBAICAwEBAgADEQQSIQUxQRNRYSJxFDKBkaEGscEjQtEVUuHxYvAkMxZDcqL/2gAMAwEAAhEDEQA/AL+YzXwfFesV8IGPvSeNJj3+Kx8oIrZryBmuSJsGRcsXTY1CTwZJotZck7YqNli2NDsgIhKORAC4gO/poQuoDg7U0p4dj7ULXUIx0yKXukZV2RWSxgEA96GLq1DMdtvamTd2++fY1AyQAdqG7QwHiK6e0CnIG4OR9RTH4V45bTruK3uGxG229Rlzbqy0C39h5g3HqBypomm0q3xIrKldSDOjNleQ3MSSxOGDdCKKbOOznuozdcxRTlgDgmqF8B8Yy2VwtlcsQvQEnpV07e4SVEdDkEU/BS1MGI1a7S3ZViPkcSQ4rvLZ3WC0h5s7YRc144G4d8rUze3z8ixqeSI/1b/ajfQ9RtbdZQ0CM74HPj1D/tRM0uh2TAXtwq8ylsZxn5JpJZpglwYkd/PaXBepGzp70qrcjBIO5j7wR4yvotRZI4g3lRA9sAnpmqi+K/E2q32gLoGjaZMsRUec8SHJUfyjHuetW/1riGzuYDbafGvlnYsBsfqaUFxhHECbu+8jDsK8+6911dO7LSwdj+Yjt9p1p1A01atWV2nKgn+T8zmFp3glxPewyTuiWsS5JMp9X6CjnhPhnR9Llja8s1kkJ9MjjIz8A1e3iu4Wz4bm5dmZeUfU7Ujr6xtpdB5SvrWPY984qijqes1FeLGwrtgbeMQ1FBXP6iOPgq6UXaxqf4Yy237UufEU6xeayklq+BE/pB6cvfpWr4d3c8NvcSkElMKM99qM3MlxdNI4GTjAAq//ANPaNqNM2eQ1hI/tDa61XLe6kfPMaOhcf8QQaZHA/JNhAoZx6h9T3r1acMahromvPLijyT+VQCfehvSNInu5SFYAhgMHpV0NBsbay0yGBGB5V9R9yetehqgswCeAJXNTqF0mWqqVXY5JAlHdZ0zUBG9pDEFlUbyHsT0qqFxwDxS91dOmuySAAkhlzyH4q+PjjcyaFw1e6rbkBo0Bx3JzgYrkRqXjfri2N9HBEYZZsHmIIK42711TRvswxwAcEmGrrq3q3sw3cYGDnHnkeY4vDCWOPX9Ss3Ae4jkxK69GYdx9au5FpLOynLAHGce1cpPBTiSSw1yefUJixuHJZz1JNdftO1G3uYEaNwQw2waMSpeRntGtOvY6KsIuCMg+/JlgeGXsLeyjigiVcDcjqT8/NS2p3UiDAOSaT+nzz28yFRlSdxnFN69R5Lfm6Ej7iprnAqOByJSG0bLqgzNkOe5MT99rt1I/ISAo/N7fSh+MGTBBBz26VvXWjSx3ALzc0ZbrnB3owi0m2CKcFRjPMOlVmsuzEkcz0Sz8LRQgrIOR3AmhpOk3E85DjK4zmoXWraOOdox2OKY9rF5EgMLtg7Vq61osPkNcPOQxH5dtzTqizBAIPEo1yt6+7cPqPAxiVg1fSLdkeR+ijudqWUmqpp6bI/Kc8oz1xT9vIYfJcOpfI6VXnWLGF3VYouQFuvU1HrGZGTb5lg0N3qgoxJA7e0G+F+J7q54nlgZMRMg5UAzk561KcSaPrMGvRSR5S3lyX9WBkfA33o50/RoNLlt5F5S78uWx03qb4mma6uLeOM8wGcn2peoIbn3jT00e0DGFHOczDZXixxKBEM47CtC8SXV2/CLbtM77kYBAA7kmp+O0xbBQu5G9SNnY/g4nkV3VmUrt3pu+4oRng94ssFI3MF+rP0ykPEHhbEmszNLE8Lx4YIpB6jIORtW94ecMcSarf3ym9jFrbsECSH1EnsAPp1q6SaPJcpIOpf8AOeuaTmu8O65FcleH3WC/YY5tgrA9ebPal9IWqwbxkeRNW26qynNbKLEweR7d5Bahw2YJpYnUBkOMjvjuK1dD4fllvxDEPz+/Siiz4T8WYBzalBaXTEDmKygfpnFa6a5rOna3DBcaS1vzMF80PzDf2xUqOjuqbsBjjJjhNezaNvq3Pt7YPeOCTw41C1kjkTlkJIOFx3qQ1fU7rRrHEts6uRgZGM1uapxLJYQGVpJcYGMZJzSQ1fiW41qIqDIw5s7nbNdWqunJAcGVzTWajU7GtACg+fiMfRNZjt/4jxgSyHJ7nennaajHcIArgnbvVVNHtpJSqylif/2dvqasdpklpZwgJGAwGxO9T6Z7COMETfUdPpwAVOWPgc/vNviLUoNJ0uWeZwMLmqPw8Rz3UzyrcMGZievT4pu+IGjajrmEk11YFJ9MfIDn96rgvA/Edi/LHIlyP9S+n9jXFrXM/IwB2lo/parTVly5Xc3v7R4aRqepSSs/nnmA3PuKbAlkng5mO5G5qvOjx6rYPi5gZeYfb9adNpJf3SrFDFy525icCtVuADnMedX0aLcLK1QKQPqXGP4ib1nSdSv9Vggt0kkJb8qbmmq3hPrEkaSz2FwAFyeZh++TViuDeFrjSXkvC0ck7Ddm22G+B7U9YdSlvrKTmh8vYgjOf/BUtVPqWAHIzKTr/wCqL9PxQiFVwNxzkn4lReEOH9S0ycsl2baJNzGTzA5+OgqO4tubO81aC2mmSZ0HMrd1JqQ4w1q5trr8JbIXdv8AT13pPxaRc/jIWMZjkkkAabPMQT7io7r0rU1LnhvqJPf4g9OnfU6lddcU+pMqoUZ+8ZMV2ls6+aSIxg4HbFSuo6ta3hYodsYFHF9wpbto4kaR3YKN+7fXFVq1PSp7O4Z4JH5c9Cc0WbrEwrEMOD3zDNBVpdW5dCyMpIwRj9YpOOuG5bpXliKuB1A6/oa3uCfDu1tbeK6lzdXYIdACVEYG/UdTRxMZZoCWX1LTF8MLu0WSVLlwXWQgBvbtUdb6dL1d1zwePGYv6/otQ+lyrZAIDDtx8/EPtBkvI7h2kgZQADjtWt4kaHb8Q6HPDzcn8MlSPp0NOW9uWkQh1hWIbknHb2qp9nxRcahx/LokNwktsQXVsZZR3TPfHv1o2/qWneu1CpIZePOJ5rX06+m+t1O4ZBPP5ZxE4x0FtL1a4gkU8yNjOMZrY0S086IEkjHeuoP+JvgCxt+Hvx0KxCdFz1ALDvj3xXL3hOQyo4LHagdLabF5HKnBltYJ6gx2aSMsH/uOXqBtTN0eIImf0oEnjIuDgb0xNHOVUU2btCNL/wDtOY0tDEpvFHYmrmaFGphXI5WA6VXXhC2t2v7fmGxOKt5cQxR2waNBzDHSgVcM7CMrmbIwe8x+rm5SKJ7aMclClpIz5J60a20Zx7DtWchsYgVth7TYCDAwK1WAqRYkbGtJ8ZojEhU5kXJjeo5zjNSb5qGl71qMKxkyNml61FNNjNZLh96gJZDXOY8qpBElvxGDXn8SNvpQ68p3rF5xwTmo8wsadYSNdbda+rdqMk9qGPMOaxSStjqa4Jkg0yySmuuZiRtUW82/TFaEkhGa1WkJNcQxawJJeZmsisCaiQ5yMmtxGJNZNkYkmCf/ADvWfGev/mK01I2raXmJOKyDNPRTJrVePIPf6UV29pzlcg1kuNJmVcqOtTejZs3AQA6qlW2lgDFjNF1rQjtyXBKnFT9zHJExV1II7UyNCtLK/sGRiiSAHvvtQDHAk3q1jBZsD3gPoUcI1OISDCtlST2zTL1XS4UB5cHPQUPScOXKynlbbsT3otit7h0WOUjI9vYUMSGORN3V7bEcWDGORmI2exCyMK11s8k7HNMu90xklO3frXqDTFYrk+29GKRgQ0lQM5gBHYbjY1vDTTgkimqmkoBnG3Y1HtbgDp0qQ8Yi710YkDx3ivfT1yRjtQzNp2SfTToa2yCcZNQstlvnHSsDTlirRF3ekKf5aAr3Rl5W9P7VZS4sgR0oRu7HIPfNd7zIDTmVRu9FBJ9NDcvDckikqucdfrVm7zTkUEkdK2+HdDW5t9QIXJDLgfBriy3ahMhbTKWAPmUrn0Z42OV6E9q3dP0UTScrgr7HG1WW1PQMSEchwK9aLoo83BTrv0z0rdbhyBnGZy2gC5O3OBnHvEDDpcquduYAnpRNb2vT0039W4YubGcXMPN5TnII/lb2P9qjYFikule5jyP5uQBCfnpiu2rYNtbgzjT+jZWHTkH/AO4g1bWwJClaKrzT7SIWrLgeYAMZz6u9PLR7nw+srSR5YZ57jlPLC65LH2Xk2+5pRX2m6hf3vObX8LFu8ceScAmuLagu3Dhs98eIRTYLXdfSsXacZZcA/aehpENzaSKuA6gsoPcj2+tb3DvDbXMYmfokoyvuo60X28EAt1jAGUXGe+akdClNs/XZ87fI2NCBTg8w004Bx4k1MeU4G2BULIOdm5t896JLlAdxuK0UiX27VoDAmbJCRxFXqUUO7DvivskREm2+RU3axgDNbnQXme2tQyDG21RbW6qTkZJ96ZOn2pnkVFHU7mp6+4SnRPODiRc74GMf9q6YqoyZildwBIGe0V+nac00gAQn4HesOspqVjdRIkI5GAzlc4NWB0XSUtoy7lQSuwqE1qOCWVWC5IPSkuotZjjGB/eO9PVUH3ZDEcHHiLTSOHJb+4jkmTKk4ONsZq0CcKWaaYE5AXVSpPv7UC6VdQxRDB7gMKYq65FFKqlww/mx7f71FUcDJ5iDqaXtcDWCAPA+IGX+k3NtpzoQYwACpz3FQvC1/byiWzvObMTEEkbjuN/Y0zNc1O2nhVFXKuuc0gL0vDfJMjlGZeXm6Z5RXFgBcleYjRX2/wCp9OT37RzE7V+J2r0O1fiKtkoMxnr9a/HrWXG1efqKyZMXYCvDAHt+lZjXjG1ckTYMhJkwD7VAzwZOfijBkB61oSRdds0M6ZhSPiLya1GDtmhS6t8CmrPCTmhO7gyDt2pe6RnW+YsZFA+9QVxb824G3cUe3FtvUNLFgYI60NCwYoLu15JFcDDKdiKd3B3HiQPHb3DnBPKM0A3lvsRilze2Thg8bYZf3oyi0qw5kFtSuuCJ0+trhHVJEbIO4IoO4r0Aa6bFXlYLFOruvUOo/l/Wq7eHXG0vMLO5Y4zhSf6Vb+OQMoIOdqduqX1Mp8jGYjrtv0l4ZGwR/IknDaRWtoAq7Ku32oOVVV2lYZZjt80ZGUSQch3xvQzCv4i+5eX0pXzz1bpN+kvZXGV5Kt7y56bUrfWWz9x8wG4qtfxdrHFJ/wDIf0FV0uJ57Z57R2LYICZ+dgKtDxA3/wDkoIx0UdKrxxPpGpf5gLi0XMilWXIzgruDQ2jRA6rYRtPPPvD2Nmz6RkgcCXBg8OY9F4UiYuXuOVWlwNsnc/pQZZaNcXV0EgjLN9Nh8mrV8Ia1acQ8L2VwQreZEFlTrhxsyn6Gi220zT7JH8mBIwdzgV79TpqzTWa8bNoIlNTq1qhg+SxPHiVwijj0hTE5UysAT9aI7LUbi0tJZGYsN2x1+1Uh1bxf0W78TL+ETqLSCQwpLn0s6nDE/GelXNtdWs7jTQBynIBBByCDTjR6dGH1DPHaRazWq5oQNgkAn9TKm+Jmo3vGtk2nyMYLcODygnJK9N/aqP33+HviGeVfwWrebzHdJFz+4roJrlgIdQkdTlGORj5pncA2YmvWmY4RBj6k1xVV9WBxk8y760dPr6a1y1Y2oMfUckmcaeKPBDxQ0G3W4Fm8sS7/AMIc3T/prU4P8cdc4euEtb+KQiM4IYYZce+a/o/e80kLyuUOBvgdKrD4j8C+D/EECrqtpY+dKeWJ3IilLHoFYYJNGNUiZPYfM8zp6reLARtHjg/xgxYeGPitwfxLErNqEaSL/wDAzBX274PUfSm/xn4l6Bp9jtc5yCERN2P2FcouLP8ADkLK5luOH9YdUR1CwzZbBbpystK3VuDPGHh2Dz7rRZ7y2G5mtz+IAHyF9Q+4pFbstDol6qT5lsF9tdldl6EKDnjtOmOicdS6xG7QE86NgxMdyPce9WT4d1157IxTgDA3De5riNwd4k6a04S5LxMp3PcH56GrcR+I+n3cEdva3pDHGX5+p+9I/wALrdOpO02fIl0Gr0etpCmytCWBBPBE6gxTN6SqgpnqN6lp9N1C/JZsLHjCqe4FU24M4mvLC4ije6FzGzKDzOC2T7fFdDLGdZrZGBG47Uz0NpszlSrDwZTOsV26ZlGVYNnDA9xKu6np5SR0ZSCvUCkVqdksd7zlcnPpUf3q3fFMEomDFcKdiaS2pLpFu0bPNGZiSFDN3+BR9xBUZ7yPp2o2HJ5yMYgoNLkmuLGOYrzSuFCj9aamv8GWllBBNEydQHXO+T7UCRaa8lxHdTucg5QLsKLZZWfl5nLY9znahAAWyY7sTUOUIsx7iacdmhUDlGwFfbmwJCbZHeiaxtGmIZiQvYdM0Zpp0fKCT23FPaNObFPgeJU9Xrfw1uM7sd8RMpqFvayNH1Y9qWE6X15q5NvN5UgHXPQfTvT+1bhWGbEkESq/MCW3GV79Kplx/fXnBnFdhrNtpM0izW7QzBmfy2OchlG4DAD7igbdKa7V9T8hYAsPmSL1mr0H9BSbWwoDYwM+faWQt9L1kKvnXrynuMAD+lYtR4UjndJpMKUPNt0296r1a/4hTdmOJdKHOTgrnB+2K2dR8WNVzFFd6e1jAx/48kbYIH+kHqfmnD06FKiQcgY7c5MX6WvqgfIcLk85b/EZ2oKl5BNHkRxKOUyscD7Zqq851WzvmSztpriEH/iBDy/qasfYa9wte2ZnTUWumA9JEBcD6AZH3qPmn0e4UmS6mfP8rBlH6ACq9qqa7CMy8aUMy7e2PPiKqHX7/AWWMIe6lt61NQ4m1a3hb8OXU+4yRU/c2nCwu4iYUCg7nlYUxoNW4JgYxvJHy8ux5T/XFApSQcKxHzJLK7Ebkbs+F5lC5JeL59Zg1Ce5mmRX/ISRt9KthZcY6qYo1/CxoSo7ZNfL/U+HpbxvKuUCg7HlIyP0pf65x9w5ollNNDm7nUbIiHAqdRb7n7yzaCjpmkpZrG3tZhvTY5OY3o57+7dXuCc9hinBoDIsgyDtiuUem/4htcm1I81tEsZOOQ7HH1roJ4e8cafrcX8OUrJgcyNsVPyPb5qJ96MMjg+Yz1zW26PKVqE7fSe0v3p8iSxDDDGBkVMXkghsWwMbUoNEnuDOoyQq02J0NzblOmc4+9WbTWO6duwng/UKUr1CgnjdzK/GySSeWR8FnbJ/tTi0vQbOaFGlt0YADAK9DWhb8K6i7ghVwDuS2KbdrbmCBUPUDeua66juyg7Y5E1rtZYfSFdmMeQfAgBrujmW2K285iPtjIx7VWfWtOurZsSAMB0YDrVy70ZQ0n9V8tVd3XIAOMjNas0tITeBjEL6R1XVDUCskMCfbn95X3TNM8+4jLwkx4bO3fG1BHF2gz2l4k9nBIg5CzlB3BO+3xVo9FltJpSpGGxt7b1+vdPjMmHzgdTnoKrJsS4naexxL5ZfdXc24cFfynzmc4NV4p1k27o15MVG2Cx6Uv8AhLVrrSuKbfUEBIXJOTjIPzTZ8SdClttem8iPMcw5lx+9Ud4r44TSIzYhXWbfqMH2pboy76grtyDw061aaP8AB7shAwBEsN48eLmka3o4sDbo8gBwc7rXO7hm78q5Kr/N80GarJe3V150qvl+me4qS0GJ4L1HfIGdgat1VKVBsHucyji0tYPpwBHlcSjzc4xnFMbh23eRgcE0sryMSSw8oO5G9XH4L0gi2T0gAru2KzVWla+O8d6RN1jZ7ATJpZaGRcZByOlWd0O9uZLZvN6Y2zVcmia2v89Qr9O2KtJw/a/jLdJIyApHQ9c0Cn0bXYwl3rIxnt2ma39LEjamTGq/gIm5vVk0vbsJDPyKDzdz2reF4VVFLZC06rIPOPEVXAsykHsYV8+/vtWItkddzUHFOzkgZPsBRpp2lz3Ayqkk9MCuWIAnQwO/EgWQnaomcN+UdTTYueF7+KIuRggZx3oBe1ZeYsDmh/UU9jGdDI3YiLeeIjI9vmh6WMimPJac7HP70Oy2pLHAzW8ywVOABzAspvmsXIwP3oqNqfatOS3x2+9R5jAPB0qduvzWsy1PGH3Hao+WPArnMIUyDk6ZqMMoqRnUgHbeh2QnOxrUnkgsvMakY32NDCv81IRzMDtvWSJ+0NrSEzOFFH9poxJGXpY2IkeZR5nLk4z0p/aPpqqq5md/qdqZaRAxOQOPJlM6xq7KEBW3bnxjmb9lpaIQQM42FGEelq67rU5a2SgKBRDHFy526U+CgTym3WWu2SxJic1bheKdDzJ9D7VB6FpuladcOJCrMRuTsRTq1G4CxgcucnGKhbTSFvJWd1QEdu+PrVe1rVrnagJ7GWjplurdMNay1/H/AJkM6RS83Jgig24eKK6Rf5ielFWrRvpsp5F9J+c5oCluZ5pVkEf5TncfrSNbU4DcS51aa/0mav6hjg5k5dQo5xy4zuMioX8Kyt0xThsItLumRwedXAzv+X4+tfNS0eK2LHnXdvSM7kfStBlycSavVAKFbvgZHzFJIjlOXmPxioRnVGCnqDTFktowMnIPxtQferDGSVT9dzUu1t02p+o8cfEjzJFnetRwjHABr42oWmcNsRWrbXUV3OURumKk7SYAADme2to+XJFCstjnOFPxRrfxXMIAPQ96GZJJ1GS21azzDKtx5yDAbVNMQ2qMFbn7j2oV0e4u9P1AKiZExCMD8nam1IskgzvWK2sXkvIOVAWDgj7d65CZ4POTMtrxS7FuQCcmeLjSlkdlcDm+nvX2LQY4XHJu2KbUGnh7knGcCp5dNAPSrJV07TDY2D74zPPrv6h1SKUwucd4C22moYvLkQMrDDKRkH7VTbie0aDXLyOOIRRpKQiqSQAPk+9dFls8DpSI494Vt/Ke+5gpZlB+SelS6uvcufaA9A1iJryrk4sGB7bs+0rzwxqsmkXLSxqjswwedQ2R96NtU4mjv7rzWgWMlFTCnYBfj2oVGmWwUgdcdaG7qxaJshiQehJqvNa20Lnj2nq40uma71No34xu+JLPOySnDbZrPDclTsercw+tRDDIA71rMxB67ihcw3aDHHZ3MUygE9qmXMYG3ak1bXTxuMNgj+9GsOoBlwTg1ySIK1f1cQkdOZwdulSkKZZRsM0PwzhsZNHtlpMkqrIELL1LHYCtjmRsAo5OI09OhtLK1DM68zjscn6V9k12YK0MRwh2JO5x7fFA13eafDbFI7kSznb0D0qPr3ND0VzgfWuhtzk8wZdObAxOcZ44hrJPI77uSB0GaNrBIZbdPMQdOp/rQVpFms7F55OVAenc/FMq5SDy0aHAAGB9Kg1JyBx2khwibBn7iLnU7d4GeSPoGO9Bn+YXJflB9R75pqTwRT2yxGTBOdhuahLXg+9mueaNsqvxuT9KRlHOdqk57R/Vq9ONOfXcLjyfaa1neSLbNG3M3L6gT87EV6uMS4LJlR/ejG24Zv0kGY8jcEd/3rbl0opFyujD6iliWXpeVsRlB7cRJrU0dtTelarZ74M3ImyOtZ1wdqHYpMgfSptJM4q9q2Z48ykTY+9eiK+4BFed6lnExEH2r4wNeiMdPevmNtq1MnnGdqxsmcisoGa9YrRE3mQ0sOc7bUOzwHBGKNCu3So2WNcUK6QpHwYtbi3wDtQpcQNg5FNOeAUN3FsMHalzpzGldnEVTwncGhq5swD0PSmZcW++cbVDvBkbih4WDEs0UtvdCSMEMN8VajgzjVbhBBO2GBxkmkxe2qlQcAUGyJLayCWJiGBB22zijaLirQa+lbFwf0M6TRurKCDkEbGt+1EUZdtgx71Xjgbi0XdqkM7AOoxn6U+A2RkGmGs0lGu0zVv57HyDECPbprcj9R7xQ6rrFhFqM9xcXCQwx7F5DhRVfuK/GjRLe2lt9IU3Ny4K+ew5Y0+QOpo48W+C57/TjeWys/k8zyRj92ArnBJblbhhjcV5zZ0KmhwHBbHY+DLlTrWsTKY5/cR38F+KHHPDJuF03Uyi3EhkkSRBIpcnJYBuhPfFPHiTxQ8aOIuGruG01CKBHiYO8cYjcjG4U9s1T20tpXlRFHqYgL9TXQTQdAuW0iOIAIORVJPT5p3pmuFgCsQoHbxN6Xp9FhsZlAwO/Pc/E4tG91HTrx0nDKysQwJ71bjgDxo1vSBHCLgzW/eJ9wB/yntT44+8Eba+tzcAes5/iIMMPqO4rn1xNwrrfC9yyywkx9VkA2INXOrUBsc8/wD3tEmp0inIZdwU8HHInWnQOP8AT9bJaWdYk5ckE+r6VCcY+OFhw3p/4XRgJ7tzhBjmHMT7dzXKTT+Lp4Isc5BxRLwVryScaabc3PKywzh+VuhI96Id2AZhnOO0lew36dNO2NmQM5xOs3Cnhj4h8WWlvecScTXsLS4kFraP5KxA9iV6t7+1WDTwX4FsYFNxbC7mTGJLh2nkz/1OTULp/ilpVlpijnAXkGMMNhVRuOvG3W7x5rfTmNvEcgyZzI307AUlv1laqAQzMR+kM0vQj6g9PT1KF/3EDP3Jkp4l32k6RewWWkSNCyMZJgkhIVuijqf0oJsvFji22gaJ5EnUDaQjlcfdev3qs5uruaRnYszFsljuST3JojTzFt2MyFQftmk601sd2CCe5Bl0bTqlaq2GI8nvK+cZSanxPxRK9hp0k92xw5hTr/1cu361v2/hJ4wjDxaTKoxnHOuf61f3wyudItLfMdnGOZyXZdmJ+fmr12d3ps1skgl5BjcEY/WmidQKoFQABeBnnOIqt6JWFFlhclzn6MBR8eZwzGgeNWlKHfRr5gu+VHPj9Cac/D/+J/xd4bkjjvIWeOMBTHcQEbD52Ofmuw1vc2EiBEKSZ6j3qal4Y0G9hVZrWJgRvzIGzn6ipV1xsP1Ip+QYj1PTKlABdwPAP/jE5Xah/jRvtRtDHNpKxuR+ZWyAfoRVbbzxRtdT1yPVJL1xdIfQRsq9iAvz3rr5rngJ4T6nzibh+1Dvn1ovlHfvlMVT/ir/AAmcKiVmsXuYAfygSBx+9FrfpvKkZHnmC1ae0YVShxyMnH8mbvBX+IPTWjS2vplHQczHY/erkaZxPw/q0SPb3cZbbYHr8VyV1P8AwucWoC+nXiP15VlPIT+maWf/AKF8a+EZTINOuyqH80DeYNv+mpfQQgMpwD7iTvrLEO2xBu/7gef47z+h+zkhWNTzA7bDNTccolYZbAFcB9I/xKcc6Mwi1G3OFwMSoVb+1W94R/xXcKXCxJfiSBzjLndf23FO6LdoAPHzKZrkLhmHPPadWUQcpB6YpXeKnEXCFto9hpt3JA1xqF3DDawn8xbPqdf+kbk1BcLeKfB+uIhtNTglYgekSAsPt1qZ4107hLVuGL5rl4xOkMklvKBmWGVBlHTvkEDp1qPXCs6diTlR3+0rlbXfWKmAfHHnGP8AMU3DPhXwnp+qtrEduGnlTDcx5gPkDoCe5o41rTNNuyj3CoY4ieVCARv8Glt4c8VNqfD9vLLMrSGJfMxt6xs23beje7kWUEKw3PSizZUUUIFC8Mo7AS16PR6t7RYzMvnP3gXPZ6ckhWyjEBbYhVwrfUCl3e2+qyKeSIAAkE5GNvantY6SMeYTv2+KrL4s8Oa/DYyX2nXciqu8ka/1FK9TSvpmw7gAOccyx0dUam41LZuUYwWGeYI6rcXUXpcAkfINFfBt5bXEpR1ViOuRVA4tV1QSktcux/5jT04Q1y+inSUbkEZ/71VF1Kiwd/1npPTnTX12U/lu2Er7HE6Cvo1nJHzCNRt0wKrhxrw5FeaXdw2dvFHclW5WCDen7oWvLeQDEbKR19qN7PSYZ5shOYn4o66ys7TWw57xCjXUNampryV7Z8H4M/m74h4R4p0bUS99YyIGYkSqMofuKsr4TNxHe61AumRO8sIzJ6uX0dwa7jXHh7o11GyzW8bhm5irAfpURpHAmgaLfSGx0yK3d8cxjQDmx0O1ZvNi7SoB/wAR/put6KrTWqqsWI7NjEIuGYriO0hEy8spjXIPvTbtHbIyaibXT/UrMCSDtURxMby3tPOt1YtHglQOoB3/AGqx6VSlZyOAMzxPrN9dtzlSBnJxHHC7AYGaz79agNKm82zjbJ6d6njmpmADGV6s5QTRnTmQ0KXWiQyQnzdwe2cUZv0+KgL6+WGMjI6dKitDtUQozCdM616hWJxzE5q2ifhwJrLmWRGHpPqDfArck0nWrxVc2wUMBnJ3FEOmy395fc8kPLFj07Y3zTjjVI07Yqk6XS5vuflQTgj5HmX/AFHVrDRUuFcjsx74Pic+/ELgLUNQsm8u5MMyghXC5IB6jFV50fwy0SGANNax3Ey/nmlUM+/ya6acV3FlbwNM+MgHIqoEl0hjm9ajmJYgf+dqHuX0rlC55bmWXpty26Sx2QZUYUnnEqlxvwFpVxbyxwW8a8o2wo61zB4lsLjTdRaJ1IKtsa62ajryf5p5LkYYfrVHPF+xha8SYLuy/uKs5O2xSBwwlVDeoLhu5VzIjgqOLWHtrX0iRujNnA+TgGr42XDWpaJpheS5gniA3aMn0/UECuffhFOqcT2cTAnzX8vAO4z3FdgrrhOdtIlhtpBIZhgvLkYH/KO5+tD6qrVWf/rUkADOJ2uu0lCEW2bXOMAAnI/SUxvb22aZsMCG7/NWs8PL63m0uMA7qSDVQ+JeEdU0xnUI+VPcYzUpwDxHe2NzNFIp5SMn4YVAyNqNNsXO9WHHmcCxT9anKnz95dzXUt7fmckDIyaS8V9zzbN32FBms8VT3TYZ9ia+6M/mvmnNVb1VhWOSBzJNPudj5z4lxeENFSWFLmUjfcfFNS4n/AkvAFHuvY1XHSuILiyiCBsr/pPapa54lecEdsbVMbENRXHMFOj1P4kl+VzniPKxvLq9hupJJsgEgr/p22I+KWkyiV5Fwc52NB9nr11B5vIxxIvKw9xTM0+7s57SNkA5gMN75oOurdZgEDPadWM2lO7acE8Y7QFvLPlchewwfrUI1q4BOKZ0ED87l1HqNZL2xAjJCbnpTC2kLnPGO0Oq12Ni53HiKEwrynI3qInhOD3NG1xbPGcnv1FD0qkkACl+BLFXYcwUkj5V5cb1BypkbUXXUfU4oemwE2FcxvU/AgfcJkGhmSNWDb4NGc+PbrQ5IornMO3cQXYb/fArei9G+N62hCvmfepuK2LvkjFZImYAd5n00mSQEr9qtNoNk4giBByaVXDmkgSiZo8qvQe/0qzukRqF52UD/an2hqwCxnl/9Sa1TtqUZxyT8+0JLa22GB0qb/CZB2rPbmE49YqdzEO9NSZ5fuMXd3pasjAjbrUbaKkc3LzDOOh9qO724TBVaW9/AySpKrHIzkfFJdei+nnzmW/otrteFP5cSM1qyV5hkLj4qF/C2iWrAgBjt9awX2sK5CZw3SoWVpJbSYKdwu2Peqq9Y2nnmeq1+qAqjIAIkRqccVnaFreQq53ypxvW5ZahazNEZpSJSoyxOx+9AF9b6zI0cTIVBXO//m1AWs6PrcUHok5TnPWktSar1S3+3MLK17CeS3PPky1Mtg0i5jOc70mdfnmspHilQqwGRn2PcVBcJcSavpdq8F8ryRluZX6snxv1FDfHfGFnqMluIycxoysxGCc9B9BVhrdiVBH3i5GtU4Kdz7eINy34YsxYY+tRtpxCbS7DpuAemOtLm41EJGd8k170fTNe1WVltLZpD1J6AZ9yaIYHIxNWXV1gliAPJMuRb6gdUskcxYyKZ2l8MWc1tG8ltksoOc0leB+HOM4bpLe+sSlt/wD1SwOB7bVey1sY44kVV2CgUboqrTaxsT6R2yO8qnWOqaX8NSNLqDvyd4B7fqIipuD7Ly25FYHGwz3rFDw8lnBtEOY9W7mn3caajDIyPjtS81OG9txnk8xAc7fFO/RrVwwUY+JU/wDqmqtpFb2scHPJ7yEtdJEa5O7Hc1tmzIA2pDap4r/gL/yJNNdQp9fMQCB7j3pi6zxpY23Ck+pxMpYxjyP+Z36fp3qRNVU+7HjxBbtHrgai9Tf6pwh8GDep8aaZa6i9lCjTzoDz8uyqR2z71XninUtc1JyZn5YUOUhQbA9Mk9zQjwXHe3mrXExcNgEvk7ksc5FOG/iblZTEfsKRX3XOCDwJ6j03pmj0rKdge3HLE9vsPEQSSMuxr9IGZgSNhRrNY+r8mKjXtSCdqUFpcMiAEsLmTOMDtUjLCpgTmADDO47jtRE1njJ71rTWxKg/pUJYTW7MCMMrjv8A9qkoZTk7kVtPbHP2r3b23NIAa4zJMwgtI5ZQoQFzn+UUciTWsQWsxlWMn0qQQKYXClssUAwAN8GmDqmp6VZ2qm7w7ZDRxjdyRuOUf3ptXRWaQ5swPMr2r6i1WsWkaf1OxGOTn4EV+s6BDpUcR/FozuMhCCGx71G2EAJDMftUfeX2p6veNNcOEUE+XGDkID2H962YnCKfUcjrQhZN52jA8RzpxqRplFrA2H82PHxDGWYqoUfrUlZ3c3l7scb4oG88kgb1uveAKN8ADpmu9wM59MgYENEvwJcA0/OFuV7dpmcb7DJqn8N2xY7Y370bW99OEVRJgA9BRVT/AFAdhFOu0AsrA3YPv3l0kSHIII/2rSv7aJ4/y533xVW7TWLqGUNFM4O2TnNPO31+Oe1jLsA/LuO2RtTZ30rDDY/Wea6vRarSOrBywJ8cGIG2nGBvRHDJ0pcW8pBG9FkE4K4zVTrsh1lcNI3zjfrWbB5agopsjaphHBApirZi9lxMm+eleff6V7PTr2rxt2PQ1JOJ8wK+EdK94Ir4MVzMnk9DWB0GKz4r4V+prRE2DIWSFcdKgLiDK/ejFlXbFR0kPXahXTMLR8Rdy2wGaG54CCdtqZs9uD9u9D0sHXalzpGddgi1lgLA5FClzabNTNubfcmhyaFTGRQ8LHMUwlubKXzY8gg9qtdwVxlDqESQyMA4X3qvF1aek7ZFQ1nPJYXSyR7YO2KPovKGCX0LYvz4M6IjDKR2NUq8QPB0y3LX2jrHG0j5kiYkKM919gf2p+8IcTR39sI5G9anBz3ptMFkQggEHbFO2VLq8HByIjpus0139x7yiPBfhreWeoi71Uw5i/4USNzAt/qY/HYVbCO4htofSoK/6T0qC1rT5bRsq58lmzv/ACn2zUbJYm5tyHd8dt6qraa6t2BH2M9f6Wmmv0qMjA5P1Z8H5kVe8d6Yl4sBnhOP5c539qWnGl3w1qmkXHmQRthTknpWHVeCo5rvzVXc7kjbOKDNR8N9Z1KNhbyshI5Vbl2Ga5R714Iz+km1WkTY26sE+8pLqvAlrcgy2EPK3+gnb7ZpGS2t1pd2fMiZGU7gjFdduEPDEacGXVj5s+/KRlUA+/UmhTxC8JtL1Oymkik8t1U+WcZJI7fSnlVzYyVOP5Epd2kyPpXB74AlQOF+JluY0ilkIAG29OSPTYtQlijiHM7uAo771SHV9G1nQboq6sMHqM9qavAXiBNpup2k8uHCOMg96MsqqurOVBPgwenWXUNjJE6MWnhx+AtFkblkkAz+X0r9KrVx7aatag8iBgxxzD+U+2KvNwpx7o2taaJDMgbGGRmAIpN8bX1hd3EVvbKrt5gZ3H5VA7Z96r+pDKoAyPBGJaa9VpmqLb/qHYeT94KeF/D99aaejXY9UhLY9s1enRdBedFaRykZHQd6T/C2hyukTFuRAQcv1/SrkWNqiwLglhjuaX16fd+aS6rX2ClFTI8ZxIy00qzhAWNQvz/3oqMEyIDynFZYbdAeZyAB0qD1PVwByqxB7Y2pitdaDgYlaY2WP3LHyTI28uHBOUKgDdjttSi1u8lmKCEHIfGM/FF9y088bhCcttk79a1LbSmQlm3I79vtRNeme5gB28mTCyunk9/aedOeSKBfM69ay3V1Aw3VTX65XCYxg0D3cjoG26CrMD6aY8AQNNPXa+7OJparpnD2oxtFd6ZbzoeokiWQH7MDVXeIv8O/hpqxZ7e1aykO+bZ/LA//ABORVgrfUFkdlYgEUQ2lqbuQEZC4P3+KDQI4yuQSfBxDbtPpVUmxQMDuROWHEH+HvXtEkMuia7JPID6YmQo/2ZCRQLrMPilYaW8GoXOpW8eP5+dlIH/MeldzNB0RCzSNGAw26Y2qb1rRbeeymjkt1cOhUgjbf60Z+FtNTFnBIPAxKPfqNKurwlQ44yeT+ntP55OEfFbVOGjyW12zoDllY5HzV4uC/wDEdoF3PGuqP+H267sM/atbjbwh4Kurk+fa/hZOY5MY5P1xVYtW8ArEKz6brJ5t8K4DfuMGhFsr7ZwZc00nVhUfRK2Iw/2kHj4zO0mg8ccParao9nfwyqR/K4OPqOorLxReW3+VSgkFXUqQT3Nfz+twJ4maJKZrWOZwn/yQOR+w3pv8D+IfFs17HY6rPckA4xLzf3ou/Un8M6gA8SmnSakakLYoX6snIKmPLirhkWVzJPCh8l2OR/pP+xqb8NdP/wAw1hrXmI9BcY+OtOyygtdV09oZSCSmD9PetLwt0WLR+N7o3UyIq20ix85A5yzAADPU4qiW1fUpB7kS06bWW6a9LEJBU/34lu+HeG4bZvXkBgB9xTsgtWtFHpGD3HtWrZiymVQkiEkdTRRIRDakFuYe3amwq2CTarV2X25Ykk98wfuGAJY9ulbWntzKC56ZIpc6nrVvbvtFI+eh5hWrp3EJlnCuAFOwwelTU2J6q5PmR3aTUNpmZUOMd4/7Y8zZxX7WIS2nyAHBx1qHsZwcb154i1iys9NleeYRqFJYk4wKtwxwfE8uuDCxge8A/DzXL680pROytLGzpKQMDnjYqcD7U3jcy82OYCqreFWvW13Z3Lhk/wD5u43UghsuSG26Eg9KfdxrWk278rzqG7jqR9cUus1+iqqRnuUDGOT5Em0HS+oW1VKKnLbASMEn9YVs0rLuT9qF7uxaQEnI+tStlrVhcD+FKjD2Bz+1TE11EVAx3qejVU3JmqwMPcGd26PUaezFlZBHgiR+mibyUQgryk/QiiG7uWigb0FjjasttJEUAqK1q6SC1Zgw6ZpPbWybjmOqHFrIuICajpkN4mZn/MPUp/WlrrfD2jCEoIf/AMhtURq3GNlbXBlkuQnKPUPgVR7ir/EmZeIX06wtf4MY9TuMM7Z6j/lpZXixwFGTn9pa3FmmqQsHAY8YBAim46lOm8WMhfIhk3I22NLPxDjgvNLWZMkqM9PeozizUp767luXcs8pLMT1ya2YJZb3QcbH0kY69RT/AFCEVLnuoH8RNo2O9/8A5ZMrbwHrjaTxrpN1naK6Qke6k4P7Gv6PNNn0+501XiclSoxuK/mWu4BBqJyOVg/Qbb5rud4P6ve63wvZMqvkRhC+djy7VNRqkpzuOAw/mKNborLNQHX/ALdp/Q8f3htxpBaPaPzjJVTynvVO7/8AA2aO0aLzNufc1ZDxLvU0ezZrg4JHc/7Vyv4n8RZnnkSAYGdiO9Q0BGve/tngfPzCq1aqoVZyTyfiOKbUXec5JG9Pvhe7txCCTzGqC2Ot6hcRCSZ/tTL0vim4j5UVq6t3EHEt2h21kNjjHEvWbwMxIOxO1SsLuTmkFw/razoOdt/rT50yZZEG2RtQXjmWr0g6BhJaN25sUTWN3NBIGRiOmR7it7T7FJplTbJBP6DNTFzpYR8jp7fNYGGcRLcqNuQgEY5hNFqysVPIfpW9JqcsmxG3t70HC3eMDPesZLgdd6ILuw5OYuXR6dTkL2+ZKXkyydTvntUElu0jkjpk1ryO+dzvWLzJhjlJ6dBUeIegI7Ga91ESzDBwO9BV3Hy82KKZ7uYKR79TQhdS5zXBjehm8yBlQsDUeIubK9Aa9TSsDt29qxROWdeY4BO5rniGluJOadp0XnjJHuPmm9Pw288AKA8+B0GwoT0lIjdQsV5t9h7mrRWdzbRIkbBdgM/NMn2JpfygknvKJr9Te2rrKORhc4iRiW4s0VFXDJ/KRtRtbahcNCeQDm5Mgdh9anuIFieOJkAALHJFQmmyJGHXIHPgE/8ALStLbsMFJ7TDVRaq2WVgsD58wdtZuJrfinTmkuSbS4idZI8elWH5SKsvcSL/AJS0vRkBJOewpJ6rOJHhMeAIzkH5rHqHErpZTxlB64nXr3Ix0qNLr6P97MfYnMiu6fRqmBShUB4+kASVtOJrKeZkjlWRvg5A+9StxMjQtvue5qsOj2/4EZRtzvj5phWOo3TXkJCc4ByRU9t9hXc/ePT0WjSt/pMSFGST5gZrKXUN4XKOEJ9JIIB/WtzSuIbe1mBlIYex7H3pva7f6dPbS/iSWIQ4ULuSPaqY3ttdTsxjiKAkkD60lNgLbZfOmrTq9OVsXbtAGe2Zaa84s0nkyAC5GAoGTUd+Eu9Yty8cfKv+o7dKHPDPTEaO4S4tlM4IIdhklT2GatPHp8dvbsVGxHQdqf6XQG6rebOM4wJ5z1jrNPTtXZRVQXZSPqY8Y78ASi3Exn0uJxIVcFcZHY1QrinXWN4rQyY9RBFXN8bNSGnRFc4WQE/SuZYuUnvSwYnJ2z81J+GrV8DkCC1dU/EIHGeffxj2jp0zUpMxvIpIDAkHfart+EXFGkJq0lqbhc3PLyIRg8y5OKqLo+kW1zYQsZwpIIO2QD80P291c6HxHbSF9oZo5AR7A9RQisv4kYyCsm1tbWdMtHl14+45E/oT0yK1lgHoGRRH5CKpAGKQPDvGGnPaRPHIHDqCCD709bS+iuI1IO5q1NuIBzwZ4yuCOZ9eMVHz26SKVI2NEHKD9KxmPvXAbE62mVq4q8MdJ1ofxUIYfldfSw+9KriDwwvryPRtJtZGjtYyXnlbflVdtvdj2q8ToBmtN0P3rpBWGLbBk94zTqWtRK1FhwhJUHkAnjMS+h8D8P6LaiG1s13XDyOOZ3+prWv+E9MmJJVl+hpvSrgdKC7/AFO1glMZyWHUAdKlZlC5OMSKm7WNcStjlieTk5lceIeGrWBGEIJ9yeuaQ0kADke1Wx1WZ5y+wCnYGkPrMFvbtgD1HtVS1prZsqAJ670rU2mnZY+5h2PmABgHsKj5bfbpRT5eQDWnKmTgUoMsIbMCJIB8Vrxp5bZA37UUSw1omIVzmFq03bTWr+Iqom8tfcLkj5FFNzqOm/hXSEs8soHmSyHLt9z2+KAmj5RkdagbtzjA296lFj7doPEwpUzhivPxxn7yfGrpECijmOeudtqzf50S3N5a/Tr1pfrsa21VynMOgH9K3JixjtukjtrG3uJJVImjyoQ7qfmhCS+yg+aCQ9zJAo5jyKTgdqk7d1eMFzj5qTOTxxIU3L3bJyZPJfuTgdKn7e9kOAGoI5lA23qRt5CTsalUnMkJJEadrPK0kaRqWdiFVR3J2p2f5LNacxEuWwAQeme+KUHCl/Bpt+LmaNXKqfLDdAT3+tWluraW8s4phGYjIoYK3XBpx+BrupDPk4OVA8Gec9d1V1d9ShcV+W/7j7fpKppkY/vUxBP0qIBAXY1kU4PxVTBxIiAYbwzkripqCbt+9AcM/wA0RQSde1G12QB64aI+QTmswxnaoaJxgDPUdakVdfvTBWzF7LiZyMj4ryBjavo6mv3xUk4n7GO9ecGvudhtX7NamTxj46CsRiG59+tZwNq/GuSJsEyHljXFQs0ROdqL2QH9KjJIs0K6QpHi+uLfIOwoTntivamlNDt0oangJztS90jRLItpbcMMY3oTurNRuB8UzZ4CN8VAXEIYUN2hgIMAdPvZ9PuOdD3q33DHEUGo2yAsBIB0qp11anfatLT9SutNvY3RyozuOx+tMNPeUPJ4gGo04sX5l/poYbiF45FDKwIIPcGq88QDV+HHMjRy3NgT6ZV9Ri/5X/3pr6BrsGoWqsDh8DIPWjVhHJE8brzKwwRT4gOuRgxbpNXfpLjgkDyD2lcdD4usruRPLVHB3IJ3p5W/FNjGUiS0HOegxk/t2qiviBwfxHofEAu9Ft3eG4bmCoPSD3BHatO0414l0kCTUdJnjJUBmA5gB9aVujVnhsZ8Ey+2dRp1FQLIytgfUCSp/aXZ1nUnuMmSAqAvpwP2oO02SOQOkybjPKGGM/rVcp/H7R4YjH+Hkdwdu360uo/ETjfiHUue0hiiUDEaZJwPk+9D4vbJAPye0k0Wo09dwDZYEf7QTiGHifwfps0E0kjrl8n71yp1iz/y+5YxPleY/auqer+HvHet2xludZsovSTyLG5H0JJqg/FPAXEFjqb21xGhyMo8bcyOPcGpNM+1yC3fxIeriu1g6adk7DJGMwU4a4xkgkVHJwTvXRjw4vNKv0aZeRnQD0Ng4+xrlzc8I6pZEyGMkDfIor4d4ov9NukMczRsh601sAsrK5/WV7T2mmxSyBgO4Pmd8tFvLe4Crny3A2X3pix6pd2SAktjHQjaucHA3i/pjpGLyIJMoHrG4PzjtTb4h8T0vDb29rOW8xgvTYA7UiOmvG76Tx29pa21WjZCRYoXHKsOc/EuO3E/4hTyAn4FDrXMbzc0itn2Heozg6wVrWMFtyNyaYEmmqr45enQ46UrK2ttOf0gwu06OQBgTVsriPzgMEA7BfajGTl5ML9aX8f/ABiqoQ6n1f8AaiJpJ1QlkPTtVs0LOK+RFWuFTlSCYN6m7I29AU0sZJy32qe1O9L7YIxQBKoZyxcfG9TWu/aPtDpqzUCcwO1DTvOuOaMlB3x3p1cJQZgQTEgA+nGx+9I/X9eNhEeXB261A+GXH1xf8QS6fKRynJVjsc9gB7ULRdp6tQik8scQLr2V0DsAeCuT7DtOjGnxwoDjpWTUjEYGAAoWF7HBFkvv3pN8R+JGl2EU6rMtxMBhYIvWxP8AzY6D3q2O1deSWA4nijn6hzknsPJlZPGu68hAyyBFSPJx1ZicAVU/gLQNa4j1hibqSK2j3k5epz0Ga98aXHFmr6qfxaOwkbzEQLgANsNu2KspwLHccP8ADETpYNJJJMTMe4qgEpbrixyqk8/pPUtCNVR0xAG/1GPAz+XPPJjrteCbS2swITJkD+Zi2frmlpf6NpL3JjltY/NJODgdf96s0moRHSUuEXm8xMqo3/8AMVWnUNP124urzUpIAkUScyIWwxC98f2prrNOnohqweRwBzx7wXR65m1AS1sr3ZmPaBo4a4vsdQiuNOtRPAcBo+YKcf8A5UL+Kn+ZScNzyxwBJUU+okDcdh7msNnr/ihxbLyaFEFtY2KG4lIjjyNiF6lsd8Vm1jwT8UtZuLW3uddtmh/+XlVvSD2XPX70LRozXXudjk+MZ5nV9une51rBYZOcdh+soNoHjX4h6D/BXVJyi7cjnnA+mc1ZvQ/8WXESBUu1DgbZ6Va3Tv8AC34c2axtqYnunIOQ8pCk++FxvRdH/h08GZEZF0O3zjbmmdW//wBqLeylfzJj9pHXXcn5HAAPHPERlp/ig0u6TknhUAjfIFMjR/GXgu6lV2uBHv061H6l/hJ8NLtn/DNfWTf8lxzgfaQH+tKq/wD8G5Cs2m8VTI3YTQZ3+qGo/wD8YkfSR+n/ABGi63qKKQFBGOcAH+06JaB4ocGzxoiagm3+pgD+9TPFviNwLa6RI91JFKvKSQ3K3NjsB71yM1D/AA0eL9jlbXUrK5UdDzvEf/3hQNceBfjsB5R00yg/zLOjKP1Ipl6tRpKEjBGO+JVLdJYb/UORzyCv/Ms54R+K1rBq2pQBIoI5buWSKMbDkY7D6jv71cfXuILMRRzRcvNIvMVHauHmtcGcWcNXqw6jbSQ3GOZQpzke4K1qN4k8V6egQyz8o29YP96qev6Mmr0+yuxVBOQ2M498H5ll0nUbtMa+/wBC7c+SB2zOwdvxoqXClXMbA7EVajh/iL/NII5EYb/mHsRX89Nh4t6mZVMztjvV0uCf8RPDVlbww3ZkhxtzqOdT8kDehOjdA1Wg1JP4kNWwwwGe86611hdTpU/0yzKfzYyce3E7MG95I+v3BBpEcccTtZ27lpNtzjBO1KbSP8QfhvcRIBq8BZtsHmQ/uKI7nj3w+1FOaa/gUN0LOpB+lXDWaW81kpYMexlX6f1DTJarNWCAexO0/sZWa21m11q4uEbmHUZYYP1qqfH3BEGnz/j4JeZiOZl6105is+DYi0kU8bLKueUgFWB9qQ/iDpeiDTnkidEVvTyZyu/tmkmgqf1DnK+3nmXfqPU0t0YX0zjOQT4+ZzlW5a7t0bHajjh8OInh3G+aGotOjt7mcRzDlJOFPap7QpLhtUVPLZVLcvMRsfpVluBNROPEq1DgMplfuNtNNtqTPy4yc7d96v8AeAfjRpOg8HS6ddLi4ilbyj05kbfr7g1XPxQ4dnS3iuAjMucHb96TegPax7Kdx79aVVbHVMjO1s/tC71Iu44/zLQeK/iQNauZDzPynoP7CqsaNoVzrGqpHDEzkkZwOgNGa6Zca1qMFnbxF5pmCoB2+T8CuwPht4U6RoOiRr5KNLygu+ASzdzmu9RqtrBVXn2HYCF9P6d6zM7thFIyfJPsJRGTwtvIdMAWLmcjpVfLrRb/AEy8MVxC8bDccw6j4rtVrGn2yRuVTJA/SqH+I0EEgBeMlkJ5d+mfah6tU5s2nGDLNqqawodMADjbEjoV20LjfqKvTwmscmnpMxypHaqFWkZwuKsXwvxFJYw+SfUh/ajL6mZfp75mq3YIVzx5lo7W9FvdiRBtnYUYrqQnU4236GkENXtpgOQkmmbY2sIt0dnOe4BodKwuM8QN6/rJB/8Aohi07PgdulYzy5GTWmjQ+VjmORUdLcY70SAJgWSpCbgkVGSlV5sd68eeeXrmouWTO3vXWJ2o5mlPjJOKGbgZJxU3I3ao2QcxqIxpWMQXkhY5FSdrYIAHcjHWtxoTnpmsYiZiATt7VyMA9pK4ZlwGxD3S7i1hKMDzO2yKB0+aZy3UTRAO2COh9qV+nWyxASLjmK4z9aJ8xY6er3pk+pVqggQY8yl29P8A/wAkOLG4P/0QmvWmFuSDzqBnApfrqkkcm/QnY1m8+58z0klTswzio2+iUdVwCKVICpJj+ilc7WAOe0Nor5WiBIzQNrWqxv6QDzLsNu1a0E7RqR1GKgfKku5m8peYjr8VqwqWU45jHTVV02Es2FHIM9wzswzvTq0RbaLTTPK2CQRilBJbXMMQACfPqoQ1HVdSiQxxsVQHJ32GKhscL+ZSeOxhWp9PUptrtAwctj2jP1fWYZJBCjHm5+p6gd6J7HT7YwqxQEkbnpVcNLeCebnmuG8zPQ7Zp56YwVVBkJGOmaE06gMSQDmQ3rZXpgtTE4/mMjQpRHqmQnKFXBJGxzVg7uWBbMsSAOWq+2zwZVg4HuD/AGrR4n4hurfTZMKSqrnKnqBT1XZAxDfYTzvUVtbaTZWd3vjxObP+JrW2m1aOyhYEIMtj3NUc4ctrj8VmTcZpu8dajNq3EFzcOSWZznPbHatfRNMkljbyoGY9yBWgz4yeSe8509FdZUA4AOefnmSUOqTWLLg5RnGV7detEupRyX4AC+rOAag5tKneSKNlAJYDfbB+aduh6JJJqnkM4Ij3JG4xQNBZr7CVPxxLJcy+lWAw5/zLEeFOlGx0wI1y5LYIDE+n6VfLh7UFiCq8vM3b5qm+lWM0EaCHLkdl609eHbDU3uI5HQoo3Gepp7TYygLjn+YD1npWgWhrBaicZA4BJxLg21wsigjet4j5oY0tHVFyKLD0+tFuMNPKV7H4mk42OarxqfHNxomsG11KLmiY+iZBj0noSO9WIY4zVbvFzTo7nhtpAg543wG74YdKKo2lsEZzJ9OtTXojj6WOPkZ8w9h4p0G5VTHfwnmOACcH96WOqyp/mM/K4Kk5Bz71zNg126hmdBJ+U43zRTZ8Y6taXIlSbIz+Q7g/Wkmp11BVkUNuBxzPQaP6f9B2Zb93GMES8Grs9tCkpOUZMg/TtVef84huHdpTzEk9a+TeIsd5w/cQyD+MDzIPrscUstGhuLy4Copx1Y9gKr1mXHftHunoKIdw5z/EbUQa5YmJMKPfpW/LYosHMGDHvWFZUhiRQcYGMVjnuXeJUwVHXp1qLHEbLv8ApxwJDMgxWmYtvvWd51WYIFJJFb5QlM1rEMDYgnMp3+lC9yoJ270X3QwelDUvxWCEAyGWBeprWvJlih5QcFtqkiwBIoC1WYidgTjH7Cu5IYf3GsaYyxrDH5QEaggnqQNz96+2Uck45VGQehpFyzd85pm8CcRPpmswSSQfiIAfXEev1HyKlUpuBbgZ5xByxVSEUsQOBnv+pj607gvVrhY3SJuVicE7dKmxwtqUUgVbZmPTYd6s7pXEOhanDG1pMpUgZX8rKfYj3oygaJX2NWeqrRPgryPvPOtR17qVdjq1KrjwQeIpuDeAJ/xEd1qKDlRgyw5znG+W+PirIaxbvNCpQqSDsOm31FQsV35cm52IwcVEajqEQUkTHO2cGoNXYtLKBwPGIBp7b9daXfBYf7ccCUvQ5HWvYbfFaLiS2lMMowQcfXFbaMGwc1Tu0azaTrtUxBN6sE7iogdNjX5WKkZNbBInJAIhvHKfepqOXYb0DRTnHxU3bT5z9qOSyAWV/ENI3BHXtW0BtihuKYh6m0cEUwRsxey4MyV6Pb3r71xtXrAz0xUmJxPmK/AGvQOQQeteCD77VrEyewN/6VhdFIzWXAzXk1yRNg4kPJHkmoGeE4O29GBUHO1RbxL7UI6QtLIupoeZTtQrcwyK64GRvzUzprcHO1D01uKXOkaV2CLueEMpoLvLQdcdDn9Kac8JUnbvQ9PCGHT6ioIWIHaVrd3pt0jgnk5sHPtVytA1qC/tlYN6sbiqY3dqFyMGpLQdan0q8Dc3pJ39jTHT6goQD2i/U6YWDI/NL4KIWOJFDKeuazz8D6ZqUQOFZT1HYUH6Tq1vf2yOjgkjejaz1G5tJAyNt3U9DTh6KrsEiBaXX6nShkViAT+xiZ1zwC4QuoWY2IVh0YbEfIpAXfhFrGgN52laihU//FKv/wDcK6fWt/a3tkzAgHoVPUGoqz0W3nnYyKGUZwCNqgsTa+xOMj7xvTcpVrbHsBXypwTOUuo8X8V6VEU1DSJQBtzpuh+cik5LxDbavqCNLCqgso+gJ71281PhyymQqYoyvsVGP0qonGPgzoN5zzW1qtvNnrGOUHPXIFHDT+nXvYKcDnHeI7us32OELMyZ4yeR/HME9D8LeG7izUzWkcwdAcscjf2qqXix/hweISX/AA/GGVQWkgz6h8j3FWIi1jizguCNJ1F9YIQrED+JGPf5p46RxvoGrQB4LkK2MlD6WH2qOuzSvXnOCP8AcP8AMiP4hmxvZHB7HkGcBmtNb0i4ZJ4XjZT0Oxo60riqQMoLkEdP966l+IHAulcSpM3lqr8vodVxvXJfjDgvWeHb5/MjYoGwsgGx/wC9Q1akFipOD/Bj6zTXV1oWQjIzO4/hDxLZ6zwvY3Hmq0ijy5cHo67b/wBatS3ktGDgdO1fzjeFvipqfCmp8yuXt5SBNCTs3yPYiuy/CHibpOt2Svb3KYIGVY4YfGDSu2oox4+kngyTTg2fSTyP5EcupXMWn3SysByuo5j80I6txdax27FcbjagrjXWYprOFEcE5ycHsKr3cXvOVXlJ37mhzqrEyAePEvuh6ObtOrtxgnxJrWNY1e/kYwsQD7ZFJDWLzW7WRVkvmGT0XJP700b3WGtovLijBdhj6VCaZwZqmr3HnyryL15jvmu1VnPdiY2upv0qfTZj44AEg7C0k1SBVa7lZj2JxRdo3h1q2m6xb6lbzYdCCVLYLAHON6PrjRH0u1BhbmOd8DP9KmNL13WLhkhk01ljHp/EM2MfPL3ohK6fWVbQw7EEc4lV6pqLLaCvpi0MMNjJODBXX7/jS55oZpUsYJCV50HOzA+x6DNNngvgqzt7KKPkUIBk/wCo/LE7k0F6hZ6jJcwYnSQqdtun1z1p8aNHOlsGkcllA6bDP0q1UNp/VJ3Fmxjcf8TzjX6PUVqgWnapHcD/AOmRN/wjo/nicQr5gG5PZfbBqK1ebSLHTZOeZF9O429qYurRXLWLMVc7HdRuRXP7XeHNQ1HU38vUgYi35SSSB9BS2+1a2IrqDHPI+/mP9BXd+EAZ+FPnnEdfhnxFHcJdRTTKAsrGIE/yk/Nbvijry2+hXEVovmPKvIfLPQN80toIeF+GLAGd2ebABboR9AKY/Emp6W3C900YjPLbl1yBttt96TajWvp6lqwMn+Iwo6bXYbMHIC5Y4H/0wG4L400/T9Gs9NsrFoWiQKEA2BPz8mrVWN/JFZmWZ9wCzse1c9OBdf0lHLzlGfrzN7/FPXVOPrJkSG3dXyQMDfJNE1XPWhZ23Y4HxO16fSNOqqVQsf2ElOIOJ+JdVvfI06PkjBx5rrknttUjoPh9cNepe3V1LJPt6yxH2AHb4o/4Y8ye3zLCq5HYUyUiuFYAH7VFsd8N3zORp9PWdpAfHknIk1YWpiUFmLMBjNEKRzEjCH61v6XYgEF8kk7004bOIKPTiiF01uO+IDb1KislQMxbQR3quCRke1HENtGy4MY+anxbJkHHSvrqibnAo+hHXOWJzKrrtYtxBVdv2gU3Cugvdm4exhaUqF5yoJ5R2z7b0IcQeHnBmq27x3ekWsqt1DRqetM+fULdBjmz9KAdV1pIYHZSGboo+T/YV1qbqtNp2dwNo7DEX6PS26rUqiZJY8mUK4r/AMKPh1qVwTZ2zWLEE/wnwv8A+yc1X/U/8EF0wLadxDj/AJZocj9UNdF4b65F157MW5m9RJ6j4p9aPfwyqBnvQXS2vtV7LEK5OVQnxLH1sHS+lXW6nA+pwPM/n+1X/CD4uWLt+G/CXKjoUn5D+jgUkdU8C/GrTHLScOXzBf5oQJR/+4TX9VGFI3FRd1DDyboD9qfBlPGCJVzqrwOdrfcf8T+SSVfE7RnKSQ6pbY6hkkQfpX6DjriVJCt3LNIB/rJJH61/TBxRBpyW8rSxIVUHIIzXLvjbiTQS1xC2mxsOYgAopI+h6ihLjajfSgb+DG+lWixQT9B+FyJy61Hiy9kuRJG5Wm5wlxpcC+sjLykBxsa3dQ4M0jWZ5JLVhCxJ2H9xSj1vhTV9CdWcEjIKsOm1R+srAqTgkYwYUaLEy3dfcToZxnrun33DhDIpyNjjGP0rnwNRjhu35Bjep+Diu/k08xSEsuMUueWWW5BC4yaW0UGvdk+Yzv1AcIVHj2l9/AxYJOJpLmQ7rAQhI6Fv+1dabDU0S3BEwCjr7VzJ8C+GI7mFczBGYsSTtnG2Ks3xPZapokRLSu0ZOFyfbtSXVttdrOwztz4yJddDU/4RKt4BfLgY7iePEHj+eFnS2OSucNjFUc1DV9R1W6LzTM++y9hTNu9O4m4llIs4fRnBdjyj9aenhz4PXdpfRvqAidmJ5VVsgH5JpdpL2RizEFs8AQO7T3BySG2gd/HEqVHbXEAV3idQf9QIzRPazqMEHvXVa/4A0q5sGgktwCBt6c4Nc6vEDge94ZvwyhmtJifLfH5T/pNW/T6kOQrDBPb2MCTUrux7ye0MxyxlzkkbAA96e2nai8EYzHsR75qmekavc2swKHIP5lO4NP2x4hSSJRyhTj61moVlbkZBjqlaLEIJ2t75jhl1bnOFQL7+9ZIyHjV+RiCaV63ZkYcpG/WmvpZn5EULzA1GCFHeQOmwctn9Z8mkjwOVCp+a0WdunWpW9R1LloiMd84qBRXbtmpg3E6rAIzPh9Tf+bVspDsSOxr0kZyKlyqpEuepO9cE8wntiQDxEEjb9K0zDlvbNS7Elia+hR9K4ko4E27KKdTs2V9qJDESuaHo3dTsam4pDJ3x71sERfarZzxMltBIZNlLb9hnetq7SMx4YCpa2VFIKOwYfvUZeBpXY46muyCF+8ER993tiBVzDE0DLkggbMOo+aSkOpXtpqfJK5VC27diKsUNPR1cFyv0GaAtT0WORHyoJXocUA9bghhkRqjoWZQxhGHtFiWV5RjsT3+lAF+0NzO7IvpbbFSmlaTfXdqymEkIxAOR/SpAaI8Jw2Vx7jFTPY1gAwMCFaWrSVOxLgv2x8Qd06xt+bBGBn2pjpaW6KMOQKANQ1Cw02IsZAWAPfNIqbxHaa9NskpyewoVmSvuJ1fdWLFG7buOABLTXOq6fa7Gc5HtSv4o4ytRYSIko3B2zmkfrVxcPb5Ejjm3ODSln52BXmJ+tEU5YEkYHiLNZZZSwG0ZIyCYC30P4q/lkC7MelWI4B0e5ERIiPJzZHf60o4IH5h6K6keD9jbz8G2TmAhhzK+VwcqcUwWuy0hUYKfcyjavVJptjFdxZjjnEr9rnDVrqafw7DmZRkyRjBBHxSY0aa50rWnSZGZX5kJxvvvXWK60i3iR2iiXcdhiqrcXcNR3l3DLDbctxzYOB1A/wBqOOnurrLFwSPaJa+p7rAWUKuR2PaTHC9zELZT09WT2P3qw2m34BGPtS10rhy6/DIJIATyj1Kd6kbrR9Zt4+a1mLAfysMGpK7baxlk3D3Eb6h9JrWwb1Vj5bt+8sVaasFUFmAoniv1lXt8VUHTb7VWdxOSHXYIfSD9aFOIuMfEuwtZlh063QAel42LsB/ejqsXAt9Kj3JxK/d0m1L/AE0trdvhuJbTiDiW30m5gFw8axSLsScEEUl+PPETg6HQLxJb1JGaM8iKckt2/euUvFXFXFOrXrS31zMzjbDZAH0FKW5u5HYl2Zj8mhX6l0+liAXsZe20YBP6yx0/04m2prLSGBywXtGBe6lDPdyyIcBmJrAL892pZfiSMDO9efxrAddxVLd99jMfJJl2LxxQ3/T1U7NI4naLTJ5lIEsS4OB1z/vVN4tRKt1oqttVmCyIjbSLggb5xvUi+JxvBUzoZokWmXrfjLiXy7RgCozuzN/IO5OdqjtSuo3upFUOqrsqsMEAe/zS+4E4d1O94Xi1OC8RlRpPQ/NmMp1C9t6JuYsJJXJJwWJPxvRDgdtoGJHS4NzN6m4D6QvtPFhi4uZZCMqG5V+1ZJdSEN3LCfyjH71m0ZPK0yGRiBlC7Z/5t6WtlPJqerTugwrMScnoo2FDHgEw02cQ2nnjcZHXsKGJzgnP7Vu8RvHYQRLyqsj9ge3vSqk1Z2XHmHB2NcrzzJFuAHbMY9tZxOvmTNyxdfkivd5pPDF2ysGkjBX8wYb/AGNIafWdSnZbdJWIPpCjsKYWj2McCc7Zkc7czb7/AB7CiBWW84h1FrPkheBLE8KeFvCd5p6XEt61wSSSqkAD/lOO4qb1HRNE0STFrbooA69T+9VV4K1vWRx9qAs5SYBlZ16LhRgE/wDNnpVpry1lvo5MN/EI2LHY0PZRe2dvIHOYXptXX6g9WwBSSMYwP/UA2u7OOTzIIzHIT1Riu/0FNfS+OdQt4lEqeZgDfvSK/wAqvbO4xMjLncd8/NFNpKoypFCetZUeCVMtFvT+lalFVq0cHsR/gxxal4gyvasI4SjEbHO1C2n32sXEDczsQxzk0GzkMQBGSPimxo95GYCrLg9h70PbqLLWG9ifmCHpOg0NZFNA+ognJyYUcQaDBqFq4/K+Mqw7GkFHJPZTfhrnaQdG7MB3HzVsxuKAeIuHrbUoMgASLuD3zT66nPInz9p9Rj6W7eIsEYN7VlKruDQ5EZ7SVoJlPMp2PuPiiJXBpVG8zAhQN6kYZgN6iAxJ2r2Hx0xWwcTkgGGkc4x81OQykYGaAYJSTuaIbeXGD/ejq7IBZVDlGyBWxgVAwzDI3qVSQHb3pirZi1lImffOK+4wetesivP3+9STiePvXzB9/rX099zmvuT1rnE6ngnPzWJlBBzWffJ3ryQK4ImwcSFli65G1QM8I3OD9KMnQHeouWIe1CukMR4vLi32oZmiwScUypoNj0oZuIBynalzpzGldkXs8IdTt/vvQTd2oIPMKakseCagLi3DDGKHhcFeHNcvdIugofMZbOPj2q6OlapBqFoksb5yNxVJ7i1wTtg1KcO8VT6RdrHLny2YY/8APemum1BBwYr1WmDjcvf+8vha3BhlBJOM74OKfmli2e0WSJ+YNuT81VzT9QgvLZZY2yCAT8UcaXq91p7NyjmQ9VJ/p81YUSpiW4Bx3iJrrhUa9xxntHBey8jZzSY4o4ps7CylaRt+XBx1pacd+NHD2iI63VysUgH/AAzs36Vyl468adR4jvWSyWQxAnlWNSxPycVzqN71lFbbkYJkdFI3qx7y1vFfGtncxvFFJ6WHrPx3FVKtuMILHVxJE2yMcZ6GgvT9J441aM/+ylijYblzyk/avt34WcWlwycpz2yaXp+GpTYreOc+Zbfw2ttw4pc+xCmdBNH8S9GvNPUmZUbGGBIyDQ9rttp2r27qyJNG43yNjmqRweHnHduA/kFgOwO5o70XifVtEf8AC30EiLn+bbH0qFatOzHa+T7Q+3V6sVqlyEL5JHeVn8QeDJNCu2nt8m3Zjj3Q+xrPwLxvcaddxgvgA469qstxXf6dqFlIjgOrjcGqTTWCWtwxQDAbajawQCrc/wCRFDsa7Q9Zwe86qaLxPBqluuJwSR0JolmdEwR1zXOThfiiW1dOZiMH3q32i8S292i80o+5pdfpASSvb2nrPRevUui1X4B/vG9bJG12sjIHJPQmrG207C2hVQoDAdKrvp7QzSIUYEk9qslYQxw2sYf1kdPiu9KCHOR4hPWTXYK2GT7CT6xRhfy5YigLW7Scxsyvy46Uyba6hdSOULQ3q9u0qMBvsdu1N2CsvOJTNKbatQNxxz3MRNrfXxuBGzAkHY5py2mrtb2mbuUIR0OaSV3a/hroyyTlOXcKKDLniCbUtTitlBZE9xtSg2KhOAMy16vTDVFFXbg+Zeyw4ht7rT1KSLjlILZ6/rScubP8JFcNZWwLOWY9MknfO1RPDzQx3AW4GRtyD+UfatLjbiI2CFIgMEbb9KHZUOLFzuHEqF2lt01zVlfo75lBvEG/vZborNKSSxzjYD6VNLq+oXegtEJiR5XIR9KWmt2etanxBF6Gbz5Dg9sH3q+fC/hdaRaYiykM7qObFVXqHUqNLtNqksT278TrSo7M2048SnfhxwZqGs35WTnWJHIOPYV1P4d8OtDsrRZPIGQB+buaguFeEbHRbv0MPWOn0pyajfgxqiMML3HSrjo3pv0624B3YIHtNXm0baV/NnLtIyRIYQFjAGP2qWtblV5BnJzQP5459z+9fhfLGwYnoc04BHmL9Srqm1RniWLs5oAFJbf2o5tL+GQAA1Uwa+dvWKPdH1zlXdt8k70ZurbA/mUDU6LUoN5yT7Sxkk8ca5ZgBS41bW48EKRigTVeJyYyqtzE+1LlLp5ZCxbJJ33rX0r25+ZzptBfd9TDav8AeEN1qM5JPmHrQbJes11ICTy4BGT79cVKT28xTPRaFPxaxSbgZ+e1KtZQNQgT2IMv/TVGnDFVGSMQrkcCJFPZRRPw1d+VI4L7c2wpWTairDrRXpVjeKRNnAIzimVYYBQBkgdoq6hRWam9Rgu48ZlpYdQi5FBbHxW87LImRvmq3NqsyzcrH1LjrTO0rW4zDktt3+DXSEl8YwfEp+q0bVVh1JZPeKfxGQjTLnBwVUt+grh/xNfGW7mOerE12v8AEiRrzR7uOFsGReTPtzbH9qp9B4ZaN+DbmhRmxuWGTXdmFsYfAz9416Np9TqEY8BEOAT5J7zmjpsk8V/HJETzcw+/1q5mocLrrPDYaSFSrx7HGcHFAmo8KabpXF1rzSLHblxzFhsK6X6HpPDEdhHAs8bK6DGTsc9xSo0tdZhV5A7yys1WmDi0knttA/mcBr7S20u8ntp4scrEdO1CotlE5ZNhnNdbPFfwq0iaKae35CU9juP9xXMjVtCNjckFiMHpjFQkslhR+GHeBKEesMnK5/aXL8GdQa3VisnLIjKyA/PXNW547vpNYW0h/M5jHMF3ClvpXPngGG8EkcsbcvQGupXCfCy3cMbseZyASx7VSepaXW32hKzmt2DH4InonSdXo66Ua7O+oMF4zkNNnhPh+3tbS3TlwiKNv7n603WtDMyiM4xuPjH96zw8PS2R9OcYom0+ymkmQqgABBPzRtdDVKExyJLqdXWVNisCMcZ8Q2tblJrQl8CZRiQ+/wA0i+PNJ03WdKntJ0ysgPq/0kdCKds+lvDJzpkZ6/PxSx4ujZLDYZIO1HsGAGfE8+ZEZsqcgnj4nIJ7KXTdXurSc+qJsA9iOx+9NLTbZHQE/HSvfHXD140r3scbMytvgZ2oY0e/eNFWTmQ477URfqmatTnnHMcUhm4J7RoIBHutMLTOIgsaIzFWUAA4646Gk8bsMNmBog021nnyyjYihEuBGWOBCyhyNxOI2J9XS9JG4YNkkdD9qK9N0qeeyNz0iywDE9SvWkSJGjnKE4YbZ+lO+wn1Gy0J4pQOWQ86Dupbr9jTMONqgHvJzlUrCHu3bzjzPLCBXPKc4rTllLkioiFWIy3epRVJqUQ0ADzmeNqyDPWvYQ5BxXoLvWzN5E9gbdBW9ExU7e1afKf1rZU4B+lReZGQCJMpdKhXmOwqSNzakc3OKEyOYijrT49JEYBADd+brRlNdlpIUDiK9UyUoH2Mx/8AjBz8Yj3AVGrLdxAp069a19ftFsXhuYlHITgkfNb8N5b3EKsrD5+KHOdzKe4M7psWytLEBx2PwRITSi0Fyy5wrfsa0eMbue209nwXUgj5U42INRmvX0VojMGAIBxS5m42tbrTZ7a4xzBcA+9QsU2sucNjgw1qRa6ngFvPaUV4o4k1OZpE5+VckZzk1EcDQrLqbPKT8e+aINaXT5rqVeXHqPQ7b140FEtLosMY/TNLFrsIXIySYtNLC4Ox4U5jw1zl/D5GxpbQIC2NqI9Q1NZyqgda1YVRO31p6FCricavUm64tnjsI/PCrhKDU9dWeaPmitiGC42Zu2a6cabaQ2seFUqvtikh4WaRZ6fw/Z5A55F8xzjqW3/arMG6sgm4xT/S17awcZLTyHXXPdqXYg4zgfYQVuZAvMQQeu3vilHLKv8Am0fmR+nfDe2aaN1eWbyMvb3FLC+hie85VXAbuD2o2zz27QZKnYMAp7R46MbOWELzD4NE0mmQvnGKVvD+n4THPnB7GnFacwUA71E7Hv2+JAuQ2DAS70OPJJjB+1A+raYgtiN9umeg+KsdyqRvQTxBJFaWTOFDM/pUD3+aEB77eCe/sYwrFu9drHOeDOYfGum6WL6WKaFGblyQRhlz81UrXdA09OYxO6/UcwrqlrWj6fqMZW5hDHBAbHqXPsaq9rvh7aZcx3Dqv8qkA4+9VTU6U+oSuMEz1jSapWrVWJ3ADPsT8TnNeW7xk4OfYihljL/p/arO61wetss7efzlFLcoXsK2+CLjw+h8lNRs5JLiRz65xmMHtjtj61ElLec4Hc4zJLmwPykysen2OoXlwIreF5HbooFO3RfDfjma4j5NOHUH1yKB/Wrh/wCWaZPIkliY4sH0hUAA/SjrTP8APtPlDeVFOuNxnlNMRXp1YYbePPOJxSl1tR7VtzjdyD+0jvC64t9L1C94dmV080GZI5FwyMwxInsVPVSK8cWcL6to9nevyeZbiJysqDIAxtzjqDTTubDTNf8AIkiP4TVLbDwM2zBvY+6nuKNNbvTqHBmsRvGI7lLKRJ4855Wx29we1Fas1GlGAwwGCIrqXU1WsdvJH1juCOwZTKjXUjJoUZPpjWABt99l60ruB38+a8mVtlKrgb7H3HXFWV4w4djHB+nxQDlkuBjc/wAkaGVz9eVa5/6HxZFpeju0cPPdTS8yM26KoHXA6nP2quqWZHz3JGI7Nq7wPbOf0h7xVqzT6lKqsWEXo2PtS9/GkSbjOaEZtXuZCzNzZJJPp9+9REOqyfiE9OSWFFqvYQhbKeASQTLs8K8FWrxJdTsQJIwwUfPzUndWkMF5IiD0LuM+1GOmubfRraJcZ8tc/pmgu/kYPI2CcsBj4FMGCpWP5MYadmD2Zb6RwB/mE3DekWNpG7QwhDK5eRsbsWOdzThtkHJ03PSlRpt4FiXJXsDjPXufpTiiliESkdMCpKmBi3WKSRjse0lItKivYmDD1Juv3pSapphtrzZsL7e2aeNlFeMhdIzytuN8Uq+KTLHcRiTKNjO46/NKNbXly20j5jHpOuWq5VNgOMgr7Qm4es0/BSsFUyh+pGcqR81PtpF5qEYSGJcg55+n2pcaFqMpCYkAKnB+RVldG1VEtMqg5ieorjT6NLCo8GFdS191O61QGLNw3fHxF1w/xBaapaRukgJIG2aNcAmuYHDPFd1o90hDMYsjmX2roRw/xHZapaxvHKGLD9/amisCJ4/bSVOR2mvxJw7DqVsxX0Sgelh12qv0V/cWl0bW6XllBwD2b5FXEx06UuOIuGLbUFEiqFlTdWFCXU55Ahem1GCFY8eDFuD6M186Ab71HLK8EnkzAK652O2QO4qWXDN1FK8RvPQLD7VMRvt161EhSDg1thiMY7dq2DiRkAwrtpMYzRBFIAM0BLOFO9EEE2QMUfW8X2V8doYq/McVlzmoZJcbjrUohyM0xVsxeRiZSDnFfgBiveK8nrmu5xP3brWM42r2DsP9q/dPetGbnjO2a12QEdcVs4G9fdsCoyJsHEHpY84wRkVATQk52+tGrxj22qJlhzkjrQliQ2t+0Xk9uN9sZoeliwem1MaaIe2SKHZ4dycUudMRpXZkRfT2wINA95Yg5zv1prSxEfTvUFPbgqTy/SoQSIV3n3hLiOXTp1glclCep7Crc2tzDcxB1YEGqHXVs3NkfY0f8IcWTWFyLe4YlG/LnpTbS6jH0k8RPq9Lu+pRz5HvHvxZwHwzxKkLahp8U8kJPlyMuSM9j7j4oDj4I0HTYR5dnDGowPSoX+lPm2uYp4ldGBB9qi9V0wXURKHDjp7H4NF6yp7KwVJyPGYd0PqSabUotqrsJ/ORkr/4iNms4BMEhhyO2BTY0nhaaWNJJLTlHUZ6mjXhvQVj5GZAzncsR0+lPu3sW5AObt3FI6aXPJJ+09J6n18KqpUBj/uJ5MRL6BZKnKYQNuhFV6404G0y8ifnt0bbuOn0q8ep2YQZJGB1qs/Ed0wmYLjqciubzt+D4gvT7V1ZAYBlPcHkTl5xJ4cahbSMbZyyZ/KT2rT07g2B08u5tlBPuNjV+ZbdbnK8gya8nhCZwrNbKyD9R8ii6dRYV5G7394r6l02rT2bqsYPdD4+05YcY+Gms6Wkl5YwPLb5ywUEsn29qTNrxBfWxC+pSD9K/oC0rhmzitAZIfODAj1DIwe1c+/8QXhXpNpCmq6XbCIn/jRr0+tFV6nBAI4PAPt95UnUb8qZseDN++psDJJsuDjNdILXSFa3BU52rhJ4d8YXmg6nG6HKc3rTPUfFdmeDuObDVLKN4pQcgZXuKaUhASD5jVup3sldZJG0YB94dx6a3nbjYGpO7gURekdqmUu4ZBkYz3qP1GdI0y2wxnepGsRM54nRfUW2JnJlU+KLSaS7BJIXOP3oh0fhrSLTlu5XBbl6Z2/ShviPVLe61GKGNweZsYpnXXDssWmIRkllGAKUA1l2bg/eX9qf9GhTYULYyB3kK5SVneMAAdPpVVuJtVtv81MU0jZVtt/ejDiTi2Xh63lEkZJYEAGqa6Nq0nEnEshuZCg2Kj4z0qBCBYPk94J1oenXVWGBbcCPsPeXM0i102ZbadJAHU7HGN6sda6vLZ2RaQ+YFG2Dg1X2KysLbSzlfKKKCHzWe64jgh0QeY/OMHoa41egp1LbLEVs+YUttQVQyBWAGT4jZ0TiL/NdVeTzNk9IBNOC9uYoosliTiuanCetasNZlFmhZGb+tW3YazdW4WZgjFc7Ux01ddFS1quAo4ErjtdqBuUeTyeM4MKJtftRP5QkHMTsAelfJ7x3Q4z9aQUdg0eoPlzzZ96e1lahrXLE5ArpHZyY8XR7NOrOmD+8ho7yQycuTnPSnfpccwgXn9JIHpPWg/hvh6d7mSXkxno564+KsTZadbRKFYBmHvtTTTJuGSZ531bqCCzYqgBTyfeKDUhIm+PoaGodRaKVSQetO/Vra2KkBRn4/pShvLDmzy+k1qwOpOOZPodXp7KsMsnLjiGIW+Qe3TFJubUzNKx6ZO1OPRdKtHBMoDEbEGpfUdB0NImaO1RDjdiakoqsKFuP1MkHV9Bp7inpOx7Z4iksU52U53OAKuFo9iXsUym4UCq4cO2VpJqRXn5kQ5A9/wDtV0NNhjW1HL7VPW5H1fpKt/UOo9XUVoMjAzzx3lWuK4ZLa9Vx0OQftQbHqzx5wTgjf7U9uNLKGSJxzAN1HtkVVeSQK5BOKDsUraeTzyI+6IyanQ+my52nBH9oW3N/58YU7jIP6VBXV7HHC5LY2oZnvAoI5h+tD923nQtzPsBWZYnnmXfTdMStBgbVznE/cKcKaTxVrGofi7dJo4SiqGGcMev7VYSfwD4eFky2U93ZkjbyrhsKT3CtkVt+E+hx2tgJFUBp3Mjf2q4UYHJii6/pqU4GSSczwvqNtl3UtUS5wLGC4PgcCcqb/wAKeONLM3m62dShBJUSKUcKO3cGqKeI3Dtx56z+UV3wwx0Nf0NapYLLGSAPriueXixwKhs7qWKP0vkkdcNS7W04UWrk47w3pWsKN6FhG0/lPbmc4+FNQjslVWbBG2K6y+CPENtqtiYiwLxNyN779D9DXFk6NfW2oOpJGDVpfDPi+XhfiG0uvMbyHIS4QHZkPf6jqKUYwQwOfMuDu6oeCPB+07vyWCNECQOlCzyR20gIA+RXzTeIrS+02KWGZXV0DIwOQQaTnGOsyR28oQnnweXHvXOptQLvHtN9N0t91uxjkMcD9Y1L3WYljbJpXavdfi4whIA67f3qrOjahrM1+Dc3MrITspPpz9Kbxumjxlt63oilylnAOD2j/qXR30Vi1hlbIzxIfVNHVomw2QRjFJG+4aRvSFG9WElnMyEe9DVnp05uCXb0Z2FTXUAMAq8HxC9G9aUP6gGRKt3/AAzeWqlxzco7daaWg8v4OIdDyirEXmkWstqwK9u9VJ1a6fRr8xBjyfyH4NK9Zo7Nq494OLa7A2ztPsUkaa6Q4yCzfqen708nvTexKhUkgDOB7Cq42kwnuxL9zV1NA0i3TTQwAJZQ2fcGplyNvuBIXf01V8c5IEUroEC4FZVPXO33os1DTJEZ8Jt270IhHUnI+tHq3zDw+R3m1y+9ZAntXxScCt1cDPN3rvM1uM1uXp8V9AFZmxk4rEa5xOwTPBwK0nmdRkNkVssRgiouU7b965yRyDiFVqD3GZtw6xIgaKRRJE3VG6GvU2n2r2ry2UzYA9cbH1KaDpzufrUppBlLNzc3qGNqlV1fIdSW8N5/WZbpFT/VrO1hyQOzfcRRXlzPNPJaXWORzygttjPfPalhf6BeWl3JazZUsC0T9mH19xVhtdsbWcyI8XLKjY5lJGR9KjNY0u8l0QOmS0IDITv02/p1pcyEP2yPM5YjKttO0kZ/WUgvOGtSW/YMpVSfz9QR9qOX0iC3tFPKpbGQwOR96N7vVLUwsZI+WVTvj3pU3Oovcy8gGFz2plSg9oPqkpSs4O4t2mKKGR5CwPTpR/w/YvfalBDjOWyagYbUxoTVr/DDhK9KLqEkaBZBmMM2Dj3ollZjgAmVd7Kq9pdgAT58y0XDsU1rZxxr0VQBUzf61dQA5UN8DrXqJ+QrHsp9z0oD1W7jEjYkDb4OKIK2LXkEjECVNJfqNpRSTzxMk+ttI4ZU5T33rVm1sB0Zh0xnBoEnuRnbrWnFIGb1b0G1z/8AdmW2rpGmVAQmOJd/hiaGWNOXG4prqFA+apBoOsXFnPG6ucAYIqy2lcWWdyFDHlPv2pyjrYi7TyByJ5L1Hpt+ktJYblJ4YCNIGo6/sYry2aNx8g+x96zxzxsnMpyMZyKWGsa7cXEc0MDGMdOfv/2rnBHPbEXVhnIC9/7RQagjR3UiZBCsRkbjb2pa6y0KwvzdcUZ38UiLjzgfffNC+ncPXmtX6wx5EYOZZT0Vfj59qh9P1HOMYl2pdKq97uAFHJiTvuEvP4du7lFdpbt0hYgfkQuCQvzjqa96to1lYRW8Mmj27xRAIrCMHGNs/euhrcN2kUNtFGgWOBSFUfTFC2pcNWdwhBAGB7VlmiV0wHI48RRX169by/uxOD7eBOeP+Q6dP/EsmeBs5HlueUfGK3F1LVtKRvxF35iAZw25AFOfiTwucu01nM0EvZo2K7/aqAeIP/qDTNWNtfzySHkGC22V7dKr76LV1A/Xlc/rL/T1ivUIQtK7gMkx9J4uaBAVWWCW5V87IOR0PuC2P2qa1Ljq/g06TWLSX8dZmMxTEjEkSsMck6jqN9nH3oE8PvDgX9kl9qCYST1RRf6l9z7Z7VMcU+HsnNMdPtg0IX+JgFSB/pPKd65sL1gI6tx7zKb67C+26veCRtzjHg95LTeK+m32nQokXmSQcP33lxc3/wA0ihCx9gsYJz3pfeG2g2d94RaxftHEk0t40CsUHMVHLheY7gHPQVW5YNR0SbUUW3UC7tZbUlt+VJCM8p99qufwjai28ADCMhm1ORsr1yGBB/ahrDWteQfIMiJb8UjFQCXyQO3eUc1iyvLCXDEhAdx1xQDd6jbIImU8zhwS2MU4OKbuO6GZZirgkZUbE+/3pCatYXKQxSupKscKSMZx7UXUwIBh+pPcgg/p2nR3hDXYNZ0uKRGGVQBl7jG1aF3qBa7njYqI0cnP07feqc+HF/qFnrIKzFIwv8Qe4PbFXk0jgeylZbhr2WQMeZQwA670UyM6gCbW9Suc445EnNLWeUBkjGeQbnGcn49vamvZJPyL5zL22FYbHR7aCMhS2/U/WsdyqxbRSnI657feiaqNgHM0uorsOxSfuRGYl9NJyqXwoA2HxUVxdpb65p0UUAw6PzcxODjGMD60CWWpEM38QNv1G9M6wmmuHjjgR3kc4VV9zRFyq9bKTwREl9DUWq4Ayp49pXq20u6012RpPUOoIwTTE0vXltVKvkqd+tWtvOC45tJjN3bRiYKQcbn36iqUcX6DqGlyM9vzSR835T1Gaqim6hjlsgH6TLd02/Ta5TTb2PzxKNjDjAOfejjhfiK+0O6VlctblvUnt8ilvZyZC7/vRJAwJIYDGetFKxWedlcjE6hcO69aanZxSRyBuYCjQjPT2rmvwxxNcaJcqQxMJI5l9vpV/NC1611K1jkjkB5h70xRwwii6kofiRHEHDsV9Hzr6ZV3Uj3pUW/PF/ClGJF6jpn5qzpUFQRS54j0D8XC0kOEmUEqQO/zQd9HkQvT6jGFbt4MAxuK9AEA0K2N/KWMM6ckyHDr0/T4NFQIbBFLCCDGkwse+KmLeUYFRDKN68o5BrYODOWGRDqKbJHWpuKX09etA0U2anopiQBtR9dkXWVwtRs1lx7momF+nvUmrkqKYK2YvIwZ7OMmvWdq+Z/vX4k9RvXc5nk5z9K/YOa+9RXofStYm5i+1aciNzHcFcdMd63evTtXwjvUZE6BxB2WKoWWEb7UZSR57DFQ80RA29qDdIZW8X9xD6jtUBJH122pgTQb7ih6eClzpiNa7Mxf3NupGcdKDLm1YNzA7g7H2ppTxEZ22ofuYNqhzCYQ8I8XtayC3uThSQAfrVo4JkmiVlbIO9UEu7U5yuxHSnRwTxU0ZW0uDnAGCTTnS6j/AGsftEur03+9R9xLg6VqKW7hZB6D7DcfNM5NUs1GRKCcbDNIaKQOqspyD0rIZZ4fVGA3/L/cUVfWQCyD7idaCyq2xarWIB4U5/gxi61q6PC2/aq36jB57MeUgmmVi4uF5nXAPQViFrzyKvl96rrgucmeqaOuvS1nae3zBPh7hly6ySb5Oce1PWPRSI+Xk2+lEOjaYFUbdhR8tmABntTOikhOMym9R6qW1BJIJld7rSri15vLJCt27ZquXG+iR6lp91bSzFfMUqD1we1XV15CqMD061XvUtPku1cRxgn/AFUDeSCQIVRSmoq9Q4BPkcT+f7XdBn0TWri3dgeVzgjuKcXCnFt7psiNFIR0yM7GrFeKHhjJLNJcRjMmSWwcg1SO7sL/AEybkmhZMe4ptprg6jJ58xNqaGrYgj5BnQvT/EzUZYV5JArf1NS1zxBxLqkQXziQ3t7VRrRtU5Cnqz0zV1OC+ILF4kBxzADr70Tfpw2GB4j/AKVr6S2xwA3g+8mOHtJeHW7WS5Xm5WySfj61ettV0r8GvOy+lRVZJr2yIDKAzewoA1rWphH5a8wJ7d6T2BUyM8y6Jpa72XDEGC3iHDY6zqvlonOoz27mvHDnhRoOnKl5dzNC7DIVAAx/XtW1oWmXEt/DNNkRq2TX3jvWVadYorkEKOgPtXND1oGLJnHYe5g2s6bbdeNzlVVck+fYCF+qron4VoYpHYYwMuD/AEFVI4ytJoYX8m7IU9FH9KIG1a6UbMMj4pKcR6zcyEg4yep9qKouVrh9IHwJXtfXRXUQQ5477if7ye4P42h0uOSOaIiQH8w70yG8X7i7vIraIlcnAaq76ZZpOAVTmc9sZNfrzRby2nSb8LKuDnPKetR2alyxGe0Hq1OqTTVqLBtXsMDMv5YW09zGkxc8x6596aNlqyW6rDK/q2FV84O4oD2SCQEMoAP1onuZdUvr62axRTIsinJOBgdzUY1BUZUc+0MbqeoIbd9Qx2nQ/hdBJaI7A/FTurwzndeY4z09qhOE7jz7dVAK4xzZ7HvinLPaI1mVRcsV608WwsqjPPH6SiXMm/O3kn9pXGe5IUAkj60HXeqwo2S2K3eIZZra4kVx371XvVr4ySYJIzUz3EDg8y4dO6Wl4DHhfcRsz62iIWjk5WI7Glnf8R3M0hVrh2A7Z2oEupJEjB59vrUFDKszYAORQ5vPHaW3T9L0dT5Kqx8EgZje0vXJoLqOVXIKsD9fcV0W4Zvjc2Mb74ZQR965h6csMUsbTHCcw5vpXQ7hvX9NjsEKOhXlHKVORgUbpiWZhkduxnmn9ZU1rbpWSsg/UC2OCPaTvFcKvAwJABBrmVqvEDLe3MSYwkrrv8HFW78SOOFt7ORbdg0zghO4X5Nc7oZP4jtK+SxyWPUk71HqXX1FAP5Ryfcyxf0J06wV6nUWrit8CsHzjuYRXmvyQrzyN0oCm4yvryeO3gTJdgo3xuTit6/VLg7EcprHY6NCrAhcEHqPjvUKMTnBnsN+iTUUlVt9PgjIHmddeALTyNKs42I50hQNv/Njenr9qoB4c8b3i3MFjdYZyP4cg6nHZh71fCznEsKt8U0DBq1xxtABE+Qtd03U9N1j6e8fUOQ2chh7ibrKHQg0nuJtHiubaZGTKsCGFOUVF3cIZTt9q7QjlSMg+IqtUkAjuJwz8UOHF0e/kkWMhCeoFVCuNdKTDBOM1248WeDFvNMmcLkcpIrhJxfYSWGpSxFMANtSA0iu5k8d1+0vGl1jXaYEn6l4b5+ZeLw48U9R06ySAzM0IyVBOQM07NF8UoNW4gktZAecIGUN0YZwcfIrlXw3rUkEqrzY3q2vA2jPqXF+lSxuwxICxUb4x0+9C6nTqanPII5lv6Z1IVbVZVwCOcDOD35nUiLQrO6tVmSPkyMgDag7U4nifGc8mxNWX0+wjSwUBcYUAUj+K4I7aC4nLfSl1BNLA9ge8aNqvXsbknaeB3gfbTr0zU9HcouM+9ImbiGOKdY4xzE9SN6JxdXzxqwjYA+4qzLYpP2kR04YkBhHDJqKCBvV2qmHHd1FNM57janLd3d4lqzFGxg9KrprYE7OSdz0B61Be+4qJlejFKMc9554dLOgPftVzeEOIBb2kdtdnlCnCMewNVJ4XiEV1DzjZjirTnTYZ7dWApDqLSlgAkt/pvSlZH6/MYGtz8sbcpGG6YpYxKZZMEgH5oh08hx+ClIZwD5RPcf6ft2rSms2Uk8pGNq7WzcO8FoREyrHnwZs21pFI/lu3lsfyk/lPxntWW60u6gJDr/59q0raf8AMj7gHbPUUeWJe7QKCGK7BSdyKIRyDyZzYXRt3dc8xVnmHavxOTmmc/D1w5I8kg59qHpNMaGTkdMGid4hSWI3YjMEhE79KxSWTle9F0YjjffGP96lUksWOAyjB3yalr9NmAJxkzqy9qgTg4Aip/y5i2SOYURwW8ccHPvHjv71M6lqFgn8OBVLfzP2H0pdXmuGLAD8zdBnf9KlY01lsfV7GcpbqdTSrFSgJ89yPtN2HSILvV1kmQujHBXJx9dqnuK7ez0fSmaGJlVh0JJG/wBaPuD9Iu7tVmfqex7UdcT8DW2q2DQzo2GUjmBximA0h/CHCAWNyMnnEoet6x6XUFC2PsTCsAeP2nFriVne7llUEBj096waFZeYwZjinTx3wVd6LdtFIQ6H8jjuPn5oE0218uLIxQaKVQA9x3EsyXVW1KyNkEcGbtyGRcDf3ptcK8f3+mW6W5gEqKcA83Lge1Bmk6Lcalc+WD1OBn5pr3Phnq9hH5qqJUG7cm7D7VIrWKcrkY8iDainSuiC5lAY/Tk4P6Sx+ga5ba3ZOwHlvHvgncD+9DV1p1012wU82RkYoV4E0yWTVkiDsilSXx3A7U+dW0xrORXjyB0/WpiXsoJOTg8mAU+jpNeyIw3FfpB+YnpdOnXcisKwFMdaPWMjZzjJ6/Nfo9Eu5kZ+UKuNsnrS8rlsKCf0lq/6gEX/AFGAgW155KZHUUvrviDVorjmtJGVs7jOx+oNO2fhqbzUEjDy225sd63JvDeRl5o3Uk75wRUb06g/lU4BgF3Vemsu12UhvcZENOAuPrq6sWiu0KyoMMOxHuKV3iv4hXmiPALSJHeVeYltxjOANvpRro3Bl/aSczsuB2G+Qfmh3jzw5u9dtI1teTz4m2LnAKnqM0yY6t9EQEO9SOfcCeb3Dp9XUUeuz/S3ZIAPA9vtKk3HjRxFNGUj0+1jJGA2GYj6A1arwQ1PiW903UbuWZrj+PhVf0guoyQmO2/60uNK/wAPOrSSqbq/iijzv5Slmx8c2Bmr4cM8PaVw9p1vZ28flxRD0jOTknJJJ6knrUGip1pu32ghQOF95F1XX6a4V10DKhtzMQR24wM8yrniP48vpdrJY2VlLFqDHl8x8FEA6n5PsKoRdeLniCZfMHEF2pDdARjP0xT98e+H7dOJTP6gk7F0bsc9f0NVOawjjTDAsPfG9RdV171XCqsgDAJxycn5l+6T0vRNoa7BSrbxklgGx8cxkWfjn4jW8iu2prcLndJolYH9MGpQ69B4i8aaINUjhskROSZlJ5ZCDkAZ6c3SkdLpsIAK45Sf0qKWKW2nBBIIOVNCaPqFguUuxKjxCrOl6ZCzVIKnKkBl4HPx2nbax4athGscQCBVAUDpttX46LPYuWZMqT1Hf61XbwX8R31CJNLvpCZUH8GQncgfyn+1W31zWre10m5kkOeRCR8nG1W1xu+rhgRz9p5s1NlWp9Gxfr3DBHnPYzm/4zW+mu8s8MMcapIEJUY5z/M361TSXiXXLSwNnDeSJAG5uQH0k1ZTi66a+trwM2QFJA/eqzLo2o3ulXN7FAWht2CSMDnBIyMiqrbWhJ2qMA9p6R6L0Ki7jnaBn5ja4G0vQ9Z0S7lvY/MuIZgfselD3iDb6abONCAvKSVx2A7D61LcJRS6To13c3HoWcLyj4XfNL/XVlv/ACmkRvMuvSijrFCDu31NdooC9sRqEf8ADYx9TRb8I2F7qvEMUVu7RRc3NK6/yoOu/uegrpFe69ZabaxMXAwAqrnBwPr7VVm2udI4fskgtY/4j9EX1SSH3P8AudqI7XSTrE4n1i4RUUDy7bm/hqOv8QnHMf2otWxCfwZWkImGccsfAjQbxIvdTkNnomnT3k5U4cLiNR7knqKHTxTpMFlcSatqHlSwycssIy7F++OXbH1pE8ecY2Gk6ndWfCt3ILaaGMXFwpOefHqSM9lHvVVZLw+pSxJb83z9aiN5bBGRFaaj0vy4z5IGJ0a0zxk4DiIRmnUZG5Tp+9WI4X8auDraUNaarBGzjpKhyB7ZPSuI7lWNeYyVf/iHGakNyEYKwZ2FhO8E5+f+Z/TbbeLmiX9h6XSaTGCYnVhv99qEdXmhvbUPJEqFjnrk4rgpoOoatAyyW0koKkYK5xn7VbTRvGHiuJQl7y3KgbFvS36iluoKFThe/vGWh0tFVgYOQM9iP+Ig7bUljl5GIGTR5a3JYKQaFuOuAdY0G9aXJeEnKvjp8GhfS9RLqqknPTH0oYYKgg5EqJBBxHecuDuPpR9wxxVc6HdK3MTDkc6+3yKU9lPlV/8AN6I1KP8AmGxrFYqczRUEYInUDQtetNTtY5YnByO1Fx3GK5k8NcV3mhX+GLNbORkf6fmuguga7a6naRyRuGJGdj1polgYRJbSyH4kDxJw3HexmaEcs6DIYUsbG6dmaKUcksezqf6j4NWdxkUsuJeHhdRmaD0TLuG/sfihL6PIEL0+o7Kx+xgQTnrXnHSoexunLNHKvLIhw6/3HxU2Om3XNKo1n0FgwxUtFKcjBqJ7CvPmYYe/tXQOJwy5ENYZ+lT0chI3oFgnx3ojimyPemFdkXWVwpQgisoxtUXFJmpMHbbvR6nMXkYM9gDtX05xX3rsK+YzXc1PJBxXzBr3g46186/3rJkwnOO1a0iZHStvpXkrkVEROgcQdljGDmoGaLrRo8ex2qHmhBz1oJ0h1dkX1xBkdKgZIj0pgzQ+rcUNzwHB2pc64jSt8wAurUdqDp4ZI25kJDDoaaskYxg9aHbi1yOlRdoUOYe8HcYAsLW5PKRgAk1YxZAwBBz0Nc/Lu1ZJCyHlI6Gn9wRxiLlBa3DYdThcnc0802oyNrGINXpcZdBx5Etfp8scrCJjyk7b0YWujxq4YgnGfuaUivkhh9Qac/DWrx3BFvKcSD8pP83x9amt06k7gOPMJq6lcKdpbkD9xDyzhKKNsVIyycq9K3FUAVoXX5Dt2rsrsr7xJ6nqW8juYt9YlWYMAtLiArH5iMdmBwfapzW7pklZVPKetCdtcoTu2SBnYZqu2MGf5noVCFdOFA44is17gya881opyCRjBG31qtnEPhBLeWrRvGGYflbHQ/Wugsctq6gOHVvfqDRPDa2Xlk8mTjbmo7T07vy8c5zF+r1Dr+c5PsZ/O1xRwbq3Dl66SRNy52NeNH1t4mXlYqR7V22424G0nXrKWKeEAkelwOlchvEbwx1fhW9Msf8AEtmPpkHb4PtTtS9JAcgg+feV5LN7kbCpEP8ATOJJpOTD74606dPkW6AZzkgdTVCNM1d0KhiQR3qxOjcSYtypJyR1HehdVpFtG6vv7T0Ho3WlobZf28N7R0cQawtpalI2AAG5zVSb3W/OuidyM9anOIr+4uohGrNgnJPvSrW2mkkEaqxJOBt71VNQl6vtZSMdo81nVPxTgVN9I/mNmyf8TjlUmgrXtFuRNkocHODirteHvhyp06GWdgGIGds5qR8QeF9PsNPM4P5OoIo7Saa4YsOcGK9QtVlODZhvtKR8O2i2SO7Ej3OM7VYjQbjT7sKqXCTNndc7j7Gl/ZXGkNasWIBIORQtcRzNcK+nRMjoc84yBXbVXK5IAIJ8wXU6f0kr22K2R295baThOyaMzJiNsb4GM/UVK8Gz2sN5LE4UlW656CkBbcQcQzRiOZGD7BmQHB+d6wzcJamJ/wAebuVXIGFBx/8AdEgKO30nHPEGoS8klaz2wwIxidUdH1PTYY1kEi7nfendba/p7Wv51Ax1JFcNZ+L9c0v+GLtlbHbr+9Bd54ga9LKrtqc5KkEerYY+OlBt1EIcKu73gt3SrLvy4XHv/wCJ1542OlXIblnBk7Bd6qtd2SSOeVhzA4x9KHuBNY1/WbY/ib0MrAZIjUMc/IFOh9KtoI+UAZxTquw3Vhgm0Ee+Y+6c1mlr2M2Se0R+oWUyW5DHApWx6l+GuCqjLHanzrmnM8LlW6fNV1XRrpL3nVWPqzQb7g44jxtSSwOOY00nlktwWU7jNY9Gk4i/Eulg8gHVwGwv3ztRFZOGtwkibgUTaXc21msyMmUlIJ5TggimdaqduTgZGT5h1jv+FcLStrcYVhkH9Istdm1SAkXgPMc+onmBx81Xq91GV7kAZA7DG1W+1mayvkWFIjyA8xZupPSkze6LbLIwVPpS7UcOQrZGeCZ36lxorLVBD2wP+PEG9OjjkUczEGnFo9lGxVVBkc7AD1E/pUFpuhW/MGOVNWU4ChtbXUvJKeqQ5VwM9O1FacFsDtnjM1reqXaLQW2mrcUXO0HH6wn4F4K1Aaot5PAYlRcRqw9RJ747Veazg8qFV9hWnpsESwJ6e1T/AGp2FFalQSeeTPnTqXUtR1LWHU2hQSAFVewAnjGRmvLAEEVl2r4cVmYqgRqunJcQSROMqw2rjL48+GjWjy3cScy5PboDXcO5QyIR+lVx8QOF21LSbqMRByyN6cdT8fNQaoZqD+VOYTonNd+PB4/SfzN20UqXeF7Guh/gprEmn6vCl1yiCflUv3jcflbPtnY1XvXdHtdO1y4ilTy2RjzKRjlP3oi0rVFhdQmSNhgf70vsAer4IloVnVgUPI5zO22ocTLZ2ZeSTy1jXL9849qp/qfHx4je5jhQxwqSEGd2Hu3+1V61DjLXZdFNv55KFOXJO4HtQFwXdas18yxwSMgYFmAJA7GkjVMLFD/lzxiW2jUICrKCDjke2Y+9C03UU1Pmxtz/AFyKetxr1tZxHzyVwN+bYVo2WmmKDz1OWxnc1WnxP1hjaMS+OXbA7mj/AFfRfBU89pYq9In4RrN+duSQT5jlPiLw4ZjE8yjPzSe4w1zQ7jlkgmXIPUHr9apVZ6fqF43OsbuSetGtrw/qZYc8L4B7mtnVu6kbViau12Ug4APaWl4evVuDEyHJXB69xVsNLuZjAoK4fG4qiOhWmqQOgigkJGNgCf6VeThe01JraN57dlcgZpNqGZiPJk4ZAuG7+8lzbvJMkhJRkYEY65FN9bWG8ikcEeoDI9ieta2n6SXt5XdCDzAeob0ytC0LCKQOucgmt6dLMciKdVanfONvEVC8GSyu+GIbl5lI7460NvpWqWcoILgqdiP61cRNMMYBA3HShHV7iyiVmkIRsHIbb9KYbcDniQUdR7rgODFhp+v3p5IriPJ7ONv1rJr0LmIyNEQeuagLjU9NZyq3CAr80Q23F+mvD5N0ykAbMVyP1FdKR7yRkdbFsrqbHkAGJia3nYMRnC5NLr8Zl2ycb08Na1W2ELLa8vr6uew9hSii0C8vp+YYWM98da0gdrMICTH1fUKUrZrcKP8AbnvBa9v+Y8ke/wA1JaNw5cTXEc06+kEHB7/WnVo/BVvCuXXLjualr1RaRnYAL2psdJYnNg7cxeOr0WN6dRyxOM/8Qw0jV4LbljxynpTOl1qD8GcntiqoQSSXUxC5wNyaguKtTv7LTJWhuZFwPUD139qaU6ixlJK5A85lI6r0atHBV9rHuD25+YkPGDW1utcFtGPREo+7N1pFW6kRqAMk4qKu7q5u76SR3Z2Y7setHfC1uLnVrdX3VWyRQz+Se55jfp9BpoSvOSP7nmWX4L4citIIrmRctkMR8Va641GwhsNk5mwMY75pQeS7wxwwsAxGBUPJZapYTxRSTh1JyBjp8b13VqEp4IyTNdT0Y1FtRL4Kj8vxJC3huI9Wa6itvKDAg52FM1ruCaAieYMSDsBkUDtBFhWMjsx+dhWVFVfeug/pk4BIbnHYSA6WuxVPKlcAEDnj7zVeKMM3KcrUpbXJCGMnHXlP9qxuABWGNAWH60IrlbAy8cwtwr14bnHmEc1ylxpmQMMpHMPYimLpN5E1pEWYbgUrPIH4WZh1xUVpM9xI0kQb0gbZ96apqFV3DA5bBAHvKxqNIjpZtOArZ5+ZYqa5tVibLDptQxDrlsl0kK8uT3PWhy1sJ3tyhbLkbN7fSl7Bwbqv+c/iZr5wFf0ooypUVM1zgpiokGV4VU4fdZjA447mWst3ZkDIwOR7UvuKV11bGV7ONZJQvpU7ZPv/ANqM9IV4oQre1FPocbjNdvnkZIyO47xeBmcmdQ0PxB4nu9Qgvo0hW1IeISZyzHoqn5HXtVWtStrm0mkhnRo2ViCDsQR2rsrxKiQavjGEaNSPb7VXDxC4N0/iK0LIiw3SjaYD8w9m/wB6p2q0X1dyT7nzPaejdRUaepDWqIRxtHAM5mGR4ixSTmB6qTkGt1vLuYuYEBl7e1D3Edrc6HqLWl0nLIDsM7Y/1fSouOaUEMjY29+ooEUMME8R5e6hiI0+G9Ul03W7W4iYqY5FP6HvXXbVre31LhuV0cOZbfmQruMkZrijBLzdBgmulXh9xXBpyQWl3J/7eZECvnIRsY3+D705pvdatmf1iHU6ZLba7tuTV48kZz/EqNqSSq91A4IOGBpb8FTyL/mNmWPlyYYr2ONs/vV7vEHgqzN6t5aYMUh3AORk/Nc+IWex1O+ZchQJFJAOAc7Cow35hH9rVl6nXlSCZ61vVHls7Syh9XkKWlz02OFG3vioy+1kpaxJApm1CUZmcL/DiQflVB3I6k9KCobiaESF43YySc2COpH+1GVjc3ELHEOckZDDbHzXfaBC5zYOWAPcjxJfhfhTUL2ZpJ5XQv8AmZTmR/jPYfAqyeicNcIW0weaHz3jIIVsvzt8ls7e9VfvdS49mNxLYyvawwxFGeFMBVbbdvn3oO4bvuO7PWICl7LdRZ/ixyHbl7nfp9qIFe5TlgOO2Y3q1WlVhX6L4PG77y+Gp8NcLarGySaNbKmdgi8hH3GKWR8CeGr6WQW34lGwW5UbmwO/WjfTdYa5hDIpXcg8/p3q3OkxaBw/w/HNdX8c95fsiyRRNkxwj1MgPuehNQ7MLhRz4hnUBRXWoCK7tgIO5/X4nOTV/wDD5pljZ/iW1d0VjhQybt7YHU0Iab4d6Jog8+8tjdyE5RJdkUe5A610zuJodY1VruSNVUEeVHjKxqNgB81u65w7p2padLE9uhYoeRsbqT03ohNMyr9T5MrCa3TU2VLZSCT+Zh2EpnpGv3CIiWyWcSDpGsQAx7UXXvD+l6xB/wC80pYZNj58QERPwexoUtuEr6G7ZXsnBU45j7j2xTnhsLsWojaVnO35t8fFRmtyDLk+m0RYZsABxyv/AIjL4o4btNSsJoZIlYMD1rkZr2gXGi8QXNqdgG9PyK7YXe3OD0I61zQ8X7eJddR0xzEb+9KbE2Px2PeeQaWwuhB8dopdMdypBHTAou5s8o2BzQlZq3KCD89KL7dSwBPtUBMNxJMr5seH3x8UY8McY3PD9/FzEtbM2HHtnvQsqjYivT2ySqVYDGOldJYVbPj2kTKCCDOnmia1aalaxyxSAhhnaihlBGa5j8H8Y3fDl8sEzO9rI2M5/LmuiWi63a6lapJDIGBAIx3z3pwjBgPmIrqmQ/EDuJuHmmX8RbACden/ADY7GlxY3hlGHUq42ZT7irOlRj5pU8RcPGXNxbDlmA+xHsaCvo8iGafUdlY/YwR64+lfCo22qEsbxpCyOvJIhwy9wRU8SPelUaTyrAYqdt5xuM1AEbYrJGxUV2rYM4ZQRD2GUY61MxSZ79aBYJ+m9EEc/QZphXZFllfxCwNtXobj22qLjkONqkhn/ejwcwEjE9Hp1rwelZeX9q8e1dTUx71+37dK9Y2Arztn+1axMmMjp+taskeQRW8f1ryd6jZZ2DiDD2+AB2AwKgpoev1o2kj2AqHmjFAukOrfmLqeAZJqHePemBNADvihueDf2pcy4jRHzF/e2wZTgUub60uY3EkTcjgjcd8U55Y8kg0OXlsNzUYJUjEJ4IjC4A42a8T8FeNi4ixuf5h71Y+NyGVlOCDkHp965+vHNa3aXUIxInt/MParS8JcVQ6hAscpw4GN+tWDT6kN9Jle1WmKHcvb+0u1w7r/AOMiEMx/jKOv+of70SXsnLExqssFw8EiyRnlZTkEU8rHWIdQtQGIEqj1L7/Ioi5G2HB4/tBKQpsU488iJbVPNaaeZjgfy/GKTdxxItjM0QTKdeY7H7fFWV1yCPyXPuKqbe6Y13ePFvuT+lUzUh1YYns/Rq9NcG9UfSB+2IzOHtYTU52jilORg+4+lWNsdPLx4cZ2pV8CcI29lFzYy7HJJqwq2kiAcu2KdaBrlr5Eo3XW0h1rrU2FHAzAq+0krESgyfbNU08RIfxFjeQSW3P6TkYz0GBV/wCSNljPMcnvVduJdJead2Tv8UTqbHZcHtF/T60aw5IPzODPEej3VpPIyW7Kmc5x0oNsNZnt3wxIrrtr3CFpI7+ZCOY9c1SjjTw3tmLvbqsbg/yjY/Wu6dSVxmOdT0yzZvXDD4i2stYtrkeojNNzhbTbGa5DMy7bjeqb3dlqmmXGHVh7Ht+tE+m8TyxlcuVIPUGm59G9MNj4MR0ai7TXBtu4L3B8ztbol7ZRaXFyEEquCo7Yqr/itrzXlu1lA2Wc4J9hVY9M4xv2jwLxwOh9VElpemW553bOd8k5rZoKVeDgeIYde19u3GwOcZ9gZ54S4GUOJJSW3ycnNXJ4e4RsCuWjHKOu29LXRokkRcY332qzeiKBCB9KR1uz28+J6LbXp9HpEFCjJAy3c/vPB4Z0pE9MC/UikdxpqdrpNnKRAGcHCJ1BJ9sVZ2diEwO9V81nRUvr7DgEIxJJ9zUeup3J9HBJ7xJVdduOCWJ75M56albateTS3EykFjnpj7AUuriMqzDB+9dEOIOGrIWr8q+tRk/NJ7gLhfTb/iAPdRh1jkACn3pGtKKypyWP7SUakKp3DGB2+0KfCia+trePzYmVcY3HbtVwJiJ0BUgZFSGr6JZadYPJHEAAuVCjFUf1PxF1DTryVHRxg46Y/rVoNf4ZFUtkYzxF6a+hhWxON2cDHMs/qCpEnK/U1gtNNgePmCf96p9N4iXN5cRc7kAkCrk8MXM91YRHkyCNjmoRbWXBPAxxGteqqcNtPK+4kFfaayqShxS+uLa/XJGTirc23Bmo3yg+YEBO22f9qiNW4Dv7OFnLRyYHQAg/vRH1HkK2PfEOo69oa8I1y5z5lVrOSQyYftWjq+qWVpIvmuBvUXxRxVpmlmZSQsqZDA7EH5rn/wAVca3Wq3JRHPKCcH/auRULI21/VdPRTuDAuw+lQczpdY6xpNzGnJOMnAA+var9cCcMW0EEchXmdlBLHrv7fFcQPA7TLzWONdPtnmlMSEyyLnYqm+D9a/oo0G1EVpHtjamempCb2POO33nin9Q9eu1lq6ZRsVQC+D3J8fpCqKNUUAdqz71+r8elTk5MqAAA4nyvhOTXlmA61p/i4S2OYZ9s1sKT2E4LAdzN7FaV3aJJC2w3r691Ai8xYUCarxRbQlUEgXmOBnvWFTtJPA85m1ddwGeczmd4weCzarxPdX9tJLmWMMV25eZRjHzmqRro8mlXTRXCEMpwPtXd2eNb8swwyE7sOpqjnjdwVaGymv4I+V1/Py/1NVS0uh4JKZ/aeh6UKtaK6AHHfzKW2ur2kNzC7oHVHVmU9GAPSr/6PqGg3lhD5Hleoc0bqoBAIzg49u4rjHJrEsV2VY9DVkuDeLDbqQZSBj04PQ1K9BsAOeR2jDTasUWNwCrcEnup9xOmFqILuERhtyDzYO23eqd+JXA1/PdqyyYiVuZtv5afHhjxNa6vezwFeWWFQzORhSrHH600uOotPn024SNhzmNt89/rSp3NbnJxt75jux0u0dhHIwTx4Kyq2g8HWMemoyqMBdsUC6tJ+EugnJtkD7VaCz0qWDTlxn8u4qu/FkH/ALgsRg1ZtN6FtO5cH7SnNq7BYqqxCy0HCthFJY2siwrl0U7e9WVsNJK2pbc9MbUtPC+2hXS9NdsHmiAOdwDVuYbJSC3UEfofihzp22AkcHmRWdRV2UK3bjPvFvZRTRxkEEg+9H2iXcSjyzgEHaovVLdokJSTDYO2ep+KrtqvEtzaThxzK6jr9KTW6gUOMxtRo7NbWwXGTLwjBFLvifSobq0bKAkUpOFvE61vVMM+Y5lGcHuPcUYarxVbtEVVxvnamn4mq6sYHMQV6DWabU8gjBlYdMsFj4qW3mTMUpMROOnMNj9jTE1jg1rUhwMqwwfr70IPqcRuWkA3D8wPyDmrI65qdmdNtmZt2jUnHyK4GnNQBJ+ZcNZ1DUi7TlVK5r2sPcjzKK6vpckN75aucEKcZ7ntT30HUbKGKJZPSQANxt+tKbUrgXGoSNno23xjtRto1m1yuMn+tH6YWVtuXuZJrdNp7dGh1JIOM7h3GY7Z9VtUiypUjHWklq2otfTGONeVM7t3NHX/AKbaWPDycp7Ee30rDa8MSPKFRSF7ue/0pxaupsXBGB9+8p+jbpGjuZzazsp444+8DbC0Fv8AxMnIFIPxF1pjbNF5v5uwq5+saLHY6cxQ4bl79zXKbjjUrxtTnSVssrkY7Coa61Qbc898Tep6h+LtyE4zwT3gozDmLffFP/w4sYrmR5SQCDsKqM98w6nGPmrWcBcI8ai2jv18u3gkHMqyEhnXsQB0rh1LDAzGFOqrosRnYDJwJdbSGS3kLlQZF2Unt9KJJxHfytK4HOkZ6f1qv93qOoaeqSSoSCcF17Uc8L6hLNdvLkurRgHPbPSuUdCUUr/u7+Z11GhgLdQr4JAyD7fEmAzg4Ybe9ZuUbkCty+jMcoBHWtASgYzWrQA7D5m0dXrVl8jxPrN0FYCQCDmvTPzHPasDnAFCkzeJuG88uIjqCMECvujcvmucYy1Dcrds1N6Y2Cpz3zROnsLahSfAgeopUUWEDkx0Qz8uMGppJl2J3oAiuBjrUws+V69qsYIIlCspOYex3cY/mANYnv8AkJ9WKWE120ZJ5sAUIXupvMxHP6F6DP7mgrb0Xxk+0P0/S3uYYOB5MaWtyJf23VeePLKf6ikJqTyi0uGQkMEYr8ECta81uxtRg3IU9wCc/tQZccWaWQf/AHAyQc5U4+9J7dQr98A495eND0+yhcbty5yMjtOaHFUMuoarPcyytIzH8zHJwO32obt4yqhTuKePEFjbSX8zwBgjszFSPykncA9x7UDf5fhtjS3OR3ju0PuOZ+tdPuJE5khdl39QBwKfvB2nSalD+GklRAhwfMzgD7Ub8OW8Eei2arggpkn5PWpi3RbTUFuIowSD6l6B1OxB+fasVcee8MWp0Usp529pp63w42nywWtrrjyGUeuJWYqo996z2miW9vAqKgIH5iRuxPUn5ohgisW1F5Y4XDSZ3duY0W29uhkwQOu1TEDccGacsqLu74yTgZ/iKnWeEbK/st4VV4wWjYD8prVh8NtOTTbWKMlZ5P4izgnmVwcgn3xT9MQGFwKmLSBJGQk4CMcfcUUlQMAOq2Lu2jz8+OIHanpn46D8OVBUgB2AA5sd8D3pqeHnCXA0UgiuNLikuXOzyDmDH2wdhXvROItG0/XPwV7FGYbpRzlh0I6EHtis+ovpqamz6YZBGpOGY9T7j4ov0tvJHjj2glt9zaf0sWVq67ldTjJ+cf2j61bgfhK9gCrpdsWRG5IkCx8zHp09qo/rvhhquiTNczMoSQl1jTcICehNOSG7vI7hZVmcONw2aavHEhvbCwXciS35m+c1yycAqeM8iL9FrNVprkRrPUVs53ZJGPaVR0lnUKS2e1GUOpQOH5JOYIeViDsD7VG2+nRxlkKAEdx3pi6FpWnmySCNI4mh5uUDq5Y5Jb3+KgLWZ+lc+/vHGoOlLNY5OPjtiBhhbzHZl/Nua0LiOJVLHC/PSvmvaPxLFOzxEmLP8hx+1KHWIL8qPMeT6Mah/EANjaQfYyz9P0FWqVGTVJg+B3H6SxOrOEhY5AwK5k+IMwvdbcg55Tg/auiXFd0IbOZs9FJrmVqcnnX8sh3yxO9BanGRPMNCpw0wW1uFQAdxU9CuMjetSIdKkgBgfTFLMxoRMjSAEbGthJhncVpE8x3A6V4ljYjGSa3I8TfubeK4jwwBBoh4Q41vuG9QWGVme1YjDf6ahYV9PsB81hurFJ4WUgb1NXaUPxI3RWXBnTjR9atNRtUkikDAgdD1okIzXMLg/i+44cv/ACppGMDYwTvy10S0LXbPVLVJoZAwYZ2psjhhEV1JQ/EE+IuHPMZrm3XEqg5x3+KXVpdmUsrKVddmU9qs4cEfNKLiTh0uxu7ZeWVRuP8AUPY0HfR5EM0+o7Kx+xgz16V6HbNQllerNlGBWRThlPUGpwDpv0pXGhmRWwelTUE/qxUIa9oxQiu1bEiZQRDiGbBG9TcUpNBMEvzU/FNkdaY12RZZXCkMGG3tX7O1Rkcm47VIg5FHA5gRGJ+NfCPmvWBmv1dTUwmvvSvRA9689PvWpkxlQfvWlLGCKkAOteCAQc1GyztWwYMyRbdqHriE9cCjmSM/aoGSNizZGB2NAWJGFbwCngGTioWSL3o8nhG/cmhyaEjOxpe64jRGBEX11a5BGKDDLdWE6ywsQynP6U054zy756UKXdtlTt9ajVipzJyARLEcIcWRarbKknomUDIP/nQ04IZZI3DoSGHcVz+0+4nsbrzIyQRj796t1w3xBDqFsoJAkA3GetWHTagONp7/AN5XNTpjU25e2f2jd1PVlmscvhXA3HuaVGiAvfysSSSaOHjWRCrDINR2j6Ldf5izhg0YPbuD70q1elsWxWXlc/tLj0rqtI0ttTna+OD7ywOjKVCY9hTIQ5G4oZ0u2CxDaigLimmnUhe0peusV7TNK5XKmlheLHEXZiCQOlNWUjkOaRXEl6kMbEHGe9D6kgcxl0oMz7RnmV84xuxDcKyAbjBFVx1y6tDAWfCnPfoc009euoZ5S7MxH8q+9IXXITcMFKbddqr3qMW84zPb9NpVGmrTBJ8mLy70W01BCGjVh9Kr1xB4dzQlpLTJ78p/tVpYbW4tBhBkHsaIbeAzqcxHPsaZ1XMCOYLrf6dosqLghTOZTTanp1xyOjrjrkUzNJ4gdmX1birn3XhouuySRiJQwjZgT8dgaq7xn4W67w5FBcGNjHLnBHUEdj7GrLRdZsyRx/E8l1ehamwrkEjng8x9cL8WQnlDNhttj3q1+ka9C8YPPy++/WuS+lalPG+HBB96fWlcVXMXKrOcbb961bplf6q+/tDNJ1WxFFd31J4PtOiM2uM+B5uB02qDld2dSh+tKDRtRlu4VK+r5FNzS4GY4cHcbUgJt3bWBno+kSj0t6YwRF3xDqHl5B6gdfih7wotDc61duiEqJBg9qcGt8KPfxkIvqPxTm4B4Kg0a0iSNPUTzMcbkmuqtJZZqk44HOZTP6gvqoUMuMtwAPEai6OktsWlAOF2qhXjRwvYTWbTIgWRWGD8A10iv2WC0x3xXNPxY1WZ9US3ziNV5sDuT7/Sm/XL10/Tj9OWYgAyhdJVtTrV3eMkfYSkMmm+R1/MOnxVrOCOO4rFIIbyKVVBH8RRkfUiq43cvNMD2zVsfDzh2y1iJBIoOx9PvivM6+qXIalZd5ZgF8cmehNosray2GvahOcZ7Tp1wpqNndWkDIylSgZCN9iM1m4quLdbc5I+tV90TS77QIJIrYyNb7lEJz5Z6kLn+U+1IfxA8RbmbR7+0Ej28rRkc/Rk/WvZ6h/pA7drBeVnhdz3+o6HBfPcHv8AachPFG+nl4s1P+MzIbiTAJ7cxpU2eGIrZ4gnea/fmYscnJ9z71oWRIYUvC4US96dSldSZztRVz74GJ1o/wAJ3DvNdanqDIDgJEhxuM7mu11pGEhUfFc+P8NGgDT+BNPldQGuSZ2++w/YVd3UuILPT7dnkkRERcszMFAHuSaMRT6K/JyZRfXRr77ieGdiD8dh/EOK/e1I/QvEXh/V5JFs7+K4MZw3lnI+x7/amgdVh8vmBzXATIyCCPeErcjDI5/ma+r3JigYg4qtd3xJdpfSBX2GxFMniDXo+Rl5lxiqs3Ep/ESMDszE1t2A2AH5OJY+kaAah7WdMjHGY3puIrhoSFBJx3OwpZzeY12LiaUs4OcE5A+KjlvGA60N39+4zuahexT+bn7y5aLo1SW5StQfc8n9JZLROKrRU8tsL2NAnHt7bXmmXEaqHyhGAOoNJjTrxmbOTn5o8WeN19XtQZWtkZfeMb+mtXZncTOMnG+gPY38jqpAJPahXRdTELgFsb10p8ReEbe8gZo4hvk7DvXMDWdPn0/UJImUqVbvQKEhthPI/mJ9VQ1bZxwZb3hjii90uQ3NqQSycroejDtnFWJ4F1fW+KdTlW65IraFwfLUZ52+Sa526HrU0QC5zXQbwXvJGuJQEI5irZpT1ikW6K3an1kAZHeCJdah2G1hUTkrniXdn0lI7fAH8tUs49tfJus42PSukqaeZrZW2IZetVJ8VOHm/CGYL+TOa56NW9Faq2RkeYvvdC4ZSDzDfwkv0m4VsyT6onZD9j/3q41hqGIuVjtjIrnr4H3iLZ6hbyNtDOGA9g46/tV+rXkeNSdgelW2zU1+jsxyMiKqenXhnbxvOPtmDPEGqRxIXaQekEjNc29Z4s1K/wCIrmGJiVMhVAN9q6AcTaSbqOVVXGR1qvvDfBFlbaxd3TL/ABPLIUHfB65H1ry/V16mzUjIG0Hiez9Eu0ul0drNy+0ADHaCfCmm3K6ijzxsCASrH37UTTT3TSTB5CWDHY1P3urywy8kUa5XYkigm61NZpy7KA2MHFWPSVWIykrke8PRbLmZ2rXBAx5xiDN7qhgkwWIr1LxrfS28cPnEqgwuewoW1yJZVL8+B9aVNq/Pc8rSYAPv0ptZbzgjPMYNRo9qF6wSDxx2MsTZTq3qLZz1PzTN4Z1kG7lt4sM+AwGcbd6q5LezQqFVyRTe8O7SWfWBcsDyRIeY/LbAUWm8sgU45EUdb0lI6ZqLWYAKuV+47D9ZeDTLeWdFZwfpTJt4FWHBUDFLKDijS7CIec8caDYs7hAPu2KnLjinTZbUm3njdWGzI4Yb/Ip+4IwpbOPmfNnqobDyN3tEl4q8TRaPo9xKHUyYxGG6ZPx8VyG1G+a6mlmlYu8jEsc9zT48YOLG1biGaFJMxW7FAAe46mquuk9xPDBECzyuFQDuW2FAE87j38faPOnhijWscKew8YHn9Y4vCzw+fi3iFvNDLZ2pVpSuxdidkB/rXZROGY4rBI0jwFQAD4UbCl74RcCW3DvD9rAFBlIDzv8A6pCNz9qtMIxy4opD6YB/3Hv9ora62+42ZIA/IPYSn2taO7JLG1vhMfmNSHC2j2bWQjiwHUnPvtVktR0uC4gkUruR1xVQbyfUtD4rtFiRmhncrIB/X7UP6aK62d+cEY7ZjuzqFt2m9I8MoyDnvjvnMPtXt/LVVmhwwOFkHQ0FP5fNynAOdqsY4t7yzy4Byu9V91q2ihZgrdGqTVqdoYH45hnRrzYTWc8cj2kXMAjkA7DpWm0oP6VGOZDgnJB6GsYyaS8y5+mCczceMchbI/WpGzHKF7YO9D7kEVM2p/h4JqWo4cGQXVn0+/mFPn+k4NagvirEc36Go8sy77YqIuPKClicfejmvsHIMXVaSrOCM5kzf6lALVy74/qaSGo6vPOGRMon7mtq+maaQnt2qDON8ikV97WMfEs2m0ddK8eeftBqSMHJO9Ddzbgg+mj6W3Xt1qElgHTvQIEPFefMWU1quSGUkHaoqXROdeYIVycZ9vsN6Y0sOMdvatRJZI3yVBGdwalUkTpalzzCzSdOFtpMAD82xOe25r0X5XGDtmskGpxSIYwOX2FaQYeYQfei8yZAQCD+kI42RXRxsO+O9E8Fyklwo3ztj60IxqxgPcDeinS4lJVsdO5raklgIBdjBPtxDRchCzDfFbNq+wH614mkQR7j7VpWskquOZQObOMUxDYxzE2wvW3EW2qxSXHFcQwSIog+PnO1Nq2cFuUZ6DftQZb6dcXet304BChhED8IP96NLayvIcj0gE9M1EDYX7EjML1N1ZSpCw+lAMZhNBDJNcQ28Z5pJGCgfJ7/AEFN/ibVNCtrKGzE/PPbqEGBn6gml7Mp0DQzceYpvrvKIynm8uLuR8mlAlxltySSckk5NPMIiANkn2lXr051VhsViK6yQCO7Hz+kLpZC7l0U4zvkVK2TtyhlHKwNbnCuljUryaJpShWPmU9cnPejO44a1SAsFtuce6b5/vUArcEMMSazV6dHNLOAQB37cxj6GkV/pvM6gsCVb7d6D9c4Q0+6RlaIEZHaiDg/T9UgnuPOiMcRA2bYk/AprPZxMDnrmgdVXuf+ftBaNYumtIV+AeNpnLzxL1IQ6dKvNjm2qhDtmQknqasz4oaj5l0Ig2w3NVkbmPzmkupbL4hOlXbUPmbsVxgdP/BW8twOfBob52XI9q9LdMrDmGVoPEKMLlnQHBG5rdBG2D96DDOQwIyRW9DfqCuT12FbxOIbxnavYl2wKio5eVeu1SUZDEfNcYmSLu7SKfIYAMP3Fb3A3GV7oWq/hJHJh5hy/Fbsqq2CPeha90+OSdZAo5sYz3qet8cSN1BGDOp2j6rBf2kciMCSATg0RMoI981zl4T4uutHuI0ndvJyBnPTNX10fV7TULZJYpFbIB2Oaa1WBhgxFdSUPHaLvibheRplvbPCyr+ZezD2NBtjfrOGDAq6HDKeoNWbZcg7dqTPE+guvPe2q4kQEuoH5gO1CX0eRDNPqM4Rv0Mg85wK/BqG9P1O3uU2bDA+pT1Boi9JwaWRnibcbFcb9qn4Jh3oWLYU/Ar3b3BYBsYBNdq2JE6ZEYUUwJGc1MxyZ6HHtQRDNsN6nopulMq3iuyuEw3wQR1r1jbPvWhFJ03reDZ70aDmBkYn4Davmx3xtXoj4rziupqeSBivhzn616+K+Y61oiZMZBOf6VHSRjB+lSeRmvDAmomXMkVsQVlj9J2ofng60cyx7VCzQ5PscUBYkYV2RdzwEDcUOyohBXO+9MG4iPKaDJ4eZs43HSl7Lgxqj5EC7i19RwPvitKzv7nTblXQnGaLymev7UPXdtzA5FcqSCJKQCMGWs4f16HULRDnDgYIpj2V5Ja3CSJjI7HoR7Guf+k6rc6XeIQx5c+/arh6JrVvqNsro3qxuPmrHp7xYuG7+ZWdRQanyv5fB9pczSr62vbZZYj8MvdT7Gp04xVYNH1abT7kSLkqdnX/AFCrI2t3Bd26SxNzKw/T4NGgYEVuDnd4kXqLEQsB3FJHWLZJ4QsgJHcCnheKeQ4670mtcSaOFnU98HHbNJXUvaF9yBLVoLPTrJB7cwDXQtLQiT8LEXU7Z3I+T/tQtxFwlZajCJIIUjnTJIVcc4/3oihu2RSuakFmwcgmnI0dIrKbePeS1dT19epW5bWyvYZ4I9jK7WfCqSXAD7KOuRRtPwhFEnNFytyjIHei/UZ4luIyMAuCT8kbVJCYsjAkH2+lcU6OtFwwyfeWnU9d1trVsrbVI5U/zNKOwgsbGE8gWRowWPfJ3pTcW2qanoF1CyZKDzF75K9v0o21jVQYEjJ9cbY+qn/Y0H/iWx12zuKNfGwKPaJ6dLcXNlnJZs8zn9rfBaupmt0CEb498e1QHCHCt9rOtRWSIecnPTAAHUn4q7eo8PSmdVhTmSXdP6Y+1OzgfgiLQzPM4UzXCqHOPygb4z/WlWjss9RlIP0zvX6OmlFcOCrDgeTP2icB6RpenQwiPnkUDnfJ3bvj4qUmt7a3df4Y5cb46ijy6ukiPKBk+1Bt8wdWOOxxTZl3DkZzFmmsuDD6mA8YMaunadpwijbnU996YFnHZ5AVhVCrvXNVsuGtX1N7xo0tTOIUUA83IeVck+5qufD3+I7X7PUIxqdik1q0gBeJiskYOxODs2K1uqpIypAPG75le6yLVr3ku5XO4Adsf3nXjWolFucd/muPniDfpecRXkkZPKvoGf8Al2P710Rm4+0+exWdLlGgKhxLzDl5euc1zL4ku7S51K9ltyDG0rkf/kxP96qX9UBfw+nw4JLdv0hH9L3M2uYDBT0mOfY5GInnBabB96tx4Z69Y2F7As0oReUgEnG9VEuCRIcHqelF9twHx/qsQksdOnZMbMMKD+pFUPTaW27UUlVzsYNjGe09J12r0un0dwutCCxCgyeefadbL/jXQo7Eyy39vFH3LOBv8d8/FcuvF3iTTdVuybR2ZFQgvjAegK64V4l0u5jXUopEceoK+f70DcRT5hkB2wpFeqp1C++zY1WwIP1M8u03T6ci8ahbBztCjgfcypt8ea8kJ7k7/SprSLN7m7hjXJ53VcfU4ocuQfxBwe9Pjw0sPxnFWkQBQzPdRAD4yM0YTxCNRYa9Nc4/21sR+gn9BXBtmNL4b063UBRDbRLge4X4rnF/iZ48vJNRj0OKRlijjSWfBI52bcA/AFdZbDTeexB7YrkR/iO4JuU4pW/QlkuwAB/pZBgj+9E9QJXSKF7DG6Urp6VDV6RXH0BgOexOPp/mVH4H4w1jQtWhuLSd1CsCyA7MO4x812F0zxOtr7T4pYp15WQFlLYIPcH6Vya0fhQwsGf8wo1uIPJiIB/QkVSBqiGwrkfHieuroqms9RkXcQM5HfEtPxR4mRrqTQwzKd+xyM0eaLrC3tsjZ3Iya5080YkVsYIPWrNcI8RRCJYwQDttTqktjduznvLJpGrwayAPaWQvJ3CnkzmpCz08SwhpPzHrQxDdpzB22Bozh1KAKAGFT8F8k/pCbBao+ngzUmsVi3Wh+S9ePY0aNPHKhNV81/UJI7rkQE1tjjmF0WcD1OeYx31CKaJ433DCqMeJHDrXMxkVCGTO+Ooq12k2lzcMh3JJ6UxNV8N9R1GyLKqr6TnOd/ihLsfS3kdp11OjTGnBcA9wJxVKXltdqqqcg7DHWujf+H3WW/8AUMFrON5lJTI7qM4qt3FPDlzpGsyw3EBVlbv/AFHxTT4B1COy1G0u0OJIZFYdjsa2lqsyHbnkGeX63Su2ltCt9WMr+nOJ3utIFkskOO1I7j3Tkm0qdCueZTjamzwrq9vqGnQyRkFXRXX6EZqM4lsxLbyAjINPNQisjEY7ZBlGosf6cHvOXfAep/5RxJdIxws0TIR7lTkVfzQuLbOaFV8xSRtynrXO3jCxez1ucoSrBuYGhhOO7+xkV+XmKkZ3xSTU02kC1OcgZE9T6S9FtPp2ZDdwZ1qlvROTyjORULPoEzxvIh5WO+TSR4N4xOo6dDcwMJQ49QHVT81Ymz1GWWLEmwI79aQ1WLYxBByD2jjUUvpwMFcffxEDf6Q6MeYEE5y3XJpeXemsoO/vVrLq10+4ODIc5xvQ7q1pYWtg6xjnkZcbj3qwVtlfy4wJLpte6OqKS2f4EqPJpVvdQyBnOd8Ckfe8N6jp909wpDRk55epFWlttEvZHlKDBG5+KWuqzyh5YXG4yKFaokg5xLCqfiLmCW5xyRNjQuEzrltDOb2OHmOArD2+lXE0rQ9P0TRxBGQx6s3dj7mqB6X/AOooL2FYEmW05izOF2GBnA+tX34b0p9X06N5rlnLRjODgbjptT3ROm/hcso75GJ5v/VmptVkpbVF1DE7AAAD47d5WbXNM0zWeNLWW8VZ7aygZY45BzRmZjnmIOxx0FCPHVxbadpkhiuVgfYRpCeUsPkDtTD480VuFmWe3XNs5KuOpRuo+xqhnEuvfjpyecnGag0j64WaoXqmC+Qcdh4AM88q0WhsrU1r/qFgbcrk5+/tjtF3dXztMzMxOT1PzVqPAXguTWuJRqc0Wbayb0EjZpT/ALCqjG3eeVEQZd2AUfJ2rud4TcJwaFw5p9qiYKRhpCerO25J+9G1rvs57Dkw3qNuylal7vwf/wDI/wCZZbTrZYYFUdhU2K14sY6Gtmu2OWMWIAFAmNhtSw1HQ4rnUkmMYJX8vxnrTPJoJ1+6NrZSSDqBUlXfH/3iRWrnEV2q6tHpN6I2I8thjPtQbG9nqHnOGGRnI+lYOI42uNKScj1OFwfbNLjT3nhPIhxzbfrUGrZiAPBwRLf0nTL6TWBsMDhh9pNPBO5YRDIQ9PcVoTtuf4WM9u1EkK3VpOGKkg9cdDU7cJEc+ge/T3odKgykZww944fVlLhgBkPYg/vFo7w8mwOSKzQz+XFuO9SN5BGVJAAqAAJjce1BtlWxHabLEHfuO8zm8DsVdse1DV/MHcBM4/rXyYt0xUWQTQTuSMRpVSinI/aapQ1otGcmpjHxsKxOFx1oYiFQdlVlzvUS5JJ75NTc+C1fre15jmuZJ2EhRaPIOhNZjpLY6A0zbXT15ckb1J/gh7VwScwFtQM8RKtpTq2y15a3dTkinU1guOlRM9gCDt2rW9hNi/MXltIEYZJx3oxtrhAgC4/Wh25swhJxtUKzMuBnG9TpbjmYwDxrRy+bKqk+kdf+1HXkaAtu7GWVJQuQCuVJ9tqTOm3eFIY9Ohos5nu3jt4z+bBY9gPamVNoPG0MT2i6/TkqPrZAOcg4hdpt2PLfCgHmOalTJnfbpR/Z8P6RHpy24GHx/wAXvze9ZIuELeS1ZWkcSg45s5U/ana6a1VHIlKs6loi7HDr9WBxnj3iZ1GaPk9bZPbNBtqrz3o5QeQUXXVvao7LIw5lJBHXlwcV4heCHPlxkn9BQ5J3cmW+ixE0xCKxLDgngcwlUGKIGJzHIcYI2NOzgnWb+S5a2nlMoKZVmO4x2qvAu5ScsBtTG4V4g07T53luo2LEYQqOnvRa3MQVPIxwIg1OiL6dhtDP3B85+JbMsoPzXoOpG1QqXKTQpIMgOoYDvg1gWfZuVuhrj6TKNtsB7Tg1xdqP4nVJznIBwKXq/SsV3OZp2fm3JJO9a/q5wQc7VT3OXJnoijCge02eVX9ulQN55i7DoD71Jyu0YBA79612HmRsW98g9a0s0Zpwzycpz0x19jWcM2R0z1PbetWPl/Q9PesZZ/M5h+Xsa78zmGttedENFEVx6gO2P0peRFHxvgg9f7VNBpFZTnG1cETIaPMVB3zttioJNZhSRRJsGONx0NeFuC6hSvq+KHtS0yWRHCrkN+o+a0AM4M5OYzJY7e6gK4yCKkuDONbvhjUBbXbk2rN6JP8AT8NQFoMkkSCJ87bDPUUSajYx3cBQ4ye+OtdI2xseJy6hlwZ020fWLfUbKOaJwwYZBByKlXCuMdc9fmua/BPGV1wtfJaXUrNaO3oJOy/FdCdN1a01CBJIZFYEZ2Ocg9xThbAwiG6lq2+IouKuEJFk/H6eOWZTlk7OO4qH06+iuIsAFWXZlPVSOxqy3IrDGKSPE/DcsDy39knrxmSMfz4/vQN9HkQ7T6jOFY/YzV5RjY43r6FA6DbOaiNOvFuIEfBBIGVPUH2NTHNilsZnMzIxBHxU9DLsN6G+9bEblakVsSF1yIcxSgr13qWikGPag6GY5G9TUcv1pjW8V2VwmUZWvx6EVoxydDW6DtRoOYHjE/dRnvivu3av2BXw9Nq6mp57Zr4RvXo49q8756VqZMZBK1HSx9dtqlcVgdciomXM7VsQSuItj9KFbiAHsKYUse3Sh64h26UusSM6rOYt5ISucd6i5F5hRzPbgdqHJouU9KAZcRor5i7vrYYNfNB1260q6B5iV5sUQ3MYJIxQVfWoxsvvW0YqQRNsoZSCMgy8Gkavb39sHjcZwMj2pk6Prdxp82QeaMkc6Z2+3zXOrhziK50y5UFjjuOxq5Ol6ra39uskbA7bj2qy0XrYuD39pWr6GqORyplr5dStZrUSxvlSM/8AY/NJniG+iSFmdwABlt+lQltdyxqVV8Z7Z2pCcV6nePPJDJlMHce9LNYXpYN88GXD+n9HXrGKBgMfnB74jAlnGUdWDA7gjuK3IL5SWGcEbGq26fxHJaSiCUloSc56lD7j+4pnuspkhlVgAQD12Of96d6XVpcgI4I7iMOodAs0VgVzlGBNb++PB+YV6m5/E2zfy8rDHzmtkTMEV/eoubzp1QAZy3pPyazW7uVKMMOpwR/WjmGeRFYGKUBxleCP1glqy88kbc35u+OlDkd16F+e30OKYczW/mI8q+kHcHYZ7UBvOreQiplkOWIUDCncH5Jpe9xDhcEmO9PqCyImwnb/AB3hxY3flRt6QQuTFzDqw9jRYNXu2iQ55Nh0Gd6WkDeTEvmj1E7AmiuGdv5djRSVnv2gWqFa4OwNz3PaTkl5GoZ3bJ647mhPUbwtCVVsM2ftmpSWUZOQoJ3OBvSO1W9uW1eSK2DSFCOYdlJ7ZovBxCOmaZbrD4wM5PbiB3i3rtrp3BCabD/xbyWONEG55UPMx/Wqb6lwrq+naLBqF5AIUncKiOQHbbOeXrir+y8NxDVLW8uRHPcIvozuI16nlz0371RLxj4nub3it4FLfhrMeWg7Fv5m/XaoCUddjD3JJmtfoqEoNu/du/L94vYZJhyqsrhM/lDHH6U6dMtbme1IjjZsdcCq62d+nmpk/Wuu/hRpelf+lbCcRxyS3CMztgHG5AAz8VVNR0R9TqUUWYXBOTzKEdd+AZRXUoazOTjA49/nmc2ry5lstQjlMfN5cgblPuPeuqXhJx9wxxJbpFb3AW6ijUy2zDDqOmR7rnuKqr46eHV5bkatpdqjweUTdxR7MpX+cKOox1xUb/hi4F1G+1+TiCRJI7a3DRQHdRK7j1H5UD96N6dRqNFqWrCDnjdjuJU+p9W/F7CW23K4T0u4YE5JHxjnP6Tq1xBwppOqaeyXFrHKvKcBlB/Q9q4meOnDdrw5flINkmBKL3A6b/Su8V/cw29iVLdFxXBP/EnrCX/GEqRycy28Kx7HIB6n770/1CrhTj6ie/xN6B3XWVhP92d/2AnPeaQmbPfere/4dNIvNQ8Q7CZAPLsz5sufbp/WqgPFl+p+Ks34KeIMPBnFSXFynNaXCiK4IGSi5zzD3x3objIz2yJYOorY2iuCgnIGQPbPP8T+mLSTy2S532qvviTwTY8RWsayl1aJy6FMbMRjvTb4X1vT9R063lt5lkimjVkdTkMDvkVOX9gWRmAzRepr9RCo7NK7o7NPuRm5AwQR8cgzj5xNwtcaLkFw6g45sY/WkfdyxtGdxnFdFPF7RppdGuXhjXnUjm3xt71yJvdXkjuJEOQVJDfBzVC1OienUFcHHcT1HQ62u9W2tyvBzJi4ZVLb1r2Gry2l2jq2QD0+KBrjUmdSQTWGzm55Bvsaa6cnGIxZXsZdnfPEt/HxwrQAcxHxnpTe0HVGubUFd8nr3qnOnQWyMGkO2e9WM0TVtMijSNGwR2FGsp7mWyjS644azaeP1lotKjLoQW61FavoULycyx8zk7ADJqD0zWFwpUjFMrR9atDqMRlIwTjPtWkZSAPnvILU1NAexU3bVJC++I0OAeB5MrLdIQduVPYfPzVw4dLtY7fkEYxjGKT2ncQWtvEoUr26UcWfFFlPHzCZSD0P0pv+GQEbSGJE8V1nVdbfc72kjJ7AYAnOT/EjwhEI4b6KLBVijkDsdxmucWkXMtvMRkjeu4/iZ/lWq6DewOVw0ZIY9mG4/euJWurFYXkoGw52xjpSXVUrTcAvAYZx7GN+kayzUJcr87CMH4M6leAHGkUtlJYTSgyQP/DUnco3t9DV59REc0JI3yK/nh4Q4qms9YhmhmKEMBkGu13CnGEOpaNbys/qKDnGe42NMKLQwCN9gYu1PT7K3exOV3Zx7Z5lRPFnTRDeiYLsTyn61Vu14X1TWLkR28RCsRlzsAK6TcZaJaaoyuxyuQeX5qDtdM062iUKqjA7ViZCMnsSP0jTQLcyMQdp8HHmT/hl4Y2PD+msI5y8knqYsdifinvLpHKmWzy0EaTr8EVgkRYZQncn3owttfjlTHPleXf70uFSVsSF7k9/MOd9QThmLH5+IN3KxxZII26UG3TNKcA7E9e9fdRvMvIqnuaGRK6nP/hqf1ASDiPNLSxqB8xj6JZwIGV1yGO5o6i4Y0iYsTBHvufSN6Sttq4Q4J6UwNP19UwGfbsc0dVZXnkD9RK91PQ6zaWXPfPEJ5OD7COBkiiVVPYCq8jVb3gmbU/xs8KWTzeZDIGJ5ObZlYEbDO4qyw11GibL9tjXPH/EHxbb2mgTwq4knnIVEz0HcmiSlSf6ikBlGAB2OfeUDUDUMArFs7uPPJ4gn4ueLOlavp0dlYXMc7SNzSOhyqgdBn3qhUnOxO+fignRZmDHP5TR/FDNdTpDBGXkc4CqMk0M7liSfPJlp0WkWis/VuJOSTxDzgCWBeIYXlRW5CCnN0DZ6712g4c460pYoUmuYY5GACo0igsfgZ3rknp3htxGIMvYzI3XBGD9dqXWtWWq2V4UlWTmXuSSR96W/wDUTSzAVhgfMm1uhp1Kp6eorFnnncf4M/oWtuJrKRgAetGUF3BMMq1fz48GWGva9q9pYQTXBLOMkSOBGo6scHtXa3gzhu50iwhhN3cXCqNnncyP+p7Ux0941CswrKgecyo3JqNPeK2at+MnaScffIEdTUFcQWj3NiyDvt9qMv5a0pACMHG9FpwZtyeDFNqGkiTRxEBuoxikSNKuophGU3LbEVa+dQFIoHuraPmLAYNTPSLFHOCO0O0Wuso3gchveCV2sflgHBoRuJCTgdqMbmM4O1CUsO9asXCjHfEdaIoMZMGbgnlI96HSCM/pRrJbg7YNDNzGUc5pFarA5MulFiHgGCkqbmo9o+nWidoc7YrDJaEIDy0uKkxstwEGWH1FR0p2qcljI7VFOuc1DClcGQ4j52AxnNF9hbEkbbCo2CFc5FHdjDhRtg4rkyC+zC4ElIoAFAx2rN5a1sbZr8aiMTZzMHlKe1aU0A9qls9RWJwD2qJjxO1JzF/e2oKHFLaePDbjvTiuQcGlhfD+IagFmI6pUsJpwELk02OG7aIxmQks5OcDoMdKUkIywzsM7/Snda3+m6ZYx8jeY7b/AD96baJx6hbIAUdz4gnUFu9EIisWY44/zDy2hv3l5i3KvYZ3r5qvFNzYxm2tV864YY29XLn4HelBe8U6hKGCkqPYHH9KGrHWL2C6U8xXLZJ70/TX0IcB2bPcnsJW6+gux3W7DgcIOxPyZOyaLrcl2n4qF42clkDkDm7nfpmthpTGSjoQwPtTrhv2u4oYrhi6sVKyDZlPZgaJrrhBpkaSN0SbHUDCP/1L2PyKIGnXBZWzk+ZE3VHrsSvUVqoxgFO0rW93F/qB+9EWg6Pf61fxxwxt5YceZIdlVe+/ue1EN3ot9aMfPsgP+YLkfqK82l9dW3phkaP4BxUI3A/MeF0aomvGSOGPIlu3tRHbLGmeVFCjfOw2pe3V/wDhLhg59B796juF+JLq5le2uHLtjKt3+hqd1mwjfdhuTvQmoYhOCQZUq9KUu2WYOeQRP5yhOxJbfJrdS9m3U7+1DnM0bKpOdtqkBkuGHYUnxGknhJLKBkDHUYrdtVXmYHvUOjEbhu+SPat1QOXmDZ2yM9q4xMm7cwxM+2x7Y7VprCcYBHuR/tXwSO7AZwQO1ZuZixOxx1rYzMmfy2WVXzsOoqeSTmAI2+vaojnGy4+9Z1iKlWBIArUyEcJUnBOGA6VP20q83I3XHX3zQlHIrsGzg53xUv5j864xXBEyTslnh+dNm96llLmLOd+9aFtc59LLg461JDm5xiojmZIu6sIby2dJF3PfvWLhfjHWeFb2KCWVntQ4Cs3YexqYQMX6796jdVtbae3eOXdWGCfYmpq7Cpx4kboGByJ0p0HXbHVrGOeCQEMMkA9KJXjVlIIrlr4f8WXvCmprZ3UjG2kPok6gHPQ1030zUbe9t45Y2DKwzkHNOkcMMH9PmILaih+IreIeH5oWa7sxuN3j7N/3oPsNRhuU2yGU4ZTsVPsRVmHVWByAdqRnEPDr288l9Zr6iP4iD+bH96AvoxkrGGn1GcKx+xmpnpvXoZ+KhLG+SeLm6FSQV9qmA2TS2MsTdjcrU5DLvQ3vv2rPFLg46fTvUitgyF0yIcRS8wFTET5B/WguGToc1Pwy9B2pklkVWVwjXcV+AH0rSjf01ujBo0HMEIxPh618NfSfavh71uamPJyMV8JznevWD3rwR8VozJrOufvUVLHt3qZP0rBIowf3qFlzJUbBghPEd9u9DFzbkkimBLGuM1AyxDJ70usSM6rItp4OVjQ5dQc/QAH3ph3UY3wKE7hSvTFAkYMZKciLG+tCAdsGpvhriifS7kBiShOCKkLiHKnO+1Li9typbAqatypBE06qykHtL+6dqcF5bRzRkEMO1RHFNvp9xpbyzOI5Yh6Hxkt/y/7VT7hri640edVdsxkgEE/vU/xh4iRTWztYhZ3gAkaEH1EdyKstTU6hNjjg94N06nVVdSpalypBzn49v1n2e1kDc5tpSpO7bZ+uKOtM4k0yF7fTp72NZ3TngiY4YpnoM+x6Cg7R+LoLrgqHWIGid5ZjH5UmRyEZyDjvtRLLwvrXFGml59Q0sWs0bLGYbTmkjJHVXcghh1B96IGk09Vn0rs28Zz3noWr6xZqNIyXOpAcjtjaV9uI2LfUTFyjtzZz7VqavdXVsJr2KCa6ZnBWKEAkZ7nJAx7mqXrxJxRw3xlZ8OX95+PjkkiWK6KcsjxucBj2yO9W2vruXRNTeJJDIeQZyBjJ+KJtsShAWYYPY+8r1OmOou20gNYASVPGRxnnxCS6ufx+gx3JgMUwUCaHIbGdtiNjQ3pVqI5oWnOFHUDqcdBUDda68UbSzuAgQu2+OUfIrWGq299aYsrpJHkXKMDzf060MNr4cY+47QyrStUHp3AAuQTnO0Hxn4hDq8N6bk3AIMZ6qO2+2KlLS7ZowT+tLn/1A0U9tYu/Meb+PNylliU/zMBk4z36DvTIl4P4oHK1sIrmNow6NG4wwPYH9/mi0LHtzOrX0qotVtta7eFYnAI/WfZp8OX74A+1BmoapaWCNI/KOZvyjqzHtUy/DXHUwKJo06t7sNv2oc4l4E4is7DTLrVI1jL3nlpH/MSULZIHbapWqtI7DsT39ox0R6f61aNqazuONqsCT+0MuEILzXbq3jICmZy8h/0RpuT/AG+tD3F3gtwtqGuTO9x6JCxZYwOYE/PSo7SdQmgvp7WCZkQKsc3L3A9XLn69ac9rLEqDf70L/oGpDyHHMWdb01345GD4qVforA458nMomP8ADddJPLy63Cq8x5MxtuO2aN7DROO/Dm2FzDMmp6WhzcQpnmiXuyhtwP2q4pvFDKirzknAFTzWyywyRsB/FRkIIyPUMYNbDn7xBqdNprqNttAHsRwc+49pVmx8U+FtTvrVDds/nMFCMpBXm682f3q62jalYWdlHHCsaIowqrgAD4Ar+f1ku9P1SeBwY5beZ0PYqyHFNSXj7ib8F+HGpyqhXBCnBI9s0Sb29Ri2GwMCUK/pNgs+hg2OPq4I/aXh8YvGi5tZn03SZ08wKfPnHqKduVe2fc1yb4k1BriWV5JC7sSWZjkknvRRc3LyczMx37k0u7y1eV85G9LWLMxJMa6XR16ZD/uc/mb/AAPYQAxzHYjGacvBfD0ep3PluB19qCo9LIBJ6dadPhvMYtWVB05uvtXDZAzHujWs317xxntOi3hZqWo8IBLSeRm09j6M7+Sfj/lNX+i42s5LTmSWN9uoYHaqKC5thZKCwbIqsvGGkajdB/wU8kXccrED9jU1eoxgYB+IRr/6VS02W6Y+mc5KYyD9vaWu8WPEGw5DawMkkz5yAcgfG1Uu0Tgy1uJTLMykuSSM++9LTQOEuIZtZ5LiduRQWZjknA9s1dHTtBtIbUeVcNkLnDY3xWnpexmswWC/sMyXoek0+jdq7kY2nuSOBmLfUPDfSpbZ+UKDjrmqd6zwzeaXqXInqTOxFW/4g4oks1ZUII7iqzalrr3UjOUI396XME8Lgj2npCdKJOc7T4Ikolkz2g65xWfR7cwS+qQ9feiDhm/0+QhZm2qd1P8Ay2S7jjtyCxO+K2zZTPtH6VgEMxH0jyYxtPvpvJxGC2O9fk16aOflKkHNOLhnSLWDSsuoBK53FK6/0trnU2EERZebt0oPIABz38TdN1RsbI4zGBZ6tqs9uVWWQ5H5eY14W48SGQpazLbRgHlOAx/Q0X6Lpstqil039qbYuoEgzyjPeikY98kSr9Xo0uoUV+ipQtkgAcyjGp/+vIpnOqapPdLnK8xwo+gGBVb+M3ZwGXOQNxiul+twRX0DqVG+aphxdwuyRyty/lBoK1jvDE5lXt6RRpKf9CsIjd1HgynmmXkkVyuWxvXQ3gDje7htURZCCOx71zjul8m7IGxDU/ODdTKTxgnbAHWjFi/QW1pqlFgBRjtYHtzOl8PF006EO5zXttblkOx2+KRVu7lFYN1FF9gSzRAtjmYAn61MHx3npdnTNGlZZEAGM9o2LUz3LhUJAPUimxaxNBAQWPzWfh3Q0MallCjsO5pm3OnWaQcoQHbv1NFHT3WDIXjE8s1nV9ILSi/Vz4iHa85piuakQVK9dq86jpIWYOh5RncUl+MuJ20u2ZV2YjY0qIesMXGMR7orqr9uw4HzCzUtTt7cljKBilRqHiOLdyqOMDvmqd6zxze3EjKshIzucn9qjNKM95NzyZ5fn3pd6zuQEByTxLe7011EsowB3MuqviUWtXy3brVI+NtWl1nUQzvlQTgZ2oj1q8SOLkU7dKTk5cMznJqyrX6VSqxyx5PxPLddqFvvO1QAp8T1+DjhjJ26bVZPwY0lpteiu5GXlRuVQfc7/rSI03Rdc1aGR7OxlmRPzFQSAfb61Yjw50jiPTHLy2E6xTOMZQjlK9N6hZ1GM+8AqWu5/SDqCeMZGZ1/0K808W6qcbjBB7VA6/wtwdqcqzXel208q7JIyAsB7Z2OKQTTcQMiFTGpwObf1DPvivU0/FFtbAi6LAD+ZQTRFmvrBw9BIx5i4/021rcXVMuezc/4jz4b4b0LTtQd7bT7eDnABMaBSQDncirOQBPLXl9q506Nrs8FysjXD+Zn1ZOxzVhrHxAtVQK8nK3s3+9SJfXYuOE/tI9b/T+p0ZBrQWKRzsHY/aWTb61qONjSdTieecAxRu4PdQMUVWGqTuQJEI+tEKB4Of0lYfcMgriEMyGhm4hyTRicOKjJoCe1Eq2IN2MXFxAN9qg2s8jYdqZMtqCelaRtRUpwYfXqCvmLhrI5GBQHrEHlsrEdyP1p+fgxilvxNagW7kDoM0Dqawam+OY+0GsI1Cgng8RbWsUbzZwSoGa255c5Xy8DFEnDlmXhZiAwb46YqevbO0RSzjAFKlpY1btwGZYW1lXrlDuJHAxEXcQgHp1qKa35jRxcRxyTNyflPStT8N8UpK8mWBbgAINRw46UY2qjk6Vp/hDnYVJwIQNs1GRIrLA3mbNeQKyYbB271+z0qBpEJ5IArC49NZmJGTWpIRQzHEnRSTIK6GzUvryEFzRtdyhQaD5OaRtqWWvjzLPpKz7SLjgAzipOODPatuO3ON6m4bfegxqOe8bGsY7SG/CZHStOa0GDtR0sO1a00PpO1TLqCCOYMa8zc0G+lkEUB6qVAPwDVwor21ht1klkCLgbk1SSyuUsbrzyCxUdMda1NY48v5nU/h15EACqSdquuj6lSunw7c54lH6t0a/Vair0wFVclj9/aXPk4s0hHwkbSAnfIwMUWTWOkXFosgs4yJEyMoM7iucMHiTbrLyXFtyA7cynOPsasqnjfwJa6fa2yzXVxMI1QJFCWZj7CjPUR03IYpu6VqKQm1Hbnkg54+cRi6do1npreajh5CcM2OnwBUjrF3lQwwaH11eG803z2tpYOb1LFJjzB7ZCk4rHp8nnglkPL2HvS13d2xkkmSgEE2PyV4M/nmWIuF5hgd8GvSuEJUkdf0rJA8ciAZIBGQaxzeUJOUgfHyagkck0ZW/m3xmvWcnA7da17ZsAgjpt71sIHWQnlyp79qyZPkNw0UoJTOQc/OKlickMqcu2QK0MOQBjBHSpMRu6AqdwNs/0rRmT8rI5xuD2qRtm/icrZB7+9RPIVlwFwSNx8VmkYc6ZJDdiKyZCaSxw3MDjGTX6K6VOXnBz9OteI7yV1RBy8/RkPcfFSE0SMmBjPz2rj7zUlI5kddtsDbP9KI7ecEYYbj96AYy8ZyRkdNqnbeTnYYzXBE3DDPNLnI/3qMnhE6FW653HSskchzgjv1r60A84vnrjNcCZI+40tZrMxthh039qLuA+PJ+Hb9bK7lZrYnCknJTPY1peW2CAwqB1DSbW5iPmJ6vfvU1du089pG6BgQROoOn39tewJJE4ZWAIIOcit+SNGU9xXMjgrjzVeGdSgs74lrV25UkJ6fBrpLpmp299bJNE4ZWHbsadI4YYMQW1GtviJ7iLh+W2nN3ZrhT/AMWMD83z9ahbW5SWIMu/uO4PzVjHjDKQR165pHcSaJdWcxvLMcygZkiG2fp80vvox9QjDT6jOFbv4M11O/avX0qMtbhZERh3H71I522pdGRmZJwjhcjOMip+GfYYO9DWATkda3IpCDUqsQZA6AiHEMuSKmY3ycUGQTmpyKUGmVdkV2Vwh+c18OxrSSTK4JzW3kdRRgOYJifqxkEms+Ou1YcDI+BW5qeD2zWDpt2rMfg1j2FckTJqOMgn9KiZYepqcI61HSqSKgZcydGwYIXEXWhK6thg7Cj6Vck7UN3C9aXWJ8RrU/aLC9Vlzg9f6UJ3CKwJo91FD6v3oDuQVznahwMQ3OYs9VQCNgaq9q76lZajHeW0jK8bZyOjL3B9we4ps8d8SJY2zpG+ZTsB15cdzVYxxDeS8wlfmzvg+9H0syYOO85NhRgwOCDwZe7QZ7bV9GkgixbiRechAMBn/mA981ueGXEuuaRr11w3qkv/ABAZbZv5ZQvUp846iqVabxnfWMieXMURCGwPg5xVk/8A1pofEmnKzBrfUbEpNbTRjPLJ2ZD7f6lPanCXhlyx+nP7RkNUhydo+rvx595anxD06xGs+HurrGD+F1yKCZgB6o7kEDP0YCp3VHuLvUJ5nyCznb2HQCqyat4jS6lwxMJLQJNby207lHBUPBIshKg7jOKuk0dlqUa3dmyvG5ycdj1wfmhuqJY+npKnIXP8yxdAvopssJOXYYDH95X/AIp8y14a4kupfUBZTYB/0hOUfqakPCPhy20HhwatqI2trRmjBOyQxJzO+O7SMDv7V58VofI4ZgtckHUdRtbc+/lhvMk//dWjDVJYL+00bTrbJt9SeJuXoDZ2wEz5Hs2y/egqLbV06bs4Z+f/APKiT6yqmy87cDC8487j/wC4z/D/AEVV0eyvNRh5767ke7cnZofPPOsakYwFUgYq3OiWsEcQWONVUEnlGwGd9hVeLLWopLiMMvKS3TGw+Ke9rf8AlW4Y+21PNDqUvdyh7nJHtPL+vVWh1BUgnx4/SMye9t7aLBOdsY96pFqnEya3c22mylpZ7C/kTzlwUaMjEch+o2JHcV98ReMZ47OSGKRlaTbIONvtVS7bVotDgi1CeWOF3JW2/wBc7ZAKcv8AMPnsaDu6ih1R01akn/cwGf0kHS9BqK3FzMEx+T33f8Yhbokw5pCNyZH5m+Qd6dFvPlBviqt6Hq5t2vYvJkZ4nYkEYyTvn6H3oysde1K4kAaPyx7CijtySO09yu0Vmpy4xjGck98ywNrfRxXDSO2yKegyftRlFqkEi5XJ6HalDZJLMoYjttRnB+IhPpRSPbFbG6IL6tKigE5cfOBKqcfeFGqalr99qVnCJFuH8zAYBgcb7VUbVuH9Q0+4aKeFkKncEEH967E295zkhowpxtS1464Nl1/TVuobUs8DFWcLksuP35a0yWKhYZIHeVDVtp0Du5Cc988czkdcx+hsrtQFJK4mICd/tVoeI+Gntw3KmOxxVcb21dJDkHYn4qOpw/IMV2L2IOQfIkLNeOBjI+te9A12TT70yYyDWm0RYnC4rC9ouM4AIorbkTqpirAg4IOZba18QGmt1CyEbCi+145tY1/iOD71RqO4MLBebFHOm6ZfXhDb8poN1C8z2HQ2GypSFyx7y4EnGFsrCe3wsiA74yCD2I9j7Ui+KPGTWYC8VvZQRBti45j+ntXmLT5LeLGDk9upPah7iDgXXXt2n/BYXGeUsObH0rSO/IBOCOcGLP6h01P4VbC612DGDnk4glbcWy3yAzSZ+KmVuYmU43+RSMNv5UhVQVIJ29qdvDcSSW6ltyNjmhmIWa6L1p3KUWgZxw+ZDTzSKCYWKn4NS/D13fQaiskjMykjJ7jfrRl/6R1W8ugLO1kn5uoQZo7j4WvNOVY7yylhduiupBP096gJHePL0qsvCm1QRztyM8fEsfY6td3WkZQ7cuAenSj3gy9tG5hJgPmo3hDh26l01QbeTkxtgY609NO4S0uwhVktxzEcxbv6q7oreywY7+c8CV/X9SorAAO7OQQpHHzPd1dWyx9R9ajLW3W8BAfY9s1m1LTog2Mj6UNW1ybKckNsOtdtkNyOBJ9Ou/Tbq2O4jIzCubQjGCebP1pR8U6O0loxChiB3p0pxBazoF5gWO1YXtRdo245TtjFYUVxgcwRrr/TZbe3bkTi7xro01pfu/Jygt9qh9AvHjlXtgirn+K3Cc8STMI8gbg47VQ1ZHtpiMYIO9RVMcbT3U4lIvTbYcHidB+HdRFzZr6gNhTGgvY45It88rqT84Oapxwbq786qTtkVZRrhWj22zvQupv9OxVwefMvGn6o1uhCEchcEzozo+oq6K6tlWAIOe1FN3qCJGBys5PZRkVU3g3iS0ksYLd51VhyhQTjPYj7GreWdkzQxkHII3q4Uu9tCbXwcDIniVvo1XMHByCePcTSsNPa+YSSJgY/L2FBXGPhTY6/ZmJ8xMRgSKNxVirK1WKMdB0qcNxGqEHHSsalGp2Ou7PeAjW3euGrZlAP0gHGJy4uf8NdhbqW/HOxHTmUAftVe+KOHTw8zQnAA2DDvXWnirXtPsLCaadlVEBJJ/tXGvxG40Ou6o7RgJChIRe/1NLa9Lp6bAVzkd88y2HrGs1G2sktn8x9h7xJ6hcSTzAg+kGtazsrvULuG0t4y8srYVR3rVlnUIfUKdXhVEV1l75gSqBkXb/UNyK1cx+pu58Qimss6IPJnWDwY4Ch0jhKwhngAl5TJKQBuznrTR4j0u2QMQAABv8Aatrg3iSwlsYowwzyDHzWhxncRGzlKPuVIoldSi6fxwuJWqunXjWhRnJbue/MRi6nZqSAh5hkfapx9UtbqBhgbjpn4qqWp6hd29y6hid+tTdte3IsBKEc5G+xxmq5ZYzMCxyJ7oOjolKMHwcY5MJNQhjM3MGBCtkr74oOvNUyWU7qD3NHWjPa3mksXZPOBPMrHBFJDX9OuWuiYgeT2HvXNi4Wtgw5jHpaaa/UMpyGQ4JPxLneH/Fto9vawzHlcYQZ6N2FXNgjt5IlYKN65keHHDmt30quQI4UcZYnc47Af3rpPaF7a1UMOgqxaWy16RnsOAZ4z/Vmk0Gm6qy0Wbicmxe+0yZKxr3FYSqnfrS91PWPLDEE9egoW07iiRbgrIBg/lJPejNwBxnmVFdJqHqZ1r+kRo3kiRoc7Gl9PxLaW0gSZgM9M1h1XWo3iZw3QUhb0vOshOTnud64utZOBjMYdP6YdRuLkqBHHqPGNhbQ85kG/QA7/tSw1LjKG9idEiYhhgHp1pDyMI5GDHcMRU/B5EibEZ+BSBtdbYxXcB8S10dG0tXLFmYHv2EavD+stat5bDKN0+DUzql1Jcy4X8g6D5pYWLlZkbqFcEjvVoIba1nsg6ov5QRtU9YexSu7geJze1On1AfZy3n5ijitCFBI3+a247LJzg0Yy2uJcDpUnHaDHShmAHE7NxMAzZkjp+1a72rA9KZAtK0JrP8A5aHado/MXTLyjpitBnC7570Y3NqRnAoBvo3T6ChH7RnThjPEl2imoC51EAbH6VB3cjhjUE3Ox3zvSe23Alho068Gbck7TOcDapS3tTX2ztOmRRrb22QDiq7dcSY+rZVAxI2K123FSsdvjFTsVsfvUgtv02pf6vPeT+pmDogOK0pohvRe0IUdKg7hBg1Mt3M6UbouruEYOelLDU40UHfNN69R2JCilPqUcjFgBvRtVpLDEOWrg8+Iib+Ge5uEhhUs8jBVA3JJq4nCXDGkaJbQ+XCjXJTEs7DLknrg9hSd0ewtbWfz5DzTZ2Pt9KYqajczSBIw/XqB0r0HQgqmT39pW9ZpbLOA20eTHm1xy4wObpn3orm1W200KztzswBCJu2D8DpSMmupIoVUy4J/O3QAfWoc8V6NbekOZW/mKjIJ+tOioJBH5pWE6a7AYQuOeB5/4nHDTLe8hkkimkLov5SeuKJfIjlAbBVh0wetY47iFlznFfYJoy/MrhlOwB2waQkkxCAAJqKArDOe461O2rlVwT6c9DXmRc8pzjf1D/ztWCO4ji9DoeuAR0rXebkvIjxOSSDnv8Vs2suMsDtnBr5BGJguMgkYxWMRvHK6AYz+lamTZeXHKyLgk4PfFTaqvMOaLtufY1oywkKpBA3Bx0/epXmDpgDDDo1c5mTU/BrIeZsqwOVYVNeT/MDg5/WsHmqzcpZc4O1baBipGce3ya1kzJ5CMoCbMO4zXkGSCQcvUnvWKKa4QPzqNv6e9eWUSq0i5I7D2rcyT6zO65yAw6ipuzuEdsE7jrQqhmVcDckDr7VtQu0dwPSRzDr22rgiZCp2YXAYA4AO9YINWt5p2jLBWXfDdx8VKKUKdeoofuNMgkIYAcwJwe4rgY8zOZ+1rT7W8iKPg8w2HzU7wDx7fcMXsdhfM72zHEbncY9j81qQwAKGYkkVo6np1pdWxjZQNsg9wamrsK8eP7SN0DLgzpxpmp2t/aRTwOGRxkGpSVEZCCAc1zf8PeO77h2/GnX7c1vI38GXt9D810Ks9RgvLaOWJwysM5BpylgYYP8A7iC2pq2+PBik1/RZ7S4/F2seY2P8RAenyKhILqOdVKn7d6sIUVkIY5z2NI3X9HfTpjd20RaNj/EQdvml99BH1LGOn1G7CsefB95jODvttWYH5qAtL+G5j5o2BAOPoR2qaBGKXxiRN+OQqfjtU/bzD6f0oVBNbkcuCBUqMQZA6Aw6jkG/SpNH29qEoZfmphJvmmVdkV2VydBJJzXwnY1qq+39azdaMBzA5+PxXjNfjt2r5n461uZMZ3rTcCtwj9q1mwc7VHOhIiaNSKGrqPB6UWuD0xUDcrsahdcwit8GLW8TOf60h+Or6XTtCuJkB5yQikdixxmrC3cfxtSw1/S4NRsJrWUZVx19mG4P2oBlxGiP2nMTVJpJJTI5Lc3XNLqWblLEL32PenpxPo0tneTWsvokGCCNwynoRSWvLIqWyudzuKmrx5kdhOOTAy+vJVZR/q6n60ScP8RTaa5VRzKSOYHuBUNJaRMcHt2Ne7fTJJrlIkXJdgB8UwOwptxBMuO3vLM6a88s1568QXkR5T2AZcb1bDS/EvUuHeHre1VIZbhoohzLuvpXBZvnbaq1cOyWdvHFbXOQqJ+cb5A32oIh1mObWBA+SkrkIx6gk+nNFXXKKAoGSRjEZU2hbEJ4wf5lhdU4z1bXtTsrm/cMlq7mKJByqpdShIHvg9atnwdregahqTSQypB5Ntb2GnWrsOdUVfMlYf8AU2B9BVPOFeHbPVdF4gvpLswjTYFkAGCZGcEqoz3JAH3q/wBwl4RaBYCymuLdp7xY43bnfKxvgE7DA2PSkllGqenHOMYA9s8ywfiBUrOT35/b/wBxp22lMh8+R1Aj9TMxwFA3JJpX6l/iF8O7eQWkeoNKynlMioTHnpnPsKSP+JDxHGm6evDlpNia4Ae8Kn8sXaM/9XU/Fcp5NQgby/g9tzT3TabS6ShRl2sfuFONo+c+TE7s+pZHtwfKj2E6leIviFwnZw215PqcU4mx5EMT5aQnbf8A0KO5NLiV7W8kW8vLk3MzIohNthYIIxuEh5gSeu7Hc0veEvDSy1jhn8dPbNLzEjMjlQvsSBvR9pfCVjY2621rKuEOxPPKFJ/0jaq/ZTXp9wrsK2OxLMQCSD4hjMFcljtVe2eMYjPttX5rMW8SETSIQgZxzsV3VjjoD+X9KYnBWi6hr+ktf2UbymOVop4Qv8SJ1/lZeu/alPYeCXiBqqrqOmTfxI3LI0kZiL4/0hjuP2p8eEF/xdwx4lWlrrmkTWn+bKbW4lwRFLKu8TkH+cH057g1a+mdPuuRmH1BELEE4JwM9oOvWraqWbTahHwTle4IjGs9N1G2VUks5VI90I/rRillfEKfw0u/T0mr58oPUZr7Upto8U//APUr93V77GyUXP3lR9D4M1LUbhHuI3t7dTks2zN8KP71ZcaRZx2iQRxBY0UBV9sf3ohrBI/KK4a5mwANoHgRNqb3vxv7DsPaU34/8JrHUxJPbxqkx3YYwr/X2b5/WuVnG3ANzZPNmErykhlIwQR713k1DVY1ypIDEbAnrVT+P7HTL2znedFzyEc2MH4z/agNRRhTahAYdx7zXTrrUs9NQWrJ7Hxn2nBu9tGhkbmX+1aWUKkMKf3GOiJFLIyAEAnFKKy0Z55cYNdVWq6A5luZdrYxFXqMTRyq6k7HNOfhXii0iiWNsE9AO9eNR4a8uM5qJ4Q06yt+IYzNyjIPJzfl5uw396lKq+BnEb6Pquo0TMwGRjkGWg4ejnv9RheO3LHIKrg9t/tTp4h0+6hhVZbW4zL+SNYi7M3sCNqd3hj+CmEnnRqJFUYyBkD4+tWyVLI2r+hQOm1H0ae6v1QlygnAzjMrvXv6hv1N2FRVCgAk89/afzicbcK8SabqU15daZLbxSuSvMMgDtnHeoHRdW5JRyHGDgr7iur/AI4x6bFwveyhDIzEoI13G/8AMfbFcUvLu7a4DqD16D2pddQisU3biAOYN0rW2OWJTCqcZAOO07EeCXEOj3GnNbNKkV2rHHOQOfPsff4qz9xFaT3iQzrGxwWjVsHLLvtXDTQuIp7UegkFsEjPtT/4V8QNVj4k02Wed2gWTB5mzgEYrVN7V1mtkVlJzkiNOqUF6bbK7GZiN2COePYzvXw9o9vJZx4AAwKxa/oUEcRZTg42xSW0PxT0OCxSSTUYIo1XJd3CgD5zTFh450zWbUSWU8V1GwzzxsGGKbla3YDK9u3aeZJq2S1V9TD5zjMrFrBlhvpEZ8n3+KALqO5mYlSR1pz8RaZFNO9xE3rP517H6fNLWeRYUJJ7VWbqyjMpGMT6a6Pqku0NLL+baAwxjmI65k1WzvFYMcBhvVn+GdchaJPMA3GG/wB6UM6rPzejPfpWtE89sf4YO1Q0Hacwy/SLbU6s3fxnkfaWB4l0JdU02YBEdShx87Vxe430mTTtVnjaLlKsQf1rvTpNxbHQ7Q7OWiUn643rmd/iA0W0fUnuLddyoMmOgbG//ejtVUoSq7I+rggTxRdXYda9RGVJYDPcFfMppw5fhbqIE7BgKvkmoWEelqCkeSg3I3rm3pxkjuB233p3Savem0VRIeULgd8Urup9QeMiO6LvTJ47za1TiS8t9TdbaVgC2djtXTzwg8TJNU0a1hupWFzbqEkz0cL0YH6da5acGWVnqWrssnqYDOD3Oa6S8I8OWnnwoFCgjJZdjgVmmuuptBXnwQZFd0ddXS9u7Bryc/fxLytxChA5XB296A9e430+1hZ5btI1UZYlvb4pG8WcRWOjW7RRSoHA6Ft/vXOLijime9mf+ISCx7k1ZTqLePy8+xziVFulMoH+sAfbHMbnij4nXGuzGC3kYWqE7nq59/pVO7y+ffJ+hrxcXjYOfbrUNa2N5qN4scak5P6UC79/7xtpdKtahV3Ek855JMhZLi8ml5IkZjntvVquAL27tLWOKYeWRtgjt71Yvwz8JIWsxLLaglh+dqZ2s+E8vm81tEB9DQbFym4ISJ6N0vS6HT6lTqNSivjlMjAz4PzMfD3EDKV5JSuOmKYN3rGqXfKi+stkZztSaHCmu6aA0sB5AfzA1ZzhLSRJaQzFd/nvihFDOxTBzLV1EdLoqGpr2OOwIOeZE2XCtqsHmXKBpCMnIofvTEHSCMovMwQA7YzTe1+9eGLlC742oA4U4ekv9Xe5mywiwQD05mqFtOxtVF5JOMys1az/APFt1Vr/AEoDj5J8CAt/wpJEjyxBiVOTvQwvnFQCua6KyaPC1sv8Nem+wqud/odrY3L4txhmJIxnr7ewrWo0dlGDuyD/ABNdE/qOi6xlKYbx8zW8PdfjtVe3kjYANzKQOmferPTcQW0tthXU7b771WbTp7K0vhsFEiEfQ9qxa7eDyecEBlPUHGQaZ6O+xdPksG2nse4ijrXTNNrOp70DV+pgk9wSf/MONUv4TK5D5+9K7UNXSPcE5FRFreCclWkOSPfrURq1m0a84JIro2MQcRppNBXQ61Oewx27wjt9cedCGfb5qZtrlZHCA7tsKR1pdeY/LHn9O9Nfhyzna6Mkm2B6R8msrLsVXuTJtfpqNPTYwwuBkD5mvrHCl5JzyrkDOR3FL23byX5GJznFWqlulitmVhtjFU81vUbdNSZObctkUHq9KtNgOTkyt6LU+vvUkcdsR58MwpcahCrkYxzHPfFWojhighHIfSewG1Uo0e6dTDIhwQasrpOuSNEFkGciitPdWgORyfMSdR09jXAg5UeIURqHuG3+KJI7YYG1RFlGvOWB2JzRkqgChWbJM47ASJ/DbdK1ZIB7URcgz71puoPaoDNq0Brm3BzgUA6haek7dacM0fWgu8gzmg7O0ZUvgiV0vrXDGo+C1HMNqZWo2g5ifmoaGAc3Sqlq7NpMuVFuUE+WsC+1FUEOAP6Vjt4DttU9FDjtVessBhS2fM9RxYNbixithI+lbYSgw2TJDZgSEmjPShe7Q46bUwmiBB+aDtQgdAfmpGVwM+Iw0loLgZi0uwo5t6hYdJa7hmkLqoU4GTuamrtWJIOwoH1C5EKnBIx2FP8Ap1i7gWXiPNTXY1WEfDcc4zJGLS7WMAqpYjoSK0dRvpLKKVwMFY8hTsAScAmoo8baba+UkgmJP5iIyFH3NI/jDiO51q8e1tHwhCBlU+oqNx9jXpmmZNowRKvWtt2rStwSM8k9sCbE+t3l1KvPI0oZsDB2H0FNaK2jFiGYKCMds0t9C4eeNIvMJY4+wpszaVNDBzRMZBt/DJx9xmmoYcYj7V20hq0VgMHxOTlvLHIuPjsamUjAO5Ow3pcJDdQznCsoBwD2P1omgvpOb1DlpAV9jPGA3uIaKWYHqeX52rbSNRCTy5JYZHXFatpPGRglSG22O9SQkByF9uv0qKSyRt3USKPyjH71LOI3wy9ev0P+1D3NE4Hrw23Wt2BIWGDIQfb/AGrmak/GySEoQOm2ela0kMkKock4ONhsM+9acQEUpAc+42yKmUdXKtzEYOMZ2J+a12MyZBCZFw3pbH7VnSDliCg5AG3uK15LuOOQIwOD0IPQ1tvORHkodvbfPz961zNT1GTOrjHqUgZ9/rW+tuBG2cjboK04ZI3I6I/fsamfPUpjPQZrRzMmujIsIJ3HbO5rd/icgIx7j5rVilikblKb53FbSqwJB3UH0mtTJvwvIc5PtW8HDkLnB7GolXI2AyR2rd5lcgDZjXMyTmHTHcH9qHr93BHLjG/N3qShmYLysw2PethrRJGzgdetc9jNntAOWyW9haOWHIBypxv9RTI8OOP7rRtSOm6gzeST/DkJ2I6f/dYFUxoqlcZ6d6HLzSIryJhJsQSQ3dTU6W4PxI3rDDBnTq0uop4VkjYFWXPXPWsjIrgggFSNwd6oR4deIF1pVyNL1N+aIHEM+ffsavLaXEM8XmRPzK2/WnCuGGJX7amrb48GIzW+GrnTtTe/tXJt3H8WHGcEfzCssc3mqpRsgqDnqKfxVJUYbHsRSY1rSZNPdri3XMRHrQdvkUBfSQdwjPTagMNrd/B95jGMV6G2K0oJ1ljDg5BGRUgCv60BGE34pcbH2qYjl3HxQ1tkGtuKQA7nvUqPiDOgMNIpdsH2qQRsjrQnFKf3qZjkBHXemVdkWWVyX2Ofav36VrK2RWbfOKKzkQQjE+fesBG56VmY7/U9K8MMVqbE0JVJHWoS4HpO1Tr5INQ1wpKmuJKIFXSZz8ige8i9VMKddzmhK5i774qNkyIQjYMrJx1whBrEKkMI7iLPlSY99yp+P6VTebgPiwXHl+SMZxzlhyn5zXS2/g587dqXlzbY7d6DDMOMRiK1bkyk8vh1cBE8+6QHb8oORW5NwstqsMltLi4i3DMPS3wasVqULc2cd6W2owXEjFEk8oY3cAE/bNF1k8TnYo7CAEM8VykjcvJIp5Zoz1Rumf8ApPvWlw7wsLzVWMrFTA6smDjJ7H6Vsy6NqigSLdJLPGPRIU5C6/6HxsQaM+AryC8v5AVZJoY3V4ydx6h1+nap2A7g9oTRSr3ICM8x+aJpsOk2NuiDADhstvlgeYZz1xViOMfFNl4CaDSpJ0166dYokhiLsz8w5mBHTI6d80gdTvYF0maN3ClUZlb/AEkDY0LcKcR61Z2xutPuFjvxC4jkZA4VnHYH+tFaW8KQzDcFbse0tt+mW6gZH1KeOcA/f4lH9VsOKNX1HULqaO5naK6EN1O2X5Zjk8jHf1ek7fFM7hfgRyivPA4yRgsMHH0oy4KivLHQ5vOLiW7uXnmBPWTJGSPcUfWepuLyUs5bJHKD/KQKndgzsc5JPedaPp6Lix/qc88+I/eH4JbOyWGKTlGMHttV6PB/hvSr2yurswIbmOfy3fAOBgMMe2c71zZg15gqhSemaenBnG/E1hbX0em6kbYSMjv6FfcAj+YHFEaemt3y7quB9JYZAP6Zg/Wel26zR7RtBDhsnj4/zOwVtYxQjYVuTW1vMqrLGkgVgwDKGwQcgjPQiqU8B+OVownsNeuC9zEeaOeKPaRf9LBejD9DTWk8YdD83ljsbqQf6sKP2NGPpNSG4ww7hweCPgnE8ut6Zq6bChpOR5xwfkGWKr5Si0XxI4e1S8S2UywSuQqCVcBiewI703qBsqsrIDKR5ECdHQ4ZSD8zzWJlyKzVjZgoyai5kRxiL3W9LhdGblBNUl45nMEU0Uj5HL6cmr26rfRiFh8VSzinS49S1qAEbAHP3rnUg+mOBk8GPehuo1ZDD/TwSTjtjnic/wDUrIzK6sM596RV5bvp022QM9a6+ng7Rlt8yWytkY3Gaoz4p6JpVlAZrdRH6+Vk7Z9xQY0uoqIYgbc+8f6rqGkutOxSvPBlVbrU3nTBFBFynmE7AZoseS2EY2yTtQtOy87Z6UwWDEk+YW8N8b6vpFxCn4hx5R/huHIK/B7EfWuzXBtzf6npNkwuOdZYEd2wPUWHxXCaSNGG/erkeDfjM3DckOm6qWNlnEVwN2iz/Kw7r89qJqKq4JGRjH2+ZV+qUNtR0rBC53YHOD5/SdE+NPDiPVdOeGRdmBOw7iufcP8AhtutRvJZZbn8PbBiMBcuSP7V1EtOOdJvbFZra7inicZV0cMKHTr9jds0VvInpA5wD+Xm/wB64fT0tqUb1MA98eZJo+pvXoHRGUAnhsAkfaccuPfAfXNFZZ9KE15Gpw4C+pfn5FVyN3PbgxyxtFImzA7EYr+hrU1jFsqxqrArufmuXni/4Z6tq3EjXWkWDSgwJ5vINi/fFa1enCorI3c4x5EF0nVNQtqrY4KPnk8FeM8yS4K8DtT4k0C2u7jVWiM8QkiUJzgBtwTk02OFvB7iLhXUFl8mNmRsi4iflLfbrv7GpbwI8RUsNEHD+tL+G1DTvQiyekyRZ9JGe46EVZzXuPeGAqK+pRK7DZevT39q5On0jUqxsKsO/wB4q0ert/EKX2WMWw1bqGUn4H9sQMu9eiEZDryv/MOm9KZr1bq63/Jmlrxnxnpk12WgnZgNsj+bHeha24mVbZWGzEZyaRXWEk5bOPM+kukLQmlDYWskZKg9pZeWS3t7NzzKvU5NIyfiqKC/XMqH1djSS1zjm6jZ0VmYHqM/0pb2FxqOqXP8Ndid6ES0sRjgQe/UYsHp7mJbt7zp1a3VxqGk81jc8qsMEA7qT7YpD8ScOXq28nny+YHBG+T+hNGHhlp17AxWRzj2qw+v2VpJp8vMijA2z70Y9YtryeCvmJtXpduoLCpQ5HJwAcHwZxiuuHpbW/YkHkB/UU3dI0vT7uDkcDHfHav3Hs0drdOUBC0krLiGdJcxnlx81qtxsGO8qz1sr8jtziWAm4d0/SpVurQlZUOc9j9acOkeJMEDjMxiflwc9KrpYanPeLjzDhhjGa0NW0YCEtjcr2NcmljZkjA+I8/6mqV4rqVcjBHgyc4q4lGr6vJIs5dRsMnr8iljeKoHNmlrPPdW10d/Tn9KkG1GWdcZ+1HKQqAASsMxdmJ7kyTgt7u/vI7eBGd5GCqqjJJrop4beF7aZbrcXcB804OCM7/9qCPA3hO2EU2qyoGn5uRQRnlXqcfWuga3kUcY3II7Vwq7xneAM/viONC71WF/TyRwMxg6TBDBp8UaqAeWpvC9CO/WlvYask0nlJn0jc0fRMdts/NP9PYnpbQO3eVHVMRe5Y8lif3nnUdHNzGsars6nPxR1ovD629tEgXZQBWha3oTlDDp0pj2V9CwAyK16YyHx9WMRZdrdQalpLkIDn9Ys9e4WNyPSvqB29jUxwxw41jEwbqzcxGKbClHwa3Qi4oIoot345kg1eobS+hvymcwRvpRHARjeq58RTpJP03C9qsDrgTyzhsGq3am6jnV9zXOpBZAMfMZ9DrBvJB5B7RHarcFXbfv3OaDf8weR1V5GKg7Ammdf6Q1wpZcZOcDNKK6sJ4HJKMME9ulV01sh7YzPb9NdQyAbl3L+4jamtontgyKFwuQw7Yoaj1hLi0aN8FlyKX8WpysrReacH+XNakUgiuhk7Hb9aIa0MQQoHGD8yOvS8OWfdzlfiPvhzhSeAmciNjIAQGB2HXGaZ72y2sXPyFcfO1fuF79LjSIs7vH6SPpRzqMCPpje5BIPbNWSmlBQChOcZ+Z4vrddqvxFiag5Icqf0lH+OPEDUrZ3ht2RAMjJGarBYX91eam0s0hdidya1/EuS6s9UuEf0nmLD6GoHgKSbU76OOPBLHGTtj5NVFiW3Mck588y7aZNNXUDWFCkZz7y8OiMfLhJP8AKKsBpOCBSoh4durGyDbuU64/rTJ4dkklHpUnGM47V0q2AAMpB9ouusqclkYER6WB5UGaLFdSPmgu1DoN8bjpnpU9FL0/SpCrDxFLYJk3zdvisbf+GtQuvv0r80o5en3qJpoCakxHLmhS7OxOKIJXzQrdSdaVX2YUw6ociBN6gOajIocb4qckHM1fYYq891t+bODLJW21Z7hhx2qWSEY396yRRgfpUokZpVuzJPUmBU2G1Ziu1bgUV+K7kVtc5kwszI9tulDmotmM0TvG7NhVLE9gKFL+JgcOMHPQ01QWMh+k47ZjDTMgsU557xX3iAsx71h4fuzZa/blYonMrCNi6BsKx35fY1M3wUKTSwuNY0/T7pJ55gvIwYDr0qw6OsJt5GY8ttNlTjaSCuMe8evGen6NdEHyI/NLYyB1HyKodcaTp8Ovy3NshE2Cvl49JQE4I/SnZNxPe3Ae8uI2XnJ8qMjHo7HHzSc1P8bJeR3kK83l+kgexORV2oQFM55PnxIel6O9cFiQu04yfPtDVdTtLW1WZm2wM43INQknEt1dy+XEnIm+5O//AIaiQPxEn5dn3Zf/ADvVkfDXhvSdRna2kjjOOdixHqb2C/TvRtYtexUzj/xD9c+j0VLai1CyoMnHf+ZxjHIrMjjMbEEEA4Ga8NYxlyVk2XpS34M4zS4CWt1gTdFY9H+vzTbvHuZIwOTYk5PbFLmV0fB4njqMjpuHMxR2qq2eUZ2yRt0qTTmUYVzgdMn37UFqk6Mx81iBsQT0qftp+qq2/XH/AN1oj5nYPxJ52LgAgfT3+K31PlEekFCNj7VERO22cbdRj9xRIrhwMAYx6s1zOptO4YKoXmIA3z1FbEEZR1D7gkj7da/QoI90K4I298/7VuNgj1MVYEb1zmaxNx4RlSCCAPy43P0NSKwokLNgkfzAnete2y4IdlPsB+2K2uUo8q8mUfB2O5auczJsxpEXjZfUOX9qzpHDGXXYZJIA+a+2gAjAVOQex7VkESSOhGPSd8/Fc5mTYEUOVZew2I/pX3lZjkHlJO4/2rNmLBGx77V5ZwnL6hnflztn4rU1PogYtkdQMVnRZCyk9jvUZDcTEHlOMNsKmIfMZn2O/uNq3yJkyzRsVbYHfb4rdspSqoG6nvWBRIu5Ax7V4CiVXUHDLuv0rmdSfnhEhQkkd9qwtApRgT3/AHrctmYxYOD/AHqPupZ4pEVF67fSuOZkD9X0i3ltSSOY+3TBog8NfEfU9H1L/LdSDCH/AOORzkY7YNejAbj1YIyBzDPetCfSILiBo5ow3bONwfeia7dvB/8AUhesN37TpTZXdtcxCeFlZWAORW+8SyowIBBGCPeueHBHiBc8N38Wm34JidsJKSccvQZ+a6CWV5HcRrJG2VbGKco4Yc/+4guqatvjwYk9a0eXSpzcQhmtmbLp15Ce4+Pev0E6SoGUgg0+p4Y5o2VlBDDBB70iNW0eXS7h54gTbscsv+kjqRS++gqdw7Rnp9QHG1jz4PvNkHP1r8SebqOlaENzFKgZDkMMgjvW2267Uvh83o5Tn96nopRj5oS6b1uxSbgd6lVsSF0BhnFJtipJXBoUSYAj9qko5fnNMEsEWPX8ScwT0PevB7V4RwcV7PzRWeILgzUfviotwvL1qVkH9aipNhXBkggveIACaEZmDZBFGd0CV3oLmTJPxW1IIkuJAToOX+9A+oW4Cc2OtHUxIGKGLxMpgVw1YPaEJYRwYob+LYYH2peXkW5GKb1/FuaXd7ASxrS8QoHJgIwwTt9q0tGa0suKLeYgK14rW7H3fHMv9MVOTRnf+tVx47vyZrOKCcLLFMXPKcFWAypqdF3NjPcGTLd6LK/sRLXarpT6hFNEZmjDnPKP3XNQuhaRPpbFDIXx6gT1OKEuGfE3RtUsIf8AMJBa3O6M7DEchX+YHsT3FWKtV0+/0uSe3uopZIRmVUcMeQjZsChW9RMhhxLyupqZFcHg9oEoiXsAlhjPK0hQEdCynBFaUmjCFGldgvMHPucqcY+p7VuaJYx2htbKWduSSSR2Y7coO7Z+n71YbQ+BL3WVj9aoioHAc5C8+4G3cjfFcI1hfCnIz/Ew6pKly7BV7kmVQjS4jO4PqzimnwpDc3VvqY85oI4ohJ5gXPO3MFCfHfenBqXC2haNdw2mqp5twxE4eKTnRo/y8ki4DK2dwehrR4pvIL3VnXTLf8NZLbxRKoHLzsg3cgfPSno2onLDdxx4jGvXDUKFqRtp5NmPp4PjPfMiOGrGBJ5pGcsxbHMe9WM09SYwe+NzVcNBX8E7mc85J9PL0UfemPd8aWGl2ZuJwyRAgc2Mkk9NhXXqZPDQHqVVjAnBIHmN9be4eeBYEJkaRVTB3yTt071afVPEODQNJtbaWUX2qFQphVgSp7eYVzv+5rnHp/ifw9qOEt70+aXCKuCpDE4G5xjr1roN4deF8OleTqOoulxdkBo1BDJGTvnP8zfPSnNB0/o7rTuCtwo8n2+0846h6ICFyDjOFHdv19pYLR5NQl0y2kvUVLh0DSIvRC2/L9q2LtXaNgDUoMV8wKUlsuTgDJ7CU9hkH5lftTsNXeRgj7E7DpUBZcLvHcfiLhssNwP96sw8Ke1DF3ZtK3wO1SItbMM5kjavVJSUUgAjBwMEiIbV+fy3EQGFB69M1zd418NOI9UjeWfUHlkBLcoGF9+ntXWbUNMJxkYHtUKeHo5YzmIEfTrUmoX1Dwew4maF9Ojmy3JOMDntP59puFdVtZmjlTBBxn3oa1DRp4lJINdf+O+CbSN3kEQBbptVRdT4ahYMPLPU1XWvtqsww7T0FNPXZSrocq3YygoLq3qqbgiSQHNH/EfDU1szMq7Z9qWsEkkTEEEYp5VYjrkGK2Uo2CJPR3OpWMbi2upIQ3UI2AafXhLx7Hpk93aai8rieRZFmzzMrAYwQeoxSCEiOvbGKj3jaORZIzhlOQamGQwZeGHYxddpKLByoBzncMA5nT/UPETSP4Fta33OZnAJ6AfG/vVhtE1Kzm0mFowpJjHMD1B71wmub25aTJBG/vVieAtN4x4ltpEg1eeGENyHlYlicVsaixbS23eTF2p6cip6iOoI/wC/z+0JP8S+r6IlzYCGVP8AMVzzeWfWqnoGI3HxVHtN17UGmBeV3J7kkn96u1ff4VeN7m6eZbiJ1c8xklb1En360luJvBvinhVS9zCGQb8ybiltrbmZnrxk+3AnPTTVWyqLlZyxPAIHPgZmlpivdFXZyTjI3ppKCkIBPbv80vOFY2YKvLjHv2plX+Y4z9KqurJFuBPYdLg0qQO8Xd5aefNsu5NWE4H0CK35WZaVWklGnUle/f4p822orCi47VLQhwDH+j0pLeoR27SzOl3NvaIWwBt2pccU8ZBl5QxC5wN+vyaE4eIFkTkJ3oOfRLjVNQVFJKZ/rRd/qGvCn7zNbpLShZeT5grxHpkOo2bsTk4JHfeqX3sBs7plzjDV1du+EbW20oAEFgu4rnVx/ozW187DoTUFKvW4VvIlI1tLooJXma2ganDGVBbemhc39vLH+bbFVHjuGjceojemBbXsr2x9fanIJxiVhh9Uy66kBc8rb0z/AAq4DfXtUDyrmCJtx/qIpH+TdXM4BO3QV1e8FdChttBjxyiUsebPUg71i7S6qxwCZigkE+BHlpXD1hpdkfw1usWAAwXbNa4gmu3wJfLUdyN6ZzQFcKT22+a+wwRc35V/TFTaitUJNRCr7dxJNG1j2MN7Y98wPsrJLeQLGzgH8znqT/tTV06BywwxYdc5oK1GaC39RqT4c1eFrgEHAIO1Q6bUFG27s5PMc6rpSHT2WopJA5zzzG+0CrAOYAnG1Qtlf8l2U/09QO1SU90GQZYHIpRRa7aQ69IhYYfb7imuovVGTDYBPMqOm6LZeLMAkhd2BLc6fKrxgj2qelbEZPxSZsNVjVVIkXl+tTc+vJ5ZBkUH3zXRNbHIcYiJ9LfUxTYT7GCvEWreWGwhPxnGKrlql68jlsYxTN1u6Fw7HIP0pbzxKwINLrWLMcE48T0boWmSmtXZPqMHI9Zijj5ZSdu43rHLqFndIyqQ2B3FRGoaQ75wcCoAaQyKT5mCPahTZbgDuB4l0fSaV/qViG7/ABmIfi2WWyvw9upPqwwHt71t6NfPdOGYk4O+RRRc6X59yVcljv1NMPSOAtRniLRxBFPQk9aWJg2lQeT/ALZx+ITSp6lz7UHHMl+FdVv/APMDHbxl1C/xB2+n1q6FnALjS2BByVzg9RQdwlw/a2FsiNbCPC7kbk++aPLm+tbWORFYD2bNXDRU2ImWbue3tPEus9QTW657UrCDsPnHkzlL48aBKt9GVG7f0OaFfBPQ77/PWKREwxpmViNgD0+57VdbijRLfiPWLWCZcogLyY774Az81ZPg3hDTbS1jjgtkjjXbCjr8n3NKjpWbVWMWArV88eTCV6hYenpSn5snc3sM+JEC3jfT+Vj6gM596iYb/T9PjSNSFJGeUDJPya1PEDi/TdOkbTrECS4/+WQfliHsD3akLZX5ZizOWYnqaC1/ValsCIMkefvHvTenX7C1hwrflHmWTh1kuwxsKLLe/RsZO9V8tdQCgH+9E8Gqrj8/SlS6wt3IMZPo/YGPD8QMjB2P7V+a5x1OaXllqts6EPJhlP61uf5hFyYLHrUruCMgiBemVbBB/aE8swIyDQxcyqcjP0rSkuwBlHB/ao9pufvVX11pCHEZUoMzIu5+tS8CnNRFuMvvRQiDbFeeOSxJzDicTbRBUgq/FYYx0rfAAA3rSSItMeMmtOViucGtx8b1qPHzDOc/FSbXbgDmEVsAcmaCXMiOCjlWHQ1q3mqmRv48KP8A82MGtS9Xl3GwNR7crWoY7sDg/enHT7btxr3kYGfgxjsqba23J7A+RB27n09hIpVCrdebY4qsPEmix/8AqOwFuFaC5k8uNGOfVjIG/wBKsNLGGn/4YI360ruLLG9WOyv4dvwlzFKo9ip7/UE1c6aFZBkdjmMqWeu5QGP1jGCeM/8AMT/EUWr2EojlUjAyMHO3xW7wrdRT3flyDZ0KsD700tWvrbVvVNAqSAYYr+VvnfoaAjpHkukkPY7EVZUB9Pb29pcq7FfTbHXY5XHHv7yU1PQ5LefMQIycijXh+7vdPljufL/iR59PQEMMdvrUrpl/a3UaJccolXpnvRfLZSToEtoC8udlHTA65plpGYXJxk5lU1urIpNN6DaQQzHgEff2n8tc9pJBKHXIxuCDgirEcGcYrchbO9YeZ0Vj/OPY/P8AWtvivgufT5GIUtA35W7g+xqu95ZSwScy5BU7Y7VAGq1FY5+x9p5Ey3aW3OOPI95e24tLVosKvKooREa285V2AI3FLnhHjbz1S0vZAJRgJIej/wDK3zTrmS2uYGKAMw3AB6HuKVMj1sVb944SxLFDLMdtiUekrkfmFZ4LiSKUq5J9s96hbRmjPqQ4ycHHSiBZ7ebl5iCw9jvtWj5nclo5suo39R29qm7gco2GzdPrQwsic+2RvtjpRHG5dGXPU9R/WuTMmtCs0LgucnYZAyaLAWePlz6SDv3H0qIdshenmKMFq3IXflGFBK74zWjzMmewhkgkILsebqrb4H1qRSX15QAJkiQZ3BHSsN40jQEo7IykMOXfOO1bEcayQCQIVLbkdDn5rnvNT8VDFZQ3pO2R2rdmjEnLgA43qJ8rkHKByqcHA25TW9EoywyVP8p+lbmTaRAFOdj2OaJLaRWTBAG360PxwMC5ySXx9vpXloJM7HGOgPuPpXPfzMhIUI8wNsDuN61kYK+VAJBwfvXlJ2ePDDfGK9KxVhjp0O9amTYjn8uUqCSdjj61NPhl39qDGZC/OXIdTtgYyPap9LlVj5huCdx/tWiJk3YYHjBKjPxUgj+kcy4JrUS5HmYAHTOK3ZvWoAHXrXE3BDXdFhv4XBI5uXG3zU94cceajol2dLv5S4C4iLHrjtn6V7S1/iZ9Q2xvUHrfDtjf2+GHLIu6SLsyntiiK7CvGeP7SF61YcidG9O1O3vrVZomyp7dwfatySJJoyGHMpG4rnhwL4g6jokyaddoG/iBeYtgHO2fvXQSwu4bm3WWJsq4B+nwadI4cYPeV+2pq2+PBlf9R0a+0e7uZlbzLOSTmVR1jGN/tmpGG5SSNGVhhhkfNPieCOaNldQysNwe9Vm1/TL7RdQWWGMvZOd8HJjY9cfFLr6CpLDtGumvDja3cfzC4MNjX4Hc7jND1tfRyheU7EdKlwy4yP0pfmH4kik56H9alIpzzg9jQuWwDk7V9iuDgHIx23rtXInDVgxjxyDvUkHFCVvN0J+1TMUudqYJZFj1SQbsK1ZEyN8VshgQKxv0G9TE8SBRzzBW6TKnFBkqEE5HWj+4U5O9ClyuB0qNW5hO3iBFyMMc/tQ3PgDpU9eHBJ796EppMnrRinIkWOYOXcRIb2NAl3AQCfamaQrD7UIX0Bx7j3rorkSVTiKueMZIxSBsuDLLWuNtRE3NyIEYoDgNzDerLXMGO2KreOJIeH+OVv3WQ27uY5iN1IxjmH0NdV5y2O+IbVZULaS6grv5BlkD4T8MS2Mds9mAiZKqpI5c9TUPF4a6XoF3BfaZfCN41PmBmIbk6FWPRlPtT9Gs21/YWs9hKrq+GJB35aWfG2t2OkWBeZC4ZxzqozgDff4NDE2EEZP295fL6KvwxsyFABIxj+ZXaXXNbn1VbZtPulaO4KEJEW5kJ2wcdCO9dGOFtbubDMFtfxG2iAzFIoLjPztiqicE8aTXGoyedb81tczyRSqc+gqqsvKe1Q0mia7a8SXLrLcCPLlCXJ5kY5A/3qNA4cf7OPHMX16c6ypAVG0t3IyOJd3UoZL26luJWDvI3MW/bFDR0mUN+XIz1BoB0PiC+URxTpz4P5icEKBnt1PsK2bXxZ4SLGO4kltJVOHjmjKsp9j1oghu+cyxWr+HCKWUDA2+BiHUGkv5n5c9t96DvEtNJsuDryG5uFimlCmBMZZ3Vg2APb3NRPEHjdwjplmxsiL25I9CqML/APka59a9xTrnEWrSXl7NzO2yKOir2VR7VnYGVnX9RCqyAhiRjAOf3h5psoVsggAmujXhX4/axwzw8dLnslvo42drd3kKsnN/KeuVHb2rnfw/pWoyKjC3bmbG7bAfrVoeGuEpLu6iiuLuO2Q/nkbPKv1wCf2reh1l9TmsKrpYRlXzjI7HiVhqFdPrQkDmWn//AIluOWuyy2Vh5Wf+H5bdM/6s1afgv/EBwtrUqW2oIdLuW2BlbMLH2D9j9aVPD3+HjQ7uBZDxFFcDAJ/D4fAPuc7Ux5/8OXCbWkiJeXAlI9LsqkA/IHWroG0rfTqBUPmpWUr/AIMQ2nQHgZB9wMS4yujorKwZWAIIOQQehFfCgNLDg3hC44c0C1sY9TmmaJd/MJePPsgO6r7DNNBC5ReYANjcA5GaSWpWrsEfcoJAOMZ/SJmAycHI95HTWqSHcZrKluoUDHSt6vnWotx95HtXPaLrV+GrS/BEiZGc4pf6lwZYRWxVbdMY6BasJj4rRuYBIhGOtdAoT9SA59xMzYqgK7YBzjPE5LcfcH2cdw6xRgcwJxjpVCOI+F5YJWKpg713B4x4Shn53UcrjJ5h81SHinhRssTHnPtSFlu01pIH058e0vmjtr1OlXJ+oDBz7zmOlvIpwa3+XbenhrfDHIzMiH6Um7q2uImIKnrvtTujUJaOOD7SGyopIuSzV1NXE/w9a9Z6bqV9Y3UqqJmV4idgGGxH3qo0FwpYqT9Kmo0mE6SwuyOu6spwc0USQQc8jtFmq04vp25wQQR9xP6LNJvbOe1BBU7dsGlTx5o2l6jptxDLGuGU74GxxXMHhDxh1HRHVbghvTgk9GApyat4/wCk3ViVMbhyuPTuK2b1YMtiHn25ERf9OvTDDn5B5Eq1qujHRNXmhUAod1PuDUVM6z9Tn4qcveIodSmuLpyAixMFBO57/rmhXh/Rde1mT+HGQu3qAqv26Wuuz8wORmex9J1dQ0qmzmwAZGJ7gt/LlVVbcnan1o/DdzcWwdskHfOKVWucB8V6ZyTxxmULuQOtOLhfju3i00IwwyjDxsMMp+R7VE67QMHiWFesJu9Pb6Z7jIwD9oPvpEsV5hWyM0y7a6g0q3EhIDY60leIuN9NiueaOQBydxnrUD/6qt72MB3DEdAOlB2WmtCxB48Q7Ra2u1nTcCxbgGNH/wBb3F7feSchT+UUD8b6CbzTnkIGeu3WhGzYDUon6ZbarH3UC3GlnI3K0lTVPbYSRjHIgHWdD6WCTneOZyjvLSSG4ZSOh61IWlwUBFGnF1l+H1CQFT+Y0CRAMMjPbarXW+5FM8tsXa5EcHDMMEssbSDOWBxXRnheRIrOMwymNsdQcVRHw30U319yE9x/91fyPht9OiUvISAAfpQ1wYt+XIA5ln6VSdpYopDccw0i4hvoZYzIzSBTvvvg9aYScQWgRZEk9LjfP8p9jS80qTS7ljEwy3QsKhNVsZLR3Tqv8pHcUA73Up3yjdvgzt00/wCLIA2MB47MIV32pGSUsZUI+DmmDwrpDXsC3DO0aZ9IHU1S+eW5F4FVjgtjGavzwDeo+kRwn88Q5SK10qwXara/aSdW1mrp0JNQ7kAkDsIYXFs0MJCknbG5qrWtPHbcQ22+A5yc1cG8iZULEbAZqkHGNtc3GptMDgKdvirF1IVKihO/9oH/AEnbdbrXVjhShyT5ljrDUYGiADAkYqSvZFRQ4YnmGc/Wq78O30xkVJSc9Kdqo0qEBvt2oXRsxU5A+0ddW0y03L7efmDl5rUSAhjigK71k551bIFTWv6FNJEWUnO+1JFDPHMY3yfr1rVtjK2CMRx0+nSNXuByfIjOl4gtxEOaQZIzQTPrrSc3Jk1HXek3bqH5QRRtoqQvDiSCPHQA9fk0JZbZxxn+Jq9koOVUEe8nOBIbK71Fjc7soBVD0PzV5tKtLUovoxt7VzJvNZGk6xFPAwPI+CoPUe1dG+FdWtr3TbedJgUlQOv0NG9GNdgtbb9ec584nkX9VX2tqa8k7Sn0jxkd4wbqzg8jK7VW7iuxZraZba4KyZDYORnB6bU8bq+kbmSNQ33pVa1BcNG/owatRX6CDk//AHzKHVtLjj/iIXhjU2jci5kxKrYOTvsaYvEfihFpVm1nZP8A+6Iwz42jyP61TziOw1CDXBJDK49Y5xzbYHXGKjZi5kZ5mZ2YkkHck1571Xq1iV+lXgNk5I8Ceg6bSoXrtZR2ztHYz5c6rK87uzM5JJJO5J9ya3LfW5FIPL++9DUsi4LCPAqHaf0liCo9j3qhq7ls9zLZXYxPvHbbcRIcAsQfY1JniJMgc29V8FxMeVY4iztso6nf2FbGs6mOGLQPcESajIoMUPVYR2Z/+b2FPdNUz8kkAd/aNErLnGOTLb2l7bQRpLf3QhyvMqc3KxHbPfetmLVrOVQ8V9FJk5EanmP0OO9crrni3U7y+L3F0zySHJZzuabnD/E91buoil5TjBYdan1Vq1rwnGOPf7yG+hKyf9TLe2O06NQTtOWCp5ZGOpIP2qchEinHmZ9qrfw1xZd+bGJ5DLGx3BO4+QferAxzRyMrxlmTsxGB+9VW+2u5CVyGB5HaBBR7QxhZhjIwaJ4HDY2oUtnLAAkYqejJDALvmkDVvnIyZA4xCeM5NbeQBvUSiyLuRXlpmB6VzsdBypB+0gABPBktkMM1pElX/wCVhj6V8V8ID8V9BBzT3Taffs8HvOSxAPtISQeaWXG3eoK6hhgjODn33qcldIWbO2aEby6V8gH3q0aHQ1KMsoL+879azcNpIWRaKzyDlGcnFEj6L59lNC7LyMp+oNYdANrzOJZFX1ZwetOgWNhJCriVBnYeoCndVbqWwOO0YW61QEBzng5AzzKU3ujTQ3RHKQTjm+CP7GsUsccGC33x3p68UWhhQyx8p5QT7jFV9ueIOdf+Co+q70QNQq/SQcy3aI6vUqm1Qyjg8yUjgscByxx9P70zNA4osbNxEVVQQfUOu3vVXNS1+QZAJx7Ut7nXblzs2P61qvVFH3ByMe8N6l07T3aV6tQ5GRxjwYvr2wtL2CRJArg5DA1SnjPg2SxlLIvNCx9J9vg1fjyVVyp9TEZO3X3+9Qup6PBdWzIyBo3GMYqv6bUtS/Hb2nnt9CWpgjnxORF9ZSQyZGcA7Gm3wXxQqXiQXTkF/SHJ2P1+aYPGHB0ljIxClomJ5Wx0PsarTfWDxOSNquiWV6ioc/YymPXbprcgceRL4TxE4eLIA7e9Qcbx+eBjlPXmI/N8Uo+CuOMhLG+bfpHIf5vZW+fY037iLlHmquUU7rnalbVsjbW/Q+8dJYlihl/Ue0ko/JV1XnUE4wvvmppJOVlAYAYO2dz9KjLSZJSqFcZ6HG1bU9nGAOZzkN1zjcVFnmS+Js25b14kLb5HN1+RRMoZOV0UkEbj2obhaNN+XmFEy3ahcZxk7D6VomckSY5gFXPft0rL5sigDGx71A3bSvHEEmC5Iw39qlxOPL9Y5WBwd9j/APdanM9GdVVCxHKTgnr1+a3Fh9Bbc5O3yDUbbJG+Ry7K+cdR7VMFjGeUA7nbG9ZMmul1JGx3bJIHKOuB3+lTHmx8+OfHTOe1awjuFjBUB2B35tv3rce3leRJEPK2PUvXOfesyJk9yWwDKUGCCT9fes6jm3KnI/rW83MQu4zjr7VhDf8AN6xtk965zMmu9tGxxy7fpmsggVU5fjOfavdveSElJIjgb5rY5ImIkU5DDY98H+1byZk1VVo8H84AHTtU5aXILeXzZ32+K1ILZIHYrkcwye9bIddnPLgAknuDXJMyTLc3Kc7EdPrWm0gBGVz8+1fTeRMuCds9t60bhk8gcuCemOn/AIa5mQR4i0i2voHBBjk7OvUHsaOPDnxEvtKuItL1NgWyFWT+Vx7/AFrVtZBIuGTcDFQmrcO2V/GTymOTBCuDuD2IqeuwqcH/ANSJ61YHI7zpDbXUFzCJIpAQRtisN3bwzRtHKgKuMEGqG+HfGeqaLqH+Xapkq4wkxOzY6Zq+Vrdw3dsJImDKe9OkdXGDK/ZU1TfHgyq+qaDc8P6kskXO9nM2AepjJP8ASjGJwYwQcg087m3jmjMcqBlbsar1qum3WhShgWls3OM4yYyemcdqV30lTkdo30+oDjaT9X94QBgVxtUTknmPKRymvlneRzgFXBHXat9sHPznNAxgJsQXWAq0TQzHmoIOx69DUhBcHmwegrpXwZG6Axhxyg1u5BHShWGbIBzU1HJsN6NV8xe9ZE83Cd8UL3EXei2Q5GKhp485rZOJtYuL615lbGd6V95G8bkEdKfE0PMOlLTV7YMSQN8VPVYQcGY6cZEXhmGDv96j5WQrg1r3BaKTf3quPibxhrOixWsdgIw9wrkyMOYqF29I6Z36mmgEG3Ru33korGSRUUdWY4G/yapxxfoEtpcwIQZLORm8qbORltypPuP3pC6rxPr2pkLfX0swByFY+kH6DapnROINSsUaJHEsEgw8Eg5kf7HofYjetgFecyF7AwAxGpwNxbe8PapFDNJJJp8rH09Wj7Aj6dx7U3eO+JdNn03VFe5imdhEyAHZgzDAGPbFIrhS2TWNXe2LiKYxM1sjEFXdRuuT3xuKYPENpeWX4eHU9JHLLiOPy0DkgdgV771G+02Kcc9+I3r1V34NqmIZc/ST4mjwZrUen8YWdvMcWcrvzDoFaRQA/wBsCuqMGiRXttE4Ibb0sN64r6iUt9WhWORmMaJgnZie33Aq4zeJet6JaabHZ3oiM6iaYsodY4lHqIB7k7D5rdiZKH3Ea9M6k1VLVE8BiQfbMvL/AOlBHLzsq4UZz0xjua5o+KN9bapxffPZlGjjCxebnCuYxgsD39q0+L/F3jnWA8Mt28UHTyEHIcH/APqcvU/FJCO7mZ+ZslvY1GyED5kus6h+IrCMc4IPAxCy30qzyDcXBbbPKoxke29MjTJYbcg21rHEP9QAZz9zmlnAY1UyzSBF2JLHAAppcNtY6oBHaXUWd1Y59X2HWl1m7B7kD9oPR+HU9lB/mOnTJzKY1dyHLbKpBc/bt96spolgbeNGGFzuQW5ifrVNLTW9B0DURbS3atMxwP8Al+p7U2X1nXpgESGWKP3/AJm+p9vpXSsEALIc+JKzbzhHGPPMtVZ6/wD5TeLNb6gLW4GPVG/KTvnDDuPg1ffw68TrPiCIWl3PAl+v5eVgFnH+pR2I7iuJkck6AguoJOMs4P8A4aJdNubmGUMkhBB5gRncj2p3ptVfcQj1PYvggZZft/xANR0qu1chtre+P7z+hiv1c+vDPVPGfiFRC1+bbSwy897PCDccvUrAzD1E9OY5xV/LeFYYI41Z2CjGXYsx+STuTTLU6b0CoNikkZwM5H3z2PxKPdUa7ChZSR5ByJs15r1XygZBPlfCNjXrNfMVkyCGr2JmiIA3pPjgsSlzIgbfYHtVjioPavAQA1JlTjIzOke1FYI+0N3nPzjfwqLRNPaR5YZ5kA6j3H+1c9OJuFWQv6OUjOdq/oEuLZJUIIFVV498MrXUY5ZoECTHfPZ/+r5+aBs0/O+r6T5X3+0M03ULaDttzZWfPcrOBl9pdxbzttsCcVPaa55RzDttmrWcScETwySRzRMjofUpGCD80mJeHZIgW6dcHpWJq1YYbgiWdFDBXQhlPIIiL1yKZmPIQM0Mwi4SPDEk0wNVTypiGPQ9Ki/LVlOMf70aGyAZCV+onzF/LqlxCQGJ5V6r2q9ngjxbprskDSjnGzKeoqnE+mRyncDerT+HHhnCtxbagkpWVCG2Jxj2OKE1CnAI7+I30hu9T6MNgcg8TqPLpdrdWRYoCrL1qkHiDw7oluszrEokI6jb7VY+44lk021VXyQF2INVK4sutV1nUVFvCVRzuW6DNL9RcqgeT5EZLfgstiBgR+UjtOenFNlNHdt5bZQnOCelRvD+qTWdyqzZZSe/aun9z4SaNcWcccseZGjBaQ9cnritb/8Ah44f/CEjzCcZyW3rpmJpUPWcMMxJpxaNT6lJ2leRkxccJajpl1Gpa2Ax0YL/AHqxMEMFzasFG3aqs6rpMnDMyxpcAKDhSTg7U2eD+KYH/NKGHfNJLKq1XKAYMt2q6nbqFrRwu4dyO/2MQ3iFwjN57SgHH+9V1OitCuRnIOelXt4+1yzNtJjB9NUum1RH5hnO/v7URpnfbjwDEVyVZz5xGZ4e6mNO1JGJ2OBV19a4vin05VOPSNz8Vzx0eZTKAD1708lstbu7MLAS3sCOvxmptRYyLx5E3p9Saqyu3Izn5EtB4Yanb6rrtxaYHMsfmA98KQP71cu54Mh1OARnKhTnmA3+gqr/AIC8GXWlXV7qGoLyzzRLDGndVJ5mJ+uBXSKya3htVxggg5NONJplPTTvXJYmedWa2+zqNrb2AV8J4OBx/eVJvuANNtAwEasy9ser61raKosJ88+w6GnfxJqNkIXlldV8vYNkYNVZn1JJLpmicEc2c9qqll1GmJwQMT1fp9raioo3IIGcx76hrTSwgK5wR+tV7126gjnye/X4rPe63NFCVRcse+e9LafTtUnYSyrkncDO+KXV9WXUXbUGceY+o0o07BlUL/mEGnyedMPLBG+1WB0WO6wgfG4pHaFaSQMGcY989qcsGr20fL6wD7Va9Nxgk4k3UfVup2hQTjviNObTLY2xaR+vQVV3iSztLa/VgcDOTTubUnkiwrZB6VXPjiQtCuSSSTTDV+matwB45zKn01L6HsNlng8SUu9f0iG03kU+np3qtOocQy/iG8iVkGTjB96AtRmvixVTtWrpWl3t7dxwRKXkkYAfU1WW1hswAvxDHu+l8nC9zmHOl2eoazqMUEIaSRzgfGe5rp5wRw3PoujR2zStKV7t/Ln+UfFCfhrwRZaJZKSgadh/EkPU57D4qwl5PHBbn3xVy6fovRAd/wAxHb2E8m6prW1VoAGK0/L7n5Mm7GGFUyxH0oQ1xrfDE7j61WDWvFaa214aZY2BvZc8rMJhGocdV6Hp3NNf8TcXdrG8g5WKgugOQD8Haj11FTF8MTjg+wlepVmbhWA8HBwfsfMrfxHCDqkhODvkYGPSegpYXjKoZm69t+lObUrZpr28bPqaIomegOcilDZ6Nql8QRC5ycDCk5x9K8y1FS2Pa4XgucT1HQaW70KizYxx8gdxAxyzAYHTevUOmyTSZbr198D3NWG0zw9nZkM8qoOpUbtTTPDmh6bZHki9RHqZtyagp6exwW4EsqitcAHJ+OcfeVJ0/W7TQrDUL9rRTIvogMm7O5/oO9UX4m1ee5urm5uHLu7M7nP7Cre+LN7CLqys4V5eVC7f9T7dPgCqOcQ84jmdQ2IwANvc4ps+AErXgCO6UFVDOCSSCcmBy3EjziVVyzjYHoop68ORuGRjsuN2+vtSt4c01nJmnz5SjIUdWPt9KvVYeHL6jpFjPFdpbNNErAFSUUN0GRvQ9tBsBUDOIoShsGx84J/eTnC0c91OkVvGGYdSfYdz7VdHT7cx2EUEh5mVRv8ANL7gvw+g4fsJALk3M0pDPLjA26Ko7CmOzpbrlj6RUNHSVqDM/JYYPtiA23hiAg7TdgV4j8dQaPLGSMr8mljDqcL7Z61I3F6ba3ilRujbj7UmbT16diw5Ud5C4ewYIwY3lYcp715ZY26gfpQRYa1FcQhz6CT0zU2bpT+Ug59qYolVigjBBispYp7ESYWM/l7HpWBomhXLgjtvWG0ul83Ddt/pU9qOsWi2zRhQ7jfPtRlelrGCBgjtI2sftjIPeLK7nSS5xkYXbHQGhTWTHbhGMiqvVyTgbfWg/ifiaSwB8iNS2+5GQM+1VGvNfvNSvc3Fy8vLn8x2H2rmu/ZbsCktnJ9pYK9MTWthOFA4B8yzNxxvo8UihrwKmdgqkg475rAviBoE7gDUguM8obK1U/UrlGKqMYAxQ3DHC8oyN+3zT9dXYONonI2IdwXnE6OWuuxTwhWnSWNhs3Nn9KSWrWyRyM64CM+AM9KA+GblLWeHIJUdVztVoOHuFLfUrOW5nQmLzDyBt8kdTXNlDW2DaOcePJlk6d1qjR0vawOMjI88+0itJ4M0Wa3Tz08x3UEtnpn2oY1zwejZjJZs4yfy5GKe0EdnbzCKM8pHQf2poadNGy8rYO24psOjaWysB1KuB4M8n6l/UWtfUuVubk5w3M5QXSMZY5Y0LYYq46be/wCtRD30AchVOwHMpG4ztmi7zGTmMkByrANjuPesLW1uZWHIEZtg2OoxmvMZ6BmLrUtNt7+BkKqykEEEb/vVLuMuCpLJ2dEzE24I7fBq+fLcRStGyrK3UFTg4O37VHajp0FxG0bxhgwIKnvR2n1D1PweINfQlqEEc+JyCv7B4nyAevanXwbxkp5LDUH9hHKx2Psrf2NHPGXBT2UkjRKWhJz8pnsfiqs6nYNCxPQZxVzR6tTWBn7GUyyu3TWEgceR4Mu7cQG2kE0JypI5lz/SpNZ43jJYAluq/wD3VceCeOChjsdQkyPyxTN2/wCVj/Q1ZFrSNhmMdd/p/wBqV2o1bYb9D7xxVYli7l/Ue0yMXQLyEHPSsUUpZmDpgqev17VvGKMEgJ6sZU7VpQ+e0p541U9/mogeJNiFFpHbmPlZs4PMMnepW6kt0TEjhQ3fNCc9uwuFdXxhe56+4IqbjjjlAVwGBIBBPcVrjjmc4k/EsaNzgkgpy4B2wazwTgSAepgqnBI3IHb61o+Wqpyg4GMAdMVu26BoFEj5KvkMTuK1NYm8szSJkEqWXmAIwSO4xU2gdyrK+Cg6dAc1rhYsjJHOAcVtEHP5uUDbGPfoQa4zN4mwys6nflbv3+v1FeSrF2xgAjr7VgzIoDgBypIORg4r7a+f5rDqnLsSQTnPT61uaxNyVSFLDmY5323+teoQzLysxOQM49q2Gj5o2w4J7dsfFeIoh5YPNgdPmszxNYm4VkSJBnJHpDH9s1hjiYowZSdjnvnPvWaJeY8odjy5zn53/aswilUD1Z+nt81qZiQC2ZXzANkIwF9vvX0GSMBTvjfPtUyVfmZy23es5t2cbn6bdBWZ95vE8QxCQKwYr8/I7VJRq5X1Yz3NRMq+WSQx3H5R/Wvsd4xlEfJkMD6h2x2NczqZdT02G7tyG2YD0tjcHpRFwDxjd6ddpZXZIUApzE7MQdsZoMkN1DAysxds5U57fWtS5jinsGPWRdww65qWtypHMisRXUgidFIp45445I/Ujd/b61hurS3ubaSGVA6OpDA+xqn3hz4kRhhp95KFmUELzH8wX+4q5EUscsSujcysMiniOHXkc+ZXLK2rf48GVhudEm4cvX5TzWknKFJ6oRsB9KJo3DoCBsQP3p3XVrb3Vu0cqBkcYIIqu+p2N/o18oyZLRhhWP8AL8GlF9JU5HaOtPqBYMH8395KNnJIP/nxXhMg/evEcqvjBGD0rMQM7dOmaCh8mIZ+XG9EEUxx1FA6bCpSGXPU10GIkbIDDQS7CvxIIOahI5ScVII52OaID5gpTE8vH6TQDqMAYk0xiwIwaDNQG7V3nmYO0Qet24VQQOh3qnXi7YvLo9pcqMm3mKsfZZBjp9RVquPbyex0m7njOGVML9ScA/auY+pteTu5nkdi7ZJLE5+tOqSSg5iHV3CtwNpJMVkgVjnkOfevUUjr9u9ThsZyWI2UHdiNhWUQwAlI0ErDuR3+BRmBF4ufPYRx+HGjnWNRuXEqW8lrbmWOZjjkkBHl/v1+KtVNqsWscM3clxavFJFHIJOUcwiniGSCR+XB6Z6g0N8L+F+oQcOW9wt4LbUpAsmGTKqOoQ43FCV1qPEukalqj6lDk3Fq0d3GgH8ReUqk64wGxnBI+9CsuT9u0tFI/wBIe/kSrmvxslza3PLgSqGznIJPWn9wpoD6m0d886/w1RAjLz7p0ODtgdRnvSStnjvdLnhk5i0A5gMElfT/AL0dcJy6ndWjWsDuryLzKucCRQDtt1PsO9EtuNRwcEeYNVhdQR4aNW+0ia4u2C3sRQH1zEqgz7bY+9CWuHRtMUyLqBkk2HlR4YN9znA+aJoPD7XdQH8eaODCgiMv6sfIGcVE33hhq0Z9NsZf+ZH5sj6HFKt+W5t/SPdg2/SozjvB7QtWsNV863a0RZAn/Db1h0+/70UWmiWdrOZLaJYjj8q4A+x61J8I+GV5ZazbX10TEkZYiPPqJIxhsdBVgF4d017pVuGlSInd48ZA+hBFcO4FmK7CARzzMUjYPVQMV8gRHwcOx3kihreNjzdSoP71erg3/DVxTqsEE00a2luyAo8zYPKenKgycUyODfDfgqBre9Rp7tlwyea4KA9iVUAHHzV9uF+JOQraXL+knEUh7f8AKf7U80i+mCWVbG8bskD9Io1XUin/AOlQPdiOREVw5/hl4SseRr67mu2HVEAiT9dzVoNG4H4R0dQLLRrWIgY5/LDt92bJpgV+o59VqGGN5A/7V+kfsJXLdTqLfz2s33PE+YwAOgHSv1fa+UHBJ9r5X6v1ZMn6v1fsV9rJk+V9r9X6smT5WCSJXUgitivlZNEZiI4w4HstVtmygWQD0OBuPj5HxXOfi3hK806SZJYPSDsw3UjsQfauwF0nNEwqqvGmlyNFKDFzqQe2ag1NCWVl+zjz7/eF6C62jUhVb6G7qe3/ALnE7ibSZWnJCn096VkjNE2Nxiug/Emg2riTlQA4xiqc65o4jnYle9DaTUAja3BEuV9RByPMBImJAqxXA3Hk+lTJDMcxnoT2+KrY7GMkYqQgkDHOaauqsuDBa7GRwVOCJ1W0i707X1eRwnJHgkDvmjC70bS/w5EMaIeoI/vXOjhDjG70efBBkhccrpnfHYg+4q0I44sbi1/htLnH5Tt+9J7TVVWxcZPviPF1L2WZXIbH6Q3/AM5uNofId3i2YAZOBTVi1SN7TkM4jIABVhuDjpUX4babJqGlTzyIcvcEcx6kAA5/emvqHAemTqWeNskb4YijtLpmu01bsSdw4A4xKXZ1X0tY+0EKrFTt9wceZy78WHjnvYolYHkZix980A6LprwoWQkZA2Bq6vHXg9Z3kDPazSJIM8oJyM+1Vf0vSdT0u5e3uF/L0z8Uk1OntpUqQcZlt0epp1aGwIwIPJIil4p/EGJg56VWWZpxcYGcCr5cW6XHNZGQLviqV6jblJ2wehNRadwVxN6msgiE+huySIxOcEfsa6V8ES6LdWAkDKSg6HsfY1y90mduZR03xTw0y61qC5g/y6VhLNheXsc+/wAUYVyQcDg9pAlvpgnGRjn7TqHwxranWLp1k/gxxheT/mb/AGqxdpe3c6FY/wAp96od4ecIa/HOJru/TM/qeNFJ6bdTV9dJhjt4lUPkj3qzUq/pFShXPeef6q2t9XY6KQpIxxjsMQE1/hKbUIiJZQsYPNyIOvyaWw4c0+0blcOSB/qwKtLcTKUIOAcVX/iZfLZSA59iv/eqj1LpenBDFSwJ5zzLd0/qdgATcR7Y7yJk4eh5VkhXJBzgnP6VKx6eijLLuepPvQxZTXxiKxSMD2DD/avd3c67CAJYeaMkAyIc4+o7Uvpp0NOfSTb78S96XVs6/VaCR/3cGaesukIJQAHFKFrq5efAcjeje7jvZw55cj52FL8GSC6AkXFT+rk4l86cyFCMgkCPvSWc2qAnfFLLjGKTKnGdmxtTa0UwtZq2etfOLtIjfRWlTBbIIx1po/16bHxKBrzjUOvbJODKK3MC53G9PHgHSorbULe4kAyT/XalvbafPcamFCE4Ow+asXo+lTQ3Vq7YxGwZh9OlVrTlVuBI7Rc9YOmsLdtpH8S4umxhY1Oe1BXFerx2dpMzNykKce4r3DqvKuFORjp9art4oXk8mmylSRggnHftVxv1ripiDzjEqidNQlQcYYjmLjw3sEveJNQvW38vIXP/AD96uvFCvlkFQdqpF4WXEkF7I2CUcYb7d6uBLrNtFHjnO/bFddPupTSMG7knPzCNT0271QK6yVIAXA7ADGJsWmjW1zqUYZAVBBIqyMej2kVnyKigAdAMD9qrfpl8j3SyRycykbkbkU5hr8KwcpY9PesOnV2yijGIHd6tRRSxBGMiBl7aRwyMc4BOwoRvLQSHmwXHTHtU5qmoR3KnlPKy7g1DaVfKzlWI5gcEVI+kT0sNwZPXrbCeCRg8icnfEO/ln4v1Mv1SVo0B7BTgCkbq9sHs5Qp/NIqZx0zjJpj8btO3FWqs5wfxMpI+c0LlC9qkfc7/AHY/7VS2+m0gf7TxPYCg9JR4KgTZ0nSjc3MVpECFYpGvwvUn9K6KW13Da6fbwIo5YY0Rf/xGKr74ZaBKTcX80Q5COWBj1yPzEf0qwkunl1Jxt1ppRWyqTnkyNhUwCt47TMOMdQswUi5GQD8rb4J9iKDNR4tubk80ku25AGwpVcR64LS7mjCknO3tSwlvdVmwot5RzjYchyfpmtneykM8S3Lp63bCru9wI2342uIZgA+QDThj4oF3oiSc/wDNvntgVVvQdGn1C/VZWVFXPODs2R/Lv3pmcQ2l1p2lLHFbvzMJGxjHpXA7/WqrZpibGAPfgiB5YIS2MePf9JaTTbpZNCt5Q2crzAj61KaZcIAHLMfjNKjR9ZsIOBbSTrOsQDKx3B6kEUorXj+4XVI4XdUikblB/wBJPSoDpF9ZctjAAkKMLFIHvjmW6vuILW3k5pJyhGMAHFRF7riR3LjzQ0jRmQxjqFAzkj4pLXUc13cpG0p5ncAZ+tB3Fut3EpM1qOVp3P8AEUbiGM4Uf/kRk0zpS2snnIBHPvO304V1GM5Bz7SU4818NZReW4CTZ377e1V10y6BMu+TUzr2p6PNp8KrEzXPLhnLEiPvhR0oD0RJBcyEBjtRmBvLYwZtnHphQMD2hy6eawJPf96ntN095LpERSz7Dbc79q0rE6ZHMhvpTHGu/lqMs5z0+M+9GsnGywc6abp6QDORIw53/wBhUb2sDx3kIrLcY4jx0fh26iRWkjCdOvtTQj4rl0mOGGR42gT08oPY77D3+aqxaQcca1AJJS6Qjcyyt5UYHvvit+0/yaxnVLiQ38xICojGOLmP+pjuR74rrT6u6uwFTn4mm0FdikNz8CWFt/GbwzkuXhubp7SZGIYSIeo+RR/b+Jnh4YfMHEFqF7EnB/Sqq6L4JaJrGsz6jr2srCs8hcWtnGQig9FDt0AHxV/+FfDDw60a2U6bo1qSR/xnXzZG+rPmvX6runNpkdqblcgcBgR+5E826poemU24V7mb2xgD4ye85qxT4kMUoKE7Kx7+1e5QkU0YBwcHY+xou1PTvP2VhgHIGN8e1L64nNvcrBOASw/hSEdM9ia8HKYzxPS1YHzPEdvFJdSSAMGGxH9xUJcSESBWUtl+UFe2ehIohdv4i5DB1wrBTkYPcj2r66wRS8vKewDdcZPSopNF1f2VrdQuOVXz6G79O1U4404Ha0LyRoXgY/8A7P8A2q/skCCNmjQc25PbJoGuY4LtZInjKtygtGw7GjNPqHqbI7eYNfQlqEETkjqOm+VIwAx8U3eCeOZLZo7K+k9GwilY9O3K3x800OMeCZLfmmjizGc5x/L/ANqqtqOmPCzEA4FXOu2rUVYP/qU22q7TW5X9vcS/vMJEDrj6jr9q0xcJHJyPzAsTvyk5x/Sqv8G8bNaPHZ3sh8npHIf5fhvj29qtTGBIQ4cEYzilVtTVtg/ofeOabUtTKn7j2m2FDQjDA9sitkRczKQd0xsN6140UpshX4PatCGyuLe4mkWWSQMAQpI2PsKhHnmTkH2hmkwCMGkzjOCetYZGtp8RApzPjIOxYe+K1Yg/P6pNiN1I+O1ZZYS5hfmAaPbPQH/asHfvOMQitouWNVL5ZVIDdTj2zUpZpLH6C7ODvznrvUfBKGUDo3v7/Wte7lVDB/EEeJPfAJ9q13mocs0YABPXvWrByAsoIBO69gc1gSUcrnY47HrXuEMzjnhACrsRvuetczJJoyqvMmW5Qc4PWthXSWPIUjqSK0AqqVYk9Pv96zNblnWRJGG+So3BrJk2kZZ4BhmDY2YDBGDXhbiYuqlN0OG3wfg/StvGD+XFYpF5iANtvzAe3Y1kySGFOTzLj/zY1iAZcYPKAehPvWhEcZBh3LYPsfmt4MzcqhcfHatTJrLaD8Rz85ILDIzsPtWaa3jVmYHHvW55SiQNggmspVWz2zsa1mZIIkBMcx+PfNYrWSJ+eCQ8vOCAQMYrZW35Zzk5HvX24tEmhYwkRS7gMBmt8TINycC2P4d/LlZXVhJFKp9aP7j4+Kdvh/xpf23l6ZqZHmIvKj9FlA7j2NBtlJcDlDEkY61hvba2u/LY+mVDlWHUfNSpa6nvInqV1IIl6YZop4VliYMjdxWG6tIbmBopEDKwwRVbuBuLkhuZLC5JVgcqW6SD3HzVm1YMAQcqelOUdbF/uJXrK3qs7/Yyt+p6ZPpFxurSRMcRuf5M/wAtb6Nzqvuad1/YW97bvDNHzI3X+opD39ncaPPyPzPEzfw3+vY0qupKHI7R3p9QLBg/mm8N1r8MjfOxrJEV5c9q/E436igofJKGUAAZqWVh0zvQuHOR8VIJLsM1gOJwwzJ0y43JxQtfS5G+K3JJQRsxoH1S7wp361MjZYSBlwIjPFEq/C17yjfMefgcwqitnpF5qjpDa25lZTg9lX5Y9hV+tbtv8wsLu2Y/8aJl36ZI2P2NC3BfDY0vQYI3j5Z5P4k3TPOe32p5U4RPc5iW3T+pcGPYCK/SvCTTpEDajcSSsR+SL0qvxnrtUxpPhFo1lrMdyJjJbxMGWF13JHQMe4FWBji5dh+9ZRzBiMH4qUOT5nRpQYGwcSWA22pWeIekQXnC2oyEqk1vbyyQyHblZV3GfZhsR3puxMhAAFCHHNvdvwjrP4aMtMbKXkUDmJOOw98VgP1D7ycZxmc5eB9I/Hadrd6gOLe3iLrg4ZXbBG/t1qH0qQ6berJlkCyHyyDgjB6j6GmR4C3ltdaxqtldSOWubMxxE5IOTuPjbpS51qzez1a4hlU552Gx7qcGjFJFrr9jBW5rrcfMtN4f6fqc+rXV5/E8kjMjuecyOw6An271Y8wkHpUB4dxRNwracuDhmz9aZptgTuKrupcm5uO3H7SxULipfkZgY1uWB261peUR/DcZGNjRlJalSB2rXNrzjJxnPWhMwnE3+F9fn0a78p2Jt3PTPT6Vc+wvYbiBHRuZWAIP1qi0toGXlZaYvCHEVxp0wt5iTET79qb6bVYwrH7GJNXo85dB9xOkvC/EnPyWly/q6RSH+Yf6T803qpdbzJLGHRshsEEGrCcL8RfikW2uG/jKPSx/nA/vT/8AMM+ZUXTafj+0Ztfq+18riRT5X6vtfsVkyfq/V+r9WTJ+r9Xyv1ZMn3NfDX2vlZMnkjNQV5pkNwhDDr3ogr5XQJE5IBlWOJfDWxvOdwnKxzuBVE+OvDK5tCXVSQ2e221djWjUjcUE63oFpfW0kckYYMDkHvQ76epx9I2N4I7QmvWaukg7y6j/AGsfE/nD4g4ent2bKH/al9GDEd/euqXiH4cvaSt6S6OSUYjf6N8j96568TaC9pIxCEZJqCq9wxrfhhLLXZXdULa+3keQfaCtvNkjH3piaZqTJNEGOV5hn70kYZ3SUjOaJUuyx696KetWGCMyRLWU5Bnc/g25tLfTLdIyOUIvTvt1ppm5Eifl2xXIXgHxTu9KiSzu8ywr/wANwfUo9j7iusPDmrWGoaZa3EbhlljVgc56imWnZdi1rkED+0pWpUq53qQzEn4PyJgbTzKxDAYO4BFVn444MkWc3MIXAyWXv9quSxhXbmGSfSaWPE9tJJazcoy3Kce2e1ZqKEtrYEncsJ03UNRpslT9J/MPcTnnrWmGSxmXfpXPfiS2a2u5Bjua6QtdtKbiKQcrqSrL7GqPeIloIrpm9yao4ATUlR2M9HLrZp1ccggEH7xJ2EvJMD71ZLhnUIra5tp33VNj8A96q1bM3ONqeWgMXj5Sc5HtTQHBi3AZSD2IInSTh/j3Q7aOGSa7jQRg75yCp+lOSw440LU3/wDYairsTvGVZW3+DiuPGp6bdhuaIHrtj+1PPw2TirS9Tgu59JupLRhymRYy3Jn+b6UwGtuLABlPgiVLWaUUne16qvsy9/sczqPBJqlx5jSKuznkw35l9z81Jy2ZmtHVl3xtUPoeu2s1vGVYMD3FHFy0TYVG3GBt81JqW9PTnJ3AxnodOrMgR9w7hovtNtFhuOVjgHoT03renkaKYq64xnIxWxPFJDnnGRigK4vZElIySOwz0quYQjIl9p0T2OcEHiS8ll5ivgAb5FJPX7MozArvT90+5WWPHeseoaJFdcrMKkbT/SGWWLQ6k6W3DjgSvGjatcW0bRODyZ61YHQManZgM5Yb7fSo9eErZIiHQFeoNE2iW0GnnY8qZ+29cK7IRv4Ud4H1vV0XoWqTnPjzIy14X022vXdY1U53OO9St9pziMSQgc+f1ognz5ylCTnOPav0CvI7E5OOn1rV9dTJhQFyeCJTENigHORjkHnM+aZphkQF8qx6r1FLTxK0CU6TdGMZPLnHwKsXYRjy1OPbNDPFcaGF87+mmw0ivpXG8ltuc/aJRqbl1Ckfl74lMvDaBeQjG4z/AFp26qORQCNzSw4SiEGsXESgfnPLTl1i3LSgZGcCl1LBdKM+89MochqfZlyIK6ZK8E/Op2PWnNZv+JXlJ+9JiOOSKUKw2PQ1YDSNPC2yDG5UGmugsZmwp48xJ/UfppWth/OeAftBLUbd0Rjgj6UpEa9j1TzOc8o7e9PzV444IyAcnvvVa9X4itbW8MQIJA3A7H2o/XYXazHHMrXR9O2ptIVd2Rk/aUP8RrcrxlqKgg807N74DeqhvSLQyXiGRfQTkn/z4ppXdhHq/E93dyjEJlZj/wAxH8oNbV3pytcDy1CJ7LgCqGxXeW8E8T1xDhFBGcAZ+cRuaXr0USQ28UapGgCqB0Ap0Wdz58QSNC7sPSBVW9P0xg4Ic7VbbgB7eMSq2DJzDJPXl+KdaZmd1XOAeMwHqmoRNG11dRJUjAPbnzBHTPCeO/12O81F2ZAefyl2GR0z70y9b4SsUtWaCPkZcsASSP36GrLwWcbRK8fYUtuKFljtZCqZ96l6ho0rQtyfmeb9P6lqNRq8M31M36TnZxRxhpOlXCW13Z/xGHNzjG+SR6vnNIrW9XvdPgGofjZfwzSKqQOSyvz9Vwe2OtWs4i4L0biDUIJLtG/hH86bZ+GHcVX3jCx0S+4I1aNpgH0uVTGU3yQeXk/Sk1CEquR34z7y26/1EDjsO4HtAGXjZorl7cFgnljk5upjI51+uM4zS+m1om6RubYv2oK4gsL6C10q8YMRyiLmPdSOZT9MVtaXpt1qVzFbxJzZPqbso9ya09S/SfeVprbAwx3IBnQ6PW4rrQrd435LidUgjYdmfYt9lyaltVtbMSQ2tnF585hGEOywxKMCSU9hjoOpNV70iaZdQWztSJZLNGVXkP8ADiP88rn2UDlUdzmmZp15EsYhXz5EuCXZV/8A5m/bpzsduSL5OBjpTRFr2gMuTjMt6ahXUFeGIxg9+0TUWkTySyTTcwTm2wOv3ov07TNVu38qzs5AhOOdI2OPklQas1acHxa0YP8ANhGLeIgxWEBKwrj/AFtsXP6CrT8K2EVmrQQqIoQByIg5VGPYCsXSCxh9eB5xFWpsOnqZtm5h4PHeUEj8PeI4wuI/NU4JJjfb6hlFOWz4XvY7dEg4TFxIg9UjIUyR3wB/eugttMQAGqWvr5IdPnkY+lV3++1Mz0nTFe7E++ZUv/5FeLAp0y98cMZyv4kGsrGpvIxahm5UgTqcd+p2oJ03Tbe2u/PMjyyED8zZC/SnX4g+VfahLdxyD8OjGKM+5XckfGaVuk2jTyiU5Ea9Ce/0pMmlVXI9jPcdHVpRparsclcnnsT4lm+G9Zu7eAeSsKs2MuyBm2+vT7U57LjDXITmUpMnty4P7VX/AEiaAoqIpyPemuNKvchYz5v8NXbk3xzdqsiarYFXAI+RPNOpaPSWahy9Sgsc5Pf95XEhGiBkyMjHMdjvUHf6RFJbKMc2MYJ6g+9Fl5aLPEUYbEYIrBFGViEbkEgAE9M/NeeFZGr+RFKI4o5lWTKuuVD98DfGa0o0iW6P8NgJN8nsw26UwdQsVlWQAAtsRmgO4jhGIpiQC3ok3BUjtkdKCZMGHo2RPF3AYWaTzDjk3XqPfIofngNwkfMQMrswODn237GjW7tpJbdVWUc6nIP07H4oJe2e+hkiu4vKeJm5WBwf+oEVGBJoPTaeGjkR0ByTkHfIqmnFvBV3bzXM0cYMHNlQNyoPvV8XjkVUjZwSFHq7kDbNC15FGFjEyjMhKbb9f7Gi6L3qbI8+IPdSli4P7zkrqWlyRMWUbZplcG8bPYvHZ3rEwdI5D1j+D/y/0p4ca8FNbs9xBFmJvzKOqn/aqm6npjLkqKuNVtWoqwf/AFKdbTbprdy/+xL8QzRSqpDZHUEHqD/at6KUo4Uj33qmnBfGsunullesTBnCOeseff8A5f6VcaB4biNHVgcgEEbgj4+KVXVNU2D28H3jmi5LUyO/ke0kxOjOq5IbAI22/Wvkk7YPI3RsNtnb6VjTOCGxnbb6e1bGVxhl2Yb5H7Gh8yfElLUcoy5HOQMkdDj4qQWNXy3LzYIyDvj5FQFvFEAjBQCuwAOw+lTUb4PzjYn2+a3OMSWGck79Bv0IxUtFIMAlQGO5A96iA2Bnv7Gs8bNzHBBHUDHasmYk45crzR9e/wA1nhjwD1339qiIm/jOyk9gQTtUhG1wJWDABduU9/vWprEk4nDBMhgxXYGvhU5I2G+DWvayzlWEsarhsLg5yPepBEQhlC/O+9anMwxhTMMkgqDj2NbVvcwl3VWyy/y1qgo00nllGZRg4NbyowdWCqOvNt/Ssm5sHPqyOoxt2rU8uRtw+/et8Kx5icZz29q15CpB3xy9cVqbxPEUXXB6e/esDQADOdqzPA8iLyOUOx2P7VmK55dicY6/FZMxNbmRxg5I6Gs7W5UqRuB0I7ZrKqxhcDbvWxCfWfntWpuRVxpqywowysinKsDgg04+EeMHicWl6fUAMN2Yf70BBc7g9qiLmASjOOVlwVI7H3qVLGU5EisrV1IIl20dXQMjcykbYrQu7WC5gaORQykHtVeeEOLpYblbK7bDnYE/zY9vmrIq8ToHRgynoRTlXWxf7iV6yt6n/sYhrqyudNlCOeaIn0Se3sDWXKsBv2pz31nBdQNFIMqwIpFX1rPpM3LKS0TEBJD2+DSi6koeO0d6e4WDBP1Tezvg18yVBHTfNfIgJBsc9xWKUhDv0zQkOxNeWYop36Uv76bnc/HSjC8BwcGgC4GM7d62p5mECQL5LjJqTt3HLj4qMAyxHWt2ONlI/Sj1sEGauTUUZOD71+uUCHcVmtyOYb1OXVuGgPppgrjiBsp5gzbOfMwBt70UTsv4C4ZmxyxOST2wKhbW3IOCPoam7iyt7izuIJwPJmjZJN8elhg79tqxyDMRSPE5o+CXkR8awMpVQxkRiT1LKcfvRR4kaNeNxxqltFDzIzRyh8D0eaA3XsM0H8KS6fonFVzamfntIL0nmU7lInwDkfFWu8YfNtJ7W/hZhHdw+Wzp7x+pc/BBou5sXBhzkcQehc1FSexOZPeE5P8Ak1xaM+XglyQB0zt1+1WOW3XA+lUb8E+I5Z9clgmbHnKyrnuU3GDXQRYvilmqrPqk+/MY6ewGpfiCslr1/wDNqjWt/SQB360dtbDfArReAggYpawxD1YGAz269OXbFRUlsysR7dKOJIsEk7itVoVZNx32qPMlhRwtxO1vKttOTy9jVkIps8kkb4wQVYHGKpTcW5ViQCMd6bPCfExQrbXBPsDTzSarBCsfsZXtbowQXUfcToPw3xEl/H5MxAuEG/8Azgdx/emDVOYJnR0mikIZSCrA1ZLh7X4tSg5WIWdB619/kVYOCMiVF0Kn4hpX6vtfq5nE818r1XysmT5X6vtfKyZPu9fK+1+rJk+V9r5X2smT9XwjIr7X6smRX8WaJa31hMkq5BHXuD2I+RXKDj3h+NZp4m5eZWI2/wDO9dn7u3WaNlPQiqvcUeEml6lPPcJzxzSHJYElcj3U/wBqH1FJtVCuN6/yJJpdSdLqC2wtWwwwH95wq1bhyaB3ZRlc+29A5fySQRXWviHwmjS3ZGUiRQfofp8Vzs4y4TnsbqReRhgntQlGqJfZYNrD3ltxXYgeo5U8xaW+oKCAPferXeHXivfaBH+FmzNaMeYLn1Rk9SvwfaqQGN43OT0om0+Waa4hhjBaSR1RAO7McCnA+/6xbdTXcmHHY5BHcH4nbXQfEPTtWWJoLhXzynGd6dupyLNakouRjt3rkcnA3iHw1qlqLaA3bSxeYVgJKgDqCTjcVcTQPEZL6xSOQmG6jTknt5fRIjDbODjr71PQ7C05YcjuYBq6lrFalcHkZPmK7jC18riCRo1/P6n+CaqL4iabK6c3LkY61fnW5rG+lMgdTKF9XL3qrnGtujWbj821VLWVvXfux5zLX05kOiVPYTn1HEVcg+9MzQmKEH3NDs1kxnYLtvRbZ2FzGFxvRCk5E3kS6vhlplhqOrxi4CtHGhflIzzEbCujCG1jtlSKJVVVAVVGABXKLgK/ubS+UqxUjb9avJpuvXZaPMgANMtLYlO8+mCT5hNvSG1iJcpXCrtKn4kdxfw1q07/AIrTJHt7gHJZdg/ww71CaNxjqOmXMEOscscmQpfOA3zvVio9TMsIAffG5oO1bwz03XsvfwmfmGOUkgD9O9A64LZ9WcfCyDR6VNJkVooYnn2/WEDcRWNwuGdSpGxyKhjpq3EimJwwY7fFRh8FEituSzup7bA9A5jIB9mzQdFpPHvC92jPGb63U5JjU8wH0pdQlhPKn74jw9V01AJLitsd+6/vLAW/DnkoME5AzWVoJ2TkzgDbpUZovHenXgVSxV+6nYg/ING0uoaesbPzDrtv0pncakryHwAOZXrOp3Mwbduz5HOYFTz3FvHggMB+lAK3l3qFwSSFiQ7dgTTJ1FJbyFvJZdx70K2WiXREcbDlC5JPvmqhfedSyoisR747xjpbURi9pC+2fEn7aWUKoQ5HcdcUb2tuvKGckZ3I6V5sdI5cAEk7ddqYC6YrRoKYaXTXBwGB+041esoI+kj7wShu4YTgNj69DSl4516O1sZHILHB5QDnNPbUNKVYjkdPvVZOLn03leC4b1kenHamuqs1NNJ2nvxF+nXSX2gFiP1ij4KuUuNR/EO3JzMPsT0zVgLyLmmIbOelV0srA2RVo3DxsNyPanqmqxvHAZRn0hef2x71Whew+lsgGem1aRzXU6cgLt4OcYhTp+jNdsoP5Qc0/Le1EUBYEHC9R8UCcMtHJBkNtimS8qpFgHIIq+9NqUKGHc4nkv8AUWpue70z2U9pU7j7WJLOOQID5j5CiqZtaXUryuWJd87n3q7/AB9p6TwCcD/hncfBqv2n6alzOBj09Tj2oDqFmLn3nt2HxPTf6Wt0NXSGfA3nIc+ePAi2GjubaNVAUKOg+eufk1oC0dUK46U77m0it3CjYODtS9vo0UtyjFJlRHUHEsVRqvwQuBjAkbp8TMGxRfZTXlvKro5Vl6EVA8O88s8i4zg4pkXFqiD+tEKuF48Tm4V1k1FQQRjB5lt+DNce90qN2GG3V8HbIqb1u2EsJUdCNx7iqucK6/JY+ahjcR82efB5d6c6cUWt0CEkU4XfcZpq2oqbTBWYE9sZ5nkh0VdXU2CDBD8Y9jyInNV0n8IruOhJ/wDqqZ+JR0/S9IF7NYxlZLoC59ODInKRuR3Ga6Hai0M8TKSMEVSXx80+BuCOuMSE5H/T/WgKQhsrXxmXTU7zpbc8keYvNc0WwvdD4cRUWe3RbUkHo684jAP6161jTrSyitLO0t4YLiQSNkAKscY6yyY25U7fO1CescQ2+ieH3CV3GHneSOzklg6AxxYYkN2yyjNL3QdQ1bjK/u764t78aYz81/cW8JZWCHKwq2wVF/79aI9EAljwFLDmAB6Xq27VLHGfjENNLs5L+4lttMcrYJIPNuZF/wCKyjuP5j7L096v3wNwppKWbARc7vgyyueaSQ+7N/QdB2pNW9k/JBDYWNnaW6xqYhLNzsEO4PJF7/J+tPvhLSNVlV+biEouMcltBGoP/wCTcxoUncwBIA9veE2DT16bcjYcnJY/2GITXmnrpsmUBZdzgb4qWtNfs7e3RncITueZguPrmgrijhK28kzT3+oXBQElZLlgpx7hOUUHcEaPwzqdvcTf5Pa4jbCtjzObPfLZoZ9StdwrGee3EVPfVYg3sG8ds5/tH43iXwnbjln1a2BXsj85/Rc70p+J/G7TLm1n07TrS5eSbCLO8ZVB84O9N7SdGsUJEVpFEv8AyIF/pTTPD9hc2PkzW8bek4PIM7/PWntN1zIVGc47kyuainQ1Wq5RjznvObSzy6hFBZ+auI33THqLn3+tWIt/CvitNPWUwR5PRPMXmAxnO21POHg3hLToWmk0vzHuVRZHAHOCNxg9vtTls7Wx/BwwWqtHCBsASevbJ3B+tLlWwEg95aH/AKgtSmr0kG0McllyD+xHM586no+saA0D3cXokJ5WjPMMjsfkU7OAL/8AFtOyzIIyoBBPrJ67D2o6424Tv7mxVBOTEpYk9eXPv/vVcTw8+nQq0V1uNsrkGiaG+rDrn7xs+o03UOn/AP7ES4nAIGR39veY2iGcHvUHeWzcwdACQCMntRPC6zRggg9607gctV1lBEpysQYvcu0hJi9Q9LE9Nq93GmwyxyZA9X3zU82QJAqjm3wD3qPi50JypCnblPUH4oQr7w4MfEUD2j298FZyFB9J/tXyW7hcyxSMqOHCjPQ57b+9MzUrKCeFgyjYbGlXdKLWdUeMMpH5jvjHvQbIQYej7h8zSmmhwsa+WJYxgDP5c9PtWh+FaXyzJEwOCemw+D80SXNlbO0V1GSXiBGT7HtXi+eUwrJHjbBPbI+tRSYGLzVLHzB5bbhkOQf/ADtVUeMuBmi5rq1BMeMyR46fIq79zHbHEhxzsu2D2/70LTQK6ch6nb9KIpvetgR+okNtKWKQR9pyT1PTSrMyjb4o64L40l0uVLa7djbE4VjuYz//AM/FWP4y4FVTLc2sQ5ScugHv1Iqn2qaSY2ZlU9d6uFN1Wor2n/yJULqLtNbuX/wZfyGeG6iV0dTkAqQdj7Gt5CWyQcnuP9qo5wdxrPpE4tbly1qWwD1MZPt8fFXWtLiC4RJI2DBlBDA5BB6Gld1L1Ng9vBjei9LlyOCO49pvRIUUhM4Jz9M+1bzNORDysoAbDBhzEj/etQMvLk5+1Z0cAFSfr2ofJhOITIw5h2GMb1tq+2aH4nVgMNkHNZpJ1gjBbPKWwT1x/wBq2JxiEPMeUNnmU4yMVLpcKwPUAbdKgYcBM8wOemOmDUsvLgYG1anM3zMqjJGABk1khuC1woAHKBnPMO/xUXzK0gVsr2zgYbPatlbaBZjOkGJAMc3St8TU2prduci3KRu2Gdx1J+RU2jTCMBipfl37AmtOB2ZAzRhWxlgDn962WOCTgnP7VrMye4JGVVBjxnrg53rdVlJOwBIwRWg8hiAJ5sEjpWaTJXmySO229am5nkGVHLgMP0rwju0gHNg46dq/WswkjDMvL2Oak1jXlGMEe9bmT4wIj7dfatYxkMT7dqktmByOgrXAXfua1Mmor+shSflTW1HzMxJyO1axSRgDgDB61KQA7huvY1kyDupacZl5w2HU8yMNip+DTO4F40UsbC89Mq9zsH+R80MiOPGG+fvQBqVopkVwpWVTlHXrkVLXYVMisrV1wZe5JQQuxwzEKRv8g1o31hb3du8UsYZWGNxmkLwTxpK/LZ35CzKMDOwce4qyAIZAVOQe/wBabhlsWIXR6nH8GVulgu9JvWinYtGzfwnxgYHYn3qUfDjPuKbmq6Xb31s8U0YZWHftSFkiudJultrglkfPlyY2PsD80muqKn4jyi4WD5nu4OQRnpQncQk5OKKpvUdj1rQKAgjbNCg4huItbmCSKRXGcHrU9agSxn3HaiCW0V0IIoda2ngYb9Dsw7/BrAxBnRAIm4A6uMUYRHntjnrihqNlYfNSsblUAz3o6qzmDunE21iA/Wkx4vWnE1zwwkOnI7QSMVvRGvNIY9sAAb8p74p6REMo+tGMEJ5QR/8AVHq+1lPeBMuVIM5X2Xg1xfcWwlFm8LtGGQk8vMDuM5/KfcGo1pOLJryG01e9nkWBGhSGRifKIGBse+1dbzbnrjrQdrPC2lavDKs9tH5zIRHPygOhHQhuu1Ete5BBwc/xBVqrBBGRj57zlHwjOujcVwyksrJMhUlvT2Pb3/pXZO0KyxI46MoYf/lvXHHja3l0e/XzU5JlmYyrjfKtjGfbPSupnhrq66pwlp8vPlkQRtvnYdD+lTXDfUjfpI0OxmX2MaZi2G3StF4Qe2KI1QHfH6VryRYNKnr4hSW8wMmtxg7VCtER06e9HckPxUPNBscCgWUxmlgMFJIg43obubZlYMmVZd1IoxdCHzitSdMjpUQJEmh7wrxTzctvcHBG2/8AX6U97a4mgnSaF+VlwVIqj9zFPGwdDyutPPhLigTxLBOQHG1WHSarsrH7GVvW6MDLKOPInQTQtbg1K2DDCyr/AMRPY+4+KKqqNZXtxZ3CTQthlP2I9jVmtI1a31G1WSPZh+dT1U084IyJVWUqZP18r7X6uZzPgr5X2v1ZMnyv1fq+1kyfK+1+odl1qwjujA0mHAz8Vk1mEdfqgbfV7SeYxq24/ep0sFUknAFbxNz7XgqCK8xSxyoHRwynoQc1mrU1wYFazosF7AysN8HBHUH4rm34ncG3MMriWDmDbJIBs3fB9m+P0rqxgEUGa7w/Y6naSwzwq6OuCCOv/eh79OlwGeGH5W/5klV9+nffXyP9yHsRP5t+KOGpIHkZEwOv0qG8MtMmvPEPQ7cLstysj57LH6jXT7xE8LbiwaWRI2ltz0bqUz2f+zfrVbPDjh6DTvEOKZ05T5EoXPuaArutrb0rBg+D7y46dqNXteo4ww3Ke4nSaIJzKSO1KTxF4U03VNIuZVt1/GRoWgkQYkBHYEb4PtTQWRWiVga0JeSRsMwwBTtRkHiE3AZG7se47zlLp/Ft3byCGYlSjFWHQ5HvRHq+o/irCQAczEGmz4zcE6adMk1WxtFiuI5M3DJt5it3IpKcFol7ZBX3K7EUo1w2oD3wZlKkWis+RkSsM0ksd4eZSN+9GtvqkQQAjfantfeHN/rGorFZwDmY+tzsqDuSaZus/wCH2wXRA1heyi+RMnnOY5WA3GP5fihaDZau4LgCFPpAp/NmV60HUlXUIcNsTV+9HhWW1jb3Arl/ZR3FnemOUFJInKsp6gjrXSzw/vGvbK3QHcgdfai1JyBGnT7tldyk8Y3ft3lk+F+HpbiNpHHpJ2zVn9O0yKOBBy7jGc0OcOWSJYRgHPKophRMFAH6UYdMMAnv5lA1PVXssbBwMnE244EA/KKjLrTLeYEFRU2rV9JFTINnaJXYv3MrlxL4c6NqaMZbcB98SISjr9GG9U31/wAO/EHRpWk0y/a/gB3gmblkAHYN0NdS2QEHNRM1jFJ1UVltGnvUixBzF4Sytw9bFWHOR/kTkF/6/wBf0iQJf2NzakHBDqQP16Grn8J8Y6XqtnDIkisGxg56H2NOvXOF7G6iZJIEdSMYZQw/Q1VS78Jxp9/Jc6RO9oXOXhA5oWP/AE9j9Ki03T6tOxZBuB8e0I1PU9ZYqB1DbTzjgkS5WmJbTJkEGixLYL0FU807VOJdIK/iLSWVB1eE82B8qd6duj8c2N0oHPv3B2I+oO9G7AW47+x4g342pm27iPg8GMy8tg0LHlztSdi4bsr69me4hUg4UHG+3amlNrVibZjzjcUOaHdQ3CyYYbSHvQmsqzp/qH+4YjTRW51Awc/STK28Z+F97Z20l1o/PIVJc2/+ruQvz7VX/TdZLAwzKyMDysjggqe4IPSurWQoBO4pd8R8PaJqkMvnW8bO64LgDnx23+Krt2mBTnBx29xL10nrWs0VpCgPW35kPv4IPiV54e1EWcQw+VI3x2prDU0miDAnBH9apvrGeGtVWIXTTQ9PVsR9aA9W8WYNJdwsvoPQZ6H2ph69lNCGsbgfEKs0a9VsttQbWB+oH5+0utqptmtpPNbAIPWqkarxFaaZMyJIvKy8rDoQM9qBrPxRTVZj51xygDYZpY8X31reuXibmA2pTqam1H+o7FSO0Mo0LaPTsN45PbxLXafpWp683PbFSi/zFsAA7j60Uf8A6d3ccqtcSRSoNyinr+uKFfC6bWouCWUwusnNmJm9OeX/ALbU0YeMEldoJIpEdQAzcp5cntmmdddK1ocHkeYRoddr7aCKGRlThgvJ+/2ipvdBGkzPLb7RPk47qR2pV2d7quq6nchZCttbYEjY6sdwq/OOtWf1O7gm065ZlDBFyR7jrn60p7O0tLLSLUw7Lcs85PvzHb9hWbQD8GWfSHUX31b89zk++BnEdPh7r9mupQaTexI0VySkEhUZV8ZCse4P9aJb3gvSpdSuLy0VoAx3AOzY2zjtmqmaxcNFyTwtho2DKw6gjer7aXfwalwbaagmwlgDNnsw2YH7ihmSv/tE461038HZRq6QVW4+mw8Bu/8AIgA+gTtauYDz8vUHrt7VWTxK022uOENQjudlQFiT2AB/erdaLr+mRM5lu05Cfyjdsnv9KrL/AIgvw78M3MtlIGhnYc2PfByKjRMWVsOPqAi3faHsrsQ7cZDEEA47j7zmn4VaPc8b63cWFwzto2nwqGOAzLynCxqT79cV2L4d8PuB4dPisYbZ3tChPlvK3KM9cBSACT7CufH+H+OPSeDLqdo+Vrq6djtgnl2FXY4K1KefVGTnIh5S7fAHt9ak1F5OrKc4BxNf9NI6SdQrbTsy3zkxvy8C8P28YWwtIoCox6Bjb596QMnhZxRbXk1xpnEbW++Y4jHkDvjOelW5N4hX04UDtWpLcq0eQQAaYA0r9RGCJQDfqAdo+rJ88zkL4jcW+JMbXGl3+oSBk/4sARULr8EAFlNPL/DhqBuLPVrVY3CxMjhWOQpYbjPye1Wo4i4Z0XXoxFqVjFcIv5Wcepf+lhuKg+AuA7Tha71D8HIzQ3DoyBh6lCggq3v1pcXSzII53Aqf+Y6TRKqs4IBKdvnPiWC0y2AJXAydxTHQKqLtvihcACNSBhhit6G85hhiM01oYK3PmV7WVvYgwOxkldRRzQcjrlSMEUN2iSWc6+ZIWi6K/Qj2zUy03qJyMGhzUZ+ZML+WpdQKyAfI7TehrvXNZ5Ru/wAfaQmpXdlNKEbUpQDkNnmdQe3Sk5fPDFeSPG5lVcBCRgfOB80ZXm4bHUUt75+Uk9/ek5tKnvPRtDo6sgHJBGCOP8Suuha+8JVXb0npTnjlS4jDKaq2sfINs4o20TW5LeTkcnlz1O1JEbHHiVV0zyO8cEsA7jvUFOjo2MMVYjJ64orikS4TmU9RWrNAcnJwDUrKD2kSOQeYITRMoCtFzIRgke1Q1/pkc8ACjoMjvjHsaNJXRZVjYglgcVFRwJECQxZW7Z6UMyiFq5ibiW5sXeGZwyMfSwHSou8huonaOKHmiVAwKnl9Wc7H2NNHUdOilhORnlOSR1zSoklks5k8x38llzzEbZz3oNlIMPVwRIyH8QIG5ouWRozyx56HqMH2Na6nz4kYwetU5mQ/mG2NiO+etGs1lBeqs2AWTeFlYjp2NB66jdiWN1shyvIQ/Kd+m5/tUWJOCJhuLMshVlHsB8VWbjPghXEk1qnq3LoO/uRVxXaOVeYdT2PUe1CUtghmlk5yQ4XKnoCNsit1XPW2QZzZWrqQROROs6QySthSMHf7e9FfBvGdxo0621wS1qx+pjJ7j49xVvOM+BY7tJLi2Qc25dB3x3HzVJ9Z0V4Xb0EEHp0IxVzo1FWoq2t+vxKdfprtPbvSX5tbqC5gjeNw6sAVKnII+Kkk5QRgZB2JNUT4R4wutFnWCctJaOdx3jP+pfj3FXZtLyC6t0likV0YAqwOQR70tuoapueQexjfT6hLkyOCO4hGVCpkAD47VvLJG0ZVu/6GoyKTsenzWrGzCRweZlzkEjYUNCsQkSQIADtjoPat2Gc8ww+cnoahFmAA27fXFbkUoEgBXHtWpyRCONkdiudx1A7GpVGCqFZhn+tRETDnrcl5VBcRsxyOgzj7Vk5xJeIIqjAO2xFbFtLJIGyhTBwQfitaM5CtjPQgdMVuL+Y5wR/51rJrEkSAR0zttWWEcow2fUD84rAvfHtjas5ISIsMbb71qaxN1Y0IwRisSG5zIpiChd1Ocg1tx7qpz13NewVPU7HaszNTXw7ICCQ3cVnaQbEL061l5VCjG/71pcpMwBbtWZmSS5UIzzdR+Wo9kYjvsa/RtzyEZBwDsfatnlZiegHatTJqISrkMTg9KkPw0UkbBh17jrWq0RDA5zipaGROUqRmtToQEv8AS3WNPLzzIQUfuuPmmxwlxxylbO+ykgAAJ7j3qNVBup3B6UAa7pmI/MjB5g2VI6j5HxU1dhU95HZWrrgy7YKuoKnIIyDQ3q2k219bPFIuQeh7g0gODOOzFeDTdRbkdgORj+VsbbH3q0HpYBlOQe9NcixO0QlXps7/AKysLwX1ncSRTowAb0P15hWVhsG9qfepadDdRFG69iOxpF31vc20xgkXEg3R+zr/ALikltRRviWCi5bF+Z5RkIx3Na8sYZStasRXzcYIJG4r2zEMc5GD+tDjvC5DLEwZxjBBwPmtqIkyAZrLeMQisqkkdfgVqWjc7hg3UVMDOSIRxEh0+ozimbaBWjGPrSwhOZAPmmZYNhF+aPrcHAgNq8Sc8v01rmI/tUsnKR07Vk5M52o2Lcmc6vHXhaM6nFcBRi6j5gdhh0IDjJ9xg1D+C/Hen6PZTw3ErtEewI5lKnY4+at34raFFqHB127RB2tGEy7bhfytj7GuTD2UWmTTMiSylWKkAYyD12PUUfS67GVu3tIrFYlWXv2M648F+IVtxDqN3arbCF4HZSpkDNjGQ+B2I/enmyZ71VDwR4Ih0zS/85l5mudQgQJzDBSIb7e3Mf2FW6ToKgYKScDicP8ASceR3kHLFjHaouWD3otePNRskQIwf0oOyuE12wGlgyT1xUKyesZo6ljABwKHpYTS91xGtb5gvKgZWyPehZllgmEkZII/ejkoQW22oVePJfJ37Z+KhBwYVgER4cLcSx3cYhlbDDbendpmp3NhdCaI/DL2Ye1USjkkgnWWM4Oe3erI8PcQJeRJHIwDjb61Y9Hqt2FY8+PmVfXaLblgPpPf4l9tN1K2v7VZomBB6jup9jUvVUNH1i4027EiElG/OnYj/erOWF/bXtsk0L8yt+oPcH5pzx4lYZSpwf0knX6vmRX3NanM+V+qCv782rp6QVPX3FSdvcRzRhlNbxMmSVisTkdQpqp1/dSG/mckg85FWG4i4n0PQrFrjUbtII+gyd2PsB3Nc6vEnirTruze40zVDHznmC9CwPb4NRWWKg5Iz3xmNOm1i3Ule+FwTjOCT5lp7K8dWDKcEHNG/EvHGn6TwpdXk8qiRYW5UHVm6AAfJrkppvi7rmlNHzyefGCAVY7kfFFfG3iHp2qw28kUh5eUFlO3KSPagW11aoxwcjxHmr6FqGwAwAb/AHd+JcTwY8Q1m4auo7qYSTx3DsFH8qvvgfGafEfGt5JIcQKE+etco/CjXrReJZoUlX+LG22euK6NaJZXOoyckQIQD1PjpU+ksaypSe/aBXdM02nrJy20HgZ7fEcOi8QXGoak8fLhEXfbvRpqOqW1lHzSMPpVfuEbiSx4ku7SVsYUnehbiviHztWkQyele2aO+T74i4aRrNUK6uxUMD3+nHeM/WeIra5iKxxIwI6MM5Hsaq9xN4e/hZ4NWsByAepo/wDTn/Sf9Px2onF/kAhsg0UtxBANEeORwT+VFJ6s+wWstSm2tg2AVGVPkSbU6W3Qol6Eqytyfcex+IvdMvzLYSAk5Q9KFZtYk5ioPej+x0SxhEuNRt2mkX1oJVwW+marrcyXMGqXNvKhDKxwM9Qa4X1UrXepUmXnQWabXO2BghQdpGPvC7WbuCfRb+CccySQtzfGKq14WcM6jc3M7LGy23Of4pGx/wCn3qxyvE5MckXOG2K4zkexFNi3vrK3gSOG35FCgKoAUAfGKhalbW+o/T5X3hep0hSytgOwMntP0+1soOSNAvv7n5JrPLJGgPMcd/0oLl1Jy5ZnCgfND0vEEFwfLRwzZ236UWQigAYAHYSJNNa7difcjxOZfFt5by8Y6q8RAQzkj65qw3hvxQbK5hRmGx2BG29XC0PgjgyC5uLmPS4Dc3GWmd15yc9fzZx9qp74laboWicSxf5cgjzhpIgfSDnPpHYH2oB6io3bh37RZ6jI7ZX3BHuDOt/BepteWEcgVlB6Z7j3FNhTkAmkR4Y6tZajoNnPCwZJIl6diNiD8g0+GGM02X8qZOSQOZ5Y7q9jsowCTge03onbpmt0moqI71KCoGHMJQ/TP1ftq/V+ridyOuRtUGYY2zkCiG4HpqKA36UXWTtgNg+qYxpdtIm6CgjVeCdOvDzGIBh0YbMD8Eb00ojt9a2j0rg2NnB5HzNtp6nTBUGVO1bhLiGGBxaXxIwcLMvN+4war/oHEPG3COr3Q4hsXksJpAyXlqDIkG2PWo9XKcde1dK2jVhuKHbjRbSdjzRg7Gh7kS2vBLDyOZrT0vRer12FSO2eRz7iAdjxlp13aJLBcxyxOMq6MCD9CKhbnX4GlADgZbBOelQut+H1tEXltIhAzEkmL0ZJ7kDYmkfPo+v2V5iWQyRv0bGDt71WT62/a37z1nQJp7EyQFZh3B4zFR4zOWNtcAlQ0nIx7HPQ596o1xNwTqFwIpfOJQsCQehFdUbqwiu9Ne2uUDowwVYZzmqt3gh0p7jTr2L0KCYZCPzIemD7ipG9QVhexBJH6xp0m4aTW3A4xYpwfkeP1lePCzgaXV+Jb6ESIiQQK7ljkhebl9A7nP6VeC98PuDtNtVuTDO0sXqUGTZ2HuMYFUv4F4o/9PeIPmBTJbOzwyY7q3Qj5FXe8TL+B+DZNSs/44ReaNQ2Obm2K/Bo5GrK8gMeJJVorNTrtIGLCrUWYz8k4wYmdQ8TdUtnCJdIhHpRMBlHsD70XxcffhOHmvdYSCAqSeeM7NnpgHoT7VVjh3gbVeI7WHUx/wC0tpEyiynmkYjbIA6DPTNKvVo9Rj19NL4iuJYLELIsUqHCM4U8hY743otrSygsp4HAnql3S+kH/TorqRquXwv1ADxxOiFjr1tqdjcXEL80cltkdv1qd4K0scUeH0ZtJQb3TZZYpISd+TmJQj4IpJ+Eumefw7FapMtzLevJyYOyRJ1Zsf0HerleHXAlxw7xQs9s5VblHWVFBMZC7+r/AJvmlrgsOAcDyPBlD6h1SrS6pa9PYPUrLOCexCjsfv2lUNQsry1llsrqMqx3Gfb4po2fEmp2HAsGmiNk5DLnIwW5mPX6VaPj3hXQL24t5JmFldBhyyuv8GQexboDVQeMde0jRtd1+yvJ55YJZ0nhkVOYo3LhlHurdj70tcur4Mso/qHS9R02lDUZ2sLbAeAGX6cr79540W5C2zyyMAWOFyepFQXivPH/AOhwoPRwxPuSDmtDTIRr5iM0L2Ol3DKlszkee5Y7SgfyqO3c0sPEi+1TTdDu9Nu97mynwzn+dQDhv6URS+61AR/uEF6pqdPZTY3IypZc9iB9MzeE6mfw5tJJASzTTbnrs2MVZrhgvbT8/ZlKnscUpPCSykfwu0mRhu0twx+cud6bKc0ALLsAN6zVVFNdbnwxgWisGo6Z6YbjAXGe2I/Jr0pbjDbkdaGbXWo5Jijty+49zSnvdUvYk351G2cjbel1cai5m51kwdsnPeori1tf0ERdp+gklidvwRLoJqFi3oLjmXapqEx7FOmxFUusbm+lkDl2NWl4J/F3Ks80bci/lz3rNPRdwCO8j6hpq9Jp97N8Y9yY644meME+wzjtUPNDJk4bH2o6hjAXYY2rUeMB9lpm9bAd5QqdQCx4gXbOWkCMScdaIpYIuUqFyD3r6tpCtyWAxnrUlOUC4HSuqgdpzz94XbapdNgIGIsNRsB/IBj2pe3mkhs5PSnJOFLYoNmtZHLHON6V6gDd2lq0d3Ay2MTnUV7bfWtQwch2JJ/pUqSPbNasxCgkLnv80nlehFoutvbNyuSVPvTkSRJ4g6SHcdj71WdJBIvMoYfBGDRlpGqz2sig7qRnFdqxHHiaZM8jvHDJboeUtuynI7YqJuJo4oVLJygdsdxRJbXMVxCGBHyK0rmAsCCAR8jpUxHkQdW5wYIXkzhA0SBxndPcH2qPurKC6h5GQYPb2+DREqFZSnMOUKD0rLLHnfp9O9DlYWGxiJBkuNPnSPPNGJNxjoD0NYL0RN/EiYEIWy525Wbfcd/rTZls/NcFWyrZDKR2+DQBqljNZSOyPiNiMqcH9KDZSIejg/eQstnNG8ThFPoPMynAz7EexqKEsbO0Kj1Y5jttg96loSYXEqFmWR1WVCc42wGH96lZrbkwQPff2oUiEgwEmt4wADgkk47ZqvfGnBaXqPPAgEuMlR/N/wB6tA8ayDzGQhgTgHsah7m2UsHGM4652+ld12tWwIPMx0V1IYcTk9rGiyRSsOUqwJyMYNbfCXFl1odz5UvM9qzZZO6H/Uv9xV3uLeDba/UywqFnA6dmx71R/XtFkgndChVgSCCO9XHT6mu+vaw/SVHUaW2izehl4dO1GC7tUlilV0deZWHQ/SpSQyeWQuCw+feqE8LcVXeg3Yjfme1ZvWn+nP8AMvzV5NN1K0vrWOaCQOki5DKeooC+lqm9wexjHT6hbV9mHcSYt7duQZA+cGpgBUAX6AZ96j48gn1E56D2qTjGwzQuYXNyH0oASBj71PQO4H5hjHWoHAOBtvUlH6WXLYNZmckScViCDkY71IqwIwDn696hV3UrzVsgnK+oA5xnFZOZMKykek9+lZEclCpBI9u5rVJXlGM9N/nFZkdWH07VqZJRG5SMdew/tWUzHpjb3Fa8W6DYA19DI0pTDZG522rJrEz82eVgGPuuazAAu2wBwN81j/1AHfvjrWbDLjlQnPXJ6VkzEzRohUFTv0J962UjXmJAwc96wLlpAeYj57GtlyQQVXO9am5mXry/X7Vqygh9uo6V7LjbOx9q9Iy8xBBz71qZPEcucDcYxkCtt0DqwYEgjp7VqyoobIGSemK/WtwueVwfbpWTIvNV0KKdj6yGBynup7GnBwXxdPCw07UCRIoHI5P5x7j5qOntlPq9JHY0DazZiaE/xuSaPBRxuwPbFTJYVI5kVlaupBEuqCjLkHORtUNfafBdR8rqCQcq2NwaSnA3GU8uLHUMLOuyt2dR0I+fcVYH8246UyO2xf7iJMPU/wDYyuGq2E1pd5Ze+57Ae9ashSQo2M52z81YG/06K8gZHG+Nj7Uhb6wlspzGVx7DPUe4pRZUUPxH1NwcfMibpuRST2OB81pBTG3Mu4bfFe55yw3H0rMpVowcdOtRiTzftWBfPamTZueRRnrSutVKtsdiaP7OTAAx9xUobEjYZEYED1LekrkdaFbaQctEMcu3WmVb5EUWJg8TDe2KXlnc2zjKzRPGR8OMVxP1peS4RJUYsJSPN6jmjPKwz17dK7jg5wd65YeJmlXmmteW0pSeWCTnXGzcrepWG3TfJx3oxGAZeO5EjUEo/PYZl+/Dm5E/BmkHnV+SHyyy7g8p7U21HTaqIeE/H+m6Vwkn48OkJmJDrgrGOhyOpG2dqvZC6SRpIpBVlDKfdWGQaIZSD8E8QOzuT7zL1+lY2TJrL0PXvXrGTnFR4zIgSJCvDuc1BzQ5zt3ovdB7VGSRbUHZXD6rYAzQ+wobmiKHOM96Ys0A69s9KgLmAENt70tZMRxXZmA8kHMCcVHRT3FpOskZOx3ogVMEpWnPbkbgDNRqSCISQCMe8fmg69FfRKpbDgfrTc0XWrjTLrmB5o3P8RPce4+apRBNJbutxDsy/nUbZ+RVhND1qDULZTzDnHb3qy6XUhwATyP5lV12i2cgZQ/xLwWd9DdQLLGwZGGx/sfmpMPk7GqyaJrU2nS8u7QufUvt8inDc65ax2geOVSW3BpyMEdxKuUsVwuM57Qe1iWVb91ZiR2pM8W8bw8P6fLM1x5bYPIPc0cXmpvdXIkYjp0rnR4+XlxLqlpb4ygQkfXrQGpu2IWX3xLt0/p6tsS1B25Er5xhx5r/ABJemS9vXkRGPloTsoNBT3tzNY/8QkrkVqpYxyRsC3K3zW9YW0gkkiwrBgdwarbWEnJOTL3RRRRWErrCqDnAGOYOG5LKhc47U0LrTtUv+FYb3kQ29qxj2ADYPUnHWklfI0M7qwI5TygVcHwK1G41C+vdLGmSahG8WQgGUTfBLZ2H3oyhAzYJxuGIPrdQldLOw4Xn2iA4Xe2teKNMuopvIKuA/sVNf0X8N2drb6ParCVZfLU8y9DkZzXM3Vf8NUNxeLcfiH02JvMYoCsgRsZHL8e9L7wy8YuMuHeK5uCCiajIl2YIHMmBH35gTn0gb46jpTmmqypcN2PAM8l6n1Cq2xfTJKqGZlxj25HvOg/H+mz2eow6nBtkNHJj2aqC8Ra/df5tKrMeYkV1M1+WF9EYTugynqJOBn71zZ8T+FVsLWDXIZ0lgChnVCCeU9CCOtE2VtjP6kfxLv8A0p1Tp9Vhr1BVWxitiPB5x+81l4vsNOtIWvbhULsAuTuc7U3eHZtOTUUu51adVYOiqwwrEYyQeu3SuMXE+u3Wr6uSzvjmxGg7e1WW4f8AEvUNN0uNipkeBeSVe45ehNB6hLEWtgN2Dkia1+ro1911WNtRPH/ywe87XXI4GvrXM1vbl1XO6hWGfkb1z91240y88RJNIsvNfEHm86tnlKn8vMe1L/hvxHstcjWSV+SUbcw64+aL7LhOCS+uLmO9JF0/O8gI5vgZ9h7UNZ1GkhRYGBz2ED0PSb9PYttWqI4OQF8Y+/MIb/iFPxbQJAqmHCscdx22oL1PjG8tVQ/gHPMTyt2P6UWaPw0sMt5+OfLK+zFv+Jk/mzUfxhxxpmhy2MMcUc8ef4gXqAPatmyzDMblVfHkyx6Z32BSee3bPPeAWratrEmlvPNDJHGwA/KVG9aeg3cVrGrSN/FkGev5Vpj63qFvr9naRWj+ZDKyucewGcH5oq0Hhq0DmWaFWbI5QRnlA6VPXSxY7bSxP+4+JadPZp9NpLLLWyWOMDuceJucOazHFeRBplbzTjGdxVdvHLTrNNctLuP0vNH6x7471YziLSLcT2t1GgV1PKxG21HtnbWN7AouIEkGMDnUN/WtVU2IGrewNzkHEr2vrqvpq1K5BOQRjtiVp8EOOjo1+LG4kxb3DryNnZJOgz8HvXWO0vEmA3Ga528b8JaS2mvc28SW8tuhZTGoUEDsQKLvDjxIF7YRQTS/+4gARsn86jYMP6GmenYBvTYj4M8j6poX09otX8lpz9j/AOZfxG3FTC7ilnpOqx3LJhhv80zImUiprRg4i2nJXM9V+rKRkVhOaHEJMxSD0GofbNTjdKgmGGNEV+YLb4khE1b/AGqJhbepQVw/eSIcrPVfCMb1+OK/cwqOSz84Rlw3ShLVNMtbiH8gJ7bVOyzKFPvUGl0pc5Owrg1r3IhtNlg/KSMRcf8AonzQZHkIA3VRt+tKLj3w+sdU0mSN09aKTE+N1b2Pwe9XBS6i8rr8UDajbJLFcxlhhlyPrSjUJyCCeI+outtOH+MSg+lcK8Baxpplg0qG2uICUuEhHLJFMvUH3B6gntS+1Phi5TQdRhgvXlZwOWLBGBncj3YCjbA0PjfUXJIS75Xz7ldmBpvanDos1uLiJypYfyt3+lLfxNPqZZMEDuPM9f6K2tq01LCwspfGCM7WQ9vjPeI651vStD4N0+VFYxRwiM+k5Dr+bOcYNUM1jiGTjO6lg021mmd2YKixEnC9W36Ae9Wg4p4iubbUktpJQbd3XIKgjr1NX9h4CsrnS4XtRHGGRHXkAXn2yMkdR3qf8Sbe2SPGeO0Iu6lR0zUvkBrbGZmJJOMnIlD/AA34M424Z07Tmso7K48vmeaB5SsnM5yVBA22+1dBdC42tHmgE0Mtncod4Jhgt7hCNm+1Vr1Cw1DS7l1CsjKexyKjRxFfyqYbmNJ09nXcfQ0wq1gRCpXv3+ZVNd0NtYTetiPnJyDgjPweCJ0nkW31OHminSSPIJUjOPhh/Y1XvxB4Y0niKxk8hRyWDGO5VIwTyEb8vuV9qr3pmtW1nNBJbX95azRyKSsjmSIqN+XP5uU9waa1h4hf5NZywXOleclzI0qzRy5Epc5LBiMNg7bbj2pY96O+Mbe+SeftENfTNTpyCGLlSNq4C+ec578RH8e2K29hpEkd7BMqRiOOWNQnMkIHKSn8rY2Ye9Uj8QdSF7/GlufxDMPLl3JO26799ts1e7jbSNH1HTpL6xhcPcW8zC2VvUsqjBXA/b4rmnpely3mqLaXaPFHP/DLMCORiPQT96D2FG3E4x2H2nolt9N3TdLWMs1RsD7lAI3HODiXb8LPE/hay4O0nQ2sLqW4hVk/hKrhi7FhyjOc79KcWo21/eSQldLurayY5YSBVkbB6sCcgfFclriPUdE1IjDwXFvIQwBKspU74I7j3rox4f8AjZa61pcWnalOiX6riOZzgTgftz+/vVg1xo12mdiy1PzuC9yD5BMqP4Uadi1Qba7fWN3bPkD2h9xbb6bYWS/h8SSyrliWJKDGMDfG/eq5n8UZg3KSKdutLJOULIeVjkMOlbNnY25iGQDVe0WjSiha0zgeT3PyZ6BpNWK9LkuXJOMn48Txw6jzFAV9IxtV1uHLuARKCABgAAdqrNpVvHGDgY36UwUu5IgORiPirRpiyrzzKB1wjVuAR2zj4zLZQFGHp3Br7NacwyO1CmgPO9pE0gwSuT8Vgu+OdDtbxbcyFyW5Sy7qv3o40NaPpUnieXVNYtpFeWx7cyVcDmzy7jrQ5eXRiLCozjHiUaYiLbhWlkXmBPQD3xQZoGryanbzC4GZI9z856UnsR1QkeJftHpXahbmX6CBgZ5x7wkW5/ESqoHSimKCPkwBk52qG06yJkGFI+3QUyILaNAuB96Hqqaz6jB9bqq6rNi+05CAACtVzgHJwKzI/MM/FfmUHY1W5NI8LuSWznpXvIB6/asoQHYbV+8ojG3SskkIdL1aS2lGTlD1FOy2uIbmIFT1FVvKb9KJdM1KW1kA5sjuPapUfH2kT1hh8xv3AVTgr9xUFeBY4CRjJHpGSMnrgURwT295COhyPv8AatWWPk/MOYDcZ+KmYA8+IOjEHB7yB093eItIeoBwRgqD2qP1fT/xSBckrkZA2yKLx5fKCDnPeoNmZZiWYYOwHz71CyjEIRjuzExfaWtrdAlMw8uck4x8fUVPkL+EVk6YyNs4+KYM9tDcROrKCNw2aAdQsmFu0ULMi8uMDqBjqD7il7pg58RlXZkY8wffnZQyrhOpbsVI6j5+K1fILwjlCgEZAHT60SxqnkRq7cwAHMSOv2FY7mBjERGQv+n2+KFIhIMAZrbOQcb9duhpK8V8H2uoRO6qFlxscbH4NWCjEssCGSMIwzzod9+mx9qj7i3UbZG4x0rtHZGBBwRMZVZSCO85Ra/w/PbTyq8ZDKcEGo/hriu+4euwGDSWzn+JHnp/zL8/1roTxPwvaarC+ABMNlcd/g1Q7ibhu4triWN4irL1GP6Vb9Lqq702OPuJVNTpLKX9SuXS0rVba+tI54JQ6OMqR3/7/FE6O5yCdu2K52cM8S33D14Ru9uzDzIv7j2NXt0XWbLUbSOeCYOjjZh7+x9j8UFqKGqb3U9jDtNqEtX2YdxDmMqdq3UbHX/w1DBj79OlbIlyo7fFB5huIRRS9AWBIPt2rdxHJgEdKGfQQduoxt1qZt5kPRhkdf8AvWTnEk1TllLZOcYwKnkI7d/3qBwHK8x77GpVZN9qyckSQikTJwDkbZqSLNjYZx9qikc9Duay5DA82fv3rJrEkTz7kNv/AEr6sjkDGN/msQGMA5x3+K+xgc7BTgHNZMm27kAFfuK+q5OCDgYrWIIYEZJA6VuICObA/Xasmp6JMjZBBwMZ716IZJE7jG9asbhZ33xsMis6crANHICnsBnesmTYcM+6v0Bxk1GSko6MwXHQ74qWRPUcjPvtXtrdW3A2+d61NzClz6VUjI6ZG9BF+nnTOmSUG5AznHwR7UVS20iEYbGen271GzxxupbPK+Nypxj/AHrcyLq+jmLqYudJYvyOrZJ32xnv8VZPgjjL8RFFbXbr5n8rZyHxtt8/FVp1IxwSKHDsmdgBtvuDt3zU/YD8UFkSMx3H5pFG3Mf9a/8AN7+9Tq7LggyKytXGDL6YUgY7jrQjrujW2pWckMi4JBww2IPxQJwpxY0hS0vCBKB6H6BwO/196dJCsuR7fWmI22LEhD1P/aU2ltL6yvPwc6En+STs4H962o0yS2cAGrGazo0N9blXGGGeVx+ZT9arDqDz6ZcC0ljIAUcrsf8AiE/3pa9RU/EdVXK4+YQwOTI2D9vai63lAYL36/pQRp2XZTkdcnHaieMh5CfY7VAYTDa3lO2/eiOKWgCGX+JvsaJoZjn3qVHxB3QGHMEu1VY8adAju0srsKCGR4ZD0xy+pTn6EirIxSgjfvQxxjpn+Z8L38IH8RE82I5x6o9+v02pirZWLgu2wHxObnCCafY6zJZSL5izQowQrlOZT5i9emcV1pt5RNBHKBgOiuPjmGa48Qc54kEkciG2kRo4y35n5SGHKO+Ogrq9wlfR3vDmnTK2cwqhPfKek5/SjkYlFycmQ6lQOQMYOIa47fFeiTjavor4OuKki6fTgr06CtZ0z+lbWf8A6ryRtmtEAzAcGQ0kfxUFNCPejFkBqImjOT0oGyuMKre0W01vyzZA6itJ0yN/tRlcwZbYVBSwnBNLGXBjxHyBBV0YPt26Vks557S4E0JwAcuo/rUnJHkdM1FuhBI9u9cKxU5EI4ZSpGQfEsZpOqQX1uGDDm7ipmZZCmEbGOx3FVf0+/m0+4EiE8vcVY7TdTgvYFdWGcZIqzabUC1cHhpVL6H09oZe2eJ9v5kRcQy4cb8pNUp8Svxl5dxyiPnOMN8Yq4+s6X+JiMkQAlUbds/FI4lQbsXlqGVo2VsjODXOoDMpVsAZ4aehdMt0tuitcEeog5U9x9viUJvYfzC4V4SejAY/eh63SS2nV4dQDb9GH+xq++ncMcI6npj+XITMgPOhbPT4oNsPDfRNSvngilEZAySFUn+lJWpsUgYGT25k6MLaGuUgqvfnkSqPE2mTzWkV7GVYcp5+XsferWf4XIb201S6v1kKRkCJ1xs/fr9aN4vB2SASRx3okjYH0MgHX6UwOB9Ebh7Rr21jXEkTs7AdSOuRR1K21su5CMHP3iHV+jqKLKychh/I5EK/8RPiVPYaXp+k2UoS41AuWIJ5ljjGTy46EnbNcedGi1b/ANTCY5juFZnikUlWD++euat9xhr/AA7q3EEN805kuIlMWSTlfge29Vf0LiEXfFt5aancsy2znynzg8uemfiiTq1uFpwQqgSj6TpfoPus2Wvc5HuNmBhTn7Zg7xDxJxLqF7Iupahe3LqSuJp3cDHwTitKHX9aFoLQX1x+HGSsPmHyxzdcL0FWW1rSOFr2QNHOAe59/uKWt/wcsatNZ3CTIu7Iv5h8j3pM1+SeTz8xx/0bRVHdXpaVIORtQAg+8GOGG0eDULu+vY1zBbu6kj+btSW0njjytfe4lwYJZCHXsVJ9qYetaWDoeoSLON4gAM79fakp4Zx6dBxzorX8Ec1vDch3ik/K3LuOYHqAd8U40ZLo+5ieMc+0D1K2J6e0ZIJIHuZZninh2/0uSO9sFkFrcqJEwCCpO5Uj+lH3BfF3Edv6JHKxnH5+ufpRn4hcb/5u0UNlgKX9TAdffFTHAX+RQ63aPqzKyqOYAsFVT2Lk/wBKFtoqsYIWXBbAc8ce8smlN1dRtOQQuSn+OYyTrmpSQcpEoLD8zKQN/bNJLVuGL28nMn4gHPYmrdeJXFvDsGmQfhrlG81c7b+gVVOLU2nUTq4ZN8Y3x70Hfo66Wwtu75AhWi6rZqELegFOSOZP8I6/baO405nzJzMecA7Z7Va3R9RilTIZs46nvVOpLbT7vUIJVYBwvNlTua9apqmv6dJz6fORgZbLZU/Y0y0urWpAmCR7wl3LghlHfPEufrV2rWe+cqwP0rQ0vWUXCmQYHzvVd9C4xu9Ut/LvAqTgYyvQg0W6VpFxc6ieVZRy4JJ2G9Svfm3v3xjmWfRV6FtJse9R3IGOQZYfWrm3udFuxzAgwvnt2rnLp+oXNnemaGUqyt1FdBZ+GLu90ee2ExieRCA43x/2qk+ocC8T6XdzJLYySKm/mxjKsOuaJJJwZSep11n060G8LuzxnvLjeHXiVFJcwW9w/ls5C7nbJ9q6D6TeCaJXDZHSuCFpdPDcK4OCrA59iK6xeHvEi3OlWTiTmDRjJ+e9Rm2xbVycgyqjQ1NU4Tg5ziW+U5FfcVCWV/HKAMjp71Mu6gdRTJXB7GV+yp62wwnkkVCzfnyK/S3iA4zULc3W4x7ijq0OYrtYYx5kvG2D9TU0GwtCMd0gAyaznUVwd/pXToTOa3A4k1NOFBPtQ7PqCg/m/Soq6vQAxJ2pW32uYfCqQM9arer6nVQ2xeWlw6d0W7VfURxGHcawqZLAY+tAt7r0cZZo9iN6F5tQV5ACcihTW7hBEWX2oYaux0J3CXrSdDqFqgqTniM6x4thkkCs2w61gvtaZpS8UnvtVOY9eMGoujnAfYH5FTb8S3aZA+1BtqmY4aW8f0tsuJTsQCAZteI8TT2a3UIPmwtzjHXbqKXUF9eXWlx3EasUdQeu1FsWqi686GY+txlFx1ztitbg3TrezurmzvpBHEZOaJX2GG7VwoVlbK59uJuldZ07W2IEZ0ddxwCRkef2i80rR4tQuWkuUyvMQM10X4U1WBtHhgY8nkoFHbYdMVBx6Ho8dkCYI+Q4xgA9fahN/K0udwMtAdiud1z3H+1aUMmGI+OJWteyasswUhwxIP38TJxPPBC5ldlePO7e31pY3XE66HqaPLpcBtsDnllBC7jIwcHepXWpbe5ikjRucOOo670aa3JpmveHaWAuonvI0ReSMeZK222VTJztUbuzhtvGOfv8QdbnSqqt0JVm2se2M+YK3XFvDmqQcyaPo0ynut8tvL/+8q1DwcPa5eW1wtkltb2POrS2l3PFcW8p65BDKQwG2RSq4Z8LNa1KNYDZBvKbLyS8rAew5QcD7n7VYaLgkaZCEv4GkDIyxvK4YAhcgKo9K/GBSwXatGBejIJxlef1kllSLVsFgD5zt3ZOPfGZW86/e6ZqTSafHLJBHzcwUMyW7Acp8uV92GOxz9aXfGviPwNNDZnSbRRIsPl3IePKLIm35v5lfrnsaZuvBNNM6jL8qs3KTnO2cVQbjfjrgnUbeRLfT20tXWJeVgAGdBhm9Ixud6sdFYvJQp27N7RtrqP+n003+sWNij6SO4jI8QrzTOINPg1y0CiX0Q30andJMYV/+lgMZ96p9BcSIWCsVZGJRvlTVyLbw8hj4Z07XtFuHu7S9twLmEZYY6N13O4+xqqPFOlS6Tdcig+W2XjkxjmU+/yDsfmuRX6bMuc4M4XcERvBHGJerwt8UW1uG30HU5ALw+m0nY4WVu0bHsT2p/WstwNRS1kDRt5oRwdiu+9cb7a9dJ4Z0Zo2yG9JxysD1GP1rqRwZxg/FejWU0pLanbOsFxL3lwMrIfnHWnJXTvpkdX22KdrofI8Ff8AIhXrrXydqpYCGPbY/hvsfPzL3abwnbXEQMUjq31zR/pvCMcThmBY5H5u1CnB9zqqiNbiEE4/OpyD9R2NWSiIKqcb0120hQQhHwfeeFarV6022VNqSwB7g5BH3gBxNcNYcPT+Xs74RT/1daqdNF5cJaQ5J32FWa8Qn5dNt9tvNOf0qrV9dkoVHUjpRDMVoBBwSSZYeh1sdoA4L8n4n2fUpLqXnlkLkKBv7DapHTr29t52eCTywy8rEAHI+M0vCXF0qjcsBvTCQCCMBjk/3pL6h3Ez1HUV11UoFAO8YC+AISQa3qcEnOly+Sd8nOcUz7Lj5iFR7T1AbkNsar755LbVtROOYeoD5otLVK4KgypanQI7DcvPjHH9pzz4B4vudbs2MtpJHJGcc5Hpce4+fcU7o2LH4NEVtplnawrFDEsaAYwBUXcWvlNzJnB7VQ7MFiQuB7QVDgAE5+ZrlApH71jKkfesyshGSRsK9lTioZPMHLkVgK7/AGrIyuuBnO9fjzDHvWTcl9O1CW2lBzlacdtdxXUYYEfSkJsT/wBqkLDUJbWfIzg1Ij7T8SN6ww+Y37mNCh5k/L0UfNRc1ikxAOQuxyOuRU7Z3kN5EDkc39K17yCVdowA3Y/NEEAjPiDKxBx2MjlWJJG39eAW/oDUN+GgSLY+kZ3J5vnr8VNzsqFHaEknCkqOgP8AavlykssDLDIsbnZXC8wHzUJUGTqxGIq72G5sD5qDnXmOV65B9q0rfUY5peYN/DdfSvLuhX82T802DGHQJJjn5PUQNifcUuLzRWs5jPbZz6mx/YfFAvXjMYpZnAPeRmoRysoMRGVb1A/zKR1B7UIWsj3BeGRGYqfzHBzjpkDuaOor9XtQxjeTLBWCDJXJ649h3obe0u4NSeaOOMq68p5e5B2z80KV4MKBkddWy5ONj1HzSm4k4atdUtmEi8sqg8jge3v8U39RupI+QiHKll6dfnr7V5lgRlLrght8jpvWKzIQQcTsgMMETljxRwvd2lyySREEHr7/ACKFeHuItQ4eveZeZoXI82I9D8j2IrpPxBw1bX9oYZI8MM+W2d1qi/FnCNxaTNHKhGD6WGwI96tml1iWrscD7SrarRvU/qVn5ltNC1yz1KyinglDow2PcHuCOxFFzKDgiubuha7qPDuoB0BaJiBLH2Ye/wBfmr5aDr9nqlnFPbycysO/UHuD7GhNRpzU2Qcqexhmm1K2rjsw7iGqo2QR1/apSJkDZ5QDUWH36Gs6MCcEYzQYhsmYpJCW5unapOOSVQuMMBnmJO9QEckXMYgcHG2/9KmogAuBuSNzW5ziTRcgelTk4rfOcLvuMVBq/MAvMQOmR2rejIAXDEj9aycyXTlYEEnNZTkfl3A7VHxuueXPb771uAMq4zkY71k1ibImHMoOc9ts/rX0zK2MYJ7HoM1rpJyrzHpkACvw5/yvygnpWTMTZiZWJyeY53z2FbEYEahdyC2cCtFAWAOc/A67VttIqsqlP771k1iThbHU4/vWwjIijm6e/wDvQ9gNIxZsZweuwxUgspjRhnnZegJxnNckTc2ZQGyN/gUMyo0ZyMyKRg425aJInBTnZMMwyc9B8VohlmePBIO5IIxWuZkGIrdJ09KhlY/mznp81hSyWCaMFsn+VuhBqfaPyWZYxtzE5HuakGQlFZQDnGe2f1rMzcg5lS5TzEPLcISdurFe4Hv/AFpx8HcYi6UWt3hZh0PZwO4+aQ9/Csd2JVDcykYx1z8V+nBuwJoOVbqJssFOD/1fX3FT1uUIIkNlauuD+ku6+DuNxjal/wARcPWerWbxTIASPS46qexH0oR4M4wa8jNveeiddjnvjuKckpGxB2PemylLFiFg9T/2lSLKQafM9jdPy3Kd22Dp2ZT03oriweXfOelNDXtCs9VtWjfKsN0cfmVveknH52kzxWdweaVubDkYBA7j6il11RQ58GOaL1sX5HcQ4EfJv39vat2GZgTUFHLkipNTuKEhcLrecNgftRLDJ/q3+KXySkZqbhuGLDBohHxBbK8ic9vFrRItLkcW8YSS3u0eBwQvKHORj4ANXG8HdUiueHnt1P8AwmVhvkkMoDZ+4pX+NWgx39lbSkYEgMTt2DLupNAPgtqrWOr2yzTD/wByDA2DkEjYH46CmenYYIzyCT+8G1FZavdjuP5E6OLj7V73xsK8A7HNZKPiEz8vUbV+OAa/Yx/3r1tisnM+dRWhKlb42rywz1rlgCJ0rYMHZI8g1CzW+3Si8xk1GTRDc0usrjaq3tAOaHBziot4ydqNJYjjptUFLEd9qWsuI3RwYJzRbHrWxpepzafcg8x5GP6VISRg7YqCnhG+2c1wrsjAg9pOyq6lTyDLKWGpw3EaujA561j1DT0uVXAHLzZdcfmFVhg1O706QvETynqDTd4Q4knvHe3nIJC80b4xzDuD8irRRetyc9/Ilbspt0tgdTxn/wCgzFqfDWj28U11bweTMBnnTY0JadoGsW+s2t/FGxhbHOyjZgfcdqeOqq6WsrovOpUl0G/MPj5o74O1W0vdEjdAORTygEbgD3FTNSjEZHY5H3EZt1QCo+kgUtjcJDwHYH4pb6m8trqzXCHKkASKP9J2Jpq6zbNErSQKMttjOAPmkfqH+YwyF54/SwK9cjB+a6uZQgOD37gdoPQxc5Bx8Sk/iH4Va0Nal1DRozcwXDF3jVxzIx3O3tVINastQ0vjB/PieJ5EAZW2IrtforFRKpyBHsFI6A71QDxJiGk+MPD+qXFmLm1uG5GjIBAdthkGg6kTLEDG5TwYRqNIUqrcHA9Vc/8AxzxEbay3b4GcD3NH9o34ER3JuOZQRzLnfH0q2ev8B6hq9sn4KC1sT1ZmwWJPwo2ApM3fgbxenra4M8Z6+VGT/U0ltpsViADj4EPC7OHbHyTgfzFfq9vptyxdMiGRg2x7Hcj9asrwpwlwc+nRzR2NuWJxzGNSwON9zvSH1jhubQIbe2mdvMYfww6kFsnuD2Fbmla1qeTp+nRNLIFy5HRF7k/JojFj1IN5UDvMCVpYSEBJPjnn4lhNR8PNHu382NPIlAwChwD9qTGrxQ8P3SRXNtzt1QkZDfIz3rW/zDiRW5F1GYEHdQObB+vatW9s9V1GOIXdwpMT5Qk5O/vQis65y2B/3Y/tGZqsbGFyfIz/AMTcbWtP1MqLrTlkAwAv82B+mBTD0vhrhi+tF8p5bbY8yRSnA/8A2s0uLXQLrGBLEAevXeiuzsYLOXJuEU9+uDQb6twP9zDPJMnXS0ocsoGR9oyLPw7095Ekgup8ouFIkG/wdqI4eF9MlLR3ZmU9MFsA4+QKK9L1pVs48xRTQoBkRYVwB3B7/INWN0u24durKOTykkDANzEknem9GnTUqvp6hd3lW4MrFuuFNjq9DjB48gj3B7GVfOjaJoaGSO3XpnmHqP6nNOvhqXzbKKSS2ZWcAljtn2rNxXpmlmJUjiBB3GO1IO6udSgk5UmYKowNz0qDeNLcwsXce0a0XLfQCowT7y2l5q+kafbCW4l8td8c1UX8Q/FSS8vTb2MnLDghiOp+9bkum6vrdylus536liSFHuaID/h/s7m3J/zmdJuxEalM/Q7/AL05pssvXKIQsX3VWUHduIz5zyZU6OXn3J671YXw848GiXIgucm1dvzf6Cev2pQcX8E6twhPCtzcwzxS5EciZB2/1Kdx/SguG5WRcipjXuBVu8UElWBHE7V6VxJEwRo5VdWGVYbgj4o9XW5TgkZz+lcjODuOLnSpIoJ5Ga35hj3T/tXRvQtes72KEqwZSAVI71zXW+/G7nx8yV7UdDlAWxG8szyMpbuampYiyA1C267q3btRYM+WMb1Y0BVBzPPriGuJxAy4Mi8xHaoE3rRnc/ei69X0nbflpL6i84fCAtk4FV7V6y9HKL58yx6LQ1Ou4nEILzVOZSA23tSuv7wuzBTgUeW0SbLIgZiP3qeThWCdObywpPx1qsei+8luSeZ6J07X6anA28L8yvH+axxOeZjnFQ9xqwuMjmO/vVir7gWy5CSp5v0pCa5w81qWaNTt1H+1Y++vxxPS9DrumahgFBDH37RP6xawu+Qepog0i0tZfLE0jEkkAdhj3qIuYXUrkbsdhTh4Z4fedhIwAOfy/NQ+uPUUhM/EsWvtFWmUl8AA4PmQl3ONMgkEMIGUZvMx1wO5qksNxxMusPqt5eSXH4gOPI5dolJ9IznY10l4z0tYdNjVFK80qKWXYerrn3BquGr8NX0c0QWFZ4XKgAekjB/mPxRzanUE4C8cD7RP0zUaXi1kBZyQCWOTiQvDfHOowx/hmvWjtmBLJNuFxvlT1B+lSeo+Is91axixshdSNsZGb0ALtk9MY71MXfC+nR2zP5fqUZOBmoHg3gltUXXGgYIsCws0TjOect0x0xiiVOPAY/PaBdZ0uhvqt1KWGraV37RjOTjv+sYnA/Df/qBVuNUvGniDlfIizDDsd8hfU33NG02uaPoc09lbxLHFztjy1CDlzjtW5wfbvoaSwOQyu3OOT+UkbgZ61JcWcL22rWs13ZxF51HMyqCeb3IA701Sqp9OOcODzPOdFZVV1i2vVF/QtIFTeAfGZJaP4l6XYeVGI+WMk5ZTknPc+5rd4u4viubW2MTB4xLHIR7hTneqCast/BCzqjekkMPamDwYNf1HRWe4iHkuWEDZwWUbZK0rZXKkDnE9E1H9P6Chk1W8DD4bce+f8wj42FsdevkibmjEh5T7qRkftXJHxn4fnOttPErCHkB2GwJ2OK6ica6pp+jXNzdahdcokC+WSMs2FA6CqB+IOvWurNGlsTHEyZLL6if9qk0QZLtxGAc8mJv6it0z9J0tKsHtULgDk4xzL8f4aryCfwo0iISBzbtNE4PYhycH9aN/Erwg0jVeH2uopFillmcRRhd/MUZ5h8HoRXM/gHxH1Hg2wlstN5WSSXzHM4LEt0OMYxVudF8fby9EFvqFnGI+baWIkYLd+U11qHDW2MPJyP1ld01lbfh0NuzhQ4I44GJzw4g0bUNHu3t54WR43IOf61db/DWYLjiDUopACDao65/1BhuP1ppeIegaFxTov4q1uIGuUXYhhlxjpjuRSV/w/abf2viJMPLPlw2sgkPsGwBj6mtVsMk+0bWUorMhwysjYzz4nebSNKsk0+3mjPLzKCRnbPTbNGaDApDWd03kwxmVioz6c7CncLqAJzFwABkk/HerFRY9leTk4OPeeI9S0i6e8HI+ssQMYwAYJ8YWdvcaBd+a4URKXDHbBFc/b+8AwqnIJHqzU94o+Jl3xFrdnwpogLNd3CxMwO7b+on2UDemv4h8CrbWUNzaRgIiKsgUY5SoxzY+afW6N101QdgGcsVX4H/MsXRLk0l1a3ggXcrnx4BP3ld5rx1a2eMgsNznbof60ZLqSSq48zmJJxt07UOW50UafcRzK/4oOvlYOxB65rV/DqJOZXCk9QCRnHT9Paqq9Tq+OCD7eJ6TbetmBsYbCQCR3HfI+IVC5jiUZYM5G9LLU+JdUnuWttNTmdT/ABJcZVcds9M1D8R8P8Q3hihtL1LW2kIFxIhZp2HdUJ2UHuetGWkaPDp1pFBCFCIuAo/83NF1ogUD3kdepppf1TWLSPyhu2fkCfTGf2rC8IIIIqTVT061Eahqmn6fGGuJlX2HUn6Ab1RxKRBq7snjPOn3X/asMTggdqGrviHV9RJjsLcxIf8A5XHq+w7VM2dnex2485/MderdCfrXDLj/AIk6t7yQYDGSK1/LPXc/Ne45M7Yrb2z81HJZGYYEbV8KdTW6U3IGKxspBFZNgzJZ3k1rIGBwNiRTgs76G8hHqwwH6UlmVjvt0rNbXMlvIGRunau0cqficPWGHzHY9swYHcry4/8AsVDFXiCRRAZwxGV2PuCR0Nbum6nDdRBS3qqTZTGv0orAIyIHllOD3g+UjkYHA5kIwR1B9qgLiKeSRh5hjVOU82O+cnr/ACkbUXZj5ecHAzhiP71o3URkjlVl6jGD0INQsvEIR+Yr7nTLmCQy2zdHy4/1Z61qO9leP5asVmHNjboRvkgUwikflGHnUsgUcv770JXWl3A57iMBZUcnb+Yf70CyERgjgzUurCKTlyoJ6j6/ShuS3YueeLk5SOTHcY7/AHoosblrlQko5ZVHqGNvqK8JKJTKOX/htj8uOn9R80IRCg0B5fLLzKxxycuSdh6hS/17QrXUrUxSgNnPIy9RTWuYDJE4cHDfO+fah5YI4Y44zvyry83Xp0z81ypKkEHkSXAIwe05xcX8HXGnyMsqDG5V+xFK3Q9a1Lh7UBLFzGJseZETs6/7/NdSNW0i0v7eSG4j50O2/b5FUk4x4JnspWUplCf4bgbEf71aNJrFsXZYBz3lb1eiZWFlZwRLB8P8QWOq2Ec8EvMp2Oeqn/SfmjWOVDjFc4NJ1bU+Hb8SxZKE4kjP5XHz8+xq83DnENhq1ks8DggjDA/mQ+xqLUac1nI5U9jJtNqRaMHhx3EYWH51K4AH5tsn7Gp2N84AofRiCMfetvzAuCM//dBZh+JP8xyuDt3qQgDdM5wOveoJJTjDdRUlExyc4rMziSBAXmYnAUZyP962I7rzIuaJldWzuW2rB6WXlO4wc5G1ffJiSPCIAADgAf0reROeZtLIiqCxAB6gnp/91vtNbqsfmTAc+yjPX6VFQlPxBAiYswHM/QfrUrLDEQuVUkHK53IPxWcTUxRWMVqSIxyqSSRn3rYRxJHhw8fTBHf4ryscbPz+rm/052PzXvPq8vlIDbnBrMzJIGFuQYZsBccoA3r9h1jjEZ29jvgd85rLDIPLUbBlz6AcnHtXyLLD8g3zzdjzVqZJBpYhGqlxn2z3NYEAUhkGeYnO+c/T2qCmLhQvowBuDkb9e9Z2KyqIVmKBupXr9qzEySUsqklsjIG4B71rsHjI5nJ5j79KxMojwh5j0AfAO47t9a2XJlDgjm5cDbc5rUya0yQsquxPXYn2qOMzczmJBgDOQME47/NSL20ibqmQRuCcYzUfZRoXVemep/tWTYkXLZzXEiTxO0M6AHGMA/IxT34V4na4UWl2vJMB0Pf5FAhW15i4YZXI9sGorVYvxNuksMhS5iw6MNvsalrsZWBkNtS2IQZZmZSACO/eh7XNEtdXsfLcYlT1Rv3Vh3FAPB/GUWpRtaXJCXMWzKSMk+/3pvKxVtz26+9WBdlqf3laYWU2f2lZhfT2WpCwvFxKFyrZ2k+V/wBqPIuTGc9aLuJ+GbTXLQq2UlTeOUfmUjfrSX0mS6sbqWyvByyp/MWJ5x70muqKH4j6i8WL8xjoCNz3rcibDAd/iouJuYE9a3VHKMnrQsMmpxNaC/4evoCoZhHzr/1LvXPbR5vwPEEiC5EckTLNAqjCuvcfBro/HJvkjOev0rnZ4l6RqFpxPE1nAXljZkQ46I4yCMdcA0dpiTaPtB7Dtqb7zqxpWoxXthb3MbKwljDEj37j9angQarH4S3d6vDy290QZFcupAxkHYgj4IqyqPkDemwOGK57dpXHXIyJtAA/bvX3G31r4pyBXsZwcH9Klg0+dR7YrGR714ZmUZ6jvXvmBAI3rrBxmZmfCOu21YJEztjrW0V3r8+AuT0GKjIBnasQYPyR4ztUDPFntRjJHnvUPLFsaXWVxtTbAmWLB2+1RUiAii6aPP2qBliOTtS11xHFbgwSmgUg+nNY9HuDp96HHTJ2+tT8kZYHah+eEb/rXCO1bZEndFsUqR3lmLG7juIFZWyCKktJjitLyQxgKszZbB2BPxVdtE1uS2lVHJ5ScU+ba4WaMOpq0UXJcoPkfxKhdTZp7D5B/mE2sXCiFlJ2P60qry/KwNBMOZXyEf8A0/8AV/vUtr0lyLXnXpH6mPwN6CNJ1XSdQ0zzPxMatuJOZu/zUr5yQPIjzSCpq1I59x5kXJqAS6hcEKXHlSdhzDoapL45GW6gku7dstp9xG6geydTR/x3xG+km8iglWdJAChVuYoR9O1FHAfBEPE/h5LPfTlpL6KXlCj8nUAknrvUVSWuy4GTu/iHazUUCmxGJwVJAA53Y4/5kjwx4gWOrQaaZGdInEZkKjJ+a6A6LxFwpJACbtVwOh+K5J+D3HHDXDN42ka8PKkikeAOycyhkY/oD70E/wCIHxGTX9f02x4bcrEilXkhUqMk7kke3vR+lFqNazFODjBBzj4MqfVNb/1F9Oi5ZigK7e2W9xLA+Lst1xpx2bHh+1N21lEFkdMFI2c59TdBW/wr4f6/w9prJrMMcsAJkeO2GGY9SXcDLUjOBuLbzgHRBCoErTZllPeRz3J60Qf/AKva5rtpNbyzYSXIZB0x2HvXD2UgWWNnPORxiP06D1vSaD/+rCKSx3fVuY8gd8YlhIOL+CRbzxC0ghCZCxlSD/feqSaxf3t5qVw0NygXmPKvMAQPbG1BuovLFdPykj2+aB76VpHEm4Yfmx3+aqtjeo2Sq/oMf2mU2stWGZyR3G4x62F7rdv1LMv0JH7VLy3sl3KF5SGPQVW631W9gkUpMwH1pladxHetIvOQ42/MoP8AWgLqVKEHOPiFrcj4B3fqcy4Hh/4fcX6xqKhEmtrRSplmkUhSPZQcczfTYV0d0rhTTdGsxFFEMtnHMc79/wDwUsPDXh3T9W4T0zUdNvruxkmhBkEUzGMSL6WHI+QNxQrx3Lx9w7pstxNOl20cuYioYFlO2CPf6VddJo9Ho9Kj7WcsAS2M4z/iedpbqdZrgosypY7AfpC/p7xuLDZzXly0pWO3hH8SVmCrn2+fpVR+KdZsW1KWDT+WUk45+i56bCldc8QXmpO0szSCSUAsm4CfABov4W0yBX8xt2z3NBXJRftJTsSZ7n0noQ0mn9S9i7EAlR2jU4T0++tkV5OTJOTgYzn5r1xV4lT6FcfhksCzlQUcnIIPcYo9sp4fKxkDHaq6ccz/AOZXqBIwFhyobG533JrvU3ijT/S208AQDWqb7CWr24wBgSqniJxLruv3CTXR9KflUdAKV2jXzeaVYmnnrljzQFSvv2pV2vDFz5vORgdaF0+o9ROT9UqmpoCP8eYcRSKw6570++AeM3024itZ5eWMuORydlyehPakZFpcsSqD0619I9WCBtTUfUPmJ888eJ2i0XXIp4hlgSBTHtrpW2ziuUnAfiA2mqlteuzRqcJJ3Uex+ParxaZxTp9xAGiuA6ldiD1ohdQVUhiAf7xb+DWyzOMGO67niZyObtQfcWsbg8oyQf3oRn1cBlbn2+tGemXKTQKwOcmltQS3UAt4jfUUPTpvp8yT0zSFkmR8E8vY/NN6G1VFxy1BaSEAzncmjTtR9tVfqEjxK96tqoAT3kDc2iuhGKU+taLEY5MKM47065XC75oJvD5gJxnNKr0QiP8Ap2puRwQTic9bsJa695M2NsmMn5/2qxnCUK+UqhgcEnPvmhzjvhWO9jEkahZo8lJO4+vxQB4bcULZalPYalmOZWHLncMPcGkC1BbPaek39Ttu0eyz83+0jsf/ADLZ6vpFvd2UsUyZVxjA+N8j6VW65tWtrtYHzIF3ViB0+auA1zZ3MQ5GB2qqnGtvqaXgNvakkAgMD1B3/ambrhlI894t6NqHctU7bc5I3HAB95A6rd2drZszqF2PXFLHw28RuHdP4i1G2unWO31ELGk52VJIycc3/Kc4JoU4h0PjS8s2k/DyqvIx5xgcuB1APXFU5ns44YIleQsUG22Mk9T96IQck4yPMvfodNXp+oofUrY9oGQjg7cHOf0xOo+soLe4k5GyucqR+oqb0BrpY47lJ3jYnKFTiufXDPHOo6bbww3Er3VomxiY5ZFP+gn29qv5oGpWd5pNpPbMTFJECmdjg+/zW9M9bu+DnbKdrGKaRUBDNuwWx3Ez69oulag7z3cfLK2S8sa45vllHX6ihWxjsILJYLW4jmjiBUFGBwDvj4+lMGV2PwRQq8EMckkixqpb85VQMn/Ucd6KNYDZUQWvVX2adancsqkFRntiVr4u4N0zUb5ry/BuSAojjdiEQDsAMZ+ayv4YcB3vB51B9LSDlnkgeWM8pQqodSB0OxNNbUbR7kNlTnOPrVWfEOTU9NtrIpdSra/iAZoAxCNtyliPfBoa0MUyWPHbntDWKGjIIDpyR7j2iW1XwpVrm2Gn3MN5bXEgVZ4nDYB68w7EDqKYninwBb6ZFY3+nxBLeSJIioGOWSJQM/8A5AZ+tSHgjwnaWMOu3RLGc3zwnJ2CR7rgfOcmrW8Vtp3/AKD1Bbvl2WJbcE4JlLbftUx0ypQ+W3Z5BxiJmtDPX9GM8Nj2PYzjX+Ku4b3nWWQYOQeY7EV0B8HNVYXXOsYaS/XIZRj1wn1J+hyKpvq1nE9zcBV5QWOBjGKtZ4Y6dLFwje3sEMry6bfwTllUkKrDBBPbmGaUVNlsfpCdCuzUtlsjBxntk8S/Ws6q2gaT/mdwXeNWCyxqcleY+lx8diKTPiF44WVhw0RZ3SSS3aHlIOcIev0J6Vp8R+JOlabAUuYDMl0jw/hzuWVxgt/tXKPjXVIr3W5YrQMY1ZIYx322pvTbamVQkL3z8yK/Q6azUK+pTcyncOeMeBidHv8ADBbTavxpqPEV1ulrAYYiR/8ANN+Yj6L/AFroz4gXsB0spYxebqE+EiVX5cKepfO3L9a5f+H/ABRfcPaNYaPpsCvKAOZc+qWVt2Of23q5V/rdu3B9jrFwDFPK0iSxsQcGE8uxHzTb/rS27DhmZAFz4MT6rouv1XWVd1ArbYFxjPA4GPHaAeocJanZXa3E88ESFArKQRuB1B70G3Gr6VbSlRdh2QZZj6QPpQNqnEl7qHre4Z1HQE7AdgKrNrlzJdrPM5wiuwQDqcbZPxWkYnv3PeeqUdLfaBdaOABgDAH/ADLPX/ihwvbNyvfIxHZMt+4qH/8A1FtLxCbBonc4wZWaNdvnFc75UXzctuM7L/vTn0OSUQj0gKAKLVU+YbZ0zpqoQofPuTLUz8Sa3qTeXYW5hjP/AMrfm+3YVIWHCwMnm3UjTSE5LMcmmJBaxRgKihRipVYwMV55u9hieOzQgsoYwqogH2reaFOXYVtKhwfes2K3ic5gbd2GSWUYb9jUKuzEMCCPemOy5oXvYIjk5AbNRsJKrHtIrqc/pXkqCNsV43BwftXscqgADH0riTTRuFm5TyEZxsT71qSHlUlmAwuW+gqTim87n9JXBIHMCM4rXhikSPMzK7DOSFwD9qydCYLa6MLJKmTnBBHsacelanFdKA+ObuKS9vNHcRB0VgpJ/MpU7fBqRikeJwykgj966VyhnD1hh8+8dNxaAghDy5OcgZBx71q3Ec3lusZXzANgwyo9s47Vh0nVo505X2aimSFGwf36UaAGGRACWQ4MCZLUhw/5Sw/iADq2Oufiscg526bow+aIbiMAgZ2IwO/61GLEyrgKFAOPsOm9DsvMJV+BzBC90tWfnjHKwG2Pn3odjk8yaJXLLJ6hyjoffP0piyzW5gaRpFVQSpYnHQ0FalZRKpljB5zhgQfzZoKyvyIfVYexkLPHM8uzcgWQggr+YAf+b0PvZRK0rgY5m5jv3G1Fdtc87EOvrGBv1NRt1AhkZSAytIMdwMb/ANaEIhgaBLlZCVCl/SeYdNj1z80N3Glpe2kkN3FGVJb8pyAM7fQ+9HBW0W9liUMJmQMf+bl+ahpI0kKyguv8MgjoN9twK4GQeOPmS8GUV404Hmsnf0loSfQ4/oaQ2n3+qcPaiJoGPLn1ofyuPY11UubGO6tXhmQP6cMDuDVNeMuB5LctIiFoWHpOMlfg1Y9JrQw2WYOffzEGr0ZB318EGNbhviWw1iySaF/h0PVG9j/amIrfG2a5t2N5qmgal58DYwcMp/K6+xq7/DHFFhrNkssT+obOh6o3sf8Aes1Gn9M7l5U+fadabU+p9LcOO49/kRpqc82Dg8uAe9bccmRy53GM1HRtj6Vtq3qBzj3oCMJORyPyipKNx17nrQ/GxJ2qRWRSQpI9QwR3rJwRJ2N9iRWfn5m2Abrv7VEwxpGnKpwO1byHIIU5xt9xW5xib8SHkClgC2enX671rysr5iDuSMbgbfr3+lbKPlemwG5P9q+CKJ42jV9gARg9K3NYmrDHG1wZVRsnZsHp26VKlP8A3MZUK2EwSc5P0xtUMo8sNzRlm5hhUODvtk/FSnLPzgh1ERTBU/m+ua2Zqb3kxM5Z9yCfoPrjrWjashmZZYyN8BsbEfFb0UKRKVQlQBkb561swkSIBgnseYYziuczeJFSG6M6gxN5bZA22wO5rOblIZlVYyvmY5j7/atwSXXkspQBhkKF+OnWvsMchKlvU2AegUDO2T81uZPxEvnEfyA5znsag7oLBK3pZcjqMYHyKIRIAq5kB23IP7nHasblXUM+HXrtWpuDZmkWIPyllwM79Mdz8UTztCYVeJB2IPT9KgHglAbEZKYxg1qw3du/JE+zqW9J7AdD9KzE3ITVrbMhu7WNVvEAwwGCf0605OEuLRfRx2136LgKCQev1oFWe0uASrKzrkAjYEr70Ba1DOWS4tn8u4h3yi7Eg9D9aKptKMILfSti4MvLGd8Z7UG8S8MpqkAaNglxGcxuNsn2NKjgnxBjvW/C3Z5JVIByCCD9+xqzcRHKMYwRkEd6efRakreLKbPn+8rRpNxch5ILmIxyxHDA7ZoxByaO9c0CK9TnQcs6/lYd/g0sLU3KMYbgYdTg9sj3pHbU1bfEsNFy2Lx38iS4ztjqaTHHkQiMdwsLMZFIDgbKy9M/UU6gBkftQ5xBZi50m4j7hefP/TvUHvCxjIzKgeH/ABncx8ZWaPPILeS5aJg7ZQcwKgAfWumEUxON965CXfD13HqL3Nqy8mfMdCeUlkOfT8kb1064b1YX+kWVyGyZIlLHP83Q/vTMMmxGXt2MX3IxdgRzGujA1tAjOcVARSjbepiNhgb0bW4IiSyvBm3ygjpWFY1U+2f3rPjavOCKJ5gsxgDAFfSPTj3r2cV8xtWpk116YPbpWvJGMdK3hWsZMHDDl9j2NcsAZIpIMgJYtiMVCSwYzRvJHnfFQ00We1LrK41qt+YDyxEE1Dyw82f6UZTRZJGKgZI8E+9LWXBjlHyO8B54SOgx/ajHh/WngkEUjbdqj5ow2TihieFuYkAiuK3etwRJbK0tQqwlqA0c0ORhlYY/Wqo8S+H9rplxLf2Ms8Su/M8S+qPP/Se1Mrh3iAxuIZjkU2Zo4p4iCAysPsas6WC6o7Tg4/aVYK2l1Cll3AHj5nOLX7S20+R7q60/KSL6XQnlGf8AzvWHwu8X9M4cW507VDItpzO0EoHMFD/yn2p88c6Nd2KcyIslo2edHHQGqScS8EOkK3dipktJzho858vPcfH9KCouupuwTg5lk1unTU0LYjBc5KsAO/yIU69wzZ8Q3eq6/bY/CNPmNzsMBRlv1qy2ieGfDWi8B6XdXJi/G6ixmnkB5n8t/wAiD2AG9aPAUXC+ocH3PD8cwaRbcxvCxAOcZyPvXrgmXWL2a7tLnnZdL5YYlcDK4GxwPipLtQSLi5Jz+XxznOYp6RRaNZpvRdVNbEls9+MEce0VHGV3ptgwhgt+aIoEzJHjPzvVa5J7Sx1OExyIyuRzFcDc/FdD+IbywmZ4rrQn1L0gDBOYz3YAd6pFeafe3urtE9nIrc3oBjwcdugG9D+qHrA4GQc88/rPR9Bodba9++76WznceDk88Zk9f2KzQJIFyMdR80sb7SHQ56irkQeHWtw6IJ3i6gZiP5se/wBfilXNo8rP5flZPTHekPqFGK57Sp3abbay98HGRyJV6Sx5XPUA9KJ7C3Yb9QDvR3rWhz2oJMbYJHbpUboyo9wIiN2ODmumsLLxBCuD7TrN/hvvZU4EkEpCxpezGInupAz+9MTjXVLjUIrkwkr5KcyH25d/3qtPCGrjSuHrazRykaZLfOTmjaHiIXMqj8sDNyue5B61ZK9dt0yVsMnbiB6LoNjapLEII3F/5yZX5riS4vZpXUOzLvkdMd6k9PN4JwFYqDjAwKY2qaJbWl5K8TpJHJuCBjr2NDxjPMMDfrQjZPIY/vPdKrqrKhtGBgY/4hrYxyqcsx61m1bRknCSInryAQO+aPeGdJGpWSytIBykhgOxFPHR+DIABMzs535VOwHz80fXQ16bCOGHeUHrHWdNp/VBP1DK7QO5nNriKwgtkbzNiPcUp01G0zgMB2q7/jH4fXr6fPeWaOTGCZYxuSvdl77dx7Vy7bSdVhuWJzyk5z1z80v/AAraRtrn7H3EolHUK9fuCAhlA3L9/P2jmuLyLyjyuM42oAlu3DnO29aZEwwGDbCo2eYtuBRlWoHvxOm0pH3hOt5zLgGmjwzr11ayY8xuXPviq3Ld+W/U0b6fqDnlwcUx3K4wRBQHrO4HBEurb8TSuYwJMgkZ3ycU/OGdeljBGeXf077EVzustSlSTZiBmnVpHFBQBJH37Gld9RrG+vII9pZNFqqtQzVagDDYwfYzqXoGpq8ayOwAOwFM38fb8uecVzAsPEiGyUJLMeXoDnpR1b+KGnPGxS8zyjJwCcfWldfWE5D5B85kmq/ps7sg5XxiXivNSg5wvON68RTWjxg8wwRXPu78V7MvkT5/Wnl4e8SNrUTy4PlI/KhO2W7/AGrK+o123hACSe3EG1PSX02n3HIA9u8sLfaLb3Ubek7jaq+cRcA6bdoyseSRclXX0sp+DVskUGIYO5pd6rp6OXbNWpdJQV+pcnEqaa7UMdm47c9pUeKTi3Q5E5Lhb6OPY59EuPffZj+lGFpxbJqc4ge3fzQpJBGCB7nPSpC9vlsZJY7hQysdmrQshE9yk6FSQpUEexpIqCu9fqO3OCPaXCn1DTwobI4z/gwy06G5hRlk5WHMSmN8Z6g5quvHXg/pWrpJPYOLS43YJ1jY/wD9tWR/GxxIeZ1GO5IrFJPG8ezDGMgg5Bp7trwRjvFii+uzepxk8+xnFTVLTUdKvZbWdWjkiYq6nsRViPCHxDktr1NHu5QIXz+FJG4cnJQn2Pat3x306Nbu3vQu8imNzjqV3H3xTW8O/Brh+Hhm3uNVsfN1C6iDuXJzBzbqqY/Kw7nrmkVNbV6lto48yysRhd3ZgP5lpJ8HB6ZzURcQmRVG+BnmGeox0rLC7+SsTNlogEYnqcdz9RvXqNkLkFsDsfanfDRLV6leVPdT4ilvHuPxEStzI0ZYf8p9jikV4pRB9Cw3qPngIAP5cY/U1f8An4BkvVhuRcIsLRczOP5e37darjxNpNtrl7bWgvI1/wAu8vJCc4cq2Qewwcb0ltFm7bycniMar67VYqc4UhjjtmY+C+GBpPDVv+JjCzugmufYyFQMfYAD61RPxe4svNS1L/K7R2EVu/O7dAX6AD/prqfLcNcMztjHfYAfoOlcj+KdXsdR4z1OZAvl+fIFwBuAcf2ovWNZTobGUZKjtA1tb0bcLg4HP+IGvBLMlg0x9TSCOVhgE5/Kfv3q4vhRq1pp2mcVx8jmO5tlhzn0kqCf1+aq1PG13Z3MdtEzFIxISBkAqcjfoD8VocJa/wAS3Oo6naIyRWNvazTyKV9SgDGze5J71WOm/ibAtjHHBBHvntJ9GpbZ6meR2HkjtBrWNS1K74tlD/xOaWIooOcAqMYoNl01NOvppW5ZpPNbk5dwD0yPc+1MC/0ufSLyYyugnMakszZEaOo3JH8x7ClxJqqRsfw4LNnHmY9bE9l9vtV5XZhT8Sv2HVeveOVLP58CMTRrq8tZvxF5L5QBBhtlb+Oz526fkA753q1fC+uT6pwDq0OpNKstnL5ltykGFkkb1LzdcjOfmqm8PcPy3jSXFxdC2jjQlpMcwHflHvnue9PLQZ7aBvwUdys0VwMAsvlls9OUE5pIdRTdbYlakkEEsAcAj57T0HpQu0j6U23Y3MNoJG7GfbvIpr28tNJvHA/lPlHqMtsK0NLmkudDtpZYG5IEPmOsIdcv/qJ7+1MjiE8O6Tw+YpJDK2ctHurKx3HWlPps+o6lZFNJQeVaurTocYKt16nepLbCUIztw3ePtdqLn1bsF+gHHHkwCstGSWSSV5EULuobq2/QYrV1DiixsSIYcSyf6VBP9KdV5FMqTTLYol1HIqxGJixw4wwQKOVvkn7UDWXDslkjsmniKUuQ0YTDfJJ/tRlGtJBJGO2Bn/idn8RdnbYFGcZxk/tOjCJgb+3atpVAAxWHn9PStGS7RTjqfYVV+BPKeTJQuq961JblFBxvUE8sknx9K8qu3WtbpIE95svPI+e1Rrq5wR1Nbg7bV7CkZrgkzvGJDPGehHxWplQ+MjpU66E5xvUa8Qzll37H2rU7BmHO+c/ev3OGB771hdWXPcVgUMpyprJ1Nwx5zWEp232FZVkLbbGvznbFa4m5ppKySZXIKnrTW0jWhMAjnDYpWDo2d/t0r0jMrBgcEHtW0cqeJw6Bhgx+yoHTbO/T61EKHEYDEMwG5Ax96gdJ1fzFEcp3FF8kIliYZIyOq7EUeCHGRF5BQ4P7wda3geKVWgBEh9akDBPStKWCAokY3xjA6YA2/SieWJipAI3HXH6bVAtbyLEsZDZUL68/mPU1EyydH57wFvLaJ5nUjlfGVPQkihWGR1aNJQqlCVBwdwdhTTm2YZG+/KcULSWhfmWSP1HdNttvY+9L3TniMq3yOYI3TRZ8xIsvysEJXckDJAxXhrGMMWUYyMtgffFTMUoS48qbbn/I3yO31raaMOMZJxvt3oQiGAwB/DSiR5QvKGAwufbahaO2juoZo3TMfOy8pOcYOCKaE8TxoCQDjJxjFD0NisPOVxlmJf045m96j7SQcyk3G3An4fnlgTnhPx+T4+lVgtp9T0DUluLc4IOGU/lYexHtXWW4tRKJFKgqRjHX65qonHHA4jEsttHzLgkp3X/tT/R63jY/IPHPmJdXo8nehww54hhwnxZY6zaK8bBXGBJGTuh/29jTQRsYFc1VbVdC1Fbm1cqVO47Ef6T8VdfhLjCx1q0VkPLKuBJGTup/uKl1Gn2fUvKH+Jzp9T6n0Pw4/mONGx3rMPzArsce1RyPmt9W2z3oCMCJMxFgctvtvvW953I6jc8xwAB0+TUTGzYXcfOakkcZrJwRJCOKNC5QYLHLZ3rcU8kDkAE9gNs/FaAPTAGa2lUZznqc9P2rc5m2jLGiMeWMtgEH+lYmkjuIpY1UFUbByMA5614jLiNTJKCQx6LgEZ2GN6+SSRBsEkEYJx1J7DFbHeakuskHpjjIyu2B2r3I0kY9QJ6kNtt8VEmYwgTSzBI1GGBGST23re5pZZyefCFMAdQc9/rWTJnjRVtiFPfJLEn1HqDitF5bxRGfLyN+dwe3bGOuazIjHAYsMZyA2a3Y/M5nUoQqjcbHmzWTWJoRI0IUuhk9RUdyQ1SpNtHEAACh9O3QVFhRHI2NicDBPt3H1rO5BKRGPmLkn9e+fitTcygBAwOCG7nv8UM31sgywTPN1x/vROzopKlSxAyNv2+KxTxK6BuVgCBsN6wTIMWMCwohZRHkkenfmrfGpLHLHGluZEkUnnH8h/71gWEK7oz8/N/Lnp9MVsNcTWxjS308OjL6/Vv1xgVh5M14g7qejvPy3KObZkXCMV6knO4HvTp4F4wS4iFjdsEniwCCd6X97cRyRpatalGGCBjIGemPml3qFlqTzrcpbxwXMLERFHBMiD+Vvr29qJptZD34gt1KWLyOfedB1/L12oa1bSIryIsvpkTJRh7/AO1LTgTjVNTha3uFMU8WzK2x+vzT15s43FOxstSVwiymz2I/mIXzJI5jDKpVx2+K3DjHQYNMfWNIjvI8p6ZVHpb+1KtZJVnaKVSrjYj3+aS21NW3x4MsNF62rnsR3EqBxRpn4XU7tHIK+YzqQcMinA2HcGm74WXzQWt3prN/wCJYxnPok6gVr8cadO91JLEcM8KgfJXIAPsD0pMcPatdaNxXYyTf8C55YnGclNsEN/audMS7W1/GQPkcw3UKBVU/zg/btOh0E4IH7UQxy5+elAUbDIIO1TkU1T12YiyyoGHMchx/StkE0NxTbDeplH5vemtdgMS2VEGbeM/pX7vX4HevRAomCzyQDXggMCCNqy4+a+YrWJkxhRy4B6VpyR7dK3q+nYGuGXIkisQYLvFgdOtQMsOc7UbyRb9KhpotjS6yv4jWm3tASSEjO3eoeaEEHG1Gs0O31qFkjwelLGXEdVvmL25hZW5l6g7YpicOcR4b8POd+xqBuIQc4Gc0GXUDqedTgqcjFZTa1Tgid3UrdXg/oZZrULG1vbR4pUDxyKQR7g1Q6LgniDQtcudM/EmfT7yTmtXbdo87lW+g/WrI8NcWKJFtbpsdkY/0pj6pbLPCGQ4ZfUpqz/6dqA4z2MqyepReoLEAHnnggyA4f8OODLO8tb4aZF+KhAxPvzE4xk7700G4f0UTzzxQRxyzAc7psWx7460sLHiizWaO2mk8qViVUNsGI7Zoqt9QWFndmzHnrnYZo7/RZdpUESRaLFuNlR2sDnK+TBzhKaO243FpNE6hS2HKHlYnoA3T7Va3WNG08jzPw8XmDcNyjP61D8L6pYLaTc2GfmJUDf0n4qJ4g1mYAiKMszHAHMEXfuxPQCsp0ddenbnIJyPf7Rbr+sam3WhnXYUG36c8/wDmB15NaopikPfcAdaSXEUGjGRJY7aNZE/mxv8AenjDZW7xFmZJHP53RgwB9h8UsNc0m2WcknOexNVbUdLt9UWPgZ4xLz0rU12kJtbt59/tA06fwxxDaG2uYlhmIwHAwf0qj/HHAWqcLaorMOaBzmKZfysP7GreX8MaPmLYr0I60I65ql9eWqwXB51X3o//AKXuUMhAPn2izV3GvUMpPGeIl9A1vUL20CSIyhTgEg4b5FWp4a0959NQsDgSEUjrICSUJj0gbVa7w7mhmsbuzYjzEcOo7kHY0PdpjW9QYyx9N1grQumeOMfeEyaTFJEEZdsdfasHD/BUGoXEhnnkCJKVMaDBIB7t8/FM0WwUjFFOjmO35sYBLHP1NH6epWvVT25494N1Xqerq0hamwqSwBI9sGGulaJp1lEkcNtHGi7hVFHUbonTAFBYv1A69K0P8zdnAHerUKkRfAE8aue+yzLMzEnzzDm/to7mAgDJI2qjnGHhXb+dNPBEArZYoB+U/AHb+lXUtLokAGtu8WF7diQCcfpQeo09Opq9NuR4I7iZRbfpr1tTKuPjuPacYuIOD5bYn09Kr9qenMgYcuMV1q4w0yzkWU+WAd+gqjXE+ggc7Bdu21ee2pZo9Sa2bIHYz1rSXjWabeVw3Yj5lNOUCQ83bpRJZyqqA5rZ1LS+WQkdd6G0Z45FQ+9OkuBGRArKTkgxs2H8UqBk5pmw6RM0YcA4G9BWhwoSjEZxggU6JNVhhs8bZx0o5Tkc+Yv2gMfGIktTZlmIcnK9Kx2lzO9oYFJxzhyB3I/2qN1e6824c4+afvhTwdFrztNO+Io3ClR1Y0ku6czXq1Q5J7S10ddrp0h9bJC9sck+wkr4ceH0/El9zTFktYsGRh1f2UfX3rpdoegabpFqlvBbCKOP8tSHDej6dpFvHFEqomO3x3NTuqT27IioeY56D2NMV6UmmQt3fGc/4Eqj9av11p3cLn6VB7D/AJmRNaEYIIBA7560KapryKpKgDPUmk5qVxqUc8w9XICcexpT3+s30jeSgLMThVHUk9qAbqVirgDmXTSf0x6oV94GRkw21SWTVLk28OHdzkn/AEgdTU4lrDaRmNEwO49z8144V0C4sGa4uJi00i8pQflQdcfJ+aNr+0WZSV2bHT3p1o67BWXsH1tzj2ibV20pqPRqszUuPqHYn3irnsnvZBAoHqO5PQDuTR4ugW2lwNFBdPMhweYnb7DtW3psCRoTjDk7/boKlJpE5MUcVB5Mit1tvFSn6AeR7n3lUNZ0d9T4h0q0uOV4hfwyqWGdozzEH61Za7vo1R+XGQxFJvisCNoblBhoZA+2x2NQUd5qWqXNwtvzLDJI0rPnfkbHKg+fc0A+FJHvLTZWt66W7AA2kMOw3A/5hDdXV0NRlmRsIyAddiRUHLxSIJGDx55T1HTFa19qtpb25j594yRt70ujZy3LqXLIkjY58dM96Xh7AzbW8xx6GlYtvTOPbgmPPQeN7vWLbU7C2W4gi5AHlx6ebPRc96ire94Y0vnWe/ijLMC7vIMsfnFDl7eKtmLSzHlwxjGF2Le5b60LW3hhqGvW0MzciQSSMBKxHUdsdd+1Md9VfJyWxgmcUdM0xS1rbvw1TsMJ3OccFj/iNq31ttYvpdO0+3aSIxsJLkNyhV7sD/SkHJ4XcCw3Fytuz295uAbh/OjZuv8AN71Z7StW0DhfhOwW35BPLNJHeHmDMTCMd9wPYVSPiviGC5luJoeYAyklm7k7AY9hQ66gu5TblGHP/mMtJ0fT6hr1VGqSshVc8l2U4JIPERviJqepaPpzaT5fl3k8g5+QABY1OeYY7NjalLLxJPZyXqCRI5ZoUW4YjAkQESKPrtv7irN8caNcLw7p+sXULTJGq5B2ZA3QFj/IfftSX428O9N8uK4hmku/xKLJPMkgeESdxGVx6B2zvUBs09NlSMMbyQvyRzKd1kvpdSSbg4ChVKjAGOMRc2SaxxXLGUlE01zccltaqR5tzIx9Tnssa92bbsKkJOGr3RuJYba7SKWVOUy+W4CwkH1LjfPLjf37VB2Wk3mn2rSW1zIgPpIQYO24BI6ivMd1dKoW4vLhhz83KhEW52JyBnpRzhiThvpxjErB6hohty31dycE8yxVlCmmssdut1fFZmzG9v5EIRt1I83lOCDnJFRF0LzRNSiklSCIMQ8SmVZiq56Z26VN/wDomwn0nRtVujqFxDqFs7NI7vIYvJbyznDZZVwN/aiLTeGOF7mzntDY28cwy0UwUEsQM7s2Tg0q0xoodtp3c/6gxzye/wCkYaqyzfVqMEbgAreDt44zLI6xwBDxXwfNdho1aFY2WYkZBPQAd6qfeafLw0lu0sfMjOA0iDC/ce9O/h7itrCGCzcF4ZAVOD+UKBinBPpFnd2Ui4WSOQZXIzg0W9Yz34z2noJru2klv94I48YGR+krFLrRvJJCYljTC8jK2efbdsDp9K+RCLJYXGCeqlsf1pgS6FZAFRGsbqcDAwNqT+o28ttPIjjbO30qZVQdlxHtCBVwFHzLXtPLL8D2Fe0THUb1jjIAxit0A9qq88bE+qvevX23r0M9tqygb1kzM8Bf/uvfLvuK+8tZCD0xWTmeSB1xWBk5s7VtgmvvKCayakI8OAcgb1FuvIciixkzmtB4Mg5UH4rJ2DiD4QdR1zWXk6bbgda2GiZD1296zpynrWpLNRYuZQCO9YXgbfHYVMBR2rHKcDP9PmtGZIgL5ZBGxHQ0wNK1ctiOQ/rQYV5hj4rEI+UDBOR3rasVOROWVWGDHjsRlTnNaEoHKD39hQhpmrkERyfY0clY5V+MdPemCsHHEWshRue0E76AiJ8hix6BPzHG+BmoYzFwCsTK7Kp5H2Izvj7UdPCC5bJzgADOwwev1qGuEb+I3IMAjlOdz7/TFQuknrftALULETIVZR8+32odil/CqI5WJXOA/YfX2plcg5WB3IyenuaEyY7mBm8vlHOyEMO4OP0NAOkZo/iQc11G+FyjswyijfODgn6CoW4Sc3ibMo5D6ub0kZ6EHv8ANSaWkdlkMB5aklD3UMdx9KkLiGKWMFj6cg9evcUIRCwYGvDhW5VwTu2fzNy7b4rRuoIpFcYAPKOYH2PvUzeCb8QphYHfEg6ek9/rWC+WRXBxlCBzYGSc7VFyJNmVD4z4GRkknt4wUP5kG+M+1VFZdS0PUVubZipVvsR3B9xXWOXTYvWFBAIX6bVWnjPgYSJJPbx/LoP6inuj1mPofkHjmJ9Vow31Jww54nzg7i+01u0ByElTAljPUfI+KcEbGubkkOo6LqCXNq7KyHO3cex+KuDwdxlZ6xa9eSdABLF7fI9xU+oo2/WnKH+JHp9Rv+h+HH8x7ox+tbavsMnsc1AxS56dKkBIew6UDDyJMRyhSAK3RMPT2ochJB/qK3SpByM77nH96yckQo5hnIY+2KylnJBVRkH1c3sPaoSGb0DfrUqH5jv0FZOcT5lmZ3CBh0Kk4GPfpXoXcIuBEsoBUFmBGRv0r9cMrDkMrR5OAw757V4EcasWYhAQFDncnHuOlbGJzM6zSufMViFJwMrysMdTv1rzNc3WSYLfzC67HopI9zWaaTnRo3ZYiF9LsQx/Q1sQyxiVWiLOrpgYO23cL/U1v9JqaixPyxzSRAT8pBCnmwTvufapRXuR5YcojEbDOSTXsCLzlQxMzEZLgbfIzUotujhSRuNwT2+laJmYkVI+0kPMSTjG+Dv7VhWbB5ZJMlQem2aKvwvMisQTyHHMR3NR09hDzeZ5WXxWpkhBDbMi8qgEHJb2rQZWVmUgkZB5htkVuyLOSFJwMbBRW0uBHkksSOhG4rJuaTCJyfTvytjuSfmtFVMcQzghsDGPy1tnlhAl8s83cVtmPmAcLj05C+5rU3Aq7tJyFu7UPFcRuOXH82OoI9qsdwjxfFfp5E7BZo9nU7HPv9KV4GR8sOxz1oYu9InW5F1any7lOj9Aw9mxRNNxRh7Qa+hbFPvLsBs96FtY0hLtA6DllTdWH9KCuEeLVv4RDcARXCDDxk7gj+xpu83uPvT8enanxKviyiz2IlV+KLa9/BmSKMme2PM0Y/8AkjOzAZ79x9KqVxsskaQTsRHE0nNKQpY+b/IBjpn3rppq+krdx88eFkUbH3+tUh4m00v/AJlp8kZDFWIQkb/zLj236VXrlbTaiuzwDjPuJbdLamp09lfY4zj2MG+EuNOLtX1ewtrW5hCJFIJ0mQ8oCYwQV35vYGrrROQa5x+FDXdpxwqTDlFxBJGyezjfH1966LRgAdKP1hBtUhQBtB4GIDp1wjAsSdx7mEEUgyCDRFFJjGDQbG/LjPSpiKYfrUVb4nFtWYYqwx96zjGOtQkUm1SSOppvW+REdlZBm13+lff2rx969bjI/wDqp4PPW9ecivYryc/rWETJgYDFajx5Ga3ydthWBunzULLmTIxEHJY87VAzR7dPtRlKMUP3Ee52pbYkcU2QNlTGaHLqLIzRrMo3oSujyg7dqWsMGOkbIic14JChYDB7VI8M+J8KWtzBdsXNsjNzDckL2x3NAvGGpmHb2Gd/iq16fruhNq/4maSQGKQecikYON+uNqaaU2KmQMjMAvSmx8M2044M1uO/G2XVZruCxtDbIGBV2/4mR3z2+1XF8LuLE1jgZDe3HLc8xaTmO7gdDVaOLJJdc1IXUcdpcWE4UwjkVZlI7Hv96j4PxlvcC2gfmlcAeWh/YU3ttRKtw7jsIr0guGoGWJH7dpdybxVsNNPLAvrXYuNiQO2T2oRufGSW6mAeIyIO2f61Va64Y4jS7EU9rLHIwyEfCkg99zTE4f8AC3jvVLuCC009eaQ4XnmVB9e9JDfqicqcHvwJYDQn52rAxzu2xw//AKu31vNm1so0A99yal5vE1NSIM0RjYjB5TkfaoSDwH4+86aKWSxieLPOPNZ8Ad8quMVK2ngxxCzESajaJv8A6XP+1R3N1Fiu7cc8jMl0dtFdjGp+QOcjwfbMnNM1CxujhbhTnflJwajNZ5FBz2rDfeHF7pSGSW9jYLuWjBBBHwaFLmN5rcIssjuNiSMAim2j1VyDZbWQfeJdelbsWVwTnkCDA1TyrnC7YPamDovEstrfxzxvyyAjvsfcH4pO3lhcQndSM96gQ8sRHMTR9tS314z9oFp9RZUTjkHuDOpWmca2F7a8xUiUDdem9YbfjCP8WyyLygnY9vvVENI4oaCIByeg39/rR0vG1mq4IUn5qu2JrKmG1uV+JZks0t9BV8AHwZ0PtNTWaNSGABA6VsS38SjlQgP3PtVaeGeI7W/it2hkHK3pIz0buDVgY9NtplHLcJzAdQar+s1XVblKrke/OIZptH0ukqzck9jjOJN2mqyxkCVwfYimNBeR3EGC4bbqP70jbjRdQX/hTofqcVoR2OuwNzrdRIfhiag0XUep6VgGpdh+8N1PTOl6tcjUVKfkYknxSFYFFAYHrtVf9V0iOWFsDYjBHsadl7fkx/8AuCvmDqV2DUur6YMpKbAjcfSn9pGrXeVIb5GDIq9ElCqtQ884OQfkSifE2gT28rkLsSaRdxFyyqCPy9a6FarYxXkJ9Iz2qrPEfCVwjs0aZPbFB02FG2tBL68ZxBvTtTWCLYjp3qJvNcMkuObAz/Whi70zV4EOYXAFAcjypJhiQR71YK7Cw4IiGytQe0szaW1tNbHuxFPPwavp7fX7uxB5Y5Ar5PYg42qlmk8QNCxUtsds/SrQ+Gss0+vrNECWWNzgd/bNTPdZWu5eCOxgVmmqtTa3uO3HmdWRdpIqwxycxxufapy000IOrN8k5NUzt+PItN1gwXcbwM/Rz0yf96tDpvFUN1ArKwIGBke1cC+y4He5z4E6p0ddT5RQSOM+02dWto8FAMk0kL3RVtNStbgMPTKCSfboadN7I/npJnKZGaBNdRXMgzkHoaQ3NWH3eVIInpXTnt9MVh/psQhv14kkLqLl2bP0NZY71SuCDj3pY6SxikEZJYMTtRdPEqj0s332q06fUm6sMB+kquq6YKL2rLbvY4xNqW5dJRgghicEdgPf5NYLm8/hkkH69BQdJc/huaQQhmAOC2+KTGsajqt42GkflJ2UdDn6V21jg9uPmPNN0RLsE2Yx3OIdaxeWryESyKYxgEK3qyfatzQrWCwR5IZy8cq/lxhcdc496UWjcJapqN8Lme4/DWsbEcpOHkx1G/QfNMKSx1bSJ5YjbvLaEcyyKOYKfk9s0OzZIJHEd2aShV/DrcC687Txn7fM3bnh7QZ2ZowY3O5XOQ2PrQzxLxFYiB7VoJLV41AUPGQnp7qw2Oaw6hqBWMSIcd6XOoXo1KJEndsqxwM7EH3oV/TB4WdaXQFrq2ZmODzk8j3hBpeoWV2vNHOvN3XuKKbfiu909VgGoFI1PMiA+kHOxGfmkaNLks7wYye4+1G9rpwvEnP4gwmRSGBAOe+Rnp8morTuXiO+p01ou5TurOCcjkRZahxA0uqX13cTIeZgJQkY/P742G460H372l7yJbBliUKzu/VnPXHx7UqL3SONpNbuI7K3kntVn5pCgBXbYb/vTPj1vULuV457cR3CuDJzru2Ns9t65oUiwEOCPbMCouf8XUtbnHn2wBLZzaf/AJnwJdWN6vKJbQx5AyAMbEexrnx4iwWPBkunWdtLMyyQqZgxIPKw2b/er/adqkWq3Ftpv4pYppIWkEed+VB7fPSqLf4gb/Sb57GHnI1O2HkSR8v50HQ59x/SmGd1ir3A5IlG6xXhnVlALFmx4Gfb9ouLe+DQzRHZZFDLj3G+fpimZ4Y8BT8acU22l21zHDzczyTyAssaKOpA65Owqsuk8R6RZ8OvbT6bL/mEUx5bkykKIm25CnuPeuhn+GW1vLnhnWr61TEwuYljkGzZiBJx+tEK2a3JrIIbHPn5GJR9PoFt1CqX2jGcnsPHMt/rWo6hoNrp0epaKF/CSXcE1zbR80UrMqsW8tfUp7scYPWq0arLwze3hkt1jl51bMkLcpRux+Mdwatbx3x1b32naCqw41A3MnnIBy8pjj5Wf6YO36VXOfw+tdd1JporuK1uiuUfJjLkduZdv1qktox/1UW5dQFH1KcbvGMT2Xpyoel2V6itAAzb1bJAwc5B5ius9HlTVdNdRGzNcrH6zhSJAV3ParSyaPqGkyCKZSpIzjtiq98WaVeaZpn4eeQGWF4w0isDkjfII2p2cH+ItjqOhxWeuSn+CuI7v8zKAP5/cVaN3IbPbgiN7rGbS1soDJuIIHJwexHvNa9sEkYyKvfNK7iTh38dbZjISQEYNWdFrYNa+dBeW1xb7HzopFdP1HT70keLOJtC0yLL3MbtkYRGDE70yXYRkEQLSapjaFAPBxk/5k0ijG/vW0uRWAnda28dPtVLE8vE+8prKDjvtWNQMCshAwdq3MnpcHt9Kydc7b15Cjm/Wsmev1rJqfh09q+4B716XofjNfG25cVk1Pu+M96+BcnpWUD/AHr9knBzWTJqtCDnIyPaoZ7cxj0g4ooA6V7dVwdq3iYGxBNSOma8uhyK2po1SQgbV9U5UGo4RNMINyOtfmPQcprbQDH6175R1rUyQ7xMcHpiivTdTMbLHIduxqIfcD71pOoNdKxByJhUMMGN8HnwykdN/pUXd28MjIGk5WDAqc7kj+u1QWj3UzYUtkb1PXNvHJgnPNz+lu6kjGV9qYAhlBiwqVfGZpSw42z0O49xUTNHlTycoO253H3ogicyW0bnq2c426VGzKAHH/ITULgQmtj5kBeWcbEgKpDe56jHal4mUYx8uVTJA7imuhDywggH0E9O9Q1+qZxyg5IFA2IMZh9dnODAlhHIfMBH5Tnbf7/SsDW684k+MZ/tWxe2sUNxE6ZBJOd+vL0zUnKoLx/O360GRDQYIPKy8iuwDMcAY23+aHL+NAvmBHk5AcqD2bajCQFQTknOOtDM87x30sYwVMIbB9+bFRjvJe4ldeLODLe+he6s1DZGWA6N7kfNU1urS/0jUFubYtG6Nnb9wa6oyRImOXYFPyjp75qr/H+kWKuswTDSfmHb6070eqYHYRkGKdXpVYbhww8zJwbxna6xbgMQk6DEkef/AN4e4p0RkncNkdq5lXM82m6mk9rI0ciPlSK6A8OXs13pdrNJjmkjVmxsMmp9VSKyrL+Vuw9pHpdQbAysPqXufeMFc4HM3fJ+ntW7JiRF6HFRsRyDkVu5PT60FD57QsJTkjHwOn1qTim5gcnYdagFiWN2ALHOOpz1+tb8KBVOCTgbE7963OIQh1bqACD6Sdx9a2Vbyom535gMsSe2P7UPs7RRuQc4xsd634nYpKe/WsnM8ebb3Em8YdWAAZkOPV03qfj81VIjwrAYXbb7VBuckKQCM/8AnSpRhiZsE/lyD7fSt5nOJNwZEZLvlgOwwNvis0V2olCsCGIySQcb+1RkEavbwE5/Nnr7VsSSu3PnHpII2rmbhtaX6xSFWKkMMMp7j6V5uHgy+DyjPpBO9AEuBZmQKOZgc/O9YY2aTzec58piFH+9d5OMSPA3Z9xPM8l7Czs7ZbJwF2AHzWzau7R8zKSe3eshkdyCxz6sY7YqStXYDA2GDXJPE7xNR4fMC5GR81vJAF5lwMHfFbTqFC4rbVAevauMzrE1YvJcch6d8bb1tER8mxJx3r8oGRt1FZHUeU25G2M1qbgLfxR+clzbvyzR9GU429jT04Q4sg1KDypMrMmzK2x+v0pI3MaxXARRsTuTuajNSLWeoRTwMUkXAyO+fejKLmRhjtAtRQliHPf3lvda1RNN0u4vDC0qQIXZV68o6n6CqIcQa9pPFtxb6xpV00bFPw8sZADo0ZyG36qw2q8WjXL3emRNKFbnXDDGxB6g/FcmILC10PxBlsrNOWGe6u1YHchVY4VfYDFO9Qq2aOw+QMj9OYk0LGrWIP8A5bT9jxCq91MaVxRBIbZCs7xTGRQeeN02OT09WN66EQypNGkiEFXUMp+D0rlH4q3U8VxoDxuVLiTIBwNiBV+PDa+u59HhSWUsqwxlQe2R0HxQARn0FNhP5Rg/viOLGRNbbWF7n/GY6ufc7VtxuawYyAc1Ax3Mv46WInKhSR77DNLt2CPmEhNwb4EYUEvTJ6VORyr1zQHZzPJErHGT7USI7ACj63OYrtrEK42zjvWcfXeoaIkD71MJ2HvTdGyIksTBn7Nfjk19bb9a8k/3ruQzx1r9g+1fK/E74+KydTA6k1DTLse/WpttqjZFBB+9DWDiF1MQYGXKAHrQRqBwjHFMK5UEmlxqv5TSZxzLDWx2ynPiFcoqMztyqBuT/SqgcO6T5N1dXkxPkSuWVT3Huasj4nRLNd2UbE8pkJIHfFAPDtlDqGtRWsxbyix9KnHTtTmk7KPvAzWLbxnuvb7mDNxdatc/wtMt2VQfzdD/AOfSm14e8P6/puqyalPp8t5c8o8qMrhAw3BPMQT9KtVYaLplnAiQ26KPpv8ArRvYqsbryqB36UvOuOCqoAD5PJjdemAMHawkjkAdpU3i7i7jjU2jt7qxW38pjy4UK+T2z3+lFHhz4r69wzq0MlwJHVMryyr0ztkZ71Yrw8gttX4v1O2vreK4hljPMkihhse2ehoC8VOGdL4f1hLayVxDKhYpIecD4Ge1CnUOy5JPBwOZsAFzUScFSceJb7hzxp0O/F60y8s1wBjHsO31qI1TxE0jy/Kjy7Z7bYqg/DYFrqFtND6SHHp6qftV19R4f0y8uVuXj5JHiUtyYAJx1qevVWjIJzxF9+lpqIIB5+e0UfEHE11foUQEK3X3rU0WAcmSu560U3Gk2cUjAKTg962LW3ijcco6VE2qJzwcztNMvf3g5qekCWInk3waReoaJMshLRkj3q2StzNggVpXVnbvkFBUlOusQ4xxMs0iNz2lOjYzcxHKazQaPdSSKORsVZCXTLTzPydzU9bafagbJ0FMB1A/9sFOjIHDxHafNPo0nNGxGMFgT1p5aJ4qaYpC3EhiPuen60guKXZJWC7A52pOIokU83epStdv1FcH3EEU3oxUPwPBnT9PEDTJI+ZL+JgR15xUXc+IFkY8C6jyOo5hXLmZeXGGP61HSAnl9TfrUf4Xn8/8ScW2D2l+NW8QLYuSLhGx7NnFAQ48luJeRH2981T9FwuMn9aM9CUNeIDUpqVVMYVa7UgBQ2BmW5sddJADHb3pg2n4K59RCtSee1iSzUjOeQd6GrLVLyK6VVk2qpMMuT8xoWPGY8tc0KymtGPKBgGufXFWkmG+cKOpq9Av7mW19TZ9NV34qtYTKSV3PejNNaVfiC31hllb7LT5JJlVcs1Xf8GI3sNduFkZR5tqypn/AFAgjFVr0qCOOYlRvTba5mtPJnhcrIhBBp4xLqYjsQY+xB/Y5lhfFi2in0tZkIMkb/Qkfalt4f8AiRLZslpdPlTjlc/3qC1zU724ty0khOVzjtuKrfIxSZgpxjcVDQDYGQ8eQR4hbf6e118jkGdibHii2uoMpICCP7VBS6y7ZRt8dDVG+Ctf1MrymQEdOlWLsriWUZY9jVC6qt9d+N/b+Z630BdPfRv2e36GOPTryLymyOVuY5PvUjc6jHHESzocfNR2nEJp4cKObPcUSNDFNZ5ZFzjsAKuPT9ZYNKgKjhR8RVrtPV+MducFzkZiou9VV/5WIzuSNsUu7vio6BrcMs1lI1sw5oZo2UnmHYqd8Yol14mHzSv8qsRn4qluoajeX1y8s8pZskDsAPYewrq7XPtYlRgDGI7tp09GmUhSd4Iwe0aPiJ4iTcR6j5iq1vBkAKpwcDGScdzV2/ALWNO1nhaXTLq7M8xEqDzG9fl9h84ByK5NX/8AwlbJyWx1qZ4a1fUtP1m0ktbl4ZFbZ0OCObb+9JqdXb6ysSduTlfBlV1NSX6X0R9OANjD/aR2MvPxDprWl/dW5/kkZcfINKyaHyHE3KDy7hSNjjtUnbT3TQX19LcSzTRm33kbmDGR/UWHc1PcVEW+lTSRqoYGMjIyPU2DVg3Ax9XqfTdVbJO0ZI4+/wDeatjfQahZG4Fu6BWxIpUnk9t/b2rBrEEK6bM6cxXy2/Keu1NteG9CubCGQ2McbSxKzGLMe5Gf5SKpj4j28+nXc1rb31yIxGzgGTJ+h23H1rlBzgyDTdQDIQwbj+Yx9B4lYcPWUEccKqiSAuFw7B25sOe5U5wftQ5dMJJOclWbP5iN9+2aXvDN5KeEIJyFZxG+xG22T0rLdavdNwtZ3AVElmjyzKMYySNvbpRKqoY4HnEbl9JoqFs9M5K5OOc8Z8wf1DiC60DWV1Kyija8wyc7DPpI6f7VTvifUr7UL24ubpi8rOWZj3Jo74rv7tNInkWUh+nNnfehfg7R7HUbPzbtWmLMchmOP0FOKPTrDOVyTxmeRazVarrPUFVdqKAdqnsB+nmQWreRdadpt6FAM8JSX5aM4Ofmuk/+GfiKysuFJ7GCUEwXTtMpO/8AEA5T9DiqF+IdlaWOm6dHbQrEgeQ8qjAyQM05/wDC1bpc8YaoZCxC6dnlBwCTIOv07ULYfoYgkc5EOZVp6ga3UNlAGI+2f8TpPxLp1lqXFmlvE5QmyupnK92yqita00iD8QFlvgijOOZcgsOgOOxrahQDja8A2EGljkA6DzJd/wClK7Wb+6XViofb2oYIjqGYfEu+lF7jZXaVAQHkZ7wk43s9OutKeJZUEiYO2+QPaquQoVE1jZSKZbmJ8qQMlR1xnoaI/EPVb2CLS4YZPL/GT+VJIv51XG/KT0JpJcJ6jcrxNZLkYVxGM7nlzjGfmuTVtXgzr8WakNDLv5HftzPdnwJc6XqFuVvb2C1llAngDcvLn/TnbHtU5r/AumHTpHjke5iSRS0krYccxIAK9/0q4mvQxNpRcqOZSpU9xSIurSC6hLygszNktncnNQbri2fUMn0yl7VsLEhWwATntP/Z`,
+  `data:image/jpeg;base64,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`
+];
+
+const app = new Vue({
+  el: "#app",
+  data() {
+    return {
+      loaded: false,
+      currentActiveSlide: 0,
+      slides: [
+        {
+          headline: "If a building becomes architecture, then it is art.",
+          img: img64[0],
+          color: null
+        },
+        {
+          headline: "Simplicity is the ultimate sophistication.",
+          img: img64[1],
+          color: null
+        },
+        {
+          headline: "The link to this Dribbble shot is in the JS tab.",
+          img: img64[2],
+          color: null
+        }
+      ]
+    };
+  },
+  computed: {
+    nextActiveSlide() {
+      return this.currentActiveSlide + 1 >= this.slides.length
+        ? 0
+        : this.currentActiveSlide + 1;
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.loaded = true;
+    }, 1000);
+    this.slides.forEach(slide => {
+      Vibrant.from(slide.img)
+        .getPalette()
+        .then(val => {
+          slide.color = val.Vibrant.hex;
+        });
+    });
+    this.$el.style.setProperty(
+      "--accent",
+      this.slides[this.currentActiveSlide].color
+    );
+  },
+  updated() {
+    this.$el.style.setProperty(
+      "--accent",
+      this.slides[this.currentActiveSlide].color
+    );
+    this.$refs.aside.$el.style.setProperty(
+      "--accent",
+      this.slides[this.nextActiveSlide].color
+    );
+  },
+  methods: {
+    incrementSlide(val) {
+      if (val > 0 && this.currentActiveSlide + val < this.slides.length) {
+        this.currentActiveSlide += val;
+      } else if (val > 0) {
+        this.currentActiveSlide = 0;
+      } else if (val < 0 && this.currentActiveSlide + val < 0) {
+        this.currentActiveSlide = this.slides.length - 1;
+      } else {
+        this.currentActiveSlide += val;
+      }
+    }
+  }
+});
\ No newline at end of file
diff --git a/vue-slider-ui-interaction/dist/style.css b/vue-slider-ui-interaction/dist/style.css
new file mode 100644
index 0000000..5d6a3a7
--- /dev/null
+++ b/vue-slider-ui-interaction/dist/style.css
@@ -0,0 +1,384 @@
+:root {
+  --color--primary: hsl(0, 0%, 100%);
+  --color--secondary: hsl(0, 0%, 90%);
+  --color--neutral: hsl(0, 0%, 1%);
+  --color--background: hsl(300, 3%, 15%);
+}
+
+html {
+  font-family: "Inter", sans-serif;
+  font-size: calc(95vmin / 100);
+}
+
+@supports (font-variation-settings: normal) {
+  html {
+    font-family: "Inter var", sans-serif;
+  }
+}
+body {
+  display: grid;
+  min-height: 100vh;
+  background: var(--color--background);
+  place-items: center;
+}
+
+.viewport {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 30rem;
+  width: 95vmin;
+  height: calc(95rem * (9 / 16));
+  background: var(--color--primary);
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+}
+
+.nav {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  left: 0;
+  display: grid;
+  grid-auto-flow: column;
+  -webkit-box-pack: justify;
+          justify-content: space-between;
+  padding: 5rem;
+}
+.nav-enter, .nav-leave-to {
+  -webkit-transform: translateY(-2rem);
+          transform: translateY(-2rem);
+  opacity: 0;
+}
+.nav-enter-active, .nav-leave-active {
+  -webkit-transition: all 300ms;
+  transition: all 300ms;
+}
+.nav__brand {
+  width: 3rem;
+  fill: var(--color--primary);
+}
+.nav__list {
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 15rem;
+  -webkit-box-pack: justify;
+          justify-content: space-between;
+  padding: 0;
+  color: var(--color--neutral);
+}
+.nav__list-item {
+  font-weight: 730;
+}
+.nav__list-item svg {
+  width: 1rem;
+  fill: var(--color--neutral);
+}
+.nav__list-item-link {
+  text-decoration: none;
+}
+.nav__list-item-link:hover, .nav__list-item-link:focus {
+  text-decoration: underline;
+}
+.nav__list-item-link:visited {
+  color: var(--color--neutral);
+}
+
+.main {
+  display: grid;
+  grid-template-rows: 2fr 1fr;
+  grid-template-areas: "headline" "nav";
+  -webkit-box-align: end;
+          align-items: end;
+}
+.main a {
+  font-weight: 730;
+  text-decoration: none;
+  color: var(--color--primary);
+}
+.main a:hover, .main a:focus {
+  text-decoration: underline;
+}
+.main__slider {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  width: 70rem;
+  height: 100%;
+  -webkit-transition: background 200ms;
+  transition: background 200ms;
+  background: var(--color--background);
+  background: var(--accent);
+  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+}
+.main__slider:before {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  content: "";
+  opacity: 0.1;
+  background: var(--color--background);
+}
+.main__slider-enter, .main__slider-leave-to {
+  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+          clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+}
+.main__slider-enter-active, .main__slider-leave-active {
+  -webkit-transition: all 500ms;
+  transition: all 500ms;
+}
+.main__slide-image {
+  position: absolute;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+}
+.main__slide-image-enter {
+  -webkit-transform: scale(1.3);
+          transform: scale(1.3);
+  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+          clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+}
+.main__slide-image-leave-to {
+  -webkit-transform: scale(1.3);
+          transform: scale(1.3);
+  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+          clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+}
+.main__slide-image-enter-active {
+  -webkit-transition: all 700ms;
+  transition: all 700ms;
+  -webkit-transition-delay: 500ms;
+          transition-delay: 500ms;
+}
+.main__slide-image-leave-active {
+  -webkit-transition: all 700ms;
+  transition: all 700ms;
+}
+.main__headline {
+  font-size: 4rem;
+  font-weight: 730;
+  position: relative;
+  z-index: 1;
+  width: 50rem;
+  padding: 5rem;
+  color: var(--color--primary);
+}
+.main__headline-span {
+  position: absolute;
+}
+.main__headline-span-enter, .main__headline-span-leave-to {
+  -webkit-transform: translateY(1em);
+          transform: translateY(1em);
+  opacity: 0;
+}
+.main__headline-span-enter-active, .main__headline-span-leave-active {
+  -webkit-transition: all 300ms;
+  transition: all 300ms;
+}
+.main__headline-span-enter-active {
+  -webkit-transition-delay: 700ms;
+          transition-delay: 700ms;
+}
+.main__nav {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-area: nav;
+  width: 30rem;
+  padding: 3rem 5rem;
+  color: var(--color--primary);
+}
+.main__nav-enter, .main__nav-leave-to {
+  -webkit-transform: translateY(2rem);
+          transform: translateY(2rem);
+  opacity: 0;
+}
+.main__nav-enter-active, .main__nav-leave-active {
+  -webkit-transition: all 300ms;
+  transition: all 300ms;
+}
+
+.social-links {
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 0.4rem;
+  -webkit-box-align: center;
+          align-items: center;
+}
+.social-links:before, .social-links:after {
+  display: block;
+  width: 1rem;
+  height: 0.1rem;
+  content: "";
+  background: var(--color--primary);
+}
+.social-links:before {
+  grid-column: 2;
+}
+.social-links:after {
+  grid-column: 4;
+}
+
+.aside {
+  position: relative;
+  display: grid;
+  padding: 5rem;
+}
+.aside__nav {
+  position: absolute;
+  bottom: 0;
+  left: -10rem;
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+}
+.aside__nav-enter, .aside__nav-leave-to {
+  -webkit-transform: translateY(2rem);
+          transform: translateY(2rem);
+  opacity: 0;
+}
+.aside__nav-enter-active, .aside__nav-leave-active {
+  -webkit-transition: all 300ms;
+  transition: all 300ms;
+}
+.aside__slider {
+  position: relative;
+  overflow: hidden;
+  height: 25rem;
+  margin-top: 10rem;
+  background: var(--color--background);
+  background: var(--accent);
+  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+}
+.aside__slider-enter, .aside__slider-leave-to {
+  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+          clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+}
+.aside__slider-enter-active, .aside__slider-leave-active {
+  -webkit-transition: all 300ms;
+  transition: all 300ms;
+  -webkit-transition-delay: 200ms;
+          transition-delay: 200ms;
+}
+.aside__slider:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  content: "";
+  opacity: 0.3;
+  background: var(--color--background);
+}
+.aside__slide-image {
+  position: absolute;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  -webkit-transform: translateX(-10rem);
+          transform: translateX(-10rem);
+}
+.aside__slide-image-enter {
+  -webkit-transform: scale(1.3) translateX(-10rem);
+          transform: scale(1.3) translateX(-10rem);
+  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+          clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+}
+.aside__slide-image-leave-to {
+  -webkit-transform: scale(1.3) translateX(-10rem);
+          transform: scale(1.3) translateX(-10rem);
+  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+          clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+}
+.aside__slide-image-enter-active {
+  -webkit-transition: all 700ms;
+  transition: all 700ms;
+  -webkit-transition-delay: 600ms;
+          transition-delay: 600ms;
+}
+.aside__slide-image-leave-active {
+  -webkit-transition: all 700ms;
+  transition: all 700ms;
+  -webkit-transition-delay: 200ms;
+          transition-delay: 200ms;
+}
+.aside__button {
+  font-weight: 900;
+  font-size: 2rem;
+  width: 10rem;
+  height: 10rem;
+  margin: 0;
+  cursor: pointer;
+  border: 0;
+  border: 1px solid var(--color--primary);
+  outline: 0;
+  background: var(--color--primary);
+}
+.aside__button:hover, .aside__button:focus {
+  border-color: var(--color--neutral);
+}
+.aside__button:active {
+  color: var(--color--primary);
+  border-color: var(--color--neutral);
+  background: var(--color--neutral);
+}
+
+.progress-indicator {
+  font-size: 0.9rem;
+  font-weight: 900;
+  position: absolute;
+  right: 5rem;
+  bottom: 3rem;
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 1rem;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: end;
+          justify-content: end;
+  width: 10rem;
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+}
+.progress-indicator-enter, .progress-indicator-leave-to {
+  -webkit-transform: translateY(2rem);
+          transform: translateY(2rem);
+  opacity: 0;
+}
+.progress-indicator-enter-active, .progress-indicator-leave-active {
+  -webkit-transition: all 300ms;
+  transition: all 300ms;
+}
+.progress-indicator__bar {
+  width: 1.5rem;
+  height: 0.2rem;
+  -webkit-transition: all 200ms;
+  transition: all 200ms;
+  background: var(--color--secondary);
+}
+.progress-indicator__bar--active {
+  background: var(--color--neutral);
+}
+.progress-indicator:before, .progress-indicator:after {
+  color: var(--color--neutral);
+}
+.progress-indicator:before {
+  content: "01";
+}
+.progress-indicator:after {
+  content: attr(data-slides-count);
+}
\ No newline at end of file
diff --git a/vue-slider-ui-interaction/license.txt b/vue-slider-ui-interaction/license.txt
new file mode 100644
index 0000000..dacb7e0
--- /dev/null
+++ b/vue-slider-ui-interaction/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Henry Desroches (https://codepen.io/xdesro/pen/dEwMOq)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/vue-slider-ui-interaction/src/index.html b/vue-slider-ui-interaction/src/index.html
new file mode 100644
index 0000000..de8e1a5
--- /dev/null
+++ b/vue-slider-ui-interaction/src/index.html
@@ -0,0 +1,92 @@
+<div class="viewport" id="app">
+  <transition name="nav">
+    <nav class="nav" v-if="loaded">
+      <a class="nav__brand" href="https://codepen.io/xdesro">
+            <svg viewBox="0 0 100 100">
+              <path
+                d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z"
+              ></path>
+            </svg>
+          </a>
+      <ul class="nav__list">
+        <li class="nav__list-item">
+          <a class="nav__list-item-link" href="https://henry.codes">About</a>
+        </li>
+        <li class="nav__list-item">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+                <path
+                  d="M1 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM5 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM9 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM1 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM1 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM5 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM9 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM5 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM9 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
+                />
+              </svg>
+        </li>
+      </ul>
+    </nav>
+  </transition>
+  <main class="main">
+    <transition name="main__slider">
+      <transition-group v-if="loaded" tag="div" class="main__slider" name="main__slide-image" mode="out-in">
+        <img class="main__slide-image" alt="" v-for="(slide, index) of slides" :key="index" :src="slide.img" v-if="index === currentActiveSlide" />
+      </transition-group>
+    </transition>
+    <transition-group tag="div" class="main__headline" name="main__headline-span" mode="out-in">
+      <span v-for="(slide, index) of slides" :key="index" v-if="index === currentActiveSlide" class="main__headline-span">{{ slide.headline }}</span
+          >
+        </transition-group>
+        <transition name="main__nav">
+          <div class="main__nav" v-if="loaded">
+            <p>Play Video</p>
+            <ul class="social-links">
+              <li class="social-links__item">
+                <a href="https://instagram.com/xdesro">Ig</a>
+              </li>
+              <li class="social-links__item">
+                <a href="https://twitter.com/xdesro">Tw</a>
+              </li>
+              <li class="social-links__item">
+                <a href="https://www.linkedin.com/in/henrydesroches/">In</a>
+              </li>
+            </ul>
+          </div>
+        </transition>
+      </main>
+      <aside class="aside">
+        <transition name="aside__nav">
+          <div class="aside__nav" v-if="loaded">
+            <button class="aside__button" @click="incrementSlide(-1)">←</button
+            ><button class="aside__button" @click="incrementSlide(1)">→</button>
+          </div>
+        </transition>
+        <transition name="aside__slider">
+          <transition-group
+            v-if="loaded"
+            tag="div"
+            class="aside__slider"
+            name="aside__slide-image"
+            mode="out-in"
+            ref="aside"
+          >
+            <img
+              class="aside__slide-image"
+              alt=""
+              v-for="(slide, index) of slides"
+              :key="index"
+              :src="slide.img"
+              v-if="index === nextActiveSlide"
+            />
+          </transition-group>
+        </transition>
+        <transition name="progress-indicator">
+          <ul
+            class="progress-indicator"
+            :data-slides-count="'0' + slides.length"
+            v-if="loaded"
+          >
+            <li
+              v-for="(slide,index) of slides"
+              :class="index === currentActiveSlide ? 'progress-indicator__bar  progress-indicator__bar--active' : 'progress-indicator__bar'"
+              :key="index"
+            ></li>
+          </ul>
+        </transition>
+      </aside>
+    </div>
\ No newline at end of file
diff --git a/vue-slider-ui-interaction/src/script.js b/vue-slider-ui-interaction/src/script.js
new file mode 100644
index 0000000..2485016
--- /dev/null
+++ b/vue-slider-ui-interaction/src/script.js
@@ -0,0 +1,79 @@
+// https://dribbble.com/shots/6566320-Kalli-Hero
+const img64 = [
+  `data:image/jpeg;base64,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`,
+  `data:image/jpeg;base64,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`,
+  `data:image/jpeg;base64,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`
+];
+
+const app = new Vue({
+  el: "#app",
+  data() {
+    return {
+      loaded: false,
+      currentActiveSlide: 0,
+      slides: [
+        {
+          headline: "If a building becomes architecture, then it is art.",
+          img: img64[0],
+          color: null
+        },
+        {
+          headline: "Simplicity is the ultimate sophistication.",
+          img: img64[1],
+          color: null
+        },
+        {
+          headline: "The link to this Dribbble shot is in the JS tab.",
+          img: img64[2],
+          color: null
+        }
+      ]
+    };
+  },
+  computed: {
+    nextActiveSlide() {
+      return this.currentActiveSlide + 1 >= this.slides.length
+        ? 0
+        : this.currentActiveSlide + 1;
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.loaded = true;
+    }, 1000);
+    this.slides.forEach(slide => {
+      Vibrant.from(slide.img)
+        .getPalette()
+        .then(val => {
+          slide.color = val.Vibrant.hex;
+        });
+    });
+    this.$el.style.setProperty(
+      "--accent",
+      this.slides[this.currentActiveSlide].color
+    );
+  },
+  updated() {
+    this.$el.style.setProperty(
+      "--accent",
+      this.slides[this.currentActiveSlide].color
+    );
+    this.$refs.aside.$el.style.setProperty(
+      "--accent",
+      this.slides[this.nextActiveSlide].color
+    );
+  },
+  methods: {
+    incrementSlide(val) {
+      if (val > 0 && this.currentActiveSlide + val < this.slides.length) {
+        this.currentActiveSlide += val;
+      } else if (val > 0) {
+        this.currentActiveSlide = 0;
+      } else if (val < 0 && this.currentActiveSlide + val < 0) {
+        this.currentActiveSlide = this.slides.length - 1;
+      } else {
+        this.currentActiveSlide += val;
+      }
+    }
+  }
+});
diff --git a/vue-slider-ui-interaction/src/style.scss b/vue-slider-ui-interaction/src/style.scss
new file mode 100644
index 0000000..483fa59
--- /dev/null
+++ b/vue-slider-ui-interaction/src/style.scss
@@ -0,0 +1,354 @@
+:root {
+  --color--primary: hsl(0, 0%, 100%);
+  --color--secondary: hsl(0, 0%, 90%);
+  --color--neutral: hsl(0, 0%, 1%);
+  --color--background: hsl(300, 3%, 15%);
+}
+@mixin slide-image {
+  position: absolute;
+  height: 100%;
+  object-fit: cover;
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+}
+html {
+  font-family: "Inter", sans-serif;
+  font-size: calc(95vmin / 100);
+}
+@supports (font-variation-settings: normal) {
+  html {
+    font-family: "Inter var", sans-serif;
+  }
+}
+body {
+  display: grid;
+  min-height: 100vh;
+  background: var(--color--background);
+
+  place-items: center;
+}
+.viewport {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 30rem;
+  width: 95vmin;
+  height: calc(95rem * (9 / 16));
+  background: var(--color--primary);
+  box-shadow: 0 1rem 2rem hsla(0, 0%, 0%, 0.2);
+  overflow: hidden;
+}
+.nav {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  left: 0;
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: space-between;
+  padding: 5rem;
+  &-enter,
+  &-leave-to {
+    transform: translateY(-2rem);
+    opacity: 0;
+  }
+  &-enter-active,
+  &-leave-active {
+    transition: all 300ms;
+  }
+  &__brand {
+    width: 3rem;
+    fill: var(--color--primary);
+  }
+  &__list {
+    display: grid;
+    grid-auto-flow: column;
+    grid-gap: 15rem;
+    justify-content: space-between;
+    padding: 0;
+    color: var(--color--neutral);
+  }
+  &__list-item {
+    font-weight: 730;
+    svg {
+      width: 1rem;
+      fill: var(--color--neutral);
+    }
+  }
+  &__list-item-link {
+    text-decoration: none;
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+    &:visited {
+      color: var(--color--neutral);
+    }
+  }
+}
+.main {
+  display: grid;
+  grid-template-rows: 2fr 1fr;
+  grid-template-areas: "headline" "nav";
+  align-items: end;
+  a {
+    font-weight: 730;
+    text-decoration: none;
+    color: var(--color--primary);
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+  &__slider {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    width: 70rem;
+    height: 100%;
+    transition: background 200ms;
+    background: var(--color--background);
+    background: var(--accent);
+
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    &:before {
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      content: "";
+      opacity: 0.1;
+      background: var(--color--background);
+    }
+    &-enter,
+    &-leave-to {
+      clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+    }
+    &-enter-active,
+    &-leave-active {
+      transition: all 500ms;
+    }
+  }
+  &__slide-image {
+    @include slide-image;
+    &-enter {
+      transform: scale(1.3);
+      clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+    }
+    &-leave-to {
+      transform: scale(1.3);
+      clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+    }
+    &-enter-active {
+      transition: all 700ms;
+      transition-delay: 500ms;
+    }
+    &-leave-active {
+      transition: all 700ms;
+    }
+  }
+  &__headline {
+    font-size: 4rem;
+    font-weight: 730;
+    position: relative;
+    z-index: 1;
+    width: 50rem;
+    padding: 5rem;
+    color: var(--color--primary);
+    &-span {
+      position: absolute;
+      &-enter,
+      &-leave-to {
+        transform: translateY(1em);
+        opacity: 0;
+      }
+      &-enter-active,
+      &-leave-active {
+        transition: all 300ms;
+      }
+      &-enter-active {
+        transition-delay: 700ms;
+      }
+    }
+  }
+  &__nav {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-area: nav;
+    width: 30rem;
+    padding: 3rem 5rem;
+    color: var(--color--primary);
+    &-enter,
+    &-leave-to {
+      transform: translateY(2rem);
+      opacity: 0;
+    }
+    &-enter-active,
+    &-leave-active {
+      transition: all 300ms;
+    }
+  }
+}
+.social-links {
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 0.4rem;
+  align-items: center;
+  &:before,
+  &:after {
+    display: block;
+    width: 1rem;
+    height: 0.1rem;
+    content: "";
+    background: var(--color--primary);
+  }
+  &:before {
+    grid-column: 2;
+  }
+  &:after {
+    grid-column: 4;
+  }
+}
+.aside {
+  position: relative;
+  display: grid;
+  padding: 5rem;
+  &__nav {
+    position: absolute;
+    bottom: 0;
+    left: -10rem;
+    transform: translateY(0);
+    &-enter,
+    &-leave-to {
+      transform: translateY(2rem);
+      opacity: 0;
+    }
+    &-enter-active,
+    &-leave-active {
+      transition: all 300ms;
+    }
+  }
+  &__slider {
+    position: relative;
+    overflow: hidden;
+    height: 25rem;
+    margin-top: 10rem;
+    background: var(--color--background);
+    background: var(--accent);
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    &-enter,
+    &-leave-to {
+      clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+    }
+    &-enter-active,
+    &-leave-active {
+      transition: all 300ms;
+      transition-delay: 200ms;
+    }
+    &:before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      content: "";
+      opacity: 0.3;
+      background: var(--color--background);
+    }
+  }
+  &__slide-image {
+    @include slide-image;
+
+    transform: translateX(-10rem);
+
+    &-enter {
+      transform: scale(1.3) translateX(-10rem);
+      clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+    }
+    &-leave-to {
+      transform: scale(1.3) translateX(-10rem);
+      // opacity: 0;
+
+      clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+    }
+    &-enter-active {
+      transition: all 700ms;
+      transition-delay: 600ms;
+    }
+    &-leave-active {
+      transition: all 700ms;
+      transition-delay: 200ms;
+    }
+  }
+  &__button {
+    font-weight: 900;
+    font-size: 2rem;
+    width: 10rem;
+    height: 10rem;
+    margin: 0;
+    cursor: pointer;
+    border: 0;
+    border: 1px solid var(--color--primary);
+    outline: 0;
+    background: var(--color--primary);
+    &:hover,
+    &:focus {
+      border-color: var(--color--neutral);
+    }
+    &:active {
+      color: var(--color--primary);
+      border-color: var(--color--neutral);
+      background: var(--color--neutral);
+    }
+  }
+}
+.progress-indicator {
+  font-size: 0.9rem;
+  font-weight: 900;
+  position: absolute;
+  right: 5rem;
+  bottom: 3rem;
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 1rem;
+  align-items: center;
+  justify-content: end;
+  width: 10rem;
+  transform: translateY(0);
+  &-enter,
+  &-leave-to {
+    transform: translateY(2rem);
+    opacity: 0;
+  }
+  &-enter-active,
+  &-leave-active {
+    transition: all 300ms;
+  }
+  &__bar {
+    width: 1.5rem;
+    height: 0.2rem;
+    transition: all 200ms;
+    background: var(--color--secondary);
+    &--active {
+      background: var(--color--neutral);
+    }
+  }
+
+  &:before,
+  &:after {
+    color: var(--color--neutral);
+  }
+  &:before {
+    content: "01";
+  }
+  &:after {
+    content: attr(data-slides-count);
+  }
+}
diff --git a/wacky-buttons-3/README.markdown b/wacky-buttons-3/README.markdown
new file mode 100644
index 0000000..38ff90d
--- /dev/null
+++ b/wacky-buttons-3/README.markdown
@@ -0,0 +1,5 @@
+# Wacky Buttons #3
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/AlexTaietti/pen/rNewQgK](https://codepen.io/AlexTaietti/pen/rNewQgK).
+
+Here are some cool css-only single-element buttons I made. Hover them, click'em, enjoy them!
diff --git a/wacky-buttons-3/dist/index.html b/wacky-buttons-3/dist/index.html
new file mode 100644
index 0000000..65d6485
--- /dev/null
+++ b/wacky-buttons-3/dist/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Wacky Buttons #3</title>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Creepster&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nixie+One&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Graduate&display=swap" rel="stylesheet">
+<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="button-container">
+  <a class="button button--glow">GLOW</a>
+</div>
+<div class="button-container">
+  <a class="button button--block">BLOCK</a>
+</div>
+<div class="button-container">
+  <a class="button button--gooey">GOOEY</a>
+</div>
+<div class="button-container">
+  <a class="button button--future">FUTURE</a>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/wacky-buttons-3/dist/script.js b/wacky-buttons-3/dist/script.js
new file mode 100644
index 0000000..11aca78
--- /dev/null
+++ b/wacky-buttons-3/dist/script.js
@@ -0,0 +1 @@
+// nope
\ No newline at end of file
diff --git a/wacky-buttons-3/dist/style.css b/wacky-buttons-3/dist/style.css
new file mode 100644
index 0000000..f298104
--- /dev/null
+++ b/wacky-buttons-3/dist/style.css
@@ -0,0 +1,215 @@
+:root {
+  --btn-width: 150px;
+  --btn-height: 75px;
+  --first-btn-squeeze: 0.9;
+  --deep-blue: #101048;
+  --orange: #f29e04;
+  --swamp: #239702;
+  --deep-purple: #6f0397;
+  --inactive-blue: #1a647d;
+  --active-blue: #3fc6f4;
+  --red: #d20404;
+  --light-orange: #fff1c5;
+  --yellow: #ffef02;
+  --hot-pink: #ff0563;
+  --default: 0.5s;
+  --fast: 0.3s;
+  --fastest: 0.2s;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  user-select: none;
+}
+
+html {
+  font-size: 10px;
+}
+
+html, body {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.button-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50%;
+  width: 50%;
+  min-height: 200px;
+  overflow: hidden;
+}
+.button-container:first-of-type {
+  background-color: var(--deep-blue);
+}
+.button-container:nth-of-type(2) {
+  background-color: var(--orange);
+}
+.button-container:nth-of-type(3) {
+  background-color: var(--swamp);
+}
+.button-container:nth-of-type(4) {
+  background-color: var(--deep-purple);
+}
+@media screen and (max-width: 650px) {
+  .button-container {
+    width: 100%;
+  }
+}
+
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--btn-height);
+  width: var(--btn-width);
+  font-size: 1.6rem;
+  color: black;
+  cursor: pointer;
+}
+.button--glow {
+  border-radius: 40px;
+  font-size: 2rem;
+  font-weight: bold;
+  font-family: 'Nixie One', monospace;
+  transition-property: box-shadow, background-color, transform;
+  transition-duration: var(--default);
+  background-color: var(--inactive-blue);
+  box-shadow: none;
+}
+.button--glow:hover {
+  background-color: var(--active-blue);
+  box-shadow: 0px 0px 7px 7px white;
+}
+.button--glow:active {
+  background-color: white;
+  transform: scale(var(--first-btn-squeeze));
+  box-shadow: 0px 0px 30px 30px cyan;
+}
+.button--block {
+  font-family: 'Graduate', sans-serif;
+  transform: translate3d(-15px, -15px, 0);
+  transition-property: box-shadow, transform;
+  transition-duration: var(--fast);
+  color: var(--red);
+  border: 3px solid var(--red);
+  background-color: var(--light-orange);
+  box-shadow: 15px 15px 5px 0px black;
+}
+.button--block:active {
+  transform: translate3d(-5px, -5px, 0);
+  box-shadow: 5px 5px 0px 0px black;
+}
+.button--gooey {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition-property: letter-spacing, background-color, font-size;
+  transition-duration: var(--default);
+  letter-spacing: auto;
+  color: var(--swamp);
+  font-family: 'Creepster', serif;
+  font-size: 4rem;
+  background-color: var(--yellow);
+}
+.button--gooey::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: -10%;
+  height: 120%;
+  width: 0;
+  border-radius: 100%;
+  transform: translate3d(0, 0, 0);
+  transition-property: transform, width;
+  transition-duration: .3s;
+  background-color: var(--swamp);
+  box-shadow: var(--btn-width) 0px 0px 0px var(--swamp);
+}
+.button--gooey::after {
+  content: '';
+  position: absolute;
+  left: -10%;
+  top: 0;
+  height: 0;
+  width: 120%;
+  border-radius: 100%;
+  transform: translate3d(0, 0, 0);
+  transition-property: transform, height;
+  transition-duration: .3s;
+  background-color: var(--swamp);
+  box-shadow: 0px var(--btn-height) 0px 0px var(--swamp);
+}
+.button--gooey:active {
+  letter-spacing: -2.5px;
+  font-size: 3rem;
+}
+.button--gooey:active::before {
+  transform: translate3d(-10px, 0, 0);
+  width: 20px;
+}
+.button--gooey:active::after {
+  transform: translate3d(0, -10px, 0);
+  height: 20px;
+}
+.button--future {
+  position: relative;
+  transition-property: box-shadow, background-color;
+  transition-duration: var(--fastest);
+  font-family: 'Orbitron', monospace;
+  box-shadow: inset 0px 0px 0px black;
+}
+.button--future::before {
+  content: '';
+  position: absolute;
+  left: -1px;
+  bottom: 0;
+  height: 100%;
+  width: 2px;
+  transform: translate3d(-50px, 20px, 0);
+  transition-property: box-shadow, transform;
+  transition-timing-function: ease-in-out;
+  transition-duration: .2s;
+  box-shadow: 250px -40px 0px 0px black;
+  background-color: black;
+}
+.button--future::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  transform: translate3d(-50px, 20px, 0);
+  transition-property: box-shadow, transform;
+  transition-duration: .2s;
+  transition-timing-function: ease-in-out;
+  box-shadow: 100px -115px 0px 0px black;
+  background-color: black;
+}
+.button--future:hover::before {
+  transform: translate3d(0, 0, 0);
+  box-shadow: var(--btn-width) 0 0px 0px black;
+}
+.button--future:hover::after {
+  transform: translate3d(0, 0, 0);
+  box-shadow: 0 calc(var(--btn-height) * -1) 0px 0px black;
+}
+.button--future:active {
+  box-shadow: inset 0px 0px 19px black;
+  background-color: var(--hot-pink);
+}
\ No newline at end of file
diff --git a/wacky-buttons-3/license.txt b/wacky-buttons-3/license.txt
new file mode 100644
index 0000000..0f638dd
--- /dev/null
+++ b/wacky-buttons-3/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Alex Taietti (https://codepen.io/AlexTaietti/pen/rNewQgK)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/wacky-buttons-3/src/index.html b/wacky-buttons-3/src/index.html
new file mode 100644
index 0000000..cd27997
--- /dev/null
+++ b/wacky-buttons-3/src/index.html
@@ -0,0 +1,12 @@
+<div class="button-container">
+  <a class="button button--glow">GLOW</a>
+</div>
+<div class="button-container">
+  <a class="button button--block">BLOCK</a>
+</div>
+<div class="button-container">
+  <a class="button button--gooey">GOOEY</a>
+</div>
+<div class="button-container">
+  <a class="button button--future">FUTURE</a>
+</div>
\ No newline at end of file
diff --git a/wacky-buttons-3/src/script.js b/wacky-buttons-3/src/script.js
new file mode 100644
index 0000000..11aca78
--- /dev/null
+++ b/wacky-buttons-3/src/script.js
@@ -0,0 +1 @@
+// nope
\ No newline at end of file
diff --git a/wacky-buttons-3/src/style.scss b/wacky-buttons-3/src/style.scss
new file mode 100644
index 0000000..590e553
--- /dev/null
+++ b/wacky-buttons-3/src/style.scss
@@ -0,0 +1,247 @@
+$small-screen: 650px;
+
+:root{
+  --btn-width: 150px;
+  --btn-height: 75px;
+  --first-btn-squeeze: 0.9;
+  --deep-blue: #101048;
+  --orange: #f29e04;
+  --swamp:  #239702;
+  --deep-purple: #6f0397;
+  --inactive-blue: #1a647d;
+  --active-blue: #3fc6f4;
+  --red: #d20404;
+  --light-orange: #fff1c5;
+  --yellow: #ffef02;
+  --hot-pink: #ff0563;
+  --default: 0.5s;
+  --fast: 0.3s;
+  --fastest: 0.2s;
+}
+
+*, *::before, *::after{
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  user-select: none;
+}
+
+html{ font-size: 10px; }
+
+html, body{
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+body{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.button-container{
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50%;
+  width: 50%;
+  min-height: 200px;
+  overflow: hidden;
+
+  &:first-of-type{ background-color: var(--deep-blue); }
+
+  &:nth-of-type(2){ background-color: var(--orange); }
+
+  &:nth-of-type(3){ background-color: var(--swamp); }
+
+  &:nth-of-type(4){ background-color: var(--deep-purple); }
+
+  @media screen and (max-width: $small-screen){ width: 100%; }
+
+}
+
+.button{
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--btn-height);
+  width: var(--btn-width);
+  font-size: 1.6rem;
+  color: black;
+  cursor: pointer;
+
+  &--glow{
+
+    border-radius: 40px;
+    font-size: 2rem;
+    font-weight: bold;
+    font-family: 'Nixie One', monospace;
+    transition-property: box-shadow, background-color, transform;
+    transition-duration: var(--default);
+    background-color: var(--inactive-blue);
+    box-shadow: none;
+
+    &:hover{
+      background-color: var(--active-blue);
+      box-shadow: 0px 0px 7px 7px white;
+    }
+
+    &:active{
+      background-color: white;
+      transform: scale(var(--first-btn-squeeze));
+      box-shadow: 0px 0px 30px 30px cyan;
+    }
+
+  }
+
+  &--block{
+
+    font-family: 'Graduate', sans-serif;
+    transform: translate3d(-15px, -15px, 0);
+    transition-property: box-shadow, transform;
+    transition-duration: var(--fast);
+    color: var(--red);
+    border: 3px solid var(--red);
+    background-color: var(--light-orange);
+    box-shadow: 15px 15px 5px 0px black;
+
+    &:active{
+      transform: translate3d(-5px, -5px, 0);
+      box-shadow: 5px 5px 0px 0px black;
+    }
+
+  }
+                                                                              ////////////////////////////////////////////////
+  &--gooey{ // I got the inspiration for this one from this great article --> // https://muffinman.io/elastic-hover-effect/ //
+                                                                              ////////////////////////////////////////////////
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition-property: letter-spacing, background-color, font-size;
+    transition-duration: var(--default);
+    letter-spacing: auto;
+    color: var(--swamp);
+    font-family: 'Creepster', serif;
+    font-size: 4rem;
+    background-color: var(--yellow);
+
+    &::before{
+
+      content: '';
+      position: absolute;
+      left: 0;
+      top: -10%;
+      height: 120%;
+      width: 0;
+      border-radius: 100%;
+      transform: translate3d(0, 0, 0);
+      transition-property: transform, width;
+      transition-duration: .3s;
+      background-color: var(--swamp);
+      box-shadow: var(--btn-width) 0px 0px 0px var(--swamp);
+
+    }
+
+    &::after{
+
+      content: '';
+      position: absolute;
+      left: -10%;
+      top: 0;
+      height: 0;
+      width: 120%;
+      border-radius: 100%;
+      transform: translate3d(0, 0, 0);
+      transition-property: transform, height;
+      transition-duration: .3s;
+      background-color: var(--swamp);
+      box-shadow: 0px var(--btn-height) 0px 0px var(--swamp);
+
+    }
+
+    &:active{
+
+      letter-spacing: -2.5px;
+      font-size: 3rem;
+
+      &::before{
+        transform: translate3d(-10px, 0, 0);
+        width: 20px;
+      }
+
+      &::after{
+        transform: translate3d(0, -10px, 0);
+        height: 20px;
+      }
+
+    }
+
+  }
+
+  &--future{
+
+    position: relative;
+    transition-property: box-shadow, background-color;
+    transition-duration: var(--fastest);
+    font-family: 'Orbitron', monospace;
+    box-shadow: inset 0px 0px 0px black;
+
+    &::before{
+      content: '';
+      position: absolute;
+      left: -1px;
+      bottom: 0;
+      height: 100%;
+      width: 2px;
+      transform: translate3d(-50px, 20px, 0);
+      transition-property: box-shadow, transform;
+      transition-timing-function: ease-in-out;
+      transition-duration: .2s;
+      box-shadow: 250px -40px 0px 0px black;
+      background-color: black;
+    }
+
+    &::after{
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      transform: translate3d(-50px, 20px, 0);
+      transition-property: box-shadow, transform;
+      transition-duration: .2s;
+      transition-timing-function: ease-in-out;
+      box-shadow: 100px -115px 0px 0px black;
+      background-color: black;
+    }
+
+    &:hover{
+
+      &::before{
+        transform: translate3d(0, 0, 0);
+        box-shadow: var(--btn-width) 0 0px 0px black;
+      }
+
+      &::after{
+        transform: translate3d(0, 0, 0);
+        box-shadow: 0 calc(var(--btn-height) * -1) 0px 0px black;
+      }
+
+    }
+
+    &:active{
+      box-shadow: inset 0px 0px 19px black;
+      background-color: var(--hot-pink);
+    }
+
+  }
+
+}
diff --git a/walkershow-to/README.markdown b/walkershow-to/README.markdown
new file mode 100644
index 0000000..5aa68e3
--- /dev/null
+++ b/walkershow-to/README.markdown
@@ -0,0 +1,4 @@
+# Walkers - How to
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/Mamboleoo/pen/XWJPxpZ](https://codepen.io/Mamboleoo/pen/XWJPxpZ).
+
+ 
\ No newline at end of file
diff --git a/walkershow-to/dist/index.html b/walkershow-to/dist/index.html
new file mode 100644
index 0000000..2f01ae4
--- /dev/null
+++ b/walkershow-to/dist/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Walkers - How to</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<input type="range" min="1" max="7" step="1" id="step" value="1">
+<section>
+  <p>Draw a line with a defined x & y speed</p>
+  <p>On every frame, add two random values to the x & y speed</p>
+  <p>Use a value from noise to make the final path more organic</p>
+  <p>Draw more lines at once</p>
+  <p>Make the lines thin and white</p>
+  <p>Use a lower opacity for the lines</p>
+  <p>Go crazy with the styles</p>
+</section>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/perlin.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/walkershow-to/dist/script.js b/walkershow-to/dist/script.js
new file mode 100644
index 0000000..0bdd77e
--- /dev/null
+++ b/walkershow-to/dist/script.js
@@ -0,0 +1,207 @@
+console.clear();
+const p = noise;
+let branches = [];
+
+class Branch {
+  constructor (x, y) {
+    this.x = x;
+    this.y = y;
+    this.prevx = x;
+    this.prevy = y;
+    this.visible = true;
+    this.color = color(random(110, 110 + 100), 70, 100, 100);
+    this.speed = {
+      x: random(-7, 7),
+      y: random(-7, 7)
+    };
+  }
+  walls () {
+    this.prevx = this.x;
+    this.prevy = this.y;
+    if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
+      this.visible = false;
+    }
+  }
+  draw () {
+    line(this.prevx, this.prevy, this.x, this.y);
+  }
+  moveStraight () {
+    this.x += this.speed.x * 5;
+    this.y += this.speed.y * 5;
+  }
+  moveRandom () {
+    this.speed.x += random(-10, 10);
+    this.speed.y += random(-10, 10);
+    this.x += this.speed.x;
+    this.y += this.speed.y;
+  }
+  moveNoise () {
+    this.speed.x += p.simplex3(this.x * 0.005, this.y * 0.005, millis() * 0.0001) * 2;
+    this.speed.y += p.simplex3(this.y * 0.005, this.x * 0.005, millis() * 0.0001) * 2;
+    this.x += this.speed.x;
+    this.y += this.speed.y;
+  }
+}
+
+function createBranches (amount) {
+  // Refresh color & blend mode
+  blendMode(BLEND);
+  colorMode(RGB);
+  
+  branches = [];
+  for (let i=0; i<amount; i++) {
+    const x = width / 2;
+    const y = height / 2;
+    branches.push(new Branch(x, y));
+  }
+}
+
+/* ====== STEP 1 ====== */
+function goToStep1 () {
+  clear();
+  createBranches(1);
+  strokeWeight(10);
+  branches[0].speed.x = random([random(-4, -2), random(2, 4)]);
+  branches[0].speed.y = random([random(-4, -2), random(2, 4)]);
+}
+function step1 () {
+  if (branches[0].visible) {
+    stroke(random([100, 150, 200, 250]));
+    branches[0].moveStraight();
+    branches[0].draw();
+    branches[0].walls();
+  }
+}
+
+/* ====== STEP 2 ====== */
+function goToStep2 () {
+  clear();
+  createBranches(1);
+  strokeWeight(5);
+}
+function step2 () {
+  if (branches[0].visible) {
+    stroke(random([100, 150, 200, 250]));
+    branches[0].moveRandom();
+    branches[0].draw();
+    branches[0].walls();
+  }
+}
+
+/* ====== STEP 3 ====== */
+function goToStep3 () {
+  clear();
+  createBranches(1);
+  strokeWeight(5);
+}
+function step3 () {
+  if (branches[0].visible) {
+    stroke(random([100, 150, 200, 250]));
+    branches[0].moveNoise();
+    branches[0].draw();
+    branches[0].walls();
+  }
+}
+
+/* ====== STEP 4 ====== */
+function goToStep4 () {
+  clear();
+  createBranches(50);
+  strokeWeight(5);
+}
+function step4 () {
+  branches.forEach(branch => {
+    if (branch.visible) {
+      stroke(random([100, 150, 200, 250]));
+      branch.moveNoise();
+      branch.draw();
+      branch.walls();
+    }
+  });
+}
+
+/* ====== STEP 5 ====== */
+function goToStep5 () {
+  clear();
+  createBranches(50);
+  strokeWeight(1);
+  stroke(255);
+}
+function step5 () {
+  branches.forEach(branch => {
+    if (branch.visible) {
+      branch.moveNoise();
+      branch.draw();
+      branch.walls();
+    }
+  });
+}
+
+/* ====== STEP 6 ====== */
+function goToStep6 () {
+  clear();
+  createBranches(1000);
+  strokeWeight(1);
+  stroke(255, 255, 255, 50);
+}
+function step6 () {
+  branches.forEach(branch => {
+    if (branch.visible) {
+      branch.moveNoise();
+      branch.draw();
+      branch.walls();
+    }
+  });
+}
+
+/* ====== STEP 7 ====== */
+function goToStep7 () {
+  clear();
+  createBranches(1000);
+  colorMode(HSB);
+  blendMode(SCREEN);
+  strokeWeight(2);
+}
+function step7 () {
+  stroke((millis() * 0.3) % 360, 100, 50);
+  branches.forEach(branch => {
+    if (branch.visible) {
+      branch.moveNoise();
+      branch.draw();
+      branch.walls();
+    }
+  });
+}
+
+function setup () {
+  createCanvas(windowWidth, windowHeight);
+  strokeCap(SQUARE);
+  document.querySelector('canvas').addEventListener('click', windowResized);
+  if (window['goToStep' + step.value]) {
+    window['goToStep' + step.value]();
+  }
+}
+
+function windowResized () {
+  p.seed(random(100));
+  resizeCanvas(windowWidth, windowHeight);
+  if (window['goToStep' + step.value]) {
+    window['goToStep' + step.value]();
+  }
+}
+
+const texts = document.querySelectorAll('section p');
+step.oninput = () => {
+  if (window['goToStep' + step.value]) {
+    window['goToStep' + step.value]();
+  }
+};
+
+function draw () {
+  if (window['step' + step.value]) {
+    window['step' + step.value]();
+  }
+
+  texts.forEach(text => text.style.display = 'none');
+  texts[step.value - 1].style.display = 'block';
+}
\ No newline at end of file
diff --git a/walkershow-to/dist/style.css b/walkershow-to/dist/style.css
new file mode 100644
index 0000000..2db7b76
--- /dev/null
+++ b/walkershow-to/dist/style.css
@@ -0,0 +1,104 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+  height: 100vh;
+  background: black;
+  cursor: pointer;
+}
+
+canvas {
+  margin: auto;
+  touch-action: none;
+}
+
+input {
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 34px;
+  max-width: 400px;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+}
+input::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  height: 6px;
+  background: #fff;
+  -webkit-appearance: none;
+  appearance: none;
+}
+input::-moz-range-track {
+  box-sizing: border-box;
+  height: 6px;
+  background: #fff;
+  -webkit-appearance: none;
+  appearance: none;
+}
+input::-ms-track {
+  box-sizing: border-box;
+  height: 6px;
+  background: #fff;
+  -webkit-appearance: none;
+  appearance: none;
+}
+input::-webkit-slider-thumb {
+  margin-top: -12px;
+  box-sizing: border-box;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid black;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+input::-moz-range-thumb {
+  box-sizing: border-box;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid black;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+input::-ms-thumb {
+  margin-top: 0px;
+  box-sizing: border-box;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid black;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+
+section {
+  box-sizing: border-box;
+  font-size: 30px;
+  color: white;
+  position: fixed;
+  left: 0;
+  top: 20px;
+  width: 100%;
+  text-align: center;
+  padding: 0 10%;
+  pointer-events: none;
+}
+section p {
+  margin: 0;
+  display: none;
+}
+@media (max-width: 500px) {
+  section {
+    font-size: 24px;
+  }
+}
\ No newline at end of file
diff --git a/walkershow-to/license.txt b/walkershow-to/license.txt
new file mode 100644
index 0000000..3a27b76
--- /dev/null
+++ b/walkershow-to/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Louis Hoebregts (https://codepen.io/Mamboleoo/pen/XWJPxpZ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/walkershow-to/src/index.html b/walkershow-to/src/index.html
new file mode 100644
index 0000000..b104252
--- /dev/null
+++ b/walkershow-to/src/index.html
@@ -0,0 +1,10 @@
+<input type="range" min="1" max="7" step="1" id="step" value="1">
+<section>
+  <p>Draw a line with a defined x & y speed</p>
+  <p>On every frame, add two random values to the x & y speed</p>
+  <p>Use a value from noise to make the final path more organic</p>
+  <p>Draw more lines at once</p>
+  <p>Make the lines thin and white</p>
+  <p>Use a lower opacity for the lines</p>
+  <p>Go crazy with the styles</p>
+</section>
\ No newline at end of file
diff --git a/walkershow-to/src/script.js b/walkershow-to/src/script.js
new file mode 100644
index 0000000..0bdd77e
--- /dev/null
+++ b/walkershow-to/src/script.js
@@ -0,0 +1,207 @@
+console.clear();
+const p = noise;
+let branches = [];
+
+class Branch {
+  constructor (x, y) {
+    this.x = x;
+    this.y = y;
+    this.prevx = x;
+    this.prevy = y;
+    this.visible = true;
+    this.color = color(random(110, 110 + 100), 70, 100, 100);
+    this.speed = {
+      x: random(-7, 7),
+      y: random(-7, 7)
+    };
+  }
+  walls () {
+    this.prevx = this.x;
+    this.prevy = this.y;
+    if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
+      this.visible = false;
+    }
+  }
+  draw () {
+    line(this.prevx, this.prevy, this.x, this.y);
+  }
+  moveStraight () {
+    this.x += this.speed.x * 5;
+    this.y += this.speed.y * 5;
+  }
+  moveRandom () {
+    this.speed.x += random(-10, 10);
+    this.speed.y += random(-10, 10);
+    this.x += this.speed.x;
+    this.y += this.speed.y;
+  }
+  moveNoise () {
+    this.speed.x += p.simplex3(this.x * 0.005, this.y * 0.005, millis() * 0.0001) * 2;
+    this.speed.y += p.simplex3(this.y * 0.005, this.x * 0.005, millis() * 0.0001) * 2;
+    this.x += this.speed.x;
+    this.y += this.speed.y;
+  }
+}
+
+function createBranches (amount) {
+  // Refresh color & blend mode
+  blendMode(BLEND);
+  colorMode(RGB);
+  
+  branches = [];
+  for (let i=0; i<amount; i++) {
+    const x = width / 2;
+    const y = height / 2;
+    branches.push(new Branch(x, y));
+  }
+}
+
+/* ====== STEP 1 ====== */
+function goToStep1 () {
+  clear();
+  createBranches(1);
+  strokeWeight(10);
+  branches[0].speed.x = random([random(-4, -2), random(2, 4)]);
+  branches[0].speed.y = random([random(-4, -2), random(2, 4)]);
+}
+function step1 () {
+  if (branches[0].visible) {
+    stroke(random([100, 150, 200, 250]));
+    branches[0].moveStraight();
+    branches[0].draw();
+    branches[0].walls();
+  }
+}
+
+/* ====== STEP 2 ====== */
+function goToStep2 () {
+  clear();
+  createBranches(1);
+  strokeWeight(5);
+}
+function step2 () {
+  if (branches[0].visible) {
+    stroke(random([100, 150, 200, 250]));
+    branches[0].moveRandom();
+    branches[0].draw();
+    branches[0].walls();
+  }
+}
+
+/* ====== STEP 3 ====== */
+function goToStep3 () {
+  clear();
+  createBranches(1);
+  strokeWeight(5);
+}
+function step3 () {
+  if (branches[0].visible) {
+    stroke(random([100, 150, 200, 250]));
+    branches[0].moveNoise();
+    branches[0].draw();
+    branches[0].walls();
+  }
+}
+
+/* ====== STEP 4 ====== */
+function goToStep4 () {
+  clear();
+  createBranches(50);
+  strokeWeight(5);
+}
+function step4 () {
+  branches.forEach(branch => {
+    if (branch.visible) {
+      stroke(random([100, 150, 200, 250]));
+      branch.moveNoise();
+      branch.draw();
+      branch.walls();
+    }
+  });
+}
+
+/* ====== STEP 5 ====== */
+function goToStep5 () {
+  clear();
+  createBranches(50);
+  strokeWeight(1);
+  stroke(255);
+}
+function step5 () {
+  branches.forEach(branch => {
+    if (branch.visible) {
+      branch.moveNoise();
+      branch.draw();
+      branch.walls();
+    }
+  });
+}
+
+/* ====== STEP 6 ====== */
+function goToStep6 () {
+  clear();
+  createBranches(1000);
+  strokeWeight(1);
+  stroke(255, 255, 255, 50);
+}
+function step6 () {
+  branches.forEach(branch => {
+    if (branch.visible) {
+      branch.moveNoise();
+      branch.draw();
+      branch.walls();
+    }
+  });
+}
+
+/* ====== STEP 7 ====== */
+function goToStep7 () {
+  clear();
+  createBranches(1000);
+  colorMode(HSB);
+  blendMode(SCREEN);
+  strokeWeight(2);
+}
+function step7 () {
+  stroke((millis() * 0.3) % 360, 100, 50);
+  branches.forEach(branch => {
+    if (branch.visible) {
+      branch.moveNoise();
+      branch.draw();
+      branch.walls();
+    }
+  });
+}
+
+function setup () {
+  createCanvas(windowWidth, windowHeight);
+  strokeCap(SQUARE);
+  document.querySelector('canvas').addEventListener('click', windowResized);
+  if (window['goToStep' + step.value]) {
+    window['goToStep' + step.value]();
+  }
+}
+
+function windowResized () {
+  p.seed(random(100));
+  resizeCanvas(windowWidth, windowHeight);
+  if (window['goToStep' + step.value]) {
+    window['goToStep' + step.value]();
+  }
+}
+
+const texts = document.querySelectorAll('section p');
+step.oninput = () => {
+  if (window['goToStep' + step.value]) {
+    window['goToStep' + step.value]();
+  }
+};
+
+function draw () {
+  if (window['step' + step.value]) {
+    window['step' + step.value]();
+  }
+
+  texts.forEach(text => text.style.display = 'none');
+  texts[step.value - 1].style.display = 'block';
+}
\ No newline at end of file
diff --git a/walkershow-to/src/style.scss b/walkershow-to/src/style.scss
new file mode 100644
index 0000000..421e50c
--- /dev/null
+++ b/walkershow-to/src/style.scss
@@ -0,0 +1,72 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+  height: 100vh;
+  background: black;
+  cursor: pointer;
+}
+canvas {
+  margin: auto;
+  touch-action: none;
+}
+
+@mixin track {
+  box-sizing: border-box;
+  height: 6px;
+	background: #fff;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+@mixin thumb {
+  box-sizing: border-box;
+	width: 30px;
+  height: 30px;
+	border-radius: 50%;
+	background: #fff;
+  border: 2px solid black;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+
+input {
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 34px;
+  max-width: 400px;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  &::-webkit-slider-runnable-track {@include track }
+	&::-moz-range-track { @include track }
+	&::-ms-track { @include track }
+  
+  &::-webkit-slider-thumb {margin-top: -12px;@include thumb}
+	&::-moz-range-thumb { @include thumb }
+  &::-ms-thumb {margin-top:0px;@include thumb}
+}
+
+section {
+  box-sizing: border-box;
+  font-size: 30px;
+  color: white;
+  position: fixed;
+  left: 0;
+  top: 20px;
+  width: 100%;
+  text-align: center;
+  padding: 0 10%;
+  pointer-events: none;
+  p {
+    margin: 0;
+    display: none;
+  }
+  @media (max-width: 500px) {
+    font-size: 24px;
+  }
+}
\ No newline at end of file
diff --git a/wandering-through-a-generative-twilight-landscape/README.markdown b/wandering-through-a-generative-twilight-landscape/README.markdown
new file mode 100644
index 0000000..c09ee0e
--- /dev/null
+++ b/wandering-through-a-generative-twilight-landscape/README.markdown
@@ -0,0 +1,5 @@
+# Wandering through a generative twilight landscape
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/terabaud/pen/ZEWvWdZ](https://codepen.io/terabaud/pen/ZEWvWdZ).
+
+
diff --git a/wandering-through-a-generative-twilight-landscape/dist/index.html b/wandering-through-a-generative-twilight-landscape/dist/index.html
new file mode 100644
index 0000000..f88f465
--- /dev/null
+++ b/wandering-through-a-generative-twilight-landscape/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Wandering through a generative twilight landscape</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="container"></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/wandering-through-a-generative-twilight-landscape/dist/script.js b/wandering-through-a-generative-twilight-landscape/dist/script.js
new file mode 100644
index 0000000..7ab601d
--- /dev/null
+++ b/wandering-through-a-generative-twilight-landscape/dist/script.js
@@ -0,0 +1,157 @@
+const glsl = x => x[0].trim();
+
+const backgroundShader = {};
+const landscapeShader = {};
+
+backgroundShader.vert = glsl`
+varying vec2 vUv;
+void main()	{
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+}
+`;
+
+backgroundShader.frag = glsl`
+uniform float time;
+uniform vec2 resolution;
+varying vec2 vUv;
+
+// cosine based palette, 4 vec3 params
+vec3 palette( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d )
+{
+  return a + b * cos(6.28318 * (c * t + d));
+}
+
+vec3 pal1(in float t) {
+  vec3 a = vec3(0.5, 0.5, 0.5);
+  vec3 b = vec3(0.5, 0.5, 0.5);
+  vec3 c = vec3(1.0, 1.0, 1.0);
+  vec3 d = vec3(0.3, 0.2, 0.2);
+  return palette(t, a, b, c, d);
+}
+
+void main() {
+  vec2 p = (vUv * 1. - .5) * 8.; // * vec2(aspect, 1.);
+  float l = length(p);
+  float a = atan(p.y, p.x);
+  vec2 p1 = vec2(cos(a) * l, sin(a) * l);
+  float mt = time * .1;
+  vec3 color = pal1(mod(mt * .1 + .5 * sin(p1.x * 1.5 - mt), 1.));
+  float lightness = clamp(-.3 + gl_FragCoord.y / resolution.y, 0., 1.);
+  gl_FragColor = vec4(color * lightness, 1.);
+}
+`;
+
+landscapeShader.vert = glsl`
+varying vec2 vUv;
+varying vec3 vPos;
+uniform float time;
+void main()	{
+  vUv = uv;
+  vPos = position;
+  float s = sin(position.x);
+  float c = cos(position.y + time * .25);
+  vec3 p = position + vec3(0, 0, s * (s - c) * sin(position.x) * .7);
+  gl_Position = projectionMatrix * modelViewMatrix * vec4( p, 1.0 );
+}
+`;
+
+landscapeShader.frag = glsl`
+uniform float time;
+varying vec2 vUv;
+varying vec3 vPos;
+void main() {
+  float u = .7 * cos(vUv.y * 64. + time);
+  float v = 1. - smoothstep(0., .06, u * u);
+  float z = 1. - clamp(vPos.y * .1, 0., 1.);
+  gl_FragColor = vec4(vec3(v) * z, 1.); 
+}
+`;
+
+
+
+
+const container = document.querySelector('#container');
+
+let camera, scene, renderer, uniforms, clock, frame;
+
+const dispose = init();
+
+function init() {
+  renderer = new THREE.WebGLRenderer({antialias: true});
+  renderer.setPixelRatio(window.devicePixelRatio);
+  container.appendChild(renderer.domElement);
+  clock = new THREE.Clock();
+  // camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+  camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
+  camera.position.z = 5;
+  scene = new THREE.Scene();
+
+  const geometry = new THREE.PlaneBufferGeometry(240, 240);
+
+  const landscapeGeometry = new THREE.PlaneBufferGeometry(64, 16, 640, 80);
+
+  
+  uniforms = {
+    time: { type: 'f', value: 1.0 },
+    resolution: { type: 'v2', value: new THREE.Vector2() },
+  };
+
+  const material = new THREE.ShaderMaterial({
+    uniforms,
+    vertexShader: backgroundShader.vert,
+    fragmentShader: backgroundShader.frag,
+  });
+  const landscapeMaterial = new THREE.ShaderMaterial({
+    uniforms,
+    vertexShader: landscapeShader.vert,
+    fragmentShader: landscapeShader.frag,
+  });
+  
+  
+  
+  const landscapeMesh = new THREE.Mesh(landscapeGeometry, landscapeMaterial);
+  
+  const mesh = new THREE.Mesh(geometry, material);
+  mesh.position.set(0,-1,-10);
+  landscapeMesh.position.y = -2;
+  landscapeMesh.rotation.x = -33;
+  scene.add(landscapeMesh);
+  scene.add(mesh);
+  
+  onResize();
+  window.addEventListener('resize', onResize, false);
+  frame = requestAnimationFrame(animate);
+  
+  // tis just a reminder for you to always clean up all the 
+  // things after use.
+  // It's not needed in this pen but useful as soon there is the need to
+  // unmount/remount this component
+  const cleanup = function () {
+    cancelAnimationFrame(frame);
+    geometry.dispose();
+    material.dispose();
+    landscapeGeometry.dispose();
+    landscapeMaterial.dispose();
+    scene.remove(mesh);
+    scene.dispose();
+    renderer.dispose();
+    window.removeEventListener('resize', onResize, false);
+  }
+  return cleanup;
+}
+
+function onResize() {
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  const canvas = renderer.domElement;
+  camera.aspect = canvas.clientWidth / canvas.clientHeight;
+  camera.updateProjectionMatrix();
+  uniforms.resolution.value.x = renderer.domElement.width;
+  uniforms.resolution.value.y = renderer.domElement.height;
+}
+
+function animate(timestamp) {
+  frame = requestAnimationFrame(animate);
+  uniforms.time.value = clock.getElapsedTime();
+  renderer.render(scene, camera);
+}
\ No newline at end of file
diff --git a/wandering-through-a-generative-twilight-landscape/dist/style.css b/wandering-through-a-generative-twilight-landscape/dist/style.css
new file mode 100644
index 0000000..b2e2665
--- /dev/null
+++ b/wandering-through-a-generative-twilight-landscape/dist/style.css
@@ -0,0 +1,9 @@
+body {
+  background: #000;
+  color: #fff;
+  margin: 0;
+}
+
+canvas {
+  display: block;
+}
\ No newline at end of file
diff --git a/wandering-through-a-generative-twilight-landscape/license.txt b/wandering-through-a-generative-twilight-landscape/license.txt
new file mode 100644
index 0000000..0fe0300
--- /dev/null
+++ b/wandering-through-a-generative-twilight-landscape/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Lea Rosema (https://codepen.io/terabaud/pen/ZEWvWdZ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/wandering-through-a-generative-twilight-landscape/src/index.html b/wandering-through-a-generative-twilight-landscape/src/index.html
new file mode 100644
index 0000000..eb4de33
--- /dev/null
+++ b/wandering-through-a-generative-twilight-landscape/src/index.html
@@ -0,0 +1 @@
+<div id="container"></div>
\ No newline at end of file
diff --git a/wandering-through-a-generative-twilight-landscape/src/script.js b/wandering-through-a-generative-twilight-landscape/src/script.js
new file mode 100644
index 0000000..7ab601d
--- /dev/null
+++ b/wandering-through-a-generative-twilight-landscape/src/script.js
@@ -0,0 +1,157 @@
+const glsl = x => x[0].trim();
+
+const backgroundShader = {};
+const landscapeShader = {};
+
+backgroundShader.vert = glsl`
+varying vec2 vUv;
+void main()	{
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+}
+`;
+
+backgroundShader.frag = glsl`
+uniform float time;
+uniform vec2 resolution;
+varying vec2 vUv;
+
+// cosine based palette, 4 vec3 params
+vec3 palette( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d )
+{
+  return a + b * cos(6.28318 * (c * t + d));
+}
+
+vec3 pal1(in float t) {
+  vec3 a = vec3(0.5, 0.5, 0.5);
+  vec3 b = vec3(0.5, 0.5, 0.5);
+  vec3 c = vec3(1.0, 1.0, 1.0);
+  vec3 d = vec3(0.3, 0.2, 0.2);
+  return palette(t, a, b, c, d);
+}
+
+void main() {
+  vec2 p = (vUv * 1. - .5) * 8.; // * vec2(aspect, 1.);
+  float l = length(p);
+  float a = atan(p.y, p.x);
+  vec2 p1 = vec2(cos(a) * l, sin(a) * l);
+  float mt = time * .1;
+  vec3 color = pal1(mod(mt * .1 + .5 * sin(p1.x * 1.5 - mt), 1.));
+  float lightness = clamp(-.3 + gl_FragCoord.y / resolution.y, 0., 1.);
+  gl_FragColor = vec4(color * lightness, 1.);
+}
+`;
+
+landscapeShader.vert = glsl`
+varying vec2 vUv;
+varying vec3 vPos;
+uniform float time;
+void main()	{
+  vUv = uv;
+  vPos = position;
+  float s = sin(position.x);
+  float c = cos(position.y + time * .25);
+  vec3 p = position + vec3(0, 0, s * (s - c) * sin(position.x) * .7);
+  gl_Position = projectionMatrix * modelViewMatrix * vec4( p, 1.0 );
+}
+`;
+
+landscapeShader.frag = glsl`
+uniform float time;
+varying vec2 vUv;
+varying vec3 vPos;
+void main() {
+  float u = .7 * cos(vUv.y * 64. + time);
+  float v = 1. - smoothstep(0., .06, u * u);
+  float z = 1. - clamp(vPos.y * .1, 0., 1.);
+  gl_FragColor = vec4(vec3(v) * z, 1.); 
+}
+`;
+
+
+
+
+const container = document.querySelector('#container');
+
+let camera, scene, renderer, uniforms, clock, frame;
+
+const dispose = init();
+
+function init() {
+  renderer = new THREE.WebGLRenderer({antialias: true});
+  renderer.setPixelRatio(window.devicePixelRatio);
+  container.appendChild(renderer.domElement);
+  clock = new THREE.Clock();
+  // camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+  camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
+  camera.position.z = 5;
+  scene = new THREE.Scene();
+
+  const geometry = new THREE.PlaneBufferGeometry(240, 240);
+
+  const landscapeGeometry = new THREE.PlaneBufferGeometry(64, 16, 640, 80);
+
+  
+  uniforms = {
+    time: { type: 'f', value: 1.0 },
+    resolution: { type: 'v2', value: new THREE.Vector2() },
+  };
+
+  const material = new THREE.ShaderMaterial({
+    uniforms,
+    vertexShader: backgroundShader.vert,
+    fragmentShader: backgroundShader.frag,
+  });
+  const landscapeMaterial = new THREE.ShaderMaterial({
+    uniforms,
+    vertexShader: landscapeShader.vert,
+    fragmentShader: landscapeShader.frag,
+  });
+  
+  
+  
+  const landscapeMesh = new THREE.Mesh(landscapeGeometry, landscapeMaterial);
+  
+  const mesh = new THREE.Mesh(geometry, material);
+  mesh.position.set(0,-1,-10);
+  landscapeMesh.position.y = -2;
+  landscapeMesh.rotation.x = -33;
+  scene.add(landscapeMesh);
+  scene.add(mesh);
+  
+  onResize();
+  window.addEventListener('resize', onResize, false);
+  frame = requestAnimationFrame(animate);
+  
+  // tis just a reminder for you to always clean up all the 
+  // things after use.
+  // It's not needed in this pen but useful as soon there is the need to
+  // unmount/remount this component
+  const cleanup = function () {
+    cancelAnimationFrame(frame);
+    geometry.dispose();
+    material.dispose();
+    landscapeGeometry.dispose();
+    landscapeMaterial.dispose();
+    scene.remove(mesh);
+    scene.dispose();
+    renderer.dispose();
+    window.removeEventListener('resize', onResize, false);
+  }
+  return cleanup;
+}
+
+function onResize() {
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  const canvas = renderer.domElement;
+  camera.aspect = canvas.clientWidth / canvas.clientHeight;
+  camera.updateProjectionMatrix();
+  uniforms.resolution.value.x = renderer.domElement.width;
+  uniforms.resolution.value.y = renderer.domElement.height;
+}
+
+function animate(timestamp) {
+  frame = requestAnimationFrame(animate);
+  uniforms.time.value = clock.getElapsedTime();
+  renderer.render(scene, camera);
+}
\ No newline at end of file
diff --git a/wandering-through-a-generative-twilight-landscape/src/style.css b/wandering-through-a-generative-twilight-landscape/src/style.css
new file mode 100644
index 0000000..b2e2665
--- /dev/null
+++ b/wandering-through-a-generative-twilight-landscape/src/style.css
@@ -0,0 +1,9 @@
+body {
+  background: #000;
+  color: #fff;
+  margin: 0;
+}
+
+canvas {
+  display: block;
+}
\ No newline at end of file
diff --git a/water-bending/README.markdown b/water-bending/README.markdown
new file mode 100644
index 0000000..08fadc1
--- /dev/null
+++ b/water-bending/README.markdown
@@ -0,0 +1,5 @@
+# water bending
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/halvves/pen/qBqvVRO](https://codepen.io/halvves/pen/qBqvVRO).
+
+
diff --git a/water-bending/dist/index.html b/water-bending/dist/index.html
new file mode 100644
index 0000000..dbf6f29
--- /dev/null
+++ b/water-bending/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - water bending</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://unpkg.com/three@0.126.1/build/three.js'></script>
+<script src='https://unpkg.com/three@0.126.1/examples/js/controls/OrbitControls.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/water-bending/dist/script.js b/water-bending/dist/script.js
new file mode 100644
index 0000000..985c32d
--- /dev/null
+++ b/water-bending/dist/script.js
@@ -0,0 +1,89 @@
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.z = -2.5;
+camera.position.x = -5
+
+const ambient = new THREE.AmbientLight(0xffffff);
+scene.add(ambient);
+
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+let tooLazyToHandleLoadingProperly = 0;
+const loadingLol = () => tooLazyToHandleLoadingProperly++;
+const ENV_URL = 'https://s.halvves.com/gregzaal-venicedawn.jpg';
+const reflectionCube = new THREE.TextureLoader().load(ENV_URL, loadingLol);
+const refractionCube = new THREE.TextureLoader().load(ENV_URL, loadingLol);
+reflectionCube.mapping = THREE.EquirectangularReflectionMapping;
+refractionCube.mapping = THREE.EquirectangularRefractionMapping;
+scene.background = reflectionCube;
+scene.environment = reflectionCube;
+
+const geometry = new THREE.SphereGeometry(2, 128, 128);
+const base = geometry.attributes.position.array.slice();
+const refractionMaterial = new THREE.MeshPhysicalMaterial({
+  color: 0xc3e4f9,
+  envMap: refractionCube,
+  metalness: 1,
+  reflectivity: 0,
+  refractionRatio: .1,
+  roughness: 0,
+  side: THREE.DoubleSide
+});
+const reflectionMaterial = new THREE.MeshPhysicalMaterial({
+  color: 0xc3e4f9,
+  envMap: reflectionCube,
+  envMapIntensity: 1,
+  metalness: .35,
+  reflectivity: .9,
+  roughness: 0,
+  side: THREE.DoubleSide,
+  transmission: 1,
+  transparent: true,
+});
+const refractionSphere = new THREE.Mesh(geometry, refractionMaterial);
+const reflectionSphere = new THREE.Mesh(geometry, reflectionMaterial);
+const sphere = new THREE.Object3D();
+sphere.add(refractionSphere);
+sphere.add(reflectionSphere);
+scene.add(sphere);
+sphere.lookAt(camera.position);
+camera.lookAt(sphere.position);
+
+controls = new THREE.OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+
+const animate = function (dt) {
+  requestAnimationFrame(animate);
+  controls.update();
+  if (tooLazyToHandleLoadingProperly !== 2) return;
+
+  geometry.attributes.position.array.forEach((val, i, arr) => {
+    const place = i % 3;
+
+    if (place === 0) { // x
+      arr[i] = base[i] + Math.sin(base[i + 1] * 3 + dt * .002) * .1;
+    }
+
+    if (place === 1) { // y
+      arr[i] = base[i] + Math.cos(base[i - 1] * 5 + dt * .003) * .08;
+    }
+
+    if (place === 2) { // z
+      arr[i] = base[i] + Math.sin(base[i - 2] * 25 + dt * .01) * .03;
+    }
+  });
+
+  geometry.computeVertexNormals();
+  geometry.normalizeNormals();
+  geometry.attributes.position.needsUpdate = true;
+
+  const { innerWidth: w, innerHeight: h } = window;
+  renderer.setSize(w, h);
+  camera.aspect = w / h;
+  camera.updateProjectionMatrix();
+  renderer.render(scene, camera);
+};
+
+animate();
\ No newline at end of file
diff --git a/water-bending/license.txt b/water-bending/license.txt
new file mode 100644
index 0000000..19fc085
--- /dev/null
+++ b/water-bending/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by halvves (https://codepen.io/halvves/pen/qBqvVRO)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/water-bending/src/index.html b/water-bending/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/water-bending/src/script.js b/water-bending/src/script.js
new file mode 100644
index 0000000..985c32d
--- /dev/null
+++ b/water-bending/src/script.js
@@ -0,0 +1,89 @@
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.z = -2.5;
+camera.position.x = -5
+
+const ambient = new THREE.AmbientLight(0xffffff);
+scene.add(ambient);
+
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+let tooLazyToHandleLoadingProperly = 0;
+const loadingLol = () => tooLazyToHandleLoadingProperly++;
+const ENV_URL = 'https://s.halvves.com/gregzaal-venicedawn.jpg';
+const reflectionCube = new THREE.TextureLoader().load(ENV_URL, loadingLol);
+const refractionCube = new THREE.TextureLoader().load(ENV_URL, loadingLol);
+reflectionCube.mapping = THREE.EquirectangularReflectionMapping;
+refractionCube.mapping = THREE.EquirectangularRefractionMapping;
+scene.background = reflectionCube;
+scene.environment = reflectionCube;
+
+const geometry = new THREE.SphereGeometry(2, 128, 128);
+const base = geometry.attributes.position.array.slice();
+const refractionMaterial = new THREE.MeshPhysicalMaterial({
+  color: 0xc3e4f9,
+  envMap: refractionCube,
+  metalness: 1,
+  reflectivity: 0,
+  refractionRatio: .1,
+  roughness: 0,
+  side: THREE.DoubleSide
+});
+const reflectionMaterial = new THREE.MeshPhysicalMaterial({
+  color: 0xc3e4f9,
+  envMap: reflectionCube,
+  envMapIntensity: 1,
+  metalness: .35,
+  reflectivity: .9,
+  roughness: 0,
+  side: THREE.DoubleSide,
+  transmission: 1,
+  transparent: true,
+});
+const refractionSphere = new THREE.Mesh(geometry, refractionMaterial);
+const reflectionSphere = new THREE.Mesh(geometry, reflectionMaterial);
+const sphere = new THREE.Object3D();
+sphere.add(refractionSphere);
+sphere.add(reflectionSphere);
+scene.add(sphere);
+sphere.lookAt(camera.position);
+camera.lookAt(sphere.position);
+
+controls = new THREE.OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+
+const animate = function (dt) {
+  requestAnimationFrame(animate);
+  controls.update();
+  if (tooLazyToHandleLoadingProperly !== 2) return;
+
+  geometry.attributes.position.array.forEach((val, i, arr) => {
+    const place = i % 3;
+
+    if (place === 0) { // x
+      arr[i] = base[i] + Math.sin(base[i + 1] * 3 + dt * .002) * .1;
+    }
+
+    if (place === 1) { // y
+      arr[i] = base[i] + Math.cos(base[i - 1] * 5 + dt * .003) * .08;
+    }
+
+    if (place === 2) { // z
+      arr[i] = base[i] + Math.sin(base[i - 2] * 25 + dt * .01) * .03;
+    }
+  });
+
+  geometry.computeVertexNormals();
+  geometry.normalizeNormals();
+  geometry.attributes.position.needsUpdate = true;
+
+  const { innerWidth: w, innerHeight: h } = window;
+  renderer.setSize(w, h);
+  camera.aspect = w / h;
+  camera.updateProjectionMatrix();
+  renderer.render(scene, camera);
+};
+
+animate();
\ No newline at end of file
diff --git a/waves096-of-100days100projects/README.markdown b/waves096-of-100days100projects/README.markdown
new file mode 100644
index 0000000..88ccdc7
--- /dev/null
+++ b/waves096-of-100days100projects/README.markdown
@@ -0,0 +1,4 @@
+# Waves - #096 of #100Days100Projects
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/FlorinPop17/pen/WNbjQWN](https://codepen.io/FlorinPop17/pen/WNbjQWN).
+
+ 
\ No newline at end of file
diff --git a/waves096-of-100days100projects/dist/index.html b/waves096-of-100days100projects/dist/index.html
new file mode 100644
index 0000000..17718bd
--- /dev/null
+++ b/waves096-of-100days100projects/dist/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Waves - #096 of #100Days100Projects</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h3>Click a dot</h3>
+<div id="container" class="container"></div>
+
+<!-- SOCIAL PANEL HTML -->
+<div class="social-panel-container">
+	<div class="social-panel">
+		<p>Created with <i class="fa fa-heart"></i> by
+			<a target="_blank" href="https://florin-pop.com">Florin Pop</a></p>
+		<button class="close-btn"><i class="fas fa-times"></i></button>
+		<h4>Get in touch on</h4>
+		<ul>
+			<li>
+				<a href="https://www.patreon.com/florinpop17" target="_blank">
+					<i class="fab fa-discord"></i>
+				</a>
+			</li>
+			<li>
+				<a href="https://twitter.com/florinpop1705" target="_blank">
+					<i class="fab fa-twitter"></i>
+				</a>
+			</li>
+			<li>
+				<a href="https://linkedin.com/in/florinpop17" target="_blank">
+					<i class="fab fa-linkedin"></i>
+				</a>
+			</li>
+			<li>
+				<a href="https://facebook.com/florinpop17" target="_blank">
+					<i class="fab fa-facebook"></i>
+				</a>
+			</li>
+			<li>
+				<a href="https://instagram.com/florinpop17" target="_blank">
+					<i class="fab fa-instagram"></i>
+				</a>
+			</li>
+		</ul>
+	</div>
+</div>
+<button class="floating-btn">
+	Get in Touch
+</button>
+
+<div class="floating-text">
+	Part of <a href="https://florin-pop.com/blog/2019/09/100-days-100-projects" target="_blank">#100Days100Projects</a>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/waves096-of-100days100projects/dist/script.js b/waves096-of-100days100projects/dist/script.js
new file mode 100644
index 0000000..97504d9
--- /dev/null
+++ b/waves096-of-100days100projects/dist/script.js
@@ -0,0 +1,55 @@
+const container = document.getElementById('container');
+let circlesArr = [];
+let rows = 15;
+let cols = 15;
+
+// create circles
+for(let i=0; i<cols; i++) {
+	circlesArr[i] = [];
+	for(let j=0; j<rows; j++) {
+		const circle = document.createElement('div');
+		circle.classList.add('circle');
+		container.appendChild(circle);
+		circlesArr[i].push(circle);	
+	}
+}
+
+circlesArr.forEach((cols, i) => {
+	cols.forEach((circle, j) => {
+		circle.addEventListener('click', () => {
+			growCircles(i, j);
+		});
+	});
+});
+
+function growCircles(i, j) {
+	if(circlesArr[i] && circlesArr[i][j]) {
+		if(!circlesArr[i][j].classList.contains('grow')) {
+			circlesArr[i][j].classList.add('grow');
+			setTimeout(() => {
+				growCircles(i-1, j)
+				growCircles(i+1, j)
+				growCircles(i, j-1)
+				growCircles(i, j+1)
+			}, 100)
+			
+			setTimeout(() => {
+				circlesArr[i][j].classList.remove('grow');
+			}, 300);
+		}
+	}
+}
+
+
+// SOCIAL PANEL JS
+const floating_btn = document.querySelector('.floating-btn');
+const close_btn = document.querySelector('.close-btn');
+const social_panel_container = document.querySelector('.social-panel-container');
+
+floating_btn.addEventListener('click', () => {
+	social_panel_container.classList.toggle('visible')
+});
+
+close_btn.addEventListener('click', () => {
+	social_panel_container.classList.remove('visible')
+});
\ No newline at end of file
diff --git a/waves096-of-100days100projects/dist/style.css b/waves096-of-100days100projects/dist/style.css
new file mode 100644
index 0000000..73b4234
--- /dev/null
+++ b/waves096-of-100days100projects/dist/style.css
@@ -0,0 +1,207 @@
+@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	background-color: #5295F1;
+	color: #fff;
+	font-family: 'Muli', sans-serif;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
+	margin: 0;
+}
+
+h3 {
+	color: #fff;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+}
+
+.container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	width: 450px;
+}
+
+.circle {
+	background-image: linear-gradient(to bottom, #fff, #eee);
+	border-radius: 50%;
+	cursor: pointer;
+	margin: 8px;
+	height: 14px;
+	width: 14px;
+	transition: transform 0.3s linear;
+}
+
+.circle.grow {
+	transform: scale(2);
+}
+
+
+/* SOCIAL PANEL CSS */
+.social-panel-container {
+	position: fixed;
+	right: 0;
+	bottom: 80px;
+	transform: translateX(100%);
+	transition: transform 0.4s ease-in-out;
+}
+
+.social-panel-container.visible {
+	transform: translateX(-10px);
+}
+
+.social-panel {	
+	background-color: #fff;
+	border-radius: 16px;
+	box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
+	border: 5px solid #001F61;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	font-family: 'Muli';
+	position: relative;
+	height: 169px;	
+	width: 370px;
+	max-width: calc(100% - 10px);
+}
+
+.social-panel button.close-btn {
+	border: 0;
+	color: #97A5CE;
+	cursor: pointer;
+	font-size: 20px;
+	position: absolute;
+	top: 5px;
+	right: 5px;
+}
+
+.social-panel button.close-btn:focus {
+	outline: none;
+}
+
+.social-panel p {
+	background-color: #001F61;
+	border-radius: 0 0 10px 10px;
+	color: #fff;
+	font-size: 14px;
+	line-height: 18px;
+	padding: 2px 17px 6px;
+	position: absolute;
+	top: 0;
+	left: 50%;
+	margin: 0;
+	transform: translateX(-50%);
+	text-align: center;
+	width: 235px;
+}
+
+.social-panel p i {
+	margin: 0 5px;
+}
+
+.social-panel p a {
+	color: #FF7500;
+	text-decoration: none;
+}
+
+.social-panel h4 {
+	margin: 20px 0;
+	color: #97A5CE;	
+	font-family: 'Muli';	
+	font-size: 14px;	
+	line-height: 18px;
+	text-transform: uppercase;
+}
+
+.social-panel ul {
+	display: flex;
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+}
+
+.social-panel ul li {
+	margin: 0 10px;
+}
+
+.social-panel ul li a {
+	border: 1px solid #DCE1F2;
+	border-radius: 50%;
+	color: #001F61;
+	font-size: 20px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 50px;
+	width: 50px;
+	text-decoration: none;
+}
+
+.social-panel ul li a:hover {
+	border-color: #FF6A00;
+	box-shadow: 0 9px 12px -9px #FF6A00;
+}
+
+.floating-btn {
+	border-radius: 26.5px;
+	background-color: #001F61;
+	border: 1px solid #001F61;
+	box-shadow: 0 16px 22px -17px #03153B;
+	color: #fff;
+	cursor: pointer;
+	font-size: 16px;
+	line-height: 20px;
+	padding: 12px 20px;
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
+	z-index: 999;
+}
+
+.floating-btn:hover {
+	background-color: #ffffff;
+	color: #001F61;
+}
+
+.floating-btn:focus {
+	outline: none;
+}
+
+.floating-text {
+	background-color: #001F61;
+	border-radius: 10px 10px 0 0;
+	color: #fff;
+	font-family: 'Muli';
+	padding: 7px 15px;
+	position: fixed;
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	text-align: center;
+	z-index: 998;
+}
+
+.floating-text a {
+	color: #FF7500;
+	text-decoration: none;
+}
+
+@media screen and (max-width: 480px) {
+
+	.social-panel-container.visible {
+		transform: translateX(0px);
+	}
+	
+	.floating-btn {
+		right: 10px;
+	}
+}
\ No newline at end of file
diff --git a/waves096-of-100days100projects/license.txt b/waves096-of-100days100projects/license.txt
new file mode 100644
index 0000000..97f6eaf
--- /dev/null
+++ b/waves096-of-100days100projects/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2019 by Florin Pop (https://codepen.io/FlorinPop17/pen/WNbjQWN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/waves096-of-100days100projects/src/index.html b/waves096-of-100days100projects/src/index.html
new file mode 100644
index 0000000..b428d9f
--- /dev/null
+++ b/waves096-of-100days100projects/src/index.html
@@ -0,0 +1,46 @@
+<h3>Click a dot</h3>
+<div id="container" class="container"></div>
+
+<!-- SOCIAL PANEL HTML -->
+<div class="social-panel-container">
+	<div class="social-panel">
+		<p>Created with <i class="fa fa-heart"></i> by
+			<a target="_blank" href="https://florin-pop.com">Florin Pop</a></p>
+		<button class="close-btn"><i class="fas fa-times"></i></button>
+		<h4>Get in touch on</h4>
+		<ul>
+			<li>
+				<a href="https://www.patreon.com/florinpop17" target="_blank">
+					<i class="fab fa-discord"></i>
+				</a>
+			</li>
+			<li>
+				<a href="https://twitter.com/florinpop1705" target="_blank">
+					<i class="fab fa-twitter"></i>
+				</a>
+			</li>
+			<li>
+				<a href="https://linkedin.com/in/florinpop17" target="_blank">
+					<i class="fab fa-linkedin"></i>
+				</a>
+			</li>
+			<li>
+				<a href="https://facebook.com/florinpop17" target="_blank">
+					<i class="fab fa-facebook"></i>
+				</a>
+			</li>
+			<li>
+				<a href="https://instagram.com/florinpop17" target="_blank">
+					<i class="fab fa-instagram"></i>
+				</a>
+			</li>
+		</ul>
+	</div>
+</div>
+<button class="floating-btn">
+	Get in Touch
+</button>
+
+<div class="floating-text">
+	Part of <a href="https://florin-pop.com/blog/2019/09/100-days-100-projects" target="_blank">#100Days100Projects</a>
+</div>
\ No newline at end of file
diff --git a/waves096-of-100days100projects/src/script.js b/waves096-of-100days100projects/src/script.js
new file mode 100644
index 0000000..97504d9
--- /dev/null
+++ b/waves096-of-100days100projects/src/script.js
@@ -0,0 +1,55 @@
+const container = document.getElementById('container');
+let circlesArr = [];
+let rows = 15;
+let cols = 15;
+
+// create circles
+for(let i=0; i<cols; i++) {
+	circlesArr[i] = [];
+	for(let j=0; j<rows; j++) {
+		const circle = document.createElement('div');
+		circle.classList.add('circle');
+		container.appendChild(circle);
+		circlesArr[i].push(circle);	
+	}
+}
+
+circlesArr.forEach((cols, i) => {
+	cols.forEach((circle, j) => {
+		circle.addEventListener('click', () => {
+			growCircles(i, j);
+		});
+	});
+});
+
+function growCircles(i, j) {
+	if(circlesArr[i] && circlesArr[i][j]) {
+		if(!circlesArr[i][j].classList.contains('grow')) {
+			circlesArr[i][j].classList.add('grow');
+			setTimeout(() => {
+				growCircles(i-1, j)
+				growCircles(i+1, j)
+				growCircles(i, j-1)
+				growCircles(i, j+1)
+			}, 100)
+			
+			setTimeout(() => {
+				circlesArr[i][j].classList.remove('grow');
+			}, 300);
+		}
+	}
+}
+
+
+// SOCIAL PANEL JS
+const floating_btn = document.querySelector('.floating-btn');
+const close_btn = document.querySelector('.close-btn');
+const social_panel_container = document.querySelector('.social-panel-container');
+
+floating_btn.addEventListener('click', () => {
+	social_panel_container.classList.toggle('visible')
+});
+
+close_btn.addEventListener('click', () => {
+	social_panel_container.classList.remove('visible')
+});
\ No newline at end of file
diff --git a/waves096-of-100days100projects/src/style.css b/waves096-of-100days100projects/src/style.css
new file mode 100644
index 0000000..73b4234
--- /dev/null
+++ b/waves096-of-100days100projects/src/style.css
@@ -0,0 +1,207 @@
+@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	background-color: #5295F1;
+	color: #fff;
+	font-family: 'Muli', sans-serif;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
+	margin: 0;
+}
+
+h3 {
+	color: #fff;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+}
+
+.container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	width: 450px;
+}
+
+.circle {
+	background-image: linear-gradient(to bottom, #fff, #eee);
+	border-radius: 50%;
+	cursor: pointer;
+	margin: 8px;
+	height: 14px;
+	width: 14px;
+	transition: transform 0.3s linear;
+}
+
+.circle.grow {
+	transform: scale(2);
+}
+
+
+/* SOCIAL PANEL CSS */
+.social-panel-container {
+	position: fixed;
+	right: 0;
+	bottom: 80px;
+	transform: translateX(100%);
+	transition: transform 0.4s ease-in-out;
+}
+
+.social-panel-container.visible {
+	transform: translateX(-10px);
+}
+
+.social-panel {	
+	background-color: #fff;
+	border-radius: 16px;
+	box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
+	border: 5px solid #001F61;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	font-family: 'Muli';
+	position: relative;
+	height: 169px;	
+	width: 370px;
+	max-width: calc(100% - 10px);
+}
+
+.social-panel button.close-btn {
+	border: 0;
+	color: #97A5CE;
+	cursor: pointer;
+	font-size: 20px;
+	position: absolute;
+	top: 5px;
+	right: 5px;
+}
+
+.social-panel button.close-btn:focus {
+	outline: none;
+}
+
+.social-panel p {
+	background-color: #001F61;
+	border-radius: 0 0 10px 10px;
+	color: #fff;
+	font-size: 14px;
+	line-height: 18px;
+	padding: 2px 17px 6px;
+	position: absolute;
+	top: 0;
+	left: 50%;
+	margin: 0;
+	transform: translateX(-50%);
+	text-align: center;
+	width: 235px;
+}
+
+.social-panel p i {
+	margin: 0 5px;
+}
+
+.social-panel p a {
+	color: #FF7500;
+	text-decoration: none;
+}
+
+.social-panel h4 {
+	margin: 20px 0;
+	color: #97A5CE;	
+	font-family: 'Muli';	
+	font-size: 14px;	
+	line-height: 18px;
+	text-transform: uppercase;
+}
+
+.social-panel ul {
+	display: flex;
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+}
+
+.social-panel ul li {
+	margin: 0 10px;
+}
+
+.social-panel ul li a {
+	border: 1px solid #DCE1F2;
+	border-radius: 50%;
+	color: #001F61;
+	font-size: 20px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 50px;
+	width: 50px;
+	text-decoration: none;
+}
+
+.social-panel ul li a:hover {
+	border-color: #FF6A00;
+	box-shadow: 0 9px 12px -9px #FF6A00;
+}
+
+.floating-btn {
+	border-radius: 26.5px;
+	background-color: #001F61;
+	border: 1px solid #001F61;
+	box-shadow: 0 16px 22px -17px #03153B;
+	color: #fff;
+	cursor: pointer;
+	font-size: 16px;
+	line-height: 20px;
+	padding: 12px 20px;
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
+	z-index: 999;
+}
+
+.floating-btn:hover {
+	background-color: #ffffff;
+	color: #001F61;
+}
+
+.floating-btn:focus {
+	outline: none;
+}
+
+.floating-text {
+	background-color: #001F61;
+	border-radius: 10px 10px 0 0;
+	color: #fff;
+	font-family: 'Muli';
+	padding: 7px 15px;
+	position: fixed;
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	text-align: center;
+	z-index: 998;
+}
+
+.floating-text a {
+	color: #FF7500;
+	text-decoration: none;
+}
+
+@media screen and (max-width: 480px) {
+
+	.social-panel-container.visible {
+		transform: translateX(0px);
+	}
+	
+	.floating-btn {
+		right: 10px;
+	}
+}
\ No newline at end of file
diff --git a/webgl-markers/README.markdown b/webgl-markers/README.markdown
new file mode 100644
index 0000000..7c7b03f
--- /dev/null
+++ b/webgl-markers/README.markdown
@@ -0,0 +1,5 @@
+# WebGL markers
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/monfera/pen/GjOBkJ](https://codepen.io/monfera/pen/GjOBkJ).
+
+
diff --git a/webgl-markers/dist/index.html b/webgl-markers/dist/index.html
new file mode 100644
index 0000000..b5a9d5e
--- /dev/null
+++ b/webgl-markers/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - WebGL markers</title>
+  
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script src="https://rawcdn.githack.com/monfera/ndarray-bundle/cbbafcb5/ndarray.min.js"></script>
+<script src="https://rawcdn.githack.com/regl-project/regl/v1.3.13/dist/regl.min.js"></script>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/webgl-markers/dist/script.js b/webgl-markers/dist/script.js
new file mode 100644
index 0000000..98043de
--- /dev/null
+++ b/webgl-markers/dist/script.js
@@ -0,0 +1,232 @@
+// short writeup: https://bl.ocks.org/monfera/85aa9627de1ae521d3ac5b26c9cd1c49
+
+// http://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12
+// except yellow
+const palette = [
+  [166,206,227],
+  [ 31,120,180],
+  [178,223,138],
+  [ 51,160, 44],
+  [251,154,153],
+  [227, 26, 28],
+  [253,191,111],
+  [255,127,  0],
+  [202,178,214],
+  [106, 61,154],
+  [177, 89, 40]
+]
+
+const regl = window.createREGL()
+
+const lineCount = 11
+const pointCount = 5
+
+const lineWidth = 2
+
+// padding is interpreted as percentage of the screen width or height
+const xPadding = 0.1
+const yPadding = 0.25
+const xScale = x => 2 * (1 - 2 * xPadding) * (x - 0.5)
+const yScale = y => 2 * (1 - 2 * yPadding) * (y - 0.5)
+
+// nd :: typedArrayClass -> array -> ndarray
+const nd = (Array, dimensions) => ndarray(
+  new Array(dimensions.reduce((p, n) => p * n, 1)),
+  dimensions
+)
+
+const colorLineAesthetic = ({lineWidth}) => ({
+
+  vert: `
+    precision mediump float;
+
+    attribute vec4 position;
+    attribute vec4 color;
+    uniform float tween;
+
+    varying vec4 c;
+
+    float smootherstep(float edge0, float edge1, float x) {
+      x = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+      return x*x*x*(x*(x*6.0 - 15.0) + 10.0);
+    }
+  
+    void main() {
+      float tweenedX = mix(position[0], position[1], smootherstep(0.0, 1.0, tween));
+      float tweenedY = mix(position[2], position[3], smootherstep(0.0, 1.0, tween));
+      gl_Position = vec4(tweenedX, tweenedY, 0, 1);
+      c = color;
+      gl_PointSize = 40.0;
+    }`,
+
+  frag: `
+    precision mediump float;
+
+    uniform mat3 S1;
+    uniform mat3 S2;
+    uniform float tween;
+
+    varying vec4 c;
+
+    vec2 pos = vec2(0.5, 0.5);
+
+    float superFormula(mat3 S, float fi) {
+    
+      float a  = S[0][0];
+      float b  = S[0][1];
+      float m1 = S[0][2];
+      float m2 = S[1][0];
+      float n1 = S[1][1];
+      float n2 = S[1][2];
+      float n3 = S[2][0];
+    
+      float r = pow(    pow(abs(cos(m1 * fi / 4.0) / a), n2) 
+                      + pow(abs(sin(m2 * fi / 4.0) / b), n3), 
+                    -1.0 / n1
+                   );
+
+      return r;
+    }
+    
+    void main() {
+    
+      float dist = distance(gl_PointCoord.xy, pos);
+      vec2 dist2 = gl_PointCoord - pos;
+      float fi = atan(dist2.y, dist2.x);
+
+      float r1 = superFormula(S1, fi);
+      float r2 = superFormula(S2, fi);
+      float r = mix(r1, r2, smoothstep(0.0, 1.0, tween));
+
+      if(dist > r / 2.5) discard;
+      gl_FragColor = c;
+    }`,
+
+  primitive: 'points',
+
+  lineWidth
+
+})
+
+/* For performance reasons, the model format is identical with the format
+ * that regl expects attribute arrays to be in.
+ */
+const model = (({lineCount, pointCount, xScale, yScale}) => {
+
+  const positionLength = 4
+  const colorLength = 4
+
+  const position = nd(Float32Array, [lineCount, pointCount, positionLength])
+  const color = nd(Float32Array, [lineCount, pointCount, colorLength])
+  let i, j, x1, x2, y1, y2
+
+  for(i = 0; i < lineCount; i++) {
+
+    for(j = 0; j < pointCount; j++) {
+      x1 = Math.random()
+      x2 = Math.random()
+      y1 = Math.random()
+      y2 = Math.random()
+      position.set(i, j, 0, xScale(x1))
+      position.set(i, j, 1, xScale(x2))
+      position.set(i, j, 2, yScale(y1))
+      position.set(i, j, 3, yScale(y2))
+      color.set(i, j, 0, palette[i][0] / 255)
+      color.set(i, j, 1, palette[i][1] / 255)
+      color.set(i, j, 2, palette[i][2] / 255)
+      color.set(i, j, 3, 1)
+    }
+  }
+
+  return {
+    lineCount,
+    pointCount,
+    attributes: {
+      position: position.data,
+      color: color.data
+    },
+    staticUniforms: {
+
+      // cross
+      S1 : [
+        /* a=  */  1,
+        /* b=  */  0.6875,
+        /* m1= */  8,
+        /* m2= */  8,
+        /* n1= */  1.3,
+        /* n2= */  0.01,
+        /* n3= */  3.313,
+        /*      */ 0,
+        /*      */ 0,
+      ],
+
+      // hexagon
+      S2 : [
+        /* a=  */  1,
+        /* b=  */  1,
+        /* m1= */  6,
+        /* m2= */  6,
+        /* n1= */  100,
+        /* n2= */  40,
+        /* n3= */  40,
+        /*      */ 0,
+        /*      */ 0,
+      ]
+    }
+  }
+
+})({lineCount, pointCount, xScale, yScale})
+
+const lineViewModelMaker = model => {
+
+  const elements = []
+  let i, j
+  let index = 0
+
+  const {lineCount, pointCount, attributes, staticUniforms} = model
+
+  const uniforms = Object.assign(
+    {},
+    staticUniforms,
+    {
+      tween: ({time}) => Math.cos(time / 2) + 1 / 2
+    })
+
+  for(i = 0; i < lineCount; i++) {
+    for(j = 0; j < pointCount; j++) {
+      elements.push(index)
+      index++
+    }
+  }
+
+  return {attributes, uniforms, elements}
+}
+
+const linesDrawerMaker = model => {
+
+  const aesthetic = colorLineAesthetic
+
+  const layer = Object.assign(
+    {},
+    lineViewModelMaker(model),
+    aesthetic({lineWidth: lineWidth})
+  )
+
+  return regl(layer)
+}
+
+const linesDrawer = linesDrawerMaker(model)
+
+const render = () => {
+
+  regl.frame(() => {
+
+    regl.clear({
+      color: [1, 1, 1, 1]
+    })
+
+    linesDrawer()
+  })
+}
+
+render()
\ No newline at end of file
diff --git a/webgl-markers/license.txt b/webgl-markers/license.txt
new file mode 100644
index 0000000..d010ba7
--- /dev/null
+++ b/webgl-markers/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Robert Monfera (https://codepen.io/monfera/pen/GjOBkJ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/webgl-markers/src/index.html b/webgl-markers/src/index.html
new file mode 100644
index 0000000..d916d5a
--- /dev/null
+++ b/webgl-markers/src/index.html
@@ -0,0 +1,2 @@
+<script src="https://rawcdn.githack.com/monfera/ndarray-bundle/cbbafcb5/ndarray.min.js"></script>
+<script src="https://rawcdn.githack.com/regl-project/regl/v1.3.13/dist/regl.min.js"></script>
\ No newline at end of file
diff --git a/webgl-markers/src/script.js b/webgl-markers/src/script.js
new file mode 100644
index 0000000..98043de
--- /dev/null
+++ b/webgl-markers/src/script.js
@@ -0,0 +1,232 @@
+// short writeup: https://bl.ocks.org/monfera/85aa9627de1ae521d3ac5b26c9cd1c49
+
+// http://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12
+// except yellow
+const palette = [
+  [166,206,227],
+  [ 31,120,180],
+  [178,223,138],
+  [ 51,160, 44],
+  [251,154,153],
+  [227, 26, 28],
+  [253,191,111],
+  [255,127,  0],
+  [202,178,214],
+  [106, 61,154],
+  [177, 89, 40]
+]
+
+const regl = window.createREGL()
+
+const lineCount = 11
+const pointCount = 5
+
+const lineWidth = 2
+
+// padding is interpreted as percentage of the screen width or height
+const xPadding = 0.1
+const yPadding = 0.25
+const xScale = x => 2 * (1 - 2 * xPadding) * (x - 0.5)
+const yScale = y => 2 * (1 - 2 * yPadding) * (y - 0.5)
+
+// nd :: typedArrayClass -> array -> ndarray
+const nd = (Array, dimensions) => ndarray(
+  new Array(dimensions.reduce((p, n) => p * n, 1)),
+  dimensions
+)
+
+const colorLineAesthetic = ({lineWidth}) => ({
+
+  vert: `
+    precision mediump float;
+
+    attribute vec4 position;
+    attribute vec4 color;
+    uniform float tween;
+
+    varying vec4 c;
+
+    float smootherstep(float edge0, float edge1, float x) {
+      x = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+      return x*x*x*(x*(x*6.0 - 15.0) + 10.0);
+    }
+  
+    void main() {
+      float tweenedX = mix(position[0], position[1], smootherstep(0.0, 1.0, tween));
+      float tweenedY = mix(position[2], position[3], smootherstep(0.0, 1.0, tween));
+      gl_Position = vec4(tweenedX, tweenedY, 0, 1);
+      c = color;
+      gl_PointSize = 40.0;
+    }`,
+
+  frag: `
+    precision mediump float;
+
+    uniform mat3 S1;
+    uniform mat3 S2;
+    uniform float tween;
+
+    varying vec4 c;
+
+    vec2 pos = vec2(0.5, 0.5);
+
+    float superFormula(mat3 S, float fi) {
+    
+      float a  = S[0][0];
+      float b  = S[0][1];
+      float m1 = S[0][2];
+      float m2 = S[1][0];
+      float n1 = S[1][1];
+      float n2 = S[1][2];
+      float n3 = S[2][0];
+    
+      float r = pow(    pow(abs(cos(m1 * fi / 4.0) / a), n2) 
+                      + pow(abs(sin(m2 * fi / 4.0) / b), n3), 
+                    -1.0 / n1
+                   );
+
+      return r;
+    }
+    
+    void main() {
+    
+      float dist = distance(gl_PointCoord.xy, pos);
+      vec2 dist2 = gl_PointCoord - pos;
+      float fi = atan(dist2.y, dist2.x);
+
+      float r1 = superFormula(S1, fi);
+      float r2 = superFormula(S2, fi);
+      float r = mix(r1, r2, smoothstep(0.0, 1.0, tween));
+
+      if(dist > r / 2.5) discard;
+      gl_FragColor = c;
+    }`,
+
+  primitive: 'points',
+
+  lineWidth
+
+})
+
+/* For performance reasons, the model format is identical with the format
+ * that regl expects attribute arrays to be in.
+ */
+const model = (({lineCount, pointCount, xScale, yScale}) => {
+
+  const positionLength = 4
+  const colorLength = 4
+
+  const position = nd(Float32Array, [lineCount, pointCount, positionLength])
+  const color = nd(Float32Array, [lineCount, pointCount, colorLength])
+  let i, j, x1, x2, y1, y2
+
+  for(i = 0; i < lineCount; i++) {
+
+    for(j = 0; j < pointCount; j++) {
+      x1 = Math.random()
+      x2 = Math.random()
+      y1 = Math.random()
+      y2 = Math.random()
+      position.set(i, j, 0, xScale(x1))
+      position.set(i, j, 1, xScale(x2))
+      position.set(i, j, 2, yScale(y1))
+      position.set(i, j, 3, yScale(y2))
+      color.set(i, j, 0, palette[i][0] / 255)
+      color.set(i, j, 1, palette[i][1] / 255)
+      color.set(i, j, 2, palette[i][2] / 255)
+      color.set(i, j, 3, 1)
+    }
+  }
+
+  return {
+    lineCount,
+    pointCount,
+    attributes: {
+      position: position.data,
+      color: color.data
+    },
+    staticUniforms: {
+
+      // cross
+      S1 : [
+        /* a=  */  1,
+        /* b=  */  0.6875,
+        /* m1= */  8,
+        /* m2= */  8,
+        /* n1= */  1.3,
+        /* n2= */  0.01,
+        /* n3= */  3.313,
+        /*      */ 0,
+        /*      */ 0,
+      ],
+
+      // hexagon
+      S2 : [
+        /* a=  */  1,
+        /* b=  */  1,
+        /* m1= */  6,
+        /* m2= */  6,
+        /* n1= */  100,
+        /* n2= */  40,
+        /* n3= */  40,
+        /*      */ 0,
+        /*      */ 0,
+      ]
+    }
+  }
+
+})({lineCount, pointCount, xScale, yScale})
+
+const lineViewModelMaker = model => {
+
+  const elements = []
+  let i, j
+  let index = 0
+
+  const {lineCount, pointCount, attributes, staticUniforms} = model
+
+  const uniforms = Object.assign(
+    {},
+    staticUniforms,
+    {
+      tween: ({time}) => Math.cos(time / 2) + 1 / 2
+    })
+
+  for(i = 0; i < lineCount; i++) {
+    for(j = 0; j < pointCount; j++) {
+      elements.push(index)
+      index++
+    }
+  }
+
+  return {attributes, uniforms, elements}
+}
+
+const linesDrawerMaker = model => {
+
+  const aesthetic = colorLineAesthetic
+
+  const layer = Object.assign(
+    {},
+    lineViewModelMaker(model),
+    aesthetic({lineWidth: lineWidth})
+  )
+
+  return regl(layer)
+}
+
+const linesDrawer = linesDrawerMaker(model)
+
+const render = () => {
+
+  regl.frame(() => {
+
+    regl.clear({
+      color: [1, 1, 1, 1]
+    })
+
+    linesDrawer()
+  })
+}
+
+render()
\ No newline at end of file
diff --git a/webpack-zdog/README.markdown b/webpack-zdog/README.markdown
new file mode 100644
index 0000000..16ad6e7
--- /dev/null
+++ b/webpack-zdog/README.markdown
@@ -0,0 +1,4 @@
+# webpack Zdog
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/karimhossenbux/pen/yWGWqg](https://codepen.io/karimhossenbux/pen/yWGWqg).
+
+ 
\ No newline at end of file
diff --git a/webpack-zdog/dist/index.html b/webpack-zdog/dist/index.html
new file mode 100644
index 0000000..1f5c3e4
--- /dev/null
+++ b/webpack-zdog/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>webpack Zdog</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas class="illo" width="240" height="240"></canvas>
+<!-- partial -->
+  <script src='https://unpkg.com/zdog@1/dist/zdog.dist.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/webpack-zdog/dist/script.js b/webpack-zdog/dist/script.js
new file mode 100644
index 0000000..a1def99
--- /dev/null
+++ b/webpack-zdog/dist/script.js
@@ -0,0 +1,51 @@
+let illo = new Zdog.Illustration({
+  element: '.illo',
+  rotate: { x: -Zdog.TAU/10, y: Zdog.TAU/8 },
+  dragRotate: true,
+})
+
+let smallGroup = new Zdog.Group({ addTo: illo })
+let bigGroup = new Zdog.Group({ addTo: illo })
+
+let smallCube = new Zdog.Box({
+  addTo: smallGroup,
+  width: 60,
+  height: 60,
+  depth: 60,
+  storke: false,
+  fill: true,
+  color: '#175d96'
+})
+smallCube.copy({
+  addTo: smallGroup,
+  stroke: 1,
+  fill: false,
+  color: '#fff'
+})
+
+let bigCube = new Zdog.Box({
+  addTo: illo,
+  width: 120,
+  height: 120,
+  depth: 120,
+  stroke: false,
+  fill: true,
+  color: 'rgba(141, 214, 249, 0.5)'
+})
+bigCube.copy({
+  addTo: bigCube,
+  stroke: 3,
+  fill: false,
+  color: '#FFF'
+})
+
+function animate() {
+  smallGroup.rotate.y += 0.01
+  bigCube.rotate.y -= 0.01
+  // Fun rotation
+  // illo.rotate.z += 0.01
+  illo.updateRenderGraph()
+  requestAnimationFrame(animate)
+}
+
+animate()
\ No newline at end of file
diff --git a/webpack-zdog/dist/style.css b/webpack-zdog/dist/style.css
new file mode 100644
index 0000000..e48754f
--- /dev/null
+++ b/webpack-zdog/dist/style.css
@@ -0,0 +1,3 @@
+body {
+  background-color: #2b3a42;
+}
\ No newline at end of file
diff --git a/webpack-zdog/license.txt b/webpack-zdog/license.txt
new file mode 100644
index 0000000..c406bda
--- /dev/null
+++ b/webpack-zdog/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Karim (https://codepen.io/karimhossenbux/pen/yWGWqg)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/webpack-zdog/src/index.html b/webpack-zdog/src/index.html
new file mode 100644
index 0000000..bde4e75
--- /dev/null
+++ b/webpack-zdog/src/index.html
@@ -0,0 +1 @@
+<canvas class="illo" width="240" height="240"></canvas>
\ No newline at end of file
diff --git a/webpack-zdog/src/script.js b/webpack-zdog/src/script.js
new file mode 100644
index 0000000..a1def99
--- /dev/null
+++ b/webpack-zdog/src/script.js
@@ -0,0 +1,51 @@
+let illo = new Zdog.Illustration({
+  element: '.illo',
+  rotate: { x: -Zdog.TAU/10, y: Zdog.TAU/8 },
+  dragRotate: true,
+})
+
+let smallGroup = new Zdog.Group({ addTo: illo })
+let bigGroup = new Zdog.Group({ addTo: illo })
+
+let smallCube = new Zdog.Box({
+  addTo: smallGroup,
+  width: 60,
+  height: 60,
+  depth: 60,
+  storke: false,
+  fill: true,
+  color: '#175d96'
+})
+smallCube.copy({
+  addTo: smallGroup,
+  stroke: 1,
+  fill: false,
+  color: '#fff'
+})
+
+let bigCube = new Zdog.Box({
+  addTo: illo,
+  width: 120,
+  height: 120,
+  depth: 120,
+  stroke: false,
+  fill: true,
+  color: 'rgba(141, 214, 249, 0.5)'
+})
+bigCube.copy({
+  addTo: bigCube,
+  stroke: 3,
+  fill: false,
+  color: '#FFF'
+})
+
+function animate() {
+  smallGroup.rotate.y += 0.01
+  bigCube.rotate.y -= 0.01
+  // Fun rotation
+  // illo.rotate.z += 0.01
+  illo.updateRenderGraph()
+  requestAnimationFrame(animate)
+}
+
+animate()
\ No newline at end of file
diff --git a/webpack-zdog/src/style.css b/webpack-zdog/src/style.css
new file mode 100644
index 0000000..e48754f
--- /dev/null
+++ b/webpack-zdog/src/style.css
@@ -0,0 +1,3 @@
+body {
+  background-color: #2b3a42;
+}
\ No newline at end of file
diff --git a/what-s-behind/README.markdown b/what-s-behind/README.markdown
new file mode 100644
index 0000000..61b970f
--- /dev/null
+++ b/what-s-behind/README.markdown
@@ -0,0 +1,4 @@
+# What's behind ?
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/soju22/pen/BaNKwpZ](https://codepen.io/soju22/pen/BaNKwpZ).
+
+ 
\ No newline at end of file
diff --git a/what-s-behind/dist/index.html b/what-s-behind/dist/index.html
new file mode 100644
index 0000000..5ae64c8
--- /dev/null
+++ b/what-s-behind/dist/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - What&#39;s behind ?</title>
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas id="canvas"></canvas>
+
+<h1>What's behind the curtain ?</h1>
+<p>This funny interactive curtain is made with ThreeJS, polylines and verlet constraints (adapted from verlet-js).</p>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js'></script>
+<script src='https://klevron.github.io/codepen/lib/verlet-1.0.0.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/what-s-behind/dist/script.js b/what-s-behind/dist/script.js
new file mode 100644
index 0000000..09aa154
--- /dev/null
+++ b/what-s-behind/dist/script.js
@@ -0,0 +1,290 @@
+function App() {
+  const conf = {
+    el: 'canvas',
+    gravity: -0.3,
+    nx: 80,
+    ny: 40,
+    size: 1.5,
+    mouseRadius: 10,
+    mouseStrength: 0.4 };
+
+
+  let renderer, scene, camera;
+  let width, height;
+  const { randFloat: rnd, randFloatSpread: rndFS } = THREE.Math;
+
+  const mouse = new THREE.Vector2(),oldMouse = new THREE.Vector2();
+  const verlet = new VerletJS(),polylines = [];
+  const uCx = { value: 0 },uCy = { value: 0 };
+
+  init();
+
+  function init() {
+    renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(conf.el), antialias: true, alpha: true });
+    camera = new THREE.PerspectiveCamera();
+
+    verlet.width = 256;
+    verlet.height = 256;
+
+    updateSize();
+    window.addEventListener('resize', updateSize, false);
+
+    initScene();
+    initListeners();
+    animate();
+  }
+
+  function initScene() {
+    scene = new THREE.Scene();
+    verlet.gravity = new Vec2(0, conf.gravity);
+
+    initCurtain();
+  }
+
+  function initCurtain() {
+    const material = new THREE.ShaderMaterial({
+      transparent: true,
+      uniforms: {
+        uCx, uCy,
+        uSize: { value: conf.size / conf.nx } },
+
+      vertexShader: `
+        uniform float uCx;
+        uniform float uCy;
+        uniform float uSize;
+        attribute vec3 color;
+        attribute vec3 next;
+        attribute vec3 prev;
+        attribute float side;
+
+        varying vec4 vColor;
+
+        void main() {
+          vec3 pos = vec3(position.x * uCx, position.y * uCy, 0.0);
+          vec2 sprev = vec2(prev.x * uCx, prev.y * uCy);
+          vec2 snext = vec2(next.x * uCx, next.y * uCy);
+
+          vec2 tangent = normalize(snext - sprev);
+          vec2 normal = vec2(-tangent.y, tangent.x);
+
+          float dist = length(snext - sprev);
+          normal *= smoothstep(0.0, 0.02, dist);
+
+          vColor = vec4(color, 1.0 - smoothstep(0.5, 1.0, uv.y) * 0.5);
+
+          normal *= uSize;// * (1.0 - uv.y);
+          pos.xy -= normal * side;
+
+          gl_Position = vec4(pos, 1.0);
+        }
+      `,
+      fragmentShader: `
+        varying vec4 vColor;
+        void main() {
+          gl_FragColor = vColor;
+        }
+      ` });
+
+
+    const dx = verlet.width / conf.nx,dy = -verlet.height / conf.ny;
+    const ox = -dx * (conf.nx / 2 - 0.5),oy = verlet.height / 2 - dy / 2;
+    // const cscale = chroma.scale([chroma.random(), chroma.random()]);
+    const cscale = rnd(0, 1) > 0.5 ? chroma.scale([0x09256f, 0x6efec8]) : chroma.scale([0x051924, 0xc00a1c]);
+    for (let i = 0; i < conf.nx; i++) {
+      const points = [];
+      const vpoints = [];
+      for (let j = 0; j < conf.ny; j++) {
+        const x = ox + i * dx,y = oy + j * dy;
+        points.push(new THREE.Vector3(x, y, 0));
+        vpoints.push(new Vec2(x, y));
+      }
+      const polyline = new Polyline({ points, color1: cscale(rnd(0, 1)), color2: cscale(rnd(0, 1)) });
+      polylines.push(polyline);
+
+      polyline.segment = verlet.lineSegments(vpoints, 5);
+      polyline.segment.pin(0);
+      polyline.segment.particles.forEach(p => {p.pos.x += rndFS(10);});
+
+      const mesh = new THREE.Mesh(polyline.geometry, material);
+      scene.add(mesh);
+    }
+  }
+
+  function updatePoints() {
+    polylines.forEach(line => {
+      for (let i = 0; i < line.points.length; i++) {
+        const p = line.segment.particles[i].pos;
+        line.points[i].x = p.x;
+        line.points[i].y = p.y;
+      }
+      line.updateGeometry();
+    });
+  }
+
+  function updateColors() {
+    const c1 = chroma.random(),c2 = chroma.random();
+    const cscale = chroma.scale([c1, c2]);
+    console.log(c1.hex(), c2.hex());
+    // #21a25f #a0fa42
+    // #09256f #6efec8
+    polylines.forEach(line => {
+      line.color1 = cscale(rnd(0, 1));
+      line.color2 = cscale(rnd(0, 1));
+      const cscale1 = chroma.scale([line.color1, line.color2]);
+      const colors = line.geometry.attributes.color.array;
+      const c = new THREE.Color();
+      for (let i = 0; i < line.count; i++) {
+        c.set(cscale1(i / line.count).hex());
+        c.toArray(colors, i * 2 * 3);
+        c.toArray(colors, (i * 2 + 1) * 3);
+      }
+      line.geometry.attributes.color.needsUpdate = true;
+    });
+  }
+
+  function animate() {
+    verlet.frame(16);
+    updatePoints();
+    renderer.render(scene, camera);
+    requestAnimationFrame(animate);
+  }
+
+  function initListeners() {
+    if ('ontouchstart' in window) {
+      document.body.addEventListener('touchstart', updateMouse, false);
+      document.body.addEventListener('touchmove', move, false);
+    } else {
+      document.body.addEventListener('mouseenter', updateMouse, false);
+      document.body.addEventListener('mousemove', move, false);
+      document.body.addEventListener('mouseup', updateColors, false);
+    }
+  }
+
+  function move(e) {
+    updateMouse(e);
+    const v1 = new THREE.Vector2(),v2 = new THREE.Vector2();
+    polylines.forEach(line => {
+      for (let i = 0; i < line.points.length; i++) {
+        const p = line.segment.particles[i].pos;
+        const l = v1.copy(oldMouse).sub(v2.set(p.x, p.y)).length();
+        if (l < conf.mouseRadius) {
+          v1.copy(mouse).sub(oldMouse).multiplyScalar(conf.mouseStrength);
+          p.x += v1.x;p.y += v1.y;
+        }
+      }
+    });
+  }
+
+  function updateMouse(e) {
+    if (e.changedTouches && e.changedTouches.length) {
+      e.x = e.changedTouches[0].pageX;
+      e.y = e.changedTouches[0].pageY;
+    }
+    if (e.x === undefined) {
+      e.x = e.pageX;
+      e.y = e.pageY;
+    }
+
+    oldMouse.copy(mouse);
+    mouse.set(
+    (e.x - width / 2) * verlet.width / width,
+    (height / 2 - e.y) * verlet.height / height);
+
+  }
+
+  function updateSize() {
+    width = window.innerWidth;
+    height = window.innerHeight;
+    uCx.value = 2 / verlet.width;uCy.value = 2 / verlet.height;
+    renderer.setSize(width, height);
+    // camera.aspect = width / height;
+    // camera.updateProjectionMatrix();
+  }
+}
+
+// adapted from https://github.com/oframe/ogl/blob/master/src/extras/Polyline.js
+const Polyline = function () {
+  const tmp = new THREE.Vector3();
+
+  class Polyline {
+    constructor(params) {
+      const { points, color1, color2 } = params;
+      this.points = points;
+      this.count = points.length;
+      this.color1 = color1;
+      this.color2 = color2;
+      this.init();
+      this.updateGeometry();
+    }
+
+    init() {
+      // const cscale = chroma.scale([chroma.random(), chroma.random()]);
+      const cscale = chroma.scale([this.color1, this.color2]);
+      this.geometry = new THREE.BufferGeometry();
+      this.position = new Float32Array(this.count * 3 * 2);
+      this.prev = new Float32Array(this.count * 3 * 2);
+      this.next = new Float32Array(this.count * 3 * 2);
+      const side = new Float32Array(this.count * 1 * 2);
+      const uv = new Float32Array(this.count * 2 * 2);
+      const color = new Float32Array(this.count * 3 * 2);
+      const index = new Uint16Array((this.count - 1) * 3 * 2);
+
+      const c = new THREE.Color();
+      for (let i = 0; i < this.count; i++) {
+        const i2 = i * 2;
+        side.set([-1, 1], i2);
+        const v = i / (this.count - 1);
+        uv.set([0, v, 1, v], i * 4);
+
+        c.set(cscale(v).hex());
+        c.toArray(color, i2 * 3);
+        c.toArray(color, (i2 + 1) * 3);
+
+        if (i === this.count - 1) continue;
+        index.set([i2 + 0, i2 + 1, i2 + 2], (i2 + 0) * 3);
+        index.set([i2 + 2, i2 + 1, i2 + 3], (i2 + 1) * 3);
+      }
+
+      this.geometry.setAttribute('position', new THREE.BufferAttribute(this.position, 3));
+      this.geometry.setAttribute('color', new THREE.BufferAttribute(color, 3));
+      this.geometry.setAttribute('prev', new THREE.BufferAttribute(this.prev, 3));
+      this.geometry.setAttribute('next', new THREE.BufferAttribute(this.next, 3));
+      this.geometry.setAttribute('side', new THREE.BufferAttribute(side, 1));
+      this.geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2));
+      this.geometry.setIndex(new THREE.BufferAttribute(index, 1));
+    }
+
+    updateGeometry() {
+      this.points.forEach((p, i) => {
+        p.toArray(this.position, i * 3 * 2);
+        p.toArray(this.position, i * 3 * 2 + 3);
+
+        if (!i) {
+          tmp.copy(p).sub(this.points[i + 1]).add(p);
+          tmp.toArray(this.prev, i * 3 * 2);
+          tmp.toArray(this.prev, i * 3 * 2 + 3);
+        } else {
+          p.toArray(this.next, (i - 1) * 3 * 2);
+          p.toArray(this.next, (i - 1) * 3 * 2 + 3);
+        }
+
+        if (i === this.points.length - 1) {
+          tmp.copy(p).sub(this.points[i - 1]).add(p);
+          tmp.toArray(this.next, i * 3 * 2);
+          tmp.toArray(this.next, i * 3 * 2 + 3);
+        } else {
+          p.toArray(this.prev, (i + 1) * 3 * 2);
+          p.toArray(this.prev, (i + 1) * 3 * 2 + 3);
+        }
+      });
+
+      this.geometry.attributes.position.needsUpdate = true;
+      this.geometry.attributes.prev.needsUpdate = true;
+      this.geometry.attributes.next.needsUpdate = true;
+    }}
+
+
+  return Polyline;
+}();
+
+App();
\ No newline at end of file
diff --git a/what-s-behind/dist/style.css b/what-s-behind/dist/style.css
new file mode 100644
index 0000000..b5bea11
--- /dev/null
+++ b/what-s-behind/dist/style.css
@@ -0,0 +1,25 @@
+body {
+  margin: 0;
+  height: 100%;
+  font-family: 'Montserrat', sans-serif;
+  background-image: radial-gradient(circle, #ffffff, #aaaaaa);
+}
+canvas {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+}
+h1 {
+  font-size: 50px;
+  text-align: center;
+  width: 60%;
+  margin: 0 auto;
+  padding-top: 10%;
+}
+p {
+  font-size: 30px;
+  text-align: center;
+  width: 50%;
+  margin: 1em auto 0;
+}
\ No newline at end of file
diff --git a/what-s-behind/license.txt b/what-s-behind/license.txt
new file mode 100644
index 0000000..b438f40
--- /dev/null
+++ b/what-s-behind/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Kevin Levron (https://codepen.io/soju22/pen/BaNKwpZ)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/what-s-behind/src/index.html b/what-s-behind/src/index.html
new file mode 100644
index 0000000..9d3cb3f
--- /dev/null
+++ b/what-s-behind/src/index.html
@@ -0,0 +1,4 @@
+<canvas id="canvas"></canvas>
+
+<h1>What's behind the curtain ?</h1>
+<p>This funny interactive curtain is made with ThreeJS, polylines and verlet constraints (adapted from verlet-js).</p>
\ No newline at end of file
diff --git a/what-s-behind/src/script.babel b/what-s-behind/src/script.babel
new file mode 100644
index 0000000..b3ce9ed
--- /dev/null
+++ b/what-s-behind/src/script.babel
@@ -0,0 +1,290 @@
+function App() {
+  const conf = {
+    el: 'canvas',
+    gravity: -0.3,
+    nx: 80,
+    ny: 40,
+    size: 1.5,
+    mouseRadius: 10,
+    mouseStrength: 0.4
+  };
+
+  let renderer, scene, camera;
+  let width, height;
+  const { randFloat: rnd, randFloatSpread: rndFS } = THREE.Math;
+
+  const mouse = new THREE.Vector2(), oldMouse = new THREE.Vector2();
+  const verlet = new VerletJS(), polylines = [];
+  const uCx = { value: 0 }, uCy = { value: 0 };
+
+  init();
+
+  function init() {
+    renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(conf.el), antialias: true, alpha: true });
+    camera = new THREE.PerspectiveCamera();
+
+    verlet.width = 256;
+    verlet.height = 256;
+
+    updateSize();
+    window.addEventListener('resize', updateSize, false);
+
+    initScene();
+    initListeners();
+    animate();
+  }
+
+  function initScene() {
+    scene = new THREE.Scene();
+    verlet.gravity = new Vec2(0, conf.gravity);
+
+    initCurtain();
+  }
+
+  function initCurtain() {
+    const material = new THREE.ShaderMaterial({
+      transparent: true,
+      uniforms: {
+        uCx, uCy,
+        uSize: { value: conf.size / conf.nx }
+      },
+      vertexShader: `
+        uniform float uCx;
+        uniform float uCy;
+        uniform float uSize;
+        attribute vec3 color;
+        attribute vec3 next;
+        attribute vec3 prev;
+        attribute float side;
+
+        varying vec4 vColor;
+
+        void main() {
+          vec3 pos = vec3(position.x * uCx, position.y * uCy, 0.0);
+          vec2 sprev = vec2(prev.x * uCx, prev.y * uCy);
+          vec2 snext = vec2(next.x * uCx, next.y * uCy);
+
+          vec2 tangent = normalize(snext - sprev);
+          vec2 normal = vec2(-tangent.y, tangent.x);
+
+          float dist = length(snext - sprev);
+          normal *= smoothstep(0.0, 0.02, dist);
+
+          vColor = vec4(color, 1.0 - smoothstep(0.5, 1.0, uv.y) * 0.5);
+
+          normal *= uSize;// * (1.0 - uv.y);
+          pos.xy -= normal * side;
+
+          gl_Position = vec4(pos, 1.0);
+        }
+      `,
+      fragmentShader: `
+        varying vec4 vColor;
+        void main() {
+          gl_FragColor = vColor;
+        }
+      `
+    });
+
+    const dx = verlet.width / conf.nx, dy = -verlet.height / conf.ny;
+    const ox = -dx * (conf.nx / 2 - 0.5), oy = verlet.height / 2 - dy / 2;
+    // const cscale = chroma.scale([chroma.random(), chroma.random()]);
+    const cscale = rnd(0, 1) > 0.5 ? chroma.scale([0x09256f, 0x6efec8]) : chroma.scale([0x051924, 0xc00a1c]);
+    for (let i = 0; i < conf.nx; i++) {
+      const points = [];
+      const vpoints = [];
+      for (let j = 0; j < conf.ny; j++) {
+        const x = ox + i * dx, y = oy + j * dy;
+        points.push(new THREE.Vector3(x, y, 0));
+        vpoints.push(new Vec2(x, y));
+      }
+      const polyline = new Polyline({ points, color1: cscale(rnd(0, 1)), color2: cscale(rnd(0, 1)) });
+      polylines.push(polyline);
+
+      polyline.segment = verlet.lineSegments(vpoints, 5);
+      polyline.segment.pin(0);
+      polyline.segment.particles.forEach(p => { p.pos.x += rndFS(10); });
+
+      const mesh = new THREE.Mesh(polyline.geometry, material);
+      scene.add(mesh);
+    }
+  }
+
+  function updatePoints() {
+    polylines.forEach(line => {
+      for (let i = 0; i < line.points.length; i++) {
+        const p = line.segment.particles[i].pos;
+        line.points[i].x = p.x;
+        line.points[i].y = p.y;
+      }
+      line.updateGeometry();
+    });
+  }
+
+  function updateColors() {
+    const c1 = chroma.random(), c2 = chroma.random();
+    const cscale = chroma.scale([c1, c2]);
+    console.log(c1.hex(), c2.hex());
+    // #21a25f #a0fa42
+    // #09256f #6efec8
+    polylines.forEach(line => {
+      line.color1 = cscale(rnd(0, 1));
+      line.color2 = cscale(rnd(0, 1));
+      const cscale1 = chroma.scale([line.color1, line.color2]);
+      const colors = line.geometry.attributes.color.array;
+      const c = new THREE.Color();
+      for (let i = 0; i < line.count; i++) {
+        c.set(cscale1(i / line.count).hex());
+        c.toArray(colors, (i * 2) * 3);
+        c.toArray(colors, (i * 2 + 1) * 3);
+      }
+      line.geometry.attributes.color.needsUpdate = true;
+    });
+  }
+
+  function animate() {
+    verlet.frame(16);
+    updatePoints();
+    renderer.render(scene, camera);
+    requestAnimationFrame(animate);
+  }
+
+  function initListeners() {
+    if ('ontouchstart' in window) {
+      document.body.addEventListener('touchstart', updateMouse, false);
+      document.body.addEventListener('touchmove', move, false);
+    } else {
+      document.body.addEventListener('mouseenter', updateMouse, false);
+      document.body.addEventListener('mousemove', move, false);
+      document.body.addEventListener('mouseup', updateColors, false);
+    }
+  }
+
+  function move(e) {
+    updateMouse(e);
+    const v1 = new THREE.Vector2(), v2 = new THREE.Vector2();
+    polylines.forEach(line => {
+      for (let i = 0; i < line.points.length; i++) {
+        const p = line.segment.particles[i].pos;
+        const l = v1.copy(oldMouse).sub(v2.set(p.x, p.y)).length();
+        if (l < conf.mouseRadius) {
+          v1.copy(mouse).sub(oldMouse).multiplyScalar(conf.mouseStrength);
+          p.x += v1.x; p.y += v1.y;
+        }
+      }
+    });
+  }
+
+  function updateMouse(e) {
+    if (e.changedTouches && e.changedTouches.length) {
+      e.x = e.changedTouches[0].pageX;
+      e.y = e.changedTouches[0].pageY;
+    }
+    if (e.x === undefined) {
+      e.x = e.pageX;
+      e.y = e.pageY;
+    }
+
+    oldMouse.copy(mouse);
+    mouse.set(
+      (e.x - width / 2) * verlet.width / width,
+      (height / 2 - e.y) * verlet.height / height
+    );
+  }
+
+  function updateSize() {
+    width = window.innerWidth;
+    height = window.innerHeight;
+    uCx.value = 2 / verlet.width; uCy.value = 2 / verlet.height;
+    renderer.setSize(width, height);
+    // camera.aspect = width / height;
+    // camera.updateProjectionMatrix();
+  }
+}
+
+// adapted from https://github.com/oframe/ogl/blob/master/src/extras/Polyline.js
+const Polyline = (function () {
+  const tmp = new THREE.Vector3();
+
+  class Polyline {
+    constructor(params) {
+      const { points, color1, color2 } = params;
+      this.points = points;
+      this.count = points.length;
+      this.color1 = color1;
+      this.color2 = color2;
+      this.init();
+      this.updateGeometry();
+    }
+
+    init() {
+      // const cscale = chroma.scale([chroma.random(), chroma.random()]);
+      const cscale = chroma.scale([this.color1, this.color2]);
+      this.geometry = new THREE.BufferGeometry();
+      this.position = new Float32Array(this.count * 3 * 2);
+      this.prev = new Float32Array(this.count * 3 * 2);
+      this.next = new Float32Array(this.count * 3 * 2);
+      const side = new Float32Array(this.count * 1 * 2);
+      const uv = new Float32Array(this.count * 2 * 2);
+      const color = new Float32Array(this.count * 3 * 2);
+      const index = new Uint16Array((this.count - 1) * 3 * 2);
+
+      const c = new THREE.Color();
+      for (let i = 0; i < this.count; i++) {
+        const i2 = i * 2;
+        side.set([-1, 1], i2);
+        const v = i / (this.count - 1);
+        uv.set([0, v, 1, v], i * 4);
+
+        c.set(cscale(v).hex());
+        c.toArray(color, i2 * 3);
+        c.toArray(color, (i2 + 1) * 3);
+
+        if (i === this.count - 1) continue;
+        index.set([i2 + 0, i2 + 1, i2 + 2], (i2 + 0) * 3);
+        index.set([i2 + 2, i2 + 1, i2 + 3], (i2 + 1) * 3);
+      }
+
+      this.geometry.setAttribute('position', new THREE.BufferAttribute(this.position, 3));
+      this.geometry.setAttribute('color', new THREE.BufferAttribute(color, 3));
+      this.geometry.setAttribute('prev', new THREE.BufferAttribute(this.prev, 3));
+      this.geometry.setAttribute('next', new THREE.BufferAttribute(this.next, 3));
+      this.geometry.setAttribute('side', new THREE.BufferAttribute(side, 1));
+      this.geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2));
+      this.geometry.setIndex(new THREE.BufferAttribute(index, 1));
+    }
+
+    updateGeometry() {
+      this.points.forEach((p, i) => {
+        p.toArray(this.position, i * 3 * 2);
+        p.toArray(this.position, i * 3 * 2 + 3);
+
+        if (!i) {
+          tmp.copy(p).sub(this.points[i + 1]).add(p);
+          tmp.toArray(this.prev, i * 3 * 2);
+          tmp.toArray(this.prev, i * 3 * 2 + 3);
+        } else {
+          p.toArray(this.next, (i - 1) * 3 * 2);
+          p.toArray(this.next, (i - 1) * 3 * 2 + 3);
+        }
+
+        if (i === this.points.length - 1) {
+          tmp.copy(p).sub(this.points[i - 1]).add(p);
+          tmp.toArray(this.next, i * 3 * 2);
+          tmp.toArray(this.next, i * 3 * 2 + 3);
+        } else {
+          p.toArray(this.prev, (i + 1) * 3 * 2);
+          p.toArray(this.prev, (i + 1) * 3 * 2 + 3);
+        }
+      });
+
+      this.geometry.attributes.position.needsUpdate = true;
+      this.geometry.attributes.prev.needsUpdate = true;
+      this.geometry.attributes.next.needsUpdate = true;
+    }
+  }
+
+  return Polyline;
+})();
+
+App();
diff --git a/what-s-behind/src/style.css b/what-s-behind/src/style.css
new file mode 100644
index 0000000..f7c6f1f
--- /dev/null
+++ b/what-s-behind/src/style.css
@@ -0,0 +1,25 @@
+body {
+  margin: 0;
+  height: 100%;
+  font-family: 'Montserrat', sans-serif;
+  background-image: radial-gradient(circle, #ffffff, #aaaaaa);
+}
+canvas {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+}
+h1 {
+  font-size: 50px;
+  text-align: center;
+  width: 60%;
+  margin: 0 auto;
+  padding-top: 10%;
+}
+p {
+  font-size: 30px;
+  text-align: center;
+  width: 50%;
+  margin: 1em auto 0;
+}
diff --git a/when-you-can-t-decide/README.markdown b/when-you-can-t-decide/README.markdown
new file mode 100644
index 0000000..e1ab611
--- /dev/null
+++ b/when-you-can-t-decide/README.markdown
@@ -0,0 +1,5 @@
+# When you can't decide... 
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/pehaa/pen/QWjwyxy](https://codepen.io/pehaa/pen/QWjwyxy).
+
+An idea of the hero image when a comparison  between two states makes sense (before/after, winter/summer).
diff --git a/when-you-can-t-decide/dist/index.html b/when-you-can-t-decide/dist/index.html
new file mode 100644
index 0000000..fa0329c
--- /dev/null
+++ b/when-you-can-t-decide/dist/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - When you can&#39;t decide... </title>
+  <link href="https://fonts.googleapis.com/css?family=Poppins:400|Calistoga:400&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="slider" class="beer-slider" data-start="75">
+  <div class="ctnr ctnr-winter">
+    <svg class="winter" width="100%" height="100%" viewBox="0 0 600 361" preserveAspectRatio="xMidYMid slice" data-beer-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/original-baltic.jpg" aria-labelledby="title1" aria-role="img">
+      <title id="title1">Baltic seashore -sepicol</title>
+      <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/winter.jpg" x="0" y="0" width="100%" height="100%"></image>
+
+    </svg>
+    <section class="b b2">
+      <h2>Baltic sea during Winter time</h2>
+      <p>At -10.6 °C | 12.9 °F on average, January is the coldest month of the year. It is also the driest month. There is 12 mm | 0.5 inch of precipitation in January.</p>
+    </section>
+
+  </div>
+  <div class="beer-reveal">
+    <div class="ctnr ctnr-summer">
+      <svg width="100%" height="100%" viewBox="0 0 600 361" preserveAspectRatio="xMidYMid slice" data-beer-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/warmsphere-baltic.jpg" aria-labelledby="title2" aria-role="img">
+        <title id="title2">Baltic seashore - warmshphere preset applied</title>
+        <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/warmsphere-baltic.jpg" x="0" y="0" width="100%" height="100%"></image>
+      </svg>
+      <section class="b b1">
+        <h2>Baltic sea during Summer time</h2>
+        <p>With an average of 22.8 °C | 73.0 °F, July is the warmest month. In June, the precipitation reaches its peak, with an average of 98 mm | 3.9 inch.</p>
+
+      </section>
+    </div>
+
+  </div>
+
+</div>
+
+<main>
+  <h1>Welcome to the Baltic seaside</h1>
+  <p>The Baltic Sea is a mediterranean sea of the Atlantic Ocean, enclosed by Denmark, Estonia, Finland, Latvia, Lithuania, Sweden, northeast Germany, Poland, Russia and the North and Central European Plain. The sea stretches from 53°N to 66°N latitude and from 10°E to 30°E longitude.</p>
+</main>
+<svg>
+  <defs>
+    <clipPath id="svgPath" clipPathUnits="objectBoundingBox" transform="scale(0.00083 0.0075)">
+      <path d="M1397,490H204c263,0,160-32,371-33,191.52-.91,150.49-135.14,225-92C990,475,1144,490,1397,490Z" transform="translate(-178 -350.46)" />
+    </clipPath>
+  </defs>
+</svg>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/when-you-can-t-decide/dist/script.js b/when-you-can-t-decide/dist/script.js
new file mode 100644
index 0000000..5a2dc25
--- /dev/null
+++ b/when-you-can-t-decide/dist/script.js
@@ -0,0 +1,99 @@
+class BeerSlider {
+  constructor(element, { start = "50" } = {}) {
+    this.start = parseInt(start) ?
+    Math.min(100, Math.max(0, parseInt(start))) :
+    50;
+    this.element = element;
+    this.revealContainer = this.element.children[1];
+    this.revealElement = this.revealContainer.children[0];
+    this.range = this.addElement("input", {
+      type: "range",
+      class: `beer-range`,
+      "aria-label": "Percent of revealed content",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": this.start,
+      value: this.start,
+      min: "0",
+      max: "100" });
+
+    this.handle = this.addElement("span", {
+      class: `beer-handle` });
+
+    this.onImagesLoad();
+  }
+  init() {
+    this.element.classList.add(`beer-ready`);
+    this.move();
+    this.addListeners();
+  }
+  loadingImg(src) {
+    return new Promise((resolve, reject) => {
+      if (!src) {
+        resolve();
+      }
+      const img = new Image();
+      img.onload = () => resolve();
+      img.onerror = () => reject();
+      img.src = src;
+    });
+  }
+  loadedBoth() {
+    const mainImageSrc =
+    this.element.children[0].src ||
+    this.element.children[0].getAttribute(`data-beer-src`);
+    const revealImageSrc =
+    this.revealElement.src ||
+    this.revealElement.getAttribute(`data-beer-src`);
+    return Promise.all([
+    this.loadingImg(mainImageSrc),
+    this.loadingImg(revealImageSrc)]);
+
+  }
+  onImagesLoad() {
+    if (!this.revealElement) {
+      return;
+    }
+    this.loadedBoth().then(
+    () => {
+      this.init();
+    },
+    () => {
+      console.error("Some errors occurred and images are not loaded.");
+    });
+
+  }
+  addElement(tag, attributes) {
+    const el = document.createElement(tag);
+    Object.keys(attributes).forEach(key => {
+      el.setAttribute(key, attributes[key]);
+    });
+    this.element.appendChild(el);
+    return el;
+  }
+  addListeners() {
+    const eventTypes = ["input", "change"];
+    eventTypes.forEach(i => {
+      this.range.addEventListener(i, () => {
+        this.move();
+      });
+    });
+  }
+  move() {
+    this.revealContainer.style.setProperty("--width", `${this.range.value}%`);
+    this.handle.style.left = `${this.range.value}%`;
+    this.range.setAttribute("aria-valuenow", this.range.value);
+    if (this.range.value > 55) {
+      this.element.classList.add("more");
+    } else {
+      this.element.classList.remove("more");
+      if (this.range.value < 45) {
+        this.element.classList.add("less");
+      } else {
+        this.element.classList.remove("less");
+      }
+    }
+  }}
+
+
+new BeerSlider(document.getElementById("slider"), { start: 30 });
\ No newline at end of file
diff --git a/when-you-can-t-decide/dist/style.css b/when-you-can-t-decide/dist/style.css
new file mode 100644
index 0000000..5e95674
--- /dev/null
+++ b/when-you-can-t-decide/dist/style.css
@@ -0,0 +1,220 @@
+.beer-slider {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+}
+.beer-slider *, .beer-slider:before, .beer-slider:after,
+.beer-slider *:before,
+.beer-slider *:after {
+  box-sizing: border-box;
+}
+.beer-slider svg {
+  vertical-align: bottom;
+}
+
+.beer-reveal {
+  --width: 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  -webkit-clip-path: polygon(0 0, var(--width) 0, var(--width) 100%, 0 100%);
+          clip-path: polygon(0 0, var(--width) 0, var(--width) 100%, 0 100%);
+  overflow: hidden;
+  z-index: 1;
+  opacity: 0;
+  -webkit-transition: opacity 0.35s;
+  transition: opacity 0.35s;
+}
+
+.beer-range {
+  position: absolute;
+  z-index: 2;
+  bottom: 0;
+  height: 6rem;
+  margin: 0;
+  left: -1px;
+  width: calc(100% + 2px);
+  cursor: pointer;
+  -webkit-appearance: slider-horizontal !important;
+  -moz-appearance: none;
+  opacity: 0;
+  touch-action: auto;
+}
+.beer-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 300vh;
+}
+.beer-range::-moz-range-thumb {
+  -webkit-appearance: none;
+  height: 300vh;
+}
+.beer-range::-ms-tooltip {
+  display: none;
+}
+
+.beer-ready,
+.beer-ready image,
+.beer-ready .beer-reveal,
+.beer-ready .beer-handle {
+  opacity: 1;
+}
+
+.beer-slider {
+  width: 100%;
+  height: 70vh;
+}
+
+.ctnr {
+  height: 70vh;
+}
+
+.beer-handle {
+  position: absolute;
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0;
+  background: white;
+  color: #000;
+  -webkit-transition: opacity 1s;
+  transition: opacity 1s;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  height: 6rem;
+  width: 100%;
+  left: 50%;
+  bottom: 0;
+  -webkit-clip-path: url(#svgPath);
+          clip-path: url(#svgPath);
+}
+.beer-handle:before, .beer-handle:after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  top: 50%;
+  border-top: solid 2px;
+  border-left: solid 2px;
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+}
+.beer-handle:before {
+  left: calc(50% - 20px);
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+}
+.beer-handle:after {
+  right: calc(50% - 30px);
+  -webkit-transform: rotate(135deg);
+          transform: rotate(135deg);
+}
+
+body {
+  font-family: Poppins, sans-serif;
+  line-height: 1.6;
+}
+
+h1,
+h2 {
+  font-family: Calistoga;
+  font-weight: 400;
+}
+
+h1 {
+  margin: 0;
+}
+
+h2 {
+  font-size: 4rem;
+  line-height: 1;
+}
+
+.b {
+  position: absolute;
+  top: 2rem;
+  width: 50%;
+  max-width: 700px;
+}
+
+.b * {
+  opacity: 0;
+  -webkit-transform: translate3d(0, 2rem, 0);
+          transform: translate3d(0, 2rem, 0);
+  -webkit-transition: 1s;
+  transition: 1s;
+}
+
+.b1 {
+  left: 4rem;
+  z-index: 1;
+  color: white;
+}
+
+.b2 {
+  right: 4rem;
+  z-index: 1;
+}
+
+.more .b1 * {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+}
+
+.less .b2 * {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+}
+
+.ctnr:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ctnr-summer:after {
+  background: linear-gradient(135deg, #2a2d4e, transparent);
+}
+
+.ctnr-winter:after {
+  background: linear-gradient(-135deg, white, transparent);
+}
+
+image {
+  -webkit-transition: 0.6s;
+  transition: 0.6s;
+  opacity: 0;
+}
+
+p {
+  letter-spacing: 1px;
+}
+
+@media (max-width: 37.5em) {
+  h2 {
+    font-size: 2rem;
+  }
+
+  .b1 {
+    left: 2rem;
+  }
+
+  .b2 {
+    right: 2rem;
+  }
+
+  .ctnr-summer:after {
+    background: -webkit-gradient(linear, left top, left bottom, from(#2a2d4e), color-stop(120%, transparent));
+    background: linear-gradient(180deg, #2a2d4e, transparent 120%);
+  }
+}
+main {
+  margin: 2rem auto;
+  max-width: 48rem;
+  padding: 0 1rem;
+}
\ No newline at end of file
diff --git a/when-you-can-t-decide/license.txt b/when-you-can-t-decide/license.txt
new file mode 100644
index 0000000..dddc1aa
--- /dev/null
+++ b/when-you-can-t-decide/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Paulina Hetman (https://codepen.io/pehaa/pen/QWjwyxy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/when-you-can-t-decide/src/index.html b/when-you-can-t-decide/src/index.html
new file mode 100644
index 0000000..4181d5b
--- /dev/null
+++ b/when-you-can-t-decide/src/index.html
@@ -0,0 +1,41 @@
+<div id="slider" class="beer-slider" data-start="75">
+  <div class="ctnr ctnr-winter">
+    <svg class="winter" width="100%" height="100%" viewBox="0 0 600 361" preserveAspectRatio="xMidYMid slice" data-beer-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/original-baltic.jpg" aria-labelledby="title1" aria-role="img">
+      <title id="title1">Baltic seashore -sepicol</title>
+      <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/winter.jpg" x="0" y="0" width="100%" height="100%"></image>
+
+    </svg>
+    <section class="b b2">
+      <h2>Baltic sea during Winter time</h2>
+      <p>At -10.6 °C | 12.9 °F on average, January is the coldest month of the year. It is also the driest month. There is 12 mm | 0.5 inch of precipitation in January.</p>
+    </section>
+
+  </div>
+  <div class="beer-reveal">
+    <div class="ctnr ctnr-summer">
+      <svg width="100%" height="100%" viewBox="0 0 600 361" preserveAspectRatio="xMidYMid slice" data-beer-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/warmsphere-baltic.jpg" aria-labelledby="title2" aria-role="img">
+        <title id="title2">Baltic seashore - warmshphere preset applied</title>
+        <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/warmsphere-baltic.jpg" x="0" y="0" width="100%" height="100%"></image>
+      </svg>
+      <section class="b b1">
+        <h2>Baltic sea during Summer time</h2>
+        <p>With an average of 22.8 °C | 73.0 °F, July is the warmest month. In June, the precipitation reaches its peak, with an average of 98 mm | 3.9 inch.</p>
+
+      </section>
+    </div>
+
+  </div>
+
+</div>
+
+<main>
+  <h1>Welcome to the Baltic seaside</h1>
+  <p>The Baltic Sea is a mediterranean sea of the Atlantic Ocean, enclosed by Denmark, Estonia, Finland, Latvia, Lithuania, Sweden, northeast Germany, Poland, Russia and the North and Central European Plain. The sea stretches from 53°N to 66°N latitude and from 10°E to 30°E longitude.</p>
+</main>
+<svg>
+  <defs>
+    <clipPath id="svgPath" clipPathUnits="objectBoundingBox" transform="scale(0.00083 0.0075)">
+      <path d="M1397,490H204c263,0,160-32,371-33,191.52-.91,150.49-135.14,225-92C990,475,1144,490,1397,490Z" transform="translate(-178 -350.46)" />
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/when-you-can-t-decide/src/script.babel b/when-you-can-t-decide/src/script.babel
new file mode 100644
index 0000000..9d50ddf
--- /dev/null
+++ b/when-you-can-t-decide/src/script.babel
@@ -0,0 +1,99 @@
+class BeerSlider {
+  constructor(element, { start = "50" } = {}) {
+    this.start = parseInt(start)
+      ? Math.min(100, Math.max(0, parseInt(start)))
+      : 50;
+    this.element = element;
+    this.revealContainer = this.element.children[1];
+    this.revealElement = this.revealContainer.children[0];
+    this.range = this.addElement("input", {
+      type: "range",
+      class: `beer-range`,
+      "aria-label": "Percent of revealed content",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": this.start,
+      value: this.start,
+      min: "0",
+      max: "100"
+    });
+    this.handle = this.addElement("span", {
+      class: `beer-handle`
+    });
+    this.onImagesLoad();
+  }
+  init() {
+    this.element.classList.add(`beer-ready`);
+    this.move();
+    this.addListeners();
+  }
+  loadingImg(src) {
+    return new Promise((resolve, reject) => {
+      if (!src) {
+        resolve();
+      }
+      const img = new Image();
+      img.onload = () => resolve();
+      img.onerror = () => reject();
+      img.src = src;
+    });
+  }
+  loadedBoth() {
+    const mainImageSrc =
+      this.element.children[0].src ||
+      this.element.children[0].getAttribute(`data-beer-src`);
+    const revealImageSrc =
+      this.revealElement.src ||
+      this.revealElement.getAttribute(`data-beer-src`);
+    return Promise.all([
+      this.loadingImg(mainImageSrc),
+      this.loadingImg(revealImageSrc)
+    ]);
+  }
+  onImagesLoad() {
+    if (!this.revealElement) {
+      return;
+    }
+    this.loadedBoth().then(
+      () => {
+        this.init();
+      },
+      () => {
+        console.error("Some errors occurred and images are not loaded.");
+      }
+    );
+  }
+  addElement(tag, attributes) {
+    const el = document.createElement(tag);
+    Object.keys(attributes).forEach((key) => {
+      el.setAttribute(key, attributes[key]);
+    });
+    this.element.appendChild(el);
+    return el;
+  }
+  addListeners() {
+    const eventTypes = ["input", "change"];
+    eventTypes.forEach((i) => {
+      this.range.addEventListener(i, () => {
+        this.move();
+      });
+    });
+  }
+  move() {
+    this.revealContainer.style.setProperty("--width", `${this.range.value}%`);
+    this.handle.style.left = `${this.range.value}%`;
+    this.range.setAttribute("aria-valuenow", this.range.value);
+    if (this.range.value > 55) {
+      this.element.classList.add("more");
+    } else {
+      this.element.classList.remove("more");
+      if (this.range.value < 45) {
+        this.element.classList.add("less");
+      } else {
+        this.element.classList.remove("less");
+      }
+    }
+  }
+}
+
+new BeerSlider(document.getElementById("slider"), { start: 30 });
diff --git a/when-you-can-t-decide/src/style.scss b/when-you-can-t-decide/src/style.scss
new file mode 100644
index 0000000..aa97e33
--- /dev/null
+++ b/when-you-can-t-decide/src/style.scss
@@ -0,0 +1,202 @@
+.beer-slider {
+  *,
+  &:before,
+  &:after,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+
+  svg {
+    vertical-align: bottom;
+  }
+}
+.beer-reveal {
+  --width: 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  clip-path: polygon(0 0, var(--width) 0, var(--width) 100%, 0 100%);
+  overflow: hidden;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.35s;
+}
+
+.beer-range {
+  position: absolute;
+  z-index: 2;
+  bottom: 0;
+  height: 6rem;
+  margin: 0;
+  left: -1px;
+  width: calc(100% + 2px);
+  cursor: pointer;
+  -webkit-appearance: slider-horizontal !important;
+  -moz-appearance: none;
+  opacity: 0;
+  -ms-touch-action: auto;
+  touch-action: auto;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 300vh;
+  }
+  &::-moz-range-thumb {
+    -webkit-appearance: none;
+    height: 300vh;
+  }
+  &::-ms-tooltip {
+    display: none;
+  }
+}
+
+.beer-ready {
+  &,
+  image,
+  .beer-reveal,
+  .beer-handle {
+    opacity: 1;
+  }
+}
+
+.beer-slider {
+  width: 100%;
+  height: 70vh;
+}
+.ctnr {
+  height: 70vh;
+}
+
+.beer-handle {
+  position: absolute;
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0;
+  background: white;
+  color: #000;
+  transition: opacity 1s;
+  transform: translateX(-50%);
+  height: 6rem;
+  width: 100%;
+  left: 50%;
+  bottom: 0;
+  clip-path: url(#svgPath);
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 50%;
+    border-top: solid 2px;
+    border-left: solid 2px;
+    transform-origin: 0 0;
+  }
+  &:before {
+    left: calc(50% - 20px);
+    transform: rotate(-45deg);
+  }
+  &:after {
+    right: calc(50% - 30px);
+    transform: rotate(135deg);
+  }
+}
+
+body {
+  font-family: Poppins, sans-serif;
+  line-height: 1.6;
+}
+
+h1,
+h2 {
+  font-family: Calistoga;
+  font-weight: 400;
+}
+h1 {
+  margin: 0;
+}
+h2 {
+  font-size: 4rem;
+  line-height: 1;
+}
+.b {
+  position: absolute;
+  top: 2rem;
+  width: 50%;
+  max-width: 700px;
+}
+.b * {
+  opacity: 0;
+  transform: translate3d(0, 2rem, 0);
+  transition: 1s;
+}
+.b1 {
+  left: 4rem;
+  z-index: 1;
+  color: white;
+}
+.b2 {
+  right: 4rem;
+  z-index: 1;
+}
+
+.more .b1 * {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
+
+.less .b2 * {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
+.ctnr:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.ctnr-summer:after {
+  background: linear-gradient(135deg, #2a2d4e, transparent);
+}
+
+.ctnr-winter:after {
+  background: linear-gradient(-135deg, white, transparent);
+}
+
+image {
+  transition: 0.6s;
+  opacity: 0;
+}
+
+p {
+  letter-spacing: 1px;
+}
+
+@media (max-width: 37.5em) {
+  h2 {
+    font-size: 2rem;
+  }
+  .b1 {
+    left: 2rem;
+  }
+  .b2 {
+    right: 2rem;
+  }
+  .ctnr-summer:after {
+    background: linear-gradient(180deg, #2a2d4e, transparent 120%);
+  }
+}
+
+main {
+  margin: 2rem auto;
+  max-width: 48rem;
+  padding: 0 1rem;
+}
diff --git a/wip-motion-blur-transition/README.markdown b/wip-motion-blur-transition/README.markdown
new file mode 100644
index 0000000..a0ae12a
--- /dev/null
+++ b/wip-motion-blur-transition/README.markdown
@@ -0,0 +1,4 @@
+# [wip] motion blur transition
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/robin-dela/pen/rEaYNK](https://codepen.io/robin-dela/pen/rEaYNK).
+
+ 
\ No newline at end of file
diff --git a/wip-motion-blur-transition/dist/index.html b/wip-motion-blur-transition/dist/index.html
new file mode 100644
index 0000000..7523c0c
--- /dev/null
+++ b/wip-motion-blur-transition/dist/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>[wip] motion blur transition</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script id="fragmentShader" type="x-shader/x-fragment">
+  
+  varying vec2 vUv;
+  uniform float dispFactor;
+  uniform sampler2D disp;
+  uniform sampler2D map1;
+  uniform sampler2D map2;
+  uniform float intensity;
+  uniform bool direction;
+    float random(vec3 scale,float seed)
+  {
+    return fract(  sin(dot(gl_FragCoord.xyz+seed,scale))*43758.5453  +  seed  );
+  }
+
+  void main()
+  {
+    const float iterations = 25.;//float(quality+1)*25.;
+    vec2 pos = vUv;//gl_FragCoord.xy / RENDERSIZE;
+    vec4 color = vec4(0.);
+    float total = 0.;
+    vec2 toCenter = vec2(0.5, 0.5) - pos;
+    float offset = random(  vec3(12.9898,78.233,151.7182), 0.  );
+    for(float t=0.; t<=iterations; t++)
+    {
+      float percent = (t+offset)/iterations;
+      float weight = 4.0*(percent-percent*percent);
+      vec4 sample1 = texture2D(map1, pos+toCenter*percent*intensity*dispFactor);
+      vec4 sample2 = vec4(0.0);
+      if(!direction)
+      {
+        sample2 = texture2D(map2, pos+toCenter*percent*intensity*(-1.0+dispFactor));
+      } else {
+        sample2 = texture2D(map2, pos+toCenter*percent*intensity*(1.0-dispFactor));
+      }
+
+      vec4 sample = mix(sample1, sample2, dispFactor);
+
+      sample.rgb *= sample.a;
+      color += sample*weight;
+      total += weight;
+    }
+    gl_FragColor = color/total;
+    gl_FragColor.rgb /= max(gl_FragColor.a,0.00001);
+  }
+</script>
+<script id="vertexShader" type="x-shader/x-vertex">
+	varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+  }
+
+</script> 
+<div id="container">
+  <video src="https://robindelaporte.fr/codepen/video3.mp4" crossorigin="anonymous" id="video" muted="true" loop="true"></video>
+  <video src="https://robindelaporte.fr/codepen/video2.mp4" crossorigin="anonymous" id="video2" muted="true" loop="true"></video>
+  </div>
+</div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/wip-motion-blur-transition/dist/script.js b/wip-motion-blur-transition/dist/script.js
new file mode 100644
index 0000000..d022a06
--- /dev/null
+++ b/wip-motion-blur-transition/dist/script.js
@@ -0,0 +1,108 @@
+var lastUpdate;
+var container;
+var camera, scene, renderer;
+var uniforms;
+
+function init() {
+  // basic setup
+  container = document.getElementById("container");
+  camera = new THREE.Camera();
+  camera.position.z = 1;
+  scene = new THREE.Scene();
+  var geometry = new THREE.PlaneBufferGeometry(2, 2);
+
+  const map = document.querySelector("#video");
+  map.oncanplay = function() {
+    map.play();
+  };
+  const texture = new THREE.VideoTexture(map);
+  texture.minFilter = THREE.LinearFilter;
+
+  const map2 = document.querySelector("#video2");
+  map2.oncanplay = function() {
+    map2.play();
+  };
+  const texture2 = new THREE.VideoTexture(map2);
+  texture2.minFilter = THREE.LinearFilter;
+
+  // shader stuff
+  uniforms = {
+    intensity: { type: "f", value: 0.75 },
+    dispFactor: { type: "f", value: 0.0 },
+    direction: { type: "b", value: false },
+    map1: { type: "t", value: texture },
+    map2: { type: "t", value: texture2 }
+  };
+  var material = new THREE.ShaderMaterial({
+    uniforms: uniforms,
+    vertexShader: document.getElementById("vertexShader").textContent,
+    fragmentShader: document.getElementById("fragmentShader").textContent
+  });
+  
+  lastUpdate = new Date().getTime();
+  // put it together for rendering
+  var mesh = new THREE.Mesh(geometry, material);
+  scene.add(mesh);
+  renderer = new THREE.WebGLRenderer();
+  renderer.setPixelRatio(window.devicePixelRatio);
+  container.appendChild(renderer.domElement);
+
+  // event listeners
+  onWindowResize();
+  window.addEventListener("resize", onWindowResize, false);
+
+  // gui
+  this.GUI = new dat.GUI();
+  this.GUI.add(uniforms.intensity, "value", 0, 2, 0.01).name("intensity");
+  this.GUI.add(uniforms.dispFactor, "value", 0, 1, 0.01).name("transition");
+
+  this.guiObj = {
+    reverse: false
+  };
+  this.GUI.add(this.guiObj, "reverse")
+    .listen()
+    .onChange(() => {
+      uniforms.direction.value = this.guiObj.reverse;
+    });
+
+  var self = this;
+  var obj = {
+    animate: () => {
+      var t = 1;
+      if (this._value == 1) {
+        t = 0;
+      }
+      TweenMax.to(uniforms.dispFactor, 1.1, {
+        value: t,
+        ease: Expo.easeOut
+      });
+
+      if (this._value == 1) {
+        this._value = 0;
+      } else {
+        this._value = 1;
+      }
+    }
+  };
+  this.GUI.add(obj, "animate");
+}
+
+// events
+function onWindowResize(evt) {
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+function animate() {
+  var currentTime = new Date().getTime();
+  var timeSinceLastUpdate = currentTime - lastUpdate;
+  lastUpdate = currentTime;
+
+  requestAnimationFrame(animate);
+  render(timeSinceLastUpdate);
+}
+function render(timeDelta) {
+  renderer.render(scene, camera);
+}
+
+// boot
+init();
+animate();
\ No newline at end of file
diff --git a/wip-motion-blur-transition/dist/style.css b/wip-motion-blur-transition/dist/style.css
new file mode 100644
index 0000000..182fb68
--- /dev/null
+++ b/wip-motion-blur-transition/dist/style.css
@@ -0,0 +1,14 @@
+body {
+  color: #ffffff;
+  font-family: Monospace;
+  font-size: 13px;
+  text-align: center;
+  font-weight: bold;
+  background-color: #000000;
+  margin: 0px;
+  overflow: hidden;
+}
+
+video {
+  display: none;
+}
\ No newline at end of file
diff --git a/wip-motion-blur-transition/license.txt b/wip-motion-blur-transition/license.txt
new file mode 100644
index 0000000..a8e1530
--- /dev/null
+++ b/wip-motion-blur-transition/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Robin Delaporte (https://codepen.io/robin-dela/pen/rEaYNK)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/wip-motion-blur-transition/src/index.html b/wip-motion-blur-transition/src/index.html
new file mode 100644
index 0000000..bb4aa1d
--- /dev/null
+++ b/wip-motion-blur-transition/src/index.html
@@ -0,0 +1,58 @@
+<script id="fragmentShader" type="x-shader/x-fragment">
+  
+  varying vec2 vUv;
+  uniform float dispFactor;
+  uniform sampler2D disp;
+  uniform sampler2D map1;
+  uniform sampler2D map2;
+  uniform float intensity;
+  uniform bool direction;
+    float random(vec3 scale,float seed)
+  {
+    return fract(  sin(dot(gl_FragCoord.xyz+seed,scale))*43758.5453  +  seed  );
+  }
+
+  void main()
+  {
+    const float iterations = 25.;//float(quality+1)*25.;
+    vec2 pos = vUv;//gl_FragCoord.xy / RENDERSIZE;
+    vec4 color = vec4(0.);
+    float total = 0.;
+    vec2 toCenter = vec2(0.5, 0.5) - pos;
+    float offset = random(  vec3(12.9898,78.233,151.7182), 0.  );
+    for(float t=0.; t<=iterations; t++)
+    {
+      float percent = (t+offset)/iterations;
+      float weight = 4.0*(percent-percent*percent);
+      vec4 sample1 = texture2D(map1, pos+toCenter*percent*intensity*dispFactor);
+      vec4 sample2 = vec4(0.0);
+      if(!direction)
+      {
+        sample2 = texture2D(map2, pos+toCenter*percent*intensity*(-1.0+dispFactor));
+      } else {
+        sample2 = texture2D(map2, pos+toCenter*percent*intensity*(1.0-dispFactor));
+      }
+
+      vec4 sample = mix(sample1, sample2, dispFactor);
+
+      sample.rgb *= sample.a;
+      color += sample*weight;
+      total += weight;
+    }
+    gl_FragColor = color/total;
+    gl_FragColor.rgb /= max(gl_FragColor.a,0.00001);
+  }
+</script>
+<script id="vertexShader" type="x-shader/x-vertex">
+	varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+  }
+
+</script> 
+<div id="container">
+  <video src="https://robindelaporte.fr/codepen/video3.mp4" crossorigin="anonymous" id="video" muted="true" loop="true"></video>
+  <video src="https://robindelaporte.fr/codepen/video2.mp4" crossorigin="anonymous" id="video2" muted="true" loop="true"></video>
+  </div>
+</div>
\ No newline at end of file
diff --git a/wip-motion-blur-transition/src/script.js b/wip-motion-blur-transition/src/script.js
new file mode 100644
index 0000000..01ee118
--- /dev/null
+++ b/wip-motion-blur-transition/src/script.js
@@ -0,0 +1,108 @@
+var lastUpdate;
+var container;
+var camera, scene, renderer;
+var uniforms;
+
+function init() {
+  // basic setup
+  container = document.getElementById("container");
+  camera = new THREE.Camera();
+  camera.position.z = 1;
+  scene = new THREE.Scene();
+  var geometry = new THREE.PlaneBufferGeometry(2, 2);
+
+  const map = document.querySelector("#video");
+  map.oncanplay = function() {
+    map.play();
+  };
+  const texture = new THREE.VideoTexture(map);
+  texture.minFilter = THREE.LinearFilter;
+
+  const map2 = document.querySelector("#video2");
+  map2.oncanplay = function() {
+    map2.play();
+  };
+  const texture2 = new THREE.VideoTexture(map2);
+  texture2.minFilter = THREE.LinearFilter;
+
+  // shader stuff
+  uniforms = {
+    intensity: { type: "f", value: 0.75 },
+    dispFactor: { type: "f", value: 0.0 },
+    direction: { type: "b", value: false },
+    map1: { type: "t", value: texture },
+    map2: { type: "t", value: texture2 }
+  };
+  var material = new THREE.ShaderMaterial({
+    uniforms: uniforms,
+    vertexShader: document.getElementById("vertexShader").textContent,
+    fragmentShader: document.getElementById("fragmentShader").textContent
+  });
+  
+  lastUpdate = new Date().getTime();
+  // put it together for rendering
+  var mesh = new THREE.Mesh(geometry, material);
+  scene.add(mesh);
+  renderer = new THREE.WebGLRenderer();
+  renderer.setPixelRatio(window.devicePixelRatio);
+  container.appendChild(renderer.domElement);
+
+  // event listeners
+  onWindowResize();
+  window.addEventListener("resize", onWindowResize, false);
+
+  // gui
+  this.GUI = new dat.GUI();
+  this.GUI.add(uniforms.intensity, "value", 0, 2, 0.01).name("intensity");
+  this.GUI.add(uniforms.dispFactor, "value", 0, 1, 0.01).name("transition");
+
+  this.guiObj = {
+    reverse: false
+  };
+  this.GUI.add(this.guiObj, "reverse")
+    .listen()
+    .onChange(() => {
+      uniforms.direction.value = this.guiObj.reverse;
+    });
+
+  var self = this;
+  var obj = {
+    animate: () => {
+      var t = 1;
+      if (this._value == 1) {
+        t = 0;
+      }
+      TweenMax.to(uniforms.dispFactor, 1.1, {
+        value: t,
+        ease: Expo.easeOut
+      });
+
+      if (this._value == 1) {
+        this._value = 0;
+      } else {
+        this._value = 1;
+      }
+    }
+  };
+  this.GUI.add(obj, "animate");
+}
+
+// events
+function onWindowResize(evt) {
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+function animate() {
+  var currentTime = new Date().getTime();
+  var timeSinceLastUpdate = currentTime - lastUpdate;
+  lastUpdate = currentTime;
+
+  requestAnimationFrame(animate);
+  render(timeSinceLastUpdate);
+}
+function render(timeDelta) {
+  renderer.render(scene, camera);
+}
+
+// boot
+init();
+animate();
diff --git a/wip-motion-blur-transition/src/style.css b/wip-motion-blur-transition/src/style.css
new file mode 100644
index 0000000..182fb68
--- /dev/null
+++ b/wip-motion-blur-transition/src/style.css
@@ -0,0 +1,14 @@
+body {
+  color: #ffffff;
+  font-family: Monospace;
+  font-size: 13px;
+  text-align: center;
+  font-weight: bold;
+  background-color: #000000;
+  margin: 0px;
+  overflow: hidden;
+}
+
+video {
+  display: none;
+}
\ No newline at end of file
diff --git a/wobble/README.markdown b/wobble/README.markdown
new file mode 100644
index 0000000..a83867a
--- /dev/null
+++ b/wobble/README.markdown
@@ -0,0 +1,4 @@
+# Wobble
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/neave/pen/yLNaLMw](https://codepen.io/neave/pen/yLNaLMw).
+
+ Play with a colorful wobbly surface. An interactive mouse toy. Make the surface jump and wobble.
\ No newline at end of file
diff --git a/wobble/dist/index.html b/wobble/dist/index.html
new file mode 100644
index 0000000..a572426
--- /dev/null
+++ b/wobble/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Wobble</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas></canvas>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/wobble/dist/script.js b/wobble/dist/script.js
new file mode 100644
index 0000000..9600420
--- /dev/null
+++ b/wobble/dist/script.js
@@ -0,0 +1,272 @@
+// Wobble by @neave
+
+window.requestAnimationFrame =
+	window.requestAnimationFrame ||
+	window.webkitRequestAnimationFrame ||
+	window.mozRequestAnimationFrame ||
+	window.msRequestAnimationFrame ||
+	function(callback) {
+		setTimeout(callback, 1000 / 60);
+	};
+
+Array.prototype.shuffle = function() {
+	var j, temp;
+	for (var i = this.length - 1; i > 0; i--) {
+		j = Math.floor(Math.random() * (i + 1));
+		temp = this[i];
+		this[i] = this[j];
+		this[j] = temp;
+	}
+	return this;
+};
+
+Math.clamp = function(n, min, max) {
+	return Math.max(min, Math.min(n, max));
+};
+
+var get = document.querySelector.bind(document),
+	on = document.addEventListener.bind(document),
+	mouseOff = -1000,
+	mouseX,
+	mouseY,
+	viscosity = 25,
+	damping = 0.1,
+	totalPoints,
+	dist,
+	scale,
+	canvas,
+	context,
+	surfaces,
+	palleteNum = 0,
+	palleteFirst = ['0cf', '0fc', 'ff0', 'f0c', 'c0f'],
+	palletes = [
+		['000', 'ff0', 'f0f', '0ff', 'fff'],
+		['000', 'fff', '000', 'fff', '000'],
+		['333', '666', '999', 'ccc', 'fff'],
+		['300', '600', 'f00', '600', '300'],
+		['305', '606', '907', 'c08', 'f09'],
+		['036', '067', '098', '0c9', '0fa'],
+		['00a0b0', '6a4a3c', 'cc333f', 'eb6841', 'edc951'],
+		['264653', '2a9d8f', 'e9c46a', 'f4a261', 'e76f51'],
+		['300018', '5a3d31', '837b47', 'adb85f', 'e5edb8'],
+		['343838', '005f6b', '008c9e', '00b4cc', '00dffc'],
+		['3fb8af', '7fc7af', 'dad8a7', 'ff9e9d', 'ff3d7f'],
+		['413e4a', '73626e', 'b38184', 'f0b49e', 'f7e4be'],
+		['452632', '91204d', 'e4844a', 'e8bf56', 'e2f7ce'],
+		['594f4f', '547980', '45ada8', '9de0ad', 'e5fcc2'],
+		['5d4157', '838689', 'a8caba', 'cad7b2', 'ebe3aa'],
+		['81657e', '3ea3af', '9fd9b3', 'f0f6b9', 'ff1d44'],
+		['899aa1', 'bda2a2', 'fbbe9a', 'fad889', 'faf5c8'],
+		['99b898', 'fecea8', 'ff847c', 'e84a5f', '2a363b'],
+		['ab526b', 'bca297', 'c5ceae', 'f0e2a4', 'f4ebc3'],
+		['acdeb2', 'e1eab5', 'edad9e', 'fe4b74', '390d2d'],
+		['b9d7d9', '668284', '2a2829', '493736', '7b3b3b'],
+		['bbbb88', 'ccc68d', 'eedd99', 'eec290', 'eeaa88'],
+		['cff09e', 'a8dba8', '79bd9a', '3b8686', '0b486b'],
+		['d1f2a5', 'effab4', 'ffc48c', 'ff9f80', 'f56991'],
+		['d3e2b6', 'c3dbb4', 'aaccb1', '87bdb1', '68b3af'],
+		['e0ffb3', '61c791', '31797d', '2a2f36', 'f23c55'],
+		['e25858', 'e9d6af', 'ffffdd', 'c0efd2', '384252'],
+		['e8608c', '71cbc4', 'fff9f4', 'cdd56e', 'ffbd68'],
+		['e8ddcb', 'cdb380', '036564', '033649', '031634'],
+		['e94e77', 'd68189', 'c6a49a', 'c6e5d9', 'f4ead5'],
+		['eee6ab', 'c5bc8e', '696758', '45484b', '36393b'],
+		['efffcd', 'dce9be', '555152', '2e2633', '99173c'],
+		['f04155', 'ff823a', 'f2f26f', 'fff7bd', '95cfb7'],
+		['f8b195', 'f67280', 'c06c84', '6c5b7b', '355c7d'],
+		['f8f4d7', 'f4dec2', 'f2b4a8', 'e98977', 'f4b36c'],
+		['fad089', 'ff9c5b', 'f5634a', 'ed303c', '3b8183'],
+		['fe4365', 'fc9d9a', 'f9cdad', 'c8c8a9', '83af9b'],
+		['ff4e50', 'fc913a', 'f9d423', 'ede574', 'e1f5c4'],
+		['ff9900', '424242', 'e9e9e9', 'bcbcbc', '3299bb'],
+		['ffed90', 'a8d46f', '359668', '3c3251', '341139']
+	];
+
+function Point(x, y) {
+	this.x = x;
+	this.y = y;
+
+	this.ix = x;
+	this.iy = y;
+
+	this.vx = 0;
+	this.vy = 0;
+}
+
+Point.prototype.move = function() {
+	var width = canvas.width / scale;
+	var height = canvas.height / scale;
+	this.vx += (this.ix - this.x) / viscosity * width;
+	this.vy += (this.iy - this.y) / viscosity * height;
+
+	var dx = this.x * width - mouseX / scale,
+		dy = this.y * height - mouseY / scale;
+
+	if (Math.sqrt(dx * dx + dy * dy) < dist) {
+		var a = Math.atan2(dy, dx);
+		this.vx += (Math.cos(a) * viscosity - dx) / viscosity;
+		this.vy -= (Math.sin(a) * viscosity - dy) / viscosity;
+	}
+
+	this.vx *= (1 - damping);
+	this.vy *= (1 - damping);
+	this.x += this.vx / width;
+	this.y += this.vy / height;
+
+	if (this.y < 0) {
+		this.y = 0;
+	} else if (this.y > 1) {
+		this.y = 1;
+	}
+};
+
+function Surface(y) {
+	this.y = y;
+	this.resize();
+}
+
+Surface.prototype.draw = function() {
+	var p = this.points[totalPoints - 1],
+		cx,
+		cy;
+
+	context.fillStyle = this.color;
+	context.beginPath();
+	context.moveTo(p.x * canvas.width, p.y * canvas.height);
+
+	for (var i = totalPoints - 1; i > 0; i--) {
+		p = this.points[i];
+		p.move();
+
+		cx = (p.x + this.points[i - 1].x) / 2 * canvas.width;
+		cy = (p.y + this.points[i - 1].y) / 2 * canvas.height;
+
+		if (i === 1) {
+			cx = canvas.width;
+		} else if (i === totalPoints - 1) {
+			context.bezierCurveTo(p.x * canvas.width, p.y * canvas.height, cx, cy, cx, cy);
+			p.x = 0;
+		}
+
+		context.bezierCurveTo(p.x * canvas.width, p.y * canvas.height, cx, cy, cx, cy);
+	}
+
+	context.lineTo(canvas.width, canvas.height);
+	context.lineTo(0, canvas.height);
+	context.closePath();
+	context.fill();
+};
+
+Surface.prototype.resize = function() {
+	this.points = [];
+	for (var i = totalPoints; i--; ) {
+		this.points.push(new Point(i / (totalPoints - 3), this.y));
+	}
+};
+
+Surface.prototype.wobble = function() {
+	for (var i = totalPoints - 1; i > 0; i--) {
+		this.points[i].vy += (Math.random() - 0.5) * dist * 0.6;
+	}
+};
+
+function setPallete() {
+	canvas.style.backgroundColor = '#' + palletes[palleteNum][0];
+	for (var i = surfaces.length; i--; ) {
+		surfaces[surfaces.length - i - 1].color = '#' + palletes[palleteNum][i + 1];
+	}
+}
+
+function nextPallete() {
+	palleteNum++;
+	if (palleteNum >= palletes.length) {
+		palleteNum = 0;
+		palletes.shuffle();
+	}
+	setPallete();
+}
+
+function wobbleSuraces() {
+	resizeSuraces();
+
+	for (var i = surfaces.length; i--; ) {
+		surfaces[i].wobble();
+	}
+	nextPallete();
+}
+
+function drawSurfaces() {
+	context.clearRect(0, 0, canvas.width, canvas.height);
+	for (var i = surfaces.length; i--; ) {
+		surfaces[i].draw();
+	}
+}
+
+function resizeSuraces() {
+	scale = window.devicePixelRatio || 1;
+
+	canvas.width = innerWidth * scale;
+	canvas.height = innerHeight * scale;
+	canvas.style.width = innerWidth + 'px';
+	canvas.style.height = innerHeight + 'px';
+
+	totalPoints = Math.round(Math.clamp(Math.pow(Math.random() * 8, 2), 16, innerWidth / 35));
+	dist = Math.clamp(innerWidth / 4, 150, 200);
+
+	for (var i = surfaces.length; i--; ) {
+		surfaces[i].resize();
+	}
+	drawSurfaces();
+}
+
+function update() {
+	requestAnimationFrame(update);
+	drawSurfaces();
+}
+
+function init() {
+	canvas = get('canvas');
+	context = canvas.getContext('2d');
+
+	canvas.ontouchmove = function(event) {
+		mouseX = event.targetTouches[0].pageX * scale;
+		mouseY = event.targetTouches[0].pageY * scale;
+	};
+
+	canvas.ontouchstart = function(event) {
+		event.preventDefault();
+	};
+
+	canvas.ontouchend = function(event) {
+		wobbleSuraces();
+		mouseX = mouseY = mouseOff;
+	};
+
+	canvas.onmousemove = function(event) {
+		mouseX = event.pageX * scale;
+		mouseY = event.pageY * scale;
+	};
+
+	canvas.onmousedown = wobbleSuraces;
+
+	canvas.onmouseleave = function() {
+		mouseX = mouseY = mouseOff;
+	};
+
+	surfaces = [
+		new Surface(4/5),
+		new Surface(3/5),
+		new Surface(2/5),
+		new Surface(1/5)
+	];
+
+	palletes.shuffle();
+	palletes.unshift(palleteFirst);
+	setPallete(0);
+
+	window.onresize = resizeSuraces;
+	resizeSuraces();
+	update();
+}
+
+on('DOMContentLoaded', init);
\ No newline at end of file
diff --git a/wobble/dist/style.css b/wobble/dist/style.css
new file mode 100644
index 0000000..1d53284
--- /dev/null
+++ b/wobble/dist/style.css
@@ -0,0 +1,21 @@
+html,
+body {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	color: #fff;
+	background-color: #000;
+}
+
+canvas {
+	-webkit-tap-highlight-color: transparent;
+	tap-highlight-color: transparent;
+	-webkit-user-select: none;
+	user-select: none;
+	cursor: pointer;
+}
\ No newline at end of file
diff --git a/wobble/license.txt b/wobble/license.txt
new file mode 100644
index 0000000..c6c8bc1
--- /dev/null
+++ b/wobble/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Paul Neave (https://codepen.io/neave/pen/yLNaLMw)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/wobble/src/index.html b/wobble/src/index.html
new file mode 100644
index 0000000..c733673
--- /dev/null
+++ b/wobble/src/index.html
@@ -0,0 +1 @@
+<canvas></canvas>
\ No newline at end of file
diff --git a/wobble/src/script.js b/wobble/src/script.js
new file mode 100644
index 0000000..9190e09
--- /dev/null
+++ b/wobble/src/script.js
@@ -0,0 +1,272 @@
+// Wobble by @neave
+
+window.requestAnimationFrame =
+	window.requestAnimationFrame ||
+	window.webkitRequestAnimationFrame ||
+	window.mozRequestAnimationFrame ||
+	window.msRequestAnimationFrame ||
+	function(callback) {
+		setTimeout(callback, 1000 / 60);
+	};
+
+Array.prototype.shuffle = function() {
+	var j, temp;
+	for (var i = this.length - 1; i > 0; i--) {
+		j = Math.floor(Math.random() * (i + 1));
+		temp = this[i];
+		this[i] = this[j];
+		this[j] = temp;
+	}
+	return this;
+};
+
+Math.clamp = function(n, min, max) {
+	return Math.max(min, Math.min(n, max));
+};
+
+var get = document.querySelector.bind(document),
+	on = document.addEventListener.bind(document),
+	mouseOff = -1000,
+	mouseX,
+	mouseY,
+	viscosity = 25,
+	damping = 0.1,
+	totalPoints,
+	dist,
+	scale,
+	canvas,
+	context,
+	surfaces,
+	palleteNum = 0,
+	palleteFirst = ['0cf', '0fc', 'ff0', 'f0c', 'c0f'],
+	palletes = [
+		['000', 'ff0', 'f0f', '0ff', 'fff'],
+		['000', 'fff', '000', 'fff', '000'],
+		['333', '666', '999', 'ccc', 'fff'],
+		['300', '600', 'f00', '600', '300'],
+		['305', '606', '907', 'c08', 'f09'],
+		['036', '067', '098', '0c9', '0fa'],
+		['00a0b0', '6a4a3c', 'cc333f', 'eb6841', 'edc951'],
+		['264653', '2a9d8f', 'e9c46a', 'f4a261', 'e76f51'],
+		['300018', '5a3d31', '837b47', 'adb85f', 'e5edb8'],
+		['343838', '005f6b', '008c9e', '00b4cc', '00dffc'],
+		['3fb8af', '7fc7af', 'dad8a7', 'ff9e9d', 'ff3d7f'],
+		['413e4a', '73626e', 'b38184', 'f0b49e', 'f7e4be'],
+		['452632', '91204d', 'e4844a', 'e8bf56', 'e2f7ce'],
+		['594f4f', '547980', '45ada8', '9de0ad', 'e5fcc2'],
+		['5d4157', '838689', 'a8caba', 'cad7b2', 'ebe3aa'],
+		['81657e', '3ea3af', '9fd9b3', 'f0f6b9', 'ff1d44'],
+		['899aa1', 'bda2a2', 'fbbe9a', 'fad889', 'faf5c8'],
+		['99b898', 'fecea8', 'ff847c', 'e84a5f', '2a363b'],
+		['ab526b', 'bca297', 'c5ceae', 'f0e2a4', 'f4ebc3'],
+		['acdeb2', 'e1eab5', 'edad9e', 'fe4b74', '390d2d'],
+		['b9d7d9', '668284', '2a2829', '493736', '7b3b3b'],
+		['bbbb88', 'ccc68d', 'eedd99', 'eec290', 'eeaa88'],
+		['cff09e', 'a8dba8', '79bd9a', '3b8686', '0b486b'],
+		['d1f2a5', 'effab4', 'ffc48c', 'ff9f80', 'f56991'],
+		['d3e2b6', 'c3dbb4', 'aaccb1', '87bdb1', '68b3af'],
+		['e0ffb3', '61c791', '31797d', '2a2f36', 'f23c55'],
+		['e25858', 'e9d6af', 'ffffdd', 'c0efd2', '384252'],
+		['e8608c', '71cbc4', 'fff9f4', 'cdd56e', 'ffbd68'],
+		['e8ddcb', 'cdb380', '036564', '033649', '031634'],
+		['e94e77', 'd68189', 'c6a49a', 'c6e5d9', 'f4ead5'],
+		['eee6ab', 'c5bc8e', '696758', '45484b', '36393b'],
+		['efffcd', 'dce9be', '555152', '2e2633', '99173c'],
+		['f04155', 'ff823a', 'f2f26f', 'fff7bd', '95cfb7'],
+		['f8b195', 'f67280', 'c06c84', '6c5b7b', '355c7d'],
+		['f8f4d7', 'f4dec2', 'f2b4a8', 'e98977', 'f4b36c'],
+		['fad089', 'ff9c5b', 'f5634a', 'ed303c', '3b8183'],
+		['fe4365', 'fc9d9a', 'f9cdad', 'c8c8a9', '83af9b'],
+		['ff4e50', 'fc913a', 'f9d423', 'ede574', 'e1f5c4'],
+		['ff9900', '424242', 'e9e9e9', 'bcbcbc', '3299bb'],
+		['ffed90', 'a8d46f', '359668', '3c3251', '341139']
+	];
+
+function Point(x, y) {
+	this.x = x;
+	this.y = y;
+
+	this.ix = x;
+	this.iy = y;
+
+	this.vx = 0;
+	this.vy = 0;
+}
+
+Point.prototype.move = function() {
+	var width = canvas.width / scale;
+	var height = canvas.height / scale;
+	this.vx += (this.ix - this.x) / viscosity * width;
+	this.vy += (this.iy - this.y) / viscosity * height;
+
+	var dx = this.x * width - mouseX / scale,
+		dy = this.y * height - mouseY / scale;
+
+	if (Math.sqrt(dx * dx + dy * dy) < dist) {
+		var a = Math.atan2(dy, dx);
+		this.vx += (Math.cos(a) * viscosity - dx) / viscosity;
+		this.vy -= (Math.sin(a) * viscosity - dy) / viscosity;
+	}
+
+	this.vx *= (1 - damping);
+	this.vy *= (1 - damping);
+	this.x += this.vx / width;
+	this.y += this.vy / height;
+
+	if (this.y < 0) {
+		this.y = 0;
+	} else if (this.y > 1) {
+		this.y = 1;
+	}
+};
+
+function Surface(y) {
+	this.y = y;
+	this.resize();
+}
+
+Surface.prototype.draw = function() {
+	var p = this.points[totalPoints - 1],
+		cx,
+		cy;
+
+	context.fillStyle = this.color;
+	context.beginPath();
+	context.moveTo(p.x * canvas.width, p.y * canvas.height);
+
+	for (var i = totalPoints - 1; i > 0; i--) {
+		p = this.points[i];
+		p.move();
+
+		cx = (p.x + this.points[i - 1].x) / 2 * canvas.width;
+		cy = (p.y + this.points[i - 1].y) / 2 * canvas.height;
+
+		if (i === 1) {
+			cx = canvas.width;
+		} else if (i === totalPoints - 1) {
+			context.bezierCurveTo(p.x * canvas.width, p.y * canvas.height, cx, cy, cx, cy);
+			p.x = 0;
+		}
+
+		context.bezierCurveTo(p.x * canvas.width, p.y * canvas.height, cx, cy, cx, cy);
+	}
+
+	context.lineTo(canvas.width, canvas.height);
+	context.lineTo(0, canvas.height);
+	context.closePath();
+	context.fill();
+};
+
+Surface.prototype.resize = function() {
+	this.points = [];
+	for (var i = totalPoints; i--; ) {
+		this.points.push(new Point(i / (totalPoints - 3), this.y));
+	}
+};
+
+Surface.prototype.wobble = function() {
+	for (var i = totalPoints - 1; i > 0; i--) {
+		this.points[i].vy += (Math.random() - 0.5) * dist * 0.6;
+	}
+};
+
+function setPallete() {
+	canvas.style.backgroundColor = '#' + palletes[palleteNum][0];
+	for (var i = surfaces.length; i--; ) {
+		surfaces[surfaces.length - i - 1].color = '#' + palletes[palleteNum][i + 1];
+	}
+}
+
+function nextPallete() {
+	palleteNum++;
+	if (palleteNum >= palletes.length) {
+		palleteNum = 0;
+		palletes.shuffle();
+	}
+	setPallete();
+}
+
+function wobbleSuraces() {
+	resizeSuraces();
+
+	for (var i = surfaces.length; i--; ) {
+		surfaces[i].wobble();
+	}
+	nextPallete();
+}
+
+function drawSurfaces() {
+	context.clearRect(0, 0, canvas.width, canvas.height);
+	for (var i = surfaces.length; i--; ) {
+		surfaces[i].draw();
+	}
+}
+
+function resizeSuraces() {
+	scale = window.devicePixelRatio || 1;
+
+	canvas.width = innerWidth * scale;
+	canvas.height = innerHeight * scale;
+	canvas.style.width = innerWidth + 'px';
+	canvas.style.height = innerHeight + 'px';
+
+	totalPoints = Math.round(Math.clamp(Math.pow(Math.random() * 8, 2), 16, innerWidth / 35));
+	dist = Math.clamp(innerWidth / 4, 150, 200);
+
+	for (var i = surfaces.length; i--; ) {
+		surfaces[i].resize();
+	}
+	drawSurfaces();
+}
+
+function update() {
+	requestAnimationFrame(update);
+	drawSurfaces();
+}
+
+function init() {
+	canvas = get('canvas');
+	context = canvas.getContext('2d');
+
+	canvas.ontouchmove = function(event) {
+		mouseX = event.targetTouches[0].pageX * scale;
+		mouseY = event.targetTouches[0].pageY * scale;
+	};
+
+	canvas.ontouchstart = function(event) {
+		event.preventDefault();
+	};
+
+	canvas.ontouchend = function(event) {
+		wobbleSuraces();
+		mouseX = mouseY = mouseOff;
+	};
+
+	canvas.onmousemove = function(event) {
+		mouseX = event.pageX * scale;
+		mouseY = event.pageY * scale;
+	};
+
+	canvas.onmousedown = wobbleSuraces;
+
+	canvas.onmouseleave = function() {
+		mouseX = mouseY = mouseOff;
+	};
+
+	surfaces = [
+		new Surface(4/5),
+		new Surface(3/5),
+		new Surface(2/5),
+		new Surface(1/5)
+	];
+
+	palletes.shuffle();
+	palletes.unshift(palleteFirst);
+	setPallete(0);
+
+	window.onresize = resizeSuraces;
+	resizeSuraces();
+	update();
+}
+
+on('DOMContentLoaded', init);
diff --git a/wobble/src/style.css b/wobble/src/style.css
new file mode 100644
index 0000000..1af427d
--- /dev/null
+++ b/wobble/src/style.css
@@ -0,0 +1,21 @@
+html,
+body {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	color: #fff;
+	background-color: #000;
+}
+
+canvas {
+	-webkit-tap-highlight-color: transparent;
+	tap-highlight-color: transparent;
+	-webkit-user-select: none;
+	user-select: none;
+	cursor: pointer;
+}
diff --git a/wonderland/README.markdown b/wonderland/README.markdown
new file mode 100644
index 0000000..ec56d15
--- /dev/null
+++ b/wonderland/README.markdown
@@ -0,0 +1,4 @@
+# Wonderland
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/pimskie/pen/jONvLJG](https://codepen.io/pimskie/pen/jONvLJG).
+
+ 
\ No newline at end of file
diff --git a/wonderland/dist/index.html b/wonderland/dist/index.html
new file mode 100644
index 0000000..ccd5cb4
--- /dev/null
+++ b/wonderland/dist/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Wonderland</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas class="js-canvas"></canvas>
+<!-- partial -->
+  <script src='https://unpkg.com/simplex-noise@2.4.0/simplex-noise.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/wonderland/dist/script.js b/wonderland/dist/script.js
new file mode 100644
index 0000000..79fa57b
--- /dev/null
+++ b/wonderland/dist/script.js
@@ -0,0 +1,168 @@
+const simplex = new SimplexNoise(0.3);
+const TAU = Math.PI * 2;
+
+const PALETTE = [
+  [94, 72, 79],
+  [178, 54, 45],
+  [193, 58, 32],
+  [344, 88, 61],
+];
+
+const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+
+class Stage {
+  constructor(canvas, width, height) {
+    this.canvas = canvas;
+    this.context = this.canvas.getContext('2d');
+
+    this.setSize(width, height);
+  }
+
+  clear() {
+    this.context.clearRect(0, 0, this.width, this.height);
+  }
+
+  fade() {
+    this.context.globalCompositeOperation = 'destination-out';
+    this.context.fillStyle = 'rgba(0, 0, 0, 0.05)';
+    this.context.fillRect(0, 0, this.width, this.height);
+    this.context.globalCompositeOperation = 'lighter';
+  }
+
+  setSize(width, height) {
+    this.width = width;
+    this.height = height;
+
+    this.centerX = this.width * 0.5;
+    this.centerY = this.height * 0.5;
+
+    this.radius = Math.min(this.width, this.height) * 0.5;
+
+    this.canvas.width = this.width;
+    this.canvas.height = this.height;
+
+    this.center = { x: this.centerX, y: this.centerY };
+  }
+
+  getRandomPosition() {
+    return { x: this.width * Math.random(), y: this.height * Math.random() };
+  }
+}
+
+class Segment {
+  constructor(position, index) {
+    const { x, y } = position;
+
+    this.position = { x, y };
+    this.positionPrevious = { x, y };
+    this.index = index;
+
+    this.length = 2;
+
+    this.phase = this.index * 0.001;
+    this.speed = 0.001;
+
+    this.acceleration = { x: 0, y: 0 };
+  }
+
+  update() {
+    const volatilityX = 0.0002;
+    const volatilityY = 0.0006;
+
+    const noise = simplex.noise3D(this.position.x * volatilityX, this.position.y * volatilityY, this.phase);
+    const angleX = clamp(noise * Math.PI, -Math.PI / 2, Math.PI / 2);
+
+    const velocity = {
+      x: Math.cos(angleX) * this.length,
+      y: Math.sin(noise * (Math.PI)) * this.length,
+    };
+
+    this.positionPrevious.x = this.position.x;
+    this.positionPrevious.y = this.position.y;
+
+    this.position.x += velocity.x;
+    this.position.y += velocity.y;
+
+    this.phase += this.speed;
+  }
+}
+
+class Scene {
+  constructor(stage, numSegments) {
+    this.stage = stage;
+    this.numSegments = numSegments;
+    this.segmentSpacing = this.stage.height / this.numSegments;
+
+    this.segments = [];
+    this.rafId = null;
+  }
+
+  reset() {
+    this.stage.clear();
+    this.generate();
+  }
+
+  generate() {
+    const { stage: { centerY } } = this;
+
+    this.segments = new Array(this.numSegments).fill().map((_, i) => {
+      const x = 0;
+      const y = i * this.segmentSpacing;
+      const percentCenterY = Math.abs((y - centerY) / centerY);
+      const lightness = 50 * percentCenterY;
+
+      return new Segment({ x, y }, i, lightness);
+    });
+  }
+
+  connect(from, to, [h, s, l]) {
+    const { positionPrevious: topLeft, position: topRight } = from;
+    const { positionPrevious: bottomLeft, position: bottomRight } = to;
+    const { context } = this.stage;
+    const color = `hsl(${h}, ${s}%, ${l}%)`;
+
+    context.beginPath();
+    context.strokeStyle = color;
+    context.fillStyle = color;
+    context.moveTo(topLeft.x, topLeft.y);
+    context.lineTo(topRight.x, topRight.y);
+    context.lineTo(bottomRight.x, bottomRight.y);
+    context.lineTo(bottomLeft.x, bottomLeft.y);
+    context.lineTo(topLeft.x, topLeft.y);
+    context.stroke();
+    context.fill();
+    context.closePath();
+  }
+
+  run() {
+    for (let i = 0; i < this.segments.length; i++) {
+      const segment = this.segments[i];
+
+      segment.update();
+
+      if (i < this.segments.length - 1) {
+        const segmentNext = this.segments[i + 1];
+        const colorIndex = (i + 1 + PALETTE.length) % PALETTE.length;
+        const hsl = PALETTE[colorIndex];
+
+        this.connect(segment, segmentNext, hsl);
+      }
+    }
+
+    this.rafId = requestAnimationFrame(() => this.run());
+  }
+}
+
+const stage = new Stage(document.querySelector('.js-canvas'), window.innerWidth, window.innerHeight);
+const scene = new Scene(stage, 100);
+scene.generate();
+scene.run();
+
+window.addEventListener('resize', () => {
+  stage.setSize(window.innerWidth, window.innerHeight);
+  scene.reset();
+});
+
+document.body.addEventListener('click', () => {
+  scene.reset();
+});
\ No newline at end of file
diff --git a/wonderland/dist/style.css b/wonderland/dist/style.css
new file mode 100644
index 0000000..e970f83
--- /dev/null
+++ b/wonderland/dist/style.css
@@ -0,0 +1,8 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  overflow: hidden;
+}
diff --git a/wonderland/license.txt b/wonderland/license.txt
new file mode 100644
index 0000000..6203b8f
--- /dev/null
+++ b/wonderland/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by pimskie (https://codepen.io/pimskie/pen/jONvLJG)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/wonderland/src/index.html b/wonderland/src/index.html
new file mode 100644
index 0000000..542c06e
--- /dev/null
+++ b/wonderland/src/index.html
@@ -0,0 +1 @@
+<canvas class="js-canvas"></canvas>
\ No newline at end of file
diff --git a/wonderland/src/script.js b/wonderland/src/script.js
new file mode 100644
index 0000000..42c711e
--- /dev/null
+++ b/wonderland/src/script.js
@@ -0,0 +1,168 @@
+const simplex = new SimplexNoise(0.3);
+const TAU = Math.PI * 2;
+
+const PALETTE = [
+  [94, 72, 79],
+  [178, 54, 45],
+  [193, 58, 32],
+  [344, 88, 61],
+];
+
+const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+
+class Stage {
+  constructor(canvas, width, height) {
+    this.canvas = canvas;
+    this.context = this.canvas.getContext('2d');
+
+    this.setSize(width, height);
+  }
+
+  clear() {
+    this.context.clearRect(0, 0, this.width, this.height);
+  }
+
+  fade() {
+    this.context.globalCompositeOperation = 'destination-out';
+    this.context.fillStyle = 'rgba(0, 0, 0, 0.05)';
+    this.context.fillRect(0, 0, this.width, this.height);
+    this.context.globalCompositeOperation = 'lighter';
+  }
+
+  setSize(width, height) {
+    this.width = width;
+    this.height = height;
+
+    this.centerX = this.width * 0.5;
+    this.centerY = this.height * 0.5;
+
+    this.radius = Math.min(this.width, this.height) * 0.5;
+
+    this.canvas.width = this.width;
+    this.canvas.height = this.height;
+
+    this.center = { x: this.centerX, y: this.centerY };
+  }
+
+  getRandomPosition() {
+    return { x: this.width * Math.random(), y: this.height * Math.random() };
+  }
+}
+
+class Segment {
+  constructor(position, index) {
+    const { x, y } = position;
+
+    this.position = { x, y };
+    this.positionPrevious = { x, y };
+    this.index = index;
+
+    this.length = 2;
+
+    this.phase = this.index * 0.001;
+    this.speed = 0.001;
+
+    this.acceleration = { x: 0, y: 0 };
+  }
+
+  update() {
+    const volatilityX = 0.0002;
+    const volatilityY = 0.0006;
+
+    const noise = simplex.noise3D(this.position.x * volatilityX, this.position.y * volatilityY, this.phase);
+    const angleX = clamp(noise * Math.PI, -Math.PI / 2, Math.PI / 2);
+
+    const velocity = {
+      x: Math.cos(angleX) * this.length,
+      y: Math.sin(noise * (Math.PI)) * this.length,
+    };
+
+    this.positionPrevious.x = this.position.x;
+    this.positionPrevious.y = this.position.y;
+
+    this.position.x += velocity.x;
+    this.position.y += velocity.y;
+
+    this.phase += this.speed;
+  }
+}
+
+class Scene {
+  constructor(stage, numSegments) {
+    this.stage = stage;
+    this.numSegments = numSegments;
+    this.segmentSpacing = this.stage.height / this.numSegments;
+
+    this.segments = [];
+    this.rafId = null;
+  }
+
+  reset() {
+    this.stage.clear();
+    this.generate();
+  }
+
+  generate() {
+    const { stage: { centerY } } = this;
+
+    this.segments = new Array(this.numSegments).fill().map((_, i) => {
+      const x = 0;
+      const y = i * this.segmentSpacing;
+      const percentCenterY = Math.abs((y - centerY) / centerY);
+      const lightness = 50 * percentCenterY;
+
+      return new Segment({ x, y }, i, lightness);
+    });
+  }
+
+  connect(from, to, [h, s, l]) {
+    const { positionPrevious: topLeft, position: topRight } = from;
+    const { positionPrevious: bottomLeft, position: bottomRight } = to;
+    const { context } = this.stage;
+    const color = `hsl(${h}, ${s}%, ${l}%)`;
+
+    context.beginPath();
+    context.strokeStyle = color;
+    context.fillStyle = color;
+    context.moveTo(topLeft.x, topLeft.y);
+    context.lineTo(topRight.x, topRight.y);
+    context.lineTo(bottomRight.x, bottomRight.y);
+    context.lineTo(bottomLeft.x, bottomLeft.y);
+    context.lineTo(topLeft.x, topLeft.y);
+    context.stroke();
+    context.fill();
+    context.closePath();
+  }
+
+  run() {
+    for (let i = 0; i < this.segments.length; i++) {
+      const segment = this.segments[i];
+
+      segment.update();
+
+      if (i < this.segments.length - 1) {
+        const segmentNext = this.segments[i + 1];
+        const colorIndex = (i + 1 + PALETTE.length) % PALETTE.length;
+        const hsl = PALETTE[colorIndex];
+
+        this.connect(segment, segmentNext, hsl);
+      }
+    }
+
+    this.rafId = requestAnimationFrame(() => this.run());
+  }
+}
+
+const stage = new Stage(document.querySelector('.js-canvas'), window.innerWidth, window.innerHeight);
+const scene = new Scene(stage, 100);
+scene.generate();
+scene.run();
+
+window.addEventListener('resize', () => {
+  stage.setSize(window.innerWidth, window.innerHeight);
+  scene.reset();
+});
+
+document.body.addEventListener('click', () => {
+  scene.reset();
+});
diff --git a/wonderland/src/style.scss b/wonderland/src/style.scss
new file mode 100644
index 0000000..2f6363e
--- /dev/null
+++ b/wonderland/src/style.scss
@@ -0,0 +1,2 @@
+html, body { margin: 0; padding: 0; }
+body { overflow: hidden; }
\ No newline at end of file
diff --git a/zdog-and-goo/README.markdown b/zdog-and-goo/README.markdown
new file mode 100644
index 0000000..3a81911
--- /dev/null
+++ b/zdog-and-goo/README.markdown
@@ -0,0 +1,4 @@
+# Zdog and Goo
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/chrisgannon/pen/gNpWLZ](https://codepen.io/chrisgannon/pen/gNpWLZ).
+
+ Yes I know, the title sounds like a bad '80s movie about two washed up rappers.
\ No newline at end of file
diff --git a/zdog-and-goo/dist/index.html b/zdog-and-goo/dist/index.html
new file mode 100644
index 0000000..888bbca
--- /dev/null
+++ b/zdog-and-goo/dist/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Zdog and Goo</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<svg class="zdog-svg"  viewBox="0 0 800 600">
+	<defs>
+  <filter id="goo">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
+      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9" result="cm" />
+      <feComposite in="SourceGraphic" in2="cm" operator="atop"></feComposite>
+  	</filter>   		
+		</defs>
+	<g class="container" filter="url(#goo)"/>
+</svg>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>
+<script src='https://unpkg.com/zdog@1.0.1/dist/zdog.dist.js'></script>
+<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/makeZdogBezier.min.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/zdog-and-goo/dist/script.js b/zdog-and-goo/dist/script.js
new file mode 100644
index 0000000..4acef73
--- /dev/null
+++ b/zdog-and-goo/dist/script.js
@@ -0,0 +1,103 @@
+function radiansToDegrees (_val) {  
+  return _val * (Math.PI/180);
+}
+
+var lensBezier = MorphSVGPlugin.pathDataToBezier('M120,0H0v16c0,60,60,60,60,60c19.5,0,36.8-9.4,47.8-23.9c0.2-0.1,0.4-0.3,0.6-0.5l6.1-5.8c3.6-3.4,7.3-3.4,10.9,0l6.1,5.8  c0.2,0.2,0.4,0.3,0.6,0.5C143.1,66.6,160.5,76,180,76h0c33,0,60-27,60-60V0H120z', {
+  offsetX: 0,
+  offsetY: 0
+})
+
+
+let animationObject = { zoom:1, rotationX:0,rotationY:0  };
+
+
+let svg = document.querySelector('.zdog-svg');
+let container = document.querySelector('.container');
+
+let scene = new Zdog.Anchor({
+  translate: {x: 400, y: 300},
+	zoom: 2,
+	scale: 2
+});
+const rainbowBezierArray = [
+	'M394.2,198.2c0-108.2-87.8-196-196-196S2.2,90,2.2,198.2',
+	'M381.2,198.2c0-101.1-82-183-183-183s-183,82-183,183',
+	'M368.3,198.2c0-93.9-76.2-170.1-170.1-170.1S28.1,104.3,28.1,198.2',
+	'M355.3,198.2c0-86.8-70.4-157.1-157.1-157.1S41.1,111.4,41.1,198.2',
+	'M342.4,198.2c0-79.6-64.5-144.2-144.2-144.2S54,118.6,54,198.2',
+	'M329.4,198.2c0-72.5-58.7-131.2-131.2-131.2S67,125.7,67,198.2',
+	'M316.5,198.2c0-65.3-52.9-118.3-118.3-118.3S79.9,132.9,79.9,198.2',
+	'M303.5,198.2c0-58.2-47.1-105.3-105.3-105.3S92.9,140,92.9,198.2'
+	
+].reverse();
+
+const rainbowColorArray = [
+	'#F63959',
+	'#F96937',
+	'#FCD100',
+	'#CECF00',
+	'#70B44E',
+	'#0C9DC5',
+	'#344DC6',
+	'#6535C4'
+].reverse()
+
+const mainGroup = new Zdog.Anchor({
+  addTo: scene,
+  translate: {y: 0, z: -0 }
+});
+
+const makeRings = () => {
+	let shape, count = 160;
+	for(let i = 0; i < 8; i++) {
+		
+		shape = new Zdog.Ellipse({
+			translate: {x: -0, y: -0, z: count * 0.7 },
+			addTo: mainGroup,
+			diameter: count,
+			closed: false,
+			stroke: 40 ,
+			fill: false,
+			color: rainbowColorArray[i]
+		});
+		count -= 46;
+	}
+}
+
+makeRings()
+
+function animate() {
+
+	scene.rotate.x  = radiansToDegrees(animationObject.rotationX);
+	scene.rotate.y  = radiansToDegrees(animationObject.rotationY);
+
+  scene.updateGraph();
+  render();
+}
+
+function render() {
+  empty( container );
+  scene.renderGraphSvg( container );
+}
+
+function empty( element ) {
+  while ( element.firstChild ) {
+    element.removeChild( element.firstChild );
+  }
+}
+
+var tl = new TimelineMax({  onUpdate: animate});
+tl.to(animationObject, 12, {
+	counter: 360,
+	clockWise: 360,
+  ease: Linear.easeNone,
+	repeat: -1
+})
+.to(animationObject, 6, {
+	rotationY: 360,
+  ease: Sine.easeInOut,
+	repeat: -1
+}, 0)
+
+
+TweenMax.globalTimeScale(0.5)
\ No newline at end of file
diff --git a/zdog-and-goo/dist/style.css b/zdog-and-goo/dist/style.css
new file mode 100644
index 0000000..6d1e85a
--- /dev/null
+++ b/zdog-and-goo/dist/style.css
@@ -0,0 +1,36 @@
+body {
+ background-color: #111;
+ overflow: hidden;
+ text-align:center;
+  display: flex;
+  align-items: center;
+  justify-content: center; 
+}
+
+body,
+html {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+.zdog-canvas {
+  background: transparent;
+  /* cursor: move; */
+}
+
+.zdog-svg {
+	width: 100%;
+	height: 100%;
+}
+.container{
+	opacity: 1;
+}
+
+.container path {
+}
+
+path {
+	mix-blend-mode: screen;
+	
+}
\ No newline at end of file
diff --git a/zdog-and-goo/license.txt b/zdog-and-goo/license.txt
new file mode 100644
index 0000000..2ec122d
--- /dev/null
+++ b/zdog-and-goo/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Chris Gannon (https://codepen.io/chrisgannon/pen/gNpWLZ)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/zdog-and-goo/src/index.html b/zdog-and-goo/src/index.html
new file mode 100644
index 0000000..98660c4
--- /dev/null
+++ b/zdog-and-goo/src/index.html
@@ -0,0 +1,10 @@
+<svg class="zdog-svg"  viewBox="0 0 800 600">
+	<defs>
+  <filter id="goo">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
+      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9" result="cm" />
+      <feComposite in="SourceGraphic" in2="cm" operator="atop"></feComposite>
+  	</filter>   		
+		</defs>
+	<g class="container" filter="url(#goo)"/>
+</svg>
\ No newline at end of file
diff --git a/zdog-and-goo/src/script.js b/zdog-and-goo/src/script.js
new file mode 100644
index 0000000..4acef73
--- /dev/null
+++ b/zdog-and-goo/src/script.js
@@ -0,0 +1,103 @@
+function radiansToDegrees (_val) {  
+  return _val * (Math.PI/180);
+}
+
+var lensBezier = MorphSVGPlugin.pathDataToBezier('M120,0H0v16c0,60,60,60,60,60c19.5,0,36.8-9.4,47.8-23.9c0.2-0.1,0.4-0.3,0.6-0.5l6.1-5.8c3.6-3.4,7.3-3.4,10.9,0l6.1,5.8  c0.2,0.2,0.4,0.3,0.6,0.5C143.1,66.6,160.5,76,180,76h0c33,0,60-27,60-60V0H120z', {
+  offsetX: 0,
+  offsetY: 0
+})
+
+
+let animationObject = { zoom:1, rotationX:0,rotationY:0  };
+
+
+let svg = document.querySelector('.zdog-svg');
+let container = document.querySelector('.container');
+
+let scene = new Zdog.Anchor({
+  translate: {x: 400, y: 300},
+	zoom: 2,
+	scale: 2
+});
+const rainbowBezierArray = [
+	'M394.2,198.2c0-108.2-87.8-196-196-196S2.2,90,2.2,198.2',
+	'M381.2,198.2c0-101.1-82-183-183-183s-183,82-183,183',
+	'M368.3,198.2c0-93.9-76.2-170.1-170.1-170.1S28.1,104.3,28.1,198.2',
+	'M355.3,198.2c0-86.8-70.4-157.1-157.1-157.1S41.1,111.4,41.1,198.2',
+	'M342.4,198.2c0-79.6-64.5-144.2-144.2-144.2S54,118.6,54,198.2',
+	'M329.4,198.2c0-72.5-58.7-131.2-131.2-131.2S67,125.7,67,198.2',
+	'M316.5,198.2c0-65.3-52.9-118.3-118.3-118.3S79.9,132.9,79.9,198.2',
+	'M303.5,198.2c0-58.2-47.1-105.3-105.3-105.3S92.9,140,92.9,198.2'
+	
+].reverse();
+
+const rainbowColorArray = [
+	'#F63959',
+	'#F96937',
+	'#FCD100',
+	'#CECF00',
+	'#70B44E',
+	'#0C9DC5',
+	'#344DC6',
+	'#6535C4'
+].reverse()
+
+const mainGroup = new Zdog.Anchor({
+  addTo: scene,
+  translate: {y: 0, z: -0 }
+});
+
+const makeRings = () => {
+	let shape, count = 160;
+	for(let i = 0; i < 8; i++) {
+		
+		shape = new Zdog.Ellipse({
+			translate: {x: -0, y: -0, z: count * 0.7 },
+			addTo: mainGroup,
+			diameter: count,
+			closed: false,
+			stroke: 40 ,
+			fill: false,
+			color: rainbowColorArray[i]
+		});
+		count -= 46;
+	}
+}
+
+makeRings()
+
+function animate() {
+
+	scene.rotate.x  = radiansToDegrees(animationObject.rotationX);
+	scene.rotate.y  = radiansToDegrees(animationObject.rotationY);
+
+  scene.updateGraph();
+  render();
+}
+
+function render() {
+  empty( container );
+  scene.renderGraphSvg( container );
+}
+
+function empty( element ) {
+  while ( element.firstChild ) {
+    element.removeChild( element.firstChild );
+  }
+}
+
+var tl = new TimelineMax({  onUpdate: animate});
+tl.to(animationObject, 12, {
+	counter: 360,
+	clockWise: 360,
+  ease: Linear.easeNone,
+	repeat: -1
+})
+.to(animationObject, 6, {
+	rotationY: 360,
+  ease: Sine.easeInOut,
+	repeat: -1
+}, 0)
+
+
+TweenMax.globalTimeScale(0.5)
\ No newline at end of file
diff --git a/zdog-and-goo/src/style.css b/zdog-and-goo/src/style.css
new file mode 100644
index 0000000..6d1e85a
--- /dev/null
+++ b/zdog-and-goo/src/style.css
@@ -0,0 +1,36 @@
+body {
+ background-color: #111;
+ overflow: hidden;
+ text-align:center;
+  display: flex;
+  align-items: center;
+  justify-content: center; 
+}
+
+body,
+html {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+.zdog-canvas {
+  background: transparent;
+  /* cursor: move; */
+}
+
+.zdog-svg {
+	width: 100%;
+	height: 100%;
+}
+.container{
+	opacity: 1;
+}
+
+.container path {
+}
+
+path {
+	mix-blend-mode: screen;
+	
+}
\ No newline at end of file
diff --git a/zdog-space-scene/README.markdown b/zdog-space-scene/README.markdown
new file mode 100644
index 0000000..aa2ff74
--- /dev/null
+++ b/zdog-space-scene/README.markdown
@@ -0,0 +1,6 @@
+# Zdog Space Scene
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/jackrugile/pen/ZNVQbg](https://codepen.io/jackrugile/pen/ZNVQbg).
+
+ I'm having a lot of fun so far with Zdog. Nice work, Dave!
+
+https://zzz.dog/
\ No newline at end of file
diff --git a/zdog-space-scene/dist/f7248f1855b6b3ac41fc1799b.js b/zdog-space-scene/dist/f7248f1855b6b3ac41fc1799b.js
new file mode 100644
index 0000000..45f0814
--- /dev/null
+++ b/zdog-space-scene/dist/f7248f1855b6b3ac41fc1799b.js
@@ -0,0 +1,186 @@
+class Calc {
+
+  /*
+  ------------------------------------------
+  | rand:float - returns random float
+  |
+  | min:number - minimum value
+  | max:number - maximum value
+  | ease:function - easing function to apply to the random value
+  |
+  | Get a random float between two values,
+  | with the option of easing bias.
+  ------------------------------------------ */
+  static rand(min, max, ease) {
+    if(max === undefined) {
+      max = min;
+      min = 0;
+    }
+    let random = Math.random();
+    if(ease) {
+      random = ease(Math.random(), 0, 1, 1);
+    }
+    return random * (max - min) + min;
+  }
+
+  /*
+  ------------------------------------------
+  | randInt:integer - returns random integer
+  |
+  | min:number - minimum value
+  | max:number - maximum value
+  | ease:function - easing function to apply to the random value
+  |
+  | Get a random integer between two values,
+  | with the option of easing bias.
+  ------------------------------------------ */
+  static randInt(min, max, ease) {
+    if(max === undefined) {
+      max = min;
+      min = 0;
+    }
+    let random = Math.random();
+    if(ease) {
+      random = ease(Math.random(), 0, 1, 1);
+    }
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  /*
+  ------------------------------------------
+  | randArr:item - returns random iem from array
+  |
+  | arr:array - the array to randomly pull from
+  |
+  | Get a random item from an array.
+  ------------------------------------------ */
+  static randArr(arr) {
+    return arr[Math.floor(Math.random() * arr.length)];
+  }
+
+  /*
+  ------------------------------------------
+  | map:number - returns a mapped value
+  |
+  | val:number - input value
+  | inputMin:number - minimum of input range
+  | inputMax:number - maximum of input range
+  | outputMin:number - minimum of output range
+  | outputMax:number - maximum of output range
+  |
+  | Get a mapped value from and input min/max
+  | to an output min/max.
+  ------------------------------------------ */
+  static map(val, inputMin, inputMax, outputMin, outputMax) {
+    return ((outputMax - outputMin) * ((val - inputMin) / (inputMax - inputMin))) + outputMin;
+  }
+
+  /*
+  ------------------------------------------
+  | clamp:number - returns clamped value
+  |
+  | val:number - value to be clamped
+  | min:number - minimum of clamped range
+  | max:number - maximum of clamped range
+  |
+  | Clamp a value to a min/max range.
+  ------------------------------------------ */
+  static clamp(val, min, max) {
+    return Math.max(Math.min(val, max), min);
+  }
+
+  /*
+  ------------------------------------------
+  | roundToUpperInterval:number - returns rounded up value
+  |
+  | value:number - value to be rounded
+  | interval:number - interval
+  |
+  | Round up a value to the next highest interval.
+  ------------------------------------------ */
+  static roundToUpperInterval(value, interval) {
+    if(value % interval === 0) {
+      value += 0.0001;
+    }
+    return Math.ceil(value / interval) * interval;
+  }
+
+  /*
+  ------------------------------------------
+  | roundDownToInterval:number - returns rounded down value
+  |
+  | value:number - value to be rounded
+  | interval:number - interval
+  |
+  | Round down a value to the next lowest interval.
+  ------------------------------------------ */
+  static roundToLowerInterval(value, interval) {
+    if(value % interval === 0) {
+      value -= 0.0001;
+    }
+    return Math.floor(value / interval) * interval;
+  }
+
+  /*
+  ------------------------------------------
+  | roundToNearestInterval:number - returns rounded value
+  |
+  | value:number - value to be rounded
+  | interval:number - interval
+  |
+  | Round a value to the nearest interval.
+  ------------------------------------------ */
+  static roundToNearestInterval(value, interval) {
+    return Math.round(value / interval) * interval;
+  }
+
+  /*
+  ------------------------------------------
+  | intersectSphere:boolean - returns if intersecting or not
+  |
+  | a:object - sphere 1 with radius, x, y, and z
+  | b:object - sphere 2 with radius, x, y, and z
+  |
+  | Check if two sphere are intersecting
+  | in 3D space.
+  ------------------------------------------ */
+  static intersectSphere(a, b) {
+    let distance = Math.sqrt(
+      (a.x - b.x) * (a.x - b.x) +
+      (a.y - b.y) * (a.y - b.y) +
+      (a.z - b.z) * (a.z - b.z)
+    );
+    return distance < (a.radius + b.radius);
+  }
+
+  /*
+  ------------------------------------------
+  | getIndexFromCoords:number - returns index
+  |
+  | x:number - x value (column)
+  | y:number - y value (row)
+  | w:number - width of grid
+  |
+  | Convert from grid coords to index.
+  ------------------------------------------ */
+  static getIndexFromCoords(x, y, w) {
+    return x + (y * w);
+  }
+
+  /*
+  ------------------------------------------
+  | getCoordsFromIndex:object - returns coords
+  |
+  | i:number - index
+  | w:number - width of grid
+  |
+  | Convert from index to grid coords.
+  ------------------------------------------ */
+  static getCoordsFromIndex(i, w) {
+    return {
+      x: i % w,
+      y: Math.floor(i / w)
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/zdog-space-scene/dist/index.html b/zdog-space-scene/dist/index.html
new file mode 100644
index 0000000..d93bf18
--- /dev/null
+++ b/zdog-space-scene/dist/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Zdog Space Scene</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas width="400" height="300"></canvas>
+<!-- partial -->
+  <script src='https://unpkg.com/zdog@1/dist/zdog.dist.js'></script>
+<script src='js/f7248f1855b6b3ac41fc1799b.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/zdog-space-scene/dist/script.js b/zdog-space-scene/dist/script.js
new file mode 100644
index 0000000..9ef51bf
--- /dev/null
+++ b/zdog-space-scene/dist/script.js
@@ -0,0 +1,80 @@
+let canvas = document.querySelector('canvas');
+
+let illo;
+let ringGroup;
+let rings = [];
+let ringCount = 70;
+let ringDiameter = 350;
+let starGroup;
+let stars = [];
+let starCount = 100;
+let starRange = 200;
+
+illo = new Zdog.Illustration({
+  element: canvas,
+  dragRotate: true });
+
+
+ringGroup = new Zdog.Group({ addTo: illo });
+starGroup = new Zdog.Group({ addTo: illo });
+
+ringGroup.render = function (ctx) {
+  ctx.globalCompositeOperation = 'screen';
+  Zdog.Group.prototype.render.apply(this, arguments);
+};
+
+for (let i = 0; i < ringCount; i++) {
+  let p = i / (ringCount - 1);
+  rings.push({
+    shape: new Zdog.Ellipse({
+      addTo: ringGroup,
+      diameter: Math.sin(p * Zdog.TAU / 2) * ringDiameter / 2,
+      translate: { z: Math.cos(p * Zdog.TAU / 2) * ringDiameter / 4 },
+      rotate: { z: Calc.rand(Zdog.TAU) },
+      color: `hsla(${Calc.map(p, 0, 1, 180, 360)}, 90%, 50%, 1)`,
+      quarters: Calc.randInt(1, 3) }),
+
+    spin: Calc.rand(0.001, 0.03) });
+
+}
+
+for (let i = 0; i < starCount; i++) {
+  stars.push({
+    shape: new Zdog.Ellipse({
+      addTo: starGroup,
+      diameter: 0,
+      translate: {
+        x: Calc.rand(-starRange, starRange),
+        y: Calc.rand(-starRange, starRange),
+        z: Calc.rand(-starRange, starRange) },
+
+      stroke: Calc.rand(0.5, 2),
+      color: `hsla(0, 0%, 100%, ${Calc.rand(0.1, 1)})` }) });
+
+
+}
+
+function animate() {
+  ringGroup.rotate.y -= 0.003;
+  ringGroup.rotate.x += 0.003;
+
+  starGroup.rotate.y += 0.0005;
+  starGroup.rotate.x -= 0.0007;
+  starGroup.rotate.z -= 0.0009;
+
+  for (let i = 0, len = rings.length; i < len; i++) {
+    let ring = rings[i].shape;
+    ring.stroke = Calc.map(Math.sin(Date.now() * 0.005 + i * 0.2), -1, 1, 1, 3);
+    ring.rotate.z += rings[i].spin;
+  }
+
+  for (let i = 0, len = stars.length; i < len; i++) {
+    let star = stars[i].shape;
+    star.stroke = Calc.map(Math.sin(Date.now() * 0.002 + i * 0.4), -1, 1, 0.5, 2);
+  }
+
+  illo.updateRenderGraph();
+  window.requestAnimationFrame(animate);
+}
+
+animate();
\ No newline at end of file
diff --git a/zdog-space-scene/dist/style.css b/zdog-space-scene/dist/style.css
new file mode 100644
index 0000000..2378f50
--- /dev/null
+++ b/zdog-space-scene/dist/style.css
@@ -0,0 +1,25 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  align-items: center;
+  background-color: #000;
+  display: flex;
+  overflow: hidden;
+  justify-content: center;
+}
+
+canvas {
+  background-color: #000;
+  box-shadow: 0 0 0 3px #fff;
+  cursor: -webkit-grab;
+  cursor: grab;
+  display: block;
+}
+
+canvas:active {
+  cursor: -webkit-grabbing;
+  cursor: grabbing; 
+}
\ No newline at end of file
diff --git a/zdog-space-scene/license.txt b/zdog-space-scene/license.txt
new file mode 100644
index 0000000..f75dbd5
--- /dev/null
+++ b/zdog-space-scene/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Jack Rugile (https://codepen.io/jackrugile/pen/ZNVQbg)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/zdog-space-scene/src/f7248f1855b6b3ac41fc1799b.js b/zdog-space-scene/src/f7248f1855b6b3ac41fc1799b.js
new file mode 100644
index 0000000..45f0814
--- /dev/null
+++ b/zdog-space-scene/src/f7248f1855b6b3ac41fc1799b.js
@@ -0,0 +1,186 @@
+class Calc {
+
+  /*
+  ------------------------------------------
+  | rand:float - returns random float
+  |
+  | min:number - minimum value
+  | max:number - maximum value
+  | ease:function - easing function to apply to the random value
+  |
+  | Get a random float between two values,
+  | with the option of easing bias.
+  ------------------------------------------ */
+  static rand(min, max, ease) {
+    if(max === undefined) {
+      max = min;
+      min = 0;
+    }
+    let random = Math.random();
+    if(ease) {
+      random = ease(Math.random(), 0, 1, 1);
+    }
+    return random * (max - min) + min;
+  }
+
+  /*
+  ------------------------------------------
+  | randInt:integer - returns random integer
+  |
+  | min:number - minimum value
+  | max:number - maximum value
+  | ease:function - easing function to apply to the random value
+  |
+  | Get a random integer between two values,
+  | with the option of easing bias.
+  ------------------------------------------ */
+  static randInt(min, max, ease) {
+    if(max === undefined) {
+      max = min;
+      min = 0;
+    }
+    let random = Math.random();
+    if(ease) {
+      random = ease(Math.random(), 0, 1, 1);
+    }
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  /*
+  ------------------------------------------
+  | randArr:item - returns random iem from array
+  |
+  | arr:array - the array to randomly pull from
+  |
+  | Get a random item from an array.
+  ------------------------------------------ */
+  static randArr(arr) {
+    return arr[Math.floor(Math.random() * arr.length)];
+  }
+
+  /*
+  ------------------------------------------
+  | map:number - returns a mapped value
+  |
+  | val:number - input value
+  | inputMin:number - minimum of input range
+  | inputMax:number - maximum of input range
+  | outputMin:number - minimum of output range
+  | outputMax:number - maximum of output range
+  |
+  | Get a mapped value from and input min/max
+  | to an output min/max.
+  ------------------------------------------ */
+  static map(val, inputMin, inputMax, outputMin, outputMax) {
+    return ((outputMax - outputMin) * ((val - inputMin) / (inputMax - inputMin))) + outputMin;
+  }
+
+  /*
+  ------------------------------------------
+  | clamp:number - returns clamped value
+  |
+  | val:number - value to be clamped
+  | min:number - minimum of clamped range
+  | max:number - maximum of clamped range
+  |
+  | Clamp a value to a min/max range.
+  ------------------------------------------ */
+  static clamp(val, min, max) {
+    return Math.max(Math.min(val, max), min);
+  }
+
+  /*
+  ------------------------------------------
+  | roundToUpperInterval:number - returns rounded up value
+  |
+  | value:number - value to be rounded
+  | interval:number - interval
+  |
+  | Round up a value to the next highest interval.
+  ------------------------------------------ */
+  static roundToUpperInterval(value, interval) {
+    if(value % interval === 0) {
+      value += 0.0001;
+    }
+    return Math.ceil(value / interval) * interval;
+  }
+
+  /*
+  ------------------------------------------
+  | roundDownToInterval:number - returns rounded down value
+  |
+  | value:number - value to be rounded
+  | interval:number - interval
+  |
+  | Round down a value to the next lowest interval.
+  ------------------------------------------ */
+  static roundToLowerInterval(value, interval) {
+    if(value % interval === 0) {
+      value -= 0.0001;
+    }
+    return Math.floor(value / interval) * interval;
+  }
+
+  /*
+  ------------------------------------------
+  | roundToNearestInterval:number - returns rounded value
+  |
+  | value:number - value to be rounded
+  | interval:number - interval
+  |
+  | Round a value to the nearest interval.
+  ------------------------------------------ */
+  static roundToNearestInterval(value, interval) {
+    return Math.round(value / interval) * interval;
+  }
+
+  /*
+  ------------------------------------------
+  | intersectSphere:boolean - returns if intersecting or not
+  |
+  | a:object - sphere 1 with radius, x, y, and z
+  | b:object - sphere 2 with radius, x, y, and z
+  |
+  | Check if two sphere are intersecting
+  | in 3D space.
+  ------------------------------------------ */
+  static intersectSphere(a, b) {
+    let distance = Math.sqrt(
+      (a.x - b.x) * (a.x - b.x) +
+      (a.y - b.y) * (a.y - b.y) +
+      (a.z - b.z) * (a.z - b.z)
+    );
+    return distance < (a.radius + b.radius);
+  }
+
+  /*
+  ------------------------------------------
+  | getIndexFromCoords:number - returns index
+  |
+  | x:number - x value (column)
+  | y:number - y value (row)
+  | w:number - width of grid
+  |
+  | Convert from grid coords to index.
+  ------------------------------------------ */
+  static getIndexFromCoords(x, y, w) {
+    return x + (y * w);
+  }
+
+  /*
+  ------------------------------------------
+  | getCoordsFromIndex:object - returns coords
+  |
+  | i:number - index
+  | w:number - width of grid
+  |
+  | Convert from index to grid coords.
+  ------------------------------------------ */
+  static getCoordsFromIndex(i, w) {
+    return {
+      x: i % w,
+      y: Math.floor(i / w)
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/zdog-space-scene/src/index.html b/zdog-space-scene/src/index.html
new file mode 100644
index 0000000..dab5474
--- /dev/null
+++ b/zdog-space-scene/src/index.html
@@ -0,0 +1 @@
+<canvas width="400" height="300"></canvas>
\ No newline at end of file
diff --git a/zdog-space-scene/src/script.babel b/zdog-space-scene/src/script.babel
new file mode 100644
index 0000000..6dbf9a4
--- /dev/null
+++ b/zdog-space-scene/src/script.babel
@@ -0,0 +1,80 @@
+let canvas = document.querySelector('canvas');
+
+let illo;
+let ringGroup;
+let rings = [];
+let ringCount = 70;
+let ringDiameter = 350;
+let starGroup;
+let stars = [];
+let starCount = 100;
+let starRange = 200;
+
+illo = new Zdog.Illustration({
+  element: canvas,
+  dragRotate: true
+});
+
+ringGroup = new Zdog.Group({ addTo: illo });
+starGroup = new Zdog.Group({ addTo: illo });
+
+ringGroup.render = function(ctx) {
+  ctx.globalCompositeOperation = 'screen';
+  Zdog.Group.prototype.render.apply(this, arguments);
+};
+
+for(let i = 0; i < ringCount; i++) {
+  let p = i / (ringCount - 1);
+  rings.push({
+    shape: new Zdog.Ellipse({
+      addTo: ringGroup,
+      diameter: Math.sin(p * Zdog.TAU / 2) * ringDiameter / 2,
+      translate: { z: Math.cos(p * Zdog.TAU / 2) * ringDiameter / 4 },
+      rotate: { z: Calc.rand(Zdog.TAU) },
+      color: `hsla(${Calc.map(p, 0, 1, 180, 360)}, 90%, 50%, 1)`,
+      quarters: Calc.randInt(1, 3)
+    }),
+    spin: Calc.rand(0.001, 0.03)
+  });
+}
+
+for(let i = 0; i < starCount; i++) {
+  stars.push({
+    shape: new Zdog.Ellipse({
+      addTo: starGroup,
+      diameter: 0,
+      translate: {
+        x: Calc.rand(-starRange, starRange),
+        y: Calc.rand(-starRange, starRange),
+        z: Calc.rand(-starRange, starRange),
+      },
+      stroke: Calc.rand(0.5, 2),
+      color: `hsla(0, 0%, 100%, ${Calc.rand(0.1, 1)})`,
+    })
+  });
+}
+
+function animate() {
+  ringGroup.rotate.y -= 0.003;
+  ringGroup.rotate.x += 0.003;
+
+  starGroup.rotate.y += 0.0005;
+  starGroup.rotate.x -= 0.0007;
+  starGroup.rotate.z -= 0.0009;
+  
+  for(let i = 0, len = rings.length; i < len; i++) {
+    let ring = rings[i].shape;
+    ring.stroke = Calc.map(Math.sin(Date.now() * 0.005 + i * 0.2), -1, 1, 1, 3);
+    ring.rotate.z += rings[i].spin;
+  }
+  
+  for(let i = 0, len = stars.length; i < len; i++) {
+    let star = stars[i].shape;
+    star.stroke = Calc.map(Math.sin(Date.now() * 0.002 + i * 0.4), -1, 1, 0.5, 2);
+  }
+
+  illo.updateRenderGraph();
+  window.requestAnimationFrame(animate);
+}
+
+animate();
\ No newline at end of file
diff --git a/zdog-space-scene/src/style.css b/zdog-space-scene/src/style.css
new file mode 100644
index 0000000..666f1ea
--- /dev/null
+++ b/zdog-space-scene/src/style.css
@@ -0,0 +1,23 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  align-items: center;
+  background-color: #000;
+  display: flex;
+  overflow: hidden;
+  justify-content: center;
+}
+
+canvas {
+  background-color: #000;
+  box-shadow: 0 0 0 3px #fff;
+  cursor: grab;
+  display: block;
+}
+
+canvas:active {
+  cursor: grabbing; 
+}
\ No newline at end of file
diff --git a/zdog-trefoil/README.markdown b/zdog-trefoil/README.markdown
new file mode 100644
index 0000000..54a9728
--- /dev/null
+++ b/zdog-trefoil/README.markdown
@@ -0,0 +1,5 @@
+# Zdog trefoil
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/desandro/pen/XWNWPve](https://codepen.io/desandro/pen/XWNWPve).
+
+Made with [Zdog](https://zzz.dog)
diff --git a/zdog-trefoil/dist/index.html b/zdog-trefoil/dist/index.html
new file mode 100644
index 0000000..0349022
--- /dev/null
+++ b/zdog-trefoil/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Zdog trefoil</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas class="illo" width="500" height="500"></canvas>
+<!-- partial -->
+  <script src='https://unpkg.com/zdog@1/dist/zdog.dist.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/zdog-trefoil/dist/script.js b/zdog-trefoil/dist/script.js
new file mode 100644
index 0000000..5842101
--- /dev/null
+++ b/zdog-trefoil/dist/script.js
@@ -0,0 +1,65 @@
+// Made with Zdog
+
+// ----- variables ----- //
+
+const TAU = Zdog.TAU;
+const dotCount = 96;
+const loopCount = 3;
+const alpha = 0.7;
+const stroke = 10;
+let isSpinning = true;
+
+// ----- model ----- //
+
+let illo = new Zdog.Illustration({
+  element: '.illo',
+  zoom: 7,
+  dragRotate: true,
+  onDragStart: function() {
+    isSpinning = false;
+  },
+});
+
+function getFoilPoint( i ) {
+  let theta = i/dotCount * TAU;
+  let x1 = Math.cos( theta ) * ( 1 - alpha );
+  let y1 = Math.sin( theta ) * ( 1 - alpha );
+  let x2 = Math.sin( theta * ( loopCount - 1 ) ) * alpha;
+  let y2 = Math.cos( theta * ( loopCount - 1 ) ) * alpha;
+  let z = Math.cos( theta * loopCount );
+  let x = ( x1 + x2 ) * 20;
+  let y = ( y1 + y2 ) * 20;
+  z *= 7;
+  
+  return { x, y, z };
+}
+
+for ( let i=0; i < dotCount; i++ ) {
+  let point0 = getFoilPoint( i );
+  let point1 = getFoilPoint( i + 1 );
+  let hue = Math.round( Math.cos( i/dotCount * TAU ) * 60 ) + 330;
+  
+  new Zdog.Shape({
+    path: [ point0, point1 ],
+    addTo: illo,
+    stroke,
+    color: `hsl(${hue}, 80%, 50%)`,
+  });
+}
+
+ 
+
+// ----- animate ----- //
+let t = 0;
+
+function animate() {
+  if ( isSpinning ) {
+    t += 1/240;
+    illo.rotate.y = Zdog.easeInOut( t % 1 ) * TAU * 2;
+  }
+
+  illo.updateRenderGraph();
+  requestAnimationFrame( animate );
+}
+
+animate();
\ No newline at end of file
diff --git a/zdog-trefoil/dist/style.css b/zdog-trefoil/dist/style.css
new file mode 100644
index 0000000..453723a
--- /dev/null
+++ b/zdog-trefoil/dist/style.css
@@ -0,0 +1,15 @@
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  background: #111;
+}
+
+.illo {
+  cursor: move;
+}
\ No newline at end of file
diff --git a/zdog-trefoil/license.txt b/zdog-trefoil/license.txt
new file mode 100644
index 0000000..7f1d0f9
--- /dev/null
+++ b/zdog-trefoil/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2021 by Dave DeSandro (https://codepen.io/desandro/pen/XWNWPve)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/zdog-trefoil/src/index.html b/zdog-trefoil/src/index.html
new file mode 100644
index 0000000..0e06f07
--- /dev/null
+++ b/zdog-trefoil/src/index.html
@@ -0,0 +1 @@
+<canvas class="illo" width="500" height="500"></canvas>
\ No newline at end of file
diff --git a/zdog-trefoil/src/script.js b/zdog-trefoil/src/script.js
new file mode 100644
index 0000000..cc440ff
--- /dev/null
+++ b/zdog-trefoil/src/script.js
@@ -0,0 +1,65 @@
+// Made with Zdog
+
+// ----- variables ----- //
+
+const TAU = Zdog.TAU;
+const dotCount = 96;
+const loopCount = 3;
+const alpha = 0.7;
+const stroke = 10;
+let isSpinning = true;
+
+// ----- model ----- //
+
+let illo = new Zdog.Illustration({
+  element: '.illo',
+  zoom: 7,
+  dragRotate: true,
+  onDragStart: function() {
+    isSpinning = false;
+  },
+});
+
+function getFoilPoint( i ) {
+  let theta = i/dotCount * TAU;
+  let x1 = Math.cos( theta ) * ( 1 - alpha );
+  let y1 = Math.sin( theta ) * ( 1 - alpha );
+  let x2 = Math.sin( theta * ( loopCount - 1 ) ) * alpha;
+  let y2 = Math.cos( theta * ( loopCount - 1 ) ) * alpha;
+  let z = Math.cos( theta * loopCount );
+  let x = ( x1 + x2 ) * 20;
+  let y = ( y1 + y2 ) * 20;
+  z *= 7;
+  
+  return { x, y, z };
+}
+
+for ( let i=0; i < dotCount; i++ ) {
+  let point0 = getFoilPoint( i );
+  let point1 = getFoilPoint( i + 1 );
+  let hue = Math.round( Math.cos( i/dotCount * TAU ) * 60 ) + 330;
+  
+  new Zdog.Shape({
+    path: [ point0, point1 ],
+    addTo: illo,
+    stroke,
+    color: `hsl(${hue}, 80%, 50%)`,
+  });
+}
+
+ 
+
+// ----- animate ----- //
+let t = 0;
+
+function animate() {
+  if ( isSpinning ) {
+    t += 1/240;
+    illo.rotate.y = Zdog.easeInOut( t % 1 ) * TAU * 2;
+  }
+
+  illo.updateRenderGraph();
+  requestAnimationFrame( animate );
+}
+
+animate();
diff --git a/zdog-trefoil/src/style.css b/zdog-trefoil/src/style.css
new file mode 100644
index 0000000..453723a
--- /dev/null
+++ b/zdog-trefoil/src/style.css
@@ -0,0 +1,15 @@
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  background: #111;
+}
+
+.illo {
+  cursor: move;
+}
\ No newline at end of file
diff --git a/zdogcone-mace/README.markdown b/zdogcone-mace/README.markdown
new file mode 100644
index 0000000..48cab65
--- /dev/null
+++ b/zdogcone-mace/README.markdown
@@ -0,0 +1,8 @@
+# Zdog - Cone mace
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/desandro/pen/aGOqjy](https://codepen.io/desandro/pen/aGOqjy).
+
+ [Made with Zdog](https://zzz.dog)
+
+Rendered with &lt;canvas&gt; & mostly lineWidth. [Read about how I'm making these in the description here](https://codepen.io/desandro/details/RQeYYp/)
+
+[View more round 3D pens](https://codepen.io/desandro/pens/tags/?selected_tag=round3d)
\ No newline at end of file
diff --git a/zdogcone-mace/dist/index.html b/zdogcone-mace/dist/index.html
new file mode 100644
index 0000000..333bf53
--- /dev/null
+++ b/zdogcone-mace/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Zdog - Cone mace</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas class="illo"></canvas>
+<!-- partial -->
+  <script src='https://unpkg.com/zdog@1/dist/zdog.dist.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/zdogcone-mace/dist/script.js b/zdogcone-mace/dist/script.js
new file mode 100644
index 0000000..e32e72e
--- /dev/null
+++ b/zdogcone-mace/dist/script.js
@@ -0,0 +1,155 @@
+// Made with Zdog
+
+var illoElem = document.querySelector('.illo');
+var illoSize = 64;
+var minWindowSize = Math.min( window.innerWidth, window.innerHeight );
+var zoom = Math.floor( minWindowSize / illoSize );
+illoElem.setAttribute( 'width', illoSize * zoom );
+illoElem.setAttribute( 'height', illoSize * zoom );
+
+var isSpinning = true;
+var TAU = Zdog.TAU;
+
+var illo = new Zdog.Illustration({
+  element: illoElem,
+  zoom: zoom,
+  dragRotate: true,
+  onDragStart: function() {
+    isSpinning = false;
+  },
+});
+
+// colors
+var yellow = '#ED0';
+// var gold = '#EA0';
+var orange = '#E62';
+var magenta = '#C25';
+// var navy = '#249';
+var beige = '#FEC';
+var blue = '#8AD';
+
+
+var colorWheel = [ beige, magenta, orange, blue, yellow ];
+
+// ----- model ----- //
+
+// top & bottom
+var cone = new Zdog.Cone({
+  diameter: 8,
+  length: 10,
+  addTo: illo,
+  translate: { y: -16 },
+  // scale: { x: 2, y: 2 },
+  rotate: { x: -TAU/4 },
+  color: colorWheel[1],
+  backface: colorWheel[0],
+  stroke: false,
+});
+cone.copy({
+  translate: { y: 16 },
+  rotate: { x: TAU/4 },
+});
+
+
+
+[ -1, 1 ].forEach( function( ySide ) {
+  for ( var i=0; i < 5; i++ ) {
+    var rotor1 = new Zdog.Anchor({
+      addTo: illo,
+      rotate: { y: TAU/5 * i },
+    });
+    var rotor2 = new Zdog.Anchor({
+      addTo: rotor1,
+      rotate: { x: TAU/6 },
+    });
+
+    cone.copy({
+      addTo: rotor2,
+      translate: { y: 16*ySide },
+      rotate: { x: TAU/4*ySide },
+      color: colorWheel[i],
+      backface: colorWheel[ (i+7) % 5 ],
+    });
+  }
+});
+
+[ -1, 1 ].forEach( function( ySide ) {
+  for ( var i=0; i < 5; i++ ) {
+    var rotor1 = new Zdog.Anchor({
+      addTo: illo,
+      rotate: { y: TAU/5 * (i+0.5) },
+    });
+    var rotor2 = new Zdog.Anchor({
+      addTo: rotor1,
+      rotate: { x: TAU/10 },
+    });
+
+    cone.copy({
+      addTo: rotor2,
+      translate: { y: -16*ySide },
+      rotate: { x: TAU/4*ySide },
+      color: colorWheel[ (i+3) % 5 ],
+      backface: colorWheel[i],
+    });
+  }
+});
+
+[ -1, 1 ].forEach( function( ySide ) {
+  for ( var i=0; i < 5; i++ ) {
+    var rotor1 = new Zdog.Anchor({
+      addTo: illo,
+      rotate: { y: TAU/5 * (i+0.5) },
+    });
+    var rotor2 = new Zdog.Anchor({
+      addTo: rotor1,
+      rotate: { x: TAU/4.5 },
+    });
+
+    cone.copy({
+      addTo: rotor2,
+      translate: { y: -16*ySide },
+      // scale: { y: -1 },
+      rotate: { x: TAU/4*ySide },
+      color: colorWheel[ (i+1) % 5 ],
+      backface: colorWheel[ (i+4) % 5 ],
+    });
+  }
+});
+
+
+// -- animate --- //
+
+var keyframes = [
+  { x: TAU * 0,   y: TAU * 0 },
+  { x: TAU * 1/2, y: TAU * -1/2 },
+  { x: TAU * 1,   y: TAU * -1 },
+];
+
+var ticker = 0;
+var cycleCount = 180;
+
+function animate() {
+  spin();
+  illo.updateRenderGraph();
+  requestAnimationFrame( animate );
+}
+
+animate();
+
+// -- update -- //
+
+function spin() {
+  if ( !isSpinning ) {
+    return;
+  }
+  var progress = ticker / cycleCount;
+  var tween = Zdog.easeInOut( progress % 1, 3 );
+  var turnLimit = keyframes.length - 1;
+  var turn = Math.floor( progress % turnLimit );
+  var keyA = keyframes[ turn ];
+  var keyB = keyframes[ turn + 1 ];
+  var thetaX = Zdog.lerp( keyA.x, keyB.x, tween );
+  illo.rotate.x = Math.cos( thetaX ) * TAU/12;
+  illo.rotate.y = Zdog.lerp( keyA.y, keyB.y, tween ) ;
+  ticker++;
+}
\ No newline at end of file
diff --git a/zdogcone-mace/dist/style.css b/zdogcone-mace/dist/style.css
new file mode 100644
index 0000000..2da72f8
--- /dev/null
+++ b/zdogcone-mace/dist/style.css
@@ -0,0 +1,17 @@
+html { height: 100%; }
+
+body {
+  min-height: 100%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #246;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+.illo {
+  display: block;
+  cursor: move;
+}
diff --git a/zdogcone-mace/license.txt b/zdogcone-mace/license.txt
new file mode 100644
index 0000000..dca235e
--- /dev/null
+++ b/zdogcone-mace/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Dave DeSandro (https://codepen.io/desandro/pen/aGOqjy)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/zdogcone-mace/src/index.html b/zdogcone-mace/src/index.html
new file mode 100644
index 0000000..b0674fc
--- /dev/null
+++ b/zdogcone-mace/src/index.html
@@ -0,0 +1 @@
+<canvas class="illo"></canvas>
\ No newline at end of file
diff --git a/zdogcone-mace/src/script.js b/zdogcone-mace/src/script.js
new file mode 100644
index 0000000..74276d5
--- /dev/null
+++ b/zdogcone-mace/src/script.js
@@ -0,0 +1,155 @@
+// Made with Zdog
+
+var illoElem = document.querySelector('.illo');
+var illoSize = 64;
+var minWindowSize = Math.min( window.innerWidth, window.innerHeight );
+var zoom = Math.floor( minWindowSize / illoSize );
+illoElem.setAttribute( 'width', illoSize * zoom );
+illoElem.setAttribute( 'height', illoSize * zoom );
+
+var isSpinning = true;
+var TAU = Zdog.TAU;
+
+var illo = new Zdog.Illustration({
+  element: illoElem,
+  zoom: zoom,
+  dragRotate: true,
+  onDragStart: function() {
+    isSpinning = false;
+  },
+});
+
+// colors
+var yellow = '#ED0';
+// var gold = '#EA0';
+var orange = '#E62';
+var magenta = '#C25';
+// var navy = '#249';
+var beige = '#FEC';
+var blue = '#8AD';
+
+
+var colorWheel = [ beige, magenta, orange, blue, yellow ];
+
+// ----- model ----- //
+
+// top & bottom
+var cone = new Zdog.Cone({
+  diameter: 8,
+  length: 10,
+  addTo: illo,
+  translate: { y: -16 },
+  // scale: { x: 2, y: 2 },
+  rotate: { x: -TAU/4 },
+  color: colorWheel[1],
+  backface: colorWheel[0],
+  stroke: false,
+});
+cone.copy({
+  translate: { y: 16 },
+  rotate: { x: TAU/4 },
+});
+
+
+
+[ -1, 1 ].forEach( function( ySide ) {
+  for ( var i=0; i < 5; i++ ) {
+    var rotor1 = new Zdog.Anchor({
+      addTo: illo,
+      rotate: { y: TAU/5 * i },
+    });
+    var rotor2 = new Zdog.Anchor({
+      addTo: rotor1,
+      rotate: { x: TAU/6 },
+    });
+
+    cone.copy({
+      addTo: rotor2,
+      translate: { y: 16*ySide },
+      rotate: { x: TAU/4*ySide },
+      color: colorWheel[i],
+      backface: colorWheel[ (i+7) % 5 ],
+    });
+  }
+});
+
+[ -1, 1 ].forEach( function( ySide ) {
+  for ( var i=0; i < 5; i++ ) {
+    var rotor1 = new Zdog.Anchor({
+      addTo: illo,
+      rotate: { y: TAU/5 * (i+0.5) },
+    });
+    var rotor2 = new Zdog.Anchor({
+      addTo: rotor1,
+      rotate: { x: TAU/10 },
+    });
+
+    cone.copy({
+      addTo: rotor2,
+      translate: { y: -16*ySide },
+      rotate: { x: TAU/4*ySide },
+      color: colorWheel[ (i+3) % 5 ],
+      backface: colorWheel[i],
+    });
+  }
+});
+
+[ -1, 1 ].forEach( function( ySide ) {
+  for ( var i=0; i < 5; i++ ) {
+    var rotor1 = new Zdog.Anchor({
+      addTo: illo,
+      rotate: { y: TAU/5 * (i+0.5) },
+    });
+    var rotor2 = new Zdog.Anchor({
+      addTo: rotor1,
+      rotate: { x: TAU/4.5 },
+    });
+
+    cone.copy({
+      addTo: rotor2,
+      translate: { y: -16*ySide },
+      // scale: { y: -1 },
+      rotate: { x: TAU/4*ySide },
+      color: colorWheel[ (i+1) % 5 ],
+      backface: colorWheel[ (i+4) % 5 ],
+    });
+  }
+});
+
+
+// -- animate --- //
+
+var keyframes = [
+  { x: TAU * 0,   y: TAU * 0 },
+  { x: TAU * 1/2, y: TAU * -1/2 },
+  { x: TAU * 1,   y: TAU * -1 },
+];
+
+var ticker = 0;
+var cycleCount = 180;
+
+function animate() {
+  spin();
+  illo.updateRenderGraph();
+  requestAnimationFrame( animate );
+}
+
+animate();
+
+// -- update -- //
+
+function spin() {
+  if ( !isSpinning ) {
+    return;
+  }
+  var progress = ticker / cycleCount;
+  var tween = Zdog.easeInOut( progress % 1, 3 );
+  var turnLimit = keyframes.length - 1;
+  var turn = Math.floor( progress % turnLimit );
+  var keyA = keyframes[ turn ];
+  var keyB = keyframes[ turn + 1 ];
+  var thetaX = Zdog.lerp( keyA.x, keyB.x, tween );
+  illo.rotate.x = Math.cos( thetaX ) * TAU/12;
+  illo.rotate.y = Zdog.lerp( keyA.y, keyB.y, tween ) ;
+  ticker++;
+}
diff --git a/zdogcone-mace/src/style.css b/zdogcone-mace/src/style.css
new file mode 100644
index 0000000..2da72f8
--- /dev/null
+++ b/zdogcone-mace/src/style.css
@@ -0,0 +1,17 @@
+html { height: 100%; }
+
+body {
+  min-height: 100%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #246;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+.illo {
+  display: block;
+  cursor: move;
+}
diff --git a/zdoglittle-forest/README.markdown b/zdoglittle-forest/README.markdown
new file mode 100644
index 0000000..1e671e0
--- /dev/null
+++ b/zdoglittle-forest/README.markdown
@@ -0,0 +1,10 @@
+# Zdog - Little forest
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/desandro/pen/YebMXQ](https://codepen.io/desandro/pen/YebMXQ).
+
+ [Original design by Alex Pasquarella](https://dribbble.com/shots/4217116-Little-Forest). Remixed with Alex's permission. [Made with Zdog](https://zzz.dog)
+
+---
+
+Rendered with &lt;canvas&gt; & mostly lineWidth. [Read about how I'm making these in the description here](https://codepen.io/desandro/details/RQeYYp/)
+
+[View more round 3D pens](https://codepen.io/desandro/pens/tags/?selected_tag=round3d)
\ No newline at end of file
diff --git a/zdoglittle-forest/dist/index.html b/zdoglittle-forest/dist/index.html
new file mode 100644
index 0000000..b96db9b
--- /dev/null
+++ b/zdoglittle-forest/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Zdog - Little forest</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="container">
+  <canvas class="illo"></canvas>
+  <p><a href="https://dribbble.com/shots/4217116-Little-Forest">Original design by Alex Pasquarella</a></p>
+  <p><button class="reset-button">Reset</button></p>
+</div>
+<!-- partial -->
+  <script src='https://unpkg.com/zdog@1/dist/zdog.dist.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/zdoglittle-forest/dist/script.js b/zdoglittle-forest/dist/script.js
new file mode 100644
index 0000000..b677996
--- /dev/null
+++ b/zdoglittle-forest/dist/script.js
@@ -0,0 +1,776 @@
+// Made with Zdog
+
+var illoElem = document.querySelector('.illo');
+var illoSize = 360;
+var minWindowSize = Math.min( window.innerWidth - 20, window.innerHeight - 60 );
+var zoom = Math.min( 3, Math.floor( minWindowSize / (illoSize/4) ) / 4 );
+illoElem.setAttribute( 'width', illoSize * zoom );
+illoElem.setAttribute( 'height', illoSize * zoom );
+
+var isSpinning = true;
+var TAU = Zdog.TAU;
+
+var illo = new Zdog.Illustration({
+  element: illoElem,
+  zoom: zoom,
+  dragRotate: true,
+  onDragStart: function() {
+    isSpinning = false;
+  },
+});
+
+// colors
+var midnight = '#313';
+var eggplant = '#525';
+var magenta = '#936';
+var amber = '#D65';
+var gold = '#FA6';
+var white = '#FFF';
+
+var layerSpace = 56;
+
+// -- illustration shapes --- //
+
+// background
+var background = new Zdog.Shape({
+  translate: { z: layerSpace*-2 },
+  visible: false,
+  addTo: illo,
+});
+
+var bgGroup1 = new Zdog.Group({
+  addTo: background,
+  translate: { z: -24 },
+});
+
+var bgStripe = new Zdog.Rect({
+  width: 180,
+  height: 44,
+  addTo: bgGroup1,
+  translate: { y: -40 },
+  color: magenta,
+  stroke: 12,
+  fill: true,
+});
+// magenta circle
+var bgCircle = new Zdog.Ellipse({
+  diameter: 96,
+  addTo: bgGroup1,
+  translate: { y: -16 },
+  color: magenta,
+  stroke: 24,
+  fill: true,
+});
+
+var bgGroup2 = new Zdog.Group({
+  addTo: background,
+});
+
+// amber stripe
+bgStripe.copy({
+  addTo: bgGroup2,
+  translate: { y: -8 },
+  color: amber,
+});
+// amber circle
+bgCircle.copy({
+  addTo: bgGroup2,
+  diameter: 64,
+  translate: { y: -16, },
+  color: amber,
+});
+
+var bgGroup3 = new Zdog.Group({
+  addTo: background,
+  translate: { z: 24 },
+});
+
+// gold bg stripe
+bgStripe.copy({
+  addTo: bgGroup3,
+  height: 60,
+  translate: { y: 32 },
+  color: gold,
+});
+// gold circle
+bgCircle.copy({
+  addTo: bgGroup3,
+  width: 32,
+  height: 32,
+  translate: { y: -16 },
+  color: gold,
+});
+
+// sun
+new Zdog.Shape({
+  addTo: background,
+  translate: { y: -16, z: 48 },
+  stroke: 24,
+  color: white,
+});
+
+// ----- midBackground ----- //
+
+var midBackground = new Zdog.Group({
+  addTo: illo,
+  translate: { z: layerSpace*-1 },
+});
+
+var midBGDot = new Zdog.Shape({
+  addTo: midBackground,
+  translate: { x: -36, y: 18 },
+  stroke: 24,
+  color: amber,
+});
+midBGDot.copy({
+  translate: { x: -24, y: 24 },
+});
+midBGDot.copy({
+  translate: { x: -6, y: 26 },
+});
+midBGDot.copy({
+  translate: { x: 12, y: 16 },
+});
+midBGDot.copy({
+  translate: { x: 28, y: 12 },
+});
+midBGDot.copy({
+  translate: { x: 48, y: 20 },
+});
+
+var midBGBigDot = midBGDot.copy({
+  stroke: 48,
+  translate: { x: -52, y: 40 },
+});
+midBGBigDot.copy({
+  translate: { x: 20, y: 40 },
+});
+midBGBigDot.copy({
+  stroke: 40,
+  translate: { x: 56, y: 40 },
+});
+midBGBigDot.copy({
+  stroke: 40,
+  translate: { x: -16, y: 48 },
+});
+
+// ----- midground ----- //
+
+var midground = new Zdog.Anchor({
+  addTo: illo,
+});
+
+var midgroundGroundA = new Zdog.Shape({
+  path: [
+    { x: -96, y: 10 },
+    { x: -86, y: 10 },
+    { arc: [
+      { x: -60, y: 42 },
+      { x: -26, y: 42 },
+    ]},
+    { x: -26, y: 74 },
+    { x: -96, y: 74 },
+  ],
+  addTo: midground,
+  color: magenta,
+  stroke: 48,
+  fill: true,
+});
+midgroundGroundA.copy({
+  path: [
+    { x: -26, y: 42 },
+    { arc: [
+      { x: -8, y: 74 },
+      { x: 36, y: 74 },
+    ]},
+    { x: 96, y: 74 },
+    { x: -26, y: 74 },
+  ],
+});
+
+function tree( groupOptions, options ) {
+  options = Zdog.extend( options, groupOptions );
+  var treeW = options.width/2;
+  var treeH = options.height/2;
+
+  var pointA = { x: 0, y: -treeH };
+  var pointB = { x: treeW, y: treeH };
+  var pointC = { x: -treeW, y: treeH };
+
+  var treeOptions = Zdog.extend({
+    path: [
+      pointA,
+      { bezier: [
+        pointA,
+        { x: treeW, y: treeH*1/3 },
+        pointB,
+      ]},
+      pointC,
+      { bezier: [
+        { x: -treeW, y: treeH*1/3 },
+        pointA,
+        pointA,
+      ]},
+    ],
+    fill: true,
+  }, options );
+
+  var treePlane = new Zdog.Shape( treeOptions );
+  treePlane.copy({
+    rotate: { y: TAU/4 },
+  });
+
+}
+
+var midgroundTree = {
+  addTo: midground,
+  color: magenta,
+  stroke: 2,
+};
+
+tree( midgroundTree, {
+  width: 10,
+  height: 24,
+  translate: { x: -86, y: -14, z: -8 },
+});
+
+tree( midgroundTree, {
+  width: 16,
+  height: 36,
+  translate: { x: -70, y: -12, z: 14 },
+});
+
+tree( midgroundTree, {
+  width: 10,
+  height: 24,
+  translate: { x: -60, y: -4 },
+});
+
+tree( midgroundTree, {
+  width: 10,
+  height: 24,
+  translate: { x: -26, y: 12, z: -8 },
+});
+
+tree( midgroundTree, {
+  width: 10,
+  height: 24,
+  translate: { x: -18, y: 18, z: 2 },
+});
+
+var lonelyTranslate = { x: 32, y: 24 };
+
+tree( midgroundTree, {
+  width: 16,
+  height: 36,
+  translate: lonelyTranslate,
+});
+// lonely tree stump
+new Zdog.Shape({
+  path: [
+    { y: 18 },
+    { y: 28 },
+  ],
+  addTo: midground,
+  translate: lonelyTranslate,
+  color: magenta,
+  stroke: 4,
+});
+
+
+tree( midgroundTree, {
+  width: 10,
+  height: 24,
+  translate: { x: 64, y: 40, z: 6 },
+});
+tree( midgroundTree, {
+  width: 10,
+  height: 24,
+  translate: { x: 72, y: 44, z: -2 },
+});
+
+// ----- midForeground ----- //
+
+var midForeground = new Zdog.Anchor({
+  addTo: illo,
+  translate: { z: layerSpace },
+});
+
+// midForeground ground part A
+var midForegroundGround = new Zdog.Shape({
+  path: [
+    { x: 96, y: 26 },
+    { x: 72, y: 26 },
+    { arc: [
+      { x: 56, y: 50 },
+      { x: 18, y: 50 },
+    ]},
+    { x: 18, y: 90 },
+    { x: 96, y: 90 },
+  ],
+  addTo: midForeground,
+  color: eggplant,
+  stroke: 48,
+  fill: true,
+});
+midForegroundGround.copy({
+  path: [
+    { x: 18, y: 50 },
+    { arc: [
+      { x: -16, y: 90 },
+      { x: -48, y: 72 },
+    ]},
+    { x: -64, y: 56 },
+    { x: -96, y: 48 },
+    { x: -96, y: 90 },
+    { x: 18, y: 90 },
+  ],
+});
+
+var midForeBall = new Zdog.Shape({
+  addTo: midForeground,
+  translate: { x: -92, y: 18 },
+  stroke: 20,
+  color: eggplant,
+});
+midForeBall.copy({
+  translate: { x: -104, y: 28 },
+});
+midForeBall.copy({
+  translate: { x: -84, y: 28 },
+  stroke: 24,
+});
+midForeBall.copy({
+  translate: { x: -74, y: 20 },
+});
+midForeBall.copy({
+  translate: { x: -60, y: 28 },
+});
+midForeBall.copy({
+  translate: { x: -50, y: 36 },
+});
+midForeBall.copy({
+  translate: { x: -44, y: 46 },
+});
+
+var midForeTree = {
+  addTo: midForeground,
+  color: eggplant,
+  stroke: 2,
+};
+
+tree( midForeTree, {
+  width: 10,
+  height: 24,
+  translate: { x: -12, y: 42 },
+});
+tree( midForeTree, {
+  width: 10,
+  height: 24,
+  translate: { x: 10, y: 22, z: 2 },
+});
+tree( midForeTree, {
+  width: 16,
+  height: 36,
+  translate: { x: 22, y: 18, z: -6 },
+});
+
+tree( midForeTree, {
+  width: 16,
+  height: 36,
+  translate: { x: 76, y: -6, z: 12 },
+});
+tree( midForeTree, {
+  width: 10,
+  height: 24,
+  translate: { x: 86, y: -4, z: -10 },
+});
+
+// ----- foregroundA ----- //
+
+var foregroundA = new Zdog.Shape({
+  path: [
+    { x: -96, y: 52 },
+    { x: -84, y: 52 },
+    { arc: [
+      { x: -72, y: 72 },
+      { x: -44, y: 72 },
+    ]},
+    { arc: [
+      { x: -32, y: 90 },
+      { x: 0, y: 90 },
+    ]},
+    { x: -96, y: 90 },
+  ],
+  addTo: illo,
+  translate: { z: layerSpace*2 },
+  color: midnight,
+  stroke: 48,
+  fill: true,
+});
+
+var foregroundTree = {
+  color: midnight,
+  stroke: 2,
+};
+
+tree( foregroundTree, {
+  addTo: foregroundA,
+  width: 18,
+  height: 44,
+  translate: { x: -80, y: 18 },
+});
+
+var foreTree1Translate = { x: -44, y: 14 };
+tree( foregroundTree, {
+  addTo: foregroundA,
+  width: 18,
+  height: 44,
+  translate: { x: -44, y: 14 },
+});
+// trunk
+new Zdog.Shape({
+  path: [
+    { y: 22 },
+    { y: 38 },
+  ],
+  addTo: foregroundA,
+  translate: foreTree1Translate,
+  stroke: 6,
+  color: midnight,
+});
+
+tree( foregroundTree, {
+  addTo: foregroundA,
+  width: 16,
+  height: 36,
+  translate: { x: -2, y: 64 },
+});
+
+var grassBlade = new Zdog.Shape({
+  path: [
+    // semi-circle outside on left
+    { x: 0, y: 1 },
+    { arc: [
+      { x: -1, y: 1 },
+      { x: -1, y: 0 },
+    ]},
+    { arc: [
+      { x: -1, y: -1 },
+      { x:  0, y: -1 },
+    ]},
+    // shallow semi-circle back
+    { arc: [
+      { x: -0.5, y: -0.7 },
+      { x: -0.5, y: 0 },
+    ]},
+    { arc: [
+      { x: -0.5, y: 0.7 },
+      { x: 0, y: 1 },
+    ]},
+  ],
+  addTo: foregroundA,
+  translate: { x: -20, y: 56 },
+  scale: 8,
+  rotate: { z: 0.6 },
+  color: midnight,
+  stroke: 1,
+  fill: true,
+  closed: false,
+});
+grassBlade.copy({
+  translate: { x: -33, y: 50 },
+  rotate: { z: TAU/2 + 0.2 },
+});
+
+grassBlade.copy({
+  translate: { x: -62, y: 40 },
+  rotate: { z: 0.8 },
+  scale: 7,
+});
+
+grassBlade.copy({
+  translate: { x: -64, y: 35 },
+  rotate: { z: 0.4 },
+  scale: 7,
+});
+
+// ----- foregroundB ----- //
+
+var foregroundB = new Zdog.Shape({
+  path: [
+    { x: 96, y: 52 },
+    { arc: [
+      { x: 80, y: 72 },
+      { x: 56, y: 72 },
+    ]},
+    { arc: [
+      { x: 40, y: 90 },
+      { x: 8, y: 90 },
+    ]},
+    { x: 0, y: 90 },
+    { x: 96, y: 90 },
+  ],
+  addTo: illo,
+  translate: { z: layerSpace*2 },
+  color: midnight,
+  stroke: 48,
+  fill: true,
+});
+
+tree( foregroundTree, {
+  addTo: foregroundB,
+  width: 16,
+  height: 36,
+  translate: { x: 10, y: 54 },
+});
+
+// big tree
+var bigTreeTranslate = { x: 58, y: 2 };
+tree( foregroundTree, {
+  addTo: foregroundB,
+  width: 20,
+  height: 64,
+  translate: bigTreeTranslate,
+});
+// big tree trunk
+new Zdog.Shape({
+  path: [
+    { y: 32 },
+    { y: 48 },
+  ],
+  addTo: foregroundB,
+  translate: bigTreeTranslate,
+  stroke: 6,
+  color: midnight,
+});
+
+tree( foregroundTree, {
+  addTo: foregroundB,
+  width: 16,
+  height: 36,
+  translate: { x: 86, y: 26 },
+});
+
+grassBlade.copy({
+  addTo: foregroundB,
+  scale: 12,
+  translate: { x: 46, y: 54 },
+  rotate: { z: 0 },
+});
+grassBlade.copy({
+  addTo: foregroundB,
+  scale: 10,
+  translate: { x: 28, y: 58 },
+  rotate: { z: TAU/2 - 0.4 },
+});
+
+// ----- particles ----- //
+
+var particle = new Zdog.Shape({
+  addTo: illo,
+  translate: { x: -70, y: -50, z: layerSpace*-0.25 },
+  stroke: 4,
+  color: gold,
+});
+particle.copy({
+  translate: { x: 68, y: -28, z: layerSpace*0.5 },
+});
+particle.copy({
+  translate: { x: -70, y: 2, z: layerSpace*0.75 },
+  color: amber,
+});
+particle.copy({
+  translate: { x: 74, y: 14, z: layerSpace*1.5 },
+});
+particle.copy({
+  translate: { x: -24, y: 34, z: layerSpace*1.75 },
+});
+particle.copy({
+  translate: { x: 34, y: 34, z: layerSpace*1.9 },
+  color: amber,
+});
+particle.copy({
+  translate: { x: 22, y: 40, z: layerSpace*2.2 },
+});
+
+// ----- clouds ----- //
+
+var twoCloud = new Zdog.Shape({
+  path: [
+    { x: -20, y: 0 },
+    { bezier: [
+      { x: -13, y: 0 },
+      { x: -12, y: -4 },
+      { x: -10, y: -4 },
+    ]},
+    { bezier: [
+      { x: -8, y: -4 },
+      { x: -8, y: -2 },
+      { x: -4, y: -2 },
+    ]},
+    { bezier: [
+      { x: 0, y: -2 },
+      { x: 1, y: -6 },
+      { x: 4, y: -6 },
+    ]},
+    { bezier: [
+      { x: 7, y: -6 },
+      { x: 6, y: 0 },
+      { x: 20, y: 0 },
+    ]},
+  ],
+  addTo: illo,
+  translate: { x: -84, y: -38, z: layerSpace*-1 },
+  rotate: { y: -TAU*1/16 },
+  scale: { x: 1/Math.cos(TAU*1/16) },
+  stroke: 4,
+  color: white,
+  fill: true,
+});
+
+twoCloud.copy({
+  translate: { x: -38, y: -22, z: layerSpace*-0.5 },
+  rotate: { y: -TAU*1/8 },
+  scale: { x: 1/Math.cos(TAU*1/8) * -1 },
+});
+
+// triple cloud
+new Zdog.Shape({
+  path: [
+    { x: -32, y: 0 },
+    { x: -28, y: 0 },
+    { bezier: [
+      { x: -22, y: 0 },
+      { x: -20, y: -6 },
+      { x: -16, y: -6 },
+    ]},
+    { bezier: [
+      { x: -12, y: -6 },
+      { x: -12, y: -2 },
+      { x: -8, y: -2 },
+    ]},
+    { bezier: [
+      { x: -4, y: -2 },
+      { x: -4, y: -6 },
+      { x: 0, y: -6 },
+    ]},
+    { bezier: [
+      { x: 4, y: -6 },
+      { x: 4, y: -2 },
+      { x: 8, y: -2 },
+    ]},
+    { bezier: [
+      { x: 12, y: -2 },
+      { x: 12, y: -6 },
+      { x: 16, y: -6 },
+    ]},
+    { bezier: [
+      { x: 20, y: -6 },
+      { x: 22, y: 0 },
+      { x: 28, y: 0 },
+    ]},
+    { x: 32, y: 0 },
+  ],
+  addTo: illo,
+  translate: { x: 72, y: -52, z: layerSpace*-1 },
+  rotate: { y: TAU * 1/16 },
+  scale: { x: 1/Math.cos(TAU * -1/16) },
+  stroke: 4,
+  color: white,
+  fill: true,
+});
+
+// ----- stars ----- //
+
+var starA = new Zdog.Shape({
+  path: [
+    { x: 0, y: -4 },
+    { arc: [
+      { x: 0, y: 0 },
+      { x: 4, y: 0 },
+    ]},
+    { arc: [
+      { x: 0, y: 0 },
+      { x: 0, y: 4 },
+    ]},
+    { arc: [
+      { x: 0, y: 0 },
+      { x: -4, y: 0 },
+    ]},
+    { arc: [
+      { x: 0, y: 0 },
+      { x: 0, y: -4 },
+    ]},
+  ],
+  addTo: illo,
+  translate: { x: -50, y: -50, z: layerSpace*-1.5 },
+  color: gold,
+  stroke: 2,
+  fill: true,
+});
+starA.copy({
+  rotate: { y: TAU/4 },
+});
+
+var starB = starA.copy({
+  translate: { x: 42, y: -20, z: -layerSpace*0.5 },
+});
+starB.copy({
+  rotate: { y: TAU/4 },
+});
+
+// ----- bird ----- //
+
+new Zdog.Shape({
+  path: [
+    { x: -6, y: -4 },
+    { x: -4, y: -4 },
+    { arc: [
+      { x: 0, y: -4 },
+      { x: 0, y: 0 },
+    ]},
+    { arc: [
+      { x: 0, y: -4 },
+      { x: 4, y: -4 },
+    ]},
+    { x: 6, y: -4 },
+    { move: { z: -2, y: 0 } },
+    { z: 3, y: 0 },
+  ],
+  addTo: illo,
+  translate: { x: 18, y: -30, z: layerSpace*-1 },
+  stroke: 3,
+  color: midnight,
+  closed: false,
+});
+
+
+// -- animate --- //
+
+var t = 0;
+var tSpeed = 1/240;
+
+function animate() {
+  // update
+  if ( isSpinning ) {
+    t += tSpeed;
+    var theta = Zdog.easeInOut( t % 1 ) * TAU;
+    var delta = TAU * -3/64;
+    illo.rotate.y = Math.sin( theta ) * delta;
+    illo.rotate.x = ( Math.cos( theta ) * -0.5 + 0.5 ) * delta;
+  }
+
+  illo.updateRenderGraph();
+  requestAnimationFrame( animate );
+}
+
+animate();
+
+
+// ----- inputs ----- //
+
+document.querySelector('.reset-button').onclick = function() {
+  isSpinning = false;
+  illo.rotate.set({});
+};
\ No newline at end of file
diff --git a/zdoglittle-forest/dist/style.css b/zdoglittle-forest/dist/style.css
new file mode 100644
index 0000000..15ee62d
--- /dev/null
+++ b/zdoglittle-forest/dist/style.css
@@ -0,0 +1,38 @@
+html { height: 100%; }
+
+body {
+  min-height: 100%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #313;
+  color: white;
+  font-family: sans-serif;
+  font-size: 14px;
+  text-align: center;
+  cursor: move;
+}
+
+canvas {
+  display: block;
+  margin: 0px auto 20px;
+}
+
+a { color: #936; }
+a:hover { color: #D65; }
+
+button {
+  background: #525;
+  color: white;
+  font-size: 14px;
+  font-family: inherit;
+  border: none;
+  border-radius: 3px;
+  padding: 8px 10px;
+}
+
+button:hover {
+  background: #936;
+  cursor: pointer;
+}
diff --git a/zdoglittle-forest/license.txt b/zdoglittle-forest/license.txt
new file mode 100644
index 0000000..7ee3196
--- /dev/null
+++ b/zdoglittle-forest/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Dave DeSandro (https://codepen.io/desandro/pen/YebMXQ)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/zdoglittle-forest/src/index.html b/zdoglittle-forest/src/index.html
new file mode 100644
index 0000000..626c918
--- /dev/null
+++ b/zdoglittle-forest/src/index.html
@@ -0,0 +1,5 @@
+<div class="container">
+  <canvas class="illo"></canvas>
+  <p><a href="https://dribbble.com/shots/4217116-Little-Forest">Original design by Alex Pasquarella</a></p>
+  <p><button class="reset-button">Reset</button></p>
+</div>
\ No newline at end of file
diff --git a/zdoglittle-forest/src/script.js b/zdoglittle-forest/src/script.js
new file mode 100644
index 0000000..4253d58
--- /dev/null
+++ b/zdoglittle-forest/src/script.js
@@ -0,0 +1,776 @@
+// Made with Zdog
+
+var illoElem = document.querySelector('.illo');
+var illoSize = 360;
+var minWindowSize = Math.min( window.innerWidth - 20, window.innerHeight - 60 );
+var zoom = Math.min( 3, Math.floor( minWindowSize / (illoSize/4) ) / 4 );
+illoElem.setAttribute( 'width', illoSize * zoom );
+illoElem.setAttribute( 'height', illoSize * zoom );
+
+var isSpinning = true;
+var TAU = Zdog.TAU;
+
+var illo = new Zdog.Illustration({
+  element: illoElem,
+  zoom: zoom,
+  dragRotate: true,
+  onDragStart: function() {
+    isSpinning = false;
+  },
+});
+
+// colors
+var midnight = '#313';
+var eggplant = '#525';
+var magenta = '#936';
+var amber = '#D65';
+var gold = '#FA6';
+var white = '#FFF';
+
+var layerSpace = 56;
+
+// -- illustration shapes --- //
+
+// background
+var background = new Zdog.Shape({
+  translate: { z: layerSpace*-2 },
+  visible: false,
+  addTo: illo,
+});
+
+var bgGroup1 = new Zdog.Group({
+  addTo: background,
+  translate: { z: -24 },
+});
+
+var bgStripe = new Zdog.Rect({
+  width: 180,
+  height: 44,
+  addTo: bgGroup1,
+  translate: { y: -40 },
+  color: magenta,
+  stroke: 12,
+  fill: true,
+});
+// magenta circle
+var bgCircle = new Zdog.Ellipse({
+  diameter: 96,
+  addTo: bgGroup1,
+  translate: { y: -16 },
+  color: magenta,
+  stroke: 24,
+  fill: true,
+});
+
+var bgGroup2 = new Zdog.Group({
+  addTo: background,
+});
+
+// amber stripe
+bgStripe.copy({
+  addTo: bgGroup2,
+  translate: { y: -8 },
+  color: amber,
+});
+// amber circle
+bgCircle.copy({
+  addTo: bgGroup2,
+  diameter: 64,
+  translate: { y: -16, },
+  color: amber,
+});
+
+var bgGroup3 = new Zdog.Group({
+  addTo: background,
+  translate: { z: 24 },
+});
+
+// gold bg stripe
+bgStripe.copy({
+  addTo: bgGroup3,
+  height: 60,
+  translate: { y: 32 },
+  color: gold,
+});
+// gold circle
+bgCircle.copy({
+  addTo: bgGroup3,
+  width: 32,
+  height: 32,
+  translate: { y: -16 },
+  color: gold,
+});
+
+// sun
+new Zdog.Shape({
+  addTo: background,
+  translate: { y: -16, z: 48 },
+  stroke: 24,
+  color: white,
+});
+
+// ----- midBackground ----- //
+
+var midBackground = new Zdog.Group({
+  addTo: illo,
+  translate: { z: layerSpace*-1 },
+});
+
+var midBGDot = new Zdog.Shape({
+  addTo: midBackground,
+  translate: { x: -36, y: 18 },
+  stroke: 24,
+  color: amber,
+});
+midBGDot.copy({
+  translate: { x: -24, y: 24 },
+});
+midBGDot.copy({
+  translate: { x: -6, y: 26 },
+});
+midBGDot.copy({
+  translate: { x: 12, y: 16 },
+});
+midBGDot.copy({
+  translate: { x: 28, y: 12 },
+});
+midBGDot.copy({
+  translate: { x: 48, y: 20 },
+});
+
+var midBGBigDot = midBGDot.copy({
+  stroke: 48,
+  translate: { x: -52, y: 40 },
+});
+midBGBigDot.copy({
+  translate: { x: 20, y: 40 },
+});
+midBGBigDot.copy({
+  stroke: 40,
+  translate: { x: 56, y: 40 },
+});
+midBGBigDot.copy({
+  stroke: 40,
+  translate: { x: -16, y: 48 },
+});
+
+// ----- midground ----- //
+
+var midground = new Zdog.Anchor({
+  addTo: illo,
+});
+
+var midgroundGroundA = new Zdog.Shape({
+  path: [
+    { x: -96, y: 10 },
+    { x: -86, y: 10 },
+    { arc: [
+      { x: -60, y: 42 },
+      { x: -26, y: 42 },
+    ]},
+    { x: -26, y: 74 },
+    { x: -96, y: 74 },
+  ],
+  addTo: midground,
+  color: magenta,
+  stroke: 48,
+  fill: true,
+});
+midgroundGroundA.copy({
+  path: [
+    { x: -26, y: 42 },
+    { arc: [
+      { x: -8, y: 74 },
+      { x: 36, y: 74 },
+    ]},
+    { x: 96, y: 74 },
+    { x: -26, y: 74 },
+  ],
+});
+
+function tree( groupOptions, options ) {
+  options = Zdog.extend( options, groupOptions );
+  var treeW = options.width/2;
+  var treeH = options.height/2;
+
+  var pointA = { x: 0, y: -treeH };
+  var pointB = { x: treeW, y: treeH };
+  var pointC = { x: -treeW, y: treeH };
+
+  var treeOptions = Zdog.extend({
+    path: [
+      pointA,
+      { bezier: [
+        pointA,
+        { x: treeW, y: treeH*1/3 },
+        pointB,
+      ]},
+      pointC,
+      { bezier: [
+        { x: -treeW, y: treeH*1/3 },
+        pointA,
+        pointA,
+      ]},
+    ],
+    fill: true,
+  }, options );
+
+  var treePlane = new Zdog.Shape( treeOptions );
+  treePlane.copy({
+    rotate: { y: TAU/4 },
+  });
+
+}
+
+var midgroundTree = {
+  addTo: midground,
+  color: magenta,
+  stroke: 2,
+};
+
+tree( midgroundTree, {
+  width: 10,
+  height: 24,
+  translate: { x: -86, y: -14, z: -8 },
+});
+
+tree( midgroundTree, {
+  width: 16,
+  height: 36,
+  translate: { x: -70, y: -12, z: 14 },
+});
+
+tree( midgroundTree, {
+  width: 10,
+  height: 24,
+  translate: { x: -60, y: -4 },
+});
+
+tree( midgroundTree, {
+  width: 10,
+  height: 24,
+  translate: { x: -26, y: 12, z: -8 },
+});
+
+tree( midgroundTree, {
+  width: 10,
+  height: 24,
+  translate: { x: -18, y: 18, z: 2 },
+});
+
+var lonelyTranslate = { x: 32, y: 24 };
+
+tree( midgroundTree, {
+  width: 16,
+  height: 36,
+  translate: lonelyTranslate,
+});
+// lonely tree stump
+new Zdog.Shape({
+  path: [
+    { y: 18 },
+    { y: 28 },
+  ],
+  addTo: midground,
+  translate: lonelyTranslate,
+  color: magenta,
+  stroke: 4,
+});
+
+
+tree( midgroundTree, {
+  width: 10,
+  height: 24,
+  translate: { x: 64, y: 40, z: 6 },
+});
+tree( midgroundTree, {
+  width: 10,
+  height: 24,
+  translate: { x: 72, y: 44, z: -2 },
+});
+
+// ----- midForeground ----- //
+
+var midForeground = new Zdog.Anchor({
+  addTo: illo,
+  translate: { z: layerSpace },
+});
+
+// midForeground ground part A
+var midForegroundGround = new Zdog.Shape({
+  path: [
+    { x: 96, y: 26 },
+    { x: 72, y: 26 },
+    { arc: [
+      { x: 56, y: 50 },
+      { x: 18, y: 50 },
+    ]},
+    { x: 18, y: 90 },
+    { x: 96, y: 90 },
+  ],
+  addTo: midForeground,
+  color: eggplant,
+  stroke: 48,
+  fill: true,
+});
+midForegroundGround.copy({
+  path: [
+    { x: 18, y: 50 },
+    { arc: [
+      { x: -16, y: 90 },
+      { x: -48, y: 72 },
+    ]},
+    { x: -64, y: 56 },
+    { x: -96, y: 48 },
+    { x: -96, y: 90 },
+    { x: 18, y: 90 },
+  ],
+});
+
+var midForeBall = new Zdog.Shape({
+  addTo: midForeground,
+  translate: { x: -92, y: 18 },
+  stroke: 20,
+  color: eggplant,
+});
+midForeBall.copy({
+  translate: { x: -104, y: 28 },
+});
+midForeBall.copy({
+  translate: { x: -84, y: 28 },
+  stroke: 24,
+});
+midForeBall.copy({
+  translate: { x: -74, y: 20 },
+});
+midForeBall.copy({
+  translate: { x: -60, y: 28 },
+});
+midForeBall.copy({
+  translate: { x: -50, y: 36 },
+});
+midForeBall.copy({
+  translate: { x: -44, y: 46 },
+});
+
+var midForeTree = {
+  addTo: midForeground,
+  color: eggplant,
+  stroke: 2,
+};
+
+tree( midForeTree, {
+  width: 10,
+  height: 24,
+  translate: { x: -12, y: 42 },
+});
+tree( midForeTree, {
+  width: 10,
+  height: 24,
+  translate: { x: 10, y: 22, z: 2 },
+});
+tree( midForeTree, {
+  width: 16,
+  height: 36,
+  translate: { x: 22, y: 18, z: -6 },
+});
+
+tree( midForeTree, {
+  width: 16,
+  height: 36,
+  translate: { x: 76, y: -6, z: 12 },
+});
+tree( midForeTree, {
+  width: 10,
+  height: 24,
+  translate: { x: 86, y: -4, z: -10 },
+});
+
+// ----- foregroundA ----- //
+
+var foregroundA = new Zdog.Shape({
+  path: [
+    { x: -96, y: 52 },
+    { x: -84, y: 52 },
+    { arc: [
+      { x: -72, y: 72 },
+      { x: -44, y: 72 },
+    ]},
+    { arc: [
+      { x: -32, y: 90 },
+      { x: 0, y: 90 },
+    ]},
+    { x: -96, y: 90 },
+  ],
+  addTo: illo,
+  translate: { z: layerSpace*2 },
+  color: midnight,
+  stroke: 48,
+  fill: true,
+});
+
+var foregroundTree = {
+  color: midnight,
+  stroke: 2,
+};
+
+tree( foregroundTree, {
+  addTo: foregroundA,
+  width: 18,
+  height: 44,
+  translate: { x: -80, y: 18 },
+});
+
+var foreTree1Translate = { x: -44, y: 14 };
+tree( foregroundTree, {
+  addTo: foregroundA,
+  width: 18,
+  height: 44,
+  translate: { x: -44, y: 14 },
+});
+// trunk
+new Zdog.Shape({
+  path: [
+    { y: 22 },
+    { y: 38 },
+  ],
+  addTo: foregroundA,
+  translate: foreTree1Translate,
+  stroke: 6,
+  color: midnight,
+});
+
+tree( foregroundTree, {
+  addTo: foregroundA,
+  width: 16,
+  height: 36,
+  translate: { x: -2, y: 64 },
+});
+
+var grassBlade = new Zdog.Shape({
+  path: [
+    // semi-circle outside on left
+    { x: 0, y: 1 },
+    { arc: [
+      { x: -1, y: 1 },
+      { x: -1, y: 0 },
+    ]},
+    { arc: [
+      { x: -1, y: -1 },
+      { x:  0, y: -1 },
+    ]},
+    // shallow semi-circle back
+    { arc: [
+      { x: -0.5, y: -0.7 },
+      { x: -0.5, y: 0 },
+    ]},
+    { arc: [
+      { x: -0.5, y: 0.7 },
+      { x: 0, y: 1 },
+    ]},
+  ],
+  addTo: foregroundA,
+  translate: { x: -20, y: 56 },
+  scale: 8,
+  rotate: { z: 0.6 },
+  color: midnight,
+  stroke: 1,
+  fill: true,
+  closed: false,
+});
+grassBlade.copy({
+  translate: { x: -33, y: 50 },
+  rotate: { z: TAU/2 + 0.2 },
+});
+
+grassBlade.copy({
+  translate: { x: -62, y: 40 },
+  rotate: { z: 0.8 },
+  scale: 7,
+});
+
+grassBlade.copy({
+  translate: { x: -64, y: 35 },
+  rotate: { z: 0.4 },
+  scale: 7,
+});
+
+// ----- foregroundB ----- //
+
+var foregroundB = new Zdog.Shape({
+  path: [
+    { x: 96, y: 52 },
+    { arc: [
+      { x: 80, y: 72 },
+      { x: 56, y: 72 },
+    ]},
+    { arc: [
+      { x: 40, y: 90 },
+      { x: 8, y: 90 },
+    ]},
+    { x: 0, y: 90 },
+    { x: 96, y: 90 },
+  ],
+  addTo: illo,
+  translate: { z: layerSpace*2 },
+  color: midnight,
+  stroke: 48,
+  fill: true,
+});
+
+tree( foregroundTree, {
+  addTo: foregroundB,
+  width: 16,
+  height: 36,
+  translate: { x: 10, y: 54 },
+});
+
+// big tree
+var bigTreeTranslate = { x: 58, y: 2 };
+tree( foregroundTree, {
+  addTo: foregroundB,
+  width: 20,
+  height: 64,
+  translate: bigTreeTranslate,
+});
+// big tree trunk
+new Zdog.Shape({
+  path: [
+    { y: 32 },
+    { y: 48 },
+  ],
+  addTo: foregroundB,
+  translate: bigTreeTranslate,
+  stroke: 6,
+  color: midnight,
+});
+
+tree( foregroundTree, {
+  addTo: foregroundB,
+  width: 16,
+  height: 36,
+  translate: { x: 86, y: 26 },
+});
+
+grassBlade.copy({
+  addTo: foregroundB,
+  scale: 12,
+  translate: { x: 46, y: 54 },
+  rotate: { z: 0 },
+});
+grassBlade.copy({
+  addTo: foregroundB,
+  scale: 10,
+  translate: { x: 28, y: 58 },
+  rotate: { z: TAU/2 - 0.4 },
+});
+
+// ----- particles ----- //
+
+var particle = new Zdog.Shape({
+  addTo: illo,
+  translate: { x: -70, y: -50, z: layerSpace*-0.25 },
+  stroke: 4,
+  color: gold,
+});
+particle.copy({
+  translate: { x: 68, y: -28, z: layerSpace*0.5 },
+});
+particle.copy({
+  translate: { x: -70, y: 2, z: layerSpace*0.75 },
+  color: amber,
+});
+particle.copy({
+  translate: { x: 74, y: 14, z: layerSpace*1.5 },
+});
+particle.copy({
+  translate: { x: -24, y: 34, z: layerSpace*1.75 },
+});
+particle.copy({
+  translate: { x: 34, y: 34, z: layerSpace*1.9 },
+  color: amber,
+});
+particle.copy({
+  translate: { x: 22, y: 40, z: layerSpace*2.2 },
+});
+
+// ----- clouds ----- //
+
+var twoCloud = new Zdog.Shape({
+  path: [
+    { x: -20, y: 0 },
+    { bezier: [
+      { x: -13, y: 0 },
+      { x: -12, y: -4 },
+      { x: -10, y: -4 },
+    ]},
+    { bezier: [
+      { x: -8, y: -4 },
+      { x: -8, y: -2 },
+      { x: -4, y: -2 },
+    ]},
+    { bezier: [
+      { x: 0, y: -2 },
+      { x: 1, y: -6 },
+      { x: 4, y: -6 },
+    ]},
+    { bezier: [
+      { x: 7, y: -6 },
+      { x: 6, y: 0 },
+      { x: 20, y: 0 },
+    ]},
+  ],
+  addTo: illo,
+  translate: { x: -84, y: -38, z: layerSpace*-1 },
+  rotate: { y: -TAU*1/16 },
+  scale: { x: 1/Math.cos(TAU*1/16) },
+  stroke: 4,
+  color: white,
+  fill: true,
+});
+
+twoCloud.copy({
+  translate: { x: -38, y: -22, z: layerSpace*-0.5 },
+  rotate: { y: -TAU*1/8 },
+  scale: { x: 1/Math.cos(TAU*1/8) * -1 },
+});
+
+// triple cloud
+new Zdog.Shape({
+  path: [
+    { x: -32, y: 0 },
+    { x: -28, y: 0 },
+    { bezier: [
+      { x: -22, y: 0 },
+      { x: -20, y: -6 },
+      { x: -16, y: -6 },
+    ]},
+    { bezier: [
+      { x: -12, y: -6 },
+      { x: -12, y: -2 },
+      { x: -8, y: -2 },
+    ]},
+    { bezier: [
+      { x: -4, y: -2 },
+      { x: -4, y: -6 },
+      { x: 0, y: -6 },
+    ]},
+    { bezier: [
+      { x: 4, y: -6 },
+      { x: 4, y: -2 },
+      { x: 8, y: -2 },
+    ]},
+    { bezier: [
+      { x: 12, y: -2 },
+      { x: 12, y: -6 },
+      { x: 16, y: -6 },
+    ]},
+    { bezier: [
+      { x: 20, y: -6 },
+      { x: 22, y: 0 },
+      { x: 28, y: 0 },
+    ]},
+    { x: 32, y: 0 },
+  ],
+  addTo: illo,
+  translate: { x: 72, y: -52, z: layerSpace*-1 },
+  rotate: { y: TAU * 1/16 },
+  scale: { x: 1/Math.cos(TAU * -1/16) },
+  stroke: 4,
+  color: white,
+  fill: true,
+});
+
+// ----- stars ----- //
+
+var starA = new Zdog.Shape({
+  path: [
+    { x: 0, y: -4 },
+    { arc: [
+      { x: 0, y: 0 },
+      { x: 4, y: 0 },
+    ]},
+    { arc: [
+      { x: 0, y: 0 },
+      { x: 0, y: 4 },
+    ]},
+    { arc: [
+      { x: 0, y: 0 },
+      { x: -4, y: 0 },
+    ]},
+    { arc: [
+      { x: 0, y: 0 },
+      { x: 0, y: -4 },
+    ]},
+  ],
+  addTo: illo,
+  translate: { x: -50, y: -50, z: layerSpace*-1.5 },
+  color: gold,
+  stroke: 2,
+  fill: true,
+});
+starA.copy({
+  rotate: { y: TAU/4 },
+});
+
+var starB = starA.copy({
+  translate: { x: 42, y: -20, z: -layerSpace*0.5 },
+});
+starB.copy({
+  rotate: { y: TAU/4 },
+});
+
+// ----- bird ----- //
+
+new Zdog.Shape({
+  path: [
+    { x: -6, y: -4 },
+    { x: -4, y: -4 },
+    { arc: [
+      { x: 0, y: -4 },
+      { x: 0, y: 0 },
+    ]},
+    { arc: [
+      { x: 0, y: -4 },
+      { x: 4, y: -4 },
+    ]},
+    { x: 6, y: -4 },
+    { move: { z: -2, y: 0 } },
+    { z: 3, y: 0 },
+  ],
+  addTo: illo,
+  translate: { x: 18, y: -30, z: layerSpace*-1 },
+  stroke: 3,
+  color: midnight,
+  closed: false,
+});
+
+
+// -- animate --- //
+
+var t = 0;
+var tSpeed = 1/240;
+
+function animate() {
+  // update
+  if ( isSpinning ) {
+    t += tSpeed;
+    var theta = Zdog.easeInOut( t % 1 ) * TAU;
+    var delta = TAU * -3/64;
+    illo.rotate.y = Math.sin( theta ) * delta;
+    illo.rotate.x = ( Math.cos( theta ) * -0.5 + 0.5 ) * delta;
+  }
+
+  illo.updateRenderGraph();
+  requestAnimationFrame( animate );
+}
+
+animate();
+
+
+// ----- inputs ----- //
+
+document.querySelector('.reset-button').onclick = function() {
+  isSpinning = false;
+  illo.rotate.set({});
+};
diff --git a/zdoglittle-forest/src/style.css b/zdoglittle-forest/src/style.css
new file mode 100644
index 0000000..15ee62d
--- /dev/null
+++ b/zdoglittle-forest/src/style.css
@@ -0,0 +1,38 @@
+html { height: 100%; }
+
+body {
+  min-height: 100%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #313;
+  color: white;
+  font-family: sans-serif;
+  font-size: 14px;
+  text-align: center;
+  cursor: move;
+}
+
+canvas {
+  display: block;
+  margin: 0px auto 20px;
+}
+
+a { color: #936; }
+a:hover { color: #D65; }
+
+button {
+  background: #525;
+  color: white;
+  font-size: 14px;
+  font-family: inherit;
+  border: none;
+  border-radius: 3px;
+  padding: 8px 10px;
+}
+
+button:hover {
+  background: #936;
+  cursor: pointer;
+}
diff --git a/zdogrgb-birdie/README.markdown b/zdogrgb-birdie/README.markdown
new file mode 100644
index 0000000..a28a3f1
--- /dev/null
+++ b/zdogrgb-birdie/README.markdown
@@ -0,0 +1,4 @@
+# Zdog - RGB birdie
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/desandro/pen/VOzXzW](https://codepen.io/desandro/pen/VOzXzW).
+
+ 
\ No newline at end of file
diff --git a/zdogrgb-birdie/dist/index.html b/zdogrgb-birdie/dist/index.html
new file mode 100644
index 0000000..a68cb02
--- /dev/null
+++ b/zdogrgb-birdie/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Zdog - RGB birdie</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas class="illo"></canvas>
+<!-- partial -->
+  <script src='https://unpkg.com/zdog@1/dist/zdog.dist.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/zdogrgb-birdie/dist/script.js b/zdogrgb-birdie/dist/script.js
new file mode 100644
index 0000000..40bcf05
--- /dev/null
+++ b/zdogrgb-birdie/dist/script.js
@@ -0,0 +1,150 @@
+// Made with Zdog
+
+var sceneSize = 270;
+var TAU = Zdog.TAU;
+var initialRotate = new Zdog.Vector({ x: -35, y: -45 }).multiply( TAU/360 );
+
+var illo = new Zdog.Illustration({
+  element: '.illo',
+  rotate: initialRotate,
+  dragRotate: true,
+  resize: 'fullscreen',
+  onDragStart: function() {
+    isSpinning = false;
+  },
+  onResize: function( width, height ) {
+    this.zoom = Math.floor( Math.min( width, height ) / sceneSize * 2 ) / 2;
+  },
+});
+
+// ----- model ----- //
+
+var bird = new Zdog.Anchor({
+  addTo: illo,
+  translate: { z: -20 },
+});
+
+var letterGroup = new Zdog.Group({
+  addTo: bird,
+});
+
+// R
+new Zdog.Shape({
+  addTo: letterGroup,
+  path: [
+    { x: -55, y: -55 },
+    { x:  15, y: -55 },
+    { arc: [
+      { x: 55, y: -55 },
+      { x: 55, y: -15 },
+    ]},
+    { bezier: [
+      { x: 55, y:  0 },
+      { x: 47, y: 13 },
+      { x: 35, y: 20 },
+    ]},
+    { x: 29, y: 23 },
+    { x: 50, y: 55 },
+    { x: -55, y: 55 },
+  ],
+  rotate: { x: TAU/4 },
+  color: '#F00',
+  stroke: 10,
+  fill: true,
+});
+
+// G
+new Zdog.Shape({
+  addTo: letterGroup,
+  path: [
+    { x: 0, y: -55 },
+    { bezier: [
+      { x: 18, y: -55 },
+      { x: 32, y: -46 },
+      { x: 40, y: -38 },
+    ]},
+    { x:  7, y: -5 },
+    { x: 55, y: -5 },
+    { x: 55, y: 53 },
+    { x: 35, y: 47 },
+    { bezier: [
+      { x: 21, y: 52 },
+      { x: 10, y: 55 },
+      { x:  0, y: 55 },
+    ]},
+    { arc: [
+      { x: -55, y: 55 },
+      { x: -55, y:  0 },
+    ]},
+    { arc: [
+      { x: -55, y: -55 },
+      { x:   0, y: -55 },
+    ]},
+  ],
+  translate: { x: -30, y: 20, z: 33 },
+  rotate: { y: TAU/4 },
+  color: '#0F0',
+  stroke: 10,
+  fill: true,
+});
+
+// B
+new Zdog.Shape({
+  addTo: letterGroup,
+  path: [
+    { x: -55, y: -55 },
+    { x:  25, y: -55 },
+    { arc: [
+      { x: 55, y: -55 },
+      { x: 55, y: -25 },
+    ]},
+    { bezier: [
+      { x: 55, y: -13 },
+      { x: 49, y:  -7 },
+      { x: 42, y:  -4 },
+    ]},
+    { x: 35, y: 0 },
+    { x: 42, y: 4 },
+    { bezier: [
+      { x: 49, y:  7 },
+      { x: 55, y: 13 },
+      { x: 55, y: 25 },
+    ]},
+    { arc: [
+      { x: 55, y: 55 },
+      { x: 25, y: 55 },
+    ]},
+    { x: -55, y: 55 },
+  ],
+  translate: { y: -10, z: 60 },
+  color: '#00F',
+  stroke: 10,
+  fill: true,
+});
+
+var eye = new Zdog.Shape({
+  addTo: bird,
+  translate: { x: -60, y: -40, z: 30 },
+  stroke: 18,
+  color: '#111',
+});
+
+// screen blend letters
+letterGroup.render = function( ctx ) {
+  ctx.globalCompositeOperation = 'screen';
+  Zdog.Group.prototype.render.apply( this, arguments );
+};
+// normal blend eye
+eye.render = function( ctx ) {
+  ctx.globalCompositeOperation = 'source-over';
+  Zdog.Shape.prototype.render.apply( this, arguments );
+};
+
+// ----- animate ----- //
+
+function animate() {
+  illo.updateRenderGraph();
+  requestAnimationFrame( animate );
+}
+
+animate();
\ No newline at end of file
diff --git a/zdogrgb-birdie/dist/style.css b/zdogrgb-birdie/dist/style.css
new file mode 100644
index 0000000..b9a3a76
--- /dev/null
+++ b/zdogrgb-birdie/dist/style.css
@@ -0,0 +1,12 @@
+body {
+  background: #111;
+  margin: 0;
+}
+      
+
+.illo {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: move;
+}
\ No newline at end of file
diff --git a/zdogrgb-birdie/license.txt b/zdogrgb-birdie/license.txt
new file mode 100644
index 0000000..9939c22
--- /dev/null
+++ b/zdogrgb-birdie/license.txt
@@ -0,0 +1,17 @@
+
+
+<!--
+Copyright (c) 2019 by Dave DeSandro (https://codepen.io/desandro/pen/VOzXzW)
+
+
+Fork of an original work by Dave DeSandro (https://codepen.io/desandro/pen/xNLWwG)
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/zdogrgb-birdie/src/index.html b/zdogrgb-birdie/src/index.html
new file mode 100644
index 0000000..b0674fc
--- /dev/null
+++ b/zdogrgb-birdie/src/index.html
@@ -0,0 +1 @@
+<canvas class="illo"></canvas>
\ No newline at end of file
diff --git a/zdogrgb-birdie/src/script.js b/zdogrgb-birdie/src/script.js
new file mode 100644
index 0000000..09aae9c
--- /dev/null
+++ b/zdogrgb-birdie/src/script.js
@@ -0,0 +1,151 @@
+// Made with Zdog
+
+var sceneSize = 270;
+var TAU = Zdog.TAU;
+var initialRotate = new Zdog.Vector({ x: -35, y: -45 }).multiply( TAU/360 );
+
+var illo = new Zdog.Illustration({
+  element: '.illo',
+  rotate: initialRotate,
+  dragRotate: true,
+  resize: 'fullscreen',
+  onDragStart: function() {
+    isSpinning = false;
+  },
+  onResize: function( width, height ) {
+    this.zoom = Math.floor( Math.min( width, height ) / sceneSize * 2 ) / 2;
+  },
+});
+
+// ----- model ----- //
+
+var bird = new Zdog.Anchor({
+  addTo: illo,
+  translate: { z: -20 },
+});
+
+var letterGroup = new Zdog.Group({
+  addTo: bird,
+});
+
+// R
+new Zdog.Shape({
+  addTo: letterGroup,
+  path: [
+    { x: -55, y: -55 },
+    { x:  15, y: -55 },
+    { arc: [
+      { x: 55, y: -55 },
+      { x: 55, y: -15 },
+    ]},
+    { bezier: [
+      { x: 55, y:  0 },
+      { x: 47, y: 13 },
+      { x: 35, y: 20 },
+    ]},
+    { x: 29, y: 23 },
+    { x: 50, y: 55 },
+    { x: -55, y: 55 },
+  ],
+  rotate: { x: TAU/4 },
+  color: '#F00',
+  stroke: 10,
+  fill: true,
+});
+
+// G
+new Zdog.Shape({
+  addTo: letterGroup,
+  path: [
+    { x: 0, y: -55 },
+    { bezier: [
+      { x: 18, y: -55 },
+      { x: 32, y: -46 },
+      { x: 40, y: -38 },
+    ]},
+    { x:  7, y: -5 },
+    { x: 55, y: -5 },
+    { x: 55, y: 53 },
+    { x: 35, y: 47 },
+    { bezier: [
+      { x: 21, y: 52 },
+      { x: 10, y: 55 },
+      { x:  0, y: 55 },
+    ]},
+    { arc: [
+      { x: -55, y: 55 },
+      { x: -55, y:  0 },
+    ]},
+    { arc: [
+      { x: -55, y: -55 },
+      { x:   0, y: -55 },
+    ]},
+  ],
+  translate: { x: -30, y: 20, z: 33 },
+  rotate: { y: TAU/4 },
+  color: '#0F0',
+  stroke: 10,
+  fill: true,
+});
+
+// B
+new Zdog.Shape({
+  addTo: letterGroup,
+  path: [
+    { x: -55, y: -55 },
+    { x:  25, y: -55 },
+    { arc: [
+      { x: 55, y: -55 },
+      { x: 55, y: -25 },
+    ]},
+    { bezier: [
+      { x: 55, y: -13 },
+      { x: 49, y:  -7 },
+      { x: 42, y:  -4 },
+    ]},
+    { x: 35, y: 0 },
+    { x: 42, y: 4 },
+    { bezier: [
+      { x: 49, y:  7 },
+      { x: 55, y: 13 },
+      { x: 55, y: 25 },
+    ]},
+    { arc: [
+      { x: 55, y: 55 },
+      { x: 25, y: 55 },
+    ]},
+    { x: -55, y: 55 },
+  ],
+  translate: { y: -10, z: 60 },
+  color: '#00F',
+  stroke: 10,
+  fill: true,
+});
+
+var eye = new Zdog.Shape({
+  addTo: bird,
+  translate: { x: -60, y: -40, z: 30 },
+  stroke: 18,
+  color: '#111',
+});
+
+// screen blend letters
+letterGroup.render = function( ctx ) {
+  ctx.globalCompositeOperation = 'screen';
+  Zdog.Group.prototype.render.apply( this, arguments );
+};
+// normal blend eye
+eye.render = function( ctx ) {
+  ctx.globalCompositeOperation = 'source-over';
+  Zdog.Shape.prototype.render.apply( this, arguments );
+};
+
+// ----- animate ----- //
+
+function animate() {
+  illo.updateRenderGraph();
+  requestAnimationFrame( animate );
+}
+
+animate();
+
diff --git a/zdogrgb-birdie/src/style.css b/zdogrgb-birdie/src/style.css
new file mode 100644
index 0000000..b9a3a76
--- /dev/null
+++ b/zdogrgb-birdie/src/style.css
@@ -0,0 +1,12 @@
+body {
+  background: #111;
+  margin: 0;
+}
+      
+
+.illo {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: move;
+}
\ No newline at end of file
diff --git a/zdogsolids/README.markdown b/zdogsolids/README.markdown
new file mode 100644
index 0000000..d5b487e
--- /dev/null
+++ b/zdogsolids/README.markdown
@@ -0,0 +1,8 @@
+# Zdog - Solids
+ _A Pen created at CodePen.io. Original URL: [https://codepen.io/desandro/pen/MXPXGj](https://codepen.io/desandro/pen/MXPXGj).
+
+ [Made with Zdog](https://zzz.dog)
+
+Rendered with &lt;canvas&gt; & mostly lineWidth. [Read about how I'm making these in the description here](https://codepen.io/desandro/details/RQeYYp/)
+
+[View more round 3D pens](https://codepen.io/desandro/pens/tags/?selected_tag=round3d)
\ No newline at end of file
diff --git a/zdogsolids/dist/index.html b/zdogsolids/dist/index.html
new file mode 100644
index 0000000..df6e7e0
--- /dev/null
+++ b/zdogsolids/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Zdog - Solids</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<canvas class="illo"></canvas>
+<!-- partial -->
+  <script src='https://unpkg.com/zdog@1/dist/zdog.dist.js'></script>
+<script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/zdogsolids/dist/script.js b/zdogsolids/dist/script.js
new file mode 100644
index 0000000..e6888b9
--- /dev/null
+++ b/zdogsolids/dist/script.js
@@ -0,0 +1,443 @@
+// ----- setup ----- //
+
+var illoElem = document.querySelector('.illo');
+var sceneSize = 96;
+var TAU = Zdog.TAU;
+var ROOT3 = Math.sqrt(3);
+var ROOT5 = Math.sqrt(5);
+var PHI = ( 1 + ROOT5 ) / 2;
+var isSpinning = true;
+var viewRotation = new Zdog.Vector();
+var displaySize;
+
+// colors
+var eggplant = '#636';
+var garnet = '#C25';
+var orange = '#E62';
+var gold = '#EA0';
+var yellow = '#ED0';
+
+var illo = new Zdog.Illustration({
+  element: illoElem,
+  scale: 8,
+  resize: 'fullscreen',
+  onResize: function( width, height ) {
+    displaySize = Math.min( width, height );
+    this.zoom = Math.floor( displaySize / sceneSize );
+  },
+});
+
+var solids = [];
+
+// ----- hourglass ----- //
+
+( function() {
+
+  var hourglass = new Zdog.Anchor({
+    addTo: illo,
+    translate: { x: 0, y: -4 },
+  });
+
+  solids.push( hourglass );
+
+  var hemi = new Zdog.Hemisphere({
+    diameter: 2,
+    translate: { z: -1 },
+    addTo: hourglass,
+    color: garnet,
+    backface: orange,
+    stroke: false,
+  });
+
+  hemi.copy({
+    translate: { z: 1 },
+    rotate: { y: TAU/2 },
+    color: eggplant,
+    backface: gold,
+  });
+
+})();
+
+// ----- sphere ----- //
+
+( function() {
+
+  var sphere = new Zdog.Anchor({
+    addTo: illo,
+    translate: { x: -4, y: -4 },
+  });
+
+  solids.push( sphere );
+
+  var hemi = new Zdog.Hemisphere({
+    diameter: 2,
+    addTo: sphere,
+    color: orange,
+    backface: eggplant,
+    stroke: false,
+  });
+
+  hemi.copy({
+    rotate: { y: TAU/2 },
+    color: eggplant,
+    backface: orange,
+  });
+
+})();
+
+// ----- cylinder ----- //
+
+var cylinder = new Zdog.Cylinder({
+  diameter: 2,
+  length: 2,
+  addTo: illo,
+  translate: { x: 4, y: -4 },
+  // rotate: { x: TAU/4 },
+  color: gold,
+  backface: garnet,
+  stroke: false,
+});
+
+solids.push( cylinder );
+
+// ----- cone ----- //
+
+var cone = new Zdog.Anchor({
+  addTo: illo,
+  translate: { x: -4, y: 0 },
+});
+
+solids.push( cone );
+
+new Zdog.Cone({
+  diameter: 2,
+  length: 2,
+  addTo: cone,
+  translate: { z: 1 },
+  rotate: { y: TAU/2 },
+  color: garnet,
+  backface: gold,
+  stroke: false,
+});
+
+// ----- tetrahedron ----- //
+
+( function() {
+
+  var tetrahedron = new Zdog.Anchor({
+    addTo: illo,
+    translate: { x: 0, y: 0 },
+    scale: 2.5,
+  });
+
+  var radius = 0.5;
+  var inradius = Math.cos( TAU/6 ) * radius;
+  var height = radius + inradius;
+
+  solids.push( tetrahedron );
+
+  var triangle = new Zdog.Polygon({
+    sides: 3,
+    radius: radius,
+    addTo: tetrahedron,
+    translate: { y: height/2 },
+    fill: true,
+    stroke: false,
+    color: eggplant,
+    // backface: false,
+  });
+
+
+  for ( var i=0; i < 3; i++ ) {
+    var rotor1 = new Zdog.Anchor({
+      addTo: tetrahedron,
+      rotate: { y: TAU/3 * -i },
+    });
+    var rotor2 = new Zdog.Anchor({
+      addTo: rotor1,
+      translate: { z: inradius, y: height/2 },
+      rotate: { x: Math.acos(1/3) * -1 + TAU/4  },
+    });
+    triangle.copy({
+      addTo: rotor2,
+      translate: { y: -inradius },
+      color: [ gold, garnet, orange ][i],
+    });
+  }
+
+  triangle.rotate.set({ x: -TAU/4, z: -TAU/2 });
+
+})();
+
+// ----- octahedron ----- //
+
+( function() {
+
+  var octahedron = new Zdog.Anchor({
+    addTo: illo,
+    translate: { x: -4, y: 4 },
+    scale: 1.75,
+  });
+
+  solids.push( octahedron );
+
+  var colorWheel = [ eggplant, garnet, orange, gold, yellow ];
+
+  // radius of triangle with side length = 1
+  var radius = ROOT3/2 * 2/3;
+  var height = radius * 3/2;
+  var tilt = Math.asin( 0.5 / height );
+
+  [ -1, 1 ].forEach( function( ySide ) {
+    for ( var i=0; i < 4; i++ ) {
+      var rotor = new Zdog.Anchor({
+        addTo: octahedron,
+        rotate: { y: TAU/4 * (i + 1.5) * -1 },
+      });
+
+      var anchor = new Zdog.Anchor({
+        addTo: rotor,
+        translate: { z: 0.5 },
+        rotate: { x: tilt * ySide },
+        // scale: { y: -ySide },
+      });
+
+      new Zdog.Polygon({
+        sides: 3,
+        radius: radius,
+        addTo: anchor,
+        translate: { y: -radius/2 * ySide },
+        scale: { y: ySide },
+        stroke: false,
+        fill: true,
+        color: colorWheel[ i + 0.5 + 0.5*ySide ],
+        backface: false,
+      });
+    }
+  });
+
+
+})();
+
+// ----- cube ----- //
+
+var cube = new Zdog.Box({
+  addTo: illo,
+  width: 2,
+  height: 2,
+  depth: 2,
+  translate: { x: 4, y: 0 },
+  topFace: yellow,
+  frontFace: gold,
+  leftFace: orange,
+  rightFace: orange,
+  rearFace: garnet,
+  bottomFace: eggplant,
+  stroke: false,
+});
+
+solids.push( cube );
+
+// ----- dodecahedron ----- //
+
+( function() {
+
+  var dodecahedron = new Zdog.Anchor({
+    addTo: illo,
+    translate: { x: 0, y: 4 },
+    scale: 0.75,
+  });
+
+  solids.push( dodecahedron );
+
+  // https://en.wikipedia.org/wiki/Regular_dodecahedron#Dimensions
+  var midradius = ( PHI * PHI ) / 2;
+
+  // top & bottom faces
+  var face = new Zdog.Polygon({
+    sides: 5,
+    radius: 1,
+    addTo: dodecahedron,
+    translate: { y: -midradius },
+    rotate: { x: TAU/4 },
+    fill: true,
+    stroke: false,
+    color: yellow,
+    // backface: false,
+  });
+
+  face.copy({
+    translate: { y: midradius },
+    rotate: { x: -TAU/4 },
+    color: eggplant,
+  });
+
+
+  [ -1, 1 ].forEach( function( ySide ) {
+
+
+    var colorWheel = {
+      '-1': [ eggplant, garnet, gold, orange, garnet ],
+      1: [ yellow, gold, garnet, orange, gold ],
+    }[ ySide ];
+
+    for ( var i=0; i < 5; i++ ) {
+      var rotor1 = new Zdog.Anchor({
+        addTo: dodecahedron,
+        rotate: { y: TAU/5 * (i) },
+      });
+      var rotor2 = new Zdog.Anchor({
+        addTo: rotor1,
+        rotate: { x: TAU/4*ySide - Math.atan(2) },
+      });
+
+      face.copy({
+        addTo: rotor2,
+        translate: { z: midradius },
+        rotate: { z: TAU/2 },
+        color: colorWheel[i],
+      });
+    }
+  });
+
+})();
+
+// ----- isocahedron ----- //
+
+( function() {
+
+  var isocahedron = new Zdog.Anchor({
+    addTo: illo,
+    translate: { x: 4, y: 4 },
+    scale: 1.2,
+  });
+
+  solids.push( isocahedron );
+
+  // geometry
+  // radius of triangle with side length = 1
+  var faceRadius = ROOT3/2 * 2/3;
+  var faceHeight = faceRadius * 3/2;
+  var capApothem = 0.5 / Math.tan( TAU/10 );
+  var capRadius = 0.5 / Math.sin( TAU/10 );
+  var capTilt = Math.asin( capApothem / faceHeight );
+  var capSagitta = capRadius - capApothem;
+  var sideTilt = Math.asin( capSagitta / faceHeight );
+  var sideHeight = Math.sqrt( faceHeight*faceHeight - capSagitta*capSagitta );
+
+  // var colorWheel = [ eggplant, garnet, orange, gold, yellow ];
+
+  [ -1, 1 ].forEach( function( ySide ) {
+    var capColors = {
+      '-1': [ garnet, gold, yellow, gold, orange ],
+      1: [ gold, garnet, eggplant, garnet, orange ],
+    }[ ySide ];
+
+    var sideColors = {
+      '-1': [ garnet, gold, yellow, orange, garnet ],
+      1: [ gold, garnet, eggplant, orange, orange ],
+    }[ ySide ];
+
+    for ( var i=0; i < 5; i++ ) {
+      var rotor = new Zdog.Anchor({
+        addTo: isocahedron,
+        rotate: { y: TAU/5 * -i },
+        translate: { y: sideHeight/2 * ySide },
+      });
+
+      var capRotateX = -capTilt;
+      var isYPos = ySide > 0;
+      capRotateX += isYPos ? TAU/2 : 0;
+
+      var capAnchor = new Zdog.Anchor({
+        addTo: rotor,
+        translate: { z: capApothem * ySide },
+        rotate: { x: capRotateX },
+      });
+
+      // cap face
+      var face = new Zdog.Polygon({
+        sides: 3,
+        radius: faceRadius,
+        addTo: capAnchor,
+        translate: { y: -faceRadius/2 },
+        stroke: false,
+        fill: true,
+        color: capColors[i],
+        // backface: false,
+      });
+
+      var sideRotateX = -sideTilt;
+      sideRotateX += isYPos ? 0 : TAU/2;
+      var sideAnchor = capAnchor.copy({
+        rotate: { x: sideRotateX },
+      });
+
+      face.copy({
+        addTo: sideAnchor,
+        translate: { y: -faceRadius/2 },
+        rotate: { y: TAU/2 },
+        color: sideColors[i]
+      });
+
+    }
+  });
+
+})();
+
+// -- animate --- //
+
+var keyframes = [
+  { x:   0, y:   0 },
+  { x:   0, y: TAU },
+  { x: TAU, y: TAU },
+];
+
+var ticker = 0;
+var cycleCount = 180;
+var turnLimit = keyframes.length - 1;
+
+function animate() {
+  update();
+  illo.renderGraph();
+  requestAnimationFrame( animate );
+}
+
+animate();
+
+function update() {
+
+  if ( isSpinning ) {
+    var progress = ticker / cycleCount;
+    var tween = Zdog.easeInOut( progress % 1, 4 );
+    var turn = Math.floor( progress % turnLimit );
+    var keyA = keyframes[ turn ];
+    var keyB = keyframes[ turn + 1 ];
+    viewRotation.x = Zdog.lerp( keyA.x, keyB.x, tween );
+    viewRotation.y = Zdog.lerp( keyA.y, keyB.y, tween );
+    ticker++;
+  }
+
+  solids.forEach( function( solid ) {
+    solid.rotate.set( viewRotation );
+  });
+
+  illo.updateGraph();
+}
+
+// ----- inputs ----- //
+
+var dragStartRX, dragStartRY;
+
+new Zdog.Dragger({
+  startElement: illoElem,
+  onDragStart: function() {
+    isSpinning = false;
+    dragStartRX = viewRotation.x;
+    dragStartRY = viewRotation.y;
+  },
+  onDragMove: function( pointer, moveX, moveY ) {
+    viewRotation.x = dragStartRX - ( moveY / displaySize * TAU );
+    viewRotation.y = dragStartRY - ( moveX / displaySize * TAU );
+  },
+});
\ No newline at end of file
diff --git a/zdogsolids/dist/style.css b/zdogsolids/dist/style.css
new file mode 100644
index 0000000..11adf33
--- /dev/null
+++ b/zdogsolids/dist/style.css
@@ -0,0 +1,14 @@
+html { height: 100%; }
+
+body {
+  min-height: 100%;
+  margin: 0;
+}
+
+.illo {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: #CFD;
+  cursor: move;
+}
\ No newline at end of file
diff --git a/zdogsolids/license.txt b/zdogsolids/license.txt
new file mode 100644
index 0000000..3fe93e2
--- /dev/null
+++ b/zdogsolids/license.txt
@@ -0,0 +1,13 @@
+
+
+<!--
+Copyright (c) 2019 by Dave DeSandro (https://codepen.io/desandro/pen/MXPXGj)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+
diff --git a/zdogsolids/src/index.html b/zdogsolids/src/index.html
new file mode 100644
index 0000000..b0674fc
--- /dev/null
+++ b/zdogsolids/src/index.html
@@ -0,0 +1 @@
+<canvas class="illo"></canvas>
\ No newline at end of file
diff --git a/zdogsolids/src/script.js b/zdogsolids/src/script.js
new file mode 100644
index 0000000..607c362
--- /dev/null
+++ b/zdogsolids/src/script.js
@@ -0,0 +1,443 @@
+// ----- setup ----- //
+
+var illoElem = document.querySelector('.illo');
+var sceneSize = 96;
+var TAU = Zdog.TAU;
+var ROOT3 = Math.sqrt(3);
+var ROOT5 = Math.sqrt(5);
+var PHI = ( 1 + ROOT5 ) / 2;
+var isSpinning = true;
+var viewRotation = new Zdog.Vector();
+var displaySize;
+
+// colors
+var eggplant = '#636';
+var garnet = '#C25';
+var orange = '#E62';
+var gold = '#EA0';
+var yellow = '#ED0';
+
+var illo = new Zdog.Illustration({
+  element: illoElem,
+  scale: 8,
+  resize: 'fullscreen',
+  onResize: function( width, height ) {
+    displaySize = Math.min( width, height );
+    this.zoom = Math.floor( displaySize / sceneSize );
+  },
+});
+
+var solids = [];
+
+// ----- hourglass ----- //
+
+( function() {
+
+  var hourglass = new Zdog.Anchor({
+    addTo: illo,
+    translate: { x: 0, y: -4 },
+  });
+
+  solids.push( hourglass );
+
+  var hemi = new Zdog.Hemisphere({
+    diameter: 2,
+    translate: { z: -1 },
+    addTo: hourglass,
+    color: garnet,
+    backface: orange,
+    stroke: false,
+  });
+
+  hemi.copy({
+    translate: { z: 1 },
+    rotate: { y: TAU/2 },
+    color: eggplant,
+    backface: gold,
+  });
+
+})();
+
+// ----- sphere ----- //
+
+( function() {
+
+  var sphere = new Zdog.Anchor({
+    addTo: illo,
+    translate: { x: -4, y: -4 },
+  });
+
+  solids.push( sphere );
+
+  var hemi = new Zdog.Hemisphere({
+    diameter: 2,
+    addTo: sphere,
+    color: orange,
+    backface: eggplant,
+    stroke: false,
+  });
+
+  hemi.copy({
+    rotate: { y: TAU/2 },
+    color: eggplant,
+    backface: orange,
+  });
+
+})();
+
+// ----- cylinder ----- //
+
+var cylinder = new Zdog.Cylinder({
+  diameter: 2,
+  length: 2,
+  addTo: illo,
+  translate: { x: 4, y: -4 },
+  // rotate: { x: TAU/4 },
+  color: gold,
+  backface: garnet,
+  stroke: false,
+});
+
+solids.push( cylinder );
+
+// ----- cone ----- //
+
+var cone = new Zdog.Anchor({
+  addTo: illo,
+  translate: { x: -4, y: 0 },
+});
+
+solids.push( cone );
+
+new Zdog.Cone({
+  diameter: 2,
+  length: 2,
+  addTo: cone,
+  translate: { z: 1 },
+  rotate: { y: TAU/2 },
+  color: garnet,
+  backface: gold,
+  stroke: false,
+});
+
+// ----- tetrahedron ----- //
+
+( function() {
+
+  var tetrahedron = new Zdog.Anchor({
+    addTo: illo,
+    translate: { x: 0, y: 0 },
+    scale: 2.5,
+  });
+
+  var radius = 0.5;
+  var inradius = Math.cos( TAU/6 ) * radius;
+  var height = radius + inradius;
+
+  solids.push( tetrahedron );
+
+  var triangle = new Zdog.Polygon({
+    sides: 3,
+    radius: radius,
+    addTo: tetrahedron,
+    translate: { y: height/2 },
+    fill: true,
+    stroke: false,
+    color: eggplant,
+    // backface: false,
+  });
+
+
+  for ( var i=0; i < 3; i++ ) {
+    var rotor1 = new Zdog.Anchor({
+      addTo: tetrahedron,
+      rotate: { y: TAU/3 * -i },
+    });
+    var rotor2 = new Zdog.Anchor({
+      addTo: rotor1,
+      translate: { z: inradius, y: height/2 },
+      rotate: { x: Math.acos(1/3) * -1 + TAU/4  },
+    });
+    triangle.copy({
+      addTo: rotor2,
+      translate: { y: -inradius },
+      color: [ gold, garnet, orange ][i],
+    });
+  }
+
+  triangle.rotate.set({ x: -TAU/4, z: -TAU/2 });
+
+})();
+
+// ----- octahedron ----- //
+
+( function() {
+
+  var octahedron = new Zdog.Anchor({
+    addTo: illo,
+    translate: { x: -4, y: 4 },
+    scale: 1.75,
+  });
+
+  solids.push( octahedron );
+
+  var colorWheel = [ eggplant, garnet, orange, gold, yellow ];
+
+  // radius of triangle with side length = 1
+  var radius = ROOT3/2 * 2/3;
+  var height = radius * 3/2;
+  var tilt = Math.asin( 0.5 / height );
+
+  [ -1, 1 ].forEach( function( ySide ) {
+    for ( var i=0; i < 4; i++ ) {
+      var rotor = new Zdog.Anchor({
+        addTo: octahedron,
+        rotate: { y: TAU/4 * (i + 1.5) * -1 },
+      });
+
+      var anchor = new Zdog.Anchor({
+        addTo: rotor,
+        translate: { z: 0.5 },
+        rotate: { x: tilt * ySide },
+        // scale: { y: -ySide },
+      });
+
+      new Zdog.Polygon({
+        sides: 3,
+        radius: radius,
+        addTo: anchor,
+        translate: { y: -radius/2 * ySide },
+        scale: { y: ySide },
+        stroke: false,
+        fill: true,
+        color: colorWheel[ i + 0.5 + 0.5*ySide ],
+        backface: false,
+      });
+    }
+  });
+
+
+})();
+
+// ----- cube ----- //
+
+var cube = new Zdog.Box({
+  addTo: illo,
+  width: 2,
+  height: 2,
+  depth: 2,
+  translate: { x: 4, y: 0 },
+  topFace: yellow,
+  frontFace: gold,
+  leftFace: orange,
+  rightFace: orange,
+  rearFace: garnet,
+  bottomFace: eggplant,
+  stroke: false,
+});
+
+solids.push( cube );
+
+// ----- dodecahedron ----- //
+
+( function() {
+
+  var dodecahedron = new Zdog.Anchor({
+    addTo: illo,
+    translate: { x: 0, y: 4 },
+    scale: 0.75,
+  });
+
+  solids.push( dodecahedron );
+
+  // https://en.wikipedia.org/wiki/Regular_dodecahedron#Dimensions
+  var midradius = ( PHI * PHI ) / 2;
+
+  // top & bottom faces
+  var face = new Zdog.Polygon({
+    sides: 5,
+    radius: 1,
+    addTo: dodecahedron,
+    translate: { y: -midradius },
+    rotate: { x: TAU/4 },
+    fill: true,
+    stroke: false,
+    color: yellow,
+    // backface: false,
+  });
+
+  face.copy({
+    translate: { y: midradius },
+    rotate: { x: -TAU/4 },
+    color: eggplant,
+  });
+
+
+  [ -1, 1 ].forEach( function( ySide ) {
+
+
+    var colorWheel = {
+      '-1': [ eggplant, garnet, gold, orange, garnet ],
+      1: [ yellow, gold, garnet, orange, gold ],
+    }[ ySide ];
+
+    for ( var i=0; i < 5; i++ ) {
+      var rotor1 = new Zdog.Anchor({
+        addTo: dodecahedron,
+        rotate: { y: TAU/5 * (i) },
+      });
+      var rotor2 = new Zdog.Anchor({
+        addTo: rotor1,
+        rotate: { x: TAU/4*ySide - Math.atan(2) },
+      });
+
+      face.copy({
+        addTo: rotor2,
+        translate: { z: midradius },
+        rotate: { z: TAU/2 },
+        color: colorWheel[i],
+      });
+    }
+  });
+
+})();
+
+// ----- isocahedron ----- //
+
+( function() {
+
+  var isocahedron = new Zdog.Anchor({
+    addTo: illo,
+    translate: { x: 4, y: 4 },
+    scale: 1.2,
+  });
+
+  solids.push( isocahedron );
+
+  // geometry
+  // radius of triangle with side length = 1
+  var faceRadius = ROOT3/2 * 2/3;
+  var faceHeight = faceRadius * 3/2;
+  var capApothem = 0.5 / Math.tan( TAU/10 );
+  var capRadius = 0.5 / Math.sin( TAU/10 );
+  var capTilt = Math.asin( capApothem / faceHeight );
+  var capSagitta = capRadius - capApothem;
+  var sideTilt = Math.asin( capSagitta / faceHeight );
+  var sideHeight = Math.sqrt( faceHeight*faceHeight - capSagitta*capSagitta );
+
+  // var colorWheel = [ eggplant, garnet, orange, gold, yellow ];
+
+  [ -1, 1 ].forEach( function( ySide ) {
+    var capColors = {
+      '-1': [ garnet, gold, yellow, gold, orange ],
+      1: [ gold, garnet, eggplant, garnet, orange ],
+    }[ ySide ];
+
+    var sideColors = {
+      '-1': [ garnet, gold, yellow, orange, garnet ],
+      1: [ gold, garnet, eggplant, orange, orange ],
+    }[ ySide ];
+
+    for ( var i=0; i < 5; i++ ) {
+      var rotor = new Zdog.Anchor({
+        addTo: isocahedron,
+        rotate: { y: TAU/5 * -i },
+        translate: { y: sideHeight/2 * ySide },
+      });
+
+      var capRotateX = -capTilt;
+      var isYPos = ySide > 0;
+      capRotateX += isYPos ? TAU/2 : 0;
+
+      var capAnchor = new Zdog.Anchor({
+        addTo: rotor,
+        translate: { z: capApothem * ySide },
+        rotate: { x: capRotateX },
+      });
+
+      // cap face
+      var face = new Zdog.Polygon({
+        sides: 3,
+        radius: faceRadius,
+        addTo: capAnchor,
+        translate: { y: -faceRadius/2 },
+        stroke: false,
+        fill: true,
+        color: capColors[i],
+        // backface: false,
+      });
+
+      var sideRotateX = -sideTilt;
+      sideRotateX += isYPos ? 0 : TAU/2;
+      var sideAnchor = capAnchor.copy({
+        rotate: { x: sideRotateX },
+      });
+
+      face.copy({
+        addTo: sideAnchor,
+        translate: { y: -faceRadius/2 },
+        rotate: { y: TAU/2 },
+        color: sideColors[i]
+      });
+
+    }
+  });
+
+})();
+
+// -- animate --- //
+
+var keyframes = [
+  { x:   0, y:   0 },
+  { x:   0, y: TAU },
+  { x: TAU, y: TAU },
+];
+
+var ticker = 0;
+var cycleCount = 180;
+var turnLimit = keyframes.length - 1;
+
+function animate() {
+  update();
+  illo.renderGraph();
+  requestAnimationFrame( animate );
+}
+
+animate();
+
+function update() {
+
+  if ( isSpinning ) {
+    var progress = ticker / cycleCount;
+    var tween = Zdog.easeInOut( progress % 1, 4 );
+    var turn = Math.floor( progress % turnLimit );
+    var keyA = keyframes[ turn ];
+    var keyB = keyframes[ turn + 1 ];
+    viewRotation.x = Zdog.lerp( keyA.x, keyB.x, tween );
+    viewRotation.y = Zdog.lerp( keyA.y, keyB.y, tween );
+    ticker++;
+  }
+
+  solids.forEach( function( solid ) {
+    solid.rotate.set( viewRotation );
+  });
+
+  illo.updateGraph();
+}
+
+// ----- inputs ----- //
+
+var dragStartRX, dragStartRY;
+
+new Zdog.Dragger({
+  startElement: illoElem,
+  onDragStart: function() {
+    isSpinning = false;
+    dragStartRX = viewRotation.x;
+    dragStartRY = viewRotation.y;
+  },
+  onDragMove: function( pointer, moveX, moveY ) {
+    viewRotation.x = dragStartRX - ( moveY / displaySize * TAU );
+    viewRotation.y = dragStartRY - ( moveX / displaySize * TAU );
+  },
+});
diff --git a/zdogsolids/src/style.css b/zdogsolids/src/style.css
new file mode 100644
index 0000000..11adf33
--- /dev/null
+++ b/zdogsolids/src/style.css
@@ -0,0 +1,14 @@
+html { height: 100%; }
+
+body {
+  min-height: 100%;
+  margin: 0;
+}
+
+.illo {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: #CFD;
+  cursor: move;
+}
\ No newline at end of file
diff --git a/zig-zag-gradient-lab/README.markdown b/zig-zag-gradient-lab/README.markdown
new file mode 100644
index 0000000..3263a07
--- /dev/null
+++ b/zig-zag-gradient-lab/README.markdown
@@ -0,0 +1,5 @@
+# Zig-zag gradient lab
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/michellebarker/pen/abdKLLz](https://codepen.io/michellebarker/pen/abdKLLz).
+
+
diff --git a/zig-zag-gradient-lab/dist/index.html b/zig-zag-gradient-lab/dist/index.html
new file mode 100644
index 0000000..071f265
--- /dev/null
+++ b/zig-zag-gradient-lab/dist/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Zig-zag gradient lab</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="col">
+	<div class="controls">
+		<h1>Zig-zag gradient lab</h1>
+		<h3>Options</h3>
+		<div class="controls__group">
+		<label for="#angle">Angle</label>
+			<input type="range" min="5" max="85" id="angle" data-input="range">
+		</div>
+		<div class="controls__group">
+			<label for="#thickness">Stripe thickness</label>
+			<input type="range" min="0.1" max="4" step="0.1" id="thickness" data-input="thickness">
+		</div>
+		<div class="controls__group">
+			<label for="#width">Segment width</label>
+			<input type="range" min="1" max="12" step="0.1" id="width" data-input="width">
+		</div>
+		<div class="controls__group">
+			<label for="#color1">Primary colour</label>
+			<input type="range" min="0" max="360" step="1" id="color1" data-input="color1">
+		</div>
+		<div class="controls__group">
+			<label for="#color1">Contrast</label>
+			<input type="range" min="50" max="90" step="1" id="contrast" data-input="contrast">
+		</div>
+
+		<h3>CSS output</h3>
+		<div class="css" data-output></div>
+	</div>
+</div>
+
+<div class="bg" data-bg></div>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.19/lodash.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/zig-zag-gradient-lab/dist/script.js b/zig-zag-gradient-lab/dist/script.js
new file mode 100644
index 0000000..02cff9a
--- /dev/null
+++ b/zig-zag-gradient-lab/dist/script.js
@@ -0,0 +1,166 @@
+const angleInput = document.querySelector('[data-input="range"]')
+const thicknessInput = document.querySelector('[data-input="thickness"]')
+const widthInput = document.querySelector('[data-input="width"]')
+const colorInput = document.querySelector('[data-input="color1"]')
+const contrastInput = document.querySelector('[data-input="contrast"]')
+const outputContainer = document.querySelector('[data-output]')
+const bg = document.querySelector('[data-bg]')
+const inputs = [...document.querySelectorAll('[data-input]')]
+
+const angleChange = (e) => {
+	const newAngle = `${e.target.value}deg`
+	setItem('--angle', newAngle, 'angle', e.target.value)
+}
+
+const thicknessChange = (e) => {
+	const newThickness = `${e.target.value}rem`
+	setItem('--t', newThickness, 'thickness', e.target.value)
+}
+
+const setItem = (cssVar, newValue, property, unitlessValue) => {
+	bg.style.setProperty(cssVar, newValue)
+	getCSSOutput()
+	localStorage.setItem(property, unitlessValue)
+}
+
+const widthChange = (e) => {
+	const newWidth = `${e.target.value}rem`
+	setItem('--w', newWidth, 'width', e.target.value)
+}
+
+const colorChange = (e) => {
+	const newColor = `${e.target.value}deg`
+	setItem('--h1', newColor, 'color', e.target.value)
+}
+
+const setContrast = (contrast) => {
+	const newL = `${contrast}%`
+	const newD = `${100 - contrast}%`
+	bg.style.setProperty('--l', newL)
+	bg.style.setProperty('--d', newD)
+}
+
+const contrastChange = (e) => {
+	setContrast(e.target.value)
+	getCSSOutput()
+	localStorage.setItem('contrast', e.target.value)
+}
+
+const getCSSOutput = () => {
+	const { backgroundImage, backgroundSize } = getComputedStyle(bg)
+	const backgroundImageAfter = getComputedStyle(bg, '::after').backgroundImage
+	const mask = getComputedStyle(bg, '::after').maskImage
+	const cssOutput = `
+<pre>
+.bg {
+	background-image: ${backgroundImage};
+	background-size: ${backgroundSize};
+}
+
+.bg::after {
+	background-image: ${backgroundImageAfter};
+	background-size: ${backgroundSize};
+	-webkit-mask-image: ${mask};
+	mask-image: ${mask};
+}
+</pre>`
+	
+	outputContainer.innerHTML = cssOutput
+}
+
+const setStyle = (input, property, unitlessValue, value) => {
+	if (unitlessValue) {
+		input.value = unitlessValue
+		bg.style.setProperty(property, value)
+	}
+}
+
+const getInitialStateFromLocalStorage = () => {
+	const angle = localStorage.getItem('angle')
+	const thickness = localStorage.getItem('thickness')
+	const width = localStorage.getItem('width')
+	const color = localStorage.getItem('color')
+	const contrast = localStorage.getItem('contrast')
+	
+	setStyle(angleInput, '--angle', angle, `${angle}deg`)
+	setStyle(thicknessInput, '--t', thickness,  `${thickness}rem`)
+	setStyle(widthInput, '--w', width, `${width}rem`)
+	setStyle(colorInput, '--h1', color, `${color}deg`)
+	
+	if (contrast) {
+		setContrast(contrast)
+		contrastInput.value = contrast
+	}
+}
+
+getInitialStateFromLocalStorage()
+getCSSOutput()
+
+angleInput.addEventListener('change', angleChange)
+thicknessInput.addEventListener('change', thicknessChange)
+widthInput.addEventListener('change', widthChange)
+colorInput.addEventListener('change', colorChange)
+contrastInput.addEventListener('change', contrastChange)
+
+let activeInput
+
+const handleMouseDown = (e) => {
+	console.log(e)
+	activeInput = e.target
+}
+
+const updateValues = (e) => {
+	const { id } = e.target
+	
+	if (id === 'angle') {
+		angleChange(e)
+	}
+	
+	if (id === 'thickness') {
+		thicknessChange(e)
+	}
+	
+	if (id === 'color1') {
+		colorChange(e)
+	}
+	
+	if (id === 'width') {
+		widthChange(e)
+	}
+	
+	if (id === 'contrast') {
+		contrastChange(e)
+	}
+}
+
+const handleMouseMove = (e) => {
+	if (activeInput === e.target) {
+		updateValues(e)
+	}
+}
+
+inputs.forEach(el => {
+	el.addEventListener('mousedown', handleMouseDown)
+	el.addEventListener('mousemove', _.throttle(handleMouseMove, 100))
+})
+
+CSS.registerProperty({
+  name: '--angle',
+  syntax: '<angle>',
+  inherits: true,
+  initialValue: '45deg',
+})
+
+CSS.registerProperty({
+  name: '--t',
+  syntax: '<length>',
+  inherits: true,
+  initialValue: '30px',
+})
+
+CSS.registerProperty({
+  name: '--w',
+  syntax: '<length>',
+  inherits: true,
+  initialValue: '30px',
+})
\ No newline at end of file
diff --git a/zig-zag-gradient-lab/dist/style.css b/zig-zag-gradient-lab/dist/style.css
new file mode 100644
index 0000000..ca793db
--- /dev/null
+++ b/zig-zag-gradient-lab/dist/style.css
@@ -0,0 +1,86 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Open Sans", sans-serif;
+  margin: 0;
+}
+@media (min-width: 40em) {
+  body {
+    display: flex;
+  }
+}
+
+.bg {
+  --h1: 0deg;
+  --h2: calc(var(--h1) + 120deg);
+  --h3: calc(var(--h2) + 45deg);
+  --l1: 50%;
+  --c1: hsl(var(--h1, 0), 90%, var(--l1));
+  --c2: hsl(var(--h2), 90%, var(--l, 70%));
+  --c3: hsl(var(--h3), 60%, var(--d, 40%));
+  --t: 2rem;
+  --w: 3rem;
+  --angle: 45deg;
+  --grad: var(--c1) var(--t), var(--c1) calc(var(--t) * 2), var(--c2) calc(var(--t) * 2), var(--c2) calc(var(--t) * 3), var(--c3) calc(var(--t) * 3), var(--c3) calc(var(--t) * 4);
+  --mask: repeating-linear-gradient(to right, black var(--w), black calc(var(--w) * 2), transparent calc(var(--w) * 2), transparent calc(var(--w) * 3));
+  background: repeating-linear-gradient(var(--angle), var(--grad)), var(--c1);
+  background-size: var(--w) 100%;
+  height: 100vh;
+  position: relative;
+  flex: 1 0 auto;
+  transition: --angle 200ms, --t 200ms, --w 200ms;
+}
+
+.bg::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: '';
+  background: repeating-linear-gradient(calc(var(--angle) * -1), var(--grad)), var(--c1);
+  background-size: var(--w) 100%;
+  -webkit-mask-image: var(--mask);
+  mask-image: var(--mask);
+}
+
+.controls {
+  padding: 1rem;
+  background-color: white;
+  max-width: 30rem;
+  z-index: 1;
+  box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.3);
+}
+@media (min-width: 40em) {
+  .controls {
+    display: inline-block;
+    position: fixed;
+    overflow: scroll;
+    top: 0;
+    left: 0;
+    height: 100%;
+  }
+}
+
+pre {
+  max-width: 100%;
+  overflow: scroll;
+  background: #f0f0f0;
+  padding: 1rem;
+  border-radius: 0.2rem;
+}
+
+.controls__group {
+  display: flex;
+  align-items: center;
+  max-width: 20rem;
+}
+.controls__group label {
+  margin-right: 1rem;
+}
+.controls__group input {
+  margin-left: auto;
+}
\ No newline at end of file
diff --git a/zig-zag-gradient-lab/license.txt b/zig-zag-gradient-lab/license.txt
new file mode 100644
index 0000000..f069986
--- /dev/null
+++ b/zig-zag-gradient-lab/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Michelle Barker (https://codepen.io/michellebarker/pen/abdKLLz)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/zig-zag-gradient-lab/src/index.html b/zig-zag-gradient-lab/src/index.html
new file mode 100644
index 0000000..2934b1a
--- /dev/null
+++ b/zig-zag-gradient-lab/src/index.html
@@ -0,0 +1,31 @@
+<div class="col">
+	<div class="controls">
+		<h1>Zig-zag gradient lab</h1>
+		<h3>Options</h3>
+		<div class="controls__group">
+		<label for="#angle">Angle</label>
+			<input type="range" min="5" max="85" id="angle" data-input="range">
+		</div>
+		<div class="controls__group">
+			<label for="#thickness">Stripe thickness</label>
+			<input type="range" min="0.1" max="4" step="0.1" id="thickness" data-input="thickness">
+		</div>
+		<div class="controls__group">
+			<label for="#width">Segment width</label>
+			<input type="range" min="1" max="12" step="0.1" id="width" data-input="width">
+		</div>
+		<div class="controls__group">
+			<label for="#color1">Primary colour</label>
+			<input type="range" min="0" max="360" step="1" id="color1" data-input="color1">
+		</div>
+		<div class="controls__group">
+			<label for="#color1">Contrast</label>
+			<input type="range" min="50" max="90" step="1" id="contrast" data-input="contrast">
+		</div>
+
+		<h3>CSS output</h3>
+		<div class="css" data-output></div>
+	</div>
+</div>
+
+<div class="bg" data-bg></div>
\ No newline at end of file
diff --git a/zig-zag-gradient-lab/src/script.js b/zig-zag-gradient-lab/src/script.js
new file mode 100644
index 0000000..02cff9a
--- /dev/null
+++ b/zig-zag-gradient-lab/src/script.js
@@ -0,0 +1,166 @@
+const angleInput = document.querySelector('[data-input="range"]')
+const thicknessInput = document.querySelector('[data-input="thickness"]')
+const widthInput = document.querySelector('[data-input="width"]')
+const colorInput = document.querySelector('[data-input="color1"]')
+const contrastInput = document.querySelector('[data-input="contrast"]')
+const outputContainer = document.querySelector('[data-output]')
+const bg = document.querySelector('[data-bg]')
+const inputs = [...document.querySelectorAll('[data-input]')]
+
+const angleChange = (e) => {
+	const newAngle = `${e.target.value}deg`
+	setItem('--angle', newAngle, 'angle', e.target.value)
+}
+
+const thicknessChange = (e) => {
+	const newThickness = `${e.target.value}rem`
+	setItem('--t', newThickness, 'thickness', e.target.value)
+}
+
+const setItem = (cssVar, newValue, property, unitlessValue) => {
+	bg.style.setProperty(cssVar, newValue)
+	getCSSOutput()
+	localStorage.setItem(property, unitlessValue)
+}
+
+const widthChange = (e) => {
+	const newWidth = `${e.target.value}rem`
+	setItem('--w', newWidth, 'width', e.target.value)
+}
+
+const colorChange = (e) => {
+	const newColor = `${e.target.value}deg`
+	setItem('--h1', newColor, 'color', e.target.value)
+}
+
+const setContrast = (contrast) => {
+	const newL = `${contrast}%`
+	const newD = `${100 - contrast}%`
+	bg.style.setProperty('--l', newL)
+	bg.style.setProperty('--d', newD)
+}
+
+const contrastChange = (e) => {
+	setContrast(e.target.value)
+	getCSSOutput()
+	localStorage.setItem('contrast', e.target.value)
+}
+
+const getCSSOutput = () => {
+	const { backgroundImage, backgroundSize } = getComputedStyle(bg)
+	const backgroundImageAfter = getComputedStyle(bg, '::after').backgroundImage
+	const mask = getComputedStyle(bg, '::after').maskImage
+	const cssOutput = `
+<pre>
+.bg {
+	background-image: ${backgroundImage};
+	background-size: ${backgroundSize};
+}
+
+.bg::after {
+	background-image: ${backgroundImageAfter};
+	background-size: ${backgroundSize};
+	-webkit-mask-image: ${mask};
+	mask-image: ${mask};
+}
+</pre>`
+	
+	outputContainer.innerHTML = cssOutput
+}
+
+const setStyle = (input, property, unitlessValue, value) => {
+	if (unitlessValue) {
+		input.value = unitlessValue
+		bg.style.setProperty(property, value)
+	}
+}
+
+const getInitialStateFromLocalStorage = () => {
+	const angle = localStorage.getItem('angle')
+	const thickness = localStorage.getItem('thickness')
+	const width = localStorage.getItem('width')
+	const color = localStorage.getItem('color')
+	const contrast = localStorage.getItem('contrast')
+	
+	setStyle(angleInput, '--angle', angle, `${angle}deg`)
+	setStyle(thicknessInput, '--t', thickness,  `${thickness}rem`)
+	setStyle(widthInput, '--w', width, `${width}rem`)
+	setStyle(colorInput, '--h1', color, `${color}deg`)
+	
+	if (contrast) {
+		setContrast(contrast)
+		contrastInput.value = contrast
+	}
+}
+
+getInitialStateFromLocalStorage()
+getCSSOutput()
+
+angleInput.addEventListener('change', angleChange)
+thicknessInput.addEventListener('change', thicknessChange)
+widthInput.addEventListener('change', widthChange)
+colorInput.addEventListener('change', colorChange)
+contrastInput.addEventListener('change', contrastChange)
+
+let activeInput
+
+const handleMouseDown = (e) => {
+	console.log(e)
+	activeInput = e.target
+}
+
+const updateValues = (e) => {
+	const { id } = e.target
+	
+	if (id === 'angle') {
+		angleChange(e)
+	}
+	
+	if (id === 'thickness') {
+		thicknessChange(e)
+	}
+	
+	if (id === 'color1') {
+		colorChange(e)
+	}
+	
+	if (id === 'width') {
+		widthChange(e)
+	}
+	
+	if (id === 'contrast') {
+		contrastChange(e)
+	}
+}
+
+const handleMouseMove = (e) => {
+	if (activeInput === e.target) {
+		updateValues(e)
+	}
+}
+
+inputs.forEach(el => {
+	el.addEventListener('mousedown', handleMouseDown)
+	el.addEventListener('mousemove', _.throttle(handleMouseMove, 100))
+})
+
+CSS.registerProperty({
+  name: '--angle',
+  syntax: '<angle>',
+  inherits: true,
+  initialValue: '45deg',
+})
+
+CSS.registerProperty({
+  name: '--t',
+  syntax: '<length>',
+  inherits: true,
+  initialValue: '30px',
+})
+
+CSS.registerProperty({
+  name: '--w',
+  syntax: '<length>',
+  inherits: true,
+  initialValue: '30px',
+})
\ No newline at end of file
diff --git a/zig-zag-gradient-lab/src/style.scss b/zig-zag-gradient-lab/src/style.scss
new file mode 100644
index 0000000..c0fa5df
--- /dev/null
+++ b/zig-zag-gradient-lab/src/style.scss
@@ -0,0 +1,87 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	font-family: "Open Sans", sans-serif;
+	margin: 0;
+	
+	@media (min-width: 40em) {
+		display: flex;
+	}
+}
+
+.bg {
+	--h1: 0deg;
+	--h2: calc(var(--h1) + 120deg);
+	--h3: calc(var(--h2) + 45deg);
+	--l1: 50%;
+	--c1: hsl(var(--h1, 0), 90%, var(--l1));
+	--c2: hsl(var(--h2), 90%, var(--l, 70%));
+	--c3: hsl(var(--h3), 60%, var(--d, 40%));
+	--t: 2rem;
+	--w: 3rem;
+	--angle: 45deg;
+	--grad: var(--c1) var(--t), var(--c1) calc(var(--t) * 2), var(--c2) calc(var(--t) * 2), var(--c2) calc(var(--t) * 3), var(--c3) calc(var(--t) * 3), var(--c3) calc(var(--t) * 4);
+	--mask: repeating-linear-gradient(to right, black var(--w), black calc(var(--w) * 2), transparent calc(var(--w) * 2), transparent calc(var(--w) * 3));
+	background: repeating-linear-gradient(var(--angle), var(--grad)), var(--c1);
+	background-size: var(--w) 100%;
+	height: 100vh;
+	position: relative;
+	flex: 1 0 auto;
+	transition: --angle 200ms, --t 200ms, --w 200ms;
+}
+
+.bg::after {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	content: '';
+	background: repeating-linear-gradient(calc(var(--angle) * -1), var(--grad)), var(--c1);
+	background-size: var(--w) 100%;
+	-webkit-mask-image: var(--mask);
+	mask-image: var(--mask);
+}
+
+.controls {
+	padding: 1rem;
+	background-color: white;
+	max-width: 30rem;
+	z-index: 1;
+	box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.3);
+	
+	@media (min-width: 40em) {
+		display: inline-block;
+		position: fixed;
+		overflow: scroll;
+		top: 0;
+		left: 0;
+		height: 100%;
+	}
+}
+
+pre {
+	max-width: 100%;
+	overflow: scroll;
+	background: rgba(240, 240, 240, 1);
+	padding: 1rem;
+	border-radius: 0.2rem;
+}
+
+.controls__group {
+	display: flex;
+	align-items: center;
+	max-width: 20rem;
+	
+	label {
+		margin-right: 1rem;
+	}
+	
+	input {
+		margin-left: auto;
+	}
+}
\ No newline at end of file
diff --git a/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/README.markdown b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/README.markdown
new file mode 100644
index 0000000..cda1230
--- /dev/null
+++ b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/README.markdown
@@ -0,0 +1,7 @@
+# ZzFX  Sound Board - Zuper Zmall Zeeded Zound Zynth
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/KilledByAPixel/pen/BaowKzv](https://codepen.io/KilledByAPixel/pen/BaowKzv).
+
+This is an example of how to use ZzFX sounds on your website. ZzFX is a tool for creating and playing sound effects with JavaScript. It's easy to use and open source on GitHub!
+
+https://zzfx.3d2k.com
diff --git a/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/dist/index.html b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/dist/index.html
new file mode 100644
index 0000000..0545e35
--- /dev/null
+++ b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/dist/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - ZzFX  Sound Board - Zuper Zmall Zeeded Zound Zynth</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<body bgcolor=#223><center>
+<div style=font-size:35px><b>ℤ𝕫𝔽𝕏 - Zuper Zmall Zound Zynth</b></div>
+<div style=font-size:20px><i>Example sound effects created and played using ZzFX</i></div>
+<div style=max-width:849px>
+<div style=font-size:20px>
+<input id=volume type=range value=.3 min=0 max=1 step=.01 oninput='zzfxV=volume.value;volumeText.innerHTML=volume.value*100|0'></input>
+Volume <span id=volumeText>30</span> %
+</div>
+
+<button onClick=zzfx(...[,,1675,,.06,.24,1,1.82,,,837,.06])>💰</button>
+<button onClick=zzfx(...[,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17])>🥊</button>
+<button onClick=zzfx(...[,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04])>✨</button>
+<button onClick=zzfx(...[,,80,.3,.4,.7,2,.1,-0.73,3.42,-430,.09,.17,,,,.19])>🌟</button>
+<button onClick=zzfx(...[,,537,.02,.02,.22,1,1.59,-6.98,4.97])>💓</button>
+<button onClick=zzfx(...[,,528,.01,,.48,,.6,-11.6,,,,.32,4.2])>💔</button>
+<button onClick=zzfx(...[,,20,.04,,.6,,1.31,,,-990,.06,.17,,,.04,.07])>💖</button>
+<button onClick=zzfx(...[,,662,.82,.11,.33,1,0,,-0.2,,,,1.2,,.26,.01])>👾</button>
+
+<button onClick=zzfx(...[1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01])>🎹</button>
+<button onClick=zzfx(...[,,129,.01,,.15,,,,,,,,5])>🥁</button>
+<button onClick=zzfx(...[,,333,.01,0,.9,4,1.9,,,,,,.5,,.6])>💥</button>
+<button onClick=zzfx(...[,,418,0,.02,.2,4,1.15,-8.5,,,,,.7,,.1]);>🧨</button>
+<button onClick=zzfx(...[,.3,1975,.08,.56,.02,,,-0.4,,-322,.56,.41,,,,.25])>🐦</button>
+<button onClick=zzfx(...[,.1,75,.03,.08,.17,1,1.88,7.83,,,,,.4])>🦘</button>
+<button onClick=zzfx(...[,.9,1306,.8,.08,.02,1,,,,,,.48,,-0.1,.11,.25])>🐬</button>
+<button onClick=zzfx(...[,.2,1e3,.02,,.01,2,,18,,475,.01,.01])>🐁</button>
+
+<button onClick=zzfx(...[2,.8,999,,,,,1.5,,.3,-99,.1,1.63,,,.11,.22])>🔔</button>
+<button onClick=zzfx(...[,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1])>🛰️</button>
+<button onClick=zzfx(...[,0,1600,.13,.52,.61,1,1.1,,,,,,.1,,.14])>☎️</button>
+<button onClick=zzfx(...[,,224,.02,.02,.08,1,1.7,-13.9,,,,,,6.7])>🍾</button>
+<button onClick=zzfx(...[,,941,.8,,.8,4,.74,-222,,,,,.8,,1])>🚀</button>
+<button onClick=zzfx(...[,,172,.8,,.8,1,.76,7.7,3.73,-482,.08,.15,,.14])>🛸</button>
+<button onClick=zzfx(...[,,448,.01,.1,.3,3,.39,-0.5,,,,,,.2,.1,.08])>🔫</button>
+<button onClick=zzfx(...[,,150,.05,,.05,,1.3,,,,,,3])>🏌️</button>
+ 
+<button onClick=zzfx(...[,.2,40,.5,,1.5,,11,,,,,,199])>🌊</button>
+<button onClick=zzfx(...[,0,960,,1,.01,,.8,-0.01,,-190,.5,,.05,,,1])>🚒</button>
+<button onClick=zzfx(...[1.2,0,250,.02,,.15,4,.1,,,,,,,,.01,.01])>🚘</button>
+<button onClick=zzfx(...[,,44,.04,.15,.3,4,.8,,,,,,2,,.14,.39])>🚚</button>
+<button onClick=zzfx(...[.5,,304,.1,.3,,5,.1,-46,,,,,,-165])>⚡</button>
+<button onClick=zzfx(...[,,63,,1,,1,1.5,,,,,,,,3.69,.08])>💫</button>
+<button onClick=zzfx(...[,,1e3,,,.5,,,,,99,.01,.03])>🧗</button>
+<button onClick=zzfx(...[,,9220,.01,,,,5,,,,,,9])>🧹</button>
+  
+</div>
+<a href=https://zzfx.3d2k.com target=_blank>ZzFX Sound Effect Designer at zzfx.3d2k.com ☮♥☻␌</a>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/dist/script.js b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/dist/script.js
new file mode 100644
index 0000000..093ab94
--- /dev/null
+++ b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/dist/script.js
@@ -0,0 +1,10 @@
+// ZzFX - Zuper Zmall Zound Zynth - Micro Edition
+// MIT License - Copyright 2019 Frank Force
+// https://github.com/KilledByAPixel/ZzFX
+'use strict';let zzfx,zzfxV,zzfxX
+
+// ZzFXMicro - Zuper Zmall Zound Zynth 
+zzfxV=.3 // volume
+zzfx=    // play sound
+(J=1,K=.05,h=220,f=0,k=0,n=.1,g=0,A=1,r=0,B=0,t=0,C=0,u=0,D=0,v=0,L=0,e=0,c=2*Math.PI,b=44100,w=p=>2*p*Math.random()-p,x=p=>0<p?1:-1,M=r*=500*c/b**2,E=h*=(1+w(K))*c/b,N=x(v)*c/4,q=[],F=0,G=0,d=0,l=1,H=0,I=0,a=0,O=.5,m,y,z=zzfxX.createBufferSource())=>{f=50+f*b|0;k=k*b|0;n=n*b|0;e=e*b|0;B*=500*c/b**3;m=f+k+n+e;v*=c/b;t*=c/b;C*=b;for(u*=b;d<m;q[d++]=a)++I>100*L&&(I=0,a=F*h*Math.sin(G*v-N),a=g?1<g?2<g?3<g?4<g?x((a/c%1+1)%1-(O+=1e3*A/b)%1):Math.sin((a%c)**3):Math.max(Math.min(Math.tan(a),1),-1):1-(2*a/c%2+2)%2:1-4*Math.abs(Math.round(a/c)-a/c):Math.sin(a),5>g&&(a=x(a)*Math.abs(a)**A),a*=J*zzfxV*(d<f?d/f:d<f+k?1:d<m-e?1-(d-f-k)/n:0),a=e?a/2+(e>d?0:(d<m-e?1:(d-m)/e)*q[d-e]/2):a),F+=1+w(D),G+=1+w(D),h+=r+=B,l&&++l>C&&(E+=t,h+=t,l=0),u&&++H>u&&(h=E,r=M,H=1,l=l||1);y=zzfxX.createBuffer(1,q.length,b);y.getChannelData(0).set(q);z.buffer=y;z.connect(zzfxX.destination);z.start()}
+zzfxX=new(window.AudioContext||webkitAudioContext);zzfxX.z=zzfxX.createBufferSource;zzfxX.createBufferSource=(s=zzfxX.z())=>(s.start=s.start||(t=>zzfxX.noteOn(t)),s)
\ No newline at end of file
diff --git a/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/dist/style.css b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/dist/style.css
new file mode 100644
index 0000000..0bb8212
--- /dev/null
+++ b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/dist/style.css
@@ -0,0 +1,12 @@
+button
+{
+  height:100px;
+  width:100px;
+  font-size:60px;
+  border:3px solid;
+  border-radius: 15px;
+  background:#BBB;
+}
+div { color:#FFF; }
+a { color:#5FF; }
+a:visited { color:#A5A; }
\ No newline at end of file
diff --git a/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/license.txt b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/license.txt
new file mode 100644
index 0000000..d04ebce
--- /dev/null
+++ b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/license.txt
@@ -0,0 +1,8 @@
+Copyright (c) 2020 by Frank Force (https://codepen.io/KilledByAPixel/pen/BaowKzv)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/src/index.html b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/src/index.html
new file mode 100644
index 0000000..149caf2
--- /dev/null
+++ b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/src/index.html
@@ -0,0 +1,47 @@
+<body bgcolor=#223><center>
+<div style=font-size:35px><b>ℤ𝕫𝔽𝕏 - Zuper Zmall Zound Zynth</b></div>
+<div style=font-size:20px><i>Example sound effects created and played using ZzFX</i></div>
+<div style=max-width:849px>
+<div style=font-size:20px>
+<input id=volume type=range value=.3 min=0 max=1 step=.01 oninput='zzfxV=volume.value;volumeText.innerHTML=volume.value*100|0'></input>
+Volume <span id=volumeText>30</span> %
+</div>
+
+<button onClick=zzfx(...[,,1675,,.06,.24,1,1.82,,,837,.06])>💰</button>
+<button onClick=zzfx(...[,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17])>🥊</button>
+<button onClick=zzfx(...[,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04])>✨</button>
+<button onClick=zzfx(...[,,80,.3,.4,.7,2,.1,-0.73,3.42,-430,.09,.17,,,,.19])>🌟</button>
+<button onClick=zzfx(...[,,537,.02,.02,.22,1,1.59,-6.98,4.97])>💓</button>
+<button onClick=zzfx(...[,,528,.01,,.48,,.6,-11.6,,,,.32,4.2])>💔</button>
+<button onClick=zzfx(...[,,20,.04,,.6,,1.31,,,-990,.06,.17,,,.04,.07])>💖</button>
+<button onClick=zzfx(...[,,662,.82,.11,.33,1,0,,-0.2,,,,1.2,,.26,.01])>👾</button>
+
+<button onClick=zzfx(...[1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01])>🎹</button>
+<button onClick=zzfx(...[,,129,.01,,.15,,,,,,,,5])>🥁</button>
+<button onClick=zzfx(...[,,333,.01,0,.9,4,1.9,,,,,,.5,,.6])>💥</button>
+<button onClick=zzfx(...[,,418,0,.02,.2,4,1.15,-8.5,,,,,.7,,.1]);>🧨</button>
+<button onClick=zzfx(...[,.3,1975,.08,.56,.02,,,-0.4,,-322,.56,.41,,,,.25])>🐦</button>
+<button onClick=zzfx(...[,.1,75,.03,.08,.17,1,1.88,7.83,,,,,.4])>🦘</button>
+<button onClick=zzfx(...[,.9,1306,.8,.08,.02,1,,,,,,.48,,-0.1,.11,.25])>🐬</button>
+<button onClick=zzfx(...[,.2,1e3,.02,,.01,2,,18,,475,.01,.01])>🐁</button>
+
+<button onClick=zzfx(...[2,.8,999,,,,,1.5,,.3,-99,.1,1.63,,,.11,.22])>🔔</button>
+<button onClick=zzfx(...[,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1])>🛰️</button>
+<button onClick=zzfx(...[,0,1600,.13,.52,.61,1,1.1,,,,,,.1,,.14])>☎️</button>
+<button onClick=zzfx(...[,,224,.02,.02,.08,1,1.7,-13.9,,,,,,6.7])>🍾</button>
+<button onClick=zzfx(...[,,941,.8,,.8,4,.74,-222,,,,,.8,,1])>🚀</button>
+<button onClick=zzfx(...[,,172,.8,,.8,1,.76,7.7,3.73,-482,.08,.15,,.14])>🛸</button>
+<button onClick=zzfx(...[,,448,.01,.1,.3,3,.39,-0.5,,,,,,.2,.1,.08])>🔫</button>
+<button onClick=zzfx(...[,,150,.05,,.05,,1.3,,,,,,3])>🏌️</button>
+ 
+<button onClick=zzfx(...[,.2,40,.5,,1.5,,11,,,,,,199])>🌊</button>
+<button onClick=zzfx(...[,0,960,,1,.01,,.8,-0.01,,-190,.5,,.05,,,1])>🚒</button>
+<button onClick=zzfx(...[1.2,0,250,.02,,.15,4,.1,,,,,,,,.01,.01])>🚘</button>
+<button onClick=zzfx(...[,,44,.04,.15,.3,4,.8,,,,,,2,,.14,.39])>🚚</button>
+<button onClick=zzfx(...[.5,,304,.1,.3,,5,.1,-46,,,,,,-165])>⚡</button>
+<button onClick=zzfx(...[,,63,,1,,1,1.5,,,,,,,,3.69,.08])>💫</button>
+<button onClick=zzfx(...[,,1e3,,,.5,,,,,99,.01,.03])>🧗</button>
+<button onClick=zzfx(...[,,9220,.01,,,,5,,,,,,9])>🧹</button>
+  
+</div>
+<a href=https://zzfx.3d2k.com target=_blank>ZzFX Sound Effect Designer at zzfx.3d2k.com ☮♥☻␌</a>
\ No newline at end of file
diff --git a/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/src/script.js b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/src/script.js
new file mode 100644
index 0000000..093ab94
--- /dev/null
+++ b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/src/script.js
@@ -0,0 +1,10 @@
+// ZzFX - Zuper Zmall Zound Zynth - Micro Edition
+// MIT License - Copyright 2019 Frank Force
+// https://github.com/KilledByAPixel/ZzFX
+'use strict';let zzfx,zzfxV,zzfxX
+
+// ZzFXMicro - Zuper Zmall Zound Zynth 
+zzfxV=.3 // volume
+zzfx=    // play sound
+(J=1,K=.05,h=220,f=0,k=0,n=.1,g=0,A=1,r=0,B=0,t=0,C=0,u=0,D=0,v=0,L=0,e=0,c=2*Math.PI,b=44100,w=p=>2*p*Math.random()-p,x=p=>0<p?1:-1,M=r*=500*c/b**2,E=h*=(1+w(K))*c/b,N=x(v)*c/4,q=[],F=0,G=0,d=0,l=1,H=0,I=0,a=0,O=.5,m,y,z=zzfxX.createBufferSource())=>{f=50+f*b|0;k=k*b|0;n=n*b|0;e=e*b|0;B*=500*c/b**3;m=f+k+n+e;v*=c/b;t*=c/b;C*=b;for(u*=b;d<m;q[d++]=a)++I>100*L&&(I=0,a=F*h*Math.sin(G*v-N),a=g?1<g?2<g?3<g?4<g?x((a/c%1+1)%1-(O+=1e3*A/b)%1):Math.sin((a%c)**3):Math.max(Math.min(Math.tan(a),1),-1):1-(2*a/c%2+2)%2:1-4*Math.abs(Math.round(a/c)-a/c):Math.sin(a),5>g&&(a=x(a)*Math.abs(a)**A),a*=J*zzfxV*(d<f?d/f:d<f+k?1:d<m-e?1-(d-f-k)/n:0),a=e?a/2+(e>d?0:(d<m-e?1:(d-m)/e)*q[d-e]/2):a),F+=1+w(D),G+=1+w(D),h+=r+=B,l&&++l>C&&(E+=t,h+=t,l=0),u&&++H>u&&(h=E,r=M,H=1,l=l||1);y=zzfxX.createBuffer(1,q.length,b);y.getChannelData(0).set(q);z.buffer=y;z.connect(zzfxX.destination);z.start()}
+zzfxX=new(window.AudioContext||webkitAudioContext);zzfxX.z=zzfxX.createBufferSource;zzfxX.createBufferSource=(s=zzfxX.z())=>(s.start=s.start||(t=>zzfxX.noteOn(t)),s)
\ No newline at end of file
diff --git a/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/src/style.css b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/src/style.css
new file mode 100644
index 0000000..0bb8212
--- /dev/null
+++ b/zzfx-sound-boardzuper-zmall-zeeded-zound-zynth/src/style.css
@@ -0,0 +1,12 @@
+button
+{
+  height:100px;
+  width:100px;
+  font-size:60px;
+  border:3px solid;
+  border-radius: 15px;
+  background:#BBB;
+}
+div { color:#FFF; }
+a { color:#5FF; }
+a:visited { color:#A5A; }
\ No newline at end of file